neale/moth
neale
/
moth
mirror of https://github.com/dirtbags/moth.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

CSS twiddling

This commit is contained in:
Neale Pickett 2023-09-13 19:10:25 -06:00
parent 9ea39363b8
commit 13c17873d8
1 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
theme/basic.css
View File

@ -1,63 +1,12 @@
/* /* Color palette: http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T */
* Colors
*
* This uses the alpha channel to apply hue tinting to elements, to get a
* similar effect in light or dark mode.
*
* http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T
*/
body {
background: #010e19;
color: #edd488;
}
main {
background: #000d;
}
h1, h2, h3, h4, h5, h6 {
color: #cb2408cc;
}
h1 {
background: #cb240844;
}
a:any-link {
color: #b9cbd8;
}
.notification {
background: #ac8f3944;
}
.error {
background: red;
color: white;
}
.toast {
background: #333;
color: #eee;
box-shadow: 0px 0px 8px 0px #0b0;
}
.debug {
background: #ccc;
color: black;
}
@media (prefers-color-scheme: light) {
body {
background: #b9cbd8;
color: black;
}
main {
background: #fffd;
}
a:any-link {
color: #092b45;
}
}
body { body {
font-family: sans-serif; font-family: sans-serif;
background-image: url("bg.png"); background: #010e19 url("bg.png") center fixed;
background-size: cover; background-size: cover;
background-position: center;
background-blend-mode: soft-light; background-blend-mode: soft-light;
background-attachment: fixed; background-color: #010e19;
color: #edd488;
} }
canvas.wallpaper { canvas.wallpaper {
position: fixed; position: fixed;
@ -75,13 +24,21 @@ main {
margin: 1em auto; margin: 1em auto;
padding: 1px 3px; padding: 1px 3px;
border-radius: 5px; border-radius: 5px;
background: #000d;
}
h1, h2, h3, h4, h5, h6 {
color: #cb2408cc;
} }
h1 { h1 {
background: #cb240844;
padding: 3px; padding: 3px;
} }
p { p {
margin: 1em 0em; margin: 1em 0em;
} }
a:any-link {
color: #b9cbd8;
}
form, pre { form, pre {
margin: 1em; margin: 1em;
overflow-x: auto; overflow-x: auto;
@ -95,6 +52,13 @@ input, select {
padding: 0 1em; padding: 0 1em;
border-radius: 8px; border-radius: 8px;
} }
.notification {
background: #ac8f3944;
}
.error {
background: red;
color: white;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -176,6 +140,8 @@ input:invalid {
padding: 1em; padding: 1em;
border-radius: 10px; border-radius: 10px;
margin: 2em auto; margin: 2em auto;
background: #cccc;
color: black;
} }
.debug dt { .debug dt {
font-weight: bold; font-weight: bold;
@ -219,8 +185,30 @@ li[draggable] {
padding: 0.2em 2em; padding: 0.2em 2em;
animation: fadeIn ease 1s; animation: fadeIn ease 1s;
margin: 2px auto; margin: 2px auto;
background: #333;
color: #eee;
box-shadow: 0px 0px 8px 0px #0b0;
} }
@keyframes fadeIn { @keyframes fadeIn {
0% { opacity: 0; } 0% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
@media (prefers-color-scheme: light) {
/*
* This uses the alpha channel to apply hue tinting to elements, to get a
* similar effect in light or dark mode. That means there aren't a whole lot of
* things to change between light and dark mode.
*
*/
body {
background-color: #b9cbd8;
color: black;
}
main {
background-color: #fffd;
}
a:any-link {
color: #092b45;
}
}