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