The great flattification

res/include/style/layout.css

@@ -55,7 +55,7 @@ body {
 	font-family: system-ui, sans-serif;
 	font-size: 17px;
 	line-height: 1.5em;
-	color: var(--text_color);
+	color: var(--body_text_color);
 	background: var(--background);
 	min-height: 100vh;
 	padding: 0;
@@ -66,7 +66,7 @@ header, footer, .checkers {
 	background-repeat: repeat;
 }
 header, footer {
-	box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
+	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
 	border-radius: 12px;
 	text-align: center;
 	overflow: hidden;
@@ -95,10 +95,9 @@ footer > .footer_content {
 	font-size: 2em;
 	margin: 0;
 	background: #3f3f3f;
-	background: var(--input_color);
+	background: var(--input_background);
 	border-radius: 0;
 	border-bottom-right-radius: 90%;
-	box-shadow: 0 0 6px -2px var(--shadow_color);
 }
 .button_toggle_navigation:active {
 	padding: 15px 15px 10px 15px;
@@ -161,7 +160,7 @@ section {
 .page_navigation a {
 	float: none;
 	display: block;
-	color: var(--layer_1_text_color);
+	color: var(--background_text_color);
 	text-align: center;
 	padding: 4px;
 	margin: 0.3em 15px 0.3em 15px;
@@ -175,8 +174,8 @@ section {
 	text-decoration: none;
 }
 .page_navigation a:hover {
-	background-color: var(--input_color);
+	background: var(--input_background);;
-	color: var(--input_text_color);
+	color: var(--input_text);
 	text-decoration: none;
 }
 
@@ -238,19 +237,19 @@ h1 {
 }
 h2 {
 	font-size: 2em;
-	border-bottom: 1px var(--layer_4_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 h3 {
 	font-size: 1.75em;
-	border-bottom: 1px var(--layer_3_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 h4 {
 	font-size: 1.50em;
-	border-bottom: 1px var(--layer_2_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 h5 {
 	font-size: 1.25em;
-	border-bottom: 1px var(--layer_1_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 h6 {
 	font-size: 1em;
@@ -262,7 +261,7 @@ h6 {
 hr {
 	height: 1px;
 	border: none;
-	background-color: var(--input_color);
+	background-color: var(--separator);
 	margin: 12px;
 }
 
@@ -295,7 +294,7 @@ table:not(.form) {
 	min-width: 100%;
 }
 
-tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
+tr:not(.form)    {border-bottom: 1px var(--separator) solid;}
 tr > td, tr > th {padding: 0.2em 0.5em;}
 @media(max-width: 30em) {
 	/* Forms will be stacked on small screens */
@@ -308,7 +307,7 @@ tr > td, tr > th {padding: 0.2em 0.5em;}
 
 pre {
 	padding: 10px;
-	border-bottom: 1px var(--layer_2_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 	overflow-x: auto;
 }
 
@@ -321,10 +320,9 @@ pre {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 6px;
-	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+	background: var(--input_background);
-	background-color: var(--layer_3_color);
 	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
+	color: var(--body_text_color);
 	word-break: break-all;
 	text-align: left;
 	line-height: 1.2em;
@@ -338,7 +336,7 @@ pre {
 }
 .file_button:hover,
 .file_button_selected {
-	box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
+	box-shadow: 0 0 3px 2px var(--highlight_color);
 	text-decoration: none;
 }
 .file_button > img{
@@ -391,11 +389,11 @@ select {
 	display: inline-block;
 	border-radius: 6px;
 	margin: 3px;
-	background: linear-gradient(var(--input_color), var(--input_color_dark));
+	background: none;
+	background: var(--input_background);
 	padding: 5px 5px 5px 5px;
-	box-shadow: 1px 1px 5px -2px var(--shadow_color);
 	overflow: hidden;
-	color: var(--input_text_color);
+	color: var(--input_text);
 	vertical-align: middle;
 	align-items: center;
 	cursor: pointer;
@@ -423,9 +421,10 @@ input[type="button"]:focus,
 input[type="color"]:focus,
 select:focus {
 	color: #bfbfbf; /* Fallback */
-	color: var(--input_text_color);
+	color: var(--input_text);
 	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
+	box-shadow: inset 0 0 3px 0 var(--highlight_color);
+
 }
 button:active,
 .button:active,
@@ -452,8 +451,7 @@ input[type="submit"]:disabled, input[type="submit"].disabled,
 input[type="button"]:disabled, input[type="button"].disabled,
 input[type="color"]:disabled, input[type="color"].disabled,
 select:disabled , select.disabled {
-	background: var(--input_disabled_color);
+	color: var(--input_disabled_text);
-	color: var(--input_color);
 	box-shadow: none;
 	transition: none;
 	padding: 4px 5px 4px 5px;
@@ -478,13 +476,14 @@ button > svg,
 	white-space: nowrap;
 	text-align: center;
 	background-color: var(--shaded_background);
-	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
+	box-shadow: inset 0 -10px 6px -12px var(--shadow_color);
 }
 .tab_bar > button,
 .tab_bar > .button {
 	margin: 10px 0 0 10px;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
+	min-width: 5em;
 }
 .tab_bar > *:last-child {
 	margin-right: 10px;
@@ -492,9 +491,9 @@ button > svg,
 
 /* Dropdown list of the select tag */
 option{
-	background-color: var(--input_color_dark);
+	background: var(--input_background);
 	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 
 /* TEXT FIELDS */
@@ -509,10 +508,10 @@ input[type="date"]{
 	margin: 3px; /* Same as button, to make them align nicely */
 	border: none;
 	border-radius: 6px;
-	background: linear-gradient(var(--input_color_dark), var(--input_color));
+	background: var(--input_background);
-	box-shadow: inset 1px 1px 4px -2px var(--shadow_color);
+	box-shadow: inset 1px 1px 2px -1px var(--shadow_color);
 	padding: 3px 5px;
-	color: var(--input_text_color);
+	color: var(--input_text);
 	font-size: 1em;
 	outline: 0;
 	transition: box-shadow 0.3s;
@@ -529,7 +528,7 @@ input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="date"]:focus{
-	box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
+	box-shadow: inset 0 0 3px 0 var(--highlight_color);
 }
 textarea:disabled,
 input[type="text"]:disabled,
@@ -537,8 +536,7 @@ input[type="password"]:disabled,
 input[type="email"]:disabled,
 input[type="number"]:disabled,
 input[type="date"]:disabled{
-	background: var(--input_disabled_color);
+	color: var(--input_disabled_text);
-	color: var(--input_color);
 	box-shadow: none;
 	transition: none;
 	cursor: not-allowed;

res/static/ads.txt

@@ -14,9 +14,7 @@ gumgum.com, 11645, RESELLER, ffdef49475d318a9
 openx.com, 538959099, RESELLER, 6a698e2ec38604c6
 openx.com, 539924617, RESELLER, 6a698e2ec38604c6
 pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
 pubmatic.com, 156700, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
 33across.com, 0010b00002doyyNAAQ, DIRECT, bbea06d9c4d2853c
 rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807
 rubiconproject.com, 21642, RESELLER, 0bfd66d529a55807
@@ -1209,6 +1207,152 @@ amxrtb.com, 105199400, DIRECT
 adtarget.com.tr, 682499, DIRECT
 improvedigital.com, 912, DIRECT
 emxdgt.com, 1701, DIRECT, 1e1d41537f7cad7f
+ads.plus, 299, DIRECT
+pubmatic.com, 161332, RESELLER, 5d62403b186f2ace
+sonobi.com, 0e0a64d7d3, RESELLER, d1a215d9eb5aee9e
+sovrn.com, 268479, RESELLER, fafdf38b16bf6b2b
+lijit.com, 268479, RESELLER, fafdf38b16bf6b2b
+xandr.com, 3251, RESELLER
+lijit.com, 268479-eb, RESELLER, fafdf38b16bf6b2b
+rhythmone.com, 2221906906, RESELLER, a670c89d4a324e47
+video.unrulymedia.com, 2221906906, RESELLER
+criteo.com, B-059206, RESELLER, 9fac4a4a87c2a44f
+improvedigital.com, 2016, RESELLER
+improvedigital.com, 1033, RESELLER
+appnexus.com, 2579, RESELLER
+improvedigital.com, 1220, RESELLER
+quantum-advertising.com, 4758, RESELLER
+improvedigital.com, 1602, RESELLER
+152media.info, 152m11, RESELLER
+richaudience.com, 1btooad22a, DIRECT
+33across.com, 0015a00002ouk4aaac, DIRECT, bbea06d9c4d2853c
+smartadserver.com, 4144, DIRECT
+smartadserver.com, 4016, DIRECT
+smartadserver.com, 4012, DIRECT
+smartadserver.com, 4071, DIRECT
+smartadserver.com, 4073, DIRECT
+smartadserver.com, 4074, DIRECT
+google.com, pub-8933329999391104, RESELLER, f08c47fec0942fa0
+google.com, pub-1325340429823502, RESELLER, f08c47fec0942fa0
+google.com, pub-6110672335579159, RESELLER, f08c47fec0942fa0
+adpushup.com, cfcb90bc3d34a71413ca5d041db539a8, DIRECT, b0b8ff8485794fdd
+pubmatic.com, 160925, RESELLER, 5d62403b186f2ace
+spotx.tv, 202009, DIRECT, 7842df1d2fe2db34
+spotxchange.com, 202009, RESELLER, 7842df1d2fe2db34
+durationmedia.net, 21968366300, DIRECT
+yahoo.com, 57872, DIRECT
+smartadserver.com, 3447, DIRECT
+rubiconproject.com, 13702, DIRECT, 0bfd66d529a55807
+admanmedia.com, 812, DIRECT
+amxrtb.com, 105199579, DIRECT
+opera.com, pub5688296365760, DIRECT, 55a0c5fd61378de3
+indexexchange.com, 192806, RESELLER, 50b1c356f2c5c8fc
+pubmatic.com, 158565, RESELLER, 5d62403b186f2ace
+smaato.com, 1100042823, DIRECT, 07bcf65f187117b4
+rubiconproject.com, 17608, RESELLER, 0bfd66d529a55807
+triplelift.com, 10522, RESELLER, 6c33edb13117fd86
+smartadserver.com, 4140, RESELLER
+connectad.io, 50, DIRECT, 85ac85a30c93b3e5
+indexexchange.com, 196713, DIRECT
+adform.com, 2474, DIRECT, 9f5210a2f0999e32
+smartadserver.com, 1743, RESELLER, 060d053dcf45cbf3
+indexexchange.com, 192450, DIRECT, 50b1c356f2c5c8fc
+appnexus.com, 10264, RESELLER, f5ab79cb980f11d1
+appnexus.com, 10264, DIRECT, f5ab79cb980f11d1
+adyoulike.com, 438e40b69c9e19f81b51401dce6e8be4, DIRECT, 4ad745ead2958bf7
+appnexus.com, 9733, RESELLER, f5ab79cb980f11d1
+e-planning.net, 835fbafe26d231b1, DIRECT, c1ba615865ed87b2
+gumgum.com, 13579, DIRECT, ffdef49475d318a9
+indexexchange.com, 189529, DIRECT, 50b1c356f2c5c8fc
+onetag.com, 59a18369e249bfb, DIRECT
+pubmatic.com, 156813, DIRECT, 5d62403b186f2ace
+rubiconproject.com, 17184, DIRECT, 0bfd66d529a55807
+spotim.market, 4446666, DIRECT, 077e5f709d15bdbb
+152media.info, 152m10, RESELLER
+advertising.com, 28305, RESELLER
+appnexus.com, 11470, RESELLER
+themediagrid.com, bg415o, DIRECT, 35d5010d7789b49d
+smartadserver.com, 3392, DIRECT
+appnexus.com, 10212, RESELLER
+improvedigital.com, 1633, RESELLER
+yahoo.com, 58977, RESELLER, e1a5b5b6e3255540
+onetag.com, 75779831fd8c740, DIRECT
+adyoulike.com, 22e5955a10a7f98b037f13dd297cdd74, DIRECT, 4ad745ead2958bf7
+freewheel.tv, 1089937, DIRECT
+freewheel.tv, 1099761, RESELLER
+bliink.io, cfe6f06e-2ff0-11eb-8d68-7aaa96b266b5, DIRECT
+gothamads.com, 1750, DIRECT, d9c86e5dec870222
+connectad.io, 190, DIRECT, 85ac85a30c93b3e5
+improvedigital.com, 1937, RESELLER
+e-planning.net, 54275499d4eb431b, DIRECT, c1ba615865ed87b2
+trmqb.com, 4512, DIRECT
+ssp.logan.ai, lg9, RESELLER
+opera.com, pub6060502141568, DIRECT, 55a0c5fd61378de3
+openx.com, 544015448, RESELLER, 6a698e2ec38604c6
+synacor.com, 82460, DIRECT, e108f11b2cdf7d5b
+video.unrulymedia.com, 123476257, RESELLER
+bizzclick.com, 30, RESELLER, 7e936b1feafdaa61
+betweendigital.com, 43818, RESELLER
+smaato.com, 1100042823, RESELLER, 07bcf65f187117b4
+mobilefuse.com, 3719, RESELLER, 71e88b065d69c021
+conversantmedia.com, 100269, RESELLER, 03113cd04947736d
+outbrain.com, 002d7f7ba0bd74452f2b155d0dfb5cd6c8, RESELLER
+yahoo.com, 58935, RESELLER, e1a5b5b6e3255540
+inmobi.com, f58140d7af1a4fcb83deb5b1c76f0c04, RESELLER, 83e75a7ae333ca9d
+tpmn.io, 472, RESELLER
+seedtag.com, 619f620afe426c0700a5c30d, DIRECT
+seedtag.com, 61a78375e0fb8f0800ec50fb, DIRECT
+seedtag.com, 61a783c8517244070096f118, DIRECT
+seedtag.com, 61a783f0e0fb8f0800ec50fc, DIRECT
+seedtag.com, 61a7804cfe829e0700f0db81, DIRECT
+seedtag.com, 61a7849ac342880700fc6da2, DIRECT
+seedtag.com, 61a784f8fe829e0700f0dbba, DIRECT
+seedtag.com, 61a78466517244070096f119, DIRECT
+seedtag.com, 61a78446c342880700fc6da1, DIRECT
+pubmatic.com, 157743, DIRECT, 5d62403b186f2ace
+spotxchange.com, 249286, DIRECT, 7842df1d2fe2db34
+spotx.tv, 249286, DIRECT, 7842df1d2fe2db34
+rubiconproject.com, 17280, DIRECT, 0bfd66d529a55807
+33across.com, 0010b00002mpthcaaz, DIRECT, bbea06d9c4d2853c
+indexexchange.com, 191730, RESELLER
+improvedigital.com, 1680, RESELLER
+smartadserver.com, 3050, DIRECT
+contextweb.com, 560288, DIRECT, 89ff185a4c4e857c
+openx.com, 537149888, DIRECT, 6a698e2ec38604c6
+districtm.io, 101760, DIRECT, 3fd707be9c4527c3
+xandr.com, 4009, DIRECT
+richaudience.com, ns9qrkjlkd, DIRECT
+aerserv.com, 2750, DIRECT, 2ce496b9f80eb9fa
+aolcloud.net, 4687, DIRECT
+mobfox.com, 74240, DIRECT
+openx.com, 539625136, DIRECT
+smaato.com, 1100037086, DIRECT
+adyoulike.com, 83d15ef72d387a1e60e5a1399a2b0c03, DIRECT
+yahoo.com, 58578, DIRECT, e1a5b5b6e3255540
+aol.com, 58578, DIRECT, e1a5b5b6e3255540
+advertising.com, 29034, DIRECT
+adform.com, 1889, RESELLER, 9f5210a2f0999e32
+condigolabs.com, c6blkn6kv5dumh3tsfj0, RESELLER
+themoneytizer.com, 21982, DIRECT
+outbrain.com, 005e8b586f4258831a0bdd4ca00ecf9823, DIRECT
+onetag.com, 59817ac704fe3e8, DIRECT
+amxrtb.com, 105199400, DIRECT
+adtarget.com.tr, 682499, DIRECT
+improvedigital.com, 912, DIRECT
+emxdgt.com, 1701, DIRECT, 1e1d41537f7cad7f
+smartadserver.com, 4253, RESELLER
+sovrn.com, 374814, RESELLER, fafdf38b16bf6b2b
+lijit.com, 374814, RESELLER, fafdf38b16bf6b2b
+lijit.com, 374814-eb, RESELLER, fafdf38b16bf6b2b
+adyoulike.com, e102ab4faade732565927e57d62d6b8b, RESELLER
+rubiconproject.com, 24364, RESELLER, 0bfd66d529a55807
+criteo.com, B-067384, RESELLER, 9fac4a4a87c2a44f
+themediagrid.com, IRK975, RESELLER, 35d5010d7789b49d
+rhythmone.com, 6694405583287859332,RESELLER,a670c89d4a324e47
+video.unrulymedia.com, 6694405583287859332, RESELLER
+pubmatic.com, 161409, RESELLER, 5d62403b186f2ace
+openx.com, 545730280, RESELLER, 6a698e2ec38604c6
+onetag.com, 75753f1ebcc343c-OB, RESELLER
 # End of ads.plus
 
 # Pixfuture

res/template/appearance.html

@@ -27,7 +27,6 @@
 				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
 				<input type="radio" id="style_snowstorm"      name="style"><label for="style_snowstorm">Snowstorm Style</label>
 				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
-				<input type="radio" id="style_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
 				<input type="radio" id="style_skeuos"         name="style"><label for="style_skeuos">Skeuos Style</label>
 				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
 				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->

res/template/apps.html

@@ -7,7 +7,7 @@
 		<style>
 			.specs {
 				text-align: center;
-				border-bottom: 1px solid var(--layer_2_color_border);
+				border-bottom: 1px solid var(--separator);
 			}
 		</style>
 	</head>

res/template/fragments/user_style.html

@@ -8,13 +8,11 @@
 {{ define "user_style_js" }}
 <script>
 	window.style = {
-		textColor: "{{.Style.Text.RGB}}",
+		bodyTextColor: "{{.Style.BodyText.RGB}}",
-		inputColor: "{{.Style.Input.RGB}}",
-		inputTextColor: "{{.Style.InputText.RGB}}",
 		highlightColor: "{{.Style.Highlight.RGB}}",
 		dangerColor: "{{.Style.Danger.RGB}}",
-		layer2Color: "{{.Style.Layer2.RGB}}",
+		bodyColor: "{{.Style.BodyColor.RGB}}",
-		layer3Color: "{{.Style.Layer3.RGB}}",
+		separatorColor: "{{.Style.Separator.RGB}}",
 		chart1Color: "{{.Style.Chart1.RGB}}",
 		chart2Color: "{{.Style.Chart2.RGB}}",
 		chart3Color: "{{.Style.Chart3.RGB}}",

res/template/home.html

@@ -14,7 +14,7 @@
 			background-attachment: fixed;
 			background-position: center;
 			background-size: cover;
-			color: var(--layer_1_text_color);
+			color: var(--background_text_color);
 		}
 		</style>
 

svelte/src/admin_panel/AbuseReport.svelte

@@ -119,7 +119,7 @@ let set_status = async (action, report_type) => {
 .stats {
 	flex: 0 0 auto;
 	padding: 0 4px;
-	border-left: 1px solid var(--layer_3_color_border);
+	border-left: 1px solid var(--separator);
 	text-align: center;
 }
 .details {

svelte/src/admin_panel/IPBans.svelte

@@ -221,7 +221,7 @@ onMount(get_bans);
 .stats {
 	flex: 0 0 auto;
 	padding: 0 4px;
-	border-left: 1px solid var(--layer_3_color_border);
+	border-left: 1px solid var(--separator);
 	text-align: center;
 }
 </style>

svelte/src/admin_panel/Router.svelte

@@ -34,46 +34,46 @@ onMount(() => {
 			href="/admin"
 			class:button_highlight={page === "status"}
 			on:click|preventDefault={() => {navigate("status", "Status")}}>
-			<i class="icon">home</i>
+			<i class="icon">home</i><br/>
 			Status
 		</a>
 		<a class="button"
 			href="/admin/block_files"
 			class:button_highlight={page === "block_files"}
 			on:click|preventDefault={() => {navigate("block_files", "Block files")}}>
-			<i class="icon">block</i>
+			<i class="icon">block</i><br/>
 			Block files
 		</a>
 		<a class="button"
 			href="/admin/abuse_reports"
 			class:button_highlight={page === "abuse_reports"}
 			on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
-			<i class="icon">flag</i>
+			<i class="icon">flag</i><br/>
 			User reports
 		</a>
 		<a class="button"
 			href="/admin/abuse_reporters"
 			class:button_highlight={page === "abuse_reporters"}
 			on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
-			<i class="icon">email</i>
+			<i class="icon">email</i><br/>
 			E-mail reporters
 		</a>
 		<a class="button"
 			href="/admin/ip_bans"
 			class:button_highlight={page === "ip_bans"}
 			on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
-			<i class="icon">remove_circle</i>
+			<i class="icon">remove_circle</i><br/>
 			IP bans
 		</a>
 		<a class="button"
 			href="/admin/subscriptions"
 			class:button_highlight={page === "subscriptions"}
 			on:click|preventDefault={() => {navigate("subscriptions", "Subscriptions")}}>
-			<i class="icon">receipt_long</i>
+			<i class="icon">receipt_long</i><br/>
 			Subscriptions
 		</a>
 		<a class="button" href="/admin/globals">
-			<i class="icon">edit</i>
+			<i class="icon">edit</i><br/>
 			Global settings
 		</a>
 	</div>

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -114,7 +114,7 @@ head.valueimpression_loaded.subscribe(v => {
 	{:else if ad_type === "aads"}
 		<iframe bind:this={banner} class="banner"
 			data-aa="73974"
-			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
 			style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 			title="A-ads advertisement">
 		</iframe>

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -91,7 +91,7 @@ head.valueimpression_loaded.subscribe(v => {
 			{#if ad_type === "aads"}
 				<iframe
 					data-aa="1811738"
-					src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+					src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
 					style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 					title="A-ads advertisement">
 				</iframe>

svelte/src/file_viewer/CustomBanner.svelte

@@ -11,7 +11,7 @@ export let border_top = false;
 
 <style>
 .border_top {
-	border-top: solid 1px var(--layer_2_color_border);
+	border-top: solid 1px var(--separator);
 }
 .image {
 	display: block;

svelte/src/file_viewer/FileViewer.svelte

@@ -709,7 +709,7 @@ const keyboard_event = evt => {
 	transition: left 0.5s, right 0.5s;
 	overflow: auto;
 	text-align: center;
-	box-shadow: inset 1px 1px 8px var(--shadow_color);
+	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
 	border-radius: 16px;
 }
 .file_preview.toolbar_visible { left: 8em; }
@@ -717,7 +717,6 @@ const keyboard_event = evt => {
 .file_preview.custom_background {
 	background-size: cover;
 	background-position: center;
-	background-color: var(--layer_1_color);
 }
 
 /* Toolbars */

svelte/src/file_viewer/GalleryView.svelte

@@ -177,8 +177,8 @@ const drop = (e, index) => {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: 2px 2px 8px 0 var(--shadow_color);
+	box-shadow: 1px 1px 4px -1px var(--shadow_color);
-	background-color: var(--layer_3_color);
+	background-color: var(--input_background);
 	word-break: break-all;
 	text-align: center;
 	line-height: 1.2em;
@@ -186,7 +186,7 @@ const drop = (e, index) => {
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 .file:hover, .highlight {
 	box-shadow: 0 0 2px 2px var(--highlight_color);
@@ -201,9 +201,12 @@ const drop = (e, index) => {
 	text-align: left;
 }
 .icon_container.editing {
-	box-shadow: inset 0 60px 40px -40px var(--shadow_color);
+	box-shadow: inset 0 60px 40px -20px var(--body_color);
 }
-.icon_container > i:hover {
+.icon_container > .icon {
+	color: var(--body_text_color);
+}
+.icon_container > .icon:hover {
 	color: var(--highlight_color);
 	cursor: pointer;
 }

svelte/src/file_viewer/IntroPopup.svelte

@@ -56,7 +56,7 @@ onMount(() => {
 	max-width: 80%;
 	height: auto;
 	padding: 8px;
-	background-color: var(--layer_4_color);
+	background-color: var(--popout_color);
 	box-shadow: 2px 2px 16px var(--shadow_color);
 	border-radius: 20px;
 	z-index: 50;
@@ -68,7 +68,7 @@ onMount(() => {
 	position: absolute;
 	left: 30px;
 	top: -15px;
-	border-bottom: 15px solid var(--layer_4_color);
+	border-bottom: 15px solid var(--popout_color);
 	border-left: 15px solid transparent;
 	border-right: 15px solid transparent;
 }

svelte/src/file_viewer/ListNavigator.svelte

@@ -96,7 +96,7 @@ export const set_item = idx => {
 	display: flex;
 	position: relative;
 	width: 100%;
-	border-top: 1px solid var(--layer_2_color_border);
+	border-top: 1px solid var(--separator);
 	text-align: center;
 	line-height: 1em;
 

svelte/src/file_viewer/ReportWindow.svelte

@@ -160,7 +160,7 @@ let submit = async e => {
 }
 label {
 	display: block;
-	border-bottom: 1px var(--layer_2_color_border) solid;
+	border-bottom: 1px var(--separator) solid;
 	padding: 0.5em;
 }
 .spinner_container {

svelte/src/file_viewer/Sharebar.svelte

@@ -70,8 +70,7 @@ const share_tumblr = () => {
 	top: 0;
 	overflow-y: scroll;
 	overflow-x: hidden;
-	box-shadow: inset 1px 1px 5px var(--shadow_color);
+	background: var(--shaded_background);
-	background-color: var(--layer_1_color);
 	border-radius: 16px;
 	text-align: center;
 	overflow: hidden;

svelte/src/file_viewer/viewers/Text.svelte

@@ -103,7 +103,9 @@ const code = async file => {
 
 <style>
 .container {
-	background: var(--layer_2_color);
+	background: var(--body_color);
+	border: 2px solid var(--separator);
+	border-radius: 16px;
 	position: relative;
 	text-align: left;
 	height: 100%;

svelte/src/file_viewer/viewers/Video.svelte

@@ -191,7 +191,7 @@ h1 {
 	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
-	background-color: var(--layer_1_color);
+	background-color: var(--shaded_background);
 	box-shadow: 1px 1px 6px var(--shadow_color);
 	padding: 0 2px 2px 2px;
 	align-items: center;

svelte/src/filesystem/Filesystem.svelte

@@ -289,12 +289,12 @@ const share = () => {
 			{#each state.parents as parent}
 				<a
 					href={state.path_root+parent.path}
-					class="breadcrumb breadcrumb_button"
+					class="breadcrumb button"
 					on:click|preventDefault={() => {navigate(parent.path, true)}}>
 					{parent.name}
 				</a> /
 			{/each}
-			<div class="breadcrumb breadcrumb_last">{state.base.name}</div>
+			<div class="breadcrumb button button_highlight">{state.base.name}</div>
 		</div>
 	</div>
 	<div class="list_navigator"></div>
@@ -397,7 +397,7 @@ const share = () => {
 	bottom: 0;
 	left: 0;
 	overflow: hidden;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 }
 
 /* Headerbar (row 1) */
@@ -437,26 +437,10 @@ const share = () => {
 	border-radius: 1em;
 	min-width: 1em;
 	text-align: center;
-	line-height: 1.2em;
+	padding: 4px 8px;
-	padding: 3px 8px;
 	margin: 2px 6px;
 	word-break: break-all;
 }
-.breadcrumb_button {
-	cursor: pointer;
-	text-decoration: none;
-	color: var(--text_color);
-	background-color: var(--layer_3_color);
-	transition: 0.2s background-color, 0.2s color;
-}
-.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
-	color: var(--input_text_color);
-	background-color: var(--input_color);
-}
-.breadcrumb_last {
-	color: var(--highlight_text_color);
-	background-color: var(--highlight_color);
-}
 
 .button_home::after {
 	content: "pixeldrain";
@@ -526,7 +510,6 @@ const share = () => {
 	padding: 0;
 	text-align: left;
 	transition: left 0.5s;
-	background-color: var(--layer_2_color);
 }
 .toolbar.toolbar_visible { left: 0; }
 .file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }

svelte/src/filesystem/Sharebar.svelte

@@ -72,8 +72,7 @@ const share_tumblr = () => {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	float: left;
-	background-color: var(--layer_1_color);
+	background: var(--shaded_background);
-	box-shadow: inset 1px 1px 5px var(--shadow_color);
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -188,6 +188,8 @@ const toggle_select = () => {
 	margin: 16px 0 0 0;
 	padding: 0;
 	justify-content: center;
+	background: var(--shaded_background);
+	border-radius: 6px;
 }
 .toolbar > * { flex: 0 0 auto; }
 .toolbar_spacer { flex: 1 1 auto; }

svelte/src/filesystem/filemanager/FileUploader.svelte

@@ -200,7 +200,7 @@ const paste = (e) => {
 		width: 100%;
 		margin: 6px 0 0 0;
 		padding: 0;
-		background-color: var(--layer_2_color);
+		background: var(--body_color);
 		box-shadow: 1px 1px 5px var(--shadow_color);
 	}
 

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -75,14 +75,14 @@ const node_icon = node => {
 	overflow: hidden;
 	border-radius: 8px;
 	box-shadow: 1px 1px 6px 0 var(--shadow_color);
-	background-color: var(--layer_3_color);
+	background: var(--input_background);
 	text-align: center;
 	line-height: 1.2em;
 	display: inline-block;
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 .file:hover {
 	box-shadow: 0 0 2px 2px var(--highlight_color);

svelte/src/filesystem/filemanager/ListView.svelte

@@ -76,7 +76,7 @@ const node_icon = node => {
 	overflow: hidden;
 	margin: 8px auto 16px auto;
 	text-align: left;
-	background-color: var(--layer_2_color);
+	background: var(--body_color);
 	box-shadow: 1px 1px 6px var(--shadow_color);
 	border-collapse: collapse;
 	border-radius: 8px;
@@ -97,11 +97,11 @@ const node_icon = node => {
 	padding: 6px;
 }
 .node:not(:last-child) {
-	border-bottom: 1px solid var(--layer_2_color_border);
+	border-bottom: 1px solid var(--separator);
 }
 .node:hover:not(.node_selected) {
-	background-color: var(--input_color_dark);
+	background: var(--input_background);
-	color: var(--input_text_color);
+	color: var(--input_text);
 	text-decoration: none;
 }
 .node.node_selected {

svelte/src/home_page/FeatureTable.svelte

@@ -279,16 +279,14 @@ onMount(() => {
 .feat_table > div > .feat_label {
 	border-top-left-radius: 0.5em;
 	border-bottom-left-radius: 0.5em;
-	background-color: var(--layer_1_color);
+	background: var(--shaded_background);
-	color: var(--layer_1_text_color);
 }
 .feat_table > div > .feat_normal {
-	background-color: var(--layer_3_color);
+	background-color: var(--popout_color);
-	box-shadow: 1px 1px 4px -2px var(--shadow_color);
 }
 .feat_table > div > .feat_pro {
-	background-color: var(--layer_4_color);
+	background-color: var(--popout_color);
-	box-shadow: 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: 1px 1px 2px -1px var(--shadow_color);
 }
 .feat_table > div > .feat_highlight {
 	border: 1px solid var(--link_color)

svelte/src/home_page/OtherPlans.svelte

@@ -199,8 +199,8 @@
 	hyphens: auto;
 }
 .feat_table > div > .feat_pro {
-	background-color: var(--layer_4_color);
+	background-color: var(--popout_color);
-	box-shadow: 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: 1px 1px 2px -1px var(--shadow_color);
 }
 .text_highlight {
 	color: var(--link_color);

svelte/src/home_page/UploadProgressBar.svelte

@@ -53,7 +53,6 @@ const on_success = (resp) => {
 	href = "/u/"+resp.id
 	target = "_blank"
 
-	file_button.style.background = 'var(--layer_3_color)'
 	progress_bar.style.width = "100%"
 	progress_bar.style.opacity = "0"
 }
@@ -222,9 +221,8 @@ export const start = () => {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 6px;
-	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+	background: var(--input_background);
-	background-color: var(--layer_3_color);
+	color: var(--body_text_color);
-	color: var(--text_color);
 	word-break: break-all;
 	text-align: left;
 	line-height: 1.2em;
@@ -277,7 +275,7 @@ export const start = () => {
 	display: flex;
 	flex-direction: row;
 	height: 1.4em;
-	border-top: 1px solid var(--layer_3_color_border);
+	border-top: 1px solid var(--separator);
 	text-align: center;
 	font-family: sans-serif, monospace;
 	font-size: 0.9em;

svelte/src/home_page/UploadWidget.svelte

@@ -566,8 +566,8 @@ const keydown = (e) => {
 	font-size: 1.8em;
 }
 .instruction {
-	border-top: 1px solid var(--layer_2_color_border);
+	border-top: 1px solid var(--separator);
-	border-bottom: 1px solid var(--layer_2_color_border);
+	border-bottom: 1px solid var(--separator);
 	margin: 1.5em 0;
 	padding: 5px;
 }

svelte/src/text_upload/TextUpload.svelte

@@ -120,8 +120,8 @@ const keydown = e => {
 	display: flex;
 	flex-direction: row;
 	padding: 4px;
-	background-color: var(--layer_1_color);
+	background: var(--background_color);
-	color: var(--layer_1_text_color);
+	color: var(--background_text_color);
 }
 .headerbar > * {
 	flex: 0 0 auto;
@@ -140,7 +140,7 @@ const keydown = e => {
 	height: 100%;
 	width: 100%;
 	background: var(--body_background);
-	color: var(--text_color);
+	color: var(--body_text_color);
 	margin: 0;
 	border-radius: 0;
 	box-shadow: none;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -361,7 +361,7 @@ const node_click = (index) => {
 	display: inline-block;
 	margin: 4px 10px;
 	padding: 4px;
-	border-bottom: 1px solid var(--input_color);
+	border-bottom: 1px solid var(--separator);
 	cursor: pointer;
 }
 
@@ -391,7 +391,7 @@ const node_click = (index) => {
 
 #footer {
 	flex-shrink: 0;
-	color: var(--layer_1_text_color);
+	color: var(--background_text_color);
 	padding: 4px;
 }
 
@@ -407,12 +407,12 @@ const node_click = (index) => {
 	control over the size.
 	Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
 	margin: 0;
-	color: var(--text_color);
+	color: var(--body_text_color);
 	text-decoration: none;
 }
 .node:hover:not(.node_selected) {
-	background-color: var(--input_color_dark);
+	background: var(--input_background);
-	color: var(--input_text_color);
+	color: var(--input_text);
 	text-decoration: none;
 }
 .node_selected {

svelte/src/user_home/Router.svelte

@@ -42,42 +42,42 @@ onMount(() => {
 			href="/user"
 			class:button_highlight={page === "home"}
 			on:click|preventDefault={() => {navigate("home", "My home")}}>
-			<i class="icon">home</i>
+			<i class="icon">home</i><br/>
 			My home
 		</a>
 		<a class="button"
 			href="/user/settings"
 			class:button_highlight={page === "settings"}
 			on:click|preventDefault={() => {navigate("settings", "Settings")}}>
-			<i class="icon">settings</i>
+			<i class="icon">settings</i><br/>
 			Settings
 		</a>
 		<a class="button"
 			href="/user/connect_app"
 			class:button_highlight={page === "connect_app"}
 			on:click|preventDefault={() => {navigate("connect_app", "Apps")}}>
-			<i class="icon">app_registration</i>
+			<i class="icon">app_registration</i><br/>
 			Apps
 		</a>
 		<a class="button"
 			href="/user/api_keys"
 			class:button_highlight={page === "api_keys"}
 			on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
-			<i class="icon">vpn_key</i>
+			<i class="icon">vpn_key</i><br/>
 			Keys
 		</a>
 		<a class="button"
 			href="/user/activity"
 			class:button_highlight={page === "activity"}
 			on:click|preventDefault={() => {navigate("activity", "Activity log")}}>
-			<i class="icon">list</i>
+			<i class="icon">list</i><br/>
 			Activity log
 		</a>
 		<a class="button"
 			href="/user/subscription"
 			class:button_highlight={page === "subscription"}
 			on:click|preventDefault={() => {navigate("subscription", "Subscription")}}>
-			<i class="icon">shopping_cart</i>
+			<i class="icon">shopping_cart</i><br/>
 			Subscription
 		</a>
 		{#if window.user.subscription.type !== "patreon"}
@@ -85,7 +85,7 @@ onMount(() => {
 				href="/user/transactions"
 				class:button_highlight={page === "transactions"}
 				on:click|preventDefault={() => {navigate("transactions", "Transactions")}}>
-				<i class="icon">receipt_long</i>
+				<i class="icon">receipt_long</i><br/>
 				Transactions
 			</a>
 		{/if}

svelte/src/user_home/Subscription.svelte

@@ -122,7 +122,7 @@ onMount(load_tranfer_used)
 						</button>
 					{/if}
 				</div>
-				<div class="feat_normal round_tr">
+				<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
 					<ul>
 						<li>Base price of €1 per month</li>
 						<li>€4 per TB per month for storage</li>
@@ -269,15 +269,11 @@ onMount(load_tranfer_used)
 .feat_table > div > .feat_label {
 	border-top-left-radius: 0.5em;
 	border-bottom-left-radius: 0.5em;
-	background-color: var(--layer_1_color);
+	background: var(--shaded_background);
 	font-size: 1.1em;
-	color: #ffffff;
-	text-shadow: 0 0 3px #000000;
 }
 .feat_table > div > .feat_normal {
-	background-color: var(--layer_3_color);
+	background: var(--popout_color);
-	box-shadow: 1px 1px 3px -1px var(--shadow_color);
-	text-shadow: 1px 1px 3px var(--shadow_color);
 }
 .feat_table > div > .feat_highlight {
 	border: 1px solid var(--highlight_color)

svelte/src/util/Chart.svelte

@@ -38,7 +38,7 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.defaults.color = "#"+window.style.textColor;
+Chart.defaults.color = "#"+window.style.bodyTextColor;
 Chart.defaults.font.size = 15;
 Chart.defaults.font.family = "system-ui, sans-serif";
 Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +91,7 @@ onMount(() => {
 						grid: {
 							display: true,
 							drawBorder: false,
-							color: "#"+window.style.layer3Color,
+							color: "#"+window.style.separatorColor,
 						},
 					},
 					x: {

svelte/src/util/Euro.svelte

@@ -5,7 +5,7 @@ export let precision = 2
 
 <span>
 	€
-	<span class:red={amount < 0} class:green={amount > 0} class:zero={amount === 0}>
+	<span class:red={amount < 0} class:green={amount > 0}>
 		{(amount / 1000000).toFixed(precision)}
 	</span>
 </span>
@@ -17,7 +17,4 @@ export let precision = 2
 .green {
 	color: var(--highlight_color);
 }
-.zero {
-	color: var(--layer_4_color);
-}
 </style>

svelte/src/util/Expandable.svelte

@@ -41,7 +41,7 @@ export let highlight = false
 <style>
 .expandable {
 	text-decoration: none;
-	background-color: var(--layer_3_color);
+	background-color: var(--popout_color);
 	margin: 0.6em 0;
 	border-radius: 6px;
 	overflow: hidden;
@@ -49,11 +49,11 @@ export let highlight = false
 .header {
 	display: flex;
 	flex-direction: row;
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 .click_expand:hover, .highlight:hover {
-	background-color: var(--input_color_dark);
+	background: var(--input_background);
-	color: var(--input_text_color);
+	color: var(--input_text);
 }
 .click_expand {
 	cursor: pointer;
@@ -72,8 +72,7 @@ export let highlight = false
 	padding: 0.4em;
 	flex-direction: column;
 	text-decoration: none;
-	border-top: 1px solid var(--layer_3_color_border);
+	border-top: 1px solid var(--separator);
-	color: var(--text_color);
 }
 .hidden {
 	display: none;

svelte/src/util/Modal.svelte

@@ -79,7 +79,7 @@ const keydown = e => {
 	z-index: inherit;
 	display: flex;
 	flex-direction: column;
-	background-color: var(--layer_2_color);
+	background: var(--body_color);
 	max-height: 100%;
 	max-width: 100%;
 	margin: 0 auto;
@@ -97,8 +97,8 @@ const keydown = e => {
 	display: flex;
 	flex-direction: row;
 	padding: 1px;
-	background-color: var(--layer_1_color);
+	background: var(--background_color);
-	color: var(--layer_1_text_color);
+	color: var(--background_text_color);
 }
 .title {
 	flex-grow: 1;

svelte/src/util/ProgressBar.svelte

@@ -24,13 +24,13 @@ $: {
 <style>
 .progress_bar_outer {
 	display: block;
-	background-color: var(--layer_1_color);
+	background: var(--background_color);
 	width: 100%;
 	height: 3px;
 	margin: 6px 0 12px 0;
 }
 .progress_bar_inner {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 1s;

svelte/src/util/ThemePicker.svelte

@@ -38,9 +38,6 @@ let set = s => {
 	<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
 		Snowstorm
 	</button>
-	<button class:button_highlight={theme==="deepsea"} on:click={() => {set("deepsea")}}>
-		Deep sea
-	</button>
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos
 	</button>

webcontroller/style.go

@@ -29,16 +29,12 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 		s = pixeldrainClassicStyle
 	case "solarized_dark":
 		s = solarizedDarkStyle
-	case "sunny":
-		s = sunnyPixeldrainStyle
 	case "maroon":
 		s = maroonStyle
 	case "hacker":
 		s = hackerStyle
 	case "canta":
 		s = cantaPixeldrainStyle
-	case "deepsea":
-		s = deepseaPixeldrainStyle
 	case "skeuos":
 		s = skeuosPixeldrainStyle
 	case "nord":
@@ -66,48 +62,50 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 		}
 	}
 	setDefaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
-	setDefaultHSL(&s.InputDisabled, s.Input.Add(0, -.2, -.2))
+	setDefaultColor(&s.ScrollbarBackground, s.BodyColor)
-	setDefaultHSL(&s.ScrollbarForeground, s.Input)
+	setDefaultColor(&s.ScrollbarForeground, s.Input)
-	setDefaultHSL(&s.ScrollbarHover, s.ScrollbarForeground.Add(0, 0, .1))
+	setDefaultColor(&s.ScrollbarHover, s.Highlight)
-	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.Background, s.BackgroundColor)
-	setDefaultColor(&s.BackgroundPattern, s.Layer1)
+	setDefaultColor(&s.BackgroundPattern, s.BackgroundColor)
-	setDefaultColor(&s.ParallaxSlider, s.Layer1)
+	setDefaultColor(&s.ParallaxSlider, s.BackgroundColor)
 	setDefaultColor(&s.Navigation, NoColor)
-	setDefaultColor(&s.Body, s.Layer2)
+	setDefaultColor(&s.BodyBackground, s.BodyColor)
+	setDefaultHSL(&s.BackgroundText, s.BodyText)
+	setDefaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
 	setDefaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
 
 	return s
 }
 
 type pixeldrainStyleSheet struct {
-	Text                hsl
 	Link                hsl // Based on Highlight if undefined
-	Input               hsl // Buttons, text fields
+	Input               Color
-	InputText           hsl
+	InputText           Color
-	InputDisabled       hsl
+	InputDisabledText   Color
 	HighlightBackground Color
 	Highlight           hsl // Links, highlighted buttons, list navigation
 	HighlightText       hsl // Text on buttons
 	Danger              hsl
-	ScrollbarForeground hsl // Based on Highlight if undefined
+	ScrollbarBackground Color
-	ScrollbarHover      hsl // Based on ScrollbarForeground if undefined
+	ScrollbarForeground Color // Based on Highlight if undefined
+	ScrollbarHover      Color // Based on ScrollbarForeground if undefined
 
+	BackgroundColor   hsl
 	Background        Color
+	BackgroundText    hsl
 	BackgroundPattern Color
 	ParallaxSlider    Color
 	Navigation        Color
-	Body              Color
+	BodyColor         hsl
+	BodyBackground    Color
+	BodyText          hsl
+	Separator         Color
 	Shaded            Color
-	Layer1            hsl // Deepest and darkest layer
+	PopoutColor       hsl
-	Layer1Text        hsl // Based on Text if undefined
-	Layer2            hsl
-	Layer3            hsl
-	Layer4            hsl // Highest and brightest layer
 
 	// Colors to use in graphs
 	Chart1 hsl
@@ -121,37 +119,31 @@ type pixeldrainStyleSheet struct {
 func (s pixeldrainStyleSheet) String() string {
 	return fmt.Sprintf(
 		`:root {
-	--text_color:                 %s;
 	--link_color:                 %s;
-	--input_color:                %s;
+	--input_background:           %s;
-	--input_color_dark:           %s;
+	--input_text:                 %s;
-	--input_text_color:           %s;
+	--input_disabled_text:        %s;
-	--input_disabled_color:       %s;
 	--highlight_background:       %s;
 	--highlight_color:            %s;
-	--highlight_color_dark:       %s;
 	--highlight_text_color:       %s;
 	--danger_color:               %s;
 	--danger_color_dark:          %s;
+	--scrollbar_background_color: %s;
 	--scrollbar_foreground_color: %s;
 	--scrollbar_hover_color:      %s;
-	--scrollbar_background_color: %s;
 
+	--background_color:         %s;
 	--background:               %s;
+	--background_text_color:    %s;
 	--background_pattern_color: %s;
 	--parallax_slider_color:    %s;
 	--navigation_background:    %s;
+	--body_color:               %s;
 	--body_background:          %s;
+	--body_text_color:          %s;
+	--separator:                %s;
 	--shaded_background:        %s;
-	--layer_1_color:            %s;
+	--popout_color:             %s;
-	--layer_1_color_border:     %s;
-	--layer_1_text_color:       %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;
@@ -159,36 +151,30 @@ func (s pixeldrainStyleSheet) String() string {
 
 	--shadow_color: %s;
 }`,
-		s.Text.CSS(),
 		s.Link.CSS(),
 		s.Input.CSS(),
-		s.Input.Add(0, 0, -.02).CSS(),
 		s.InputText.CSS(),
-		s.InputDisabled.CSS(),
+		s.InputDisabledText.CSS(),
 		s.HighlightBackground.CSS(),
 		s.Highlight.CSS(),
-		s.Highlight.Add(0, 0, -.02).CSS(),
 		s.HighlightText.CSS(),
 		s.Danger.CSS(),
 		s.Danger.Add(0, 0, -.02).CSS(),
+		s.ScrollbarBackground.CSS(),
 		s.ScrollbarForeground.CSS(),
 		s.ScrollbarHover.CSS(),
-		s.Layer2.CSS(), // Scrollbar background
+		s.BackgroundColor.CSS(),
 		s.Background.CSS(),
+		s.BackgroundText.CSS(),
 		s.BackgroundPattern.CSS(),
 		s.ParallaxSlider.CSS(),
 		s.Navigation.CSS(),
-		s.Body.CSS(),
+		s.BodyColor.CSS(),
+		s.BodyBackground.CSS(),
+		s.BodyText.CSS(),
+		s.Separator.CSS(),
 		s.Shaded.CSS(),
-		s.Layer1.CSS(),
+		s.PopoutColor.CSS(),
-		s.Layer1.Add(0, 0, .05).CSS(),
-		s.Layer1Text.CSS(),
-		s.Layer2.CSS(),
-		s.Layer2.Add(0, 0, .05).CSS(),
-		s.Layer3.CSS(),
-		s.Layer3.Add(0, 0, .05).CSS(),
-		s.Layer4.CSS(),
-		s.Layer4.Add(0, 0, .05).CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
 		s.Chart3.CSS(),
@@ -229,227 +215,192 @@ func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.U
 // Following are all the available styles
 
 var defaultPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .8},
+	Input:               hsl{266, .85, .24},
-	Input:               hsl{266, .85, .38},
+	InputText:           hsl{0, 0, .9},
-	InputText:           hsl{0, 0, 1},
+	InputDisabledText:   hsl{266, .85, .4},
 	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},
+	ScrollbarBackground: hsl{274, .9, .14},
 	ScrollbarForeground: hsl{266, .85, .40},
 	ScrollbarHover:      hsl{266, .85, .50},
 
-	Background:        NewGradient(120, hsl{240, .9, .14}, hsl{274, .9, .14}, hsl{310, .8, .12}),
+	BackgroundColor:   hsl{275, .8, .10},
+	Background:        NewGradient(120, hsl{250, .9, .14}, hsl{300, .9, .10}),
 	BackgroundPattern: NoColor,
 	ParallaxSlider:    hsl{275, .8, .1},
 	Navigation:        RGBA{0, 0, 0, 0.1},
-	Body:              NoColor,
+	BodyColor:         hsl{274, .9, .14},
-	Layer1:            hsl{275, .8, .10},
+	BodyBackground:    NoColor,
-	Layer2:            hsl{275, .75, .12},
+	BodyText:          hsl{0, 0, .8},
-	Layer3:            hsl{275, .7, .18},
+	PopoutColor:       hsl{275, .8, .18},
-	Layer4:            hsl{275, .65, .24},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var pixeldrainClassicStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .8},
+	Input:               hsl{0, 0, .16},
-	Input:               hsl{0, 0, .25},
+	InputText:           hsl{0, 0, .9},
-	InputText:           hsl{0, 0, 1},
+	InputDisabledText:   hsl{0, 0, .4},
 	Highlight:           hsl{89, .60, .45},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{339, .65, .31},
 	ScrollbarForeground: hsl{0, 0, .40},
 	ScrollbarHover:      hsl{0, 0, .50},
 
-	Layer1: hsl{0, 0, .08},
+	BackgroundColor: hsl{0, 0, .08},
-	Layer2: hsl{0, 0, .11},
+	BodyColor:       hsl{0, 0, .11},
-	Layer3: hsl{0, 0, .15},
+	BodyText:        hsl{0, 0, .8},
-	Layer4: hsl{0, 0, .18},
+	PopoutColor:     hsl{0, 0, .18},
-
-	Shadow: hsl{0, 0, 0},
-}
-
-var sunnyPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .1},
-	Input:               hsl{0, 0, .96}, // hsl(0, 0%, 96%)
-	InputText:           hsl{0, 0, .1},
-	Highlight:           hsl{89, .74, .5}, // hsl(89, 73%, 50%)
-	HighlightText:       hsl{0, 0, 0},
-	Danger:              hsl{345, .99, .33}, // hsl(345, 99%, 33%)
-	ScrollbarForeground: hsl{0, 0, .30},
-	ScrollbarHover:      hsl{0, 0, .40},
-
-	Layer1: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
-	Layer2: hsl{0, 1, 1},
-	Layer3: hsl{0, 1, 1},
-	Layer4: hsl{0, 1, 1},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var solarizedDarkStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .75},
 	Input:               hsl{192, .95, .25},
 	InputText:           hsl{0, 0, 1},
+	InputDisabledText:   hsl{0, 0, .5},
 	Highlight:           hsl{145, .63, .42},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{343, .63, .42},
 	ScrollbarForeground: hsl{192, .95, .30},
 	ScrollbarHover:      hsl{192, .95, .40},
 
-	Layer1: hsl{192, .87, .09},
+	BackgroundColor: hsl{192, .87, .09},
-	Layer2: hsl{192, .81, .14},
+	BodyColor:       hsl{192, .81, .14},
-	Layer3: hsl{192, .95, .17},
+	BodyText:        hsl{0, 0, .75},
-	Layer4: hsl{192, .99, .19},
+	PopoutColor:     hsl{192, .95, .17},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var maroonStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .8},
+	Input:               hsl{0, .8, .20}, // hsl(0, 87%, 40%)
-	Input:               hsl{0, .87, .40}, // hsl(0, 87%, 40%)
 	InputText:           hsl{0, 0, 1},
+	InputDisabledText:   hsl{0, 0, .5},
 	Highlight:           hsl{137, 1, .37}, //hsl(137, 100%, 37%)
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{9, .96, .42}, //hsl(9, 96%, 42%)
 	ScrollbarForeground: hsl{0, .75, .3},
 	ScrollbarHover:      hsl{0, .75, .4},
 
-	Layer1: hsl{0, .7, .05},
+	BackgroundColor: hsl{0, .7, .05},
-	Layer2: hsl{0, .8, .08}, // hsl{0, .8, .15},
+	BodyColor:       hsl{0, .8, .08}, // hsl{0, .8, .15},
-	Layer3: hsl{0, .9, .14},
+	BodyText:        hsl{0, 0, .8},
-	Layer4: hsl{0, .9, .20},
+	PopoutColor:     hsl{0, .9, .14},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var hackerStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .8},
+	Input:               hsl{0, 0, .1}, // hsl(120, 50%, 10%)
-	Input:               hsl{120, .5, .1}, // hsl(120, 50%, 10%)
 	InputText:           hsl{0, 0, 1},
-	Highlight:           hsl{120, 1, .5},
+	InputDisabledText:   hsl{0, 0, .5},
+	Highlight:           hsl{120, .8, .5},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{0, 1, .4},
 	ScrollbarForeground: hsl{120, .5, .25},
 	ScrollbarHover:      hsl{120, .5, .35},
 
-	Layer1: hsl{0, 0, 0},
+	BackgroundColor: hsl{0, 0, 0},
-	Layer2: hsl{0, 0, .03},
+	BodyColor:       hsl{0, 0, .03},
-	Layer3: hsl{120, .3, .08},
+	BodyText:        hsl{0, 0, .8},
-	Layer4: hsl{120, .5, .12},
+	PopoutColor:     hsl{120, .4, .05},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var cantaPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .8},
 	Input:               hsl{167, .06, .30}, // hsl(167, 6%, 30%)
 	InputText:           hsl{0, 0, 1},
+	InputDisabledText:   hsl{0, 0, .5},
 	Highlight:           hsl{165, 1, .40}, // hsl(165, 100%, 40%)
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{40, 1, .5},     // hsl(40, 100%, 50%)
 	ScrollbarForeground: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
 	ScrollbarHover:      hsl{204, .05, .88},
 
-	Layer1: hsl{180, .04, .16},
+	BackgroundColor: hsl{180, .04, .16},
-	Layer2: hsl{168, .05, .21},
+	BodyColor:       hsl{168, .05, .21},
-	Layer3: hsl{170, .05, .26},
+	BodyText:        hsl{0, 0, .8},
-	Layer4: hsl{163, .04, .31},
+	PopoutColor:     hsl{170, .05, .26},
-
-	Shadow: hsl{0, 0, 0},
-}
-
-var deepseaPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{0, 0, .7},
-	Input:               hsl{41, .58, .47},
-	InputText:           hsl{0, 0, 0},
-	Highlight:           hsl{5, .77, .55},
-	HighlightText:       hsl{0, 0, 0},
-	Danger:              hsl{5, .77, .55},
-	ScrollbarForeground: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
-	ScrollbarHover:      hsl{12, .38, .26},  // hsl(12, 38%, 26%)
-
-	Layer1: hsl{160, .27, .05},
-	Layer2: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
-	Layer3: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
-	Layer4: hsl{161, .32, .15},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var skeuosPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{60, .06, .93},  // hsl(60, 6%, 93%)
 	Input:               hsl{226, .15, .23}, //hsl(226, 15%, 23%)
 	InputText:           hsl{60, .06, .93},
+	InputDisabledText:   hsl{0, 0, .5},
 	Highlight:           hsl{282, .65, .54}, // hsl(282, 65%, 54%)
 	HighlightText:       hsl{0, 0, 1},
 	Danger:              hsl{0, .79, .43},   // hsl(0, 79%, 43%)
 	ScrollbarForeground: hsl{220, .02, .62}, // hsl(220, 2%, 62%)
 	ScrollbarHover:      hsl{220, .02, .80},
 
-	Layer1: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
+	BackgroundColor: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
-	Layer2: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
+	BodyColor:       hsl{229, .14, .16}, // hsl(229, 14%, 16%)
-	Layer3: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
+	BodyText:        hsl{60, .06, .93},  // hsl(60, 6%, 93%)
-	Layer4: hsl{226, .14, .18}, // hsl(226, 14%, 18%)
+	PopoutColor:     hsl{225, .14, .17}, // hsl(225, 14%, 17%)
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var nordPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{210, .34, .63},
 	Input:               hsl{193, .43, .67},
 	InputText:           hsl{180, .19, .23},
+	InputDisabledText:   hsl{0, 0, .5},
 	Highlight:           hsl{145, .63, .42},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{354, .42, .56},
 	ScrollbarForeground: hsl{193, .43, .67},
 	ScrollbarHover:      hsl{193, .43, .76},
 
-	Layer1: hsl{220, .16, .22},
+	BackgroundColor: hsl{220, .16, .22},
-	Layer2: hsl{222, .16, .28},
+	BodyColor:       hsl{222, .16, .28},
-	Layer3: hsl{220, .17, .32},
+	BodyText:        hsl{210, .34, .63},
-	Layer4: hsl{220, .16, .36},
+	PopoutColor:     hsl{220, .17, .32},
 
 	Shadow: hsl{0, 0, 0},
 }
 
 var snowstormPixeldrainStyle = pixeldrainStyleSheet{
-	Text:                hsl{220, .16, .36}, // hsl(220, 16%, 36%)
 	Link:                hsl{92, .40, .40},
-	Input:               hsl{193, .43, .67}, // hsl(193, 43%, 67%)
+	Input:               hsl{219, .28, .88}, // hsl(219, 28%, 88%)
 	InputText:           hsl{180, .19, .23},
-	Highlight:           hsl{92, .28, .65}, // hsl(92, 28%, 65%)
+	InputDisabledText:   hsl{180, .05, .63},
+	Highlight:           hsl{179, .25, .65}, // hsl(92, 28%, 65%)
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{354, .42, .56},
 	ScrollbarForeground: hsl{193, .43, .67},
 	ScrollbarHover:      hsl{193, .43, .76},
 
+	BackgroundColor:   hsl{220, .16, .36}, // hsl(220, 16%, 36%)
+	BackgroundText:    hsl{219, .28, .88},
 	ParallaxSlider:    hsl{220, .17, .20}, // Layer 1 but darker
+	BodyColor:         hsl{218, .27, .94},
+	BodyText:          hsl{220, .16, .36}, // hsl(220, 16%, 36%)
 	Shaded:            RGBA{255, 255, 255, 0.4},
-	Layer1:            hsl{220, .17, .32}, // hsl(220, 17%, 32%)
-	Layer1Text:        hsl{219, .28, .88},
 	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
-	Layer2:            hsl{219, .28, .88}, // hsl(219, 28%, 88%)
+	PopoutColor:       hsl{218, .27, .92}, // hsl(218, 27%, 92%)
-	Layer3:            hsl{218, .27, .92}, // hsl(218, 27%, 92%)
-	Layer4:            hsl{218, .27, .94}, // hsl(218, 27%, 94%)
 
-	Shadow: hsl{0, .0, .50},
+	Shadow: hsl{220, .16, .36},
 	Light:  true,
 }
 
 var sweetPixeldrainStyle = pixeldrainStyleSheet{
-	Text:          hsl{223, .13, .79}, // hsl(223, 13%, 79%)
+	Input:             hsl{229, .25, .18}, // hsl(229, 25%, 14%)
-	Input:         hsl{214, .26, .20}, // hsl(214, 26%, 12%)
+	InputText:         hsl{223, .13, .79},
-	InputText:     hsl{223, .13, .79},
+	InputDisabledText: hsl{0, 0, .5},
-	Highlight:     hsl{296, .88, .44},
+	Highlight:         hsl{296, .88, .44},
-	HighlightText: hsl{0, 0, 0},
+	HighlightText:     hsl{0, 0, 0},
-	Danger:        hsl{356, 1, .64}, // hsl(356, 100%, 64%)
+	Danger:            hsl{356, 1, .64}, // hsl(356, 100%, 64%)
 
-	Layer1: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
+	BackgroundColor: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
-	Layer2: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
+	BodyColor:       hsl{228, .25, .12}, // hsl(228, 25%, 12%)
-	Layer3: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
+	BodyText:        hsl{223, .13, .79}, // hsl(223, 13%, 79%)
-	Layer4: hsl{229, .25, .18},
+	PopoutColor:     hsl{229, .25, .14}, // hsl(229, 25%, 14%)
 
 	Shadow: hsl{0, 0, 0},
 }