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