lasers
/
libreddit
mirror of https://github.com/spikecodes/libreddit
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Create CSS variables for shadow and text color

This commit is contained in:
spikecodes 2021-01-06 10:51:13 -08:00
parent e63384e6a6
commit c9cd825d55
1 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
static/style.css
View File

@ -2,12 +2,13 @@
:root { :root {
--accent: aqua; --accent: aqua;
--background: #0F0F0F; --text: white;
--foreground: #222; --foreground: #222;
--background: #0F0F0F;
--outside: #1F1F1F; --outside: #1F1F1F;
--post: #161616; --post: #161616;
--highlighted: #333; --highlighted: #333;
--black-contrast: 0 1px 3px rgba(0,0,0,0.5); --shadow: 0 1px 3px rgba(0,0,0,0.5);
} }
::selection { ::selection {
@ -17,7 +18,7 @@
* { * {
margin: 0; margin: 0;
color: white; color: var(--text);
font-family: sans-serif; font-family: sans-serif;
} }
@ -37,7 +38,7 @@ nav {
min-height: 40px; min-height: 40px;
} }
nav * { color: white; } nav * { color: var(--text); }
nav #reddit { color: var(--accent); } nav #reddit { color: var(--accent); }
nav #version { opacity: 25%; } nav #version { opacity: 25%; }
@ -184,7 +185,7 @@ aside {
} }
#top > div { #top > div {
border-bottom: 2px solid white; border-bottom: 2px solid var(--text);
} }
/* Sorting and Search */ /* Sorting and Search */
@ -204,7 +205,7 @@ select, #search {
#searchbox { #searchbox {
display: flex; display: flex;
box-shadow: var(--black-contrast); box-shadow: var(--shadow);
} }
#searchbox > *, #sort_submit { #searchbox > *, #sort_submit {
@ -281,7 +282,7 @@ input[type="submit"]:hover { color: var(--accent); }
#sort_options, footer > a { #sort_options, footer > a {
border-radius: 5px; border-radius: 5px;
box-shadow: var(--black-contrast); box-shadow: var(--shadow);
background: var(--outside); background: var(--outside);
display: flex; display: flex;
overflow: auto; overflow: auto;
@ -297,7 +298,7 @@ input[type="submit"]:hover { color: var(--accent); }
#sort_options > a.selected { #sort_options > a.selected {
background: var(--accent); background: var(--accent);
color: black; color: var(--background);
} }
#sort_options > a:not(.selected):hover { #sort_options > a:not(.selected):hover {
@ -309,7 +310,7 @@ input[type="submit"]:hover { color: var(--accent); }
.post { .post {
border-radius: 5px; border-radius: 5px;
background: var(--post); background: var(--post);
box-shadow: var(--black-contrast); box-shadow: var(--shadow);
display: flex; display: flex;
transition: 0.2s all; transition: 0.2s all;
} }
@ -422,7 +423,7 @@ input[type="submit"]:hover { color: var(--accent); }
.post_flair { .post_flair {
background: var(--accent); background: var(--accent);
color: black; color: var(--background);
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
@ -475,7 +476,7 @@ input[type="submit"]:hover { color: var(--accent); }
.author_flair { .author_flair {
background: var(--highlighted); background: var(--highlighted);
color: white; color: var(--text);
padding: 5px; padding: 5px;
margin-right: 5px; margin-right: 5px;
border-radius: 5px; border-radius: 5px;
@ -551,15 +552,6 @@ input[type="submit"]:hover { color: var(--accent); }
background: var(--foreground); background: var(--foreground);
} }
.post.comment {
background: #000;
border: 2px solid var(--foreground);
}
.post.comment > .post_left {
background: black;
}
/* Layouts */ /* Layouts */
#compact .post:not(.highlighted) { #compact .post:not(.highlighted) {
@ -680,7 +672,7 @@ input[type="submit"]:hover { color: var(--accent); }
padding: 20px; padding: 20px;
margin-top: 10px; margin-top: 10px;
border-radius: 5px; border-radius: 5px;
box-shadow: var(--black-contrast); box-shadow: var(--shadow);
} }
.md table { .md table {