diff --git a/README.md b/README.md index 797f879..d763f84 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,21 @@ # Skewaita -This is my first serious attempt with a coherent theme for GTK2, GTK3 and GTK4. +![small preview](previews/logo.png) + +This is my first serious attempt with a coherent theme for GTK2, GTK3 and GTK4. It is yet anohter skeuomorphic theme (that is, non-flat, that tries to imitate real-world objects and interfaces, like real three-dimensional buttons). This theme is based on Adwaita GTK3 and GTK4 (source sasscs!) and built from there. Sources are also available. GTK2 is based on Clearlooks. -This is still an incomplete theme (see [TODO.md](TODO.md)) +It is a light theme but with gray tones, in order to be easy on the eyes. Accents are bright green, so selected text stays the same color. + +I still need to implement a way to easily create different color themes for this base (see [TODO.md](TODO.md)) + +Big previews: + +![full desktop preview that includes gtk2, gtk3 and gtk4](previews/gtk3-gtk4-gtk2-desktop.png "Includes gtk2, gtk3 and gtk4") + +![gtk3 widget page 2](previews/gtk3wf-2.png) + +![gtk3 widget page 3](previews/gtk3wf-3.png) \ No newline at end of file diff --git a/TODO.md b/TODO.md index 3ec5801..28b0f35 100644 --- a/TODO.md +++ b/TODO.md @@ -1,10 +1,6 @@ # TODO -Add gtk2 theme -Add xfwm4 theme -Add metacity theme - -Create a script to adapt gtk2 theme (and hopefully not metacity!; xfwm4 surely doesn't need) to current color theme. +Create a script to adapt gtk2 theme to current color theme. Create branches for different themes and learn how to properly manage this without messing. diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index a4239c6..190659b 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -7,13 +7,9 @@ calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:sel label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #586f3f; } -label:backdrop selection, .selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: black; } +label:backdrop selection, .selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: #1d1b22; background-color: rgba(174, 180, 167, 0.7); } -<<<<<<< HEAD -label:backdrop selection:disabled, .selection-mode button.titlebutton:backdrop:disabled, label:backdrop:disabled:selected, calendar:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected { color: #7b9b58; } -======= -label:backdrop selection:disabled, .selection-mode button.titlebutton:backdrop:disabled, label:backdrop:disabled:selected, calendar:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected { color: #a6c582; } ->>>>>>> c45fbf5 (prerebase) +label:backdrop selection:disabled, .selection-mode button.titlebutton:backdrop:disabled, label:backdrop:disabled:selected, calendar:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected { color: #84a362; } * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #990000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 3px; -gtk-secondary-caret-color: #b0dd7e; } @@ -124,7 +120,7 @@ spinner:checked:disabled { opacity: 0.5; color: #552222; } .caption { font-weight: 400; font-size: 9pt; } /**************** Text Entries * */ -spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; } @@ -223,14 +219,10 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #b0dd7e; } :not(:backdrop) .entry-tag.button:active { background-color: #b0dd7e; color: rgba(0, 0, 0, 0.7); } /****************************************************** Buttons * */ -@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#b0dd7e), to(transparent)); } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)); } } -<<<<<<< HEAD button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) button.titlebutton:not(:hover):not(:active):not(:checked):not(:disabled), button.sidebar-button, notebook > header > tabs > arrow, scrollbar slider.flat:not(:hover):not(:active):not(:checked):not(:disabled), notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; } @@ -280,11 +272,7 @@ button.osd:disabled:backdrop, button.osd:disabled { border: none; } button.osd:backdrop { border: none; } -<<<<<<< HEAD .app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #002269; background-color: rgba(103, 137, 180, 0.7); border-color: #002269; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -.app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #002269; background-color: rgba(103, 137, 180, 0.7); outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { background-color: shade(rgba(103, 137, 180, 0.7), 1.1); } @@ -306,11 +294,7 @@ button.osd:backdrop { border: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -<<<<<<< HEAD button.suggested-action { color: black; background-color: #b0dd7e; border-color: black; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -button.suggested-action { color: white; background-color: #b0dd7e; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.455686); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.455686); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) button.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #b0dd7e; } @@ -326,11 +310,7 @@ button.suggested-action:disabled { color: #552222; background-color: #938989; ba button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #979687; } -<<<<<<< HEAD button.destructive-action { color: white; background-color: #990000; border-color: white; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -button.destructive-action { color: white; background-color: #990000; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) button.destructive-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #990000; } @@ -368,25 +348,17 @@ button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; padding: 2 button.circular label { padding: 0; } -<<<<<<< HEAD button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#bcbeb9, 1.1); } -stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } stacksidebar 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, left 4px; } -<<<<<<< HEAD .inline-toolbar toolbutton > button { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -.inline-toolbar toolbutton > button { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) .inline-toolbar toolbutton > button:hover { background-color: shade(#bcbeb9, 1.1); } @@ -564,11 +536,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; } .selection-mode .titlebar:backdrop:not(headerbar) label, .selection-mode.titlebar:backdrop:not(headerbar) label, .selection-mode headerbar:backdrop label, headerbar.selection-mode:backdrop label { text-shadow: none; color: #000000; } -<<<<<<< HEAD .selection-mode .titlebar:not(headerbar) button, .selection-mode.titlebar:not(headerbar) button, .selection-mode headerbar button, headerbar.selection-mode button { color: #000000; background-color: #b0dd7e; border-color: #000000; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -.selection-mode .titlebar:not(headerbar) button, .selection-mode.titlebar:not(headerbar) button, .selection-mode headerbar button, headerbar.selection-mode button { color: #000000; background-color: #b0dd7e; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) .selection-mode button.titlebutton, .selection-mode .titlebar:not(headerbar) button.flat, .selection-mode.titlebar:not(headerbar) button.flat, .selection-mode headerbar button.flat, headerbar.selection-mode button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -590,11 +558,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; } .selection-mode .titlebar:not(headerbar) button:disabled:active, .selection-mode .titlebar:not(headerbar) button:disabled:checked, .selection-mode.titlebar:not(headerbar) button:disabled:active, .selection-mode.titlebar:not(headerbar) button:disabled:checked, .selection-mode headerbar button:disabled:active, .selection-mode headerbar button:disabled:checked, headerbar.selection-mode button:disabled:active, headerbar.selection-mode button:disabled:checked { color: #552222; background-color: #979687; } -<<<<<<< HEAD .selection-mode .titlebar:not(headerbar) button.suggested-action, .selection-mode.titlebar:not(headerbar) button.suggested-action, .selection-mode headerbar button.suggested-action, headerbar.selection-mode button.suggested-action { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #8bcd41; } -======= -.selection-mode .titlebar:not(headerbar) button.suggested-action, .selection-mode.titlebar:not(headerbar) button.suggested-action, .selection-mode headerbar button.suggested-action, headerbar.selection-mode button.suggested-action { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #8bcd41; } ->>>>>>> c45fbf5 (prerebase) .selection-mode .titlebar:not(headerbar) button.suggested-action:hover, .selection-mode.titlebar:not(headerbar) button.suggested-action:hover, .selection-mode headerbar button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { background-color: shade(#bcbeb9, 1.1); border-color: #8bcd41; } @@ -674,11 +638,7 @@ treeview.view:disabled { color: #552222; } treeview.view:disabled:selected { color: #6a854c; } -<<<<<<< HEAD -treeview.view:disabled:selected:backdrop { color: #7b9b58; } -======= -treeview.view:disabled:selected:backdrop { color: #a6c582; } ->>>>>>> c45fbf5 (prerebase) +treeview.view:disabled:selected:backdrop { color: #84a362; } treeview.view:disabled:backdrop { color: #818181; } @@ -704,11 +664,7 @@ treeview.view.expander:selected { color: #354226; } treeview.view.expander:selected:hover { color: #000000; } -<<<<<<< HEAD -treeview.view.expander:selected:backdrop { color: #354226; } -======= -treeview.view.expander:selected:backdrop { color: #98a587; } ->>>>>>> c45fbf5 (prerebase) +treeview.view.expander:selected:backdrop { color: #49553e; } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } @@ -1025,11 +981,7 @@ switch:backdrop:checked { color: #a7a7a7; border-color: #000000; background-colo switch:backdrop:disabled { color: #818181; border-color: #828282; background-color: #938989; } -<<<<<<< HEAD switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) switch image { color: transparent; } @@ -1080,7 +1032,7 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi popover check.right:dir(ltr), popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; } -check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #6a6a6a; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #000000; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } check:hover, radio:hover { background-image: linear-gradient(to bottom, #d3d4d1 10%, #c6c8c4 90%); } @@ -1161,7 +1113,7 @@ progressbar trough:backdrop:disabled, scale fill:backdrop:disabled, scale trough row:selected progressbar trough, progressbar row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough, scale row:selected trough { border-color: #8bcd41; } -.osd progressbar trough, progressbar .osd trough, .osd scale fill, scale .osd fill, .osd scale trough, scale .osd trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.8); } +.osd progressbar trough, progressbar .osd trough, .osd scale fill, scale .osd fill, .osd scale trough, scale .osd trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.3); } .osd progressbar trough:disabled, progressbar .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled, .osd scale trough:disabled, scale .osd trough:disabled { background-color: rgba(93, 127, 173, 0.5); } @@ -1203,11 +1155,7 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; } -<<<<<<< HEAD scale slider { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #626262; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } -======= -scale slider { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #626262; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } ->>>>>>> c45fbf5 (prerebase) scale slider:hover { background-color: shade(#bcbeb9, 1.1); } @@ -1337,37 +1285,38 @@ progressbar.osd progress { border-style: none; border-radius: 0; } progressbar trough.empty progress { all: unset; } /************* Level Bar * */ -levelbar.horizontal block { min-height: 3px; } +/************* Level Bar * */ +levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } -levelbar.horizontal.discrete block { margin: 0 1px; min-width: 32px; } +levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } -levelbar.vertical block { min-width: 3px; } +levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } -levelbar.vertical.discrete block { margin: 1px 0; min-height: 32px; } +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } -levelbar:backdrop { transition: 200ms ease-out; } +levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } -levelbar trough { border: 1px solid; padding: 1px; border-radius: 3px; color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } -levelbar trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; box-shadow: none; } +levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } -levelbar block { border: 1px solid; border-radius: 1px; } +levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } -levelbar block.low { border-color: #8f4700; background-color: #f57900; } +levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } -levelbar block.low:backdrop { border-color: #f57900; } +levelbar > trough { padding: 1px; color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; } -levelbar block.high, levelbar block:not(.empty) { border-color: #7ec233; background-color: #b0dd7e; } +levelbar > trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; box-shadow: none; } -levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { border-color: #b0dd7e; } +levelbar > trough > block { border: 1px solid; } -levelbar block.full { border-color: #40760c; background-color: #73d216; } +levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } -levelbar block.full:backdrop { border-color: #73d216; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } -levelbar block.empty { background-color: transparent; border-color: rgba(36, 31, 49, 0.2); } +levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } -levelbar block.empty:backdrop { border-color: rgba(102, 99, 108, 0.15); } +levelbar > trough > block.empty { background-color: #9a9a9a; border-color: #9a9a9a; } /**************** Print dialog * */ printdialog paper { color: #241f31; border: 1px solid #797979; background: white; padding: 0; } @@ -1542,7 +1491,7 @@ placessidebar row:disabled { color: #552222; } placessidebar row:backdrop { color: #66636c; } -placessidebar row:backdrop:selected { color: black; } +placessidebar row:backdrop:selected { color: #1d1b22; } placessidebar row:backdrop:disabled { color: #818181; } @@ -1612,11 +1561,7 @@ infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { text-shadow: none; } -<<<<<<< HEAD infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #241f31; background-color: #a7a7a7; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #241f31; background-color: #a7a7a7; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { background-color: shade(#a7a7a7, 1.1); } @@ -1694,11 +1639,7 @@ colorswatch#add-color-button { border-radius: 5px 5px 0 0; } colorswatch#add-color-button:only-child { border-radius: 5px; } -<<<<<<< HEAD colorswatch#add-color-button overlay { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -colorswatch#add-color-button overlay { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) colorswatch#add-color-button overlay:hover { background-color: shade(#bcbeb9, 1.1); } diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 913d18f..b802c23 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -14,13 +14,9 @@ label:selected, calendar > grid > label.day-number:selected, row:selected, colum label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #586f3f; } -label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: black; } +label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: #1d1b22; background-color: rgba(174, 180, 167, 0.7); } -<<<<<<< HEAD -label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #7b9b58; } -======= -label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #a6c582; } ->>>>>>> c45fbf5 (prerebase) +label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #84a362; } /*************** Base States * */ .background { color: #241f31; background-color: #a7a7a7; } @@ -43,7 +39,7 @@ image:disabled { -gtk-icon-filter: opacity(0.5); } textview > text { background-color: transparent; } -textview > text > selection { background-color: rgba(174, 174, 174, 0.5); } +textview > text > selection { background-color: rgba(174, 180, 167, 0.7); } textview > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); } @@ -89,7 +85,7 @@ label { outline: 0 solid transparent; outline-offset: 4px; } label:focus:focus-visible { outline-color: rgba(176, 221, 126, 0.5); outline-width: 2px; outline-offset: -2px; } -label > selection { background-color: rgba(174, 174, 174, 0.5); color: #000000; } +label > selection { background-color: rgba(174, 180, 167, 0.7); color: #000000; } label > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); } @@ -144,7 +140,7 @@ spinner:checked:disabled { opacity: 0.5; color: #552222; } .caption { font-weight: 400; font-size: 9pt; } /**************** Text Entries * */ -spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; } @@ -162,7 +158,7 @@ spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:n spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #552222; border-color: #552222; background-color: #938989; } -spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } spinbutton.vertical > text > text > selection:focus-within, spinbutton:not(.vertical) > text > selection:focus-within, entry > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; } @@ -221,18 +217,14 @@ treeview entry.flat, treeview entry { border-radius: 0; background-image: none; treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #b0dd7e; } /******************* Editable Labels * */ -editablelabel > stack > text { color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +editablelabel > stack > text { color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } /*********** Buttons * */ -@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #b0dd7e 0%, rgba(176, 221, 126, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #b0dd7e 95%, rgba(176, 221, 126, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } } /****************************************************** Buttons * */ -<<<<<<< HEAD scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } -======= -scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } ->>>>>>> c45fbf5 (prerebase) scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { outline: 0 solid transparent; outline-offset: 4px; } @@ -286,11 +278,7 @@ button.osd:hover { border: none; box-shadow: none; } button.osd:active, button.osd:checked { border: none; box-shadow: none; } -<<<<<<< HEAD .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #002269; background-color: rgba(103, 137, 180, 0.7); border-color: #002269; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #002269; background-color: rgba(103, 137, 180, 0.7); outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { background-color: shade(rgba(103, 137, 180, 0.7), 1.1); } @@ -308,11 +296,7 @@ button.osd:active, button.osd:checked { border: none; box-shadow: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -<<<<<<< HEAD button.suggested-action { color: black; background-color: #b0dd7e; border-color: black; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } -======= -button.suggested-action { color: white; background-color: #b0dd7e; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.455686); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.455686); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } ->>>>>>> c45fbf5 (prerebase) button.suggested-action { outline: 0 solid transparent; outline-offset: 4px; } @@ -330,11 +314,7 @@ button.suggested-action:disabled { color: #552222; background-color: #938989; ba button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #979687; } -<<<<<<< HEAD button.destructive-action { color: white; background-color: #990000; border-color: white; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } -======= -button.destructive-action { color: white; background-color: #990000; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } ->>>>>>> c45fbf5 (prerebase) button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } @@ -366,7 +346,7 @@ menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; menubutton.circular button label, button.circular label { padding: 0; } -stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #b0dd7e 96%, rgba(176, 221, 126, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #f57900 96%, rgba(245, 121, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -418,21 +398,13 @@ popover.menu box.circular-buttons button.circular.image-button.model:hover, list popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):active, list > row button.image-button:not(.flat):checked { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -<<<<<<< HEAD popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button:not(.flat).suggested-action { color: white; background-color: #b0dd7e; border-color: white; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.455686); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.455686); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } -======= -popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button:not(.flat).suggested-action { color: white; background-color: #b0dd7e; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.455686); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.455686); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } ->>>>>>> c45fbf5 (prerebase) popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button:not(.flat).suggested-action { outline: 0 solid transparent; outline-offset: 4px; } popover.menu box.circular-buttons button.suggested-action.circular.image-button.model:focus:focus-visible, list > row button.image-button:not(.flat).suggested-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } -<<<<<<< HEAD popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button:not(.flat).destructive-action { color: white; background-color: #990000; border-color: white; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } -======= -popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button:not(.flat).destructive-action { color: white; background-color: #990000; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.76); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } ->>>>>>> c45fbf5 (prerebase) popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button:not(.flat).destructive-action { outline: 0 solid transparent; outline-offset: 4px; } @@ -496,7 +468,7 @@ spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } -spinbutton.vertical > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +spinbutton.vertical > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } spinbutton.vertical > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #000000; } @@ -639,11 +611,7 @@ columnview.view:disabled, treeview.view:disabled { color: #552222; } columnview.view:disabled:selected, treeview.view:disabled:selected { color: #6a854c; } -<<<<<<< HEAD -columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #7b9b58; } -======= -columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #a6c582; } ->>>>>>> c45fbf5 (prerebase) +columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #84a362; } columnview.view.separator, treeview.view.separator { min-height: 2px; color: #7e7d7d; } @@ -940,11 +908,7 @@ switch:checked { color: #000000; border-color: #8bcd41; background-color: #b0dd7 switch:disabled { color: #552222; border-color: #797979; background-color: #938989; text-shadow: none; } -<<<<<<< HEAD switch > slider { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-color: #797979; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } -======= -switch > slider { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-color: #797979; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } ->>>>>>> c45fbf5 (prerebase) switch > image { color: transparent; } @@ -985,7 +949,7 @@ checkbutton.text-button { padding: 4px; } check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } -check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #6a6a6a; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #000000; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } check:hover, radio:hover { background-image: linear-gradient(to bottom, #d3d4d1 10%, #c6c8c4 90%); } @@ -1036,7 +1000,7 @@ progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:di row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.8); border-color: #8bcd41; } -.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.8); } +.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.3); } .osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(93, 127, 173, 0.5); } @@ -1076,11 +1040,7 @@ scale > trough > fill:disabled { border-color: transparent; background-color: tr .osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } -<<<<<<< HEAD scale > trough > slider { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } -======= -scale > trough > slider { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } ->>>>>>> c45fbf5 (prerebase) scale > trough > slider:hover { background-color: shade(#bcbeb9, 1.1); } @@ -1219,6 +1179,7 @@ progressbar.osd > trough > progress { border-style: none; border-radius: 0; } progressbar > trough.empty > progress { all: unset; } +/************* Level Bar * */ /************* Level Bar * */ levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } @@ -1238,7 +1199,7 @@ levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } -levelbar > trough { padding: 1px; color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +levelbar > trough { padding: 1px; color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; } levelbar > trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; } @@ -1332,7 +1293,7 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { ou columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #b0dd7e; } -columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; } @@ -1575,11 +1536,7 @@ colorswatch#add-color-button { border-radius: 5px 0 0 5px; } colorswatch#add-color-button:only-child { border-radius: 5px; } -<<<<<<< HEAD colorswatch#add-color-button > overlay { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } -======= -colorswatch#add-color-button > overlay { color: #241f31; background-color: #bcbeb9; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } ->>>>>>> c45fbf5 (prerebase) colorswatch#add-color-button.activatable:hover > overlay { background-color: shade(#bcbeb9, 1.1); } diff --git a/previews/gtk3-gtk4-gtk2-desktop.png b/previews/gtk3-gtk4-gtk2-desktop.png new file mode 100644 index 0000000..476c217 Binary files /dev/null and b/previews/gtk3-gtk4-gtk2-desktop.png differ diff --git a/previews/gtk3wf-2.png b/previews/gtk3wf-2.png new file mode 100644 index 0000000..cd0a603 Binary files /dev/null and b/previews/gtk3wf-2.png differ diff --git a/previews/gtk3wf-3.png b/previews/gtk3wf-3.png new file mode 100644 index 0000000..c0bbf0c Binary files /dev/null and b/previews/gtk3wf-3.png differ diff --git a/previews/logo.png b/previews/logo.png new file mode 100644 index 0000000..e2fa8ce Binary files /dev/null and b/previews/logo.png differ diff --git a/source/common/checkradios.scss b/source/common/checkradios.scss index 87ce225..69ad991 100644 --- a/source/common/checkradios.scss +++ b/source/common/checkradios.scss @@ -13,7 +13,7 @@ // possible $t values: // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu - $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color); + $_border_color: $tc;//if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color); $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7)); @if $t==normal { diff --git a/source/common/common_colors.scss b/source/common/common_colors.scss index 596f74a..b1cc709 100644 --- a/source/common/common_colors.scss +++ b/source/common/common_colors.scss @@ -62,8 +62,8 @@ $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); $backdrop_bg_color: $bg_color; $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); -$backdrop_selected_fg_color: mix($backdrop_text_color, $selected_fg_color, 0.5); -$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,80%),0.5); +$backdrop_selected_fg_color: mix($backdrop_text_color, $selected_fg_color, 50%); +$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,50%),0.3); $backdrop_borders_color: mix($borders_color, $bg_color, 80%); $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); diff --git a/source/common/common_common.scss b/source/common/common_common.scss index 3a669db..217a536 100644 --- a/source/common/common_common.scss +++ b/source/common/common_common.scss @@ -42,6 +42,7 @@ $menu_radius: 5px; @at-root %selected_items_backdrop, &:backdrop { color: $backdrop_selected_fg_color; + background-color: $backdrop_selected_bg_color; &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } diff --git a/source/common/gtk3_removed.scss b/source/common/gtk3_removed.scss index 026c758..bc50da6 100644 --- a/source/common/gtk3_removed.scss +++ b/source/common/gtk3_removed.scss @@ -492,3 +492,78 @@ button { &.dragging, &.hovering { opacity: 0.8; } } + + +/************* + * Level Bar * + *************/ + +levelbar { + &.horizontal { + block { + min-height: 3px; + } + + &.discrete block { + margin: 0 1px; + min-width: 32px; + } + } + + &.vertical { + block { + min-width: 3px; + } + + &.discrete block { + margin: 1px 0; + min-height: 32px; + } + } + + &:backdrop { transition: $backdrop_transition; } + + trough { + border: 1px solid; + padding: 1px; + border-radius: 3px; + @include entry(normal); + + &:backdrop { @include entry(backdrop); } + border-color: $borders_color; + } + + block { + border: 1px solid; + border-radius: 1px; + + &.low { + border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color); + background-color: $warning_color; + + &:backdrop { border-color: $warning_color; }; + } + + &.high, + &:not(.empty) { + border-color: if($variant == 'light', darken($progress_bg_color, 20%), $progress_bg_color); + background-color: $progress_bg_color; + + &:backdrop { border-color: $progress_bg_color; } + } + + &.full { + border-color: if($variant == 'light', darken($success_color, 20%), $success_color); + background-color: $success_color; + + &:backdrop { border-color: $success_color; }; + } + + &.empty { + background-color: transparent; + border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9)); + + &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } + } + } +} diff --git a/source/common/levelbar.scss b/source/common/levelbar.scss new file mode 100644 index 0000000..052930d --- /dev/null +++ b/source/common/levelbar.scss @@ -0,0 +1,87 @@ +/************* + * Level Bar * + *************/ + +$_levelbar_size: 9px; +$_levelbar_border_radius: 5px; + +levelbar { + &.horizontal { + trough > block { + min-height: $_levelbar_size; + border-radius: $_levelbar_border_radius; + + &:dir(rtl) { + border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0; + } + + &:dir(ltr) { + border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius; + } + + &.empty,&.full { + border-radius: $_levelbar_border_radius; + } + } + + // segmented level bar + &.discrete { + trough > block { + min-height: 2px; + margin: 1px; + min-width: 24px; + border-radius:0; + &:first-child {border-radius: 2px 0 0 2px;} + &:last-child { + border-radius: 0 2px 2px 0; + } + } + } + } + + &.vertical { + trough > block { + min-width: $_levelbar_size; + border-radius: $_levelbar_border_radius; + } + + &.discrete > trough > block { + min-width: $_levelbar_size - 7px; + margin: 1px 0; + min-height: 32px; + } + } + + > trough { + padding: 1px; + @include entry(normal); + &:backdrop { @include entry(backdrop); } + border-radius: $_levelbar_border_radius; + } + + // level bar colours + > trough > block { + border: 1px solid; + + &.low { + border-color: $warning_color; + background-color: $warning_color; + } + + &.high, + &:not(.empty) { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + + &.full { + border-color: $success_color; + background-color: $success_color; + } + + &.empty { + background-color: darken($bg_color, 5%); + border-color: darken($bg_color, 5%); + } + } +} diff --git a/source/gtk3/_common.scss b/source/gtk3/_common.scss index 191d539..6dbbf88 100644 --- a/source/gtk3/_common.scss +++ b/source/gtk3/_common.scss @@ -543,8 +543,7 @@ treeview entry { * Buttons * ******************************************************/ // stuff for .needs-attention -$_dot_color: if($variant=='light', $selected_bg_color, - lighten($selected_bg_color,15%)); +$_dot_color: $warning_color;//if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @keyframes needs_attention { from { background-image: -gtk-gradient(radial, @@ -3055,7 +3054,7 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work // OSD .osd & { border-color: $osd_borders_color; - background-color: transparentize($osd_borders_color, 0.2); + background-color: transparentize($osd_borders_color, 0.7); &:disabled { background-color: $osd_insensitive_bg_color; } } @@ -3488,74 +3487,9 @@ progressbar { /************* * Level Bar * *************/ -levelbar { - &.horizontal { - block { - min-height: 3px; - } - &.discrete block { - margin: 0 1px; - min-width: 32px; - } - } +@import '../common/levelbar.scss'; - &.vertical { - block { - min-width: 3px; - } - - &.discrete block { - margin: 1px 0; - min-height: 32px; - } - } - - &:backdrop { transition: $backdrop_transition; } - - trough { - border: 1px solid; - padding: 1px; - border-radius: 3px; - @include entry(normal); - - &:backdrop { @include entry(backdrop); } - } - - block { - border: 1px solid; - border-radius: 1px; - - &.low { - border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color); - background-color: $warning_color; - - &:backdrop { border-color: $warning_color; }; - } - - &.high, - &:not(.empty) { - border-color: if($variant == 'light', darken($progress_bg_color, 20%), $progress_bg_color); - background-color: $progress_bg_color; - - &:backdrop { border-color: $progress_bg_color; } - } - - &.full { - border-color: if($variant == 'light', darken($success_color, 20%), $success_color); - background-color: $success_color; - - &:backdrop { border-color: $success_color; }; - } - - &.empty { - background-color: transparent; - border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9)); - - &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } - } - } -} /**************** diff --git a/source/gtk3/_drawing.scss b/source/gtk3/_drawing.scss index 96b13c0..ef18848 100644 --- a/source/gtk3/_drawing.scss +++ b/source/gtk3/_drawing.scss @@ -52,7 +52,7 @@ $gtk: 4; @if $t==normal { color: $text_color; - border-color: $borders_color; + border-color: $text_color;//$borders_color; background-color: $base_color; @include _shadows(entry_focus_shadow(transparentize($fc, 1)),inset $_entry_shadow, 0 1px $_hilight_color, $_entry_edge); // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. diff --git a/source/gtk3/gtk-new.css b/source/gtk3/gtk-new.css index d93ffcb..190659b 100644 --- a/source/gtk3/gtk-new.css +++ b/source/gtk3/gtk-new.css @@ -7,9 +7,9 @@ calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:sel label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #586f3f; } -label:backdrop selection, .selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: black; } +label:backdrop selection, .selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: #1d1b22; background-color: rgba(174, 180, 167, 0.7); } -label:backdrop selection:disabled, .selection-mode button.titlebutton:backdrop:disabled, label:backdrop:disabled:selected, calendar:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected { color: #7b9b58; } +label:backdrop selection:disabled, .selection-mode button.titlebutton:backdrop:disabled, label:backdrop:disabled:selected, calendar:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected { color: #84a362; } * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #990000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 3px; -gtk-secondary-caret-color: #b0dd7e; } @@ -120,7 +120,7 @@ spinner:checked:disabled { opacity: 0.5; color: #552222; } .caption { font-weight: 400; font-size: 9pt; } /**************** Text Entries * */ -spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; } @@ -219,7 +219,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #b0dd7e; } :not(:backdrop) .entry-tag.button:active { background-color: #b0dd7e; color: rgba(0, 0, 0, 0.7); } /****************************************************** Buttons * */ -@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#b0dd7e), to(transparent)); } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)); } } button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -352,7 +352,7 @@ button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):n button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#bcbeb9, 1.1); } -stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -638,7 +638,7 @@ treeview.view:disabled { color: #552222; } treeview.view:disabled:selected { color: #6a854c; } -treeview.view:disabled:selected:backdrop { color: #7b9b58; } +treeview.view:disabled:selected:backdrop { color: #84a362; } treeview.view:disabled:backdrop { color: #818181; } @@ -664,7 +664,7 @@ treeview.view.expander:selected { color: #354226; } treeview.view.expander:selected:hover { color: #000000; } -treeview.view.expander:selected:backdrop { color: #354226; } +treeview.view.expander:selected:backdrop { color: #49553e; } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } @@ -1032,7 +1032,7 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi popover check.right:dir(ltr), popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; } -check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #6a6a6a; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #000000; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } check:hover, radio:hover { background-image: linear-gradient(to bottom, #d3d4d1 10%, #c6c8c4 90%); } @@ -1113,7 +1113,7 @@ progressbar trough:backdrop:disabled, scale fill:backdrop:disabled, scale trough row:selected progressbar trough, progressbar row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough, scale row:selected trough { border-color: #8bcd41; } -.osd progressbar trough, progressbar .osd trough, .osd scale fill, scale .osd fill, .osd scale trough, scale .osd trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.8); } +.osd progressbar trough, progressbar .osd trough, .osd scale fill, scale .osd fill, .osd scale trough, scale .osd trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.3); } .osd progressbar trough:disabled, progressbar .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled, .osd scale trough:disabled, scale .osd trough:disabled { background-color: rgba(93, 127, 173, 0.5); } @@ -1285,37 +1285,38 @@ progressbar.osd progress { border-style: none; border-radius: 0; } progressbar trough.empty progress { all: unset; } /************* Level Bar * */ -levelbar.horizontal block { min-height: 3px; } +/************* Level Bar * */ +levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } -levelbar.horizontal.discrete block { margin: 0 1px; min-width: 32px; } +levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } -levelbar.vertical block { min-width: 3px; } +levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } -levelbar.vertical.discrete block { margin: 1px 0; min-height: 32px; } +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } -levelbar:backdrop { transition: 200ms ease-out; } +levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } -levelbar trough { border: 1px solid; padding: 1px; border-radius: 3px; color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } -levelbar trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; box-shadow: none; } +levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } -levelbar block { border: 1px solid; border-radius: 1px; } +levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } -levelbar block.low { border-color: #8f4700; background-color: #f57900; } +levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } -levelbar block.low:backdrop { border-color: #f57900; } +levelbar > trough { padding: 1px; color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 0 0 1px rgba(176, 221, 126, 0), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; } -levelbar block.high, levelbar block:not(.empty) { border-color: #7ec233; background-color: #b0dd7e; } +levelbar > trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; box-shadow: none; } -levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { border-color: #b0dd7e; } +levelbar > trough > block { border: 1px solid; } -levelbar block.full { border-color: #40760c; background-color: #73d216; } +levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } -levelbar block.full:backdrop { border-color: #73d216; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } -levelbar block.empty { background-color: transparent; border-color: rgba(36, 31, 49, 0.2); } +levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } -levelbar block.empty:backdrop { border-color: rgba(102, 99, 108, 0.15); } +levelbar > trough > block.empty { background-color: #9a9a9a; border-color: #9a9a9a; } /**************** Print dialog * */ printdialog paper { color: #241f31; border: 1px solid #797979; background: white; padding: 0; } @@ -1490,7 +1491,7 @@ placessidebar row:disabled { color: #552222; } placessidebar row:backdrop { color: #66636c; } -placessidebar row:backdrop:selected { color: black; } +placessidebar row:backdrop:selected { color: #1d1b22; } placessidebar row:backdrop:disabled { color: #818181; } diff --git a/source/gtk4/_common.scss b/source/gtk4/_common.scss index fe7046e..5d14b61 100644 --- a/source/gtk4/_common.scss +++ b/source/gtk4/_common.scss @@ -466,8 +466,7 @@ editablelabel > stack > text { * Buttons * ***********/ // stuff for .needs-attention -$_dot_color: if($variant=='light', $selected_bg_color, - lighten($selected_bg_color,15%)); +$_dot_color: $warning_color; //if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @keyframes needs_attention { from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); } to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); } @@ -2578,7 +2577,7 @@ treeview.view radio:selected { &:selected, &:focus, & { @extend %radio; }} // Th // OSD .osd & { border-color: $osd_borders_color; - background-color: transparentize($osd_borders_color, 0.2); + background-color: transparentize($osd_borders_color, 0.7); &:disabled { background-color: $osd_insensitive_bg_color; } } @@ -2992,88 +2991,7 @@ progressbar { * Level Bar * *************/ -$_levelbar_size: 9px; -$_levelbar_border_radius: 5px; - -levelbar { - &.horizontal { - trough > block { - min-height: $_levelbar_size; - border-radius: $_levelbar_border_radius; - - &:dir(rtl) { - border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0; - } - - &:dir(ltr) { - border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius; - } - - &.empty,&.full { - border-radius: $_levelbar_border_radius; - } - } - - // segmented level bar - &.discrete { - trough > block { - min-height: 2px; - margin: 1px; - min-width: 24px; - border-radius:0; - &:first-child {border-radius: 2px 0 0 2px;} - &:last-child { - border-radius: 0 2px 2px 0; - } - } - } - } - - &.vertical { - trough > block { - min-width: $_levelbar_size; - border-radius: $_levelbar_border_radius; - } - - &.discrete > trough > block { - min-width: $_levelbar_size - 7px; - margin: 1px 0; - min-height: 32px; - } - } - - > trough { - padding: 1px; - @include entry(normal); - &:backdrop { @include entry(backdrop); } - } - - // level bar colours - > trough > block { - border: 1px solid; - - &.low { - border-color: $warning_color; - background-color: $warning_color; - } - - &.high, - &:not(.empty) { - border-color: $selected_bg_color; - background-color: $selected_bg_color; - } - - &.full { - border-color: $success_color; - background-color: $success_color; - } - - &.empty { - background-color: darken($bg_color, 5%); - border-color: darken($bg_color, 5%); - } - } -} +@import '../common/levelbar.scss'; /**************** diff --git a/source/gtk4/_drawing.scss b/source/gtk4/_drawing.scss index be59669..1eb464a 100644 --- a/source/gtk4/_drawing.scss +++ b/source/gtk4/_drawing.scss @@ -60,7 +60,7 @@ $gtk: 4; @if $t==normal { color: $text_color; - border-color: $borders_color; + border-color: $text_color;// $borders_color; background-color: $base_color; @include _shadows(inset $_entry_shadow, 0 1px $_hilight_color); // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. diff --git a/source/gtk4/gtk-new.css b/source/gtk4/gtk-new.css index 186fc29..b802c23 100644 --- a/source/gtk4/gtk-new.css +++ b/source/gtk4/gtk-new.css @@ -14,9 +14,9 @@ label:selected, calendar > grid > label.day-number:selected, row:selected, colum label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #586f3f; } -label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: black; } +label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: #1d1b22; background-color: rgba(174, 180, 167, 0.7); } -label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #7b9b58; } +label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #84a362; } /*************** Base States * */ .background { color: #241f31; background-color: #a7a7a7; } @@ -39,7 +39,7 @@ image:disabled { -gtk-icon-filter: opacity(0.5); } textview > text { background-color: transparent; } -textview > text > selection { background-color: rgba(174, 174, 174, 0.5); } +textview > text > selection { background-color: rgba(174, 180, 167, 0.7); } textview > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); } @@ -85,7 +85,7 @@ label { outline: 0 solid transparent; outline-offset: 4px; } label:focus:focus-visible { outline-color: rgba(176, 221, 126, 0.5); outline-width: 2px; outline-offset: -2px; } -label > selection { background-color: rgba(174, 174, 174, 0.5); color: #000000; } +label > selection { background-color: rgba(174, 180, 167, 0.7); color: #000000; } label > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); } @@ -140,7 +140,7 @@ spinner:checked:disabled { opacity: 0.5; color: #552222; } .caption { font-weight: 400; font-size: 9pt; } /**************** Text Entries * */ -spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; } @@ -158,7 +158,7 @@ spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:n spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #552222; border-color: #552222; background-color: #938989; } -spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } spinbutton.vertical > text > text > selection:focus-within, spinbutton:not(.vertical) > text > selection:focus-within, entry > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; } @@ -217,11 +217,11 @@ treeview entry.flat, treeview entry { border-radius: 0; background-image: none; treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #b0dd7e; } /******************* Editable Labels * */ -editablelabel > stack > text { color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +editablelabel > stack > text { color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } /*********** Buttons * */ -@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #b0dd7e 0%, rgba(176, 221, 126, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #b0dd7e 95%, rgba(176, 221, 126, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } } /****************************************************** Buttons * */ scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } @@ -346,7 +346,7 @@ menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; menubutton.circular button label, button.circular label { padding: 0; } -stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #b0dd7e 96%, rgba(176, 221, 126, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #f57900 96%, rgba(245, 121, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -468,7 +468,7 @@ spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } -spinbutton.vertical > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +spinbutton.vertical > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } spinbutton.vertical > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #000000; } @@ -611,7 +611,7 @@ columnview.view:disabled, treeview.view:disabled { color: #552222; } columnview.view:disabled:selected, treeview.view:disabled:selected { color: #6a854c; } -columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #7b9b58; } +columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #84a362; } columnview.view.separator, treeview.view.separator { min-height: 2px; color: #7e7d7d; } @@ -949,7 +949,7 @@ checkbutton.text-button { padding: 4px; } check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } -check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #6a6a6a; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #000000; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; } check:hover, radio:hover { background-image: linear-gradient(to bottom, #d3d4d1 10%, #c6c8c4 90%); } @@ -1000,7 +1000,7 @@ progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:di row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.8); border-color: #8bcd41; } -.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.8); } +.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.3); } .osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(93, 127, 173, 0.5); } @@ -1179,6 +1179,7 @@ progressbar.osd > trough > progress { border-style: none; border-radius: 0; } progressbar > trough.empty > progress { all: unset; } +/************* Level Bar * */ /************* Level Bar * */ levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } @@ -1198,7 +1199,7 @@ levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } -levelbar > trough { padding: 1px; color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } +levelbar > trough { padding: 1px; color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; } levelbar > trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; } @@ -1292,7 +1293,7 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { ou columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #b0dd7e; } -columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; } +columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; } columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; }