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