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
@ -67,14 +67,6 @@ StEntry {
|
||||
&: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 */
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 */
|
||||
|
||||
|
||||
@ -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 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user