Optimize styles: added comments, fixed some styles, changed some styles order

This commit is contained in:
Vladyslav Hroshev
2023-06-20 13:56:14 +03:00
parent f3dd3eb436
commit d4c8eddd8a
17 changed files with 435 additions and 371 deletions
+37 -19
View File
@@ -1,4 +1,6 @@
/* screenshot ui */
/* Screenshot UI */
/* main screenshot panel section */
.screenshot-ui-panel {
color: TEXT-PRIMARY-COLOR;
background-color: BACKGROUND-COLOR;
@@ -7,13 +9,28 @@
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
}
.screenshot-ui-show-pointer-button,
.screenshot-ui-type-button {
.screenshot-ui-show-pointer-button, /* show pointer */
.screenshot-ui-type-button { /* Selection / Screen / Window */
color: TEXT-PRIMARY-COLOR;
border-radius: 15px;
transition-duration: 100ms;
}
.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:focus,
.screenshot-ui-type-button:focus {
background: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR;
}
.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:active,
.screenshot-ui-type-button:active {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
.screenshot-ui-show-pointer-button:checked,
.screenshot-ui-type-button:checked,
.screenshot-ui-show-pointer-button:checked:hover,
@@ -25,30 +42,18 @@
color: TEXT-PRIMARY-COLOR;
}
.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:focus,
.screenshot-ui-type-button:focus {
background: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR;
}
.screenshot-ui-show-pointer-button:insensitive,
.screenshot-ui-type-button:insensitive {
color: TEXT-DISABLED-COLOR;
}
.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:active,
.screenshot-ui-type-button:active {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
/* window selection backround */
.screenshot-ui-window-selector {
background-color: SECTION-COLOR;
}
/* window border when selecting */
.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
border-color: ACCENT-COLOR;
}
@@ -58,11 +63,14 @@
background-color: ACCENT-OPACITY-COLOR;
}
/* check icon when selected window */
.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
color: TEXT-PRIMARY-COLOR;
background-color: ACCENT-COLOR;
}
/* circle around capture button */
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
@@ -71,10 +79,12 @@
padding: 4px;
}
/* capture button */
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
background-color: ACCENT-SECONDARY-COLOR;
transition-duration: 100ms;
border-radius: 99px;
background-color: #a11722;
}
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover,
@@ -87,6 +97,7 @@
background-color: ACCENT-SECONDARY_HOVER;
}
/* capture button when Screencast */
.screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
background-color: #c01c28;
}
@@ -100,11 +111,14 @@
background-color: #a11722;
}
/* screenshot / screencast buttons section */
.screenshot-ui-shot-cast-container {
background-color: ACCENT-DISABLED-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
/* screenshot / screencast buttons */
.screenshot-ui-shot-cast-button {
background-color: transparent;
transition-duration: 100ms;
@@ -114,6 +128,7 @@
.screenshot-ui-shot-cast-button:focus,
.screenshot-ui-shot-cast-button:active {
background-color: ACCENT-DISABLED_HOVER;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
.screenshot-ui-shot-cast-button:checked {
@@ -121,6 +136,8 @@
color: TEXT-INVERTED-COLOR;
}
/* tooltip for elements */
.screenshot-ui-tooltip {
color: TEXT-PRIMARY-COLOR;
background-color: SECTION-COLOR;
@@ -130,8 +147,9 @@
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}
.window-close,
.screenshot-ui-close-button {
.window-close, /* close button (Overview - Workspaces - Selected window) */
.screenshot-ui-close-button { /* close button (Screenshot UI) */
background-color: CLOSE-BUTTON-COLOR;
color: TEXT-PRIMARY-COLOR;
border: 1px solid BORDER-SHADOW;