luisgulo/WhiteSur-gtk-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update

Browse source
This commit is contained in:
Vince 2021-05-14 23:11:56 +08:00
parent 29d3bd1dfb
commit dcb5847b07
2 changed files with 379 additions and 369 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

406
src/sass/gtk/_common-3.0.scss
View file

@ -1,3 +1,31 @@
//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} */
* { // for all
background-clip: padding-box;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: $error_color;
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkToolItemGroup-expander-size: 11;
-GtkWidget-text-handle-width: 20;
-GtkWidget-text-handle-height: 20;
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
// We use the outline properties to signal the focus properties
outline-color: gtkalpha(currentColor, 0.15);
outline-style: solid;
outline-offset: -4px;
outline-width: 2px;
-gtk-outline-radius: $bt_radius;
-gtk-secondary-caret-color: $selected_bg_color;
}
%side_headerbar_left { %side_headerbar_left {
background-image: none; background-image: none;
@ -62,28 +90,160 @@ $list_shadow: if($variant == 'light',
-gtk-outline-radius : $wm_radius - 6px; -gtk-outline-radius : $wm_radius - 6px;
} }
* { // catch all extend
%selected_items {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%nobg_selected_items {
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%linked_middle {
border-radius: 0;
border-right-style: none;
}
%linked {
border-radius: 0;
border-right-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: $bt_radius;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%linked-flat {
border-radius: 0;
border-right-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: 0;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: 0;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius $bt_radius 0 0;
border-style: solid;
}
}
%linked_vertical_middle {
border-radius: 0;
border-bottom-style: none;
}
%linked_vertical{
border-radius: 0;
border-bottom-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-top-right-radius: $bt_radius;
}
&:last-child {
border-bottom-left-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-bottom-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
%circular_button {
border-radius: $circular_radius;
-gtk-outline-radius: $circular_radius;
padding: 0; padding: 0;
background-clip: padding-box; min-height: $menuitem_size;
-GtkToolButton-icon-spacing: 4; min-width: $menuitem_size;
-GtkTextView-error-underline-color: $error_color;
-GtkScrolledWindow-scrollbar-spacing: 0; &:active, &:checked {
-GtkToolItemGroup-expander-size: 11; @if $variant=='light' {
@include button(flat-active);
border-color: rgba(black, 0.2);
}
}
}
-GtkWidget-text-handle-width: 20; // Buttons on selected backgrounds
-GtkWidget-text-handle-height: 20; %selected-button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
box-shadow: none;
-GtkDialog-button-spacing: 4; &.flat {
-GtkDialog-action-area-border: 0; @include button(undecorated);
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
background-image: none;
}
// We use the outline properties to signal the focus properties &.flat:disabled {
outline-color: gtkalpha(currentColor, 0.15); &, label { color: transparentize($selected_fg_color, 0.6); }
outline-style: solid; }
outline-offset: -4px;
outline-width: 2px; &:hover {
-gtk-outline-radius: $bt_radius; color: $selected_fg_color;
-gtk-secondary-caret-color: $selected_bg_color; background-color: transparentize($selected_fg_color, 0.8);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:active, &:active:hover, &:checked {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.6);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:disabled {
&, label { color: transparentize($selected_fg_color, 0.5); }
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.6);
box-shadow: none;
}
&:disabled:active, &:disabled:checked {
color: $selected_bg_color;
background-color: transparentize($selected_fg_color, 0.5);
border-color: transparentize($selected_fg_color, 0.6);
}
}
%normal_selected_button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
} }
// //
@ -250,6 +410,10 @@ flowbox {
&.search-bar { border-bottom: 1px solid $header_border; } &.search-bar { border-bottom: 1px solid $header_border; }
} }
%dim-label, .dim-label {
opacity: 0.55;
}
label { label {
&.separator { &.separator {
@extend %dim-label; @extend %dim-label;
@ -267,14 +431,10 @@ label {
&:disabled { &:disabled {
color: $disabled_fg_color; color: $disabled_fg_color;
selection { @extend %selected_items, :disabled; } selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
} }
} }
%dim-label, .dim-label {
opacity: 0.55;
}
assistant { assistant {
// min-height: 38px; // min-height: 38px;
.sidebar { .sidebar {
@ -567,6 +727,24 @@ $_dot_color: $selected_bg_color;
} }
} }
%needs_attention {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
@else { background-position: left 3px, left 2px; }
}
}
%flat_button { %flat_button {
@include button(flat-normal); @include button(flat-normal);
&:hover { @include button(flat-hover); } &:hover { @include button(flat-hover); }
@ -776,7 +954,6 @@ button {
} }
&.needs-attention { &.needs-attention {
> label, > image { @extend %needs_attention; } > label, > image { @extend %needs_attention; }
&:active, &:checked { &:active, &:checked {
@ -788,24 +965,6 @@ button {
} }
} }
%needs_attention {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
@else { background-position: left 3px, left 2px; }
}
}
// hide separators // hide separators
&.font, &.font,
&.file { separator { background-color: transparent; }} &.file { separator { background-color: transparent; }}
@ -916,74 +1075,6 @@ toolbar.inline-toolbar toolbutton {
.linked.vertical { @include linking_rules($vert:'true'); } .linked.vertical { @include linking_rules($vert:'true'); }
%linked_middle {
border-radius: 0;
border-right-style: none;
}
%linked {
@extend %linked_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: $bt_radius;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%linked-flat {
@extend %linked_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: 0;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: 0;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius $bt_radius 0 0;
border-style: solid;
}
}
%linked_vertical_middle {
border-radius: 0;
border-bottom-style: none;
}
%linked_vertical{
@extend %linked_vertical_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-top-right-radius: $bt_radius;
}
&:last-child {
border-bottom-left-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-bottom-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
// menu buttons // menu buttons
menuitem.button.flat, menuitem.button.flat,
modelbutton.flat { modelbutton.flat {
@ -993,7 +1084,6 @@ modelbutton.flat {
padding-right: 8px; padding-right: 8px;
outline-offset: -3px; outline-offset: -3px;
border-radius: $bt_radius; border-radius: $bt_radius;
@extend %undecorated_button; @extend %undecorated_button;
&:hover { &:hover {
@ -1130,7 +1220,6 @@ spinbutton {
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
min-width: 0; min-width: 0;
@extend %linked_vertical; @extend %linked_vertical;
} }
@ -1180,10 +1269,6 @@ combobox {
} }
} }
// .background & menu arrow { // Reset menu overflow arrow
// @extend %menu_overflow_arrow;
// }
decoration, decoration,
button.combo:checked, button.combo:checked,
.background & button.combo:checked { transition: none; } // workaround for menuitem selection .background & button.combo:checked { transition: none; } // workaround for menuitem selection
@ -1312,9 +1397,7 @@ combobox {
border-style: solid; border-style: solid;
border-image: linear-gradient(to bottom, $borders_color, $borders_color) 1 0 1 0; //temporary hack for rhythmbox 3.1 border-image: linear-gradient(to bottom, $borders_color, $borders_color) 1 0 1 0; //temporary hack for rhythmbox 3.1
// &:backdrop { background-color: opacify($header_bg_backdrop, 1); } // separator {}
separator { @extend %header_separator; }
} }
.inline-toolbar { .inline-toolbar {
@ -3824,63 +3907,6 @@ infobar {
} }
} }
//
// Buttons on selected backgrounds
//
%selected-button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
box-shadow: none;
&.flat {
@include button(undecorated);
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
background-image: none;
}
&.flat:disabled {
&, label { color: transparentize($selected_fg_color, 0.6); }
}
&:hover {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.8);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:active, &:active:hover, &:checked {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.6);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:disabled {
&, label { color: transparentize($selected_fg_color, 0.5); }
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.6);
box-shadow: none;
}
&:disabled:active, &:disabled:checked {
color: $selected_bg_color;
background-color: transparentize($selected_fg_color, 0.5);
border-color: transparentize($selected_fg_color, 0.6);
}
}
%normal_selected_button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
}
// //
// Tooltips // Tooltips
// //
@ -4034,21 +4060,9 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
// //
// Shortcuts Help // Shortcuts Help
// //
%circular_button,
button.circular { button.circular {
border-radius: 100px; @extend %circular_button;
-gtk-outline-radius: 100px;
padding: 0 0 0 0;
min-height: 28px;
min-width: 28px;
&:active, &:checked {
@if $variant=='light' {
@include button(flat-active);
border-color: rgba(black, 0.2);
}
}
// label { padding: 0; } // label { padding: 0; }
} }
@ -4201,20 +4215,6 @@ headerbar,
} }
} }
// catch all extend
%selected_items {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%nobg_selected_items {
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
/********* /*********
* Emoji * * Emoji *
*********/ *********/

342
src/sass/gtk/_common-4.0.scss
View file

@ -1,3 +1,8 @@
//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} */
%side_headerbar_left { %side_headerbar_left {
background-image: none; background-image: none;
@ -10,14 +15,12 @@
background-image: none; background-image: none;
background-color: rgba($base_color, 1); background-color: rgba($base_color, 1);
box-shadow: inset 0 1px $highlight_color; box-shadow: inset 0 1px $highlight_color;
border: none;
} }
%side_searchbar { %side_searchbar {
background-color: rgba($dark_sidebar_bg, 1);
> revealer > box { > revealer > box {
border-color: if($variant == 'light', $solid_borders_color, $header_border); background-color: rgba($dark_sidebar_bg, 1);
border-color: $dark_sidebar_border;
} }
} }
@ -30,8 +33,8 @@
} }
$list_shadow: if($variant == 'light', $list_shadow: if($variant == 'light',
(inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01)), (inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01), inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)),
(inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02))); (inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02), inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06)));
%circular_list { %circular_list {
border-radius: $wm_radius; border-radius: $wm_radius;
@ -61,6 +64,163 @@ $list_shadow: if($variant == 'light',
%sidebar_row { %sidebar_row {
margin: 2px 4px; margin: 2px 4px;
border-radius: $wm_radius - 4px; border-radius: $wm_radius - 4px;
-gtk-outline-radius : $wm_radius - 6px;
}
// catch all extend
%selected_items {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%nobg_selected_items {
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%linked_middle {
border-radius: 0;
border-right-style: none;
}
%linked {
border-radius: 0;
border-right-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: $bt_radius;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%linked-flat {
border-radius: 0;
border-right-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: 0;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: 0;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius $bt_radius 0 0;
border-style: solid;
}
}
%linked_vertical_middle {
border-radius: 0;
border-bottom-style: none;
}
%linked_vertical{
border-radius: 0;
border-bottom-style: none;
&:first-child {
border-top-left-radius: $bt_radius;
border-top-right-radius: $bt_radius;
}
&:last-child {
border-bottom-left-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-bottom-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
%circular_button {
border-radius: $circular_radius;
-gtk-outline-radius: $circular_radius;
padding: 0;
min-height: $menuitem_size;
min-width: $menuitem_size;
&:active, &:checked {
@if $variant=='light' {
@include button(flat-active);
border-color: rgba(black, 0.2);
}
}
}
// Buttons on selected backgrounds
%selected-button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
box-shadow: none;
&.flat {
@include button(undecorated);
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
background-image: none;
}
&.flat:disabled {
&, label { color: transparentize($selected_fg_color, 0.6); }
}
&:hover {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.8);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:active, &:active:hover, &:checked {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.6);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:disabled {
&, label { color: transparentize($selected_fg_color, 0.5); }
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.6);
box-shadow: none;
}
&:disabled:active, &:disabled:checked {
color: $selected_bg_color;
background-color: transparentize($selected_fg_color, 0.5);
border-color: transparentize($selected_fg_color, 0.6);
}
}
%normal_selected_button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
} }
// //
@ -193,6 +353,11 @@ coverflow cover {
border: 1px solid black; border: 1px solid black;
} }
%dim-label, .dim-label {
opacity: 0.55;
text-shadow: none;
}
label { label {
&.separator { &.separator {
@extend %dim-label; @extend %dim-label;
@ -210,15 +375,10 @@ label {
&:disabled { &:disabled {
color: $disabled_fg_color; color: $disabled_fg_color;
selection { @extend %selected_items, :disabled; } selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
} }
} }
%dim-label, .dim-label {
opacity: 0.55;
text-shadow: none;
}
window.assistant { window.assistant {
// min-height: 38px; // min-height: 38px;
.sidebar { .sidebar {
@ -865,74 +1025,6 @@ button {
.linked.vertical { @include linking_rules($vert:'true'); } .linked.vertical { @include linking_rules($vert:'true'); }
%linked_middle {
border-radius: 0;
border-right-style: none;
}
%linked {
@extend %linked_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: $bt_radius;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%linked-flat {
@extend %linked_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-bottom-left-radius: 0;
}
&:last-child {
border-top-right-radius: $bt_radius;
border-bottom-right-radius: 0;
border-right-style: solid;
}
&:only-child {
border-radius: $bt_radius $bt_radius 0 0;
border-style: solid;
}
}
%linked_vertical_middle {
border-radius: 0;
border-bottom-style: none;
}
%linked_vertical{
@extend %linked_vertical_middle;
&:first-child {
border-top-left-radius: $bt_radius;
border-top-right-radius: $bt_radius;
}
&:last-child {
border-bottom-left-radius: $bt_radius;
border-bottom-right-radius: $bt_radius;
border-bottom-style: solid;
}
&:only-child {
border-radius: $bt_radius;
border-style: solid;
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
// menu buttons // menu buttons
modelbutton.flat { modelbutton.flat {
transition: $shorter_transition; transition: $shorter_transition;
@ -4006,63 +4098,6 @@ searchbar .close {
&:hover { @include button(flat-hover); } &:hover { @include button(flat-hover); }
} }
//
// Buttons on selected backgrounds
//
%selected-button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
box-shadow: none;
&.flat {
@include button(undecorated);
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
background-image: none;
}
&.flat:disabled {
&, label { color: transparentize($selected_fg_color, 0.6); }
}
&:hover {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.8);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:active, &:checked {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.6);
border-color: transparentize($selected_fg_color, 0.5);
box-shadow: none;
}
&:disabled {
&, label { color: transparentize($selected_fg_color, 0.5); }
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.6);
box-shadow: none;
}
&:disabled:active, &:disabled:checked {
color: $selected_bg_color;
background-color: transparentize($selected_fg_color, 0.5);
border-color: transparentize($selected_fg_color, 0.6);
}
}
%normal_selected_button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-image: none;
}
// //
// Tooltips // Tooltips
// //
@ -4226,19 +4261,8 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
// //
// Shortcuts Help // Shortcuts Help
// //
%circular_button,
button.circular { button.circular {
border-radius: 100px; @extend %circular_button;
padding: 0 0 0 0;
min-height: 28px;
min-width: 28px;
&:active, &:checked {
@if $variant=='light' {
@include button(flat-active);
border-color: rgba(black, 0.2);
}
}
// label { padding: 0; } // label { padding: 0; }
} }
@ -4395,23 +4419,9 @@ windowcontrols {
} }
} }
// catch all extend // /*********
%selected_items { // * Emoji *
background-color: $selected_bg_color; // *********/
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
%nobg_selected_items {
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
/*********
* Emoji *
*********/
popover.emoji-picker { popover.emoji-picker {
padding: 0; padding: 0;
border-radius: $wm_radius; border-radius: $wm_radius;