✌️

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

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

src/web/app/common/views/components/forkit.vue

@@ -9,32 +9,34 @@
 </template>
 
 <style lang="stylus" scoped>
-	.a
+@import '~const.styl'
+
+.a
+	display block
+	position absolute
+	top 0
+	right 0
+
+	> svg
 		display block
-		position absolute
+		//fill #151513
-		top 0
+		//color #fff
-		right 0
+		fill $theme-color
+		color $theme-color-foreground
 
-		> svg
+		.octo-arm
-			display block
+			transform-origin 130px 106px
-			//fill #151513
-			//color #fff
-			fill $theme-color
-			color $theme-color-foreground
 
-			.octo-arm
+	&:hover
-				transform-origin 130px 106px
+		.octo-arm
+			animation octocat-wave 560ms ease-in-out
 
-		&:hover
+	@keyframes octocat-wave
-			.octo-arm
+		0%, 100%
-				animation octocat-wave 560ms ease-in-out
+			transform rotate(0)
-
+		20%, 60%
-		@keyframes octocat-wave
+			transform rotate(-25deg)
-			0%, 100%
+		40%, 80%
-				transform rotate(0)
+			transform rotate(10deg)
-			20%, 60%
-				transform rotate(-25deg)
-			40%, 80%
-				transform rotate(10deg)
 
 </style>

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

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

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]

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
 

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

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

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
 		&, *

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
 

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

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
 

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

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

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

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

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

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

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

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

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

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

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

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
 

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

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)

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

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

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

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
 

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

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%

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

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

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

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

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]

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

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

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
 

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

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

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
 

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

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

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

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

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

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)

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

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

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
 

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

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

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

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)

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: [
+				use: [{
-					{ loader: 'style-loader' },
+					loader: 'style-loader'
-					{ loader: 'css-loader' },
+				}, {
-					{ loader: 'stylus-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: [
+				use: [{
-					{ loader: 'style-loader' },
+					loader: 'style-loader'
-					{ loader: 'css-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']