Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: Dome/Masto:sass-upgrade
Branches Tags
Dome/Masto:main Dome/Masto:next Dome/Masto:features/display-name Dome/Masto:sass-upgrade Dome/Masto:sass-fixes Dome/Masto:name-change Dome/Masto:features/reduced-motion Dome/Masto:features/set-default-language Dome/Masto:new-css-setup Dome/Masto:features/focus-outline Dome/Masto:update-dependecy-min-css Dome/Masto:fix_multiple_menchie_wenchies
...
pull from: Dome/Masto:sass-fixes
Branches Tags
Dome/Masto:main Dome/Masto:next Dome/Masto:features/display-name Dome/Masto:sass-upgrade Dome/Masto:sass-fixes Dome/Masto:name-change Dome/Masto:features/reduced-motion Dome/Masto:features/set-default-language Dome/Masto:new-css-setup Dome/Masto:features/focus-outline Dome/Masto:update-dependecy-min-css Dome/Masto:fix_multiple_menchie_wenchies

6 Commits
sass-upgrade ... sass-fixes

Author SHA1 Message Date
Zoë Bijl 42542a1618 [refactor] replace sass variable with css variable 2025-10-17 00:54:35 +02:00
Zoë Bijl e6d9057e49 [chore] update mini-css-extract-plugin to 2.9.4 2025-10-17 00:52:48 +02:00
Zoë Bijl e4d1ab0063 [chore] update scss files for Dart Sass 2.0.0 2025-10-17 00:21:14 +02:00
Zoë Bijl ff91bfe260 [chore] lint 2025-10-16 23:10:23 +02:00
Zoë Bijl db7fd70ae2 [chore] update scss files for Dart Sass 2.0.0 
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

# Conflicts:
#	app/javascript/flavours/glitch/styles/basics.scss
 2025-10-16 23:10:23 +02:00
Zoë Bijl da628d9417 [chore] update login.scss for Dart Sass 2.0.0 
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

# Conflicts:
#	app/javascript/flavours/glitch/styles/login.scss
 2025-10-16 23:10:23 +02:00
61 changed files with 739 additions and 529 deletions
Expand all files Collapse all files
app/javascript/flavours/glitch/styles/_mixins.scss
+2
View File
@@ -1,3 +1,5 @@
@use "variables" as *;
@mixin avatar-radius() { @mixin avatar-radius() {
border-radius: $ui-avatar-border-size; border-radius: $ui-avatar-border-size;
background-position: 50%; background-position: 50%;
app/javascript/flavours/glitch/styles/about.scss
+5 -1
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$maximum-width: 1235px; $maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px; $fluid-breakpoint: $maximum-width + 20px;
@@ -26,7 +30,7 @@ $fluid-breakpoint: $maximum-width + 20px;
li { li {
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 1em 1.75em; padding: 1em 1.75em;
padding-inline-start: 3em; padding-inline-start: 3em;
font-weight: 500; font-weight: 500;
app/javascript/flavours/glitch/styles/accessibility.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
$emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange" $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
"end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign" "end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign"
"heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on" "heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on"
app/javascript/flavours/glitch/styles/accounts.scss
+25 -21
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.card { .card {
& > a { & > a {
display: block; display: block;
@@ -10,7 +14,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
} }
@@ -18,7 +22,7 @@
&__img { &__img {
height: 130px; height: 130px;
position: relative; position: relative;
background: darken($ui-base-color, 12%); background: color.adjust($ui-base-color, $lightness: -12%);
img { img {
display: block; display: block;
@@ -39,7 +43,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
.avatar { .avatar {
flex: 0 0 auto; flex: 0 0 auto;
@@ -57,7 +61,7 @@
border-radius: 4px; border-radius: 4px;
@include avatar-radius; @include avatar-radius;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
object-fit: cover; object-fit: cover;
} }
} }
@@ -149,7 +153,7 @@
.disabled { .disabled {
cursor: default; cursor: default;
color: lighten($inverted-text-color, 10%); color: color.adjust($inverted-text-color, $lightness: 10%);
} }
@media screen and (width <= 700px) { @media screen and (width <= 700px) {
@@ -215,22 +219,22 @@
} }
&.admin { &.admin {
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(lighten($error-red, 12%), 0.1); background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5); border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
} }
} }
.simple_form .not_recommended { .simple_form .not_recommended {
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(lighten($error-red, 12%), 0.1); background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5); border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
} }
.simple_form .glitch_only { .simple_form .glitch_only {
color: lighten($warning-red, 12%); color: color.adjust($warning-red, $lightness: 12%);
background-color: rgba(lighten($warning-red, 12%), 0.1); background-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.1);
border-color: rgba(lighten($warning-red, 12%), 0.5); border-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.5);
} }
.account__header__fields { .account__header__fields {
@@ -238,14 +242,14 @@
padding: 0; padding: 0;
margin: 15px -15px -15px; margin: 15px -15px -15px;
border: 0 none; border: 0 none;
border-top: 1px solid lighten($ui-base-color, 12%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
dl { dl {
display: flex; display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
} }
dt, dt,
@@ -264,7 +268,7 @@
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: $secondary-text-color; color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5); background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
} }
dd { dd {
@@ -333,7 +337,7 @@
} }
.batch-table__row--muted { .batch-table__row--muted {
color: lighten($ui-base-color, 26%); color: color.adjust($ui-base-color, $lightness: 26%);
} }
.batch-table__row--muted .pending-account__header, .batch-table__row--muted .pending-account__header,
@@ -342,7 +346,7 @@
&, &,
a, a,
strong { strong {
color: lighten($ui-base-color, 26%); color: color.adjust($ui-base-color, $lightness: 26%);
} }
} }
@@ -354,7 +358,7 @@
tbody td.accounts-table__extra, tbody td.accounts-table__extra,
&__count, &__count,
&__count small { &__count small {
color: lighten($ui-base-color, 26%); color: color.adjust($ui-base-color, $lightness: 26%);
} }
} }
app/javascript/flavours/glitch/styles/admin.scss
+44 -41
View File
@@ -1,4 +1,7 @@
@use "sass:color";
@use "sass:math"; @use "sass:math";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;
$sidebar-width: 240px; $sidebar-width: 240px;
@@ -31,8 +34,8 @@ $content-width: 840px;
&__toggle { &__toggle {
display: none; display: none;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
align-items: center; align-items: center;
&__logo { &__logo {
@@ -122,7 +125,7 @@ $content-width: 840px;
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
background-color: darken($ui-base-color, 5%); background-color: color.adjust($ui-base-color, $lightness: -5%);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color; transition-property: color, background-color;
} }
@@ -133,7 +136,7 @@ $content-width: 840px;
} }
ul { ul {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border-radius: 0 0 0 4px; border-radius: 0 0 0 4px;
margin: 0; margin: 0;
@@ -239,7 +242,7 @@ $content-width: 840px;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
&.selected { &.selected {
@@ -292,7 +295,7 @@ $content-width: 840px;
color: $darker-text-color; color: $darker-text-color;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
h6 { h6 {
@@ -393,7 +396,7 @@ $content-width: 840px;
ul a, ul a,
ul ul a { ul ul a {
border-radius: 0; border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
transition: none; transition: none;
&:hover { &:hover {
@@ -521,7 +524,7 @@ body,
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%); border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
} }
&.selected { &.selected {
@@ -692,7 +695,7 @@ body,
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color; background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: $darker-text-color;
@@ -712,7 +715,7 @@ body,
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
&__avatar { &__avatar {
@@ -766,7 +769,7 @@ a.inline-name-tag,
&.suspended { &.suspended {
.username { .username {
text-decoration: line-through; text-decoration: line-through;
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
} }
.avatar { .avatar {
@@ -806,7 +809,7 @@ a.name-tag,
} }
&.negative { &.negative {
border-left-color: lighten($error-red, 12%); border-left-color: color.adjust($error-red, $lightness: 12%);
} }
&.warning { &.warning {
@@ -871,7 +874,7 @@ a.name-tag,
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: lighten($darker-text-color, 8%); color: color.adjust($darker-text-color, $lightness: 8%);
} }
} }
@@ -885,10 +888,10 @@ a.name-tag,
&__item { &__item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%); border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
&:hover { &:hover {
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
} }
&__reported-by, &__reported-by,
@@ -960,7 +963,7 @@ a.name-tag,
.account__header__fields, .account__header__fields,
.account__header__content { .account__header__content {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
} }
@@ -997,7 +1000,7 @@ a.name-tag,
.filters-list__item { .filters-list__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
margin-top: 15px; margin-top: 15px;
} }
@@ -1008,13 +1011,13 @@ a.name-tag,
.announcements-list, .announcements-list,
.filters-list { .filters-list {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
&__item { &__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__title { &__title {
padding: 0 15px; padding: 0 15px;
@@ -1089,7 +1092,7 @@ a.name-tag,
&.expired { &.expired {
.expiration { .expiration {
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
} }
.permissions-list__item__icon { .permissions-list__item__icon {
@@ -1165,7 +1168,7 @@ a.name-tag,
.sparkline { .sparkline {
display: block; display: block;
text-decoration: none; text-decoration: none;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
position: relative; position: relative;
@@ -1228,7 +1231,7 @@ a.name-tag,
} }
path:last-child { path:last-child {
stroke: lighten($highlight-text-color, 6%) !important; stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
fill: none !important; fill: none !important;
} }
} }
@@ -1238,17 +1241,17 @@ a.sparkline {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: 6%);
} }
} }
.skeleton { .skeleton {
background-color: lighten($ui-base-color, 8%); background-color: color.adjust($ui-base-color, $lightness: 8%);
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
lighten($ui-base-color, 8%), color.adjust($ui-base-color, $lightness: 8%),
lighten($ui-base-color, 12%), color.adjust($ui-base-color, $lightness: 12%),
lighten($ui-base-color, 8%) color.adjust($ui-base-color, $lightness: 8%)
); );
background-size: 200px 100%; background-size: 200px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -1275,7 +1278,7 @@ a.sparkline {
} }
&__item { &__item {
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__key { &__key {
font-weight: 500; font-weight: 500;
@@ -1328,7 +1331,7 @@ a.sparkline {
&__category { &__category {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@@ -1356,7 +1359,7 @@ a.sparkline {
&__details { &__details {
&__item { &__item {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px 0; padding: 15px 0;
&:last-child { &:last-child {
@@ -1405,7 +1408,7 @@ a.sparkline {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
} }
} }
@@ -1423,7 +1426,7 @@ a.sparkline {
margin: 0; margin: 0;
width: 56px; width: 56px;
height: 56px; height: 56px;
background-color: darken($ui-base-color, 8%); background-color: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 8px; border-radius: 8px;
border: 1px solid $ui-base-color; border: 1px solid $ui-base-color;
} }
@@ -1542,7 +1545,7 @@ a.sparkline {
position: relative; position: relative;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
@@ -1556,7 +1559,7 @@ a.sparkline {
} }
&:hover { &:hover {
background-color: lighten($ui-base-color, 4%); background-color: color.adjust($ui-base-color, $lightness: 4%);
} }
&__avatar { &__avatar {
@@ -1634,13 +1637,13 @@ a.sparkline {
} }
.report-actions { .report-actions {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 18px; line-height: 18px;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@@ -1752,15 +1755,15 @@ a.sparkline {
&__statuses-list { &__statuses-list {
border-radius: 4px; border-radius: 4px;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
&__item { &__item {
padding: 16px; padding: 16px;
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@@ -1804,7 +1807,7 @@ a.sparkline {
flex: 0 0 auto; flex: 0 0 auto;
width: 4px; width: 4px;
height: 21px; height: 21px;
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
margin: 0 2px; margin: 0 2px;
border-radius: 2px; border-radius: 2px;
@@ -1876,7 +1879,7 @@ a.sparkline {
} }
.status { .status {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
background: $ui-base-color; background: $ui-base-color;
border-radius: 4px; border-radius: 4px;
} }
app/javascript/flavours/glitch/styles/basics.scss
+12 -6
View File
@@ -1,9 +1,15 @@
@use "sass:meta";
@use "sass:string";
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
@function hex-color($color) { @function hex-color($color) {
@if type-of($color) == "color" { @if meta.type-of($color) == "color" {
$color: str-slice(ie-hex-str($color), 4); $color: string.slice(color.ie-hex-str($color), 4);
} }
@return "%23" + unquote($color); @return "%23" + string.unquote($color);
} }
body { body {
@@ -109,7 +115,7 @@ body {
} }
&.embed { &.embed {
background: lighten($ui-base-color, 4%); background: color.scale($ui-base-color, $lightness: 4%);
margin: 0; margin: 0;
padding-bottom: 0; padding-bottom: 0;
@@ -122,7 +128,7 @@ body {
} }
&.admin { &.admin {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
padding: 0; padding: 0;
} }
@@ -206,7 +212,7 @@ button {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.7; line-height: 1.7;
color: lighten($error-red, 4%); color: color.adjust($error-red, $lightness: 4%);
text-align: center; text-align: center;
& > div { & > div {
app/javascript/flavours/glitch/styles/branding.scss
+2
View File
@@ -1,3 +1,5 @@
@use "variables" as *;
.logo { .logo {
color: $primary-text-color; color: $primary-text-color;
} }
app/javascript/flavours/glitch/styles/components/about.scss
+13 -9
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.image { .image {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -84,7 +88,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1.9; aspect-ratio: 1.9;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 8px; border-radius: 8px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -110,7 +114,7 @@
} }
&__meta { &__meta {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
@@ -126,7 +130,7 @@
width: 0; width: 0;
border: 0; border: 0;
border-style: solid; border-style: solid;
border-color: lighten($ui-base-color, 8%); border-color: color.adjust($ui-base-color, $lightness: 8%);
border-left-width: 1px; border-left-width: 1px;
min-height: calc(100% - 60px); min-height: calc(100% - 60px);
flex: 0 0 auto; flex: 0 0 auto;
@@ -231,7 +235,7 @@
line-height: 22px; line-height: 22px;
padding: 20px; padding: 20px;
border-radius: 4px; border-radius: 4px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
color: $highlight-text-color; color: $highlight-text-color;
cursor: pointer; cursor: pointer;
} }
@@ -241,7 +245,7 @@
} }
&__body { &__body {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-top: 0; border-top: 0;
padding: 20px; padding: 20px;
font-size: 15px; font-size: 15px;
@@ -251,18 +255,18 @@
&__domain-blocks { &__domain-blocks {
margin-top: 30px; margin-top: 30px;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
&__domain { &__domain {
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
padding: 10px; padding: 10px;
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
&:nth-child(2n) { &:nth-child(2n) {
background: darken($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: -2%);
} }
&:last-child { &:last-child {
app/javascript/flavours/glitch/styles/components/accounts.scss
+28 -24
View File
@@ -1,6 +1,10 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.account { .account {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@@ -165,7 +169,7 @@
.account__header__wrapper { .account__header__wrapper {
flex: 0 0 auto; flex: 0 0 auto;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
.account__disclaimer { .account__disclaimer {
@@ -203,8 +207,8 @@
} }
.account__action-bar { .account__action-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
line-height: 36px; line-height: 36px;
overflow: hidden; overflow: hidden;
flex: 0 0 auto; flex: 0 0 auto;
@@ -222,7 +226,7 @@
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
flex: 0 1 100%; flex: 0 1 100%;
border-inline-start: 1px solid lighten($ui-base-color, 8%); border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px 0; padding: 10px 0;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
@@ -278,7 +282,7 @@
padding: 8px 10px; padding: 8px 10px;
padding-inline-start: 68px; padding-inline-start: 68px;
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
min-height: 54px; min-height: 54px;
&__details { &__details {
@@ -324,9 +328,9 @@
.account--panel { .account--panel {
display: flex; display: flex;
gap: 5px; gap: 5px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
flex-direction: row; flex-direction: row;
padding: 5px; padding: 5px;
} }
@@ -481,9 +485,9 @@
.account__moved-note { .account__moved-note {
padding: 14px 10px; padding: 14px 10px;
padding-bottom: 16px; padding-bottom: 16px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&__message { &__message {
position: relative; position: relative;
@@ -563,7 +567,7 @@
overflow: hidden; overflow: hidden;
height: 145px; height: 145px;
position: relative; position: relative;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
img { img {
object-fit: cover; object-fit: cover;
@@ -576,9 +580,9 @@
&__bar { &__bar {
position: relative; position: relative;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
padding: 5px; padding: 5px;
border-bottom: 1px solid lighten($ui-base-color, 12%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
.avatar { .avatar {
display: block; display: block;
@@ -586,8 +590,8 @@
width: 94px; width: 94px;
.account__avatar { .account__avatar {
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
border: 2px solid lighten($ui-base-color, 4%); border: 2px solid color.adjust($ui-base-color, $lightness: 4%);
} }
} }
} }
@@ -707,10 +711,10 @@
.account__header__fields { .account__header__fields {
margin: 0; margin: 0;
border-top: 1px solid lighten($ui-base-color, 12%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
a { a {
color: lighten($ui-highlight-color, 8%); color: color.adjust($ui-highlight-color, $lightness: 8%);
} }
dl:first-child .verified { dl:first-child .verified {
@@ -753,8 +757,8 @@
flex-direction: column; flex-direction: column;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
border-top: 1px solid lighten($ui-base-color, 12%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
&__header { &__header {
display: flex; display: flex;
@@ -783,7 +787,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($darker-text-color, 7%); color: color.adjust($darker-text-color, $lightness: 7%);
background-color: rgba($darker-text-color, 0.15); background-color: rgba($darker-text-color, 0.15);
} }
@@ -792,7 +796,7 @@
} }
&[disabled] { &[disabled] {
color: darken($darker-text-color, 13%); color: color.adjust($darker-text-color, $lightness: -13%);
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
} }
@@ -837,7 +841,7 @@
.follow-request-banner, .follow-request-banner,
.account-memorial-banner { .account-memorial-banner {
padding: 20px; padding: 20px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
app/javascript/flavours/glitch/styles/components/announcements.scss
+12 -8
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.announcements__item__content { .announcements__item__content {
word-wrap: break-word; word-wrap: break-word;
overflow-y: auto; overflow-y: auto;
@@ -42,7 +46,7 @@
} }
.announcements { .announcements {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
font-size: 13px; font-size: 13px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@@ -126,7 +130,7 @@
&__item { &__item {
flex-shrink: 0; flex-shrink: 0;
background: lighten($ui-base-color, 12%); background: color.adjust($ui-base-color, $lightness: 12%);
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
margin: 2px; margin: 2px;
@@ -169,26 +173,26 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 16%); background: color.adjust($ui-base-color, $lightness: 16%);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
&__count { &__count {
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
} }
} }
&.active { &.active {
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
background-color: mix( background-color: color.mix(
lighten($ui-base-color, 12%), color.adjust($ui-base-color, $lightness: 12%),
$ui-highlight-color, $ui-highlight-color,
80% 80%
); );
.reactions-bar__item__count { .reactions-bar__item__count {
color: lighten($highlight-text-color, 8%); color: color.adjust($highlight-text-color, $lightness: 8%);
} }
} }
} }
@@ -219,7 +223,7 @@
&:active, &:active,
&:focus { &:focus {
opacity: 1; opacity: 1;
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
} }
app/javascript/flavours/glitch/styles/components/boost.scss
+7 -3
View File
File diff suppressed because one or more lines are too long
app/javascript/flavours/glitch/styles/components/columns.scss
+30 -26
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.column__wrapper { .column__wrapper {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
@@ -108,7 +112,7 @@ $ui-header-height: 55px;
} }
.tabs-bar__wrapper { .tabs-bar__wrapper {
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
position: sticky; position: sticky;
top: $ui-header-height; top: $ui-header-height;
z-index: 2; z-index: 2;
@@ -170,7 +174,7 @@ $ui-header-height: 55px;
.column-back-button { .column-back-button {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
color: $highlight-text-color; color: $highlight-text-color;
cursor: pointer; cursor: pointer;
@@ -223,7 +227,7 @@ $ui-header-height: 55px;
} }
.column-link { .column-link {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
font-size: 16px; font-size: 16px;
@@ -235,7 +239,7 @@ $ui-header-height: 55px;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 11%); background: color.adjust($ui-base-color, $lightness: 11%);
} }
&:focus { &:focus {
@@ -327,7 +331,7 @@ $ui-header-height: 55px;
color: $darker-text-color; color: $darker-text-color;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
.column-header > button, .column-header > button,
@@ -374,7 +378,7 @@ $ui-header-height: 55px;
&:focus-visible, &:focus-visible,
&:hover, &:hover,
&.active { &.active {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
} }
&:active { &:active {
@@ -418,7 +422,7 @@ $ui-header-height: 55px;
&:hover, &:hover,
&.active { &.active {
color: inherit; color: inherit;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
} }
&:active { &:active {
@@ -516,7 +520,7 @@ $ui-header-height: 55px;
height: 0; height: 0;
background: transparent; background: transparent;
border: 0; border: 0;
border-top: 1px solid lighten($ui-base-color, 12%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
margin: 10px 0; margin: 10px 0;
} }
@@ -532,7 +536,7 @@ $ui-header-height: 55px;
} }
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
padding: 15px; padding: 15px;
} }
@@ -628,11 +632,11 @@ $ui-header-height: 55px;
&:not([disabled]) { &:not([disabled]) {
&:hover, &:hover,
&:focus { &:focus {
background-color: darken($ui-base-color, 10%); background-color: color.adjust($ui-base-color, $lightness: -10%);
} }
&.active { &.active {
background-color: darken($ui-highlight-color, 2%); background-color: color.adjust($ui-highlight-color, $lightness: -2%);
&:hover, &:hover,
&:focus { &:focus {
@@ -684,7 +688,7 @@ $ui-header-height: 55px;
} }
.follow_requests-unlocked_explanation { .follow_requests-unlocked_explanation {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
contain: initial; contain: initial;
flex-grow: 0; flex-grow: 0;
} }
@@ -740,7 +744,7 @@ $ui-header-height: 55px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
label { label {
flex: 1 1 auto; flex: 1 1 auto;
@@ -767,7 +771,7 @@ $ui-header-height: 55px;
} }
.column-settings__outer { .column-settings__outer {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
padding: 15px; padding: 15px;
} }
@@ -793,7 +797,7 @@ $ui-header-height: 55px;
@include search-input; @include search-input;
&::placeholder { &::placeholder {
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
} }
&::-moz-focus-inner { &::-moz-focus-inner {
@@ -807,7 +811,7 @@ $ui-header-height: 55px;
} }
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@@ -826,7 +830,7 @@ $ui-header-height: 55px;
} }
&__multi-value { &__multi-value {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
&__remove { &__remove {
cursor: pointer; cursor: pointer;
@@ -834,8 +838,8 @@ $ui-header-height: 55px;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 12%); background: color.adjust($ui-base-color, $lightness: 12%);
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
} }
} }
} }
@@ -855,12 +859,12 @@ $ui-header-height: 55px;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($dark-text-color, 4%); color: color.adjust($dark-text-color, $lightness: 4%);
} }
} }
&__indicator-separator { &__indicator-separator {
background-color: lighten($ui-base-color, 8%); background-color: color.adjust($ui-base-color, $lightness: 8%);
} }
&__menu { &__menu {
@@ -881,7 +885,7 @@ $ui-header-height: 55px;
&--is-focused, &--is-focused,
&--is-selected { &--is-selected {
background: darken($ui-secondary-color, 10%); background: color.adjust($ui-secondary-color, $lightness: -10%);
} }
} }
} }
@@ -895,7 +899,7 @@ $ui-header-height: 55px;
.notifications-permission-banner { .notifications-permission-banner {
padding: 30px; padding: 30px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -973,8 +977,8 @@ $ui-header-height: 55px;
.column-list { .column-list {
margin: 0 20px; margin: 0 20px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
background: darken($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: -2%);
border-radius: 4px; border-radius: 4px;
&__empty-message { &__empty-message {
@@ -1089,7 +1093,7 @@ $ui-header-height: 55px;
} }
.hashtag-header { .hashtag-header {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px; padding: 15px;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
app/javascript/flavours/glitch/styles/components/compose_form.scss
+10 -6
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.compose-form { .compose-form {
padding: 10px; padding: 10px;
@@ -307,7 +311,7 @@
&:focus, &:focus,
&:active, &:active,
&.selected { &.selected {
background: darken($ui-secondary-color, 10%); background: color.adjust($ui-secondary-color, $lightness: -10%);
} }
> .account, > .account,
@@ -398,7 +402,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($secondary-text-color, 7%); color: color.adjust($secondary-text-color, $lightness: 7%);
} }
} }
@@ -469,7 +473,7 @@
border-radius: 6px; border-radius: 6px;
width: 100%; width: 100%;
height: 6px; height: 6px;
background: darken($simple-background-color, 8%); background: color.adjust($simple-background-color, $lightness: -8%);
} }
.upload-progress__tracker { .upload-progress__tracker {
@@ -495,7 +499,7 @@
padding: 10px; padding: 10px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
color: $action-button-color; color: $action-button-color;
background: darken($simple-background-color, 8%); background: color.adjust($simple-background-color, $lightness: -8%);
} }
.compose-form__buttons { .compose-form__buttons {
@@ -605,7 +609,7 @@
} }
&.active:hover { &.active:hover {
background: lighten($ui-highlight-color, 4%); background: color.adjust($ui-highlight-color, $lightness: 4%);
} }
} }
@@ -687,7 +691,7 @@
} }
&:hover { &:hover {
background: lighten($ui-highlight-color, 4%); background: color.adjust($ui-highlight-color, $lightness: 4%);
} }
} }
} }
app/javascript/flavours/glitch/styles/components/directory.scss
+9 -5
View File
@@ -1,19 +1,23 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.scrollable .account-card { .scrollable .account-card {
margin: 10px; margin: 10px;
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
.scrollable .account-card__title__avatar { .scrollable .account-card__title__avatar {
img, img,
.account__avatar { .account__avatar {
border-color: lighten($ui-base-color, 8%); border-color: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
.scrollable .account-card__bio::after { .scrollable .account-card__bio::after {
background: linear-gradient( background: linear-gradient(
to left, to left,
lighten($ui-base-color, 8%), color.adjust($ui-base-color, $lightness: 8%),
transparent transparent
); );
} }
@@ -61,8 +65,8 @@
vertical-align: middle; vertical-align: middle;
&.checked { &.checked {
border-color: lighten($ui-highlight-color, 4%); border-color: color.adjust($ui-highlight-color, $lightness: 4%);
background: lighten($ui-highlight-color, 4%); background: color.adjust($ui-highlight-color, $lightness: 4%);
} }
} }
} }
app/javascript/flavours/glitch/styles/components/domains.scss
+4 -1
View File
@@ -1,6 +1,9 @@
@use "sass:color";
@use "../variables" as *;
.domain { .domain {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
.domain__domain-name { .domain__domain-name {
flex: 1 1 auto; flex: 1 1 auto;
app/javascript/flavours/glitch/styles/components/doodle.scss
+3
View File
@@ -1,3 +1,6 @@
@use "../mixins" as *;
@use "../variables" as *;
$doodle-background: #d9e1e8; $doodle-background: #d9e1e8;
.doodle-modal { .doodle-modal {
app/javascript/flavours/glitch/styles/components/drawer.scss
+13 -9
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.drawer { .drawer {
display: flex; display: flex;
gap: var(--size-layout-gap); gap: var(--size-layout-gap);
@@ -96,7 +100,7 @@
&:focus-visible, &:focus-visible,
&:hover, &:hover,
&.active { &.active {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
} }
} }
@@ -163,15 +167,15 @@
} }
.search-results__section { .search-results__section {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&__header { &__header {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px; padding: 15px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
@@ -212,7 +216,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($secondary-text-color, 4%); color: color.adjust($secondary-text-color, $lightness: 4%);
text-decoration: underline; text-decoration: underline;
} }
} }
@@ -249,7 +253,7 @@
} }
.drawer__inner__mastodon { .drawer__inner__mastodon {
background: lighten($ui-base-color, 4%) background: color.adjust($ui-base-color, $lightness: 4%)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>') url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
no-repeat bottom / 100% auto; no-repeat bottom / 100% auto;
flex: 1; flex: 1;
@@ -280,7 +284,7 @@
} }
.pseudo-drawer { .pseudo-drawer {
background: lighten($ui-base-color, 13%); background: color.adjust($ui-base-color, $lightness: 13%);
font-size: 13px; font-size: 13px;
text-align: start; text-align: start;
} }
@@ -304,7 +308,7 @@
bottom / bottom /
100% 100%
auto, auto,
lighten($ui-base-color, 4%); color.adjust($ui-base-color, $lightness: 4%);
} @else { } @else {
background: background:
url("~flavours/glitch/images/wave-drawer-glitched.png") url("~flavours/glitch/images/wave-drawer-glitched.png")
@@ -312,7 +316,7 @@
bottom / bottom /
100% 100%
auto, auto,
lighten($ui-base-color, 4%); color.adjust($ui-base-color, $lightness: 4%);
} }
& > .mastodon { & > .mastodon {
app/javascript/flavours/glitch/styles/components/emoji.scss
+3
View File
@@ -1,3 +1,6 @@
@use "../mixins" as *;
@use "../variables" as *;
.emojione { .emojione {
font-size: inherit; font-size: inherit;
vertical-align: middle; vertical-align: middle;
app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+8 -4
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.emoji-mart { .emoji-mart {
&, &,
* { * {
@@ -15,7 +19,7 @@
} }
.emoji-mart-bar { .emoji-mart-bar {
border: 0 solid darken($ui-secondary-color, 8%); border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%);
&:first-child { &:first-child {
border-bottom-width: 1px; border-bottom-width: 1px;
@@ -52,7 +56,7 @@
border: 0; border: 0;
&:hover { &:hover {
color: darken($lighter-text-color, 4%); color: color.adjust($lighter-text-color, $lightness: -4%);
} }
} }
@@ -60,7 +64,7 @@
color: $highlight-text-color; color: $highlight-text-color;
&:hover { &:hover {
color: darken($highlight-text-color, 4%); color: color.adjust($highlight-text-color, $lightness: -4%);
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
@@ -74,7 +78,7 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: darken($ui-highlight-color, 3%); background-color: color.adjust($ui-highlight-color, $lightness: -3%);
} }
.emoji-mart-anchors { .emoji-mart-anchors {
app/javascript/flavours/glitch/styles/components/explore.scss
+8 -4
View File
@@ -1,9 +1,13 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.account-card__header { .account-card__header {
position: relative; position: relative;
} }
.explore__search-header { .explore__search-header {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
@@ -14,12 +18,12 @@
} }
.search__input { .search__input {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px; padding: 10px;
} }
.search__popout { .search__popout {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.search .fa { .search .fa {
@@ -45,7 +49,7 @@
color: $primary-text-color; color: $primary-text-color;
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
gap: 15px; gap: 15px;
&:last-child { &:last-child {
app/javascript/flavours/glitch/styles/components/index.scss
+26 -26
View File
@@ -1,26 +1,26 @@
@import "misc"; @use "misc";
@import "boost"; @use "boost";
@import "accounts"; @use "accounts";
@import "domains"; @use "domains";
@import "status"; @use "status";
@import "modal"; @use "modal";
@import "compose_form"; @use "compose_form";
@import "columns"; @use "columns";
@import "regeneration_indicator"; @use "regeneration_indicator";
@import "directory"; @use "directory";
@import "search"; @use "search";
@import "emoji"; @use "emoji";
@import "doodle"; @use "doodle";
@import "drawer"; @use "drawer";
@import "media"; @use "media";
@import "sensitive"; @use "sensitive";
@import "lists"; @use "lists";
@import "emoji_picker"; @use "emoji_picker";
@import "local_settings"; @use "local_settings";
@import "single_column"; @use "single_column";
@import "announcements"; @use "announcements";
@import "explore"; @use "explore";
@import "scrollbars"; @use "scrollbars";
@import "signed_out"; @use "signed_out";
@import "privacy_policy"; @use "privacy_policy";
@import "about"; @use "about";
app/javascript/flavours/glitch/styles/components/lists.scss
+8 -4
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.list-editor { .list-editor {
background: $ui-base-color; background: $ui-base-color;
flex-direction: column; flex-direction: column;
@@ -12,7 +16,7 @@
h4 { h4 {
padding: 15px 0; padding: 15px 0;
background: lighten($ui-base-color, 13%); background: color.adjust($ui-base-color, $lightness: 13%);
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
@@ -65,11 +69,11 @@
} }
&__account { &__account {
background: lighten($ui-base-color, 13%); background: color.adjust($ui-base-color, $lightness: 13%);
} }
&__lists { &__lists {
background: lighten($ui-base-color, 13%); background: color.adjust($ui-base-color, $lightness: 13%);
height: 50vh; height: 50vh;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
overflow-y: auto; overflow-y: auto;
@@ -77,7 +81,7 @@
.list { .list {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.list__wrapper { .list__wrapper {
app/javascript/flavours/glitch/styles/components/local_settings.scss
+6 -2
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.glitch.local-settings { .glitch.local-settings {
position: relative; position: relative;
display: flex; display: flex;
@@ -64,7 +68,7 @@
font-size: inherit; font-size: inherit;
text-align: start; text-align: start;
text-decoration: none; text-decoration: none;
background: lighten($ui-secondary-color, 8%); background: color.adjust($ui-secondary-color, $lightness: 8%);
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
@@ -91,7 +95,7 @@
} }
.glitch.local-settings__navigation { .glitch.local-settings__navigation {
background: lighten($ui-secondary-color, 8%); background: color.adjust($ui-secondary-color, $lightness: 8%);
width: 212px; width: 212px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
app/javascript/flavours/glitch/styles/components/media.scss
+11 -7
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.video-error-cover { .video-error-cover {
align-items: center; align-items: center;
background: $base-overlay-background; background: $base-overlay-background;
@@ -23,7 +27,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($darker-text-color, 8%); color: color.adjust($darker-text-color, $lightness: 8%);
} }
.status__content > & { .status__content > & {
@@ -385,7 +389,7 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 4px; border-radius: 4px;
padding-bottom: 44px; padding-bottom: 44px;
width: 100%; width: 100%;
@@ -554,7 +558,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($darker-text-color, 7%); color: color.adjust($darker-text-color, $lightness: 7%);
} }
} }
@@ -690,7 +694,7 @@
inset-inline-start: 0; inset-inline-start: 0;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%); background: color.adjust($ui-highlight-color, $lightness: 8%);
} }
&__handle { &__handle {
@@ -703,7 +707,7 @@
inset-inline-start: 0; inset-inline-start: 0;
margin-inline-start: -6px; margin-inline-start: -6px;
transform: translate(0, -50%); transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%); background: color.adjust($ui-highlight-color, $lightness: 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
opacity: 0; opacity: 0;
@@ -757,7 +761,7 @@
height: 4px; height: 4px;
border-radius: 4px; border-radius: 4px;
top: 14px; top: 14px;
background: lighten($ui-highlight-color, 8%); background: color.adjust($ui-highlight-color, $lightness: 8%);
} }
&__buffer { &__buffer {
@@ -773,7 +777,7 @@
height: 12px; height: 12px;
top: 10px; top: 10px;
margin-inline-start: -6px; margin-inline-start: -6px;
background: lighten($ui-highlight-color, 8%); background: color.adjust($ui-highlight-color, $lightness: 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
.no-reduce-motion & { .no-reduce-motion & {
app/javascript/flavours/glitch/styles/components/misc.scss
+33 -29
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.app-body { .app-body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -169,7 +173,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus-visible { &:focus-visible {
color: lighten($action-button-color, 7%); color: color.adjust($action-button-color, $lightness: 7%);
background-color: rgba($action-button-color, 0.15); background-color: rgba($action-button-color, 0.15);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
@@ -214,7 +218,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus-visible { &:focus-visible {
color: darken($lighter-text-color, 7%); color: color.adjust($lighter-text-color, $lightness: -7%);
background-color: rgba($lighter-text-color, 0.15); background-color: rgba($lighter-text-color, 0.15);
} }
@@ -230,7 +234,7 @@
color: $highlight-text-color; color: $highlight-text-color;
&.disabled { &.disabled {
color: lighten($highlight-text-color, 13%); color: color.adjust($highlight-text-color, $lightness: 13%);
} }
} }
} }
@@ -288,7 +292,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus-visible { &:focus-visible {
color: darken($lighter-text-color, 7%); color: color.adjust($lighter-text-color, $lightness: -7%);
background-color: rgba($lighter-text-color, 0.15); background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
@@ -299,7 +303,7 @@
} }
&.disabled { &.disabled {
color: lighten($lighter-text-color, 20%); color: color.adjust($lighter-text-color, $lightness: 20%);
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
} }
@@ -701,7 +705,7 @@ body > [data-popper-placement] {
.tabs-bar { .tabs-bar {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
} }
@@ -716,7 +720,7 @@ body > [data-popper-placement] {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid lighten($ui-base-color, 8%); border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 8%);
transition: all 50ms linear; transition: all 50ms linear;
transition-property: border-bottom, background, color; transition-property: border-bottom, background, color;
@@ -729,8 +733,8 @@ body > [data-popper-placement] {
&:focus, &:focus,
&:active { &:active {
@include multi-columns("screen and (min-width: 631px)") { @include multi-columns("screen and (min-width: 631px)") {
background: lighten($ui-base-color, 14%); background: color.adjust($ui-base-color, $lightness: 14%);
border-bottom-color: lighten($ui-base-color, 14%); border-bottom-color: color.adjust($ui-base-color, $lightness: 14%);
} }
} }
@@ -758,7 +762,7 @@ body > [data-popper-placement] {
inset-inline-start: 9px; inset-inline-start: 9px;
top: -13px; top: -13px;
background: $ui-highlight-color; background: $ui-highlight-color;
border: 2px solid lighten($ui-base-color, 8%); border: 2px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 1px 6px; padding: 1px 6px;
border-radius: 6px; border-radius: 6px;
font-size: 10px; font-size: 10px;
@@ -780,7 +784,7 @@ body > [data-popper-placement] {
} }
.column-link--transparent .icon-with-badge__badge { .column-link--transparent .icon-with-badge__badge {
border-color: darken($ui-base-color, 8%); border-color: color.adjust($ui-base-color, $lightness: -8%);
} }
.scrollable { .scrollable {
@@ -861,11 +865,11 @@ body > [data-popper-placement] {
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
.react-toggle-track { .react-toggle-track {
background-color: darken($ui-base-color, 10%); background-color: color.adjust($ui-base-color, $lightness: -10%);
} }
.react-toggle--checked .react-toggle-track { .react-toggle--checked .react-toggle-track {
background-color: darken($ui-highlight-color, 2%); background-color: color.adjust($ui-highlight-color, $lightness: -2%);
} }
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
@@ -918,7 +922,7 @@ body > [data-popper-placement] {
height: 22px; height: 22px;
border: 1px solid $ui-base-color; border: 1px solid $ui-base-color;
border-radius: 50%; border-radius: 50%;
background-color: darken($simple-background-color, 2%); background-color: color.adjust($simple-background-color, $lightness: -2%);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left; transition-property: border-color, left;
@@ -963,7 +967,7 @@ body > [data-popper-placement] {
margin-top: 10px; margin-top: 10px;
h4 { h4 {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
@@ -1029,8 +1033,8 @@ body > [data-popper-placement] {
kbd { kbd {
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 3px 5px;
background-color: lighten($ui-base-color, 8%); background-color: color.adjust($ui-base-color, $lightness: 8%);
border: 1px solid darken($ui-base-color, 4%); border: 1px solid color.adjust($ui-base-color, $lightness: -4%);
} }
} }
@@ -1059,7 +1063,7 @@ body > [data-popper-placement] {
&.light { &.light {
color: $inverted-text-color; color: $inverted-text-color;
border-bottom: 2px solid lighten($ui-base-color, 27%); border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 27%);
&:focus, &:focus,
&:active { &:active {
@@ -1093,7 +1097,7 @@ button.icon-button.active i.fa-retweet {
} }
.reduce-motion button.icon-button.disabled i.fa-retweet { .reduce-motion button.icon-button.disabled i.fa-retweet {
color: darken($action-button-color, 13%); color: color.adjust($action-button-color, $lightness: -13%);
} }
.load-more { .load-more {
@@ -1112,12 +1116,12 @@ button.icon-button.active i.fa-retweet {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
} }
} }
.load-gap { .load-gap {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.timeline-hint { .timeline-hint {
@@ -1140,7 +1144,7 @@ button.icon-button.active i.fa-retweet {
&:focus, &:focus,
&:active { &:active {
text-decoration: underline; text-decoration: underline;
color: lighten($highlight-text-color, 4%); color: color.adjust($highlight-text-color, $lightness: 4%);
} }
} }
} }
@@ -1177,8 +1181,8 @@ button.icon-button.active i.fa-retweet {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
border-inline-start: 1px solid lighten($ui-base-color, 20%); border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%);
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
border-bottom: 1px solid $ui-base-color; border-bottom: 1px solid $ui-base-color;
} }
@@ -1232,7 +1236,7 @@ button.icon-button.active i.fa-retweet {
} }
.circular-progress { .circular-progress {
color: lighten($ui-base-color, 26%); color: color.adjust($ui-base-color, $lightness: 26%);
animation: 1.4s linear 0s infinite normal none running simple-rotate; animation: 1.4s linear 0s infinite normal none running simple-rotate;
circle { circle {
@@ -1524,12 +1528,12 @@ button.icon-button.active i.fa-retweet {
.conversation { .conversation {
display: flex; display: flex;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 5px; padding: 5px;
padding-bottom: 0; padding-bottom: 0;
&:focus { &:focus {
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
outline: 0; outline: 0;
} }
@@ -1597,10 +1601,10 @@ button.icon-button.active i.fa-retweet {
} }
&--unread { &--unread {
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
.conversation__content__info { .conversation__content__info {
app/javascript/flavours/glitch/styles/components/modal.scss
+32 -28
View File
@@ -1,5 +1,9 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.modal-container--preloader { .modal-container--preloader {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
.modal-root { .modal-root {
@@ -134,7 +138,7 @@
.onboarding-modal__paginator, .onboarding-modal__paginator,
.error-modal__footer { .error-modal__footer {
flex: 0 0 auto; flex: 0 0 auto;
background: darken($ui-secondary-color, 8%); background: color.adjust($ui-secondary-color, $lightness: -8%);
display: flex; display: flex;
padding: 25px; padding: 25px;
@@ -158,8 +162,8 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: darken($lighter-text-color, 4%); color: color.adjust($lighter-text-color, $lightness: -4%);
background-color: darken($ui-secondary-color, 16%); background-color: color.adjust($ui-secondary-color, $lightness: -16%);
} }
&.onboarding-modal__done, &.onboarding-modal__done,
@@ -169,7 +173,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($inverted-text-color, 4%); color: color.adjust($inverted-text-color, $lightness: 4%);
} }
} }
} }
@@ -190,17 +194,17 @@
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 14px; border-radius: 14px;
background: darken($ui-secondary-color, 16%); background: color.adjust($ui-secondary-color, $lightness: -16%);
margin: 0 3px; margin: 0 3px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: darken($ui-secondary-color, 18%); background: color.adjust($ui-secondary-color, $lightness: -18%);
} }
&.active { &.active {
cursor: default; cursor: default;
background: darken($ui-secondary-color, 24%); background: color.adjust($ui-secondary-color, $lightness: -24%);
} }
} }
@@ -231,7 +235,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($highlight-text-color, 4%); color: color.adjust($highlight-text-color, $lightness: 4%);
} }
} }
@@ -329,7 +333,7 @@
} }
.figure { .figure {
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
color: $secondary-text-color; color: $secondary-text-color;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 4px; border-radius: 4px;
@@ -421,7 +425,7 @@
.mute-modal, .mute-modal,
.block-modal, .block-modal,
.compare-history-modal { .compare-history-modal {
background: lighten($ui-secondary-color, 8%); background: color.adjust($ui-secondary-color, $lightness: 8%);
color: $inverted-text-color; color: $inverted-text-color;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -455,7 +459,7 @@
} }
.status__content__spoiler-link { .status__content__spoiler-link {
color: lighten($secondary-text-color, 8%); color: color.adjust($secondary-text-color, $lightness: 8%);
} }
} }
@@ -537,7 +541,7 @@
max-width: 90vw; max-width: 90vw;
width: 480px; width: 480px;
height: 80vh; height: 80vh;
background: lighten($ui-secondary-color, 8%); background: color.adjust($ui-secondary-color, $lightness: 8%);
color: $inverted-text-color; color: $inverted-text-color;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -577,7 +581,7 @@
&__lead { &__lead {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: lighten($inverted-text-color, 16%); color: color.adjust($inverted-text-color, $lightness: 16%);
margin-bottom: 30px; margin-bottom: 30px;
a { a {
@@ -620,7 +624,7 @@
background: $ui-primary-color; background: $ui-primary-color;
&:hover { &:hover {
background: lighten($ui-primary-color, 8%); background: color.adjust($ui-primary-color, $lightness: 8%);
} }
} }
@@ -639,7 +643,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: lighten($inverted-text-color, 15%); border-color: color.adjust($inverted-text-color, $lightness: 15%);
border-width: 4px; border-width: 4px;
} }
@@ -660,7 +664,7 @@
& > .poll__option__text { & > .poll__option__text {
font-size: 13px; font-size: 13px;
color: lighten($inverted-text-color, 16%); color: color.adjust($inverted-text-color, $lightness: 16%);
strong { strong {
font-size: 17px; font-size: 17px;
@@ -829,7 +833,7 @@
margin-bottom: 10px; margin-bottom: 10px;
&:focus { &:focus {
border: 1px solid darken($ui-secondary-color, 8%); border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%);
} }
&__wrapper { &__wrapper {
@@ -978,7 +982,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: darken($lighter-text-color, 4%); color: color.adjust($lighter-text-color, $lightness: -4%);
background-color: transparent; background-color: transparent;
} }
} }
@@ -1022,9 +1026,9 @@
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
@@ -1159,7 +1163,7 @@
} }
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@@ -1364,7 +1368,7 @@ img.modal-warning {
&__input { &__input {
@include search-input; @include search-input;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 4px 6px; padding: 4px 6px;
color: $primary-text-color; color: $primary-text-color;
font-size: 16px; font-size: 16px;
@@ -1381,7 +1385,7 @@ img.modal-warning {
flex: 1 1 auto; flex: 1 1 auto;
&::placeholder { &::placeholder {
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
} }
&:focus { &:focus {
@@ -1398,12 +1402,12 @@ img.modal-warning {
margin-top: -1px; margin-top: -1px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
&.focused &__input { &.focused &__input {
border-color: $highlight-text-color; border-color: $highlight-text-color;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
&.invalid &__input { &.invalid &__input {
@@ -1471,7 +1475,7 @@ img.modal-warning {
input { input {
display: block; display: block;
font-family: inherit; font-family: inherit;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
border: 1px solid $highlight-text-color; border: 1px solid $highlight-text-color;
color: $darker-text-color; color: $darker-text-color;
border-radius: 4px; border-radius: 4px;
@@ -1484,7 +1488,7 @@ img.modal-warning {
&:focus { &:focus {
outline: 0; outline: 0;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
} }
} }
app/javascript/flavours/glitch/styles/components/privacy_policy.scss
+6 -2
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.privacy-policy { .privacy-policy {
background: $ui-base-color; background: $ui-base-color;
padding: 20px; padding: 20px;
@@ -169,14 +173,14 @@
code { code {
font-size: 0.875em; font-size: 0.875em;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 4px; border-radius: 4px;
padding: 0.2em 0.3em; padding: 0.2em 0.3em;
} }
hr { hr {
border: 0; border: 0;
border-top: 1px solid lighten($ui-base-color, 4%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
margin-top: 3em; margin-top: 3em;
margin-bottom: 3em; margin-bottom: 3em;
} }
app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss
+3
View File
@@ -1,3 +1,6 @@
@use "../mixins" as *;
@use "../variables" as *;
.regeneration-indicator { .regeneration-indicator {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
app/javascript/flavours/glitch/styles/components/scrollbars.scss
+8 -4
View File
@@ -1,6 +1,10 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
/* Scrollbars */ /* Scrollbars */
html { html {
scrollbar-color: lighten($ui-base-color, 4%) scrollbar-color: color.adjust($ui-base-color, $lightness: 4%)
rgba($base-overlay-background, 0.1); rgba($base-overlay-background, 0.1);
} }
@@ -10,17 +14,17 @@ html {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border: 0 none $base-border-color; border: 0 none $base-border-color;
border-radius: 50px; border-radius: 50px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: lighten($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: 6%);
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
app/javascript/flavours/glitch/styles/components/search.scss
+22 -12
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.search { .search {
position: relative; position: relative;
} }
@@ -55,7 +59,7 @@
&:focus-visible, &:focus-visible,
&:hover { &:hover {
background: darken($ui-base-color, 10%); background: color.adjust($ui-base-color, $lightness: -10%);
} }
} }
@@ -168,7 +172,7 @@
color: $dark-text-color; color: $dark-text-color;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
cursor: default; cursor: default;
} }
@@ -181,8 +185,8 @@
.trends { .trends {
&__header { &__header {
color: $dark-text-color; color: $dark-text-color;
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
border-bottom: 1px solid darken($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%);
font-weight: 500; font-weight: 500;
padding: 15px; padding: 15px;
font-size: 16px; font-size: 16px;
@@ -198,7 +202,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
gap: 15px; gap: 15px;
&:last-child { &:last-child {
@@ -255,7 +259,7 @@
} }
path:last-child { path:last-child {
stroke: lighten($highlight-text-color, 6%) !important; stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
fill: none !important; fill: none !important;
} }
} }
@@ -279,31 +283,37 @@
} }
path:last-child { path:last-child {
stroke: lighten($gold-star, 6%) !important; stroke: color.adjust($gold-star, $lightness: 6%) !important;
} }
} }
} }
&--disabled { &--disabled {
.trends__item__name { .trends__item__name {
color: lighten($ui-base-color, 12%); color: color.adjust($ui-base-color, $lightness: 12%);
a { a {
color: lighten($ui-base-color, 12%); color: color.adjust($ui-base-color, $lightness: 12%);
} }
} }
.trends__item__current { .trends__item__current {
color: lighten($ui-base-color, 12%); color: color.adjust($ui-base-color, $lightness: 12%);
} }
.trends__item__sparkline { .trends__item__sparkline {
path:first-child { path:first-child {
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; fill: rgba(
color.adjust($ui-base-color, $lightness: 12%),
0.25
) !important;
} }
path:last-child { path:last-child {
stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; stroke: color.adjust(
color.adjust($ui-base-color, $lightness: 12%),
$lightness: 6%
) !important;
} }
} }
} }
app/javascript/flavours/glitch/styles/components/sensitive.scss
+2
View File
@@ -1,3 +1,5 @@
@use "../variables" as *;
.sensitive-info { .sensitive-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
app/javascript/flavours/glitch/styles/components/signed_out.scss
+5 -1
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
.sign-in-banner { .sign-in-banner {
padding: 10px; padding: 10px;
@@ -14,7 +18,7 @@
text-decoration: underline; text-decoration: underline;
.fa { .fa {
color: lighten($dark-text-color, 7%); color: color.adjust($dark-text-color, $lightness: 7%);
} }
} }
} }
app/javascript/flavours/glitch/styles/components/single_column.scss
+9 -3
View File
@@ -1,3 +1,8 @@
@use "sass:color";
@use "columns" as *;
@use "../mixins" as *;
@use "../variables" as *;
.compose-panel { .compose-panel {
width: 285px; width: 285px;
margin-top: 10px; margin-top: 10px;
@@ -78,7 +83,7 @@
flex: 0 0 auto; flex: 0 0 auto;
border: 0; border: 0;
background: transparent; background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
margin: 10px 0; margin: 10px 0;
} }
@@ -260,7 +265,8 @@
.navigation-panel { .navigation-panel {
margin: 0; margin: 0;
background: $ui-base-color; background: $ui-base-color;
border-inline-start: 1px solid lighten($ui-base-color, 8%); border-inline-start: 1px solid
color.adjust($ui-base-color, $lightness: 8%);
height: 100vh; height: 100vh;
} }
@@ -278,7 +284,7 @@
.layout-single-column .ui__header { .layout-single-column .ui__header {
display: flex; display: flex;
background: $ui-base-color; background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.layout-single-column { .layout-single-column {
app/javascript/flavours/glitch/styles/components/status.scss
+39 -35
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "../mixins" as *;
@use "../variables" as *;
@keyframes spring-flip-in { @keyframes spring-flip-in {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@@ -85,7 +89,7 @@
text-decoration: underline; text-decoration: underline;
.fa { .fa {
color: lighten($dark-text-color, 7%); color: color.adjust($dark-text-color, $lightness: 7%);
} }
} }
@@ -149,7 +153,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.notification-follow, .notification-follow,
@@ -157,7 +161,7 @@
position: relative; position: relative;
// same like Status // same like Status
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
.account { .account {
border-bottom: 0 none; border-bottom: 0 none;
@@ -167,7 +171,7 @@
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
&.status.status-direct.muted { &.status.status-direct.muted {
background: transparent; background: transparent;
@@ -175,7 +179,7 @@
.detailed-status, .detailed-status,
.detailed-status__action-bar { .detailed-status__action-bar {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
} }
@@ -187,7 +191,7 @@
padding: 15px; padding: 15px;
position: relative; position: relative;
height: auto; height: auto;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
cursor: auto; cursor: auto;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -215,9 +219,9 @@
} }
&.status-direct { &.status-direct {
--color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)}; --color-status-bg: #{color.mix($ui-base-color, $ui-highlight-color, 95%)};
border-bottom-color: lighten($ui-base-color, 12%); border-bottom-color: color.adjust($ui-base-color, $lightness: 12%);
} }
&.light { &.light {
@@ -249,7 +253,7 @@
background: $ui-primary-color; background: $ui-primary-color;
&:hover { &:hover {
background: lighten($ui-primary-color, 8%); background: color.adjust($ui-primary-color, $lightness: 8%);
} }
} }
} }
@@ -308,15 +312,15 @@
&:focus > .status__content::after { &:focus > .status__content::after {
background: linear-gradient( background: linear-gradient(
rgba(lighten($ui-base-color, 4%), 0), rgba(color.adjust($ui-base-color, $lightness: 4%), 0),
rgba(lighten($ui-base-color, 4%), 1) rgba(color.adjust($ui-base-color, $lightness: 4%), 1)
); );
} }
&.status-direct > .status__content::after { &.status-direct > .status__content::after {
background: linear-gradient( background: linear-gradient(
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0), rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0),
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1)
); );
} }
@@ -339,7 +343,7 @@
background: transparent; background: transparent;
.icon-button.disabled { .icon-button.disabled {
color: lighten($action-button-color, 13%); color: color.adjust($action-button-color, $lightness: 13%);
} }
} }
} }
@@ -380,7 +384,7 @@
padding: 0 10px; padding: 0 10px;
.detailed-status__display-name { .detailed-status__display-name {
color: lighten($inverted-text-color, 16%); color: color.adjust($inverted-text-color, $lightness: 16%);
span { span {
display: inline; display: inline;
@@ -446,9 +450,9 @@
} }
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
padding: 14px 10px; padding: 14px 10px;
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&--flex { &--flex {
display: flex; display: flex;
@@ -487,9 +491,9 @@
} }
.detailed-status__action-bar { .detailed-status__action-bar {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0; padding: 10px 0;
@@ -606,7 +610,7 @@ a.status__display-name,
&:hover, &:hover,
&:focus { &:focus {
background: lighten($ui-base-color, 29%); background: color.adjust($ui-base-color, $lightness: 29%);
text-decoration: none; text-decoration: none;
} }
} }
@@ -623,7 +627,7 @@ a.status__display-name,
position: relative; position: relative;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px; border-radius: 4px;
color: $dark-text-color; color: $dark-text-color;
margin-top: 14px; margin-top: 14px;
@@ -685,7 +689,7 @@ a.status-card {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
@@ -746,7 +750,7 @@ a.status-card {
.status-card__image { .status-card__image {
flex: 0 0 100px; flex: 0 0 100px;
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
position: relative; position: relative;
& > .fa { & > .fa {
@@ -777,7 +781,7 @@ a.status-card {
} }
.status-card.compact { .status-card.compact {
border-color: lighten($ui-base-color, 4%); border-color: color.adjust($ui-base-color, $lightness: 4%);
&.interactive { &.interactive {
border: 0; border: 0;
@@ -798,7 +802,7 @@ a.status-card {
} }
a.status-card.compact:hover { a.status-card.compact:hover {
background-color: lighten($ui-base-color, 4%); background-color: color.adjust($ui-base-color, $lightness: 4%);
} }
.status-card__image-image { .status-card__image-image {
@@ -833,7 +837,7 @@ a.status-card.compact:hover {
.attachment-list { .attachment-list {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; margin-top: 14px;
overflow: hidden; overflow: hidden;
@@ -843,7 +847,7 @@ a.status-card.compact:hover {
color: $dark-text-color; color: $dark-text-color;
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-inline-end: 1px solid lighten($ui-base-color, 8%); border-inline-end: 1px solid color.adjust($ui-base-color, $lightness: 8%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -896,7 +900,7 @@ a.status-card.compact:hover {
.status__wrapper--filtered__button { .status__wrapper--filtered__button {
display: inline; display: inline;
color: lighten($ui-highlight-color, 8%); color: color.adjust($ui-highlight-color, $lightness: 8%);
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
@@ -937,12 +941,12 @@ a.status-card.compact:hover {
} }
&--first-in-thread { &--first-in-thread {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
&__line { &__line {
height: 10px - 4px; height: 10px - 4px;
border-inline-start: 2px solid lighten($ui-base-color, 8%); border-inline-start: 2px solid color.adjust($ui-base-color, $lightness: 8%);
width: 0; width: 0;
position: absolute; position: absolute;
top: 0; top: 0;
@@ -988,7 +992,7 @@ a.status-card.compact:hover {
&__footer { &__footer {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
padding: 10px; padding: 10px;
padding-top: 12px; padding-top: 12px;
display: flex; display: flex;
@@ -997,7 +1001,7 @@ a.status-card.compact:hover {
&__header { &__header {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -1037,7 +1041,7 @@ a.status-card.compact:hover {
.picture-in-picture-placeholder { .picture-in-picture-placeholder {
box-sizing: border-box; box-sizing: border-box;
border: 2px dashed lighten($ui-base-color, 8%); border: 2px dashed color.adjust($ui-base-color, $lightness: 8%);
background: $base-shadow-color; background: $base-shadow-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1060,6 +1064,6 @@ a.status-card.compact:hover {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border-color: lighten($ui-base-color, 12%); border-color: color.adjust($ui-base-color, $lightness: 12%);
} }
} }
app/javascript/flavours/glitch/styles/containers.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
.container-alt { .container-alt {
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
app/javascript/flavours/glitch/styles/contrast.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import "contrast/variables"; @use "contrast/variables";
@import "index"; @use "index";
@import "contrast/diff"; @use "contrast/diff";
app/javascript/flavours/glitch/styles/contrast/variables.scss
+15 -7
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Dependent colors // Dependent colors
$black: #000000; $black: #000000;
@@ -11,12 +13,18 @@ $ui-primary-color: $classic-primary-color !default;
$ui-secondary-color: $classic-secondary-color !default; $ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default; $ui-highlight-color: $classic-highlight-color !default;
$darker-text-color: lighten($ui-primary-color, 20%) !default; $darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default;
$dark-text-color: lighten($ui-primary-color, 12%) !default; $dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default;
$secondary-text-color: lighten($ui-secondary-color, 6%) !default; $secondary-text-color: color.adjust(
$highlight-text-color: lighten($ui-highlight-color, 10%) !default; $ui-secondary-color,
$action-button-color: lighten($ui-base-color, 50%); $lightness: 6%
) !default;
$highlight-text-color: color.adjust(
$ui-highlight-color,
$lightness: 10%
) !default;
$action-button-color: color.adjust($ui-base-color, $lightness: 50%);
$inverted-text-color: $black !default; $inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color, 6%) !default; $lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default; $light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;
app/javascript/flavours/glitch/styles/dashboard.scss
+8 -4
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.dashboard__counters { .dashboard__counters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -13,7 +17,7 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@@ -27,7 +31,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
} }
@@ -99,12 +103,12 @@
} }
&.positive { &.positive {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
color: $valid-value-color; color: $valid-value-color;
} }
&.negative { &.negative {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
color: $error-value-color; color: $error-value-color;
} }
app/javascript/flavours/glitch/styles/forms.scss
+27 -23
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;
code { code {
@@ -164,7 +168,7 @@ code {
code { code {
border-radius: 3px; border-radius: 3px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
background: darken($ui-base-color, 12%); background: color.adjust($ui-base-color, $lightness: -12%);
} }
li { li {
@@ -292,7 +296,7 @@ code {
.required abbr { .required abbr {
text-decoration: none; text-decoration: none;
color: lighten($error-value-color, 12%); color: color.adjust($error-value-color, $lightness: 12%);
} }
.fields-group { .fields-group {
@@ -435,13 +439,13 @@ code {
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%); background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid darken($ui-base-color, 14%); border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
&::placeholder { &::placeholder {
color: lighten($darker-text-color, 4%); color: color.adjust($darker-text-color, $lightness: 4%);
} }
&:invalid { &:invalid {
@@ -453,13 +457,13 @@ code {
} }
&:hover { &:hover {
border-color: darken($ui-base-color, 20%); border-color: color.adjust($ui-base-color, $lightness: -20%);
} }
&:active, &:active,
&:focus { &:focus {
border-color: $highlight-text-color; border-color: $highlight-text-color;
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
} }
} }
@@ -470,13 +474,13 @@ code {
input[type="datetime-local"] { input[type="datetime-local"] {
&:focus:invalid:not(:placeholder-shown), &:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) { &:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%); border-color: color.adjust($error-red, $lightness: 12%);
} }
} }
.input.field_with_errors { .input.field_with_errors {
label { label {
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
} }
input[type="text"], input[type="text"],
@@ -486,13 +490,13 @@ code {
input[type="datetime-local"], input[type="datetime-local"],
textarea, textarea,
select { select {
border-color: lighten($error-red, 12%); border-color: color.adjust($error-red, $lightness: 12%);
} }
.error { .error {
display: block; display: block;
font-weight: 500; font-weight: 500;
color: lighten($error-red, 12%); color: color.adjust($error-red, $lightness: 12%);
margin-top: 4px; margin-top: 4px;
} }
} }
@@ -584,10 +588,10 @@ code {
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%) background: color.adjust($ui-base-color, $lightness: -10%)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
@@ -628,8 +632,8 @@ code {
width: 5px; width: 5px;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
rgba(darken($ui-base-color, 10%), 0), rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
darken($ui-base-color, 10%) color.adjust($ui-base-color, $lightness: -10%)
); );
} }
} }
@@ -644,7 +648,7 @@ code {
} }
.flash-message { .flash-message {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
color: $darker-text-color; color: $darker-text-color;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
@@ -725,7 +729,7 @@ code {
} }
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
} }
@@ -809,7 +813,7 @@ code {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($highlight-text-color, 8%); color: color.adjust($highlight-text-color, $lightness: 8%);
} }
} }
} }
@@ -855,7 +859,7 @@ code {
.permissions-list { .permissions-list {
border: 1px solid $ui-base-color; border: 1px solid $ui-base-color;
border-radius: 4px; border-radius: 4px;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -1005,8 +1009,8 @@ code {
} }
.input-copy { .input-copy {
background: darken($ui-base-color, 10%); background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid darken($ui-base-color, 14%); border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1067,7 +1071,7 @@ code {
&__item { &__item {
padding: 15px; padding: 15px;
color: $ui-secondary-color; color: $ui-secondary-color;
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
display: flex; display: flex;
align-items: center; align-items: center;
app/javascript/flavours/glitch/styles/gts.scss
+2
View File
@@ -1,3 +1,5 @@
@use "variables" as *;
/* 🦥 GoToSocial */ /* 🦥 GoToSocial */
/* Variables */ /* Variables */
app/javascript/flavours/glitch/styles/gts/_config.scss
+3 -3
View File
@@ -6,8 +6,8 @@
*/ */
/* 🛠️ Config */ /* 🛠️ Config */
@import "colors"; @use "colors";
@import "sizes"; @use "sizes";
/* 🧩 Components */ /* 🧩 Components */
@import "status"; @use "status";
app/javascript/flavours/glitch/styles/gts/status.scss
+6 -6
View File
@@ -1,10 +1,10 @@
/* 🚥 Status */ /* 🚥 Status */
@import "status/status-account"; @use "status/status-account";
@import "status/status-display-name"; @use "status/status-display-name";
@import "status/status-icons"; @use "status/status-icons";
@import "status/status-info"; @use "status/status-info";
@import "status/status-prepend"; @use "status/status-prepend";
@import "status/status-spoiler"; @use "status/status-spoiler";
.status { .status {
background-color: var(--color-status-bg); background-color: var(--color-status-bg);
app/javascript/flavours/glitch/styles/index.scss
+26 -26
View File
@@ -1,28 +1,28 @@
@import "mixins"; @use "mixins";
@import "variables"; @use "variables";
@import "styles/fonts/roboto"; @use "styles/fonts/roboto";
@import "styles/fonts/roboto-mono"; @use "styles/fonts/roboto-mono";
@import "reset"; @use "reset";
@import "basics"; @use "basics";
@import "branding"; @use "branding";
@import "containers"; @use "containers";
@import "lists"; @use "lists";
@import "modal"; @use "modal";
@import "widgets"; @use "widgets";
@import "forms"; @use "forms";
@import "accounts"; @use "accounts";
@import "statuses"; @use "statuses";
@import "components/index"; @use "components/index";
@import "polls"; @use "polls";
@import "about"; @use "about";
@import "tables"; @use "tables";
@import "admin"; @use "admin";
@import "accessibility"; @use "accessibility";
@import "rtl"; @use "rtl";
@import "dashboard"; @use "dashboard";
@import "rich_text"; @use "rich_text";
@import "gts"; @use "gts";
@import "gts/config"; @use "gts/config";
@import "tangerine/config"; @use "tangerine/config" as tangerine;
app/javascript/flavours/glitch/styles/login.scss
+6 -5
View File
@@ -1,5 +1,6 @@
@import "styles/fonts/roboto"; @use "sass:color";
@import "reset"; @use "styles/fonts/roboto";
@use "reset";
:root { :root {
--color-bg: #191b22; --color-bg: #191b22;
@@ -70,7 +71,7 @@ button:focus-visible {
button { button {
padding: 7px 10px; padding: 7px 10px;
border: 1px solid lighten(#66befe, 7%); border: 1px solid color.scale(#66befe, $lightness: 7%);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
color: #2a2b2f; color: #2a2b2f;
@@ -95,7 +96,7 @@ input[type="text"] {
display: block; display: block;
margin: 0; margin: 0;
padding: 15px; padding: 15px;
border: 1px solid lighten(#282c37, 7%); border: 1px solid color.scale(#282c37, $lightness: 7%);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: none; box-shadow: none;
@@ -109,7 +110,7 @@ input[type="text"] {
.content { .content {
padding: 15px; padding: 15px;
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten(#39404f, 7%); border: 1px solid color.scale(#39404f, $lightness: 7%);
color: #fff; color: #fff;
background-color: #39404f; background-color: #39404f;
} }
app/javascript/flavours/glitch/styles/mastodon-light.scss
+4 -4
View File
@@ -1,4 +1,4 @@
@import "mastodon-light/variables"; @use "mastodon-light/variables";
@import "index"; @use "index";
@import "mastodon-light/diff"; @use "mastodon-light/diff";
@import "mastodon-light/colors"; @use "mastodon-light/colors";
app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
+3
View File
@@ -16,6 +16,9 @@
/* Secondary */ /* Secondary */
--color-secondary-fg: #606984; --color-secondary-fg: #606984;
/* Account */
--color-account-bg: #fff;
/* Drawer */ /* Drawer */
--color-drawer-bg: #fff; --color-drawer-bg: #fff;
--color-drawer-bg--hover: #ccd7e0; --color-drawer-bg--hover: #ccd7e0;
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+71 -64
View File
@@ -1,3 +1,6 @@
@use "sass:color";
@use "../variables" as *;
// Notes! // Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced. // Sass color functions, "darken" and "lighten" are automatically replaced.
@@ -26,23 +29,23 @@ html {
.column-inline-form, .column-inline-form,
.regeneration-indicator { .regeneration-indicator {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-top: 0; border-top: 0;
} }
.error-column { .error-column {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.column > .scrollable.about { .column > .scrollable.about {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.about__meta, .about__meta,
.about__section__title, .about__section__title,
.interaction-modal { .interaction-modal {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.rules-list li::before { .rules-list li::before {
@@ -50,12 +53,12 @@ html {
} }
.directory__card__img { .directory__card__img {
background: lighten($ui-base-color, 12%); background: color.adjust($ui-base-color, $lightness: 12%);
} }
.filter-form { .filter-form {
background: $white; background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.column-back-button, .column-back-button,
@@ -103,7 +106,7 @@ html {
.confirmation-modal__cancel-button, .confirmation-modal__cancel-button,
.mute-modal__cancel-button, .mute-modal__cancel-button,
.block-modal__cancel-button { .block-modal__cancel-button {
color: lighten($ui-base-color, 26%); color: color.adjust($ui-base-color, $lightness: 26%);
&:hover, &:hover,
&:focus, &:focus,
@@ -113,15 +116,15 @@ html {
} }
.column-subheading { .column-subheading {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.getting-started, .getting-started,
.scrollable { .scrollable {
.column-link { .column-link {
background: $white; background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&:hover, &:hover,
&:active, &:active,
@@ -132,8 +135,8 @@ html {
} }
.getting-started .navigation-bar { .getting-started .navigation-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 0; border-top: 0;
@@ -148,7 +151,7 @@ html {
.setting-text, .setting-text,
.report-dialog-modal__textarea, .report-dialog-modal__textarea,
.audio-player { .audio-player {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.report-dialog-modal .dialog-option .poll__input { .report-dialog-modal .dialog-option .poll__input {
@@ -169,18 +172,18 @@ html {
.compose-form__poll-wrapper select { .compose-form__poll-wrapper select {
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
} }
.compose-form__poll-wrapper, .compose-form__poll-wrapper,
.compose-form__poll-wrapper .poll__footer { .compose-form__poll-wrapper .poll__footer {
border-top-color: lighten($ui-base-color, 8%); border-top-color: color.adjust($ui-base-color, $lightness: 8%);
} }
.compose-form .compose-form__buttons-wrapper { .compose-form .compose-form__buttons-wrapper {
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-top: 0; border-top: 0;
} }
@@ -195,7 +198,7 @@ html {
.compose-form__modifiers { .compose-form__modifiers {
.compose-form__upload__actions .icon-button, .compose-form__upload__actions .icon-button,
.compose-form__upload__warning .icon-button { .compose-form__upload__warning .icon-button {
color: lighten($white, 7%); color: color.adjust($white, $lightness: 7%);
&:active, &:active,
&:focus, &:focus,
@@ -206,11 +209,11 @@ html {
} }
.compose-form__buttons-wrapper { .compose-form__buttons-wrapper {
background: darken($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: -6%);
} }
.autosuggest-textarea__suggestions { .autosuggest-textarea__suggestions {
background: darken($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: -6%);
} }
.autosuggest-textarea__suggestions__item { .autosuggest-textarea__suggestions__item {
@@ -218,16 +221,16 @@ html {
&:focus, &:focus,
&:active, &:active,
&.selected { &.selected {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
} }
} }
.emoji-mart-bar { .emoji-mart-bar {
border-color: lighten($ui-base-color, 4%); border-color: color.adjust($ui-base-color, $lightness: 4%);
&:first-child { &:first-child {
background: darken($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: -6%);
} }
} }
@@ -242,7 +245,7 @@ html {
// Change the background colors of statuses // Change the background colors of statuses
.focusable:focus { .focusable:focus {
background: lighten($white, 4%); background: color.adjust($white, $lightness: 4%);
} }
.detailed-status, .detailed-status,
@@ -257,7 +260,7 @@ html {
&:hover, &:hover,
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: 4%);
} }
} }
@@ -320,12 +323,12 @@ html {
.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item
.language-dropdown__dropdown__results__item__common-name { .language-dropdown__dropdown__results__item__common-name {
color: lighten($ui-base-color, 8%); color: color.adjust($ui-base-color, $lightness: 8%);
} }
.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item.active
.language-dropdown__dropdown__results__item__common-name { .language-dropdown__dropdown__results__item__common-name {
color: darken($ui-base-color, 12%); color: color.adjust($ui-base-color, $lightness: -12%);
} }
.dropdown-menu__separator, .dropdown-menu__separator,
@@ -333,11 +336,11 @@ html {
.dropdown-menu__container__header, .dropdown-menu__container__header,
.compare-history-modal .report-modal__target, .compare-history-modal .report-modal__target,
.report-dialog-modal .poll__option.dialog-option { .report-dialog-modal .poll__option.dialog-option {
border-bottom-color: lighten($ui-base-color, 4%); border-bottom-color: color.adjust($ui-base-color, $lightness: 4%);
} }
.report-dialog-modal__container { .report-dialog-modal__container {
border-top-color: lighten($ui-base-color, 4%); border-top-color: color.adjust($ui-base-color, $lightness: 4%);
} }
// Change the background colors of modals // Change the background colors of modals
@@ -359,7 +362,7 @@ html {
.picture-in-picture__footer, .picture-in-picture__footer,
.reactions-bar__item { .reactions-bar__item {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.reactions-bar__item:hover, .reactions-bar__item:hover,
@@ -372,8 +375,12 @@ html {
} }
.reactions-bar__item.active { .reactions-bar__item.active {
background-color: mix($white, $ui-highlight-color, 80%); background-color: color.mix($white, $ui-highlight-color, 80%);
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); border-color: color.mix(
color.adjust($ui-base-color, $lightness: 8%),
$ui-highlight-color,
80%
);
} }
.media-modal__overlay .picture-in-picture__footer { .media-modal__overlay .picture-in-picture__footer {
@@ -395,16 +402,16 @@ html {
} }
.report-modal__comment { .report-modal__comment {
border-right-color: lighten($ui-base-color, 8%); border-right-color: color.adjust($ui-base-color, $lightness: 8%);
} }
.report-modal__container { .report-modal__container {
border-top-color: lighten($ui-base-color, 8%); border-top-color: color.adjust($ui-base-color, $lightness: 8%);
} }
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-top: 0; border-top: 0;
} }
@@ -419,7 +426,7 @@ html {
} }
.flash-message.warning { .flash-message.warning {
color: lighten($gold-star, 16%); color: color.adjust($gold-star, $lightness: 16%);
} }
.boost-modal__action-bar, .boost-modal__action-bar,
@@ -428,14 +435,14 @@ html {
.block-modal__action-bar, .block-modal__action-bar,
.onboarding-modal__paginator, .onboarding-modal__paginator,
.error-modal__footer { .error-modal__footer {
background: darken($ui-base-color, 6%); background: color.adjust($ui-base-color, $lightness: -6%);
.onboarding-modal__nav, .onboarding-modal__nav,
.error-modal__nav { .error-modal__nav {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: darken($ui-base-color, 12%); background-color: color.adjust($ui-base-color, $lightness: -12%);
} }
} }
} }
@@ -446,10 +453,10 @@ html {
.embed-modal .embed-modal__container .embed-modal__html { .embed-modal .embed-modal__container .embed-modal__html {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&:focus { &:focus {
border-color: lighten($ui-base-color, 12%); border-color: color.adjust($ui-base-color, $lightness: 12%);
background: $white; background: $white;
} }
} }
@@ -459,12 +466,12 @@ html {
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: darken($ui-secondary-color, 10%); background: color.adjust($ui-secondary-color, $lightness: -10%);
} }
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track { .react-toggle-track {
background: lighten($ui-highlight-color, 10%); background: color.adjust($ui-highlight-color, $lightness: 10%);
} }
// Change the default color used for the text in an empty column or on the error column // Change the default color used for the text in an empty column or on the error column
@@ -476,8 +483,8 @@ html {
// Change the default colors used on some parts of the profile pages // Change the default colors used on some parts of the profile pages
.activity-stream-tabs { .activity-stream-tabs {
background: $account-background-color; background: var(--color-account-bg);
border-bottom-color: lighten($ui-base-color, 8%); border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
} }
.nothing-here, .nothing-here,
@@ -485,7 +492,7 @@ html {
.directory__tag > a, .directory__tag > a,
.directory__tag > div { .directory__tag > div {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-left: 0; border-left: 0;
@@ -501,15 +508,15 @@ html {
input[type="password"], input[type="password"],
textarea { textarea {
&:hover { &:hover {
border-color: lighten($ui-base-color, 12%); border-color: color.adjust($ui-base-color, $lightness: 12%);
} }
} }
} }
.picture-in-picture-placeholder { .picture-in-picture-placeholder {
background: $white; background: $white;
border-color: lighten($ui-base-color, 8%); border-color: color.adjust($ui-base-color, $lightness: 8%);
color: lighten($ui-base-color, 8%); color: color.adjust($ui-base-color, $lightness: 8%);
} }
.directory__tag > a { .directory__tag > a {
@@ -528,24 +535,24 @@ html {
&__toolbar, &__toolbar,
&__row, &__row,
.nothing-here { .nothing-here {
border-color: lighten($ui-base-color, 8%); border-color: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
.activity-stream { .activity-stream {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&--under-tabs { &--under-tabs {
border-top: 0; border-top: 0;
} }
.entry { .entry {
background: $account-background-color; background: var(--color-account-bg);
.detailed-status.light, .detailed-status.light,
.more.light, .more.light,
.status.light { .status.light {
border-bottom-color: lighten($ui-base-color, 8%); border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
@@ -612,7 +619,7 @@ html {
.reply-indicator { .reply-indicator {
background: transparent; background: transparent;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.status__content, .status__content,
@@ -636,9 +643,9 @@ html {
} }
.mute-modal select { .mute-modal select {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
} }
@@ -650,15 +657,15 @@ html {
&:not([disabled]) { &:not([disabled]) {
&:hover, &:hover,
&:focus { &:focus {
background: darken($ui-secondary-color, 10%); background: color.adjust($ui-secondary-color, $lightness: -10%);
} }
&.active { &.active {
background-color: darken($ui-highlight-color, 2%); background-color: color.adjust($ui-highlight-color, $lightness: -2%);
&:hover, &:hover,
&:focus { &:focus {
background: lighten($ui-highlight-color, 10%); background: color.adjust($ui-highlight-color, $lightness: 10%);
} }
} }
} }
@@ -666,16 +673,16 @@ html {
.glitch.local-settings { .glitch.local-settings {
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
.glitch.local-settings__navigation { .glitch.local-settings__navigation {
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
} }
.glitch.local-settings__navigation__item { .glitch.local-settings__navigation__item {
background: darken($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: -8%);
border-bottom: 1px lighten($ui-base-color, 8%) solid; border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid;
&:hover { &:hover {
background: $ui-base-color; background: $ui-base-color;
@@ -705,8 +712,8 @@ html {
.status.collapsed .status__content::after { .status.collapsed .status__content::after {
background: linear-gradient( background: linear-gradient(
rgba(darken($ui-base-color, 13%), 0), rgba(color.adjust($ui-base-color, $lightness: -13%), 0),
rgba(darken($ui-base-color, 13%), 1) rgba(color.adjust($ui-base-color, $lightness: -13%), 1)
); );
} }
app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+17 -4
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Dependent colors // Dependent colors
$black: #000000; $black: #000000;
$white: #ffffff; $white: #ffffff;
@@ -14,7 +16,7 @@ $grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz $grey-100: #dadaf3; // Topaz
// Differences // Differences
$success-green: lighten(#3c754d, 8%); $success-green: color.adjust(#3c754d, $lightness: 8%);
$base-overlay-background: $white !default; $base-overlay-background: $white !default;
$valid-value-color: $success-green !default; $valid-value-color: $success-green !default;
@@ -34,7 +36,10 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
$primary-text-color: $black !default; $primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default; $darker-text-color: $classic-base-color !default;
$highlight-text-color: darken($ui-highlight-color, 8%) !default; $highlight-text-color: color.adjust(
$ui-highlight-color,
$lightness: -8%
) !default;
$dark-text-color: #444b5d; $dark-text-color: #444b5d;
$action-button-color: #606984; $action-button-color: #606984;
@@ -47,11 +52,19 @@ $account-background-color: $white !default;
// Invert darkened and lightened colors // Invert darkened and lightened colors
@function darken($color, $amount) { @function darken($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) + $amount); @return hsl(
color.hue($color),
color.saturation($color),
color.lightness($color) + $amount
);
} }
@function lighten($color, $amount) { @function lighten($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) - $amount); @return hsl(
color.hue($color),
color.saturation($color),
color.lightness($color) - $amount
);
} }
$emojis-requiring-inversion: "chains"; $emojis-requiring-inversion: "chains";
app/javascript/flavours/glitch/styles/modal.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
.modal-layout { .modal-layout {
background: $ui-base-color background: $ui-base-color
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>') url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
app/javascript/flavours/glitch/styles/polls.scss
+16 -11
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.poll { .poll {
margin-top: 16px; margin-top: 16px;
font-size: 14px; font-size: 14px;
@@ -16,7 +20,7 @@
&__chart { &__chart {
border-radius: 4px; border-radius: 4px;
display: block; display: block;
background: darken($ui-primary-color, 5%); background: color.adjust($ui-primary-color, $lightness: -5%);
height: 5px; height: 5px;
min-width: 1%; min-width: 1%;
@@ -47,17 +51,17 @@
// duplication // duplication
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: 4px; border-radius: 4px;
background: darken($ui-primary-color, 5%); background: color.adjust($ui-primary-color, $lightness: -5%);
} }
&::-ms-fill { &::-ms-fill {
border-radius: 4px; border-radius: 4px;
background: darken($ui-primary-color, 5%); background: color.adjust($ui-primary-color, $lightness: -5%);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: 4px; border-radius: 4px;
background: darken($ui-primary-color, 5%); background: color.adjust($ui-primary-color, $lightness: -5%);
} }
} }
@@ -94,7 +98,7 @@
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $simple-background-color; background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
@@ -136,7 +140,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: lighten($valid-value-color, 15%); border-color: color.adjust($valid-value-color, $lightness: 15%);
border-width: 4px; border-width: 4px;
} }
@@ -224,7 +228,7 @@
} }
.compose-form__poll-wrapper { .compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%); border-top: 1px solid color.adjust($simple-background-color, $lightness: -8%);
overflow-x: hidden; overflow-x: hidden;
ul { ul {
@@ -240,7 +244,8 @@
} }
.poll__footer { .poll__footer {
border-top: 1px solid darken($simple-background-color, 8%); border-top: 1px solid
color.adjust($simple-background-color, $lightness: -8%);
padding: 10px; padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -296,9 +301,9 @@
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
@@ -309,7 +314,7 @@
color: $dark-text-color; color: $dark-text-color;
&__chart { &__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7); background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7);
&.leading { &.leading {
background: rgba($ui-highlight-color, 0.5); background: rgba($ui-highlight-color, 0.5);
app/javascript/flavours/glitch/styles/rich_text.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
.status__content__text, .status__content__text,
.e-content, .e-content,
.reply-indicator__content { .reply-indicator__content {
app/javascript/flavours/glitch/styles/rtl.scss
+8 -4
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
body.rtl { body.rtl {
direction: rtl; direction: rtl;
@@ -94,15 +98,15 @@ body.rtl {
&::after { &::after {
background-image: linear-gradient( background-image: linear-gradient(
to left, to left,
rgba(darken($ui-base-color, 10%), 0), rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
darken($ui-base-color, 10%) color.adjust($ui-base-color, $lightness: -10%)
); );
} }
} }
.simple_form select { .simple_form select {
background: darken($ui-base-color, 10%) background: color.adjust($ui-base-color, $lightness: -10%)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
no-repeat left 8px center / auto 16px; no-repeat left 8px center / auto 16px;
} }
app/javascript/flavours/glitch/styles/statuses.scss
+5 -1
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.activity-stream { .activity-stream {
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
@@ -69,7 +73,7 @@
} }
&--highlighted .entry { &--highlighted .entry {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
app/javascript/flavours/glitch/styles/tables.scss
+23 -17
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.table { .table {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@@ -11,7 +15,7 @@
vertical-align: top; vertical-align: top;
border-top: 1px solid $ui-base-color; border-top: 1px solid $ui-base-color;
text-align: start; text-align: start;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
&.critical { &.critical {
font-weight: 700; font-weight: 700;
@@ -78,7 +82,7 @@
& > tbody > tr > td { & > tbody > tr > td {
padding: 11px 10px; padding: 11px 10px;
background: transparent; background: transparent;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
color: $secondary-text-color; color: $secondary-text-color;
} }
@@ -91,17 +95,19 @@
&.batch-table { &.batch-table {
& > thead > tr > th { & > thead > tr > th {
background: $ui-base-color; background: $ui-base-color;
border-top: 1px solid darken($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:first-child { &:first-child {
border-radius: 4px 0 0; border-radius: 4px 0 0;
border-inline-start: 1px solid darken($ui-base-color, 8%); border-inline-start: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
} }
&:last-child { &:last-child {
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
border-inline-end: 1px solid darken($ui-base-color, 8%); border-inline-end: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
} }
} }
} }
@@ -186,7 +192,7 @@ a.table-action-link {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
background: $ui-base-color; background: $ui-base-color;
border-radius: 4px 0 0; border-radius: 4px 0 0;
height: 47px; height: 47px;
@@ -203,7 +209,7 @@ a.table-action-link {
height: 47px; height: 47px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0; border-top: 0;
color: $secondary-text-color; color: $secondary-text-color;
display: none; display: none;
@@ -242,14 +248,14 @@ a.table-action-link {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
} }
&__form { &__form {
padding: 16px; padding: 16px;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0; border-top: 0;
background: $ui-base-color; background: $ui-base-color;
@@ -260,25 +266,25 @@ a.table-action-link {
} }
&__row { &__row {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0; border-top: 0;
background: darken($ui-base-color, 4%); background: color.adjust($ui-base-color, $lightness: -4%);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child { .optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
} }
} }
&:hover { &:hover {
background: darken($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: -2%);
} }
&:nth-child(even) { &:nth-child(even) {
background: $ui-base-color; background: $ui-base-color;
&:hover { &:hover {
background: lighten($ui-base-color, 2%); background: color.adjust($ui-base-color, $lightness: 2%);
} }
} }
@@ -353,12 +359,12 @@ a.table-action-link {
} }
.nothing-here { .nothing-here {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0; border-top: 0;
box-shadow: none; box-shadow: none;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid darken($ui-base-color, 8%); border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
} }
} }
app/javascript/flavours/glitch/styles/tangerine/_config.scss
+2 -2
View File
@@ -4,7 +4,7 @@
*/ */
/* 🛠️ Config */ /* 🛠️ Config */
@import "keyframes"; @use "keyframes";
/* 🧩 Components */ /* 🧩 Components */
@import "status-bar"; @use "status-bar";
app/javascript/flavours/glitch/styles/variables.scss
+16 -8
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Commonly used web colors // Commonly used web colors
$black: #000000; // Black $black: #000000; // Black
$white: #ffffff; // White $white: #ffffff; // White
@@ -32,9 +34,9 @@ $error-value-color: $error-red !default;
// Tell UI to use selected colors // Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest $ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten( $ui-base-lighter-color: color.scale(
$ui-base-color, $ui-base-color,
26% $lightness: 26%
) !default; // Lighter darkest ) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter $ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-secondary-color: $classic-secondary-color !default; // Lightest
@@ -61,9 +63,15 @@ $primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default; $darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default; $dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default; $secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $highlight-text-color: color.scale(
$ui-highlight-color,
$lightness: 8%
) !default;
$action-button-color: $ui-base-lighter-color !default; $action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; $action-button-focus-color: color.scale(
$ui-base-lighter-color,
$lightness: 4%
) !default;
$passive-text-color: $gold-star !default; $passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default; $active-passive-text-color: $success-green !default;
@@ -94,11 +102,11 @@ $ui-avatar-border-size: 8%;
$dismiss-overlay-width: 4rem; $dismiss-overlay-width: 4rem;
:root { :root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)}; --dropdown-border-color: #{color.scale($ui-base-color, $lightness: 12%)};
--dropdown-background-color: #{lighten($ui-base-color, 4%)}; --dropdown-background-color: #{color.scale($ui-base-color, $lightness: 4%)};
--dropdown-shadow: --dropdown-shadow:
0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{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-background-color: #{color.scale($ui-base-color, $lightness: -4%)};
--modal-border-color: #{lighten($ui-base-color, 4%)}; --modal-border-color: #{color.scale($ui-base-color, $lightness: 4%)};
} }
app/javascript/flavours/glitch/styles/widgets.scss
+6 -3
View File
@@ -1,4 +1,7 @@
@use "sass:color";
@use "sass:math"; @use "sass:math";
@use "mixins" as *;
@use "variables" as *;
.hero-widget { .hero-widget {
margin-bottom: 10px; margin-bottom: 10px;
@@ -54,7 +57,7 @@
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
color: lighten($darker-text-color, 10%); color: color.adjust($darker-text-color, $lightness: 10%);
} }
a { a {
@@ -223,7 +226,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 8%); background: color.adjust($ui-base-color, $lightness: 8%);
} }
} }
@@ -305,7 +308,7 @@
tbody td { tbody td {
padding: 15px 0; padding: 15px 0;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
} }
tbody tr:last-child td { tbody tr:last-child td {
app/javascript/skins/glitch/contrast/common.scss
+1 -1
View File
@@ -1 +1 @@
@import "flavours/glitch/styles/contrast"; // @import "flavours/glitch/styles/contrast";
app/javascript/skins/glitch/mastodon-light/common.scss
+1 -1
View File
@@ -1 +1 @@
@import "flavours/glitch/styles/mastodon-light"; // @import "flavours/glitch/styles/mastodon-light";
package.json
+1 -1
View File
@@ -91,7 +91,7 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mark-loader": "^0.1.6", "mark-loader": "^0.1.6",
"marky": "^1.2.5", "marky": "^1.2.5",
"mini-css-extract-plugin": "^1.6.2", "mini-css-extract-plugin": "^2.9.4",
"mkdirp": "^3.0.1", "mkdirp": "^3.0.1",
"npmlog": "^7.0.1", "npmlog": "^7.0.1",
"path-complete-extname": "^1.0.0", "path-complete-extname": "^1.0.0",
yarn.lock
+9 -10
View File
@@ -2529,7 +2529,7 @@ __metadata:
lodash: "npm:^4.17.21" lodash: "npm:^4.17.21"
mark-loader: "npm:^0.1.6" mark-loader: "npm:^0.1.6"
marky: "npm:^1.2.5" marky: "npm:^1.2.5"
mini-css-extract-plugin: "npm:^1.6.2" mini-css-extract-plugin: "npm:^2.9.4"
mkdirp: "npm:^3.0.1" mkdirp: "npm:^3.0.1"
npmlog: "npm:^7.0.1" npmlog: "npm:^7.0.1"
path-complete-extname: "npm:^1.0.0" path-complete-extname: "npm:^1.0.0"
@@ -10950,16 +10950,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"mini-css-extract-plugin@npm:^1.6.2": "mini-css-extract-plugin@npm:^2.9.4":
version: 1.6.2 version: 2.9.4
resolution: "mini-css-extract-plugin@npm:1.6.2" resolution: "mini-css-extract-plugin@npm:2.9.4"
dependencies: dependencies:
loader-utils: "npm:^2.0.0" schema-utils: "npm:^4.0.0"
schema-utils: "npm:^3.0.0" tapable: "npm:^2.2.1"
webpack-sources: "npm:^1.1.0"
peerDependencies: peerDependencies:
webpack: ^4.4.0 || ^5.0.0 webpack: ^5.0.0
checksum: 10c0/138c008f8a510012266d2834227e75181feeffd09e89e9cde0a63f17be3d64ea3ddbba01036aac9c8a969462c0142285659a20c294e8d01ba948aa1124affdc2 checksum: 10c0/76f9e471784d52435ea766ce576ad23d37d0ea51c32ddc56414c8fdf14f7de44202dbc772cdf7549b7e54a5e56f569af93cfbd036d62d13ff8fd9571e53353b7
languageName: node languageName: node
linkType: hard linkType: hard
@@ -15998,7 +15997,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"webpack-sources@npm:^1.1.0, webpack-sources@npm:^1.4.3": "webpack-sources@npm:^1.4.3":
version: 1.4.3 version: 1.4.3
resolution: "webpack-sources@npm:1.4.3" resolution: "webpack-sources@npm:1.4.3"
dependencies: dependencies: