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

Compare commits

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

9 Commits
features/reduced-motion .. sass-fixes

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

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

# Conflicts:
#	app/javascript/flavours/glitch/styles/login.scss
 2025-10-16 23:10:23 +02:00
Zoë Bijl 4b4b4b9d38 [bugfix] correct lock-open-simple direction 
the lock opened the wrong way; it was pointing left when it should’ve pointed right to be consistent with GTS.
 2025-10-16 15:21:46 +02:00
Zoë Bijl 7f073ccd59 [docs] update changelog 2025-10-16 14:40:54 +02:00
Zoë Bijl 02c368b22a [chore] remove last reference to font-awesome 2025-10-16 12:57:43 +02:00
68 changed files with 757 additions and 565 deletions
Expand all files Collapse all files
CHANGELOG.md
+13 -2
View File
@@ -11,19 +11,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added documentation for `yarn dev` (#75)
- Added an .editorconfig (#78)
- Added a changelog basaed on “Keep a Changelog” (#80)
- Added a CHANGELOG.md basaed on “Keep a Changelog” (#80)
### Changed
- Preserve ‘mastodon-settings’ in localStorage (#66)
- Redesigned the login page (#76)
- Changed all icons with the Phosphor icon set (#77)
- Changed all icons to the Phosphor icon set (#77)
- Changed AUTHORS.md to reflect fork contributors (#89)
### Fixed
- Updated caniuse-lite browserlist (#82)
- Fixed various linter issues (#85)
- Fixed various CSS issues (#100)
- Updated Prettier to 3.6.2 (#86)
- Updated Yarn to 4.10.3 (#90)
- Updated Webpack to 5.102.1 (#83)
- Updated ESlint to 9.37.0 (#88)
### Removed
- Removed FontAwesome (#99)
- Removed unused CSS files (#99)
- Removed various unused assets
## [0.5.0] - 2025-07-14
app/javascript/flavours/glitch/main.jsx
-2
View File
@@ -5,7 +5,6 @@ import Mastodon from "flavours/glitch/containers/mastodon";
import { me } from "flavours/glitch/initial_state";
import * as perf from "flavours/glitch/performance";
import ready from "flavours/glitch/ready";
import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
import { store } from "flavours/glitch/store";
/**
@@ -13,7 +12,6 @@ import { store } from "flavours/glitch/store";
*/
function main() {
perf.start("main()");
setReducedMotionBodyClass();
return ready(async () => {
const mountNode = document.getElementById("mastodon");
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
+5 -1
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
@@ -26,7 +30,7 @@ $fluid-breakpoint: $maximum-width + 20px;
li {
position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 1em 1.75em;
padding-inline-start: 3em;
font-weight: 500;
app/javascript/flavours/glitch/styles/accessibility.scss
+3
View File
@@ -1,3 +1,6 @@
@use "mixins" as *;
@use "variables" as *;
$emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
"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
+25 -21
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.card {
& > a {
display: block;
@@ -10,7 +14,7 @@
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
@@ -18,7 +22,7 @@
&__img {
height: 130px;
position: relative;
background: darken($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: -12%);
img {
display: block;
@@ -39,7 +43,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
.avatar {
flex: 0 0 auto;
@@ -57,7 +61,7 @@
border-radius: 4px;
@include avatar-radius;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
object-fit: cover;
}
}
@@ -149,7 +153,7 @@
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
color: color.adjust($inverted-text-color, $lightness: 10%);
}
@media screen and (width <= 700px) {
@@ -215,22 +219,22 @@
}
&.admin {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
}
}
.simple_form .not_recommended {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
}
.simple_form .glitch_only {
color: lighten($warning-red, 12%);
background-color: rgba(lighten($warning-red, 12%), 0.1);
border-color: rgba(lighten($warning-red, 12%), 0.5);
color: color.adjust($warning-red, $lightness: 12%);
background-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.5);
}
.account__header__fields {
@@ -238,14 +242,14 @@
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
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%);
font-size: 14px;
line-height: 20px;
dl {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
}
dt,
@@ -264,7 +268,7 @@
width: 120px;
flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
}
dd {
@@ -333,7 +337,7 @@
}
.batch-table__row--muted {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
.batch-table__row--muted .pending-account__header,
@@ -342,7 +346,7 @@
&,
a,
strong {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
}
@@ -354,7 +358,7 @@
tbody td.accounts-table__extra,
&__count,
&__count small {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
}
app/javascript/flavours/glitch/styles/admin.scss
+44 -41
View File
@@ -1,4 +1,7 @@
@use "sass:color";
@use "sass:math";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
@@ -31,8 +34,8 @@ $content-width: 840px;
&__toggle {
display: none;
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
align-items: center;
&__logo {
@@ -122,7 +125,7 @@ $content-width: 840px;
&:hover {
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
background-color: color.adjust($ui-base-color, $lightness: -5%);
transition: all 100ms linear;
transition-property: color, background-color;
}
@@ -133,7 +136,7 @@ $content-width: 840px;
}
ul {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-radius: 0 0 0 4px;
margin: 0;
@@ -239,7 +242,7 @@ $content-width: 840px;
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
&.selected {
@@ -292,7 +295,7 @@ $content-width: 840px;
color: $darker-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
h6 {
@@ -393,7 +396,7 @@ $content-width: 840px;
ul a,
ul ul a {
border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
transition: none;
&:hover {
@@ -521,7 +524,7 @@ body,
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
}
&.selected {
@@ -692,7 +695,7 @@ body,
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
position: relative;
text-decoration: none;
color: $darker-text-color;
@@ -712,7 +715,7 @@ body,
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
&__avatar {
@@ -766,7 +769,7 @@ a.inline-name-tag,
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
.avatar {
@@ -806,7 +809,7 @@ a.name-tag,
}
&.negative {
border-left-color: lighten($error-red, 12%);
border-left-color: color.adjust($error-red, $lightness: 12%);
}
&.warning {
@@ -871,7 +874,7 @@ a.name-tag,
&:focus,
&:hover,
&:active {
color: lighten($darker-text-color, 8%);
color: color.adjust($darker-text-color, $lightness: 8%);
}
}
@@ -885,10 +888,10 @@ a.name-tag,
&__item {
display: flex;
justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
&:hover {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
}
&__reported-by,
@@ -960,7 +963,7 @@ a.name-tag,
.account__header__fields,
.account__header__content {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px;
height: 100%;
}
@@ -997,7 +1000,7 @@ a.name-tag,
.filters-list__item {
padding: 15px 0;
background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
margin-top: 15px;
}
@@ -1008,13 +1011,13 @@ a.name-tag,
.announcements-list,
.filters-list {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
&__item {
padding: 15px 0;
background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__title {
padding: 0 15px;
@@ -1089,7 +1092,7 @@ a.name-tag,
&.expired {
.expiration {
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
.permissions-list__item__icon {
@@ -1165,7 +1168,7 @@ a.name-tag,
.sparkline {
display: block;
text-decoration: none;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
padding: 0;
position: relative;
@@ -1228,7 +1231,7 @@ a.name-tag,
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
fill: none !important;
}
}
@@ -1238,17 +1241,17 @@ a.sparkline {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: 6%);
}
}
.skeleton {
background-color: lighten($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, $lightness: 8%);
background-image: linear-gradient(
90deg,
lighten($ui-base-color, 8%),
lighten($ui-base-color, 12%),
lighten($ui-base-color, 8%)
color.adjust($ui-base-color, $lightness: 8%),
color.adjust($ui-base-color, $lightness: 12%),
color.adjust($ui-base-color, $lightness: 8%)
);
background-size: 200px 100%;
background-repeat: no-repeat;
@@ -1275,7 +1278,7 @@ a.sparkline {
}
&__item {
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__key {
font-weight: 500;
@@ -1328,7 +1331,7 @@ a.sparkline {
&__category {
cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1356,7 +1359,7 @@ a.sparkline {
&__details {
&__item {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px 0;
&:last-child {
@@ -1405,7 +1408,7 @@ a.sparkline {
width: 100%;
height: 100%;
object-fit: cover;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
}
}
@@ -1423,7 +1426,7 @@ a.sparkline {
margin: 0;
width: 56px;
height: 56px;
background-color: darken($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 8px;
border: 1px solid $ui-base-color;
}
@@ -1542,7 +1545,7 @@ a.sparkline {
position: relative;
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:first-child {
border-top-left-radius: 4px;
@@ -1556,7 +1559,7 @@ a.sparkline {
}
&:hover {
background-color: lighten($ui-base-color, 4%);
background-color: color.adjust($ui-base-color, $lightness: 4%);
}
&__avatar {
@@ -1634,13 +1637,13 @@ a.sparkline {
}
.report-actions {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&__item {
display: flex;
align-items: center;
line-height: 18px;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1752,15 +1755,15 @@ a.sparkline {
&__statuses-list {
border-radius: 4px;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
font-size: 13px;
line-height: 18px;
overflow: hidden;
&__item {
padding: 16px;
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 2%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1804,7 +1807,7 @@ a.sparkline {
flex: 0 0 auto;
width: 4px;
height: 21px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
margin: 0 2px;
border-radius: 2px;
@@ -1876,7 +1879,7 @@ a.sparkline {
}
.status {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
background: $ui-base-color;
border-radius: 4px;
}
app/javascript/flavours/glitch/styles/basics.scss
+12 -6
View File
@@ -1,9 +1,15 @@
@use "sass:meta";
@use "sass:string";
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
@function hex-color($color) {
@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 {
@@ -109,7 +115,7 @@ body {
}
&.embed {
background: lighten($ui-base-color, 4%);
background: color.scale($ui-base-color, $lightness: 4%);
margin: 0;
padding-bottom: 0;
@@ -122,7 +128,7 @@ body {
}
&.admin {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
padding: 0;
}
@@ -206,7 +212,7 @@ button {
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: lighten($error-red, 4%);
color: color.adjust($error-red, $lightness: 4%);
text-align: center;
& > div {
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
+8 -4
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.dashboard__counters {
display: flex;
flex-wrap: wrap;
@@ -13,7 +17,7 @@
& > div,
& > a {
padding: 20px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
box-sizing: border-box;
height: 100%;
@@ -27,7 +31,7 @@
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
@@ -99,12 +103,12 @@
}
&.positive {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
color: $valid-value-color;
}
&.negative {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
color: $error-value-color;
}
app/javascript/flavours/glitch/styles/forms.scss
+27 -23
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
$no-columns-breakpoint: 600px;
code {
@@ -164,7 +168,7 @@ code {
code {
border-radius: 3px;
padding: 0.2em 0.4em;
background: darken($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: -12%);
}
li {
@@ -292,7 +296,7 @@ code {
.required abbr {
text-decoration: none;
color: lighten($error-value-color, 12%);
color: color.adjust($error-value-color, $lightness: 12%);
}
.fields-group {
@@ -435,13 +439,13 @@ code {
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
padding: 10px;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
&:invalid {
@@ -453,13 +457,13 @@ code {
}
&:hover {
border-color: darken($ui-base-color, 20%);
border-color: color.adjust($ui-base-color, $lightness: -20%);
}
&:active,
&:focus {
border-color: $highlight-text-color;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
}
}
@@ -470,13 +474,13 @@ code {
input[type="datetime-local"] {
&:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, $lightness: 12%);
}
}
.input.field_with_errors {
label {
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
input[type="text"],
@@ -486,13 +490,13 @@ code {
input[type="datetime-local"],
textarea,
select {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, $lightness: 12%);
}
.error {
display: block;
font-weight: 500;
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
margin-top: 4px;
}
}
@@ -584,10 +588,10 @@ code {
outline: 0;
font-family: inherit;
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>")
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 right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
padding-inline-start: 10px;
padding-inline-end: 30px;
@@ -628,8 +632,8 @@ code {
width: 5px;
background-image: linear-gradient(
to right,
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%)
);
}
}
@@ -644,7 +648,7 @@ code {
}
.flash-message {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
@@ -725,7 +729,7 @@ code {
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
}
@@ -809,7 +813,7 @@ code {
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 8%);
color: color.adjust($highlight-text-color, $lightness: 8%);
}
}
}
@@ -855,7 +859,7 @@ code {
.permissions-list {
border: 1px solid $ui-base-color;
border-radius: 4px;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
margin-bottom: 30px;
}
@@ -1005,8 +1009,8 @@ code {
}
.input-copy {
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
display: flex;
align-items: center;
@@ -1067,7 +1071,7 @@ code {
&__item {
padding: 15px;
color: $ui-secondary-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
display: flex;
align-items: center;
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/login.scss
+6 -5
View File
@@ -1,5 +1,6 @@
@import "styles/fonts/roboto";
@import "reset";
@use "sass:color";
@use "styles/fonts/roboto";
@use "reset";
:root {
--color-bg: #191b22;
@@ -70,7 +71,7 @@ button:focus-visible {
button {
padding: 7px 10px;
border: 1px solid lighten(#66befe, 7%);
border: 1px solid color.scale(#66befe, $lightness: 7%);
border-radius: 4px;
box-sizing: border-box;
color: #2a2b2f;
@@ -95,7 +96,7 @@ input[type="text"] {
display: block;
margin: 0;
padding: 15px;
border: 1px solid lighten(#282c37, 7%);
border: 1px solid color.scale(#282c37, $lightness: 7%);
border-radius: 4px;
box-sizing: border-box;
box-shadow: none;
@@ -109,7 +110,7 @@ input[type="text"] {
.content {
padding: 15px;
border-radius: 4px;
border: 1px solid lighten(#39404f, 7%);
border: 1px solid color.scale(#39404f, $lightness: 7%);
color: #fff;
background-color: #39404f;
}
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/colors.scss
+3
View File
@@ -16,6 +16,9 @@
/* Secondary */
--color-secondary-fg: #606984;
/* Account */
--color-account-bg: #fff;
/* Drawer */
--color-drawer-bg: #fff;
--color-drawer-bg--hover: #ccd7e0;
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+71 -64
View File
@@ -1,3 +1,6 @@
@use "sass:color";
@use "../variables" as *;
// Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced.
@@ -26,23 +29,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 +53,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 +106,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 +116,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 +135,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 +151,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 +172,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 +198,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 +209,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 +221,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 +245,7 @@ html {
// Change the background colors of statuses
.focusable:focus {
background: lighten($white, 4%);
background: color.adjust($white, $lightness: 4%);
}
.detailed-status,
@@ -257,7 +260,7 @@ html {
&:hover,
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
}
@@ -320,12 +323,12 @@ html {
.language-dropdown__dropdown__results__item
.language-dropdown__dropdown__results__item__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 +336,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 +362,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 +375,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 +402,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 +426,7 @@ html {
}
.flash-message.warning {
color: lighten($gold-star, 16%);
color: color.adjust($gold-star, $lightness: 16%);
}
.boost-modal__action-bar,
@@ -428,14 +435,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 +453,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 +466,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
@@ -476,8 +483,8 @@ 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%);
background: var(--color-account-bg);
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
}
.nothing-here,
@@ -485,7 +492,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 +508,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,24 +535,24 @@ 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;
}
.entry {
background: $account-background-color;
background: var(--color-account-bg);
.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 +619,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 +643,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 +657,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 +673,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 +712,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
+23 -17
View File
@@ -1,3 +1,7 @@
@use "sass:color";
@use "mixins" as *;
@use "variables" as *;
.table {
width: 100%;
max-width: 100%;
@@ -11,7 +15,7 @@
vertical-align: top;
border-top: 1px solid $ui-base-color;
text-align: start;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
&.critical {
font-weight: 700;
@@ -78,7 +82,7 @@
& > tbody > tr > td {
padding: 11px 10px;
background: transparent;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
color: $secondary-text-color;
}
@@ -91,17 +95,19 @@
&.batch-table {
& > thead > tr > th {
background: $ui-base-color;
border-top: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid darken($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%);
&:first-child {
border-radius: 4px 0 0;
border-inline-start: 1px solid darken($ui-base-color, 8%);
border-inline-start: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
}
&:last-child {
border-radius: 0 4px 0 0;
border-inline-end: 1px solid darken($ui-base-color, 8%);
border-inline-end: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
}
}
}
@@ -186,7 +192,7 @@ a.table-action-link {
position: sticky;
top: 0;
z-index: 1;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
background: $ui-base-color;
border-radius: 4px 0 0;
height: 47px;
@@ -203,7 +209,7 @@ a.table-action-link {
height: 47px;
align-items: center;
justify-content: center;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
color: $secondary-text-color;
display: none;
@@ -242,14 +248,14 @@ a.table-action-link {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
&__form {
padding: 16px;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
background: $ui-base-color;
@@ -260,25 +266,25 @@ a.table-action-link {
}
&__row {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
@media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
}
}
&:hover {
background: darken($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: -2%);
}
&:nth-child(even) {
background: $ui-base-color;
&:hover {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
}
}
@@ -353,12 +359,12 @@ a.table-action-link {
}
.nothing-here {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
box-shadow: none;
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
}
}
app/javascript/flavours/glitch/styles/tangerine/_config.scss
+2 -2
View File
@@ -4,7 +4,7 @@
*/
/* 🛠️ Config */
@import "keyframes";
@use "keyframes";
/* 🧩 Components */
@import "status-bar";
@use "status-bar";
app/javascript/flavours/glitch/styles/tangerine/status-bar.scss
+3 -3
View File
@@ -1,12 +1,12 @@
/* 🚥 Status Bar */
.no-reduce-motion .status-favourite.active svg {
.status-favourite.active svg {
animation: bounce 0.4s ease-out;
}
.no-reduce-motion .status-boost.active svg {
.status-boost.active svg {
animation: launch 1.2s ease-in 1;
}
.no-reduce-motion .status-bookmark.active svg {
.status-bookmark.active svg {
animation: bounce-vertical 0.4s ease-out;
}
app/javascript/flavours/glitch/styles/variables.scss
+16 -8
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
@@ -32,9 +34,9 @@ $error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten(
$ui-base-lighter-color: color.scale(
$ui-base-color,
26%
$lightness: 26%
) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
@@ -61,9 +63,15 @@ $primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
$highlight-text-color: color.scale(
$ui-highlight-color,
$lightness: 8%
) !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
$action-button-focus-color: color.scale(
$ui-base-lighter-color,
$lightness: 4%
) !default;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
@@ -94,11 +102,11 @@ $ui-avatar-border-size: 8%;
$dismiss-overlay-width: 4rem;
:root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
--dropdown-border-color: #{color.scale($ui-base-color, $lightness: 12%)};
--dropdown-background-color: #{color.scale($ui-base-color, $lightness: 4%)};
--dropdown-shadow:
0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{darken($ui-base-color, 4%)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--modal-background-color: #{color.scale($ui-base-color, $lightness: -4%)};
--modal-border-color: #{color.scale($ui-base-color, $lightness: 4%)};
}
app/javascript/flavours/glitch/styles/widgets.scss
+6 -3
View File
@@ -1,4 +1,7 @@
@use "sass:color";
@use "sass:math";
@use "mixins" as *;
@use "variables" as *;
.hero-widget {
margin-bottom: 10px;
@@ -54,7 +57,7 @@
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
color: color.adjust($darker-text-color, $lightness: 10%);
}
a {
@@ -223,7 +226,7 @@
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
@@ -305,7 +308,7 @@
tbody td {
padding: 15px 0;
vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
tbody tr:last-child td {
app/javascript/flavours/glitch/utils/accessibility.js
-26
View File
@@ -1,26 +0,0 @@
import ready from "../ready";
ready(() => {
setReducedMotionBodyClass();
});
export function setMediaQueryBodyClass(query, className) {
if (query.matches) {
document.body.classList.add(className.true);
document.body.classList.remove(className.false);
} else {
document.body.classList.add(className.false);
document.body.classList.remove(className.true);
}
}
export function setReducedMotionBodyClass() {
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
const className = {
true: "reduce-motion",
false: "no-reduce-motion",
};
setMediaQueryBodyClass(prefersReducedMotion, className);
prefersReducedMotion.addEventListener("change", () => setReducedMotionBodyClass(prefersReducedMotion));
}
app/javascript/mastodon/common.js
-1
View File
@@ -1,5 +1,4 @@
import Rails from "@rails/ujs";
import "font-awesome/css/font-awesome.css";
export function start() {
require.context("../images/", true);
app/javascript/skins/glitch/contrast/common.scss
+1 -1
View File
@@ -1 +1 @@
@import "flavours/glitch/styles/contrast";
// @import "flavours/glitch/styles/contrast";
app/javascript/skins/glitch/mastodon-light/common.scss
+1 -1
View File
@@ -1 +1 @@
@import "flavours/glitch/styles/mastodon-light";
// @import "flavours/glitch/styles/mastodon-light";
package.json
+1 -1
View File
@@ -91,7 +91,7 @@
"lodash": "^4.17.21",
"mark-loader": "^0.1.6",
"marky": "^1.2.5",
"mini-css-extract-plugin": "^1.6.2",
"mini-css-extract-plugin": "^2.9.4",
"mkdirp": "^3.0.1",
"npmlog": "^7.0.1",
"path-complete-extname": "^1.0.0",
public/icons.svg
+1 -1
View File
@@ -283,7 +283,7 @@
<symbol id="lock-open-simple" fill="currentcolor" viewBox="0 0 256 256">
<path d="M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z" opacity="0.2"></path>
<path d="M48,8 C74.509668,8 96,29.490332 96,56 L95.9994315,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L79.9994315,80 L80,56 C80,38.5036191 65.9582171,24.2868724 48.5291785,24.0042871 L48,24 C32.5086083,24 18.8027209,35.0099629 15.83982,49.592866 C14.9601045,53.922679 10.7369471,56.7195356 6.40713405,55.83982 C2.077321,54.9601045 -0.719535601,50.7369471 0.160179973,46.407134 C4.64934606,24.3122088 24.9557992,8 48,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
<path d="M207.998431,8 C231.042632,8 251.349085,24.3122088 255.838251,46.407134 C256.717967,50.7369471 253.92111,54.9601045 249.591297,55.83982 C245.261484,56.7195356 241.038327,53.922679 240.158611,49.592866 C237.195711,35.0099629 223.489823,24 207.998431,24 C190.325319,24 175.998431,38.326888 175.998431,56 L175.998431,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L159.998431,80 L159.998431,56 C159.998431,29.490332 181.488763,8 207.998431,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
</symbol>
<symbol id="magnifying-glass" fill="currentcolor" viewBox="0 0 256 256">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

public/index.html
+1 -1
View File
@@ -26,7 +26,7 @@
<script src="/packs/js/flavours/glitch/home.js"></script>
</head>
<body class='app-body system-font'>
<body class='app-body no-reduce-motion system-font'>
<div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
</div>
</body>
yarn.lock
+9 -10
View File
@@ -2529,7 +2529,7 @@ __metadata:
lodash: "npm:^4.17.21"
mark-loader: "npm:^0.1.6"
marky: "npm:^1.2.5"
mini-css-extract-plugin: "npm:^1.6.2"
mini-css-extract-plugin: "npm:^2.9.4"
mkdirp: "npm:^3.0.1"
npmlog: "npm:^7.0.1"
path-complete-extname: "npm:^1.0.0"
@@ -10950,16 +10950,15 @@ __metadata:
languageName: node
linkType: hard
"mini-css-extract-plugin@npm:^1.6.2":
version: 1.6.2
resolution: "mini-css-extract-plugin@npm:1.6.2"
"mini-css-extract-plugin@npm:^2.9.4":
version: 2.9.4
resolution: "mini-css-extract-plugin@npm:2.9.4"
dependencies:
loader-utils: "npm:^2.0.0"
schema-utils: "npm:^3.0.0"
webpack-sources: "npm:^1.1.0"
schema-utils: "npm:^4.0.0"
tapable: "npm:^2.2.1"
peerDependencies:
webpack: ^4.4.0 || ^5.0.0
checksum: 10c0/138c008f8a510012266d2834227e75181feeffd09e89e9cde0a63f17be3d64ea3ddbba01036aac9c8a969462c0142285659a20c294e8d01ba948aa1124affdc2
webpack: ^5.0.0
checksum: 10c0/76f9e471784d52435ea766ce576ad23d37d0ea51c32ddc56414c8fdf14f7de44202dbc772cdf7549b7e54a5e56f569af93cfbd036d62d13ff8fd9571e53353b7
languageName: node
linkType: hard
@@ -15998,7 +15997,7 @@ __metadata:
languageName: node
linkType: hard
"webpack-sources@npm:^1.1.0, webpack-sources@npm:^1.4.3":
"webpack-sources@npm:^1.4.3":
version: 1.4.3
resolution: "webpack-sources@npm:1.4.3"
dependencies: