From 7315ecdd1ae36df20b36ca3102359e9c64270154 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 20 Feb 2021 17:09:58 -0500
Subject: [PATCH] Refactor styles (#1425)

* Replace :not(:disabled) styles

* Use var for style

* Update active styles

* Update disabled styles for <input> elements

* Update button disabled styles

* Add focus styles to checkbox

* Update style name
---
 ext/css/display.css  |  19 +++--
 ext/css/material.css | 175 +++++++++++++++++++++++++++----------------
 2 files changed, 122 insertions(+), 72 deletions(-)

diff --git a/ext/css/display.css b/ext/css/display.css
index 2e789cb7..44b607ee 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -498,23 +498,27 @@ button.sidebar-button:active,
 button.sidebar-button:focus {
     box-shadow: none;
 }
-button.sidebar-button:hover:not(:disabled),
-button.sidebar-button:focus:not(:disabled) {
+button.sidebar-button:hover,
+button.sidebar-button:focus {
     background-color: var(--sidebar-button-background-color-hover);
 }
-button.sidebar-button:active:not(:disabled) {
+button.sidebar-button:active {
     background-color: var(--sidebar-button-background-color-active);
 }
 button.sidebar-button.danger {
     background-color: var(--sidebar-button-danger-background-color);
 }
-button.sidebar-button.danger:hover:not(:disabled),
-button.sidebar-button.danger:focus:not(:disabled) {
+button.sidebar-button.danger:hover,
+button.sidebar-button.danger:focus {
     background-color: var(--sidebar-button-danger-background-color-hover);
 }
-button.sidebar-button.danger:active:not(:disabled) {
+button.sidebar-button.danger:active {
     background-color: var(--sidebar-button-danger-background-color-active);
 }
+button.sidebar-button:disabled,
+button.sidebar-button.danger:disabled {
+    background-color: var(--sidebar-button-background-color);
+}
 .sidebar-button-icon {
     --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
 
@@ -524,7 +528,8 @@ button.sidebar-button.danger:active:not(:disabled) {
     background-color: var(--sidebar-button-icon-color);
     transition: background-color 0.125s ease-in-out;
 }
-button.sidebar-button:disabled .sidebar-button-icon {
+button.sidebar-button:disabled .sidebar-button-icon,
+button.sidebar-button.danger:disabled .sidebar-button-icon {
     background-color: var(--sidebar-button-disabled-icon-color);
 }
 button.sidebar-button.danger:hover .sidebar-button-icon,
diff --git a/ext/css/material.css b/ext/css/material.css
index f9ab59bf..9745d27e 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -51,6 +51,17 @@
     --menu-border-radius: 0.3em;
     --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color);
 
+    --selectable-indicator-transition1:
+        transform 0s ease-in-out var(--animation-duration2),
+        background-color var(--animation-duration2) ease-in-out,
+        opacity var(--animation-duration2) ease-in-out,
+        visibility 0s ease-in-out var(--animation-duration2);
+    --selectable-indicator-transition2:
+        transform var(--animation-duration2) ease-in-out,
+        background-color var(--animation-duration2) ease-in-out,
+        opacity var(--animation-duration2) ease-in-out,
+        visibility var(--animation-duration2) ease-in-out;
+
     --text-color: #222222;
     --text-color-light1: #555555;
     --text-color-light2: #666666;
@@ -316,6 +327,43 @@ label.checkbox {
 .checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-check {
     background-color: var(--checkbox-disabled-color);
 }
+.checkbox-body::after {
+    position: absolute;
+    display: block;
+    content: '';
+    left: -0.75em;
+    top: -0.75em;
+    right: -0.75em;
+    bottom: -0.75em;
+    border-radius: 2.5em;
+    background-color: var(--selectable-indicator-color);
+    pointer-events: none;
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
+.checkbox>input[type=checkbox]:focus+.checkbox-body::after,
+.checkbox>input[type=checkbox]:active+.checkbox-body::after,
+.checkbox:active>input[type=checkbox]+.checkbox-body::after {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+    transition: var(--selectable-indicator-transition2);
+}
+.checkbox>input[type=checkbox]:focus+.checkbox-body::after {
+    opacity: 0.5;
+}
+.checkbox>input[type=checkbox]:active:focus+.checkbox-body::after,
+.checkbox:active>input[type=checkbox]:focus+.checkbox-body::after {
+    opacity: 1;
+}
+.checkbox>input[type=checkbox]:disabled+.checkbox-body::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
 
 
 /* Toggle switch */
@@ -386,40 +434,35 @@ label.toggle {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition:
-        transform 0s ease-in-out var(--animation-duration2),
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility 0s ease-in-out var(--animation-duration2);
+    transition: var(--selectable-indicator-transition1);
 }
-.toggle>input[type=checkbox]:focus:not(:disabled)+.toggle-body>.toggle-knob::after,
-.toggle:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after {
+.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after,
+.toggle>input[type=checkbox]:active+.toggle-body>.toggle-knob::after,
+.toggle:active>input[type=checkbox]+.toggle-body>.toggle-knob::after {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition:
-        transform var(--animation-duration2) ease-in-out,
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility var(--animation-duration2) ease-in-out;
+    transition: var(--selectable-indicator-transition2);
 }
 .toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
     opacity: 0.5;
 }
+.toggle>input[type=checkbox]:active:focus+.toggle-body>.toggle-knob::after,
 .toggle:active>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
     opacity: 1;
 }
 .toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
     transform: translateX(1em);
 }
-.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-track {
+.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-track {
     background-color: var(--accent-color-lighter);
 }
-.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob {
+.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
     background-color: var(--accent-color);
 }
-.toggle>input[type=checkbox]:focus:checked:not(:disabled)+.toggle-body>.toggle-knob::after,
-.toggle:active>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob::after {
+.toggle>input[type=checkbox]:focus:checked+.toggle-body>.toggle-knob::after,
+.toggle>input[type=checkbox]:active:checked+.toggle-body>.toggle-knob::after,
+.toggle:active>input[type=checkbox]:checked+.toggle-body>.toggle-knob::after {
     background-color: var(--accent-color-transparent25);
 }
 .toggle>input[type=checkbox]:disabled+.toggle-body {
@@ -431,6 +474,12 @@ label.toggle {
 .toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob {
     background-color: var(--disabled-color-lighter);
 }
+.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
 
 
 /* Radio button */
@@ -449,20 +498,20 @@ label.radio {
     margin: 0;
     padding: 0;
     border: none;
-    cursor: default;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
 }
-.radio>input[type=radio]:not(:disabled)+.radio-body {
-    cursor: pointer;
-}
 .radio-body {
+    cursor: pointer;
     display: block;
     position: relative;
     width: var(--radio-size);
     height: var(--radio-size);
 }
+.radio>input[type=radio]:disabled+.radio-body {
+    cursor: default;
+}
 .radio-border,
 .radio-dot {
     display: block;
@@ -521,29 +570,29 @@ label.radio {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition:
-        transform 0s ease-in-out var(--animation-duration2),
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility 0s ease-in-out var(--animation-duration2);
+    transition: var(--selectable-indicator-transition1);
 }
-.radio>input[type=radio]:focus:not(:disabled)+.radio-body::after,
-.radio:active>input[type=radio]:not(:disabled)+.radio-body::after {
+.radio>input[type=radio]:focus+.radio-body::after,
+.radio>input[type=radio]:active+.radio-body::after,
+.radio:active>input[type=radio]+.radio-body::after {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition:
-        transform var(--animation-duration2) ease-in-out,
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility var(--animation-duration2) ease-in-out;
+    transition: var(--selectable-indicator-transition2);
 }
 .radio>input[type=radio]:focus+.radio-body::after {
     opacity: 0.5;
 }
+.radio>input[type=radio]:active:focus+.radio-body::after,
 .radio:active>input[type=radio]:focus+.radio-body::after {
     opacity: 1;
 }
+.radio>input[type=radio]:disabled+.radio-body::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
 .radio-label {
     cursor: pointer;
     white-space: nowrap;
@@ -692,93 +741,95 @@ button:focus {
 button:hover {
     transition: background-color var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out, border-color var(--animation-duration) ease-out;
 }
-button:hover:not(:disabled) {
+button:hover {
     box-shadow: var(--button-shadow-params) var(--shadow-color-light);
 }
-button:active:not(:disabled) {
+button:active {
     box-shadow: var(--button-shadow-params) var(--shadow-color);
 }
 
 /* Standard button */
-button:not(:disabled) {
+button {
     color: var(--button-text-color);
     border-color: var(--accent-color);
     background-color: var(--accent-color);
 }
-button:hover:not(:disabled) {
+button:hover {
     background-color: var(--accent-color-light);
     border-color: var(--accent-color-light);
 }
-button:focus:not(:disabled) {
+button:focus {
     background-color: var(--accent-color-light);
 }
-button:active:not(:disabled) {
+button:active {
     border-color: var(--accent-color-lighter);
     background-color: var(--accent-color-lighter);
 }
 
 /* Standard danger button */
-button.danger:not(:disabled) {
+button.danger {
     color: var(--button-text-color);
     border-color: var(--danger-color);
     background-color: var(--danger-color);
 }
-button.danger:hover:not(:disabled) {
+button.danger:hover {
     background-color: var(--danger-color-light);
     border-color: var(--danger-color-light);
 }
-button.danger:focus:not(:disabled) {
+button.danger:focus {
     background-color: var(--danger-color-light);
 }
-button.danger:active:not(:disabled) {
+button.danger:active {
     border-color: var(--danger-color-lighter);
     background-color: var(--danger-color-lighter);
 }
 
 /* Low emphasis button */
-button.low-emphasis:not(:disabled) {
+button.low-emphasis {
     color: var(--accent-color);
     border-color: var(--button-border-color);
     background-color: var(--accent-color-transparent0);
 }
-button.low-emphasis:hover:not(:disabled) {
+button.low-emphasis:hover {
     background-color: var(--accent-color-transparent5);
     border-color: var(--accent-color-light);
 }
-button.low-emphasis:focus:not(:disabled) {
+button.low-emphasis:focus {
     border-color: var(--accent-color);
 }
-button.low-emphasis:active:not(:disabled) {
+button.low-emphasis:active {
     border-color: var(--accent-color);
     background-color: var(--accent-color-transparent25);
 }
 
 /* Low emphasis danger button */
-button.low-emphasis.danger:not(:disabled) {
+button.low-emphasis.danger {
     color: var(--danger-color);
     border-color: var(--button-border-color);
     background-color: var(--danger-color-transparent0);
 }
-button.low-emphasis.danger:hover:not(:disabled) {
+button.low-emphasis.danger:hover {
     border-color: var(--danger-color-light);
     background-color: var(--danger-color-transparent5);
 }
-button.low-emphasis.danger:focus:not(:disabled) {
+button.low-emphasis.danger:focus {
     border-color: var(--danger-color);
 }
-button.low-emphasis.danger:active:not(:disabled) {
+button.low-emphasis.danger:active {
     border-color: var(--danger-color);
     background-color: var(--danger-color-transparent25);
 }
 
 /* Disabled buttons */
-button:disabled {
+button:disabled,
+button.danger:disabled {
     color: var(--button-text-color);
     border-color: var(--disabled-color);
     background-color: var(--disabled-color);
     cursor: default;
 }
-button.low-emphasis:disabled {
+button.low-emphasis:disabled,
+button.low-emphasis.danger:disabled {
     color: var(--disabled-color);
     border-color: var(--disabled-color);
     background-color: transparent;
@@ -869,21 +920,13 @@ button.icon-button:active {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition:
-        transform 0s ease-in-out var(--animation-duration2),
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility 0s ease-in-out var(--animation-duration2);
+    transition: var(--selectable-indicator-transition1);
 }
 .icon-button:focus>.icon-button-inner::after {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition:
-        transform var(--animation-duration2) ease-in-out,
-        background-color var(--animation-duration2) ease-in-out,
-        opacity var(--animation-duration2) ease-in-out,
-        visibility var(--animation-duration2) ease-in-out;
+    transition: var(--selectable-indicator-transition2);
 }
 .icon-button>.icon-button-inner>.icon {
     display: block;
@@ -961,17 +1004,19 @@ button.popup-menu-item {
 button.popup-menu-item:not([hidden]) {
     display: flex;
 }
-button.popup-menu-item:hover:not(:disabled),
-button.popup-menu-item:focus:not(:disabled) {
+button.popup-menu-item:hover,
+button.popup-menu-item:focus {
     background-color: var(--menu-item-hover-color);
     box-shadow: none;
 }
-button.popup-menu-item:active:not(:disabled) {
+button.popup-menu-item:active {
     background-color: var(--menu-item-active-color);
     box-shadow: none;
 }
 button.popup-menu-item:disabled {
     color: var(--text-color-light2);
+    background-color: transparent;
+    box-shadow: none;
 }
 .popup-menu-item-icon {
     width: calc(16em / 14);