theme config improvements

js/term/themes.js

@@ -24,10 +24,6 @@ const themes = exports.themes = [
     '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5',
     '#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'
   ],
-  [ // Solarized dark
-    '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5',
-    '#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'
-  ],
   [ // CGA NTSC
     '#000000', '#69001A', '#117800', '#769100', '#1A00A6', '#8019AB', '#289E76', '#A4A4A4',
     '#484848', '#C54E76', '#6DD441', '#D2ED46', '#765BFF', '#DC75FF', '#84FAD2', '#FFFFFF'
@@ -47,15 +43,16 @@ const themes = exports.themes = [
 ]
 
 exports.fgbgThemes = [
-  ['#aaaaaa', '#000000'], // grey_on_black
-  ['#000000', '#ffffdd'], // black_on_yellow
-  ['#000000', '#ffffff'], // black_on_white
-  ['#ffffff', '#000000'], // white_on_black
-  ['#00ff00', '#000000'], // green_on_black
-  ['#e53c00', '#000000'], // orange_on_black
-  ['#ffffff', '#300a24'], // ambience
-  ['#657b83', '#fdf6e3'], // solarized_light
-  ['#839496', '#002b36']  // solarized_dark
+  ['#AAAAAA', '#000000'], // GREY_ON_BLACK
+  ['#EFF0F1', '#31363B'], // BREEZE
+  ['#FFFFFF', '#000000'], // WHITE_ON_BLACK
+  ['#00FF00', '#000000'], // GREEN_ON_BLACK
+  ['#E53C00', '#000000'], // ORANGE_ON_BLACK
+  ['#FFFFFF', '#300A24'], // AMBIENCE
+  ['#839496', '#002B36'], // SOLARIZED_DARK
+  ['#657B83', '#FDF6E3'], // SOLARIZED_LIGHT
+  ['#000000', '#FFFFDD'], // BLACK_ON_YELLOW
+  ['#000000', '#FFFFFF']  // BLACK_ON_WHITE
 ]
 
 let colorTable256 = null
@@ -91,13 +88,24 @@ exports.buildColorTable = function () {
 exports.SELECTION_FG = '#333'
 exports.SELECTION_BG = '#b2d7fe'
 
+function resolveColor (themeN, shade) {
+  shade = +shade
+  if (shade < 16) shade = themes[themeN][shade]
+  else {
+    shade = exports.buildColorTable()[shade]
+  }
+  return shade
+}
+
 exports.themePreview = function (n) {
   document.querySelectorAll('[data-fg]').forEach((elem) => {
-    let shade = +elem.dataset.fg
-    elem.style.color = themes[n][shade]
+    let shade = elem.dataset.fg
+    if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
+    elem.style.color = shade
   })
   document.querySelectorAll('[data-bg]').forEach((elem) => {
-    let shade = +elem.dataset.bg
-    elem.style.backgroundColor = themes[n][shade]
+    let shade = elem.dataset.bg
+    if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
+    elem.style.backgroundColor = shade
   })
 }

lang/en.php

@@ -45,10 +45,18 @@ return [
 
 	'term.example' => 'Default colors preview',
 
+	'term.explain_scheme' => '
+		To select default text and background color, click on the
+		preview palette. Alternatively, use numbers 0-15 for theme colors, 16-255 for standard 
+		colors and hex (#FFF or #FFFFFF) for True Color (24-bit).
+		',
+
+	'term.fgbg_presets' => 'Presets',
+	'term.color_scheme' => 'Color Scheme',
 	'term.reset_screen' => 'Reset screen & parser',
 	'term.term_title' => 'Header text',
-	'term.term_width' => 'Width / height',
-	'term.default_fg_bg' => 'Text / background',
+	'term.term_width' => 'Width',
+	'term.term_height' => 'Height',
 	'term.buttons' => 'Button labels',
 	'term.theme' => 'Color scheme',
 	'term.cursor_shape' => 'Cursor style',
@@ -62,6 +70,9 @@ return [
 	'term.crlf_mode' => 'Enter sends CR+LF',
 	'term.want_all_fn' => 'Capture all keys<br>(F5, F11, F12…)',
 	'term.button_msgs' => 'Button codes<br>(ASCII, dec, CSV)',
+	'term.color_fg' => 'Foreground',
+	'term.color_bg' => 'Background',
+	'term.colors_preview' => 'Preview',
 
 	'cursor.block_blink' => 'Block, blinking',
     'cursor.block_steady' => 'Block, steady',
@@ -70,23 +81,23 @@ return [
     'cursor.bar_blink' => 'I-bar, blinking',
     'cursor.bar_steady' => 'I-bar, steady',
 
-	// terminal color labels
-	'color.0' => 'Black',
-	'color.1' => 'Red',
-	'color.2' => 'Green',
-	'color.3' => 'Yellow',
-	'color.4' => 'Blue',
-	'color.5' => 'Purple',
-	'color.6' => 'Cyan',
-	'color.7' => 'Silver',
-	'color.8' => 'Gray',
-	'color.9' => 'Light Red',
-	'color.10' => 'Light Green',
-	'color.11' => 'Light Yellow',
-	'color.12' => 'Light Blue',
-	'color.13' => 'Light Purple',
-	'color.14' => 'Light Cyan',
-	'color.15' => 'White',
+//	// terminal color labels
+//	'color.0' => 'Black',
+//	'color.1' => 'Red',
+//	'color.2' => 'Green',
+//	'color.3' => 'Yellow',
+//	'color.4' => 'Blue',
+//	'color.5' => 'Purple',
+//	'color.6' => 'Cyan',
+//	'color.7' => 'Silver',
+//	'color.8' => 'Gray',
+//	'color.9' => 'Light Red',
+//	'color.10' => 'Light Green',
+//	'color.11' => 'Light Yellow',
+//	'color.12' => 'Light Blue',
+//	'color.13' => 'Light Purple',
+//	'color.14' => 'Light Cyan',
+//	'color.15' => 'White',
 
 	'net.explain_sta' => '
 		Switch off Dynamic IP to configure the static IP address.',

pages/cfg_system.php

@@ -5,7 +5,7 @@
 		<?= tr('system.explain_persist') ?>
 	</div>
 
-	<div class="Row buttons2">
+	<div class="Row buttons">
 		<a class="button icn-restore"
 		   onclick="return confirm('<?= tr('system.confirm_restore') ?>');"
 		   href="<?= e(url('restore_defaults')) ?>">
@@ -13,11 +13,11 @@
 		</a>
 	</div>
 
-	<div class="Row buttons2">
+	<div class="Row buttons">
 		<a onclick="writeDefaults(); return false;" href="#"><?= tr('system.write_defaults') ?></a>
 	</div>
 
-	<div class="Row buttons2">
+	<div class="Row buttons">
 		<a onclick="return confirm('<?= tr('system.confirm_restore_hard') ?>');"
 		   href="<?= e(url('restore_hard')) ?>">
 			<?= tr('system.restore_hard') ?>

pages/cfg_term.php

@@ -2,11 +2,11 @@
 	<a href="<?= e(url('reset_screen')) ?>"><?= tr('term.reset_screen') ?></a>
 </div>
 
-<form class="Box mobopen str" action="<?= e(url('term_set')) ?>" method="GET" id='form-initial'>
-	<h2><?= tr('term.defaults') ?></h2>
+<form class="Box mobopen str" action="<?= e(url('term_set')) ?>" method="GET" id='form-scheme'>
+	<h2><?= tr('term.color_scheme') ?></h2>
 
 	<div class="Row explain">
-		<?= tr('term.explain_initials') ?>
+		<?= tr('term.explain_scheme') ?>
 	</div>
 
 	<div class="Row">
@@ -26,75 +26,115 @@
 	</div>
 
 	<div class="Row color-preview">
-		<div class="colorprev">
-			<span data-fg=0 data-bg="0" style="text-shadow: 0 0 4px white;">30</span><!--
-			--><span data-fg=1 data-bg="0">31</span><!--
-			--><span data-fg=2 data-bg="0">32</span><!--
-			--><span data-fg=3 data-bg="0">33</span><!--
-			--><span data-fg=4 data-bg="0">34</span><!--
-			--><span data-fg=5 data-bg="0">35</span><!--
-			--><span data-fg=6 data-bg="0">36</span><!--
-			--><span data-fg=7 data-bg="0">37</span>
+		<label><?= tr("term.color_fg") ?></label>
+		<div>
+			<div class="colorprev fg">
+				<span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!--
+				--><span data-fg=1 data-bg=0>1</span><!--
+				--><span data-fg=2 data-bg=0>2</span><!--
+				--><span data-fg=3 data-bg=0>3</span><!--
+				--><span data-fg=4 data-bg=0>4</span><!--
+				--><span data-fg=5 data-bg=0>5</span><!--
+				--><span data-fg=6 data-bg=0>6</span><!--
+				--><span data-fg=7 data-bg=0>7</span>
+			</div>
+
+			<div class="colorprev fg">
+				<span data-fg=8 data-bg=0>8</span><!--
+				--><span data-fg=9 data-bg=0>9</span><!--
+				--><span data-fg=10 data-bg=0>10</span><!--
+				--><span data-fg=11 data-bg=0>11</span><!--
+				--><span data-fg=12 data-bg=0>12</span><!--
+				--><span data-fg=13 data-bg=0>13</span><!--
+				--><span data-fg=14 data-bg=0>14</span><!--
+				--><span data-fg=15 data-bg=0>15</span>
+			</div>
 		</div>
+	</div>
 
-		<div class="colorprev">
-			<span data-fg=8 data-bg="0">90</span><!--
-			--><span data-fg=9 data-bg="0">91</span><!--
-			--><span data-fg=10 data-bg="0">92</span><!--
-			--><span data-fg=11 data-bg="0">93</span><!--
-			--><span data-fg=12 data-bg="0">94</span><!--
-			--><span data-fg=13 data-bg="0">95</span><!--
-			--><span data-fg=14 data-bg="0">96</span><!--
-			--><span data-fg=15 data-bg="0">97</span>
+	<div class="Row color-preview">
+		<label><?= tr("term.color_bg") ?></label>
+		<div>
+			<div class="colorprev bg">
+				<span data-bg=0 data-fg=15>0</span><!--
+				--><span data-bg=1 data-fg=15>1</span><!--
+				--><span data-bg=2 data-fg=15>2</span><!--
+				--><span data-bg=3 data-fg=0>3</span><!--
+				--><span data-bg=4 data-fg=15>4</span><!--
+				--><span data-bg=5 data-fg=15>5</span><!--
+				--><span data-bg=6 data-fg=15>6</span><!--
+				--><span data-bg=7 data-fg=0>7</span>
+			</div>
+
+			<div class="colorprev bg">
+				<span data-bg=8 data-fg=15>8</span><!--
+				--><span data-bg=9 data-fg=0>9</span><!--
+				--><span data-bg=10 data-fg=0>10</span><!--
+				--><span data-bg=11 data-fg=0>11</span><!--
+				--><span data-bg=12 data-fg=0>12</span><!--
+				--><span data-bg=13 data-fg=0>13</span><!--
+				--><span data-bg=14 data-fg=0>14</span><!--
+				--><span data-bg=15 data-fg=0>15</span>
+			</div>
 		</div>
+	</div>
 
-		<div class="colorprev">
-			<span data-bg=0 data-fg="15">40</span><!--
-			--><span data-bg=1 data-fg="15">41</span><!--
-			--><span data-bg=2 data-fg="15">42</span><!--
-			--><span data-bg=3 data-fg="0">43</span><!--
-			--><span data-bg=4 data-fg="15">44</span><!--
-			--><span data-bg=5 data-fg="15">45</span><!--
-			--><span data-bg=6 data-fg="15">46</span><!--
-			--><span data-bg=7 data-fg="0">47</span>
+	<div class="Row">
+		<div class="SubRow">
+			<label for="default_fg"><?= tr("term.color_fg") ?></label>
+			<input type="text" name="default_fg" id="default_fg" class="short" value="%default_fg%">
 		</div>
-
-		<div class="colorprev">
-			<span data-bg=8 data-fg="15">100</span><!--
-			--><span data-bg=9 data-fg="0">101</span><!--
-			--><span data-bg=10 data-fg="0">102</span><!--
-			--><span data-bg=11 data-fg="0">103</span><!--
-			--><span data-bg=12 data-fg="0">104</span><!--
-			--><span data-bg=13 data-fg="0">105</span><!--
-			--><span data-bg=14 data-fg="0">106</span><!--
-			--><span data-bg=15 data-fg="0">107</span>
+		<div class="SubRow">
+			<label for="default_bg"><?= tr("term.color_bg") ?></label>
+			<input type="text" name="default_bg" id="default_bg" class="short" value="%default_bg%">
 		</div>
 	</div>
 
 	<div class="Row color-preview">
-		<div id="color-example" data-fg="" data-bg="">
+		<label><?= tr("term.colors_preview") ?></label>
+		<div class="color-example" data-fg="" data-bg="">
 			<?= tr("term.example") ?>
 		</div>
 	</div>
 
+	<div class="Row color-preview">
+		<label><?= tr("term.fgbg_presets") ?></label>
+		<div id="fgbg_presets"></div>
+	</div>
+
 	<div class="Row">
-		<label><?= tr("term.default_fg_bg") ?></label>
-		<select name="default_fg" id="default_fg" class="short" onchange="showColor()">
-			<?php for($i=0; $i<16; $i++): ?>
-			<option value="<?=$i?>"><?= tr("color.$i") ?></option>
-			<?php endfor; ?>
-		</select>&nbsp;<!--
-		--><select name="default_bg" id="default_bg" class="short" onchange="showColor()">
-			<?php for($i=0; $i<16; $i++): ?>
-			<option value="<?=$i?>"><?= tr("color.$i") ?></option>
-			<?php endfor; ?>
+		<label><?= tr("term.cursor_shape") ?></label>
+		<select name="cursor_shape" id="cursor_shape">
+			<option value="0"><?= tr("cursor.block_blink") ?></option>
+			<option value="2"><?= tr("cursor.block_steady") ?></option>
+			<option value="3"><?= tr("cursor.underline_blink") ?></option>
+			<option value="4"><?= tr("cursor.underline_steady") ?></option>
+			<option value="5"><?= tr("cursor.bar_blink") ?></option>
+			<option value="6"><?= tr("cursor.bar_steady") ?></option>
 		</select>
 	</div>
 
+	<div class="Row buttons">
+		<a class="button icn-ok" href="#" onclick="qs('#form-scheme').submit()"><?= tr('apply') ?></a>
+	</div>
+</form>
+
+<form class="Box fold str" action="<?= e(url('term_set')) ?>" method="GET" id='form-initial'>
+	<h2><?= tr('term.defaults') ?></h2>
+
+	<div class="Row explain">
+		<?= tr('term.explain_initials') ?>
+	</div>
+
 	<div class="Row">
-		<label for="term_width"><?= tr('term.term_width') ?></label>
-		<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="%term_width%" required>&nbsp;<!--
-		--><input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="%term_height%" required>
+		<div class="SubRow">
+			<label for="term_width"><?= tr('term.term_width') ?></label>
+			<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="%term_width%" required>
+		</div>
+		<div class="SubRow">
+			<label for="term_height"><?= tr('term.term_height') ?></label>
+			<input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="%term_height%" required>
+		</div>
 	</div>
 
 	<div class="Row">
@@ -110,23 +150,20 @@
 
 	<div class="Row">
 		<label><?= tr("term.buttons") ?></label>
-		<input class="short" type="text" name="btn1" id="btn1" value="%h:btn1%">&nbsp;
-		<input class="short" type="text" name="btn2" id="btn2" value="%h:btn2%">&nbsp;
-		<input class="short" type="text" name="btn3" id="btn3" value="%h:btn3%">&nbsp;
-		<input class="short" type="text" name="btn4" id="btn4" value="%h:btn4%">&nbsp;
-		<input class="short" type="text" name="btn5" id="btn5" value="%h:btn5%">
+		<input class="tiny" type="text" name="btn1" id="btn1" value="%h:btn1%">
+		<input class="tiny" type="text" name="btn2" id="btn2" value="%h:btn2%">
+		<input class="tiny" type="text" name="btn3" id="btn3" value="%h:btn3%">
+		<input class="tiny" type="text" name="btn4" id="btn4" value="%h:btn4%">
+		<input class="tiny" type="text" name="btn5" id="btn5" value="%h:btn5%">
 	</div>
 
 	<div class="Row">
-		<label><?= tr("term.cursor_shape") ?></label>
-		<select name="cursor_shape" id="cursor_shape">
-			<option value="0"><?= tr("cursor.block_blink") ?></option>
-			<option value="2"><?= tr("cursor.block_steady") ?></option>
-			<option value="3"><?= tr("cursor.underline_blink") ?></option>
-			<option value="4"><?= tr("cursor.underline_steady") ?></option>
-			<option value="5"><?= tr("cursor.bar_blink") ?></option>
-			<option value="6"><?= tr("cursor.bar_steady") ?></option>
-		</select>
+		<label><?= tr("term.button_msgs") ?></label>
+		<input class="tiny" type="text" name="bm1" id="bm1" value="%h:bm1%">
+		<input class="tiny" type="text" name="bm2" id="bm2" value="%h:bm2%">
+		<input class="tiny" type="text" name="bm3" id="bm3" value="%h:bm3%">
+		<input class="tiny" type="text" name="bm4" id="bm4" value="%h:bm4%">
+		<input class="tiny" type="text" name="bm5" id="bm5" value="%h:bm5%">
 	</div>
 
 	<div class="Row buttons">
@@ -144,10 +181,11 @@
 	<div class="Row">
 		<label for="uart_baud"><?= tr('uart.baud') ?><span class="mq-phone">&nbsp;(bps)</span></label>
 		<select name="uart_baud" id="uart_baud" class="short">
-			<?php foreach([
-				              300, 600, 1200, 2400, 4800, 9600, 19200, 38400,
-				              57600, 74880, 115200, 230400, 460800, 921600, 1843200, 3686400,
-			              ] as $b):
+			<?php
+			foreach([
+				300, 600, 1200, 2400, 4800, 9600, 19200, 38400,
+				57600, 74880, 115200, 230400, 460800, 921600, 1843200, 3686400,
+			] as $b):
 				?><option value="<?=$b?>"><?= number_format($b, 0, ',', '.') ?></option>
 			<?php endforeach; ?>
 		</select>
@@ -157,11 +195,12 @@
 	<div class="Row">
 		<label for="uart_parity"><?= tr('uart.parity') ?></label>
 		<select name="uart_parity" id="uart_parity" class="short">
-			<?php foreach([
-				              2 => tr('uart.parity.none'),
-				              1 => tr('uart.parity.odd'),
-				              0 => tr('uart.parity.even'),
-			              ] as $k => $label):
+			<?php
+			foreach([
+	           2 => tr('uart.parity.none'),
+	           1 => tr('uart.parity.odd'),
+	           0 => tr('uart.parity.even'),
+	        ] as $k => $label):
 				?><option value="<?=$k?>"><?=$label?></option>
 			<?php endforeach; ?>
 		</select>
@@ -170,11 +209,12 @@
 	<div class="Row">
 		<label for="uart_stopbits"><?= tr('uart.stop_bits') ?></label>
 		<select name="uart_stopbits" id="uart_stopbits" class="short">
-			<?php foreach([
-				              1 => tr('uart.stop_bits.one'),
-				              2 => tr('uart.stop_bits.one_and_half'),
-				              3 => tr('uart.stop_bits.two'),
-			              ] as $k => $label):
+			<?php
+			foreach([
+				1 => tr('uart.stop_bits.one'),
+				2 => tr('uart.stop_bits.one_and_half'),
+				3 => tr('uart.stop_bits.two'),
+			] as $k => $label):
 				?><option value="<?=$k?>"><?=$label?></option>
 			<?php endforeach; ?>
 		</select>
@@ -210,15 +250,6 @@
 		<span class="mq-no-phone">&nbsp;ms</span>
 	</div>
 
-	<div class="Row">
-		<label><?= tr("term.button_msgs") ?></label>
-		<input class="short" type="text" name="bm1" id="bm1" value="%h:bm1%">&nbsp;
-		<input class="short" type="text" name="bm2" id="bm2" value="%h:bm2%">&nbsp;
-		<input class="short" type="text" name="bm3" id="bm3" value="%h:bm3%">&nbsp;
-		<input class="short" type="text" name="bm4" id="bm4" value="%h:bm4%">&nbsp;
-		<input class="short" type="text" name="bm5" id="bm5" value="%h:bm5%">
-	</div>
-
 	<div class="Row checkbox" >
 		<label><?= tr('term.fn_alt_mode') ?></label><!--
 		--><span class="box" tabindex=0 role=checkbox></span>
@@ -255,8 +286,6 @@
 </form>
 
 <script>
-	$('#default_fg').val(%default_fg%);
-	$('#default_bg').val(%default_bg%);
 	$('#cursor_shape').val(%cursor_shape%);
 	$('#theme').val(%theme%);
 
@@ -265,18 +294,58 @@
     $('#uart_stopbits').val(%uart_stopbits%);
 
 	function showColor() {
-		var ex = qs('#color-example');
-		ex.dataset.fg = +$('#default_fg').val();
-		ex.dataset.bg = +$('#default_bg').val();
+		var ex = qs('.color-example');
+		var fg = $('#default_fg').val();
+		var bg = $('#default_bg').val();
+
+		if (/^\d+$/.test(fg)) fg = +fg;
+		else if (!/^#[\da-f]{3,6}$/i.test(fg)) {
+		  fg = 'black';
+		}
+
+		if (/^\d+$/.test(bg)) bg = +bg;
+		else if (!/^#[\da-f]{3,6}$/i.test(bg)) {
+		  bg = 'black';
+		}
+
+		ex.dataset.fg = fg;
+		ex.dataset.bg = bg;
+
 		themes.themePreview(+$('#theme').val())
 	}
 	showColor();
 
-	$('.colorprev span').on('click', function() {
-		var fg = this.dataset.fg;
+	$('#default_fg').on('input', showColor)
+	$('#default_bg').on('input', showColor)
+
+	$('.colorprev.bg span').on('click', function() {
 		var bg = this.dataset.bg;
-		if (typeof fg != 'undefined') $('#default_fg').val(fg);
 		if (typeof bg != 'undefined') $('#default_bg').val(bg);
 		showColor()
 	});
+
+	$('.colorprev.fg span').on('click', function() {
+		var fg = this.dataset.fg;
+		if (typeof fg != 'undefined') $('#default_fg').val(fg);
+		showColor()
+	});
+
+	var $presets = $('#fgbg_presets');
+	for(var i = 0; i < themes.fgbgThemes.length; i++) {
+	  fg = themes.fgbgThemes[i][0];
+	  bg = themes.fgbgThemes[i][1];
+      $presets
+        .htmlAppend(
+          '<span class="preset" ' +
+          'data-xfg="'+fg+'" data-xbg="'+bg+'" ' +
+          'style="color:'+fg+';background:'+bg+'">&nbsp;['+i+']&nbsp;</span>');
+
+	  if ((i+1)%5==0) $presets.htmlAppend('<br>');
+	}
+
+	$('.preset').on('click', function() {
+      $('#default_fg').val(this.dataset.xfg)
+      $('#default_bg').val(this.dataset.xbg)
+      showColor()
+	});
 </script>

sass/form/_form_elements.scss

@@ -2,10 +2,14 @@
 
 #{$all-text-inputs}, select, label.select-wrap {
 	width: $form-field-w;
+	margin-right: 3px;
 }
 
 input[type="number"], input.short, select.short {
-	width: $form-field-w/2;
+	width: 123.5px;
+}
+input.tiny, select.tiny {
+	width: 90px;
 }
 
 #{$all-text-inputs}, select {

sass/form/_form_layout.scss

@@ -23,6 +23,17 @@ form { @include naked(); }
 	align-items: center;
 	flex-wrap: wrap;
 
+	.SubRow {
+		display: flex;
+		flex-direction: row;
+
+		@include media($phone) {
+			flex-direction: column;
+			margin: 6px auto;
+			width: 100%;
+		}
+	}
+
 	&:first-child {
 		margin-top: 0;
 	}
@@ -54,7 +65,7 @@ form { @include naked(); }
 	}
 
 	// buttons2 is the same style, but different selector for use in the admin page
-	&.buttons, &.buttons2 {
+	&.buttons {
 		margin: 16px auto;
 		input, .button {
 			margin-right: dist(-1);

sass/pages/_about.scss

@@ -36,7 +36,7 @@
 	span {
 		display: inline-block;
 		width: 2em;
-		padding: dist(-2) 0;
+		padding: 2px 0;
 		text-align: center;
 	}
 }

sass/pages/_term.scss

@@ -267,20 +267,35 @@ body.term {
 }
 //
 
-.Row.color-preview {
+.color-example {
 	font-family: monospace;
-	font-size: 16pt;
-	display: block;
-	margin-bottom: 0;
+	font-size: 14pt;
+	padding: 4px 6px;
+}
 
-	padding-left: $form-label-w;
+.preset {
+	cursor: pointer;
+	font-family: monospace;
+	font-size: 14pt;
+}
+
+.Row.color-preview {
+	label {
+		align-self: center;
+	}
 
 	@include media($phone) {
-		padding-left: 0;
-		font-size: 14pt;
+		font-size: 12pt;
+		align-items: flex-start;
+
+		label {
+			align-self: flex-start;
+		}
 	}
 
 	.colorprev {
+		font-family: monospace;
+		font-size: 14pt;
 		display:block;
 		margin: 0;
 		cursor: pointer;