3b86d23e09
Currently we don't add some style to ButtonBox like padding etc, we add it programatically taking into account minimum padding and natural padding. The thing is that with natural padding it works as expected even for low resolutions. As a design request, we need to style from css, and since the current ButtonBox class doesn't add any worth functionality, change that and use a simple St.Bin that allow normal styling.
944 lines
23 KiB
SCSS
944 lines
23 KiB
SCSS
//This is the RIGHT PLACE to edit the stylesheet
|
|
|
|
//let's start by telling people not to edit the generated CSS:
|
|
$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
|
/* #{$cakeisalie} */
|
|
|
|
/* 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.
|
|
*/
|
|
|
|
|
|
/* GLOBALS */
|
|
$font-size: 11;
|
|
$font-family: Cantarell, Sans-Serif;
|
|
|
|
stage {
|
|
font-family: $font-family;
|
|
@include fontsize($font-size);
|
|
color: $fg_color;
|
|
}
|
|
|
|
/* WIDGETS */
|
|
|
|
/* Buttons */
|
|
// one would think we may want a generic button class:
|
|
// bug #737785
|
|
.candidate-page-button,
|
|
.notification-button,
|
|
.notification-icon-button,
|
|
.hotplug-notification-item,
|
|
.hotplug-resident-eject-button,
|
|
.modal-dialog-button,
|
|
.app-view-control {
|
|
border-radius: 3px;
|
|
border-width: 1px;
|
|
padding: 4px 32px;
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
&:focus { @include button(focus); }
|
|
&:insensitive { @include button(insensitive); }
|
|
&:active { @include button(active); }
|
|
}
|
|
|
|
/* Entries */
|
|
StEntry {
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
border-width: 1px;
|
|
color: $fg_color;
|
|
@include entry(normal);
|
|
//&:hover { @include entry(hover);}
|
|
&:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
|
|
&:insensitive { @include entry(insensitive);}
|
|
selection-background-color: $selected_bg_color;
|
|
selected-color: $selected_fg_color;
|
|
}
|
|
|
|
|
|
/* Scrollbars */
|
|
|
|
StScrollBar {
|
|
padding: 0;
|
|
&.vfade { -st-vfade-offset: 68px; }
|
|
&.hfade { -st-hfade-offset: 68px; }
|
|
|
|
StScrollView & {
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
}
|
|
|
|
StBin#trough {
|
|
border-radius: 0;
|
|
background-color: darken($osd_bg_color,10%);
|
|
}
|
|
|
|
StButton#vhandle, StButton#hhandle {
|
|
border-radius: 8px;
|
|
background-color: $bg_color;
|
|
border: 3px solid darken($osd_bg_color,10%); //would be nice to margin or at least to transparent
|
|
&:hover { background-color: lighten($bg_color,10%); }
|
|
&:active { background-color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
/* Slider */
|
|
|
|
.slider {
|
|
height: 1em;
|
|
-slider-height: 0.3em;
|
|
-slider-background-color: $insensitive_bg_color; //background of the trough
|
|
-slider-border-color: $borders_color; //trough border color
|
|
-slider-active-background-color: $selected_bg_color; //active trough fill
|
|
-slider-active-border-color: darken($selected_bg_color,10%); //active trough border
|
|
-slider-border-width: 1px;
|
|
-slider-handle-radius: 6px;
|
|
}
|
|
|
|
/* Check Boxes */
|
|
|
|
.check-box {
|
|
StBoxLayout { spacing: .8em; }
|
|
StBin {
|
|
width: 24px;
|
|
height: 22px;
|
|
background-image: url("checkbox-off.svg");
|
|
}
|
|
&:focus Stbin { background-image: url("checkbox-off-focused.svg"); }
|
|
&:checked Stbin { background-image: url("checkbox.svg"); }
|
|
&:focus:checked Stbin { background-image: url("checkbox-focused.svg"); }
|
|
}
|
|
|
|
/* Switches */
|
|
.toggle-switch {
|
|
width: 65px;
|
|
height: 22px;
|
|
background-size: contain;
|
|
}
|
|
|
|
@each $v in us, intl {
|
|
.toggle-switch-#{$v} {
|
|
background-image: url("toggle-off-#{$v}.svg");
|
|
&:checked { background-image: url("toggle-on-#{$v}.svg"); }
|
|
}
|
|
}
|
|
|
|
/* links */
|
|
.shell-link {
|
|
color: $link_color;
|
|
&:hover { color: lighten($link_color,10%); }
|
|
}
|
|
|
|
/* Modal Dialogs */
|
|
|
|
.lightbox { background-color: black; } //FIXME where is this?
|
|
.flashspot { background-color: white; } //FIXME where is this?
|
|
|
|
.modal-dialog {
|
|
border-radius: 5px;
|
|
background-color: transparentize(darken($bg_color,10%),0.05);
|
|
border: 1px solid $borders_color;
|
|
padding: 24px;
|
|
|
|
.run-dialog-entry { width: 20em; }
|
|
.run-dialog-error-box {
|
|
padding-top: 16px;
|
|
spacing: 6px;
|
|
}
|
|
.run-dialog-button-box { padding-top: 1em; }
|
|
.run-dialog-label {
|
|
font-size: fontsize($font-size + 1.1);
|
|
font-weight: bold;
|
|
color: darken($fg_color,10%);
|
|
padding-bottom: .4em;
|
|
}
|
|
|
|
}
|
|
.button-dialog-button-box {
|
|
spacing: 18px;
|
|
padding-top: 48px;
|
|
}
|
|
|
|
.show-processes-dialog-subject,
|
|
.mount-question-dialog-subject,
|
|
.end-session-dialog-subject { //this should be a generic header class
|
|
font-size: fontsize($font-size * 1.3);
|
|
}
|
|
|
|
/* Popvers/Menus */
|
|
|
|
.popup-menu {
|
|
min-width: 200px;
|
|
|
|
.popup-menu-arrow { } //defined globally in the TOP BAR
|
|
.popup-sub-menu {
|
|
background-color: darken($bg_color,2%);
|
|
border-top: 1px solid lighten($borders_color,5%);
|
|
border-bottom: 1px solid lighten($borders_color,5%);
|
|
}
|
|
|
|
.popup-menu-content { padding: 1em 0em; }
|
|
.popup-menu-item {
|
|
spacing: 12px;
|
|
|
|
&:ltr { padding: .4em 1.75em .4em 0em; }
|
|
&:rtl { padding: .4em 0em .4em 1.75em; }
|
|
&:active { background-color: lighten($bg_color,10%); }
|
|
&:insensitive { background-color: transparentize($bg_color,.5); }
|
|
}
|
|
.popup-inactive-menu-item { //all icons and other graphical elements
|
|
color: $fg_color;
|
|
|
|
&:insensitive { color: transparentize($fg_color,0.5); }
|
|
}
|
|
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
|
|
}
|
|
|
|
.popup-menu-ornament {
|
|
text-align: right;
|
|
width: 1em;
|
|
}
|
|
.popup-menu-boxpointer,
|
|
.candidate-popup-boxpointer {
|
|
-arrow-border-radius: 3px;
|
|
-arrow-background-color: $bg_color;
|
|
-arrow-border-width: 1px;
|
|
-arrow-border-color: $borders_color;
|
|
-arrow-base: 24px;
|
|
-arrow-rise: 11px;
|
|
-arrow-box-shadow: 0 1px 3px red; //dreaming. bug #689995
|
|
}
|
|
|
|
|
|
/* fallback menu
|
|
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
|
|
app menu inside the main app window itself rather than the top bar
|
|
*/
|
|
|
|
|
|
|
|
/* TOP BAR */
|
|
|
|
#panel {
|
|
background-color: black;
|
|
font-weight: bold;
|
|
height: 1.86em;
|
|
|
|
&.unlock-screen,
|
|
&.login-screen,
|
|
&.lock-screen {
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
|
|
spacing: 4px;
|
|
}
|
|
|
|
.panel-corner {
|
|
-panel-corner-radius: 6px;
|
|
-panel-corner-background-color: black;
|
|
-panel-corner-border-width: 2px;
|
|
-panel-corner-border-color: transparent;
|
|
|
|
&:active, &:overview, &:focus { -panel-corner-border-color: #729fcf; } //fixed due to SVG image-border
|
|
&.lock-screen, &.login-screen, &unlock-screen {
|
|
-panel-corner-radius: 0;
|
|
-panel-corner-background-color: transparent;
|
|
-panel-corner-border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.panel-button {
|
|
padding: 0px 12px;
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
transition-duration: 100ms;
|
|
|
|
#appMenuIcon {
|
|
app-icon-bottom-clip: 1px;
|
|
|
|
.panel-button:active &,
|
|
.panel-button:overview &,
|
|
.panel-button:focus &,
|
|
.panel-button:checked & {
|
|
app-icon-bottom-clip: 2px;
|
|
}
|
|
|
|
}
|
|
&:hover {
|
|
color: lighten($fg_color, 10%);
|
|
text-shadow: black 0 2px 2px;
|
|
}
|
|
|
|
&:active, &:overview, &:focus, &:checked {
|
|
border-image: url("panel-button-border.svg") 6 10 0 2;
|
|
color: lighten($fg_color,10%);
|
|
text-shadow: black 0px 2px 2px;
|
|
|
|
& > .system-status-icon { icon-shadow: black 0 2px 2px; }
|
|
}
|
|
|
|
.system-status-icon { icon-size: 1.09em; padding: 0 5px; }
|
|
.unlock-screen &,
|
|
.login-screen &,
|
|
.lock-screen & {
|
|
color: lighten($fg_color, 10%);
|
|
&:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
|
|
}
|
|
}
|
|
|
|
.panel-status-button {
|
|
|
|
&:active, &:overview, &:focus, &:checked {
|
|
border-image: url("panel-button-border.svg") 6 10 0 2;
|
|
}
|
|
}
|
|
|
|
.panel-menu { -boxpointer-gap: 4px; } //FIXME
|
|
.panel-status-indicators-box, //FIXME
|
|
.panel-status-menu-box {
|
|
spacing: 2px;
|
|
}
|
|
|
|
.screencast-indicator { color: $warning_color; }
|
|
}
|
|
|
|
// a little unstructured mess:
|
|
|
|
.system-switch-user-submenu-icon {
|
|
icon-size: 24px;
|
|
border: 1px solid transparentize($fg_color,0.6);
|
|
}
|
|
|
|
#appMenu {
|
|
spinner-image: url("process-working.svg");
|
|
spacing: 4px;
|
|
|
|
.label-shadow { color: transparentize(#000,0.5); }
|
|
}
|
|
|
|
.aggregate-menu {
|
|
width: 360px;
|
|
.popup-menu-icon { padding: 0 4px; }
|
|
}
|
|
|
|
.system-menu-action {
|
|
color: $fg_color;
|
|
border-radius: 32px; /* wish we could do 50% */
|
|
padding: 13px;
|
|
border: 1px solid lighten($borders_color,5%);
|
|
|
|
&:hover, &:focus {
|
|
color: lighten($fg_color, 10%);
|
|
background-color: lighten($bg_color,10%);
|
|
border: none;
|
|
padding: 14px;
|
|
}
|
|
&:active { background-color: lighten($borders_color,5%); }
|
|
|
|
& > StIcon { icon-size: 16px; }
|
|
}
|
|
|
|
// not really top bar only
|
|
.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; }
|
|
}
|
|
|
|
.window-clone-border {
|
|
border: 4px solid $selected_bg_color;
|
|
border-radius: 4px;
|
|
}
|
|
.window-caption {
|
|
spacing: 25px;
|
|
background-color: transparentize($bg_color,0.3);
|
|
border-radius: 8px;
|
|
padding: 4px 12px;
|
|
-shell-caption-spacing: 12px;
|
|
&:hover { background-color: $selected_bg_color; }
|
|
}
|
|
|
|
.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-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
|
|
.search-section-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 {
|
|
@extend %overview-panel;
|
|
padding: 4px;
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
.dash-item-container > StWidget {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.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(darken($osd_bg_color,10%),.1); }
|
|
&:focus, &:selected, &:hover {
|
|
background-color: transparentize($fg_color,.9);
|
|
transition-duration: 200ms;
|
|
}
|
|
}
|
|
.app-well-app,
|
|
.show-apps,
|
|
.grid-search-result {
|
|
& > .overview-icon {
|
|
@extend %icon_tile;
|
|
}
|
|
&.running > .overview-icon {
|
|
text-shadow: black 0px 2px 2px;
|
|
}
|
|
&:active > .overview-icon,
|
|
&:checked > .overview-icon {
|
|
background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working?
|
|
box-shadow: inset 0 1px 2px $osd_borders_color;
|
|
}
|
|
&:hover > .overview-icon,
|
|
&.running:hover > .overview-icon,
|
|
&:focus > .overview-icon,
|
|
&:selected > .overview-icon {
|
|
background-color: transparentize($fg_color,.9);
|
|
transition-duration: 200ms;
|
|
border-image: none;
|
|
background-image: none;
|
|
}
|
|
|
|
}
|
|
|
|
.app-well-app-running-dot { //running apps indicator
|
|
width: 10px; height: 3px;
|
|
background-color: $selected_bg_color;
|
|
margin-bottom: 2px; //FIXME will happen :)
|
|
}
|
|
|
|
%icon_tile {
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
border: 1px solid transparent;
|
|
transition-duration: 100ms;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
// Workspace pager
|
|
.workspace-thumbnails { //container ala dash
|
|
@extend %overview-panel;
|
|
visible-width: 32px; //amount visible before hover
|
|
spacing: 11px;
|
|
padding: 8px;
|
|
border-radius: 9px 0 0 9px;
|
|
//border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :(
|
|
&:rtl { border-radius: 0 9px 9px 0;}
|
|
}
|
|
.workspace-thumbnail-indicator {
|
|
border: 4px solid $selected_bg_color;
|
|
padding: 1px;
|
|
}
|
|
|
|
//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;
|
|
}
|
|
|
|
%overview-panel {
|
|
color: $osd_fg_color;
|
|
background-color: $osd_bg_color;
|
|
border: 1px solid transparentize($fg_color,0.8);
|
|
}
|
|
|
|
%status_text {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: $fg_color;
|
|
}
|
|
|
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
|
|
|
#message-tray {
|
|
background: darken($bg_color,10%) url("noise-texture.png");
|
|
background-repeat: repeat;
|
|
height: 72px;
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
|
|
.message-tray-summary { height: 72px; }
|
|
|
|
.message-tray-menu-button {
|
|
StIcon {
|
|
padding: 0 20px;
|
|
color: $fg_color;
|
|
icon-size: 24px;
|
|
opacity: 1;
|
|
}
|
|
&:hover StIcon { color: lighten($fg_color, 15%); }
|
|
&:active StIcon { color: lighten($selected_bg_color, 10%); }
|
|
}
|
|
.no-messages-label { color: darken($fg_color,10%); }
|
|
}
|
|
.url-highlighter { link-color: $selected_bg_color; }
|
|
|
|
// Banners
|
|
.notification {
|
|
font-size: 11pt;
|
|
width: 34em;
|
|
border-radius: 6px 6px 0 0;
|
|
background-color: transparentize(darken($osd_bg_color,8%),.05);
|
|
border: 1px solid $osd_borders_color;
|
|
border-bottom-width: 0;
|
|
//box-shadow: 0 1px 4px black;
|
|
spacing-rows: 4px;
|
|
padding: 8px 8px 4px 8px;
|
|
spacing-columns: 10px;
|
|
&.multi-line-notification { padding-bottom: 8px; }
|
|
}
|
|
.notification-unexpanded {
|
|
// We want to force the actor at a specific size, irrespective
|
|
// of its minimum and preferred size, so we override both
|
|
min-height: 36px;
|
|
height: 36px;
|
|
}
|
|
// We use row-span = 2 for the image cell, which prevents its height preferences to be
|
|
// taken into account during allocation, so its height ends up being limited by the height
|
|
// of the content in the other rows. To avoid showing a stretched image, we set the minimum
|
|
// height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159
|
|
.notification-with-image {
|
|
min-height: 159px;
|
|
}
|
|
.notification-body { spacing: 5px; }
|
|
.notification-actions {
|
|
paddinf-top: 18px;
|
|
spacing: 6px;
|
|
}
|
|
//Message tray items
|
|
.summary-source {
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
transition-duration: 100ms;
|
|
}
|
|
.summary-source-button {
|
|
&:hover .summary-source,
|
|
&:selected .summary-source,
|
|
&:focus .summary-source { background-color: lighten($bg_color,2%); }
|
|
}
|
|
.summary-source-counter {
|
|
font-size: 10pt;
|
|
font-weight: bold;
|
|
height: 1.6em; width: 1.6em;
|
|
-shell-counter-overlap-x: 3px;
|
|
-shell-counter-overlap-y: 3px;
|
|
background-color: $selected_bg_color;
|
|
border: 2px solid $fg_color;
|
|
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
|
|
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
|
|
}
|
|
|
|
//Message tray popovers
|
|
.summary-boxpointer {
|
|
-arrow-border-radius: 15px;
|
|
-arrow-background-color: transparentize(darken($osd_bg_color,8%),.05);
|
|
-arrow-base: 36px;
|
|
-arrow-rise: 18px;
|
|
color: $fg_color;
|
|
-boxpointer-gap: 4px;
|
|
.notification {
|
|
border-radius: 9px;
|
|
border-width: 0; //temporary workaround for border brokenness
|
|
background-color: transparentize(darken($osd_bg_color,8%),.05) !important;
|
|
padding-bottom: 12px;
|
|
}
|
|
#summary-right-click-menu {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
.summary-notification-stack-scrollview {
|
|
max-height: 24em;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
&:ltr { padding-right: 8px; }
|
|
&:rtl { padding-left: 8px; }
|
|
}
|
|
.notification-scrollview {
|
|
max-height: 18em;
|
|
-st-vfade-offset: 24px;
|
|
&:ltr > StScrollBar { padding-left: 6px; }
|
|
&:rtl > StScrollBar { padding-right: 6px; }
|
|
}
|
|
.notification-button { -st-natural-width: 140px; }
|
|
.notification-icon-button {
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
&:focus { }//FIXME
|
|
& > StIcon { icons-size: 16px; padding: 8px; }
|
|
}
|
|
.secondary-icon { icon-size: 1.09em; } //FIXME
|
|
|
|
//chat bubbles
|
|
.chat-log-message { color: darken($fg_color,10%); }
|
|
.chat-empty-line { font-size: 4px; }
|
|
.chat-received {
|
|
padding-left: 4px;
|
|
&:rtl { padding-left: 0px; padding-right: 4px; }
|
|
}
|
|
.chat-sent {
|
|
padding-left: 18pt;
|
|
color: darken($fg_color, 15%);
|
|
&:rtl { padding-left: 0; padding-right: 18pt; }
|
|
}
|
|
.chat-meta-message {
|
|
padding-left: 4px;
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
color: darken($fg_color,20%);
|
|
&:rtl { padding-left: 0; padding-right: 4px; }
|
|
}
|
|
.chat-notification-scrollview { max-height: 22em; }
|
|
.subscription-message { font-style: italic; }
|
|
|
|
//hotplug
|
|
.hotplug-transient-box {
|
|
spacing: 6px;
|
|
padding: 2px 72px 2px 12px;//FIXME wat?
|
|
}
|
|
.hotplug-notification-item {
|
|
padding: 2px 10px;
|
|
&:focus { padding: 1px 71px 1px 11px; } //FIXME wat?
|
|
}
|
|
|
|
.hotplug-notification-item-icon {
|
|
icon-size: 24px;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.hotplug-resident-box { spacing: 8px; }
|
|
|
|
.hotplug-resident-mount {
|
|
spacing: 8px;
|
|
border-radius: 4px;
|
|
color: green;
|
|
&:hover {
|
|
color: red;
|
|
background-color: blue;
|
|
}
|
|
}
|
|
|
|
.hotplug-resident-mount-label {
|
|
color: inherit;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.hotplug-resident-mount-icon {
|
|
icon-size: 24px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.hotplug-resident-eject-icon {
|
|
icon-size: 16px;
|
|
}
|
|
|
|
.hotplug-resident-eject-button {
|
|
padding: 7px;
|
|
border-radius: 5px;
|
|
color: pink;
|
|
}
|
|
|
|
/* Eeeky things */
|
|
//Mess that is Looking Glass
|
|
|
|
#LookingGlassDialog {
|
|
background-color: rgba(0,0,0,0.80);
|
|
spacing: 4px;
|
|
padding: 4px;
|
|
border: 2px solid grey;
|
|
border-radius: 4px;
|
|
& > #Toolbar {
|
|
border: 1px solid grey;
|
|
border-radius: 4px;
|
|
}
|
|
.labels { spacing: 4px; }
|
|
.notebook-tab {
|
|
-natural-hpadding: 12px;
|
|
-minimum-hpadding: 6px;
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
transition-duration: 100ms;
|
|
padding-left: .3em;
|
|
padding-right: .3em;
|
|
&:hover {
|
|
color: white;
|
|
text-shadow: black 0px 2px 2px;
|
|
}
|
|
&:selected {
|
|
border-image: url("panel-button-border.svg") 10 10 0 2;
|
|
color: white;
|
|
text-shadow: black 0px 2px 2px;
|
|
}
|
|
}
|
|
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
|
|
StBoxLayout#ResultsArea { spacing: 4px; }
|
|
}
|
|
|
|
.lg-dialog {
|
|
StEntry {
|
|
selection-background-color: #bbbbbb;
|
|
selected-color: #333333;
|
|
}
|
|
.shell-link {
|
|
color: #999999;
|
|
&:hover { color: #dddddd; }
|
|
}
|
|
}
|
|
|
|
.lg-completions-text {
|
|
font-size: .9em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.lg-obj-inspector-title {
|
|
spacing: 4px;
|
|
}
|
|
|
|
.lg-obj-inspector-button {
|
|
border: 1px solid gray;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
&:hover { border: 1px solid #ffffff; }
|
|
}
|
|
|
|
#lookingGlassExtensions { padding: 4px; }
|
|
|
|
.lg-extensions-list {
|
|
padding: 4px;
|
|
spacing: 6px;
|
|
}
|
|
|
|
.lg-extension {
|
|
border: 1px solid #6f6f6f;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.lg-extension-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lg-extension-meta {
|
|
spacing: 6px;
|
|
}
|
|
|
|
#LookingGlassPropertyInspector {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border: 2px solid grey;
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
}
|