gtk-dark.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: #37474F; 53color: #FFFFFF; } 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: #37474F; 66color: #FFFFFF; } 67.gtkstyle-fallback:hover { 68background-color: #2d3940; 69color: #FFFFFF; } 70.gtkstyle-fallback:active { 71background-color: #222c31; 72color: #FFFFFF; } 73.gtkstyle-fallback:disabled { 74background-color: #37474F; 75color: rgba(255, 255, 255, 0.4); } 76.gtkstyle-fallback:selected { 77background-color: #00BCD4; 78color: #FFFFFF; } 79 80.view, iconview { 81background-color: #455A64; 82color: #FFFFFF; } 83.view:hover, iconview:hover, .view:active, iconview:active, .view:selected, iconview:selected { 84border-radius: 2px; } 85.view:disabled, iconview:disabled { 86color: rgba(255, 255, 255, 0.4); } 87 88.view text, iconview text, 89textview text { 90background-color: #455A64; 91color: #FFFFFF; } 92.view text:disabled, iconview text:disabled, 93textview text:disabled { 94color: rgba(255, 255, 255, 0.4); } 95 96textview border { 97background-color: #3e515a; 98background-image: image(rgba(0, 0, 0, 0.2)); 99background-repeat: no-repeat; 100color: rgba(255, 255, 255, 0.6); } 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: #FFFFFF; } 129label selection { 130background-color: #00BCD4; 131color: #FFFFFF; } 132label:disabled { 133color: rgba(255, 255, 255, 0.4); } 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(255, 255, 255, 0.6); 145font-weight: 500; } 146assistant .sidebar label.highlight { 147color: #FFFFFF; } 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: #455A64; 199color: #FFFFFF; } 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: #3e515a; 210color: rgba(255, 255, 255, 0.4); } 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 farthest-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: #FFFFFF; } 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 farthest-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(255, 255, 255, 0.4); } 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(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 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(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 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: #3e515a; 292color: rgba(255, 255, 255, 0.4); } 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 farthest-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: #FFFFFF; } 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 farthest-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(255, 255, 255, 0.4); } 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: #3e515a; 328color: rgba(255, 255, 255, 0.4); } 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 farthest-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: #FFFFFF; } 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 farthest-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(255, 255, 255, 0.4); } 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; 364box-shadow: none; 365background-color: #455A64; } 366treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus { 367border-image: 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: #546E7A; 386background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 387color: rgba(255, 255, 255, 0.75); } 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: #FFFFFF; } 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: #FFFFFF; } 397button:disabled { 398box-shadow: none; 399background-color: alpha(currentColor, 0.3); 400color: rgba(255, 255, 255, 0.3); } 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(255, 255, 255, 0.75); } 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: #FFFFFF; } 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: #FFFFFF; } 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(255, 255, 255, 0.3); } 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: #FFFFFF; } 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(255, 255, 255, 0.4); } 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(255, 255, 255, 0.3); } 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(255, 255, 255, 0.3); } 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(255, 255, 255, 0.3); } 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(255, 255, 255, 0.3); } 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(255, 255, 255, 0.4); } 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: #37474F; } 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: #455A64; } 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.2); 948background-color: #3e515a; } 949 950searchbar, 951.location-bar { 952padding: 6px; 953border-style: solid; 954border-width: 0 0 1px; 955border-color: rgba(0, 0, 0, 0.2); 956background-color: #2f3d44; 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.2); 969box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); 970background-color: #2f3d44; 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 farthest-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 farthest-corner at center calc(100% - 1px), #00BCD4 100%, transparent 0%) 0 0 2/0 0 2px; 988background-color: transparent; 989color: #FFFFFF; } 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(255, 255, 255, 0.4); } 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 farthest-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 farthest-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 1054headerbar entry, 1055headerbar spinbutton, 1056headerbar button { 1057margin-top: 6px; 1058margin-bottom: 6px; } 1059 1060.titlebar { 1061border-top-left-radius: 2px; 1062border-top-right-radius: 2px; } 1063 1064separator:first-child + headerbar, headerbar:first-child { 1065border-top-left-radius: 2px; } 1066.tiled separator:first-child + headerbar, .maximized separator:first-child + headerbar, .tiled headerbar:first-child, .maximized headerbar:first-child { 1067border-radius: 0; } 1068headerbar:last-child { 1069border-top-right-radius: 2px; } 1070.tiled headerbar:last-child, .maximized headerbar:last-child { 1071border-radius: 0; } 1072 1073window.csd > .titlebar:not(headerbar) { 1074padding: 0; 1075background-color: transparent; 1076background-image: none; 1077border-style: none; 1078box-shadow: none; } 1079.titlebar:not(headerbar) > separator { 1080background-color: #2f3d44; 1081background-image: image(rgba(0, 0, 0, 0.2)); } 1082 1083/************ 1084* Pathbars * 1085************/ 1086.path-bar button.text-button, .path-bar button.image-button, .path-bar button { 1087padding-left: 6px; 1088padding-right: 6px; } 1089.path-bar button image { 1090padding-left: 4px; 1091padding-right: 4px; } 1092.path-bar button.slider-button { 1093padding-left: 0; 1094padding-right: 0; } 1095 1096/************** 1097* Tree Views * 1098**************/ 1099treeview.view { 1100-GtkTreeView-grid-line-width: 1; 1101-GtkTreeView-grid-line-pattern: ''; 1102-GtkTreeView-tree-line-width: 1; 1103-GtkTreeView-tree-line-pattern: ''; 1104-GtkTreeView-expander-size: 16; 1105border-left-color: alpha(currentColor, 0.3); 1106border-top-color: rgba(0, 0, 0, 0.2); } 1107treeview.view:hover, treeview.view:active, treeview.view:selected { 1108border-radius: 0; } 1109treeview.view.separator { 1110min-height: 5px; 1111color: rgba(0, 0, 0, 0.2); } 1112treeview.view:drop(active) { 1113border-style: solid none; 1114border-width: 1px; 1115border-color: #FF4081; } 1116treeview.view:drop(active).after { 1117border-top-style: none; } 1118treeview.view:drop(active).before { 1119border-bottom-style: none; } 1120treeview.view.expander { 1121-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 1122-gtk-icon-transform: rotate(-90deg); 1123color: rgba(255, 255, 255, 0.75); } 1124treeview.view.expander:dir(rtl) { 1125-gtk-icon-transform: rotate(90deg); } 1126treeview.view.expander:checked { 1127-gtk-icon-transform: unset; } 1128treeview.view.expander:hover, treeview.view.expander:active { 1129color: #FFFFFF; } 1130treeview.view.expander:disabled { 1131color: rgba(255, 255, 255, 0.3); } 1132treeview.view.expander:selected { 1133color: rgba(255, 255, 255, 0.75); } 1134treeview.view.expander:selected:hover, treeview.view.expander:selected:active { 1135color: #FFFFFF; } 1136treeview.view.expander:selected:disabled { 1137color: rgba(255, 255, 255, 0.3); } 1138treeview.view.progressbar { 1139border-style: none none solid; 1140border-width: 4px; 1141border-color: #00BCD4; 1142background-color: transparent; 1143background-image: none; } 1144treeview.view.progressbar:selected { 1145border-color: currentColor; } 1146treeview.view.trough { 1147border-style: none none solid; 1148border-width: 4px; 1149border-color: rgba(0, 188, 212, 0.3); 1150background-color: transparent; 1151background-image: none; } 1152treeview.view.trough:selected { 1153border-color: alpha(currentColor, 0.3); } 1154treeview.view header button { 1155padding: 2px 6px; 1156border-style: none solid solid none; 1157border-width: 1px; 1158border-color: rgba(0, 0, 0, 0.2); 1159border-radius: 0; 1160background-clip: border-box; } 1161treeview.view header button, treeview.view header button:hover, treeview.view header button:active { 1162box-shadow: none; } 1163treeview.view header button, treeview.view header button:disabled { 1164background-color: #455A64; } 1165treeview.view header button:last-child { 1166border-right-style: none; } 1167treeview.view button.dnd, 1168treeview.view header.button.dnd { 1169padding: 2px 6px; 1170border-style: none solid solid; 1171border-width: 1px; 1172border-color: rgba(0, 0, 0, 0.2); 1173border-radius: 0; 1174box-shadow: none; 1175background-color: #455A64; 1176background-clip: border-box; 1177color: #00BCD4; } 1178 1179/********* 1180* Menus * 1181*********/ 1182menubar, 1183.menubar { 1184-GtkWidget-window-dragging: true; 1185padding: 0; 1186box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2); 1187background-color: #2f3d44; } 1188menubar > menuitem, 1189.menubar > menuitem { 1190transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1191min-height: 20px; 1192padding: 4px 8px; 1193color: rgba(255, 255, 255, 0.75); } 1194menubar > menuitem:hover, 1195.menubar > menuitem:hover { 1196box-shadow: inset 0 -2px #00BCD4; 1197color: #FFFFFF; } 1198menubar > menuitem:disabled, 1199.menubar > menuitem:disabled { 1200color: rgba(255, 255, 255, 0.3); } 1201 1202menu, 1203.menu { 1204margin: 4px 0; 1205padding: 4px 0; 1206background-color: #455A64; 1207border: 1px solid rgba(0, 0, 0, 0.2); } 1208.csd menu, .csd 1209.menu { 1210border: none; 1211border-radius: 2px; } 1212menu menuitem, 1213.menu menuitem { 1214min-height: 20px; 1215min-width: 40px; 1216padding: 4px 8px; 1217font: initial; 1218text-shadow: none; } 1219menu menuitem:hover, 1220.menu menuitem:hover { 1221background-color: #00BCD4; 1222color: #FFFFFF; } 1223menu menuitem:disabled, 1224.menu menuitem:disabled { 1225color: rgba(255, 255, 255, 0.4); } 1226menu menuitem arrow, 1227.menu menuitem arrow { 1228min-height: 16px; 1229min-width: 16px; } 1230menu menuitem arrow:dir(ltr), 1231.menu menuitem arrow:dir(ltr) { 1232-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); 1233margin-left: 8px; } 1234menu menuitem arrow:dir(rtl), 1235.menu menuitem arrow:dir(rtl) { 1236-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); 1237margin-right: 8px; } 1238menu > arrow, 1239.menu > arrow { 1240min-height: 16px; 1241min-width: 16px; 1242padding: 4px; 1243border-radius: 0; 1244background-color: #455A64; 1245color: rgba(255, 255, 255, 0.75); } 1246menu > arrow.top, 1247.menu > arrow.top { 1248margin-top: -4px; 1249border-bottom: 1px solid rgba(0, 0, 0, 0.2); 1250-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1251menu > arrow.bottom, 1252.menu > arrow.bottom { 1253margin-bottom: -4px; 1254border-top: 1px solid rgba(0, 0, 0, 0.2); 1255-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1256menu > arrow:hover, 1257.menu > arrow:hover { 1258background-image: image(alpha(currentColor, 0.15)); 1259color: #FFFFFF; } 1260menu > arrow:disabled, 1261.menu > arrow:disabled { 1262border-color: transparent; 1263background-color: transparent; 1264color: transparent; } 1265menu separator, 1266.menu separator { 1267margin: 4px 0; } 1268 1269menuitem accelerator { 1270color: alpha(currentColor, 0.6); } 1271menuitem check:dir(ltr), 1272menuitem radio:dir(ltr) { 1273margin-right: -8px; 1274margin-left: -16px; } 1275menuitem check:dir(rtl), 1276menuitem radio:dir(rtl) { 1277margin-right: -16px; 1278margin-left: -8px; } 1279 1280.csd.popup { 1281border-radius: 2px; } 1282 1283/*************** 1284* Popovers * 1285***************/ 1286popover.background { 1287transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 1288padding: 0; 1289border-radius: 3px; 1290box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 1291background-color: #3e515a; } 1292popover.background:backdrop { 1293box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 1294popover.background, .csd popover.background { 1295border-style: solid; 1296border-width: 1px; 1297border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3); } 1298popover.background > list, 1299popover.background > .view, 1300popover.background > iconview, 1301popover.background > toolbar { 1302border-style: none; 1303box-shadow: none; 1304background-color: transparent; } 1305popover.background separator { 1306margin: 4px 0; } 1307popover.background list separator { 1308margin: 0; } 1309 1310/************* 1311* Notebooks * 1312*************/ 1313notebook > header { 1314border-width: 1px; 1315border-color: rgba(0, 0, 0, 0.2); 1316background-color: #2f3d44; 1317background-clip: border-box; } 1318notebook > header.top { 1319border-bottom-style: solid; } 1320notebook > header.top > tabs > tab:not(.reorderable-page) { 1321margin-bottom: -1px; } 1322notebook > header.top > tabs > tab:not(.reorderable-page):hover { 1323box-shadow: inset 0 -2px alpha(currentColor, 0.3); } 1324notebook > header.top > tabs > tab:not(.reorderable-page):checked { 1325box-shadow: inset 0 -2px #00BCD4; } 1326notebook > header.bottom { 1327border-top-style: solid; } 1328notebook > header.bottom > tabs > tab:not(.reorderable-page) { 1329margin-top: -1px; } 1330notebook > header.bottom > tabs > tab:not(.reorderable-page):hover { 1331box-shadow: inset 0 2px alpha(currentColor, 0.3); } 1332notebook > header.bottom > tabs > tab:not(.reorderable-page):checked { 1333box-shadow: inset 0 2px #00BCD4; } 1334notebook > header.left { 1335border-right-style: solid; } 1336notebook > header.left > tabs > tab:not(.reorderable-page) { 1337margin-right: -1px; } 1338notebook > header.left > tabs > tab:not(.reorderable-page):hover { 1339box-shadow: inset -2px 0 alpha(currentColor, 0.3); } 1340notebook > header.left > tabs > tab:not(.reorderable-page):checked { 1341box-shadow: inset -2px 0 #00BCD4; } 1342notebook > header.right { 1343border-left-style: solid; } 1344notebook > header.right > tabs > tab:not(.reorderable-page) { 1345margin-left: -1px; } 1346notebook > header.right > tabs > tab:not(.reorderable-page):hover { 1347box-shadow: inset 2px 0 alpha(currentColor, 0.3); } 1348notebook > header.right > tabs > tab:not(.reorderable-page):checked { 1349box-shadow: inset 2px 0 #00BCD4; } 1350notebook > header.top > tabs > arrow { 1351border-top-style: none; } 1352notebook > header.bottom > tabs > arrow { 1353border-bottom-style: none; } 1354notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { 1355padding-left: 4px; 1356padding-right: 4px; } 1357notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { 1358margin-left: -8px; 1359-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } 1360notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { 1361margin-right: -8px; 1362-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } 1363notebook > header.left > tabs > arrow { 1364border-left-style: none; } 1365notebook > header.right > tabs > arrow { 1366border-right-style: none; } 1367notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { 1368padding-top: 4px; 1369padding-bottom: 4px; } 1370notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { 1371margin-top: -8px; 1372-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1373notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { 1374margin-bottom: -8px; 1375-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1376notebook > header > tabs > arrow { 1377min-height: 16px; 1378min-width: 16px; 1379border-radius: 0; } 1380notebook > header tab { 1381transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1382min-height: 24px; 1383min-width: 24px; 1384padding: 6px 12px; 1385outline-offset: -6px; 1386border-width: 1px; 1387border-color: transparent; 1388color: rgba(255, 255, 255, 0.75); 1389font-weight: 500; } 1390notebook > header tab:hover { 1391color: #FFFFFF; } 1392notebook > header tab:hover.reorderable-page { 1393border-color: rgba(0, 0, 0, 0.2); 1394background-color: #37474F; } 1395notebook > header tab:disabled { 1396color: rgba(255, 255, 255, 0.3); } 1397notebook > header tab:checked { 1398color: #FFFFFF; } 1399notebook > header tab:checked:disabled { 1400color: rgba(255, 255, 255, 0.4); } 1401notebook > header tab:checked:not(.reorderable-page) { 1402animation: tab_ripple_effect 0.6s ease-in-out; } 1403notebook > header tab:checked.reorderable-page { 1404border-color: rgba(0, 0, 0, 0.2); 1405background-color: #546E7A; } 1406notebook > header tab button.flat { 1407min-width: 24px; 1408min-height: 24px; 1409padding: 0; } 1410notebook > header tab button.flat:last-child { 1411margin-left: 6px; 1412margin-right: -6px; } 1413notebook > header tab button.flat:first-child { 1414margin-left: -6px; 1415margin-right: 6px; } 1416notebook > header.top tabs, notebook > header.bottom tabs { 1417padding-left: 8px; 1418padding-right: 8px; } 1419notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { 1420margin-left: 0; } 1421notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { 1422margin-right: 0; } 1423notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { 1424margin: 0 -1px; 1425border-style: none solid; } 1426notebook > header.left tabs, notebook > header.right tabs { 1427padding-top: 8px; 1428padding-bottom: 8px; } 1429notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { 1430margin-top: 0; } 1431notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { 1432margin-bottom: 0; } 1433notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { 1434margin: -1px 0; 1435border-style: solid none; } 1436notebook > stack:not(:only-child) { 1437background-color: #455A64; } 1438 1439/************** 1440* Scrollbars * 1441**************/ 1442scrollbar { 1443transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1444background-color: #455A64; 1445background-clip: border-box; } 1446* { 1447-GtkScrollbar-has-backward-stepper: false; 1448-GtkScrollbar-has-forward-stepper: false; } 1449scrollbar.top { 1450border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 1451scrollbar.bottom { 1452border-top: 1px solid rgba(0, 0, 0, 0.2); } 1453scrollbar.left { 1454border-right: 1px solid rgba(0, 0, 0, 0.2); } 1455scrollbar.right { 1456border-left: 1px solid rgba(0, 0, 0, 0.2); } 1457scrollbar slider { 1458transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0; 1459min-width: 8px; 1460min-height: 8px; 1461border: 4px solid transparent; 1462border-radius: 100px; 1463background-clip: padding-box; 1464background-color: rgba(255, 255, 255, 0.6); } 1465scrollbar slider:hover { 1466background-color: rgba(255, 255, 255, 0.75); } 1467scrollbar slider:active { 1468background-color: #FFFFFF; } 1469scrollbar slider:disabled { 1470background-color: rgba(255, 255, 255, 0.24); } 1471scrollbar.fine-tune slider { 1472transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0; 1473min-width: 4px; 1474min-height: 4px; } 1475scrollbar.fine-tune.horizontal slider { 1476margin: 2px 0; } 1477scrollbar.fine-tune.vertical slider { 1478margin: 0 2px; } 1479scrollbar.overlay-indicator:not(.dragging):not(.hovering) { 1480border-color: transparent; 1481background-color: transparent; } 1482scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { 1483min-width: 4px; 1484min-height: 4px; 1485margin: 2px; 1486border: 2px solid rgba(69, 90, 100, 0.3); } 1487scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { 1488min-width: 4px; 1489min-height: 4px; 1490margin: 2px; 1491border: 2px solid rgba(69, 90, 100, 0.3); 1492border-radius: 100px; 1493background-color: rgba(255, 255, 255, 0.6); 1494background-clip: padding-box; 1495-gtk-icon-source: none; } 1496scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled { 1497background-color: rgba(255, 255, 255, 0.24); } 1498scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { 1499min-width: 24px; } 1500scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { 1501min-width: 8px; } 1502scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { 1503min-height: 24px; } 1504scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { 1505min-height: 8px; } 1506scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { 1507background-color: rgba(69, 90, 100, 0.9); } 1508scrollbar.horizontal slider { 1509min-width: 24px; } 1510scrollbar.vertical slider { 1511min-height: 24px; } 1512scrollbar button { 1513min-width: 16px; 1514min-height: 16px; 1515padding: 0; 1516border-radius: 0; } 1517scrollbar.vertical button.down { 1518-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1519scrollbar.vertical button.up { 1520-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } 1521scrollbar.horizontal button.down { 1522-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } 1523scrollbar.horizontal button.up { 1524-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } 1525 1526/********** 1527* Switch * 1528**********/ 1529switch { 1530transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1531margin: 6px 0; 1532border: 4px solid transparent; 1533border-radius: 100px; 1534background-color: alpha(currentColor, 0.3); 1535background-clip: padding-box; 1536font-size: 0; } 1537switch:disabled { 1538color: rgba(255, 255, 255, 0.4); } 1539switch:checked { 1540background-color: rgba(255, 64, 129, 0.5); } 1541switch:checked:disabled { 1542background-color: rgba(255, 64, 129, 0.2); 1543color: rgba(255, 255, 255, 0.4); } 1544switch slider { 1545transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1546border-image: none; 1547box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1548background-color: #455A64; 1549color: #FFFFFF; 1550transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0; 1551min-width: 24px; 1552min-height: 24px; 1553margin: -4px 0 -4px -4px; 1554-gtk-outline-radius: 100px; 1555border-radius: 100px; 1556background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent)); } 1557switch:hover slider { 1558border-image: none; 1559box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1560switch:disabled slider { 1561box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1562background-color: #3e515a; 1563color: rgba(255, 255, 255, 0.4); } 1564switch:checked slider { 1565transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0; 1566animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 1567margin: -4px -4px -4px 0; 1568color: #FFFFFF; } 1569switch:checked:disabled slider { 1570animation: none; } 1571 1572/************************* 1573* Check and Radio items * 1574*************************/ 1575.view.content-view.check:not(list), iconview.content-view.check:not(list) { 1576-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1577-gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png")); 1578margin: 8px; 1579background-color: transparent; } 1580.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 { 1581-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1582.view.content-view.check:not(list):disabled, iconview.content-view.check:not(list):disabled { 1583-gtk-icon-shadow: none; } 1584 1585.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list) { 1586-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1587-gtk-icon-source: -gtk-scaled(url("assets/checkbox-active-selectionmode.png"), url("assets/checkbox-active-selectionmode@2.png")); 1588margin: 8px; 1589background-color: transparent; } 1590.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 { 1591-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1592.view.content-view.check:active:not(list):disabled, iconview.content-view.check:active:not(list):disabled { 1593-gtk-icon-shadow: none; } 1594 1595.view.content-view.check:disabled:not(list), iconview.content-view.check:disabled:not(list) { 1596-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1597-gtk-icon-source: -gtk-scaled(url("assets/checkbox-insensitive-selectionmode.png"), url("assets/checkbox-insensitive-selectionmode@2.png")); 1598margin: 8px; 1599background-color: transparent; } 1600.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 { 1601-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1602.view.content-view.check:disabled:not(list):disabled, iconview.content-view.check:disabled:not(list):disabled { 1603-gtk-icon-shadow: none; } 1604 1605.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list) { 1606-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1607-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png")); 1608margin: 8px; 1609background-color: transparent; } 1610.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 { 1611-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1612.view.content-view.check:checked:not(list):disabled, iconview.content-view.check:checked:not(list):disabled { 1613-gtk-icon-shadow: none; } 1614 1615.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list) { 1616-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1617-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active-selectionmode.png"), url("assets/checkbox-checked-active-selectionmode@2.png")); 1618margin: 8px; 1619background-color: transparent; } 1620.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 { 1621-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1622.view.content-view.check:checked:active:not(list):disabled, iconview.content-view.check:checked:active:not(list):disabled { 1623-gtk-icon-shadow: none; } 1624 1625.view.content-view.check:disabled:checked:not(list), iconview.content-view.check:disabled:checked:not(list) { 1626-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1627-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive-selectionmode.png"), url("assets/checkbox-checked-insensitive-selectionmode@2.png")); 1628margin: 8px; 1629background-color: transparent; } 1630.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 { 1631-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1632.view.content-view.check:disabled:checked:not(list):disabled, iconview.content-view.check:disabled:checked:not(list):disabled { 1633-gtk-icon-shadow: none; } 1634 1635checkbutton.text-button, radiobutton.text-button { 1636padding: 2px 0; 1637outline-offset: 0; } 1638checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { 1639margin-left: 4px; } 1640checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { 1641margin-right: 4px; } 1642 1643check, 1644radio { 1645min-height: 24px; 1646min-width: 24px; 1647-gtk-icon-source: none; 1648margin: -12px -8px; 1649padding: 12px; 1650outline-offset: 4px; 1651color: alpha(currentColor, 0.75); } 1652check:hover, check:active, 1653radio:hover, 1654radio:active { 1655color: currentColor; } 1656check:checked, check:checked:disabled, 1657radio:checked, 1658radio:checked:disabled { 1659background-color: transparent; } 1660check:checked, check:indeterminate, 1661radio:checked, 1662radio:indeterminate { 1663color: #FF4081; } 1664check:checked:disabled, check:indeterminate:disabled, 1665radio:checked:disabled, 1666radio:indeterminate:disabled { 1667color: rgba(255, 64, 129, 0.4); } 1668check:only-child, 1669radio:only-child { 1670margin: -12px; } 1671menu menuitem check, menu menuitem 1672radio { 1673transition: none; 1674margin: -16px -16px; } 1675menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem 1676radio:not(:checked):not(:indeterminate):hover { 1677color: alpha(currentColor, 0.75); } 1678menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem 1679radio, menu menuitem 1680radio:hover, menu menuitem 1681radio:disabled { 1682background-image: none; } 1683 1684check { 1685-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); } 1686check:checked { 1687-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); } 1688check:indeterminate { 1689-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); } 1690 1691radio { 1692border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; 1693-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); } 1694radio:checked { 1695border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } 1696radio:checked:disabled { 1697border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; } 1698radio:indeterminate { 1699-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); } 1700radio:indeterminate:checked { 1701border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; } 1702 1703@keyframes check_check { 1704from { 1705-gtk-icon-transform: rotate(90deg); } 1706to { 1707-gtk-icon-transform: unset; } } 1708@keyframes check_radio { 1709from { 1710-gtk-icon-transform: scale(0); } 1711to { 1712-gtk-icon-transform: unset; } } 1713@keyframes check_indeterminate { 1714from { 1715-gtk-icon-transform: unset; } 171650% { 1717-gtk-icon-transform: scale(0, 1); } 1718to { 1719-gtk-icon-transform: unset; } } 1720check:not(:indeterminate):checked { 1721animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1); } 1722 1723check:not(:indeterminate):checked:active { 1724animation: check_check 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 1725 1726check:indeterminate:checked, radio:indeterminate:checked { 1727animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1); } 1728 1729check:indeterminate:checked:active, radio:indeterminate:checked:active { 1730animation: check_indeterminate 0.3s cubic-bezier(0, 0, 0.2, 1), flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 1731 1732menu menuitem check:not(:indeterminate):checked, 1733menu menuitem radio:not(:indeterminate):checked, 1734menu menuitem check:indeterminate:checked, 1735menu menuitem radio:indeterminate:checked { 1736animation: none; } 1737 1738treeview.view check, 1739treeview.view radio { 1740padding: 0; } 1741treeview.view check:checked:hover, treeview.view check:selected:checked:hover, 1742treeview.view radio:checked:hover, 1743treeview.view radio:selected:checked:hover { 1744background-image: none; } 1745treeview.view check, 1746treeview.view radio { 1747color: rgba(255, 255, 255, 0.75); } 1748treeview.view check:hover, treeview.view check:active, 1749treeview.view radio:hover, 1750treeview.view radio:active { 1751color: #FFFFFF; } 1752treeview.view check:disabled, 1753treeview.view radio:disabled { 1754color: rgba(255, 255, 255, 0.3); } 1755treeview.view check:checked, treeview.view check:indeterminate, 1756treeview.view radio:checked, 1757treeview.view radio:indeterminate { 1758color: #FF4081; } 1759treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled, 1760treeview.view radio:checked:disabled, 1761treeview.view radio:indeterminate:disabled { 1762color: rgba(255, 64, 129, 0.4); } 1763treeview.view check:selected, 1764treeview.view radio:selected { 1765color: rgba(255, 255, 255, 0.75); } 1766treeview.view check:selected:hover, treeview.view check:selected:active, 1767treeview.view radio:selected:hover, 1768treeview.view radio:selected:active { 1769color: #FFFFFF; } 1770treeview.view check:selected:disabled, 1771treeview.view radio:selected:disabled { 1772color: rgba(255, 255, 255, 0.3); } 1773treeview.view check:selected:checked, treeview.view check:selected:indeterminate, 1774treeview.view radio:selected:checked, 1775treeview.view radio:selected:indeterminate { 1776color: #FF4081; } 1777treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled, 1778treeview.view radio:selected:checked:disabled, 1779treeview.view radio:selected:indeterminate:disabled { 1780color: rgba(255, 64, 129, 0.4); } 1781 1782treeview.view radio:checked { 1783-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png"))); 1784border-image: none; } 1785 1786/************ 1787* GtkScale * 1788************/ 1789scale { 1790min-height: 12px; 1791min-width: 12px; 1792padding: 12px; } 1793scale * { 1794transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 1795scale slider { 1796min-height: 24px; 1797min-width: 24px; 1798margin: -10px; } 1799scale trough { 1800outline-offset: 2px; 1801background-color: alpha(currentColor, 0.3); } 1802scale trough:disabled { 1803color: rgba(255, 255, 255, 0.4); } 1804scale highlight { 1805background-color: #FF4081; } 1806scale highlight:disabled { 1807background-color: transparent; } 1808scale fill { 1809background-color: alpha(currentColor, 0.3); } 1810scale fill:disabled { 1811background-color: transparent; } 1812scale slider { 1813background-repeat: no-repeat; 1814background-position: center; 1815background-size: calc(100% - 8px); } 1816scale slider { 1817background-image: -gtk-scaled(url("assets/slider-dark.png"), url("assets/slider-dark@2.png")); } 1818scale slider:disabled { 1819background-image: -gtk-scaled(url("assets/slider-insensitive-dark.png"), url("assets/slider-insensitive-dark@2.png")); } 1820scale slider:hover { 1821background-size: calc(100% - 4px); } 1822scale slider:active { 1823background-size: calc(100% - 0px); } 1824scale.fine-tune slider { 1825background-size: calc(100% - 12px); } 1826scale value { 1827color: alpha(currentColor, 0.6); } 1828scale marks { 1829color: alpha(currentColor, 0.3); } 1830scale marks.top { 1831margin-bottom: 8px; 1832margin-top: -16px; } 1833scale marks.bottom { 1834margin-top: 8px; 1835margin-bottom: -16px; } 1836scale marks.top { 1837margin-right: 8px; 1838margin-left: -16px; } 1839scale marks.bottom { 1840margin-left: 8px; 1841margin-right: -16px; } 1842scale.horizontal indicator { 1843min-height: 8px; 1844min-width: 1px; } 1845scale.vertical indicator { 1846min-height: 1px; 1847min-width: 8px; } 1848scale.color.horizontal slider, 1849scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1850min-height: 30px; 1851min-width: 24px; 1852margin-top: -16px; 1853background-position: center calc(100% - 4px); } 1854scale.color.horizontal slider, 1855scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1856background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png")); } 1857scale.color.horizontal slider:hover, 1858scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1859background-position: center calc(100% - 2px); } 1860scale.color.horizontal slider:active, 1861scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1862background-position: center calc(100% - 0px); } 1863scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1864background-position: center calc(100% - 6px); } 1865scale.color.horizontal slider, 1866scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1867min-height: 30px; 1868min-width: 24px; 1869margin-top: -16px; 1870background-position: center calc(100% - 4px); } 1871scale.color.horizontal slider:disabled, 1872scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { 1873background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png")); } 1874scale.color.horizontal slider:hover, 1875scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1876background-position: center calc(100% - 2px); } 1877scale.color.horizontal slider:active, 1878scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1879background-position: center calc(100% - 0px); } 1880scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1881background-position: center calc(100% - 6px); } 1882scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1883min-height: 30px; 1884min-width: 24px; 1885margin-bottom: -16px; 1886background-position: center calc(4px); } 1887scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1888background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-dark.png"), url("assets/slider-horz-scale-has-marks-below-dark@2.png")); } 1889scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1890background-position: center calc(2px); } 1891scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1892background-position: center calc(0px); } 1893scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1894background-position: center calc(6px); } 1895scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1896min-height: 30px; 1897min-width: 24px; 1898margin-bottom: -16px; 1899background-position: center calc(4px); } 1900scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { 1901background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png")); } 1902scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1903background-position: center calc(2px); } 1904scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1905background-position: center calc(0px); } 1906scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1907background-position: center calc(6px); } 1908scale.color.vertical:dir(rtl) slider, 1909scale.vertical contents:last-child:not(:only-child) > trough > slider { 1910min-height: 24px; 1911min-width: 30px; 1912margin-left: -16px; 1913background-position: calc(4px) center; } 1914scale.color.vertical:dir(rtl) slider, 1915scale.vertical contents:last-child:not(:only-child) > trough > slider { 1916background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-dark.png"), url("assets/slider-vert-scale-has-marks-above-dark@2.png")); } 1917scale.color.vertical:dir(rtl) slider:hover, 1918scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1919background-position: calc(2px) center; } 1920scale.color.vertical:dir(rtl) slider:active, 1921scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1922background-position: calc(0px) center; } 1923scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1924background-position: calc(6px) center; } 1925scale.color.vertical:dir(rtl) slider, 1926scale.vertical contents:last-child:not(:only-child) > trough > slider { 1927min-height: 24px; 1928min-width: 30px; 1929margin-left: -16px; 1930background-position: calc(4px) center; } 1931scale.color.vertical:dir(rtl) slider:disabled, 1932scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { 1933background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png")); } 1934scale.color.vertical:dir(rtl) slider:hover, 1935scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1936background-position: calc(2px) center; } 1937scale.color.vertical:dir(rtl) slider:active, 1938scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1939background-position: calc(0px) center; } 1940scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1941background-position: calc(6px) center; } 1942scale.color.vertical:dir(ltr) slider, 1943scale.vertical contents:first-child:not(:only-child) > trough > slider { 1944min-height: 24px; 1945min-width: 30px; 1946margin-right: -16px; 1947background-position: calc(100% - 4px) center; } 1948scale.color.vertical:dir(ltr) slider, 1949scale.vertical contents:first-child:not(:only-child) > trough > slider { 1950background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-dark.png"), url("assets/slider-vert-scale-has-marks-below-dark@2.png")); } 1951scale.color.vertical:dir(ltr) slider:hover, 1952scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1953background-position: calc(100% - 2px) center; } 1954scale.color.vertical:dir(ltr) slider:active, 1955scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1956background-position: calc(100% - 0px) center; } 1957scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1958background-position: calc(100% - 6px) center; } 1959scale.color.vertical:dir(ltr) slider, 1960scale.vertical contents:first-child:not(:only-child) > trough > slider { 1961min-height: 24px; 1962min-width: 30px; 1963margin-right: -16px; 1964background-position: calc(100% - 4px) center; } 1965scale.color.vertical:dir(ltr) slider:disabled, 1966scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { 1967background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png")); } 1968scale.color.vertical:dir(ltr) slider:hover, 1969scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1970background-position: calc(100% - 2px) center; } 1971scale.color.vertical:dir(ltr) slider:active, 1972scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1973background-position: calc(100% - 0px) center; } 1974scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1975background-position: calc(100% - 6px) center; } 1976scale.color { 1977min-height: 0; 1978min-width: 0; } 1979scale.color.horizontal { 1980padding: 0 0 12px 0; } 1981scale.color.horizontal trough { 1982padding-bottom: 4px; } 1983scale.color.horizontal slider { 1984margin-bottom: -14px; 1985margin-top: 0; } 1986scale.color.vertical:dir(ltr) { 1987padding: 0 0 0 12px; } 1988scale.color.vertical:dir(ltr) trough { 1989padding-left: 4px; } 1990scale.color.vertical:dir(ltr) slider { 1991margin-left: -14px; 1992margin-right: 0; } 1993scale.color.vertical:dir(rtl) { 1994padding: 0 12px 0 0; } 1995scale.color.vertical:dir(rtl) trough { 1996padding-right: 4px; } 1997scale.color.vertical:dir(rtl) slider { 1998margin-right: -14px; 1999margin-left: 0; } 2000 2001/***************** 2002* Progress bars * 2003*****************/ 2004progressbar { 2005color: rgba(255, 255, 255, 0.6); 2006font-size: smaller; } 2007progressbar.horizontal trough, 2008progressbar.horizontal progress { 2009min-height: 4px; } 2010progressbar.vertical trough, 2011progressbar.vertical progress { 2012min-width: 4px; } 2013progressbar trough { 2014background-color: rgba(0, 188, 212, 0.3); } 2015progressbar progress { 2016background-color: #00BCD4; } 2017 2018/************* 2019* Level Bar * 2020*************/ 2021levelbar block { 2022min-width: 36px; 2023min-height: 4px; } 2024levelbar.vertical block { 2025min-width: 4px; 2026min-height: 36px; } 2027levelbar trough { 2028padding: 2px; 2029border-radius: 2px; 2030transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2031border-image: none; 2032box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2033background-color: #455A64; 2034color: #FFFFFF; } 2035levelbar trough:disabled { 2036box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2037background-color: #3e515a; 2038color: rgba(255, 255, 255, 0.4); } 2039levelbar.horizontal.discrete block { 2040margin: 0 1px; } 2041levelbar.vertical.discrete block { 2042margin: 1px 0; } 2043levelbar.horizontal.discrete trough { 2044padding: 2px 1px; } 2045levelbar.vertical.discrete trough { 2046padding: 1px 2px; } 2047levelbar block.low { 2048background-color: #FF6D00; } 2049levelbar block.high { 2050background-color: #00BCD4; } 2051levelbar block.full { 2052background-color: #00C853; } 2053levelbar block.empty { 2054background-color: alpha(currentColor, 0.3); 2055color: rgba(255, 255, 255, 0.4); } 2056 2057/**************** 2058* Print dialog * 2059*****************/ 2060printdialog paper { 2061padding: 0; 2062border: 1px solid rgba(0, 0, 0, 0.2); 2063background: #455A64; 2064color: #FFFFFF; } 2065printdialog .dialog-action-box { 2066margin: 12px; } 2067 2068/********** 2069* Frames * 2070**********/ 2071frame > border, 2072.frame { 2073margin: 0; 2074padding: 0; 2075border: 1px solid rgba(0, 0, 0, 0.2); 2076border-radius: 0; 2077box-shadow: none; } 2078frame > border.flat, 2079.frame.flat { 2080border-style: none; } 2081 2082actionbar > revealer > box { 2083padding: 6px; 2084border-top: 1px solid rgba(0, 0, 0, 0.2); } 2085 2086scrolledwindow viewport.frame { 2087border-style: none; } 2088scrolledwindow overshoot.top { 2089background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2090background-repeat: no-repeat; 2091background-position: center top; 2092background-color: transparent; 2093border: none; 2094box-shadow: none; } 2095scrolledwindow overshoot.bottom { 2096background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2097background-repeat: no-repeat; 2098background-position: center bottom; 2099background-color: transparent; 2100border: none; 2101box-shadow: none; } 2102scrolledwindow overshoot.left { 2103background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2104background-repeat: no-repeat; 2105background-position: left center; 2106background-color: transparent; 2107border: none; 2108box-shadow: none; } 2109scrolledwindow overshoot.right { 2110background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(0, 229, 255, 0.3)), to(transparent)); 2111background-repeat: no-repeat; 2112background-position: right center; 2113background-color: transparent; 2114border: none; 2115box-shadow: none; } 2116scrolledwindow undershoot.top { 2117background-color: transparent; 2118background-image: linear-gradient(to left, rgba(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%); 2119padding-top: 0; 2120background-size: 16px 2px; 2121background-repeat: repeat-x; 2122background-origin: content-box; 2123background-position: center top; } 2124scrolledwindow undershoot.bottom { 2125background-color: transparent; 2126background-image: linear-gradient(to left, rgba(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%); 2127padding-bottom: 0; 2128background-size: 16px 2px; 2129background-repeat: repeat-x; 2130background-origin: content-box; 2131background-position: center bottom; } 2132scrolledwindow undershoot.left { 2133background-color: transparent; 2134background-image: linear-gradient(to top, rgba(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%); 2135padding-left: 0; 2136background-size: 2px 16px; 2137background-repeat: repeat-y; 2138background-origin: content-box; 2139background-position: left center; } 2140scrolledwindow undershoot.right { 2141background-color: transparent; 2142background-image: linear-gradient(to top, rgba(69, 90, 100, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%); 2143padding-right: 0; 2144background-size: 2px 16px; 2145background-repeat: repeat-y; 2146background-origin: content-box; 2147background-position: right center; } 2148scrolledwindow junction { 2149border-style: solid none none solid; 2150border-width: 1px; 2151border-color: rgba(0, 0, 0, 0.2); 2152background-color: #455A64; } 2153scrolledwindow junction:dir(rtl) { 2154border-style: solid solid none none; } 2155 2156separator { 2157min-width: 1px; 2158min-height: 1px; 2159background: rgba(0, 0, 0, 0.2); } 2160 2161/********* 2162* Lists * 2163*********/ 2164list { 2165border-color: rgba(0, 0, 0, 0.2); 2166background-color: #455A64; } 2167list row { 2168padding: 2px; } 2169 2170row { 2171transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 2172row:hover { 2173transition: none; } 2174row.activatable, .view, iconview, treeview.view header button { 2175background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); } 2176row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover { 2177background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); } 2178row.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 { 2179transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 2180animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 2181 2182/********************* 2183* App Notifications * 2184*********************/ 2185.app-notification, 2186.app-notification.frame { 2187margin: 8px; } 2188.app-notification border, 2189.app-notification.frame border { 2190border: none; } 2191 2192/************* 2193* Expanders * 2194*************/ 2195expander arrow { 2196transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2197min-width: 16px; 2198min-height: 16px; 2199-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 2200-gtk-icon-transform: rotate(-90deg); 2201color: rgba(255, 255, 255, 0.75); } 2202expander arrow:dir(rtl) { 2203-gtk-icon-transform: rotate(90deg); } 2204expander arrow:checked { 2205-gtk-icon-transform: unset; } 2206expander arrow:hover, expander arrow:active { 2207color: #FFFFFF; } 2208expander arrow:disabled { 2209color: rgba(255, 255, 255, 0.3); } 2210expander arrow:selected { 2211color: rgba(255, 255, 255, 0.75); } 2212expander arrow:selected:hover, expander arrow:selected:active { 2213color: #FFFFFF; } 2214expander arrow:selected:disabled { 2215color: rgba(255, 255, 255, 0.3); } 2216 2217/************ 2218* Calendar * 2219***********/ 2220calendar { 2221padding: 1px; 2222border: 1px solid rgba(0, 0, 0, 0.2); 2223color: #FFFFFF; } 2224calendar:disabled { 2225color: rgba(255, 255, 255, 0.4); } 2226calendar:selected { 2227border-radius: 3px; } 2228calendar.header { 2229border: none; 2230border-bottom: 1px solid rgba(0, 0, 0, 0.2); 2231border-radius: 0; } 2232calendar:indeterminate { 2233color: alpha(currentColor, 0.4); } 2234calendar.highlight { 2235color: alpha(currentColor, 0.6); 2236font-weight: 500; } 2237 2238/*********** 2239* Dialogs * 2240***********/ 2241messagedialog.background { 2242background-color: #546E7A; } 2243messagedialog .titlebar { 2244min-height: 24px; 2245border-style: none; 2246background-color: #546E7A; } 2247messagedialog.csd.background { 2248border-bottom-left-radius: 2px; 2249border-bottom-right-radius: 2px; } 2250messagedialog.csd .dialog-action-area button { 2251padding: 8px 16px; 2252border-top: 1px solid rgba(0, 0, 0, 0.2); 2253border-radius: 0; } 2254messagedialog.csd .dialog-action-area button:first-child { 2255border-bottom-left-radius: 2px; } 2256messagedialog.csd .dialog-action-area button:last-child { 2257border-bottom-right-radius: 2px; } 2258 2259filechooser .dialog-action-box { 2260border-top: 1px solid rgba(0, 0, 0, 0.2); } 2261filechooser #pathbarbox { 2262border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 2263 2264filechooserbutton:drop(active) { 2265box-shadow: none; } 2266 2267/*********** 2268* Sidebar * 2269***********/ 2270.sidebar { 2271border-style: none; 2272background-color: #3e515a; } 2273stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { 2274border-right: 1px solid rgba(0, 0, 0, 0.2); 2275border-left-style: none; } 2276stacksidebar.sidebar:dir(rtl) list 2277.sidebar:dir(rtl), stacksidebar.sidebar.right list 2278.sidebar:dir(rtl), .sidebar.right { 2279border-left: 1px solid rgba(0, 0, 0, 0.2); 2280border-right-style: none; } 2281.sidebar list { 2282background-color: transparent; } 2283paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { 2284border-style: none; } 2285 2286stacksidebar row { 2287padding: 10px 4px; } 2288stacksidebar row > label { 2289padding-left: 6px; 2290padding-right: 6px; } 2291 2292/**************** 2293* File chooser * 2294****************/ 2295placessidebar > viewport.frame { 2296border-style: none; } 2297placessidebar row { 2298min-height: 32px; 2299padding: 0; } 2300placessidebar row > revealer { 2301padding: 0 12px; } 2302placessidebar row:selected { 2303color: #FFFFFF; } 2304placessidebar row:disabled { 2305color: rgba(255, 255, 255, 0.4); } 2306placessidebar row image.sidebar-icon { 2307opacity: 0.6; } 2308placessidebar row image.sidebar-icon:dir(ltr) { 2309padding-right: 8px; } 2310placessidebar row image.sidebar-icon:dir(rtl) { 2311padding-left: 8px; } 2312placessidebar row label.sidebar-label:dir(ltr) { 2313padding-right: 2px; } 2314placessidebar row label.sidebar-label:dir(rtl) { 2315padding-left: 2px; } 2316button.sidebar-button { 2317min-height: 24px; 2318min-width: 24px; 2319margin-top: 0; 2320margin-bottom: 0; 2321padding: 0; 2322border-radius: 100%; 2323-gtk-outline-radius: 100%; } 2324placessidebar row.sidebar-placeholder-row { 2325min-height: 2px; 2326padding: 0 8px; 2327background-image: image(#FF4081); 2328background-clip: content-box; } 2329placessidebar row.sidebar-new-bookmark-row { 2330color: #FF4081; } 2331placessidebar row:drop(active):not(:disabled) { 2332box-shadow: inset 0 0 0 2px #FF4081; } 2333 2334placesview .server-list-button > image { 2335-gtk-icon-transform: rotate(0turn); } 2336placesview .server-list-button:checked > image { 2337-gtk-icon-transform: rotate(-0.5turn); } 2338placesview > actionbar > revealer > box > label { 2339padding-left: 8px; 2340padding-right: 8px; } 2341 2342/********* 2343* Paned * 2344*********/ 2345paned > separator { 2346min-width: 1px; 2347min-height: 1px; 2348-gtk-icon-source: none; 2349border-style: none; 2350background-color: transparent; 2351background-image: image(rgba(0, 0, 0, 0.2)); 2352background-size: 1px 1px; } 2353paned > separator.wide { 2354min-width: 6px; 2355min-height: 6px; 2356background-color: #37474F; 2357background-image: image(rgba(0, 0, 0, 0.2)), image(rgba(0, 0, 0, 0.2)); 2358background-size: 1px 1px, 1px 1px; } 2359paned.horizontal > separator { 2360background-repeat: repeat-y; } 2361paned.horizontal > separator:dir(ltr) { 2362margin: 0 -8px 0 0; 2363padding: 0 8px 0 0; 2364background-position: left; } 2365paned.horizontal > separator:dir(rtl) { 2366margin: 0 0 0 -8px; 2367padding: 0 0 0 8px; 2368background-position: right; } 2369paned.horizontal > separator.wide { 2370margin: 0; 2371padding: 0; 2372background-repeat: repeat-y, repeat-y; 2373background-position: left, right; } 2374paned.vertical > separator { 2375margin: 0 0 -8px 0; 2376padding: 0 0 8px 0; 2377background-repeat: repeat-x; 2378background-position: top; } 2379paned.vertical > separator.wide { 2380margin: 0; 2381padding: 0; 2382background-repeat: repeat-x, repeat-x; 2383background-position: bottom, top; } 2384 2385/************** 2386* GtkInfoBar * 2387**************/ 2388infobar { 2389border-style: none; } 2390 2391.info { 2392background-color: #66BB6A; } 2393 2394.question { 2395background-color: #42A5F5; } 2396 2397.warning { 2398background-color: #FFA726; } 2399 2400.error { 2401background-color: #EF5350; } 2402 2403.info, 2404.question, 2405.warning, 2406.error { 2407color: #FFFFFF; } 2408 2409/************ 2410* Tooltips * 2411************/ 2412tooltip { 2413border-radius: 2px; 2414box-shadow: none; } 2415tooltip.background { 2416background-color: rgba(69, 90, 100, 0.9); } 2417tooltip decoration { 2418background-color: transparent; } 2419tooltip label { 2420min-height: 20px; 2421padding: 4px 6px; } 2422tooltip * { 2423padding: 0; 2424background-color: transparent; 2425color: inherit; } 2426 2427/***************** 2428* Color Chooser * 2429*****************/ 2430colorswatch.top { 2431border-top-left-radius: 2.5px; 2432border-top-right-radius: 2.5px; } 2433colorswatch.top overlay { 2434border-top-left-radius: 2px; 2435border-top-right-radius: 2px; } 2436colorswatch.bottom { 2437border-bottom-left-radius: 2.5px; 2438border-bottom-right-radius: 2.5px; } 2439colorswatch.bottom overlay { 2440border-bottom-left-radius: 2px; 2441border-bottom-right-radius: 2px; } 2442colorswatch.left, colorswatch:first-child:not(.top) { 2443border-top-left-radius: 2.5px; 2444border-bottom-left-radius: 2.5px; } 2445colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { 2446border-top-left-radius: 2px; 2447border-bottom-left-radius: 2px; } 2448colorswatch.right, colorswatch:last-child:not(.bottom) { 2449border-top-right-radius: 2.5px; 2450border-bottom-right-radius: 2.5px; } 2451colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { 2452border-top-right-radius: 2px; 2453border-bottom-right-radius: 2px; } 2454colorswatch.dark overlay { 2455color: white; } 2456colorswatch.light overlay { 2457color: rgba(0, 0, 0, 0.8); } 2458colorswatch.dark { 2459color: white; } 2460colorswatch.light { 2461color: rgba(0, 0, 0, 0.8); } 2462colorswatch:drop(active) { 2463box-shadow: none; } 2464colorswatch:drop(active).light overlay { 2465box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2466colorswatch:drop(active).dark overlay { 2467box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2468colorswatch overlay { 2469transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2470box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2471colorswatch overlay:hover { 2472box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2473colorswatch#add-color-button { 2474border-radius: 2px 2px 0 0; 2475color: white; } 2476colorswatch#add-color-button:only-child { 2477border-radius: 2px; } 2478colorswatch#add-color-button overlay { 2479background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%); 2480color: white; } 2481colorswatch:disabled { 2482opacity: 0.4; } 2483colorswatch:disabled overlay { 2484box-shadow: none; } 2485colorswatch#editor-color-sample { 2486border-radius: 2.5px; } 2487colorswatch#editor-color-sample overlay { 2488border-radius: 2px; } 2489 2490colorchooser .popover.osd { 2491transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 2492border-radius: 2px; 2493box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 2494background-color: #455A64; } 2495colorchooser .popover.osd:backdrop { 2496box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2497 2498/******** 2499* Misc * 2500********/ 2501.content-view { 2502background-color: #37474F; } 2503 2504/********************** 2505* Window Decorations * 2506*********************/ 2507decoration { 2508transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1); 2509border-radius: 2px 2px 0 0; 2510box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent; 2511margin: 8px; } 2512decoration:backdrop { 2513box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; } 2514.fullscreen decoration, .tiled decoration { 2515border-radius: 0; } 2516.popup decoration { 2517box-shadow: none; } 2518.ssd decoration { 2519box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } 2520.csd.popup decoration { 2521border-radius: 2px; 2522box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2523tooltip.csd decoration { 2524border-radius: 2px; 2525box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2526messagedialog.csd decoration { 2527border-radius: 2px; } 2528.solid-csd decoration { 2529margin: 4px; 2530border-radius: 0; 2531box-shadow: none; 2532background-color: #37474F; } 2533 2534.view:selected, iconview:selected, .view text selection, iconview text selection, 2535textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2536notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2537entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2538popover.background radiobutton:selected, 2539.menuitem.button.flat:selected, row:selected, calendar:selected { 2540background-color: #00BCD4; } 2541row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection, 2542textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2543notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2544entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2545popover.background radiobutton:selected, 2546.menuitem.button.flat:selected, row:selected, calendar:selected { 2547color: #FFFFFF; } 2548row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled, 2549textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled, 2550notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled, 2551entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, 2552popover.background radiobutton:disabled:selected, 2553.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { 2554color: rgba(255, 255, 255, 0.4); } 2555 2556.monospace { 2557font: Monospace; } 2558 2559/********************** 2560* Touch Copy & Paste * 2561*********************/ 2562cursor-handle { 2563border-radius: 100px; 2564background-color: #FF4081; 2565background-image: none; } 2566cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { 2567padding-left: 6px; 2568border-top-right-radius: 0; } 2569cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { 2570padding-right: 6px; 2571border-top-left-radius: 0; } 2572cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { 2573-GtkWidget-text-handle-width: 24; 2574-GtkWidget-text-handle-height: 30; 2575-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png")); } 2576 2577.context-menu { 2578font: initial; } 2579 2580button.circular { 2581border-radius: 100px; 2582-gtk-outline-radius: 100px; } 2583button.circular label { 2584padding: 0; } 2585 2586.keycap { 2587min-width: 12px; 2588min-height: 26px; 2589margin-top: 2px; 2590padding-bottom: 2px; 2591padding-left: 8px; 2592padding-right: 8px; 2593border: solid 1px rgba(0, 0, 0, 0.2); 2594border-radius: 3px; 2595box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2); 2596background-color: #455A64; 2597color: #FFFFFF; 2598font-size: smaller; } 2599 2600*:drop(active) { 2601transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2602box-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; 2603caret-color: #FF4081; } 2604 2605stackswitcher button.text-button { 2606min-width: 100px; } 2607 2608stackswitcher button.circular, 2609stackswitcher button.text-button.circular { 2610min-width: 36px; 2611min-height: 36px; 2612padding: 0; } 2613 2614.floating-bar { 2615min-height: 32px; 2616padding: 0; 2617border-style: solid solid none; 2618border-width: 1px; 2619border-color: rgba(0, 0, 0, 0.2); 2620border-radius: 3px 3px 0 0; 2621background-color: #455A64; 2622background-clip: border-box; 2623transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; } 2624.floating-bar.left { 2625margin-right: 7px; 2626border-left-style: none; 2627border-top-left-radius: 0; } 2628.floating-bar.right { 2629margin-left: 7px; 2630border-right-style: none; 2631border-top-right-radius: 0; } 2632.floating-bar button { 2633min-height: 24px; 2634min-width: 24px; 2635margin: 4px; 2636padding: 0; } 2637 2638/************ 2639* Nautilus * 2640************/ 2641.nautilus-window, 2642.nautilus-window notebook, 2643.nautilus-window notebook > stack { 2644background: #455A64; } 2645 2646.nautilus-desktop-window, 2647.nautilus-desktop-window notebook, 2648.nautilus-desktop-window notebook > stack { 2649background: transparent; } 2650 2651.nautilus-desktop.nautilus-canvas-item { 2652color: #FFFFFF; 2653text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2654 2655.nautilus-desktop.nautilus-canvas-item:selected { 2656text-shadow: none; } 2657 2658@keyframes needs_attention_keyframes { 26590% { 2660background-color: transparent; } 266150% { 2662background-color: alpha(currentColor, 0.3); } 2663100% { 2664background-color: transparent; } } 2665.nautilus-operations-button-needs-attention { 2666color: #FF4081; 2667animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); } 2668 2669.nautilus-operations-button-needs-attention-multiple { 2670color: #FF4081; 2671animation: needs_attention_keyframes 2s cubic-bezier(0, 0, 0.2, 1); 2672animation-iteration-count: 2; } 2673 2674.disk-space-display.unknown { 2675background-color: #FF6D00; } 2676 2677.disk-space-display.used { 2678background-color: #00BCD4; } 2679 2680.disk-space-display.free { 2681background-color: alpha(currentColor, 0.3); 2682color: rgba(255, 255, 255, 0.4); } 2683 2684.documents-entry-tag { 2685margin: 3px -2px 3px 8px; 2686padding: 0 8px; 2687border-radius: 100px; 2688box-shadow: none; 2689background-color: #00BCD4; 2690color: #FFFFFF; } 2691.documents-entry-tag:hover { 2692box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2693 2694.documents-entry-tag.button { 2695margin: 0 -2px; 2696padding: 4px; 2697border-radius: 100px; 2698box-shadow: none; 2699color: rgba(255, 255, 255, 0.75); } 2700.documents-entry-tag.button:hover, .documents-entry-tag.button:active { 2701color: #FFFFFF; } 2702 2703.nautilus-window searchbar { 2704border-top: 1px solid rgba(0, 0, 0, 0.2); } 2705 2706.nautilus-window .searchbar-container { 2707margin-top: -1px; } 2708 2709/* GTK NAMED COLORS 2710---------------- 2711use responsibly! */ 2712/* 2713widget text/foreground color */ 2714@define-color theme_fg_color #FFFFFF; 2715/* 2716text color for entries, views and content in general */ 2717@define-color theme_text_color #FFFFFF; 2718/* 2719widget base background color */ 2720@define-color theme_bg_color #37474F; 2721/* 2722text widgets and the like base background color */ 2723@define-color theme_base_color #455A64; 2724/* 2725base background color of selections */ 2726@define-color theme_selected_bg_color #00BCD4; 2727/* 2728text/foreground color of selections */ 2729@define-color theme_selected_fg_color #FFFFFF; 2730/* 2731base background color of insensitive widgets */ 2732@define-color insensitive_bg_color #37474F; 2733/* 2734text foreground color of insensitive widgets */ 2735@define-color insensitive_fg_color rgba(255, 255, 255, 0.4); 2736/* 2737insensitive text widgets and the like base background color */ 2738@define-color insensitive_base_color #3e515a; 2739/* 2740widget text/foreground color on backdrop windows */ 2741@define-color theme_unfocused_fg_color #FFFFFF; 2742/* 2743text color for entries, views and content in general on backdrop windows */ 2744@define-color theme_unfocused_text_color #FFFFFF; 2745/* 2746widget base background color on backdrop windows */ 2747@define-color theme_unfocused_bg_color #37474F; 2748/* 2749text widgets and the like base background color on backdrop windows */ 2750@define-color theme_unfocused_base_color #455A64; 2751/* 2752base background color of selections on backdrop windows */ 2753@define-color theme_unfocused_selected_bg_color #00BCD4; 2754/* 2755text/foreground color of selections on backdrop windows */ 2756@define-color theme_unfocused_selected_fg_color #FFFFFF; 2757/* 2758widgets main borders color */ 2759@define-color borders rgba(0, 0, 0, 0.2); 2760/* 2761widgets main borders color on backdrop windows */ 2762@define-color unfocused_borders rgba(0, 0, 0, 0.2); 2763/* 2764these are pretty self explicative */ 2765@define-color warning_color #FF6D00; 2766@define-color error_color #DD2C00; 2767@define-color success_color #00C853; 2768@define-color content_view_bg #455A64; 2769