| 1 | /*************** |
| 2 | * Header bars * |
| 3 | ***************/ |
| 4 | %titlebar, |
| 5 | headerbar { |
| 6 | padding: 0 13px; |
| 7 | min-height: 34px; |
| 8 | background: $headerbar_color; |
| 9 | color: $headerbar_fg_color; |
| 10 | border-radius: 0; |
| 11 | &:backdrop { |
| 12 | border-color: $backdrop_borders_color; |
| 13 | // background-image: none; |
| 14 | |
| 15 | transition: $backdrop_transition; |
| 16 | } |
| 17 | |
| 18 | .title { |
| 19 | font-weight: bold; |
| 20 | padding-left: 12px; |
| 21 | padding-right: 12px; |
| 22 | } |
| 23 | |
| 24 | .subtitle { |
| 25 | font-size: smaller; |
| 26 | padding-left: 12px; |
| 27 | padding-right: 12px; |
| 28 | |
| 29 | @extend .dim-label; |
| 30 | } |
| 31 | |
| 32 | entry { min-height: 24px;} |
| 33 | |
| 34 | button { |
| 35 | @include button(normal-header); |
| 36 | min-height: 20px; |
| 37 | margin-top: 5px; |
| 38 | margin-bottom: 5px; |
| 39 | box-shadow: none; |
| 40 | &.image-button{ |
| 41 | padding: 3px 4px; |
| 42 | } |
| 43 | &.suggested-action{ |
| 44 | box-shadow: none; |
| 45 | border: none; |
| 46 | background-image: $suggested_bg_color; |
| 47 | &:disabled, &:disabled:backdrop, &:backdrop { |
| 48 | border: none; |
| 49 | background-image: $suggested_bg_color; |
| 50 | &:hover, |
| 51 | &:active, |
| 52 | &:checked { |
| 53 | border: none; |
| 54 | background-image: $suggested_bg_color; |
| 55 | } |
| 56 | } |
| 57 | |
| 58 | } |
| 59 | |
| 60 | &.appmenu{ |
| 61 | background: transparent; |
| 62 | &:backdrop{background: transparent;} |
| 63 | } |
| 64 | &:hover { |
| 65 | @include button(hover-header, $selected_bg_color, #fff); |
| 66 | } |
| 67 | &:active, |
| 68 | &:checked { |
| 69 | @include button(active, transparentize($selected_bg_color, 0.3), #fff); |
| 70 | } |
| 71 | |
| 72 | &:backdrop, |
| 73 | &:disabled, |
| 74 | &:backdrop:disabled { |
| 75 | @include button(backdrop-header, $main_dark_color, transparentize($headerbar_fg_color, 0.8)); |
| 76 | } |
| 77 | |
| 78 | &:backdrop { |
| 79 | &:hover, |
| 80 | &:active, |
| 81 | &:checked { |
| 82 | @include button(backdrop-header, $backdrop_selected_bg_color, $selected_bg_color); |
| 83 | } |
| 84 | } |
| 85 | |
| 86 | @each $b_type, $b_color in (suggested-action, $cyan), |
| 87 | (destructive-action, $destructive_color) { |
| 88 | &.#{$b_type} { |
| 89 | font-weight: bold; |
| 90 | min-height: 14px; |
| 91 | margin-top: 5px; |
| 92 | margin-bottom: 5px; |
| 93 | border-radius: 4px; |
| 94 | @include button(normal, $b_color, white); |
| 95 | box-shadow: none; |
| 96 | |
| 97 | &:hover { @include button(hover, $b_color, white); } |
| 98 | |
| 99 | &:active { @include button(active, $b_color, white); } |
| 100 | |
| 101 | &:disabled { |
| 102 | @include button(insensitive, $b_color, white); |
| 103 | label {color: transparentize(white,0.5);} |
| 104 | } |
| 105 | |
| 106 | &:backdrop { |
| 107 | @include button(backdrop, $b_color, white); |
| 108 | border-radius: 3px; |
| 109 | } |
| 110 | |
| 111 | &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); } |
| 112 | |
| 113 | } |
| 114 | } |
| 115 | |
| 116 | //Reset style |
| 117 | &.titlebutton { |
| 118 | color: transparent; |
| 119 | box-shadow: none; |
| 120 | border: none; |
| 121 | background-color: transparent; |
| 122 | background-repeat: no-repeat; |
| 123 | &:hover, |
| 124 | &:active, |
| 125 | &:checked, |
| 126 | &:backdrop, |
| 127 | &:backdrop:hover,* { |
| 128 | color: transparent; |
| 129 | box-shadow: none; |
| 130 | background-color: transparent; |
| 131 | } |
| 132 | } |
| 133 | } |
| 134 | %linked-header { |
| 135 | border-radius: 0; |
| 136 | border-right-style: none; |
| 137 | box-shadow: none; |
| 138 | margin: 5px 0px; |
| 139 | min-height: 20px; |
| 140 | &:first-child { |
| 141 | border-top-left-radius: 4px; |
| 142 | border-bottom-left-radius: 4px; |
| 143 | } |
| 144 | |
| 145 | &:last-child { |
| 146 | border-top-right-radius: 4px; |
| 147 | border-bottom-right-radius: 4px; |
| 148 | border-right-style: solid; |
| 149 | } |
| 150 | |
| 151 | &:only-child { |
| 152 | border-radius: 4px; |
| 153 | border-style: solid; |
| 154 | } |
| 155 | } |
| 156 | %linked-button { |
| 157 | @extend %linked-header; |
| 158 | &:active, &:checked { |
| 159 | @include button(active, transparentize($selected_bg_color, 0.3), #fff); |
| 160 | &:backdrop{ |
| 161 | color: $backdrop_selected_fg_color; |
| 162 | label{ |
| 163 | color: $backdrop_selected_fg_color; |
| 164 | } |
| 165 | } |
| 166 | } |
| 167 | } |
| 168 | .linked > button { |
| 169 | @extend %linked-button; |
| 170 | } |
| 171 | .linked > button:hover, |
| 172 | .linked > button:backdrop { @extend %linked-header; } |
| 173 | // End reset style |
| 174 | |
| 175 | .path-bar-box { |
| 176 | .dim-label { |
| 177 | color: transparent; |
| 178 | margin-right: -6px; |
| 179 | } |
| 180 | button { |
| 181 | @extend %linked-button; |
| 182 | &:last-child { |
| 183 | margin-left: -1px; |
| 184 | border-radius: 0px; |
| 185 | &:active, &:checked { |
| 186 | border-radius: 0px 4px 4px 0px; |
| 187 | } |
| 188 | } |
| 189 | &:first-child { |
| 190 | border-radius: 4px 0px 0px 4px; |
| 191 | &:active, &:checked { |
| 192 | border-radius: 4px; |
| 193 | } |
| 194 | } |
| 195 | } |
| 196 | widget > .text-button:last-child{ |
| 197 | border-radius: 0px 4px 4px 0px; |
| 198 | @include button(active, transparentize($selected_bg_color, 0.3), #fff); |
| 199 | &:backdrop, &:backdrop label { |
| 200 | color: $backdrop_selected_fg_color; |
| 201 | } |
| 202 | &:only-child{ |
| 203 | border-radius: 4px; |
| 204 | } |
| 205 | } |
| 206 | } |
| 207 | // Gnome 42 path-bar |
| 208 | .path-buttons-box { |
| 209 | background-color: $bg_color; |
| 210 | border: 1px solid $borders_color; |
| 211 | min-height: 20px; |
| 212 | margin-top: 5px; |
| 213 | margin-bottom: 5px; |
| 214 | @include button(normal-header); |
| 215 | border-radius: 4px 0px 0px 4px; |
| 216 | |
| 217 | .dim-label { |
| 218 | color: transparent; |
| 219 | margin-right: -5px; |
| 220 | } |
| 221 | |
| 222 | //Buttons before current path |
| 223 | button > .horizontal > .dim-label { |
| 224 | color: $headerbar_fg_color; |
| 225 | padding: 3px 12px; |
| 226 | margin: 0; |
| 227 | border-right: 1px solid $borders_color; |
| 228 | } |
| 229 | |
| 230 | button > .horizontal > image.dim-label { |
| 231 | padding: 3px 0px 3px 12px; |
| 232 | border-right: none; |
| 233 | } |
| 234 | |
| 235 | button { |
| 236 | background: transparent; |
| 237 | border: none; |
| 238 | margin: 0; |
| 239 | padding: 0; |
| 240 | } |
| 241 | |
| 242 | .current-dir { |
| 243 | label { padding: 3px 12px; } |
| 244 | |
| 245 | label, image { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } |
| 246 | } |
| 247 | |
| 248 | button.current-dir:only-child { |
| 249 | image { |
| 250 | margin-right: -6px; |
| 251 | padding: 0px 6px 0px 12px; |
| 252 | border-radius: 4px 0px 0px 4px; |
| 253 | } |
| 254 | } |
| 255 | } |
| 256 | |
| 257 | |
| 258 | &.selection-mode { |
| 259 | button { |
| 260 | &:backdrop { |
| 261 | &.flat, & { |
| 262 | &:active, |
| 263 | &:checked { |
| 264 | //@include button(backdrop-active, $selected_bg_color, $selected_fg_color); |
| 265 | label{ |
| 266 | color:$backdrop_selected_bg_color; |
| 267 | } |
| 268 | border-color: $selected_borders_color; |
| 269 | } |
| 270 | } |
| 271 | } |
| 272 | } |
| 273 | |
| 274 | } |
| 275 | |
| 276 | .tiled &, |
| 277 | .maximized & { |
| 278 | &.titlebar { |
| 279 | @if $variant == 'light' { box-shadow: none; } |
| 280 | @else { box-shadow: inset 0 -1px $bottom_highlight; } |
| 281 | } |
| 282 | &:backdrop, & { border-radius: 0; } |
| 283 | } // squared corners when the window is maximized or tiled |
| 284 | |
| 285 | &.default-decoration { |
| 286 | padding: 5px 4px; |
| 287 | min-height: 20px; |
| 288 | |
| 289 | button.titlebutton { |
| 290 | min-height: 20px; |
| 291 | min-width: 20px; |
| 292 | margin: 0; |
| 293 | padding: 0; |
| 294 | } |
| 295 | } |
| 296 | } |
| 297 | |
| 298 | headerbar { |
| 299 | // add vertical margins to common widget on the headerbar to avoid them spanning the whole height |
| 300 | entry, |
| 301 | spinbutton, |
| 302 | separator { |
| 303 | margin-top: 5px; |
| 304 | margin-bottom: 5px; |
| 305 | } |
| 306 | switch { |
| 307 | margin-top: 5px; |
| 308 | margin-bottom: 5px; |
| 309 | } |
| 310 | separator { background: transparent; } |
| 311 | |
| 312 | viewswitcher, switcher { |
| 313 | > box.horizontal { |
| 314 | > button.radio { |
| 315 | image { margin-left: 7px; } |
| 316 | label { margin-right: 7px; } |
| 317 | margin: 0; |
| 318 | padding: 0; |
| 319 | border-radius: 0; |
| 320 | } |
| 321 | } |
| 322 | } |
| 323 | } |
| 324 | |
| 325 | .background:not(.tiled):not(.maximized) .titlebar { |
| 326 | @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; } |
| 327 | @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; } |
| 328 | |
| 329 | |
| 330 | &:backdrop, & { |
| 331 | border-top-left-radius: 4px; |
| 332 | border-top-right-radius: 4px; |
| 333 | } |
| 334 | } |
| 335 | |
| 336 | headerbar { |
| 337 | window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case |
| 338 | window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }} |
| 339 | |
| 340 | window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }} |
| 341 | } |
| 342 | |
| 343 | .titlebar:not(headerbar) { |
| 344 | window.csd > & { |
| 345 | // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases |
| 346 | padding: 0; |
| 347 | background-color: transparent; |
| 348 | background-image: none; |
| 349 | border-style: none; |
| 350 | border-color: transparent; |
| 351 | box-shadow: none; |
| 352 | } |
| 353 | |
| 354 | > separator { |
| 355 | background: $headerbar_color; |
| 356 | } |
| 357 | |
| 358 | @extend %titlebar; |
| 359 | } |
| 360 | |
| 361 | .titlebar{ |
| 362 | @extend %titlebar; |
| 363 | } |