jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Break out properties for disabled buttons 

Instead of marking the hover selector with ":not(:disabled)" we can
break out this into its own section. This makes things easier to read.
In order to ensure the correct selector prioritization we also reorder
the file a bit.
This commit is contained in:
Samuel Mannehed 2022-12-09 16:15:52 +01:00
parent 629a6cacb9
commit 4050f0e248
1 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/styles/input.css
View File

@ -175,6 +175,34 @@ input::file-selector-button {
margin-right: 6px; margin-right: 6px;
} }
:root:not(.noVNC_touch) input[type=button]:hover,
:root:not(.noVNC_touch) input[type=color]:hover,
:root:not(.noVNC_touch) input[type=image]:hover,
:root:not(.noVNC_touch) input[type=reset]:hover,
:root:not(.noVNC_touch) input[type=submit]:hover,
:root:not(.noVNC_touch) input::file-selector-button:hover,
:root:not(.noVNC_touch) button:hover {
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
}
:root:not(.noVNC_touch) select:hover {
background-image: var(--select-arrow),
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
background-position: calc(100% - 7px), left top;
background-repeat: no-repeat;
}
input[type=button]:active,
input[type=color]:active,
input[type=image]:active,
input[type=reset]:active,
input[type=submit]:active,
input::file-selector-button:active,
button:active,
select:active {
border-bottom-width: 1px;
margin-top: 1px;
}
input:not([type]):focus-visible, input:not([type]):focus-visible,
input[type=button]:focus-visible, input[type=button]:focus-visible,
input[type=checkbox]:focus-visible, input[type=checkbox]:focus-visible,
@ -235,31 +263,20 @@ select:disabled,
textarea:disabled { textarea:disabled {
opacity: 0.4; opacity: 0.4;
} }
:root:not(.noVNC_touch) input[type=button]:disabled,
input[type=button]:active, :root:not(.noVNC_touch) input[type=color]:disabled,
input[type=color]:active, :root:not(.noVNC_touch) input[type=image]:disabled,
input[type=image]:active, :root:not(.noVNC_touch) input[type=reset]:disabled,
input[type=reset]:active, :root:not(.noVNC_touch) input[type=submit]:disabled,
input[type=submit]:active, :root:not(.noVNC_touch) input:disabled::file-selector-button,
input::file-selector-button:active, :root:not(.noVNC_touch) button:disabled,
button:active, :root:not(.noVNC_touch) select:disabled {
select:active { background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
border-bottom-width: 1px;
margin-top: 1px;
} }
input[type=file]:disabled {
:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), background-image: none;
:root:not(.noVNC_touch) input[type=color]:hover:not(:disabled),
:root:not(.noVNC_touch) input[type=image]: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) input::file-selector-button:hover:not(:disabled),
:root:not(.noVNC_touch) button:hover:not(:disabled) {
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
} }
:root:not(.noVNC_touch) select:hover:not(:disabled) { :root:not(.noVNC_touch) select:disabled {
background-image: var(--select-arrow), background-image: var(--select-arrow),
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
background-position: calc(100% - 7px), left top;
background-repeat: no-repeat;
} }