Use photon-like styling for dark widgets

This commit is contained in:
hensm
2020-02-17 10:07:36 +00:00
parent eebafa656f
commit 652fd21f77

View File

@@ -1,20 +1,20 @@
button,
.select-wrapper,
input {
background-color: var(--grey-60);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 3px;
input,
textarea,
.select-wrapper {
background-color: #474749;
border: initial;
border-radius: 2px;
overflow: hidden;
color: white;
}
button:not(:disabled):hover,
.select-wrapper:not(:disabled):hover,
input[type="checkbox"]:not(:disabled):hover {
background-color: var(--grey-50);
.select-wrapper:not(:disabled):hover {
background-color: #505054;
}
button:not(:disabled):hover:active,
.select-wrapper:not(:disabled):hover:active,
input[type="checkbox"]:not(:disabled):hover:active {
background-color: rgb(94, 94, 99);
.select-wrapper:not(:disabled):hover:active {
background-color: #5c5c5e;
}
button:disabled,
@@ -22,36 +22,20 @@ input:disabled {
opacity: 0.35;
}
input[type="text"],
input[type="number"] {
padding: 2px;
}
input[type="checkbox"] {
-moz-appearance: none;
}
input[type="checkbox"]:checked {
background-color: var(--blue-60);
padding: 2px;
background-clip: content-box;
}
input[type="checkbox"]:not(:disabled):checked:hover {
background-color: var(--blue-50);
}
input[type="checkbox"]:not(:disabled):checked:hover:active {
background-color: var(--blue-70);
input,
textarea {
padding: 2px 4px;
}
button:default {
background-color: var(--blue-60);
color: white !important;
}
button:default:hover {
background-color: var(--blue-50);
background-color: var(--blue-70);
}
button:default:hover:active {
background-color: var(--blue-70);
background-color: var(--blue-80);
}
.select-wrapper {
@@ -83,4 +67,4 @@ option {
}
option:disabled {
color: rgba(255, 255, 255, 0.25) !important;
}
}