From 434712ea2279340f671bac234fdac264367f935a Mon Sep 17 00:00:00 2001 From: Cytrogen Date: Thu, 26 Mar 2026 15:34:10 -0400 Subject: [PATCH] Convert glitch component SCSS to CSS custom properties (Phase 5+6) Replace $var with var(--var), inline all mixins, unroll @each/@for, convert color functions to pre-calculated properties. Merge properties into variables.scss :root blocks, fix theme import order for CSS cascade. --- .../flavours/glitch/styles/_mixins.scss | 97 ----- .../glitch/styles/components/about.scss | 40 +- .../glitch/styles/components/accounts.scss | 188 +++++----- .../styles/components/announcements.scss | 36 +- .../styles/components/bookmark_folders.scss | 4 +- .../glitch/styles/components/boost.scss | 16 +- .../glitch/styles/components/columns.scss | 235 ++++++------ .../styles/components/compose_form.scss | 157 ++++---- .../glitch/styles/components/directory.scss | 14 +- .../glitch/styles/components/domains.scss | 4 +- .../glitch/styles/components/doodle.scss | 6 +- .../glitch/styles/components/drawer.scss | 186 +++++++--- .../glitch/styles/components/emoji.scss | 10 +- .../styles/components/emoji_picker.scss | 36 +- .../glitch/styles/components/explore.scss | 20 +- .../glitch/styles/components/lists.scss | 18 +- .../styles/components/local_settings.scss | 26 +- .../glitch/styles/components/media.scss | 129 ++++--- .../glitch/styles/components/misc.scss | 317 ++++++++-------- .../glitch/styles/components/modal.scss | 260 ++++++------- .../styles/components/privacy_policy.scss | 16 +- .../components/regeneration_indicator.scss | 8 +- .../glitch/styles/components/scrollbars.scss | 20 +- .../glitch/styles/components/search.scss | 84 +++-- .../glitch/styles/components/sensitive.scss | 4 +- .../glitch/styles/components/signed_out.scss | 16 +- .../styles/components/single_column.scss | 50 ++- .../glitch/styles/components/status.scss | 205 +++++------ .../flavours/glitch/styles/contrast.scss | 2 +- .../flavours/glitch/styles/contrast/diff.scss | 10 +- .../glitch/styles/contrast/variables.scss | 264 ++++++++++++-- .../flavours/glitch/styles/index.scss | 1 - .../glitch/styles/mastodon-light.scss | 2 +- .../glitch/styles/mastodon-light/diff.scss | 300 +++++++-------- .../styles/mastodon-light/variables.scss | 297 ++++++++++++--- .../glitch/styles/properties-contrast.css | 236 ------------ .../glitch/styles/properties-light.css | 236 ------------ .../flavours/glitch/styles/properties.css | 236 ------------ .../flavours/glitch/styles/variables.scss | 342 ++++++++++++------ 39 files changed, 2010 insertions(+), 2118 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/_mixins.scss delete mode 100644 app/javascript/flavours/glitch/styles/properties-contrast.css delete mode 100644 app/javascript/flavours/glitch/styles/properties-light.css delete mode 100644 app/javascript/flavours/glitch/styles/properties.css diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss deleted file mode 100644 index 6643cd1aa515da8333a3159e0d614d02a92bafef..0000000000000000000000000000000000000000 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ /dev/null @@ -1,97 +0,0 @@ -@mixin avatar-radius() { - border-radius: $ui-avatar-border-size; - background-position: 50%; - background-clip: padding-box; -} - -@mixin avatar-size($size: 48px) { - width: $size; - height: $size; - background-size: $size $size; -} - -@mixin single-column($media, $parent: '&') { - .auto-columns #{$parent} { - @media #{$media} { - @content; - } - } - .single-column #{$parent} { - @content; - } -} - -@mixin limited-single-column($media, $parent: '&') { - .auto-columns #{$parent}, - .single-column #{$parent} { - @media #{$media} { - @content; - } - } -} - -@mixin multi-columns($media, $parent: '&') { - .auto-columns #{$parent} { - @media #{$media} { - @content; - } - } - .multi-columns #{$parent} { - @content; - } -} - -@mixin fullwidth-gallery { - &.full-width { - margin-left: -14px; - margin-right: -14px; - width: inherit; - max-width: none; - border-radius: 0; - } -} - -@mixin search-input() { - outline: 0; - box-sizing: border-box; - width: 100%; - border: 0; - box-shadow: none; - font-family: inherit; - background: $ui-base-color; - color: $darker-text-color; - border-radius: 4px; - font-size: 14px; - margin: 0; -} - -@mixin search-popout() { - background: $simple-background-color; - border-radius: 4px; - padding: 10px 14px; - padding-bottom: 14px; - margin-top: 10px; - color: $light-text-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - - h4 { - text-transform: uppercase; - color: $light-text-color; - font-size: 13px; - font-weight: 500; - margin-bottom: 10px; - } - - li { - padding: 4px 0; - } - - ul { - margin-bottom: 10px; - } - - em { - font-weight: 500; - color: $inverted-text-color; - } -} diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 98ff91ad18c207f768ab3a2582ef24055a6937d8..22c4685de7db1c6e6aeb11314cf71ae187fa8818 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -38,7 +38,7 @@ font-size: 13px; p { - color: $dark-text-color; + color: var(--dark-text-color); margin-bottom: 20px; .version { @@ -50,7 +50,7 @@ } a { - color: $dark-text-color; + color: var(--dark-text-color); text-decoration: underline; &:hover, @@ -65,12 +65,12 @@ .about { padding: 20px; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { border-radius: 4px; } &__footer { - color: $dark-text-color; + color: var(--dark-text-color); text-align: center; font-size: 15px; line-height: 22px; @@ -84,7 +84,7 @@ width: 100%; height: auto; aspect-ratio: 1.9; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border-radius: 8px; margin-bottom: 30px; } @@ -105,12 +105,12 @@ font-size: 16px; line-height: 24px; font-weight: 400; - color: $darker-text-color; + color: var(--darker-text-color); } } &__meta { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border-radius: 4px; display: flex; margin-bottom: 30px; @@ -126,7 +126,7 @@ width: 0; border: 0; border-style: solid; - border-color: lighten($ui-base-color, 8%); + border-color: var(--ui-base-color-lighten-8); border-left-width: 1px; min-height: calc(100% - 60px); flex: 0 0 auto; @@ -135,7 +135,7 @@ h4 { font-size: 15px; text-transform: uppercase; - color: $darker-text-color; + color: var(--darker-text-color); font-weight: 500; margin-bottom: 20px; } @@ -186,7 +186,7 @@ } &__mail { - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; font-weight: 500; @@ -204,7 +204,7 @@ font-size: 15px; line-height: 22px; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { display: none; } } @@ -231,8 +231,8 @@ line-height: 22px; padding: 20px; border-radius: 4px; - background: lighten($ui-base-color, 4%); - color: $highlight-text-color; + background: var(--ui-base-color-lighten-4); + color: var(--highlight-text-color); cursor: pointer; } @@ -241,7 +241,7 @@ } &__body { - border: 1px solid lighten($ui-base-color, 4%); + border: 1px solid var(--ui-base-color-lighten-4); border-top: 0; padding: 20px; font-size: 15px; @@ -251,18 +251,18 @@ &__domain-blocks { margin-top: 30px; - background: darken($ui-base-color, 4%); - border: 1px solid lighten($ui-base-color, 4%); + background: var(--ui-base-color-darken-4); + border: 1px solid var(--ui-base-color-lighten-4); border-radius: 4px; &__domain { - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid var(--ui-base-color-lighten-4); padding: 10px; font-size: 15px; - color: $darker-text-color; + color: var(--darker-text-color); &:nth-child(2n) { - background: darken($ui-base-color, 2%); + background: var(--ui-base-color-darken-2); } &:last-child { @@ -278,7 +278,7 @@ } h6 { - color: $secondary-text-color; + color: var(--secondary-text-color); font-size: inherit; white-space: nowrap; overflow: hidden; diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index e68c6cac0463a3b02f9a2b230ed26e693a46bd43..e1383a449a852b4488cef7380f8fa0c059c82570 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -1,13 +1,13 @@ .account { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); color: inherit; text-decoration: none; .account__display-name { flex: 1 1 auto; display: block; - color: $darker-text-color; + color: var(--darker-text-color); overflow: hidden; text-decoration: none; font-size: 14px; @@ -25,7 +25,7 @@ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - color: $ui-secondary-color; + color: var(--ui-secondary-color); } &.small { @@ -46,10 +46,10 @@ .follow-recommendations-account { .icon-button { - color: $ui-primary-color; + color: var(--ui-primary-color); &.active { - color: $valid-value-color; + color: var(--valid-value-color); } } } @@ -65,7 +65,9 @@ } .account__avatar { - @include avatar-radius; + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; display: block; position: relative; @@ -81,13 +83,17 @@ } &-composite { - @include avatar-radius; + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; overflow: hidden; position: relative; & div { - @include avatar-radius; + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; float: left; position: relative; @@ -100,8 +106,8 @@ top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - color: $primary-text-color; - text-shadow: 1px 1px 2px $base-shadow-color; + color: var(--primary-text-color); + text-shadow: 1px 1px 2px var(--base-shadow-color); font-weight: 700; font-size: 15px; } @@ -109,16 +115,24 @@ } .account__avatar-overlay { - @include avatar-size(48px); + width: 48px; + height: 48px; + background-size: 48px 48px; position: relative; &-base { - @include avatar-radius; - @include avatar-size(36px); + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; + width: 36px; + height: 36px; + background-size: 36px 36px; img { - @include avatar-radius; + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; width: 100%; height: 100%; @@ -126,8 +140,12 @@ } &-overlay { - @include avatar-radius; - @include avatar-size(24px); + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; + width: 24px; + height: 24px; + background-size: 24px 24px; position: absolute; bottom: 0; @@ -135,7 +153,9 @@ z-index: 1; img { - @include avatar-radius; + border-radius: var(--ui-avatar-border-size); + background-position: 50%; + background-clip: padding-box; width: 100%; height: 100%; @@ -151,20 +171,18 @@ .account__header__wrapper { flex: 0 0 auto; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } .account__disclaimer { padding: 10px; - color: $dark-text-color; + color: var(--dark-text-color); strong { font-weight: 500; - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } + &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) { + font-weight: 700; } } @@ -182,8 +200,8 @@ } .account__action-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--ui-base-color-lighten-8); + border-bottom: 1px solid var(--ui-base-color-lighten-8); line-height: 36px; overflow: hidden; flex: 0 0 auto; @@ -201,7 +219,7 @@ text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-inline-start: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid var(--ui-base-color-lighten-8); padding: 10px 0; border-bottom: 4px solid transparent; @@ -210,31 +228,29 @@ } &.active { - border-bottom: 4px solid $ui-highlight-color; + border-bottom: 4px solid var(--ui-highlight-color); } & > span { display: block; text-transform: uppercase; font-size: 11px; - color: $darker-text-color; + color: var(--darker-text-color); } strong { display: block; font-size: 15px; font-weight: 500; - color: $primary-text-color; + color: var(--primary-text-color); - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } + &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) { + font-weight: 700; } } abbr { - color: $highlight-text-color; + color: var(--highlight-text-color); } } @@ -257,14 +273,14 @@ padding: 8px 10px; padding-inline-start: 68px; position: relative; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); min-height: 54px; &__details { display: flex; justify-content: space-between; align-items: center; - color: $darker-text-color; + color: var(--darker-text-color); font-size: 15px; line-height: 22px; @@ -285,12 +301,12 @@ padding-top: 8px; padding-inline-start: 26px; cursor: default; - color: $darker-text-color; + color: var(--darker-text-color); font-size: 15px; position: relative; .fa { - color: $highlight-text-color; + color: var(--highlight-text-color); } > span { @@ -301,9 +317,9 @@ } .account--panel { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-4); + border-top: 1px solid var(--ui-base-color-lighten-8); + border-bottom: 1px solid var(--ui-base-color-lighten-8); display: flex; flex-direction: row; padding: 10px 0; @@ -316,10 +332,10 @@ } .relationship-tag { - color: $white; + color: var(--white); margin-bottom: 4px; display: block; - background-color: rgba($black, 0.45); + background-color: var(--black-a45); text-transform: uppercase; font-size: 11px; font-weight: 500; @@ -358,8 +374,8 @@ .notification__filter-bar, .account__section-headline { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-darken-4); + border-bottom: 1px solid var(--ui-base-color-lighten-8); cursor: default; display: flex; flex-shrink: 0; @@ -374,7 +390,7 @@ a { display: block; flex: 1 1 auto; - color: $darker-text-color; + color: var(--darker-text-color); padding: 15px 0; font-size: 14px; font-weight: 500; @@ -383,7 +399,7 @@ position: relative; &.active { - color: $primary-text-color; + color: var(--primary-text-color); &::before { display: block; @@ -394,13 +410,13 @@ width: 100%; height: 3px; border-radius: 4px; - background: $highlight-text-color; + background: var(--highlight-text-color); } } } &.directory__section-headline { - background: darken($ui-base-color, 2%); + background: var(--ui-base-color-darken-2); border-bottom-color: transparent; a, @@ -411,7 +427,7 @@ } &::after { - border-color: transparent transparent darken($ui-base-color, 7%); + border-color: transparent transparent var(--ui-base-color-darken-7); } } } @@ -421,14 +437,14 @@ .account__moved-note { padding: 14px 10px; padding-bottom: 16px; - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-4); + border-top: 1px solid var(--ui-base-color-lighten-8); + border-bottom: 1px solid var(--ui-base-color-lighten-8); &__message { position: relative; margin-inline-start: 58px; - color: $dark-text-color; + color: var(--dark-text-color); padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -456,7 +472,7 @@ } .account__header__content { - color: $darker-text-color; + color: var(--darker-text-color); font-size: 14px; font-weight: 400; overflow: hidden; @@ -503,7 +519,7 @@ overflow: hidden; height: 145px; position: relative; - background: darken($ui-base-color, 4%); + background: var(--ui-base-color-darken-4); img { object-fit: cover; @@ -516,9 +532,9 @@ &__bar { position: relative; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); padding: 5px; - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid var(--ui-base-color-lighten-12); .avatar { display: block; @@ -526,8 +542,8 @@ width: 94px; .account__avatar { - background: darken($ui-base-color, 8%); - border: 2px solid lighten($ui-base-color, 4%); + background: var(--ui-base-color-darken-8); + border: 2px solid var(--ui-base-color-lighten-4); } } } @@ -540,7 +556,7 @@ margin-top: -81px; height: 130px; overflow: hidden; - margin-inline-start: -2px; // aligns the pfp with content below + margin-inline-start: -2px; .account-role { margin: 0 2px; @@ -561,13 +577,13 @@ flex-shrink: 1; white-space: nowrap; - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { min-width: 0; } } .icon-button { - border: 1px solid lighten($ui-base-color, 12%); + border: 1px solid var(--ui-base-color-lighten-12); border-radius: 4px; box-sizing: content-box; padding: 2px; @@ -589,7 +605,7 @@ h1 { font-size: 16px; line-height: 24px; - color: $primary-text-color; + color: var(--primary-text-color); font-weight: 500; overflow: hidden; white-space: nowrap; @@ -598,7 +614,7 @@ small { display: block; font-size: 14px; - color: $darker-text-color; + color: var(--darker-text-color); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -622,13 +638,13 @@ .account__header__content { padding: 20px 15px; padding-bottom: 5px; - color: $primary-text-color; + color: var(--primary-text-color); } .account__header__joined { font-size: 14px; padding: 5px 15px; - color: $darker-text-color; + color: var(--darker-text-color); .columns-area--mobile & { padding-inline-start: 20px; @@ -638,10 +654,10 @@ .account__header__fields { margin: 0; - border-top: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid var(--ui-base-color-lighten-12); a { - color: lighten($ui-highlight-color, 8%); + color: var(--ui-highlight-color-lighten-8); } dl:first-child .verified { @@ -649,7 +665,7 @@ } .verified a { - color: $valid-value-color; + color: var(--valid-value-color); } } } @@ -659,19 +675,19 @@ &__links { font-size: 14px; - color: $darker-text-color; + color: var(--darker-text-color); padding: 10px 0; a { display: inline-block; - color: $darker-text-color; + color: var(--darker-text-color); text-decoration: none; padding: 5px 10px; font-weight: 500; strong { font-weight: 700; - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -684,15 +700,15 @@ flex-direction: column; font-size: 14px; font-weight: 400; - border-top: 1px solid lighten($ui-base-color, 12%); - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid var(--ui-base-color-lighten-12); + border-bottom: 1px solid var(--ui-base-color-lighten-12); &__header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 5px; - color: $darker-text-color; + color: var(--darker-text-color); } &__content { @@ -709,21 +725,21 @@ .icon-button { font-size: 14px; padding: 2px 6px; - color: $darker-text-color; + color: var(--darker-text-color); &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); - background-color: rgba($darker-text-color, 0.15); + color: var(--darker-text-color-lighten-7); + background-color: var(--darker-text-color-a15); } &:focus { - background-color: rgba($darker-text-color, 0.3); + background-color: var(--darker-text-color-a30); } &[disabled] { - color: darken($darker-text-color, 13%); + color: var(--darker-text-color-darken-13); background-color: transparent; cursor: default; } @@ -745,8 +761,8 @@ display: block; box-sizing: border-box; width: calc(100% + 20px); - color: $secondary-text-color; - background: $ui-base-color; + color: var(--secondary-text-color); + background: var(--ui-base-color); padding: 10px; margin: 0 -10px; font-family: inherit; @@ -757,7 +773,7 @@ border-radius: 4px; &::placeholder { - color: $dark-text-color; + color: var(--dark-text-color); opacity: 1; } } @@ -768,13 +784,13 @@ .follow-request-banner, .account-memorial-banner { padding: 20px; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); display: flex; align-items: center; flex-direction: column; &__message { - color: $darker-text-color; + color: var(--darker-text-color); padding: 8px 0; padding-top: 0; padding-bottom: 4px; diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index be27120a7d21ce95ea5c84bbc2ce7086a1863c82..c03753deea83cbda8373c48681ce9a0733185317 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -18,7 +18,7 @@ } a { - color: $secondary-text-color; + color: var(--secondary-text-color); text-decoration: none; &:hover { @@ -36,13 +36,13 @@ } &.unhandled-link { - color: $highlight-text-color; + color: var(--highlight-text-color); } } } .announcements { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); font-size: 13px; display: flex; align-items: flex-end; @@ -51,7 +51,7 @@ width: 124px; flex: 0 0 auto; - @media screen and (max-width: 124px + 300px) { + @media screen and (max-width: 424px) { display: none; } } @@ -61,7 +61,7 @@ flex: 0 0 auto; position: relative; - @media screen and (max-width: 124px + 300px) { + @media screen and (max-width: 424px) { width: 100%; } } @@ -92,7 +92,7 @@ top: 19px; inset-inline-end: 19px; display: block; - background: $highlight-text-color; + background: var(--highlight-text-color); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -101,7 +101,7 @@ &__pagination { padding: 15px; - color: $darker-text-color; + color: var(--darker-text-color); position: absolute; bottom: 3px; inset-inline-end: 0; @@ -126,7 +126,7 @@ &__item { flex-shrink: 0; - background: lighten($ui-base-color, 12%); + background: var(--ui-base-color-lighten-12); border: 0; border-radius: 3px; margin: 2px; @@ -163,32 +163,32 @@ font-weight: 500; text-align: center; margin-inline-start: 6px; - color: $darker-text-color; + color: var(--darker-text-color); } &:hover, &:focus, &:active { - background: lighten($ui-base-color, 16%); + background: var(--ui-base-color-lighten-16); transition: all 200ms ease-out; transition-property: background-color, color; &__count { - color: lighten($darker-text-color, 4%); + color: var(--darker-text-color-lighten-4); } } &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix( - lighten($ui-base-color, 12%), - $ui-highlight-color, - 80% + background-color: color-mix( + in srgb, + var(--ui-base-color-lighten-12) 80%, + var(--ui-highlight-color) ); .reactions-bar__item__count { - color: lighten($highlight-text-color, 8%); + color: var(--highlight-text-color-lighten-8); } } } @@ -202,7 +202,7 @@ } .emoji-button { - color: $darker-text-color; + color: var(--darker-text-color); margin: 0; font-size: 16px; width: auto; @@ -219,7 +219,7 @@ &:active, &:focus { opacity: 1; - color: lighten($darker-text-color, 4%); + color: var(--darker-text-color-lighten-4); transition: all 200ms ease-out; transition-property: background-color, color; } diff --git a/app/javascript/flavours/glitch/styles/components/bookmark_folders.scss b/app/javascript/flavours/glitch/styles/components/bookmark_folders.scss index fe911bfbfd0e6ca10ccc67814ab02b44a5d0dc94..c15eb4f81321a6026dc2601e7c9bb28f571bea20 100644 --- a/app/javascript/flavours/glitch/styles/components/bookmark_folders.scss +++ b/app/javascript/flavours/glitch/styles/components/bookmark_folders.scss @@ -1,8 +1,8 @@ .select-bookmark-folder { - background: $ui-base-color; + background: var(--ui-base-color); flex-direction: column; border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); width: 380px; overflow: hidden; diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index 2969958e2272613782912321bf0e04dee8c0a62b..d23a3c502aaad3198788271ed1fac67683188d28 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -1,43 +1,43 @@ button.icon-button { i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } &.reblogPrivate { i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } &.disabled { i.fa-retweet, &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } .media-modal__overlay .picture-in-picture__footer & { i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } &.reblogPrivate { i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } &.disabled { i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 3f2748062f3268a36885cddef53b1c29c42ceccc..0b5901d19b172aa01c1040c4082feb21ae309a73 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -46,7 +46,7 @@ display: flex; flex-direction: column; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { padding: 0 10px; max-width: 600px; } @@ -54,12 +54,10 @@ } } -$ui-header-height: 55px; - .ui__header { display: none; box-sizing: border-box; - height: $ui-header-height; + height: 55px; position: sticky; top: 0; z-index: 3; @@ -71,7 +69,7 @@ $ui-header-height: 55px; padding: 15px; .logo { - height: $ui-header-height - 30px; + height: 25px; width: auto; } @@ -108,13 +106,13 @@ $ui-header-height: 55px; } .tabs-bar__wrapper { - background: darken($ui-base-color, 8%); + background: var(--ui-base-color-darken-8); position: sticky; - top: $ui-header-height; + top: 55px; z-index: 2; padding-top: 0; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { padding-top: 10px; top: 0; } @@ -122,7 +120,7 @@ $ui-header-height: 55px; .tabs-bar { margin-bottom: 0; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { margin-bottom: 10px; } } @@ -151,7 +149,7 @@ $ui-header-height: 55px; flex-direction: column; > .scrollable { - background: $ui-base-color; + background: var(--ui-base-color); } } @@ -170,9 +168,9 @@ $ui-header-height: 55px; .column-back-button { box-sizing: border-box; width: 100%; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border-radius: 4px 4px 0 0; - color: $highlight-text-color; + color: var(--highlight-text-color); cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -188,10 +186,10 @@ $ui-header-height: 55px; } .column-header__back-button { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border: 0; font-family: inherit; - color: $highlight-text-color; + color: var(--highlight-text-color); cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -229,8 +227,8 @@ $ui-header-height: 55px; } .switch-to-advanced { - color: $light-text-color; - background-color: $ui-base-color; + color: var(--light-text-color); + background-color: var(--ui-base-color); padding: 15px; border-radius: 4px; margin-top: 4px; @@ -239,14 +237,14 @@ $ui-header-height: 55px; line-height: 18px; .switch-to-advanced__toggle { - color: $ui-button-tertiary-color; + color: var(--ui-button-tertiary-color); font-weight: bold; } } .column-link { - background: lighten($ui-base-color, 8%); - color: $primary-text-color; + background: var(--ui-base-color-lighten-8); + color: var(--primary-text-color); display: block; font-size: 16px; padding: 15px; @@ -257,7 +255,7 @@ $ui-header-height: 55px; &:hover, &:focus, &:active { - background: lighten($ui-base-color, 11%); + background: var(--ui-base-color-lighten-11); } &:focus { @@ -266,17 +264,17 @@ $ui-header-height: 55px; &--transparent { background: transparent; - color: $ui-secondary-color; + color: var(--ui-secondary-color); &:hover, &:focus, &:active { background: transparent; - color: $primary-text-color; + color: var(--primary-text-color); } &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); } } @@ -298,8 +296,8 @@ $ui-header-height: 55px; } .column-subheading { - background: $ui-base-color; - color: $dark-text-color; + background: var(--ui-base-color); + color: var(--dark-text-color); padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -313,7 +311,7 @@ $ui-header-height: 55px; z-index: 1; &.active { - box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); + box-shadow: 0 1px 0 var(--highlight-text-color-a30); &::before { display: block; @@ -329,8 +327,8 @@ $ui-header-height: 55px; z-index: 1; background: radial-gradient( ellipse, - rgba($ui-highlight-color, 0.23) 0%, - rgba($ui-highlight-color, 0) 60% + var(--ui-highlight-color-a23) 0%, + var(--ui-highlight-color-a0) 60% ); } } @@ -344,7 +342,7 @@ $ui-header-height: 55px; .column-header { display: flex; font-size: 16px; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border-radius: 4px 4px 0 0; flex: 0 0 auto; cursor: pointer; @@ -368,13 +366,13 @@ $ui-header-height: 55px; } & > .column-header__back-button { - color: $highlight-text-color; + color: var(--highlight-text-color); } &.active { .column-header__icon { - color: $highlight-text-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + color: var(--highlight-text-color); + text-shadow: 0 0 10px var(--ui-highlight-color-a40); } } @@ -398,7 +396,7 @@ $ui-header-height: 55px; } > .scrollable { - background: $ui-base-color; + background: var(--ui-base-color); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } @@ -419,34 +417,33 @@ $ui-header-height: 55px; } .column-header__button { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); border: 0; - color: $darker-text-color; + color: var(--darker-text-color); cursor: pointer; font-size: 16px; padding: 0 15px; &:hover { - color: lighten($darker-text-color, 7%); + color: var(--darker-text-color-lighten-7); } &.active { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); + color: var(--primary-text-color); + background: var(--ui-base-color-lighten-8); &:hover { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); + color: var(--primary-text-color); + background: var(--ui-base-color-lighten-8); } } - // glitch - added focus ring for keyboard navigation &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + text-shadow: 0 0 4px var(--ui-highlight-color-darken-5); } &:disabled { - color: $dark-text-color; + color: var(--dark-text-color); cursor: default; } } @@ -469,7 +466,7 @@ $ui-header-height: 55px; } .layout-single-column .column-header__notif-cleaning-buttons { - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { b, i { margin-inline-end: 5px; @@ -485,7 +482,6 @@ $ui-header-height: 55px; } } -// The notifs drawer with no padding to have more space for the buttons .column-header__collapsible-inner.nopad-drawer { padding: 0; } @@ -494,7 +490,7 @@ $ui-header-height: 55px; max-height: 70vh; overflow: hidden; overflow-y: auto; - color: $darker-text-color; + color: var(--darker-text-color); transition: max-height 150ms ease-in-out, opacity 300ms linear; @@ -515,11 +511,10 @@ $ui-header-height: 55px; height: 0; background: transparent; border: 0; - border-top: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid var(--ui-base-color-lighten-12); margin: 10px 0; } - // notif cleaning drawer &.ncd { transition: none; @@ -531,14 +526,14 @@ $ui-header-height: 55px; } .column-header__collapsible-inner { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); padding: 15px; } .column-header__setting-btn { &:hover, &:focus { - color: $darker-text-color; + color: var(--darker-text-color); text-decoration: underline; } } @@ -579,10 +574,10 @@ $ui-header-height: 55px; } .column-header__issue-btn { - color: $warning-red; + color: var(--warning-red); &:hover { - color: $error-red; + color: var(--error-red); text-decoration: underline; } } @@ -610,7 +605,7 @@ $ui-header-height: 55px; margin: 0; font-size: inherit; flex: auto; - background-color: $ui-base-color; + background-color: var(--ui-base-color); transition: all 0.2s ease; transition-property: background-color, box-shadow; @@ -622,15 +617,15 @@ $ui-header-height: 55px; &:not([disabled]) { &:hover, &:focus { - background-color: darken($ui-base-color, 10%); + background-color: var(--ui-base-color-darken-10); } &.active { - background-color: darken($ui-highlight-color, 2%); + background-color: var(--ui-highlight-color-darken-2); &:hover, &:focus { - background-color: $ui-highlight-color; + background-color: var(--ui-highlight-color); } } } @@ -638,7 +633,7 @@ $ui-header-height: 55px; .limited-account-hint { p { - color: $secondary-text-color; + color: var(--secondary-text-color); font-size: 15px; font-weight: 500; margin-bottom: 20px; @@ -647,8 +642,8 @@ $ui-header-height: 55px; .empty-column-indicator, .follow_requests-unlocked_explanation { - color: $dark-text-color; - background: $ui-base-color; + color: var(--dark-text-color); + background: var(--ui-base-color); text-align: center; padding: 20px; font-size: 15px; @@ -659,7 +654,6 @@ $ui-header-height: 55px; align-items: center; justify-content: center; @supports (display: grid) { - // hack to fix Chrome <57 contain: strict; } @@ -668,7 +662,7 @@ $ui-header-height: 55px; } a { - color: $highlight-text-color; + color: var(--highlight-text-color); text-decoration: none; &:hover { @@ -678,14 +672,14 @@ $ui-header-height: 55px; } .follow_requests-unlocked_explanation { - background: darken($ui-base-color, 4%); + background: var(--ui-base-color-darken-4); contain: initial; flex-grow: 0; } .error-column { padding: 20px; - background: $ui-base-color; + background: var(--ui-base-color); border-radius: 4px; display: flex; flex: 1 1 auto; @@ -702,7 +696,7 @@ $ui-header-height: 55px; &__message { text-align: center; - color: $darker-text-color; + color: var(--darker-text-color); font-size: 15px; line-height: 22px; @@ -711,7 +705,7 @@ $ui-header-height: 55px; line-height: 33px; font-weight: 700; margin-bottom: 15px; - color: $primary-text-color; + color: var(--primary-text-color); } p { @@ -734,7 +728,7 @@ $ui-header-height: 55px; display: flex; justify-content: flex-start; align-items: center; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); label { flex: 1 1 auto; @@ -756,12 +750,12 @@ $ui-header-height: 55px; } .column-settings__outer { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); padding: 15px; } .column-settings__section { - color: $darker-text-color; + color: var(--darker-text-color); cursor: default; display: block; font-weight: 500; @@ -779,10 +773,20 @@ $ui-header-height: 55px; .column-select { &__control { - @include search-input; + outline: 0; + box-sizing: border-box; + width: 100%; + border: 0; + box-shadow: none; + font-family: inherit; + background: var(--ui-base-color); + color: var(--darker-text-color); + border-radius: 4px; + font-size: 14px; + margin: 0; &::placeholder { - color: lighten($darker-text-color, 4%); + color: var(--darker-text-color-lighten-4); } &::-moz-focus-inner { @@ -796,7 +800,7 @@ $ui-header-height: 55px; } &:focus { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } @media screen and (width <= 600px) { @@ -805,7 +809,7 @@ $ui-header-height: 55px; } &__placeholder { - color: $dark-text-color; + color: var(--dark-text-color); padding-inline-start: 2px; font-size: 12px; } @@ -815,7 +819,7 @@ $ui-header-height: 55px; } &__multi-value { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); &__remove { cursor: pointer; @@ -823,8 +827,8 @@ $ui-header-height: 55px; &:hover, &:active, &:focus { - background: lighten($ui-base-color, 12%); - color: lighten($darker-text-color, 4%); + background: var(--ui-base-color-lighten-12); + color: var(--darker-text-color-lighten-4); } } } @@ -832,31 +836,58 @@ $ui-header-height: 55px; &__multi-value__label, &__input, &__input-container { - color: $darker-text-color; + color: var(--darker-text-color); } &__clear-indicator, &__dropdown-indicator { cursor: pointer; transition: none; - color: $dark-text-color; + color: var(--dark-text-color); &:hover, &:active, &:focus { - color: lighten($dark-text-color, 4%); + color: var(--dark-text-color-lighten-4); } } &__indicator-separator { - background-color: lighten($ui-base-color, 8%); + background-color: var(--ui-base-color-lighten-8); } &__menu { - @include search-popout; + background: var(--simple-background-color); + border-radius: 4px; + padding: 10px 14px; + padding-bottom: 14px; + margin-top: 10px; + color: var(--light-text-color); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); + + h4 { + text-transform: uppercase; + color: var(--light-text-color); + font-size: 13px; + font-weight: 500; + margin-bottom: 10px; + } + + li { + padding: 4px 0; + } + + ul { + margin-bottom: 10px; + } + + em { + font-weight: 500; + color: var(--inverted-text-color); + } padding: 0; - background: $ui-secondary-color; + background: var(--ui-secondary-color); } &__menu-list { @@ -864,13 +895,13 @@ $ui-header-height: 55px; } &__option { - color: $inverted-text-color; + color: var(--inverted-text-color); border-radius: 4px; font-size: 14px; &--is-focused, &--is-selected { - background: darken($ui-secondary-color, 10%); + background: var(--ui-secondary-color-darken-10); } } } @@ -884,7 +915,7 @@ $ui-header-height: 55px; .notifications-permission-banner { padding: 30px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); display: flex; flex-direction: column; align-items: center; @@ -905,7 +936,7 @@ $ui-header-height: 55px; } p { - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 15px; text-align: center; } @@ -932,7 +963,7 @@ $ui-header-height: 55px; font-size: 16px; line-height: 24px; font-weight: 400; - color: $darker-text-color; + color: var(--darker-text-color); } } @@ -962,8 +993,8 @@ $ui-header-height: 55px; .column-list { margin: 0 20px; - border: 1px solid lighten($ui-base-color, 8%); - background: darken($ui-base-color, 2%); + border: 1px solid var(--ui-base-color-lighten-8); + background: var(--ui-base-color-darken-2); border-radius: 4px; &__empty-message { @@ -972,7 +1003,7 @@ $ui-header-height: 55px; font-size: 16px; line-height: 24px; font-weight: 400; - color: $darker-text-color; + color: var(--darker-text-color); } } @@ -982,8 +1013,8 @@ $ui-header-height: 55px; margin: 10px; margin-bottom: 5px; border-radius: 8px; - border: 1px solid $highlight-text-color; - background: rgba($highlight-text-color, 0.15); + border: 1px solid var(--highlight-text-color); + background: var(--highlight-text-color-a15); overflow: hidden; &__background-image { @@ -1002,7 +1033,7 @@ $ui-header-height: 55px; font-size: 15px; line-height: 22px; font-weight: 500; - color: $primary-text-color; + color: var(--primary-text-color); p { margin-bottom: 15px; @@ -1013,7 +1044,7 @@ $ui-header-height: 55px; } h1 { - color: $highlight-text-color; + color: var(--highlight-text-color); font-size: 22px; line-height: 33px; font-weight: 700; @@ -1037,7 +1068,7 @@ $ui-header-height: 55px; } .button-tertiary { - background: rgba($ui-base-color, 0.15); + background: var(--ui-base-color-a15); backdrop-filter: blur(8px); } } @@ -1047,32 +1078,32 @@ $ui-header-height: 55px; padding: 15px 10px; .icon-button { - color: $highlight-text-color; + color: var(--highlight-text-color); } } } .warning-banner { - border: 1px solid $warning-red; - background: rgba($warning-red, 0.15); + border: 1px solid var(--warning-red); + background: var(--warning-red-a15); &__message { h1 { - color: $warning-red; + color: var(--warning-red); } a { - color: $primary-text-color; + color: var(--primary-text-color); } } } .hashtag-header { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); padding: 15px; font-size: 17px; line-height: 22px; - color: $darker-text-color; + color: var(--darker-text-color); strong { font-weight: 700; @@ -1086,7 +1117,7 @@ $ui-header-height: 55px; gap: 15px; h1 { - color: $primary-text-color; + color: var(--primary-text-color); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 86263f119608ad57f311ee1123f3ede0aef75d9c..b3131af2cf7525d4db76f3e084db6993ba1696c3 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -8,20 +8,20 @@ ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); + background-color: var(--base-overlay-background-a30); } } } .character-counter { cursor: default; - font-family: $font-sans-serif, sans-serif; + font-family: var(--font-sans-serif), sans-serif; font-size: 14px; font-weight: 600; - color: $lighter-text-color; + color: var(--lighter-text-color); &.character-counter--over { - color: $warning-red; + color: var(--warning-red); } } @@ -53,37 +53,42 @@ padding: 10px; width: 100%; outline: 0; - color: $inverted-text-color; - background: $simple-background-color; + color: var(--inverted-text-color); + background: var(--simple-background-color); font-size: 14px; font-family: inherit; resize: vertical; &::placeholder { - color: $dark-text-color; + color: var(--dark-text-color); } &:focus { outline: 0; } - @include single-column('screen and (max-width: 630px)') { + .auto-columns & { + @media screen and (max-width: 630px) { + font-size: 16px; + } + } + .single-column & { font-size: 16px; } } } .compose-form__warning { - color: $inverted-text-color; + color: var(--inverted-text-color); margin-bottom: 15px; - background: $ui-primary-color; - box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + background: var(--ui-primary-color); + box-shadow: 0 2px 6px var(--base-shadow-color-a30); padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 400; a { - color: $lighter-text-color; + color: var(--lighter-text-color); font-weight: 500; text-decoration: underline; @@ -102,7 +107,7 @@ font-weight: 500; &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); } input[type='checkbox'] { @@ -112,7 +117,7 @@ .checkbox { display: inline-block; position: relative; - border: 1px solid $ui-primary-color; + border: 1px solid var(--ui-primary-color); box-sizing: border-box; width: 18px; height: 18px; @@ -124,8 +129,8 @@ vertical-align: middle; &.active { - border-color: $highlight-text-color; - background: $highlight-text-color + border-color: var(--highlight-text-color); + background: var(--highlight-text-color) url("data:image/svg+xml;utf8,") center center no-repeat; } @@ -136,7 +141,7 @@ margin: 0 0 10px; border-radius: 4px; padding: 10px; - background: $ui-primary-color; + background: var(--ui-primary-color); min-height: 23px; overflow-y: auto; flex: 0 2 auto; @@ -147,7 +152,7 @@ overflow: hidden; & > .account.small { - color: $inverted-text-color; + color: var(--inverted-text-color); } } @@ -164,7 +169,7 @@ font-weight: 400; overflow: hidden; padding-top: 5px; - color: $inverted-text-color; + color: var(--inverted-text-color); white-space: pre-wrap; p, @@ -178,7 +183,7 @@ } a { - color: $lighter-text-color; + color: var(--lighter-text-color); text-decoration: none; &:hover { @@ -223,15 +228,15 @@ width: 100%; min-height: 100px; outline: 0; - color: $inverted-text-color; - background: $simple-background-color; + color: var(--inverted-text-color); + background: var(--simple-background-color); font-size: 14px; font-family: inherit; resize: none; scrollbar-color: initial; &::placeholder { - color: $dark-text-color; + color: var(--dark-text-color); } &::-webkit-scrollbar { @@ -242,13 +247,21 @@ outline: 0; } - @include single-column('screen and (max-width: 630px)') { + .auto-columns & { + @media screen and (max-width: 630px) { + font-size: 16px; + } + } + .single-column & { font-size: 16px; } - @include limited-single-column('screen and (max-width: 600px)') { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; + .auto-columns &, + .single-column & { + @media screen and (max-width: 600px) { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } } } } @@ -268,7 +281,7 @@ margin-inline-start: 2px; width: 24px; height: 24px; - color: $lighter-text-color; + color: var(--lighter-text-color); font-size: 18px; line-height: 24px; text-align: center; @@ -288,10 +301,10 @@ top: 100%; width: 100%; z-index: 99; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - background: $ui-secondary-color; + box-shadow: 4px 4px 6px var(--base-shadow-color-a40); + background: var(--ui-secondary-color); border-radius: 0 0 4px 4px; - color: $inverted-text-color; + color: var(--inverted-text-color); font-size: 14px; padding: 6px; } @@ -309,7 +322,7 @@ &:focus, &:active, &.selected { - background: darken($ui-secondary-color, 10%); + background: var(--ui-secondary-color-darken-10); } > .account, @@ -349,7 +362,7 @@ & > .account.small { .display-name { & > span { - color: $lighter-text-color; + color: var(--lighter-text-color); } } } @@ -378,7 +391,7 @@ border-radius: 4px; height: 140px; width: 100%; - background-color: $base-shadow-color; + background-color: var(--base-shadow-color); background-position: center; background-size: cover; background-repeat: no-repeat; @@ -391,7 +404,7 @@ .icon-button { flex: 0 1 auto; - color: $secondary-text-color; + color: var(--secondary-text-color); font-size: 14px; font-weight: 500; padding: 10px; @@ -400,7 +413,7 @@ &:hover, &:focus, &:active { - color: lighten($secondary-text-color, 7%); + color: var(--secondary-text-color-lighten-7); } } @@ -413,8 +426,8 @@ box-sizing: border-box; background: linear-gradient( 0deg, - rgba($base-shadow-color, 0.8) 0, - rgba($base-shadow-color, 0.35) 80%, + var(--base-shadow-color-a80) 0, + var(--base-shadow-color-a35) 80%, transparent ); } @@ -423,8 +436,8 @@ .compose-form__upload__actions { background: linear-gradient( 180deg, - rgba($base-shadow-color, 0.8) 0, - rgba($base-shadow-color, 0.35) 80%, + var(--base-shadow-color-a80) 0, + var(--base-shadow-color-a35) 80%, transparent ); display: flex; @@ -435,7 +448,7 @@ .upload-progress { display: flex; padding: 10px; - color: $darker-text-color; + color: var(--darker-text-color); overflow: hidden; .fa { @@ -461,7 +474,7 @@ border-radius: 6px; width: 100%; height: 6px; - background: darken($simple-background-color, 8%); + background: var(--simple-background-color-darken-8); } .upload-progress__tracker { @@ -470,19 +483,19 @@ inset-inline-start: 0; height: 6px; border-radius: 6px; - background: $ui-highlight-color; + background: var(--ui-highlight-color); } .compose-form__modifiers { - color: $inverted-text-color; + color: var(--inverted-text-color); font-family: inherit; font-size: 14px; - background: $simple-background-color; + background: var(--simple-background-color); } .compose-form__buttons-wrapper { padding: 10px; - background: darken($simple-background-color, 8%); + background: var(--simple-background-color-darken-8); border-radius: 0 0 4px 4px; height: 27px; display: flex; @@ -510,7 +523,7 @@ border-width: 0 0 0 1px; border-style: none none none solid; border-color: transparent transparent transparent - darken($simple-background-color, 24%); + var(--simple-background-color-darken-24); padding: 0; width: 0; height: 27px; @@ -525,19 +538,19 @@ .privacy-dropdown.active { .privacy-dropdown__value { - background: $simple-background-color; + background: var(--simple-background-color); border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + box-shadow: 0 -4px 4px var(--base-shadow-color-a10); .icon-button { transition: none; } &.active { - background: $ui-highlight-color; + background: var(--ui-highlight-color); .icon-button { - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -548,14 +561,14 @@ .privacy-dropdown__dropdown { display: block; - box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + box-shadow: 2px 4px 6px var(--base-shadow-color-a10); } } .privacy-dropdown__dropdown { border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - background: $simple-background-color; + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); + background: var(--simple-background-color); overflow: hidden; transform-origin: 50% 0; } @@ -564,12 +577,12 @@ display: flex; align-items: center; padding: 10px; - color: $inverted-text-color; + color: var(--inverted-text-color); cursor: pointer; .privacy-dropdown__option__content { flex: 1 1 auto; - color: $lighter-text-color; + color: var(--lighter-text-color); &:not(:first-child) { margin-inline-start: 10px; @@ -577,27 +590,27 @@ strong { display: block; - color: $inverted-text-color; + color: var(--inverted-text-color); font-weight: 500; } } &:hover, &.active { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--ui-highlight-color); + color: var(--primary-text-color); .privacy-dropdown__option__content { - color: $primary-text-color; + color: var(--primary-text-color); strong { - color: $primary-text-color; + color: var(--primary-text-color); } } } &.active:hover { - background: lighten($ui-highlight-color, 4%); + background: var(--ui-highlight-color-lighten-4); } } @@ -625,8 +638,8 @@ .language-dropdown { &__dropdown { - background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + background: var(--simple-background-color); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); border-radius: 4px; overflow: hidden; z-index: 2; @@ -644,7 +657,7 @@ } .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; + inset-inline-end: 15px; } .emoji-mart-scroll { @@ -654,7 +667,7 @@ &__results { &__item { cursor: pointer; - color: $inverted-text-color; + color: var(--inverted-text-color); font-weight: 500; padding: 10px; border-radius: 4px; @@ -662,24 +675,24 @@ &:focus, &:active, &:hover { - background: $ui-secondary-color; + background: var(--ui-secondary-color); } &__common-name { - color: $darker-text-color; + color: var(--darker-text-color); } &.active { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--ui-highlight-color); + color: var(--primary-text-color); outline: 0; .language-dropdown__dropdown__results__item__common-name { - color: $secondary-text-color; + color: var(--secondary-text-color); } &:hover { - background: lighten($ui-highlight-color, 4%); + background: var(--ui-highlight-color-lighten-4); } } } diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index db9a23bce2f5506f890f3ef2c3082e4910831ea7..bb59d7b8374f4ef375eca855108c74604fec97d2 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -1,25 +1,25 @@ .scrollable .account-card { margin: 10px; - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); } .scrollable .account-card__title__avatar { img, .account__avatar { - border-color: lighten($ui-base-color, 8%); + border-color: var(--ui-base-color-lighten-8); } } .scrollable .account-card__bio::after { background: linear-gradient( to left, - lighten($ui-base-color, 8%), + var(--ui-base-color-lighten-8), transparent ); } .filter-form { - background: $ui-base-color; + background: var(--ui-base-color); &__column { padding: 10px 15px; @@ -50,7 +50,7 @@ &__input { display: inline-block; position: relative; - border: 1px solid $ui-primary-color; + border: 1px solid var(--ui-primary-color); box-sizing: border-box; width: 18px; height: 18px; @@ -61,8 +61,8 @@ vertical-align: middle; &.checked { - border-color: lighten($ui-highlight-color, 4%); - background: lighten($ui-highlight-color, 4%); + border-color: var(--ui-highlight-color-lighten-4); + background: var(--ui-highlight-color-lighten-4); } } } diff --git a/app/javascript/flavours/glitch/styles/components/domains.scss b/app/javascript/flavours/glitch/styles/components/domains.scss index a99ccd02b60693cd9f5f5cc85553a913d059b924..698eab9f41c31ebf63e9790539a3a294cc2da55e 100644 --- a/app/javascript/flavours/glitch/styles/components/domains.scss +++ b/app/javascript/flavours/glitch/styles/components/domains.scss @@ -1,11 +1,11 @@ .domain { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); .domain__domain-name { flex: 1 1 auto; display: block; - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; font-size: 14px; font-weight: 500; diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index eb053c14db53f1b21110a124167711e49c13c008..09b30547fca09eb70cd36d2cb437324a1df37328 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,15 +1,13 @@ -$doodle-background: #d9e1e8; - .doodle-modal { width: unset; } .doodle-modal__container { - background: $doodle-background; + background: #d9e1e8; text-align: center; line-height: 0; // remove weird gap under canvas canvas { - border: 5px solid $doodle-background; + border: 5px solid #d9e1e8; } } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index c1e2075354be3b61a794871aad038d5530713396..22b484798238c0283692731d7340c556427ea36d 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -15,15 +15,23 @@ padding-inline-end: 10px; } - @include single-column('screen and (max-width: 630px)') { + .auto-columns & { + @media screen and (max-width: 630px) { + flex: auto; + } + } + .single-column & { flex: auto; } - @include limited-single-column('screen and (max-width: 630px)') { - &, - &:first-child, - &:last-child { - padding: 0; + .auto-columns &, + .single-column & { + @media screen and (max-width: 630px) { + &, + &:first-child, + &:last-child { + padding: 0; + } } } @@ -33,9 +41,19 @@ flex: 1 1 200px; } - @include single-column('screen and (max-width: 630px)') { + .auto-columns & { + @media screen and (max-width: 630px) { + :root & { + flex: auto; + width: 100%; + min-width: 0; + max-width: none; + padding: 0; + } + } + } + .single-column & { :root & { - // Overrides `.wide` for single-column view flex: auto; width: 100%; min-width: 0; @@ -52,7 +70,7 @@ .drawer__header { flex: none; font-size: 16px; - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); margin-bottom: 10px; display: flex; flex-direction: row; @@ -66,7 +84,7 @@ padding: 15px 5px 13px; height: 48px; flex: 1 1 auto; - color: $darker-text-color; + color: var(--darker-text-color); text-align: center; text-decoration: none; cursor: pointer; @@ -78,7 +96,7 @@ &:focus, &:hover { outline: none; - background: lighten($ui-base-color, 3%); + background: var(--ui-base-color-lighten-3); transition: background 200ms ease-out; } } @@ -89,19 +107,26 @@ margin-bottom: 10px; flex: none; - @include limited-single-column( - 'screen and (max-width: #{$no-gap-breakpoint})' - ) { - margin-bottom: 0; + .auto-columns &, + .single-column & { + @media screen and (max-width: 1175px) { + margin-bottom: 0; + } + } + + .auto-columns & { + @media screen and (max-width: 630px) { + font-size: 16px; + } } - @include single-column('screen and (max-width: 630px)') { + .single-column & { font-size: 16px; } } .navigation-bar { padding: 10px; - color: $darker-text-color; + color: var(--darker-text-color); display: flex; align-items: center; @@ -117,7 +142,7 @@ text-overflow: ellipsis; strong { - color: $secondary-text-color; + color: var(--secondary-text-color); font-weight: 500; } } @@ -135,19 +160,19 @@ } .search-results__section { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); &:last-child { border-bottom: 0; } &__header { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-darken-4); + border-bottom: 1px solid var(--ui-base-color-lighten-8); padding: 15px; font-weight: 500; font-size: 14px; - color: $darker-text-color; + color: var(--darker-text-color); display: flex; justify-content: space-between; @@ -156,7 +181,7 @@ } button { - color: $highlight-text-color; + color: var(--highlight-text-color); padding: 0; border: 0; background: 0; @@ -178,13 +203,13 @@ & > .hashtag { display: block; padding: 10px; - color: $secondary-text-color; + color: var(--secondary-text-color); text-decoration: none; &:hover, &:active, &:focus { - color: lighten($secondary-text-color, 4%); + color: var(--secondary-text-color-lighten-4); text-decoration: underline; } } @@ -204,7 +229,7 @@ position: absolute; top: 0; inset-inline-start: 0; - background: lighten($ui-base-color, 13%); + background: var(--ui-base-color-lighten-13); box-sizing: border-box; padding: 0; display: flex; @@ -215,13 +240,13 @@ height: 100%; &.darker { - background: $ui-base-color; + background: var(--ui-base-color); } } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) - url('data:image/svg+xml;utf8,') + background: var(--ui-base-color-lighten-13) + url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; flex: 1; min-height: 47px; @@ -251,7 +276,7 @@ } .pseudo-drawer { - background: lighten($ui-base-color, 13%); + background: var(--ui-base-color-lighten-13); font-size: 13px; text-align: start; } @@ -263,39 +288,80 @@ inset-inline-start: 0; width: 100%; height: 100%; - background: rgba($base-overlay-background, 0.5); + background: var(--base-overlay-background-a50); } -@for $i from 0 through 3 { - .mbstobon-#{$i} .drawer__inner__mastodon { - @if $i == 3 { - background: - url('~flavours/glitch/images/wave-drawer.png') - no-repeat - bottom / - 100% - auto, - lighten($ui-base-color, 13%); - } @else { - background: - url('~flavours/glitch/images/wave-drawer-glitched.png') - no-repeat - bottom / - 100% - auto, - lighten($ui-base-color, 13%); - } +.mbstobon-0 .drawer__inner__mastodon { + background: + url('~flavours/glitch/images/wave-drawer-glitched.png') + no-repeat + bottom / + 100% + auto, + var(--ui-base-color-lighten-13); + + & > .mastodon { + background: url('~flavours/glitch/images/mbstobon-ui-0.png') + no-repeat + left + bottom / + contain; + filter: contrast(50%) brightness(50%); + } +} - & > .mastodon { - background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png') - no-repeat - left - bottom / - contain; +.mbstobon-1 .drawer__inner__mastodon { + background: + url('~flavours/glitch/images/wave-drawer-glitched.png') + no-repeat + bottom / + 100% + auto, + var(--ui-base-color-lighten-13); + + & > .mastodon { + background: url('~flavours/glitch/images/mbstobon-ui-1.png') + no-repeat + left + bottom / + contain; + filter: contrast(50%) brightness(50%); + } +} - @if $i != 3 { - filter: contrast(50%) brightness(50%); - } - } +.mbstobon-2 .drawer__inner__mastodon { + background: + url('~flavours/glitch/images/wave-drawer-glitched.png') + no-repeat + bottom / + 100% + auto, + var(--ui-base-color-lighten-13); + + & > .mastodon { + background: url('~flavours/glitch/images/mbstobon-ui-2.png') + no-repeat + left + bottom / + contain; + filter: contrast(50%) brightness(50%); + } +} + +.mbstobon-3 .drawer__inner__mastodon { + background: + url('~flavours/glitch/images/wave-drawer.png') + no-repeat + bottom / + 100% + auto, + var(--ui-base-color-lighten-13); + + & > .mastodon { + background: url('~flavours/glitch/images/mbstobon-ui-3.png') + no-repeat + left + bottom / + contain; } } diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index f76288978d630d4110dc44e5bc4edf67e9b77d8f..c653c15de94811caa978adcab36f219da69c496a 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -12,9 +12,9 @@ } .emoji-picker-dropdown__menu { - background: $simple-background-color; + background: var(--simple-background-color); position: relative; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + box-shadow: 4px 4px 6px var(--base-shadow-color-a40); border-radius: 4px; margin-top: 5px; z-index: 2; @@ -40,9 +40,9 @@ z-index: 4; top: -4px; inset-inline-start: -8px; - background: $simple-background-color; + background: var(--simple-background-color); border-radius: 4px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + box-shadow: 1px 2px 6px var(--base-shadow-color-a20); overflow: hidden; button { @@ -55,7 +55,7 @@ &:hover, &:focus, &:active { - background: rgba($ui-secondary-color, 0.4); + background: var(--ui-secondary-color-a40); } } diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index e402838dbf964154935f43591a24bc759ca0c150..d377a34490c53c1d25334b41b1c6465c7b7ea668 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -7,7 +7,7 @@ font-size: 13px; display: inline-block; - color: $inverted-text-color; + color: var(--inverted-text-color); .emoji-mart-emoji { padding: 6px; @@ -15,13 +15,13 @@ } .emoji-mart-bar { - border: 0 solid darken($ui-secondary-color, 8%); + border: 0 solid var(--ui-secondary-color-darken-8); &:first-child { border-bottom-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; - background: $ui-secondary-color; + background: var(--ui-secondary-color); } &:last-child { @@ -36,7 +36,7 @@ display: flex; justify-content: space-between; padding: 0 6px; - color: $lighter-text-color; + color: var(--lighter-text-color); line-height: 0; } @@ -52,15 +52,15 @@ border: 0; &:hover { - color: darken($lighter-text-color, 4%); + color: var(--lighter-text-color-darken-4); } } .emoji-mart-anchor-selected { - color: $highlight-text-color; + color: var(--highlight-text-color); &:hover { - color: darken($highlight-text-color, 4%); + color: var(--highlight-text-color-darken-4); } .emoji-mart-anchor-bar { @@ -74,7 +74,7 @@ inset-inline-start: 0; width: 100%; height: 3px; - background-color: darken($ui-highlight-color, 3%); + background-color: var(--ui-highlight-color-darken-3); } .emoji-mart-anchors { @@ -95,19 +95,19 @@ height: 270px; max-height: 35vh; padding: 0 6px 6px; - background: $simple-background-color; + background: var(--simple-background-color); will-change: transform; &::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); + background-color: var(--base-overlay-background-a30); } } .emoji-mart-search { padding: 10px; padding-inline-end: 45px; - background: $simple-background-color; + background: var(--simple-background-color); position: relative; input { @@ -118,9 +118,9 @@ font-family: inherit; display: block; width: 100%; - background: rgba($ui-secondary-color, 0.3); - color: $inverted-text-color; - border: 1px solid $ui-secondary-color; + background: var(--ui-secondary-color-a30); + color: var(--inverted-text-color); + border: 1px solid var(--ui-secondary-color); border-radius: 4px; &::-moz-focus-inner { @@ -159,7 +159,7 @@ } svg { - fill: $action-button-color; + fill: var(--action-button-color); } } @@ -180,7 +180,7 @@ inset-inline-start: 0; width: 100%; height: 100%; - background-color: rgba($ui-secondary-color, 0.7); + background-color: var(--ui-secondary-color-a70); border-radius: 100%; } } @@ -197,7 +197,7 @@ width: 100%; font-weight: 500; padding: 5px 6px; - background: $simple-background-color; + background: var(--simple-background-color); } } @@ -241,7 +241,7 @@ .emoji-mart-no-results { font-size: 14px; - color: $light-text-color; + color: var(--light-text-color); text-align: center; padding: 5px 6px; padding-top: 70px; diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index 78826e63315dd01e64f5599985d4d3c96d4fe0c8..a500e824e63616e52210ebb06d4c2c6714331133 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -3,7 +3,7 @@ } .explore__search-header { - background: darken($ui-base-color, 4%); + background: var(--ui-base-color-darken-4); justify-content: center; align-items: center; padding: 15px; @@ -14,18 +14,18 @@ } .search__input { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); padding: 10px; } .search__popout { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); } .search .fa { top: 10px; inset-inline-end: 10px; - color: $dark-text-color; + color: var(--dark-text-color); } .search .fa-times-circle { @@ -42,10 +42,10 @@ .story { display: flex; align-items: center; - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; padding: 15px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); gap: 15px; &:last-child { @@ -55,11 +55,11 @@ &:hover, &:active, &:focus { - color: $highlight-text-color; + color: var(--highlight-text-color); .story__details__publisher, .story__details__shared { - color: $highlight-text-color; + color: var(--highlight-text-color); } } @@ -67,7 +67,7 @@ flex: 1 1 auto; &__publisher { - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 8px; } @@ -79,7 +79,7 @@ } &__shared { - color: $darker-text-color; + color: var(--darker-text-color); } strong { diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index e173016b6784d744afeaee94f93b01406812ff1b..4f0e5822b62b6d07c4cb7797557e44b5be521689 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -1,8 +1,8 @@ .list-editor { - background: $ui-base-color; + background: var(--ui-base-color); flex-direction: column; border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); width: 380px; overflow: hidden; @@ -12,7 +12,7 @@ h4 { padding: 15px 0; - background: lighten($ui-base-color, 13%); + background: var(--ui-base-color-lighten-13); font-weight: 500; font-size: 16px; text-align: center; @@ -28,7 +28,7 @@ &.backdrop { width: calc(100% - 60px); - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); border-radius: 0 0 0 8px; } } @@ -53,10 +53,10 @@ } .list-adder { - background: $ui-base-color; + background: var(--ui-base-color); flex-direction: column; border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: 2px 4px 15px var(--base-shadow-color-a40); width: 380px; overflow: hidden; @@ -65,11 +65,11 @@ } &__account { - background: lighten($ui-base-color, 13%); + background: var(--ui-base-color-lighten-13); } &__lists { - background: lighten($ui-base-color, 13%); + background: var(--ui-base-color-lighten-13); height: 50vh; border-radius: 0 0 8px 8px; overflow-y: auto; @@ -77,7 +77,7 @@ .list { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .list__wrapper { diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 784b06b00c0da7c99a4f074b2a967d00295e8030..458a08e952ef830651e03558c0425b8cf8199bb4 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -2,8 +2,8 @@ position: relative; display: flex; flex-direction: row; - background: $ui-secondary-color; - color: $inverted-text-color; + background: var(--ui-secondary-color); + color: var(--inverted-text-color); border-radius: 8px; height: 80vh; width: 80vw; @@ -32,7 +32,7 @@ span.hint { display: block; - color: $lighter-text-color; + color: var(--lighter-text-color); } h1 { @@ -55,9 +55,9 @@ display: block; padding: 15px 20px; color: inherit; - background: lighten($ui-secondary-color, 8%); + background: var(--ui-secondary-color-lighten-8); border: 0; - border-bottom: 1px $ui-secondary-color solid; + border-bottom: 1px var(--ui-secondary-color) solid; cursor: pointer; text-decoration: none; outline: none; @@ -74,23 +74,23 @@ } &:hover { - background: $ui-secondary-color; + background: var(--ui-secondary-color); } &.active { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--ui-highlight-color); + color: var(--primary-text-color); } &.close, &.close:hover { - background: $error-value-color; - color: $primary-text-color; + background: var(--error-value-color); + color: var(--primary-text-color); } } .glitch.local-settings__navigation { - background: lighten($ui-secondary-color, 8%); + background: var(--ui-secondary-color-lighten-8); width: 212px; font-size: 15px; line-height: 20px; @@ -109,7 +109,7 @@ margin-bottom: 2px; .hint a { - color: $lighter-text-color; + color: var(--lighter-text-color); font-weight: 500; text-decoration: underline; @@ -160,7 +160,7 @@ } a { - color: $lighter-text-color; + color: var(--lighter-text-color); font-weight: 500; text-decoration: underline; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 22babe03e2fe411612bdb0f53af8538fe5ca5afb..b291f17d36d525fa0377668e7fd08322296c33e6 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -1,7 +1,7 @@ .video-error-cover { align-items: center; - background: $base-overlay-background; - color: $primary-text-color; + background: var(--base-overlay-background); + color: var(--primary-text-color); cursor: pointer; display: flex; flex-direction: column; @@ -14,8 +14,8 @@ } .media-spoiler { - background: $base-overlay-background; - color: $darker-text-color; + background: var(--base-overlay-background); + color: var(--darker-text-color); border: 0; width: 100%; height: 100%; @@ -23,13 +23,20 @@ &:hover, &:active, &:focus { - color: lighten($darker-text-color, 8%); + color: var(--darker-text-color-lighten-8); } .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player + margin-top: 15px; + } + + &.full-width { + margin-left: -14px; + margin-right: -14px; + width: inherit; + max-width: none; + border-radius: 0; } - @include fullwidth-gallery; } .media-spoiler__warning { @@ -53,8 +60,8 @@ .media-gallery__gifv__label { display: block; - color: $white; - background: rgba($black, 0.65); + color: var(--white); + background: var(--black-a65); padding: 2px 6px; border-radius: 4px; font-size: 11px; @@ -77,7 +84,13 @@ grid-template-rows: 50% 50%; gap: 2px; - @include fullwidth-gallery; + &.full-width { + margin-left: -14px; + margin-right: -14px; + width: inherit; + max-width: none; + border-radius: 0; + } } .media-gallery__item { @@ -101,7 +114,7 @@ } &.letterbox { - background: $base-shadow-color; + background: var(--base-shadow-color); } } @@ -109,7 +122,7 @@ cursor: zoom-in; display: block; text-decoration: none; - color: $secondary-text-color; + color: var(--secondary-text-color); position: relative; z-index: 1; @@ -134,7 +147,7 @@ top: 0; inset-inline-start: 0; z-index: 0; - background: $base-overlay-background; + background: var(--base-overlay-background); &--hidden { display: none; @@ -164,7 +177,7 @@ } .media-gallery__item-thumbnail-label { - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); overflow: hidden; position: absolute; @@ -186,17 +199,17 @@ &__close, &__zoom-button { - color: rgba($white, 0.7); + color: var(--white-a70); &:hover, &:focus, &:active { - color: $white; - background-color: rgba($white, 0.15); + color: var(--white); + background-color: var(--white-a15); } &:focus { - background-color: rgba($white, 0.3); + background-color: var(--white-a30); } } } @@ -236,7 +249,7 @@ background: transparent; box-sizing: border-box; border: 0; - color: rgba($white, 0.7); + color: var(--white-a70); cursor: pointer; display: flex; align-items: center; @@ -251,7 +264,7 @@ &:hover, &:focus, &:active { - color: $white; + color: var(--white); } } @@ -277,49 +290,49 @@ padding: 20px 0; .icon-button { - color: $white; + color: var(--white); &:hover, &:focus, &:active { - color: $white; - background-color: rgba($white, 0.15); + color: var(--white); + background-color: var(--white-a15); } &:focus { - background-color: rgba($white, 0.3); + background-color: var(--white-a30); } &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); &:hover, &:focus, &:active { - background: rgba($highlight-text-color, 0.15); + background: var(--highlight-text-color-a15); } &:focus { - background: rgba($highlight-text-color, 0.3); + background: var(--highlight-text-color-a30); } } &.star-icon.active { - color: $gold-star; + color: var(--gold-star); &:hover, &:focus, &:active { - background: rgba($gold-star, 0.15); + background: var(--gold-star-a15); } &:focus { - background: rgba($gold-star, 0.3); + background: var(--gold-star-a30); } } &.disabled { - color: $white; + color: var(--white); background-color: transparent; cursor: default; opacity: 0.4; @@ -336,7 +349,7 @@ .media-modal__page-dot { flex: 0 0 auto; - background-color: $white; + background-color: var(--white); opacity: 0.4; height: 6px; width: 6px; @@ -375,7 +388,7 @@ overflow: hidden; box-sizing: border-box; position: relative; - background: darken($ui-base-color, 8%); + background: var(--ui-base-color-darken-8); border-radius: 4px; padding-bottom: 44px; width: 100%; @@ -441,11 +454,11 @@ .video-player { overflow: hidden; position: relative; - background: $base-shadow-color; + background: var(--base-shadow-color); max-width: 100%; border-radius: 4px; box-sizing: border-box; - color: $white; + color: var(--white); display: flex; align-items: center; @@ -463,7 +476,13 @@ height: 100%; } - @include fullwidth-gallery; + &.full-width { + margin-left: -14px; + margin-right: -14px; + width: inherit; + max-width: none; + border-radius: 0; + } video { display: block; @@ -503,8 +522,8 @@ box-sizing: border-box; background: linear-gradient( 0deg, - rgba($base-shadow-color, 0.85) 0, - rgba($base-shadow-color, 0.45) 60%, + var(--base-shadow-color-a85) 0, + var(--base-shadow-color-a45) 60%, transparent ); padding: 0 15px; @@ -532,8 +551,8 @@ height: 100%; z-index: 4; border: 0; - background: $base-shadow-color; - color: $darker-text-color; + background: var(--base-shadow-color); + color: var(--darker-text-color); transition: none; pointer-events: none; @@ -544,7 +563,7 @@ &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); + color: var(--darker-text-color-lighten-7); } } @@ -596,12 +615,12 @@ padding: 5px; font-size: 16px; border: 0; - color: rgba($white, 0.75); + color: var(--white-a75); &:active, &:hover, &:focus { - color: $white; + color: var(--white); } } } @@ -622,7 +641,7 @@ } &__time-current { - color: $white; + color: var(--white); } &__time-sep { @@ -632,7 +651,7 @@ &__time-sep, &__time-total { - color: $white; + color: var(--white); } &__volume { @@ -656,7 +675,7 @@ &::before { content: ''; width: 50px; - background: rgba($white, 0.35); + background: var(--white-a35); border-radius: 4px; display: block; position: absolute; @@ -674,7 +693,7 @@ inset-inline-start: 0; top: 50%; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); + background: var(--ui-highlight-color-lighten-8); } &__handle { @@ -687,8 +706,8 @@ inset-inline-start: 0; margin-inline-start: -6px; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + background: var(--ui-highlight-color-lighten-8); + box-shadow: 1px 2px 6px var(--base-shadow-color-a20); opacity: 0; @media (prefers-reduced-motion: no-preference) { @@ -708,7 +727,7 @@ text-decoration: none; font-size: 14px; font-weight: 500; - color: $white; + color: var(--white); &:hover, &:active, @@ -726,7 +745,7 @@ &::before { content: ''; width: 100%; - background: rgba($white, 0.35); + background: var(--white-a35); border-radius: 4px; display: block; position: absolute; @@ -741,11 +760,11 @@ height: 4px; border-radius: 4px; top: 14px; - background: lighten($ui-highlight-color, 8%); + background: var(--ui-highlight-color-lighten-8); } &__buffer { - background: rgba($white, 0.2); + background: var(--white-a20); } &__handle { @@ -757,8 +776,8 @@ height: 12px; top: 10px; margin-inline-start: -6px; - background: lighten($ui-highlight-color, 8%); - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + background: var(--ui-highlight-color-lighten-8); + box-shadow: 1px 2px 6px var(--base-shadow-color-a20); @media (prefers-reduced-motion: no-preference) { transition: opacity 0.1s ease; diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index 73d8f1235259c8e87ab51d40dc397a13f409fecc..ae46c773b7be5ca12cc33c13be62b3e971fdee9d 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -15,7 +15,7 @@ display: block; font-size: 15px; line-height: 20px; - color: $highlight-text-color; + color: var(--highlight-text-color); border: 0; background: transparent; padding: 0; @@ -23,7 +23,7 @@ text-decoration: none; &--destructive { - color: $error-value-color; + color: var(--error-value-color); } &:hover, @@ -32,17 +32,17 @@ } &:disabled { - color: $ui-primary-color; + color: var(--ui-primary-color); cursor: default; } } .button { - background-color: $ui-button-background-color; + background-color: var(--ui-button-background-color); border: 10px none; border-radius: 4px; box-sizing: border-box; - color: $ui-button-color; + color: var(--ui-button-color); cursor: pointer; display: inline-block; font-family: inherit; @@ -62,35 +62,35 @@ &:active, &:focus, &:hover { - background-color: $ui-button-focus-background-color; + background-color: var(--ui-button-focus-background-color); } &--destructive { &:active, &:focus, &:hover { - background-color: $ui-button-destructive-focus-background-color; + background-color: var(--ui-button-destructive-focus-background-color); transition: none; } } &:disabled { - background-color: $ui-primary-color; + background-color: var(--ui-primary-color); cursor: default; } &.button-secondary { - color: $ui-button-secondary-color; + color: var(--ui-button-secondary-color); background: transparent; padding: 6px 17px; - border: 1px solid $ui-button-secondary-border-color; + border: 1px solid var(--ui-button-secondary-border-color); &:active, &:focus, &:hover { - border-color: $ui-button-secondary-focus-background-color; - color: $ui-button-secondary-focus-color; - background-color: $ui-button-secondary-focus-background-color; + border-color: var(--ui-button-secondary-focus-background-color); + color: var(--ui-button-secondary-focus-color); + background-color: var(--ui-button-secondary-focus-background-color); text-decoration: none; } @@ -102,14 +102,14 @@ &.button-tertiary { background: transparent; padding: 6px 17px; - color: $ui-button-tertiary-color; - border: 1px solid $ui-button-tertiary-border-color; + color: var(--ui-button-tertiary-color); + border: 1px solid var(--ui-button-tertiary-border-color); &:active, &:focus, &:hover { - background-color: $ui-button-tertiary-focus-background-color; - color: $ui-button-tertiary-focus-color; + background-color: var(--ui-button-tertiary-focus-background-color); + color: var(--ui-button-tertiary-focus-color); border: 0; padding: 7px 18px; } @@ -119,26 +119,26 @@ } &.button--confirmation { - color: $valid-value-color; - border-color: $valid-value-color; + color: var(--valid-value-color); + border-color: var(--valid-value-color); &:active, &:focus, &:hover { - background: $valid-value-color; - color: $primary-text-color; + background: var(--valid-value-color); + color: var(--primary-text-color); } } &.button--destructive { - color: $error-value-color; - border-color: $error-value-color; + color: var(--error-value-color); + border-color: var(--error-value-color); &:active, &:focus, &:hover { - background: $error-value-color; - color: $primary-text-color; + background: var(--error-value-color); + color: var(--primary-text-color); } } } @@ -152,7 +152,7 @@ .icon-button { display: inline-block; padding: 0; - color: $action-button-color; + color: var(--action-button-color); border: 0; border-radius: 4px; background: transparent; @@ -169,24 +169,24 @@ &:hover, &:active, &:focus { - color: lighten($action-button-color, 7%); - background-color: rgba($action-button-color, 0.15); + color: var(--action-button-color-lighten-7); + background-color: var(--action-button-color-a15); transition: all 200ms ease-out; transition-property: background-color, color; } &:focus { - background-color: rgba($action-button-color, 0.3); + background-color: var(--action-button-color-a30); } &.disabled { - color: darken($action-button-color, 13%); + color: var(--action-button-color-darken-13); background-color: transparent; cursor: default; } &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); } &.copyable { @@ -194,7 +194,7 @@ } &.copied { - background: $valid-value-color; + background: var(--valid-value-color); transition: none; } @@ -209,42 +209,42 @@ } &.inverted { - color: $lighter-text-color; + color: var(--lighter-text-color); &:hover, &:active, &:focus { - color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); + color: var(--lighter-text-color-darken-7); + background-color: var(--lighter-text-color-a15); } &:focus { - background-color: rgba($lighter-text-color, 0.3); + background-color: var(--lighter-text-color-a30); } &.disabled { - color: lighten($lighter-text-color, 7%); + color: var(--lighter-text-color-lighten-7); background-color: transparent; } &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); &.disabled { - color: lighten($highlight-text-color, 13%); + color: var(--highlight-text-color-lighten-13); } } } &.overlayed { box-sizing: content-box; - background: rgba($base-overlay-background, 0.6); - color: rgba($primary-text-color, 0.7); + background: var(--base-overlay-background-a60); + color: var(--primary-text-color-a70); border-radius: 4px; padding: 2px; &:hover { - background: rgba($base-overlay-background, 0.9); + background: var(--base-overlay-background-a90); } } @@ -275,7 +275,7 @@ } .text-icon-button { - color: $lighter-text-color; + color: var(--lighter-text-color); border: 0; border-radius: 4px; background: transparent; @@ -289,24 +289,24 @@ &:hover, &:active, &:focus { - color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); + color: var(--lighter-text-color-darken-7); + background-color: var(--lighter-text-color-a15); transition: all 200ms ease-out; transition-property: background-color, color; } &:focus { - background-color: rgba($lighter-text-color, 0.3); + background-color: var(--lighter-text-color-a30); } &.disabled { - color: lighten($lighter-text-color, 20%); + color: var(--lighter-text-color-lighten-20); background-color: transparent; cursor: default; } &.active { - color: $highlight-text-color; + color: var(--highlight-text-color); } &::-moz-focus-inner { @@ -353,16 +353,16 @@ body > [data-popper-placement] { position: absolute; .fa.star-icon { - color: $gold-star; + color: var(--gold-star); } } .icon-button.star-icon.active { - color: $gold-star; + color: var(--gold-star); } .icon-button.bookmark-icon.active { - color: $red-bookmark; + color: var(--red-bookmark); } @media (prefers-reduced-motion: no-preference) { @@ -387,7 +387,7 @@ body > [data-popper-placement] { text-decoration: none; &:hover { - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: underline; } } @@ -455,24 +455,24 @@ body > [data-popper-placement] { align-items: center; justify-content: center; flex-direction: column; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + scrollbar-width: none; + -ms-overflow-style: none; * { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + scrollbar-width: none; + -ms-overflow-style: none; } &::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; - background: transparent; /* Chrome/Safari/Webkit */ + background: transparent; } .image-loader__preview-canvas { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; + max-width: 100%; + max-height: 80%; background: url('~images/void.png') repeat; object-fit: contain; } @@ -499,8 +499,8 @@ body > [data-popper-placement] { justify-content: center; img { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; + max-width: 100%; + max-height: 80%; width: auto; height: auto; object-fit: contain; @@ -572,7 +572,7 @@ body > [data-popper-placement] { margin-bottom: 4px; font-size: 13px; line-height: 18px; - color: $darker-text-color; + color: var(--darker-text-color); } &__list { @@ -600,7 +600,7 @@ body > [data-popper-placement] { display: block; &--dangerous { - color: $error-value-color; + color: var(--error-value-color); } a, @@ -648,7 +648,7 @@ body > [data-popper-placement] { .static-content { padding: 10px; padding-top: 20px; - color: $dark-text-color; + color: var(--dark-text-color); h1 { font-size: 16px; @@ -702,7 +702,7 @@ body > [data-popper-placement] { .tabs-bar { box-sizing: border-box; display: flex; - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); flex: 0 0 auto; overflow-y: auto; } @@ -712,12 +712,12 @@ body > [data-popper-placement] { flex: 1 1 auto; padding: 15px 10px; padding-bottom: 13px; - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; text-align: center; font-size: 14px; font-weight: 500; - border-bottom: 2px solid lighten($ui-base-color, 8%); + border-bottom: 2px solid var(--ui-base-color-lighten-8); transition: all 50ms linear; transition-property: border-bottom, background, color; @@ -729,15 +729,21 @@ body > [data-popper-placement] { &:hover, &:focus, &:active { - @include multi-columns('screen and (min-width: 631px)') { - background: lighten($ui-base-color, 14%); - border-bottom-color: lighten($ui-base-color, 14%); + .auto-columns & { + @media screen and (min-width: 631px) { + background: var(--ui-base-color-lighten-14); + border-bottom-color: var(--ui-base-color-lighten-14); + } + } + .multi-columns & { + background: var(--ui-base-color-lighten-14); + border-bottom-color: var(--ui-base-color-lighten-14); } } &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $highlight-text-color; + border-bottom: 2px solid var(--ui-highlight-color); + color: var(--highlight-text-color); } span { @@ -758,14 +764,14 @@ body > [data-popper-placement] { position: absolute; inset-inline-start: 9px; top: -13px; - background: $ui-highlight-color; - border: 2px solid lighten($ui-base-color, 8%); + background: var(--ui-highlight-color); + border: 2px solid var(--ui-base-color-lighten-8); padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 500; line-height: 14px; - color: $primary-text-color; + color: var(--primary-text-color); } &__issue-badge { @@ -773,7 +779,7 @@ body > [data-popper-placement] { inset-inline-start: 11px; bottom: 1px; display: block; - background: $error-red; + background: var(--error-red); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -781,7 +787,7 @@ body > [data-popper-placement] { } .column-link--transparent .icon-with-badge__badge { - border-color: darken($ui-base-color, 8%); + border-color: var(--ui-base-color-darken-8); } .scrollable { @@ -795,7 +801,6 @@ body > [data-popper-placement] { } @supports (display: grid) { - // hack to fix Chrome <57 contain: strict; } @@ -817,7 +822,6 @@ body > [data-popper-placement] { .scrollable.fullscreen { @supports (display: grid) { - // hack to fix Chrome <57 contain: none; } } @@ -830,7 +834,7 @@ body > [data-popper-placement] { border: 0; padding: 0; user-select: none; - -webkit-tap-highlight-color: rgba($base-overlay-background, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } @@ -856,22 +860,22 @@ body > [data-popper-placement] { height: 24px; padding: 0; border-radius: 30px; - background-color: $ui-base-color; + background-color: var(--ui-base-color); transition: background-color 0.2s ease; } .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($ui-base-color, 10%); + background-color: var(--ui-base-color-darken-10); } .react-toggle--checked .react-toggle-track { - background-color: darken($ui-highlight-color, 2%); + background-color: var(--ui-highlight-color-darken-2); } .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: $ui-highlight-color; + background-color: var(--ui-highlight-color); } .react-toggle-track-check { @@ -917,9 +921,9 @@ body > [data-popper-placement] { inset-inline-start: 1px; width: 22px; height: 22px; - border: 1px solid $ui-base-color; + border: 1px solid var(--ui-base-color); border-radius: 50%; - background-color: darken($simple-background-color, 2%); + background-color: var(--simple-background-color-darken-2); box-sizing: border-box; transition: all 0.25s ease; transition-property: border-color, left; @@ -927,13 +931,13 @@ body > [data-popper-placement] { .react-toggle--checked .react-toggle-thumb { inset-inline-start: 27px; - border-color: $ui-highlight-color; + border-color: var(--ui-highlight-color); } .getting-started__wrapper, .getting_started, .flex-spacer { - background: $ui-base-color; + background: var(--ui-base-color); } .getting-started__wrapper { @@ -946,15 +950,15 @@ body > [data-popper-placement] { } .getting-started { - background: $ui-base-color; + background: var(--ui-base-color); flex: 1 0 auto; p { - color: $secondary-text-color; + color: var(--secondary-text-color); } a { - color: $dark-text-color; + color: var(--dark-text-color); } &__trends { @@ -964,14 +968,14 @@ body > [data-popper-placement] { margin-top: 10px; h4 { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); padding: 10px; font-size: 12px; text-transform: uppercase; font-weight: 500; a { - color: $darker-text-color; + color: var(--darker-text-color); text-decoration: none; } } @@ -997,7 +1001,7 @@ body > [data-popper-placement] { padding: 10px; &__current { - color: $darker-text-color; + color: var(--darker-text-color); } } } @@ -1009,7 +1013,7 @@ body > [data-popper-placement] { font-size: 12px; line-height: 19px; font-weight: 500; - background: $ui-base-color; + background: var(--ui-base-color); padding: 4px 8px; margin: -6px 10px; } @@ -1030,16 +1034,16 @@ body > [data-popper-placement] { kbd { display: inline-block; padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); + background-color: var(--ui-base-color-lighten-8); + border: 1px solid var(--ui-base-color-darken-4); } } .setting-text { - color: $darker-text-color; + color: var(--darker-text-color); background: transparent; border: 0; - border-bottom: 2px solid $ui-primary-color; + border-bottom: 2px solid var(--ui-primary-color); outline: 0; box-sizing: border-box; display: block; @@ -1050,22 +1054,25 @@ body > [data-popper-placement] { &:focus, &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; + color: var(--primary-text-color); + border-bottom-color: var(--ui-highlight-color); } - @include limited-single-column('screen and (max-width: 600px)') { - font-size: 16px; + .auto-columns &, + .single-column & { + @media screen and (max-width: 600px) { + font-size: 16px; + } } &.light { - color: $inverted-text-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); + color: var(--inverted-text-color); + border-bottom: 2px solid var(--ui-base-color-lighten-27); &:focus, &:active { - color: $inverted-text-color; - border-bottom-color: $ui-highlight-color; + color: var(--inverted-text-color); + border-bottom-color: var(--ui-highlight-color); } } } @@ -1095,13 +1102,13 @@ button.icon-button.active i.fa-retweet { } button.icon-button.disabled i.fa-retweet { - color: darken($action-button-color, 13%); + color: var(--action-button-color-darken-13); } } .load-more { display: block; - color: $dark-text-color; + color: var(--dark-text-color); background-color: transparent; border: 0; font-size: inherit; @@ -1115,17 +1122,17 @@ button.icon-button.active i.fa-retweet { text-decoration: none; &:hover { - background: lighten($ui-base-color, 2%); + background: var(--ui-base-color-lighten-2); } } .load-gap { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .timeline-hint { text-align: center; - color: $darker-text-color; + color: var(--darker-text-color); padding: 15px; box-sizing: border-box; width: 100%; @@ -1136,20 +1143,20 @@ button.icon-button.active i.fa-retweet { } a { - color: $highlight-text-color; + color: var(--highlight-text-color); text-decoration: none; &:hover, &:focus, &:active { text-decoration: underline; - color: lighten($highlight-text-color, 4%); + color: var(--highlight-text-color-lighten-4); } } } .missing-indicator { - padding-top: 20px + 48px; + padding-top: 68px; .regeneration-indicator__figure { background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg'); @@ -1157,7 +1164,7 @@ button.icon-button.active i.fa-retweet { } .scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; + border-top: 1px solid var(--ui-base-color); } .notification__dismiss-overlay { @@ -1166,7 +1173,7 @@ button.icon-button.active i.fa-retweet { top: 0; inset-inline-end: 0; bottom: -1px; - padding-inline-start: 15px; // space for the box shadow to be visible + padding-inline-start: 15px; z-index: 999; align-items: center; justify-content: flex-end; @@ -1174,25 +1181,25 @@ button.icon-button.active i.fa-retweet { display: flex; .wrappy { - width: $dismiss-overlay-width; + width: 4rem; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; - background: lighten($ui-base-color, 8%); - border-inline-start: 1px solid lighten($ui-base-color, 20%); + background: var(--ui-base-color-lighten-8); + border-inline-start: 1px solid var(--ui-base-color-lighten-20); box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; + border-bottom: 1px solid var(--ui-base-color); } .ckbox { - border: 2px solid $ui-primary-color; + border: 2px solid var(--ui-primary-color); border-radius: 2px; width: 30px; height: 30px; font-size: 20px; - color: $darker-text-color; + color: var(--darker-text-color); text-shadow: 0 0 5px black; display: flex; justify-content: center; @@ -1203,7 +1210,7 @@ button.icon-button.active i.fa-retweet { outline: 0 !important; .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; + box-shadow: 0 0 1px 1px var(--ui-highlight-color); } } } @@ -1220,7 +1227,7 @@ button.icon-button.active i.fa-retweet { } .loading-indicator { - color: $dark-text-color; + color: var(--dark-text-color); font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -1235,7 +1242,7 @@ button.icon-button.active i.fa-retweet { } .circular-progress { - color: lighten($ui-base-color, 26%); + color: var(--ui-base-color-lighten-26); animation: 1.4s linear 0s infinite normal none running simple-rotate; circle { @@ -1352,10 +1359,10 @@ button.icon-button.active i.fa-retweet { padding: 0; margin: 0; border: 0; - color: $white; + color: var(--white); &__label { - background-color: rgba($black, 0.45); + background-color: var(--black-a45); backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); border-radius: 6px; padding: 10px 15px; @@ -1376,7 +1383,7 @@ button.icon-button.active i.fa-retweet { &:hover, &:focus { .spoiler-button__overlay__label { - background-color: rgba($black, 0.9); + background-color: var(--black-a90); } } } @@ -1389,7 +1396,7 @@ button.icon-button.active i.fa-retweet { .setting-toggle__label, .setting-meta__label { - color: $darker-text-color; + color: var(--darker-text-color); display: inline-block; margin-bottom: 14px; margin-inline-start: 8px; @@ -1438,7 +1445,7 @@ button.icon-button.active i.fa-retweet { .upload-area { align-items: center; - background: rgba($base-overlay-background, 0.8); + background: var(--base-overlay-background-a80); display: flex; height: 100vh; justify-content: center; @@ -1472,8 +1479,8 @@ button.icon-button.active i.fa-retweet { inset-inline-start: 0; z-index: -1; border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); + background: var(--ui-base-color); + box-shadow: 0 0 5px var(--base-shadow-color-a20); } .upload-area__content { @@ -1482,10 +1489,10 @@ button.icon-button.active i.fa-retweet { align-items: center; justify-content: center; text-align: center; - color: $secondary-text-color; + color: var(--secondary-text-color); font-size: 18px; font-weight: 500; - border: 2px dashed $ui-base-lighter-color; + border: 2px dashed var(--ui-base-lighter-color); border-radius: 4px; } @@ -1495,7 +1502,7 @@ button.icon-button.active i.fa-retweet { } .loading-bar { - background-color: $ui-highlight-color; + background-color: var(--ui-highlight-color); height: 3px; position: fixed; top: 0; @@ -1512,7 +1519,7 @@ button.icon-button.active i.fa-retweet { display: block; inset-inline-end: -0.25em; top: -0.25em; - background-color: $ui-highlight-color; + background-color: var(--ui-highlight-color); border-radius: 50%; font-size: 75%; width: 1em; @@ -1521,12 +1528,12 @@ button.icon-button.active i.fa-retweet { .conversation { display: flex; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); padding: 5px; padding-bottom: 0; &:focus { - background: lighten($ui-base-color, 2%); + background: var(--ui-base-color-lighten-2); outline: 0; } @@ -1540,7 +1547,7 @@ button.icon-button.active i.fa-retweet { &__unread { display: inline-block; - background: $highlight-text-color; + background: var(--highlight-text-color); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -1562,12 +1569,12 @@ button.icon-button.active i.fa-retweet { &__relative-time { font-size: 15px; - color: $darker-text-color; + color: var(--darker-text-color); padding-inline-start: 15px; } &__names { - color: $darker-text-color; + color: var(--darker-text-color); font-size: 15px; white-space: nowrap; overflow: hidden; @@ -1577,7 +1584,7 @@ button.icon-button.active i.fa-retweet { flex-grow: 1; a { - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; &:hover, @@ -1594,10 +1601,10 @@ button.icon-button.active i.fa-retweet { } &--unread { - background: lighten($ui-base-color, 2%); + background: var(--ui-base-color-lighten-2); &:focus { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } .conversation__content__info { @@ -1605,7 +1612,7 @@ button.icon-button.active i.fa-retweet { } .conversation__content__relative-time { - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -1635,13 +1642,13 @@ button.icon-button.active i.fa-retweet { width: auto; padding: 15px; margin: 0; - color: $white; - background: rgba($black, 0.85); + color: var(--white); + background: var(--black-a85); backdrop-filter: blur(8px); - border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); + border: 1px solid color-mix(in srgb, var(--ui-base-color-lighten-4) 85%, transparent); border-radius: 8px; - box-shadow: 0 10px 15px -3px rgba($base-shadow-color, 0.25), - 0 4px 6px -4px rgba($base-shadow-color, 0.25); + box-shadow: 0 10px 15px -3px var(--base-shadow-color-a25), + 0 4px 6px -4px var(--base-shadow-color-a25); cursor: default; transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1); transform: translateZ(0); @@ -1666,14 +1673,14 @@ button.icon-button.active i.fa-retweet { text-transform: uppercase; margin-inline-start: 10px; cursor: pointer; - color: $blurple-300; + color: var(--blurple-300); border-radius: 4px; padding: 0 4px; &:hover, &:focus, &:active { - background: rgba($ui-base-color, 0.85); + background: var(--ui-base-color-a85); } } @@ -1693,11 +1700,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $secondary-text-color; + color: var(--secondary-text-color); max-width: 400px; a { - color: $highlight-text-color; + color: var(--highlight-text-color); text-decoration: underline; &:hover { diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index d0db308a15c3d20510a1fcbacfbda123c8758142..84aa330d5fea81524b051fbea2bd2bf41eb1d544 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1,5 +1,5 @@ .modal-container--preloader { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); } .modal-root { @@ -13,7 +13,7 @@ inset-inline-start: 0; inset-inline-end: 0; bottom: 0; - background: rgba($base-overlay-background, 0.7); + background: var(--base-overlay-background-a70); transition: background 0.5s; } @@ -57,8 +57,8 @@ .onboarding-modal, .error-modal, .embed-modal { - background: $ui-secondary-color; - color: $inverted-text-color; + background: var(--ui-secondary-color); + color: var(--inverted-text-color); border-radius: 8px; overflow: hidden; display: flex; @@ -134,7 +134,7 @@ .onboarding-modal__paginator, .error-modal__footer { flex: 0 0 auto; - background: darken($ui-secondary-color, 8%); + background: var(--ui-secondary-color-darken-8); display: flex; padding: 25px; @@ -144,7 +144,7 @@ .onboarding-modal__nav, .error-modal__nav { - color: $lighter-text-color; + color: var(--lighter-text-color); border: 0; font-size: 14px; font-weight: 500; @@ -158,18 +158,18 @@ &:hover, &:focus, &:active { - color: darken($lighter-text-color, 4%); - background-color: darken($ui-secondary-color, 16%); + color: var(--lighter-text-color-darken-4); + background-color: var(--ui-secondary-color-darken-16); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $inverted-text-color; + color: var(--inverted-text-color); &:hover, &:focus, &:active { - color: lighten($inverted-text-color, 4%); + color: var(--inverted-text-color-lighten-4); } } } @@ -190,17 +190,17 @@ width: 14px; height: 14px; border-radius: 14px; - background: darken($ui-secondary-color, 16%); + background: var(--ui-secondary-color-darken-16); margin: 0 3px; cursor: pointer; &:hover { - background: darken($ui-secondary-color, 18%); + background: var(--ui-secondary-color-darken-18); } &.active { cursor: default; - background: darken($ui-secondary-color, 24%); + background: var(--ui-secondary-color-darken-24); } } @@ -221,17 +221,17 @@ h1 { font-size: 18px; font-weight: 500; - color: $inverted-text-color; + color: var(--inverted-text-color); margin-bottom: 20px; } a { - color: $highlight-text-color; + color: var(--highlight-text-color); &:hover, &:focus, &:active { - color: lighten($highlight-text-color, 4%); + color: var(--highlight-text-color-lighten-4); } } @@ -241,7 +241,7 @@ p { font-size: 16px; - color: $lighter-text-color; + color: var(--lighter-text-color); margin-top: 10px; margin-bottom: 10px; @@ -251,16 +251,14 @@ strong { font-weight: 500; - background: $ui-base-color; - color: $secondary-text-color; + background: var(--ui-base-color); + color: var(--secondary-text-color); border-radius: 4px; font-size: 14px; padding: 3px 6px; - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } + &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) { + font-weight: 700; } } } @@ -305,15 +303,15 @@ &__label { font-weight: 500; - color: $inverted-text-color; + color: var(--inverted-text-color); margin-bottom: 5px; text-transform: uppercase; font-size: 12px; } &__case { - background: $ui-base-color; - color: $secondary-text-color; + background: var(--ui-base-color); + color: var(--secondary-text-color); font-weight: 500; padding: 10px; border-radius: 4px; @@ -329,14 +327,14 @@ } .figure { - background: darken($ui-base-color, 8%); - color: $secondary-text-color; + background: var(--ui-base-color-darken-8); + color: var(--secondary-text-color); margin-bottom: 20px; border-radius: 4px; padding: 10px; text-align: center; font-size: 14px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); + box-shadow: 1px 2px 6px var(--base-shadow-color-a30); .onboarding-modal__image { border-radius: 4px; @@ -378,7 +376,7 @@ } .column-header { - color: $primary-text-color; + color: var(--primary-text-color); } } @@ -421,8 +419,8 @@ .mute-modal, .block-modal, .compare-history-modal { - background: lighten($ui-secondary-color, 8%); - color: $inverted-text-color; + background: var(--ui-secondary-color-lighten-8); + color: var(--inverted-text-color); border-radius: 8px; overflow: hidden; max-width: 90vw; @@ -431,7 +429,7 @@ flex-direction: column; .status__relative-time { - color: $dark-text-color; + color: var(--dark-text-color); float: right; font-size: 14px; width: auto; @@ -440,7 +438,7 @@ } .status__visibility-icon { - color: $dark-text-color; + color: var(--dark-text-color); font-size: 14px; padding: 0 4px; } @@ -455,7 +453,7 @@ } .status__content__spoiler-link { - color: lighten($secondary-text-color, 8%); + color: var(--secondary-text-color-lighten-8); } } @@ -465,14 +463,14 @@ .actions-modal { .status { - background: $white; - border-bottom-color: $ui-secondary-color; + background: var(--white); + border-bottom-color: var(--ui-secondary-color); padding-top: 10px; padding-bottom: 10px; } .dropdown-menu__separator { - border-bottom-color: $ui-secondary-color; + border-bottom-color: var(--ui-secondary-color); } } @@ -493,14 +491,14 @@ .block-modal__action-bar { display: flex; justify-content: space-between; - background: $ui-secondary-color; + background: var(--ui-secondary-color); padding: 10px; line-height: 36px; & > div { flex: 1 1 auto; text-align: end; - color: $lighter-text-color; + color: var(--lighter-text-color); padding-inline-end: 10px; } @@ -537,8 +535,8 @@ max-width: 90vw; width: 480px; height: 80vh; - background: lighten($ui-secondary-color, 8%); - color: $inverted-text-color; + background: var(--ui-secondary-color-lighten-8); + color: var(--inverted-text-color); border-radius: 8px; overflow: hidden; position: relative; @@ -547,7 +545,7 @@ &__container { box-sizing: border-box; - border-top: 1px solid $ui-secondary-color; + border-top: 1px solid var(--ui-secondary-color); padding: 20px; flex-grow: 1; display: flex; @@ -577,12 +575,12 @@ &__lead { font-size: 17px; line-height: 22px; - color: lighten($inverted-text-color, 16%); + color: var(--inverted-text-color-lighten-16); margin-bottom: 30px; a { text-decoration: none; - color: $inverted-text-color; + color: var(--inverted-text-color); font-weight: 500; &:hover { @@ -607,26 +605,26 @@ } .status__content a { - color: $highlight-text-color; + color: var(--highlight-text-color); } .status__content, .status__content p { - color: $inverted-text-color; + color: var(--inverted-text-color); } .status__content__spoiler-link { - color: $primary-text-color; - background: $ui-primary-color; + color: var(--primary-text-color); + background: var(--ui-primary-color); &:hover { - background: lighten($ui-primary-color, 8%); + background: var(--ui-primary-color-lighten-8); } } .dialog-option .poll__input { - border-color: $inverted-text-color; - color: $ui-secondary-color; + border-color: var(--inverted-text-color); + color: var(--ui-secondary-color); display: inline-flex; align-items: center; justify-content: center; @@ -639,20 +637,20 @@ &:active, &:focus, &:hover { - border-color: lighten($inverted-text-color, 15%); + border-color: var(--inverted-text-color-lighten-15); border-width: 4px; } &.active { - border-color: $inverted-text-color; - background: $inverted-text-color; + border-color: var(--inverted-text-color); + background: var(--inverted-text-color); } } .poll__option.dialog-option { padding: 15px 0; flex: 0 0 auto; - border-bottom: 1px solid $ui-secondary-color; + border-bottom: 1px solid var(--ui-secondary-color); &:last-child { border-bottom: 0; @@ -660,13 +658,13 @@ & > .poll__option__text { font-size: 13px; - color: lighten($inverted-text-color, 16%); + color: var(--inverted-text-color-lighten-16); strong { font-size: 17px; font-weight: 500; line-height: 22px; - color: $inverted-text-color; + color: var(--inverted-text-color); display: block; margin-bottom: 4px; @@ -685,8 +683,8 @@ display: block; box-sizing: border-box; width: 100%; - color: $inverted-text-color; - background: $simple-background-color; + color: var(--inverted-text-color); + background: var(--simple-background-color); padding: 10px; font-family: inherit; font-size: 17px; @@ -698,7 +696,7 @@ margin: 20px 0; &::placeholder { - color: $dark-text-color; + color: var(--dark-text-color); } &:focus { @@ -719,16 +717,16 @@ } .button.button-secondary { - border-color: $inverted-text-color; - color: $inverted-text-color; + border-color: var(--inverted-text-color); + color: var(--inverted-text-color); flex: 0 0 auto; &:hover, &:focus, &:active { background: transparent; - border-color: $ui-button-background-color; - color: $ui-button-background-color; + border-color: var(--ui-button-background-color); + color: var(--ui-button-background-color); } } @@ -743,13 +741,13 @@ } .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; + inset-inline-end: 15px; } } .report-modal__container { display: flex; - border-top: 1px solid $ui-secondary-color; + border-top: 1px solid var(--ui-secondary-color); @media screen and (width <= 480px) { flex-wrap: wrap; @@ -776,7 +774,7 @@ overflow-x: hidden; .status__content a { - color: $highlight-text-color; + color: var(--highlight-text-color); } @media screen and (width <= 480px) { @@ -801,7 +799,7 @@ .report-modal__comment { padding: 20px; - border-inline-end: 1px solid $ui-secondary-color; + border-inline-end: 1px solid var(--ui-secondary-color); max-width: 320px; p { @@ -815,26 +813,26 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $inverted-text-color; - background: $white; + color: var(--inverted-text-color); + background: var(--white); padding: 10px; font-family: inherit; font-size: 14px; resize: none; outline: 0; border-radius: 4px; - border: 1px solid $ui-secondary-color; + border: 1px solid var(--ui-secondary-color); min-height: 100px; max-height: 50vh; margin-bottom: 10px; &:focus { - border: 1px solid darken($ui-secondary-color, 8%); + border: 1px solid var(--ui-secondary-color-darken-8); } &__wrapper { - background: $white; - border: 1px solid $ui-secondary-color; + background: var(--white); + border: 1px solid var(--ui-secondary-color); margin-bottom: 10px; border-radius: 4px; @@ -849,10 +847,10 @@ } &__modifiers { - color: $inverted-text-color; + color: var(--inverted-text-color); font-family: inherit; font-size: 14px; - background: $white; + background: var(--white); } } @@ -865,7 +863,7 @@ .setting-text-label { display: block; - color: $inverted-text-color; + color: var(--inverted-text-color); font-size: 14px; font-weight: 500; margin-bottom: 10px; @@ -876,7 +874,7 @@ margin-bottom: 24px; &__label { - color: $inverted-text-color; + color: var(--inverted-text-color); font-size: 14px; } } @@ -925,7 +923,7 @@ li:not(:empty) { a { - color: $inverted-text-color; + color: var(--inverted-text-color); display: flex; padding: 12px 16px; font-size: 15px; @@ -943,8 +941,8 @@ &:focus { &, button { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--ui-highlight-color); + color: var(--primary-text-color); } } @@ -971,14 +969,14 @@ .mute-modal__cancel-button, .block-modal__cancel-button { background-color: transparent; - color: $lighter-text-color; + color: var(--lighter-text-color); font-size: 14px; font-weight: 500; &:hover, &:focus, &:active { - color: darken($lighter-text-color, 4%); + color: var(--lighter-text-color-darken-4); background-color: transparent; } } @@ -1005,10 +1003,8 @@ strong { font-weight: 500; - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } + &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) { + font-weight: 700; } } @@ -1016,15 +1012,15 @@ appearance: none; box-sizing: border-box; font-size: 14px; - color: $inverted-text-color; + color: var(--inverted-text-color); display: inline-block; width: auto; outline: 0; font-family: inherit; - background: $simple-background-color - url("data:image/svg+xml;utf8,") + background: var(--simple-background-color) + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; - border: 1px solid darken($simple-background-color, 14%); + border: 1px solid var(--simple-background-color-darken-14); border-radius: 4px; padding: 6px 10px; padding-inline-end: 30px; @@ -1049,7 +1045,7 @@ align-items: center; &__label { - color: $inverted-text-color; + color: var(--inverted-text-color); margin: 0; margin-inline-start: 8px; } @@ -1068,7 +1064,7 @@ .compare-history-modal { .report-modal__target { - border-bottom: 1px solid $ui-secondary-color; + border-bottom: 1px solid var(--ui-secondary-color); } &__container { @@ -1078,7 +1074,7 @@ } .status__content { - color: $inverted-text-color; + color: var(--inverted-text-color); font-size: 19px; line-height: 24px; @@ -1089,13 +1085,13 @@ } a { - color: $highlight-text-color; + color: var(--highlight-text-color); } hr { height: 0.25rem; padding: 0; - background-color: $ui-secondary-color; + background-color: var(--ui-secondary-color); border: 0; margin: 20px 0; } @@ -1135,8 +1131,8 @@ border: 0; padding: 10px; font-family: mastodon-font-monospace, monospace; - background: $ui-base-color; - color: $primary-text-color; + background: var(--ui-base-color); + color: var(--primary-text-color); font-size: 14px; margin: 0; margin-bottom: 15px; @@ -1153,7 +1149,7 @@ } &:focus { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } @media screen and (width <= 600px) { @@ -1179,7 +1175,7 @@ display: flex; justify-content: center; align-items: center; - background: $base-shadow-color; + background: var(--base-shadow-color); img, video, @@ -1190,7 +1186,7 @@ height: auto; margin: 0; object-fit: contain; - background: $base-shadow-color; + background: var(--base-shadow-color); } &__reticle { @@ -1200,7 +1196,7 @@ transform: translate(-50%, -50%); background: url('~images/reticle.png') no-repeat 0 0; border-radius: 50%; - box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); + box-shadow: 0 0 0 9999em var(--base-shadow-color-a35); } &__overlay { @@ -1224,7 +1220,7 @@ } strong { - color: $primary-text-color; + color: var(--primary-text-color); font-size: 14px; font-weight: 500; display: block; @@ -1233,7 +1229,7 @@ div { border-radius: 4px; - box-shadow: 0 0 14px rgba($base-shadow-color, 0.2); + box-shadow: 0 0 14px var(--base-shadow-color-a20); } } @@ -1261,7 +1257,7 @@ } .account__display-name strong { - color: $inverted-text-color; + color: var(--inverted-text-color); } .status__content__spoiler { @@ -1279,7 +1275,7 @@ } .filtered-status-edit-link { - color: $action-button-color; + color: var(--action-button-color); text-decoration: none; &:hover { @@ -1325,10 +1321,10 @@ img.modal-warning { p { font-size: 17px; line-height: 22px; - color: $darker-text-color; + color: var(--darker-text-color); strong { - color: $primary-text-color; + color: var(--primary-text-color); font-weight: 700; } } @@ -1339,7 +1335,7 @@ img.modal-warning { } &__icon { - color: $highlight-text-color; + color: var(--highlight-text-color); margin: 0 5px; } @@ -1356,11 +1352,21 @@ img.modal-warning { margin-bottom: 20px; &__input { - @include search-input; + outline: 0; + box-sizing: border-box; + width: 100%; + border: 0; + box-shadow: none; + font-family: inherit; + background: var(--ui-base-color); + color: var(--darker-text-color); + border-radius: 4px; + font-size: 14px; + margin: 0; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); padding: 4px 6px; - color: $primary-text-color; + color: var(--primary-text-color); font-size: 16px; line-height: 18px; display: flex; @@ -1371,11 +1377,11 @@ img.modal-warning { color: inherit; font: inherit; border: 0; - padding: 15px - 4px 15px - 6px; + padding: 11px 9px; flex: 1 1 auto; &::placeholder { - color: lighten($darker-text-color, 4%); + color: var(--darker-text-color-lighten-4); } &:focus { @@ -1392,16 +1398,16 @@ img.modal-warning { margin-top: -1px; padding-top: 5px; padding-bottom: 5px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); } &.focused &__input { - border-color: $highlight-text-color; - background: lighten($ui-base-color, 4%); + border-color: var(--highlight-text-color); + background: var(--ui-base-color-lighten-4); } &.invalid &__input { - border-color: $error-red; + border-color: var(--error-red); } &.expanded .search__popout { @@ -1426,7 +1432,7 @@ img.modal-warning { } p { - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 20px; font-size: 15px; } @@ -1441,7 +1447,7 @@ img.modal-warning { } } - @media screen and (max-width: $no-gap-breakpoint - 1px) { + @media screen and (max-width: 1174px) { &__choices { flex-direction: column; @@ -1465,9 +1471,9 @@ img.modal-warning { input { display: block; font-family: inherit; - background: darken($ui-base-color, 8%); - border: 1px solid $highlight-text-color; - color: $darker-text-color; + background: var(--ui-base-color-darken-8); + border: 1px solid var(--highlight-text-color); + color: var(--darker-text-color); border-radius: 4px; padding: 6px 9px; line-height: 22px; @@ -1478,7 +1484,7 @@ img.modal-warning { &:focus { outline: 0; - background: darken($ui-base-color, 4%); + background: var(--ui-base-color-darken-4); } } @@ -1489,12 +1495,12 @@ img.modal-warning { &.copied { input { - border: 1px solid $valid-value-color; + border: 1px solid var(--valid-value-color); transition: none; } .button { - background: $valid-value-color; + background: var(--valid-value-color); transition: none; } } diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index cab78402b214dabedf058a7f3c23b7d7a83a2854..5271eca0897c7474b98ae8cfac9afa4ad4b35856 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -1,8 +1,8 @@ .privacy-policy { - background: $ui-base-color; + background: var(--ui-base-color); padding: 20px; - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { border-radius: 4px; } @@ -12,7 +12,7 @@ } .prose { - color: $secondary-text-color; + color: var(--secondary-text-color); font-size: 15px; line-height: 22px; @@ -96,7 +96,7 @@ ul > li::before { content: ''; position: absolute; - background-color: $darker-text-color; + background-color: var(--darker-text-color); border-radius: 50%; width: 0.375em; height: 0.375em; @@ -147,7 +147,7 @@ h6, strong, b { - color: $primary-text-color; + color: var(--primary-text-color); font-weight: 700; } @@ -157,7 +157,7 @@ } a { - color: $highlight-text-color; + color: var(--highlight-text-color); text-decoration: underline; &:focus, @@ -169,14 +169,14 @@ code { font-size: 0.875em; - background: darken($ui-base-color, 8%); + background: var(--ui-base-color-darken-8); border-radius: 4px; padding: 0.2em 0.3em; } hr { border: 0; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid var(--ui-base-color-lighten-4); margin-top: 3em; margin-bottom: 3em; } diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss index c65e6a9afcda8c9801d989a9b7f0eeb55745fd00..6645c02586cded610b149abb243bff8437328a91 100644 --- a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss +++ b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss @@ -2,8 +2,8 @@ text-align: center; font-size: 16px; font-weight: 500; - color: $dark-text-color; - background: $ui-base-color; + color: var(--dark-text-color); + background: var(--ui-base-color); cursor: default; display: flex; flex: 1 1 auto; @@ -23,7 +23,7 @@ } &--without-header { - padding-top: 20px + 48px; + padding-top: 68px; } &__label { @@ -32,7 +32,7 @@ strong { display: block; margin-bottom: 10px; - color: $dark-text-color; + color: var(--dark-text-color); } span { diff --git a/app/javascript/flavours/glitch/styles/components/scrollbars.scss b/app/javascript/flavours/glitch/styles/components/scrollbars.scss index 1661e04ab1a0aeebc00de7b585424813b808be38..2a5a56ebe6c71b44c464060b25fb0df289318d9d 100644 --- a/app/javascript/flavours/glitch/styles/components/scrollbars.scss +++ b/app/javascript/flavours/glitch/styles/components/scrollbars.scss @@ -1,7 +1,7 @@ /* Scrollbars */ html { - scrollbar-color: lighten($ui-base-color, 4%) - rgba($base-overlay-background, 0.1); + scrollbar-color: var(--ui-base-color-lighten-4) + var(--base-overlay-background-a10); } ::-webkit-scrollbar { @@ -10,31 +10,31 @@ html { } ::-webkit-scrollbar-thumb { - background: lighten($ui-base-color, 4%); - border: 0 none $base-border-color; + background: var(--ui-base-color-lighten-4); + border: 0 none var(--base-border-color); border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { - background: lighten($ui-base-color, 6%); + background: var(--ui-base-color-lighten-6); } ::-webkit-scrollbar-thumb:active { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } ::-webkit-scrollbar-track { - border: 0 none $base-border-color; + border: 0 none var(--base-border-color); border-radius: 0; - background: rgba($base-overlay-background, 0.1); + background: var(--base-overlay-background-a10); } ::-webkit-scrollbar-track:hover { - background: $ui-base-color; + background: var(--ui-base-color); } ::-webkit-scrollbar-track:active { - background: $ui-base-color; + background: var(--ui-base-color); } ::-webkit-scrollbar-corner { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index aa54fc26db3a7137dc6a87be398f90934d3b2c70..a987447f8f4679176922d28a90459d5163466acf 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -9,16 +9,16 @@ inset-inline-start: 0; margin-top: -2px; width: 100%; - background: $ui-base-color; + background: var(--ui-base-color); border-radius: 0 0 4px 4px; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + box-shadow: 4px 4px 6px var(--base-shadow-color-a40); z-index: 99; font-size: 13px; padding: 15px 5px; h4 { text-transform: uppercase; - color: $dark-text-color; + color: var(--dark-text-color); font-weight: 500; padding: 0 10px; margin-bottom: 10px; @@ -32,7 +32,7 @@ } &__message { - color: $dark-text-color; + color: var(--dark-text-color); padding: 0 10px; } @@ -43,7 +43,7 @@ border: 0; font: inherit; background: transparent; - color: $darker-text-color; + color: var(--darker-text-color); padding: 10px; cursor: pointer; border-radius: 4px; @@ -65,18 +65,18 @@ &:focus, &:active, &.selected { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--ui-highlight-color); + color: var(--primary-text-color); .icon-button { - color: $primary-text-color; + color: var(--primary-text-color); } } mark { background: transparent; font-weight: 700; - color: $primary-text-color; + color: var(--primary-text-color); } span { @@ -95,7 +95,17 @@ } .search__input { - @include search-input; + outline: 0; + box-sizing: border-box; + width: 100%; + border: 0; + box-shadow: none; + font-family: inherit; + background: var(--ui-base-color); + color: var(--darker-text-color); + border-radius: 4px; + font-size: 14px; + margin: 0; display: block; padding: 15px; @@ -104,7 +114,7 @@ font-size: 16px; &::placeholder { - color: lighten($darker-text-color, 4%); + color: var(--darker-text-color-lighten-4); } &::-moz-focus-inner { @@ -118,7 +128,7 @@ } &:focus { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } } @@ -143,7 +153,7 @@ font-size: 18px; width: 18px; height: 18px; - color: $secondary-text-color; + color: var(--secondary-text-color); cursor: default; pointer-events: none; @@ -165,7 +175,7 @@ .fa-times-circle { top: 17px; transform: rotate(0deg); - color: $action-button-color; + color: var(--action-button-color); cursor: pointer; &.active { @@ -174,14 +184,14 @@ } &:hover { - color: lighten($action-button-color, 7%); + color: var(--action-button-color-lighten-7); } } } .search-results__header { - color: $dark-text-color; - background: lighten($ui-base-color, 2%); + color: var(--dark-text-color); + background: var(--ui-base-color-lighten-2); padding: 15px; font-weight: 500; font-size: 16px; @@ -195,15 +205,15 @@ .search-results__info { padding: 20px; - color: $darker-text-color; + color: var(--darker-text-color); text-align: center; } .trends { &__header { - color: $dark-text-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); + color: var(--dark-text-color); + background: var(--ui-base-color-lighten-2); + border-bottom: 1px solid var(--ui-base-color-darken-4); font-weight: 500; padding: 15px; font-size: 16px; @@ -219,7 +229,7 @@ display: flex; align-items: center; padding: 15px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); gap: 15px; &:last-child { @@ -228,7 +238,7 @@ &__name { flex: 1 1 auto; - color: $dark-text-color; + color: var(--dark-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -238,7 +248,7 @@ } a { - color: $darker-text-color; + color: var(--darker-text-color); text-decoration: none; font-size: 14px; font-weight: 500; @@ -262,7 +272,7 @@ font-size: 24px; font-weight: 500; text-align: end; - color: $secondary-text-color; + color: var(--secondary-text-color); text-decoration: none; } @@ -271,60 +281,60 @@ width: 50px; path:first-child { - fill: rgba($highlight-text-color, 0.25) !important; + fill: var(--highlight-text-color-a25) !important; fill-opacity: 1 !important; } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: var(--highlight-text-color-lighten-6) !important; fill: none !important; } } &--requires-review { .trends__item__name { - color: $gold-star; + color: var(--gold-star); a { - color: $gold-star; + color: var(--gold-star); } } .trends__item__current { - color: $gold-star; + color: var(--gold-star); } .trends__item__sparkline { path:first-child { - fill: rgba($gold-star, 0.25) !important; + fill: var(--gold-star-a25) !important; } path:last-child { - stroke: lighten($gold-star, 6%) !important; + stroke: var(--gold-star-lighten-6) !important; } } } &--disabled { .trends__item__name { - color: lighten($ui-base-color, 12%); + color: var(--ui-base-color-lighten-12); a { - color: lighten($ui-base-color, 12%); + color: var(--ui-base-color-lighten-12); } } .trends__item__current { - color: lighten($ui-base-color, 12%); + color: var(--ui-base-color-lighten-12); } .trends__item__sparkline { path:first-child { - fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; + fill: color-mix(in srgb, var(--ui-base-color-lighten-12) 25%, transparent) !important; } path:last-child { - stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; + stroke: var(--ui-base-color-lighten-18) !important; } } } diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss index c77515eb70fd1847921017e9cc9f35d6e809d8df..4e0d3093a15dea215bf754930b7c1577036b29c9 100644 --- a/app/javascript/flavours/glitch/styles/components/sensitive.scss +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -12,8 +12,8 @@ margin: 0 3px; border-radius: 2px; padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); + color: var(--primary-text-color-a80); + background: var(--base-overlay-background-a50); font-size: 12px; line-height: 18px; text-transform: uppercase; diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index 18492983e5887b3917b003045bc3372251e0e7c1..020fe3de6f8c56b7b57f3ec410cb6fc486666447 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -2,11 +2,11 @@ padding: 10px; p { - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 20px; a { - color: $secondary-text-color; + color: var(--secondary-text-color); text-decoration: none; unicode-bidi: isolate; @@ -14,7 +14,7 @@ text-decoration: underline; .fa { - color: lighten($dark-text-color, 7%); + color: var(--dark-text-color-lighten-7); } } } @@ -29,7 +29,7 @@ padding: 20px 0; &__introduction { - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 20px; strong { @@ -56,7 +56,7 @@ margin-bottom: 20px; aspect-ratio: 1.9; border: 0; - background: $ui-base-color; + background: var(--ui-base-color); object-fit: cover; } @@ -78,19 +78,19 @@ &__number { font-weight: 600; - color: $primary-text-color; + color: var(--primary-text-color); font-size: 14px; } &__number-label { - color: $darker-text-color; + color: var(--darker-text-color); font-weight: 500; font-size: 14px; } h4 { text-transform: uppercase; - color: $darker-text-color; + color: var(--darker-text-color); margin-bottom: 10px; font-weight: 600; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 7efcf0c0972e763f47041058921a17a4ac45e017..22adcd65b8f77d7b26362d1b463b23d83ba3adfa 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -17,11 +17,11 @@ &__text { padding: 15px; - color: $secondary-text-color; + color: var(--secondary-text-color); strong { font-weight: 700; - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -51,7 +51,7 @@ .compose-form__autosuggest-wrapper { overflow-y: auto; - background-color: $white; + background-color: var(--white); border-radius: 4px 4px 0 0; flex: 0 1 auto; } @@ -85,7 +85,7 @@ flex: 0 0 auto; border: 0; background: transparent; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid var(--ui-base-color-lighten-4); margin: 10px 0; } @@ -146,7 +146,7 @@ } } - @media screen and (min-width: $no-gap-breakpoint) { + @media screen and (min-width: 1175px) { padding: 10px 0; padding-top: 0; } @@ -176,8 +176,8 @@ .notification__report { padding: 15px; - padding-inline-start: (48px + 15px * 2); - min-height: 48px + 2px; + padding-inline-start: 78px; + min-height: 50px; &__avatar { inset-inline-start: 15px; @@ -187,7 +187,7 @@ .status { padding: 15px; - min-height: 48px + 2px; + min-height: 50px; .media-gallery, &__action-bar, @@ -220,7 +220,7 @@ } } -@media screen and (min-width: $no-gap-breakpoint) { +@media screen and (min-width: 1175px) { .tabs-bar { width: 100%; } @@ -246,28 +246,26 @@ } } -@media screen and (max-width: $no-gap-breakpoint - 1px) { - $sidebar-width: 285px; - +@media screen and (max-width: 1174px) { .columns-area__panels__main { - width: calc(100% - $sidebar-width); + width: calc(100% - 285px); } .columns-area__panels { - min-height: calc(100vh - $ui-header-height); + min-height: calc(100vh - 55px); } .columns-area__panels__pane--navigational { - min-width: $sidebar-width; + min-width: 285px; .columns-area__panels__pane__inner { - width: $sidebar-width; + width: 285px; } .navigation-panel { margin: 0; - background: $ui-base-color; - border-inline-start: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color); + border-inline-start: 1px solid var(--ui-base-color-lighten-8); height: 100vh; } @@ -284,8 +282,8 @@ .layout-single-column .ui__header { display: flex; - background: $ui-base-color; - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .column-header, @@ -296,18 +294,16 @@ } } -@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { - $sidebar-width: 55px; - +@media screen and (max-width: 889px) { .columns-area__panels__main { - width: calc(100% - $sidebar-width); + width: calc(100% - 55px); } .columns-area__panels__pane--navigational { - min-width: $sidebar-width; + min-width: 55px; .columns-area__panels__pane__inner { - width: $sidebar-width; + width: 55px; } .column-link span { @@ -324,7 +320,7 @@ display: none; } -@media screen and (max-width: $no-gap-breakpoint - 1px) { +@media screen and (max-width: 1174px) { .columns-area__panels__pane--compositional { display: none; } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 82d206a6f64ecb9692d0a9a1b2178a186f210e74..6759c9108b1c9dd03a7b94302b2c9e3ead54282a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -79,7 +79,7 @@ } a { - color: $secondary-text-color; + color: var(--secondary-text-color); text-decoration: none; unicode-bidi: isolate; @@ -87,7 +87,7 @@ text-decoration: underline; .fa { - color: lighten($dark-text-color, 7%); + color: var(--dark-text-color-lighten-7); } } @@ -102,7 +102,7 @@ } .fa { - color: $dark-text-color; + color: var(--dark-text-color); } } @@ -115,20 +115,20 @@ } a.unhandled-link { - color: $highlight-text-color; + color: var(--highlight-text-color); .link-origin-tag { - color: $gold-star; + color: var(--gold-star); font-size: 0.8em; } } .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); + background: var(--ui-base-color-lighten-30); &:hover, &:focus { - background: lighten($ui-base-color, 33%); + background: var(--ui-base-color-lighten-33); text-decoration: none; } } @@ -140,15 +140,15 @@ line-height: 20px; display: flex; justify-content: space-between; - color: $dark-text-color; + color: var(--dark-text-color); } .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: lighten($ui-base-color, 30%); + background: var(--ui-base-color-lighten-30); border: 0; - color: $inverted-text-color; + color: var(--inverted-text-color); font-weight: 700; font-size: 11px; padding: 0 5px; @@ -158,7 +158,7 @@ vertical-align: top; &:hover { - background: lighten($ui-base-color, 33%); + background: var(--ui-base-color-lighten-33); text-decoration: none; } @@ -176,12 +176,12 @@ .notif-cleaning { .status, .notification { - padding-inline-end: ($dismiss-overlay-width + 0.5rem); + padding-inline-end: 4.5rem; } } .status__wrapper--filtered { - color: $dark-text-color; + color: var(--dark-text-color); border: 0; font-size: inherit; text-align: center; @@ -191,7 +191,7 @@ box-sizing: border-box; width: 100%; clear: both; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .status__prepend-icon-wrapper { @@ -203,8 +203,7 @@ .notification-follow-request { position: relative; - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); .account { border-bottom: 0 none; @@ -214,10 +213,10 @@ .focusable { &:focus { outline: 0; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); &.status.status-direct { - background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + background: color-mix(in srgb, var(--ui-base-color-lighten-4) 95%, var(--ui-highlight-color)); &.muted { background: transparent; @@ -226,7 +225,7 @@ .detailed-status, .detailed-status__action-bar { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); } } } @@ -235,13 +234,11 @@ padding: 10px 14px; position: relative; height: auto; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--ui-base-color-lighten-8); cursor: auto; @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { - // Add margin to avoid Edge auto-hiding scrollbar appearing over content. - // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-inline-end: 28px; // 12px + 16px + padding-inline-end: 28px; } @keyframes fade { @@ -263,40 +260,40 @@ } &.status-direct { - background: mix($ui-base-color, $ui-highlight-color, 95%); - border-bottom-color: lighten($ui-base-color, 12%); + background: color-mix(in srgb, var(--ui-base-color) 95%, var(--ui-highlight-color)); + border-bottom-color: var(--ui-base-color-lighten-12); } &.light { .status__relative-time { - color: $lighter-text-color; + color: var(--lighter-text-color); } .status__display-name { - color: $inverted-text-color; + color: var(--inverted-text-color); } .display-name { - color: $light-text-color; + color: var(--light-text-color); strong { - color: $inverted-text-color; + color: var(--inverted-text-color); } } .status__content { - color: $inverted-text-color; + color: var(--inverted-text-color); a { - color: $highlight-text-color; + color: var(--highlight-text-color); } a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-primary-color; + color: var(--primary-text-color); + background: var(--ui-primary-color); &:hover { - background: lighten($ui-primary-color, 8%); + background: var(--ui-primary-color-lighten-8); } } } @@ -316,9 +313,9 @@ bottom: 0; background-image: linear-gradient( to bottom, - rgba($base-shadow-color, 0.75), - rgba($base-shadow-color, 0.65) 24px, - rgba($base-shadow-color, 0.8) + var(--base-shadow-color-a75), + var(--base-shadow-color-a65) 24px, + var(--base-shadow-color-a80) ); pointer-events: none; content: ''; @@ -342,8 +339,8 @@ inset-inline-start: 0; inset-inline-end: 0; background: linear-gradient( - rgba($ui-base-color, 0), - rgba($ui-base-color, 1) + transparent, + var(--ui-base-color) ); pointer-events: none; } @@ -355,15 +352,15 @@ &:focus > .status__content::after { background: linear-gradient( - rgba(lighten($ui-base-color, 4%), 0), - rgba(lighten($ui-base-color, 4%), 1) + transparent, + var(--ui-base-color-lighten-4) ); } &.status-direct > .status__content::after { background: linear-gradient( - rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0), - rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) + transparent, + color-mix(in srgb, var(--ui-base-color) 95%, var(--ui-highlight-color)) ); } @@ -381,8 +378,6 @@ } } -// Wide mode: constrain content width for readability, -// columns fill available space but content stays centered. .wide .columns-area:not(.columns-area--mobile) { .status, .detailed-status, @@ -401,14 +396,14 @@ background: transparent; .icon-button.disabled { - color: lighten($action-button-color, 13%); + color: var(--action-button-color-lighten-13); } } } .status__relative-time { display: inline-block; - color: $dark-text-color; + color: var(--dark-text-color); font-size: 14px; text-align: end; white-space: nowrap; @@ -417,7 +412,7 @@ } .status__display-name { - color: $dark-text-color; + color: var(--dark-text-color); overflow: hidden; } @@ -445,7 +440,7 @@ display: flex; align-items: center; height: 1em; - color: $action-button-color; + color: var(--action-button-color); .status__media-icon, .status__visibility-icon, @@ -489,7 +484,7 @@ padding: 0 10px; .detailed-status__display-name { - color: lighten($inverted-text-color, 16%); + color: var(--inverted-text-color-lighten-16); span { display: inline; @@ -521,12 +516,12 @@ margin-top: -2px; margin-bottom: 8px; margin-inline-start: 58px; - color: $dark-text-color; + color: var(--dark-text-color); font-size: 14px; position: relative; .status__display-name strong { - color: $dark-text-color; + color: var(--dark-text-color); } > span { @@ -568,9 +563,9 @@ } .detailed-status { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); padding: 14px 10px; - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--ui-base-color-lighten-8); &--flex { display: flex; @@ -603,15 +598,15 @@ .detailed-status__meta { margin-top: 15px; - color: $dark-text-color; + color: var(--dark-text-color); font-size: 14px; line-height: 18px; } .detailed-status__action-bar { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-4); + border-top: 1px solid var(--ui-base-color-lighten-8); + border-bottom: 1px solid var(--ui-base-color-lighten-8); display: flex; flex-direction: row; padding: 10px 0; @@ -644,7 +639,7 @@ .status__display-name, .account__display-name { strong { - color: $primary-text-color; + color: var(--primary-text-color); } } @@ -675,7 +670,7 @@ a.status__display-name, } .detailed-status__display-name { - color: $secondary-text-color; + color: var(--secondary-text-color); display: block; line-height: 24px; margin-bottom: 15px; @@ -690,7 +685,7 @@ a.status__display-name, strong { font-size: 16px; - color: $primary-text-color; + color: var(--primary-text-color); } } @@ -711,11 +706,11 @@ a.status__display-name, .status__content p, .status__content a, .status__content__text { - color: $dark-text-color; + color: var(--dark-text-color); } .status__display-name strong { - color: $dark-text-color; + color: var(--dark-text-color); } .status__avatar { @@ -723,12 +718,12 @@ a.status__display-name, } a.status__content__spoiler-link { - background: $ui-base-lighter-color; - color: $inverted-text-color; + background: var(--ui-base-lighter-color); + color: var(--inverted-text-color); &:hover, &:focus { - background: lighten($ui-base-color, 29%); + background: var(--ui-base-color-lighten-29); text-decoration: none; } } @@ -745,9 +740,9 @@ a.status__display-name, position: relative; display: flex; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); border-radius: 4px; - color: $dark-text-color; + color: var(--dark-text-color); margin-top: 14px; text-decoration: none; overflow: hidden; @@ -763,7 +758,7 @@ a.status__display-name, align-items: center; & > div { - background: rgba($base-shadow-color, 0.6); + background: var(--base-shadow-color-a60); border-radius: 8px; padding: 12px 9px; flex: 0 0 auto; @@ -775,7 +770,7 @@ a.status__display-name, button, a { display: inline; - color: $secondary-text-color; + color: var(--secondary-text-color); background: transparent; border: 0; padding: 0 8px; @@ -786,7 +781,7 @@ a.status__display-name, &:hover, &:active, &:focus { - color: $primary-text-color; + color: var(--primary-text-color); } } @@ -807,7 +802,7 @@ a.status-card { cursor: pointer; &:hover { - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); } } @@ -821,8 +816,6 @@ a.status-card { } .status-card-video { - // Firefox has a bug where frameborder=0 iframes add some extra blank space - // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174 overflow: hidden; iframe { @@ -835,7 +828,7 @@ a.status-card { display: block; font-weight: 500; margin-bottom: 5px; - color: $darker-text-color; + color: var(--darker-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -850,7 +843,7 @@ a.status-card { } .status-card__description { - color: $darker-text-color; + color: var(--darker-text-color); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -868,7 +861,7 @@ a.status-card { .status-card__image { flex: 0 0 100px; - background: lighten($ui-base-color, 8%); + background: var(--ui-base-color-lighten-8); position: relative; & > .fa { @@ -899,7 +892,7 @@ a.status-card { } .status-card.compact { - border-color: lighten($ui-base-color, 4%); + border-color: var(--ui-base-color-lighten-4); &.interactive { border: 0; @@ -920,7 +913,7 @@ a.status-card { } a.status-card.compact:hover { - background-color: lighten($ui-base-color, 4%); + background-color: var(--ui-base-color-lighten-4); } .status-card__image-image { @@ -945,7 +938,7 @@ a.status-card.compact:hover { top: 0; inset-inline-start: 0; z-index: 0; - background: $base-overlay-background; + background: var(--base-overlay-background); &--hidden { display: none; @@ -955,17 +948,17 @@ a.status-card.compact:hover { .attachment-list { display: flex; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); border-radius: 4px; margin-top: 14px; overflow: hidden; &__icon { flex: 0 0 auto; - color: $dark-text-color; + color: var(--dark-text-color); padding: 8px 18px; cursor: default; - border-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid var(--ui-base-color-lighten-8); display: flex; flex-direction: column; align-items: center; @@ -992,7 +985,7 @@ a.status-card.compact:hover { a { text-decoration: none; - color: $dark-text-color; + color: var(--dark-text-color); font-weight: 500; &:hover { @@ -1011,14 +1004,14 @@ a.status-card.compact:hover { } .fa { - color: $dark-text-color; + color: var(--dark-text-color); } } } .status__wrapper--filtered__button { display: inline; - color: lighten($ui-highlight-color, 8%); + color: var(--ui-highlight-color-lighten-8); border: 0; background: transparent; padding: 0; @@ -1043,7 +1036,7 @@ a.status-card.compact:hover { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid $highlight-text-color; + border-inline-start: 4px solid var(--highlight-text-color); pointer-events: none; } } @@ -1053,22 +1046,22 @@ a.status-card.compact:hover { .status__content, .status__action-bar { - margin-inline-start: 46px + 10px; - width: calc(100% - (46px + 10px)); + margin-inline-start: 56px; + width: calc(100% - 56px); } } &--first-in-thread { - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--ui-base-color-lighten-8); } &__line { - height: 10px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); + height: 6px; + border-inline-start: 2px solid var(--ui-base-color-lighten-8); width: 0; position: absolute; top: 0; - inset-inline-start: 14px + ((48px - 2px) * 0.5); + inset-inline-start: 37px; &--full { top: 0; @@ -1078,17 +1071,17 @@ a.status-card.compact:hover { content: ''; display: block; position: absolute; - top: 10px - 4px; - height: 48px + 4px + 4px; + top: 6px; + height: 56px; width: 2px; - background: $ui-base-color; + background: var(--ui-base-color); inset-inline-start: -2px; } } &--first { - top: 10px + 48px + 4px; - height: calc(100% - (10px + 48px + 4px)); + top: 62px; + height: calc(100% - 62px); &::before { display: none; @@ -1110,7 +1103,7 @@ a.status-card.compact:hover { &__footer { border-radius: 0 0 4px 4px; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); padding: 10px; padding-top: 12px; display: flex; @@ -1119,7 +1112,7 @@ a.status-card.compact:hover { &__header { border-radius: 4px 4px 0 0; - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); padding: 10px; display: flex; justify-content: space-between; @@ -1135,7 +1128,7 @@ a.status-card.compact:hover { } .display-name { - color: $primary-text-color; + color: var(--primary-text-color); text-decoration: none; strong, @@ -1146,7 +1139,7 @@ a.status-card.compact:hover { } span { - color: $darker-text-color; + color: var(--darker-text-color); } } } @@ -1159,8 +1152,8 @@ a.status-card.compact:hover { .picture-in-picture-placeholder { box-sizing: border-box; - border: 2px dashed lighten($ui-base-color, 8%); - background: $base-shadow-color; + border: 2px dashed var(--ui-base-color-lighten-8); + background: var(--base-shadow-color); display: flex; flex-direction: column; align-items: center; @@ -1169,7 +1162,7 @@ a.status-card.compact:hover { font-size: 16px; font-weight: 500; cursor: pointer; - color: $darker-text-color; + color: var(--darker-text-color); aspect-ratio: 16 / 9; i { @@ -1182,6 +1175,6 @@ a.status-card.compact:hover { &:hover, &:focus, &:active { - border-color: lighten($ui-base-color, 12%); + border-color: var(--ui-base-color-lighten-12); } } diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss index 4de31db9aec577bd2d03fd800faae9a3f88f1e27..31d9f2764c3482dc15591536e75d795a8057f4da 100644 --- a/app/javascript/flavours/glitch/styles/contrast.scss +++ b/app/javascript/flavours/glitch/styles/contrast.scss @@ -1,3 +1,3 @@ -@import 'contrast/variables'; @import 'index'; +@import 'contrast/variables'; @import 'contrast/diff'; diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index 1c2386f02d2df9d5bc6b41f5b06946e578e533ed..dac405f16d9bb03300761eea55c0941ef4a5cb24 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -43,11 +43,11 @@ } .status__content a { - color: $highlight-text-color; + color: var(--highlight-text-color); } .nothing-here { - color: $darker-text-color; + color: var(--darker-text-color); } .compose-form__poll-wrapper .button.button-secondary, @@ -56,15 +56,15 @@ .report-dialog-modal__textarea::placeholder, .language-dropdown__dropdown__results__item__common-name, .compose-form .icon-button { - color: $inverted-text-color; + color: var(--inverted-text-color); } .text-icon-button.active { - color: $ui-highlight-color; + color: var(--ui-highlight-color); } .language-dropdown__dropdown__results__item.active { - background: $ui-highlight-color; + background: var(--ui-highlight-color); font-weight: 500; } diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index e38d24b271cf8e665fbcb5bd26b95de9f4c529b3..322623a5d897b4f9e044877db6a61cc9fa543e5d 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -1,22 +1,242 @@ -// Dependent colors -$black: #000000; - -$classic-base-color: #282c37; -$classic-primary-color: #9baec8; -$classic-secondary-color: #d9e1e8; -$classic-highlight-color: #6364ff; - -$ui-base-color: $classic-base-color !default; -$ui-primary-color: $classic-primary-color !default; -$ui-secondary-color: $classic-secondary-color !default; -$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, 10%) !default; -$action-button-color: lighten($ui-base-color, 50%); - -$inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color, 6%) !default; -$light-text-color: darken($ui-primary-color, 40%) !default; +:root { + --black: #000000; + --white: #ffffff; + --red-600: #b7253d; + --red-500: #df405a; + --blurple-600: #563acc; + --blurple-500: #6364ff; + --blurple-300: #858afa; + --grey-600: #4e4c5a; + --grey-100: #dadaf3; + --success-green: #79bd9a; + --error-red: #df405a; + --warning-red: #ff5050; + --gold-star: #ca8f04; + --red-bookmark: #ff5050; + --classic-base-color: #282c37; + --classic-primary-color: #9baec8; + --classic-secondary-color: #d9e1e8; + --classic-highlight-color: #6364ff; + --base-shadow-color: #000000; + --base-overlay-background: #000000; + --base-border-color: #ffffff; + --simple-background-color: #ffffff; + --valid-value-color: #79bd9a; + --error-value-color: #df405a; + --ui-base-color: #282c37; + --ui-base-lighter-color: #606984; + --ui-primary-color: #9baec8; + --ui-secondary-color: #d9e1e8; + --ui-highlight-color: #6364ff; + --ui-button-color: #ffffff; + --ui-button-background-color: #6364ff; + --ui-button-focus-background-color: #563acc; + --ui-button-secondary-color: #dadaf3; + --ui-button-secondary-border-color: #dadaf3; + --ui-button-secondary-focus-background-color: #4e4c5a; + --ui-button-secondary-focus-color: #ffffff; + --ui-button-tertiary-color: #858afa; + --ui-button-tertiary-border-color: #858afa; + --ui-button-tertiary-focus-background-color: #563acc; + --ui-button-tertiary-focus-color: #ffffff; + --ui-button-destructive-background-color: #df405a; + --ui-button-destructive-focus-background-color: #b7253d; + --primary-text-color: #ffffff; + --darker-text-color: #dde3ec; + --dark-text-color: #c2cede; + --secondary-text-color: #ecf0f4; + --highlight-text-color: #9697ff; + --action-button-color: #a2a9bc; + --action-button-focus-color: #687390; + --passive-text-color: #ca8f04; + --active-passive-text-color: #79bd9a; + --inverted-text-color: #000000; + --lighter-text-color: #1b1e25; + --light-text-color: #364861; + --action-button-color-lighten-7: #b7bccb; + --action-button-color-lighten-13: #c9cdd8; + --darker-text-color-lighten-4: #eaeef3; + --darker-text-color-lighten-7: #f4f6f9; + --darker-text-color-lighten-8: #f7f9fb; + --darker-text-color-lighten-10: #fefefe; + --dark-text-color-lighten-4: #d0d9e5; + --dark-text-color-lighten-7: #dae1ea; + --error-red-lighten-4: #e25169; + --error-red-lighten-12: #e87487; + --error-value-color-lighten-12: #e87487; + --gold-star-lighten-6: #e8a405; + --gold-star-lighten-16: #fbbb25; + --highlight-text-color-lighten-4: #aaabff; + --highlight-text-color-lighten-6: #b5b5ff; + --highlight-text-color-lighten-8: #bfbfff; + --highlight-text-color-lighten-13: #d8d9ff; + --inverted-text-color-lighten-4: #0a0a0a; + --inverted-text-color-lighten-10: #1a1a1a; + --inverted-text-color-lighten-15: #262626; + --inverted-text-color-lighten-16: #292929; + --lighter-text-color-lighten-7: #2a2e3a; + --lighter-text-color-lighten-20: #464d60; + --secondary-text-color-lighten-4: #f9fafb; + --secondary-text-color-lighten-7: #ffffff; + --secondary-text-color-lighten-8: #ffffff; + --ui-base-color-lighten-2: #2c313d; + --ui-base-color-lighten-3: #2e3340; + --ui-base-color-lighten-4: #313543; + --ui-base-color-lighten-5: #333846; + --ui-base-color-lighten-6: #353a49; + --ui-base-color-lighten-8: #393f4f; + --ui-base-color-lighten-11: #404657; + --ui-base-color-lighten-12: #42485a; + --ui-base-color-lighten-13: #444b5d; + --ui-base-color-lighten-14: #464d60; + --ui-base-color-lighten-16: #4a5266; + --ui-base-color-lighten-18: #4f576c; + --ui-base-color-lighten-20: #535b72; + --ui-base-color-lighten-26: #606984; + --ui-base-color-lighten-27: #626c87; + --ui-base-color-lighten-29: #66718d; + --ui-base-color-lighten-30: #687390; + --ui-base-color-lighten-33: #707b97; + --ui-base-color-lighten-34: #737d99; + --ui-base-color-lighten-50: #a2a9bc; + --ui-base-lighter-color-lighten-4: #687390; + --ui-base-lighter-color-lighten-7: #707b97; + --ui-highlight-color-lighten-4: #7778ff; + --ui-highlight-color-lighten-8: #8c8dff; + --ui-highlight-color-lighten-10: #9697ff; + --ui-highlight-color-lighten-12: #a0a1ff; + --ui-primary-color-lighten-8: #b5c3d6; + --ui-primary-color-lighten-12: #c2cede; + --ui-primary-color-lighten-20: #dde3ec; + --ui-secondary-color-lighten-6: #ecf0f4; + --ui-secondary-color-lighten-8: #f2f5f7; + --valid-value-color-lighten-8: #94caaf; + --valid-value-color-lighten-15: #acd6c1; + --warning-red-lighten-12: #ff8d8d; + --white-lighten-4: #ffffff; + --white-lighten-7: #ffffff; + --action-button-color-darken-13: #7c86a0; + --darker-text-color-darken-13: #b2c1d5; + --highlight-text-color-darken-4: #8282ff; + --lighter-text-color-darken-4: #131419; + --lighter-text-color-darken-7: #0c0d11; + --simple-background-color-darken-2: #fafafa; + --simple-background-color-darken-8: #ebebeb; + --simple-background-color-darken-14: #dbdbdb; + --simple-background-color-darken-24: #c2c2c2; + --ui-base-color-darken-2: #242731; + --ui-base-color-darken-4: #1f232b; + --ui-base-color-darken-5: #1d2028; + --ui-base-color-darken-6: #1b1e25; + --ui-base-color-darken-7: #191b22; + --ui-base-color-darken-8: #17191f; + --ui-base-color-darken-10: #131419; + --ui-base-color-darken-12: #0e1014; + --ui-base-color-darken-13: #0c0d11; + --ui-base-color-darken-14: #0a0b0e; + --ui-base-color-darken-20: #000000; + --ui-highlight-color-darken-2: #595aff; + --ui-highlight-color-darken-3: #5455ff; + --ui-highlight-color-darken-5: #4a4bff; + --ui-highlight-color-darken-8: #3a3bff; + --ui-primary-color-darken-5: #8ba1bf; + --ui-primary-color-darken-14: #6d89af; + --ui-primary-color-darken-40: #364861; + --ui-secondary-color-darken-8: #c0cdd9; + --ui-secondary-color-darken-10: #b9c8d5; + --ui-secondary-color-darken-16: #a6b9c9; + --ui-secondary-color-darken-18: #a0b4c5; + --ui-secondary-color-darken-24: #8da5ba; + --action-button-color-a15: #a2a9bc26; + --action-button-color-a30: #a2a9bc4d; + --base-overlay-background-a0: #00000000; + --base-overlay-background-a10: #0000001a; + --base-overlay-background-a30: #0000004d; + --base-overlay-background-a50: #00000080; + --base-overlay-background-a60: #00000099; + --base-overlay-background-a70: #000000b3; + --base-overlay-background-a80: #000000cc; + --base-overlay-background-a90: #000000e6; + --base-shadow-color-a10: #0000001a; + --base-shadow-color-a20: #00000033; + --base-shadow-color-a25: #00000040; + --base-shadow-color-a30: #0000004d; + --base-shadow-color-a35: #00000059; + --base-shadow-color-a40: #00000066; + --base-shadow-color-a45: #00000073; + --base-shadow-color-a60: #00000099; + --base-shadow-color-a65: #000000a6; + --base-shadow-color-a75: #000000bf; + --base-shadow-color-a80: #000000cc; + --base-shadow-color-a85: #000000d9; + --black-a45: #00000073; + --black-a65: #000000a6; + --black-a85: #000000d9; + --black-a90: #000000e6; + --darker-text-color-a15: #dde3ec26; + --darker-text-color-a30: #dde3ec4d; + --dark-text-color-a10: #c2cede1a; + --error-red-a50: #df405a80; + --error-value-color-a10: #df405a1a; + --error-value-color-a50: #df405a80; + --gold-star-a15: #ca8f0426; + --gold-star-a25: #ca8f0440; + --gold-star-a30: #ca8f044d; + --gold-star-a50: #ca8f0480; + --highlight-text-color-a15: #9697ff26; + --highlight-text-color-a25: #9697ff40; + --highlight-text-color-a30: #9697ff4d; + --highlight-text-color-a40: #9697ff66; + --lighter-text-color-a15: #1b1e2526; + --lighter-text-color-a30: #1b1e254d; + --primary-text-color-a70: #ffffffb3; + --primary-text-color-a80: #ffffffcc; + --success-green-a10: #79bd9a1a; + --success-green-a50: #79bd9a80; + --ui-base-color-a0: #282c3700; + --ui-base-color-a15: #282c3726; + --ui-base-color-a25: #282c3740; + --ui-base-color-a30: #282c374d; + --ui-base-color-a85: #282c37d9; + --ui-base-color-a100: #282c37; + --ui-base-lighter-color-a60: #60698499; + --ui-highlight-color-a0: #6364ff00; + --ui-highlight-color-a10: #6364ff1a; + --ui-highlight-color-a15: #6364ff26; + --ui-highlight-color-a23: #6364ff3b; + --ui-highlight-color-a40: #6364ff66; + --ui-highlight-color-a50: #6364ff80; + --ui-secondary-color-a10: #d9e1e81a; + --ui-secondary-color-a30: #d9e1e84d; + --ui-secondary-color-a40: #d9e1e866; + --ui-secondary-color-a50: #d9e1e880; + --ui-secondary-color-a70: #d9e1e8b3; + --valid-value-color-a25: #79bd9a40; + --valid-value-color-a50: #79bd9a80; + --warning-red-a15: #ff505026; + --white-a15: #ffffff26; + --white-a20: #ffffff33; + --white-a30: #ffffff4d; + --white-a35: #ffffff59; + --white-a70: #ffffffb3; + --white-a75: #ffffffbf; + --white-a80: #ffffffcc; + --mix-ui-base-highlight-95: #2b2f41; + --mix-white-highlight-80: #e0e0ff; + --mix-ui-base-lighten4-highlight-95: #33384c; + --mix-ui-base-lighten8-highlight-95: #3b4157; + --mix-ui-base-lighten12-highlight-80: #484e7b; + --font-sans-serif: 'mastodon-font-sans-serif'; + --font-display: 'mastodon-font-display'; + --font-monospace: 'mastodon-font-monospace'; + --no-gap-breakpoint: 1175px; + --media-modal-media-max-width: 100%; + --media-modal-media-max-height: 80%; + --ui-avatar-border-size: 8%; + --dismiss-overlay-width: 4rem; + --dropdown-border-color: #42485a; + --dropdown-background-color: #313543; + --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --modal-background-color: #1f232b; + --modal-border-color: #313543; +} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index 1cb913c8b832ecf67536b9f788de8285f15cddb8..bb7a258694f44715c125ac9f54985d05f91a8e20 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -1,4 +1,3 @@ -@import 'mixins'; @import 'variables'; @import 'styles/fonts/roboto'; @import 'styles/fonts/roboto-mono'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss index 8fc132651bdf67ad68c8767e02b5b77f85a72776..176185fb1994779acf3860e7eaecb0013c5e4cdd 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss @@ -1,3 +1,3 @@ -@import 'mastodon-light/variables'; @import 'index'; +@import 'mastodon-light/variables'; @import 'mastodon-light/diff'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 456252750b9861902caa52cc3a51711a185bc465..1f20827658dfcc1dedb98d4abe27a3e96c04ffd2 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -2,21 +2,21 @@ // Sass color functions, "darken" and "lighten" are automatically replaced. html { - scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25); + scrollbar-color: var(--ui-base-color) var(--ui-base-color-a25); } .simple_form .button.button-tertiary { - color: $highlight-text-color; + color: var(--highlight-text-color); } .status-card__actions button, .status-card__actions a { - color: rgba($white, 0.8); + color: var(--white-a80); &:hover, &:active, &:focus { - color: $white; + color: var(--white); } } @@ -25,45 +25,45 @@ html { .getting-started, .column-inline-form, .regeneration-indicator { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); border-top: 0; } .error-column { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); } .column > .scrollable.about { - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--ui-base-color-lighten-8); } .about__meta, .about__section__title, .interaction-modal { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); } .rules-list li::before { - background: $ui-highlight-color; + background: var(--ui-highlight-color); } .directory__card__img { - background: lighten($ui-base-color, 12%); + background: var(--ui-base-color-lighten-12); } .filter-form { - background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .column-back-button, .column-header { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { border-top: 0; } @@ -77,26 +77,26 @@ html { .column-header__button, .column-header__button.active, .account__header { - background: $white; + background: var(--white); } .column-header__button.active { - color: $ui-highlight-color; + color: var(--ui-highlight-color); &:hover, &:active, &:focus { - color: $ui-highlight-color; - background: $white; + color: var(--ui-highlight-color); + background: var(--white); } } .account__header__bar .avatar .account__avatar { - border-color: $white; + border-color: var(--white); } .getting-started__footer a { - color: $ui-secondary-color; + color: var(--ui-secondary-color); text-decoration: underline; } @@ -104,39 +104,39 @@ html { .confirmation-modal__cancel-button, .mute-modal__cancel-button, .block-modal__cancel-button { - color: lighten($ui-base-color, 26%); + color: var(--ui-base-color-lighten-26); &:hover, &:focus, &:active { - color: $primary-text-color; + color: var(--primary-text-color); } } .column-subheading { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-darken-4); + border-bottom: 1px solid var(--ui-base-color-lighten-8); } .getting-started, .scrollable { .column-link { - background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border-bottom: 1px solid var(--ui-base-color-lighten-8); &:hover, &:active, &:focus { - background: $ui-base-color; + background: var(--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%); + border-top: 1px solid var(--ui-base-color-lighten-8); + border-bottom: 1px solid var(--ui-base-color-lighten-8); - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { border-top: 0; } } @@ -149,15 +149,15 @@ html { .setting-text, .report-dialog-modal__textarea, .audio-player { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); } .report-dialog-modal .dialog-option .poll__input { - color: $white; + color: var(--white); } .search__input { - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { border-top: 0; border-bottom: 0; } @@ -169,36 +169,36 @@ html { } .compose-form__poll-wrapper select { - background: $simple-background-color - url("data:image/svg+xml;utf8,") + background: var(--simple-background-color) + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } .compose-form__poll-wrapper, .compose-form__poll-wrapper .poll__footer { - border-top-color: lighten($ui-base-color, 8%); + border-top-color: var(--ui-base-color-lighten-8); } .notification__filter-bar { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); border-top: 0; } .compose-form .compose-form__buttons-wrapper { - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color); + border: 1px solid var(--ui-base-color-lighten-8); border-top: 0; } .drawer__header, .drawer__inner { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); } .drawer__inner__mastodon { - background: $white - url('data:image/svg+xml;utf8,') + background: var(--white) + url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; } @@ -207,22 +207,22 @@ html { .compose-form__modifiers { .compose-form__upload__actions .icon-button, .compose-form__upload__warning .icon-button { - color: lighten($white, 7%); + color: var(--white-lighten-7); &:active, &:focus, &:hover { - color: $white; + color: var(--white); } } } .compose-form__buttons-wrapper { - background: darken($ui-base-color, 6%); + background: var(--ui-base-color-darken-6); } .autosuggest-textarea__suggestions { - background: darken($ui-base-color, 6%); + background: var(--ui-base-color-darken-6); } .autosuggest-textarea__suggestions__item { @@ -230,76 +230,76 @@ html { &:focus, &:active, &.selected { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } } } .emoji-mart-bar { - border-color: lighten($ui-base-color, 4%); + border-color: var(--ui-base-color-lighten-4); &:first-child { - background: darken($ui-base-color, 6%); + background: var(--ui-base-color-darken-6); } } .emoji-mart-search input { - background: rgba($ui-base-color, 0.3); - border-color: $ui-base-color; + background: var(--ui-base-color-a30); + border-color: var(--ui-base-color); } .upload-progress__backdrop { - background: $ui-base-color; + background: var(--ui-base-color); } // Change the background colors of statuses .focusable:focus { - background: lighten($white, 4%); + background: var(--white-lighten-4); } .detailed-status, .detailed-status__action-bar { - background: $white; + background: var(--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; + background: var(--ui-base-color); &:hover, &:focus { - background: lighten($ui-base-color, 4%); + background: var(--ui-base-color-lighten-4); } } // Change the background colors of media and video spoilers .media-spoiler, .video-player__spoiler { - background: $ui-base-color; + background: var(--ui-base-color); } .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { - color: $white; + color: var(--white); } .account-gallery__item a { - background-color: $ui-base-color; + background-color: var(--ui-base-color); } // Change the colors used in the dropdown menu .dropdown-menu { - background: $white; + background: var(--white); &__arrow::before { - background-color: $white; + background-color: var(--white); } &__item { a, button { - background: $white; - color: $darker-text-color; + background: var(--white); + color: var(--darker-text-color); } } } @@ -327,17 +327,17 @@ html { .simple_form .block-button, .simple_form .button, .simple_form button { - color: $white; + color: var(--white); } .language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { - color: lighten($ui-base-color, 8%); + color: var(--ui-base-color-lighten-8); } .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { - color: darken($ui-base-color, 12%); + color: var(--ui-base-color-darken-12); } .dropdown-menu__separator, @@ -345,11 +345,11 @@ html { .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%); + border-bottom-color: var(--ui-base-color-lighten-4); } .report-dialog-modal__container { - border-top-color: lighten($ui-base-color, 4%); + border-top-color: var(--ui-base-color-lighten-4); } // Change the background colors of modals @@ -370,8 +370,8 @@ html { .picture-in-picture__header, .picture-in-picture__footer, .reactions-bar__item { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); } .reactions-bar__item:hover, @@ -380,12 +380,12 @@ html { .language-dropdown__dropdown__results__item:hover, .language-dropdown__dropdown__results__item:focus, .language-dropdown__dropdown__results__item:active { - background-color: $ui-base-color; + background-color: var(--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%); + background-color: var(--mix-white-highlight-80); + border-color: color-mix(in srgb, var(--ui-base-color-lighten-8) 80%, var(--ui-highlight-color)); } .media-modal__overlay .picture-in-picture__footer { @@ -402,36 +402,36 @@ html { } .icon-with-badge__badge { - border-color: $white; - color: $white; + border-color: var(--white); + color: var(--white); } .report-modal__comment { - border-right-color: lighten($ui-base-color, 8%); + border-right-color: var(--ui-base-color-lighten-8); } .report-modal__container { - border-top-color: lighten($ui-base-color, 8%); + border-top-color: var(--ui-base-color-lighten-8); } .column-header__collapsible-inner { - background: darken($ui-base-color, 4%); - border: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color-darken-4); + border: 1px solid var(--ui-base-color-lighten-8); border-top: 0; } .column-settings__hashtags .column-select__option { - color: $white; + color: var(--white); } .dashboard__quick-access, .focal-point__preview strong, .admin-wrapper .content__heading__tabs a.selected { - color: $white; + color: var(--white); } .flash-message.warning { - color: lighten($gold-star, 16%); + color: var(--gold-star-lighten-16); } .boost-modal__action-bar, @@ -440,66 +440,66 @@ html { .block-modal__action-bar, .onboarding-modal__paginator, .error-modal__footer { - background: darken($ui-base-color, 6%); + background: var(--ui-base-color-darken-6); .onboarding-modal__nav, .error-modal__nav { &:hover, &:focus, &:active { - background-color: darken($ui-base-color, 12%); + background-color: var(--ui-base-color-darken-12); } } } .display-case__case { - background: $white; + background: var(--white); } .embed-modal .embed-modal__container .embed-modal__html { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); &:focus { - border-color: lighten($ui-base-color, 12%); - background: $white; + border-color: var(--ui-base-color-lighten-12); + background: var(--white); } } .react-toggle-track { - background: $ui-secondary-color; + background: var(--ui-secondary-color); } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-secondary-color, 10%); + background: var(--ui-secondary-color-darken-10); } .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-highlight-color, 10%); + background: var(--ui-highlight-color-lighten-10); } // Change the default color used for the text in an empty column or on the error column .empty-column-indicator, .error-column { - color: $primary-text-color; - background: $white; + color: var(--primary-text-color); + background: var(--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%); + background: var(--white); + border-bottom-color: var(--ui-base-color-lighten-8); } .nothing-here, .page-header, .directory__tag > a, .directory__tag > div { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--white); + border: 1px solid var(--ui-base-color-lighten-8); - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { border-left: 0; border-right: 0; border-top: 0; @@ -513,25 +513,25 @@ html { input[type='password'], textarea { &:hover { - border-color: lighten($ui-base-color, 12%); + border-color: var(--ui-base-color-lighten-12); } } } .picture-in-picture-placeholder { - background: $white; - border-color: lighten($ui-base-color, 8%); - color: lighten($ui-base-color, 8%); + background: var(--white); + border-color: var(--ui-base-color-lighten-8); + color: var(--ui-base-color-lighten-8); } .directory__tag > a { &:hover, &:active, &:focus { - background: $ui-base-color; + background: var(--ui-base-color); } - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 1175px) { border: 0; } } @@ -540,35 +540,35 @@ html { &__toolbar, &__row, .nothing-here { - border-color: lighten($ui-base-color, 8%); + border-color: var(--ui-base-color-lighten-8); } } .activity-stream { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); &--under-tabs { border-top: 0; } .entry { - background: $account-background-color; + background: var(--white); .detailed-status.light, .more.light, .status.light { - border-bottom-color: lighten($ui-base-color, 8%); + border-bottom-color: var(--ui-base-color-lighten-8); } } .status.light { .status__content { - color: $primary-text-color; + color: var(--primary-text-color); } .display-name { strong { - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -578,22 +578,22 @@ html { .account-grid-card { .controls { .icon-button { - color: $darker-text-color; + color: var(--darker-text-color); } } .name { a { - color: $primary-text-color; + color: var(--primary-text-color); } } .username { - color: $darker-text-color; + color: var(--darker-text-color); } .account__header__content { - color: $primary-text-color; + color: var(--primary-text-color); } } } @@ -601,42 +601,42 @@ html { .simple_form { .warning { box-shadow: none; - background: rgba($error-red, 0.5); + background: var(--error-red-a50); text-shadow: none; } .recommended { - border-color: $ui-highlight-color; - color: $ui-highlight-color; - background-color: rgba($ui-highlight-color, 0.1); + border-color: var(--ui-highlight-color); + color: var(--ui-highlight-color); + background-color: var(--ui-highlight-color-a10); } } .compose-form .compose-form__warning { - border-color: $ui-highlight-color; - background-color: rgba($ui-highlight-color, 0.1); + border-color: var(--ui-highlight-color); + background-color: var(--ui-highlight-color-a10); &, a { - color: $ui-highlight-color; + color: var(--ui-highlight-color); } } .reply-indicator { background: transparent; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--ui-base-color-lighten-8); } .status__content, .reply-indicator__content { a { - color: $highlight-text-color; + color: var(--highlight-text-color); } } .notification__filter-bar button.active::after, .account__section-headline a.active::after { - border-color: transparent transparent $white; + border-color: transparent transparent var(--white); } .hero-widget, @@ -653,60 +653,60 @@ html { } .mute-modal select { - border: 1px solid lighten($ui-base-color, 8%); - background: $simple-background-color - url("data:image/svg+xml;utf8,") + border: 1px solid var(--ui-base-color-lighten-8); + background: var(--simple-background-color) + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } // Glitch-soc-specific changes .pillbar-button { - background: $ui-secondary-color; + background: var(--ui-secondary-color); &:not([disabled]) { &:hover, &:focus { - background: darken($ui-secondary-color, 10%); + background: var(--ui-secondary-color-darken-10); } &.active { - background-color: darken($ui-highlight-color, 2%); + background-color: var(--ui-highlight-color-darken-2); &:hover, &:focus { - background: lighten($ui-highlight-color, 10%); + background: var(--ui-highlight-color-lighten-10); } } } } .glitch.local-settings { - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); + background: var(--ui-base-color); + border: 1px solid var(--ui-base-color-lighten-8); } .glitch.local-settings__navigation { - background: darken($ui-base-color, 8%); + background: var(--ui-base-color-darken-8); } .glitch.local-settings__navigation__item { - background: darken($ui-base-color, 8%); - border-bottom: 1px lighten($ui-base-color, 8%) solid; + background: var(--ui-base-color-darken-8); + border-bottom: 1px var(--ui-base-color-lighten-8) solid; &:hover { - background: $ui-base-color; + background: var(--ui-base-color); } &.active { - background: $ui-highlight-color; - color: $white; + background: var(--ui-highlight-color); + color: var(--white); } &.close, &.close:hover { - background: $error-value-color; - color: $primary-text-color; + background: var(--error-value-color); + color: var(--primary-text-color); } } @@ -722,14 +722,14 @@ html { .status.collapsed .status__content::after { background: linear-gradient( - rgba(darken($ui-base-color, 13%), 0), - rgba(darken($ui-base-color, 13%), 1) + transparent, + var(--ui-base-color-darken-13) ); } .drawer__inner__mastodon { - background: $white - url('data:image/svg+xml;utf8,') + background: var(--white) + url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; .mastodon { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index 250e200fc6d2581ab337eeaf37ef7b1f2bd9a202..ee7f18a5be0c818fda98a5e598e5383e60e3a19d 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -1,57 +1,242 @@ -// Dependent colors -$black: #000000; -$white: #ffffff; - -$classic-base-color: #282c37; -$classic-primary-color: #9baec8; -$classic-secondary-color: #d9e1e8; -$classic-highlight-color: #6364ff; - -$blurple-600: #563acc; // Iris -$blurple-500: #6364ff; // Brand purple -$blurple-300: #858afa; // Faded Blue -$grey-600: #4e4c5a; // Trout -$grey-100: #dadaf3; // Topaz - -// 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: #b0c0cf; -$ui-primary-color: #9bcbed; -$ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: $classic-highlight-color !default; - -$ui-button-secondary-color: $grey-600 !default; -$ui-button-secondary-border-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; - -$ui-button-tertiary-color: $blurple-500 !default; -$ui-button-tertiary-border-color: $blurple-500 !default; - -$primary-text-color: $black !default; -$darker-text-color: $classic-base-color !default; -$highlight-text-color: darken($ui-highlight-color, 8%) !default; -$dark-text-color: #444b5d; -$action-button-color: #606984; - -$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 -@function darken($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) + $amount); +:root { + --black: #000000; + --white: #ffffff; + --red-600: #b7253d; + --red-500: #df405a; + --blurple-600: #563acc; + --blurple-500: #6364ff; + --blurple-300: #858afa; + --grey-600: #4e4c5a; + --grey-100: #dadaf3; + --success-green: #4a905f; + --error-red: #df405a; + --warning-red: #ff5050; + --gold-star: #ca8f04; + --red-bookmark: #ff5050; + --classic-base-color: #282c37; + --classic-primary-color: #9baec8; + --classic-secondary-color: #d9e1e8; + --classic-highlight-color: #6364ff; + --base-shadow-color: #000000; + --base-overlay-background: #ffffff; + --base-border-color: #ffffff; + --simple-background-color: #ffffff; + --valid-value-color: #4a905f; + --error-value-color: #df405a; + --ui-base-color: #d9e1e8; + --ui-base-lighter-color: #b0c0cf; + --ui-primary-color: #9bcbed; + --ui-secondary-color: #282c37; + --ui-highlight-color: #6364ff; + --ui-button-color: #ffffff; + --ui-button-background-color: #6364ff; + --ui-button-focus-background-color: #563acc; + --ui-button-secondary-color: #4e4c5a; + --ui-button-secondary-border-color: #4e4c5a; + --ui-button-secondary-focus-background-color: #4e4c5a; + --ui-button-secondary-focus-color: #ffffff; + --ui-button-tertiary-color: #6364ff; + --ui-button-tertiary-border-color: #6364ff; + --ui-button-tertiary-focus-background-color: #563acc; + --ui-button-tertiary-focus-color: #ffffff; + --ui-button-destructive-background-color: #df405a; + --ui-button-destructive-focus-background-color: #b7253d; + --primary-text-color: #000000; + --darker-text-color: #282c37; + --dark-text-color: #444b5d; + --secondary-text-color: #282c37; + --highlight-text-color: #3a3bff; + --action-button-color: #606984; + --action-button-focus-color: #a3b6c7; + --passive-text-color: #ca8f04; + --active-passive-text-color: #4a905f; + --inverted-text-color: #000000; + --lighter-text-color: #282c37; + --light-text-color: #444b5d; + --action-button-color-lighten-7: #51596f; + --action-button-color-lighten-13: #444a5e; + --darker-text-color-lighten-4: #1f232b; + --darker-text-color-lighten-7: #191b22; + --darker-text-color-lighten-8: #17191f; + --darker-text-color-lighten-10: #131419; + --dark-text-color-lighten-4: #3b4151; + --dark-text-color-lighten-7: #353a48; + --error-red-lighten-4: #dc2f4b; + --error-red-lighten-12: #c1203b; + --error-value-color-lighten-12: #c1203b; + --gold-star-lighten-6: #ac7a03; + --gold-star-lighten-16: #7a5602; + --highlight-text-color-lighten-4: #2627ff; + --highlight-text-color-lighten-6: #1c1dff; + --highlight-text-color-lighten-8: #1113ff; + --highlight-text-color-lighten-13: #0002f7; + --inverted-text-color-lighten-4: #000000; + --inverted-text-color-lighten-10: #000000; + --inverted-text-color-lighten-15: #000000; + --inverted-text-color-lighten-16: #000000; + --lighter-text-color-lighten-7: #191b22; + --lighter-text-color-lighten-20: #000000; + --secondary-text-color-lighten-4: #1f232b; + --secondary-text-color-lighten-7: #191b22; + --secondary-text-color-lighten-8: #17191f; + --ui-base-color-lighten-2: #d3dce4; + --ui-base-color-lighten-3: #cfd9e2; + --ui-base-color-lighten-4: #ccd7e0; + --ui-base-color-lighten-5: #c9d4de; + --ui-base-color-lighten-6: #c6d2dc; + --ui-base-color-lighten-8: #c0cdd9; + --ui-base-color-lighten-11: #b6c5d3; + --ui-base-color-lighten-12: #b3c3d1; + --ui-base-color-lighten-13: #b0c0cf; + --ui-base-color-lighten-14: #adbecd; + --ui-base-color-lighten-16: #a6b9c9; + --ui-base-color-lighten-18: #a0b4c5; + --ui-base-color-lighten-20: #99afc2; + --ui-base-color-lighten-26: #86a0b6; + --ui-base-color-lighten-27: #839db4; + --ui-base-color-lighten-29: #7d98b0; + --ui-base-color-lighten-30: #7a96ae; + --ui-base-color-lighten-33: #708ea9; + --ui-base-color-lighten-34: #6d8ca7; + --ui-base-color-lighten-50: #496379; + --ui-base-lighter-color-lighten-4: #a3b6c7; + --ui-base-lighter-color-lighten-7: #9aaec2; + --ui-highlight-color-lighten-4: #4f50ff; + --ui-highlight-color-lighten-8: #3a3bff; + --ui-highlight-color-lighten-10: #3031ff; + --ui-highlight-color-lighten-12: #2627ff; + --ui-primary-color-lighten-8: #78b9e7; + --ui-primary-color-lighten-12: #67b0e4; + --ui-primary-color-lighten-20: #459edd; + --ui-secondary-color-lighten-6: #1b1e25; + --ui-secondary-color-lighten-8: #17191f; + --valid-value-color-lighten-8: #3c754d; + --valid-value-color-lighten-15: #305d3d; + --warning-red-lighten-12: #ff1313; + --white-lighten-4: #f5f5f5; + --white-lighten-7: #ededed; + --action-button-color-darken-13: #828ba4; + --darker-text-color-darken-13: #444b5d; + --highlight-text-color-darken-4: #4f50ff; + --lighter-text-color-darken-4: #313543; + --lighter-text-color-darken-7: #373d4c; + --simple-background-color-darken-2: #ffffff; + --simple-background-color-darken-8: #ffffff; + --simple-background-color-darken-14: #ffffff; + --simple-background-color-darken-24: #ffffff; + --ui-base-color-darken-2: #dfe6ec; + --ui-base-color-darken-4: #e6ebf0; + --ui-base-color-darken-5: #e9eef2; + --ui-base-color-darken-6: #ecf0f4; + --ui-base-color-darken-7: #eff3f5; + --ui-base-color-darken-8: #f2f5f7; + --ui-base-color-darken-10: #f9fafb; + --ui-base-color-darken-12: #ffffff; + --ui-base-color-darken-13: #ffffff; + --ui-base-color-darken-14: #ffffff; + --ui-base-color-darken-20: #ffffff; + --ui-highlight-color-darken-2: #6d6eff; + --ui-highlight-color-darken-3: #7273ff; + --ui-highlight-color-darken-5: #7d7dff; + --ui-highlight-color-darken-8: #8c8dff; + --ui-primary-color-darken-5: #b1d6f1; + --ui-primary-color-darken-14: #d8eaf8; + --ui-primary-color-darken-40: #ffffff; + --ui-secondary-color-darken-8: #393f4f; + --ui-secondary-color-darken-10: #3d4455; + --ui-secondary-color-darken-16: #4a5266; + --ui-secondary-color-darken-18: #4f576c; + --ui-secondary-color-darken-24: #5c657e; + --action-button-color-a15: #60698426; + --action-button-color-a30: #6069844d; + --base-overlay-background-a0: #ffffff00; + --base-overlay-background-a10: #ffffff1a; + --base-overlay-background-a30: #ffffff4d; + --base-overlay-background-a50: #ffffff80; + --base-overlay-background-a60: #ffffff99; + --base-overlay-background-a70: #ffffffb3; + --base-overlay-background-a80: #ffffffcc; + --base-overlay-background-a90: #ffffffe6; + --base-shadow-color-a10: #0000001a; + --base-shadow-color-a20: #00000033; + --base-shadow-color-a25: #00000040; + --base-shadow-color-a30: #0000004d; + --base-shadow-color-a35: #00000059; + --base-shadow-color-a40: #00000066; + --base-shadow-color-a45: #00000073; + --base-shadow-color-a60: #00000099; + --base-shadow-color-a65: #000000a6; + --base-shadow-color-a75: #000000bf; + --base-shadow-color-a80: #000000cc; + --base-shadow-color-a85: #000000d9; + --black-a45: #00000073; + --black-a65: #000000a6; + --black-a85: #000000d9; + --black-a90: #000000e6; + --darker-text-color-a15: #282c3726; + --darker-text-color-a30: #282c374d; + --dark-text-color-a10: #444b5d1a; + --error-red-a50: #df405a80; + --error-value-color-a10: #df405a1a; + --error-value-color-a50: #df405a80; + --gold-star-a15: #ca8f0426; + --gold-star-a25: #ca8f0440; + --gold-star-a30: #ca8f044d; + --gold-star-a50: #ca8f0480; + --highlight-text-color-a15: #3a3bff26; + --highlight-text-color-a25: #3a3bff40; + --highlight-text-color-a30: #3a3bff4d; + --highlight-text-color-a40: #3a3bff66; + --lighter-text-color-a15: #282c3726; + --lighter-text-color-a30: #282c374d; + --primary-text-color-a70: #000000b3; + --primary-text-color-a80: #000000cc; + --success-green-a10: #4a905f1a; + --success-green-a50: #4a905f80; + --ui-base-color-a0: #d9e1e800; + --ui-base-color-a15: #d9e1e826; + --ui-base-color-a25: #d9e1e840; + --ui-base-color-a30: #d9e1e84d; + --ui-base-color-a85: #d9e1e8d9; + --ui-base-color-a100: #d9e1e8; + --ui-base-lighter-color-a60: #b0c0cf99; + --ui-highlight-color-a0: #6364ff00; + --ui-highlight-color-a10: #6364ff1a; + --ui-highlight-color-a15: #6364ff26; + --ui-highlight-color-a23: #6364ff3b; + --ui-highlight-color-a40: #6364ff66; + --ui-highlight-color-a50: #6364ff80; + --ui-secondary-color-a10: #282c371a; + --ui-secondary-color-a30: #282c374d; + --ui-secondary-color-a40: #282c3766; + --ui-secondary-color-a50: #282c3780; + --ui-secondary-color-a70: #282c37b3; + --valid-value-color-a25: #4a905f40; + --valid-value-color-a50: #4a905f80; + --warning-red-a15: #ff505026; + --white-a15: #ffffff26; + --white-a20: #ffffff33; + --white-a30: #ffffff4d; + --white-a35: #ffffff59; + --white-a70: #ffffffb3; + --white-a75: #ffffffbf; + --white-a80: #ffffffcc; + --mix-ui-base-highlight-95: #d3dbe9; + --mix-white-highlight-80: #e0e0ff; + --mix-ui-base-lighten4-highlight-95: #c7d1e2; + --mix-ui-base-lighten8-highlight-95: #bbc8db; + --mix-ui-base-lighten12-highlight-80: #a3b0da; + --font-sans-serif: 'mastodon-font-sans-serif'; + --font-display: 'mastodon-font-display'; + --font-monospace: 'mastodon-font-monospace'; + --no-gap-breakpoint: 1175px; + --media-modal-media-max-width: 100%; + --media-modal-media-max-height: 80%; + --ui-avatar-border-size: 8%; + --dismiss-overlay-width: 4rem; + --dropdown-border-color: #b3c3d1; + --dropdown-background-color: #ccd7e0; + --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --modal-background-color: #e6ebf0; + --modal-border-color: #ccd7e0; } - -@function lighten($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) - $amount); -} - -$emojis-requiring-inversion: 'chains'; diff --git a/app/javascript/flavours/glitch/styles/properties-contrast.css b/app/javascript/flavours/glitch/styles/properties-contrast.css deleted file mode 100644 index 214e3679e44e1cbc2a33cf0d3228bd5b5c3a0316..0000000000000000000000000000000000000000 --- a/app/javascript/flavours/glitch/styles/properties-contrast.css +++ /dev/null @@ -1,236 +0,0 @@ -:root { - --black: #000000; - --white: #ffffff; - --red-600: #b7253d; - --red-500: #df405a; - --blurple-600: #563acc; - --blurple-500: #6364ff; - --blurple-300: #858afa; - --grey-600: #4e4c5a; - --grey-100: #dadaf3; - --success-green: #79bd9a; - --error-red: #df405a; - --warning-red: #ff5050; - --gold-star: #ca8f04; - --red-bookmark: #ff5050; - --classic-base-color: #282c37; - --classic-primary-color: #9baec8; - --classic-secondary-color: #d9e1e8; - --classic-highlight-color: #6364ff; - --base-shadow-color: #000000; - --base-overlay-background: #000000; - --base-border-color: #ffffff; - --simple-background-color: #ffffff; - --valid-value-color: #79bd9a; - --error-value-color: #df405a; - --ui-base-color: #282c37; - --ui-base-lighter-color: #606984; - --ui-primary-color: #9baec8; - --ui-secondary-color: #d9e1e8; - --ui-highlight-color: #6364ff; - --ui-button-color: #ffffff; - --ui-button-background-color: #6364ff; - --ui-button-focus-background-color: #563acc; - --ui-button-secondary-color: #dadaf3; - --ui-button-secondary-border-color: #dadaf3; - --ui-button-secondary-focus-background-color: #4e4c5a; - --ui-button-secondary-focus-color: #ffffff; - --ui-button-tertiary-color: #858afa; - --ui-button-tertiary-border-color: #858afa; - --ui-button-tertiary-focus-background-color: #563acc; - --ui-button-tertiary-focus-color: #ffffff; - --ui-button-destructive-background-color: #df405a; - --ui-button-destructive-focus-background-color: #b7253d; - --primary-text-color: #ffffff; - --darker-text-color: #dde3ec; - --dark-text-color: #c2cede; - --secondary-text-color: #ecf0f4; - --highlight-text-color: #9697ff; - --action-button-color: #a2a9bc; - --action-button-focus-color: #687390; - --passive-text-color: #ca8f04; - --active-passive-text-color: #79bd9a; - --inverted-text-color: #000000; - --lighter-text-color: #1b1e25; - --light-text-color: #364861; - --action-button-color-lighten-7: #b7bccb; - --action-button-color-lighten-13: #c9cdd8; - --darker-text-color-lighten-4: #eaeef3; - --darker-text-color-lighten-7: #f4f6f9; - --darker-text-color-lighten-8: #f7f9fb; - --darker-text-color-lighten-10: #fefefe; - --dark-text-color-lighten-4: #d0d9e5; - --dark-text-color-lighten-7: #dae1ea; - --error-red-lighten-4: #e25169; - --error-red-lighten-12: #e87487; - --error-value-color-lighten-12: #e87487; - --gold-star-lighten-6: #e8a405; - --gold-star-lighten-16: #fbbb25; - --highlight-text-color-lighten-4: #aaabff; - --highlight-text-color-lighten-6: #b5b5ff; - --highlight-text-color-lighten-8: #bfbfff; - --highlight-text-color-lighten-13: #d8d9ff; - --inverted-text-color-lighten-4: #0a0a0a; - --inverted-text-color-lighten-10: #1a1a1a; - --inverted-text-color-lighten-15: #262626; - --inverted-text-color-lighten-16: #292929; - --lighter-text-color-lighten-7: #2a2e3a; - --lighter-text-color-lighten-20: #464d60; - --secondary-text-color-lighten-4: #f9fafb; - --secondary-text-color-lighten-7: #ffffff; - --secondary-text-color-lighten-8: #ffffff; - --ui-base-color-lighten-2: #2c313d; - --ui-base-color-lighten-3: #2e3340; - --ui-base-color-lighten-4: #313543; - --ui-base-color-lighten-5: #333846; - --ui-base-color-lighten-6: #353a49; - --ui-base-color-lighten-8: #393f4f; - --ui-base-color-lighten-11: #404657; - --ui-base-color-lighten-12: #42485a; - --ui-base-color-lighten-13: #444b5d; - --ui-base-color-lighten-14: #464d60; - --ui-base-color-lighten-16: #4a5266; - --ui-base-color-lighten-20: #535b72; - --ui-base-color-lighten-26: #606984; - --ui-base-color-lighten-27: #626c87; - --ui-base-color-lighten-29: #66718d; - --ui-base-color-lighten-30: #687390; - --ui-base-color-lighten-33: #707b97; - --ui-base-color-lighten-34: #737d99; - --ui-base-color-lighten-50: #a2a9bc; - --ui-base-lighter-color-lighten-4: #687390; - --ui-base-lighter-color-lighten-7: #707b97; - --ui-highlight-color-lighten-4: #7778ff; - --ui-highlight-color-lighten-8: #8c8dff; - --ui-highlight-color-lighten-10: #9697ff; - --ui-highlight-color-lighten-12: #a0a1ff; - --ui-primary-color-lighten-8: #b5c3d6; - --ui-primary-color-lighten-12: #c2cede; - --ui-primary-color-lighten-20: #dde3ec; - --ui-secondary-color-lighten-6: #ecf0f4; - --ui-secondary-color-lighten-8: #f2f5f7; - --valid-value-color-lighten-8: #94caaf; - --valid-value-color-lighten-15: #acd6c1; - --warning-red-lighten-12: #ff8d8d; - --white-lighten-4: #ffffff; - --white-lighten-7: #ffffff; - --action-button-color-darken-13: #7c86a0; - --darker-text-color-darken-13: #b2c1d5; - --highlight-text-color-darken-4: #8282ff; - --lighter-text-color-darken-4: #131419; - --lighter-text-color-darken-7: #0c0d11; - --simple-background-color-darken-2: #fafafa; - --simple-background-color-darken-8: #ebebeb; - --simple-background-color-darken-14: #dbdbdb; - --simple-background-color-darken-24: #c2c2c2; - --ui-base-color-darken-2: #242731; - --ui-base-color-darken-4: #1f232b; - --ui-base-color-darken-5: #1d2028; - --ui-base-color-darken-6: #1b1e25; - --ui-base-color-darken-7: #191b22; - --ui-base-color-darken-8: #17191f; - --ui-base-color-darken-10: #131419; - --ui-base-color-darken-12: #0e1014; - --ui-base-color-darken-13: #0c0d11; - --ui-base-color-darken-14: #0a0b0e; - --ui-base-color-darken-20: #000000; - --ui-highlight-color-darken-2: #595aff; - --ui-highlight-color-darken-3: #5455ff; - --ui-highlight-color-darken-5: #4a4bff; - --ui-highlight-color-darken-8: #3a3bff; - --ui-primary-color-darken-5: #8ba1bf; - --ui-primary-color-darken-14: #6d89af; - --ui-primary-color-darken-40: #364861; - --ui-secondary-color-darken-8: #c0cdd9; - --ui-secondary-color-darken-10: #b9c8d5; - --ui-secondary-color-darken-16: #a6b9c9; - --ui-secondary-color-darken-18: #a0b4c5; - --ui-secondary-color-darken-24: #8da5ba; - --action-button-color-a15: #a2a9bc26; - --action-button-color-a30: #a2a9bc4d; - --base-overlay-background-a0: #00000000; - --base-overlay-background-a10: #0000001a; - --base-overlay-background-a30: #0000004d; - --base-overlay-background-a50: #00000080; - --base-overlay-background-a60: #00000099; - --base-overlay-background-a70: #000000b3; - --base-overlay-background-a80: #000000cc; - --base-overlay-background-a90: #000000e6; - --base-shadow-color-a10: #0000001a; - --base-shadow-color-a20: #00000033; - --base-shadow-color-a25: #00000040; - --base-shadow-color-a30: #0000004d; - --base-shadow-color-a35: #00000059; - --base-shadow-color-a40: #00000066; - --base-shadow-color-a45: #00000073; - --base-shadow-color-a60: #00000099; - --base-shadow-color-a65: #000000a6; - --base-shadow-color-a75: #000000bf; - --base-shadow-color-a80: #000000cc; - --base-shadow-color-a85: #000000d9; - --black-a45: #00000073; - --black-a65: #000000a6; - --black-a85: #000000d9; - --black-a90: #000000e6; - --darker-text-color-a15: #dde3ec26; - --darker-text-color-a30: #dde3ec4d; - --dark-text-color-a10: #c2cede1a; - --error-red-a50: #df405a80; - --error-value-color-a10: #df405a1a; - --error-value-color-a50: #df405a80; - --gold-star-a15: #ca8f0426; - --gold-star-a25: #ca8f0440; - --gold-star-a30: #ca8f044d; - --gold-star-a50: #ca8f0480; - --highlight-text-color-a15: #9697ff26; - --highlight-text-color-a25: #9697ff40; - --highlight-text-color-a30: #9697ff4d; - --highlight-text-color-a40: #9697ff66; - --lighter-text-color-a15: #1b1e2526; - --lighter-text-color-a30: #1b1e254d; - --primary-text-color-a70: #ffffffb3; - --primary-text-color-a80: #ffffffcc; - --success-green-a10: #79bd9a1a; - --success-green-a50: #79bd9a80; - --ui-base-color-a0: #282c3700; - --ui-base-color-a15: #282c3726; - --ui-base-color-a25: #282c3740; - --ui-base-color-a30: #282c374d; - --ui-base-color-a85: #282c37d9; - --ui-base-color-a100: #282c37; - --ui-base-lighter-color-a60: #60698499; - --ui-highlight-color-a0: #6364ff00; - --ui-highlight-color-a10: #6364ff1a; - --ui-highlight-color-a15: #6364ff26; - --ui-highlight-color-a23: #6364ff3b; - --ui-highlight-color-a40: #6364ff66; - --ui-highlight-color-a50: #6364ff80; - --ui-secondary-color-a10: #d9e1e81a; - --ui-secondary-color-a30: #d9e1e84d; - --ui-secondary-color-a40: #d9e1e866; - --ui-secondary-color-a50: #d9e1e880; - --ui-secondary-color-a70: #d9e1e8b3; - --valid-value-color-a25: #79bd9a40; - --valid-value-color-a50: #79bd9a80; - --warning-red-a15: #ff505026; - --white-a15: #ffffff26; - --white-a20: #ffffff33; - --white-a30: #ffffff4d; - --white-a35: #ffffff59; - --white-a70: #ffffffb3; - --white-a75: #ffffffbf; - --white-a80: #ffffffcc; - --mix-ui-base-highlight-95: #2b2f41; - --mix-white-highlight-80: #e0e0ff; - --mix-ui-base-lighten4-highlight-95: #33384c; - --mix-ui-base-lighten8-highlight-95: #3b4157; - --mix-ui-base-lighten12-highlight-80: #484e7b; - --font-sans-serif: 'mastodon-font-sans-serif'; - --font-display: 'mastodon-font-display'; - --font-monospace: 'mastodon-font-monospace'; - --no-gap-breakpoint: 1175px; - --media-modal-media-max-width: 100%; - --media-modal-media-max-height: 80%; - --ui-avatar-border-size: 8%; - --dismiss-overlay-width: 4rem; -} diff --git a/app/javascript/flavours/glitch/styles/properties-light.css b/app/javascript/flavours/glitch/styles/properties-light.css deleted file mode 100644 index bf55efc1f2461692347b1d934de09f31fe763679..0000000000000000000000000000000000000000 --- a/app/javascript/flavours/glitch/styles/properties-light.css +++ /dev/null @@ -1,236 +0,0 @@ -:root { - --black: #000000; - --white: #ffffff; - --red-600: #b7253d; - --red-500: #df405a; - --blurple-600: #563acc; - --blurple-500: #6364ff; - --blurple-300: #858afa; - --grey-600: #4e4c5a; - --grey-100: #dadaf3; - --success-green: #4a905f; - --error-red: #df405a; - --warning-red: #ff5050; - --gold-star: #ca8f04; - --red-bookmark: #ff5050; - --classic-base-color: #282c37; - --classic-primary-color: #9baec8; - --classic-secondary-color: #d9e1e8; - --classic-highlight-color: #6364ff; - --base-shadow-color: #000000; - --base-overlay-background: #ffffff; - --base-border-color: #ffffff; - --simple-background-color: #ffffff; - --valid-value-color: #4a905f; - --error-value-color: #df405a; - --ui-base-color: #d9e1e8; - --ui-base-lighter-color: #b0c0cf; - --ui-primary-color: #9bcbed; - --ui-secondary-color: #282c37; - --ui-highlight-color: #6364ff; - --ui-button-color: #ffffff; - --ui-button-background-color: #6364ff; - --ui-button-focus-background-color: #563acc; - --ui-button-secondary-color: #4e4c5a; - --ui-button-secondary-border-color: #4e4c5a; - --ui-button-secondary-focus-background-color: #4e4c5a; - --ui-button-secondary-focus-color: #ffffff; - --ui-button-tertiary-color: #6364ff; - --ui-button-tertiary-border-color: #6364ff; - --ui-button-tertiary-focus-background-color: #563acc; - --ui-button-tertiary-focus-color: #ffffff; - --ui-button-destructive-background-color: #df405a; - --ui-button-destructive-focus-background-color: #b7253d; - --primary-text-color: #000000; - --darker-text-color: #282c37; - --dark-text-color: #444b5d; - --secondary-text-color: #282c37; - --highlight-text-color: #3a3bff; - --action-button-color: #606984; - --action-button-focus-color: #a3b6c7; - --passive-text-color: #ca8f04; - --active-passive-text-color: #4a905f; - --inverted-text-color: #000000; - --lighter-text-color: #282c37; - --light-text-color: #444b5d; - --action-button-color-lighten-7: #51596f; - --action-button-color-lighten-13: #444a5e; - --darker-text-color-lighten-4: #1f232b; - --darker-text-color-lighten-7: #191b22; - --darker-text-color-lighten-8: #17191f; - --darker-text-color-lighten-10: #131419; - --dark-text-color-lighten-4: #3b4151; - --dark-text-color-lighten-7: #353a48; - --error-red-lighten-4: #dc2f4b; - --error-red-lighten-12: #c1203b; - --error-value-color-lighten-12: #c1203b; - --gold-star-lighten-6: #ac7a03; - --gold-star-lighten-16: #7a5602; - --highlight-text-color-lighten-4: #2627ff; - --highlight-text-color-lighten-6: #1c1dff; - --highlight-text-color-lighten-8: #1113ff; - --highlight-text-color-lighten-13: #0002f7; - --inverted-text-color-lighten-4: #000000; - --inverted-text-color-lighten-10: #000000; - --inverted-text-color-lighten-15: #000000; - --inverted-text-color-lighten-16: #000000; - --lighter-text-color-lighten-7: #191b22; - --lighter-text-color-lighten-20: #000000; - --secondary-text-color-lighten-4: #1f232b; - --secondary-text-color-lighten-7: #191b22; - --secondary-text-color-lighten-8: #17191f; - --ui-base-color-lighten-2: #d3dce4; - --ui-base-color-lighten-3: #cfd9e2; - --ui-base-color-lighten-4: #ccd7e0; - --ui-base-color-lighten-5: #c9d4de; - --ui-base-color-lighten-6: #c6d2dc; - --ui-base-color-lighten-8: #c0cdd9; - --ui-base-color-lighten-11: #b6c5d3; - --ui-base-color-lighten-12: #b3c3d1; - --ui-base-color-lighten-13: #b0c0cf; - --ui-base-color-lighten-14: #adbecd; - --ui-base-color-lighten-16: #a6b9c9; - --ui-base-color-lighten-20: #99afc2; - --ui-base-color-lighten-26: #86a0b6; - --ui-base-color-lighten-27: #839db4; - --ui-base-color-lighten-29: #7d98b0; - --ui-base-color-lighten-30: #7a96ae; - --ui-base-color-lighten-33: #708ea9; - --ui-base-color-lighten-34: #6d8ca7; - --ui-base-color-lighten-50: #496379; - --ui-base-lighter-color-lighten-4: #a3b6c7; - --ui-base-lighter-color-lighten-7: #9aaec2; - --ui-highlight-color-lighten-4: #4f50ff; - --ui-highlight-color-lighten-8: #3a3bff; - --ui-highlight-color-lighten-10: #3031ff; - --ui-highlight-color-lighten-12: #2627ff; - --ui-primary-color-lighten-8: #78b9e7; - --ui-primary-color-lighten-12: #67b0e4; - --ui-primary-color-lighten-20: #459edd; - --ui-secondary-color-lighten-6: #1b1e25; - --ui-secondary-color-lighten-8: #17191f; - --valid-value-color-lighten-8: #3c754d; - --valid-value-color-lighten-15: #305d3d; - --warning-red-lighten-12: #ff1313; - --white-lighten-4: #f5f5f5; - --white-lighten-7: #ededed; - --action-button-color-darken-13: #828ba4; - --darker-text-color-darken-13: #444b5d; - --highlight-text-color-darken-4: #4f50ff; - --lighter-text-color-darken-4: #313543; - --lighter-text-color-darken-7: #373d4c; - --simple-background-color-darken-2: #ffffff; - --simple-background-color-darken-8: #ffffff; - --simple-background-color-darken-14: #ffffff; - --simple-background-color-darken-24: #ffffff; - --ui-base-color-darken-2: #dfe6ec; - --ui-base-color-darken-4: #e6ebf0; - --ui-base-color-darken-5: #e9eef2; - --ui-base-color-darken-6: #ecf0f4; - --ui-base-color-darken-7: #eff3f5; - --ui-base-color-darken-8: #f2f5f7; - --ui-base-color-darken-10: #f9fafb; - --ui-base-color-darken-12: #ffffff; - --ui-base-color-darken-13: #ffffff; - --ui-base-color-darken-14: #ffffff; - --ui-base-color-darken-20: #ffffff; - --ui-highlight-color-darken-2: #6d6eff; - --ui-highlight-color-darken-3: #7273ff; - --ui-highlight-color-darken-5: #7d7dff; - --ui-highlight-color-darken-8: #8c8dff; - --ui-primary-color-darken-5: #b1d6f1; - --ui-primary-color-darken-14: #d8eaf8; - --ui-primary-color-darken-40: #ffffff; - --ui-secondary-color-darken-8: #393f4f; - --ui-secondary-color-darken-10: #3d4455; - --ui-secondary-color-darken-16: #4a5266; - --ui-secondary-color-darken-18: #4f576c; - --ui-secondary-color-darken-24: #5c657e; - --action-button-color-a15: #60698426; - --action-button-color-a30: #6069844d; - --base-overlay-background-a0: #ffffff00; - --base-overlay-background-a10: #ffffff1a; - --base-overlay-background-a30: #ffffff4d; - --base-overlay-background-a50: #ffffff80; - --base-overlay-background-a60: #ffffff99; - --base-overlay-background-a70: #ffffffb3; - --base-overlay-background-a80: #ffffffcc; - --base-overlay-background-a90: #ffffffe6; - --base-shadow-color-a10: #0000001a; - --base-shadow-color-a20: #00000033; - --base-shadow-color-a25: #00000040; - --base-shadow-color-a30: #0000004d; - --base-shadow-color-a35: #00000059; - --base-shadow-color-a40: #00000066; - --base-shadow-color-a45: #00000073; - --base-shadow-color-a60: #00000099; - --base-shadow-color-a65: #000000a6; - --base-shadow-color-a75: #000000bf; - --base-shadow-color-a80: #000000cc; - --base-shadow-color-a85: #000000d9; - --black-a45: #00000073; - --black-a65: #000000a6; - --black-a85: #000000d9; - --black-a90: #000000e6; - --darker-text-color-a15: #282c3726; - --darker-text-color-a30: #282c374d; - --dark-text-color-a10: #444b5d1a; - --error-red-a50: #df405a80; - --error-value-color-a10: #df405a1a; - --error-value-color-a50: #df405a80; - --gold-star-a15: #ca8f0426; - --gold-star-a25: #ca8f0440; - --gold-star-a30: #ca8f044d; - --gold-star-a50: #ca8f0480; - --highlight-text-color-a15: #3a3bff26; - --highlight-text-color-a25: #3a3bff40; - --highlight-text-color-a30: #3a3bff4d; - --highlight-text-color-a40: #3a3bff66; - --lighter-text-color-a15: #282c3726; - --lighter-text-color-a30: #282c374d; - --primary-text-color-a70: #000000b3; - --primary-text-color-a80: #000000cc; - --success-green-a10: #4a905f1a; - --success-green-a50: #4a905f80; - --ui-base-color-a0: #d9e1e800; - --ui-base-color-a15: #d9e1e826; - --ui-base-color-a25: #d9e1e840; - --ui-base-color-a30: #d9e1e84d; - --ui-base-color-a85: #d9e1e8d9; - --ui-base-color-a100: #d9e1e8; - --ui-base-lighter-color-a60: #b0c0cf99; - --ui-highlight-color-a0: #6364ff00; - --ui-highlight-color-a10: #6364ff1a; - --ui-highlight-color-a15: #6364ff26; - --ui-highlight-color-a23: #6364ff3b; - --ui-highlight-color-a40: #6364ff66; - --ui-highlight-color-a50: #6364ff80; - --ui-secondary-color-a10: #282c371a; - --ui-secondary-color-a30: #282c374d; - --ui-secondary-color-a40: #282c3766; - --ui-secondary-color-a50: #282c3780; - --ui-secondary-color-a70: #282c37b3; - --valid-value-color-a25: #4a905f40; - --valid-value-color-a50: #4a905f80; - --warning-red-a15: #ff505026; - --white-a15: #ffffff26; - --white-a20: #ffffff33; - --white-a30: #ffffff4d; - --white-a35: #ffffff59; - --white-a70: #ffffffb3; - --white-a75: #ffffffbf; - --white-a80: #ffffffcc; - --mix-ui-base-highlight-95: #d3dbe9; - --mix-white-highlight-80: #e0e0ff; - --mix-ui-base-lighten4-highlight-95: #c7d1e2; - --mix-ui-base-lighten8-highlight-95: #bbc8db; - --mix-ui-base-lighten12-highlight-80: #a3b0da; - --font-sans-serif: 'mastodon-font-sans-serif'; - --font-display: 'mastodon-font-display'; - --font-monospace: 'mastodon-font-monospace'; - --no-gap-breakpoint: 1175px; - --media-modal-media-max-width: 100%; - --media-modal-media-max-height: 80%; - --ui-avatar-border-size: 8%; - --dismiss-overlay-width: 4rem; -} diff --git a/app/javascript/flavours/glitch/styles/properties.css b/app/javascript/flavours/glitch/styles/properties.css deleted file mode 100644 index 4a9ff99e896976af6356bf6dda41a225566ac544..0000000000000000000000000000000000000000 --- a/app/javascript/flavours/glitch/styles/properties.css +++ /dev/null @@ -1,236 +0,0 @@ -:root { - --black: #000000; - --white: #ffffff; - --red-600: #b7253d; - --red-500: #df405a; - --blurple-600: #563acc; - --blurple-500: #6364ff; - --blurple-300: #858afa; - --grey-600: #4e4c5a; - --grey-100: #dadaf3; - --success-green: #79bd9a; - --error-red: #df405a; - --warning-red: #ff5050; - --gold-star: #ca8f04; - --red-bookmark: #ff5050; - --classic-base-color: #282c37; - --classic-primary-color: #9baec8; - --classic-secondary-color: #d9e1e8; - --classic-highlight-color: #6364ff; - --base-shadow-color: #000000; - --base-overlay-background: #000000; - --base-border-color: #ffffff; - --simple-background-color: #ffffff; - --valid-value-color: #79bd9a; - --error-value-color: #df405a; - --ui-base-color: #282c37; - --ui-base-lighter-color: #606984; - --ui-primary-color: #9baec8; - --ui-secondary-color: #d9e1e8; - --ui-highlight-color: #6364ff; - --ui-button-color: #ffffff; - --ui-button-background-color: #6364ff; - --ui-button-focus-background-color: #563acc; - --ui-button-secondary-color: #dadaf3; - --ui-button-secondary-border-color: #dadaf3; - --ui-button-secondary-focus-background-color: #4e4c5a; - --ui-button-secondary-focus-color: #ffffff; - --ui-button-tertiary-color: #858afa; - --ui-button-tertiary-border-color: #858afa; - --ui-button-tertiary-focus-background-color: #563acc; - --ui-button-tertiary-focus-color: #ffffff; - --ui-button-destructive-background-color: #df405a; - --ui-button-destructive-focus-background-color: #b7253d; - --primary-text-color: #ffffff; - --darker-text-color: #9baec8; - --dark-text-color: #606984; - --secondary-text-color: #d9e1e8; - --highlight-text-color: #8c8dff; - --action-button-color: #606984; - --action-button-focus-color: #687390; - --passive-text-color: #ca8f04; - --active-passive-text-color: #79bd9a; - --inverted-text-color: #282c37; - --lighter-text-color: #606984; - --light-text-color: #9baec8; - --action-button-color-lighten-7: #707b97; - --action-button-color-lighten-13: #828ba4; - --darker-text-color-lighten-4: #a8b9cf; - --darker-text-color-lighten-7: #b2c1d5; - --darker-text-color-lighten-8: #b5c3d6; - --darker-text-color-lighten-10: #bcc9da; - --dark-text-color-lighten-4: #687390; - --dark-text-color-lighten-7: #707b97; - --error-red-lighten-4: #e25169; - --error-red-lighten-12: #e87487; - --error-value-color-lighten-12: #e87487; - --gold-star-lighten-6: #e8a405; - --gold-star-lighten-16: #fbbb25; - --highlight-text-color-lighten-4: #a0a1ff; - --highlight-text-color-lighten-6: #aaabff; - --highlight-text-color-lighten-8: #b5b5ff; - --highlight-text-color-lighten-13: #ceceff; - --inverted-text-color-lighten-4: #313543; - --inverted-text-color-lighten-10: #3d4455; - --inverted-text-color-lighten-15: #484f63; - --inverted-text-color-lighten-16: #4a5266; - --lighter-text-color-lighten-7: #707b97; - --lighter-text-color-lighten-20: #979eb3; - --secondary-text-color-lighten-4: #e6ebf0; - --secondary-text-color-lighten-7: #eff3f5; - --secondary-text-color-lighten-8: #f2f5f7; - --ui-base-color-lighten-2: #2c313d; - --ui-base-color-lighten-3: #2e3340; - --ui-base-color-lighten-4: #313543; - --ui-base-color-lighten-5: #333846; - --ui-base-color-lighten-6: #353a49; - --ui-base-color-lighten-8: #393f4f; - --ui-base-color-lighten-11: #404657; - --ui-base-color-lighten-12: #42485a; - --ui-base-color-lighten-13: #444b5d; - --ui-base-color-lighten-14: #464d60; - --ui-base-color-lighten-16: #4a5266; - --ui-base-color-lighten-20: #535b72; - --ui-base-color-lighten-26: #606984; - --ui-base-color-lighten-27: #626c87; - --ui-base-color-lighten-29: #66718d; - --ui-base-color-lighten-30: #687390; - --ui-base-color-lighten-33: #707b97; - --ui-base-color-lighten-34: #737d99; - --ui-base-color-lighten-50: #a2a9bc; - --ui-base-lighter-color-lighten-4: #687390; - --ui-base-lighter-color-lighten-7: #707b97; - --ui-highlight-color-lighten-4: #7778ff; - --ui-highlight-color-lighten-8: #8c8dff; - --ui-highlight-color-lighten-10: #9697ff; - --ui-highlight-color-lighten-12: #a0a1ff; - --ui-primary-color-lighten-8: #b5c3d6; - --ui-primary-color-lighten-12: #c2cede; - --ui-primary-color-lighten-20: #dde3ec; - --ui-secondary-color-lighten-6: #ecf0f4; - --ui-secondary-color-lighten-8: #f2f5f7; - --valid-value-color-lighten-8: #94caaf; - --valid-value-color-lighten-15: #acd6c1; - --warning-red-lighten-12: #ff8d8d; - --white-lighten-4: #ffffff; - --white-lighten-7: #ffffff; - --action-button-color-darken-13: #444b5d; - --darker-text-color-darken-13: #708bb0; - --highlight-text-color-darken-4: #7778ff; - --lighter-text-color-darken-4: #576078; - --lighter-text-color-darken-7: #51596f; - --simple-background-color-darken-2: #fafafa; - --simple-background-color-darken-8: #ebebeb; - --simple-background-color-darken-14: #dbdbdb; - --simple-background-color-darken-24: #c2c2c2; - --ui-base-color-darken-2: #242731; - --ui-base-color-darken-4: #1f232b; - --ui-base-color-darken-5: #1d2028; - --ui-base-color-darken-6: #1b1e25; - --ui-base-color-darken-7: #191b22; - --ui-base-color-darken-8: #17191f; - --ui-base-color-darken-10: #131419; - --ui-base-color-darken-12: #0e1014; - --ui-base-color-darken-13: #0c0d11; - --ui-base-color-darken-14: #0a0b0e; - --ui-base-color-darken-20: #000000; - --ui-highlight-color-darken-2: #595aff; - --ui-highlight-color-darken-3: #5455ff; - --ui-highlight-color-darken-5: #4a4bff; - --ui-highlight-color-darken-8: #3a3bff; - --ui-primary-color-darken-5: #8ba1bf; - --ui-primary-color-darken-14: #6d89af; - --ui-primary-color-darken-40: #364861; - --ui-secondary-color-darken-8: #c0cdd9; - --ui-secondary-color-darken-10: #b9c8d5; - --ui-secondary-color-darken-16: #a6b9c9; - --ui-secondary-color-darken-18: #a0b4c5; - --ui-secondary-color-darken-24: #8da5ba; - --action-button-color-a15: #60698426; - --action-button-color-a30: #6069844d; - --base-overlay-background-a0: #00000000; - --base-overlay-background-a10: #0000001a; - --base-overlay-background-a30: #0000004d; - --base-overlay-background-a50: #00000080; - --base-overlay-background-a60: #00000099; - --base-overlay-background-a70: #000000b3; - --base-overlay-background-a80: #000000cc; - --base-overlay-background-a90: #000000e6; - --base-shadow-color-a10: #0000001a; - --base-shadow-color-a20: #00000033; - --base-shadow-color-a25: #00000040; - --base-shadow-color-a30: #0000004d; - --base-shadow-color-a35: #00000059; - --base-shadow-color-a40: #00000066; - --base-shadow-color-a45: #00000073; - --base-shadow-color-a60: #00000099; - --base-shadow-color-a65: #000000a6; - --base-shadow-color-a75: #000000bf; - --base-shadow-color-a80: #000000cc; - --base-shadow-color-a85: #000000d9; - --black-a45: #00000073; - --black-a65: #000000a6; - --black-a85: #000000d9; - --black-a90: #000000e6; - --darker-text-color-a15: #9baec826; - --darker-text-color-a30: #9baec84d; - --dark-text-color-a10: #6069841a; - --error-red-a50: #df405a80; - --error-value-color-a10: #df405a1a; - --error-value-color-a50: #df405a80; - --gold-star-a15: #ca8f0426; - --gold-star-a25: #ca8f0440; - --gold-star-a30: #ca8f044d; - --gold-star-a50: #ca8f0480; - --highlight-text-color-a15: #8c8dff26; - --highlight-text-color-a25: #8c8dff40; - --highlight-text-color-a30: #8c8dff4d; - --highlight-text-color-a40: #8c8dff66; - --lighter-text-color-a15: #60698426; - --lighter-text-color-a30: #6069844d; - --primary-text-color-a70: #ffffffb3; - --primary-text-color-a80: #ffffffcc; - --success-green-a10: #79bd9a1a; - --success-green-a50: #79bd9a80; - --ui-base-color-a0: #282c3700; - --ui-base-color-a15: #282c3726; - --ui-base-color-a25: #282c3740; - --ui-base-color-a30: #282c374d; - --ui-base-color-a85: #282c37d9; - --ui-base-color-a100: #282c37; - --ui-base-lighter-color-a60: #60698499; - --ui-highlight-color-a0: #6364ff00; - --ui-highlight-color-a10: #6364ff1a; - --ui-highlight-color-a15: #6364ff26; - --ui-highlight-color-a23: #6364ff3b; - --ui-highlight-color-a40: #6364ff66; - --ui-highlight-color-a50: #6364ff80; - --ui-secondary-color-a10: #d9e1e81a; - --ui-secondary-color-a30: #d9e1e84d; - --ui-secondary-color-a40: #d9e1e866; - --ui-secondary-color-a50: #d9e1e880; - --ui-secondary-color-a70: #d9e1e8b3; - --valid-value-color-a25: #79bd9a40; - --valid-value-color-a50: #79bd9a80; - --warning-red-a15: #ff505026; - --white-a15: #ffffff26; - --white-a20: #ffffff33; - --white-a30: #ffffff4d; - --white-a35: #ffffff59; - --white-a70: #ffffffb3; - --white-a75: #ffffffbf; - --white-a80: #ffffffcc; - --mix-ui-base-highlight-95: #2b2f41; - --mix-white-highlight-80: #e0e0ff; - --mix-ui-base-lighten4-highlight-95: #33384c; - --mix-ui-base-lighten8-highlight-95: #3b4157; - --mix-ui-base-lighten12-highlight-80: #484e7b; - --font-sans-serif: 'mastodon-font-sans-serif'; - --font-display: 'mastodon-font-display'; - --font-monospace: 'mastodon-font-monospace'; - --no-gap-breakpoint: 1175px; - --media-modal-media-max-width: 100%; - --media-modal-media-max-height: 80%; - --ui-avatar-border-size: 8%; - --dismiss-overlay-width: 4rem; -} diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 77c52d7b053fc7ebbfa7ad0813331ce056692afa..89b990bc8fcb0d6b6cba04bbd6beeaa55432f9bf 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -1,104 +1,242 @@ -// Commonly used web colors -$black: #000000; // Black -$white: #ffffff; // White -$red-600: #b7253d !default; // Deep Carmine -$red-500: #df405a !default; // Cerise -$blurple-600: #563acc; // Iris -$blurple-500: #6364ff; // Brand purple -$blurple-300: #858afa; // Faded Blue -$grey-600: #4e4c5a; // Trout -$grey-100: #dadaf3; // Topaz - -$success-green: #79bd9a !default; // Padua -$error-red: $red-500 !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: #6364ff; // Brand purple - -// 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; -$ui-button-color: $white !default; -$ui-button-background-color: $blurple-500 !default; -$ui-button-focus-background-color: $blurple-600 !default; - -$ui-button-secondary-color: $grey-100 !default; -$ui-button-secondary-border-color: $grey-100 !default; -$ui-button-secondary-focus-background-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; - -$ui-button-tertiary-color: $blurple-300 !default; -$ui-button-tertiary-border-color: $blurple-300 !default; -$ui-button-tertiary-focus-background-color: $blurple-600 !default; -$ui-button-tertiary-focus-color: $white !default; - -$ui-button-destructive-background-color: $red-500 !default; -$ui-button-destructive-focus-background-color: $red-600 !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: lighten($ui-highlight-color, 8%) !default; -$action-button-color: $ui-base-lighter-color !default; -$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; -$passive-text-color: $gold-star !default; -$active-passive-text-color: $success-green !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; - -// 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: 1175px; - -$font-sans-serif: 'mastodon-font-sans-serif' !default; -$font-display: 'mastodon-font-display' !default; -$font-monospace: 'mastodon-font-monospace' !default; - -// Avatar border size (8% default, 100% for rounded avatars) -$ui-avatar-border-size: 8%; - -// More variables -$dismiss-overlay-width: 4rem; - :root { - --dropdown-border-color: #{lighten($ui-base-color, 12%)}; - --dropdown-background-color: #{lighten($ui-base-color, 4%)}; - --dropdown-shadow: - 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, - 0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; - --modal-background-color: #{darken($ui-base-color, 4%)}; - --modal-border-color: #{lighten($ui-base-color, 4%)}; + --black: #000000; + --white: #ffffff; + --red-600: #b7253d; + --red-500: #df405a; + --blurple-600: #563acc; + --blurple-500: #6364ff; + --blurple-300: #858afa; + --grey-600: #4e4c5a; + --grey-100: #dadaf3; + --success-green: #79bd9a; + --error-red: #df405a; + --warning-red: #ff5050; + --gold-star: #ca8f04; + --red-bookmark: #ff5050; + --classic-base-color: #282c37; + --classic-primary-color: #9baec8; + --classic-secondary-color: #d9e1e8; + --classic-highlight-color: #6364ff; + --base-shadow-color: #000000; + --base-overlay-background: #000000; + --base-border-color: #ffffff; + --simple-background-color: #ffffff; + --valid-value-color: #79bd9a; + --error-value-color: #df405a; + --ui-base-color: #282c37; + --ui-base-lighter-color: #606984; + --ui-primary-color: #9baec8; + --ui-secondary-color: #d9e1e8; + --ui-highlight-color: #6364ff; + --ui-button-color: #ffffff; + --ui-button-background-color: #6364ff; + --ui-button-focus-background-color: #563acc; + --ui-button-secondary-color: #dadaf3; + --ui-button-secondary-border-color: #dadaf3; + --ui-button-secondary-focus-background-color: #4e4c5a; + --ui-button-secondary-focus-color: #ffffff; + --ui-button-tertiary-color: #858afa; + --ui-button-tertiary-border-color: #858afa; + --ui-button-tertiary-focus-background-color: #563acc; + --ui-button-tertiary-focus-color: #ffffff; + --ui-button-destructive-background-color: #df405a; + --ui-button-destructive-focus-background-color: #b7253d; + --primary-text-color: #ffffff; + --darker-text-color: #9baec8; + --dark-text-color: #606984; + --secondary-text-color: #d9e1e8; + --highlight-text-color: #8c8dff; + --action-button-color: #606984; + --action-button-focus-color: #687390; + --passive-text-color: #ca8f04; + --active-passive-text-color: #79bd9a; + --inverted-text-color: #282c37; + --lighter-text-color: #606984; + --light-text-color: #9baec8; + --action-button-color-lighten-7: #707b97; + --action-button-color-lighten-13: #828ba4; + --darker-text-color-lighten-4: #a8b9cf; + --darker-text-color-lighten-7: #b2c1d5; + --darker-text-color-lighten-8: #b5c3d6; + --darker-text-color-lighten-10: #bcc9da; + --dark-text-color-lighten-4: #687390; + --dark-text-color-lighten-7: #707b97; + --error-red-lighten-4: #e25169; + --error-red-lighten-12: #e87487; + --error-value-color-lighten-12: #e87487; + --gold-star-lighten-6: #e8a405; + --gold-star-lighten-16: #fbbb25; + --highlight-text-color-lighten-4: #a0a1ff; + --highlight-text-color-lighten-6: #aaabff; + --highlight-text-color-lighten-8: #b5b5ff; + --highlight-text-color-lighten-13: #ceceff; + --inverted-text-color-lighten-4: #313543; + --inverted-text-color-lighten-10: #3d4455; + --inverted-text-color-lighten-15: #484f63; + --inverted-text-color-lighten-16: #4a5266; + --lighter-text-color-lighten-7: #707b97; + --lighter-text-color-lighten-20: #979eb3; + --secondary-text-color-lighten-4: #e6ebf0; + --secondary-text-color-lighten-7: #eff3f5; + --secondary-text-color-lighten-8: #f2f5f7; + --ui-base-color-lighten-2: #2c313d; + --ui-base-color-lighten-3: #2e3340; + --ui-base-color-lighten-4: #313543; + --ui-base-color-lighten-5: #333846; + --ui-base-color-lighten-6: #353a49; + --ui-base-color-lighten-8: #393f4f; + --ui-base-color-lighten-11: #404657; + --ui-base-color-lighten-12: #42485a; + --ui-base-color-lighten-13: #444b5d; + --ui-base-color-lighten-14: #464d60; + --ui-base-color-lighten-16: #4a5266; + --ui-base-color-lighten-18: #4f576c; + --ui-base-color-lighten-20: #535b72; + --ui-base-color-lighten-26: #606984; + --ui-base-color-lighten-27: #626c87; + --ui-base-color-lighten-29: #66718d; + --ui-base-color-lighten-30: #687390; + --ui-base-color-lighten-33: #707b97; + --ui-base-color-lighten-34: #737d99; + --ui-base-color-lighten-50: #a2a9bc; + --ui-base-lighter-color-lighten-4: #687390; + --ui-base-lighter-color-lighten-7: #707b97; + --ui-highlight-color-lighten-4: #7778ff; + --ui-highlight-color-lighten-8: #8c8dff; + --ui-highlight-color-lighten-10: #9697ff; + --ui-highlight-color-lighten-12: #a0a1ff; + --ui-primary-color-lighten-8: #b5c3d6; + --ui-primary-color-lighten-12: #c2cede; + --ui-primary-color-lighten-20: #dde3ec; + --ui-secondary-color-lighten-6: #ecf0f4; + --ui-secondary-color-lighten-8: #f2f5f7; + --valid-value-color-lighten-8: #94caaf; + --valid-value-color-lighten-15: #acd6c1; + --warning-red-lighten-12: #ff8d8d; + --white-lighten-4: #ffffff; + --white-lighten-7: #ffffff; + --action-button-color-darken-13: #444b5d; + --darker-text-color-darken-13: #708bb0; + --highlight-text-color-darken-4: #7778ff; + --lighter-text-color-darken-4: #576078; + --lighter-text-color-darken-7: #51596f; + --simple-background-color-darken-2: #fafafa; + --simple-background-color-darken-8: #ebebeb; + --simple-background-color-darken-14: #dbdbdb; + --simple-background-color-darken-24: #c2c2c2; + --ui-base-color-darken-2: #242731; + --ui-base-color-darken-4: #1f232b; + --ui-base-color-darken-5: #1d2028; + --ui-base-color-darken-6: #1b1e25; + --ui-base-color-darken-7: #191b22; + --ui-base-color-darken-8: #17191f; + --ui-base-color-darken-10: #131419; + --ui-base-color-darken-12: #0e1014; + --ui-base-color-darken-13: #0c0d11; + --ui-base-color-darken-14: #0a0b0e; + --ui-base-color-darken-20: #000000; + --ui-highlight-color-darken-2: #595aff; + --ui-highlight-color-darken-3: #5455ff; + --ui-highlight-color-darken-5: #4a4bff; + --ui-highlight-color-darken-8: #3a3bff; + --ui-primary-color-darken-5: #8ba1bf; + --ui-primary-color-darken-14: #6d89af; + --ui-primary-color-darken-40: #364861; + --ui-secondary-color-darken-8: #c0cdd9; + --ui-secondary-color-darken-10: #b9c8d5; + --ui-secondary-color-darken-16: #a6b9c9; + --ui-secondary-color-darken-18: #a0b4c5; + --ui-secondary-color-darken-24: #8da5ba; + --action-button-color-a15: #60698426; + --action-button-color-a30: #6069844d; + --base-overlay-background-a0: #00000000; + --base-overlay-background-a10: #0000001a; + --base-overlay-background-a30: #0000004d; + --base-overlay-background-a50: #00000080; + --base-overlay-background-a60: #00000099; + --base-overlay-background-a70: #000000b3; + --base-overlay-background-a80: #000000cc; + --base-overlay-background-a90: #000000e6; + --base-shadow-color-a10: #0000001a; + --base-shadow-color-a20: #00000033; + --base-shadow-color-a25: #00000040; + --base-shadow-color-a30: #0000004d; + --base-shadow-color-a35: #00000059; + --base-shadow-color-a40: #00000066; + --base-shadow-color-a45: #00000073; + --base-shadow-color-a60: #00000099; + --base-shadow-color-a65: #000000a6; + --base-shadow-color-a75: #000000bf; + --base-shadow-color-a80: #000000cc; + --base-shadow-color-a85: #000000d9; + --black-a45: #00000073; + --black-a65: #000000a6; + --black-a85: #000000d9; + --black-a90: #000000e6; + --darker-text-color-a15: #9baec826; + --darker-text-color-a30: #9baec84d; + --dark-text-color-a10: #6069841a; + --error-red-a50: #df405a80; + --error-value-color-a10: #df405a1a; + --error-value-color-a50: #df405a80; + --gold-star-a15: #ca8f0426; + --gold-star-a25: #ca8f0440; + --gold-star-a30: #ca8f044d; + --gold-star-a50: #ca8f0480; + --highlight-text-color-a15: #8c8dff26; + --highlight-text-color-a25: #8c8dff40; + --highlight-text-color-a30: #8c8dff4d; + --highlight-text-color-a40: #8c8dff66; + --lighter-text-color-a15: #60698426; + --lighter-text-color-a30: #6069844d; + --primary-text-color-a70: #ffffffb3; + --primary-text-color-a80: #ffffffcc; + --success-green-a10: #79bd9a1a; + --success-green-a50: #79bd9a80; + --ui-base-color-a0: #282c3700; + --ui-base-color-a15: #282c3726; + --ui-base-color-a25: #282c3740; + --ui-base-color-a30: #282c374d; + --ui-base-color-a85: #282c37d9; + --ui-base-color-a100: #282c37; + --ui-base-lighter-color-a60: #60698499; + --ui-highlight-color-a0: #6364ff00; + --ui-highlight-color-a10: #6364ff1a; + --ui-highlight-color-a15: #6364ff26; + --ui-highlight-color-a23: #6364ff3b; + --ui-highlight-color-a40: #6364ff66; + --ui-highlight-color-a50: #6364ff80; + --ui-secondary-color-a10: #d9e1e81a; + --ui-secondary-color-a30: #d9e1e84d; + --ui-secondary-color-a40: #d9e1e866; + --ui-secondary-color-a50: #d9e1e880; + --ui-secondary-color-a70: #d9e1e8b3; + --valid-value-color-a25: #79bd9a40; + --valid-value-color-a50: #79bd9a80; + --warning-red-a15: #ff505026; + --white-a15: #ffffff26; + --white-a20: #ffffff33; + --white-a30: #ffffff4d; + --white-a35: #ffffff59; + --white-a70: #ffffffb3; + --white-a75: #ffffffbf; + --white-a80: #ffffffcc; + --mix-ui-base-highlight-95: #2b2f41; + --mix-white-highlight-80: #e0e0ff; + --mix-ui-base-lighten4-highlight-95: #33384c; + --mix-ui-base-lighten8-highlight-95: #3b4157; + --mix-ui-base-lighten12-highlight-80: #484e7b; + --font-sans-serif: 'mastodon-font-sans-serif'; + --font-display: 'mastodon-font-display'; + --font-monospace: 'mastodon-font-monospace'; + --no-gap-breakpoint: 1175px; + --media-modal-media-max-width: 100%; + --media-modal-media-max-height: 80%; + --ui-avatar-border-size: 8%; + --dismiss-overlay-width: 4rem; + --dropdown-border-color: #42485a; + --dropdown-background-color: #313543; + --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --modal-background-color: #1f232b; + --modal-border-color: #313543; }