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