improved input file styling

This commit is contained in:
Maxim Devaev 2021-07-31 20:13:48 +03:00
parent 837283292c
commit 2895339f30

View File

@ -137,12 +137,16 @@ select.key {
@media (hover: hover), (min--moz-device-pixel-ratio: 0) { @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */ /* If we have a mouse cursor */
button:enabled:hover, button:enabled:hover,
select:enabled:hover { select:enabled:hover,
input[type=file]:enabled:hover::-webkit-file-selector-button,
input[type=file]:enabled:hover::file-selector-button {
color: var(--cs-control-hovered-fg); color: var(--cs-control-hovered-fg);
background-color: var(--cs-control-hovered-bg); background-color: var(--cs-control-hovered-bg);
} }
button:active, button:active,
select:active { select:active,
input[type=file]:active::-webkit-file-selector-button,
input[type=file]:active::file-selector-button {
color: var(--cs-control-pressed-fg) !important; color: var(--cs-control-pressed-fg) !important;
background-color: var(--cs-control-pressed-bg) !important; background-color: var(--cs-control-pressed-bg) !important;
} }
@ -157,13 +161,17 @@ select.key {
@media (hover: none) { @media (hover: none) {
/* If we DON'T have a mouse cursor */ /* If we DON'T have a mouse cursor */
button:active, button:active,
select:active { select:active,
input[type=file]:active::-webkit-file-selector-button,
input[type=file]:active::file-selector-button {
color: var(--cs-control-hovered-fg); color: var(--cs-control-hovered-fg);
background-color: var(--cs-control-hovered-bg); background-color: var(--cs-control-hovered-bg);
} }
} }
button:disabled, button:disabled,
select:disabled { select:disabled,
input[type=file]:disabled::-webkit-file-selector-button,
input[type=file]:disabled::file-selector-button {
color: var(--cs-control-disabled-fg); color: var(--cs-control-disabled-fg);
cursor: default; cursor: default;
} }