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