eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Implemented a dark theme

Browse Source
This commit is contained in:
emilyploszaj
2020-06-22 21:48:42 -05:00
parent 906196bac3
commit ed88d9e10d
8 changed files with 170 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
static/css/main.css
View File

@@ -1,9 +1,103 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
:root, [data-theme="light"] {
--background: #f3f2f0;
--highlight: #0b75d8;
--border: #a9a9a9;
--mod-bar: #fefefe;
--content-background: white;
--nav-background: #dfdfdf;
--content-text: black;
--header-text: black;
--white-text: white;
--muted: gray;
--forge-color: #1e2d44;
--tech-color: red;
--adventure-color: saddlebrown;
--magic-color: rebeccapurple;
--utility-color: orangered;
--decoration-color: #2f92d8;
--world-color: yellow;
--library-color: orange;
--cursed-color: palevioletred;
--misc-color: deepskyblue;
--storage-color: #e1a15a;
--food-color: royalblue;
--equipment-color: black;
}
[data-theme="dark"] {
--background: #1b1b1b;
--highlight: #0b75d8;
--border: #1d1d1d;
--mod-bar: #222222;
--content-background: rgb(34, 34, 34);
--nav-background: #252525;
--content-text: rgb(241, 241, 241);
--header-text: rgb(241, 241, 241);
--white-text: white;
--muted: gray;
--forge-color: white;
--tech-color: #bf3f3f;
--adventure-color: #764827;
--magic-color: #663299;
--utility-color: #bf623f;
--decoration-color: #458ec1;
--world-color: #e6e62c;
--library-color: #cc9a3c;
--cursed-color: #d17695;
--misc-color: #3f9fbf;
--storage-color: #cea06c;
--food-color: #5975c8;
--equipment-color: #000000;
}
@media (prefers-color-scheme: dark) {
[data-theme="light"] {
--background: #f3f2f0;
--highlight: #0b75d8;
--border: #a9a9a9;
--mod-bar: #fefefe;
--content-background: white;
--nav-background: #dfdfdf;
--content-text: black;
--header-text: black;
--white-text: white;
--muted: gray;
--forge-color: #1e2d44;
}
:root, [data-theme="dark"] {
--background: #1b1b1b;
--highlight: #0b75d8;
--border: #1d1d1d;
--mod-bar: #222222;
--content-background: rgb(34, 34, 34);
--nav-background: #252525;
--content-text: rgb(241, 241, 241);
--header-text: rgb(241, 241, 241);
--white-text: white;
--muted: gray;
--forge-color: white;
}
}
* {
transition: color 0.4s, background-color 0.4s, border-color 0.4s, fill 0.4s !important;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
background-color: #f3f2f0;
background-color: var(--background);
color: var(--content-text);
}
h1, h2, h3, h4, h5, h6 {
color: var(--header-text);
}
.main-flex {
@@ -12,13 +106,13 @@ body {
}
.muted {
color: gray;
color: var(--muted);
}
.temp-circle-logo {
height: 50px;
width: 50px;
background-color: white;
background-color: var(--content-background);
border-radius: 50%;
display: inline-block;
margin-left: 20%;
@@ -27,7 +121,7 @@ body {
.site-header {
z-index: 2;
position: sticky;
background-color: #0b75d8;
background-color: var(--highlight);
top: 0;
width: 100%;
height: 75px;
@@ -36,7 +130,7 @@ body {
}
.site-header h2 {
color: white;
color: --var(white-text);
font-weight: bolder;
padding: 0 20px 0 10px;
}
@@ -45,7 +139,7 @@ body {
margin: 0 auto;
}
.links-container a {
color: white;
color: var(--white-text);
padding: 0 30px;
text-decoration: none;
}
@@ -56,7 +150,7 @@ body {
}
.gray-border {
border: 1px solid #a9a9a9;
border: 1px solid var(--border);
}
.green {

39
static/css/mod.css
View File

@@ -18,7 +18,7 @@
.navigation-pointer {
color: gray;
background-color: #dfdfdf;
background-color: var(--nav-background);
padding: 10px;
border-radius: 5px;
text-decoration: none;
@@ -27,7 +27,7 @@
}
.navigation-text {
color: #0b75d8;
color: var(--highlight);
background-color: #c9def2;
padding: 10px;
border-radius: 5px;
@@ -40,8 +40,8 @@
display: flex;
flex-direction: row;
align-items: center;
color: white;
background-color: #0b75d8;
color: var(--white-text);
background-color: var(--highlight);
text-decoration: none;
font-weight: bold;
padding: 10px;
@@ -61,7 +61,7 @@
width: 100%;
height: 100px;
background-color: white;
background-color: var(--content-background);
margin: 0 0 20px 0;
}
@@ -99,18 +99,18 @@
margin: 5px 10px 0 0;
padding: 5px 10px;
color: gray;
background-color: #fefefe;
background-color: var(--mod-bar);
border-radius: 5px 5px 0 0;
border: 1px solid darkgrey;
border: 1px solid var(--border);
border-bottom: none !important;
text-decoration: none;
cursor: pointer;
}
.mod-bar-active {
color: #0b75d8 !important;
color: var(--highlight) !important;
font-weight: bold;
background-color: white !important;
background-color: var(--content-background) !important;
}
.mod-hide {
@@ -133,7 +133,10 @@
.search-bar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
color: var(--content-text);
background-color: var(--content-background);
border-color: var(--border);
width: 100%;
margin-top: 5px;
margin-bottom: 25px;
@@ -147,7 +150,7 @@
width: 100%;
height: auto !important;
background-color: white;
background-color: var(--content-background);
}
.sidebar-entry {
@@ -230,12 +233,12 @@
.sidebar-line {
height: 1px;
width: 80%;
background-color: darkgrey;
background-color: var(--border);
margin: 0 auto;
}
.download {
color: white;
color: var(--white-text);
padding: 10px 5px;
margin-bottom: 5px;
width: 200px;
@@ -245,7 +248,7 @@
}
.download-primary {
background-color: #0b75d8;
background-color: var(--highlight);
}
.download-normal {
@@ -256,9 +259,9 @@
padding: 5px;
margin-top: 0px;
width: 100%;
background-color: white;
background-color: var(--content-background);
border-radius: 0 5px 5px 5px;
border: 1px solid darkgrey;
border: 1px solid var(--border);
font-size: 16px;
line-height: 20px;
}
@@ -297,9 +300,9 @@
.api {
margin-top: 0;
width: 100%;
background-color: white;
background-color: var(--content-background);
border-radius: 0 5px 5px 5px;
border: 1px solid darkgrey;
border: 1px solid var(--border);
font-size: 16px;
line-height: 20px;
}

56
static/css/search.css
View File

@@ -3,9 +3,10 @@
height: 33px;
width: 175px;
background-color: white;
color: var(--content-text);
background-color: var(--content-background);
border-radius: 5px;
border: 1px solid darkgrey;
border: 1px solid var(--border);
}
.versions {
@@ -51,10 +52,10 @@
margin: 0;
font-weight: bold;
color: black;
background-color: white;
border-bottom: 1px solid darkgrey;
border-top: 1px solid darkgrey;
color: var(--content-text);
background-color: var(--content-background);
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -82,9 +83,10 @@
border-radius: 5px;
padding: 0 10px;
background-color: #ffffff;
color: var(--content-text);
background-color: var(--content-background);
background-image: none;
border: 1px solid darkgrey;
border: 1px solid var(--border);
}
.categories {
@@ -139,6 +141,9 @@
.search-bar {
position: -webkit-sticky !important;
position: sticky !important;
color: var(--content-text);
background-color: var(--content-background);
border-color: var(--border);
height: 2em;
margin-top: 30px;
margin-bottom: 15px;
@@ -176,7 +181,7 @@
width: 100%;
flex-direction: row;
align-items: center;
background-color: white;
background-color: var(--content-background);
}
.result-image {
@@ -203,7 +208,7 @@
.result-name {
text-decoration: none;
color: #0b75d8;
color: var(--highlight);
}
.result-author {
@@ -256,41 +261,42 @@
.tech-badge {
color: white;
background-color: red;
background-color: var(--tech-color);
}
.adventure-badge {
color: white;
background-color: saddlebrown;
background-color: var(--adventure-color);
}
.magic-badge {
color: white;
background-color: rebeccapurple;
background-color: var(--magic-color);
}
.utility-badge {
color: white;
background-color: orangered;
background-color: var(--utility-color);
}
.decoration-badge {
color: white;
background-color: #2f92d8;
background-color: var(--decoration-color);
}
.world-badge {
background-color: yellow;
color: black;
background-color: var(--world-color);
}
.library-badge {
color: white;
background-color: orange;
background-color: var(--library-color);
}
.cursed-badge {
color: white;
background-color: palevioletred;
background-color: var(--cursed-color);
}
.cursed-badge img {
@@ -299,34 +305,36 @@
.misc-badge {
color: white;
background-color: deepskyblue;
background-color: var(--misc-color);
}
.storage-badge {
color: wheat;
background-color: #e1a15a;
background-color: var(--storage-color);
}
.food-badge {
color: white;
background-color: royalblue;
background-color: var(--food-color);
}
.equipment-badge {
color: white;
background-color: black;
background-color: var(--equipment-color);
}
.forge {
padding-top: 5px !important;
height: 12px;
padding-top: 5px !important;
fill: var(--forge-color);
}
.back-to-top {
position: fixed;
top: 80%;
left: 19%;
background-color: #0b75d8;
background-color: var(--highlight);
text-align: center;
padding: 20px;
display: none;