diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2018-09-29 00:48:56 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-09-29 00:48:56 +0900 |
| commit | 8b68c5da372108abdef2fd5fc15133c1f15ef200 (patch) | |
| tree | 7e9a8bdd7d8842a67540ebe9f4e411db9d5d5095 /src/client/app/common | |
| parent | Fix 'URL is not defined' in MFM (#2782) (diff) | |
| parent | wip (diff) | |
| download | misskey-8b68c5da372108abdef2fd5fc15133c1f15ef200.tar.gz misskey-8b68c5da372108abdef2fd5fc15133c1f15ef200.tar.bz2 misskey-8b68c5da372108abdef2fd5fc15133c1f15ef200.zip | |
Merge pull request #2781 from syuilo/theme
Theme
Diffstat (limited to 'src/client/app/common')
57 files changed, 630 insertions, 1006 deletions
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue index ea05afd6dc..bc0120c9ab 100644 --- a/src/client/app/common/views/components/autocomplete.vue +++ b/src/client/app/common/views/components/autocomplete.vue @@ -259,15 +259,13 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.mk-autocomplete position fixed z-index 65535 max-width 100% margin-top calc(1em + 8px) overflow hidden - background isDark ? #313543 : #fff + background var(--faceHeader) border solid 1px rgba(#000, 0.1) border-radius 4px transition top 0.1s ease, left 0.1s ease @@ -299,16 +297,16 @@ root(isDark) text-overflow ellipsis &:hover - background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1) + background var(--autocompleteItemHoverBg) &[data-selected='true'] - background $theme-color + background var(--primary) &, * color #fff !important &:active - background darken($theme-color, 10%) + background var(--primaryDarken10) &, * color #fff !important @@ -325,15 +323,15 @@ root(isDark) .name margin 0 8px 0 0 - color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) + color var(--autocompleteItemText) .username - color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3) + color var(--autocompleteItemTextSub) > .hashtags > li .name - color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) + color var(--autocompleteItemText) > .emojis > li @@ -343,15 +341,9 @@ root(isDark) width 24px .name - color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) + color var(--autocompleteItemText) .alias margin 0 0 0 8px - color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3) - -.mk-autocomplete[data-darkmode] - root(true) - -.mk-autocomplete:not([data-darkmode]) - root(false) + color var(--autocompleteItemTextSub) </style> diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue index a2b0fc6bd3..ac018abcfc 100644 --- a/src/client/app/common/views/components/avatar.vue +++ b/src/client/app/common/views/components/avatar.vue @@ -58,6 +58,11 @@ export default Vue.extend({ }; } }, + mounted() { + if (this.user.avatarColor) { + this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`; + } + }, methods: { onClick(e) { this.$emit('click', e); @@ -67,8 +72,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - -root(isDark) +.mk-avatar display inline-block vertical-align bottom @@ -79,7 +83,7 @@ root(isDark) &.cat::before, &.cat::after background #df548f - border solid 4px isDark ? #e0eefd : #202224 + border solid 4px currentColor box-sizing border-box content '' display inline-block @@ -105,9 +109,4 @@ root(isDark) transition border-radius 1s ease z-index 1 -.mk-avatar[data-darkmode] - root(true) - -.mk-avatar:not([data-darkmode]) - root(false) </style> diff --git a/src/client/app/common/views/components/connect-failed.vue b/src/client/app/common/views/components/connect-failed.vue index 0f686926b0..36cae05665 100644 --- a/src/client/app/common/views/components/connect-failed.vue +++ b/src/client/app/common/views/components/connect-failed.vue @@ -39,7 +39,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' + .mk-connect-failed width 100% @@ -70,17 +70,17 @@ export default Vue.extend({ display block margin 1em auto 0 auto padding 8px 10px - color $theme-color-foreground - background $theme-color + color var(--primaryForeground) + background var(--primary) &:focus - outline solid 3px rgba($theme-color, 0.3) + outline solid 3px var(--primaryAlpha03) &:hover - background lighten($theme-color, 10%) + background var(--primaryLighten10) &:active - background darken($theme-color, 10%) + background var(--primaryDarken10) > .thanks display block diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue index 06087edc93..79917f82ab 100644 --- a/src/client/app/common/views/components/cw-button.vue +++ b/src/client/app/common/views/components/cw-button.vue @@ -22,23 +22,17 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.nrvgflfuaxwgkxoynpnumyookecqrrvh display inline-block padding 4px 8px font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 + color var(--cwButtonFg) + background var(--cwButtonBg) border-radius 2px cursor pointer user-select none &:hover - background isDark ? #707b97 : #bbc4ce - -.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode] - root(true) - -.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode]) - root(false) + background var(--cwButtonHoverBg) </style> diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue index de627181ef..b303b48b79 100644 --- a/src/client/app/common/views/components/forkit.vue +++ b/src/client/app/common/views/components/forkit.vue @@ -9,7 +9,7 @@ </template> <style lang="stylus" scoped> -@import '~const.styl' + .a display block @@ -18,8 +18,8 @@ display block //fill #151513 //color #fff - fill $theme-color - color $theme-color-foreground + fill var(--primary) + color var(--primaryForeground) .octo-arm transform-origin 130px 106px 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 fea19d917e..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> -@import '~const.styl' - -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,30 +384,30 @@ 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 - border-color darken($theme-color, 10%) - background $theme-color + border-color var(--primaryDarken10) + background var(--primary) &:active - background darken($theme-color, 10%) + background var(--primaryDarken10) &.prev - box-shadow 0 0 0 4px rgba($theme-color, 0.7) + 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 d23902aae7..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> -@import '~const.styl' - -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 - background isDark ? #282c37 : #fff - box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) + color var(--text) + background var(--face) + box-shadow 0 2px 16px var(--reversiListItemShadow) border-radius 6px cursor pointer @@ -200,13 +198,13 @@ root(isDark) user-select none &:focus - border-color $theme-color + 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 - background isDark ? #282c37 : #fff - box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) + color var(--text) + background var(--face) + 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 fef833d63e..9f0d9c23fb 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 @@ -47,9 +47,9 @@ </header> <div> - <mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/> - <mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/> - <mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/> + <ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch> + <ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch> + <ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch> </div> </div> @@ -60,7 +60,7 @@ <div> <template v-for="item in form"> - <mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch> + <ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch> <div class="card" v-if="item.type == 'radio'" :key="item.id"> <header> @@ -252,11 +252,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.urbixznjwwuukfsckrwzwsqzsxornqij text-align center - background isDark ? #191b22 : #f9f9f9 + background var(--bg) > header padding 8px @@ -273,10 +271,10 @@ root(isDark) > select width 100% padding 12px 14px - background isDark ? #282C37 : #fff - border 1px solid isDark ? #6a707d : #dcdfe6 + background var(--face) + 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,17 +282,18 @@ root(isDark) appearance none &:hover - border-color isDark ? #a7aebd : #c0c4cc + border-color var(--reversiMapSelectHoverBorder) &:focus &:active - border-color $theme-color + border-color var(--primary) > div > .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 @@ -331,32 +330,26 @@ root(isDark) .card max-width 400px border-radius 4px - background isDark ? #282C37 : #fff - color isDark ? #fff : #303133 - box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1) + background var(--face) + 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 223ec4597a..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> -@import '~const.styl' - -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/google.vue b/src/client/app/common/views/components/google.vue index 8272961ef2..ac71a5e56d 100644 --- a/src/client/app/common/views/components/google.vue +++ b/src/client/app/common/views/components/google.vue @@ -26,7 +26,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.mk-google display flex margin 8px 0 @@ -37,31 +37,25 @@ root(isDark) height 40px font-family sans-serif font-size 16px - color isDark ? #dee4e8 : #55595c - background isDark ? #191b22 : #fff - border solid 1px isDark ? #495156 : #dadada + color var(--googleSearchFg) + background var(--googleSearchBg) + border solid 1px var(--googleSearchBorder) border-radius 4px 0 0 4px &:hover - border-color isDark ? #777c86 : #b0b0b0 + border-color var(--googleSearchHoverBorder) > button flex-shrink 0 padding 0 16px - border solid 1px isDark ? #495156 : #dadada + border solid 1px var(--googleSearchBorder) border-left none border-radius 0 4px 4px 0 &:hover - background-color isDark ? #2e3440 : #eee + background-color var(--googleSearchHoverButton) &:active box-shadow 0 2px 4px rgba(#000, 0.15) inset -.mk-google[data-darkmode] - root(true) - -.mk-google:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 0a3d0d0ae6..0dea38a7a1 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -1,5 +1,6 @@ import Vue from 'vue'; +import theme from './theme.vue'; import instance from './instance.vue'; import cwButton from './cw-button.vue'; import tagCloud from './tag-cloud.vue'; @@ -30,7 +31,6 @@ import messagingRoom from './messaging-room.vue'; import urlPreview from './url-preview.vue'; import twitterSetting from './twitter-setting.vue'; import fileTypeIcon from './file-type-icon.vue'; -import Switch from './switch.vue'; import Reversi from './games/reversi/reversi.vue'; import welcomeTimeline from './welcome-timeline.vue'; import uiInput from './ui/input.vue'; @@ -44,6 +44,7 @@ import uiSelect from './ui/select.vue'; import formButton from './ui/form/button.vue'; import formRadio from './ui/form/radio.vue'; +Vue.component('mk-theme', theme); Vue.component('mk-instance', instance); Vue.component('mk-cw-button', cwButton); Vue.component('mk-tag-cloud', tagCloud); @@ -74,7 +75,6 @@ Vue.component('mk-messaging-room', messagingRoom); Vue.component('mk-url-preview', urlPreview); Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-file-type-icon', fileTypeIcon); -Vue.component('mk-switch', Switch); Vue.component('mk-reversi', Reversi); Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('ui-input', uiInput); diff --git a/src/client/app/common/views/components/instance.vue b/src/client/app/common/views/components/instance.vue index 14c6664eff..c3935cce0e 100644 --- a/src/client/app/common/views/components/instance.vue +++ b/src/client/app/common/views/components/instance.vue @@ -26,9 +26,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) - color isDark ? #fff : #5b646f - background isDark ? #21242f : #fff +.nhasjydimbopojusarffqjyktglcuxjy + color var(--text) + background var(--face) text-align center > .banner @@ -48,10 +48,4 @@ root(isDark) display block padding-bottom 16px -.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode] - root(true) - -.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue index 211dbf0208..0f5981d3c4 100644 --- a/src/client/app/common/views/components/media-banner.vue +++ b/src/client/app/common/views/components/media-banner.vue @@ -43,7 +43,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.mk-media-banner width 100% border-radius 4px margin-top 4px @@ -71,7 +71,7 @@ root(isDark) font-size 1.6em > .download - background isDark ? #21242d : #f7f7f7 + background var(--noteAttachedFile) > .sensitive background #111 @@ -82,9 +82,4 @@ root(isDark) display block width 100% -.mk-media-banner[data-darkmode] - root(true) - -.mk-media-banner:not([data-darkmode]) - root(false) </style> diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue index ad5ec619ba..be2c03f54c 100644 --- a/src/client/app/common/views/components/menu.vue +++ b/src/client/app/common/views/components/menu.vue @@ -117,10 +117,8 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) - $bg-color = isDark ? #2c303c : #fff +.onchrpzrvnoruiaenfcqvccjfuupzzwv + $bg-color = var(--popupBg) $border-color = rgba(27, 31, 35, 0.15) position initial @@ -132,7 +130,7 @@ root(isDark) z-index 10000 width 100% height 100% - background rgba(#000, isDark ? 0.5 : 0.1) + background var(--modalBackdrop) opacity 0 > .popover @@ -179,26 +177,20 @@ root(isDark) display block padding 8px 16px width 100% - color isDark ? #d6dce2 : #111 + color var(--popupFg) &:hover - color $theme-color-foreground - background $theme-color + color var(--primaryForeground) + background var(--primary) text-decoration none &:active - color $theme-color-foreground - background darken($theme-color, 10%) + color var(--primaryForeground) + background var(--primaryDarken10) > div margin 8px 0 height 1px - background isDark ? #1c2023 : #eee - -.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode] - root(true) - -.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode]) - root(false) + background var(--faceDivider) </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 f183749fad..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> -@import '~const.styl' - -root(isDark) +.mk-messaging-form > textarea cursor auto display block @@ -209,10 +207,10 @@ 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 + border-top solid 1px var(--faceDivider) border-radius 0 box-shadow none background transparent @@ -234,10 +232,10 @@ root(isDark) transition color 0.1s ease &:hover - color $theme-color + color var(--primary) &:active - color darken($theme-color, 10%) + color var(--primaryDarken10) transition color 0s ease .files @@ -293,19 +291,13 @@ root(isDark) transition color 0.1s ease &:hover - color $theme-color + color var(--primary) &:active - color darken($theme-color, 10%) + color var(--primaryDarken10) transition color 0s ease 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/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index 648d0eee18..77bf55c52c 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -59,10 +59,8 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) - $me-balloon-color = $theme-color +.message + $me-balloon-color = var(--primary) padding 10px 12px 10px 12px background-color transparent @@ -179,7 +177,7 @@ root(isDark) display block margin 2px 0 0 0 font-size 10px - color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4) + color var(--messagingRoomMessageInfo) > [data-fa] margin-left 4px @@ -192,7 +190,7 @@ root(isDark) padding-left 66px > .balloon - $color = isDark ? #2d3338 : #eee + $color = var(--messagingRoomMessageBg) float left background $color @@ -208,8 +206,7 @@ root(isDark) > .content > .text - if isDark - color #fff + color var(--messagingRoomMessageFg) > footer text-align left @@ -250,18 +247,9 @@ root(isDark) > .read user-select none - margin 0 4px 0 0 - color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5) - font-size 11px &[data-is-deleted] > .balloon opacity 0.5 -.message[data-darkmode] - root(true) - -.message:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue index 1de41855df..98661bc39d 100644 --- a/src/client/app/common/views/components/messaging-room.vue +++ b/src/client/app/common/views/components/messaging-room.vue @@ -262,14 +262,12 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.mk-messaging-room display flex flex 1 flex-direction column height 100% - background isDark ? #191b22 : #fff + background var(--messagingRoomBg) > .body width 100% @@ -277,24 +275,15 @@ root(isDark) margin 0 auto flex 1 - > .init - width 100% - margin 0 - padding 16px 8px 8px 8px - text-align center - font-size 0.8em - color rgba(isDark ? #fff : #000, 0.4) - - [data-fa] - margin-right 4px - + > .init, > .empty width 100% margin 0 padding 16px 8px 8px 8px text-align center font-size 0.8em - color rgba(isDark ? #fff : #000, 0.4) + color var(--messagingRoomInfo) + opacity 0.5 [data-fa] margin-right 4px @@ -305,7 +294,8 @@ root(isDark) padding 16px text-align center font-size 0.8em - color rgba(isDark ? #fff : #000, 0.4) + color var(--messagingRoomInfo) + opacity 0.5 [data-fa] margin-right 4px @@ -349,7 +339,7 @@ root(isDark) left 0 right 0 margin 0 auto - background rgba(isDark ? #fff : #000, 0.1) + background var(--messagingRoomDateDividerLine) > span display inline-block @@ -357,8 +347,8 @@ root(isDark) padding 0 16px //font-weight bold line-height 32px - color rgba(isDark ? #fff : #000, 0.3) - background isDark ? #191b22 : #fff + color var(--messagingRoomDateDividerText) + background var(--messagingRoomBg) > footer position -webkit-sticky @@ -369,7 +359,7 @@ root(isDark) max-width 600px margin 0 auto padding 0 - background rgba(isDark ? #282c37 : #fff, 0.95) + //background rgba(var(--face), 0.95) background-clip content-box > .new-message @@ -386,15 +376,15 @@ root(isDark) cursor pointer line-height 32px font-size 12px - color $theme-color-foreground - background $theme-color + color var(--primaryForeground) + background var(--primary) border-radius 16px &:hover - background lighten($theme-color, 10%) + background var(--primaryLighten10) &:active - background darken($theme-color, 10%) + background var(--primaryDarken10) > [data-fa] position absolute @@ -410,10 +400,4 @@ root(isDark) transition opacity 0.5s opacity 0 -.mk-messaging-room[data-darkmode] - root(true) - -.mk-messaging-room:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue index 6abfc92dca..91453e16ec 100644 --- a/src/client/app/common/views/components/messaging.vue +++ b/src/client/app/common/views/components/messaging.vue @@ -167,9 +167,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.mk-messaging &[data-compact] font-size 0.8em @@ -204,12 +202,10 @@ root(isDark) left 0 z-index 1 width 100% - background #fff box-shadow 0 0px 2px rgba(#000, 0.2) > .form - padding 8px - background isDark ? #282c37 : #f7f7f7 + background rgba(0, 0, 0, 0.02) > label display block @@ -229,32 +225,22 @@ root(isDark) bottom 0 left 0 width 1em - line-height 56px + line-height 48px margin auto color #555 > input margin 0 - padding 0 0 0 32px + padding 0 0 0 42px width 100% font-size 1em - line-height 38px - color #000 + line-height 48px + color var(--faceText) outline none - background isDark ? #191b22 : #fff - border solid 1px isDark ? #495156 : #eee + background transparent + border none border-radius 5px box-shadow none - transition color 0.5s ease, border 0.5s ease - - &:hover - border solid 1px isDark ? #b0b0b0 : #ddd - transition border 0.2s ease - - &:focus - color darken($theme-color, 20%) - border solid 1px $theme-color - transition color 0, border 0 > .result display block @@ -287,7 +273,7 @@ root(isDark) &:hover &:focus color #fff - background $theme-color + background var(--primary) .name color #fff @@ -297,7 +283,7 @@ root(isDark) &:active color #fff - background darken($theme-color, 10%) + background var(--primaryDarken10) .name color #fff @@ -329,21 +315,21 @@ root(isDark) > a display block text-decoration none - background isDark ? #282c37 : #fff - border-bottom solid 1px isDark ? #1c2023 : #eee + background var(--face) + border-bottom solid 1px var(--faceDivider) * pointer-events none user-select none &:hover - background isDark ? #1e2129 : #fafafa + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05) - > .avatar + .avatar filter saturate(200%) &:active - background isDark ? #14161b : #eee + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1) &[data-is-read] &[data-is-me] @@ -383,17 +369,17 @@ root(isDark) overflow hidden text-overflow ellipsis font-size 1em - color isDark ? #fff : rgba(#000, 0.9) + color var(--noteHeaderName) font-weight bold transition all 0.1s ease > .username margin 0 8px - color isDark ? #606984 : rgba(#000, 0.5) + color var(--noteHeaderAcct) > .mk-time margin 0 0 0 auto - color isDark ? #606984 : rgba(#000, 0.5) + color var(--noteHeaderInfo) font-size 80% > .avatar @@ -413,10 +399,10 @@ root(isDark) overflow hidden overflow-wrap break-word font-size 1.1em - color isDark ? #fff : rgba(#000, 0.8) + color var(--faceText) .me - color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4) + opacity 0.7 > .image display block @@ -461,10 +447,4 @@ root(isDark) > .avatar margin 0 12px 0 0 -.mk-messaging[data-darkmode] - root(true) - -.mk-messaging:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue index d25bd430f2..8192d88412 100644 --- a/src/client/app/common/views/components/note-header.vue +++ b/src/client/app/common/views/components/note-header.vue @@ -42,9 +42,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.bvonvjxbwzaiskogyhbwgyxvcgserpmu display flex align-items baseline white-space nowrap @@ -61,7 +59,7 @@ root(isDark) margin 0 .5em 0 0 padding 0 overflow hidden - color isDark ? #fff : #627079 + color var(--noteHeaderName) font-size 1em font-weight bold text-decoration none @@ -82,19 +80,19 @@ root(isDark) margin 0 .5em 0 0 padding 1px 6px font-size 80% - color isDark ? #758188 : #aaa - border solid 1px isDark ? #57616f : #ddd + color var(--noteHeaderBadgeFg) + background var(--noteHeaderBadgeBg) border-radius 3px &.is-admin - border-color isDark ? #d42c41 : #f56a7b - color isDark ? #d42c41 : #f56a7b + background var(--noteHeaderAdminBg) + color var(--noteHeaderAdminFg) > .username margin 0 .5em 0 0 overflow hidden text-overflow ellipsis - color isDark ? #606984 : #ccc + color var(--noteHeaderAcct) flex-shrink 2147483647 > .info @@ -102,7 +100,7 @@ root(isDark) font-size 0.9em > * - color isDark ? #606984 : #c0c0c0 + color var(--noteHeaderInfo) > .mobile margin-right 8px @@ -110,15 +108,9 @@ root(isDark) > .app margin-right 8px padding-right 8px - border-right solid 1px isDark ? #1c2023 : #eaeaea + border-right solid 1px var(--faceDivider) > .visibility margin-left 8px -.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode] - root(true) - -.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue index 30d9799fec..b5c57d48a5 100644 --- a/src/client/app/common/views/components/poll-editor.vue +++ b/src/client/app/common/views/components/poll-editor.vue @@ -68,9 +68,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.mk-poll-editor padding 8px > .caution @@ -103,49 +101,43 @@ root(isDark) padding 6px 8px width 300px font-size 14px - color isDark ? #fff : #000 - background isDark ? #191b22 : #fff - border solid 1px rgba($theme-color, 0.1) + color var(--inputText) + background var(--pollEditorInputBg) + border solid 1px var(--primaryAlpha01) border-radius 4px &:hover - border-color rgba($theme-color, 0.2) + border-color var(--primaryAlpha02) &:focus - border-color rgba($theme-color, 0.5) + border-color var(--primaryAlpha05) > button padding 4px 8px - color rgba($theme-color, 0.4) + color var(--primaryAlpha04) &:hover - color rgba($theme-color, 0.6) + color var(--primaryAlpha06) &:active - color darken($theme-color, 30%) + color var(--primaryDarken30) > .add margin 8px 0 0 0 vertical-align top - color $theme-color + color var(--primary) > .destroy position absolute top 0 right 0 padding 4px 8px - color rgba($theme-color, 0.4) + color var(--primaryAlpha04) &:hover - color rgba($theme-color, 0.6) + color var(--primaryAlpha06) &:active - color darken($theme-color, 30%) - -.mk-poll-editor[data-darkmode] - root(true) - -.mk-poll-editor:not([data-darkmode]) - root(false) + color var(--primaryDarken30) </style> diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue index 4fe51d219b..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> -@import '~const.styl' - -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 @@ -99,7 +96,7 @@ root(isDark) top 0 left 0 height 100% - background $theme-color + background var(--primary) transition width 1s ease > span @@ -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/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index f732e40b9d..13e8cf1f07 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -210,11 +210,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - $border-color = rgba(27, 31, 35, 0.15) -root(isDark) +.mk-reaction-picker position initial > .backdrop @@ -224,11 +222,11 @@ root(isDark) z-index 10000 width 100% height 100% - background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) + background var(--modalBackdrop) opacity 0 > .popover - $bgcolor = isDark ? #2c303c : #fff + $bgcolor = var(--popupBg) position absolute z-index 10001 background $bgcolor @@ -281,8 +279,8 @@ root(isDark) margin 0 padding 8px 10px font-size 14px - color isDark ? #d6dce2 : #586069 - border-bottom solid 1px isDark ? #1c2023 : #e1e4e8 + color var(--popupFg) + border-bottom solid 1px var(--faceDivider) > div padding 4px @@ -301,7 +299,7 @@ root(isDark) right 0 bottom 0 left 0 - border 2px solid rgba($theme-color, 0.3) + border 2px solid var(--primaryAlpha03) border-radius 4px > button @@ -312,16 +310,10 @@ root(isDark) border-radius 2px &:hover - background isDark ? #252731 : #eee + background var(--reactionPickerButtonHoverBg) &:active - background $theme-color + background var(--primary) box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) -.mk-reaction-picker[data-darkmode] - root(true) - -.mk-reaction-picker:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index c30fa2a1dc..9212a84b31 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -39,10 +39,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) - $borderColor = isDark ? #5e6673 : #eee - border-top dashed 1px $borderColor - border-bottom dashed 1px $borderColor +.mk-reactions-viewer + border-top dashed 1px var(--reactionViewerBorder) + border-bottom dashed 1px var(--reactionViewerBorder) margin 4px 0 &:empty @@ -60,12 +59,6 @@ root(isDark) > span margin-left 4px font-size 1.2em - color isDark ? #d1d5dc : #444 - -.mk-reactions-viewer[data-darkmode] - root(true) - -.mk-reactions-viewer:not([data-darkmode]) - root(false) + color var(--text) </style> diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue index b1c6782e93..e02af8154c 100644 --- a/src/client/app/common/views/components/signin.vue +++ b/src/client/app/common/views/components/signin.vue @@ -68,7 +68,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' + .mk-signin color #555 diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue index f603b9545c..e55d7ee3e3 100644 --- a/src/client/app/common/views/components/signup.vue +++ b/src/client/app/common/views/components/signup.vue @@ -151,7 +151,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' + .mk-signup min-width 302px diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue deleted file mode 100644 index 32caab638a..0000000000 --- a/src/client/app/common/views/components/switch.vue +++ /dev/null @@ -1,199 +0,0 @@ -<template> -<div - class="mk-switch" - :class="{ disabled, checked }" - role="switch" - :aria-checked="checked" - :aria-disabled="disabled" - @click="switchValue" - @mouseover="mouseenter" -> - <input - type="checkbox" - @change="handleChange" - ref="input" - :disabled="disabled" - @keydown.enter="switchValue" - > - <span class="button"> - <span :style="{ transform }"></span> - </span> - <span class="label"> - <span :aria-hidden="!checked">{{ text }}</span> - <p :aria-hidden="!checked"> - <slot></slot> - </p> - </span> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -export default Vue.extend({ - props: { - value: { - type: Boolean, - default: false - }, - disabled: { - type: Boolean, - default: false - }, - text: String - },/* - created() { - if (!~[true, false].indexOf(this.value)) { - this.$emit('input', false); - } - },*/ - computed: { - checked(): boolean { - return this.value; - }, - transform(): string { - return this.checked ? 'translate3d(20px, 0, 0)' : ''; - } - }, - watch: { - value() { - (this.$el).style.transition = 'all 0.3s'; - (this.$refs.input as any).checked = this.checked; - } - }, - mounted() { - (this.$refs.input as any).checked = this.checked; - }, - methods: { - mouseenter() { - (this.$el).style.transition = 'all 0s'; - }, - handleChange() { - (this.$el).style.transition = 'all 0.3s'; - this.$emit('input', !this.checked); - this.$emit('change', !this.checked); - this.$nextTick(() => { - // set input's checked property - // in case parent refuses to change component's value - (this.$refs.input as any).checked = this.checked; - }); - }, - switchValue() { - !this.disabled && this.handleChange(); - } - } -}); -</script> - -<style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) - display flex - margin 12px 0 - cursor pointer - transition all 0.3s - - > * - user-select none - - &.disabled - opacity 0.6 - cursor not-allowed - - &.checked - > .button - background-color $theme-color - border-color $theme-color - - > .label - > span - color $theme-color - - &:hover - > .label - > span - color darken($theme-color, 10%) - - > .button - background darken($theme-color, 10%) - border-color darken($theme-color, 10%) - - &:hover - > .label - > span - color isDark ? #fff : #2e3338 - - > .button - $color = isDark ? #15181d : #ced2da - background $color - border-color $color - - > input - position absolute - width 0 - height 0 - opacity 0 - margin 0 - - &:focus + .button - &:after - content "" - pointer-events none - position absolute - top -5px - right -5px - bottom -5px - left -5px - border 2px solid rgba($theme-color, 0.3) - border-radius 14px - - > .button - $color = isDark ? #1c1f25 : #dcdfe6 - - display inline-block - margin 0 - width 40px - min-width 40px - height 20px - min-height 20px - background $color - border 1px solid $color - outline none - border-radius 10px - transition inherit - - > * - position absolute - top 1px - left 1px - border-radius 100% - transition transform 0.3s - width 16px - height 16px - background-color #fff - - > .label - margin-left 8px - display block - font-size 15px - cursor pointer - transition inherit - - > span - display block - line-height 20px - color isDark ? #c4ccd2 : #4a535a - transition inherit - - > p - margin 0 - //font-size 90% - color isDark ? #78858e : #9daab3 - -.mk-switch[data-darkmode] - root(true) - -.mk-switch: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/theme.vue b/src/client/app/common/views/components/theme.vue new file mode 100644 index 0000000000..27888d1e85 --- /dev/null +++ b/src/client/app/common/views/components/theme.vue @@ -0,0 +1,179 @@ +<template> +<div class="nicnklzforebnpfgasiypmpdaaglujqm"> + <label> + <span>%i18n:@light-theme%</span> + <ui-select v-model="light" placeholder="%i18n:@light-theme%"> + <option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option> + </ui-select> + </label> + + <label> + <span>%i18n:@dark-theme%</span> + <ui-select v-model="dark" placeholder="%i18n:@dark-theme%"> + <option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option> + </ui-select> + </label> + + <details class="creator"> + <summary>%i18n:@create-a-theme%</summary> + <div> + <span>%i18n:@base-theme%:</span> + <ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio> + <ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio> + </div> + <div> + <ui-input v-model="myThemeName"> + <span>%i18n:@theme-name%</span> + </ui-input> + </div> + <div> + <div style="padding-bottom:8px;">%i18n:@primary-color%:</div> + <color-picker v-model="myThemePrimary"/> + </div> + <div> + <div style="padding-bottom:8px;">%i18n:@secondary-color%:</div> + <color-picker v-model="myThemeSecondary"/> + </div> + <div> + <div style="padding-bottom:8px;">%i18n:@text-color%:</div> + <color-picker v-model="myThemeText"/> + </div> + <ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button> + <ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button> + </details> + + <details> + <summary>%i18n:@install-a-theme%</summary> + <ui-textarea v-model="installThemeCode"> + <span>%i18n:@theme-code%</span> + </ui-textarea> + <ui-button @click="install()">%i18n:@install%</ui-button> + </details> + + <details> + <summary>%i18n:@installed-themes%</summary> + <ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%"> + <option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option> + </ui-select> + <ui-textarea readonly :value="selectedInstalledThemeCode"> + <span>%i18n:@theme-code%</span> + </ui-textarea> + </details> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import { apiUrl, docsUrl } from '../../../config'; +import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme'; +import { Chrome } from 'vue-color'; +import * as uuid from 'uuid'; +import * as tinycolor from 'tinycolor2'; + +export default Vue.extend({ + components: { + ColorPicker: Chrome + }, + + data() { + return { + installThemeCode: null, + selectedInstalledTheme: null, + myThemeBase: 'light', + myThemeName: '', + myThemePrimary: lightTheme.meta.vars.primary, + myThemeSecondary: lightTheme.meta.vars.secondary, + myThemeText: lightTheme.meta.vars.text + }; + }, + + computed: { + themes(): any { + return this.$store.state.device.themes.concat(builtinThemes); + }, + + installedThemes(): any { + return this.$store.state.device.themes; + }, + + light: { + get() { return this.$store.state.device.lightTheme; }, + set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); } + }, + + dark: { + get() { return this.$store.state.device.darkTheme; }, + set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); } + }, + + selectedInstalledThemeCode() { + if (this.selectedInstalledTheme == null) return null; + return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme)); + }, + + myTheme(): any { + return { + meta: { + name: this.myThemeName, + author: this.$store.state.i.name, + base: this.myThemeBase, + vars: { + primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(), + secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(), + text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString() + } + } + }; + } + }, + + watch: { + myThemeBase(v) { + const theme = v == 'light' ? lightTheme : darkTheme; + this.myThemePrimary = theme.meta.vars.primary; + this.myThemeSecondary = theme.meta.vars.secondary; + this.myThemeText = theme.meta.vars.text; + } + }, + + methods: { + install() { + const theme = JSON.parse(this.installThemeCode); + if (theme.meta == null || theme.meta.id == null) { + alert('%i18n:@invalid-theme%'); + return; + } + if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) { + alert('%i18n:@already-installed%'); + return; + } + const themes = this.$store.state.device.themes.concat(theme); + this.$store.commit('device/set', { + key: 'themes', value: themes + }); + }, + + preview() { + applyTheme(this.myTheme, false); + }, + + gen() { + const theme = this.myTheme; + theme.meta.id = uuid(); + const themes = this.$store.state.device.themes.concat(theme); + this.$store.commit('device/set', { + key: 'themes', value: themes + }); + alert('%i18n:@saved%'); + } + } +}); +</script> + +<style lang="stylus" scoped> +.nicnklzforebnpfgasiypmpdaaglujqm + > .creator + > div + padding 16px 0 + border-bottom solid 1px var(--faceDivider) +</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 e778750354..b29f8bb1c9 100644 --- a/src/client/app/common/views/components/ui/button.vue +++ b/src/client/app/common/views/components/ui/button.vue @@ -1,9 +1,7 @@ <template> -<div class="ui-button" :class="[styl]"> - <button :type="type" @click="$emit('click')"> - <slot></slot> - </button> -</div> +<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')"> + <slot></slot> +</button> </template> <script lang="ts"> @@ -13,70 +11,90 @@ export default Vue.extend({ type: { type: String, required: false + }, + primary: { + type: Boolean, + required: false, + default: false + }, + inline: { + type: Boolean, + required: false, + default: false } }, data() { return { styl: 'fill' }; - }, - inject: { - isCardChild: { default: false } - }, - created() { - if (this.isCardChild) { - this.styl = 'line'; - } } }); </script> <style lang="stylus" scoped> -@import '~const.styl' +.dmtdnykelhudezerjlfpbhgovrgnqqgr + display block + width 100% + min-height 40px + margin 0 + padding 0 + font-weight normal + font-size 16px + border none + border-radius 6px + outline none + box-shadow none + + &:focus + &:after + content "" + pointer-events none + position absolute + top -5px + right -5px + bottom -5px + left -5px + border 2px solid var(--primaryAlpha03) + border-radius 10px -root(isDark, fill) - > button - display block - width 100% - margin 0 - padding 0 + &:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr + margin-top 16px + + &.inline + display inline-block + width auto + + &.primary font-weight bold - font-size 16px - line-height 44px - border none - border-radius 6px - outline none - box-shadow none - if fill - color $theme-color-foreground - background $theme-color + &.fill + color var(--text) + background var(--buttonBg) + + &:hover + background var(--buttonHoverBg) - &:hover - background lighten($theme-color, 5%) + &:active + background var(--buttonActiveBg) - &:active - background darken($theme-color, 5%) - else - color $theme-color - background none + &.primary + color var(--primaryForeground) + background var(--primary) &:hover - color darken($theme-color, 5%) + background var(--primaryLighten5) &:active - background rgba($theme-color, 0.3) + background var(--primaryDarken5) -.ui-button[data-darkmode] - &.fill - root(true, true) &:not(.fill) - root(true, false) + color var(--primary) + background none -.ui-button:not([data-darkmode]) - &.fill - root(false, true) - &:not(.fill) - root(false, false) + &:hover + color var(--primaryDarken5) + + &:active + background var(--primaryAlpha03) </style> diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue index aa16b557e1..a37a38d340 100644 --- a/src/client/app/common/views/components/ui/card.vue +++ b/src/client/app/common/views/components/ui/card.vue @@ -20,26 +20,24 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.ui-card margin 16px - color isDark ? #fff : #000 - background isDark ? #282C37 : #fff + color var(--faceText) + background var(--face) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) > header padding 16px font-weight bold font-size 20px - color isDark ? #fff : #444 + color var(--faceText) @media (min-width 500px) padding 24px 32px > section padding 20px 16px - border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1) + border-top solid 1px var(--faceDivider) @media (min-width 500px) padding 32px @@ -50,12 +48,5 @@ root(isDark) > header margin-bottom 16px font-weight bold - color isDark ? #fff : #444 - -.ui-card[data-darkmode] - root(true) - -.ui-card:not([data-darkmode]) - root(false) - + color var(--faceText) </style> diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue index fc8fdad9c4..5c5bbd7256 100644 --- a/src/client/app/common/views/components/ui/form.vue +++ b/src/client/app/common/views/components/ui/form.vue @@ -19,7 +19,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' + .ui-form > fieldset 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 9c37b3118b..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> -@import '~const.styl' - -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 * @@ -50,40 +48,34 @@ root(isDark) &:hover &:focus - color $theme-color - background rgba($theme-color, isDark ? 0.2 : 0.12) - border-color rgba($theme-color, isDark ? 0.5 : 0.3) + color var(--primary) + background var(--formButtonHoverBg) + border-color var(--formButtonHoverBorder) &:active - color darken($theme-color, 20%) - background rgba($theme-color, 0.12) - border-color $theme-color + color var(--primaryDarken20) + background var(--formButtonActiveBg) + border-color var(--primary) transition all 0s &.primary > button - border 1px solid $theme-color - background $theme-color - color $theme-color-foreground + border 1px solid var(--primary) + background var(--primary) + color var(--primaryForeground) &:hover &:focus - background lighten($theme-color, 20%) - border-color lighten($theme-color, 20%) + background var(--primaryLighten20) + border-color var(--primaryLighten20) &:active - background darken($theme-color, 20%) - border-color darken($theme-color, 20%) + background var(--primaryDarken20) + border-color var(--primaryDarken20) transition all 0s &.round > 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 831981bb3e..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> -@import '~const.styl' - -root(isDark) +.uywduthvrdnlpsvsjkqigicixgyfctto display inline-flex margin 0 16px 0 0 cursor pointer @@ -62,7 +60,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 @@ -70,15 +68,15 @@ root(isDark) &.checked > .button - border-color $theme-color + border-color var(--primary) &:after - background-color $theme-color + background-color var(--primary) transform scale(1) opacity 1 > .label - color $theme-color + color var(--primary) > input position absolute @@ -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 ce28bfb12a..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> -@import '~const.styl' - -root(isDark, fill) +root(fill) margin 32px 0 > .icon @@ -167,7 +165,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 +181,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 '' @@ -193,7 +191,7 @@ root(isDark, fill) left 0 right 0 height 2px - background $theme-color + background var(--primary) opacity 0 transform scaleX(0.12) transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) @@ -242,7 +240,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 +255,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 +278,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 @@ -325,7 +323,7 @@ root(isDark, fill) transform scaleX(1) > .label - color $theme-color + color var(--primary) &.focused &.filled @@ -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 dcdda1cf0e..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> -@import '~const.styl' - -root(isDark) +.ui-radio display inline-block margin 0 32px 0 0 cursor pointer @@ -68,10 +66,10 @@ root(isDark) &.checked > .button - border-color $theme-color + border-color var(--primary) &:after - background-color $theme-color + background-color var(--primary) transform scale(1) opacity 1 @@ -87,7 +85,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 @@ -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 4273a4a0de..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> -@import '~const.styl' - -root(isDark, fill) +root(fill) margin 32px 0 > .icon @@ -103,7 +101,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 '' @@ -113,7 +111,7 @@ root(isDark, fill) left 0 right 0 height 2px - background $theme-color + background var(--primary) opacity 0 transform scaleX(0.12) transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) @@ -143,7 +141,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 @@ -190,7 +188,7 @@ root(isDark, fill) transform scaleX(1) > .label - color $theme-color + color var(--primary) &.focused &.filled @@ -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/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue index e88b867801..935f219833 100644 --- a/src/client/app/common/views/components/ui/switch.vue +++ b/src/client/app/common/views/components/ui/switch.vue @@ -19,7 +19,7 @@ <span class="label"> <span :aria-hidden="!checked"><slot></slot></span> <p :aria-hidden="!checked"> - <slot name="text"></slot> + <slot name="desc"></slot> </p> </span> </div> @@ -56,9 +56,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.ui-switch display flex margin 32px 0 cursor pointer @@ -79,11 +77,11 @@ root(isDark) &.checked > .button - background-color rgba($theme-color, 0.4) - border-color rgba($theme-color, 0.4) + background-color var(--primaryAlpha04) + border-color var(--primaryAlpha04) > * - background-color $theme-color + background-color var(--primary) transform translateX(14px) > input @@ -99,7 +97,7 @@ root(isDark) margin 3px 0 0 0 width 34px height 14px - background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25) + background var(--switchTrack) outline none border-radius 14px transition inherit @@ -125,18 +123,11 @@ root(isDark) > span display block line-height 20px - color isDark ? #c4ccd2 : rgba(#000, 0.75) + color currentColor transition inherit > p margin 0 - //font-size 90% - color isDark ? #78858e : #9daab3 - -.ui-switch[data-darkmode] - root(true) - -.ui-switch:not([data-darkmode]) - root(false) + opacity 0.7 </style> diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue index 60fe1cdd82..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({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark, fill) +root(fill) margin 42px 0 32px 0 > .input @@ -84,7 +82,7 @@ root(isDark, fill) left 0 right 0 background none - border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) + border solid 1px var(--inputBorder) border-radius 3px pointer-events none @@ -97,7 +95,7 @@ root(isDark, fill) left 0 right 0 background none - border solid 2px $theme-color + border solid 2px var(--primary) border-radius 3px opacity 0 transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) @@ -112,7 +110,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 @@ -126,7 +124,7 @@ root(isDark, fill) font inherit font-weight fill ? bold : normal font-size 16px - color isDark ? #fff : #000 + color var(--inputText) background transparent border none border-radius 0 @@ -149,7 +147,7 @@ root(isDark, fill) opacity 1 > .label - color $theme-color + color var(--primary) &.focused &.filled @@ -159,16 +157,10 @@ root(isDark, fill) left 0 !important transform scale(0.75) -.ui-textarea[data-darkmode] - &.fill - root(true, true) - &:not(.fill) - root(true, false) +.ui-textarea.fill + root(true) -.ui-textarea:not([data-darkmode]) - &.fill - root(false, true) - &:not(.fill) - root(false, false) +.ui-textarea:not(.fill) + root(false) </style> diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue index f4797d89f7..19b0d15708 100644 --- a/src/client/app/common/views/components/uploader.vue +++ b/src/client/app/common/views/components/uploader.vue @@ -81,7 +81,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' + .mk-uploader overflow auto @@ -100,7 +100,7 @@ export default Vue.extend({ margin 8px 0 0 0 padding 0 height 36px - box-shadow 0 -1px 0 rgba($theme-color, 0.1) + box-shadow 0 -1px 0 var(--primaryAlpha01) border-top solid 8px transparent &:first-child @@ -127,7 +127,7 @@ export default Vue.extend({ padding 0 max-width 256px font-size 0.8em - color rgba($theme-color, 0.7) + color var(--primaryAlpha07) white-space nowrap text-overflow ellipsis overflow hidden @@ -145,17 +145,17 @@ export default Vue.extend({ font-size 0.8em > .initing - color rgba($theme-color, 0.5) + color var(--primaryAlpha05) > .kb - color rgba($theme-color, 0.5) + color var(--primaryAlpha05) > .percentage display inline-block width 48px text-align right - color rgba($theme-color, 0.7) + color var(--primaryAlpha07) &:after content '%' @@ -174,10 +174,10 @@ export default Vue.extend({ overflow hidden &::-webkit-progress-value - background $theme-color + background var(--primary) &::-webkit-progress-bar - background rgba($theme-color, 0.1) + background var(--primaryAlpha01) > .progress display block @@ -191,13 +191,13 @@ export default Vue.extend({ border-radius 4px background linear-gradient( 45deg, - lighten($theme-color, 30%) 25%, - $theme-color 25%, - $theme-color 50%, - lighten($theme-color, 30%) 50%, - lighten($theme-color, 30%) 75%, - $theme-color 75%, - $theme-color + var(--primaryLighten30) 25%, + var(--primary) 25%, + var(--primary) 50%, + var(--primaryLighten30) 50%, + var(--primaryLighten30) 75%, + var(--primary) 75%, + var(--primary) ) background-size 32px 32px animation bg 1.5s linear infinite 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) - </style> diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue index 1830b1832e..02f33bfbc0 100644 --- a/src/client/app/common/views/components/visibility-chooser.vue +++ b/src/client/app/common/views/components/visibility-chooser.vue @@ -127,11 +127,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - $border-color = rgba(27, 31, 35, 0.15) -root(isDark) +.mk-visibility-chooser position initial > .backdrop @@ -141,11 +139,11 @@ root(isDark) z-index 10000 width 100% height 100% - background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) + background var(--modalBackdrop) opacity 0 > .popover - $bgcolor = isDark ? #2c303c : #fff + $bgcolor = var(--popupBg) position absolute z-index 10001 width 240px @@ -189,18 +187,18 @@ root(isDark) display flex padding 8px 14px font-size 12px - color isDark ? #fff : #666 + color var(--popupFg) cursor pointer &:hover - background isDark ? #252731 : #eee + background var(--faceClearButtonHover) &:active - background isDark ? #21242b : #ddd + background var(--faceClearButtonActive) &.active - color $theme-color-foreground - background $theme-color + color var(--primaryForeground) + background var(--primary) > * user-select none @@ -222,11 +220,4 @@ root(isDark) > span:last-child:not(:first-child) opacity 0.6 - -.mk-visibility-chooser[data-darkmode] - root(true) - -.mk-visibility-chooser:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue index 965ec78559..6934fb4856 100644 --- a/src/client/app/common/views/components/welcome-timeline.vue +++ b/src/client/app/common/views/components/welcome-timeline.vue @@ -90,8 +90,8 @@ export default Vue.extend({ opacity 0 transform translateY(-30px) -root(isDark) - background isDark ? #282C37 : #fff +.mk-welcome-timeline + background var(--face) > div > * @@ -101,8 +101,8 @@ root(isDark) padding 16px overflow-wrap break-word font-size .9em - color isDark ? #fff : #4C4C4C - border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05) + color var(--noteText) + border-bottom 1px solid var(--faceDivider) &:after content "" @@ -137,26 +137,20 @@ root(isDark) overflow hidden font-weight bold text-overflow ellipsis - color isDark ? #fff : #627079 + color var(--noteHeaderName) > .username margin 0 .5em 0 0 - color isDark ? #606984 : #ccc + color var(--noteHeaderAcct) > .info margin-left auto font-size 0.9em > .created-at - color isDark ? #606984 : #c0c0c0 + color var(--noteHeaderInfo) > .text text-align left -.mk-welcome-timeline[data-darkmode] - root(true) - -.mk-welcome-timeline:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue index 80a870a257..cb4785f468 100644 --- a/src/client/app/common/views/pages/follow.vue +++ b/src/client/app/common/views/pages/follow.vue @@ -1,5 +1,5 @@ <template> -<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> +<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching"> <div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div> <main> @@ -107,16 +107,14 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.syxhndwprovvuqhmyvveewmbqayniwkv padding 32px max-width 500px margin 0 auto text-align center - color isDark ? #9baec8 : #868c8c + color var(--text) - $bg = isDark ? #282C37 : #fff + $bg = var(--face) @media (max-width 400px) padding 16px @@ -124,7 +122,6 @@ root(isDark) > .signed-in-as margin-bottom 16px font-size 14px - color isDark ? #9baec8 : #9daab3 > main margin-bottom 16px @@ -173,29 +170,29 @@ root(isDark) min-width 150px font-size 14px font-weight bold - color $theme-color + color var(--primary) background transparent outline none - border solid 1px $theme-color + border solid 1px var(--primary) border-radius 36px &:hover - background rgba($theme-color, 0.1) + background var(--primaryAlpha01) &:active - background rgba($theme-color, 0.2) + background var(--primaryAlpha02) &.active - color $theme-color-foreground - background $theme-color + color var(--primaryForeground) + background var(--primary) &:hover - background lighten($theme-color, 10%) - border-color lighten($theme-color, 10%) + background var(--primaryLighten10) + border-color var(--primaryLighten10) &:active - background darken($theme-color, 10%) - border-color darken($theme-color, 10%) + background var(--primaryDarken10) + border-color var(--primaryDarken10) &.wait cursor wait !important @@ -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 04223f0d21..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> -@import '~const.styl' - -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/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue index c471229f15..620b09ff0e 100644 --- a/src/client/app/common/views/widgets/broadcast.vue +++ b/src/client/app/common/views/widgets/broadcast.vue @@ -5,7 +5,6 @@ :data-found="announcements && announcements.length != 0" :data-melt="props.design == 1" :data-mobile="platform == 'mobile'" - :data-darkmode="$store.state.device.darkmode" > <div class="icon"> <svg height="32" version="1.1" viewBox="0 0 32 32" width="32"> @@ -71,9 +70,9 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.anltbovirfeutcigvwgmgxipejaeozxi-body padding 10px - background isDark ? #253a50 : #f3f9ff + background var(--announcementsBg) &[data-melt] background transparent @@ -130,14 +129,14 @@ root(isDark) margin 0 font-size 0.95em font-weight normal - color isDark ? #539eff : #4078c0 + color var(--announcementsTitle) > p display block z-index 1 margin 0 font-size 0.7em - color isDark ? #fff : #57616f + color var(--announcementsText) &.fetching text-align center @@ -150,10 +149,4 @@ root(isDark) > p color #fff -.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode] - root(true) - -.anltbovirfeutcigvwgmgxipejaeozxi-body: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 eb15030370..308d73bad8 100644 --- a/src/client/app/common/views/widgets/calendar.vue +++ b/src/client/app/common/views/widgets/calendar.vue @@ -116,15 +116,13 @@ export default define({ </script> <style lang="stylus" scoped> -@import '~const.styl' - -root(isDark) +.mkw-calendar &[data-special='on-new-years-day'] border-color #ef95a0 .mkw-calendar--body padding 16px 0 - color isDark ? #c5ced6 : #777 + color var(--calendarDay) &:after content "" @@ -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,12 +176,12 @@ root(isDark) > .meter width 100% overflow hidden - background isDark ? #1c1f25 : #eee + background var(--materBg) border-radius 8px > .val height 4px - background $theme-color + background var(--primary) transition width .3s cubic-bezier(0.23, 1, 0.32, 1) &:nth-child(1) @@ -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 544ca1bd9d..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 isDark ? #282c37 : #fff - 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 30f0d3b009..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> -@import '~const.styl' - -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 - background isDark ? #282c37 : #fff + 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 @@ -83,8 +81,8 @@ root(isDark) margin 0 padding 0 10px height 28px - color $theme-color-foreground - background $theme-color !important + color var(--primaryForeground) + background var(--primary) !important outline none border none border-radius 4px @@ -92,20 +90,14 @@ root(isDark) cursor pointer &:hover - background lighten($theme-color, 10%) !important + background var(--primaryLighten10) !important &:active - background darken($theme-color, 10%) !important + background var(--primaryDarken10) !important transition background 0s ease &:disabled 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/nav.vue b/src/client/app/common/views/widgets/nav.vue index 0cbf7c158e..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 - background isDark ? #282c37 : #fff + 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..18df1241a9 100644 --- a/src/client/app/common/views/widgets/posts-monitor.vue +++ b/src/client/app/common/views/widgets/posts-monitor.vue @@ -4,7 +4,7 @@ <template slot="header">%fa:chart-line%%i18n:@title%</template> <button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button> - <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode"> + <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }"> <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2"> <defs> <linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0"> @@ -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/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> |