diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2d96ba3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.kate-swp diff --git a/gtk-2.0/gtkrc b/gtk-2.0/gtkrc index 6b3f83e..4bba054 100755 --- a/gtk-2.0/gtkrc +++ b/gtk-2.0/gtkrc @@ -1,522 +1,446 @@ -#Win2-7(Pixmap) -style "default" -{ - GtkNotebook::tab-overlap = 3 #no tab overlap; default is 2 - GtkNotebook::tab-curvature = 3 #pixels between text and border +# Please keep this gtkrc in sync with the other ones from Clearlooks based themes. - GtkButton::default-border = {1, 1, 1, 1} - GtkButton::default-spacing = 6 +gtk-color-scheme = "bg_color:#c9c9c9" +gtk-color-scheme = "fg_color:#1d1d1d" +gtk-color-scheme = "base_color:#e5e5e5" +gtk-color-scheme = "text_color:#1d1d1d" +gtk-color-scheme = "selected_bg_color:#9dccff" +gtk-color-scheme = "selected_fg_color:#000000" +gtk-color-scheme = "tooltip_bg_color:#ffffa4" +gtk-color-scheme = "tooltip_fg_color:#504300" +gtk-color-scheme = "disabled_bg_color:#c7bebe" +gtk-color-scheme = "disabled_fg_color:#552222" +gtk-color-scheme = "button_bg_color:#d3d3d3" +gtk-color-scheme = "button_fg_color:#1d1d1d" +gtk-color-scheme = "button_checked_bg_color:#9dccff" +gtk-color-scheme = "button_checked_fg_color:#000000" - GtkWidget::interior_focus = 0 - GtkWidget::focus_padding = 0 +style "default" { +xthickness = 1 +ythickness = 1 - GtkCheckButton::indicator_size = 13 - GtkCheckButton::indicator_spacing = 3 +####################### +# Style Properties +####################### +GtkButton::child-displacement-x = 1 +GtkButton::child-displacement-y = 1 +GtkButton::default-border = { 0, 0, 0, 0 } +GtkButton::image-spacing = 4 +GtkToolButton::icon-spacing = 4 - GtkPaned::handle_size = 6 +GtkCheckButton::indicator-size = 14 - GtkRange::trough-border = 0 - GtkRange::slider-width = 16 - GtkRange::stepper-size = 16 - GtkRange::stepper-spacing = 0 +GtkPaned::handle-size = 6 - GtkScrollbar::min-slider-length = 20 - GtkScrollbar::slider-width = 15 - GtkScrollbar::trough-side-details = 0 +GtkRange::trough-border = 0 +GtkRange::slider-width = 15 +GtkRange::stepper-size = 15 +GtkScale::slider-length = 23 +GtkScale::trough-side-details = 1 - GtkButton::default_border = { 0, 0, 0, 0 } - GtkButton::default_outside_border = { 0, 0, 0, 0 } - +GtkScrollbar::min-slider-length = 30 +GtkMenuBar::internal-padding = 0 +GtkExpander::expander-size = 16 +GtkToolbar::internal-padding = 1 +GtkTreeView::expander-size = 14 +GtkTreeView::vertical-separator = 0 -# GtkVScale::slider_length = 11 -# GtkVScale::slider_width = 21 -# GtkHScale::slider_length = 11 -# GtkHScale::slider_width = 21 +GtkMenu::horizontal-padding = 0 +GtkMenu::vertical-padding = 0 +WnckTasklist::fade-overlay-rect = 0 +# The following line hints to gecko (and possibly other appliations) +# that the entry should be drawn transparently on the canvas. +# Without this, gecko will fill in the background of the entry. +GtkEntry::honors-transparent-bg-hint = 1 +GtkEntry::progress-border = { 2, 2, 2, 2 } - GtkMenuBar::internal_padding = 1 - GtkOptionMenu::indicator_size = { 15, 8 } - GtkOptionMenu::indicator_spacing = { 8, 2, 0, 0 } - #GtkStatusbar::shadow_type = GTK_SHADOW_TRUE - GtkSpinButton::shadow_type = GTK_SHADOW_TRUE +#################### +# Color Definitions +#################### +bg[NORMAL] = @bg_color +bg[PRELIGHT] = shade (1.02, @bg_color) +bg[SELECTED] = @selected_bg_color +bg[INSENSITIVE] = @disabled_bg_color +bg[ACTIVE] = shade (0.9, @bg_color) +fg[NORMAL] = @fg_color +fg[PRELIGHT] = @fg_color +fg[SELECTED] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color +fg[ACTIVE] = @fg_color - GtkTreeView ::expander-size = 14 - GtkTreeView ::vertical-separator = 1 - GtkTreeView ::horizontal-separator = 2 - GtkTreeView ::allow-rules = 0 # Don't use different color for odd rows - GtkTreeView ::row-ending-details = 1 # Allow for rounded endings and transparent active rows +text[NORMAL] = @text_color +text[PRELIGHT] = @text_color +text[SELECTED] = @selected_fg_color +text[INSENSITIVE] = @disabled_fg_color +text[ACTIVE] = @selected_fg_color +base[NORMAL] = @base_color +base[PRELIGHT] = shade (0.95, @bg_color) +base[SELECTED] = @selected_bg_color +base[INSENSITIVE] = @disabled_bg_color +base[ACTIVE] = shade (0.9, @selected_bg_color) - xthickness = 2 - ythickness = 2 +engine "clearlooks" { +colorize_scrollbar = FALSE +reliefstyle = 1 +menubarstyle = 2 +toolbarstyle = 1 +animation = FALSE +radius = 3.0 +style = GUMMY - fg[NORMAL] = "#000" # Metacity and mouseover, Most text - fg[ACTIVE] = "#000" # Texto en pestañas sin foco, botones tambien - fg[PRELIGHT] = "#000" # Texto en botones hover - fg[SELECTED] = "#fff" # Texto seleccionado en listas - fg[INSENSITIVE] = "#c8c8c8" # Texto deshabilitado menu +# Set a hint to disable backward compatibility fallbacks. +hint = "use-hints" +} +} - bg[NORMAL] = "#e8ecf6" # Fondo ventana superior - bg[ACTIVE] = "#cee2f9" # Items de barra de tareas seleccionados - bg[PRELIGHT] = "#a4d2ff" # Boton prelight - bg[SELECTED] = "#3399FF" #"#a4d2ff" # Borde de pestaña, boton check, borde ejemplo en apariencia, controla metacity - bg[INSENSITIVE] = "#d8def0" # Botones inactivos +style "wide" { +xthickness = 2 +ythickness = 2 +} - base[NORMAL] = "#fcfcfc" # Fondo de Ventana #ffffdc - base[ACTIVE] = "#3399FF" # Elemento Seleccionado en ventana inactiva - base[PRELIGHT] = "#fff" # Linea exterior barra menu - base[INSENSITIVE] = "#fff" # Entrada inactiva - base[SELECTED] = "#3399FF" # Fondo seleccionado Escritorio +style "wider" { +xthickness = 3 +ythickness = 3 +} - text[NORMAL] = "#000" # Texto en ventanas - text[INSENSITIVE] = "#c8c8c8" # Texto insensitivo ventana - text[SELECTED] = "#fff" # Texto seleccionado - text[ACTIVE] = "#000" # Texto activo en ventana inactiva - text[PRELIGHT] = "#000" # Mouse sobre texto +style "entry" { +xthickness = 3 +ythickness = 3 - engine "pixmap" - { - image - { - function = HANDLE - recolorable = TRUE - overlay_file = "Panel/handle-v1.png" - overlay_stretch = FALSE - orientation = HORIZONTAL - } - image - { - function = HANDLE - recolorable = TRUE - overlay_file = "Panel/handle-h1.png" - overlay_stretch = FALSE - orientation = VERTICAL - } +bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color) +fg[SELECTED] = @text_color -####################### Shadows ############################x +engine "clearlooks" { +focus_color = shade (0.65, @selected_bg_color) +} +} - image - { - function = SHADOW - shadow = IN - recolorable = FALSE - file = "Shadows/shadow-in.png" - border = { 3, 3, 3, 3 } - stretch = TRUE - } - image - { - function = SHADOW - shadow = OUT - recolorable = TRUE - file = "Shadows/shadow-out.png" - stretch = TRUE - } +style "spinbutton" { - image - { - function = SHADOW - shadow = ETCHED_IN - recolorable = TRUE - file = "Frame-Gap/frame1.png" - border = { 3, 3, 3, 3 } - stretch = TRUE - } - image - { - function = SHADOW - shadow = ETCHED_OUT - recolorable = TRUE - file = "Shadows/shadow-none.png" - border = { 3, 3, 3, 3 } - stretch = TRUE - } - image - { - function = SHADOW_GAP - recolorable = TRUE - file = "Frame-Gap/frame1.png" - border = { 3, 3, 3, 3 } - stretch = TRUE - gap_start_file = "Frame-Gap/frame-gap-start.png" - gap_start_border = { 2, 0, 2, 0 } - gap_end_file = "Frame-Gap/frame-gap-end.png" - gap_end_border = { 0, 2, 2, 0 } - gap_side = TOP - } +engine "clearlooks" { +hint = "spinbutton" +} +} - image - { - function = VLINE - recolorable = TRUE - file = "Lines/line-v.png" - border = { 1, 1, 0, 0 } - stretch = TRUE - } - image - { - function = HLINE - recolorable = TRUE - file = "Lines/line-h.png" - border = { 21, 0, 1, 1 } - stretch = TRUE - } +style "scale" { +xthickness = 2 +ythickness = 2 - # foco +engine "clearlooks" { +hint = "scale" +} +} - image - { - function = FOCUS - recolorable = TRUE - file = "Others/focus.png" - border = { 6, 0, 6, 0 } - stretch = TRUE - } +style "vscale" { - # flechas +engine "clearlooks" { +hint = "vscale" +} +} - image - { - function = ARROW - recolorable = TRUE - overlay_file = "Arrows/arrow-up.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = UP - } - image - { - function = ARROW - state = NORMAL - recolorable = TRUE - overlay_file = "Arrows/arrow-down.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = DOWN - } - image - { - function = ARROW - state = PRELIGHT - recolorable = TRUE - overlay_file = "Arrows/arrow-down-prelight.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = DOWN - } - image - { - function = ARROW - state = ACTIVE - recolorable = TRUE - overlay_file = "Arrows/arrow-down-pressed.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = DOWN - } +style "hscale" { - image - { - function = ARROW - state = INSENSITIVE - recolorable = TRUE - overlay_file = "Arrows/arrow-down-insens.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = DOWN - } +engine "clearlooks" { +hint = "hscale" +} +} - image - { - function = ARROW - recolorable = TRUE - overlay_file = "Arrows/arrow-left.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = LEFT - } - image - { - function = ARROW - recolorable = TRUE - overlay_file = "Arrows/arrow-right.png" - overlay_border = { 0, 0, 0, 0 } - overlay_stretch = FALSE - arrow_direction = RIGHT - } - # image -# { -# function = BOX -# recolorable = TRUE -# file = "Others/null.png" -# border = { 3, 3, 3, 3 } -# stretch = TRUE -# } - } +style "scrollbar" { +xthickness = 2 +ythickness = 2 +engine "clearlooks" { +hint = "scrollbar" +} +} + +style "hscrollbar" { + +engine "clearlooks" { +hint = "hscrollbar" +} +} + +style "vscrollbar" { + +engine "clearlooks" { +hint = "vscrollbar" +} +} + +style "notebook_bg" { + +bg[NORMAL] = shade (1.02, @bg_color) +} + +style "button" { +xthickness = 3 +ythickness = 3 + +bg[NORMAL] = @button_bg_color +fg[NORMAL] = @button_fg_color +<<<<<<< HEAD +bg[PRELIGHT] = shade (1.06, @button_bg_color) +======= +bg[PRELIGHT] = shade (1.06, @button_checked_bg_color) +>>>>>>> 2c3647c (Finished templating. Now it's only a matter of adding more themes!) +bg[ACTIVE] = @button_checked_bg_color +fg[ACTIVE] = @button_checked_fg_color +} + +# The color is changed by the notebook_bg style, this style +# changes the x/ythickness +style "notebook" { +xthickness = 3 +ythickness = 3 +} + +style "statusbar" { + +engine "clearlooks" { +hint = "statusbar" +} +} + +style "comboboxentry" { + +engine "clearlooks" { +# Note: +# If you set the appears-as-list option on comboboxes in the theme, +# then you should set this hint on the combobox instead. +hint = "comboboxentry" +} +} + +style "menubar" { + +engine "clearlooks" { +hint = "menubar" +} +} + +style "menu" { +xthickness = 0 +ythickness = 0 + +bg[NORMAL] = shade (1.08, @bg_color) + +engine "clearlooks" { +radius = 0.0 +} +} + +style "menu_item" { +xthickness = 2 +ythickness = 3 + +fg[PRELIGHT] = @selected_fg_color +} + +# This style is there to modify the separator menu items. The goals are: +# 1. Get a specific height. +# 2. The line should go to the edges (ie. no border at the left/right) +style "separator_menu_item" { +xthickness = 1 +ythickness = 0 + +GtkSeparatorMenuItem::horizontal-padding = 0 +GtkWidget::wide-separators = 1 +GtkWidget::separator-width = 1 +GtkWidget::separator-height = 7 +} + +style "frame_title" { + +fg[NORMAL] = lighter (@fg_color) +} + +style "treeview" { + +engine "clearlooks" { +hint = "treeview" +} +} + +# The almost useless progress bar style +style "progressbar" { +xthickness = 1 +ythickness = 1 + +fg[PRELIGHT] = @selected_fg_color + +engine "clearlooks" { +# Explicitly set the radius for the progress bars inside menu items. +radius = 3.0 + +hint = "progressbar" +} +} + +# This style is based on the default style, so that the colors from the button +# style are overriden again. +style "treeview_header" = "default" { +xthickness = 2 +ythickness = 1 + +engine "clearlooks" { +hint = "treeview-header" +} +} + +style "tooltips" { +xthickness = 4 +ythickness = 4 + +bg[NORMAL] = @tooltip_bg_color +fg[NORMAL] = @tooltip_fg_color +} + +style "nautilus_location" { + +bg[NORMAL] = mix (0.60, shade (1.05, @bg_color), @selected_bg_color) +} + +# Wrokaroudn style for places where the text color is used instead of the fg color. +style "text_is_fg_color_workaround" { + +text[NORMAL] = @fg_color +text[PRELIGHT] = @fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color +} + +# Workaround style for menus where the text color is used instead of the fg color. +style "menuitem_text_is_fg_color_workaround" { + +text[NORMAL] = @fg_color +text[PRELIGHT] = @selected_fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color +} + +# Workaround style for places where the fg color is used instead of the text color. +style "fg_is_text_color_workaround" { + +fg[NORMAL] = @text_color +fg[PRELIGHT] = @text_color +fg[SELECTED] = @selected_fg_color +fg[ACTIVE] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color +} + +# Style to set the toolbar to use a flat style. This is because the "New" button in +# Evolution is not drawn transparent. So if there is a gradient in the background it will +# look really wrong. +# See http://bugzilla.gnome.org/show_bug.cgi?id=446953. +style "evo_new_button_workaround" { + +engine "clearlooks" { +toolbarstyle = 0 +} } -##################### RULER ################## +############################################################################### +# The following part of the gtkrc applies the different styles to the widgets. +############################################################################### -style "ruler" = "default" -{ - engine "pixmap" - { - image - { - function = BOX - recolorable = TRUE - detail = "vruler" - file = "Others/ruler.png" - border = { 2, 2, 2, 2 } - stretch = TRUE - } - image - { - function = BOX - recolorable = TRUE - detail = "hruler" - file = "Others/ruler.png" - border = { 2, 2, 2, 2 } - stretch = TRUE - } - } -} +# The default style is applied to every widget +class "GtkWidget" style "default" +class "GtkSeparator" style "wide" +class "GtkFrame" style "wide" +class "GtkCalendar" style "wide" +class "GtkEntry" style "entry" -style "flat" = "default" -{ - engine "pixmap" - { - image - { - function = SHADOW - } - } -} +class "GtkSpinButton" style "spinbutton" +class "GtkScale" style "scale" +class "GtkVScale" style "vscale" +class "GtkHScale" style "hscale" +class "GtkScrollbar" style "scrollbar" +class "GtkHScrollbar" style "hscrollbar" +class "GtkVScrollbar" style "vscrollbar" -style "layout" = "default" -{ - engine "pixmap" - { - image - { - function = SHADOW - detail = "entry" - shadow = IN - recolorable = FALSE - file = "Shadows/text.png" - border = { 1, 1, 1, 1 } - stretch = TRUE - } - image - { - function = BOX - detail = "button" - state = NORMAL - file = "Buttons/button-normal.png" - recolorable = TRUE - border = { 2, 3, 2, 3 } - stretch = TRUE - } - } -} +# General matching follows. The order is choosen so that the right styles override +# each other. EG. progressbar needs to be more important than the menu match. +widget_class "*" style "notebook_bg" +# This is not perfect, it could be done better. +# (That is modify *every* widget in the notebook, and change those back that +# we really don't want changed) +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "*" style "button" +widget_class "*" style "notebook" +widget_class "**" style "statusbar" +widget_class "**" style "comboboxentry" +widget_class "**" style "comboboxentry" -# SPIcons seem to erase the background first. That's why I can't use -# the button style. +widget_class "**" style "menubar" +widget_class "**" style "menu" +widget_class "**" style "menu_item" +widget_class "**" style "separator_menu_item" -style "SPbutton" -{ - engine "pixmap" - { - image - { - function = BOX - shadow = IN - recolorable = TRUE - file = "Shadows/shadow-out.png" - border = { 2, 2, 2, 2 } - stretch = TRUE - } - image - { - function = BOX - } - } -} +widget_class "*.." style "frame_title" +widget_class "*.*" style "treeview" -style "unstyle" -{ - engine "" - { - } -} +widget_class "*" style "progressbar" +# Treeview headers (and similar stock GTK+ widgets) +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" +# The window of the tooltip is called "gtk-tooltip" +################################################################## +# FIXME: +# This will not work if one embeds eg. a button into the tooltip. +# As far as I can tell right now we will need to rework the theme +# quite a bit to get this working correctly. +# (It will involve setting different priorities, etc.) +################################################################## +widget "gtk-tooltip*" style "tooltips" -# included styles +########################################################################## +# Following are special cases and workarounds for issues in applications. +########################################################################## -include "Styles/terminal" -include "Styles/treeview" -include "Styles/listheader" -include "Styles/statusbar" -include "Styles/notebook" -include "Styles/menu-menubar" -include "Styles/button" -include "Styles/toolbar" -include "Styles/entry" -include "Styles/range" -include "Styles/progressbar" -include "Styles/scrollbar" -include "Styles/spin" -include "Styles/checkbutton" -include "Styles/combo" -include "Styles/optionmenu" -include "Styles/radiobutton" -include "Styles/tooltips" -include "Styles/panel" -include "Styles/handlebox" -include "Styles/inactivetext" +# Workaround for the evolution ETable (bug #527532) +widget_class "*.." style "treeview_header" +# Workaround for the evolution ETree +widget_class "*.." style "treeview_header" +# Special case the nautilus-extra-view-widget +# ToDo: A more generic approach for all applications that have a widget like this. +widget "*.nautilus-extra-view-widget" style : highest "nautilus_location" -# widget styles -class "GtkTreeView*" style "gtktreeview" +# Work around for http://bugzilla.gnome.org/show_bug.cgi?id=382646 +# Note that this work around assumes that the combobox is _not_ in appears-as-list mode. +widget_class "*.." style "text_is_fg_color_workaround" +# This is the part of the workaround that fixes the menus +widget "*.gtk-combobox-popup-menu.*" style "menuitem_text_is_fg_color_workaround" -widget_class "*GtkCList*" style "list-header" -widget_class "*GtkTree*" style "progressbar" +# Work around the usage of GtkLabel inside GtkListItems to display text. +# This breaks because the label is shown on a background that is based on the base color. +widget_class "**" style "fg_is_text_color_workaround" +# GtkCList also uses the fg color to draw text on top of the base colors. +widget_class "*" style "fg_is_text_color_workaround" +# Nautilus when renaming files, and maybe other places. +widget_class "*" style "fg_is_text_color_workaround" -# Treeview header -widget_class "*.." style "list-header" -widget_class "*.." style "list-header" -widget_class "*.." style "list-header" -widget_class "*.." style "list-header" - -# Workarounds for Evolution -widget_class "*.ETable.ECanvas" style "list-header" -widget_class "*.ETree.ECanvas" style "list-header" - - -class "GtkStatusbar" style "statusbar" - -class "GtkNotebook" style "notebook" - -class "GtkMenu" style "menu" -class "GtkMenuBar*" style "menubar" -widget_class "*MenuBar.*" style "menubar" -widget_class "*.." style "menuitem" -class "GtkMenuItem" style "menuitem" -class "GtkTearoffMenuItem" style "menuitem" -widget_class "*..*" style "TextoMenu" - - -class "GtkButton" style "button" - -widget_class "*BonoboDockItem" style "toolbar" -class "*BonoboDockItem" style "toolbar" -widget_class "*HandleBox" style "toolbar" -class "*HandleBox" style "toolbar" -widget_class "*Toolbar" style "toolbar" -class "*Toolbar" style "toolbar" -widget_class "*Tool*GtkToggleButton" style "toolbuttons" -widget_class "*Tool*GtkButton" style "toolbuttons" - -class "GtkEntry" style "entry" -class "GtkOldEditable" style "entry" - -class "GtkRange" style "range" - -class "GtkProgressBar" style "progressbar" - -class "GtkScrollbar" style "scrollbar" - -class "GtkSpinButton" style "spinbutton" - -class "GtkCheckButton" style "checkbutton" -class "GtkCheckMenuItem" style "checkbutton" - - -class "GtkOptionMenu" style "optionmenu" -class "GtkComboBox" style "optionmenu" -widget_class "*GtkCombo.*Button*" style "ComboButton" - -class "GtkComboBoxEntry*" style "ComboBox" -class "GtkCombo*" style "ComboBox" -class "*Font*" style "ComboBox" -widget_class "*Combo*Entry*" style "ComboBox" - -class "GtkRadioButton" style "radiobutton" -class "GtkRadioMenuItem" style "radiobutton" - -widget "gtk-tooltips" style "tooltips" -widget "gtk-tooltip*" style "tooltips" - - -#class "*Panel*" style "fix" -class "*Panel*" style "panelbg" -widget_class "*notif*" style "panelbg" -widget_class "*Notif*" style "panelbg" -widget_class "*Tray*" style "panelbg" -widget_class "*tray*" style "panelbg" -widget "*PanelWidget*" style "panelbuttons" -widget "*PanelApplet*" style "panelbuttons" -widget "*task*" style "panelbuttons" -widget "*.tasklist-button" style "panelbuttons" -widget "*PanelApplet*TaskTitle*" style "panelbuttons" -widget_class "*Panel*GtkToggleButton*" style "button" -widget_class "*Panel*GtkButton" style "panelbuttons" -widget_class "*PanelButton*." style "panelbuttons" - -class "GtkHandleBox" style "handlebox" -class "GtkPaned" style "handlebox" - -widget_class "*." style "inactivetext" -widget_class "*." style "inactivetext" -#widget_class "*." style "inactivetext" - - - - -class "GtkWidget" style "default" - -class "GtkRuler" style "ruler" - -class "GtkToolbar" style "flat" -class "GtkEventBox" style "flat" - -class "GtkLayout" style "layout" -class "SPButton" style "SPbutton" - -class "SPColorSlider" style "unstyle" - -class "PanelAppletFrame" style "panel-handle" -class "TerminalScreen" style "terminal" - - -widget "*IdoScaleMenuItem*" style "range" -widget "*IdoEntryMenuItem*" style "entry" -widget_class "**" style "notebook" - -#widget_class "*" style "button" - -widget_class "*" style "progressbar" -#widget "*fast-user-switch*" style "panelbg" # workaround for Fast User Switch applet -class "PanelApp*" style "panelbg" -widget "*fast-user-switch-applet*" style "panelbg" - - -widget_class "*notif*" style "panelbg" -widget_class "*Notif*" style "panelbg" - -widget "*Xfce*Panel*" style "panelbg" -class "*Xfce*Panel*" style "panelbg" -# Nautilus sidebar -#widget_class "*Nautilus*Places*Sidebar*" style "nautilus-sidebar" -#widget_class "*Nautilus*Side*.GtkWidget" style "nautilus-sidebar" +# See the documentation of the style. +widget_class "EShellWindow.GtkVBox.BonoboDock.BonoboDockBand.BonoboDockItem*" style "evo_new_button_workaround" diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index 4d30b6a..8302b40 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -142,11 +142,11 @@ spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0 0 spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #df0000; } -spinbutton.warning:not(.vertical), entry.warning { color: #c7bebe; border-color: #c7bebe; } +spinbutton.warning:not(.vertical), entry.warning { color: #e17800; border-color: #e17800; } -spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #c7bebe, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #c7bebe; } +spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #e17800, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #e17800; } -spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #c7bebe; } +spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #e17800; } spinbutton:not(.vertical) image, entry image { color: #454545; } @@ -166,7 +166,7 @@ spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(act .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #a8a152; border-color: #504300; background-color: rgba(238, 236, 148, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #9dccff; border-style: solid; box-shadow: none; } +spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #3ec400; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } @@ -221,8 +221,8 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #9dccff; } :not(:backdrop) .entry-tag.button:active { background-color: #9dccff; 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(#c7bebe), to(transparent)); } - to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#9dccff), to(transparent)); } } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#e17800), to(transparent)); } + to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e17800), 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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -296,23 +296,23 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non .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 notebook > header > tabs > arrow.flat:active, .osd notebook > header > tabs > arrow.flat:checked, .osd button.flat:active, .osd button.flat:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -notebook > header > tabs > arrow.suggested-action, button.suggested-action { color: black; background-color: #9dccff; border-color: #4f6680; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.suggested-action, button.suggested-action { color: white; background-color: #73d216; border-color: #b9e98b; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.636078); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.636078); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } -notebook > header > tabs > arrow.suggested-action.flat, 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: #9dccff; } +notebook > header > tabs > arrow.suggested-action.flat, 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: #73d216; } -notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#9dccff, 1.1); } +notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); } -notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); } notebook > header > tabs > arrow.suggested-action:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { background-image: none; } -notebook > header > tabs > arrow.suggested-action.flat:backdrop, notebook > header > tabs > arrow.suggested-action.flat:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop: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; color: rgba(157, 204, 255, 0.8); } +notebook > header > tabs > arrow.suggested-action.flat:backdrop, notebook > header > tabs > arrow.suggested-action.flat:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop: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; color: rgba(115, 210, 22, 0.8); } notebook > header > tabs > arrow.suggested-action:disabled, button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow.suggested-action:disabled:active, notebook > header > tabs > arrow.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } notebook > header > tabs > arrow.destructive-action.flat, 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: #df0000; } @@ -354,7 +354,7 @@ notebook > header > tabs > arrow.circular:not(.flat):not(.osd):not(:checked):not notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); } -stacksidebar row.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .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(#c7bebe), 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, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .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(#e17800), 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, notebook > header > tabs.stack-switcher > arrow.needs-attention > label:backdrop, notebook > header > tabs.stack-switcher > arrow.needs-attention > image:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -532,27 +532,27 @@ searchbar > revealer > box { margin: -6px; padding: 6px; } .titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } -.selection-mode .titlebar:not(headerbar), .selection-mode.titlebar:not(headerbar), .selection-mode headerbar, headerbar.selection-mode { color: #000000; border-color: #51a4ff; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); background: #9dccff linear-gradient(to top, #93c7ff, #a2cfff); box-shadow: inset 0 1px rgba(196, 224, 255, 0.9); } +.selection-mode .titlebar:not(headerbar), .selection-mode.titlebar:not(headerbar), .selection-mode headerbar, headerbar.selection-mode { color: #000000; border-color: #40760c; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); background: #73d216 linear-gradient(to top, #6ec915, #76d716); box-shadow: inset 0 1px rgba(171, 228, 115, 0.9); } -.selection-mode .titlebar:backdrop:not(headerbar), .selection-mode.titlebar:backdrop:not(headerbar), .selection-mode headerbar:backdrop, headerbar.selection-mode:backdrop { background-color: #9dccff; background-image: none; box-shadow: inset 0 1px rgba(206, 230, 255, 0.88); } +.selection-mode .titlebar:backdrop:not(headerbar), .selection-mode.titlebar:backdrop:not(headerbar), .selection-mode headerbar:backdrop, headerbar.selection-mode:backdrop { background-color: #73d216; background-image: none; box-shadow: inset 0 1px rgba(185, 233, 139, 0.88); } .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; } -.selection-mode .titlebar:not(headerbar) button, .selection-mode.titlebar:not(headerbar) button, .selection-mode headerbar button, headerbar.selection-mode button { color: #000000; background-color: #9dccff; border-color: #4f6680; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 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: #73d216; border-color: #3a690b; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.35), 0 1px 2px rgba(0, 0, 0, 0.4); } .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; } -.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#9dccff, 1.1); } +.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#73d216, 1.1); } -.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } +.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -.selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop, .selection-mode headerbar button:backdrop.flat, .selection-mode headerbar button:backdrop, headerbar.selection-mode button:backdrop.flat, headerbar.selection-mode button:backdrop { background-image: none; -gtk-icon-effect: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop, .selection-mode headerbar button:backdrop.flat, .selection-mode headerbar button:backdrop, headerbar.selection-mode button:backdrop.flat, headerbar.selection-mode button:backdrop { background-image: none; -gtk-icon-effect: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:active, .selection-mode .titlebar:not(headerbar) button:backdrop:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:active, .selection-mode.titlebar:not(headerbar) button:backdrop:checked, .selection-mode headerbar button:backdrop.flat:active, .selection-mode headerbar button:backdrop.flat:checked, .selection-mode headerbar button:backdrop:active, .selection-mode headerbar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:active, .selection-mode .titlebar:not(headerbar) button:backdrop:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:active, .selection-mode.titlebar:not(headerbar) button:backdrop:checked, .selection-mode headerbar button:backdrop.flat:active, .selection-mode headerbar button:backdrop.flat:checked, .selection-mode headerbar button:backdrop:active, .selection-mode headerbar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled, .selection-mode headerbar button:backdrop.flat:disabled, .selection-mode headerbar button:backdrop:disabled, headerbar.selection-mode button:backdrop.flat:disabled, headerbar.selection-mode button:backdrop:disabled { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled, .selection-mode headerbar button:backdrop.flat:disabled, .selection-mode headerbar button:backdrop:disabled, headerbar.selection-mode button:backdrop.flat:disabled, headerbar.selection-mode button:backdrop:disabled { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode .titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode headerbar button:backdrop:disabled:active, .selection-mode headerbar button:backdrop:disabled:checked, headerbar.selection-mode button:backdrop:disabled:active, headerbar.selection-mode button:backdrop:disabled:checked { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode .titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode headerbar button:backdrop:disabled:active, .selection-mode headerbar button:backdrop:disabled:checked, headerbar.selection-mode button:backdrop:disabled:active, headerbar.selection-mode button:backdrop:disabled:checked { border-color: #40760c; } .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode .titlebar:not(headerbar) button.flat:backdrop, .selection-mode .titlebar:not(headerbar) button.flat:disabled, .selection-mode.titlebar:not(headerbar) button.flat:backdrop, .selection-mode.titlebar:not(headerbar) button.flat:disabled, .selection-mode headerbar button.flat:backdrop, .selection-mode headerbar button.flat:disabled, .selection-mode headerbar button.flat:backdrop:disabled, headerbar.selection-mode button.flat:backdrop, headerbar.selection-mode button.flat:disabled, headerbar.selection-mode button.flat:backdrop: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; } @@ -560,19 +560,19 @@ 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: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -.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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #51a4ff; } +.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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; } -.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(#d3d3d3, 1.1); border-color: #51a4ff; } +.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(#d3d3d3, 1.1); border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode headerbar button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode headerbar button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode headerbar button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { background-image: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode headerbar button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { background-image: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode headerbar button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode headerbar button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) .selection-menu, .selection-mode.titlebar:not(headerbar) .selection-menu, .selection-mode headerbar .selection-menu:backdrop, .selection-mode headerbar .selection-menu, headerbar.selection-mode .selection-menu:backdrop, headerbar.selection-mode .selection-menu { border-color: rgba(157, 204, 255, 0); background-color: rgba(157, 204, 255, 0); background-image: none; box-shadow: none; min-height: 20px; padding: 4px 10px; } +.selection-mode .titlebar:not(headerbar) .selection-menu, .selection-mode.titlebar:not(headerbar) .selection-menu, .selection-mode headerbar .selection-menu:backdrop, .selection-mode headerbar .selection-menu, headerbar.selection-mode .selection-menu:backdrop, headerbar.selection-mode .selection-menu { border-color: rgba(115, 210, 22, 0); background-color: rgba(115, 210, 22, 0); background-image: none; box-shadow: none; min-height: 20px; padding: 4px 10px; } .selection-mode .titlebar:not(headerbar) .selection-menu arrow, .selection-mode.titlebar:not(headerbar) .selection-menu arrow, .selection-mode headerbar .selection-menu:backdrop arrow, .selection-mode headerbar .selection-menu arrow, headerbar.selection-mode .selection-menu:backdrop arrow, headerbar.selection-mode .selection-menu arrow { -GtkArrow-arrow-scaling: 1; } @@ -672,7 +672,7 @@ treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symb treeview.view.expander:backdrop { color: #949494; } -treeview.view.progressbar { color: #e5e5e5; background-color: #9dccff; background-image: image(#9dccff); box-shadow: none; } +treeview.view.progressbar { color: #e5e5e5; background-color: #3ec400; background-image: image(#3ec400); box-shadow: none; } treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { color: #9dccff; background-image: image(#e5e5e5); } @@ -1119,11 +1119,11 @@ row:selected progressbar trough, progressbar row:selected trough, row:selected s .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(238, 236, 148, 0.5); } -progressbar progress, scale highlight { border: 1px solid #51a4ff; border-radius: 3px; background-color: #9dccff; } +progressbar progress, scale highlight { border: 1px solid #1e5e00; border-radius: 3px; background-color: #3ec400; } progressbar progress:disabled, scale highlight:disabled { background-color: #b09f9f; border-color: transparent; } -progressbar progress:backdrop, scale highlight:backdrop { border-color: #9dccff; } +progressbar progress:backdrop, scale highlight:backdrop { border-color: #3ec400; } progressbar progress:backdrop:disabled, scale highlight:backdrop:disabled { background-color: transparent; border-color: transparent; } @@ -1220,9 +1220,9 @@ scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider /***************** Progress bars * */ progressbar { font-size: smaller; color: rgba(29, 29, 29, 0.4); font-feature-settings: "tnum"; } -progressbar.horizontal trough, progressbar.horizontal progress { min-height: 2px; } +progressbar.horizontal trough, progressbar.horizontal progress { min-height: 10px; } -progressbar.vertical trough, progressbar.vertical progress { min-width: 2px; } +progressbar.vertical trough, progressbar.vertical progress { min-width: 10px; } progressbar.horizontal progress { margin: 0 -1px; } @@ -1230,6 +1230,10 @@ progressbar.vertical progress { margin: -1px 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } +progressbar.horizontal trough { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical trough { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar progress { border-radius: 1.5px; } progressbar progress.left { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } @@ -1240,6 +1244,10 @@ progressbar progress.top { border-top-right-radius: 2px; border-top-left-radius: progressbar progress.bottom { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } +progressbar.horizontal progress { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical progress { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } @@ -1274,9 +1282,9 @@ levelbar > trough:backdrop { color: #444444; border-color: #a4a4a4; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #c7bebe; background-color: #c7bebe; } +levelbar > trough > block.low { border-color: #e17800; background-color: #e17800; } -levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #9dccff; background-color: #9dccff; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #1e5e00; background-color: #3ec400; } levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } @@ -1438,7 +1446,7 @@ separator.sidebar { background-color: #9b9b9b; } separator.sidebar:backdrop { background-color: #a4a4a4; } -separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #3797ff; } +separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #40760c; } /**************** File chooser * */ row image.sidebar-icon { opacity: 1; } @@ -1677,7 +1685,7 @@ button.titlebutton.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255 button.titlebutton:backdrop { -gtk-icon-shadow: none; } -.selection-mode headerbar button.titlebutton, .selection-mode .titlebar button.titlebutton, headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); } +.selection-mode headerbar button.titlebutton, .selection-mode .titlebar button.titlebutton, headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.636078); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.636078); } .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } @@ -1689,7 +1697,7 @@ cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878 cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); } -cursor-handle:active { border-color: #51a4ff; } +cursor-handle:active { border-color: #1e5e00; } cursor-handle:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } @@ -1816,7 +1824,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #a4a4a4; /* these are pretty self explicative */ -@define-color warning_color #c7bebe; +@define-color warning_color #e17800; @define-color error_color #df0000; @define-color success_color #73d216; /* diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index dae006a..cd90576 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -170,13 +170,13 @@ spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #df0000; } -spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #c7bebe; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #e17800; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } -spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(199, 190, 190, 0.5); outline-width: 2px; outline-offset: -2px; } +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(225, 120, 0, 0.5); outline-width: 2px; outline-offset: -2px; } -spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #c7bebe; } +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #e17800; } spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #454545; } @@ -220,8 +220,8 @@ treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #9 editablelabel > stack > text { color: #1d1d1d; border-color: #818181; background-color: #e5e5e5; 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, #c7bebe 0%, rgba(199, 190, 190, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #c7bebe 95%, rgba(199, 190, 190, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #e17800 0%, rgba(225, 120, 0, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #e17800 95%, rgba(225, 120, 0, 0)); } } /****************************************************** Buttons * */ scrollbar > range > trough > slider, windowcontrols button, 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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 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; } @@ -314,7 +314,7 @@ notebook > header > tabs > arrow.suggested-action:disabled, button.suggested-act notebook > header > tabs > arrow.suggested-action:disabled:active, notebook > header > tabs > arrow.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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; } +notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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; } notebook > header > tabs > arrow.destructive-action, button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } @@ -346,7 +346,7 @@ menubutton.circular notebook > header > tabs > arrow, notebook > header > tabs > menubutton.circular notebook > header > tabs > arrow label, notebook > header > tabs > arrow.circular label, 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, #c7bebe 96%, rgba(199, 190, 190, 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, #e17800 96%, rgba(225, 120, 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; } @@ -404,7 +404,7 @@ popover.menu box.circular-buttons button.suggested-action.circular.image-button. 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; } -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: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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 { outline: 0 solid transparent; outline-offset: 4px; } @@ -1030,7 +1030,7 @@ row:selected progressbar > trough, row:selected scale > trough > fill, row:selec .osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(238, 236, 148, 0.5); } -progressbar > trough > progress, scale > trough > highlight { border: 1px solid #51a4ff; border-radius: 3px; background-color: #9dccff; } +progressbar > trough > progress, scale > trough > highlight { border: 1px solid #1e5e00; border-radius: 3px; background-color: #3ec400; } progressbar > trough > progress:disabled, scale > trough > highlight:disabled { background-color: #998080; border-color: transparent; } @@ -1137,16 +1137,20 @@ progressbar { font-size: smaller; color: rgba(29, 29, 29, 0.4); font-feature-set progressbar.horizontal > trough { min-width: 150px; } -progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 2px; } +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 10px; } progressbar.vertical > trough { min-height: 80px; } -progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 2px; } +progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 10px; } progressbar.horizontal > trough > progress { margin: 0 -1px; } progressbar.vertical > trough > progress { margin: -1px 0; } +progressbar.horizontal > trough { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical > trough { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar > trough > progress { /* share most of scales' */ /* override insensitive that is specific to progress */ border-radius: 1.5px; } progressbar > trough > progress:disabled { background-color: #552222; border-color: #552222; } @@ -1159,6 +1163,10 @@ progressbar > trough > progress.top { border-top-right-radius: 5px; border-top-l progressbar > trough > progress.bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } +progressbar.horizontal > trough > progress { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical > trough > progress { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } @@ -1193,9 +1201,9 @@ levelbar > trough:backdrop { color: #444444; border-color: #a4a4a4; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #c7bebe; background-color: #c7bebe; } +levelbar > trough > block.low { border-color: #e17800; background-color: #e17800; } -levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #9dccff; background-color: #9dccff; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #1e5e00; background-color: #3ec400; } levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } @@ -1592,7 +1600,7 @@ cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878 cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); } -cursor-handle:active { border-color: #51a4ff; } +cursor-handle:active { border-color: #1e5e00; } cursor-handle:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } @@ -1731,7 +1739,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #a4a4a4; /* these are pretty self explicative */ -@define-color warning_color #c7bebe; +@define-color warning_color #e17800; @define-color error_color #df0000; @define-color success_color #73d216; /* diff --git a/source/common/_theme_colors.scss b/source/common/_theme_colors.scss index c1a16f1..16692fe 100644 --- a/source/common/_theme_colors.scss +++ b/source/common/_theme_colors.scss @@ -16,7 +16,7 @@ $disabled_fg: #552222; $disabled_bg: #c7bebe; /*Usually an automatic fg color on these backgrounds should check this value!*/ -$warningc: #c7bebe; +$warningc: #e17800; $errorc: #df0000; $successc: #73d216; diff --git a/source/common/common_colors.scss b/source/common/common_colors.scss index 19bd253..b5ceb5e 100644 --- a/source/common/common_colors.scss +++ b/source/common/common_colors.scss @@ -68,11 +68,14 @@ $backdrop_borders_color: mix($borders_color, $bg_color, 80%); $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); //special cased widget colors -$suggested_bg_color: $selected_bg_color; -$suggested_border_color: $selected_borders_color; -$progress_bg_color: $selected_bg_color; -$progress_border_color: $selected_borders_color; +$suggested_bg_color: $successc; +$suggested_border_color: if($variant == 'light', darken($successc, 20%), lighten($successc, 20%)); +$progress_bg_color: #3ec400; +$progress_border_color: if($variant == 'light', darken($progress_bg_color, 20%), lighten($progress_bg_color, 20%)) ; $checkradio_bg_color: $selected_bg_color; //if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%)); $checkradio_fg_color: $selected_fg_color; $checkradio_borders_color: $selected_fg_color;//if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%)); $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); + +$_dot_color: $warning_color;//if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); + diff --git a/source/common/common_common.scss b/source/common/common_common.scss index 815422e..fc8de78 100644 --- a/source/common/common_common.scss +++ b/source/common/common_common.scss @@ -30,13 +30,13 @@ $tab_radius: $button_radius; $button_padding: $_btn_pad; $button_border: 1px solid; -@function image_gloss_well_contrasted($bg) { - @return image_gloss( if( lightness($bg) > 50, 'light', 'dark') ); +@function image_gloss_well_contrasted($bg, $direction:bottom) { + @return image_gloss( if( lightness($bg) > 30%, 'light', 'dark'), $direction ); } -@function image_gloss($var:$variant) { +@function image_gloss($var:$variant, $direction:bottom) { @return linear-gradient( - to bottom, + to $direction, transparentize(white, if($var == 'light', 0.1 ,0.7 )), transparentize(white, if($var == 'light', 0.5 ,0.7 )) 50%, transparentize(white, 1) 50%, diff --git a/source/common/levelbar.scss b/source/common/levelbar.scss index 052930d..26cdeea 100644 --- a/source/common/levelbar.scss +++ b/source/common/levelbar.scss @@ -70,8 +70,8 @@ levelbar { &.high, &:not(.empty) { - border-color: $selected_bg_color; - background-color: $selected_bg_color; + border-color: $progress_border_color; + background-color: $progress_bg_color; } &.full { diff --git a/source/gtk3/_common.scss b/source/gtk3/_common.scss index c25b391..b4cd0e3 100644 --- a/source/gtk3/_common.scss +++ b/source/gtk3/_common.scss @@ -550,7 +550,7 @@ treeview entry { * Buttons * ******************************************************/ // stuff for .needs-attention -$_dot_color: $warning_color;//if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); + @keyframes needs_attention { from { background-image: -gtk-gradient(radial, @@ -564,7 +564,7 @@ $_dot_color: $warning_color;//if($variant=='light', $selected_bg_color, lighten( background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, - to($selected_bg_color), + to($_dot_color), to(transparent)); } } @@ -938,6 +938,8 @@ button { animation: needs_attention 150ms ease-in; $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: if($variant=='light',0.5,0.45); + + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, @@ -3117,12 +3119,12 @@ progressbar { // sizing &.horizontal { trough, - progress { min-height: 2px; } + progress { min-height: 10px; } } &.vertical { trough, - progress { min-width: 2px; } + progress { min-width: 10px; } } &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border @@ -3139,7 +3141,11 @@ progressbar { transition: $backdrop_transition; } - trough { @extend %scale_trough; } + trough { @extend %scale_trough; + } + + &.horizontal trough{ background-image: image_gloss_well_contrasted($dark_fill);} + &.vertical trough{ background-image: image_gloss_well_contrasted($dark_fill, right);} progress { @extend %scale_highlight; @@ -3166,6 +3172,8 @@ progressbar { border-bottom-left-radius: 2px; } } + &.horizontal progress{ background-image: image_gloss_well_contrasted($progress_bg_color);} + &.vertical progress{ background-image: image_gloss_well_contrasted($progress_bg_color, right);} &.osd { // progressbar.osd used for epiphany page loading progress min-width: 3px; diff --git a/source/gtk3/gtk-new.css b/source/gtk3/gtk-new.css index 4d30b6a..8302b40 100644 --- a/source/gtk3/gtk-new.css +++ b/source/gtk3/gtk-new.css @@ -142,11 +142,11 @@ spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0 0 spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #df0000; } -spinbutton.warning:not(.vertical), entry.warning { color: #c7bebe; border-color: #c7bebe; } +spinbutton.warning:not(.vertical), entry.warning { color: #e17800; border-color: #e17800; } -spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #c7bebe, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #c7bebe; } +spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #e17800, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #e17800; } -spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #c7bebe; } +spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #e17800; } spinbutton:not(.vertical) image, entry image { color: #454545; } @@ -166,7 +166,7 @@ spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(act .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #a8a152; border-color: #504300; background-color: rgba(238, 236, 148, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #9dccff; border-style: solid; box-shadow: none; } +spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #3ec400; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } @@ -221,8 +221,8 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #9dccff; } :not(:backdrop) .entry-tag.button:active { background-color: #9dccff; 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(#c7bebe), to(transparent)); } - to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#9dccff), to(transparent)); } } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#e17800), to(transparent)); } + to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e17800), 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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -296,23 +296,23 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non .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 notebook > header > tabs > arrow.flat:active, .osd notebook > header > tabs > arrow.flat:checked, .osd button.flat:active, .osd button.flat:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -notebook > header > tabs > arrow.suggested-action, button.suggested-action { color: black; background-color: #9dccff; border-color: #4f6680; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.suggested-action, button.suggested-action { color: white; background-color: #73d216; border-color: #b9e98b; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.636078); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.636078); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } -notebook > header > tabs > arrow.suggested-action.flat, 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: #9dccff; } +notebook > header > tabs > arrow.suggested-action.flat, 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: #73d216; } -notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#9dccff, 1.1); } +notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); } -notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); } notebook > header > tabs > arrow.suggested-action:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { background-image: none; } -notebook > header > tabs > arrow.suggested-action.flat:backdrop, notebook > header > tabs > arrow.suggested-action.flat:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop: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; color: rgba(157, 204, 255, 0.8); } +notebook > header > tabs > arrow.suggested-action.flat:backdrop, notebook > header > tabs > arrow.suggested-action.flat:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop: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; color: rgba(115, 210, 22, 0.8); } notebook > header > tabs > arrow.suggested-action:disabled, button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow.suggested-action:disabled:active, notebook > header > tabs > arrow.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } +notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } notebook > header > tabs > arrow.destructive-action.flat, 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: #df0000; } @@ -354,7 +354,7 @@ notebook > header > tabs > arrow.circular:not(.flat):not(.osd):not(:checked):not notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); } -stacksidebar row.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .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(#c7bebe), 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, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .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(#e17800), 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, notebook > header > tabs.stack-switcher > arrow.needs-attention > label:backdrop, notebook > header > tabs.stack-switcher > arrow.needs-attention > image:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -532,27 +532,27 @@ searchbar > revealer > box { margin: -6px; padding: 6px; } .titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } -.selection-mode .titlebar:not(headerbar), .selection-mode.titlebar:not(headerbar), .selection-mode headerbar, headerbar.selection-mode { color: #000000; border-color: #51a4ff; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); background: #9dccff linear-gradient(to top, #93c7ff, #a2cfff); box-shadow: inset 0 1px rgba(196, 224, 255, 0.9); } +.selection-mode .titlebar:not(headerbar), .selection-mode.titlebar:not(headerbar), .selection-mode headerbar, headerbar.selection-mode { color: #000000; border-color: #40760c; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); background: #73d216 linear-gradient(to top, #6ec915, #76d716); box-shadow: inset 0 1px rgba(171, 228, 115, 0.9); } -.selection-mode .titlebar:backdrop:not(headerbar), .selection-mode.titlebar:backdrop:not(headerbar), .selection-mode headerbar:backdrop, headerbar.selection-mode:backdrop { background-color: #9dccff; background-image: none; box-shadow: inset 0 1px rgba(206, 230, 255, 0.88); } +.selection-mode .titlebar:backdrop:not(headerbar), .selection-mode.titlebar:backdrop:not(headerbar), .selection-mode headerbar:backdrop, headerbar.selection-mode:backdrop { background-color: #73d216; background-image: none; box-shadow: inset 0 1px rgba(185, 233, 139, 0.88); } .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; } -.selection-mode .titlebar:not(headerbar) button, .selection-mode.titlebar:not(headerbar) button, .selection-mode headerbar button, headerbar.selection-mode button { color: #000000; background-color: #9dccff; border-color: #4f6680; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 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: #73d216; border-color: #3a690b; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.35), 0 1px 2px rgba(0, 0, 0, 0.4); } .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; } -.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#9dccff, 1.1); } +.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#73d216, 1.1); } -.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); } +.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); } -.selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop, .selection-mode headerbar button:backdrop.flat, .selection-mode headerbar button:backdrop, headerbar.selection-mode button:backdrop.flat, headerbar.selection-mode button:backdrop { background-image: none; -gtk-icon-effect: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop, .selection-mode headerbar button:backdrop.flat, .selection-mode headerbar button:backdrop, headerbar.selection-mode button:backdrop.flat, headerbar.selection-mode button:backdrop { background-image: none; -gtk-icon-effect: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:active, .selection-mode .titlebar:not(headerbar) button:backdrop:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:active, .selection-mode.titlebar:not(headerbar) button:backdrop:checked, .selection-mode headerbar button:backdrop.flat:active, .selection-mode headerbar button:backdrop.flat:checked, .selection-mode headerbar button:backdrop:active, .selection-mode headerbar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:active, .selection-mode .titlebar:not(headerbar) button:backdrop:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:active, .selection-mode.titlebar:not(headerbar) button:backdrop:checked, .selection-mode headerbar button:backdrop.flat:active, .selection-mode headerbar button:backdrop.flat:checked, .selection-mode headerbar button:backdrop:active, .selection-mode headerbar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled, .selection-mode headerbar button:backdrop.flat:disabled, .selection-mode headerbar button:backdrop:disabled, headerbar.selection-mode button:backdrop.flat:disabled, headerbar.selection-mode button:backdrop:disabled { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled, .selection-mode headerbar button:backdrop.flat:disabled, .selection-mode headerbar button:backdrop:disabled, headerbar.selection-mode button:backdrop.flat:disabled, headerbar.selection-mode button:backdrop:disabled { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode .titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode headerbar button:backdrop:disabled:active, .selection-mode headerbar button:backdrop:disabled:checked, headerbar.selection-mode button:backdrop:disabled:active, headerbar.selection-mode button:backdrop:disabled:checked { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode .titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:active, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled:checked, .selection-mode headerbar button:backdrop:disabled:active, .selection-mode headerbar button:backdrop:disabled:checked, headerbar.selection-mode button:backdrop:disabled:active, headerbar.selection-mode button:backdrop:disabled:checked { border-color: #40760c; } .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode .titlebar:not(headerbar) button.flat:backdrop, .selection-mode .titlebar:not(headerbar) button.flat:disabled, .selection-mode.titlebar:not(headerbar) button.flat:backdrop, .selection-mode.titlebar:not(headerbar) button.flat:disabled, .selection-mode headerbar button.flat:backdrop, .selection-mode headerbar button.flat:disabled, .selection-mode headerbar button.flat:backdrop:disabled, headerbar.selection-mode button.flat:backdrop, headerbar.selection-mode button.flat:disabled, headerbar.selection-mode button.flat:backdrop: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; } @@ -560,19 +560,19 @@ 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: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -.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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #51a4ff; } +.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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; } -.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(#d3d3d3, 1.1); border-color: #51a4ff; } +.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(#d3d3d3, 1.1); border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode headerbar button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, .selection-mode headerbar button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode headerbar button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { background-image: none; border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, .selection-mode headerbar button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { background-image: none; border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode headerbar button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-color: #51a4ff; } +.selection-mode .titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, .selection-mode headerbar button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-color: #40760c; } -.selection-mode .titlebar:not(headerbar) .selection-menu, .selection-mode.titlebar:not(headerbar) .selection-menu, .selection-mode headerbar .selection-menu:backdrop, .selection-mode headerbar .selection-menu, headerbar.selection-mode .selection-menu:backdrop, headerbar.selection-mode .selection-menu { border-color: rgba(157, 204, 255, 0); background-color: rgba(157, 204, 255, 0); background-image: none; box-shadow: none; min-height: 20px; padding: 4px 10px; } +.selection-mode .titlebar:not(headerbar) .selection-menu, .selection-mode.titlebar:not(headerbar) .selection-menu, .selection-mode headerbar .selection-menu:backdrop, .selection-mode headerbar .selection-menu, headerbar.selection-mode .selection-menu:backdrop, headerbar.selection-mode .selection-menu { border-color: rgba(115, 210, 22, 0); background-color: rgba(115, 210, 22, 0); background-image: none; box-shadow: none; min-height: 20px; padding: 4px 10px; } .selection-mode .titlebar:not(headerbar) .selection-menu arrow, .selection-mode.titlebar:not(headerbar) .selection-menu arrow, .selection-mode headerbar .selection-menu:backdrop arrow, .selection-mode headerbar .selection-menu arrow, headerbar.selection-mode .selection-menu:backdrop arrow, headerbar.selection-mode .selection-menu arrow { -GtkArrow-arrow-scaling: 1; } @@ -672,7 +672,7 @@ treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symb treeview.view.expander:backdrop { color: #949494; } -treeview.view.progressbar { color: #e5e5e5; background-color: #9dccff; background-image: image(#9dccff); box-shadow: none; } +treeview.view.progressbar { color: #e5e5e5; background-color: #3ec400; background-image: image(#3ec400); box-shadow: none; } treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { color: #9dccff; background-image: image(#e5e5e5); } @@ -1119,11 +1119,11 @@ row:selected progressbar trough, progressbar row:selected trough, row:selected s .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(238, 236, 148, 0.5); } -progressbar progress, scale highlight { border: 1px solid #51a4ff; border-radius: 3px; background-color: #9dccff; } +progressbar progress, scale highlight { border: 1px solid #1e5e00; border-radius: 3px; background-color: #3ec400; } progressbar progress:disabled, scale highlight:disabled { background-color: #b09f9f; border-color: transparent; } -progressbar progress:backdrop, scale highlight:backdrop { border-color: #9dccff; } +progressbar progress:backdrop, scale highlight:backdrop { border-color: #3ec400; } progressbar progress:backdrop:disabled, scale highlight:backdrop:disabled { background-color: transparent; border-color: transparent; } @@ -1220,9 +1220,9 @@ scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider /***************** Progress bars * */ progressbar { font-size: smaller; color: rgba(29, 29, 29, 0.4); font-feature-settings: "tnum"; } -progressbar.horizontal trough, progressbar.horizontal progress { min-height: 2px; } +progressbar.horizontal trough, progressbar.horizontal progress { min-height: 10px; } -progressbar.vertical trough, progressbar.vertical progress { min-width: 2px; } +progressbar.vertical trough, progressbar.vertical progress { min-width: 10px; } progressbar.horizontal progress { margin: 0 -1px; } @@ -1230,6 +1230,10 @@ progressbar.vertical progress { margin: -1px 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } +progressbar.horizontal trough { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical trough { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar progress { border-radius: 1.5px; } progressbar progress.left { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } @@ -1240,6 +1244,10 @@ progressbar progress.top { border-top-right-radius: 2px; border-top-left-radius: progressbar progress.bottom { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } +progressbar.horizontal progress { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical progress { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } @@ -1274,9 +1282,9 @@ levelbar > trough:backdrop { color: #444444; border-color: #a4a4a4; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #c7bebe; background-color: #c7bebe; } +levelbar > trough > block.low { border-color: #e17800; background-color: #e17800; } -levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #9dccff; background-color: #9dccff; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #1e5e00; background-color: #3ec400; } levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } @@ -1438,7 +1446,7 @@ separator.sidebar { background-color: #9b9b9b; } separator.sidebar:backdrop { background-color: #a4a4a4; } -separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #3797ff; } +separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #40760c; } /**************** File chooser * */ row image.sidebar-icon { opacity: 1; } @@ -1677,7 +1685,7 @@ button.titlebutton.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255 button.titlebutton:backdrop { -gtk-icon-shadow: none; } -.selection-mode headerbar button.titlebutton, .selection-mode .titlebar button.titlebutton, headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); } +.selection-mode headerbar button.titlebutton, .selection-mode .titlebar button.titlebutton, headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.636078); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.636078); } .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } @@ -1689,7 +1697,7 @@ cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878 cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); } -cursor-handle:active { border-color: #51a4ff; } +cursor-handle:active { border-color: #1e5e00; } cursor-handle:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } @@ -1816,7 +1824,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #a4a4a4; /* these are pretty self explicative */ -@define-color warning_color #c7bebe; +@define-color warning_color #e17800; @define-color error_color #df0000; @define-color success_color #73d216; /* diff --git a/source/gtk4/_common.scss b/source/gtk4/_common.scss index 7efd5ce..53a5883 100644 --- a/source/gtk4/_common.scss +++ b/source/gtk4/_common.scss @@ -467,7 +467,7 @@ editablelabel > stack > text { * Buttons * ***********/ // stuff for .needs-attention -$_dot_color: $warning_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)); } @@ -2377,7 +2377,7 @@ treeview.view radio:selected { &:selected, &:focus, & { @extend %radio; }} // Th %scale_highlight { border: 1px solid $progress_border_color; border-radius: 3px; - background-color: $selected_bg_color; + background-color: $progress_bg_color; &:disabled { background-color: mix($insensitive_bg_color, $insensitive_fg_color, 60%); @@ -2656,14 +2656,14 @@ progressbar { &.horizontal { > trough { min-width: 150px; - &, > progress { min-height: 2px; } + &, > progress { min-height: 10px; } } } &.vertical { > trough { min-height: 80px; - &, > progress { min-width: 2px; } + &, > progress { min-width: 10px; } } } @@ -2677,6 +2677,8 @@ progressbar { font-feature-settings: "tnum"; > trough { @extend %scale_trough; } + &.horizontal > trough{ background-image: image_gloss_well_contrasted($dark_fill);} + &.vertical > trough{ background-image: image_gloss_well_contrasted($dark_fill, right);} > trough > progress { @extend %scale_highlight; /* share most of scales' */ @@ -2686,6 +2688,7 @@ progressbar { border-color: $insensitive_fg_color; } + border-radius: 1.5px; $_progress-radius: 5px; &.left { @@ -2708,7 +2711,8 @@ progressbar { border-bottom-left-radius: $_progress-radius; } } - + &.horizontal > trough > progress { background-image: image_gloss_well_contrasted($progress_bg_color);} + &.vertical > trough > progress { background-image: image_gloss_well_contrasted($progress_bg_color, right);} &.osd { // progressbar.osd used for epiphany page loading progress min-width: 3px; min-height: 3px; diff --git a/source/gtk4/gtk-new.css b/source/gtk4/gtk-new.css index dae006a..cd90576 100644 --- a/source/gtk4/gtk-new.css +++ b/source/gtk4/gtk-new.css @@ -170,13 +170,13 @@ spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #df0000; } -spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #c7bebe; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #e17800; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } -spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(199, 190, 190, 0.5); outline-width: 2px; outline-offset: -2px; } +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(225, 120, 0, 0.5); outline-width: 2px; outline-offset: -2px; } -spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #c7bebe; } +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #e17800; } spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #454545; } @@ -220,8 +220,8 @@ treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #9 editablelabel > stack > text { color: #1d1d1d; border-color: #818181; background-color: #e5e5e5; 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, #c7bebe 0%, rgba(199, 190, 190, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #c7bebe 95%, rgba(199, 190, 190, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #e17800 0%, rgba(225, 120, 0, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #e17800 95%, rgba(225, 120, 0, 0)); } } /****************************************************** Buttons * */ scrollbar > range > trough > slider, windowcontrols button, 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: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); 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.65), 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; } @@ -314,7 +314,7 @@ notebook > header > tabs > arrow.suggested-action:disabled, button.suggested-act notebook > header > tabs > arrow.suggested-action:disabled:active, notebook > header > tabs > arrow.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #552222; background-color: #c1c0c8; border-color: #8e7070; text-shadow: none; -gtk-icon-shadow: none; } -notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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; } +notebook > header > tabs > arrow.destructive-action, button.destructive-action { color: white; background-color: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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; } notebook > header > tabs > arrow.destructive-action, button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } @@ -346,7 +346,7 @@ menubutton.circular notebook > header > tabs > arrow, notebook > header > tabs > menubutton.circular notebook > header > tabs > arrow label, notebook > header > tabs > arrow.circular label, 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, #c7bebe 96%, rgba(199, 190, 190, 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, #e17800 96%, rgba(225, 120, 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; } @@ -404,7 +404,7 @@ popover.menu box.circular-buttons button.suggested-action.circular.image-button. 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; } -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: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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: #df0000; border-color: #ef8080; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.650196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.650196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 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 { outline: 0 solid transparent; outline-offset: 4px; } @@ -1030,7 +1030,7 @@ row:selected progressbar > trough, row:selected scale > trough > fill, row:selec .osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(238, 236, 148, 0.5); } -progressbar > trough > progress, scale > trough > highlight { border: 1px solid #51a4ff; border-radius: 3px; background-color: #9dccff; } +progressbar > trough > progress, scale > trough > highlight { border: 1px solid #1e5e00; border-radius: 3px; background-color: #3ec400; } progressbar > trough > progress:disabled, scale > trough > highlight:disabled { background-color: #998080; border-color: transparent; } @@ -1137,16 +1137,20 @@ progressbar { font-size: smaller; color: rgba(29, 29, 29, 0.4); font-feature-set progressbar.horizontal > trough { min-width: 150px; } -progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 2px; } +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 10px; } progressbar.vertical > trough { min-height: 80px; } -progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 2px; } +progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 10px; } progressbar.horizontal > trough > progress { margin: 0 -1px; } progressbar.vertical > trough > progress { margin: -1px 0; } +progressbar.horizontal > trough { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical > trough { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar > trough > progress { /* share most of scales' */ /* override insensitive that is specific to progress */ border-radius: 1.5px; } progressbar > trough > progress:disabled { background-color: #552222; border-color: #552222; } @@ -1159,6 +1163,10 @@ progressbar > trough > progress.top { border-top-right-radius: 5px; border-top-l progressbar > trough > progress.bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } +progressbar.horizontal > trough > progress { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + +progressbar.vertical > trough > progress { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); } + progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } @@ -1193,9 +1201,9 @@ levelbar > trough:backdrop { color: #444444; border-color: #a4a4a4; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #c7bebe; background-color: #c7bebe; } +levelbar > trough > block.low { border-color: #e17800; background-color: #e17800; } -levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #9dccff; background-color: #9dccff; } +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #1e5e00; background-color: #3ec400; } levelbar > trough > block.full { border-color: #73d216; background-color: #73d216; } @@ -1592,7 +1600,7 @@ cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878 cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); } -cursor-handle:active { border-color: #51a4ff; } +cursor-handle:active { border-color: #1e5e00; } cursor-handle:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } @@ -1731,7 +1739,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #a4a4a4; /* these are pretty self explicative */ -@define-color warning_color #c7bebe; +@define-color warning_color #e17800; @define-color error_color #df0000; @define-color success_color #73d216; /* diff --git a/source/templates/_theme_colors.scss b/source/templates/_theme_colors.scss index c170a99..f62addf 100644 --- a/source/templates/_theme_colors.scss +++ b/source/templates/_theme_colors.scss @@ -16,7 +16,7 @@ $disabled_fg: ${vdisabled_fg}; $disabled_bg: ${vdisabled_bg}; /*Usually an automatic fg color on these backgrounds should check this value!*/ -$warningc: ${vdisabled_bg}; +$warningc: ${vwarningc}; $errorc: ${verrorc}; $successc: ${vsuccessc}; diff --git a/source/templates/_theme_colors.scss.processed b/source/templates/_theme_colors.scss.processed index c1a16f1..16692fe 100644 --- a/source/templates/_theme_colors.scss.processed +++ b/source/templates/_theme_colors.scss.processed @@ -16,7 +16,7 @@ $disabled_fg: #552222; $disabled_bg: #c7bebe; /*Usually an automatic fg color on these backgrounds should check this value!*/ -$warningc: #c7bebe; +$warningc: #e17800; $errorc: #df0000; $successc: #73d216;