fixes #29 fixes #95 fixes #103: buttons, clickables, dark mode

comment.php

@@ -40,7 +40,7 @@
 <form autocomplete="off" method="post">
 	<p><textarea name="comment" rows="8"><?= html($comment->body) ?></textarea><br><button type="button" data-preview="textarea[name=comment]">Preview</button></p>
 	<p>
-		<input type="submit" />
+		<button>Save</button>
 		or
 		<a data-confirm="DELETE this COMMENT for ever and ever?" href="issue.php?key=<?= $key ?>&delete_comment=<?= $id ?>">delete</a>
 	</p>

filters.php

@@ -68,7 +68,7 @@
 	<p>2. Index query: <input name="index_query" value="<?= html($user->index_query) ?>" /></p>
 	<p>3. Index project: <input name="index_project" value="<?= html($user->index_project) ?>" /></p>
 
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 
 <h2>Add / edit filter</h2>
@@ -78,7 +78,7 @@
 	<p>Name: <input name="name" /></p>
 	<p>Query: <input name="jql" /></p>
 
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 
 <script>

issue.php

@@ -159,7 +159,7 @@
 
 	echo '	<p>Add comment: <textarea name="comment" rows="4"></textarea><br><button type="button" data-preview="textarea[name=comment]">Preview</button></p>';
 
-	echo '	<p><input type="submit" /></p>';
+	echo '	<p><button>Save</button></p>';
 	echo '</form>';
 
 	include 'tpl.footer.php';
@@ -347,7 +347,7 @@
 			<textarea name="comment" rows="8"></textarea><br>
 			<button type="button" data-preview="textarea[name=comment]">Preview</button>
 		</p>
-		<p><input type="submit" /></p>
+		<p><button>Save</button></p>
 	</form>
 </div>
 

labels.php

@@ -70,7 +70,7 @@
 <form autocomplete="off" method="post">
 	<input type="hidden" name="old_labels" value="<?= html(implode(' ', $issue->fields->labels)) ?>" />
 	<p><input id="ls" name="new_labels" value="<?= html(implode(' ', $issue->fields->labels)) ?> " size="60" autocapitalize="off" /></p>
-	<p>(<a id="fl" href="#">fetch</a>) <input type="submit" /></p>
+	<p>(<a id="fl" href="#">fetch</a>) <button>Save</button></p>
 </form>
 
 <p>Suggestions: <span id="ss"></span></p>

link.php

@@ -55,7 +55,7 @@
 <form autocomplete="off" method="post">
 	<p>This issue <select name="type"><?= html_options($linkTypeOptions, 'Relates:inward') ?></select></p>
 	<p>That issue: <input name="issue" placeholder="ABC-123" /></p>
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 
 <script>

new.php

@@ -157,7 +157,7 @@
 	<p>Description: <textarea name="description" rows="8"></textarea><br><button type="button" data-preview="textarea[name=description]">Preview</button></p>
 	<p>Priority: <select name="priority"><?= html_options($priorities, $defaultPriority) ?></select></p>
 
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 <?php
 

style.css

@@ -1,3 +1,8 @@
+:root {
+	--jira-dark-blue: #326ca6;
+	--jira-light-blue: #e0f0ff;
+}
+
 * {
 	box-sizing: border-box;
 	-webkit-box-sizing: border-box;
@@ -7,31 +12,37 @@ html, body {
 	margin: 0;
 	padding: 0;
 	font-family: sans-serif;
+	font-size: 16px;
+	line-height: 1.6;
 }
 html {
 	height: 100%;
 }
 body {
 	padding: 10px;
-	line-height: 1.4;
 	background-color: #fff;
 	color: #000;
 }
-input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
+input,
 select,
-textarea {
-	background: #e0f0ff;
+textarea,
+button {
+	background: var(--jira-light-blue);
 	border: solid 1px #999;
 	padding: 11px;
 }
-input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not(.manual-width),
+input:not([type="radio"]):not([type="checkbox"]):not(.manual-width),
 select:not(.manual-width),
 textarea:not(.manual-width) {
 	width: 100%;
 }
-.filter input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
-.filter select {
-	background: #fff;
+button {
+	cursor: pointer;
+}
+.filter input,
+.filter select,
+.filter button {
+	background-color: #fff;
 }
 .required {
 	color: red;
@@ -50,7 +61,7 @@ h2 + a + p {
 a,
 h1, h1 a,
 h2, h2 a {
-	color: #326ca6;
+	color: var(--jira-dark-blue);
 }
 .epic a {
 	color: inherit;
@@ -98,7 +109,7 @@ a.active {
 /* issue details */
 .parent-issue,
 .parent-epic {
-	color: #326ca6;
+	color: var(--jira-dark-blue);
 	margin-bottom: 0;
 }
 h1.with-parent-issue {
@@ -150,7 +161,7 @@ button[data-preview] {
 /* issue labels */
 .label {
 	display: inline-block;
-	background: #e0f0ff;
+	background: var(--jira-light-blue);
 	color: #000;
 	padding: 1px 5px;
 	border-radius: 4px;
@@ -171,7 +182,7 @@ button[data-preview] {
 
 /* markup fields */
 .markup {
-	background: #e0f0ff;
+	background: var(--jira-light-blue);
 	padding: 10px;
 	word-wrap: break-word;
 }
@@ -395,12 +406,30 @@ body.loading > .hor-loader {
 }
 
 @media (prefers-color-scheme: dark) {
-	body, .tab-links, .tab-pages, input, select, option, textarea {
+	body {
 		background-color: #000 !important;
 		color: #ccc !important;
 	}
+	input, select, option, textarea, button {
+		background-color: #111 !important;
+		color: #ccc !important;
+		border: solid 1px #666 !important;
+	}
+	.tab-links, .tab-pages {
+		background-color: #111 !important;
+		color: #ccc !important;
+	}
 	.markup {
-		background-color: #222;
+		background-color: #111;
+	}
+	.markup .code.panel,
+	.markup tt {
+		background-color: #000;
+		outline-color: #666;
+	}
+	.label {
+		background-color: var(--jira-dark-blue);
+		color: #ccc;
 	}
 }
 

tpl.indextabs.php

@@ -12,34 +12,34 @@
 			<input class="project-side manual-width" name="project" value="<?= html(@$_GET['project']) ?>" placeholder="Project..." />
 			<select class="manual-width" name="query"><?= html_options($filterOptions, $selectedQuery, '-- Filter') ?></select>
 		</div>
-		<input type="submit" />
+		<button>Filter</button>
 		<a href="filters.php">Your filters</a>
 	</form>
 	<form autocomplete="off" action class="filter tab-page" id="tab-page-query">
 		<div class="input">
 			<input class="project-side manual-width" name="project" value="<?= html(@$_GET['project']) ?>" placeholder="Project..." />
 			<input class="manual-width" name="query" value="<?= html(@$selectedQuery) ?>" />
 		</div>
-		<input type="submit" />
+		<button>Filter</button>
 	</form>
 	<form autocomplete="off" action class="filter tab-page" id="tab-page-project">
 		<div class="input">
 			<input name="project" value="<?= html(@$_GET['project'] ?: $user->index_project) ?>" placeholder="Project key..." />
 		</div>
-		<input type="submit" />
+		<button>Filter</button>
 	</form>
 	<form autocomplete="off" action class="filter tab-page" id="tab-page-search">
 		<div class="input">
 			<input class="project-side manual-width" name="project" value="<?= html(@$_GET['project']) ?>" placeholder="Project..." />
 			<input class="manual-width" name="search" value="<?= html(@$_GET['search']) ?>" placeholder="Fulltext search tokens..." />
 		</div>
-		<input type="submit" />
+		<button>Filter</button>
 	</form>
 	<form autocomplete="off" action class="filter tab-page" id="tab-page-goto">
 		<div class="input">
 			<input name="goto" value="" placeholder="Issue key, like ABCD-123..." />
 		</div>
-		<input type="submit" />
+		<button>Filter</button>
 	</form>
 </div>
 

tpl.login.php

@@ -3,5 +3,5 @@
 	<p>Server URL: <input type="url" name="url" size="60" placeholder="https://YOUR.jira.com WITHOUT /rest at the end" /></p>
 	<p>Jira username / Atlassian e-mail: <input name="user" /></p>
 	<p>Jira password / Personal API token: <input name="pass" type="password" /></p>
-	<p><input type="submit" /></p>
+	<p><button>Log in</button></p>
 </form>

transition.php

@@ -73,7 +73,7 @@
 }
 echo '<p>Comment:<br><textarea name="comment" rows="8"></textarea><br><button type="button" data-preview="textarea[name=comment]">Preview</button></p>';
 
-echo '<p><input type="submit" /></p>';
+echo '<p><button>Save</button></p>';
 echo '</form>';
 echo '</div>';
 

upload.php

@@ -53,7 +53,7 @@
 <form autocomplete="off" action method="post" enctype="multipart/form-data">
 	<p>File: <input type="file" name="file" /></p>
 	<p>Comment: <textarea name="comment" rows="4"></textarea><br><button type="button" data-preview="textarea[name=comment]">Preview</button></p>
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 
 <?php

variables.php

@@ -83,7 +83,7 @@
 	</table>
 	<p>
 		(<a class="toggle-editables" href>edit</a>)
-		<input type="submit" />
+		<button>Save</button>
 	</p>
 </form>
 
@@ -94,7 +94,7 @@
 	<p>Regex: <input name="regex" placeholder="sprint = \d+" /></p>
 	<p>Replacement: <input name="replacement" placeholder="sprint = XXX" /></p>
 
-	<p><input type="submit" /></p>
+	<p><button>Save</button></p>
 </form>
 
 <script>