4ab513ca77
We should either be showing the message tray in the notification or the summary mode. This is best achieved if the message tray actor contains both, and either one is shown at any given time. Queue notifications so that each queued notification is shown when the previous one times out or when the user is done interacting with the message tray and moves the mouse away from it. (In the future, we will have some sort of an indication that there are queued notifications and a way to have the next notification displayed without moving the mouse away from the message tray.)
539 lines
8.6 KiB
CSS
539 lines
8.6 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;
|
|
}
|
|
|
|
StScrollBar
|
|
{
|
|
padding: 0px;
|
|
}
|
|
|
|
StScrollView
|
|
{
|
|
scrollbar-width: 16px;
|
|
scrollbar-height: 16px;
|
|
}
|
|
|
|
StButton#up-stepper
|
|
{
|
|
border-image: url("scroll-button-up.png") 5;
|
|
}
|
|
|
|
StButton#up-stepper:hover,
|
|
StButton#up-stepper:active
|
|
{
|
|
border-image: url("scroll-button-up-hover.png") 5;
|
|
}
|
|
|
|
StButton#down-stepper
|
|
{
|
|
border-image: url("scroll-button-down.png") 5;
|
|
}
|
|
|
|
StButton#down-stepper:hover,
|
|
StButton#down-stepper:active
|
|
{
|
|
border-image: url("scroll-button-down-hover.png") 5;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle
|
|
{
|
|
border-image: url("scroll-vhandle.png") 5;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle:hover
|
|
{
|
|
border-image: url("scroll-vhandle.png") 5;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#panelLeft, #panelCenter, #panelRight {
|
|
spacing: 4px;
|
|
}
|
|
|
|
#panelLeft {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
#panelRight {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.panel-button:pressed {
|
|
background-color: rgba(50,76,111,0.98);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#appMenu {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.app-menu-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.panel-button {
|
|
padding: 4px 12px 3px;
|
|
border-radius: 5px;
|
|
font: 16px sans-serif;
|
|
}
|
|
|
|
.panel-button:active, .panel-button:checked {
|
|
background-color: #314a6c;
|
|
}
|
|
|
|
#panelStatus {
|
|
spacing: 4px;
|
|
}
|
|
|
|
/* Overlay */
|
|
|
|
.workspaces {
|
|
color: white;
|
|
}
|
|
|
|
.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;
|
|
-shell-close-overlap: 16px;
|
|
}
|
|
|
|
/* Dash */
|
|
|
|
#dash {
|
|
color: #5f5f5f;
|
|
background-color: rgba(0,0,0,0.75);
|
|
padding: 0px 14px;
|
|
}
|
|
|
|
#dashSections {
|
|
spacing: 12px;
|
|
}
|
|
|
|
#searchEntry {
|
|
padding: 4px;
|
|
border-bottom: 1px solid #262626;
|
|
}
|
|
|
|
#searchEntry:active {
|
|
background-color: #c4c4c4;
|
|
}
|
|
|
|
.dash-section {
|
|
spacing: 8px;
|
|
}
|
|
|
|
.section-header {
|
|
border: 1px solid #262626;
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: #161616;
|
|
background-gradient-end: #000000;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.section-header-inner {
|
|
border: 1px solid #000000;
|
|
padding: 0px 4px;
|
|
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 {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
spacing: 8px;
|
|
}
|
|
|
|
.more-link {
|
|
}
|
|
|
|
.more-link-expander {
|
|
background-image: url("section-more.svg");
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.dash-pane {
|
|
background-color: rgba(0,0,0,0.95);
|
|
border: 1px solid #262626;
|
|
padding: 4px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.dash-pane-close {
|
|
background-image: url("close.svg");
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.dash-search-section-header {
|
|
padding: 6px 0px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.dash-search-section-results {
|
|
color: #ffffff;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.dash-search-section-list-results {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.dash-search-result-content {
|
|
padding: 2px;
|
|
}
|
|
|
|
.dash-search-result-content:selected {
|
|
padding: 1px;
|
|
border: 1px solid #262626;
|
|
}
|
|
|
|
/* 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 */
|
|
|
|
#dashAppWell {
|
|
spacing: 2px;
|
|
-shell-grid-item-size: 74px;
|
|
}
|
|
|
|
.app-well-app {
|
|
border: 1px solid #080808;
|
|
border-radius: 2px;
|
|
padding: 2px;
|
|
width: 74px;
|
|
height: 74px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.app-well-app:hover {
|
|
border: 1px solid #202020;
|
|
}
|
|
|
|
.app-well-app:active {
|
|
background-color: #1e1e1e;
|
|
border: 1px solid #5f5f5f;
|
|
}
|
|
|
|
.app-well-app-glow {
|
|
-shell-glow-extend-vertical: 3px;
|
|
-shell-glow-shrink-horizontal: 3px;
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 5px;
|
|
background: rgba(0,0,0,0.9);
|
|
color: white;
|
|
padding: 2px 10px;
|
|
spacing: 10px;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.switcher-list .item-box {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.switcher-list .thumbnail-box {
|
|
padding: 2px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.switcher-list .thumbnail {
|
|
width: 256px;
|
|
height: 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);
|
|
}
|
|
|