gtk.css
ASCII text, with very long lines (608)
1@keyframes ripple_effect { 2from { 3background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0)); } 4to { 5background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 6@keyframes flat_ripple_effect { 7from { 8background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.15)); } 9to { 10background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 11@keyframes row_ripple_effect { 12from { 13background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 0%, transparent 0%), image(alpha(currentColor, 0.05)); } 14to { 15background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.15) 100%, transparent 0%), image(alpha(currentColor, 0.15)); } } 16@keyframes tab_ripple_effect { 17from { 18background-image: radial-gradient(circle farthest-corner at center, rgba(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: #F5F5F5; 53color: rgba(0, 0, 0, 0.8); } 54 55/* 56These wildcard seems unavoidable, need to investigate. 57Wildcards are bad and troublesome, use them with care, 58or better, just don't. 59Everytime a wildcard is used a kitten dies, painfully. 60*/ 61*:disabled { 62-gtk-icon-effect: dim; } 63 64.gtkstyle-fallback { 65background-color: #F5F5F5; 66color: rgba(0, 0, 0, 0.8); } 67.gtkstyle-fallback:hover { 68background-color: #e8e8e8; 69color: rgba(0, 0, 0, 0.8); } 70.gtkstyle-fallback:active { 71background-color: gainsboro; 72color: rgba(0, 0, 0, 0.8); } 73.gtkstyle-fallback:disabled { 74background-color: #F5F5F5; 75color: rgba(0, 0, 0, 0.32); } 76.gtkstyle-fallback:selected { 77background-color: #42A5F5; 78color: #FFFFFF; } 79 80.view, iconview { 81background-color: #FFFFFF; 82color: rgba(0, 0, 0, 0.8); } 83.view:hover, iconview:hover, .view:active, iconview:active, .view:selected, iconview:selected { 84border-radius: 2px; } 85.view:disabled, iconview:disabled { 86color: rgba(0, 0, 0, 0.32); } 87 88.view text, iconview text, 89textview text { 90background-color: #FFFFFF; 91color: rgba(0, 0, 0, 0.8); } 92.view text:disabled, iconview text:disabled, 93textview text:disabled { 94color: rgba(0, 0, 0, 0.32); } 95 96textview border { 97background-color: #fafafa; 98background-image: image(rgba(0, 0, 0, 0.1)); 99background-repeat: no-repeat; 100color: rgba(0, 0, 0, 0.48); } 101textview border.bottom { 102background-size: 100% 1px; 103background-position: top; } 104textview border.top { 105background-size: 100% 1px; 106background-position: bottom; } 107textview border.left { 108background-size: 1px 100%; 109background-position: right; } 110textview border.right { 111background-size: 1px 100%; 112background-position: left; } 113 114.rubberband, 115rubberband, 116flowbox rubberband, 117treeview.view rubberband, 118.content-view rubberband { 119border: 1px solid #40C4FF; 120background-color: rgba(64, 196, 255, 0.3); } 121 122flowbox flowboxchild { 123outline-offset: -2px; 124padding: 4px; 125border-radius: 2px; } 126 127label.separator { 128color: rgba(0, 0, 0, 0.8); } 129label selection { 130background-color: #42A5F5; 131color: #FFFFFF; } 132label:disabled { 133color: rgba(0, 0, 0, 0.32); } 134 135.dim-label, label.separator, .titlebar:not(headerbar) .subtitle, 136headerbar .subtitle { 137opacity: 0.6; } 138 139assistant .sidebar { 140padding: 4px 0; } 141assistant .sidebar label { 142min-height: 36px; 143padding: 0 12px; 144color: rgba(0, 0, 0, 0.48); 145font-weight: 500; } 146assistant .sidebar label.highlight { 147color: rgba(0, 0, 0, 0.8); } 148 149popover.background.touch-selection, popover.background.magnifier, popover.background.osd, .csd popover.background.touch-selection, .csd popover.background.magnifier, .csd popover.background.osd, .app-notification, 150.app-notification.frame, .osd .scale-popup, .floating-bar, .osd { 151opacity: 0.9; } 152 153/********************* 154* Spinner Animation * 155*********************/ 156@keyframes spin { 157to { 158-gtk-icon-transform: rotate(1turn); } } 159@keyframes spin_colors { 1601% { 161color: #66BB6A; } 16225% { 163color: #66BB6A; } 16426% { 165color: #42A5F5; } 16650% { 167color: #42A5F5; } 16851% { 169color: #FFA726; } 17075% { 171color: #FFA726; } 17276% { 173color: #EF5350; } 174100% { 175color: #EF5350; } } 176spinner { 177background: none; 178opacity: 0; 179-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } 180spinner:checked { 181opacity: 1; 182animation: spin 1s linear infinite, spin_colors 4s linear infinite; } 183spinner:checked:disabled { 184opacity: 0.4; } 185 186/**************** 187* Text Entries * 188****************/ 189spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry, 190notebook > stack:not(:only-child) revealer spinbutton:not(.vertical), 191entry { 192min-height: 36px; 193padding: 0 8px; 194border-radius: 2px; 195transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, 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: #FFFFFF; 199color: rgba(0, 0, 0, 0.8); } 200spinbutton:focus:not(.vertical), notebook > stack:not(:only-child) revealer entry:focus, 201notebook > stack:not(:only-child) revealer spinbutton:focus:not(.vertical), 202entry:focus { 203border-image: none; 204box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 205spinbutton:disabled:not(.vertical), notebook > stack:not(:only-child) revealer entry:disabled, 206notebook > stack:not(:only-child) revealer spinbutton:disabled:not(.vertical), 207entry:disabled { 208box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 209background-color: #fafafa; 210color: rgba(0, 0, 0, 0.32); } 211spinbutton.flat:not(.vertical), notebook > stack:not(:only-child) entry, 212notebook > stack:not(:only-child) spinbutton:not(.vertical), notebook > stack:not(:only-child) revealer entry.flat, 213notebook > stack:not(:only-child) revealer spinbutton.flat:not(.vertical), colorchooser .popover.osd spinbutton:not(.vertical), 214entry.flat { 215border-radius: 0; 216transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 217border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #42A5F5 0%, transparent 0%) 0 0 0/0 0 0px; 218box-shadow: inset 0 -1px alpha(currentColor, 0.3); 219background-color: transparent; 220color: rgba(0, 0, 0, 0.8); } 221spinbutton.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry:focus, 222notebook > stack:not(:only-child) spinbutton:focus:not(.vertical), colorchooser .popover.osd spinbutton:focus:not(.vertical), 223entry.flat:focus { 224border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #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(0, 0, 0, 0.32); } 232spinbutton:not(.vertical) image, notebook > stack:not(:only-child) revealer entry image, 233notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image, 234entry image { 235color: alpha(currentColor, 0.75); } 236spinbutton:not(.vertical) image:hover, notebook > stack:not(:only-child) revealer entry image:hover, 237notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:hover, spinbutton:not(.vertical) image:active, notebook > stack:not(:only-child) revealer entry image:active, 238notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:active, 239entry image:hover, 240entry image:active { 241color: currentColor; } 242spinbutton:not(.vertical) image:disabled, notebook > stack:not(:only-child) revealer entry image:disabled, 243notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image:disabled, 244entry image:disabled { 245color: alpha(currentColor, 0.6); } 246spinbutton:not(.vertical) image.left, notebook > stack:not(:only-child) revealer entry image.left, 247notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.left, 248entry image.left { 249padding-left: 2px; 250padding-right: 6px; } 251spinbutton:not(.vertical) image.right, notebook > stack:not(:only-child) revealer entry image.right, 252notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) image.right, 253entry image.right { 254padding-left: 6px; 255padding-right: 2px; } 256spinbutton:not(.vertical) undershoot.left, notebook > stack:not(:only-child) revealer entry undershoot.left, 257notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) undershoot.left, 258entry undershoot.left { 259background-color: transparent; 260background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 261padding-left: 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(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 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: #fafafa; 292color: rgba(0, 0, 0, 0.32); } 293spinbutton.error.flat:not(.vertical), notebook > stack:not(:only-child) entry.error, 294notebook > stack:not(:only-child) spinbutton.error:not(.vertical), colorchooser .popover.osd spinbutton.error:not(.vertical), 295entry.error.flat { 296transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 297border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 0%, transparent 0%) 0 0 0/0 0 0px; 298box-shadow: inset 0 -1px #DD2C00; 299background-color: transparent; 300color: rgba(0, 0, 0, 0.8); } 301spinbutton.error.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.error:focus, 302notebook > stack:not(:only-child) spinbutton.error:focus:not(.vertical), colorchooser .popover.osd spinbutton.error:focus:not(.vertical), 303entry.error.flat:focus { 304border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #DD2C00 100%, transparent 0%) 0 0 2/0 0 2px; 305box-shadow: inset 0 -1px #DD2C00; } 306spinbutton.error.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.error:disabled, 307notebook > stack:not(:only-child) spinbutton.error:disabled:not(.vertical), colorchooser .popover.osd spinbutton.error:disabled:not(.vertical), 308entry.error.flat:disabled { 309box-shadow: inset 0 -1px alpha(currentColor, 0.3); 310background-color: transparent; 311color: rgba(0, 0, 0, 0.32); } 312spinbutton.warning:not(.vertical), notebook > stack:not(:only-child) revealer entry.warning, 313notebook > stack:not(:only-child) revealer spinbutton.warning:not(.vertical), 314entry.warning { 315transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, 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: #fafafa; 328color: rgba(0, 0, 0, 0.32); } 329spinbutton.warning.flat:not(.vertical), notebook > stack:not(:only-child) entry.warning, 330notebook > stack:not(:only-child) spinbutton.warning:not(.vertical), colorchooser .popover.osd spinbutton.warning:not(.vertical), 331entry.warning.flat { 332transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 333border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 0%, transparent 0%) 0 0 0/0 0 0px; 334box-shadow: inset 0 -1px #FF6D00; 335background-color: transparent; 336color: rgba(0, 0, 0, 0.8); } 337spinbutton.warning.flat:focus:not(.vertical), notebook > stack:not(:only-child) entry.warning:focus, 338notebook > stack:not(:only-child) spinbutton.warning:focus:not(.vertical), colorchooser .popover.osd spinbutton.warning:focus:not(.vertical), 339entry.warning.flat:focus { 340border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF6D00 100%, transparent 0%) 0 0 2/0 0 2px; 341box-shadow: inset 0 -1px #FF6D00; } 342spinbutton.warning.flat:disabled:not(.vertical), notebook > stack:not(:only-child) entry.warning:disabled, 343notebook > stack:not(:only-child) spinbutton.warning:disabled:not(.vertical), colorchooser .popover.osd spinbutton.warning:disabled:not(.vertical), 344entry.warning.flat:disabled { 345box-shadow: inset 0 -1px alpha(currentColor, 0.3); 346background-color: transparent; 347color: rgba(0, 0, 0, 0.32); } 348spinbutton:not(.vertical) progress, notebook > stack:not(:only-child) revealer entry progress, 349notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) progress, 350entry progress { 351margin: 2px -6px; 352border-style: none none solid; 353border-width: 2px; 354border-color: #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: #FFFFFF; } 365treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus { 366border-image: none; 367box-shadow: none; } 368 369/*********** 370* Buttons * 371***********/ 372@keyframes needs_attention { 373from { 374background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)); } 375to { 376background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#FF4081), to(transparent)); } } 377button { 378min-height: 24px; 379min-width: 16px; 380padding: 6px 10px; 381border-radius: 2px; 382font-weight: 500; 383transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, 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: #FAFAFA; 386background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 387color: rgba(0, 0, 0, 0.6); } 388button:hover { 389box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 390background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); 391color: rgba(0, 0, 0, 0.8); } 392button:active { 393transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, 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: rgba(0, 0, 0, 0.8); } 397button:disabled { 398box-shadow: none; 399background-color: alpha(currentColor, 0.3); 400color: rgba(0, 0, 0, 0.24); } 401button:disabled > label { 402color: inherit; } 403button:checked { 404background-color: #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(0, 0, 0, 0.6); } 424.inline-toolbar 425button:hover, modelbutton.flat:hover, popover.background checkbutton:hover, 426popover.background radiobutton:hover, 427.menuitem.button.flat:hover, spinbutton:not(.vertical) button:hover, spinbutton.vertical button:hover, toolbar.osd button:hover, .app-notification button:hover, .titlebar:not(headerbar) button:hover:not(.suggested-action):not(.destructive-action), 428headerbar button:hover:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:hover, scrollbar button:hover, check:hover, 429radio:hover, calendar.button:hover, messagedialog.csd .dialog-action-area button:hover, button.sidebar-button:hover, 430button.flat:hover { 431box-shadow: none; 432background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.15)); 433color: rgba(0, 0, 0, 0.8); } 434.inline-toolbar 435button:active, modelbutton.flat:active, popover.background checkbutton:active, 436popover.background radiobutton:active, 437.menuitem.button.flat:active, spinbutton:not(.vertical) button:active, spinbutton.vertical button:active, toolbar.osd button:active, .app-notification button:active, .titlebar:not(headerbar) button:active:not(.suggested-action):not(.destructive-action), 438headerbar button:active:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:active, scrollbar button:active, check:active, 439radio:active, calendar.button:active, messagedialog.csd .dialog-action-area button:active, button.sidebar-button:active, 440button.flat:active { 441transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 442animation: flat_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 443box-shadow: none; 444color: rgba(0, 0, 0, 0.8); } 445.inline-toolbar 446button:disabled, modelbutton.flat:disabled, popover.background checkbutton:disabled, 447popover.background radiobutton:disabled, 448.menuitem.button.flat:disabled, spinbutton:not(.vertical) button:disabled, spinbutton.vertical button:disabled, toolbar.osd button:disabled, .app-notification button:disabled, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action), 449headerbar button:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:disabled, scrollbar button:disabled, check:disabled, 450radio:disabled, calendar.button:disabled, messagedialog.csd .dialog-action-area button:disabled, button.sidebar-button:disabled, 451button.flat:disabled { 452box-shadow: none; 453background-color: transparent; 454color: rgba(0, 0, 0, 0.24); } 455.inline-toolbar 456button:disabled > label, modelbutton.flat:disabled > label, popover.background checkbutton:disabled > label, 457popover.background radiobutton:disabled > label, 458.menuitem.button.flat:disabled > label, spinbutton:not(.vertical) button:disabled > label, spinbutton.vertical button:disabled > label, toolbar.osd button:disabled > label, .app-notification button:disabled > label, .titlebar:not(headerbar) button:disabled:not(.suggested-action):not(.destructive-action) > label, 459headerbar button:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:disabled > label, scrollbar button:disabled > label, check:disabled > label, 460radio:disabled > label, calendar.button:disabled > label, messagedialog.csd .dialog-action-area button:disabled > label, button.sidebar-button:disabled > label, 461button.flat:disabled > label { 462color: inherit; } 463.inline-toolbar 464button:checked, modelbutton.flat:checked, popover.background checkbutton:checked, 465popover.background radiobutton:checked, 466.menuitem.button.flat:checked, spinbutton:not(.vertical) button:checked, spinbutton.vertical button:checked, toolbar.osd button:checked, .app-notification button:checked, .titlebar:not(headerbar) button:checked:not(.suggested-action):not(.destructive-action), 467headerbar button:checked:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked, scrollbar button:checked, check:checked, 468radio:checked, calendar.button:checked, messagedialog.csd .dialog-action-area button:checked, button.sidebar-button:checked, 469button.flat:checked { 470background-color: alpha(currentColor, 0.3); 471color: rgba(0, 0, 0, 0.8); } 472.inline-toolbar 473button:checked:disabled, modelbutton.flat:checked:disabled, popover.background checkbutton:checked:disabled, 474popover.background radiobutton:checked:disabled, 475.menuitem.button.flat:checked:disabled, spinbutton:not(.vertical) button:checked:disabled, spinbutton.vertical button:checked:disabled, toolbar.osd button:checked:disabled, .app-notification button:checked:disabled, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action), 476headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), notebook > header > tabs > arrow:checked:disabled, scrollbar button:checked:disabled, check:checked:disabled, 477radio:checked:disabled, calendar.button:checked:disabled, messagedialog.csd .dialog-action-area button:checked:disabled, button.sidebar-button:checked:disabled, 478button.flat:checked:disabled { 479background-color: alpha(currentColor, 0.3); 480color: rgba(0, 0, 0, 0.32); } 481.inline-toolbar 482button:checked:disabled > label, modelbutton.flat:checked:disabled > label, popover.background checkbutton:checked:disabled > label, 483popover.background radiobutton:checked:disabled > label, 484.menuitem.button.flat:checked:disabled > label, spinbutton:not(.vertical) button:checked:disabled > label, spinbutton.vertical button:checked:disabled > label, toolbar.osd button:checked:disabled > label, .app-notification button:checked:disabled > label, .titlebar:not(headerbar) button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, 485headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) > label, notebook > header > tabs > arrow:checked:disabled > label, scrollbar button:checked:disabled > label, check:checked:disabled > label, 486radio:checked:disabled > label, calendar.button:checked:disabled > label, messagedialog.csd .dialog-action-area button:checked:disabled > label, button.sidebar-button:checked:disabled > label, 487button.flat:checked:disabled > label { 488color: inherit; } 489.inline-toolbar 490button:not(.text-button), spinbutton:not(.vertical) button, notebook > header tab button.flat, check, 491radio, button.titlebutton, .nautilus-circular-button, 492button.image-button { 493min-width: 24px; 494padding: 6px; 495-gtk-outline-radius: 100px; 496border-radius: 100px; } 497button.text-button { 498padding-left: 16px; 499padding-right: 16px; } 500.inline-toolbar 501button.text-button:not(.text-button), spinbutton:not(.vertical) button.text-button, notebook > header tab button.text-button.flat, check.text-button, 502radio.text-button, button.text-button.titlebutton, .text-button.nautilus-circular-button, 503button.text-button.image-button { 504padding-left: 10px; 505padding-right: 10px; 506-gtk-outline-radius: 2px; 507border-radius: 2px; } 508.inline-toolbar 509button.text-button:not(.text-button) label:last-child, spinbutton:not(.vertical) button.text-button label:last-child, notebook > header tab button.text-button.flat label:last-child, check.text-button label:last-child, 510radio.text-button label:last-child, button.text-button.titlebutton label:last-child, .text-button.nautilus-circular-button label:last-child, 511button.text-button.image-button label:last-child { 512padding-left: 2px; 513padding-right: 6px; } 514.inline-toolbar 515button.text-button:not(.text-button) label:first-child, spinbutton:not(.vertical) button.text-button label:first-child, notebook > header tab button.text-button.flat label:first-child, check.text-button label:first-child, 516radio.text-button label:first-child, button.text-button.titlebutton label:first-child, .text-button.nautilus-circular-button label:first-child, 517button.text-button.image-button label:first-child { 518padding-left: 6px; 519padding-right: 2px; } 520.inline-toolbar .linked > button, .linked > modelbutton.flat, popover.background .linked > checkbutton, 521popover.background .linked > radiobutton, 522.linked > .menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button, toolbar.osd .linked > button, .app-notification .linked > button, .titlebar:not(headerbar) .linked > button:not(.suggested-action):not(.destructive-action), 523headerbar .linked > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow, scrollbar .linked > button, .linked > check, 524.linked > radio, .linked > calendar.button, messagedialog.csd .dialog-action-area .linked > button, .linked > button.sidebar-button, .inline-toolbar .linked.vertical > button, .linked.vertical > modelbutton.flat, popover.background .linked.vertical > checkbutton, 525popover.background .linked.vertical > radiobutton, 526.linked.vertical > .menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button, toolbar.osd .linked.vertical > button, .app-notification .linked.vertical > button, .titlebar:not(headerbar) .linked.vertical > button:not(.suggested-action):not(.destructive-action), 527headerbar .linked.vertical > button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow, scrollbar .linked.vertical > button, .linked.vertical > check, 528.linked.vertical > radio, .linked.vertical > calendar.button, messagedialog.csd .dialog-action-area .linked.vertical > button, .linked.vertical > button.sidebar-button, .linked > 529button.flat, .linked.vertical > 530button.flat { 531border-radius: 2px; } 532.inline-toolbar .linked > button.image-button, .inline-toolbar .linked > button.flat:not(.text-button), .linked > modelbutton.image-button.flat, popover.background .linked > checkbutton.image-button, 533popover.background .linked > radiobutton.image-button, 534.linked > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button, spinbutton.vertical .linked > button.image-button, toolbar.osd .linked > button.image-button, .app-notification .linked > button.image-button, .titlebar:not(headerbar) .linked > button.image-button:not(.suggested-action):not(.destructive-action), 535headerbar .linked > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.image-button, notebook > header tab .linked > button.flat, scrollbar .linked > button.image-button, .linked > check, 536.linked > radio, .linked > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked > button.image-button, .linked > button.image-button.sidebar-button, .linked > button.flat.titlebutton, .linked > .flat.nautilus-circular-button, .inline-toolbar .linked.vertical > button.image-button, .inline-toolbar .linked.vertical > button.flat:not(.text-button), .linked.vertical > modelbutton.image-button.flat, popover.background .linked.vertical > checkbutton.image-button, 537popover.background .linked.vertical > radiobutton.image-button, 538.linked.vertical > .image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button, spinbutton.vertical .linked.vertical > button.image-button, toolbar.osd .linked.vertical > button.image-button, .app-notification .linked.vertical > button.image-button, .titlebar:not(headerbar) .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), 539headerbar .linked.vertical > button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.image-button, notebook > header tab .linked.vertical > button.flat, scrollbar .linked.vertical > button.image-button, .linked.vertical > check, 540.linked.vertical > radio, .linked.vertical > calendar.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.image-button, .linked.vertical > button.image-button.sidebar-button, .linked.vertical > button.flat.titlebutton, .linked.vertical > .flat.nautilus-circular-button, .linked > 541button.flat.image-button, .linked.vertical > 542button.flat.image-button { 543-gtk-outline-radius: 100px; 544border-radius: 100px; } 545.inline-toolbar .linked > button.text-button.image-button, .inline-toolbar .linked > button.flat.text-button:not(.text-button), .linked > modelbutton.text-button.image-button.flat, popover.background .linked > checkbutton.text-button.image-button, 546popover.background .linked > radiobutton.text-button.image-button, 547.linked > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked > button.text-button, spinbutton.vertical .linked > button.text-button.image-button, toolbar.osd .linked > button.text-button.image-button, .app-notification .linked > button.text-button.image-button, .titlebar:not(headerbar) .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), 548headerbar .linked > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked > arrow.text-button.image-button, notebook > header tab .linked > button.flat.text-button, scrollbar .linked > button.text-button.image-button, .linked > check.text-button, 549.linked > radio.text-button, .linked > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked > button.text-button.image-button, .linked > button.text-button.image-button.sidebar-button, .linked > button.flat.text-button.titlebutton, .linked > .flat.text-button.nautilus-circular-button, .inline-toolbar .linked.vertical > button.text-button.image-button, .inline-toolbar .linked.vertical > button.flat.text-button:not(.text-button), .linked.vertical > modelbutton.text-button.image-button.flat, popover.background .linked.vertical > checkbutton.text-button.image-button, 550popover.background .linked.vertical > radiobutton.text-button.image-button, 551.linked.vertical > .text-button.image-button.menuitem.button.flat, spinbutton:not(.vertical) .linked.vertical > button.text-button, spinbutton.vertical .linked.vertical > button.text-button.image-button, toolbar.osd .linked.vertical > button.text-button.image-button, .app-notification .linked.vertical > button.text-button.image-button, .titlebar:not(headerbar) .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), 552headerbar .linked.vertical > button.text-button.image-button:not(.suggested-action):not(.destructive-action), notebook > header > tabs.linked.vertical > arrow.text-button.image-button, notebook > header tab .linked.vertical > button.flat.text-button, scrollbar .linked.vertical > button.text-button.image-button, .linked.vertical > check.text-button, 553.linked.vertical > radio.text-button, .linked.vertical > calendar.text-button.image-button.button, messagedialog.csd .dialog-action-area .linked.vertical > button.text-button.image-button, .linked.vertical > button.text-button.image-button.sidebar-button, .linked.vertical > button.flat.text-button.titlebutton, .linked.vertical > .flat.text-button.nautilus-circular-button, .linked > 554button.flat.text-button.image-button, .linked.vertical > 555button.flat.text-button.image-button { 556-gtk-outline-radius: 2px; 557border-radius: 2px; } 558.info button:disabled, 559.question button:disabled, 560.warning button:disabled, 561.error button:disabled, row:selected 562button:disabled { 563color: rgba(255, 255, 255, 0.3); } 564row:selected button.sidebar-button, .info button.flat, 565.question button.flat, 566.warning button.flat, 567.error button.flat, row:selected 568button.flat { 569color: rgba(255, 255, 255, 0.75); } 570row:selected button.sidebar-button:hover, .info button.flat:hover, 571.question button.flat:hover, 572.warning button.flat:hover, 573.error button.flat:hover, row:selected button.sidebar-button:active, .info button.flat:active, 574.question button.flat:active, 575.warning button.flat:active, 576.error button.flat:active, row:selected 577button.flat:hover, row:selected 578button.flat:active { 579color: #FFFFFF; } 580row:selected button.sidebar-button:disabled, .info button.flat:disabled, 581.question button.flat:disabled, 582.warning button.flat:disabled, 583.error button.flat:disabled, row:selected 584button.flat:disabled { 585color: rgba(255, 255, 255, 0.3); } 586button separator { 587min-width: 0; 588min-height: 0; 589background: transparent; } 590button.osd { 591padding: 12px 16px; } 592button.osd.image-button { 593padding: 12px; } 594button.osd:disabled { 595opacity: 0; } 596button.suggested-action { 597background-color: #FF4081; 598color: #FFFFFF; } 599button.suggested-action:disabled { 600box-shadow: none; 601background-color: alpha(currentColor, 0.3); 602color: rgba(0, 0, 0, 0.32); } 603button.suggested-action:disabled > label { 604color: inherit; } 605button.suggested-action:checked { 606background-color: #ff79a7; } 607button.suggested-action.flat { 608background-color: transparent; 609color: #FF4081; } 610button.suggested-action.flat:disabled { 611box-shadow: none; 612background-color: transparent; 613color: rgba(0, 0, 0, 0.32); } 614button.suggested-action.flat:disabled > label { 615color: inherit; } 616button.destructive-action { 617background-color: #FF5252; 618color: #FFFFFF; } 619button.destructive-action:disabled { 620box-shadow: none; 621background-color: alpha(currentColor, 0.3); 622color: rgba(0, 0, 0, 0.32); } 623button.destructive-action:disabled > label { 624color: inherit; } 625button.destructive-action:checked { 626background-color: #ff8686; } 627button.destructive-action.flat { 628background-color: transparent; 629color: #FF5252; } 630button.destructive-action.flat:disabled { 631box-shadow: none; 632background-color: transparent; 633color: rgba(0, 0, 0, 0.32); } 634button.destructive-action.flat:disabled > label { 635color: inherit; } 636.stack-switcher > 637button { 638outline-offset: -4px; } 639.stack-switcher > 640button > label { 641padding-left: 6px; 642padding-right: 6px; } 643.stack-switcher > 644button > image { 645padding-left: 6px; 646padding-right: 6px; 647padding-top: 3px; 648padding-bottom: 3px; } 649.stack-switcher > 650button.text-button { 651padding-left: 10px; 652padding-right: 10px; } 653.stack-switcher > 654button.image-button { 655padding-left: 4px; 656padding-right: 4px; } 657.stack-switcher > 658button.needs-attention:checked > label, 659.stack-switcher > 660button.needs-attention:checked > image { 661animation: none; 662background-image: none; } 663.primary-toolbar 664button { 665-gtk-icon-shadow: none; } 666 667.stack-switcher > 668button.needs-attention > label, 669.stack-switcher > 670button.needs-attention > image, stacksidebar row.needs-attention > label { 671animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; 672background-repeat: no-repeat; 673background-position: right 3px; 674background-size: 6px 6px; } 675.stack-switcher > 676button.needs-attention > label:dir(rtl), 677.stack-switcher > 678button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { 679background-position: left 3px; } 680 681.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat), 682notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) > 683entry:not(.flat), .linked > 684button, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { 685border-radius: 0; } 686 687.linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:not(.flat), 688notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:not(.flat):not(.vertical), .linked:not(.vertical) > 689entry:not(.flat), .linked > 690button { 691-gtk-outline-radius: 2px; } 692.linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:first-child:not(.flat), 693notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:first-child:not(.flat):not(.vertical), .linked:not(.vertical) > 694entry:first-child:not(.flat), .linked > 695button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { 696border-top-left-radius: 2px; 697border-bottom-left-radius: 2px; } 698.linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:last-child:not(.flat), 699notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:last-child:not(.flat):not(.vertical), .linked:not(.vertical) > 700entry:last-child:not(.flat), .linked > 701button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { 702border-top-right-radius: 2px; 703border-bottom-right-radius: 2px; } 704.linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked:not(.vertical) > entry:only-child:not(.flat), 705notebook > stack:not(:only-child) revealer .linked:not(.vertical) > spinbutton:only-child:not(.flat):not(.vertical), .linked:not(.vertical) > 706entry:only-child:not(.flat), .linked > 707button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo { 708border-radius: 2px; } 709 710.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat), 711notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical > 712entry:not(.flat), .linked.vertical > 713button, .linked.vertical > combobox > box > button.combo { 714border-radius: 0; } 715 716.linked.vertical > spinbutton:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:not(.flat), 717notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:not(.flat):not(.vertical), .linked.vertical > 718entry:not(.flat), .linked.vertical > 719button { 720-gtk-outline-radius: 2px; } 721.linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:first-child:not(.flat), 722notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:first-child:not(.flat):not(.vertical), .linked.vertical > 723entry:first-child:not(.flat), .linked.vertical > 724button:first-child, .linked.vertical > combobox:first-child > box > button.combo { 725border-top-left-radius: 2px; 726border-top-right-radius: 2px; } 727.linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:last-child:not(.flat), 728notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:last-child:not(.flat):not(.vertical), .linked.vertical > 729entry:last-child:not(.flat), .linked.vertical > 730button:last-child, .linked.vertical > combobox:last-child > box > button.combo { 731border-bottom-left-radius: 2px; 732border-bottom-right-radius: 2px; } 733.linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), notebook > stack:not(:only-child) revealer .linked.vertical > entry:only-child:not(.flat), 734notebook > stack:not(:only-child) revealer .linked.vertical > spinbutton:only-child:not(.flat):not(.vertical), .linked.vertical > 735entry:only-child:not(.flat), .linked.vertical > 736button:only-child, .linked.vertical > combobox:only-child > box > button.combo { 737border-radius: 2px; } 738 739/* menu buttons */ 740modelbutton.flat, popover.background checkbutton, 741popover.background radiobutton, 742.menuitem.button.flat { 743min-height: 28px; 744padding-left: 8px; 745padding-right: 8px; 746border-radius: 2px; 747color: inherit; } 748modelbutton.flat check, popover.background checkbutton check, 749popover.background radiobutton check, modelbutton.flat check:hover, popover.background checkbutton check:hover, 750popover.background radiobutton check:hover, 751modelbutton.flat radio, 752popover.background checkbutton radio, 753popover.background radiobutton radio, 754modelbutton.flat radio:hover, 755popover.background checkbutton radio:hover, 756popover.background radiobutton radio:hover, 757.menuitem.button.flat check, 758.menuitem.button.flat check:hover, 759.menuitem.button.flat radio, 760.menuitem.button.flat radio:hover { 761background-image: none; } 762modelbutton.flat check:active, popover.background checkbutton check:active, 763popover.background radiobutton check:active, 764modelbutton.flat radio:active, 765popover.background checkbutton radio:active, 766popover.background radiobutton radio:active, 767.menuitem.button.flat check:active, 768.menuitem.button.flat radio:active { 769animation: none; } 770modelbutton.flat check:not(:indeterminate):checked:active, popover.background checkbutton check:not(:indeterminate):checked:active, 771popover.background radiobutton check:not(:indeterminate):checked:active, 772.menuitem.button.flat check:not(:indeterminate):checked:active { 773animation: check_check 0.3s cubic-bezier(0.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(0, 0, 0, 0.32); } 872spinbutton.vertical:drop(active) { 873box-shadow: none; } 874spinbutton.vertical entry { 875min-height: 36px; 876min-width: 48px; 877padding: 0; } 878spinbutton.vertical button { 879min-height: 36px; 880min-width: 48px; 881padding: 0; } 882spinbutton.vertical button.up { 883border-radius: 2px 2px 0 0; } 884spinbutton.vertical button.down { 885border-radius: 0 0 2px 2px; } 886treeview spinbutton:not(.vertical) { 887min-height: 0; 888border-style: none; 889border-radius: 0; } 890treeview spinbutton:not(.vertical) entry { 891min-height: 0; 892padding: 1px 2px; } 893 894/************** 895* ComboBoxes * 896**************/ 897combobox arrow { 898-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 899min-height: 16px; 900min-width: 16px; } 901combobox menu, 902combobox .menu { 903padding: 2px 0; } 904combobox menu menuitem, 905combobox .menu menuitem { 906min-height: 36px; 907padding: 0 10px; } 908combobox:drop(active) { 909box-shadow: none; } 910 911/************ 912* Toolbars * 913************/ 914toolbar { 915-GtkWidget-window-dragging: true; 916padding: 3px; 917background-color: #F5F5F5; } 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: #FFFFFF; } 927toolbar.osd:backdrop, .app-notification:backdrop { 928box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 929toolbar.osd.left, .left.app-notification, toolbar.osd.right, .right.app-notification, toolbar.osd.top, .top.app-notification, toolbar.osd.bottom, .bottom.app-notification { 930border-radius: 0; } 931toolbar.horizontal separator { 932margin: 3px; } 933toolbar.vertical separator { 934margin: 3px; } 935toolbar:not(.inline-toolbar):not(.osd) scale, 936toolbar:not(.inline-toolbar):not(.osd) entry, 937toolbar:not(.inline-toolbar):not(.osd) spinbutton, 938toolbar:not(.inline-toolbar):not(.osd) button { 939margin: 3px; } 940toolbar:not(.inline-toolbar):not(.osd) switch { 941margin: 9px 3px; } 942 943.inline-toolbar { 944padding: 6px; 945border-style: solid; 946border-width: 0 1px 1px; 947border-color: rgba(0, 0, 0, 0.1); 948background-color: #fafafa; } 949 950searchbar, 951.location-bar { 952padding: 6px; 953border-style: solid; 954border-width: 0 0 1px; 955border-color: rgba(0, 0, 0, 0.1); 956background-color: #F5F5F5; 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: #455A64; 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: #455A64; 1104background-image: image(rgba(0, 0, 0, 0.1)); } 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.1); } 1130treeview.view:hover, treeview.view:active, treeview.view:selected { 1131border-radius: 0; } 1132treeview.view.separator { 1133min-height: 5px; 1134color: rgba(0, 0, 0, 0.1); } 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(0, 0, 0, 0.6); } 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: rgba(0, 0, 0, 0.8); } 1153treeview.view.expander:disabled { 1154color: rgba(0, 0, 0, 0.24); } 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.1); 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: #FFFFFF; } 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.1); 1196border-radius: 0; 1197box-shadow: none; 1198background-color: #FFFFFF; 1199background-clip: border-box; 1200color: #42A5F5; } 1201 1202/********* 1203* Menus * 1204*********/ 1205menubar, 1206.menubar { 1207-GtkWidget-window-dragging: true; 1208padding: 0; 1209background-color: #455A64; } 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: #FFFFFF; 1230border: 1px solid rgba(0, 0, 0, 0.1); } 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(0, 0, 0, 0.32); } 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: #FFFFFF; 1269color: rgba(0, 0, 0, 0.6); } 1270menu > arrow.top, 1271.menu > arrow.top { 1272margin-top: -4px; 1273border-bottom: 1px solid rgba(0, 0, 0, 0.1); 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.1); 1279-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } 1280menu > arrow:hover, 1281.menu > arrow:hover { 1282background-image: image(alpha(currentColor, 0.15)); 1283color: rgba(0, 0, 0, 0.8); } 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: #FAFAFA; } 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.1); 1340background-color: #F5F5F5; 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(0, 0, 0, 0.6); 1413font-weight: 500; } 1414notebook > header tab:hover { 1415color: rgba(0, 0, 0, 0.8); } 1416notebook > header tab:hover.reorderable-page { 1417border-color: rgba(0, 0, 0, 0.1); 1418background-color: #fafafa; } 1419notebook > header tab:disabled { 1420color: rgba(0, 0, 0, 0.24); } 1421notebook > header tab:checked { 1422animation: tab_ripple_effect 0.9s cubic-bezier(0, 0, 0.2, 1); 1423color: rgba(0, 0, 0, 0.8); } 1424notebook > header tab:checked:disabled { 1425color: rgba(0, 0, 0, 0.32); } 1426notebook > header tab:checked.reorderable-page { 1427border-color: rgba(0, 0, 0, 0.1); 1428background-color: #FFFFFF; } 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: #FFFFFF; } 1461 1462/************** 1463* Scrollbars * 1464**************/ 1465scrollbar { 1466transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 1467background-color: #FFFFFF; 1468background-clip: padding-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.1); } 1474scrollbar.bottom { 1475border-top: 1px solid rgba(0, 0, 0, 0.1); } 1476scrollbar.left { 1477border-right: 1px solid rgba(0, 0, 0, 0.1); } 1478scrollbar.right { 1479border-left: 1px solid rgba(0, 0, 0, 0.1); } 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(0, 0, 0, 0.48); } 1488scrollbar slider:hover { 1489background-color: rgba(0, 0, 0, 0.6); } 1490scrollbar slider:active { 1491background-color: rgba(0, 0, 0, 0.8); } 1492scrollbar slider:disabled { 1493background-color: rgba(0, 0, 0, 0.192); } 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(255, 255, 255, 0.3); } 1510scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { 1511min-width: 4px; 1512min-height: 4px; 1513margin: 2px; 1514border: 2px solid rgba(255, 255, 255, 0.3); 1515border-radius: 100px; 1516background-color: rgba(0, 0, 0, 0.48); 1517background-clip: padding-box; 1518-gtk-icon-source: none; } 1519scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled { 1520background-color: rgba(0, 0, 0, 0.192); } 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(255, 255, 255, 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(0, 0, 0, 0.32); } 1562switch:checked { 1563background-color: rgba(255, 64, 129, 0.5); } 1564switch:checked:disabled { 1565background-color: rgba(255, 64, 129, 0.2); 1566color: rgba(0, 0, 0, 0.32); } 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: #FFFFFF; 1572color: rgba(0, 0, 0, 0.8); 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: #fafafa; 1585color: rgba(0, 0, 0, 0.32); } 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.png"), url("assets/checkbox-selectionmode@2.png")); 1601margin: 8px; 1602background-color: transparent; } 1603.view.content-view.check:not(list):hover, iconview.content-view.check:not(list):hover, .view.content-view.check:not(list):active, iconview.content-view.check:not(list):active { 1604-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1605.view.content-view.check:not(list):disabled, iconview.content-view.check:not(list):disabled { 1606-gtk-icon-shadow: none; } 1607 1608.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list) { 1609-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1610-gtk-icon-source: -gtk-scaled(url("assets/checkbox-active-selectionmode.png"), url("assets/checkbox-active-selectionmode@2.png")); 1611margin: 8px; 1612background-color: transparent; } 1613.view.content-view.check:active:not(list):hover, iconview.content-view.check:active:not(list):hover, .view.content-view.check:active:not(list):active, iconview.content-view.check:active:not(list):active { 1614-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1615.view.content-view.check:active:not(list):disabled, iconview.content-view.check:active:not(list):disabled { 1616-gtk-icon-shadow: none; } 1617 1618.view.content-view.check:disabled:not(list), iconview.content-view.check:disabled:not(list) { 1619-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1620-gtk-icon-source: -gtk-scaled(url("assets/checkbox-insensitive-selectionmode.png"), url("assets/checkbox-insensitive-selectionmode@2.png")); 1621margin: 8px; 1622background-color: transparent; } 1623.view.content-view.check:disabled:not(list):hover, iconview.content-view.check:disabled:not(list):hover, .view.content-view.check:disabled:not(list):active, iconview.content-view.check:disabled:not(list):active { 1624-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1625.view.content-view.check:disabled:not(list):disabled, iconview.content-view.check:disabled:not(list):disabled { 1626-gtk-icon-shadow: none; } 1627 1628.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list) { 1629-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1630-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png")); 1631margin: 8px; 1632background-color: transparent; } 1633.view.content-view.check:checked:not(list):hover, iconview.content-view.check:checked:not(list):hover, .view.content-view.check:checked:not(list):active, iconview.content-view.check:checked:not(list):active { 1634-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1635.view.content-view.check:checked:not(list):disabled, iconview.content-view.check:checked:not(list):disabled { 1636-gtk-icon-shadow: none; } 1637 1638.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list) { 1639-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1640-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-active-selectionmode.png"), url("assets/checkbox-checked-active-selectionmode@2.png")); 1641margin: 8px; 1642background-color: transparent; } 1643.view.content-view.check:checked:active:not(list):hover, iconview.content-view.check:checked:active:not(list):hover, .view.content-view.check:checked:active:not(list):active, iconview.content-view.check:checked:active:not(list):active { 1644-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1645.view.content-view.check:checked:active:not(list):disabled, iconview.content-view.check:checked:active:not(list):disabled { 1646-gtk-icon-shadow: none; } 1647 1648.view.content-view.check:disabled:checked:not(list), iconview.content-view.check:disabled:checked:not(list) { 1649-gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 1650-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive-selectionmode.png"), url("assets/checkbox-checked-insensitive-selectionmode@2.png")); 1651margin: 8px; 1652background-color: transparent; } 1653.view.content-view.check:disabled:checked:not(list):hover, iconview.content-view.check:disabled:checked:not(list):hover, .view.content-view.check:disabled:checked:not(list):active, iconview.content-view.check:disabled:checked:not(list):active { 1654-gtk-icon-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 1655.view.content-view.check:disabled:checked:not(list):disabled, iconview.content-view.check:disabled:checked:not(list):disabled { 1656-gtk-icon-shadow: none; } 1657 1658checkbutton.text-button, radiobutton.text-button { 1659padding: 2px 0; 1660outline-offset: 0; } 1661checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { 1662margin-left: 4px; } 1663checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { 1664margin-right: 4px; } 1665 1666check, 1667radio { 1668min-height: 24px; 1669min-width: 24px; 1670-gtk-icon-source: none; 1671margin: -12px -8px; 1672padding: 12px; 1673outline-offset: 4px; 1674color: alpha(currentColor, 0.75); } 1675check:hover, check:active, 1676radio:hover, 1677radio:active { 1678color: currentColor; } 1679check:checked, check:checked:disabled, 1680radio:checked, 1681radio:checked:disabled { 1682background-color: transparent; } 1683check:checked, check:indeterminate, 1684radio:checked, 1685radio:indeterminate { 1686color: #FF4081; } 1687check:checked:disabled, check:indeterminate:disabled, 1688radio:checked:disabled, 1689radio:indeterminate:disabled { 1690color: rgba(255, 64, 129, 0.4); } 1691check:only-child, 1692radio:only-child { 1693margin: -12px; } 1694menu menuitem check, menu menuitem 1695radio { 1696transition: none; 1697margin: -16px -16px; } 1698menu menuitem check:not(:checked):not(:indeterminate):hover, menu menuitem 1699radio:not(:checked):not(:indeterminate):hover { 1700color: alpha(currentColor, 0.75); } 1701menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem 1702radio, menu menuitem 1703radio:hover, menu menuitem 1704radio:disabled { 1705background-image: none; } 1706 1707check { 1708-gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")), -gtk-recolor(url("assets/check-unchecked-symbolic.png"))); } 1709check:checked { 1710-gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")), -gtk-recolor(url("assets/check-checked-symbolic.png"))); } 1711check:indeterminate { 1712-gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")), -gtk-recolor(url("assets/check-dash-symbolic.png"))); } 1713 1714radio { 1715border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; 1716-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")), -gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); } 1717radio:checked { 1718border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(#FF4081), to(transparent)) 24/24px; } 1719radio:checked:disabled { 1720border-image: -gtk-gradient(radial, center center, 0, center center, 0.10417, to(rgba(255, 64, 129, 0.4)), to(transparent)) 24/24px; } 1721radio:indeterminate { 1722-gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")), -gtk-recolor(url("assets/radio-dash-symbolic.png"))); } 1723radio:indeterminate:checked { 1724border-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#FF4081), to(transparent)) 24/24px; } 1725 1726@keyframes check_check { 1727from { 1728-gtk-icon-transform: rotate(90deg); } 1729to { 1730-gtk-icon-transform: unset; } } 1731@keyframes check_radio { 1732from { 1733-gtk-icon-transform: scale(0); } 1734to { 1735-gtk-icon-transform: unset; } } 1736@keyframes check_indeterminate { 1737from { 1738-gtk-icon-transform: unset; } 173950% { 1740-gtk-icon-transform: scale(0, 1); } 1741to { 1742-gtk-icon-transform: unset; } } 1743check:not(:indeterminate):checked { 1744animation: check_check 0.3s cubic-bezier(0.4, 0, 0.2, 1); } 1745 1746check:not(:indeterminate):checked:active { 1747animation: 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; } 1748 1749check:indeterminate:checked, radio:indeterminate:checked { 1750animation: check_indeterminate 0.3s cubic-bezier(0.4, 0, 0.2, 1); } 1751 1752check:indeterminate:checked:active, radio:indeterminate:checked:active { 1753animation: 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; } 1754 1755menu menuitem check:not(:indeterminate):checked, 1756menu menuitem radio:not(:indeterminate):checked, 1757menu menuitem check:indeterminate:checked, 1758menu menuitem radio:indeterminate:checked { 1759animation: none; } 1760 1761treeview.view check, 1762treeview.view radio { 1763padding: 0; } 1764treeview.view check:checked:hover, treeview.view check:selected:checked:hover, 1765treeview.view radio:checked:hover, 1766treeview.view radio:selected:checked:hover { 1767background-image: none; } 1768treeview.view check, 1769treeview.view radio { 1770color: rgba(0, 0, 0, 0.6); } 1771treeview.view check:hover, treeview.view check:active, 1772treeview.view radio:hover, 1773treeview.view radio:active { 1774color: rgba(0, 0, 0, 0.8); } 1775treeview.view check:disabled, 1776treeview.view radio:disabled { 1777color: rgba(0, 0, 0, 0.24); } 1778treeview.view check:checked, treeview.view check:indeterminate, 1779treeview.view radio:checked, 1780treeview.view radio:indeterminate { 1781color: #FF4081; } 1782treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled, 1783treeview.view radio:checked:disabled, 1784treeview.view radio:indeterminate:disabled { 1785color: rgba(255, 64, 129, 0.4); } 1786treeview.view check:selected, 1787treeview.view radio:selected { 1788color: rgba(255, 255, 255, 0.75); } 1789treeview.view check:selected:hover, treeview.view check:selected:active, 1790treeview.view radio:selected:hover, 1791treeview.view radio:selected:active { 1792color: #FFFFFF; } 1793treeview.view check:selected:disabled, 1794treeview.view radio:selected:disabled { 1795color: rgba(255, 255, 255, 0.3); } 1796treeview.view check:selected:checked, treeview.view check:selected:indeterminate, 1797treeview.view radio:selected:checked, 1798treeview.view radio:selected:indeterminate { 1799color: #FF4081; } 1800treeview.view check:selected:checked:disabled, treeview.view check:selected:indeterminate:disabled, 1801treeview.view radio:selected:checked:disabled, 1802treeview.view radio:selected:indeterminate:disabled { 1803color: rgba(255, 64, 129, 0.4); } 1804 1805treeview.view radio:checked { 1806-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic.png"))); 1807border-image: none; } 1808 1809/************ 1810* GtkScale * 1811************/ 1812scale { 1813min-height: 12px; 1814min-width: 12px; 1815padding: 12px; } 1816scale * { 1817transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 1818scale slider { 1819min-height: 24px; 1820min-width: 24px; 1821margin: -10px; } 1822scale trough { 1823outline-offset: 2px; 1824background-color: alpha(currentColor, 0.3); } 1825scale trough:disabled { 1826color: rgba(0, 0, 0, 0.32); } 1827scale highlight { 1828background-color: #FF4081; } 1829scale highlight:disabled { 1830background-color: transparent; } 1831scale fill { 1832background-color: alpha(currentColor, 0.3); } 1833scale fill:disabled { 1834background-color: transparent; } 1835scale slider { 1836transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 1837background-repeat: no-repeat; 1838background-position: center; 1839background-size: calc(100% - 8px); } 1840scale slider { 1841background-image: -gtk-scaled(url("assets/slider.png"), url("assets/slider@2.png")); } 1842scale slider:disabled { 1843background-image: -gtk-scaled(url("assets/slider-insensitive.png"), url("assets/slider-insensitive@2.png")); } 1844scale slider:hover { 1845background-size: calc(100% - 4px); } 1846scale slider:active { 1847background-size: calc(100% - 0px); } 1848scale.fine-tune slider { 1849background-size: calc(100% - 12px); } 1850scale value { 1851color: alpha(currentColor, 0.6); } 1852scale marks { 1853color: alpha(currentColor, 0.3); } 1854scale marks.top { 1855margin-bottom: 8px; 1856margin-top: -16px; } 1857scale marks.bottom { 1858margin-top: 8px; 1859margin-bottom: -16px; } 1860scale marks.top { 1861margin-right: 8px; 1862margin-left: -16px; } 1863scale marks.bottom { 1864margin-left: 8px; 1865margin-right: -16px; } 1866scale.horizontal indicator { 1867min-height: 8px; 1868min-width: 1px; } 1869scale.vertical indicator { 1870min-height: 1px; 1871min-width: 8px; } 1872scale.color.horizontal slider, 1873scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1874min-height: 30px; 1875min-width: 24px; 1876margin-top: -16px; 1877background-position: center calc(100% - 4px); } 1878scale.color.horizontal slider, 1879scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1880background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); } 1881scale.color.horizontal slider:hover, 1882scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1883background-position: center calc(100% - 2px); } 1884scale.color.horizontal slider:active, 1885scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1886background-position: center calc(100% - 0px); } 1887scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1888background-position: center calc(100% - 6px); } 1889scale.color.horizontal slider, 1890scale.horizontal contents:last-child:not(:only-child) > trough > slider { 1891min-height: 30px; 1892min-width: 24px; 1893margin-top: -16px; 1894background-position: center calc(100% - 4px); } 1895scale.color.horizontal slider:disabled, 1896scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { 1897background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-insensitive@2.png")); } 1898scale.color.horizontal slider:hover, 1899scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { 1900background-position: center calc(100% - 2px); } 1901scale.color.horizontal slider:active, 1902scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { 1903background-position: center calc(100% - 0px); } 1904scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { 1905background-position: center calc(100% - 6px); } 1906scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1907min-height: 30px; 1908min-width: 24px; 1909margin-bottom: -16px; 1910background-position: center calc(4px); } 1911scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1912background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); } 1913scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1914background-position: center calc(2px); } 1915scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1916background-position: center calc(0px); } 1917scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1918background-position: center calc(6px); } 1919scale.horizontal contents:first-child:not(:only-child) > trough > slider { 1920min-height: 30px; 1921min-width: 24px; 1922margin-bottom: -16px; 1923background-position: center calc(4px); } 1924scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { 1925background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-insensitive@2.png")); } 1926scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { 1927background-position: center calc(2px); } 1928scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { 1929background-position: center calc(0px); } 1930scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { 1931background-position: center calc(6px); } 1932scale.color.vertical:dir(rtl) slider, 1933scale.vertical contents:last-child:not(:only-child) > trough > slider { 1934min-height: 24px; 1935min-width: 30px; 1936margin-left: -16px; 1937background-position: calc(4px) center; } 1938scale.color.vertical:dir(rtl) slider, 1939scale.vertical contents:last-child:not(:only-child) > trough > slider { 1940background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); } 1941scale.color.vertical:dir(rtl) slider:hover, 1942scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1943background-position: calc(2px) center; } 1944scale.color.vertical:dir(rtl) slider:active, 1945scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1946background-position: calc(0px) center; } 1947scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1948background-position: calc(6px) center; } 1949scale.color.vertical:dir(rtl) slider, 1950scale.vertical contents:last-child:not(:only-child) > trough > slider { 1951min-height: 24px; 1952min-width: 30px; 1953margin-left: -16px; 1954background-position: calc(4px) center; } 1955scale.color.vertical:dir(rtl) slider:disabled, 1956scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { 1957background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-insensitive@2.png")); } 1958scale.color.vertical:dir(rtl) slider:hover, 1959scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { 1960background-position: calc(2px) center; } 1961scale.color.vertical:dir(rtl) slider:active, 1962scale.vertical contents:last-child:not(:only-child) > trough > slider:active { 1963background-position: calc(0px) center; } 1964scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { 1965background-position: calc(6px) center; } 1966scale.color.vertical:dir(ltr) slider, 1967scale.vertical contents:first-child:not(:only-child) > trough > slider { 1968min-height: 24px; 1969min-width: 30px; 1970margin-right: -16px; 1971background-position: calc(100% - 4px) center; } 1972scale.color.vertical:dir(ltr) slider, 1973scale.vertical contents:first-child:not(:only-child) > trough > slider { 1974background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); } 1975scale.color.vertical:dir(ltr) slider:hover, 1976scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1977background-position: calc(100% - 2px) center; } 1978scale.color.vertical:dir(ltr) slider:active, 1979scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1980background-position: calc(100% - 0px) center; } 1981scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1982background-position: calc(100% - 6px) center; } 1983scale.color.vertical:dir(ltr) slider, 1984scale.vertical contents:first-child:not(:only-child) > trough > slider { 1985min-height: 24px; 1986min-width: 30px; 1987margin-right: -16px; 1988background-position: calc(100% - 4px) center; } 1989scale.color.vertical:dir(ltr) slider:disabled, 1990scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { 1991background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-insensitive@2.png")); } 1992scale.color.vertical:dir(ltr) slider:hover, 1993scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { 1994background-position: calc(100% - 2px) center; } 1995scale.color.vertical:dir(ltr) slider:active, 1996scale.vertical contents:first-child:not(:only-child) > trough > slider:active { 1997background-position: calc(100% - 0px) center; } 1998scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { 1999background-position: calc(100% - 6px) center; } 2000scale.color { 2001min-height: 0; 2002min-width: 0; } 2003scale.color.horizontal { 2004padding: 0 0 12px 0; } 2005scale.color.horizontal trough { 2006padding-bottom: 4px; } 2007scale.color.horizontal slider { 2008margin-bottom: -14px; 2009margin-top: 0; } 2010scale.color.vertical:dir(ltr) { 2011padding: 0 0 0 12px; } 2012scale.color.vertical:dir(ltr) trough { 2013padding-left: 4px; } 2014scale.color.vertical:dir(ltr) slider { 2015margin-left: -14px; 2016margin-right: 0; } 2017scale.color.vertical:dir(rtl) { 2018padding: 0 12px 0 0; } 2019scale.color.vertical:dir(rtl) trough { 2020padding-right: 4px; } 2021scale.color.vertical:dir(rtl) slider { 2022margin-right: -14px; 2023margin-left: 0; } 2024 2025/***************** 2026* Progress bars * 2027*****************/ 2028progressbar { 2029color: rgba(0, 0, 0, 0.48); 2030font-size: smaller; } 2031progressbar.horizontal trough, 2032progressbar.horizontal progress { 2033min-height: 4px; } 2034progressbar.vertical trough, 2035progressbar.vertical progress { 2036min-width: 4px; } 2037progressbar trough { 2038background-color: rgba(66, 165, 245, 0.3); } 2039progressbar progress { 2040background-color: #42A5F5; } 2041 2042/************* 2043* Level Bar * 2044*************/ 2045levelbar block { 2046min-width: 36px; 2047min-height: 4px; } 2048levelbar.vertical block { 2049min-width: 4px; 2050min-height: 36px; } 2051levelbar trough { 2052padding: 2px; 2053border-radius: 2px; 2054transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 2055border-image: none; 2056box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2057background-color: #FFFFFF; 2058color: rgba(0, 0, 0, 0.8); } 2059levelbar trough:disabled { 2060box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 2061background-color: #fafafa; 2062color: rgba(0, 0, 0, 0.32); } 2063levelbar.horizontal.discrete block { 2064margin: 0 1px; } 2065levelbar.vertical.discrete block { 2066margin: 1px 0; } 2067levelbar.horizontal.discrete trough { 2068padding: 2px 1px; } 2069levelbar.vertical.discrete trough { 2070padding: 1px 2px; } 2071levelbar block.low { 2072background-color: #FF6D00; } 2073levelbar block.high { 2074background-color: #42A5F5; } 2075levelbar block.full { 2076background-color: #00C853; } 2077levelbar block.empty { 2078background-color: alpha(currentColor, 0.3); 2079color: rgba(0, 0, 0, 0.32); } 2080 2081/**************** 2082* Print dialog * 2083*****************/ 2084printdialog paper { 2085padding: 0; 2086border: 1px solid rgba(0, 0, 0, 0.1); 2087background: #FFFFFF; 2088color: rgba(0, 0, 0, 0.8); } 2089printdialog .dialog-action-box { 2090margin: 12px; } 2091 2092/********** 2093* Frames * 2094**********/ 2095frame > border, 2096.frame { 2097margin: 0; 2098padding: 0; 2099border: 1px solid rgba(0, 0, 0, 0.1); 2100border-radius: 0; 2101box-shadow: none; } 2102frame > border.flat, 2103.frame.flat { 2104border-style: none; } 2105 2106actionbar > revealer > box { 2107padding: 6px; 2108border-top: 1px solid rgba(0, 0, 0, 0.1); } 2109 2110scrolledwindow viewport.frame { 2111border-style: none; } 2112scrolledwindow overshoot.top { 2113background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent)); 2114background-repeat: no-repeat; 2115background-position: center top; 2116background-color: transparent; 2117border: none; 2118box-shadow: none; } 2119scrolledwindow overshoot.bottom { 2120background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent)); 2121background-repeat: no-repeat; 2122background-position: center bottom; 2123background-color: transparent; 2124border: none; 2125box-shadow: none; } 2126scrolledwindow overshoot.left { 2127background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent)); 2128background-repeat: no-repeat; 2129background-position: left center; 2130background-color: transparent; 2131border: none; 2132box-shadow: none; } 2133scrolledwindow overshoot.right { 2134background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(64, 196, 255, 0.3)), to(transparent)); 2135background-repeat: no-repeat; 2136background-position: right center; 2137background-color: transparent; 2138border: none; 2139box-shadow: none; } 2140scrolledwindow undershoot.top { 2141background-color: transparent; 2142background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2143padding-top: 1px; 2144background-size: 12px 1px; 2145background-repeat: repeat-x; 2146background-origin: content-box; 2147background-position: left top; } 2148scrolledwindow undershoot.bottom { 2149background-color: transparent; 2150background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2151padding-bottom: 1px; 2152background-size: 12px 1px; 2153background-repeat: repeat-x; 2154background-origin: content-box; 2155background-position: left bottom; } 2156scrolledwindow undershoot.left { 2157background-color: transparent; 2158background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2159padding-left: 1px; 2160background-size: 1px 12px; 2161background-repeat: repeat-y; 2162background-origin: content-box; 2163background-position: left top; } 2164scrolledwindow undershoot.right { 2165background-color: transparent; 2166background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.24) 50%); 2167padding-right: 1px; 2168background-size: 1px 12px; 2169background-repeat: repeat-y; 2170background-origin: content-box; 2171background-position: right top; } 2172scrolledwindow junction { 2173border-style: solid none none solid; 2174border-width: 1px; 2175border-color: rgba(0, 0, 0, 0.1); 2176background-color: #FFFFFF; } 2177scrolledwindow junction:dir(rtl) { 2178border-style: solid solid none none; } 2179 2180separator { 2181min-width: 1px; 2182min-height: 1px; 2183background: rgba(0, 0, 0, 0.1); } 2184 2185/********* 2186* Lists * 2187*********/ 2188list { 2189border-color: rgba(0, 0, 0, 0.1); 2190background-color: #FFFFFF; } 2191list row { 2192padding: 2px; } 2193 2194row { 2195transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; } 2196row:hover { 2197transition: none; } 2198row.activatable, .view, iconview, treeview.view header button { 2199background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0)); } 2200row.activatable:hover, .view:hover, iconview:hover, treeview.view header button:hover { 2201background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0) 100%, transparent 0%), image(alpha(currentColor, 0.05)); } 2202row.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 { 2203transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, background-image 0; 2204animation: row_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; } 2205 2206/********************* 2207* App Notifications * 2208*********************/ 2209.app-notification, 2210.app-notification.frame { 2211margin: 8px; } 2212.app-notification border, 2213.app-notification.frame border { 2214border: none; } 2215 2216/************* 2217* Expanders * 2218*************/ 2219expander arrow { 2220transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 2221min-width: 16px; 2222min-height: 16px; 2223-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 2224-gtk-icon-transform: rotate(-90deg); 2225color: rgba(0, 0, 0, 0.6); } 2226expander arrow:dir(rtl) { 2227-gtk-icon-transform: rotate(90deg); } 2228expander arrow:checked { 2229-gtk-icon-transform: unset; } 2230expander arrow:hover, expander arrow:active { 2231color: rgba(0, 0, 0, 0.8); } 2232expander arrow:disabled { 2233color: rgba(0, 0, 0, 0.24); } 2234expander arrow:selected { 2235color: rgba(255, 255, 255, 0.75); } 2236expander arrow:selected:hover, expander arrow:selected:active { 2237color: #FFFFFF; } 2238expander arrow:selected:disabled { 2239color: rgba(255, 255, 255, 0.3); } 2240 2241/************ 2242* Calendar * 2243***********/ 2244calendar { 2245padding: 1px; 2246border: 1px solid rgba(0, 0, 0, 0.1); 2247color: rgba(0, 0, 0, 0.8); } 2248calendar:disabled { 2249color: rgba(0, 0, 0, 0.32); } 2250calendar:selected { 2251border-radius: 3px; } 2252calendar.header { 2253border: none; 2254border-bottom: 1px solid rgba(0, 0, 0, 0.1); 2255border-radius: 0; } 2256calendar:indeterminate { 2257color: alpha(currentColor, 0.4); } 2258calendar.highlight { 2259color: alpha(currentColor, 0.6); 2260font-weight: 500; } 2261 2262/*********** 2263* Dialogs * 2264***********/ 2265messagedialog.background { 2266background-color: #FAFAFA; } 2267messagedialog .titlebar { 2268min-height: 24px; 2269border-style: none; 2270box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); 2271background-color: #FAFAFA; } 2272messagedialog.csd.background { 2273border-bottom-left-radius: 2px; 2274border-bottom-right-radius: 2px; } 2275messagedialog.csd .dialog-action-area button { 2276padding: 8px 16px; 2277border-top: 1px solid rgba(0, 0, 0, 0.1); 2278border-radius: 0; } 2279messagedialog.csd .dialog-action-area button:first-child { 2280border-bottom-left-radius: 2px; } 2281messagedialog.csd .dialog-action-area button:last-child { 2282border-bottom-right-radius: 2px; } 2283 2284filechooser .dialog-action-box { 2285border-top: 1px solid rgba(0, 0, 0, 0.1); } 2286filechooser #pathbarbox { 2287border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 2288 2289filechooserbutton:drop(active) { 2290box-shadow: none; } 2291 2292/*********** 2293* Sidebar * 2294***********/ 2295.sidebar { 2296border-style: none; 2297background-color: #FAFAFA; } 2298stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { 2299border-right: 1px solid rgba(0, 0, 0, 0.1); 2300border-left-style: none; } 2301stacksidebar.sidebar:dir(rtl) list 2302.sidebar:dir(rtl), stacksidebar.sidebar.right list 2303.sidebar:dir(rtl), .sidebar.right { 2304border-left: 1px solid rgba(0, 0, 0, 0.1); 2305border-right-style: none; } 2306.sidebar list { 2307background-color: transparent; } 2308paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { 2309border-style: none; } 2310 2311stacksidebar row { 2312padding: 10px 4px; } 2313stacksidebar row > label { 2314padding-left: 6px; 2315padding-right: 6px; } 2316 2317/**************** 2318* File chooser * 2319****************/ 2320placessidebar > viewport.frame { 2321border-style: none; } 2322placessidebar row { 2323min-height: 32px; 2324padding: 0; } 2325placessidebar row > revealer { 2326padding: 0 12px; } 2327placessidebar row:selected { 2328color: #FFFFFF; } 2329placessidebar row:disabled { 2330color: rgba(0, 0, 0, 0.32); } 2331placessidebar row image.sidebar-icon { 2332opacity: 0.6; } 2333placessidebar row image.sidebar-icon:dir(ltr) { 2334padding-right: 8px; } 2335placessidebar row image.sidebar-icon:dir(rtl) { 2336padding-left: 8px; } 2337placessidebar row label.sidebar-label:dir(ltr) { 2338padding-right: 2px; } 2339placessidebar row label.sidebar-label:dir(rtl) { 2340padding-left: 2px; } 2341button.sidebar-button { 2342min-height: 24px; 2343min-width: 24px; 2344margin-top: 0; 2345margin-bottom: 0; 2346padding: 0; 2347border-radius: 100%; 2348-gtk-outline-radius: 100%; } 2349placessidebar row.sidebar-placeholder-row { 2350min-height: 2px; 2351padding: 0 8px; 2352background-image: image(#FF4081); 2353background-clip: content-box; } 2354placessidebar row.sidebar-new-bookmark-row { 2355color: #FF4081; } 2356placessidebar row:drop(active):not(:disabled) { 2357box-shadow: inset 0 0 0 2px #FF4081; } 2358 2359placesview .server-list-button > image { 2360-gtk-icon-transform: rotate(0turn); } 2361placesview .server-list-button:checked > image { 2362-gtk-icon-transform: rotate(-0.5turn); } 2363placesview > actionbar > revealer > box > label { 2364padding-left: 8px; 2365padding-right: 8px; } 2366 2367/********* 2368* Paned * 2369*********/ 2370paned > separator { 2371min-width: 1px; 2372min-height: 1px; 2373-gtk-icon-source: none; 2374border-style: none; 2375background-color: transparent; 2376background-image: image(rgba(0, 0, 0, 0.1)); 2377background-size: 1px 1px; } 2378paned > separator.wide { 2379min-width: 6px; 2380min-height: 6px; 2381background-color: #F5F5F5; 2382background-image: image(rgba(0, 0, 0, 0.1)), image(rgba(0, 0, 0, 0.1)); 2383background-size: 1px 1px, 1px 1px; } 2384paned.horizontal > separator { 2385background-repeat: repeat-y; } 2386paned.horizontal > separator:dir(ltr) { 2387margin: 0 -8px 0 0; 2388padding: 0 8px 0 0; 2389background-position: left; } 2390paned.horizontal > separator:dir(rtl) { 2391margin: 0 0 0 -8px; 2392padding: 0 0 0 8px; 2393background-position: right; } 2394paned.horizontal > separator.wide { 2395margin: 0; 2396padding: 0; 2397background-repeat: repeat-y, repeat-y; 2398background-position: left, right; } 2399paned.vertical > separator { 2400margin: 0 0 -8px 0; 2401padding: 0 0 8px 0; 2402background-repeat: repeat-x; 2403background-position: top; } 2404paned.vertical > separator.wide { 2405margin: 0; 2406padding: 0; 2407background-repeat: repeat-x, repeat-x; 2408background-position: bottom, top; } 2409 2410/************** 2411* GtkInfoBar * 2412**************/ 2413infobar { 2414border-style: none; } 2415 2416.info { 2417background-color: #66BB6A; } 2418 2419.question { 2420background-color: #42A5F5; } 2421 2422.warning { 2423background-color: #FFA726; } 2424 2425.error { 2426background-color: #EF5350; } 2427 2428.info, 2429.question, 2430.warning, 2431.error { 2432color: #FFFFFF; } 2433 2434/************ 2435* Tooltips * 2436************/ 2437tooltip { 2438border-radius: 2px; 2439box-shadow: none; } 2440tooltip.background { 2441background-color: rgba(255, 255, 255, 0.9); } 2442tooltip decoration { 2443background-color: transparent; } 2444tooltip label { 2445min-height: 20px; 2446padding: 2px 2px; } 2447tooltip * { 2448padding: 0; 2449background-color: transparent; 2450color: inherit; } 2451 2452/***************** 2453* Color Chooser * 2454*****************/ 2455colorswatch.top { 2456border-top-left-radius: 2.5px; 2457border-top-right-radius: 2.5px; } 2458colorswatch.top overlay { 2459border-top-left-radius: 2px; 2460border-top-right-radius: 2px; } 2461colorswatch.bottom { 2462border-bottom-left-radius: 2.5px; 2463border-bottom-right-radius: 2.5px; } 2464colorswatch.bottom overlay { 2465border-bottom-left-radius: 2px; 2466border-bottom-right-radius: 2px; } 2467colorswatch.left, colorswatch:first-child:not(.top) { 2468border-top-left-radius: 2.5px; 2469border-bottom-left-radius: 2.5px; } 2470colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { 2471border-top-left-radius: 2px; 2472border-bottom-left-radius: 2px; } 2473colorswatch.right, colorswatch:last-child:not(.bottom) { 2474border-top-right-radius: 2.5px; 2475border-bottom-right-radius: 2.5px; } 2476colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { 2477border-top-right-radius: 2px; 2478border-bottom-right-radius: 2px; } 2479colorswatch.dark overlay { 2480color: white; } 2481colorswatch.light overlay { 2482color: rgba(0, 0, 0, 0.8); } 2483colorswatch.dark { 2484color: white; } 2485colorswatch.light { 2486color: rgba(0, 0, 0, 0.8); } 2487colorswatch:drop(active) { 2488box-shadow: none; } 2489colorswatch:drop(active).light overlay { 2490box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2491colorswatch:drop(active).dark overlay { 2492box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 2px #FF4081; } 2493colorswatch overlay { 2494transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 2495box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2496colorswatch overlay:hover { 2497box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2498colorswatch#add-color-button { 2499border-radius: 2px 2px 0 0; 2500color: white; } 2501colorswatch#add-color-button:only-child { 2502border-radius: 2px; } 2503colorswatch#add-color-button overlay { 2504background-image: linear-gradient(to right, #EF5350 25%, #FFA726 25%, #FFA726 50%, #66BB6A 50%, #66BB6A 75%, #42A5F5 75%); 2505color: white; } 2506colorswatch:disabled { 2507opacity: 0.4; } 2508colorswatch:disabled overlay { 2509box-shadow: none; } 2510colorswatch#editor-color-sample { 2511border-radius: 2.5px; } 2512colorswatch#editor-color-sample overlay { 2513border-radius: 2px; } 2514 2515colorchooser .popover.osd { 2516transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 2517border-radius: 2px; 2518box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 2519background-color: #FFFFFF; } 2520colorchooser .popover.osd:backdrop { 2521box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2522 2523/******** 2524* Misc * 2525********/ 2526.content-view { 2527background-color: #F5F5F5; } 2528 2529/********************** 2530* Window Decorations * 2531*********************/ 2532decoration { 2533transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 2534border-radius: 2px 2px 0 0; 2535box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent; 2536margin: 8px; } 2537decoration:backdrop { 2538box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent; } 2539.fullscreen decoration, .tiled decoration { 2540border-radius: 0; } 2541.popup decoration { 2542box-shadow: none; } 2543.ssd decoration { 2544box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } 2545.csd.popup decoration { 2546border-radius: 2px; 2547box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2548tooltip.csd decoration { 2549border-radius: 2px; 2550box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); } 2551messagedialog.csd decoration { 2552border-radius: 2px; } 2553.solid-csd decoration { 2554margin: 4px; 2555border-radius: 0; 2556box-shadow: none; 2557background-color: #F5F5F5; } 2558 2559.view:selected, iconview:selected, .view text selection, iconview text selection, 2560textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2561notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2562entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2563popover.background radiobutton:selected, 2564.menuitem.button.flat:selected, row:selected, calendar:selected { 2565background-color: #42A5F5; } 2566row:selected label, label:selected, .view:selected, iconview:selected, .view text selection, iconview text selection, 2567textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, notebook > stack:not(:only-child) revealer entry selection, 2568notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, 2569entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, 2570popover.background radiobutton:selected, 2571.menuitem.button.flat:selected, row:selected, calendar:selected { 2572color: #FFFFFF; } 2573row:selected label:disabled, label:disabled:selected, .view:disabled:selected, iconview:disabled:selected, .view text selection:disabled, iconview text selection:disabled, 2574textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, notebook > stack:not(:only-child) revealer entry selection:disabled, 2575notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled, 2576entry selection:disabled, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, 2577popover.background radiobutton:disabled:selected, 2578.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { 2579color: rgba(255, 255, 255, 0.4); } 2580 2581.monospace { 2582font: Monospace; } 2583 2584/********************** 2585* Touch Copy & Paste * 2586*********************/ 2587cursor-handle { 2588border-radius: 100px; 2589background-color: #FF4081; 2590background-image: none; } 2591cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { 2592padding-left: 6px; 2593border-top-right-radius: 0; } 2594cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { 2595padding-right: 6px; 2596border-top-left-radius: 0; } 2597cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { 2598-GtkWidget-text-handle-width: 24; 2599-GtkWidget-text-handle-height: 30; 2600-gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); } 2601 2602.context-menu { 2603font: initial; } 2604 2605button.circular { 2606border-radius: 100px; 2607-gtk-outline-radius: 100px; } 2608button.circular label { 2609padding: 0; } 2610 2611.keycap { 2612min-width: 12px; 2613min-height: 26px; 2614margin-top: 2px; 2615padding-bottom: 2px; 2616padding-left: 8px; 2617padding-right: 8px; 2618border: solid 1px rgba(0, 0, 0, 0.1); 2619border-radius: 3px; 2620box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1); 2621background-color: #FFFFFF; 2622color: rgba(0, 0, 0, 0.8); 2623font-size: smaller; } 2624 2625*:drop(active) { 2626transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0; 2627box-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; 2628caret-color: #FF4081; } 2629 2630stackswitcher button.text-button { 2631min-width: 100px; } 2632 2633stackswitcher button.circular, 2634stackswitcher button.text-button.circular { 2635min-width: 36px; 2636min-height: 36px; 2637padding: 0; } 2638 2639.floating-bar { 2640min-height: 32px; 2641padding: 0; 2642border-style: solid solid none; 2643border-width: 1px; 2644border-color: rgba(0, 0, 0, 0.1); 2645border-radius: 3px 3px 0 0; 2646background-color: #FFFFFF; 2647background-clip: padding-box; 2648transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, border-width 0; } 2649.floating-bar.left { 2650margin-right: 7px; 2651border-left-style: none; 2652border-top-left-radius: 0; } 2653.floating-bar.right { 2654margin-left: 7px; 2655border-right-style: none; 2656border-top-right-radius: 0; } 2657.floating-bar button { 2658min-height: 24px; 2659min-width: 24px; 2660margin: 4px; 2661padding: 0; } 2662 2663/************ 2664* Nautilus * 2665************/ 2666.nautilus-window, 2667.nautilus-window notebook, 2668.nautilus-window notebook > stack { 2669background: #FFFFFF; } 2670 2671.nautilus-desktop-window, 2672.nautilus-desktop-window notebook, 2673.nautilus-desktop-window notebook > stack { 2674background: transparent; } 2675 2676.nautilus-desktop.nautilus-canvas-item { 2677color: #FFFFFF; 2678text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2679 2680.nautilus-desktop.nautilus-canvas-item:selected { 2681text-shadow: none; } 2682 2683@keyframes needs_attention_keyframes { 26840% { 2685background-color: transparent; } 268650% { 2687background-color: alpha(currentColor, 0.3); } 2688100% { 2689background-color: transparent; } } 2690.nautilus-operations-button-needs-attention { 2691color: #FF4081; 2692animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); } 2693 2694.nautilus-operations-button-needs-attention-multiple { 2695color: #FF4081; 2696animation: needs_attention_keyframes 2s cubic-bezier(0.4, 0, 0.2, 1); 2697animation-iteration-count: 2; } 2698 2699.disk-space-display.unknown { 2700background-color: #FF6D00; } 2701 2702.disk-space-display.used { 2703background-color: #42A5F5; } 2704 2705.disk-space-display.free { 2706background-color: alpha(currentColor, 0.3); 2707color: rgba(0, 0, 0, 0.32); } 2708 2709.documents-entry-tag { 2710margin: 3px -2px 3px 8px; 2711padding: 0 8px; 2712border-radius: 100px; 2713box-shadow: none; 2714background-color: #42A5F5; 2715color: #FFFFFF; } 2716.documents-entry-tag:hover { 2717box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 2718 2719.documents-entry-tag.button { 2720margin: 0 -2px; 2721padding: 4px; 2722border-radius: 100px; 2723box-shadow: none; 2724color: rgba(255, 255, 255, 0.75); } 2725.documents-entry-tag.button:hover, .documents-entry-tag.button:active { 2726color: #FFFFFF; } 2727 2728.nautilus-window searchbar { 2729border-top: 1px solid rgba(0, 0, 0, 0.1); } 2730 2731.nautilus-window .searchbar-container { 2732margin-top: -1px; } 2733 2734/* GTK NAMED COLORS 2735---------------- 2736use responsibly! */ 2737/* 2738widget text/foreground color */ 2739@define-color theme_fg_color rgba(0, 0, 0, 0.8); 2740/* 2741text color for entries, views and content in general */ 2742@define-color theme_text_color rgba(0, 0, 0, 0.8); 2743/* 2744widget base background color */ 2745@define-color theme_bg_color #F5F5F5; 2746/* 2747text widgets and the like base background color */ 2748@define-color theme_base_color #FFFFFF; 2749/* 2750base background color of selections */ 2751@define-color theme_selected_bg_color #42A5F5; 2752/* 2753text/foreground color of selections */ 2754@define-color theme_selected_fg_color #FFFFFF; 2755/* 2756base background color of insensitive widgets */ 2757@define-color insensitive_bg_color #F5F5F5; 2758/* 2759text foreground color of insensitive widgets */ 2760@define-color insensitive_fg_color rgba(0, 0, 0, 0.32); 2761/* 2762insensitive text widgets and the like base background color */ 2763@define-color insensitive_base_color #fafafa; 2764/* 2765widget text/foreground color on backdrop windows */ 2766@define-color theme_unfocused_fg_color rgba(0, 0, 0, 0.8); 2767/* 2768text color for entries, views and content in general on backdrop windows */ 2769@define-color theme_unfocused_text_color rgba(0, 0, 0, 0.8); 2770/* 2771widget base background color on backdrop windows */ 2772@define-color theme_unfocused_bg_color #F5F5F5; 2773/* 2774text widgets and the like base background color on backdrop windows */ 2775@define-color theme_unfocused_base_color #FFFFFF; 2776/* 2777base background color of selections on backdrop windows */ 2778@define-color theme_unfocused_selected_bg_color #42A5F5; 2779/* 2780text/foreground color of selections on backdrop windows */ 2781@define-color theme_unfocused_selected_fg_color #FFFFFF; 2782/* 2783widgets main borders color */ 2784@define-color borders rgba(0, 0, 0, 0.1); 2785/* 2786widgets main borders color on backdrop windows */ 2787@define-color unfocused_borders rgba(0, 0, 0, 0.1); 2788/* 2789these are pretty self explicative */ 2790@define-color warning_color #FF6D00; 2791@define-color error_color #DD2C00; 2792@define-color success_color #00C853; 2793@define-color content_view_bg #FFFFFF; 2794