by roundabout, Friday, 8 April 2016, 04:57:23 (1460091443), pushed by roundabout, Sunday, 11 May 2025, 13:21:55 (1746969715)
Author identity: nana4 <hnmaigo@gmail.com>
2febd981b60da42fdc2d6f219fbc496647893b4b
gtk-3.0/_common.scss
@@ -9,8 +9,10 @@ $menuitem_size: 28px;
$container_padding: 6px;
$material_radius: 2px;
$material_duration: 0.2s;
$material_timing_function: cubic-bezier(0.4, 0, 0.2, 1);
$material_duration: 0.3s;
$material_timing_function: cubic-bezier(0, 0, 0.2, 1);
// FIXME: color's transition is too slow
$material_transition: all $material_duration $material_timing_function, color 0;
// fallback
$header_borders_color: mix(#000000, $dark_color, percentage(alpha($borders_color)));
@@ -18,8 +20,6 @@ $header_borders_color: mix(#000000, $dark_color, percentage(alpha($borders_color
* {
padding: 0;
background-clip: padding-box;
// FIXME: color's transition is too slow
transition: all $material_duration $material_timing_function, color 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: $error_color;
@@ -589,7 +589,6 @@ button {
}
%needs_attention {
transition: none;
animation: needs_attention $material_duration $material_timing_function forwards;
background-repeat: no-repeat;
background-position: right 3px;
@@ -683,9 +682,9 @@ modelbutton.flat,
&:active { animation: none; }
}
check:not(:indeterminate):checked:active { animation: check_check $material_duration * 2 $material_timing_function; }
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration * 2 $material_timing_function; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
// FIXME: remove the following when the checks/radios rewrite lands
check:last-child,
@@ -901,6 +900,7 @@ toolbar {
// stand-alone OSD toolbars
&.osd {
transition: box-shadow $material_duration $material_timing_function;
padding: $container_padding;
border-radius: 2px;
box-shadow: $z-depth-2;
@@ -1008,11 +1008,10 @@ headerbar {
}
&.selection-mode {
animation: header_ripple_effect $material_duration $material_timing_function forwards;
box-shadow: inset 0 1px $secondary_highlight_color;
// background-color: $selected_bg_color;
color: $selected_fg_color;
transition: all $material_duration $material_timing_function, color 0, background-image 0;
animation: header_ripple_effect $material_duration $material_timing_function forwards;
&:backdrop {
}
@@ -1274,6 +1273,7 @@ menubar,
background-color: $dark_color;
> menuitem {
transition: $material_transition;
min-height: 20px;
padding: 4px 8px;
color: $secondary_fg_color;
@@ -1300,7 +1300,6 @@ menu,
}
menuitem {
transition: none;
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
@@ -1386,6 +1385,7 @@ menuitem {
* Popovers *
***************/
popover.background {
transition: box-shadow $material_duration $material_timing_function;
padding: 0;
border-radius: 2px + 1px;
box-shadow: $z-depth-2;
@@ -1566,6 +1566,7 @@ notebook {
}
tab {
transition: $material_transition;
min-height: 24px;
min-width: 24px;
padding: 6px 12px;
@@ -1690,6 +1691,7 @@ scrollbar {
-GtkScrollbar-has-forward-stepper: false;
}
background-color: $base_color;
background-clip: $extra_background_clip;
@@ -1701,13 +1703,13 @@ scrollbar {
// slider
slider {
transition: $material_transition, margin 0, border-width 0;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
border-radius: 100px;
background-clip: padding-box;
background-color: $tertiary_fg_color;
transition: all $material_duration $material_timing_function, color 0, margin 0, border-width 0;
&:hover { background-color: $secondary_fg_color; }
@@ -1718,9 +1720,9 @@ scrollbar {
&.fine-tune {
slider {
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
min-width: 4px;
min-height: 4px;
transition: all $material_duration $material_timing_function, color 0, margin 0, border-width 0, min-width 0, min-height 0;
}
&.horizontal slider { margin: 2px 0; }
@@ -1806,6 +1808,7 @@ scrollbar {
* Switch *
**********/
switch {
transition: $material_transition;
margin: $container_padding 0;
border: 4px solid transparent;
border-radius: 100px;
@@ -1825,6 +1828,9 @@ switch {
}
slider {
@include entry(normal);
transition: $material_transition, margin 0;
min-width: $small_size;
min-height: $small_size;
margin: -4px 0 -4px -4px;
@@ -1835,9 +1841,6 @@ switch {
center center, 0.5,
to(transparent),
to(transparent));
transition: all $material_duration $material_timing_function, color 0, margin 0;
@include entry(normal);
}
&:hover slider { @include entry(focus); }
@@ -1845,11 +1848,11 @@ switch {
&:disabled slider { @include entry(insensitive); }
&:checked slider {
transition: $material_transition, margin 0, background-image 0;
animation: needs_attention $material_duration $material_timing_function forwards;
margin: -4px -4px -4px 0;
// background-color: $accent_bg_color;
color: $selected_fg_color;
transition: all $material_duration $material_timing_function, color 0, margin 0, background-image 0;
animation: needs_attention $material_duration $material_timing_function forwards;
}
&:checked:disabled slider { animation: none; }
@@ -1928,8 +1931,8 @@ radio {
}
menu menuitem & {
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
transition: none;
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
@@ -2012,15 +2015,15 @@ radio {
to { -gtk-icon-transform: unset; }
}
check:not(:indeterminate):checked { animation: check_check $material_duration * 2 $material_timing_function; }
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
check:not(:indeterminate):checked:active { animation: check_check $material_duration * 2 $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
// radio:not(:indeterminate):checked { animation: check_radio $material_duration * 2 $material_timing_function; }
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration * 2 $material_timing_function; }
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration * 2 $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
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; }
// no animations in menus
menu menuitem {
@@ -2083,6 +2086,8 @@ scale {
min-width: 12px;
padding: 12px;
// the slider is inside the trough, so to have make it bigger there's a negative margin
slider {
min-height: $small_size;
@@ -2518,6 +2523,8 @@ list {
}
row {
transition: $material_transition;
&:hover { transition: none; }
&.activatable {
@@ -2535,7 +2542,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: all $material_duration $material_timing_function, color 0, background-image 0;
transition: $material_transition, background-image 0;
animation: row_ripple_effect $material_duration $material_timing_function forwards;
}
}
@@ -2564,6 +2571,7 @@ row {
*************/
expander {
arrow {
transition: $material_transition;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
@@ -2994,6 +3002,7 @@ colorswatch {
}
overlay {
transition: $material_transition;
box-shadow: $z-depth-1;
&:hover { box-shadow: $z-depth-2; }
@@ -3035,6 +3044,7 @@ colorswatch {
// colorscale popup
colorchooser .popover.osd {
transition: box-shadow $material_duration $material_timing_function;
border-radius: 2px;
box-shadow: $z-depth-2;
background-color: $base_color;
@@ -3072,9 +3082,9 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow $material_duration $material_timing_function;
border-radius: 2px 2px 0 0;
box-shadow: $z-depth-4, 0 14px 14px transparent;
transition: none;
box-shadow: $z-depth-4, 0 16px 16px transparent;
// FIXME rationalize shadows
@@ -3086,8 +3096,7 @@ decoration {
// change when we go to backdrop, to prevent jumping windows.
// The biggest shadow should be in the same order then in the active state
// or the jumping will happen during the transition.
box-shadow: $z-depth-2, 0 14px 14px transparent;
transition: all $material_duration $material_timing_function, color 0;
box-shadow: $z-depth-2, 0 16px 16px transparent;
}
.fullscreen &,
@@ -3110,9 +3119,9 @@ decoration {
messagedialog.csd & {
border-radius: 2px;
// box-shadow: $z-depth-4, 0 14px 14px transparent;
// box-shadow: $z-depth-4, 0 16px 16px transparent;
// &:backdrop { box-shadow: $z-depth-2, 0 14px 14px transparent; }
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
}
.solid-csd & {
@@ -3206,6 +3215,7 @@ button.circular { // FIXME: aggregate to buttons
}
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
transition: $material_transition;
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
caret-color: $accent_bg_color;
}
gtk-3.0/_drawing.scss
@@ -113,6 +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;
border-image: none;
box-shadow: $z-depth-1;
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
@@ -131,6 +132,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
}
@if $t==flat-normal {
transition: $material_transition;
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
$fc 0%,
transparent 0%)
@@ -175,6 +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;
box-shadow: $z-depth-1;
background-color: $c;
background-image: radial-gradient(circle farthest-corner at center,
@@ -200,10 +203,10 @@ $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;
box-shadow: $z-depth-2;
color: $fg_color;
transition: all $material_duration $material_timing_function, color 0, background-image 0;
animation: ripple_effect $material_duration $material_timing_function forwards;
}
@if $t==insensitive {
@@ -239,6 +242,7 @@ $z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
//
// normal flat button
//
transition: $material_transition;
box-shadow: none;
background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center,
@@ -264,10 +268,10 @@ $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;
box-shadow: none;
color: $fg_color;
transition: all $material_duration $material_timing_function, color 0, background-image 0;
animation: flat_ripple_effect $material_duration $material_timing_function forwards;
}
@if $t==flat-insensitive {
gtk-3.0/gtk-dark.css
@@ -28,7 +28,6 @@
* {
padding: 0;
background-clip: padding-box;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: #DD2C00;
-GtkScrolledWindow-scrollbar-spacing: 0;
@@ -193,6 +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;
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: #455A64;
@@ -213,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -275,6 +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;
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;
@@ -291,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -309,6 +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;
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;
@@ -325,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -375,6 +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;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #546E7A;
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
@@ -384,10 +390,10 @@ 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;
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;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
button:disabled {
box-shadow: none;
background-color: alpha(currentColor, 0.3);
@@ -410,6 +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;
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));
@@ -431,10 +438,10 @@ 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;
animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: none;
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
.inline-toolbar
button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled,
popover.background radiobutton:disabled,
@@ -661,8 +668,7 @@ button {
button.needs-attention > label,
.stack-switcher >
button.needs-attention > image, stacksidebar row.needs-attention > label {
transition: none;
animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
background-repeat: no-repeat;
background-position: right 3px;
background-size: 6px 6px; }
@@ -764,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.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0, 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.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0, 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,
@@ -913,6 +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);
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);
@@ -989,10 +996,9 @@ headerbar {
color: inherit; }
.selection-mode.titlebar:not(headerbar),
headerbar.selection-mode {
animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: header_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px), #FFFFFF 0%, transparent 0%) 0 0 0/0 0 0px; }
@@ -1180,6 +1186,7 @@ menubar,
background-color: #2f3d44; }
menubar > menuitem,
.menubar > menuitem {
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); }
@@ -1203,7 +1210,6 @@ menu,
border-radius: 2px; }
menu menuitem,
.menu menuitem {
transition: none;
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
@@ -1277,6 +1283,7 @@ menuitem radio:dir(rtl) {
* Popovers *
***************/
popover.background {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
padding: 0;
border-radius: 3px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
@@ -1386,6 +1393,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;
min-height: 24px;
min-width: 24px;
padding: 6px 12px;
@@ -1406,7 +1414,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.4s ease-in-out; }
animation: tab_ripple_effect 0.6s ease-in-out; }
notebook > header tab:checked.reorderable-page {
border-color: rgba(0, 0, 0, 0.2);
background-color: #546E7A; }
@@ -1447,6 +1455,7 @@ notebook > stack:not(:only-child) {
* Scrollbars *
**************/
scrollbar {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
background-color: #455A64;
background-clip: border-box; }
* {
@@ -1461,13 +1470,13 @@ 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;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
border-radius: 100px;
background-clip: padding-box;
background-color: rgba(255, 255, 255, 0.6);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, border-width 0; }
background-color: rgba(255, 255, 255, 0.6); }
scrollbar slider:hover {
background-color: rgba(255, 255, 255, 0.75); }
scrollbar slider:active {
@@ -1475,9 +1484,9 @@ 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;
min-width: 4px;
min-height: 4px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0; }
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
margin: 2px 0; }
scrollbar.fine-tune.vertical slider {
@@ -1533,6 +1542,7 @@ scrollbar {
* Switch *
**********/
switch {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
margin: 6px 0;
border: 4px solid transparent;
border-radius: 100px;
@@ -1547,17 +1557,18 @@ 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;
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: #455A64;
color: #FFFFFF;
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;
-gtk-outline-radius: 100px;
border-radius: 100px;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 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: #455A64;
color: #FFFFFF; }
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)); }
switch:hover slider {
border-image: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -1566,10 +1577,10 @@ switch {
background-color: #3e515a;
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;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
margin: -4px -4px -4px 0;
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, background-image 0;
animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
switch:checked:disabled slider {
animation: none; }
@@ -1674,8 +1685,8 @@ radio {
margin: -12px; }
menu menuitem check, menu menuitem
radio {
margin: -16px -16px;
transition: none; }
transition: none;
margin: -16px -16px; }
menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem
radio:not(:checked):not(:indeterminate):hover {
color: alpha(currentColor, 0.75); }
@@ -1722,16 +1733,16 @@ radio {
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
check:not(:indeterminate):checked:active {
animation: check_check 0.4s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
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; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
check:indeterminate:checked:active, radio:indeterminate:checked:active {
animation: check_indeterminate 0.4s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
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; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
@@ -1794,6 +1805,8 @@ scale {
min-height: 12px;
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -2029,6 +2042,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.3s 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: #455A64;
@@ -2168,15 +2182,17 @@ list {
list row {
padding: 2px; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
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.4, 0, 0.2, 1), color 0, background-image 0;
animation: row_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
row {
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 {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
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;
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
/*********************
* App Notifications *
@@ -2192,6 +2208,7 @@ row.activatable, .view, iconview, treeview.view header button {
* Expanders *
*************/
expander arrow {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2464,6 +2481,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;
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); }
@@ -2485,6 +2503,7 @@ colorswatch#editor-color-sample {
border-radius: 2px; }
colorchooser .popover.osd {
transition: box-shadow 0.3s 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: #455A64; }
@@ -2501,13 +2520,12 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow 0.3s 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 14px 14px transparent;
transition: none;
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; }
decoration:backdrop {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 14px 14px transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0; }
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; }
.fullscreen decoration, .tiled decoration {
border-radius: 0; }
.popup decoration {
@@ -2595,6 +2613,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
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; }
@@ -2616,7 +2635,7 @@ stackswitcher button.text-button.circular {
border-radius: 3px 3px 0 0;
background-color: #455A64;
background-clip: border-box;
transition: all 0.2s cubic-bezier(0.4, 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;
@@ -2660,11 +2679,11 @@ stackswitcher button.text-button.circular {
background-color: transparent; } }
.nautilus-operations-button-needs-attention {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); }
.nautilus-operations-button-needs-attention-multiple {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1);
animation-iteration-count: 2; }
.disk-space-display.unknown {
gtk-3.0/gtk.css
@@ -28,7 +28,6 @@
* {
padding: 0;
background-clip: padding-box;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: #DD2C00;
-GtkScrolledWindow-scrollbar-spacing: 0;
@@ -193,6 +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;
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,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -275,6 +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;
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;
@@ -291,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -309,6 +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;
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;
@@ -325,6 +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;
border-image: radial-gradient(circle farthest-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;
@@ -375,6 +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;
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));
@@ -384,10 +390,10 @@ 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;
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);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: rgba(0, 0, 0, 0.8); }
button:disabled {
box-shadow: none;
background-color: alpha(currentColor, 0.3);
@@ -410,6 +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;
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));
@@ -431,10 +438,10 @@ 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;
animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: none;
color: rgba(0, 0, 0, 0.8);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: rgba(0, 0, 0, 0.8); }
.inline-toolbar
button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled,
popover.background radiobutton:disabled,
@@ -661,8 +668,7 @@ button {
button.needs-attention > label,
.stack-switcher >
button.needs-attention > image, stacksidebar row.needs-attention > label {
transition: none;
animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
background-repeat: no-repeat;
background-position: right 3px;
background-size: 6px 6px; }
@@ -764,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.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0, 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.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0, 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,
@@ -913,6 +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);
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);
@@ -989,10 +996,9 @@ headerbar {
color: inherit; }
.selection-mode.titlebar:not(headerbar),
headerbar.selection-mode {
animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, background-image 0;
animation: header_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px), #FFFFFF 0%, transparent 0%) 0 0 0/0 0 0px; }
@@ -1180,6 +1186,7 @@ menubar,
background-color: #dee4e7; }
menubar > menuitem,
.menubar > menuitem {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-height: 20px;
padding: 4px 8px;
color: rgba(0, 0, 0, 0.6); }
@@ -1203,7 +1210,6 @@ menu,
border-radius: 2px; }
menu menuitem,
.menu menuitem {
transition: none;
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
@@ -1277,6 +1283,7 @@ menuitem radio:dir(rtl) {
* Popovers *
***************/
popover.background {
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
padding: 0;
border-radius: 3px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
@@ -1386,6 +1393,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;
min-height: 24px;
min-width: 24px;
padding: 6px 12px;
@@ -1406,7 +1414,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.4s ease-in-out; }
animation: tab_ripple_effect 0.6s ease-in-out; }
notebook > header tab:checked.reorderable-page {
border-color: rgba(0, 0, 0, 0.1);
background-color: #FAFAFA; }
@@ -1447,6 +1455,7 @@ notebook > stack:not(:only-child) {
* Scrollbars *
**************/
scrollbar {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
background-color: #FFFFFF;
background-clip: padding-box; }
* {
@@ -1461,13 +1470,13 @@ 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;
min-width: 8px;
min-height: 8px;
border: 4px solid transparent;
border-radius: 100px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.48);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, border-width 0; }
background-color: rgba(0, 0, 0, 0.48); }
scrollbar slider:hover {
background-color: rgba(0, 0, 0, 0.6); }
scrollbar slider:active {
@@ -1475,9 +1484,9 @@ 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;
min-width: 4px;
min-height: 4px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0; }
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
margin: 2px 0; }
scrollbar.fine-tune.vertical slider {
@@ -1533,6 +1542,7 @@ scrollbar {
* Switch *
**********/
switch {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
margin: 6px 0;
border: 4px solid transparent;
border-radius: 100px;
@@ -1547,17 +1557,18 @@ 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;
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;
min-width: 24px;
min-height: 24px;
margin: -4px 0 -4px -4px;
-gtk-outline-radius: 100px;
border-radius: 100px;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 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); }
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)); }
switch:hover slider {
border-image: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); }
@@ -1566,10 +1577,10 @@ switch {
background-color: #f6f7f8;
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;
animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
margin: -4px -4px -4px 0;
color: #FFFFFF;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0, margin 0, background-image 0;
animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
color: #FFFFFF; }
switch:checked:disabled slider {
animation: none; }
@@ -1674,8 +1685,8 @@ radio {
margin: -12px; }
menu menuitem check, menu menuitem
radio {
margin: -16px -16px;
transition: none; }
transition: none;
margin: -16px -16px; }
menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem
radio:not(:checked):not(:indeterminate):hover {
color: alpha(currentColor, 0.75); }
@@ -1722,16 +1733,16 @@ radio {
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); }
check:not(:indeterminate):checked:active {
animation: check_check 0.4s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
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; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); }
check:indeterminate:checked:active, radio:indeterminate:checked:active {
animation: check_indeterminate 0.4s cubic-bezier(0.4, 0, 0.2, 1), flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
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; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
@@ -1794,6 +1805,8 @@ scale {
min-height: 12px;
min-width: 12px;
padding: 12px; }
scale * {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; }
scale slider {
min-height: 24px;
min-width: 24px;
@@ -2029,6 +2042,7 @@ levelbar.vertical block {
levelbar trough {
padding: 2px;
border-radius: 2px;
transition: all 0.3s 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;
@@ -2168,15 +2182,17 @@ list {
list row {
padding: 2px; }
row:hover {
transition: none; }
row.activatable, .view, iconview, treeview.view header button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
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.4, 0, 0.2, 1), color 0, background-image 0;
animation: row_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
row {
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 {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); }
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;
animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
/*********************
* App Notifications *
@@ -2192,6 +2208,7 @@ row.activatable, .view, iconview, treeview.view header button {
* Expanders *
*************/
expander arrow {
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
@@ -2464,6 +2481,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;
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); }
@@ -2485,6 +2503,7 @@ colorswatch#editor-color-sample {
border-radius: 2px; }
colorchooser .popover.osd {
transition: box-shadow 0.3s 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; }
@@ -2501,13 +2520,12 @@ colorchooser .popover.osd {
* Window Decorations *
*********************/
decoration {
transition: box-shadow 0.3s 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 14px 14px transparent;
transition: none;
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; }
decoration:backdrop {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 14px 14px transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0; }
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; }
.fullscreen decoration, .tiled decoration {
border-radius: 0; }
.popup decoration {
@@ -2595,6 +2613,7 @@ button.circular {
font-size: smaller; }
*:drop(active) {
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; }
@@ -2616,7 +2635,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.4, 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;
@@ -2660,11 +2679,11 @@ stackswitcher button.text-button.circular {
background-color: transparent; } }
.nautilus-operations-button-needs-attention {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); }
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); }
.nautilus-operations-button-needs-attention-multiple {
color: #FF4081;
animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1);
animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1);
animation-iteration-count: 2; }
.disk-space-display.unknown {