theme: overview styling
- still some quirks - boy is this unstructured mess a pain to clean up :(
This commit is contained in:
Jakub Steiner
Florian Müllner
parent
7be4238aa2
commit
868a199144
@ -66,15 +66,7 @@ StEntry {
|
|||||||
//&:hover { @include entry(hover);}
|
//&:hover { @include entry(hover);}
|
||||||
&:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
|
&:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
|
||||||
&:insensitive { @include entry(insensitive);}
|
&: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-arrow { width: 16px; height: 16px; }
|
||||||
.popup-menu-icon { icon-size: 1.09em; }
|
.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 */
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
||||||
|
|||||||
@ -183,7 +183,7 @@
|
|||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
border-color: $osd_borders_color;
|
border-color: $osd_borders_color;
|
||||||
background-color: $_bg;
|
background-color: darken($_bg,5%);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
icon-shadow: none;
|
icon-shadow: none;
|
||||||
|
|||||||
@ -94,425 +94,6 @@
|
|||||||
|
|
||||||
/* Overview */
|
/* 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 */
|
/* LookingGlass */
|
||||||
|
|
||||||
|
|||||||
@ -71,350 +71,6 @@
|
|||||||
spacing: 12px; }
|
spacing: 12px; }
|
||||||
|
|
||||||
/* Overview */
|
/* 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 */
|
/* LookingGlass */
|
||||||
#LookingGlassDialog {
|
#LookingGlassDialog {
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
@ -1673,7 +1329,7 @@ stage {
|
|||||||
.app-view-control:active {
|
.app-view-control:active {
|
||||||
color: white;
|
color: white;
|
||||||
border-color: rgba(0, 0, 0, 0.7);
|
border-color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: #2e3436;
|
background-color: #222728;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
icon-shadow: none; }
|
icon-shadow: none; }
|
||||||
@ -1694,12 +1350,6 @@ StEntry {
|
|||||||
color: #939695;
|
color: #939695;
|
||||||
border-color: #323636;
|
border-color: #323636;
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
StEntry .search-entry {
|
|
||||||
padding: 7px 9px;
|
|
||||||
border-radius: 24px; }
|
|
||||||
StEntry .search-entry:focus {
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-width: 2px; }
|
|
||||||
|
|
||||||
/* Scrollbars */
|
/* Scrollbars */
|
||||||
StScrollBar {
|
StScrollBar {
|
||||||
@ -1940,4 +1590,242 @@ StScrollBar {
|
|||||||
.popup-menu-icon {
|
.popup-menu-icon {
|
||||||
icon-size: 1.09em; }
|
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 */
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user