diff --git a/changelog b/changelog index 34288ac..a836299 100644 --- a/changelog +++ b/changelog @@ -1,3 +1,7 @@ - gtk 3.20 compatibility -- re-merge with ubuntu themes (version 14.04+16.10.20160720.laney1-0ubuntu1) +- added LibreOffice support +- added Gnome Calendar support +- ssd/csd improvements and tweaks +- new windows shadows +- re-merge with ubuntu themes (version 16.10+17.04.20170406-0ubuntu1) diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/calendar.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/calendar.css new file mode 100644 index 0000000..9091f82 --- /dev/null +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/calendar.css @@ -0,0 +1,17 @@ +/* Hide the white corners. Calendar sets a background colour for the whole window. */ +GcalWindow { background-color: transparent; } + +/* Make the calendar focus ring appear around the selected day */ +.calendar-view { + outline-style: dashed; + outline-color: @selected_bg_color; + outline-width: 2px; + outline-radius: 8px; + outline-offset: -4px; +} + +/* Give pop-down lists the same selected bg colour as other menus. Fixes lp# 1558659 */ +.calendar-list :hover { + background-color: @selected_bg_color; +} + diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/gnome-terminal.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/gnome-terminal.css index 6cf1a00..84e4338 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/gnome-terminal.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/apps/gnome-terminal.css @@ -21,3 +21,42 @@ TerminalScreenContainer .scrollbar.slider.dragging { TerminalScreenContainer .scrollbar { background-color: transparent; } + +TerminalNotebook.notebook.header { + background-color: @dark_bg_color; + border: none; +} + + +TerminalNotebook.notebook tab.top { + background-color: shade(@bg_color, 0.75); + border-width: 1px 1px 0px 1px; + border-radius: 8px 8px 0px 0px; + border-image: none; + border-style: solid; + border-color: @dark_bg_color; +} + +TerminalNotebook.notebook tab.top:active { + background-color: shade(@bg_color,1.2); + border-image: none; +} + +TerminalNotebook.notebook tab .button { + background-color: transparent; + padding: 1px; +} + +/* Match the actions bar. This is a hack and should be fixed in 3.20 */ +TerminalNotebook GtkBox.vertical { + background-color: transparent; +} + +.background TerminalNotebook GtkBox.vertical .button { + border-image:none; + border-color: transparent; + border-width: 1px; + border-radius: 5px; + padding: 1px; +} + diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-lubuntu.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-lubuntu.css index 5575672..4f29367 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-lubuntu.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-lubuntu.css @@ -221,116 +221,39 @@ NautilusWindow .sidebar .view { background-color: @sidepane_color; } -/************************************************************ - * GTK3 CSD support * - ************************************************************/ - -.titlebar { - border-radius: 6px 6px 0 0; - background-image: linear-gradient(to bottom, - shade(@bg_color, 1.07), - shade(@bg_color, 0.88) - ); - - color: @fg_color; -} - -.tiled .titlebar { - border-radius: 0; -} - -.maximized .titlebar { - border-radius: 0; -} - -.titlebar.default-decoration { - border: none; - box-shadow: none; -} - -.titlebar .title { - font: bold; - color: mix(@fg_color, @bg_color, 0.3); - text-shadow: 0 1px shade(@bg_color, 1.1); -} - -.titlebar:backdrop { - background-image: linear-gradient(to bottom, - shade(@bg_color, 1.12), - shade(@bg_color, 0.98) - ); -} - -.titlebar .title:backdrop { - color: mix(@fg_color, @bg_color, 0.6); - text-shadow: 0 1px shade(@bg_color, 1.05); -} - -.titlebar .button:backdrop { - color: mix(@fg_color, @bg_color, 0.6); -} - -.titlebar .titlebutton { - padding: 4px; - border-style: none; - background: none; - color: mix(@fg_color, @bg_color, 0.3); - icon-shadow: 0 1px shade(@bg_color, 1.1); - box-shadow: none; -} - -.titlebar .titlebutton:hover, -.titlebar .titlebutton:hover:focus { - background: none; - color: @fg_color; - box-shadow: none; -} - -.titlebar .titlebutton:active, -.titlebar .titlebutton:checked, -.titlebar .titlebutton:active:hover, -.titlebar .titlebutton:checked:hover { - background: none; - color: @selected_bg_color; +*:drop(active):focus, +*:drop(active) { + box-shadow: inset 0 0 0 1px #F08437; } + +decoration { + border-radius: 6px 6px 0 0; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5); + margin: 2px; } + decoration:backdrop { + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 transparent, 0 0 10px 0 rgba(0, 0, 0, 0.5); + transition: 200ms ease-out; } + .fullscreen decoration, + .tiled decoration { + border-radius: 0; } + .popup decoration { box-shadow: none; -} - -.titlebar .titlebutton:backdrop { - background-image: none; - color: mix(@fg_color, @bg_color, 0.6); - icon-shadow: 0 1px shade(@bg_color, 1.05); -} - -.window-frame, -.window-frame:backdrop { - border-style: none; + border-radius: 0; } + .ssd decoration { border-radius: 6px 6px 0 0; - box-shadow: 0 6px 22px alpha(black, 0.47), - 0 0 0 1px alpha(black, 0.3); - - /* this is used for the resize cursor area */ - margin: 10px; -} - -.window-frame.tiled { - border-radius: 0; -} - -.window-frame.csd.popup { - border-style: none; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5); } + .ssd decoration.maximized { + border-radius: 0; } + .csd.popup decoration { + border-radius: 2px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1); } + tooltip.csd decoration { + border-radius: 2px; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1); } + messagedialog.csd decoration { + border-radius: 3px; } + .solid-csd decoration { border-radius: 0; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -} + margin: 1px; + background-color: #e7e8eb; + box-shadow: none; } -.window-frame.csd.tooltip { - border-radius: 4px; - box-shadow: none; -} - -.window-frame.solid-csd { - border: solid 1px shade(@bg_color, 0.5); - border-radius: 0; - margin: 2px; - background-color: @bg_color; - box-shadow: none; -} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-main.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-main.css index 0a58a05..84bd922 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-main.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-main.css @@ -72,6 +72,7 @@ @import url("apps/gnome-system-log.css"); @import url("apps/glade.css"); @import url("apps/software-center.css"); +@import url("apps/calendar.css"); @import url("public-colors.css"); @import url("gtk-lubuntu.css"); diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets-radiance.css index 8d0092c..da9add7 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets-radiance.css @@ -1,23 +1,29 @@ -.menu .check { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +menu check { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.menu .radio { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +menu radio { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.menu .check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); +menu check:checked { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } -.menu .check:checked:insensitive { - -gtk-icon-source: url("assets/check-menuitem-insensitive-dark.png"); +menu check:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive-dark.png"), + url("assets/check-menuitem-insensitive-dark@2.png")); } -.menu .radio:checked { - -gtk-icon-source: url("assets/radio-menuitem-dark.png"); +menu radio:checked { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-dark.png"), + url("assets/radio-menuitem-dark@2.png")); } -.menu .radio:checked:insensitive { - -gtk-icon-source: url("assets/radio-menuitem-insensitive-dark.png"); +menu radio:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive-dark.png"), + url("assets/radio-menuitem-insensitive-dark@2.png")); } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets.css index c1c3d63..8788f23 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-assets.css @@ -12,551 +12,658 @@ *************************/ /* draw regular check and radio items using our SVG assets */ -.check { - -gtk-icon-source: url("assets/check-unselected.png"); +check { + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected.png"), + url("assets/check-unselected@2.png")); } -.check:hover { - -gtk-icon-source: url("assets/check-unselected-hover.png"); +check:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-hover.png"), + url("assets/check-unselected-hover@2.png")); } -.check row, -.check row:selected, -.check row:selected:focus { - -gtk-icon-source: url("assets/check-unselected-alt.png"); +check row, +check row:selected, +check row:selected:focus { + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-alt.png"), + url("assets/check-unselected-alt@2.png")); } -.check row:hover, -.check row:selected:hover, -.check row:selected:focus:hover { - -gtk-icon-source: url("assets/check-unselected-hover-alt.png"); +check row:hover, +check row:selected:hover, +check row:selected:focus:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-hover-alt.png"), + url("assets/check-unselected-hover-alt@2.png")); } -.check:insensitive { - -gtk-icon-source: url("assets/check-unselected-disabled.png"); +check:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-disabled.png"), + url("assets/check-unselected-disabled@2.png")); } -.check row:insensitive { +check row:disabled { background-color: transparent; } -.check row:insensitive, -.check row:selected:insensitive, -.check row:selected:focus:insensitive { +check row:disabled, +check row:selected:disabled, +check row:selected:focus:disabled { background-color: transparent; - -gtk-icon-source: url("assets/check-unselected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-disabled-alt.png"), + url("assets/check-unselected-disabled-alt@2.png")); } -.check:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected.png"); +check:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected.png"), + url("assets/backdrop-check-unselected@2.png")); } -.check:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-hover.png"); +check:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-hover.png"), + url("assets/backdrop-check-unselected-hover@2.png")); } -.check row:backdrop, -.check row:selected:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-alt.png"); +check row:backdrop, +check row:selected:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-alt.png"), + url("assets/backdrop-check-unselected-alt@2.png")); } -.check row:hover:backdrop, -.check row:selected:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-hover-alt.png"); +check row:hover:backdrop, +check row:selected:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-hover-alt.png"), + url("assets/backdrop-check-unselected-hover-alt@2.png")); } -.check:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-disabled.png"); +check:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-disabled.png"), + url("assets/backdrop-check-unselected-disabled@2.png")); } -.check row:selected:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-disabled-alt.png"); +check row:selected:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-disabled-alt.png"), + url("assets/backdrop-check-unselected-disabled-alt@2.png")); } -.check:checked { - -gtk-icon-source: url("assets/check-selected.png"); +check:checked { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected.png"), + url("assets/check-selected@2.png")); } -.check:checked:hover { - -gtk-icon-source: url("assets/check-selected-hover.png"); +check:checked:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-hover.png"), + url("assets/check-selected-hover@2.png")); } -.check row:checked, -.check row:selected:checked, -.check row:selected:focus:checked { - -gtk-icon-source: url("assets/check-selected-alt.png"); +check row:checked, +check row:selected:checked, +check row:selected:focus:checked { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-alt.png"), + url("assets/check-selected-alt@2.png")); } -.check row:checked:hover, -.check row:selected:checked:hover, -.check row:selected:checked:focus:hover { - -gtk-icon-source: url("assets/check-selected-hover-alt.png"); +check row:checked:hover, +check row:selected:checked:hover, +check row:selected:checked:focus:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-hover-alt.png"), + url("assets/check-selected-hover-alt@2.png")); } -.check:checked:insensitive { - -gtk-icon-source: url("assets/check-selected-disabled.png"); +check:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-disabled.png"), + url("assets/check-selected-disabled@2.png")); } -.check row:checked:insensitive, -.check row:selected:checked:insensitive, -.check row:selected:focus:checked:insensitive { - -gtk-icon-source: url("assets/check-selected-disabled-alt.png"); +check row:checked:disabled, +check row:selected:checked:disabled, +check row:selected:focus:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-disabled-alt.png"), + url("assets/check-selected-disabled-alt@2.png")); } -.check:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected.png"); +check:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected.png"), + url("assets/backdrop-check-selected@2.png")); } -.check:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-hover.png"); +check:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-hover.png"), + url("assets/backdrop-check-selected-hover@2.png")); } -.check row:checked:backdrop, -.check row:selected:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-alt.png"); +check row:checked:backdrop, +check row:selected:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-alt.png"), + url("assets/backdrop-check-selected-alt@2.png")); } -.check row:checked:hover:backdrop, -.check row:selected:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-hover-alt.png"); +check row:checked:hover:backdrop, +check row:selected:checked:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-hover-alt.png"), + url("assets/backdrop-check-selected-hover-alt@2.png")); } -.check:checked:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-disabled.png"); +check:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-disabled.png"), + url("assets/backdrop-check-selected-disabled@2.png")); } -.check row:selected:checked:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-disabled-alt.png"); +check row:selected:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-disabled-alt.png"), + url("assets/backdrop-check-selected-disabled-alt@2.png")); } -.check:inconsistent { - -gtk-icon-source: url("assets/check-mixed.png"); +check:indeterminate { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed.png"), + url("assets/check-mixed@2.png")); } -.check:inconsistent:hover { - -gtk-icon-source: url("assets/check-mixed-hover.png"); +check:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-hover.png"), + url("assets/check-mixed-hover@2.png")); } -.check row:inconsistent, -.check row:selected:inconsistent, -.check row:selected:focus:inconsistent { - -gtk-icon-source: url("assets/check-mixed-alt.png"); +check row:indeterminate, +check row:selected:indeterminate, +check row:selected:focus:indeterminate { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-alt.png"), + url("assets/check-mixed-alt@2.png")); } -.check row:inconsistent:hover, -.check row:selected:inconsistent:hover, -.check row:selected:focus:inconsistent:hover { - -gtk-icon-source: url("assets/check-mixed-hover-alt.png"); +check row:indeterminate:hover, +check row:selected:indeterminate:hover, +check row:selected:focus:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-hover-alt.png"), + url("assets/check-mixed-hover-alt@2.png")); } -.check:inconsistent:insensitive { - -gtk-icon-source: url("assets/check-mixed-disabled.png"); +check:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-disabled.png"), + url("assets/check-mixed-disabled@2.png")); } -.check row:inconsistent:insensitive, -.check row:selected:inconsistent:insensitive, -.check row:selected:focus:inconsistent:insensitive { - -gtk-icon-source: url("assets/check-mixed-disabled-alt.png"); +check row:indeterminate:disabled, +check row:selected:indeterminate:disabled, +check row:selected:focus:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-disabled-alt.png"), + url("assets/check-mixed-disabled-alt@2.png")); } -.check:inconsistent:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed.png"); +check:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed.png"), + url("assets/backdrop-check-mixed@2.png")); } -.check:inconsistent:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-hover.png"); +check:indeterminate:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-hover.png"), + url("assets/backdrop-check-mixed-hover@2.png")); } -.check row:inconsistent:backdrop, -.check row:selected:inconsistent:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-alt.png"); +check row:indeterminate:backdrop, +check row:selected:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-alt.png"), + url("assets/backdrop-check-mixed-alt@2.png")); } -.check row:inconsistent:hover:backdrop, -.check row:selected:inconsistent:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-hover-alt.png"); +check row:indeterminate:hover:backdrop, +check row:selected:indeterminate:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-hover-alt.png"), + url("assets/backdrop-check-mixed-hover-alt@2.png")); } -.check:inconsistent:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-disabled.png"); +check:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-disabled.png"), + url("assets/backdrop-check-mixed-disabled@2.png")); } -.check row:selected:inconsistent:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-disabled-alt.png"); +check row:selected:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-disabled-alt.png"), + url("assets/backdrop-check-mixed-disabled-alt@2.png")); } -.radio { - -gtk-icon-source: url("assets/radio-unselected.png"); +radio { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected.png"), + url("assets/radio-unselected@2.png")); } -.radio:hover { - -gtk-icon-source: url("assets/radio-unselected-hover.png"); +radio:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-hover.png"), + url("assets/radio-unselected-hover@2.png")); } -.radio row, -.radio row:selected, -.radio row:selected:focus { - -gtk-icon-source: url("assets/radio-unselected-alt.png"); +radio row, +radio row:selected, +radio row:selected:focus { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-alt.png"), + url("assets/radio-unselected-alt@2.png")); } -.radio row:hover, -.radio row:selected:hover, -.radio row:selected:focus:hover { - -gtk-icon-source: url("assets/radio-unselected-hover-alt.png"); +radio row:hover, +radio row:selected:hover, +radio row:selected:focus:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-hover-alt.png"), + url("assets/radio-unselected-hover-alt@2.png")); } -.radio:insensitive { - -gtk-icon-source: url("assets/radio-unselected-disabled.png"); +radio:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-disabled.png"), + url("assets/radio-unselected-disabled@2.png")); } -.radio row:insensitive { +radio row:disabled { background-color: transparent; } -.radio row:insensitive, -.radio row:selected:insensitive, -.radio row:selected:focus:insensitive { - -gtk-icon-source: url("assets/radio-unselected-disabled-alt.png"); +radio row:disabled, +radio row:selected:disabled, +radio row:selected:focus:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-disabled-alt.png"), + url("assets/radio-unselected-disabled-alt@2.png")); } -.radio:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected.png"); +radio:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected.png"), + url("assets/backdrop-radio-unselected@2.png")); } -.radio:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-hover.png"); +radio:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-hover.png"), + url("assets/backdrop-radio-unselected-hover@2.png")); } -.radio row:backdrop, -.radio row:selected:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-alt.png"); +radio row:backdrop, +radio row:selected:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-alt.png"), + url("assets/backdrop-radio-unselected-alt@2.png")); } -.radio row:hover:backdrop, -.radio row:selected:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-hover-alt.png"); +radio row:hover:backdrop, +radio row:selected:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-hover-alt.png"), + url("assets/backdrop-radio-unselected-hover-alt@2.png")); } -.radio:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-disabled.png"); +radio:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-disabled.png"), + url("assets/backdrop-radio-unselected-disabled@2.png")); } -.radio row:selected:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-disabled-alt.png"); +radio row:selected:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-disabled-alt.png"), + url("assets/backdrop-radio-unselected-disabled-alt@2.png")); } -.radio:checked { - -gtk-icon-source: url("assets/radio-selected.png"); +radio:checked { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected.png"), + url("assets/radio-selected@2.png")); } -.radio:checked:hover { - -gtk-icon-source: url("assets/radio-selected-hover.png"); +radio:checked:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-hover.png"), + url("assets/radio-selected-hover@2.png")); } -.radio row:checked, -.radio row:selected:checked, -.radio row:selected:focus:checked { - -gtk-icon-source: url("assets/radio-selected-alt.png"); +radio row:checked, +radio row:selected:checked, +radio row:selected:focus:checked { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-alt.png"), + url("assets/radio-selected-alt@2.png")); } -.radio row:checked:hover, -.radio row:selected:checked:hover, -.radio row:selected:focus:checked:hover { - -gtk-icon-source: url("assets/radio-selected-hover-alt.png"); +radio row:checked:hover, +radio row:selected:checked:hover, +radio row:selected:focus:checked:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-hover-alt.png"), + url("assets/radio-selected-hover-alt@2.png")); } -.radio:checked:insensitive { - -gtk-icon-source: url("assets/radio-selected-disabled.png"); +radio:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-disabled.png"), + url("assets/radio-selected-disabled@2.png")); } -.radio row:insensitive, -.radio row:selected:checked:insensitive, -.radio row:selected:focus:checked:insensitive { - -gtk-icon-source: url("assets/radio-selected-disabled-alt.png"); +radio row:disabled, +radio row:selected:checked:disabled, +radio row:selected:focus:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-disabled-alt.png"), + url("assets/radio-selected-disabled-alt@2.png")); } -.radio:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected.png"); +radio:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected.png"), + url("assets/backdrop-radio-selected@2.png")); } -.radio:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-hover.png"); +radio:checked:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-hover.png"), + url("assets/backdrop-radio-selected-hover@2.png")); } -.radio row:checked:backdrop, -.radio row:selected:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-alt.png"); +radio row:checked:backdrop, +radio row:selected:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-alt.png"), + url("assets/backdrop-radio-selected-alt@2.png")); } -.radio row:checked:hover:backdrop, -.radio row:selected:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-hover-alt.png"); +radio row:checked:hover:backdrop, +radio row:selected:checked:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-hover-alt.png"), + url("assets/backdrop-radio-selected-hover-alt@2.png")); } -.radio:checked:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-disabled.png"); +radio:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-disabled.png"), + url("assets/backdrop-radio-selected-disabled@2.png")); } -.radio row:selected:checked:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-disabled-alt.png"); +radio row:selected:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-disabled-alt.png"), + url("assets/backdrop-radio-selected-disabled-alt@2.png")); } -.radio:inconsistent { - -gtk-icon-source: url("assets/radio-mixed.png"); +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), + url("assets/radio-mixed@2.png")); } -.radio:inconsistent:hover { - -gtk-icon-source: url("assets/radio-mixed-hover.png"); +radio:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), + url("assets/radio-mixed-hover@2.png")); } -.radio row:inconsistent, -.radio row:selected:inconsistent, -.radio row:selected:focus:inconsistent { - -gtk-icon-source: url("assets/radio-mixed-alt.png"); +radio row:indeterminate, +radio row:selected:indeterminate, +radio row:selected:focus:indeterminate { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-alt.png"), + url("assets/radio-mixed-alt@2.png")); } -.radio row:inconsistent:hover, -.radio row:selected:inconsistent:hover, -.radio row:selected:focus:inconsistent:hover { - -gtk-icon-source: url("assets/radio-mixed-hover-alt.png"); +radio row:indeterminate:hover, +radio row:selected:indeterminate:hover, +radio row:selected:focus:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover-alt.png"), + url("assets/radio-mixed-hover-alt@2.png")); } -.radio:inconsistent:insensitive { - -gtk-icon-source: url("assets/radio-mixed-disabled.png"); +radio:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), + url("assets/radio-mixed-disabled@2.png")); } -.radio row:inconsistent:insensitive, -.radio row:selected:inconsistent:insensitive, -.radio row:selected:focus:inconsistent:insensitive { - -gtk-icon-source: url("assets/radio-mixed-disabled-alt.png"); +radio row:indeterminate:disabled, +radio row:selected:indeterminate:disabled, +radio row:selected:focus:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled-alt.png"), + url("assets/radio-mixed-disabled-alt@2.png")); } -.radio:inconsistent:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed.png"); +radio:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed.png"), + url("assets/backdrop-radio-mixed@2.png")); } -.radio:inconsistent:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-hover.png"); +radio:indeterminate:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-hover.png"), + url("assets/backdrop-radio-mixed-hover@2.png")); } -.radio row:inconsistent:backdrop, -.radio row:selected:inconsistent:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-alt.png"); +radio row:indeterminate:backdrop, +radio row:selected:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-alt.png"), + url("assets/backdrop-radio-mixed-alt.png")); } -.radio row:inconsistent:hover:backdrop, -.radio row:selected:inconsistent:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-hover-alt.png"); +radio row:indeterminate:hover:backdrop, +radio row:selected:indeterminate:hover:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-hover-alt.png"), + url("assets/backdrop-radio-mixed-hover-alt@2.png")); } -.radio:inconsistent:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-disabled.png"); +radio:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-disabled.png"), + url("assets/backdrop-radio-mixed-disabled@2.png")); } -.radio row:selected:inconsistent:insensitive:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-disabled-alt.png"); +radio row:selected:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-disabled-alt.png"), + url("assets/backdrop-radio-mixed-disabled-alt@2.png")); } -.primary-toolbar .menu .check, -.menubar.toolbar .menu .check, -.header-bar .menu .check, -.menu .check { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +.primary-toolbar menu check, +menubar toolbar menu check, +headerbar menu check, +menu check, +menu check:hover, +menu check:disabled:not(:checked), +menu check:indeterminate:not(:checked) { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.primary-toolbar .menu .radio, -.menubar.toolbar .menu .radio, -.header-bar .menu .radio, -.menu .radio { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +.primary-toolbar menu radio, +menubar toolbar menu radio, +headerbar menu radio, +menu radio, +menu radio:hover, +menu radio:disabled:not(:checked), +menu radio:indeterminate:not(:checked) { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.primary-toolbar .menu .check:checked, -.menubar.toolbar .menu .check:checked, -.header-bar .menu .check:checked, -.menu .check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); +.primary-toolbar menu check:checked, +menubar toolbar menu check:checked, +headerbar menu check:checked, +menu check:checked { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } -.toolbar .menu .check:checked:hover, -.menu .check:checked:hover { - -gtk-icon-source: url("assets/check-menuitem.png"); +toolbar menu check:checked:hover, +menu check:checked:hover { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem.png"), + url("assets/check-menuitem@2.png")); } -.primary-toolbar .menu .check:checked:insensitive, -.menubar.toolbar .menu .check:checked:insensitive, -.header-bar .menu .check:checked:insensitive, -.toolbar .menu .check:checked:hover:insensitive, -.menu .check:checked:insensitive, -.menu .check:checked:hover:insensitive { - -gtk-icon-source: url("assets/check-menuitem-insensitive.png"); +.primary-toolbar menu check:checked:disabled, +menubar toolbar menu check:checked:disabled, +headerbar menu check:checked:disabled, +toolbar menu check:checked:hover:disabled, +menu check:checked:disabled, +menu check:checked:hover:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive.png"), + url("assets/check-menuitem-insensitive@2.png")); } -.toolbar .menu .radio:checked:hover, -.menu .radio:checked { - -gtk-icon-source: url("assets/radio-menuitem.png"); +.primary-toolbar menu radio:checked, +menubar toolbar menu radio:checked, +headerbar menu radio:checked, +toolbar menu radio:checked:hover, +menu radio:checked, +menu radio:checked:hover { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem.png"), + url("assets/radio-menuitem@2.png")); } -.primary-toolbar .menu .radio:checked:insensitive, -.menubar.toolbar .menu .radio:checked:insensitive, -.header-bar .menu .radio:checked:insensitive, -.toolbar .menu .radio:checked:hover:insensitive, -.menu .radio:checked:insensitive, -.menu .radio:checked:hover:insensitive { - -gtk-icon-source: url("assets/radio-menuitem-insensitive.png"); +.primary-toolbar menu radio:checked:disabled, +menubar toolbar menu radio:checked:disabled, +headerbar menu radio:checked:disabled, +toolbar menu radio:checked:hover:disabled, +menu radio:checked:disabled, +menu radio:checked:hover:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive.png"), + url("assets/radio-menuitem-insensitive@2.png")); } -.toolbar .menu .check { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +toolbar menu check { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.toolbar .menu .radio { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); +toolbar menu radio { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } -.toolbar .menu .check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); +toolbar menu check:checked { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } -.toolbar .menu .check:checked:insensitive { - -gtk-icon-source: url("assets/check-menuitem-insensitive-dark.png"); +toolbar menu check:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive-dark.png"), + url("assets/check-menuitem-insensitive-dark@2.png")); } -.toolbar .menu .radio:checked { - -gtk-icon-source: url("assets/radio-menuitem-dark.png"); +toolbar menu radio:checked { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-dark.png"), + url("assets/radio-menuitem-dark@2.png")); } -.toolbar .menu .radio:checked:insensitive { - -gtk-icon-source: url("assets/radio-menuitem-insensitive-dark.png"); +toolbar menu radio:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive-dark.png"), + url("assets/radio-menuitem-insensitive-dark@2.png")); } /********************* * GtkScale's slider * *********************/ -.scale.slider, -.scale.slider.horizontal { - background-image: url("assets/slider-horizontal.png"); +scale slider, +scale.horizontal contents:only-child trough slider { + background-image: -gtk-scaled(url("assets/slider-horizontal.png"), + url("assets/slider-horizontal@2.png")); + background-repeat: no-repeat; } -.scale.slider:backdrop, -.scale.slider.horizontal:backdrop { - /*background-image: url("assets/slider-horizontal-disabled.png");*/ +scale:backdrop slider, +scale.horizontal:backdrop slider { + /*background-image: url("assets/slider-horizontal-disabled.png");*/ } -.scale.slider:hover, -.scale.slider.horizontal:hover { - background-image: url("assets/slider-horizontal-hover.png"); +scale slider:hover, +scale.horizontal slider:hover { + background-image: -gtk-scaled(url("assets/slider-horizontal-hover.png"), + url("assets/slider-horizontal-hover@2.png")); + background-repeat: no-repeat; } -.scale.slider:focused, -.scale.slider.horizontal:focused { - background-image: url("assets/slider-horizontal-focused.png"); +scale slider:focus, +scale.horizontal slider:focus { + background-image: -gtk-scaled(url("assets/slider-horizontal-focused.png"), + url("assets/slider-horizontal-focused@2.png")); } -.scale.slider:hover:focused, -.scale.slider.horizontal:hover:focused { - background-image: url("assets/slider-horizontal-focused-hover.png"); +scale slider:hover:focus, +scale.horizontal slider:hover:focus { + background-image: -gtk-scaled(url("assets/slider-horizontal-focused-hover.png"), + url("assets/slider-horizontal-focused-hover@2.png")); } -.scale.slider:insensitive, -.scale.slider.horizontal:insensitive { - background-image: url("assets/slider-horizontal-disabled.png"); +scale:disabled slider, +scale.horizontal:disabled slider { + background-image: -gtk-scaled(url("assets/slider-horizontal-disabled.png"), + url("assets/slider-horizontal-disabled@2.png")); } -.scale.slider:insensitive:backdrop, -.scale.slider.horizontal:insensitive:backdrop { +scale slider:disabled:backdrop, +scale.horizontal slider:disabled:backdrop { /*background-image: url("assets/slider-horizontal-backdrop-disabled.png");*/ } -.scale.slider.vertical { - background-image: url("assets/slider-vertical.png"); +scale.vertical slider { + background-image: -gtk-scaled(url("assets/slider-vertical.png"), + url("assets/slider-vertical@2.png")); } -.scale.slider.vertical:backdrop { +scale:backdrop.vertical slider { /*background-image: url("assets/slider-vertical-backdrop.png");*/ } -.scale.slider.vertical:hover { - background-image: url("assets/slider-vertical-hover.png"); +scale.vertical slider:hover { + background-image: -gtk-scaled(url("assets/slider-vertical-hover.png"), + url("assets/slider-vertical-hover@2.png")); } -.scale.slider.vertical:focused { - background-image: url("assets/slider-vertical-focused.png"); +scale.vertical slider:focus { + background-image: -gtk-scaled(url("assets/slider-vertical-focused.png"), + url("assets/slider-vertical-focused@2.png")); } -.scale.slider.vertical:hover:focused { - background-image: url("assets/slider-vertical-focused-hover.png"); +scale.vertical slider:hover:focus { + background-image: -gtk-scaled(url("assets/slider-vertical-focused-hover.png"), + url("assets/slider-vertical-focused-hover@2.png")); } -.scale.slider.vertical:insensitive { - background-image: url("assets/slider-vertical-disabled.png"); +scale:disabled.vertical slider { + background-image: -gtk-scaled(url("assets/slider-vertical-disabled.png"), + url("assets/slider-vertical-disabled@2.png")); } -.scale.slider.vertical:insensitive:backdrop { +scale:disabled:backdrop.vertical slider { /*background-image: url("assets/slider-vertical-backdrop-disabled.png");*/ } -/*.scale.scale-has-marks-above.slider.horizontal { +/*scale scale-has-marks-above.slider.horizontal { background-image: url("assets/slider-up.png"); } -.scale.scale-has-marks-above.slider.horizontal:insensitive { +scale scale-has-marks-above.slider.horizontal:disabled { background-image: url("assets/slider-up-disabled.png"); } -.scale.scale-has-marks-above.slider.horizontal:backdrop { +scale scale-has-marks-above.slider.horizontal:backdrop { background-image: url("assets/slider-up-backdrop.png"); } -.scale.scale-has-marks-above.slider.horizontal:backdrop:insensitive { +scale scale-has-marks-above.slider.horizontal:backdrop:disabled { background-image: url("assets/slider-up-backdrop-disabled.png"); } -.scale.scale-has-marks-above.slider.vertical { +scale scale-has-marks-above.slider.vertical { background-image: url("assets/slider-left.png"); } -.scale.scale-has-marks-above.slider.vertical:insensitive { +scale scale-has-marks-above.slider.vertical:disabled { background-image: url("assets/slider-left-disabled.png"); } -.scale.scale-has-marks-above.slider.vertical:backdrop { +scale scale-has-marks-above.slider.vertical:backdrop { background-image: url("assets/slider-left-backdrop.png"); } -.scale.scale-has-marks-above.slider.vertical:backdrop:insensitive { +scale scale-has-marks-above.slider.vertical:backdrop:disabled { background-image: url("assets/slider-left-backdrop-disabled.png"); } -.scale.scale-has-marks-below.slider.horizontal { +scale scale-has-marks-below.slider.horizontal { background-image: url("assets/slider-down.png"); } -.scale.scale-has-marks-below.slider.horizontal:insensitive { +scale scale-has-marks-below.slider.horizontal:disabled { background-image: url("assets/slider-down-disabled.png"); } -.scale.scale-has-marks-below.slider.horizontal:backdrop { +scale scale-has-marks-below.slider.horizontal:backdrop { background-image: url("assets/slider-down-backdrop.png"); } -.scale.scale-has-marks-below.slider.horizontal:backdrop:insensitive { +scale scale-has-marks-below.slider.horizontal:backdrop:disabled { background-image: url("assets/slider-down-backdrop-disabled.png"); } -.scale.scale-has-marks-below.slider.vertical { +scale scale-has-marks-below.slider.vertical { background-image: url("assets/slider-right.png"); } -.scale.scale-has-marks-below.slider.vertical:insensitive { +scale scale-has-marks-below.slider.vertical:disabled { background-image: url("assets/slider-right-disabled.png"); } -.scale.scale-has-marks-below.slider.vertical:backdrop { +scale scale-has-marks-below.slider.vertical:backdrop { background-image: url("assets/slider-right-backdrop.png"); } -.scale.scale-has-marks-below.slider.vertical:backdrop:insensitive { +scale scale-has-marks-below.slider.vertical:backdrop:disabled { background-image: url("assets/slider-right-backdrop-disabled.png"); }*/ diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders-radiance.css index 63c840e..2bd55df 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders-radiance.css @@ -1,38 +1,37 @@ - .primary-toolbar .entry, -.menubar.toolbar .entry, -.header-bar .entry { - border-image: url("assets/radiance-entry-toolbar.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +menubar toolbar entry, +headerbar entry { + border-image: -gtk-scaled(url("assets/radiance-entry-toolbar.png"),url("assets/radiance-entry-toolbar@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar .entry:focus, -.menubar.toolbar .entry:focus, -.header-bar .entry:focus { - border-image: url("assets/radiance-entry-toolbar-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +primary-toolbar entry:focus, +menubar toolbar entry:focus, +headerbar entry:focus { + border-image: -gtk-scaled(url("assets/radiance-entry-toolbar-focused.png"),url("assets/radiance-entry-toolbar-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button, -.primary-toolbar GtkComboBox.combobox-entry .button:focus:insensitive, -.menubar.toolbar GtkComboBox.combobox-entry .button, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus:insensitive, -.header-bar GtkComboBox.combobox-entry .button, -.header-bar GtkComboBox.combobox-entry .button:focus:insensitive { +.primary-toolbar combobox entry button, +.primary-toolbar combobox entry button:focus:disabled, +menubar toolbar combobox entry button, +menubar toolbar combobox entry button:focus:disabled, +headerbar combobox entry button, +headerbar combobox entry button:focus:disabled { border-image: url("assets/radiance-combobox-button-toolbar.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button:focus, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus, -.header-bar GtkComboBox.combobox-entry .button:focus { +.primary-toolbar combobox entry button:focus, +menubar toolbar combobox entry button:focus, +headerbar combobox entry button:focus { border-image: url("assets/radiance-combobox-button-toolbar-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button:focus:active:focus, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus:active:focus, -.header-bar GtkComboBox.combobox-entry .button:focus:active:focus { +.primary-toolbar combobox entry button:focus:active:focus, +menubar toolbar combobox entry button:focus:active:focus, +headerbar combobox entry button:focus:active:focus { border-image: url("assets/radiance-combobox-button-toolbar-pressed-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.menubar.menuitem:hover, -.menubar .menuitem:hover { +menubar menuitem:hover, +.menubar.menuitem:hover { border-color: #b8ab9c; } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders.css index b178dc9..52dc2e2 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-borders.css @@ -1,6 +1,12 @@ /* Borders */ -.menubar.menuitem:hover, -.menubar .menuitem:hover { +menubar menuitem, +.menubar.menuitem { + border: 1px solid transparent; + border-bottom-width: 0px; +} + +menubar menuitem:hover, +.menubar.menuitem:hover { border: 1px solid #2e2e2c; border-bottom-width: 0px; border-radius: 4px 4px 0 0; @@ -9,294 +15,304 @@ /********* * entry * *********/ -.entry { +spinbutton, +entry { border-radius: 8px; border-width: 1px; border-style: solid; border-color: transparent; } -.entry { - border-image: url("assets/entry.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +spinbutton, +entry { + border-image: -gtk-scaled(url("assets/entry.png"),url("assets/entry@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; +} + +spinbutton:backdrop, +entry:backdrop { + border-image: -gtk-scaled(url("assets/backdrop-entry.png"),url("assets/backdrop-entry@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.entry:backdrop { - border-image: url("assets/backdrop-entry.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +spinbutton:focus, +entry:focus { + border-image: -gtk-scaled(url("assets/entry-focused.png"),url("assets/entry-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.entry:focus { - border-image: url("assets/entry-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +spinbutton:disabled, +entry:disabled { + border-image: -gtk-scaled(url("assets/entry-disabled.png"),url("assets/entry-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.entry:insensitive { - border-image: url("assets/entry-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +spinbutton:disabled:backdrop, +entry:disabled:backdrop { + border-image: -gtk-scaled(url("assets/backdrop-entry-disabled.png"),url("assets/backdrop-entry-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.entry:insensitive:backdrop { - border-image: url("assets/backdrop-entry-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +spinbutton entry, +spinbutton entry:focus, +spinbutton entry:disabled, +spinbutton entry:disabled:backdrop, +spinbutton entry:backdrop { + margin: 1px; + border-image: none; } -.primary-toolbar .entry, -.menubar.toolbar .entry, -.header-bar .entry { - border-image: url("assets/entry-toolbar.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +.primary-toolbar entry, +menubar toolbar entry, +headerbar entry { + border-image: -gtk-scaled(url("assets/entry-toolbar.png"),url("assets/entry-toolbar@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar .entry:focus, -.menubar.toolbar .entry:focus, -.header-bar .entry:focus { - border-image: url("assets/entry-toolbar-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +.primary-toolbar entry:focus, +menubar toolbar entry:focus, +headerbar entry:focus { + border-image: -gtk-scaled(url("assets/entry-toolbar-focused.png"),url("assets/entry-toolbar-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar .entry.progressbar, -.primary-toolbar .entry.progressbar, -.menubar.toolbar .entry.progressbar, -.menubar.toolbar .entry.progressbar, -.header-bar .entry.progressbar, -.header-bar .entry.progressbar, -.entry.progressbar { +.primary-toolbar entry progress, +menubar toolbar entry progress, +headerbar entry progress { border-radius: 8px; border-width: 0; } /****************** - * combobox entry * + * comboboxentry * ******************/ -GtkComboBox.combobox-entry .entry:first-child, -GtkComboBox.combobox-entry .button:first-child { +combobox entry:first-child, +combobox entry button:first-child { border-image-width: 10px 1px 10px 12px; border-radius: 8px 0 0 8px; border-right-width: 0; } -GtkComboBox.combobox-entry .entry:last-child, -GtkComboBox.combobox-entry .button:last-child { +combobox entry:last-child, +combobox entry button:last-child { border-image-width: 10px 12px 10px 1px; border-radius: 0 8px 8px 0; border-left-width: 0; } -GtkComboBox.combobox-entry .button { - border-image: url("assets/combobox-button.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button { + border-image: -gtk-scaled(url("assets/combobox-button.png"),url("assets/combobox-button@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -GtkComboBox.combobox-entry .button:backdrop { - border-image: url("assets/backdrop-combobox-button.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button:backdrop { + border-image: -gtk-scaled(url("assets/backdrop-combobox-button.png"),url("assets/backdrop-combobox-button@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -GtkComboBox.combobox-entry .button:focus { - border-image: url("assets/combobox-button-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button:focus { + border-image: -gtk-scaled(url("assets/combobox-button-focused.png"),url("assets/combobox-button-focused@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -GtkComboBox.combobox-entry .button:insensitive { - border-image: url("assets/combobox-button-disabled.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button:disabled { + border-image: -gtk-scaled(url("assets/combobox-button-disabled.png"),url("assets/combobox-button-disabled@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -GtkComboBox.combobox-entry .button:insensitive:backdrop { - border-image: url("assets/backdrop-combobox-button-disabled.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button:disabled:backdrop { + border-image: -gtk-scaled(url("assets/backdrop-combobox-button-disabled.png"),url("assets/backdrop-combobox-button-disabled@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -GtkComboBox.combobox-entry .button:active:focus { - border-image: url("assets/combobox-button-pressed-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +combobox entry button:active:focus { + border-image: -gtk-scaled(url("assets/combobox-button-pressed-focused.png"),url("assets/combobox-button-pressed-focused@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button, -.primary-toolbar GtkComboBox.combobox-entry .button:focus:insensitive, -.menubar.toolbar GtkComboBox.combobox-entry .button, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus:insensitive, -.header-bar GtkComboBox.combobox-entry .button, -.header-bar GtkComboBox.combobox-entry .button:focus:insensitive { - border-image: url("assets/combobox-button-toolbar.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +.primary-toolbar combobox entry button, +.primary-toolbar combobox entry button:focus:disabled, +menubar toolbar combobox entry button, +menubar toolbar combobox entry button:focus:disabled, +headerbar combobox entry button, +headerbar combobox entry button:focus:disabled { + border-image: url("assets/combobox-entry button-toolbar.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button:focus, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus, -.header-bar GtkComboBox.combobox-entry .button:focus { - border-image: url("assets/combobox-button-toolbar-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +.primary-toolbar combobox entry button:focus, +menubar toolbar combobox entry button:focus, +headerbar combobox entry button:focus { + border-image: url("assets/combobox-entry button-toolbar-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .button:focus:active:focus, -.menubar.toolbar GtkComboBox.combobox-entry .button:focus:active:focus, -.header-bar GtkComboBox.combobox-entry .button:focus:active:focus { - border-image: url("assets/combobox-button-toolbar-pressed-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; +.primary-toolbar combobox entry button:focus:active:focus, +menubar toolbar combobox entry button:focus:active:focus, +headerbar combobox entry button:focus:active:focus { + border-image: url("assets/combobox-entry button-toolbar-pressed-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; } -.primary-toolbar GtkComboBox.combobox-entry .entry:first-child, -.primary-toolbar GtkComboBox.combobox-entry .button:first-child, -.menubar.toolbar GtkComboBox.combobox-entry .entry:first-child, -.menubar.toolbar GtkComboBox.combobox-entry .button:first-child, -.header-bar GtkComboBox.combobox-entry .entry:first-child, -.header-bar GtkComboBox.combobox-entry .button:first-child { +.primary-toolbar combobox entry:first-child, +.primary-toolbar combobox entry button:first-child, +menubar toolbar combobox entry:first-child, +menubar toolbar combobox entry button:first-child, +headerbar combobox entry:first-child, +headerbar combobox entry button:first-child { border-image-width: 10px 0 10px 12px; border-radius: 8px 0 0 8px; border-right-width: 0; } -.primary-toolbar GtkComboBox.combobox-entry .entry:last-child, -.primary-toolbar GtkComboBox.combobox-entry .button:last-child, -.menubar.toolbar GtkComboBox.combobox-entry .entry:last-child, -.menubar.toolbar GtkComboBox.combobox-entry .button:last-child, -.header-bar GtkComboBox.combobox-entry .entry:last-child, -.header-bar GtkComboBox.combobox-entry .button:last-child { +.primary-toolbar combobox entry:last-child, +.primary-toolbar combobox entry button:last-child, +menubar toolbar combobox entry:last-child, +menubar toolbar combobox entry button:last-child, +headerbar combobox entry:last-child, +headerbar combobox entry button:last-child { border-image-width: 10px 12px 10px 1px; border-radius: 0 8px 8px 0; border-left-width: 0; } -.notebook tab.top:active { - border-image: url("assets/notebook-tab-top.png") 8 10 1 10 / 8px 10px 1px 10px stretch; -} - -.notebook tab.right:active { - border-image: url("assets/notebook-tab-right.png") 10 8 10 1 / 10px 8px 10px 1px stretch; +notebook header.top tab:checked { + border-image: -gtk-scaled(url("assets/notebook-tab-top.png"),url("assets/notebook-tab-top@2.png")) 8 10 1 10 / 8px 10px 1px 10px stretch; } -.notebook tab.bottom:active { - border-image: url("assets/notebook-tab-bottom.png") 1 10 8 10 / 1px 10px 8px 10px stretch; +notebook header.right tab:checked { + border-image: -gtk-scaled(url("assets/notebook-tab-right.png"),url("assets/notebook-tab-right@2.png")) 10 8 10 1 / 10px 8px 10px 1px stretch; } -.notebook tab.left:active { - border-image: url("assets/notebook-tab-left.png") 10 1 10 8 / 10px 1px 10px 8px stretch; +notebook header.bottom tab:checked { + border-image: -gtk-scaled(url("assets/notebook-tab-bottom.png"),url("assets/notebook-tab-bottom@2.png")) 1 10 8 10 / 1px 10px 8px 10px stretch; } -/* unfocused window: generic element borders */ -.button:backdrop, -GtkComboBox.combobox-entry .entry:backdrop, -GtkComboBox.combobox-entry .button:backdrop, -.entry:backdrop, -GtkSwitch.trough:backdrop, -.trough:backdrop { +notebook header.left tab:checked { + border-image: -gtk-scaled(url("assets/notebook-tab-left.png"),url("assets/notebook-tab-left@2.png")) 10 1 10 8 / 10px 1px 10px 8px stretch; } .trough, -.trough.highlight { +trough, +trough.highlight { border-radius: 4px; border-width: 1px; border-style: solid; border-color: transparent; } -.trough { - border-image: url("assets/progressbar-horizontal-trough.png") 6 7 6 7 / 6px 7px 6px 7px stretch; +.trough, +trough { + border-image: -gtk-scaled(url("assets/progressbar-horizontal-trough.png"),url("assets/progressbar-horizontal-trough@2.png")) 6 7 6 7 / 6px 7px 6px 7px stretch; } -GtkSwitch.trough { - border-image: url("assets/switch-trough-off.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +switch { + border-image: -gtk-scaled(url("assets/switch-trough-off.png"),url("assets/switch-trough-off@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -GtkSwitch.trough:active { - border-image: url("assets/switch-trough-on.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +switch:checked { + border-image: -gtk-scaled(url("assets/switch-trough-on.png"),url("assets/switch-trough-on@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar GtkSwitch.trough, -.menubar.toolbar GtkSwitch.trough, -.header-bar GtkSwitch.trough { - border-image: url("assets/switch-trough-toolbar-off.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +.primary-toolbar switch, +menubar toolbar switch, +headerbar switch { + border-image: -gtk-scaled(url("assets/switch-trough-toolbar-off.png"),url("assets/switch-trough-toolbar-off@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -.primary-toolbar GtkSwitch.trough:active, -.menubar.toolbar GtkSwitch.trough:active, -.header-bar GtkSwitch.trough:active { - border-image: url("assets/switch-trough-toolbar-on.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +.primary-toolbar switch:checked, +menubar toolbar switch:checked, +headerbar switch:checked { + border-image: -gtk-scaled(url("assets/switch-trough-toolbar-on.png"),url("assets/switch-trough-toolbar-on@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } /* XXX temporary */ -GtkSwitch.trough:backdrop, -GtkSwitch.trough:active:backdrop, -GtkSwitch.trough:insensitive, -GtkSwitch.trough:active:insensitive { - border-image: url("assets/switch-trough-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; +switch:backdrop, +switch:checked:backdrop, +switch:disabled, +switch:checked:disabled { + border-image: -gtk-scaled(url("assets/switch-trough-disabled.png"),url("assets/switch-trough-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } -GtkSwitch.slider { - border-image: url("assets/switch-button-off.png") 9 11 9 11 / 9px 11px 9px 11px stretch; +switch slider { + border-image: -gtk-scaled(url("assets/switch-button-off.png"),url("assets/switch-button-off@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } -GtkSwitch.slider:active { - border-image: url("assets/switch-button-on.png") 9 11 9 11 / 9px 11px 9px 11px stretch; +switch:checked slider { + border-image: -gtk-scaled(url("assets/switch-button-on.png"),url("assets/switch-button-on@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } /* XXX temporary */ -GtkSwitch.slider:backdrop, -GtkSwitch.slider:insensitive { - border-image: url("assets/switch-button-off-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch; +switch:backdrop slider, +switch:disabled slider { + border-image: -gtk-scaled(url("assets/switch-button-off-disabled.png"),url("assets/switch-button-off-disabled@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } /* XXX temporary */ -GtkSwitch.slider:active:backdrop, -GtkSwitch.slider:active:insensitive { - border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch; +switch:active:backdrop slider, +switch:active:disabled slider { + border-image: -gtk-scaled(url("assets/switch-button-on-disabled.png"),url("assets/switch-button-on-disabled@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } +/* +progressbar trough progress, .progressbar, -.progressbar row, -.progressbar row:hover, -.progressbar row:selected, -.progressbar row:selected:focused { +progressbar row, +progressbar row:hover, +progressbar row:selected, +progressbar row:selected:focus { border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch; } -.progressbar.vertical { +.progressbar.vertical.trough, +progressbar.vertical trough progress { border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch; } -.progressbar:backdrop, -.progressbar row:backdrop, -.progressbar row:hover:backdrop, -.progressbar row:selected:backdrop, -.progressbar row:selected:focused:backdrop { +.progressbar.trough:backdrop, +progressbar:backdrop trough progress, +progressbar row:backdrop, +progressbar row:hover:backdrop, +progressbar row:selected:backdrop, +progressbar row:selected:focus:backdrop { border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch; } -.progressbar.vertical:backdrop { +.progressbar.vertical:backdrop, +progressbar.vertical:backdrop trough progress { border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch; } +*/ -.scale.trough { - border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale trough { + border-image: -gtk-scaled(url("assets/scale-horizontal-trough.png"),url("assets/scale-horizontal-trough@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough:insensitive { - border-image: url("assets/scale-horizontal-trough-disabled.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale:disabled trough { + border-image: -gtk-scaled(url("assets/scale-horizontal-trough-disabled.png"),url("assets/scale-horizontal-trough-disabled@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough:backdrop { - border-image: url("assets/scale-horizontal-trough-backdrop.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale:backdrop trough { + border-image: -gtk-scaled(url("assets/scale-horizontal-trough-backdrop.png"),url("assets/scale-horizontal-trough-backdrop@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough.vertical { - border-image: url("assets/scale-vertical-trough.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical trough { + border-image: -gtk-scaled(url("assets/scale-vertical-trough.png"),url("assets/scale-vertical-trough@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } -.scale.trough.vertical:insensitive { - border-image: url("assets/scale-vertical-trough-disabled.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical:disabled trough { + border-image: -gtk-scaled(url("assets/scale-vertical-trough-disabled.png"),url("assets/scale-vertical-trough-disabled@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } -.scale.trough.highlight.left { - border-image: url("assets/scale-horizontal-fill.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale trough.highlight.left { + border-image: -gtk-scaled(url("assets/scale-horizontal-fill.png"),url("assets/scale-horizontal-fill@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough.vertical:backdrop { - border-image: url("assets/scale-vertical-trough-backdrop.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical:backdrop trough { + border-image: -gtk-scaled(url("assets/scale-vertical-trough-backdrop.png"),url("assets/scale-vertical-trough-backdrop@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } -.scale.trough.highlight.left:insensitive { - border-image: url("assets/scale-horizontal-fill-disabled.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale:backdrop trough.highlight.left { + border-image: -gtk-scaled(url("assets/scale-horizontal-fill-disabled.png"),url("assets/scale-horizontal-fill-disabled@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough.highlight.left:backdrop { - border-image: url("assets/scale-horizontal-fill-backdrop.png") 2 6 2 6 / 2px 6px 2px 6px stretch; +scale:backdrop trough.highlight.left { + border-image: -gtk-scaled(url("assets/scale-horizontal-fill-backdrop.png"),url("assets/scale-horizontal-fill-backdrop@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } -.scale.trough.highlight.bottom.vertical { - border-image: url("assets/scale-vertical-fill.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical trough.highlight.bottom { + border-image: -gtk-scaled(url("assets/scale-vertical-fill.png"),url("assets/scale-vertical-fill@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } -.scale.trough.highlight.bottom.vertical:insensitive { - border-image: url("assets/scale-vertical-fill-disabled.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical:disabled trough.highlight.bottom { + border-image: -gtk-scaled(url("assets/scale-vertical-fill-disabled.png"),url("assets/scale-vertical-fill-disabled@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } -.scale.trough.highlight.bottom.vertical:backdrop { - border-image: url("assets/scale-vertical-fill-backdrop.png") 6 2 6 2 / 6px 2px 6px 2px stretch; +scale.vertical:backdrop trough.highlight.bottom { + border-image: -gtk-scaled(url("assets/scale-vertical-fill-backdrop.png"),url("assets/scale-vertical-fill-backdrop@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-radiance.css index bf92be4..158c985 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets-radiance.css @@ -1,113 +1,76 @@ /* Set up shadows and hilights for button visual separation */ -.primary-toolbar .linked .button, -.primary-toolbar .button.raised.linked, -.primary-toolbar .raised.linked .button, -.menubar.toolbar .linked .button, -.menubar.toolbar .button.raised.linked, -.menubar.toolbar .raised.linked .button, -.header-bar .linked .button, -.header-bar .button.raised.linked, -.header-bar .button.raised.linked .button { +.primary-toolbar .linked button, +headerbar .linked button { box-shadow: inset 1px 0 shade (@dark_bg_color, 1.1), inset -1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:first-child, -.primary-toolbar .button.raised.linked:first-child, -.primary-toolbar .raised.linked .button:first-child, -.menubar.toolbar .linked .button:first-child, -.menubar.toolbar .button.raised.linked:first-child, -.menubar.toolbar .raised.linked .button:first-child, -.header-bar .linked .button:first-child, -.header-bar .button.raised.linked:first-child, -.header-bar .raised.linked .button:first-child { +.primary-toolbar .linked button:first-child, +headerbar .linked button:first-child { box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:last-child, -.primary-toolbar .button.raised.linked:last-child, -.primary-toolbar .raised.linked .button:last-child, -.menubar.toolbar .linked .button:last-child, -.menubar.toolbar .button.raised.linked:last-child, -.menubar.toolbar .raised.linked .button:last-child, -.header-bar .linked .button:last-child, -.header-bar .button.raised.linked:last-child, -.header-bar .raised.linked .button:last-child { - box-shadow: inset 1px 0 shade (@dark_bg_color, 1.1) -} - -.primary-toolbar .linked .button:active, -.primary-toolbar .button.raised.linked:active, -.primary-toolbar .raised.linked .button:active, -.menubar.toolbar .linked .button:active, -.menubar.toolbar .button.raised.linked:active, -.menubar.toolbar .raised.linked .button:active, -.header-bar .linked .button:active, -.header-bar .button.raised.linked:active, -.header-bar .raised.linked .button:active { +.primary-toolbar .linked button:active, +headerbar .linked button:active, +.primary-toolbar .linked button:disabled, +headerbar .linked button:disabled { box-shadow: inset 1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:insensitive, -.primary-toolbar .button.raised.linked:insensitive, -.primary-toolbar .raised.linked .button:insensitive, -.menubar.toolbar .linked .button:insensitive, -.menubar.toolbar .button.raised.linked:insensitive, -.menubar.toolbar .raised.linked .button:insensitive, -.header-bar .linked .button:insensitive, -.header-bar .button.raised.linked:insensitive, -.header-bar .raised.linked .button:insensitive { +.primary-toolbar .linked button:active, +headerbar .linked button:active, +.primary-toolbar .linked button:disabled, +headerbar .linked button:disabled { box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:backdrop:last-child, -.primary-toolbar .button.raised.linked:backdrop:last-child, -.primary-toolbar .raised.linked .button:backdrop:last-child, -.menubar.toolbar .linked .button:backdrop:last-child, -.menubar.toolbar .button.raised.linked:backdrop:last-child, -.menubar.toolbar .raised.linked .button:backdrop:last-child, -.header-bar .linked .button:backdrop:last-child, -.header-bar .button.raised.linked:backdrop:last-child, -.header-bar .raised.linked .button:backdrop:last-child { +.primary-toolbar .linked button:last-child, +headerbar .linked button:last-child { box-shadow: inset 1px 0 shade (@dark_bg_color, 1.1); } -.menubar { +menubar { color: @dark_fg_color; text-shadow: 0 1px shade (@dark_bg_color, 1.1); } +menubar menuitem:hover, .menubar.menuitem:hover, .menubar .menuitem:hover { color: @dark_fg_color; text-shadow: 0 1px shade (@dark_bg_color, 1.1); } -.menuitem:hover, -.menu .menuitem:hover { +popover modelbutton:hover, +popover menuitem:checked:hover, +menuitem:hover, +menu menuitem:hover { color: @selected_fg_color; text-shadow: 0 -1px shade (@selected_bg_color, 0.7); } -.menuitem:insensitive, -.menuitem *:insensitive { +toolbar headerbar menu menuitem:disabled, +toolbar headerbar menu menuitem *:disabled, +toolbutton menu menuitem:disabled, +toolbutton menu menuitem *:disabled, +.primary-toolbar button menu menuitem:disabled, +.primary-toolbar button menu menuitem *:disabled, +headerbar button menu menuitem:disabled, +headerbar button menu menuitem *:disabled, +menuitem:disabled, +menuitem *:disabled { color: mix (@fg_color, @bg_color, 0.5); text-shadow: 0 1px shade (@bg_color, 1.14); } /* for the playback menu item in the sound menu */ -.menu .spinner, -.menu .spinner:hover { +menu spinner, +menu spinner:hover { color: @selected_bg_color; } /* primary-toolbar */ -.primary-toolbar, -.primary-toolbar .toolbar, -.primary-toolbar.toolbar, -.menubar.toolbar, -.header-bar, -.maximized .titlebar.header-bar.toolbar-mode:not(:backdrop) { +.primary-toolbar { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 0.96)), to (shade (@dark_bg_color, 1.1))); @@ -117,39 +80,24 @@ text-shadow: 0 1px shade (@dark_bg_color, 1.1); } -.primary-toolbar :insensitive, -.menubar.toolbar :insensitive, -.header-bar :insensitive { +.primary-toolbar:disabled, +headerbar:disabled { text-shadow: 0 1px shade (@dark_bg_color, 1.1); } -.primary-toolbar GtkComboBox, -.primary-toolbar .button *, -.primary-toolbar .button, -.menubar.toolbar GtkComboBox, -.menubar.toolbar .button *, -.menubar.toolbar .button, -.header-bar GtkComboBox, -.header-bar .button *, -.header-bar .button { +.primary-toolbar button, +headerbar button *, +headerbar button:disabled * { text-shadow: 0 1px alpha (shade (@dark_bg_color, 1.25), 0.32); } -.primary-toolbar .raised .button, -.primary-toolbar .raised.button, -.primary-toolbar .button:hover, -.primary-toolbar .button:active, -.primary-toolbar .button:insensitive, -.menubar.toolbar .raised .button, -.menubar.toolbar .raised.button, -.menubar.toolbar .button:hover, -.menubar.toolbar .button:active, -.menubar.toolbar .button:insensitive, -.header-bar .raised .button, -.header-bar .raised.button, -.header-bar .button:hover, -.header-bar .button:active, -.header-bar .button:insensitive { +.primary-toolbar button:hover, +.primary-toolbar button:active, +.primary-toolbar button:disabled, +headerbar button:hover, +headerbar button:backdrop:hover, +headerbar button:active, +headerbar button:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 1.03)), to (shade (@dark_bg_color, 0.96))); diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets.css b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets.css index a3bc064..65a9ed5 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.0/gtk-widgets.css @@ -1,48 +1,7 @@ * { - -GtkArrow-arrow-scaling: 0.6; - -GtkButton-child-displacement-x: 1; - -GtkButton-child-displacement-y: 1; - -GtkButton-default-border: 0; - -GtkButton-image-spacing: 0; - -GtkButton-interior-focus: true; - -GtkButton-inner-border: 3; - -GtkCheckButton-indicator-size: 18; - -GtkCheckMenuItem-indicator-size: 16; - -GtkEntry-inner-border: 2; - -GtkEntry-progress-border: 0; - -GtkExpander-expander-size: 8; -GtkHTML-link-color: #f07746; /* @link_color */ -GtkIMHtml-hyperlink-color: #f07746; /* @link_color */ - -GtkMenu-horizontal-padding: 0; - -GtkMenu-vertical-padding: 5px; - -GtkMenuBar-internal-padding: 0; - -GtkMenuItem-arrow-scaling: 0.6; - -GtkNotebook-tab-overlap: 1; - -GtkPaned-handle-size: 6; - -GtkProgressBar-min-horizontal-bar-height: 14; - -GtkProgressBar-min-vertical-bar-width: 14; - -GtkRange-trough-border: 0; - -GtkRange-slider-width: 14; - -GtkRange-stepper-size: 13; - -GtkRange-trough-under-steppers: 1; - -GtkRange-stepper-spacing: 0; - -GtkScale-trough-border: 0; - -GtkScrolledWindow-scrollbar-spacing: 0; - -GtkScrolledWindow-scrollbars-within-bevel: 1; - -GtkSeparatorMenuItem-horizontal-padding: 0; - -GtkStatusbar-shadow-type: none; - -GtkTextView-error-underline-color: #df382c; /* @error_color */ - -GtkToolButton-icon-spacing: 6; - -GtkToolItemGroup-expander-size: 11; - -GtkToolbar-internal-padding: 0; - -GtkTreeView-expander-size: 8; - -GtkTreeView-vertical-separator: 0; - -GtkWidget-separator-width: 2; - -GtkWidget-separator-height: 2; - -GtkWidget-link-color: #f07746; /* @link_color */ - -GtkWidget-visited-link-color: #f07746; /* @link_color */ - -GtkWindow-resize-grip-width: 0; - -GtkWindow-resize-grip-height: 0; + -GtkTextView-error-underline-color: #df382c; /* @error_color doesn't work due to a gtk bug */ -WnckTasklist-fade-overlay-rect: 0; background-origin: border-box; @@ -56,34 +15,31 @@ .background:backdrop { color: @backdrop_fg_color; + box-shadow: inset -1px 0 shade (@bg_color, 0.94); } -/************* - * assistant * - *************/ -GtkAssistant .sidebar .highlight { - color: @fg_color; - font: bold; +assistant .sidebar .highlight { + color: @fg_color; + font-weight: bold; } -GtkAssistant .sidebar { - background-color: shade (@bg_color, 0.97); - border-right-color: shade (@bg_color, 0.8); - border-radius: 0; - border-style: solid; - border-width: 0 1px 0 0; - padding: 12px; - - color: mix (@fg_color, @bg_color, 0.40); - text-shadow: 0 1px shade (@bg_color, 1.04); +assistant .sidebar { + background-color: shade (@bg_color, 0.97); + border-right-color: shade (@bg_color, 0.8); + border-radius: 0; + border-style: solid; + border-width: 0 1px 0 0; + padding: 12px; - box-shadow: inset -1px 0 shade (@bg_color, 0.94); + color: mix (@fg_color, @bg_color, 0.40); + text-shadow: 0 1px shade (@bg_color, 1.04); + box-shadow: inset -1px 0 shade (@bg_color, 0.94); } /********** * button * **********/ -.button { +button { padding: 5px 6px; background-image: -gtk-gradient (linear, left top, left bottom, @@ -104,201 +60,284 @@ GtkAssistant .sidebar { border-image-repeat: stretch; } -.button.flat { +button.flat { background-image: none; border-image-source: none; + border-color: transparent; } -.button:backdrop { +button:backdrop { background-image: none; background-color: @bg_color; - border-image-source: url("assets/backdrop-button.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button.png"), + url("assets/backdrop-button@2.png")); color: @backdrop_fg_color; text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2); } -.button.flat:backdrop { +button.flat:backdrop { border-image-source: none; } -.button:focus { - border-image-source: url("assets/button-focused.png"); +button:focus { + border-image-source: -gtk-scaled(url("assets/button-focused.png"), + url("assets/button-focused.png@2")); } -.button:hover { +button:hover { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@button_bg_color, 1.12)), color-stop (0.5, @button_bg_color), to (shade (@button_bg_color, 0.96))); - border-image-source: url("assets/button-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-hover.png"), + url("assets/button-hover@2.png")); } -.button:hover:backdrop { +button:hover:backdrop { background-color: shade (@bg_color, 1.04); - border-image-source: url("assets/backdrop-button-hover.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-hover.png"), + url("assets/backdrop-button-hover@2.png")); } -.button:hover:focus { - border-image-source: url("assets/button-focused-hover.png"); +button:hover:focus { + border-image-source: -gtk-scaled(url("assets/button-focused-hover.png"), + url("assets/button-focused-hover@2.png")); } -.button:insensitive { + +button:disabled { background-image: none; background-color: mix (#ebebeb, @bg_color, 0.5); text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.4); - border-image-source: url("assets/button-disabled.png"); + border-image-source: -gtk-scaled(url("assets/button-disabled.png"), + url("assets/button-disabled@2.png")); } -.button:insensitive:backdrop { +button:disabled:backdrop { background-color: #ebebeb; text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2); - border-image-source: url("assets/backdrop-button-disabled.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-disabled.png"), + url("assets/backdrop-button-disabled@2.png")); } -.button.flat:insensitive, -.button.flat:insensitive:backdrop { +button.flat:disabled, +button.flat:disabled:backdrop { background-color: transparent; border-image-source: none; } -.button:checked { +button:checked { background-image: -gtk-gradient (linear, left top, left bottom, from (#cecece), to (#e8e8e8)); - border-image-source: url("assets/button-active.png"); + border-image-source: -gtk-scaled(url("assets/button-active.png"), + url("assets/button-active@2.png")); } -.button:checked:focus { - border-image-source: url("assets/button-active-focused.png"); +button:checked:focus { + border-image-source: -gtk-scaled(url("assets/button-active-focused.png"), + url("assets/button-active-focused@2.png")); } -.button:active { +button:active { background-image: -gtk-gradient (linear, left top, left bottom, from (#dcdcdc), to (#f3f3f3)); - border-image-source: url("assets/button-active-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-active-hover.png"), + url("assets/button-active-hover@2.png")); } -.button:active:focus { - border-image-source: url("assets/button-active-focused-hover.png"); +button:active:focus { + border-image-source: -gtk-scaled(url("assets/button-active-focused-hover.png"), + url("assets/button-active-focused-hover@2.png")); } -.button:active:insensitive { +button:checked:disabled, +button:active:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (#e3e3e3), to (#f3f3f3)); - border-image-source: url("assets/button-active-disabled.png"); + border-image-source: -gtk-scaled(url("assets/button-active-disabled.png"), + url("assets/button-active-disabled@2.png")); } -.button:checked:backdrop { - border-image-source: url("assets/backdrop-button-active.png"); +button:checked:backdrop { + border-image-source: -gtk-scaled(url("assets/backdrop-button-active.png"), + url("assets/backdrop-button-active@2.png")); } -.button:active:backdrop { - border-image-source: url("assets/backdrop-button-active-hover.png"); +button:active:backdrop { + border-image-source: -gtk-scaled(url("assets/backdrop-button-active-hover.png"), + url("assets/backdrop-button-active-hover@2.png")); } -.button:checked:insensitive:backdrop { +button:checked:disabled:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (mix (#e3e3e3, @bg_color, 0.5)), to (mix (#f3f3f3, @bg_color, 0.5))); - border-image-source: url("assets/backdrop-button-active-disabled.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-active-disabled.png"), + url("assets/backdrop-button-active-disabled@2.png")); } -.button.default { +/* +button.default { border-image-source: url("assets/button-default.png"); } -.button.default:hover { +button.default:hover { border-image-source: url("assets/button-default-hover.png"); } -.button.default:focus { +button.default:focus { border-image-source: url("assets/button-default-focused.png"); } -.button.default:focus:hover { +button.default:focus:hover { border-image-source: url("assets/button-default-focused-hover.png"); } +*/ + +button.destructive-action { + background-image: linear-gradient(to bottom, #e03d3d, #ef2929); + border-color: #8e0b0b; + border-image: none; + color: white; + -gtk-icon-shadow: 0 1px shade(#9d4242, 1.15); + outline-color: rgba(255, 255, 255, 0.3); + text-shadow: 0 1px shade(#9d4242, 1.15); +} /****************** * Linked Widgets * *****************/ -.linked > .entry, -.linked > .button, -.linked > GtkComboBox > .button { +.linked entry, +.linked button, +.linked combobox box.linked button, +combobox entry + box.linked button { border-radius: 0; border-image-width: 10px 0 10px 0; border-width: 1px 0 1px 0; box-shadow: inset -1px 0 shade (@bg_color, 0.84); } -.linked > .entry:first-child, -.linked > .button:first-child, -.linked > GtkComboBox:first-child > .button { +.linked entry:first-child, +.linked button:first-child, +.linked combobox:first-child box.linked button, +combobox:first-child entry + box.linked button { border-image-width: 10px 0 10px 12px; border-radius: 8px 0 0 8px; } -.linked > .entry:last-child, -.linked > .button:last-child, -.linked > GtkComboBox:last-child > .button { +.linked entry:last-child, +.linked button:last-child, +.linked combobox:last-child box.linked button, +combobox:last-child entry + box.linked button { border-image-width: 10px 12px 10px 0; border-radius: 0 8px 8px 0; box-shadow: none; } -.linked > .entry:only-child, -.linked > .button:only-child, -.linked > GtkComboBox:only-child > .button { +.linked entry:only-child, +.linked button:only-child, +.linked combobox:only-child box.linked button, +combobox:only-child entry + box.linked button { border-image-width: 10px 12px 10px 12px; border-radius: 8px; } -.primary-toolbar .linked .button, -.header-bar .linked .button { +.primary-toolbar .linked button, +headerbar .linked button { box-shadow: inset 1px 0 shade (@dark_bg_color, 1.4), inset -1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:first-child, -.header-bar .linked .button:first-child { +.primary-toolbar .linked button:first-child, +headerbar .linked button:first-child { box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:last-child, -.header-bar .linked .button:last-child { +.primary-toolbar .linked button:last-child, +headerbar .linked button:last-child { box-shadow: inset 1px 0 shade (@dark_bg_color, 1.4) } -.primary-toolbar .linked .button:active, -.header-bar .linked .button:active, -.primary-toolbar .linked .button:insensitive, -.header-bar .linked .button:insensitive { +.primary-toolbar .linked button:active, +headerbar .linked button:active, +.primary-toolbar .linked button:disabled, +headerbar .linked button:disabled { box-shadow: inset 1px 0 shade (@dark_bg_color, 0.9); } -.primary-toolbar .linked .button:only-child, -.header-bar .linked .button:only-child { +.primary-toolbar .linked button:only-child, +headerbar .linked button:only-child { box-shadow: none; } -/* Make linked dialog buttons look like they are not linked */ -.message-dialog .linked.dialog-action-area .button { - border-image-width: 12px; - box-shadow: none; - border-radius: 7px; +*:link, +*:visited { + color: @link_color; +} + +button separator { + color: shade(@bg_color, 1.30); +} + +/* actionbar */ +actionbar > revealer > box { + padding: 6px; + border-top: 1px solid @borders; +} + +actionbar > revealer > box:backdrop { + border-color: shade(@borders, 0.8); +} + +/************** + * ComboBoxes * + **************/ + +combobox { + padding: 0; + text-shadow: 0 1px @button_text_shadow; +} + +combobox:disabled { + text-shadow: none; + color: @insensitive_fg_color; +} + +arrow { + min-height: 16px; + min-width: 16px; + color: black; +} + +combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +combobox arrow:disabled, +combobox arrow:backdrop { + color: @insensitive_fg_color; +} + +/* calendar */ +calendar { + background-color: white; + border: 1px solid @borders; } /**************** * cell and row * ****************/ -.cell { - -GtkCheckButton-indicator-size: 16; +.cell checkbutton check { + margin: 3px; +} +.cell { background-color: @base_color; border-radius: 0; border-width: 0; @@ -311,8 +350,6 @@ row:selected { border-top-color: shade (@selected_bg_color, 0.88); border-style: solid; border-width: 1px 0 0 0; - - color: @selected_fg_color; } row:selected:backdrop { @@ -320,7 +357,6 @@ row:selected:backdrop { from (shade (@backdrop_selected_bg_color, 1.06)), to (shade (@backdrop_selected_bg_color, 0.94))); border-top-color: shade (@backdrop_selected_bg_color, 0.9); - color: @backdrop_selected_fg_color; } @@ -328,38 +364,50 @@ row:selected:backdrop { * check and radio * *******************/ +check, radio { + min-height: 14px; + min-width: 14px; + margin: 0 4px; +} + /* Draw a focus ring around the contained label ... */ -GtkCheckButton.text-button GtkLabel { +checkbutton.text-button label { border: 1px solid transparent; border-radius: 5px; } -GtkCheckButton.text-button:focus GtkLabel { +checkbutton.text-button:focus label { border-color: @focus_color; background-color: @focus_bg_color; } +checkbutton check, radiobutton radio { + margin-left: 4px; + margin-right: 4px; +} + /* ... unless it's a proper button, which already has a focus-colored border */ -.button.text-button:focus GtkLabel { +button.text-button:focus label { border: none; background: none; } -.menu .radio * { +menu radio * { box-shadow: none; } -/***************** - * column-header * - *****************/ -column-header .button, -column-header .button:active { +/******************* + * treeview header * + *******************/ + +treeview.view header button, +treeview.view header button:active { border-radius: 0; border-width: 0 1px 1px 0; border-image: none; } -column-header .button { +treeview.view header button { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 1.06)), to (shade (@bg_color, 1.04))); @@ -372,7 +420,7 @@ column-header .button { text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.4); } -column-header .button:backdrop { +treeview.view header button:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 1.04)), to (shade (@bg_color, 1.02))); @@ -383,7 +431,7 @@ column-header .button:backdrop { inset 0 -1px shade (@bg_color, 1.03); } -column-header .button:hover { +treeview.view header button:hover { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 1.13)), to (shade (@bg_color, 1.08))); @@ -392,7 +440,7 @@ column-header .button:hover { to (shade (@bg_color, 0.9))) 1; } -column-header .button:hover:backdrop { +treeview.view header button:hover:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 1.1)), to (shade (@bg_color, 1.06))); @@ -401,8 +449,7 @@ column-header .button:hover:backdrop { to (shade (@bg_color, 0.9))) 1; } - -column-header:nth-child(last) .button { +treeview.view header button:last-child { border-width: 0 0 1px 0; } @@ -413,10 +460,12 @@ column-header:nth-child(last) .button { background-color: shade (@bg_color, 1.01); } -.content-view.view:prelight { +.content-view.view:hover { background-color: shade (@bg_color, 1.03); } +.view.cell:selected, +.view.cell:active, .view:selected, .view:active, .content-view.view:selected, @@ -424,7 +473,7 @@ column-header:nth-child(last) .button { background-color: @selected_bg_color; } -.content-view.view:insensitive { +.content-view.view:disabled { background-color: @bg_color; } @@ -436,58 +485,80 @@ column-header:nth-child(last) .button { background-color: @backdrop_selected_bg_color; } -GdMainIconView.content-view { - -GdMainIconView-icon-size: 40; +:not(iconview).view.cell:disabled, +.content-view.view:disabled { + background-color: @bg_color; +} + +:not(iconview).view.cell:backdrop, +.content-view.view:backdrop { + background-color: @bg_color; +} + +:not(iconview).view.cell:selected:backdrop, +.content-view.view:selected:backdrop { + background-color: @backdrop_selected_bg_color; } /********* * entry * *********/ -.entry { +entry { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@base_color, 0.96)), to (@base_color)); padding: 5px 7px; color: @text_color; + + text-shadow: none; } -.entry.flat, .entry.flat:focus { +entry.flat, entry.flat:focus { padding: 2px; } -.entry:backdrop { +entry:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (mix (shade (@base_color, 0.96), @bg_color, 0.5)), to (mix (@base_color, @bg_color, 0.5))); color: @backdrop_text_color; } -.entry:selected, -.entry:selected:focused { +entry:selected, +entry:selected:focus { background-color: @selected_bg_color; - color: @selected_fg_color; } -.entry:insensitive { +entry:disabled { background-color: #f5f5f5; background-image: none; color: mix (@text_color, @base_color, 0.4); } -.entry:insensitive:backdrop { +entry.read-only { + background-color: #f5f5f5; + background-image: none; +} + +entry:disabled:backdrop { background-color: mix (#f5f5f5, @bg_color, 0.5); color: mix (@text_color, @base_color, 0.4); } -.primary-toolbar .entry.progressbar, -.primary-toolbar .entry.progressbar, -.header-bar .entry.progressbar, -.header-bar .entry.progressbar, -.entry.progressbar { +entry > image.left { + padding-right: 5px; +} + +entry > image.right { + padding-left: 5px; +} + +.primary-toolbar entry progress, +headerbar entry progress { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@selected_bg_color, 0.8)), color-stop (0.1, shade (@selected_bg_color, 0.9)), @@ -509,10 +580,32 @@ GdMainIconView.content-view { /************ * expander * ************/ -.expander { + +expander { color: @fg_color; } +expander arrow { + min-width: 16px; + min-height: 16px; + margin-right: 5px; + -gtk-icon-style: regular; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +expander arrow:dir(rtl) { + margin-left: 5px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +expander arrow:hover { + color: shade(@fg_color, 0.5); +} + +expander arrow:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + /********* * frame * *********/ @@ -525,30 +618,45 @@ GdMainIconView.content-view { background: none; } -.frame.flat { +notebook.frame { border: none; } -/**************** - * window-frame * - ****************/ +/* XXX: this is a copy of the above; adding notebook.frame stack there didn't + * work */ +frame border, notebook.frame > stack { + border-radius: 3px; + border-width: 1px; + border-style: solid; + border-color: shade (@bg_color, 0.82); + border-image: none; + background: none; +} + +.frame.flat, frame border.flat { + border: none; +} -.window-frame.csd.popup { +scrolledwindow > viewport.frame, +frame > box > stack > scrolledwindow { border-style: none; - border-radius: 0; - box-shadow: 0 3px 8px @shadow_color; +} + +frame > box.vertical > scrolledwindow.frame { + border-width: 1px 0px 1px 0px; } /************ * iconview * ************/ + .view { background-color: @base_color; color: @text_color; } -GtkIconView.view.cell:selected, -GtkIconView.view.cell:selected:focused { +iconview.view.cell:selected, +iconview.view.cell:selected:focus { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@selected_bg_color, 1.0)), to (shade (@selected_bg_color, 0.9))); @@ -558,15 +666,14 @@ GtkIconView.view.cell:selected:focused { border-color: shade (@selected_bg_color, 0.8); border-bottom-color: shade (@selected_bg_color, 0.7); - color: @selected_fg_color; - - box-shadow: inset 1px 0 shade (@selected_bg_color, 1.05), - inset -1px 0 shade (@selected_bg_color, 1.05), + box-shadow: inset 1px 0 shade (@selected_bg_color, 1), + inset -1px 0 shade (@selected_bg_color, 1), inset 0 1px shade (@selected_bg_color, 1.08), inset 0 -1px shade (@selected_bg_color, 1.0); } -.rubberband { +.rubberband, +rubberband { background-color: alpha (@selected_bg_color, 0.35); border-color: @selected_bg_color; border-radius: 0; @@ -574,7 +681,7 @@ GtkIconView.view.cell:selected:focused { border-width: 1px; } -GtkIconView.cell { +iconview.cell { background-color: transparent; } @@ -656,12 +763,10 @@ GtkIconView.cell { /******** * menu * ********/ -GtkTreeMenu.menu, -.toolbar .header-bar .menu, -GtkMenuToolButton.menu, -.primary-toolbar .button .menu, -.header-bar .button .menu, -.menu { +toolbar headerbar menu, +.primary-toolbar button menu, +headerbar button menu, +menu { background-image: none; background-color: shade (@dark_bg_color, 1.08); border-bottom-color: shade (@dark_bg_color, 0.96); @@ -682,13 +787,17 @@ GtkMenuToolButton.menu, margin: 1px; } -.toolbar .menu, -GtkComboBox .menu { +menu arrow { + color: @dark_fg_color; +} + +toolbar menu, +combobox menu { background-image: none; background-color: @bg_color; border-bottom-color: shade (@bg_color, 0.66); - border-left-color: shade (@bg_color, 0.7); border-right-color: shade (@bg_color, 0.7); + border-left-color: shade (@bg_color, 0.7); border-top-color: shade (@bg_color, 0.8); border-style: solid; padding: 0; @@ -700,15 +809,15 @@ GtkComboBox .menu { inset 0 1px shade (@bg_color, 1.18); } -.menu:selected { +menu:selected { background-color: @selected_bg_color; } -.menu.button:hover, -.menu.button:checked, -.menu.button:checked:insensitive, -.menu.button:insensitive, -.menu.button +menu button:hover, +menu button:checked, +menu button:checked:disabled, +menu button:disabled, +menu button { background-color: shade (@dark_bg_color, 1.08); background-image: none; @@ -718,12 +827,19 @@ GtkComboBox .menu { } .context-menu { - font: regular medium; + font-size: medium; + font-weight: normal; +} + +.background.popup.csd { + /* Delete menus background, we don't need border-radious here */ + background-color: transparent; } /*********** * menubar * ***********/ +menubar, .menubar { -GtkWidget-window-dragging: true; @@ -733,16 +849,16 @@ GtkComboBox .menu { color: @dark_fg_color; text-shadow: 0 -1px shade (@dark_bg_color, 0.6); + min-height: 24px; } +menubar:backdrop, .menubar:backdrop { color: @backdrop_dark_fg_color; text-shadow: 0 -1px shade (@dark_bg_color, 0.8); } -/*************** - * menubaritem * - ***************/ +menubar menuitem:hover, .menubar.menuitem:hover, .menubar .menuitem:hover { background-color: transparent; @@ -760,8 +876,8 @@ GtkComboBox .menu { /************ * menuitem * ************/ -.menuitem { - -GtkMenuItem-horizontal-padding: 0; +menuitem { + padding: 0px; background: transparent; border-radius: 0; padding: 3px 5px 3px 5px; @@ -770,17 +886,19 @@ GtkComboBox .menu { } /* Workaround for lp:949368 */ -GtkComboBox .menuitem * { +combobox menuitem * { color: @fg_color; } -GtkComboBox .menuitem *:hover { +combobox menuitem *:hover { color: @selected_fg_color; } -.popover .menuitem:checked:hover, -.menuitem:hover, -.menu .menuitem:hover { + +popover modelbutton:hover, +popover menuitem:checked:hover, +menuitem:hover, +menu menuitem:hover { border-radius: 0; background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@selected_bg_color, 1.1)), @@ -798,64 +916,62 @@ GtkComboBox .menuitem *:hover { text-shadow: 0 -1px shade (@selected_bg_color, 0.7); } -.menuitem.check:checked, -.menuitem.radio:checked { +menuitem check:checked, +menuitem radio:checked { color: @fg_color; } -.menu .menuitem.check:hover, -.menu .menuitem.radio:hover { +menu menuitem check:hover, +menu menuitem radio:hover { box-shadow: none; } -GtkTreeMenu.menu .menuitem:insensitive, -GtkTreeMenu.menu .menuitem *:insensitive, -.toolbar .header-bar .menu .menuitem:insensitive, -.toolbar .header-bar .menu .menuitem *:insensitive, -GtkMenuToolButton.menu .menuitem:insensitive, -GtkMenuToolButton.menu .menuitem *:insensitive, -.primary-toolbar .button .menu .menuitem:insensitive, -.primary-toolbar .button .menu .menuitem *:insensitive, -.header-bar .button .menu .menuitem:insensitive, -.header-bar .button .menu .menuitem *:insensitive, -.menuitem:insensitive, -.menuitem *:insensitive { +toolbar headerbar menu menuitem:disabled, +toolbar headerbar menu menuitem *:disabled, +toolbutton menu menuitem:disabled, +toolbutton menu menuitem *:disabled, +.primary-toolbar button menu menuitem:disabled, +.primary-toolbar button menu menuitem *:disabled, +headerbar button menu menuitem:disabled, +headerbar button menu menuitem *:disabled, +menuitem:disabled, +menuitem *:disabled { color: mix (@dark_fg_color, @dark_bg_color, 0.5); text-shadow: 0 -1px shade (@dark_bg_color, 0.6); } -.toolbar .menu .menuitem:insensitive, -.toolbar .menu .menuitem *:insensitive, -GtkComboBox .menu .menuitem:insensitive, -GtkComboBox .menu .menuitem *:insensitive { +toolbar menu menuitem:disabled, +toolbar menu menuitem *:disabled, +combobox menu menuitem:disabled, +combobox menu menuitem *:disabled { color: mix (@fg_color, @bg_color, 0.5); text-shadow: 0 1px shade (@bg_color, 1.14); } -.menuitem GtkCalendar, -.menuitem GtkCalendar.button, -.menuitem GtkCalendar.header, -.menuitem GtkCalendar.view { +menuitem calendar, +menuitem calendar .button, +menuitem calendar .header, +menuitem calendar .view { background-color: @dark_bg_color; background-image: none; border-radius: 0; border-style: solid; border-width: 0; - padding: 0; + padding: 1px; color: @dark_fg_color; } -.menuitem GtkCalendar { +menuitem calendar { background-color: shade (@dark_bg_color, 1.3); background-image: none; } -.menuitem GtkCalendar:inconsistent { +menuitem calendar:indeterminate { color: shade (@bg_color, 0.6); } -.menuitem .entry { +menuitem entry { background-color: shade (@dark_bg_color, 1.3); background-image: none; @@ -867,11 +983,11 @@ GtkComboBox .menu .menuitem *:insensitive { border-image-width: 1px; } -.primary-toolbar GtkScale.trough, -.primary-toolbar GtkScale.trough:backdrop, -.header-bar GtkScale.trough, -.header-bar GtkScale.trough:backdrop, -.menuitem GtkScale.trough { +.primary-toolbar scale trough, +.primary-toolbar scale trough:backdrop, +headerbar scale trough, +headerbar scale trough:backdrop, +menuitem scale trough { background-color: @dark_bg_color; background-image: none; border-image: -gtk-gradient (linear, left top, left bottom, @@ -880,172 +996,257 @@ GtkComboBox .menu .menuitem *:insensitive { border-image-width: 1px; } -.menuitem .accelerator { +menuitem accelerator { color: alpha (@dark_fg_color, 0.5); } -.menuitem .accelerator:hover { +menuitem accelerator:hover { color: alpha (@selected_fg_color, 0.8); } -.menuitem .accelerator:insensitive { +menuitem accelerator:disabled { color: alpha (mix (@dark_fg_color, @dark_bg_color, 0.5), 0.5); text-shadow: 0 -1px shade (@dark_bg_color, 0.7); } -.menuitem > GtkBox > GtkImage + GtkLabel { +menuitem > box > image + label { padding-left: 6px; } /************ * notebook * ************/ -.notebook tab.top { padding: 4px 6px 2px 6px; } -.notebook tab.top:active { padding-bottom: 3px; } -.notebook tab.bottom { padding: 2px 6px 4px 6px; } -.notebook tab.bottom:active { padding-top: 3px; } -.notebook tab.left { padding: 2px 4px 2px 6px; } -.notebook tab.left:active { padding-right: 5px; } -.notebook tab.right { padding: 2px 6px 2px 4px; } -.notebook tab.right:active { padding-left: 5px; } - -/* give active tab a background, as it might be dragged across of others when reordering */ -.notebook tab:active { - background-color: @bg_color; -} - -.notebook.header { +notebook header.top tab { padding: 4px 6px 2px 6px; } +notebook header.top tab:checked { padding-bottom: 3px; } +notebook header.bottom tab { padding: 2px 6px 4px 6px; } +notebook header.bottom tab:checked { padding-top: 3px; } +notebook header.left tab { padding: 2px 4px 2px 6px; } +notebook header.left tab:checked { padding-right: 5px; } +notebook header.right tab { padding: 2px 6px 2px 4px; } +notebook header.right tab:checked { padding-left: 5px; } + +notebook header { border-width: 0; /* set below depending on position of tab bar */ border-color: shade (@bg_color, 0.82); border-style: solid; } /* Draw a border between tabs and content ... */ -.notebook.header.top { border-bottom-width: 1px; } -.notebook.header.right { border-left-width: 1px; } -.notebook.header.left { border-right-width: 1px; } -.notebook.header.bottom { border-top-width: 1px; } - -/* ... unless the content is in a frame (thus having a border itself */ -.notebook.header.frame.top { border: none; } -.notebook.header.frame.right { border: none; } -.notebook.header.frame.right { border: none; } -.notebook.header.frame.bottom { border: none; } - -.notebook tab.top { +notebook:not(.frame) header.top { border-bottom-width: 1px; } +notebook:not(.frame) header.right { border-left-width: 1px; } +notebook:not(.frame) header.left { border-right-width: 1px; } +notebook:not(.frame) header.bottom { border-top-width: 1px; } + +notebook.frame header.top { border-bottom: 1px solid @bg_color; } + +notebook header.top tab { border-image: -gtk-gradient (linear, left top, left bottom, from (alpha (shade (@bg_color, 0.9), 0.0)), to (shade (@bg_color, 0.9))) 1; border-image-width: 0 1px; } -.notebook tab.right { +notebook header.top tab:checked, +notebook header.top tab:checked:hover { + background-image: linear-gradient(to bottom, + shade(@bg_color, 1.075), + shade(@bg_color, 1)); + border-radius: 4px 4px 0px 0px; + border-width: 0px 1px 0px 1px; + border-style: solid; + border-color: @borders; +} + +notebook header.right tab { border-image: -gtk-gradient (linear, right top, left top, from (alpha (shade (@bg_color, 0.9), 0.0)), to (shade (@bg_color, 0.9))) 1; border-image-width: 1px 0; } -.notebook tab.left { +notebook header.right tab:checked, +notebook header.right tab:checked:hover { + background-image: linear-gradient(to left, + shade(@bg_color, 1.075), + shade(@bg_color, 1)); + border-radius: 0px 4px 4px 0px; + border-width: 1px 0px 1px 0px; + border-color: shade(@bg_color, 0.95); +} + +notebook header.left tab { border-image: -gtk-gradient (linear, left top, right top, from (alpha (shade (@bg_color, 0.9), 0.0)), to (shade (@bg_color, 0.9))) 1; border-image-width: 1px 0; } -.notebook tab.bottom { +notebook header.left tab:checked, +notebook header.left tab:checked:hover { + background-image: linear-gradient(to right, + shade(@bg_color, 1.075), + shade(@bg_color, 1)); + border-radius: 4px 0px 0px 4px; + border-width: 1px 0px 1px 0px; + border-color: shade(@bg_color, 0.95); +} + +notebook header.bottom tab { border-image: -gtk-gradient (linear, left bottom, left top, from (alpha (shade (@bg_color, 0.9), 0.0)), to (shade (@bg_color, 0.9))) 1; border-image-width: 0 1px; } +notebook header.bottom tab:checked, +notebook header.bottom tab:checked:hover { + background-image: linear-gradient(to top, + shade(@bg_color, 1.075), + shade(@bg_color, 1)); + border-radius: 0 0 4px 4px; + border-width: 0px 1px 0px 1px; + border-style: solid; + border-color: shade(@bg_color, 0.95); +} + /* Draw a focus ring around labels in tabs */ -.notebook tab GtkLabel { +notebook tab label { border: 1px solid transparent; border-radius: 5px; } -.notebook:focus tab GtkLabel.active-page { +notebook:focus tab:checked label { border-color: @focus_color; background-color: @focus_bg_color; } -.notebook GtkDrawingArea { +notebook GtkDrawingArea { background-color: shade (@bg_color, 1.02); } /****************** * pane separator * ******************/ -.sidebar .pane-separator, -.pane-separator { + +paned separator { background-color: transparent; border-color: shade (@bg_color, 0.84); } +/************ + * Pathbars * + ************/ +.path-bar button.text-button, +.path-bar button.image-button, +.path-bar button { + padding-left: 4px; + padding-right: 4px; +} + +.path-bar button.text-button.image-button label { + padding-left: 0; + padding-right: 0; +} + +.path-bar button.text-button.image-button label:last-child, +.path-bar button label:last-child { + padding-right: 8px; +} + +.path-bar button.text-button.image-button label:first-child, +.path-bar button label:first-child { + padding-left: 8px; +} + +.path-bar button image { + padding-left: 4px; + padding-right: 4px; +} + +.path-bar button.slider-button { + padding-left: 0; + padding-right: 0; +} + + /************************* * progressbar and scale * *************************/ -GtkScale, -GtkProgressBar { +.progressbar, +scale, +progressbar { border-radius: 8px; border-width: 0px; - padding: 1px; -} - -.scale.trough { - margin: 7px 0 6px 0; -} - -.scale.trough.vertical { - margin: 0 7px 0 6px; + padding: 3px; } -.menubar .menuitem .scale.highlight.left, -.scale.highlight.left, +menubar menuitem scale highlight.left, +scale highlight.left, +progressbar trough progress, +row progressbar, +row:hover progressbar, +row:selected progressbar, +row:selected:focus progressbar, +row:nth-child(odd) progressbar, .progressbar, .progressbar row, .progressbar row:hover, .progressbar row:selected, -.progressbar row:selected:focused { - border-radius: 8px; - border-width: 0px; - background-image: none; - background-color: #db6a3c; +.progressbar row:selected:focus, +.progressbar row:nth-child(odd), +entry progress { + border-radius: 5px; border-style: solid; + border-width: 1px; + background-image: linear-gradient(to bottom, + @progressbar_fill_a, + @progressbar_fill_b); + border-top-color: shade(@button_border_active, 0.80); + border-left-color: shade(@button_border_active, 0.85); + border-right-color: shade(@button_border_active, 0.85); + border-bottom-color: shade(@button_border_active, 0.80); + color: @theme_fg_color; + text-shadow: none; } +row:backdrop progressbar, +row:hover:backdrop progressbar, +row:selected:backdrop progressbar, +row:selected:focus:backdrop progressbar, .progressbar:backdrop, .progressbar row:backdrop, .progressbar row:hover:backdrop, .progressbar row:selected:backdrop, -.progressbar row:selected:focused:backdrop, -.scale.highlight.bottom:backdrop, -.progressbar.vertical:backdrop { - border-radius: 8px; - border-width: 0px; - background-image: none; - background-color: @backdrop_filling_bg; +.progressbar row:selected:focus:backdrop, +.progresbar.vertical:backdrop, +progressbar:backdrop trough progress, +scale highlight.bottom:backdrop, +progressbar.vertical:backdrop trough progress { + background-image: linear-gradient(to bottom, + @progressbar_fill_a, + @progressbar_fill_b); + color: @backdrop_fg_color; + text-shadow: none; } -.scale.highlight.left:insensitive { +scale highlight.left:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 0.95)), to (shade (@bg_color, 0.85))); } -.scale.highlight.bottom:insensitive { +scale highlight.bottom:disabled { background-image: -gtk-gradient (linear, left top, right top, from (shade (@bg_color, 0.95)), to (shade (@bg_color, 0.85))); } .trough, -.trough row, -.trough row:hover, -.trough row:selected, -.trough row:selected:focused { +trough, +trough row, +trough row:hover, +trough row:selected, +trough row:selected:focus { background-image: -gtk-gradient (linear, left top, left bottom, from (#d1d1d1), to (#e8e8e8)); @@ -1055,7 +1256,8 @@ GtkProgressBar { color: @text_color; } -.trough.vertical { +.trough.vertical, +trough.vertical { background-image: -gtk-gradient (linear, left top, right top, from (#d1d1d1), to (#e8e8e8)); @@ -1063,21 +1265,33 @@ GtkProgressBar { /* level bars as used for password quality or remaining power */ -GtkLevelBar { - -GtkLevelBar-min-block-width: 34; - -GtkLevelBar-min-block-height: 3; +levelbar, +levelbar trough { + min-width: 150px; + min-height: 5px; } -GtkLevelBar.vertical { - -GtkLevelBar-min-block-width: 3; - -GtkLevelBar-min-block-height: 34; +levelbar.vertical, +levelbar.vertical trough { + min-width: 5px; + min-height: 150px; } -.level-bar.trough { +levelbar trough { padding: 2px; + border-radius: 2px; + box-shadow: none; } -.level-bar.fill-block { +levelbar.horizontal block { + min-height: 3px; +} + +levelbar.vertical block { + min-width: 3px; +} + +levelbar block.filled { border-width: 1px; border-style: solid; @@ -1085,29 +1299,29 @@ GtkLevelBar.vertical { background-color: #db6a3c; } -.level-bar.indicator-continuous.fill-block { +levelbar.continuous block.filled { padding: 2px; border-radius: 2px; } -.level-bar.fill-block:backdrop, -.level-bar.fill-block.level-high:backdrop, -.level-bar.fill-block.level-low:backdrop { +levelbar block.filled:backdrop, +levelbar block.filled.high:backdrop, +levelbar block.filled.low:backdrop { background-color: @backdrop_filling_bg; border-color: @backdrop_filling_bg; background-image: none; } -.level-bar.indicator-discrete.fill-block.horizontal { +levelbar.horizontal.discrete block.filled { margin: 0 1px; } -.level-bar.indicator-discrete.fill-block.vertical { +levelbar.vertical.discrete block.filled { margin: 1px 0; } -.level-bar.fill-block.level-high { +levelbar block.filled.high { border-color: shade(@success_color, 0.85); background-image: linear-gradient(to bottom, shade(@success_color, 1.2), @@ -1116,7 +1330,7 @@ GtkLevelBar.vertical { ); } -.level-bar.fill-block.level-low { +levelbar block.filled.low { border-color: shade(@warning_bg_color, 0.80); background-image: linear-gradient(to bottom, shade(@warning_bg_color, 1.3), @@ -1125,113 +1339,277 @@ GtkLevelBar.vertical { ); } -.level-bar.fill-block.empty-fill-block { +levelbar block.filled.empty { background-color: transparent; background-image: none; border-color: alpha(@bg_color, 0.1); } -.level-bar.fill-block.empty-fill-block:backdrop { +levelbar block.filled.empty:backdrop { border-color: transparent; background-color: transparent; } -GtkScale { - -GtkRange-slider-width: 18; - -GtkRange-trough-border: 0; - -GtkScale-slider-length: 14; +/************ + * GtkScale * + ************/ + +scale.vertical { + min-width: 13px; } -GtkScale.vertical { - -GtkScale-slider-length: 13; +scale.horizontal { + min-height: 13px; } -.scale.trough.highlight { - background-color: #df784e; - background-image: none; - background-clip: content-box; +scale.horizontal trough { + min-height: 3px; + border-radius: 6px; + } + + +scale trough, +scale.vertical trough { + min-width: 3px; + border-radius: 6px; + background-image: -gtk-gradient (linear, left top, left bottom, + from (#d1d1d1), + to (#e8e8e8)); + border-style: solid; + border-width: 1px; + color: @text_color; } -.scale.trough.highlight:insensitive { - background-color: #b5b5b5; +scale.vertical trough { + margin: 0 6px; +} + +scale trough highlight, +scale.horizontal trough highlight, +scale.vertical trough highlight { + border-color: @scale_highlight_bg; + border-style: solid; + border-width: 0px; background-image: none; + box-shadow: none; + background-color: @scale_highlight_bg; } -.scale.trough.highlight.left { - margin: 7px 0 7px 0; +scale trough:disabled, +scale.horizontal trough:disabled, +scale.vertical trough:disabled { + box-shadow: none; +} + + +scale trough:disabled { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (@bg_color, 0.95)), + to (shade (@bg_color, 0.85))); +} + +scale.vertical trough:disabled { + background-image: -gtk-gradient (linear, left top, right top, + from (shade (@bg_color, 0.95)), + to (shade (@bg_color, 0.85))); } -.scale.trough.highlight:backdrop { - background-color: #dcdcdc; +scale.horizontal trough highlight:disabled, +scale.vertical trough highlight:disabled, +scale.horizontal trough highlight:backdrop, +scale.vertical trough highlight:backdrop { + background-color: @backdrop_filling_bg; + box-shadow: none; background-image: none; } -.scale.trough.highlight.bottom { - margin: 0 7px 0 7px; +/* defines the color of the actuall marks on the scale */ +scale marks indicator { + color: alpha(@fg_color, 0.3); +} + +/* this makes marks visible */ +scale.horizontal indicator, +scale.horizontal.fine-tune indicator { + min-height: 8px; + min-width: 1px; +} + +scale.vertical indicator, +scale.vertical.fine-tune indicator { + min-height: 1px; + min-width: 8px; +} + +scale slider, +scale slider:hover, +scale slider:disabled { + border-radius: 8px; + border-style: none; + background-color: transparent; + /* background-image in -assets variant */ +} + +scale.vertical slider, +scale.horizontal slider { + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +scale.horizontal slider { + min-width: 14px; + margin: -9px 0px -9px 0px; } -GtkScale.mark { - border-color: shade (@bg_color, 0.8); +scale.vertical slider { + min-height: 14px; + margin: 0px -9px 0px -9px; +} + +scale.horizontal.scale-has-marks-above.color, +scale.vertical.scale-has-marks-below.color { + margin: 0px 0px 0px 0px; + padding: 0px; +} + +scale.scale-has-marks-above.color trough, +scale.scale-has-marks-below.color trough { + border-color: @scale_highlight_border; + border-radius: 3px; + background-repeat: no-repeat; +} + +scale.vertical.scale-has-marks-below.color slider { + min-height: 20px; + min-width: 22px; + padding: 0px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + margin: 0px 0px 0px 0px; +} + +scale.horizontal contents:first-child:not(:only-child) slider { + min-height: 22px; +} + +scale.horizontal.scale-has-marks-above.color slider { + min-height: 14px; + min-width: 20px; + margin: 0px 0px 0px 0px; + padding: 5px 0px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +scale.horizontal.scale-has-marks-above.color slider:hover, +scale.vertical.scale-has-marks-below.color slider:hover { + background-size: 105%; +} + +scale.horizontal.scale-has-marks-above.color.fine-tune slider, +scale.vertical.scale-has-marks-below.color.fine-tune slider, +scale.vertical.fine-tune slider:active, +scale.vertical.fine-tune slider:active:hover, +scale.horizontal.fine-tune slider:active, +scale.horizontal.fine-tune slider:hover:active { + background-size: 80%; } /************* * scrollbar * *************/ -.scrollbar { + +.scrollbar, +scrollbar { -GtkScrollbar-has-backward-stepper: 0; -GtkScrollbar-has-forward-stepper: 0; - -GtkScrollbar-trough-border: 0; - -GtkScrollbar-min-slider-length: 31; - -GtkRange-slider-width: 10; +} +scrollbar slider { background-color: @scrollbar_track_color; +} + +.scrollbar.vertical slider, +scrollbar.vertical slider { + min-height: 15px; + min-width: 5px; +} + +.scrollbar.horizontal.slider, +scrollbar.horizontal slider { + min-width: 15px; + min-height: 5px; +} + +.scrollbar.vertical.slider:hover, +scrollbar.vertical:hover slider { + min-width: 10px; +} + +.scrollbar.horizontal.slider:hover, +scrollbar.horizontal:hover slider { + min-height: 10px; +} + +.scrollbar.contents, +scrollbar contents { + background-color: transparent; background-image: none; background-size: 0; border: none; border-radius: 0; } -.scrollbar.overlay-indicator { - background-color: transparent; -} - -.scrollbar:hover, -.scrollbar.dragging { - background-color: @scrollbar_track_color; +.scrollbar.trough, +scrollbar trough { + background-image: none; + border: none; } .scrollbar:hover:backdrop, -.scrollbar.dragging:backdrop { +.scrollbar.dragging:backdrop, +scrollbar:hover:backdrop, +scrollbar.dragging:backdrop { background-color: @backdrop_selected_bg_color; } -/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin - * this allows to keep the slider smaller, but keeping few threshold pixels +/* Adding margins, so actual visible size is: width - margin this allows to + * keep the slider smaller, but keeping few threshold pixels */ .scrollbar.vertical:hover:dir(ltr), -.scrollbar.vertical.dragging:dir(ltr) { +.scrollbar.vertical:active:dir(ltr), +scrollbar.vertical:hover:dir(ltr), +scrollbar.vertical:active:dir(ltr) { margin-left: 2px; } .scrollbar.vertical:hover:dir(rtl), -.scrollbar.vertical.dragging:dir(rtl) { +.scrollbar.vertical:active:dir(rtl), +scrollbar.vertical:hover:dir(rtl), +scrollbar.vertical:active:dir(rtl) { margin-right: 2px; } .scrollbar.horizontal:hover, -.scrollbar.horizontal.dragging, -.scrollbar.horizontal.slider:hover, -.scrollbar.horizontal.slider.dragging { +.scrollbar.horizontal:active, +scrollbar.horizontal:hover, +scrollbar.horizontal:active { margin-top: 2px; } -.scrollbar.slider { +.scrollbar.slider, +scrollbar slider { background-color: alpha(@selected_bg_color, 0.8); border-radius: 1px; } -.scrollbar.slider.hovering, -.scrollbar.slider.dragging { +.scrollbar.slider:hover, +.scrollbar.slider:active, +scrollbar slider:hover, +scrollbar slider:active { border-radius: 2px; margin: 0; } @@ -1239,35 +1617,43 @@ GtkScale.mark { /* Adding margins, so actual visible size is: -GtkRange-slider-width - margin * this allows to define some kind of proximity effect also on mouse-enter */ -.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) { +.scrollbar.vertical:dir(ltr):not(:hover):not(.dragging), +scrollbar.vertical:dir(ltr):not(:hover):not(.dragging) { margin-left: 7px; } -.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) { +.scrollbar.vertical:dir(rtl):not(:hover):not(.dragging), +scrollbar.vertical:dir(rtl):not(:hover):not(.dragging) { margin-right: 7px; } -.scrollbar.slider.horizontal:not(:hover):not(.dragging) { +.scrollbar.horizontal:not(:hover):not(.dragging), +scrollbar.horizontal:not(:hover):not(.dragging) { margin-top: 7px; } -.scrollbar.slider:hover { +.scrollbar.slider:hover, +scrollbar slider:hover { background-color: alpha(@selected_bg_color, 0.85); } -.scrollbar.slider:active { +.scrollbar.slider:active, +scrollbar slider:active { background-color: @selected_bg_color; } -.scrollbar.slider:backdrop { +.scrollbar.slider:backdrop, +scrollbar slider:backdrop { background-color: alpha(@backdrop_filling_bg, 0.8); } -.scrollbar.slider:hover:backdrop { +.scrollbar.slider:hover:backdrop, +scrollbar slider:hover:backdrop { background-color: alpha(@backdrop_filling_bg, 0.85); } -.scrollbar.slider:active:backdrop { +.scrollbar.slider:active:backdrop, +scrollbar slider:active:backdrop { background-color: @backdrop_filling_bg; } @@ -1275,11 +1661,12 @@ GtkScale.mark { * scrolled window * *******************/ .ubuntu-online-accounts.frame, -GtkScrolledWindow.frame { +scrolledwindow.frame { border-top-color: shade (@bg_color, 0.84); border-right-color: shade (@bg_color, 0.76); border-bottom-color: shade (@bg_color, 0.86); border-left-color: shade (@bg_color, 0.76); + border-width: 1px; border-radius: 0; border-style: solid; } @@ -1291,8 +1678,11 @@ GtkScrolledWindow.frame { /************* * separator * *************/ -.separator { - border-width: 1px; +separator { + min-width: 1px; + min-height: 1px; + border-top-width: 1px; + border-left-width: 1px; border-style: solid; border-image: none; border-color: shade (@bg_color, 0.92); @@ -1300,60 +1690,49 @@ GtkScrolledWindow.frame { border-right-color: alpha (shade (@bg_color, 1.26), 0.6); } -GtkTreeView.view.separator, -GtkTreeView.separator, -.separator, -.separator:hover { +treeview.view separator, +treeview separator, +separator, +separator:hover { color: shade (@bg_color, 0.92); } -.separator.horizontal { +separator.horizontal { border-width: 1px 0 1px 0; } -.separator.vertical { +separator.vertical { border-width: 0 1px 0 1px; } -GtkComboBox .separator { - -GtkWidget-wide-separators: true; - -GtkWidget-horizontal-separator: 0; - -GtkWidget-vertical-separator: 0; -} - -.button .separator, -.button.separator { +button separator { border-color: shade (@button_bg_color, 0.9); border-bottom-color: alpha (shade (@bg_color, 1.26), 0.6); border-right-color: alpha (shade (@bg_color, 1.26), 0.6); } -.button .separator:insensitive, -.button.separator:insensitive { +button separator:disabled { border-color: shade (@button_insensitive_bg_color, 0.96); border-bottom-color: alpha (shade (@bg_color, 1.26), 0.3); border-right-color: alpha (shade (@bg_color, 1.26), 0.3); } -.menuitem.separator { - -GtkMenuItem-horizontal-padding: 0; +menu separator { + margin-left: 5px; + margin-right: 5px; border: none; color: @dark_bg_color; } -GtkTreeMenu .menuitem.separator, -.toolbar .header-bar .menuitem.separator, -GtkMenuToolButton .menuitem.separator, -.primary-toolbar .button .menuitem.separator, -.header-bar .button .menuitem.separator, -.menuitem.separator { +menuitem.separator, +menu separator { border-color: shade (@dark_bg_color, 0.99); border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5); border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5); } -.toolbar .menuitem.separator, -GtkComboBox .menuitem.separator { +toolbar menu separator, +combobox menu separator { border-color: shade (@bg_color, 0.92); border-bottom-color: alpha (shade (@bg_color, 1.26), 0.6); border-right-color: alpha (shade (@bg_color, 1.26), 0.6); @@ -1362,24 +1741,33 @@ GtkComboBox .menuitem.separator { /*********** * sidebar * ***********/ -GtkPlacesSidebar.sidebar .view { + +filechooser box.search-bar, +#pathbarbox, +placessidebar.sidebar { background-color: shade (@bg_color, 0.95); color: @fg_color; text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04); } -GtkPlacesSidebar.sidebar:backdrop { +filechooser:backdrop box.search-bar, +#pathbarbox:backdrop, +placessidebar.sidebar:backdrop { color: mix (@fg_color, shade (@bg_color, 0.95), 0.2); text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02); } -GtkPlacesSidebar.sidebar row:selected { +placessidebar.sidebar row { + min-height: 30px; +} + +placessidebar.sidebar row:selected { color: @selected_fg_color; text-shadow: 0 1px shade (@selected_bg_color, 0.7); } -GtkPlacesSidebar.sidebar row:selected:backdrop { +placessidebar.sidebar row:selected:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (shade (@bg_color, 0.95), 0.94)), to (shade (shade (@bg_color, 0.95), 0.86))); @@ -1389,35 +1777,37 @@ GtkPlacesSidebar.sidebar row:selected:backdrop { text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96); } -GtkPlacesSidebar.sidebar .sidebar-icon { +placessidebar.sidebar .sidebar-icon { padding-left: 10px; padding-right: 10px; } + /************** * spinbutton * **************/ -.spinbutton.button:active, -.spinbutton.button:insensitive, -.spinbutton.button { + +spinbutton button:active, +spinbutton button:disabled, +spinbutton button { border-radius: 0; } -.spinbutton.button:active:nth-child(last), -.spinbutton.button:insensitive:nth-child(last) -.spinbutton.button:nth-child(last), -.spinbutton.button:active:backdrop:nth-child(last), -.spinbutton.button:insensitive:backdrop:nth-child(last), -.spinbutton.button:backdrop:nth-child(last) { +spinbutton button:active:nth-child(last), +spinbutton button:disabled:nth-child(last) +spinbutton button:nth-child(last), +spinbutton button:active:backdrop:nth-child(last), +spinbutton button:disabled:backdrop:nth-child(last), +spinbutton button:backdrop:nth-child(last) { border-radius: 0 7px 7px 0; } -.spinbutton.button, -.spinbutton.button:active, -.spinbutton.button:backdrop, -.spinbutton.button:active:backdrop, -.spinbutton.button:hover, -.spinbutton.button:hover:backdrop { +spinbutton button, +spinbutton button:active, +spinbutton button:backdrop, +spinbutton button:active:backdrop, +spinbutton button:hover, +spinbutton button:hover:backdrop { background-image: none; background-color: transparent; border-image: none; @@ -1425,21 +1815,31 @@ GtkPlacesSidebar.sidebar .sidebar-icon { border-left-color: alpha (shade (@bg_color, 0.6), 0.22); } -.spinbutton.button:active { +spinbutton.horizontal button:disabled { + margin-top: 1px; + margin-bottom: 1px; + border-image: none; +} + +spinbutton.horizontal button:last-child:disabled { + margin-right: 3px; +} + +spinbutton button:active { background-image: -gtk-gradient (radial, center center, 0.0, center center, 0.5, from (alpha (@selected_bg_color, 0.2)), to (alpha (@selected_bg_color, 0.0))); } -.spinbutton.button:insensitive, -.spinbutton.button:insensitive:backdrop { +spinbutton button:disabled, +spinbutton button:disabled:backdrop { border-left-color: alpha (shade (@bg_color, 0.6), 0.18); color: shade (@bg_color, 0.66); } -.spinbutton, -.spinbutton:hover { +spinbutton, +spinbutton:hover { color: @fg_color; } @@ -1450,40 +1850,36 @@ GtkPlacesSidebar.sidebar .sidebar-icon { to { -gtk-icon-transform: rotate(1turn); } } -.spinner { +spinner { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); color: @selected_bg_color; opacity: 0; } -.spinner:active { +spinner:checked { animation: spinner 1s infinite linear; opacity: 1; } -.spinner:active:backdrop { +spinner:checked:backdrop { color: @backdrop_fg_color; } -.spinner:active:insensitive { +spinner:checked:disabled { opacity: 0.5; } /************* * statusbar * *************/ -GtkStatusbar { +statusbar { } /********** * switch * **********/ -GtkSwitch { - border-radius: 8px; +switch { padding: 0; -} - -GtkSwitch.trough { border-radius: 8px; background-image: -gtk-gradient (linear, left top, left bottom, from (#cecece), @@ -1493,7 +1889,7 @@ GtkSwitch.trough { text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5); } -GtkSwitch.trough:active { +switch:checked { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@selected_bg_color, 0.93)), to (shade (@selected_bg_color, 0.99))); @@ -1502,15 +1898,15 @@ GtkSwitch.trough:active { text-shadow: 0 1px shade (@selected_bg_color, 0.7); } -GtkSwitch:focus { +switch:focus { outline: 2px solid @focus_color; outline-offset: -2px; - outline-radius: 6px; + -gtk-outline-radius: 6px; } /* XXX temporary */ -GtkSwitch.trough:backdrop, -GtkSwitch.trough:insensitive { +switch:backdrop, +switch:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@bg_color, 0.93)), to (shade (@bg_color, 0.99))); @@ -1519,9 +1915,11 @@ GtkSwitch.trough:insensitive { text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5); } -GtkSwitch.slider { +switch slider { padding: 1px; border-radius: 6px; + border-left-width: 1px; + border-right-width: 1px; border-style: solid; background-image: -gtk-gradient (linear, left top, left bottom, @@ -1533,7 +1931,7 @@ GtkSwitch.slider { text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.4); } -GtkSwitch.slider:backdrop { +switch slider:backdrop { background-image: none; background-color: @bg_color; @@ -1544,16 +1942,12 @@ GtkSwitch.slider:backdrop { /************ * textview * ************/ -GtkTextView { +textview { background-color: @base_color; } -.header-bar { - padding: 2px 6px; -} - /* - * Header Bars + * Header Bars and decorations * * The following rules only style header bars when they are used as a window's * titlebar widget (i.e., they have .titlebar set as well). @@ -1562,90 +1956,209 @@ GtkTextView { * that prefer showing traditional title bars. The rules for those are further * down grouped with normal toolbars. */ -.titlebar.header-bar { - background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (@dark_bg_color)); - border-color: shade (@dark_bg_color, 1.5); - border-style: solid; - border-width: 1px 0 0 0; - border-radius: 7px 7px 0 0; +decoration { + margin: 10px; + border-radius: 6px 6px 0 0; + box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85); +} - color: @dark_fg_color; +decoration:backdrop, +tooltip.csd decoration, +.popup decoration { + box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */ + 1px 5px 8px @inactive_shadow_color; + transition: 100ms ease-out; +} - box-shadow: inset 0 1px shade (@dark_bg_color, 1.65); +.ssd decoration { + box-shadow: none; } -.titlebar.header-bar .title { - font: bold; +popover { +/* FIXME: we can't reuse the default shadow definition as increasing marging + * would break the tip + */ + margin: 13px; + box-shadow: 1px 3px 6px @inactive_shadow_color; } -.titlebar.header-bar .subtitle { - font-size: smaller; - opacity: 0.5; +popover:backdrop, +popover.background:backdrop { + box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5); } -.titlebar.header-bar:backdrop { - color: @backdrop_fg_color; +tooltip decoration { + background-color: transparent; background-image: none; - background-color: @dark_bg_color; - border-top-color: @dark_bg_color; } -.maximized .titlebar.header-bar { +.maximized decoration, +.fullscreen decoration, +.unity-csd decoration { + margin: 0; border-radius: 0; - border: none; + box-shadow: none; +} + +.tiled decoration { + border-radius: 0; +} + +.default-decoration.titlebar:not(headerbar), +messagedialog.csd .titlebar:not(headerbar), +messagedialog.solid-csd .titlebar:not(headerbar), +headerbar.default-decoration { + min-height: 26px; +} + +.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), +.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), +.solid-csd .titlebar:dir(rtl):not(headerbar), +.solid-csd .titlebar:dir(ltr):not(headerbar), +.solid-csd headerbar:backdrop:dir(rtl), +.solid-csd headerbar:backdrop:dir(ltr), +.solid-csd headerbar, +.solid-csd headerbar:dir(ltr) { + margin-left: 0; + margin-right: 0; + margin-top: 0; + border-radius: 0; + box-shadow: none; +} + +.solid-csd decoration { + margin: 0; + box-shadow: none; + border-width: 2px; + border-style: solid; + border-color: shade (@dark_bg_color, 0.85); + border-radius: 0; +} + +.solid-csd:backdrop decoration { + border-color: @dark_bg_color +} + +.titlebar, +UnityDecoration .top { + border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */ + border-radius: 6px 6px 0 0; + padding: 1px 6px 1px 6px; + + box-shadow: inset 0 0 transparent, inset 0 0 transparent, + inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent; + + background-color: transparent; + background-clip: border-box; + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (#edebe6, 1.06)), + to (@dark_bg_color)); + + color: shade (@dark_bg_color, 0.4); + text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06), + 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06); +} + +.titlebar:backdrop, +UnityDecoration .top:backdrop { + border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */ + background-color: transparent; + background-clip: border-box; + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (#edebe6, 0.96)), + to (@dark_bg_color)); + box-shadow: inset 0 0 transparent, inset 0 0 transparent, + inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent; + + color: #a39e9a; + text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08), + 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08); } -.maximized .titlebar.header-bar.toolbar-mode { +.maximized .titlebar, +.tiled .titlebar { + border-radius: 0; + border-image: none; + border: none; box-shadow: none; } -.titlebar.header-bar .button.titlebutton { +.maximized .titlebar:not(:backdrop):not(.toolbar-mode), +.tiled .titlebar:not(:backdrop):not(.toolbar-mode) { + box-shadow: inset 0 1px shade (#edebe6, 1.08); +} + +.titlebar .title { + font-weight: bold; +} + +.titlebar .subtitle { + font-size: smaller; + opacity: 0.5; +} + +.titlebar button.titlebutton { background-clip: padding-box; border: 1px solid #d0c7bf; color: #8b8379; - icon-shadow: 0 1px rgba(255, 255, 255, 0.5); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.5); border-radius: 9px; padding: 0; box-shadow: none; background-image: linear-gradient(to top, #d5d2ce, #ece8e4 50%, #f7f4f3); } -.titlebar.header-bar .button.titlebutton.close { +/* keep buttons closer */ +.titlebar button.titlebutton { + margin-left: -2px; + margin-right: -2px; +} + +.titlebar button.titlebutton:first-child { + margin-left: inherit; +} + +.titlebar button.titlebutton:last-child { + margin-right: inherit; +} + +.titlebar button.titlebutton.close { color: #7f4025; - icon-shadow: 0 1px rgba(255, 255, 255, 0.25); - background-image: linear-gradient(to top, #e77041, #f17d4e 50%, #f9b39c); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.25); + background-image: linear-gradient(to top, #e77041, #f17d43 50%, #f9b39c); } -.titlebar.header-bar .button.titlebutton.close:hover { +.titlebar button.titlebutton.close:hover { background-image: linear-gradient(to top, #e67144, #ed8b67 50%, #f9cbbd); } -.titlebar.header-bar .button.titlebutton:hover, -.titlebar.header-bar .button.titlebutton:backdrop:hover { +.titlebar button.titlebutton:hover, +.titlebar button.titlebutton:backdrop:hover { background-image: linear-gradient(to top, #e2e1df, #f8f6f3 50%, #fcfbf9); } -.titlebar.header-bar .button.titlebutton:active { - icon-shadow: none; +.titlebar button.titlebutton:active { + -gtk-icon-shadow: none; background-image: linear-gradient(to top, #fcfbf8, #fbf9f6); } -.titlebar.header-bar .button.titlebutton.close:active { - background-image: linear-gradient(to top, #f08054, #f07c4e); +.titlebar button.titlebutton.close:active { + background-image: linear-gradient(to top, #ec6e44, #e76b41); } -.titlebar.header-bar .button.titlebutton:backdrop { +.titlebar button.titlebutton:backdrop { color: #8b8379; - icon-shadow: none; + -gtk-icon-shadow: none; background-image: linear-gradient(to top, #ece9e6, #e8e4e1); } + + + /*********** * toolbar * ***********/ -.toolbar { +.toolbar:not(.titlebar):not(headerbar) { border-style: none; padding: 1px; @@ -1654,7 +2167,7 @@ GtkTextView { text-shadow: none; } -.toolbar:backdrop { +.toolbar:not(.titlebar):not(headerbar):backdrop { color: @backdrop_fg_color; } @@ -1662,8 +2175,9 @@ GtkTextView { * primary-toolbar * *******************/ .primary-toolbar, -.header-bar, -.maximized .titlebar.header-bar.toolbar-mode:not(:backdrop) { +/* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */ +:not(.titlebar) > headerbar:not(.titlebar), +.titlebar.toolbar-mode { -GtkWidget-window-dragging: true; background-image: -gtk-gradient (linear, left top, left bottom, @@ -1681,12 +2195,10 @@ GtkTextView { box-shadow: inset 0 1px shade (@dark_bg_color, 0.94); } -.maximized .titlebar.header-bar.toolbar-mode:not(:backdrop) { - border-width: 0; -} - .primary-toolbar:backdrop, -.header-bar:backdrop { +/* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */ +:not(.titlebar) > headerbar:not(.titlebar):backdrop, +.titlebar.toolbar-mode:backdrop { background-image: none; background-color: @dark_bg_color; box-shadow: none; @@ -1696,112 +2208,145 @@ GtkTextView { color: @backdrop_dark_fg_color; } -.primary-toolbar :insensitive, -.header-bar :insensitive { +.primary-toolbar:disabled, +.titlebar.toolbar-mode:disabled, +headerbar:disabled { text-shadow: 0 -1px shade (@dark_bg_color, 0.7); } -.primary-toolbar .button, -.header-bar .button, -.primary-toolbar .button.flat:hover { +.primary-toolbar button, +.titlebar button, +headerbar button, +headerbar button:disabled, +.primary-toolbar button.flat:hover { background: transparent; + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"), + url("assets/radiance-button-toolbar@2.png")); + padding: 9px; color: @dark_fg_color; +} + +.primary-toolbar button, +headerbar button *, +headerbar button:disabled * { text-shadow: 0 -1px shade (@dark_bg_color, 0.7); - border-image-source: url("assets/radiance-button-toolbar.png"); - padding: 9px; } -.primary-toolbar .button.flat { +.primary-toolbar button.flat { border-image-source: none; background: transparent; } -.primary-toolbar .button:focused, -.header-bar .button:focused { - border-image-source: url("assets/radiance-button-toolbar-focused.png"); +.primary-toolbar button:focus, +headerbar button:focus { + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-focused.png"), + url("assets/radiance-button-toolbar-focused@2.png")); } -.primary-toolbar .button:active, -.primary-toolbar .button:checked, -.header-bar .button:active, -.header-bar .button:checked { - border-image-source: url("assets/radiance-button-toolbar-active.png"); +.primary-toolbar button:active, +.primary-toolbar button:checked, +headerbar button:active, +headerbar button:checked { + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-active.png"), + url("assets/radiance-button-toolbar-active@2.png")); } -.primary-toolbar .button:active:focused, -.primary-toolbar .button:checked:focused, -.header-bar .button:active:focused, -.header-bar .button:checked:focused { - border-image-source: url("assets/radiance-button-toolbar-active-focused.png"); +.primary-toolbar button:active:focus, +.primary-toolbar button:checked:focus, +headerbar button:active:focus, +headerbar button:checked:focus, +headerbar button:hover:focus { + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-active-focused.png"), + url("assets/radiance-button-toolbar-active-focused@2.png")); } -.primary-toolbar .button:backdrop, -.header-bar .button:backdrop { - background-color: transparent; +.primary-toolbar button:backdrop, +headerbar button:backdrop, +headerbar button:disabled:backdrop, +headerbar button:checked:backdrop { color: @backdrop_dark_fg_color; + background-color: transparent; + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar.png"), + url("assets/radiance-backdrop-button-toolbar@2.png")); +} + +.primary-toolbar button:backdrop, +headerbar button:backdrop *, +headerbar button:disabled:backdrop *, +headerbar button:checked:backdrop * { text-shadow: 0 -1px shade (@dark_bg_color, 0.9); - border-image-source: url("assets/radiance-backdrop-button-toolbar.png"); } -.primary-toolbar .button.flat:backdrop { +.primary-toolbar button.flat:backdrop { border-image-source: none; } -.primary-toolbar .button:active:backdrop, -.primary-toolbar .button:checked:backdrop, -.header-bar .button:active:backdrop, -.header-bar .button:checked:backdrop { - border-image-source: url("assets/radiance-backdrop-button-toolbar-active.png"); +.primary-toolbar button:active:backdrop, +.primary-toolbar button:checked:backdrop, +headerbar button:active:backdrop { + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar-active.png"), + url("assets/radiance-backdrop-button-toolbar-active@2.png")); } -.primary-toolbar .button:hover, -.primary-toolbar .button:checked, -.header-bar .button:hover, -.header-bar .button:checked { +.primary-toolbar button:hover, +.primary-toolbar button:checked, +headerbar button:hover, +headerbar button:checked, +headerbar button:backdrop:hover, +headerbar button:backdrop:checked { + background-color: transparent; background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 1.2)), to (shade (@dark_bg_color, 1.1))); + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar.png"), + url("assets/radiance-backdrop-button-toolbar@2.png")); } -.primary-toolbar .button:active, -.header-bar .button:active { +.primary-toolbar button:active, +headerbar button:active { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 0.95)), to (shade (@dark_bg_color, 1.0))); text-shadow: 0 -1px shade (@dark_bg_color, 0.6); } -.primary-toolbar .button:checked:insensitive, -.primary-toolbar .button:insensitive, -.header-bar .button:checked:insensitive, -.header-bar .button:insensitive { +.primary-toolbar button:checked:disabled, +.primary-toolbar button:disabled, +headerbar button:checked:disabled, +headerbar button:disabled { text-shadow: none; } -.primary-toolbar .button:insensitive, -.header-bar .button:insensitive { +.primary-toolbar button:disabled, +headerbar button:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 1.01)), to (shade (@dark_bg_color, 0.99))); + border-image-source: -gtk-scaled(url("assets/button-toolbar.png"), + url("assets/button-toolbar@2.png")); } -.primary-toolbar .button.flat:insensitive { +.primary-toolbar button.flat:disabled { background-image: none; + border-image-source: inherit; } -.primary-toolbar .button:checked:insensitive, -.header-bar .button:checked:insensitive { +.primary-toolbar button:checked:disabled, +headerbar button:checked:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 0.94)), to (shade (@dark_bg_color, 1.02))); + border-image-source: -gtk-scaled(url("assets/button-toolbar.png"), + url("assets/button-toolbar@2.png")); } -.primary-toolbar GtkSeparatorToolItem, -.primary-toolbar .separator, -.primary-toolbar .separator:insensitive, -.header-bar GtkSeparatorToolItem, -.header-bar .separator, -.header-bar .separator:insensitive { +.primary-toolbar separator, +.primary-toolbar separator, +.primary-toolbar separator:disabled, +headerbar separator, +headerbar separator:disabled, +.titlebar separator, +.titlebar separator:disabled { border-color: alpha (shade (@dark_bg_color, 0.94), 0.35); border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5); border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5); @@ -1827,27 +2372,27 @@ GtkTextView { padding: 3px 4px 4px 4px; } -.inline-toolbar.toolbar .button { +.inline-toolbar.toolbar button { padding: 4px; - icon-shadow: 0 1px shade (@bg_color, 1.16); + -gtk-icon-shadow: 0 1px shade (@bg_color, 1.16); } /* Middle button */ -.inline-toolbar.toolbar .button, -.inline-toolbar.toolbar .button:active, -.inline-toolbar.toolbar .button:focus, -.inline-toolbar.toolbar .button:focus:active, -.inline-toolbar.toolbar .button:insensitive, -.inline-toolbar.toolbar .button:backdrop, -.inline-toolbar.toolbar .button:backdrop:insensitive, -.inline-toolbar.toolbar GtkToolButton .button, -.inline-toolbar.toolbar GtkToolButton .button:active, -.inline-toolbar.toolbar GtkToolButton .button:focus, -.inline-toolbar.toolbar GtkToolButton .button:focus:active, -.inline-toolbar.toolbar GtkToolButton .button:insensitive, -.inline-toolbar.toolbar GtkToolButton .button:backdrop, -.inline-toolbar.toolbar GtkToolButton .button:backdrop:insensitive { +.inline-toolbar.toolbar button, +.inline-toolbar.toolbar button:active, +.inline-toolbar.toolbar button:focus, +.inline-toolbar.toolbar button:focus:active, +.inline-toolbar.toolbar button:disabled, +.inline-toolbar.toolbar button:backdrop, +.inline-toolbar.toolbar button:backdrop:disabled, +.inline-toolbar.toolbar GtkToolButton button, +.inline-toolbar.toolbar GtkToolButton button:active, +.inline-toolbar.toolbar GtkToolButton button:focus, +.inline-toolbar.toolbar GtkToolButton button:focus:active, +.inline-toolbar.toolbar GtkToolButton button:disabled, +.inline-toolbar.toolbar GtkToolButton button:backdrop, +.inline-toolbar.toolbar GtkToolButton button:backdrop:disabled { border-right-width: 0; border-left-width: 0; border-image-width: 10px 0 10px 0; @@ -1855,20 +2400,20 @@ GtkTextView { } /* Leftmost button */ -.inline-toolbar.toolbar .button:first-child, -.inline-toolbar.toolbar .button:active:first-child, -.inline-toolbar.toolbar .button:focus:first-child, -.inline-toolbar.toolbar .button:focus:active:first-child, -.inline-toolbar.toolbar .button:insensitive:first-child, -.inline-toolbar.toolbar .button:backdrop:first-child, -.inline-toolbar.toolbar .button:backdrop:insensitive:first-child, -.inline-toolbar.toolbar GtkToolButton:first-child .button, -.inline-toolbar.toolbar GtkToolButton:first-child .button:active, -.inline-toolbar.toolbar GtkToolButton:first-child .button:focus, -.inline-toolbar.toolbar GtkToolButton:first-child .button:focus:active, -.inline-toolbar.toolbar GtkToolButton:first-child .button:insensitive, -.inline-toolbar.toolbar GtkToolButton:first-child .button:backdrop, -.inline-toolbar.toolbar GtkToolButton:first-child .button:backdrop:insensitive { +.inline-toolbar.toolbar button:first-child, +.inline-toolbar.toolbar button:active:first-child, +.inline-toolbar.toolbar button:focus:first-child, +.inline-toolbar.toolbar button:focus:active:first-child, +.inline-toolbar.toolbar button:disabled:first-child, +.inline-toolbar.toolbar button:backdrop:first-child, +.inline-toolbar.toolbar button:backdrop:disabled:first-child, +.inline-toolbar.toolbar GtkToolButton:first-child button, +.inline-toolbar.toolbar GtkToolButton:first-child button:active, +.inline-toolbar.toolbar GtkToolButton:first-child button:focus, +.inline-toolbar.toolbar GtkToolButton:first-child button:focus:active, +.inline-toolbar.toolbar GtkToolButton:first-child button:disabled, +.inline-toolbar.toolbar GtkToolButton:first-child button:backdrop, +.inline-toolbar.toolbar GtkToolButton:first-child button:backdrop:disabled { border-left-width: 1px; border-right-width: 0; border-image-width: 10px 0 10px 12px; @@ -1878,20 +2423,20 @@ GtkTextView { } /* Rightmost button */ -.inline-toolbar.toolbar .button:last-child, -.inline-toolbar.toolbar .button:active:last-child, -.inline-toolbar.toolbar .button:focus:last-child, -.inline-toolbar.toolbar .button:focus:active:last-child, -.inline-toolbar.toolbar .button:insensitive:last-child, -.inline-toolbar.toolbar .button:backdrop:last-child, -.inline-toolbar.toolbar .button:backdrop:insensitive:last-child, -.inline-toolbar.toolbar GtkToolButton:last-child .button, -.inline-toolbar.toolbar GtkToolButton:last-child .button:active, -.inline-toolbar.toolbar GtkToolButton:last-child .button:focus, -.inline-toolbar.toolbar GtkToolButton:last-child .button:focus:active, -.inline-toolbar.toolbar GtkToolButton:last-child .button:insensitive, -.inline-toolbar.toolbar GtkToolButton:last-child .button:backdrop, -.inline-toolbar.toolbar GtkToolButton:last-child .button:backdrop:insensitive { +.inline-toolbar.toolbar button:last-child, +.inline-toolbar.toolbar button:active:last-child, +.inline-toolbar.toolbar button:focus:last-child, +.inline-toolbar.toolbar button:focus:active:last-child, +.inline-toolbar.toolbar button:disabled:last-child, +.inline-toolbar.toolbar button:backdrop:last-child, +.inline-toolbar.toolbar button:backdrop:disabled:last-child, +.inline-toolbar.toolbar GtkToolButton:last-child button, +.inline-toolbar.toolbar GtkToolButton:last-child button:active, +.inline-toolbar.toolbar GtkToolButton:last-child button:focus, +.inline-toolbar.toolbar GtkToolButton:last-child button:focus:active, +.inline-toolbar.toolbar GtkToolButton:last-child button:disabled, +.inline-toolbar.toolbar GtkToolButton:last-child button:backdrop, +.inline-toolbar.toolbar GtkToolButton:last-child button:backdrop:disabled { border-left-width: 0; border-right-width: 1px; border-image-width: 10px 12px 10px 0; @@ -1901,20 +2446,20 @@ GtkTextView { } /* Single button */ -.inline-toolbar.toolbar .button:only-child, -.inline-toolbar.toolbar .button:active:only-child, -.inline-toolbar.toolbar .button:focus:only-child, -.inline-toolbar.toolbar .button:focus:active:only-child, -.inline-toolbar.toolbar .button:insensitive:only-child, -.inline-toolbar.toolbar .button:backdrop:only-child, -.inline-toolbar.toolbar .button:backdrop:insensitive:only-child, -.inline-toolbar.toolbar GtkToolButton:only-child .button, -.inline-toolbar.toolbar GtkToolButton:only-child .button:active, -.inline-toolbar.toolbar GtkToolButton:only-child .button:focus, -.inline-toolbar.toolbar GtkToolButton:only-child .button:focus:active, -.inline-toolbar.toolbar GtkToolButton:only-child .button:insensitive, -.inline-toolbar.toolbar GtkToolButton:only-child .button:backdrop, -.inline-toolbar.toolbar GtkToolButton:only-child .button:backdrop:insensitive { +.inline-toolbar.toolbar button:only-child, +.inline-toolbar.toolbar button:active:only-child, +.inline-toolbar.toolbar button:focus:only-child, +.inline-toolbar.toolbar button:focus:active:only-child, +.inline-toolbar.toolbar button:disabled:only-child, +.inline-toolbar.toolbar button:backdrop:only-child, +.inline-toolbar.toolbar button:backdrop:disabled:only-child, +.inline-toolbar.toolbar GtkToolButton:only-child button, +.inline-toolbar.toolbar GtkToolButton:only-child button:active, +.inline-toolbar.toolbar GtkToolButton:only-child button:focus, +.inline-toolbar.toolbar GtkToolButton:only-child button:focus:active, +.inline-toolbar.toolbar GtkToolButton:only-child button:disabled, +.inline-toolbar.toolbar GtkToolButton:only-child button:backdrop, +.inline-toolbar.toolbar GtkToolButton:only-child button:backdrop:disabled { border-right-width: 1px; border-left-width: 1px; border-image-width: 10px 12px 10px 12px; @@ -1924,108 +2469,187 @@ GtkTextView { /*********** * tooltip * ***********/ -.tooltip { +tooltip { background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8, from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)), to (alpha (@tooltip_bg_color, 0.86))); - border-color: alpha (#ffffff, 0.2); + border-color: alpha (white, 0.2); border-radius: 5px; border-style: solid; border-width: 1px; +} + +tooltip.csd:not(.unity-csd) decoration { + border-radius: 5px; +} +tooltip.background { + background-color: transparent; +} + +tooltip label { color: @tooltip_fg_color; } /************ * treeview * ************/ -GtkTreeView.dnd { +treeview.view.dnd { border-color: shade (@selected_bg_color, 1.12); border-radius: 2px; border-width: 1px; border-style: solid; } -GtkTreeView .entry { +treeview.view .entry { background-image: none; } +treeview.view { + border-width: 1px; + border-color: @selected_bg_color; +} + /************ * viewport * ************/ -GtkViewport.frame { +viewport.frame { border-width: 0; } /************ * listbox * ************/ -.list-row.button { +.list-rowbutton { border-image: none; border-style: none; border-radius: 0; background-image: none; } -.list-row.button:selected { +.list-rowbutton:selected { text-shadow: none; } /************ * popover * ************/ -.popover { +popover { background-clip: border-box; border-radius: 5px; border: 1px solid darker(@bg_color); - - box-shadow: 0 2px 3px @shadow_color; - margin: 10px; padding: 2px; } -.popover:backdrop { - box-shadow: none; -} - /* Popover menuitems are actually buttons. The following rules reset most of * the button styles for them. */ -.popover .menuitem, -.popover .menuitem:checked, -.popover .menuitem:hover, -.popover .menuitem:active, -.popover .menuitem:insensitive, -.popover .menuitem:backdrop { +popover modelbutton, +popover modelbutton:checked, +popover modelbutton:hover, +popover modelbutton:active, +popover modelbutton:disabled, +popover modelbutton:backdrop, +popover menuitem, +popover menuitem:checked, +popover menuitem:hover, +popover menuitem:active, +popover menuitem:disabled, +popover menuitem:backdrop { border-image: none; border: none; text-shadow: none; border-radius: 3px; } -.popover .menuitem:backdrop:hover { +popover modelbutton:backdrop:hover, +popover menuitem:backdrop:hover { border: none; border-image: none; background: transparent; color: @fg_color; } -.popover .menuitem:checked, -.popover .menuitem.check, -.popover .menuitem.check:checked, -.popover .menuitem.radio, -.popover .menuitem.radio:checked { +popover modelbutton:checked, +popover modelbutton check, +popover modelbutton check:checked, +popover modelbutton radio, +popover modelbutton radio:checked, +popover menuitem:checked, +popover menuitem.check, +popover menuitem.check:checked, +popover menuitem.radio, +popover menuitem.radio:checked { background-image: none; border: none; } -.popover .menuitem:insensitive, -.popover .menuitem *:insensitive { +popover modelbutton:disabled, +popover modelbutton *:disabled, +popover menuitem:disabled, +popover menuitem *:disabled { text-shadow: none; background: none; } + +/* menu buttons inside popovers */ +modelbutton.flat, +popover.background checkbutton, +popover.background radiobutton, +menu button.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; +} + +modelbutton.flat:hover, +popover.background checkbutton:hover, +popover.background radiobutton:hover, +menu button.flat:hover { + background-color: #f4f4f4; +} + +modelbutton.flat check:last-child, +popover.background checkbutton check:last-child, +popover.background radiobutton check:last-child, +modelbutton.flat radio:last-child, +popover.background checkbutton radio:last-child, +popover.background radiobutton radio:last-child, +menu button.flat check:last-child, +menu button.flat radio:last-child { + margin-left: 8px; +} + +modelbutton.flat check:first-child, +popover.background checkbutton check:first-child, +popover.background radiobutton check:first-child, +modelbutton.flat radio:first-child, +popover.background checkbutton radio:first-child, +popover.background radiobutton radio:first-child, +menu button.flat check:first-child, +menu button.flat radio:first-child +{ + margin-right: 8px; +} + +menu arrow.left, +modelbutton.flat arrow.left, +popover.background checkbutton arrow.left, +popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +menu arrow.right, +modelbutton.flat arrow.right, +popover.background checkbutton arrow.right, +popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + /* Floating bars */ .floating-bar { background-color: @info_bg_color; @@ -2049,81 +2673,90 @@ GtkViewport.frame { border-radius: 8px; } -.osd .button, -.osd .button:backdrop { +.osd button, +.osd button:backdrop { color: @osd_fg_color; background: none; border: none; padding: 12px; border-radius: 8px; transition: all 100ms ease-in-out; + box-shadow: none; } /* buttons that are not part of an osd toolbar need a background */ -.button.osd, -.button.osd:hover, -.button.osd:active { +button.osd, +button.osd:hover, +button.osd:active { background: @osd_bg_color; padding: 12px; box-shadow: none; border-image: none; } -.button.osd:hover, -.osd .button:hover { +button.osd:hover, +.osd button:hover { color: lighter(@osd_fg_color); - icon-shadow: 0 0 3px @osd_fg_color; + -gtk-icon-shadow: 0 0 3px @osd_fg_color; } -.button.osd:active, -.osd .button:active { +button.osd:active, +.osd button:active { color: darker(@osd_fg_color); - icon-shadow: none; + -gtk-icon-shadow: none; } /************* * overshoot * *************/ -.overshoot.top { +overshoot.top { background: -gtk-gradient(radial, center top, 0, center top, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); } -.overshoot.right { +overshoot.right { background: -gtk-gradient(radial, right center, 0, right center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); } -.overshoot.bottom { +overshoot.bottom { background: -gtk-gradient(radial, center bottom, 0, center bottom, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); } -.overshoot.left { +overshoot.left { background: -gtk-gradient(radial, left center, 0, left center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); } /************** * undershoot * **************/ -.undershoot { +undershoot { background: none; } /***************************************************************************** * states [please keep this section at the end of the file (CSS precedence)] * *****************************************************************************/ -*:insensitive { +*:disabled { color: shade (@bg_color, 0.6); text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5); + -gtk-icon-effect: dim; } +label selection, +label selection:focus, +label selection:hover, +entry selection, +.view text selection, *:selected, -*:selected:focused { +*:selected:focus { background-color: alpha (@selected_bg_color, 0.9); color: @selected_fg_color; } +entry selection:backdrop, +.view text selection:backdrop, *:selected:backdrop, -*:selected:focused:backdrop { +*:selected:focus:backdrop { background-color: alpha (@backdrop_selected_bg_color, 0.9); color: @backdrop_selected_fg_color; diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gedit.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gedit.css index 7513046..0c33c7a 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gedit.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gedit.css @@ -57,6 +57,7 @@ GeditFileBrowserWidget .toolbar { color: @backdrop_text_color; margin: 2px; padding: 2px; + border: none; } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-flashback.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-flashback.css new file mode 100644 index 0000000..7689029 --- /dev/null +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-flashback.css @@ -0,0 +1,58 @@ +gf-popup-window { + border: 1px solid shade(@dark_bg_color, 0.8); + border-radius: 10px; +} + +gf-popup-window.solid { + border-radius: 0px; +} + +#gf-candidate-popup { + border-radius: 3px; +} + +#gf-candidate-popup.solid { + border-radius: 0px; +} + +#gf-candidate-popup gf-candidate-box label { + padding: 4px 6px; +} + +#gf-candidate-popup gf-candidate-box label:last-child { + padding-left: 0px; +} + +#gf-candidate-popup gf-candidate-box:selected, +#gf-candidate-popup gf-candidate-box:hover { + background-color: @selected_bg_color; + color: @selected_fg_color; + border-radius: 3px; +} + +#gf-input-source-popup { + background-color: @dark_bg_color; + color: @dark_fg_color; +} + +#gf-input-source-popup #gf-input-source { + background-color: shade(@dark_bg_color, 1.1); + border-radius: 6px; + min-width: 120px; + min-height: 120px; + font-size: 22px; +} + +#gf-input-source-popup #gf-input-source:selected { + background-color: @selected_bg_color; + color: @selected_fg_color; +} + +#gf-label-window { + font-size: 40px; +} + +#gf-osd-window { + background-color: @dark_bg_color; + color: @dark_fg_color; +} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-panel.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-panel.css index 64cd132..a623e41 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-panel.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/gnome-panel.css @@ -1,64 +1,32 @@ -/* Fallback Mode Panel */ -PanelWidget :backdrop, -PanelApplet :backdrop, -PanelToplevel :backdrop, -PanelWidget, -PanelApplet, -PanelToplevel { - border-image: none; - +panel-toplevel, +panel-plug { color: @dark_fg_color; -} - -PanelWidget, -PanelApplet, -PanelToplevel { background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (shade (@dark_bg_color, 1.05))); -} - -PanelApplet { - border-width: 0; + from (shade (@dark_bg_color, 1.15)), + to (shade (@dark_bg_color, 0.95))); } -PanelSeparator:backdrop, -PanelSeparator { - border-width: 0; - background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (shade (@dark_bg_color, 1.05))); - +panel-toplevel .gnome-panel-menu-bar:backdrop, +panel-toplevel .gnome-panel-menu-bar, +gp-applet > menubar, +gp-applet, +panel-applet > menubar, +panel-applet, +clock-box { + background: transparent; color: @dark_fg_color; } -.gnome-panel-menu-bar, -PanelApplet > GtkMenuBar.menubar, -PanelApplet > GtkMenuBar.menubar.menuitem, -PanelMenuBar.menubar, -PanelMenuBar.menubar.menuitem { - -PanelMenuBar-icon-visible: true; - background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (shade (@dark_bg_color, 1.05))); -} - -PanelAppletFrame { - background-color: @dark_bg_color; - background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (shade (@dark_bg_color, 1.05))); - border-width: 0; -} - -PanelApplet .button:backdrop, -PanelApplet .button { +gp-applet button:backdrop, +gp-applet button, +panel-applet button:backdrop, +panel-applet button { border-image: none; background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (shade (@dark_bg_color, 1.05))); - border-color: alpha (shade (@dark_bg_color, 1.0), 0.6); - border-left-color: alpha (shade (@dark_bg_color, 1.5), 0.3); + from (shade (@dark_bg_color, 1.15)), + to (shade (@dark_bg_color, 0.95))); + border-color: alpha (shade (@dark_bg_color, 0.9), 0.6); + border-left-color: alpha (shade (@dark_bg_color, 1.2), 0.6); border-radius: 0; border-width: 0 1px 0 1px; @@ -66,51 +34,97 @@ PanelApplet .button { text-shadow: none; } -PanelApplet .button:active:hover:backdrop, -PanelApplet .button:active:hover, -PanelApplet .button:active:backdrop, -PanelApplet .button:active { +#clock-applet-button { + background: transparent; + border: 0; +} + +panel-applet button:active:hover:backdrop, +panel-applet button:active:hover, +panel-applet button:active:backdrop, +gp-applet button:active:hover:backdrop, +gp-applet button:active:hover, +gp-applet button:active:backdrop, +#clock-applet-button:active:hover, +#clock-applet-button:active { border-image: none; background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 0.85)), - to (shade (@dark_bg_color, 1.0))); - border-color: shade (@dark_bg_color, 0.9); + from (shade (@dark_bg_color, 0.7)), + to (shade (@dark_bg_color, 0.8))); + border-color: shade (@dark_bg_color, 0.7); } -PanelApplet .button:hover:backdrop, -PanelApplet .button:hover { +gp-applet button:hover:backdrop, +gp-applet button:hover, +panel-applet button:hover:backdrop, +panel-applet button:hover, +#clock-applet-button:hover { border-image: none; background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.7)), - to (shade (@dark_bg_color, 1.25))); - border-color: alpha (shade (@dark_bg_color, 1.0), 0.6); - border-left-color: alpha (shade (@dark_bg_color, 1.5), 0.4); + from (shade (@dark_bg_color, 1.3)), + to (shade (@dark_bg_color, 1.1))); + border-color: alpha (shade (@dark_bg_color, 0.9), 0.6); + border-left-color: alpha (shade (@dark_bg_color, 1.2), 0.8); } -PanelApplet .button:checked { +gp-applet button:checked, +panel-applet button:checked, +#clock-applet-button:checked { background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 0.95)), - to (shade (@dark_bg_color, 1.1))); + from (shade (@dark_bg_color, 0.8)), + to (shade (@dark_bg_color, 1))); } -PanelApplet .button:checked:hover { +gp-applet button:checked:hover, +panel-applet button:checked:hover, +#clock-applet-button:checked:hover { background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.15)), - to (shade (@dark_bg_color, 1.3))); + from (shade (@dark_bg_color, 1)), + to (shade (@dark_bg_color, 1.1))); } -PanelApplet .button:checked:hover:active { +gp-applet button:checked:hover:active, +panel-applet button:checked:hover:active, +#clock-applet-button:checked:hover:active { border-image: none; background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 0.75)), - to (shade (@dark_bg_color, 0.9))); + from (shade (@dark_bg_color, 0.6)), + to (shade (@dark_bg_color, 0.7))); border-color: shade (@dark_bg_color, 0.8); } -ClockBox { - text-shadow: 0 -1px shade (@dark_bg_color, 0.6); +clock-box { + text-shadow: 0 1px shade (@dark_bg_color, 1.08); } -WnckPager, WnckTasklist { +wnck-pager, +wnck-tasklist { background-color: @dark_bg_color; } + +gp-arrow-button { + min-width: 20px; + min-height: 0px; + + border: 1px solid #9d9d99; + border-radius: 3px; + background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd); + margin: 2px; +} + +.vertical gp-arrow-button { + min-width: 0px; + min-height: 20px; +} + +gp-arrow-button:hover { + background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); +} + +gp-arrow-button:active { + background-image: linear-gradient(to bottom, #c8c8c5, #dcdcda); +} + +panel-toplevel.background:backdrop { + box-shadow: none; +} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/libreoffice.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/libreoffice.css new file mode 100644 index 0000000..5fe1128 --- /dev/null +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/libreoffice.css @@ -0,0 +1,19 @@ +.libreoffice-toolbar { + background-image: none; + border: none; + box-shadow: none; +} +.libreoffice-toolbar button:hover { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (@focus_color, 1.5)), + color-stop (0.5, shade (@focus_color, 1.33)), + to (shade (@focus_color, 1.28))); + border-image-source: url("assets/button-hover.png"); +} +.libreoffice-toolbar button:active { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (@selected_bg_color, 1.5)), + color-stop (0.5, shade (@selected_bg_color, 1.33)), + to (shade (@selected_bg_color, 1.28))); + border-image-source: url("assets/button-active-hover.png"); +} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/nautilus.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/nautilus.css index 52f9bd8..9571e8b 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/nautilus.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/nautilus.css @@ -1,3 +1,8 @@ +nautilus-desktop-window.background:backdrop, +.nautilus-desktop-window.background:backdrop { + box-shadow: none; +} + .nautilus-canvas-item { border-radius: 5px; } @@ -47,8 +52,8 @@ @keyframes needs_attention_keyframes { 0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; } /* can't do animation-direction, so holding the color on two keyframes */ - 30% {background-image: linear-gradient(to bottom, @theme_base_color); border-color: @theme_fg_color; } - 90% {background-image: linear-gradient(to bottom, @theme_base_color); border-color: @theme_fg_color; } + 30% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; } + 90% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; } 100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; } } .nautilus-operations-button-needs-attention { diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity-greeter.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity-greeter.css index 0432201..6b1d3f6 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity-greeter.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity-greeter.css @@ -1,11 +1,11 @@ .lightdm menu { background-image: none; - background-color: alpha (black, 0.6); + background-color: shade (@dark_bg_color, 1.08); border: none; border-radius: 0px; padding: 1px; - color: white; + color: @dark_fg_color; } .lightdm-combo menu { @@ -13,13 +13,13 @@ border-radius: 0px; padding: 0px; - color: white; + color: @dark_fg_color; } .lightdm menu menuitem *, .lightdm menu menuitem.check:active, .lightdm menu menuitem.radio:active { - color: white; + color: @dark_fg_color; } .lightdm menu menuitem *:disabled { diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity.css new file mode 100644 index 0000000..94ef6b6 --- /dev/null +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/apps/unity.css @@ -0,0 +1,99 @@ +/* Decorations */ + +UnityDecoration { + -UnityDecoration-extents: 28px 0 0 0; + -UnityDecoration-input-extents: 10px; + + -UnityDecoration-shadow-offset-x: 1px; + -UnityDecoration-shadow-offset-y: 5px; + -UnityDecoration-active-shadow-color: alpha (@active_shadow_color, 0.78); + -UnityDecoration-active-shadow-radius: 30px; + -UnityDecoration-inactive-shadow-color: @inactive_shadow_color; + -UnityDecoration-inactive-shadow-radius: 25px; + + -UnityDecoration-glow-size: 10px; + -UnityDecoration-glow-color: rgb (221, 72, 20); + + -UnityDecoration-title-indent: 10px; + -UnityDecoration-title-fade: 35px; + -UnityDecoration-title-alignment: 0.0; +} + +/* Definitions of UnityDecoration .top (and :backdrop) are now shared with + * Gtk .titlebar (and :backdrop); .left and .right are not used by this theme */ + +UnityDecoration .left, +UnityDecoration .right { + background-color: shade (@bg_color, 0.7); + background-size: 1px 70px; + background-repeat: repeat-x; + + /* start color: mix of the top border color and bg-image gradient end */ + background-image: -gtk-gradient (linear, left top, left bottom, + color-stop (0, #a89686), + color-stop (0.5, #a89686), + color-stop (1, shade (@bg_color, 0.7))); +} + +UnityDecoration .left:backdrop, +UnityDecoration .right:backdrop { + /* start color: mix of the top border color and bg-image gradient end */ + background-image: -gtk-gradient (linear, left top, left bottom, + color-stop (0, #b5a395), + color-stop (0.5, #b5a395), + color-stop (1, shade (@bg_color, 0.7))); +} + +UnityDecoration .bottom { + background-image: none; + background-color: shade (@bg_color, 0.7); +} + +/* Panel Style */ + +UnityPanelWidget, +.unity-panel { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (#edebe6, 1.06)), + to (@dark_bg_color)); + border-top-color: shade (#edebe6, 1.08); + border-style: solid; + border-width: 1px 0 0 0; + + color: shade (@dark_bg_color, 0.4); + text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06), + 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06); +} + +UnityPanelWidget:backdrop, +.unity-panel:backdrop { + color: #a39e9a; +} + +.unity-panel.menubar, +.unity-panel .menubar { +} + +.unity-panel.menuitem, +.unity-panel .menuitem { + border-width: 1px 1px 0 1px; + -gtk-icon-shadow: 0 -1px shade (@dark_bg_color, 1.06); +} + +.unity-panel.menubar.menuitem:hover, +.unity-panel.menubar .menuitem *:hover { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (@dark_bg_color, 1.5)), + to (shade (@dark_bg_color, 1.02))); +} + + +@keyframes playbackmenuitem_spinner { + to { -gtk-icon-transform: rotate(1turn); } +} + +.menu IdoPlaybackMenuItem.menuitem:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: playbackmenuitem_spinner 1s infinite linear; + color: @selected_bg_color; +} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-lubuntu.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-lubuntu.css index af32699..1657a68 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-lubuntu.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-lubuntu.css @@ -221,116 +221,40 @@ NautilusWindow .sidebar .view { background-color: @sidepane_color; } -/************************************************************ - * GTK3 CSD support * - ************************************************************/ - -.titlebar { - border-radius: 6px 6px 0 0; - background-image: linear-gradient(to bottom, - shade(@bg_color, 1.07), - shade(@bg_color, 0.88) - ); - - color: @fg_color; -} - -.tiled .titlebar { - border-radius: 0; -} - -.maximized .titlebar { - border-radius: 0; -} - -.titlebar.default-decoration { - border: none; +*:drop(active):focus, +*:drop(active) { + box-shadow: inset 0 0 0 1px #F08437; } + +decoration { + border-radius: 6px 6px 0 0; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5); + margin: 2px; } + decoration:backdrop { + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 transparent, 0 0 10px 0 rgba(0, 0, 0, 0.5); + transition: 200ms ease-out; } + .fullscreen decoration, + .tiled decoration { + border-radius: 0; } + .popup decoration { box-shadow: none; -} - -.titlebar .title { - font: bold; - color: mix(@fg_color, @bg_color, 0.3); - text-shadow: 0 1px shade(@bg_color, 1.1); -} - -.titlebar:backdrop { - background-image: linear-gradient(to bottom, - shade(@bg_color, 1.12), - shade(@bg_color, 0.98) - ); -} - -.titlebar .title:backdrop { - color: mix(@fg_color, @bg_color, 0.6); - text-shadow: 0 1px shade(@bg_color, 1.05); -} - -.titlebar .button:backdrop { - color: mix(@fg_color, @bg_color, 0.6); -} - -.titlebar .titlebutton { - padding: 4px; - border-style: none; - background: none; - color: mix(@fg_color, @bg_color, 0.3); - -gtk-icon-shadow: 0 1px shade(@bg_color, 1.1); - box-shadow: none; -} - -.titlebar .titlebutton:hover, -.titlebar .titlebutton:hover:focus { - background: none; - color: @fg_color; - box-shadow: none; -} - -.titlebar .titlebutton:active, -.titlebar .titlebutton:checked, -.titlebar .titlebutton:active:hover, -.titlebar .titlebutton:checked:hover { - background: none; - color: @selected_bg_color; - box-shadow: none; -} - -.titlebar .titlebutton:backdrop { - background-image: none; - color: mix(@fg_color, @bg_color, 0.6); - -gtk-icon-shadow: 0 1px shade(@bg_color, 1.05); -} - -.window-frame, -.window-frame:backdrop { - border-style: none; + border-radius: 0; } + .ssd decoration { border-radius: 6px 6px 0 0; - box-shadow: 0 6px 22px alpha(black, 0.47), - 0 0 0 1px alpha(black, 0.3); - - /* this is used for the resize cursor area */ - margin: 10px; -} - -.window-frame.tiled { - border-radius: 0; -} - -.window-frame.csd.popup { - border-style: none; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5); } + .ssd decoration.maximized { + border-radius: 0; } + .csd.popup decoration { + border-radius: 2px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1); } + tooltip.csd decoration { + border-radius: 2px; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1); } + messagedialog.csd decoration { + border-radius: 3px; } + .solid-csd decoration { border-radius: 0; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -} + margin: 1px; + background-color: #e7e8eb; + box-shadow: none; } -.window-frame.csd.tooltip { - border-radius: 4px; - box-shadow: none; -} -.window-frame.solid-csd { - border: solid 1px shade(@bg_color, 0.5); - border-radius: 0; - margin: 2px; - background-color: @bg_color; - box-shadow: none; -} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-main.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-main.css index 1fbf28d..7341456 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-main.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-main.css @@ -75,6 +75,7 @@ @import url("apps/gnome-terminal.css"); @import url("apps/software-center.css"); @import url("apps/calendar.css"); +@import url("apps/libreoffice.css"); @import url("public-colors.css"); @import url("gtk-lubuntu.css"); diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets-radiance.css index b3e819d..da9add7 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets-radiance.css @@ -1,23 +1,29 @@ menu check { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } menu radio { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } menu check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } menu check:checked:disabled { - -gtk-icon-source: url("assets/check-menuitem-insensitive-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive-dark.png"), + url("assets/check-menuitem-insensitive-dark@2.png")); } menu radio:checked { - -gtk-icon-source: url("assets/radio-menuitem-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-dark.png"), + url("assets/radio-menuitem-dark@2.png")); } menu radio:checked:disabled { - -gtk-icon-source: url("assets/radio-menuitem-insensitive-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive-dark.png"), + url("assets/radio-menuitem-insensitive-dark@2.png")); } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets.css index 6335468..8788f23 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-assets.css @@ -13,27 +13,32 @@ /* draw regular check and radio items using our SVG assets */ check { - -gtk-icon-source: url("assets/check-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected.png"), + url("assets/check-unselected@2.png")); } check:hover { - -gtk-icon-source: url("assets/check-unselected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-hover.png"), + url("assets/check-unselected-hover@2.png")); } check row, check row:selected, check row:selected:focus { - -gtk-icon-source: url("assets/check-unselected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-alt.png"), + url("assets/check-unselected-alt@2.png")); } check row:hover, check row:selected:hover, check row:selected:focus:hover { - -gtk-icon-source: url("assets/check-unselected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-hover-alt.png"), + url("assets/check-unselected-hover-alt@2.png")); } check:disabled { - -gtk-icon-source: url("assets/check-unselected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-disabled.png"), + url("assets/check-unselected-disabled@2.png")); } check row:disabled { @@ -44,169 +49,205 @@ check row:disabled, check row:selected:disabled, check row:selected:focus:disabled { background-color: transparent; - -gtk-icon-source: url("assets/check-unselected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-unselected-disabled-alt.png"), + url("assets/check-unselected-disabled-alt@2.png")); } check:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected.png"), + url("assets/backdrop-check-unselected@2.png")); } check:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-hover.png"), + url("assets/backdrop-check-unselected-hover@2.png")); } check row:backdrop, check row:selected:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-alt.png"), + url("assets/backdrop-check-unselected-alt@2.png")); } check row:hover:backdrop, check row:selected:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-hover-alt.png"), + url("assets/backdrop-check-unselected-hover-alt@2.png")); } check:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-disabled.png"), + url("assets/backdrop-check-unselected-disabled@2.png")); } check row:selected:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-unselected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-unselected-disabled-alt.png"), + url("assets/backdrop-check-unselected-disabled-alt@2.png")); } check:checked { - -gtk-icon-source: url("assets/check-selected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected.png"), + url("assets/check-selected@2.png")); } check:checked:hover { - -gtk-icon-source: url("assets/check-selected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-hover.png"), + url("assets/check-selected-hover@2.png")); } check row:checked, check row:selected:checked, check row:selected:focus:checked { - -gtk-icon-source: url("assets/check-selected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-alt.png"), + url("assets/check-selected-alt@2.png")); } check row:checked:hover, check row:selected:checked:hover, check row:selected:checked:focus:hover { - -gtk-icon-source: url("assets/check-selected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-hover-alt.png"), + url("assets/check-selected-hover-alt@2.png")); } check:checked:disabled { - -gtk-icon-source: url("assets/check-selected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-disabled.png"), + url("assets/check-selected-disabled@2.png")); } check row:checked:disabled, check row:selected:checked:disabled, check row:selected:focus:checked:disabled { - -gtk-icon-source: url("assets/check-selected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-selected-disabled-alt.png"), + url("assets/check-selected-disabled-alt@2.png")); } check:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected.png"), + url("assets/backdrop-check-selected@2.png")); } check:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-hover.png"), + url("assets/backdrop-check-selected-hover@2.png")); } check row:checked:backdrop, check row:selected:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-alt.png"), + url("assets/backdrop-check-selected-alt@2.png")); } check row:checked:hover:backdrop, check row:selected:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-hover-alt.png"), + url("assets/backdrop-check-selected-hover-alt@2.png")); } check:checked:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-disabled.png"), + url("assets/backdrop-check-selected-disabled@2.png")); } check row:selected:checked:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-selected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-selected-disabled-alt.png"), + url("assets/backdrop-check-selected-disabled-alt@2.png")); } check:indeterminate { - -gtk-icon-source: url("assets/check-mixed.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed.png"), + url("assets/check-mixed@2.png")); } check:indeterminate:hover { - -gtk-icon-source: url("assets/check-mixed-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-hover.png"), + url("assets/check-mixed-hover@2.png")); } check row:indeterminate, check row:selected:indeterminate, check row:selected:focus:indeterminate { - -gtk-icon-source: url("assets/check-mixed-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-alt.png"), + url("assets/check-mixed-alt@2.png")); } check row:indeterminate:hover, check row:selected:indeterminate:hover, check row:selected:focus:indeterminate:hover { - -gtk-icon-source: url("assets/check-mixed-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-hover-alt.png"), + url("assets/check-mixed-hover-alt@2.png")); } check:indeterminate:disabled { - -gtk-icon-source: url("assets/check-mixed-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-disabled.png"), + url("assets/check-mixed-disabled@2.png")); } check row:indeterminate:disabled, check row:selected:indeterminate:disabled, check row:selected:focus:indeterminate:disabled { - -gtk-icon-source: url("assets/check-mixed-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-mixed-disabled-alt.png"), + url("assets/check-mixed-disabled-alt@2.png")); } check:indeterminate:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed.png"), + url("assets/backdrop-check-mixed@2.png")); } check:indeterminate:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-hover.png"), + url("assets/backdrop-check-mixed-hover@2.png")); } check row:indeterminate:backdrop, check row:selected:indeterminate:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-alt.png"), + url("assets/backdrop-check-mixed-alt@2.png")); } check row:indeterminate:hover:backdrop, check row:selected:indeterminate:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-hover-alt.png"), + url("assets/backdrop-check-mixed-hover-alt@2.png")); } check:indeterminate:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-disabled.png"), + url("assets/backdrop-check-mixed-disabled@2.png")); } check row:selected:indeterminate:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-check-mixed-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-check-mixed-disabled-alt.png"), + url("assets/backdrop-check-mixed-disabled-alt@2.png")); } radio { - -gtk-icon-source: url("assets/radio-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected.png"), + url("assets/radio-unselected@2.png")); } radio:hover { - -gtk-icon-source: url("assets/radio-unselected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-hover.png"), + url("assets/radio-unselected-hover@2.png")); } radio row, radio row:selected, radio row:selected:focus { - -gtk-icon-source: url("assets/radio-unselected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-alt.png"), + url("assets/radio-unselected-alt@2.png")); } radio row:hover, radio row:selected:hover, radio row:selected:focus:hover { - -gtk-icon-source: url("assets/radio-unselected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-hover-alt.png"), + url("assets/radio-unselected-hover-alt@2.png")); } radio:disabled { - -gtk-icon-source: url("assets/radio-unselected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-disabled.png"), + url("assets/radio-unselected-disabled@2.png")); } radio row:disabled { @@ -216,145 +257,176 @@ radio row:disabled { radio row:disabled, radio row:selected:disabled, radio row:selected:focus:disabled { - -gtk-icon-source: url("assets/radio-unselected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-unselected-disabled-alt.png"), + url("assets/radio-unselected-disabled-alt@2.png")); } radio:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected.png"), + url("assets/backdrop-radio-unselected@2.png")); } radio:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-hover.png"), + url("assets/backdrop-radio-unselected-hover@2.png")); } radio row:backdrop, radio row:selected:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-alt.png"), + url("assets/backdrop-radio-unselected-alt@2.png")); } radio row:hover:backdrop, radio row:selected:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-hover-alt.png"), + url("assets/backdrop-radio-unselected-hover-alt@2.png")); } radio:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-disabled.png"), + url("assets/backdrop-radio-unselected-disabled@2.png")); } radio row:selected:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-unselected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-unselected-disabled-alt.png"), + url("assets/backdrop-radio-unselected-disabled-alt@2.png")); } radio:checked { - -gtk-icon-source: url("assets/radio-selected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected.png"), + url("assets/radio-selected@2.png")); } radio:checked:hover { - -gtk-icon-source: url("assets/radio-selected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-hover.png"), + url("assets/radio-selected-hover@2.png")); } radio row:checked, radio row:selected:checked, radio row:selected:focus:checked { - -gtk-icon-source: url("assets/radio-selected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-alt.png"), + url("assets/radio-selected-alt@2.png")); } radio row:checked:hover, radio row:selected:checked:hover, radio row:selected:focus:checked:hover { - -gtk-icon-source: url("assets/radio-selected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-hover-alt.png"), + url("assets/radio-selected-hover-alt@2.png")); } radio:checked:disabled { - -gtk-icon-source: url("assets/radio-selected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-disabled.png"), + url("assets/radio-selected-disabled@2.png")); } radio row:disabled, radio row:selected:checked:disabled, radio row:selected:focus:checked:disabled { - -gtk-icon-source: url("assets/radio-selected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-selected-disabled-alt.png"), + url("assets/radio-selected-disabled-alt@2.png")); } radio:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected.png"), + url("assets/backdrop-radio-selected@2.png")); } radio:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-hover.png"), + url("assets/backdrop-radio-selected-hover@2.png")); } radio row:checked:backdrop, radio row:selected:checked:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-alt.png"), + url("assets/backdrop-radio-selected-alt@2.png")); } radio row:checked:hover:backdrop, radio row:selected:checked:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-hover-alt.png"), + url("assets/backdrop-radio-selected-hover-alt@2.png")); } radio:checked:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-disabled.png"), + url("assets/backdrop-radio-selected-disabled@2.png")); } radio row:selected:checked:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-selected-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-selected-disabled-alt.png"), + url("assets/backdrop-radio-selected-disabled-alt@2.png")); } radio:indeterminate { - -gtk-icon-source: url("assets/radio-mixed.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), + url("assets/radio-mixed@2.png")); } radio:indeterminate:hover { - -gtk-icon-source: url("assets/radio-mixed-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), + url("assets/radio-mixed-hover@2.png")); } radio row:indeterminate, radio row:selected:indeterminate, radio row:selected:focus:indeterminate { - -gtk-icon-source: url("assets/radio-mixed-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-alt.png"), + url("assets/radio-mixed-alt@2.png")); } radio row:indeterminate:hover, radio row:selected:indeterminate:hover, radio row:selected:focus:indeterminate:hover { - -gtk-icon-source: url("assets/radio-mixed-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover-alt.png"), + url("assets/radio-mixed-hover-alt@2.png")); } radio:indeterminate:disabled { - -gtk-icon-source: url("assets/radio-mixed-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled.png"), + url("assets/radio-mixed-disabled@2.png")); } radio row:indeterminate:disabled, radio row:selected:indeterminate:disabled, radio row:selected:focus:indeterminate:disabled { - -gtk-icon-source: url("assets/radio-mixed-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-disabled-alt.png"), + url("assets/radio-mixed-disabled-alt@2.png")); } radio:indeterminate:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed.png"), + url("assets/backdrop-radio-mixed@2.png")); } radio:indeterminate:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-hover.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-hover.png"), + url("assets/backdrop-radio-mixed-hover@2.png")); } radio row:indeterminate:backdrop, radio row:selected:indeterminate:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-alt.png"), + url("assets/backdrop-radio-mixed-alt.png")); } radio row:indeterminate:hover:backdrop, radio row:selected:indeterminate:hover:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-hover-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-hover-alt.png"), + url("assets/backdrop-radio-mixed-hover-alt@2.png")); } radio:indeterminate:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-disabled.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-disabled.png"), + url("assets/backdrop-radio-mixed-disabled@2.png")); } radio row:selected:indeterminate:disabled:backdrop { - -gtk-icon-source: url("assets/backdrop-radio-mixed-disabled-alt.png"); + -gtk-icon-source: -gtk-scaled(url("assets/backdrop-radio-mixed-disabled-alt.png"), + url("assets/backdrop-radio-mixed-disabled-alt@2.png")); } .primary-toolbar menu check, @@ -364,7 +436,8 @@ menu check, menu check:hover, menu check:disabled:not(:checked), menu check:indeterminate:not(:checked) { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } .primary-toolbar menu radio, @@ -374,19 +447,22 @@ menu radio, menu radio:hover, menu radio:disabled:not(:checked), menu radio:indeterminate:not(:checked) { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } .primary-toolbar menu check:checked, menubar toolbar menu check:checked, headerbar menu check:checked, menu check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } toolbar menu check:checked:hover, menu check:checked:hover { - -gtk-icon-source: url("assets/check-menuitem.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem.png"), + url("assets/check-menuitem@2.png")); } .primary-toolbar menu check:checked:disabled, @@ -395,7 +471,8 @@ headerbar menu check:checked:disabled, toolbar menu check:checked:hover:disabled, menu check:checked:disabled, menu check:checked:hover:disabled { - -gtk-icon-source: url("assets/check-menuitem-insensitive.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive.png"), + url("assets/check-menuitem-insensitive@2.png")); } .primary-toolbar menu radio:checked, @@ -404,7 +481,8 @@ headerbar menu radio:checked, toolbar menu radio:checked:hover, menu radio:checked, menu radio:checked:hover { - -gtk-icon-source: url("assets/radio-menuitem.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem.png"), + url("assets/radio-menuitem@2.png")); } .primary-toolbar menu radio:checked:disabled, @@ -413,31 +491,38 @@ headerbar menu radio:checked:disabled, toolbar menu radio:checked:hover:disabled, menu radio:checked:disabled, menu radio:checked:hover:disabled { - -gtk-icon-source: url("assets/radio-menuitem-insensitive.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive.png"), + url("assets/radio-menuitem-insensitive@2.png")); } toolbar menu check { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } toolbar menu radio { - -gtk-icon-source: url("assets/check-menuitem-unselected.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-unselected.png"), + url("assets/check-menuitem-unselected@2.png")); } toolbar menu check:checked { - -gtk-icon-source: url("assets/check-menuitem-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-dark.png"), + url("assets/check-menuitem-dark@2.png")); } toolbar menu check:checked:disabled { - -gtk-icon-source: url("assets/check-menuitem-insensitive-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/check-menuitem-insensitive-dark.png"), + url("assets/check-menuitem-insensitive-dark@2.png")); } toolbar menu radio:checked { - -gtk-icon-source: url("assets/radio-menuitem-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-dark.png"), + url("assets/radio-menuitem-dark@2.png")); } toolbar menu radio:checked:disabled { - -gtk-icon-source: url("assets/radio-menuitem-insensitive-dark.png"); + -gtk-icon-source: -gtk-scaled(url("assets/radio-menuitem-insensitive-dark.png"), + url("assets/radio-menuitem-insensitive-dark@2.png")); } /********************* @@ -445,7 +530,8 @@ toolbar menu radio:checked:disabled { *********************/ scale slider, scale.horizontal contents:only-child trough slider { - background-image: url("assets/slider-horizontal.png"); + background-image: -gtk-scaled(url("assets/slider-horizontal.png"), + url("assets/slider-horizontal@2.png")); background-repeat: no-repeat; } @@ -456,23 +542,27 @@ scale.horizontal:backdrop slider { scale slider:hover, scale.horizontal slider:hover { - background-image: url("assets/slider-horizontal-hover.png"); + background-image: -gtk-scaled(url("assets/slider-horizontal-hover.png"), + url("assets/slider-horizontal-hover@2.png")); background-repeat: no-repeat; } scale slider:focus, scale.horizontal slider:focus { - background-image: url("assets/slider-horizontal-focused.png"); + background-image: -gtk-scaled(url("assets/slider-horizontal-focused.png"), + url("assets/slider-horizontal-focused@2.png")); } scale slider:hover:focus, scale.horizontal slider:hover:focus { - background-image: url("assets/slider-horizontal-focused-hover.png"); + background-image: -gtk-scaled(url("assets/slider-horizontal-focused-hover.png"), + url("assets/slider-horizontal-focused-hover@2.png")); } scale:disabled slider, scale.horizontal:disabled slider { - background-image: url("assets/slider-horizontal-disabled.png"); + background-image: -gtk-scaled(url("assets/slider-horizontal-disabled.png"), + url("assets/slider-horizontal-disabled@2.png")); } scale slider:disabled:backdrop, @@ -481,7 +571,8 @@ scale.horizontal slider:disabled:backdrop { } scale.vertical slider { - background-image: url("assets/slider-vertical.png"); + background-image: -gtk-scaled(url("assets/slider-vertical.png"), + url("assets/slider-vertical@2.png")); } scale:backdrop.vertical slider { @@ -489,19 +580,23 @@ scale:backdrop.vertical slider { } scale.vertical slider:hover { - background-image: url("assets/slider-vertical-hover.png"); + background-image: -gtk-scaled(url("assets/slider-vertical-hover.png"), + url("assets/slider-vertical-hover@2.png")); } scale.vertical slider:focus { - background-image: url("assets/slider-vertical-focused.png"); + background-image: -gtk-scaled(url("assets/slider-vertical-focused.png"), + url("assets/slider-vertical-focused@2.png")); } scale.vertical slider:hover:focus { - background-image: url("assets/slider-vertical-focused-hover.png"); + background-image: -gtk-scaled(url("assets/slider-vertical-focused-hover.png"), + url("assets/slider-vertical-focused-hover@2.png")); } scale:disabled.vertical slider { - background-image: url("assets/slider-vertical-disabled.png"); + background-image: -gtk-scaled(url("assets/slider-vertical-disabled.png"), + url("assets/slider-vertical-disabled@2.png")); } scale:disabled:backdrop.vertical slider { diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders-radiance.css index 6fb781f..2bd55df 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders-radiance.css @@ -1,13 +1,13 @@ .primary-toolbar .entry, menubar toolbar entry, headerbar entry { - border-image: url("assets/radiance-entry-toolbar.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/radiance-entry-toolbar.png"),url("assets/radiance-entry-toolbar@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } primary-toolbar entry:focus, menubar toolbar entry:focus, headerbar entry:focus { - border-image: url("assets/radiance-entry-toolbar-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/radiance-entry-toolbar-focused.png"),url("assets/radiance-entry-toolbar-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } .primary-toolbar combobox entry button, diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders.css index 03a833c..52dc2e2 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-borders.css @@ -1,4 +1,10 @@ /* Borders */ +menubar menuitem, +.menubar.menuitem { + border: 1px solid transparent; + border-bottom-width: 0px; +} + menubar menuitem:hover, .menubar.menuitem:hover { border: 1px solid #2e2e2c; @@ -19,27 +25,27 @@ entry { spinbutton, entry { - border-image: url("assets/entry.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/entry.png"),url("assets/entry@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } spinbutton:backdrop, entry:backdrop { - border-image: url("assets/backdrop-entry.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/backdrop-entry.png"),url("assets/backdrop-entry@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } spinbutton:focus, entry:focus { - border-image: url("assets/entry-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/entry-focused.png"),url("assets/entry-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } spinbutton:disabled, entry:disabled { - border-image: url("assets/entry-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/entry-disabled.png"),url("assets/entry-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } spinbutton:disabled:backdrop, entry:disabled:backdrop { - border-image: url("assets/backdrop-entry-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/backdrop-entry-disabled.png"),url("assets/backdrop-entry-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } spinbutton entry, @@ -54,13 +60,13 @@ spinbutton entry:backdrop { .primary-toolbar entry, menubar toolbar entry, headerbar entry { - border-image: url("assets/entry-toolbar.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/entry-toolbar.png"),url("assets/entry-toolbar@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } .primary-toolbar entry:focus, menubar toolbar entry:focus, headerbar entry:focus { - border-image: url("assets/entry-toolbar-focused.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/entry-toolbar-focused.png"),url("assets/entry-toolbar-focused@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } .primary-toolbar entry progress, @@ -88,27 +94,27 @@ combobox entry button:last-child { } combobox entry button { - border-image: url("assets/combobox-button.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/combobox-button.png"),url("assets/combobox-button@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } combobox entry button:backdrop { - border-image: url("assets/backdrop-combobox-button.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/backdrop-combobox-button.png"),url("assets/backdrop-combobox-button@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } combobox entry button:focus { - border-image: url("assets/combobox-button-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/combobox-button-focused.png"),url("assets/combobox-button-focused@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } combobox entry button:disabled { - border-image: url("assets/combobox-button-disabled.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/combobox-button-disabled.png"),url("assets/combobox-button-disabled@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } combobox entry button:disabled:backdrop { - border-image: url("assets/backdrop-combobox-button-disabled.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/backdrop-combobox-button-disabled.png"),url("assets/backdrop-combobox-button-disabled@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } combobox entry button:active:focus { - border-image: url("assets/combobox-button-pressed-focused.png") 10 12 10 1 / 10px 12px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/combobox-button-pressed-focused.png"),url("assets/combobox-button-pressed-focused@2.png")) 10 12 10 1 / 10px 12px 10px 1px stretch; } .primary-toolbar combobox entry button, @@ -155,19 +161,19 @@ headerbar combobox entry button:last-child { } notebook header.top tab:checked { - border-image: url("assets/notebook-tab-top.png") 8 10 1 10 / 8px 10px 1px 10px stretch; + border-image: -gtk-scaled(url("assets/notebook-tab-top.png"),url("assets/notebook-tab-top@2.png")) 8 10 1 10 / 8px 10px 1px 10px stretch; } notebook header.right tab:checked { - border-image: url("assets/notebook-tab-right.png") 10 8 10 1 / 10px 8px 10px 1px stretch; + border-image: -gtk-scaled(url("assets/notebook-tab-right.png"),url("assets/notebook-tab-right@2.png")) 10 8 10 1 / 10px 8px 10px 1px stretch; } notebook header.bottom tab:checked { - border-image: url("assets/notebook-tab-bottom.png") 1 10 8 10 / 1px 10px 8px 10px stretch; + border-image: -gtk-scaled(url("assets/notebook-tab-bottom.png"),url("assets/notebook-tab-bottom@2.png")) 1 10 8 10 / 1px 10px 8px 10px stretch; } notebook header.left tab:checked { - border-image: url("assets/notebook-tab-left.png") 10 1 10 8 / 10px 1px 10px 8px stretch; + border-image: -gtk-scaled(url("assets/notebook-tab-left.png"),url("assets/notebook-tab-left@2.png")) 10 1 10 8 / 10px 1px 10px 8px stretch; } .trough, @@ -181,27 +187,27 @@ trough.highlight { .trough, trough { - border-image: url("assets/progressbar-horizontal-trough.png") 6 7 6 7 / 6px 7px 6px 7px stretch; + border-image: -gtk-scaled(url("assets/progressbar-horizontal-trough.png"),url("assets/progressbar-horizontal-trough@2.png")) 6 7 6 7 / 6px 7px 6px 7px stretch; } switch { - border-image: url("assets/switch-trough-off.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/switch-trough-off.png"),url("assets/switch-trough-off@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } switch:checked { - border-image: url("assets/switch-trough-on.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/switch-trough-on.png"),url("assets/switch-trough-on@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } .primary-toolbar switch, menubar toolbar switch, headerbar switch { - border-image: url("assets/switch-trough-toolbar-off.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/switch-trough-toolbar-off.png"),url("assets/switch-trough-toolbar-off@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } .primary-toolbar switch:checked, menubar toolbar switch:checked, headerbar switch:checked { - border-image: url("assets/switch-trough-toolbar-on.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/switch-trough-toolbar-on.png"),url("assets/switch-trough-toolbar-on@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } /* XXX temporary */ @@ -209,27 +215,27 @@ switch:backdrop, switch:checked:backdrop, switch:disabled, switch:checked:disabled { - border-image: url("assets/switch-trough-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; + border-image: -gtk-scaled(url("assets/switch-trough-disabled.png"),url("assets/switch-trough-disabled@2.png")) 10 12 10 12 / 10px 12px 10px 12px stretch; } switch slider { - border-image: url("assets/switch-button-off.png") 9 11 9 11 / 9px 11px 9px 11px stretch; + border-image: -gtk-scaled(url("assets/switch-button-off.png"),url("assets/switch-button-off@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } switch:checked slider { - border-image: url("assets/switch-button-on.png") 9 11 9 11 / 9px 11px 9px 11px stretch; + border-image: -gtk-scaled(url("assets/switch-button-on.png"),url("assets/switch-button-on@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } /* XXX temporary */ switch:backdrop slider, switch:disabled slider { - border-image: url("assets/switch-button-off-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch; + border-image: -gtk-scaled(url("assets/switch-button-off-disabled.png"),url("assets/switch-button-off-disabled@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } /* XXX temporary */ switch:active:backdrop slider, switch:active:disabled slider { - border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch; + border-image: -gtk-scaled(url("assets/switch-button-on-disabled.png"),url("assets/switch-button-on-disabled@2.png")) 9 11 9 11 / 9px 11px 9px 11px stretch; } /* @@ -263,50 +269,50 @@ progressbar.vertical:backdrop trough progress { */ scale trough { - border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-trough.png"),url("assets/scale-horizontal-trough@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale:disabled trough { - border-image: url("assets/scale-horizontal-trough-disabled.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-trough-disabled.png"),url("assets/scale-horizontal-trough-disabled@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale:backdrop trough { - border-image: url("assets/scale-horizontal-trough-backdrop.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-trough-backdrop.png"),url("assets/scale-horizontal-trough-backdrop@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale.vertical trough { - border-image: url("assets/scale-vertical-trough.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-trough.png"),url("assets/scale-vertical-trough@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } scale.vertical:disabled trough { - border-image: url("assets/scale-vertical-trough-disabled.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-trough-disabled.png"),url("assets/scale-vertical-trough-disabled@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } scale trough.highlight.left { - border-image: url("assets/scale-horizontal-fill.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-fill.png"),url("assets/scale-horizontal-fill@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale.vertical:backdrop trough { - border-image: url("assets/scale-vertical-trough-backdrop.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-trough-backdrop.png"),url("assets/scale-vertical-trough-backdrop@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } scale:backdrop trough.highlight.left { - border-image: url("assets/scale-horizontal-fill-disabled.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-fill-disabled.png"),url("assets/scale-horizontal-fill-disabled@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale:backdrop trough.highlight.left { - border-image: url("assets/scale-horizontal-fill-backdrop.png") 2 6 2 6 / 2px 6px 2px 6px stretch; + border-image: -gtk-scaled(url("assets/scale-horizontal-fill-backdrop.png"),url("assets/scale-horizontal-fill-backdrop@2.png")) 2 6 2 6 / 2px 6px 2px 6px stretch; } scale.vertical trough.highlight.bottom { - border-image: url("assets/scale.vertical-vertical-fill.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-fill.png"),url("assets/scale-vertical-fill@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } scale.vertical:disabled trough.highlight.bottom { - border-image: url("assets/scale.vertical-vertical-fill-disabled.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-fill-disabled.png"),url("assets/scale-vertical-fill-disabled@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } scale.vertical:backdrop trough.highlight.bottom { - border-image: url("assets/scale-vertical-fill-backdrop.png") 6 2 6 2 / 6px 2px 6px 2px stretch; + border-image: -gtk-scaled(url("assets/scale-vertical-fill-backdrop.png"),url("assets/scale-vertical-fill-backdrop@2.png")) 6 2 6 2 / 6px 2px 6px 2px stretch; } diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-radiance.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-radiance.css index bea4527..158c985 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-radiance.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets-radiance.css @@ -70,9 +70,7 @@ menu spinner:hover { } /* primary-toolbar */ -.primary-toolbar, -headerbar, -.maximized headerbar.titlebar:not(:backdrop) { +.primary-toolbar { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 0.96)), to (shade (@dark_bg_color, 1.1))); @@ -104,7 +102,3 @@ headerbar button:disabled { from (shade (@dark_bg_color, 1.03)), to (shade (@dark_bg_color, 0.96))); } - -.titlebar { - border-top-width: 0px; -} diff --git a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets.css b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets.css index aabb6b6..65a9ed5 100644 --- a/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets.css +++ b/src/usr/share/themes/Lubuntu-default/gtk-3.20/gtk-widgets.css @@ -20,7 +20,7 @@ assistant .sidebar .highlight { color: @fg_color; - font: bold; + font-weight: bold; } assistant .sidebar { @@ -69,7 +69,8 @@ button.flat { button:backdrop { background-image: none; background-color: @bg_color; - border-image-source: url("assets/backdrop-button.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button.png"), + url("assets/backdrop-button@2.png")); color: @backdrop_fg_color; text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2); @@ -80,7 +81,8 @@ button.flat:backdrop { } button:focus { - border-image-source: url("assets/button-focused.png"); + border-image-source: -gtk-scaled(url("assets/button-focused.png"), + url("assets/button-focused.png@2")); } button:hover { @@ -88,16 +90,19 @@ button:hover { from (shade (@button_bg_color, 1.12)), color-stop (0.5, @button_bg_color), to (shade (@button_bg_color, 0.96))); - border-image-source: url("assets/button-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-hover.png"), + url("assets/button-hover@2.png")); } button:hover:backdrop { background-color: shade (@bg_color, 1.04); - border-image-source: url("assets/backdrop-button-hover.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-hover.png"), + url("assets/backdrop-button-hover@2.png")); } button:hover:focus { - border-image-source: url("assets/button-focused-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-focused-hover.png"), + url("assets/button-focused-hover@2.png")); } @@ -106,14 +111,16 @@ button:disabled { background-color: mix (#ebebeb, @bg_color, 0.5); text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.4); - border-image-source: url("assets/button-disabled.png"); + border-image-source: -gtk-scaled(url("assets/button-disabled.png"), + url("assets/button-disabled@2.png")); } button:disabled:backdrop { background-color: #ebebeb; text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2); - border-image-source: url("assets/backdrop-button-disabled.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-disabled.png"), + url("assets/backdrop-button-disabled@2.png")); } button.flat:disabled, @@ -126,22 +133,26 @@ button:checked { background-image: -gtk-gradient (linear, left top, left bottom, from (#cecece), to (#e8e8e8)); - border-image-source: url("assets/button-active.png"); + border-image-source: -gtk-scaled(url("assets/button-active.png"), + url("assets/button-active@2.png")); } button:checked:focus { - border-image-source: url("assets/button-active-focused.png"); + border-image-source: -gtk-scaled(url("assets/button-active-focused.png"), + url("assets/button-active-focused@2.png")); } button:active { background-image: -gtk-gradient (linear, left top, left bottom, from (#dcdcdc), to (#f3f3f3)); - border-image-source: url("assets/button-active-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-active-hover.png"), + url("assets/button-active-hover@2.png")); } button:active:focus { - border-image-source: url("assets/button-active-focused-hover.png"); + border-image-source: -gtk-scaled(url("assets/button-active-focused-hover.png"), + url("assets/button-active-focused-hover@2.png")); } button:checked:disabled, @@ -149,22 +160,26 @@ button:active:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (#e3e3e3), to (#f3f3f3)); - border-image-source: url("assets/button-active-disabled.png"); + border-image-source: -gtk-scaled(url("assets/button-active-disabled.png"), + url("assets/button-active-disabled@2.png")); } button:checked:backdrop { - border-image-source: url("assets/backdrop-button-active.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-active.png"), + url("assets/backdrop-button-active@2.png")); } button:active:backdrop { - border-image-source: url("assets/backdrop-button-active-hover.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-active-hover.png"), + url("assets/backdrop-button-active-hover@2.png")); } button:checked:disabled:backdrop { background-image: -gtk-gradient (linear, left top, left bottom, from (mix (#e3e3e3, @bg_color, 0.5)), to (mix (#f3f3f3, @bg_color, 0.5))); - border-image-source: url("assets/backdrop-button-active-disabled.png"); + border-image-source: -gtk-scaled(url("assets/backdrop-button-active-disabled.png"), + url("assets/backdrop-button-active-disabled@2.png")); } /* @@ -267,7 +282,7 @@ headerbar .linked button:only-child { } button separator { - color: shade(@bg_color, 1.30); + color: shade(@bg_color, 1.30); } /* actionbar */ @@ -495,6 +510,8 @@ entry { padding: 5px 7px; color: @text_color; + + text-shadow: none; } entry.flat, entry.flat:focus { @@ -532,6 +549,14 @@ entry:disabled:backdrop { color: mix (@text_color, @base_color, 0.4); } +entry > image.left { + padding-right: 5px; +} + +entry > image.right { + padding-left: 5px; +} + .primary-toolbar entry progress, headerbar entry progress { background-image: -gtk-gradient (linear, left top, left bottom, @@ -621,17 +646,6 @@ frame > box.vertical > scrolledwindow.frame { border-width: 1px 0px 1px 0px; } - -/**************** - * window-frame * - ****************/ - -.csd.popup { - border-style: none; - border-radius: 0; - box-shadow: 0 3px 8px @shadow_color; -} - /************ * iconview * ************/ @@ -783,6 +797,7 @@ combobox menu { background-color: @bg_color; border-bottom-color: shade (@bg_color, 0.66); border-right-color: shade (@bg_color, 0.7); + border-left-color: shade (@bg_color, 0.7); border-top-color: shade (@bg_color, 0.8); border-style: solid; padding: 0; @@ -812,7 +827,13 @@ menu button } .context-menu { - font: regular medium; + font-size: medium; + font-weight: normal; +} + +.background.popup.csd { + /* Delete menus background, we don't need border-radious here */ + background-color: transparent; } /*********** @@ -1244,14 +1265,16 @@ trough.vertical { /* level bars as used for password quality or remaining power */ -levelbar { - min-width: 34px; +levelbar, +levelbar trough { + min-width: 150px; min-height: 5px; } -levelbar.vertical { +levelbar.vertical, +levelbar.vertical trough { min-width: 5px; - min-height: 34px; + min-height: 150px; } levelbar trough { @@ -1923,12 +1946,8 @@ textview { background-color: @base_color; } -headerbar { - padding: 2px 6px; -} - /* - * Header Bars + * Header Bars and decorations * * The following rules only style header bars when they are used as a window's * titlebar widget (i.e., they have .titlebar set as well). @@ -1937,44 +1956,147 @@ headerbar { * that prefer showing traditional title bars. The rules for those are further * down grouped with normal toolbars. */ -.titlebar { - background-image: -gtk-gradient (linear, left top, left bottom, - from (shade (@dark_bg_color, 1.5)), - to (@dark_bg_color)); - border-color: shade (@dark_bg_color, 1.5); - border-style: solid; - border-width: 1px 0 0 0; - border-radius: 7px 7px 0 0; +decoration { + margin: 10px; + border-radius: 6px 6px 0 0; + box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85); +} - color: @dark_fg_color; +decoration:backdrop, +tooltip.csd decoration, +.popup decoration { + box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */ + 1px 5px 8px @inactive_shadow_color; + transition: 100ms ease-out; } -.titlebar .title { - font: bold; +.ssd decoration { + box-shadow: none; } -.titlebar .subtitle { - font-size: smaller; - opacity: 0.5; +popover { +/* FIXME: we can't reuse the default shadow definition as increasing marging + * would break the tip + */ + margin: 13px; + box-shadow: 1px 3px 6px @inactive_shadow_color; } -.titlebar:backdrop { - color: @backdrop_fg_color; +popover:backdrop, +popover.background:backdrop { + box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5); +} + +tooltip decoration { + background-color: transparent; background-image: none; - background-color: @dark_bg_color; - border-top-color: @dark_bg_color; - box-shadow: inset 0 1px shade (@dark_bg_color, 1.2); } -.maximized .titlebar { +.maximized decoration, +.fullscreen decoration, +.unity-csd decoration { + margin: 0; border-radius: 0; - border: none; + box-shadow: none; +} + +.tiled decoration { + border-radius: 0; +} + +.default-decoration.titlebar:not(headerbar), +messagedialog.csd .titlebar:not(headerbar), +messagedialog.solid-csd .titlebar:not(headerbar), +headerbar.default-decoration { + min-height: 26px; } -.maximized .titlebar.toolbar-mode { +.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), +.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), +.solid-csd .titlebar:dir(rtl):not(headerbar), +.solid-csd .titlebar:dir(ltr):not(headerbar), +.solid-csd headerbar:backdrop:dir(rtl), +.solid-csd headerbar:backdrop:dir(ltr), +.solid-csd headerbar, +.solid-csd headerbar:dir(ltr) { + margin-left: 0; + margin-right: 0; + margin-top: 0; + border-radius: 0; box-shadow: none; } +.solid-csd decoration { + margin: 0; + box-shadow: none; + border-width: 2px; + border-style: solid; + border-color: shade (@dark_bg_color, 0.85); + border-radius: 0; +} + +.solid-csd:backdrop decoration { + border-color: @dark_bg_color +} + +.titlebar, +UnityDecoration .top { + border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */ + border-radius: 6px 6px 0 0; + padding: 1px 6px 1px 6px; + + box-shadow: inset 0 0 transparent, inset 0 0 transparent, + inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent; + + background-color: transparent; + background-clip: border-box; + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (#edebe6, 1.06)), + to (@dark_bg_color)); + + color: shade (@dark_bg_color, 0.4); + text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06), + 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06); +} + +.titlebar:backdrop, +UnityDecoration .top:backdrop { + border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */ + background-color: transparent; + background-clip: border-box; + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (#edebe6, 0.96)), + to (@dark_bg_color)); + box-shadow: inset 0 0 transparent, inset 0 0 transparent, + inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent; + + color: #a39e9a; + text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08), + 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08); +} + +.maximized .titlebar, +.tiled .titlebar { + border-radius: 0; + border-image: none; + border: none; + box-shadow: none; +} + +.maximized .titlebar:not(:backdrop):not(.toolbar-mode), +.tiled .titlebar:not(:backdrop):not(.toolbar-mode) { + box-shadow: inset 0 1px shade (#edebe6, 1.08); +} + +.titlebar .title { + font-weight: bold; +} + +.titlebar .subtitle { + font-size: smaller; + opacity: 0.5; +} + .titlebar button.titlebutton { background-clip: padding-box; border: 1px solid #d0c7bf; @@ -1986,6 +2108,20 @@ headerbar { background-image: linear-gradient(to top, #d5d2ce, #ece8e4 50%, #f7f4f3); } +/* keep buttons closer */ +.titlebar button.titlebutton { + margin-left: -2px; + margin-right: -2px; +} + +.titlebar button.titlebutton:first-child { + margin-left: inherit; +} + +.titlebar button.titlebutton:last-child { + margin-right: inherit; +} + .titlebar button.titlebutton.close { color: #7f4025; -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.25); @@ -2017,10 +2153,12 @@ headerbar { } + + /*********** * toolbar * ***********/ -.toolbar { +.toolbar:not(.titlebar):not(headerbar) { border-style: none; padding: 1px; @@ -2029,7 +2167,7 @@ headerbar { text-shadow: none; } -.toolbar:backdrop { +.toolbar:not(.titlebar):not(headerbar):backdrop { color: @backdrop_fg_color; } @@ -2037,8 +2175,9 @@ headerbar { * primary-toolbar * *******************/ .primary-toolbar, -headerbar, -.maximized headerbar.titlebar:not(:backdrop) { +/* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */ +:not(.titlebar) > headerbar:not(.titlebar), +.titlebar.toolbar-mode { -GtkWidget-window-dragging: true; background-image: -gtk-gradient (linear, left top, left bottom, @@ -2056,12 +2195,10 @@ headerbar, box-shadow: inset 0 1px shade (@dark_bg_color, 0.94); } -.maximized headerbar.titlebar.toolbar-mode:not(:backdrop) { - border-width: 0; -} - .primary-toolbar:backdrop, -headerbar:backdrop { +/* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */ +:not(.titlebar) > headerbar:not(.titlebar):backdrop, +.titlebar.toolbar-mode:backdrop { background-image: none; background-color: @dark_bg_color; box-shadow: none; @@ -2072,16 +2209,19 @@ headerbar:backdrop { } .primary-toolbar:disabled, +.titlebar.toolbar-mode:disabled, headerbar:disabled { text-shadow: 0 -1px shade (@dark_bg_color, 0.7); } .primary-toolbar button, +.titlebar button, headerbar button, headerbar button:disabled, .primary-toolbar button.flat:hover { background: transparent; - border-image-source: url("assets/radiance-button-toolbar.png"); + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"), + url("assets/radiance-button-toolbar@2.png")); padding: 9px; color: @dark_fg_color; } @@ -2099,14 +2239,16 @@ headerbar button:disabled * { .primary-toolbar button:focus, headerbar button:focus { - border-image-source: url("assets/radiance-button-toolbar-focused.png"); + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-focused.png"), + url("assets/radiance-button-toolbar-focused@2.png")); } .primary-toolbar button:active, .primary-toolbar button:checked, headerbar button:active, headerbar button:checked { - border-image-source: url("assets/radiance-button-toolbar-active.png"); + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-active.png"), + url("assets/radiance-button-toolbar-active@2.png")); } .primary-toolbar button:active:focus, @@ -2114,7 +2256,8 @@ headerbar button:checked { headerbar button:active:focus, headerbar button:checked:focus, headerbar button:hover:focus { - border-image-source: url("assets/radiance-button-toolbar-active-focused.png"); + border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-active-focused.png"), + url("assets/radiance-button-toolbar-active-focused@2.png")); } .primary-toolbar button:backdrop, @@ -2123,7 +2266,8 @@ headerbar button:disabled:backdrop, headerbar button:checked:backdrop { color: @backdrop_dark_fg_color; background-color: transparent; - border-image-source: url("assets/radiance-backdrop-button-toolbar.png"); + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar.png"), + url("assets/radiance-backdrop-button-toolbar@2.png")); } .primary-toolbar button:backdrop, @@ -2140,7 +2284,8 @@ headerbar button:checked:backdrop * { .primary-toolbar button:active:backdrop, .primary-toolbar button:checked:backdrop, headerbar button:active:backdrop { - border-image-source: url("assets/radiance-backdrop-button-toolbar-active.png"); + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar-active.png"), + url("assets/radiance-backdrop-button-toolbar-active@2.png")); } .primary-toolbar button:hover, @@ -2153,7 +2298,8 @@ headerbar button:backdrop:checked { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 1.2)), to (shade (@dark_bg_color, 1.1))); - border-image-source: url("assets/radiance-backdrop-button-toolbar.png"); + border-image-source: -gtk-scaled(url("assets/radiance-backdrop-button-toolbar.png"), + url("assets/radiance-backdrop-button-toolbar@2.png")); } .primary-toolbar button:active, @@ -2176,7 +2322,8 @@ headerbar button:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 1.01)), to (shade (@dark_bg_color, 0.99))); - border-image-source: url("assets/button-toolbar.png"); + border-image-source: -gtk-scaled(url("assets/button-toolbar.png"), + url("assets/button-toolbar@2.png")); } .primary-toolbar button.flat:disabled { @@ -2189,14 +2336,17 @@ headerbar button:checked:disabled { background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@dark_bg_color, 0.94)), to (shade (@dark_bg_color, 1.02))); - border-image-source: url("assets/button-toolbar.png"); + border-image-source: -gtk-scaled(url("assets/button-toolbar.png"), + url("assets/button-toolbar@2.png")); } .primary-toolbar separator, .primary-toolbar separator, .primary-toolbar separator:disabled, headerbar separator, -headerbar separator:disabled { +headerbar separator:disabled, +.titlebar separator, +.titlebar separator:disabled { border-color: alpha (shade (@dark_bg_color, 0.94), 0.35); border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5); border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5); @@ -2323,12 +2473,20 @@ tooltip { background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8, from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)), to (alpha (@tooltip_bg_color, 0.86))); - border-color: alpha (#ffffff, 0.2); + border-color: alpha (white, 0.2); border-radius: 5px; border-style: solid; border-width: 1px; } +tooltip.csd:not(.unity-csd) decoration { + border-radius: 5px; +} + +tooltip.background { + background-color: transparent; +} + tooltip label { color: @tooltip_fg_color; } @@ -2381,16 +2539,9 @@ popover { border-radius: 5px; border: 1px solid darker(@bg_color); - - box-shadow: 0 2px 3px @shadow_color; - margin: 10px; padding: 2px; } -popover:backdrop { - box-shadow: none; -} - /* Popover menuitems are actually buttons. The following rules reset most of * the button styles for them. */ @@ -2587,6 +2738,7 @@ undershoot { *:disabled { color: shade (@bg_color, 0.6); text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5); + -gtk-icon-effect: dim; } label selection,