From 5692ae59a14cfed1ac87047a8cc2da8e2591a0df Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 31 Dec 2018 01:15:32 +0900 Subject: [PATCH] [Client] Improve theming :art: --- src/client/app/desktop/views/components/timeline.vue | 2 +- src/client/app/desktop/views/components/ui.header.nav.vue | 2 +- .../app/desktop/views/components/ui.header.notifications.vue | 2 +- src/client/app/mobile/views/components/ui.header.vue | 2 +- src/client/app/mobile/views/components/ui.nav.vue | 2 +- src/client/app/mobile/views/pages/home.vue | 4 ++-- src/client/theme/dark.json5 | 2 ++ src/client/theme/gruvbox-dark.json5 | 3 ++- src/client/theme/light.json5 | 2 ++ src/client/theme/monokai.json5 | 3 ++- 10 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue index 46d0a0915..110eddfda 100644 --- a/src/client/app/desktop/views/components/timeline.vue +++ b/src/client/app/desktop/views/components/timeline.vue @@ -207,7 +207,7 @@ export default Vue.extend({ top -4px right 4px font-size 10px - color var(--primary) + color var(--notificationIndicator) &:hover color var(--faceTextButtonHover) diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue index 03a5bf948..8e78829de 100644 --- a/src/client/app/desktop/views/components/ui.header.nav.vue +++ b/src/client/app/desktop/views/components/ui.header.nav.vue @@ -147,7 +147,7 @@ export default Vue.extend({ > [data-icon]:last-child margin-left 5px font-size 10px - color var(--primary) + color var(--notificationIndicator) @media (max-width 1100px) margin-left -5px diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue index ddd1b8661..a02078e4e 100644 --- a/src/client/app/desktop/views/components/ui.header.notifications.vue +++ b/src/client/app/desktop/views/components/ui.header.notifications.vue @@ -90,7 +90,7 @@ export default Vue.extend({ margin-left -5px vertical-align super font-size 10px - color var(--primary) + color var(--notificationIndicator) > .pop $bgcolor = var(--face) diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue index 6bdb24030..7abfe5e3c 100644 --- a/src/client/app/mobile/views/components/ui.header.vue +++ b/src/client/app/mobile/views/components/ui.header.vue @@ -159,7 +159,7 @@ export default Vue.extend({ left 8px pointer-events none font-size 10px - color var(--primary) + color var(--notificationIndicator) > button:last-child display block diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 1e568c517..c3f52a414 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -238,7 +238,7 @@ export default Vue.extend({ > i.circle margin-left 6px font-size 10px - color var(--primary) + color var(--notificationIndicator) > i:last-child position absolute diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue index ed057c220..33be56fd3 100644 --- a/src/client/app/mobile/views/pages/home.vue +++ b/src/client/app/mobile/views/pages/home.vue @@ -225,7 +225,7 @@ main > .badge margin-left 6px font-size 10px - color var(--primary) + color var(--notificationIndicator) > .tl max-width 680px @@ -248,7 +248,7 @@ main .badge margin-left 6px font-size 10px - color var(--primary) + color var(--notificationIndicator) vertical-align middle diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5 index a12ffae54..fe85e94d6 100644 --- a/src/client/theme/dark.json5 +++ b/src/client/theme/dark.json5 @@ -24,6 +24,8 @@ scrollbarHandle: ':lighten<5<$secondary', scrollbarHandleHover: ':lighten<10<$secondary', + notificationIndicator: '$primary', + face: '$secondary', faceText: '#fff', faceHeader: ':lighten<5<$secondary', diff --git a/src/client/theme/gruvbox-dark.json5 b/src/client/theme/gruvbox-dark.json5 index 93fea4063..629f0a3fd 100644 --- a/src/client/theme/gruvbox-dark.json5 +++ b/src/client/theme/gruvbox-dark.json5 @@ -20,6 +20,7 @@ mfmMentionForeground: '#fff', mfmUrl: 'rgb(69, 133, 136)', mfmLink: 'rgb(104, 157, 106)', - mfmHashtag: 'rgb(251, 73, 52)' + mfmHashtag: 'rgb(251, 73, 52)', + notificationIndicator: 'rgb(184, 187, 38)', }, } diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5 index c6a4f860b..876306b16 100644 --- a/src/client/theme/light.json5 +++ b/src/client/theme/light.json5 @@ -24,6 +24,8 @@ scrollbarHandle: '#00000033', scrollbarHandleHover: '#00000066', + notificationIndicator: '$primary', + face: '$secondary', faceText: '$text', faceHeader: ':lighten<5<$secondary', diff --git a/src/client/theme/monokai.json5 b/src/client/theme/monokai.json5 index a949089ba..6ee0f875a 100644 --- a/src/client/theme/monokai.json5 +++ b/src/client/theme/monokai.json5 @@ -20,6 +20,7 @@ mfmMentionForeground: '#fff', mfmUrl: '#66d9ef', mfmLink: '#e6db74', - mfmHashtag: '#fd971f' + mfmHashtag: '#fd971f', + notificationIndicator: '#66d9ef', }, }