tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fixs for light style

feature/markdown-support
Baptiste Lemoine 3 years ago
parent
895295e16e
commit
d106a91363
6 changed files with 175 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      app/javascript/mastodon/components/status_action_bar.js
  2. 63
      app/javascript/styles/bliss.scss
  3. 98
      app/javascript/styles/bliss/variables.scss
  4. 50
      app/javascript/styles/mastodon-light/diff.scss
  5. 6
      app/javascript/styles/mastodon-light/variables.scss
  6. 34
      app/javascript/styles/mastodon/variables.scss

43
app/javascript/mastodon/components/status_action_bar.js
Unescape View File

@ -41,14 +41,19 @@ const messages = defineMessages({
unmute : { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
unblock : { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
});
const ObfuscateCountReplies = false;
const obfuscatedCount = count => {
if (count < 0) {
return 0;
} else if (count <= 1) {
return count;
if (ObfuscateCountReplies) {
if (count < 0) {
return 0;
} else if (count <= 1) {
return count;
} else {
return '1+';
}
} else {
return '1+';
return count;
}
};
@ -105,7 +110,7 @@ class StatusActionBar extends ImmutablePureComponent {
}
};
handleReplyUnderClick = () => {
this.props.showReplyFormUnder = true;
console.info('hop show');
};
handleShareClick = () => {
@ -235,6 +240,7 @@ class StatusActionBar extends ImmutablePureComponent {
render() {
const { status, relationship, intl, withDismiss } = this.props;
console.log('this.props', this.props);
const mutingConversation = status.get('muted');
const anonymousAccess = !me;
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@ -374,25 +380,22 @@ class StatusActionBar extends ImmutablePureComponent {
return (
<div className='status__action-bar'>
<div className='status__action-bar__counter'>
<IconButton
className='status__action-bar-button'
title={replyTitle}
icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
onClick={this.handleReplyClick}
/>
<IconButton
className='status__action-bar-button reply_under'
title={replyTitle}
icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
onClick={this.handleReplyUnderClick}
/>
{this.props.showReplyFormUnder && (
<span >
yes
</span >
)}
<span className='status__action-bar__counter__label'>{obfuscatedCount(status.get('replies_count'))}</span >
<span className='status__action-bar__counter__label'>({status.get('replies_count')})</span >
{/*{this.state.showReplyFormUnder && (*/}
{/* <span >*/}
{/* yes*/}
{/* </span >*/}
{/*)}*/}
{/*<span className='status__action-bar__counter__label'>{obfuscatedCount(status.get('replies_count'))}</span >*/}
<span className='status__action-bar__counter__label'>
{obfuscatedCount(status.get('replies_count'))}
</span >
</div >
<IconButton
className='status__action-bar-button'

63
app/javascript/styles/bliss.scss
Unescape View File

@ -1,32 +1,37 @@
@import 'bliss/variables';
@import 'bliss/mixins';
@import 'bliss/variables';
@import 'fonts/roboto';
@import 'fonts/roboto-mono';
@import 'fonts/montserrat';
//@import 'mastodon/variables';
@import 'mastodon-light/variables';
@import 'application';
@import 'mastodon-light/diff';
@import 'bliss/reset';
@import 'bliss/messaging';
@import 'bliss/basics';
@import 'bliss/containers';
@import 'bliss/lists';
@import 'bliss/footer';
@import 'bliss/compact_header';
@import 'bliss/widgets';
@import 'bliss/forms';
@import 'bliss/accounts';
@import 'bliss/statuses';
@import 'bliss/boost';
@import 'bliss/components';
@import 'bliss/polls';
@import 'bliss/introduction';
@import 'bliss/modal';
@import 'bliss/emoji_picker';
@import 'bliss/about';
@import 'bliss/tables';
@import 'bliss/admin';
@import 'bliss/dashboard';
@import 'bliss/rtl';
@import 'bliss/accessibility';
//@import 'bliss/variables';
//@import 'bliss/mixins';
//@import 'fonts/roboto';
//@import 'fonts/roboto-mono';
//@import 'fonts/montserrat';
//
//@import 'bliss/reset';
//@import 'bliss/messaging';
//@import 'bliss/basics';
//@import 'bliss/containers';
//@import 'bliss/lists';
//@import 'bliss/footer';
//@import 'bliss/compact_header';
//@import 'bliss/widgets';
//@import 'bliss/forms';
//@import 'bliss/accounts';
//@import 'bliss/statuses';
//@import 'bliss/boost';
//@import 'bliss/components';
//@import 'bliss/polls';
//@import 'bliss/introduction';
//@import 'bliss/modal';
//@import 'bliss/emoji_picker';
//@import 'bliss/about';
//@import 'bliss/tables';
//@import 'bliss/admin';
//@import 'bliss/dashboard';
//@import 'bliss/rtl';
//@import 'bliss/accessibility';

98
app/javascript/styles/bliss/variables.scss
Unescape View File

@ -1,54 +1,60 @@
// Commonly used web colors
$black: #111; // Black
$white: #fff; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #98c6ff !default; // Dark Goldenrod
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;
$action-button-color: $ui-base-lighter-color !default;
// For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
//$black: #000; // Black
//$white: #fff; // White
//$success-green: #6bbd77 !default; // Padua
//$error-red: #d4839b !default; // Cerise
//$warning-red: #528dc8 !default; // Sunset Orange
//$gold-star: #98c6ff !default; // Dark Goldenrod
/************************
BEGIN bliss specific variables
************************/
//$black: #000; // Black
//$white: #fff; // White
//$success-green: #6bbd77 !default; // Padua
//$error-red: red !default; // Cerise
//$warning-red: orange !default; // Sunset Orange
//$gold-star: #98c6ff !default; // Dark Goldenrod
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// fix
$no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px;
/************************
END bliss specific variables
************************/
/************************
light color set
*/
//$ui-base-color: $classic-secondary-color !default;
//$ui-base-lighter-color: #b0c0cf !default;
//$ui-primary-color: #9bcbed !default;
//$ui-secondary-color: $classic-base-color !default;
//$ui-highlight-color: #2b90d9 !default;
//
//$primary-text-color: $black !default;
//$darker-text-color: $classic-base-color !default;
//$dark-text-color: #444b5d !default;
//$action-button-color: #606984 !default;
//
//$inverted-text-color: $black !default;
//$lighter-text-color: $classic-base-color !default;
//$light-text-color: #444b5d !default;
//
////Newly added colors
//$account-background-color: $white !default;
/**
end light color set
*/

50
app/javascript/styles/mastodon-light/diff.scss
Unescape View File

@ -774,3 +774,53 @@ html {
.audio-player .video-player__time-total {
color: $primary-text-color;
}
body,
.tabs-bar__wrapper {
background: #9baec8 !important;
}
a {
color: #0b97c4;
&.column-link {
color: #222;
}
}
.search__input,
.compose-form .compose-form__buttons-wrapper {
background: $classic-secondary-color;
}
.search__input, {
&:focus {
color: white;
}
}
.compose-form__publish-button-wrapper {
.button {
width: 100%;
display: block;
float: none;
}
}
.links-started__footer {
a, li {
display: inline-block;
float: left;
margin-right: 2ch;
}
ul li {
list-style-type: none;
}
p {
float: left;
}
}

6
app/javascript/styles/mastodon-light/variables.scss
Unescape View File

@ -1,6 +1,6 @@
// Dependent colors
$black: #000000;
$white: #ffffff;
$white: #eeeeee;
$classic-base-color: #282c37;
$classic-primary-color: #9baec8;
@ -13,10 +13,10 @@ $success-green: lighten(#3c754d, 8%);
$base-overlay-background: $white !default;
$valid-value-color: $success-green !default;
$ui-base-color: $classic-secondary-color !important;
$ui-base-color: $base-overlay-background !default;
$ui-base-lighter-color: #b0c0cf;
$ui-primary-color: #9bcbed;
$ui-secondary-color: $classic-base-color !default;
$ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: #2b90d9;
$primary-text-color: $black !default;

34
app/javascript/styles/mastodon/variables.scss
Unescape View File

@ -1,18 +1,18 @@
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$red-bookmark: $warning-red;
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black !default;
@ -23,10 +23,10 @@ $valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
@ -41,14 +41,6 @@ $inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
// custom sheet made on https://www.cipherbliss.com
// Commonly used web colors
$black: #fff; // Black
$white: #000; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #00ec84 !default; // Dark Goldenrod
// User Interface Colors
$ui-base-color: #313644; // Midnight Express

Write Preview
Loading…
Cancel
Save