[libadwaita/wip/exalm/radii: 5/5] stylesheet: Update border radii
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/radii: 5/5] stylesheet: Update border radii
- Date: Thu, 14 Oct 2021 23:42:41 +0000 (UTC)
commit 1e3e63aeb460a7ec30a43fd37ba37fcaac19cde1
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Thu Oct 14 14:19:13 2021 +0500
stylesheet: Update border radii
Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/265
Co-authored-by: Tobias Bernard <tbernard gnome org>
src/stylesheet/_common.scss | 11 ++++---
src/stylesheet/widgets/_calendar.scss | 2 +-
src/stylesheet/widgets/_checks.scss | 4 +--
src/stylesheet/widgets/_color-chooser.scss | 44 +++++++++++++--------------
src/stylesheet/widgets/_emoji-chooser.scss | 1 -
src/stylesheet/widgets/_level-bar.scss | 8 ++---
src/stylesheet/widgets/_lists.scss | 2 +-
src/stylesheet/widgets/_misc.scss | 4 +--
src/stylesheet/widgets/_progress-bar.scss | 5 +--
src/stylesheet/widgets/_shortcuts-window.scss | 2 +-
src/stylesheet/widgets/_toolbars.scss | 2 +-
src/stylesheet/widgets/_tooltip.scss | 7 +----
src/stylesheet/widgets/_views.scss | 3 +-
13 files changed, 45 insertions(+), 50 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index a0add299..48120d1e 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -2,12 +2,13 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;
$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
-$button_radius: 5px;
-$menu_radius: 5px;
-$menu_margin: 5px; //margin around menuitems & sidebar items
+$button_radius: 6px;
+$card_radius: $button_radius + 6;
+$menu_radius: 6px;
+$menu_margin: 6px; //margin around menuitems & sidebar items
$menu_padding: 12px; //inner menuitem padding
-$window_radius: $button_radius + 3;
-$popover_radius: $button_radius + 4;
+$window_radius: $button_radius + 6;
+$popover_radius: $window_radius;
.background {
color: $fg_color;
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 005b936b..54bb99a6 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -28,7 +28,7 @@ calendar {
padding: 4px;
&:selected {
- border-radius: 3px;
+ border-radius: $button_radius;
background-color: $accent_bg_color;
color: $accent_fg_color;
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 2139c345..72f9edd6 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -51,7 +51,7 @@ radio {
}
check {
- border-radius: 3px;
+ border-radius: 4px;
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
-gtk-recolor(url("assets/check 2-symbolic symbolic png"))); }
@@ -76,7 +76,7 @@ radio {
margin: 4px;
min-width: 32px;
min-height: 32px;
- border-radius: 5px;
+ border-radius: $button_radius;
&:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); }
}
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 3743e5ff..bbd7ae8c 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -7,52 +7,50 @@ colorswatch {
@include focus-ring($width: 4px, $offset: -2px);
- $_colorswatch_radius: 5px;
-
// base color corners rounding
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
// sports a bigger radius.
// nth-child is needed by the custom color strip.
&.top {
- border-top-left-radius: $_colorswatch_radius + 0.5px;
- border-top-right-radius: $_colorswatch_radius + 0.5px;
+ border-top-left-radius: $button_radius + 0.5px;
+ border-top-right-radius: $button_radius + 0.5px;
> overlay {
- border-top-left-radius: $_colorswatch_radius;
- border-top-right-radius: $_colorswatch_radius;
+ border-top-left-radius: $button_radius;
+ border-top-right-radius: $button_radius;
}
}
&.bottom {
- border-bottom-left-radius: $_colorswatch_radius + 0.5px;
- border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-left-radius: $button_radius + 0.5px;
+ border-bottom-right-radius: $button_radius + 0.5px;
> overlay {
- border-bottom-left-radius: $_colorswatch_radius;
- border-bottom-right-radius: $_colorswatch_radius;
+ border-bottom-left-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
}
}
&.left,
&:first-child:not(.top) {
- border-top-left-radius: $_colorswatch_radius + 0.5px;
- border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+ border-top-left-radius: $button_radius + 0.5px;
+ border-bottom-left-radius: $button_radius + 0.5px;
> overlay {
- border-top-left-radius: $_colorswatch_radius;
- border-bottom-left-radius: $_colorswatch_radius;
+ border-top-left-radius: $button_radius;
+ border-bottom-left-radius: $button_radius;
}
}
&.right,
&:last-child:not(.bottom) {
- border-top-right-radius: $_colorswatch_radius + 0.5px;
- border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+ border-top-right-radius: $button_radius + 0.5px;
+ border-bottom-right-radius: $button_radius + 0.5px;
> overlay {
- border-top-right-radius: $_colorswatch_radius;
- border-bottom-right-radius: $_colorswatch_radius;
+ border-top-right-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
}
}
@@ -88,10 +86,10 @@ colorswatch {
> overlay {
@extend %button_basic;
- border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
+ border-radius: $button_radius 0 0 $button_radius;
}
- &:only-child > overlay { border-radius: $_colorswatch_radius; }
+ &:only-child > overlay { border-radius: $button_radius; }
}
&:disabled {
@@ -99,9 +97,9 @@ colorswatch {
}
&#editor-color-sample {
- border-radius: 4px;
+ border-radius: $button_radius;
- > overlay { border-radius: 4.5px; }
+ > overlay { border-radius: $button_radius + 0.5px; }
}
}
@@ -112,4 +110,4 @@ plane {
}
// colorscale popup
-colorchooser .popover.osd { border-radius: 5px; }
+colorchooser .popover.osd { border-radius: $popover_radius; }
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index efb8f297..99a35ae2 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -25,7 +25,6 @@ button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destr
popover.emoji-picker emoji {
font-size: x-large;
padding: 6px;
- border-radius: 6px;
&:focus,
&:hover {
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index 4fe5de08..33ea008e 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -33,11 +33,11 @@ levelbar {
border-radius: 0;
&:first-child {
- border-radius: 2px 0 0 2px;
+ border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
}
&:last-child {
- border-radius: 0 2px 2px 0;
+ border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
}
}
}
@@ -61,11 +61,11 @@ levelbar {
border-radius: 0;
&:first-child {
- border-radius: 2px 2px 0 0;
+ border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0;
}
&:last-child {
- border-radius: 0 0 2px 2px;
+ border-radius: 0 0 $_levelbar_border_radius $_levelbar_border_radius;
}
}
}
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 70617014..db112708 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -238,7 +238,7 @@ listview.content {
background-color: $card_bg_color;
color: $card_fg_color;
border: 1px solid $card_border_color;
- border-radius: 8px;
+ border-radius: $card_radius;
> row {
// Regular rows and expander header rows background
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index b373fd43..0644837e 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -7,7 +7,7 @@ frame,
}
frame {
- border-radius: $window_radius;
+ border-radius: $card_radius;
> label {
margin: 4px;
@@ -40,7 +40,7 @@ separator {
padding: 10px;
border-spacing: 10px;
- border-radius: 0 0 5px 5px;
+ border-radius: 0 0 $card_radius $card_radius;
background-color: $osd_bg_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px);
diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss
index 8cbd0c81..5076bf98 100644
--- a/src/stylesheet/widgets/_progress-bar.scss
+++ b/src/stylesheet/widgets/_progress-bar.scss
@@ -30,9 +30,10 @@ progressbar {
> progress {
@extend %scale_highlight; /* share most of scales' */
- border-radius: 1.5px;
-
$_progress-radius: 5px;
+
+ border-radius: $_progress-radius;
+
&.left {
border-top-left-radius: $_progress-radius;
border-bottom-left-radius: $_progress-radius;
diff --git a/src/stylesheet/widgets/_shortcuts-window.scss b/src/stylesheet/widgets/_shortcuts-window.scss
index 5bfe8569..e073f42f 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -24,7 +24,7 @@ shortcut {
background-clip: padding-box;
border: 1px solid;
border-color: $card_border_color;
- border-radius: 5px;
+ border-radius: $button_radius;
box-shadow: inset 0 -3px gtkalpha($card_border_color, .5);
font-size: smaller;
}
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 39ae44b6..b6da74f3 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -114,7 +114,7 @@
&.osd {
padding: 8px 14px;
border: none;
- border-radius: 5px;
+ border-radius: $card_radius;
background-color: $osd_bg_color;
&.left,
diff --git a/src/stylesheet/widgets/_tooltip.scss b/src/stylesheet/widgets/_tooltip.scss
index b5c339ce..7091ab6f 100644
--- a/src/stylesheet/widgets/_tooltip.scss
+++ b/src/stylesheet/widgets/_tooltip.scss
@@ -10,13 +10,8 @@ tooltip {
color: white;
}
- &.csd {
- border-radius: 5px;
- box-shadow: none;
- }
-
padding: 6px 10px;
- border-radius: $window_radius;
+ border-radius: 9px;
box-shadow: none; // otherwise it gets inherited by windowframe.csd
> box {
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index d9d8d103..0f241248 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -12,7 +12,7 @@
&:focus, & {
background-color: $view_selected_color;
- border-radius: 3px;
+ border-radius: $button_radius;
}
}
}
@@ -58,6 +58,7 @@ flowbox > flowboxchild,
gridview > child {
padding: 3px;
transition: $focus_transition;
+ border-radius: $button_radius;
@include focus-ring();
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]