From 1e9eeeb980fc416efcda68b4020d65425c0e8e31 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 27 Sep 2018 22:50:34 +0900 Subject: [PATCH] wip --- .../views/components/messaging-room.form.vue | 2 +- .../common/views/components/poll-editor.vue | 2 +- .../common/views/components/ui/form/radio.vue | 2 +- .../app/common/views/components/ui/input.vue | 10 ++++---- .../app/common/views/components/ui/radio.vue | 2 +- .../app/common/views/components/ui/select.vue | 4 ++-- .../common/views/components/ui/textarea.vue | 24 +++++++------------ .../common/views/components/url-preview.vue | 18 +++++--------- src/client/theme/dark.json | 12 +++++++++- src/client/theme/halloween.json | 1 + src/client/theme/light.json | 10 ++++++++ 11 files changed, 47 insertions(+), 40 deletions(-) diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue index 90668aee6e..8e62587c20 100644 --- a/src/client/app/common/views/components/messaging-room.form.vue +++ b/src/client/app/common/views/components/messaging-room.form.vue @@ -209,7 +209,7 @@ root(isDark) padding 8px resize none font-size 1em - color isDark ? #fff : #000 + color var(--inputText) outline none border none border-top solid 1px isDark ? #4b5056 : #eee diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue index 219f0a7fd5..7f52c62c23 100644 --- a/src/client/app/common/views/components/poll-editor.vue +++ b/src/client/app/common/views/components/poll-editor.vue @@ -103,7 +103,7 @@ root(isDark) padding 6px 8px width 300px font-size 14px - color isDark ? #fff : #000 + color var(--inputText) background isDark ? #191b22 : #fff border solid 1px var(--primaryAlpha01) border-radius 4px diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue index 13cabbdc04..5728a8171b 100644 --- a/src/client/app/common/views/components/ui/form/radio.vue +++ b/src/client/app/common/views/components/ui/form/radio.vue @@ -62,7 +62,7 @@ root(isDark) &:hover > .button - border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + border solid 2px var(--inputLabel) &.disabled opacity 0.6 diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index 98c9bf7f5a..d7b83d81cd 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -167,7 +167,7 @@ root(isDark, fill) width 24px text-align center line-height 32px - color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + color var(--inputLabel) &:not(:empty) + .input margin-left 28px @@ -183,7 +183,7 @@ root(isDark, fill) left 0 right 0 height 1px - background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) + background var(--inputBorder) &:after content '' @@ -242,7 +242,7 @@ root(isDark, fill) transition-duration 0.3s font-size 16px line-height 32px - color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + color var(--inputLabel) pointer-events none //will-change transform transform-origin top left @@ -257,7 +257,7 @@ root(isDark, fill) font-weight fill ? bold : normal font-size 16px line-height 32px - color isDark ? #fff : #000 + color var(--inputText) background transparent border none border-radius 0 @@ -280,7 +280,7 @@ root(isDark, fill) top 0 font-size 16px line-height fill ? 44px : 32px - color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + color var(--inputLabel) pointer-events none &:empty diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue index ded6b5650c..3a4407abc0 100644 --- a/src/client/app/common/views/components/ui/radio.vue +++ b/src/client/app/common/views/components/ui/radio.vue @@ -87,7 +87,7 @@ root(isDark) width 20px height 20px background none - border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + border solid 2px var(--inputLabel) border-radius 100% transition inherit diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue index c32865c690..bdb730fea9 100644 --- a/src/client/app/common/views/components/ui/select.vue +++ b/src/client/app/common/views/components/ui/select.vue @@ -103,7 +103,7 @@ root(isDark, fill) left 0 right 0 height 1px - background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) + background var(--inputBorder) &:after content '' @@ -143,7 +143,7 @@ root(isDark, fill) font-weight fill ? bold : normal font-size 16px height 32px - color isDark ? #fff : #000 + color var(--inputText) background transparent border none border-radius 0 diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue index 53b7dcaf8c..67898ee059 100644 --- a/src/client/app/common/views/components/ui/textarea.vue +++ b/src/client/app/common/views/components/ui/textarea.vue @@ -63,9 +63,7 @@ export default Vue.extend({ diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index f9b8415b5b..86489cf8be 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -200,17 +200,17 @@ export default Vue.extend({ top 0 width 100% -root(isDark) +.mk-url-preview > a display block font-size 14px - border solid 1px isDark ? #191b1f : #eee + border solid 1px var(--urlPreviewBorder) border-radius 4px overflow hidden &:hover text-decoration none - border-color isDark ? #4f5561 : #ddd + border-color var(--urlPreviewBorderHover) > article > header > h1 text-decoration underline @@ -235,11 +235,11 @@ root(isDark) > h1 margin 0 font-size 1em - color isDark ? #d6dae0 : #555 + color var(--urlPreviewTitle) > p margin 0 - color isDark ? #a4aab3 : #777 + color var(--urlPreviewText) font-size 0.8em > footer @@ -256,7 +256,7 @@ root(isDark) > p display inline-block margin 0 - color isDark ? #b0b4bf : #666 + color var(--urlPreviewInfo) font-size 0.8em line-height 16px vertical-align top @@ -322,10 +322,4 @@ root(isDark) width 12px height 12px -.mk-url-preview[data-darkmode] - root(true) - -.mk-url-preview:not([data-darkmode]) - root(false) - diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index 8962235f2f..44a8e0e568 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -6,9 +6,10 @@ "vars": { "primary": "#fb4e4e", "secondary": "#282C37", - "text": "#d0e0ea" + "text": "#d6dae0" } }, + "primary": "$primary", "primaryForeground": "#fff", "bg": ":darken<8<$secondary", @@ -54,6 +55,9 @@ "dateDividerFg": "#666b79", "switchTrack": "rgba(255, 255, 255, 0.15)", + "inputBorder": "rgba(255, 255, 255, 0.7)", + "inputLabel": "rgba(255, 255, 255, 0.7)", + "inputText": "#fff", "autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)", "autocompleteItemText": "rgba(255, 255, 255, 0.8)", @@ -65,6 +69,12 @@ "reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)", + "urlPreviewBorder": "rgba(0, 0, 0, 0.4)", + "urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)", + "urlPreviewTitle": "$text", + "urlPreviewText": ":alpha<0.7<$text", + "urlPreviewInfo": ":alpha<0.8<$text", + "calendarWeek": "#43d5dc", "calendarSaturdayOrSunday": "#ff6679", "calendarDay": "#c5ced6", diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json index 327d04cad6..1fc60c00ad 100644 --- a/src/client/theme/halloween.json +++ b/src/client/theme/halloween.json @@ -11,6 +11,7 @@ "text": "#b1bee3" } }, + "renoteGradient": "#5d2d1a", "renoteText": "#ff6c00", "desktopHeaderBg": "#36314e" diff --git a/src/client/theme/light.json b/src/client/theme/light.json index 11b001ceb1..8dd4b1fe7b 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -9,6 +9,7 @@ "text": "#666" } }, + "primary": "$primary", "primaryForeground": "#fff", "bg": ":darken<8<$secondary", @@ -54,6 +55,9 @@ "dateDividerFg": "#aaa", "switchTrack": "rgba(0, 0, 0, 0.25)", + "inputBorder": "rgba(0, 0, 0, 0.42)", + "inputLabel": "rgba(0, 0, 0, 0.54)", + "inputText": "#000", "autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)", "autocompleteItemText": "rgba(0, 0, 0, 0.8)", @@ -65,6 +69,12 @@ "reactionPickerButtonHoverBg": "#eee", + "urlPreviewBorder": "rgba(0, 0, 0, 0.1)", + "urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)", + "urlPreviewTitle": "$text", + "urlPreviewText": ":alpha<0.7<$text", + "urlPreviewInfo": ":alpha<0.8<$text", + "calendarWeek": "#19a2a9", "calendarSaturdayOrSunday": "#ef95a0", "calendarDay": "#777",