From fccfe19e13db9b7e22829193d3ebd2bb3cad3453 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 28 Sep 2018 11:18:56 +0900 Subject: [PATCH] wip --- src/client/app/common/views/widgets/nav.vue | 14 +++----- .../common/views/widgets/posts-monitor.vue | 10 ++---- src/client/app/common/views/widgets/rss.vue | 16 +++------ .../views/widgets/server.cpu-memory.vue | 10 ++---- .../views/pages/admin/admin.cpu-memory.vue | 2 +- src/client/app/mobile/views/pages/user.vue | 34 +++++++------------ src/client/theme/dark.json | 9 +++++ src/client/theme/light.json | 9 +++++ 8 files changed, 45 insertions(+), 59 deletions(-) diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue index 04dfe97c72..12003db3f2 100644 --- a/src/client/app/common/views/widgets/nav.vue +++ b/src/client/app/common/views/widgets/nav.vue @@ -16,23 +16,17 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.mkw-nav .mkw-nav--body padding 16px font-size 12px - color isDark ? #9aa4b3 : #aaa + color var(--text) background var(--face) a - color isDark ? #9aa4b3 : #999 + color var(--text) i - color isDark ? #9aa4b3 : #ccc - -.mkw-nav[data-darkmode] - root(true) - -.mkw-nav:not([data-darkmode]) - root(false) + color var(--text) </style> diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue index 801307be54..09f766696b 100644 --- a/src/client/app/common/views/widgets/posts-monitor.vue +++ b/src/client/app/common/views/widgets/posts-monitor.vue @@ -173,7 +173,7 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.qpdmibaztplkylerhdbllwcokyrfxeyj &.dual > svg width 50% @@ -192,7 +192,7 @@ root(isDark) > text font-size 5px - fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) + fill var(--chartCaption) > tspan opacity 0.5 @@ -202,10 +202,4 @@ root(isDark) display block clear both -.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode] - root(true) - -.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue index a777388cdb..448eee9fb6 100644 --- a/src/client/app/common/views/widgets/rss.vue +++ b/src/client/app/common/views/widgets/rss.vue @@ -65,7 +65,7 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.mkw-rss .mkw-rss--body .feed padding 12px 16px @@ -74,8 +74,8 @@ root(isDark) > a display block padding 4px 0 - color isDark ? #9aa4b3 : #666 - border-bottom dashed 1px isDark ? #1c2023 : #eee + color var(--text) + border-bottom dashed 1px var(--faceDivider) &:last-child border-bottom none @@ -90,7 +90,7 @@ root(isDark) margin-right 4px &[data-mobile] - background isDark ? #21242f : #f3f3f3 + background var(--face) .feed padding 0 @@ -100,12 +100,6 @@ root(isDark) border-bottom none &:nth-child(even) - background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7) - -.mkw-rss[data-darkmode] - root(true) - -.mkw-rss:not([data-darkmode]) - root(false) + background rgba(#000, 0.05) </style> diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue index b0421d6150..55aa1ea895 100644 --- a/src/client/app/common/views/widgets/server.cpu-memory.vue +++ b/src/client/app/common/views/widgets/server.cpu-memory.vue @@ -129,7 +129,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.cpu-memory > svg display block padding 10px @@ -144,7 +144,7 @@ root(isDark) > text font-size 5px - fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) + fill var(--chartCaption) > tspan opacity 0.5 @@ -154,10 +154,4 @@ root(isDark) display block clear both -.cpu-memory[data-darkmode] - root(true) - -.cpu-memory:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue index d14ce12553..ebaa11478d 100644 --- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue +++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue @@ -125,7 +125,7 @@ root(isDark) > text font-size 10px - fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) + fill var(--chartCaption) > tspan opacity 0.5 diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 1ff81fc0c6..d7edda1a74 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -115,10 +115,8 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) - $bg = isDark ? #22252f : #f7f7f7 +main + $bg = var(--face) > .is-suspended > .is-remote @@ -148,7 +146,7 @@ root(isDark) > .banner padding-bottom 33.3% - background-color isDark ? #5f7273 : #cacaca + background-color rgba(0, 0, 0, 0.1) background-size cover background-position center @@ -198,26 +196,26 @@ root(isDark) margin 0 line-height 22px font-size 20px - color isDark ? #fff : #757c82 + color var(--mobileUserPageName) > .username display inline-block line-height 20px font-size 16px font-weight bold - color isDark ? #657786 : #969ea5 + color var(--mobileUserPageAcct) > .followed margin-left 8px padding 2px 4px font-size 12px - color isDark ? #657786 : #fff - background isDark ? #f8f8f8 : #a7bec7 + color var(--mobileUserPageFollowedFg) + background var(--mobileUserPageFollowedBg) border-radius 4px > .description margin 8px 0 - color isDark ? #fff : #757c82 + color var(--mobileUserPageDescription) > .info margin 8px 0 @@ -225,14 +223,14 @@ root(isDark) > p display inline margin 0 16px 0 0 - color isDark ? #a9b9c1 : #90989c + color var(--text) > i margin-right 4px > .status > a - color isDark ? #657786 : #818a92 + color var(--text) &:not(:last-child) margin-right 16px @@ -240,7 +238,7 @@ root(isDark) > b margin-right 4px font-size 16px - color isDark ? #fff : #787e86 + color var(--mobileUserPageStatusHighlight) > i font-size 14px @@ -249,7 +247,7 @@ root(isDark) position -webkit-sticky position sticky top 47px - box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07) + box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow) background-color $bg z-index 2 @@ -266,7 +264,7 @@ root(isDark) line-height 48px font-size 12px text-decoration none - color isDark ? #657786 : #9ca1a5 + color var(--text) border-bottom solid 2px transparent @media (min-width 400px) @@ -289,10 +287,4 @@ root(isDark) @media (min-width 600px) padding 32px -main[data-darkmode] - root(true) - -main:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index 8a39648037..896ac7a920 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -86,6 +86,8 @@ "calendarSaturdayOrSunday": "#ff6679", "calendarDay": "#c5ced6", + "chartCaption": ":alpha<0.6<$text", + "announcementsBg": "#253a50", "announcementsTitle": "#539eff", "announcementsText": "#fff", @@ -125,6 +127,13 @@ "desktopSettingsNavItem": ":alpha<0.8<$text", "desktopSettingsNavItemHover": ":lighten<10<$text", + "mobileUserPageName": "#fff", + "mobileUserPageAcct": "$text", + "mobileUserPageDescription": "$text", + "mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)", + "mobileUserPageFollowedFg": "$text", + "mobileUserPageStatusHighlight": "#fff", + "mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)", "mobileAnnouncement": "rgba(30, 129, 216, 0.2)", "mobileAnnouncementFg": "#fff", "mobileSignedInAsBg": "#273c34", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index f5003ae2ec..fe018b5476 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -86,6 +86,8 @@ "calendarSaturdayOrSunday": "#ef95a0", "calendarDay": "#777", + "chartCaption": ":alpha<0.6<$text", + "announcementsBg": "#f3f9ff", "announcementsTitle": "#4078c0", "announcementsText": "#57616f", @@ -125,6 +127,13 @@ "desktopSettingsNavItem": ":alpha<0.8<$text", "desktopSettingsNavItemHover": ":darken<10<$text", + "mobileUserPageName": "#757c82", + "mobileUserPageAcct": "#969ea5", + "mobileUserPageDescription": "#757c82", + "mobileUserPageFollowedBg": "#a7bec7", + "mobileUserPageFollowedFg": "#fff", + "mobileUserPageStatusHighlight": "#787e86", + "mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)", "mobileAnnouncement": "rgba(155, 196, 232, 0.2)", "mobileAnnouncementFg": "#3f4967", "mobileSignedInAsBg": "#fcfff5",