diff --git a/package.json b/package.json
index 1b786d1a38732d6ab0f68e6ae1d135a7d9a3d29d..a3e3b56be4356e97ffdd3c3ceb148fbecde0d537 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
"@types/single-line-log": "1.1.0",
"@types/speakeasy": "2.0.2",
"@types/systeminformation": "3.23.0",
+ "@types/tinycolor2": "1.4.1",
"@types/tmp": "0.0.33",
"@types/uuid": "3.4.4",
"@types/webpack": "4.4.12",
@@ -194,6 +195,7 @@
"systeminformation": "3.45.6",
"syuilo-password-strength": "0.0.1",
"textarea-caret": "3.1.0",
+ "tinycolor2": "1.4.1",
"tmp": "0.0.33",
"ts-loader": "4.4.1",
"ts-node": "7.0.1",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 3911f83a615cbd228881a515848b7cce9fab3259..2f0095944c01775786bf15c22648349e88dc5afc 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -27,7 +27,7 @@ body
z-index 65536
.bar
- background $theme-color
+ background var(--primary)
position fixed
z-index 65537
@@ -44,7 +44,7 @@ body
right 0px
width 100px
height 100%
- box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+ box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
opacity 1
transform rotate(3deg) translate(0px, -4px)
@@ -64,8 +64,8 @@ body
box-sizing border-box
border solid 2px transparent
- border-top-color $theme-color
- border-left-color $theme-color
+ border-top-color var(--primary)
+ border-left-color var(--primary)
border-radius 50%
animation progress-spinner 400ms linear infinite
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 7fbac7f574750f38d8941347b85434b963056125..2cad547c019910c23c5767f2de4f6182b421bdfc 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,3 +1,5 @@
+import * as tinycolor from 'tinycolor2';
+
export default function(theme: { [key: string]: string }) {
const props = compile(theme);
@@ -10,56 +12,47 @@ export default function(theme: { [key: string]: string }) {
}
function compile(theme: { [key: string]: string }): { [key: string]: string } {
- function getRgba(code: string): number[] {
+ function getColor(code: string): tinycolor.Instance {
// ref
if (code[0] == '@') {
- return getRgba(theme[code.substr(1)]);
- }
-
- let m;
-
- //#region #RGB
- m = code.match(/^#([0-9a-f]{3})$/i);
- if (m) {
- return [
- parseInt(m[1].charAt(0), 16) * 0x11,
- parseInt(m[1].charAt(1), 16) * 0x11,
- parseInt(m[1].charAt(2), 16) * 0x11,
- 255
- ];
+ return getColor(theme[code.substr(1)]);
}
- //#endregion
- //#region #RRGGBB
- m = code.match(/^#([0-9a-f]{6})$/i);
- if (m) {
- return [
- parseInt(m[1].substr(0, 2), 16),
- parseInt(m[1].substr(2, 2), 16),
- parseInt(m[1].substr(4, 2), 16),
- 255
- ];
- }
- //#endregion
-
- return [0, 0, 0, 255];
+ return tinycolor(code);
}
const props = {};
Object.entries(theme).forEach(([k, v]) => {
if (k == 'meta') return;
- const [r, g, b, a] = getRgba(v);
- props[k] = genValue(r, g, b, a);
- props[`${k}-r`] = r;
- props[`${k}-g`] = g;
- props[`${k}-b`] = b;
- props[`${k}-a`] = a;
+ const c = getColor(v);
+ props[k] = genValue(c);
+ props[`${k}-r`] = c.toRgb().r;
+ props[`${k}-g`] = c.toRgb().g;
+ props[`${k}-b`] = c.toRgb().b;
+ props[`${k}-a`] = c.toRgb().a;
});
+ const primary = getColor(props['primary']);
+
+ for (let i = 1; i < 10; i++) {
+ const color = primary.clone().setAlpha(i / 10);
+ props['primaryAlpha0' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().lighten(i);
+ props['primaryLighten' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().darken(i);
+ props['primaryDarken' + i] = genValue(color);
+ }
+
return props;
}
-function genValue(r: number, g: number, b: number, a: number): string {
- return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+function genValue(c: tinycolor.Instance): string {
+ return c.toRgbString();
}
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index ea05afd6dc26f2f94c69f7db71dead58f5690b0b..99a87520a4f6243f4699d64109aeff69c7f25216 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,7 +259,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
position fixed
@@ -302,13 +302,13 @@ root(isDark)
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
&[data-selected='true']
- background $theme-color
+ background var(--primary)
&, *
color #fff !important
&:active
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
&, *
color #fff !important
diff --git a/src/client/app/common/views/components/connect-failed.vue b/src/client/app/common/views/components/connect-failed.vue
index 0f686926b0b6b206f9da116191a0500a3c5da2ad..36cae05665659b4a21146c7c68c74f0b62c8615c 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/forkit.vue b/src/client/app/common/views/components/forkit.vue
index de627181ef5d6efdcd4c5891f4582849ab458ba2..b303b48b797fbf302cad6cceae150bdfeb4f3479 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 fea19d917e99ddbfcdd950a347915997775adba3..bc230496a6ac2396e372d0b461197b67f3fac69a 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,7 +304,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
text-align center
@@ -399,14 +399,14 @@ root(isDark)
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
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 d23902aae70747ceecf7ae088719a946baf8c303..f6c7f0e3c2e4dd687c405f882e2c031457d85819 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,7 +138,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
> h1
@@ -200,7 +200,7 @@ root(isDark)
user-select none
&:focus
- border-color $theme-color
+ border-color var(--primary)
&:hover
background isDark ? #313543 : #f5f5f5
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 fef833d63e057ea91257b6340975d8d813a7dfd1..d4b91ae7a791725a663098ca13fbac108afae995 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -252,7 +252,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
text-align center
@@ -288,7 +288,7 @@ root(isDark)
&:focus
&:active
- border-color $theme-color
+ border-color var(--primary)
> div
> .random
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 223ec4597aaae4812af1544bbd538c2c704d9f03..75d7d574c10b7ba512d82169cac1669e1bac99da 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,7 +156,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
color isDark ? #fff : #677f84
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index ad5ec619ba0a6e974a3e183e7d37aaae3ecd8a7e..3b9f07d1ee965ba53b3c25af53d30dbd08048388 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -117,7 +117,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$bg-color = isDark ? #2c303c : #fff
@@ -182,13 +182,13 @@ root(isDark)
color isDark ? #d6dce2 : #111
&: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
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 f183749fad94d5145da820ac1986d922308a9381..90668aee6e904c591bd4bcbadb87e88e1ee5dcb2 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
> textarea
@@ -234,10 +234,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,10 +293,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
input[type=file]
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 648d0eee180b93d1478c4227ad10ae43c3e9faf4..e0528d54329907347d1d89dac581bf19a842e9a5 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,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
- $me-balloon-color = $theme-color
+ $me-balloon-color = var(--primary)
padding 10px 12px 10px 12px
background-color transparent
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 1de41855df2f8f2f035fbf231e04a7f3a370424a..5bdf8b903486c56963becb32c5d8f00eadfcc335 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,7 +262,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
@@ -386,15 +386,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
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 6abfc92dca2a9d916ae185e4da12fb9b32b29235..7181ddd01c4a0aaf2bcfefdcea468bf7e5742a99 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,7 +167,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
@@ -252,8 +252,8 @@ root(isDark)
transition border 0.2s ease
&:focus
- color darken($theme-color, 20%)
- border solid 1px $theme-color
+ color var(--primaryDarken20)
+ border solid 1px var(--primary)
transition color 0, border 0
> .result
@@ -287,7 +287,7 @@ root(isDark)
&:hover
&:focus
color #fff
- background $theme-color
+ background var(--primary)
.name
color #fff
@@ -297,7 +297,7 @@ root(isDark)
&:active
color #fff
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
.name
color #fff
diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index d25bd430f2622828af748eba12516a1ca8e66000..f4a2f008769146d647777ce1be716fc199749ea4 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 30d9799feca319fe8180f71435141295cd4faec9..219f0a7fd5b43e6fc0b21c3ad5f73b63b3017917 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
padding 8px
@@ -105,42 +105,42 @@ root(isDark)
font-size 14px
color isDark ? #fff : #000
background isDark ? #191b22 : #fff
- border solid 1px rgba($theme-color, 0.1)
+ 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%)
+ color var(--primaryDarken30)
.mk-poll-editor[data-darkmode]
root(true)
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 4fe51d219b4e488bb2fddcca01ada410fa079016..0e60932796e89e8ab4921f09ebae26af53e4a61f 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,7 +67,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
@@ -99,7 +99,7 @@ root(isDark)
top 0
left 0
height 100%
- background $theme-color
+ background var(--primary)
transition width 1s ease
> span
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index f732e40b9d650c34fd9832b497db4a4d8eb05692..a86850ac7cb089fee36a3aa8453cbde08b1322f3 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -210,7 +210,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
$border-color = rgba(27, 31, 35, 0.15)
@@ -301,7 +301,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
@@ -315,7 +315,7 @@ root(isDark)
background isDark ? #252731 : #eee
&: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]
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index b1c6782e93f341756bae052bacfcab31a55e1357..e02af8154c09c4e829563b44fa71d1ded9d9bd70 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 f603b9545cdc064a788d8d9d4ca99a854dfff34e..e55d7ee3e39c94475188be0b020840ddbd0865c4 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
index 32caab638a94847e50bf4a99f54c7889ae020248..aa60331cbc2377b55fc4e0c0f4814efbe637b791 100644
--- a/src/client/app/common/views/components/switch.vue
+++ b/src/client/app/common/views/components/switch.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
@@ -102,21 +102,21 @@ root(isDark)
&.checked
> .button
- background-color $theme-color
- border-color $theme-color
+ background-color var(--primary)
+ border-color var(--primary)
> .label
> span
- color $theme-color
+ color var(--primary)
&:hover
> .label
> span
- color darken($theme-color, 10%)
+ color var(--primaryDarken10)
> .button
- background darken($theme-color, 10%)
- border-color darken($theme-color, 10%)
+ background var(--primaryDarken10)
+ border-color var(--primaryDarken10)
&:hover
> .label
@@ -144,7 +144,7 @@ root(isDark)
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 14px
> .button
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index e7787503546d74d53d34a62c3fabd62151c096d3..ae59214038d7c2607c4a20289ddd0c2bb42d7078 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark, fill)
> button
@@ -49,23 +49,23 @@ root(isDark, fill)
box-shadow none
if fill
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
&:hover
- background lighten($theme-color, 5%)
+ background var(--primaryLighten5)
&:active
- background darken($theme-color, 5%)
+ background var(--primaryDarken5)
else
- color $theme-color
+ color var(--primary)
background none
&:hover
- color darken($theme-color, 5%)
+ color var(--primaryDarken5)
&:active
- background rgba($theme-color, 0.3)
+ background var(--primaryAlpha03)
.ui-button[data-darkmode]
&.fill
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index aa16b557e163d8d73d85de9f8ae62fc9fad44ca4..a9e0493810a666acd42f246ad631f499c3ffb304 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,7 +20,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
margin 16px
diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue
index fc8fdad9c4a2802adc0877d27d239c1c49c5f9e6..5c5bbd7256feba52b75d5c276c4cf3c4e206e472 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 9c37b3118b6c3bedecb7fc05280c51f83f02b59f..bccf36e52fec8293a9f3bfa37690566c780b927e 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display inline-block
@@ -50,30 +50,30 @@ 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 rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
+ //border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
&:active
- color darken($theme-color, 20%)
- background rgba($theme-color, 0.12)
- border-color $theme-color
+ color var(--primaryDarken20)
+ //background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+ 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
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 831981bb3ef79e1716ae4b97a91dc83eef8ad97a..13cabbdc041dacdca8733d16a452467c5457702f 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display inline-flex
@@ -70,15 +70,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
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index ce28bfb12ac938d739ed25a9d5a421627c1a5aa7..98c9bf7f5aaf03ce46a5c259c95984aedec15c5e 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,7 +155,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark, fill)
margin 32px 0
@@ -193,7 +193,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)
@@ -325,7 +325,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
- color $theme-color
+ color var(--primary)
&.focused
&.filled
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index dcdda1cf0e3d27ef77c4bc992df02cbbc22bc649..ded6b5650c26d85d106d924f0f5bd07af25e8af0 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display inline-block
@@ -68,10 +68,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
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index 4273a4a0de343175a4e6c3b927c3cbc401276976..c32865c6904332c1eeaa13dbe399079ae1df0b54 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark, fill)
margin 32px 0
@@ -113,7 +113,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)
@@ -190,7 +190,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
- color $theme-color
+ color var(--primary)
&.focused
&.filled
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index e88b867801d16610ee67e1aed9c3bb244e23d619..e358713d8fa8b87c986c5534c123cde5f8dba914 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -56,7 +56,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
@@ -79,11 +79,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
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 60fe1cdd8221114357d07d3477fcb6203e3e7a9c..53b7dcaf8c015ac0a568ab2d7ee3016c95b22904 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark, fill)
margin 42px 0 32px 0
@@ -97,7 +97,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)
@@ -149,7 +149,7 @@ root(isDark, fill)
opacity 1
> .label
- color $theme-color
+ color var(--primary)
&.focused
&.filled
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index f4797d89f7d95e9a3a1af467e18f93e571ad9526..19b0d15708edc109061a1702abc88f87e9b914d0 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/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 1830b1832ed116825dd72ef46e8d1d6d95d3ff0f..d0a892fd56b42dd7664f25542ba12f005bf97c1f 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
$border-color = rgba(27, 31, 35, 0.15)
@@ -199,8 +199,8 @@ root(isDark)
background isDark ? #21242b : #ddd
&.active
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
> *
user-select none
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 80a870a2570830ce0f61aa68f99c38dadff7adeb..d81e4c08209de2ef7c4652d86d7c2a1f6d0088c6 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
padding 32px
@@ -173,29 +173,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
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 04223f0d212510b6fa4bc68dcbc97288de557bc1..1725c2f1af7798f8bb6213be6d3ef0da3d54e3f4 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,7 +26,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
.mkw-analog-clock--body
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index eb15030370a211f8ad420a694243a83f330061d1..a24524d1c5a8f1df085da07bf17f90800701c57e 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,7 +116,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
&[data-special='on-new-years-day']
@@ -182,7 +182,7 @@ root(isDark)
> .val
height 4px
- background $theme-color
+ background var(--primary)
transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
&:nth-child(1)
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 30f0d3b0090b39176faef1dcc779c2d5a6f64579..079522d39b7a6db1eaebbc09d9942bc12eb8627c 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,7 +57,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
.mkw-memo--body
@@ -83,8 +83,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,10 +92,10 @@ 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
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
index b66c8f4025bb4865a50808cf5f9d19799575852c..3ab5d79c5dc8a8d0e6e6c8cc245f94d0ca8bfb43 100644
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -1,5 +1,3 @@
-@import "../../const"
-
button
font-family sans-serif
@@ -34,7 +32,7 @@ button.ui
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -50,20 +48,20 @@ button.ui
border-color #dcdcdc
&.primary
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ //background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ //background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
input:not([type]).ui
input[type='text'].ui
@@ -86,7 +84,7 @@ textarea.ui
border-color #b0b0b0
&:focus
- border-color $theme-color
+ border-color var(--primary)
textarea.ui
min-width 100%
@@ -140,17 +138,17 @@ html[data-darkmode]
border-color #151a1d
&.primary
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ //background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ //background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
input:not([type]).ui
input[type='text'].ui
@@ -174,7 +172,7 @@ html[data-darkmode]
border-color #b0b0b0
&:focus
- border-color $theme-color
+ border-color var(--primary)
.ui.from.group
> p:first-child
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index e71983f821588bda8547abbc38e0a4b47736e6f8..2414ced0c96286fd92b81af72c79329380100673 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,7 +128,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
color isDark ? #c5ced6 : #777
@@ -241,14 +241,14 @@ root(isDark)
&[data-today]
> div
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
&:hover > div
- background lighten($theme-color, 10%)
+ background var(--primaryLighten10)
&:active > div
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
.mk-calendar[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index e4010953632ee6ee27bbd2e591daaf9dc5baba7b..6d6f3a3596773c4fe89cddd6d144c041b71cedba 100644
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -649,7 +649,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.gkgckalzgidaygcxnugepioremxvxvpt
padding 32px
@@ -675,7 +675,7 @@ export default Vue.extend({
*
&:not(.active)
- color $theme-color
+ color var(--primary)
cursor pointer
> div
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 933d31f2994ff56bbc23f81ddd44b3a2dcf0076b..806f7f5c3f9623878280ec58874d53f15966ac8b 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
-@import '~const.styl'
+
.title
> [data-fa]
@@ -74,7 +74,7 @@ export default Vue.extend({
.footer
height 72px
- background lighten($theme-color, 95%)
+ background var(--primaryLighten95)
.upload
display inline-block
@@ -87,7 +87,7 @@ export default Vue.extend({
width 40px
height 40px
font-size 1em
- color rgba($theme-color, 0.5)
+ color var(--primaryAlpha05)
background transparent
outline none
border solid 1px transparent
@@ -95,13 +95,13 @@ export default Vue.extend({
&:hover
background transparent
- border-color rgba($theme-color, 0.3)
+ border-color var(--primaryAlpha03)
&:active
- color rgba($theme-color, 0.6)
+ color var(--primaryAlpha06)
background transparent
- border-color rgba($theme-color, 0.5)
- box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+ border-color var(--primaryAlpha05)
+ //box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
&:focus
&:after
@@ -112,7 +112,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
.ok
@@ -138,7 +138,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -147,20 +147,20 @@ export default Vue.extend({
.ok
right 16px
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
.cancel
right 148px
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index 03d6fd1636c33d045bf7e20d133b67689ac7fb54..b970218e587004b769561c6662b9b9ac640f532d 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
-@import '~const.styl'
+
.title
> [data-fa]
@@ -48,7 +48,7 @@ export default Vue.extend({
.footer
height 72px
- background lighten($theme-color, 95%)
+ background var(--primaryLighten95)
.ok
.cancel
@@ -73,7 +73,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -82,20 +82,20 @@ export default Vue.extend({
.ok
right 16px
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
.cancel
right 148px
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index e7deec675efd5315cf37afc93cad2dfc67aa1a3f..b65a8e1dea5003605e2e117f92956e80b1d8b3ef 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$width = 240px
@@ -69,7 +69,7 @@ root(isDark)
&:active
> p, a
- background $theme-color
+ background var(--primary)
> p, a
display block
@@ -90,14 +90,14 @@ root(isDark)
&:hover
> p, a
text-decoration none
- background $theme-color
- color $theme-color-foreground
+ background var(--primary)
+ color var(--primaryForeground)
&:active
> p, a
text-decoration none
- background darken($theme-color, 10%)
- color $theme-color-foreground
+ background var(--primaryDarken10)
+ color var(--primaryForeground)
li > ul
visibility hidden
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
index 4fa258549f3bdf43e79eb2a1840e360c72c2d4bd..629c3b013aef5d02b146f10428c65489676829d4 100644
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
-@import '~const.styl'
+
.header
> [data-fa]
@@ -73,7 +73,7 @@ export default Vue.extend({
.actions
height 72px
- background lighten($theme-color, 95%)
+ background var(--primaryLighten95)
.ok
.cancel
@@ -98,7 +98,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -111,20 +111,20 @@ export default Vue.extend({
.ok
right 16px
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
.cancel
.skip
@@ -155,11 +155,11 @@ export default Vue.extend({
}
.cropper-view-box {
- outline-color: $theme-color;
+ outline-color: var(--primary);
}
.cropper-line, .cropper-point {
- background-color: $theme-color;
+ background-color: var(--primary);
}
.cropper-bg {
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index bbb1e0030c71b9db17e9903570dcf66a2a0d3e50..baa6f911fea71f9ee4b7f9ea40964418ad428ca0 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-dialog
> .bg
@@ -144,20 +144,20 @@ export default Vue.extend({
margin 0 0.375em
&:hover
- color $theme-color
+ color var(--primary)
&:active
- color darken($theme-color, 10%)
+ color var(--primaryDarken10)
transition color 0s ease
</style>
<style lang="stylus" module>
-@import '~const.styl'
+
.header
margin 1em 0
- color $theme-color
+ color var(--primary)
// color #43A4EC
font-weight bold
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 3ac8923c513f217e008c9a7a24a85f17ad9e1ad2..225130baf7c8ccb7c21c432a948a927f6be1730e 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,7 +200,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
padding 8px 0 0 0
@@ -237,13 +237,13 @@ root(isDark)
background #ce2212
&[data-is-selected]
- background $theme-color
+ background var(--primary)
&:hover
- background lighten($theme-color, 10%)
+ background var(--primaryLighten10)
&:active
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
> .label
&:before
@@ -251,7 +251,7 @@ root(isDark)
display none
> .name
- color $theme-color-foreground
+ color var(--primaryForeground)
&[data-is-contextmenu-showing]
&:after
@@ -262,7 +262,7 @@ root(isDark)
right -4px
bottom -4px
left -4px
- border 2px dashed rgba($theme-color, 0.3)
+ border 2px dashed var(--primaryAlpha03)
border-radius 4px
> .label
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index e6b71f9426c5830fe8170d7f56ffd4cb10698c85..cb49215cbbc786ed6414a9084da381769838f620 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,12 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
padding 8px
height 64px
- background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
+ background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
border-radius 4px
&, *
@@ -229,10 +229,10 @@ root(isDark)
pointer-events none
&:hover
- background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+ //background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
&:active
- background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
+ //background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten85)
&[data-is-contextmenu-showing]
&[data-draghover]
@@ -244,16 +244,16 @@ root(isDark)
right -4px
bottom -4px
left -4px
- border 2px dashed rgba($theme-color, 0.3)
+ border 2px dashed var(--primaryAlpha03)
border-radius 4px
&[data-draghover]
- background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+ //background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten90)
> .name
margin 0
font-size 0.9em
- color isDark ? #fff : darken($theme-color, 30%)
+ color isDark ? #fff : var(--primaryDarken30)
> [data-fa]
margin-right 4px
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index cb289027d4f041b34c33145247a37fd4e13b85bf..ccfdb3159fb70f26ac8923aab1b722a07cf65205 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,7 +585,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
@@ -697,8 +697,8 @@ root(isDark)
z-index 128
top 0
left 0
- border solid 1px $theme-color
- background rgba($theme-color, 0.5)
+ border solid 1px var(--primary)
+ background var(--primaryAlpha05)
pointer-events none
> .contents
@@ -769,7 +769,7 @@ root(isDark)
top 38px
width 100%
height calc(100% - 38px)
- border dashed 2px rgba($theme-color, 0.5)
+ border dashed 2px var(--primaryAlpha05)
pointer-events none
> .mk-uploader
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 1db4b0cfa48dd6d25315c769869d0426c7461fdf..014b536f59f302f198f8772b623d76750db5e1c0 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display block
@@ -126,7 +126,7 @@ root(isDark)
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:not(.active)
@@ -143,20 +143,20 @@ root(isDark)
border-color isDark ? #151a1d : #dcdcdc
&.active
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
&.wait
cursor wait !important
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index c9b868422ed7b921b3f2ad3868a24052f2c737da..3d77da52d9c83ff19b0c0c6e8c341e7497734e10 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,7 +247,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display block
@@ -292,15 +292,15 @@ root(isDark)
padding 0 16px
line-height 48px
text-decoration none
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
transition background 0.1s ease
&:hover
- background lighten($theme-color, 10%)
+ background var(--primaryLighten10)
&:active
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
transition background 0s ease
> [data-fa]
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
index cf7c09ea56f6d983597f710b513d057897d65f1d..976e897fe837a9ac1d8fb8123019db6b2518384f 100644
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
<style lang="stylus" module>
-@import '~const.styl'
+
.header
> [data-fa]
@@ -96,25 +96,25 @@ export default Vue.extend({
color #333
background #fff
outline none
- border solid 1px rgba($theme-color, 0.1)
+ border solid 1px var(--primaryAlpha01)
border-radius 4px
transition border-color .3s ease
&:hover
- border-color rgba($theme-color, 0.2)
+ border-color var(--primaryAlpha02)
transition border-color .1s ease
&:focus
- color $theme-color
- border-color rgba($theme-color, 0.5)
+ color var(--primary)
+ border-color var(--primaryAlpha05)
transition border-color 0s ease
&::-webkit-input-placeholder
- color rgba($theme-color, 0.3)
+ color var(--primaryAlpha03)
.actions
height 72px
- background lighten($theme-color, 95%)
+ background var(--primaryLighten95)
.ok
.cancel
@@ -139,7 +139,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -148,20 +148,20 @@ export default Vue.extend({
.ok
right 16px
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
.cancel
right 148px
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 80faae0d4264a94490d5a863263a6b0cfb63c298..f004ca88eeddcdee50ed67bdad685c53da0742f1 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
overflow hidden
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index ac2c1ce97f901cdae78bbf8aff54f5d88289656f..a91212221bcca69f28f3dd70e16ff53a1c8ece9b 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -317,7 +317,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
margin 0
@@ -348,7 +348,7 @@ root(isDark)
right 2px
bottom 2px
left 2px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 4px
> .renote
@@ -557,7 +557,7 @@ root(isDark)
padding 0 4px
margin-left 4px
font-size 80%
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
border-radius 4px
</style>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index e6267ed204acab6f4bac5f1d4f01c701e4624db8..2e3ffd171b4bb6d78a4889ef52f2d96003c5f5bc 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,7 +216,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
.transition
@@ -250,7 +250,7 @@ root(isDark)
position sticky
z-index 100
height 3px
- background $theme-color
+ background var(--primary)
> footer
> button
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 8db85aeaca20fa0b61fc2294634c171929bd532b..fdd6e753180501bcddcd7bd867f5b9467c535c71 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,12 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display block
padding 16px
- background isDark ? #282C37 : lighten($theme-color, 95%)
+ background isDark ? #282C37 : var(--primaryLighten95)
&:after
content ""
@@ -456,23 +456,23 @@ root(isDark)
color isDark ? #fff : #333
background isDark ? #191d23 : #fff
outline none
- border solid 1px rgba($theme-color, 0.1)
+ border solid 1px var(--primaryAlpha01)
border-radius 4px
transition border-color .2s ease
&:hover
- border-color rgba($theme-color, 0.2)
+ border-color var(--primaryAlpha02)
transition border-color .1s ease
&:focus
- border-color rgba($theme-color, 0.5)
+ border-color var(--primaryAlpha05)
transition border-color 0s ease
&:disabled
opacity 0.5
&::-webkit-input-placeholder
- color rgba($theme-color, 0.3)
+ color var(--primaryAlpha03)
> input
margin-bottom 8px
@@ -486,17 +486,17 @@ root(isDark)
&:hover
& + *
& + * + *
- border-color rgba($theme-color, 0.2)
+ border-color var(--primaryAlpha02)
transition border-color .1s ease
&:focus
& + *
& + * + *
- border-color rgba($theme-color, 0.5)
+ border-color var(--primaryAlpha05)
transition border-color 0s ease
&.with
- border-bottom solid 1px rgba($theme-color, 0.1) !important
+ border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 4px 4px 0 0
> .visibleUsers
@@ -514,7 +514,7 @@ root(isDark)
font-size 14px
> b
- color isDark ? #9baec8 : darken($theme-color, 20%)
+ color isDark ? #9baec8 : var(--primaryDarken20)
> *
margin-right 8px
@@ -523,14 +523,14 @@ root(isDark)
> .files
margin 0
padding 0
- background isDark ? #181b23 : lighten($theme-color, 98%)
- border solid 1px rgba($theme-color, 0.1)
+ background isDark ? #181b23 : var(--primaryLighten98)
+ border solid 1px var(--primaryAlpha01)
border-top none
border-radius 0 0 4px 4px
transition border-color .3s ease
&.with
- border-bottom solid 1px rgba($theme-color, 0.1) !important
+ border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 0
> .remain
@@ -540,7 +540,7 @@ root(isDark)
right 8px
margin 0
padding 0
- color rgba($theme-color, 0.4)
+ color var(--primaryAlpha04)
> div
padding 4px
@@ -574,8 +574,8 @@ root(isDark)
cursor pointer
> .mk-poll-editor
- background isDark ? #181b23 : lighten($theme-color, 98%)
- border solid 1px rgba($theme-color, 0.1)
+ background isDark ? #181b23 : var(--primaryLighten98)
+ border solid 1px var(--primaryAlpha01)
border-top none
border-radius 0 0 4px 4px
transition border-color .3s ease
@@ -583,7 +583,7 @@ root(isDark)
> .mk-uploader
margin 8px 0 0 0
padding 8px
- border solid 1px rgba($theme-color, 0.2)
+ border solid 1px var(--primaryAlpha02)
border-radius 4px
input[type='file']
@@ -600,22 +600,22 @@ root(isDark)
width 110px
height 40px
font-size 1em
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
outline none
- border solid 1px lighten($theme-color, 15%)
+ border solid 1px var(--primaryLighten15)
border-radius 4px
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
&:focus
&:after
@@ -626,7 +626,7 @@ root(isDark)
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -636,13 +636,13 @@ root(isDark)
&.wait
background linear-gradient(
45deg,
- darken($theme-color, 10%) 25%,
- $theme-color 25%,
- $theme-color 50%,
- darken($theme-color, 10%) 50%,
- darken($theme-color, 10%) 75%,
- $theme-color 75%,
- $theme-color
+ var(--primaryDarken10) 25%,
+ var(--primary) 25%,
+ var(--primary) 50%,
+ var(--primaryDarken10) 50%,
+ var(--primaryDarken10) 75%,
+ var(--primary) 75%,
+ var(--primary)
)
background-size 32px 32px
animation stripe-bg 1.5s linear infinite
@@ -661,7 +661,7 @@ root(isDark)
right 138px
margin 0
line-height 40px
- color rgba($theme-color, 0.5)
+ color var(--primaryAlpha05)
&.over
color #ec3828
@@ -679,7 +679,7 @@ root(isDark)
width 40px
height 40px
font-size 1em
- color isDark ? $theme-color : rgba($theme-color, 0.5)
+ color isDark ? var(--primary) : var(--primaryAlpha05)
background transparent
outline none
border solid 1px transparent
@@ -687,12 +687,12 @@ root(isDark)
&:hover
background transparent
- border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
+ border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
&:active
- color rgba($theme-color, 0.6)
- background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
- border-color rgba($theme-color, 0.5)
+ color var(--primaryAlpha06)
+ background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
+ border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(#000, 0.15) inset
&:focus
@@ -704,7 +704,7 @@ root(isDark)
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
> .dropzone
@@ -713,7 +713,7 @@ root(isDark)
top 0
width 100%
height 100%
- border dashed 2px rgba($theme-color, 0.5)
+ border dashed 2px var(--primaryAlpha05)
pointer-events none
.mk-post-form[data-darkmode]
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
index cc25ba8e3076591bd4e4253bcd1f43de69b5f165..feda6050bc96a7d12c0465897e938b39c7638341 100644
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
</script>
<style lang="stylus" module>
-@import '~const.styl'
+
.body
padding 18px 24px 24px 24px
@@ -53,7 +53,7 @@ export default Vue.extend({
margin 0 0 4px 0
text-align center
line-height 16px
- color rgba($theme-color, 0.7)
+ color var(--primaryAlpha07)
&:after
content '%'
@@ -69,21 +69,21 @@ 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)
.waiting
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 progress-dialog-tag-progress-waiting 1.5s linear infinite
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index c5192ecaac6b51751b34b93542aac92c85efee1d..ad23740f1322b6ffbe4b8a1c91d383225016e4a5 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
@@ -66,7 +66,7 @@ root(isDark)
> footer
height 72px
- background isDark ? #313543 : lighten($theme-color, 95%)
+ background isDark ? #313543 : var(--primaryLighten95)
> .quote
position absolute
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index cf10ea0f56cd6d23066e62eb34e7fb00c1cbd4a1..4b8ee3c9cd2f33deaf20c0ef9c51a2ccc9e28244 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -492,7 +492,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
@@ -524,7 +524,7 @@ root(isDark)
&.active
margin-left 8px
- color $theme-color !important
+ color var(--primary) !important
> .pages
width 100%
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index ff73bde95cc108cfdf45e4914dfb79696333014c..aef873dd11810b4a4493ef446f55c8ada655e874 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -215,7 +215,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-timeline-core
> .mk-friends-maker
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index c008c175def7fcde159ebb66093bf67e369f2ab1..32ed89ef0bfe138174346b55730f0a17de5debc7 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,7 +175,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
background isDark ? #282C37 : #fff
@@ -207,7 +207,7 @@ root(isDark)
top -4px
right 4px
font-size 10px
- color $theme-color
+ color var(--primary)
&:hover
color isDark ? #b2c1d5 : #aaa
@@ -216,7 +216,7 @@ root(isDark)
color isDark ? #b2c1d5 : #999
&[data-active]
- color $theme-color
+ color var(--primary)
cursor default
&:before
@@ -227,7 +227,7 @@ root(isDark)
left 0
width 100%
height 2px
- background $theme-color
+ background var(--primary)
> span
display inline-block
@@ -237,7 +237,7 @@ root(isDark)
user-select none
&[data-active]
- color $theme-color
+ color var(--primary)
cursor default
font-weight bold
@@ -249,7 +249,7 @@ root(isDark)
left -8px
width calc(100% + 16px)
height 2px
- background $theme-color
+ background var(--primary)
&:not([data-active])
color isDark ? #9aa2a7 : #6f7477
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 1e8a45beafaba6dfd721227d23cbc88a1dcab0c4..301efeb3e2a6a3b0fc221f59bad60539ae9b5e68 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
> .header
@@ -249,8 +249,8 @@ root(isDark)
padding 2px 8px
font-size 90%
font-style normal
- background $theme-color
- color $theme-color-foreground
+ background var(--primary)
+ color var(--primaryForeground)
border-radius 8px
> [data-fa]:first-child
@@ -269,11 +269,11 @@ root(isDark)
&:hover, &:active
text-decoration none
- background $theme-color
- color $theme-color-foreground
+ background var(--primary)
+ color var(--primaryForeground)
&:active
- background darken($theme-color, 10%)
+ background var(--primaryDarken10)
&.signout
$color = #e64137
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 6292b764c692a31aac48f817569eac9c1f2267f4..f41d4b8ecf09f3fdfd548389f91d8f233cd3990f 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display inline-block
@@ -120,7 +120,7 @@ root(isDark)
&.active
> a
- border-bottom solid 3px $theme-color
+ border-bottom solid 3px var(--primary)
> a
display inline-block
@@ -147,7 +147,7 @@ root(isDark)
> [data-fa]:last-child
margin-left 5px
font-size 10px
- color $theme-color
+ color var(--primary)
@media (max-width 1100px)
margin-left -5px
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 74dcd4111f67420c60cb81b15298130dd9708ebc..f9b68fa0e90e9b8220c8954cc2da1d7e44945764 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
@@ -93,7 +93,7 @@ root(isDark)
margin-left -5px
vertical-align super
font-size 10px
- color $theme-color
+ color var(--primary)
> .pop
$bgcolor = isDark ? #282c37 : #fff
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
index 36654885423f2948a51478051f36385a0ea88b64..9527792a34072f06a89cc1aeb9a47b3089a39c3b 100644
--- a/src/client/app/desktop/views/components/ui.header.post.vue
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -17,7 +17,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.note
display inline-block
@@ -33,8 +33,8 @@ export default Vue.extend({
font-size 1.2em
font-weight normal
text-decoration none
- color $theme-color-foreground
- background $theme-color !important
+ color var(--primaryForeground)
+ background var(--primary) !important
outline none
border none
border-radius 4px
@@ -45,10 +45,10 @@ export default Vue.extend({
pointer-events none
&: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
</style>
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index 9a36e52fcc53801b791b13e37cc6f423b92047fd..d5794dc882f62b94884d217c1c4ae552b79dcc8f 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
> [data-fa]
display block
@@ -67,7 +67,7 @@ root(isDark)
background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
&:focus
- box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+ box-shadow 0 0 0 2px var(--primaryAlpha05) !important
.search[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f6d6d68a7f515f5f3a816ba963e820efcd23c0ca..f988bb21e959b9e26f3b6fe5972827d7c30b55d2 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -83,7 +83,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
position absolute
@@ -151,7 +151,7 @@ root(isDark)
> span
font-size 1em
- color $theme-color
+ color var(--primary)
> .mk-follow-button
position absolute
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index 05e2f4e5b306b5bddbb9b7bafae5fc91b8e5bc14..1316f277b704618b99521bad7e76a75093ff4f9c 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -69,7 +69,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-users-list
height 100%
@@ -104,8 +104,8 @@ export default Vue.extend({
&[data-active]
font-weight bold
- color $theme-color
- border-color $theme-color
+ color var(--primary)
+ border-color var(--primary)
cursor default
> span
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 5eece3795fbcedf2235f60e2a54148e343a16f53..2b01c24ca86a1e85d0d6041a470d3592bdd45fc7 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -463,7 +463,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display block
@@ -494,9 +494,9 @@ root(isDark)
&:not([data-is-modal])
> .body
if isDark
- box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 12px 0 rgba(#000, 0.5)
+ box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
else
- box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
+ box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
> .handle
$size = 8px
diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
index 532400deb20820cab8a187f777e6e8c74f1ece43..272016b3f98742bd41c5e315e2629f5c316a822e 100644
--- a/src/client/app/desktop/views/pages/admin/admin.announcements.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.qldxjjsrseehkusjuoooapmsprvfrxyl
textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index 5d0f6d451ef1a8f597069f1c91a7ca3aab272d1b..f5734012bd39f1f155820431b9a25930ea18d32c 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.obdskegsannmntldydackcpzezagxqfy
> .stats
@@ -112,7 +112,7 @@ export default Vue.extend({
> *:first-child
display block
- color $theme-color
+ color var(--primary)
> *:last-child
font-size 70%
diff --git a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
index c6bf20361fd1445389fe9c56655a87662df59c91..f491b8595978d1c3b3cec824238516c46845be55 100644
--- a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.jdnqwkzlnxcfftthoybjxrebyolvoucw
textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
index 8d8e37e1818230b648990f8174d1790c35ac0bcd..32295e37950adcf2fcdcb2d90d40ffd3d9d1229b 100644
--- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
header
margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
index ec423969beffe5ec98987a918628cb5904e5050d..d6905fe9c050bf514f8db194f75ae211fc00eefd 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
header
margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
index e8204e69f4f30f272ce3f62395fab2b5fd1ec205..d0cf635a9843a227eb74cf60cd7a04ef792fc52d 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
header
margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
index 91fb04af80029fb6d7b3518622280d830dff09c0..9c0b0209b74e6732164192cbdf94d919c99ca811 100644
--- a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
header
margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 510252b44728216d15274501d0fa5f04446f6c7e..b874915f051f9c79f7a6267ed62bd7801051d7cc 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
</script>
<style lang="stylus">
-@import '~const.styl'
+
.mk-admin
display flex
@@ -106,7 +106,7 @@ export default Vue.extend({
&.active
margin-left 8px
- color $theme-color !important
+ color var(--primary) !important
> main
width 100%
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 04aa5e82d12dacaa6d50de1f6afd9e6d3619853d..10454b1cc6c18cce757a483bb1c656b22d4b421b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -269,7 +269,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$header-height = 42px
@@ -283,10 +283,10 @@ root(isDark)
overflow hidden
&.draghover
- box-shadow 0 0 0 2px rgba($theme-color, 0.8)
+ box-shadow 0 0 0 2px var(--primaryAlpha08)
&.dragging
- box-shadow 0 0 0 2px rgba($theme-color, 0.4)
+ box-shadow 0 0 0 2px var(--primaryAlpha04)
&.dropready
*
@@ -329,7 +329,7 @@ root(isDark)
pointer-events none
&.indicate
- box-shadow 0 3px 0 0 $theme-color
+ box-shadow 0 3px 0 0 var(--primary)
> span
[data-fa]
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 99274b0f416d222d6934afe4041f2f894088be5b..82e816cc8cfc6763eaa4b28eafefc5eec58fce3c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -214,7 +214,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
mediaRoot(isDark)
font-size 13px
@@ -368,8 +368,8 @@ root(isDark)
padding 0 4px
margin-left 4px
font-size 80%
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
border-radius 4px
.mk-url-preview
@@ -430,7 +430,7 @@ root(isDark)
color #999
&.reacted
- color $theme-color
+ color var(--primary)
.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 2e7e30f12ab6f6543a24d79c3e553a814948e680..58f13dd57b865733d2cfb9bd4ef054b4e7bff3c2 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
.transition
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 810770a022fffe78fea281959a6243b02d54208d..48c80c82c4c7297d4268aff724071aff1e25f027 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
</style>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 15397232e07ea6d3733e76de14fcbf4c21d5457c..fe190bf89290536266244413ebb2e6cac6e9712f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -135,7 +135,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
diff --git a/src/client/app/desktop/views/pages/selectdrive.vue b/src/client/app/desktop/views/pages/selectdrive.vue
index c846f2418f637a9f44b8f2ca6d8bc036e2549d69..b82ed0a20801c465325d0f2cf7e42cba57afd6db 100644
--- a/src/client/app/desktop/views/pages/selectdrive.vue
+++ b/src/client/app/desktop/views/pages/selectdrive.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mkp-selectdrive
display block
@@ -72,7 +72,7 @@ export default Vue.extend({
left 0
width 100%
height 72px
- background lighten($theme-color, 95%)
+ background var(--primaryLighten95)
.upload
display inline-block
@@ -85,7 +85,7 @@ export default Vue.extend({
width 40px
height 40px
font-size 1em
- color rgba($theme-color, 0.5)
+ color var(--primaryAlpha05)
background transparent
outline none
border solid 1px transparent
@@ -93,13 +93,13 @@ export default Vue.extend({
&:hover
background transparent
- border-color rgba($theme-color, 0.3)
+ border-color var(--primaryAlpha03)
&:active
- color rgba($theme-color, 0.6)
+ color var(--primaryAlpha06)
background transparent
- border-color rgba($theme-color, 0.5)
- box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+ border-color var(--primaryAlpha05)
+ //box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
&:focus
&:after
@@ -110,7 +110,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
.ok
@@ -136,7 +136,7 @@ export default Vue.extend({
right -5px
bottom -5px
left -5px
- border 2px solid rgba($theme-color, 0.3)
+ border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
@@ -145,20 +145,20 @@ export default Vue.extend({
.ok
right 16px
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
+ color var(--primaryForeground)
+ background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
+ background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+ border-color var(--primary)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primary)
+ border-color var(--primary)
.cancel
right 148px
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
index 7a4e4ab5ce746cd13e1588f4e06512af9165f2d4..219885fb9e028faa2e4b5fc1dbc9672a8a00e3e2 100644
--- a/src/client/app/desktop/views/pages/stats/stats.vue
+++ b/src/client/app/desktop/views/pages/stats/stats.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
</script>
<style lang="stylus">
-@import '~const.styl'
+
.tcrwdhwpuxrwmcttxjcsehgpagpstqey
width 100%
@@ -54,7 +54,7 @@ export default Vue.extend({
> *:first-child
display block
- color $theme-color
+ color var(--primary)
> *:last-child
font-size 70%
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index f727910e777cd0ea841dc8fc09a6a0e24c5f8631..30dc74212d86dd484fd4e9c231707a4c26026932 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -100,7 +100,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
background isDark ? #282C37 : #fff
@@ -208,7 +208,7 @@ root(isDark)
margin-right 4px
font-size 1rem
font-weight bold
- color $theme-color
+ color var(--primary)
.header[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index be6adaac93aa80f1f9691b95f689afb08e7d548b..3cde6cc10c1d93e156639945187ef05f23a4898e 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -112,7 +112,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
background isDark ? #282C37 : #fff
@@ -133,7 +133,7 @@ root(isDark)
user-select none
&[data-active]
- color $theme-color
+ color var(--primary)
cursor default
font-weight bold
@@ -145,7 +145,7 @@ root(isDark)
left -8px
width calc(100% + 16px)
height 2px
- background $theme-color
+ background var(--primary)
&:not([data-active])
color isDark ? #9aa2a7 : #6f7477
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 7f5f4b9c37eac9f3041541fe4f59f65977e29652..05c32a7bd1791809c85c97ea0b093119cff52203 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -303,7 +303,7 @@ export default Vue.extend({
</style>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display flex
@@ -385,7 +385,7 @@ root(isDark)
> .main
grid-row 1
grid-column 1 / 3
- border-top solid 5px $theme-color
+ border-top solid 5px var(--primary)
> div
padding 32px
@@ -426,7 +426,7 @@ root(isDark)
cursor pointer
&:hover
- color $theme-color
+ color var(--primary)
> .char
display block
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 19a2790d957dc2fc53e00c1e1e60b4154f689d31..a763f4d17c29b20df8e34f86e222b55a7e545484 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -68,7 +68,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mkw-post-form
background #fff
@@ -107,8 +107,8 @@ export default define({
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
@@ -116,10 +116,10 @@ export default define({
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
</style>
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 6a0d74c75226d503587c956b957421dd648e2c62..fff44a28c39e848d6c3d6a90a8eecf355fca8336 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-dialog
> .bg
@@ -145,20 +145,20 @@ export default Vue.extend({
margin 0 0.375em
&:hover
- color $theme-color
+ color var(--primary)
&:active
- color darken($theme-color, 10%)
+ color var(--primaryDarken10)
transition color 0s ease
</style>
<style lang="stylus" module>
-@import '~const.styl'
+
.header
margin 0 0 1em 0
- color $theme-color
+ color var(--primary)
// color #43A4EC
font-weight bold
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 4375cfdd7b0f7422b16ee08722563458e455cab3..ba58cf59a0852ee1ba9c562969952cbe5f2cd66b 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
display block
@@ -150,7 +150,7 @@ root(isDark)
color #bf4633
&[data-is-selected]
- background $theme-color
+ background var(--primary)
&, *
color #fff !important
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index ff7260edb55bd27dc873d219edf25d4c7f8024ab..cff830d9984d38b70e70ad759ea2b3dea5892686 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-follow-button
display block
@@ -105,29 +105,29 @@ export default Vue.extend({
line-height 36px
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
diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue
index 3cb568615d9185ecdecfd93d45841a0b55ed2c18..316fbda8f1e714826502502de03a346b9ff644a0 100644
--- a/src/client/app/mobile/views/components/mute-button.vue
+++ b/src/client/app/mobile/views/components/mute-button.vue
@@ -41,11 +41,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-mute-button
display block
- user-select none
+ user-select none
cursor pointer
padding 0 16px
margin 0
@@ -53,27 +53,27 @@ export default Vue.extend({
line-height 36px
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)
</style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 68be9f8ac433a9cb1e83152f1e5dc829267c32f7..6daf375ed23c1404be8dd1c6b6962bc0800ab89b 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
overflow hidden
@@ -422,7 +422,7 @@ root(isDark)
color #999
&.reacted
- color $theme-color
+ color var(--primary)
> .replies
> *
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 0ce72cab11cac31c3b4983fa2d3fb0f4cb01ac54..2bfd8f8acc7b98a8272f7bed07c6661a8b634c7f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,7 +228,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
font-size 12px
@@ -395,8 +395,8 @@ root(isDark)
padding 0 4px
margin-left 4px
font-size 80%
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
border-radius 4px
.mk-url-preview
@@ -457,7 +457,7 @@ root(isDark)
color #999
&.reacted
- color $theme-color
+ color var(--primary)
.note[data-darkmode]
root(true)
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 401df3ae5bcbec67ea94811f357ec0857cfe9d04..83674a33dc1cba8c1f9b40457b6a28c9baf0568c 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,7 +217,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
overflow hidden
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 1294273a2a9581602b05deab5ce4361d04fbff20..742163696e1ea59d3e931cfd7c50c369a735c54a 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -324,7 +324,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
max-width 500px
@@ -376,8 +376,8 @@ root(isDark)
padding 0 16px
line-height 34px
vertical-align bottom
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
border-radius 4px
&:disabled
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 15c8299c2e0a69fc718a191fd4a17ad60793fdd4..b859c2288781faa1c27b8d802f6ec33d151bfd22 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -118,7 +118,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$height = 48px
@@ -134,7 +134,7 @@ root(isDark)
> .indicator
height 3px
- background $theme-color
+ background var(--primary)
> .warn
display block
@@ -216,7 +216,7 @@ root(isDark)
left 8px
pointer-events none
font-size 10px
- color $theme-color
+ color var(--primary)
> button:last-child
display block
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c3ae05fef62ba6572b207412aea875bcf0638edf..29dcf18021646672902ea2df59148cb2ffadd3ec 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,7 +121,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$color = isDark ? #c9d2e0 : #777
@@ -198,11 +198,11 @@ root(isDark)
text-decoration none
&[data-active]
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
> [data-fa]:last-child
- color $theme-color-foreground
+ color var(--primaryForeground)
> [data-fa]:first-child
margin-right 0.5em
@@ -212,7 +212,7 @@ root(isDark)
> [data-fa].circle
margin-left 6px
font-size 10px
- color $theme-color
+ color var(--primary)
> [data-fa]:last-child
position absolute
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index a57b8212938e7fb9a268208223bb9e6385fbebfd..f06f5245b83c2d764c6495fb70cfffb6ec079bbb 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
.mk-users-list
@@ -87,8 +87,8 @@ export default Vue.extend({
&[data-active]
font-weight bold
- color $theme-color
- border-color $theme-color
+ color var(--primary)
+ border-color var(--primary)
> span
display inline-block
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 53512e804cad78349d5be11c7a13870798fe33fd..a25f70147b8433b9b3b345205c4f7eaddda39912 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
main
width 100%
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ca62d4e2f868b5f6d5d5e79a8b5d7de4d057228d..c2ab5d56232bd044b49880b7bda26457443d3b62 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -154,7 +154,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
> .nav
@@ -215,8 +215,8 @@ root(isDark)
color isDark ? #cdd0d8 : #666
&[data-active]
- color $theme-color-foreground
- background $theme-color
+ color var(--primaryForeground)
+ background var(--primary)
&:not([data-active]):hover
background isDark ? #353e4a : #eee
@@ -224,7 +224,7 @@ root(isDark)
> .badge
margin-left 6px
font-size 10px
- color $theme-color
+ color var(--primary)
> .tl
max-width 680px
@@ -246,7 +246,7 @@ main:not([data-darkmode])
</style>
<style lang="stylus" module>
-@import '~const.styl'
+
.title
i
@@ -255,7 +255,7 @@ main:not([data-darkmode])
.badge
margin-left 6px
font-size 10px
- color $theme-color
+ color var(--primary)
vertical-align middle
</style>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457bb6dca830ece19a5ec22487bec7da979..ce33332faf86de0a2fafe37e835ecd359a3fe986 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
main
width 100%
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index 77938c3d60208231534695be5240fd10c150f026..c2b2606fd81dd91b684f27e436aa815d5ccea34b 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
main
width 100%
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index 1c6a829cd5adbb36c30c67a6fafd6f4878ea512b..f8c8aafa61015078504f80f68ed8d3fedabaa9e1 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
main
width 100%
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 5ee0636dea389863f016a242ea161032fd3bcdf3..fc80f5d1c6de53881b894965f361db69e9973ec5 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
main
width 100%
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index c1082f31a9d1fa0a332cec7eacca79fee43da7e5..1ff81fc0c68f75e791fa60a2472fac38f8428f88 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
+
root(isDark)
$bg = isDark ? #22252f : #f7f7f7
@@ -275,8 +275,8 @@ root(isDark)
&[data-active]
font-weight bold
- color $theme-color
- border-color $theme-color
+ color var(--primary)
+ border-color var(--primary)
> .body
max-width 680px
diff --git a/src/client/const.styl b/src/client/const.styl
deleted file mode 100644
index b6560701d9fedb62b29879c92a5105e1006ac23e..0000000000000000000000000000000000000000
--- a/src/client/const.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-json('../const.json')
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
diff --git a/src/client/style.styl b/src/client/style.styl
index 6d1e53e5a6a453c97a0ffe1e2fdf6c9abc5d3ade..111e167204e85761d5000135464724a9448194ca 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -1,10 +1,8 @@
@charset 'utf-8'
-@import "./const"
-
/*
::selection
- background $theme-color
+ background var(--primary)
color #fff
*/
@@ -24,10 +22,8 @@ html, body
a
text-decoration none
- color $theme-color
+ color var(--primary)
cursor pointer
- tap-highlight-color rgba($theme-color, 0.7) !important
- -webkit-tap-highlight-color rgba($theme-color, 0.7) !important
&:hover
text-decoration underline
@@ -35,3 +31,9 @@ a
*
cursor pointer
+@css {
+ a {
+ tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+ -webkit-tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+ }
+}
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 4ea0a1a64985270415f5bcb99692d3c55a8139b6..ffe0ffa3ce4a9be2ed8368845a97229bc97d82e1 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -3,6 +3,7 @@
"name": "Dark"
},
"primary": "#fb4e4e",
+ "primaryForeground": "#fff",
"bg": "#191B22",
"scrollbarTrack": "#282C37",
"scrollbarHandle": "#454954",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 00a74a53c50c243f3ab10a6e164c07f7d925c541..f4d061e5ceb75038a2265fb450b9a73596926a1d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -3,6 +3,7 @@
"name": "Light"
},
"primary": "#fb4e4e",
+ "primaryForeground": "#fff",
"bg": "#f7f7f7",
"scrollbarTrack": "#fff",
"scrollbarHandle": "#00000033",