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