diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
13 files changed, 854 insertions, 437 deletions
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index 9b36bfd8d..7bffb2e26 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -29,22 +29,22 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' .hicolor-privacy-icons { .status__visibility-icon.fa-globe, - .composer--options--dropdown--content--item .fa-globe { + .privacy-dropdown__option .fa-globe { color: #1976d2; } .status__visibility-icon.fa-unlock, - .composer--options--dropdown--content--item .fa-unlock { + .privacy-dropdown__option .fa-unlock { color: #388e3c; } .status__visibility-icon.fa-lock, - .composer--options--dropdown--content--item .fa-lock { + .privacy-dropdown__option .fa-lock { color: #ffa000; } .status__visibility-icon.fa-envelope, - .composer--options--dropdown--content--item .fa-envelope { + .privacy-dropdown__option .fa-envelope { color: #d32f2f; } } diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index ca9ba3ebf..c6cc6c615 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -30,6 +30,34 @@ } } +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + .about { padding: 20px; @@ -37,6 +65,14 @@ border-radius: 4px; } + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + &__header { margin-bottom: 30px; @@ -157,7 +193,7 @@ } } - .getting-started__footer { + .link-footer { padding: 0; margin-top: 60px; text-align: center; diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index da086833c..72d3aad1d 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -1,4 +1,4 @@ -.composer { +.compose-form { padding: 10px; .emoji-picker-dropdown { @@ -25,16 +25,16 @@ } } -.no-reduce-motion .composer--spoiler { +.no-reduce-motion .spoiler-input { transition: height 0.4s ease, opacity 0.4s ease; } -.composer--spoiler { +.spoiler-input { height: 0; transform-origin: bottom; opacity: 0.0; - &.composer--spoiler--visible { + &.spoiler-input--visible { height: 36px; margin-bottom: 11px; opacity: 1.0; @@ -64,7 +64,7 @@ } } -.composer--warning { +.compose-form__warning { color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; @@ -123,7 +123,7 @@ } } -.composer--reply { +.reply-indicator { margin: 0 0 10px; border-radius: 4px; padding: 10px; @@ -131,117 +131,117 @@ min-height: 23px; overflow-y: auto; flex: 0 2 auto; +} - & > header { - margin-bottom: 5px; - overflow: hidden; +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; - & > .account.small { color: $inverted-text-color; } + & > .account.small { color: $inverted-text-color; } +} - & > .cancel { - float: right; - line-height: 24px; - } - } +.reply-indicator__cancel { + float: right; + line-height: 24px; +} - & > .content { - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 14px; - line-height: 20px; - color: $inverted-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; - overflow: hidden; +.reply-indicator__content { + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 14px; + line-height: 20px; + color: $inverted-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; + overflow: hidden; - p, pre, blockquote { - margin-bottom: 20px; - white-space: pre-wrap; + p, pre, blockquote { + margin-bottom: 20px; + white-space: pre-wrap; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; } + } - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } + h1, h2, h3, h4, h5 { + margin-top: 20px; + margin-bottom: 20px; + } - h1, h2 { - font-weight: 700; - font-size: 18px; - } + h1, h2 { + font-weight: 700; + font-size: 18px; + } - h2 { - font-size: 16px; - } + h2 { + font-size: 16px; + } - h3, h4, h5 { - font-weight: 500; - } + h3, h4, h5 { + font-weight: 500; + } - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; + blockquote { + padding-left: 10px; + border-left: 3px solid $inverted-text-color; + color: $inverted-text-color; + white-space: normal; - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; } + } - b, strong { - font-weight: 700; - } + b, strong { + font-weight: 700; + } - em, i { - font-style: italic; - } + em, i { + font-style: italic; + } - sub { - font-size: smaller; - vertical-align: sub; - } + sub { + font-size: smaller; + vertical-align: sub; + } - sup { - font-size: smaller; - vertical-align: super; - } + sup { + font-size: smaller; + vertical-align: super; + } - ul, ol { - margin-left: 1em; + ul, ol { + margin-left: 1em; - p { - margin: 0; - } + p { + margin: 0; } + } - ul { - list-style-type: disc; - } + ul { + list-style-type: disc; + } - ol { - list-style-type: decimal; - } + ol { + list-style-type: decimal; + } - a { - color: $lighter-text-color; - text-decoration: none; + a { + color: $lighter-text-color; + text-decoration: none; - &:hover { text-decoration: underline } + &:hover { text-decoration: underline } - &.mention { - &:hover { - text-decoration: none; + &.mention { + &:hover { + text-decoration: none; - span { text-decoration: underline } - } + span { text-decoration: underline } } } } @@ -253,8 +253,12 @@ } } -.compose-form__autosuggest-wrapper, -.autosuggest-input { +.compose-form .compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form .autosuggest-textarea, +.compose-form .autosuggest-input { position: relative; width: 100%; @@ -284,10 +288,6 @@ all: unset; } - &:disabled { - background: $ui-secondary-color; - } - &:focus { outline: 0; } @@ -304,7 +304,7 @@ } } -.composer--textarea--icons { +.compose-form__textarea-icons { display: block; position: absolute; top: 29px; @@ -401,25 +401,25 @@ } } -.composer--upload_form { +.compose-form__upload-wrapper { overflow: hidden; +} - & > .content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-family: inherit; - padding: 5px; - overflow: hidden; - } +.compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + padding: 5px; + overflow: hidden; } -.composer--upload_form--item { +.compose-form__upload { flex: 1 1 0; margin: 5px; min-width: 40%; - & > div { + .compose-form__upload-thumbnail { position: relative; border-radius: 4px; height: 140px; @@ -459,52 +459,52 @@ } } -.composer--upload_form--actions { +.compose-form__upload__actions { background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); display: flex; align-items: flex-start; justify-content: space-between; } -.composer--upload_form--progress { +.upload-progress { display: flex; padding: 10px; color: $darker-text-color; overflow: hidden; - & > .fa { + .fa { font-size: 34px; margin-right: 10px; } - & > .message { - flex: 1 1 auto; + span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } +} - & > span { - display: block; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } +.upload-progress__message { + flex: 1 1 auto; +} - & > .backdrop { - position: relative; - margin-top: 5px; - border-radius: 6px; - width: 100%; - height: 6px; - background: $ui-base-lighter-color; - - & > .tracker { - position: absolute; - top: 0; - left: 0; - height: 6px; - border-radius: 6px; - background: $ui-highlight-color; - } - } - } +.upload-progress__backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: $ui-base-lighter-color; +} + +.upload-progress__tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; } .compose-form__modifiers { @@ -514,7 +514,7 @@ background: $simple-background-color; } -.composer--options-wrapper { +.compose-form__buttons-wrapper { padding: 10px; background: darken($simple-background-color, 8%); border-radius: 0 0 4px 4px; @@ -524,7 +524,7 @@ flex: 0 0 auto; } -.composer--options { +.compose-form__buttons { display: flex; flex: 0 0 auto; @@ -551,30 +551,41 @@ } } -.compose--counter-wrapper { +.character-counter__wrapper { align-self: center; margin-right: 4px; } -.composer--options--dropdown { - &.open { - & > .value { - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - color: $primary-text-color; - background: $ui-highlight-color; +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { transition: none; } - &.top { - & > .value { - border-radius: 0 0 4px 4px; - box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1); + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; } } } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } } -.composer--options--dropdown--content { +.privacy-dropdown__dropdown { position: absolute; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); @@ -583,14 +594,14 @@ transform-origin: 50% 0; } -.composer--options--dropdown--content--item { +.privacy-dropdown__option { display: flex; align-items: center; padding: 10px; color: $inverted-text-color; cursor: pointer; - & > .content { + .privacy-dropdown__option__content { flex: 1 1 auto; color: $lighter-text-color; @@ -608,7 +619,7 @@ background: $ui-highlight-color; color: $primary-text-color; - & > .content { + .privacy-dropdown__option__content { color: $primary-text-color; strong { color: $primary-text-color } @@ -618,31 +629,25 @@ &.active:hover { background: lighten($ui-highlight-color, 4%) } } -.composer--publisher { - padding-top: 10px; - text-align: right; - white-space: nowrap; - overflow: hidden; +.compose-form__publish { + display: flex; justify-content: flex-end; + min-width: 0; flex: 0 0 auto; + column-gap: 5px; - & > .primary { - display: inline-block; - margin: 0; - padding: 7px 10px; - text-align: center; - } + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; - & > .side_arm { - display: inline-block; - margin: 0 5px; - padding: 7px 0; - width: 36px; - text-align: center; - } + button { + padding: 7px 10px; + text-align: center; + } - &.over { - & > .count { color: $warning-red } + & > .side_arm { + width: 36px; + } } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 28f93018d..b00038afd 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1044,43 +1044,6 @@ color: $dark-text-color; } - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; @@ -1775,7 +1738,7 @@ noscript { @import 'domains'; @import 'status'; @import 'modal'; -@import 'composer'; +@import 'compose_form'; @import 'columns'; @import 'regeneration_indicator'; @import 'directory'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index cd96f83d6..711d4d5b2 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1290,11 +1290,11 @@ } } -.modal-root__container .composer--options--dropdown { +.modal-root__container .privacy-dropdown { flex-grow: 0; } -.modal-root__container .composer--options--dropdown--content { +.modal-root__container .privacy-dropdown__dropdown { pointer-events: auto; z-index: 9999; } diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index 1051b2f32..efb49305d 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -4,6 +4,20 @@ p { color: $darker-text-color; margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } } .button { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 1f1d7d68d..d91306151 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -41,7 +41,7 @@ flex: 0 1 48px; } - .composer { + .compose-form { flex: 1; overflow-y: hidden; display: flex; @@ -59,10 +59,6 @@ .autosuggest-textarea__textarea { overflow-y: hidden; } - - .compose-form__upload-thumbnail { - height: 80px; - } } .navigation-panel { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 75472646e..a3aee7eef 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -37,7 +37,7 @@ } .compose-standalone { - .composer { + .compose-form { width: 400px; margin: 0 auto; padding: 20px 0; diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index a9a203960..4fa1a0361 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -1,69 +1,78 @@ -// components.scss +.compose-form { + .compose-form__modifiers { + .compose-form__upload { + &-description { + input { + &::placeholder { + opacity: 1; + } + } + } + } + } +} .status__content a, -.reply-indicator__content a { - color: lighten($ui-highlight-color, 12%); +.link-footer a, +.reply-indicator__content a, +.status__content__read-more-button { text-decoration: underline; - &.mention { - text-decoration: none; - } - - &.mention span { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - &:hover, &:focus, &:active { text-decoration: none; } - &.status__content__spoiler-link { - color: $secondary-text-color; + &.mention { text-decoration: none; - } -} -.status__content__read-more-button { - text-decoration: underline; + span { + text-decoration: underline; + } - &:hover, - &:focus, - &:active { - text-decoration: none; + &:hover, + &:focus, + &:active { + span { + text-decoration: none; + } + } } } -.getting-started__footer a { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.status__content a { + color: $highlight-text-color; } .nothing-here { color: $darker-text-color; } -.public-layout .public-account-header__tabs__tabs .counter.active::after { - border-bottom: 4px solid $ui-highlight-color; +.compose-form__poll-wrapper .button.button-secondary, +.compose-form .autosuggest-textarea__textarea::placeholder, +.compose-form .spoiler-input__input::placeholder, +.report-dialog-modal__textarea::placeholder, +.language-dropdown__dropdown__results__item__common-name, +.compose-form .icon-button { + color: $inverted-text-color; } -.composer { - .composer--spoiler input, - .compose-form__autosuggest-wrapper textarea { - &::placeholder { - color: $inverted-text-color; - } +.text-icon-button.active { + color: $ui-highlight-color; +} + +.language-dropdown__dropdown__results__item.active { + background: $ui-highlight-color; + font-weight: 500; +} + +.link-button:disabled { + cursor: not-allowed; + + &:hover, + &:focus, + &:active { + text-decoration: none !important; } } diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index ab14a7b73..e272b6ca3 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -14,8 +14,8 @@ $ui-highlight-color: $classic-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; $secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; -$action-button-color: #8d9ac2; +$highlight-text-color: lighten($ui-highlight-color, 10%) !default; +$action-button-color: lighten($ui-base-color, 50%); $inverted-text-color: $black !default; $lighter-text-color: darken($ui-base-color,6%) !default; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index d4ac55847..f0b8a320b 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -1,237 +1,372 @@ // Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. -.glitch.local-settings { - background: $ui-base-color; +html { + scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25); +} - &__navigation { - background: darken($ui-base-color, 8%); +// Change the colors of button texts +.button { + color: $white; + + &.button-alternative-2 { + color: $white; } +} - &__navigation__item { - background: darken($ui-base-color, 8%); +.status-card__actions button, +.status-card__actions a { + color: rgba($white, 0.8); - &:hover { - background: $ui-base-color; - } + &:hover, + &:active, + &:focus { + color: $white; } } -.notification__dismiss-overlay { - .wrappy { - box-shadow: unset; - } +// Change default background colors of columns +.column > .scrollable, +.getting-started, +.column-inline-form, +.error-column, +.regeneration-indicator { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} - .ckbox { - text-shadow: unset; - } +.column > .scrollable.about { + border-top: 1px solid lighten($ui-base-color, 8%); } -.status.status-direct { - background: darken($ui-base-color, 8%); - border-bottom-color: darken($ui-base-color, 12%); +.about__meta, +.about__section__title, +.interaction-modal { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); - } +.rules-list li::before { + background: $ui-highlight-color; } -.focusable:focus.status.status-direct { - background: darken($ui-base-color, 4%); +.directory__card__img { + background: lighten($ui-base-color, 12%); +} - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); +.filter-form { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.column-back-button, +.column-header { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; } + + &--slim-button { + top: -50px; + right: 0; + } +} + +.column-header__back-button, +.column-header__button, +.column-header__button.active, +.account__header__bar { + background: $white; } -// Change columns' default background colors -.column { - > .scrollable { - background: darken($ui-base-color, 13%); +.column-header__button.active { + color: $ui-highlight-color; + + &:hover, + &:active, + &:focus { + color: $ui-highlight-color; + background: $white; } } -.status.collapsed .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +.account__header__bar .avatar .account__avatar { + border-color: $white; } -.drawer__inner { - background: $ui-base-color; +.getting-started__footer a { + color: $ui-secondary-color; + text-decoration: underline; } -.drawer__inner__mastodon { - background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(darken($ui-base-color, 13%))}"/></svg>') no-repeat bottom / 100% auto !important; +.confirmation-modal__secondary-button, +.confirmation-modal__cancel-button, +.mute-modal__cancel-button, +.block-modal__cancel-button { + color: lighten($ui-base-color, 26%); - .mastodon { - filter: contrast(75%) brightness(75%) !important; + &:hover, + &:focus, + &:active { + color: $primary-text-color; } } -// Change the default appearance of the content warning button -.status__content { - - .status__content__spoiler-link { +.column-subheading { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); +} - background: lighten($ui-base-color, 30%); +.getting-started, +.scrollable { + .column-link { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); - &:hover { - background: lighten($ui-base-color, 35%); - text-decoration: none; + &:hover, + &:active, + &:focus { + background: $ui-base-color; } + } +} + +.getting-started .navigation-bar { + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; } +} +.compose-form__autosuggest-wrapper, +.poll__option input[type="text"], +.compose-form .spoiler-input__input, +.compose-form__poll-wrapper select, +.search__input, +.setting-text, +.report-dialog-modal__textarea, +.audio-player { + border: 1px solid lighten($ui-base-color, 8%); } -// Change the background colors of media and video spoilers -.media-spoiler, -.video-player__spoiler, -.account-gallery__item a { - background: $ui-base-color; +.report-dialog-modal .dialog-option .poll__input { + color: $white; } -// Change the colors used in the dropdown menu -.dropdown-menu { - background: $ui-base-color; +.search__input { + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + border-bottom: 0; + } } -.dropdown-menu__arrow { +.list-editor .search .search__input { + border-top: 0; + border-bottom: 0; +} - &.left { - border-left-color: $ui-base-color; - } +.compose-form__poll-wrapper select { + background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px; +} - &.top { - border-top-color: $ui-base-color; - } +.compose-form__poll-wrapper, +.compose-form__poll-wrapper .poll__footer { + border-top-color: lighten($ui-base-color, 8%); +} - &.bottom { - border-bottom-color: $ui-base-color; - } +.notification__filter-bar { + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} - &.right { - border-right-color: $ui-base-color; - } +.compose-form .compose-form__buttons-wrapper { + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} +.drawer__header, +.drawer__inner { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); } -.dropdown-menu__item { - a, - button { - background: $ui-base-color; - color: $ui-secondary-color; - } +.drawer__inner__mastodon { + background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto; } -// Change the default color of several parts of the compose form -.composer { +// Change the colors used in compose-form +.compose-form { + .compose-form__modifiers { + .compose-form__upload__actions .icon-button { + color: lighten($white, 7%); - .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { - color: lighten($ui-base-color, 80%); + &:active, + &:focus, + &:hover { + color: $white; + } + } - &:disabled { background: lighten($simple-background-color, 10%) } + .compose-form__upload-description input { + color: lighten($white, 7%); - &::placeholder { - color: lighten($ui-base-color, 70%); + &::placeholder { + color: lighten($white, 7%); + } } } - .composer--options-wrapper { - background: lighten($ui-base-color, 10%); + .compose-form__buttons-wrapper { + background: darken($ui-base-color, 6%); } - .composer--options > hr { - display: none; + .autosuggest-textarea__suggestions { + background: darken($ui-base-color, 6%); } - .composer--options--dropdown--content--item { - color: $ui-primary-color; - - strong { - color: $ui-primary-color; + .autosuggest-textarea__suggestions__item { + &:hover, + &:focus, + &:active, + &.selected { + background: lighten($ui-base-color, 4%); } + } +} + +.emoji-mart-bar { + border-color: lighten($ui-base-color, 4%); + &:first-child { + background: darken($ui-base-color, 6%); } +} + +.emoji-mart-search input { + background: rgba($ui-base-color, 0.3); + border-color: $ui-base-color; +} +// Change the background colors of statuses +.focusable:focus { + background: $ui-base-color; } -.composer--upload_form--actions .icon-button { - color: lighten($white, 7%); +.detailed-status, +.detailed-status__action-bar { + background: $white; +} + +// Change the background colors of status__content__spoiler-link +.reply-indicator__content .status__content__spoiler-link, +.status__content .status__content__spoiler-link { + background: $ui-base-color; - &:active, - &:focus, &:hover { - color: $white; + background: lighten($ui-base-color, 4%); } } -.language-dropdown__dropdown__results__item:hover, -.language-dropdown__dropdown__results__item:focus, -.language-dropdown__dropdown__results__item:active { - background-color: $ui-base-color; +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + background: $ui-base-color; } -.dropdown-menu__separator, -.dropdown-menu__item.edited-timestamp__history__item, -.dropdown-menu__container__header, -.compare-history-modal .report-modal__target, -.report-dialog-modal .poll__option.dialog-option { - border-bottom-color: lighten($ui-base-color, 12%); +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $white; } -.report-dialog-modal__container { - border-bottom-color: lighten($ui-base-color, 12%); +.account-gallery__item a { + background-color: $ui-base-color; } -.status__content, -.reply-indicator__content { - a { - color: $highlight-text-color; - } -} +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $white; -.emoji-mart-bar { - border-color: darken($ui-base-color, 4%); + &__arrow { + &.left { + border-left-color: $white; + } - &:first-child { - background: lighten($ui-base-color, 10%); + &.top { + border-top-color: $white; + } + + &.bottom { + border-bottom-color: $white; + } + + &.right { + border-right-color: $white; + } } -} -.emoji-mart-search input { - background: rgba($ui-base-color, 0.3); - border-color: $ui-base-color; + &__item { + a, + button { + background: $white; + color: $darker-text-color; + } + } } -.autosuggest-textarea__suggestions { - background: lighten($ui-base-color, 10%) +// Change the text colors on inverted background +.privacy-dropdown__option.active, +.privacy-dropdown__option:hover, +.privacy-dropdown__option.active .privacy-dropdown__option__content, +.privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.privacy-dropdown__option:hover .privacy-dropdown__option__content, +.privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.dropdown-menu__item a:active, +.dropdown-menu__item a:focus, +.dropdown-menu__item a:hover, +.actions-modal ul li:not(:empty) a.active, +.actions-modal ul li:not(:empty) a.active button, +.actions-modal ul li:not(:empty) a:active, +.actions-modal ul li:not(:empty) a:active button, +.actions-modal ul li:not(:empty) a:focus, +.actions-modal ul li:not(:empty) a:focus button, +.actions-modal ul li:not(:empty) a:hover, +.actions-modal ul li:not(:empty) a:hover button, +.language-dropdown__dropdown__results__item.active, +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, +.simple_form .block-button, +.simple_form .button, +.simple_form button { + color: $white; } -.autosuggest-textarea__suggestions__item { - &:hover, - &:focus, - &:active, - &.selected { - background: darken($ui-base-color, 4%); - } +.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { + color: lighten($ui-base-color, 8%); } -.react-toggle-track { - background: $ui-secondary-color; +.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { + color: darken($ui-base-color, 12%); } -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-secondary-color, 10%); +.dropdown-menu__separator, +.dropdown-menu__item.edited-timestamp__history__item, +.dropdown-menu__container__header, +.compare-history-modal .report-modal__target, +.report-dialog-modal .poll__option.dialog-option { + border-bottom-color: lighten($ui-base-color, 4%); } -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-highlight-color, 10%); +.report-dialog-modal__container { + border-top-color: lighten($ui-base-color, 4%); } // Change the background colors of modals .actions-modal, .boost-modal, -.favourite-modal, .confirmation-modal, .mute-modal, .block-modal, @@ -243,12 +378,43 @@ .compare-history-modal, .report-modal__comment .setting-text__wrapper, .report-modal__comment .setting-text, -.report-dialog-modal__textarea { - background: $white; +.announcements, +.picture-in-picture__header, +.picture-in-picture__footer, +.reactions-bar__item { + background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); } -.report-dialog-modal .dialog-option .poll__input { +.reactions-bar__item:hover, +.reactions-bar__item:focus, +.reactions-bar__item:active, +.language-dropdown__dropdown__results__item:hover, +.language-dropdown__dropdown__results__item:focus, +.language-dropdown__dropdown__results__item:active { + background-color: $ui-base-color; +} + +.reactions-bar__item.active { + background-color: mix($white, $ui-highlight-color, 80%); + border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); +} + +.media-modal__overlay .picture-in-picture__footer { + border: 0; +} + +.picture-in-picture__header { + border-bottom: 0; +} + +.announcements, +.picture-in-picture__footer { + border-top: 0; +} + +.icon-with-badge__badge { + border-color: $white; color: $white; } @@ -260,8 +426,43 @@ border-top-color: lighten($ui-base-color, 8%); } +.column-header__collapsible-inner { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.dashboard__quick-access, +.focal-point__preview strong, +.admin-wrapper .content__heading__tabs a.selected { + color: $white; +} + +.button.button-tertiary { + &:hover, + &:focus, + &:active { + color: $white; + } +} + +.button.button-secondary { + border-color: $darker-text-color; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + border-color: darken($darker-text-color, 8%); + color: darken($darker-text-color, 8%); + } +} + +.flash-message.warning { + color: lighten($gold-star, 16%); +} + .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar, @@ -279,33 +480,134 @@ } } +.display-case__case { + background: $white; +} + +.embed-modal .embed-modal__container .embed-modal__html { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + &:focus { + border-color: lighten($ui-base-color, 12%); + background: $white; + } +} + +.react-toggle-track { + background: $ui-secondary-color; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background: darken($ui-secondary-color, 10%); +} + +.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background: lighten($ui-highlight-color, 10%); +} + // Change the default color used for the text in an empty column or on the error column .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 60%); + color: $primary-text-color; + background: $white; } // Change the default colors used on some parts of the profile pages .activity-stream-tabs { - background: $account-background-color; + border-bottom-color: lighten($ui-base-color, 8%); +} - a { - &.active { - color: $ui-primary-color; - } +.nothing-here, +.page-header, +.directory__tag > a, +.directory__tag > div { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-left: 0; + border-right: 0; + border-top: 0; + } +} + +.simple_form { + input[type="text"], + input[type="number"], + input[type="email"], + input[type="password"], + textarea { + &:hover { + border-color: lighten($ui-base-color, 12%); + } + } +} + +.picture-in-picture-placeholder { + background: $white; + border-color: lighten($ui-base-color, 8%); + color: lighten($ui-base-color, 8%); +} + +.directory__tag > a { + &:hover, + &:active, + &:focus { + background: $ui-base-color; } + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } +} + +.directory__tag.active > a, +.directory__tag.active > div { + border-color: $ui-highlight-color; + + &, + h4, + h4 small, + .fa, + .trends__item__current { + color: $white; + } + + &:hover, + &:active, + &:focus { + background: $ui-highlight-color; + } +} + +.batch-table { + &__toolbar, + &__row, + .nothing-here { + border-color: lighten($ui-base-color, 8%); + } } .activity-stream { + border: 1px solid lighten($ui-base-color, 8%); + + &--under-tabs { + border-top: 0; + } .entry { background: $account-background-color; + + .detailed-status.light, + .more.light, + .status.light { + border-bottom-color: lighten($ui-base-color, 8%); + } } .status.light { - .status__content { color: $primary-text-color; } @@ -315,17 +617,14 @@ color: $primary-text-color; } } - } - } .accounts-grid { .account-grid-card { - .controls { .icon-button { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -336,13 +635,53 @@ } .username { - color: $ui-secondary-color; + color: $darker-text-color; } .account__header__content { color: $primary-text-color; } + } +} +.simple_form { + .warning { + box-shadow: none; + background: rgba($error-red, 0.5); + text-shadow: none; + } + + .recommended { + border-color: $ui-highlight-color; + color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + } +} + +.compose-form .compose-form__warning { + border-color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + + &, + a { + color: $ui-highlight-color; + } +} + +.reply-indicator { + background: transparent; + border: 1px solid lighten($ui-base-color, 8%); +} + +.dismissable-banner { + border-left: 1px solid lighten($ui-base-color, 8%); + border-right: 1px solid lighten($ui-base-color, 8%); +} + +.status__content, +.reply-indicator__content { + a { + color: $highlight-text-color; } } @@ -354,6 +693,7 @@ } } +.notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } @@ -364,7 +704,10 @@ .activity-stream, .nothing-here, .directory__tag > a, -.directory__tag > div { +.directory__tag > div, +.card > a, +.page-header, +.compose-form .compose-form__warning { box-shadow: none; } @@ -372,3 +715,55 @@ border: 1px solid lighten($ui-base-color, 8%); background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px; } + +// Glitch-soc-specific changes + +.glitch.local-settings { + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); +} + +.glitch.local-settings__navigation { + background: darken($ui-base-color, 8%); +} + +.glitch.local-settings__navigation__item { + background: darken($ui-base-color, 8%); + border-bottom: 1px lighten($ui-base-color, 8%) solid; + + &:hover { + background: $ui-base-color; + } + + &.active { + background: $ui-highlight-color; + color: $white; + } + + &.close, &.close:hover { + background: $error-value-color; + color: $primary-text-color; + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + + .ckbox { + text-shadow: unset; + } + } +} + +.status.collapsed .status__content:after { + background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +} + +.drawer__inner__mastodon { + background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto !important; + + .mastodon { + filter: contrast(75%) brightness(75%) !important; + } +} diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index f1c8a3503..cae065878 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -7,11 +7,17 @@ $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; $classic-highlight-color: #6364ff; +// Differences +$success-green: lighten(#3c754d, 8%); + +$base-overlay-background: $white !default; +$valid-value-color: $success-green !default; + $ui-base-color: $classic-secondary-color !default; -$ui-base-lighter-color: darken($ui-base-color, 57%); -$ui-highlight-color: $classic-highlight-color !default; -$ui-primary-color: $classic-primary-color !default; +$ui-base-lighter-color: #b0c0cf; +$ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; +$ui-highlight-color: $classic-highlight-color !default; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; @@ -19,17 +25,14 @@ $highlight-text-color: darken($ui-highlight-color, 8%) !default; $dark-text-color: #444b5d; $action-button-color: #606984; -$success-green: lighten(#3c754d, 8%); - -$base-overlay-background: $white !default; - $inverted-text-color: $black !default; $lighter-text-color: $classic-base-color !default; $light-text-color: #444b5d; +// Newly added colors $account-background-color: $white !default; -//Invert darkened and lightened colors +// Invert darkened and lightened colors @function darken($color, $amount) { @return hsl(hue($color), saturation($color), lightness($color) + $amount); } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 31d1de376..2419691cd 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -36,15 +36,11 @@ body.rtl { margin-left: 5px; } - .composer .compose--counter-wrapper { + .compose-form .character-counter__wrapper { margin-right: 0; margin-left: 4px; } - .composer--publisher { - text-align: left; - } - .boost-modal__status-time, .favourite-modal__status-time { float: left; |