Replace colours with a experimental new palette
This commit is contained in:
parent
683cc18f6d
commit
9c7ddce8fe
|
@ -8,15 +8,21 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$text-font: "Roboto", sans-serif;
|
$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;
|
$color-bg-light: #fff;
|
||||||
$text: #9baec8;
|
$color-bg-dark: #000;
|
||||||
$title: #d9e1e8;
|
$color-text-light: #000;
|
||||||
|
$color-text-dark: #fff;
|
||||||
|
|
||||||
$button-bg: #2b90d9;
|
$color-border: #80808060;
|
||||||
$button-hover-bg: #56a7e1;
|
|
||||||
$button-text: white;
|
|
||||||
|
|
||||||
$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);
|
||||||
|
|
|
@ -19,9 +19,9 @@
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-color: $bg;
|
background-color: $color-bg-light;
|
||||||
color: $text;
|
color: $color-text-light;
|
||||||
font-family: $text-font;
|
font-family: $font-family-sans;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -38,8 +38,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
@ -53,7 +53,7 @@ header {
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: auto;
|
margin: 0 auto auto;
|
||||||
padding: 0 0.75rem;
|
padding: 0 0.75rem;
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
@ -83,13 +83,14 @@ main {
|
||||||
|
|
||||||
&[type="checkbox"] {
|
&[type="checkbox"] {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
accent-color: $color-accent-rgb;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[type="submit"] {
|
&[type="submit"] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $button-bg;
|
background-color: $color-accent;
|
||||||
color: $button-text;
|
color: $color-text-dark;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
@ -99,7 +100,7 @@ main {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $button-hover-bg;
|
background-color: $color-accent-lighter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,14 +114,13 @@ main {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
background-color: $input-bg;
|
background-color: $color-textarea-bg-light;
|
||||||
border: 1px solid color.scale($input-bg, $lightness: -25%);
|
border: 1px solid $color-textarea-border-light;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
border: 1px solid $button-bg;
|
border: 1px solid $color-accent;
|
||||||
background-color: color.scale($input-bg, $lightness: +5%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
|
@ -132,7 +132,7 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $color-border;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue