Mastodon
/
toot-script-condivisione-su-mastodon
mirror of https://github.com/NickKaramoff/toot
1
0
Fork 0
Code Issues Releases Wiki Activity

Update styles to match those of Mastodon

This commit is contained in:
Nikita Karamov 2023-03-16 13:37:32 +01:00
parent 7f6b25296d
commit df0ab992b8
No known key found for this signature in database
GPG Key ID: 41D6F71EE78E77CD
1 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
lib/scss/style.scss
View File

@ -24,16 +24,50 @@
@import "fonts"; @import "fonts";
@import "variables"; @import "variables";
* { *,
*::before,
*::after {
box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; }
:root {
--s2f-bg-color: #eff3f5;
--s2f-text-color: #282c37;
--s2f-border-color: #ccd7e0;
--s2f-input-bg-color: #ffffff;
--s2f-input-text-color: #000000;
--s2f-input-placeholder-color: #444b5d;
--s2f-input-border-color: #c0cdd9;
--s2f-button-bg-color: #6d6eff;
--s2f-button-hover-bg-color: #6364ff;
--s2f-button-text-color: #ffffff;
accent-color: var(--s2f-button-bg-color);
}
@media (prefers-color-scheme: dark) {
:root {
--s2f-bg-color: #191b22;
--s2f-text-color: #9caec8;
--s2f-border-color: #313543;
--s2f-input-text-color: #282c37;
--s2f-input-placeholder-color: #606984;
--s2f-input-border-color: transparent;
--s2f-button-bg-color: #595aff;
--s2f-button-hover-bg-color: #6364ff;
}
} }
html, html,
body { body {
background-color: $bg; background-color: var(--s2f-bg-color);
color: $text; color: var(--s2f-text-color);
font-family: $text-font; font-family: $text-font;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
@ -51,7 +85,7 @@ body {
} }
header { header {
border-bottom: 1px solid $border-color; border-bottom: 1px solid var(--s2f-border-color);
padding: 1.5rem 0 0.5rem; padding: 1.5rem 0 0.5rem;
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -113,8 +147,8 @@ main {
&[type="submit"] { &[type="submit"] {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
background-color: $button-bg; background-color: var(--s2f-button-bg-color);
color: $button-text; color: var(--s2f-button-text-color);
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
height: 2.5rem; height: 2.5rem;
@ -124,7 +158,7 @@ main {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $button-hover-bg; background-color: var(--s2f-button-hover-bg-color);
} }
} }
@ -133,31 +167,23 @@ main {
textarea, textarea,
input[type="url"] { input[type="url"] {
color: inherit; color: var(--s2f-input-text-color);
width: 100%; width: 100%;
outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background-color: $input-bg; background-color: var(--s2f-input-bg-color);
border: 1px solid color.scale($input-bg, $lightness: -25%); border: 1px solid var(--s2f-input-border-color);
padding: 10px; padding: 10px;
&:focus,
&:active {
border: 1px solid $button-bg;
background-color: color.scale($input-bg, $lightness: +5%);
}
&::placeholder { &::placeholder {
color: inherit; color: var(--s2f-input-placeholder-color);
opacity: 0.3;
} }
} }
} }
} }
footer { footer {
border-top: 1px solid $border-color; border-top: 1px solid var(--s2f-border-color);
padding: 1rem 0; padding: 1rem 0;
width: 100%; width: 100%;
display: flex; display: flex;