diff options
Diffstat (limited to 'src/client/app/common')
23 files changed, 114 insertions, 297 deletions
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue index bc230496a6..751abe2ecd 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.game.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue @@ -304,9 +304,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.xqnhankfuuilcwvhgsopeqncafzsquya text-align center > .go-index @@ -319,7 +317,7 @@ root(isDark) > header padding 8px - border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4 + border-bottom dashed 1px var(--reversiGameHeaderLine) a color inherit @@ -386,16 +384,16 @@ root(isDark) user-select none &.empty - border solid 2px isDark ? #51595f : #eee + border solid 2px var(--reversiGameEmptyCell) &.empty.can - background isDark ? #51595f : #eee + background var(--reversiGameEmptyCell) &.empty.myTurn - border-color isDark ? #6a767f : #ddd + border-color var(--reversiGameEmptyCellMyTurn) &.can - background isDark ? #51595f : #eee + background var(--reversiGameEmptyCellCanPut) cursor pointer &:hover @@ -409,7 +407,7 @@ root(isDark) box-shadow 0 0 0 4px var(--primaryAlpha07) &.isEnded - border-color isDark ? #6a767f : #ddd + border-color var(--reversiGameEmptyCellMyTurn) &.none border-color transparent !important @@ -458,10 +456,4 @@ root(isDark) margin 0 8px min-width 70px -.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode] - root(true) - -.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue index 44a1262636..3725aa6cb4 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.index.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue @@ -138,9 +138,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx > h1 margin 0 padding 24px @@ -148,7 +146,7 @@ root(isDark) text-align center font-weight normal color #fff - background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31) + background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd)) & + p margin 0 @@ -156,7 +154,7 @@ root(isDark) margin-bottom 12px text-align center font-size 14px - border-bottom solid 1px isDark ? #535f65 : #d3d9dc + border-bottom solid 1px var(--faceDivider) > .play margin 0 auto @@ -171,14 +169,14 @@ root(isDark) padding 16px font-size 14px text-align left - background isDark ? #282c37 : #f5f5f5 + background var(--reversiDescBg) border-radius 8px > section margin 0 auto padding 0 16px 16px 16px max-width 500px - border-top solid 1px isDark ? #535f65 : #d3d9dc + border-top solid 1px var(--faceDivider) > h2 margin 0 @@ -189,9 +187,9 @@ root(isDark) .invitation margin 8px 0 padding 8px - color isDark ? #fff : #677f84 + color var(--text) background var(--face) - box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) + box-shadow 0 2px 16px var(--reversiListItemShadow) border-radius 6px cursor pointer @@ -203,10 +201,10 @@ root(isDark) border-color var(--primary) &:hover - background isDark ? #313543 : #f5f5f5 + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05) &:active - background isDark ? #1e222b : #eee + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1) > .avatar width 32px @@ -221,9 +219,9 @@ root(isDark) display block margin 8px 0 padding 8px - color isDark ? #fff : #677f84 + color var(--text) background var(--face) - box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) + box-shadow 0 2px 16px var(--reversiListItemShadow) border-radius 6px cursor pointer @@ -232,10 +230,10 @@ root(isDark) user-select none &:hover - background isDark ? #313543 : #f5f5f5 + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05) &:active - background isDark ? #1e222b : #eee + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1) > .avatar width 32px @@ -246,10 +244,4 @@ root(isDark) margin 0 8px line-height 32px -.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode] - root(true) - -.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue index b407046ba9..236141ee28 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.room.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue @@ -252,11 +252,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.urbixznjwwuukfsckrwzwsqzsxornqij text-align center - background isDark ? #191b22 : #f9f9f9 + background var(--bg) > header padding 8px @@ -274,9 +272,9 @@ root(isDark) width 100% padding 12px 14px background var(--face) - border 1px solid isDark ? #6a707d : #dcdfe6 + border 1px solid var(--reversiMapSelectBorder) border-radius 4px - color isDark ? #fff : #606266 + color var(--text) cursor pointer transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) -webkit-appearance none @@ -284,7 +282,7 @@ root(isDark) appearance none &:hover - border-color isDark ? #a7aebd : #c0c4cc + border-color var(--reversiMapSelectHoverBorder) &:focus &:active @@ -294,7 +292,8 @@ root(isDark) > .random padding 32px 0 font-size 64px - color isDark ? #4e5961 : #d8d8d8 + color var(--text) + opacity 0.7 > .board display grid @@ -302,11 +301,11 @@ root(isDark) width 300px height 300px margin 0 auto - color isDark ? #fff : #444 + color var(--text) > div background transparent - border solid 2px isDark ? #6a767f : #ddd + border solid 2px var(--faceDivider) border-radius 6px overflow hidden cursor pointer @@ -332,31 +331,25 @@ root(isDark) max-width 400px border-radius 4px background var(--face) - color isDark ? #fff : #303133 - box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1) + color var(--text) + box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow) > header padding 18px 20px - border-bottom 1px solid isDark ? #1c2023 : #ebeef5 + border-bottom 1px solid var(--faceDivider) > div padding 20px - color isDark ? #fff : #606266 + color var(--text) > footer position sticky bottom 0 padding 16px - background rgba(isDark ? #191b22 : #fff, 0.9) - border-top solid 1px isDark ? #606266 : #c4cdd4 + background var(--reversiRoomFooterBg) + border-top solid 1px var(--faceDivider) > .status margin 0 0 16px 0 -.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode] - root(true) - -.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue index 75d7d574c1..6eb9511ce9 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.vue @@ -156,11 +156,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) - color isDark ? #fff : #677f84 - background isDark ? #191b22 : #fff +.vchtoekanapleubgzioubdtmlkribzfd + color var(--text) + background var(--bg) > .matching > h1 @@ -177,10 +175,4 @@ root(isDark) text-align center border-top dashed 1px #c4cdd4 -.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode] - root(true) - -.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode]) - root(false) - </style> 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 8e62587c20..c93fd7f78d 100644 --- a/src/client/app/common/views/components/messaging-room.form.vue +++ b/src/client/app/common/views/components/messaging-room.form.vue @@ -195,9 +195,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.mk-messaging-form > textarea cursor auto display block @@ -212,7 +210,7 @@ root(isDark) color var(--inputText) outline none border none - border-top solid 1px isDark ? #4b5056 : #eee + border-top solid 1px var(--faceDivider) border-radius 0 box-shadow none background transparent @@ -302,10 +300,4 @@ root(isDark) input[type=file] display none -.mk-messaging-form[data-darkmode] - root(true) - -.mk-messaging-form:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue index 0e60932796..0dc2622f9b 100644 --- a/src/client/app/common/views/components/poll.vue +++ b/src/client/app/common/views/components/poll.vue @@ -67,10 +67,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) - +.mk-poll > ul display block margin 0 @@ -82,8 +79,8 @@ root(isDark) margin 4px 0 padding 4px 8px width 100% - color isDark ? #fff : #000 - border solid 1px isDark ? #5e636f : #eee + color var(--pollChoiceText) + border solid 1px var(--pollChoiceBorder) border-radius 4px overflow hidden cursor pointer @@ -110,7 +107,7 @@ root(isDark) margin-left 4px > p - color isDark ? #a3aebf : #000 + color var(--text) a color inherit @@ -125,10 +122,4 @@ root(isDark) &:active background transparent -.mk-poll[data-darkmode] - root(true) - -.mk-poll:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue index 5f2cc5276a..5cc828082f 100644 --- a/src/client/app/common/views/components/tag-cloud.vue +++ b/src/client/app/common/views/components/tag-cloud.vue @@ -63,7 +63,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.jtivnzhfwquxpsfidertopbmwmchmnmo height 100% width 100% @@ -81,10 +81,4 @@ root(isDark) height 100% width 100% -.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode] - root(true) - -.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue index 0042dbe853..3d36d7449c 100644 --- a/src/client/app/common/views/components/trends.vue +++ b/src/client/app/common/views/components/trends.vue @@ -49,13 +49,14 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.csqvmxybqbycalfhkxvyfrgbrdalkaoc > .fetching > .empty margin 0 padding 16px text-align center - color #aaa + color var(--text) + opacity 0.7 > [data-fa] margin-right 4px @@ -70,13 +71,13 @@ root(isDark) padding 14px 16px &:not(:last-child) - border-bottom solid 1px isDark ? #393f4f : #eee + border-bottom solid 1px var(--faceDivider) > .tag flex 1 overflow hidden font-size 14px - color isDark ? #9baec8 : #65727b + color var(--text) > a display block @@ -94,10 +95,4 @@ root(isDark) > .chart height 30px -.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode] - root(true) - -.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue index c411f0f5c9..4934a1bdfa 100644 --- a/src/client/app/common/views/components/ui/button.vue +++ b/src/client/app/common/views/components/ui/button.vue @@ -32,7 +32,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark, fill) +root(fill) > button display block width 100% @@ -65,16 +65,10 @@ root(isDark, fill) &:active background var(--primaryAlpha03) -.ui-button[data-darkmode] +.ui-button &.fill - root(true, true) + root(true) &:not(.fill) - root(true, false) - -.ui-button:not([data-darkmode]) - &.fill - root(false, true) - &:not(.fill) - root(false, false) + root(false) </style> diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue index bccf36e52f..3fd7b47629 100644 --- a/src/client/app/common/views/components/ui/form/button.vue +++ b/src/client/app/common/views/components/ui/form/button.vue @@ -25,9 +25,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg display inline-block & + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg @@ -38,11 +36,11 @@ root(isDark) margin 0 padding 12px 20px font-size 14px - border 1px solid isDark ? #6d727d : #dcdfe6 + border 1px solid var(--formButtonBorder) border-radius 4px outline none box-shadow none - color isDark ? #fff : #606266 + color var(--text) transition 0.1s * @@ -51,12 +49,12 @@ root(isDark) &:hover &:focus color var(--primary) - //background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12) - //border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3) + background var(--formButtonHoverBg) + border-color var(--formButtonHoverBorder) &:active color var(--primaryDarken20) - //background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12) + background var(--formButtonActiveBg) border-color var(--primary) transition all 0s @@ -80,10 +78,4 @@ root(isDark) > button border-radius 64px -.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode] - root(true) - -.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode]) - root(false) - </style> 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 5728a8171b..396b2997e5 100644 --- a/src/client/app/common/views/components/ui/form/radio.vue +++ b/src/client/app/common/views/components/ui/form/radio.vue @@ -49,9 +49,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.uywduthvrdnlpsvsjkqigicixgyfctto display inline-flex margin 0 16px 0 0 cursor pointer @@ -93,7 +91,7 @@ root(isDark) width 20px height 20px background none - border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4) + border solid 2px var(--radioBorder) border-radius 100% transition inherit @@ -117,10 +115,4 @@ root(isDark) line-height 20px cursor pointer -.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode] - root(true) - -.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index d7b83d81cd..d7e72409f0 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -155,9 +155,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark, fill) +root(fill) margin 32px 0 > .icon @@ -335,16 +333,10 @@ root(isDark, fill) left 0 !important transform scale(0.75) -.ui-input[data-darkmode] - &.fill - root(true, true) - &:not(.fill) - root(true, false) - -.ui-input:not([data-darkmode]) +.ui-input &.fill - root(false, true) + root(true) &:not(.fill) - root(false, false) + root(false) </style> diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue index 3a4407abc0..868a339aa4 100644 --- a/src/client/app/common/views/components/ui/radio.vue +++ b/src/client/app/common/views/components/ui/radio.vue @@ -51,9 +51,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.ui-radio display inline-block margin 0 32px 0 0 cursor pointer @@ -111,10 +109,4 @@ root(isDark) line-height 20px cursor pointer -.ui-radio[data-darkmode] - root(true) - -.ui-radio:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue index bdb730fea9..8c1b8c0269 100644 --- a/src/client/app/common/views/components/ui/select.vue +++ b/src/client/app/common/views/components/ui/select.vue @@ -70,9 +70,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark, fill) +root(fill) margin 32px 0 > .icon @@ -200,16 +198,10 @@ root(isDark, fill) left 0 !important transform scale(0.75) -.ui-select[data-darkmode] - &.fill - root(true, true) - &:not(.fill) - root(true, false) - -.ui-select:not([data-darkmode]) +.ui-select &.fill - root(false, true) + root(true) &:not(.fill) - root(false, false) + root(false) </style> diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue index ef7ee111e2..cb4785f468 100644 --- a/src/client/app/common/views/pages/follow.vue +++ b/src/client/app/common/views/pages/follow.vue @@ -107,14 +107,12 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.syxhndwprovvuqhmyvveewmbqayniwkv padding 32px max-width 500px margin 0 auto text-align center - color isDark ? #9baec8 : #868c8c + color var(--text) $bg = var(--face) @@ -124,7 +122,6 @@ root(isDark) > .signed-in-as margin-bottom 16px font-size 14px - color isDark ? #9baec8 : #9daab3 > main margin-bottom 16px @@ -204,10 +201,4 @@ root(isDark) * pointer-events none -.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode] - root(true) - -.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue index 1725c2f1af..cfcdd5a1b6 100644 --- a/src/client/app/common/views/widgets/analog-clock.vue +++ b/src/client/app/common/views/widgets/analog-clock.vue @@ -26,16 +26,8 @@ export default define({ </script> <style lang="stylus" scoped> - - -root(isDark) +.mkw-analog-clock .mkw-analog-clock--body padding 8px -.mkw-analog-clock[data-darkmode] - root(true) - -.mkw-analog-clock:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue index 238b493a61..308d73bad8 100644 --- a/src/client/app/common/views/widgets/calendar.vue +++ b/src/client/app/common/views/widgets/calendar.vue @@ -116,9 +116,7 @@ export default define({ </script> <style lang="stylus" scoped> - - -root(isDark) +.mkw-calendar &[data-special='on-new-years-day'] border-color #ef95a0 @@ -169,7 +167,8 @@ root(isDark) margin 0 0 2px 0 font-size 12px line-height 18px - color isDark ? #7a8692 : #888 + color var(--text) + opacity 0.8 > b margin-left 2px @@ -177,7 +176,7 @@ root(isDark) > .meter width 100% overflow hidden - background isDark ? #1c1f25 : #eee + background var(--materBg) border-radius 8px > .val @@ -197,10 +196,4 @@ root(isDark) > .meter > .val background #41ddde -.mkw-calendar[data-darkmode] - root(true) - -.mkw-calendar:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue index a91aa8e749..b025b41e7d 100644 --- a/src/client/app/common/views/widgets/donation.vue +++ b/src/client/app/common/views/widgets/donation.vue @@ -1,13 +1,15 @@ <template> -<div class="mkw-donation" :data-mobile="platform == 'mobile'"> - <article> - <h1>%fa:heart%%i18n:@title%</h1> - <p v-if="meta"> - {{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }} - <a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a> - {{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }} - </p> - </article> +<div> + <mk-widget-container :show-header="false"> + <article class="dolfvtibguprpxxhfndqaosjitixjohx"> + <h1>%fa:heart%%i18n:@title%</h1> + <p v-if="meta"> + {{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }} + <a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a> + {{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }} + </p> + </article> + </mk-widget-container> </div> </template> @@ -30,46 +32,22 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) - background var(--face) - border solid 1px isDark ? #c3831c : #ead8bb - border-radius 6px +.dolfvtibguprpxxhfndqaosjitixjohx + padding 20px + background var(--donationBg) + color var(--donationFg) - > article - padding 20px + > h1 + margin 0 0 5px 0 + font-size 1em - > h1 - margin 0 0 5px 0 - font-size 1em - color isDark ? #b2bac1 : #888 + > [data-fa] + margin-right 0.25em - > [data-fa] - margin-right 0.25em - - > p - display block - z-index 1 - margin 0 - font-size 0.8em - color isDark ? #a1a6ab : #999 - - &[data-mobile] - border none - background #ead8bb - border-radius 8px - box-shadow 0 0 0 1px rgba(#000, 0.2) - - > article - > h1 - color #7b8871 - - > p - color #777d71 - -.mkw-donation[data-darkmode] - root(true) - -.mkw-donation:not([data-darkmode]) - root(false) + > p + display block + z-index 1 + margin 0 + font-size 0.8em </style> diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue index 42df683883..be8b18a4e9 100644 --- a/src/client/app/common/views/widgets/memo.vue +++ b/src/client/app/common/views/widgets/memo.vue @@ -57,9 +57,7 @@ export default define({ </script> <style lang="stylus" scoped> - - -root(isDark) +.mkw-memo .mkw-memo--body padding-bottom 28px + 16px @@ -69,10 +67,10 @@ root(isDark) max-width 100% min-width 100% padding 16px - color isDark ? #fff : #222 + color var(--inputText) background var(--face) border none - border-bottom solid 1px isDark ? #1c2023 : #eee + border-bottom solid 1px var(--faceDivider) border-radius 0 > button @@ -102,10 +100,4 @@ root(isDark) opacity 0.7 cursor default -.mkw-memo[data-darkmode] - root(true) - -.mkw-memo:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue index b9748bdf7c..2034aee0eb 100644 --- a/src/client/app/common/views/widgets/server.cpu.vue +++ b/src/client/app/common/views/widgets/server.cpu.vue @@ -38,7 +38,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.cpu > .pie padding 10px height 100px @@ -52,7 +52,7 @@ root(isDark) > p margin 0 font-size 12px - color isDark ? #a8b4bd : #505050 + color var(--chartCaption) &:first-child font-weight bold @@ -65,10 +65,4 @@ root(isDark) display block clear both -.cpu[data-darkmode] - root(true) - -.cpu:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue index 99ce624051..667576ab76 100644 --- a/src/client/app/common/views/widgets/server.disk.vue +++ b/src/client/app/common/views/widgets/server.disk.vue @@ -46,7 +46,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.disk > .pie padding 10px height 100px @@ -60,7 +60,7 @@ root(isDark) > p margin 0 font-size 12px - color isDark ? #a8b4bd : #505050 + color var(--chartCaption) &:first-child font-weight bold @@ -73,10 +73,4 @@ root(isDark) display block clear both -.disk[data-darkmode] - root(true) - -.disk:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue index 8a60621343..9e12884cf9 100644 --- a/src/client/app/common/views/widgets/server.memory.vue +++ b/src/client/app/common/views/widgets/server.memory.vue @@ -46,7 +46,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.memory > .pie padding 10px height 100px @@ -60,7 +60,7 @@ root(isDark) > p margin 0 font-size 12px - color isDark ? #a8b4bd : #505050 + color var(--chartCaption) &:first-child font-weight bold @@ -73,10 +73,4 @@ root(isDark) display block clear both -.memory[data-darkmode] - root(true) - -.memory:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue index d557c52ea5..ce342fd41b 100644 --- a/src/client/app/common/views/widgets/server.pie.vue +++ b/src/client/app/common/views/widgets/server.pie.vue @@ -45,7 +45,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +svg display block height 100% @@ -56,12 +56,6 @@ root(isDark) > text font-size 0.15px - fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6) - -svg[data-darkmode] - root(true) - -svg:not([data-darkmode]) - root(false) + fill var(--chartCaption) </style> |