mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
131 lines
2 KiB
CSS
131 lines
2 KiB
CSS
|
/*
|
||
|
|
This file should contain ONLY coloring and theming rules.
|
||
|
|
Positioning and layout rules should go in skeleton.css!
|
||
|
|
*/
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/*
|
||
|
|
CSS variables go here!
|
||
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* The main colors of the stylesheet */
|
||
|
|
--background: #0d193b;
|
||
|
|
--foreground: #a0ccff;
|
||
|
|
--accent: #ffffff;
|
||
|
|
|
||
|
|
/* Panel background */
|
||
|
|
--panel: rgba(160, 204, 255, 0.02); /* It's --foreground, but with 2% alpha */
|
||
|
|
--border: rgba(160, 204, 255, 0.10); /* It's --foreground, but with 10% alpha */
|
||
|
|
|
||
|
|
/* Pastel colors */
|
||
|
|
--red: #ff7d7d;
|
||
|
|
--orange: #ffbb7d;
|
||
|
|
--yellow: #ffff7d;
|
||
|
|
--lime: #7dff7d;
|
||
|
|
--cyan: #7dffff;
|
||
|
|
--blue: #7d7dff;
|
||
|
|
--magenta: #ff7dff;
|
||
|
|
|
||
|
|
/* Link colors */
|
||
|
|
--link: #00caca;
|
||
|
|
--link-hover: #00ffff;
|
||
|
|
--link-active: #a0ffff;
|
||
|
|
|
||
|
|
/* Fonts */
|
||
|
|
--font-text: sans-serif;
|
||
|
|
--font-title: sans-serif;
|
||
|
|
--font-code: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
From here on, rules will be defined as
|
||
|
|
|
||
|
|
inherits1, inherits2, inherits3, ...,
|
||
|
|
.rule-name {
|
||
|
|
...
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* --- Main colors and font --- */
|
||
|
|
|
||
|
|
* {
|
||
|
|
border-color: var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--background);
|
||
|
|
color: var(--foreground);
|
||
|
|
font-family: var(--font-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Text colors --- */
|
||
|
|
|
||
|
|
.color-red {
|
||
|
|
color: var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-orange {
|
||
|
|
color: var(--orange);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-yellow {
|
||
|
|
color: var(--yellow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-lime {
|
||
|
|
color: var(--lime);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-cyan {
|
||
|
|
color: var(--cyan);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-blue {
|
||
|
|
color: var(--blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-magenta {
|
||
|
|
color: var(--magenta);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Titles --- */
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6, th,
|
||
|
|
.title {
|
||
|
|
color: var(--accent);
|
||
|
|
font-family: var(--font-title);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Links --- */
|
||
|
|
|
||
|
|
a,
|
||
|
|
.link {
|
||
|
|
color: var(--link);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover,
|
||
|
|
.link:hover {
|
||
|
|
color: var(--link-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:active,
|
||
|
|
.link:active {
|
||
|
|
color: var(--link-active);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Code blocks --- */
|
||
|
|
|
||
|
|
pre, code, samp,
|
||
|
|
.monospace {
|
||
|
|
font-family: var(--font-code);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Panels --- */
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
background-color: var(--panel);
|
||
|
|
}
|