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

Merge pull request #6 from emilyploszaj/master

Browse Source 
Implemented a dark theme
This commit is contained in:
Geometrically
2020-06-22 19:57:37 -07:00
committed by GitHub
parent 906196bac3 ed88d9e10d
commit 1f4985c7dd
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'); @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 { body {
margin: 0; margin: 0;
font-family: 'Montserrat', sans-serif; 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 { .main-flex {
@@ -12,13 +106,13 @@ body {
} }
.muted { .muted {
color: gray; color: var(--muted);
} }
.temp-circle-logo { .temp-circle-logo {
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: white; background-color: var(--content-background);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin-left: 20%; margin-left: 20%;
@@ -27,7 +121,7 @@ body {
.site-header { .site-header {
z-index: 2; z-index: 2;
position: sticky; position: sticky;
background-color: #0b75d8; background-color: var(--highlight);
top: 0; top: 0;
width: 100%; width: 100%;
height: 75px; height: 75px;
@@ -36,7 +130,7 @@ body {
} }
.site-header h2 { .site-header h2 {
color: white; color: --var(white-text);
font-weight: bolder; font-weight: bolder;
padding: 0 20px 0 10px; padding: 0 20px 0 10px;
} }
@@ -45,7 +139,7 @@ body {
margin: 0 auto; margin: 0 auto;
} }
.links-container a { .links-container a {
color: white; color: var(--white-text);
padding: 0 30px; padding: 0 30px;
text-decoration: none; text-decoration: none;
} }
@@ -56,7 +150,7 @@ body {
} }
.gray-border { .gray-border {
border: 1px solid #a9a9a9; border: 1px solid var(--border);
} }
.green { .green {

39
static/css/mod.css
View File

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

56
static/css/search.css
View File

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

3
static/js/main.js Normal file
View File

@@ -0,0 +1,3 @@
if (localStorage.getItem("theme")) {
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
}

2
templates/mod-create.hbs
View File

@@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/js/main.js"></script>
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css"> <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/static/css/main.css" rel="stylesheet" type="text/css"> <link href="/static/css/main.css" rel="stylesheet" type="text/css">
<link href="/static/css/create-mod.css" rel="stylesheet" type="text/css"> <link href="/static/css/create-mod.css" rel="stylesheet" type="text/css">

2
templates/mod-page.hbs
View File

@@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/js/main.js"></script>
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css"> <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/static/css/main.css" rel="stylesheet" type="text/css"> <link href="/static/css/main.css" rel="stylesheet" type="text/css">
<link href="/static/css/mod.css" rel="stylesheet" type="text/css"> <link href="/static/css/mod.css" rel="stylesheet" type="text/css">

8
templates/search-results.hbs
View File

@@ -22,7 +22,13 @@
<div class="loader-icons"> <div class="loader-icons">
{{#contains this.keywords "forge"}} {{#contains this.keywords "forge"}}
<img alt="forge" src="/static/images/icon/forge.svg" class="forge"/> <svg viewBox="0 0 120 66.7" class="forge">
<path d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
</svg>
{{/contains}} {{/contains}}
{{#contains this.keywords "fabric"}} {{#contains this.keywords "fabric"}}
<img alt="fabric" src="/static/images/icon/fabric.png"/> <img alt="fabric" src="/static/images/icon/fabric.png"/>

2
templates/search.hbs
View File

@@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/js/main.js"></script>
<link href="/static/css/main.css" rel="stylesheet" type="text/css"> <link href="/static/css/main.css" rel="stylesheet" type="text/css">
<link href="/static/css/search.css" rel="stylesheet" type="text/css"> <link href="/static/css/search.css" rel="stylesheet" type="text/css">
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css"> <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">