From 868a1991446f2914040dc02ebf0f2af68bd361d9 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Tue, 14 Oct 2014 18:52:34 +0200 Subject: [PATCH] theme: overview styling - still some quirks - boy is this unstructured mess a pain to clean up :( --- data/theme/_common.scss | 273 +++++++++++++- data/theme/_drawing.scss | 2 +- data/theme/_gnome-shell-old.scss | 419 ---------------------- data/theme/gnome-shell.css | 590 +++++++++++++------------------ 4 files changed, 504 insertions(+), 780 deletions(-) diff --git a/data/theme/_common.scss b/data/theme/_common.scss index 43a50d095..b0894958d 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -66,15 +66,7 @@ StEntry { //&:hover { @include entry(hover);} &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} &:insensitive { @include entry(insensitive);} - - .search-entry { - padding: 7px 9px; - border-radius: 24px; - &:focus { - padding: 6px 8px; - border-width: 2px; - } - } + } @@ -367,4 +359,267 @@ StScrollBar { .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 1.09em; } +//close buttons + +.window-close, .notification-close { + background-image: url("close-window.svg"); + background-size: 32px; + height: 32px; + width: 32px; +} + .window-close { + -shell-close-overlap: 16px; + &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); } + } + .notification-close { + -shell-close-overlap-x: 14px; + -shell-close-overlap-y: -12px; + + &:rtl { -shell-close-overlap-x: -14px; } + } + +/* OVERVIEW */ + +#overview { + spacing: 24px; // + +} + .window-picker { //container around window thumbnails + -horizontal-spacing: 32px; + -vertical-spacing: 32px; + padding-left: 32px; + padding-right: 32px; + padding-bottom: 48px; + + &.external-monitor { padding: 32px; } + } + + .messages-indicator { color: transparentize($fg_color,.2); height: 32px; } + .messages-indicator-contents { spacing: 12px; padding-bottom: 12px; } + + //search entry + .search-entry { + width: 320px; + padding: 7px 9px; + border-radius: 24px; + &:focus { + padding: 6px 8px; + border-width: 2px; + } + + .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } + + &:hover, &:focus { + .search-entry-icon { color: $fg_color; } + } + } + + //search results + + #searchResultsBin { + max-width: 1000px; + } + + #searchResultsContent { + padding-left: 20px; + padding-right: 20px; + spacing: 16px; + } + + .search-selection { spacing: 16px; } // This should be equal to #searchResultsContent spacing + .search-selection-content { spacing: 32px; } // This is the space between the provider icon and the results container + .search-statustext { // "no results" + @extend %status_text; + } + .list-search-results { spacing: 3px; } + + .search-section-separator { + -gradient-height: 1px; + -gradient-start: rgba(255,255,255,0); + -gradient-end: rgba(255,255,255,0.1); + -margin-horizontal: 1.5em; + height: 1px; + } + + .list-search-result-content { spacing: 12px; padding: 12px; } + .list-search-result-title { font-size: 1.5em; color: darken($fg_color,5%); } + .list-search-result-description { color: darken($fg_color,15%); } + .search-provider-icon { padding: 15px; } + .search-provider-icon-more { + width: 16px; + height: 16px; + background-image: url("more-results.svg"); + } + + + /* DASHBOARD */ + + #dash { + color: red; + padding: 4px 0; + color: $osd_fg_color; + background-color: $osd_bg_color; + border: 1px solid transparentize($fg_color,0.8); + border-left: 0px; + border-radius: 0px 9px 9px 0px; + + &:rtl { + border-left-width: 1px; + border-right-width: 0; + border-radius: 9px 0 0 9px; + } + + .placeholder { + background-image: url("dash-placeholder.svg"); + background-size: contain; + height: 24px; + } + + .empty-dash-drop-target { + width: 24px; + height: 24px; + } + + .overview-icon { + &:hover { + background-color: transparentize($osd_bg_color,0.6); + } + } + } + + .dash-label { //osd tooltip + border-radius: 7px; + padding: 4px 12px; + background-color: transparentize($osd_bg_color,0.3); + text-align: center; + -x-offset: 8px; + } + + /* App Vault/Grid */ + .icon-grid { + spacing: 30px; + -shell-grid-horizontal-item-size: 136px; + -shell-grid-vertical-item-size: 136px; + + //.overview-icon { icon-size: 96px; } FIXME no effect + } + //.app-display { spacing: 20px; } + + .app-view-controls { //favorties | all toggle container + padding-bottom: 32px; + } + .app-view-control { //favorties | all toggle button + padding: 4px 32px; + &:checked { @include button(active); } + &:first-child { + border-right-width: 0; + border-radius: 3px 0 0 3px; + } + &:last-child { + border-radius: 0 3px 3px 0; + } + } + + //Icon tile + .search-provider-icon, + .list-search-result { + @extend %icon_tile; + &:active, &:checked { background-color: transparentize($osd_bg_color,.1); } + &:focus, &:selected, &:hover { background-color: transparentize($osd_bg_color,.5); } + } + .app-well-app, + .show-apps, + .grid-search-result { + & > .overview-icon { + @extend %icon_tile; + } + &:active > .overview-icon, + &:checked > .overview-icon { + background-color: transparentize($osd_bg_color,.1); + } + &:hover > .overview-icon, + &:focus > .overview-icon, + &:selected > .overview-icon { + background-color: transparentize($osd_bg_color,.5); + } + + } + + %icon_tile { + border-radius: 4px; + padding: 6px; + border: 1px solid transparent; + transition-duration: 100ms; + text-align: center; + } + + .app-well-app.running > .overview-icon { + text-shadow: black 0px 2px 2px; + border-image: url("panel-button-border.svg") 6 10 0 2; //fixme needs to not be blurry and a little narrower + } + .app-well-app.app-folder > .overview-icon { + background-color: transparentize($osd_bg_color,.6); + } + + .show-apps:checked .show-apps-icon, + .show-apps:focus .show-apps-icon { + color: white; + transition-duration: 100ms; + } + + + // Collections + .app-folder-popup { //expanded collection + -arrow-border-radius: 8px; + -arrow-background-color: transparentize($osd_bg_color,0.7); + -arrow-base: 24px; + -arrow-rise: 11px; + } + .app-folder-popup-bin { padding: 5px; } + .app-folder-icon { + padding: 5px; + spacing-rows: 5px; + spacing-columns: 5px; + } + + .page-indicator { + padding: 15px 20px; + + .page-indicator-icon { + width: 18px; + height: 18px; + background-image: url(page-indicator-inactive.svg); + } + + &:hover .page-indicator-icon { background-image: url(page-indicator-hover.svg); } + &:active .page-indicator-icon { background-image: url(page-indicator-active.svg); } + &:checked .page-indicator-icon, + &:checked:active { background-image: url(page-indicator-checked.svg); } + } + + .no-frequent-applications-label { @extend %status_text; } + + .app-well-app > .overview-icon.overview-icon-with-label, + .grid-search-result .overview-icon.overview-icon-with-label { + padding: 10px 8px 5px 8px; + spacing: 4px; + } + + + + //Some hacks I don't even + // FIXME + .search-display > StBoxLayout, + .all-apps, + .frequent-apps > StBoxLayout { + // horizontal padding to make sure scrollbars or dash don't overlap content + padding: 0px 88px 10px 88px; + } + +%status_text { + font-size: 2em; + font-weight: bold; + color: $fg_color; +} + /* NOTIFICATIONS & MESSAGE TRAY */ diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss index e537a806f..28335ea06 100644 --- a/data/theme/_drawing.scss +++ b/data/theme/_drawing.scss @@ -183,7 +183,7 @@ color: white; border-color: $osd_borders_color; - background-color: $_bg; + background-color: darken($_bg,5%); box-shadow: none; text-shadow: none; icon-shadow: none; diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss index 6f9b1e26c..39ead71a3 100644 --- a/data/theme/_gnome-shell-old.scss +++ b/data/theme/_gnome-shell-old.scss @@ -94,425 +94,6 @@ /* Overview */ -#overview { - spacing: 24px; -} - -.overview-controls { - padding-bottom: 32px; -} - -.workspace-thumbnails { - spacing: 11px; - visible-width: 32px; /* Amount visible before hovering */ - border: 1px solid rgba(128, 128, 128, 0.4); - border-right: 0px; - border-radius: 9px 0px 0px 9px; - background-color: rgba(0, 0, 0, 0.5); - padding: 11px 7px 11px 11px; -} - -.workspace-thumbnails:rtl { - border-right: 1px; - border-left: 0px; - border-radius: 0px 9px 9px 0px; - padding: 11px 11px 11px 7px; -} - -.workspace-thumbnail-indicator { - border: 4px solid rgba(255,255,255,0.7); - border-radius: 4px; - padding: 1px; -} - -.window-caption { - spacing: 25px; - background: rgba(0,0,0,0.5); - border-radius: 8px; - padding: 4px 12px; - -shell-caption-spacing: 12px; - border: 2px solid rgba(0, 0, 0, 0); -} - -.window-caption:hover { - border: 2px solid rgba(255, 255, 255, 0); -} - -.window-close, .notification-close { - background-image: url("close-window.svg"); - background-size: 32px; - height: 32px; - width: 32px; -} - -.window-close { - -shell-close-overlap: 16px; -} - -.window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.5); - border-radius: 4px; -} - -.notification-close { - /* we start out in the top right of the - * notification, inset. - * - * center is 32px/2 = 16px - * - * adjust left 2px - * adjust down 8px */ - - -shell-close-overlap-x: 14px; - -shell-close-overlap-y: -12px; -} - -.notification-close:rtl { - /* as above, but starting out in the top left of the - * notification. */ - - -shell-close-overlap-x: -14px; -} - -.window-close:rtl { - -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); -} - -.window-picker { - -horizontal-spacing: 32px; - -vertical-spacing: 32px; - padding-left: 32px; - padding-right: 32px; - padding-bottom: 48px; -} - -.window-picker.external-monitor { - padding: 32px; -} - -.messages-indicator { - color: #999999; - height: 32px; -} - -.messages-indicator-contents { - spacing: 12px; - padding-bottom: 12px; -} - -.messages-indicator-contents:hover { - color: white; - text-shadow: black 0px 2px 2px; -} - -.messages-indicator-highlight { - background-gradient-start: transparent; - background-gradient-end: #999999; - background-gradient-direction: vertical; - - height: 6px; -} - -/* Dash */ - -#dash { - color: #5f5f5f; - font-size: 9pt; - padding: 4px 0px; - background-color: rgba(0, 0, 0, 0.5); - border: 1px solid rgba(128, 128, 128, 0.4); - border-left: 0px; - border-radius: 0px 9px 9px 0px; -} - -#dash:rtl { - border-left: 1px; - border-right: 0px; - border-radius: 9px 0px 0px 9px; -} - -.placeholder { - background-image: url("dash-placeholder.svg"); - background-size: contain; - height: 24px; -} - -.empty-dash-drop-target { - width: 24px; - height: 24px; -} - -/* Search Box */ - -.search-entry { - width: 320px; -} - -.search-entry-icon { - icon-size: 1em; - color: #c0c0c0; -} - -.search-entry:hover .search-entry-icon, -.search-entry:focus .search-entry-icon { - color: #8d8f8a; -} - -/* Search Results */ - -#searchResults { - padding: 20px 10px 0px 10px; - spacing: 18px; -} - -#searchResultsBin { - max-width: 1000px; -} - -#searchResultsContent { - padding-left: 20px; - padding-right: 20px; - spacing: 16px; -} - -.search-section { - /* This should be equal to #searchResultsContent spacing */ - spacing: 16px; -} - -.search-section-separator { - -gradient-height: 1px; - -gradient-start: rgba(255,255,255,0); - -gradient-end: rgba(255,255,255,0.5); - -margin-horizontal: 1.5em; - height: 1px; -} - -.search-section-content { - /* This is the space between the provider icon and the results container */ - spacing: 32px; -} - -.search-statustext { - color: #efefef; - font-size: 2em; - font-weight: bold; -} - -.list-search-results { - spacing: 3px; -} - -.dash-label { - border-radius: 7px; - padding: 4px 12px; - background-color: rgba(0,0,0,0.5); - text-align: center; - -x-offset: 8px; -} - -/* Application Launchers, Grid and List results */ - -.icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; -} - -.icon-grid .overview-icon { - icon-size: 96px; -} - -.app-display { - spacing: 20px; -} - -.app-view-controls { - padding-bottom: 32px; -} - -.app-view-control { - padding: 4px 32px; -} - -.app-view-control:focus { - padding: 3px 31px; -} - -.search-display > StBoxLayout, -.all-apps, -.frequent-apps > StBoxLayout { - /* horizontal padding to make sure scrollbars or dash don't overlap content */ - padding: 0px 88px 10px 88px; -} - -.page-indicator { - padding: 15px 20px; -} - -.page-indicator .page-indicator-icon { - width: 18px; - height: 18px; - background-image: url(page-indicator-inactive.svg); -} - -.page-indicator:hover .page-indicator-icon { - background-image: url(page-indicator-hover.svg); -} - -.page-indicator:active .page-indicator-icon { - background-image: url(page-indicator-active.svg); -} - -.page-indicator:checked .page-indicator-icon, -.page-indicator:checked:active .page-indicator-icon { - background-image: url(page-indicator-checked.svg); -} - -.no-frequent-applications-label { - font-size: 18pt; - color: #999999; -} - -.app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; -} - -.dash-item-container > StButton { - padding: 4px 8px; -} - -.list-search-result-content { - spacing: 12px; - padding: 12px; -} - -.list-search-result-title { - font-weight: bold; - font-size: 14pt; - color: white; -} - -.list-search-result-description { - color: #eeeeec; -} - -.search-provider-icon-more { - width: 16px; - height: 16px; - background-image: url("more-results.svg"); -} - -.app-well-app > .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - /* since the label controls its own spacing, it is visually more - consistent to use different padding values for top and bottom */ - padding: 10px 8px 5px 8px; - spacing: 4px; -} - -.app-well-app > .overview-icon, -.show-apps > .overview-icon, -.search-provider-icon, -.list-search-result, -.grid-search-result .overview-icon { - border-radius: 4px; - padding: 6px; - border: 1px rgba(0,0,0,0); - transition-duration: 100ms; - text-align: center; -} - -.search-provider-icon { - padding: 15px; -} - -.app-folder-popup { - -arrow-border-radius: 8px; - -arrow-background-color: rgba(0,0,0,0.3); - -arrow-base: 24px; - -arrow-rise: 11px; -} - -.app-folder-popup-bin { - padding: 5px; -} - -.app-well-app.running > .overview-icon { - text-shadow: black 0px 2px 2px; - background-image: url("running-indicator.svg"); - background-size: contain; -} - -.app-well-app.app-folder > .overview-icon { - background-color: rgba(0,0,0,0.3); -} - -.app-well-app:hover > .overview-icon, -.show-apps:hover > .overview-icon, -.search-provider-icon:hover, -.list-search-result:hover, -.grid-search-result:hover .overview-icon { - background-color: rgba(255,255,255,0.1); - text-shadow: black 0px 2px 2px; - transition-duration: 100ms; - color:white; -} - -.app-display .app-well-app > .overview-icon { - border-radius: 4px; -} - -.list-search-result:hover .list-search-result-description { - text-shadow: rgba(0,0,0,0.8) 0px 1px 2px; -} - -.show-apps { - padding: 4px 0; -} - -.show-apps-icon { - color: #a0a0a0; -} - -.show-apps:hover .show-apps-icon { - color: white; -} - -.app-well-app:checked > .overview-icon, -.app-well-app:active > .overview-icon, -.show-apps:checked > .overview-icon, -.show-apps:active > .overview-icon, -.search-provider-icon:active, -.grid-search-result:active .overview-icon, -.list-search-result:active { - background-gradient-start: rgba(255, 255, 255, .05); - background-gradient-end: rgba(255, 255, 255, .15); - background-gradient-direction: vertical; - border-radius: 4px; - box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.7); - transition-duration: 100ms; -} - -.show-apps:checked .show-apps-icon, -.show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; -} - -.app-well-app:focus > .overview-icon, -.grid-search-result:focus .overview-icon, -.show-apps:focus > .overview-icon, -.search-provider-icon:focus, -.list-search-result:focus, -.app-well-app:selected > .overview-icon, -.grid-search-result:selected .overview-icon, -.search-provider-icon:selected, -.list-search-result:selected { - background-color: rgba(255,255,255,0.33); -} /* LookingGlass */ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 56724110d..057589c61 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -71,350 +71,6 @@ spacing: 12px; } /* Overview */ -#overview { - spacing: 24px; } - -.overview-controls { - padding-bottom: 32px; } - -.workspace-thumbnails { - spacing: 11px; - visible-width: 32px; - /* Amount visible before hovering */ - border: 1px solid rgba(128, 128, 128, 0.4); - border-right: 0px; - border-radius: 9px 0px 0px 9px; - background-color: rgba(0, 0, 0, 0.5); - padding: 11px 7px 11px 11px; } - -.workspace-thumbnails:rtl { - border-right: 1px; - border-left: 0px; - border-radius: 0px 9px 9px 0px; - padding: 11px 11px 11px 7px; } - -.workspace-thumbnail-indicator { - border: 4px solid rgba(255, 255, 255, 0.7); - border-radius: 4px; - padding: 1px; } - -.window-caption { - spacing: 25px; - background: rgba(0, 0, 0, 0.5); - border-radius: 8px; - padding: 4px 12px; - -shell-caption-spacing: 12px; - border: 2px solid transparent; } - -.window-caption:hover { - border: 2px solid rgba(255, 255, 255, 0); } - -.window-close, .notification-close { - background-image: url("close-window.svg"); - background-size: 32px; - height: 32px; - width: 32px; } - -.window-close { - -shell-close-overlap: 16px; } - -.window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.5); - border-radius: 4px; } - -.notification-close { - /* we start out in the top right of the - * notification, inset. - * - * center is 32px/2 = 16px - * - * adjust left 2px - * adjust down 8px */ - -shell-close-overlap-x: 14px; - -shell-close-overlap-y: -12px; } - -.notification-close:rtl { - /* as above, but starting out in the top left of the - * notification. */ - -shell-close-overlap-x: -14px; } - -.window-close:rtl { - -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); } - -.window-picker { - -horizontal-spacing: 32px; - -vertical-spacing: 32px; - padding-left: 32px; - padding-right: 32px; - padding-bottom: 48px; } - -.window-picker.external-monitor { - padding: 32px; } - -.messages-indicator { - color: #999999; - height: 32px; } - -.messages-indicator-contents { - spacing: 12px; - padding-bottom: 12px; } - -.messages-indicator-contents:hover { - color: white; - text-shadow: black 0px 2px 2px; } - -.messages-indicator-highlight { - background-gradient-start: transparent; - background-gradient-end: #999999; - background-gradient-direction: vertical; - height: 6px; } - -/* Dash */ -#dash { - color: #5f5f5f; - font-size: 9pt; - padding: 4px 0px; - background-color: rgba(0, 0, 0, 0.5); - border: 1px solid rgba(128, 128, 128, 0.4); - border-left: 0px; - border-radius: 0px 9px 9px 0px; } - -#dash:rtl { - border-left: 1px; - border-right: 0px; - border-radius: 9px 0px 0px 9px; } - -.placeholder { - background-image: url("dash-placeholder.svg"); - background-size: contain; - height: 24px; } - -.empty-dash-drop-target { - width: 24px; - height: 24px; } - -/* Search Box */ -.search-entry { - width: 320px; } - -.search-entry-icon { - icon-size: 1em; - color: #c0c0c0; } - -.search-entry:hover .search-entry-icon, -.search-entry:focus .search-entry-icon { - color: #8d8f8a; } - -/* Search Results */ -#searchResults { - padding: 20px 10px 0px 10px; - spacing: 18px; } - -#searchResultsBin { - max-width: 1000px; } - -#searchResultsContent { - padding-left: 20px; - padding-right: 20px; - spacing: 16px; } - -.search-section { - /* This should be equal to #searchResultsContent spacing */ - spacing: 16px; } - -.search-section-separator { - -gradient-height: 1px; - -gradient-start: rgba(255, 255, 255, 0); - -gradient-end: rgba(255, 255, 255, 0.5); - -margin-horizontal: 1.5em; - height: 1px; } - -.search-section-content { - /* This is the space between the provider icon and the results container */ - spacing: 32px; } - -.search-statustext { - color: #efefef; - font-size: 2em; - font-weight: bold; } - -.list-search-results { - spacing: 3px; } - -.dash-label { - border-radius: 7px; - padding: 4px 12px; - background-color: rgba(0, 0, 0, 0.5); - text-align: center; - -x-offset: 8px; } - -/* Application Launchers, Grid and List results */ -.icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; } - -.icon-grid .overview-icon { - icon-size: 96px; } - -.app-display { - spacing: 20px; } - -.app-view-controls { - padding-bottom: 32px; } - -.app-view-control { - padding: 4px 32px; } - -.app-view-control:focus { - padding: 3px 31px; } - -.search-display > StBoxLayout, -.all-apps, -.frequent-apps > StBoxLayout { - /* horizontal padding to make sure scrollbars or dash don't overlap content */ - padding: 0px 88px 10px 88px; } - -.page-indicator { - padding: 15px 20px; } - -.page-indicator .page-indicator-icon { - width: 18px; - height: 18px; - background-image: url(page-indicator-inactive.svg); } - -.page-indicator:hover .page-indicator-icon { - background-image: url(page-indicator-hover.svg); } - -.page-indicator:active .page-indicator-icon { - background-image: url(page-indicator-active.svg); } - -.page-indicator:checked .page-indicator-icon, -.page-indicator:checked:active .page-indicator-icon { - background-image: url(page-indicator-checked.svg); } - -.no-frequent-applications-label { - font-size: 18pt; - color: #999999; } - -.app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; } - -.dash-item-container > StButton { - padding: 4px 8px; } - -.list-search-result-content { - spacing: 12px; - padding: 12px; } - -.list-search-result-title { - font-weight: bold; - font-size: 14pt; - color: white; } - -.list-search-result-description { - color: #eeeeec; } - -.search-provider-icon-more { - width: 16px; - height: 16px; - background-image: url("more-results.svg"); } - -.app-well-app > .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - /* since the label controls its own spacing, it is visually more - consistent to use different padding values for top and bottom */ - padding: 10px 8px 5px 8px; - spacing: 4px; } - -.app-well-app > .overview-icon, -.show-apps > .overview-icon, -.search-provider-icon, -.list-search-result, -.grid-search-result .overview-icon { - border-radius: 4px; - padding: 6px; - border: 1px transparent; - transition-duration: 100ms; - text-align: center; } - -.search-provider-icon { - padding: 15px; } - -.app-folder-popup { - -arrow-border-radius: 8px; - -arrow-background-color: rgba(0, 0, 0, 0.3); - -arrow-base: 24px; - -arrow-rise: 11px; } - -.app-folder-popup-bin { - padding: 5px; } - -.app-well-app.running > .overview-icon { - text-shadow: black 0px 2px 2px; - background-image: url("running-indicator.svg"); - background-size: contain; } - -.app-well-app.app-folder > .overview-icon { - background-color: rgba(0, 0, 0, 0.3); } - -.app-well-app:hover > .overview-icon, -.show-apps:hover > .overview-icon, -.search-provider-icon:hover, -.list-search-result:hover, -.grid-search-result:hover .overview-icon { - background-color: rgba(255, 255, 255, 0.1); - text-shadow: black 0px 2px 2px; - transition-duration: 100ms; - color: white; } - -.app-display .app-well-app > .overview-icon { - border-radius: 4px; } - -.list-search-result:hover .list-search-result-description { - text-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px; } - -.show-apps { - padding: 4px 0; } - -.show-apps-icon { - color: #a0a0a0; } - -.show-apps:hover .show-apps-icon { - color: white; } - -.app-well-app:checked > .overview-icon, -.app-well-app:active > .overview-icon, -.show-apps:checked > .overview-icon, -.show-apps:active > .overview-icon, -.search-provider-icon:active, -.grid-search-result:active .overview-icon, -.list-search-result:active { - background-gradient-start: rgba(255, 255, 255, 0.05); - background-gradient-end: rgba(255, 255, 255, 0.15); - background-gradient-direction: vertical; - border-radius: 4px; - box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.7); - transition-duration: 100ms; } - -.show-apps:checked .show-apps-icon, -.show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; } - -.app-well-app:focus > .overview-icon, -.grid-search-result:focus .overview-icon, -.show-apps:focus > .overview-icon, -.search-provider-icon:focus, -.list-search-result:focus, -.app-well-app:selected > .overview-icon, -.grid-search-result:selected .overview-icon, -.search-provider-icon:selected, -.list-search-result:selected { - background-color: rgba(255, 255, 255, 0.33); } - /* LookingGlass */ #LookingGlassDialog { background-color: rgba(0, 0, 0, 0.8); @@ -1673,7 +1329,7 @@ stage { .app-view-control:active { color: white; border-color: rgba(0, 0, 0, 0.7); - background-color: #2e3436; + background-color: #222728; box-shadow: none; text-shadow: none; icon-shadow: none; } @@ -1694,12 +1350,6 @@ StEntry { color: #939695; border-color: #323636; box-shadow: none; } - StEntry .search-entry { - padding: 7px 9px; - border-radius: 24px; } - StEntry .search-entry:focus { - padding: 6px 8px; - border-width: 2px; } /* Scrollbars */ StScrollBar { @@ -1940,4 +1590,242 @@ StScrollBar { .popup-menu-icon { icon-size: 1.09em; } +.window-close, .notification-close { + background-image: url("close-window.svg"); + background-size: 32px; + height: 32px; + width: 32px; } + +.window-close { + -shell-close-overlap: 16px; } + .window-close:rtl { + -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); } + +.notification-close { + -shell-close-overlap-x: 14px; + -shell-close-overlap-y: -12px; } + .notification-close:rtl { + -shell-close-overlap-x: -14px; } + +/* OVERVIEW */ +#overview { + spacing: 24px; } + +.window-picker { + -horizontal-spacing: 32px; + -vertical-spacing: 32px; + padding-left: 32px; + padding-right: 32px; + padding-bottom: 48px; } + .window-picker.external-monitor { + padding: 32px; } + +.messages-indicator { + color: rgba(238, 238, 236, 0.8); + height: 32px; } + +.messages-indicator-contents { + spacing: 12px; + padding-bottom: 12px; } + +.search-entry { + width: 320px; + padding: 7px 9px; + border-radius: 24px; } + .search-entry:focus { + padding: 6px 8px; + border-width: 2px; } + .search-entry .search-entry-icon { + icon-size: 1em; + padding: 0 4px; + color: rgba(238, 238, 236, 0.7); } + .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon { + color: #eeeeec; } + +#searchResultsBin { + max-width: 1000px; } + +#searchResultsContent { + padding-left: 20px; + padding-right: 20px; + spacing: 16px; } + +.search-selection { + spacing: 16px; } + +.search-selection-content { + spacing: 32px; } + +.list-search-results { + spacing: 3px; } + +.search-section-separator { + -gradient-height: 1px; + -gradient-start: rgba(255, 255, 255, 0); + -gradient-end: rgba(255, 255, 255, 0.1); + -margin-horizontal: 1.5em; + height: 1px; } + +.list-search-result-content { + spacing: 12px; + padding: 12px; } + +.list-search-result-title { + font-size: 1.5em; + color: #e2e2df; } + +.list-search-result-description { + color: #cacac4; } + +.search-provider-icon { + padding: 15px; } + +.search-provider-icon-more { + width: 16px; + height: 16px; + background-image: url("more-results.svg"); } + +/* DASHBOARD */ +#dash { + color: red; + padding: 4px 0; + color: #eeeeec; + background-color: #2e3436; + border: 1px solid rgba(238, 238, 236, 0.2); + border-left: 0px; + border-radius: 0px 9px 9px 0px; } + #dash:rtl { + border-left-width: 1px; + border-right-width: 0; + border-radius: 9px 0 0 9px; } + #dash .placeholder { + background-image: url("dash-placeholder.svg"); + background-size: contain; + height: 24px; } + #dash .empty-dash-drop-target { + width: 24px; + height: 24px; } + #dash .overview-icon:hover { + background-color: rgba(46, 52, 54, 0.4); } + +.dash-label { + border-radius: 7px; + padding: 4px 12px; + background-color: rgba(46, 52, 54, 0.7); + text-align: center; + -x-offset: 8px; } + +/* App Vault/Grid */ +.icon-grid { + spacing: 30px; + -shell-grid-horizontal-item-size: 136px; + -shell-grid-vertical-item-size: 136px; } + +.app-view-controls { + padding-bottom: 32px; } + +.app-view-control { + padding: 4px 32px; } + .app-view-control:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-color: #222728; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .app-view-control:first-child { + border-right-width: 0; + border-radius: 3px 0 0 3px; } + .app-view-control:last-child { + border-radius: 0 3px 3px 0; } + +.search-provider-icon:active, .search-provider-icon:checked, +.list-search-result:active, +.list-search-result:checked { + background-color: rgba(46, 52, 54, 0.9); } +.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, +.list-search-result:focus, +.list-search-result:selected, +.list-search-result:hover { + background-color: rgba(46, 52, 54, 0.5); } + +.app-well-app:active > .overview-icon, .app-well-app:checked > .overview-icon, +.show-apps:active > .overview-icon, +.show-apps:checked > .overview-icon, +.grid-search-result:active > .overview-icon, +.grid-search-result:checked > .overview-icon { + background-color: rgba(46, 52, 54, 0.9); } +.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, +.show-apps:selected > .overview-icon, +.grid-search-result:hover > .overview-icon, +.grid-search-result:focus > .overview-icon, +.grid-search-result:selected > .overview-icon { + background-color: rgba(46, 52, 54, 0.5); } + +.search-provider-icon, +.list-search-result, .app-well-app > .overview-icon, +.show-apps > .overview-icon, +.grid-search-result > .overview-icon { + border-radius: 4px; + padding: 6px; + border: 1px solid transparent; + transition-duration: 100ms; + text-align: center; } + +.app-well-app.running > .overview-icon { + text-shadow: black 0px 2px 2px; + border-image: url("panel-button-border.svg") 6 10 0 2; } + +.app-well-app.app-folder > .overview-icon { + background-color: rgba(46, 52, 54, 0.4); } + +.show-apps:checked .show-apps-icon, +.show-apps:focus .show-apps-icon { + color: white; + transition-duration: 100ms; } + +.app-folder-popup { + -arrow-border-radius: 8px; + -arrow-background-color: rgba(46, 52, 54, 0.3); + -arrow-base: 24px; + -arrow-rise: 11px; } + +.app-folder-popup-bin { + padding: 5px; } + +.app-folder-icon { + padding: 5px; + spacing-rows: 5px; + spacing-columns: 5px; } + +.page-indicator { + padding: 15px 20px; } + .page-indicator .page-indicator-icon { + width: 18px; + height: 18px; + background-image: url(page-indicator-inactive.svg); } + .page-indicator:hover .page-indicator-icon { + background-image: url(page-indicator-hover.svg); } + .page-indicator:active .page-indicator-icon { + background-image: url(page-indicator-active.svg); } + .page-indicator:checked .page-indicator-icon, .page-indicator:checked:active { + background-image: url(page-indicator-checked.svg); } + +.app-well-app > .overview-icon.overview-icon-with-label, +.grid-search-result .overview-icon.overview-icon-with-label { + padding: 10px 8px 5px 8px; + spacing: 4px; } + +.search-display > StBoxLayout, +.all-apps, +.frequent-apps > StBoxLayout { + padding: 0px 88px 10px 88px; } + +.search-statustext, .no-frequent-applications-label { + font-size: 2em; + font-weight: bold; + color: #eeeeec; } + /* NOTIFICATIONS & MESSAGE TRAY */