Add Clear and Dark themes from BunkerChan

Also adjust some other theme properties
resolves #43

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,12 +1,12 @@
 ## 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.
 
 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,10 +1,8 @@
 $bgcol: #FFE;
-$headerfontcol: #AF0A0F;
 $pagesborder: #F0E0D6;
 $replybg: #F0E0D6;
 $topbarbg: #FED6Af;
 $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;