VesperOS/marble-shell-theme-packaging
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
css/apps.css
+67 -55
View File
@@ -1,30 +1,48 @@
/* App icons */
.app-well-app.app-folder .overview-icon,
.app-folder.grid-search-result .overview-icon,
/* Apps / Dash */
/* apps / folders / apps & folders in search */
.app-well-app .overview-icon,
.grid-search-result .overview-icon {
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0);
/* fix default dash focused box-shadow*/
.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: TEXT-PRIMARY-COLOR;
/* ubuntu fix */
}
.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,
.app-well-app.app-folder .overview-icon {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
background-color: ACCENT-DISABLED-COLOR;
/* Show Apps icon */
.show-apps .overview-icon {
color: SHOW-APPS-ICON-COLOR;
}
/* folders */
.app-well-app.app-folder .overview-icon {
background-color: ACCENT-DISABLED_HOVER;
}
.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,
.show-apps:hover .overview-icon,
.show-apps:focus .overview-icon {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
background-color: ACCENT-DISABLED-COLOR;
}
/* 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 {
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,
@@ -34,7 +52,9 @@
}
/* folder dialog */
/* Collapsed folders */
/* collapsed folder dialog */
.app-folder-dialog {
border-radius: 32px;
background-color: BACKGROUND-COLOR;
@@ -43,16 +63,7 @@
box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
}
.app-folder-dialog .app-well-app:hover .overview-icon,
.app-folder-dialog .app-well-app:focus .overview-icon {
background-color: ACCENT-DISABLED-COLOR;
box-shadow: inset 1px solid BORDER-SHADOW;
}
.app-folder-dialog .folder-name-container {
color: TEXT-PRIMARY-COLOR;
}
/* folder title */
.app-folder-dialog .folder-name-container .folder-name-label {
padding: 5px 7px;
color: TEXT-PRIMARY-COLOR;
@@ -60,6 +71,7 @@
transition-duration: 100ms;
}
/* folder title when editing */
.app-folder-dialog .folder-name-container .folder-name-entry {
font-weight: 700;
border: none;
@@ -67,9 +79,9 @@
background-color: ACCENT-DISABLED-COLOR;
selection-background-color: ACCENT-COLOR;
selected-color: TEXT-PRIMARY-COLOR;
/* ubuntu fix */
}
/* edit folder name button */
.app-folder-dialog .folder-name-container .edit-folder-button {
border-radius: 12px;
background-color: ACCENT-DISABLED-COLOR;
@@ -85,12 +97,14 @@
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
.page-indicator .page-indicator-icon {
background-color: TEXT-SECONDARY-COLOR;
}
/* page arrow */
/* Page arrow */
.page-navigation-arrow {
border-radius: 99px;
transition-duration: 100ms;
@@ -116,6 +130,8 @@
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;
@@ -130,6 +146,7 @@
/* Dash */
#dash .dash-background {
background-color: DASH-COLOR;
box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
@@ -137,19 +154,20 @@
border-radius: 21px;
}
/* if used Dash to Dock extension */
#dashtodockContainer #dash .dash-background {
border: none;
border-radius: 18px;
/* ubuntu fix */
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-COLOR;
color: TEXT-PRIMARY-COLOR;
@@ -158,6 +176,8 @@
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}
/* pill below if app is running */
.app-well-app-running-dot {
width: 10px;
height: 5px;
@@ -166,24 +186,33 @@
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;
}
#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 {
box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED;
background-color: rgba(255, 255, 255, 0.1);
/* 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,
@@ -196,7 +225,6 @@
#dashtodockContainer .show-apps:checked .overview-icon,
#dashtodockContainer .app-well-app.focused .overview-icon {
border-radius: 15px;
/* ubuntu fix*/
}
#dashtodockContainer .app-well-app.focused .overview-icon,
@@ -226,7 +254,7 @@
transition-duration: 250ms;
}
/* animation fix */
/* 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,
@@ -241,19 +269,3 @@
#dashtodockContainer.right.extended.overview.shrink #dash .dash-background {
background-color: BACKGROUND-COLOR;
}
#dash .app-well-app:hover .app-well-app-running-dot {
width: 15px;
}
#dashtodockContainer .app-well-app.focused .app-well-app-running-dot {
width: 20px;
}
.dash-separator {
box-shadow: 0 0 0 0.25px TEXT-DISABLED-COLOR;
}
.show-apps .overview-icon {
color: SHOW-APPS-ICON-COLOR;
}
css/aylur.css
+15 -1
View File
@@ -1,4 +1,6 @@
/* Aylur's widgets */
/* 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 {
@@ -8,6 +10,7 @@
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
/* ajust sliders margins */
.quick-settings.tweaked .quick-container .quick-slider {
margin: 2.5px 0 2.5px 0;
}
@@ -24,10 +27,13 @@
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;
}
@@ -36,6 +42,14 @@
border-radius: 36px 0 0 36px;
}
/* system usage */
.level-bar {
padding: 0;
background-color: ACCENT-DISABLED-COLOR;
}
/* system usage levels */
.usage-level StIcon {
width: 1.29em;
}
css/controls.css
+9 -1
View File
@@ -1,4 +1,5 @@
/* Check Boxes */
.check-box StBoxLayout {
spacing: .8em;
}
@@ -23,6 +24,7 @@
/* Toggles */
.toggle-switch {
background-image: url("./toggle-off.svg");
background-color: ACCENT-DISABLED_HOVER;
@@ -37,6 +39,7 @@
/* Do Not Distrub toggle */
.dnd-button {
width: 48px;
border-radius: 10px;
@@ -67,6 +70,8 @@
}
/* Buttons */
.button {
color: TEXT-PRIMARY-COLOR;
background-color: ACCENT-DISABLED-COLOR;
@@ -88,13 +93,15 @@
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
/* clear button */
.message-list-clear-button {
padding: 3px 15px;
border-radius: 9px;
}
/* slider */
/* Sliders */
.slider,
.level {
height: 16px;
@@ -111,6 +118,7 @@
/* Scroll bar */
StScrollBar {
padding: 0;
}
css/datemenu.css
+51 -31
View File
@@ -1,34 +1,24 @@
/* calendar */
/* 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:ltr { padding-left: 6px; }
.datemenu-calendar-column:rtl { padding-right: 6px; }
.datemenu-calendar-column .datemenu-displays-box {
spacing: 5px;
}
.calendar {
border-radius: 14px;
background-color: SECTION-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
padding: 5px;
}
/* calendar header */
/* today header button */
.datemenu-today-button {
color: TEXT-SECONDARY-COLOR;
background-color: none;
@@ -37,7 +27,8 @@
.datemenu-today-button:hover {
transition-duration: 100ms;
background-color: ACCENT-DISABLED-COLOR;
background-color: SECTION-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
}
.datemenu-today-button:focus {
@@ -46,28 +37,36 @@
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
/* weekday label */
.day-label {
font-weight: 600;
}
/* date label */
.date-label {
font-weight: 700;
}
/* calendar-days */
.calendar-day-base,
.calendar-month-header .pager-button {
color: TEXT-PRIMARY-COLOR;
border-radius: 10px;
/* Calendar */
.calendar {
border-radius: 14px;
background-color: SECTION-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
padding: 5px;
}
/* month header */
.calendar-month-label {
color: TEXT-PRIMARY-COLOR;
}
/* day buttons, prev/next month button */
.calendar-day-base,
.calendar .calendar-month-header .pager-button {
.calendar-month-header .pager-button {
color: TEXT-PRIMARY-COLOR;
border-radius: 10px;
transition-duration: 100ms;
}
@@ -92,7 +91,7 @@
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
/* today button */
.calendar-today,
.calendar-today:selected {
background-color: ACCENT-COLOR;
@@ -105,16 +104,19 @@
background-color: ACCENT_HOVER;
}
/* if day has event */
.calendar .calendar-day-with-events {
background-image: url("calendar-event.svg");
background-size: contain;
font-weight: 700;
}
/* weekend day button */
.calendar .calendar-nonwork-day {
color: TEXT-SECONDARY-COLOR;
}
/* other month day button */
.calendar .calendar-other-month-day {
color: TEXT-DISABLED-COLOR;
}
@@ -125,7 +127,8 @@
}
/* events */
/* Events / World clocks / weather section */
.events-button,
.world-clocks-button,
.weather-button {
@@ -154,18 +157,35 @@
background-color: ACCENT-DISABLED_HOVER;
}
/* header */
.weather-button .weather-header,
.events-button .events-title,
.world-clocks-button .world-clocks-header {
color: TEXT-SECONDARY-COLOR;
}
.events-button .events-list { color: TEXT-PRIMARY-COLOR; }
.events-button .event-time { color: TEXT-SECONDARY-COLOR; }
/* Events section */
.events-button .events-list {
color: TEXT-PRIMARY-COLOR;
}
.events-button .event-time {
color: TEXT-SECONDARY-COLOR;
}
.world-clocks-button .world-clocks-time { color: TEXT-PRIMARY-COLOR; }
/* World clocks section */
.world-clocks-button .world-clocks-time {
color: TEXT-PRIMARY-COLOR;
}
.world-clocks-button .world-clocks-city,
.world-clocks-button .world-clocks-timezone { color: TEXT-SECONDARY-COLOR; }
.world-clocks-button .world-clocks-timezone {
color: TEXT-SECONDARY-COLOR;
}
.weather-button .weather-forecast-time {color: TEXT-SECONDARY-COLOR; }
/* Weather section */
.weather-button .weather-forecast-time {
color: TEXT-SECONDARY-COLOR;
}
css/stentry.css → css/entries.css
+5 -1
View File
@@ -1,4 +1,5 @@
/* Search */
/* Entries */
StEntry {
border-radius: 13px;
padding: 8px;
@@ -10,10 +11,12 @@ StEntry {
selected-color: TEXT-PRIMARY-COLOR;
}
/* icon in entry */
StEntry StLabel {
color: TEXT-PRIMARY-COLOR;
}
/* change icon color if entry not selected */
StEntry StLabel:insensitive {
color: TEXT-SECONDARY-COLOR;
}
@@ -31,6 +34,7 @@ StEntry:focus {
}
/* Entry in lock screen */
.unlock-dialog StEntry {
border: none !important;
}
css/lookingglass.css
+4 -3
View File
@@ -1,4 +1,5 @@
/* Looking Glass | R.I.P. custom colors & light mode */
#LookingGlassDialog {
border-radius: 14px;
margin: 5px;
@@ -8,17 +9,17 @@
}
#LookingGlassDialog .notebook-tab,
#LookingGlassDialog>#Toolbar .lg-toolbar-button {
#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 > #Toolbar .lg-toolbar-button,
#LookingGlassDialog .notebook-tab:selected {
background-color: rgba(255, 255, 255, 0.08);
}
#LookingGlassDialog>#Toolbar .lg-toolbar-button:hover {
#LookingGlassDialog > #Toolbar .lg-toolbar-button:hover {
background-color: rgba(255, 255, 255, 0.13);
}
css/messages.css
+20 -40
View File
@@ -1,18 +1,17 @@
/* Messages */
/* datemenu message-list */
.message-list {
border: none;
border: none; /* remove border between messages and calendar section */
padding: 0;
}
.message-list-sections:ltr {
margin-right: 0px;
}
.message-list-sections:rtl {
margin-left: 0px;
}
/* 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 {
background-color: BACKGROUND-COLOR;
color: TEXT-PRIMARY-COLOR;
@@ -22,35 +21,34 @@
}
/* messages in menus */
.message-list .message, .popup-menu-content .message {
background-color: SECTION-COLOR;
border: 1px solid BORDER-SHADOW;
box-shadow: none;
transition-duration: 100ms;
}
.message-list .message:hover {
background-color: ACCENT-DISABLED-COLOR;
}
.message-list .message:focus {
background-color: ACCENT-OPACITY-COLOR;
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
/* text / header in message */
.message .message-body,
.message-title {
color: TEXT-PRIMARY-COLOR;
}
.message-dialog-content .message-dialog-title {
font-weight: 700;
}
.message .message-secondary-bin>.event-time {
/* message time stamp */
.message .message-secondary-bin > .event-time {
color: TEXT-SECONDARY-COLOR;
}
/* close button */
.message-close-button {
border-radius: 9px;
color: TEXT-PRIMARY-COLOR;
@@ -83,27 +81,20 @@
color: TEXT-PRIMARY-COLOR;
}
.message-media-control:insensitive {
color: TEXT-DISABLED-COLOR
}
.message-media-control:insensitive { color: TEXT-DISABLED-COLOR; }
.message-media-control:last-child:ltr {
margin-right: 20px;
}
/* fix margin for last button */
.message-media-control:last-child:ltr { margin-right: 20px; }
.message-media-control:last-child:rtl { margin-left: 12px; }
.message-media-control:last-child:rtl {
margin-left: 12px;
}
.message-media-control StIcon {
icon-size: 1.09em;
}
/* 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: TEXT-PRIMARY-COLOR;
background-color: ACCENT-DISABLED_HOVER;
@@ -114,16 +105,5 @@
}
/* Notifications */
.notification-banner {
background-color: BACKGROUND-COLOR;
color: TEXT-PRIMARY-COLOR;
}
.notification-button:active {
background-color: ACCENT-COLOR;
color: TEXT-PRIMARY-COLOR;
}
/* url color */
.url-highlighter { link-color: ACCENT-SECONDARY-COLOR; }
css/osd.css
+41 -28
View File
@@ -1,8 +1,9 @@
/* OSD */
.switcher-list,
.resize-popup,
.workspace-switcher,
.osd-window {
.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: TEXT-PRIMARY-COLOR;
background-color: BACKGROUND-COLOR;
border: 1px solid BORDER-MENU-SHADOW;
@@ -10,13 +11,14 @@
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
}
/* alt + tab */
.switcher-list { border-radius: 24px; }
.ws-switcher-indicator {
background-color: TEXT-SECONDARY-COLOR;
/* ruuning apps in switcher list */
.switcher-list .item-box {
border-radius: 20px;
}
.switcher-list .item-box { border-radius: 20px; }
.switcher-list .item-box:hover,
.switcher-list .item-box:focus,
.switcher-list .item-box:selected {
@@ -25,6 +27,12 @@
}
/* ctrl + alt + arr_left/arr_right */
.ws-switcher-indicator {
background-color: TEXT-SECONDARY-COLOR;
}
/* Modal dialog */
.modal-dialog {
border-radius: 20px;
@@ -34,8 +42,20 @@
color: TEXT-PRIMARY-COLOR;
}
.user-icon.user-avatar { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); }
/* 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: SECTION-COLOR;
}
/* button in modals */
.modal-dialog-linked-button,
.notification-button,
.hotplug-notification-item {
@@ -47,30 +67,36 @@
animation-duration: 100ms;
}
/* if first button: margin-right: 12px/2 */
.modal-dialog-linked-button:first-child,
.notification-button:first-child,
.hotplug-notification-item:first-child {
margin: 0 6px 12px 12px !important;
}
/* if last button: margin-left: 12px/2 */
.modal-dialog-linked-button:last-child,
.notification-button:last-child,
.hotplug-notification-item:last-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,
@@ -88,19 +114,19 @@
background-color: ACCENT_HOVER;
}
.modal-dialog .modal-dialog-linked-button:focus,
.modal-dialog-linked-button:focus,
.hotplug-notification-item:focus,
.notification-banner .notification-button:focus {
.notification-button:focus {
animation-duration: 100ms;
box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important;
}
.modal-dialog .modal-dialog-linked-button:focus:hover,
.modal-dialog-linked-button:focus:hover,
.hotplug-notification-item:focus:hover,
.notification-banner .notification-button:focus:hover,
.modal-dialog .modal-dialog-linked-button:focus:active,
.notification-button:focus:hover,
.modal-dialog-linked-button:focus:active,
.hotplug-notification-item:focus:active,
.notification-banner .notification-button:focus:active {
.notification-button:focus:active {
box-shadow: inset 0 0 0 1px TEXT-SECONDARY-COLOR !important;
}
@@ -109,17 +135,4 @@
.notification-banner .notification-button:insensitive {
color: TEXT-SECONDARY-COLOR;
background-color: ACCENT_HOVER;
}
.prompt-dialog-password-entry {
background-color: SECTION-COLOR;
}
.nm-dialog-scroll-view {
border: 1px solid BORDER-SHADOW;
}
.nm-dialog-item:selected {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
}
css/overview.css
+32 -71
View File
@@ -1,52 +1,20 @@
stage {
color: TEXT-PRIMARY-COLOR;
}
/* Overview */
/* overview */
#overviewGroup,
.workspace-animation {
#overviewGroup, /* overview background */
.workspace-animation { /* spacing between worspaces (ctrl+alt+arr_left/right / 3 fingers gesture) */
background-color: BACKGROUND-COLOR;
}
/* overview app icon */
.icon-dropshadow { icon-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); }
/* Activities Ripple */
.ripple-box {
background-color: ACCENT-OPACITY-COLOR;
box-shadow: 0 0 2px 2px ACCENT-OPACITY-COLOR;
}
/* overview-ws-thumbnail */
.workspace-thumbnail {
border: none;
/* border-radius: 9px; */
background-color: ACCENT-DISABLED-COLOR;
border: 1px solid BORDER-SHADOW;
}
.workspace-thumbnails .placeholder {
background-image: url("workspace-placeholder.svg");
background-size: contain;
width: 18px;
}
.workspace-thumbnail-indicator {
background-color: ACCENT-OPACITY-COLOR;
border-color: TEXT-DISABLED-COLOR;
border-width: 1px;
border-radius: 3px;
}
/* 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;
@@ -58,42 +26,33 @@ stage {
}
/* Search */
.search-section-content {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
border-radius: 15px;
border: none;
background-color: SECTION-COLOR;
color: TEXT-PRIMARY-COLOR;
/* Activities Ripple (Settings - Multitasking - Hot Corner) */
.ripple-box {
background-color: ACCENT-OPACITY-COLOR;
box-shadow: 0 0 2px 2px ACCENT-OPACITY-COLOR;
}
.list-search-result .list-search-result-title {
color: TEXT-PRIMARY-COLOR;
/* thumbnails on overview (workspaces list under search) */
.workspace-thumbnail {
border: none; /* because of impossibility round fullscreen apps */
background-color: ACCENT-DISABLED-COLOR;
border: 1px solid BORDER-SHADOW;
}
.list-search-result .list-search-result-description {
color: TEXT-SECONDARY-COLOR;
/* drag and drop indicator */
.workspace-thumbnails .placeholder {
background-image: url("workspace-placeholder.svg");
background-size: contain;
width: 18px;
}
.search-provider-icon .list-search-provider-content .list-search-provider-details {
width: 120px;
color: TEXT-PRIMARY-COLOR;
}
.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: ACCENT-DISABLED_HOVER;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
.list-search-result:active,
.search-provider-icon:active {
background-color: ACCENT-DISABLED_HOVER;
color: TEXT-PRIMARY-COLOR;
/* selected indicator */
.workspace-thumbnail-indicator {
background-color: ACCENT-OPACITY-COLOR;
border-color: TEXT-DISABLED-COLOR;
border-width: 1px;
border-radius: 3px;
}
@@ -101,4 +60,6 @@ stage {
.tile-preview {
background-color: ACCENT-OPACITY-COLOR;
border: 1px solid ACCENT-COLOR;
}
}
/* .windows-close in screenshot.css */
css/panel.css
+46 -74
View File
@@ -1,4 +1,5 @@
/* Panel */
#panel {
background-color: BACKGROUND-COLOR;
height: 36px;
@@ -6,34 +7,16 @@
box-shadow: none;
}
/* panel in overview, lock screen */
#panel:overview, #panel.unlock-screen, #panel.login-screen {
background-color: transparent;
}
#panel .screencast-indicator,
#panel .remote-access-indicator {
color: #cd9309;
}
#panel .panel-button.screen-recording-indicator {
background: #c01c28;
}
#panel .panel-button.screen-sharing-indicator {
background: #cd9309;
}
#panel .panel-button.screen-recording-indicator:hover {
background: rgba(192, 28, 40, 0.9);
}
#panel .panel-button.screen-sharing-indicator:hover {
background: rgba(205, 147, 9, 0.9);
}
/* panel buttons */
.panel-button,
.clock,
.clock-display StIcon {
.panel-button .clock, /* Date & clock */
.clock-display StIcon { /* DND / new messages icon */
color: TEXT-PRIMARY-COLOR;
border-radius: 14px;
border: 4px solid transparent;
@@ -41,73 +24,62 @@
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
.clock-display StIcon {
padding: 8px;
margin: 0;
}
#panel .power-status.panel-status-indicators-box StIcon {
font-size: 14px;
}
.panel-button:hover,
.panel-button:hover .clock,
.panel-button:hover .clock,
.panel-button:active,
.panel-button:overview,
/* activites */
.panel-button:active .clock {
background-color: ACCENT-DISABLED_HOVER;
}
/* indicator for active */
#panel .screencast-indicator,
#panel .remote-access-indicator,
#panel .panel-button.screen-sharing-indicator { /* when sharing screen */
color: #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: TEXT-PRIMARY-COLOR !important;
}
#panel .power-status.panel-status-indicators-box {
font-size: 12px;
}
/* date-menu-mod */
.clock-display {
/* panel clock fix. remove additional background */
.clock-display {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.clock {
margin: 0 !important;
}
/* clock fix by Aylur's widgets */
#panel .panel-button.clock-display {
-natural-hpadding: 0;
-minimum-hpadding: 0;
}
.datemenu-calendar-column {
padding-left: 0;
padding-right: 0;
}
/* if notifications are hidden, make the column centered */
.datemenu-user {
padding: 30px;
}
.datemenu-user>StButton {
width: 160px;
height: 160px;
padding: 2px;
border-radius: 99px;
margin-bottom: 12px;
}
.datemenu-user>StButton>StWidget {
border-radius: 99px;
}
.datemenu-levels {
spacing: 8px;
/* additional background for DND / new messages icon */
.clock-display StIcon {
padding: 8px;
margin: 0;
}
css/popovers.css
+15 -14
View File
@@ -1,16 +1,17 @@
/* Popovers */
.popup-menu-content,
.candidate-popup-content {
.popup-menu-content, /* popover content */
.candidate-popup-content { /* IBus Candidate Popup (i dunno how to call it) */
color: TEXT-PRIMARY-COLOR;
background: BACKGROUND-COLOR;
background: BACKGROUND-COLOR;
padding: 10px;
border-radius: 20px;
border: 1px solid BORDER-MENU-SHADOW;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
.popup-menu-item,
.app-menu {
.popup-menu-item, /* menu items */
.app-menu { /* right-click (and panel) app menu */
margin: 3px 0;
transition-duration: 150ms;
}
@@ -37,22 +38,19 @@
padding: 0 !important;
}
/* separator in popup menu */
.popup-separator-menu-item .popup-separator-menu-item-separator {
height: 1px;
margin: 6px 0;
background-color: SEPARATOR-COLOR;
}
.popup-separator-menu-item-separator:ltr {
margin-right: 4.5px;
}
.popup-separator-menu-item-separator:rtl {
margin-left: 4.5px;
}
/* fix margins in separators */
.popup-separator-menu-item-separator:ltr { margin-right: 4.5px; }
.popup-separator-menu-item-separator:rtl { margin-left: 4.5px; }
/* Popup sub menu */
/* popover submenus */
.popup-sub-menu {
background-color: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR;
@@ -61,12 +59,14 @@
margin: 0 0 2px 0;
}
/* submenu items */
.popup-sub-menu .popup-menu-item {
margin: 0;
color: TEXT-PRIMARY-COLOR;
background-color: transparent;
}
/* make rounded borders for last element */
.popup-sub-menu .popup-menu-item:last-child {
border-radius: 0 0 12px 12px;
}
@@ -81,6 +81,7 @@
margin: 0;
}
/* all other graphical elements (sliders), OpenWeather Extension */
.popup-inactive-menu-item {
color: TEXT-PRIMARY-COLOR;
background-color: transparent;
css/quick-settings.css
+43 -30
View File
@@ -1,9 +1,13 @@
/* quick-settings */
/* 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: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR;
@@ -15,33 +19,43 @@
background-color: ACCENT-DISABLED_HOVER;
}
.icon-button:focus,
.quick-toggle:focus,
.slider-bin:focus {
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
.quick-toggle,
.quick-menu-toggle .quick-toggle {
/* toggles in QS */
.quick-toggle, /* 43 */
.quick-menu-toggle .quick-toggle { /* 44+ */
color: TEXT-PRIMARY-COLOR;
border-radius: 15px;
background-color: ACCENT-DISABLED-COLOR;
transition-duration: 100ms;
}
.quick-menu-toggle .quick-toggle:ltr {
border-radius: 15px 0 0 15px;
/* toggle name */
.quick-toggle .quick-toggle-label {
font-weight: 600;
}
.quick-menu-toggle .quick-toggle:rtl {
border-radius: 0 15px 15px 0;
}
/* 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;
}
/* 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 .quicl-toggle-arrow:rtl {
.quick-menu-toggle .quick-toggle-arrow:rtl {
border-radius: 15px 0 0 15px;
border-right-width: 2px;
}
@@ -66,9 +80,12 @@
background-color: ACCENT_HOVER;
}
/* quick slider section */
/* fix margins in quick slider dection */
.quick-slider .slider-bin {
padding: 2px 1px;
margin: 0px;
margin: 0;
color: TEXT-PRIMARY-COLOR;
}
@@ -76,18 +93,9 @@
background-color: ACCENT-DISABLED-COLOR;
}
.icon-button:focus,
.quick-toggle:focus,
.slider-bin:focus {
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}
.quick-toggle .quick-toggle-label {
font-weight: 600;
}
/* quick slider icon */
.quick-slider .icon-button {
background-color: BACKGROUND-COLOR;
background-color: transparent;
box-shadow: none;
padding: 6px;
border-radius: 11px;
@@ -100,19 +108,19 @@
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
/* expanded menu */
/* overrides because of
https://gitlab.gnome.org/GNOME/gnome-shell/-/commit/beb77f58243265a6cc62b720a5b0ecd66efd50a1#fb75f14505e58d3bc51f2498ef328d1405d89e83_94_95 */
.quick-toggle-menu {
background-color: BACKGROUND-COLOR !important;
background-color: BACKGROUND-COLOR !important;
color: TEXT-PRIMARY-COLOR !important;
border-radius: 18px;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
margin: 12px auto;
}
/* connect / disconnect text color */
.device-subtitle {
color: TEXT-SECONDARY-COLOR;
}
/* header icon in expanded menu */
.quick-toggle-menu .header .icon {
background-color: ACCENT-DISABLED_HOVER;
color: TEXT-PRIMARY-COLOR;
@@ -125,12 +133,15 @@
background-color: ACCENT-COLOR;
}
.level-bar {
padding: 0;
background-color: ACCENT-DISABLED-COLOR;
/* connect / disconnect text color (expanded menu) */
.device-subtitle {
color: TEXT-SECONDARY-COLOR;
}
/* background apps */
/* make toggle transparent in QS */
.background-apps-quick-toggle {
background-color: transparent;
}
@@ -144,11 +155,13 @@
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR;
}
/* background app name */
.background-app-item .title {
color: TEXT-PRIMARY-COLOR;
font-weight: 600;
}
/* close button */
.background-app-item .close-button {
color: TEXT-PRIMARY-COLOR;
background-color: ACCENT-DISABLED-COLOR;
css/screenshot.css
+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;
css/search.css
+41
View File
@@ -0,0 +1,41 @@
/* Search */
/* founded results content section */
.search-section-content {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
border-radius: 15px;
border: none;
background-color: SECTION-COLOR;
color: TEXT-PRIMARY-COLOR;
}
/* provider section label */
.search-provider-icon .list-search-provider-content .list-search-provider-details {
width: 120px;
color: TEXT-PRIMARY-COLOR;
}
/* search result listitem -> item title (with leading icon) */
.list-search-result .list-search-result-title {
color: TEXT-PRIMARY-COLOR;
}
/* search result listitem -> item description */
.list-search-result .list-search-result-description {
color: TEXT-SECONDARY-COLOR;
}
.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: ACCENT-DISABLED_HOVER;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
.list-search-result:active,
.search-provider-icon:active {
background-color: ACCENT-DISABLED_HOVER;
color: TEXT-PRIMARY-COLOR;
}