_libhandy.scss
ASCII text
1// based on: 2// https://gitlab.gnome.org/GNOME/libhandy/-/tree/master/src/themes 3 4/** 5* libhandy 6*/ 7 8@use "../../../theme"; 9@use "../../../theme-color"; 10 11// HdyComboRow 12 13popover.combo { 14padding: 8px 0; 15 16list { 17border-style: none; 18background-color: transparent; 19 20> row { 21min-height: 32px; 22padding: 0 12px; 23 24&:not(:last-child) { 25// border-bottom: 1px solid divider($on-surface); 26} 27} 28} 29 30@each $border in top, bottom { 31overshoot.#{$border} { 32// @include rounded-border($border); 33} 34} 35 36scrollbar.vertical { 37// padding-top: 2px; 38// padding-bottom: 2px; 39 40&:dir(ltr) { 41// @include rounded-border(right); 42} 43 44&:dir(rtl) { 45// @include rounded-border(left); 46} 47} 48} 49 50// HdyExpanderRow 51 52row.expander { 53// padding: 0; 54 55image.expander-row-arrow { 56// @include margin-start(6px); 57} 58} 59 60// HdyKeypad 61 62keypad { 63.digit { 64font-size: 200%; 65font-weight: bold; 66} 67 68.letters { 69font-size: 70%; 70} 71 72.symbol { 73font-size: 160%; 74} 75} 76 77// HdyViewSwitcher 78 79viewswitcher { 80button { 81margin: 0; 82padding: 0; 83border-radius: 0; 84// font-size: 1rem; 85 86// View switcher in a header bar 87headerbar & { 88} 89 90// View switcher button 91> stack > box { 92&.narrow { 93// font-size: 0.75rem; 94// padding-top: 7px; 95// padding-bottom: 5px; 96 97image, 98label { 99padding-left: 8px; 100padding-right: 8px; 101} 102} 103 104&.wide { 105padding: 8px 12px; 106 107label { 108&:dir(ltr) { 109padding-right: 8px; 110} 111 112&:dir(rtl) { 113padding-left: 8px; 114} 115} 116} 117 118label.active { 119// font-weight: bold; 120} 121} 122 123&.needs-attention { 124> stack > box label { 125// @extend %needs-attention; 126} 127 128&:checked > stack > box label { 129// animation: none; 130// background-image: none; 131} 132} 133} 134} 135 136// HdyViewSwitcherBar 137 138viewswitcherbar actionbar > revealer > box { 139// padding: 0; 140} 141 142// Content list 143 144list.content { 145border: 1px solid theme-color.divider(theme-color.$on-surface); 146background-clip: padding-box; 147background-color: theme-color.$surface-z1; 148 149&, 150list { 151// background-color: transparent; 152} 153 154// Nested rows background 155list.nested > row:not(:active) { 156&:not(:hover):not(:selected), 157&:hover:not(.activatable):not(:selected) { 158// background-color: hdymix($bg_color, $base_color, 0.5); 159} 160 161&:hover.activatable:not(:selected) { 162// background-color: hdymix($fg_color, $base_color, 0.95); 163} 164} 165 166> row { 167// Regular rows and expander header rows background 168&:not(.expander):not(:active):not(:hover):not(:selected), 169&:not(.expander):not(:active):hover:not(.activatable):not(:selected), 170&.expander row.header:not(:active):not(:hover):not(:selected), 171&.expander row.header:not(:active):hover:not(.activatable):not(:selected) { 172// background-color: $base_color; 173} 174 175&:not(.expander):not(:active):hover.activatable:not(:selected), 176&.expander row.header:not(:active):hover.activatable:not(:selected) { 177// background-color: hdymix($fg_color, $base_color, 0.95); 178} 179 180&, 181list > row { 182// border-color: hdyalpha($borders_color, 0.7); 183// border-style: solid; 184// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 185} 186 187// Top border 188&:not(:first-child) { 189// border-width: 1px 1px 0; 190border-top: 1px solid theme-color.divider(theme-color.$on-surface); 191} 192 193// Rounded top 194&:first-child, 195&.expander:first-child row.header, 196&.expander:checked, 197&.expander:checked row.header, 198&.expander:checked + row, 199&.expander:checked + row.expander row.header { 200// @include rounded-border(top); 201} 202 203// Bottom border 204&:last-child, 205&.checked-expander-row-previous-sibling, 206&.expander:checked { 207// border-width: 1px; 208} 209 210// Rounded bottom 211&:last-child, 212&.checked-expander-row-previous-sibling, 213&.expander:checked, 214&.expander:not(:checked):last-child row.header, 215&.expander:not(:checked).checked-expander-row-previous-sibling row.header, 216&.expander.empty:checked row.header, 217&.expander list.nested > row:last-child { 218// @include rounded-border(bottom); 219} 220 221// Add space around expanded rows 222&.expander:checked:not(:first-child), 223&.expander:checked + row { 224// margin-top: 6px; 225} 226} 227} 228 229// List button 230 231button.list-button { 232} 233 234// Unified window 235 236window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) { 237// Remove the sheen on headerbar... 238headerbar { 239box-shadow: theme.$shadow-z1; 240 241&.selection-mode { 242// box-shadow: $shadow-z1; 243} 244} 245 246// ...and add it on the window itself 247> decoration-overlay { 248box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar); 249} 250 251&, 252> decoration, 253> decoration-overlay { 254border-radius: theme.$corner-radius; 255} 256} 257