roundabout,
created on Friday, 3 June 2016, 16:07:51 (1464970071),
received on Sunday, 11 May 2025, 13:21:56 (1746969716)
Author identity: nana4 <hnmaigo@gmail.com>
891cd3edf83581164f0b801a17984f3fe558fba6
gtk-3.0/_apps.scss
@@ -12,7 +12,7 @@
border-radius: (2px + 1px) (2px + 1px) 0 0;
background-color: $base_color;
background-clip: $extra_background_clip;
transition: all $material_duration $material_timing_function, color 0, border-width 0;
transition: $material_transition, border-width 0;
&.left {
margin-right: 8px - 1px;
@@ -87,12 +87,12 @@
.nautilus-operations-button-needs-attention {
color: $accent_bg_color;
animation: needs_attention_keyframes 2s $material_timing_function;
animation: needs_attention_keyframes 2s $material_ease;
}
.nautilus-operations-button-needs-attention-multiple {
color: $accent_bg_color;
animation: needs_attention_keyframes 2s $material_timing_function;
animation: needs_attention_keyframes 2s $material_ease;
animation-iteration-count: 2;
}
gtk-3.0/_common.scss
@@ -9,10 +9,13 @@ $menuitem_size: 28px;
$container_padding: 6px;
$material_radius: 2px;
$material_duration: 0.3s;
$material_timing_function: cubic-bezier(0, 0, 0.2, 1);
$material_faster: 0.2s;
$material_slower: 0.3s;
$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_duration $material_timing_function, color 0;
$material_transition: all $material_faster $material_ease_out, color 0;
* {
padding: 0;
@@ -588,7 +591,7 @@ button {
}
%needs_attention {
animation: needs_attention $material_duration $material_timing_function forwards;
animation: needs_attention $material_slower $material_ease_out forwards;
background-repeat: no-repeat;
background-position: right 3px;
background-size: 6px 6px;
@@ -681,9 +684,9 @@ modelbutton.flat,
&:active { animation: none; }
}
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease; }
// FIXME: remove the following when the checks/radios rewrite lands
check:last-child,
@@ -899,7 +902,7 @@ toolbar {
// stand-alone OSD toolbars
&.osd {
transition: box-shadow $material_duration $material_timing_function;
transition: box-shadow $material_faster $material_ease_out;
padding: $container_padding;
border-radius: 2px;
box-shadow: $z-depth-2;
@@ -1021,7 +1024,7 @@ headerbar {
}
&.selection-mode {
animation: header_ripple_effect $material_duration $material_timing_function forwards;
animation: header_ripple_effect $material_slower $material_ease_out forwards;
// box-shadow: inset 0 1px $secondary_highlight_color;
// background-color: $selected_bg_color;
color: $selected_fg_color;
@@ -1408,7 +1411,7 @@ menuitem {
* Popovers *
***************/
popover.background {
transition: box-shadow $material_duration $material_timing_function;
transition: box-shadow $material_faster $material_ease_out;
padding: 0;
box-shadow: $z-depth-2;
background-color: $light_color;
@@ -1598,7 +1601,7 @@ notebook {
&:disabled { color: $insensitive_fg_color; }
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
&:not(.reorderable-page) { animation: tab_ripple_effect $material_slower * 2 $material_ease; }
&.reorderable-page {
border-color: $borders_color;
@@ -1852,7 +1855,7 @@ switch {
&:checked slider {
transition: $material_transition, margin 0, background-image 0;
animation: needs_attention $material_duration $material_timing_function forwards;
animation: needs_attention $material_slower $material_ease_out forwards;
margin: -4px -4px -4px 0;
// background-color: $accent_bg_color;
color: $selected_fg_color;
@@ -2018,15 +2021,15 @@ radio {
to { -gtk-icon-transform: unset; }
}
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
// no animations in menus
menu menuitem {
@@ -2546,7 +2549,7 @@ row {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:active {
transition: $material_transition, background-image 0;
animation: row_ripple_effect $material_duration $material_timing_function forwards;
animation: row_ripple_effect $material_slower $material_ease_out forwards;
}
}
@@ -3047,7 +3050,7 @@ colorswatch {
// colorscale popup
colorchooser .popover.osd {
transition: box-shadow $material_duration $material_timing_function;
transition: box-shadow $material_faster $material_ease_out;
border-radius: 2px;
box-shadow: $z-depth-2;
background-color: $base_color;
@@ -3085,7 +3088,7 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow $material_duration $material_timing_function;
transition: box-shadow $material_faster $material_ease_out;
border-radius: 2px 2px 0 0;
box-shadow: $z-depth-4, 0 16px 16px transparent;
gtk-3.0/_drawing.scss
@@ -204,7 +204,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;
animation: ripple_effect $material_duration $material_timing_function forwards;
animation: ripple_effect $material_slower $material_ease_out forwards;
box-shadow: $z-depth-2;
color: $fg_color;
}
@@ -269,7 +269,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
// pushed flat button
//
transition: $material_transition, background-image 0;
animation: flat_ripple_effect $material_duration $material_timing_function forwards;
animation: flat_ripple_effect $material_slower $material_ease_out forwards;
box-shadow: none;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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);
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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s 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; }
@@ -770,13 +770,13 @@ popover.background radiobutton,
modelbutton.flat check:not(:indeterminate):checked:active, popover.background checkbutton check:not(:indeterminate):checked:active,
popover.background radiobutton check:not(:indeterminate):checked:active,
.menuitem.button.flat check:not(:indeterminate):checked:active {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
modelbutton.flat check:indeterminate:checked:active, popover.background checkbutton check:indeterminate:checked:active,
popover.background radiobutton check:indeterminate:checked:active, modelbutton.flat radio:indeterminate:checked:active, popover.background checkbutton radio:indeterminate:checked:active,
popover.background radiobutton radio:indeterminate:checked:active,
.menuitem.button.flat check:indeterminate:checked:active,
.menuitem.button.flat radio:indeterminate:checked:active {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
popover.background radiobutton check:last-child,
modelbutton.flat radio:last-child,
@@ -919,7 +919,7 @@ toolbar {
background-color: transparent; }
toolbar.osd, .app-notification,
.app-notification.frame {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
padding: 6px;
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
@@ -1205,7 +1205,7 @@ menubar,
background-color: #37474F; }
menubar > menuitem,
.menubar > menuitem {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 20px;
padding: 4px 8px;
color: rgba(255, 255, 255, 0.75); }
@@ -1302,7 +1302,7 @@ menuitem radio:dir(rtl) {
* Popovers *
***************/
popover.background {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
padding: 0;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #607D8B; }
@@ -1396,7 +1396,7 @@ notebook > header {
min-width: 16px;
border-radius: 0; }
notebook > header tab {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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 ease-in-out; }
animation: tab_ripple_effect 0.6s cubic-bezier(0.4, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s 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), color 0, 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.3s 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), color 0, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
transition: all 0.2s 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; }
@@ -1736,16 +1736,16 @@ radio {
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
check:not(:indeterminate):checked:active {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
check:indeterminate:checked:active, radio:indeterminate:checked:active {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
@@ -1809,7 +1809,7 @@ scale {
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -2045,7 +2045,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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 +2186,7 @@ list {
padding: 2px; }
row {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
@@ -2194,7 +2194,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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s 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 +2211,7 @@ row {
* Expanders *
*************/
expander arrow {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2485,7 +2485,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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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); }
colorswatch overlay:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -2507,7 +2507,7 @@ colorswatch#editor-color-sample {
border-radius: 2px; }
colorchooser .popover.osd {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #546E7A; }
@@ -2524,7 +2524,7 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px 2px 0 0;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
margin: 8px; }
@@ -2617,7 +2617,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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 +2639,7 @@ stackswitcher button.text-button.circular {
border-radius: 3px 3px 0 0;
background-color: #546E7A;
background-clip: border-box;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
.floating-bar.left {
margin-right: 7px;
border-left-style: none;
@@ -2683,11 +2683,11 @@ stackswitcher button.text-button.circular {
background-color: transparent; } }
.nautilus-operations-button-needs-attention {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); }
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
.nautilus-operations-button-needs-attention-multiple {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1);
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
animation-iteration-count: 2; }
.disk-space-display.unknown {
gtk-3.0/gtk.css
@@ -192,7 +192,7 @@ entry {
min-height: 36px;
padding: 0 8px;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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);
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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s 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); }
@@ -770,13 +770,13 @@ popover.background radiobutton,
modelbutton.flat check:not(:indeterminate):checked:active, popover.background checkbutton check:not(:indeterminate):checked:active,
popover.background radiobutton check:not(:indeterminate):checked:active,
.menuitem.button.flat check:not(:indeterminate):checked:active {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
modelbutton.flat check:indeterminate:checked:active, popover.background checkbutton check:indeterminate:checked:active,
popover.background radiobutton check:indeterminate:checked:active, modelbutton.flat radio:indeterminate:checked:active, popover.background checkbutton radio:indeterminate:checked:active,
popover.background radiobutton radio:indeterminate:checked:active,
.menuitem.button.flat check:indeterminate:checked:active,
.menuitem.button.flat radio:indeterminate:checked:active {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
popover.background radiobutton check:last-child,
modelbutton.flat radio:last-child,
@@ -919,7 +919,7 @@ toolbar {
background-color: transparent; }
toolbar.osd, .app-notification,
.app-notification.frame {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
padding: 6px;
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
@@ -1205,7 +1205,7 @@ menubar,
background-color: #455A64; }
menubar > menuitem,
.menubar > menuitem {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 20px;
padding: 4px 8px;
color: rgba(255, 255, 255, 0.75); }
@@ -1302,7 +1302,7 @@ menuitem radio:dir(rtl) {
* Popovers *
***************/
popover.background {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
padding: 0;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #FAFAFA; }
@@ -1396,7 +1396,7 @@ notebook > header {
min-width: 16px;
border-radius: 0; }
notebook > header tab {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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 ease-in-out; }
animation: tab_ripple_effect 0.6s cubic-bezier(0.4, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s 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), color 0, 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.3s 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), color 0, 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
transition: all 0.2s 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.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
transition: all 0.2s 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; }
@@ -1736,16 +1736,16 @@ radio {
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
check:not(:indeterminate):checked:active {
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
check:indeterminate:checked:active, radio:indeterminate:checked:active {
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
@@ -1809,7 +1809,7 @@ scale {
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -2045,7 +2045,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
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 +2186,7 @@ list {
padding: 2px; }
row {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
@@ -2194,7 +2194,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.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0;
transition: all 0.2s 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 +2211,7 @@ row {
* Expanders *
*************/
expander arrow {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2485,7 +2485,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.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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); }
colorswatch overlay:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -2507,7 +2507,7 @@ colorswatch#editor-color-sample {
border-radius: 2px; }
colorchooser .popover.osd {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #FFFFFF; }
@@ -2524,7 +2524,7 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px 2px 0 0;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
margin: 8px; }
@@ -2617,7 +2617,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
transition: all 0.2s 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 +2639,7 @@ stackswitcher button.text-button.circular {
border-radius: 3px 3px 0 0;
background-color: #FFFFFF;
background-clip: padding-box;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; }
.floating-bar.left {
margin-right: 7px;
border-left-style: none;
@@ -2683,11 +2683,11 @@ stackswitcher button.text-button.circular {
background-color: transparent; } }
.nautilus-operations-button-needs-attention {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); }
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
.nautilus-operations-button-needs-attention-multiple {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1);
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
animation-iteration-count: 2; }
.disk-space-display.unknown {