322 lines
8.8 KiB
SCSS
322 lines
8.8 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, 2015 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.
|
|
*/
|
|
|
|
/* Global Values */
|
|
|
|
// Base values of elemetns of the shell in their smallest "unit".
|
|
// These are used in calculations elsewhere to have elements in proportion
|
|
$base_font_size: 11pt; // font size
|
|
$base_padding: 6px; // internal padding of elements
|
|
$base_margin: 4px; // margin between elements
|
|
$base_border_radius: 8px; // radii on all elements
|
|
|
|
// Radius used to make sure elements that have rounded corners stay as such.
|
|
// This is a workaround for 50% not working.
|
|
$forced_circular_radius: 999px;
|
|
|
|
// radii of things that display over other things, e.g. popovers
|
|
$modal_radius: $base_border_radius * 2;
|
|
|
|
// Chroma key to flag when a background-color is always occluded, not visible.
|
|
// This allows any box-shadow behind it to be rendered more efficiently by
|
|
// omitting the middle rectangle.
|
|
$invisible_occluded_bg_color: rgba(3,2,1,0);
|
|
|
|
// Fixed icon sizes
|
|
$base_icon_size: 16px;
|
|
$medium_icon_size: $base_icon_size * 1.5; // 24px
|
|
$large_icon_size: $base_icon_size * 2; // 32px
|
|
|
|
// Scaled values
|
|
// Used in elements that follow text scaling factors
|
|
$scaled_padding: to_em(6px); // same as $base_padding
|
|
|
|
// Used for symbolic icons that scale
|
|
$scalable_icon_size: to_em(16px);
|
|
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
|
$large_scalable_icon_size: $scalable_icon_size * 2;
|
|
|
|
|
|
// Stage
|
|
stage {
|
|
@include fontsize($base_font_size);
|
|
color: $fg_color;
|
|
}
|
|
|
|
/* Common Stylings */
|
|
|
|
// icon tiles
|
|
%tile {
|
|
border-radius: $base_border_radius * 2;
|
|
padding: $base_padding;
|
|
spacing: $base_padding;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-color:transparent;
|
|
transition-duration: 200ms;
|
|
text-align: center;
|
|
color: inherit;
|
|
|
|
@if $is_highcontrast {
|
|
border-color: $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
// common button styling
|
|
%button_common {
|
|
border-radius: $base_border_radius;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
font-weight: bold;
|
|
padding: $base_padding * .5 $base_padding * 4;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
%button {
|
|
@extend %button_common;
|
|
@include button(normal);
|
|
&:focus { @include button(focus);}
|
|
&:hover { @include button(hover);}
|
|
&:insensitive { @include button(insensitive);}
|
|
&:selected,
|
|
&:active { @include button(active);}
|
|
&:checked { @include button(checked);}
|
|
&.default { @include button(default);}
|
|
|
|
&.flat {
|
|
@include button(normal, $flat:true);
|
|
&:focus { @include button(focus, $flat:true);}
|
|
&:hover { @include button(hover, $flat:true);}
|
|
&:insensitive { @include button(insensitive, $flat:true);}
|
|
&:selected,
|
|
&:active { @include button(active, $flat:true);}
|
|
&:checked { @include button(checked, $flat:true);}
|
|
&.default { @include button(default, $flat:false);}
|
|
}
|
|
}
|
|
|
|
// common style for card elements
|
|
%card {
|
|
border-radius: $base_border_radius * 1.5;
|
|
padding: $scaled_padding * 2;
|
|
margin: $base_margin;
|
|
background-color: $card_bg_color;
|
|
box-shadow: 0 1px 2px 0 $card_shadow_color;
|
|
// bit of a hack here with border since we can't have double box-shadow
|
|
border: 1px solid $card_shadow_border_color;
|
|
}
|
|
|
|
// normal entry style
|
|
%entry_common {
|
|
border-radius: $base_border_radius;
|
|
padding: $base_padding * 1.5 $base_padding * 1.5;
|
|
selection-background-color: $selected_bg_color;
|
|
selected-color: $selected_fg_color;
|
|
}
|
|
|
|
%entry {
|
|
@extend %entry_common;
|
|
@include entry(normal, $c:$fg_color);
|
|
&:hover { @include entry(hover, $c:$fg_color);}
|
|
&:focus { @include entry(focus, $c:$fg_color);}
|
|
&:insensitive { @include entry(insensitive, $c:$fg_color);}
|
|
|
|
StLabel.hint-text {
|
|
color: transparentize($fg_color, 0.3);
|
|
}
|
|
}
|
|
|
|
// buttons in dialogs/notifications
|
|
// lighter in color and have a greater radius
|
|
%bubble_button {
|
|
padding: $base_padding * 2;
|
|
font-weight: bold !important;
|
|
|
|
&:ltr {margin-right: 1px;}
|
|
&:rtl {margin-left: 1px;}
|
|
|
|
@include button(normal, $c:$bubble_buttons_color);
|
|
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
|
|
&:focus { @include button(focus, $c:$bubble_buttons_color);}
|
|
&:hover { @include button(hover, $c:$bubble_buttons_color);}
|
|
&:active { @include button(active, $c:$bubble_buttons_color);}
|
|
&:checked { @include button(checked, $c:$bubble_buttons_color);}
|
|
|
|
&:first-child:ltr {
|
|
border-radius: 0 0 0 $modal_radius;
|
|
}
|
|
|
|
&:last-child:ltr {
|
|
border-radius: 0 0 $modal_radius;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
&:first-child:rtl {
|
|
border-radius: 0 0 $modal_radius;
|
|
}
|
|
|
|
&:last-child:rtl {
|
|
border-radius: 0 0 0 $modal_radius;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
&:first-child:last-child {
|
|
border-radius: 0 0 $modal_radius $modal_radius;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
// tooltip
|
|
%tooltip {
|
|
background-color: transparentize(black, 0.1);
|
|
border: 1px solid transparentize($light_1, 0.9);
|
|
color: $light_1;
|
|
|
|
border-radius: $forced_circular_radius;
|
|
padding: $base_padding $base_padding * 2;
|
|
text-align: center;
|
|
|
|
@if $is_highcontrast {
|
|
background-color: black;
|
|
border-color: $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
/* General Typography */
|
|
%large_title {
|
|
font-weight: 300;
|
|
@include fontsize(24pt);
|
|
}
|
|
|
|
%title_1 {
|
|
font-weight: 800;
|
|
@include fontsize(20pt);
|
|
}
|
|
|
|
%title_2 {
|
|
font-weight: 800;
|
|
@include fontsize(15pt);
|
|
}
|
|
|
|
%title_3 {
|
|
font-weight: 700;
|
|
@include fontsize(15pt);
|
|
}
|
|
|
|
%title_4 {
|
|
font-weight: 700;
|
|
@include fontsize(13pt);
|
|
}
|
|
|
|
%heading {
|
|
font-weight: 700;
|
|
@include fontsize(11pt);
|
|
}
|
|
|
|
%caption_heading {
|
|
font-weight: 700;
|
|
@include fontsize(9pt);
|
|
}
|
|
|
|
%caption {
|
|
font-weight: 400;
|
|
@include fontsize(9pt);
|
|
}
|
|
|
|
%smaller {
|
|
font-weight: 400;
|
|
@include fontsize(8pt);
|
|
}
|
|
|
|
%monospace {font-family: monospace;}
|
|
%numeric { font-feature-settings: "tnum";}
|
|
|
|
|
|
/* OSD Elements */
|
|
%osd_panel {
|
|
color: $osd_fg_color;
|
|
background-color: $osd_bg_color;
|
|
border: 1px solid $osd_outer_borders_color;
|
|
border-radius: $forced_circular_radius;
|
|
padding: $base_padding * 2;
|
|
|
|
@if $is_highcontrast {
|
|
border: 2px solid $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
// entries
|
|
%osd_entry {
|
|
@extend %entry_common;
|
|
@include entry(normal, $c:$osd_fg_color,);
|
|
&:hover { @include entry(hover, $c:$osd_fg_color);}
|
|
&:focus { @include entry(focus, $c:$osd_fg_color);}
|
|
&:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
|
|
|
|
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
|
|
}
|
|
|
|
// buttons on OSD elements
|
|
%osd_button {
|
|
@extend %button_common;
|
|
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
|
|
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
}
|
|
|
|
%osd_button_flat {
|
|
@extend %osd_button;
|
|
@include button(undecorated, $osd:true);
|
|
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
|
}
|
|
|
|
/* System Elements */
|
|
|
|
// entries
|
|
%system_entry {
|
|
@extend %entry_common;
|
|
@include entry(normal, $c:$system_fg_color,);
|
|
&:hover { @include entry(hover, $c:$system_fg_color);}
|
|
&:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
|
|
&:insensitive { @include entry(insensitive, $c:$system_fg_color);}
|
|
|
|
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
|
|
}
|
|
|
|
|
|
// buttons
|
|
%system_button {
|
|
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
|
|
&:insensitive { @include button(insensitive, $tc:$system_fg_color, $c:$system_bg_color);}
|
|
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
|
|
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
|
|
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
|
|
&:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
|
}
|