diff --git a/src/web/app/common/views/components/autocomplete.vue b/src/web/app/common/views/components/autocomplete.vue
index 2ad951b1f844f3f282bf60a329b29cf255e95482..6d7d5cd1b1b3bae537b7381c00d8296d001c2c3d 100644
--- a/src/web/app/common/views/components/autocomplete.vue
+++ b/src/web/app/common/views/components/autocomplete.vue
@@ -223,6 +223,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-autocomplete
position fixed
z-index 65535
diff --git a/src/web/app/common/views/components/connect-failed.vue b/src/web/app/common/views/components/connect-failed.vue
index b48f7cecb9d4339bd149c11c1a72f0bdda90cf9d..185250dbd8d002d06c2d83433c6adcf248c894d2 100644
--- a/src/web/app/common/views/components/connect-failed.vue
+++ b/src/web/app/common/views/components/connect-failed.vue
@@ -39,6 +39,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-connect-failed
width 100%
padding 32px 18px
diff --git a/src/web/app/common/views/components/forkit.vue b/src/web/app/common/views/components/forkit.vue
index 54fc011d1699f7ef18efa1b4ae8e07af4b5b4b67..6f334b965a5d85842c06ad557c3d26ef2fa4490d 100644
--- a/src/web/app/common/views/components/forkit.vue
+++ b/src/web/app/common/views/components/forkit.vue
@@ -9,32 +9,34 @@
</template>
<style lang="stylus" scoped>
- .a
- display block
- position absolute
- top 0
- right 0
+@import '~const.styl'
+
+.a
+ display block
+ position absolute
+ top 0
+ right 0
- > svg
- display block
- //fill #151513
- //color #fff
- fill $theme-color
- color $theme-color-foreground
+ > svg
+ display block
+ //fill #151513
+ //color #fff
+ fill $theme-color
+ color $theme-color-foreground
- .octo-arm
- transform-origin 130px 106px
+ .octo-arm
+ transform-origin 130px 106px
- &:hover
- .octo-arm
- animation octocat-wave 560ms ease-in-out
+ &:hover
+ .octo-arm
+ animation octocat-wave 560ms ease-in-out
- @keyframes octocat-wave
- 0%, 100%
- transform rotate(0)
- 20%, 60%
- transform rotate(-25deg)
- 40%, 80%
- transform rotate(10deg)
+ @keyframes octocat-wave
+ 0%, 100%
+ transform rotate(0)
+ 20%, 60%
+ transform rotate(-25deg)
+ 40%, 80%
+ transform rotate(10deg)
</style>
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
index edcda069a3f1555a855e2416f06a9bbde636628a..01886b19c86492ca9822bf2b4f51490b746ed9dd 100644
--- a/src/web/app/common/views/components/messaging-room.form.vue
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -195,6 +195,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-messaging-form
> textarea
cursor auto
diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index f7f31c557c75ac75a7e29aff1d696186f9543318..0a675ba03edd11bfff40a196804a68df72692426 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -228,6 +228,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-messaging-room
display flex
flex 1
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index ea75c9081222006ebfff33f60ba0ca54e9a8d13f..fcc2dbe3160738023b43e1a76d119eef9887d256 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -165,6 +165,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-messaging
&[data-compact]
diff --git a/src/web/app/common/views/components/poll-editor.vue b/src/web/app/common/views/components/poll-editor.vue
index 20a334d3c53415b7ceb9162c09ca4aab0feb8617..47d901d7b165aa048daa11d3a750d7874ec367ed 100644
--- a/src/web/app/common/views/components/poll-editor.vue
+++ b/src/web/app/common/views/components/poll-editor.vue
@@ -67,6 +67,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-poll-editor
padding 8px
diff --git a/src/web/app/common/views/components/poll.vue b/src/web/app/common/views/components/poll.vue
index 556d8ebf6cf8df89745ba787741f718e5dca4b33..8156c8bc584b99e433bdf8b3f6a1afa6eb19a4b0 100644
--- a/src/web/app/common/views/components/poll.vue
+++ b/src/web/app/common/views/components/poll.vue
@@ -66,6 +66,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-poll
> ul
diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue
index f3731cd632d11e29ab5b720c54d5763cf9ab201a..0ba15ba731e50577ef4181df0551a58e00708ac5 100644
--- a/src/web/app/common/views/components/reaction-picker.vue
+++ b/src/web/app/common/views/components/reaction-picker.vue
@@ -106,6 +106,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
$border-color = rgba(27, 31, 35, 0.15)
.mk-reaction-picker
diff --git a/src/web/app/common/views/components/signin.vue b/src/web/app/common/views/components/signin.vue
index 31243e99a1ce6705f0f65333fa59eadf29ba34c8..1738d0df7de15fc6ffda6bfb142492a6ecafa4a9 100644
--- a/src/web/app/common/views/components/signin.vue
+++ b/src/web/app/common/views/components/signin.vue
@@ -53,6 +53,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-signin
&.signing
&, *
diff --git a/src/web/app/common/views/components/signup.vue b/src/web/app/common/views/components/signup.vue
index 1fdc49a181e120eee60915d0c517ea30e6b21374..2ca1687be1e88ff9c99c3d62b988408573c9c39a 100644
--- a/src/web/app/common/views/components/signup.vue
+++ b/src/web/app/common/views/components/signup.vue
@@ -153,6 +153,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-signup
min-width 302px
diff --git a/src/web/app/common/views/components/switch.vue b/src/web/app/common/views/components/switch.vue
index e6cdfa152c4954fbedd546da36ab3af4c45b5d82..2ac57be6fcef67a0020c1f199beef9042c8a7a80 100644
--- a/src/web/app/common/views/components/switch.vue
+++ b/src/web/app/common/views/components/switch.vue
@@ -84,6 +84,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-switch
display flex
margin 8px 0
diff --git a/src/web/app/common/views/components/uploader.vue b/src/web/app/common/views/components/uploader.vue
index 6367b6997308a5650654dbe0fb1abec790f956e5..6465ad35e986d627250e63cf763b9eb178737fff 100644
--- a/src/web/app/common/views/components/uploader.vue
+++ b/src/web/app/common/views/components/uploader.vue
@@ -81,6 +81,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-uploader
overflow auto
diff --git a/src/web/app/common/views/widgets/calendar.vue b/src/web/app/common/views/widgets/calendar.vue
index 2bcdb07f9e0e4d5e622be972aace3718915bbd3e..03f69a75970762dcce73a61edd18b2485d1d4a46 100644
--- a/src/web/app/common/views/widgets/calendar.vue
+++ b/src/web/app/common/views/widgets/calendar.vue
@@ -107,6 +107,8 @@ export default define({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mkw-calendar
padding 16px 0
color #777
diff --git a/src/web/app/desktop/views/components/calendar.vue b/src/web/app/desktop/views/components/calendar.vue
index 08b08f8d424ed705b0886323db9f04d6dd0b7318..71aab2e8a55e2acad04bc2cb428226dd4b5f806c 100644
--- a/src/web/app/desktop/views/components/calendar.vue
+++ b/src/web/app/desktop/views/components/calendar.vue
@@ -131,6 +131,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-calendar
color #777
background #fff
diff --git a/src/web/app/desktop/views/components/choose-file-from-drive-window.vue b/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
index 232282745921bd9ec162d748327f2b3bfb039da9..9a1e9c958a6243e3ce3fd2170df4dca8c6ec66c1 100644
--- a/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,6 +59,8 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
+@import '~const.styl'
+
.title
> [data-fa]
margin-right 4px
diff --git a/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
index 8111ffcf0df65f016dda6534c4ec7a75dc677eec..f99533176d9a997365bd2bbd2a51205dcbed1c4c 100644
--- a/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,6 +37,8 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
+@import '~const.styl'
+
.title
> [data-fa]
margin-right 4px
diff --git a/src/web/app/desktop/views/components/context-menu.menu.vue b/src/web/app/desktop/views/components/context-menu.menu.vue
index e2c34a59150089a0e7d1f2c55f9d9e015321fa6e..6359dbf1b4803bd104e61a21a1d15376819b158b 100644
--- a/src/web/app/desktop/views/components/context-menu.menu.vue
+++ b/src/web/app/desktop/views/components/context-menu.menu.vue
@@ -29,6 +29,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.menu
$width = 240px
$item-height = 38px
diff --git a/src/web/app/desktop/views/components/crop-window.vue b/src/web/app/desktop/views/components/crop-window.vue
index 27d89a9ff94df24647a446f7a56a45cbdc8b678f..eb6a55d95965d5d4533226f6025a2bbc5cec5de9 100644
--- a/src/web/app/desktop/views/components/crop-window.vue
+++ b/src/web/app/desktop/views/components/crop-window.vue
@@ -61,6 +61,8 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
+@import '~const.styl'
+
.header
> [data-fa]
margin-right 4px
diff --git a/src/web/app/desktop/views/components/dialog.vue b/src/web/app/desktop/views/components/dialog.vue
index e89e8654e6461abf9501a85dd0f755eca470e0a8..fa17e4a9d2cbf71b6b37c471af1a6bb3d965a156 100644
--- a/src/web/app/desktop/views/components/dialog.vue
+++ b/src/web/app/desktop/views/components/dialog.vue
@@ -91,6 +91,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-dialog
> .bg
display block
@@ -151,6 +153,8 @@ export default Vue.extend({
</style>
<style lang="stylus" module>
+@import '~const.styl'
+
.header
margin 1em 0
color $theme-color
diff --git a/src/web/app/desktop/views/components/drive.file.vue b/src/web/app/desktop/views/components/drive.file.vue
index 6390ed351498e032a55e8ccb29caec4bbd3568ec..924ff7052d1a31a9248d9c67bcee6ec19f39a6a1 100644
--- a/src/web/app/desktop/views/components/drive.file.vue
+++ b/src/web/app/desktop/views/components/drive.file.vue
@@ -184,6 +184,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.root.file
padding 8px 0 0 0
height 180px
diff --git a/src/web/app/desktop/views/components/drive.folder.vue b/src/web/app/desktop/views/components/drive.folder.vue
index d5f4b11ee1b757eecda7cdce9c9780e2438a7528..a8a9a01370e21b862fb2f12e19c0ab5e1b293a50 100644
--- a/src/web/app/desktop/views/components/drive.folder.vue
+++ b/src/web/app/desktop/views/components/drive.folder.vue
@@ -218,6 +218,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.root.folder
padding 8px
height 64px
diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue
index 1d84c24098cd82fc5159526c8af781b6e10d137c..99036bed8358ffb467c44adf7940447b7f2c4af7 100644
--- a/src/web/app/desktop/views/components/drive.vue
+++ b/src/web/app/desktop/views/components/drive.vue
@@ -568,6 +568,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-drive
> nav
diff --git a/src/web/app/desktop/views/components/follow-button.vue b/src/web/app/desktop/views/components/follow-button.vue
index 9056307bbf93dad1e08d1ed0f07807d499c66245..fc4f87188817cceab16885f8a1042ffbb81eb57b 100644
--- a/src/web/app/desktop/views/components/follow-button.vue
+++ b/src/web/app/desktop/views/components/follow-button.vue
@@ -92,6 +92,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-follow-button
display block
cursor pointer
diff --git a/src/web/app/desktop/views/components/home.vue b/src/web/app/desktop/views/components/home.vue
index a7c61f4c572852c9b402c0d5d6548c426fc27a11..562b22d11dab9dff5370f569f96ae1f991c3c6fa 100644
--- a/src/web/app/desktop/views/components/home.vue
+++ b/src/web/app/desktop/views/components/home.vue
@@ -214,6 +214,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-home
display block
diff --git a/src/web/app/desktop/views/components/input-dialog.vue b/src/web/app/desktop/views/components/input-dialog.vue
index a735ce0f317cd819df6db072c9cbafdfddfab78b..e27bc8da88cd0e9566ee30b85ba1412598433dfd 100644
--- a/src/web/app/desktop/views/components/input-dialog.vue
+++ b/src/web/app/desktop/views/components/input-dialog.vue
@@ -77,6 +77,8 @@ export default Vue.extend({
<style lang="stylus" module>
+@import '~const.styl'
+
.header
> [data-fa]
margin-right 4px
diff --git a/src/web/app/desktop/views/components/mentions.vue b/src/web/app/desktop/views/components/mentions.vue
index 28ba59f2b12183b1b8d7df9bc062ea6f09fcaaba..47066e813f410a6614909c4f574f2224f2885258 100644
--- a/src/web/app/desktop/views/components/mentions.vue
+++ b/src/web/app/desktop/views/components/mentions.vue
@@ -81,6 +81,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-mentions
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index b4105313362c4fd7422a9792d4b5c4a36c9f1a74..32d401351d6429baa0105b4bf6a839b98511e362 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -177,6 +177,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-post-detail
margin 0
padding 0
diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue
index b94b0f853302c4c62fa36cb48cd895bed7afa6c0..1f98aed08c1bdb3c92bb1f7000daab7daf5745b7 100644
--- a/src/web/app/desktop/views/components/post-form.vue
+++ b/src/web/app/desktop/views/components/post-form.vue
@@ -250,6 +250,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-post-form
display block
padding 16px
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index 458e244b3f60ccc3607e36a0f4f3940d74a2df52..52531818ef9b1fbc399cb4458c3571e9c9b418ce 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -256,6 +256,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.post
margin 0
padding 0
diff --git a/src/web/app/desktop/views/components/progress-dialog.vue b/src/web/app/desktop/views/components/progress-dialog.vue
index ed49b19d7154add2d65dbfb49afce0a5f62010a7..a4292e1aecdd6fe6bfb8cb7a04dc518420a63a5a 100644
--- a/src/web/app/desktop/views/components/progress-dialog.vue
+++ b/src/web/app/desktop/views/components/progress-dialog.vue
@@ -37,6 +37,8 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
+@import '~const.styl'
+
.body
padding 18px 24px 24px 24px
diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue
index 5bf7eaaf036f1b8bf207d4e9f1d822fd2627c54f..f2774b817ce9dd98f3144d3ebc42c35535c00ecd 100644
--- a/src/web/app/desktop/views/components/repost-form.vue
+++ b/src/web/app/desktop/views/components/repost-form.vue
@@ -57,6 +57,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-repost-form
> .mk-post-preview
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index e07f060e11ab185d98883e4c4cb2371542c1e05c..04004d2ff657306de75417d05c03bdd226d154a4 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -222,6 +222,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-settings
display flex
width 100%
diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue
index ad653333935edb279709667538a7daf398bcd728..2cc2c1867fdafcb5a3aeac0d9d725e435d900b23 100644
--- a/src/web/app/desktop/views/components/ui.header.account.vue
+++ b/src/web/app/desktop/views/components/ui.header.account.vue
@@ -84,6 +84,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.account
> .header
display block
diff --git a/src/web/app/desktop/views/components/ui.header.nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue
index c102d5b3f511946a898df040c39b2a798bcdd382..a5b6ecd6fabfcf88dd19d8f9d200927048df9de0 100644
--- a/src/web/app/desktop/views/components/ui.header.nav.vue
+++ b/src/web/app/desktop/views/components/ui.header.nav.vue
@@ -86,6 +86,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.nav
display inline-block
margin 0
diff --git a/src/web/app/desktop/views/components/ui.header.notifications.vue b/src/web/app/desktop/views/components/ui.header.notifications.vue
index 5467dda856c82f73c8c3530ba93be7a72e66d056..e829418d18b5e38b59905b7f2a2f9131240d9f3c 100644
--- a/src/web/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/web/app/desktop/views/components/ui.header.notifications.vue
@@ -82,6 +82,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.notifications
> button
diff --git a/src/web/app/desktop/views/components/ui.header.post.vue b/src/web/app/desktop/views/components/ui.header.post.vue
index e8ed380f06d3ce519922e4289ef41291848cfbc6..c2f0e07dd353ca4077a1544b992c0ad52c747c9a 100644
--- a/src/web/app/desktop/views/components/ui.header.post.vue
+++ b/src/web/app/desktop/views/components/ui.header.post.vue
@@ -17,6 +17,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.post
display inline-block
padding 8px
diff --git a/src/web/app/desktop/views/components/ui.header.search.vue b/src/web/app/desktop/views/components/ui.header.search.vue
index c063de6bb0e363a545d4f3cdf3702b4eb194699c..86215556ad7e8c3828d5fa024d053b242795108c 100644
--- a/src/web/app/desktop/views/components/ui.header.search.vue
+++ b/src/web/app/desktop/views/components/ui.header.search.vue
@@ -24,6 +24,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.search
> [data-fa]
diff --git a/src/web/app/desktop/views/components/user-preview.vue b/src/web/app/desktop/views/components/user-preview.vue
index 2a4bd7cf75e0d91062d1c017d03794f63f9a8b5a..cfb95961daf6c1eb20ebf9a0141c9ce010f5b709 100644
--- a/src/web/app/desktop/views/components/user-preview.vue
+++ b/src/web/app/desktop/views/components/user-preview.vue
@@ -83,6 +83,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-user-preview
position absolute
z-index 2048
diff --git a/src/web/app/desktop/views/components/users-list.vue b/src/web/app/desktop/views/components/users-list.vue
index fd15f478d255b820753bd6e1377363d0556c8311..a08e76f573ed3cef0d55a6882f2d02c2e34d4de3 100644
--- a/src/web/app/desktop/views/components/users-list.vue
+++ b/src/web/app/desktop/views/components/users-list.vue
@@ -69,6 +69,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-users-list
height 100%
background #fff
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index 5b08bc87e2cea3615907fefec1dc4f38c4c193fd..a92cfd0b6b051b85d7a7b21d408a66d217a94cb8 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/src/web/app/desktop/views/components/window.vue
@@ -425,6 +425,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-window
display block
diff --git a/src/web/app/desktop/views/pages/selectdrive.vue b/src/web/app/desktop/views/pages/selectdrive.vue
index b1f00da2b64189828671df4d1d56e3bacf8fd0b6..4f0b86014bdaf753d064d280b91ca4c6d1ad4b70 100644
--- a/src/web/app/desktop/views/pages/selectdrive.vue
+++ b/src/web/app/desktop/views/pages/selectdrive.vue
@@ -54,6 +54,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mkp-selectdrive
display block
position fixed
diff --git a/src/web/app/desktop/views/pages/user/user.header.vue b/src/web/app/desktop/views/pages/user/user.header.vue
index 6c8375f163f31193933ec9680501b0a86c32d3b5..b2119e52e28ed464adda69c9706803255dd7249a 100644
--- a/src/web/app/desktop/views/pages/user/user.header.vue
+++ b/src/web/app/desktop/views/pages/user/user.header.vue
@@ -61,6 +61,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.header
$banner-height = 320px
$footer-height = 58px
diff --git a/src/web/app/desktop/views/pages/user/user.timeline.vue b/src/web/app/desktop/views/pages/user/user.timeline.vue
index d8fff6ce6b293fb9f8fa75dc1cd1797947e9d27c..60eef8951ba5924d622bcb8f05421eb427e640e7 100644
--- a/src/web/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/web/app/desktop/views/pages/user/user.timeline.vue
@@ -97,6 +97,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.timeline
background #fff
diff --git a/src/web/app/desktop/views/pages/welcome.vue b/src/web/app/desktop/views/pages/welcome.vue
index f359ce008ebbd6c53866d9bf79382c798fa37f8d..9f693052045b2c94ec5d76b77f67256b8eb40bd5 100644
--- a/src/web/app/desktop/views/pages/welcome.vue
+++ b/src/web/app/desktop/views/pages/welcome.vue
@@ -57,6 +57,8 @@ export default Vue.extend({
</style>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-welcome
display flex
flex-direction column
diff --git a/src/web/app/desktop/views/widgets/post-form.vue b/src/web/app/desktop/views/widgets/post-form.vue
index e51b4f357745526a5782fc553fae3edcbdc4c5b1..cf7fd1f2b289f1a9312e873c552a5ea1ec975a11 100644
--- a/src/web/app/desktop/views/widgets/post-form.vue
+++ b/src/web/app/desktop/views/widgets/post-form.vue
@@ -54,6 +54,8 @@ export default define({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mkw-post-form
background #fff
overflow hidden
diff --git a/src/web/app/mobile/views/components/drive.file.vue b/src/web/app/mobile/views/components/drive.file.vue
index dfc69e249feca7e3ff6d651e51ef6721e4464730..a41d9bcfdcd6e7e8b20b5bea20a4c38f9d22afdf 100644
--- a/src/web/app/mobile/views/components/drive.file.vue
+++ b/src/web/app/mobile/views/components/drive.file.vue
@@ -67,6 +67,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.file
display block
text-decoration none !important
diff --git a/src/web/app/mobile/views/components/follow-button.vue b/src/web/app/mobile/views/components/follow-button.vue
index 2d45ea215dfb7a6a4c9e0f57fc99dc0f16a08d09..fb6eaa39c647b071f11b1915c4e85f559259f7fc 100644
--- a/src/web/app/mobile/views/components/follow-button.vue
+++ b/src/web/app/mobile/views/components/follow-button.vue
@@ -82,6 +82,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-follow-button
display block
user-select none
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index 05ee07123046e2e1db75c4fa465480f6d5218a18..7e6217f6049b539cba8070a350510cf5c1b1eb2b 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -175,6 +175,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-post-detail
overflow hidden
margin 0 auto
diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue
index 7a6eb77419115a5dba8b72841ad0bdbbf2272440..63b75b92f07fbc36c04680d636c6cc0fbbb5e2a6 100644
--- a/src/web/app/mobile/views/components/post-form.vue
+++ b/src/web/app/mobile/views/components/post-form.vue
@@ -115,6 +115,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-post-form
max-width 500px
width calc(100% - 16px)
diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/posts.post.vue
index 3038cdb0ed123d4625ab39f5951a04f2425fdbc5..39bb80457bbbbfca0c585f8718ea968dafbe25b0 100644
--- a/src/web/app/mobile/views/components/posts.post.vue
+++ b/src/web/app/mobile/views/components/posts.post.vue
@@ -195,6 +195,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.post
font-size 12px
border-bottom solid 1px #eaeaea
diff --git a/src/web/app/mobile/views/components/posts.vue b/src/web/app/mobile/views/components/posts.vue
index 34fb0749a29cd052e525ee787055aa9ef8373d7f..9a9f9a3133ab20ae118765dc390aab307f6e33a7 100644
--- a/src/web/app/mobile/views/components/posts.vue
+++ b/src/web/app/mobile/views/components/posts.vue
@@ -49,6 +49,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-posts
background #fff
border-radius 8px
diff --git a/src/web/app/mobile/views/components/ui.header.vue b/src/web/app/mobile/views/components/ui.header.vue
index bf783342042521fda86a8910fde394d1c8540de6..d07977cf534edd7545b09f40ab27378ed49e071d 100644
--- a/src/web/app/mobile/views/components/ui.header.vue
+++ b/src/web/app/mobile/views/components/ui.header.vue
@@ -128,6 +128,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.header
$height = 48px
diff --git a/src/web/app/mobile/views/components/ui.nav.vue b/src/web/app/mobile/views/components/ui.nav.vue
index a3c0042c304aa053fcbe1c0642783534eef2da1d..62ea83526f99b386e375eeef372bbe4a17235467 100644
--- a/src/web/app/mobile/views/components/ui.nav.vue
+++ b/src/web/app/mobile/views/components/ui.nav.vue
@@ -109,6 +109,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.nav
.backdrop
position fixed
diff --git a/src/web/app/mobile/views/components/users-list.vue b/src/web/app/mobile/views/components/users-list.vue
index d6c6261354e79e1ba50eb85cf971e9b0688a7b1a..b11e4549d6db8f7d673beed3e3e8ab996cf66ccf 100644
--- a/src/web/app/mobile/views/components/users-list.vue
+++ b/src/web/app/mobile/views/components/users-list.vue
@@ -65,6 +65,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
.mk-users-list
> nav
diff --git a/src/web/app/mobile/views/pages/profile-setting.vue b/src/web/app/mobile/views/pages/profile-setting.vue
index 432a850e46e4c887f3eb27dd29a59cc37aabe3b3..f25d4bbe8d9dad0b07d200a7ea49f2dffb624b60 100644
--- a/src/web/app/mobile/views/pages/profile-setting.vue
+++ b/src/web/app/mobile/views/pages/profile-setting.vue
@@ -108,6 +108,8 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
+@import '~const.styl'
+
.content
margin 8px auto
max-width 500px
diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue
index ae2fbe85d940638f87816089b28141d292b8db55..90f49a99a4e95a07993fbccf1475521faf94a72e 100644
--- a/src/web/app/mobile/views/pages/user.vue
+++ b/src/web/app/mobile/views/pages/user.vue
@@ -105,6 +105,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
+@import '~const.styl'
+
main
> header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts
index a4ef75d8ed6c03173863d42c5049e6d542bdedbc..c4ef4b90f5def140d1b8519e9e18184481737aed 100644
--- a/webpack/webpack.config.ts
+++ b/webpack/webpack.config.ts
@@ -72,20 +72,6 @@ module.exports = Object.keys(langs).map(lang => {
search: /%base64:(.+?)%/g.toString(),
replace: 'base64replacement'
}
- }, {
- loader: 'webpack-replace-loader',
- options: {
- search: '$theme-color',
- replace: constants.themeColor,
- attr: 'g'
- }
- }, {
- loader: 'webpack-replace-loader',
- query: {
- search: '$theme-color-foreground',
- replace: constants.themeColorForeground,
- attr: 'g'
- }
}, {
loader: 'replace',
query: {
@@ -108,10 +94,16 @@ module.exports = Object.keys(langs).map(lang => {
}, {
test: /\.styl$/,
exclude: /node_modules/,
- use: [
- { loader: 'style-loader' },
- { loader: 'css-loader' },
- { loader: 'stylus-loader' }
+ use: [{
+ loader: 'style-loader'
+ }, {
+ loader: 'css-loader',
+ options: {
+ minimize: true
+ }
+ }, {
+ loader: 'stylus-loader'
+ }
]
}, {
test: /\.scss$/,
@@ -119,7 +111,10 @@ module.exports = Object.keys(langs).map(lang => {
use: [{
loader: 'style-loader'
}, {
- loader: 'css-loader'
+ loader: 'css-loader',
+ options: {
+ minimize: true
+ }
}, {
loader: 'sass-loader',
options: {
@@ -128,10 +123,14 @@ module.exports = Object.keys(langs).map(lang => {
}]
}, {
test: /\.css$/,
- use: [
- { loader: 'style-loader' },
- { loader: 'css-loader' }
- ]
+ use: [{
+ loader: 'style-loader'
+ }, {
+ loader: 'css-loader',
+ options: {
+ minimize: true
+ }
+ }]
}, {
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'url-loader'
@@ -165,7 +164,10 @@ module.exports = Object.keys(langs).map(lang => {
resolve: {
extensions: [
'.js', '.ts', '.json'
- ]
+ ],
+ alias: {
+ 'const.styl': __dirname + '/../src/web/const.styl'
+ }
},
resolveLoader: {
modules: ['node_modules', './webpack/loaders']