pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Graphical overhaul.

Browse Source 
Remove all legacy pixeldrain pages, handlers and assets.
Remove old theming engine.
Make logo responsive to the accent colour.
Lots of other stuff.
This commit is contained in:
Wim Brand
2026-10-01 02:06:00 +02:00
parent 7b2e4b4240
commit 58db683fc8
98 changed files with 1025 additions and 6475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
res/static/style/layout.css
View File

@@ -3,8 +3,95 @@
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 {
--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
--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 {
@@ -14,7 +101,7 @@
font-display: block;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/res/misc/MaterialIcons.woff2) format('truetype');
url(/res/misc/MaterialIcons.woff2) format('woff2');
}
.icon {
@@ -117,21 +204,6 @@ pre>code {
/* Page layout elements */
.page_navigation {
position: fixed;
backface-visibility: hidden;
background: var(--navigation_background);
width: 300px;
height: 100%;
left: 0;
float: left;
padding: 20px 0 10px 0;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
transition: left 0.5s;
}
.page_content {
background: var(--body_background);
text-align: center;
@@ -140,10 +212,6 @@ pre>code {
}
@media (max-width: 1000px) {
.page_navigation {
left: -300px;
}
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 */
@@ -173,29 +241,6 @@ section {
/* Page contents */
.page_navigation a {
float: none;
display: block;
color: var(--background_text_color);
text-align: center;
padding: 4px;
margin: 0.2em 15px 0.2em 15px;
font-family: 'Open Sans Light', sans-serif;
font-weight: lighter;
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.2s;
border-radius: 24px;
text-decoration: none;
}
.page_navigation a:hover {
background: var(--input_background);
color: var(--input_text);
text-decoration: none;
}
.highlight_shaded,
.highlight_border,
.highlight_green,
@@ -218,23 +263,23 @@ section {
}
.highlight_green {
background-color: rgba(0, 255, 0, 0.1);
border-color: #00D000;
background-color: var(--green_tint);
border-color: var(--green_color);
}
.highlight_blue {
background-color: rgba(0, 0, 255, 0.1);
border-color: #3636FF;
background-color: var(--blue_tint);
border-color: var(--blue_color);
}
.highlight_yellow {
background-color: rgba(255, 255, 0, 0.1);
border-color: #A0A000;
background-color: var(--yellow_tint);
border-color: var(--yellow_color);
}
.highlight_red {
background-color: rgba(255, 0, 0, 0.1);
border-color: #B00000;
background-color: var(--red_tint);
border-color: var(--red_color);
}
.highlight_green,
@@ -386,53 +431,6 @@ tr>th {
padding: 0.2em 0.5em;
}
/* API documentation markup */
.api_doc_details {
border-top: 1px solid;
border-bottom: 1px solid;
margin: 15px 0 15px 0;
}
.api_doc_details>summary {
padding: 2px;
font-family: monospace;
}
.api_doc_details>summary>.method {
display: inline-block;
width: 80px;
}
.api_doc_details>div {
padding: 8px;
}
.api_doc_details.request_get {
border-color: #3636ff;
background-color: rgba(32, 32, 255, 0.2);
}
.api_doc_details.request_post {
border-color: #00d000;
background-color: rgba(0, 255, 0, 0.05);
}
.api_doc_details.request_delete {
border-color: #B00000;
background-color: rgba(255, 0, 0, 0.05);
}
.api_doc_details.request_put {
border-color: #B06000;
background-color: rgba(255, 128, 0, 0.05);
}
.api_doc_details.request_patch {
border-color: #6000B0;
background-color: rgba(128, 0, 255, 0.1);
}
/* BUTTONS */
button,
.button,
@@ -486,7 +484,7 @@ input[type="color"]:focus {
color: var(--input_text);
text-decoration: none;
background: var(--input_hover_background);
box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
box-shadow: 0px 0px 0px 1px var(--accent_color) !important;
}
button:active,
@@ -499,13 +497,25 @@ input[type="color"]:active {
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 {
box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
color: var(--accent_color) !important;
background: var(--accent_shade) !important;
}
.icon.button_highlight {
border-radius: 4px;
}
.button_red {
background: var(--danger_color) !important;
color: var(--danger_text_color) !important;
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,
@@ -631,7 +641,7 @@ 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(--highlight_color);
box-shadow: inset 0px 0px 0px 1px var(--accent_color);
}
textarea:disabled,
@@ -657,8 +667,8 @@ input[type=file] {
/* The selected option in multi select */
option:checked {
background-color: var(--highlight_background);
color: var(--highlight_text_color);
background-color: var(--accent_background);
color: var(--accent_text_color);
}
/* Webkit Scrollbars */