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;
-	color: var(--highlight_text_color) !important;
-}
-.button_highlight:active {
-	background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;
+	background: var(--highlight_background) !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;