Archos/masto-fe-archos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feature] decouple login.scss from variables (#93)

Browse Source 
Preparing for a switch to CSS variables

- decouple login.scss from variables.scss
- move scrollbar css to separate file

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/93
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>
This commit is contained in:
Zoë Bijl
2025-10-10 21:17:25 +02:00
committed by Zoë Bijl
parent 6301ae8023
commit 75d7a62693
4 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@
@import 'single_column';
@import 'announcements';
@import 'explore';
@import 'scrollbars';
@import 'signed_out';
@import 'privacy_policy';
@import 'about';

42
app/javascript/flavours/glitch/styles/components/scrollbars.scss Normal file
View File

@@ -0,0 +1,42 @@
/* Scrollbars */
html {
scrollbar-color: lighten($ui-base-color, 4%)
rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: lighten($ui-base-color, 4%);
border: 0 none $base-border-color;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($ui-base-color, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($ui-base-color, 4%);
}
::-webkit-scrollbar-track {
border: 0 none $base-border-color;
border-radius: 0;
background: rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $ui-base-color;
}
::-webkit-scrollbar-track:active {
background: $ui-base-color;
}
::-webkit-scrollbar-corner {
background: transparent;
}

15
app/javascript/flavours/glitch/styles/login.scss
View File

@@ -1,13 +1,17 @@
@import 'variables';
@import 'styles/fonts/roboto';
@import 'styles/fonts/roboto-mono';
@import 'reset';
@import 'basics';
:root {
--color-bg: #191b22;
--color-fg: #fff;
}
body {
color: var(--color-fg);
font-family: ui-rounded, mastodon-font-sans-serif, sans-serif;
font-size: 1rem;
line-height: 1.5;
background: var(--color-bg);
}
.login-container {
@@ -45,7 +49,7 @@ h1 {
label {
font-family: inherit;
color: $primary-text-color;
color: var(--color-fg);
display: block;
word-wrap: break-word;
font-weight: 500;
@@ -70,6 +74,7 @@ button {
border-radius: 4px;
box-sizing: border-box;
color: #2a2b2f;
font-family: inherit;
font-size: inherit;
font-weight: 500;
text-align: center;
@@ -102,7 +107,7 @@ input[type='text'] {
}
.content {
padding: 20px 15px;
padding: 15px;
border-radius: 4px;
border: 1px solid lighten(#39404f, 7%);
color: #fff;

41
app/javascript/flavours/glitch/styles/reset.scss
View File

@@ -52,44 +52,3 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
html {
scrollbar-color: lighten($ui-base-color, 4%) rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: lighten($ui-base-color, 4%);
border: 0px none $base-border-color;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($ui-base-color, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($ui-base-color, 4%);
}
::-webkit-scrollbar-track {
border: 0px none $base-border-color;
border-radius: 0;
background: rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $ui-base-color;
}
::-webkit-scrollbar-track:active {
background: $ui-base-color;
}
::-webkit-scrollbar-corner {
background: transparent;
}