mirror of
https://github.com/imarkoff/Marble-shell-theme.git
synced 2025-10-22 03:41:42 -07:00
314 lines
9.3 KiB
CSS
314 lines
9.3 KiB
CSS
/* Apps / Dash */
|
|
|
|
/* apps / folders / apps & folders in search */
|
|
.app-well-app .overview-icon,
|
|
.app-well-app.app-folder,
|
|
.grid-search-result .overview-icon,
|
|
.app-folder.grid-search-result .overview-icon,
|
|
#dash .dash-item-container .overview-tile .overview-icon,
|
|
#dash .dash-item-container .show-apps .overview-icon, /* 46+ */
|
|
.overview-tile { /* 46+ */
|
|
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: TEXT-PRIMARY-COLOR;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#dashtodockContainer #dash .overview-tile .overview-icon {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
#dash .dash-item-container .overview-tile:hover,
|
|
#dash .dash-item-container .overview-tile:focus,
|
|
#dash .dash-item-container .overview-tile:selected {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Show Apps icon */
|
|
.show-apps .overview-icon {
|
|
color: SHOW-APPS-ICON-COLOR;
|
|
}
|
|
|
|
/* folders */
|
|
.app-well-app.app-folder .overview-icon,
|
|
.app-folder /* 46+ */ {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
|
|
.app-well-app:hover .overview-icon,
|
|
.app-well-app:focus .overview-icon,
|
|
.app-well-app:selected .overview-icon,
|
|
.show-apps:hover .overview-icon,
|
|
.show-apps:focus .overview-icon,
|
|
.overview-tile:hover,
|
|
.overview-tile:focus,
|
|
.overview-tile:selected {
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.overview-tile:focus {
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
/* 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,
|
|
#dash .show-apps:hover .overview-icon,
|
|
#dash .show-apps:focus .overview-icon,
|
|
#dash .dash-item-container .overview-tile:hover .overview-icon, /* 46+ */
|
|
#dash .dash-item-container .overview-tile:focus .overview-icon, /* 46+ */
|
|
#dash .dash-item-container .overview-tile:selected .overview-icon, /* 46+ */
|
|
#dash .dash-item-container .show-apps:checked .overview-icon {
|
|
box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED;
|
|
background-color: rgba(255, 255, 255, 0.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,
|
|
.overview-tile:drop { /* 46+ */
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR;
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
}
|
|
|
|
|
|
/* Collapsed folders */
|
|
|
|
/* collapsed folder dialog */
|
|
.app-folder-dialog {
|
|
border-radius: 32px;
|
|
background-color: BACKGROUND-COLOR;
|
|
border: none;
|
|
padding: 0; /* because of icon grid */
|
|
box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
|
|
}
|
|
|
|
/* folder title */
|
|
.app-folder-dialog .folder-name-container .folder-name-label {
|
|
padding: 5px 7px;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
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 TEXT-DISABLED-COLOR !important;
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
selection-background-color: ACCENT-COLOR;
|
|
selected-color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
/* edit folder name button */
|
|
.app-folder-dialog .folder-name-container .edit-folder-button,
|
|
.app-folder-dialog .icon-button { /* 46+ */
|
|
border-radius: 12px;
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.app-folder-dialog .folder-name-container .edit-folder-button:hover,
|
|
.app-folder-dialog .icon-button:hover {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
}
|
|
|
|
.app-folder-dialog .folder-name-container .edit-folder-button:focus,
|
|
.app-folder-dialog .icon-button:focus {
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
|
|
.page-indicator .page-indicator-icon {
|
|
border-radius: 99px;
|
|
background-color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* Page arrow */
|
|
.page-navigation-arrow {
|
|
border-radius: 15px;
|
|
padding: 12px;
|
|
transition-duration: 100ms;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.page-navigation-arrow > StIcon {
|
|
margin: 0;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
.page-navigation-arrow:hover {
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.page-navigation-arrow:hover > StIcon {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.page-navigation-arrow:active {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
|
|
/* 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: PAGE-NAV-HINT;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.page-navigation-hint.previous:ltr,
|
|
.page-navigation-hint.next:rtl {
|
|
background-gradient-end: PAGE-NAV-HINT;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
|
|
/* Dash */
|
|
|
|
#dash .dash-background {
|
|
background-color: DASH-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
|
|
border: none; /* remove black border on ubuntu */
|
|
padding: 4px 2px 4px 2px;
|
|
border-radius: 23px;
|
|
}
|
|
|
|
/* 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 BORDER-MENU-SHADOW;
|
|
background-color: DASH_OVERVIEW;
|
|
}
|
|
|
|
/* popup label when hovering the app in dash */
|
|
.dash-label {
|
|
background-color: SECTION-OPAQUE-COLOR;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
border-radius: 12px;
|
|
border: 1px solid BORDER-MENU-SHADOW;
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
|
|
/* pill below if app is running */
|
|
.app-well-app-running-dot,
|
|
.app-grid-running-dot { /* 46+ */
|
|
width: 10px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: ACCENT-SECONDARY-COLOR;
|
|
}
|
|
|
|
#dash .app-grid-running-dot {
|
|
margin-bottom: 12px !important; /* override because of gdm */
|
|
offset-y: 8px; /* 46.2 fix */
|
|
}
|
|
|
|
#dash .app-well-app:hover .app-well-app-running-dot,
|
|
#dash .overview-tile:hover .app-grid-running-dot { /* 46+ */
|
|
width: 15px;
|
|
}
|
|
|
|
#dashtodockContainer .app-well-app.focused .app-well-app-running-dot,
|
|
#dashtodockContainer .overview-tile.focused .app-grid-running-dot { /* 46+ */
|
|
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 {
|
|
box-shadow: 0 0 0 0.25px TEXT-DISABLED-COLOR;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
#dashtodockContainer .app-well-app.focused .overview-icon,
|
|
#dashtodockContainer .overview-tile.focused .overview-icon, /* 46+ dash to dock focused window */
|
|
.show-apps:selected .overview-icon,
|
|
.show-apps:selected:hover .overview-icon,
|
|
.show-apps:active .overview-icon,
|
|
.show-apps:checked .overview-icon {
|
|
box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED;
|
|
}
|
|
|
|
/* 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: DASH-COLOR;
|
|
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: BACKGROUND-COLOR;
|
|
}
|