css: Remove outline border radius properties

These are always set to the same value as the corresponding border
radius properties. They are also non-standard, so remove them and
replace them with the border radius properties everywhere.

Fixes #2414
This commit is contained in:
Timm Bäder 2020-02-08 20:39:08 +01:00
parent f6b0e0e1c2
commit 01ba11fc71
16 changed files with 77 additions and 238 deletions

View File

@ -1092,42 +1092,6 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
<entry><ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-top-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-top-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-bottom-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-bottom-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
@ -1143,13 +1107,6 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
<ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-radius</phrase></entry>
<entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
<entry>see individual properties</entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>

View File

@ -348,22 +348,6 @@ gtk_css_animated_style_set_animated_value (GtkCssAnimatedStyle *animated,
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_offset, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_top_left_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_top_right_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_bottom_right_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_bottom_left_radius, value);
break;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
unshare_background (animated);
gtk_css_take_value (&style->background->background_clip, value);

View File

@ -271,10 +271,6 @@ gtk_css_value_array_transition (GtkCssValue *start,
case GTK_CSS_PROPERTY_OUTLINE_STYLE:
case GTK_CSS_PROPERTY_OUTLINE_WIDTH:
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
case GTK_CSS_PROPERTY_BORDER_TOP_COLOR:
case GTK_CSS_PROPERTY_BORDER_RIGHT_COLOR:
case GTK_CSS_PROPERTY_BORDER_BOTTOM_COLOR:

View File

@ -477,10 +477,10 @@ gtk_css_boxes_compute_outline_box (GtkCssBoxes *boxes)
gtk_css_boxes_compute_outline_rect (boxes);
gtk_css_boxes_apply_border_radius (&boxes->box[GTK_CSS_AREA_OUTLINE_BOX],
boxes->style->outline->outline_top_left_radius,
boxes->style->outline->outline_top_right_radius,
boxes->style->outline->outline_bottom_right_radius,
boxes->style->outline->outline_bottom_left_radius);
boxes->style->border->border_top_left_radius,
boxes->style->border->border_top_right_radius,
boxes->style->border->border_bottom_right_radius,
boxes->style->border->border_bottom_left_radius);
boxes->has_box[GTK_CSS_AREA_OUTLINE_BOX] = TRUE;
}

View File

@ -1132,8 +1132,6 @@ _gtk_css_shorthand_property_init_properties (void)
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
"border-image-source", "border-image-slice", "border-image-width", "border-image-repeat", NULL };
const char *outline_subproperties[] = { "outline-width", "outline-style", "outline-color", NULL };
const char *outline_radius_subproperties[] = { "-gtk-outline-top-left-radius", "-gtk-outline-top-right-radius",
"-gtk-outline-bottom-right-radius", "-gtk-outline-bottom-left-radius", NULL };
const char *background_subproperties[] = { "background-image", "background-position", "background-size", "background-repeat", "background-clip", "background-origin",
"background-color", NULL };
const char *transition_subproperties[] = { "transition-property", "transition-duration", "transition-delay", "transition-timing-function", NULL };
@ -1183,9 +1181,6 @@ _gtk_css_shorthand_property_init_properties (void)
gtk_css_shorthand_property_register ("border",
border_subproperties,
parse_border);
gtk_css_shorthand_property_register ("-gtk-outline-radius",
outline_radius_subproperties,
parse_border_radius);
gtk_css_shorthand_property_register ("outline",
outline_subproperties,
parse_border_side);

View File

@ -99,10 +99,6 @@ static const int outline_props[] = {
GTK_CSS_PROPERTY_OUTLINE_STYLE,
GTK_CSS_PROPERTY_OUTLINE_WIDTH,
GTK_CSS_PROPERTY_OUTLINE_OFFSET,
GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_COLOR,
};
@ -529,18 +525,6 @@ gtk_css_static_style_set_value (GtkCssStaticStyle *sstyle,
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
gtk_css_take_value (&style->outline->outline_offset, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
gtk_css_take_value (&style->outline->outline_top_left_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
gtk_css_take_value (&style->outline->outline_top_right_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
gtk_css_take_value (&style->outline->outline_bottom_right_radius, value);
break;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
gtk_css_take_value (&style->outline->outline_bottom_left_radius, value);
break;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
gtk_css_take_value (&style->background->background_clip, value);
break;
@ -795,10 +779,6 @@ gtk_css_outline_create_initial_values (void)
values->outline_style = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_STYLE, NULL, NULL, NULL);
values->outline_width = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_WIDTH, NULL, NULL, NULL);
values->outline_offset = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_OFFSET, NULL, NULL, NULL);
values->outline_top_left_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS, NULL, NULL, NULL);
values->outline_top_right_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS, NULL, NULL, NULL);
values->outline_bottom_right_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS, NULL, NULL, NULL);
values->outline_bottom_left_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS, NULL, NULL, NULL);
values->outline_color = NULL;
return (GtkCssValues *)values;

View File

@ -189,14 +189,6 @@ gtk_css_style_get_value (GtkCssStyle *style,
return style->outline->outline_width;
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
return style->outline->outline_offset;
case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
return style->outline->outline_top_left_radius;
case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
return style->outline->outline_top_right_radius;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
return style->outline->outline_bottom_right_radius;
case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
return style->outline->outline_bottom_left_radius;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
return style->background->background_clip;
case GTK_CSS_PROPERTY_BACKGROUND_ORIGIN:

View File

@ -137,10 +137,6 @@ struct _GtkCssOutlineValues {
GtkCssValue *outline_style;
GtkCssValue *outline_width;
GtkCssValue *outline_offset;
GtkCssValue *outline_top_left_radius;
GtkCssValue *outline_top_right_radius;
GtkCssValue *outline_bottom_right_radius;
GtkCssValue *outline_bottom_left_radius;
GtkCssValue *outline_color;
};

View File

@ -1105,31 +1105,6 @@ _gtk_css_style_property_init_properties (void)
outline_parse,
_gtk_css_number_value_new (0.0, GTK_CSS_PX));
gtk_css_style_property_register ("-gtk-outline-top-left-radius",
GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
GTK_STYLE_PROPERTY_ANIMATED,
GTK_CSS_AFFECTS_OUTLINE,
border_corner_radius_value_parse,
_gtk_css_number_value_new (0, GTK_CSS_PX));
gtk_css_style_property_register ("-gtk-outline-top-right-radius",
GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
GTK_STYLE_PROPERTY_ANIMATED,
GTK_CSS_AFFECTS_OUTLINE,
border_corner_radius_value_parse,
_gtk_css_number_value_new (0, GTK_CSS_PX));
gtk_css_style_property_register ("-gtk-outline-bottom-right-radius",
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
GTK_STYLE_PROPERTY_ANIMATED,
GTK_CSS_AFFECTS_OUTLINE,
border_corner_radius_value_parse,
_gtk_css_number_value_new (0, GTK_CSS_PX));
gtk_css_style_property_register ("-gtk-outline-bottom-left-radius",
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
GTK_STYLE_PROPERTY_ANIMATED,
GTK_CSS_AFFECTS_OUTLINE,
border_corner_radius_value_parse,
_gtk_css_number_value_new (0, GTK_CSS_PX));
gtk_css_style_property_register ("background-clip",
GTK_CSS_PROPERTY_BACKGROUND_CLIP,
0,

View File

@ -43,7 +43,7 @@ typedef struct _GtkCssStaticStyle GtkCssStaticStyle;
#define GTK_CSS_CHANGE_BACKDROP (1ULL << 10)
#define GTK_CSS_CHANGE_SELECTED (1ULL << 11)
#define GTK_CSS_CHANGE_SIBLING_SHIFT 12
#define GTK_CSS_CHANGE_SIBLING_SHIFT 12
#define GTK_CSS_CHANGE_SIBLING_CLASS (1ULL << 12)
#define GTK_CSS_CHANGE_SIBLING_NAME (1ULL << 13)
@ -231,10 +231,6 @@ enum { /*< skip >*/
GTK_CSS_PROPERTY_OUTLINE_STYLE,
GTK_CSS_PROPERTY_OUTLINE_WIDTH,
GTK_CSS_PROPERTY_OUTLINE_OFFSET,
GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
GTK_CSS_PROPERTY_BACKGROUND_CLIP,
GTK_CSS_PROPERTY_BACKGROUND_ORIGIN,
GTK_CSS_PROPERTY_BACKGROUND_SIZE,

View File

@ -159,20 +159,6 @@ gtk_rounded_boxes_init_for_style (GskRoundedRect *border_box,
}
}
void
_gtk_rounded_box_apply_outline_radius_for_style (GskRoundedRect *box,
GtkCssStyle *style)
{
const GtkCssValue *corner[4];
corner[GSK_CORNER_TOP_LEFT] = style->outline->outline_top_left_radius;
corner[GSK_CORNER_TOP_RIGHT] = style->outline->outline_top_right_radius;
corner[GSK_CORNER_BOTTOM_LEFT] = style->outline->outline_bottom_left_radius;
corner[GSK_CORNER_BOTTOM_RIGHT] = style->outline->outline_bottom_right_radius;
_gtk_rounded_box_apply_border_radius (box, corner);
}
typedef struct {
double angle1;
double angle2;

View File

@ -42,9 +42,6 @@ void gtk_rounded_boxes_init_for_style (GskRoundedRect
double width,
double height);
void _gtk_rounded_box_apply_outline_radius_for_style (GskRoundedRect *box,
GtkCssStyle *style);
double _gtk_rounded_box_guess_length (const GskRoundedRect *box,
GtkCssSide side);

View File

@ -27,7 +27,6 @@ flowboxchild:focus(visible) {
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
-gtk-outline-radius: $button-radius - 2;
}
@ -831,7 +830,6 @@ button {
&.circular { // The Bloody Circul Button
border-radius: 9999px;
-gtk-outline-radius: 9999px;
label { padding: 0; }
}
@ -2609,7 +2607,6 @@ scale {
> trough > highlight,
> trough {
border-radius: 5px;
-gtk-outline-radius: 7px;
}
}
@ -2618,7 +2615,6 @@ scale {
@extend %scale_trough;
outline-offset: 2px;
-gtk-outline-radius: 5px;
}
// the colored part of the backing bit
@ -3467,12 +3463,10 @@ messagedialog { // Message Dialog styling
&:first-child{
border-left-style: none;
border-bottom-left-radius: 7px;
-gtk-outline-bottom-left-radius: 5px;
}
&:last-child {
border-bottom-right-radius: 7px;
-gtk-outline-bottom-right-radius: 5px;
}
}
}
@ -3613,7 +3607,6 @@ placessidebar {
margin-bottom: 3px;
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%;
&:not(:hover):not(:active),
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
@ -4099,7 +4092,6 @@ button.titlebutton {
&:not(.menu) {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
padding: 6px;
margin: 0 2px;
min-width: 0;

View File

@ -32,7 +32,6 @@ flowboxchild:focus {
outline-style: dashed;
outline-offset: -4px;
outline-width: 2px;
-gtk-outline-radius: 2px;
}
/***************
@ -2274,7 +2273,6 @@ scale {
highlight,
trough {
border-radius: 5px;
-gtk-outline-radius: 7px;
}
}
@ -2283,7 +2281,6 @@ scale {
@extend %scale_trough;
outline-offset: 2px;
-gtk-outline-radius: 5px;
}
// the colored part of the backing bit
@ -2883,13 +2880,11 @@ messagedialog { // Message Dialog styling
%last_button {
border-bottom-right-radius: 7px;
-gtk-outline-bottom-right-radius: 5px;
}
%first_button {
border-left-style: none;
border-bottom-left-radius: 7px;
-gtk-outline-bottom-left-radius: 5px;
}
}
}
@ -2989,7 +2984,6 @@ placessidebar {
margin-bottom: 3px;
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%;
&:not(:hover):not(:active),
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
@ -3392,7 +3386,6 @@ cursor-handle {
button.circular { // FIXME: aggregate to buttons
border-radius: 20px;
-gtk-outline-radius: 20px;
label { padding: 0; }
row:selected & {

View File

@ -1,62 +1,62 @@
a {
-gtk-outline-bottom-left-radius: initial;
-gtk-outline-bottom-right-radius: initial;
-gtk-outline-top-left-radius: initial;
-gtk-outline-top-right-radius: initial;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
border-top-left-radius: initial;
border-top-right-radius: initial;
}
b {
-gtk-outline-bottom-left-radius: inherit;
-gtk-outline-bottom-right-radius: inherit;
-gtk-outline-top-left-radius: inherit;
-gtk-outline-top-right-radius: inherit;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
c {
-gtk-outline-bottom-left-radius: unset;
-gtk-outline-bottom-right-radius: unset;
-gtk-outline-top-left-radius: unset;
-gtk-outline-top-right-radius: unset;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
border-top-left-radius: unset;
border-top-right-radius: unset;
}
d {
-gtk-outline-bottom-left-radius: 0;
-gtk-outline-bottom-right-radius: 0;
-gtk-outline-top-left-radius: 0;
-gtk-outline-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
e {
-gtk-outline-bottom-left-radius: 5px;
-gtk-outline-bottom-right-radius: 5px;
-gtk-outline-top-left-radius: 5px;
-gtk-outline-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
f {
-gtk-outline-bottom-left-radius: 50%;
-gtk-outline-bottom-right-radius: 50%;
-gtk-outline-top-left-radius: 50%;
-gtk-outline-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
g {
-gtk-outline-bottom-left-radius: 5px 6px;
-gtk-outline-bottom-right-radius: 5px 6px;
-gtk-outline-top-left-radius: 5px 6px;
-gtk-outline-top-right-radius: 5px 6px;
border-bottom-left-radius: 5px 6px;
border-bottom-right-radius: 5px 6px;
border-top-left-radius: 5px 6px;
border-top-right-radius: 5px 6px;
}
h {
-gtk-outline-bottom-left-radius: 5px 20%;
-gtk-outline-bottom-right-radius: 5px 20%;
-gtk-outline-top-left-radius: 5px 20%;
-gtk-outline-top-right-radius: 5px 20%;
border-bottom-left-radius: 5px 20%;
border-bottom-right-radius: 5px 20%;
border-top-left-radius: 5px 20%;
border-top-right-radius: 5px 20%;
}
i {
-gtk-outline-bottom-left-radius: 10% 20%;
-gtk-outline-bottom-right-radius: 10% 20%;
-gtk-outline-top-left-radius: 10% 20%;
-gtk-outline-top-right-radius: 10% 20%;
border-bottom-left-radius: 10% 20%;
border-bottom-right-radius: 10% 20%;
border-top-left-radius: 10% 20%;
border-top-right-radius: 10% 20%;
}

View File

@ -1,62 +1,62 @@
a {
-gtk-outline-bottom-left-radius: initial;
-gtk-outline-bottom-right-radius: initial;
-gtk-outline-top-left-radius: initial;
-gtk-outline-top-right-radius: initial;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
border-top-left-radius: initial;
border-top-right-radius: initial;
}
b {
-gtk-outline-bottom-left-radius: inherit;
-gtk-outline-bottom-right-radius: inherit;
-gtk-outline-top-left-radius: inherit;
-gtk-outline-top-right-radius: inherit;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
c {
-gtk-outline-bottom-left-radius: unset;
-gtk-outline-bottom-right-radius: unset;
-gtk-outline-top-left-radius: unset;
-gtk-outline-top-right-radius: unset;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
border-top-left-radius: unset;
border-top-right-radius: unset;
}
d {
-gtk-outline-bottom-left-radius: 0;
-gtk-outline-bottom-right-radius: 0;
-gtk-outline-top-left-radius: 0;
-gtk-outline-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
e {
-gtk-outline-bottom-left-radius: 5px;
-gtk-outline-bottom-right-radius: 5px;
-gtk-outline-top-left-radius: 5px;
-gtk-outline-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
f {
-gtk-outline-bottom-left-radius: 50%;
-gtk-outline-bottom-right-radius: 50%;
-gtk-outline-top-left-radius: 50%;
-gtk-outline-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
g {
-gtk-outline-bottom-left-radius: 5px 6px;
-gtk-outline-bottom-right-radius: 5px 6px;
-gtk-outline-top-left-radius: 5px 6px;
-gtk-outline-top-right-radius: 5px 6px;
border-bottom-left-radius: 5px 6px;
border-bottom-right-radius: 5px 6px;
border-top-left-radius: 5px 6px;
border-top-right-radius: 5px 6px;
}
h {
-gtk-outline-bottom-left-radius: 5px 20%;
-gtk-outline-bottom-right-radius: 5px 20%;
-gtk-outline-top-left-radius: 5px 20%;
-gtk-outline-top-right-radius: 5px 20%;
border-bottom-left-radius: 5px 20%;
border-bottom-right-radius: 5px 20%;
border-top-left-radius: 5px 20%;
border-top-right-radius: 5px 20%;
}
i {
-gtk-outline-bottom-left-radius: 10% 20%;
-gtk-outline-bottom-right-radius: 10% 20%;
-gtk-outline-top-left-radius: 10% 20%;
-gtk-outline-top-right-radius: 10% 20%;
border-bottom-left-radius: 10% 20%;
border-bottom-right-radius: 10% 20%;
border-top-left-radius: 10% 20%;
border-top-right-radius: 10% 20%;
}