Adwaita: Update scrolledwindow styling

Adapt to the changes in the previous commit.
This commit is contained in:
Matthias Clasen 2015-11-04 07:30:19 -05:00
parent 80af6ff130
commit 2ef86c94ed
4 changed files with 286 additions and 283 deletions

View File

@ -1926,22 +1926,6 @@ scrollbar,
}
}
.scrollbars-junction,
.scrollbars-junction.frame { // the small square between two scrollbars
border-color: transparent;
// the border image is used to add the missing dot between the borders, details, details, details...
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
background-color: $scrollbar_bg_color;
&:dir(rtl) { border-image-slice: 0 1 0 0; }
&:backdrop {
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
background-color: $backdrop_scrollbar_bg_color;
}
}
/**********
* Switch *
**********/
@ -2495,11 +2479,64 @@ frame,
}
}
GtkScrolledWindow {
viewport.frame { // avoid double borders when viewport inside
// scrolled window
scrolledwindow {
viewport.frame { // avoid double borders when viewport inside scrolled window
border-style: none;
}
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
undershoot {
&.top {
@include undershoot(top);
}
&.bottom {
@include undershoot(bottom);
}
&.left {
@include undershoot(left);
}
&.right {
@include undershoot(right);
}
}
junction { // the small square between two scrollbars
border-color: transparent;
// the border image is used to add the missing dot between the borders, details, details, details...
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
background-color: $scrollbar_bg_color;
&:dir(rtl) { border-image-slice: 0 1 0 0; }
&:backdrop {
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
background-color: $backdrop_scrollbar_bg_color;
}
}
}
//vbox and hbox separators
@ -3378,46 +3415,6 @@ popover.touch-selection {
}
}
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
// This draws a box on top of the content, the size changes programmatically.
.overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
.undershoot {
&.top {
@include undershoot(top);
}
&.bottom {
@include undershoot(bottom);
}
&.left {
@include undershoot(left);
}
&.right {
@include undershoot(right);
}
}
button.circular {
border-radius: 20px;
outline-radius: 20px;

View File

@ -607,4 +607,6 @@
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
border: none;
box-shadow: none;
}

View File

@ -2451,19 +2451,6 @@ scrollbar,
.scrollbar.horizontal.fine-tune slider {
margin-top: 5px; }
.scrollbars-junction,
.scrollbars-junction.frame {
border-color: transparent;
border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #282c2c; }
.scrollbars-junction:dir(rtl),
.scrollbars-junction.frame:dir(rtl) {
border-image-slice: 0 1 0 0; }
.scrollbars-junction:backdrop,
.scrollbars-junction.frame:backdrop {
border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
background-color: #323737; }
/**********
* Switch *
**********/
@ -3560,8 +3547,121 @@ frame,
padding: 6px;
border-width: 1px 0 0; }
GtkScrolledWindow viewport.frame {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center top;
border: none;
box-shadow: none; }
scrolledwindow undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center bottom;
border: none;
box-shadow: none; }
scrolledwindow undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: left center;
border: none;
box-shadow: none; }
scrolledwindow undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center;
border: none;
box-shadow: none; }
scrolledwindow junction {
border-color: transparent;
border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #282c2c; }
scrolledwindow junction:dir(rtl) {
border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
background-color: #323737; }
separator {
color: rgba(0, 0, 0, 0.1); }
@ -4654,104 +4754,6 @@ popover.touch-selection {
icon-shadow: none;
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"), url("assets/radio-checked-backdrop-dark@2.png")); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center; }
button.circular, headerbar button.circular.titlebutton,
.titlebar button.circular.titlebutton {
border-radius: 20px;

View File

@ -2457,19 +2457,6 @@ scrollbar,
.scrollbar.horizontal.fine-tune slider {
margin-top: 5px; }
.scrollbars-junction,
.scrollbars-junction.frame {
border-color: transparent;
border-image: linear-gradient(to bottom, #a1a1a1 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #dbdbdb; }
.scrollbars-junction:dir(rtl),
.scrollbars-junction.frame:dir(rtl) {
border-image-slice: 0 1 0 0; }
.scrollbars-junction:backdrop,
.scrollbars-junction.frame:backdrop {
border-image-source: linear-gradient(to bottom, darkgray 1px, transparent 1px);
background-color: #e5e5e5; }
/**********
* Switch *
**********/
@ -3722,8 +3709,121 @@ frame,
padding: 6px;
border-width: 1px 0 0; }
GtkScrolledWindow viewport.frame {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center top;
border: none;
box-shadow: none; }
scrolledwindow undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center bottom;
border: none;
box-shadow: none; }
scrolledwindow undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: left center;
border: none;
box-shadow: none; }
scrolledwindow undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center;
border: none;
box-shadow: none; }
scrolledwindow junction {
border-color: transparent;
border-image: linear-gradient(to bottom, #a1a1a1 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #dbdbdb; }
scrolledwindow junction:dir(rtl) {
border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, darkgray 1px, transparent 1px);
background-color: #e5e5e5; }
separator {
color: rgba(0, 0, 0, 0.1); }
@ -4827,104 +4927,6 @@ popover.touch-selection {
icon-shadow: none;
-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"), url("assets/radio-checked-backdrop-dark@2.png")); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(darkgray), to(rgba(169, 169, 169, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center; }
button.circular, headerbar button.circular.titlebutton,
.titlebar button.circular.titlebutton {
border-radius: 20px;