Remove duplicate shit from theme css files.

10 files changed, 238 insertions, 534 deletions

diff --git a/common.css b/common.css
index 41585eb..d9b6a99 100644
--- a/common.css
+++ b/common.css
@@ -11,22 +11,11 @@
 	font-variant-ligatures: none;
 }
 a{
-text-decoration:none;
-}
-a:link{
-color:#1194FF; 
-}
-a:visited{
-color:#20ACFF; 
-}
-a:hover{
-color:#3FBFFF; 
-}
-a:active{
-color:#CCCCFF; 
+	text-decoration:none;
 }
 div.comment{
-	border:1px solid #CCC;
+	border:1px solid;
+	border-color: var(--secondary-fg);
 	margin:1em;
 }
 div.author{
@@ -70,3 +59,68 @@ textarea{
 	outline:none !important;
 	background-color:rgba(0,0,0,0) !important;
 }
+body{
+	background-color: var(--principal-bg);
+	background-image: var(--bg-pattern);
+	background-repeat: repeat;
+	color: var(--principal-fg);
+}
+del{
+	text-decoration-color: var(--principal-fg);
+}
+#panel li a.active{
+	background-color: var(--list-active-bg);
+}
+#panel li a:hover:not(.active){
+	background-color: var(--list-highlighted-bg);
+}
+#panel,#footer{
+	background-color: var(--secondary-bg);
+	background-image: var(--bg-pattern);
+	background-repeat: repeat;
+}
+#content .block{
+	border: 1px solid;
+	border-color: var(--secondary-fg);
+}
+a.highlighted{color: var(--link-highlighted-fg) !important;}
+a:link{
+	color: var(--link-fg);
+}
+a:visited{
+	color: var(--link-visited-fg);
+}
+a:hover{
+	color: var(--link-hover-fg);
+}
+a:active{
+	color: var(--link-active-fg);
+}
+blockquote{
+	border: 1px solid;
+	border-color: var(--secondary-fg);
+}
+button,.fakebtn{
+	color: var(--interactive-fg);
+	background-color: var(--interactive-bg);
+}
+button:hover,.fakebtn:hover{
+	background-color: var(--interactive-hover-bg);
+}
+button:active,.fakebtn:active{
+	background-color: var(--interactive-active-bg);
+}
+button:disabled{
+	background-color: var(--interactive-disabled-bg);
+}
+input[type="text"]{
+	color: var(--principal-fg);
+	border-bottom-color: var(--interactive-bg);
+}
+textarea{
+	color: var(--principal-fg);
+	border-color: var(--interactive-bg);
+}
+.widgetbg{background-color: var(--widget-area-bg);}
+.sliderb1{background-color: var(--slider-empty-bg);}
+.sliderb2{background-color: var(--slider-filled-bg);}
diff --git a/index.shtml b/index.shtml
index 3ddaffe..8c80b7b 100644
--- a/index.shtml
+++ b/index.shtml
@@ -4,6 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#000000">
+<meta name="description" content="Chris Xiong's personal homepage">
+<meta name="author" content="Chris Xiong">
 <title>Chrisoft::Home</title>
 <link rel="icon" href="./favicon.png">
 <link rel="preload" href="/themes.svg" as="image">
diff --git a/theme0a.css b/theme0a.css
index 119d19d..c5bb30f 100644
--- a/theme0a.css
+++ b/theme0a.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #F9EFF6;
+:root{
+	--principal-bg: #F9EFF6;
+	--principal-fg: #000;
+	--secondary-bg: #EEE0E9;
+	--secondary-fg: #333;
+	--list-active-bg: #EEC0DD;
+	--list-highlighted-bg: #FCE;
+	--link-fg: #CF4AFF;
+	--link-visited-fg: #DA50FF;
+	--link-hover-fg: #DD40FF;
+	--link-active-fg: #EEAAFF;
+	--link-highlighted-fg: #EA0;
+	--interactive-bg: #C7B;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #D8C;
+	--interactive-active-bg: #E9D;
+	--interactive-disabled-bg: #999;
+	--widget-area-bg: rgba(204,204,204,0.6);
+	--slider-empty-bg: rgba(184,122,171,0.6);
+	--slider-filled-bg: #F0A0E0;
+	--bg-pattern: url("/pattern0a.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern0a.png");
-	background-repeat: repeat;
-	color: #000;
-}
-del{
-    text-decoration-color: #000;
-}
-#panel li a.active{
-background-color:#EEC0DD;
-}
-#panel li a:hover:not(.active){
-background-color:#FCE;
-}
-#panel,#footer{
-	background-color:#EEE0E9;
-	background-image: url("/pattern0a.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #333;
-}
-a.highlighted{color:#EA0 !important;}
-a:link{ 
-color:#CF4AFF; 
-}
-a:visited{ 
-color:#DA50FF; 
-}
-a:hover{ 
-color:#DD40FF; 
-}
-a:active{ 
-color:#EEAAFF; 
-}
-blockquote{
-border: 1px solid #333;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#C7B;
-}
-button:hover,.fakebtn:hover{
-	background-color:#D8C;
-}
-button:active,.fakebtn:active{
-	background-color:#E9D;
-}
-button:disabled{
-	background-color:#999;
-}
-input[type="text"]{
-	color:#000;
-	border-bottom-color:#C7B;
-}
-textarea{
-	color:#000;
-	border-color:#C7B;
-}
-.widgetbg{background-color:rgba(204,204,204,0.6);}
-.sliderb1{background-color:rgba(184,122,171,0.6);}
-.sliderb2{background-color:#F0A0E0;}
diff --git a/theme0b.css b/theme0b.css
index e820160..18c2c85 100644
--- a/theme0b.css
+++ b/theme0b.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #2F0933;
+:root{
+	--principal-bg: #2F0933;
+	--principal-fg: #FFF;
+	--secondary-bg: #440C48;
+	--secondary-fg: #738;
+	--list-active-bg: #849;
+	--list-highlighted-bg: #738;
+	--link-fg: #CF4AFF;
+	--link-visited-fg: #DA50FF;
+	--link-hover-fg: #DD40FF;
+	--link-active-fg: #EEAAFF;
+	--link-highlighted-fg: #FC0;
+	--interactive-bg: #746;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #958;
+	--interactive-active-bg: #A59;
+	--interactive-disabled-bg: #666;
+	--widget-area-bg: rgba(64,24,80,0.6);
+	--slider-empty-bg: rgba(163,108,152,0.6);
+	--slider-filled-bg: #C8B;
+	--bg-pattern: url("/pattern0b.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern0b.png");
-	background-repeat: repeat;
-	color: #FFF;
-}
-del{
-    text-decoration-color: #FFF;
-}
-#panel li a.active{
-background-color:#849;
-}
-#panel li a:hover:not(.active){
-background-color:#738;
-}
-#panel,#footer{
-	background-color:#440C48;
-	background-image: url("/pattern0b.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #738;
-}
-a.highlighted{color:#FC0 !important;}
-a:link{ 
-color:#CF4AFF; 
-}
-a:visited{ 
-color:#DA50FF; 
-}
-a:hover{ 
-color:#DD40FF; 
-}
-a:active{ 
-color:#EEAAFF; 
-}
-blockquote{
-border: 1px solid #738;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#746;
-}
-button:hover,.fakebtn:hover{
-	background-color:#958;
-}
-button:active,.fakebtn:active{
-	background-color:#A59;
-}
-button:disabled{
-	background-color:#666;
-}
-input[type="text"]{
-	color:#FFF;
-	border-bottom-color:#746;
-}
-textarea{
-	color:#FFF;
-	border-color:#746;
-}
-.widgetbg{background:rgba(64,24,80,0.6);}
-.sliderb1{background-color:rgba(163,108,152,0.6);}
-.sliderb2{background-color:#C8B;}
diff --git a/theme1a.css b/theme1a.css
index 3b41360..927b5f9 100644
--- a/theme1a.css
+++ b/theme1a.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #FFF;
+:root{
+	--principal-bg: #FFF;
+	--principal-fg: #000;
+	--secondary-bg: #EEE;
+	--secondary-fg: #333;
+	--list-active-bg: #CEC;
+	--list-highlighted-bg: #DFD;
+	--link-fg: #1194FF;
+	--link-visited-fg: #20ACFF;
+	--link-hover-fg: #3FBFFF;
+	--link-active-fg: #CCCCFF;
+	--link-highlighted-fg: #EA0;
+	--interactive-bg: #4A4;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #5B5;
+	--interactive-active-bg: #6C6;
+	--interactive-disabled-bg: #999;
+	--widget-area-bg: rgba(204,204,204,0.6);
+	--slider-empty-bg: rgba(64,240,96,0.6);
+	--slider-filled-bg: #10C048;
+	--bg-pattern: url("/pattern1a.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern1a.png");
-	background-repeat: repeat;
-	color: #000;
-}
-del{
-    text-decoration-color: #000;
-}
-#panel li a.active{
-background-color:#CEC;
-}
-#panel li a:hover:not(.active){
-background-color:#DFD;
-}
-#panel,#footer{
-	background-color:#EEE;
-	background-image: url("/pattern1a.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #333;
-}
-a.highlighted{color:#EA0 !important;}
-a:link{ 
-color:#1194FF; 
-}
-a:visited{ 
-color:#20ACFF; 
-}
-a:hover{ 
-color:#3FBFFF; 
-}
-a:active{ 
-color:#CCCCFF; 
-}
-blockquote{
-border: 1px solid #333;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#4A4;
-}
-button:hover,.fakebtn:hover{
-	background-color:#5B5;
-}
-button:active,.fakebtn:active{
-	background-color:#6C6;
-}
-button:disabled{
-	background-color:#999;
-}
-input[type="text"]{
-	color:#000;
-	border-bottom-color:#4A4;
-}
-textarea{
-	color:#000;
-	border-color:#4A4;
-}
-.widgetbg{background-color:rgba(204,204,204,0.6);}
-.sliderb1{background-color:rgba(64,240,96,0.6);}
-.sliderb2{background-color:#10C048;}
diff --git a/theme1b.css b/theme1b.css
index 6da0da2..2374774 100644
--- a/theme1b.css
+++ b/theme1b.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #090933;
+:root{
+	--principal-bg: #090933;
+	--principal-fg: #FFF;
+	--secondary-bg: #116;
+	--secondary-fg: #338;
+	--list-active-bg: #449;
+	--list-highlighted-bg: #338;
+	--link-fg: #1194FF;
+	--link-visited-fg: #20ACFF;
+	--link-hover-fg: #3FBFFF;
+	--link-active-fg: #CCCCFF;
+	--link-highlighted-fg: #FC0;
+	--interactive-bg: #161;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #272;
+	--interactive-active-bg: #383;
+	--interactive-disabled-bg: #666;
+	--widget-area-bg: rgba(32,32,96,0.6);
+	--slider-empty-bg: rgba(49,184,73,0.6);
+	--slider-filled-bg: #0EA33D;
+	--bg-pattern: url("/pattern1b.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern1b.png");
-	background-repeat: repeat;
-	color: #FFF;
-}
-del{
-    text-decoration-color: #FFF;
-}
-#panel li a.active{
-background-color:#449;
-}
-#panel li a:hover:not(.active){
-background-color:#338;
-}
-#panel,#footer{
-	background-color:#116;
-	background-image: url("/pattern1b.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #338;
-}
-a.highlighted{color:#FC0 !important;}
-a:link{ 
-color:#1194FF; 
-}
-a:visited{ 
-color:#20ACFF; 
-}
-a:hover{ 
-color:#3FBFFF; 
-}
-a:active{ 
-color:#CCCCFF; 
-}
-blockquote{
-border: 1px solid #338;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#161;
-}
-button:hover,.fakebtn:hover{
-	background-color:#272;
-}
-button:active,.fakebtn:active{
-	background-color:#383;
-}
-button:disabled{
-	background-color:#666;
-}
-input[type="text"]{
-	color:#FFF;
-	border-bottom-color:#161;
-}
-textarea{
-	color:#FFF;
-	border-color:#161;
-}
-.widgetbg{background:rgba(32,32,96,0.6);}
-.sliderb1{background-color:rgba(49,184,73,0.6);}
-.sliderb2{background-color:#0EA33D;}
diff --git a/theme2a.css b/theme2a.css
index 18da739..15bdabd 100644
--- a/theme2a.css
+++ b/theme2a.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #F9F2EF;
+:root{
+	--principal-bg: #F9F2EF;
+	--principal-fg: #000;
+	--secondary-bg: #EEE5E0;
+	--secondary-fg: #333;
+	--list-active-bg: #EED0C0;
+	--list-highlighted-bg: #FDC;
+	--link-fg: #C89738;
+	--link-visited-fg: #B89433;
+	--link-hover-fg: #D6B637;
+	--link-active-fg: #D6C589;
+	--link-highlighted-fg: #A0E;
+	--interactive-bg: #CA7;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #DB8;
+	--interactive-active-bg: #EC9;
+	--interactive-disabled-bg: #999;
+	--widget-area-bg: rgba(204,204,204,0.6);
+	--slider-empty-bg: rgba(184,152,110,0.6);
+	--slider-filled-bg: #DA6;
+	--bg-pattern: url("/pattern2a.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern2a.png");
-	background-repeat: repeat;
-	color: #000;
-}
-del{
-    text-decoration-color: #000;
-}
-#panel li a.active{
-background-color:#EED0C0;
-}
-#panel li a:hover:not(.active){
-background-color:#FDC;
-}
-#panel,#footer{
-	background-color:#EEE5E0;
-	background-image: url("/pattern2a.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #333;
-}
-a.highlighted{color:#A0E !important;}
-a:link{ 
-color:#C89738; 
-}
-a:visited{ 
-color:#B89433; 
-}
-a:hover{ 
-color:#D6B637;
-}
-a:active{ 
-color:#D6C589; 
-}
-blockquote{
-border: 1px solid #333;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#CA7;
-}
-button:hover,.fakebtn:hover{
-	background-color:#DB8;
-}
-button:active,.fakebtn:active{
-	background-color:#EC9;
-}
-button:disabled{
-	background-color:#999;
-}
-input[type="text"]{
-	color:#000;
-	border-bottom-color:#CA7;
-}
-textarea{
-	color:#000;
-	border-color:#CA7;
-}
-.widgetbg{background-color:rgba(204,204,204,0.6);}
-.sliderb1{background-color:rgba(184,152,110,0.6);}
-.sliderb2{background-color:#DA6;}
diff --git a/theme2b.css b/theme2b.css
index eae4c55..6208c0f 100644
--- a/theme2b.css
+++ b/theme2b.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #1F1205;
+:root{
+	--principal-bg: #1F1205;
+	--principal-fg: #FFF;
+	--secondary-bg: #291806;
+	--secondary-fg: #873;
+	--list-active-bg: #974;
+	--list-highlighted-bg: #863;
+	--link-fg: #FF924A;
+	--link-visited-fg: #FF8A50;
+	--link-hover-fg: #FFA040;
+	--link-active-fg: #FFD7AA;
+	--link-highlighted-fg: #A1F;
+	--interactive-bg: #963;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #A74;
+	--interactive-active-bg: #B85;
+	--interactive-disabled-bg: #666;
+	--widget-area-bg: rgba(80,64,24,0.6);
+	--slider-empty-bg: rgba(163,133,98,0.6);
+	--slider-filled-bg: #C96;
+	--bg-pattern: url("/pattern2b.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern2b.png");
-	background-repeat: repeat;
-	color: #FFF;
-}
-del{
-    text-decoration-color: #FFF;
-}
-#panel li a.active{
-background-color:#974;
-}
-#panel li a:hover:not(.active){
-background-color:#863;
-}
-#panel,#footer{
-	background-color:#291806;
-	background-image: url("/pattern2b.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #873;
-}
-a.highlighted{color:#A1F !important;}
-a:link{ 
-color:#FF924A; 
-}
-a:visited{ 
-color:#FF8A50; 
-}
-a:hover{ 
-color:#FFA040; 
-}
-a:active{ 
-color:#FFD7AA; 
-}
-blockquote{
-border: 1px solid #863;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#963;
-}
-button:hover,.fakebtn:hover{
-	background-color:#A74;
-}
-button:active,.fakebtn:active{
-	background-color:#B85;
-}
-button:disabled{
-	background-color:#666;
-}
-input[type="text"]{
-	color:#FFF;
-	border-bottom-color:#863;
-}
-textarea{
-	color:#FFF;
-	border-color:#863;
-}
-.widgetbg{background:rgba(80,64,24,0.6);}
-.sliderb1{background-color:rgba(163,133,98,0.6);}
-.sliderb2{background-color:#C96;}
diff --git a/theme3a.css b/theme3a.css
index 927dc3e..34a0610 100644
--- a/theme3a.css
+++ b/theme3a.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #EFF4F9;
+:root{
+	--principal-bg: #EFF4F9;
+	--principal-fg: #000;
+	--secondary-bg: #E0E7EE;
+	--secondary-fg: #333;
+	--list-active-bg: #C0D7EE;
+	--list-highlighted-bg: #CEF;
+	--link-fg: #3898C8;
+	--link-visited-fg: #338CB8;
+	--link-hover-fg: #37A1D6;
+	--link-active-fg: #89BCD6;
+	--link-highlighted-fg: #A0E;
+	--interactive-bg: #6BD;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #6CF;
+	--interactive-active-bg: #9DF;
+	--interactive-disabled-bg: #999;
+	--widget-area-bg: rgba(204,204,204,0.6);
+	--slider-empty-bg: rgba(153,221,255,0.6);
+	--slider-filled-bg: #6BD;
+	--bg-pattern: url("/pattern3a.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern3a.png");
-	background-repeat: repeat;
-	color: #000;
-}
-del{
-    text-decoration-color: #000;
-}
-#panel li a.active{
-background-color:#C0D7EE;
-}
-#panel li a:hover:not(.active){
-background-color:#CEF;
-}
-#panel,#footer{
-	background-color:#E0E7EE;
-	background-image: url("/pattern3a.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #333;
-}
-a.highlighted{color:#A0E !important;}
-a:link{ 
-color:#3898C8; 
-}
-a:visited{ 
-color:#338CB8; 
-}
-a:hover{ 
-color:#37A1D6;
-}
-a:active{ 
-color:#89BCD6; 
-}
-blockquote{
-border: 1px solid #333;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#6BD;
-}
-button:hover,.fakebtn:hover{
-	background-color:#6CF;
-}
-button:active,.fakebtn:active{
-	background-color:#9DF;
-}
-button:disabled{
-	background-color:#999;
-}
-input[type="text"]{
-	color:#000;
-	border-bottom-color:#6BD;
-}
-textarea{
-	color:#000;
-	border-color:#6BD;
-}
-.widgetbg{background-color:rgba(200,204,204,0.6);}
-.sliderb1{background-color:rgba(153,221,255,0.6);}
-.sliderb2{background-color:#6BD;}
diff --git a/theme3b.css b/theme3b.css
index 2f7ac36..4ef8f12 100644
--- a/theme3b.css
+++ b/theme3b.css
@@ -1,66 +1,22 @@
-:root {
-	--bg-primary: #051933;
+:root{
+	--principal-bg: #051933;
+	--principal-fg: #FFF;
+	--secondary-bg: #082040;
+	--secondary-fg: #358;
+	--list-active-bg: #469;
+	--list-highlighted-bg: #358;
+	--link-fg: #4A92FF;
+	--link-visited-fg: #508AFF;
+	--link-hover-fg: #40A0FF;
+	--link-active-fg: #AAD7FF;
+	--link-highlighted-fg: #F1C;
+	--interactive-bg: #469;
+	--interactive-fg: #FFF;
+	--interactive-hover-bg: #57A;
+	--interactive-active-bg: #68B;
+	--interactive-disabled-bg: #666;
+	--widget-area-bg: rgba(24,48,80,0.6);
+	--slider-empty-bg: rgba(85,119,170,0.6);
+	--slider-filled-bg: #469;
+	--bg-pattern: url("/pattern3b.png");
 }
-body{
-	background-color: var(--bg-primary);
-	background-image: url("/pattern3b.png");
-	background-repeat: repeat;
-	color: #FFF;
-}
-del{
-    text-decoration-color: #FFF;
-}
-#panel li a.active{
-background-color:#469;
-}
-#panel li a:hover:not(.active){
-background-color:#358;
-}
-#panel,#footer{
-	background-color:#082040;
-	background-image: url("/pattern3b.png");
-	background-repeat: repeat;
-}
-#content .block{
-border: 1px solid #358;
-}
-a.highlighted{color:#F1C !important;}
-a:link{ 
-color:#4A92FF; 
-}
-a:visited{ 
-color:#508AFF; 
-}
-a:hover{ 
-color:#40A0FF; 
-}
-a:active{ 
-color:#AAD7FF; 
-}
-blockquote{
-border: 1px solid #358;
-}
-button,.fakebtn{
-	color:white;
-	background-color:#469;
-}
-button:hover,.fakebtn:hover{
-	background-color:#57A;
-}
-button:active,.fakebtn:active{
-	background-color:#68B;
-}
-button:disabled{
-	background-color:#666;
-}
-input[type="text"]{
-	color:#FFF;
-	border-bottom-color:#469;
-}
-textarea{
-	color:#FFF;
-	border-color:#469;
-}
-.widgetbg{background:rgba(24,48,80,0.6);}
-.sliderb1{background-color:rgba(85,119,170,0.6);}
-.sliderb2{background-color:#469;}