163 lines
4.4 KiB
CSS
163 lines
4.4 KiB
CSS
/* Screenshot UI */
|
|
|
|
/* main screenshot panel section */
|
|
.screenshot-ui-panel {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: BACKGROUND-COLOR;
|
|
border: 1px solid BORDER-MENU-SHADOW;
|
|
border-radius: 22px;
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.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,
|
|
.screenshot-ui-type-button:checked:hover,
|
|
.screenshot-ui-show-pointer-button:checked:focus,
|
|
.screenshot-ui-type-button:checked:focus {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
.screenshot-ui-show-pointer-button:insensitive,
|
|
.screenshot-ui-type-button:insensitive {
|
|
color: TEXT-DISABLED-COLOR;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
|
|
border-color: ACCENT-COLOR;
|
|
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;
|
|
border-radius: 99px;
|
|
border: 4px ACCENT-SECONDARY-COLOR;
|
|
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,
|
|
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
|
|
background-color: ACCENT-SECONDARY_HOVER;
|
|
}
|
|
|
|
.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle,
|
|
.screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
|
|
background-color: ACCENT-SECONDARY_HOVER;
|
|
}
|
|
|
|
/* capture button when Screencast */
|
|
.screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
|
|
background-color: #c01c28;
|
|
}
|
|
|
|
.screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle,
|
|
.screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle {
|
|
background-color: #d61f2d;
|
|
}
|
|
|
|
.screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle {
|
|
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;
|
|
}
|
|
|
|
.screenshot-ui-shot-cast-button:hover,
|
|
.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 {
|
|
background-color: ACCENT-SECONDARY-COLOR;
|
|
color: TEXT-INVERTED-COLOR;
|
|
}
|
|
|
|
|
|
/* tooltip for elements */
|
|
.screenshot-ui-tooltip {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: SECTION-COLOR;
|
|
padding: 6px 12px;
|
|
border: 1px solid BORDER-SHADOW;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
|
|
.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;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.window-close:hover,
|
|
.screenshot-ui-close-button:hover {
|
|
background-color: CLOSE-BUTTON_HOVER;
|
|
} |