443e0e6b1f
- the goal is to have the items activate even on the edge sadly this Fitzsiness is only working on the app vault icon at the bottom, not the regular icons so far.
1811 lines
42 KiB
SCSS
1811 lines
42 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} */
|
|
|
|
$panel-corner-radius: 6px;
|
|
|
|
/* 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;
|
|
$_bubble_bg_color: opacify($osd_bg_color,0.25);
|
|
$_bubble_fg_color: $osd_fg_color;
|
|
$_bubble_borders_color: transparentize($osd_fg_color,0.8);
|
|
|
|
stage {
|
|
font-family: $font-family;
|
|
@include fontsize($font-size);
|
|
color: $fg_color;
|
|
}
|
|
|
|
/* WIDGETS */
|
|
|
|
/* Buttons */
|
|
.button {
|
|
border-radius: 3px;
|
|
border-width: 1px;
|
|
padding: 4px 32px;
|
|
@include button(normal);
|
|
&: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: transparent;
|
|
}
|
|
|
|
StButton#vhandle, StButton#hhandle {
|
|
border-radius: 8px;
|
|
background-color: $bg_color;
|
|
//border: 3px solid transparent; //would be nice to margin or at least to transparent
|
|
margin: 3px;
|
|
&: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 */
|
|
|
|
.headline { font-size: 110%; }
|
|
.lightbox { background-color: black; }
|
|
.flashspot { background-color: white; }
|
|
|
|
.modal-dialog {
|
|
border-radius: 5px;
|
|
color: $osd_fg_color;
|
|
background-color: transparentize(darken($osd_bg_color,10%),0.05);
|
|
border: 3px solid transparentize($osd_fg_color,0.5);
|
|
padding: 24px;
|
|
|
|
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
|
|
.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($osd_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);
|
|
}
|
|
|
|
/* End Session Dialog */
|
|
.end-session-dialog {
|
|
spacing: 42px;
|
|
border: 3px solid $_bubble_borders_color;
|
|
}
|
|
|
|
.end-session-dialog-list {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.end-session-dialog-layout {
|
|
padding-left: 17px;
|
|
&:rtl { padding-right: 17px; }
|
|
}
|
|
|
|
.end-session-dialog-description {
|
|
width: 28em;
|
|
padding-bottom: 10px;
|
|
&:rtl {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.end-session-dialog-warning {
|
|
width: 28em;
|
|
color: $warning_color;
|
|
padding-top: 6px;
|
|
&:rtl {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.end-session-dialog-logout-icon {
|
|
//border: 2px solid #8b8b8b;
|
|
border-radius: 5px;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.end-session-dialog-shutdown-icon {
|
|
color: $fg_color;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.end-session-dialog-inhibitor-layout {
|
|
spacing: 16px;
|
|
max-height: 200px;
|
|
padding-right: 65px;
|
|
padding-left: 65px;
|
|
}
|
|
|
|
.end-session-dialog-session-list,
|
|
.end-session-dialog-app-list {
|
|
spacing: 1em;
|
|
}
|
|
|
|
.end-session-dialog-list-header {
|
|
font-weight: bold;
|
|
&:rtl { text-align: right; }
|
|
}
|
|
|
|
.end-session-dialog-app-list-item,
|
|
.end-session-dialog-session-list-item {
|
|
spacing: 1em;
|
|
}
|
|
|
|
.end-session-dialog-app-list-item-name,
|
|
.end-session-dialog-session-list-item-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.end-session-dialog-app-list-item-description {
|
|
color: darken($fg_color,5%);
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* ShellMountOperation Dialogs */
|
|
.shell-mount-operation-icon { icon-size: 48px; }
|
|
|
|
.show-processes-dialog,
|
|
.mount-question-dialog {
|
|
spacing: 24px;
|
|
}
|
|
|
|
.show-processes-dialog-subject,
|
|
.mount-question-dialog-subject {
|
|
padding-top: 10px;
|
|
padding-left: 17px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.mount-question-dialog-subject {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.show-processes-dialog-subject:rtl,
|
|
.mount-question-dialog-subject:rtl {
|
|
padding-left: 0px;
|
|
padding-right: 17px;
|
|
}
|
|
|
|
.show-processes-dialog-description,
|
|
.mount-question-dialog-description {
|
|
padding-left: 17px;
|
|
width: 28em;
|
|
}
|
|
|
|
.show-processes-dialog-description:rtl,
|
|
.mount-question-dialog-description:rtl {
|
|
padding-right: 17px;
|
|
}
|
|
|
|
.show-processes-dialog-app-list {
|
|
max-height: 200px;
|
|
padding-top: 24px;
|
|
padding-left: 49px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.show-processes-dialog-app-list:rtl {
|
|
padding-right: 49px;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.show-processes-dialog-app-list-item {
|
|
color: darken($fg_color,10%);
|
|
&:hover { color: $fg_color; }
|
|
&:ltr { padding-right: 1em; }
|
|
&:rtl { padding-left: 1em; }
|
|
}
|
|
|
|
.show-processes-dialog-app-list-item-icon {
|
|
&:ltr { padding-right: 17px; }
|
|
&:rtl { padding-left: 17px; }
|
|
}
|
|
|
|
.show-processes-dialog-app-list-item-name {
|
|
font-size: 10pt;
|
|
}
|
|
|
|
|
|
/* Password or Authentication Dialog */
|
|
|
|
.prompt-dialog {
|
|
//this is the width of the entire modal popup
|
|
width: 500px;
|
|
border: 3px solid $_bubble_borders_color;
|
|
}
|
|
|
|
.prompt-dialog-main-layout {
|
|
spacing: 24px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.prompt-dialog-message-layout {
|
|
spacing: 16px;
|
|
}
|
|
|
|
.prompt-dialog-headline {
|
|
font-weight: bold;
|
|
color: darken($fg_color,30%);
|
|
}
|
|
|
|
.prompt-dialog-description:rtl {
|
|
text-align: right;
|
|
}
|
|
|
|
.prompt-dialog-password-box {
|
|
spacing: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.prompt-dialog-error-label {
|
|
font-size: 10pt;
|
|
color: $error_color;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.prompt-dialog-info-label {
|
|
font-size: 10pt;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.hidden {
|
|
color: rgba(0,0,0,0);
|
|
}
|
|
|
|
.prompt-dialog-null-label {
|
|
font-size: 10pt;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
|
|
/* Polkit Dialog */
|
|
|
|
.polkit-dialog-user-layout {
|
|
padding-left: 10px;
|
|
spacing: 10px;
|
|
&:rtl {
|
|
padding-left: 0px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.polkit-dialog-user-root-label {
|
|
color: $warning_color;
|
|
}
|
|
|
|
.polkit-dialog-user-icon {
|
|
border-radius: 5px;
|
|
background-size: contain;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
/* Network Agent Dialog */
|
|
|
|
.network-dialog-secret-table {
|
|
spacing-rows: 15px;
|
|
spacing-columns: 1em;
|
|
}
|
|
|
|
.keyring-dialog-control-table {
|
|
spacing-rows: 15px;
|
|
spacing-columns: 1em;
|
|
}
|
|
|
|
/* 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%);
|
|
box-shadow: inset 0 -1px 0px 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; }
|
|
&:checked {
|
|
background-color: darken($bg_color,2%);
|
|
box-shadow: inset 0 1px 0px lighten($borders_color,5%);
|
|
font-weight: bold;
|
|
}
|
|
&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
|
|
&:active { background-color: darken($selected_bg_color,5%); color: $selected_fg_color; }
|
|
&:insensitive { background-color: transparentize($bg_color,.5); }
|
|
}
|
|
|
|
.active {
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
.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 black; //dreaming. bug #689995
|
|
}
|
|
|
|
.popup-separator-menu-item {
|
|
//-margin-horizontal: 24px;
|
|
height: 1px; //not really the whole box
|
|
margin: 6px 64px;
|
|
background-color: transparent;
|
|
border-color: lighten($borders_color,10%);
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
|
|
// Background menu
|
|
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
|
|
|
|
/* 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
|
|
*/
|
|
|
|
|
|
/* OSD */
|
|
.osd-window {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
spacing: 1em;
|
|
|
|
.level {
|
|
height: 0.6em;
|
|
border-radius: 0.3em;
|
|
background-color: transparentize(darken($osd_bg_color,15%),0.5);
|
|
color: $osd_fg_color;
|
|
}
|
|
}
|
|
|
|
/* App Switcher */
|
|
.switcher-popup {
|
|
padding: 8px;
|
|
spacing: 16px;
|
|
}
|
|
|
|
.osd-window,
|
|
.switcher-list {
|
|
@extend %osd-panel;
|
|
}
|
|
|
|
.switcher-list-item-container { spacing: 8px; }
|
|
|
|
.switcher-list .item-box {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.switcher-list .item-box:outlined {
|
|
padding: 6px;
|
|
border: 2px solid darken($borders_color,10%);
|
|
}
|
|
|
|
.switcher-list .item-box:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
.switcher-list .thumbnail-box {
|
|
padding: 2px;
|
|
spacing: 4px;
|
|
}
|
|
|
|
.switcher-list .thumbnail {
|
|
width: 256px;
|
|
}
|
|
|
|
.switcher-list .separator {
|
|
width: 1px;
|
|
background: $borders_color;
|
|
}
|
|
|
|
.switcher-arrow {
|
|
border-color: rgba(0,0,0,0);
|
|
color: $borders_color;
|
|
}
|
|
|
|
.switcher-arrow:highlighted {
|
|
color: $fg_color;
|
|
}
|
|
|
|
.input-source-switcher-symbol {
|
|
font-size: 34pt;
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
|
|
/* Workspace Switcher */
|
|
.workspace-switcher-group { padding: 12px; }
|
|
|
|
.workspace-switcher-container {
|
|
@extend %osd-panel;
|
|
}
|
|
|
|
.workspace-switcher {
|
|
background: transparent;
|
|
border: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
spacing: 8px;
|
|
}
|
|
|
|
.ws-switcher-active-up, .ws-switcher-active-down {
|
|
height: 50px;
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
//background-image: url("ws-switch-arrow-up.png");
|
|
background-size: 32px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ws-switcher-box {
|
|
height: 50px;
|
|
border: 1px solid transparentize($osd_fg_color,0.9);
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
%osd-panel {
|
|
color: $_bubble_fg_color;
|
|
background-color: $_bubble_bg_color;
|
|
border: 1px solid $_bubble_borders_color;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Tiled window previews */
|
|
.tile-preview {
|
|
background-color: transparentize($selected_bg_color,0.5);
|
|
border: 1px solid $selected_bg_color;
|
|
}
|
|
|
|
.tile-preview-left.on-primary {
|
|
border-radius: $panel-corner-radius $panel-corner-radius 0 0 0;
|
|
}
|
|
|
|
.tile-preview-right.on-primary {
|
|
border-radius: 0 $panel-corner-radius 0 0;
|
|
}
|
|
|
|
.tile-preview-left.tile-preview-right.on-primary {
|
|
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
|
|
}
|
|
|
|
/* 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: $panel-corner-radius;
|
|
-panel-corner-background-color: black;
|
|
-panel-corner-border-width: 2px;
|
|
-panel-corner-border-color: transparent;
|
|
|
|
&:active, &:overview, &:focus {
|
|
-panel-corner-border-color: lighten($selected_bg_color,5%);
|
|
}
|
|
|
|
&.lock-screen, &.login-screen, &unlock-screen {
|
|
-panel-corner-radius: 0;
|
|
-panel-corner-background-color: transparent;
|
|
-panel-corner-border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.panel-button {
|
|
-natural-hpadding: 12px;
|
|
-minimum-hpadding: 6px;
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
transition-duration: 100ms;
|
|
|
|
.app-menu-icon {
|
|
-st-icon-style: symbolic;
|
|
}
|
|
|
|
&:hover {
|
|
color: lighten($fg_color, 10%);
|
|
}
|
|
|
|
&:active, &:overview, &:focus, &:checked {
|
|
// Trick due to St limitations. It needs a background to draw
|
|
// a box-shadow
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|
box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
|
|
color: lighten($fg_color,10%);
|
|
|
|
& > .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-color: lighten($selected_bg_color,5%);
|
|
border-bottom-width: 2px;
|
|
}
|
|
}
|
|
|
|
.panel-menu { -boxpointer-gap: 4px; }
|
|
.panel-status-indicators-box,
|
|
.panel-status-menu-box {
|
|
spacing: 2px;
|
|
}
|
|
|
|
.screencast-indicator { color: $warning_color; }
|
|
}
|
|
// calendar popover
|
|
.calendar {
|
|
padding: .4em 1.75em .8em 1.75em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.datemenu-date-label { //topmost date label
|
|
padding: .4em 1.7em;
|
|
text-align: center;
|
|
color: $fg_color;
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
}
|
|
|
|
.calendar-vertical-separator {
|
|
width: .3em;
|
|
-stipple-width: 1px;
|
|
-stipple-color: $_bubble_borders_color;
|
|
}
|
|
|
|
.calendar-month-label {
|
|
color: darken($fg_color,5%);
|
|
font-weight: bold;
|
|
padding: 8px 0;
|
|
&:focus {}
|
|
}
|
|
|
|
.pager-button {
|
|
color: white;
|
|
background-color: transparent;
|
|
width: 32px;
|
|
background-position: center;
|
|
border-radius: 4px;
|
|
&:hover, &:focus { background-color: transparentize($fg_color,0.95); }
|
|
&:active { background-color: transparentize($bg_color,0.95); }
|
|
}
|
|
|
|
.calendar-change-month-back { //arrow back
|
|
background-image: url("calendar-arrow-left.svg");
|
|
&:rtl { background-image: url("calendar-arrow-right.svg"); }
|
|
}
|
|
.calendar-change-month-forward { //arrow foreward
|
|
background-image: url("calendar-arrow-right.svg");
|
|
&:rtl { background-image: url("calendar-arrow-left.svg"); }
|
|
}
|
|
|
|
.calendar-day-base {
|
|
font-size: 80%;
|
|
text-align: center;
|
|
width: 2.4em; height: 2.4em;
|
|
padding: 0.1em;
|
|
margin: 2px;
|
|
border-radius: 1.4em;
|
|
&:hover,&:focus { background-color: lighten($bg_color,5%); }
|
|
&:active {
|
|
color: lighten($selected_fg_color,5%);
|
|
background-color: $selected_bg_color;
|
|
border-color: transparent; //avoid jumparound due to today
|
|
}
|
|
&.calendar-day-heading { //day of week heading
|
|
color: darken($fg_color,40%);
|
|
margin-top: 1em;
|
|
font-size: 70%;
|
|
}
|
|
}
|
|
.calendar-day { //border collapse hack - see calendar.js
|
|
border-width: 0;
|
|
}
|
|
.calendar-day-top { border-top-width: 1px; }
|
|
.calendar-day-left { border-left-width: 1px; }
|
|
.calendar-work-day {
|
|
|
|
}
|
|
.calendar-nonwork-day {
|
|
color: $insensitive_fg_color;
|
|
}
|
|
.calendar-today {
|
|
font-weight: bold;
|
|
//color: lighten($fg_color,10%);
|
|
//background-color: darken($bg_color,5%);
|
|
border: 1px solid transparentize($borders_color,0.5);
|
|
}
|
|
.calendar-day-with-events {
|
|
color: darken($fg_color,5%);
|
|
font-weight: bold;
|
|
}
|
|
.calendar-other-month-day {
|
|
color: transparentize($fg_color,0.85);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.events-table { //right hand side
|
|
width: 15em;
|
|
spacing-columns: 1em;
|
|
padding: 0 1.4em;
|
|
&:ltr { padding-right: 1.9em; }
|
|
&:rtl { padding-left: 1.9em; }
|
|
}
|
|
.events-day-header {
|
|
font-weight: bold;
|
|
color: darken($fg_color,10%);
|
|
padding-left: 0;
|
|
padding-top: 1.2em;
|
|
&:first-child { padding-top: 0; }
|
|
}
|
|
.events-day-dayname {
|
|
color: darken($fg_color,10%);
|
|
text-align: left;
|
|
min-width: 20px;
|
|
&:rtl { text-align: right; }
|
|
.events-day-time {
|
|
text-align: right;
|
|
&:rtl { text-align: left; }
|
|
}
|
|
.events-day-task {
|
|
color: darken($fg_color,10%);
|
|
&:ltr { padding-left: 8px; }
|
|
&:rtl { padding-right: 8px; }
|
|
}
|
|
}
|
|
|
|
|
|
// 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: transparent; }
|
|
}
|
|
|
|
.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: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
border: none;
|
|
padding: 14px;
|
|
}
|
|
&:active { background-color: darken($selected_bg_color,5%); color: $selected_fg_color; }
|
|
|
|
& > StIcon { icon-size: 16px; }
|
|
}
|
|
|
|
//Activities Ripples
|
|
.ripple-box {
|
|
width: 52px;
|
|
height: 52px;
|
|
background-image: url("corner-ripple-ltr.png");
|
|
background-size: contain;
|
|
}
|
|
|
|
.ripple-box:rtl {
|
|
background-image: url("corner-ripple-rtl.png");
|
|
}
|
|
|
|
// 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; }
|
|
}
|
|
|
|
/* NETWORK DIALOGS */
|
|
|
|
.nm-dialog {
|
|
max-height: 500px;
|
|
min-height: 450px;
|
|
min-width: 470px;
|
|
}
|
|
|
|
.nm-dialog-content {
|
|
spacing: 20px;
|
|
}
|
|
|
|
.nm-dialog-header-hbox {
|
|
spacing: 10px;
|
|
}
|
|
|
|
.nm-dialog-airplane-box {
|
|
spacing: 12px;
|
|
}
|
|
|
|
.nm-dialog-airplane-headline {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.nm-dialog-airplane-text {
|
|
color: $fg_color;
|
|
}
|
|
|
|
.nm-dialog-header-icon {
|
|
icon-size: 32px;
|
|
}
|
|
|
|
.nm-dialog-scroll-view {
|
|
border: 2px solid $borders_color;
|
|
}
|
|
|
|
.nm-dialog-header {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nm-dialog-item {
|
|
font-size: 110%;
|
|
border-bottom: 1px solid $borders_color;
|
|
padding: 12px;
|
|
spacing: 20px;
|
|
}
|
|
|
|
.nm-dialog-item:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
.nm-dialog-icons {
|
|
spacing: .5em;
|
|
}
|
|
|
|
.nm-dialog-icon {
|
|
icon-size: 16px;
|
|
}
|
|
|
|
.no-networks-label {
|
|
color: #999999;
|
|
}
|
|
|
|
.no-networks-box {
|
|
spacing: 12px;
|
|
}
|
|
|
|
/* 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;
|
|
// For window decorations with round corners we can't match
|
|
// the exact shape when the window is scaled. So apply a shadow
|
|
// to fix that case
|
|
box-shadow: inset 0px 0px 0px 1px $selected_bg_color;
|
|
}
|
|
.window-caption {
|
|
spacing: 25px;
|
|
color: $osd_fg_color;
|
|
background-color: transparentize($osd_bg_color,0.3);
|
|
border-radius: 8px;
|
|
padding: 4px 12px;
|
|
-shell-caption-spacing: 12px;
|
|
&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
|
|
}
|
|
|
|
.messages-indicator { color: transparentize($osd_fg_color,.2); height: 32px; }
|
|
.messages-indicator-contents { spacing: 12px; padding-bottom: 12px; }
|
|
|
|
//search entry
|
|
.search-entry {
|
|
width: 320px;
|
|
padding: 7px 9px;
|
|
border-radius: 6px;
|
|
&: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($osd_fg_color,5%); }
|
|
.list-search-result-description { color: darken($osd_fg_color,15%); }
|
|
.search-provider-icon { padding: 15px; }
|
|
.search-provider-icon-more {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url("more-results.svg");
|
|
}
|
|
|
|
|
|
/* DASHBOARD */
|
|
|
|
#dash {
|
|
font-size: 9pt;
|
|
color: $_bubble_fg_color;
|
|
background-color: $_bubble_bg_color;
|
|
padding: 4px 0;
|
|
border: 1px solid rgba(128, 128, 128, 0.4);
|
|
border-left: 0px;
|
|
border-radius: 0px 9px 9px 0px;
|
|
|
|
&:rtl {
|
|
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;
|
|
color: $osd_fg_color;
|
|
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; }
|
|
}
|
|
//.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($osd_fg_color,.9);
|
|
transition-duration: 200ms;
|
|
}
|
|
}
|
|
.app-well-app,
|
|
.app-well-app.app-folder,
|
|
.show-apps,
|
|
.grid-search-result {
|
|
& .overview-icon {
|
|
@extend %icon_tile;
|
|
}
|
|
&:active .overview-icon,
|
|
&:checked .overview-icon {
|
|
background-color: transparentize(darken($osd_bg_color,10%),.1);
|
|
box-shadow: inset 0 1px 2px $osd_borders_color;
|
|
}
|
|
&:hover .overview-icon,
|
|
&:focus .overview-icon,
|
|
&:selected .overview-icon {
|
|
background-color: transparentize($osd_fg_color,.9);
|
|
transition-duration: 0ms;
|
|
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;
|
|
}
|
|
|
|
%icon_tile {
|
|
color: $osd_fg_color;
|
|
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
|
|
.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: $_bubble_fg_color;
|
|
background-color: $_bubble_bg_color;
|
|
border: 1px solid $_bubble_borders_color;
|
|
}
|
|
|
|
%status_text {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: $fg_color;
|
|
}
|
|
|
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
|
|
|
#message-tray {
|
|
background: darken($osd_bg_color,10%) url("noise-texture.png");
|
|
background-repeat: repeat;
|
|
height: 72px;
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
|
|
padding: 4px;
|
|
.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;
|
|
color: $_bubble_fg_color;
|
|
background-color: $_bubble_bg_color;
|
|
border: 1px solid $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: 0;
|
|
-st-natural-width: 60px; //FIXME left aligned rather than centered
|
|
padding: 9px;
|
|
transition-duration: 100ms;
|
|
}
|
|
.summary-source-button {
|
|
&:hover .summary-source,
|
|
&:selected .summary-source,
|
|
&:focus .summary-source { background-color: lighten($osd_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;
|
|
color: $selected_fg_color;
|
|
border: 2px solid $osd_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: $_bubble_bg_color;
|
|
-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: transparent !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;
|
|
height: 24px;
|
|
}
|
|
.notification-icon-button {
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
height: 24px; width: 24px;
|
|
&:focus { }
|
|
& > StIcon { icons-size: 16px; width: 16px; height: 16px; padding: 2px; }
|
|
}
|
|
.secondary-icon { icon-size: 1.09em; }
|
|
|
|
//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;
|
|
}
|
|
.hotplug-notification-item {
|
|
padding: 2px 10px;
|
|
&:focus { padding: 1px 71px 1px 11px; }
|
|
}
|
|
|
|
.hotplug-notification-item-icon {
|
|
icon-size: 24px;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.hotplug-resident-box { spacing: 8px; }
|
|
|
|
.hotplug-resident-mount {
|
|
spacing: 8px;
|
|
border-radius: 4px;
|
|
&:hover { background-color: transparentize($bg_color,0.7); }
|
|
}
|
|
|
|
.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 */
|
|
|
|
//magnifier
|
|
|
|
.magnifier-zoom-region {
|
|
border: 2px solid $selected_bg_color;
|
|
&.full-screen { border-width: 0; }
|
|
}
|
|
|
|
//Keyboard
|
|
/* On-screen Keyboard */
|
|
|
|
#keyboard {
|
|
background-color: transparentize($osd_bg_color, 0.3);
|
|
}
|
|
|
|
.keyboard-layout {
|
|
spacing: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.keyboard-row {
|
|
spacing: 15px;
|
|
}
|
|
|
|
.keyboard-key {
|
|
@include button(normal);
|
|
min-height: 2em;
|
|
min-width: 2em;
|
|
font-size: 14pt;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
border: 1px solid $borders-color;
|
|
color: white;
|
|
&:focus { @include button(focus); }
|
|
&:hover,&:checked { @include button(hover); }
|
|
&:active { @include button(active);}
|
|
&:grayed { //FIXME
|
|
background-color: $osd_bg_color;
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
}
|
|
}
|
|
|
|
.keyboard-subkeys { //long press on a key popup
|
|
color: white;
|
|
padding: 5px;
|
|
-arrow-border-radius: 10px;
|
|
-arrow-background-color: transparentize($osd_bg_color, 0.3);
|
|
-arrow-border-width: 2px;
|
|
-arrow-border-color: $_bubble_borders_color;
|
|
-arrow-base: 20px;
|
|
-arrow-rise: 10px;
|
|
-boxpointer-gap: 5px;
|
|
}
|
|
|
|
// IBus Candidate Popup
|
|
|
|
.candidate-popup-content {
|
|
padding: 0.5em;
|
|
spacing: 0.3em;
|
|
}
|
|
|
|
.candidate-index {
|
|
padding: 0 0.5em 0 0;
|
|
color: darken($fg_color,10%);
|
|
}
|
|
|
|
.candidate-box {
|
|
padding: 0.3em 0.5em 0.3em 0.5em;
|
|
border-radius: 4px;
|
|
&:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
|
|
}
|
|
|
|
.candidate-page-button-box {
|
|
height: 2em;
|
|
width: 80px;
|
|
.vertical & { padding-top: 0.5em; }
|
|
.horizontal & { padding-left: 0.5em; }
|
|
}
|
|
|
|
.candidate-page-button-previous { border-radius: 4px 0px 0px 4px; }
|
|
.candidate-page-button-next { border-radius: 0px 4px 4px 0px; }
|
|
.candidate-page-button-icon { icon-size: 1em; }
|
|
|
|
/* Auth Dialogs & Screen Shield */
|
|
|
|
.framed-user-icon {
|
|
background-size: contain;
|
|
border: 2px solid $borders_color;
|
|
border-radius: 3px;
|
|
&:hover {
|
|
border-color: lighten($borders_color,30%);
|
|
}
|
|
}
|
|
|
|
// LOGIN DIALOG
|
|
|
|
.login-dialog-banner-view {
|
|
padding-top: 24px;
|
|
max-width: 23em;
|
|
}
|
|
|
|
.login-dialog {
|
|
//reset
|
|
border: none;
|
|
background-color: transparent;
|
|
|
|
.modal-dialog-button-box { spacing: 3px; }
|
|
.modal-dialog-button {
|
|
padding: 3px 18px;
|
|
&:default {
|
|
@include button(normal,$c:$selected_bg_color);
|
|
&:hover,&:focus { @include button(hover,$c:$selected_bg_color); }
|
|
&:active { @include button(active,$c:$selected_bg_color); }
|
|
&:insensitive { @include button(insensitive); }
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.login-dialog-logo-bin { padding: 24px 0px; }
|
|
.login-dialog-banner { color: darken($osd_fg_color,10%); }
|
|
.login-dialog-button-box { spacing: 5px; }
|
|
.login-dialog-message-warning { color: $warning_color; }
|
|
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
|
|
.login-dialog-user-selection-box {
|
|
padding: 100px 0px;
|
|
.login-dialog-not-listed-label {
|
|
padding-left: 2px;
|
|
.login-dialog-not-listed-button:focus &,
|
|
.login-dialog-not-listed-button:hover & {
|
|
color: $osd_fg_color;
|
|
}
|
|
}
|
|
}
|
|
.login-dialog-not-listed-label {
|
|
font-size: 90%;
|
|
font-weight: bold;
|
|
color: darken($osd_fg_color,30%);
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
|
.login-dialog-user-list {
|
|
spacing: 12px;
|
|
padding: .2em;
|
|
width: 23em;
|
|
&:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; }
|
|
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
|
|
}
|
|
.login-dialog-user-list-item {
|
|
border-radius: 5px;
|
|
padding: .2em;
|
|
color: darken($osd_fg_color,30%);
|
|
&:ltr { padding-right: 1em; }
|
|
&:rtl { padding-left: 1em; }
|
|
&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
|
|
.login-dialog-timed-login-indicator {
|
|
height: 2px;
|
|
//background-color: rgba(0,0,0,0.0);
|
|
background-color: transparent;
|
|
}
|
|
&:focus .login-dialog-timed-login-indicator { background-color: $osd_bg_color; }
|
|
}
|
|
|
|
.login-dialog-username,
|
|
.user-widget-label {
|
|
color: $osd_fg_color;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
padding-left: 15px;
|
|
}
|
|
.user-widget-label {
|
|
&:ltr { padding-left: 18px; }
|
|
&:rtl { padding-right: 18px; }
|
|
}
|
|
|
|
.login-dialog-prompt-layout {
|
|
padding-top: 24px;
|
|
padding-bottom: 12px;
|
|
spacing: 8px;
|
|
width: 23em;
|
|
}
|
|
|
|
.login-dialog-prompt-label {
|
|
color: darken($osd_fg_color, 20%);
|
|
font-size: 110%;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.login-dialog-session-list-button StIcon {
|
|
icon-size: 1.25em;
|
|
}
|
|
|
|
.login-dialog-session-list-button {
|
|
color: darken($osd_fg_color,30%);
|
|
&:hover,&:focus { color: $osd_fg_color; }
|
|
&:active { color: darken($osd_fg_color, 50%); }
|
|
}
|
|
|
|
//SCREEN SHIELD
|
|
|
|
.screen-shield-arrows {
|
|
padding-bottom: 3em;
|
|
}
|
|
|
|
.screen-shield-arrows Gjs_Arrow {
|
|
color: white;
|
|
width: 80px;
|
|
height: 48px;
|
|
-arrow-thickness: 12px;
|
|
-arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.screen-shield-clock {
|
|
color: white;
|
|
text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 1.5em;
|
|
}
|
|
|
|
.screen-shield-clock-time {
|
|
font-size: 72pt;
|
|
text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.screen-shield-clock-date { font-size: 28pt; }
|
|
|
|
.screen-shield-notifications-container {
|
|
spacing: 6px;
|
|
width: 30em;
|
|
background-color: transparent;
|
|
max-height: 500px;
|
|
.summary-notification-stack-scrollview {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.notification,
|
|
.screen-shield-notification-source {
|
|
padding: 12px 6px;
|
|
border: 1px solid $_bubble_borders_color;
|
|
background-color: transparentize($osd_bg_color,0.5);
|
|
color: $_bubble_fg_color;
|
|
border-radius: 4px;
|
|
}
|
|
.notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
|
|
}
|
|
|
|
|
|
.screen-shield-notification-label {
|
|
font-weight: bold;
|
|
padding: 0px 0px 0px 12px;
|
|
}
|
|
|
|
.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
|
|
|
|
#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); }
|
|
|
|
.screen-shield-background { //just the shadow, really
|
|
background: black;
|
|
box-shadow: 0px 2px 4px transparentize(black,0.6);
|
|
}
|
|
|
|
#lockDialogGroup {
|
|
background: #2e3436 url(noise-texture.png);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
#screenShieldNotifications {
|
|
StButton#vhandle, StButton#hhandle {
|
|
background-color: transparentize($bg_color,0.7);
|
|
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
|
&:active { background-color: transparentize($selected_bg_color,0.5); }
|
|
}
|
|
}
|
|
|
|
|
|
// 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-bottom-width: 2px;
|
|
border-color: lighten($selected_bg_color,5%);
|
|
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;
|
|
}
|