treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Upgrade to Stylelint 15 with Prettier 

Port 0c9d455ea5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/53/head
Nick Schonning 2023-02-12 22:57:03 -05:00 committed by Claire
parent 7e64eef73b
commit ea9a1d79df
31 changed files with 406 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.prettierignore
View File

@ -74,9 +74,15 @@ docker-compose.override.yml
# Ignore vendored CSS reset # Ignore vendored CSS reset
app/javascript/styles/mastodon/reset.scss app/javascript/styles/mastodon/reset.scss
# Ignore glitch-soc emoji map file
/app/javascript/flavours/glitch/features/emoji/emoji_map.json
# Ignore glitch-soc locale files # Ignore glitch-soc locale files
/app/javascript/flavours/glitch/locales /app/javascript/flavours/glitch/locales
/config/locales-glitch /config/locales-glitch
# Ignore glitch-soc emoji map file # Ignore glitch-soc vendored CSS reset
/app/javascript/flavours/glitch/features/emoji/emoji_map.json app/javascript/flavours/glitch/styles/reset.scss
# Ignore win95 theme
app/javascript/styles/win95.scss

5
app/javascript/flavours/glitch/styles/_mixins.scss
View File

@ -4,7 +4,7 @@
background-clip: padding-box; background-clip: padding-box;
} }
@mixin avatar-size($size:48px) { @mixin avatar-size($size: 48px) {
width: $size; width: $size;
height: $size; height: $size;
background-size: $size $size; background-size: $size $size;
@ -22,7 +22,8 @@
} }
@mixin limited-single-column($media, $parent: '&') { @mixin limited-single-column($media, $parent: '&') {
.auto-columns #{$parent}, .single-column #{$parent} { .auto-columns #{$parent},
.single-column #{$parent} {
@media #{$media} { @media #{$media} {
@content; @content;
} }

7
app/javascript/flavours/glitch/styles/accessibility.scss
View File

@ -1,4 +1,7 @@
$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' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; $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'
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
%emoji-color-inversion { %emoji-color-inversion {
filter: invert(1); filter: invert(1);
@ -19,7 +22,7 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
&.active::after { &.active::after {
position: absolute; position: absolute;
content: "\F00C"; content: '\F00C';
font-size: 50%; font-size: 50%;
font-family: FontAwesome; font-family: FontAwesome;
right: -0.55em; right: -0.55em;

25
app/javascript/flavours/glitch/styles/admin.scss
View File

@ -1,4 +1,4 @@
@use "sass:math"; @use 'sass:math';
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;
$sidebar-width: 240px; $sidebar-width: 240px;
@ -350,7 +350,7 @@ $content-width: 840px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6); border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
margin: 20px 0; margin: 20px 0;
&.spacer { &.spacer {
@ -1147,7 +1147,10 @@ a.name-tag,
@for $i from 0 through 10 { @for $i from 0 through 10 {
&--#{10 * $i} { &--#{10 * $i} {
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); background-color: rgba(
$ui-highlight-color,
1 * (math.div(max(1, $i), 10))
);
} }
} }
} }
@ -1236,7 +1239,12 @@ a.sparkline {
.skeleton { .skeleton {
background-color: lighten($ui-base-color, 8%); background-color: lighten($ui-base-color, 8%);
background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%)); background-image: linear-gradient(
90deg,
lighten($ui-base-color, 8%),
lighten($ui-base-color, 12%),
lighten($ui-base-color, 8%)
);
background-size: 200px 100%; background-size: 200px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 4px; border-radius: 4px;
@ -1285,7 +1293,10 @@ a.sparkline {
@for $i from 0 through 10 { @for $i from 0 through 10 {
&--#{10 * $i} { &--#{10 * $i} {
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); background-color: rgba(
$ui-highlight-color,
1 * (math.div(max(1, $i), 10))
);
} }
} }
} }
@ -1431,7 +1442,7 @@ a.sparkline {
&::after { &::after {
display: block; display: block;
content: ""; content: '';
width: 50px; width: 50px;
height: 21px; height: 21px;
position: absolute; position: absolute;
@ -1825,7 +1836,7 @@ a.sparkline {
&::after { &::after {
position: absolute; position: absolute;
content: ""; content: '';
width: 1px; width: 1px;
background: $highlight-text-color; background: $highlight-text-color;
bottom: 0; bottom: 0;

10
app/javascript/flavours/glitch/styles/basics.scss
View File

@ -2,7 +2,7 @@
@if type-of($color) == 'color' { @if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4); $color: str-slice(ie-hex-str($color), 4);
} }
@return '%23' + unquote($color) @return '%23' + unquote($color);
} }
body { body {
@ -13,9 +13,9 @@ body {
font-weight: 400; font-weight: 400;
color: $primary-text-color; color: $primary-text-color;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: 'kern';
text-size-adjust: none; text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
&.system-font { &.system-font {
@ -30,7 +30,9 @@ body {
// Droid Sans => Older Androids (<4.0) // Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11 // Helvetica Neue => Older macOS <10.11
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', $font-sans-serif, sans-serif;
} }
&.app-body { &.app-body {

34
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -30,7 +30,9 @@
border: 0; border: 0;
padding: 0; padding: 0;
& > .account__avatar-wrapper { margin: 0 8px 0 0 } & > .account__avatar-wrapper {
margin: 0 8px 0 0;
}
& > .display-name { & > .display-name {
height: 24px; height: 24px;
@ -379,7 +381,7 @@
&::before, &::before,
&::after { &::after {
display: block; display: block;
content: ""; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@ -710,22 +712,22 @@
padding: 2px 6px; padding: 2px 6px;
color: $darker-text-color; color: $darker-text-color;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($darker-text-color, 7%); color: lighten($darker-text-color, 7%);
background-color: rgba($darker-text-color, 0.15); background-color: rgba($darker-text-color, 0.15);
} }
&:focus { &:focus {
background-color: rgba($darker-text-color, 0.3); background-color: rgba($darker-text-color, 0.3);
} }
&[disabled] { &[disabled] {
color: darken($darker-text-color, 13%); color: darken($darker-text-color, 13%);
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
} }
} }
.flex-spacer { .flex-spacer {

6
app/javascript/flavours/glitch/styles/components/announcements.scss
View File

@ -181,7 +181,11 @@
&.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(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); background-color: mix(
lighten($ui-base-color, 12%),
$ui-highlight-color,
80%
);
.reactions-bar__item__count { .reactions-bar__item__count {
color: lighten($highlight-text-color, 8%); color: lighten($highlight-text-color, 8%);

17
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -286,7 +286,7 @@ $ui-header-height: 55px;
&::before { &::before {
display: block; display: block;
content: ""; content: '';
position: absolute; position: absolute;
bottom: -13px; bottom: -13px;
left: 0; left: 0;
@ -296,7 +296,11 @@ $ui-header-height: 55px;
pointer-events: none; pointer-events: none;
height: 28px; height: 28px;
z-index: 1; z-index: 1;
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); background: radial-gradient(
ellipse,
rgba($ui-highlight-color, 0.23) 0%,
rgba($ui-highlight-color, 0) 60%
);
} }
} }
@ -435,10 +439,10 @@ $ui-header-height: 55px;
} }
} }
.layout-single-column .column-header__notif-cleaning-buttons { .layout-single-column .column-header__notif-cleaning-buttons {
@media screen and (min-width: $no-gap-breakpoint) { @media screen and (min-width: $no-gap-breakpoint) {
b, i { b,
i {
margin-right: 5px; margin-right: 5px;
} }
@ -622,7 +626,8 @@ $ui-header-height: 55px;
flex: 1 1 auto; flex: 1 1 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@supports(display: grid) { // hack to fix Chrome <57 @supports (display: grid) {
// hack to fix Chrome <57
contain: strict; contain: strict;
} }
@ -916,7 +921,7 @@ $ui-header-height: 55px;
p { p {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: $darker-text-color; color: $darker-text-color;
} }

99
app/javascript/flavours/glitch/styles/components/compose_form.scss
View File

@ -32,12 +32,12 @@
.spoiler-input { .spoiler-input {
height: 0; height: 0;
transform-origin: bottom; transform-origin: bottom;
opacity: 0.0; opacity: 0;
&.spoiler-input--visible { &.spoiler-input--visible {
height: 36px; height: 36px;
margin-bottom: 11px; margin-bottom: 11px;
opacity: 1.0; opacity: 1;
} }
input { input {
@ -59,8 +59,12 @@
color: $dark-text-color; color: $dark-text-color;
} }
&:focus { outline: 0 } &:focus {
@include single-column('screen and (max-width: 630px)') { font-size: 16px } outline: 0;
}
@include single-column('screen and (max-width: 630px)') {
font-size: 16px;
}
} }
} }
@ -98,7 +102,7 @@
color: $highlight-text-color; color: $highlight-text-color;
} }
input[type=checkbox] { input[type='checkbox'] {
display: none; display: none;
} }
@ -118,7 +122,9 @@
&.active { &.active {
border-color: $highlight-text-color; border-color: $highlight-text-color;
background: $highlight-text-color url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>") center center no-repeat; background: $highlight-text-color
url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>")
center center no-repeat;
} }
} }
} }
@ -137,7 +143,9 @@
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden; overflow: hidden;
& > .account.small { color: $inverted-text-color; } & > .account.small {
color: $inverted-text-color;
}
} }
.reply-indicator__cancel { .reply-indicator__cancel {
@ -159,7 +167,9 @@
padding-top: 5px; padding-top: 5px;
overflow: hidden; overflow: hidden;
p, pre, blockquote { p,
pre,
blockquote {
margin-bottom: 20px; margin-bottom: 20px;
white-space: pre-wrap; white-space: pre-wrap;
@ -168,12 +178,17 @@
} }
} }
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
h1, h2 { h1,
h2 {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
} }
@ -182,7 +197,9 @@
font-size: 16px; font-size: 16px;
} }
h3, h4, h5 { h3,
h4,
h5 {
font-weight: 500; font-weight: 500;
} }
@ -197,11 +214,13 @@
} }
} }
b, strong { b,
strong {
font-weight: 700; font-weight: 700;
} }
em, i { em,
i {
font-style: italic; font-style: italic;
} }
@ -215,7 +234,8 @@
vertical-align: super; vertical-align: super;
} }
ul, ol { ul,
ol {
margin-left: 1em; margin-left: 1em;
p { p {
@ -235,13 +255,17 @@
color: $lighter-text-color; color: $lighter-text-color;
text-decoration: none; text-decoration: none;
&:hover { text-decoration: underline } &:hover {
text-decoration: underline;
}
&.mention { &.mention {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
span { text-decoration: underline } span {
text-decoration: underline;
}
} }
} }
} }
@ -321,7 +345,7 @@
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
opacity: .8; opacity: 0.8;
} }
} }
@ -358,7 +382,9 @@
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&.selected { background: darken($ui-secondary-color, 10%) } &.selected {
background: darken($ui-secondary-color, 10%);
}
> .account, > .account,
> .emoji, > .emoji,
@ -396,7 +422,9 @@
& > .account.small { & > .account.small {
.display-name { .display-name {
& > span { color: $lighter-text-color } & > span {
color: $lighter-text-color;
}
} }
} }
} }
@ -430,7 +458,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
& > .close { mix-blend-mode: difference } & > .close {
mix-blend-mode: difference;
}
} }
.icon-button { .icon-button {
@ -455,12 +485,22 @@
left: 0; left: 0;
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); background: linear-gradient(
0deg,
rgba($base-shadow-color, 0.8) 0,
rgba($base-shadow-color, 0.35) 80%,
transparent
);
} }
} }
.compose-form__upload__actions { .compose-form__upload__actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); background: linear-gradient(
180deg,
rgba($base-shadow-color, 0.8) 0,
rgba($base-shadow-color, 0.35) 80%,
transparent
);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
@ -543,7 +583,8 @@
margin: 0 3px; margin: 0 3px;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
border-style: none none none solid; border-style: none none none solid;
border-color: transparent transparent transparent darken($simple-background-color, 24%); border-color: transparent transparent transparent
darken($simple-background-color, 24%);
padding: 0; padding: 0;
width: 0; width: 0;
height: 27px; height: 27px;
@ -604,7 +645,9 @@
flex: 1 1 auto; flex: 1 1 auto;
color: $lighter-text-color; color: $lighter-text-color;
&:not(:first-child) { margin-left: 10px } &:not(:first-child) {
margin-left: 10px;
}
strong { strong {
display: block; display: block;
@ -621,11 +664,15 @@
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
color: $primary-text-color; color: $primary-text-color;
strong { color: $primary-text-color } strong {
color: $primary-text-color;
}
} }
} }
&.active:hover { background: lighten($ui-highlight-color, 4%) } &.active:hover {
background: lighten($ui-highlight-color, 4%);
}
} }
.compose-form__publish { .compose-form__publish {

10
app/javascript/flavours/glitch/styles/components/directory.scss
View File

@ -11,7 +11,11 @@
} }
.scrollable .account-card__bio::after { .scrollable .account-card__bio::after {
background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); background: linear-gradient(
to left,
lighten($ui-base-color, 8%),
transparent
);
} }
.filter-form { .filter-form {
@ -39,8 +43,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
input[type=radio], input[type='radio'],
input[type=checkbox] { input[type='checkbox'] {
display: none; display: none;
} }

12
app/javascript/flavours/glitch/styles/components/doodle.scss
View File

@ -38,7 +38,8 @@ $doodleBg: #d9e1e8;
margin-right: 2px; margin-right: 2px;
} }
input[type="number"],input[type="text"] { input[type='number'],
input[type='text'] {
width: 40px; width: 40px;
} }
span.val { span.val {
@ -52,7 +53,7 @@ $doodleBg: #d9e1e8;
.doodle-palette { .doodle-palette {
padding-right: 0 !important; padding-right: 0 !important;
border: 1px solid black; border: 1px solid black;
line-height: .2rem; line-height: 0.2rem;
flex-grow: 0; flex-grow: 0;
background: white; background: white;
@ -60,14 +61,15 @@ $doodleBg: #d9e1e8;
appearance: none; appearance: none;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin: 0; padding: 0; margin: 0;
padding: 0;
text-align: center; text-align: center;
color: black; color: black;
text-shadow: 0 0 1px white; text-shadow: 0 0 1px white;
cursor: pointer; cursor: pointer;
box-shadow: inset 0 0 1px rgba(white, .5); box-shadow: inset 0 0 1px rgba(white, 0.5);
border: 1px solid black; border: 1px solid black;
outline-offset:-1px; outline-offset: -1px;
&.foreground { &.foreground {
outline: 1px dashed white; outline: 1px dashed white;

41
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -34,7 +34,8 @@
} }
@include single-column('screen and (max-width: 630px)') { @include single-column('screen and (max-width: 630px)') {
:root & { // Overrides `.wide` for single-column view :root & {
// Overrides `.wide` for single-column view
flex: auto; flex: auto;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@ -43,7 +44,9 @@
} }
} }
.react-swipeable-view-container & { height: 100% } .react-swipeable-view-container & {
height: 100%;
}
} }
.drawer--header { .drawer--header {
@ -84,8 +87,14 @@
margin-bottom: 10px; margin-bottom: 10px;
flex: none; flex: none;
@include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 } @include limited-single-column(
@include single-column('screen and (max-width: 630px)') { font-size: 16px } 'screen and (max-width: #{$no-gap-breakpoint})'
) {
margin-bottom: 0;
}
@include single-column('screen and (max-width: 630px)') {
font-size: 16px;
}
} }
.search-popout { .search-popout {
@ -192,7 +201,9 @@
} }
.drawer__inner__mastodon { .drawer__inner__mastodon {
background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto; background: lighten($ui-base-color, 13%)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
no-repeat bottom / 100% auto;
flex: 1; flex: 1;
min-height: 47px; min-height: 47px;
display: none; display: none;
@ -240,13 +251,27 @@
@for $i from 0 through 3 { @for $i from 0 through 3 {
.mbstobon-#{$i} .drawer__inner__mastodon { .mbstobon-#{$i} .drawer__inner__mastodon {
@if $i == 3 { @if $i == 3 {
background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); background: url('~flavours/glitch/images/wave-drawer.png')
no-repeat
bottom /
100%
auto,
lighten($ui-base-color, 13%);
} @else { } @else {
background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); background: url('~flavours/glitch/images/wave-drawer-glitched.png')
no-repeat
bottom /
100%
auto,
lighten($ui-base-color, 13%);
} }
& > .mastodon { & > .mastodon {
background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain; background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
no-repeat
left
bottom /
contain;
@if $i != 3 { @if $i != 3 {
filter: contrast(50%) brightness(50%); filter: contrast(50%) brightness(50%);

2
app/javascript/flavours/glitch/styles/components/emoji.scss
View File

@ -2,7 +2,7 @@
font-size: inherit; font-size: inherit;
vertical-align: middle; vertical-align: middle;
object-fit: contain; object-fit: contain;
margin: -.2ex .15em .2ex; margin: -0.2ex 0.15em 0.2ex;
width: 16px; width: 16px;
height: 16px; height: 16px;

8
app/javascript/flavours/glitch/styles/components/emoji_picker.scss
View File

@ -46,7 +46,7 @@
text-align: center; text-align: center;
padding: 12px 4px; padding: 12px 4px;
overflow: hidden; overflow: hidden;
transition: color .1s ease-out; transition: color 0.1s ease-out;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: 0; border: 0;
@ -174,7 +174,7 @@
&:hover::before { &:hover::before {
z-index: 0; z-index: 0;
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -246,8 +246,8 @@
padding: 5px 6px; padding: 5px 6px;
padding-top: 70px; padding-top: 70px;
.emoji-mart-no-results-label { .emoji-mart-no-results-label {
margin-top: .2em; margin-top: 0.2em;
} }
.emoji-mart-emoji:hover::before { .emoji-mart-emoji:hover::before {

36
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -370,7 +370,7 @@ body > [data-popper-placement] {
.ellipsis { .ellipsis {
&::after { &::after {
content: "…"; content: '…';
} }
} }
@ -480,11 +480,11 @@ body > [data-popper-placement] {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */ -ms-overflow-style: none; /* IE 10+ */
* { * {
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */ -ms-overflow-style: none; /* IE 10+ */
} }
&::-webkit-scrollbar, &::-webkit-scrollbar,
@ -950,7 +950,8 @@ body > [data-popper-placement] {
overflow-y: auto; overflow-y: auto;
} }
@supports(display: grid) { // hack to fix Chrome <57 @supports (display: grid) {
// hack to fix Chrome <57
contain: strict; contain: strict;
} }
@ -971,7 +972,8 @@ body > [data-popper-placement] {
} }
.scrollable.fullscreen { .scrollable.fullscreen {
@supports(display: grid) { // hack to fix Chrome <57 @supports (display: grid) {
// hack to fix Chrome <57
contain: none; contain: none;
} }
} }
@ -1014,7 +1016,8 @@ body > [data-popper-placement] {
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
.react-toggle-track {
background-color: darken($ui-base-color, 10%); background-color: darken($ui-base-color, 10%);
} }
@ -1022,7 +1025,8 @@ body > [data-popper-placement] {
background-color: darken($ui-highlight-color, 2%); background-color: darken($ui-highlight-color, 2%);
} }
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
.react-toggle-track {
background-color: $ui-highlight-color; background-color: $ui-highlight-color;
} }
@ -1654,8 +1658,8 @@ button.icon-button.active i.fa-retweet {
.icon-badge { .icon-badge {
position: absolute; position: absolute;
display: block; display: block;
right: -.25em; right: -0.25em;
top: -.25em; top: -0.25em;
background-color: $ui-highlight-color; background-color: $ui-highlight-color;
border-radius: 50%; border-radius: 50%;
font-size: 75%; font-size: 75%;
@ -1688,7 +1692,7 @@ button.icon-button.active i.fa-retweet {
border-radius: 50%; border-radius: 50%;
width: 0.625rem; width: 0.625rem;
height: 0.625rem; height: 0.625rem;
margin: -.1ex .15em .1ex; margin: -0.1ex 0.15em 0.1ex;
} }
&__content { &__content {
@ -1797,9 +1801,15 @@ noscript {
} }
@keyframes flicker { @keyframes flicker {
0% { opacity: 1; } 0% {
30% { opacity: 0.75; } opacity: 1;
100% { opacity: 1; } }
30% {
opacity: 0.75;
}
100% {
opacity: 1;
}
} }
@import 'boost'; @import 'boost';

11
app/javascript/flavours/glitch/styles/components/local_settings.scss
View File

@ -11,12 +11,14 @@
max-height: 450px; max-height: 450px;
overflow: hidden; overflow: hidden;
label, legend { label,
legend {
display: block; display: block;
font-size: 14px; font-size: 14px;
} }
.boolean label, .radio_buttons label { .boolean label,
.radio_buttons label {
position: relative; position: relative;
padding-left: 28px; padding-left: 28px;
padding-top: 3px; padding-top: 3px;
@ -58,7 +60,7 @@
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
transition: background .3s; transition: background 0.3s;
.text-icon-button { .text-icon-button {
color: inherit; color: inherit;
@ -74,7 +76,8 @@
color: $primary-text-color; color: $primary-text-color;
} }
&.close, &.close:hover { &.close,
&.close:hover {
background: $error-value-color; background: $error-value-color;
color: $primary-text-color; color: $primary-text-color;
} }

18
app/javascript/flavours/glitch/styles/components/media.scss
View File

@ -348,7 +348,7 @@
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 0; font-size: 0;
transition: opacity .2s ease-in-out; transition: opacity 0.2s ease-in-out;
&.active { &.active {
opacity: 1; opacity: 1;
@ -372,7 +372,6 @@
.video-player__volume__handle { .video-player__volume__handle {
bottom: 23px; bottom: 23px;
} }
} }
.audio-player { .audio-player {
@ -506,10 +505,15 @@
left: 0; left: 0;
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); background: linear-gradient(
0deg,
rgba($base-shadow-color, 0.85) 0,
rgba($base-shadow-color, 0.45) 60%,
transparent
);
padding: 0 15px; padding: 0 15px;
opacity: 0; opacity: 0;
transition: opacity .1s ease; transition: opacity 0.1s ease;
&.active { &.active {
opacity: 1; opacity: 1;
@ -655,7 +659,7 @@
} }
&::before { &::before {
content: ""; content: '';
width: 50px; width: 50px;
background: rgba($white, 0.35); background: rgba($white, 0.35);
border-radius: 4px; border-radius: 4px;
@ -725,7 +729,7 @@
position: relative; position: relative;
&::before { &::before {
content: ""; content: '';
width: 100%; width: 100%;
background: rgba($white, 0.35); background: rgba($white, 0.35);
border-radius: 4px; border-radius: 4px;
@ -762,7 +766,7 @@
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 & {
transition: opacity .1s ease; transition: opacity 0.1s ease;
} }
&.active { &.active {

12
app/javascript/flavours/glitch/styles/components/modal.scss
View File

@ -269,7 +269,8 @@
} }
.onboarding-modal__page__wrapper-0 { .onboarding-modal__page__wrapper-0 {
background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom /
auto 250px;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
@ -989,7 +990,8 @@
font-size: 14px; font-size: 14px;
label, input { label,
input {
vertical-align: middle; vertical-align: middle;
} }
} }
@ -1020,7 +1022,9 @@
width: auto; width: auto;
outline: 0; outline: 0;
font-family: inherit; 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>") no-repeat right 8px center / auto 16px; 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>")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
@ -1280,7 +1284,7 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline text-decoration: underline;
} }
} }
} }

4
app/javascript/flavours/glitch/styles/components/privacy_policy.scss
View File

@ -85,14 +85,14 @@
counter-increment: list-counter; counter-increment: list-counter;
&::before { &::before {
content: counter(list-counter) "."; content: counter(list-counter) '.';
position: absolute; position: absolute;
left: 0; left: 0;
} }
} }
ul > li::before { ul > li::before {
content: ""; content: '';
position: absolute; position: absolute;
background-color: $darker-text-color; background-color: $darker-text-color;
border-radius: 50%; border-radius: 50%;

8
app/javascript/flavours/glitch/styles/components/sensitive.scss
View File

@ -17,8 +17,10 @@
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
text-transform: uppercase; text-transform: uppercase;
opacity: .9; opacity: 0.9;
transition: opacity .1s ease; transition: opacity 0.1s ease;
.media-gallery:hover & { opacity: 1 } .media-gallery:hover & {
opacity: 1;
}
} }

2
app/javascript/flavours/glitch/styles/components/single_column.scss
View File

@ -140,7 +140,7 @@
.scrollable { .scrollable {
overflow: visible; overflow: visible;
@supports(display: grid) { @supports (display: grid) {
contain: content; contain: content;
} }
} }

71
app/javascript/flavours/glitch/styles/components/status.scss
View File

@ -67,7 +67,9 @@
margin: -3px 0 0; margin: -3px 0 0;
} }
p, pre, blockquote { p,
pre,
blockquote {
margin-bottom: 20px; margin-bottom: 20px;
white-space: pre-wrap; white-space: pre-wrap;
unicode-bidi: plaintext; unicode-bidi: plaintext;
@ -86,12 +88,17 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
h1, h2 { h1,
h2 {
font-weight: 700; font-weight: 700;
font-size: 1.2em; font-size: 1.2em;
} }
@ -100,7 +107,9 @@
font-size: 1.1em; font-size: 1.1em;
} }
h3, h4, h5 { h3,
h4,
h5 {
font-weight: 500; font-weight: 500;
} }
@ -115,11 +124,13 @@
} }
} }
b, strong { b,
strong {
font-weight: 700; font-weight: 700;
} }
em, i { em,
i {
font-style: italic; font-style: italic;
} }
@ -133,7 +144,8 @@
vertical-align: super; vertical-align: super;
} }
ul, ol { ul,
ol {
margin-left: 2em; margin-left: 2em;
p { p {
@ -317,8 +329,12 @@
} }
@keyframes fade { @keyframes fade {
0% { opacity: 0; } 0% {
100% { opacity: 1; } opacity: 0;
}
100% {
opacity: 1;
}
} }
opacity: 1; opacity: 1;
@ -381,9 +397,14 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); background-image: linear-gradient(
to bottom,
rgba($base-shadow-color, 0.75),
rgba($base-shadow-color, 0.65) 24px,
rgba($base-shadow-color, 0.8)
);
pointer-events: none; pointer-events: none;
content: ""; content: '';
} }
.display-name:hover .display-name__html { .display-name:hover .display-name__html {
@ -397,13 +418,16 @@
padding-top: 0; padding-top: 0;
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1)); background: linear-gradient(
rgba($ui-base-color, 0),
rgba($ui-base-color, 1)
);
pointer-events: none; pointer-events: none;
} }
@ -412,10 +436,16 @@
} }
} }
&:focus > .status__content:after { &:focus > .status__content:after {
background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); background: linear-gradient(
rgba(lighten($ui-base-color, 4%), 0),
rgba(lighten($ui-base-color, 4%), 1)
);
} }
&.status-direct > .status__content:after { &.status-direct > .status__content:after {
background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); background: linear-gradient(
rgba(lighten($ui-base-color, 8%), 0),
rgba(lighten($ui-base-color, 8%), 1)
);
} }
.notification__message { .notification__message {
@ -832,7 +862,8 @@ a.status__display-name,
bottom: -1px; bottom: -1px;
} }
a .fa, a:hover .fa { a .fa,
a:hover .fa {
color: inherit; color: inherit;
} }
} }
@ -850,9 +881,9 @@ a.status-card {
cursor: zoom-in; cursor: zoom-in;
display: block; display: block;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
} }
.status-card-video { .status-card-video {
@ -1063,7 +1094,7 @@ a.status-card.compact:hover {
&.unread { &.unread {
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

2
app/javascript/flavours/glitch/styles/contrast/variables.scss
View File

@ -18,5 +18,5 @@ $highlight-text-color: lighten($ui-highlight-color, 10%) !default;
$action-button-color: lighten($ui-base-color, 50%); $action-button-color: lighten($ui-base-color, 50%);
$inverted-text-color: $black !default; $inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color,6%) !default; $lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default; $light-text-color: darken($ui-primary-color, 40%) !default;

48
app/javascript/flavours/glitch/styles/forms.scss
View File

@ -300,7 +300,7 @@ code {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 4px; border-radius: 4px;
background: url("images/void.png"); background: url('images/void.png');
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -385,7 +385,7 @@ code {
flex: 1 1 auto; flex: 1 1 auto;
} }
input[type=checkbox] { input[type='checkbox'] {
position: absolute; position: absolute;
left: 0; left: 0;
top: 5px; top: 5px;
@ -401,12 +401,12 @@ code {
border-radius: 4px; border-radius: 4px;
} }
input[type=text], input[type='text'],
input[type=number], input[type='number'],
input[type=email], input[type='email'],
input[type=password], input[type='password'],
input[type=url], input[type='url'],
input[type=datetime-local], input[type='datetime-local'],
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
@ -444,11 +444,11 @@ code {
} }
} }
input[type=text], input[type='text'],
input[type=number], input[type='number'],
input[type=email], input[type='email'],
input[type=password], input[type='password'],
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: lighten($error-red, 12%);
@ -460,11 +460,11 @@ code {
color: lighten($error-red, 12%); color: lighten($error-red, 12%);
} }
input[type=text], input[type='text'],
input[type=number], input[type='number'],
input[type=email], input[type='email'],
input[type=password], input[type='password'],
input[type=datetime-local], input[type='datetime-local'],
textarea, textarea,
select { select {
border-color: lighten($error-red, 12%); border-color: lighten($error-red, 12%);
@ -568,7 +568,9 @@ code {
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
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>") no-repeat right 8px center / auto 16px; 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>")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px; border-radius: 4px;
padding-left: 10px; padding-left: 10px;
@ -608,7 +610,11 @@ code {
right: 0; right: 0;
bottom: 1px; bottom: 1px;
width: 5px; width: 5px;
background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); background-image: linear-gradient(
to right,
rgba(darken($ui-base-color, 10%), 0),
darken($ui-base-color, 10%)
);
} }
} }
} }
@ -996,7 +1002,7 @@ code {
flex: 1 1 auto; flex: 1 1 auto;
} }
input[type=text] { input[type='text'] {
background: transparent; background: transparent;
border: 0; border: 0;
padding: 10px; padding: 10px;

43
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@ -152,7 +152,7 @@ html {
} }
.compose-form__autosuggest-wrapper, .compose-form__autosuggest-wrapper,
.poll__option input[type="text"], .poll__option input[type='text'],
.compose-form .spoiler-input__input, .compose-form .spoiler-input__input,
.compose-form__poll-wrapper select, .compose-form__poll-wrapper select,
.search__input, .search__input,
@ -179,7 +179,9 @@ html {
} }
.compose-form__poll-wrapper select { .compose-form__poll-wrapper select {
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px; background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
no-repeat right 8px center / auto 16px;
} }
.compose-form__poll-wrapper, .compose-form__poll-wrapper,
@ -205,7 +207,9 @@ html {
} }
.drawer__inner__mastodon { .drawer__inner__mastodon {
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto; background: $white
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
no-repeat bottom / 100% auto;
} }
// Change the colors used in compose-form // Change the colors used in compose-form
@ -332,11 +336,13 @@ html {
color: $white; color: $white;
} }
.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { .language-dropdown__dropdown__results__item
.language-dropdown__dropdown__results__item__common-name {
color: lighten($ui-base-color, 8%); color: lighten($ui-base-color, 8%);
} }
.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { .language-dropdown__dropdown__results__item.active
.language-dropdown__dropdown__results__item__common-name {
color: darken($ui-base-color, 12%); color: darken($ui-base-color, 12%);
} }
@ -490,7 +496,8 @@ html {
background: darken($ui-secondary-color, 10%); background: darken($ui-secondary-color, 10%);
} }
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 10%); background: lighten($ui-highlight-color, 10%);
} }
@ -522,10 +529,10 @@ html {
} }
.simple_form { .simple_form {
input[type="text"], input[type='text'],
input[type="number"], input[type='number'],
input[type="email"], input[type='email'],
input[type="password"], input[type='password'],
textarea { textarea {
&:hover { &:hover {
border-color: lighten($ui-base-color, 12%); border-color: lighten($ui-base-color, 12%);
@ -682,7 +689,9 @@ html {
.mute-modal select { .mute-modal select {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px; background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
no-repeat right 8px center / auto 16px;
} }
// Glitch-soc-specific changes // Glitch-soc-specific changes
@ -729,7 +738,8 @@ html {
color: $white; color: $white;
} }
&.close, &.close:hover { &.close,
&.close:hover {
background: $error-value-color; background: $error-value-color;
color: $primary-text-color; color: $primary-text-color;
} }
@ -746,11 +756,16 @@ html {
} }
.status.collapsed .status__content:after { .status.collapsed .status__content:after {
background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); background: linear-gradient(
rgba(darken($ui-base-color, 13%), 0),
rgba(darken($ui-base-color, 13%), 1)
);
} }
.drawer__inner__mastodon { .drawer__inner__mastodon {
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto !important; background: $white
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
no-repeat bottom / 100% auto !important;
.mastodon { .mastodon {
filter: contrast(75%) brightness(75%) !important; filter: contrast(75%) brightness(75%) !important;

4
app/javascript/flavours/glitch/styles/modal.scss
View File

@ -1,5 +1,7 @@
.modal-layout { .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>') repeat-x bottom fixed; 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>')
repeat-x bottom fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;

12
app/javascript/flavours/glitch/styles/polls.scss
View File

@ -70,8 +70,8 @@
max-width: calc(100% - 45px - 25px); max-width: calc(100% - 45px - 25px);
} }
input[type=radio], input[type='radio'],
input[type=checkbox] { input[type='checkbox'] {
display: none; display: none;
} }
@ -79,7 +79,7 @@
flex: 1 1 auto; flex: 1 1 auto;
} }
input[type=text] { input[type='text'] {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -205,7 +205,7 @@
&:active, &:active,
&:focus { &:focus {
background-color: rgba($dark-text-color, .1); background-color: rgba($dark-text-color, 0.1);
} }
} }
@ -273,7 +273,9 @@
width: auto; width: auto;
outline: 0; outline: 0;
font-family: inherit; 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>") no-repeat right 8px center / auto 16px; 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>")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;

18
app/javascript/flavours/glitch/styles/rtl.scss
View File

@ -255,8 +255,8 @@ body.rtl {
padding-right: 0; padding-right: 0;
} }
.simple_form .check_boxes .checkbox input[type="checkbox"], .simple_form .check_boxes .checkbox input[type='checkbox'],
.simple_form .input.boolean input[type="checkbox"] { .simple_form .input.boolean input[type='checkbox'] {
left: auto; left: auto;
right: 0; right: 0;
} }
@ -294,12 +294,18 @@ body.rtl {
&::after { &::after {
right: auto; right: auto;
left: 0; left: 0;
background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); background-image: linear-gradient(
to left,
rgba(darken($ui-base-color, 10%), 0),
darken($ui-base-color, 10%)
);
} }
} }
.simple_form select { .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>") no-repeat left 8px center / auto 16px; 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>")
no-repeat left 8px center / auto 16px;
} }
.table th, .table th,
@ -346,11 +352,11 @@ body.rtl {
} }
.fa-chevron-left::before { .fa-chevron-left::before {
content: "\F054"; content: '\F054';
} }
.fa-chevron-right::before { .fa-chevron-right::before {
content: "\F053"; content: '\F053';
} }
.column-back-button__icon { .column-back-button__icon {

2
app/javascript/flavours/glitch/styles/statuses.scss
View File

@ -134,7 +134,7 @@ a.button.logo-button {
} }
.embed { .embed {
.status__content[data-spoiler=folded] { .status__content[data-spoiler='folded'] {
.e-content { .e-content {
display: none; display: none;
} }

31
app/javascript/flavours/glitch/styles/variables.scss
View File

@ -1,18 +1,18 @@
// Commonly used web colors // Commonly used web colors
$black: #000000; // Black $black: #000000; // Black
$white: #ffffff; // White $white: #ffffff; // White
$success-green: #79bd9a; // Padua $success-green: #79bd9a; // Padua
$error-red: #df405a; // Cerise $error-red: #df405a; // Cerise
$warning-red: #ff5050; // Sunset Orange $warning-red: #ff5050; // Sunset Orange
$gold-star: #ca8f04; // Dark Goldenrod $gold-star: #ca8f04; // Dark Goldenrod
$red-bookmark: $warning-red; $red-bookmark: $warning-red;
// Values from the classic Mastodon UI // Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express $classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue $classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue $classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #6364ff; // Brand purple $classic-highlight-color: #6364ff; // Brand purple
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;
@ -23,10 +23,13 @@ $valid-value-color: $success-green !default;
$error-value-color: $error-red !default; $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-color, 26%) !default; // Lighter darkest $ui-base-lighter-color: lighten(
$ui-primary-color: $classic-primary-color !default; // Lighter $ui-base-color,
$ui-secondary-color: $classic-secondary-color !default; // Lightest 26%
) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; $ui-highlight-color: $classic-highlight-color !default;
// Variables for texts // Variables for texts

2
app/javascript/flavours/glitch/styles/widgets.scss
View File

@ -1,4 +1,4 @@
@use "sass:math"; @use 'sass:math';
.hero-widget { .hero-widget {
margin-bottom: 10px; margin-bottom: 10px;