roundabout,
created on Sunday, 10 July 2016, 05:31:09 (1468128669),
received on Sunday, 11 May 2025, 13:21:56 (1746969716)
Author identity: nana-4 <hnmaigo@gmail.com>
8a04dcc9d8ecc2a41614677ded94ddc0da769be6
gtk-3.0/_common.scss
@@ -15,7 +15,8 @@ $material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
// FIXME: color's transition is too slow
$material_transition: all $material_faster $material_ease_out, color 0;
$material_transition: all $material_slower $material_ease_out, color 0;
$shadow_transition: box-shadow $material_faster $material_ease_out;
* {
padding: 0;
@@ -902,7 +903,7 @@ toolbar {
// stand-alone OSD toolbars
&.osd {
transition: box-shadow $material_faster $material_ease_out;
transition: $shadow_transition;
padding: $container_padding;
border-radius: 2px;
box-shadow: $z-depth-2;
@@ -1411,7 +1412,7 @@ menuitem {
* Popovers *
***************/
popover.background {
transition: box-shadow $material_faster $material_ease_out;
transition: $shadow_transition;
padding: 0;
box-shadow: $z-depth-2;
background-color: $light_color;
@@ -1601,7 +1602,7 @@ notebook {
&:disabled { color: $insensitive_fg_color; }
&:not(.reorderable-page) { animation: tab_ripple_effect $material_slower * 2 $material_ease; }
&:not(.reorderable-page) { animation: tab_ripple_effect $material_slower * 3 $material_ease_out; }
&.reorderable-page {
border-color: $borders_color;
@@ -1709,7 +1710,7 @@ scrollbar {
// slider
slider {
transition: $material_transition, margin 0, border-width 0;
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
@@ -1726,7 +1727,7 @@ scrollbar {
&.fine-tune {
slider {
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
min-width: 4px;
min-height: 4px;
}
@@ -2125,6 +2126,7 @@ scale {
}
slider {
transition: all $material_faster $material_ease;
// border-radius: 100%;
// background-color: $accent_bg_color;
background-repeat: no-repeat;
@@ -2577,7 +2579,7 @@ row {
*************/
expander {
arrow {
transition: $material_transition;
transition: all $material_faster $material_ease;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
@@ -3008,7 +3010,7 @@ colorswatch {
}
overlay {
transition: $material_transition;
transition: $shadow_transition;
box-shadow: $z-depth-1;
&:hover { box-shadow: $z-depth-2; }
@@ -3050,7 +3052,7 @@ colorswatch {
// colorscale popup
colorchooser .popover.osd {
transition: box-shadow $material_faster $material_ease_out;
transition: $shadow_transition;
border-radius: 2px;
box-shadow: $z-depth-2;
background-color: $base_color;
@@ -3088,7 +3090,7 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow $material_faster $material_ease_out;
transition: $shadow_transition;
border-radius: 2px 2px 0 0;
box-shadow: $z-depth-4, 0 16px 16px transparent;
gtk-3.0/_drawing.scss
@@ -113,7 +113,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
//
@if $t==normal {
transition: $material_transition;
transition: $material_transition, $shadow_transition;
border-image: none;
box-shadow: $z-depth-1;
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
@@ -177,7 +177,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
//
// normal button
//
transition: $material_transition;
transition: $material_transition, $shadow_transition;
box-shadow: $z-depth-1;
background-color: $c;
background-image: radial-gradient(circle farthest-corner at center,
@@ -203,7 +203,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
//
// pushed button
//
transition: $material_transition, background-image 0;
transition: $material_transition, $shadow_transition, background-image 0;
animation: ripple_effect $material_slower $material_ease_out forwards;
box-shadow: $z-depth-2;
color: $fg_color;
gtk-3.0/gtk-dark.css
@@ -192,7 +192,7 @@ entry {
min-height: 36px;
padding: 0 8px;
border-radius: 2px;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #546E7A;
@@ -213,7 +213,7 @@ entry {
notebook > stack:not(:only-child) revealer spinbutton.flat:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical),
entry.flat {
border-radius: 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
background-color: transparent;
@@ -276,7 +276,7 @@ entry {
spinbutton.error:not(.vertical), notebook > stack:not(:only-child) revealer entry.error,
notebook > stack:not(:only-child) revealer spinbutton.error:not(.vertical),
entry.error {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #DD2C00;
@@ -293,7 +293,7 @@ entry {
spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error,
notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical),
entry.error.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px #DD2C00;
background-color: transparent;
@@ -312,7 +312,7 @@ entry {
spinbutton.warning:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning,
notebook > stack:not(:only-child) revealer spinbutton.warning:not(.vertical),
entry.warning {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FF6D00;
@@ -329,7 +329,7 @@ entry {
spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning,
notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical),
entry.warning.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px #FF6D00;
background-color: transparent;
@@ -380,7 +380,7 @@ button {
padding: 6px 10px;
border-radius: 2px;
font-weight: 500;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #607D8B;
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
@@ -390,7 +390,7 @@ button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
color: #FFFFFF; }
button:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-image 0;
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
color: #FFFFFF; }
@@ -416,7 +416,7 @@ button {
headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check,
radio, calendar.button, messagedialog.csd .dialog-action-area button, button.sidebar-button,
button.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
box-shadow: none;
background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
@@ -438,7 +438,7 @@ button {
headerbar button:active:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:active, scrollbar button:active, check:active,
radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active,
button.flat:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: none;
color: #FFFFFF; }
@@ -1205,7 +1205,7 @@ menubar,
background-color: #37474F; }
menubar > menuitem,
.menubar > menuitem {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 20px;
padding: 4px 8px;
color: rgba(255, 255, 255, 0.75); }
@@ -1396,7 +1396,7 @@ notebook > header {
min-width: 16px;
border-radius: 0; }
notebook > header tab {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 24px;
min-width: 24px;
padding: 6px 12px;
@@ -1417,7 +1417,7 @@ notebook > header {
notebook > header tab:checked:disabled {
color: rgba(255, 255, 255, 0.4); }
notebook > header tab:checked:not(.reorderable-page) {
animation: tab_ripple_effect 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1); }
notebook > header tab:checked.reorderable-page {
border-color: rgba(0, 0, 0, 0.2);
background-color: #546E7A; }
@@ -1458,7 +1458,7 @@ notebook > stack:not(:only-child) {
* Scrollbars *
**************/
scrollbar {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
background-color: #546E7A;
background-clip: border-box; }
* {
@@ -1473,7 +1473,7 @@ scrollbar {
scrollbar.right {
border-left: 1px solid rgba(0, 0, 0, 0.2); }
scrollbar slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
@@ -1487,7 +1487,7 @@ scrollbar {
scrollbar slider:disabled {
background-color: rgba(255, 255, 255, 0.24); }
scrollbar.fine-tune slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0, min-width 0, min-height 0;
min-width: 4px;
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
@@ -1545,7 +1545,7 @@ scrollbar {
* Switch *
**********/
switch {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
margin: 6px 0;
border: 4px solid transparent;
border-radius: 100px;
@@ -1560,12 +1560,12 @@ switch {
background-color: rgba(255, 64, 129, 0.2);
color: rgba(255, 255, 255, 0.4); }
switch slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #546E7A;
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
min-width: 24px;
min-height: 24px;
margin: -4px 0 -4px -4px;
@@ -1580,7 +1580,7 @@ switch {
background-color: #4d646f;
color: rgba(255, 255, 255, 0.4); }
switch:checked slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
margin: -4px -4px -4px 0;
color: #FFFFFF; }
@@ -1809,7 +1809,7 @@ scale {
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -1828,6 +1828,7 @@ scale {
scale fill:disabled {
background-color: transparent; }
scale slider {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: calc(100% - 8px); }
@@ -2045,7 +2046,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #546E7A;
@@ -2186,7 +2187,7 @@ list {
padding: 2px; }
row {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
@@ -2194,7 +2195,7 @@ row {
row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); }
row.activatable.has-open-popup, .has-open-popup.view, iconview.has-open-popup, treeview.view header button.has-open-popup, row.activatable:active, .view:active, iconview:active, treeview.view header button:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
/*********************
@@ -2211,7 +2212,7 @@ row {
* Expanders *
*************/
expander arrow {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2485,7 +2486,7 @@ colorswatch:drop(active) {
colorswatch:drop(active).dark overlay {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; }
colorswatch overlay {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
colorswatch overlay:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -2617,7 +2618,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 2px #FF4081;
caret-color: #FF4081; }
@@ -2639,7 +2640,7 @@ stackswitcher button.text-button.circular {
border-radius: 3px 3px 0 0;
background-color: #546E7A;
background-clip: border-box;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
.floating-bar.left {
margin-right: 7px;
border-left-style: none;
gtk-3.0/gtk.css
@@ -192,7 +192,7 @@ entry {
min-height: 36px;
padding: 0 8px;
border-radius: 2px;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FFFFFF;
@@ -213,7 +213,7 @@ entry {
notebook > stack:not(:only-child) revealer spinbutton.flat:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical),
entry.flat {
border-radius: 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px alpha(currentColor, 0.3);
background-color: transparent;
@@ -276,7 +276,7 @@ entry {
spinbutton.error:not(.vertical), notebook > stack:not(:only-child) revealer entry.error,
notebook > stack:not(:only-child) revealer spinbutton.error:not(.vertical),
entry.error {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #DD2C00;
@@ -293,7 +293,7 @@ entry {
spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error,
notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical),
entry.error.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px #DD2C00;
background-color: transparent;
@@ -312,7 +312,7 @@ entry {
spinbutton.warning:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning,
notebook > stack:not(:only-child) revealer spinbutton.warning:not(.vertical),
entry.warning {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FF6D00;
@@ -329,7 +329,7 @@ entry {
spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning,
notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical),
entry.warning.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px;
box-shadow: inset 0 -1px #FF6D00;
background-color: transparent;
@@ -380,7 +380,7 @@ button {
padding: 6px 10px;
border-radius: 2px;
font-weight: 500;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FAFAFA;
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
@@ -390,7 +390,7 @@ button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
color: rgba(0, 0, 0, 0.8); }
button:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1), background-image 0;
animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
color: rgba(0, 0, 0, 0.8); }
@@ -416,7 +416,7 @@ button {
headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check,
radio, calendar.button, messagedialog.csd .dialog-action-area button, button.sidebar-button,
button.flat {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
box-shadow: none;
background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
@@ -438,7 +438,7 @@ button {
headerbar button:active:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:active, scrollbar button:active, check:active,
radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active,
button.flat:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: none;
color: rgba(0, 0, 0, 0.8); }
@@ -1205,7 +1205,7 @@ menubar,
background-color: #455A64; }
menubar > menuitem,
.menubar > menuitem {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 20px;
padding: 4px 8px;
color: rgba(255, 255, 255, 0.75); }
@@ -1396,7 +1396,7 @@ notebook > header {
min-width: 16px;
border-radius: 0; }
notebook > header tab {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 24px;
min-width: 24px;
padding: 6px 12px;
@@ -1417,7 +1417,7 @@ notebook > header {
notebook > header tab:checked:disabled {
color: rgba(0, 0, 0, 0.32); }
notebook > header tab:checked:not(.reorderable-page) {
animation: tab_ripple_effect 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1); }
notebook > header tab:checked.reorderable-page {
border-color: rgba(0, 0, 0, 0.1);
background-color: #FFFFFF; }
@@ -1458,7 +1458,7 @@ notebook > stack:not(:only-child) {
* Scrollbars *
**************/
scrollbar {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
background-color: #FFFFFF;
background-clip: padding-box; }
* {
@@ -1473,7 +1473,7 @@ scrollbar {
scrollbar.right {
border-left: 1px solid rgba(0, 0, 0, 0.1); }
scrollbar slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
@@ -1487,7 +1487,7 @@ scrollbar {
scrollbar slider:disabled {
background-color: rgba(0, 0, 0, 0.192); }
scrollbar.fine-tune slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), margin 0, border-width 0, min-width 0, min-height 0;
min-width: 4px;
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
@@ -1545,7 +1545,7 @@ scrollbar {
* Switch *
**********/
switch {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
margin: 6px 0;
border: 4px solid transparent;
border-radius: 100px;
@@ -1560,12 +1560,12 @@ switch {
background-color: rgba(255, 64, 129, 0.2);
color: rgba(0, 0, 0, 0.32); }
switch slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FFFFFF;
color: rgba(0, 0, 0, 0.8);
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
min-width: 24px;
min-height: 24px;
margin: -4px 0 -4px -4px;
@@ -1580,7 +1580,7 @@ switch {
background-color: #fafafa;
color: rgba(0, 0, 0, 0.32); }
switch:checked slider {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
margin: -4px -4px -4px 0;
color: #FFFFFF; }
@@ -1809,7 +1809,7 @@ scale {
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -1828,6 +1828,7 @@ scale {
scale fill:disabled {
background-color: transparent; }
scale slider {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: calc(100% - 8px); }
@@ -2045,7 +2046,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #FFFFFF;
@@ -2186,7 +2187,7 @@ list {
padding: 2px; }
row {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
@@ -2194,7 +2195,7 @@ row {
row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); }
row.activatable.has-open-popup, .has-open-popup.view, iconview.has-open-popup, treeview.view header button.has-open-popup, row.activatable:active, .view:active, iconview:active, treeview.view header button:active {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
/*********************
@@ -2211,7 +2212,7 @@ row {
* Expanders *
*************/
expander arrow {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2485,7 +2486,7 @@ colorswatch:drop(active) {
colorswatch:drop(active).dark overlay {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; }
colorswatch overlay {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
colorswatch overlay:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -2617,7 +2618,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 2px #FF4081;
caret-color: #FF4081; }
@@ -2639,7 +2640,7 @@ stackswitcher button.text-button.circular {
border-radius: 3px 3px 0 0;
background-color: #FFFFFF;
background-clip: padding-box;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
.floating-bar.left {
margin-right: 7px;
border-left-style: none;