gtk.css
ASCII text, with very long lines (608)
1@keyframes ripple_effect { 2from { 3background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0)); } 4to { 5background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 6@keyframes flat_ripple_effect { 7from { 8background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.15)); } 9to { 10background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 11@keyframes row_ripple_effect { 12from { 13background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.05)); } 14to { 15background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 16@keyframes tab_ripple_effect { 17from { 18background-image: radial-gradient(circle farthest-corner at center, rgba(0, 188, 212, 0.6) 0%, transparent 0%); } 1950% { 20background-image: radial-gradient(circle farthest-corner at center, rgba(0, 188, 212, 0.6) 100%, transparent 0%); } 21to { 22background-image: radial-gradient(circle farthest-corner at center, transparent 100%, transparent 0%); } } 23@keyframes header_ripple_effect { 24from { 25background-image: radial-gradient(circle farthest-corner at center, #00BCD4 0%, transparent 0%); } 26to { 27background-image: radial-gradient(circle farthest-corner at center, #00BCD4 100%, transparent 0%); } } 28* { 29padding: 0; 30background-clip: padding-box; 31-GtkToolButton-icon-spacing: 4; 32-GtkTextView-error-underline-color: #DD2C00; 33-GtkScrolledWindow-scrollbar-spacing: 0; 34-GtkToolItemGroup-expander-size: 11; 35-GtkTreeView-expander-size: 11; 36-GtkTreeView-horizontal-separator: 4; 37-GtkWidget-text-handle-width: 24; 38-GtkWidget-text-handle-height: 24; 39-GtkDialog-button-spacing: 4; 40-GtkDialog-action-area-border: 0; 41outline-style: solid; 42outline-width: 2px; 43outline-color: alpha(currentColor, 0.3); 44outline-offset: -4px; 45-gtk-outline-radius: 2px; 46-gtk-secondary-caret-color: #00BCD4; } 47 48/*************** 49* Base States * 50***************/ 51.background { 52background-color: #ECEFF1; 53color: rgba(0, 0, 0, 0.8); } 54 55/* 56These wildcard seems unavoidable, need to investigate. 57Wildcards are bad and troublesome, use them with care, 58or better, just don't. 59Everytime a wildcard is used a kitten dies, painfully. 60*/ 61*:disabled { 62-gtk-icon-effect: dim; } 63 64.gtkstyle-fallback { 65background-color: #ECEFF1; 66color: rgba(0, 0, 0, 0.8); } 67.gtkstyle-fallback:hover { 68background-color: #dde3e6; 69color: rgba(0, 0, 0, 0.8); } 70.gtkstyle-fallback:active { 71background-color: #cfd6db; 72color: rgba(0, 0, 0, 0.8); } 73.gtkstyle-fallback:disabled { 74background-color: #ECEFF1; 75color: rgba(0, 0, 0, 0.32); } 76.gtkstyle-fallback:selected { 77background-color: #00BCD4; 78color: #FFFFFF; } 79 80.view, iconview { 81background-color: #FFFFFF; 82color: rgba(0, 0, 0, 0.8); } 83.view:hover, iconview:hover, .view:active, iconview:active, .view:selected, iconview:selected { 84border-radius: 2px; } 85.view:disabled, iconview:disabled { 86color: rgba(0, 0, 0, 0.32); } 87 88.view text, iconview text, 89textview text { 90background-color: #FFFFFF; 91color: rgba(0, 0, 0, 0.8); } 92.view text:disabled, iconview text:disabled, 93textview text:disabled { 94color: rgba(0, 0, 0, 0.32); } 95 96textview border { 97background-color: #f6f7f8; 98background-image: image(rgba(0, 0, 0, 0.1)); 99background-repeat: no-repeat; 100color: rgba(0, 0, 0, 0.48); } 101textview border.bottom { 102background-size: 100% 1px; 103background-position: top; } 104textview border.top { 105background-size: 100% 1px; 106background-position: bottom; } 107textview border.left { 108background-size: 1px 100%; 109background-position: right; } 110textview border.right { 111background-size: 1px 100%; 112background-position: left; } 113 114.rubberband, 115rubberband, 116flowbox rubberband, 117treeview.view rubberband, 118.content-view rubberband { 119border: 1px solid #00E5FF; 120background-color: rgba(0, 229, 255, 0.3); } 121 122flowbox flowboxchild { 123outline-offset: -2px; 124padding: 4px; 125border-radius: 2px; } 126 127label.separator { 128color: rgba(0, 0, 0, 0.8); } 129label selection { 130background-color: #00BCD4; 131color: #FFFFFF; } 132label:disabled { 133color: rgba(0, 0, 0, 0.32); } 134 135.dim-label, label.separator, .titlebar:not(headerbar) .subtitle, 136headerbar .subtitle { 137opacity: 0.6; } 138 139assistant .sidebar { 140padding: 4px 0; } 141assistant .sidebar label { 142min-height: 36px; 143padding: 0 12px; 144color: rgba(0, 0, 0, 0.48); 145font-weight: 500; } 146assistant .sidebar label.highlight { 147color: rgba(0, 0, 0, 0.8); } 148 149popover.background.touch-selection, popover.background.magnifier, popover.background.osd, .csd popover.background.touch-selection, .csd popover.background.magnifier, .csd popover.background.osd, .app-notification, 150.app-notification.frame, .osd .scale-popup, .floating-bar, .osd { 151opacity: 0.9; } 152 153/********************* 154* Spinner Animation * 155*********************/ 156@keyframes spin { 157to { 158-gtk-icon-transform: rotate(1turn); } } 159@keyframes spin_colors { 1601% { 161color: #66BB6A; } 16225% { 163color: #66BB6A; } 16426% { 165color: #42A5F5; } 16650% { 167color: #42A5F5; } 16851% { 169color: #FFA726; } 17075% { 171color: #FFA726; } 17276% { 173color: #EF5350; } 174100% { 175color: #EF5350; } } 176spinner { 177background: none; 178opacity: 0; 179-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } 180spinner:checked { 181opacity: 1; 182animation: spin 1s linear infinite, spin_colors 4s linear infinite; } 183spinner:checked:disabled { 184opacity: 0.4; } 185 186/**************** 187* Text Entries * 188****************/ 189spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry, 190notebook > stack:not(:only-child) revealer spinbutton:not(.vertical), 191entry { 192min-height: 36px; 193padding: 0 8px; 194border-radius: 2px; 195transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 196border-image: none; 197box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 198background-color: #FFFFFF; 199color: rgba(0, 0, 0, 0.8); } 200spinbutton:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry:focus, 201notebook > stack:not(:only-child) revealer spinbutton:focus:not(.vertical), 202entry:focus { 203border-image: none; 204box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 205spinbutton:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry:disabled, 206notebook > stack:not(:only-child) revealer spinbutton:disabled:not(.vertical), 207entry:disabled { 208box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 209background-color: #f6f7f8; 210color: rgba(0, 0, 0, 0.32); } 211spinbutton.flat:not(.vertical), notebook > stack:not(:only-child) entry, 212notebook > stack:not(:only-child) spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry.flat, 213notebook > stack:not(:only-child) revealer spinbutton.flat:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical), 214entry.flat { 215border-radius: 0; 216transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 217border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 0%, transparent 0%) 0 0 0/0 0 0px; 218box-shadow: inset 0 -1px alpha(currentColor, 0.3); 219background-color: transparent; 220color: rgba(0, 0, 0, 0.8); } 221spinbutton.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry:focus, 222notebook > stack:not(:only-child) spinbutton:focus:not(.vertical), colorchooser .popover.osd spinbutton:focus:not(.vertical), 223entry.flat:focus { 224border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 100%, transparent 0%) 0 0 2/0 0 2px; 225box-shadow: inset 0 -1px alpha(currentColor, 0.3); } 226spinbutton.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry:disabled, 227notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), colorchooser .popover.osd spinbutton:disabled:not(.vertical), 228entry.flat:disabled { 229box-shadow: inset 0 -1px alpha(currentColor, 0.3); 230background-color: transparent; 231color: rgba(0, 0, 0, 0.32); } 232spinbutton:not(.vertical) image, notebook > stack:not(:only-child) revealer entry image, 233notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image, 234entry image { 235color: alpha(currentColor, 0.75); } 236spinbutton:not(.vertical) image:hover, notebook > stack:not(:only-child) revealer entry image:hover, 237notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:hover, spinbutton:not(.vertical) image:active, notebook > stack:not(:only-child) revealer entry image:active, 238notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:active, 239entry image:hover, 240entry image:active { 241color: currentColor; } 242spinbutton:not(.vertical) image:disabled, notebook > stack:not(:only-child) revealer entry image:disabled, 243notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:disabled, 244entry image:disabled { 245color: alpha(currentColor, 0.6); } 246spinbutton:not(.vertical) image.left, notebook > stack:not(:only-child) revealer entry image.left, 247notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.left, 248entry image.left { 249padding-left: 2px; 250padding-right: 6px; } 251spinbutton:not(.vertical) image.right, notebook > stack:not(:only-child) revealer entry image.right, 252notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.right, 253entry image.right { 254padding-left: 6px; 255padding-right: 2px; } 256spinbutton:not(.vertical) undershoot.left, notebook > stack:not(:only-child) revealer entry undershoot.left, 257notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.left, 258entry undershoot.left { 259background-color: transparent; 260background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 261padding-left: 0; 262background-size: 2px 16px; 263background-repeat: repeat-y; 264background-origin: content-box; 265background-position: left center; } 266spinbutton:not(.vertical) undershoot.right, notebook > stack:not(:only-child) revealer entry undershoot.right, 267notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.right, 268entry undershoot.right { 269background-color: transparent; 270background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 271padding-right: 0; 272background-size: 2px 16px; 273background-repeat: repeat-y; 274background-origin: content-box; 275background-position: right center; } 276spinbutton.error:not(.vertical), notebook > stack:not(:only-child) revealer entry.error, 277notebook > stack:not(:only-child) revealer spinbutton.error:not(.vertical), 278entry.error { 279transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 280border-image: none; 281box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 282background-color: #DD2C00; 283color: #FFFFFF; } 284spinbutton.error:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry.error:focus, 285entry.error:focus { 286border-image: none; 287box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 288spinbutton.error:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry.error:disabled, 289entry.error:disabled { 290box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 291background-color: #f6f7f8; 292color: rgba(0, 0, 0, 0.32); } 293spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error, 294notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical), 295entry.error.flat { 296transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 297border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px; 298box-shadow: inset 0 -1px #DD2C00; 299background-color: transparent; 300color: rgba(0, 0, 0, 0.8); } 301spinbutton.error.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.error:focus, 302notebook > stack:not(:only-child) spinbutton.error:focus:not(.vertical), colorchooser .popover.osd spinbutton.error:focus:not(.vertical), 303entry.error.flat:focus { 304border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 100%, transparent 0%) 0 0 2/0 0 2px; 305box-shadow: inset 0 -1px #DD2C00; } 306spinbutton.error.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.error:disabled, 307notebook > stack:not(:only-child) spinbutton.error:disabled:not(.vertical), colorchooser .popover.osd spinbutton.error:disabled:not(.vertical), 308entry.error.flat:disabled { 309box-shadow: inset 0 -1px alpha(currentColor, 0.3); 310background-color: transparent; 311color: rgba(0, 0, 0, 0.32); } 312spinbutton.warning:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning, 313notebook > stack:not(:only-child) revealer spinbutton.warning:not(.vertical), 314entry.warning { 315transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 316border-image: none; 317box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 318background-color: #FF6D00; 319color: #FFFFFF; } 320spinbutton.warning:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning:focus, 321entry.warning:focus { 322border-image: none; 323box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 324spinbutton.warning:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning:disabled, 325entry.warning:disabled { 326box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 327background-color: #f6f7f8; 328color: rgba(0, 0, 0, 0.32); } 329spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning, 330notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical), 331entry.warning.flat { 332transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 333border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px; 334box-shadow: inset 0 -1px #FF6D00; 335background-color: transparent; 336color: rgba(0, 0, 0, 0.8); } 337spinbutton.warning.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.warning:focus, 338notebook > stack:not(:only-child) spinbutton.warning:focus:not(.vertical), colorchooser .popover.osd spinbutton.warning:focus:not(.vertical), 339entry.warning.flat:focus { 340border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 100%, transparent 0%) 0 0 2/0 0 2px; 341box-shadow: inset 0 -1px #FF6D00; } 342spinbutton.warning.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.warning:disabled, 343notebook > stack:not(:only-child) spinbutton.warning:disabled:not(.vertical), colorchooser .popover.osd spinbutton.warning:disabled:not(.vertical), 344entry.warning.flat:disabled { 345box-shadow: inset 0 -1px alpha(currentColor, 0.3); 346background-color: transparent; 347color: rgba(0, 0, 0, 0.32); } 348spinbutton:not(.vertical) progress, notebook > stack:not(:only-child) revealer entry progress, 349notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) progress, 350entry progress { 351margin: 2px -6px; 352border-style: none none solid; 353border-width: 2px; 354border-color: #00BCD4; 355background-color: transparent; } 356 357treeview acceleditor > label { 358background-color: #00BCD4; } 359 360treeview entry.flat, treeview entry { 361min-height: 0; 362padding: 2px; 363border-radius: 0; 364background-color: #FFFFFF; } 365treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus { 366border-image: none; 367box-shadow: none; } 368 369/*********** 370* Buttons * 371***********/ 372@keyframes needs_attention { 373from { 374background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)); } 375to { 376background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#FF4081), to(transparent)); } } 377button { 378min-height: 24px; 379min-width: 16px; 380padding: 6px 10px; 381border-radius: 2px; 382font-weight: 500; 383transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 384box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 385background-color: #FAFAFA; 386background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 387color: rgba(0, 0, 0, 0.6); } 388button:hover { 389box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 390background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 391color: rgba(0, 0, 0, 0.8); } 392button:active { 393transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 394animation: ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 395box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 396color: rgba(0, 0, 0, 0.8); } 397button:disabled { 398box-shadow: none; 399background-color: alpha(currentColor, 0.3); 400color: rgba(0, 0, 0, 0.24); } 401button:disabled > label { 402color: inherit; } 403button:checked { 404background-color: #00BCD4; 405color: #FFFFFF; } 406button:checked:disabled { 407background-color: alpha(currentColor, 0.3); 408color: rgba(0, 188, 212, 0.4); } 409button:checked:disabled > label { 410color: inherit; } 411.inline-toolbar 412button, modelbutton.flat, popover.background checkbutton, 413popover.background radiobutton, 414.menuitem.button.flat, spinbutton:not(.vertical) button, spinbutton.vertical button, toolbar.osd button, .app-notification button, 415.app-notification.frame button, .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action), 416headerbar button:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow, scrollbar button, check, 417radio, calendar.button, messagedialog.csd .dialog-action-area button, button.sidebar-button, 418button.flat { 419transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 420box-shadow: none; 421background-color: transparent; 422background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 423color: rgba(0, 0, 0, 0.6); } 424.inline-toolbar 425button:hover, modelbutton.flat:hover, popover.background checkbutton:hover, 426popover.background radiobutton:hover, 427.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, toolbar.osd button:hover, .app-notification button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action), 428headerbar button:hover:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover, 429radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover, 430button.flat:hover { 431box-shadow: none; 432background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.15)); 433color: rgba(0, 0, 0, 0.8); } 434.inline-toolbar 435button:active, modelbutton.flat:active, popover.background checkbutton:active, 436popover.background radiobutton:active, 437.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, toolbar.osd button:active, .app-notification button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action), 438headerbar button:active:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:active, scrollbar button:active, check:active, 439radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active, 440button.flat:active { 441transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 442animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 443box-shadow: none; 444color: rgba(0, 0, 0, 0.8); } 445.inline-toolbar 446button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled, 447popover.background radiobutton:disabled, 448.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, toolbar.osd button:disabled, .app-notification button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action), 449headerbar button:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled, 450radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled, 451button.flat:disabled { 452box-shadow: none; 453background-color: transparent; 454color: rgba(0, 0, 0, 0.24); } 455.inline-toolbar 456button:disabled > label, modelbutton.flat:disabled > label, popover.background checkbutton:disabled > label, 457popover.background radiobutton:disabled > label, 458.menuitem.button.flat:disabled > label, spinbutton:not(.vertical) button:disabled > label, spinbutton.vertical button:disabled > label, toolbar.osd button:disabled > label, .app-notification button:disabled > label, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action) > label, 459headerbar button:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:disabled > label, scrollbar button:disabled > label, check:disabled > label, 460radio:disabled > label, calendar.button:disabled > label, messagedialog.csd .dialog-action-area button:disabled > label, button.sidebar-button:disabled > label, 461button.flat:disabled > label { 462color: inherit; } 463.inline-toolbar 464button:checked, modelbutton.flat:checked, popover.background checkbutton:checked, 465popover.background radiobutton:checked, 466.menuitem.button.flat:checked, spinbutton:not(.vertical) button:checked, spinbutton.vertical button:checked, toolbar.osd button:checked, .app-notification button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action), 467headerbar button:checked:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked, scrollbar button:checked, check:checked, 468radio:checked, calendar.button:checked, messagedialog.csd .dialog-action-area button:checked, button.sidebar-button:checked, 469button.flat:checked { 470background-color: alpha(currentColor, 0.3); 471color: rgba(0, 0, 0, 0.8); } 472.inline-toolbar 473button:checked:disabled, modelbutton.flat:checked:disabled, popover.background checkbutton:checked:disabled, 474popover.background radiobutton:checked:disabled, 475.menuitem.button.flat:checked:disabled, spinbutton:not(.vertical) button:checked:disabled, spinbutton.vertical button:checked:disabled, toolbar.osd button:checked:disabled, .app-notification button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action), 476headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked:disabled, scrollbar button:checked:disabled, check:checked:disabled, 477radio:checked:disabled, calendar.button:checked:disabled, messagedialog.csd .dialog-action-area button:checked:disabled, button.sidebar-button:checked:disabled, 478button.flat:checked:disabled { 479background-color: alpha(currentColor, 0.3); 480color: rgba(0, 0, 0, 0.32); } 481.inline-toolbar 482button:checked:disabled > label, modelbutton.flat:checked:disabled > label, popover.background checkbutton:checked:disabled > label, 483popover.background radiobutton:checked:disabled > label, 484.menuitem.button.flat:checked:disabled > label, spinbutton:not(.vertical) button:checked:disabled > label, spinbutton.vertical button:checked:disabled > label, toolbar.osd button:checked:disabled > label, .app-notification button:checked:disabled > label, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, 485headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:checked:disabled > label, scrollbar button:checked:disabled > label, check:checked:disabled > label, 486radio:checked:disabled > label, calendar.button:checked:disabled > label, messagedialog.csd .dialog-action-area button:checked:disabled > label, button.sidebar-button:checked:disabled > label, 487button.flat:checked:disabled > label { 488color: inherit; } 489.inline-toolbar 490button:not(.text-button), spinbutton:not(.vertical) button, notebook > header tab button.flat, check, 491radio, button.titlebutton, .nautilus-circular-button, 492button.image-button { 493min-width: 24px; 494padding: 6px; 495-gtk-outline-radius: 100px; 496border-radius: 100px; } 497button.text-button { 498padding-left: 16px; 499padding-right: 16px; } 500.inline-toolbar 501button.text-button:not(.text-button), spinbutton:not(.vertical) button.text-button, notebook > header tab button.text-button.flat, check.text-button, 502radio.text-button, button.text-button.titlebutton, .text-button.nautilus-circular-button, 503button.text-button.image-button { 504padding-left: 10px; 505padding-right: 10px; 506-gtk-outline-radius: 2px; 507border-radius: 2px; } 508.inline-toolbar 509button.text-button:not(.text-button) label:last-child, spinbutton:not(.vertical) button.text-button label:last-child, notebook > header tab button.text-button.flat label:last-child, check.text-button label:last-child, 510radio.text-button label:last-child, button.text-button.titlebutton label:last-child, .text-button.nautilus-circular-button label:last-child, 511button.text-button.image-button label:last-child { 512padding-left: 2px; 513padding-right: 6px; } 514.inline-toolbar 515button.text-button:not(.text-button) label:first-child, spinbutton:not(.vertical) button.text-button label:first-child, notebook > header tab button.text-button.flat label:first-child, check.text-button label:first-child, 516radio.text-button label:first-child, button.text-button.titlebutton label:first-child, .text-button.nautilus-circular-button label:first-child, 517button.text-button.image-button label:first-child { 518padding-left: 6px; 519padding-right: 2px; } 520.inline-toolbar .linked > button, .linked > modelbutton.flat, popover.background .linked > checkbutton, 521popover.background .linked > radiobutton, 522.linked > .menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action), 523headerbar .linked > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow, scrollbar .linked > button, .linked > check, 524.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat, popover.background .linked.vertical > checkbutton, 525popover.background .linked.vertical > radiobutton, 526.linked.vertical > .menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action), 527headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow, scrollbar .linked.vertical > button, .linked.vertical > check, 528.linked.vertical > radio, .linked.vertical > calendar.button, messagedialog.csd .dialog-action-area .linked.vertical > button, .linked.vertical > button.sidebar-button, .linked > 529button.flat, .linked.vertical > 530button.flat { 531border-radius: 2px; } 532.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat, popover.background .linked > checkbutton.image-button, 533popover.background .linked > radiobutton.image-button, 534.linked > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action), 535headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.image-button, notebook > header tab .linked > button.flat, scrollbar .linked > button.image-button, .linked > check, 536.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat, popover.background .linked.vertical > checkbutton.image-button, 537popover.background .linked.vertical > radiobutton.image-button, 538.linked.vertical > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), 539headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.image-button, notebook > header tab .linked.vertical > button.flat, scrollbar .linked.vertical > button.image-button, .linked.vertical > check, 540.linked.vertical > radio, .linked.vertical > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.image-button, .linked.vertical > button.image-button.sidebar-button, .linked.vertical > button.flat.titlebutton, .linked.vertical > .flat.nautilus-circular-button, .linked > 541button.flat.image-button, .linked.vertical > 542button.flat.image-button { 543-gtk-outline-radius: 100px; 544border-radius: 100px; } 545.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat, popover.background .linked > checkbutton.text-button.image-button, 546popover.background .linked > radiobutton.text-button.image-button, 547.linked > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button.text-button, spinbutton.vertical .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), 548headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.text-button.image-button, notebook > header tab .linked > button.flat.text-button, scrollbar .linked > button.text-button.image-button, .linked > check.text-button, 549.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat, popover.background .linked.vertical > checkbutton.text-button.image-button, 550popover.background .linked.vertical > radiobutton.text-button.image-button, 551.linked.vertical > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button.text-button, spinbutton.vertical .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), 552headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.text-button.image-button, notebook > header tab .linked.vertical > button.flat.text-button, scrollbar .linked.vertical > button.text-button.image-button, .linked.vertical > check.text-button, 553.linked.vertical > radio.text-button, .linked.vertical > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.text-button.image-button, .linked.vertical > button.text-button.image-button.sidebar-button, .linked.vertical > button.flat.text-button.titlebutton, .linked.vertical > .flat.text-button.nautilus-circular-button, .linked > 554button.flat.text-button.image-button, .linked.vertical > 555button.flat.text-button.image-button { 556-gtk-outline-radius: 2px; 557border-radius: 2px; } 558.info button:disabled, 559.question button:disabled, 560.warning button:disabled, 561.error button:disabled, row:selected 562button:disabled { 563color: rgba(255, 255, 255, 0.3); } 564row:selected button.sidebar-button, .info button.flat, 565.question button.flat, 566.warning button.flat, 567.error button.flat, row:selected 568button.flat { 569color: rgba(255, 255, 255, 0.75); } 570row:selected button.sidebar-button:hover, .info button.flat:hover, 571.question button.flat:hover, 572.warning button.flat:hover, 573.error button.flat:hover, row:selected button.sidebar-button:active, .info button.flat:active, 574.question button.flat:active, 575.warning button.flat:active, 576.error button.flat:active, row:selected 577button.flat:hover, row:selected 578button.flat:active { 579color: #FFFFFF; } 580row:selected button.sidebar-button:disabled, .info button.flat:disabled, 581.question button.flat:disabled, 582.warning button.flat:disabled, 583.error button.flat:disabled, row:selected 584button.flat:disabled { 585color: rgba(255, 255, 255, 0.3); } 586button separator { 587min-width: 0; 588min-height: 0; 589background: transparent; } 590button.osd { 591padding: 12px 16px; } 592button.osd.image-button { 593padding: 12px; } 594button.osd:disabled { 595opacity: 0; } 596button.suggested-action { 597background-color: #FF4081; 598color: #FFFFFF; } 599button.suggested-action:disabled { 600box-shadow: none; 601background-color: alpha(currentColor, 0.3); 602color: rgba(0, 0, 0, 0.32); } 603button.suggested-action:disabled > label { 604color: inherit; } 605button.suggested-action:checked { 606background-color: #ff79a7; } 607button.suggested-action.flat { 608background-color: transparent; 609color: #FF4081; } 610button.suggested-action.flat:disabled { 611box-shadow: none; 612background-color: transparent; 613color: rgba(0, 0, 0, 0.32); } 614button.suggested-action.flat:disabled > label { 615color: inherit; } 616button.destructive-action { 617background-color: #FF5252; 618color: #FFFFFF; } 619button.destructive-action:disabled { 620box-shadow: none; 621background-color: alpha(currentColor, 0.3); 622color: rgba(0, 0, 0, 0.32); } 623button.destructive-action:disabled > label { 624color: inherit; } 625button.destructive-action:checked { 626background-color: #ff8686; } 627button.destructive-action.flat { 628background-color: transparent; 629color: #FF5252; } 630button.destructive-action.flat:disabled { 631box-shadow: none; 632background-color: transparent; 633color: rgba(0, 0, 0, 0.32); } 634button.destructive-action.flat:disabled > label { 635color: inherit; } 636.stack-switcher > 637button { 638outline-offset: -4px; } 639.stack-switcher > 640button > label { 641padding-left: 6px; 642padding-right: 6px; } 643.stack-switcher > 644button > image { 645padding-left: 6px; 646padding-right: 6px; 647padding-top: 3px; 648padding-bottom: 3px; } 649.stack-switcher > 650button.text-button { 651padding-left: 10px; 652padding-right: 10px; } 653.stack-switcher > 654button.image-button { 655padding-left: 4px; 656padding-right: 4px; } 657.stack-switcher > 658button.needs-attention:checked > label, 659.stack-switcher > 660button.needs-attention:checked > image { 661animation: none; 662background-image: none; } 663.primary-toolbar 664button { 665-gtk-icon-shadow: none; } 666 667.stack-switcher > 668button.needs-attention > label, 669.stack-switcher > 670button.needs-attention > image, stacksidebar row.needs-attention > label { 671animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 672background-repeat: no-repeat; 673background-position: right 3px; 674background-size: 6px 6px; } 675.stack-switcher > 676button.needs-attention > label:dir(rtl), 677.stack-switcher > 678button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { 679background-position: left 3px; } 680 681.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat), 682notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) > 683entry:not(.flat), .linked > 684button, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { 685border-radius: 0; } 686 687.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat), 688notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) > 689entry:not(.flat), .linked > 690button { 691-gtk-outline-radius: 2px; } 692.linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:first-child:not(.flat), 693notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), .linked:not(.vertical) > 694entry:first-child:not(.flat), .linked > 695button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { 696border-top-left-radius: 2px; 697border-bottom-left-radius: 2px; } 698.linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:last-child:not(.flat), 699notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), .linked:not(.vertical) > 700entry:last-child:not(.flat), .linked > 701button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { 702border-top-right-radius: 2px; 703border-bottom-right-radius: 2px; } 704.linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:only-child:not(.flat), 705notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), .linked:not(.vertical) > 706entry:only-child:not(.flat), .linked > 707button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo { 708border-radius: 2px; } 709 710.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat), 711notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical > 712entry:not(.flat), .linked.vertical > 713button, .linked.vertical > combobox > box > button.combo { 714border-radius: 0; } 715 716.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat), 717notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical > 718entry:not(.flat), .linked.vertical > 719button { 720-gtk-outline-radius: 2px; } 721.linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:first-child:not(.flat), 722notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), .linked.vertical > 723entry:first-child:not(.flat), .linked.vertical > 724button:first-child, .linked.vertical > combobox:first-child > box > button.combo { 725border-top-left-radius: 2px; 726border-top-right-radius: 2px; } 727.linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:last-child:not(.flat), 728notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), .linked.vertical > 729entry:last-child:not(.flat), .linked.vertical > 730button:last-child, .linked.vertical > combobox:last-child > box > button.combo { 731border-bottom-left-radius: 2px; 732border-bottom-right-radius: 2px; } 733.linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:only-child:not(.flat), 734notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), .linked.vertical > 735entry:only-child:not(.flat), .linked.vertical > 736button:only-child, .linked.vertical > combobox:only-child > box > button.combo { 737border-radius: 2px; } 738 739/* menu buttons */ 740modelbutton.flat, popover.background checkbutton, 741popover.background radiobutton, 742.menuitem.button.flat { 743min-height: 28px; 744padding-left: 8px; 745padding-right: 8px; 746border-radius: 2px; 747color: inherit; } 748modelbutton.flat check, popover.background checkbutton check, 749popover.background radiobutton check, modelbutton.flat check:hover, popover.background checkbutton check:hover, 750popover.background radiobutton check:hover, 751modelbutton.flat radio, 752popover.background checkbutton radio, 753popover.background radiobutton radio, 754modelbutton.flat radio:hover, 755popover.background checkbutton radio:hover, 756popover.background radiobutton radio:hover, 757.menuitem.button.flat check, 758.menuitem.button.flat check:hover, 759.menuitem.button.flat radio, 760.menuitem.button.flat radio:hover { 761background-image: none; } 762modelbutton.flat check:active, popover.background checkbutton check:active, 763popover.background radiobutton check:active, 764modelbutton.flat radio:active, 765popover.background checkbutton radio:active, 766popover.background radiobutton radio:active, 767.menuitem.button.flat check:active, 768.menuitem.button.flat radio:active { 769animation: none; } 770modelbutton.flat check:not(:indeterminate):checked:active, popover.background checkbutton check:not(:indeterminate):checked:active, 771popover.background radiobutton check:not(:indeterminate):checked:active, 772.menuitem.button.flat check:not(:indeterminate):checked:active { 773animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); } 774modelbutton.flat check:indeterminate:checked:active, popover.background checkbutton check:indeterminate:checked:active, 775popover.background radiobutton check:indeterminate:checked:active, modelbutton.flat radio:indeterminate:checked:active, popover.background checkbutton radio:indeterminate:checked:active, 776popover.background radiobutton radio:indeterminate:checked:active, 777.menuitem.button.flat check:indeterminate:checked:active, 778.menuitem.button.flat radio:indeterminate:checked:active { 779animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); } 780modelbutton.flat check:last-child, popover.background checkbutton check:last-child, 781popover.background radiobutton check:last-child, 782modelbutton.flat radio:last-child, 783popover.background checkbutton radio:last-child, 784popover.background radiobutton radio:last-child, 785.menuitem.button.flat check:last-child, 786.menuitem.button.flat radio:last-child { 787margin-left: 8px; } 788modelbutton.flat check:first-child, popover.background checkbutton check:first-child, 789popover.background radiobutton check:first-child, 790modelbutton.flat radio:first-child, 791popover.background checkbutton radio:first-child, 792popover.background radiobutton radio:first-child, 793.menuitem.button.flat check:first-child, 794.menuitem.button.flat radio:first-child { 795margin-right: 8px; } 796 797modelbutton.flat arrow, popover.background checkbutton arrow, 798popover.background radiobutton arrow { 799background: none; } 800modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, 801popover.background radiobutton arrow:hover { 802background: none; } 803modelbutton.flat arrow.left, popover.background checkbutton arrow.left, 804popover.background radiobutton arrow.left { 805-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } 806modelbutton.flat arrow.right, popover.background checkbutton arrow.right, 807popover.background radiobutton arrow.right { 808-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 809 810button.color { 811min-height: 24px; 812min-width: 24px; 813padding: 6px; } 814 815/********* 816* Links * 817*********/ 818*:link, button:link, 819button:visited, *:link:hover, button:hover:link, 820button:hover:visited, *:link:active, button:active:link, 821button:active:visited { 822color: #00BCD4; } 823*:link:visited, 824button:visited, *:link:visited:hover, 825button:visited:hover, *:link:visited:active, 826button:visited:active { 827color: #E040FB; } 828.info *:link, .info button:link, 829.info button:visited, 830.question *:link, 831.question button:link, 832.question button:visited, 833.warning *:link, 834.warning button:link, 835.warning button:visited, 836.error *:link, 837.error button:link, 838.error button:visited, *:link:selected, button:selected:link, 839button:selected:visited, .selection-mode.titlebar:not(headerbar) .subtitle:link, 840headerbar.selection-mode .subtitle:link, *:selected *:link, *:selected button:link, 841*:selected button:visited { 842color: #FFFFFF; } 843 844button:link > label, 845button:visited > label { 846text-decoration-line: underline; } 847 848/***************** 849* GtkSpinButton * 850*****************/ 851spinbutton:not(.vertical) { 852padding: 0; } 853notebook > stack:not(:only-child) spinbutton:not(.vertical) entry, 854spinbutton:not(.vertical) entry { 855min-width: 32px; 856margin: 0; 857border-image: none; 858border-radius: 0; 859box-shadow: none; 860background-color: transparent; } 861spinbutton:not(.vertical) button { 862min-height: 24px; 863min-width: 24px; 864padding: 0; 865border: solid 6px transparent; } 866spinbutton:not(.vertical) button.up { 867margin-left: -3px; } 868spinbutton:not(.vertical) button.down { 869margin-right: -3px; } 870spinbutton.vertical:disabled { 871color: rgba(0, 0, 0, 0.32); } 872spinbutton.vertical:drop(active) { 873box-shadow: none; } 874spinbutton.vertical entry { 875min-height: 36px; 876min-width: 48px; 877padding: 0; } 878spinbutton.vertical button { 879min-height: 36px; 880min-width: 48px; 881padding: 0; } 882spinbutton.vertical button.up { 883border-radius: 2px 2px 0 0; } 884spinbutton.vertical button.down { 885border-radius: 0 0 2px 2px; } 886treeview spinbutton:not(.vertical) { 887min-height: 0; 888border-style: none; 889border-radius: 0; } 890treeview spinbutton:not(.vertical) entry { 891min-height: 0; 892padding: 1px 2px; } 893 894/************** 895* ComboBoxes * 896**************/ 897combobox arrow { 898-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 899min-height: 16px; 900min-width: 16px; } 901combobox menu, 902combobox .menu { 903padding: 2px 0; } 904combobox menu menuitem, 905combobox .menu menuitem { 906min-height: 36px; 907padding: 0 10px; } 908combobox:drop(active) { 909box-shadow: none; } 910 911/************ 912* Toolbars * 913************/ 914toolbar { 915-GtkWidget-window-dragging: true; 916padding: 3px; 917background-color: #ECEFF1; } 918.osd toolbar { 919background-color: transparent; } 920toolbar.osd, .app-notification, 921.app-notification.frame { 922transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 923padding: 6px; 924border-radius: 2px; 925box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 926background-color: #FFFFFF; } 927toolbar.osd:backdrop, .app-notification:backdrop { 928box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 929toolbar.osd.left, .left.app-notification, toolbar.osd.right, .right.app-notification, toolbar.osd.top, .top.app-notification, toolbar.osd.bottom, .bottom.app-notification { 930border-radius: 0; } 931toolbar.horizontal separator { 932margin: 3px; } 933toolbar.vertical separator { 934margin: 3px; } 935toolbar:not(.inline-toolbar):not(.osd) scale, 936toolbar:not(.inline-toolbar):not(.osd) entry, 937toolbar:not(.inline-toolbar):not(.osd) spinbutton, 938toolbar:not(.inline-toolbar):not(.osd) button { 939margin: 3px; } 940toolbar:not(.inline-toolbar):not(.osd) switch { 941margin: 9px 3px; } 942 943.inline-toolbar { 944padding: 6px; 945border-style: solid; 946border-width: 0 1px 1px; 947border-color: rgba(0, 0, 0, 0.1); 948background-color: #f6f7f8; } 949 950searchbar, 951.location-bar { 952padding: 6px; 953border-style: solid; 954border-width: 0 0 1px; 955border-color: rgba(0, 0, 0, 0.1); 956background-color: #dee4e7; 957background-clip: border-box; } 958 959/*************** 960* Header bars * 961***************/ 962.titlebar:not(headerbar), 963headerbar { 964min-height: 48px; 965padding: 0 6px; 966border-width: 0 0 1px; 967border-style: solid; 968border-color: rgba(0, 0, 0, 0.1); 969box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); 970background-color: #dee4e7; 971background-clip: border-box; } 972.titlebar:not(headerbar) .title, 973headerbar .title { 974padding-left: 12px; 975padding-right: 12px; 976font-weight: bold; } 977.titlebar:not(headerbar) .subtitle, 978headerbar .subtitle { 979padding-left: 12px; 980padding-right: 12px; 981font-size: smaller; } 982.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action), 983headerbar button:not(.suggested-action):not(.destructive-action) { 984border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 0%, transparent 0%) 0 0 0/0 0 0px; } 985.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked, 986headerbar button:not(.suggested-action):not(.destructive-action):checked { 987border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00BCD4 100%, transparent 0%) 0 0 2/0 0 2px; 988background-color: transparent; 989color: rgba(0, 0, 0, 0.8); } 990.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled, 991headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled { 992background-color: transparent; 993color: rgba(0, 0, 0, 0.32); } 994.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label, 995headerbar button:not(.suggested-action):not(.destructive-action):checked:disabled > label { 996color: inherit; } 997.selection-mode.titlebar:not(headerbar), 998headerbar.selection-mode { 999animation: header_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 1000box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); 1001color: #FFFFFF; } 1002.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action), 1003headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) { 1004border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FFFFFF 0%, transparent 0%) 0 0 0/0 0 0px; } 1005.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action), .selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):hover, .selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):active, .selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked, 1006headerbar.selection-mode button:not(.suggested-action):not(.destructive-action), 1007headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):hover, 1008headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):active, 1009headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked { 1010color: #FFFFFF; } 1011.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled, 1012headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled { 1013color: rgba(255, 255, 255, 0.4); } 1014.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):disabled > label, 1015headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled > label { 1016color: inherit; } 1017.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked, 1018headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked { 1019border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FFFFFF 100%, transparent 0%) 0 0 2/0 0 2px; 1020color: #FFFFFF; } 1021.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled, 1022headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled { 1023color: rgba(255, 255, 255, 0.4); } 1024.selection-mode.titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):checked:disabled > label, 1025headerbar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled > label { 1026color: inherit; } 1027.selection-mode.titlebar:not(headerbar) .selection-menu, 1028headerbar.selection-mode .selection-menu { 1029padding-left: 16px; 1030padding-right: 16px; } 1031.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow, 1032headerbar.selection-mode .selection-menu GtkArrow { 1033-GtkArrow-arrow-scaling: 1; } 1034.selection-mode.titlebar:not(headerbar) .selection-menu .arrow, 1035headerbar.selection-mode .selection-menu .arrow { 1036-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1037.tiled .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .tiled 1038headerbar, .maximized 1039headerbar { 1040border-radius: 0; 1041box-shadow: none; } 1042.default-decoration.titlebar:not(headerbar), 1043headerbar.default-decoration { 1044min-height: 24px; 1045padding: 6px; 1046border-width: 0; } 1047.default-decoration.titlebar:not(headerbar) button.titlebutton, 1048headerbar.default-decoration button.titlebutton { 1049min-height: 24px; 1050min-width: 24px; 1051margin: 0; 1052padding: 0; } 1053.default-decoration.titlebar:not(headerbar) button.titlebutton:active, 1054headerbar.default-decoration button.titlebutton:active { 1055background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } 1056 1057headerbar entry, 1058headerbar spinbutton, 1059headerbar button { 1060margin-top: 6px; 1061margin-bottom: 6px; } 1062 1063.titlebar { 1064border-top-left-radius: 2px; 1065border-top-right-radius: 2px; } 1066 1067separator:first-child + headerbar, headerbar:first-child { 1068border-top-left-radius: 2px; } 1069.tiled separator:first-child + headerbar, .maximized separator:first-child + headerbar, .tiled headerbar:first-child, .maximized headerbar:first-child { 1070border-radius: 0; } 1071headerbar:last-child { 1072border-top-right-radius: 2px; } 1073.tiled headerbar:last-child, .maximized headerbar:last-child { 1074border-radius: 0; } 1075 1076window.csd > .titlebar:not(headerbar) { 1077padding: 0; 1078background-color: transparent; 1079background-image: none; 1080border-style: none; 1081box-shadow: none; } 1082.titlebar:not(headerbar) > separator { 1083background-color: #dee4e7; 1084background-image: image(rgba(0, 0, 0, 0.1)); } 1085 1086/************ 1087* Pathbars * 1088************/ 1089.path-bar button.text-button, .path-bar button.image-button, .path-bar button { 1090padding-left: 6px; 1091padding-right: 6px; } 1092.path-bar button image { 1093padding-left: 4px; 1094padding-right: 4px; } 1095.path-bar button.slider-button { 1096padding-left: 0; 1097padding-right: 0; } 1098 1099/************** 1100* Tree Views * 1101**************/ 1102treeview.view { 1103-GtkTreeView-grid-line-width: 1; 1104-GtkTreeView-grid-line-pattern: ''; 1105-GtkTreeView-tree-line-width: 1; 1106-GtkTreeView-tree-line-pattern: ''; 1107-GtkTreeView-expander-size: 16; 1108border-left-color: alpha(currentColor, 0.3); 1109border-top-color: rgba(0, 0, 0, 0.1); } 1110treeview.view:hover, treeview.view:active, treeview.view:selected { 1111border-radius: 0; } 1112treeview.view.separator { 1113min-height: 5px; 1114color: rgba(0, 0, 0, 0.1); } 1115treeview.view:drop(active) { 1116border-style: solid none; 1117border-width: 1px; 1118border-color: #FF4081; } 1119treeview.view:drop(active).after { 1120border-top-style: none; } 1121treeview.view:drop(active).before { 1122border-bottom-style: none; } 1123treeview.view.expander { 1124-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 1125-gtk-icon-transform: rotate(-90deg); 1126color: rgba(0, 0, 0, 0.6); } 1127treeview.view.expander:dir(rtl) { 1128-gtk-icon-transform: rotate(90deg); } 1129treeview.view.expander:checked { 1130-gtk-icon-transform: unset; } 1131treeview.view.expander:hover, treeview.view.expander:active { 1132color: rgba(0, 0, 0, 0.8); } 1133treeview.view.expander:disabled { 1134color: rgba(0, 0, 0, 0.24); } 1135treeview.view.expander:selected { 1136color: rgba(255, 255, 255, 0.75); } 1137treeview.view.expander:selected:hover, treeview.view.expander:selected:active { 1138color: #FFFFFF; } 1139treeview.view.expander:selected:disabled { 1140color: rgba(255, 255, 255, 0.3); } 1141treeview.view.progressbar { 1142border-style: none none solid; 1143border-width: 4px; 1144border-color: #00BCD4; 1145background-color: transparent; 1146background-image: none; } 1147treeview.view.progressbar:selected { 1148border-color: currentColor; } 1149treeview.view.trough { 1150border-style: none none solid; 1151border-width: 4px; 1152border-color: rgba(0, 188, 212, 0.3); 1153background-color: transparent; 1154background-image: none; } 1155treeview.view.trough:selected { 1156border-color: alpha(currentColor, 0.3); } 1157treeview.view header button { 1158padding: 2px 6px; 1159border-style: none solid solid none; 1160border-width: 1px; 1161border-color: rgba(0, 0, 0, 0.1); 1162border-radius: 0; 1163background-clip: border-box; } 1164treeview.view header button, treeview.view header button:hover, treeview.view header button:active { 1165box-shadow: none; } 1166treeview.view header button, treeview.view header button:disabled { 1167background-color: #FFFFFF; } 1168treeview.view header button:last-child { 1169border-right-style: none; } 1170treeview.view button.dnd, 1171treeview.view header.button.dnd { 1172padding: 2px 6px; 1173border-style: none solid solid; 1174border-width: 1px; 1175border-color: rgba(0, 0, 0, 0.1); 1176border-radius: 0; 1177box-shadow: none; 1178background-color: #FFFFFF; 1179background-clip: border-box; 1180color: #00BCD4; } 1181 1182/********* 1183* Menus * 1184*********/ 1185menubar, 1186.menubar { 1187-GtkWidget-window-dragging: true; 1188padding: 0; 1189box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); 1190background-color: #dee4e7; } 1191menubar > menuitem, 1192.menubar > menuitem { 1193transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1194min-height: 20px; 1195padding: 4px 8px; 1196color: rgba(0, 0, 0, 0.6); } 1197menubar > menuitem:hover, 1198.menubar > menuitem:hover { 1199box-shadow: inset 0 -2px #00BCD4; 1200color: rgba(0, 0, 0, 0.8); } 1201menubar > menuitem:disabled, 1202.menubar > menuitem:disabled { 1203color: rgba(0, 0, 0, 0.24); } 1204 1205menu, 1206.menu { 1207margin: 4px 0; 1208padding: 4px 0; 1209background-color: #FFFFFF; 1210border: 1px solid rgba(0, 0, 0, 0.1); } 1211.csd menu, .csd 1212.menu { 1213border: none; 1214border-radius: 2px; } 1215menu menuitem, 1216.menu menuitem { 1217min-height: 20px; 1218min-width: 40px; 1219padding: 4px 8px; 1220font: initial; 1221text-shadow: none; } 1222menu menuitem:hover, 1223.menu menuitem:hover { 1224background-color: #00BCD4; 1225color: #FFFFFF; } 1226menu menuitem:disabled, 1227.menu menuitem:disabled { 1228color: rgba(0, 0, 0, 0.32); } 1229menu menuitem arrow, 1230.menu menuitem arrow { 1231min-height: 16px; 1232min-width: 16px; } 1233menu menuitem arrow:dir(ltr), 1234.menu menuitem arrow:dir(ltr) { 1235-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); 1236margin-left: 8px; } 1237menu menuitem arrow:dir(rtl), 1238.menu menuitem arrow:dir(rtl) { 1239-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); 1240margin-right: 8px; } 1241menu > arrow, 1242.menu > arrow { 1243min-height: 16px; 1244min-width: 16px; 1245padding: 4px; 1246border-radius: 0; 1247background-color: #FFFFFF; 1248color: rgba(0, 0, 0, 0.6); } 1249menu > arrow.top, 1250.menu > arrow.top { 1251margin-top: -4px; 1252border-bottom: 1px solid rgba(0, 0, 0, 0.1); 1253-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1254menu > arrow.bottom, 1255.menu > arrow.bottom { 1256margin-bottom: -4px; 1257border-top: 1px solid rgba(0, 0, 0, 0.1); 1258-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1259menu > arrow:hover, 1260.menu > arrow:hover { 1261background-image: image(alpha(currentColor, 0.15)); 1262color: rgba(0, 0, 0, 0.8); } 1263menu > arrow:disabled, 1264.menu > arrow:disabled { 1265border-color: transparent; 1266background-color: transparent; 1267color: transparent; } 1268menu separator, 1269.menu separator { 1270margin: 4px 0; } 1271 1272menuitem accelerator { 1273color: alpha(currentColor, 0.6); } 1274menuitem check:dir(ltr), 1275menuitem radio:dir(ltr) { 1276margin-right: -8px; 1277margin-left: -16px; } 1278menuitem check:dir(rtl), 1279menuitem radio:dir(rtl) { 1280margin-right: -16px; 1281margin-left: -8px; } 1282 1283.csd.popup { 1284border-radius: 2px; } 1285 1286/*************** 1287* Popovers * 1288***************/ 1289popover.background { 1290transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 1291padding: 0; 1292border-radius: 3px; 1293box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 1294background-color: #f6f7f8; } 1295popover.background:backdrop { 1296box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 1297popover.background, .csd popover.background { 1298border-style: solid; 1299border-width: 1px; 1300border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3); } 1301popover.background > list, 1302popover.background > .view, 1303popover.background > iconview, 1304popover.background > toolbar { 1305border-style: none; 1306box-shadow: none; 1307background-color: transparent; } 1308popover.background separator { 1309margin: 4px 0; } 1310popover.background list separator { 1311margin: 0; } 1312 1313/************* 1314* Notebooks * 1315*************/ 1316notebook > header { 1317border-width: 1px; 1318border-color: rgba(0, 0, 0, 0.1); 1319background-color: #dee4e7; 1320background-clip: border-box; } 1321notebook > header.top { 1322border-bottom-style: solid; } 1323notebook > header.top > tabs > tab:not(.reorderable-page) { 1324margin-bottom: -1px; } 1325notebook > header.top > tabs > tab:not(.reorderable-page):hover { 1326box-shadow: inset 0 -2px alpha(currentColor, 0.3); } 1327notebook > header.top > tabs > tab:not(.reorderable-page):checked { 1328box-shadow: inset 0 -2px #00BCD4; } 1329notebook > header.bottom { 1330border-top-style: solid; } 1331notebook > header.bottom > tabs > tab:not(.reorderable-page) { 1332margin-top: -1px; } 1333notebook > header.bottom > tabs > tab:not(.reorderable-page):hover { 1334box-shadow: inset 0 2px alpha(currentColor, 0.3); } 1335notebook > header.bottom > tabs > tab:not(.reorderable-page):checked { 1336box-shadow: inset 0 2px #00BCD4; } 1337notebook > header.left { 1338border-right-style: solid; } 1339notebook > header.left > tabs > tab:not(.reorderable-page) { 1340margin-right: -1px; } 1341notebook > header.left > tabs > tab:not(.reorderable-page):hover { 1342box-shadow: inset -2px 0 alpha(currentColor, 0.3); } 1343notebook > header.left > tabs > tab:not(.reorderable-page):checked { 1344box-shadow: inset -2px 0 #00BCD4; } 1345notebook > header.right { 1346border-left-style: solid; } 1347notebook > header.right > tabs > tab:not(.reorderable-page) { 1348margin-left: -1px; } 1349notebook > header.right > tabs > tab:not(.reorderable-page):hover { 1350box-shadow: inset 2px 0 alpha(currentColor, 0.3); } 1351notebook > header.right > tabs > tab:not(.reorderable-page):checked { 1352box-shadow: inset 2px 0 #00BCD4; } 1353notebook > header.top > tabs > arrow { 1354border-top-style: none; } 1355notebook > header.bottom > tabs > arrow { 1356border-bottom-style: none; } 1357notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { 1358padding-left: 4px; 1359padding-right: 4px; } 1360notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { 1361margin-left: -8px; 1362-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } 1363notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { 1364margin-right: -8px; 1365-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 1366notebook > header.left > tabs > arrow { 1367border-left-style: none; } 1368notebook > header.right > tabs > arrow { 1369border-right-style: none; } 1370notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { 1371padding-top: 4px; 1372padding-bottom: 4px; } 1373notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { 1374margin-top: -8px; 1375-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1376notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { 1377margin-bottom: -8px; 1378-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1379notebook > header > tabs > arrow { 1380min-height: 16px; 1381min-width: 16px; 1382border-radius: 0; } 1383notebook > header tab { 1384transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1385min-height: 24px; 1386min-width: 24px; 1387padding: 6px 12px; 1388outline-offset: -6px; 1389border-width: 1px; 1390border-color: transparent; 1391color: rgba(0, 0, 0, 0.6); 1392font-weight: 500; } 1393notebook > header tab:hover { 1394color: rgba(0, 0, 0, 0.8); } 1395notebook > header tab:hover.reorderable-page { 1396border-color: rgba(0, 0, 0, 0.1); 1397background-color: #ECEFF1; } 1398notebook > header tab:disabled { 1399color: rgba(0, 0, 0, 0.24); } 1400notebook > header tab:checked { 1401color: rgba(0, 0, 0, 0.8); } 1402notebook > header tab:checked:disabled { 1403color: rgba(0, 0, 0, 0.32); } 1404notebook > header tab:checked:not(.reorderable-page) { 1405animation: tab_ripple_effect 0.6s ease-in-out; } 1406notebook > header tab:checked.reorderable-page { 1407border-color: rgba(0, 0, 0, 0.1); 1408background-color: #FAFAFA; } 1409notebook > header tab button.flat { 1410min-width: 24px; 1411min-height: 24px; 1412padding: 0; } 1413notebook > header tab button.flat:last-child { 1414margin-left: 6px; 1415margin-right: -6px; } 1416notebook > header tab button.flat:first-child { 1417margin-left: -6px; 1418margin-right: 6px; } 1419notebook > header.top tabs, notebook > header.bottom tabs { 1420padding-left: 8px; 1421padding-right: 8px; } 1422notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { 1423margin-left: 0; } 1424notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { 1425margin-right: 0; } 1426notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { 1427margin: 0 -1px; 1428border-style: none solid; } 1429notebook > header.left tabs, notebook > header.right tabs { 1430padding-top: 8px; 1431padding-bottom: 8px; } 1432notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { 1433margin-top: 0; } 1434notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { 1435margin-bottom: 0; } 1436notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { 1437margin: -1px 0; 1438border-style: solid none; } 1439notebook > stack:not(:only-child) { 1440background-color: #FFFFFF; } 1441 1442/************** 1443* Scrollbars * 1444**************/ 1445scrollbar { 1446transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1447background-color: #FFFFFF; 1448background-clip: padding-box; } 1449* { 1450-GtkScrollbar-has-backward-stepper: false; 1451-GtkScrollbar-has-forward-stepper: false; } 1452scrollbar.top { 1453border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 1454scrollbar.bottom { 1455border-top: 1px solid rgba(0, 0, 0, 0.1); } 1456scrollbar.left { 1457border-right: 1px solid rgba(0, 0, 0, 0.1); } 1458scrollbar.right { 1459border-left: 1px solid rgba(0, 0, 0, 0.1); } 1460scrollbar slider { 1461transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0; 1462min-width: 8px; 1463min-height: 8px; 1464border: 4px solid transparent; 1465border-radius: 100px; 1466background-clip: padding-box; 1467background-color: rgba(0, 0, 0, 0.48); } 1468scrollbar slider:hover { 1469background-color: rgba(0, 0, 0, 0.6); } 1470scrollbar slider:active { 1471background-color: rgba(0, 0, 0, 0.8); } 1472scrollbar slider:disabled { 1473background-color: rgba(0, 0, 0, 0.192); } 1474scrollbar.fine-tune slider { 1475transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0; 1476min-width: 4px; 1477min-height: 4px; } 1478scrollbar.fine-tune.horizontal slider { 1479margin: 2px 0; } 1480scrollbar.fine-tune.vertical slider { 1481margin: 0 2px; } 1482scrollbar.overlay-indicator:not(.dragging):not(.hovering) { 1483border-color: transparent; 1484background-color: transparent; } 1485scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { 1486min-width: 4px; 1487min-height: 4px; 1488margin: 2px; 1489border: 2px solid rgba(255, 255, 255, 0.3); } 1490scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { 1491min-width: 4px; 1492min-height: 4px; 1493margin: 2px; 1494border: 2px solid rgba(255, 255, 255, 0.3); 1495border-radius: 100px; 1496background-color: rgba(0, 0, 0, 0.48); 1497background-clip: padding-box; 1498-gtk-icon-source: none; } 1499scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled { 1500background-color: rgba(0, 0, 0, 0.192); } 1501scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { 1502min-width: 24px; } 1503scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { 1504min-width: 8px; } 1505scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { 1506min-height: 24px; } 1507scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { 1508min-height: 8px; } 1509scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { 1510background-color: rgba(255, 255, 255, 0.9); } 1511scrollbar.horizontal slider { 1512min-width: 24px; } 1513scrollbar.vertical slider { 1514min-height: 24px; } 1515scrollbar button { 1516min-width: 16px; 1517min-height: 16px; 1518padding: 0; 1519border-radius: 0; } 1520scrollbar.vertical button.down { 1521-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1522scrollbar.vertical button.up { 1523-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1524scrollbar.horizontal button.down { 1525-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } 1526scrollbar.horizontal button.up { 1527-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } 1528 1529/********** 1530* Switch * 1531**********/ 1532switch { 1533transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1534margin: 6px 0; 1535border: 4px solid transparent; 1536border-radius: 100px; 1537background-color: alpha(currentColor, 0.3); 1538background-clip: padding-box; 1539font-size: 0; } 1540switch:disabled { 1541color: rgba(0, 0, 0, 0.32); } 1542switch:checked { 1543background-color: rgba(255, 64, 129, 0.5); } 1544switch:checked:disabled { 1545background-color: rgba(255, 64, 129, 0.2); 1546color: rgba(0, 0, 0, 0.32); } 1547switch slider { 1548transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1549border-image: none; 1550box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1551background-color: #FFFFFF; 1552color: rgba(0, 0, 0, 0.8); 1553transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0; 1554min-width: 24px; 1555min-height: 24px; 1556margin: -4px 0 -4px -4px; 1557-gtk-outline-radius: 100px; 1558border-radius: 100px; 1559background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)); } 1560switch:hover slider { 1561border-image: none; 1562box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1563switch:disabled slider { 1564box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1565background-color: #f6f7f8; 1566color: rgba(0, 0, 0, 0.32); } 1567switch:checked slider { 1568transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0; 1569animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 1570margin: -4px -4px -4px 0; 1571color: #FFFFFF; } 1572switch:checked:disabled slider { 1573animation: none; } 1574 1575/************************* 1576* Check and Radio items * 1577*************************/ 1578.view.content-view.check:not(list), iconview.content-view.check:not(list) { 1579-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1580-gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png")); 1581margin: 8px; 1582background-color: transparent; } 1583.view.content-view.check:not(list):hover, iconview.content-view.check:not(list):hover, .view.content-view.check:not(list):active, iconview.content-view.check:not(list):active { 1584-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1585.view.content-view.check:not(list):disabled, iconview.content-view.check:not(list):disabled { 1586-gtk-icon-shadow: none; } 1587 1588.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list) { 1589-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1590-gtk-icon-source: -gtk-scaled(url("assets/checkbox-active-selectionmode.png"), url("assets/checkbox-active-selectionmode@2.png")); 1591margin: 8px; 1592background-color: transparent; } 1593.view.content-view.check:active:not(list):hover, iconview.content-view.check:active:not(list):hover, .view.content-view.check:active:not(list):active, iconview.content-view.check:active:not(list):active { 1594-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1595.view.content-view.check:active:not(list):disabled, iconview.content-view.check:active:not(list):disabled { 1596-gtk-icon-shadow: none; } 1597 1598.view.content-view.check:disabled:not(list), iconview.content-view.check:disabled:not(list) { 1599-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1600-gtk-icon-source: -gtk-scaled(url("assets/checkbox-insensitive-selectionmode.png"), url("assets/checkbox-insensitive-selectionmode@2.png")); 1601margin: 8px; 1602background-color: transparent; } 1603.view.content-view.check:disabled:not(list):hover, iconview.content-view.check:disabled:not(list):hover, .view.content-view.check:disabled:not(list):active, iconview.content-view.check:disabled:not(list):active { 1604-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1605.view.content-view.check:disabled:not(list):disabled, iconview.content-view.check:disabled:not(list):disabled { 1606-gtk-icon-shadow: none; } 1607 1608.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list) { 1609-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1610-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png")); 1611margin: 8px; 1612background-color: transparent; } 1613.view.content-view.check:checked:not(list):hover, iconview.content-view.check:checked:not(list):hover, .view.content-view.check:checked:not(list):active, iconview.content-view.check:checked:not(list):active { 1614-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1615.view.content-view.check:checked:not(list):disabled, iconview.content-view.check:checked:not(list):disabled { 1616-gtk-icon-shadow: none; } 1617 1618.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list) { 1619-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1620-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active-selectionmode.png"), url("assets/checkbox-checked-active-selectionmode@2.png")); 1621margin: 8px; 1622background-color: transparent; } 1623.view.content-view.check:checked:active:not(list):hover, iconview.content-view.check:checked:active:not(list):hover, .view.content-view.check:checked:active:not(list):active, iconview.content-view.check:checked:active:not(list):active { 1624-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1625.view.content-view.check:checked:active:not(list):disabled, iconview.content-view.check:checked:active:not(list):disabled { 1626-gtk-icon-shadow: none; } 1627 1628.view.content-view.check:disabled:checked:not(list), iconview.content-view.check:disabled:checked:not(list) { 1629-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1630-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive-selectionmode.png"), url("assets/checkbox-checked-insensitive-selectionmode@2.png")); 1631margin: 8px; 1632background-color: transparent; } 1633.view.content-view.check:disabled:checked:not(list):hover, iconview.content-view.check:disabled:checked:not(list):hover, .view.content-view.check:disabled:checked:not(list):active, iconview.content-view.check:disabled:checked:not(list):active { 1634-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1635.view.content-view.check:disabled:checked:not(list):disabled, iconview.content-view.check:disabled:checked:not(list):disabled { 1636-gtk-icon-shadow: none; } 1637 1638checkbutton.text-button, radiobutton.text-button { 1639padding: 2px 0; 1640outline-offset: 0; } 1641checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { 1642margin-left: 4px; } 1643checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { 1644margin-right: 4px; } 1645 1646check, 1647radio { 1648min-height: 24px; 1649min-width: 24px; 1650-gtk-icon-source: none; 1651margin: -12px -8px; 1652padding: 12px; 1653outline-offset: 4px; 1654color: alpha(currentColor, 0.75); } 1655check:hover, check:active, 1656radio:hover, 1657radio:active { 1658color: currentColor; } 1659check:checked, check:checked:disabled, 1660radio:checked, 1661radio:checked:disabled { 1662background-color: transparent; } 1663check:checked, check:indeterminate, 1664radio:checked, 1665radio:indeterminate { 1666color: #FF4081; } 1667check:checked:disabled, check:indeterminate:disabled, 1668radio:checked:disabled, 1669radio:indeterminate:disabled { 1670color: rgba(255, 64, 129, 0.4); } 1671check:only-child, 1672radio:only-child { 1673margin: -12px; } 1674menu menuitem check, menu menuitem 1675radio { 1676transition: none; 1677margin: -16px -16px; } 1678menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem 1679radio:not(:checked):not(:indeterminate):hover { 1680color: alpha(currentColor, 0.75); } 1681menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem 1682radio, menu menuitem 1683radio:hover, menu menuitem 1684radio:disabled { 1685background-image: none; } 1686 1687check { 1688-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); } 1689check:checked { 1690-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); } 1691check:indeterminate { 1692-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); } 1693 1694radio { 1695border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; 1696-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); } 1697radio:checked { 1698border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } 1699radio:checked:disabled { 1700border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; } 1701radio:indeterminate { 1702-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); } 1703radio:indeterminate:checked { 1704border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; } 1705 1706@keyframes check_check { 1707from { 1708-gtk-icon-transform: rotate(90deg); } 1709to { 1710-gtk-icon-transform: unset; } } 1711@keyframes check_radio { 1712from { 1713-gtk-icon-transform: scale(0); } 1714to { 1715-gtk-icon-transform: unset; } } 1716@keyframes check_indeterminate { 1717from { 1718-gtk-icon-transform: unset; } 171950% { 1720-gtk-icon-transform: scale(0, 1); } 1721to { 1722-gtk-icon-transform: unset; } } 1723check:not(:indeterminate):checked { 1724animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); } 1725 1726check:not(:indeterminate):checked:active { 1727animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 1728 1729check:indeterminate:checked, radio:indeterminate:checked { 1730animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); } 1731 1732check:indeterminate:checked:active, radio:indeterminate:checked:active { 1733animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 1734 1735menu menuitem check:not(:indeterminate):checked, 1736menu menuitem radio:not(:indeterminate):checked, 1737menu menuitem check:indeterminate:checked, 1738menu menuitem radio:indeterminate:checked { 1739animation: none; } 1740 1741treeview.view check, 1742treeview.view radio { 1743padding: 0; } 1744treeview.view check:checked:hover, treeview.view check:selected:checked:hover, 1745treeview.view radio:checked:hover, 1746treeview.view radio:selected:checked:hover { 1747background-image: none; } 1748treeview.view check, 1749treeview.view radio { 1750color: rgba(0, 0, 0, 0.6); } 1751treeview.view check:hover, treeview.view check:active, 1752treeview.view radio:hover, 1753treeview.view radio:active { 1754color: rgba(0, 0, 0, 0.8); } 1755treeview.view check:disabled, 1756treeview.view radio:disabled { 1757color: rgba(0, 0, 0, 0.24); } 1758treeview.view check:checked, treeview.view check:indeterminate, 1759treeview.view radio:checked, 1760treeview.view radio:indeterminate { 1761color: #FF4081; } 1762treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled, 1763treeview.view radio:checked:disabled, 1764treeview.view radio:indeterminate:disabled { 1765color: rgba(255, 64, 129, 0.4); } 1766treeview.view check:selected, 1767treeview.view radio:selected { 1768color: rgba(255, 255, 255, 0.75); } 1769treeview.view check:selected:hover, treeview.view check:selected:active, 1770treeview.view radio:selected:hover, 1771treeview.view radio:selected:active { 1772color: #FFFFFF; } 1773treeview.view check:selected:disabled, 1774treeview.view radio:selected:disabled { 1775color: rgba(255, 255, 255, 0.3); } 1776treeview.view check:selected:checked, treeview.view check:selected:indeterminate, 1777treeview.view radio:selected:checked, 1778treeview.view radio:selected:indeterminate { 1779color: #FF4081; } 1780treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled, 1781treeview.view radio:selected:checked:disabled, 1782treeview.view radio:selected:indeterminate:disabled { 1783color: rgba(255, 64, 129, 0.4); } 1784 1785treeview.view radio:checked { 1786-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png"))); 1787border-image: none; } 1788 1789/************ 1790* GtkScale * 1791************/ 1792scale { 1793min-height: 12px; 1794min-width: 12px; 1795padding: 12px; } 1796scale * { 1797transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 1798scale slider { 1799min-height: 24px; 1800min-width: 24px; 1801margin: -10px; } 1802scale trough { 1803outline-offset: 2px; 1804background-color: alpha(currentColor, 0.3); } 1805scale trough:disabled { 1806color: rgba(0, 0, 0, 0.32); } 1807scale highlight { 1808background-color: #FF4081; } 1809scale highlight:disabled { 1810background-color: transparent; } 1811scale fill { 1812background-color: alpha(currentColor, 0.3); } 1813scale fill:disabled { 1814background-color: transparent; } 1815scale slider { 1816background-repeat: no-repeat; 1817background-position: center; 1818background-size: calc(100% - 8px); } 1819scale slider { 1820background-image: -gtk-scaled(url("assets/slider.png"), url("assets/slider@2.png")); } 1821scale slider:disabled { 1822background-image: -gtk-scaled(url("assets/slider-insensitive.png"), url("assets/slider-insensitive@2.png")); } 1823scale slider:hover { 1824background-size: calc(100% - 4px); } 1825scale slider:active { 1826background-size: calc(100% - 0px); } 1827scale.fine-tune slider { 1828background-size: calc(100% - 12px); } 1829scale value { 1830color: alpha(currentColor, 0.6); } 1831scale marks { 1832color: alpha(currentColor, 0.3); } 1833scale marks.top { 1834margin-bottom: 8px; 1835margin-top: -16px; } 1836scale marks.bottom { 1837margin-top: 8px; 1838margin-bottom: -16px; } 1839scale marks.top { 1840margin-right: 8px; 1841margin-left: -16px; } 1842scale marks.bottom { 1843margin-left: 8px; 1844margin-right: -16px; } 1845scale.horizontal indicator { 1846min-height: 8px; 1847min-width: 1px; } 1848scale.vertical indicator { 1849min-height: 1px; 1850min-width: 8px; } 1851scale.color.horizontal slider, 1852scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1853min-height: 30px; 1854min-width: 24px; 1855margin-top: -16px; 1856background-position: center calc(100% - 4px); } 1857scale.color.horizontal slider, 1858scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1859background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); } 1860scale.color.horizontal slider:hover, 1861scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1862background-position: center calc(100% - 2px); } 1863scale.color.horizontal slider:active, 1864scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1865background-position: center calc(100% - 0px); } 1866scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1867background-position: center calc(100% - 6px); } 1868scale.color.horizontal slider, 1869scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1870min-height: 30px; 1871min-width: 24px; 1872margin-top: -16px; 1873background-position: center calc(100% - 4px); } 1874scale.color.horizontal slider:disabled, 1875scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { 1876background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-insensitive@2.png")); } 1877scale.color.horizontal slider:hover, 1878scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1879background-position: center calc(100% - 2px); } 1880scale.color.horizontal slider:active, 1881scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1882background-position: center calc(100% - 0px); } 1883scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1884background-position: center calc(100% - 6px); } 1885scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1886min-height: 30px; 1887min-width: 24px; 1888margin-bottom: -16px; 1889background-position: center calc(4px); } 1890scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1891background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); } 1892scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1893background-position: center calc(2px); } 1894scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1895background-position: center calc(0px); } 1896scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1897background-position: center calc(6px); } 1898scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1899min-height: 30px; 1900min-width: 24px; 1901margin-bottom: -16px; 1902background-position: center calc(4px); } 1903scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { 1904background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-insensitive@2.png")); } 1905scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1906background-position: center calc(2px); } 1907scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1908background-position: center calc(0px); } 1909scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1910background-position: center calc(6px); } 1911scale.color.vertical:dir(rtl) slider, 1912scale.vertical contents:last-child:not(:only-child) > trough > slider { 1913min-height: 24px; 1914min-width: 30px; 1915margin-left: -16px; 1916background-position: calc(4px) center; } 1917scale.color.vertical:dir(rtl) slider, 1918scale.vertical contents:last-child:not(:only-child) > trough > slider { 1919background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); } 1920scale.color.vertical:dir(rtl) slider:hover, 1921scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1922background-position: calc(2px) center; } 1923scale.color.vertical:dir(rtl) slider:active, 1924scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1925background-position: calc(0px) center; } 1926scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1927background-position: calc(6px) center; } 1928scale.color.vertical:dir(rtl) slider, 1929scale.vertical contents:last-child:not(:only-child) > trough > slider { 1930min-height: 24px; 1931min-width: 30px; 1932margin-left: -16px; 1933background-position: calc(4px) center; } 1934scale.color.vertical:dir(rtl) slider:disabled, 1935scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { 1936background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-insensitive@2.png")); } 1937scale.color.vertical:dir(rtl) slider:hover, 1938scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1939background-position: calc(2px) center; } 1940scale.color.vertical:dir(rtl) slider:active, 1941scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1942background-position: calc(0px) center; } 1943scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1944background-position: calc(6px) center; } 1945scale.color.vertical:dir(ltr) slider, 1946scale.vertical contents:first-child:not(:only-child) > trough > slider { 1947min-height: 24px; 1948min-width: 30px; 1949margin-right: -16px; 1950background-position: calc(100% - 4px) center; } 1951scale.color.vertical:dir(ltr) slider, 1952scale.vertical contents:first-child:not(:only-child) > trough > slider { 1953background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); } 1954scale.color.vertical:dir(ltr) slider:hover, 1955scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1956background-position: calc(100% - 2px) center; } 1957scale.color.vertical:dir(ltr) slider:active, 1958scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1959background-position: calc(100% - 0px) center; } 1960scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1961background-position: calc(100% - 6px) center; } 1962scale.color.vertical:dir(ltr) slider, 1963scale.vertical contents:first-child:not(:only-child) > trough > slider { 1964min-height: 24px; 1965min-width: 30px; 1966margin-right: -16px; 1967background-position: calc(100% - 4px) center; } 1968scale.color.vertical:dir(ltr) slider:disabled, 1969scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { 1970background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-insensitive@2.png")); } 1971scale.color.vertical:dir(ltr) slider:hover, 1972scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1973background-position: calc(100% - 2px) center; } 1974scale.color.vertical:dir(ltr) slider:active, 1975scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1976background-position: calc(100% - 0px) center; } 1977scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1978background-position: calc(100% - 6px) center; } 1979scale.color { 1980min-height: 0; 1981min-width: 0; } 1982scale.color.horizontal { 1983padding: 0 0 12px 0; } 1984scale.color.horizontal trough { 1985padding-bottom: 4px; } 1986scale.color.horizontal slider { 1987margin-bottom: -14px; 1988margin-top: 0; } 1989scale.color.vertical:dir(ltr) { 1990padding: 0 0 0 12px; } 1991scale.color.vertical:dir(ltr) trough { 1992padding-left: 4px; } 1993scale.color.vertical:dir(ltr) slider { 1994margin-left: -14px; 1995margin-right: 0; } 1996scale.color.vertical:dir(rtl) { 1997padding: 0 12px 0 0; } 1998scale.color.vertical:dir(rtl) trough { 1999padding-right: 4px; } 2000scale.color.vertical:dir(rtl) slider { 2001margin-right: -14px; 2002margin-left: 0; } 2003 2004/***************** 2005* Progress bars * 2006*****************/ 2007progressbar { 2008color: rgba(0, 0, 0, 0.48); 2009font-size: smaller; } 2010progressbar.horizontal trough, 2011progressbar.horizontal progress { 2012min-height: 4px; } 2013progressbar.vertical trough, 2014progressbar.vertical progress { 2015min-width: 4px; } 2016progressbar trough { 2017background-color: rgba(0, 188, 212, 0.3); } 2018progressbar progress { 2019background-color: #00BCD4; } 2020 2021/************* 2022* Level Bar * 2023*************/ 2024levelbar block { 2025min-width: 36px; 2026min-height: 4px; } 2027levelbar.vertical block { 2028min-width: 4px; 2029min-height: 36px; } 2030levelbar trough { 2031padding: 2px; 2032border-radius: 2px; 2033transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2034border-image: none; 2035box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2036background-color: #FFFFFF; 2037color: rgba(0, 0, 0, 0.8); } 2038levelbar trough:disabled { 2039box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2040background-color: #f6f7f8; 2041color: rgba(0, 0, 0, 0.32); } 2042levelbar.horizontal.discrete block { 2043margin: 0 1px; } 2044levelbar.vertical.discrete block { 2045margin: 1px 0; } 2046levelbar.horizontal.discrete trough { 2047padding: 2px 1px; } 2048levelbar.vertical.discrete trough { 2049padding: 1px 2px; } 2050levelbar block.low { 2051background-color: #FF6D00; } 2052levelbar block.high { 2053background-color: #00BCD4; } 2054levelbar block.full { 2055background-color: #00C853; } 2056levelbar block.empty { 2057background-color: alpha(currentColor, 0.3); 2058color: rgba(0, 0, 0, 0.32); } 2059 2060/**************** 2061* Print dialog * 2062*****************/ 2063printdialog paper { 2064padding: 0; 2065border: 1px solid rgba(0, 0, 0, 0.1); 2066background: #FFFFFF; 2067color: rgba(0, 0, 0, 0.8); } 2068printdialog .dialog-action-box { 2069margin: 12px; } 2070 2071/********** 2072* Frames * 2073**********/ 2074frame > border, 2075.frame { 2076margin: 0; 2077padding: 0; 2078border: 1px solid rgba(0, 0, 0, 0.1); 2079border-radius: 0; 2080box-shadow: none; } 2081frame > border.flat, 2082.frame.flat { 2083border-style: none; } 2084 2085actionbar > revealer > box { 2086padding: 6px; 2087border-top: 1px solid rgba(0, 0, 0, 0.1); } 2088 2089scrolledwindow viewport.frame { 2090border-style: none; } 2091scrolledwindow overshoot.top { 2092background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2093background-repeat: no-repeat; 2094background-position: center top; 2095background-color: transparent; 2096border: none; 2097box-shadow: none; } 2098scrolledwindow overshoot.bottom { 2099background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2100background-repeat: no-repeat; 2101background-position: center bottom; 2102background-color: transparent; 2103border: none; 2104box-shadow: none; } 2105scrolledwindow overshoot.left { 2106background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2107background-repeat: no-repeat; 2108background-position: left center; 2109background-color: transparent; 2110border: none; 2111box-shadow: none; } 2112scrolledwindow overshoot.right { 2113background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2114background-repeat: no-repeat; 2115background-position: right center; 2116background-color: transparent; 2117border: none; 2118box-shadow: none; } 2119scrolledwindow undershoot.top { 2120background-color: transparent; 2121background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2122padding-top: 0; 2123background-size: 16px 2px; 2124background-repeat: repeat-x; 2125background-origin: content-box; 2126background-position: center top; } 2127scrolledwindow undershoot.bottom { 2128background-color: transparent; 2129background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2130padding-bottom: 0; 2131background-size: 16px 2px; 2132background-repeat: repeat-x; 2133background-origin: content-box; 2134background-position: center bottom; } 2135scrolledwindow undershoot.left { 2136background-color: transparent; 2137background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2138padding-left: 0; 2139background-size: 2px 16px; 2140background-repeat: repeat-y; 2141background-origin: content-box; 2142background-position: left center; } 2143scrolledwindow undershoot.right { 2144background-color: transparent; 2145background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2146padding-right: 0; 2147background-size: 2px 16px; 2148background-repeat: repeat-y; 2149background-origin: content-box; 2150background-position: right center; } 2151scrolledwindow junction { 2152border-style: solid none none solid; 2153border-width: 1px; 2154border-color: rgba(0, 0, 0, 0.1); 2155background-color: #FFFFFF; } 2156scrolledwindow junction:dir(rtl) { 2157border-style: solid solid none none; } 2158 2159separator { 2160min-width: 1px; 2161min-height: 1px; 2162background: rgba(0, 0, 0, 0.1); } 2163 2164/********* 2165* Lists * 2166*********/ 2167list { 2168border-color: rgba(0, 0, 0, 0.1); 2169background-color: #FFFFFF; } 2170list row { 2171padding: 2px; } 2172 2173row { 2174transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 2175row:hover { 2176transition: none; } 2177row.activatable, .view, iconview, treeview.view header button { 2178background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); } 2179row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover { 2180background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); } 2181row.activatable.has-open-popup, .has-open-popup.view, iconview.has-open-popup, treeview.view header button.has-open-popup, row.activatable:active, .view:active, iconview:active, treeview.view header button:active { 2182transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 2183animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 2184 2185/********************* 2186* App Notifications * 2187*********************/ 2188.app-notification, 2189.app-notification.frame { 2190margin: 8px; } 2191.app-notification border, 2192.app-notification.frame border { 2193border: none; } 2194 2195/************* 2196* Expanders * 2197*************/ 2198expander arrow { 2199transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2200min-width: 16px; 2201min-height: 16px; 2202-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 2203-gtk-icon-transform: rotate(-90deg); 2204color: rgba(0, 0, 0, 0.6); } 2205expander arrow:dir(rtl) { 2206-gtk-icon-transform: rotate(90deg); } 2207expander arrow:checked { 2208-gtk-icon-transform: unset; } 2209expander arrow:hover, expander arrow:active { 2210color: rgba(0, 0, 0, 0.8); } 2211expander arrow:disabled { 2212color: rgba(0, 0, 0, 0.24); } 2213expander arrow:selected { 2214color: rgba(255, 255, 255, 0.75); } 2215expander arrow:selected:hover, expander arrow:selected:active { 2216color: #FFFFFF; } 2217expander arrow:selected:disabled { 2218color: rgba(255, 255, 255, 0.3); } 2219 2220/************ 2221* Calendar * 2222***********/ 2223calendar { 2224padding: 1px; 2225border: 1px solid rgba(0, 0, 0, 0.1); 2226color: rgba(0, 0, 0, 0.8); } 2227calendar:disabled { 2228color: rgba(0, 0, 0, 0.32); } 2229calendar:selected { 2230border-radius: 3px; } 2231calendar.header { 2232border: none; 2233border-bottom: 1px solid rgba(0, 0, 0, 0.1); 2234border-radius: 0; } 2235calendar:indeterminate { 2236color: alpha(currentColor, 0.4); } 2237calendar.highlight { 2238color: alpha(currentColor, 0.6); 2239font-weight: 500; } 2240 2241/*********** 2242* Dialogs * 2243***********/ 2244messagedialog.background { 2245background-color: #FAFAFA; } 2246messagedialog .titlebar { 2247min-height: 24px; 2248border-style: none; 2249background-color: #FAFAFA; } 2250messagedialog.csd.background { 2251border-bottom-left-radius: 2px; 2252border-bottom-right-radius: 2px; } 2253messagedialog.csd .dialog-action-area button { 2254padding: 8px 16px; 2255border-top: 1px solid rgba(0, 0, 0, 0.1); 2256border-radius: 0; } 2257messagedialog.csd .dialog-action-area button:first-child { 2258border-bottom-left-radius: 2px; } 2259messagedialog.csd .dialog-action-area button:last-child { 2260border-bottom-right-radius: 2px; } 2261 2262filechooser .dialog-action-box { 2263border-top: 1px solid rgba(0, 0, 0, 0.1); } 2264filechooser #pathbarbox { 2265border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 2266 2267filechooserbutton:drop(active) { 2268box-shadow: none; } 2269 2270/*********** 2271* Sidebar * 2272***********/ 2273.sidebar { 2274border-style: none; 2275background-color: #f6f7f8; } 2276stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { 2277border-right: 1px solid rgba(0, 0, 0, 0.1); 2278border-left-style: none; } 2279stacksidebar.sidebar:dir(rtl) list 2280.sidebar:dir(rtl), stacksidebar.sidebar.right list 2281.sidebar:dir(rtl), .sidebar.right { 2282border-left: 1px solid rgba(0, 0, 0, 0.1); 2283border-right-style: none; } 2284.sidebar list { 2285background-color: transparent; } 2286paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { 2287border-style: none; } 2288 2289stacksidebar row { 2290padding: 10px 4px; } 2291stacksidebar row > label { 2292padding-left: 6px; 2293padding-right: 6px; } 2294 2295/**************** 2296* File chooser * 2297****************/ 2298placessidebar > viewport.frame { 2299border-style: none; } 2300placessidebar row { 2301min-height: 32px; 2302padding: 0; } 2303placessidebar row > revealer { 2304padding: 0 12px; } 2305placessidebar row:selected { 2306color: #FFFFFF; } 2307placessidebar row:disabled { 2308color: rgba(0, 0, 0, 0.32); } 2309placessidebar row image.sidebar-icon { 2310opacity: 0.6; } 2311placessidebar row image.sidebar-icon:dir(ltr) { 2312padding-right: 8px; } 2313placessidebar row image.sidebar-icon:dir(rtl) { 2314padding-left: 8px; } 2315placessidebar row label.sidebar-label:dir(ltr) { 2316padding-right: 2px; } 2317placessidebar row label.sidebar-label:dir(rtl) { 2318padding-left: 2px; } 2319button.sidebar-button { 2320min-height: 24px; 2321min-width: 24px; 2322margin-top: 0; 2323margin-bottom: 0; 2324padding: 0; 2325border-radius: 100%; 2326-gtk-outline-radius: 100%; } 2327placessidebar row.sidebar-placeholder-row { 2328min-height: 2px; 2329padding: 0 8px; 2330background-image: image(#FF4081); 2331background-clip: content-box; } 2332placessidebar row.sidebar-new-bookmark-row { 2333color: #FF4081; } 2334placessidebar row:drop(active):not(:disabled) { 2335box-shadow: inset 0 0 0 2px #FF4081; } 2336 2337placesview .server-list-button > image { 2338-gtk-icon-transform: rotate(0turn); } 2339placesview .server-list-button:checked > image { 2340-gtk-icon-transform: rotate(-0.5turn); } 2341placesview > actionbar > revealer > box > label { 2342padding-left: 8px; 2343padding-right: 8px; } 2344 2345/********* 2346* Paned * 2347*********/ 2348paned > separator { 2349min-width: 1px; 2350min-height: 1px; 2351-gtk-icon-source: none; 2352border-style: none; 2353background-color: transparent; 2354background-image: image(rgba(0, 0, 0, 0.1)); 2355background-size: 1px 1px; } 2356paned > separator.wide { 2357min-width: 6px; 2358min-height: 6px; 2359background-color: #ECEFF1; 2360background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1)); 2361background-size: 1px 1px, 1px 1px; } 2362paned.horizontal > separator { 2363background-repeat: repeat-y; } 2364paned.horizontal > separator:dir(ltr) { 2365margin: 0 -8px 0 0; 2366padding: 0 8px 0 0; 2367background-position: left; } 2368paned.horizontal > separator:dir(rtl) { 2369margin: 0 0 0 -8px; 2370padding: 0 0 0 8px; 2371background-position: right; } 2372paned.horizontal > separator.wide { 2373margin: 0; 2374padding: 0; 2375background-repeat: repeat-y, repeat-y; 2376background-position: left, right; } 2377paned.vertical > separator { 2378margin: 0 0 -8px 0; 2379padding: 0 0 8px 0; 2380background-repeat: repeat-x; 2381background-position: top; } 2382paned.vertical > separator.wide { 2383margin: 0; 2384padding: 0; 2385background-repeat: repeat-x, repeat-x; 2386background-position: bottom, top; } 2387 2388/************** 2389* GtkInfoBar * 2390**************/ 2391infobar { 2392border-style: none; } 2393 2394.info { 2395background-color: #66BB6A; } 2396 2397.question { 2398background-color: #42A5F5; } 2399 2400.warning { 2401background-color: #FFA726; } 2402 2403.error { 2404background-color: #EF5350; } 2405 2406.info, 2407.question, 2408.warning, 2409.error { 2410color: #FFFFFF; } 2411 2412/************ 2413* Tooltips * 2414************/ 2415tooltip { 2416border-radius: 2px; 2417box-shadow: none; } 2418tooltip.background { 2419background-color: rgba(255, 255, 255, 0.9); } 2420tooltip decoration { 2421background-color: transparent; } 2422tooltip label { 2423min-height: 20px; 2424padding: 4px 6px; } 2425tooltip * { 2426padding: 0; 2427background-color: transparent; 2428color: inherit; } 2429 2430/***************** 2431* Color Chooser * 2432*****************/ 2433colorswatch.top { 2434border-top-left-radius: 2.5px; 2435border-top-right-radius: 2.5px; } 2436colorswatch.top overlay { 2437border-top-left-radius: 2px; 2438border-top-right-radius: 2px; } 2439colorswatch.bottom { 2440border-bottom-left-radius: 2.5px; 2441border-bottom-right-radius: 2.5px; } 2442colorswatch.bottom overlay { 2443border-bottom-left-radius: 2px; 2444border-bottom-right-radius: 2px; } 2445colorswatch.left, colorswatch:first-child:not(.top) { 2446border-top-left-radius: 2.5px; 2447border-bottom-left-radius: 2.5px; } 2448colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { 2449border-top-left-radius: 2px; 2450border-bottom-left-radius: 2px; } 2451colorswatch.right, colorswatch:last-child:not(.bottom) { 2452border-top-right-radius: 2.5px; 2453border-bottom-right-radius: 2.5px; } 2454colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { 2455border-top-right-radius: 2px; 2456border-bottom-right-radius: 2px; } 2457colorswatch.dark overlay { 2458color: white; } 2459colorswatch.light overlay { 2460color: rgba(0, 0, 0, 0.8); } 2461colorswatch.dark { 2462color: white; } 2463colorswatch.light { 2464color: rgba(0, 0, 0, 0.8); } 2465colorswatch:drop(active) { 2466box-shadow: none; } 2467colorswatch:drop(active).light overlay { 2468box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2469colorswatch:drop(active).dark overlay { 2470box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2471colorswatch overlay { 2472transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2473box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2474colorswatch overlay:hover { 2475box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2476colorswatch#add-color-button { 2477border-radius: 2px 2px 0 0; 2478color: white; } 2479colorswatch#add-color-button:only-child { 2480border-radius: 2px; } 2481colorswatch#add-color-button overlay { 2482background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%); 2483color: white; } 2484colorswatch:disabled { 2485opacity: 0.4; } 2486colorswatch:disabled overlay { 2487box-shadow: none; } 2488colorswatch#editor-color-sample { 2489border-radius: 2.5px; } 2490colorswatch#editor-color-sample overlay { 2491border-radius: 2px; } 2492 2493colorchooser .popover.osd { 2494transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 2495border-radius: 2px; 2496box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 2497background-color: #FFFFFF; } 2498colorchooser .popover.osd:backdrop { 2499box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2500 2501/******** 2502* Misc * 2503********/ 2504.content-view { 2505background-color: #ECEFF1; } 2506 2507/********************** 2508* Window Decorations * 2509*********************/ 2510decoration { 2511transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 2512border-radius: 2px 2px 0 0; 2513box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent; 2514margin: 8px; } 2515decoration:backdrop { 2516box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; } 2517.fullscreen decoration, .tiled decoration { 2518border-radius: 0; } 2519.popup decoration { 2520box-shadow: none; } 2521.ssd decoration { 2522box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } 2523.csd.popup decoration { 2524border-radius: 2px; 2525box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2526tooltip.csd decoration { 2527border-radius: 2px; 2528box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2529messagedialog.csd decoration { 2530border-radius: 2px; } 2531.solid-csd decoration { 2532margin: 4px; 2533border-radius: 0; 2534box-shadow: none; 2535background-color: #ECEFF1; } 2536 2537.view:selected, iconview:selected, .view text selection, iconview text selection, 2538textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2539notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2540entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2541popover.background radiobutton:selected, 2542.menuitem.button.flat:selected, row:selected, calendar:selected { 2543background-color: #00BCD4; } 2544row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection, 2545textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2546notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2547entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2548popover.background radiobutton:selected, 2549.menuitem.button.flat:selected, row:selected, calendar:selected { 2550color: #FFFFFF; } 2551row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled, 2552textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled, 2553notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled, 2554entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, 2555popover.background radiobutton:disabled:selected, 2556.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { 2557color: rgba(255, 255, 255, 0.4); } 2558 2559.monospace { 2560font: Monospace; } 2561 2562/********************** 2563* Touch Copy & Paste * 2564*********************/ 2565cursor-handle { 2566border-radius: 100px; 2567background-color: #FF4081; 2568background-image: none; } 2569cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { 2570padding-left: 6px; 2571border-top-right-radius: 0; } 2572cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { 2573padding-right: 6px; 2574border-top-left-radius: 0; } 2575cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { 2576-GtkWidget-text-handle-width: 24; 2577-GtkWidget-text-handle-height: 30; 2578-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); } 2579 2580.context-menu { 2581font: initial; } 2582 2583button.circular { 2584border-radius: 100px; 2585-gtk-outline-radius: 100px; } 2586button.circular label { 2587padding: 0; } 2588 2589.keycap { 2590min-width: 12px; 2591min-height: 26px; 2592margin-top: 2px; 2593padding-bottom: 2px; 2594padding-left: 8px; 2595padding-right: 8px; 2596border: solid 1px rgba(0, 0, 0, 0.1); 2597border-radius: 3px; 2598box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1); 2599background-color: #FFFFFF; 2600color: rgba(0, 0, 0, 0.8); 2601font-size: smaller; } 2602 2603*:drop(active) { 2604transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2605box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 2px #FF4081; 2606caret-color: #FF4081; } 2607 2608stackswitcher button.text-button { 2609min-width: 100px; } 2610 2611stackswitcher button.circular, 2612stackswitcher button.text-button.circular { 2613min-width: 36px; 2614min-height: 36px; 2615padding: 0; } 2616 2617.floating-bar { 2618min-height: 32px; 2619padding: 0; 2620border-style: solid solid none; 2621border-width: 1px; 2622border-color: rgba(0, 0, 0, 0.1); 2623border-radius: 3px 3px 0 0; 2624background-color: #FFFFFF; 2625background-clip: padding-box; 2626transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; } 2627.floating-bar.left { 2628margin-right: 7px; 2629border-left-style: none; 2630border-top-left-radius: 0; } 2631.floating-bar.right { 2632margin-left: 7px; 2633border-right-style: none; 2634border-top-right-radius: 0; } 2635.floating-bar button { 2636min-height: 24px; 2637min-width: 24px; 2638margin: 4px; 2639padding: 0; } 2640 2641/************ 2642* Nautilus * 2643************/ 2644.nautilus-window, 2645.nautilus-window notebook, 2646.nautilus-window notebook > stack { 2647background: #FFFFFF; } 2648 2649.nautilus-desktop-window, 2650.nautilus-desktop-window notebook, 2651.nautilus-desktop-window notebook > stack { 2652background: transparent; } 2653 2654.nautilus-desktop.nautilus-canvas-item { 2655color: #FFFFFF; 2656text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2657 2658.nautilus-desktop.nautilus-canvas-item:selected { 2659text-shadow: none; } 2660 2661@keyframes needs_attention_keyframes { 26620% { 2663background-color: transparent; } 266450% { 2665background-color: alpha(currentColor, 0.3); } 2666100% { 2667background-color: transparent; } } 2668.nautilus-operations-button-needs-attention { 2669color: #FF4081; 2670animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); } 2671 2672.nautilus-operations-button-needs-attention-multiple { 2673color: #FF4081; 2674animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); 2675animation-iteration-count: 2; } 2676 2677.disk-space-display.unknown { 2678background-color: #FF6D00; } 2679 2680.disk-space-display.used { 2681background-color: #00BCD4; } 2682 2683.disk-space-display.free { 2684background-color: alpha(currentColor, 0.3); 2685color: rgba(0, 0, 0, 0.32); } 2686 2687.documents-entry-tag { 2688margin: 3px -2px 3px 8px; 2689padding: 0 8px; 2690border-radius: 100px; 2691box-shadow: none; 2692background-color: #00BCD4; 2693color: #FFFFFF; } 2694.documents-entry-tag:hover { 2695box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2696 2697.documents-entry-tag.button { 2698margin: 0 -2px; 2699padding: 4px; 2700border-radius: 100px; 2701box-shadow: none; 2702color: rgba(255, 255, 255, 0.75); } 2703.documents-entry-tag.button:hover, .documents-entry-tag.button:active { 2704color: #FFFFFF; } 2705 2706.nautilus-window searchbar { 2707border-top: 1px solid rgba(0, 0, 0, 0.1); } 2708 2709.nautilus-window .searchbar-container { 2710margin-top: -1px; } 2711 2712/* GTK NAMED COLORS 2713---------------- 2714use responsibly! */ 2715/* 2716widget text/foreground color */ 2717@define-color theme_fg_color rgba(0, 0, 0, 0.8); 2718/* 2719text color for entries, views and content in general */ 2720@define-color theme_text_color rgba(0, 0, 0, 0.8); 2721/* 2722widget base background color */ 2723@define-color theme_bg_color #ECEFF1; 2724/* 2725text widgets and the like base background color */ 2726@define-color theme_base_color #FFFFFF; 2727/* 2728base background color of selections */ 2729@define-color theme_selected_bg_color #00BCD4; 2730/* 2731text/foreground color of selections */ 2732@define-color theme_selected_fg_color #FFFFFF; 2733/* 2734base background color of insensitive widgets */ 2735@define-color insensitive_bg_color #ECEFF1; 2736/* 2737text foreground color of insensitive widgets */ 2738@define-color insensitive_fg_color rgba(0, 0, 0, 0.32); 2739/* 2740insensitive text widgets and the like base background color */ 2741@define-color insensitive_base_color #f6f7f8; 2742/* 2743widget text/foreground color on backdrop windows */ 2744@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8); 2745/* 2746text color for entries, views and content in general on backdrop windows */ 2747@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8); 2748/* 2749widget base background color on backdrop windows */ 2750@define-color theme_unfocused_bg_color #ECEFF1; 2751/* 2752text widgets and the like base background color on backdrop windows */ 2753@define-color theme_unfocused_base_color #FFFFFF; 2754/* 2755base background color of selections on backdrop windows */ 2756@define-color theme_unfocused_selected_bg_color #00BCD4; 2757/* 2758text/foreground color of selections on backdrop windows */ 2759@define-color theme_unfocused_selected_fg_color #FFFFFF; 2760/* 2761widgets main borders color */ 2762@define-color borders rgba(0, 0, 0, 0.1); 2763/* 2764widgets main borders color on backdrop windows */ 2765@define-color unfocused_borders rgba(0, 0, 0, 0.1); 2766/* 2767these are pretty self explicative */ 2768@define-color warning_color #FF6D00; 2769@define-color error_color #DD2C00; 2770@define-color success_color #00C853; 2771@define-color content_view_bg #FFFFFF; 2772