367eaf9161
Limit the AppSwitcher to the screen size by either downscaling or scrolling. We scale the icons down up from 96, 64, 48, 32 to 22 and start scrolling if we still fail to fit on screen. The thumbnail box is shifted to either left or right, when failing to fit we scroll here to. To prevent from being offscreen at the buttom we adjust the thumbnail height to fit. The old positioning logic is replaced with a ShellGenericContainer to implement a custom allocation system. https://bugzilla.gnome.org/show_bug.cgi?id=597983
831 lines
14 KiB
CSS
831 lines
14 KiB
CSS
/* Copyright 2009, Red Hat, Inc.
|
|
*
|
|
* Portions adapted from Mx's data/style/default.css
|
|
* Copyright 2009 Intel Corporation
|
|
*
|
|
* This program is free software; you can redistribute it and/or modify it
|
|
* under the terms and conditions of the GNU Lesser General Public License,
|
|
* version 2.1, as published by the Free Software Foundation.
|
|
*
|
|
* This program is distributed in the hope it will be useful, but WITHOUT ANY
|
|
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
|
|
* more details.
|
|
*
|
|
* You should have received a copy of the GNU Lesser General Public License
|
|
* along with this program; if not, write to the Free Software Foundation,
|
|
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
|
|
*/
|
|
|
|
.shell-link {
|
|
color: #0000ff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.shell-link:hover {
|
|
color: #0000e0;
|
|
}
|
|
|
|
.label-shadow {
|
|
color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
StScrollBar
|
|
{
|
|
padding: 0px;
|
|
}
|
|
|
|
StScrollView
|
|
{
|
|
scrollbar-width: 16px;
|
|
scrollbar-height: 16px;
|
|
}
|
|
|
|
StScrollView > .top-shadow
|
|
{
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: #111111;
|
|
background-gradient-end: rgba(17, 17, 17, 0);
|
|
height: 30px;
|
|
}
|
|
|
|
StScrollView > .bottom-shadow
|
|
{
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: rgba(17, 17, 17, 0);
|
|
background-gradient-end: #111111;
|
|
height: 30px;
|
|
}
|
|
|
|
StScrollBar {
|
|
background-color: #080808;
|
|
border: 1px solid #2d2d2d;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle
|
|
{
|
|
background-image: url("scroll-vhandle.svg");
|
|
background-color: #252525;
|
|
border: 1px solid #080808;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
StScrollBar StButton#hhandle
|
|
{
|
|
background-image: url("scroll-hhandle.svg");
|
|
background-color: #252525;
|
|
border: 1px solid #080808;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
StScrollBar StButton#hhandle:hover,
|
|
StScrollBar StButton#vhandle:hover
|
|
{
|
|
background-color: #292929;
|
|
}
|
|
|
|
StTooltip {
|
|
border: 1px solid rgba(79,111,173,0.9);
|
|
border-radius: 5px;
|
|
padding: 4px;
|
|
background-color: rgba(79,111,173,0.9);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Panel */
|
|
|
|
#panel {
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: #161616;
|
|
background-gradient-end: #000000;
|
|
border-bottom: 1px solid #1f1f1f;
|
|
}
|
|
|
|
#panelLeft, #panelCenter, #panelRight {
|
|
spacing: 4px;
|
|
}
|
|
|
|
#panelLeft {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
#panelRight {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
#appMenu {
|
|
}
|
|
|
|
.panel-button {
|
|
padding: 4px 12px 3px;
|
|
border-radius: 5px;
|
|
border-radius-bottomleft: 0px;
|
|
border-radius-bottomright: 0px;
|
|
font: 16px sans-serif;
|
|
}
|
|
|
|
.panel-button:active, .panel-button:checked, .panel-button:pressed {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: #3c3c3c;
|
|
background-gradient-end: #131313;
|
|
}
|
|
|
|
#panelActivities {
|
|
border-radius-topleft: 0px;
|
|
}
|
|
|
|
#panelStatus {
|
|
border-radius-topright: 0px;
|
|
}
|
|
|
|
#statusMenu {
|
|
spacing: 4px;
|
|
}
|
|
|
|
/* Overview */
|
|
|
|
.overview {
|
|
background-color: #111;
|
|
}
|
|
|
|
.info-bar {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
spacing: 20px;
|
|
}
|
|
|
|
.info-bar-link-button {
|
|
background-color: #2d2d2d;
|
|
padding: 2px 14px;
|
|
border-radius: 10px;
|
|
border: 1px solid #181818;
|
|
}
|
|
|
|
.info-bar-link-button:hover {
|
|
border: 1px solid #666666;
|
|
}
|
|
|
|
.new-workspace-area {
|
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 10px;
|
|
background-color: #111;
|
|
}
|
|
|
|
.new-workspace-area-internal {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: rgba(16, 16, 16, 0);
|
|
background-gradient-end: rgba(16, 16, 16, 1.0);
|
|
background-image: url("move-window-on-new.svg");
|
|
}
|
|
|
|
.new-workspace-area:hover {
|
|
border: 2px solid rgba(255, 255, 255, 1.0);
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: rgba(130, 130, 130, 0.9);
|
|
background-gradient-end: rgba(16, 16, 16, 0.9);
|
|
}
|
|
|
|
.left-workspaces-shadow {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: rgba(16, 16, 16, 1.0);
|
|
background-gradient-end: rgba(16, 16, 16, 0.0);
|
|
}
|
|
|
|
.right-workspaces-shadow {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-end: rgba(16, 16, 16, 1.0);
|
|
background-gradient-start: rgba(16, 16, 16, 0);
|
|
}
|
|
|
|
.workspaces {
|
|
color: white;
|
|
}
|
|
|
|
.workspaces.single {
|
|
spacing: 25px;
|
|
}
|
|
|
|
.workspaces.mosaic {
|
|
spacing: 15px;
|
|
}
|
|
|
|
.workspaces-bar {
|
|
height: 48px;
|
|
}
|
|
|
|
.workspaces-bar {
|
|
spacing: 5px;
|
|
}
|
|
|
|
.workspace-indicator {
|
|
width: 24px;
|
|
height: 16px;
|
|
background: rgba(155,155,155,0.8);
|
|
border-spacing: 16px;
|
|
}
|
|
|
|
.workspace-indicator.active {
|
|
background: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.window-caption {
|
|
background: rgba(0,0,0,0.8);
|
|
border: 1px solid rgba(128,128,128,0.40);
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
-shell-caption-spacing: 4px;
|
|
}
|
|
|
|
.window-close {
|
|
background-image: url("close-window.svg");
|
|
height: 24px;
|
|
width: 24px;
|
|
-st-shadow: -2px 2px 6px rgba(0,0,0,0.5);
|
|
-shell-close-overlap: 16px;
|
|
}
|
|
|
|
.single-view-controls {
|
|
padding: 0px 15px;
|
|
}
|
|
|
|
.workspace-controls {
|
|
width: 24px;
|
|
height: 16px;
|
|
}
|
|
|
|
.workspace-controls.add {
|
|
background-image: url("add-workspace.svg");
|
|
}
|
|
|
|
.workspace-controls.remove {
|
|
background-image: url("remove-workspace.svg");
|
|
}
|
|
|
|
.workspace-controls.switch-single {
|
|
background-image: url("single-view.svg");
|
|
}
|
|
|
|
.workspace-controls.switch-mosaic {
|
|
background-image: url("mosaic-view.svg");
|
|
}
|
|
|
|
.workspace-controls.switch-single:checked {
|
|
background-image: url("single-view-active.svg");
|
|
}
|
|
|
|
.workspace-controls.switch-mosaic:checked {
|
|
background-image: url("mosaic-view-active.svg");
|
|
}
|
|
|
|
#SwitchScroll {
|
|
height: 14px;
|
|
}
|
|
|
|
#SwitchScroll #hhandle {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* Dash */
|
|
|
|
#dash {
|
|
color: #5f5f5f;
|
|
font-size: 12px;
|
|
padding: 0px 14px;
|
|
}
|
|
|
|
#dashSections {
|
|
spacing: 12px;
|
|
}
|
|
|
|
#searchEntry {
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
color: #a8a8a8;
|
|
border: 1px solid #565656;
|
|
background-color: #404040;
|
|
caret-color: #fff;
|
|
caret-size: 1px;
|
|
height: 16px;
|
|
}
|
|
|
|
#searchEntry:focus {
|
|
color: #545454;
|
|
border: 1px solid #3a3a3a;
|
|
background-color: #e8e8e8;
|
|
caret-color: #545454;
|
|
}
|
|
|
|
#searchEntry:hover {
|
|
border: 1px solid #767676;
|
|
}
|
|
|
|
.dash-section {
|
|
spacing: 8px;
|
|
}
|
|
|
|
.section-header {
|
|
}
|
|
|
|
.section-header-inner {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.section-text-content {
|
|
padding: 4px 0px;
|
|
}
|
|
|
|
.section-header-back {
|
|
padding: 0px 4px 0px 0px;
|
|
border-right: 1px solid #262626;
|
|
}
|
|
|
|
.section-header-back-image {
|
|
background-image: url("section-back.svg");
|
|
width: 12px;
|
|
height: 16px;
|
|
}
|
|
|
|
.section-count {
|
|
}
|
|
|
|
.dash-section-content {
|
|
color: #ffffff;
|
|
spacing: 8px;
|
|
}
|
|
|
|
.more-link {
|
|
}
|
|
|
|
.more-link-expander {
|
|
background-image: url("section-more.svg");
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.more-link-expander.open {
|
|
background-image: url("section-more-open.svg");
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.dash-pane {
|
|
border-radius: 10px;
|
|
background-color: #111111;
|
|
border: 2px solid #868686;
|
|
color: #ffffff;
|
|
padding: 30px 10px 10px 20px;
|
|
}
|
|
|
|
.dash-search-section-header {
|
|
padding: 6px 0px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.dash-search-section-results {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dash-search-section-list-results {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.dash-search-result-content {
|
|
padding: 3px;
|
|
}
|
|
|
|
.dash-search-result-content:selected {
|
|
padding: 2px;
|
|
border: 1px solid #5c5c5c;
|
|
border-radius: 2px;
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
/* GenericDisplay */
|
|
|
|
.generic-display-container {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.generic-display-item {
|
|
height: 50px;
|
|
border-radius: 4px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.generic-display-item:selected {
|
|
background-color: rgba(79,111,173,0.66);
|
|
}
|
|
|
|
.generic-display-item-text {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.generic-display-item-description {
|
|
font-size: 12px;
|
|
color: #bababa;
|
|
}
|
|
|
|
.generic-display-details {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.generic-display-details-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Apps */
|
|
|
|
.overview-pane {
|
|
width: 440px;
|
|
}
|
|
|
|
#dashAppWell {
|
|
spacing: 6px;
|
|
-shell-grid-item-size: 70px;
|
|
}
|
|
|
|
.all-app {
|
|
border-radius: 10px;
|
|
background-color: #111111;
|
|
border: 2px solid #868686;
|
|
color: #ffffff;
|
|
height: 400px;
|
|
}
|
|
|
|
.all-app-controls-panel {
|
|
height: 30px;
|
|
}
|
|
|
|
.all-app-scroll-view {
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.app-well-app {
|
|
border: 1px solid #181818;
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
width: 70px;
|
|
height: 70px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.app-well-app.running {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: #3d3d3d;
|
|
background-gradient-end: #181818;
|
|
}
|
|
|
|
.app-well-app.selected {
|
|
border: 1px solid #666666;
|
|
}
|
|
|
|
.app-well-app:hover {
|
|
border: 1px solid #666666;
|
|
}
|
|
|
|
.app-well-app:active {
|
|
background-color: #1e1e1e;
|
|
border: 1px solid #5f5f5f;
|
|
}
|
|
|
|
.app-well-menu {
|
|
border: 1px solid #5f5f5f;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
background-color: rgba(0,0,0,0.9);
|
|
color: #ffffff;
|
|
-shell-arrow-width: 12px;
|
|
-shell-menu-spacing: 4px;
|
|
}
|
|
|
|
.app-well-menu-item:hover {
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
.app-well-menu-separator {
|
|
padding-top: 1px;
|
|
border-bottom: 1px solid #5f5f5f;
|
|
height: 1px;
|
|
}
|
|
|
|
/* Places */
|
|
|
|
.places-actions {
|
|
spacing: 4px;
|
|
}
|
|
|
|
#placesDevices {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
/* LookingGlass */
|
|
|
|
#LookingGlassDialog
|
|
{
|
|
background-color: rgba(0,0,0,0.85);
|
|
spacing: 4px;
|
|
padding: 4px;
|
|
border: 1px solid rgba(0,0,172,0.85);
|
|
border-radius: 4px;
|
|
|
|
color: #88ff66;
|
|
}
|
|
|
|
#LookingGlassDialog > #Toolbar
|
|
{
|
|
border: 1px solid grey;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#LookingGlassDialog .labels {
|
|
spacing: 4px;
|
|
}
|
|
|
|
#LookingGlassDialog .notebook-tab {
|
|
padding: 2px;
|
|
}
|
|
|
|
#LookingGlassDialog .notebook-tab:selected {
|
|
border: 1px solid #88ff66;
|
|
padding: 1px;
|
|
}
|
|
|
|
#LookingGlassDialog StLabel
|
|
{
|
|
color: #88ff66;
|
|
}
|
|
|
|
#LookingGlassDialog StEntry
|
|
{
|
|
color: #88ff66;
|
|
}
|
|
|
|
#LookingGlassDialog StBoxLayout#EvalBox
|
|
{
|
|
padding: 4px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
#lookingGlassExtensions {
|
|
padding: 4px;
|
|
}
|
|
|
|
.lg-extension-list {
|
|
padding: 4px;
|
|
spacing: 6px;
|
|
}
|
|
|
|
.lg-extension {
|
|
border: 1px solid #6f6f6f;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.lg-extension-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lg-extension-actions {
|
|
spacing: 6px;
|
|
}
|
|
|
|
/* Calendar popup */
|
|
|
|
#calendarPopup {
|
|
border-radius: 5px;
|
|
background: rgba(0,0,0,0.9);
|
|
border: 1px solid rgba(128,128,128,0.45);
|
|
color: white;
|
|
}
|
|
|
|
#calendarPopup .calendar {
|
|
padding: 10px;
|
|
}
|
|
|
|
.calendar {
|
|
spacing-rows: 5px;
|
|
spacing-columns: 3px;
|
|
}
|
|
|
|
.calendar-change-month {
|
|
padding: 2px;
|
|
}
|
|
|
|
.calendar-change-month:hover {
|
|
background: #314a6c;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.calendar-change-month:active {
|
|
background: #213050;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.calendar-day {
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
.calendar-today {
|
|
font-weight: bold;
|
|
background: #ffffff;
|
|
color: black;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.calendar-other-month-day {
|
|
color: #cccccc;
|
|
}
|
|
|
|
/* Message Tray */
|
|
#message-tray {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: rgba(0,0,0,0.01);
|
|
background-gradient-end: rgba(0,0,0,0.95);
|
|
height: 28px;
|
|
}
|
|
|
|
#notification {
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
background: rgba(0,0,0,0.9);
|
|
color: white;
|
|
padding: 2px 10px 10px 10px;
|
|
spacing-rows: 5px;
|
|
spacing-columns: 10px;
|
|
max-width: 40em;
|
|
}
|
|
|
|
#notification-actions {
|
|
spacing: 5px;
|
|
}
|
|
|
|
.notification-button {
|
|
border: 2px rgba(0,0,0,0.0);
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
background: #c0c0c0;
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.notification-button:hover {
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.notification-button:active {
|
|
border: 2px solid white;
|
|
background: #808080;
|
|
}
|
|
|
|
#summary-mode {
|
|
spacing: 10px;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/* App Switcher */
|
|
.switcher-list {
|
|
background: rgba(0,0,0,0.8);
|
|
border: 1px solid rgba(128,128,128,0.40);
|
|
border-radius: 8px;
|
|
padding: 18px;
|
|
|
|
font: 12px sans-serif;
|
|
color: white;
|
|
}
|
|
|
|
.thumbnail-scroll-gradient-left {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: rgba(51, 51, 51, 1.0);
|
|
background-gradient-end: rgba(51, 51, 51, 0);
|
|
border-radius: 8px;
|
|
width: 60px;
|
|
}
|
|
|
|
.thumbnail-scroll-gradient-right {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: rgba(51, 51, 51, 0);
|
|
background-gradient-end: rgba(51, 51, 51, 1.0);
|
|
border-radius: 8px;
|
|
width: 60px;
|
|
}
|
|
|
|
.switcher-list .item-box {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.switcher-list .thumbnail-box {
|
|
padding: 2px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.switcher-list .thumbnail {
|
|
width: 256px;
|
|
}
|
|
|
|
.switcher-list .outlined-item-box {
|
|
padding: 6px;
|
|
border: 2px solid rgba(85,85,85,1.0);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.switcher-list .selected-item-box {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background: rgba(255,255,255,0.33);
|
|
}
|
|
|
|
.switcher-list .separator {
|
|
width: 1px;
|
|
background: rgba(255,255,255,0.33);
|
|
}
|
|
|
|
.ripple-box {
|
|
width: 52px;
|
|
height: 52px;
|
|
background-image: url("corner-ripple.png");
|
|
}
|
|
|
|
/* Workspace Switcher */
|
|
.workspace-switcher-container {
|
|
background: rgba(0,0,0,0.8);
|
|
border: 1px solid rgba(128,128,128,0.40);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.workspace-switcher {
|
|
background: transparent;
|
|
border: 0px;
|
|
border-radius: 0px;
|
|
padding: 4px;
|
|
spacing: 4.5px;
|
|
}
|
|
|
|
.ws-switcher-active-left {
|
|
height: 98px;
|
|
border: 0px;
|
|
background: rgba(255,255,255,0.5);
|
|
background-image: url("ws-switch-arrow-left.svg");
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ws-switcher-active-right {
|
|
height: 98px;
|
|
border: 0px;
|
|
background: rgba(255,255,255,0.5);
|
|
background-image: url("ws-switch-arrow-right.svg");
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ws-switcher-box {
|
|
height: 96px;
|
|
border: 2px solid rgba(85,85,85,0.5);
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Run Dialog */
|
|
.run-dialog-label {
|
|
font: 12px sans-serif;
|
|
color: white;
|
|
}
|
|
|
|
.run-dialog-error-icon {
|
|
background-image: url("dialog-error.svg");
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.run-dialog-error-label {
|
|
font: 16px sans-serif;
|
|
color: white;
|
|
}
|
|
|
|
.run-dialog-entry {
|
|
font: 14px sans-serif;
|
|
font-weight: bold;
|
|
width: 320px;
|
|
color: white;
|
|
}
|
|
|
|
.run-dialog {
|
|
padding: 8px;
|
|
border: 1px solid rgba(128,128,128,0.40);
|
|
border-radius: 4px;
|
|
background: rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.lightbox {
|
|
background-color: rgba(0, 0, 0, 0.27);
|
|
}
|