Orchis Dark Green Compact Taskbar Flashing

[ajowens001]

Hello all,

Requesting assistance finding out how to stop the crazy taskbar thing that's going on in the GIF. Currently, it happens each and every time I log in to the machine - is reproduceable with a simple log off or reboot. It only clears when I click on the Desktop or an application - the GIF shows my cursor hovering over the taskbar after log in before selecting anything. Below are screenshots of my Tweaks window open to show some settings if it helps - transparency override, themes, etc. Please let me know if I can provide any other settings or configurations. I'm not sure, but because of the task

I have tried altering each setting I thought could affect the taskbar - e.g. transparency overrides, positions or behaviours - with no joy.

I am leaning toward it being a shell theme issue, however; I have changed the shell theme, logged-off and did not see the same adverse effect happening with the taskbar upon logging back in.

Is there any guidance someone can give as to what in my shell theme could be causing this?

When I originally downloaded the theme, I changed some settings in the below .css for the Orchis-Green-Dark-Compact gtk 3.0 and 4.0. I was trying to darken the color of the green used within the theme - with no success and aparently added issues. I can re-download the theme, sure - but I was hoping to get help with understanding how to do this with my themes properly.

The comments below are because the character limit on post has been reached... wish there was a way to post a scrollable code block.

Thanks so much in advance!

[ajowens001]

gtk-4.0 / gtk-dark.css

--------------------------------------------------------- /*************** * Base States * ***************/ .background { background-color: #212121; color: white; } dnd { color: white; } .normal-icons { -gtk-icon-size: 16px; } .large-icons { -gtk-icon-size: 32px; } .lowres-icon:not(.large-icons) { -gtk-icon-size: 16px; } .symbolic-circular { background-color: rgba(255, 255, 255, 0.04); border-radius: 9999px; padding: 0; min-height: 32px; min-width: 32px; } spinner:disabled, arrow:disabled, scrollbar:disabled, check:disabled, radio:disabled, treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } iconview, .view { background-color: #2C2C2C; color: white; } iconview:disabled, .view:disabled { color: rgba(255, 255, 255, 0.5); } textview text { background-color: #2C2C2C; } textview border { background-color: #242424; color: rgba(255, 255, 255, 0.7); } iconview:hover, iconview:selected { border-radius: 5px; } rubberband, .content-view rubberband, .content-view columnview.view > rubberband, .content-view treeview.view > rubberband, .content-view .rubberband, columnview.view > rubberband, treeview.view > rubberband, gridview > rubberband, flowbox > rubberband { border: 1px solid #66BB6A; background-color: rgba(102, 187, 106, 0.3); } flowbox > flowboxchild { padding: 4px; border-radius: 10px; } flowbox > flowboxchild button.remove-button.osd { min-height: 22px; min-width: 22px; padding: 4px; } .content-view .tile:selected { background-color: transparent; } gridview > child { padding: 3px; } gridview > child:selected { outline-color: alpha(currentColor, 0.06); } gridview > child box { border-spacing: 8px; margin: 12px; } coverflow cover { color: white; background-color: #2C2C2C; border: 1px solid black; } label.separator { color: rgba(255, 255, 255, 0.7); } label:disabled { color: rgba(255, 255, 255, 0.5); } headerbar label:disabled, tab label:disabled, button label:disabled { color: inherit; } label.osd { border-radius: 10px; background-color: rgba(54, 54, 54, 0.9); color: white; } .dim-label, row.expander:not(:checked) image.expander-row-arrow, row label.subtitle { color: rgba(255, 255, 255, 0.7); } .accent { color: #66BB6A; } .success { color: #81C995; } .warning { color: #FDD633; } .error { color: #F28B82; } window.assistant .sidebar { padding: 4px 0; } window.assistant .sidebar label { min-height: 32px; padding: 0 12px; color: rgba(255, 255, 255, 0.5); font-weight: 500; } window.assistant .sidebar label.highlight { color: white; } toast, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: white; background-color: #2C2C2C; background-clip: padding-box; border-radius: 10px; border: none; } .osd { padding: 4px; margin: 4px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12); } .osd.circular { border-radius: 9999px; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } .large-title { font-weight: 300; font-size: 24pt; } .title-1 { font-weight: 800; font-size: 20pt; } .title-2 { font-weight: 800; font-size: 15pt; } .title-3 { font-weight: 700; font-size: 15pt; } .title-4 { font-weight: 700; font-size: 13pt; } .heading { font-weight: 700; font-size: 11pt; } .body { font-weight: 400; font-size: 11pt; } .caption { font-weight: 400; font-size: 9pt; } .caption-heading { font-weight: 700; font-size: 9pt; } /**************** * Text Entries * ****************/ spinbutton.vertical, spinbutton:not(.vertical), entry { min-height: 32px; padding: 0 8px; border-spacing: 4px; border-radius: 10px; caret-color: currentColor; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; outline: none; } spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px #66BB6A; color: white; outline: none; } spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active) { background-color: alpha(currentColor, 0.08); box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); color: white; outline: none; } spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical), entry:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5); outline: none; } spinbutton.flat.vertical, spinbutton.flat:not(.vertical), entry.flat { min-height: 0; padding: 2px; border-radius: 0; background-color: transparent; } spinbutton.vertical image, spinbutton:not(.vertical) image, entry image { color: rgba(255, 255, 255, 0.7); } spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active, entry image:hover, entry image:active { color: white; } spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled, entry image:disabled { color: rgba(255, 255, 255, 0.5); } spinbutton.vertical image.left, spinbutton:not(.vertical) image.left, entry image.left { margin-left: 0px; margin-right: 6px; } spinbutton.vertical image.right, spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; margin-right: 0px; } spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%); padding-left: 1px; background-size: 1px 12px; background-repeat: repeat-y; background-origin: content-box; background-position: left top; margin: 0 4px; margin: 4px 0; } spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%); padding-right: 1px; background-size: 1px 12px; background-repeat: repeat-y; background-origin: content-box; background-position: right top; margin: 0 4px; margin: 4px 0; } spinbutton.error.vertical, spinbutton.error:not(.vertical), entry.error { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(242, 139, 130, 0.08); color: #F28B82; outline: none; } spinbutton.error.vertical image, spinbutton.error:not(.vertical) image, entry.error image { color: #F28B82; } spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection, entry.error selection { color: rgba(0, 0, 0, 0.87); background-color: #F28B82; } spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within { background-color: rgba(242, 139, 130, 0.08); box-shadow: inset 0 0 0 2px #F28B82; color: #F28B82; outline: none; } spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical), entry.error:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(242, 139, 130, 0.04); color: rgba(255, 255, 255, 0.5); color: rgba(242, 139, 130, 0.35); outline: none; } spinbutton.success.vertical, spinbutton.success:not(.vertical), entry.success { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(129, 201, 149, 0.08); color: #81C995; outline: none; } spinbutton.success.vertical image, spinbutton.success:not(.vertical) image, entry.success image { color: #81C995; } spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection, entry.success selection { color: rgba(0, 0, 0, 0.87); background-color: #81C995; } spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical), entry.success:focus-within { background-color: rgba(129, 201, 149, 0.08); box-shadow: inset 0 0 0 2px #81C995; color: #81C995; outline: none; } spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical), entry.success:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(129, 201, 149, 0.04); color: rgba(255, 255, 255, 0.5); color: rgba(129, 201, 149, 0.35); outline: none; } spinbutton.warning.vertical, spinbutton.warning:not(.vertical), entry.warning { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(253, 214, 51, 0.08); color: #FDD633; outline: none; } spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image, entry.warning image { color: #FDD633; } spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection, entry.warning selection { color: rgba(0, 0, 0, 0.87); background-color: #FDD633; } spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { background-color: rgba(253, 214, 51, 0.08); box-shadow: inset 0 0 0 2px #FDD633; color: #FDD633; outline: none; } spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical), entry.warning:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(253, 214, 51, 0.04); color: rgba(255, 255, 255, 0.5); color: rgba(253, 214, 51, 0.35); outline: none; } spinbutton.vertical > progress, spinbutton:not(.vertical) > progress, spinbutton.vertical progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry > progress, entry progress > trough > progress { margin: 2px -8px; border-bottom: 2px solid #66BB6A; background-color: transparent; } treeview entry.flat, treeview entry { background-color: #2C2C2C; } treeview entry.flat, treeview entry.flat:focus-within, treeview entry, treeview entry:focus-within { border-image: none; box-shadow: none; } .entry-tag { margin: 2px; border-radius: 9999px; box-shadow: none; background-color: rgba(255, 255, 255, 0.12); color: white; } .entry-tag:hover { background-image: image(alpha(currentColor, 0.08)); } :dir(ltr) .entry-tag { margin-left: 4px; margin-right: 0; padding-left: 12px; padding-right: 8px; } :dir(rtl) .entry-tag { margin-left: 0; margin-right: 4px; padding-left: 8px; padding-right: 12px; } .entry-tag.button { box-shadow: none; background-color: transparent; } .entry-tag.button:not(:hover):not(:active) { color: rgba(255, 255, 255, 0.7); } editablelabel > stack > text { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; outline: none; } /*********** * Buttons * ***********/ @keyframes needs-attention { from { background-image: radial-gradient(farthest-side, #66BB6A 0%, rgba(102, 187, 106, 0) 0%); } to { background-image: radial-gradient(farthest-side, #66BB6A 95%, rgba(102, 187, 106, 0)); } } infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action) { color: white; } infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.5); } actionbar > revealer > box .linked > button:not(.suggested-action):not(.destructive-action), button { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 225ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; } actionbar > revealer > box .linked > button:focus:not(.suggested-action):not(.destructive-action), button:focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent; } actionbar > revealer > box .linked > button:hover:not(.suggested-action):not(.destructive-action), button:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } actionbar > revealer > box .linked > button:active:not(.suggested-action):not(.destructive-action), button:active { transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1), background-color 225ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); } actionbar > revealer > box .linked > button:disabled:not(.suggested-action):not(.destructive-action), button:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } actionbar > revealer > box .linked > button:checked:not(.suggested-action):not(.destructive-action), button:checked { box-shadow: none; background-color: #66BB6A; color: white; } actionbar > revealer > box .linked > button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover { box-shadow: inset 0 0 0 9999px transparent; } actionbar > revealer > box .linked > button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1); background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } button { min-height: 24px; min-width: 16px; padding: 4px 8px; border-radius: 10px; font-weight: 500; } button:drop(active) { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, columnview.view > header > button button.circular, treeview.view > header > button button.circular, row.activatable button.circular, check, radio, scrollbar button, notebook > header > tabs > arrow, spinbutton.vertical > button, spinbutton:not(.vertical) > button, modelbutton.flat, tabbar tab button.image-button, dnd tab button.image-button, splitbutton.flat > button, splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, actionbar > revealer > box button:not(.suggested-action):not(.destructive-action), popover.background.menu button, popover.background button.model, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button, toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child), combobox > .linked:not(.vertical) > button:not(:only-child), button.flat { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; background-color: transparent; color: rgba(255, 255, 255, 0.7); } placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, columnview.view > header > button button.circular:focus, treeview.view > header > button button.circular:focus, row.activatable button.circular:focus, check:focus, radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, modelbutton.flat:focus, tabbar tab button.image-button:focus, dnd tab button.image-button:focus, splitbutton.flat > button:focus, splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action), popover.background.menu button:focus, popover.background button.model:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus, toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child), combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); color: white; } placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, columnview.view > header > button button.circular:hover, treeview.view > header > button button.circular:hover, row.activatable button.circular:hover, check:hover, radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, modelbutton.flat:hover, tabbar tab button.image-button:hover, dnd tab button.image-button:hover, splitbutton.flat > button:hover, splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action), popover.background.menu button:hover, popover.background button.model:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover, toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child), combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); color: white; } placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, columnview.view > header > button button.circular:active, treeview.view > header > button button.circular:active, row.activatable button.circular:active, check:active, radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, modelbutton.flat:active, tabbar tab button.image-button:active, dnd tab button.image-button:active, splitbutton.flat > button:active, splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action), popover.background.menu button:active, popover.background button.model:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active, toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child), combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); color: white; } placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, columnview.view > header > button button.circular:disabled, treeview.view > header > button button.circular:disabled, row.activatable button.circular:disabled, check:disabled, radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, modelbutton.flat:disabled, tabbar tab button.image-button:disabled, dnd tab button.image-button:disabled, splitbutton.flat > button:disabled, splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action), popover.background.menu button:disabled, popover.background button.model:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled, toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child), combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } tabbar tab button.image-button:checked, dnd tab button.image-button:checked, splitbutton.flat > button:checked, splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action), popover.background.menu button:checked, popover.background button.model:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked, toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child), combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover { background-color: alpha(currentColor, 0.1); color: white; } tabbar tab button.image-button:checked:disabled, dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled, splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action), popover.background.menu button:checked:disabled, popover.background button.model:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled, toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child), combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled { background-color: alpha(currentColor, 0.1); color: rgba(255, 255, 255, 0.5); } button.text-button { min-width: 32px; padding-left: 16px; padding-right: 16px; } button.text-button.flat { min-width: 48px; padding-left: 8px; padding-right: 8px; } button.image-button { min-width: 24px; padding: 4px; } button.text-button.image-button { min-width: 24px; padding: 4px; border-radius: 10px; } button.text-button.image-button label:first-child { margin-left: 12px; } button.text-button.image-button label:last-child { margin-right: 12px; } button.text-button.image-button.flat label:first-child { margin-left: 8px; } button.text-button.image-button.flat label:last-child { margin-right: 8px; } button.text-button.image-button image:not(:only-child) { margin: 0 4px; } .linked:not(.vertical) > button.flat:not(:only-child), .linked.vertical > button.flat:not(:only-child) { border-radius: 10px; } .linked:not(.vertical) > button.flat:focus, .linked.vertical > button.flat:focus { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } button.osd { box-shadow: none; padding: 8px 12px; background-color: #2C2C2C; border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; } button.osd:hover { background-color: #414141; } button.osd:active { background-color: #565656; } button.osd.image-button { padding: 8px; } button.osd:disabled { opacity: 0; } button.suggested-action { background-color: #66BB6A; color: white; box-shadow: none; } button.suggested-action:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } button.suggested-action:hover { box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(102, 187, 106, 0.2), 0 4px 3px 0 rgba(102, 187, 106, 0.14), 0 1px 6px 0 rgba(102, 187, 106, 0.12); } button.suggested-action:checked { background-color: #94cf97; } button.suggested-action:checked:hover { box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(102, 187, 106, 0.3), 0 2px 3px -1px rgba(102, 187, 106, 0.24), 0 2px 5px 0 rgba(102, 187, 106, 0.12); } button.suggested-action:focus { box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.35); } button.suggested-action.flat { background-color: transparent; color: #66BB6A; } button.suggested-action.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } button.suggested-action.flat:checked { background-color: rgba(102, 187, 106, 0.3); } button.destructive-action { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); box-shadow: none; } button.destructive-action:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } button.destructive-action:hover { box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(242, 139, 130, 0.2), 0 4px 3px 0 rgba(242, 139, 130, 0.14), 0 1px 6px 0 rgba(242, 139, 130, 0.12); } button.destructive-action:checked { background-color: rgba(182, 105, 98, 0.961); } button.destructive-action:checked:hover { box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(242, 139, 130, 0.3), 0 2px 3px -1px rgba(242, 139, 130, 0.24), 0 2px 5px 0 rgba(242, 139, 130, 0.12); } button.destructive-action:focus { box-shadow: 0 0 0 2px rgba(242, 139, 130, 0.35); } button.destructive-action.flat { background-color: transparent; color: #F28B82; } button.destructive-action.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } button.destructive-action.flat:checked { background-color: rgba(242, 139, 130, 0.3); } stackswitcher > button > label { margin: 0 -6px; padding: 0 6px; } stackswitcher > button > image { margin: -3px -6px; padding: 3px 6px; } stackswitcher > button.needs-attention:checked > label, stackswitcher > button.needs-attention:checked > image { animation: none; background-image: none; } button.font > box, button.file > box { border-spacing: 4px; } button.font > box > box > label, button.file > box > box > label { font-weight: bold; } menubutton.circular > button, windowcontrols button, filechooser #pathbarbox > stack > box > button, check, radio, button.image-button, button.close, button.circular { border-radius: 9999px; } menubutton.circular > button label, windowcontrols button label, filechooser #pathbarbox > stack > box > button label, check label, radio label, button.image-button label, button.close label, button.circular label { padding: 0; } placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button { min-height: 22px; min-width: 22px; padding: 0; border-radius: 9999px; } stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs-attention 225ms cubic-bezier(0, 0, 0.2, 1) forwards; background-repeat: no-repeat; background-position: right 3px; background-size: 6px 6px; } stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl) { background-position: left 3px; } .linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button { border-radius: 0; } .linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child { border-radius: 10px; } .linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button { border-radius: 0; } .linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child { border-radius: 10px; } /* menu buttons */ modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } button.color { min-height: 22px; min-width: 22px; padding: 4px; } list > row button.image-button:not(.flat) { background-color: transparent; box-shadow: none; border: none; } list > row button.image-button:not(.flat):hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } list > row button.image-button:not(.flat):active, list > row button.image-button:not(.flat):checked { transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1), background-color 225ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); } list > row button.image-button:not(.flat).suggested-action { background-color: #66BB6A; color: white; } list > row button.image-button:not(.flat).destructive-action { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } /********* * Links * *********/ link { color: #66BB6A; } link:visited { color: #CE93D8; } button.link:link, button.link:link:focus, button.link:link:hover, button.link:link:active { color: #66BB6A; } button.link:visited, button.link:visited:focus, button.link:visited:hover, button.link:visited:active { color: #CE93D8; } button.link > label { text-decoration-line: underline; } /***************** * GtkSpinButton * *****************/ spinbutton:not(.vertical) { padding: 0; border-spacing: 0; } spinbutton:not(.vertical) > text { min-width: 24px; margin: 0; padding-left: 8px; border-image: none; border-radius: 0; box-shadow: none; background-color: transparent; } spinbutton:not(.vertical) > button { border: solid 4px transparent; } spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) { box-shadow: inset 0 0 0 9999px transparent; color: rgba(255, 255, 255, 0.7); } spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) { margin-left: -2px; } spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > button.down:dir(ltr) { margin-right: -2px; } spinbutton.vertical { padding: 0; } spinbutton.vertical:disabled { color: rgba(255, 255, 255, 0.5); } spinbutton.vertical > text { margin: 0; border-image: none; border-radius: 0; box-shadow: none; background-color: transparent; min-height: 32px; min-width: 36px; padding: 0; } spinbutton.vertical > button { padding: 0; border: solid 4px transparent; } spinbutton.vertical > button:focus:not(:hover):not(:active) { box-shadow: inset 0 0 0 9999px transparent; color: rgba(255, 255, 255, 0.7); } spinbutton.vertical > button.up { margin: 0 2px; } spinbutton.vertical > button.down { margin: 0 2px; } list > row spinbutton:not(.vertical) > button { margin: 4px; } list > row spinbutton:not(.vertical) > button.up:dir(ltr), list > row spinbutton:not(.vertical) > button.down:dir(rtl) { margin-left: 2px; } list > row spinbutton:not(.vertical) > button.up:dir(rtl), list > row spinbutton:not(.vertical) > button.down:dir(ltr) { margin-right: 2px; } /************** * ComboBoxes * **************/ dropdown > popover.menu.background > contents { padding: 0; } dropdown > button > box { border-spacing: 4px; } dropdown arrow, combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } dropdown > popover.menu, combobox > popover.menu { margin-top: 2px; } dropdown > popover.menu > contents, combobox > popover.menu > contents { padding: 4px; } dropdown > popover.menu > contents modelbutton, combobox > popover.menu > contents modelbutton { padding-left: 6px; padding-right: 6px; } dropdown button.combo cellview:dir(ltr), combobox button.combo cellview:dir(ltr) { margin-left: 0px; } dropdown button.combo cellview:dir(rtl), combobox button.combo cellview:dir(rtl) { margin-right: 0px; } dropdown.linked button:nth-child(2):dir(ltr), combobox.linked button:nth-child(2):dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; } dropdown.linked button:nth-child(2):dir(rtl), combobox.linked button:nth-child(2):dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; } dropdown > .linked:not(.vertical) > entry:not(:only-child), combobox > .linked:not(.vertical) > entry:not(:only-child) { border-radius: 10px; } dropdown > .linked:not(.vertical) > entry:not(:only-child):first-child, combobox > .linked:not(.vertical) > entry:not(:only-child):first-child { margin-right: -32px; padding-right: 32px; } dropdown > .linked:not(.vertical) > entry:not(:only-child):last-child, combobox > .linked:not(.vertical) > entry:not(:only-child):last-child { margin-left: -32px; padding-left: 32px; } dropdown > .linked:not(.vertical) > button:not(:only-child), combobox > .linked:not(.vertical) > button:not(:only-child) { min-height: 16px; min-width: 16px; margin: 5px; padding: 3px; border-radius: 10px; } .linked:not(.vertical) > combobox:not(:first-child) > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; } .linked:not(.vertical) > combobox:not(:last-child) > box > button.combo { border-top-right-radius: 0; border-bottom-right-radius: 0; } .linked.vertical > combobox:not(:first-child) > box > button.combo { border-top-left-radius: 0; border-top-right-radius: 0; } .linked.vertical > combobox:not(:last-child) > box > button.combo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } button.combo:only-child { border-radius: 10px; font-weight: normal; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; outline: none; } button.combo:only-child:focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); color: white; } button.combo:only-child:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); color: white; } button.combo:only-child:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); color: white; } button.combo:only-child:checked { background-color: alpha(currentColor, 0.1); color: white; } button.combo:only-child:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } .app-notification, .toolbar.osd, toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 4px; border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .app-notification:backdrop, .toolbar.osd:backdrop, toolbar.osd:backdrop { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } /************ * Toolbars * ************/ .toolbar, toolbar { padding: 2px 4px; background-color: #212121; border-spacing: 4px; } .osd .toolbar, .osd toolbar { background-color: transparent; } .toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } .toolbar.osd.bottom, toolbar.osd.bottom { box-shadow: none; background-color: transparent; background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4)); } .toolbar.horizontal > separator, toolbar.horizontal > separator { margin: 2px; } .toolbar.vertical > separator, toolbar.vertical > separator { margin: 2px; } .toolbar:not(.inline-toolbar):not(.osd) scale, .toolbar:not(.inline-toolbar):not(.osd) entry, .toolbar:not(.inline-toolbar):not(.osd) spinbutton, .toolbar:not(.inline-toolbar):not(.osd) button, toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin: 2px; } .toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child), .toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child), .toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child), toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child), toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child), toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child) { margin-left: 0; } .toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child), .toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child), .toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child), toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child), toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child), toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child) { margin-right: 0; } .toolbar:not(.inline-toolbar):not(.osd) spinbutton entry, .toolbar:not(.inline-toolbar):not(.osd) spinbutton button, toolbar:not(.inline-toolbar):not(.osd) spinbutton entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton button { margin: 0; } .toolbar:not(.inline-toolbar):not(.osd) switch, toolbar:not(.inline-toolbar):not(.osd) switch { margin: 6px 2px; } .toolbar button { margin: 1px; border-radius: 5px; } searchbar > revealer > box { padding: 4px; border-spacing: 4px; border-style: solid; border-width: 0 0 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #212121; background-clip: border-box; box-shadow: none; } searchbar > revealer > box entry { margin: 0; } /*************** * Header bars * ***************/ headerbar button:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } headerbar .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { border-radius: 9999px; } headerbar button:focus:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action) { color: white; } headerbar button:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) { background-color: transparent; color: rgba(255, 255, 255, 0.5); } headerbar button:backdrop:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.5); } headerbar button:backdrop:focus:not(.suggested-action):not(.destructive-action), headerbar button:backdrop:hover:not(.suggested-action):not(.destructive-action), headerbar button:backdrop:active:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } headerbar button:backdrop:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } headerbar button:backdrop:checked:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } headerbar entry { background-color: rgba(255, 255, 255, 0.04); color: white; } headerbar entry:disabled { background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } headerbar entry image { color: rgba(255, 255, 255, 0.7); } headerbar entry image:hover, headerbar entry image:active { color: white; } headerbar entry image:disabled { color: rgba(255, 255, 255, 0.5); } headerbar { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #2C2C2C; color: white; min-height: 40px; padding: 0; border-radius: 14px 14px 0 0; } headerbar:disabled { color: rgba(255, 255, 255, 0.5); } headerbar:backdrop { background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } headerbar:backdrop:disabled { color: rgba(255, 255, 255, 0.3); } headerbar .title { padding: 0 8px; font-weight: bold; } headerbar .subtitle { padding: 0 8px; font-size: smaller; } headerbar .subtitle, headerbar .dim-label, headerbar row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar image.expander-row-arrow, headerbar row label.subtitle, row headerbar label.subtitle { transition: color 75ms cubic-bezier(0, 0, 0.2, 1); color: rgba(255, 255, 255, 0.7); } headerbar .subtitle:backdrop, headerbar .dim-label:backdrop, headerbar row.expander:not(:checked) image.expander-row-arrow:backdrop, row.expander:not(:checked) headerbar image.expander-row-arrow:backdrop { color: rgba(255, 255, 255, 0.5); } headerbar headerbar { background-color: transparent; box-shadow: none; } headerbar headerbar + separator { background-color: rgba(255, 255, 255, 0.12); } headerbar .linked:not(.vertical) > entry:not(:only-child) { border-radius: 10px; } headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled { background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } headerbar button.toggle { border-radius: 9999px; } headerbar stackswitcher { margin: 4px 0; border-radius: 9999px; } headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button { border-radius: 9999px; } box.vertical headerbar { background-color: #2C2C2C; } headerbar > windowhandle > box { padding: 0 4px; } headerbar > windowhandle > box, headerbar > windowhandle > box > box.start, headerbar > windowhandle > box > box.end { border-spacing: 4px; } headerbar entry, headerbar spinbutton, headerbar button, headerbar stackswitcher { margin-top: 4px; margin-bottom: 4px; } headerbar menubutton.popup { margin-top: 0; margin-bottom: 0; } headerbar separator:not(.sidebar) { margin-top: 10px; margin-bottom: 10px; background-color: rgba(255, 255, 255, 0.12); } headerbar switch { margin-top: 8px; margin-bottom: 8px; } headerbar spinbutton button { margin-top: 0; margin-bottom: 0; } headerbar.selection-mode { transition: background-color 0.1ms 225ms, color 75ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); background-color: #66BB6A; color: white; } headerbar.selection-mode:backdrop { color: rgba(255, 255, 255, 0.7); } headerbar.selection-mode .subtitle:link { color: white; } headerbar.selection-mode .selection-menu { padding-left: 16px; padding-right: 16px; } headerbar.selection-mode .selection-menu .arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } headerbar .selection-mode { box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); background-color: #66BB6A; } .tiled headerbar, .tiled-top headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .tiled-left headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; } headerbar.default-decoration { min-height: 22px; padding: 4px; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } headerbar.default-decoration windowcontrols button, headerbar.default-decoration windowcontrols menubutton { min-height: 22px; min-width: 22px; margin: 0; padding: 0; } .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { border-radius: 0; box-shadow: none; } window.devel headerbar.titlebar { background: #2C2C2C cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(102, 187, 106, 0.1)), linear-gradient(to top, #343434 3px, #393939); } window.devel headerbar.titlebar:backdrop { background: #2C2C2C cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#2C2C2C); /* background-color would flash */ } /************ * Pathbars * ************/ pathbar > button { padding-left: 4px; padding-right: 4px; border-radius: 10px; border-spacing: 2px; } pathbar > button label, pathbar > button image { margin-left: 2px; margin-right: 2px; } pathbar > button label:not(:only-child):first-child { margin-left: 0; } pathbar > button label:not(:only-child):last-child { margin-right: 0; } pathbar > button.text-button { min-width: 0; } pathbar > button.slider-button { padding-left: 4px; padding-right: 4px; } /************** * Tree Views * **************/ columnview.view, treeview.view { border-left-color: #404040; border-top-color: #404040; } columnview.view:selected, treeview.view:selected { background-color: #2C2C2C; background-image: image(alpha(currentColor, 0.1)); box-shadow: none; } columnview.view:hover, columnview.view:selected, treeview.view:hover, treeview.view:selected { border-radius: 0; box-shadow: none; } columnview.view.separator, treeview.view.separator { min-height: 5px; color: rgba(255, 255, 255, 0.12); } columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } columnview.view:drop(active).after, treeview.view:drop(active).after { border-top-style: none; } columnview.view:drop(active).before, treeview.view:drop(active).before { border-bottom-style: none; } columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: alpha(currentColor, 0.06); } columnview.view > dndtarget:drop(active).after, treeview.view > dndtarget:drop(active).after { border-top-style: none; } columnview.view > dndtarget:drop(active).before, treeview.view > dndtarget:drop(active).before { border-bottom-style: none; } columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; color: rgba(255, 255, 255, 0.7); -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view.expander:hover, treeview.view.expander:hover { color: white; } columnview.view.expander:selected, treeview.view.expander:selected { color: #66BB6A; } columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: rgba(102, 187, 106, 0.65); } columnview.view.expander:disabled, treeview.view.expander:disabled { color: rgba(255, 255, 255, 0.3); } columnview.view.progressbar, treeview.view.progressbar { border-bottom: 6px solid #66BB6A; box-shadow: none; background-color: transparent; background-image: none; } columnview.view.progressbar:selected:hover, treeview.view.progressbar:selected:hover { box-shadow: none; } columnview.view.trough, treeview.view.trough { border-bottom: 6px solid rgba(255, 255, 255, 0.12); box-shadow: none; background-color: transparent; background-image: none; } columnview.view.trough:selected:hover, treeview.view.trough:selected:hover { box-shadow: none; } columnview.view > header > button, treeview.view > header > button { padding: 2px 6px; border-style: none solid solid none; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); border-radius: 0; background-clip: border-box; } columnview.view > header > button:not(:focus):not(:hover):not(:active), treeview.view > header > button:not(:focus):not(:hover):not(:active) { color: rgba(255, 255, 255, 0.7); } columnview.view > header > button, columnview.view > header > button:disabled, treeview.view > header > button, treeview.view > header > button:disabled { background-color: #2C2C2C; } columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } columnview.view > header > button sort-indicator, treeview.view > header > button sort-indicator { min-height: 16px; min-width: 16px; } columnview.view > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } columnview.view > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view button.dnd, columnview.view header.button.dnd, treeview.view button.dnd, treeview.view header.button.dnd { padding: 2px 6px; border-style: none solid solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); border-radius: 0; box-shadow: none; background-color: #2C2C2C; background-clip: border-box; color: #66BB6A; } columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #66BB6A; } /********* * Menus * *********/ menubar { padding: 0; background-color: #2C2C2C; color: white; } menubar:backdrop { background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } .csd menubar { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } menubar > item { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-height: 20px; padding: 4px 8px; color: rgba(255, 255, 255, 0.7); } menubar > item:selected { transition: none; background-color: alpha(currentColor, 0.1); color: white; } menubar > item:disabled { color: rgba(255, 255, 255, 0.3); } menubar > item label:disabled { color: inherit; } menubar > item popover.menu popover.menu { margin-left: 6px; } menubar > item popover.menu.background popover.menu.background > contents { margin: 0; } /********************** * Popover Base Menus * **********************/ popover.menu box.inline-buttons { padding: 0 4px; } popover.menu box.inline-buttons button.image-button.model { min-height: 24px; min-width: 24px; padding: 0; border: none; outline: none; transition: none; } popover.menu box.inline-buttons button.image-button.model:selected { background: image(alpha(currentColor, 0.06)); } popover.menu box.circular-buttons { padding: 4px; } popover.menu box.circular-buttons button.circular.image-button.model { padding: 4px; } popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: alpha(currentColor, 0.06); } popover.menu > arrow, popover.menu.background > contents { padding: 4px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12); background-color: #3C3C3C; background-clip: border-box; border: none; border-radius: 9px; } popover.menu.background separator { margin: 4px 0; } popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 0; } popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 0; margin-right: 0; } popover.menu modelbutton { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); min-height: 20px; min-width: 48px; padding: 2px 6px; border-radius: 5px; color: white; font: initial; text-shadow: none; box-shadow: none; background: none; } popover.menu modelbutton:hover { transition: none; background-color: alpha(currentColor, 0.08); } popover.menu modelbutton:disabled { color: rgba(255, 255, 255, 0.5); } popover.menu label.title { font-weight: bold; padding: 4px 24px; } /************ * Popovers * ************/ popover.background { font: initial; } popover.background, popover.background:backdrop { background-color: transparent; } popover.background > arrow, popover.background > contents { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 4px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12); background-color: #3C3C3C; border: none; border-radius: 9px; color: white; } popover.background:backdrop > arrow, popover.background:backdrop > contents { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } popover.background > contents > list, popover.background > contents > .view, popover.background > contents > toolbar { border-style: none; box-shadow: none; background-color: transparent; } popover.background > contents > scrolledwindow > viewport > stack > box { padding: 0; } popover.background > contents separator { background-color: rgba(255, 255, 255, 0.12); margin: 2px 0; } popover.background > contents list separator { margin: 0; } popover.background .view:not(:selected), popover.background toolbar { background-color: #3C3C3C; } popover.background .linked > button:not(.radio) { background: none; box-shadow: none; border-radius: 5px; } popover.background .linked > button:not(.radio):first-child { border-radius: 5px; } popover.background .linked > button:not(.radio):last-child { border-radius: 5px; } popover.background .linked > button:not(.radio):only-child { border-radius: 5px; } popover.background.menu button, popover.background button.model { min-height: 32px; padding: 0 8px; border-radius: 5px; } .osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } popover.background listview { padding: 0; } popover.background listview > row { padding: 4px 8px; border-radius: 5px; margin: 0; } magnifier { background-color: #2C2C2C; } /************* * Notebooks * *************/ notebook > header tab { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-height: 22px; min-width: 22px; padding: 4px 8px; border-width: 1px; border-color: transparent; border-style: solid; outline: none; background-clip: padding-box; box-shadow: none; color: rgba(255, 255, 255, 0.7); font-weight: 500; } notebook > header tab:hover { background-color: #404040; color: white; } notebook > header tab:disabled { color: rgba(255, 255, 255, 0.3); } notebook > header tab:checked { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); background-color: #2C2C2C; background-clip: padding-box; border-color: #404040; color: white; box-shadow: none; } notebook > header tab:checked:disabled { color: rgba(255, 255, 255, 0.5); } notebook > header tab:checked.reorderable-page { background-color: #2C2C2C; } frame > paned > notebook > header, notebook.frame > header { background-color: #242424; } notebook, notebook.frame { background-color: #2C2C2C; border-radius: 10px; } notebook.frame frame > border { border: none; border-radius: 10px; } notebook.frame frame > list row.activatable { border-radius: 10px; } notebook:focus tab:checked { box-shadow: none; } notebook > header { border-width: 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #212121; background-clip: border-box; } notebook > header.top { border-bottom-style: solid; border-radius: 10px 10px 0 0; } notebook > header.top > tabs { margin-bottom: -1px; margin-top: 4px; } notebook > header.top > tabs > tab { border-radius: 10px 10px 0 0; border-bottom: none; } notebook > header.bottom { border-top-style: solid; border-radius: 0 0 10px 10px; } notebook > header.bottom > tabs { margin-top: -1px; margin-bottom: 4px; } notebook > header.bottom > tabs > tab { border-radius: 0 0 10px 10px; border-top: none; } notebook > header.left { border-right-style: solid; border-radius: 10px 0 0 10px; } notebook > header.left > tabs { margin-left: 4px; margin-right: -1px; } notebook > header.left > tabs > tab { border-radius: 10px 0 0 10px; border-right: none; } notebook > header.right { border-left-style: solid; border-radius: 0 10px 10px 0; } notebook > header.right > tabs { margin-left: -1px; margin-right: 4px; } notebook > header.right > tabs > tab { border-radius: 0 10px 10px 0; border-left: none; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { margin-left: -8px; -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { margin-right: -8px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { margin-top: -8px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { margin-bottom: -8px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; } notebook > header tab > box { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); margin: -4px -12px; padding: 4px 12px; } notebook > header tab > box:drop(active) { background-color: rgba(255, 255, 255, 0.12); color: white; } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -8px; } notebook > header tab button.flat:first-child { margin-left: -8px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 8px; padding-right: 8px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: 0; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: 0; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 8px; padding-bottom: 8px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: 0; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: 0; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid; } notebook > stack:not(:only-child) { background-color: transparent; border-radius: 10px; } /************** * Scrollbars * **************/ scrollbar { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); background-color: #2C2C2C; } scrollbar.top { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.left { border-right: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.right { border-left: 1px solid rgba(255, 255, 255, 0.12); } scrollbar > range > trough { box-shadow: none; outline: none; background: none; } scrollbar > range > trough > slider { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 8px; min-height: 8px; border: 4px solid transparent; border-radius: 9999px; background-clip: padding-box; background-color: rgba(255, 255, 255, 0.5); box-shadow: none; outline: none; } scrollbar > range > trough > slider:hover { background-color: rgba(255, 255, 255, 0.7); } scrollbar > range > trough > slider:active { background-color: white; } scrollbar > range > trough > slider:disabled { background-color: rgba(255, 255, 255, 0.3); } scrollbar > range.fine-tune > trough > slider { min-width: 4px; min-height: 4px; } scrollbar > range.fine-tune.horizontal > trough > slider { margin: 2px 0; } scrollbar > range.fine-tune.vertical > trough > slider { margin: 0 2px; } scrollbar.overlay-indicator:not(.fine-tune) > range > trough > slider { transition-property: background-color, min-height, min-width; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; background-color: transparent; box-shadow: none; outline: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) > range > trough > slider { min-width: 4px; min-height: 4px; margin: 3px; border: 1px solid rgba(44, 44, 44, 0.3); box-shadow: none; outline: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 4px; min-height: 4px; margin: 3px; border: 1px solid rgba(44, 44, 44, 0.3); border-radius: 9999px; background-color: rgba(255, 255, 255, 0.5); background-clip: padding-box; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled { background-color: rgba(255, 255, 255, 0.3); } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal > range > trough > slider { min-width: 24px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { min-width: 8px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical > range > trough > slider { min-height: 24px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { min-height: 8px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { background-color: rgba(60, 60, 60, 0.9); } scrollbar.horizontal > range > trough > slider { min-width: 24px; } scrollbar.vertical > range > trough > slider { min-height: 24px; } scrollbar button { min-width: 16px; min-height: 16px; padding: 0; border-radius: 0; } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } /********** * Switch * **********/ switch { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); margin: 4px 0; padding: 0 2px; border: 5px solid transparent; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.3); background-clip: padding-box; font-size: 0; color: transparent; } switch:checked { background-color: rgba(102, 187, 106, 0.5); } switch:disabled { opacity: 0.5; } switch image { margin: -8px; } switch > slider { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 20px; min-height: 20px; margin: -3px -2px; border-radius: 9999px; outline: none; box-shadow: 0 0 0 10px transparent, 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); background-color: #3C3C3C; } switch:focus > slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:hover > slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:focus:hover > slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.16), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:checked > slider { background-color: #66BB6A; color: #66BB6A; } /************************* * Check and Radio items * *************************/ .view.content-view.check:not(list), .content-view .tile check:not(list) { min-height: 40px; min-width: 40px; margin: 0; padding: 0; box-shadow: none; background-color: transparent; background-image: none; -gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); } .view.content-view.check:not(list):hover, .view.content-view.check:not(list):active, .content-view .tile check:not(list):hover, .content-view .tile check:not(list):active { -gtk-icon-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 3px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12); } .view.content-view.check:not(list), .content-view .tile check:not(list) { -gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked-dark.png"), url("assets/selectionmode-checkbox-unchecked-dark@2.png")); } .view.content-view.check:not(list):checked, .content-view .tile check:not(list):checked { -gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked-dark.png"), url("assets/selectionmode-checkbox-checked-dark@2.png")); } checkbutton, radiobutton { outline: none; border-spacing: 4px; } checkbutton.text-button, radiobutton.text-button { padding: 2px; } checkbutton.text-button label:not(:only-child), radiobutton.text-button label:not(:only-child) { margin: 0 4px; } check, radio { min-height: 20px; min-width: 20px; margin: -6px; padding: 6px; } check:checked, check:indeterminate, radio:checked, radio:indeterminate { color: #81C995; } check:checked:disabled, check:indeterminate:disabled, radio:checked:disabled, radio:indeterminate:disabled { color: rgba(255, 255, 255, 0.3); } check:not(:hover):focus, radio:not(:hover):focus { box-shadow: inset 0 0 0 9999px transparent; } popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled { transition: none; box-shadow: none; background-image: none; } popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) { color: rgba(255, 255, 255, 0.7); } popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) { margin-left: -12px; margin-right: -4px; } popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) { margin-left: -4px; margin-right: -12px; } popover.menu check, popover.menu radio { transition: none; margin: 0; padding: 0; } popover.menu check:dir(ltr), popover.menu radio:dir(ltr) { margin-right: 8px; } popover.menu check:dir(rtl), popover.menu radio:dir(rtl) { margin-left: 8px; } popover.menu check:not(:checked):not(:indeterminate):not(:disabled), popover.menu radio:not(:checked):not(:indeterminate):not(:disabled) { color: rgba(255, 255, 255, 0.7); } popover.menu check, popover.menu check:hover, popover.menu check:disabled, popover.menu radio, popover.menu radio:hover, popover.menu radio:disabled { box-shadow: none; } check { -gtk-icon-size: 24px; -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")); } check:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); } check:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); } radio { -gtk-icon-size: 24px; -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")); } radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); } radio:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); } popover.menu check { min-height: 16px; min-width: 16px; -gtk-icon-size: 16px; border-radius: 10px; -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")); } popover.menu check:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); } popover.menu check:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); } popover.menu radio { min-height: 16px; min-width: 16px; border-image: none; -gtk-icon-size: 16px; -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")); } popover.menu radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); } popover.menu radio:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); } treeview.view check, treeview.view radio, columnview.view check, columnview.view radio { padding: 0; box-shadow: none; background: none; color: rgba(255, 255, 255, 0.7); } treeview.view check:hover, treeview.view check:active, treeview.view radio:hover, treeview.view radio:active, columnview.view check:hover, columnview.view check:active, columnview.view radio:hover, columnview.view radio:active { color: white; } treeview.view check:disabled, treeview.view radio:disabled, columnview.view check:disabled, columnview.view radio:disabled { color: rgba(255, 255, 255, 0.3); } treeview.view check:checked, treeview.view check:indeterminate, treeview.view radio:checked, treeview.view radio:indeterminate, columnview.view check:checked, columnview.view check:indeterminate, columnview.view radio:checked, columnview.view radio:indeterminate { color: #81C995; } treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled, treeview.view radio:checked:disabled, treeview.view radio:indeterminate:disabled, columnview.view check:checked:disabled, columnview.view check:indeterminate:disabled, columnview.view radio:checked:disabled, columnview.view radio:indeterminate:disabled { color: rgba(255, 255, 255, 0.3); } treeview.view:hover check, treeview.view:hover radio, treeview.view:selected check, treeview.view:selected radio, treeview.view:focus check, treeview.view:focus radio, treeview.view:focus-within check, treeview.view:focus-within radio, columnview.view:hover check, columnview.view:hover radio, columnview.view:selected check, columnview.view:selected radio, columnview.view:focus check, columnview.view:focus radio, columnview.view:focus-within check, columnview.view:focus-within radio { box-shadow: none; background-color: transparent; } treeview.view radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); border-image: none; } /************ * GtkScale * ************/ scale { min-height: 2px; min-width: 2px; } scale.horizontal { padding: 15px 12px; } scale.vertical { padding: 12px 15px; } scale.fine-tune.horizontal { min-height: 4px; padding-top: 14px; padding-bottom: 14px; } scale.fine-tune.vertical { min-width: 4px; padding-left: 14px; padding-right: 14px; } scale.fine-tune > trough > slider { min-height: 32px; min-width: 32px; margin: -14px; } scale > trough { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); outline: none; background-color: rgba(255, 255, 255, 0.3); } scale > trough:disabled { background-color: rgba(255, 255, 255, 0.12); } scale > trough > highlight { transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1); background-image: image(#66BB6A); } scale > trough > highlight:disabled { background-color: #212121; background-image: image(rgba(255, 255, 255, 0.3)); } scale > trough > fill { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); background-color: rgba(255, 255, 255, 0.3); } scale > trough > fill:disabled { background-color: transparent; } scale > trough > slider { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); background-repeat: no-repeat; background-position: center; background-size: auto; min-height: 32px; min-width: 32px; margin: -15px; border-radius: 50%; color: #66BB6A; background-color: transparent; box-shadow: none; outline: none; border: none; } scale > trough > slider { background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")); } scale > trough > slider:disabled { background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")); } scale > trough > slider:focus { background-color: alpha(currentColor, 0.08); } scale > trough > slider:hover { background-color: alpha(currentColor, 0.08); } scale > trough > slider:focus:hover { background-color: alpha(currentColor, 0.16); } scale > trough > slider:active { background-color: alpha(currentColor, 0.12); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")); background-size: auto, 0% 0%; } scale > marks, scale > value { color: rgba(255, 255, 255, 0.7); } scale > marks indicator { background-color: rgba(255, 255, 255, 0.3); color: transparent; } scale.horizontal marks.top { margin-bottom: 7px; margin-top: -15px; } scale.horizontal.fine-tune marks.top { margin-bottom: 6px; margin-top: -14px; } scale.horizontal marks.bottom { margin-top: 7px; margin-bottom: -15px; } scale.horizontal.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -14px; } scale.vertical marks.top { margin-right: 7px; margin-left: -15px; } scale.vertical.fine-tune marks.top { margin-right: 6px; margin-left: -14px; } scale.vertical marks.bottom { margin-left: 7px; margin-right: -15px; } scale.vertical.fine-tune marks.bottom { margin-left: 6px; margin-right: -14px; } scale.horizontal > marks indicator { min-height: 8px; min-width: 1px; } scale.vertical > marks indicator { min-height: 1px; min-width: 8px; } scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider { transform: none; box-shadow: none; border: none; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { box-shadow: none; } scale.horizontal.marks-before:not(.marks-after) > trough > slider { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); } scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")); } scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); } scale.horizontal.marks-after:not(.marks-before) > trough > slider { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); } scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")); } scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); } scale.vertical.marks-before:not(.marks-after) > trough > slider { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); } scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")); } scale.vertical.marks-before:not(.marks-after) > trough > slider:active { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); } scale.vertical.marks-after:not(.marks-before) > trough > slider { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); } scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")); } scale.vertical.marks-after:not(.marks-before) > trough > slider:active { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); } scale.color { min-height: 0; min-width: 0; } scale.color.horizontal { padding: 0 0 12px 0; } scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) { margin-bottom: -24px; margin-top: 8px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.vertical:dir(ltr) > trough > slider { margin-left: -24px; margin-right: 8px; } scale.color.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.vertical:dir(rtl) > trough > slider { margin-right: -24px; margin-left: 8px; } /***************** * Progress bars * *****************/ progressbar { color: rgba(255, 255, 255, 0.7); font-size: smaller; } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar trough { border-radius: 10px; background-color: rgba(255, 255, 255, 0.12); } progressbar progress { border-radius: 10px; background-color: #66BB6A; } progressbar.osd { min-width: 6px; min-height: 6px; background-color: transparent; } progressbar.osd trough { background-color: transparent; } progressbar.osd progress { background-color: #66BB6A; } progressbar trough.empty progress { all: unset; } /************* * Level Bar * *************/ levelbar.horizontal block { min-height: 6px; } levelbar.horizontal.discrete block { min-width: 32px; } levelbar.horizontal.discrete block:not(:last-child) { margin-right: 2px; } levelbar.vertical block { min-width: 6px; } levelbar.vertical.discrete block { min-height: 32px; } levelbar.vertical.discrete block:not(:last-child) { margin-bottom: 2px; } levelbar trough { border-radius: 10px; } levelbar block.low { background-color: #FDD633; } levelbar block.high, levelbar block:not(.empty) { background-color: #66BB6A; } levelbar block.full { background-color: #81C995; } levelbar block.empty { background-color: rgba(255, 255, 255, 0.12); } /**************** * Print dialog * *****************/ window.dialog.print drawing { color: white; background: none; border: none; padding: 0; } window.dialog.print drawing paper { padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; color: white; } window.dialog.print .dialog-action-box { margin: 12px; } /********** * Frames * **********/ frame, .frame { border: 1px solid rgba(255, 255, 255, 0.12); } frame > list, .frame > list { border: none; } frame.view, .frame.view { border-radius: 10px; } frame.flat, .frame.flat { border-style: none; } frame { border-radius: 10px; } frame > label { margin: 4px; } frame.flat > border, statusbar frame > border { border: none; } actionbar > revealer > box { padding: 4px; border-spacing: 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; background-clip: border-box; box-shadow: none; } statusbar { padding: 4px 12px; } scrolledwindow viewport.frame { border: none; } stack scrolledwindow.frame viewport.frame list { border: none; } overshoot.top { background-size: 200% 70%; background-image: radial-gradient(farthest-side at top, rgba(255, 255, 255, 0.04) 99%, transparent 100%); background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } overshoot.bottom { background-size: 200% 70%; background-image: radial-gradient(farthest-side at bottom, rgba(255, 255, 255, 0.04) 99%, transparent 100%); background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } overshoot.left { background-size: 200% 70%; background-image: radial-gradient(farthest-side at left, rgba(255, 255, 255, 0.04) 99%, transparent 100%); background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } overshoot.right { background-size: 200% 70%; background-image: radial-gradient(farthest-side at right, rgba(255, 255, 255, 0.04) 99%, transparent 100%); background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } junction { border-style: solid none none solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #2C2C2C; } junction:dir(rtl) { border-style: solid solid none none; } separator { min-width: 1px; min-height: 1px; background-color: rgba(255, 255, 255, 0.12); } separator.spacer { background: none; } separator.spacer.horizontal { min-width: 8px; } separator.spacer.vertical { min-height: 8px; } stacksidebar + separator.vertical, stacksidebar separator.horizontal, button.font separator, button.file separator { min-width: 0; min-height: 0; background-color: transparent; } /********* * Lists * *********/ listview, list { border-color: rgba(255, 255, 255, 0.12); background-color: #2C2C2C; background-clip: padding-box; color: rgba(255, 255, 255, 0.7); } listview > row, list > row { padding: 2px; background-clip: padding-box; } listview > row.expander, list > row.expander { padding: 0px; } listview > row.expander .row-header, list > row.expander .row-header { padding: 2px; } listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), list.horizontal row.separator, list.separators.horizontal > row:not(.separator) { border-left: 1px solid rgba(255, 255, 255, 0.12); } listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } list.frame { border-radius: 10px; } row { background-clip: padding-box; } columnview.view > header > button, treeview.view > header > button, row.activatable { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; } columnview.view > header > button:focus, treeview.view > header > button:focus, row.activatable:focus { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } columnview.view > header > button:hover, treeview.view > header > button:hover, row.activatable:hover { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms; box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } columnview.view > header > button.has-open-popup, treeview.view > header > button.has-open-popup, columnview.view > header > button:active, treeview.view > header > button:active, row.activatable.has-open-popup, row.activatable:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); } row:selected { color: inherit; } row:selected image, row:selected label { color: white; } row:selected button image, row:selected button label { color: inherit; } row:selected:disabled image, row:selected:disabled label { color: rgba(255, 255, 255, 0.5); } treeexpander { border-spacing: 4px; } columnview > listview > row { padding: 0; } columnview > listview > row > cell { padding: 8px 6px; } columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } columnview > header > button { padding-left: 6px; padding-right: 6px; border-left: 1px solid transparent; } columnview > header > button:first-child { border-left-width: 0; } columnview.column-separators > listview > row > cell, columnview.column-separators > header > button { border-left-color: rgba(255, 255, 255, 0.12); } columnview > listview:not(.horizontal).separators > row:not(.separator) { border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } columnview ~ undershoot.top { box-shadow: inset 0 1px rgba(255, 255, 255, 0.12); } columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid alpha(currentColor, 0.06); } columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #66BB6A; } columnview row:not(:selected) cell editablelabel.editing text selection { color: white; background-color: #66BB6A; } .rich-list { /* rich lists usually containing other widgets than just labels/text */ } .rich-list > row { padding: 6px 8px; min-height: 32px; /* should be tall even when only containing a label */ } .rich-list > row > box { border-spacing: 8px; } /**************** * AdwActionRow * ****************/ row label.subtitle { font-size: smaller; } row > box.header { margin-left: 8px; margin-right: 8px; min-height: 40px; } row > box.header > .icon:disabled { filter: opacity(0.35); } row > box.header > box.title { margin-top: 4px; margin-bottom: 4px; border-spacing: 2px; } /*************** * AdwComboRow * ***************/ row.combo image.dropdown-arrow:disabled { filter: opacity(0.35); } row.combo listview.inline { background: none; border: none; box-shadow: none; color: inherit; } row.combo listview.inline, row.combo listview.inline:disabled { background: none; color: inherit; } row.combo popover > contents { min-width: 120px; } /****************** * AdwExpanderRow * ******************/ list.content > row, list.content > row.expander row.header, list.boxed-list > row, list.boxed-list > row.expander row.header, row.expander list.nested > row { transition: 200ms cubic-bezier(0, 0, 0.2, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); } .osd list.content > row:focus:focus-visible, .osd list.content > row.expander row.header:focus:focus-visible, list.content > row.expander .osd row.header:focus:focus-visible, .osd list.boxed-list > row:focus:focus-visible, .osd list.boxed-list > row.expander row.header:focus:focus-visible, list.boxed-list > row.expander .osd row.header:focus:focus-visible, .osd row.expander list.nested > row:focus:focus-visible, row.expander .osd list.nested > row:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.04); } row.expander { background: none; padding: 0px; } row.expander > box > list { background: none; color: inherit; } row.expander list.nested { background-color: #2C2C2C; color: inherit; } row.expander image.expander-row-arrow { transition: 200ms cubic-bezier(0, 0, 0.2, 1); } row.expander image.expander-row-arrow:dir(ltr) { margin-left: 6px; } row.expander image.expander-row-arrow:dir(rtl) { margin-right: 6px; } row.expander:checked image.expander-row-arrow { -gtk-icon-transform: rotate(0turn); } row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { -gtk-icon-transform: rotate(-0.25turn); } row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { -gtk-icon-transform: rotate(0.25turn); } row.expander:checked image.expander-row-arrow:not(:disabled) { color: #66BB6A; } .osd row.expander:checked image.expander-row-arrow:not(:disabled) { color: inherit; } row.expander image.expander-row-arrow:disabled { filter: opacity(0.35); } /***************** * Boxed Lists * *****************/ list.content > row.expander, list.boxed-list > row.expander { border: none; } list.content > row:first-child, list.content > row:first-child.expander row.header, list.boxed-list > row:first-child, list.boxed-list > row:first-child.expander row.header { border-top-left-radius: 9px; border-top-right-radius: 9px; } list.content > row:last-child, list.content > row:last-child.expander:not(:checked), list.content > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested > row:last-child, list.boxed-list > row:last-child, list.boxed-list > row:last-child.expander:not(:checked), list.boxed-list > row:last-child.expander:not(:checked) row.header, list.boxed-list > row:last-child.expander:checked list.nested, list.boxed-list > row:last-child.expander:checked list.nested > row:last-child { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; border-bottom-width: 0; } /********************* * App Notifications * *********************/ .app-notification { margin: 8px; border-spacing: 6px; padding: 6px; border: none; } .app-notification button.text-button:not(:disabled) { color: #66BB6A; } .app-notification.frame, .app-notification border { border-style: none; } /************* * Expanders * *************/ expander { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 16px; min-height: 16px; color: rgba(255, 255, 255, 0.7); -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander:hover, expander:active { color: white; } expander:disabled { color: rgba(255, 255, 255, 0.3); } expander-widget > box > title { border-radius: 10px; } expander-widget > box > title:hover > expander { color: rgba(255, 255, 255, 0.7); } .navigation-sidebar:not(decoration):not(window):drop(active):focus, .navigation-sidebar:not(decoration):not(window):drop(active), placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; } /************ * Calendar * ************/ calendar { padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: white; } calendar:disabled { color: rgba(255, 255, 255, 0.5); } calendar:selected { border-radius: 10px; } calendar > header { padding: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } calendar > header > button { min-height: 22px; } calendar > grid { margin: 2px; } calendar > grid > label { border-radius: 9999px; margin: 0; } calendar > grid > label.today:selected { box-shadow: none; } calendar > grid > label:focus { outline-style: none; } calendar > grid > label.day-number { padding: 6px; } calendar > grid > label.day-number.other-month { color: alpha(currentColor, 0.3); } /*********** * Dialogs * ***********/ window.dialog.message.background { background-color: #3C3C3C; } window.dialog.message box.dialog-vbox.vertical { border-spacing: 10px; } window.dialog.message .titlebar { min-height: 22px; border-style: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; color: white; } window.dialog.message .titlebar:backdrop { background-color: #3C3C3C; color: rgba(255, 255, 255, 0.7); } window.dialog.message.csd .dialog-action-area { padding: 4px; } window.dialog.message.csd .dialog-action-area > button, window.dialog.message.csd .dialog-action-area > button:first-child, window.dialog.message.csd .dialog-action-area > button:last-child { border-radius: 9999px; } window.dialog.message.csd .dialog-action-area > button:not(:last-child) { margin-right: 4px; } window.dialog.message.csd .dialog-action-area > button:not(:disabled) { color: #66BB6A; } window.dialog.message.csd .dialog-action-area > button.destructive-action:not(:disabled) { color: #F28B82; } filechooser .dialog-action-box { border-top: 1px solid rgba(255, 255, 255, 0.12); } filechooser #pathbarbox { border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #212121; } filechooser stack.view frame > border { border: none; } filechooserbutton > button > box { border-spacing: 4px; } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } window.aboutdialog stack scrolledwindow.frame, window.aboutdialog stack scrolledwindow.frame > .view, window.aboutdialog stack scrolledwindow.frame > .view > text { border-radius: 10px; } window.aboutdialog .large-icons { -gtk-icon-size: 128px; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; background-color: #242424; } .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { border-right: 1px solid rgba(255, 255, 255, 0.12); border-left-style: none; } .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid rgba(255, 255, 255, 0.12); border-right-style: none; } .sidebar listview.view, .sidebar list { background-color: transparent; } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } stacksidebar list { padding: 4px; background-color: #242424; } stacksidebar row { min-height: 22px; padding: 4px 6px; border-radius: 5px; } stacksidebar row:selected { font-weight: 500; } stacksidebar row + row { margin-top: 4px; } stacksidebar row > label { padding-left: 4px; padding-right: 4px; color: inherit; } separator.sidebar { background-color: rgba(255, 255, 255, 0.12); border-right: none; } separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: rgba(255, 255, 255, 0.15); } /********************** * Navigation Sidebar * **********************/ .navigation-sidebar { padding: 4px 0; border-right: none; } .navigation-sidebar > row { min-height: 22px; padding: 4px 6px; border-radius: 5px; margin: 0 4px; } .navigation-sidebar > row:hover, .navigation-sidebar > row:focus-visible:focus-within { background-color: alpha(currentColor, 0.08); } .navigation-sidebar > row:selected label, .navigation-sidebar > row:selected image { color: #66BB6A; } .navigation-sidebar > row:selected:hover { background-color: alpha(currentColor, 0.16); } .navigation-sidebar > row:selected:focus-visible:focus-within { outline: none; background-color: alpha(currentColor, 0.08); } .navigation-sidebar > row:selected:focus-visible:focus-within:hover { background-color: alpha(currentColor, 0.16); } .navigation-sidebar > row:disabled { color: rgba(255, 255, 255, 0.5); } .navigation-sidebar > separator { margin: 4px 0; } /**************** * File chooser * ****************/ row image.sidebar-icon { transition: color 75ms cubic-bezier(0, 0, 0.2, 1); color: rgba(255, 255, 255, 0.7); } row image.sidebar-icon:disabled { color: rgba(255, 255, 255, 0.3); } placessidebar > viewport.frame { border-style: none; } placessidebar .navigation-sidebar { padding: 4px 0; } placessidebar .navigation-sidebar > row { min-height: 32px; margin: 0 4px 0 0; padding: 2px; border-radius: 0 9999px 9999px 0; } placessidebar .navigation-sidebar > row > revealer { padding: 0 8px 0 16px; } placessidebar .navigation-sidebar > row:selected { background-color: alpha(currentColor, 0.1); color: #66BB6A; font-weight: 500; } placessidebar .navigation-sidebar > row:selected image.sidebar-icon { color: #66BB6A; } placessidebar .navigation-sidebar > row:disabled { color: rgba(255, 255, 255, 0.5); } placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { padding-right: 8px; } placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { padding-left: 8px; } placessidebar .navigation-sidebar > row label.sidebar-label { color: inherit; } placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { padding-right: 2px; } placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { padding-left: 2px; } placessidebar .navigation-sidebar > row.sidebar-placeholder-row { background-color: alpha(currentColor, 0.08); } placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { color: #66BB6A; } placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row image.sidebar-icon { color: #66BB6A; } placessidebar .navigation-sidebar > row:drop(active) { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms; box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } placesview .server-list-button > image { transition: 200ms cubic-bezier(0, 0, 0.2, 1); -gtk-icon-transform: rotate(0turn); } placesview .server-list-button:checked > image { transition: 200ms cubic-bezier(0, 0, 0.2, 1); -gtk-icon-transform: rotate(-0.5turn); } placesview > actionbar > revealer > box > label { border-spacing: 4px; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(rgba(255, 255, 255, 0.12)); background-size: 1px 1px; background-clip: content-box; box-shadow: none; } paned > separator.wide { min-width: 6px; min-height: 6px; background-color: #212121; background-image: image(rgba(255, 255, 255, 0.12)), image(rgba(255, 255, 255, 0.12)); background-size: 1px 1px, 1px 1px; } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************ * GtkVideo * ************/ video { background: black; border-radius: 10px; } video image.osd { min-width: 64px; min-height: 64px; border-radius: 9999px; border: none; } /************** * GtkInfoBar * **************/ infobar { border: none; margin-bottom: 0; } infobar > revealer > box { padding: 4px; border-spacing: 8px; } infobar.info > revealer > box, infobar.info:hover > revealer > box, infobar.info:backdrop > revealer > box { color: white; background-color: #2C2C2C; } infobar.info > revealer > box button, infobar.info > revealer > box button.text-button:not(:disabled), infobar.info:hover > revealer > box button, infobar.info:hover > revealer > box button.text-button:not(:disabled), infobar.info:backdrop > revealer > box button, infobar.info:backdrop > revealer > box button.text-button:not(:disabled) { color: #66BB6A; } infobar.action > revealer > box, infobar.action:backdrop > revealer > box, infobar.question > revealer > box, infobar.question:backdrop > revealer > box { background-color: #66BB6A; color: white; } infobar.action > revealer > box button, infobar.action > revealer > box button:hover, infobar.action > revealer > box button:focus, infobar.action > revealer > box button:active, infobar.action > revealer > box button:checked, infobar.action > revealer > box button.text-button:not(:disabled), infobar.action:backdrop > revealer > box button, infobar.action:backdrop > revealer > box button:hover, infobar.action:backdrop > revealer > box button:focus, infobar.action:backdrop > revealer > box button:active, infobar.action:backdrop > revealer > box button:checked, infobar.action:backdrop > revealer > box button.text-button:not(:disabled), infobar.question > revealer > box button, infobar.question > revealer > box button:hover, infobar.question > revealer > box button:focus, infobar.question > revealer > box button:active, infobar.question > revealer > box button:checked, infobar.question > revealer > box button.text-button:not(:disabled), infobar.question:backdrop > revealer > box button, infobar.question:backdrop > revealer > box button:hover, infobar.question:backdrop > revealer > box button:focus, infobar.question:backdrop > revealer > box button:active, infobar.question:backdrop > revealer > box button:checked, infobar.question:backdrop > revealer > box button.text-button:not(:disabled) { color: white; } infobar.action > revealer > box *:link, infobar.action:backdrop > revealer > box *:link, infobar.question > revealer > box *:link, infobar.question:backdrop > revealer > box *:link { color: white; } infobar.action:hover > revealer > box, infobar.question:hover > revealer > box { background-color: #54b359; } infobar.warning > revealer > box, infobar.warning:backdrop > revealer > box { background-color: #FDD633; color: rgba(0, 0, 0, 0.87); } infobar.warning > revealer > box button, infobar.warning > revealer > box button:hover, infobar.warning > revealer > box button:focus, infobar.warning > revealer > box button:active, infobar.warning > revealer > box button:checked, infobar.warning > revealer > box button.text-button:not(:disabled), infobar.warning:backdrop > revealer > box button, infobar.warning:backdrop > revealer > box button:hover, infobar.warning:backdrop > revealer > box button:focus, infobar.warning:backdrop > revealer > box button:active, infobar.warning:backdrop > revealer > box button:checked, infobar.warning:backdrop > revealer > box button.text-button:not(:disabled) { color: rgba(0, 0, 0, 0.87); } infobar.warning > revealer > box *:link, infobar.warning:backdrop > revealer > box *:link { color: rgba(0, 0, 0, 0.87); } infobar.warning:hover > revealer > box { background-color: #fdd11a; } infobar.error > revealer > box, infobar.error:backdrop > revealer > box { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } infobar.error > revealer > box button, infobar.error > revealer > box button:hover, infobar.error > revealer > box button:focus, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked, infobar.error > revealer > box button.text-button:not(:disabled), infobar.error:backdrop > revealer > box button, infobar.error:backdrop > revealer > box button:hover, infobar.error:backdrop > revealer > box button:focus, infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error:backdrop > revealer > box button.text-button:not(:disabled) { color: rgba(0, 0, 0, 0.87); } infobar.error > revealer > box *:link, infobar.error:backdrop > revealer > box *:link { color: rgba(0, 0, 0, 0.87); } infobar.error:hover > revealer > box { background-color: #f0766b; } /************ * Tooltips * ************/ tooltip { padding: 4px 8px; box-shadow: none; } tooltip.background { background-color: rgba(54, 54, 54, 0.9); color: white; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); border-radius: 5px; margin: 2px 6px 8px 6px; } tooltip > box { border-spacing: 4px; } /***************** * Color Chooser * *****************/ colorswatch.top { border-top-left-radius: 9px; border-top-right-radius: 9px; } colorswatch.top overlay { border-top-left-radius: 9px; border-top-right-radius: 9px; } colorswatch.bottom { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.bottom overlay { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 9px; border-bottom-left-radius: 9px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 9px; border-bottom-left-radius: 9px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.dark { color: white; } colorswatch.light { color: rgba(0, 0, 0, 0.87); } colorswatch#add-color-button { border-radius: 9px 9px 0 0; color: white; } colorswatch#add-color-button:only-child { border-radius: 9px; } colorswatch#add-color-button overlay { background-color: #3C3C3C; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { box-shadow: none; } colorswatch#editor-color-sample { border-radius: 9px; } colorswatch#editor-color-sample overlay { border-radius: 9px; } colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } colorchooser .popover.osd:backdrop { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } /******** * Misc * ********/ .content-view { background-color: #212121; } /********************** * Window Decorations * **********************/ window { outline: none; transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 14px; box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent; } window:backdrop { box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent; } window.popup { border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } window.dialog.message { border-radius: 14px; } .solid-csd window { margin: 0; padding: 2px; border-radius: 0; box-shadow: none; background-color: #2C2C2C; } .solid-csd window:backdrop { background-color: #2C2C2C; } window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-right, window.tiled-bottom, window.tiled-left { border-radius: 0; } windowcontrols { border-spacing: 4px; } windowcontrols:not(.empty).start:dir(ltr), windowcontrols:not(.empty).end:dir(rtl) { margin-right: 4px; } windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(ltr) { margin-left: 4px; } windowcontrols button image { background-color: transparent; padding: 0; } gridview > child:selected, modelbutton.flat:selected, row:selected, calendar:selected, calendar > grid > label.day-number:selected { background-color: alpha(currentColor, 0.06); } .view:selected, iconview:selected, flowbox > flowboxchild:selected, calendar > grid > label.today, stacksidebar row:selected, .navigation-sidebar > row:selected { color: #66BB6A; background-color: rgba(102, 187, 106, 0.2); } textview text selection:focus, textview text selection, label > selection, entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected { color: white; background-color: #66BB6A; } .monospace { font-family: monospace; } .numeric { font-feature-settings: "tnum"; } /********************** * Touch Copy & Paste * **********************/ cursor-handle { color: #66BB6A; -gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg")); } cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { padding-top: 6px; } shortcuts-section { margin: 20px; } .shortcuts-search-results { margin: 20px; border-spacing: 24px; } shortcut { border-spacing: 6px; } shortcut > .keycap { min-width: 12px; min-height: 26px; margin-top: 2px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; border: solid 1px rgba(255, 255, 255, 0.12); border-radius: 11px; box-shadow: inset 0 -2px rgba(255, 255, 255, 0.12); background-color: #3C3C3C; color: white; font-size: smaller; } :not(decoration):not(window):drop(active) { caret-color: #66BB6A; } stackswitcher { min-height: 0; padding: 0; border-radius: 9999px; background-color: alpha(currentColor, 0.05); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { margin: 0 0; border-radius: 9999px; background-color: transparent; } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button { min-width: 100px; } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):active { box-shadow: inset 0 0 0 9999px alpha(#66BB6A, 0.08); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):checked { background-color: #66BB6A; color: white; } stackswitcher button.text-button { min-width: 100px; } stackswitcher.circular { border-spacing: 8px; } stackswitcher.circular button.circular, stackswitcher.circular button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; } /************* * App Icons * *************/ .lowres-icon { -gtk-icon-shadow: none; } .icon-dropshadow { -gtk-icon-shadow: none; } /********* * Emoji * *********/ popover.emoji-picker { padding: 0; } popover.emoji-picker > contents { padding: 0; } .emoji-searchbar { padding: 4px; border-spacing: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: none; } .emoji-searchbar entry { margin: 0; } .emoji-searchbar entry text { background: none; box-shadow: none; } .emoji-toolbar { padding: 0; border-spacing: 2px; border-top: 1px solid rgba(255, 255, 255, 0.12); background: none; box-shadow: none; } button.emoji-section { margin: 0; padding: 4px; border-radius: 8px; } button.emoji-section:checked { color: #66BB6A; } popover.emoji-picker emoji { font-size: x-large; padding: 4px; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 10px; } popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { background: alpha(currentColor, 0.08); } emoji-completion-row { min-height: 24px; padding: 0 8px; } emoji-completion-row > box { border-spacing: 4px; padding: 2px 4px; } emoji-completion-row:focus, emoji-completion-row:hover, emoji-completion-row emoji:hover, emoji-completion-row emoji:focus { background-color: alpha(currentColor, 0.08); color: white; } popover.entry-completion > contents { padding: 0; } flowboxchild > button.card { box-shadow: none; } flowboxchild > button.card .large-icons { -gtk-icon-size: 32px; } flowboxchild > button.card.category-work { background-color: #FFF9C4; color: rgba(0, 0, 0, 0.87); } flowboxchild > button.card.category-develop { background-color: #616161; color: white; } flowboxchild > button.card.category-tile { padding: 14px; } flowboxchild > button.card.category-tile-iconless { padding: 6px 10px; } avatar { border-radius: 9999px; font-weight: bold; } avatar.color1 { background-image: linear-gradient(#83b6ec, #337fdc); color: #cfe1f5; } avatar.color2 { background-image: linear-gradient(#7ad9f1, #0f9ac8); color: #caeaf2; } avatar.color3 { background-image: linear-gradient(#8de6b1, #29ae74); color: #cef8d8; } avatar.color4 { background-image: linear-gradient(#b5e98a, #6ab85b); color: #e6f9d7; } avatar.color5 { background-image: linear-gradient(#f8e359, #d29d09); color: #f9f4e1; } avatar.color6 { background-image: linear-gradient(#ffcb62, #d68400); color: #ffead1; } avatar.color7 { background-image: linear-gradient(#ffa95a, #ed5b00); color: #ffe5c5; } avatar.color8 { background-image: linear-gradient(#f78773, #e62d42); color: #f8d2ce; } avatar.color9 { background-image: linear-gradient(#e973ab, #e33b6a); color: #fac7de; } avatar.color10 { background-image: linear-gradient(#cb78d4, #9945b5); color: #e7c2e8; } avatar.color11 { background-image: linear-gradient(#9e91e8, #7a59ca); color: #d5d2f5; } avatar.color12 { background-image: linear-gradient(#e3cf9c, #b08952); color: #f2eade; } avatar.color13 { background-image: linear-gradient(#be916d, #785336); color: #e5d6ca; } avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8d7d3; } avatar.contrasted { color: white; } avatar.image { background: none; } splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, button.suggested-action, button.destructive-action, button.opaque { box-shadow: none; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 225ms cubic-bezier(0, 0, 0.2, 1); } .osd splitbutton.suggested-action > button:focus:focus-visible, .osd splitbutton.suggested-action > menubutton > button:focus:focus-visible, .osd splitbutton.destructive-action > button:focus:focus-visible, .osd splitbutton.destructive-action > menubutton > button:focus:focus-visible, .osd splitbutton.opaque > button:focus:focus-visible, .osd splitbutton.opaque > menubutton > button:focus:focus-visible, .osd menubutton.suggested-action > button:focus:focus-visible, .osd menubutton.destructive-action > button:focus:focus-visible, .osd menubutton.opaque > button:focus:focus-visible, .osd button.suggested-action:focus:focus-visible, .osd button.destructive-action:focus:focus-visible, .osd button.opaque:focus:focus-visible { outline: none; } splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, button.suggested-action:hover, button.destructive-action:hover, button.opaque:hover { background-image: image(alpha(currentColor, 0.1)); } splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, menubutton.suggested-action > button.keyboard-activating, menubutton.destructive-action > button.keyboard-activating, menubutton.opaque > button.keyboard-activating, button.keyboard-activating.suggested-action, button.keyboard-activating.destructive-action, button.keyboard-activating.opaque, splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, button.suggested-action:active, button.destructive-action:active, button.opaque:active { background-image: image(rgba(0, 0, 0, 0.2)); } splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, button.suggested-action:checked, button.destructive-action:checked, button.opaque:checked { background-image: image(rgba(0, 0, 0, 0.15)); } splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, menubutton.suggested-action > button:checked:hover, menubutton.destructive-action > button:checked:hover, menubutton.opaque > button:checked:hover, button.suggested-action:checked:hover, button.destructive-action:checked:hover, button.opaque:checked:hover { background-image: image(rgba(0, 0, 0, 0.05)); } splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, menubutton.suggested-action > button:checked.keyboard-activating, menubutton.destructive-action > button:checked.keyboard-activating, menubutton.opaque > button:checked.keyboard-activating, button.suggested-action:checked.keyboard-activating, button.destructive-action:checked.keyboard-activating, button.opaque:checked.keyboard-activating, splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, menubutton.suggested-action > button:checked:active, menubutton.destructive-action > button:checked:active, menubutton.opaque > button:checked:active, button.suggested-action:checked:active, button.destructive-action:checked:active, button.opaque:checked:active { background-image: image(rgba(0, 0, 0, 0.3)); } button.opaque { background-color: gtkmix(#2C2C2C, white, 85%); color: white; } button.destructive-action { color: rgba(0, 0, 0, 0.87); } button.destructive-action, button.destructive-action:checked { background-color: #F28B82; } button.suggested-action { color: white; } button.suggested-action, button.suggested-action:checked { background-color: #66BB6A; } button.font separator { background-color: transparent; } button.font > box { border-spacing: 4px; } button.font > box > box > label { font-weight: bold; } menubutton.pill > button, button.pill { padding: 10px 32px; border-radius: 9999px; } button.card { background-clip: padding-box; font-weight: inherit; box-shadow: none; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } button.card:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } button.card.keyboard-activating, button.card:active { transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1), background-color 225ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); } button.card:checked { transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1), background-color 225ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12); } button.card:drop(active) { color: #FF7043; box-shadow: inset 0 0 0 1px #FF7043; } menubutton.osd { background: none; color: inherit; } menubutton.suggested-action { background-color: #66BB6A; color: white; } menubutton.destructive-action { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } menubutton.opaque { background-color: gtkmix(#2C2C2C, white, 85%); color: white; } menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque { border-radius: 10px; } menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill { border-radius: 9999px; } menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked { background-color: transparent; color: inherit; } menubutton.image-button > button { min-width: 24px; padding-left: 4px; padding-right: 4px; } menubutton arrow { min-height: 16px; min-width: 16px; } menubutton arrow.none { -gtk-icon-source: -gtk-icontheme("open-menu-symbolic"); } menubutton arrow.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } menubutton arrow.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } menubutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } splitbutton { border-radius: 10px; } splitbutton, splitbutton > separator { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); transition-property: background; } splitbutton > separator { margin-top: 4px; margin-bottom: 4px; background: none; } splitbutton > menubutton > button { padding-left: 2px; padding-right: 2px; } splitbutton.image-button > button { min-width: 24px; padding-left: 4px; padding-right: 4px; } splitbutton.text-button.image-button > button, splitbutton.image-text-button > button { padding-left: 6px; padding-right: 6px; } splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box { border-spacing: 4px; } splitbutton > button:dir(ltr), splitbutton > menubutton > button:dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; } splitbutton > button:dir(rtl), splitbutton > menubutton > button:dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } splitbutton.flat > separator { background: rgba(255, 255, 255, 0.12); } splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked { background: alpha(currentColor, 0.1); color: white; } splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator { background: none; } splitbutton.flat:focus-within:focus-visible > separator { background: none; } splitbutton.flat > button, splitbutton.flat > menubutton > button { border-radius: 10px; } splitbutton.suggested-action { background-color: #66BB6A; color: white; } splitbutton.destructive-action { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } splitbutton.opaque { background-color: gtkmix(#2C2C2C, white, 85%); color: white; } splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked { color: inherit; background-color: transparent; } splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) { box-shadow: inset 1px 0 rgba(255, 255, 255, 0.12); } splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) { box-shadow: inset -1px 0 rgba(255, 255, 255, 0.12); } splitbutton > menubutton > button > arrow.none { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } buttoncontent { border-spacing: 4px; } buttoncontent > label { font-weight: bold; } buttoncontent > label:dir(ltr) { padding-right: 2px; } buttoncontent > label:dir(rtl) { padding-left: 2px; } .arrow-button > box > buttoncontent > label:dir(ltr), splitbutton > button > buttoncontent > label:dir(ltr) { padding-right: 0; } .arrow-button > box > buttoncontent > label:dir(rtl), splitbutton > button > buttoncontent > label:dir(rtl) { padding-left: 0; } toast { margin: 8px; margin-bottom: 24px; border-radius: 9999px; border-spacing: 4px; padding: 4px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); font-weight: normal; } toast:dir(ltr) { padding-left: 8px; } toast:dir(rtl) { padding-right: 8px; } toast > widget { margin: 0 4px; } statuspage > scrolledwindow > viewport > box { margin: 24px 8px; border-spacing: 36px; } statuspage > scrolledwindow > viewport > box > clamp > box { border-spacing: 8px; } statuspage > scrolledwindow > viewport > box > clamp > box > .icon { -gtk-icon-size: 128px; color: alpha(currentColor, 0.45); } statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled { opacity: 0.45; } statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: 16px; } statuspage.compact > scrolledwindow > viewport > box { margin: 16px 8px; border-spacing: 16px; } statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon { -gtk-icon-size: 96px; } statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: 8px; } statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title { font-size: 18pt; } list.content, list.boxed-list, .card { border-radius: 10px; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } preferencespage > scrolledwindow > viewport > clamp > box { margin: 16px 8px; border-spacing: 16px; } preferencesgroup > box, preferencesgroup > box .labels { border-spacing: 4px; } preferencesgroup > box > box.header:not(.single-line) { margin-bottom: 4px; } preferencesgroup > box > box.single-line { min-height: 32px; } preferencesgroup > box button.background-preview-button.toggle { padding: 0; background: none; box-shadow: none; outline-color: transparent; outline-width: 2px; outline-offset: 2px; outline-style: solid; } preferencesgroup > box button.background-preview-button.toggle, preferencesgroup > box button.background-preview-button.toggle > background-preview { border-radius: 6px; } preferencesgroup > box button.background-preview-button.toggle:hover { outline-color: rgba(255, 255, 255, 0.04); } preferencesgroup > box button.background-preview-button.toggle:active { outline-color: rgba(255, 255, 255, 0.3); } preferencesgroup > box button.background-preview-button.toggle:checked { outline-color: #66BB6A; } viewswitcher { margin: 0; } viewswitcher.wide { border-spacing: 2px; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.04); margin-top: 4px; margin-bottom: 4px; } viewswitcher.wide button.toggle:checked, viewswitcher.wide button.toggle.flat:checked { background-color: #66BB6A; color: white; } viewswitcher.wide button.toggle:checked:backdrop, viewswitcher.wide button.toggle.flat:checked:backdrop { color: rgba(255, 255, 255, 0.5); } viewswitcher.wide button.toggle:checked indicatorbin.needs-attention > indicator, viewswitcher.wide button.toggle.flat:checked indicatorbin.needs-attention > indicator { background-color: white; } viewswitcher.wide button.toggle:checked indicatorbin.needs-attention > indicator > label, viewswitcher.wide button.toggle.flat:checked indicatorbin.needs-attention > indicator > label { color: #66BB6A; } viewswitcher.narrow button.toggle { border-radius: 0; margin: 0; border: none; } viewswitcher button.toggle { font-weight: bold; padding: 0; min-height: 0; margin: 0; } viewswitcher button.toggle > stack > box.narrow { font-size: 0.75rem; padding-top: 5px; padding-bottom: 3px; border-spacing: 2px; } viewswitcher button.toggle > stack > box.narrow > stack > label { padding-left: 6px; padding-right: 6px; } viewswitcher button.toggle > stack > box.wide { padding: 0 8px; border-spacing: 4px; } viewswitcherbar actionbar > revealer > box { padding: 0; } viewswitchertitle viewswitcher { margin-left: 8px; margin-right: 8px; } indicatorbin > indicator, indicatorbin > mask { min-width: 4px; min-height: 4px; border-radius: 9999px; } indicatorbin > indicator { margin: 1px; padding: 0; background: alpha(currentColor, 0.4); } indicatorbin > indicator > label { font-size: 0.6rem; font-weight: bold; padding: 2px 5px; color: white; } indicatorbin > mask { padding: 1px; background: black; } indicatorbin.needs-attention > indicator { background-color: #66BB6A; } indicatorbin.needs-attention > indicator > label { color: white; } tabbar .box { min-height: 24px; } tabbar tabbox > tabboxchild { border-radius: 10px; margin: 2px; } tabbar tabbox > separator { margin-top: 6px; margin-bottom: 6px; transition: opacity 150ms ease-in-out; } tabbar tabbox > separator.hidden { opacity: 0; } tabbar tabbox > revealer > indicator { min-width: 2px; border-radius: 2px; margin: 6px 4px; background: alpha(#66BB6A, 0.5); } tabbar tab { transition: background 150ms ease-in-out; } tabbar tab:selected, tabbar tab:checked, tabbar tab:active, tabbar tab:active:hover, tabbar tab:checked:hover { background-color: rgba(255, 255, 255, 0.12); box-shadow: none; color: white; } tabbar tab:hover { background-color: rgba(255, 255, 255, 0.04); box-shadow: none; color: white; } tabbar .start-action, tabbar .end-action { padding: 5px; } tabbar .start-action:dir(ltr), tabbar .end-action:dir(rtl) { padding-right: 0; } tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { padding-left: 0; } tabbar:not(.inline) .box { background-color: #212121; color: rgba(255, 255, 255, 0.7); padding: 2px; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); } dnd tab { background-color: #212121; color: rgba(255, 255, 255, 0.7); box-shadow: none; margin: 16px; } tabbar tab, dnd tab { min-height: 24px; padding: 2px 4px; border-radius: 5px; margin: 0 1px; } tabbar tab button.image-button, dnd tab button.image-button { padding: 0; margin: 0; min-width: 20px; min-height: 20px; border-radius: 9999px; border: none; } tabbar tab indicator, dnd tab indicator { min-height: 2px; border-radius: 2px; background: alpha(#66BB6A, 0.5); } tabview:drop(active), tabbox:drop(active) { box-shadow: none; } .unfolded stacksidebar.sidebar { border: none; } leaflet { outline-color: rgba(255, 255, 255, 0.1); outline-width: 1px; outline-style: solid; outline-offset: -1px; border-radius: 14px; } leaflet headerbar { border-radius: 0; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); } leaflet leaflet { border-radius: 0; outline: none; } leaflet > box > scrolledwindow > viewport > widget > stack { background-color: #2C2C2C; } /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color white; /* text color for entries, views and content in general */ @define-color theme_text_color white; /* widget base background color */ @define-color theme_bg_color #212121; /* text widgets and the like base background color */ @define-color theme_base_color #2C2C2C; /* base background color of selections */ @define-color theme_selected_bg_color #66BB6A; /* text/foreground color of selections */ @define-color theme_selected_fg_color white; /* base background color of insensitive widgets */ @define-color insensitive_bg_color #212121; /* text foreground color of insensitive widgets */ @define-color insensitive_fg_color rgba(255, 255, 255, 0.5); /* insensitive text widgets and the like base background color */ @define-color insensitive_base_color #242424; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color white; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color white; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #212121; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #2C2C2C; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #66BB6A; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color white; /* insensitive color on backdrop windows */ @define-color unfocused_insensitive_color rgba(255, 255, 255, 0.5); /* widgets main borders color */ @define-color borders rgba(255, 255, 255, 0.12); /* widgets main borders color on backdrop windows */ @define-color unfocused_borders rgba(255, 255, 255, 0.12); /* these are pretty self explicative */ @define-color warning_color #FDD633; @define-color error_color #F28B82; @define-color success_color #81C995; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title white; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); @define-color wm_bg #2C2C2C; @define-color wm_unfocused_bg #2C2C2C; /* FIXME this is really an API */ @define-color content_view_bg #2C2C2C; @define-color placeholder_text_color silver; /* Very contrasty background for text views (@theme_text_color foreground) */ @define-color text_view_bg #1d1d1d; @define-color budgie_tasklist_indicator_color rgba(255, 255, 255, 0.7); @define-color budgie_tasklist_indicator_color_active #66BB6A; @define-color budgie_tasklist_indicator_color_active_window rgba(76, 129, 78, 0.8075); @define-color budgie_tasklist_indicator_color_attention #FDD633; @define-color STRAWBERRY_100 #FF9262; @define-color STRAWBERRY_300 #FF793E; @define-color STRAWBERRY_500 #F15D22; @define-color STRAWBERRY_700 #CF3B00; @define-color STRAWBERRY_900 #AC1800; @define-color ORANGE_100 #FFDB91; @define-color ORANGE_300 #FFCA40; @define-color ORANGE_500 #FAA41A; @define-color ORANGE_700 #DE8800; @define-color ORANGE_900 #C26C00; @define-color BANANA_100 #FFFFA8; @define-color BANANA_300 #FFFA7D; @define-color BANANA_500 #FFCE51; @define-color BANANA_700 #D1A023; @define-color BANANA_900 #A27100; @define-color LIME_100 #A2F3BE; @define-color LIME_300 #8ADBA6; @define-color LIME_500 #73C48F; @define-color LIME_700 #479863; @define-color LIME_900 #1C6D38; @define-color BLUEBERRY_100 #94A6FF; @define-color BLUEBERRY_300 #6A7CE0; @define-color BLUEBERRY_500 #3F51B5; @define-color BLUEBERRY_700 #213397; @define-color BLUEBERRY_900 #031579; @define-color GRAPE_100 #D25DE6; @define-color GRAPE_300 #B84ACB; @define-color GRAPE_500 #9C27B0; @define-color GRAPE_700 #830E97; @define-color GRAPE_900 #6A007E; @define-color COCOA_100 #9F9792; @define-color COCOA_300 #7B736E; @define-color COCOA_500 #574F4A; @define-color COCOA_700 #463E39; @define-color COCOA_900 #342C27; @define-color SILVER_100 #EEE; @define-color SILVER_300 #CCC; @define-color SILVER_500 #AAA; @define-color SILVER_700 #888; @define-color SILVER_900 #666; @define-color SLATE_100 #888; @define-color SLATE_300 #666; @define-color SLATE_500 #444; @define-color SLATE_700 #222; @define-color SLATE_900 #111; @define-color BLACK_100 #474341; @define-color BLACK_300 #403C3A; @define-color BLACK_500 #393634; @define-color BLACK_700 #33302F; @define-color BLACK_900 #2B2928; ---------------------------------------------------------

[ajowens001]

gtk-3.0 / gtk-dark.css (Part 1)

--------------------------------------------------------- @keyframes ripple { to { background-size: 1000% 1000%; } } @keyframes ripple-on-slider { to { background-size: auto, 1000% 1000%; } } @keyframes ripple-on-headerbar { from { background-image: radial-gradient(circle, #66BB6A 0%, transparent 0%); } to { background-image: radial-gradient(circle, #66BB6A 100%, transparent 0%); } } * { background-clip: padding-box; -GtkToolButton-icon-spacing: 0; -GtkTextView-error-underline-color: #F28B82; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 24; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 4; outline-style: solid; outline-width: 2px; outline-color: transparent; outline-offset: -4px; -gtk-outline-radius: 10px; -gtk-secondary-caret-color: #66BB6A; } *:focus { outline-color: alpha(currentColor, 0.1); } XfdesktopIconView.view:active, calendar.raven-calendar:selected, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item):checked, box.vertical > widget > widget:selected, calendar:selected, row:selected, treeview.view:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected { color: white; background-color: #414141; } .nemo-window .view selection, .nemo-window filechooser stack.view scrolledwindow treeview.view selection, filechooser stack.view scrolledwindow .nemo-window treeview.view selection, .nemo-window window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) selection, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nemo-window treeview.view:not(.progressbar):not(.trough) selection, .nemo-window .view:selected, .nemo-window filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow .nemo-window treeview.view:selected, .nautilus-window notebook :not(treeview).view selection, .nautilus-window notebook window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(treeview):not(.progressbar):not(.trough) selection, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nautilus-window notebook treeview.view:not(treeview):not(.progressbar):not(.trough) selection, .nautilus-window notebook filechooser stack.view scrolledwindow treeview.view:not(treeview) selection, filechooser stack.view scrolledwindow .nautilus-window notebook treeview.view:not(treeview) selection, .nautilus-window notebook :not(treeview).view:selected, .nautilus-window notebook filechooser stack.view scrolledwindow treeview.view:not(treeview):selected, filechooser stack.view scrolledwindow .nautilus-window notebook treeview.view:not(treeview):selected, .nautilus-window flowboxchild:selected .icon-item-background, flowbox flowboxchild:selected, .background.csd .view:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), .background.csd filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow .background.csd treeview.view:selected { color: #66BB6A; background-color: rgba(102, 187, 106, 0.2); } .nemo-window .nemo-window-pane widget.entry:selected, window.background.csd evview.view.content-view:selected, window.background.csd evview.view.content-view:selected:backdrop, statuspage.search-view entry.search > window.background treeview.view:selected, statuspage.search-view entry.search > window.background filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow statuspage.search-view entry.search > window.background treeview.view:selected, spinbutton.vertical selection, spinbutton:not(.vertical) selection, entry selection, label selection, textview text selection:focus, textview text selection, widget.view:selected, .view:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:selected { color: white; background-color: #66BB6A; } .linked:not(.vertical) > button, .linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry { border-radius: 0; } .linked:not(.vertical) > button:first-child, .linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .linked:not(.vertical) > button:last-child, .linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .linked:not(.vertical) > button:only-child, .linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child { border-radius: 10px; } .linked.vertical > button, .linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry { border-radius: 0; } .linked.vertical > button:first-child, .linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .linked.vertical > button:last-child, .linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .linked.vertical > button:only-child, .linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child { border-radius: 10px; } /*************** * Base States * ***************/ .background { background-color: #212121; color: white; } .background.csd { border-radius: 0 0 14px 14px; } .background.maximized, .background.solid-csd { border-radius: 0; } *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: #212121; color: white; } .gtkstyle-fallback:hover { background-color: #141414; color: white; } .gtkstyle-fallback:active { background-color: #080808; color: white; } .gtkstyle-fallback:disabled { background-color: #212121; color: rgba(255, 255, 255, 0.5); } .gtkstyle-fallback:selected { background-color: #66BB6A; color: white; } .view, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view { background-color: #2C2C2C; color: white; } .view:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } .view:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:disabled:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:disabled { color: rgba(255, 255, 255, 0.5); } .view:selected:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:selected:hover { box-shadow: none; } textview text { background-color: #2C2C2C; } textview border { background-color: #242424; color: rgba(255, 255, 255, 0.7); } iconview:hover, iconview:selected { border-radius: 10px; } .rubberband, XFDESKTOPICONVIEW settings not applicable - not included for brevity's sake......... .rubberband { border: 1px solid #66BB6A; background-color: rgba(102, 187, 106, 0.3); } --------------------------------------------------------- End Part 1

[ajowens001]

gtk-3.0 / gtk-dark.css (Part 2)

--------------------------------------------------------- flowbox flowboxchild { padding: 4px; border-radius: 10px; } .content-view .tile:selected { background-color: transparent; } label { caret-color: currentColor; } label.separator { color: rgba(255, 255, 255, 0.7); } label:disabled { color: rgba(255, 255, 255, 0.5); } headerbar label:disabled, tab label:disabled, button label:disabled { color: inherit; } label.osd { border-radius: 10px; background-color: rgba(54, 54, 54, 0.9); color: white; } .dim-label { color: rgba(255, 255, 255, 0.7); } assistant .sidebar { padding: 4px 0; } assistant .sidebar label { min-height: 32px; padding: 0 12px; color: rgba(255, 255, 255, 0.5); font-weight: 500; } assistant .sidebar label.highlight { color: white; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } /**************** * Text Entries * ****************/ spinbutton.vertical, spinbutton:not(.vertical), entry { min-height: 32px; padding: 0 8px; border-radius: 10px; caret-color: currentColor; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; } spinbutton.vertical:focus, spinbutton:focus:not(.vertical), entry:focus { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px #66BB6A; } spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active) { background-color: alpha(currentColor, 0.08); box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical), entry:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } spinbutton.flat.vertical, spinbutton.flat:not(.vertical), entry.flat { min-height: 0; padding: 2px; border-radius: 0; background-color: transparent; } spinbutton.vertical image, spinbutton:not(.vertical) image, entry image { color: rgba(255, 255, 255, 0.7); } spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active, entry image:hover, entry image:active { color: white; } spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled, entry image:disabled { color: rgba(255, 255, 255, 0.5); } spinbutton.vertical image.left, spinbutton:not(.vertical) image.left, entry image.left { margin-left: 0px; margin-right: 6px; } spinbutton.vertical image.right, spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; margin-right: 0px; } spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%); padding-left: 1px; background-size: 1px 12px; background-repeat: repeat-y; background-origin: content-box; background-position: left top; margin: 0 4px; margin: 4px 0; } spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%); padding-right: 1px; background-size: 1px 12px; background-repeat: repeat-y; background-origin: content-box; background-position: right top; margin: 0 4px; margin: 4px 0; } spinbutton.error.vertical, spinbutton.error:not(.vertical), entry.error { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; } spinbutton.error.vertical:focus, spinbutton.error:focus:not(.vertical), entry.error:focus { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px #F28B82; } spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical), entry.error:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } spinbutton.warning.vertical, spinbutton.warning:not(.vertical), entry.warning { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; } spinbutton.warning.vertical:focus, spinbutton.warning:focus:not(.vertical), entry.warning:focus { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px #FDD633; } spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical), entry.warning:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } spinbutton.vertical progress, spinbutton:not(.vertical) progress, entry progress { margin: 2px -8px; border-bottom: 2px solid #66BB6A; background-color: transparent; } .gedit-search-slider .linked:not(.vertical) > entry { border-radius: 10px; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); border-image: none; box-shadow: inset 0 0 0 2px transparent; background-color: #3C3C3C; color: white; } .gedit-search-slider .linked:not(.vertical) > entry:focus { border-image: none; box-shadow: inset 0 0 0 2px #66BB6A; } .gedit-search-slider .linked:not(.vertical) > entry:drop(active) { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } .gedit-search-slider .linked:not(.vertical) > entry:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: #242424; color: rgba(255, 255, 255, 0.5); } .gedit-search-slider .linked:not(.vertical) > entry.error { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); border-image: none; box-shadow: inset 0 0 0 2px transparent; background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } .gedit-search-slider .linked:not(.vertical) > entry.error:focus { border-image: none; box-shadow: inset 0 0 0 2px #F28B82; } .gedit-search-slider .linked:not(.vertical) > entry.error:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: #242424; color: rgba(255, 255, 255, 0.5); } .gedit-search-slider .linked:not(.vertical) > entry.error image { color: rgba(0, 0, 0, 0.6); } .gedit-search-slider .linked:not(.vertical) > entry.error image:hover, .gedit-search-slider .linked:not(.vertical) > entry.error image:active { color: rgba(0, 0, 0, 0.87); } .gedit-search-slider .linked:not(.vertical) > entry.error image:disabled { color: rgba(0, 0, 0, 0.38); } .gedit-search-slider .linked:not(.vertical) > entry.warning { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); border-image: none; box-shadow: inset 0 0 0 2px transparent; background-color: #FDD633; color: rgba(0, 0, 0, 0.87); } .gedit-search-slider .linked:not(.vertical) > entry.warning:focus { border-image: none; box-shadow: inset 0 0 0 2px #FDD633; } .gedit-search-slider .linked:not(.vertical) > entry.warning:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: #242424; color: rgba(255, 255, 255, 0.5); } .gedit-search-slider .linked:not(.vertical) > entry.warning image { color: rgba(0, 0, 0, 0.6); } .gedit-search-slider .linked:not(.vertical) > entry.warning image:hover, .gedit-search-slider .linked:not(.vertical) > entry.warning image:active { color: rgba(0, 0, 0, 0.87); } .gedit-search-slider .linked:not(.vertical) > entry.warning image:disabled { color: rgba(0, 0, 0, 0.38); } treeview entry.flat, treeview entry { background-color: #2C2C2C; } treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus { border-image: none; box-shadow: none; } .entry-tag, .photos-entry-tag, .documents-entry-tag { margin: 2px; border-radius: 9999px; box-shadow: none; background-color: rgba(255, 255, 255, 0.12); color: white; } .entry-tag:hover, .photos-entry-tag:hover, .documents-entry-tag:hover { background-image: image(alpha(currentColor, 0.08)); } :dir(ltr) .entry-tag, :dir(ltr) .photos-entry-tag, :dir(ltr) .documents-entry-tag { margin-left: 4px; margin-right: 0; padding-left: 12px; padding-right: 8px; } :dir(rtl) .entry-tag, :dir(rtl) .photos-entry-tag, :dir(rtl) .documents-entry-tag { margin-left: 0; margin-right: 4px; padding-left: 8px; padding-right: 12px; } .entry-tag.button, .button.photos-entry-tag, .button.documents-entry-tag { box-shadow: none; background-color: transparent; } .entry-tag.button:not(:hover):not(:active), .button.photos-entry-tag:not(:hover):not(:active), .button.documents-entry-tag:not(:hover):not(:active) { color: rgba(255, 255, 255, 0.7); } /*********** * Buttons * ***********/ @keyframes needs-attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#66BB6A), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#66BB6A), to(transparent)); } } .xfce4-panel.background button, .xfce4-panel.background button.flat, .raven-mpris button.image-button, .mate-panel-menu-bar button, .nautilus-window.background.csd notebook > header tab button.flat, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button, infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button { color: rgba(255, 255, 255, 0.7); } .xfce4-panel.background button:focus, .raven-mpris button.image-button:focus, .mate-panel-menu-bar button:focus, .nautilus-window.background.csd notebook > header tab button.flat:focus, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:focus, infobar.warning > revealer > box button:focus, .xfce4-panel.background button:hover, .raven-mpris button.image-button:hover, .mate-panel-menu-bar button:hover, .nautilus-window.background.csd notebook > header tab button.flat:hover, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:hover, infobar.warning > revealer > box button:hover, .xfce4-panel.background button:active, .raven-mpris button.image-button:active, .mate-panel-menu-bar button:active, .nautilus-window.background.csd notebook > header tab button.flat:active, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:active, infobar.warning > revealer > box button:active, .xfce4-panel.background button:checked, .raven-mpris button.image-button:checked, .mate-panel-menu-bar button:checked, .nautilus-window.background.csd notebook > header tab button.flat:checked, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:checked, infobar.warning > revealer > box button:checked { color: white; } .xfce4-panel.background button:disabled, .raven-mpris button.image-button:disabled, .mate-panel-menu-bar button:disabled, .nautilus-window.background.csd notebook > header tab button.flat:disabled, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:disabled, infobar.warning > revealer > box button:disabled { color: rgba(255, 255, 255, 0.3); } .xfce4-panel.background button:checked:disabled, .raven-mpris button.image-button:checked:disabled, .mate-panel-menu-bar button:checked:disabled, .nautilus-window.background.csd notebook > header tab button.flat:checked:disabled, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable button.sidebar-button:checked:disabled, infobar.warning > revealer > box button:checked:disabled { color: rgba(255, 255, 255, 0.5); } actionbar > revealer > box .linked > button:not(.suggested-action):not(.destructive-action), button { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; background-color: rgba(255, 255, 255, 0.04); background-image: radial-gradient(circle, transparent 10%, transparent 0%); background-repeat: no-repeat; background-position: center; background-size: 1000% 1000%; color: white; } actionbar > revealer > box .linked > button:focus:not(.suggested-action):not(.destructive-action), button:focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } actionbar > revealer > box .linked > button:hover:not(.suggested-action):not(.destructive-action), button:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } actionbar > revealer > box .linked > button:active:not(.suggested-action):not(.destructive-action), button:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: 0% 0%; } actionbar > revealer > box .linked > button:disabled:not(.suggested-action):not(.destructive-action), button:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } actionbar > revealer > box .linked > button:checked:not(.suggested-action):not(.destructive-action), button:checked { box-shadow: none; background-color: #66BB6A; color: white; } actionbar > revealer > box .linked > button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover { box-shadow: inset 0 0 0 9999px transparent; } actionbar > revealer > box .linked > button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1); background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } .raven .expander-button, window.background > box.vertical > toolbar.primary-toolbar > toolitem > box.horizontal:not(.linked) > button.toggle, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar > toolitem button.flat.scale, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button.image-button.raised, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button, .nautilus-window headerbar revealer > button, .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button, button.titlebutton, filechooser #pathbarbox > stack > box > button, check, radio, button.close, button.circular, .inline-toolbar button:not(.text-button), button.image-button { border-radius: 9999px; } .raven .expander-button label, window.background > box.vertical > toolbar.primary-toolbar > toolitem > box.horizontal:not(.linked) > button.toggle label, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button:not(.toggle):not(.raised):not(.flat) label, window.background > box.vertical > toolbar.primary-toolbar > toolitem button.flat.scale label, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button.image-button.raised label, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button label, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button label, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button label, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button label, .nautilus-window headerbar revealer > button label, .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button label, button.titlebutton label, filechooser #pathbarbox > stack > box > button label, check label, radio label, button.close label, button.circular label, .inline-toolbar button:not(.text-button) label, button.image-button label { padding: 0; } .pluma-window paned.horizontal box.vertical box.horizontal button.flat, .gedit-search-slider .linked > button, .gedit-document-panel row button.flat, .nautilus-window .floating-bar button, placessidebar.sidebar row button.sidebar-button, notebook > header tab button.flat, spinbutton.vertical button, spinbutton:not(.vertical) button { min-height: 22px; min-width: 22px; padding: 0; border-radius: 9999px; } button { min-height: 24px; min-width: 16px; padding: 4px 8px; border-radius: 10px; font-weight: 500; } button:drop(active) { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button, .drop-shadow button, .budgie-panel button, .budgie-popover row button, .budgie-settings-window buttonbox.inline-toolbar button, #mate-menu button, #MatePanelPopupWindow button, popover.messagepopover .popover-action-area button, tabbox > tab button, .gedit-search-slider .linked > button, .nautilus-window.background.csd notebook > header tab:checked button.flat, .nautilus-window.background.csd notebook > header tab:active button.flat, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button, placessidebar.sidebar row button.sidebar-button, calendar.button, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) button.circular, .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable button.circular, treeview.view header button button.circular, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button button.circular, filechooser stack.view scrolledwindow treeview.view header button button.circular, row.activatable button.circular, check, radio, scrollbar button, notebook > header > tabs > arrow, spinbutton.vertical button, spinbutton:not(.vertical) button, modelbutton.flat, .menuitem.button.flat, .nemo-window .toolbar button, #buttonbox_frame button, .xfce4-panel.background button, .xfce4-panel.background button.flat, .raven stackswitcher.linked > button, .lock-dialog button, .mate-panel-menu-bar button, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button, layouttabbar button, filechooser #pathbarbox > stack > box > button, messagedialog.csd .dialog-action-box button, .app-notification button, actionbar > revealer > box button:not(.suggested-action):not(.destructive-action), popover.background.menu button, popover.background button.model, .caja-pathbar button, .path-bar.linked:not(.vertical) > button, .nemo-window .primary-toolbar button:not(.text-button), headerbar button:not(.suggested-action):not(.destructive-action), toolbar button, combobox > .linked:not(.vertical) > button:not(:only-child), button.flat { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; background-color: transparent; background-image: radial-gradient(circle, transparent 10%, transparent 0%); background-repeat: no-repeat; background-position: center; background-size: 1000% 1000%; color: rgba(255, 255, 255, 0.7); } .budgie-session-dialog .linked.horizontal > button:focus, .budgie-polkit-dialog .linked.horizontal > button:focus, .budgie-run-dialog .linked.horizontal > button:focus, .drop-shadow button:focus, .budgie-panel button:focus, .budgie-popover row button:focus, .budgie-settings-window buttonbox.inline-toolbar button:focus, #mate-menu button:focus, #MatePanelPopupWindow button:focus, popover.messagepopover .popover-action-area button:focus, tabbox > tab button:focus, .gedit-search-slider .linked > button:focus, .nautilus-window.background.csd notebook > header tab:checked button.flat:focus, .nautilus-window.background.csd notebook > header tab:active button.flat:focus, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button:focus, placessidebar.sidebar row button.sidebar-button:focus, calendar.button:focus, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) button.circular:focus, .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable button.circular:focus, treeview.view header button button.circular:focus, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button button.circular:focus, filechooser stack.view scrolledwindow treeview.view header button button.circular:focus, row.activatable button.circular:focus, check:focus, radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, spinbutton.vertical button:focus, spinbutton:not(.vertical) button:focus, modelbutton.flat:focus, .menuitem.button.flat:focus, .nemo-window .toolbar button:focus, #buttonbox_frame button:focus, .xfce4-panel.background button:focus, .raven stackswitcher.linked > button:focus, .lock-dialog button:focus, .mate-panel-menu-bar button:focus, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:focus, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:focus, layouttabbar button:focus, filechooser #pathbarbox > stack > box > button:focus, messagedialog.csd .dialog-action-box button:focus, .app-notification button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action), popover.background.menu button:focus, popover.background button.model:focus, .caja-pathbar button:focus, .path-bar.linked:not(.vertical) > button:focus, .nemo-window .primary-toolbar button:focus:not(.text-button), headerbar button:focus:not(.suggested-action):not(.destructive-action), toolbar button:focus, combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); color: white; } .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover, .drop-shadow button:hover, .budgie-panel button:hover, .budgie-popover row button:hover, .budgie-settings-window buttonbox.inline-toolbar button:hover, #mate-menu button:hover, #MatePanelPopupWindow button:hover, popover.messagepopover .popover-action-area button:hover, tabbox > tab button:hover, .gedit-search-slider .linked > button:hover, .nautilus-window.background.csd notebook > header tab:checked button.flat:hover, .nautilus-window.background.csd notebook > header tab:active button.flat:hover, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button:hover, placessidebar.sidebar row button.sidebar-button:hover, calendar.button:hover, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) button.circular:hover, .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable button.circular:hover, treeview.view header button button.circular:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button button.circular:hover, filechooser stack.view scrolledwindow treeview.view header button button.circular:hover, row.activatable button.circular:hover, check:hover, radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, spinbutton.vertical button:hover, spinbutton:not(.vertical) button:hover, modelbutton.flat:hover, .menuitem.button.flat:hover, .nemo-window .toolbar button:hover, #buttonbox_frame button:hover, .xfce4-panel.background button:hover, .raven stackswitcher.linked > button:hover, .lock-dialog button:hover, .mate-panel-menu-bar button:hover, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:hover, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:hover, layouttabbar button:hover, filechooser #pathbarbox > stack > box > button:hover, messagedialog.csd .dialog-action-box button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action), popover.background.menu button:hover, popover.background button.model:hover, .caja-pathbar button:hover, .path-bar.linked:not(.vertical) > button:hover, .nemo-window .primary-toolbar button:hover:not(.text-button), headerbar button:hover:not(.suggested-action):not(.destructive-action), toolbar button:hover, combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); color: white; } .budgie-session-dialog .linked.horizontal > button:active, .budgie-polkit-dialog .linked.horizontal > button:active, .budgie-run-dialog .linked.horizontal > button:active, .drop-shadow button:active, .budgie-panel button:active, .budgie-popover row button:active, .budgie-settings-window buttonbox.inline-toolbar button:active, #mate-menu button:active, #MatePanelPopupWindow button:active, popover.messagepopover .popover-action-area button:active, tabbox > tab button:active, .gedit-search-slider .linked > button:active, .nautilus-window.background.csd notebook > header tab:checked button.flat:active, .nautilus-window.background.csd notebook > header tab:active button.flat:active, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button:active, placessidebar.sidebar row button.sidebar-button:active, calendar.button:active, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) button.circular:active, .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable button.circular:active, treeview.view header button button.circular:active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button button.circular:active, filechooser stack.view scrolledwindow treeview.view header button button.circular:active, row.activatable button.circular:active, check:active, radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, spinbutton.vertical button:active, spinbutton:not(.vertical) button:active, modelbutton.flat:active, .menuitem.button.flat:active, .nemo-window .toolbar button:active, #buttonbox_frame button:active, .xfce4-panel.background button:active, .raven stackswitcher.linked > button:active, .lock-dialog button:active, .mate-panel-menu-bar button:active, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:active, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:active, layouttabbar button:active, filechooser #pathbarbox > stack > box > button:active, messagedialog.csd .dialog-action-box button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action), popover.background.menu button:active, popover.background button.model:active, .caja-pathbar button:active, .path-bar.linked:not(.vertical) > button:active, .nemo-window .primary-toolbar button:active:not(.text-button), headerbar button:active:not(.suggested-action):not(.destructive-action), toolbar button:active, combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: 0% 0%; color: white; } .budgie-session-dialog .linked.horizontal > button:disabled, .budgie-polkit-dialog .linked.horizontal > button:disabled, .budgie-run-dialog .linked.horizontal > button:disabled, .drop-shadow button:disabled, .budgie-panel button:disabled, .budgie-popover row button:disabled, .budgie-settings-window buttonbox.inline-toolbar button:disabled, #mate-menu button:disabled, #MatePanelPopupWindow button:disabled, popover.messagepopover .popover-action-area button:disabled, tabbox > tab button:disabled, .gedit-search-slider .linked > button:disabled, .nautilus-window.background.csd notebook > header tab:checked button.flat:disabled, .nautilus-window.background.csd notebook > header tab:active button.flat:disabled, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button:disabled, placessidebar.sidebar row button.sidebar-button:disabled, calendar.button:disabled, .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) button.circular:disabled, .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable button.circular:disabled, treeview.view header button button.circular:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button button.circular:disabled, filechooser stack.view scrolledwindow treeview.view header button button.circular:disabled, row.activatable button.circular:disabled, check:disabled, radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, spinbutton.vertical button:disabled, spinbutton:not(.vertical) button:disabled, modelbutton.flat:disabled, .menuitem.button.flat:disabled, .nemo-window .toolbar button:disabled, #buttonbox_frame button:disabled, .xfce4-panel.background button:disabled, .raven stackswitcher.linked > button:disabled, .lock-dialog button:disabled, .mate-panel-menu-bar button:disabled, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:disabled, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:disabled, layouttabbar button:disabled, filechooser #pathbarbox > stack > box > button:disabled, messagedialog.csd .dialog-action-box button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action), popover.background.menu button:disabled, popover.background button.model:disabled, .caja-pathbar button:disabled, .path-bar.linked:not(.vertical) > button:disabled, .nemo-window .primary-toolbar button:disabled:not(.text-button), headerbar button:disabled:not(.suggested-action):not(.destructive-action), toolbar button:disabled, combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } .nemo-window .toolbar button:checked, #buttonbox_frame button:checked, .xfce4-panel.background button:checked, .raven stackswitcher.linked > button:checked, .lock-dialog button:checked, .mate-panel-menu-bar button:checked, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:checked, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:checked, layouttabbar button:checked, filechooser #pathbarbox > stack > box > button:checked, messagedialog.csd .dialog-action-box button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action), popover.background.menu button:checked, popover.background button.model:checked, .caja-pathbar button:checked, .path-bar.linked:not(.vertical) > button:checked, .nemo-window .primary-toolbar button:checked:not(.text-button), headerbar button:checked:not(.suggested-action):not(.destructive-action), toolbar button:checked, combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover { background-color: alpha(currentColor, 0.1); color: white; } .nemo-window .toolbar button:checked:disabled, #buttonbox_frame button:checked:disabled, .xfce4-panel.background button:checked:disabled, .raven stackswitcher.linked > button:checked:disabled, .lock-dialog button:checked:disabled, .mate-panel-menu-bar button:checked:disabled, window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:checked:disabled, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar button:checked:disabled, layouttabbar button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, messagedialog.csd .dialog-action-box button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action), popover.background.menu button:checked:disabled, popover.background button.model:checked:disabled, .caja-pathbar button:checked:disabled, .path-bar.linked:not(.vertical) > button:checked:disabled, .nemo-window .primary-toolbar button:checked:disabled:not(.text-button), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), toolbar button:checked:disabled, combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled { background-color: alpha(currentColor, 0.1); color: rgba(255, 255, 255, 0.5); } button.text-button { min-width: 32px; padding-left: 16px; padding-right: 16px; } button.text-button.flat { min-width: 48px; padding-left: 8px; padding-right: 8px; } button.image-button { min-width: 24px; padding: 4px; } button.text-button.image-button { min-width: 24px; padding: 4px; border-radius: 10px; } button.text-button.image-button label:first-child { margin-left: 12px; } button.text-button.image-button label:last-child { margin-right: 12px; } button.text-button.image-button.flat label:first-child { margin-left: 8px; } button.text-button.image-button.flat label:last-child { margin-right: 8px; } button.text-button.image-button image:not(:only-child) { margin: 0 4px; } .linked:not(.vertical) > button.flat:not(:only-child), .linked.vertical > button.flat:not(:only-child) { border-radius: 10px; } .linked:not(.vertical) > button.flat:not(:only-child).image-button:not(.text-button), .linked.vertical > button.flat:not(:only-child).image-button:not(.text-button) { border-radius: 9999px; } .linked:not(.vertical) > button.flat:focus, .linked.vertical > button.flat:focus { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } button.osd { padding: 8px 12px; } button.osd.image-button, button.osd.circular { padding: 8px; } button.osd:disabled { opacity: 0; } button.suggested-action { background-color: #66BB6A; color: white; box-shadow: none; } button.suggested-action:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } button.suggested-action:hover { box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(102, 187, 106, 0.2), 0 4px 3px 0 rgba(102, 187, 106, 0.14), 0 1px 6px 0 rgba(102, 187, 106, 0.12); } button.suggested-action:checked { background-color: #94cf97; } button.suggested-action:checked:hover { box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(102, 187, 106, 0.3), 0 2px 3px -1px rgba(102, 187, 106, 0.24), 0 2px 5px 0 rgba(102, 187, 106, 0.12); } button.suggested-action:focus { box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.35); } button.suggested-action.flat { background-color: transparent; color: #66BB6A; } button.suggested-action.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } button.suggested-action.flat:checked { background-color: rgba(102, 187, 106, 0.3); } button.destructive-action { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); box-shadow: none; } button.destructive-action:disabled { box-shadow: none; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } button.destructive-action:hover { box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(242, 139, 130, 0.2), 0 4px 3px 0 rgba(242, 139, 130, 0.14), 0 1px 6px 0 rgba(242, 139, 130, 0.12); } button.destructive-action:checked { background-color: rgba(182, 105, 98, 0.961); } button.destructive-action:checked:hover { box-shadow: inset 0 0 0 9999px transparent, 0 3px 3px -3px rgba(242, 139, 130, 0.3), 0 2px 3px -1px rgba(242, 139, 130, 0.24), 0 2px 5px 0 rgba(242, 139, 130, 0.12); } button.destructive-action:focus { box-shadow: 0 0 0 2px rgba(242, 139, 130, 0.35); } button.destructive-action.flat { background-color: transparent; color: #F28B82; } button.destructive-action.flat:disabled { box-shadow: none; background-color: transparent; color: rgba(255, 255, 255, 0.3); } button.destructive-action.flat:checked { background-color: rgba(242, 139, 130, 0.3); } .stack-switcher > button > label { margin: 0 -6px; padding: 0 6px; } .stack-switcher > button > image { margin: -3px -6px; padding: 3px 6px; } .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; } .primary-toolbar button { -gtk-icon-shadow: none; } stacksidebar.sidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs-attention 225ms cubic-bezier(0, 0, 0.2, 1) forwards; background-repeat: no-repeat; background-position: right 3px; background-size: 6px 6px; } stacksidebar.sidebar row.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl) { background-position: left 3px; } modelbutton.flat, .menuitem.button.flat { min-height: 24px; padding: 0 8px; border-radius: 6px; color: white; } modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { min-height: 22px; min-width: 22px; padding: 4px; } /********* * Links * *********/ *:link { color: #66BB6A; } *:visited { color: #CE93D8; } button.link:link, button.link:link:focus, button.link:link:hover, button.link:link:active { color: #66BB6A; } button.link:visited, button.link:visited:focus, button.link:visited:hover, button.link:visited:active { color: #CE93D8; } button.link > label { text-decoration-line: underline; } /***************** * GtkSpinButton * *****************/ spinbutton:not(.vertical) { padding: 0; } spinbutton:not(.vertical) entry { min-width: 24px; margin: 0; border-image: none; border-radius: 0; box-shadow: none; background-color: transparent; } spinbutton:not(.vertical) button { border: solid 4px transparent; } spinbutton:not(.vertical) button:focus:not(:hover):not(:active):not(:disabled) { box-shadow: inset 0 0 0 9999px transparent; color: rgba(255, 255, 255, 0.7); } spinbutton:not(.vertical) button.up:dir(ltr), spinbutton:not(.vertical) button.down:dir(rtl) { margin-left: -2px; } spinbutton:not(.vertical) button.up:dir(rtl), spinbutton:not(.vertical) button.down:dir(ltr) { margin-right: -2px; } spinbutton.vertical { padding: 0; } spinbutton.vertical:disabled { color: rgba(255, 255, 255, 0.5); } spinbutton.vertical entry { margin: 0; border-image: none; border-radius: 0; box-shadow: none; background-color: transparent; min-height: 32px; min-width: 36px; padding: 0; } spinbutton.vertical button { padding: 0; border: solid 4px transparent; } spinbutton.vertical button:focus:not(:hover):not(:active) { box-shadow: inset 0 0 0 9999px transparent; color: rgba(255, 255, 255, 0.7); } spinbutton.vertical button.up { margin: 0 2px; } spinbutton.vertical button.down { margin: 0 2px; } treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } treeview spinbutton:not(.vertical) entry { min-height: 0; padding: 1px 2px; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox decoration { transition: none; } combobox button.combo cellview:dir(ltr) { margin-left: 0px; } combobox button.combo cellview:dir(rtl) { margin-right: 0px; } combobox menu menuitem { min-height: 20px; min-width: 40px; padding: 2px 6px; } combobox.linked button:nth-child(2):dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; } combobox.linked button:nth-child(2):dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; } combobox > .linked:not(.vertical) > entry:not(:only-child) { border-radius: 10px; } combobox > .linked:not(.vertical) > entry:not(:only-child):first-child { margin-right: -32px; padding-right: 32px; } combobox > .linked:not(.vertical) > entry:not(:only-child):last-child { margin-left: -32px; padding-left: 32px; } combobox > .linked:not(.vertical) > button:not(:only-child) { min-height: 16px; min-width: 16px; margin: 5px; padding: 3px; border-radius: 10px; } .linked:not(.vertical) > combobox:not(:first-child) > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; } .linked:not(.vertical) > combobox:not(:last-child) > box > button.combo { border-top-right-radius: 0; border-bottom-right-radius: 0; } .linked.vertical > combobox:not(:first-child) > box > button.combo { border-top-left-radius: 0; border-top-right-radius: 0; } .linked.vertical > combobox:not(:last-child) > box > button.combo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } button.combo:only-child { border-radius: 10px; font-weight: normal; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: white; } button.combo:only-child:focus { background-color: alpha(currentColor, 0.08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); } button.combo:only-child:hover { background-color: alpha(currentColor, 0.08); box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } button.combo:only-child:checked { background-color: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px #66BB6A; } button.combo:only-child:disabled { box-shadow: inset 0 0 0 2px transparent; background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } /************ * Toolbars * ************/ toolbar { -GtkWidget-window-dragging: true; padding: 2px; background-color: #212121; } .osd toolbar { background-color: transparent; } frame.documents-dropdown, .app-notification, toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 4px; border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } frame.documents-dropdown:backdrop, .app-notification:backdrop, toolbar.osd:backdrop { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } frame.left.documents-dropdown, .left.app-notification, frame.right.documents-dropdown, .right.app-notification, frame.top.documents-dropdown, .top.app-notification, frame.bottom.documents-dropdown, .bottom.app-notification, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } frame.bottom.documents-dropdown, .bottom.app-notification, toolbar.osd.bottom { box-shadow: none; background-color: transparent; background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4)); } toolbar.horizontal > separator { margin: 2px; } toolbar.vertical > separator { margin: 2px; } toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin: 2px; } toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child), toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child), toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child) { margin-left: 0; } toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child), toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child), toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child) { margin-right: 0; } toolbar:not(.inline-toolbar):not(.osd) spinbutton entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton button { margin: 0; } toolbar:not(.inline-toolbar):not(.osd) switch { margin: 6px 2px; } .inline-toolbar { padding: 4px; border-style: solid; border-width: 0 1px 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #242424; } searchbar > revealer > box, .location-bar { padding: 4px; border-style: solid; border-width: 0 0 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #212121; background-clip: border-box; } searchbar > revealer > box { margin: -6px; } /*************** * Header bars * ***************/ .nemo-window .primary-toolbar button:not(.text-button), headerbar button:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } .nemo-window .primary-toolbar .linked:not(.vertical) > button:not(.text-button), headerbar .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { border-radius: 9999px; } .nemo-window .primary-toolbar button:focus:not(.text-button), headerbar button:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:hover:not(.text-button), headerbar button:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:active:not(.text-button), headerbar button:active:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:checked:not(.text-button), headerbar button:checked:not(.suggested-action):not(.destructive-action) { color: white; } .nemo-window .primary-toolbar button:disabled:not(.text-button), headerbar button:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } .nemo-window .primary-toolbar button:checked:disabled:not(.text-button), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) { background-color: transparent; color: rgba(255, 255, 255, 0.5); } .nemo-window .primary-toolbar button:backdrop:not(.text-button), headerbar button:backdrop:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.5); } .nemo-window .primary-toolbar button:backdrop:focus:not(.text-button), headerbar button:backdrop:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:hover:not(.text-button), headerbar button:backdrop:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:active:not(.text-button), headerbar button:backdrop:active:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } .nemo-window .primary-toolbar button:backdrop:disabled:not(.text-button), headerbar button:backdrop:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } .nemo-window .primary-toolbar button:backdrop:checked:not(.text-button), headerbar button:backdrop:checked:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } .nemo-window .primary-toolbar button:backdrop:checked:disabled:not(.text-button), headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.3); } .nemo-window .primary-toolbar entry, .titlebar entry { background-color: rgba(255, 255, 255, 0.04); color: white; } .nemo-window .primary-toolbar entry:disabled, .titlebar entry:disabled { background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } .nemo-window .primary-toolbar entry image, .titlebar entry image { color: rgba(255, 255, 255, 0.7); } .nemo-window .primary-toolbar entry image:hover, .titlebar entry image:hover, .nemo-window .primary-toolbar entry image:active, .titlebar entry image:active { color: white; } .nemo-window .primary-toolbar entry image:disabled, .titlebar entry image:disabled { color: rgba(255, 255, 255, 0.5); } .titlebar { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 14px 14px 0 0; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #2C2C2C; color: white; } .titlebar:disabled { color: rgba(255, 255, 255, 0.5); } .titlebar:backdrop { background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } .titlebar:backdrop:disabled { color: rgba(255, 255, 255, 0.3); } .titlebar .title { padding: 0 12px; font-weight: bold; } .titlebar .subtitle { padding: 0 12px; font-size: smaller; } .titlebar .subtitle, .titlebar .dim-label { transition: color 75ms cubic-bezier(0, 0, 0.2, 1); color: rgba(255, 255, 255, 0.7); } .titlebar .subtitle:backdrop, .titlebar .dim-label:backdrop { color: rgba(255, 255, 255, 0.5); } .titlebar .titlebar { background-color: transparent; box-shadow: none; } .titlebar headerbar + separator { background-color: rgba(255, 255, 255, 0.12); } .titlebar .linked:not(.vertical) > entry.search { border-radius: 10px; } .titlebar .linked:not(.vertical) > entry.search + button { border-radius: 10px; margin-left: 2px; } .titlebar button.suggested-action:disabled, .titlebar button.destructive-action:disabled { background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); } .titlebar button.toggle { border-radius: 9999px; } .titlebar stackswitcher { border-radius: 9999px; } .titlebar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button { border-radius: 9999px; } .titlebar .path-bar button:not(.suggested-action):not(.destructive-action).text-button { min-width: 0; padding-left: 4px; padding-right: 4px; } .titlebar.selection-mode { transition: background-color 0.1ms 225ms, color 75ms cubic-bezier(0, 0, 0.2, 1); animation: ripple-on-headerbar 225ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); background-color: #66BB6A; color: white; } .titlebar.selection-mode:backdrop { color: rgba(255, 255, 255, 0.7); } .titlebar.selection-mode .subtitle:link { color: white; } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action) { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px; color: white; } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled { color: rgba(255, 255, 255, 0.5); } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px; color: white; } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled { color: rgba(255, 255, 255, 0.5); } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop { color: rgba(255, 255, 255, 0.7); } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:disabled { color: rgba(255, 255, 255, 0.3); } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked { color: rgba(255, 255, 255, 0.7); } .titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked:disabled { color: rgba(255, 255, 255, 0.3); } .titlebar.selection-mode .selection-menu { padding-left: 16px; padding-right: 16px; } .titlebar.selection-mode .selection-menu arrow { -GtkArrow-arrow-scaling: 1; } .titlebar.selection-mode .selection-menu .arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } .titlebar .selection-mode { box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); background-color: #66BB6A; } .tiled .titlebar, .tiled-top .titlebar, .tiled-right .titlebar, .tiled-bottom .titlebar, .tiled-left .titlebar, .maximized .titlebar, .fullscreen .titlebar { border-radius: 0; } .titlebar.default-decoration { min-height: 24px; padding: 4px 2px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); border-radius: 10px 10px 0 0; } .tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration { box-shadow: none; border-radius: 0; } .titlebar.default-decoration button.titlebutton { min-height: 24px; min-width: 24px; margin: 0 2px; padding: 0; } .background:not(.csd) .titlebar.default-decoration button.titlebutton:active { background-size: 1000% 1000%; } .solid-csd .titlebar:dir(rtl), .solid-csd .titlebar:dir(ltr) { border-radius: 0; box-shadow: none; } headerbar { min-height: 40px; padding: 0 4px; } headerbar:not(.titlebar) { box-shadow: none; } box.vertical headerbar { background-color: #2C2C2C; } headerbar entry, headerbar spinbutton, headerbar button { margin-top: 4px; margin-bottom: 4px; } headerbar separator.titlebutton { margin-top: 10px; margin-bottom: 10px; background-color: rgba(255, 255, 255, 0.12); } headerbar switch { margin-top: 8px; margin-bottom: 8px; } headerbar spinbutton button { margin-top: 0; margin-bottom: 0; } headerbar .entry-tag, headerbar .photos-entry-tag, headerbar .documents-entry-tag { margin-top: 5px; margin-bottom: 5px; } headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) { border-radius: 0; margin-top: 0; margin-bottom: 0; min-width: 120px; padding: 0; } headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) > stack > box { padding: 0 8px; } headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) > stack > box.narrow { font-size: 10px; } headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) > stack > box.narrow image { margin-top: 2px; } headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action):focus { box-shadow: none; } headerbar.windowhandle viewswitchertitle > squeezer { margin-top: 0; margin-bottom: 0; background: none; } headerbar.windowhandle viewswitchertitle > squeezer > viewswitcher { margin: 0 0; background: none; } headerbar.windowhandle viewswitchertitle > squeezer > viewswitcher > box.horizontal > button.radio { margin: 0; padding: 0; border-radius: 0; } /************ * Pathbars * ************/ .caja-pathbar button, .path-bar.linked:not(.vertical) > button { padding-left: 4px; padding-right: 4px; border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #66BB6A 0%, transparent 0%) 0 0 0/0 0 0px; border-radius: 10px; } .caja-pathbar button:checked, .path-bar.linked:not(.vertical) > button:checked { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #66BB6A 100%, transparent 0%) 0 0 2/0 0 2px; } .caja-pathbar button:checked, .path-bar.linked:not(.vertical) > button:checked, .path-bar.linked:not(.vertical) > button:checked:disabled { background-color: transparent; } .caja-pathbar button label:not(:only-child):first-child, .path-bar.linked:not(.vertical) > button label:not(:only-child):first-child { margin-left: 0; } .caja-pathbar button label:not(:only-child):last-child, .path-bar.linked:not(.vertical) > button label:not(:only-child):last-child { margin-right: 0; } .caja-pathbar button.text-button, .path-bar.linked:not(.vertical) > button.text-button { min-width: 0; } .caja-pathbar button.slider-button, .path-bar.linked:not(.vertical) > button.slider-button { padding-left: 4px; padding-right: 4px; } /************** * Tree Views * **************/ treeview.view, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view { border-left-color: rgba(255, 255, 255, 0.3); border-top-color: rgba(255, 255, 255, 0.12); } * { -GtkTreeView-horizontal-separator: 4; -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; } treeview.view:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:selected { background-image: image(alpha(currentColor, 0.1)); } treeview.view:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:hover, treeview.view:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:selected { border-radius: 0; } treeview.view.separator, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.separator.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.separator.view { min-height: 5px; color: rgba(255, 255, 255, 0.12); } treeview.view:drop(active), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:drop(active):not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:drop(active) { border-style: solid none; border-width: 9999px; border-color: alpha(currentColor, 0.08); } treeview.view:drop(active).after, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:drop(active).after:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:drop(active).after { border-top-style: none; } treeview.view:drop(active).before, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:drop(active).before:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view:drop(active).before { border-bottom-style: none; } treeview.view.expander, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); -gtk-icon-transform: rotate(-90deg); color: rgba(255, 255, 255, 0.7); } treeview.view.expander:dir(rtl), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:dir(rtl):not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view:dir(rtl) { -gtk-icon-transform: rotate(90deg); } treeview.view.expander:checked, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:checked:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view:checked { -gtk-icon-transform: unset; } treeview.view.expander:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view:hover, treeview.view.expander:active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:active:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view:active { color: white; } treeview.view.expander:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.expander.view:disabled:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.expander.view:disabled { color: rgba(255, 255, 255, 0.3); } treeview.view.progressbar, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.progressbar.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.progressbar.view { border-bottom: 6px solid #66BB6A; box-shadow: none; background-color: transparent; background-image: none; } treeview.view.progressbar:selected:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.progressbar.view:selected:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.progressbar.view:selected:hover { box-shadow: none; } treeview.view.trough, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.trough.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.trough.view { border-bottom: 6px solid rgba(255, 255, 255, 0.12); box-shadow: none; background-color: transparent; background-image: none; } treeview.view.trough:selected:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.trough.view:selected:hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.trough.view:selected:hover { box-shadow: none; } treeview.view header button, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button, filechooser stack.view scrolledwindow treeview.view header button { padding: 2px 6px; border-style: none solid solid none; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); border-radius: 0; background-clip: border-box; } treeview.view header button:not(:focus):not(:hover):not(:active), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button:not(:focus):not(:hover):not(:active), filechooser stack.view scrolledwindow treeview.view header button:not(:focus):not(:hover):not(:active) { color: rgba(255, 255, 255, 0.7); } treeview.view header button, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button, filechooser stack.view scrolledwindow treeview.view header button, treeview.view header button:disabled, filechooser stack.view scrolledwindow treeview.view header button:disabled { background-color: #2C2C2C; } treeview.view header button:last-child, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button:last-child, filechooser stack.view scrolledwindow treeview.view header button:last-child { border-right-style: none; } treeview.view button.dnd, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) button.dnd, filechooser stack.view scrolledwindow treeview.view button.dnd, treeview.view header.button.dnd, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header.button.dnd, filechooser stack.view scrolledwindow treeview.view header.button.dnd { padding: 2px 6px; border-style: none solid solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); border-radius: 0; box-shadow: none; background-color: #2C2C2C; background-clip: border-box; color: #66BB6A; } treeview.view acceleditor > label, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) acceleditor > label, filechooser stack.view scrolledwindow treeview.view acceleditor > label { background-color: #66BB6A; } /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 2px; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); background-color: #2C2C2C; color: white; } menubar:backdrop, .menubar:backdrop { background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } .csd menubar, .csd .menubar { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } menubar > menuitem, .menubar > menuitem { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-height: 20px; padding: 2px 8px; color: rgba(255, 255, 255, 0.7); border-radius: 5px; } menubar > menuitem:hover, .menubar > menuitem:hover { transition: none; background-color: alpha(currentColor, 0.1); color: white; } menubar > menuitem:disabled, .menubar > menuitem:disabled { color: rgba(255, 255, 255, 0.3); } menubar > menuitem label:disabled, .menubar > menuitem label:disabled { color: inherit; } .background.popup { background-color: transparent; } menu, .menu, .context-menu { margin: 2px; padding: 4px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.16); } .csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 9px; } menu menuitem, .menu menuitem, .context-menu menuitem { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); min-height: 20px; min-width: 40px; padding: 3px 6px; color: white; font: initial; text-shadow: none; border-radius: 5px; } menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { transition: none; background-color: alpha(currentColor, 0.08); color: white; } menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { color: rgba(255, 255, 255, 0.5); } menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 8px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 8px; } menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { color: inherit; } menu .view:selected, menu window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow menu treeview.view:selected:not(.progressbar):not(.trough), menu filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow menu treeview.view:selected, .menu .view:selected, .menu window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .menu treeview.view:selected:not(.progressbar):not(.trough), .menu filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow .menu treeview.view:selected, .context-menu .view:selected, .context-menu window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .context-menu treeview.view:selected:not(.progressbar):not(.trough), .context-menu filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow .context-menu treeview.view:selected { background-color: #505050; } menu > arrow, .menu > arrow, .context-menu > arrow { min-height: 16px; min-width: 16px; padding: 3px; background-color: #3C3C3C; color: rgba(255, 255, 255, 0.7); border-radius: 6px; } menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); border-image: image(rgba(255, 255, 255, 0.12)) 0 0 1/0 0 1px; } menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-top: 8px; margin-bottom: -6px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); border-image: image(rgba(255, 255, 255, 0.12)) 1 0 0/1px 0 0; } menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { background-image: image(alpha(currentColor, 0.08)); color: white; border-image: none; } menu > arrow:disabled, .menu > arrow:disabled, .context-menu > arrow:disabled { border-color: transparent; background-color: transparent; color: transparent; } menu separator, .menu separator, .context-menu separator { margin: 3px 0; } menuitem accelerator { color: rgba(255, 255, 255, 0.7); } menuitem:disabled accelerator { color: rgba(255, 255, 255, 0.3); } /************ * Popovers * ************/ popover.background { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 2px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-color: #3C3C3C; } popover.background:backdrop { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } popover.background, .csd popover.background { border-style: solid; border-width: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-radius: 10px; } popover.background.combo { padding: 4px; } popover.background.combo > scrolledwindow > viewport.frame > list > row.activatable { border-radius: 6px; margin: 2px; padding: 4px; } popover.background > stack { margin: -4px; } popover.background > toolbar { margin: -2px; } popover.background > list, popover.background > .view, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow popover.background > treeview.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow popover.background > treeview.view, popover.background > toolbar { border-style: none; box-shadow: none; background-color: transparent; } popover.background list, popover.background .view:not(:selected), popover.background window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow popover.background treeview.view:not(:selected):not(.progressbar):not(.trough), popover.background filechooser stack.view scrolledwindow treeview.view:not(:selected), filechooser stack.view scrolledwindow popover.background treeview.view:not(:selected), popover.background toolbar { background-color: #3C3C3C; } popover.background .linked > button:not(.radio) { border-radius: 10px; } popover.background .linked > button:not(.radio):first-child { border-radius: 10px; } popover.background .linked > button:not(.radio):last-child { border-radius: 10px; } popover.background .linked > button:not(.radio):only-child { border-radius: 10px; } popover.background.menu button, popover.background button.model { min-height: 32px; padding: 0 8px; border-radius: 10px; } popover.background separator { margin: 4px 0; } popover.background list separator { margin: 0; } /************* * Notebooks * *************/ tabbox > tab, notebook > header tab { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; min-height: 22px; min-width: 22px; padding: 4px 12px; border-width: 1px; border-color: transparent; border-style: solid; outline: none; background-clip: padding-box; color: rgba(255, 255, 255, 0.7); font-weight: 500; } tabbox > tab:hover, notebook > header tab:hover { background-color: rgba(255, 255, 255, 0.04); color: white; } tabbox > tab:disabled, notebook > header tab:disabled { color: rgba(255, 255, 255, 0.3); } tabbox > tab:checked, notebook > header tab:checked { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); background-color: #2C2C2C; background-clip: padding-box; border-color: #404040; color: white; } tabbox > tab:checked:disabled, notebook > header tab:checked:disabled { color: rgba(255, 255, 255, 0.5); } tabbox > tab:checked.reorderable-page, notebook > header tab:checked.reorderable-page { background-color: #2C2C2C; } notebook { background-color: #2C2C2C; } frame > paned > notebook > header, notebook.frame > header { background-color: #242424; } .background.csd notebook, .background.csd notebook.frame { background-color: #2C2C2C; border-radius: 10px; } notebook.frame frame > border { border: none; border-radius: 10px; } notebook.frame frame > list row.activatable { border-radius: 10px; } notebook:focus tab:checked { box-shadow: none; } notebook > header.top > tabs > tab { border-radius: 5px 5px 0 0; } notebook > header.bottom > tabs > tab { border-radius: 0 0 5px 5px; } notebook > header.left > tabs > tab { border-radius: 5px 0 0 5px; } notebook > header.right > tabs > tab { border-radius: 0 5px 5px 0; } .background.csd notebook > header.top { border-radius: 10px 10px 0 0; } .background.csd notebook > header.top > tabs > tab { border-radius: 10px 10px 0 0; } .background.csd notebook > header.bottom { border-radius: 0 0 10px 10px; } .background.csd notebook > header.bottom > tabs > tab { border-radius: 0 0 10px 10px; } .background.csd notebook > header.left { border-radius: 10px 0 0 10px; } .background.csd notebook > header.left > tabs > tab { border-radius: 10px 0 0 10px; } .background.csd notebook > header.right { border-radius: 0 10px 10px 0; } .background.csd notebook > header.right > tabs > tab { border-radius: 0 10px 10px 0; } notebook > header { border-width: 1px; border-color: #404040; background-color: #212121; background-clip: border-box; } notebook > header.top { border-bottom-style: solid; } notebook > header.top > tabs { margin-bottom: -1px; margin-top: 4px; } notebook > header.top > tabs > tab { border-bottom: none; } notebook > header.bottom { border-top-style: solid; } notebook > header.bottom > tabs { margin-top: -1px; margin-bottom: 4px; } notebook > header.bottom > tabs > tab { border-top: none; } notebook > header.left { border-right-style: solid; } notebook > header.left > tabs { margin-left: 4px; margin-right: -1px; } notebook > header.left > tabs > tab { border-right: none; } notebook > header.right { border-left-style: solid; } notebook > header.right > tabs { margin-left: -1px; margin-right: 4px; } notebook > header.right > tabs > tab { border-left: none; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { margin-left: -8px; -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { margin-right: -8px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { margin-top: -8px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { margin-bottom: -8px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; } notebook > header tab > box { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); margin: -4px -12px; padding: 4px 12px; } notebook > header tab > box:drop(active) { background-color: rgba(255, 255, 255, 0.12); color: white; } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -8px; } notebook > header tab button.flat:first-child { margin-left: -8px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 8px; padding-right: 8px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: 0; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: 0; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 8px; padding-bottom: 8px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: 0; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: 0; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid; } notebook > stack:not(:only-child) { background-color: transparent; border-radius: 10px; } /************** * Scrollbars * **************/ scrollbar { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); background-color: #2C2C2C; } * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } scrollbar.top { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.left { border-right: 1px solid rgba(255, 255, 255, 0.12); } scrollbar.right { border-left: 1px solid rgba(255, 255, 255, 0.12); } scrollbar slider { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 8px; min-height: 8px; border: 4px solid transparent; border-radius: 9999px; background-clip: padding-box; background-color: rgba(255, 255, 255, 0.5); } scrollbar slider:hover { background-color: rgba(255, 255, 255, 0.7); } scrollbar slider:active { background-color: white; } scrollbar slider:disabled { background-color: rgba(255, 255, 255, 0.3); } scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } scrollbar.fine-tune.horizontal slider { margin: 2px 0; } scrollbar.fine-tune.vertical slider { margin: 0 2px; } scrollbar.overlay-indicator:not(.fine-tune) slider { transition-property: background-color, min-height, min-width; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { min-width: 4px; min-height: 4px; margin: 3px; border: 1px solid rgba(44, 44, 44, 0.3); } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 4px; min-height: 4px; margin: 3px; border: 1px solid rgba(44, 44, 44, 0.3); border-radius: 9999px; background-color: rgba(255, 255, 255, 0.5); background-clip: padding-box; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled { background-color: rgba(255, 255, 255, 0.3); } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { min-width: 24px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { min-width: 8px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { min-height: 24px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { min-height: 8px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { background-color: rgba(60, 60, 60, 0.9); } scrollbar.horizontal slider { min-width: 24px; } scrollbar.vertical slider { min-height: 24px; } scrollbar button { min-width: 16px; min-height: 16px; padding: 0; border-radius: 0; } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } /********** * Switch * **********/ switch { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); margin: 4px 0; padding: 0 2px; border: 5px solid transparent; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.3); background-clip: padding-box; font-size: 0; } switch:checked { background-color: rgba(102, 187, 106, 0.5); } switch:disabled { opacity: 0.5; } switch image { margin: -8px; -gtk-icon-transform: scale(0); } switch slider { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 20px; min-height: 20px; margin: -3px -2px; border-radius: 9999px; outline: none; box-shadow: 0 0 0 10px transparent, 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); background-color: #3C3C3C; } switch:focus slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:hover slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.08), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:focus:hover slider { box-shadow: 0 0 0 10px alpha(currentColor, 0.16), 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } switch:checked slider { background-color: #66BB6A; color: #66BB6A; } /************************* * Check and Radio items * *************************/ .view.content-view.check:not(list), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.content-view.check.view:not(list):not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.content-view.check.view:not(list), filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.check.view:not(list):not(.progressbar):not(.trough), .content-view .tile check:not(list) { min-height: 40px; min-width: 40px; margin: 0; padding: 0; box-shadow: none; background-color: transparent; background-image: none; -gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); } .view.content-view.check:not(list):hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.content-view.check.view:not(list):hover:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.content-view.check.view:not(list):hover, filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.check.view:not(list):hover:not(.progressbar):not(.trough), .view.content-view.check:not(list):active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.content-view.check.view:not(list):active:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.content-view.check.view:not(list):active, filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.check.view:not(list):active:not(.progressbar):not(.trough), .content-view .tile check:not(list):hover, .content-view .tile check:not(list):active { -gtk-icon-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 3px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12); } .view.content-view.check:not(list), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.content-view.check.view:not(list):not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.content-view.check.view:not(list), filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.check.view:not(list):not(.progressbar):not(.trough), .content-view .tile check:not(list) { -gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-unchecked-dark.png"), url("assets/selectionmode-checkbox-unchecked-dark@2.png")); } .view.content-view.check:not(list):checked, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.content-view.check.view:not(list):checked:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.content-view.check.view:not(list):checked, filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.check.view:not(list):checked:not(.progressbar):not(.trough), .content-view .tile check:not(list):checked { -gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox-checked-dark.png"), url("assets/selectionmode-checkbox-checked-dark@2.png")); } checkbutton, radiobutton { outline: none; } checkbutton.text-button, radiobutton.text-button { padding: 2px; } checkbutton.text-button label:not(:only-child), radiobutton.text-button label:not(:only-child) { margin: 0 4px; } check, radio { min-height: 24px; min-width: 24px; margin: -8px; padding: 8px; } check:checked, check:indeterminate, radio:checked, radio:indeterminate { color: #81C995; } check:checked:disabled, check:indeterminate:disabled, radio:checked:disabled, radio:indeterminate:disabled { color: rgba(255, 255, 255, 0.3); } check:not(:hover):focus, radio:not(:hover):focus { box-shadow: inset 0 0 0 9999px transparent; } popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled { transition: none; box-shadow: none; background-image: none; } popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) { color: rgba(255, 255, 255, 0.7); } popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) { margin-left: -12px; margin-right: -4px; } popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) { margin-left: -4px; margin-right: -12px; } menu menuitem check, menu menuitem radio { transition: none; margin: 0; padding: 0; } menu menuitem check:dir(ltr), menu menuitem radio:dir(ltr) { margin-right: 8px; } menu menuitem check:dir(rtl), menu menuitem radio:dir(rtl) { margin-left: 8px; } menu menuitem check:not(:checked):not(:indeterminate):not(:disabled), menu menuitem radio:not(:checked):not(:indeterminate):not(:disabled) { color: rgba(255, 255, 255, 0.7); } menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { box-shadow: none; } check { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")); } check:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); } check:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); } radio { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")); } radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); } radio:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); } #MozillaGtkWidget > widget > checkbutton > check, menu menuitem check { min-height: 16px; min-width: 16px; border-radius: 10px; -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")); } #MozillaGtkWidget > widget > checkbutton > check:checked, menu menuitem check:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); } #MozillaGtkWidget > widget > checkbutton > check:indeterminate, menu menuitem check:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); } #MozillaGtkWidget > widget > radiobutton > radio, menu menuitem radio { min-height: 16px; min-width: 16px; border-image: none; -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")); } #MozillaGtkWidget > widget > radiobutton > radio:checked, menu menuitem radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); } #MozillaGtkWidget > widget > radiobutton > radio:indeterminate, menu menuitem radio:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); } treeview.view check, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check, filechooser stack.view scrolledwindow treeview.view check, treeview.view radio, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio, filechooser stack.view scrolledwindow treeview.view radio { padding: 0; } treeview.view check:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:hover, filechooser stack.view scrolledwindow treeview.view check:hover, treeview.view check:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:selected, filechooser stack.view scrolledwindow treeview.view check:selected, treeview.view radio:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:hover, filechooser stack.view scrolledwindow treeview.view radio:hover, treeview.view radio:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:selected, filechooser stack.view scrolledwindow treeview.view radio:selected { box-shadow: none; background-color: transparent; } treeview.view check, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check, filechooser stack.view scrolledwindow treeview.view check, treeview.view radio, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio, filechooser stack.view scrolledwindow treeview.view radio { color: rgba(255, 255, 255, 0.7); } treeview.view check:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:hover, filechooser stack.view scrolledwindow treeview.view check:hover, treeview.view check:active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:active, filechooser stack.view scrolledwindow treeview.view check:active, treeview.view radio:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:hover, filechooser stack.view scrolledwindow treeview.view radio:hover, treeview.view radio:active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:active, filechooser stack.view scrolledwindow treeview.view radio:active { color: white; } treeview.view check:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:disabled, filechooser stack.view scrolledwindow treeview.view check:disabled, treeview.view radio:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:disabled, filechooser stack.view scrolledwindow treeview.view radio:disabled { color: rgba(255, 255, 255, 0.3); } treeview.view check:checked, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:checked, filechooser stack.view scrolledwindow treeview.view check:checked, treeview.view check:indeterminate, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:indeterminate, filechooser stack.view scrolledwindow treeview.view check:indeterminate, treeview.view radio:checked, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:checked, filechooser stack.view scrolledwindow treeview.view radio:checked, treeview.view radio:indeterminate, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:indeterminate, filechooser stack.view scrolledwindow treeview.view radio:indeterminate { color: #81C995; } treeview.view check:checked:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:checked:disabled, filechooser stack.view scrolledwindow treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) check:indeterminate:disabled, filechooser stack.view scrolledwindow treeview.view check:indeterminate:disabled, treeview.view radio:checked:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:checked:disabled, filechooser stack.view scrolledwindow treeview.view radio:checked:disabled, treeview.view radio:indeterminate:disabled, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:indeterminate:disabled, filechooser stack.view scrolledwindow treeview.view radio:indeterminate:disabled { color: rgba(255, 255, 255, 0.3); } treeview.view radio:checked, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) radio:checked, filechooser stack.view scrolledwindow treeview.view radio:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); border-image: none; } --------------------------------------------------------- End Part 2

[ajowens001]

gtk-3.0 / gtk-dark.css (Part 3)

--------------------------------------------------------- /************ * GtkScale * ************/ scale { min-height: 2px; min-width: 2px; } scale.horizontal { padding: 15px 12px; } scale.vertical { padding: 12px 15px; } scale slider { min-height: 32px; min-width: 32px; margin: -15px; } scale.fine-tune.horizontal { min-height: 4px; padding-top: 14px; padding-bottom: 14px; } scale.fine-tune.vertical { min-width: 4px; padding-left: 14px; padding-right: 14px; } scale.fine-tune slider { margin: -14px; } scale trough { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); outline: none; background-color: rgba(255, 255, 255, 0.3); } scale trough:disabled { background-color: rgba(255, 255, 255, 0.12); } scale highlight { transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1); background-image: image(#66BB6A); } scale highlight:disabled { background-color: #212121; background-image: image(rgba(255, 255, 255, 0.3)); } scale fill { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); background-color: rgba(255, 255, 255, 0.3); } scale fill:disabled { background-color: transparent; } scale slider { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); background-repeat: no-repeat; background-position: center; background-size: auto, 1000% 1000%; border-radius: 50%; color: #66BB6A; } scale slider { background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale slider:disabled { background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale slider:focus { background-color: alpha(currentColor, 0.08); } scale slider:hover { background-color: alpha(currentColor, 0.08); } scale slider:focus:hover { background-color: alpha(currentColor, 0.16); } scale slider:active { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%; } scale marks, scale value { color: rgba(255, 255, 255, 0.7); } scale indicator { background-color: rgba(255, 255, 255, 0.3); color: transparent; } scale.horizontal marks.top { margin-bottom: 7px; margin-top: -15px; } scale.horizontal.fine-tune marks.top { margin-bottom: 6px; margin-top: -14px; } scale.horizontal marks.bottom { margin-top: 7px; margin-bottom: -15px; } scale.horizontal.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -14px; } scale.vertical marks.top { margin-right: 7px; margin-left: -15px; } scale.vertical.fine-tune marks.top { margin-right: 6px; margin-left: -14px; } scale.vertical marks.bottom { margin-left: 7px; margin-right: -15px; } scale.vertical.fine-tune marks.bottom { margin-left: 6px; margin-right: -14px; } scale.horizontal indicator { min-height: 8px; min-width: 1px; } scale.vertical indicator { min-height: 1px; min-width: 8px; } scale.horizontal.marks-before:not(.marks-after) slider { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.horizontal.marks-before:not(.marks-after) slider:disabled { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.horizontal.marks-before:not(.marks-after) slider:active { background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); } scale.horizontal.marks-after:not(.marks-before) slider { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.horizontal.marks-after:not(.marks-before) slider:disabled { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.horizontal.marks-after:not(.marks-before) slider:active { background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); } scale.vertical.marks-before:not(.marks-after) slider { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.vertical.marks-before:not(.marks-after) slider:disabled { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.vertical.marks-before:not(.marks-after) slider:active { background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); } scale.vertical.marks-after:not(.marks-before) slider { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.vertical.marks-after:not(.marks-before) slider:disabled { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%); } scale.vertical.marks-after:not(.marks-before) slider:active { background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); } scale.color { min-height: 0; min-width: 0; } scale.color.horizontal { padding: 0 0 12px 0; } scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) { margin-bottom: -24px; margin-top: 8px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.vertical:dir(ltr) slider { margin-left: -24px; margin-right: 8px; } scale.color.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.vertical:dir(rtl) slider { margin-right: -24px; margin-left: 8px; } /***************** * Progress bars * *****************/ progressbar { color: rgba(255, 255, 255, 0.7); font-size: smaller; } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar trough { border-radius: 10px; background-color: rgba(255, 255, 255, 0.12); } progressbar progress { border-radius: 10px; background-color: #66BB6A; } progressbar.osd { min-width: 6px; min-height: 6px; background-color: transparent; } progressbar.osd trough { background-color: transparent; } progressbar.osd progress { background-color: #66BB6A; } progressbar trough.empty progress { all: unset; } /************* * Level Bar * *************/ levelbar.horizontal block { min-height: 6px; } levelbar.horizontal.discrete block { min-width: 32px; } levelbar.horizontal.discrete block:not(:last-child) { margin-right: 2px; } levelbar.vertical block { min-width: 6px; } levelbar.vertical.discrete block { min-height: 32px; } levelbar.vertical.discrete block:not(:last-child) { margin-bottom: 2px; } levelbar trough { border-radius: 10px; } levelbar block.low { background-color: #FDD633; } levelbar block.high, levelbar block:not(.empty) { background-color: #66BB6A; } levelbar block.full { background-color: #81C995; } levelbar block.empty { background-color: rgba(255, 255, 255, 0.12); } /**************** * Print dialog * *****************/ printdialog paper { padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; color: white; } printdialog .dialog-action-box { margin: 12px; } /********** * Frames * **********/ frame > border, .frame { margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; box-shadow: none; } frame > border.view, .frame.view, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.frame.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.frame.view { border-radius: 10px; } frame > border.flat, .frame.flat { border-style: none; } frame.flat > border, statusbar frame > border { border: none; } actionbar > revealer > box { padding: 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; background-clip: border-box; } .background.csd box.vertical > actionbar > revealer > box { border-radius: 0 0 14px 14px; } scrolledwindow viewport.frame { border: none; } stack scrolledwindow.frame viewport.frame list { border: none; } overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.75, to(rgba(255, 255, 255, 0.04)), to(transparent)); background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.75, to(rgba(255, 255, 255, 0.04)), to(transparent)); background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.75, to(rgba(255, 255, 255, 0.04)), to(transparent)); background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.75, to(rgba(255, 255, 255, 0.04)), to(transparent)); background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } junction { border-style: solid none none solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #2C2C2C; } junction:dir(rtl) { border-style: solid solid none none; } separator { min-width: 1px; min-height: 1px; background-color: rgba(255, 255, 255, 0.12); } preferences stacksidebar.sidebar list separator, .tweak-categories separator, stacksidebar.sidebar + separator.vertical, stacksidebar.sidebar separator.horizontal, button.font separator, button.file separator { min-width: 0; min-height: 0; background-color: transparent; } /********* * Lists * *********/ list { border-color: rgba(255, 255, 255, 0.12); background-color: #2C2C2C; } list row { padding: 2px; } .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item), .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable, treeview.view header button, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button, filechooser stack.view scrolledwindow treeview.view header button, row.activatable { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); outline: none; box-shadow: inset 0 0 0 9999px transparent; background-image: radial-gradient(circle, transparent 10%, transparent 0%); background-repeat: no-repeat; background-position: center; background-size: 1000% 1000%; } .budgie-popover.budgie-menu button.flat:focus:not(.image-button):not(.indicator-item), .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable:focus, treeview.view header button:focus, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button:focus, filechooser stack.view scrolledwindow treeview.view header button:focus, row.activatable:focus { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } .budgie-popover.budgie-menu button.flat:hover:not(.image-button):not(.indicator-item), .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable:hover, treeview.view header button:hover, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button:hover, filechooser stack.view scrolledwindow treeview.view header button:hover, row.activatable:hover { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms, background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } .budgie-popover.budgie-menu button.has-open-popup.flat:not(.image-button):not(.indicator-item), .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.has-open-popup.activatable, treeview.view header button.has-open-popup, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button.has-open-popup, filechooser stack.view scrolledwindow treeview.view header button.has-open-popup, .budgie-popover.budgie-menu button.flat:active:not(.image-button):not(.indicator-item), .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable:active, treeview.view header button:active, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) header button:active, filechooser stack.view scrolledwindow treeview.view header button:active, row.activatable.has-open-popup, row.activatable:active { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: 0% 0%; } row:selected { color: inherit; } row:selected image, row:selected label { color: white; } row:selected button image, row:selected button label { color: inherit; } row:selected:disabled image, row:selected:disabled label { color: rgba(255, 255, 255, 0.5); } /********************* * App Notifications * *********************/ .app-notification { margin: 8px; } .app-notification button.text-button:not(:disabled) { color: #66BB6A; } .app-notification.frame, .app-notification border { border-style: none; } /************* * Expanders * *************/ expander title > arrow { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); -gtk-icon-transform: rotate(-90deg); color: rgba(255, 255, 255, 0.7); } expander title > arrow:dir(rtl) { -gtk-icon-transform: rotate(90deg); } expander title > arrow:checked { -gtk-icon-transform: unset; } expander title > arrow:hover, expander title > arrow:active { color: white; } expander title > arrow:disabled { color: rgba(255, 255, 255, 0.3); } /************ * Calendar * ************/ calendar { padding: 1px; border: 1px solid rgba(255, 255, 255, 0.12); color: white; } calendar:disabled { color: rgba(255, 255, 255, 0.5); } calendar:selected { border-radius: 11px; } calendar.header { border-style: none none solid; border-color: rgba(255, 255, 255, 0.12); border-radius: 0; } calendar.highlight { color: rgba(255, 255, 255, 0.7); font-weight: 500; } calendar:indeterminate { color: rgba(255, 255, 255, 0.3); } /*********** * Dialogs * ***********/ messagedialog.background { background-color: #3C3C3C; } messagedialog .titlebar { min-height: 22px; border-style: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; color: white; } messagedialog .titlebar:backdrop { background-color: #3C3C3C; color: rgba(255, 255, 255, 0.7); } messagedialog.csd.background { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } messagedialog.csd .dialog-action-box { margin-top: -4px; } messagedialog.csd .dialog-action-box button, messagedialog.csd .dialog-action-box button:first-child, messagedialog.csd .dialog-action-box button:last-child { border-radius: 9999px; } messagedialog.csd .dialog-action-box button:not(:last-child) { margin-right: 4px; } messagedialog.csd .dialog-action-box button:not(:disabled) { color: #66BB6A; } messagedialog.csd .dialog-action-box button.destructive-action:not(:disabled) { color: #F28B82; } .csd filechooser { background-color: #2C2C2C; border-radius: 0 0 14px 14px; } filechooser .dialog-action-box { border-top: 1px solid rgba(255, 255, 255, 0.12); } filechooser #pathbarbox { border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #212121; } filechooser stack.view { background-color: transparent; } filechooser stack.view scrolledwindow { background-color: transparent; border-radius: 0 0 14px 0; } filechooser stack.view scrolledwindow list { background-color: transparent; } filechooser stack.view scrolledwindow treeview.view, filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough), filechooser stack.view scrolledwindow treeview.view { background-color: transparent; } filechooser stack.view > placesview { background-color: transparent; } filechooser stack.view > placesview > actionbar, filechooser stack.view > placesview > actionbar > revealer > box { background-color: transparent; } filechooser stack.view frame > border { border: none; } .csd filechooser placessidebar { background: none; border-bottom-left-radius: 14px; } filechooser actionbar, filechooser actionbar > revealer > box { background-color: transparent; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; background-color: #242424; } stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left { border-right: 1px solid rgba(255, 255, 255, 0.12); border-left-style: none; } stacksidebar.sidebar:dir(rtl) list, stacksidebar.sidebar.right list, .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid rgba(255, 255, 255, 0.12); border-right-style: none; } .sidebar list { background-color: transparent; } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } stacksidebar.sidebar list { padding: 4px; background-color: #242424; } stacksidebar.sidebar row { min-height: 32px; padding: 0 2px; border-radius: 6px; } stacksidebar.sidebar row:selected { background-color: alpha(currentColor, 0.1); color: #66BB6A; font-weight: 500; } stacksidebar.sidebar row + row { margin-top: 4px; } stacksidebar.sidebar row > label { padding-left: 6px; padding-right: 6px; color: inherit; } separator.sidebar { background-color: rgba(255, 255, 255, 0.12); } /**************** * File chooser * ****************/ row image.sidebar-icon { transition: color 75ms cubic-bezier(0, 0, 0.2, 1); color: rgba(255, 255, 255, 0.7); } row image.sidebar-icon:disabled { color: rgba(255, 255, 255, 0.3); } placessidebar.sidebar > viewport.frame { border-style: none; } placessidebar.sidebar list { padding: 1px 0 4px; } placessidebar.sidebar row { min-height: 32px; margin: -1px 4px -1px 0; padding: 0; border-radius: 0 9999px 9999px 0; } placessidebar.sidebar row > revealer { padding: 0 8px 0 16px; } placessidebar.sidebar row:selected { background-color: alpha(currentColor, 0.1); color: #66BB6A; font-weight: 500; } placessidebar.sidebar row:selected image.sidebar-icon { color: #66BB6A; } placessidebar.sidebar row:disabled { color: rgba(255, 255, 255, 0.5); } placessidebar.sidebar row image.sidebar-icon:dir(ltr) { padding-right: 8px; } placessidebar.sidebar row image.sidebar-icon:dir(rtl) { padding-left: 8px; } placessidebar.sidebar row label.sidebar-label { color: inherit; } placessidebar.sidebar row label.sidebar-label:dir(ltr) { padding-right: 2px; } placessidebar.sidebar row label.sidebar-label:dir(rtl) { padding-left: 2px; } placessidebar.sidebar row.sidebar-placeholder-row { background-color: alpha(currentColor, 0.08); } placessidebar.sidebar row.sidebar-new-bookmark-row { color: #66BB6A; } placessidebar.sidebar row.sidebar-new-bookmark-row image.sidebar-icon { color: #66BB6A; } placessidebar.sidebar row:drop(active) { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms, background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } placesview .server-list-button > image { -gtk-icon-transform: rotate(0turn); } placesview .server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); } placesview > actionbar > revealer > box > label { padding-left: 8px; padding-right: 8px; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(rgba(255, 255, 255, 0.12)); background-size: 1px 1px; background-clip: content-box; } paned > separator.wide { min-width: 6px; min-height: 6px; background-color: #212121; background-image: image(rgba(255, 255, 255, 0.12)), image(rgba(255, 255, 255, 0.12)); background-size: 1px 1px, 1px 1px; } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************** * GtkInfoBar * **************/ infobar { border: none; margin-bottom: 0; } infobar.info > revealer > box, infobar.info:hover > revealer > box, infobar.info:backdrop > revealer > box { background-color: #2C2C2C; } infobar.info > revealer > box button, infobar.info > revealer > box button.text-button:not(:disabled), infobar.info:hover > revealer > box button, infobar.info:hover > revealer > box button.text-button:not(:disabled), infobar.info:backdrop > revealer > box button, infobar.info:backdrop > revealer > box button.text-button:not(:disabled) { color: #66BB6A; } infobar.action > revealer > box, infobar.action:backdrop > revealer > box, infobar.question > revealer > box, infobar.question:backdrop > revealer > box { background-color: #66BB6A; color: white; } infobar.action > revealer > box button, infobar.action > revealer > box button:hover, infobar.action > revealer > box button:focus, infobar.action > revealer > box button:active, infobar.action > revealer > box button:checked, infobar.action > revealer > box button.text-button:not(:disabled), infobar.action:backdrop > revealer > box button, infobar.action:backdrop > revealer > box button:hover, infobar.action:backdrop > revealer > box button:focus, infobar.action:backdrop > revealer > box button:active, infobar.action:backdrop > revealer > box button:checked, infobar.action:backdrop > revealer > box button.text-button:not(:disabled), infobar.question > revealer > box button, infobar.question > revealer > box button:hover, infobar.question > revealer > box button:focus, infobar.question > revealer > box button:active, infobar.question > revealer > box button:checked, infobar.question > revealer > box button.text-button:not(:disabled), infobar.question:backdrop > revealer > box button, infobar.question:backdrop > revealer > box button:hover, infobar.question:backdrop > revealer > box button:focus, infobar.question:backdrop > revealer > box button:active, infobar.question:backdrop > revealer > box button:checked, infobar.question:backdrop > revealer > box button.text-button:not(:disabled) { color: white; } infobar.action > revealer > box *:link, infobar.action:backdrop > revealer > box *:link, infobar.question > revealer > box *:link, infobar.question:backdrop > revealer > box *:link { color: white; } infobar.action:hover > revealer > box, infobar.question:hover > revealer > box { background-color: #54b359; } infobar.warning > revealer > box, infobar.warning:backdrop > revealer > box { background-color: #FDD633; color: rgba(0, 0, 0, 0.87); } infobar.warning > revealer > box button, infobar.warning > revealer > box button:hover, infobar.warning > revealer > box button:focus, infobar.warning > revealer > box button:active, infobar.warning > revealer > box button:checked, infobar.warning > revealer > box button.text-button:not(:disabled), infobar.warning:backdrop > revealer > box button, infobar.warning:backdrop > revealer > box button:hover, infobar.warning:backdrop > revealer > box button:focus, infobar.warning:backdrop > revealer > box button:active, infobar.warning:backdrop > revealer > box button:checked, infobar.warning:backdrop > revealer > box button.text-button:not(:disabled) { color: rgba(0, 0, 0, 0.87); } infobar.warning > revealer > box *:link, infobar.warning:backdrop > revealer > box *:link { color: rgba(0, 0, 0, 0.87); } infobar.warning:hover > revealer > box { background-color: #fdd11a; } infobar.error > revealer > box, infobar.error:backdrop > revealer > box { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } infobar.error > revealer > box button, infobar.error > revealer > box button:hover, infobar.error > revealer > box button:focus, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked, infobar.error > revealer > box button.text-button:not(:disabled), infobar.error:backdrop > revealer > box button, infobar.error:backdrop > revealer > box button:hover, infobar.error:backdrop > revealer > box button:focus, infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error:backdrop > revealer > box button.text-button:not(:disabled) { color: rgba(0, 0, 0, 0.87); } infobar.error > revealer > box *:link, infobar.error:backdrop > revealer > box *:link { color: rgba(0, 0, 0, 0.87); } infobar.error:hover > revealer > box { background-color: #f0766b; } /************ * Tooltips * ************/ tooltip { border-radius: 5px; box-shadow: none; } tooltip.background { background-color: rgba(54, 54, 54, 0.9); color: white; } tooltip.background.csd { border-radius: 10px; } tooltip decoration { background-color: transparent; } tooltip > box { margin: -6px; min-height: 24px; padding: 4px 8px; } /***************** * Color Chooser * *****************/ colorswatch.top { border-top-left-radius: 9px; border-top-right-radius: 9px; } colorswatch.top overlay { border-top-left-radius: 9px; border-top-right-radius: 9px; } colorswatch.bottom { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.bottom overlay { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 9px; border-bottom-left-radius: 9px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 9px; border-bottom-left-radius: 9px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 9px; border-bottom-right-radius: 9px; } colorswatch.dark { color: white; } colorswatch.light { color: rgba(0, 0, 0, 0.87); } colorswatch#add-color-button { border-radius: 9px 9px 0 0; color: white; } colorswatch#add-color-button:only-child { border-radius: 9px; } colorswatch#add-color-button overlay { background-color: #3C3C3C; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { box-shadow: none; } colorswatch#editor-color-sample { border-radius: 9px; } colorswatch#editor-color-sample overlay { border-radius: 9px; } colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } colorchooser .popover.osd:backdrop { box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } /******** * Misc * ********/ .content-view { background-color: #212121; } /********************** * Window Decorations * **********************/ decoration { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 14px; box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent; margin: 8px; } decoration:backdrop { box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { border-radius: 14px 14px 0 0; box-shadow: none; } .csd.popup decoration { border-radius: 10px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } tooltip.csd decoration { border-radius: 10px; box-shadow: none; } messagedialog.csd decoration { border-radius: 14px; } .solid-csd decoration { margin: 0; padding: 2px; border-radius: 0; box-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #2C2C2C; } .solid-csd decoration:backdrop { background-color: #2C2C2C; } .monospace { font-family: monospace; } /********************** * Touch Copy & Paste * **********************/ cursor-handle { color: #66BB6A; -gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg")); } cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { -gtk-icon-transform: rotate(90deg); } cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { -gtk-icon-transform: unset; } cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { padding-top: 6px; -gtk-icon-transform: rotate(45deg); } .context-menu { font: initial; } .keycap { min-width: 12px; min-height: 26px; margin-top: 2px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; border: solid 1px rgba(255, 255, 255, 0.12); border-radius: 11px; box-shadow: inset 0 -2px rgba(255, 255, 255, 0.12); background-color: #3C3C3C; color: white; font-size: smaller; } :not(decoration):not(window):drop(active) { caret-color: #66BB6A; } stackswitcher { min-height: 0; padding: 0; margin: 4px 0; border-radius: 9999px; background-color: alpha(currentColor, 0.05); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { margin: 0 0; border-radius: 9999px; background-color: transparent; } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button { min-width: 100px; } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):focus { box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):active { box-shadow: inset 0 0 0 9999px alpha(#66BB6A, 0.08); background-image: radial-gradient(circle, alpha(#66BB6A, 0.08) 10%, transparent 0%); } stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):checked { background-color: #66BB6A; color: white; } stackswitcher button.text-button { min-width: 100px; } stackswitcher button.circular, stackswitcher button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; } /************* * App Icons * *************/ /********* * Emoji * *********/ popover.emoji-picker { padding: 0; } popover.emoji-picker entry { border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-image: none; border-radius: 0; box-shadow: none; background-color: transparent; } popover.emoji-picker scrolledwindow { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } button.emoji-section { margin: 4px; } button.emoji-section:checked { color: #66BB6A; } button.emoji-section:not(:last-child) { margin-right: 0; } popover.emoji-picker .emoji { min-width: 3em; min-height: 3em; padding: 0 8px; } popover.emoji-picker .emoji widget { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 10px; } popover.emoji-picker .emoji widget:hover { background-color: alpha(currentColor, 0.08); } popover.emoji-completion { padding: 8px 0; } popover.emoji-completion arrow { border: none; background: none; } popover.emoji-completion .emoji-completion-row { min-height: 24px; padding: 0 12px; } popover.emoji-completion .emoji:hover { background-color: alpha(currentColor, 0.08); } /************ * Nautilus * ************/ .nautilus-window.background.csd.unified headerbar { box-shadow: none; } .nautilus-window.background.csd { background-color: #2C2C2C; border-radius: 0 0 14px 14px; } .nautilus-window.background.csd headerbar { padding-left: 12px; background-color: #2C2C2C; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } .nautilus-window.background.csd > grid.horizontal > paned.horizontal > separator, .nautilus-window.background.csd > deck > box.vertical > paned.horizontal > separator { margin-left: 0; } .nautilus-window.background.csd placessidebar { background-color: transparent; border-radius: 14px; color: rgba(255, 255, 255, 0.7); } .nautilus-window.background.csd placessidebar > viewport.frame { margin: 8px 0 12px 12px; border-radius: 8px; background-color: rgba(102, 187, 106, 0.08); } .nautilus-window.background.csd placessidebar > viewport.frame > list { padding: 12px 0 12px 0; background: none; border-radius: 8px; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable { border-radius: 0; margin: -8px 0 -8px 0; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:focus, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:hover, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:active { background-image: none; box-shadow: none; animation: none; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable image.sidebar-icon, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable label.sidebar-label { color: rgba(255, 255, 255, 0.7); } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable image.sidebar-icon { padding-right: 8px; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable label.sidebar-label { color: inherit; min-height: 54px; padding: 0 0 0 4px; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable.sidebar-placeholder-row { background-color: transparent; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:drop(active) { border-radius: 0; border-radius: 9999px 0 0 9999px; background-color: rgba(255, 112, 67, 0.1); } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:drop(active), .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:drop(active) image.sidebar-icon, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:drop(active) label.sidebar-label { color: #FF7043; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:hover image.sidebar-icon, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:hover label.sidebar-label { color: #66BB6A; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected { background-color: transparent; font-weight: 700; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected image.sidebar-icon { color: #66BB6A; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected label.sidebar-label { color: #66BB6A; background-color: #2C2C2C; box-shadow: 4px 0 #2C2C2C; padding: 0 24px 0 14px; border-image-width: 10px 10px 10px 18px; border-image-slice: 10 10 10 18; border-image-repeat: stretch; border-image-source: -gtk-scaled(url("assets/row-selected-dark.png"), url("assets/row-selected-dark@2.png")); } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected revealer.sidebar-revealer { padding-right: 0; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:selected button.sidebar-button { margin-right: 8px; margin-left: -32px; color: #66BB6A; } .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:disabled, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:disabled image.sidebar-icon, .nautilus-window.background.csd placessidebar > viewport.frame > list > row.activatable:disabled label.sidebar-label { color: rgba(255, 255, 255, 0.3); } .nautilus-window.background.csd placessidebar > viewport.frame > list > separator { background: none; } .nautilus-window.background.csd placessidebar scrollbar { background: none; border: none; } .nautilus-window.background.csd placessidebar > undershoot.top { background: none; } .nautilus-window.background.csd placessidebar > undershoot.bottom { background: none; } .nautilus-window.background.csd .nautilus-list-view { background-color: transparent; border-radius: 14px; } .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected), .nautilus-window.background.csd .nautilus-list-view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough), .nautilus-window.background.csd .nautilus-list-view filechooser stack.view scrolledwindow treeview.view:not(:hover):not(:active):not(:selected), filechooser stack.view scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected) { background-color: transparent; border-radius: 0; } .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected) > header > button:first-child, .nautilus-window.background.csd .nautilus-list-view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough) > header > button:first-child, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough) > header > button:first-child, .nautilus-window.background.csd .nautilus-list-view filechooser stack.view scrolledwindow treeview.view:not(:hover):not(:active):not(:selected) > header > button:first-child, filechooser stack.view scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected) > header > button:first-child { border-top-left-radius: 14px; } .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected) > header > button:last-child, .nautilus-window.background.csd .nautilus-list-view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough) > header > button:last-child, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected):not(.progressbar):not(.trough) > header > button:last-child, .nautilus-window.background.csd .nautilus-list-view filechooser stack.view scrolledwindow treeview.view:not(:hover):not(:active):not(:selected) > header > button:last-child, filechooser stack.view scrolledwindow .nautilus-window.background.csd .nautilus-list-view treeview.view:not(:hover):not(:active):not(:selected) > header > button:last-child { border-top-right-radius: 14px; } .nautilus-window.background.csd notebook { background: none; margin: 0; } .nautilus-window.background.csd notebook > header { padding: 0 16px; background: none; border-color: #404040; } .nautilus-window.background.csd notebook > header tab { color: rgba(255, 255, 255, 0.7); } .nautilus-window.background.csd notebook > header tab:hover:not(:checked):not(:active) { color: white; background-color: rgba(255, 255, 255, 0.05); } .nautilus-window.background.csd notebook > header tab:disabled { color: rgba(255, 255, 255, 0.3); } .nautilus-window.background.csd notebook > header tab:checked, .nautilus-window.background.csd notebook > header tab:active { color: white; border-color: #404040; } .nautilus-window.background.csd notebook > header tab:checked:disabled, .nautilus-window.background.csd notebook > header tab:active:disabled { color: rgba(255, 255, 255, 0.5); } .nautilus-window.background.csd notebook > stack { background-color: #2C2C2C; border-radius: 12px; } .nautilus-window.background.csd notebook scrolledwindow > .view:not(:selected):not(:hover):not(:checked), .nautilus-window.background.csd notebook window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow > treeview.view:not(:selected):not(:hover):not(:checked):not(.progressbar):not(.trough), .nautilus-window.background.csd notebook filechooser stack.view scrolledwindow > treeview.view:not(:selected):not(:hover):not(:checked), filechooser stack.view .nautilus-window.background.csd notebook scrolledwindow > treeview.view:not(:selected):not(:hover):not(:checked) { background-color: transparent; } .nautilus-window.background.csd notebook scrolledwindow .view:selected, .nautilus-window.background.csd notebook window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), .nautilus-window.background.csd notebook filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view .nautilus-window.background.csd notebook scrolledwindow treeview.view:selected { background-color: #354135; } .nautilus-window.background.csd notebook placesview > stack > frame > scrolledwindow > viewport > list { background-color: transparent; } .nautilus-window.background.csd notebook placesview > actionbar { background-color: transparent; border-radius: 0 0 14px 14px; } .nautilus-window.background.csd notebook placesview > actionbar > revealer > box { background-color: transparent; } .nautilus-window.background.csd paned > separator { background: none; } .nautilus-window.background.csd paned > separator.wide { min-width: 0; min-height: 0; background: none; } .nautilus-window.maximized, .nautilus-window.maximized placessidebar { border-radius: 0; } .nautilus-window .floating-bar { min-height: 22px; padding: 2px; margin: 6px; border-style: none; border-radius: 9999px; background-color: rgba(33, 33, 33, 0.95); } .nautilus-window .floating-bar button { margin: 5px; } .windowhandle .linked.nautilus-path-bar { background-color: rgba(255, 255, 255, 0.04); border-radius: 9999px; margin: 4px 0; } .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) { margin-top: 0; margin-bottom: 0; border-radius: 9999px; } .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir { color: white; } .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:hover, .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:active { background: none; box-shadow: none; } .nautilus-canvas-item.dim-label, .nautilus-list-dim-label { color: rgba(255, 255, 255, 0.7); } .nemo-desktop.nemo-canvas-item, .caja-desktop.caja-canvas-item, .nautilus-desktop.nautilus-canvas-item { color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); } @keyframes nautilus-operations-button-needs-attention { to { background-color: alpha(currentColor, 0.08); } } .nautilus-operations-button-needs-attention { animation: nautilus-operations-button-needs-attention 300ms cubic-bezier(0.4, 0, 0.2, 1) 2 alternate; } .nautilus-operations-button-needs-attention-multiple { animation: nautilus-operations-button-needs-attention 300ms cubic-bezier(0.4, 0, 0.2, 1) 6 alternate; } .path-bar-box { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); margin: 4px 0; border-radius: 9999px; } .path-bar-box button { margin: 0; } .path-bar-box.width-maximized { background-color: rgba(255, 255, 255, 0.04); } .path-bar-box.background.frame { border-style: none; background-color: rgba(255, 255, 255, 0.04); } .path-bar-box .path-bar button label:not(:only-child):first-child { margin-left: 0; } .path-bar-box .path-bar button label:not(:only-child):last-child { margin-right: 0; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) { padding-left: 10px; padding-right: 10px; margin-left: 1px; margin-right: 1px; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) label:not(:only-child):first-child { margin-left: 0; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) label:not(:only-child):last-child { margin-right: 0; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).text-button { min-width: 0; border-radius: 9999px; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).text-button.image-button { border-radius: 9999px; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).text-button.image-button image:not(:only-child) { margin: 0; } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action):last-child:dir(ltr), .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action):first-child:dir(rtl) { background-color: rgba(255, 255, 255, 0.08); } .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action):last-child:dir(ltr):disabled, .path-bar-box .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action):first-child:dir(rtl):disabled { background-color: transparent; color: rgba(255, 255, 255, 0.5); } .disk-space-display.unknown { background-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3); } .disk-space-display.used { background-color: #66BB6A; color: #66BB6A; } .disk-space-display.free { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.12); } .search-information { padding: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; color: white; } .conflict-row:not(:selected) { background-color: #6b5f2e; } .nautilus-window flowboxchild .icon-item-background { padding: 4px; border-radius: 6px; } .nautilus-window flowboxchild:selected { background-color: transparent; } .nautilus-window notebook :not(treeview).view, .nautilus-window notebook window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(treeview):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nautilus-window notebook treeview.view:not(treeview):not(.progressbar):not(.trough), .nautilus-window notebook filechooser stack.view scrolledwindow treeview.view:not(treeview), filechooser stack.view scrolledwindow .nautilus-window notebook treeview.view:not(treeview) { border-radius: 6px; } dialog.background > box.dialog-vbox.vertical > grid.horizontal > scrolledwindow.frame { border-style: none; } dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child { margin: -6px 0 0 -6px; border-top: 1px solid rgba(255, 255, 255, 0.12); } dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child > label { margin: 0 8px; } dialog.background > box.dialog-vbox.vertical > grid.horizontal > box.horizontal:last-child > box > button { border-radius: 0; } .nautilus-window > popover.menu:not(:last-child) { padding: 3px; } .nautilus-window > popover.menu:not(:last-child) > stack > box > box > box { margin-top: -6px; } .nautilus-window > popover.menu:not(:last-child) > stack > box > box > box > box { margin-bottom: -6px; } .nautilus-window > popover.menu:not(:last-child) > stack > box > box > box > box.linked { margin-top: 1px; } .nautilus-window > popover.menu:not(:last-child) separator { margin-bottom: -2px; } .nautilus-menu-sort-heading { margin: 1px 3px; font-weight: 500; } .nautilus-menu-sort-heading:disabled { color: rgba(255, 255, 255, 0.7); } .nautilus-window paned > separator { background-color: #242424; } /********* * gedit * *********/ window.org-gnome-gedit > paned.titlebar > separator { background-color: transparent; } window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > box.horizontal { margin: 4px 0; } window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > scrolledwindow { border-bottom-left-radius: 14px; } window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected), window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > scrolledwindow window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), filechooser stack.view window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned > box.vertical > stack > grid.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected) { background: none; } window.org-gnome-gedit > overlay > box.vertical > paned.gedit-side-panel-paned stack scrolledwindow viewport.frame list.gedit-document-panel { background: none; } .open-document-selector-path-label { color: rgba(255, 255, 255, 0.7); font-size: smaller; } .open-document-selector-match { background-color: #FDD633; color: rgba(0, 0, 0, 0.87); } .gedit-document-panel { background-color: #242424; } .gedit-document-panel row button.flat { margin-top: 8px; margin-bottom: 8px; } .gedit-document-panel-group-row:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.12); } .gedit-side-panel-paned statusbar { border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0 0 14px 14px; } .gedit-search-slider { margin: 4px 4px 8px; } .gedit-search-slider .linked:not(.vertical) > entry { border-radius: 10px; } .gedit-search-slider .linked:not(.vertical) > entry .gedit-search-entry-occurrences-tag { all: unset; color: rgba(255, 255, 255, 0.7); } .gedit-search-slider .linked:not(.vertical) > entry:dir(ltr) { margin-right: -56px; padding-right: 56px; } .gedit-search-slider .linked:not(.vertical) > entry:dir(ltr) .gedit-search-entry-occurrences-tag { margin-left: 4px; } .gedit-search-slider .linked:not(.vertical) > entry:dir(ltr) image.right { margin-right: 0; } .gedit-search-slider .linked:not(.vertical) > entry:dir(rtl) { margin-left: -56px; padding-left: 56px; } .gedit-search-slider .linked:not(.vertical) > entry:dir(rtl) .gedit-search-entry-occurrences-tag { margin-right: 4px; } .gedit-search-slider .linked:not(.vertical) > entry:dir(rtl) image.left { margin-left: 0; } .gedit-search-slider .linked:not(.vertical) > entry:not(.error) { background-color: #3C3C3C; } .gedit-search-slider .linked:not(.vertical) > entry.error ~ button { color: rgba(0, 0, 0, 0.6); } .gedit-search-slider .linked:not(.vertical) > entry.error ~ button:hover, .gedit-search-slider .linked:not(.vertical) > entry.error ~ button:active { color: rgba(0, 0, 0, 0.87); } .gedit-search-slider .linked:not(.vertical) > entry.error ~ button:disabled { color: rgba(0, 0, 0, 0.26); } .gedit-search-slider .linked > button { border: solid 4px transparent; border-radius: 9999px; } .gedit-search-slider .linked > button:last-child:dir(ltr), .gedit-search-slider .linked > button:not(:first-child):dir(rtl) { margin-left: -2px; } .gedit-search-slider .linked > button:first-child:dir(rtl), .gedit-search-slider .linked > button:not(:last-child):dir(ltr) { margin-right: -2px; } frame.gedit-map-frame > border:dir(ltr) { border-style: none none none solid; } frame.gedit-map-frame > border:dir(rtl) { border-style: none solid none none; } /********** * Tweaks * **********/ window.background.csd stack stack stack frame > list, window.background.csd > stack > stack > box > frame > list, window.background.csd > stack > stack > box > box > frame > list, window.background.csd > stack > box > stack > box > frame > list, window.background.csd > stack > box > stack > scrolledwindow > viewport frame > list, window.background.csd > stack > box > stack > box > scrolledwindow > viewport > frame > list, window.background.csd > stack > grid > scrolledwindow > viewport > box > frame > list, window.background.csd > stack > list, window.background.csd > stack > scrolledwindow > viewport > box > list, window.background.csd > box > stack > scrolledwindow > viewport > box > list, preferencesgroup list, .geary-accounts-editor-pane list, window.background.csd.unified > deck > deck > deck list, hdyleaflet list.view, hdyleaflet list.frame, leaflet list.view, leaflet list.frame, box.horizontal > stack.background list.view, box.horizontal > stack.background list.frame, hdyleaflet stack.background scrolledwindow > viewport list, hdyleaflet overlay scrolledwindow > viewport list, leaflet stack.background scrolledwindow > viewport list, leaflet overlay scrolledwindow > viewport list, box.horizontal > stack.background stack.background scrolledwindow > viewport list, box.horizontal > stack.background overlay scrolledwindow > viewport list, hdyleaflet frame:not(.view) list:not(.contacts-contact-list), leaflet frame:not(.view) list:not(.contacts-contact-list), box.horizontal > stack.background frame:not(.view) list:not(.contacts-contact-list), list.tweak-group list, .tweak-group-startup, list.content:not(.conversation-listbox) { border-radius: 11px; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.12); } window.background.csd stack stack stack frame > list row.activatable:first-child, window.background.csd > stack > list row.activatable:first-child, preferencesgroup list row.activatable:first-child, .geary-accounts-editor-pane list row.activatable:first-child, window.background.csd.unified > deck > deck > deck list row.activatable:first-child, hdyleaflet list.view row.activatable:first-child, hdyleaflet list.frame row.activatable:first-child, leaflet list.view row.activatable:first-child, leaflet list.frame row.activatable:first-child, box.horizontal > stack.background list.view row.activatable:first-child, box.horizontal > stack.background list.frame row.activatable:first-child, hdyleaflet stack.background scrolledwindow > viewport list row.activatable:first-child, hdyleaflet overlay scrolledwindow > viewport list row.activatable:first-child, leaflet stack.background scrolledwindow > viewport list row.activatable:first-child, leaflet overlay scrolledwindow > viewport list row.activatable:first-child, box.horizontal > stack.background stack.background scrolledwindow > viewport list row.activatable:first-child, box.horizontal > stack.background overlay scrolledwindow > viewport list row.activatable:first-child, hdyleaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:first-child, leaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:first-child, box.horizontal > stack.background frame:not(.view) list:not(.contacts-contact-list) row.activatable:first-child, list.tweak-group list row.activatable:first-child, .tweak-group-startup row.activatable:first-child, list.content:not(.conversation-listbox) > row:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } window.background.csd stack stack stack frame > list row.activatable:last-child, window.background.csd > stack > list row.activatable:last-child, preferencesgroup list row.activatable:last-child, .geary-accounts-editor-pane list row.activatable:last-child, window.background.csd.unified > deck > deck > deck list row.activatable:last-child, hdyleaflet list.view row.activatable:last-child, hdyleaflet list.frame row.activatable:last-child, leaflet list.view row.activatable:last-child, leaflet list.frame row.activatable:last-child, box.horizontal > stack.background list.view row.activatable:last-child, box.horizontal > stack.background list.frame row.activatable:last-child, hdyleaflet stack.background scrolledwindow > viewport list row.activatable:last-child, hdyleaflet overlay scrolledwindow > viewport list row.activatable:last-child, leaflet stack.background scrolledwindow > viewport list row.activatable:last-child, leaflet overlay scrolledwindow > viewport list row.activatable:last-child, box.horizontal > stack.background stack.background scrolledwindow > viewport list row.activatable:last-child, box.horizontal > stack.background overlay scrolledwindow > viewport list row.activatable:last-child, hdyleaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:last-child, leaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:last-child, box.horizontal > stack.background frame:not(.view) list:not(.contacts-contact-list) row.activatable:last-child, list.tweak-group list row.activatable:last-child, .tweak-group-startup row.activatable:last-child, list.content:not(.conversation-listbox) > row:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } window.background.csd stack stack stack frame > list row.activatable:only-child, window.background.csd > stack > list row.activatable:only-child, preferencesgroup list row.activatable:only-child, .geary-accounts-editor-pane list row.activatable:only-child, window.background.csd.unified > deck > deck > deck list row.activatable:only-child, hdyleaflet list.view row.activatable:only-child, hdyleaflet list.frame row.activatable:only-child, leaflet list.view row.activatable:only-child, leaflet list.frame row.activatable:only-child, box.horizontal > stack.background list.view row.activatable:only-child, box.horizontal > stack.background list.frame row.activatable:only-child, hdyleaflet stack.background scrolledwindow > viewport list row.activatable:only-child, hdyleaflet overlay scrolledwindow > viewport list row.activatable:only-child, leaflet stack.background scrolledwindow > viewport list row.activatable:only-child, leaflet overlay scrolledwindow > viewport list row.activatable:only-child, box.horizontal > stack.background stack.background scrolledwindow > viewport list row.activatable:only-child, box.horizontal > stack.background overlay scrolledwindow > viewport list row.activatable:only-child, hdyleaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:only-child, leaflet frame:not(.view) list:not(.contacts-contact-list) row.activatable:only-child, box.horizontal > stack.background frame:not(.view) list:not(.contacts-contact-list) row.activatable:only-child, list.tweak-group list row.activatable:only-child, .tweak-group-startup row.activatable:only-child, list.content:not(.conversation-listbox) > row:only-child { border-radius: 10px; } window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > list > row.activatable, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > scrolledwindow > viewport.frame > list > row.activatable, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable, hdyleaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable, leaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable, box.horizontal > stack.background > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable { margin-right: 4px; border-radius: 0 9999px 9999px 0; } window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > list > row.activatable:selected, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > scrolledwindow > viewport.frame > list > row.activatable:selected, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable:selected, hdyleaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected, leaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected, box.horizontal > stack.background > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected { background-color: alpha(currentColor, 0.1); color: #66BB6A; } window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > list > row.activatable:selected image, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > scrolledwindow > viewport.frame > list > row.activatable:selected image, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable:selected image, hdyleaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected image, leaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected image, box.horizontal > stack.background > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected image, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > list > row.activatable:selected label, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > scrolledwindow > viewport.frame > list > row.activatable:selected label, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable:selected label, hdyleaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected label, leaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected label, box.horizontal > stack.background > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) row.activatable:selected label { color: #66BB6A; } .tweak-categories { background-image: image(#242424); } .csd .tweak-categories { border-bottom-left-radius: 14px; } .tweak { padding: 3px; } .tweak.title:hover { box-shadow: none; } .tweak-group-white, .tweak-white, .tweak-white:hover { background-image: image(#2C2C2C); } .tweak-startup, .tweak-startup:hover { background-image: image(#2C2C2C); } .tweak-group-startup { background-image: image(#2C2C2C); } .tweak-group-startup row.tweak-startup { border-radius: 10px; background-color: transparent; background-image: none; } row#Focus, row#ClickMethod, row#PrimaryWorkspaceTweak, row#workspaces-only-on-primary { margin-top: 4px; } leaflet.titlebar > .titlebar.tweak-titlebar-left, leaflet.titlebar > .titlebar.tweak-titlebar-right, hdyleaflet.titlebar > .titlebar.tweak-titlebar-left, hdyleaflet.titlebar > .titlebar.tweak-titlebar-right { background-color: inherit; box-shadow: inherit; transition: color 75ms cubic-bezier(0, 0, 0.2, 1); } leaflet.titlebar > .titlebar.tweak-titlebar-left + separator, leaflet.titlebar > .titlebar.tweak-titlebar-right + separator, hdyleaflet.titlebar > .titlebar.tweak-titlebar-left + separator, hdyleaflet.titlebar > .titlebar.tweak-titlebar-right + separator { background-color: inherit; background-image: image(rgba(255, 255, 255, 0.12)); } /************************ * Gnome Control Center * ************************/ window.background.csd > headerbar.titlebar > leaflet > headerbar:first-child:not(:only-child), window.background.csd > headerbar.titlebar > hdyleaflet > headerbar:first-child:not(:only-child) { border-top-left-radius: 14px; } window.background.csd > headerbar.titlebar > leaflet > headerbar:last-child:not(:only-child), window.background.csd > headerbar.titlebar > hdyleaflet > headerbar:last-child:not(:only-child) { border-top-right-radius: 14px; } window.background.csd > headerbar.titlebar > leaflet > headerbar:first-child:only-child, window.background.csd > headerbar.titlebar > leaflet > headerbar:last-child:only-child, window.background.csd > headerbar.titlebar > hdyleaflet > headerbar:first-child:only-child, window.background.csd > headerbar.titlebar > hdyleaflet > headerbar:last-child:only-child { border-top-right-radius: 14px; border-top-left-radius: 14px; } window.background.csd > stack:not(.titlebar) > stack.background { border-radius: 0 0 14px 14px; } window.background.csd > leaflet > stack.background, window.background.csd > hdyleaflet > stack.background, window.background.csd > box.horizontal > stack.background { background: none; } window.background.csd > leaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame, window.background.csd > hdyleaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame, window.background.csd > box.horizontal > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame { background-color: #2C2C2C; border-bottom-right-radius: 14px; } window.background.csd > leaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > box.vertical.view, filechooser stack.view window.background.csd > leaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > treeview.vertical.view, window.background.csd > hdyleaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > box.vertical.view, filechooser stack.view window.background.csd > hdyleaflet > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > treeview.vertical.view, window.background.csd > box.horizontal > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > box.vertical.view, filechooser stack.view window.background.csd > box.horizontal > stack.background > widget > box.vertical > box.vertical > scrolledwindow > viewport.frame > treeview.vertical.view { background: none; } window.background.csd > leaflet > stack.background frame.view, window.background.csd > hdyleaflet > stack.background frame.view, window.background.csd > box.horizontal > stack.background frame.view { border-radius: 10px; background: none; } window.background.csd > leaflet > box.vertical > scrolledwindow.view, window.background.csd > hdyleaflet > box.vertical > scrolledwindow.view, window.background.csd > box.horizontal > box.vertical > scrolledwindow.view { background-color: #2C2C2C; border-bottom-left-radius: 14px; } window.background.csd > leaflet > box.vertical > scrolledwindow.view > viewport.frame > stack, window.background.csd > hdyleaflet > box.vertical > scrolledwindow.view > viewport.frame > stack, window.background.csd > box.horizontal > box.vertical > scrolledwindow.view > viewport.frame > stack { background-color: transparent; } window.background.csd > leaflet > box.vertical > scrolledwindow.view > viewport.frame > stack list, window.background.csd > hdyleaflet > box.vertical > scrolledwindow.view > viewport.frame > stack list, window.background.csd > box.horizontal > box.vertical > scrolledwindow.view > viewport.frame > stack list { background-color: transparent; } window.background.csd > leaflet > box.vertical > scrolledwindow.view > viewport.frame > stack list row.activatable:not(:hover):not(:active):not(:selected), window.background.csd > hdyleaflet > box.vertical > scrolledwindow.view > viewport.frame > stack list row.activatable:not(:hover):not(:active):not(:selected), window.background.csd > box.horizontal > box.vertical > scrolledwindow.view > viewport.frame > stack list row.activatable:not(:hover):not(:active):not(:selected) { background-color: transparent; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical > list { border-top-width: 0; border-bottom-width: 0; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical > list, window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical > list > row { border-radius: 0; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:first-child > list { border-top-width: 1px; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:first-child > list, window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:first-child > list > row { border-radius: 10px 10px 0 0; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:last-child > list { border-bottom-width: 1px; } window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:last-child > list, window.background.csd stack.background clamp.medium frame > box.vertical > box.vertical:last-child > list > row { border-radius: 0 0 10px 10px; } dialog.background.csd > box.vertical.dialog-vbox > notebook > stack > box.horizontal > notebook > stack { border-radius: 0 0 14px 14px; } hdyleaflet frame > border, leaflet frame > border, box.horizontal > stack.background frame > border { border: none; } hdyleaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) > separator, leaflet > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) > separator, box.horizontal > stack.background > box.vertical > scrolledwindow > viewport.frame list:not(.view):not(.tweak-group) > separator { margin: 2px 0; } /************************ * Gnome system monitor * ************************/ window#gnome-system-monitor.background.csd > box.vertical > stack { background-color: #2C2C2C; border-radius: 0 0 14px 14px; } window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) { background: none; } window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > revealer > actionbar > revealer > box { border-radius: 0 0 14px 14px; } window#gnome-system-monitor.background:not(.csd) > box.vertical > headerbar { box-shadow: none; } /************************ * Gnome Sound Recorder * ************************/ stack > grid.vertical > scrolledwindow { border: none; border-radius: 0 0 14px 14px; } stack > grid.vertical > scrolledwindow > viewport.frame list { border-radius: 0 0 14px 14px; } stack > grid.vertical scrolledwindow.frame.emptyGrid { border: none; } /****************** * Gnome Contacts * ******************/ window.background.csd scrolledwindow.contacts-contact-form { border-bottom-right-radius: 14px; } /************************ * Epiphany (Gnome Web) * ************************/ tabbox { background-color: #212121; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); padding: 2px 2px 0; } tabbox > tab { border-radius: 10px 10px 0 0; border-bottom: none; } tabbox > tab button { min-height: 24px; min-width: 24px; border-radius: 9999px; border: none; padding: 0; } /***************** * Gnome Weather * *****************/ #weather-page, #weekly-forecast-frame { border-bottom-right-radius: 14px; } #weather-page-content-view { border-bottom-right-radius: 14px; border-bottom-left-radius: 14px; } statuspage.search-view entry.search:focus { box-shadow: none; } /*************** * Gnome Music * ***************/ window.background.csd box.vertical > overlay > stack.background { border-radius: 0 0 14px 14px; } /**************** * Gnome Clocks * ****************/ window.background.csd.unified { border-top-left-radius: 14px; border-top-right-radius: 14px; } window.background.csd.unified > deck > deck > deck > box.vertical > headerbar.titlebar.windowhandle { border-top-left-radius: 14px; border-top-right-radius: 14px; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); } window.background.csd.unified > deck > deck > deck > box.vertical > headerbar.titlebar.windowhandle > viewswitchertitle > squeezer { margin: 0 0; background: none; } window.background.csd.unified > deck > deck > deck > box.vertical > headerbar.titlebar.windowhandle > viewswitchertitle > squeezer > viewswitcher > box.horizontal > button.radio { margin: 0; padding: 0; border-radius: 0; } /************* * Rhythmbox * *************/ window.background > box.vertical > toolbar.primary-toolbar > toolitem > box.horizontal:not(.linked) > button.toggle, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar > toolitem button.flat.scale, window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button.image-button.raised, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button, window.csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > .linked > button, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal > toolitem > box.horizontal > button { min-height: 24px; min-width: 24px; padding: 4px; margin: 0; } .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button { border-radius: 9999px; } .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:not(:first-child), .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:not(:last-child) { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button.image-button:not(.text-button):first-child { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; } .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button.image-button:not(.text-button):last-child { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button > widget > box > image { padding: 0; } window.csd > box.vertical > box.vertical > toolbar.horizontal, window.solid-csd > box.vertical > box.vertical > toolbar.horizontal { padding: 4px; border-bottom: none; box-shadow: none; background-color: transparent; } window.csd > box.vertical > box.vertical > frame, window.solid-csd > box.vertical > box.vertical > frame { margin: -1px 0; padding: 0; } window.csd > box.vertical > box.vertical > frame > border, window.solid-csd > box.vertical > box.vertical > frame > border { border: none; } window.background > box.vertical > toolbar.primary-toolbar > toolitem > .linked > button.image-button.raised > widget > box > image { padding: 0; } /********** * Polari * **********/ .polari-room-list .sidebar { background: none; } .polari-room-list .sidebar > row.activatable:selected { background-color: #66BB6A; color: white; } stack.view.polari-entry-area { background-color: #212121; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom-right-radius: 14px; } stack:disabled.view.polari-entry-area, filechooser stack.view scrolledwindow treeview.view:disabled.polari-entry-area, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:disabled.polari-entry-area:not(.progressbar):not(.trough) { background-image: image(#212121); } /*********** * Builder * ***********/ layouttabbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #212121; } layouttabbar > box > button { margin: 4px 0; } layouttab { margin: 0 8px; border-style: none solid; border-width: 1px; border-color: rgba(0, 0, 0, 0.16); box-shadow: inset 0 -2px #66BB6A; background-color: #2C2C2C; } layouttab separator.vertical { margin: 8px 4px; } layouttab button.text-button, layouttab button.image-button, layouttab button { margin-top: 8px; margin-bottom: 8px; padding: 0 4px; } layout { border: 1px solid rgba(0, 0, 0, 0.16); -PnlDockBin-handle-size: 1; } entry.search-missing { background-color: #F28B82; color: rgba(0, 0, 0, 0.87); } window.workbench treeview.image { color: rgba(255, 255, 255, 0.7); } popover.popover-selector list { padding: 6px; } popover.popover-selector list row { border-radius: 10px; } popover.popover-selector list row image:dir(ltr) { margin-right: 6px; } popover.popover-selector list row image:dir(rtl) { margin-left: 6px; } popover.popover-selector list row .accel:dir(ltr) { margin-left: 6px; } popover.popover-selector list row .accel:dir(rtl) { margin-right: 6px; } omnibar.linked:not(.vertical) entry { border-radius: 10px; } omnibar:not(:hover):not(:active) entry { color: rgba(255, 255, 255, 0.7); } popover.omnibar list row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } entry.preferences-search { border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; background-color: #2C2C2C; } preferences stacksidebar.sidebar list { background-color: #242424; } preferences stacksidebar.sidebar:dir(ltr) list, preferences stacksidebar.sidebar:dir(rtl) list { border-style: none; } preferences > box > box:dir(ltr) { border-right: 1px solid rgba(255, 255, 255, 0.12); } preferences > box > box:dir(rtl) { border-left: 1px solid rgba(255, 255, 255, 0.12); } popover.messagepopover.background { padding: 0; } popover.messagepopover .popover-action-area button { padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; } popover.messagepopover .popover-action-area button:first-child { border-bottom-left-radius: 10px; } popover.messagepopover .popover-action-area button:last-child { border-bottom-right-radius: 10px; } popover.messagepopover .popover-content-area { margin: 16px; } popover.transfers list { background-color: transparent; } popover.transfers list row:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.12); } popover.transfers list row > box { padding: 10px; } dockbin { border: 1px solid rgba(0, 0, 0, 0.16); -PnlDockBin-handle-size: 1; } dockpaned { border: 1px solid rgba(0, 0, 0, 0.16); } eggsearchbar box.search-bar { padding: 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #212121; } docktabstrip { padding: 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #212121; } docktab { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; min-height: 22px; min-width: 22px; margin-bottom: -1px; padding: 4px 6px; border-width: 1px; border-color: transparent; box-shadow: inset 0 -2px transparent; background-image: radial-gradient(circle, #66BB6A 10%, transparent 0%); background-repeat: no-repeat; background-position: center; background-size: 0% 0%; color: rgba(255, 255, 255, 0.7); font-weight: 500; } docktab:hover { background-color: alpha(currentColor, 0.08); color: white; } docktab:checked { transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 225ms cubic-bezier(0, 0, 0.2, 1), background-image 525ms cubic-bezier(0, 0, 0.2, 1); box-shadow: inset 0 -2px #66BB6A; background-color: transparent; background-image: radial-gradient(circle, transparent 10%, transparent 0%); background-size: 1000% 1000%; color: white; } dockoverlayedge { background-color: #212121; } dockoverlayedge docktabstrip { padding: 0; border: none; } dockoverlayedge.left-edge docktab:checked { box-shadow: inset -2px 0 #66BB6A; } dockoverlayedge.right-edge docktab:checked { box-shadow: inset 2px 0 #66BB6A; } pillbox { background-color: #212121; border-radius: 10px; } layoutpane entry.search { border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; background-color: #2C2C2C; } editortweak entry.search { margin-bottom: -1px; box-shadow: none; background-color: transparent; } .gb-search-entry-occurrences-tag { box-shadow: none; background-color: transparent; } docktabstrip { min-height: 39px; } window.workbench preferences preferencesgroup list entry { padding-top: 8px; padding-bottom: 8px; } button.run-arrow-button { padding-left: 8px; padding-right: 8px; } button.dzlmenubutton image { min-width: 26px; } button.dzlmenubutton image.arrow { min-width: 23px; } button.dzlmenubuttonitem { color: white; font-weight: normal; } button.dzlmenubuttonitem:disabled { color: rgba(255, 255, 255, 0.5); } idelayoutstackheader { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } idelayoutstackheader button:checked { color: white; } ideeditorutilities > dzldockpaned > box > stackswitcher { padding: 8px 0; background-color: #212121; } ideeditorutilities > dzldockpaned > box > stackswitcher:dir(ltr) { border-right: 1px solid rgba(255, 255, 255, 0.12); } ideeditorutilities > dzldockpaned > box > stackswitcher:dir(rtl) { border-left: 1px solid rgba(255, 255, 255, 0.12); } ideeditorutilities > dzldockpaned > box > stackswitcher button { border-radius: 0; box-shadow: none; background-color: transparent; } ideeditorutilities > dzldockpaned > box > stackswitcher button:active { background-image: radial-gradient(circle, rgba(102, 187, 106, 0.7) 10%, transparent 0%); } ideeditorutilities > dzldockpaned > box > stackswitcher button:checked { background-color: transparent; color: white; } ideeditorutilities > dzldockpaned > box > stackswitcher button:dir(ltr) { margin-right: -1px; } ideeditorutilities > dzldockpaned > box > stackswitcher button:dir(ltr):checked { box-shadow: inset -2px 0 #66BB6A; } ideeditorutilities > dzldockpaned > box > stackswitcher button:dir(rtl) { margin-left: -1px; } ideeditorutilities > dzldockpaned > box > stackswitcher button:dir(rtl):checked { box-shadow: inset 2px 0 #66BB6A; } ideeditorsidebar notebook header { background: transparent; } popover.messagepopover list { border: 1px solid rgba(255, 255, 255, 0.12); } popover.messagepopover list row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /********** * Photos * **********/ GdMainIconView.content-view { -GdMainIconView-icon-size: 48; } .documents-counter { margin: 8px; border-radius: 9999px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-color: #66BB6A; color: white; font-weight: bold; } .documents-scrolledwin.frame { border-style: none; } .documents-scrolledwin.frame frame.content-view > border { border-style: none; } .photos-fade-in { opacity: 1; transition: opacity 75ms cubic-bezier(0, 0, 0.2, 1); } .photos-fade-out { opacity: 0; transition: opacity 75ms cubic-bezier(0, 0, 0.2, 1); } button.photos-filter-preview { color: white; font-weight: normal; } button.photos-filter-preview:checked { background-color: alpha(currentColor, 0.06); color: white; } button.photos-filter-preview:checked image { color: white; -gtk-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); } overlay grid.horizontal > revealer > scrolledwindow.frame:dir(ltr) { border-style: none none none solid; } overlay grid.horizontal > revealer > scrolledwindow.frame:dir(rtl) { border-style: none solid none none; } /********* * Music * *********/ .side-panel:dir(ltr) { border-style: solid; border-color: rgba(255, 255, 255, 0.12); } .side-panel:dir(rtl) { border-style: solid; border-color: rgba(255, 255, 255, 0.12); } .side-panel .view, .side-panel filechooser stack.view scrolledwindow treeview.view, filechooser stack.view scrolledwindow .side-panel treeview.view, .side-panel window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .side-panel treeview.view:not(.progressbar):not(.trough) { background-image: image(#242424); } .side-panel .view:hover, .side-panel filechooser stack.view scrolledwindow treeview.view:hover, filechooser stack.view scrolledwindow .side-panel treeview.view:hover, .side-panel window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:hover:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .side-panel treeview.view:hover:not(.progressbar):not(.trough) { background-image: image(#363636); } .side-panel .view:selected, .side-panel filechooser stack.view scrolledwindow treeview.view:selected, filechooser stack.view scrolledwindow .side-panel treeview.view:selected, .side-panel window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .side-panel treeview.view:selected:not(.progressbar):not(.trough) { background-image: image(#66BB6A); } .side-panel .view:selected:hover, .side-panel filechooser stack.view scrolledwindow treeview.view:selected:hover, filechooser stack.view scrolledwindow .side-panel treeview.view:selected:hover, .side-panel window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:hover:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .side-panel treeview.view:selected:hover:not(.progressbar):not(.trough) { background-image: image(#72c076); } .songs-list:hover { background-image: image(alpha(currentColor, 0.08)); } frame.documents-dropdown { margin: 8px; } frame.documents-dropdown > border { border: none; } box.vertical > revealer > toolbar.search-bar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-clip: border-box; } box.vertical > revealer > toolbar.search-bar button > widget { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /************* * Documents * *************/ .documents-scrolledwin { background-color: transparent; } .documents-scrolledwin .content-view:not(:selected):not(:hover) { background-color: transparent; } .documents-scrolledwin viewport.frame { background-color: transparent; } .documents-scrolledwin viewport.frame widget > frame.content-view:not(:selected):not(:hover) { background-color: transparent; } .documents-scrolledwin viewport.frame widget > frame.content-view:not(:selected):not(:hover) border { border: none; } /******************* * Document Viewer * *******************/ window.background.csd > box.vertical > paned.horizontal > box.vertical > scrolledwindow > treeview.view:not(:hover):not(:selected), filechooser stack.view window.background.csd > box.vertical > paned.horizontal > box.vertical > scrolledwindow > treeview.view:not(:hover):not(:selected) { background-color: transparent; } window.background.csd evview.view.content-view { border-radius: 0 0 14px 14px; } /********************************* * Archive Manager (File roller) * *********************************/ window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow { border-radius: 0 0 14px 14px; background-color: #2C2C2C; } window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected), filechooser stack.view window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected), window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough) { background-color: transparent; } window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow > treeview.view:not(:hover):not(:selected), filechooser stack.view window.background.csd > grid.horizontal > paned.horizontal > scrolledwindow > treeview.view:not(:hover):not(:selected) { background-color: #2C2C2C; } window.background.csd > grid.horizontal > paned.horizontal > box.vertical > scrolledwindow { border-radius: 0 0 0 14px; background-color: #212121; } window.background.csd > grid.horizontal > paned.horizontal > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected), filechooser stack.view window.background.csd > grid.horizontal > paned.horizontal > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected), window.background.csd > grid.horizontal > paned.horizontal > box.vertical > scrolledwindow window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.csd > grid.horizontal > paned.horizontal > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough) { background-color: transparent; } /************** * Gnome Disk * **************/ window.background.csd > box.vertical > paned.horizontal > scrolledwindow treeview.view:not(:selected):not(:hover), filechooser stack.view window.background.csd > box.vertical > paned.horizontal > scrolledwindow treeview.view:not(:selected):not(:hover), window.background.csd > box.vertical > paned.horizontal > scrolledwindow window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:selected):not(:hover):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.csd > box.vertical > paned.horizontal > scrolledwindow treeview.view:not(:selected):not(:hover):not(.progressbar):not(.trough) { background-color: transparent; } /************ * Terminal * ************/ terminal-window.background.csd { border-radius: 0 0 0 0; } terminal-window.background.csd.maximized { border-radius: 0 0 0 0; } terminal-window notebook > header > box { margin: -2px -2px -3px; } terminal-window notebook > header > box button { border-radius: 0; } window.background > box.vertical > box.horizontal > frame > border { border-width: 0 1px 0 0; } window.background > box.vertical > box.horizontal > frame > scrolledwindow > viewport.frame list { border-bottom-left-radius: 14px; } window.background > box.vertical > box.horizontal > stack > widget > notebook.frame { border-width: 0; } window.background > box.vertical > box.horizontal > stack > widget > notebook.frame > stack { border-bottom-right-radius: 14px; } /********* * To Do * *********/ task-list-view taskrow { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); margin: 0 -8px; } task-list-view taskrow:hover { transition: none; } task-list-view taskrow label { margin: 0 8px; } task-list-view taskrow image.dim-label { min-width: 16px; } task-list-view > box > revealer > box > button { margin: -4px; } task-list-view > box > revealer > box > button .dim-label { color: inherit; } tasklistview taskrow { outline: none; } tasklistview taskrow entry, tasklistview taskrow entry:focus, tasklistview taskrow entry:disabled { box-shadow: none; } tasklistview taskrow image.dim-label { min-width: 16px; } tasklistview > box > revealer > box > button { margin: -4px; } tasklistview > box > revealer > box > button .dim-label { color: inherit; } /******* * Eog * *******/ #eog-thumb-nav scrolledwindow { border-top: none; } /************* * Evolution * *************/ frame.taskbar > border { border-style: solid none none; } box.vertical > paned.horizontal notebook widget .frame { border-style: none; } /*********** * Fractal * ***********/ .background.csd.main-window .sidebar.rooms-sidebar { border-bottom-left-radius: 14px; } /******** * Gitg * ********/ frame.commit-frame > border { border-style: solid none none; } /************** * Characters * **************/ box.dialog-vbox scrolledwindow.related { border: 1px solid rgba(0, 0, 0, 0.16); } list.categories { background-image: image(#242424); } /********* * Boxes * *********/ .transparent-bg + stack overlay > label { min-height: 24px; padding: 0 4px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.6); color: white; } /************** * Calculator * **************/ button.title label { min-height: 32px; } /********* * Geary * *********/ window.background.csd.geary-main-window box.vertical > paned.horizontal > box.sidebar.vertical, window#GearyMainWindow.background.csd box.vertical > paned.horizontal > box.sidebar.vertical { border-bottom-left-radius: 14px; } window.background.csd.geary-main-window box.vertical > paned.horizontal > box.sidebar.vertical statusbar, window#GearyMainWindow.background.csd box.vertical > paned.horizontal > box.sidebar.vertical statusbar { border-bottom-left-radius: 14px; } window.background.csd.geary-main-window stack#conversation_viewer, window#GearyMainWindow.background.csd stack#conversation_viewer { border-bottom-right-radius: 14px; } window.background.csd.geary-main-window stack#conversation_viewer scrolledwindow.geary-conversation-scroller viewport.frame list.conversation-listbox, window#GearyMainWindow.background.csd stack#conversation_viewer scrolledwindow.geary-conversation-scroller viewport.frame list.conversation-listbox { background: none; border-bottom-right-radius: 14px; } window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded { animation: none; background-image: none; } window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed actionbar > revealer > box, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed actionbar > revealer > box { border-radius: 0; } window.background.csd.geary-main-window stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-expanded > .geary-composer-embed headerbar { color: white; background-color: #212121; box-shadow: none; border-bottom: 1px solid rgba(0, 0, 0, 0.16); } window.background.csd.geary-main-window stack#conversation_viewer .geary-composer-box actionbar > revealer > box, window#GearyMainWindow.background.csd stack#conversation_viewer .geary-composer-box actionbar > revealer > box { border-bottom-left-radius: 0; } .geary-accounts-editor-pane frame:not(.geary-signature) > border, .geary-accounts-editor-pane scrolledwindow.frame { border: none; } .geary-main-window > deck > overlay > .geary-main-layout { background-color: #242424; } .geary-main-window > deck > overlay > .geary-main-layout > leaflet > separator.sidebar, .geary-main-window > deck > overlay > .geary-main-layout > leaflet > leaflet > separator.sidebar { background-color: #2C2C2C; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); } .geary-main-window > deck > overlay > .geary-main-layout > leaflet > separator.sidebar:backdrop, .geary-main-window > deck > overlay > .geary-main-layout > leaflet > leaflet > separator.sidebar:backdrop { background-color: #2C2C2C; } .geary-main-window > deck > overlay > .geary-main-layout > leaflet > leaflet > box.vertical + separator.sidebar { background-color: rgba(255, 255, 255, 0.12); } .geary-main-window > deck > overlay > .geary-main-layout > leaflet > leaflet > box.vertical > .geary-conversation-frame > scrolledwindow { margin: -1px 0; } .geary-main-window geary-conversation-viewer#conversation_viewer list.background.conversation-listbox.content > row.activatable { border: 1px solid rgba(255, 255, 255, 0.12); border-bottom-width: 0; background-color: #2C2C2C; } .geary-main-window geary-conversation-viewer#conversation_viewer list.background.conversation-listbox.content > row.activatable:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } .geary-main-window geary-conversation-viewer#conversation_viewer list.background.conversation-listbox.content .geary-attachment-pane { border-radius: 0 0 8px 8px; } .geary-main-window geary-conversation-viewer#conversation_viewer list.background.conversation-listbox.content .geary-attachment-pane actionbar.background { background-color: transparent; } .geary-main-window geary-conversation-viewer#conversation_viewer list.background.conversation-listbox.content .geary-attachment-pane actionbar.background > revealer > box { border-radius: 0 0 6px 6px; } /************** * Extensions * **************/ window.background.csd stack stack stack frame > border, window.background.csd > stack > stack > box > frame > border, window.background.csd > stack > stack > box > box > frame > border, window.background.csd > stack > box > stack > box > frame > border, window.background.csd > stack > box > stack > scrolledwindow > viewport frame > border, window.background.csd > stack > box > stack > box > scrolledwindow > viewport > frame > border, window.background.csd > stack > grid > scrolledwindow > viewport > box > frame > border { border: none; } window.background.csd > stack > box > box > list, window.background.csd > stack > box > stack > scrolledwindow > viewport > list { border-bottom-left-radius: 14px; } window.background.csd > stack > box > .sidebar > scrolledwindow > viewport > list { padding: 0 0; } /*********** * Dialogs * ***********/ dialog.background.csd > box.vertical.dialog-vbox > grid.horizontal > scrolledwindow.frame > viewport.frame list:first-child { border-radius: 0 0 0 14px; } dialog.background.csd > box.vertical.dialog-vbox > grid.horizontal > scrolledwindow.frame > viewport.frame list:last-child { border-radius: 0 0 14px 0; } dialog.background.csd > box.vertical.dialog-vbox > stack > scrolledwindow, dialog.background.csd > box.vertical.dialog-vbox > stack > stack > scrolledwindow { border-radius: 0 0 14px 14px; background-color: #2C2C2C; } dialog.background.csd > box.vertical.dialog-vbox > stack > scrolledwindow iconview.view:not(:hover):not(:selected):not(:active), dialog.background.csd > box.vertical.dialog-vbox > stack > stack > scrolledwindow iconview.view:not(:hover):not(:selected):not(:active) { background-color: transparent; } dialog.background.csd > box.vertical.dialog-vbox > stack > scrolledwindow > viewport.frame > list { border-radius: 0 0 14px 14px; } dialog.background.csd > box.vertical.dialog-vbox > stack > scrolledwindow > viewport.frame > list row.activatable:not(:hover):not(:selected):not(:active) { background-color: transparent; } dialog.background.csd > box.vertical.dialog-vbox > stack > box.vertical > stack.view > scrolledwindow > treeview.view:not(:hover):not(:selected):not(:active), filechooser dialog.background.csd > box.vertical.dialog-vbox > stack > box.vertical > stack.view > scrolledwindow > treeview.view:not(:hover):not(:selected):not(:active) { background-color: transparent; } dialog.background.csd > box.vertical.dialog-vbox > stack toolbar.toolbar { border-radius: 0 0 14px 14px; } dialog.background.csd > box.vertical.dialog-vbox > notebook > stack { border-radius: 0 0 14px 14px; } dialog.background.csd stack scrolledwindow.frame { border-radius: 10px; } dialog.background.csd stack scrolledwindow.frame textview.view { border-radius: 10px; } dialog.background.csd stack scrolledwindow.frame textview.view > text { background: none; } dialog.background.csd stack scrolledwindow.frame treeview.view:not(:hover):not(:selected), dialog.background.csd filechooser stack.view scrolledwindow.frame treeview.view:not(:hover):not(:selected), filechooser dialog.background.csd stack.view scrolledwindow.frame treeview.view:not(:hover):not(:selected), dialog.background.csd window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow scrolledwindow.frame treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), dialog.background.csd filechooser stack.view scrolledwindow.frame window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), filechooser dialog.background.csd stack.view scrolledwindow.frame window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough) { background: none; } dialog.background.csd stack scrolledwindow viewport.frame.view, dialog.background.csd filechooser stack.view scrolledwindow treeview.frame.view, filechooser dialog.background.csd stack.view scrolledwindow treeview.frame.view, dialog.background.csd window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow scrolledwindow treeview.frame.view:not(.progressbar):not(.trough), dialog.background.csd filechooser stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.frame.view:not(.progressbar):not(.trough), filechooser dialog.background.csd stack.view window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.frame.view:not(.progressbar):not(.trough) { border-radius: 10px; } window.background.csd.unified headerbar { box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); } window.background.csd.unified headerbar.selection-mode { box-shadow: none; } window.background.csd.unified > decoration-overlay { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } window.background.csd.unified, window.background.csd.unified > decoration, window.background.csd.unified > decoration-overlay { border-radius: 14px; } window.background.csd.unified.tiled > decoration-overlay, window.background.csd.unified.tiled-top > decoration-overlay, window.background.csd.unified.tiled-right > decoration-overlay, window.background.csd.unified.tiled-bottom > decoration-overlay, window.background.csd.unified.tiled-left > decoration-overlay, window.background.csd.unified.maximized > decoration-overlay, window.background.csd.unified.fullscreen > decoration-overlay { box-shadow: none; } window.background.csd.unified.tiled, window.background.csd.unified.tiled > decoration, window.background.csd.unified.tiled > decoration-overlay, window.background.csd.unified.tiled-top, window.background.csd.unified.tiled-top > decoration, window.background.csd.unified.tiled-top > decoration-overlay, window.background.csd.unified.tiled-right, window.background.csd.unified.tiled-right > decoration, window.background.csd.unified.tiled-right > decoration-overlay, window.background.csd.unified.tiled-bottom, window.background.csd.unified.tiled-bottom > decoration, window.background.csd.unified.tiled-bottom > decoration-overlay, window.background.csd.unified.tiled-left, window.background.csd.unified.tiled-left > decoration, window.background.csd.unified.tiled-left > decoration-overlay, window.background.csd.unified.maximized, window.background.csd.unified.maximized > decoration, window.background.csd.unified.maximized > decoration-overlay, window.background.csd.unified.fullscreen, window.background.csd.unified.fullscreen > decoration, window.background.csd.unified.fullscreen > decoration-overlay { border-radius: 0; } window.background.csd.unified > deck > .view > notebook > header.top, filechooser stack.view scrolledwindow window.background.csd.unified > deck > treeview.view > notebook > header.top, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.csd.unified > deck > treeview.view:not(.progressbar):not(.trough) > notebook > header.top { border-radius: 0; } /********* * Tilix * *********/ overlay > revealer.left > scrolledwindow.frame, overlay > revealer.right > scrolledwindow.frame { border-style: none; box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } overlay > revealer.left > scrolledwindow.frame { margin-right: 32px; } overlay > revealer.right > scrolledwindow.frame { margin-left: 32px; } .terminix-session-sidebar, .tilix-session-sidebar { background-image: image(#3C3C3C); } .terminal-titlebar button { border-radius: 0; } button.image-button.session-new-button { min-width: 28px; } notebook.tilix-background tab > box > stack { margin: -6px; } button.flat.tilix-small-button { min-height: 18px; min-width: 14px; } /************** * Terminator * **************/ .terminator-terminal-window paned > separator { background-color: #212121; } .terminator-terminal-window notebook.frame { border-style: none; } /************* * Ubitquity * *************/ #live_installer .menubar progressbar trough { border-radius: 4px; background-color: rgba(255, 255, 255, 0.12); } /*********** * Eclipse * ***********/ window.background > box.vertical > scrolledwindow > widget toolbar { padding: 2px; } window.background > box.vertical > scrolledwindow > widget toolbar separator, window.background > box.vertical > scrolledwindow > widget toolbar button { margin: 2px; } window.background > box.vertical > scrolledwindow > widget toolbar button { border-radius: 10px; } /************ * Chromium * ************/ window.background.chromium { background-color: #3C3C3C; } window.background.chromium entry, window.background.chromium > button { border: 1px solid #404040; } window.background.chromium > button { color: #66BB6A; } window.background.chromium > button:disabled { color: rgba(255, 255, 255, 0.3); } window.background.chromium menubar, window.background.chromium headerbar { color: rgba(255, 255, 255, 0.7); } window.background.chromium headerbar button:active { background-color: alpha(currentColor, 0.12); } window.background.chromium spinner { color: #66BB6A; } window.background.chromium textview.view { background-color: transparent; } window.background.chromium treeview.view.cell:selected:focus, window.background.chromium filechooser stack.view scrolledwindow treeview.cell.view:selected:focus, filechooser stack.view scrolledwindow window.background.chromium treeview.cell.view:selected:focus, window.background.chromium window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.cell.view:selected:focus:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.chromium treeview.cell.view:selected:focus:not(.progressbar):not(.trough) { background-color: #66BB6A; color: white; } window.background.chromium treeview.view button, window.background.chromium filechooser stack.view scrolledwindow treeview.view button, filechooser stack.view scrolledwindow window.background.chromium treeview.view button, window.background.chromium window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) button, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.chromium treeview.view:not(.progressbar):not(.trough) button { border: 1px solid rgba(255, 255, 255, 0.3); background-color: #2C2C2C; } tooltip.background.chromium { background-color: #363636; } /*********** * Firefox * ***********/ #MozillaGtkWidget > widget text { background-color: #3C3C3C; } #MozillaGtkWidget > widget text:selected { background-color: #66BB6A; color: white; } #MozillaGtkWidget > widget > separator { color: #404040; } #MozillaGtkWidget > widget > scrollbar { background-clip: border-box; } #MozillaGtkWidget > widget > frame > border { border-color: #404040; } #MozillaGtkWidget > widget > entry, #MozillaGtkWidget > widget > button > button { border: 1px solid #404040; border-radius: 10px; box-shadow: none; } #MozillaGtkWidget > widget > entry:disabled, #MozillaGtkWidget > widget > button > button:disabled { border-color: rgba(255, 255, 255, 0.12); } #MozillaGtkWidget > widget > entry { min-height: 30px; background-color: #2C2C2C; } #MozillaGtkWidget > widget > entry:focus { border-color: #66BB6A; box-shadow: inset 0 0 0 1px #66BB6A; } #MozillaGtkWidget > widget > entry:disabled { background-color: #242424; } #MozillaGtkWidget > widget > button > button { padding: 4px 8px; background-size: auto; } #MozillaGtkWidget > widget > button > button:hover { box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); } #MozillaGtkWidget > widget > button > button:active { background-image: image(alpha(currentColor, 0.12)); } #MozillaGtkWidget > widget > checkbutton > check, #MozillaGtkWidget > widget > radiobutton > radio { margin: 0; padding: 0; } #MozillaGtkWidget > widget > checkbutton > check:not(:checked):not(:indeterminate), #MozillaGtkWidget > widget > radiobutton > radio:not(:checked):not(:indeterminate) { color: #757575; } #MozillaGtkWidget > widget > checkbutton > check:not(:checked):not(:indeterminate):hover, #MozillaGtkWidget > widget > checkbutton > check:not(:checked):not(:indeterminate):active, #MozillaGtkWidget > widget > radiobutton > radio:not(:checked):not(:indeterminate):hover, #MozillaGtkWidget > widget > radiobutton > radio:not(:checked):not(:indeterminate):active { color: #9E9E9E; } #MozillaGtkWidget > widget > checkbutton > check:not(:checked):not(:indeterminate):disabled, #MozillaGtkWidget > widget > radiobutton > radio:not(:checked):not(:indeterminate):disabled { color: rgba(117, 117, 117, 0.5); } #MozillaGtkWidget menu { border: none; } #MozillaGtkWidget > widget > menubar { color: rgba(255, 255, 255, 0.7); } #MozillaGtkWidget > widget > menubar:hover { color: white; } #MozillaGtkWidget > widget > menubar:disabled { color: rgba(255, 255, 255, 0.3); } #MozillaGtkWidget > widget > frame { color: #404040; } #MozillaGtkWidget menu > separator { color: #404040; } window.background:not(.csd) > window > menu menuitem { transition: none; } /************ * Inkscape * ************/ #ToolboxCommon > #AuxToolbox #StyleSwatch { font-size: smaller; } #ToolboxCommon > #AuxToolbox #Kludge { padding: 0; } #ToolboxCommon > #AuxToolbox spinbutton, #ToolboxCommon > #AuxToolbox entry { min-height: 32px; } #ToolboxCommon > #AuxToolbox button:not(.up):not(.down) { min-height: 24px; min-width: 16px; padding: 4px 8px; border-radius: 10px; } #ToolboxCommon > #AuxToolbox spinbutton button { border-width: 4px; } #ToolboxCommon > toolbar.vertical { margin-top: -4px; } #ToolboxCommon > toolbar.vertical button { min-height: 24px; min-width: 24px; padding: 4px; border-radius: 10px; } #CanvasTable button { min-height: 16px; min-width: 16px; padding: 0; } #CanvasTable #HorizontalScrollbar { border-top: 1px solid rgba(255, 255, 255, 0.12); } #CanvasTable #VerticalScrollbar:dir(ltr) { border-left: 1px solid rgba(255, 255, 255, 0.12); } #CanvasTable #VerticalScrollbar:dir(rtl) { border-right: 1px solid rgba(255, 255, 255, 0.12); } #Canvas_and_Dock frame > border { border: none; } #Canvas_and_Dock widget > widget > button.flat { min-height: 16px; min-width: 16px; padding: 4px; } #Canvas_and_Dock widget > widget > box.horizontal image { padding: 4px; } #Canvas_and_Dock box.horizontal > box.vertical > button.flat { min-height: 16px; min-width: 24px; padding: 8px 4px; } /*********** * Synapse * ***********/ /********* * Pamac * *********/ window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > list, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > scrolledwindow > viewport.frame > list, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > revealer > stack > box.vertical > stack > scrolledwindow > viewport.frame > list { border: none; border-radius: 0; } window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > box.vertical > stack > scrolledwindow > viewport.frame > list { border: none; border-radius: 0; } window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable:first-child, window.background.csd > box.vertical > overlay > stack > box.vertical > box.horizontal > box.vertical > stack > scrolledwindow > viewport.frame > list > row.activatable:last-child { border-radius: 0; } window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame { border: none; } window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame > viewport.frame > box.vertical > stack > scrolledwindow { border-top: 1px solid rgba(255, 255, 255, 0.12); } window.background:not(.solid-csd) > grid.horizontal > grid.horizontal { background-color: #2C2C2C; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); } window.background:not(.solid-csd) > notebook { border: none; background-color: #2C2C2C; box-shadow: none; } window.background:not(.solid-csd) > notebook > stack { border: none; box-shadow: none; background-color: #2C2C2C; } #combobox { background-color: #2C2C2C; border-radius: 10px; } #gtk-combobox-popup-menu .view:selected, #gtk-combobox-popup-menu window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow #gtk-combobox-popup-menu treeview.view:selected:not(.progressbar):not(.trough), #gtk-combobox-popup-menu .view:hover, #gtk-combobox-popup-menu window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:hover:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow #gtk-combobox-popup-menu treeview.view:hover:not(.progressbar):not(.trough) { background-image: image(#66BB6A); color: white; } /********* * Unity * *********/ UnityDecoration { -UnityDecoration-extents: 28px 0 0 0; -UnityDecoration-input-extents: 8px; -UnityDecoration-shadow-offset-x: 0; -UnityDecoration-shadow-offset-y: 3px; -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48); -UnityDecoration-active-shadow-radius: 18px; -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32); -UnityDecoration-inactive-shadow-radius: 6px; -UnityDecoration-glow-size: 8px; -UnityDecoration-glow-color: #66BB6A; -UnityDecoration-title-indent: 4px; -UnityDecoration-title-fade: 32px; -UnityDecoration-title-alignment: 0.0; } UnityDecoration .top { padding: 0 2px; border-style: none; border-radius: 14px 14px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #2C2C2C; color: white; } UnityDecoration .top:backdrop { background-color: #2C2C2C; color: rgba(255, 255, 255, 0.7); } UnityDecoration .menuitem { color: rgba(255, 255, 255, 0.7); } UnityDecoration .menuitem:hover { box-shadow: inset 0 -2px currentColor; background-color: transparent; color: white; } .background:not(.csd) headerbar:not(.titlebar) { border-radius: 0; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } .background:not(.csd) headerbar:not(.titlebar).inline-toolbar { border-style: none; } UnityPanelWidget, .unity-panel { background-color: #1F1F1F; color: white; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: rgba(255, 255, 255, 0.7); } .unity-panel.menuitem, .unity-panel .menuitem { color: rgba(255, 255, 255, 0.7); } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem *:hover { box-shadow: inset 0 -2px currentColor; background-color: transparent; color: white; } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: spin 1s linear infinite; color: #66BB6A; } /************** * Mate-Panel * **************/ .mate-panel-menu-bar menubar, #PanelApplet-window-menu-applet-button { background-color: transparent; } .mate-panel-menu-bar { background-color: rgba(31, 31, 31, 0.65); color: rgba(255, 255, 255, 0.7); font-weight: 500; } .mate-panel-menu-bar button { min-height: 16px; min-width: 16px; padding: 0; border-radius: 0; } PanelToplevel.horizontal > grid > button { min-width: 24px; } PanelToplevel.vertical > grid > button { min-height: 24px; } PanelSeparator { color: rgba(255, 255, 255, 0.12); } MatePanelAppletFrameDBus { border-style: solid; border-color: rgba(255, 255, 255, 0.12); } .mate-panel-menu-bar.horizontal MatePanelAppletFrameDBus { border-width: 0 1px; } .mate-panel-menu-bar.vertical MatePanelAppletFrameDBus { border-width: 1px 0; } .mate-panel-menu-bar menubar > menuitem { color: rgba(255, 255, 255, 0.7); } .mate-panel-menu-bar menubar > menuitem:hover { color: white; } .mate-panel-menu-bar menubar > menuitem:disabled { color: rgba(255, 255, 255, 0.3); } .mate-panel-menu-bar.horizontal menubar > menuitem { padding: 0 8px; } .mate-panel-menu-bar.vertical menubar > menuitem { padding: 8px 0; } .mate-panel-menu-bar menubar menu > menuitem { min-height: 24px; padding: 0 6px; } .mate-panel-menu-bar #PanelApplet button { -GtkWidget-window-dragging: true; } .mate-panel-menu-bar #tasklist-button { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0/0 0 0px; } .mate-panel-menu-bar #tasklist-button:checked { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2/0 0 2px; } .mate-panel-menu-bar #tasklist-button image:dir(ltr), .mate-panel-menu-bar #tasklist-button label:dir(rtl) { padding-left: 4px; } .mate-panel-menu-bar #tasklist-button label:dir(ltr), .mate-panel-menu-bar #tasklist-button image:dir(rtl) { padding-right: 4px; } .mate-panel-menu-bar.vertical #tasklist-button { min-height: 32px; } .mate-panel-menu-bar.horizontal #showdesktop-button image { min-width: 24px; padding: 0 4px; } .mate-panel-menu-bar.vertical #showdesktop-button image { min-height: 24px; padding: 4px 0; } PanelApplet.wnck-applet .wnck-pager { background-color: transparent; color: #66BB6A; } PanelApplet.wnck-applet .wnck-pager:hover { background-color: alpha(currentColor, 0.08); } PanelApplet.wnck-applet .wnck-pager:active { background-color: alpha(currentColor, 0.12); } PanelApplet.wnck-applet .wnck-pager:selected { background-color: #66BB6A; } .mate-panel-menu-bar.horizontal #clock-applet-button label { padding: 0 8px; } .mate-panel-menu-bar.vertical #clock-applet-button label { padding: 8px 0; } #MatePanelPopupWindow { border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 11px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } #MatePanelPopupWindow frame > border { border-style: none; } #MatePanelPopupWindow calendar { border-style: none; } #MatePanelPopupWindow calendar:not(:selected) { background-color: transparent; } #MatePanelPopupWindow calendar + box { margin-top: -5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.12); } #MatePanelPopupWindow expander > title { min-height: 32px; } #MatePanelPopupWindow button { padding: 4px 16px; } #MatePanelPopupWindow > frame > box > box > box > widget { color: rgba(255, 255, 255, 0.12); } na-tray-applet { -NaTrayApplet-icon-padding: 3px; -NaTrayApplet-icon-size: 16; } .mate-panel-menu-bar { -PanelMenuBar-icon-visible: true; } .mate-panel-applet-slider { border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 11px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .mate-panel-applet-slider frame > border { border-style: none; } #PanelApplet:not(:selected) > box { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } #PanelApplet:selected > box { background-color: alpha(currentColor, 0.1); color: white; } #mate-menu { border: 1px solid rgba(0, 0, 0, 0.16); background-color: #3C3C3C; } #mate-menu button { min-height: 24px; min-width: 24px; padding: 4px 0; color: white; font-weight: normal; } #mate-menu button:not(.flat) { background-color: alpha(currentColor, 0.1); } #mate-menu button image, #mate-menu button label + label { color: rgba(255, 255, 255, 0.7); } #mate-menu entry { margin: 0 0 4px; } #mate-menu entry image { margin: 0; } #mate-menu entry + button { margin: 0 4px 4px; padding: 4px; } .brisk-menu { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .brisk-menu entry { margin-bottom: -2px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-image: none; box-shadow: none; background-color: transparent; } .brisk-menu entry + box > box:dir(ltr) { margin-right: -2px; border-right: 1px solid rgba(255, 255, 255, 0.12); } .brisk-menu entry + box > box:dir(rtl) { margin-left: -2px; border-left: 1px solid rgba(255, 255, 255, 0.12); } .brisk-menu .categories-list { padding-top: 4px; } .brisk-menu .categories-list button { margin: 0 4px; } .brisk-menu .categories-list button:checked { color: #66BB6A; } .brisk-menu .session-button { padding: 8px; } .brisk-menu .frame { border-style: none; } .brisk-menu .apps-list { padding: 4px 0; background-color: transparent; } .brisk-menu .apps-list row { padding: 0; } .brisk-menu .apps-list row:hover { box-shadow: none; } .brisk-menu .apps-list button { border-radius: 0; color: white; font-weight: normal; } /********************* * CAJA File manager * *********************/ .caja-navigation-window button.toggle.image-button { border-radius: 10px; } .caja-pathbar button { margin: 0 -1px 0 -2px; } .caja-pathbar button.slider-button { min-width: 24px; } .caja-pathbar button > widget { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); -GtkArrow-arrow-scaling: 1; } .caja-side-pane notebook viewport.frame, .caja-side-pane notebook widget .vertical { background-color: #2C2C2C; } .caja-side-pane notebook, .caja-notebook { border-top: 1px solid rgba(255, 255, 255, 0.12); } .caja-side-pane notebook .frame, .caja-notebook .frame { border-style: none; } .caja-canvas-item { border-radius: 10px; } .caja-desktop.view .entry, filechooser stack.view scrolledwindow treeview.caja-desktop.view .entry, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.caja-desktop.view:not(.progressbar):not(.trough) .entry, .caja-navigation-window .view .entry, .caja-navigation-window filechooser stack.view scrolledwindow treeview.view .entry, filechooser stack.view scrolledwindow .caja-navigation-window treeview.view .entry, .caja-navigation-window window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) .entry, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .caja-navigation-window treeview.view:not(.progressbar):not(.trough) .entry { border: none; border-radius: 10px; background-color: rgba(255, 255, 255, 0.04); background-image: none; color: white; } .caja-desktop.view .entry:selected, filechooser stack.view scrolledwindow treeview.caja-desktop.view .entry:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.caja-desktop.view:not(.progressbar):not(.trough) .entry:selected, .caja-navigation-window .view .entry:selected, .caja-navigation-window filechooser stack.view scrolledwindow treeview.view .entry:selected, filechooser stack.view scrolledwindow .caja-navigation-window treeview.view .entry:selected, .caja-navigation-window window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(.progressbar):not(.trough) .entry:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .caja-navigation-window treeview.view:not(.progressbar):not(.trough) .entry:selected { background-color: alpha(currentColor, 0.06); } .caja-desktop.view .entry, filechooser stack.view scrolledwindow treeview.caja-desktop.view .entry, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.caja-desktop.view:not(.progressbar):not(.trough) .entry { background-color: rgba(0, 0, 0, 0.3); color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); caret-color: currentColor; } .caja-desktop.view .entry:selected, filechooser stack.view scrolledwindow treeview.caja-desktop.view .entry:selected, window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.caja-desktop.view:not(.progressbar):not(.trough) .entry:selected { background-color: alpha(currentColor, 0.06); } .caja-navigation-window statusbar { margin: 0 -10px; padding: 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .caja-notebook frame > border { border-style: none; } #caja-extra-view-widget { border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #2C2C2C; } #caja-extra-view-widget > box > box > label { font-weight: bold; } /********* * Pluma * *********/ .pluma-window statusbar { margin: 0 -10px; padding: 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .pluma-window statusbar frame > border { border-style: none; } .pluma-window statusbar frame button.flat { padding: 0 4px; border-radius: 0; } .pluma-window statusbar frame button.flat widget { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); -GtkArrow-arrow-scaling: 1; } .pluma-print-preview toolbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .pluma-window paned.horizontal box.vertical box.horizontal button.flat { margin: 1px; } .pluma-window paned.horizontal box.vertical .frame { border-style: none; } .pluma-window paned.horizontal box.vertical notebook.frame { margin-top: -1px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .pluma-window paned.horizontal box.vertical notebook.frame box.vertical toolbar.horizontal { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /********* * Atril * *********/ .atril-window paned.horizontal box.vertical .frame { border-style: none; } .atril-window paned.horizontal box.vertical notebook .frame { border-top: 1px solid rgba(255, 255, 255, 0.12); } /* mate-screensaver lock dialog */ .lock-dialog { border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 11px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .lock-dialog frame > border { border-style: none; } .lock-dialog button:not(:disabled) { color: #66BB6A; } /* multimedia OSD */ MsdOsdWindow.background.osd { border-radius: 10px; background-color: rgba(54, 54, 54, 0.9); color: white; } MsdOsdWindow.background.osd .trough { border-radius: 0; background-color: rgba(255, 255, 255, 0.12); } MsdOsdWindow.background.osd .progressbar { border-radius: 0; background-color: #66BB6A; } /****************** * Budgie Desktop * ******************/ .budgie-container { background-color: transparent; } .budgie-settings-window > box > scrolledwindow { background-color: #242424; border-bottom-left-radius: 14px; } .budgie-settings-window > box > scrolledwindow list.sidebar { background-color: transparent; } .budgie-settings-window buttonbox.inline-toolbar { border-style: none none solid; } .budgie-settings-window buttonbox.inline-toolbar button { border-radius: 10px; } .budgie-popover { border: none; border-radius: 10px; box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2), 0 3px 2.4px 0 rgba(0, 0, 0, 0.14), 0 1px 4.8px 0 rgba(0, 0, 0, 0.12); background-color: #3C3C3C; border-color: #3C3C3C; } .budgie-popover .container { padding: 4px; } .budgie-popover separator { margin: 2px 0; } .budgie-popover border { border: none; } .budgie-popover list { background-color: transparent; } .budgie-popover row { padding: 0; } .budgie-popover row:hover { box-shadow: none; } .budgie-popover row button { border-radius: 6px; } .budgie-popover calendar:not(.header) { border-radius: 6px; } .budgie-popover scrolledwindow.sidebar.categories { background-color: rgba(255, 255, 255, 0.04); } .budgie-popover treeview.view.sidebar, .budgie-popover filechooser stack.view scrolledwindow treeview.sidebar.view, filechooser stack.view scrolledwindow .budgie-popover treeview.sidebar.view, .budgie-popover window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.sidebar.view:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .budgie-popover treeview.sidebar.view:not(.progressbar):not(.trough) { background: none; border-right: none; color: white; padding: 2px; } .budgie-popover treeview.view.sidebar:hover, .budgie-popover filechooser stack.view scrolledwindow treeview.sidebar.view:hover, filechooser stack.view scrolledwindow .budgie-popover treeview.sidebar.view:hover, .budgie-popover window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.sidebar.view:hover:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .budgie-popover treeview.sidebar.view:hover:not(.progressbar):not(.trough) { background-color: alpha(currentColor, 0.08); } .budgie-popover treeview.view.sidebar:selected, .budgie-popover filechooser stack.view scrolledwindow treeview.sidebar.view:selected, filechooser stack.view scrolledwindow .budgie-popover treeview.sidebar.view:selected, .budgie-popover window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.sidebar.view:selected:not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .budgie-popover treeview.sidebar.view:selected:not(.progressbar):not(.trough) { background-color: alpha(currentColor, 0.12); } .budgie-popover scrolledwindow.sidebar:not(.categories) { background-color: rgba(255, 255, 255, 0.04); border-right: none; border-bottom-left-radius: 10px; } .budgie-popover scrolledwindow.sidebar:not(.categories) list > row.activatable { padding: 4px 6px; } .budgie-popover.bottom scrolledwindow.sidebar:not(.categories) { padding-top: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 0; } .budgie-popover > frame.container > grid.horizontal > grid.horizontal > widget > grid.horizontal > stack { border-top: 1px solid rgba(255, 255, 255, 0.12); } .budgie-popover.bottom > frame.container > grid.horizontal > grid.horizontal > widget > grid.horizontal > stack { border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .budgie-popover button { border-radius: 6px; } .budgie-popover button.flat:not(.image-button) { min-height: 24px; padding: 0 8px; color: white; font-weight: normal; border-radius: 6px; } .budgie-popover button.flat:not(.image-button):disabled { color: rgba(255, 255, 255, 0.5); } .budgie-popover.budgie-menu .container { padding: 0; } .budgie-popover.budgie-menu .sidebar, .budgie-popover.budgie-menu scrollbar, .budgie-popover.budgie-menu entry.search { background-color: transparent; } .budgie-popover.budgie-menu entry.search { border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-image: none; border-radius: 0; box-shadow: none; font-size: 120%; } .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item) { min-height: 32px; padding: 0 8px; border-radius: 0; } .budgie-popover.budgie-menu button.flat:not(.image-button):not(.indicator-item):checked:disabled { background-color: transparent; } .budgie-popover.user-menu list, .budgie-popover.user-menu row { border: none; background: none; box-shadow: none; } .budgie-popover.user-menu > frame.container > box.vertical row.activatable:first-child { margin-bottom: 2px; outline-width: 0; border-radius: 10px; } .budgie-popover.user-menu > frame.container > box.vertical row.activatable:first-child button.indicator-item { transition: none; animation: none; } .budgie-popover.night-light-indicator .container { padding: 2px; } .budgie-popover.night-light-indicator .view-header { margin: 0 4px; } .budgie-popover.places-menu .container { padding: 2px; } .budgie-popover.places-menu .name-button image:dir(ltr) { margin-right: 3px; } .budgie-popover.places-menu .name-button image:dir(rtl) { margin-left: 3px; } .budgie-popover.places-menu .unmount-button { margin: 1px; padding: 0; } .budgie-popover.places-menu .places-list:not(.always-expand) { margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .budgie-popover.places-menu .alternative-label { padding: 2px; font-size: 15px; } .budgie-popover.workspace-popover flowboxchild { padding: 0; } .workspace-switcher .workspace-layout { border: 0 solid rgba(255, 255, 255, 0.12); } .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { border-left-width: 1px; } .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { border-right-width: 1px; } .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { border-top-width: 1px; } .workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { border: 0 solid rgba(255, 255, 255, 0.12); } .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { border-right-width: 1px; } .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { border-left-width: 1px; } .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { border-bottom-width: 1px; } .workspace-switcher .workspace-item { transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } .workspace-switcher .workspace-item.current-workspace { background-color: alpha(currentColor, 0.1); } .workspace-switcher .workspace-add-button:hover { box-shadow: none; } .workspace-switcher .workspace-add-button:active { background-image: none; } .workspace-switcher .workspace-add-button:active image { margin: 1px 0 -1px; } .budgie-panel .workspace-switcher .workspace-icon-button { min-height: 24px; min-width: 24px; padding: 0; border-radius: 10px; } .budgie-panel button.budgie-menu-launcher { padding: 0 0; margin: 2px 0; min-width: 16px; min-height: 16px; color: rgba(255, 255, 255, 0.7); } .budgie-panel button.budgie-menu-launcher { background: none; box-shadow: none; } .budgie-panel button.budgie-menu-launcher image { padding: 0; margin: 0; border-radius: 9999px; background-image: image(rgba(255, 255, 255, 0.12)); } .budgie-panel button.budgie-menu-launcher:hover { color: white; } .budgie-panel button.budgie-menu-launcher:hover image { background-image: image(rgba(255, 255, 255, 0.2)); } .budgie-panel button.budgie-menu-launcher:active, .budgie-panel button.budgie-menu-launcher:checked { color: white; } .budgie-panel button.budgie-menu-launcher:active image, .budgie-panel button.budgie-menu-launcher:checked image { background-image: image(rgba(255, 255, 255, 0.28)); } .budgie-panel { transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); background-color: #1F1F1F; color: rgba(255, 255, 255, 0.7); font-weight: 500; } .budgie-panel.transparent { background-color: rgba(0, 0, 0, 0.6); } .bottom .budgie-panel.dock-mode { border-radius: 14px 14px 0 0; } .bottom .budgie-panel.dock-mode .icon-tasklist button.launcher:checked, .bottom .budgie-panel.dock-mode .icon-tasklist button.launcher:active { color: white; } .bottom .budgie-panel.dock-mode .icon-tasklist > box > revealer:first-child > button.launcher { border-top-left-radius: 14px; } .bottom .budgie-panel.dock-mode .icon-tasklist > box > revealer:last-child > button.launcher { border-top-right-radius: 14px; } .left .budgie-panel.dock-mode { border-radius: 0 14px 14px 0; } .left .budgie-panel.dock-mode .icon-tasklist .launcher:first-child { border-top-right-radius: 14px; } .left .budgie-panel.dock-mode .icon-tasklist .launcher:last-child { border-bottom-right-radius: 14px; } .right .budgie-panel.dock-mode { border-radius: 14px 0 0 14px; } .right .budgie-panel.dock-mode .icon-tasklist .launcher:first-child { border-top-left-radius: 14px; } .right .budgie-panel.dock-mode .icon-tasklist .launcher:last-child { border-bottom-left-radius: 14px; } .budgie-panel button { color: rgba(255, 255, 255, 0.7); min-height: 24px; min-width: 24px; padding: 0; border-radius: 0; } .budgie-panel button:hover { color: white; } .budgie-panel button:active { color: rgba(255, 255, 255, 0.7); } .budgie-panel button.budgie-menu-launcher { color: rgba(255, 255, 255, 0.7); } .budgie-panel button.budgie-menu-launcher:focus { background: none; box-shadow: none; border: none; color: rgba(255, 255, 255, 0.7); } .budgie-panel button.raven-trigger { color: rgba(255, 255, 255, 0.7); } .budgie-panel.horizontal button { padding: 0 4px; } .budgie-panel.vertical button { padding: 4px 0; } .budgie-panel separator { background-color: rgba(255, 255, 255, 0.3); } .budgie-panel .alert { color: #F28B82; } .budgie-panel .titlebar:not(headerbar) { min-height: 0; padding: 0; box-shadow: none; background-color: transparent; color: white; } .budgie-panel .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action) { color: rgba(255, 255, 255, 0.7); } .budgie-panel .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):hover, .budgie-panel .titlebar:not(headerbar) button:not(.suggested-action):not(.destructive-action):active { color: white; } .budgie-panel menubar, .budgie-panel .menubar { color: rgba(255, 255, 255, 0.7); } .budgie-panel menubar > menuitem, .budgie-panel .menubar > menuitem { color: rgba(255, 255, 255, 0.7); } .budgie-panel menubar > menuitem:hover, .budgie-panel menubar > menuitem:active, .budgie-panel .menubar > menuitem:hover, .budgie-panel .menubar > menuitem:active { color: white; } .budgie-panel #tasklist-button { padding: 0 4px; } .budgie-panel.vertical #tasklist-button { min-height: 32px; } .budgie-panel button.flat.launcher { padding: 0; } .budgie-panel button.flat.launcher:not(:checked) { color: rgba(255, 255, 255, 0.5); } .budgie-panel button.flat.launcher:not(:checked):hover, .budgie-panel button.flat.launcher:not(:checked):active { color: rgba(255, 255, 255, 0.7); } .budgie-panel button.flat.launcher:not(:checked):disabled { color: rgba(255, 255, 255, 0.3); } .top .budgie-panel .unpinned button.flat.launcher:checked, .top .budgie-panel .pinned button.flat.launcher.running:checked { border-image: radial-gradient(circle closest-corner at center calc(1px), currentColor 100%, transparent 0%) 2 0 0 0/2px 0 0 0; } .bottom .budgie-panel .unpinned button.flat.launcher:checked, .bottom .budgie-panel .pinned button.flat.launcher.running:checked { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2 0/0 0 2px 0; } .left .budgie-panel .unpinned button.flat.launcher:checked, .left .budgie-panel .pinned button.flat.launcher.running:checked { border-image: radial-gradient(circle closest-corner at calc(1px) center, currentColor 100%, transparent 0%) 0 0 0 2/0 0 0 2px; } .right .budgie-panel .unpinned button.flat.launcher:checked, .right .budgie-panel .pinned button.flat.launcher.running:checked { border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center, currentColor 100%, transparent 0%) 0 2 0 0/0 2px 0 0; } .top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button { border-image: radial-gradient(circle closest-corner at center calc(1px), currentColor 0%, transparent 0%) 0 0 0 0/0 0 0 0; } .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked { border-image: radial-gradient(circle closest-corner at center calc(1px), currentColor 100%, transparent 0%) 2 0 0 0/2px 0 0 0; } .bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 0%, transparent 0%) 0 0 0 0/0 0 0 0; } .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked { border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), currentColor 100%, transparent 0%) 0 0 2 0/0 0 2px 0; } .left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button { border-image: radial-gradient(circle closest-corner at calc(1px) center, currentColor 0%, transparent 0%) 0 0 0 0/0 0 0 0; } .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked { border-image: radial-gradient(circle closest-corner at calc(1px) center, currentColor 100%, transparent 0%) 0 0 0 2/0 0 0 2px; } .right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button { border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center, currentColor 0%, transparent 0%) 0 0 0 0/0 0 0 0; } .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked { border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center, currentColor 100%, transparent 0%) 0 2 0 0/0 2px 0 0; } frame.raven-frame > border { border-style: none; } .top frame.raven-frame > border { margin-bottom: 32px; } .bottom frame.raven-frame > border { margin-top: 32px; } .left frame.raven-frame > border { margin-right: 32px; } .right frame.raven-frame > border { margin-left: 32px; } .raven { background-color: #3C3C3C; box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); margin: 8px 6px 6px; border-radius: 10px; } .raven > box { margin-bottom: -10px; } .raven stackswitcher.linked { margin: 6px 16px; } .raven stackswitcher.linked > button:focus { box-shadow: none; } .raven .raven-header { min-height: 32px; padding: 3px; } .raven .raven-header.top { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .raven .raven-header.top stackswitcher button { margin: -4px 0 -5px; padding: 0 16px; min-height: 32px; } .raven .raven-header.bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } .raven stack .raven-header { margin-top: -6px; } .raven stack scrolledwindow .raven-header { margin-top: -8px; } .raven .raven-background { border-style: solid none; border-width: 1px; border-color: rgba(255, 255, 255, 0.12); background-color: #2C2C2C; } .raven .raven-background > overlay > widget > image { color: rgba(255, 255, 255, 0.12); } .raven scrolledwindow.raven-background { border-bottom-style: none; } .raven .powerstrip button { margin: 2px 0 1px; padding: 8px; } .raven .option-subtitle { font-size: smaller; } .raven .audio-widget scale.marks-after { padding-top: 0; padding-bottom: 0; } .raven .audio-widget scale.marks-after label { font-size: 90%; padding: 0; margin: -10px 0 0 6px; } .raven .audio-widget button.flat.expander-button { margin-top: 4px; margin-bottom: 4px; } .raven .audio-widget list.devices-list.sound-devices > row.activatable:selected, .raven .audio-widget list.devices-list.sound-devices > row.activatable:checked { background-color: rgba(255, 255, 255, 0.06); color: white; } .raven .audio-widget list.devices-list.sound-devices > row.activatable:selected label, .raven .audio-widget list.devices-list.sound-devices > row.activatable:checked label { color: white; } .raven .audio-widget list.devices-list.sound-devices > row.activatable label { padding-left: 12px; } calendar.raven-calendar { border-style: none; background-color: transparent; } calendar.raven-calendar:selected { border-radius: 10px; } .raven-mpris { background-color: rgba(0, 0, 0, 0.6); color: white; } .raven-mpris label { min-height: 24px; } .raven-mpris button.image-button { padding: 8px; } .raven-notifications-view > .raven-background > viewport.frame { padding: 0; } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable { margin-left: -4px; margin-right: -2px; } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable .raven-notifications-group-header { padding: 0 8px; } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable list { padding: 4px; background: none; } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable list > row.activatable { border: none; padding: 4px 4px 4px 8px; margin: 2px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.04); } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable list > row.activatable:hover, .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable list > row.activatable:selected { background-color: rgba(255, 255, 255, 0.12); } .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable:selected, .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable:selected:hover, .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable:hover, .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable:active, .raven-notifications-view > .raven-background > viewport.frame > list > row.activatable:focus { background: none; box-shadow: none; } .budgie-notification-window, .budgie-switcher-window, .budgie-osd-window { background-color: transparent; } .budgie-notification .notification-title, .budgie-switcher .notification-title { font-size: 120%; } .budgie-notification .notification-body, .budgie-switcher .notification-body { color: rgba(255, 255, 255, 0.7); } .budgie-osd .budgie-osd-text { font-size: 120%; } .budgie-panel .lock-keys image:disabled { color: rgba(255, 255, 255, 0.3); } .drop-shadow { margin: 5px 9px; padding: 3px; border-radius: 14px; box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .drop-shadow .linked > button { border-radius: 14px; } .budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .budgie-session-dialog.background.csd, .budgie-session-dialog decoration, .budgie-polkit-dialog.background.csd, .budgie-polkit-dialog decoration, .budgie-run-dialog.background.csd, .budgie-run-dialog decoration { border-radius: 14px 14px 14px 14px; } .budgie-session-dialog label:not(:last-child), .budgie-session-dialog .dialog-title, .budgie-polkit-dialog label:not(:last-child), .budgie-polkit-dialog .dialog-title, .budgie-run-dialog label:not(:last-child), .budgie-run-dialog .dialog-title { font-size: 120%; } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; } .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { border-bottom-left-radius: 14px; } .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { border-bottom-right-radius: 14px; } .budgie-polkit-dialog .message { color: rgba(255, 255, 255, 0.7); } .budgie-polkit-dialog .failure { color: #F28B82; } .budgie-run-dialog entry.search { font-size: 120%; padding: 4px 12px; border-image: none; box-shadow: none; background-color: transparent; } .budgie-run-dialog list .dim-label { color: white; } .budgie-run-dialog scrolledwindow { border-top: 1px solid rgba(255, 255, 255, 0.12); } /************** * Xfce4 Apps * **************/ .XfceHeading { background-color: #2C2C2C; } /*************** * xfce4-panel * ***************/ .xfce4-panel.background { border: none; border-color: transparent; background-color: rgba(31, 31, 31, 0.65); color: rgba(255, 255, 255, 0.7); font-weight: 500; } .xfce4-panel.background button, .xfce4-panel.background button.flat { color: rgba(255, 255, 255, 0.7); min-height: 16px; min-width: 16px; padding: 0; border-radius: 0; } .xfce4-panel.background .tasklist button { color: rgba(255, 255, 255, 0.7); border-image: image(transparent) 0 0 2/0 0 2px; } .xfce4-panel.background .tasklist button:checked { border-image: image(#66BB6A) 0 0 2/0 0 2px; } .xfce4-panel.background .tasklist button image { padding: 4px; } wnck-pager:hover { background-color: alpha(currentColor, 0.08); } wnck-pager:active { background-color: alpha(currentColor, 0.12); } wnck-pager:selected { background-color: #66BB6A; } XfdesktopIconView.view { border-radius: 10px; background-color: transparent; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12); } XfdesktopIconView.view:active { box-shadow: none; } XfdesktopIconView.view .rubberband { border-radius: 0; } #XfceNotifyWindow buttonbox { padding: 0; } #XfceNotifyWindow label#summary { font-weight: bold; } #xfwm-tabwin { padding: 12px; border-radius: 10px; -XfwmTabwinWidget-icon-size: 64px; -XfwmTabwinWidget-preview-size: 64px; } /********** * Thunar * **********/ .thunar #location-toolbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .thunar .standard-view.frame { border-style: none; } .thunar .sidebar .view:not(:selected), .thunar .sidebar filechooser stack.view scrolledwindow treeview.view:not(:selected), filechooser stack.view scrolledwindow .thunar .sidebar treeview.view:not(:selected), .thunar .sidebar window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .thunar .sidebar treeview.view:not(:selected):not(.progressbar):not(.trough) { background-color: transparent; } .thunar statusbar { margin: 0 -10px; padding: 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane { border-top: none; } window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane { border-bottom-left-radius: 14px; } window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane treeview.view:not(:hover):not(:selected), filechooser stack.view window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane treeview.view:not(:hover):not(:selected), window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwindow.frame.sidebar.shortcuts-pane treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough) { background-color: transparent; } /************************ * LightDM GTK+ Greeter * ************************/ #panel_window { background-color: rgba(0, 0, 0, 0.3); color: white; } #panel_window menubar, #panel_window separator { background-color: transparent; } #panel_window separator { padding: 0 4px; } #panel_window separator:first-child { padding: 0 8px; } #panel_window menubar > menuitem { color: rgba(255, 255, 255, 0.7); } #panel_window menubar > menuitem:hover { color: white; } #panel_window menubar > menuitem:disabled label { color: rgba(255, 255, 255, 0.3); } #login_window, #shutdown_dialog, #restart_dialog { margin: 8px; border-radius: 10px; box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } #content_frame { padding-bottom: 16px; } #buttonbox_frame { padding-top: 24px; } #buttonbox_frame > box, #buttonbox_frame > buttonbox { margin: -16px; } #buttonbox_frame button:not(:disabled) { color: #66BB6A; } /******** * Nemo * ********/ .nemo-window .primary-toolbar { background-color: #2C2C2C; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .nemo-window .primary-toolbar entry { min-height: 0; margin: 0; } .nemo-window .primary-toolbar button.text-button { padding-left: 8px; padding-right: 8px; color: rgba(255, 255, 255, 0.7); } .nemo-window .primary-toolbar button.text-button:hover, .nemo-window .primary-toolbar button.text-button:active, .nemo-window .primary-toolbar button.text-button:checked { color: white; } .nemo-window .primary-toolbar button.text-button:disabled { color: rgba(255, 255, 255, 0.5); } .nemo-window .primary-toolbar button:not(.text-button):not(.image-button) { padding-left: 4px; padding-right: 4px; } .nemo-window scrolledwindow.frame { border-style: none; } .nemo-window scrolledwindow.frame .view:not(:selected), .nemo-window filechooser stack.view scrolledwindow.frame treeview.view:not(:selected), filechooser stack.view .nemo-window scrolledwindow.frame treeview.view:not(:selected), .nemo-window scrolledwindow.frame window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nemo-window scrolledwindow.frame treeview.view:not(:selected):not(.progressbar):not(.trough) { background-color: transparent; } .nemo-window .nemo-inactive-pane .view:not(:selected), .nemo-window .nemo-inactive-pane filechooser stack.view scrolledwindow treeview.view:not(:selected), filechooser stack.view scrolledwindow .nemo-window .nemo-inactive-pane treeview.view:not(:selected), .nemo-window .nemo-inactive-pane window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow treeview.view:not(:selected):not(.progressbar):not(.trough), window#gnome-system-monitor.background.csd > box.vertical > stack > box.vertical > scrolledwindow .nemo-window .nemo-inactive-pane treeview.view:not(:selected):not(.progressbar):not(.trough) { background-color: #242424; } .nemo-window .nemo-window-pane widget.entry { border-radius: 10px; background-color: rgba(255, 255, 255, 0.04); } .places-treeview { -NemoPlacesTreeView-disk-full-bg-color: #646464; -NemoPlacesTreeView-disk-full-fg-color: #66BB6A; -NemoPlacesTreeView-disk-full-bar-width: 2px; -NemoPlacesTreeView-disk-full-bar-radius: 0; -NemoPlacesTreeView-disk-full-bottom-padding: 1px; -NemoPlacesTreeView-disk-full-max-length: 80px; padding-top: 2px; padding-bottom: 2px; } /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color white; /* text color for entries, views and content in general */ @define-color theme_text_color white; /* widget base background color */ @define-color theme_bg_color #212121; /* text widgets and the like base background color */ @define-color theme_base_color #2C2C2C; /* base background color of selections */ @define-color theme_selected_bg_color #66BB6A; /* text/foreground color of selections */ @define-color theme_selected_fg_color white; /* base background color of insensitive widgets */ @define-color insensitive_bg_color #212121; /* text foreground color of insensitive widgets */ @define-color insensitive_fg_color rgba(255, 255, 255, 0.5); /* insensitive text widgets and the like base background color */ @define-color insensitive_base_color #242424; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color white; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color white; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #212121; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #2C2C2C; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #66BB6A; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color white; /* insensitive color on backdrop windows */ @define-color unfocused_insensitive_color rgba(255, 255, 255, 0.5); /* widgets main borders color */ @define-color borders rgba(255, 255, 255, 0.12); /* widgets main borders color on backdrop windows */ @define-color unfocused_borders rgba(255, 255, 255, 0.12); /* these are pretty self explicative */ @define-color warning_color #FDD633; @define-color error_color #F28B82; @define-color success_color #81C995; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title white; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); @define-color wm_bg #2C2C2C; @define-color wm_unfocused_bg #2C2C2C; /* FIXME this is really an API */ @define-color content_view_bg #2C2C2C; @define-color placeholder_text_color silver; /* Very contrasty background for text views (@theme_text_color foreground) */ @define-color text_view_bg #1d1d1d; @define-color budgie_tasklist_indicator_color rgba(255, 255, 255, 0.7); @define-color budgie_tasklist_indicator_color_active #66BB6A; @define-color budgie_tasklist_indicator_color_active_window rgba(76, 129, 78, 0.8075); @define-color budgie_tasklist_indicator_color_attention #FDD633; @define-color STRAWBERRY_100 #FF9262; @define-color STRAWBERRY_300 #FF793E; @define-color STRAWBERRY_500 #F15D22; @define-color STRAWBERRY_700 #CF3B00; @define-color STRAWBERRY_900 #AC1800; @define-color ORANGE_100 #FFDB91; @define-color ORANGE_300 #FFCA40; @define-color ORANGE_500 #FAA41A; @define-color ORANGE_700 #DE8800; @define-color ORANGE_900 #C26C00; @define-color BANANA_100 #FFFFA8; @define-color BANANA_300 #FFFA7D; @define-color BANANA_500 #FFCE51; @define-color BANANA_700 #D1A023; @define-color BANANA_900 #A27100; @define-color LIME_100 #A2F3BE; @define-color LIME_300 #8ADBA6; @define-color LIME_500 #73C48F; @define-color LIME_700 #479863; @define-color LIME_900 #1C6D38; @define-color BLUEBERRY_100 #94A6FF; @define-color BLUEBERRY_300 #6A7CE0; @define-color BLUEBERRY_500 #3F51B5; @define-color BLUEBERRY_700 #213397; @define-color BLUEBERRY_900 #031579; @define-color GRAPE_100 #D25DE6; @define-color GRAPE_300 #B84ACB; @define-color GRAPE_500 #9C27B0; @define-color GRAPE_700 #830E97; @define-color GRAPE_900 #6A007E; @define-color COCOA_100 #9F9792; @define-color COCOA_300 #7B736E; @define-color COCOA_500 #574F4A; @define-color COCOA_700 #463E39; @define-color COCOA_900 #342C27; @define-color SILVER_100 #EEE; @define-color SILVER_300 #CCC; @define-color SILVER_500 #AAA; @define-color SILVER_700 #888; @define-color SILVER_900 #666; @define-color SLATE_100 #888; @define-color SLATE_300 #666; @define-color SLATE_500 #444; @define-color SLATE_700 #222; @define-color SLATE_900 #111; @define-color BLACK_100 #474341; @define-color BLACK_300 #403C3A; @define-color BLACK_500 #393634; @define-color BLACK_700 #33302F; @define-color BLACK_900 #2B2928; --------------------------------------------------------- End Part 3