gnome-shell/data/theme/gnome-shell-sass/_common.scss
Sam Hewitt aafa011f2b style: High Contrast improvments
- rework the entry style to work in both hc and normal
- rework drawing functions to accommodate hc
- buttons all get borders under hc now
- window picker titles are more legible
- alt+tab switcher tiles are visible
- dash is made more visible under hc
- popover menus are all more visible under hc
- search results borders are improved
- calendar days have a different look under hc
- overview bg is completely black in hc

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2527>
2022-11-24 09:54:02 +00:00

246 lines
6.0 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 */
// padding, margin and spacing
$base_padding: 6px;
$base_margin: 4px;
// border radii
$base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
// 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);
// fonts
$base_font_size: 11;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
// icons
$base_icon_size: 1.09em;
$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px;
// Stage
stage {
@include fontsize($base_font_size);
color: $fg_color;
}
/* Common Stylings */
// osd panels
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color;
border-radius: 999px;
padding: $base_padding*2;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
}
}
// icon tiles
%tile {
border-radius: $base_border_radius * 2; // 16px
padding: $base_padding;
spacing: $base_padding;
border: 2px solid transparent;
transition-duration: 200ms;
text-align: center;
@if $is_highcontrast {
border-color: $hc_inset_color;
}
}
// normal button styling
%button {
border-radius: $base_border_radius;
border-style: solid;
border-width: 1px;
font-weight: bold;
padding: $base_padding*.5 $base_padding*4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
&:selected,
&:active { @include button(active);}
&:checked { @include button(checked);}
&.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);}
}
}
// normal entry style
%entry {
border-radius: $base_border_radius;
padding: $base_padding*1.5 $base_padding*1.5;
color: $fg_color;
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
@include entry(normal);
&:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
}
// 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;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
}
// tooltip
%tooltip {
background-color: $osd_bg_color;
color: $osd_fg_color;
border:1px solid $osd_outer_borders_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
@if $is_highcontrast {
background-color: $osd_bg_color;
color: $osd_fg_color;
border: 1px solid $hc_inset_color;
}
}
/* General Typography */
%large_title {
font-weight: 300;
@include fontsize(24);
}
%title_1 {
font-weight: 800;
@include fontsize(20);
}
%title_2 {
font-weight: 800;
@include fontsize(15);
}
%title_3 {
font-weight: 700;
@include fontsize(15);
}
%title_4 {
font-weight: 700;
@include fontsize(13);
}
%heading {
font-weight: 700;
@include fontsize(11);
}
%caption_heading {
font-weight: 700;
@include fontsize(9);
}
%caption {
font-weight: 400;
@include fontsize(9);
}
%smaller {
font-weight: 400;
@include fontsize(8);
}
%monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";}