Add Clear and Dark themes from BunkerChan

Also adjust some other theme properties
resolves #43

html/css/bunkerchan.css

@@ -1 +1 @@
-div.section-title-block{background:#151515;border:1px solid #b0790a;border-radius:5px 5px 0px 0px}div.front-intro{border-radius:0px !important;border-width:1px !important}div.section-body{border-width:0px 1px 1px 1px;border-style:solid;border-color:#117743;border-radius:0px 0px 5px 5px;background:#282a2e}select#changepage,table#postbox-static input,table#postbox-static select,table#postbox-static textarea,div#report-delbox input,div#report-delbox select,div#report-delbox textarea{background:#282a2e !important;border:1px double #07371f;color:#acacac}div.reply,th.postblock{background:#282a2e;border:1px solid #117743;border-radius:5px}table#postbox-static input,table#postbox-static select,table#postbox-static textarea,div#report-delbox input,div#report-delbox select,div#report-delbox textarea{border-radius:5px}table#postbox-static button,table#postbox-static input[type=submit],div#report-delbox button,div#report-delbox input[type=submit]{background:#16171a}body{background:#1d1f21;color:#acacac;font-family:monospace,sans-serif;font-size:70%}header{color:#663e11}hr{color:#117743}a,a:visited{color:#b0790a;text-decoration:none}div#staff,div.thread-ddown-menu{background:#151515;border:1px solid #b0790a}div#topbar,div#topbar a,div#topbar a:visited div#threadlinks-top{background:#151515;border-bottom:1px solid #b0790a}
+div.section-title-block{background:#151515;border:1px solid #b0790a;border-radius:5px 5px 0px 0px}div.front-intro{border-radius:0px !important;border-width:1px !important}div.section-body{border-width:0px 1px 1px 1px;border-style:solid;border-color:#117743;border-radius:0px 0px 5px 5px;background:#282a2e}select#changepage,table#postbox-static input,table#postbox-static select,table#postbox-static textarea,table#postbox-static input[type=file]::file-selector-button,table#postbox-static input[type=file]::-webkit-file-upload-button,div#report-delbox input,div#report-delbox select,div#report-delbox textarea,div#report-delbox input[type=file]::file-selector-button,div#report-delbox input[type=file]::-webkit-file-upload-button{background:#282a2e !important;border:1px double #07371f;color:#acacac}div.reply,th.postblock,div.postprev,div.inlinepostprev{background:#282a2e;border:1px solid #117743;border-radius:5px}table#postbox-static input,table#postbox-static select,table#postbox-static textarea,table#postbox-static input[type=file]::file-selector-button,table#postbox-static input[type=file]::-webkit-file-upload-button,div#report-delbox input,div#report-delbox select,div#report-delbox textarea,div#report-delbox input[type=file]::file-selector-button,div#report-delbox input[type=file]::-webkit-file-upload-button{border-radius:5px}table#postbox-static button,table#postbox-static input[type=submit],div#report-delbox button,div#report-delbox input[type=submit]{background:#16171a}body{background:#1d1f21;color:#acacac;font-family:monospace,sans-serif;font-size:70%}header{color:#663e11}hr{color:#117743}a,a:visited{color:#b0790a;text-decoration:none}div#staff,div.thread-ddown-menu{background:#151515;border:1px solid #b0790a}div#topbar,div#topbar a,div#topbar a:visited div#threadlinks-top{background:#151515;border-bottom:1px solid #b0790a}table#pages,table#pages *{border:none !important}

html/css/burichan.css

@@ -1 +1 @@
-h1#board-title{font-family:serif !important;font-size:24pt;color:#af0a0f}.postblock{background:#98e}div.file-info{font-size:12px;font-family:sans-serif}.postername{font-size:12px;font-family:serif;color:#117743;font-weight:800}.reply,.thread-ddown-menu{background:#d6daf0}.thread-ddown-menu{border:1px solid #9295a4}#site-title{font-family:sans-serif;padding-top:88px}#site-slogan{font-size:9pt;font-style:italic}.tab{background-color:#dfdffe;border:1px solid #9295a4}#current-tab{margin-top:16px;border-bottom:0px}#current-tab,div.section-title-block{background-color:#bfc6e7}.loginbox input{height:20%}.manage-header{background-color:#eef2ff;border-radius:8px}body{font:sans-serif 12pt;background:#eef2ff;margin:8px}a,a:visited{color:#34345c;text-decoration:none}h1{margin:0;text-align:center}h2{margin:0px 0px 0px 0px;font-size:140%}h2 a{text-decoration:none;color:#550}h3{margin:0px;text-align:center;font-size:medium}h1,h2{font-family:Verdana,Tahoma,sans-serif}h1,h2,h3{font-weight:bold;color:#333}div#topbar{-moz-box-shadow:3px 3px 5px 6px #555;-ms-box-shadow:3px 3px 5px 6px #555;-webkit-box-shadow:3px 3px 5px 6px #555;box-shadow:3px 3px 5px 6px #555;height:30px}div#topbar,.topbar-item,.topbar-item:visited,.dropdown-button,.dropdown-menu,.dropdown-menu a{background-color:#000a89;color:#eef2ff !important}div#footer{font-size:8pt}
+h1#board-title{font-family:serif !important;font-size:24pt;color:#af0a0f}.postblock{background:#98e}div.file-info{font-size:12px;font-family:sans-serif}span.postername{font-size:12px;font-family:serif;color:#117743;font-weight:800}div.reply,div.thread-ddown-menu,div.postprev,div.inlinepostprev{background:#d6daf0}div.thread-ddown-menu,div.postprev,div.inlinepostprev{border:1px solid #9295a4}#site-title{font-family:sans-serif;padding-top:88px}#site-slogan{font-size:9pt;font-style:italic}.tab{background-color:#dfdffe;border:1px solid #9295a4}#current-tab{margin-top:16px;border-bottom:0px}#current-tab,div.section-title-block{background-color:#bfc6e7}.loginbox input{height:20%}.manage-header{background-color:#eef2ff;border-radius:8px}body{font:sans-serif 12pt;background:#eef2ff;margin:8px}a,a:visited{color:#34345c;text-decoration:none}h1{margin:0;text-align:center}h2{margin:0px 0px 0px 0px;font-size:140%}h2 a{text-decoration:none;color:#550}h3{margin:0px;text-align:center;font-size:medium}h1,h2{font-family:Verdana,Tahoma,sans-serif}h1,h2,h3{font-weight:bold;color:#333}div#topbar{-moz-box-shadow:3px 3px 5px 6px #555;-ms-box-shadow:3px 3px 5px 6px #555;-webkit-box-shadow:3px 3px 5px 6px #555;box-shadow:3px 3px 5px 6px #555;height:30px}div#topbar,.topbar-item,.topbar-item:visited,.dropdown-button,.dropdown-menu,.dropdown-menu a{background-color:#000a89;color:#eef2ff !important}div#footer{font-size:8pt}

html/css/clear.css

@@ -0,0 +1 @@
+body{background-color:#ccc;font-family:monospace,sans-serif;font-size:80%}div#topbar{background:#acacac;border-bottom:1px solid #b0790a}a{color:#a00;text-decoration:none}a:hover{text-shadow:0px 0px 5px #117743}header{color:#663e11}hr{border:none;border-top:1px solid #117743;height:0}input,select,textarea{border:1px double #07371f;border-radius:5px;background:#ddd;color:#000}input:active,select:active,textarea:active{box-shadow:0px 0px 5px #117743}input[type=button],input[type=submit],input[type=file]::file-selector-button,input[type=file]::-webkit-file-upload-button{background:#a7a7a7;border:3px double #07371f;border-radius:5px;color:#000}div.reply,div.section-block,th.postblock,div.thread-ddown-menu,div.postprev,div.inlinepostprev{background:#ddd;border:1px solid #117743;border-radius:5px;text-align:left}span.subject{font-weight:bold;color:#34ed3a}table#pages,table#pages *{border:none !important}div.section-title-block{background:#a7a7a7;border-bottom:1px solid #117743}

html/css/dark.css

@@ -0,0 +1 @@
+body{background-color:#1e1e1e;font-family:sans-serif;color:#999;font-size:80%}a{text-decoration:none;color:#ccc}div#topbar{background-color:#666;border-bottom:1px solid #999}div#topbar a{text-shadow:#000 1px 1px 1px,#000 -1px -1px 1px,#000 -1px 1px 1px,#000 1px -1px 1px}header{color:#32dd72}input:not(div#qrbuttons input),textarea{background-color:#333;border:1px solid #666;color:#ccc}th.postblock{background-color:#282a2e;border:1px solid #888;border-radius:5px;text-align:left}div.reply,div.thread-ddown-menu,div.postprev,div.inlinepostprev{background-color:#333;border:1px solid #555;border-radius:5px}span.postername{color:#32dd72;font-weight:bold}span.postername a{text-decoration:underline}span.tripcode{color:#32dd72}span.subject{color:#465}table#pages,table#pages *{border:none !important}

html/css/photon.css

@@ -1 +1 @@
-div.reply{background-color:#ddd;border:1px solid #ccc;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}span.subject{color:#024}div.section-title-block{background-color:#ccc}div.section-block{-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:#fcfcfc;border:1px solid #d7d7d7}body{background-color:#eee;font:15px "Trebuchet MS",Trebuchet,sans-serif}a{text-decoration:none}div#topbar,div.dropdown-menu{background-color:#000;opacity:.8;padding:2px}div#topbar{-moz-box-shadow:0px 2px 2px 2px #292929;-ms-box-shadow:0px 2px 2px 2px #292929;-webkit-box-shadow:0px 2px 2px 2px #292929;box-shadow:0px 2px 2px 2px #292929}div.dropdown-menu{color:#fff}header,div#top-pane,a{color:#f60}span#site-title,div#board-title{font-weight:800}
+div.reply,div.thread-ddown-menu,div.postprev,div.inlinepostprev,th.postblock{background-color:#ddd;border:1px solid #ccc;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}span.subject{color:#024}div.section-title-block{background-color:#ccc}div.section-block{-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:#fcfcfc;border:1px solid #d7d7d7}body{background-color:#eee;font:15px "Trebuchet MS",Trebuchet,sans-serif}a{text-decoration:none}div#topbar,div.dropdown-menu{background-color:#000;opacity:.8;padding:2px}div#topbar{-moz-box-shadow:0px 2px 2px 2px #292929;-ms-box-shadow:0px 2px 2px 2px #292929;-webkit-box-shadow:0px 2px 2px 2px #292929;box-shadow:0px 2px 2px 2px #292929}div.dropdown-menu{color:#fff}header,div#top-pane,a{color:#f60}span#site-title,div#board-title{font-weight:800}

sample-configs/gochan.example.json

@@ -35,6 +35,8 @@
 		{ "Name": "Pipes", "Filename": "pipes.css" },
 		{ "Name": "BunkerChan", "Filename": "bunkerchan.css" },
 		{ "Name": "Burichan", "Filename": "burichan.css" },
+		{ "Name": "Clear", "Filename": "clear.css" },
+		{ "Name": "Dark", "Filename": "dark.css" },
 		{ "Name": "Photon", "Filename": "photon.css" },
 		{ "Name": "Yotsuba", "Filename": "yotsuba.css" },
 		{ "Name": "Yotsuba B", "Filename": "yotsubab.css" }

sass/README.md

@@ -1,7 +1,7 @@
 ## Theme development using Sass
 If you want, you can install [Sass](https://sass-lang.com/install) to streamline writing CSS stylesheets. It requires node.js as a dependency so if you don't want to install it and Sass's dependencies (and its dependencies' dependencies,...) the CSS files generated by Sass are provided.
 
-To use sass, run `sass --style expanded --no-source-map  sass:html/css`.
+To use sass, run `sass --style expanded --no-source-map sass:html/css`.
 To have sass watch the input directory for changes as you edit and save the files, run `sass --style expanded --no-source-map --watch sass:html/css`
 
 In either case, `--style expanded` is optional. If you replace expanded with compressed, it will minify the generated CSS files. Run `sass -h` for more info about it.
@@ -9,4 +9,4 @@ In either case, `--style expanded` is optional. If you replace expanded with com
 If you are upgading from gochan 2.2, delete your html/css directory unless you have made themes that you want to keep. Then rebuild the pages. (/manage?action=rebuildall)
 
 ## Attribution
-The BunkerChan theme comes from the imageboard BunkerChan (as the name would imply). Burichan is based on the theme with the same name from Kusaba X. Photon comes from nol.ch (I think?) that as far as I know no longer exists. Pipes was created by a user (Mbyte?) on Lunachan (defunct). Yotsuba and Yotsuba B are based on the themes with the same names from 4chan.
+The BunkerChan, Clear, and Dark themes come from the imageboard BunkerChan. Burichan is based on the theme with the same name from Kusaba X. Photon comes from nol.ch (I think?) that as far as I know no longer exists. Pipes was created by a user (Mbyte?) on Lunachan (defunct). Yotsuba and Yotsuba B are based on the themes with the same names from 4chan.

sass/bunkerchan.scss

@@ -35,3 +35,7 @@ div#threadlinks-top {
 	background: $topbarbg;
 	border-bottom: 1px solid $topborder;
 }
+
+table#pages, table#pages * {
+	border: none!important;
+}

sass/bunkerchan/_img.scss

@@ -7,14 +7,21 @@
 }
 
 
-div.reply, th.postblock {
+div.reply,
+th.postblock,
+div.postprev,
+div.inlinepostprev {
 	background: #282A2E;
 	border: 1px solid #117743;
 	border-radius: 5px;
 }
 
 table#postbox-static, div#report-delbox {
-	input, select, textarea {
+	input,
+	select,
+	textarea,
+	input[type="file"]::file-selector-button,
+	input[type="file"]::-webkit-file-upload-button {
 		border-radius: 5px;
 		@extend %formstyle;
 	}

sass/burichan/_img.scss

@@ -1,9 +1,10 @@
 @import 'colors';
+@import '../global/colors';
 
 h1#board-title {
 	font-family: serif!important;
 	font-size: 24pt;
-	color:#AF0A0F;
+	color: $headercol;
 }
 
 .postblock {
@@ -15,17 +16,22 @@ div.file-info {
 	font-family:sans-serif;
 }
 
-.postername {
+span.postername {
 	font-size:12px;
 	font-family:serif;
-	color:#117743;
+	color: $namecol;
 	font-weight:800;
 }
 
-.reply, .thread-ddown-menu {
+div.reply,
+div.thread-ddown-menu,
+div.postprev,
+div.inlinepostprev {
 	background:#D6DAF0;
 }
 
-.thread-ddown-menu {
+div.thread-ddown-menu,
+div.postprev,
+div.inlinepostprev {
 	border: 1px solid $bordercol;
 }

sass/clear.scss

@@ -0,0 +1,77 @@
+@import 'clear/colors';
+
+body {
+	background-color: $bgcol;
+	font-family: monospace, sans-serif;
+	font-size: 80%;
+}
+
+div#topbar {
+	background: $topbarbg;
+	border-bottom: 1px solid $topbarborder;
+}
+
+a {
+	color: $linkcol;
+	text-decoration: none;
+	&:hover {
+		text-shadow: 0px 0px 5px $hrcol;
+	}
+}
+
+header {
+	color: $headercol;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid $hrcol;
+	height: 0;
+}
+
+input, select, textarea {
+	border: 1px double $inputshadow;
+	border-radius: 5px;
+	background: $inputcol;
+	color: #000;
+}
+
+input:active, select:active, textarea:active {
+	box-shadow: 0px 0px 5px $replyborder;
+}
+
+input[type="button"],
+input[type="submit"],
+input[type="file"]::file-selector-button,
+input[type="file"]::-webkit-file-upload-button {
+	background: #A7A7A7;
+	border: 3px double $inputshadow;
+	border-radius: 5px;
+	color: #000;
+}
+
+div.reply,
+div.section-block,
+th.postblock,
+div.thread-ddown-menu,
+div.postprev,
+div.inlinepostprev {
+	background: $inputcol;
+	border: 1px solid $replyborder;
+	border-radius: 5px;
+	text-align: left;
+}
+
+span.subject {
+	font-weight: bold;
+	color: $subjectcol;
+}
+
+table#pages, table#pages * {
+	border: none!important;
+}
+
+div.section-title-block {
+	background: #A7A7A7;
+	border-bottom: 1px solid $replyborder;
+}

sass/clear/_colors.scss

@@ -0,0 +1,10 @@
+$bgcol: #CCC;
+$topbarbg: #ACACAC;
+$topbarborder: #B0790A;
+$headercol: #663E11;
+$hrcol: #117743;
+$inputcol: #DDD;
+$inputshadow: #07371F;
+$replyborder: #117743;
+$subjectcol: #34ED3A;
+$linkcol: #A00;

sass/dark.scss

@@ -0,0 +1,69 @@
+@import 'dark/colors';
+
+body {
+	background-color: $bgcol;
+	font-family: $font-family;
+	color: $color;
+	font-size: 80%;
+}
+
+a {
+	text-decoration: none;
+	color: $linkcol;
+}
+
+div#topbar {
+	background-color: $topbarbg;
+	border-bottom: 1px solid $color;
+	a {
+		text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px;
+	}
+}
+
+header {
+	color: $headercol;
+}
+
+// input:not([type=submit]):not([type=button]),
+input:not(div#qrbuttons input),
+textarea {
+	background-color: $inputbg;
+	border: 1px solid $topbarbg;
+	color: $linkcol;
+}
+
+th.postblock {
+	background-color: $blockcol;
+	border: 1px solid $blockborder;
+	border-radius: 5px;
+	text-align: left;
+}
+
+div.reply,
+div.thread-ddown-menu,
+div.postprev,
+div.inlinepostprev {
+	background-color: $inputbg;
+	border: 1px solid $replyborder;
+	border-radius: 5px;
+}
+
+span.postername {
+	color: $headercol;
+	font-weight: bold;
+	a {
+		text-decoration: underline;
+	}
+}
+
+span.tripcode {
+	color: $headercol;
+}
+
+span.subject {
+	color: $subjectcol;
+}
+
+table#pages, table#pages * {
+	border: none!important;
+}

sass/dark/_colors.scss

@@ -0,0 +1,11 @@
+$bgcol: #1E1E1E;
+$color: #999;
+$font-family: sans-serif;
+$topbarbg: #666;
+$headercol: #32DD72;
+$linkcol: #CCC;
+$inputbg: #333;
+$blockborder: #888;
+$blockcol: #282A2E;
+$replyborder: #555;
+$subjectcol: #446655;

sass/global/_colors.scss

@@ -0,0 +1,2 @@
+$namecol: #117743;
+$headercol: #AF0A0F;

sass/photon/_img.scss

@@ -1,12 +1,17 @@
 @import '../util';
 @import 'colors';
 
-div.reply {
+div.reply,
+div.thread-ddown-menu,
+div.postprev,
+div.inlinepostprev,
+th.postblock {
 	background-color: $replycol;
 	border: 1px solid $replyborder;
 	@include border-radius(5px);
 }
 
+
 span.subject {
 	color: $subjectcol;
 }

sass/yotsuba.scss

@@ -1,3 +1,4 @@
+@import 'global/colors';
 @import 'yotsuba/colors';
 @import 'yotsubacommon';
 
@@ -7,7 +8,7 @@
 	maroon, /* $bodycol */
 	$topbarbg,
 	$topbarborder,
-	$headerfontcol,
+	$headercol,
 	$postblockbg,
 	$postblockborder,
 	$postblockborder, /* $sectiontitlecol */
@@ -16,7 +17,7 @@
 	maroon, /* $linkcol */
 	#D9BfB7, /* $hrcol */
 	#CC1105, /* $subjectcol */
-	$namecolor,
+	$namecol,
 	$replybg,
 	navy /* $postlinkcol */
 );

sass/yotsuba/_colors.scss

@@ -1,5 +1,4 @@
 $bgcol: #FFE;
-$headerfontcol: #AF0A0F;
 $pagesborder: #F0E0D6;
 $replybg: #F0E0D6;
 $topbarbg: #FED6Af;
@@ -7,4 +6,3 @@ $topbarborder: #FEC68F;
 $borderbotright: #D9BFB7;
 $postblockbg: #EA8;
 $postblockborder: #800;
-$namecolor: #117743;

sass/yotsubab.scss

@@ -1,3 +1,4 @@
+@import 'global/colors';
 @import 'yotsubab/colors';
 @import 'yotsubacommon';
 
@@ -7,7 +8,7 @@
 	#000, /* $bodycol */
 	#D6DAF0, /* $topbarbg */
 	$topbarborder,
-	$headerfontcol,
+	$headercol,
 	$postblockbg,
 	$postblockborder,
 	#000, /* $sectiontitlecol */
@@ -16,7 +17,7 @@
 	#34345C, /* $linkcol */
 	#B7C5D9, /* $hrcol */
 	#0F0C5D, /* $subjectcol */
-	$namecolor,
+	$namecol,
 	$replybg,
 	navy /* $postlinkcol */
 );

sass/yotsubab/_colors.scss

@@ -1,8 +1,6 @@
 $bgcol: #EEF2FF;
-$headerfontcol: #AF0A0F;
 $postblockbg: #98E;
 $postblockborder: #000;
 $topbarborder: #89A;
 $borderbotright: #B7C5D9;
 $replybg: #D6DAF0;
-$namecolor: #117743;