Convert multiple pages into SPA

webcontroller/style.go

@@ -3,10 +3,8 @@ package webcontroller
 import (
 	"fmt"
 	"html/template"
-	"math/rand"
 	"net/http"
 	"strconv"
-	"time"
 
 	"github.com/julienschmidt/httprouter"
 )
@@ -50,6 +48,10 @@ func userStyle(style string, hue int) template.CSS {
 	switch style {
 	default:
 		fallthrough
+	case "adwaita":
+		def = adwaitaDarkStyle
+		light = adwaitaLightStyle
+		hasLight = true
 	case "nord":
 		def = nordDarkStyle
 		light = nordLightStyle
@@ -83,16 +85,14 @@ func userStyle(style string, hue int) template.CSS {
 		def = skeuosPixeldrainStyle
 	case "sweet":
 		def = sweetPixeldrainStyle
-	case "adwaita":
-		def = adwaitaDarkStyle
-		light = adwaitaLightStyle
-		hasLight = true
 	case "adwaita_dark":
 		def = adwaitaDarkStyle
 	case "adwaita_light":
 		def = adwaitaLightStyle
 	case "pixeldrain98":
 		def = pixeldrain98Style
+	case "pixeldrain98_dark":
+		def = pixeldrain98StyleDark
 	}
 
 	if hue >= 0 && hue <= 360 {
@@ -223,7 +223,6 @@ func (s styleSheet) String() string {
 	--background_color:         %s;
 	--background:               %s;
 	--background_text_color:    %s;
-	--background_pattern:       url("%s");
 	--background_pattern_color: %s;
 	--navigation_background:    %s;
 	--body_color:               %s;
@@ -257,14 +256,13 @@ func (s styleSheet) String() string {
 		s.BackgroundColor.CSS(),
 		s.Background.CSS(),
 		s.BackgroundText.CSS(),
-		BackgroundTiles(),
 		s.BackgroundPattern.CSS(),
 		s.Navigation.CSS(),
 		s.BodyColor.CSS(),
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.75).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.7).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
@@ -286,31 +284,6 @@ func (dark styleSheet) withLight(light styleSheet) string {
 	)
 }
 
-func BackgroundTiles() template.URL {
-	var (
-		now   = time.Now()
-		month = now.Month()
-		day   = now.Day()
-		file  string
-	)
-
-	if now.Weekday() == time.Wednesday && rand.Intn(20) == 0 {
-		file = "checker_wednesday"
-	} else if month == time.August && day == 8 {
-		file = "checker_dwarf"
-	} else if month == time.August && day == 24 {
-		file = "checker_developers"
-	} else if month == time.October && day == 31 {
-		file = "checker_halloween"
-	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
-		file = "checker_christmas"
-	} else {
-		file = fmt.Sprintf("checker%d", now.UnixNano()%20)
-	}
-
-	return template.URL("/res/img/background_patterns/" + file + "_transparent.png")
-}
-
 // Following are all the available styles
 
 var purpleDrainStyle = styleSheet{
@@ -638,3 +611,106 @@ var pixeldrain98Style = styleSheet{
 
 	StyleOverrides: override98,
 }
+
+var pixeldrain98StyleDark = styleSheet{
+	Input:             HSL{0, 0, .25},
+	InputHover:        HSL{0, 0, .30},
+	InputText:         RGB{255, 255, 255},
+	InputDisabledText: RGB{128, 128, 128},
+	Highlight:         HSL{240, 1, .7},
+	HighlightText:     HSL{0, 1, 1},
+	Danger:            HSL{1, .71, .7},
+	Link:              HSL{240, 1, .8},
+
+	BackgroundColor: HSL{180, 1, .08},
+	BackgroundText:  HSL{0, 1, 1},
+	BodyColor:       HSL{0, 0, .25},
+	BodyText:        HSL{0, 1, 1},
+	Separator:       HSL{0, 0, .33},
+	CardColor:       HSL{0, 0, .25},
+
+	StyleOverrides: `
+:root {
+	--border_98: inset -1px -1px #222,
+		inset 1px 1px #666,
+		inset -2px -2px #333,
+		inset 2px 2px #555;
+	--inset_98: inset -1px -1px #666,
+		inset 1px 1px #111,
+		inset -2px -2px #555,
+		inset 2px 2px #333;
+}
+
+button, .button,
+dialog,
+fieldset,
+.highlight_border,
+.page_content,
+footer, .footer_content,
+.card,
+.window,
+.block,
+.sharebar,
+.directory_sorters, .directory_area,
+.container > .directory,
+.file_preview > .directory,
+.directory > .node,
+.file, .file_button,
+.upload_task,
+.add_button,
+.expandable,
+.upload_widget,
+.highlight_shaded {
+	border: none !important;
+	border-radius: 0 !important;
+	box-shadow: var(--border_98) !important;
+}
+legend {
+	background-color: var(--body_color);
+	border: none !important;
+}
+.window, .page_content, .file_button, .expandable, pre {
+	padding: 3px !important;
+}
+.window > .header,
+.headerbar,
+.upload_widget > .header {
+	background: linear-gradient(90deg, #003d66, #005c99) !important;
+	color: #fff !important;
+}
+.tab_bar > button, .tab_bar > .button {
+	border-top-left-radius: 3px !important;
+	border-top-right-radius: 3px !important;
+	box-shadow: var(--border_98) !important;
+}
+.directory > tr {
+	border: none !important;
+}
+.button_toggle_navigation {
+	padding: 8px !important;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="text"],
+input[type="date"],
+select, textarea, pre {
+	border-radius: 0 !important;
+	border: none !important;
+	box-shadow: var(--inset_98) !important;
+}
+code {
+	border-radius: 0 !important;
+}
+
+.file_preview,
+hr,
+.toolbar > .separator,
+.toolbar > .grid > .separator {
+	border-radius: 0 !important;
+	border: none !important;
+	box-shadow: var(--inset_98) !important;
+}
+`,
+}