Wim Brand
58db683fc8
Remove all legacy pixeldrain pages, handlers and assets. Remove old theming engine. Make logo responsive to the accent colour. Lots of other stuff.
716 lines
13 KiB
CSS
716 lines
13 KiB
CSS
/*
|
|
Created on : Jun 3, 2015, 9:33:11 AM
|
|
Author : Fornax
|
|
*/
|
|
|
|
/* The default theme, a dark and a light variant which follow the browser's
|
|
preference. Branding colours are applied on top of these by the app, see
|
|
Branding.ts */
|
|
:root {
|
|
--color_scheme: dark;
|
|
--background_color: #15161c;
|
|
--background: var(--background_color);
|
|
--background_text_color: #e6e8ef;
|
|
--body_color: #1c1d25;
|
|
--body_background: rgb(28 29 37 / 90%);
|
|
--shaded_background: rgb(28 29 37 / 90%);
|
|
--body_text_color: #e6e8ef;
|
|
--card_color: #252733;
|
|
--separator: #2e3040;
|
|
--shadow_color: #0c0d12;
|
|
--input_background: #2c2e3b;
|
|
--input_hover_background: #363949;
|
|
--input_text: #eceef4;
|
|
--input_disabled_text: #737890;
|
|
--accent_color: #49dfa0;
|
|
--accent_shade: #243d32;
|
|
--accent_background: #49dfa0;
|
|
--accent_text_color: #05130d;
|
|
--link_color: #70ebb8;
|
|
--scrollbar_foreground_color: #33364a;
|
|
--scrollbar_hover_color: #43475f;
|
|
|
|
/* Accents for success, errors, warnings and notices. They're the highlight
|
|
colour with a different hue, see Branding.ts. The tints are backgrounds
|
|
for messages */
|
|
--green_color: #49df7b;
|
|
--red_color: #df5d49;
|
|
--yellow_color: #dfba49;
|
|
--blue_color: #4987df;
|
|
--green_tint: rgb(73 223 123 / 12%);
|
|
--red_tint: rgb(223 93 73 / 12%);
|
|
--yellow_tint: rgb(223 186 73 / 12%);
|
|
--blue_tint: rgb(73 135 223 / 12%);
|
|
|
|
/* The logo's mint colourway, see NovaLogo.svelte */
|
|
--logo_color_1: #45ed52;
|
|
--logo_color_2: #11a574;
|
|
--logo_color_3: #24b880;
|
|
--logo_color_4: #39ef3d;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color_scheme: light;
|
|
--background_color: #e9ebf0;
|
|
--background_text_color: #1b1d25;
|
|
--body_color: #f5f6f9;
|
|
--body_background: rgb(245 246 249 / 90%);
|
|
--shaded_background: rgb(245 246 249 / 90%);
|
|
--body_text_color: #1b1d25;
|
|
--card_color: #ffffff;
|
|
--separator: #d3d7e0;
|
|
--shadow_color: #b9bdc9;
|
|
--input_background: #e2e5ec;
|
|
--input_hover_background: #d7dbe4;
|
|
--input_text: #1b1d25;
|
|
--input_disabled_text: #80859a;
|
|
--accent_color: #09714b;
|
|
--accent_shade: #e2eeea;
|
|
--accent_background: #09714b;
|
|
--accent_text_color: #ffffff;
|
|
--link_color: #09714b;
|
|
--scrollbar_foreground_color: #c6cad5;
|
|
--scrollbar_hover_color: #b0b5c3;
|
|
|
|
/* Accents derived from the accent colour are too light on white,
|
|
these are the same ones branded light themes get */
|
|
--green_color: #15793a;
|
|
--red_color: #ba2c37;
|
|
--yellow_color: #995c00;
|
|
--blue_color: #2164ca;
|
|
--green_tint: rgb(21 121 58 / 12%);
|
|
--red_tint: rgb(186 44 55 / 12%);
|
|
--yellow_tint: rgb(153 92 0 / 12%);
|
|
--blue_tint: rgb(33 100 202 / 12%);
|
|
}
|
|
}
|
|
|
|
/* Branding can set a different scheme on the body, for a shared directory. The
|
|
browser draws checkboxes and radio buttons in the accent colour */
|
|
:root,
|
|
body {
|
|
color-scheme: var(--color_scheme);
|
|
accent-color: var(--accent_color);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: local('Material Icons'),
|
|
local('MaterialIcons-Regular'),
|
|
url(/res/misc/MaterialIcons.woff2) format('woff2');
|
|
}
|
|
|
|
.icon {
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.5em;
|
|
display: inline-block;
|
|
line-height: 1em;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
text-rendering: optimizeLegibility;
|
|
vertical-align: middle;
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
|
|
.icon_unicode {
|
|
font-size: 1.5em;
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
|
|
.icon.small {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
a>svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Page rendering configuration */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, sans-serif;
|
|
font-size: 17px;
|
|
line-height: 1.5em;
|
|
color: var(--body_text_color);
|
|
background: var(--background);
|
|
min-height: 100vh;
|
|
padding: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
|
|
footer {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
footer>.footer_content {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
header>h1 {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
color: var(--background_text_color);
|
|
}
|
|
|
|
p>img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--background);
|
|
border-radius: 5px;
|
|
margin: 0;
|
|
padding: 0 0.2em;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
pre>code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Page layout elements */
|
|
|
|
.page_content {
|
|
background: var(--body_background);
|
|
text-align: center;
|
|
margin: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
header>h1 {
|
|
/* We want the header text to appear below the menu button, so the top
|
|
margin needs to be fairly large when the screen is small */
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
section {
|
|
position: relative;
|
|
display: block;
|
|
padding: 8px;
|
|
max-width: 1000px;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: auto;
|
|
text-align: initial;
|
|
clear: both;
|
|
}
|
|
|
|
.bubble {
|
|
background: var(--body_background);
|
|
margin: 4px;
|
|
border-radius: 8px;
|
|
border-top: 1px solid var(--separator);
|
|
border-left: 1px solid var(--separator);
|
|
}
|
|
|
|
/* Page contents */
|
|
|
|
.highlight_shaded,
|
|
.highlight_border,
|
|
.highlight_green,
|
|
.highlight_blue,
|
|
.highlight_yellow,
|
|
.highlight_red {
|
|
width: auto;
|
|
height: auto;
|
|
text-align: center;
|
|
padding: 0.5em;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.highlight_border {
|
|
border: 1px var(--separator) solid;
|
|
}
|
|
|
|
.highlight_shaded {
|
|
background: var(--card_color);
|
|
}
|
|
|
|
.highlight_green {
|
|
background-color: var(--green_tint);
|
|
border-color: var(--green_color);
|
|
}
|
|
|
|
.highlight_blue {
|
|
background-color: var(--blue_tint);
|
|
border-color: var(--blue_color);
|
|
}
|
|
|
|
.highlight_yellow {
|
|
background-color: var(--yellow_tint);
|
|
border-color: var(--yellow_color);
|
|
}
|
|
|
|
.highlight_red {
|
|
background-color: var(--red_tint);
|
|
border-color: var(--red_color);
|
|
}
|
|
|
|
.highlight_green,
|
|
.highlight_blue,
|
|
.highlight_yellow,
|
|
.highlight_red {
|
|
border-top-width: 2px;
|
|
border-top-style: solid;
|
|
border-bottom-width: 2px;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
/* Common elements */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1;
|
|
margin: 0.6em 0 0.3em 0;
|
|
font-weight: lighter;
|
|
font-family: 'Open Sans Light', sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.4em;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.6em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.4em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.2em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
.indent {
|
|
margin: 8px;
|
|
}
|
|
|
|
hr {
|
|
height: 1px;
|
|
border: none;
|
|
background-color: var(--separator);
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--link_color);
|
|
}
|
|
|
|
p {
|
|
margin: 0.6em 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
fieldset {
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
border: 1px var(--separator) solid;
|
|
margin: 0;
|
|
}
|
|
|
|
fieldset>legend {
|
|
padding: 2px 8px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 8px;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px var(--separator) solid;
|
|
}
|
|
|
|
/* Forms*/
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: initial;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
.form>* {
|
|
display: block;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.form>label {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.form>input[type="submit"],
|
|
.form>button[type="submit"] {
|
|
align-self: end;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Tables */
|
|
|
|
table:not(.form) {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
.table_scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table_scroll>table {
|
|
min-width: 100%;
|
|
}
|
|
|
|
tr>td,
|
|
tr>th {
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
|
|
/* BUTTONS */
|
|
button,
|
|
.button,
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
input[type="color"] {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
border-radius: 6px;
|
|
margin: 2px;
|
|
background: var(--input_background);
|
|
gap: 2px;
|
|
padding: 2px;
|
|
overflow: hidden;
|
|
color: var(--input_text);
|
|
cursor: pointer;
|
|
box-shadow: 1px 1px 0px 0px var(--shadow_color);
|
|
transition: padding 0.1s, box-shadow 0.1s, background 0.1s;
|
|
|
|
/* Align content vertically in relation to the container */
|
|
vertical-align: middle;
|
|
/* Align content vertically in relation to eachother */
|
|
align-items: center;
|
|
|
|
/* Remove default styles set by the user-agent */
|
|
outline: 0;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
border: none;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.button.flat {
|
|
background: none;
|
|
color: var(--body_text_color);
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
input[type="color"]:hover,
|
|
button:focus,
|
|
.button:focus,
|
|
input[type="submit"]:focus,
|
|
input[type="button"]:focus,
|
|
input[type="color"]:focus {
|
|
color: var(--input_text);
|
|
text-decoration: none;
|
|
background: var(--input_hover_background);
|
|
box-shadow: 0px 0px 0px 1px var(--accent_color) !important;
|
|
}
|
|
|
|
button:active,
|
|
.button:active,
|
|
input[type="submit"]:active,
|
|
input[type="button"]:active,
|
|
input[type="color"]:active {
|
|
box-shadow: inset 4px 4px 6px var(--shadow_color);
|
|
/* Exactly 2px offset compared to the inactive padding to give a depth effect */
|
|
padding: 4px 0px 0px 4px;
|
|
}
|
|
|
|
/* Selected buttons get the accent colour on a shade of it. The outline shows
|
|
hover and keyboard focus, so it would be confusing to use it for this too */
|
|
.button_highlight {
|
|
color: var(--accent_color) !important;
|
|
background: var(--accent_shade) !important;
|
|
}
|
|
|
|
.icon.button_highlight {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.button_red {
|
|
background: var(--red_tint) !important;
|
|
color: var(--red_color) !important;
|
|
}
|
|
|
|
.button_red:hover,
|
|
.button_red:focus {
|
|
box-shadow: 0px 0px 0px 1px var(--red_color) !important;
|
|
}
|
|
|
|
button:disabled,
|
|
button.disabled,
|
|
.button:disabled,
|
|
.button.disabled,
|
|
input[type="submit"]:disabled,
|
|
input[type="submit"].disabled,
|
|
input[type="button"]:disabled,
|
|
input[type="button"].disabled,
|
|
input[type="color"]:disabled,
|
|
input[type="color"].disabled {
|
|
color: var(--input_disabled_text);
|
|
box-shadow: none;
|
|
transition: none;
|
|
padding: 3px 4px;
|
|
cursor: not-allowed;
|
|
background: var(--input_background);
|
|
}
|
|
|
|
.small_button {
|
|
margin: 1px;
|
|
padding: 1px 1px 1px 1px;
|
|
}
|
|
|
|
.small_button:active {
|
|
box-shadow: inset 2px 2px 4px var(--shadow_color);
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
.group_first {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.group_middle {
|
|
border-radius: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.group_last {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
button>i,
|
|
.button>i,
|
|
button>svg,
|
|
.button>svg {
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
|
|
.round {
|
|
border-radius: 32px;
|
|
}
|
|
|
|
.tab_bar {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.tab_bar>button,
|
|
.tab_bar>.button {
|
|
margin: .5em .3em 0 .3em;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
min-width: 5em;
|
|
}
|
|
|
|
/* Dropdown list of the select tag */
|
|
option {
|
|
background: var(--input_background);
|
|
color: var(--body_text_color);
|
|
}
|
|
|
|
/* TEXT FIELDS */
|
|
textarea,
|
|
select,
|
|
.groove,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="datetime-local"] {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
/* Same as button, to make them align nicely */
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: var(--input_background);
|
|
padding: 3px;
|
|
box-shadow: inset 1px 1px 0px 0px var(--shadow_color);
|
|
/* override user-agent style */
|
|
min-width: 100px;
|
|
color: var(--input_text);
|
|
font-size: 1em;
|
|
outline: 0;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
|
|
textarea:active,
|
|
select:active,
|
|
input[type="text"]:active,
|
|
input[type="password"]:active,
|
|
input[type="email"]:active,
|
|
input[type="number"]:active,
|
|
input[type="date"]:active,
|
|
input[type="datetime-local"]:active,
|
|
textarea:focus,
|
|
select:focus,
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="date"]:focus,
|
|
input[type="datetime-local"]:focus {
|
|
box-shadow: inset 0px 0px 0px 1px var(--accent_color);
|
|
}
|
|
|
|
textarea:disabled,
|
|
select:disabled,
|
|
input[type="text"]:disabled,
|
|
input[type="password"]:disabled,
|
|
input[type="email"]:disabled,
|
|
input[type="number"]:disabled,
|
|
input[type="date"]:disabled,
|
|
input[type="datetime-local"]:disabled {
|
|
color: var(--input_disabled_text);
|
|
box-shadow: none;
|
|
transition: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input[type=file] {
|
|
visibility: hidden;
|
|
position: static;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The selected option in multi select */
|
|
option:checked {
|
|
background-color: var(--accent_background);
|
|
color: var(--accent_text_color);
|
|
}
|
|
|
|
/* Webkit Scrollbars */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 16px;
|
|
/* for vertical scrollbars */
|
|
height: 16px;
|
|
/* for horizontal scrollbars */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background_color);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar_foreground_color);
|
|
border-radius: 10px;
|
|
border: 4px solid var(--background_color);
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar_hover_color);
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: var(--background_color);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:single-button {
|
|
background-color: var(--background_color);
|
|
display: block;
|
|
border-style: solid;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
/* Firefox Scrollbar */
|
|
|
|
* {
|
|
scrollbar-color: var(--scrollbar_foreground_color) var(--background_color);
|
|
}
|