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