Add libhandy sources for GTK3 themes

This commit is contained in:
Daniel Ruiz de Alegría 2020-09-25 12:42:18 +02:00
parent e3dd7c9f56
commit e639f98d5b
11 changed files with 1572 additions and 0 deletions

View File

@ -4746,6 +4746,332 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover {
background: #2a2e39; }
/***************************
* Check and Radio buttons *
***************************/
row label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none; }
row > box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px; }
row > box.header > box.title {
margin-top: 8px;
margin-bottom: 8px; }
row.expander {
background-color: transparent; }
row.expander list.nested > row {
background-color: alpha(#23252e, 0.5);
border-color: alpha(#0d0e11, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px; }
row.expander image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row.expander:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn); }
row.expander:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none; }
row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn); }
row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn); }
row.expander:checked image.expander-row-arrow:not(:disabled) {
color: #2777ff; }
row.expander image.expander-row-arrow:disabled {
color: #888a8d; }
deck > dimming,
leaflet > dimming {
background: rgba(0, 0, 0, 0.24); }
deck > border,
leaflet > border {
min-width: 1px;
min-height: 1px;
background: #0d0e11; }
deck > shadow,
leaflet > shadow {
min-width: 56px;
min-height: 56px; }
deck > shadow.left,
leaflet > shadow.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.right,
leaflet > shadow.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.up,
leaflet > shadow.up {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.down,
leaflet > shadow.down {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > outline,
leaflet > outline {
min-width: 1px;
min-height: 1px;
background: transparent; }
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold; }
avatar.color1 {
background-image: linear-gradient(#83b6ec, #337fdc);
color: #cfe1f5; }
avatar.color2 {
background-image: linear-gradient(#7ad9f1, #0f9ac8);
color: #caeaf2; }
avatar.color3 {
background-image: linear-gradient(#8de6b1, #29ae74);
color: #cef8d8; }
avatar.color4 {
background-image: linear-gradient(#b5e98a, #6ab85b);
color: #e6f9d7; }
avatar.color5 {
background-image: linear-gradient(#f8e359, #d29d09);
color: #f9f4e1; }
avatar.color6 {
background-image: linear-gradient(#ffcb62, #d68400);
color: #ffead1; }
avatar.color7 {
background-image: linear-gradient(#ffa95a, #ed5b00);
color: #ffe5c5; }
avatar.color8 {
background-image: linear-gradient(#f78773, #e62d42);
color: #f8d2ce; }
avatar.color9 {
background-image: linear-gradient(#e973ab, #e33b6a);
color: #fac7de; }
avatar.color10 {
background-image: linear-gradient(#cb78d4, #9945b5);
color: #e7c2e8; }
avatar.color11 {
background-image: linear-gradient(#9e91e8, #7a59ca);
color: #d5d2f5; }
avatar.color12 {
background-image: linear-gradient(#e3cf9c, #b08952);
color: #f2eade; }
avatar.color13 {
background-image: linear-gradient(#be916d, #785336);
color: #e5d6ca; }
avatar.color14 {
background-image: linear-gradient(#c0bfbc, #6e6d71);
color: #d8d7d3; }
avatar.contrasted {
color: #fff; }
viewswitchertitle viewswitcher {
margin-left: 12px;
margin-right: 12px; }
/***************************
* Check and Radio buttons *
***************************/
popover.combo list {
min-width: 200px; }
window.csd.unified:not(.solid-csd) headerbar {
border-radius: 0; }
.windowhandle, .windowhandle * {
-GtkWidget-window-dragging: true; }
popover.combo {
padding: 0px; }
popover.combo list {
border-style: none;
background-color: transparent; }
popover.combo list > row {
padding: 0px 12px 0px 12px;
min-height: 50px; }
popover.combo list > row:not(:last-child) {
border-bottom: 1px solid alpha(#0d0e11, 0.5); }
popover.combo list > row:first-child {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo list > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo overshoot.top {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo overshoot.bottom {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical {
padding-top: 2px;
padding-bottom: 2px; }
popover.combo scrollbar.vertical:dir(ltr) {
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical:dir(rtl) {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px; }
row.expander {
padding: 0px; }
row.expander image.expander-row-arrow:dir(ltr) {
margin-left: 6px; }
row.expander image.expander-row-arrow:dir(rtl) {
margin-right: 6px; }
keypad .digit {
font-size: 200%;
font-weight: bold; }
keypad .letters {
font-size: 70%; }
keypad .symbol {
font-size: 160%; }
viewswitcher, viewswitcher button {
margin: 0;
padding: 0; }
viewswitcher button {
border-radius: 0;
border-top: 0;
border-bottom: 0;
box-shadow: none;
font-size: 1rem; }
viewswitcher button:not(:checked):not(:hover) {
background: transparent; }
viewswitcher button:not(:only-child):not(:last-child) {
border-right-width: 0px; }
viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
border-left-color: transparent; }
viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent; }
viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: image(lighter(#23252e)); }
viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: shade(#0d0e11, 1.15); }
viewswitcher button:not(only-child):last-child:not(:checked):hover {
border-right-color: shade(#0d0e11, 1.15); }
viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#23252e); }
headerbar viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: linear-gradient(to top, shade(alpha(#23252e, 0.7), 0.99) 2px, alpha(#23252e, 0.7)); }
headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: #0d0e11; }
headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover {
border-right-color: #0d0e11; }
headerbar viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#23252e); }
viewswitcher button > stack > box.narrow {
font-size: 0.75rem;
padding-top: 7px;
padding-bottom: 5px; }
viewswitcher button > stack > box.narrow image,
viewswitcher button > stack > box.narrow label {
padding-left: 8px;
padding-right: 8px; }
viewswitcher button > stack > box.wide {
padding: 8px 12px; }
viewswitcher button > stack > box.wide label:dir(ltr) {
padding-right: 7px; }
viewswitcher button > stack > box.wide label:dir(rtl) {
padding-left: 7px; }
viewswitcher button > stack > box label.active {
font-weight: bold; }
viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label {
animation: none;
background-image: none; }
viewswitcher button.needs-attention > stack > box label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 0px, right 1px; }
viewswitcher button.needs-attention > stack > box label:backdrop {
background-size: 6px 6px, 0 0; }
viewswitcher button.needs-attention > stack > box label:dir(rtl) {
background-position: left 0px, left 1px; }
viewswitcherbar actionbar > revealer > box {
padding: 0; }
list.content,
list.content list {
background-color: transparent; }
list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) {
background-color: mix(#23252e, #272a34, 0.5); }
list.content list.nested > row.activatable:not(:active):hover:not(:selected) {
background-color: mix(#eeeeec, #272a34, 0.95); }
list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
background-color: #272a34; }
list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) {
background-color: mix(#eeeeec, #272a34, 0.95); }
list.content > row,
list.content > row list > row {
border-color: alpha(#0d0e11, 0.7);
border-style: solid;
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
list.content > row:not(:last-child) {
border-width: 1px 1px 0px 1px; }
list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked {
border-width: 1px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row {
margin-top: 6px; }
button.list-button:not(:active):not(:checked):not(:hover) {
background: none;
border: 1px solid alpha(#0d0e11, 0.5);
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar {
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode {
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.065); }
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay {
border-radius: 8px; }
* {
outline-style: solid;
outline-offset: -4px;

View File

@ -4746,6 +4746,332 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover {
background: #2a2e39; }
/***************************
* Check and Radio buttons *
***************************/
row label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none; }
row > box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px; }
row > box.header > box.title {
margin-top: 8px;
margin-bottom: 8px; }
row.expander {
background-color: transparent; }
row.expander list.nested > row {
background-color: alpha(#23252e, 0.5);
border-color: alpha(#0d0e11, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px; }
row.expander image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row.expander:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn); }
row.expander:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none; }
row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn); }
row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn); }
row.expander:checked image.expander-row-arrow:not(:disabled) {
color: #2777ff; }
row.expander image.expander-row-arrow:disabled {
color: #888a8d; }
deck > dimming,
leaflet > dimming {
background: rgba(0, 0, 0, 0.24); }
deck > border,
leaflet > border {
min-width: 1px;
min-height: 1px;
background: #0d0e11; }
deck > shadow,
leaflet > shadow {
min-width: 56px;
min-height: 56px; }
deck > shadow.left,
leaflet > shadow.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.right,
leaflet > shadow.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.up,
leaflet > shadow.up {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.down,
leaflet > shadow.down {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
deck > outline,
leaflet > outline {
min-width: 1px;
min-height: 1px;
background: transparent; }
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold; }
avatar.color1 {
background-image: linear-gradient(#83b6ec, #337fdc);
color: #cfe1f5; }
avatar.color2 {
background-image: linear-gradient(#7ad9f1, #0f9ac8);
color: #caeaf2; }
avatar.color3 {
background-image: linear-gradient(#8de6b1, #29ae74);
color: #cef8d8; }
avatar.color4 {
background-image: linear-gradient(#b5e98a, #6ab85b);
color: #e6f9d7; }
avatar.color5 {
background-image: linear-gradient(#f8e359, #d29d09);
color: #f9f4e1; }
avatar.color6 {
background-image: linear-gradient(#ffcb62, #d68400);
color: #ffead1; }
avatar.color7 {
background-image: linear-gradient(#ffa95a, #ed5b00);
color: #ffe5c5; }
avatar.color8 {
background-image: linear-gradient(#f78773, #e62d42);
color: #f8d2ce; }
avatar.color9 {
background-image: linear-gradient(#e973ab, #e33b6a);
color: #fac7de; }
avatar.color10 {
background-image: linear-gradient(#cb78d4, #9945b5);
color: #e7c2e8; }
avatar.color11 {
background-image: linear-gradient(#9e91e8, #7a59ca);
color: #d5d2f5; }
avatar.color12 {
background-image: linear-gradient(#e3cf9c, #b08952);
color: #f2eade; }
avatar.color13 {
background-image: linear-gradient(#be916d, #785336);
color: #e5d6ca; }
avatar.color14 {
background-image: linear-gradient(#c0bfbc, #6e6d71);
color: #d8d7d3; }
avatar.contrasted {
color: #fff; }
viewswitchertitle viewswitcher {
margin-left: 12px;
margin-right: 12px; }
/***************************
* Check and Radio buttons *
***************************/
popover.combo list {
min-width: 200px; }
window.csd.unified:not(.solid-csd) headerbar {
border-radius: 0; }
.windowhandle, .windowhandle * {
-GtkWidget-window-dragging: true; }
popover.combo {
padding: 0px; }
popover.combo list {
border-style: none;
background-color: transparent; }
popover.combo list > row {
padding: 0px 12px 0px 12px;
min-height: 50px; }
popover.combo list > row:not(:last-child) {
border-bottom: 1px solid alpha(#0d0e11, 0.5); }
popover.combo list > row:first-child {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo list > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo overshoot.top {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo overshoot.bottom {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical {
padding-top: 2px;
padding-bottom: 2px; }
popover.combo scrollbar.vertical:dir(ltr) {
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical:dir(rtl) {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px; }
row.expander {
padding: 0px; }
row.expander image.expander-row-arrow:dir(ltr) {
margin-left: 6px; }
row.expander image.expander-row-arrow:dir(rtl) {
margin-right: 6px; }
keypad .digit {
font-size: 200%;
font-weight: bold; }
keypad .letters {
font-size: 70%; }
keypad .symbol {
font-size: 160%; }
viewswitcher, viewswitcher button {
margin: 0;
padding: 0; }
viewswitcher button {
border-radius: 0;
border-top: 0;
border-bottom: 0;
box-shadow: none;
font-size: 1rem; }
viewswitcher button:not(:checked):not(:hover) {
background: transparent; }
viewswitcher button:not(:only-child):not(:last-child) {
border-right-width: 0px; }
viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
border-left-color: transparent; }
viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent; }
viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: image(lighter(#23252e)); }
viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: shade(#0d0e11, 1.15); }
viewswitcher button:not(only-child):last-child:not(:checked):hover {
border-right-color: shade(#0d0e11, 1.15); }
viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#23252e); }
headerbar viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: linear-gradient(to top, shade(alpha(#23252e, 0.7), 0.99) 2px, alpha(#23252e, 0.7)); }
headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: #0d0e11; }
headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover {
border-right-color: #0d0e11; }
headerbar viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#23252e); }
viewswitcher button > stack > box.narrow {
font-size: 0.75rem;
padding-top: 7px;
padding-bottom: 5px; }
viewswitcher button > stack > box.narrow image,
viewswitcher button > stack > box.narrow label {
padding-left: 8px;
padding-right: 8px; }
viewswitcher button > stack > box.wide {
padding: 8px 12px; }
viewswitcher button > stack > box.wide label:dir(ltr) {
padding-right: 7px; }
viewswitcher button > stack > box.wide label:dir(rtl) {
padding-left: 7px; }
viewswitcher button > stack > box label.active {
font-weight: bold; }
viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label {
animation: none;
background-image: none; }
viewswitcher button.needs-attention > stack > box label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 0px, right 1px; }
viewswitcher button.needs-attention > stack > box label:backdrop {
background-size: 6px 6px, 0 0; }
viewswitcher button.needs-attention > stack > box label:dir(rtl) {
background-position: left 0px, left 1px; }
viewswitcherbar actionbar > revealer > box {
padding: 0; }
list.content,
list.content list {
background-color: transparent; }
list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) {
background-color: mix(#23252e, #272a34, 0.5); }
list.content list.nested > row.activatable:not(:active):hover:not(:selected) {
background-color: mix(#eeeeec, #272a34, 0.95); }
list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
background-color: #272a34; }
list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) {
background-color: mix(#eeeeec, #272a34, 0.95); }
list.content > row,
list.content > row list > row {
border-color: alpha(#0d0e11, 0.7);
border-style: solid;
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
list.content > row:not(:last-child) {
border-width: 1px 1px 0px 1px; }
list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked {
border-width: 1px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row {
margin-top: 6px; }
button.list-button:not(:active):not(:checked):not(:hover) {
background: none;
border: 1px solid alpha(#0d0e11, 0.5);
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar {
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode {
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.065); }
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay {
border-radius: 8px; }
* {
outline-style: solid;
outline-offset: -4px;

View File

@ -4768,6 +4768,332 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover {
background: white; }
/***************************
* Check and Radio buttons *
***************************/
row label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none; }
row > box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px; }
row > box.header > box.title {
margin-top: 8px;
margin-bottom: 8px; }
row.expander {
background-color: transparent; }
row.expander list.nested > row {
background-color: alpha(#ffffff, 0.5);
border-color: alpha(#d9d9d9, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px; }
row.expander image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row.expander:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn); }
row.expander:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none; }
row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn); }
row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn); }
row.expander:checked image.expander-row-arrow:not(:disabled) {
color: #2777ff; }
row.expander image.expander-row-arrow:disabled {
color: #aeb0b6; }
deck > dimming,
leaflet > dimming {
background: rgba(0, 0, 0, 0.12); }
deck > border,
leaflet > border {
min-width: 1px;
min-height: 1px;
background: #d9d9d9; }
deck > shadow,
leaflet > shadow {
min-width: 56px;
min-height: 56px; }
deck > shadow.left,
leaflet > shadow.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.right,
leaflet > shadow.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.up,
leaflet > shadow.up {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
deck > shadow.down,
leaflet > shadow.down {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
deck > outline,
leaflet > outline {
min-width: 1px;
min-height: 1px;
background: transparent; }
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold; }
avatar.color1 {
background-image: linear-gradient(#83b6ec, #337fdc);
color: #cfe1f5; }
avatar.color2 {
background-image: linear-gradient(#7ad9f1, #0f9ac8);
color: #caeaf2; }
avatar.color3 {
background-image: linear-gradient(#8de6b1, #29ae74);
color: #cef8d8; }
avatar.color4 {
background-image: linear-gradient(#b5e98a, #6ab85b);
color: #e6f9d7; }
avatar.color5 {
background-image: linear-gradient(#f8e359, #d29d09);
color: #f9f4e1; }
avatar.color6 {
background-image: linear-gradient(#ffcb62, #d68400);
color: #ffead1; }
avatar.color7 {
background-image: linear-gradient(#ffa95a, #ed5b00);
color: #ffe5c5; }
avatar.color8 {
background-image: linear-gradient(#f78773, #e62d42);
color: #f8d2ce; }
avatar.color9 {
background-image: linear-gradient(#e973ab, #e33b6a);
color: #fac7de; }
avatar.color10 {
background-image: linear-gradient(#cb78d4, #9945b5);
color: #e7c2e8; }
avatar.color11 {
background-image: linear-gradient(#9e91e8, #7a59ca);
color: #d5d2f5; }
avatar.color12 {
background-image: linear-gradient(#e3cf9c, #b08952);
color: #f2eade; }
avatar.color13 {
background-image: linear-gradient(#be916d, #785336);
color: #e5d6ca; }
avatar.color14 {
background-image: linear-gradient(#c0bfbc, #6e6d71);
color: #d8d7d3; }
avatar.contrasted {
color: #fff; }
viewswitchertitle viewswitcher {
margin-left: 12px;
margin-right: 12px; }
/***************************
* Check and Radio buttons *
***************************/
popover.combo list {
min-width: 200px; }
window.csd.unified:not(.solid-csd) headerbar {
border-radius: 0; }
.windowhandle, .windowhandle * {
-GtkWidget-window-dragging: true; }
popover.combo {
padding: 0px; }
popover.combo list {
border-style: none;
background-color: transparent; }
popover.combo list > row {
padding: 0px 12px 0px 12px;
min-height: 50px; }
popover.combo list > row:not(:last-child) {
border-bottom: 1px solid alpha(#d9d9d9, 0.5); }
popover.combo list > row:first-child {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo list > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo overshoot.top {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
popover.combo overshoot.bottom {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical {
padding-top: 2px;
padding-bottom: 2px; }
popover.combo scrollbar.vertical:dir(ltr) {
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
popover.combo scrollbar.vertical:dir(rtl) {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px; }
row.expander {
padding: 0px; }
row.expander image.expander-row-arrow:dir(ltr) {
margin-left: 6px; }
row.expander image.expander-row-arrow:dir(rtl) {
margin-right: 6px; }
keypad .digit {
font-size: 200%;
font-weight: bold; }
keypad .letters {
font-size: 70%; }
keypad .symbol {
font-size: 160%; }
viewswitcher, viewswitcher button {
margin: 0;
padding: 0; }
viewswitcher button {
border-radius: 0;
border-top: 0;
border-bottom: 0;
box-shadow: none;
font-size: 1rem; }
viewswitcher button:not(:checked):not(:hover) {
background: transparent; }
viewswitcher button:not(:only-child):not(:last-child) {
border-right-width: 0px; }
viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
border-left-color: transparent; }
viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent; }
viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: image(lighter(#ffffff)); }
viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: shade(#d9d9d9, 1.15); }
viewswitcher button:not(only-child):last-child:not(:checked):hover {
border-right-color: shade(#d9d9d9, 1.15); }
viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#ffffff); }
headerbar viewswitcher button:not(:checked):hover:not(:backdrop) {
background-image: linear-gradient(to top, shade(alpha(#ffffff, 0.7), 0.96) 2px, alpha(#ffffff, 0.7)); }
headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: #d9d9d9; }
headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover {
border-right-color: #d9d9d9; }
headerbar viewswitcher button:not(:checked):hover:backdrop {
background-image: image(#ffffff); }
viewswitcher button > stack > box.narrow {
font-size: 0.75rem;
padding-top: 7px;
padding-bottom: 5px; }
viewswitcher button > stack > box.narrow image,
viewswitcher button > stack > box.narrow label {
padding-left: 8px;
padding-right: 8px; }
viewswitcher button > stack > box.wide {
padding: 8px 12px; }
viewswitcher button > stack > box.wide label:dir(ltr) {
padding-right: 7px; }
viewswitcher button > stack > box.wide label:dir(rtl) {
padding-left: 7px; }
viewswitcher button > stack > box label.active {
font-weight: bold; }
viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label {
animation: none;
background-image: none; }
viewswitcher button.needs-attention > stack > box label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 0px, right 1px; }
viewswitcher button.needs-attention > stack > box label:backdrop {
background-size: 6px 6px, 0 0; }
viewswitcher button.needs-attention > stack > box label:dir(rtl) {
background-position: left 0px, left 1px; }
viewswitcherbar actionbar > revealer > box {
padding: 0; }
list.content,
list.content list {
background-color: transparent; }
list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) {
background-color: mix(#ffffff, #fafafa, 0.5); }
list.content list.nested > row.activatable:not(:active):hover:not(:selected) {
background-color: mix(#5c616c, #fafafa, 0.95); }
list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
background-color: #fafafa; }
list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) {
background-color: mix(#5c616c, #fafafa, 0.95); }
list.content > row,
list.content > row list > row {
border-color: alpha(#d9d9d9, 0.7);
border-style: solid;
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
list.content > row:not(:last-child) {
border-width: 1px 1px 0px 1px; }
list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header {
border-top-left-radius: 8px;
-gtk-outline-top-left-radius: 7px;
border-top-right-radius: 8px;
-gtk-outline-top-right-radius: 7px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked {
border-width: 1px; }
list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child {
border-bottom-left-radius: 8px;
-gtk-outline-bottom-left-radius: 7px;
border-bottom-right-radius: 8px;
-gtk-outline-bottom-right-radius: 7px; }
list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row {
margin-top: 6px; }
button.list-button:not(:active):not(:checked):not(:hover) {
background: none;
border: 1px solid alpha(#d9d9d9, 0.5);
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.7); }
window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode {
box-shadow: none; }
window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.34); }
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay {
border-radius: 8px; }
* {
outline-style: solid;
outline-offset: -4px;

View File

@ -5,10 +5,12 @@
// - if you need to inverse a color function use the @if directive to match for dark $variant
$variant: 'dark';
$high-contrast:'false';
@import 'gtk-sass/_colors';
@import 'gtk-sass/upstream/_drawing';
@import 'gtk-sass/upstream/_common';
@import 'gtk-sass/libhandy/Adwaita-base';
@import 'gtk-sass/_common-tweaks';
@import 'gtk-sass/_applications';
@import 'gtk-sass/upstream/_colors-public';

View File

@ -0,0 +1,336 @@
// Include base styling.
@import 'fallback-base';
@import 'shared-base';
// HdyComboRow
popover.combo {
padding: 0px;
list {
border-style: none;
background-color: transparent;
> row {
padding: 0px 12px 0px 12px;
min-height: 50px;
&:not(:last-child) {
border-bottom: 1px solid hdyalpha($borders_color, 0.5)
}
&:first-child {
@include rounded-border(top);
}
&:last-child {
@include rounded-border(bottom);
}
}
}
@each $border in top, bottom {
overshoot.#{$border} {
@include rounded-border($border);
}
}
scrollbar.vertical {
padding-top: 2px;
padding-bottom: 2px;
&:dir(ltr) {
@include rounded-border(right);
}
&:dir(rtl) {
@include rounded-border(left);
}
}
}
// HdyExpanderRow
row.expander {
padding: 0px;
image.expander-row-arrow {
@include margin-start(6px);
}
}
// HdyKeypad
keypad {
.digit {
font-size: 200%;
font-weight: bold;
}
.letters {
font-size: 70%;
}
.symbol {
font-size: 160%;
}
}
// HdyViewSwitcher
viewswitcher {
&, & button {
margin: 0;
padding: 0;
}
button {
border-radius: 0;
border-top: 0;
border-bottom: 0;
box-shadow: none;
font-size: 1rem;
&:not(:checked):not(:hover) {
background: transparent;
}
&:not(:only-child):not(:last-child) {
border-right-width: 0px;
}
&:not(only-child):first-child:not(:checked):not(:hover),
&:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
border-left-color: transparent;
}
&:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent;
}
&:not(:checked):hover:not(:backdrop) {
background-image: image(lighter($bg_color));
}
&:not(only-child):first-child:not(:checked):hover,
&:not(:checked):hover + button:not(:checked):not(:hover),
&:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: shade($borders_color, 1.15);
}
&:not(only-child):last-child:not(:checked):hover {
border-right-color: shade($borders_color, 1.15);
}
&:not(:checked):hover:backdrop {
background-image: image($bg_color);
}
// View switcher in a header bar
headerbar &:not(:checked) {
&:hover:not(:backdrop) {
// Reimplementation of $button_fill from Adwaita. The colors are made
// only 70% visible to avoid the highlight to be too strong.
$c: hdyalpha($bg_color, 0.7);
$button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global;
background-image: $button_fill;
}
&:not(only-child):first-child:hover,
&:hover + button:not(:checked):not(:hover),
&:not(:hover) + button:not(:checked):hover {
border-left-color: $borders_color;
}
&:not(only-child):last-child:hover {
border-right-color: $borders_color;
}
&:hover:backdrop {
background-image: image($bg_color);
}
}
// View switcher button
> stack > box {
&.narrow {
font-size: 0.75rem;
padding-top: 7px;
padding-bottom: 5px;
image,
label {
padding-left: 8px;
padding-right: 8px;
}
}
&.wide {
padding: 8px 12px;
label {
&:dir(ltr) {
padding-right: 7px;
}
&:dir(rtl) {
padding-left: 7px;
}
}
}
label.active {
font-weight: bold;
}
}
&.needs-attention {
&:active > stack > box label,
&:checked > stack > box label {
animation: none;
background-image: none;
}
> stack > box label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 0px, right 1px;
&:backdrop {
background-size: 6px 6px, 0 0;
}
&:dir(rtl) {
background-position: left 0px, left 1px;
}
}
}
}
}
// HdyViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
padding: 0;
}
// Content list
list.content {
&,
list {
background-color: transparent;
}
// Nested rows background
list.nested > row:not(:active) {
&:not(:hover):not(:selected),
&:hover:not(.activatable):not(:selected) {
background-color: hdymix($bg_color, $base_color, 0.5);
}
&:hover.activatable:not(:selected) {
background-color: hdymix($fg_color, $base_color, 0.95);
}
}
> row {
// Regular rows and expander header rows background
&:not(.expander):not(:active):not(:hover):not(:selected),
&:not(.expander):not(:active):hover:not(.activatable):not(:selected),
&.expander row.header:not(:active):not(:hover):not(:selected),
&.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
background-color: $base_color;
}
&:not(.expander):not(:active):hover.activatable:not(:selected),
&.expander row.header:not(:active):hover.activatable:not(:selected) {
background-color: hdymix($fg_color, $base_color, 0.95);
}
&,
list > row {
border-color: hdyalpha($borders_color, 0.7);
border-style: solid;
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
// Top border
&:not(:last-child) {
border-width: 1px 1px 0px 1px;
}
// Rounded top
&:first-child,
&.expander:first-child row.header,
&.expander:checked,
&.expander:checked row.header,
&.expander:checked + row,
&.expander:checked + row.expander row.header {
@include rounded-border(top);
}
// Bottom border
&:last-child,
&.checked-expander-row-previous-sibling,
&.expander:checked {
border-width: 1px;
}
// Rounded bottom
&:last-child,
&.checked-expander-row-previous-sibling,
&.expander:checked,
&.expander:not(:checked):last-child row.header,
&.expander:not(:checked).checked-expander-row-previous-sibling row.header,
&.expander.empty:checked row.header,
&.expander list.nested > row:last-child {
@include rounded-border(bottom);
}
// Add space around expanded rows
&.expander:checked:not(:first-child),
&.expander:checked + row {
margin-top: 6px;
}
}
}
// List button
button.list-button:not(:active):not(:checked):not(:hover) {
background: none;
border: 1px solid hdyalpha($borders_color, 0.5);
box-shadow: none;
}
// Unified window
window.csd.unified:not(.solid-csd):not(.fullscreen) {
// Remove the sheen on headerbar...
headerbar {
box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.7, 0));
&.selection-mode {
box-shadow: none;
}
}
// ...and add it on the window itself
> decoration-overlay {
// Use a white sheen instead of @borders, as it has to be neutral enough
// for any content and not just headerbar background
box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.34, 0.065));
}
&:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) {
&,
> decoration,
> decoration-overlay {
border-radius: 8px;
}
}
}

View File

@ -0,0 +1,66 @@
@import 'drawing';
@function hdyalpha($c, $a) {
@return unquote("alpha(#{$c}, #{$a})");
}
@function hdymix($c1, $c2, $r) {
@return unquote("mix(#{$c1}, #{$c2}, #{$r})");
}
$leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24));
$leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2));
$leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
@if $high_contrast {
$leaflet_border: $borders_color;
$leaflet_outline: transparent;
}
@mixin background-shadow($direction) {
background-image:
linear-gradient($direction,
rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)),
rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px,
rgba(0, 0, 0, 0) 56px),
linear-gradient($direction,
rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)),
rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px,
rgba(0, 0, 0, 0) 24px);
}
// Makes the corners of the given border rounded.
// $border must be top, bottom, left, or right.
@mixin rounded-border($border) {
// The floors (top, bottom) and walls (left, right) of the corners matching
// $border. This is needed to easily form floor-wall pairs regardless of
// whether $border is a floor or a wall.
$corners: (
'top': (('top'), ('left', 'right')),
'bottom': (('bottom'), ('left', 'right')),
'left': (('top', 'bottom'), ('left')),
'right': (('top', 'bottom'), ('right')),
);
@if not map-get($corners, $border) {
@error "Unknown border type: #{$border}";
}
// Loop through the floors and walls of the corners of $border.
@each $floor in nth(map-get($corners, $border), 1) {
@each $wall in nth(map-get($corners, $border), 2) {
border-#{$floor}-#{$wall}-radius: 8px;
-gtk-outline-#{$floor}-#{$wall}-radius: 7px;
}
}
}
@mixin margin-start($margin) {
&:dir(ltr) {
margin-left: $margin;
}
&:dir(rtl) {
margin-right: $margin;
}
}

View File

@ -0,0 +1 @@
../upstream/_drawing.scss

View File

@ -0,0 +1,146 @@
@import 'definitions';
// HdyActionRow
row {
label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none;
}
> box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px;
> box.title {
margin-top: 8px;
margin-bottom: 8px;
}
}
}
// HdyExpanderRow
row.expander {
// Drop transparent background on expander rows to let nested rows handle it,
// avoiding double highlights.
background-color: transparent;
list.nested > row {
background-color: hdyalpha($bg_color, 0.5);
border-color: hdyalpha($borders_color, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px;
}
// HdyExpanderRow arrow rotation
image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
&:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn);
}
&:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none;
&:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn);
}
&:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn);
}
}
&:checked image.expander-row-arrow:not(:disabled) {
color: $selected_bg_color;
}
& image.expander-row-arrow:disabled {
color: $insensitive_fg_color;
}
}
// Shadows
deck,
leaflet {
> dimming {
background: $leaflet_dimming;
}
> border {
min-width: 1px;
min-height: 1px;
background: $leaflet_border;
}
> shadow {
min-width: 56px;
min-height: 56px;
&.left { @include background-shadow(to right); }
&.right { @include background-shadow(to left); }
&.up { @include background-shadow(to bottom); }
&.down { @include background-shadow(to top); }
}
> outline {
min-width: 1px;
min-height: 1px;
background: $leaflet_outline;
}
}
// Avatar
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold;
// The list of colors to generate avatars.
// Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
// There are 8 different colors for avtars in the list if you change the number of them you
// need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
// The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
$avatarcolorlist: (
(#cfe1f5, #83b6ec, #337fdc), // blue
(#caeaf2, #7ad9f1, #0f9ac8), // cyan
(#cef8d8, #8de6b1, #29ae74), // green
(#e6f9d7, #b5e98a, #6ab85b), // lime
(#f9f4e1, #f8e359, #d29d09), // yellow
(#ffead1, #ffcb62, #d68400), // gold
(#ffe5c5, #ffa95a, #ed5b00), // orange
(#f8d2ce, #f78773, #e62d42), // raspberry
(#fac7de, #e973ab, #e33b6a), // magenta
(#e7c2e8, #cb78d4, #9945b5), // purple
(#d5d2f5, #9e91e8, #7a59ca), // violet
(#f2eade, #e3cf9c, #b08952), // beige
(#e5d6ca, #be916d, #785336), // brown
(#d8d7d3, #c0bfbc, #6e6d71), // gray
);
@for $i from 1 through length($avatarcolorlist) {
&.color#{$i} {
$avatarcolor: nth($avatarcolorlist, $i);
background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
color: nth($avatarcolor, 1);
}
}
&.contrasted { color: #fff; }
}
// HdyViewSwitcherTitle
viewswitchertitle viewswitcher {
margin-left: 12px;
margin-right: 12px;
}

View File

@ -0,0 +1,21 @@
@import 'definitions';
// HdyComboRow
popover.combo list {
min-width: 200px;
}
window.csd.unified:not(.solid-csd) {
// Since corners are masked, there's no need for round corners anymore
headerbar {
border-radius: 0;
}
}
.windowhandle {
&, & * {
// This is the most reliable way to enable window dragging
-GtkWidget-window-dragging: true;
}
}

View File

@ -0,0 +1,20 @@
#!/bin/sh
GREEN='\033[0;32m'
YELLOW='\033[0;33m'
RESET='\033[0m'
while read file;
do
echo
echo -e " $GREEN[ * ]$RESET Downloading file $file"
wget https://gitlab.gnome.org/GNOME/libhandy/-/raw/master/src/themes/$file --timestamping --quiet
done <<- EOF
_definitions.scss
_shared-base.scss
_Adwaita-base.scss
_fallback-base.scss
EOF
echo
ln -rsfv ../upstream/_drawing.scss

View File

@ -5,10 +5,12 @@
// - if you need to inverse a color function use the @if directive to match for dark $variant
$variant: 'light';
$high-contrast:'false';
@import 'gtk-sass/_colors';
@import 'gtk-sass/upstream/_drawing';
@import 'gtk-sass/upstream/_common';
@import 'gtk-sass/libhandy/Adwaita-base';
@import 'gtk-sass/_common-tweaks';
@import 'gtk-sass/_applications';
@import 'gtk-sass/upstream/_colors-public';