theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
//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.
|
|
|
|
*/
|
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
/* Global Values */
|
2019-06-18 13:29:00 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// padding, margin and spacing
|
|
|
|
$base_padding: 6px;
|
|
|
|
$base_margin: 4px;
|
|
|
|
$base_spacing: 6px;
|
2019-07-02 18:29:40 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// border radii
|
2021-01-05 12:57:25 +00:00
|
|
|
$base_border_radius: 8px;
|
2019-06-18 13:29:00 +00:00
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
// radii of things that display over other things, e.g. popovers
|
|
|
|
$modal_radius: $base_border_radius*2; // 24px
|
2019-06-18 13:29:00 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// non-standard colors
|
|
|
|
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
|
2021-12-28 13:46:54 +00:00
|
|
|
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
|
2019-12-18 21:25:03 +00:00
|
|
|
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
|
theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
// derived hover colors
|
|
|
|
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
|
|
|
|
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
|
2018-12-13 13:45:22 +00:00
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
// derived active colors
|
2022-02-07 17:37:54 +00:00
|
|
|
$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
|
2019-12-18 21:25:03 +00:00
|
|
|
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
|
2018-12-13 13:45:22 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// fonts
|
|
|
|
$base_font_size: 11;
|
|
|
|
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// icons
|
2020-02-12 18:46:44 +00:00
|
|
|
$base_icon_size: 1.09em;
|
|
|
|
// $base_icon_size: 16px;
|
theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// Stage
|
|
|
|
stage {
|
2019-12-19 15:38:27 +00:00
|
|
|
@include fontsize($base_font_size);
|
|
|
|
color: $fg_color;
|
theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
}
|
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
/* Common Stylings */
|
|
|
|
|
|
|
|
// Text
|
theme: Replace gnome-shell-sass submodule with subtree
As the style has grown bigger and more complex, generating the different
variants from a common source has been a good decision. However given how
intertwined the theme is with gnome-shell itself, relying on a submodule
has proven to be quite painful. And as things stand right now, it is going
to get worse:
- using either pre-generated CSS or generating it at build time is
odd, and violates meson's strict separation between source- and
build directories; we are therefore considering dropping the CSS
and depending on sassc to always generate it at build time
- with the migration to gitlab, our workflow shifts decisively towards
branches; however there is no support in either git or gitlab for
handling two brances of separate repositories consecutively, which
gets particularly awkward for branches in a private namespace
With those pain points in mind, we will adjust our setup as follows:
- remove the submodule from gnome-shell and instead import the
sass as subtree
- after that, the sass sources can be changed like any other files
in the repository, and regular contributors can forget that there
was ever anything special about them
- whenever we want to update the classic style, we can push the subtree
changes and bump gnome-shell-extension's sass submodule
In other words: Updating the classic styling will become slightly more
painful, but not much and only for me; in return, everyone else can
stop fiddling with submodules (and buy me a beer).
2018-02-09 18:22:55 +00:00
|
|
|
%status_text {
|
2019-12-19 15:38:27 +00:00
|
|
|
font-size: 2em;
|
|
|
|
font-weight: bold;
|
|
|
|
color: $osd_fg_color;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// osd panels
|
|
|
|
%osd_panel {
|
2019-12-19 15:38:27 +00:00
|
|
|
color: $osd_fg_color;
|
|
|
|
background-color: $osd_bg_color;
|
2021-12-28 13:46:54 +00:00
|
|
|
border: 1px solid $osd_outer_borders_color;
|
2022-01-25 22:15:52 +00:00
|
|
|
border-radius: 999px;
|
2021-12-28 13:46:54 +00:00
|
|
|
padding: $base_padding*2;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2021-04-19 02:05:58 +00:00
|
|
|
// Overview panels
|
2019-12-18 21:25:03 +00:00
|
|
|
// for the dash and workspace switcher
|
|
|
|
%overview_panel {
|
2019-12-19 15:38:27 +00:00
|
|
|
color: $osd_fg_color;
|
2021-01-05 12:57:25 +00:00
|
|
|
background-color: transparentize($osd_fg_color, 0.9);
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// icon tiles
|
2022-02-02 18:17:42 +00:00
|
|
|
%tile {
|
2021-12-28 13:46:54 +00:00
|
|
|
border-radius: $base_border_radius * 2; // 16px
|
2019-12-19 15:38:27 +00:00
|
|
|
padding: $base_padding;
|
2020-01-25 08:53:17 +00:00
|
|
|
border: 2px solid transparent;
|
2019-12-19 15:38:27 +00:00
|
|
|
transition-duration: 100ms;
|
|
|
|
text-align: center;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2020-01-14 18:09:03 +00:00
|
|
|
// button styling
|
|
|
|
%button {
|
2021-12-28 13:46:54 +00:00
|
|
|
border-radius: $base_border_radius - 2px; // 6px
|
2020-01-14 18:09:03 +00:00
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
min-height: 22px;
|
2022-02-02 18:17:42 +00:00
|
|
|
font-weight: bold;
|
2020-01-14 18:09:03 +00:00
|
|
|
padding: $base_padding * 0.5 $base_padding * 4;
|
|
|
|
|
|
|
|
@include button(normal);
|
|
|
|
&:focus { @include button(focus);}
|
|
|
|
&:hover { @include button(hover);}
|
|
|
|
&:insensitive { @include button(insensitive);}
|
2021-11-08 13:23:53 +00:00
|
|
|
&:active, &:checked { @include button(active);}
|
2020-01-14 18:09:03 +00:00
|
|
|
}
|
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
// dialogs
|
|
|
|
%bubble_panel {
|
|
|
|
color: $fg_color;
|
|
|
|
background-color: $bg_color;
|
|
|
|
border-radius: $base_border_radius*1.25 + 1px;
|
|
|
|
border: 1px solid $borders_edge;
|
|
|
|
}
|
|
|
|
|
|
|
|
// buttons in dialogs/notifications
|
|
|
|
$bubble_button_radius:$base_border_radius*1.25;
|
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
%bubble_button {
|
2019-12-19 15:38:27 +00:00
|
|
|
padding: $base_padding * 2;
|
2022-02-02 18:17:42 +00:00
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
@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);}
|
2021-12-28 13:46:54 +00:00
|
|
|
|
2022-02-04 19:46:49 +00:00
|
|
|
&:first-child:ltr {
|
2021-12-28 13:46:54 +00:00
|
|
|
border-radius: 0 0 0 $bubble_button_radius;
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
2019-12-20 15:45:58 +00:00
|
|
|
|
2022-02-04 19:46:49 +00:00
|
|
|
&:last-child:ltr {
|
2021-12-28 13:46:54 +00:00
|
|
|
border-radius: 0 0 $bubble_button_radius 0;
|
|
|
|
border-right-width: 0 !important;
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
2022-02-04 19:46:49 +00:00
|
|
|
|
|
|
|
&:first-child:rtl {
|
|
|
|
border-radius: 0 0 $bubble_button_radius 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child:rtl {
|
|
|
|
border-radius: 0 0 0 $bubble_button_radius;
|
|
|
|
border-left-width: 0 !important;
|
|
|
|
}
|
2019-12-19 15:38:27 +00:00
|
|
|
|
2022-02-02 18:17:42 +00:00
|
|
|
&:first-child:last-child {
|
|
|
|
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
2020-01-14 18:09:03 +00:00
|
|
|
}
|