|
|
|
|
/* Apps / Dash */
|
|
|
|
|
|
|
|
|
|
/* Apps Running */
|
|
|
|
|
|
|
|
|
|
#dash .dash-item-container .app-grid-running-dot {
|
|
|
|
|
margin-bottom: 21px;
|
|
|
|
|
background-color: rgba(255, 90, 153, 1); }
|
|
|
|
|
|
|
|
|
|
/* apps / folders / apps & folders in search */
|
|
|
|
|
.app-well-app .overview-icon,
|
|
|
|
|
.app-well-app.app-folder .overview-icon,
|
|
|
|
|
.grid-search-result .overview-icon,
|
|
|
|
|
.app-folder.grid-search-result .overview-icon {
|
|
|
|
|
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile .app-grid-running-dot {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile:hover .app-grid-running-dot {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile:active .app-grid-running-dot {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-grid .overview-tile:active {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Show Apps icon */
|
|
|
|
|
.show-apps .overview-icon {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.show-apps:hover .overview-icon,
|
|
|
|
|
.show-apps:focus .overview-icon,
|
|
|
|
|
#dash .show-apps:hover .overview-icon,
|
|
|
|
|
#dash .show-apps:focus .overview-icon {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*.show-apps:active .overview-icon,
|
|
|
|
|
.show-apps .overview-icon:insensitive*/
|
|
|
|
|
|
|
|
|
|
#dash .show-apps:active .overview-icon {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* folders */
|
|
|
|
|
.app-well-app.app-folder .overview-icon {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.app-well-app:hover .overview-icon,
|
|
|
|
|
.app-well-app:focus .overview-icon,
|
|
|
|
|
.app-well-app:selected .overview-icon,
|
|
|
|
|
.app-well-app.app-folder .overview-icon {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* app icons effects in dash */
|
|
|
|
|
#dash .app-well-app:hover .overview-icon,
|
|
|
|
|
#dash .app-well-app:focus .overview-icon,
|
|
|
|
|
#dash .app-well-app:selected .overview-icon {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* effect when creating new folder */
|
|
|
|
|
.app-well-app:drop .overview-icon,
|
|
|
|
|
.grid-search-result:drop .overview-icon,
|
|
|
|
|
.app-well-app.app-folder:drop .overview-icon,
|
|
|
|
|
.app-folder.grid-search-result:drop .overview-icon {
|
|
|
|
|
border: 2px solid rgba(148, 102, 153, 1);
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Collapsed folders */
|
|
|
|
|
|
|
|
|
|
/* collapsed folder dialog */
|
|
|
|
|
.app-folder-dialog {
|
|
|
|
|
border-radius: 32px;
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 0; /* because of icon grid */
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* folder title */
|
|
|
|
|
.app-folder-dialog .folder-name-container .folder-name-label {
|
|
|
|
|
padding: 5px 7px;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* folder title when editing */
|
|
|
|
|
.app-folder-dialog .folder-name-container .folder-name-entry {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
selection-background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
selected-color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* edit folder name button */
|
|
|
|
|
.app-folder-dialog .folder-name-container .edit-folder-button {
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-folder-dialog .folder-name-container .edit-folder-button:hover {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-folder-dialog .folder-name-container .edit-folder-button:focus {
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.page-indicator .page-indicator-icon {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Page arrow */
|
|
|
|
|
.page-navigation-arrow {
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-arrow > StIcon {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
box-shadow: rgba(255, 167, 199, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-arrow:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-arrow:hover > StIcon {
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-arrow:active {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-arrow:active > StIcon {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* left and right hints on edges of the screen when dragging app icon */
|
|
|
|
|
.page-navigation-hint.next:ltr,
|
|
|
|
|
.page-navigation-hint.previous:rtl {
|
|
|
|
|
background-gradient-start: rgba(91, 2, 99, 0.05);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigation-hint.previous:ltr,
|
|
|
|
|
.page-navigation-hint.next:rtl {
|
|
|
|
|
background-gradient-end: rgba(91, 2, 99, 0.05);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Dash */
|
|
|
|
|
|
|
|
|
|
#dash .dash-background {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
border: none; /* remove black border on ubuntu */
|
|
|
|
|
padding: 4px 2px 4px 2px;
|
|
|
|
|
border-radius: 21px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* if used Dash to Dock extension */
|
|
|
|
|
#dashtodockContainer #dash .dash-background {
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
transition-duration: 250ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* when dash in overview */
|
|
|
|
|
#dashtodockContainer.overview #dash .dash-background {
|
|
|
|
|
box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
background-color: rgba(242, 214, 244, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* popup label when hovering the app in dash */
|
|
|
|
|
.dash-label {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* pill below if app is running */
|
|
|
|
|
.app-well-app-running-dot {
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: rgba(148, 102, 153, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#dash .app-well-app:hover .app-well-app-running-dot {
|
|
|
|
|
width: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#dashtodockContainer .app-well-app.focused .app-well-app-running-dot {
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* pill when default dash (not dash to dock) */
|
|
|
|
|
#dash .app-well-app-running-dot {
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* elements in dash */
|
|
|
|
|
.dash-item-container .app-well-app .overview-icon,
|
|
|
|
|
.dash-item-container .show-apps .overview-icon {
|
|
|
|
|
border-radius: 21px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* pinned apps | running apps */
|
|
|
|
|
.dash-separator {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ubuntu fix */
|
|
|
|
|
#dashtodockContainer #dash .app-well-app:hover .overview-icon,
|
|
|
|
|
#dashtodockContainer #dash .app-well-app:focus .overview-icon,
|
|
|
|
|
#dashtodockContainer #dash .app-well-app:selected .overview-icon,
|
|
|
|
|
#dashtodockContainer #dash .show-apps:hover .overview-icon,
|
|
|
|
|
#dashtodockContainer #dash .show-apps:focus .overview-icon,
|
|
|
|
|
#dashtodockContainer .show-apps:selected .overview-icon,
|
|
|
|
|
#dashtodockContainer .show-apps:selected:hover .overview-icon,
|
|
|
|
|
#dashtodockContainer .show-apps:active .overview-icon,
|
|
|
|
|
#dashtodockContainer .show-apps:checked .overview-icon,
|
|
|
|
|
#dashtodockContainer .app-well-app.focused .overview-icon {
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ubuntu fix */
|
|
|
|
|
#dashtodockContainer.bottom.extended #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.bottom.extended.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.bottom.extended.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended.shrink #dash .dash-background {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background-color: rgba(251, 247, 251, 1);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
transition-duration: 250ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* animation fix when extended dash */
|
|
|
|
|
#dashtodockContainer.bottom.extended.overview #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.bottom.extended.overview.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.bottom.extended.overview.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended.overview #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended.overview.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.top.extended.overview.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended.overview #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended.overview.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.left.extended.overview.shrink #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended.overview #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended.overview.dashtodock #dash .dash-background,
|
|
|
|
|
#dashtodockContainer.right.extended.overview.shrink #dash .dash-background {
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Aylur's widgets extension */
|
|
|
|
|
|
|
|
|
|
/* adjust media / message / slider container in quick settings */
|
|
|
|
|
.quick-settings.tweaked .media,
|
|
|
|
|
.quick-settings.tweaked .message,
|
|
|
|
|
.quick-settings.tweaked .quick-container {
|
|
|
|
|
background-color: rgba(255, 0, 136, 0.2);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ajust sliders margins */
|
|
|
|
|
.quick-settings.tweaked .quick-container .quick-slider {
|
|
|
|
|
margin: 2.5px 0 2.5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-settings.tweaked .quick-container .quick-slider:first-child {
|
|
|
|
|
margin: 0 0 2.5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-settings.tweaked .quick-container .quick-slider:last-child {
|
|
|
|
|
margin: 2.5px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-settings.tweaked .quick-container .quick-slider:first-child:last-child {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.quick-settings.tweaked .media {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* adjust roundness in quick toggle arrow */
|
|
|
|
|
.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:ltr {
|
|
|
|
|
border-radius: 0 36px 36px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:rtl {
|
|
|
|
|
border-radius: 36px 0 0 36px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* system usage */
|
|
|
|
|
.level-bar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* system usage levels */
|
|
|
|
|
.usage-level StIcon {
|
|
|
|
|
width: 1.29em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* dynamic-panel */
|
|
|
|
|
#panel.dynamic.floating .panel-button,
|
|
|
|
|
#panel.dynamic.floating .panel-button .clock, /* Date & clock */
|
|
|
|
|
#panel.dynamic.floating .clock-display StIcon { /* DND / new messages icon */
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Check Boxes */
|
|
|
|
|
|
|
|
|
|
.check-box StBoxLayout {
|
|
|
|
|
spacing: .8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-box StBin {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
background-image: url("checkbox-off.svg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-box:focus StBin {
|
|
|
|
|
background-image: url("checkbox-off-focused.svg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-box:checked StBin {
|
|
|
|
|
background-image: url("checkbox.svg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-box:focus:checked StBin {
|
|
|
|
|
background-image: url("checkbox-focused.svg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Toggles */
|
|
|
|
|
|
|
|
|
|
.toggle-switch {
|
|
|
|
|
background-image: url("./toggle-off.svg");
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch:checked {
|
|
|
|
|
background-image: url("./toggle-on.svg");
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Do Not Distrub toggle */
|
|
|
|
|
|
|
|
|
|
.dnd-button {
|
|
|
|
|
width: 48px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button .toggle-switch {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button:hover .toggle-switch {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button .toggle-switch:checked {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button:hover .toggle-switch:checked {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button:focus {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dnd-button:focus .toggle-switch {
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:insensitive {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:hover,
|
|
|
|
|
.button:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:focus {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* clear button */
|
|
|
|
|
.message-list-clear-button {
|
|
|
|
|
color: rgba(237, 70, 95, 1);
|
|
|
|
|
background-color: rgba(238, 210, 211, 1);
|
|
|
|
|
padding: 3px 15px;
|
|
|
|
|
border-radius: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Sliders */
|
|
|
|
|
|
|
|
|
|
.slider,
|
|
|
|
|
.level {
|
|
|
|
|
-barlevel-height: 16px;
|
|
|
|
|
-barlevel-background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
-barlevel-active-background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
-barlevel-border-width: 0px;
|
|
|
|
|
/* overfill */
|
|
|
|
|
-barlevel-overdrive-color: #c01c28;
|
|
|
|
|
-barlevel-overdrive-separator-width: 2px;
|
|
|
|
|
-slider-handle-radius: 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Scroll bar */
|
|
|
|
|
|
|
|
|
|
StScrollBar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StScrollView StScrollBar {
|
|
|
|
|
min-width: 8px;
|
|
|
|
|
min-height: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StScrollBar StBin#trough {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StScrollBar StButton#vhandle,
|
|
|
|
|
StScrollBar StButton#hhandle {
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: rgba(191, 163, 193, 0.75);
|
|
|
|
|
border: 3px solid transparent;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StScrollBar StButton#vhandle:hover,
|
|
|
|
|
StScrollBar StButton#hhandle:hover {
|
|
|
|
|
background-color: rgba(191, 163, 193, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StScrollBar StButton#vhandle:active,
|
|
|
|
|
StScrollBar StButton#hhandle:active {
|
|
|
|
|
background-color: rgba(191, 163, 193, 0.87);
|
|
|
|
|
}
|
|
|
|
|
/* Date / Time menu */
|
|
|
|
|
|
|
|
|
|
/* overall menu */
|
|
|
|
|
#calendarArea {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Calendar menu side column */
|
|
|
|
|
.datemenu-calendar-column {
|
|
|
|
|
spacing: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.datemenu-calendar-column:ltr { padding-left: 6px; }
|
|
|
|
|
.datemenu-calendar-column:rtl { padding-right: 6px; }
|
|
|
|
|
|
|
|
|
|
.datemenu-calendar-column .datemenu-displays-box {
|
|
|
|
|
spacing: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* today header button */
|
|
|
|
|
.datemenu-today-button {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
background-color: none;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.datemenu-today-button:hover {
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.datemenu-today-button:focus {
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* weekday label */
|
|
|
|
|
.day-label {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* date label */
|
|
|
|
|
.date-label {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Calendar */
|
|
|
|
|
|
|
|
|
|
.calendar {
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* month header */
|
|
|
|
|
.calendar-month-label {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* day of week heading */
|
|
|
|
|
.calendar-day.calendar-day-heading {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* day buttons, prev/next month button */
|
|
|
|
|
.calendar-day,
|
|
|
|
|
.calendar-month-header .pager-button {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-day:hover,
|
|
|
|
|
.calendar-day:selected:hover,
|
|
|
|
|
.calendar .calendar-month-header .pager-button:hover {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-day:focus,
|
|
|
|
|
.calendar .calendar-month-header .pager-button:focus {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-day:selected {
|
|
|
|
|
background: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* today button */
|
|
|
|
|
.calendar-today,
|
|
|
|
|
.calendar-today:selected {
|
|
|
|
|
background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87) !important;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-today:hover,
|
|
|
|
|
.calendar-today:selected:hover,
|
|
|
|
|
.calendar-today:focus,
|
|
|
|
|
.calendar-today:selected:focus {
|
|
|
|
|
background-color: rgba(195, 101, 204, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* if day has event */
|
|
|
|
|
.calendar .calendar-day-with-events {
|
|
|
|
|
background-image: url("calendar-event.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar .calendar-today.calendar-day-with-events {
|
|
|
|
|
background-image: url("calendar-event-today.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* weekend day button */
|
|
|
|
|
.calendar .calendar-nonwork-day, /* up to 44 */
|
|
|
|
|
.calendar-weekend { /* 45+ */
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* other month day button */
|
|
|
|
|
.calendar .calendar-other-month-day, /* up to 44 */
|
|
|
|
|
.calendar-other-month { /* 45+ */
|
|
|
|
|
color: rgba(40, 7, 43, 0.38) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar .calendar-other-month-day.calendar-day-with-events, /* up to 44 */
|
|
|
|
|
.calendar-other-month.calendar-day-with-events { /* 45+ */
|
|
|
|
|
background-image: url("calendar-event-disabled.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar .calendar-week-number {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Events / World clocks / weather section */
|
|
|
|
|
|
|
|
|
|
.events-button,
|
|
|
|
|
.world-clocks-button,
|
|
|
|
|
.weather-button {
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.events-button:hover,
|
|
|
|
|
.world-clocks-button:hover,
|
|
|
|
|
.weather-button:hover {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.events-button:focus,
|
|
|
|
|
.world-clocks-button:focus,
|
|
|
|
|
.weather-button:focus {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.events-button:active,
|
|
|
|
|
.world-clock-button:active,
|
|
|
|
|
.weather-button:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* header */
|
|
|
|
|
.weather-button .weather-header,
|
|
|
|
|
.events-button .events-title,
|
|
|
|
|
.world-clocks-button .world-clocks-header {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Events section */
|
|
|
|
|
.events-button .events-list {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
.events-button .event-time {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* World clocks section */
|
|
|
|
|
.world-clocks-button .world-clocks-time {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.world-clocks-button .world-clocks-city,
|
|
|
|
|
.world-clocks-button .world-clocks-timezone {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Weather section */
|
|
|
|
|
.weather-button .weather-forecast-time {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Entries */
|
|
|
|
|
|
|
|
|
|
StEntry,
|
|
|
|
|
.search-entry {
|
|
|
|
|
border-radius: 13px;
|
|
|
|
|
border-color: #000;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
selection-background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
selected-color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
selected-border-color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* icon in entry */
|
|
|
|
|
StEntry StLabel {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* change icon color if entry not selected */
|
|
|
|
|
StEntry StLabel:insensitive {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StEntry:hover,
|
|
|
|
|
StEntry:focus,
|
|
|
|
|
StEntry:active {
|
|
|
|
|
border: 1px solid rgba(40, 7, 43, 0.38);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StEntry:focus {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
/* Lock Screen / Login screen */
|
|
|
|
|
|
|
|
|
|
#lockDialogGroup {
|
|
|
|
|
background-color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog {
|
|
|
|
|
background-color: rgba(250, 243, 251, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.login-dialog .caps-lock-warning-label,
|
|
|
|
|
.login-dialog .login-dialog-message-warning,
|
|
|
|
|
.unlock-dialog .caps-lock-warning-label,
|
|
|
|
|
.unlock-dialog .login-dialog-message-warning {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* not listed button */
|
|
|
|
|
.login-dialog-not-listed-label {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
|
|
|
|
|
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* users button */
|
|
|
|
|
.login-dialog-user-list .login-dialog-user-list-item {
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item {
|
|
|
|
|
transition-duration: 200ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
|
|
|
|
|
background-color: rgba(214, 107, 223, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus,
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
|
|
|
|
|
background-color: rgba(214, 107, 223, 1);
|
|
|
|
|
/* color: rgba(40, 7, 43, 0.87); don't work*/
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus:hover,
|
|
|
|
|
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover {
|
|
|
|
|
background-color: rgba(202, 65, 214, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* login buttons */
|
|
|
|
|
.login-dialog-button.cancel-button,
|
|
|
|
|
.login-dialog-button.switch-user-button,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-button.cancel-button:hover,
|
|
|
|
|
.login-dialog-button.switch-user-button:hover,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button:hover {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-button.cancel-button:focus,
|
|
|
|
|
.login-dialog-button.switch-user-button:focus,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button:focus {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-button.cancel-button:focus:active,
|
|
|
|
|
.login-dialog-button.switch-user-button:focus:active,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button:focus:active,
|
|
|
|
|
.login-dialog-button.cancel-button:focus:hover,
|
|
|
|
|
.login-dialog-button.switch-user-button:focus:hover,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button:focus:hover {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(148, 102, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-button.cancel-button:active,
|
|
|
|
|
.login-dialog-button.switch-user-button:active,
|
|
|
|
|
.login-dialog-button.login-dialog-session-list-button:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* password */
|
|
|
|
|
.login-dialog-prompt-entry {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-prompt-entry:focus {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9) !important;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.38) !important;
|
|
|
|
|
border-color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-dialog-prompt-entry:insensitive {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Clock */
|
|
|
|
|
.unlock-dialog-clock {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
spacing: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unlock-dialog-clock .unlock-dialog-clock-time {
|
|
|
|
|
font-feature-settings: "normal";
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unlock-dialog-clock .unlock-dialog-clock-date {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 16pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unlock-dialog-clock .unlock-dialog-clock-hint {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 10pt;
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Notifications */
|
|
|
|
|
.unlock-dialog-notifications-container .notification,
|
|
|
|
|
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
}
|
|
|
|
|
.unlock-dialog-notifications-container .notification.critical,
|
|
|
|
|
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
|
|
|
|
|
background-color: rgba(195, 101, 204, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* messages counter */
|
|
|
|
|
.unlock-dialog-notification-count-text {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* User widget */
|
|
|
|
|
.user-widget .user-widget-label {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-widget.horizontal .user-icon StIcon,
|
|
|
|
|
.user-widget.vertical .user-icon StIcon {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
/* Looking Glass | R.I.P. custom colors & light mode */
|
|
|
|
|
|
|
|
|
|
#LookingGlassDialog {
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
background-color: #191919;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
|
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#LookingGlassDialog .notebook-tab,
|
|
|
|
|
#LookingGlassDialog > #Toolbar .lg-toolbar-button {
|
|
|
|
|
border-radius: 9px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#LookingGlassDialog > #Toolbar .lg-toolbar-button,
|
|
|
|
|
#LookingGlassDialog .notebook-tab:selected {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#LookingGlassDialog > #Toolbar .lg-toolbar-button:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lg-dialog StEntry {
|
|
|
|
|
background-color: rgba(48, 48, 48, 0.6);
|
|
|
|
|
color: white;
|
|
|
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
min-height: 16px;
|
|
|
|
|
selection-background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
selected-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lg-extension {
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lg-debug-flag-button .toggle-switch {
|
|
|
|
|
margin: 5px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
/* Messages */
|
|
|
|
|
|
|
|
|
|
/* datemenu message-list */
|
|
|
|
|
.message-list {
|
|
|
|
|
border-color: transparent; /* remove border between messages and calendar section */
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* "No Notifications" text */
|
|
|
|
|
.message-list-placeholder {
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* remove right margin in message list section (datemenu) */
|
|
|
|
|
.message-list-sections:ltr { margin-right: 0px; }
|
|
|
|
|
.message-list-sections:rtl { margin-left: 0px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* popup messages */
|
|
|
|
|
.message {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Message OSD */
|
|
|
|
|
.notification-banner {
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* messages in menus */
|
|
|
|
|
.message-list .message, .popup-menu-content .message {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
.message-list .message:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
.message-list .message:focus {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(255, 90, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* text / header in message */
|
|
|
|
|
.message .message-body,
|
|
|
|
|
.message-title {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message:hover .message-title {
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message:hover .message-body {
|
|
|
|
|
color: rgba(0, 0, 0, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* message time stamp */
|
|
|
|
|
.message .message-secondary-bin > .event-time {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* close button */
|
|
|
|
|
.message-close-button {
|
|
|
|
|
border-radius: 9px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-close-button:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-close-button:active {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Media Controls */
|
|
|
|
|
.message-media-control {
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
padding: 0 14px;
|
|
|
|
|
margin: 20px 2px;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-media-control:hover {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-media-control:insensitive { color: rgba(40, 7, 43, 0.38); }
|
|
|
|
|
|
|
|
|
|
/* fix margin for last button */
|
|
|
|
|
.message-media-control:last-child:ltr { margin-right: 20px; }
|
|
|
|
|
.message-media-control:last-child:rtl { margin-left: 12px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* album art */
|
|
|
|
|
.media-message-cover-icon {
|
|
|
|
|
icon-size: 3.2em !important;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* when there is no artwork */
|
|
|
|
|
.media-message-cover-icon.fallback {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
icon-size: 1.6em !important;
|
|
|
|
|
padding: 0.79em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* URLs in messages */
|
|
|
|
|
.url-highlighter { link-color: rgba(148, 102, 153, 1); }
|
|
|
|
|
/* OSD */
|
|
|
|
|
|
|
|
|
|
.switcher-list, /* alt + tab */
|
|
|
|
|
.resize-popup, /* i dunno what is that :( */
|
|
|
|
|
.workspace-switcher, /* ctrl + alt + arr_left/arr_right */
|
|
|
|
|
.osd-window /* volume/brightness/.. switcher */ {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* alt + tab */
|
|
|
|
|
.switcher-list { border-radius: 24px; }
|
|
|
|
|
|
|
|
|
|
/* running apps in switcher list */
|
|
|
|
|
.switcher-list .item-box {
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switcher-list .item-box:hover,
|
|
|
|
|
.switcher-list .item-box:focus,
|
|
|
|
|
.switcher-list .item-box:selected,
|
|
|
|
|
.switcher-list .item-box:outlined {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* arrow if app has multiple windows */
|
|
|
|
|
.switcher-arrow {
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switcher-arrow:highlighted {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ctrl + alt + arr_left/arr_right */
|
|
|
|
|
.ws-switcher-indicator {
|
|
|
|
|
background-color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
padding: 2.5px;
|
|
|
|
|
margin: 7.5px 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ws-switcher-indicator:active {
|
|
|
|
|
background-color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
padding: 5px 20px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Modal dialog */
|
|
|
|
|
.modal-dialog {
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* user avatar */
|
|
|
|
|
.user-icon.user-avatar {
|
|
|
|
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* password entry */
|
|
|
|
|
.prompt-dialog-password-entry {
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* button in modals */
|
|
|
|
|
.modal-dialog-linked-button,
|
|
|
|
|
.notification-button,
|
|
|
|
|
.hotplug-notification-item {
|
|
|
|
|
padding: 10px 0 !important;
|
|
|
|
|
border-radius: 12px !important;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
animation-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* if first button: margin-right: 12px/2 */
|
|
|
|
|
.modal-dialog-linked-button:ltr:first-child,
|
|
|
|
|
.notification-button:ltr:first-child,
|
|
|
|
|
.hotplug-notification-item:ltr:first-child,
|
|
|
|
|
.modal-dialog-linked-button:rtl:last-child,
|
|
|
|
|
.notification-button:rtl:last-child,
|
|
|
|
|
.hotplug-notification-item:rtl:last-child {
|
|
|
|
|
margin: 0 6px 12px 12px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* if last button: margin-left: 12px/2 */
|
|
|
|
|
.modal-dialog-linked-button:ltr:last-child,
|
|
|
|
|
.notification-button:ltr:last-child,
|
|
|
|
|
.hotplug-notification-item:ltr:last-child,
|
|
|
|
|
.modal-dialog-linked-button:rtl:first-child,
|
|
|
|
|
.notification-button:rtl:first-child,
|
|
|
|
|
.hotplug-notification-item:rtl:first-child {
|
|
|
|
|
margin: 0 12px 12px 6px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* if only button: normal margin */
|
|
|
|
|
.modal-dialog-linked-button:first-child:last-child,
|
|
|
|
|
.notification-button:first-child:last-child,
|
|
|
|
|
.hotplug-notification-item:first-child:last-child {
|
|
|
|
|
margin: 0 12px 12px 12px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* else: margin-right/left: 12px/2 */
|
|
|
|
|
.modal-dialog-linked-button,
|
|
|
|
|
.notification-button,
|
|
|
|
|
.hotplug-notification-item {
|
|
|
|
|
margin: 0 6px 12px 6px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.modal-dialog-linked-button:hover,
|
|
|
|
|
.modal-dialog-linked-button:focus,
|
|
|
|
|
.notification-button:hover,
|
|
|
|
|
.notification-button:focus {
|
|
|
|
|
background: rgba(227, 203, 230, 0.95);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-dialog-linked-button:last-child {
|
|
|
|
|
background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-dialog-linked-button:last-child:hover,
|
|
|
|
|
.modal-dialog-linked-button:last-child:focus {
|
|
|
|
|
background-color: rgba(195, 101, 204, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-dialog-linked-button:focus,
|
|
|
|
|
.hotplug-notification-item:focus,
|
|
|
|
|
.notification-button:focus {
|
|
|
|
|
animation-duration: 100ms;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.38) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-dialog-linked-button:focus:hover,
|
|
|
|
|
.hotplug-notification-item:focus:hover,
|
|
|
|
|
.notification-button:focus:hover,
|
|
|
|
|
.modal-dialog-linked-button:focus:active,
|
|
|
|
|
.hotplug-notification-item:focus:active,
|
|
|
|
|
.notification-button:focus:active {
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.6) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-dialog .modal-dialog-linked-button:insensitive,
|
|
|
|
|
.hotplug-notification-item:insensitive,
|
|
|
|
|
.notification-banner .notification-button:insensitive {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
background-color: rgba(182, 61, 193, 0.5);
|
|
|
|
|
}
|
|
|
|
|
/* Overview */
|
|
|
|
|
|
|
|
|
|
#overviewGroup, /* overview background */
|
|
|
|
|
.workspace-animation { /* spacing between worspaces (ctrl+alt+arr_left/right / 3 fingers gesture) */
|
|
|
|
|
background-color: rgba(250, 243, 251, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* workspaces */
|
|
|
|
|
.workspace-background {
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* running app icon (in workspaces) */
|
|
|
|
|
.icon-dropshadow { icon-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); }
|
|
|
|
|
|
|
|
|
|
/* selected window titles (in workspaces) */
|
|
|
|
|
.window-caption {
|
|
|
|
|
spacing: 20px;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Activities Ripple (Settings - Multitasking - Hot Corner) */
|
|
|
|
|
.ripple-box {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
box-shadow: 0 0 2px 2px rgba(240, 182, 246, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* thumbnails on overview (workspaces list under search) */
|
|
|
|
|
.workspace-thumbnail {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9) !important;
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* drag and drop indicator */
|
|
|
|
|
.workspace-thumbnails .placeholder {
|
|
|
|
|
background-image: url("workspace-placeholder.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
width: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* selected indicator */
|
|
|
|
|
.workspace-thumbnail-indicator {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
border-color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Tiled window previews */
|
|
|
|
|
.tile-preview {
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
border: 1px solid rgba(207, 127, 214, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .windows-close in screenshot.css */
|
|
|
|
|
/* Panel */
|
|
|
|
|
|
|
|
|
|
#panel {
|
|
|
|
|
background-color: rgba(250, 243, 251, 1);
|
|
|
|
|
height: 36px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* panel in overview, lock screen */
|
|
|
|
|
#panel:overview, #panel.unlock-screen, #panel.login-screen {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
transition-duration: 0.25s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* panel buttons */
|
|
|
|
|
.panel-button,
|
|
|
|
|
.panel-button .clock, /* Date & clock */
|
|
|
|
|
.clock-display StIcon { /* DND / new messages icon */
|
|
|
|
|
color: rgb(255, 255, 255);
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
border: 4px solid transparent !important;
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel-button:hover,
|
|
|
|
|
.panel-button:hover .clock {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel-button:active,
|
|
|
|
|
.panel-button:active .clock {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* workspaces indicator in activities button (45+) */
|
|
|
|
|
#panel .workspace-dot {
|
|
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#panel .workspace-dot:hover,
|
|
|
|
|
#panel .workspace-dot:active {
|
|
|
|
|
background-color: rgb(255, 90, 153);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* indicator for active */
|
|
|
|
|
#panel .screencast-indicator,
|
|
|
|
|
#panel .remote-access-indicator,
|
|
|
|
|
#panel .panel-button.screen-sharing-indicator { /* when sharing screen */
|
|
|
|
|
background: #cd9309;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#panel .panel-button.screen-sharing-indicator:hover {
|
|
|
|
|
background: rgba(205, 147, 9, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* indicator when recording screen */
|
|
|
|
|
#panel .panel-button.screen-recording-indicator {
|
|
|
|
|
background: #c01c28;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#panel .panel-button.screen-recording-indicator:hover {
|
|
|
|
|
background: rgba(192, 28, 40, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* battery percentage */
|
|
|
|
|
#panel .power-status.panel-status-indicators-box {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* battery icon */
|
|
|
|
|
#panel .power-status.panel-status-indicators-box StIcon {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* panel buttons in lock screen / overview */
|
|
|
|
|
#panel.unlock-screen .panel-button,
|
|
|
|
|
#panel.login-screen .panel-button,
|
|
|
|
|
#panel:overview .panel-button {
|
|
|
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* panel clock fix. remove additional background */
|
|
|
|
|
.clock-display {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* additional background for DND / new messages icon */
|
|
|
|
|
.clock-display StIcon {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
/* Popovers */
|
|
|
|
|
|
|
|
|
|
.popup-menu-content, /* popover content */
|
|
|
|
|
.candidate-popup-content { /* IBus Candidate Popup (i dunno how to call it) */
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
padding: 10px;
|
|
|
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-menu-item, /* menu items */
|
|
|
|
|
.app-menu { /* right-click (and panel) app menu */
|
|
|
|
|
margin: 3px 0;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
transition-duration: 150ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-menu-item:focus,
|
|
|
|
|
.popup-menu-item:hover,
|
|
|
|
|
.popup-menu-item:checked {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1) !important;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-menu-item:checked {
|
|
|
|
|
border-radius: 12px 12px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-menu-item:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 44 separator margin fix */
|
|
|
|
|
.popup-separator-menu-item {
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* separator in popup menu */
|
|
|
|
|
.popup-separator-menu-item .popup-separator-menu-item-separator {
|
|
|
|
|
height: 2px;
|
|
|
|
|
margin: 6px 0;
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* fix margins in separators */
|
|
|
|
|
.popup-separator-menu-item-separator:ltr { margin-right: 4.5px; }
|
|
|
|
|
.popup-separator-menu-item-separator:rtl { margin-left: 4.5px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* popover submenus */
|
|
|
|
|
.popup-sub-menu {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 0 0 12px 12px;
|
|
|
|
|
margin: 0 0 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* submenu items */
|
|
|
|
|
.popup-sub-menu .popup-menu-item {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* make rounded borders for last element */
|
|
|
|
|
.popup-sub-menu .popup-menu-item:last-child {
|
|
|
|
|
border-radius: 0 0 12px 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-sub-menu .popup-menu-item:hover,
|
|
|
|
|
.popup-sub-menu .popup-menu-item:focus {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-menu-item:insensitive {
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* all other graphical elements (sliders), OpenWeather Extension */
|
|
|
|
|
.popup-inactive-menu-item {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-inactive-menu-item:insensitive {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6) !important;
|
|
|
|
|
}
|
|
|
|
|
/* Quick Settings */
|
|
|
|
|
|
|
|
|
|
/* QS section */
|
|
|
|
|
.quick-settings {
|
|
|
|
|
padding: 18px;
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* screenshot / settings / lock / power options; part of quick-toggle-arrow [44+] */
|
|
|
|
|
.icon-button {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-button:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-button:focus,
|
|
|
|
|
.quick-toggle:focus,
|
|
|
|
|
.slider-bin:focus {
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(255, 90, 153, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* toggles in QS */
|
|
|
|
|
.quick-toggle, /* 43 */
|
|
|
|
|
.quick-menu-toggle .quick-toggle { /* 44+ */
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* toggle name */
|
|
|
|
|
.quick-toggle .quick-toggle-label {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* adjust borders if quick toggle has expandable menu button (quick-toggle-arrow)[44+] */
|
|
|
|
|
.quick-menu-toggle .quick-toggle:ltr { border-radius: 15px 0 0 15px; }
|
|
|
|
|
.quick-menu-toggle .quick-toggle:rtl { border-radius: 0 15px 15px 0; }
|
|
|
|
|
|
|
|
|
|
/* if quick toggle has no expandable menu button (quick-toggle-arrow)[44+] */
|
|
|
|
|
.quick-menu-toggle .quick-toggle:last-child {
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* adjust borders in expandable menu button */
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow:ltr {
|
|
|
|
|
border-radius: 0 15px 15px 0;
|
|
|
|
|
border-left-width: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow:rtl {
|
|
|
|
|
border-radius: 15px 0 0 15px;
|
|
|
|
|
border-right-width: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-toggle:hover,
|
|
|
|
|
.quick-menu-toggle .quick-toggle:hover,
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow:hover {
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-toggle:checked,
|
|
|
|
|
.quick-menu-toggle .quick-toggle:checked,
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow:checked {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-toggle:checked:hover,
|
|
|
|
|
.quick-menu-toggle .quick-toggle:checked:hover,
|
|
|
|
|
.quick-menu-toggle .quick-toggle-arrow:checked:hover {
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* quick slider section */
|
|
|
|
|
/* fix margins in quick slider section */
|
|
|
|
|
.quick-slider .slider-bin {
|
|
|
|
|
padding: 4px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-slider .slider-bin:focus {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* quick slider icon */
|
|
|
|
|
.quick-slider .icon-button {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
padding: 6px;
|
|
|
|
|
border-radius: 11px;
|
|
|
|
|
transition-duration: 150ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-slider .icon-button:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* expanded menu */
|
|
|
|
|
/* overrides because of
|
|
|
|
|
https://gitlab.gnome.org/GNOME/gnome-shell/-/commit/beb77f58243265a6cc62b720a5b0ecd66efd50a1#fb75f14505e58d3bc51f2498ef328d1405d89e83_94_95 */
|
|
|
|
|
.quick-toggle-menu {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1) !important;
|
|
|
|
|
color: rgba(0, 0, 0, 1) !important;
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
margin: 12px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* header icon in expanded menu */
|
|
|
|
|
.quick-toggle-menu .header .icon {
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
icon-size: 1.4em;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quick-toggle-menu .header .icon.active {
|
|
|
|
|
background-color: rgba(255, 90, 153, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* connect / disconnect text color (expanded menu) */
|
|
|
|
|
.device-subtitle {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* background apps */
|
|
|
|
|
|
|
|
|
|
/* make toggle transparent in QS */
|
|
|
|
|
.background-apps-quick-toggle {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background-apps-quick-toggle:hover {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background-apps-quick-toggle:focus {
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* background app name */
|
|
|
|
|
.background-app-item .title {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* close button */
|
|
|
|
|
.background-app-item .close-button {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(237, 219, 239, 0.9);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background-app-item .close-button:hover {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
}
|
|
|
|
|
/* Screenshot UI */
|
|
|
|
|
|
|
|
|
|
/* main screenshot panel section */
|
|
|
|
|
.screenshot-ui-panel {
|
|
|
|
|
color: rgba(255, 90, 153, 1);
|
|
|
|
|
background-color: rgba(250, 243, 251, 0.92);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
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: rgba(40, 7, 43, 0.87);
|
|
|
|
|
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: rgba(237, 219, 239, 0.9);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-show-pointer-button:insensitive,
|
|
|
|
|
.screenshot-ui-type-button:insensitive {
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* window selection backround */
|
|
|
|
|
.screenshot-ui-window-selector {
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-window-selector-window-border {
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* window border when selecting */
|
|
|
|
|
.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
|
|
|
|
|
border-color: rgba(207, 127, 214, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
|
|
|
|
|
border-color: rgba(207, 127, 214, 1);
|
|
|
|
|
background-color: rgba(240, 182, 246, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-window-selector-check { color: transparent; }
|
|
|
|
|
|
|
|
|
|
/* check icon when selected window */
|
|
|
|
|
.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(207, 127, 214, 1);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* circle around capture button */
|
|
|
|
|
.screenshot-ui-capture-button {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
border: 4px rgba(148, 102, 153, 1);
|
|
|
|
|
padding: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* capture button */
|
|
|
|
|
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
|
|
|
|
|
background-color: rgba(148, 102, 153, 1);
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover,
|
|
|
|
|
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
|
|
|
|
|
background-color: rgba(133, 91, 137, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle,
|
|
|
|
|
.screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
|
|
|
|
|
background-color: rgba(133, 91, 137, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 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: rgba(237, 219, 239, 0.9);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* screenshot / screencast buttons */
|
|
|
|
|
.screenshot-ui-shot-cast-button {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
transition-duration: 100ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-shot-cast-button:hover,
|
|
|
|
|
.screenshot-ui-shot-cast-button:focus,
|
|
|
|
|
.screenshot-ui-shot-cast-button:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-shot-cast-button:checked {
|
|
|
|
|
background-color: rgba(148, 102, 153, 1);
|
|
|
|
|
color: rgba(249, 233, 250, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-area-indicator-shade {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* screen selection borders */
|
|
|
|
|
.screenshot-ui-area-selector-handle {
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.screenshot-ui-screen-selector {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
.screenshot-ui-screen-selector:hover {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
}
|
|
|
|
|
.screenshot-ui-screen-selector:active {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
|
}
|
|
|
|
|
.screenshot-ui-screen-selector:checked {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* tooltip for elements */
|
|
|
|
|
.screenshot-ui-tooltip {
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
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: rgba(236, 220, 238, 1);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
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: rgba(227, 203, 230, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Search */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* "no results" text */
|
|
|
|
|
.search-statustext {
|
|
|
|
|
color: rgba(40, 7, 43, 0.38);
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* founded results content section */
|
|
|
|
|
.search-section-content {
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: rgba(242, 225, 243, 0.8);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* provider section label */
|
|
|
|
|
.search-provider-icon .list-search-provider-content .list-search-provider-details {
|
|
|
|
|
width: 120px;
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* search result listitem -> item title (with leading icon) */
|
|
|
|
|
.list-search-result .list-search-result-title {
|
|
|
|
|
color: rgba(0, 0, 0, 1);
|
|
|
|
|
}
|
|
|
|
|
/* search result listitem -> item description */
|
|
|
|
|
.list-search-result .list-search-result-description {
|
|
|
|
|
color: rgba(40, 7, 43, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-search-result,
|
|
|
|
|
.search-provider-icon {
|
|
|
|
|
background-color: rgba(255, 167, 199, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-search-result:focus,
|
|
|
|
|
.search-provider-icon:focus,
|
|
|
|
|
.list-search-result:hover,
|
|
|
|
|
.search-provider-icon:hover,
|
|
|
|
|
.list-search-result:selected,
|
|
|
|
|
.search-provider-icon:selected {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-search-result:active,
|
|
|
|
|
.search-provider-icon:active {
|
|
|
|
|
background-color: rgba(227, 203, 230, 0.95);
|
|
|
|
|
color: rgba(40, 7, 43, 0.87);
|
|
|
|
|
}
|
