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

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

@@ -21,7 +21,7 @@ let {
let share_dialog: ShareDialog = $state()
let link_copied = $state(false)
let toolbar_expanded = $state(false)
let toolbar_expanded = $state(true)
export const copy_link = () => {
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 type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
const text_contrast = 75
const body_alpha = 0.9
type Style = {
input_background?: string,
input_hover_background?: string,
@@ -69,12 +72,12 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
if (properties.brand_input_color) {
style.input_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) {
style.highlight_color = 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
// to generate the link colour
@@ -84,20 +87,20 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
}
if (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) {
style.background_color = 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
}
if (properties.brand_body_color) {
style.body_color = properties.brand_body_color
style.body_background = properties.brand_body_color
style.body_text_color = add_contrast(properties.brand_body_color, 75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.9)
style.separator = add_contrast(properties.brand_body_color, 8)
style.body_background = set_alpha(properties.brand_body_color, body_alpha)
style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
style.separator = add_contrast(properties.brand_body_color, 15)
style.shadow_color = darken(properties.brand_body_color, 0.8)
}
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_background_color: "#141414",
brand_body_color: "#1e1e1e",
brand_card_color: "#282828"
brand_card_color: "#282828",
}, {
name: "Nord (dark)",
brand_input_color: "#4f596d",
@@ -37,7 +37,7 @@ const themes = [
brand_danger_color: "#bd5f69",
brand_background_color: "#2f3541",
brand_body_color: "#3b4252",
brand_card_color: "#434c5f"
brand_card_color: "#434c5f",
}, {
name: "Nord (light)",
brand_input_color: "#cad2e1",
@@ -45,7 +45,23 @@ const themes = [
brand_danger_color: "#bd5f69",
brand_background_color: "#d7dde8",
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)",
brand_input_color: "#084453",
@@ -53,7 +69,7 @@ const themes = [
brand_danger_color: "#db302d",
brand_background_color: "#002c38",
brand_body_color: "#063540",
brand_card_color: "#073c49"
brand_card_color: "#073c49",
}, {
name: "Solarized (light)",
brand_input_color: "#e7dfc5",
@@ -61,7 +77,7 @@ const themes = [
brand_danger_color: "#db302d",
brand_background_color: "#ede7d3",
brand_body_color: "#fdf5e2",
brand_card_color: "#fcf2d8"
brand_card_color: "#fcf2d8",
}, {
name: "Mocha",
brand_input_color: "#313244",
@@ -69,7 +85,7 @@ const themes = [
brand_danger_color: "#f38ba8",
brand_background_color: "#1e1e2e",
brand_body_color: "#181825",
brand_card_color: "#313244"
brand_card_color: "#313244",
}
]
</script>

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

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

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

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

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

@@ -186,7 +186,7 @@ onMount(() => {
})
</script>
<section class="highlight_border">
<section>
<div style="text-align: center">
<Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!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>
.separator {
border-top: 1px solid var(--separator);
margin: 0 8px;
}
.cards {

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

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

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

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