/* 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. */ stage { font-family: cantarell, sans-serif; } .shell-link { color: #0000ff; text-decoration: underline; } .shell-link:hover { color: #0000e0; } .label-shadow { color: rgba(0,0,0,0.5); } .label-real-shadow { background-gradient-direction: horizontal; background-gradient-start: rgba(0, 0, 0, 0); background-gradient-end: rgba(0, 0, 0, 255); width: 10px; } StScrollBar { padding: 0px; } StScrollView StScrollBar { min-width: 16px; min-height: 16px; } StScrollBar StBin#trough { 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 StLabel { border: 1px solid rgba(79,111,173,1); border-radius: 5px; padding: 4px; background-color: rgba(79,111,173,0.9); color: #ffffff; font-size: 0.8em; font-weight: normal; text-align: center; } /* PopupMenu */ .popup-menu-boxpointer { -arrow-border-radius: 9px; -arrow-background-color: rgba(0,0,0,0.9); -arrow-border-width: 2px; -arrow-border-color: #5f5f5f; -arrow-base: 30px; -arrow-rise: 15px; } .popup-menu { color: #ffffff; font-size: 14px; min-width: 200px; } .popup-sub-menu { background-color: #606060; } /* The remaining popup-menu sizing is all done in ems, so that if you * override .popup-menu.font-size, everything else will scale with it. */ .popup-menu-content { padding: 1em 0em; } .popup-menu-item { padding: .4em 1.75em; spacing: 1em; } .popup-menu-item:active { background-color: #4c4c4c; } .popup-image-menu-item { } .popup-separator-menu-item { -gradient-height: 2px; -gradient-start: rgba(8,8,8,0); -gradient-end: #333333; -margin-horizontal: 1.5em; height: 1em; } .popup-slider-menu-item { height: 1em; min-width: 15em; -slider-height: 0.3em; -slider-background-color: #333333; -slider-border-color: #5f5f5f; -slider-border-width: 1px; -slider-handle-radius: 0.5em; } .popup-device-menu-item { spacing: .5em; } .popup-menu-icon { icon-size: 1.14em; } /* Switches (to be used in menus) */ .toggle-switch { width: 4.5em; height: 1.5em; } .toggle-switch-us { background-image: url("toggle-off-us.svg"); } .toggle-switch-us:checked { background-image: url("toggle-on-us.svg"); } .toggle-switch-intl { background-image: url("toggle-off-intl.svg"); } .toggle-switch-intl:checked { background-image: url("toggle-on-intl.svg"); } /* Panel */ #panel { color: #ffffff; background-color: black; } #panelLeft, #panelCenter, #panelRight { spacing: 4px; font-weight: bold; } #panelLeft { padding-right: 4px; } #panelRight { padding-left: 4px; } #appMenu { spacing: 4px; } .app-menu-icon { width: 24px; height: 24px; } .panel-button { padding: 0px 12px; border-radius: 5px; border-radius-bottomleft: 0px; border-radius-bottomright: 0px; font-size: 14px; font-weight: bold; transition-duration: 100; } .panel-button:active, .panel-button:checked, .panel-button:pressed, .panel-button:focus { background-gradient-direction: vertical; background-gradient-start: #3c3c3c; background-gradient-end: #131313; } #panelActivities { border-radius-topleft: 0px; } #panelStatus { border-radius-topright: 0px; } #panelStatusMenu { spacing: 4px; } #legacyTray { spacing: 14px; padding-left: 14px; } #legacyTray:compact { spacing: 8px; } .system-status-icon { icon-size: 1.14em; } /* Overview */ #overview { spacing: 12px; background-color: rgba(0,0,0,0.6); } .workspaces-view { color: white; spacing: 25px; } .workspace-indicator-panel { spacing: 8px; } .workspace-indicator { width: 24px; height: 16px; background: rgba(255,255,255,0.2); } .workspace-indicator.active { background: rgba(255,255,255,0.8); } .workspace-controls { width: 48px; font-size: 32px; font-weight: bold; color: #ffffff; border: 2px solid rgba(128, 128, 128, 0.4); border-right: 0px; border-radius: 9px 0px 0px 9px; } .add-workspace { background-color: rgba(128, 128, 128, 0.4); } .add-workspace:hover { background-color: rgba(128, 128, 128, 0.6); } .remove-workspace { height: 48px; } .remove-workspace:hover { background-color: rgba(128, 128, 128, 0.2); } .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-background-image-shadow: -2px 2px 6px rgba(0,0,0,0.5); -shell-close-overlap: 16px; } /* Dash */ #dash { color: #5f5f5f; font-size: 12px; padding: 6px 0px; background-color: rgba(0, 0, 0, 0.5); border: 2px solid rgba(128, 128, 128, 0.4); border-left: 0px; border-radius: 0px 9px 9px 0px; } #dash:empty { height: 100px; width: 60px; } .dash-placeholder { background-image: url("dash-placeholder.svg"); height: 27px; } #viewSelector { spacing: 16px; font-size: 16px; } #viewSelectorTabBar { padding: 16px; } #searchArea { padding: 0px 24px; } #searchEntry { padding: 4px 8px; border-radius: 12px; color: rgb(128, 128, 128); border: 2px solid rgba(128, 128, 128, 0.4); background-gradient-start: rgba(0, 0, 0, 0.2); background-gradient-end: rgba(128, 128, 128, 0.2); background-gradient-direction: vertical; caret-color: rgb(128, 128, 128); caret-size: 1px; height: 16px; width: 250px; transition-duration: 300; } #searchEntry:focus { border: 2px solid #ffffff; background-gradient-start: rgba(0, 0, 0, 0.2); background-gradient-end: #ffffff; background-gradient-direction: vertical; color: rgb(64, 64, 64); font-weight: bold; box-shadow: 0px 0px 6px 2px rgba(255,255,255,0.9); transition-duration: 0; } #searchEntry:hover { border: 2px solid #e8e8e8; caret-color: #545454; transition-duration: 500; } .view-tab-title { color: #888a85; font-weight: bold; padding: 0px 12px; height: 24px; } .view-tab-title:hover { color: #bbb; } .view-tab-title:selected { color: #000000; background-color: #c2c7cd; border-radius: 4px; height: 24px; } .view-tab-boxpointer { -arrow-border-radius: 9px; -arrow-background-color: rgba(0,0,0,0.5); -arrow-border-width: 2px; -arrow-border-color: rgba(255,255,255,0.5); -arrow-base: 30px; -arrow-rise: 15px; } #searchResults { padding: 20px 10px 10px 10px; } #searchResultsContent { padding: 0 10px; spacing: 8px; } .search-statustext, .search-section-header { padding: 4px 12px; spacing: 4px; color: #6f6f6f; } .search-section { background-color: rgba(128, 128, 128, .1); border: 1px solid rgba(50, 50, 50, .4); border-radius: 10px; } .search-section-results { color: #ffffff; border-radius: 10px; border: 1px solid rgba(50, 50, 50, .4); padding: 6px; } .search-section-list-results { spacing: 4px; } .results-container { spacing: 4px; } .search-providers-box { spacing: 4px; } .dash-search-button { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0); /* border: 1px solid #808080;*/ border-radius: 10px; height: 32px; width: 300px; } .dash-search-button:selected, .dash-search-button:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.4); background-gradient-end: rgba(255, 255, 255, 0.2); } .dash-search-button-label { color: #cccccc; font-size: 16px; } /* Apps */ .icon-grid { spacing: 36px; -shell-grid-item-size: 70px; } .all-app { padding: 16px 25px 16px 16px; spacing: 20px; } .app-filter { font-size: 14px; font-weight: bold; height: 40px; color: #aaa; width: 200px; } .app-filter:selected { color: #ffffff; background-image: url("filter-selected.svg"); background-position: 190px 10px; } #dash > .app-well-app { padding: 6px 12px; } .remove-favorite-icon { color: #a0a0a0; } .remove-favorite-icon:hover { color: white; icon-shadow: black 0px 2px 2px; } .app-well-app > .overview-icon, .remove-favorite > .overview-icon, .search-result-content > .overview-icon { border-radius: 4px; padding: 4px; font-size: 10px; color: white; transition-duration: 100; text-align: center; } .app-well-app.running > .overview-icon { text-shadow: black 0px 2px 2px; background-image: url("running-indicator.svg"); } .app-well-app:selected > .overview-icon, .search-result-content:selected > .overview-icon { background: rgba(255,255,255,0.33); } .app-well-app:hover > .overview-icon, .remove-favorite:hover > .overview-icon, .search-result-content:hover > .overview-icon { background: rgba(255,255,255,0.33); text-shadow: black 0px 2px 2px; transition-duration: 100; } .app-well-app:active > .overview-icon { background-color: #1e1e1e; border: 1px solid #5f5f5f; } .app-well-menu { font-size: 12px } /* LookingGlass */ #LookingGlassDialog { background-color: rgba(0,0,0,0.85); spacing: 4px; padding: 4px; border: 2px solid grey; 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:hover { color: #00ff00; } #LookingGlassDialog .notebook-tab:selected { border: 1px solid #88ff66; border-radius: 4px; padding: 5px; } #LookingGlassDialog .lg-inspector-title { font-weight: bold; padding-bottom: 8px; } .lg-dialog StLabel { color: #88ff66; } .lg-dialog StEntry { color: #88ff66; } .lg-obj-inspector-title { spacing: 4px; } .lg-obj-inspector-button { border: 1px solid #88ff66; padding: 4px; border-radius: 4px; } .lg-obj-inspector-button:hover { border: 1px solid #00ff00; } .lg-dialog .shell-link { color: #88ff66; } .lg-dialog .shell-link:hover { color: #00ff00; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } #LookingGlassDialog StBoxLayout#ResultsArea { 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; } #LookingGlassPropertyInspector { background: rgba(0, 0, 0, 0.9); border: 2px solid grey; border-radius: 4px; padding: 6px; color: #88ff66; } /* Calendar popup */ #calendarArea { /* this is the width of the entire popup */ width: 600px; } .calendar-vertical-separator { -stipple-width: 1px; -stipple-color: #505050; width: 1.5em; } #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 { padding: .4em 1.75em; spacing-rows: 0px; spacing-columns: 0px; } .calendar-month-label { color: #666666; font-size: 10px; padding: 2px; } .calendar-change-month-back { width: 20px; height: 20px; background-image: url("calendar-arrow-left.svg"); border-radius: 4px; } .calendar-change-month-back:hover { background-color: #999999; } .calendar-change-month-back:active { background-color: #aaaaaa; } .calendar-change-month-forward { width: 20px; height: 20px; background-image: url("calendar-arrow-right.svg"); border-radius: 4px; } .calendar-change-month-forward:hover { background-color: #999999; } .calendar-change-month-forward:active { background-color: #aaaaaa; } .datemenu-date-label { padding: .4em 1.75em; font-size: 16px; color: #ffffff; } .calendar-day-base { font-size: 10px; text-align: center; width: 24px; height: 24px; } .calendar-day-base:hover { background: #777777; } .calendar-day-base:active { background: #555555; } .calendar-day-heading { color: #666666; } .calendar-week-number { color: #666666; font-weight: bold; } /* Hack used in lieu of border-collapse - see calendar.js */ .calendar-day { border: 1px solid #333333; color: #cccccc; border-top-width: 0; border-left-width: 0; } .calendar-day-top { border-top-width: 1px; } .calendar-day-left { border-left-width: 1px; } .calendar-work-day { } .calendar-nonwork-day { background-color: rgba(128, 128, 128, .1); } .calendar-today { color: #ffffff; font-weight: bold; background-gradient-direction: vertical; background-gradient-start: #3c3c3c; background-gradient-end: #131313; } .calendar-other-month-day { color: #333333; } .calendar-day-with-events { font-weight: bold; } .events-header-vbox { spacing: 10px; } .events-header { height: 40px; } .events-header-hbox { spacing: 8px; padding: 0.3em; } .events-day-header { font-size: 14px; color: rgba(153, 153, 153, 1.0); } .events-day-dayname { font-size: 12px; color: rgba(153, 153, 153, 1.0); text-align: left; } .events-day-time { font-size: 12px; font-weight: bold; color: #fff; text-align: right; } .events-day-task { font-size: 12px; color: rgba(153, 153, 153, 1.0); } .events-day-name-box { width: 20px; } .events-time-box { width: 70px; } .events-event-box { } .url-highlighter { link-color: #ccccff; } /* 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: 36px; } #notification { font-size: 16px; border-radius: 5px 5px 0px 0px; background: rgba(0,0,0,0.9); color: white; padding: 8px 8px 4px 8px; spacing-rows: 10px; spacing-columns: 10px; width: 34em; } .multi-line-notification { padding-bottom: 8px; } .summary-notification-boxpointer { -arrow-border-radius: 9px; -arrow-background-color: rgba(0,0,0,0.9); -arrow-border-width: 2px; -arrow-border-color: #5f5f5f; -arrow-base: 30px; -arrow-rise: 15px; } .summary-notification-boxpointer #notification { border-radius: 9px; background: rgba(0,0,0,0) !important; padding-bottom: 12px; } #notification-scrollview { max-height: 10em; } #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { height: 1em; } #notification-scrollview > StScrollBar { padding-left: 6px; } #notification-body { spacing: 5px; } #notification-actions { spacing: 5px; } .notification-button { background-color: #3c3c3c; padding: 2px 14px; border-radius: 12px; border: 1px solid #181818; } .notification-button:hover { border: 1px solid #a1a1a1; } .notification-button:active { border: 1px solid #a1a1a1; background-color: #2b2b2b; } .notification-icon-button { border: 2px rgba(0,0,0,0.0); border-radius: 5px; padding: 5px; } .notification-icon-button:hover { background: rgba(192,192,192,0.7); } .notification-icon-button:active { background: rgba(128,128,128,0.7); } .notification-icon-button > StIcon { icon-size: 36px; } .chat-received { background-gradient-direction: horizontal; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0); padding-left: 4px; border-radius: 4px; } .chat-sent { background-gradient-direction: horizontal; background-gradient-start: rgba(255, 255, 255, 0); background-gradient-end: rgba(255, 255, 255, 0.2); padding-left: 4px; border-radius: 4px; } .chat-meta-message { padding-left: 4px; border-radius: 4px; font-size: 14px; color: #bbbbbb; } #notification StEntry { padding: 4px; border-radius: 4px; border: 1px solid #565656; color: #a8a8a8; background-color: #404040; caret-color: #ffffff; caret-size: 1px; } #notification StEntry:focus { border: 1px solid #3a3a3a; color: #545454; background-color: #e8e8e8; caret-color: #545454; box-shadow: 0px 0px 6px 2px rgba(255,255,255,0.9); } /* The spacing and padding on the summary is tricky; we want to keep * the icons from touching each other or the edges of the screen, but * we also want them to be "Fitts"-y with respect to the edges, so the * summary area's bottom and right padding must actually be part of * the icons. However, we can't put *all* of the padding into the * icons, because then the summary would be 0x0 when there were no * icons in it, and so you wouldn't be able to hover over it to * activate it. * * Also, the spacing between a summary-source's icon and title is * actually specified as padding-left in source-title, because we * want the spacing to collapse along with the title. */ #summary-mode { padding: 2px 0px 0px 4px; height: 36px; } .summary-source { color: white; } .summary-source-button { padding-left: 3px; padding-right: 3px; } .summary-source-button:last-child { padding-right: 12px; } .source-title { font-size: 12px; font-weight: bold; padding-left: 4px; } /* App Switcher */ #altTabPopup { padding: 8px; spacing: 16px; } .switcher-list { background: rgba(0,0,0,0.8); border: 1px solid rgba(128,128,128,0.40); border-radius: 24px; padding: 20px; font-size: 12px; color: white; } .switcher-list-item-container { spacing: 8px; } .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: 24px; border-radius-topright: 0px; border-radius-bottomright: 0px; 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: 24px; border-radius-topleft: 0px; border-radius-bottomleft: 0px; width: 60px; } .switcher-list .item-box { padding: 8px; border-radius: 8px; } .switcher-list .item-box:outlined { padding: 6px; border: 2px solid rgba(85,85,85,1.0); } .switcher-list .item-box:selected { background: rgba(255,255,255,0.33); } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .thumbnail { width: 256px; } .switcher-list .separator { width: 1px; background: rgba(255,255,255,0.33); } .ripple-box { width: 52px; height: 52px; background-image: url("corner-ripple.png"); } .switcher-arrow { border-color: rgba(0,0,0,0); color: #808080; } .switcher-arrow:highlighted { border-color: rgba(0,0,0,0); color: white; } /* Workspace Switcher */ .workspace-switcher-group { padding: 12px; } .workspace-switcher-container { background: rgba(0,0,0,0.8); border: 1px solid rgba(128,128,128,0.40); border-radius: 24px; padding: 20px; } .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; } .ws-switcher-active-left { height: 100px; border: 0px; background: rgba(255,255,255,0.5); background-image: url("ws-switch-arrow-left.svg"); border-radius: 8px; } .ws-switcher-active-right { height: 100px; border: 0px; background: rgba(255,255,255,0.5); background-image: url("ws-switch-arrow-right.svg"); border-radius: 8px; } .ws-switcher-box { height: 96px; border: 2px solid rgba(85,85,85,0.5); background: transparent; border-radius: 8px; } /* Modal Dialogs */ .modal-dialog { font-size: 12pt; border-radius: 24px; background-color: rgba(0.0, 0.0, 0.0, 0.9); border: 2px solid #868686; color: #ffffff; padding-right: 42px; padding-left: 42px; padding-bottom: 30px; padding-top: 30px; } .modal-dialog-button { border: 1px solid #8b8b8b; border-radius: 18px; font-size: 14px; margin-left: 10px; margin-right: 10px; padding-left: 32px; padding-right: 32px; padding-top: 8px; padding-bottom: 8px; background-gradient-direction: vertical; background-gradient-start: #29323b; background-gradient-end: #121a24; } .modal-dialog-button:active, .modal-dialog-button:pressed { border-color: #a5a5a5; background-gradient-start: #121a24; background-gradient-end: #29323b; } .modal-dialog-button:focus { border: 2px solid #a5a5a5; padding-left: 31px; padding-right: 31px; padding-top: 7px; padding-bottom: 7px; } /* Run Dialog */ .run-dialog-label { font-size: 12px; color: white; } .run-dialog-error-label { font-size: 12px; color: white; } .run-dialog-error-box { padding-top: 15px; spacing: 5px; } .run-dialog-entry { font-size: 14px; font-weight: bold; width: 320px; color: white; } .run-dialog { border-radius: 16px; padding-right: 21px; padding-left: 21px; padding-bottom: 15px; padding-top: 15px; } .lightbox { background-color: rgba(0, 0, 0, 0.4); } /* End Session Dialog */ .end-session-dialog-subject { font-size: 12pt; font-weight: bold; color: #666666; padding-top: 10px; padding-left: 17px; padding-bottom: 30px; } .end-session-dialog-description { font-size: 10pt; color: white; padding-left: 17px; padding-right: 40px; width: 16em; } .end-session-dialog-logout-icon { border: 2px solid #8b8b8b; border-radius: 5px; width: 32px; height: 32px; } .end-session-dialog-shutdown-icon { width: 32px; height: 32px; } .end-session-dialog-app-list { font-size: 10pt; max-height: 200px; padding-top: 42px; padding-bottom: 42px; padding-left: 17px; padding-right: 32px; } .end-session-dialog-app-list-item { padding-right: 1em; } .end-session-dialog-app-list-item-icon { padding-right: 17px; } .end-session-dialog-app-list-item-name { font-size: 10pt; } .end-session-dialog-app-list-item-description { font-size: 8pt; color: #444444; } /* Magnifier */ .magnifier-zoom-region { border: 2px solid rgba(128, 0, 0, 255); } .magnifier-zoom-region.full-screen { border-width: 0px; }