Merge branch 'accent-color' into 'feature/301-input-styling-accent-color'

Reorganize <input> styling, use accent-color property on <input> elements

See merge request fatchan/jschan!301

gulp/res/css/style.css

@@ -1185,15 +1185,19 @@ input[type="button"][disabled] {
 	opacity: 0.5;
 }
 
-input[type="button"], input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select {
+input, textarea, select {
+	accent-color: var(--accent-color);
 	border: 1px solid var(--input-borders);
+	border-radius: 0px;
 	background: var(--input-background);
 	color: var(--input-color);
-	font-size: inherit;
 	font-family: arial, helvetica, sans-serif;
+	font-size: inherit;
+}
+
+input[type="button"], input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select {
 	margin: 0;
 	flex-grow: 1;
-	border-radius: 0px;
 }
 
 .nogrow * {

gulp/res/css/themes/56chan.css

@@ -11,6 +11,7 @@
 	--subject-color: #8C489F;
 	--darken: #00000010;
 	--hr: #ffffff;
+	--accent-color: #313340;
 	--input-borders: #a9a9a9;
 	--input-color: #000;
 	--input-background: white;

gulp/res/css/themes/adaptive.css

@@ -22,6 +22,7 @@
 	--link-color: #c5c8c6;
 	--post-link-color: #5f89ac;
 	--link-hover: #81a2be;
+	--accent-color: #c5c8c6;
 	--input-borders: #111;
 	--input-color: #c5c8c6;
 	--input-background: #1d1d21;
@@ -102,6 +103,7 @@ tr:nth-child(2n+1) {
 		--link-color: black;
 		--post-link-color: darkblue;
 		--link-hover: #a74300;
+		--accent-color: #cacaca;
 		--input-borders: #d2d2d2;
 		--input-color: #333;
 		--input-background: #f5f5f5;

gulp/res/css/themes/amoled.css

@@ -21,6 +21,7 @@
 	--link-color:#c5c8c6;
 	--post-link-color:#5f89ac;
 	--link-hover:#81a2be;
+	--accent-color:#111;
 	--input-borders:#111;
 	--input-color:#c5c8c6;
 	--input-background:#040404;

gulp/res/css/themes/army-green.css

@@ -21,6 +21,7 @@
 	--post-link-color:#d2d888;
 	--link-color:#d2d888;
 	--link-hover:#fff;
+	--accent-color:#000;
 	--input-borders:#a9a9a9;
 	--input-color:#000;
 	--input-background:white;

gulp/res/css/themes/cancer.css

@@ -9,6 +9,7 @@
 	--highlighted-post-color: white;
 	--highlighted-post-outline-color: #1DA1F2;
 	--link-color: #1da1f2;
+	--accent-color: #1DA1F2;
 	--board-title: #1DA1F2;
 	--font-color: black;
 }

gulp/res/css/themes/chaos.css

@@ -21,6 +21,7 @@
 	--link-color:#FF0000;
 	--post-link-color:#FF0000;
 	--link-hover:#d00;
+	--accent-color:#00CCCC;
 	--input-borders:#00AAAA;
 	--input-color:#00CCCC;
 	--input-background:#000505;

gulp/res/css/themes/choc.css

@@ -22,6 +22,7 @@
 	--link-color: #a2a2ff;
 	--post-link-color: #a2a2ff;
 	--link-hover: #ff4d4b;
+	--accent-color: #784134;
 	--input-borders: #535353;
 	--input-color: #fff;
 	--input-background: #000;

gulp/res/css/themes/clear.css

@@ -22,6 +22,7 @@
 	--link-color: black;
 	--post-link-color: darkblue;
 	--link-hover: #a74300;
+	--accent-color: #cacaca;
 	--input-borders: #d2d2d2;
 	--input-color: #333;
 	--input-background: #f5f5f5;

gulp/res/css/themes/cybhub.css

@@ -44,6 +44,7 @@
     --box-border-color: var(--selection);
     --alt-label-color: var(--bg);
     --alt-font-color: var(--fg);
+    --accent-color: var(--selection);
     --input-color: var(--fg);
     --input-borders: var(--selection);
     --input-background: var(--bg-light);

gulp/res/css/themes/darkblue.css

@@ -11,6 +11,7 @@
 	--link-color: #0099ff;
 	--post-link-color: #0099ff;
 	--link-hover: #3333ff;
+	--accent-color: #0099ff;
 	--input-borders: #a9a9a9;
 	--input-color: #fff;
 	--input-background: black;

gulp/res/css/themes/digi.css

@@ -21,6 +21,7 @@
     --link-color: #f6d453;
     --post-link-color: #f6d453;
     --link-hover: #e9758e;
+    --accent-color: white;
     --input-borders: #a9a9a9;
     --input-color: #000;
     --input-background: white;

gulp/res/css/themes/favela.css

@@ -23,6 +23,7 @@
     --link-color: #34345c;
     --post-link-color: #34345c;
     --link-hover: #8d0000;
+    --accent-color: #d6f0da;
     --input-borders: #d2d2d2;
     --input-color: #333;
     --input-background: #f5f5f5;

gulp/res/css/themes/gurochan.css

@@ -22,6 +22,7 @@
 	--link-color: #34345C;
 	--post-link-color: #34345C;
 	--link-hover: #34345C;
+	--accent-color: #E6CBC0;
 	--input-borders: #CA927B;
 	--input-color: #000;
 	--input-background: #E6CBC0;

gulp/res/css/themes/iwakura.css

@@ -21,6 +21,7 @@
 	--link-color: #6d98ba;
 	--post-link-color: #6d98ba;
 	--link-hover: #bd0000;
+	--accent-color: #d2738a;
 	--input-borders: #d2738a;
 	--input-color: #dcdcdc;
 	--input-background: #282a2e;

gulp/res/css/themes/lain.css

@@ -22,6 +22,7 @@
 	--link-color: #fff;
 	--post-link-color: #fff;
 	--link-hover: #32DD72;
+	--accent-color: #666;
 	--input-borders: #666;
 	--input-color: #CCCCCC;
 	--input-background: #333;

gulp/res/css/themes/miku.css

@@ -22,6 +22,7 @@
 	--link-color: #00637B;
 	--post-link-color: #d00;
 	--link-hover: #d00;
+	--accent-color: #B6DDDE;
 	--input-borders: #a9a9a9;
 	--input-color: #000;
 	--input-background: white;

gulp/res/css/themes/mushroom.css

@@ -21,6 +21,7 @@
 	--link-color: #82cece;
 	--post-link-color: #82cece;
 	--link-hover: #acacac;
+	--accent-color: #82cece;
 	--input-borders: #82cece;
 	--input-color: #acacac;
 	--input-background: #182f3f;

gulp/res/css/themes/navy.css

@@ -22,6 +22,7 @@
 	--link-color: #8585a3;
 	--post-link-color: #f65252;
 	--link-hover: #f65252;
+	--accent-color: #434343;
 	--input-borders: #434343;
 	--input-color: #bfbfbf;
 	--input-background: #080c19;

gulp/res/css/themes/pink.css

@@ -22,6 +22,7 @@
 	--link-color:#80002c;
 	--post-link-color:#80002c;
 	--link-hover:#c48899;
+	--accent-color:#80002c;
 	--input-borders:#80002c;
 	--input-color:#80002c;
 	--input-background:#ffe6ea;

gulp/res/css/themes/ptchan.css

@@ -23,6 +23,7 @@
 	--link-color: #800;
 	--post-link-color: navy;
 	--link-hover: #f00;
+	--accent-color: #EA8;
 	--input-borders: #a9a9a9;
 	--input-color: #000;
 	--input-background: white;

gulp/res/css/themes/rei-zero.css

@@ -22,6 +22,7 @@
 	--link-color: #5C99AD;
 	--post-link-color: #00BfFF;
 	--link-hover: #eeeeee;
+	--accent-color: #29373E;
 	--input-borders: #a9a9a9;
 	--input-color: lightgray;
 	--input-background: #001229;

gulp/res/css/themes/robot.css

@@ -21,6 +21,7 @@
 	--link-color:white;
 	--post-link-color:red;
 	--link-hover:#f2f2f2;
+	--accent-color:#2d2d86;
 	--input-borders:black;
 	--input-color:black;
 	--input-background:white;

gulp/res/css/themes/solarized-dark.css

@@ -21,6 +21,7 @@
 	--link-color: #839496;
 	--post-link-color: #268bd2;
 	--link-hover: #2aa198;
+	--accent-color: #073642;
 	--input-borders: #586e75;
 	--input-color: #839496;
 	--input-background: #002b36;

gulp/res/css/themes/solarized-light.css

@@ -21,6 +21,7 @@
 	--link-color: #657B83;
 	--post-link-color: #268bd2;
 	--link-hover: #2aa198;
+	--accent-color: #EEE8D5;
 	--input-borders: #93A1A1;
 	--input-color: #657B83;
 	--input-background: #FDF6E3;

gulp/res/css/themes/tchan.css

@@ -1,4 +1,5 @@
 :root {
+	--accent-color: #cb9fac;
 	--input-borders: #140e10;
 	--input-color: #cb9fac;
 	--input-background: #1e1415;

gulp/res/css/themes/teletext.css

@@ -23,6 +23,7 @@
 	--link-color: white;
 	--post-link-color: #5f89ac;
 	--link-hover: #81a2be;
+	--accent-color: #e8eaf6;
 	--input-borders: #111;
 	--input-color: #e8eaf6;
 	--input-background: #040404;

gulp/res/css/themes/tempus-cozette.css

@@ -21,6 +21,7 @@
 	--link-color: #c5c8c6;
 	--post-link-color: #5f89ac;
 	--link-hover: #81a2be;
+	--accent-color: #c5c8c6;
 	--input-borders: #111;
 	--input-color: #c5c8c6;
 	--input-background: #090A18;

gulp/res/css/themes/tomorrow.css

@@ -22,6 +22,7 @@
 	--link-color: #c5c8c6;
 	--post-link-color: #5f89ac;
 	--link-hover: #81a2be;
+	--accent-color: #c5c8c6;
 	--input-borders: #111;
 	--input-color: #c5c8c6;
 	--input-background: #1d1d21;

gulp/res/css/themes/tomorrow2.css

@@ -22,6 +22,7 @@
 	--link-color: #c5c8c6;
 	--post-link-color: #5f89ac;
 	--link-hover: #81a2be;
+	--accent-color: #c5c8c6;
 	--input-borders: #111;
 	--input-color: #c5c8c6;
 	--input-background: #1d1d21;

gulp/res/css/themes/vapor.css

@@ -21,6 +21,7 @@
 	--link-color: #f649a7;
 	--post-link-color: #f649a7;
 	--link-hover: #f649a7;
+	--accent-color: #c5c8c6;
 	--input-borders: #232840;
 	--input-color: #c5c8c6;
 	--input-background: #2d3351;

gulp/res/css/themes/win95.css

@@ -22,6 +22,7 @@
 	--post-link-color: blue;
 	--link-color: #fffff50;
 	--link-hover: #555;
+	--accent-color: grey;
 	--input-borders: #111;
 	--input-color: black;
 	--input-background: white;

gulp/res/css/themes/yotsuba.css

@@ -22,6 +22,7 @@
 	--link-color: #800;
 	--post-link-color: navy;
 	--link-hover: #f00;
+	--accent-color: #800000;
 	--input-borders: #a9a9a9;
 	--input-color: #000;
 	--input-background: white;