From b96993e4dd6b2d9197b430af404e8fa652888b51 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 24 Jan 2020 00:36:32 +0200 Subject: improved selectedMenu again --- src/components/emoji_input/emoji_input.vue | 12 +++++++----- src/components/emoji_picker/emoji_picker.scss | 9 +++++++++ src/components/nav_panel/nav_panel.vue | 2 ++ src/components/popper/popper.scss | 12 +++++++----- src/components/selectable_list/selectable_list.vue | 1 + src/components/side_drawer/side_drawer.vue | 12 +++++++----- src/components/status/status.vue | 1 + 7 files changed, 34 insertions(+), 15 deletions(-) (limited to 'src/components') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 9c2501a9..94eae560 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -115,6 +115,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } } @@ -160,11 +161,12 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--selectedMenu, $fallback--fg); - color: var(--selectedMenuText, $fallback--text); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + background-color: var(--selectedMenuPopover, $fallback--fg); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 6608f393..8bd07e45 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -8,6 +8,15 @@ left: 0; margin: 0 !important; z-index: 1; + background-color: $fallback--bg; + background-color: var(--popover, $fallback--bg); + color: $fallback--link; + color: var(--popoverText, $fallback--link); + --lightText: var(--popoverLightText, $fallback--faint); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); + --icon: var(--popoverIcon, $fallback--icon); .keep-open, .too-many-emoji { diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index afc611ea..a934a411 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -105,6 +105,7 @@ color: var(--selectedMenuText, $fallback--link); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } @@ -116,6 +117,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); &:hover { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index e70b277d..591be37e 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -14,6 +14,7 @@ color: var(--popoverText, $fallback--text); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } @@ -144,12 +145,13 @@ &:active, &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--link; - color: var(--selectedMenuText, $fallback--link); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--link); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 2d1e44a3..a9bb12a1 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -72,6 +72,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index a5b754d7..25e4de01 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -228,6 +228,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); .button-icon:before { @@ -294,12 +295,13 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--text; - color: var(--selectedMenuText, $fallback--text); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 38d091ed..1997e187 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -448,6 +448,7 @@ $status-margin: 0.75em; background-color: var(--selectedPost, $fallback--lightBg); color: $fallback--text; color: var(--selectedPostText, $fallback--text); + --lightText: var(--selectedPostLightText, $fallback--light); --faint: var(--selectedPostFaintText, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint); --icon: var(--selectedPostIcon, $fallback--icon); -- cgit v1.2.3-70-g09d2