extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form theme styles

Browse Source
This commit is contained in:
zombieFox 2019-11-07 15:37:07 +00:00
parent 04ac0af5f5
commit e52ae80c09
4 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/auto-suggest.css
View File

@ -32,9 +32,7 @@
.auto-suggest-link { .auto-suggest-link {
padding: 0.5em; padding: 0.5em;
border-width: var(--form-input-border); border: 0;
border-style: solid;
border-color: transparent;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
width: 100%; width: 100%;
height: 100%; height: 100%;

4
src/css/button.css
View File

@ -14,9 +14,9 @@ input[type="submit"] {
border: 0; border: 0;
border-top-width: var(--layout-line-width); border-top-width: var(--layout-line-width);
border-bottom-width: var(--layout-line-width); border-bottom-width: var(--layout-line-width);
border-style: solid;
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: rgb(var(--button-border)); border-bottom-color: rgb(var(--button-border));
border-style: solid;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -68,7 +68,7 @@ button:disabled:focus,
button:disabled:active, button:disabled:active,
.button:disabled:active { .button:disabled:active {
background-color: rgb(var(--button-background-disabled)); background-color: rgb(var(--button-background-disabled));
border-color: transparent; border-bottom-color: rgb(var(--button-border-disabled));
color: rgb(var(--button-text-disabled)); color: rgb(var(--button-text-disabled));
cursor: default; cursor: default;
text-decoration: none; text-decoration: none;

68
src/css/form.css
View File

@ -36,10 +36,12 @@ select {
min-height: 2.5em; min-height: 2.5em;
min-width: 0; min-width: 0;
width: 100%; width: 100%;
border: 0; border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
cursor: pointer; cursor: pointer;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@ -50,6 +52,7 @@ select:hover {
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%), linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
background-color: rgb(var(--form-input-background-hover)); background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-label-hover)); color: rgb(var(--form-label-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-hover-ring);
@ -60,7 +63,8 @@ select:active {
background-image: background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%), linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
background-color: rgb(var(--form-input-background-focus-active)); background-color: rgb(var(--form-input-background-border-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-label-focus-active)); color: rgb(var(--form-label-focus-active));
outline: none; outline: none;
z-index: 2; z-index: 2;
@ -75,6 +79,7 @@ select:disabled:active {
background-image: background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%), linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled)); color: rgb(var(--form-input-text-disabled));
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
@ -93,17 +98,20 @@ textarea {
min-height: 2.5em; min-height: 2.5em;
min-width: 0; min-width: 0;
width: 100%; width: 100%;
border: 0; border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
cursor: text; cursor: text;
resize: vertical; resize: vertical;
display: block; display: block;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
-moz-appearance: textfield; -moz-appearance: textfield;
} }
textarea:hover { textarea:hover {
background-color: rgb(var(--form-input-background-hover)); background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-hover-ring);
@ -112,6 +120,7 @@ textarea:hover {
textarea:focus, textarea:focus,
textarea:active { textarea:active {
background-color: rgb(var(--form-input-background-focus-active)); background-color: rgb(var(--form-input-background-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active)); color: rgb(var(--form-input-text-focus-active));
outline: none; outline: none;
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-focus-ring-accent);
@ -119,6 +128,7 @@ textarea:active {
textarea:disabled { textarea:disabled {
background-color: rgb(var(--form-input-background-disabled)); background-color: rgb(var(--form-input-background-disabled));
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled)); color: rgb(var(--form-input-text-disabled));
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
@ -166,10 +176,12 @@ input[type="text"] {
height: 2.5em; height: 2.5em;
min-width: 0; min-width: 0;
width: 100%; width: 100%;
border: 0; border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
cursor: text; cursor: text;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
-moz-appearance: textfield; -moz-appearance: textfield;
} }
@ -190,6 +202,7 @@ input[type="search"]:hover,
input[type="tel"]:hover, input[type="tel"]:hover,
input[type="text"]:hover { input[type="text"]:hover {
background-color: rgb(var(--form-input-background-hover)); background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-hover-ring);
@ -208,6 +221,7 @@ input[type="tel"]:active,
input[type="text"]:focus, input[type="text"]:focus,
input[type="text"]:active { input[type="text"]:active {
background-color: rgb(var(--form-input-background-focus-active)); background-color: rgb(var(--form-input-background-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active)); color: rgb(var(--form-input-text-focus-active));
outline: none; outline: none;
z-index: 2; z-index: 2;
@ -221,6 +235,7 @@ input[type="search"]:disabled,
input[type="tel"]:disabled, input[type="tel"]:disabled,
input[type="text"]:disabled { input[type="text"]:disabled {
background-color: rgb(var(--form-input-background-disabled)); background-color: rgb(var(--form-input-background-disabled));
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled)); color: rgb(var(--form-input-text-disabled));
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
@ -623,10 +638,10 @@ input[type="range"]::-moz-range-thumb {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-width: 0; border-width: 0;
border-radius: 100%; border-radius: 50%;
position: relative; position: relative;
height: 1.25em; height: 1.5em;
width: 1.25em; width: 1.5em;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -809,7 +824,7 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button input[type="file"]:disabled:focus+label, .input-button input[type="file"]:disabled:focus+label,
.input-button input[type="file"]:disabled:active+label { .input-button input[type="file"]:disabled:active+label {
background-color: rgb(var(--button-background-disabled)); background-color: rgb(var(--button-background-disabled));
border-color: transparent; border-bottom-color: rgb(var(--button-border-disabled));
color: rgb(var(--button-text-disabled)); color: rgb(var(--button-text-disabled));
cursor: default; cursor: default;
} }
@ -1101,47 +1116,40 @@ input[type="range"]:disabled::-moz-range-progress {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 0; border: 0;
border-top-width: var(--layout-line-width); border-width: var(--layout-line-width);
border-bottom-width: var(--layout-line-width); border-color: rgb(var(--form-group-text-border));
border-style: solid; border-style: solid;
border-color: transparent;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
white-space: nowrap; white-space: nowrap;
transition: background-color var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
} }
.form-group-text:hover, .form-group-text:hover,
.form-group-text:focus { .form-group-text:focus {
background-color: rgb(var(--form-group-text-background-focus-hover)); background-color: rgb(var(--form-group-text-background-focus-hover));
border-color: rgb(var(--form-group-text-border-focus-hover));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
} }
.form-group-text:active { .form-group-text:active {
background-color: rgb(var(--form-group-text-background-active)); background-color: rgb(var(--form-group-text-background-active));
border-color: rgb(var(--form-group-text-border-active));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
} }
.form-group-text.disabled { .form-group-text.disabled,
.form-group-text.disabled:hover,
.form-group-text.disabled:focus,
.form-group-text.disable:active {
background-color: rgb(var(--form-group-text-background-disabled)); background-color: rgb(var(--form-group-text-background-disabled));
border-color: rgb(var(--form-group-text-border-disabled));
color: rgb(var(--form-input-text-disabled)); color: rgb(var(--form-input-text-disabled));
box-shadow: none; box-shadow: none;
cursor: default; cursor: default;
} }
.form-group-text.disabled:hover,
.form-group-text.disabled:focus {
background-color: rgb(var(--form-group-text-background-disabled));
color: rgb(var(--form-input-text-disabled));
}
.form-group-text.disable:active {
background-color: rgb(var(--form-group-text-background-disabled));
color: rgb(var(--form-input-text-disabled));
outline: none;
}
.form-group { .form-group {
margin: 0 0 1em 0; margin: 0 0 1em 0;
display: inline-flex; display: inline-flex;
@ -1270,15 +1278,15 @@ input[type="range"]:disabled::-moz-range-progress {
.form-dropdown-menu { .form-dropdown-menu {
background-color: rgb(var(--form-dropdown-background)); background-color: rgb(var(--form-dropdown-background));
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
padding: 0.5em 0; padding: var(--theme-radius) 0;
position: absolute; position: absolute;
top: calc(100% + calc(var(--layout-line-width) * 2)); top: calc(100% + calc(var(--layout-line-width) * 2));
left: 0; left: 0;
width: 100%; width: 100%;
min-width: 12em; min-width: 12em;
box-shadow: var(--layout-shadow-large); box-shadow: var(--layout-shadow-large);
display: none;
z-index: var(--z-index-dropdown); z-index: var(--z-index-dropdown);
display: none;
} }
.form-dropdown-open .form-dropdown-menu { .form-dropdown-open .form-dropdown-menu {

18
src/css/variables.css
View File

@ -88,7 +88,7 @@
--form-input-background: var(--theme-gray-02); --form-input-background: var(--theme-gray-02);
--form-input-background-hover: var(--theme-gray-02); --form-input-background-hover: var(--theme-gray-02);
--form-input-background-focus-active: var(--theme-gray-01); --form-input-background-focus-active: var(--theme-gray-01);
--form-input-background-disabled: var(--theme-gray-02); --form-input-background-disabled: var(--theme-gray-01);
--form-input-border: var(--theme-gray-02); --form-input-border: var(--theme-gray-02);
--form-input-border-hover: var(--theme-gray-02); --form-input-border-hover: var(--theme-gray-02);
--form-input-border-focus-active: var(--theme-gray-01); --form-input-border-focus-active: var(--theme-gray-01);
@ -96,8 +96,11 @@
--form-group-text-background: var(--theme-gray-02); --form-group-text-background: var(--theme-gray-02);
--form-group-text-background-focus-hover: var(--theme-gray-02); --form-group-text-background-focus-hover: var(--theme-gray-02);
--form-group-text-background-active: var(--theme-gray-02); --form-group-text-background-active: var(--theme-gray-02);
--form-group-text-background-disabled: var(--theme-gray-02); --form-group-text-background-disabled: var(--theme-gray-01);
--form-input-border-disabled: var(--theme-gray-02); --form-group-text-border: var(--theme-gray-02);
--form-group-text-border-focus-hover: var(--theme-gray-02);
--form-group-text-border-active: var(--theme-gray-02);
--form-group-text-border-disabled: var(--theme-gray-01);
--form-border-disabled: var(--theme-gray-02); --form-border-disabled: var(--theme-gray-02);
--form-icon: var(--theme-gray-08); --form-icon: var(--theme-gray-08);
--form-icon-hover-focus: var(--theme-gray-20); --form-icon-hover-focus: var(--theme-gray-20);
@ -114,7 +117,7 @@
--form-feedback-text-muted: var(--theme-gray-12); --form-feedback-text-muted: var(--theme-gray-12);
--form-feedback-text-disabled: var(--theme-gray-04); --form-feedback-text-disabled: var(--theme-gray-04);
--form-feedback-background: var(--theme-gray-02); --form-feedback-background: var(--theme-gray-02);
--form-feedback-background-disabled: var(--theme-gray-02); --form-feedback-background-disabled: var(--theme-gray-01);
--form-feedback-border: var(--theme-gray-04); --form-feedback-border: var(--theme-gray-04);
--form-feedback-border-disabled: var(--theme-gray-02); --form-feedback-border-disabled: var(--theme-gray-02);
--form-helper: var(--theme-gray-12); --form-helper: var(--theme-gray-12);
@ -122,7 +125,7 @@
--form-range-thumb-background: var(--theme-gray-14); --form-range-thumb-background: var(--theme-gray-14);
--form-range-thumb-background-focus-hover: var(--theme-gray-16); --form-range-thumb-background-focus-hover: var(--theme-gray-16);
--form-range-thumb-background-active: var(--theme-style-text); --form-range-thumb-background-active: var(--theme-style-text);
--form-range-thumb-background-disabled: var(--theme-gray-04); --form-range-thumb-background-disabled: var(--theme-gray-03);
--form-range-track-background: var(--theme-gray-06); --form-range-track-background: var(--theme-gray-06);
--form-range-track-background-focus-hover: var(--theme-gray-04); --form-range-track-background-focus-hover: var(--theme-gray-04);
--form-range-track-background-active: var(--theme-gray-03); --form-range-track-background-active: var(--theme-gray-03);
@ -139,7 +142,7 @@
--form-grid-background: var(--theme-gray-02); --form-grid-background: var(--theme-gray-02);
--form-grid-background-hover: var(--theme-gray-02); --form-grid-background-hover: var(--theme-gray-02);
--form-grid-background-focus: var(--theme-gray-02); --form-grid-background-focus: var(--theme-gray-02);
--form-grid-background-disabled: var(--theme-gray-02); --form-grid-background-disabled: var(--theme-gray-01);
--form-grid-border: var(--theme-gray-08); --form-grid-border: var(--theme-gray-08);
--form-grid-border-hover-focus: var(--theme-gray-20); --form-grid-border-hover-focus: var(--theme-gray-20);
--form-grid-border-active: var(--theme-accent); --form-grid-border-active: var(--theme-accent);
@ -154,10 +157,11 @@
--button-background: var(--theme-gray-02); --button-background: var(--theme-gray-02);
--button-background-focus-hover: var(--theme-gray-03); --button-background-focus-hover: var(--theme-gray-03);
--button-background-active: var(--theme-gray-04); --button-background-active: var(--theme-gray-04);
--button-background-disabled: var(--theme-gray-02); --button-background-disabled: var(--theme-gray-01);
--button-border: var(--theme-gray-02); --button-border: var(--theme-gray-02);
--button-border-focus-hover: var(--theme-gray-08); --button-border-focus-hover: var(--theme-gray-08);
--button-border-active: var(--theme-accent); --button-border-active: var(--theme-accent);
--button-border-disabled: var(--theme-gray-01);
--button-text: var(--theme-gray-12); --button-text: var(--theme-gray-12);
--button-text-focus-hover: var(--theme-style-text); --button-text-focus-hover: var(--theme-style-text);
--button-text-focus-active: var(--theme-style-text); --button-text-focus-active: var(--theme-style-text);