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

Add black and white themes

Browse Source
This commit is contained in:
Wim Brand
2026-04-03 15:48:51 +02:00
parent 373bf5c786
commit 2fb0947077
10 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -135,8 +135,7 @@ pre>code {
} }
.page_content { .page_content {
background: var(--shaded_background); background: var(--body_background);
backdrop-filter: blur(4px);
text-align: center; text-align: center;
} }
@@ -198,12 +197,12 @@ section {
width: auto; width: auto;
height: auto; height: auto;
text-align: center; text-align: center;
padding: 4px; padding: 0.5em;
border-radius: 8px; border-radius: 8px;
} }
.highlight_border { .highlight_border {
border: 2px solid var(--separator); border: 1px var(--separator) solid;
} }
.highlight_shaded { .highlight_shaded {
@@ -292,7 +291,7 @@ hr {
height: 1px; height: 1px;
border: none; border: none;
background-color: var(--separator); background-color: var(--separator);
margin: 12px; margin: 0.5em 0;
} }
a { a {
@@ -315,7 +314,7 @@ ul {
fieldset { fieldset {
padding: 4px; padding: 4px;
border-radius: 8px; border-radius: 8px;
border: 2px var(--separator) solid; border: 1px var(--separator) solid;
margin: 0; margin: 0;
} }
@@ -325,7 +324,7 @@ fieldset>legend {
margin-right: auto; margin-right: auto;
border-radius: 8px; border-radius: 8px;
font-size: 1.1em; font-size: 1.1em;
border-bottom: 2px var(--separator) solid; border-bottom: 1px var(--separator) solid;
} }
/* Forms*/ /* Forms*/

2
svelte/src/filesystem/Toolbar.svelte
View File

@@ -21,7 +21,7 @@ let {
let share_dialog: ShareDialog = $state() let share_dialog: ShareDialog = $state()
let link_copied = $state(false) let link_copied = $state(false)
let toolbar_expanded = $state(false) let toolbar_expanded = $state(true)
export const copy_link = () => { export const copy_link = () => {
const share_url = fs_share_url($nav.path) const share_url = fs_share_url($nav.path)

19
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -4,6 +4,9 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex"; import rgb2hex from "pure-color/convert/rgb2hex";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte"; import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
const text_contrast = 75
const body_alpha = 0.9
type Style = { type Style = {
input_background?: string, input_background?: string,
input_hover_background?: string, input_hover_background?: string,
@@ -69,12 +72,12 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
if (properties.brand_input_color) { if (properties.brand_input_color) {
style.input_background = properties.brand_input_color style.input_background = properties.brand_input_color
style.input_hover_background = properties.brand_input_color style.input_hover_background = properties.brand_input_color
style.input_text = add_contrast(properties.brand_input_color, 75) style.input_text = add_contrast(properties.brand_input_color, text_contrast)
} }
if (properties.brand_highlight_color) { if (properties.brand_highlight_color) {
style.highlight_color = properties.brand_highlight_color style.highlight_color = properties.brand_highlight_color
style.highlight_background = properties.brand_highlight_color style.highlight_background = properties.brand_highlight_color
style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75) style.highlight_text_color = add_contrast(properties.brand_highlight_color, text_contrast)
// If we have a body colour to compare it to we use the highlight colour // If we have a body colour to compare it to we use the highlight colour
// to generate the link colour // to generate the link colour
@@ -84,20 +87,20 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
} }
if (properties.brand_danger_color) { if (properties.brand_danger_color) {
style.danger_color = properties.brand_danger_color style.danger_color = properties.brand_danger_color
style.danger_text_color = add_contrast(properties.brand_danger_color, 75) style.danger_text_color = add_contrast(properties.brand_danger_color, text_contrast)
} }
if (properties.brand_background_color) { if (properties.brand_background_color) {
style.background_color = properties.brand_background_color style.background_color = properties.brand_background_color
style.background = properties.brand_background_color style.background = properties.brand_background_color
style.background_text_color = add_contrast(properties.brand_background_color, 75) style.background_text_color = add_contrast(properties.brand_background_color, text_contrast)
style.background_pattern_color = properties.brand_background_color style.background_pattern_color = properties.brand_background_color
} }
if (properties.brand_body_color) { if (properties.brand_body_color) {
style.body_color = properties.brand_body_color style.body_color = properties.brand_body_color
style.body_background = properties.brand_body_color style.body_background = set_alpha(properties.brand_body_color, body_alpha)
style.body_text_color = add_contrast(properties.brand_body_color, 75) style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
style.shaded_background = set_alpha(properties.brand_body_color, 0.9) style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
style.separator = add_contrast(properties.brand_body_color, 8) style.separator = add_contrast(properties.brand_body_color, 15)
style.shadow_color = darken(properties.brand_body_color, 0.8) style.shadow_color = darken(properties.brand_body_color, 0.8)
} }
if (properties.brand_card_color) { if (properties.brand_card_color) {

28
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -29,7 +29,7 @@ const themes = [
brand_danger_color: "#821b3f", brand_danger_color: "#821b3f",
brand_background_color: "#141414", brand_background_color: "#141414",
brand_body_color: "#1e1e1e", brand_body_color: "#1e1e1e",
brand_card_color: "#282828" brand_card_color: "#282828",
}, { }, {
name: "Nord (dark)", name: "Nord (dark)",
brand_input_color: "#4f596d", brand_input_color: "#4f596d",
@@ -37,7 +37,7 @@ const themes = [
brand_danger_color: "#bd5f69", brand_danger_color: "#bd5f69",
brand_background_color: "#2f3541", brand_background_color: "#2f3541",
brand_body_color: "#3b4252", brand_body_color: "#3b4252",
brand_card_color: "#434c5f" brand_card_color: "#434c5f",
}, { }, {
name: "Nord (light)", name: "Nord (light)",
brand_input_color: "#cad2e1", brand_input_color: "#cad2e1",
@@ -45,7 +45,23 @@ const themes = [
brand_danger_color: "#bd5f69", brand_danger_color: "#bd5f69",
brand_background_color: "#d7dde8", brand_background_color: "#d7dde8",
brand_body_color: "#ebeef3", brand_body_color: "#ebeef3",
brand_card_color: "#e5e9f0" brand_card_color: "#e5e9f0",
}, {
name: "Black",
brand_input_color: "#202020",
brand_highlight_color: "#57e389",
brand_danger_color: "#ed333b",
brand_background_color: "#000000",
brand_body_color: "#080808",
brand_card_color: "#101010",
}, {
name: "White",
brand_input_color: "#f4f4f4",
brand_highlight_color: "#2ec27e",
brand_danger_color: "#c01c28",
brand_background_color: "#f8f8f8",
brand_body_color: "#ffffff",
brand_card_color: "#f0f0f0",
}, { }, {
name: "Solarized (dark)", name: "Solarized (dark)",
brand_input_color: "#084453", brand_input_color: "#084453",
@@ -53,7 +69,7 @@ const themes = [
brand_danger_color: "#db302d", brand_danger_color: "#db302d",
brand_background_color: "#002c38", brand_background_color: "#002c38",
brand_body_color: "#063540", brand_body_color: "#063540",
brand_card_color: "#073c49" brand_card_color: "#073c49",
}, { }, {
name: "Solarized (light)", name: "Solarized (light)",
brand_input_color: "#e7dfc5", brand_input_color: "#e7dfc5",
@@ -61,7 +77,7 @@ const themes = [
brand_danger_color: "#db302d", brand_danger_color: "#db302d",
brand_background_color: "#ede7d3", brand_background_color: "#ede7d3",
brand_body_color: "#fdf5e2", brand_body_color: "#fdf5e2",
brand_card_color: "#fcf2d8" brand_card_color: "#fcf2d8",
}, { }, {
name: "Mocha", name: "Mocha",
brand_input_color: "#313244", brand_input_color: "#313244",
@@ -69,7 +85,7 @@ const themes = [
brand_danger_color: "#f38ba8", brand_danger_color: "#f38ba8",
brand_background_color: "#1e1e2e", brand_background_color: "#1e1e2e",
brand_body_color: "#181825", brand_body_color: "#181825",
brand_card_color: "#313244" brand_card_color: "#313244",
} }
] ]
</script> </script>

2
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -64,7 +64,7 @@ onMount(() => {
{@render children?.()} {@render children?.()}
<div bind:this={background_div} class="background_div"> <div bind:this={background_div} class="background_div">
<TextBlock width="1000px"> <TextBlock width="auto">
<audio <audio
bind:this={player} bind:this={player}
class="player" class="player"

13
svelte/src/home_page/HomePage.svelte
View File

@@ -11,9 +11,6 @@ let upload_widget
</script> </script>
<header class="logo_header"> <header class="logo_header">
<div class="menu_button_container">
<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
</div>
<div class="header_image_container"></div> <div class="header_image_container"></div>
</header> </header>
@@ -139,15 +136,14 @@ header {
} }
header > h1 { header > h1 {
color: #ffffff; color: #ffffff;
text-shadow: 0 0 6px #000000; text-shadow: 1px 1px 5px #000000;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.header_image_container { .header_image_container {
text-align: initial; text-align: initial;
margin: auto; margin: 50px auto;
margin-bottom: 50px;
height: 100px; height: 100px;
width: 500px; width: 500px;
max-width: 100%; max-width: 100%;
@@ -156,10 +152,6 @@ header > h1 {
background-size: contain; background-size: contain;
background-position: center; background-position: center;
} }
.menu_button_container {
display: flex;
justify-content: end;
}
.image { .image {
max-width: 100%; max-width: 100%;
border-radius: 12px; border-radius: 12px;
@@ -167,7 +159,6 @@ header > h1 {
.bold { .bold {
font-weight: bold; font-weight: bold;
color: var(--highlight_color); color: var(--highlight_color);
text-shadow: 1px 1px 3px var(--shadow_color);
} }
.prices { .prices {

2
svelte/src/speedtest/Speedtest.svelte
View File

@@ -186,7 +186,7 @@ onMount(() => {
}) })
</script> </script>
<section class="highlight_border"> <section>
<div style="text-align: center"> <div style="text-align: center">
<Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!running}/> <Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!running}/>
<Button icon="speed" label="Long test" click={() => start(30000)} disabled={running}/> <Button icon="speed" label="Long test" click={() => start(30000)} disabled={running}/>

1
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -168,7 +168,6 @@ onMount(() => {
<style> <style>
.separator { .separator {
border-top: 1px solid var(--separator);
margin: 0 8px; margin: 0 8px;
} }
.cards { .cards {

6
svelte/src/util/TabMenu.svelte
View File

@@ -117,11 +117,15 @@ onMount(() => {
{/if} {/if}
<style> <style>
.submenu {
header, .submenu {
border-bottom: 1px solid var(--separator); border-bottom: 1px solid var(--separator);
} }
.tab_bar > .button { .tab_bar > .button {
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.button_highlight {
background: var(--body_background);
}
</style> </style>

9
svelte/src/wrap/MainMenu.svelte
View File

@@ -261,7 +261,7 @@ const set_offset = (off: number) => {
color: var(--body_text_color); color: var(--body_text_color);
background-image: var(--background_image); background-image: var(--background_image);
background-color: var(--background_pattern_color); background-color: var(--background_color);
background-size: var(--background_image_size, initial); background-size: var(--background_image_size, initial);
background-position: var(--background_image_position, initial); background-position: var(--background_image_position, initial);
background-repeat: var(--background_image_repeat, repeat); background-repeat: var(--background_image_repeat, repeat);
@@ -272,7 +272,7 @@ const set_offset = (off: number) => {
.nav_container { .nav_container {
flex: 0 0 auto; flex: 0 0 auto;
border-right: 1px solid var(--separator); border-right: 1px solid var(--separator);
background: var(--shaded_background); background: var(--body_background);
z-index: 9; z-index: 9;
} }
.scroll_container { .scroll_container {
@@ -322,8 +322,11 @@ const set_offset = (off: number) => {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
background: var(--shaded_background); background: var(--body_background);
border-bottom: 1px solid var(--separator); border-bottom: 1px solid var(--separator);
position: sticky;
top: 0;
z-index: 8; /* below navigation, on top of most other things */
} }
.menu_button { .menu_button {
flex: 0 0 auto; flex: 0 0 auto;