158 lines
3.1 KiB
CSS
158 lines
3.1 KiB
CSS
@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: var(--background);
|
|
color: var(--content-text);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--header-text);
|
|
}
|
|
|
|
.main-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.temp-circle-logo {
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: var(--content-background);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
.site-header {
|
|
z-index: 2;
|
|
position: sticky;
|
|
background-color: var(--highlight);
|
|
top: 0;
|
|
width: 100%;
|
|
height: 75px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-header h2 {
|
|
color: --var(white-text);
|
|
font-weight: bolder;
|
|
padding: 0 20px 0 10px;
|
|
}
|
|
|
|
.links-container {
|
|
margin: 0 auto;
|
|
}
|
|
.links-container a {
|
|
color: var(--white-text);
|
|
padding: 0 30px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.rounded-border {
|
|
border-radius: 10px;
|
|
border: 1px;
|
|
}
|
|
|
|
.gray-border {
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.green {
|
|
color: #69E781;
|
|
} |