diff --git a/app/javascript/styles/chinwag.scss b/app/javascript/styles/chinwag.scss new file mode 100644 index 000000000..2184383a7 --- /dev/null +++ b/app/javascript/styles/chinwag.scss @@ -0,0 +1,24 @@ +@import 'mastodon/mixins'; +@import 'chinwag/variables'; +@import 'fonts/roboto'; +@import 'fonts/roboto-mono'; +@import 'fonts/montserrat'; + +@import 'mastodon/reset'; +@import 'mastodon/basics'; +@import 'mastodon/containers'; +@import 'mastodon/lists'; +@import 'mastodon/footer'; +@import 'mastodon/compact_header'; +@import 'mastodon/landing_strip'; +@import 'mastodon/forms'; +@import 'mastodon/accounts'; +@import 'mastodon/stream_entries'; +@import 'mastodon/components'; +@import 'mastodon/emoji_picker'; +@import 'mastodon/about'; +@import 'mastodon/tables'; +@import 'mastodon/admin'; +@import 'mastodon/rtl'; + +@import 'chinwag/overrides'; diff --git a/app/javascript/styles/chinwag/overrides.scss b/app/javascript/styles/chinwag/overrides.scss new file mode 100644 index 000000000..10b378133 --- /dev/null +++ b/app/javascript/styles/chinwag/overrides.scss @@ -0,0 +1,152 @@ +@import 'variables'; + +// Text-icons status buttons +.status, +.status.status-direct { + .icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.icon-button.overlayed { + background: rgba($white, .6); + + &:hover { + background: rgba($white, .6); + } +} + +// Boost button +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +// Spoilers button +.status__content, +.reply-indicator__content, { + .status__content__spoiler-link { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } + } +} + +// Toot input +.drawer__inner { + background: darken($classic-base-color, 15%) url('//static.chinwag.org/images/bar-sidebar.jpg') no-repeat bottom center / cover; + + > .mastodon { + background: url('//static.chinwag.org/images/chinwag-logo-circle-m.png') no-repeat center bottom / contain; + flex: 1; + } +} + +.compose-form .autosuggest-textarea__textarea, +.compose-form .spoiler-input__input { + color: $black; +} + +.compose-form__buttons { + background: rgba($white, 0.3); + + .icon-button.inverted, + .text-icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.compose-form__warning { + background: $classic-base-color; +} + +.reply-indicator { + background: $classic-base-color; + color: $black; + + * { + color: inherit; + } +} + +.privacy-dropdown__option, +.privacy-dropdown__option__content strong { + color: $classic-primary-color; +} + +.media-spoiler { + color: $classic-primary-color; + background: lighten($classic-base-color, 15%); + + &:hover { + color: $classic-highlight-color; + } +} + +.button { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } +} + +.upload-progress__tracker { + background: $classic-primary-color; +} diff --git a/app/javascript/styles/chinwag/variables.scss b/app/javascript/styles/chinwag/variables.scss new file mode 100644 index 000000000..38fe54582 --- /dev/null +++ b/app/javascript/styles/chinwag/variables.scss @@ -0,0 +1,42 @@ +// Commonly used web colors +$black: #000; // Black +$white: #fff; // White +$success-green: #79bd9a; // Padua +$error-red: #df405a; // Cerise +$warning-red: #ff5050; // Sunset Orange +$gold-star: #ca8f04; // Dark Goldenrod + +// Values from the classic Mastodon UI +$classic-base-color: #949494; //#282c37; // Midnight Express +$classic-primary-color: #282c37; //9baec8; // Echo Blue +$classic-secondary-color: #204c03; //d9e1e8; // Pattens Blue +$classic-highlight-color: #397313; // 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; +$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant + +// Buttons colors +$status-buttons-base-color: $ui-primary-color; +$status-buttons-active-color: $classic-highlight-color; +$status-buttons-disabled-color: rgba($status-buttons-base-color, .4); + +// Spoilers - Show More button +$status-spoilers-background: $classic-primary-color; +$status-spoilers-text: $white; +$status-spoilers-active-background: $classic-highlight-color; + +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; diff --git a/app/javascript/styles/chinwag_light.scss b/app/javascript/styles/chinwag_light.scss new file mode 100644 index 000000000..52bb20570 --- /dev/null +++ b/app/javascript/styles/chinwag_light.scss @@ -0,0 +1,24 @@ +@import 'mastodon/mixins'; +@import 'chinwag_light/variables'; +@import 'fonts/roboto'; +@import 'fonts/roboto-mono'; +@import 'fonts/montserrat'; + +@import 'mastodon/reset'; +@import 'mastodon/basics'; +@import 'mastodon/containers'; +@import 'mastodon/lists'; +@import 'mastodon/footer'; +@import 'mastodon/compact_header'; +@import 'mastodon/landing_strip'; +@import 'mastodon/forms'; +@import 'mastodon/accounts'; +@import 'mastodon/stream_entries'; +@import 'mastodon/components'; +@import 'mastodon/emoji_picker'; +@import 'mastodon/about'; +@import 'mastodon/tables'; +@import 'mastodon/admin'; +@import 'mastodon/rtl'; + +@import 'chinwag_light/overrides'; diff --git a/app/javascript/styles/chinwag_light/overrides.scss b/app/javascript/styles/chinwag_light/overrides.scss new file mode 100644 index 000000000..7300f23d6 --- /dev/null +++ b/app/javascript/styles/chinwag_light/overrides.scss @@ -0,0 +1,147 @@ +@import 'variables'; + +// Text-icons status buttons +.status, +.status.status-direct { + .icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.icon-button.overlayed { + background: rgba($white, .6); + + &:hover { + background: rgba($white, .6); + } +} + +// Boost button +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +// Spoilers button +.status__content, +.reply-indicator__content, { + .status__content__spoiler-link { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } + } +} + +// Toot input +.drawer__inner { + background: darken($classic-base-color, 15%); +} + +.autosuggest-textarea__textarea, +.spoiler-input__input { + color: $black; +} + +.compose-form__buttons { + background: rgba($white, 0.3); + + .icon-button.inverted, + .text-icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.compose-form__warning { + background: $classic-base-color; +} + +.reply-indicator { + background: $classic-base-color; + color: $black; + + * { + color: inherit; + } +} + +.privacy-dropdown__option, +.privacy-dropdown__option__content strong { + color: $classic-primary-color; +} + +.media-spoiler { + color: $classic-primary-color; + background: lighten($classic-base-color, 15%); + + &:hover { + color: $classic-highlight-color; + } +} + +.button { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } +} + +.upload-progress__tracker { + background: $classic-primary-color; +} diff --git a/app/javascript/styles/chinwag_light/variables.scss b/app/javascript/styles/chinwag_light/variables.scss new file mode 100644 index 000000000..ad58c9395 --- /dev/null +++ b/app/javascript/styles/chinwag_light/variables.scss @@ -0,0 +1,42 @@ +// Commonly used web colors +$black: #000; // Black +$white: #fff; // White +$success-green: #79bd9a; // Padua +$error-red: #df405a; // Cerise +$warning-red: #ff5050; // Sunset Orange +$gold-star: #ca8f04; // Dark Goldenrod + +// Values from the classic Mastodon UI +$classic-base-color: #9c9c9c; //#282c37; // Midnight Express +$classic-primary-color: #282c37; //9baec8; // Echo Blue +$classic-secondary-color: #204c03; //d9e1e8; // Pattens Blue +$classic-highlight-color: #397313; // 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; +$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant + +// Buttons colors +$status-buttons-base-color: $ui-primary-color; +$status-buttons-active-color: $classic-highlight-color; +$status-buttons-disabled-color: rgba($status-buttons-base-color, .4); + +// Spoilers - Show More button +$status-spoilers-background: $classic-primary-color; +$status-spoilers-text: $white; +$status-spoilers-active-background: $classic-highlight-color; + +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; diff --git a/app/javascript/styles/mastodon_light.scss b/app/javascript/styles/mastodon_light.scss new file mode 100644 index 000000000..a08b13c70 --- /dev/null +++ b/app/javascript/styles/mastodon_light.scss @@ -0,0 +1,24 @@ +@import 'mastodon/mixins'; +@import 'mastodon_light/variables'; +@import 'fonts/roboto'; +@import 'fonts/roboto-mono'; +@import 'fonts/montserrat'; + +@import 'mastodon/reset'; +@import 'mastodon/basics'; +@import 'mastodon/containers'; +@import 'mastodon/lists'; +@import 'mastodon/footer'; +@import 'mastodon/compact_header'; +@import 'mastodon/landing_strip'; +@import 'mastodon/forms'; +@import 'mastodon/accounts'; +@import 'mastodon/stream_entries'; +@import 'mastodon/components'; +@import 'mastodon/emoji_picker'; +@import 'mastodon/about'; +@import 'mastodon/tables'; +@import 'mastodon/admin'; +@import 'mastodon/rtl'; + +@import 'mastodon_light/overrides'; diff --git a/app/javascript/styles/mastodon_light/overrides.scss b/app/javascript/styles/mastodon_light/overrides.scss new file mode 100644 index 000000000..243451d62 --- /dev/null +++ b/app/javascript/styles/mastodon_light/overrides.scss @@ -0,0 +1,161 @@ +@import 'variables'; + +// Text-icons status buttons +.status, +.status.status-direct { + .icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.icon-button.overlayed { + background: rgba($white, .6); + + &:hover { + background: rgba($white, .6); + } +} + +// Boost button +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +// Spoilers button +.status__content, +.reply-indicator__content, { + .status__content__spoiler-link { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } + } +} + +// Toot input +.drawer__inner { + background: darken($classic-base-color, 15%); +} + +.drawer__inner__mastodon { + background: darken($classic-base-color, 15%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; +} + +.compose-form .autosuggest-textarea__textarea, +.compose-form .spoiler-input__input { + color: $black; +} + +.compose-form__buttons { + background: rgba($white, 0.3); + + .icon-button.inverted, + .text-icon-button { + color: $status-buttons-base-color; + + &:hover, + &:active, + &:focus { + color: $status-buttons-active-color; + } + + &.disabled { + color: $status-buttons-disabled-color; + } + } +} + +.compose-form__warning { + background: $classic-base-color; +} + +.reply-indicator { + background: $classic-base-color; + color: $black; + + * { + color: inherit; + } +} + +.privacy-dropdown__option, +.privacy-dropdown__option__content strong { + color: $classic-primary-color; +} + +.media-spoiler { + color: $classic-primary-color; + background: lighten($classic-base-color, 15%); + + &:hover { + color: $classic-highlight-color; + } +} + +.button { + background-color: lighten($classic-secondary-color, 10%); + color: $black; + + &:focus, + &:hover, + &:active { + background-color: lighten($classic-highlight-color, 10%); + } + + &:disabled { + background-color: rgba($classic-secondary-color, .4); + color: rgba($black, .4); + } +} + +.upload-progress__tracker { + background: $classic-primary-color; +} + +.activity-stream .status.light .display-name span { + color: $ui-highlight-color; +} + +.activity-stream-tabs a.active, +.activity-stream .status.light .status__content, +.activity-stream .status.light .display-name strong { + color: $black; +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon_light/variables.scss b/app/javascript/styles/mastodon_light/variables.scss new file mode 100644 index 000000000..4a9947d1d --- /dev/null +++ b/app/javascript/styles/mastodon_light/variables.scss @@ -0,0 +1,42 @@ +// Commonly used web colors +$black: #000; // Black +$white: #fff; // White +$success-green: #79bd9a; // Padua +$error-red: #df405a; // Cerise +$warning-red: #ff5050; // Sunset Orange +$gold-star: #ca8f04; // Dark Goldenrod + +// Values from the classic Mastodon UI +$classic-base-color: #d9e1e8; //#282c37; // Midnight Express +$classic-primary-color: #282c37; //9baec8; // Echo Blue +$classic-secondary-color: #1368a5; //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; +$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant + +// Buttons colors +$status-buttons-base-color: $ui-primary-color; +$status-buttons-active-color: $classic-highlight-color; +$status-buttons-disabled-color: rgba($status-buttons-base-color, .4); + +// Spoilers - Show More button +$status-spoilers-background: $classic-primary-color; +$status-spoilers-text: $white; +$status-spoilers-active-background: $classic-highlight-color; + +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;