Gradients

res/include/img/background_patterns/create_dark.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-for i in {0..17}; do convert checker${i}.png -brightness-contrast 80x0 checker${i}_light.png; done
-convert checker_wednesday.png -brightness-contrast 80x0 checker_wednesday_light.png
-convert checker_wednesday.png -brightness-contrast 80x0 checker_wednesday_light.png
-convert checker_dwarf.png -brightness-contrast 80x0 checker_dwarf_light.png
-convert checker_developers.png -brightness-contrast 80x0 checker_developers_light.png
-convert checker_halloween.png -brightness-contrast 80x0 checker_halloween_light.png
-convert checker_christmas.png -brightness-contrast 80x0 checker_christmas_light.png
-convert checker_ukraine.png -brightness-contrast 80x0 checker_ukraine_light.png
-
-optipng *.png

res/include/img/background_patterns/create_transparent.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+transparent () {
+	convert $1.png -alpha set -channel a -evaluate set $2 $1_transparent.png
+}
+
+for i in {0..17}; do transparent "checker${i}" 6%; done
+transparent "checker_wednesday" 10%
+transparent "checker_dwarf" 6%
+transparent "checker_developers" 6%
+transparent "checker_halloween" 6%
+transparent "checker_christmas" 6%
+transparent "checker_ukraine" 10%
+
+optipng *.png

res/include/style/layout.css

@@ -56,14 +56,14 @@ body {
 	font-size: 17px;
 	line-height: 1.6em;
 	color: var(--text_color);
-	background-color: var(--layer_1_color);
+	background: var(--background);
+	min-height: 100vh;
 	padding: 0;
 }
 header, footer, .checkers {
 	background-image: url("{{.BackgroundPattern}}");
-	background-color: var(--layer_1_color);
+	background-color: var(--background_pattern_color);
 	background-repeat: repeat;
-	background-blend-mode: luminosity;
 }
 header, footer {
 	box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
@@ -107,6 +107,7 @@ footer > .footer_content {
 .page_navigation {
 	position: fixed;
 	backface-visibility: hidden;
+	background: var(--navigation_background);
 	width: 17em;
 	height: 100%;
 	left: 0;
@@ -118,27 +119,28 @@ footer > .footer_content {
 	transition: left 0.5s;
 }
 .page_body {
-	position: absolute;
+	position: relative;
 	right: 0;
 	height: auto;
-	left: 17em;
+	left: 0;
+	margin-left: 17em;
 	min-width: 300px;
-	display: inline-block;
+	display: block;
 	text-align: center; /* Center the header and body */
 	overflow-y: auto;
 	overflow-x: hidden;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 	border-top-left-radius: 12px;
 	border-bottom-left-radius: 12px;
 	padding: 8px;
-	transition: left 0.5s;
+	transition: margin-left 0.5s;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1000px) {
 	.page_navigation {
 		left: -18em;
 	}
 	.page_body {
-		left: 0;
+		margin-left: 0;
 		width: 100%;
 		padding: 4px;
 	}
@@ -444,27 +446,18 @@ input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active,
 select:active {
-	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 4px 4px 8px var(--shadow_color);
 	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
 	padding: 9px 1px 1px 9px;
 }
 .button_highlight {
-	background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important;
+	background: var(--highlight_background) !important;
-	color: var(--highlight_text_color) !important;
-}
-.button_highlight:active {
-	background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;
 	color: var(--highlight_text_color) !important;
 }
 .button_red {
 	background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
 	color: var(--highlight_text_color) !important;
 }
-.button_red:active {
-	background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important;
-	color: var(--highlight_text_color) !important;
-}
 
 button:disabled, button.disabled,
 .button:disabled, .button.disabled,

res/template/fragments/page_wrap.html

@@ -34,16 +34,16 @@ function toggleMenu() {
 	if (nav.offsetLeft === 0) {
 		// Menu is visible, hide it
 		nav.style.left = -nav.offsetWidth + "px";
-		body.style.left = "0";
+		body.style.marginLeft = "0";
 	} else {
 		// Menu is hidden, show it
 		nav.style.left = "0";
-		body.style.left = nav.offsetWidth + "px";
+		body.style.marginLeft = nav.offsetWidth + "px";
 	}
 }
 function resetMenu() {
 	document.getElementById("page_navigation").style.left = "";
-	document.getElementById("page_body").style.left = "";
+	document.getElementById("page_body").style.marginLeft = "";
 }
 </script>
 {{end}}

res/template/fragments/user_style.html

@@ -13,10 +13,8 @@
 		inputTextColor: "{{.Style.InputText.RGB}}",
 		highlightColor: "{{.Style.Highlight.RGB}}",
 		dangerColor: "{{.Style.Danger.RGB}}",
-		layer1Color: "{{.Style.Layer1.RGB}}",
 		layer2Color: "{{.Style.Layer2.RGB}}",
 		layer3Color: "{{.Style.Layer3.RGB}}",
-		layer4Color: "{{.Style.Layer4.RGB}}",
 		chart1Color: "{{.Style.Chart1.RGB}}",
 		chart2Color: "{{.Style.Chart2.RGB}}",
 		chart3Color: "{{.Style.Chart3.RGB}}",

res/template/home.html

@@ -8,7 +8,7 @@
 		/* Override the default background with something spectacular */
 		header, footer, .checkers {
 			background-image: url("/res/img/horsehead.webp");
-			background-color: var(--layer_1_color);
+			background-color: var(--parallax_slider_color);
 			background-repeat: no-repeat;
 			background-blend-mode: luminosity;
 			background-attachment: fixed;

svelte/src/file_viewer/FileViewer.svelte

@@ -642,7 +642,7 @@ const keyboard_event = evt => {
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 }
 
 /* Headerbar (row 1) */
@@ -731,7 +731,6 @@ const keyboard_event = evt => {
 	padding: 0;
 	text-align: left;
 	transition: left 0.5s, right 0.5s;
-	background-color: var(--layer_2_color);
 	z-index: 1;
 }
 .toolbar.toolbar_visible { left: 0; }

svelte/src/file_viewer/Sharebar.svelte

@@ -75,9 +75,13 @@ const share_tumblr = () => {
 	border-radius: 16px;
 	text-align: center;
 	overflow: hidden;
-	transition: left 0.5s;
+	opacity: 0;
+	transition: left 0.4s, opacity 0.4s;
+}
+.visible {
+	left: 8em;
+	opacity: 1;
 }
-.visible { left: 8em; }
 .button_full_width {
 	width: calc(100% - 6px);
 }

svelte/src/file_viewer/viewers/Text.svelte

@@ -103,7 +103,7 @@ const code = async file => {
 
 <style>
 .container {
-	background: var(--layer_3_color);
+	background: var(--body_background);
 	position: relative;
 	text-align: left;
 	height: 100%;

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -89,7 +89,8 @@ const node_icon = node => {
 	text-decoration: none;
 }
 .selected {
-	background-color: var(--highlight_color_dark);
+	background: var(--highlight_background);
+	color: var(--highlight_text_color);
 }
 .icon_container {
 	width: 100%;

svelte/src/home_page/UploadProgressBar.svelte

@@ -293,7 +293,7 @@ export const start = () => {
 	height: 2px;
 }
 .progress_bar {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 0.25s, opacity 3s;

svelte/src/home_page/UploadWidget.svelte

@@ -577,7 +577,7 @@ const keydown = (e) => {
 	line-height: 1em;
 	text-align: center;
 	display: inline-block;
-	background: var(--highlight_color);
+	background: var(--highlight_background);
 	color: var(--highlight_text_color);
 	border-radius: 30px;
 	padding: 0.15em;
@@ -609,7 +609,7 @@ const keydown = (e) => {
 	height: 3px;
 }
 .progress_bar_inner {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 0.5s;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -300,12 +300,12 @@ const node_click = (index) => {
 <svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
 
 <div id="directory_element">
+	<div bind:this={directorySorters} id="sorters" class="directory_sorters">
+		{#each tableColumns as col}
+			<div on:click={sortBy(col.field)} style="min-width: {col.width}">{col.name}</div>
+		{/each}
+	</div>
 	<div bind:this={directoryArea} on:scroll={onScroll} id="directory_area" class="directory_area">
-		<div bind:this={directorySorters} id="sorters" class="directory_sorters">
-			{#each tableColumns as col}
-				<div on:click={sortBy(col.field)} style="min-width: {col.width}">{col.name}</div>
-			{/each}
-		</div>
 		<div bind:this={nodeContainer} id="node_container" class="directory_node_container">
 			{#each allFiles as file, index}
 				{#if file.visible && !file.filtered}
@@ -345,17 +345,17 @@ const node_click = (index) => {
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
+	text-align: left;
 }
 
 #sorters {
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
-	position: sticky;
 	overflow: hidden;
-	top: 0;
+	background: var(--body_background);
-	z-index: 1;
-	background-color: var(--layer_2_color);
 	min-width: 850px;
+	border-top-left-radius: 16px;
 }
 #sorters > div {
 	display: inline-block;
@@ -381,9 +381,8 @@ const node_click = (index) => {
 	margin: 0;
 	padding: 0;
 	overflow-x: auto;
-	text-align: left;
+	background: var(--body_background);
-	background-color: var(--layer_2_color);
+	border-bottom-left-radius: 16px;
-	border-radius: 16px;
 }
 #node_container {
 	display: block;
@@ -392,8 +391,6 @@ const node_click = (index) => {
 
 #footer {
 	flex-shrink: 0;
-	text-align: left;
-	background-color: var(--layer_1_color);
 	color: var(--layer_1_text_color);
 	padding: 4px;
 }
@@ -419,7 +416,7 @@ const node_click = (index) => {
 	text-decoration: none;
 }
 .node_selected {
-	background-color: var(--highlight_color_dark);
+	background: var(--highlight_background);
 	color: var(--highlight_text_color);
 }
 .node > div {

svelte/src/user_file_manager/FileManager.svelte

@@ -328,8 +328,9 @@ onMount(() => {
 
 <style>
 :global(#page_body) {
-	height: 100%;
+	height: 100vh;
 	padding: 0;
+	background: none;
 }
 
 /* Override the menu button so it doesn't overlap the file manager when the menu
@@ -345,7 +346,6 @@ is collapsed */
 	height:           100%;
 	display:          flex;
 	flex-direction:   column;
-	background-color: var(--layer_1_color);
 }
 .nav_bar {
 	flex-shrink: 0;

webcontroller/style.go

@@ -55,44 +55,57 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 
 	// Set default colors
 	var noColor = hsl{0, 0, 0}
-	var setDefault = func(color *hsl, def hsl) {
+	var setDefaultHSL = func(color *hsl, def hsl) {
 		if *color == noColor {
 			*color = def
 		}
 	}
-	setDefault(&s.Link, s.Highlight.Add(0, 0, -.05))
+	var setDefaultColor = func(color *Color, def Color) {
-	setDefault(&s.InputDisabled, s.Input.Add(0, -.2, -.2))
+		if *color == nil {
-	setDefault(&s.ScrollbarForeground, s.Input)
+			*color = def
-	setDefault(&s.ScrollbarHover, s.ScrollbarForeground.Add(0, 0, .1))
+		}
-	setDefault(&s.Layer1Text, s.Text)
+	}
-	setDefault(&s.Chart1, s.Highlight)
+	setDefaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
-	setDefault(&s.Chart2, s.Chart1.Add(120, 0, 0))
+	setDefaultHSL(&s.InputDisabled, s.Input.Add(0, -.2, -.2))
-	setDefault(&s.Chart3, s.Chart2.Add(120, 0, 0))
+	setDefaultHSL(&s.ScrollbarForeground, s.Input)
+	setDefaultHSL(&s.ScrollbarHover, s.ScrollbarForeground.Add(0, 0, .1))
+	setDefaultHSL(&s.Layer1Text, s.Text)
+	setDefaultHSL(&s.Chart1, s.Highlight)
+	setDefaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
+	setDefaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
+	setDefaultColor(&s.HighlightBackground, Gradient{180, []Color{s.Highlight, s.Highlight.Add(0, 0, -0.03)}})
+	setDefaultColor(&s.Background, s.Layer1)
+	setDefaultColor(&s.BackgroundPattern, s.Layer1)
+	setDefaultColor(&s.ParallaxSlider, s.Layer1)
+	setDefaultColor(&s.Navigation, NoColor)
+	setDefaultColor(&s.Body, s.Layer2)
 
 	return s
 }
 
-type Colour interface {
-	CSS() string
-}
-
 type pixeldrainStyleSheet struct {
 	Text                hsl
 	Link                hsl // Based on Highlight if undefined
 	Input               hsl // Buttons, text fields
 	InputText           hsl
 	InputDisabled       hsl
+	HighlightBackground Color
 	Highlight           hsl // Links, highlighted buttons, list navigation
 	HighlightText       hsl // Text on buttons
 	Danger              hsl
 	ScrollbarForeground hsl // Based on Highlight if undefined
 	ScrollbarHover      hsl // Based on ScrollbarForeground if undefined
 
-	Layer1     hsl // Deepest and darkest layer
+	Background        Color
-	Layer1Text hsl // Based on Text if undefined
+	BackgroundPattern Color
-	Layer2     hsl
+	ParallaxSlider    Color
-	Layer3     hsl
+	Navigation        Color
-	Layer4     hsl // Highest and brightest layer
+	Body              Color
+	Layer1            hsl // Deepest and darkest layer
+	Layer1Text        hsl // Based on Text if undefined
+	Layer2            hsl
+	Layer3            hsl
+	Layer4            hsl // Highest and brightest layer
 
 	// Colors to use in graphs
 	Chart1 hsl
@@ -112,6 +125,7 @@ func (s pixeldrainStyleSheet) String() string {
 	--input_color_dark:           %s;
 	--input_text_color:           %s;
 	--input_disabled_color:       %s;
+	--highlight_background:       %s;
 	--highlight_color:            %s;
 	--highlight_color_dark:       %s;
 	--highlight_text_color:       %s;
@@ -121,15 +135,20 @@ func (s pixeldrainStyleSheet) String() string {
 	--scrollbar_hover_color:      %s;
 	--scrollbar_background_color: %s;
 
-	--layer_1_color:        %s;
+	--background:               %s;
-	--layer_1_color_border: %s;
+	--background_pattern_color: %s;
-	--layer_1_text_color:   %s;
+	--parallax_slider_color:    %s;
-	--layer_2_color:        %s;
+	--navigation_background:    %s;
-	--layer_2_color_border: %s;
+	--body_background:          %s;
-	--layer_3_color:        %s;
+	--layer_1_color:            %s;
-	--layer_3_color_border: %s;
+	--layer_1_color_border:     %s;
-	--layer_4_color:        %s;
+	--layer_1_text_color:       %s;
-	--layer_4_color_border: %s;
+	--layer_2_color:            %s;
+	--layer_2_color_border:     %s;
+	--layer_3_color:            %s;
+	--layer_3_color_border:     %s;
+	--layer_4_color:            %s;
+	--layer_4_color_border:     %s;
 
 	--chart_1_color: %s;
 	--chart_2_color: %s;
@@ -143,6 +162,7 @@ func (s pixeldrainStyleSheet) String() string {
 		s.Input.Add(0, 0, -.02).CSS(),
 		s.InputText.CSS(),
 		s.InputDisabled.CSS(),
+		s.HighlightBackground.CSS(),
 		s.Highlight.CSS(),
 		s.Highlight.Add(0, 0, -.02).CSS(),
 		s.HighlightText.CSS(),
@@ -151,6 +171,11 @@ func (s pixeldrainStyleSheet) String() string {
 		s.ScrollbarForeground.CSS(),
 		s.ScrollbarHover.CSS(),
 		s.Layer2.CSS(), // Scrollbar background
+		s.Background.CSS(),
+		s.BackgroundPattern.CSS(),
+		s.ParallaxSlider.CSS(),
+		s.Navigation.CSS(),
+		s.Body.CSS(),
 		s.Layer1.CSS(),
 		s.Layer1.Add(0, 0, .05).CSS(),
 		s.Layer1Text.CSS(),
@@ -167,7 +192,7 @@ func (s pixeldrainStyleSheet) String() string {
 	)
 }
 
-func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
+func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.URL {
 	var (
 		now   = time.Now()
 		month = now.Month()
@@ -190,111 +215,35 @@ func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
 		file = fmt.Sprintf("checker%d", now.UnixNano()%18)
 	}
 
-	if s.Light {
-		file += "_light"
-	}
-
 	var buf = bytes.Buffer{}
-	if err := tpl.ExecuteTemplate(&buf, file+".png", nil); err != nil {
+	if err := tpl.ExecuteTemplate(&buf, file+"_transparent.png", nil); err != nil {
 		panic(err)
 	}
 	return template.URL(buf.String())
 }
 
-type hsl struct {
-	Hue        int
-	Saturation float64
-	Lightness  float64
-}
-
-func (orig hsl) RGB() string {
-	var r, g, b, q, p float64
-	var h, s, l = float64(orig.Hue) / 360, orig.Saturation, orig.Lightness
-
-	if s == 0 {
-		r, g, b = l, l, l
-	} else {
-		var hue2rgb = func(p, q, t float64) float64 {
-			if t < 0 {
-				t++
-			}
-			if t > 1 {
-				t--
-			}
-
-			if t < 1.0/6.0 {
-				return p + (q-p)*6*t
-			} else if t < 1.0/2.0 {
-				return q
-			} else if t < 2.0/3.0 {
-				return p + (q-p)*(2.0/3.0-t)*6
-			}
-			return p
-		}
-
-		if l < 0.5 {
-			q = l * (1 + s)
-		} else {
-			q = l + s - l*s
-		}
-
-		p = 2*l - q
-		r = hue2rgb(p, q, h+1.0/3.0)
-		g = hue2rgb(p, q, h)
-		b = hue2rgb(p, q, h-1.0/3.0)
-	}
-
-	return fmt.Sprintf("%02x%02x%02x", int(r*255), int(g*255), int(b*255))
-}
-func (orig hsl) CSS() string {
-	return "#" + orig.RGB()
-}
-
-// Add returns a NEW HSL struct, it doesn't modify the current one
-func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
-	var new = hsl{
-		h.Hue + hue,
-		h.Saturation + saturation,
-		h.Lightness + lightness,
-	}
-	// Hue bounds correction
-	if new.Hue < 0 {
-		new.Hue += 360
-	} else if new.Hue > 360 {
-		new.Hue -= 360
-	}
-	// Saturation bounds check
-	if new.Saturation < 0 {
-		new.Saturation = 0
-	} else if new.Saturation > 1 {
-		new.Saturation = 1
-	}
-	// Lightness bounds check
-	if new.Lightness < 0 {
-		new.Lightness = 0
-	} else if new.Lightness > 1 {
-		new.Lightness = 1
-	}
-
-	return new
-}
-
 // Following are all the available styles
 
 var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	Text:                hsl{0, 0, .8},
 	Input:               hsl{266, .85, .38},
 	InputText:           hsl{0, 0, 1},
+	HighlightBackground: NewGradient(150, hsl{150, .84, .39}, hsl{85, .85, .35}),
 	Highlight:           hsl{117, .63, .46},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{357, .63, .46},
 	ScrollbarForeground: hsl{266, .85, .40},
 	ScrollbarHover:      hsl{266, .85, .50},
 
-	Layer1: hsl{275, .8, .07},
+	Background:        NewGradient(140, hsl{225, .9, .14}, hsl{274, .85, .16}, hsl{274, .85, .16}, hsl{310, .8, .12}),
-	Layer2: hsl{275, .75, .12},
+	BackgroundPattern: NoColor,
-	Layer3: hsl{275, .7, .18},
+	ParallaxSlider:    hsl{275, .8, .1},
-	Layer4: hsl{275, .65, .24},
+	Navigation:        RGBA{0, 0, 0, 0.1},
+	Body:              NoColor,
+	Layer1:            hsl{275, .8, .07},
+	Layer2:            hsl{275, .75, .12},
+	Layer3:            hsl{275, .7, .18},
+	Layer4:            hsl{275, .65, .24},
 
 	Shadow: hsl{0, 0, 0},
 }
@@ -472,11 +421,13 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForeground: hsl{193, .43, .67},
 	ScrollbarHover:      hsl{193, .43, .76},
 
-	Layer1:     hsl{220, .17, .32}, // hsl(220, 17%, 32%)
+	ParallaxSlider:    hsl{220, .17, .20}, // Layer 1 but darker
-	Layer1Text: hsl{219, .28, .88},
+	Layer1:            hsl{220, .17, .32}, // hsl(220, 17%, 32%)
-	Layer2:     hsl{219, .28, .88}, // hsl(219, 28%, 88%)
+	Layer1Text:        hsl{219, .28, .88},
-	Layer3:     hsl{218, .27, .92}, // hsl(218, 27%, 92%)
+	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
-	Layer4:     hsl{218, .27, .94}, // hsl(218, 27%, 94%)
+	Layer2:            hsl{219, .28, .88}, // hsl(219, 28%, 88%)
+	Layer3:            hsl{218, .27, .92}, // hsl(218, 27%, 92%)
+	Layer4:            hsl{218, .27, .94}, // hsl(218, 27%, 94%)
 
 	Shadow: hsl{0, .0, .50},
 	Light:  true,

webcontroller/style_colors.go

@@ -0,0 +1,137 @@
+package webcontroller
+
+import (
+	"fmt"
+)
+
+type Color interface {
+	CSS() string
+}
+
+// Raw CSS
+type CSS string
+
+func (c CSS) CSS() string { return string(c) }
+
+const NoColor = CSS("none")
+
+// HSL color
+type hsl struct {
+	Hue        int
+	Saturation float64
+	Lightness  float64
+}
+
+func (orig hsl) RGB() string {
+	var r, g, b, q, p float64
+	var h, s, l = float64(orig.Hue) / 360, orig.Saturation, orig.Lightness
+
+	if s == 0 {
+		r, g, b = l, l, l
+	} else {
+		var hue2rgb = func(p, q, t float64) float64 {
+			if t < 0 {
+				t++
+			}
+			if t > 1 {
+				t--
+			}
+
+			if t < 1.0/6.0 {
+				return p + (q-p)*6*t
+			} else if t < 1.0/2.0 {
+				return q
+			} else if t < 2.0/3.0 {
+				return p + (q-p)*(2.0/3.0-t)*6
+			}
+			return p
+		}
+
+		if l < 0.5 {
+			q = l * (1 + s)
+		} else {
+			q = l + s - l*s
+		}
+
+		p = 2*l - q
+		r = hue2rgb(p, q, h+1.0/3.0)
+		g = hue2rgb(p, q, h)
+		b = hue2rgb(p, q, h-1.0/3.0)
+	}
+
+	return fmt.Sprintf("%02x%02x%02x", int(r*255), int(g*255), int(b*255))
+}
+func (orig hsl) CSS() string {
+	return "#" + orig.RGB()
+}
+
+// Add returns a NEW HSL struct, it doesn't modify the current one
+func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
+	var new = hsl{
+		h.Hue + hue,
+		h.Saturation + saturation,
+		h.Lightness + lightness,
+	}
+	// Hue bounds correction
+	if new.Hue < 0 {
+		new.Hue += 360
+	} else if new.Hue > 360 {
+		new.Hue -= 360
+	}
+	// Saturation bounds check
+	if new.Saturation < 0 {
+		new.Saturation = 0
+	} else if new.Saturation > 1 {
+		new.Saturation = 1
+	}
+	// Lightness bounds check
+	if new.Lightness < 0 {
+		new.Lightness = 0
+	} else if new.Lightness > 1 {
+		new.Lightness = 1
+	}
+
+	return new
+}
+
+type RGB struct {
+	R uint8
+	G uint8
+	B uint8
+}
+
+func (rgb RGB) CSS() string {
+	return fmt.Sprintf("#%02x%02x%02x", rgb.R, rgb.G, rgb.B)
+}
+
+type RGBA struct {
+	R uint8
+	G uint8
+	B uint8
+	A float64
+}
+
+func (rgba RGBA) CSS() string {
+	return fmt.Sprintf("rgba(%d, %d, %d, %f)", rgba.R, rgba.G, rgba.B, rgba.A)
+}
+
+type Gradient struct {
+	Angle  int
+	Colors []Color
+}
+
+func NewGradient(angle int, colors ...Color) Gradient {
+	return Gradient{angle, colors}
+}
+
+func (g Gradient) CSS() string {
+	var colors string
+	for i, color := range g.Colors {
+		if i != 0 {
+			colors += ", "
+		}
+		colors += color.CSS()
+	}
+
+	return fmt.Sprintf("linear-gradient(%ddeg, %s)", g.Angle, colors)
+}

webcontroller/templates.go

@@ -49,7 +49,7 @@ type TemplateData struct {
 func (td *TemplateData) setStyle(style pixeldrainStyleSheet) {
 	td.Style = style
 	td.UserStyle = template.CSS(style.String())
-	td.BackgroundPattern = style.Background(td.tpm.tpl)
+	td.BackgroundPattern = style.BackgroundTiles(td.tpm.tpl)
 }
 
 func (wc *WebController) newTemplateData(w http.ResponseWriter, r *http.Request) (t *TemplateData) {
@@ -191,6 +191,8 @@ func (tm *TemplateManager) ParseTemplates(silent bool) {
 			file = []byte("data:image/png;base64," + base64.StdEncoding.EncodeToString(file))
 		} else if strings.HasSuffix(path, ".gif") {
 			file = []byte("data:image/gif;base64," + base64.StdEncoding.EncodeToString(file))
+		} else if strings.HasSuffix(path, ".webp") {
+			file = []byte("data:image/webp;base64," + base64.StdEncoding.EncodeToString(file))
 		}
 
 		// Wrap the resources in a template definition