diff options
author | Pierre Ossman <ossman@cendio.se> | 2020-02-18 15:24:51 +0100 |
---|---|---|
committer | Pierre Ossman <ossman@cendio.se> | 2020-02-18 15:24:51 +0100 |
commit | e4e6a9b9b40545094530cf1d751b33466d2ed57d (patch) | |
tree | 5d9778cbb592fe0994573ecf0d9f351d2254438c | |
parent | 384232fb56b8209dfb33491b78b775ea746c613a (diff) | |
download | novnc-e4e6a9b9b40545094530cf1d751b33466d2ed57d.tar.gz |
Style all input types for consistent UI
At least all that the browsers will let us.
-rw-r--r-- | app/styles/base.css | 80 |
1 files changed, 68 insertions, 12 deletions
diff --git a/app/styles/base.css b/app/styles/base.css index 9db83bf..d87fa4f 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -83,8 +83,20 @@ html { * ---------------------------------------- */ -input[type=input], input[type=password], input[type=number], -input:not([type]), textarea { +input:not([type]), +input[type=date], +input[type=datetime-local], +input[type=email], +input[type=month], +input[type=number], +input[type=password], +input[type=search], +input[type=tel], +input[type=text], +input[type=time], +input[type=url], +input[type=week], +textarea { /* Disable default rendering */ -webkit-appearance: none; -moz-appearance: none; @@ -98,7 +110,11 @@ input:not([type]), textarea { background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); } -input[type=button], input[type=submit], select { +input[type=button], +input[type=color], +input[type=reset], +input[type=submit], +select { /* Disable default rendering */ -webkit-appearance: none; -moz-appearance: none; @@ -116,7 +132,10 @@ input[type=button], input[type=submit], select { vertical-align: middle; } -input[type=button], input[type=submit] { +input[type=button], +input[type=color], +input[type=reset], +input[type=submit] { padding-left: 20px; padding-right: 20px; } @@ -126,35 +145,72 @@ option { background: white; } -input[type=input]:focus, input[type=password]:focus, -input:not([type]):focus, input[type=button]:focus, +input:not([type]):focus, +input[type=button]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=password]:focus, +input[type=reset]:focus, +input[type=search]:focus, input[type=submit]:focus, -textarea:focus, select:focus { +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +select:focus, +textarea:focus { box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5); border-color: rgb(74, 144, 217); outline: none; } input[type=button]::-moz-focus-inner, +input[type=color]::-moz-focus-inner, +input[type=reset]::-moz-focus-inner, input[type=submit]::-moz-focus-inner { border: none; } -input[type=input]:disabled, input[type=password]:disabled, -input:not([type]):disabled, input[type=button]:disabled, -input[type=submit]:disabled, input[type=number]:disabled, -textarea:disabled, select:disabled { +input:not([type]):disabled, +input[type=button]:disabled, +input[type=color]:disabled, +input[type=date]:disabled, +input[type=datetime-local]:disabled, +input[type=email]:disabled, +input[type=month]:disabled, +input[type=number]:disabled, +input[type=password]:disabled, +input[type=reset]:disabled, +input[type=search]:disabled, +input[type=submit]:disabled, +input[type=tel]:disabled, +input[type=text]:disabled, +input[type=time]:disabled, +input[type=url]:disabled, +input[type=week]:disabled, +select:disabled, +textarea:disabled { color: rgb(128, 128, 128); background: rgb(240, 240, 240); } -input[type=button]:active, input[type=submit]:active, +input[type=button]:active, +input[type=color]:active, +input[type=reset]:active, +input[type=submit]:active, select:active { border-bottom-width: 1px; margin-top: 3px; } :root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), +:root:not(.noVNC_touch) input[type=color]:hover:not(:disabled), +:root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled), :root:not(.noVNC_touch) select:hover:not(:disabled) { background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); |