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

[chore] update scss files for Dart Sass 2.0.0

Browse Source
This commit is contained in:
Zoë Bijl
2025-10-17 00:21:14 +02:00
parent ff91bfe260
commit e4d1ab0063
56 changed files with 571 additions and 390 deletions
Download Patch File Download Diff File 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() {
border-radius: $ui-avatar-border-size;
background-position: 50%;
app/javascript/flavours/glitch/styles/about.scss
+2
View File
@@ -1,4 +1,6 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
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"
"end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign"
"heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on"
app/javascript/flavours/glitch/styles/accounts.scss
+2
View File
@@ -1,4 +1,6 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.card {
& > a {
app/javascript/flavours/glitch/styles/admin.scss
+2
View File
@@ -1,5 +1,7 @@
@use "sass:color";
@use "sass:math";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
app/javascript/flavours/glitch/styles/basics.scss
+5 -3
View File
@@ -1,13 +1,15 @@
@use "sass:meta";
@use "sass:string";
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
@function hex-color($color) {
@if type-of($color) == "color" {
$color: str-slice(ie-hex-str($color), 4);
@if meta.type-of($color) == "color" {
$color: string.slice(color.ie-hex-str($color), 4);
}
@return "%23" + unquote($color);
@return "%23" + string.unquote($color);
}
body {
app/javascript/flavours/glitch/styles/branding.scss
+2
View File
@@ -1,3 +1,5 @@
@use "variables" as *;
.logo {
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 {
position: relative;
overflow: hidden;
@@ -84,7 +88,7 @@
width: 100%;
height: auto;
aspect-ratio: 1.9;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 8px;
margin-bottom: 30px;
}
@@ -110,7 +114,7 @@
}
&__meta {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
display: flex;
margin-bottom: 30px;
@@ -126,7 +130,7 @@
width: 0;
border: 0;
border-style: solid;
border-color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
border-left-width: 1px;
min-height: calc(100% - 60px);
flex: 0 0 auto;
@@ -231,7 +235,7 @@
line-height: 22px;
padding: 20px;
border-radius: 4px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
color: $highlight-text-color;
cursor: pointer;
}
@@ -241,7 +245,7 @@
}
&__body {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-top: 0;
padding: 20px;
font-size: 15px;
@@ -251,18 +255,18 @@
&__domain-blocks {
margin-top: 30px;
background: darken($ui-base-color, 4%);
border: 1px solid lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
&__domain {
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
padding: 10px;
font-size: 15px;
color: $darker-text-color;
&:nth-child(2n) {
background: darken($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: -2%);
}
&: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 {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
color: inherit;
text-decoration: none;
@@ -165,7 +169,7 @@
.account__header__wrapper {
flex: 0 0 auto;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
.account__disclaimer {
@@ -203,8 +207,8 @@
}
.account__action-bar {
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
line-height: 36px;
overflow: hidden;
flex: 0 0 auto;
@@ -222,7 +226,7 @@
text-decoration: none;
overflow: hidden;
flex: 0 1 100%;
border-inline-start: 1px solid lighten($ui-base-color, 8%);
border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px 0;
border-bottom: 4px solid transparent;
@@ -278,7 +282,7 @@
padding: 8px 10px;
padding-inline-start: 68px;
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;
&__details {
@@ -324,9 +328,9 @@
.account--panel {
display: flex;
gap: 5px;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
flex-direction: row;
padding: 5px;
}
@@ -481,9 +485,9 @@
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&__message {
position: relative;
@@ -563,7 +567,7 @@
overflow: hidden;
height: 145px;
position: relative;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
img {
object-fit: cover;
@@ -576,9 +580,9 @@
&__bar {
position: relative;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
padding: 5px;
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
.avatar {
display: block;
@@ -586,8 +590,8 @@
width: 94px;
.account__avatar {
background: darken($ui-base-color, 8%);
border: 2px solid lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -8%);
border: 2px solid color.adjust($ui-base-color, $lightness: 4%);
}
}
}
@@ -707,10 +711,10 @@
.account__header__fields {
margin: 0;
border-top: 1px solid lighten($ui-base-color, 12%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
a {
color: lighten($ui-highlight-color, 8%);
color: color.adjust($ui-highlight-color, $lightness: 8%);
}
dl:first-child .verified {
@@ -753,8 +757,8 @@
flex-direction: column;
font-size: 14px;
font-weight: 400;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
&__header {
display: flex;
@@ -783,7 +787,7 @@
&:hover,
&:active,
&:focus {
color: lighten($darker-text-color, 7%);
color: color.adjust($darker-text-color, $lightness: 7%);
background-color: rgba($darker-text-color, 0.15);
}
@@ -792,7 +796,7 @@
}
&[disabled] {
color: darken($darker-text-color, 13%);
color: color.adjust($darker-text-color, $lightness: -13%);
background-color: transparent;
cursor: default;
}
@@ -837,7 +841,7 @@
.follow-request-banner,
.account-memorial-banner {
padding: 20px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
display: flex;
align-items: center;
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 {
word-wrap: break-word;
overflow-y: auto;
@@ -42,7 +46,7 @@
}
.announcements {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
font-size: 13px;
display: flex;
align-items: flex-end;
@@ -126,7 +130,7 @@
&__item {
flex-shrink: 0;
background: lighten($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: 12%);
border: 0;
border-radius: 3px;
margin: 2px;
@@ -169,26 +173,26 @@
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 16%);
background: color.adjust($ui-base-color, $lightness: 16%);
transition: all 200ms ease-out;
transition-property: background-color, color;
&__count {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
}
&.active {
transition: all 100ms ease-in;
transition-property: background-color, color;
background-color: mix(
lighten($ui-base-color, 12%),
background-color: color.mix(
color.adjust($ui-base-color, $lightness: 12%),
$ui-highlight-color,
80%
);
.reactions-bar__item__count {
color: lighten($highlight-text-color, 8%);
color: color.adjust($highlight-text-color, $lightness: 8%);
}
}
}
@@ -219,7 +223,7 @@
&:active,
&:focus {
opacity: 1;
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
transition: all 200ms ease-out;
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 {
display: flex;
flex: 1 1 auto;
@@ -108,7 +112,7 @@ $ui-header-height: 55px;
}
.tabs-bar__wrapper {
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
position: sticky;
top: $ui-header-height;
z-index: 2;
@@ -170,7 +174,7 @@ $ui-header-height: 55px;
.column-back-button {
box-sizing: border-box;
width: 100%;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px 4px 0 0;
color: $highlight-text-color;
cursor: pointer;
@@ -223,7 +227,7 @@ $ui-header-height: 55px;
}
.column-link {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
color: $primary-text-color;
display: block;
font-size: 16px;
@@ -235,7 +239,7 @@ $ui-header-height: 55px;
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 11%);
background: color.adjust($ui-base-color, $lightness: 11%);
}
&:focus {
@@ -327,7 +331,7 @@ $ui-header-height: 55px;
color: $darker-text-color;
font-size: 16px;
font-weight: 700;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
.column-header > button,
@@ -374,7 +378,7 @@ $ui-header-height: 55px;
&:focus-visible,
&:hover,
&.active {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
}
&:active {
@@ -418,7 +422,7 @@ $ui-header-height: 55px;
&:hover,
&.active {
color: inherit;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
}
&:active {
@@ -516,7 +520,7 @@ $ui-header-height: 55px;
height: 0;
background: transparent;
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;
}
@@ -532,7 +536,7 @@ $ui-header-height: 55px;
}
.column-header__collapsible-inner {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
padding: 15px;
}
@@ -628,11 +632,11 @@ $ui-header-height: 55px;
&:not([disabled]) {
&:hover,
&:focus {
background-color: darken($ui-base-color, 10%);
background-color: color.adjust($ui-base-color, $lightness: -10%);
}
&.active {
background-color: darken($ui-highlight-color, 2%);
background-color: color.adjust($ui-highlight-color, $lightness: -2%);
&:hover,
&:focus {
@@ -684,7 +688,7 @@ $ui-header-height: 55px;
}
.follow_requests-unlocked_explanation {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
contain: initial;
flex-grow: 0;
}
@@ -740,7 +744,7 @@ $ui-header-height: 55px;
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
label {
flex: 1 1 auto;
@@ -767,7 +771,7 @@ $ui-header-height: 55px;
}
.column-settings__outer {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
padding: 15px;
}
@@ -793,7 +797,7 @@ $ui-header-height: 55px;
@include search-input;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
&::-moz-focus-inner {
@@ -807,7 +811,7 @@ $ui-header-height: 55px;
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
@media screen and (width <= 600px) {
@@ -826,7 +830,7 @@ $ui-header-height: 55px;
}
&__multi-value {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
&__remove {
cursor: pointer;
@@ -834,8 +838,8 @@ $ui-header-height: 55px;
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
color: lighten($darker-text-color, 4%);
background: color.adjust($ui-base-color, $lightness: 12%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
}
}
@@ -855,12 +859,12 @@ $ui-header-height: 55px;
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
color: color.adjust($dark-text-color, $lightness: 4%);
}
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, $lightness: 8%);
}
&__menu {
@@ -881,7 +885,7 @@ $ui-header-height: 55px;
&--is-focused,
&--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 {
padding: 30px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
display: flex;
flex-direction: column;
align-items: center;
@@ -973,8 +977,8 @@ $ui-header-height: 55px;
.column-list {
margin: 0 20px;
border: 1px solid lighten($ui-base-color, 8%);
background: darken($ui-base-color, 2%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
background: color.adjust($ui-base-color, $lightness: -2%);
border-radius: 4px;
&__empty-message {
@@ -1089,7 +1093,7 @@ $ui-header-height: 55px;
}
.hashtag-header {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px;
font-size: 17px;
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 {
padding: 10px;
@@ -307,7 +311,7 @@
&:focus,
&:active,
&.selected {
background: darken($ui-secondary-color, 10%);
background: color.adjust($ui-secondary-color, $lightness: -10%);
}
> .account,
@@ -398,7 +402,7 @@
&:hover,
&:focus,
&:active {
color: lighten($secondary-text-color, 7%);
color: color.adjust($secondary-text-color, $lightness: 7%);
}
}
@@ -469,7 +473,7 @@
border-radius: 6px;
width: 100%;
height: 6px;
background: darken($simple-background-color, 8%);
background: color.adjust($simple-background-color, $lightness: -8%);
}
.upload-progress__tracker {
@@ -495,7 +499,7 @@
padding: 10px;
border-radius: 0 0 4px 4px;
color: $action-button-color;
background: darken($simple-background-color, 8%);
background: color.adjust($simple-background-color, $lightness: -8%);
}
.compose-form__buttons {
@@ -605,7 +609,7 @@
}
&.active:hover {
background: lighten($ui-highlight-color, 4%);
background: color.adjust($ui-highlight-color, $lightness: 4%);
}
}
@@ -687,7 +691,7 @@
}
&: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 {
margin: 10px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
.scrollable .account-card__title__avatar {
img,
.account__avatar {
border-color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
}
}
.scrollable .account-card__bio::after {
background: linear-gradient(
to left,
lighten($ui-base-color, 8%),
color.adjust($ui-base-color, $lightness: 8%),
transparent
);
}
@@ -61,8 +65,8 @@
vertical-align: middle;
&.checked {
border-color: lighten($ui-highlight-color, 4%);
background: lighten($ui-highlight-color, 4%);
border-color: color.adjust($ui-highlight-color, $lightness: 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 {
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 {
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-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 {
display: flex;
gap: var(--size-layout-gap);
@@ -96,7 +100,7 @@
&:focus-visible,
&:hover,
&.active {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
}
}
@@ -163,15 +167,15 @@
}
.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 {
border-bottom: 0;
}
&__header {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px;
font-weight: 500;
font-size: 14px;
@@ -212,7 +216,7 @@
&:hover,
&:active,
&:focus {
color: lighten($secondary-text-color, 4%);
color: color.adjust($secondary-text-color, $lightness: 4%);
text-decoration: underline;
}
}
@@ -249,7 +253,7 @@
}
.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>')
no-repeat bottom / 100% auto;
flex: 1;
@@ -280,7 +284,7 @@
}
.pseudo-drawer {
background: lighten($ui-base-color, 13%);
background: color.adjust($ui-base-color, $lightness: 13%);
font-size: 13px;
text-align: start;
}
@@ -304,7 +308,7 @@
bottom /
100%
auto,
lighten($ui-base-color, 4%);
color.adjust($ui-base-color, $lightness: 4%);
} @else {
background:
url("~flavours/glitch/images/wave-drawer-glitched.png")
@@ -312,7 +316,7 @@
bottom /
100%
auto,
lighten($ui-base-color, 4%);
color.adjust($ui-base-color, $lightness: 4%);
}
& > .mastodon {
app/javascript/flavours/glitch/styles/components/emoji.scss
+3
View File
@@ -1,3 +1,6 @@
@use "../mixins" as *;
@use "../variables" as *;
.emojione {
font-size: inherit;
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 {
&,
* {
@@ -15,7 +19,7 @@
}
.emoji-mart-bar {
border: 0 solid darken($ui-secondary-color, 8%);
border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%);
&:first-child {
border-bottom-width: 1px;
@@ -52,7 +56,7 @@
border: 0;
&:hover {
color: darken($lighter-text-color, 4%);
color: color.adjust($lighter-text-color, $lightness: -4%);
}
}
@@ -60,7 +64,7 @@
color: $highlight-text-color;
&:hover {
color: darken($highlight-text-color, 4%);
color: color.adjust($highlight-text-color, $lightness: -4%);
}
.emoji-mart-anchor-bar {
@@ -74,7 +78,7 @@
inset-inline-start: 0;
width: 100%;
height: 3px;
background-color: darken($ui-highlight-color, 3%);
background-color: color.adjust($ui-highlight-color, $lightness: -3%);
}
.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 {
position: relative;
}
.explore__search-header {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
justify-content: center;
align-items: center;
padding: 15px;
@@ -14,12 +18,12 @@
}
.search__input {
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px;
}
.search__popout {
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.search .fa {
@@ -45,7 +49,7 @@
color: $primary-text-color;
text-decoration: none;
padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
gap: 15px;
&:last-child {
app/javascript/flavours/glitch/styles/components/index.scss
+26 -26
View File
@@ -1,26 +1,26 @@
@import "misc";
@import "boost";
@import "accounts";
@import "domains";
@import "status";
@import "modal";
@import "compose_form";
@import "columns";
@import "regeneration_indicator";
@import "directory";
@import "search";
@import "emoji";
@import "doodle";
@import "drawer";
@import "media";
@import "sensitive";
@import "lists";
@import "emoji_picker";
@import "local_settings";
@import "single_column";
@import "announcements";
@import "explore";
@import "scrollbars";
@import "signed_out";
@import "privacy_policy";
@import "about";
@use "misc";
@use "boost";
@use "accounts";
@use "domains";
@use "status";
@use "modal";
@use "compose_form";
@use "columns";
@use "regeneration_indicator";
@use "directory";
@use "search";
@use "emoji";
@use "doodle";
@use "drawer";
@use "media";
@use "sensitive";
@use "lists";
@use "emoji_picker";
@use "local_settings";
@use "single_column";
@use "announcements";
@use "explore";
@use "scrollbars";
@use "signed_out";
@use "privacy_policy";
@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 {
background: $ui-base-color;
flex-direction: column;
@@ -12,7 +16,7 @@
h4 {
padding: 15px 0;
background: lighten($ui-base-color, 13%);
background: color.adjust($ui-base-color, $lightness: 13%);
font-weight: 500;
font-size: 16px;
text-align: center;
@@ -65,11 +69,11 @@
}
&__account {
background: lighten($ui-base-color, 13%);
background: color.adjust($ui-base-color, $lightness: 13%);
}
&__lists {
background: lighten($ui-base-color, 13%);
background: color.adjust($ui-base-color, $lightness: 13%);
height: 50vh;
border-radius: 0 0 8px 8px;
overflow-y: auto;
@@ -77,7 +81,7 @@
.list {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.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 {
position: relative;
display: flex;
@@ -64,7 +68,7 @@
font-size: inherit;
text-align: start;
text-decoration: none;
background: lighten($ui-secondary-color, 8%);
background: color.adjust($ui-secondary-color, $lightness: 8%);
cursor: pointer;
transition: background 0.3s;
@@ -91,7 +95,7 @@
}
.glitch.local-settings__navigation {
background: lighten($ui-secondary-color, 8%);
background: color.adjust($ui-secondary-color, $lightness: 8%);
width: 212px;
font-size: 15px;
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 {
align-items: center;
background: $base-overlay-background;
@@ -23,7 +27,7 @@
&:hover,
&:active,
&:focus {
color: lighten($darker-text-color, 8%);
color: color.adjust($darker-text-color, $lightness: 8%);
}
.status__content > & {
@@ -385,7 +389,7 @@
overflow: hidden;
box-sizing: border-box;
position: relative;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 4px;
padding-bottom: 44px;
width: 100%;
@@ -554,7 +558,7 @@
&:hover,
&:active,
&:focus {
color: lighten($darker-text-color, 7%);
color: color.adjust($darker-text-color, $lightness: 7%);
}
}
@@ -690,7 +694,7 @@
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, $lightness: 8%);
}
&__handle {
@@ -703,7 +707,7 @@
inset-inline-start: 0;
margin-inline-start: -6px;
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);
opacity: 0;
@@ -757,7 +761,7 @@
height: 4px;
border-radius: 4px;
top: 14px;
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, $lightness: 8%);
}
&__buffer {
@@ -773,7 +777,7 @@
height: 12px;
top: 10px;
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);
.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 {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
@@ -169,7 +173,7 @@
&:hover,
&:active,
&:focus-visible {
color: lighten($action-button-color, 7%);
color: color.adjust($action-button-color, $lightness: 7%);
background-color: rgba($action-button-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
@@ -214,7 +218,7 @@
&:hover,
&:active,
&:focus-visible {
color: darken($lighter-text-color, 7%);
color: color.adjust($lighter-text-color, $lightness: -7%);
background-color: rgba($lighter-text-color, 0.15);
}
@@ -230,7 +234,7 @@
color: $highlight-text-color;
&.disabled {
color: lighten($highlight-text-color, 13%);
color: color.adjust($highlight-text-color, $lightness: 13%);
}
}
}
@@ -288,7 +292,7 @@
&:hover,
&:active,
&:focus-visible {
color: darken($lighter-text-color, 7%);
color: color.adjust($lighter-text-color, $lightness: -7%);
background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
@@ -299,7 +303,7 @@
}
&.disabled {
color: lighten($lighter-text-color, 20%);
color: color.adjust($lighter-text-color, $lightness: 20%);
background-color: transparent;
cursor: default;
}
@@ -701,7 +705,7 @@ body > [data-popper-placement] {
.tabs-bar {
box-sizing: border-box;
display: flex;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
flex: 0 0 auto;
overflow-y: auto;
}
@@ -716,7 +720,7 @@ body > [data-popper-placement] {
text-align: center;
font-size: 14px;
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-property: border-bottom, background, color;
@@ -729,8 +733,8 @@ body > [data-popper-placement] {
&:focus,
&:active {
@include multi-columns("screen and (min-width: 631px)") {
background: lighten($ui-base-color, 14%);
border-bottom-color: lighten($ui-base-color, 14%);
background: color.adjust($ui-base-color, $lightness: 14%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 14%);
}
}
@@ -758,7 +762,7 @@ body > [data-popper-placement] {
inset-inline-start: 9px;
top: -13px;
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;
border-radius: 6px;
font-size: 10px;
@@ -780,7 +784,7 @@ body > [data-popper-placement] {
}
.column-link--transparent .icon-with-badge__badge {
border-color: darken($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: -8%);
}
.scrollable {
@@ -861,11 +865,11 @@ body > [data-popper-placement] {
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
.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 {
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)
@@ -918,7 +922,7 @@ body > [data-popper-placement] {
height: 22px;
border: 1px solid $ui-base-color;
border-radius: 50%;
background-color: darken($simple-background-color, 2%);
background-color: color.adjust($simple-background-color, $lightness: -2%);
box-sizing: border-box;
transition: all 0.25s ease;
transition-property: border-color, left;
@@ -963,7 +967,7 @@ body > [data-popper-placement] {
margin-top: 10px;
h4 {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 10px;
font-size: 12px;
text-transform: uppercase;
@@ -1029,8 +1033,8 @@ body > [data-popper-placement] {
kbd {
display: inline-block;
padding: 3px 5px;
background-color: lighten($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
background-color: color.adjust($ui-base-color, $lightness: 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -4%);
}
}
@@ -1059,7 +1063,7 @@ body > [data-popper-placement] {
&.light {
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,
&:active {
@@ -1093,7 +1097,7 @@ button.icon-button.active 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 {
@@ -1112,12 +1116,12 @@ button.icon-button.active i.fa-retweet {
text-decoration: none;
&:hover {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
}
}
.load-gap {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.timeline-hint {
@@ -1140,7 +1144,7 @@ button.icon-button.active i.fa-retweet {
&:focus,
&:active {
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;
align-items: center;
justify-content: center;
background: lighten($ui-base-color, 8%);
border-inline-start: 1px solid lighten($ui-base-color, 20%);
background: color.adjust($ui-base-color, $lightness: 8%);
border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%);
box-shadow: 0 0 5px black;
border-bottom: 1px solid $ui-base-color;
}
@@ -1232,7 +1236,7 @@ button.icon-button.active i.fa-retweet {
}
.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;
circle {
@@ -1524,12 +1528,12 @@ button.icon-button.active i.fa-retweet {
.conversation {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 5px;
padding-bottom: 0;
&:focus {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
outline: 0;
}
@@ -1597,10 +1601,10 @@ button.icon-button.active i.fa-retweet {
}
&--unread {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
.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 {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
.modal-root {
@@ -134,7 +138,7 @@
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
background: color.adjust($ui-secondary-color, $lightness: -8%);
display: flex;
padding: 25px;
@@ -158,8 +162,8 @@
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: darken($ui-secondary-color, 16%);
color: color.adjust($lighter-text-color, $lightness: -4%);
background-color: color.adjust($ui-secondary-color, $lightness: -16%);
}
&.onboarding-modal__done,
@@ -169,7 +173,7 @@
&:hover,
&:focus,
&:active {
color: lighten($inverted-text-color, 4%);
color: color.adjust($inverted-text-color, $lightness: 4%);
}
}
}
@@ -190,17 +194,17 @@
width: 14px;
height: 14px;
border-radius: 14px;
background: darken($ui-secondary-color, 16%);
background: color.adjust($ui-secondary-color, $lightness: -16%);
margin: 0 3px;
cursor: pointer;
&:hover {
background: darken($ui-secondary-color, 18%);
background: color.adjust($ui-secondary-color, $lightness: -18%);
}
&.active {
cursor: default;
background: darken($ui-secondary-color, 24%);
background: color.adjust($ui-secondary-color, $lightness: -24%);
}
}
@@ -231,7 +235,7 @@
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 4%);
color: color.adjust($highlight-text-color, $lightness: 4%);
}
}
@@ -329,7 +333,7 @@
}
.figure {
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
color: $secondary-text-color;
margin-bottom: 20px;
border-radius: 4px;
@@ -421,7 +425,7 @@
.mute-modal,
.block-modal,
.compare-history-modal {
background: lighten($ui-secondary-color, 8%);
background: color.adjust($ui-secondary-color, $lightness: 8%);
color: $inverted-text-color;
border-radius: 8px;
overflow: hidden;
@@ -455,7 +459,7 @@
}
.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;
width: 480px;
height: 80vh;
background: lighten($ui-secondary-color, 8%);
background: color.adjust($ui-secondary-color, $lightness: 8%);
color: $inverted-text-color;
border-radius: 8px;
overflow: hidden;
@@ -577,7 +581,7 @@
&__lead {
font-size: 17px;
line-height: 22px;
color: lighten($inverted-text-color, 16%);
color: color.adjust($inverted-text-color, $lightness: 16%);
margin-bottom: 30px;
a {
@@ -620,7 +624,7 @@
background: $ui-primary-color;
&:hover {
background: lighten($ui-primary-color, 8%);
background: color.adjust($ui-primary-color, $lightness: 8%);
}
}
@@ -639,7 +643,7 @@
&:active,
&:focus,
&:hover {
border-color: lighten($inverted-text-color, 15%);
border-color: color.adjust($inverted-text-color, $lightness: 15%);
border-width: 4px;
}
@@ -660,7 +664,7 @@
& > .poll__option__text {
font-size: 13px;
color: lighten($inverted-text-color, 16%);
color: color.adjust($inverted-text-color, $lightness: 16%);
strong {
font-size: 17px;
@@ -829,7 +833,7 @@
margin-bottom: 10px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%);
}
&__wrapper {
@@ -978,7 +982,7 @@
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
color: color.adjust($lighter-text-color, $lightness: -4%);
background-color: transparent;
}
}
@@ -1022,9 +1026,9 @@
outline: 0;
font-family: inherit;
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;
border: 1px solid darken($simple-background-color, 14%);
border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
border-radius: 4px;
padding: 6px 10px;
padding-inline-end: 30px;
@@ -1159,7 +1163,7 @@
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
@media screen and (width <= 600px) {
@@ -1364,7 +1368,7 @@ img.modal-warning {
&__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;
color: $primary-text-color;
font-size: 16px;
@@ -1381,7 +1385,7 @@ img.modal-warning {
flex: 1 1 auto;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
&:focus {
@@ -1398,12 +1402,12 @@ img.modal-warning {
margin-top: -1px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
&.focused &__input {
border-color: $highlight-text-color;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
&.invalid &__input {
@@ -1471,7 +1475,7 @@ img.modal-warning {
input {
display: block;
font-family: inherit;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
border: 1px solid $highlight-text-color;
color: $darker-text-color;
border-radius: 4px;
@@ -1484,7 +1488,7 @@ img.modal-warning {
&:focus {
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 {
background: $ui-base-color;
padding: 20px;
@@ -169,14 +173,14 @@
code {
font-size: 0.875em;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 4px;
padding: 0.2em 0.3em;
}
hr {
border: 0;
border-top: 1px solid lighten($ui-base-color, 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
margin-top: 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 {
text-align: center;
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 */
html {
scrollbar-color: lighten($ui-base-color, 4%)
scrollbar-color: color.adjust($ui-base-color, $lightness: 4%)
rgba($base-overlay-background, 0.1);
}
@@ -10,17 +14,17 @@ html {
}
::-webkit-scrollbar-thumb {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border: 0 none $base-border-color;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
::-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 {
position: relative;
}
@@ -55,7 +59,7 @@
&:focus-visible,
&:hover {
background: darken($ui-base-color, 10%);
background: color.adjust($ui-base-color, $lightness: -10%);
}
}
@@ -168,7 +172,7 @@
color: $dark-text-color;
font-weight: 500;
font-size: 16px;
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
cursor: default;
}
@@ -181,8 +185,8 @@
.trends {
&__header {
color: $dark-text-color;
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 2%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%);
font-weight: 500;
padding: 15px;
font-size: 16px;
@@ -198,7 +202,7 @@
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
gap: 15px;
&:last-child {
@@ -255,7 +259,7 @@
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
fill: none !important;
}
}
@@ -279,31 +283,37 @@
}
path:last-child {
stroke: lighten($gold-star, 6%) !important;
stroke: color.adjust($gold-star, $lightness: 6%) !important;
}
}
}
&--disabled {
.trends__item__name {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, $lightness: 12%);
a {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, $lightness: 12%);
}
}
.trends__item__current {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, $lightness: 12%);
}
.trends__item__sparkline {
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 {
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 {
display: flex;
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 {
padding: 10px;
@@ -14,7 +18,7 @@
text-decoration: underline;
.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 {
width: 285px;
margin-top: 10px;
@@ -78,7 +83,7 @@
flex: 0 0 auto;
border: 0;
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;
}
@@ -260,7 +265,8 @@
.navigation-panel {
margin: 0;
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;
}
@@ -278,7 +284,7 @@
.layout-single-column .ui__header {
display: flex;
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 {
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 {
0% {
transform: rotate(0deg);
@@ -85,7 +89,7 @@
text-decoration: underline;
.fa {
color: lighten($dark-text-color, 7%);
color: color.adjust($dark-text-color, $lightness: 7%);
}
}
@@ -149,7 +153,7 @@
box-sizing: border-box;
width: 100%;
clear: both;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.notification-follow,
@@ -157,7 +161,7 @@
position: relative;
// same like Status
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
.account {
border-bottom: 0 none;
@@ -167,7 +171,7 @@
.focusable {
&:focus {
outline: 0;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
&.status.status-direct.muted {
background: transparent;
@@ -175,7 +179,7 @@
.detailed-status,
.detailed-status__action-bar {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
@@ -187,7 +191,7 @@
padding: 15px;
position: relative;
height: auto;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
cursor: auto;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -215,9 +219,9 @@
}
&.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 {
@@ -249,7 +253,7 @@
background: $ui-primary-color;
&:hover {
background: lighten($ui-primary-color, 8%);
background: color.adjust($ui-primary-color, $lightness: 8%);
}
}
}
@@ -308,15 +312,15 @@
&:focus > .status__content::after {
background: linear-gradient(
rgba(lighten($ui-base-color, 4%), 0),
rgba(lighten($ui-base-color, 4%), 1)
rgba(color.adjust($ui-base-color, $lightness: 4%), 0),
rgba(color.adjust($ui-base-color, $lightness: 4%), 1)
);
}
&.status-direct > .status__content::after {
background: linear-gradient(
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0),
rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1)
);
}
@@ -339,7 +343,7 @@
background: transparent;
.icon-button.disabled {
color: lighten($action-button-color, 13%);
color: color.adjust($action-button-color, $lightness: 13%);
}
}
}
@@ -380,7 +384,7 @@
padding: 0 10px;
.detailed-status__display-name {
color: lighten($inverted-text-color, 16%);
color: color.adjust($inverted-text-color, $lightness: 16%);
span {
display: inline;
@@ -446,9 +450,9 @@
}
.detailed-status {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
padding: 14px 10px;
border-top: 1px solid lighten($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&--flex {
display: flex;
@@ -487,9 +491,9 @@
}
.detailed-status__action-bar {
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
display: flex;
flex-direction: row;
padding: 10px 0;
@@ -606,7 +610,7 @@ a.status__display-name,
&:hover,
&:focus {
background: lighten($ui-base-color, 29%);
background: color.adjust($ui-base-color, $lightness: 29%);
text-decoration: none;
}
}
@@ -623,7 +627,7 @@ a.status__display-name,
position: relative;
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px;
color: $dark-text-color;
margin-top: 14px;
@@ -685,7 +689,7 @@ a.status-card {
cursor: pointer;
&: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 {
flex: 0 0 100px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
position: relative;
& > .fa {
@@ -777,7 +781,7 @@ a.status-card {
}
.status-card.compact {
border-color: lighten($ui-base-color, 4%);
border-color: color.adjust($ui-base-color, $lightness: 4%);
&.interactive {
border: 0;
@@ -798,7 +802,7 @@ a.status-card {
}
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 {
@@ -833,7 +837,7 @@ a.status-card.compact:hover {
.attachment-list {
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px;
margin-top: 14px;
overflow: hidden;
@@ -843,7 +847,7 @@ a.status-card.compact:hover {
color: $dark-text-color;
padding: 8px 18px;
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;
flex-direction: column;
align-items: center;
@@ -896,7 +900,7 @@ a.status-card.compact:hover {
.status__wrapper--filtered__button {
display: inline;
color: lighten($ui-highlight-color, 8%);
color: color.adjust($ui-highlight-color, $lightness: 8%);
border: 0;
background: transparent;
padding: 0;
@@ -937,12 +941,12 @@ a.status-card.compact:hover {
}
&--first-in-thread {
border-top: 1px solid lighten($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
&__line {
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;
position: absolute;
top: 0;
@@ -988,7 +992,7 @@ a.status-card.compact:hover {
&__footer {
border-radius: 0 0 4px 4px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
padding: 10px;
padding-top: 12px;
display: flex;
@@ -997,7 +1001,7 @@ a.status-card.compact:hover {
&__header {
border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
padding: 10px;
display: flex;
justify-content: space-between;
@@ -1037,7 +1041,7 @@ a.status-card.compact:hover {
.picture-in-picture-placeholder {
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;
display: flex;
flex-direction: column;
@@ -1060,6 +1064,6 @@ a.status-card.compact:hover {
&:hover,
&:focus,
&: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 {
width: 700px;
margin: 0 auto;
app/javascript/flavours/glitch/styles/contrast.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import "contrast/variables";
@import "index";
@import "contrast/diff";
@use "contrast/variables";
@use "index";
@use "contrast/diff";
app/javascript/flavours/glitch/styles/contrast/variables.scss
+15 -7
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Dependent colors
$black: #000000;
@@ -11,12 +13,18 @@ $ui-primary-color: $classic-primary-color !default;
$ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default;
$darker-text-color: lighten($ui-primary-color, 20%) !default;
$dark-text-color: lighten($ui-primary-color, 12%) !default;
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
$action-button-color: lighten($ui-base-color, 50%);
$darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default;
$dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default;
$secondary-text-color: color.adjust(
$ui-secondary-color,
$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;
$lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default;
$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;
app/javascript/flavours/glitch/styles/dashboard.scss
+2
View File
@@ -1,4 +1,6 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.dashboard__counters {
display: flex;
app/javascript/flavours/glitch/styles/forms.scss
+3
View File
@@ -1,4 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px;
code {
app/javascript/flavours/glitch/styles/gts.scss
+2
View File
@@ -1,3 +1,5 @@
@use "variables" as *;
/* 🦥 GoToSocial */
/* Variables */
app/javascript/flavours/glitch/styles/gts/_config.scss
+3 -3
View File
@@ -6,8 +6,8 @@
*/
/* 🛠️ Config */
@import "colors";
@import "sizes";
@use "colors";
@use "sizes";
/* 🧩 Components */
@import "status";
@use "status";
app/javascript/flavours/glitch/styles/gts/status.scss
+6 -6
View File
@@ -1,10 +1,10 @@
/* 🚥 Status */
@import "status/status-account";
@import "status/status-display-name";
@import "status/status-icons";
@import "status/status-info";
@import "status/status-prepend";
@import "status/status-spoiler";
@use "status/status-account";
@use "status/status-display-name";
@use "status/status-icons";
@use "status/status-info";
@use "status/status-prepend";
@use "status/status-spoiler";
.status {
background-color: var(--color-status-bg);
app/javascript/flavours/glitch/styles/index.scss
+26 -26
View File
@@ -1,28 +1,28 @@
@import "mixins";
@import "variables";
@import "styles/fonts/roboto";
@import "styles/fonts/roboto-mono";
@use "mixins";
@use "variables";
@use "styles/fonts/roboto";
@use "styles/fonts/roboto-mono";
@import "reset";
@import "basics";
@import "branding";
@import "containers";
@import "lists";
@import "modal";
@import "widgets";
@import "forms";
@import "accounts";
@import "statuses";
@import "components/index";
@import "polls";
@import "about";
@import "tables";
@import "admin";
@import "accessibility";
@import "rtl";
@import "dashboard";
@import "rich_text";
@use "reset";
@use "basics";
@use "branding";
@use "containers";
@use "lists";
@use "modal";
@use "widgets";
@use "forms";
@use "accounts";
@use "statuses";
@use "components/index";
@use "polls";
@use "about";
@use "tables";
@use "admin";
@use "accessibility";
@use "rtl";
@use "dashboard";
@use "rich_text";
@import "gts";
@import "gts/config";
@import "tangerine/config";
@use "gts";
@use "gts/config";
@use "tangerine/config" as tangerine;
app/javascript/flavours/glitch/styles/mastodon-light.scss
+4 -4
View File
@@ -1,4 +1,4 @@
@import "mastodon-light/variables";
@import "index";
@import "mastodon-light/diff";
@import "mastodon-light/colors";
@use "mastodon-light/variables";
@use "index";
@use "mastodon-light/diff";
@use "mastodon-light/colors";
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+68 -62
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced.
@@ -26,23 +28,23 @@ html {
.column-inline-form,
.regeneration-indicator {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-top: 0;
}
.error-column {
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.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__section__title,
.interaction-modal {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.rules-list li::before {
@@ -50,12 +52,12 @@ html {
}
.directory__card__img {
background: lighten($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: 12%);
}
.filter-form {
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,
@@ -103,7 +105,7 @@ html {
.confirmation-modal__cancel-button,
.mute-modal__cancel-button,
.block-modal__cancel-button {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
&:hover,
&:focus,
@@ -113,15 +115,15 @@ html {
}
.column-subheading {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.getting-started,
.scrollable {
.column-link {
background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&:hover,
&:active,
@@ -132,8 +134,8 @@ html {
}
.getting-started .navigation-bar {
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
@@ -148,7 +150,7 @@ html {
.setting-text,
.report-dialog-modal__textarea,
.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 {
@@ -169,18 +171,18 @@ html {
.compose-form__poll-wrapper select {
background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
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;
}
.compose-form__poll-wrapper,
.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 {
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;
}
@@ -195,7 +197,7 @@ html {
.compose-form__modifiers {
.compose-form__upload__actions .icon-button,
.compose-form__upload__warning .icon-button {
color: lighten($white, 7%);
color: color.adjust($white, $lightness: 7%);
&:active,
&:focus,
@@ -206,11 +208,11 @@ html {
}
.compose-form__buttons-wrapper {
background: darken($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: -6%);
}
.autosuggest-textarea__suggestions {
background: darken($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: -6%);
}
.autosuggest-textarea__suggestions__item {
@@ -218,16 +220,16 @@ html {
&:focus,
&:active,
&.selected {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
}
}
.emoji-mart-bar {
border-color: lighten($ui-base-color, 4%);
border-color: color.adjust($ui-base-color, $lightness: 4%);
&:first-child {
background: darken($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: -6%);
}
}
@@ -242,7 +244,7 @@ html {
// Change the background colors of statuses
.focusable:focus {
background: lighten($white, 4%);
background: color.adjust($white, $lightness: 4%);
}
.detailed-status,
@@ -257,7 +259,7 @@ html {
&:hover,
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
}
@@ -320,12 +322,12 @@ html {
.language-dropdown__dropdown__results__item
.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__common-name {
color: darken($ui-base-color, 12%);
color: color.adjust($ui-base-color, $lightness: -12%);
}
.dropdown-menu__separator,
@@ -333,11 +335,11 @@ html {
.dropdown-menu__container__header,
.compare-history-modal .report-modal__target,
.report-dialog-modal .poll__option.dialog-option {
border-bottom-color: lighten($ui-base-color, 4%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 4%);
}
.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
@@ -359,7 +361,7 @@ html {
.picture-in-picture__footer,
.reactions-bar__item {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.reactions-bar__item:hover,
@@ -372,8 +374,12 @@ html {
}
.reactions-bar__item.active {
background-color: mix($white, $ui-highlight-color, 80%);
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
background-color: color.mix($white, $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 {
@@ -395,16 +401,16 @@ html {
}
.report-modal__comment {
border-right-color: lighten($ui-base-color, 8%);
border-right-color: color.adjust($ui-base-color, $lightness: 8%);
}
.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 {
background: darken($ui-base-color, 4%);
border: 1px solid lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
border-top: 0;
}
@@ -419,7 +425,7 @@ html {
}
.flash-message.warning {
color: lighten($gold-star, 16%);
color: color.adjust($gold-star, $lightness: 16%);
}
.boost-modal__action-bar,
@@ -428,14 +434,14 @@ html {
.block-modal__action-bar,
.onboarding-modal__paginator,
.error-modal__footer {
background: darken($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: -6%);
.onboarding-modal__nav,
.error-modal__nav {
&:hover,
&:focus,
&:active {
background-color: darken($ui-base-color, 12%);
background-color: color.adjust($ui-base-color, $lightness: -12%);
}
}
}
@@ -446,10 +452,10 @@ html {
.embed-modal .embed-modal__container .embed-modal__html {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&:focus {
border-color: lighten($ui-base-color, 12%);
border-color: color.adjust($ui-base-color, $lightness: 12%);
background: $white;
}
}
@@ -459,12 +465,12 @@ html {
}
.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-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
@@ -477,7 +483,7 @@ html {
// Change the default colors used on some parts of the profile pages
.activity-stream-tabs {
background: $account-background-color;
border-bottom-color: lighten($ui-base-color, 8%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
}
.nothing-here,
@@ -485,7 +491,7 @@ html {
.directory__tag > a,
.directory__tag > div {
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) {
border-left: 0;
@@ -501,15 +507,15 @@ html {
input[type="password"],
textarea {
&:hover {
border-color: lighten($ui-base-color, 12%);
border-color: color.adjust($ui-base-color, $lightness: 12%);
}
}
}
.picture-in-picture-placeholder {
background: $white;
border-color: lighten($ui-base-color, 8%);
color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
color: color.adjust($ui-base-color, $lightness: 8%);
}
.directory__tag > a {
@@ -528,12 +534,12 @@ html {
&__toolbar,
&__row,
.nothing-here {
border-color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
}
}
.activity-stream {
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
&--under-tabs {
border-top: 0;
@@ -545,7 +551,7 @@ html {
.detailed-status.light,
.more.light,
.status.light {
border-bottom-color: lighten($ui-base-color, 8%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
}
}
@@ -612,7 +618,7 @@ html {
.reply-indicator {
background: transparent;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
.status__content,
@@ -636,9 +642,9 @@ html {
}
.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
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;
}
@@ -650,15 +656,15 @@ html {
&:not([disabled]) {
&:hover,
&:focus {
background: darken($ui-secondary-color, 10%);
background: color.adjust($ui-secondary-color, $lightness: -10%);
}
&.active {
background-color: darken($ui-highlight-color, 2%);
background-color: color.adjust($ui-highlight-color, $lightness: -2%);
&:hover,
&:focus {
background: lighten($ui-highlight-color, 10%);
background: color.adjust($ui-highlight-color, $lightness: 10%);
}
}
}
@@ -666,16 +672,16 @@ html {
.glitch.local-settings {
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 {
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
}
.glitch.local-settings__navigation__item {
background: darken($ui-base-color, 8%);
border-bottom: 1px lighten($ui-base-color, 8%) solid;
background: color.adjust($ui-base-color, $lightness: -8%);
border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid;
&:hover {
background: $ui-base-color;
@@ -705,8 +711,8 @@ html {
.status.collapsed .status__content::after {
background: linear-gradient(
rgba(darken($ui-base-color, 13%), 0),
rgba(darken($ui-base-color, 13%), 1)
rgba(color.adjust($ui-base-color, $lightness: -13%), 0),
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
$black: #000000;
$white: #ffffff;
@@ -14,7 +16,7 @@ $grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz
// Differences
$success-green: lighten(#3c754d, 8%);
$success-green: color.adjust(#3c754d, $lightness: 8%);
$base-overlay-background: $white !default;
$valid-value-color: $success-green !default;
@@ -34,7 +36,10 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default;
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
$highlight-text-color: color.adjust(
$ui-highlight-color,
$lightness: -8%
) !default;
$dark-text-color: #444b5d;
$action-button-color: #606984;
@@ -47,11 +52,19 @@ $account-background-color: $white !default;
// Invert darkened and lightened colors
@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) {
@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";
app/javascript/flavours/glitch/styles/modal.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
.modal-layout {
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>')
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 {
margin-top: 16px;
font-size: 14px;
@@ -16,7 +20,7 @@
&__chart {
border-radius: 4px;
display: block;
background: darken($ui-primary-color, 5%);
background: color.adjust($ui-primary-color, $lightness: -5%);
height: 5px;
min-width: 1%;
@@ -47,17 +51,17 @@
// duplication
&::-moz-progress-bar {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
background: color.adjust($ui-primary-color, $lightness: -5%);
}
&::-ms-fill {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
background: color.adjust($ui-primary-color, $lightness: -5%);
}
&::-webkit-progress-value {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
background: color.adjust($ui-primary-color, $lightness: -5%);
}
}
@@ -94,7 +98,7 @@
outline: 0;
font-family: inherit;
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;
padding: 6px 10px;
@@ -136,7 +140,7 @@
&:active,
&:focus,
&:hover {
border-color: lighten($valid-value-color, 15%);
border-color: color.adjust($valid-value-color, $lightness: 15%);
border-width: 4px;
}
@@ -224,7 +228,7 @@
}
.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;
ul {
@@ -240,7 +244,8 @@
}
.poll__footer {
border-top: 1px solid darken($simple-background-color, 8%);
border-top: 1px solid
color.adjust($simple-background-color, $lightness: -8%);
padding: 10px;
display: flex;
align-items: center;
@@ -296,9 +301,9 @@
outline: 0;
font-family: inherit;
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;
border: 1px solid darken($simple-background-color, 14%);
border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
border-radius: 4px;
padding: 6px 10px;
padding-inline-end: 30px;
@@ -309,7 +314,7 @@
color: $dark-text-color;
&__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7);
background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7);
&.leading {
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,
.e-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 {
direction: rtl;
@@ -94,15 +98,15 @@ body.rtl {
&::after {
background-image: linear-gradient(
to left,
rgba(darken($ui-base-color, 10%), 0),
darken($ui-base-color, 10%)
rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
color.adjust($ui-base-color, $lightness: -10%)
);
}
}
.simple_form select {
background: darken($ui-base-color, 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>")
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(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
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 {
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
@@ -69,7 +73,7 @@
}
&--highlighted .entry {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
app/javascript/flavours/glitch/styles/tables.scss
+2
View File
@@ -1,4 +1,6 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.table {
width: 100%;
app/javascript/flavours/glitch/styles/tangerine/_config.scss
+2 -2
View File
@@ -4,7 +4,7 @@
*/
/* 🛠️ Config */
@import "keyframes";
@use "keyframes";
/* 🧩 Components */
@import "status-bar";
@use "status-bar";
app/javascript/flavours/glitch/styles/widgets.scss
+2
View File
@@ -1,5 +1,7 @@
@use "sass:color";
@use "sass:math";
@use "mixins" as *;
@use "variables" as *;
.hero-widget {
margin-bottom: 10px;
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";