Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion gtk/upstream/gtk-3.0/Yaru/README
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ Summary

* Do not edit the CSS directly, edit the source SCSS files
* To be able to use the latest/adequate version of SASS, install sassc
* The configure script will detect whether or not you have sassc installed;
* Meson will detect whether or not you have sassc installed;
if you do, it will regenerate the CSS every time you modify the SCSS files
and rebuild GTK+.
* When submitting a MR with SCSS changes remember to also include the
corresponding CSS changes (generated locally by Meson as described earlier
or manually generated by running parse-sass.sh script).

How to tweak the theme
----------------------
Expand Down
5 changes: 4 additions & 1 deletion gtk/upstream/gtk-3.0/Yaru/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
// it gets @if ed depending on $variant
@import 'palette';

$light_bg_color: #FAFAFA;
$dark_bg_color: lighten($jet, 8%);

$base_color: if($variant == 'light', #ffffff, lighten($jet, 6%));
$text_color: if($variant == 'light', black, white);
$caret_color: if($variant == 'light', lighten($text_color, 5%), darken($text_color, 3%));
$bg_color: if($variant == 'light', #FAFAFA, lighten($jet, 8%));
$bg_color: if($variant =='light', $light_bg_color, $dark_bg_color);
$fg_color: if($variant == 'light', $inkstone, $porcelain);

$selected_fg_color: $accent_fg_color;
Expand Down
12 changes: 6 additions & 6 deletions gtk/upstream/gtk-3.0/Yaru/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ $asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;
$button_radius: 6px; // Yaru change: sync radius with Gtk4
$menu_radius: 6px; // Yaru change: ↑↑↑
$window_radius: $button_radius + 6; // Yaru change: ↑↑↑
$menu_radius: 8px;
$window_radius: 15px; // Yaru change: ↑↑↑
$popover_radius: $window_radius; // Yaru change: ↑↑↑

// Optional compact sizes for buttons, headerbar and headerbar widgets
Expand Down Expand Up @@ -3064,21 +3064,21 @@ check {
border-radius: 3px;

&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
url("assets/check-symbolic.symbolic.png")); }

&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
url("assets/dash-symbolic.symbolic.png")); }
}

%radio,
radio {
border-radius: 100%;

&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
-gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
url("assets/bullet-symbolic.symbolic.png")); }

&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
url("assets/dash-symbolic.symbolic.png")); }
}

// ANIMATION:
Expand Down
68 changes: 63 additions & 5 deletions gtk/upstream/gtk-3.0/Yaru/apps/_ding.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,71 @@
// Style DING (Desktop Icons NG) menus like GS ones

// These definitions match the gnome shell ones.
$base_border_radius: 8px;
$modal_radius: $base_border_radius * 2;
$menuitem_border_radius: $base_border_radius * 1.5;
$shell_menu_radius: $modal_radius * 1.25;

$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));

menu.desktopmenu {
.csd & {
border: 1px solid $outer_borders_color;
border-radius: $shell_menu_radius;
}

menuitem {
margin: 0 .25rem;
padding: .5rem;
border-radius: $menu_radius - 1px;
margin: 0 6px;
&:first-child {
margin-top: 2px;
}
&:last-child {
margin-bottom: 2px;
}

padding: 10px 0;

&:dir(ltr) {
padding-left: 5px;
padding-right: 10px;
}
&:dir(rtl) {
padding-left: 10px;
padding-right: 5px;
}

border-radius: $menuitem_border_radius;
}

separator {
margin: .25rem 1rem;
margin: 8px 1rem;

&:dir(ltr) {
margin-left: 2.5em;
}
&:dir(rtl) {
margin-right: 2.5em;
}
}

> arrow {
&.top {
border-top-right-radius: $menuitem_border_radius;
border-top-left-radius: $menuitem_border_radius;
}

&.bottom {
border-bottom-right-radius: $menuitem_border_radius;
border-bottom-left-radius: $menuitem_border_radius;
}
}
}

decoration {
.desktopmenu.csd.popup & {
border-radius: $shell_menu_radius;
box-shadow: 0 1px 2px transparentize(black, 0.8),
0 2px 4px 0 $shadow_color;
}
}
Loading