diff --git a/src/gtk-3.0/gtk-dark.css b/src/gtk-3.0/gtk-dark.css index d06fb9c..37bc4ed 100644 --- a/src/gtk-3.0/gtk-dark.css +++ b/src/gtk-3.0/gtk-dark.css @@ -240,7 +240,7 @@ treeview entry.flat, treeview entry { .entry-tag { margin: 8px; - border-radius: 50px; + border-radius: 3px; box-shadow: none; background-color: #0062FF; color: #ffffff; @@ -296,7 +296,9 @@ button { border-color: transparent; background-image: none; color: #ffffff; - background-color: rgba(255, 255, 255, 0.25); } + background-color: rgba(255, 255, 255, 0.25); + text-shadow: none; + -gtk-icon-shadow: none; } button.flat:disabled, button.sidebar-button:disabled { border-color: transparent; background-color: transparent; @@ -840,13 +842,13 @@ combobox arrow { -gtk-icon-source: -gtk-scaled(url("assets/combobox-arrow.png"), url("assets/combobox-arrow@2.png")); min-height: 16px; min-width: 16px; - padding: 0 1px; + padding: 0; margin: -1px -9px -1px -1px; border-radius: 0 5px 5px 0; color: #ffffff; border: 1px solid #686868; background-color: transparent; - background-image: linear-gradient(0deg, #686868 0%, #686868 100%); } + background-image: linear-gradient(180deg, #686868 0%, #686868 100%); } .linked:not(.vertical) > combobox > box > button.combo arrow { border-radius: 0; } .linked:not(.vertical) > combobox:last-child > box > button.combo arrow { @@ -2826,7 +2828,9 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { border-color: transparent; background-image: none; color: #ffffff; - background-color: rgba(255, 255, 255, 0.25); } + background-color: rgba(255, 255, 255, 0.25); + text-shadow: none; + -gtk-icon-shadow: none; } .app-notification button:disabled { background-color: transparent; } .app-notification button:disabled label, .app-notification button:disabled { @@ -2887,6 +2891,8 @@ messagedialog.csd .dialog-action-area button:not(.suggested-action):not(.destruc background-image: none; color: #ffffff; background-color: rgba(255, 255, 255, 0.25); + text-shadow: none; + -gtk-icon-shadow: none; border-color: rgba(255, 255, 255, 0.12); text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); } messagedialog.csd .dialog-action-area button { @@ -3172,11 +3178,22 @@ popover.background.touch-selection { button.circular, button.nautilus-circular-button.image-button, button.circular-button { padding: 0; - min-width: 16px; - min-height: 24px; - padding: 2px 6px; + margin: 0; + min-width: 28px; + min-height: 28px; border-radius: 50%; -gtk-outline-radius: 50%; } + button.circular:active, button.nautilus-circular-button.image-button:active, button.circular:checked, button.nautilus-circular-button.image-button:checked, + button.circular-button:active, + button.circular-button:checked { + border-width: 1px; + border-color: rgba(255, 255, 255, 0.35); + border-style: solid; + background-image: none; + color: #ffffff; + background-color: rgba(255, 255, 255, 0.35); + text-shadow: none; + -gtk-icon-shadow: none; } button.circular label, button.nautilus-circular-button.image-button label, button.circular-button label { padding: 0; } @@ -4034,6 +4051,35 @@ panel-toplevel.background button:not(#tasklist-button), .xfce4-panel.panel butto .menu .spinner { opacity: 1; } +window.background:not(.csd) > widget > separator { + color: rgba(255, 255, 255, 0.12); } +window.background:not(.csd) > widget > scrollbar { + background-clip: border-box; } +window.background:not(.csd) > widget > scrollbar, +window.background:not(.csd) > widget > frame > border { + border-color: rgba(255, 255, 255, 0.12); } +window.background:not(.csd) > widget > entry, +window.background:not(.csd) > widget > button > button { + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 5px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } +window.background:not(.csd) > widget > entry { + border-radius: 5px; + background-image: image(#242424); + border: 1px solid rgba(255, 255, 255, 0.12); } + window.background:not(.csd) > widget > entry:focus { + border-color: #66a1ff; + box-shadow: inset 0 0 0 2px #66a1ff; } +window.background:not(.csd) > widget > spinbutton { + background-image: image(#484848); + border: 1px solid rgba(255, 255, 255, 0.12); } + window.background:not(.csd) > widget > spinbutton:active { + background-image: image(rgba(119, 119, 119, 0.95)); } +window.background:not(.csd) > widget > button > button:active { + background-image: image(rgba(119, 119, 119, 0.95)); + border: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } + /**************** * Libre-Office * ****************/ diff --git a/src/gtk-3.0/gtk-light.css b/src/gtk-3.0/gtk-light.css index 41342ab..3a59c8b 100644 --- a/src/gtk-3.0/gtk-light.css +++ b/src/gtk-3.0/gtk-light.css @@ -241,7 +241,7 @@ treeview entry.flat, treeview entry { .entry-tag { margin: 8px; - border-radius: 50px; + border-radius: 3px; box-shadow: none; background-color: #0e6bff; color: #ffffff; @@ -298,7 +298,9 @@ button { border-color: transparent; background-image: none; color: #ffffff; - background-color: rgba(0, 0, 0, 0.5); } + background-color: rgba(0, 0, 0, 0.5); + text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); + -gtk-icon-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); } button.flat:disabled, button.sidebar-button:disabled { border-color: transparent; background-color: transparent; @@ -843,13 +845,13 @@ combobox arrow { -gtk-icon-source: -gtk-scaled(url("assets/combobox-arrow.png"), url("assets/combobox-arrow@2.png")); min-height: 16px; min-width: 16px; - padding: 0 1px; + padding: 0; margin: -1px -9px -1px -1px; border-radius: 0 5px 5px 0; color: #ffffff; - border: 1px solid #358ffc; + border: 1px solid #0e6bff; background-color: transparent; - background-image: linear-gradient(0deg, #067dff 0%, #6bb3fa 100%); } + background-image: linear-gradient(180deg, #4c97fe 0%, #0564e3 100%); } .linked:not(.vertical) > combobox > box > button.combo arrow { border-radius: 0; } .linked:not(.vertical) > combobox:last-child > box > button.combo arrow { @@ -2824,7 +2826,9 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { border-color: transparent; background-image: none; color: #ffffff; - background-color: rgba(0, 0, 0, 0.5); } + background-color: rgba(0, 0, 0, 0.5); + text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); + -gtk-icon-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); } .app-notification button:disabled { background-color: transparent; } .app-notification button:disabled label, .app-notification button:disabled { @@ -2885,6 +2889,8 @@ messagedialog.csd .dialog-action-area button:not(.suggested-action):not(.destruc background-image: none; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); + text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); + -gtk-icon-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); border-color: rgba(0, 0, 0, 0.11); text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); } messagedialog.csd .dialog-action-area button { @@ -3171,11 +3177,22 @@ popover.background.touch-selection { button.circular, button.nautilus-circular-button.image-button, button.circular-button { padding: 0; - min-width: 16px; - min-height: 24px; - padding: 2px 6px; + margin: 0; + min-width: 28px; + min-height: 28px; border-radius: 50%; -gtk-outline-radius: 50%; } + button.circular:active, button.nautilus-circular-button.image-button:active, button.circular:checked, button.nautilus-circular-button.image-button:checked, + button.circular-button:active, + button.circular-button:checked { + border-width: 1px; + border-color: rgba(0, 0, 0, 0.1); + border-style: solid; + background-image: none; + color: #ffffff; + background-color: rgba(0, 0, 0, 0.6); + text-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); + -gtk-icon-shadow: 0 -1px rgba(255, 255, 255, 0.04), -1px 0px rgba(32, 32, 32, 0.05), 1px 0px rgba(32, 32, 32, 0.05), 0px 1px rgba(32, 32, 32, 0.3), 0px 2px rgba(32, 32, 32, 0.05); } button.circular label, button.nautilus-circular-button.image-button label, button.circular-button label { padding: 0; } @@ -4032,6 +4049,35 @@ panel-toplevel.background button:not(#tasklist-button), .xfce4-panel.panel butto .menu .spinner { opacity: 1; } +window.background:not(.csd) > widget > separator { + color: rgba(0, 0, 0, 0.11); } +window.background:not(.csd) > widget > scrollbar { + background-clip: border-box; } +window.background:not(.csd) > widget > scrollbar, +window.background:not(.csd) > widget > frame > border { + border-color: rgba(0, 0, 0, 0.11); } +window.background:not(.csd) > widget > entry, +window.background:not(.csd) > widget > button > button { + border: 1px solid rgba(0, 0, 0, 0.11); + border-radius: 5px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02); } +window.background:not(.csd) > widget > entry { + border-radius: 5px; + background-image: image(#ffffff); + border: 1px solid rgba(0, 0, 0, 0.11); } + window.background:not(.csd) > widget > entry:focus { + border-color: #74aaff; + box-shadow: inset 0 0 0 2px #74aaff; } +window.background:not(.csd) > widget > spinbutton { + background-image: image(white); + border: 1px solid rgba(0, 0, 0, 0.11); } + window.background:not(.csd) > widget > spinbutton:active { + background-image: image(#afafaf); } +window.background:not(.csd) > widget > button > button:active { + background-image: image(#afafaf); + border: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.11); } + /**************** * Libre-Office * ****************/ diff --git a/src/gtk-3.0/sass/_applications.scss b/src/gtk-3.0/sass/_applications.scss index d7c448d..7346a5c 100644 --- a/src/gtk-3.0/sass/_applications.scss +++ b/src/gtk-3.0/sass/_applications.scss @@ -1078,6 +1078,59 @@ panel-toplevel.background { .menu .spinner { opacity: 1 } // Fixes sound indicator buttons + +// +// * Firefox and Thunderbird * +// + +window.background:not(.csd) { + > widget { + // for the bookmark toolbar's separators + > separator { color: $borders_color; } + + // avoid black border + > scrollbar { background-clip: border-box; } + + // emphasize borders color + > scrollbar, + > frame > border { border-color: $borders_color; } + + > entry, + > button > button { + border: 1px solid $borders_color; + border-radius: $bt_radius; + box-shadow: inset 0 0 0 1px rgba($borders_color, 0.02); + } + + > entry { +// min-height: 26px; + border-radius: $bt_radius; + background-image: image($base_color); + border: 1px solid $borders_color; + + &:focus { border-color: $entry_highlight; box-shadow: inset 0 0 0 2px $entry_highlight; } + } + + > spinbutton { + background-image: image($button_bg); + border: 1px solid $borders_color; + &:active { background-image: image($header_button_active_bg); } + } + + > button > button { +// padding: 2px 6px; +// background-size: auto; +// color: $fg_color; + + &:active { + background-image: image($header_button_active_bg); + border: none; + box-shadow: inset 0 0 0 1px $borders_color; + } + } + } +} + /**************** * Libre-Office * ****************/ diff --git a/src/gtk-3.0/sass/_common.scss b/src/gtk-3.0/sass/_common.scss index 2ccd09e..17b6c39 100644 --- a/src/gtk-3.0/sass/_common.scss +++ b/src/gtk-3.0/sass/_common.scss @@ -310,7 +310,7 @@ treeview entry { $tag_margin: 8px; margin: $tag_margin; // instead of min-height: $tag_height; - border-radius: 50px; + border-radius: 3px; box-shadow: none; background-color: $selected_bg_color; color: $selected_fg_color; @@ -926,14 +926,14 @@ combobox { url("assets/combobox-arrow@2.png")); min-height: 16px; min-width: 16px; - padding: 0 1px; + padding: 0; margin: -1px -9px -1px -1px; border-radius: 0 $bt_radius $bt_radius 0; color: $selected_fg_color; - border: 1px solid if($variant=='light', #358ffc, #686868); + border: 1px solid if($variant=='light', $selected_bg_color, #686868); background-color: transparent; - background-image: if($variant=='light', linear-gradient( 0deg, #067dff 0%, #6bb3fa 100%), - linear-gradient( 0deg, #686868 0%, #686868 100%)); + background-image: if($variant=='light', linear-gradient( 180deg, #4c97fe 0%, #0564e3 100%), + linear-gradient( 180deg, #686868 0%, #686868 100%)); } &:drop(active) button.combo { @extend button:drop(active); } @@ -3386,13 +3386,25 @@ colorchooser .popover.osd { border-radius: $bt_radius; } button.circular, button.circular-button { padding: 0; - min-width: 16px; - min-height: 24px; - padding: 2px 6px; + margin: 0; + min-width: 28px; + min-height: 28px; border-radius: 50%; -gtk-outline-radius: 50%; + &:active, &:checked { + border-width: 1px; + border-color: if($variant=='light', rgba(black, 0.1), rgba(white, 0.35)); + border-style: solid; + background-image: none; + color: $selected_fg_color; + background-color: if($variant=='light', rgba(black, 0.6), rgba(white, 0.35)); + text-shadow: if($variant=='light', $text_shadow, none); + -gtk-icon-shadow: if($variant=='light', $text_shadow, none); + } + label { padding: 0; } + } .keycap { diff --git a/src/gtk-3.0/sass/_drawing.scss b/src/gtk-3.0/sass/_drawing.scss index 56f7205..0be35aa 100644 --- a/src/gtk-3.0/sass/_drawing.scss +++ b/src/gtk-3.0/sass/_drawing.scss @@ -226,6 +226,8 @@ $animation_1: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1); background-image: none; color: $selected_fg_color; background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25)); + text-shadow: if($variant=='light', $text_shadow, none); + -gtk-icon-shadow: if($variant=='light', $text_shadow, none); } @else if $t==flat-insensitive {