From c877d0bf2d6751800d7aafa1d8e2ce215e559fad Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Thu, 29 Aug 2024 13:59:28 +0200
Subject: [PATCH] Add windows 98 style

---
 res/template/appearance.html       |   2 +
 svelte/src/admin_panel/Home.svelte |   4 +-
 webcontroller/style.go             | 103 ++++++++++++++++++++++++++++-
 3 files changed, 106 insertions(+), 3 deletions(-)

diff --git a/res/template/appearance.html b/res/template/appearance.html
index b66b157..d9a4865 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -69,6 +69,8 @@
 				<input type="radio" id="style_adwaita_dark" name="style"><label for="style_adwaita_dark">Adwaita dark</label>
 				<br/>
 				<input type="radio" id="style_adwaita_light" name="style"><label for="style_adwaita_light">Adwaita light</label>
+				<br/><br/>
+				<input type="radio" id="style_pixeldrain98" name="style"><label for="style_pixeldrain98">Pixeldrain 98</label>
 
 				<h2>Hue</h2>
 				<p>
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index 266713a..4a0f687 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -188,8 +188,8 @@ onDestroy(() => {
 	<button on:click={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
 	<button on:click={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button>
 </div>
-<Chart bind:this={graphBandwidth} data_type="bytes" tooltips={false} />
-<Chart bind:this={graphViews} data_type="number" tooltips={false} />
+<Chart bind:this={graphBandwidth} data_type="bytes" />
+<Chart bind:this={graphViews} data_type="number" />
 <div class="highlight_border">
 	Total usage from {start_time} to {end_time}<br/>
 	{formatDataVolume(total_bandwidth, 3)} bandwidth,
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 7f8d75e..5869659 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -91,6 +91,8 @@ func userStyle(style string, hue int) template.CSS {
 		def = adwaitaDarkStyle
 	case "adwaita_light":
 		def = adwaitaLightStyle
+	case "pixeldrain98":
+		def = pixeldrain98Style
 	}
 
 	if hue >= 0 && hue <= 360 {
@@ -134,6 +136,8 @@ type styleSheet struct {
 	Chart1 HSL
 	Chart2 HSL
 	Chart3 HSL
+
+	StyleOverrides string
 }
 
 func (s styleSheet) withDefaults() styleSheet {
@@ -234,7 +238,10 @@ func (s styleSheet) String() string {
 	--chart_3_color: %s;
 
 	--shadow_color: %s;
-}`,
+}
+
+%s
+`,
 		s.Link.CSS(),
 		s.Input.CSS(),
 		s.InputHover.CSS(),
@@ -263,6 +270,7 @@ func (s styleSheet) String() string {
 		s.Chart2.CSS(),
 		s.Chart3.CSS(),
 		s.BodyColor.Darken(0.8).CSS(),
+		s.StyleOverrides,
 	)
 }
 
@@ -531,3 +539,96 @@ var solarizedLightStyle = styleSheet{
 	Separator:       HSL{46, .42, .88},
 	CardColor:       HSL{44, .87, .92},
 }
+
+const override98 = `
+button, .button,
+dialog,
+.highlight_border,
+.page_content,
+footer, .footer_content,
+.card,
+.window,
+.block,
+.sharebar,
+.directory_sorters, .directory_area,
+.container > .directory,
+.directory > .node,
+.file, .file_button,
+.upload_task,
+.add_button,
+.expandable {
+	border: none !important;
+	border-radius: 0 !important;
+	box-shadow: inset -1px -1px #0a0a0a,
+		inset 1px 1px #dfdfdf,
+		inset -2px -2px grey,
+		inset 2px 2px #fff !important;
+}
+.flat {
+	margin: 2px !important;
+}
+.window, .page_content, .file_button, .expandable, pre {
+	padding: 3px !important;
+}
+.window > .header, .headerbar {
+	background: linear-gradient(90deg,navy,#1084d0) !important;
+	color: #fff !important;
+}
+.tab_bar > button, .tab_bar > .button {
+	border-top-left-radius: 3px !important;
+	border-top-right-radius: 3px !important;
+	box-shadow: inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 grey,inset 2px 2px #fff !important;
+}
+.headerbar > .wrapper > .button {
+	color: #fff !important;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="text"],
+select, textarea, pre {
+	border-radius: 0 !important;
+	border: none !important;
+	background-color: #fff !important;
+	box-shadow: inset -1px -1px #fff,
+		inset 1px 1px grey,
+		inset -2px -2px #dfdfdf,
+		inset 2px 2px #0a0a0a !important;
+}
+code {
+	border-radius: 0 !important;
+	background-color: #fff !important;
+}
+
+.file_preview,
+hr,
+.toolbar > .separator,
+.highlight_shaded {
+	border-radius: 0 !important;
+	border: none !important;
+	box-shadow: inset -1px -1px #fff,
+		inset 1px 1px grey,
+		inset -2px -2px #dfdfdf,
+		inset 2px 2px #0a0a0a !important;
+}
+`
+
+var pixeldrain98Style = styleSheet{
+	Input:             RGB{190, 190, 190},
+	InputHover:        RGB{220, 220, 220},
+	InputText:         RGB{0, 0, 0},
+	InputDisabledText: RGB{128, 128, 128},
+	Highlight:         HSL{240, 1, .5}, // hsl(68, 100%, 30%)
+	HighlightText:     HSL{0, 1, 1},
+	Danger:            HSL{1, .71, .52}, // hsl(1, 71%, 52%)
+
+	BackgroundColor: HSL{180, 1, .25},
+	BackgroundText:  HSL{0, 1, 1},
+	BodyColor:       HSL{0, 0, .75},
+	BodyText:        HSL{0, 0, 0},
+	Separator:       HSL{0, 1, 1},
+	CardColor:       HSL{0, 0, .75},
+
+	StyleOverrides: override98,
+}