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

Replace colours with a experimental new palette

This commit is contained in:
Nikita Karamov 2022-11-14 18:35:36 +01:00
parent 683cc18f6d
commit 9c7ddce8fe
No known key found for this signature in database
GPG Key ID: 3C8E688C96EEB9C9
2 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/scss/_variables.scss
View File

@ -8,15 +8,21 @@
*/
$text-font: "Roboto", sans-serif;
$font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
"Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
$bg: #1f232b;
$text: #9baec8;
$title: #d9e1e8;
$color-bg-light: #fff;
$color-bg-dark: #000;
$color-text-light: #000;
$color-text-dark: #fff;
$button-bg: #2b90d9;
$button-hover-bg: #56a7e1;
$button-text: white;
$color-border: #80808060;
$input-bg: #131419;
$color-textarea-bg-light: #eee;
$color-textarea-bg-dark: #111;
$color-textarea-border-light: #80808060;
$color-textarea-border-dark: #80808060;
$border-color: #303643;
$color-accent: oklch(63.16% 0.202 142.93);
$color-accent-rgb: rgb(26.86, 165.96, 30.56);
$color-accent-lighter: oklch(68.16% 0.202 142.93);

44
src/scss/style.scss
View File

@ -19,9 +19,9 @@
html,
body {
background-color: $bg;
color: $text;
font-family: $text-font;
background-color: $color-bg-light;
color: $color-text-light;
font-family: $font-family-sans;
font-size: 16px;
font-weight: 400;
line-height: 1;
@ -38,8 +38,8 @@ body {
}
header {
border-bottom: 1px solid $border-color;
padding: 1.5rem 0;
margin-bottom: 1.5rem;
text-align: center;
width: 100%;
@ -53,7 +53,7 @@ header {
main {
width: 100%;
max-width: 600px;
margin: auto;
margin: 0 auto auto;
padding: 0 0.75rem;
form {
@ -83,13 +83,14 @@ main {
&[type="checkbox"] {
margin-right: 8px;
accent-color: $color-accent-rgb;
}
&[type="submit"] {
display: inline-block;
text-align: center;
background-color: $button-bg;
color: $button-text;
background-color: $color-accent;
color: $color-text-dark;
font-weight: 500;
font-family: inherit;
height: 2.5rem;
@ -99,7 +100,7 @@ main {
cursor: pointer;
&:hover {
background-color: $button-hover-bg;
background-color: $color-accent-lighter;
}
}
@ -113,14 +114,13 @@ main {
outline: 0;
font-family: inherit;
resize: vertical;
background-color: $input-bg;
border: 1px solid color.scale($input-bg, $lightness: -25%);
background-color: $color-textarea-bg-light;
border: 1px solid $color-textarea-border-light;
padding: 10px;
&:focus,
&:active {
border: 1px solid $button-bg;
background-color: color.scale($input-bg, $lightness: +5%);
border: 1px solid $color-accent;
}
&::placeholder {
@ -132,7 +132,7 @@ main {
}
footer {
border-top: 1px solid $border-color;
border-top: 1px solid $color-border;
padding: 1rem 0;
width: 100%;
display: flex;
@ -154,3 +154,21 @@ footer {
}
}
}
@media (prefers-color-scheme: dark) {
html,
body {
background-color: $color-bg-dark;
color: $color-text-dark;
}
main {
form {
textarea,
input[type="url"] {
background-color: $color-textarea-bg-dark;
border: 1px solid $color-textarea-border-dark;
}
}
}
}