1/*************************** 2 * Check and Radio buttons * 3 ***************************/ 4/*************** 5 * Base States * 6 ***************/ 7.background { 8 color: #eeeeec; 9 background-color: #23252e; } 10 .background:backdrop { 11 text-shadow: none; 12 -gtk-icon-shadow: none; } 13 14dnd { 15 color: #eeeeec; } 16 17.normal-icons { 18 -gtk-icon-size: 16px; } 19 20.large-icons { 21 -gtk-icon-size: 32px; } 22 23image:disabled { 24 -gtk-icon-filter: opacity(0.5); } 25 26.view, iconview, 27textview > text { 28 color: white; 29 background-color: #272a34; } 30 .view:disabled, iconview:disabled, 31 textview > text:disabled { 32 color: #888a8d; 33 background-color: #242731; } 34 .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, 35 textview > text:selected:focus, 36 textview > text:selected { 37 border-radius: 3px; } 38 39textview:drop(active) { 40 caret-color: #19a187; } 41 42textview > border { 43 background-color: #252831; } 44 45iconview { 46 transition-property: outline, outline-width, outline-offset, outline-color; 47 transition-duration: 300ms; 48 animation-timing-function: ease-in-out; } 49 iconview { 50 outline: 0 solid transparent; 51 outline-offset: 4px; } 52 iconview:focus:focus-visible { 53 outline-color: rgba(115, 118, 128, 0.7); 54 outline-width: 2px; 55 outline-offset: -2px; } 56 iconview:drop(active) { 57 box-shadow: none; } 58 iconview > dndtarget:drop(active) { 59 border-style: solid; 60 border-width: 1px; 61 border-color: #2b2c2f; } 62 63rubberband, .content-view > rubberband, columnview.view > rubberband, 64treeview.view > rubberband, gridview > rubberband, flowbox > rubberband { 65 border: 1px solid #5b5d65; 66 background-color: rgba(91, 93, 101, 0.2); } 67 68flowbox > flowboxchild { 69 padding: 3px; 70 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 71 transition-property: outline, outline-width, outline-offset, outline-color; 72 transition-duration: 300ms; 73 animation-timing-function: ease-in-out; } 74 flowbox > flowboxchild { 75 outline: 0 solid transparent; 76 outline-offset: 4px; } 77 flowbox > flowboxchild:focus:focus-visible { 78 outline-color: rgba(115, 118, 128, 0.7); 79 outline-width: 2px; 80 outline-offset: -2px; } 81 flowbox > flowboxchild:selected { 82 outline-color: rgba(255, 255, 255, 0.3); } 83 84gridview > child { 85 padding: 3px; 86 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 87 transition-property: outline, outline-width, outline-offset, outline-color; 88 transition-duration: 300ms; 89 animation-timing-function: ease-in-out; } 90 gridview > child { 91 outline: 0 solid transparent; 92 outline-offset: 4px; } 93 gridview > child:focus:focus-visible { 94 outline-color: rgba(115, 118, 128, 0.7); 95 outline-width: 2px; 96 outline-offset: -2px; } 97 gridview > child:selected { 98 outline-color: rgba(255, 255, 255, 0.3); } 99 gridview > child box { 100 border-spacing: 8px; 101 margin: 12px; } 102 103coverflow cover { 104 color: white; 105 background-color: #272a34; 106 border: 1px solid black; } 107 108label { 109 transition-property: outline, outline-width, outline-offset, outline-color; 110 transition-duration: 300ms; 111 animation-timing-function: ease-in-out; } 112 label { 113 outline: 0 solid transparent; 114 outline-offset: 4px; } 115 label:focus:focus-visible { 116 outline-color: rgba(115, 118, 128, 0.7); 117 outline-width: 2px; 118 outline-offset: -2px; } 119 label > selection { 120 background-color: #737680; 121 color: #ffffff; } 122 label:disabled { 123 color: #888a8d; } 124 button label:disabled { 125 color: inherit; } 126 label.error { 127 color: #bf1717; } 128 label.error:disabled { 129 color: rgba(191, 23, 23, 0.5); } 130 131.dim-label, .titlebar:not(headerbar) .subtitle, 132headerbar .subtitle, spinbutton.vertical > text > text > placeholder, spinbutton:not(.vertical) > text > placeholder, 133entry > text > placeholder, label.separator { 134 opacity: 0.55; 135 text-shadow: none; } 136 137window.assistant .sidebar { 138 padding: 5px; 139 border-top: 1px solid #0d0e11; } 140 141window.assistant.csd .sidebar { 142 border-top-style: none; } 143 144window.assistant .sidebar > label { 145 padding: 6px 12px; } 146 147window.assistant .sidebar > label.highlight { 148 background-color: #3b3e46; 149 border-radius: 5px; } 150 151window.aboutdialog image.large-icons { 152 -gtk-icon-size: 128px; } 153 154.osd .scale-popup, .app-notification, .osd popover.background > arrow, 155.osd popover.background > contents, popover.background.touch-selection > arrow, 156popover.background.touch-selection > contents, popover.background.magnifier > arrow, 157popover.background.magnifier > contents, 158.osd { 159 color: white; 160 border: none; 161 background-color: #303340; 162 background-clip: padding-box; 163 -gtk-icon-shadow: 0 1px black; } 164 165/********************* 166 * Spinner Animation * 167 *********************/ 168@keyframes spin { 169 to { 170 transform: rotate(1turn); } } 171 172spinner { 173 background: none; 174 opacity: 0; 175 -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } 176 spinner:checked { 177 opacity: 1; 178 animation: spin 1s linear infinite; } 179 spinner:checked:disabled { 180 opacity: 0.5; } 181 182/********************** 183 * General Typography * 184 **********************/ 185.large-title { 186 font-weight: 300; 187 font-size: 24pt; } 188 189.title-1 { 190 font-weight: 800; 191 font-size: 20pt; } 192 193.title-2 { 194 font-weight: 800; 195 font-size: 15pt; } 196 197.title-3 { 198 font-weight: 700; 199 font-size: 15pt; } 200 201.title-4 { 202 font-weight: 700; 203 font-size: 13pt; } 204 205.heading { 206 font-weight: 700; 207 font-size: 11pt; } 208 209.body { 210 font-weight: 400; 211 font-size: 11pt; } 212 213.caption-heading { 214 font-weight: 700; 215 font-size: 9pt; } 216 217.caption { 218 font-weight: 400; 219 font-size: 9pt; } 220 221/**************** 222 * Text Entries * 223 ****************/ 224spinbutton.vertical > text, spinbutton:not(.vertical), 225entry { 226 min-height: 32px; 227 padding-left: 8px; 228 padding-right: 8px; 229 border: 1px solid; 230 border-radius: 4px; 231 border-spacing: 6px; 232 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 233 color: white; 234 border-color: #0d0e11; 235 background-color: #272a34; 236 transition-property: outline, outline-width, outline-offset, outline-color; 237 transition-duration: 300ms; 238 animation-timing-function: ease-in-out; } 239 spinbutton.vertical > text, spinbutton:not(.vertical), 240 entry { 241 outline: 0 solid transparent; 242 outline-offset: 4px; } 243 spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), 244 entry:focus-within { 245 outline-color: rgba(115, 118, 128, 0.7); 246 outline-width: 2px; 247 outline-offset: -2px; } 248 spinbutton.vertical > text > image.left, spinbutton:not(.vertical) > image.left, 249 entry > image.left { 250 margin-right: 6px; } 251 spinbutton.vertical > text > image.right, spinbutton:not(.vertical) > image.right, 252 entry > image.right { 253 margin-left: 6px; } 254 spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > text > block-cursor, 255 entry > text > block-cursor { 256 color: #272a34; 257 background-color: white; } 258 spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), 259 entry.flat:focus-within, 260 entry.flat:backdrop, 261 entry.flat:disabled, 262 entry.flat { 263 min-height: 0; 264 padding: 2px; 265 background-color: transparent; 266 border-color: transparent; 267 border-radius: 0; } 268 spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, 269 entry:focus-within > placeholder { 270 opacity: 0; 271 /* We hide placeholders on focus */ } 272 spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), 273 entry:disabled { 274 color: #888a8d; 275 border-color: #0d0e11; 276 background-color: #242731; } 277 spinbutton.vertical > text.error, spinbutton.error:not(.vertical), 278 entry.error { 279 color: #bf1717; 280 transition-property: outline, outline-width, outline-offset, outline-color; 281 transition-duration: 300ms; 282 animation-timing-function: ease-in-out; } 283 spinbutton.vertical > text.error, spinbutton.error:not(.vertical), 284 entry.error { 285 outline: 0 solid transparent; 286 outline-offset: 4px; } 287 spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), 288 entry.error:focus-within { 289 outline-color: rgba(191, 23, 23, 0.5); 290 outline-width: 2px; 291 outline-offset: -2px; } 292 spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, 293 entry.error > selection { 294 background-color: #bf1717; } 295 spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), 296 entry.warning { 297 color: #fd7d00; 298 transition-property: outline, outline-width, outline-offset, outline-color; 299 transition-duration: 300ms; 300 animation-timing-function: ease-in-out; } 301 spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), 302 entry.warning { 303 outline: 0 solid transparent; 304 outline-offset: 4px; } 305 spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), 306 entry.warning:focus-within { 307 outline-color: rgba(253, 125, 0, 0.5); 308 outline-width: 2px; 309 outline-offset: -2px; } 310 spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, 311 entry.warning > selection { 312 background-color: #fd7d00; } 313 spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, 314 entry > image { 315 color: #c6c7c7; } 316 spinbutton.vertical > text > image:hover, spinbutton:not(.vertical) > image:hover, 317 entry > image:hover { 318 color: #eeeeec; } 319 spinbutton.vertical > text > image:active, spinbutton:not(.vertical) > image:active, 320 entry > image:active { 321 color: #737680; } 322 spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.password:not(.vertical) image.caps-lock-indicator, 323 entry.password image.caps-lock-indicator { 324 color: #75777c; } 325 spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), 326 entry:drop(active):focus-within, 327 entry:drop(active) { 328 border-color: #19a187; 329 box-shadow: inset 0 0 0 1px #19a187; } 330 .osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry { 331 color: white; 332 border-color: black; 333 background-color: rgba(0, 0, 0, 0.5); 334 background-clip: padding-box; 335 box-shadow: none; 336 -gtk-icon-shadow: 0 1px black; } 337 .osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within { 338 color: white; 339 border-color: #737680; 340 background-color: rgba(0, 0, 0, 0.5); 341 background-clip: padding-box; } 342 .osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { 343 color: #97999f; 344 border-color: black; 345 background-color: rgba(68, 72, 83, 0.5); 346 background-clip: padding-box; } 347 348spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, 349entry > progress { 350 margin-bottom: 2px; } 351 352spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, 353entry progress > trough > progress { 354 background-color: transparent; 355 background-image: none; 356 border-radius: 0; 357 border-width: 0 0 2px; 358 border-color: #737680; 359 border-style: solid; 360 box-shadow: none; } 361 362spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { 363 border-left-color: #19a187; } 364 365spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { 366 border-top-color: #1f222a; } 367 368spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { 369 border-top-color: #1f222a; } 370 371spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), 372spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), 373.linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), 374.linked.vertical > entry + entry:drop(active):not(:only-child) { 375 border-top-color: #19a187; } 376 377spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), 378spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, 379.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, 380spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, 381.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, 382spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, 383.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, 384spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, 385.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, 386spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, 387.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, 388spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, 389.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, 390spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, 391.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, 392spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, 393.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), 394.linked.vertical > entry:drop(active):not(:only-child) + entry, 395.linked.vertical > entry:drop(active):not(:only-child) + button, 396.linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, 397.linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, 398.linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, 399.linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, 400.linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, 401.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { 402 border-top-color: #19a187; } 403 404spinbutton.vertical > text.error, spinbutton.error:not(.vertical), 405entry.error { 406 color: #bf1717; } 407 408treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { 409 background-color: #272a34; 410 transition-property: color, background; } 411 412treeview entry.flat, treeview entry { 413 border-radius: 0; 414 background-image: none; 415 background-color: #272a34; } 416 treeview entry.flat:focus-within, treeview entry:focus-within { 417 border-color: #737680; } 418 419/******************* 420 * Editable Labels * 421 *******************/ 422editablelabel > stack > text { 423 color: white; 424 border-color: #0d0e11; 425 background-color: #272a34; } 426 427/*********** 428 * Buttons * 429 ***********/ 430@keyframes needs_attention { 431 from { 432 background-image: radial-gradient(farthest-side, #9b9da5 0%, rgba(155, 157, 165, 0) 0%); } 433 to { 434 background-image: radial-gradient(farthest-side, #9b9da5 95%, rgba(155, 157, 165, 0)); } } 435 436notebook > header > tabs > arrow, windowcontrols button, 437button { 438 min-height: 24px; 439 min-width: 16px; 440 padding: 4px 9px; 441 border: 1px solid; 442 border-radius: 4px; 443 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 444 color: #eeeeec; 445 outline-color: rgba(115, 118, 128, 0.7); 446 border-color: #0d0e11; 447 background-image: image(#323643); 448 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 449 transition-property: outline, outline-width, outline-offset, outline-color; 450 transition-duration: 300ms; 451 animation-timing-function: ease-in-out; } 452 notebook > header > tabs > arrow, windowcontrols button, 453 button { 454 outline: 0 solid transparent; 455 outline-offset: 4px; } 456 notebook > header > tabs > arrow:focus:focus-visible, 457 button:focus:focus-visible { 458 outline-color: rgba(115, 118, 128, 0.7); 459 outline-width: 2px; 460 outline-offset: -2px; } 461 notebook > header > tabs > arrow:hover, 462 button:hover { 463 color: #eeeeec; 464 border-color: #0d0e11; 465 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 466 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 467 -gtk-icon-filter: brightness(1.2); } 468 notebook > header > tabs > arrow.keyboard-activating, notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, 469 button.keyboard-activating, 470 button:active, 471 button:checked { 472 color: #eeeeec; 473 border-color: #0d0e11; 474 background-image: image(#13151a); 475 box-shadow: none; 476 transition-duration: 50ms; } 477 notebook > header > tabs > arrow:checked:hover, 478 button:checked:hover { 479 color: #eeeeec; 480 border-color: #0d0e11; 481 background-image: image(#0d0e11); 482 box-shadow: none; } 483 notebook > header > tabs > arrow:checked:active, 484 button:checked:active { 485 color: #eeeeec; 486 border-color: #0d0e11; 487 background-image: image(#08090b); 488 box-shadow: none; } 489 notebook > header > tabs > arrow:backdrop, 490 button:backdrop.flat, 491 button:backdrop { 492 color: #888a8d; 493 border-color: #0d0e11; 494 background-image: image(#23252e); 495 box-shadow: none; 496 transition: 200ms ease-out; } 497 notebook > header > tabs > arrow:backdrop:not(:disabled), 498 button:backdrop.flat:not(:disabled), 499 button:backdrop:not(:disabled) { 500 -gtk-icon-filter: none; } 501 notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, 502 button:backdrop.flat:active, 503 button:backdrop.flat:checked, 504 button:backdrop:active, 505 button:backdrop:checked { 506 color: #888a8d; 507 border-color: #0d0e11; 508 background-image: image(#1e2128); 509 box-shadow: none; } 510 notebook > header > tabs > arrow:backdrop:disabled, 511 button:backdrop.flat:disabled, 512 button:backdrop:disabled { 513 color: #43495a; 514 border-color: #0d0e11; 515 background-image: image(#242731); 516 box-shadow: none; } 517 notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, 518 button:backdrop.flat:disabled:active, 519 button:backdrop.flat:disabled:checked, 520 button:backdrop:disabled:active, 521 button:backdrop:disabled:checked { 522 color: #43495a; 523 border-color: #0d0e11; 524 background-image: image(#1e2128); 525 box-shadow: none; } 526 notebook > header > tabs > arrow:disabled, 527 button:disabled { 528 color: #888a8d; 529 border-color: #0d0e11; 530 background-image: image(#242731); 531 -gtk-icon-filter: opacity(0.5); } 532 notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, 533 button:disabled:active, 534 button:disabled:checked { 535 color: #888a8d; 536 border-color: #0d0e11; 537 background-image: image(#1a1c23); 538 box-shadow: none; } 539 button.sidebar-button, notebook > header > tabs > arrow, windowcontrols button, notebook > header > tabs > arrow.flat, 540 button.flat { 541 border-color: transparent; 542 background-color: transparent; 543 background-image: none; 544 box-shadow: none; 545 transition: none; } 546 button.sidebar-button:hover, notebook > header > tabs > arrow:hover, windowcontrols button:hover, 547 button.flat:hover { 548 border-color: transparent; 549 background-image: none; 550 box-shadow: none; 551 background-color: #252831; 552 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 553 transition-duration: 500ms; } 554 button.keyboard-activating.sidebar-button, notebook > header > tabs > arrow.keyboard-activating, windowcontrols button.keyboard-activating, button.sidebar-button:active, notebook > header > tabs > arrow:active, windowcontrols button:active, button.sidebar-button:checked, notebook > header > tabs > arrow:checked, windowcontrols button:checked, 555 button.flat.keyboard-activating, 556 button.flat:active, 557 button.flat:checked { 558 border-color: transparent; 559 background-image: none; 560 box-shadow: none; 561 background-color: #1c1e25; 562 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 563 button.sidebar-button:backdrop, notebook > header > tabs > arrow:backdrop, windowcontrols button:backdrop, button.sidebar-button:disabled, notebook > header > tabs > arrow:disabled, windowcontrols button:disabled, 564 button.flat:backdrop, 565 button.flat:disabled, 566 button.flat:backdrop:disabled { 567 border-color: transparent; 568 background-color: transparent; 569 background-image: none; 570 box-shadow: none; } 571 notebook > header > tabs > arrow.image-button, 572 button.image-button { 573 min-width: 24px; 574 padding-left: 5px; 575 padding-right: 5px; } 576 notebook > header > tabs > arrow.text-button, 577 button.text-button { 578 padding-left: 16px; 579 padding-right: 16px; } 580 notebook > header > tabs > arrow.text-button.image-button, 581 button.text-button.image-button { 582 padding-left: 8px; 583 padding-right: 8px; } 584 notebook > header > tabs > arrow.text-button.image-button label, 585 button.text-button.image-button label { 586 padding-left: 8px; 587 padding-right: 8px; } 588 dropdown:drop(active) button.combo, 589 combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), 590 button:drop(active) { 591 color: #19a187; 592 border-color: #19a187; 593 box-shadow: inset 0 0 0 1px #19a187; } 594 595row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { 596 color: #ffffff; 597 border-color: transparent; } 598 row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { 599 color: #888a8d; } 600 601 602button.osd { 603 min-width: 26px; 604 min-height: 32px; 605 color: white; 606 border-radius: 5px; 607 color: white; 608 outline-color: rgba(115, 118, 128, 0.7); 609 border-color: black; 610 background-color: transparent; 611 background-image: image(#303340); 612 background-clip: padding-box; 613 border: none; 614 box-shadow: none; } 615 616 button.osd.image-button { 617 min-width: 30px; } 618 619 button.osd.image-button:only-child { 620 margin: 4px; 621 border-radius: 50%; 622 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 623 624 button.osd:hover { 625 color: white; 626 border-color: black; 627 background-color: transparent; 628 background-image: image(#1a1c23); 629 background-clip: padding-box; 630 border: none; 631 box-shadow: none; } 632 633 button.osd:active, 634 button.osd:checked { 635 color: white; 636 border-color: black; 637 background-color: transparent; 638 background-image: image(#040405); 639 background-clip: padding-box; 640 box-shadow: none; 641 border: none; 642 box-shadow: none; } 643 644.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { 645 color: white; 646 outline-color: rgba(115, 118, 128, 0.7); 647 border-color: black; 648 background-color: transparent; 649 background-image: image(#303340); 650 background-clip: padding-box; } 651 .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { 652 color: white; 653 border-color: black; 654 background-color: transparent; 655 background-image: image(#1a1c23); 656 background-clip: padding-box; } 657 .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { 658 color: white; 659 border-color: black; 660 background-color: transparent; 661 background-image: image(#040405); 662 background-clip: padding-box; 663 box-shadow: none; } 664 .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { 665 color: #97999f; 666 border-color: black; 667 background-color: transparent; 668 background-image: image(rgba(68, 72, 83, 0.5)); 669 background-clip: padding-box; } 670 .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { 671 border-color: transparent; 672 background-color: transparent; 673 background-image: none; 674 box-shadow: none; 675 box-shadow: none; 676 -gtk-icon-shadow: 0 1px black; } 677 .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { 678 color: white; 679 border-color: black; 680 background-color: transparent; 681 background-image: image(#1a1c23); 682 background-clip: padding-box; } 683 .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { 684 color: #97999f; 685 border-color: black; 686 background-color: transparent; 687 background-image: image(rgba(68, 72, 83, 0.5)); 688 background-clip: padding-box; 689 background-image: none; 690 border-color: transparent; 691 box-shadow: none; } 692 .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { 693 color: white; 694 border-color: black; 695 background-color: transparent; 696 background-image: image(#040405); 697 background-clip: padding-box; 698 box-shadow: none; } 699 700 701button.suggested-action { 702 color: white; 703 outline-color: rgba(255, 255, 255, 0.3); 704 border-color: #43444a; 705 background-image: image(#80838d); 706 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(79, 81, 88, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 707 transition-property: outline, outline-width, outline-offset, outline-color; 708 transition-duration: 300ms; 709 animation-timing-function: ease-in-out; } 710 711 button.suggested-action { 712 outline: 0 solid transparent; 713 outline-offset: 4px; } 714 715 button.suggested-action:focus:focus-visible { 716 outline-color: rgba(255, 255, 255, 0.3); 717 outline-width: 2px; 718 outline-offset: -2px; } 719 720 button.suggested-action.flat { 721 border-color: transparent; 722 background-color: transparent; 723 background-image: none; 724 box-shadow: none; 725 color: #737680; } 726 727 button.suggested-action:hover { 728 color: white; 729 border-color: #4f5158; 730 background-image: linear-gradient(to top, #696c75 20%, #6c6f78 90%); 731 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(79, 81, 88, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 732 733 button.suggested-action:active, 734 button.suggested-action:checked { 735 color: white; 736 border-color: #4f5158; 737 background-image: image(#5d6068); 738 box-shadow: none; } 739 740 button.suggested-action.flat:disabled { 741 border-color: transparent; 742 background-color: transparent; 743 background-image: none; 744 box-shadow: none; 745 color: rgba(115, 118, 128, 0.8); } 746 747 button.suggested-action:disabled { 748 color: #888a8d; 749 border-color: #0d0e11; 750 background-image: image(#242731); } 751 752 button.suggested-action:disabled:active, 753 button.suggested-action:disabled:checked { 754 color: #bdbec1; 755 border-color: #4f5158; 756 background-image: image(#5a5c65); 757 box-shadow: none; } 758 .osd button.suggested-action { 759 color: white; 760 outline-color: rgba(255, 255, 255, 0.3); 761 border-color: black; 762 background-color: transparent; 763 background-image: image(rgba(115, 118, 128, 0.5)); 764 background-clip: padding-box; } 765 .osd button.suggested-action:hover { 766 color: white; 767 border-color: black; 768 background-color: transparent; 769 background-image: image(rgba(115, 118, 128, 0.7)); 770 background-clip: padding-box; } 771 .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { 772 color: white; 773 border-color: black; 774 background-color: transparent; 775 background-image: image(#737680); 776 background-clip: padding-box; 777 box-shadow: none; } 778 .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { 779 color: #97999f; 780 border-color: black; 781 background-color: transparent; 782 background-image: image(rgba(68, 72, 83, 0.5)); 783 background-clip: padding-box; } 784 785 786button.destructive-action { 787 color: white; 788 outline-color: rgba(255, 255, 255, 0.3); 789 border-color: #4b0909; 790 background-image: image(#bd1616); 791 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(98, 12, 12, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 792 transition-property: outline, outline-width, outline-offset, outline-color; 793 transition-duration: 300ms; 794 animation-timing-function: ease-in-out; } 795 796 button.destructive-action { 797 outline: 0 solid transparent; 798 outline-offset: 4px; } 799 800 button.destructive-action:focus:focus-visible { 801 outline-color: rgba(255, 255, 255, 0.3); 802 outline-width: 2px; 803 outline-offset: -2px; } 804 805 button.destructive-action.flat { 806 border-color: transparent; 807 background-color: transparent; 808 background-image: none; 809 box-shadow: none; 810 color: #a61414; } 811 812 button.destructive-action:hover { 813 color: white; 814 border-color: #620c0c; 815 background-image: linear-gradient(to top, #941111 20%, #991212 90%); 816 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(98, 12, 12, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 817 818 button.destructive-action:active, 819 button.destructive-action:checked { 820 color: white; 821 border-color: #620c0c; 822 background-image: image(#7d0f0f); 823 box-shadow: none; } 824 825 button.destructive-action.flat:disabled { 826 border-color: transparent; 827 background-color: transparent; 828 background-image: none; 829 box-shadow: none; 830 color: rgba(166, 20, 20, 0.8); } 831 832 button.destructive-action:disabled { 833 color: #888a8d; 834 border-color: #0d0e11; 835 background-image: image(#242731); } 836 837 button.destructive-action:disabled:active, 838 button.destructive-action:disabled:checked { 839 color: #c9a1a1; 840 border-color: #620c0c; 841 background-image: image(#791314); 842 box-shadow: none; } 843 .osd button.destructive-action { 844 color: white; 845 outline-color: rgba(255, 255, 255, 0.3); 846 border-color: black; 847 background-color: transparent; 848 background-image: image(rgba(166, 20, 20, 0.5)); 849 background-clip: padding-box; } 850 .osd button.destructive-action:hover { 851 color: white; 852 border-color: black; 853 background-color: transparent; 854 background-image: image(rgba(166, 20, 20, 0.7)); 855 background-clip: padding-box; } 856 .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { 857 color: white; 858 border-color: black; 859 background-color: transparent; 860 background-image: image(#a61414); 861 background-clip: padding-box; 862 box-shadow: none; } 863 .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { 864 color: #97999f; 865 border-color: black; 866 background-color: transparent; 867 background-image: image(rgba(68, 72, 83, 0.5)); 868 background-clip: padding-box; } 869 870stackswitcher > button > label { 871 padding: 0 6px; 872 margin: 0 -6px; } 873 874stackswitcher > button > image { 875 padding: 3px 6px; 876 margin: -3px -6px; } 877 878 879button.font separator { 880 background-color: transparent; } 881 882 883button.font > box { 884 border-spacing: 6px; } 885 886 887button.font > box > box > label { 888 font-weight: bold; } 889 890menubutton.circular button, 891button.circular { 892 min-width: 32px; 893 min-height: 32px; 894 padding: 0; 895 border-radius: 9999px; } 896 menubutton.circular button label, 897 button.circular label { 898 padding: 0; } 899 900stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, 901stackswitcher > button.needs-attention > image { 902 animation: needs_attention 150ms ease-in; 903 background-image: radial-gradient(farthest-side, #9b9da5 96%, rgba(155, 157, 165, 0)); 904 background-size: 6px 6px, 6px 6px; 905 background-repeat: no-repeat; 906 background-position: right 3px, right 2px; } 907 stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, 908 stackswitcher > button.needs-attention > image:backdrop { 909 background-size: 6px 6px, 0 0; } 910 stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), 911 stackswitcher > button.needs-attention > image:dir(rtl) { 912 background-position: left 3px, left 2px; } 913 914.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, 915.linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, 916.linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, 917.linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, 918.linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(ltr), 919combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button, 920.linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, 921.linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button, 922.linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button, 923.linked:not(.vertical) > filechooserbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, 924.linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, 925.linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, 926.linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, 927.linked:not(.vertical) > filechooserbutton:dir(ltr):not(:first-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(ltr):not(:first-child) { 928 border-top-left-radius: 0; 929 border-bottom-left-radius: 0; } 930 931.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, 932.linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, 933.linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, 934.linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, 935.linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(rtl), 936combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button, 937.linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, 938.linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button, 939.linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button, 940.linked:not(.vertical) > filechooserbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, 941.linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, 942.linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, 943.linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, 944.linked:not(.vertical) > filechooserbutton:dir(ltr):not(:last-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(ltr):not(:last-child) { 945 border-right-style: none; 946 border-top-right-radius: 0; 947 border-bottom-right-radius: 0; } 948 949.linked.vertical > filechooserbutton > combobox:not(:first-child) > box > button.combo, 950.linked.vertical > appchooserbutton > combobox:not(:first-child) > box > button.combo, 951.linked.vertical > combobox:not(:first-child) > box > button.combo, .linked.vertical > menubutton:not(:first-child) > button, 952.linked.vertical > dropdown:not(:first-child) > button, 953.linked.vertical > colorbutton:not(:first-child) > button, 954.linked.vertical > fontbutton:not(:first-child) > button, 955.linked.vertical > filechooserbutton:not(:first-child) > button, spinbutton.vertical.linked > text:not(:first-child), .linked.vertical > spinbutton:not(:first-child):not(.vertical), .linked.vertical > entry:not(:first-child), .linked.vertical > button:not(:first-child) { 956 border-top-left-radius: 0; 957 border-top-right-radius: 0; } 958 959.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, 960.linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, 961.linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, 962.linked.vertical > dropdown:not(:last-child) > button, 963.linked.vertical > colorbutton:not(:last-child) > button, 964.linked.vertical > fontbutton:not(:last-child) > button, 965.linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), .linked.vertical > button:not(:last-child) { 966 border-bottom-style: none; 967 border-bottom-left-radius: 0; 968 border-bottom-right-radius: 0; } 969 970.scale-popup button:hover, button.link, button.link:hover, button.link:active, button.link:checked, popover.menu box.circular-buttons button.circular.image-button.model, 971list > row button.image-button:not(.flat), .toolbar button, modelbutton.flat { 972 background-color: transparent; 973 background-image: none; 974 border-color: transparent; 975 box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); 976 text-shadow: none; 977 -gtk-icon-shadow: none; } 978 979/* menu buttons */ 980modelbutton.flat { 981 min-height: 26px; 982 padding-left: 5px; 983 padding-right: 5px; 984 border-radius: 4px; } 985 modelbutton.flat:hover { 986 background-color: #3b3e46; } 987 modelbutton.flat:disabled { 988 color: #888a8d; } 989 990modelbutton.flat arrow { 991 background: none; 992 min-width: 16px; 993 min-height: 16px; 994 opacity: 0.3; } 995 modelbutton.flat arrow:hover { 996 background: none; } 997 modelbutton.flat arrow.left { 998 -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } 999 modelbutton.flat arrow.right { 1000 -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } 1001 1002/* oldstyle toolbar buttons */ 1003.toolbar button { 1004 margin: 1px; } 1005 .toolbar button:hover { 1006 color: #eeeeec; 1007 border-color: #0d0e11; 1008 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 1009 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 1010 .toolbar button:active { 1011 color: #eeeeec; 1012 border-color: #0d0e11; 1013 background-image: image(#13151a); 1014 box-shadow: none; } 1015 .toolbar button:disabled { 1016 color: #888a8d; 1017 border-color: #0d0e11; 1018 background-image: image(#242731); } 1019 .toolbar button:backdrop { 1020 color: #888a8d; 1021 border-color: #0d0e11; 1022 background-image: image(#23252e); 1023 box-shadow: none; } 1024 .toolbar button:backdrop:disabled { 1025 color: #43495a; 1026 border-color: #0d0e11; 1027 background-image: image(#242731); 1028 box-shadow: none; } 1029 1030button.color { 1031 padding: 4px; } 1032 button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay { 1033 border-radius: 0; } 1034 1035/* list buttons */ 1036/* tone down as per new designs, see issue #1473 */ 1037popover.menu box.circular-buttons button.circular.image-button.model, 1038list > row button.image-button:not(.flat) { 1039 border: 1px solid rgba(13, 14, 17, 0.5); } 1040 popover.menu box.circular-buttons button.circular.image-button.model:hover, 1041 list > row button.image-button:not(.flat):hover { 1042 color: #eeeeec; 1043 border-color: #0d0e11; 1044 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 1045 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 1046 popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.circular-buttons button.circular.image-button.model:checked, 1047 list > row button.image-button:not(.flat):active, 1048 list > row button.image-button:not(.flat):checked { 1049 color: #eeeeec; 1050 border-color: #0d0e11; 1051 background-image: image(#13151a); 1052 box-shadow: none; } 1053 popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, 1054 list > row button.image-button:not(.flat).suggested-action { 1055 color: white; 1056 outline-color: rgba(255, 255, 255, 0.3); 1057 border-color: #43444a; 1058 background-image: image(#80838d); 1059 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(79, 81, 88, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 1060 transition-property: outline, outline-width, outline-offset, outline-color; 1061 transition-duration: 300ms; 1062 animation-timing-function: ease-in-out; } 1063 popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, 1064 list > row button.image-button:not(.flat).suggested-action { 1065 outline: 0 solid transparent; 1066 outline-offset: 4px; } 1067 popover.menu box.circular-buttons button.suggested-action.circular.image-button.model:focus:focus-visible, 1068 list > row button.image-button:not(.flat).suggested-action:focus:focus-visible { 1069 outline-color: rgba(255, 255, 255, 0.3); 1070 outline-width: 2px; 1071 outline-offset: -2px; } 1072 popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, 1073 list > row button.image-button:not(.flat).destructive-action { 1074 color: white; 1075 outline-color: rgba(255, 255, 255, 0.3); 1076 border-color: #4b0909; 1077 background-image: image(#bd1616); 1078 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(98, 12, 12, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 1079 transition-property: outline, outline-width, outline-offset, outline-color; 1080 transition-duration: 300ms; 1081 animation-timing-function: ease-in-out; } 1082 popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, 1083 list > row button.image-button:not(.flat).destructive-action { 1084 outline: 0 solid transparent; 1085 outline-offset: 4px; } 1086 popover.menu box.circular-buttons button.destructive-action.circular.image-button.model:focus:focus-visible, 1087 list > row button.image-button:not(.flat).destructive-action:focus:focus-visible { 1088 outline-color: rgba(255, 255, 255, 0.3); 1089 outline-width: 2px; 1090 outline-offset: -2px; } 1091 1092/********* 1093 * Links * 1094 *********/ 1095button.link, 1096link { 1097 color: #a8aab1; 1098 text-decoration: underline; } 1099 button.link:visited, 1100 link:visited { 1101 color: #8d9099; } 1102 *:selected button.link:visited, *:selected link:visited { 1103 color: #d1d3d6; } 1104 button.link:hover, 1105 link:hover { 1106 color: #c3c4c9; } 1107 *:selected button.link:hover, *:selected link:hover { 1108 color: #f9f9fa; } 1109 button.link:active, 1110 link:active { 1111 color: #a8aab1; } 1112 *:selected button.link:active, *:selected link:active { 1113 color: #eeeeef; } 1114 button.link:disabled, 1115 link:disabled { 1116 color: rgba(173, 173, 173, 0.8); } 1117 button.link:selected, *:selected button.link, 1118 link:selected, *:selected link { 1119 color: #eeeeef; } 1120 1121link { 1122 transition-property: outline, outline-width, outline-offset, outline-color; 1123 transition-duration: 300ms; 1124 animation-timing-function: ease-in-out; } 1125 link { 1126 outline: 0 solid transparent; 1127 outline-offset: 4px; } 1128 link:focus:focus-visible { 1129 outline-color: rgba(115, 118, 128, 0.7); 1130 outline-width: 2px; 1131 outline-offset: -2px; } 1132 1133button.link, button.link:hover, button.link:active, button.link:checked { 1134 text-shadow: none; } 1135 1136button.link > label { 1137 text-decoration: underline; } 1138 1139/***************** 1140 * GtkSpinButton * 1141 *****************/ 1142spinbutton { 1143 font-feature-settings: "tnum"; } 1144 spinbutton:not(.vertical) { 1145 padding: 0; 1146 border-spacing: 0; 1147 /* :not here just to bump specificity above that of the list button styling */ } 1148 .osd spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text { 1149 min-width: 28px; 1150 margin: 0; 1151 background: none; 1152 background-color: transparent; 1153 border: none; 1154 border-radius: 0; 1155 box-shadow: none; 1156 padding: 6px; } 1157 .osd spinbutton:not(.vertical) > text:backdrop:disabled, spinbutton:not(.vertical) > text:backdrop:disabled { 1158 background-color: transparent; } 1159 spinbutton:not(.vertical) > button.image-button.up:not(.flat), 1160 spinbutton:not(.vertical) > button.image-button.down:not(.flat) { 1161 min-height: 16px; 1162 margin: 0; 1163 padding-bottom: 0; 1164 padding-top: 0; 1165 color: #dadada; 1166 background-image: none; 1167 border-style: none none none solid; 1168 border-color: rgba(13, 14, 17, 0.3); 1169 border-radius: 0; 1170 box-shadow: none; } 1171 spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), 1172 spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { 1173 border-style: none solid none none; } 1174 spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, 1175 spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { 1176 color: #eeeeec; 1177 background-color: #181a20; } 1178 spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, 1179 spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { 1180 color: rgba(136, 138, 141, 0.3); 1181 background-color: transparent; } 1182 spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, 1183 spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { 1184 background-color: rgba(0, 0, 0, 0.1); 1185 box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } 1186 spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, 1187 spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { 1188 border-radius: 0 4px 4px 0; } 1189 spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, 1190 spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { 1191 border-radius: 4px 0 0 4px; } 1192 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), 1193 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { 1194 border-color: transparent; 1195 background-color: transparent; 1196 background-image: none; 1197 box-shadow: none; 1198 color: white; 1199 border-style: none none none solid; 1200 border-color: rgba(0, 0, 0, 0.7); 1201 border-radius: 0; 1202 box-shadow: none; 1203 -gtk-icon-shadow: 0 1px black; } 1204 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), 1205 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { 1206 border-style: none solid none none; } 1207 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, 1208 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { 1209 border-color: transparent; 1210 background-color: transparent; 1211 background-image: none; 1212 box-shadow: none; 1213 color: white; 1214 border-color: rgba(0, 0, 0, 0.5); 1215 background-color: #1a1c23; 1216 -gtk-icon-shadow: 0 1px black; 1217 box-shadow: none; } 1218 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, 1219 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { 1220 border-color: transparent; 1221 background-color: transparent; 1222 background-image: none; 1223 box-shadow: none; 1224 color: #97999f; 1225 border-color: rgba(0, 0, 0, 0.5); 1226 -gtk-icon-shadow: none; 1227 box-shadow: none; } 1228 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, 1229 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { 1230 border-radius: 0 4px 4px 0; } 1231 .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, 1232 .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { 1233 border-radius: 4px 0 0 4px; } 1234 spinbutton.vertical:disabled { 1235 color: #888a8d; } 1236 spinbutton.vertical:drop(active) { 1237 border-color: transparent; 1238 box-shadow: none; } 1239 spinbutton.vertical > text { 1240 min-height: 32px; 1241 min-width: 32px; 1242 padding: 0; 1243 border-radius: 0; } 1244 spinbutton.vertical > text > block-cursor { 1245 color: #272a34; 1246 background-color: white; } 1247 spinbutton.vertical > button { 1248 min-height: 32px; 1249 min-width: 32px; 1250 padding: 0; } 1251 spinbutton.vertical > button.up { 1252 border-bottom-style: none; 1253 border-bottom-left-radius: 0; 1254 border-bottom-right-radius: 0; } 1255 spinbutton.vertical > button.down { 1256 border-top-style: none; 1257 border-top-left-radius: 0; 1258 border-top-right-radius: 0; } 1259 .osd spinbutton.vertical > button:first-child { 1260 color: white; 1261 outline-color: rgba(115, 118, 128, 0.7); 1262 border-color: black; 1263 background-color: transparent; 1264 background-image: image(#303340); 1265 background-clip: padding-box; } 1266 .osd spinbutton.vertical > button:first-child:hover { 1267 color: white; 1268 border-color: black; 1269 background-color: transparent; 1270 background-image: image(#1a1c23); 1271 background-clip: padding-box; } 1272 .osd spinbutton.vertical > button:first-child:active { 1273 color: white; 1274 border-color: black; 1275 background-color: transparent; 1276 background-image: image(#040405); 1277 background-clip: padding-box; 1278 box-shadow: none; } 1279 .osd spinbutton.vertical > button:first-child:disabled { 1280 color: #97999f; 1281 border-color: black; 1282 background-color: transparent; 1283 background-image: image(rgba(68, 72, 83, 0.5)); 1284 background-clip: padding-box; } 1285 treeview spinbutton:not(.vertical) { 1286 min-height: 0; 1287 border-style: none; 1288 border-radius: 0; } 1289 treeview spinbutton:not(.vertical) > text { 1290 min-height: 0; 1291 padding: 1px 2px; } 1292 1293/************** 1294 * ComboBoxes * 1295 **************/ 1296dropdown > popover.menu.background > contents { 1297 padding: 0; } 1298 1299dropdown > button > box { 1300 border-spacing: 6px; } 1301 1302dropdown arrow, 1303combobox arrow { 1304 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 1305 min-height: 16px; 1306 min-width: 16px; } 1307 1308dropdown > popover.menu > contents modelbutton, 1309combobox > popover.menu > contents modelbutton { 1310 padding-left: 9px; 1311 padding-right: 9px; } 1312 1313dropdown:drop(active), 1314combobox:drop(active) { 1315 box-shadow: none; } 1316 1317dropdown popover, 1318combobox popover { 1319 margin-top: 6px; 1320 padding: 0; } 1321 dropdown popover listview, 1322 combobox popover listview { 1323 margin: 8px 0; } 1324 dropdown popover listview > row, 1325 combobox popover listview > row { 1326 padding: 8px; } 1327 dropdown popover listview > row:selected, 1328 combobox popover listview > row:selected { 1329 outline-color: rgba(255, 255, 255, 0.3); 1330 color: white; 1331 background-color: #3b3e46; } 1332 dropdown popover .dropdown-searchbar, 1333 combobox popover .dropdown-searchbar { 1334 padding: 6px; 1335 border-bottom: 1px solid #0d0e11; } 1336 1337/************ 1338 * Toolbars * 1339 ************/ 1340searchbar > revealer > box, .toolbar, 1341toolbar { 1342 padding: 4px; 1343 border-spacing: 4px; 1344 background-color: #23252e; } 1345 1346.osd .toolbar, .osd toolbar { 1347 background-color: transparent; } 1348 1349.toolbar.osd, 1350toolbar.osd { 1351 padding: 13px; 1352 border: none; 1353 border-radius: 5px; 1354 background-color: #303340; } 1355 .toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, 1356 toolbar.osd.left, 1357 toolbar.osd.right, 1358 toolbar.osd.top, 1359 toolbar.osd.bottom { 1360 border-radius: 0; } 1361 1362.toolbar.horizontal > separator, 1363toolbar.horizontal > separator { 1364 margin: 4px 0; } 1365 1366.toolbar.vertical > separator, 1367toolbar.vertical > separator { 1368 margin: 0 4px; } 1369 1370searchbar > revealer > box { 1371 padding: 6px; 1372 border-spacing: 6px; 1373 border-width: 0 0 1px; } 1374 1375searchbar > revealer > box { 1376 border-style: solid; 1377 border-color: #0d0e11; 1378 background-color: #1c1e25; } 1379 searchbar > revealer > box:backdrop { 1380 border-color: #0d0e11; 1381 background-color: #1b1d24; 1382 box-shadow: none; 1383 transition: 200ms ease-out; } 1384 1385/************** 1386 * GtkInfoBar * 1387 **************/ 1388infobar > revealer > box { 1389 padding: 8px; 1390 border-spacing: 12px; } 1391 1392infobar.action:hover > revealer > box { 1393 background-color: #1a1a1a; } 1394 1395infobar.info > revealer > box, infobar.question > revealer > box, infobar.warning > revealer > box, infobar.error > revealer > box { 1396 border-bottom: 1px solid #181a20; 1397 background-color: #202020; } 1398 1399infobar .close, 1400searchbar .close { 1401 border-color: transparent; 1402 background-color: transparent; 1403 background-image: none; 1404 box-shadow: none; 1405 min-width: 16px; 1406 min-height: 16px; 1407 padding: 4px; 1408 border-radius: 50%; } 1409 infobar .close:hover, 1410 searchbar .close:hover { 1411 color: #eeeeec; 1412 border-color: #0d0e11; 1413 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 1414 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 1415 1416/***************** 1417 * Title buttons * 1418 *****************/ 1419windowcontrols { 1420 border-spacing: 6px; } 1421 windowcontrols:not(.empty).start:dir(ltr), windowcontrols:not(.empty).end:dir(rtl) { 1422 margin-right: 7px; } 1423 windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(ltr) { 1424 margin-left: 7px; } 1425 windowcontrols button { 1426 border-radius: 9999px; 1427 padding: 6px; 1428 margin: 0 2px; 1429 min-width: 0; 1430 min-height: 0; } 1431 windowcontrols button:hover { 1432 border-color: transparent; 1433 background-image: none; 1434 box-shadow: none; 1435 background-color: #0d0e11; } 1436 windowcontrols button:active, windowcontrols button:checked { 1437 border-color: transparent; 1438 background-image: none; 1439 box-shadow: none; 1440 background-color: black; } 1441 1442/*************** 1443 * Header bars * 1444 ***************/ 1445.titlebar:not(headerbar), 1446headerbar { 1447 padding: 0 6px; 1448 min-height: 46px; 1449 border-width: 0 0 1px; 1450 border-style: solid; 1451 border-color: black; 1452 border-radius: 0; 1453 background: #0d0e11 linear-gradient(to top, #16171d, #1a1c23); 1454 /* Darken switchbuttons for headerbars. issue #1588 */ } 1455 .titlebar:backdrop:not(headerbar), 1456 headerbar:backdrop { 1457 border-color: #0d0e11; 1458 background-color: #23252e; 1459 background-image: none; 1460 transition: 200ms ease-out; } 1461 .titlebar:not(headerbar) .title, 1462 headerbar .title { 1463 padding-left: 12px; 1464 padding-right: 12px; 1465 font-weight: bold; } 1466 .titlebar:not(headerbar) .subtitle, 1467 headerbar .subtitle { 1468 font-size: smaller; 1469 padding-left: 12px; 1470 padding-right: 12px; } 1471 .titlebar:not(headerbar) stackswitcher > button:checked, 1472 .titlebar:not(headerbar) button.toggle:checked, 1473 headerbar stackswitcher > button:checked, 1474 headerbar button.toggle:checked { 1475 background: image(#0f1014); 1476 border-color: #060708; 1477 border-top-color: black; } 1478 .titlebar:not(headerbar) stackswitcher > button:checked:backdrop, 1479 .titlebar:not(headerbar) button.toggle:checked:backdrop, 1480 headerbar stackswitcher > button:checked:backdrop, 1481 headerbar button.toggle:checked:backdrop { 1482 color: #888a8d; 1483 border-color: #0d0e11; 1484 background-image: image(#1e2128); 1485 box-shadow: none; } 1486 .tiled .titlebar:not(headerbar), .tiled-top .titlebar:not(headerbar), .tiled-left .titlebar:not(headerbar), .tiled-right .titlebar:not(headerbar), .tiled-bottom .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .tiled-top headerbar, .tiled-left headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .maximized headerbar, .fullscreen headerbar { 1487 border-radius: 0; } 1488 .default-decoration.titlebar:not(headerbar), 1489 headerbar.default-decoration { 1490 min-height: 28px; 1491 padding: 4px; } 1492 .default-decoration.titlebar:not(headerbar) windowcontrols button, 1493 .default-decoration.titlebar:not(headerbar) windowcontrols menubutton, 1494 headerbar.default-decoration windowcontrols button, 1495 headerbar.default-decoration windowcontrols menubutton { 1496 min-height: 26px; 1497 min-width: 26px; 1498 margin: 0; 1499 padding: 0; } 1500 .default-decoration.titlebar:not(headerbar) windowcontrols menubutton button, 1501 headerbar.default-decoration windowcontrols menubutton button { 1502 min-height: 20px; 1503 min-width: 20px; 1504 margin: 0; 1505 padding: 4px; } 1506 .solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { 1507 margin-left: -1px; 1508 margin-right: -1px; 1509 margin-top: -1px; 1510 border-radius: 0; 1511 box-shadow: none; } 1512 1513headerbar > windowhandle > box, 1514headerbar > windowhandle > box > box.start, 1515headerbar > windowhandle > box > box.end { 1516 border-spacing: 6px; } 1517 1518headerbar entry, 1519headerbar spinbutton, 1520headerbar separator:not(.sidebar), 1521headerbar button, 1522headerbar menubutton { 1523 margin-top: 6px; 1524 margin-bottom: 6px; } 1525 1526headerbar menubutton > button { 1527 margin-top: 0px; 1528 margin-bottom: 0px; } 1529 1530headerbar switch { 1531 margin-top: 10px; 1532 margin-bottom: 10px; } 1533 1534window.csd > .titlebar:not(headerbar) { 1535 padding: 0; 1536 background-color: transparent; 1537 background-image: none; 1538 border-style: none; 1539 border-color: transparent; } 1540 1541.titlebar:not(headerbar) separator { 1542 background-color: #0d0e11; } 1543 1544window.devel headerbar.titlebar { 1545 background: #23252e cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(115, 118, 128, 0.1)), linear-gradient(to top, #13151a 3px, #181a20); } 1546 window.devel headerbar.titlebar:backdrop { 1547 background: #23252e cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#23252e); 1548 /* background-color would flash */ } 1549 1550/************ 1551 * Pathbars * 1552 ************/ 1553pathbar > button.text-button, pathbar > button.image-button, pathbar > button { 1554 padding-left: 4px; 1555 padding-right: 4px; } 1556 1557pathbar > button.text-button.image-button label { 1558 padding-left: 0; 1559 padding-right: 0; } 1560 1561pathbar > button.text-button.image-button label:last-child, pathbar > button label:last-child { 1562 padding-right: 8px; } 1563 1564pathbar > button.text-button.image-button label:first-child, pathbar > button label:first-child { 1565 padding-left: 8px; } 1566 1567pathbar > button image { 1568 padding-left: 4px; 1569 padding-right: 4px; } 1570 1571pathbar > button.slider-button { 1572 padding-left: 0; 1573 padding-right: 0; } 1574 1575/************** 1576 * Tree Views * 1577 **************/ 1578columnview.view, 1579treeview.view { 1580 border-left-color: #4f5159; 1581 border-top-color: #4f5159; 1582 transition-property: outline, outline-width, outline-offset, outline-color; 1583 transition-duration: 300ms; 1584 animation-timing-function: ease-in-out; } 1585 columnview.view, 1586 treeview.view { 1587 outline: 0 solid transparent; 1588 outline-offset: 4px; } 1589 columnview.view:focus:focus-visible, 1590 treeview.view:focus:focus-visible { 1591 outline-color: rgba(115, 118, 128, 0.7); 1592 outline-width: 2px; 1593 outline-offset: -2px; } 1594 columnview.view:selected:focus, columnview.view:selected, 1595 treeview.view:selected:focus, 1596 treeview.view:selected { 1597 border-radius: 0; 1598 outline-color: rgba(255, 255, 255, 0.3); } 1599 columnview.view:disabled, 1600 treeview.view:disabled { 1601 color: #888a8d; } 1602 columnview.view:disabled:selected, 1603 treeview.view:disabled:selected { 1604 color: #abadb3; } 1605 columnview.view:disabled:selected:backdrop, 1606 treeview.view:disabled:selected:backdrop { 1607 color: #90939a; } 1608 columnview.view.separator, 1609 treeview.view.separator { 1610 min-height: 2px; 1611 color: #4f5159; } 1612 columnview.view:backdrop, 1613 treeview.view:backdrop { 1614 border-left-color: #3a3d46; 1615 border-top: #3a3d46; } 1616 columnview.view:drop(active), 1617 treeview.view:drop(active) { 1618 box-shadow: none; } 1619 columnview.view > dndtarget:drop(active), 1620 treeview.view > dndtarget:drop(active) { 1621 border-style: solid none; 1622 border-width: 1px; 1623 border-color: #2b2c2f; } 1624 columnview.view > dndtarget:drop(active).after, 1625 treeview.view > dndtarget:drop(active).after { 1626 border-top-style: none; } 1627 columnview.view > dndtarget:drop(active).before, 1628 treeview.view > dndtarget:drop(active).before { 1629 border-bottom-style: none; } 1630 columnview.view.expander, 1631 treeview.view.expander { 1632 min-width: 16px; 1633 min-height: 16px; 1634 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); 1635 color: #bebfc2; } 1636 columnview.view.expander:dir(rtl), 1637 treeview.view.expander:dir(rtl) { 1638 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } 1639 columnview.view.expander:hover, 1640 treeview.view.expander:hover { 1641 color: white; } 1642 columnview.view.expander:selected, 1643 treeview.view.expander:selected { 1644 color: #d5d6d9; } 1645 columnview.view.expander:selected:hover, 1646 treeview.view.expander:selected:hover { 1647 color: #ffffff; } 1648 columnview.view.expander:checked, 1649 treeview.view.expander:checked { 1650 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1651 columnview.view.progressbar, 1652 treeview.view.progressbar { 1653 background-color: #737680; 1654 background-image: image(#737680); 1655 box-shadow: none; } 1656 columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, 1657 treeview.view.progressbar:selected:focus, 1658 treeview.view.progressbar:selected { 1659 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); 1660 background-image: image(#272a34); } 1661 columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, 1662 treeview.view.progressbar:selected:focus:backdrop, 1663 treeview.view.progressbar:selected:backdrop { 1664 background-color: #292c37; } 1665 columnview.view.trough, 1666 treeview.view.trough { 1667 background-color: rgba(238, 238, 236, 0.1); } 1668 columnview.view.trough:selected:focus, columnview.view.trough:selected, 1669 treeview.view.trough:selected:focus, 1670 treeview.view.trough:selected { 1671 background-color: #5b5d65; } 1672 columnview.view > header > button, 1673 treeview.view > header > button { 1674 color: #8b8c90; 1675 background-color: #272a34; 1676 font-weight: bold; 1677 text-shadow: none; 1678 box-shadow: none; } 1679 columnview.view > header > button:hover, 1680 treeview.view > header > button:hover { 1681 color: #bdbdbe; 1682 box-shadow: none; 1683 transition: none; } 1684 columnview.view > header > button:active, 1685 treeview.view > header > button:active { 1686 color: #eeeeec; 1687 transition: none; } 1688 columnview.view > header > button sort-indicator, 1689 treeview.view > header > button sort-indicator { 1690 min-height: 16px; 1691 min-width: 16px; } 1692 columnview.view > header > button sort-indicator.ascending, 1693 treeview.view > header > button sort-indicator.ascending { 1694 -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1695 columnview.view > header > button sort-indicator.descending, 1696 treeview.view > header > button sort-indicator.descending { 1697 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1698 columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, 1699 columnview.view header.button.dnd:active, 1700 columnview.view header.button.dnd:selected, 1701 columnview.view header.button.dnd:hover, 1702 columnview.view header.button.dnd, 1703 treeview.view button.dnd:active, 1704 treeview.view button.dnd:selected, 1705 treeview.view button.dnd:hover, 1706 treeview.view button.dnd, 1707 treeview.view header.button.dnd:active, 1708 treeview.view header.button.dnd:selected, 1709 treeview.view header.button.dnd:hover, 1710 treeview.view header.button.dnd { 1711 padding: 0 6px; 1712 color: #272a34; 1713 background-image: none; 1714 background-color: #737680; 1715 border-style: none; 1716 border-radius: 0; 1717 box-shadow: inset 0 0 0 1px #272a34; 1718 text-shadow: none; 1719 transition: none; } 1720 columnview.view acceleditor > label, 1721 treeview.view acceleditor > label { 1722 background-color: #737680; } 1723 1724columnview.view > header > button, 1725treeview.view > header > button, columnview.view > header > button:hover, 1726treeview.view > header > button:hover, columnview.view > header > button:active, 1727treeview.view > header > button:active { 1728 padding: 0 6px; 1729 background-image: none; 1730 border-style: none none solid solid; 1731 border-color: #4f5159; 1732 border-radius: 0; 1733 text-shadow: none; } 1734 columnview.view > header > button:disabled, 1735 treeview.view > header > button:disabled { 1736 border-color: #23252e; 1737 background-image: none; } 1738 columnview.view > header > button:last-child, 1739 treeview.view > header > button:last-child { 1740 border-right-style: none; } 1741 1742/*************** 1743 * Popovers * 1744 ***************/ 1745popover.background { 1746 background-color: transparent; 1747 font: initial; } 1748 popover.background > arrow, 1749 popover.background > contents { 1750 background-color: #1f222a; 1751 background-clip: padding-box; 1752 border: 1px solid rgba(0, 0, 0, 0.75); 1753 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } 1754 popover.background:backdrop { 1755 background-color: transparent; } 1756 popover.background > contents { 1757 padding: 8px; 1758 border-radius: 8px; } 1759 popover.background > contents > list, 1760 popover.background > contents > .view, 1761 popover.background > contents > iconview, 1762 popover.background > contents > toolbar { 1763 border-style: none; 1764 background-color: transparent; } 1765 popover.background > contents separator { 1766 background-color: #13151a; 1767 margin: 3px; } 1768 popover.background > contents list separator { 1769 margin: 0; } 1770 .osd popover.background, popover.background.touch-selection, popover.background.magnifier { 1771 background-color: transparent; } 1772 .osd popover.background > arrow, 1773 .osd popover.background > contents, popover.background.touch-selection > arrow, 1774 popover.background.touch-selection > contents, popover.background.magnifier > arrow, 1775 popover.background.magnifier > contents { 1776 border: 1px solid rgba(255, 255, 255, 0.1); 1777 box-shadow: none; } 1778 1779magnifier { 1780 background-color: #272a34; } 1781 1782/********************** 1783 * Popover Base Menus * 1784 **********************/ 1785popover.menu { 1786 padding: 0; } 1787 popover.menu box.inline-buttons { 1788 padding: 0 12px; } 1789 popover.menu box.inline-buttons button.image-button.model { 1790 border-color: transparent; 1791 background-color: transparent; 1792 background-image: none; 1793 box-shadow: none; 1794 min-height: 30px; 1795 min-width: 30px; 1796 padding: 0; 1797 border: none; 1798 outline: none; 1799 transition: none; } 1800 popover.menu box.inline-buttons button.image-button.model:selected { 1801 background: image(#3b3e46); } 1802 popover.menu box.circular-buttons { 1803 padding: 12px 12px 6px; } 1804 popover.menu box.circular-buttons button.circular.image-button.model { 1805 padding: 11px; } 1806 popover.menu box.circular-buttons button.circular.image-button.model:focus { 1807 background-color: #3b3e46; 1808 border-color: #3b3e46; } 1809 popover.menu > arrow, popover.menu.background > contents { 1810 background-color: #1f222a; 1811 padding: 5px; } 1812 popover.menu.background separator { 1813 margin: 6px 0; } 1814 popover.menu accelerator { 1815 color: alpha(currentColor,0.55); } 1816 popover.menu accelerator:dir(ltr) { 1817 margin-left: 12px; } 1818 popover.menu accelerator:dir(rtl) { 1819 margin-right: 12px; } 1820 popover.menu check, 1821 popover.menu radio { 1822 transform: scale(0.8); 1823 border-width: 1.2px; 1824 border-color: transparent; 1825 box-shadow: none; 1826 background-image: image(transparent); 1827 color: white; } 1828 popover.menu check:hover, 1829 popover.menu radio:hover { 1830 transform: scale(0.8); 1831 border-width: 1.2px; 1832 color: white; 1833 box-shadow: none; 1834 background-image: image(transparent); } 1835 popover.menu check:active, 1836 popover.menu radio:active { 1837 transform: scale(0.8); 1838 border-width: 1.2px; 1839 color: white; 1840 box-shadow: none; 1841 background-image: image(transparent); } 1842 popover.menu radio { 1843 border-color: #0d0e11; } 1844 popover.menu radio:active { 1845 border-color: rgba(13, 14, 17, 0.5); } 1846 popover.menu arrow.left, 1847 popover.menu radio.left, 1848 popover.menu check.left { 1849 margin-left: -2px; 1850 margin-right: 6px; } 1851 popover.menu arrow.right, 1852 popover.menu radio.right, 1853 popover.menu check.right { 1854 margin-left: 6px; 1855 margin-right: -2px; } 1856 popover.menu modelbutton { 1857 min-height: 30px; 1858 min-width: 40px; 1859 padding: 0 12px; 1860 border-radius: 5px; } 1861 popover.menu modelbutton:selected { 1862 color: white; 1863 background-color: #3b3e46; } 1864 popover.menu modelbutton:selected:active { 1865 background-color: #040405; } 1866 popover.menu label.title { 1867 font-weight: bold; 1868 padding: 4px 32px; } 1869 1870menubar { 1871 padding: 0px; 1872 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } 1873 menubar > item { 1874 min-height: 16px; 1875 padding: 4px 8px; } 1876 menubar > item:selected { 1877 box-shadow: inset 0 -3px #737680; 1878 color: #a8aab1; } 1879 menubar > item:disabled { 1880 color: #888a8d; 1881 box-shadow: none; } 1882 menubar > item popover.menu.background > contents { 1883 padding: 5px; } 1884 menubar > item popover.menu popover.menu { 1885 padding: 0 0 4px 0; } 1886 menubar > item popover.menu.background popover.menu.background > contents { 1887 margin: 0; 1888 border-radius: 8px; } 1889 1890/************* 1891 * Notebooks * 1892 *************/ 1893notebook { 1894 transition-property: outline, outline-width, outline-offset, outline-color; 1895 transition-duration: 300ms; 1896 animation-timing-function: ease-in-out; } 1897 notebook > header > tabs > tab:checked { 1898 outline: 0 solid transparent; 1899 outline-offset: 4px; } 1900 notebook:focus:focus-visible > header > tabs > tab:checked { 1901 outline-color: rgba(115, 118, 128, 0.7); 1902 outline-width: 2px; 1903 outline-offset: -2px; } 1904 notebook > header { 1905 padding: 1px; 1906 border-color: #0d0e11; 1907 border-width: 1px; 1908 background-color: #1b1d24; } 1909 notebook > header > tabs { 1910 margin: -1px; } 1911 notebook > header.top { 1912 border-bottom-style: solid; } 1913 notebook > header.top > tabs { 1914 margin-bottom: -2px; } 1915 notebook > header.top > tabs > tab:hover { 1916 box-shadow: inset 0 -4px #0d0e11; } 1917 notebook > header.top > tabs > tab:checked { 1918 box-shadow: inset 0 -4px #737680; } 1919 notebook > header.bottom { 1920 border-top-style: solid; } 1921 notebook > header.bottom > tabs { 1922 margin-top: -2px; } 1923 notebook > header.bottom > tabs > tab:hover { 1924 box-shadow: inset 0 4px #0d0e11; } 1925 notebook > header.bottom > tabs > tab:checked { 1926 box-shadow: inset 0 4px #737680; } 1927 notebook > header.left { 1928 border-right-style: solid; } 1929 notebook > header.left > tabs { 1930 margin-right: -2px; } 1931 notebook > header.left > tabs > tab:hover { 1932 box-shadow: inset -4px 0 #0d0e11; } 1933 notebook > header.left > tabs > tab:checked { 1934 box-shadow: inset -4px 0 #737680; } 1935 notebook > header.right { 1936 border-left-style: solid; } 1937 notebook > header.right > tabs { 1938 margin-left: -2px; } 1939 notebook > header.right > tabs > tab:hover { 1940 box-shadow: inset 4px 0 #0d0e11; } 1941 notebook > header.right > tabs > tab:checked { 1942 box-shadow: inset 4px 0 #737680; } 1943 notebook > header.top > tabs > arrow { 1944 border-top-style: none; } 1945 notebook > header.bottom > tabs > arrow { 1946 border-bottom-style: none; } 1947 notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { 1948 margin-left: -5px; 1949 margin-right: -5px; 1950 padding-left: 4px; 1951 padding-right: 4px; } 1952 notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { 1953 -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } 1954 notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { 1955 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 1956 notebook > header.left > tabs > arrow { 1957 border-left-style: none; } 1958 notebook > header.right > tabs > arrow { 1959 border-right-style: none; } 1960 notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { 1961 margin-top: -5px; 1962 margin-bottom: -5px; 1963 padding-top: 4px; 1964 padding-bottom: 4px; } 1965 notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { 1966 -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1967 notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { 1968 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1969 notebook > header > tabs > arrow { 1970 min-height: 16px; 1971 min-width: 16px; 1972 border-radius: 0; } 1973 notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { 1974 background-clip: padding-box; 1975 background-image: none; 1976 background-color: rgba(255, 255, 255, 0.3); 1977 border-color: transparent; 1978 box-shadow: none; } 1979 notebook > header > tabs > arrow:disabled { 1980 border-color: transparent; 1981 background-color: transparent; 1982 background-image: none; 1983 box-shadow: none; } 1984 notebook > header > tabs > tab { 1985 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 1986 min-height: 30px; 1987 min-width: 30px; 1988 padding: 3px 12px; 1989 color: #eeeeec; 1990 font-weight: normal; 1991 border-width: 1px; 1992 border-color: transparent; } 1993 notebook > header > tabs > tab:hover { 1994 color: #eeeeec; 1995 background-color: #121418; } 1996 notebook > header > tabs > tab:hover.reorderable-page { 1997 border-color: rgba(13, 14, 17, 0.3); 1998 background-color: rgba(35, 37, 46, 0.2); } 1999 notebook > header > tabs > tab:not(:checked) { 2000 outline-color: transparent; } 2001 notebook > header > tabs > tab:checked { 2002 color: #eeeeec; } 2003 notebook > header > tabs > tab:checked.reorderable-page { 2004 border-color: rgba(13, 14, 17, 0.5); 2005 background-color: rgba(35, 37, 46, 0.5); } 2006 notebook > header > tabs > tab:checked.reorderable-page:hover { 2007 background-color: rgba(35, 37, 46, 0.7); } 2008 notebook > header > tabs > tab button.flat { 2009 color: alpha(currentColor,0.3); 2010 padding: 0; 2011 margin-top: 4px; 2012 margin-bottom: 4px; 2013 min-width: 20px; 2014 min-height: 20px; } 2015 notebook > header > tabs > tab button.flat:hover { 2016 color: currentColor; } 2017 notebook > header > tabs > tab button.flat:last-child { 2018 margin-left: 4px; 2019 margin-right: -4px; } 2020 notebook > header > tabs > tab button.flat:first-child { 2021 margin-left: -4px; 2022 margin-right: 4px; } 2023 notebook > header.top > tabs, notebook > header.bottom > tabs { 2024 padding-left: 4px; 2025 padding-right: 4px; } 2026 notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { 2027 margin-left: 3px; 2028 margin-right: 3px; } 2029 notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { 2030 margin-left: -1px; } 2031 notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { 2032 margin-right: -1px; } 2033 notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { 2034 margin-left: 4px; 2035 margin-right: 4px; } 2036 notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { 2037 border-style: none solid; } 2038 notebook > header.left > tabs, notebook > header.right > tabs { 2039 padding-top: 4px; 2040 padding-bottom: 4px; } 2041 notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { 2042 margin-top: 3px; 2043 margin-bottom: 3px; } 2044 notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { 2045 margin-top: -1px; } 2046 notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { 2047 margin-bottom: -1px; } 2048 notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { 2049 margin-top: 4px; 2050 margin-bottom: 4px; } 2051 notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { 2052 border-style: solid none; } 2053 notebook > header.top > tabs > tab { 2054 padding-bottom: 4px; } 2055 notebook > header.bottom > tabs > tab { 2056 padding-top: 4px; } 2057 notebook > stack:not(:only-child) { 2058 background-color: #272a34; } 2059 2060/************** 2061 * Scrollbars * 2062 **************/ 2063scrollbar { 2064 background-color: #272a34; 2065 transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 2066 scrollbar.top { 2067 border-bottom: 1px solid #0d0e11; } 2068 scrollbar.bottom { 2069 border-top: 1px solid #0d0e11; } 2070 scrollbar.left { 2071 border-right: 1px solid #0d0e11; } 2072 scrollbar.right { 2073 border-left: 1px solid #0d0e11; } 2074 scrollbar > range > trough > slider { 2075 min-width: 8px; 2076 min-height: 8px; 2077 margin: -1px; 2078 border: 4px solid transparent; 2079 border-radius: 10px; 2080 background-clip: padding-box; 2081 background-color: #41434b; 2082 transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 2083 scrollbar > range > trough > slider:hover { 2084 background-color: #4b4d54; } 2085 scrollbar > range > trough > slider:hover:active { 2086 background-color: #737680; } 2087 scrollbar > range > trough > slider:disabled { 2088 background-color: transparent; } 2089 scrollbar > range.fine-tune > trough > slider { 2090 transition: none; 2091 min-width: 6px; 2092 min-height: 6px; } 2093 scrollbar > range.fine-tune.horizontal > trough > slider { 2094 border-width: 5px 4px; } 2095 scrollbar > range.fine-tune.vertical > trough > slider { 2096 border-width: 4px 5px; } 2097 scrollbar.overlay-indicator:not(.dragging):not(.hovering) { 2098 border-color: transparent; 2099 opacity: 0.4; 2100 background-color: transparent; } 2101 scrollbar.overlay-indicator:not(.dragging):not(.hovering) > range > trough > slider { 2102 margin: 0; 2103 min-width: 3px; 2104 min-height: 3px; 2105 background-color: #eeeeec; 2106 border: 1px solid black; } 2107 scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal > range > trough > slider { 2108 margin: 0 2px; 2109 min-width: 40px; } 2110 scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical > range > trough > slider { 2111 margin: 2px 0; 2112 min-height: 40px; } 2113 scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { 2114 opacity: 0.8; } 2115 scrollbar.horizontal > range > trough > slider { 2116 min-width: 40px; } 2117 scrollbar.vertical > range > trough > slider { 2118 min-height: 40px; } 2119 2120treeview ~ scrollbar.vertical { 2121 border-top: 1px solid #0d0e11; 2122 margin-top: -1px; } 2123 2124/********** 2125 * Switch * 2126 **********/ 2127switch { 2128 font-weight: bold; 2129 font-size: smaller; 2130 border: 1px solid #0d0e11; 2131 border-radius: 14px; 2132 color: #eeeeec; 2133 background-color: #1b1d24; 2134 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 2135 transition-property: outline, outline-width, outline-offset, outline-color; 2136 transition-duration: 300ms; 2137 animation-timing-function: ease-in-out; 2138 /* only show i / o for the accessible theme */ } 2139 switch { 2140 outline: 0 solid transparent; 2141 outline-offset: 4px; } 2142 switch:focus:focus-visible { 2143 outline-color: rgba(115, 118, 128, 0.7); 2144 outline-width: 2px; 2145 outline-offset: 0; } 2146 headerbar switch { 2147 background-color: #0a0a0d; } 2148 switch:checked { 2149 color: #ffffff; 2150 border-color: #2b2c2f; 2151 background-color: #737680; } 2152 switch:disabled { 2153 color: #888a8d; 2154 border-color: #0d0e11; 2155 background-color: #242731; 2156 text-shadow: none; } 2157 switch > slider { 2158 color: #eeeeec; 2159 outline-color: rgba(115, 118, 128, 0.7); 2160 border-color: #0d0e11; 2161 background-image: image(#323643); 2162 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 2163 margin: -1px; 2164 min-width: 24px; 2165 min-height: 24px; 2166 border: 1px solid; 2167 border-color: #0d0e11; 2168 border-radius: 50%; 2169 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 2170 switch > image { 2171 color: transparent; } 2172 switch:hover > slider { 2173 color: #eeeeec; 2174 border-color: #0d0e11; 2175 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 2176 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 2177 switch:checked > slider { 2178 border: 1px solid #2b2c2f; } 2179 switch:disabled > slider { 2180 color: #888a8d; 2181 border-color: #0d0e11; 2182 background-image: image(#242731); } 2183 row:selected switch { 2184 outline-color: rgba(255, 255, 255, 0.3); } 2185 2186/************************* 2187 * Check and Radio items * 2188 *************************/ 2189.view.content-view.check:not(list), iconview.content-view.check:not(list), 2190.content-view .tile check:not(list) { 2191 margin: 4px; 2192 min-width: 32px; 2193 min-height: 32px; 2194 color: transparent; 2195 background-color: #737680; 2196 border-radius: 5px; 2197 background-image: none; 2198 transition: 200ms; 2199 box-shadow: none; 2200 border-width: 0; 2201 -gtk-icon-source: none; 2202 -gtk-icon-shadow: none; } 2203 2204.view.content-view.check:hover:not(list), iconview.content-view.check:hover:not(list), 2205.content-view .tile check:hover:not(list) { 2206 margin: 4px; 2207 min-width: 32px; 2208 min-height: 32px; 2209 color: transparent; 2210 background-color: #737680; 2211 border-radius: 5px; 2212 background-image: none; 2213 transition: 200ms; 2214 box-shadow: none; 2215 border-width: 0; 2216 -gtk-icon-source: none; 2217 -gtk-icon-shadow: none; } 2218 2219.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list), 2220.content-view .tile check:active:not(list) { 2221 margin: 4px; 2222 min-width: 32px; 2223 min-height: 32px; 2224 color: transparent; 2225 background-color: #737680; 2226 border-radius: 5px; 2227 background-image: none; 2228 transition: 200ms; 2229 box-shadow: none; 2230 border-width: 0; 2231 -gtk-icon-source: none; 2232 -gtk-icon-shadow: none; } 2233 2234.view.content-view.check:backdrop:not(list), iconview.content-view.check:backdrop:not(list), 2235.content-view .tile check:backdrop:not(list) { 2236 margin: 4px; 2237 min-width: 32px; 2238 min-height: 32px; 2239 color: transparent; 2240 background-color: #7a7a7a; 2241 border-radius: 5px; 2242 background-image: none; 2243 transition: 200ms; 2244 box-shadow: none; 2245 border-width: 0; 2246 -gtk-icon-source: none; 2247 -gtk-icon-shadow: none; } 2248 2249.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list), 2250.content-view .tile check:checked:not(list) { 2251 margin: 4px; 2252 min-width: 32px; 2253 min-height: 32px; 2254 color: white; 2255 background-color: #737680; 2256 border-radius: 5px; 2257 background-image: none; 2258 transition: 200ms; 2259 box-shadow: none; 2260 border-width: 0; 2261 -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); 2262 -gtk-icon-shadow: none; } 2263 2264.view.content-view.check:checked:hover:not(list), iconview.content-view.check:checked:hover:not(list), 2265.content-view .tile check:checked:hover:not(list) { 2266 margin: 4px; 2267 min-width: 32px; 2268 min-height: 32px; 2269 color: white; 2270 background-color: #737680; 2271 border-radius: 5px; 2272 background-image: none; 2273 transition: 200ms; 2274 box-shadow: none; 2275 border-width: 0; 2276 -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); 2277 -gtk-icon-shadow: none; } 2278 2279.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list), 2280.content-view .tile check:checked:active:not(list) { 2281 margin: 4px; 2282 min-width: 32px; 2283 min-height: 32px; 2284 color: white; 2285 background-color: #737680; 2286 border-radius: 5px; 2287 background-image: none; 2288 transition: 200ms; 2289 box-shadow: none; 2290 border-width: 0; 2291 -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); 2292 -gtk-icon-shadow: none; } 2293 2294.view.content-view.check:backdrop:checked:not(list), iconview.content-view.check:backdrop:checked:not(list), 2295.content-view .tile check:backdrop:checked:not(list) { 2296 margin: 4px; 2297 min-width: 32px; 2298 min-height: 32px; 2299 color: rgba(255, 255, 255, 0.8); 2300 background-color: #7a7a7a; 2301 border-radius: 5px; 2302 background-image: none; 2303 transition: 200ms; 2304 box-shadow: none; 2305 border-width: 0; 2306 -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); 2307 -gtk-icon-shadow: none; } 2308 2309checkbutton { 2310 border-spacing: 4px; 2311 border-radius: 4px; 2312 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 2313 transition-property: outline, outline-width, outline-offset, outline-color; 2314 transition-duration: 300ms; 2315 animation-timing-function: ease-in-out; } 2316 checkbutton { 2317 outline: 0 solid transparent; 2318 outline-offset: 4px; } 2319 checkbutton:focus:focus-visible { 2320 outline-color: rgba(115, 118, 128, 0.7); 2321 outline-width: 2px; 2322 outline-offset: -2px; } 2323 checkbutton.text-button { 2324 padding: 4px; } 2325 2326check, 2327radio { 2328 min-height: 14px; 2329 min-width: 14px; 2330 border: 1px solid; 2331 -gtk-icon-source: none; } 2332 check, 2333 radio { 2334 background-clip: padding-box; 2335 background-image: linear-gradient(to bottom, #2e313d 20%, #23252e 90%); 2336 border-color: black; 2337 box-shadow: 0 1px rgba(0, 0, 0, 0.05); 2338 color: #ffffff; } 2339 check:hover, 2340 radio:hover { 2341 background-image: linear-gradient(to bottom, #363a48 10%, #2b2f3a 90%); } 2342 check:active, 2343 radio:active { 2344 box-shadow: inset 0 1px black; 2345 background-image: image(#181a20); } 2346 check:disabled, 2347 radio:disabled { 2348 box-shadow: none; 2349 color: rgba(255, 255, 255, 0.7); } 2350 check:checked, 2351 radio:checked { 2352 background-clip: border-box; 2353 background-image: linear-gradient(to bottom, #80838d 20%, #737680 90%); 2354 border-color: #121315; 2355 box-shadow: 0 1px rgba(0, 0, 0, 0.05); 2356 color: #ffffff; } 2357 check:checked:hover, 2358 radio:checked:hover { 2359 background-image: linear-gradient(to bottom, #8b8d96 10%, #7d808a 90%); } 2360 check:checked:active, 2361 radio:checked:active { 2362 box-shadow: inset 0 1px black; 2363 background-image: image(#676a73); } 2364 check:checked:disabled, 2365 radio:checked:disabled { 2366 box-shadow: none; 2367 color: rgba(255, 255, 255, 0.7); } 2368 check:indeterminate, 2369 radio:indeterminate { 2370 background-clip: border-box; 2371 background-image: linear-gradient(to bottom, #80838d 20%, #737680 90%); 2372 border-color: #121315; 2373 box-shadow: 0 1px rgba(0, 0, 0, 0.05); 2374 color: #ffffff; } 2375 check:indeterminate:hover, 2376 radio:indeterminate:hover { 2377 background-image: linear-gradient(to bottom, #8b8d96 10%, #7d808a 90%); } 2378 check:indeterminate:active, 2379 radio:indeterminate:active { 2380 box-shadow: inset 0 1px black; 2381 background-image: image(#676a73); } 2382 check:indeterminate:disabled, 2383 radio:indeterminate:disabled { 2384 box-shadow: none; 2385 color: rgba(255, 255, 255, 0.7); } 2386 .osd check, .osd radio { 2387 color: white; 2388 outline-color: rgba(115, 118, 128, 0.7); 2389 border-color: black; 2390 background-color: transparent; 2391 background-image: image(#303340); 2392 background-clip: padding-box; } 2393 .osd check:hover, .osd radio:hover { 2394 color: white; 2395 outline-color: rgba(115, 118, 128, 0.7); 2396 border-color: black; 2397 background-color: transparent; 2398 background-image: image(#303340); 2399 background-clip: padding-box; } 2400 .osd check:active, .osd radio:active { 2401 color: white; 2402 border-color: black; 2403 background-color: transparent; 2404 background-image: image(#040405); 2405 background-clip: padding-box; 2406 box-shadow: none; } 2407 .osd check:disabled, .osd radio:disabled { 2408 color: #97999f; 2409 border-color: black; 2410 background-color: transparent; 2411 background-image: image(rgba(68, 72, 83, 0.5)); 2412 background-clip: padding-box; } 2413 2414 2415check { 2416 border-radius: 3px; 2417 -gtk-icon-size: 14px; } 2418 2419 check:checked { 2420 -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } 2421 2422 check:indeterminate { 2423 -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } 2424 2425treeview.view radio:selected:focus, treeview.view radio:selected, 2426radio { 2427 border-radius: 100%; 2428 -gtk-icon-size: 14px; } 2429 treeview.view radio:checked:selected, 2430 radio:checked { 2431 -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } 2432 treeview.view radio:indeterminate:selected, 2433 radio:indeterminate { 2434 -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } 2435 2436treeview.view check:selected:focus, treeview.view check:selected, 2437treeview.view radio:selected:focus, 2438treeview.view radio:selected { 2439 color: #ffffff; } 2440 2441/************ 2442 * GtkScale * 2443 ************/ 2444progressbar > trough, scale > trough > fill, scale > trough { 2445 border: 1px solid #1b1d24; 2446 border-radius: 3px; 2447 background-color: #1b1d24; } 2448 headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { 2449 background-color: #0a0a0d; } 2450 progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { 2451 background-color: #242731; 2452 border-color: #0d0e11; } 2453 row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { 2454 outline-color: rgba(255, 255, 255, 0.3); 2455 border-color: #2b2c2f; } 2456 .osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { 2457 border-color: black; 2458 background-color: rgba(0, 0, 0, 0.8); } 2459 .osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { 2460 background-color: rgba(68, 72, 83, 0.5); } 2461 2462progressbar > trough > progress, scale > trough > highlight { 2463 border: 1px solid #737680; 2464 border-radius: 3px; 2465 background-color: #737680; } 2466 progressbar > trough > progress:disabled, scale > trough > highlight:disabled { 2467 background-color: transparent; 2468 border-color: transparent; } 2469 row:selected progressbar > trough > progress, row:selected scale > trough > highlight { 2470 border-color: #2b2c2f; } 2471 .osd progressbar > trough > progress, .osd scale > trough > highlight { 2472 border-color: black; } 2473 .osd progressbar > trough > progress:disabled, .osd scale > trough > highlight:disabled { 2474 border-color: transparent; } 2475 2476scale { 2477 min-height: 10px; 2478 min-width: 10px; 2479 padding: 12px; 2480 transition-property: outline, outline-width, outline-offset, outline-color; 2481 transition-duration: 300ms; 2482 animation-timing-function: ease-in-out; } 2483 scale > trough { 2484 outline: 0 solid transparent; 2485 outline-offset: 16px; } 2486 scale:focus:focus-visible > trough { 2487 outline-color: rgba(115, 118, 128, 0.7); 2488 outline-width: 2px; 2489 outline-offset: 10px; } 2490 scale > trough { 2491 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 2492 scale > trough > fill, 2493 scale > trough > highlight { 2494 margin: -1px; } 2495 scale > trough > slider { 2496 min-height: 18px; 2497 min-width: 18px; 2498 margin: -9px; } 2499 scale.fine-tune.horizontal { 2500 padding-top: 9px; 2501 padding-bottom: 9px; 2502 min-height: 16px; } 2503 scale.fine-tune.vertical { 2504 padding-left: 9px; 2505 padding-right: 9px; 2506 min-width: 16px; } 2507 scale.fine-tune > trough > slider { 2508 margin: -6px; } 2509 scale.fine-tune > trough > fill, 2510 scale.fine-tune > trough > highlight, 2511 scale.fine-tune > trough { 2512 border-radius: 5px; } 2513 scale > trough > fill:disabled { 2514 border-color: transparent; 2515 background-color: transparent; } 2516 .osd scale > trough > fill { 2517 background-color: #404040; } 2518 .osd scale > trough > fill:disabled { 2519 border-color: transparent; 2520 background-color: transparent; } 2521 scale > trough > slider { 2522 color: #eeeeec; 2523 outline-color: rgba(115, 118, 128, 0.7); 2524 border-color: #0d0e11; 2525 background-image: image(#323643); 2526 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 2527 border-width: 1px; 2528 border-style: solid; 2529 border-radius: 100%; 2530 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 2531 transition-property: background, border, box-shadow; } 2532 scale > trough > slider:hover { 2533 color: #eeeeec; 2534 border-color: #0d0e11; 2535 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 2536 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 2537 scale > trough > slider:active { 2538 border-color: #2b2c2f; } 2539 scale > trough > slider:disabled { 2540 color: #888a8d; 2541 border-color: #0d0e11; 2542 background-image: image(#242731); } 2543 row:selected scale > trough > slider:disabled, row:selected scale > trough > slider { 2544 border-color: #2b2c2f; } 2545 .osd scale > trough > slider { 2546 color: white; 2547 outline-color: rgba(115, 118, 128, 0.7); 2548 border-color: black; 2549 background-color: transparent; 2550 background-image: image(#303340); 2551 background-clip: padding-box; 2552 border-color: black; 2553 background-color: #303340; } 2554 .osd scale > trough > slider:hover { 2555 color: white; 2556 border-color: black; 2557 background-color: transparent; 2558 background-image: image(#1a1c23); 2559 background-clip: padding-box; 2560 background-color: #303340; } 2561 .osd scale > trough > slider:active { 2562 color: white; 2563 border-color: black; 2564 background-color: transparent; 2565 background-image: image(#040405); 2566 background-clip: padding-box; 2567 box-shadow: none; 2568 background-color: #303340; } 2569 .osd scale > trough > slider:disabled { 2570 color: #97999f; 2571 border-color: black; 2572 background-color: transparent; 2573 background-image: image(rgba(68, 72, 83, 0.5)); 2574 background-clip: padding-box; 2575 background-color: #303340; } 2576 scale > value { 2577 color: alpha(currentColor,0.55); 2578 font-feature-settings: "tnum"; } 2579 scale.horizontal > marks { 2580 color: alpha(currentColor,0.55); } 2581 scale.horizontal > marks.top { 2582 margin-bottom: 6px; } 2583 scale.horizontal > marks.bottom { 2584 margin-top: 6px; } 2585 scale.horizontal > marks indicator { 2586 background-color: currentColor; 2587 min-height: 6px; 2588 min-width: 1px; } 2589 scale.horizontal > value.left { 2590 margin-right: 9px; } 2591 scale.horizontal > value.right { 2592 margin-left: 9px; } 2593 scale.horizontal.fine-tune > marks.top { 2594 margin-top: 3px; } 2595 scale.horizontal.fine-tune > marks.bottom { 2596 margin-bottom: 3px; } 2597 scale.horizontal.fine-tune > marks indicator { 2598 min-height: 3px; } 2599 scale.vertical > marks { 2600 color: alpha(currentColor,0.55); } 2601 scale.vertical > marks.top { 2602 margin-right: 6px; } 2603 scale.vertical > marks.bottom { 2604 margin-left: 6px; } 2605 scale.vertical > marks indicator { 2606 background-color: currentColor; 2607 min-height: 1px; 2608 min-width: 6px; } 2609 scale.vertical > value.top { 2610 margin-bottom: 9px; } 2611 scale.vertical > value.bottom { 2612 margin-top: 9px; } 2613 scale.vertical.fine-tune > marks.top { 2614 margin-left: 3px; } 2615 scale.vertical.fine-tune > marks.bottom { 2616 margin-right: 3px; } 2617 scale.vertical.fine-tune > marks indicator { 2618 min-height: 3px; } 2619 scale.horizontal.marks-before:not(.marks-after) > trough > slider { 2620 margin: -10px; 2621 border-style: none; 2622 border-radius: 0; 2623 background-color: transparent; 2624 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png")); 2625 min-height: 26px; 2626 min-width: 22px; 2627 margin-top: -14px; 2628 background-position: top; 2629 background-repeat: no-repeat; 2630 box-shadow: none; } 2631 scale.horizontal.marks-before:not(.marks-after).fine-tune > trough > slider { 2632 margin: -7px -10px; 2633 margin-top: -11px; } 2634 scale.horizontal.marks-before:not(.marks-after) > trough > slider:hover { 2635 margin: -10px; 2636 border-style: none; 2637 border-radius: 0; 2638 background-color: transparent; 2639 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover-dark.png"), url("assets/slider-horz-scale-has-marks-above-hover-dark@2.png")); 2640 min-height: 26px; 2641 min-width: 22px; 2642 margin-top: -14px; 2643 background-position: top; 2644 background-repeat: no-repeat; 2645 box-shadow: none; } 2646 scale.horizontal.marks-before:not(.marks-after).fine-tune > trough > slider { 2647 margin: -7px -10px; 2648 margin-top: -11px; } 2649 scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { 2650 margin: -10px; 2651 border-style: none; 2652 border-radius: 0; 2653 background-color: transparent; 2654 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active-dark.png"), url("assets/slider-horz-scale-has-marks-above-active-dark@2.png")); 2655 min-height: 26px; 2656 min-width: 22px; 2657 margin-top: -14px; 2658 background-position: top; 2659 background-repeat: no-repeat; 2660 box-shadow: none; } 2661 scale.horizontal.marks-before:not(.marks-after).fine-tune > trough > slider { 2662 margin: -7px -10px; 2663 margin-top: -11px; } 2664 scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { 2665 margin: -10px; 2666 border-style: none; 2667 border-radius: 0; 2668 background-color: transparent; 2669 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png")); 2670 min-height: 26px; 2671 min-width: 22px; 2672 margin-top: -14px; 2673 background-position: top; 2674 background-repeat: no-repeat; 2675 box-shadow: none; } 2676 scale.horizontal.marks-before:not(.marks-after).fine-tune > trough > slider { 2677 margin: -7px -10px; 2678 margin-top: -11px; } 2679 scale.horizontal.marks-after:not(.marks-before) > trough > slider { 2680 margin: -10px; 2681 border-style: none; 2682 border-radius: 0; 2683 background-color: transparent; 2684 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-dark.png"), url("assets/slider-horz-scale-has-marks-below-dark@2.png")); 2685 min-height: 26px; 2686 min-width: 22px; 2687 margin-bottom: -14px; 2688 background-position: bottom; 2689 background-repeat: no-repeat; 2690 box-shadow: none; } 2691 scale.horizontal.marks-after:not(.marks-before).fine-tune > trough > slider { 2692 margin: -7px -10px; 2693 margin-bottom: -11px; } 2694 scale.horizontal.marks-after:not(.marks-before) > trough > slider:hover { 2695 margin: -10px; 2696 border-style: none; 2697 border-radius: 0; 2698 background-color: transparent; 2699 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-hover-dark.png"), url("assets/slider-horz-scale-has-marks-below-hover-dark@2.png")); 2700 min-height: 26px; 2701 min-width: 22px; 2702 margin-bottom: -14px; 2703 background-position: bottom; 2704 background-repeat: no-repeat; 2705 box-shadow: none; } 2706 scale.horizontal.marks-after:not(.marks-before).fine-tune > trough > slider { 2707 margin: -7px -10px; 2708 margin-bottom: -11px; } 2709 scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { 2710 margin: -10px; 2711 border-style: none; 2712 border-radius: 0; 2713 background-color: transparent; 2714 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-active-dark.png"), url("assets/slider-horz-scale-has-marks-below-active-dark@2.png")); 2715 min-height: 26px; 2716 min-width: 22px; 2717 margin-bottom: -14px; 2718 background-position: bottom; 2719 background-repeat: no-repeat; 2720 box-shadow: none; } 2721 scale.horizontal.marks-after:not(.marks-before).fine-tune > trough > slider { 2722 margin: -7px -10px; 2723 margin-bottom: -11px; } 2724 scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { 2725 margin: -10px; 2726 border-style: none; 2727 border-radius: 0; 2728 background-color: transparent; 2729 background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png")); 2730 min-height: 26px; 2731 min-width: 22px; 2732 margin-bottom: -14px; 2733 background-position: bottom; 2734 background-repeat: no-repeat; 2735 box-shadow: none; } 2736 scale.horizontal.marks-after:not(.marks-before).fine-tune > trough > slider { 2737 margin: -7px -10px; 2738 margin-bottom: -11px; } 2739 scale.vertical.marks-before:not(.marks-after) > trough > slider { 2740 margin: -10px; 2741 border-style: none; 2742 border-radius: 0; 2743 background-color: transparent; 2744 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-dark.png"), url("assets/slider-vert-scale-has-marks-above-dark@2.png")); 2745 min-height: 22px; 2746 min-width: 26px; 2747 margin-left: -14px; 2748 background-position: left bottom; 2749 background-repeat: no-repeat; 2750 box-shadow: none; } 2751 scale.vertical.marks-before:not(.marks-after).fine-tune > trough > slider { 2752 margin: -10px -7px; 2753 margin-left: -11px; } 2754 scale.vertical.marks-before:not(.marks-after) > trough > slider:hover { 2755 margin: -10px; 2756 border-style: none; 2757 border-radius: 0; 2758 background-color: transparent; 2759 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-hover-dark.png"), url("assets/slider-vert-scale-has-marks-above-hover-dark@2.png")); 2760 min-height: 22px; 2761 min-width: 26px; 2762 margin-left: -14px; 2763 background-position: left bottom; 2764 background-repeat: no-repeat; 2765 box-shadow: none; } 2766 scale.vertical.marks-before:not(.marks-after).fine-tune > trough > slider { 2767 margin: -10px -7px; 2768 margin-left: -11px; } 2769 scale.vertical.marks-before:not(.marks-after) > trough > slider:active { 2770 margin: -10px; 2771 border-style: none; 2772 border-radius: 0; 2773 background-color: transparent; 2774 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-active-dark.png"), url("assets/slider-vert-scale-has-marks-above-active-dark@2.png")); 2775 min-height: 22px; 2776 min-width: 26px; 2777 margin-left: -14px; 2778 background-position: left bottom; 2779 background-repeat: no-repeat; 2780 box-shadow: none; } 2781 scale.vertical.marks-before:not(.marks-after).fine-tune > trough > slider { 2782 margin: -10px -7px; 2783 margin-left: -11px; } 2784 scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { 2785 margin: -10px; 2786 border-style: none; 2787 border-radius: 0; 2788 background-color: transparent; 2789 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png")); 2790 min-height: 22px; 2791 min-width: 26px; 2792 margin-left: -14px; 2793 background-position: left bottom; 2794 background-repeat: no-repeat; 2795 box-shadow: none; } 2796 scale.vertical.marks-before:not(.marks-after).fine-tune > trough > slider { 2797 margin: -10px -7px; 2798 margin-left: -11px; } 2799 scale.vertical.marks-after:not(.marks-before) > trough > slider { 2800 margin: -10px; 2801 border-style: none; 2802 border-radius: 0; 2803 background-color: transparent; 2804 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-dark.png"), url("assets/slider-vert-scale-has-marks-below-dark@2.png")); 2805 min-height: 22px; 2806 min-width: 26px; 2807 margin-right: -14px; 2808 background-position: right bottom; 2809 background-repeat: no-repeat; 2810 box-shadow: none; } 2811 scale.vertical.marks-after:not(.marks-before).fine-tune > trough > slider { 2812 margin: -10px -7px; 2813 margin-right: -11px; } 2814 scale.vertical.marks-after:not(.marks-before) > trough > slider:hover { 2815 margin: -10px; 2816 border-style: none; 2817 border-radius: 0; 2818 background-color: transparent; 2819 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-hover-dark.png"), url("assets/slider-vert-scale-has-marks-below-hover-dark@2.png")); 2820 min-height: 22px; 2821 min-width: 26px; 2822 margin-right: -14px; 2823 background-position: right bottom; 2824 background-repeat: no-repeat; 2825 box-shadow: none; } 2826 scale.vertical.marks-after:not(.marks-before).fine-tune > trough > slider { 2827 margin: -10px -7px; 2828 margin-right: -11px; } 2829 scale.vertical.marks-after:not(.marks-before) > trough > slider:active { 2830 margin: -10px; 2831 border-style: none; 2832 border-radius: 0; 2833 background-color: transparent; 2834 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-active-dark.png"), url("assets/slider-vert-scale-has-marks-below-active-dark@2.png")); 2835 min-height: 22px; 2836 min-width: 26px; 2837 margin-right: -14px; 2838 background-position: right bottom; 2839 background-repeat: no-repeat; 2840 box-shadow: none; } 2841 scale.vertical.marks-after:not(.marks-before).fine-tune > trough > slider { 2842 margin: -10px -7px; 2843 margin-right: -11px; } 2844 scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { 2845 margin: -10px; 2846 border-style: none; 2847 border-radius: 0; 2848 background-color: transparent; 2849 background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png")); 2850 min-height: 22px; 2851 min-width: 26px; 2852 margin-right: -14px; 2853 background-position: right bottom; 2854 background-repeat: no-repeat; 2855 box-shadow: none; } 2856 scale.vertical.marks-after:not(.marks-before).fine-tune > trough > slider { 2857 margin: -10px -7px; 2858 margin-right: -11px; } 2859 scale.color { 2860 min-height: 0; 2861 min-width: 0; } 2862 scale.color > trough { 2863 background-image: image(#0d0e11); 2864 background-repeat: no-repeat; } 2865 scale.color.horizontal { 2866 padding: 0 0 15px 0; } 2867 scale.color.horizontal > trough { 2868 padding-bottom: 4px; 2869 background-position: 0 -3px; 2870 border-top-left-radius: 0; 2871 border-top-right-radius: 0; } 2872 scale.color.horizontal > trough > slider:dir(ltr):hover, scale.color.horizontal > trough > slider:dir(ltr):backdrop, scale.color.horizontal > trough > slider:dir(ltr):disabled, scale.color.horizontal > trough > slider:dir(ltr):backdrop:disabled, scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl):hover, scale.color.horizontal > trough > slider:dir(rtl):backdrop, scale.color.horizontal > trough > slider:dir(rtl):disabled, scale.color.horizontal > trough > slider:dir(rtl):backdrop:disabled, scale.color.horizontal > trough > slider:dir(rtl) { 2873 margin-bottom: -15px; 2874 margin-top: 6px; } 2875 scale.color.vertical:dir(ltr) { 2876 padding: 0 0 0 15px; } 2877 scale.color.vertical:dir(ltr) > trough { 2878 padding-left: 4px; 2879 background-position: 3px 0; 2880 border-bottom-right-radius: 0; 2881 border-top-right-radius: 0; } 2882 scale.color.vertical:dir(ltr) > trough > slider:hover, scale.color.vertical:dir(ltr) > trough > slider:backdrop, scale.color.vertical:dir(ltr) > trough > slider:disabled, scale.color.vertical:dir(ltr) > trough > slider:backdrop:disabled, scale.color.vertical:dir(ltr) > trough > slider { 2883 margin-left: -15px; 2884 margin-right: 6px; } 2885 scale.color.vertical:dir(rtl) { 2886 padding: 0 15px 0 0; } 2887 scale.color.vertical:dir(rtl) > trough { 2888 padding-right: 4px; 2889 background-position: -3px 0; 2890 border-bottom-left-radius: 0; 2891 border-top-left-radius: 0; } 2892 scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > slider { 2893 margin-right: -15px; 2894 margin-left: 6px; } 2895 scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { 2896 padding: 0 0 12px 0; } 2897 scale.color.fine-tune.horizontal:dir(ltr) > trough, scale.color.fine-tune.horizontal:dir(rtl) > trough { 2898 padding-bottom: 7px; 2899 background-position: 0 -6px; } 2900 scale.color.fine-tune.horizontal:dir(ltr) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > slider { 2901 margin-bottom: -15px; 2902 margin-top: 6px; } 2903 scale.color.fine-tune.vertical:dir(ltr) { 2904 padding: 0 0 0 12px; } 2905 scale.color.fine-tune.vertical:dir(ltr) > trough { 2906 padding-left: 7px; 2907 background-position: 6px 0; } 2908 scale.color.fine-tune.vertical:dir(ltr) > trough > slider { 2909 margin-left: -15px; 2910 margin-right: 6px; } 2911 scale.color.fine-tune.vertical:dir(rtl) { 2912 padding: 0 12px 0 0; } 2913 scale.color.fine-tune.vertical:dir(rtl) > trough { 2914 padding-right: 7px; 2915 background-position: -6px 0; } 2916 scale.color.fine-tune.vertical:dir(rtl) > trough > slider { 2917 margin-right: -15px; 2918 margin-left: 6px; } 2919 2920/***************** 2921 * Progress bars * 2922 *****************/ 2923progressbar { 2924 font-size: smaller; 2925 color: rgba(238, 238, 236, 0.4); 2926 font-feature-settings: "tnum"; } 2927 progressbar.horizontal > trough { 2928 min-width: 150px; } 2929 progressbar.horizontal > trough, progressbar.horizontal > trough > progress { 2930 min-height: 2px; } 2931 progressbar.vertical > trough { 2932 min-height: 80px; } 2933 progressbar.vertical > trough, progressbar.vertical > trough > progress { 2934 min-width: 2px; } 2935 progressbar.horizontal > trough > progress { 2936 margin: 0 -1px; } 2937 progressbar.vertical > trough > progress { 2938 margin: -1px 0; } 2939 progressbar > trough > progress { 2940 /* share most of scales' */ 2941 /* override insensitive that is specific to progress */ 2942 border-radius: 1.5px; } 2943 progressbar > trough > progress:disabled { 2944 background-color: #888a8d; 2945 border-color: #888a8d; } 2946 progressbar > trough > progress.left { 2947 border-top-left-radius: 5px; 2948 border-bottom-left-radius: 5px; } 2949 progressbar > trough > progress.right { 2950 border-top-right-radius: 5px; 2951 border-bottom-right-radius: 5px; } 2952 progressbar > trough > progress.top { 2953 border-top-right-radius: 5px; 2954 border-top-left-radius: 5px; } 2955 progressbar > trough > progress.bottom { 2956 border-bottom-right-radius: 5px; 2957 border-bottom-left-radius: 5px; } 2958 progressbar.osd { 2959 min-width: 3px; 2960 min-height: 3px; 2961 background-color: transparent; } 2962 progressbar.osd > trough { 2963 border-style: none; 2964 border-radius: 0; 2965 background-color: transparent; 2966 box-shadow: none; } 2967 progressbar.osd > trough > progress { 2968 border-style: none; 2969 border-radius: 0; } 2970 progressbar > trough.empty > progress { 2971 all: unset; } 2972 2973/************* 2974 * Level Bar * 2975 *************/ 2976levelbar.horizontal trough > block { 2977 min-height: 9px; 2978 border-radius: 5px; } 2979 levelbar.horizontal trough > block:dir(rtl) { 2980 border-radius: 0 5px 5px 0; } 2981 levelbar.horizontal trough > block:dir(ltr) { 2982 border-radius: 5px 0 0 5px; } 2983 levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { 2984 border-radius: 5px; } 2985 2986levelbar.horizontal.discrete trough > block { 2987 min-height: 2px; 2988 margin: 1px; 2989 min-width: 24px; 2990 border-radius: 0; } 2991 levelbar.horizontal.discrete trough > block:first-child { 2992 border-radius: 2px 0 0 2px; } 2993 levelbar.horizontal.discrete trough > block:last-child { 2994 border-radius: 0 2px 2px 0; } 2995 2996levelbar.vertical trough > block { 2997 min-width: 9px; 2998 border-radius: 5px; } 2999 3000levelbar.vertical.discrete > trough > block { 3001 min-width: 2px; 3002 margin: 1px 0; 3003 min-height: 32px; } 3004 3005levelbar > trough { 3006 padding: 0; } 3007 3008levelbar > trough > block { 3009 border: 1px solid; } 3010 levelbar > trough > block.low { 3011 border-color: #fd7d00; 3012 background-color: #fd7d00; } 3013 levelbar > trough > block.high, levelbar > trough > block:not(.empty) { 3014 border-color: #737680; 3015 background-color: #737680; } 3016 levelbar > trough > block.full { 3017 border-color: #308e63; 3018 background-color: #308e63; } 3019 levelbar > trough > block.empty { 3020 background-color: #181a20; 3021 border-color: #181a20; } 3022 3023/**************** 3024 * Print dialog * 3025*****************/ 3026window.dialog.print drawing { 3027 color: #eeeeec; 3028 background: none; 3029 border: none; 3030 padding: 0; } 3031 window.dialog.print drawing paper { 3032 background: white; 3033 color: #2e3436; 3034 border: 1px solid #0d0e11; } 3035 3036window.dialog.print .dialog-action-box { 3037 margin: 12px; } 3038 3039/********** 3040 * Frames * 3041 **********/ 3042frame, 3043.frame { 3044 border: 1px solid #0d0e11; } 3045 3046frame { 3047 border-radius: 7px; } 3048 frame > label { 3049 margin: 4px; } 3050 3051actionbar > revealer > box { 3052 padding: 6px; 3053 border-spacing: 6px; 3054 border-top: 1px solid #0d0e11; } 3055 3056scrolledwindow > overshoot.top { 3057 background-image: radial-gradient(farthest-side at top, black 85%, rgba(0, 0, 0, 0)), radial-gradient(farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); 3058 background-size: 100% 3%, 100% 50%; 3059 background-repeat: no-repeat; 3060 background-position: top; 3061 background-color: transparent; 3062 border: none; 3063 box-shadow: none; } 3064 3065scrolledwindow > overshoot.bottom { 3066 background-image: radial-gradient(farthest-side at bottom, black 85%, rgba(0, 0, 0, 0)), radial-gradient(farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); 3067 background-size: 100% 3%, 100% 50%; 3068 background-repeat: no-repeat; 3069 background-position: bottom; 3070 background-color: transparent; 3071 border: none; 3072 box-shadow: none; } 3073 3074scrolledwindow > overshoot.left { 3075 background-image: radial-gradient(farthest-side at left, black 85%, rgba(0, 0, 0, 0)), radial-gradient(farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); 3076 background-size: 3% 100%, 50% 100%; 3077 background-repeat: no-repeat; 3078 background-position: left; 3079 background-color: transparent; 3080 border: none; 3081 box-shadow: none; } 3082 3083scrolledwindow > overshoot.right { 3084 background-image: radial-gradient(farthest-side at right, black 85%, rgba(0, 0, 0, 0)), radial-gradient(farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); 3085 background-size: 3% 100%, 50% 100%; 3086 background-repeat: no-repeat; 3087 background-position: right; 3088 background-color: transparent; 3089 border: none; 3090 box-shadow: none; } 3091 3092scrolledwindow > junction { 3093 background: #0d0e11, linear-gradient(to bottom, transparent 1px, #272a34 1px), linear-gradient(to right, transparent 1px, #272a34 1px); } 3094 scrolledwindow > junction:dir(rtl) { 3095 background: #0d0e11, linear-gradient(to bottom, transparent 1px, #272a34 1px), linear-gradient(to left, transparent 1px, #272a34 1px); } 3096 3097separator { 3098 background: #181a20; 3099 min-width: 1px; 3100 min-height: 1px; } 3101 3102/********* 3103 * Lists * 3104 *********/ 3105listview, 3106list { 3107 color: white; 3108 background-color: #272a34; 3109 border-color: #0d0e11; } 3110 listview:backdrop, 3111 list:backdrop { 3112 color: #d4d5d7; 3113 background-color: #292c37; 3114 border-color: #0d0e11; } 3115 listview > row, 3116 list > row { 3117 padding: 2px; } 3118 listview > row.expander, 3119 list > row.expander { 3120 padding: 0px; } 3121 listview > row.expander .row-header, 3122 list > row.expander .row-header { 3123 padding: 2px; } 3124 listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), 3125 list.horizontal row.separator, 3126 list.separators.horizontal > row:not(.separator) { 3127 border-left: 1px solid #4f5159; } 3128 listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), 3129 list:not(.horizontal) row.separator, 3130 list.separators:not(.horizontal) > row:not(.separator) { 3131 border-bottom: 1px solid #4f5159; } 3132 3133row { 3134 transition-property: outline, outline-width, outline-offset, outline-color; 3135 transition-duration: 300ms; 3136 animation-timing-function: ease-in-out; } 3137 row { 3138 outline: 0 solid transparent; 3139 outline-offset: 4px; } 3140 row:focus:focus-visible { 3141 outline-color: rgba(115, 118, 128, 0.7); 3142 outline-width: 2px; 3143 outline-offset: -2px; } 3144 row.activatable.has-open-popup, row.activatable:hover { 3145 background-color: rgba(238, 238, 236, 0.05); } 3146 row.activatable:active { 3147 box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } 3148 row.activatable:selected:active { 3149 box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } 3150 row.activatable:selected.has-open-popup, row.activatable:selected:hover { 3151 background-color: #7f828b; } 3152 row:selected { 3153 outline-color: rgba(255, 255, 255, 0.3); } 3154 3155columnview > listview > row { 3156 padding: 0; } 3157 columnview > listview > row > cell { 3158 padding: 8px 6px; } 3159 columnview > listview > row > cell:not(:first-child) { 3160 border-left: 1px solid transparent; } 3161 3162columnview.column-separators > listview > row > cell { 3163 border-left-color: #4f5159; } 3164 3165columnview.data-table > listview > row > cell { 3166 padding-top: 2px; 3167 padding-bottom: 2px; } 3168 3169treeexpander { 3170 border-spacing: 4px; } 3171 3172/******************************************************** 3173 * Data Tables * 3174 * treeview like tables with individual focusable cells * 3175 * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 * 3176 ********************************************************/ 3177columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { 3178 outline: 2px solid rgba(115, 118, 128, 0.7); } 3179 3180columnview row:not(:selected) cell editablelabel.editing:focus-within { 3181 outline: 2px solid #737680; } 3182 3183columnview row:not(:selected) cell editablelabel.editing text selection { 3184 color: #ffffff; 3185 background-color: #737680; } 3186 3187/******************************************************* 3188 * Rich Lists * 3189 * Large list usually containing lots of widgets * 3190 * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * 3191 *******************************************************/ 3192.rich-list { 3193 /* rich lists usually containing other widgets than just labels/text */ } 3194 .rich-list > row { 3195 padding: 8px 12px; 3196 min-height: 32px; 3197 /* should be tall even when only containing a label */ } 3198 .rich-list > row > box { 3199 border-spacing: 12px; } 3200 3201/********************* 3202 * App Notifications * 3203 *********************/ 3204.app-notification { 3205 padding: 10px; 3206 border-spacing: 10px; 3207 border-radius: 0 0 5px 5px; 3208 background-color: #303340; 3209 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); 3210 background-clip: padding-box; } 3211 .app-notification border { 3212 border: none; } 3213 3214/************* 3215 * Expanders * 3216 *************/ 3217expander { 3218 min-width: 16px; 3219 min-height: 16px; 3220 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 3221 expander:dir(rtl) { 3222 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } 3223 expander:disabled { 3224 color: #888a8d; } 3225 expander:checked { 3226 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 3227 3228expander-widget { 3229 transition-property: outline, outline-width, outline-offset, outline-color; 3230 transition-duration: 300ms; 3231 animation-timing-function: ease-in-out; } 3232 expander-widget > box > title { 3233 outline: 0 solid transparent; 3234 outline-offset: 4px; } 3235 expander-widget:focus:focus-visible > box > title { 3236 outline-color: rgba(115, 118, 128, 0.7); 3237 outline-width: 2px; 3238 outline-offset: -2px; } 3239 expander-widget > box > title { 3240 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 3241 border-radius: 4px; } 3242 expander-widget > box > title:hover > expander { 3243 color: white; } 3244 3245.navigation-sidebar:not(decoration):not(window):drop(active):focus, .navigation-sidebar:not(decoration):not(window):drop(active), 3246placessidebar:not(decoration):not(window):drop(active):focus, 3247placessidebar:not(decoration):not(window):drop(active), 3248stackswitcher:not(decoration):not(window):drop(active):focus, 3249stackswitcher:not(decoration):not(window):drop(active), 3250expander-widget:not(decoration):not(window):drop(active):focus, 3251expander-widget:not(decoration):not(window):drop(active) { 3252 box-shadow: none; } 3253 3254/************ 3255 * Calendar * 3256 ***********/ 3257calendar { 3258 color: white; 3259 border: 1px solid #0d0e11; } 3260 calendar > header { 3261 border-bottom: 1px solid #0d0e11; } 3262 calendar > header > button { 3263 border: none; 3264 box-shadow: none; 3265 background: none; 3266 border-radius: 0; } 3267 calendar > header > button:backdrop { 3268 background: none; } 3269 calendar > grid > label.today { 3270 box-shadow: inset 0px -2px #0d0e11; } 3271 calendar > grid > label.today:selected { 3272 box-shadow: none; } 3273 calendar > grid > label:focus { 3274 outline-color: rgba(115, 118, 128, 0.7); 3275 outline-offset: -2px; 3276 outline-width: 2px; 3277 outline-style: solid; } 3278 calendar > grid > label.day-number { 3279 padding: 4px; } 3280 calendar > grid > label.day-number:selected { 3281 border-radius: 3px; } 3282 calendar > grid > label.day-number.other-month { 3283 color: alpha(currentColor,0.3); } 3284 3285/*********** 3286 * Dialogs * 3287 ***********/ 3288window.dialog.message .titlebar { 3289 min-height: 20px; 3290 background-image: none; 3291 background-color: #23252e; 3292 border-style: none; 3293 border-top-left-radius: 7px; 3294 border-top-right-radius: 7px; } 3295 3296window.dialog.message box.dialog-vbox.vertical { 3297 border-spacing: 10px; } 3298 3299window.dialog.message label.title { 3300 font-weight: 800; 3301 font-size: 15pt; } 3302 3303window.dialog.message.csd.background { 3304 border-bottom-left-radius: 8px; 3305 border-bottom-right-radius: 8px; } 3306 3307window.dialog.message.csd .dialog-action-area button { 3308 padding: 10px 14px; 3309 border-radius: 0; 3310 border-left-style: solid; 3311 border-right-style: none; 3312 border-bottom-style: none; } 3313 window.dialog.message.csd .dialog-action-area button:first-child { 3314 border-left-style: none; 3315 border-bottom-left-radius: 7px; } 3316 window.dialog.message.csd .dialog-action-area button:last-child { 3317 border-bottom-right-radius: 7px; } 3318 3319filechooser .dialog-action-box { 3320 border-top: 1px solid #0d0e11; } 3321 3322filechooser #pathbarbox { 3323 border-bottom: 1px solid #23252e; } 3324 3325filechooserbutton > button > box { 3326 border-spacing: 6px; } 3327 3328filechooserbutton:drop(active) { 3329 box-shadow: none; 3330 border-color: transparent; } 3331 3332/*********** 3333 * Sidebar * 3334 ***********/ 3335.sidebar { 3336 background-color: #252831; } 3337 .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { 3338 border-right: 1px solid #0d0e11; 3339 border-left-style: none; } 3340 .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { 3341 border-left: 1px solid #0d0e11; 3342 border-right-style: none; } 3343 .sidebar listview.view, 3344 .sidebar list { 3345 background-color: transparent; } 3346 paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { 3347 border-style: none; } 3348 3349stacksidebar list.separators:not(.horizontal) > row:not(.separator) { 3350 border-bottom: none; } 3351 3352stacksidebar row { 3353 padding: 10px 4px; 3354 transition-property: outline, outline-width, outline-offset, outline-color; 3355 transition-duration: 300ms; 3356 animation-timing-function: ease-in-out; } 3357 stacksidebar row { 3358 outline: 0 solid transparent; 3359 outline-offset: 4px; } 3360 stacksidebar row:focus:focus-visible { 3361 outline-color: rgba(115, 118, 128, 0.7); 3362 outline-width: 2px; 3363 outline-offset: -2px; } 3364 stacksidebar row > label { 3365 padding-left: 6px; 3366 padding-right: 6px; } 3367 stacksidebar row.needs-attention > label { 3368 background-size: 6px 6px, 0 0; } 3369 stacksidebar row:selected { 3370 background-color: #3b3e46; 3371 border-radius: 5px; 3372 color: #eeeeec; } 3373 stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { 3374 background-color: #2f3238; } 3375 stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { 3376 box-shadow: none; } 3377 3378separator.sidebar { 3379 background-color: #0d0e11; } 3380 3381/********************** 3382 * Navigation Sidebar * 3383 **********************/ 3384.navigation-sidebar { 3385 padding: 5px 0; } 3386 .navigation-sidebar > separator { 3387 margin: 5px; } 3388 .navigation-sidebar > row { 3389 min-height: 36px; 3390 padding: 0 8px; 3391 border-radius: 5px; 3392 margin: 0 5px 2px; 3393 transition-property: outline, outline-width, outline-offset, outline-color; 3394 transition-duration: 300ms; 3395 animation-timing-function: ease-in-out; } 3396 .navigation-sidebar > row { 3397 outline: 0 solid transparent; 3398 outline-offset: 4px; } 3399 .navigation-sidebar > row:focus-visible:focus-within { 3400 outline-color: rgba(115, 118, 128, 0.7); 3401 outline-width: 2px; 3402 outline-offset: -2px; } 3403 .navigation-sidebar > row:hover { 3404 background-color: #2f3238; } 3405 .navigation-sidebar > row:selected { 3406 background-color: #3b3e46; 3407 color: inherit; } 3408 .navigation-sidebar > row:selected:hover { 3409 background-color: #2f3238; } 3410 .navigation-sidebar > row:disabled { 3411 color: #888a8d; } 3412 3413/**************** 3414 * File chooser * 3415 ****************/ 3416row image.sidebar-icon { 3417 opacity: 0.7; } 3418 3419/* this should be more generic, only using .navigation-sidebar 3420 https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 3421*/ 3422placessidebar .navigation-sidebar > row { 3423 padding: 0; } 3424 placessidebar .navigation-sidebar > row > revealer { 3425 padding: 0 14px; } 3426 placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { 3427 padding-right: 8px; } 3428 placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { 3429 padding-left: 8px; } 3430 placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { 3431 padding-right: 2px; } 3432 placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { 3433 padding-left: 2px; } 3434 button.sidebar-button { 3435 min-height: 26px; 3436 min-width: 26px; 3437 margin-top: 3px; 3438 margin-bottom: 3px; 3439 padding: 0; 3440 border-radius: 100%; } 3441 placessidebar .navigation-sidebar > row:selected:active { 3442 box-shadow: none; } 3443 placessidebar .navigation-sidebar > row.sidebar-placeholder-row { 3444 padding: 0 8px; 3445 min-height: 2px; 3446 background-image: image(#19a187); 3447 background-clip: content-box; } 3448 placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { 3449 color: #737680; } 3450 placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { 3451 color: #19a187; 3452 box-shadow: inset 0 1px #19a187, inset 0 -1px #19a187; } 3453 placessidebar .navigation-sidebar > row:drop(active):not(:disabled):selected { 3454 color: #ffffff; 3455 background-color: #19a187; } 3456 3457placesview .server-list-button > image { 3458 transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 3459 -gtk-icon-transform: rotate(0turn); } 3460 3461placesview .server-list-button:checked > image { 3462 transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 3463 -gtk-icon-transform: rotate(-0.5turn); } 3464 3465placesview > actionbar > revealer > box > box { 3466 border-spacing: 6px; } 3467 3468/********* 3469 * Paned * 3470 *********/ 3471paned > separator { 3472 min-width: 1px; 3473 min-height: 1px; 3474 -gtk-icon-source: none; 3475 border-style: none; 3476 background-color: transparent; 3477 background-image: image(#0d0e11); 3478 background-size: 1px 1px; } 3479 paned > separator:selected { 3480 background-image: image(#737680); } 3481 paned > separator.wide { 3482 min-width: 5px; 3483 min-height: 5px; 3484 background-color: #23252e; 3485 background-image: image(#0d0e11), image(#0d0e11); 3486 background-size: 1px 1px, 1px 1px; } 3487 3488paned.horizontal > separator { 3489 background-repeat: repeat-y; } 3490 paned.horizontal > separator:dir(ltr) { 3491 margin: 0 -8px 0 0; 3492 padding: 0 8px 0 0; 3493 background-position: left; } 3494 paned.horizontal > separator:dir(rtl) { 3495 margin: 0 0 0 -8px; 3496 padding: 0 0 0 8px; 3497 background-position: right; } 3498 paned.horizontal > separator.wide { 3499 margin: 0; 3500 padding: 0; 3501 background-repeat: repeat-y, repeat-y; 3502 background-position: left, right; } 3503 3504paned.vertical > separator { 3505 margin: 0 0 -8px 0; 3506 padding: 0 0 8px 0; 3507 background-repeat: repeat-x; 3508 background-position: top; } 3509 paned.vertical > separator.wide { 3510 margin: 0; 3511 padding: 0; 3512 background-repeat: repeat-x, repeat-x; 3513 background-position: bottom, top; } 3514 3515/************** 3516 * GtkVideo * 3517 **************/ 3518video { 3519 background: black; } 3520 video image.osd { 3521 min-width: 64px; 3522 min-height: 64px; 3523 border-radius: 32px; } 3524 3525/************ 3526 * Tooltips * 3527 ************/ 3528tooltip { 3529 padding: 6px 10px; 3530 border-radius: 7px; 3531 box-shadow: none; } 3532 tooltip.background { 3533 background-color: rgba(0, 0, 0, 0.8); 3534 background-clip: padding-box; 3535 border: 1px solid rgba(255, 255, 255, 0.1); 3536 color: white; } 3537 tooltip > box { 3538 border-spacing: 6px; } 3539 3540/***************** 3541 * Color Chooser * 3542 *****************/ 3543colorswatch { 3544 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 3545 transition-property: outline, outline-width, outline-offset, outline-color; 3546 transition-duration: 300ms; 3547 animation-timing-function: ease-in-out; } 3548 colorswatch { 3549 outline: 0 solid transparent; 3550 outline-offset: 6px; } 3551 colorswatch:focus:focus-visible { 3552 outline-color: rgba(115, 118, 128, 0.7); 3553 outline-width: 4px; 3554 outline-offset: -2px; } 3555 colorswatch:drop(active), colorswatch { 3556 border-style: none; } 3557 colorswatch.top { 3558 border-top-left-radius: 5.5px; 3559 border-top-right-radius: 5.5px; } 3560 colorswatch.top > overlay { 3561 border-top-left-radius: 5px; 3562 border-top-right-radius: 5px; } 3563 colorswatch.bottom { 3564 border-bottom-left-radius: 5.5px; 3565 border-bottom-right-radius: 5.5px; } 3566 colorswatch.bottom > overlay { 3567 border-bottom-left-radius: 5px; 3568 border-bottom-right-radius: 5px; } 3569 colorswatch.left, colorswatch:first-child:not(.top) { 3570 border-top-left-radius: 5.5px; 3571 border-bottom-left-radius: 5.5px; } 3572 colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { 3573 border-top-left-radius: 5px; 3574 border-bottom-left-radius: 5px; } 3575 colorswatch.right, colorswatch:last-child:not(.bottom) { 3576 border-top-right-radius: 5.5px; 3577 border-bottom-right-radius: 5.5px; } 3578 colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { 3579 border-top-right-radius: 5px; 3580 border-bottom-right-radius: 5px; } 3581 colorswatch.dark > overlay { 3582 color: white; } 3583 colorswatch.dark.activatable:hover > overlay { 3584 border-color: #0d0e11; } 3585 colorswatch.light > overlay { 3586 color: black; } 3587 colorswatch.light.activatable:hover > overlay { 3588 border-color: #0d0e11; } 3589 colorswatch:drop(active) { 3590 box-shadow: none; } 3591 colorswatch:drop(active).light > overlay { 3592 border-color: #19a187; 3593 box-shadow: inset 0 0 0 2px #0d0e11, inset 0 0 0 1px #19a187; } 3594 colorswatch:drop(active).dark > overlay { 3595 border-color: #19a187; 3596 box-shadow: inset 0 0 0 2px #0d0e11, inset 0 0 0 1px #19a187; } 3597 colorswatch > overlay { 3598 border: 1px solid #0d0e11; } 3599 colorswatch.activatable:hover > overlay { 3600 box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); } 3601 colorswatch#add-color-button { 3602 border-radius: 5px 0 0 5px; } 3603 colorswatch#add-color-button:only-child { 3604 border-radius: 5px; } 3605 colorswatch#add-color-button > overlay { 3606 color: #eeeeec; 3607 outline-color: rgba(115, 118, 128, 0.7); 3608 border-color: #0d0e11; 3609 background-image: image(#323643); 3610 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 3611 colorswatch#add-color-button.activatable:hover > overlay { 3612 color: #eeeeec; 3613 border-color: #0d0e11; 3614 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 3615 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 3616 colorswatch:disabled { 3617 opacity: 0.5; } 3618 colorswatch:disabled > overlay { 3619 border-color: rgba(0, 0, 0, 0.6); 3620 box-shadow: none; } 3621 row:selected colorswatch { 3622 box-shadow: 0 0 0 2px #ffffff; } 3623 colorswatch#editor-color-sample { 3624 border-radius: 4px; } 3625 colorswatch#editor-color-sample > overlay { 3626 border-radius: 4.5px; } 3627 3628plane { 3629 transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 3630 transition-property: outline, outline-width, outline-offset, outline-color; 3631 transition-duration: 300ms; 3632 animation-timing-function: ease-in-out; } 3633 plane { 3634 outline: 0 solid transparent; 3635 outline-offset: 6px; } 3636 plane:focus:focus-visible { 3637 outline-color: rgba(115, 118, 128, 0.7); 3638 outline-width: 2px; 3639 outline-offset: 2px; } 3640 3641colorchooser .popover.osd { 3642 border-radius: 5px; } 3643 3644/******** 3645 * Misc * 3646 ********/ 3647.content-view { 3648 background-color: #13151a; } 3649 .content-view:hover { 3650 -gtk-icon-filter: brightness(1.2); } 3651 .content-view .tile { 3652 margin: 2px; 3653 background-color: black; 3654 border-radius: 0; 3655 padding: 0; } 3656 .content-view .tile:active, .content-view .tile:selected { 3657 background-color: #737680; } 3658 .content-view .tile:disabled { 3659 background-color: #242731; } 3660 3661.osd .scale-popup button.flat { 3662 border-style: none; 3663 border-radius: 5px; } 3664 3665.scale-popup button:hover { 3666 background-color: rgba(238, 238, 236, 0.1); 3667 border-radius: 5px; } 3668 3669/********************** 3670 * Window Decorations * 3671 *********************/ 3672window { 3673 border-width: 0px; } 3674 window.csd { 3675 box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.75); 3676 margin: 0px; 3677 border-radius: 7px 7px 0 0; } 3678 window.csd:backdrop { 3679 box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.75); 3680 transition: 200ms ease-out; } 3681 window.csd.popup { 3682 border-radius: 5px; 3683 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.65); } 3684 window.csd.dialog.message { 3685 border-radius: 7px; 3686 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.65); } 3687 window.solid-csd { 3688 margin: 0; 3689 padding: 4px; 3690 border: solid 1px #0d0e11; 3691 border-radius: 0; 3692 box-shadow: inset 0 0 0 4px #0d0e11, inset 0 0 0 3px #1c1e25, inset 0 1px rgba(238, 238, 236, 0.07); } 3693 window.solid-csd:backdrop { 3694 box-shadow: inset 0 0 0 4px #0d0e11, inset 0 0 0 3px #23252e, inset 0 1px rgba(238, 238, 236, 0.07); } 3695 window.maximized, window.fullscreen { 3696 border-radius: 0; 3697 box-shadow: none; } 3698 window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { 3699 border-radius: 0; 3700 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; } 3701 window:backdrop { 3702 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; } 3703 window.popup { 3704 box-shadow: none; } 3705 window.ssd { 3706 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); } 3707 3708tooltip.csd { 3709 border-radius: 5px; 3710 box-shadow: none; } 3711 3712.view:selected:focus, .view:selected, 3713textview > text:selected:focus, 3714textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, 3715entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, 3716treeview.view:selected:focus, 3717treeview.view:selected, row:selected, calendar > grid > label.day-number:selected { 3718 background-color: #737680; } 3719 label:selected, .view:selected:focus, .view:selected, 3720 textview > text:selected:focus, 3721 textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, 3722 entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, 3723 treeview.view:selected:focus, 3724 treeview.view:selected, row:selected, calendar > grid > label.day-number:selected { 3725 color: #ffffff; } 3726 label:disabled > selection, label:disabled:selected, .view:disabled:selected, 3727 textview > text:disabled:selected:focus, 3728 textview > text:disabled:selected, textview > text > selection:disabled, iconview:disabled:selected:focus, iconview:disabled:selected, flowbox > flowboxchild:disabled:selected, gridview > child:disabled:selected, 3729 entry > text > selection:disabled, modelbutton.flat:disabled:selected, spinbutton:not(.vertical) > text > selection:disabled, spinbutton.vertical > text > text > selection:disabled, spinbutton.vertical > text > selection:disabled, columnview.view:disabled:selected, 3730 treeview.view:disabled:selected, row:disabled:selected, calendar > grid > label.day-number:disabled:selected { 3731 color: #b9bbc0; } 3732 3733.monospace { 3734 font-family: monospace; } 3735 3736/********************** 3737 * Touch Copy & Paste * 3738 *********************/ 3739cursor-handle { 3740 background-color: transparent; 3741 background-image: none; 3742 box-shadow: none; 3743 border-style: none; 3744 min-width: 20px; 3745 min-height: 24px; 3746 padding-left: 20px; 3747 padding-right: 20px; 3748 padding-top: 24px; 3749 padding-bottom: 24px; } 3750 cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { 3751 -gtk-icon-source: -gtk-scaled(url("assets/text-select-start-dark.png"), url("assets/text-select-start-dark@2.png")); } 3752 cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { 3753 -gtk-icon-source: -gtk-scaled(url("assets/text-select-end-dark.png"), url("assets/text-select-end-dark@2.png")); } 3754 cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { 3755 -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png")); } 3756 cursor-handle.top:hover:dir(ltr), cursor-handle.bottom:hover:dir(rtl) { 3757 -gtk-icon-source: -gtk-scaled(url("assets/text-select-start-hover-dark.png"), url("assets/text-select-start-hover-dark@2.png")); } 3758 cursor-handle.bottom:hover:dir(ltr), cursor-handle.top:hover:dir(rtl) { 3759 -gtk-icon-source: -gtk-scaled(url("assets/text-select-end-hover-dark.png"), url("assets/text-select-end-hover-dark@2.png")); } 3760 cursor-handle.insertion-cursor:hover:dir(ltr), cursor-handle.insertion-cursor:hover:dir(rtl) { 3761 -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover-dark.png"), url("assets/slider-horz-scale-has-marks-above-hover-dark@2.png")); } 3762 cursor-handle.top:active:dir(ltr), cursor-handle.bottom:active:dir(rtl) { 3763 -gtk-icon-source: -gtk-scaled(url("assets/text-select-start-active-dark.png"), url("assets/text-select-start-active-dark@2.png")); } 3764 cursor-handle.bottom:active:dir(ltr), cursor-handle.top:active:dir(rtl) { 3765 -gtk-icon-source: -gtk-scaled(url("assets/text-select-end-active-dark.png"), url("assets/text-select-end-active-dark@2.png")); } 3766 cursor-handle.insertion-cursor:active:dir(ltr), cursor-handle.insertion-cursor:active:dir(rtl) { 3767 -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active-dark.png"), url("assets/slider-horz-scale-has-marks-above-active-dark@2.png")); } 3768 3769shortcuts-section { 3770 margin: 20px; } 3771 3772.shortcuts-search-results { 3773 margin: 20px; 3774 border-spacing: 24px; } 3775 3776shortcut { 3777 border-spacing: 6px; } 3778 3779shortcut > .keycap { 3780 min-width: 20px; 3781 min-height: 25px; 3782 margin-top: 2px; 3783 padding-bottom: 3px; 3784 padding-left: 6px; 3785 padding-right: 6px; 3786 color: #eeeeec; 3787 background-color: #272a34; 3788 border: 1px solid; 3789 border-color: #0d0e11; 3790 border-radius: 5px; 3791 box-shadow: inset 0 -3px #17191f; 3792 font-size: smaller; } 3793 3794:not(decoration):not(window):drop(active):focus, 3795:not(decoration):not(window):drop(active) { 3796 border-color: #19a187; 3797 box-shadow: inset 0 0 0 1px #19a187; 3798 caret-color: #19a187; } 3799 3800stackswitcher > button.text-button { 3801 min-width: 100px; } 3802 3803stackswitcher.circular { 3804 border-spacing: 12px; } 3805 stackswitcher.circular > button.circular, 3806 stackswitcher.circular > button.text-button.circular { 3807 min-width: 32px; 3808 min-height: 32px; 3809 padding: 0; } 3810 3811/************* 3812 * App Icons * 3813 *************/ 3814/* Outline for low res icons */ 3815.lowres-icon { 3816 -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } 3817 3818/* Drapshadow for large icons */ 3819.icon-dropshadow { 3820 -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } 3821 3822/********* 3823 * Emoji * 3824 ********/ 3825popover.emoji-picker > contents { 3826 padding: 0; } 3827 3828.emoji-searchbar { 3829 padding: 6px; 3830 border-spacing: 6px; 3831 border-bottom: 1px solid #0d0e11; } 3832 3833.emoji-toolbar { 3834 padding: 6px; 3835 border-spacing: 6px; 3836 border-top: 1px solid #0d0e11; } 3837 3838button.emoji-section { 3839 border-color: transparent; 3840 border-width: 3px; 3841 border-style: none none solid; 3842 border-radius: 0; 3843 padding: 3px 0 0; 3844 min-width: 32px; 3845 min-height: 28px; 3846 /* reset props inherited from the button style */ 3847 background: none; 3848 box-shadow: none; 3849 text-shadow: none; } 3850 button.emoji-section:hover { 3851 border-color: rgba(238, 238, 236, 0.1); } 3852 button.emoji-section:checked { 3853 border-color: #737680; } 3854 3855popover.emoji-picker emoji { 3856 font-size: x-large; 3857 padding: 6px; 3858 border-radius: 6px; } 3859 popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { 3860 background: #737680; } 3861 3862emoji-completion-row > box { 3863 border-spacing: 10px; 3864 padding: 2px 10px; } 3865 3866emoji-completion-row:focus, 3867emoji-completion-row:hover { 3868 background-color: #737680; 3869 color: #ffffff; } 3870 3871emoji-completion-row emoji:focus, 3872emoji-completion-row emoji:hover { 3873 background-color: #3b3e46; } 3874 3875popover.entry-completion > contents { 3876 padding: 0; } 3877 3878statusbar { 3879 padding: 6px 10px 6px 10px; } 3880 3881menubutton arrow { 3882 min-height: 16px; 3883 min-width: 16px; } 3884 menubutton arrow.none { 3885 -gtk-icon-source: -gtk-icontheme("open-menu-symbolic"); } 3886 menubutton arrow.down { 3887 -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 3888 menubutton arrow.up { 3889 -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 3890 menubutton arrow.left { 3891 -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } 3892 menubutton arrow.right { 3893 -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 3894 3895/********** 3896 * Button * 3897 **********/ 3898windowcontrols button, notebook > header > tabs > arrow, 3899button { 3900 padding: 2px 6px; } 3901 3902.titlebar:not(headerbar) stackswitcher button:checked:checked, 3903.titlebar:not(headerbar) button.toggle:active, 3904.titlebar:not(headerbar) button.toggle:checked, 3905headerbar stackswitcher button:checked:checked, 3906headerbar button.toggle:active, 3907headerbar button.toggle:checked, 3908button.flat:not(.link):hover, 3909button:active, 3910button:checked { 3911 background: #1b1d24; 3912 box-shadow: inset 0 3px 10px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); } 3913 .titlebar:not(headerbar) stackswitcher button:backdrop:checked, 3914 .titlebar:not(headerbar) button.toggle:backdrop:active, 3915 .titlebar:not(headerbar) button.toggle:backdrop:checked, 3916 headerbar stackswitcher button:backdrop:checked, 3917 headerbar button.toggle:backdrop:active, 3918 headerbar button.toggle:backdrop:checked, 3919 button.flat:backdrop:not(.link):hover, 3920 button:active:backdrop, 3921 button:checked:backdrop { 3922 box-shadow: none; } 3923 3924 3925button:disabled { 3926 box-shadow: none; } 3927 3928 3929button.flat:not(.link):hover { 3930 transition: none; } 3931 3932 3933button.flat:not(.link):backdrop { 3934 border-color: transparent; 3935 background-color: transparent; 3936 background-image: none; 3937 box-shadow: none; } 3938 3939 3940button.image-button { 3941 padding-left: 2px; 3942 padding-right: 2px; } 3943 3944 3945button.circular { 3946 min-height: 24px; 3947 min-width: 24px; 3948 padding: 2px; } 3949 3950/********** 3951 * Entry * 3952 **********/ 3953spinbutton:not(.vertical), spinbutton.vertical > text, 3954entry { 3955 min-height: 28px; } 3956 3957spinbutton:not(:disabled):not(.vertical), spinbutton.vertical > text:not(:disabled), 3958entry:not(:disabled) { 3959 box-shadow: inset 0 3px 10px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); 3960 background: #1b1d24; } 3961 3962spinbutton:backdrop:not(.vertical), spinbutton.vertical > text:backdrop, 3963entry:backdrop { 3964 box-shadow: none; 3965 border-color: #0d0e11; } 3966 3967headerbar spinbutton:not(.vertical), headerbar spinbutton.vertical > text, 3968headerbar entry { 3969 background: #272a34; } 3970 3971/********** 3972 * Switch * 3973 **********/ 3974switch { 3975 box-shadow: inset 0 3px 10px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); } 3976 switch:checked { 3977 border-right-width: 0; 3978 margin-right: 1px; 3979 box-shadow: inset 0 1px 3px -1px rgba(0, 0, 0, 0.6); } 3980 switch:checked, switch:checked:backdrop { 3981 border-color: rgba(0, 0, 0, 0.2); } 3982 switch:checked slider { 3983 border-color: #0d0e11; } 3984 switch:checked slider:backdrop:not(:disabled) { 3985 border-color: #0d0e11; } 3986 switch:backdrop, switch:disabled { 3987 box-shadow: none; 3988 border-color: #0d0e11; } 3989 switch:backdrop slider, switch:disabled slider { 3990 border-color: #0d0e11; } 3991 3992/************************* 3993 * Check and Radio items * 3994 *************************/ 3995check, 3996radio { 3997 background-image: linear-gradient(to bottom, #1e2128 20%, #1a1c23 90%); 3998 border-color: black; } 3999 check, check:active, 4000 radio, 4001 radio:active { 4002 box-shadow: inset 0 3px 10px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); } 4003 check:checked, check:indeterminate, 4004 radio:checked, 4005 radio:indeterminate { 4006 background-image: linear-gradient(to bottom, #737680 20%, #6e717b 90%); 4007 border-color: #2b2c2f; 4008 color: #ffffff; } 4009 check:checked, check:checked:active, check:indeterminate, check:indeterminate:active, 4010 radio:checked, 4011 radio:checked:active, 4012 radio:indeterminate, 4013 radio:indeterminate:active { 4014 box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.27); } 4015 check:checked:backdrop, check:indeterminate:backdrop, 4016 radio:checked:backdrop, 4017 radio:indeterminate:backdrop { 4018 background-image: image(#737680); 4019 box-shadow: none; } 4020 check:disabled, check:disabled:checked, check:disabled:indeterminate, check:disabled:backdrop, check:disabled:backdrop:checked, check:disabled:backdrop:indeterminate, 4021 radio:disabled, 4022 radio:disabled:checked, 4023 radio:disabled:indeterminate, 4024 radio:disabled:backdrop, 4025 radio:disabled:backdrop:checked, 4026 radio:disabled:backdrop:indeterminate { 4027 border-color: #0d0e11; 4028 background-image: image(#23252e); 4029 color: #eeeeec; } 4030 4031radio:not(:indeterminate):not(:checked):active:not(:backdrop) { 4032 -gtk-icon-transform: scale(0); } 4033 4034check:not(:indeterminate):not(:checked):active:not(:backdrop) { 4035 -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } 4036 4037radio:active, 4038check:active { 4039 -gtk-icon-transform: scale(0, 1); } 4040 4041radio:checked:not(:backdrop), radio:indeterminate:not(:backdrop), 4042check:checked:not(:backdrop), 4043check:indeterminate:not(:backdrop) { 4044 -gtk-icon-transform: unset; 4045 transition: 400ms; } 4046 4047/************ 4048 * GtkScale * 4049 ************/ 4050switch slider, 4051scale slider { 4052 color: #eeeeec; 4053 outline-color: rgba(115, 118, 128, 0.7); 4054 border-color: #0d0e11; 4055 background-image: image(#323643); 4056 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 4057 border-color: black; } 4058 switch:hover slider, switch slider:active, 4059 scale slider:active { 4060 background-image: image(#0f1014); 4061 border-color: #737680; } 4062 switch slider:backdrop, switch slider:disabled, 4063 scale slider:backdrop, 4064 scale slider:disabled { 4065 border-color: #0d0e11; 4066 background-image: image(#23252e); 4067 box-shadow: none; } 4068 4069/***************** 4070 * Title buttons * 4071 *****************/ 4072windowcontrols { 4073 margin: 0 5px; } 4074 windowcontrols.end { 4075 margin-left: 11px; } 4076 windowcontrols.right { 4077 margin-right: 11px; } 4078 windowcontrols button { 4079 color: transparent; 4080 background: #383d4b; 4081 margin: 0; 4082 padding: 0; 4083 min-width: 0; 4084 min-height: 0; 4085 border: 1px solid black; 4086 box-shadow: inset 0 3px 10px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); 4087 -gtk-icon-shadow: none; 4088 transition: all .2s; } 4089 windowcontrols button:hover { 4090 color: #eeeeec; 4091 background: #383d4b; 4092 border-color: transparent; 4093 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); } 4094 windowcontrols button.close { 4095 color: black; 4096 background: #737680; 4097 border-color: transparent; } 4098 windowcontrols button.close:hover { 4099 color: white; 4100 background: #81848d; } 4101 windowcontrols button:backdrop, windowcontrols button:backdrop:hover { 4102 color: transparent; 4103 background: transparent; 4104 box-shadow: none; 4105 border-color: #0d0e11; 4106 background: rgba(0, 0, 0, 0.3); } 4107 4108/*************** 4109 * Header bars * 4110 ***************/ 4111.titlebar:not(headerbar), 4112headerbar { 4113 min-height: 40px; 4114 border-color: black; 4115 background: #0d0e11 -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")), linear-gradient(to top, #16171d, #1a1c23); 4116 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); 4117 background-repeat: no-repeat; 4118 background-position: left; } 4119 .titlebar:backdrop:not(headerbar), 4120 headerbar:backdrop { 4121 background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")); 4122 background-repeat: no-repeat; 4123 background-position: left; 4124 box-shadow: none; } 4125 .dialog .titlebar:not(headerbar), .dialog headerbar, .dialog headerbar:backdrop { 4126 background: #23252e; 4127 border: 0; 4128 box-shadow: none; } 4129 4130headerbar entry, 4131headerbar spinbutton, 4132headerbar separator:not(.sidebar), 4133headerbar button { 4134 margin-top: 5px; 4135 margin-bottom: 5px; } 4136 4137headerbar switch { 4138 margin-top: 7px; 4139 margin-bottom: 7px; } 4140 4141/************** 4142 * Tree Views * 4143 **************/ 4144treeview.view { 4145 border-top-color: #0d0e11; } 4146 treeview.view:backdrop { 4147 border-top-color: #0d0e11; } 4148 treeview.view header button { 4149 color: #eeeeec; 4150 outline-color: rgba(115, 118, 128, 0.7); 4151 border-color: #0d0e11; 4152 background-image: image(#323643); 4153 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 4154 margin-left: -1px; } 4155 treeview.view header button:hover, treeview.view header button:active { 4156 border-color: #0d0e11; } 4157 treeview.view header button:backdrop { 4158 box-shadow: none; } 4159 4160/************* 4161 * Notebooks * 4162 *************/ 4163notebook > header { 4164 border: 0; 4165 padding: 0; 4166 background-color: #1b1d24; } 4167 notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs { 4168 margin: 0; } 4169 notebook > header.top > tabs > tab, 4170 notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab, 4171 notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab, 4172 notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab, 4173 notebook > header.right > tabs > tab.reorderable-page { 4174 padding: 3px 12px; 4175 border: 1px solid transparent; 4176 margin: 3px; 4177 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } 4178 notebook > header.top > tabs > tab:hover, 4179 notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover, 4180 notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover, 4181 notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover, 4182 notebook > header.right > tabs > tab.reorderable-page:hover { 4183 color: #eeeeec; 4184 border-color: #0d0e11; 4185 background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); 4186 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); 4187 transition-duration: 50ms; } 4188 notebook > header.top > tabs > tab:hover:backdrop, 4189 notebook > header.top > tabs > tab.reorderable-page:hover:backdrop, notebook > header.bottom > tabs > tab:hover:backdrop, 4190 notebook > header.bottom > tabs > tab.reorderable-page:hover:backdrop, notebook > header.left > tabs > tab:hover:backdrop, 4191 notebook > header.left > tabs > tab.reorderable-page:hover:backdrop, notebook > header.right > tabs > tab:hover:backdrop, 4192 notebook > header.right > tabs > tab.reorderable-page:hover:backdrop { 4193 border-color: transparent; 4194 background-color: transparent; 4195 background-image: none; 4196 box-shadow: none; } 4197 notebook > header.top > tabs > tab:checked, 4198 notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked, 4199 notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked, 4200 notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked, 4201 notebook > header.right > tabs > tab.reorderable-page:checked { 4202 color: #eeeeec; 4203 outline-color: rgba(115, 118, 128, 0.7); 4204 border-color: #0d0e11; 4205 background-image: image(#323643); 4206 box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } 4207 notebook > header.top > tabs > tab:checked:backdrop, 4208 notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop, 4209 notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop, 4210 notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop, 4211 notebook > header.right > tabs > tab.reorderable-page:checked:backdrop { 4212 color: #888a8d; 4213 border-color: #0d0e11; 4214 background-image: image(#23252e); 4215 box-shadow: none; 4216 transition: 200ms ease-out; } 4217 notebook > header.top > tabs > tab:backdrop, 4218 notebook > header.top > tabs > tab.reorderable-page:backdrop, notebook > header.bottom > tabs > tab:backdrop, 4219 notebook > header.bottom > tabs > tab.reorderable-page:backdrop, notebook > header.left > tabs > tab:backdrop, 4220 notebook > header.left > tabs > tab.reorderable-page:backdrop, notebook > header.right > tabs > tab:backdrop, 4221 notebook > header.right > tabs > tab.reorderable-page:backdrop { 4222 color: #888a8d; } 4223 notebook > header.top { 4224 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } 4225 notebook > header.bottom { 4226 background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } 4227 notebook > header.right { 4228 background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } 4229 notebook > header.left { 4230 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } 4231 notebook > header > tabs > tab { 4232 border-radius: 4px; 4233 transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 4234 min-height: 24px; } 4235 notebook > header > tabs > tab button.flat { 4236 margin-top: 1px; 4237 margin-bottom: 1px; } 4238 4239/********************** 4240 * Window Decorations * 4241 *********************/ 4242window.csd { 4243 border-radius: 8px 8px 5px 5px; 4244 border: 1px solid #272a34; 4245 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(13, 14, 17, 0.75); } 4246 window.csd:backdrop { 4247 box-shadow: 0 2px 8px 0 transparent, 0 0 0 1px transparent, 0 0 0 3px rgba(0, 0, 0, 0.25); } 4248 window.csd.dialog.message, window.csd.popup { 4249 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(13, 14, 17, 0.65); 4250 border-width: 0; } 4251 4252window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { 4253 border-width: 0; } 4254 4255window.popup { 4256 border-width: 0; } 4257 4258window.ssd { 4259 box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.75); 4260 border-width: 0; } 4261 4262tooltip.csd { 4263 border: 0; } 4264 4265/* GTK NAMED COLORS 4266 ---------------- 4267 use responsibly! */ 4268/* 4269widget text/foreground color */ 4270@define-color theme_fg_color #eeeeec; 4271/* 4272text color for entries, views and content in general */ 4273@define-color theme_text_color white; 4274/* 4275widget base background color */ 4276@define-color theme_bg_color #23252e; 4277/* 4278text widgets and the like base background color */ 4279@define-color theme_base_color #272a34; 4280/* 4281base background color of selections */ 4282@define-color theme_selected_bg_color #737680; 4283/* 4284text/foreground color of selections */ 4285@define-color theme_selected_fg_color #ffffff; 4286/* 4287base background color of insensitive widgets */ 4288@define-color insensitive_bg_color #242731; 4289/* 4290text foreground color of insensitive widgets */ 4291@define-color insensitive_fg_color #888a8d; 4292/* 4293insensitive text widgets and the like base background color */ 4294@define-color insensitive_base_color #272a34; 4295/* 4296widget text/foreground color on backdrop windows */ 4297@define-color theme_unfocused_fg_color #888a8d; 4298/* 4299text color for entries, views and content in general on backdrop windows */ 4300@define-color theme_unfocused_text_color white; 4301/* 4302widget base background color on backdrop windows */ 4303@define-color theme_unfocused_bg_color #23252e; 4304/* 4305text widgets and the like base background color on backdrop windows */ 4306@define-color theme_unfocused_base_color #292c37; 4307/* 4308base background color of selections on backdrop windows */ 4309@define-color theme_unfocused_selected_bg_color #737680; 4310/* 4311text/foreground color of selections on backdrop windows */ 4312@define-color theme_unfocused_selected_fg_color #ffffff; 4313/* 4314insensitive color on backdrop windows*/ 4315@define-color unfocused_insensitive_color #43495a; 4316/* 4317widgets main borders color */ 4318@define-color borders #0d0e11; 4319/* 4320widgets main borders color on backdrop windows */ 4321@define-color unfocused_borders #0d0e11; 4322/* 4323these are pretty self explicative */ 4324@define-color warning_color #fd7d00; 4325@define-color error_color #bf1717; 4326@define-color success_color #308e63; 4327/* 4328these colors are exported for the window manager and shouldn't be used in applications, 4329read if you used those and something break with a version upgrade you're on your own... */ 4330@define-color wm_title shade(#eeeeec, 1.8); 4331@define-color wm_unfocused_title #888a8d; 4332@define-color wm_highlight rgba(0, 0, 0, 0); 4333@define-color wm_borders_edge rgba(238, 238, 236, 0.07); 4334@define-color wm_bg_a shade(#23252e, 1.2); 4335@define-color wm_bg_b #23252e; 4336@define-color wm_shadow alpha(black, 0.35); 4337@define-color wm_border alpha(black, 0.18); 4338@define-color wm_button_hover_color_a shade(#23252e, 1.3); 4339@define-color wm_button_hover_color_b #23252e; 4340@define-color wm_button_active_color_a shade(#23252e, 0.85); 4341@define-color wm_button_active_color_b shade(#23252e, 0.89); 4342@define-color wm_button_active_color_c shade(#23252e, 0.9); 4343/* content view background such as thumbnails view in Photos or Boxes */ 4344@define-color content_view_bg #272a34; 4345/* Very contrasty background for text views (@theme_text_color foreground) */ 4346@define-color text_view_bg #1a1c23; 4347.gedit-document-panel { 4348 background-color: @sidebar_bg; 4349} 4350 4351.gedit-document-panel:backdrop { 4352 color: #b0b2b2; 4353} 4354 4355.gedit-document-panel row:selected:backdrop { 4356 background-color: #8b8e8f; 4357} 4358 4359.gedit-document-panel-group-row, 4360.gedit-document-panel-group-row:hover { 4361 border-top: 1px solid alpha(currentColor, 0.3); 4362} 4363 4364.gedit-document-panel-group-row:first-child, 4365.gedit-document-panel-group-row:first-child:hover { 4366 border-top: 0px; 4367} 4368 4369/* Try to look as the notebook tab close button */ 4370.gedit-document-panel row button.flat { 4371 padding: 0; 4372 margin-top: 8px; 4373 margin-bottom: 8px; 4374 min-width: 18px; 4375 min-height: 18px; 4376 color: alpha(currentColor,0.3); 4377} 4378 4379.gedit-document-panel row:hover button.flat { 4380 color: alpha(currentColor,0.5); 4381} 4382 4383.gedit-document-panel row button.flat:hover { 4384 color: @theme_fg_color; 4385} 4386 4387statusbar { 4388 border-top: 1px solid @borders; 4389} 4390 4391.gedit-search-slider { 4392 background-color: @theme_base_color; 4393 padding: 6px; 4394 border-color: @borders; 4395 border-radius: 0 0 3px 3px; 4396 border-width: 0 1px 1px 1px; 4397 border-style: solid; 4398} 4399 4400.gedit-search-entry-occurrences-tag { 4401 background-color: @theme_base_color; 4402 background-image: none; 4403 color: shade (@theme_unfocused_fg_color, 0.8); 4404 border: 0px; 4405 margin: 2px; 4406 padding: 2px; 4407} 4408.nautilus-window, 4409.nautilus-window notebook, 4410.nautilus-window notebook > stack { 4411 background: @theme_base_color; 4412} 4413 4414.nautilus-canvas-item { 4415 border-radius: 5px; 4416} 4417 4418.nautilus-canvas-item.dim-label, 4419.nautilus-list-dim-label { 4420 color: mix (@theme_fg_color, @theme_bg_color, 0.50); 4421} 4422 4423.nautilus-canvas-item.dim-label:selected, 4424.nautilus-list-dim-label:selected { 4425 color: mix (@theme_selected_fg_color, @theme_selected_bg_color, 0.20); 4426} 4427 4428/* Toolbar */ 4429 4430/* Here we use the .button background-image colors from Adwaita, but ligthen them, 4431 * since is not possible to use lighten () in common css. */ 4432@keyframes needs_attention_keyframes { 4433 0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; } 4434 /* can't do animation-direction, so holding the color on two keyframes */ 4435 30% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; } 4436 90% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; } 4437 100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; } 4438} 4439 4440.nautilus-operations-button-needs-attention { 4441 animation: needs_attention_keyframes 2s ease-in-out; 4442} 4443.nautilus-operations-button-needs-attention-multiple { 4444 animation: needs_attention_keyframes 3s ease-in-out; 4445 animation-iteration-count: 3; 4446} 4447 4448.disclosure-button { 4449 padding-left: 4px; 4450 padding-right: 4px; 4451} 4452 4453/* Path bar */ 4454 4455.path-bar-box { 4456 border-radius: 5px; 4457 border: 1px @borders solid; 4458 background-color: @theme_bg_color; 4459 padding-right: 6px; 4460} 4461 4462.nautilus-path-bar button { 4463 margin: 0px; 4464} 4465 4466.nautilus-path-bar button:first-child { 4467 border-width: 0px 1px 0px 0px; 4468 border-radius: 3.5px 0px 0px 3.5px; 4469} 4470 4471.nautilus-path-bar button:not(:first-child) { 4472 border-width: 0px 1px 0px 1px; 4473 border-radius: 0px 0px 0px 0px; 4474} 4475 4476.nautilus-path-bar button:not(:checked) image { opacity: 0.8; } /* dim the icon when not checked */ 4477 4478/* Make the tags fit into the box */ 4479entry.search > * { 4480 margin: 5px; 4481} 4482 4483/* Sidebar */ 4484 4485.nautilus-window .sidebar-row:selected { 4486 background: mix(@theme_bg_color, @theme_fg_color, 0.07); 4487} 4488 4489.nautilus-window .sidebar-row:selected, 4490.nautilus-window .sidebar-row:selected image, 4491.nautilus-window .sidebar-row:selected label { 4492 color: mix(@theme_fg_color, @theme_text_color, 0.5); 4493} 4494 4495.nautilus-window .sidebar-row:selected:backdrop { 4496 background: mix(@theme_unfocused_bg_color, @theme_unfocused_fg_color, 0.07); 4497} 4498 4499.nautilus-window .sidebar-row:selected:backdrop, 4500.nautilus-window .sidebar-row:selected:backdrop label { 4501 color: mix(@theme_unfocused_fg_color, @theme_unfocused_text_color, 0.15); 4502} 4503 4504/* Floating status bar */ 4505.floating-bar { 4506 padding: 1px; 4507 background-color: @theme_base_color; 4508 border-width: 1px; 4509 border-style: solid solid none; 4510 border-color: @borders; 4511 border-radius: 3px 3px 0 0; 4512} 4513 4514.floating-bar.bottom.left { /* axes left border and border radius */ 4515 border-left-style: none; 4516 border-top-left-radius: 0; 4517} 4518.floating-bar.bottom.right { /* axes right border and border radius */ 4519 border-right-style: none; 4520 border-top-right-radius: 0; 4521} 4522 4523.floating-bar:backdrop { 4524 background-color: @theme_unfocused_base_color; 4525 border-color: @unfocused_borders; 4526} 4527 4528.floating-bar button { 4529 padding: 0px; 4530} 4531 4532@define-color disk_space_unknown #888a85; 4533@define-color disk_space_used #729fcf; 4534@define-color disk_space_free #eeeeec; 4535 4536.disk-space-display { 4537 border-style: solid; 4538 border-width: 2px; 4539} 4540 4541.disk-space-display.unknown { 4542 background-color: @disk_space_unknown; 4543 border-color: shade(@disk_space_unknown, 0.7); 4544 color: @disk_space_unknown; 4545} 4546.disk-space-display.unknown.border { 4547 color: shade(@disk_space_unknown, 0.7); 4548} 4549 4550.disk-space-display.used { 4551 background-color: @disk_space_used; 4552 border-color: shade(@disk_space_used, 0.7); 4553 color: @disk_space_used; 4554} 4555.disk-space-display.used.border { 4556 color: shade(@disk_space_used, 0.7); 4557} 4558 4559.disk-space-display.free { 4560 background-color: @disk_space_free; 4561 border-color: shade(@disk_space_free, 0.7); 4562 color: @disk_space_free; 4563} 4564.disk-space-display.free.border { 4565 color: shade(@disk_space_free, 0.7); 4566} 4567 4568/* View */ 4569.nautilus-list-view .view { 4570 border-bottom: 1px solid @theme_bg_color; 4571} 4572 4573.search-information { 4574 background-color: @theme_selected_bg_color; 4575 color:white; 4576 padding:2px; 4577} 4578 4579/* Hide superfluous treeview drop target indication */ 4580.nautilus-list-view .view.dnd { 4581 border-style: none; 4582} 4583 4584@define-color conflict_bg #fef6b6; 4585 4586.conflict-row { 4587 background: @conflict_bg; 4588 color: black; 4589} 4590 4591.conflict-row:hover { 4592 background-color: shade(@conflict_bg, 0.9); 4593} 4594 4595.conflict-row:selected { 4596 background: @theme_selected_bg_color; 4597 color: @theme_selected_fg_color; 4598} 4599 4600/* Icon view */ 4601flowboxchild:selected { 4602 background-color:transparent; 4603} 4604 4605.icon-background { 4606 background-color:black; 4607 border-color:#4a90d9; 4608 border-style:solid; 4609 border-width:0px; 4610} 4611 4612flowboxchild > .icon-item-background { 4613 padding:4px; 4614} 4615flowboxchild:selected > .icon-item-background { 4616 padding:4px; 4617 background-color:#4a90d9; 4618 border-color:#4a90d9; 4619 border-style:solid; 4620 border-width:0px; 4621 border-radius:4px 4px 4px 4px; 4622} 4623