motiejus/e11sync
1
Fork 0
Code

colors

Browse Source
This commit is contained in:
Motiejus Jakštys 2024-01-18 21:54:52 +02:00
parent a594a95c6e
commit 1aa4b55591
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/signup/static/signup/style.scss
View File

@ -2,6 +2,12 @@
@use 'grids-responsive'; @use 'grids-responsive';
/* The line above should remain empty */ /* The line above should remain empty */
$darkTextColor: #ccc;
$darkTextColorStr: "ccc";
$darkBgGrey: #313131;
$blueLinkVisited: #007bff;
$grey: #666;
/************************/ /************************/
/** Very Common Things **/ /** Very Common Things **/
/************************/ /************************/
@ -22,7 +28,7 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
a, a:visited { a, a:visited {
text-decoration: none; text-decoration: none;
color: #007bff; color: $blueLinkVisited;
} }
a:hover, a:focus { a:hover, a:focus {
@ -50,6 +56,7 @@ body {
h1 { h1 {
font-size: 1.6rem; font-size: 1.6rem;
} }
$h2Size: 1.2rem; $h2Size: 1.2rem;
h2 { h2 {
font-size: $h2Size; font-size: $h2Size;
@ -69,8 +76,11 @@ h1.brand-title {
text-align: center; text-align: center;
} }
h1.brand-title > a, h2.brand-subtitle {
color: #eee;
}
h1.brand-title > a { h1.brand-title > a {
color: #000;
font-variant: small-caps; font-variant: small-caps;
font-size: 3rem; font-size: 3rem;
} }
@ -79,11 +89,9 @@ h1.brand-title > a:hover, h1.brand-title > a:focus {
text-decoration: none; text-decoration: none;
} }
$grey: #666;
h2.brand-subtitle { h2.brand-subtitle {
font-size: 1.6rem; font-size: 1.6rem;
text-align: center; text-align: center;
color: $grey;
} }
main { main {
@ -95,10 +103,11 @@ main {
#header { #header {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: #e6e6e6;
padding: 1rem 2rem 2rem 2rem; padding: 1rem 2rem 2rem 2rem;
border-radius: 10px; border-radius: 10px;
max-width: 1000px; max-width: 1000px;
background: radial-gradient(circle at top left, $blueLinkVisited 0%, $grey 50%, $darkTextColor 100%);
} }
/*******************************/ /*******************************/
@ -244,13 +253,8 @@ $featuresGutter: 1rem;
/**********************************/ /**********************************/
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
// these two should match h1, h2, h3, body {
$textColor: #ccc; color: $darkTextColor;
$textColorStr: "ccc";
$bgGrey: #313131;
h1, h2, h2.brand-subtitle, h3, body {
color: $textColor;
} }
body { body {
background-color: #222; background-color: #222;
@ -260,14 +264,19 @@ $featuresGutter: 1rem;
} }
#header { #header {
background-color: $bgGrey; background-color: $darkBgGrey;
background: radial-gradient(circle at top left, $blueLinkVisited 0%, $darkBgGrey 50%, $darkTextColor 100%);
}
h2.brand-subtitle {
color: #ccc;
} }
#page-index { #page-index {
#subscribe-section { #subscribe-section {
background-color: $bgGrey; background-color: $darkBgGrey;
> h2 { > h2 {
color: $textColor; color: $darkTextColor;
} }
span.message-success { span.message-success {
@ -275,7 +284,7 @@ $featuresGutter: 1rem;
} }
input { input {
color: $textColor; color: $darkTextColor;
border: 1px solid #555; border: 1px solid #555;
box-shadow: none; box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -288,7 +297,7 @@ $featuresGutter: 1rem;
label::before { label::before {
// difference from the default version: the color of the // difference from the default version: the color of the
// shape is #ccc. // shape is #ccc.
background-image: svgarrow($textColorStr); background-image: svgarrow($darkTextColorStr);
} }
} }