Improve focus highlight

The currently focused element (e.g. input field) is only hardly visible because the css files disable drawing of the outline. This is really bad for usability especially when using keyboard navigation (with the TAB key).
nextcloud · Nov 15, 2016 · 9c02917 · 9c02917
1 parent 150b86a
commit 9c02917
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/core/css/inputs.css b/core/css/inputs.css
@@ -81,6 +81,27 @@ textarea:hover, textarea:focus, textarea:active {
 	opacity: 1;
 }
 
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="time"]:focus,
+input[type="date"]:focus,
+textarea:focus,
+select:focus,
+button:focus, .button:focus,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+#quota:focus,
+.pager li a:focus {
+	color: #333;
+	border: 2px solid #0082c9;
+}
+
 input[type="checkbox"].checkbox {
 	position: absolute;
 	left:-10000px;
@@ -410,6 +431,11 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu
 	box-shadow: none;
 }
 
+input[type="submit"]:focus, input[type="button"]:focus,
+button:focus, .button:focus {
+	color: #0082c9;
+}
+
 /* disabled input fields and buttons */
 input:disabled, input:disabled:hover, input:disabled:focus,
 button:disabled, button:disabled:hover, button:disabled:focus,

diff --git a/core/css/styles.css b/core/css/styles.css
@@ -2,7 +2,8 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline: 0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
+a:focus { 	color: #333; border: 2px solid #0082c9;}
 html, body { height:100%; }
 article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
 body { line-height:1.5; }
@@ -128,7 +129,7 @@ body {
 	max-width: 50%;
 	cursor: text;
 	background-color: #0082c9;
-	border: 1px solid rgba(255, 255, 255, .5);
+	border: 1px solid #0082c9;
 }
 
 /* CONTENT ------------------------------------------------------------------ */