Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
commit 1f4985c7dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 170 additions and 50 deletions
Show Stats 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;

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 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/main.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 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/main.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">
{{#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 this.keywords "fabric"}}
<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 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/search.css" rel="stylesheet" type="text/css">
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css">