roundabout,
created on Friday, 29 July 2016, 13:53:43 (1469800423),
received on Sunday, 11 May 2025, 13:21:57 (1746969717)
Author identity: nana-4 <hnmaigo@gmail.com>
ab07e2070ab823d00421ea0f5a43b65a6e7f5509
gtk-3.0/_apps.scss
@@ -170,6 +170,19 @@ menubar {
separator { color: $borders_color; }
/***********
* Synapse *
gtk-3.0/_common.scss
@@ -680,21 +680,22 @@ modelbutton.flat,
check,
radio {
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
&, &:hover { background-image: none; }
&:active { animation: none; }
}
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease; }
&:last-child { margin-left: -8px; margin-right: -16px; }
&:first-child { margin-left: -16px; margin-right: -8px; }
}
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease; }
check:not(:indeterminate):checked { @extend %check_checked; }
// FIXME: remove the following when the checks/radios rewrite lands
check:last-child,
radio:last-child { margin-left: 8px; }
// radio:not(:indeterminate):checked { @extend %radio_checked; }
check:first-child,
radio:first-child { margin-right: 8px; }
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
}
modelbutton.flat arrow {
@@ -1445,9 +1446,6 @@ popover.background {
separator { margin: 4px 0; }
list separator { margin: 0; }
checkbutton,
radiobutton { @extend modelbutton.flat; }
}
/*************
@@ -1885,53 +1883,45 @@ switch {
}
}
checkbutton.text-button, radiobutton.text-button {
checkbutton.text-button,
radiobutton.text-button {
// this is for a nice focus on check and radios text
padding: 2px 0;
padding: 2px;
outline-offset: 0;
label:not(:only-child) {
&:first-child { margin-left: 4px; }
&:last-child { margin-right: 4px; }
}
label:not(:only-child) { margin: 0 4px; }
}
check,
radio {
min-height: 24px;
min-width: 24px;
-gtk-icon-source: none;
margin: -12px -8px;
margin: -12px;
padding: 12px;
outline-offset: 4px;
// border-radius: 100%;
@extend %button_basic.flat;
@extend %button_basic.image-button;
color: gtkalpha(currentColor, $enabled_opacity);
&:hover, &:active { color: currentColor; }
&:checked, &:checked:disabled { background-color: transparent; }
&:checked, &:indeterminate { color: $accent_bg_color; }
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
&:only-child { margin: -12px; }
// &:only-child { margin: -12px; }
.osd & {
row &:not(:checked):not(:indeterminate) {
color: gtkalpha(currentColor, $enabled_opacity);
&:hover, &:active { color: currentColor; }
}
menu menuitem & {
transition: none;
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
&, &:hover, &:disabled {
background-image: none;
@@ -1955,14 +1945,21 @@ check {
%radio,
radio {
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
border-image: -gtk-gradient(radial,
center center, 0,
center center, 0.001,
to($accent_bg_color),
to(transparent))
24 / 24px;
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
&:checked {
border-image: -gtk-gradient(radial,
@@ -1982,9 +1979,6 @@ radio {
24 / 24px;
}
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
&:indeterminate:checked {
border-image: -gtk-gradient(radial,
center center, 0,
@@ -2001,9 +1995,24 @@ radio {
to { -gtk-icon-transform: unset; }
}
@keyframes check_radio {
from { -gtk-icon-transform: scale(0); }
to { -gtk-icon-transform: unset; }
@keyframes check_radio { // FIXME: cannot animate border-image
from {
border-image: -gtk-gradient(radial,
center center, 0,
center center, 0.001,
to($accent_bg_color),
to(transparent))
24 / 24px;
}
to {
border-image: -gtk-gradient(radial,
center center, 0,
center center, (10 / 48 / 2),
to($accent_bg_color),
to(transparent))
24 / 24px;
}
}
@keyframes check_indeterminate {
@@ -2012,12 +2021,17 @@ radio {
to { -gtk-icon-transform: unset; }
}
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
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_slower $material_ease; }
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_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
@@ -2032,8 +2046,6 @@ menu menuitem {
treeview.view check,
treeview.view radio {
// margin: -12px;
// padding: 12px;
padding: 0;
&:checked:hover, &:selected:checked:hover { background-image: none; }
gtk-3.0/gtk-dark.css
@@ -409,8 +409,7 @@ button {
button:checked:disabled > label {
color: inherit; }
.inline-toolbar
button, modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
button, modelbutton.flat,
.menuitem.button.flat, spinbutton:not(.vertical) button, spinbutton.vertical button, toolbar.osd button, .app-notification button,
.app-notification.frame button, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check,
@@ -422,8 +421,7 @@ button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0));
color: rgba(255, 255, 255, 0.75); }
.inline-toolbar
button:hover, modelbutton.flat:hover, popover.background checkbutton:hover,
popover.background radiobutton:hover,
button:hover, modelbutton.flat:hover,
.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, toolbar.osd button:hover, .app-notification button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action),
headerbar button:hover:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover,
radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover,
@@ -432,8 +430,7 @@ button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.15));
color: #FFFFFF; }
.inline-toolbar
button:active, modelbutton.flat:active, popover.background checkbutton:active,
popover.background radiobutton:active,
button:active, modelbutton.flat:active,
.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, toolbar.osd button:active, .app-notification button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action),
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,
@@ -443,8 +440,7 @@ button {
box-shadow: none;
color: #FFFFFF; }
.inline-toolbar
button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled,
popover.background radiobutton:disabled,
button:disabled, modelbutton.flat:disabled,
.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, toolbar.osd button:disabled, .app-notification button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action),
headerbar button:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled,
radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled,
@@ -453,16 +449,14 @@ button {
background-color: transparent;
color: rgba(255, 255, 255, 0.3); }
.inline-toolbar
button:disabled > label, modelbutton.flat:disabled > label, popover.background checkbutton:disabled > label,
popover.background radiobutton:disabled > label,
button:disabled > label, modelbutton.flat:disabled > label,
.menuitem.button.flat:disabled > label, spinbutton:not(.vertical) button:disabled > label, spinbutton.vertical button:disabled > label, toolbar.osd button:disabled > label, .app-notification button:disabled > label, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action) > label,
headerbar button:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:disabled > label, scrollbar button:disabled > label, check:disabled > label,
radio:disabled > label, calendar.button:disabled > label, messagedialog.csd .dialog-action-area button:disabled > label, button.sidebar-button:disabled > label,
button.flat:disabled > label {
color: inherit; }
.inline-toolbar
button:checked, modelbutton.flat:checked, popover.background checkbutton:checked,
popover.background radiobutton:checked,
button:checked, modelbutton.flat:checked,
.menuitem.button.flat:checked, spinbutton:not(.vertical) button:checked, spinbutton.vertical button:checked, toolbar.osd button:checked, .app-notification button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action),
headerbar button:checked:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked, scrollbar button:checked, check:checked,
radio:checked, calendar.button:checked, messagedialog.csd .dialog-action-area button:checked, button.sidebar-button:checked,
@@ -470,8 +464,7 @@ button {
background-color: alpha(currentColor, 0.3);
color: #FFFFFF; }
.inline-toolbar
button:checked:disabled, modelbutton.flat:checked:disabled, popover.background checkbutton:checked:disabled,
popover.background radiobutton:checked:disabled,
button:checked:disabled, modelbutton.flat:checked:disabled,
.menuitem.button.flat:checked:disabled, spinbutton:not(.vertical) button:checked:disabled, spinbutton.vertical button:checked:disabled, toolbar.osd button:checked:disabled, .app-notification button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action),
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked:disabled, scrollbar button:checked:disabled, check:checked:disabled,
radio:checked:disabled, calendar.button:checked:disabled, messagedialog.csd .dialog-action-area button:checked:disabled, button.sidebar-button:checked:disabled,
@@ -479,8 +472,7 @@ button {
background-color: alpha(currentColor, 0.3);
color: rgba(255, 255, 255, 0.4); }
.inline-toolbar
button:checked:disabled > label, modelbutton.flat:checked:disabled > label, popover.background checkbutton:checked:disabled > label,
popover.background radiobutton:checked:disabled > label,
button:checked:disabled > label, modelbutton.flat:checked:disabled > label,
.menuitem.button.flat:checked:disabled > label, spinbutton:not(.vertical) button:checked:disabled > label, spinbutton.vertical button:checked:disabled > label, toolbar.osd button:checked:disabled > label, .app-notification button:checked:disabled > label, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action) > label,
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:checked:disabled > label, scrollbar button:checked:disabled > label, check:checked:disabled > label,
radio:checked:disabled > label, calendar.button:checked:disabled > label, messagedialog.csd .dialog-action-area button:checked:disabled > label, button.sidebar-button:checked:disabled > label,
@@ -517,24 +509,20 @@ button {
button.text-button.image-button label:first-child {
padding-left: 6px;
padding-right: 2px; }
.inline-toolbar .linked > button, .linked > modelbutton.flat, popover.background .linked > checkbutton,
popover.background .linked > radiobutton,
.inline-toolbar .linked > button, .linked > modelbutton.flat,
.linked > .menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow, scrollbar .linked > button, .linked > check,
.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat, popover.background .linked.vertical > checkbutton,
popover.background .linked.vertical > radiobutton,
.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat,
.linked.vertical > .menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow, scrollbar .linked.vertical > button, .linked.vertical > check,
.linked.vertical > radio, .linked.vertical > calendar.button, messagedialog.csd .dialog-action-area .linked.vertical > button, .linked.vertical > button.sidebar-button, .linked >
button.flat, .linked.vertical >
button.flat {
border-radius: 2px; }
.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat, popover.background .linked > checkbutton.image-button,
popover.background .linked > radiobutton.image-button,
.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat,
.linked > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.image-button, notebook > header tab .linked > button.flat, scrollbar .linked > button.image-button, .linked > check,
.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat, popover.background .linked.vertical > checkbutton.image-button,
popover.background .linked.vertical > radiobutton.image-button,
.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat,
.linked.vertical > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.image-button, notebook > header tab .linked.vertical > button.flat, scrollbar .linked.vertical > button.image-button, .linked.vertical > check,
.linked.vertical > radio, .linked.vertical > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.image-button, .linked.vertical > button.image-button.sidebar-button, .linked.vertical > button.flat.titlebutton, .linked.vertical > .flat.nautilus-circular-button, .linked >
@@ -542,12 +530,10 @@ button {
button.flat.image-button {
-gtk-outline-radius: 100px;
border-radius: 100px; }
.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat, popover.background .linked > checkbutton.text-button.image-button,
popover.background .linked > radiobutton.text-button.image-button,
.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat,
.linked > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button.text-button, spinbutton.vertical .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.text-button.image-button, notebook > header tab .linked > button.flat.text-button, scrollbar .linked > button.text-button.image-button, .linked > check.text-button,
.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat, popover.background .linked.vertical > checkbutton.text-button.image-button,
popover.background .linked.vertical > radiobutton.text-button.image-button,
.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat,
.linked.vertical > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button.text-button, spinbutton.vertical .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.text-button.image-button, notebook > header tab .linked.vertical > button.flat.text-button, scrollbar .linked.vertical > button.text-button.image-button, .linked.vertical > check.text-button,
.linked.vertical > radio.text-button, .linked.vertical > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.text-button.image-button, .linked.vertical > button.text-button.image-button.sidebar-button, .linked.vertical > button.flat.text-button.titlebutton, .linked.vertical > .flat.text-button.nautilus-circular-button, .linked >
@@ -737,74 +723,51 @@ button {
border-radius: 2px; }
/* menu buttons */
modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
modelbutton.flat,
.menuitem.button.flat {
min-height: 28px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
color: inherit; }
modelbutton.flat check, popover.background checkbutton check,
popover.background radiobutton check, modelbutton.flat check:hover, popover.background checkbutton check:hover,
popover.background radiobutton check:hover,
modelbutton.flat check:not(:checked):not(:indeterminate),
modelbutton.flat radio:not(:checked):not(:indeterminate),
.menuitem.button.flat check:not(:checked):not(:indeterminate),
.menuitem.button.flat radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.6); }
modelbutton.flat check, modelbutton.flat check:hover,
modelbutton.flat radio,
popover.background checkbutton radio,
popover.background radiobutton radio,
modelbutton.flat radio:hover,
popover.background checkbutton radio:hover,
popover.background radiobutton radio:hover,
.menuitem.button.flat check,
.menuitem.button.flat check:hover,
.menuitem.button.flat radio,
.menuitem.button.flat radio:hover {
background-image: none; }
modelbutton.flat check:active, popover.background checkbutton check:active,
popover.background radiobutton check:active,
modelbutton.flat check:active,
modelbutton.flat radio:active,
popover.background checkbutton radio:active,
popover.background radiobutton radio:active,
.menuitem.button.flat check:active,
.menuitem.button.flat radio:active {
animation: none; }
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.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.4, 0, 0.2, 1); }
modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
popover.background radiobutton check:last-child,
modelbutton.flat check:last-child,
modelbutton.flat radio:last-child,
popover.background checkbutton radio:last-child,
popover.background radiobutton radio:last-child,
.menuitem.button.flat check:last-child,
.menuitem.button.flat radio:last-child {
margin-left: 8px; }
modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
popover.background radiobutton check:first-child,
margin-left: -8px;
margin-right: -16px; }
modelbutton.flat check:first-child,
modelbutton.flat radio:first-child,
popover.background checkbutton radio:first-child,
popover.background radiobutton radio:first-child,
.menuitem.button.flat check:first-child,
.menuitem.button.flat radio:first-child {
margin-right: 8px; }
margin-left: -16px;
margin-right: -8px; }
modelbutton.flat arrow, popover.background checkbutton arrow,
popover.background radiobutton arrow {
modelbutton.flat arrow {
background: none; }
modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover,
popover.background radiobutton arrow:hover {
modelbutton.flat arrow:hover {
background: none; }
modelbutton.flat arrow.left, popover.background checkbutton arrow.left,
popover.background radiobutton arrow.left {
modelbutton.flat arrow.left {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
modelbutton.flat arrow.right, popover.background checkbutton arrow.right,
popover.background radiobutton arrow.right {
modelbutton.flat arrow.right {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
button.color {
@@ -1619,27 +1582,20 @@ switch {
margin: 8px;
background-color: transparent; }
checkbutton.text-button, radiobutton.text-button {
padding: 2px 0;
checkbutton.text-button,
radiobutton.text-button {
padding: 2px;
outline-offset: 0; }
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
margin-left: 4px; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
margin-right: 4px; }
checkbutton.text-button label:not(:only-child),
radiobutton.text-button label:not(:only-child) {
margin: 0 4px; }
check,
radio {
min-height: 24px;
min-width: 24px;
-gtk-icon-source: none;
margin: -12px -8px;
padding: 12px;
outline-offset: 4px;
color: alpha(currentColor, 0.75); }
check:hover, check:active,
radio:hover,
radio:active {
color: currentColor; }
margin: -12px;
padding: 12px; }
check:checked, check:checked:disabled,
radio:checked,
radio:checked:disabled {
@@ -1652,16 +1608,20 @@ radio {
radio:checked:disabled,
radio:indeterminate:disabled {
color: rgba(255, 64, 129, 0.4); }
check:only-child,
radio:only-child {
margin: -12px; }
row check:not(:checked):not(:indeterminate), row
radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.75); }
row check:not(:checked):not(:indeterminate):hover, row check:not(:checked):not(:indeterminate):active, row
radio:not(:checked):not(:indeterminate):hover, row
radio:not(:checked):not(:indeterminate):active {
color: currentColor; }
menu menuitem check, menu menuitem
radio {
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); }
margin: -16px; }
menu menuitem check:not(:checked):not(:indeterminate), menu menuitem
radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.6); }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
@@ -1676,14 +1636,15 @@ check:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); }
radio {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px;
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
radio {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
radio:checked {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; }
radio:checked:disabled {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; }
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
radio:indeterminate:checked {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
@@ -1694,9 +1655,9 @@ radio {
-gtk-icon-transform: unset; } }
@keyframes check_radio {
from {
-gtk-icon-transform: scale(0); }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
to {
-gtk-icon-transform: unset; } }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } }
@keyframes check_indeterminate {
from {
-gtk-icon-transform: unset; }
@@ -1704,12 +1665,17 @@ radio {
-gtk-icon-transform: scale(0, 1); }
to {
-gtk-icon-transform: unset; } }
modelbutton.flat check:not(:indeterminate):checked,
.menuitem.button.flat check:not(:indeterminate):checked,
check:not(:indeterminate):checked {
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.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.4, 0, 0.2, 1); }
@@ -2523,22 +2489,19 @@ decoration {
.view:selected, iconview:selected, .view text selection, iconview text selection,
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
popover.background radiobutton:selected,
entry selection, modelbutton.flat:selected,
.menuitem.button.flat:selected, row:selected, calendar:selected {
background-color: #42A5F5; }
row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection,
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
popover.background radiobutton:selected,
entry selection, modelbutton.flat:selected,
.menuitem.button.flat:selected, row:selected, calendar:selected {
color: #FFFFFF; }
row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled,
textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled,
entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected,
popover.background radiobutton:disabled:selected,
entry selection:disabled, modelbutton.flat:disabled:selected,
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected {
color: rgba(255, 255, 255, 0.4); }
@@ -2706,6 +2669,16 @@ menubar {
separator {
color: rgba(0, 0, 0, 0.2); }
/***********
* Synapse *
***********/
gtk-3.0/gtk.css
@@ -409,8 +409,7 @@ button {
button:checked:disabled > label {
color: inherit; }
.inline-toolbar
button, modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
button, modelbutton.flat,
.menuitem.button.flat, spinbutton:not(.vertical) button, spinbutton.vertical button, toolbar.osd button, .app-notification button,
.app-notification.frame button, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action),
headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check,
@@ -422,8 +421,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.6); }
.inline-toolbar
button:hover, modelbutton.flat:hover, popover.background checkbutton:hover,
popover.background radiobutton:hover,
button:hover, modelbutton.flat:hover,
.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, toolbar.osd button:hover, .app-notification button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action),
headerbar button:hover:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover,
radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover,
@@ -432,8 +430,7 @@ button {
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.15));
color: rgba(0, 0, 0, 0.8); }
.inline-toolbar
button:active, modelbutton.flat:active, popover.background checkbutton:active,
popover.background radiobutton:active,
button:active, modelbutton.flat:active,
.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, toolbar.osd button:active, .app-notification button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action),
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,
@@ -443,8 +440,7 @@ button {
box-shadow: none;
color: rgba(0, 0, 0, 0.8); }
.inline-toolbar
button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled,
popover.background radiobutton:disabled,
button:disabled, modelbutton.flat:disabled,
.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, toolbar.osd button:disabled, .app-notification button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action),
headerbar button:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled,
radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled,
@@ -453,16 +449,14 @@ button {
background-color: transparent;
color: rgba(0, 0, 0, 0.24); }
.inline-toolbar
button:disabled > label, modelbutton.flat:disabled > label, popover.background checkbutton:disabled > label,
popover.background radiobutton:disabled > label,
button:disabled > label, modelbutton.flat:disabled > label,
.menuitem.button.flat:disabled > label, spinbutton:not(.vertical) button:disabled > label, spinbutton.vertical button:disabled > label, toolbar.osd button:disabled > label, .app-notification button:disabled > label, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action) > label,
headerbar button:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:disabled > label, scrollbar button:disabled > label, check:disabled > label,
radio:disabled > label, calendar.button:disabled > label, messagedialog.csd .dialog-action-area button:disabled > label, button.sidebar-button:disabled > label,
button.flat:disabled > label {
color: inherit; }
.inline-toolbar
button:checked, modelbutton.flat:checked, popover.background checkbutton:checked,
popover.background radiobutton:checked,
button:checked, modelbutton.flat:checked,
.menuitem.button.flat:checked, spinbutton:not(.vertical) button:checked, spinbutton.vertical button:checked, toolbar.osd button:checked, .app-notification button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action),
headerbar button:checked:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked, scrollbar button:checked, check:checked,
radio:checked, calendar.button:checked, messagedialog.csd .dialog-action-area button:checked, button.sidebar-button:checked,
@@ -470,8 +464,7 @@ button {
background-color: alpha(currentColor, 0.3);
color: rgba(0, 0, 0, 0.8); }
.inline-toolbar
button:checked:disabled, modelbutton.flat:checked:disabled, popover.background checkbutton:checked:disabled,
popover.background radiobutton:checked:disabled,
button:checked:disabled, modelbutton.flat:checked:disabled,
.menuitem.button.flat:checked:disabled, spinbutton:not(.vertical) button:checked:disabled, spinbutton.vertical button:checked:disabled, toolbar.osd button:checked:disabled, .app-notification button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action),
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked:disabled, scrollbar button:checked:disabled, check:checked:disabled,
radio:checked:disabled, calendar.button:checked:disabled, messagedialog.csd .dialog-action-area button:checked:disabled, button.sidebar-button:checked:disabled,
@@ -479,8 +472,7 @@ button {
background-color: alpha(currentColor, 0.3);
color: rgba(0, 0, 0, 0.32); }
.inline-toolbar
button:checked:disabled > label, modelbutton.flat:checked:disabled > label, popover.background checkbutton:checked:disabled > label,
popover.background radiobutton:checked:disabled > label,
button:checked:disabled > label, modelbutton.flat:checked:disabled > label,
.menuitem.button.flat:checked:disabled > label, spinbutton:not(.vertical) button:checked:disabled > label, spinbutton.vertical button:checked:disabled > label, toolbar.osd button:checked:disabled > label, .app-notification button:checked:disabled > label, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action) > label,
headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:checked:disabled > label, scrollbar button:checked:disabled > label, check:checked:disabled > label,
radio:checked:disabled > label, calendar.button:checked:disabled > label, messagedialog.csd .dialog-action-area button:checked:disabled > label, button.sidebar-button:checked:disabled > label,
@@ -517,24 +509,20 @@ button {
button.text-button.image-button label:first-child {
padding-left: 6px;
padding-right: 2px; }
.inline-toolbar .linked > button, .linked > modelbutton.flat, popover.background .linked > checkbutton,
popover.background .linked > radiobutton,
.inline-toolbar .linked > button, .linked > modelbutton.flat,
.linked > .menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow, scrollbar .linked > button, .linked > check,
.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat, popover.background .linked.vertical > checkbutton,
popover.background .linked.vertical > radiobutton,
.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat,
.linked.vertical > .menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow, scrollbar .linked.vertical > button, .linked.vertical > check,
.linked.vertical > radio, .linked.vertical > calendar.button, messagedialog.csd .dialog-action-area .linked.vertical > button, .linked.vertical > button.sidebar-button, .linked >
button.flat, .linked.vertical >
button.flat {
border-radius: 2px; }
.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat, popover.background .linked > checkbutton.image-button,
popover.background .linked > radiobutton.image-button,
.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat,
.linked > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.image-button, notebook > header tab .linked > button.flat, scrollbar .linked > button.image-button, .linked > check,
.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat, popover.background .linked.vertical > checkbutton.image-button,
popover.background .linked.vertical > radiobutton.image-button,
.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat,
.linked.vertical > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.image-button, notebook > header tab .linked.vertical > button.flat, scrollbar .linked.vertical > button.image-button, .linked.vertical > check,
.linked.vertical > radio, .linked.vertical > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.image-button, .linked.vertical > button.image-button.sidebar-button, .linked.vertical > button.flat.titlebutton, .linked.vertical > .flat.nautilus-circular-button, .linked >
@@ -542,12 +530,10 @@ button {
button.flat.image-button {
-gtk-outline-radius: 100px;
border-radius: 100px; }
.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat, popover.background .linked > checkbutton.text-button.image-button,
popover.background .linked > radiobutton.text-button.image-button,
.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat,
.linked > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button.text-button, spinbutton.vertical .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.text-button.image-button, notebook > header tab .linked > button.flat.text-button, scrollbar .linked > button.text-button.image-button, .linked > check.text-button,
.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat, popover.background .linked.vertical > checkbutton.text-button.image-button,
popover.background .linked.vertical > radiobutton.text-button.image-button,
.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat,
.linked.vertical > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button.text-button, spinbutton.vertical .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action),
headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.text-button.image-button, notebook > header tab .linked.vertical > button.flat.text-button, scrollbar .linked.vertical > button.text-button.image-button, .linked.vertical > check.text-button,
.linked.vertical > radio.text-button, .linked.vertical > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.text-button.image-button, .linked.vertical > button.text-button.image-button.sidebar-button, .linked.vertical > button.flat.text-button.titlebutton, .linked.vertical > .flat.text-button.nautilus-circular-button, .linked >
@@ -737,74 +723,51 @@ button {
border-radius: 2px; }
/* menu buttons */
modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
modelbutton.flat,
.menuitem.button.flat {
min-height: 28px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
color: inherit; }
modelbutton.flat check, popover.background checkbutton check,
popover.background radiobutton check, modelbutton.flat check:hover, popover.background checkbutton check:hover,
popover.background radiobutton check:hover,
modelbutton.flat check:not(:checked):not(:indeterminate),
modelbutton.flat radio:not(:checked):not(:indeterminate),
.menuitem.button.flat check:not(:checked):not(:indeterminate),
.menuitem.button.flat radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.6); }
modelbutton.flat check, modelbutton.flat check:hover,
modelbutton.flat radio,
popover.background checkbutton radio,
popover.background radiobutton radio,
modelbutton.flat radio:hover,
popover.background checkbutton radio:hover,
popover.background radiobutton radio:hover,
.menuitem.button.flat check,
.menuitem.button.flat check:hover,
.menuitem.button.flat radio,
.menuitem.button.flat radio:hover {
background-image: none; }
modelbutton.flat check:active, popover.background checkbutton check:active,
popover.background radiobutton check:active,
modelbutton.flat check:active,
modelbutton.flat radio:active,
popover.background checkbutton radio:active,
popover.background radiobutton radio:active,
.menuitem.button.flat check:active,
.menuitem.button.flat radio:active {
animation: none; }
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.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.4, 0, 0.2, 1); }
modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
popover.background radiobutton check:last-child,
modelbutton.flat check:last-child,
modelbutton.flat radio:last-child,
popover.background checkbutton radio:last-child,
popover.background radiobutton radio:last-child,
.menuitem.button.flat check:last-child,
.menuitem.button.flat radio:last-child {
margin-left: 8px; }
modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
popover.background radiobutton check:first-child,
margin-left: -8px;
margin-right: -16px; }
modelbutton.flat check:first-child,
modelbutton.flat radio:first-child,
popover.background checkbutton radio:first-child,
popover.background radiobutton radio:first-child,
.menuitem.button.flat check:first-child,
.menuitem.button.flat radio:first-child {
margin-right: 8px; }
margin-left: -16px;
margin-right: -8px; }
modelbutton.flat arrow, popover.background checkbutton arrow,
popover.background radiobutton arrow {
modelbutton.flat arrow {
background: none; }
modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover,
popover.background radiobutton arrow:hover {
modelbutton.flat arrow:hover {
background: none; }
modelbutton.flat arrow.left, popover.background checkbutton arrow.left,
popover.background radiobutton arrow.left {
modelbutton.flat arrow.left {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
modelbutton.flat arrow.right, popover.background checkbutton arrow.right,
popover.background radiobutton arrow.right {
modelbutton.flat arrow.right {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
button.color {
@@ -1619,27 +1582,20 @@ switch {
margin: 8px;
background-color: transparent; }
checkbutton.text-button, radiobutton.text-button {
padding: 2px 0;
checkbutton.text-button,
radiobutton.text-button {
padding: 2px;
outline-offset: 0; }
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
margin-left: 4px; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
margin-right: 4px; }
checkbutton.text-button label:not(:only-child),
radiobutton.text-button label:not(:only-child) {
margin: 0 4px; }
check,
radio {
min-height: 24px;
min-width: 24px;
-gtk-icon-source: none;
margin: -12px -8px;
padding: 12px;
outline-offset: 4px;
color: alpha(currentColor, 0.75); }
check:hover, check:active,
radio:hover,
radio:active {
color: currentColor; }
margin: -12px;
padding: 12px; }
check:checked, check:checked:disabled,
radio:checked,
radio:checked:disabled {
@@ -1652,16 +1608,20 @@ radio {
radio:checked:disabled,
radio:indeterminate:disabled {
color: rgba(255, 64, 129, 0.4); }
check:only-child,
radio:only-child {
margin: -12px; }
row check:not(:checked):not(:indeterminate), row
radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.75); }
row check:not(:checked):not(:indeterminate):hover, row check:not(:checked):not(:indeterminate):active, row
radio:not(:checked):not(:indeterminate):hover, row
radio:not(:checked):not(:indeterminate):active {
color: currentColor; }
menu menuitem check, menu menuitem
radio {
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); }
margin: -16px; }
menu menuitem check:not(:checked):not(:indeterminate), menu menuitem
radio:not(:checked):not(:indeterminate) {
color: alpha(currentColor, 0.6); }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
@@ -1676,14 +1636,15 @@ check:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); }
radio {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px;
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
radio {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
radio:checked {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; }
radio:checked:disabled {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; }
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
radio:indeterminate:checked {
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
@@ -1694,9 +1655,9 @@ radio {
-gtk-icon-transform: unset; } }
@keyframes check_radio {
from {
-gtk-icon-transform: scale(0); }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; }
to {
-gtk-icon-transform: unset; } }
border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } }
@keyframes check_indeterminate {
from {
-gtk-icon-transform: unset; }
@@ -1704,12 +1665,17 @@ radio {
-gtk-icon-transform: scale(0, 1); }
to {
-gtk-icon-transform: unset; } }
modelbutton.flat check:not(:indeterminate):checked,
.menuitem.button.flat check:not(:indeterminate):checked,
check:not(:indeterminate):checked {
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.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.4, 0, 0.2, 1); }
@@ -2523,22 +2489,19 @@ decoration {
.view:selected, iconview:selected, .view text selection, iconview text selection,
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
popover.background radiobutton:selected,
entry selection, modelbutton.flat:selected,
.menuitem.button.flat:selected, row:selected, calendar:selected {
background-color: #42A5F5; }
row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection,
textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection,
entry selection, modelbutton.flat:selected, popover.background checkbutton:selected,
popover.background radiobutton:selected,
entry selection, modelbutton.flat:selected,
.menuitem.button.flat:selected, row:selected, calendar:selected {
color: #FFFFFF; }
row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled,
textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled,
notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled,
entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected,
popover.background radiobutton:disabled:selected,
entry selection:disabled, modelbutton.flat:disabled:selected,
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected {
color: rgba(255, 255, 255, 0.4); }
@@ -2706,6 +2669,16 @@ menubar {
separator {
color: rgba(0, 0, 0, 0.1); }
/***********
* Synapse *
***********/