From ca76d0e2e55cb9a6b69a29c19225c22bb50c6f96 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Sun, 29 May 2016 19:22:18 +0200 Subject: use accent color for menu highlight (fix #135) --- common/cinnamon/cinnamon-dark.css | 23 ++- common/cinnamon/cinnamon.css | 23 ++- common/cinnamon/common-assets/menu/menu-hover.svg | 84 ++++++++ .../common-assets/switch/switch-off-selected.svg | 201 +++++++++++++++++++ .../common-assets/switch/switch-on-selected.svg | 220 +++++++++++++++++++++ common/cinnamon/dark-assets/menu/menu-hover.svg | 97 --------- common/cinnamon/light-assets/menu/menu-hover.svg | 97 --------- common/cinnamon/sass/_common.scss | 20 +- 8 files changed, 552 insertions(+), 213 deletions(-) create mode 100644 common/cinnamon/common-assets/menu/menu-hover.svg create mode 100644 common/cinnamon/common-assets/switch/switch-off-selected.svg create mode 100644 common/cinnamon/common-assets/switch/switch-on-selected.svg delete mode 100644 common/cinnamon/dark-assets/menu/menu-hover.svg delete mode 100644 common/cinnamon/light-assets/menu/menu-hover.svg (limited to 'common/cinnamon') diff --git a/common/cinnamon/cinnamon-dark.css b/common/cinnamon/cinnamon-dark.css index c6bb2e3..584ea8b 100644 --- a/common/cinnamon/cinnamon-dark.css +++ b/common/cinnamon/cinnamon-dark.css @@ -171,6 +171,10 @@ StScrollBar { border-right-width: 1px; border-left-width: 5px; color: transparent; } + .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active + .slider { + -slider-background-color: rgba(0, 0, 0, 0.2); + -slider-active-background-color: #ffffff; } .check-box CinnamonGenericContainer { spacing: .2em; @@ -221,11 +225,14 @@ StScrollBar { .toggle-switch { width: 50px; height: 20px; - background-size: contain; } - .toggle-switch-us, .toggle-switch-intl { - background-image: url("dark-assets/switch/switch-off.svg"); } - .toggle-switch-us:checked, .toggle-switch-intl:checked { - background-image: url("dark-assets/switch/switch-on.svg"); } + background-size: contain; + background-image: url("dark-assets/switch/switch-off.svg"); } + .toggle-switch:checked { + background-image: url("dark-assets/switch/switch-on.svg"); } + .popup-menu-item:active .toggle-switch { + background-image: url("common-assets/switch/switch-off-selected.svg"); } + .popup-menu-item:active .toggle-switch:checked { + background-image: url("common-assets/switch/switch-on-selected.svg"); } .cinnamon-link { color: #a9caf1; @@ -267,9 +274,9 @@ StScrollBar { padding: .4em 1.75em; spacing: 1em; } .popup-menu .popup-menu-item:active { - color: #D3DAE3; + color: #ffffff; background-color: transparent; - border-image: url("dark-assets/menu/menu-hover.svg") 9 9 1 1; } + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } .popup-menu .popup-menu-item:insensitive { color: rgba(211, 218, 227, 0.5); background: none; } @@ -277,6 +284,8 @@ StScrollBar { color: #D3DAE3; } .popup-menu .popup-inactive-menu-item:insensitive { color: rgba(211, 218, 227, 0.45); } + .popup-menu .popup-menu-item:active .popup-inactive-menu-item { + color: #ffffff; } .popup-menu-icon { icon-size: 16px; } diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css index a54fd32..6aaee78 100644 --- a/common/cinnamon/cinnamon.css +++ b/common/cinnamon/cinnamon.css @@ -171,6 +171,10 @@ StScrollBar { border-right-width: 1px; border-left-width: 5px; color: transparent; } + .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active + .slider { + -slider-background-color: rgba(0, 0, 0, 0.2); + -slider-active-background-color: #ffffff; } .check-box CinnamonGenericContainer { spacing: .2em; @@ -221,11 +225,14 @@ StScrollBar { .toggle-switch { width: 50px; height: 20px; - background-size: contain; } - .toggle-switch-us, .toggle-switch-intl { - background-image: url("light-assets/switch/switch-off.svg"); } - .toggle-switch-us:checked, .toggle-switch-intl:checked { - background-image: url("light-assets/switch/switch-on.svg"); } + background-size: contain; + background-image: url("light-assets/switch/switch-off.svg"); } + .toggle-switch:checked { + background-image: url("light-assets/switch/switch-on.svg"); } + .popup-menu-item:active .toggle-switch { + background-image: url("common-assets/switch/switch-off-selected.svg"); } + .popup-menu-item:active .toggle-switch:checked { + background-image: url("common-assets/switch/switch-on-selected.svg"); } .cinnamon-link { color: #2679db; @@ -267,9 +274,9 @@ StScrollBar { padding: .4em 1.75em; spacing: 1em; } .popup-menu .popup-menu-item:active { - color: #5c616c; + color: #ffffff; background-color: transparent; - border-image: url("light-assets/menu/menu-hover.svg") 9 9 1 1; } + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } .popup-menu .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); background: none; } @@ -277,6 +284,8 @@ StScrollBar { color: #5c616c; } .popup-menu .popup-inactive-menu-item:insensitive { color: rgba(92, 97, 108, 0.55); } + .popup-menu .popup-menu-item:active .popup-inactive-menu-item { + color: #ffffff; } .popup-menu-icon { icon-size: 16px; } diff --git a/common/cinnamon/common-assets/menu/menu-hover.svg b/common/cinnamon/common-assets/menu/menu-hover.svg new file mode 100644 index 0000000..6ae13ca --- /dev/null +++ b/common/cinnamon/common-assets/menu/menu-hover.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/switch/switch-off-selected.svg b/common/cinnamon/common-assets/switch/switch-off-selected.svg new file mode 100644 index 0000000..c85eeee --- /dev/null +++ b/common/cinnamon/common-assets/switch/switch-off-selected.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/switch/switch-on-selected.svg b/common/cinnamon/common-assets/switch/switch-on-selected.svg new file mode 100644 index 0000000..7c2572d --- /dev/null +++ b/common/cinnamon/common-assets/switch/switch-on-selected.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/menu/menu-hover.svg b/common/cinnamon/dark-assets/menu/menu-hover.svg deleted file mode 100644 index a023a8e..0000000 --- a/common/cinnamon/dark-assets/menu/menu-hover.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - diff --git a/common/cinnamon/light-assets/menu/menu-hover.svg b/common/cinnamon/light-assets/menu/menu-hover.svg deleted file mode 100644 index 938245a..0000000 --- a/common/cinnamon/light-assets/menu/menu-hover.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss index b015078..c1788b0 100644 --- a/common/cinnamon/sass/_common.scss +++ b/common/cinnamon/sass/_common.scss @@ -159,6 +159,11 @@ StScrollBar { border-right-width: 1px; border-left-width: 5px; color: transparent; + + .popup-menu-item:active & { + -slider-background-color: transparentize(black, 0.8); + -slider-active-background-color: $selected_fg_color; + } } // @@ -224,11 +229,14 @@ StScrollBar { width: 50px; height: 20px; background-size: contain; + background-image: url("#{$asset_path}/switch/switch-off.svg"); + + &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } - &-us, &-intl { - background-image: url("#{$asset_path}/switch/switch-off.svg"); + .popup-menu-item:active & { + background-image: url("common-assets/switch/switch-off-selected.svg"); - &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } + &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } @@ -286,9 +294,9 @@ StScrollBar { spacing: 1em; &:active { - color: $fg_color; + color: $selected_fg_color; background-color: transparent; - border-image: url("#{$asset_path}/menu/menu-hover.svg") 9 9 1 1; + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } &:insensitive { color: transparentize($fg_color, 0.5); @@ -302,6 +310,8 @@ StScrollBar { &:insensitive { color: $insensitive_fg_color; } } + .popup-menu-item:active .popup-inactive-menu-item { color: $selected_fg_color; } + &-icon { icon-size: 16px; } } -- cgit v1.2.3