From d4c8eddd8a5f6b203ec979ae5d9241dc1104ae5d Mon Sep 17 00:00:00 2001 From: Vladyslav Hroshev Date: Tue, 20 Jun 2023 13:56:14 +0300 Subject: [PATCH] Optimize styles: added comments, fixed some styles, changed some styles order --- css/apps.css | 122 +++++++++++++++++-------------- css/aylur.css | 16 +++- css/controls.css | 10 ++- css/datemenu.css | 82 +++++++++++++-------- css/{stentry.css => entries.css} | 6 +- css/lookingglass.css | 7 +- css/messages.css | 60 +++++---------- css/osd.css | 69 ++++++++++------- css/overview.css | 103 ++++++++------------------ css/panel.css | 120 ++++++++++++------------------ css/popovers.css | 29 ++++---- css/quick-settings.css | 73 ++++++++++-------- css/screenshot.css | 56 +++++++++----- css/search.css | 41 +++++++++++ tweaks/launchpad/launchpad.css | 2 + tweaks/panel/def-size.css | 6 +- tweaks/panel/no-pill.css | 4 +- 17 files changed, 435 insertions(+), 371 deletions(-) rename css/{stentry.css => entries.css} (86%) create mode 100644 css/search.css diff --git a/css/apps.css b/css/apps.css index de54162..259a213 100644 --- a/css/apps.css +++ b/css/apps.css @@ -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; -} \ No newline at end of file diff --git a/css/aylur.css b/css/aylur.css index feb8a31..a53f13d 100644 --- a/css/aylur.css +++ b/css/aylur.css @@ -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; } \ No newline at end of file diff --git a/css/controls.css b/css/controls.css index 04b0505..5bdc20b 100644 --- a/css/controls.css +++ b/css/controls.css @@ -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; } diff --git a/css/datemenu.css b/css/datemenu.css index 2a6bbb5..8ad1d29 100644 --- a/css/datemenu.css +++ b/css/datemenu.css @@ -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; +} diff --git a/css/stentry.css b/css/entries.css similarity index 86% rename from css/stentry.css rename to css/entries.css index 5a33a86..ceb6a31 100644 --- a/css/stentry.css +++ b/css/entries.css @@ -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; } diff --git a/css/lookingglass.css b/css/lookingglass.css index 6e27db5..59de8af 100644 --- a/css/lookingglass.css +++ b/css/lookingglass.css @@ -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); } diff --git a/css/messages.css b/css/messages.css index b4b2bd9..800130c 100644 --- a/css/messages.css +++ b/css/messages.css @@ -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; } \ No newline at end of file diff --git a/css/osd.css b/css/osd.css index add51e9..876f762 100644 --- a/css/osd.css +++ b/css/osd.css @@ -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; -} +} \ No newline at end of file diff --git a/css/overview.css b/css/overview.css index 483505a..fdc48ce 100644 --- a/css/overview.css +++ b/css/overview.css @@ -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; -} \ No newline at end of file +} + +/* .windows-close in screenshot.css */ \ No newline at end of file diff --git a/css/panel.css b/css/panel.css index 24497be..67d4c43 100644 --- a/css/panel.css +++ b/css/panel.css @@ -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; } \ No newline at end of file diff --git a/css/popovers.css b/css/popovers.css index f20d152..360df9b 100644 --- a/css/popovers.css +++ b/css/popovers.css @@ -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; diff --git a/css/quick-settings.css b/css/quick-settings.css index 775804f..5403c5e 100644 --- a/css/quick-settings.css +++ b/css/quick-settings.css @@ -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; diff --git a/css/screenshot.css b/css/screenshot.css index f687238..342f183 100644 --- a/css/screenshot.css +++ b/css/screenshot.css @@ -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; diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..c48e3ad --- /dev/null +++ b/css/search.css @@ -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; +} \ No newline at end of file diff --git a/tweaks/launchpad/launchpad.css b/tweaks/launchpad/launchpad.css index 5e250a0..b176e23 100644 --- a/tweaks/launchpad/launchpad.css +++ b/tweaks/launchpad/launchpad.css @@ -1,3 +1,5 @@ +/* Change Show Apps icon to MacOS Launchpad icon */ + .show-apps .show-apps-icon { color: transparent; background-image: url("launchpad.png"); diff --git a/tweaks/panel/def-size.css b/tweaks/panel/def-size.css index ceddd9b..7da3b2e 100644 --- a/tweaks/panel/def-size.css +++ b/tweaks/panel/def-size.css @@ -1,8 +1,10 @@ -/* default panel size */ -#panel{ +/* Set default panel size */ + +#panel { height: 2.2em; font-size: 15px; } + .panel-button, .clock, .clock-display StIcon { diff --git a/tweaks/panel/no-pill.css b/tweaks/panel/no-pill.css index 9e538d5..bd2b0fd 100644 --- a/tweaks/panel/no-pill.css +++ b/tweaks/panel/no-pill.css @@ -1,13 +1,15 @@ +/* Remove additional background in panel buttons */ + .panel-button, .clock, .clock-display StIcon { background-color: transparent; box-shadow: none; } + .panel-button:hover, .panel-button:hover .clock, .panel-button:active, -.panel-button:overview, /* activites */ .panel-button:active .clock { background-color: ACCENT-DISABLED_HOVER; box-shadow: inset 0 0 0 1px BORDER-SHADOW;