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