HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-09-26 20:19:35 +09:00
parent d2d3f7810e
commit 904114740b
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
110 changed files with 529 additions and 536 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -75,6 +75,7 @@
"@types/single-line-log": "1.1.0", "@types/single-line-log": "1.1.0",
"@types/speakeasy": "2.0.2", "@types/speakeasy": "2.0.2",
"@types/systeminformation": "3.23.0", "@types/systeminformation": "3.23.0",
"@types/tinycolor2": "1.4.1",
"@types/tmp": "0.0.33", "@types/tmp": "0.0.33",
"@types/uuid": "3.4.4", "@types/uuid": "3.4.4",
"@types/webpack": "4.4.12", "@types/webpack": "4.4.12",
@ -194,6 +195,7 @@
"systeminformation": "3.45.6", "systeminformation": "3.45.6",
"syuilo-password-strength": "0.0.1", "syuilo-password-strength": "0.0.1",
"textarea-caret": "3.1.0", "textarea-caret": "3.1.0",
"tinycolor2": "1.4.1",
"tmp": "0.0.33", "tmp": "0.0.33",
"ts-loader": "4.4.1", "ts-loader": "4.4.1",
"ts-node": "7.0.1", "ts-node": "7.0.1",

8
src/client/app/app.styl
View file

@ -27,7 +27,7 @@ body
z-index 65536 z-index 65536
.bar .bar
background $theme-color background var(--primary)
position fixed position fixed
z-index 65537 z-index 65537
@ -44,7 +44,7 @@ body
right 0px right 0px
width 100px width 100px
height 100% 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 opacity 1
transform rotate(3deg) translate(0px, -4px) transform rotate(3deg) translate(0px, -4px)
@ -64,8 +64,8 @@ body
box-sizing border-box box-sizing border-box
border solid 2px transparent border solid 2px transparent
border-top-color $theme-color border-top-color var(--primary)
border-left-color $theme-color border-left-color var(--primary)
border-radius 50% border-radius 50%
animation progress-spinner 400ms linear infinite animation progress-spinner 400ms linear infinite

67
src/client/app/common/scripts/theme.ts
View file

@ -1,3 +1,5 @@
import * as tinycolor from 'tinycolor2';
export default function(theme: { [key: string]: string }) { export default function(theme: { [key: string]: string }) {
const props = compile(theme); 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 compile(theme: { [key: string]: string }): { [key: string]: string } {
function getRgba(code: string): number[] { function getColor(code: string): tinycolor.Instance {
// ref // ref
if (code[0] == '@') { if (code[0] == '@') {
return getRgba(theme[code.substr(1)]); return getColor(theme[code.substr(1)]);
} }
let m; return tinycolor(code);
//#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
];
}
//#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];
} }
const props = {}; const props = {};
Object.entries(theme).forEach(([k, v]) => { Object.entries(theme).forEach(([k, v]) => {
if (k == 'meta') return; if (k == 'meta') return;
const [r, g, b, a] = getRgba(v); const c = getColor(v);
props[k] = genValue(r, g, b, a); props[k] = genValue(c);
props[`${k}-r`] = r; props[`${k}-r`] = c.toRgb().r;
props[`${k}-g`] = g; props[`${k}-g`] = c.toRgb().g;
props[`${k}-b`] = b; props[`${k}-b`] = c.toRgb().b;
props[`${k}-a`] = a; 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; return props;
} }
function genValue(r: number, g: number, b: number, a: number): string { function genValue(c: tinycolor.Instance): string {
return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`; return c.toRgbString();
} }

6
src/client/app/common/views/components/autocomplete.vue
View file

@ -259,7 +259,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
position fixed position fixed
@ -302,13 +302,13 @@ root(isDark)
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1) background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
&[data-selected='true'] &[data-selected='true']
background $theme-color background var(--primary)
&, * &, *
color #fff !important color #fff !important
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&, * &, *
color #fff !important color #fff !important

12
src/client/app/common/views/components/connect-failed.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-connect-failed .mk-connect-failed
width 100% width 100%
@ -70,17 +70,17 @@ export default Vue.extend({
display block display block
margin 1em auto 0 auto margin 1em auto 0 auto
padding 8px 10px padding 8px 10px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:focus &:focus
outline solid 3px rgba($theme-color, 0.3) outline solid 3px var(--primaryAlpha03)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> .thanks > .thanks
display block display block

6
src/client/app/common/views/components/forkit.vue
View file

@ -9,7 +9,7 @@
</template> </template>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.a .a
display block display block
@ -18,8 +18,8 @@
display block display block
//fill #151513 //fill #151513
//color #fff //color #fff
fill $theme-color fill var(--primary)
color $theme-color-foreground color var(--primaryForeground)
.octo-arm .octo-arm
transform-origin 130px 106px transform-origin 130px 106px

10
src/client/app/common/views/components/games/reversi/reversi.game.vue
View file

@ -304,7 +304,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
text-align center text-align center
@ -399,14 +399,14 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
background $theme-color background var(--primary)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&.prev &.prev
box-shadow 0 0 0 4px rgba($theme-color, 0.7) box-shadow 0 0 0 4px var(--primaryAlpha07)
&.isEnded &.isEnded
border-color isDark ? #6a767f : #ddd border-color isDark ? #6a767f : #ddd

4
src/client/app/common/views/components/games/reversi/reversi.index.vue
View file

@ -138,7 +138,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
> h1 > h1
@ -200,7 +200,7 @@ root(isDark)
user-select none user-select none
&:focus &:focus
border-color $theme-color border-color var(--primary)
&:hover &:hover
background isDark ? #313543 : #f5f5f5 background isDark ? #313543 : #f5f5f5

4
src/client/app/common/views/components/games/reversi/reversi.room.vue
View file

@ -252,7 +252,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
text-align center text-align center
@ -288,7 +288,7 @@ root(isDark)
&:focus &:focus
&:active &:active
border-color $theme-color border-color var(--primary)
> div > div
> .random > .random

2
src/client/app/common/views/components/games/reversi/reversi.vue
View file

@ -156,7 +156,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
color isDark ? #fff : #677f84 color isDark ? #fff : #677f84

10
src/client/app/common/views/components/menu.vue
View file

@ -117,7 +117,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$bg-color = isDark ? #2c303c : #fff $bg-color = isDark ? #2c303c : #fff
@ -182,13 +182,13 @@ root(isDark)
color isDark ? #d6dce2 : #111 color isDark ? #d6dce2 : #111
&:hover &:hover
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
text-decoration none text-decoration none
&:active &:active
color $theme-color-foreground color var(--primaryForeground)
background darken($theme-color, 10%) background var(--primaryDarken10)
> div > div
margin 8px 0 margin 8px 0

10
src/client/app/common/views/components/messaging-room.form.vue
View file

@ -195,7 +195,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
> textarea > textarea
@ -234,10 +234,10 @@ root(isDark)
transition color 0.1s ease transition color 0.1s ease
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
.files .files
@ -293,10 +293,10 @@ root(isDark)
transition color 0.1s ease transition color 0.1s ease
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
input[type=file] input[type=file]

4
src/client/app/common/views/components/messaging-room.message.vue
View file

@ -59,10 +59,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$me-balloon-color = $theme-color $me-balloon-color = var(--primary)
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
background-color transparent background-color transparent

10
src/client/app/common/views/components/messaging-room.vue
View file

@ -262,7 +262,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex
@ -386,15 +386,15 @@ root(isDark)
cursor pointer cursor pointer
line-height 32px line-height 32px
font-size 12px font-size 12px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 16px border-radius 16px
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> [data-fa] > [data-fa]
position absolute position absolute

10
src/client/app/common/views/components/messaging.vue
View file

@ -167,7 +167,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
@ -252,8 +252,8 @@ root(isDark)
transition border 0.2s ease transition border 0.2s ease
&:focus &:focus
color darken($theme-color, 20%) color var(--primaryDarken20)
border solid 1px $theme-color border solid 1px var(--primary)
transition color 0, border 0 transition color 0, border 0
> .result > .result
@ -287,7 +287,7 @@ root(isDark)
&:hover &:hover
&:focus &:focus
color #fff color #fff
background $theme-color background var(--primary)
.name .name
color #fff color #fff
@ -297,7 +297,7 @@ root(isDark)
&:active &:active
color #fff color #fff
background darken($theme-color, 10%) background var(--primaryDarken10)
.name .name
color #fff color #fff

2
src/client/app/common/views/components/note-header.vue
View file

@ -42,7 +42,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex

22
src/client/app/common/views/components/poll-editor.vue
View file

@ -68,7 +68,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
padding 8px padding 8px
@ -105,42 +105,42 @@ root(isDark)
font-size 14px font-size 14px
color isDark ? #fff : #000 color isDark ? #fff : #000
background isDark ? #191b22 : #fff background isDark ? #191b22 : #fff
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
&:focus &:focus
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
> button > button
padding 4px 8px padding 4px 8px
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
&:hover &:hover
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
&:active &:active
color darken($theme-color, 30%) color var(--primaryDarken30)
> .add > .add
margin 8px 0 0 0 margin 8px 0 0 0
vertical-align top vertical-align top
color $theme-color color var(--primary)
> .destroy > .destroy
position absolute position absolute
top 0 top 0
right 0 right 0
padding 4px 8px padding 4px 8px
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
&:hover &:hover
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
&:active &:active
color darken($theme-color, 30%) color var(--primaryDarken30)
.mk-poll-editor[data-darkmode] .mk-poll-editor[data-darkmode]
root(true) root(true)

4
src/client/app/common/views/components/poll.vue
View file

@ -67,7 +67,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
@ -99,7 +99,7 @@ root(isDark)
top 0 top 0
left 0 left 0
height 100% height 100%
background $theme-color background var(--primary)
transition width 1s ease transition width 1s ease
> span > span

6
src/client/app/common/views/components/reaction-picker.vue
View file

@ -210,7 +210,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
@ -301,7 +301,7 @@ root(isDark)
right 0 right 0
bottom 0 bottom 0
left 0 left 0
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 4px border-radius 4px
> button > button
@ -315,7 +315,7 @@ root(isDark)
background isDark ? #252731 : #eee background isDark ? #252731 : #eee
&:active &:active
background $theme-color background var(--primary)
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode] .mk-reaction-picker[data-darkmode]

2
src/client/app/common/views/components/signin.vue
View file

@ -68,7 +68,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-signin .mk-signin
color #555 color #555

2
src/client/app/common/views/components/signup.vue
View file

@ -151,7 +151,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-signup .mk-signup
min-width 302px min-width 302px

16
src/client/app/common/views/components/switch.vue
View file

@ -85,7 +85,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex
@ -102,21 +102,21 @@ root(isDark)
&.checked &.checked
> .button > .button
background-color $theme-color background-color var(--primary)
border-color $theme-color border-color var(--primary)
> .label > .label
> span > span
color $theme-color color var(--primary)
&:hover &:hover
> .label > .label
> span > span
color darken($theme-color, 10%) color var(--primaryDarken10)
> .button > .button
background darken($theme-color, 10%) background var(--primaryDarken10)
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
&:hover &:hover
> .label > .label
@ -144,7 +144,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 14px border-radius 14px
> .button > .button

16
src/client/app/common/views/components/ui/button.vue
View file

@ -32,7 +32,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill) root(isDark, fill)
> button > button
@ -49,23 +49,23 @@ root(isDark, fill)
box-shadow none box-shadow none
if fill if fill
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 5%) background var(--primaryLighten5)
&:active &:active
background darken($theme-color, 5%) background var(--primaryDarken5)
else else
color $theme-color color var(--primary)
background none background none
&:hover &:hover
color darken($theme-color, 5%) color var(--primaryDarken5)
&:active &:active
background rgba($theme-color, 0.3) background var(--primaryAlpha03)
.ui-button[data-darkmode] .ui-button[data-darkmode]
&.fill &.fill

2
src/client/app/common/views/components/ui/card.vue
View file

@ -20,7 +20,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
margin 16px margin 16px

2
src/client/app/common/views/components/ui/form.vue
View file

@ -19,7 +19,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.ui-form .ui-form
> fieldset > fieldset

28
src/client/app/common/views/components/ui/form/button.vue
View file

@ -25,7 +25,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display inline-block display inline-block
@ -50,30 +50,30 @@ root(isDark)
&:hover &:hover
&:focus &:focus
color $theme-color color var(--primary)
background rgba($theme-color, isDark ? 0.2 : 0.12) //background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
border-color rgba($theme-color, isDark ? 0.5 : 0.3) //border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
&:active &:active
color darken($theme-color, 20%) color var(--primaryDarken20)
background rgba($theme-color, 0.12) //background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
border-color $theme-color border-color var(--primary)
transition all 0s transition all 0s
&.primary &.primary
> button > button
border 1px solid $theme-color border 1px solid var(--primary)
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:hover &:hover
&:focus &:focus
background lighten($theme-color, 20%) background var(--primaryLighten20)
border-color lighten($theme-color, 20%) border-color var(--primaryLighten20)
&:active &:active
background darken($theme-color, 20%) background var(--primaryDarken20)
border-color darken($theme-color, 20%) border-color var(--primaryDarken20)
transition all 0s transition all 0s
&.round &.round

8
src/client/app/common/views/components/ui/form/radio.vue
View file

@ -49,7 +49,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display inline-flex display inline-flex
@ -70,15 +70,15 @@ root(isDark)
&.checked &.checked
> .button > .button
border-color $theme-color border-color var(--primary)
&:after &:after
background-color $theme-color background-color var(--primary)
transform scale(1) transform scale(1)
opacity 1 opacity 1
> .label > .label
color $theme-color color var(--primary)
> input > input
position absolute position absolute

6
src/client/app/common/views/components/ui/input.vue
View file

@ -155,7 +155,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill) root(isDark, fill)
margin 32px 0 margin 32px 0
@ -193,7 +193,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 2px height 2px
background $theme-color background var(--primary)
opacity 0 opacity 0
transform scaleX(0.12) 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) 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) transform scaleX(1)
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled

6
src/client/app/common/views/components/ui/radio.vue
View file

@ -51,7 +51,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display inline-block display inline-block
@ -68,10 +68,10 @@ root(isDark)
&.checked &.checked
> .button > .button
border-color $theme-color border-color var(--primary)
&:after &:after
background-color $theme-color background-color var(--primary)
transform scale(1) transform scale(1)
opacity 1 opacity 1

6
src/client/app/common/views/components/ui/select.vue
View file

@ -70,7 +70,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill) root(isDark, fill)
margin 32px 0 margin 32px 0
@ -113,7 +113,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 2px height 2px
background $theme-color background var(--primary)
opacity 0 opacity 0
transform scaleX(0.12) 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) 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) transform scaleX(1)
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled

8
src/client/app/common/views/components/ui/switch.vue
View file

@ -56,7 +56,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex
@ -79,11 +79,11 @@ root(isDark)
&.checked &.checked
> .button > .button
background-color rgba($theme-color, 0.4) background-color var(--primaryAlpha04)
border-color rgba($theme-color, 0.4) border-color var(--primaryAlpha04)
> * > *
background-color $theme-color background-color var(--primary)
transform translateX(14px) transform translateX(14px)
> input > input

6
src/client/app/common/views/components/ui/textarea.vue
View file

@ -63,7 +63,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill) root(isDark, fill)
margin 42px 0 32px 0 margin 42px 0 32px 0
@ -97,7 +97,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
background none background none
border solid 2px $theme-color border solid 2px var(--primary)
border-radius 3px border-radius 3px
opacity 0 opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -149,7 +149,7 @@ root(isDark, fill)
opacity 1 opacity 1
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled

30
src/client/app/common/views/components/uploader.vue
View file

@ -81,7 +81,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-uploader .mk-uploader
overflow auto overflow auto
@ -100,7 +100,7 @@ export default Vue.extend({
margin 8px 0 0 0 margin 8px 0 0 0
padding 0 padding 0
height 36px height 36px
box-shadow 0 -1px 0 rgba($theme-color, 0.1) box-shadow 0 -1px 0 var(--primaryAlpha01)
border-top solid 8px transparent border-top solid 8px transparent
&:first-child &:first-child
@ -127,7 +127,7 @@ export default Vue.extend({
padding 0 padding 0
max-width 256px max-width 256px
font-size 0.8em font-size 0.8em
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
white-space nowrap white-space nowrap
text-overflow ellipsis text-overflow ellipsis
overflow hidden overflow hidden
@ -145,17 +145,17 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
> .initing > .initing
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
> .kb > .kb
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
> .percentage > .percentage
display inline-block display inline-block
width 48px width 48px
text-align right text-align right
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
&:after &:after
content '%' content '%'
@ -174,10 +174,10 @@ export default Vue.extend({
overflow hidden overflow hidden
&::-webkit-progress-value &::-webkit-progress-value
background $theme-color background var(--primary)
&::-webkit-progress-bar &::-webkit-progress-bar
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
> .progress > .progress
display block display block
@ -191,13 +191,13 @@ export default Vue.extend({
border-radius 4px border-radius 4px
background linear-gradient( background linear-gradient(
45deg, 45deg,
lighten($theme-color, 30%) 25%, var(--primaryLighten30) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
lighten($theme-color, 30%) 50%, var(--primaryLighten30) 50%,
lighten($theme-color, 30%) 75%, var(--primaryLighten30) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation bg 1.5s linear infinite animation bg 1.5s linear infinite

6
src/client/app/common/views/components/visibility-chooser.vue
View file

@ -127,7 +127,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
@ -199,8 +199,8 @@ root(isDark)
background isDark ? #21242b : #ddd background isDark ? #21242b : #ddd
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
> * > *
user-select none user-select none

22
src/client/app/common/views/pages/follow.vue
View file

@ -107,7 +107,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
padding 32px padding 32px
@ -173,29 +173,29 @@ root(isDark)
min-width 150px min-width 150px
font-size 14px font-size 14px
font-weight bold font-weight bold
color $theme-color color var(--primary)
background transparent background transparent
outline none outline none
border solid 1px $theme-color border solid 1px var(--primary)
border-radius 36px border-radius 36px
&:hover &:hover
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
&:active &:active
background rgba($theme-color, 0.2) background var(--primaryAlpha02)
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
border-color lighten($theme-color, 10%) border-color var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
&.wait &.wait
cursor wait !important cursor wait !important

2
src/client/app/common/views/widgets/analog-clock.vue
View file

@ -26,7 +26,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
.mkw-analog-clock--body .mkw-analog-clock--body

4
src/client/app/common/views/widgets/calendar.vue
View file

@ -116,7 +116,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
&[data-special='on-new-years-day'] &[data-special='on-new-years-day']
@ -182,7 +182,7 @@ root(isDark)
> .val > .val
height 4px height 4px
background $theme-color background var(--primary)
transition width .3s cubic-bezier(0.23, 1, 0.32, 1) transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
&:nth-child(1) &:nth-child(1)

10
src/client/app/common/views/widgets/memo.vue
View file

@ -57,7 +57,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
.mkw-memo--body .mkw-memo--body
@ -83,8 +83,8 @@ root(isDark)
margin 0 margin 0
padding 0 10px padding 0 10px
height 28px height 28px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color !important background var(--primary) !important
outline none outline none
border none border none
border-radius 4px border-radius 4px
@ -92,10 +92,10 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
background lighten($theme-color, 10%) !important background var(--primaryLighten10) !important
&:active &:active
background darken($theme-color, 10%) !important background var(--primaryDarken10) !important
transition background 0s ease transition background 0s ease
&:disabled &:disabled

36
src/client/app/desktop/ui.styl
View file

@ -1,5 +1,3 @@
@import "../../const"
button button
font-family sans-serif font-family sans-serif
@ -34,7 +32,7 @@ button.ui
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -50,20 +48,20 @@ button.ui
border-color #dcdcdc border-color #dcdcdc
&.primary &.primary
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) //background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) //background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
input:not([type]).ui input:not([type]).ui
input[type='text'].ui input[type='text'].ui
@ -86,7 +84,7 @@ textarea.ui
border-color #b0b0b0 border-color #b0b0b0
&:focus &:focus
border-color $theme-color border-color var(--primary)
textarea.ui textarea.ui
min-width 100% min-width 100%
@ -140,17 +138,17 @@ html[data-darkmode]
border-color #151a1d border-color #151a1d
&.primary &.primary
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) //background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) //background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
input:not([type]).ui input:not([type]).ui
input[type='text'].ui input[type='text'].ui
@ -174,7 +172,7 @@ html[data-darkmode]
border-color #b0b0b0 border-color #b0b0b0
&:focus &:focus
border-color $theme-color border-color var(--primary)
.ui.from.group .ui.from.group
> p:first-child > p:first-child

10
src/client/app/desktop/views/components/calendar.vue
View file

@ -128,7 +128,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
color isDark ? #c5ced6 : #777 color isDark ? #c5ced6 : #777
@ -241,14 +241,14 @@ root(isDark)
&[data-today] &[data-today]
> div > div
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover > div &:hover > div
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active > div &:active > div
background darken($theme-color, 10%) background var(--primaryDarken10)
.mk-calendar[data-darkmode] .mk-calendar[data-darkmode]
root(true) root(true)

4
src/client/app/desktop/views/components/charts.vue
View file

@ -649,7 +649,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.gkgckalzgidaygcxnugepioremxvxvpt .gkgckalzgidaygcxnugepioremxvxvpt
padding 32px padding 32px
@ -675,7 +675,7 @@ export default Vue.extend({
* *
&:not(.active) &:not(.active)
color $theme-color color var(--primary)
cursor pointer cursor pointer
> div > div

32
src/client/app/desktop/views/components/choose-file-from-drive-window.vue
View file

@ -59,7 +59,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.title .title
> [data-fa] > [data-fa]
@ -74,7 +74,7 @@ export default Vue.extend({
.footer .footer
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.upload .upload
display inline-block display inline-block
@ -87,7 +87,7 @@ export default Vue.extend({
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -95,13 +95,13 @@ export default Vue.extend({
&:hover &:hover
background transparent background transparent
border-color rgba($theme-color, 0.3) border-color var(--primaryAlpha03)
&:active &:active
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
background transparent background transparent
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset //box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
&:focus &:focus
&:after &:after
@ -112,7 +112,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
.ok .ok
@ -138,7 +138,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -147,20 +147,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

20
src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
View file

@ -37,7 +37,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.title .title
> [data-fa] > [data-fa]
@ -48,7 +48,7 @@ export default Vue.extend({
.footer .footer
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -73,7 +73,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -82,20 +82,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

12
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -31,7 +31,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$width = 240px $width = 240px
@ -69,7 +69,7 @@ root(isDark)
&:active &:active
> p, a > p, a
background $theme-color background var(--primary)
> p, a > p, a
display block display block
@ -90,14 +90,14 @@ root(isDark)
&:hover &:hover
> p, a > p, a
text-decoration none text-decoration none
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:active &:active
> p, a > p, a
text-decoration none text-decoration none
background darken($theme-color, 10%) background var(--primaryDarken10)
color $theme-color-foreground color var(--primaryForeground)
li > ul li > ul
visibility hidden visibility hidden

24
src/client/app/desktop/views/components/crop-window.vue
View file

@ -61,7 +61,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
> [data-fa] > [data-fa]
@ -73,7 +73,7 @@ export default Vue.extend({
.actions .actions
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -98,7 +98,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -111,20 +111,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
.skip .skip
@ -155,11 +155,11 @@ export default Vue.extend({
} }
.cropper-view-box { .cropper-view-box {
outline-color: $theme-color; outline-color: var(--primary);
} }
.cropper-line, .cropper-point { .cropper-line, .cropper-point {
background-color: $theme-color; background-color: var(--primary);
} }
.cropper-bg { .cropper-bg {

10
src/client/app/desktop/views/components/dialog.vue
View file

@ -91,7 +91,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-dialog .mk-dialog
> .bg > .bg
@ -144,20 +144,20 @@ export default Vue.extend({
margin 0 0.375em margin 0 0.375em
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
margin 1em 0 margin 1em 0
color $theme-color color var(--primary)
// color #43A4EC // color #43A4EC
font-weight bold font-weight bold

12
src/client/app/desktop/views/components/drive.file.vue
View file

@ -200,7 +200,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
padding 8px 0 0 0 padding 8px 0 0 0
@ -237,13 +237,13 @@ root(isDark)
background #ce2212 background #ce2212
&[data-is-selected] &[data-is-selected]
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> .label > .label
&:before &:before
@ -251,7 +251,7 @@ root(isDark)
display none display none
> .name > .name
color $theme-color-foreground color var(--primaryForeground)
&[data-is-contextmenu-showing] &[data-is-contextmenu-showing]
&:after &:after
@ -262,7 +262,7 @@ root(isDark)
right -4px right -4px
bottom -4px bottom -4px
left -4px left -4px
border 2px dashed rgba($theme-color, 0.3) border 2px dashed var(--primaryAlpha03)
border-radius 4px border-radius 4px
> .label > .label

14
src/client/app/desktop/views/components/drive.folder.vue
View file

@ -214,12 +214,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
padding 8px padding 8px
height 64px height 64px
background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%) background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
border-radius 4px border-radius 4px
&, * &, *
@ -229,10 +229,10 @@ root(isDark)
pointer-events none pointer-events none
&:hover &:hover
background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%) //background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
&:active &: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-is-contextmenu-showing]
&[data-draghover] &[data-draghover]
@ -244,16 +244,16 @@ root(isDark)
right -4px right -4px
bottom -4px bottom -4px
left -4px left -4px
border 2px dashed rgba($theme-color, 0.3) border 2px dashed var(--primaryAlpha03)
border-radius 4px border-radius 4px
&[data-draghover] &[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 > .name
margin 0 margin 0
font-size 0.9em font-size 0.9em
color isDark ? #fff : darken($theme-color, 30%) color isDark ? #fff : var(--primaryDarken30)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

8
src/client/app/desktop/views/components/drive.vue
View file

@ -585,7 +585,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
@ -697,8 +697,8 @@ root(isDark)
z-index 128 z-index 128
top 0 top 0
left 0 left 0
border solid 1px $theme-color border solid 1px var(--primary)
background rgba($theme-color, 0.5) background var(--primaryAlpha05)
pointer-events none pointer-events none
> .contents > .contents
@ -769,7 +769,7 @@ root(isDark)
top 38px top 38px
width 100% width 100%
height calc(100% - 38px) height calc(100% - 38px)
border dashed 2px rgba($theme-color, 0.5) border dashed 2px var(--primaryAlpha05)
pointer-events none pointer-events none
> .mk-uploader > .mk-uploader

18
src/client/app/desktop/views/components/follow-button.vue
View file

@ -101,7 +101,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display block display block
@ -126,7 +126,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:not(.active) &:not(.active)
@ -143,20 +143,20 @@ root(isDark)
border-color isDark ? #151a1d : #dcdcdc border-color isDark ? #151a1d : #dcdcdc
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
&.wait &.wait
cursor wait !important cursor wait !important

10
src/client/app/desktop/views/components/home.vue
View file

@ -247,7 +247,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display block display block
@ -292,15 +292,15 @@ root(isDark)
padding 0 16px padding 0 16px
line-height 48px line-height 48px
text-decoration none text-decoration none
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
transition background 0.1s ease transition background 0.1s ease
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
transition background 0s ease transition background 0s ease
> [data-fa] > [data-fa]

30
src/client/app/desktop/views/components/input-dialog.vue
View file

@ -76,7 +76,7 @@ export default Vue.extend({
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
> [data-fa] > [data-fa]
@ -96,25 +96,25 @@ export default Vue.extend({
color #333 color #333
background #fff background #fff
outline none outline none
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
transition border-color .3s ease transition border-color .3s ease
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
color $theme-color color var(--primary)
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&::-webkit-input-placeholder &::-webkit-input-placeholder
color rgba($theme-color, 0.3) color var(--primaryAlpha03)
.actions .actions
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -139,7 +139,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -148,20 +148,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

2
src/client/app/desktop/views/components/note-detail.vue
View file

@ -225,7 +225,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
overflow hidden overflow hidden

8
src/client/app/desktop/views/components/notes.note.vue
View file

@ -317,7 +317,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
margin 0 margin 0
@ -348,7 +348,7 @@ root(isDark)
right 2px right 2px
bottom 2px bottom 2px
left 2px left 2px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 4px border-radius 4px
> .renote > .renote
@ -557,7 +557,7 @@ root(isDark)
padding 0 4px padding 0 4px
margin-left 4px margin-left 4px
font-size 80% font-size 80%
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 4px border-radius 4px
</style> </style>

4
src/client/app/desktop/views/components/notes.vue
View file

@ -216,7 +216,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
.transition .transition
@ -250,7 +250,7 @@ root(isDark)
position sticky position sticky
z-index 100 z-index 100
height 3px height 3px
background $theme-color background var(--primary)
> footer > footer
> button > button

80
src/client/app/desktop/views/components/post-form.vue
View file

@ -434,12 +434,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display block display block
padding 16px padding 16px
background isDark ? #282C37 : lighten($theme-color, 95%) background isDark ? #282C37 : var(--primaryLighten95)
&:after &:after
content "" content ""
@ -456,23 +456,23 @@ root(isDark)
color isDark ? #fff : #333 color isDark ? #fff : #333
background isDark ? #191d23 : #fff background isDark ? #191d23 : #fff
outline none outline none
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
transition border-color .2s ease transition border-color .2s ease
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&:disabled &:disabled
opacity 0.5 opacity 0.5
&::-webkit-input-placeholder &::-webkit-input-placeholder
color rgba($theme-color, 0.3) color var(--primaryAlpha03)
> input > input
margin-bottom 8px margin-bottom 8px
@ -486,17 +486,17 @@ root(isDark)
&:hover &:hover
& + * & + *
& + * + * & + * + *
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
& + * & + *
& + * + * & + * + *
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&.with &.with
border-bottom solid 1px rgba($theme-color, 0.1) !important border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 4px 4px 0 0 border-radius 4px 4px 0 0
> .visibleUsers > .visibleUsers
@ -514,7 +514,7 @@ root(isDark)
font-size 14px font-size 14px
> b > b
color isDark ? #9baec8 : darken($theme-color, 20%) color isDark ? #9baec8 : var(--primaryDarken20)
> * > *
margin-right 8px margin-right 8px
@ -523,14 +523,14 @@ root(isDark)
> .files > .files
margin 0 margin 0
padding 0 padding 0
background isDark ? #181b23 : lighten($theme-color, 98%) background isDark ? #181b23 : var(--primaryLighten98)
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-top none border-top none
border-radius 0 0 4px 4px border-radius 0 0 4px 4px
transition border-color .3s ease transition border-color .3s ease
&.with &.with
border-bottom solid 1px rgba($theme-color, 0.1) !important border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 0 border-radius 0
> .remain > .remain
@ -540,7 +540,7 @@ root(isDark)
right 8px right 8px
margin 0 margin 0
padding 0 padding 0
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
> div > div
padding 4px padding 4px
@ -574,8 +574,8 @@ root(isDark)
cursor pointer cursor pointer
> .mk-poll-editor > .mk-poll-editor
background isDark ? #181b23 : lighten($theme-color, 98%) background isDark ? #181b23 : var(--primaryLighten98)
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-top none border-top none
border-radius 0 0 4px 4px border-radius 0 0 4px 4px
transition border-color .3s ease transition border-color .3s ease
@ -583,7 +583,7 @@ root(isDark)
> .mk-uploader > .mk-uploader
margin 8px 0 0 0 margin 8px 0 0 0
padding 8px padding 8px
border solid 1px rgba($theme-color, 0.2) border solid 1px var(--primaryAlpha02)
border-radius 4px border-radius 4px
input[type='file'] input[type='file']
@ -600,22 +600,22 @@ root(isDark)
width 110px width 110px
height 40px height 40px
font-size 1em font-size 1em
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
outline none outline none
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
border-radius 4px border-radius 4px
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
&:focus &:focus
&:after &:after
@ -626,7 +626,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -636,13 +636,13 @@ root(isDark)
&.wait &.wait
background linear-gradient( background linear-gradient(
45deg, 45deg,
darken($theme-color, 10%) 25%, var(--primaryDarken10) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
darken($theme-color, 10%) 50%, var(--primaryDarken10) 50%,
darken($theme-color, 10%) 75%, var(--primaryDarken10) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation stripe-bg 1.5s linear infinite animation stripe-bg 1.5s linear infinite
@ -661,7 +661,7 @@ root(isDark)
right 138px right 138px
margin 0 margin 0
line-height 40px line-height 40px
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
&.over &.over
color #ec3828 color #ec3828
@ -679,7 +679,7 @@ root(isDark)
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color isDark ? $theme-color : rgba($theme-color, 0.5) color isDark ? var(--primary) : var(--primaryAlpha05)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -687,12 +687,12 @@ root(isDark)
&:hover &:hover
background transparent background transparent
border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3) border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
&:active &:active
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%) background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(#000, 0.15) inset box-shadow 0 2px 4px rgba(#000, 0.15) inset
&:focus &:focus
@ -704,7 +704,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
> .dropzone > .dropzone
@ -713,7 +713,7 @@ root(isDark)
top 0 top 0
width 100% width 100%
height 100% height 100%
border dashed 2px rgba($theme-color, 0.5) border dashed 2px var(--primaryAlpha05)
pointer-events none pointer-events none
.mk-post-form[data-darkmode] .mk-post-form[data-darkmode]

22
src/client/app/desktop/views/components/progress-dialog.vue
View file

@ -37,7 +37,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.body .body
padding 18px 24px 24px 24px padding 18px 24px 24px 24px
@ -53,7 +53,7 @@ export default Vue.extend({
margin 0 0 4px 0 margin 0 0 4px 0
text-align center text-align center
line-height 16px line-height 16px
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
&:after &:after
content '%' content '%'
@ -69,21 +69,21 @@ export default Vue.extend({
overflow hidden overflow hidden
&::-webkit-progress-value &::-webkit-progress-value
background $theme-color background var(--primary)
&::-webkit-progress-bar &::-webkit-progress-bar
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
.waiting .waiting
background linear-gradient( background linear-gradient(
45deg, 45deg,
lighten($theme-color, 30%) 25%, var(--primaryLighten30) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
lighten($theme-color, 30%) 50%, var(--primaryLighten30) 50%,
lighten($theme-color, 30%) 75%, var(--primaryLighten30) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation progress-dialog-tag-progress-waiting 1.5s linear infinite animation progress-dialog-tag-progress-waiting 1.5s linear infinite

4
src/client/app/desktop/views/components/renote-form.vue
View file

@ -57,7 +57,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
@ -66,7 +66,7 @@ root(isDark)
> footer > footer
height 72px height 72px
background isDark ? #313543 : lighten($theme-color, 95%) background isDark ? #313543 : var(--primaryLighten95)
> .quote > .quote
position absolute position absolute

4
src/client/app/desktop/views/components/settings.vue
View file

@ -492,7 +492,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex
@ -524,7 +524,7 @@ root(isDark)
&.active &.active
margin-left 8px margin-left 8px
color $theme-color !important color var(--primary) !important
> .pages > .pages
width 100% width 100%

2
src/client/app/desktop/views/components/timeline.core.vue
View file

@ -215,7 +215,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline-core .mk-timeline-core
> .mk-friends-maker > .mk-friends-maker

12
src/client/app/desktop/views/components/timeline.vue
View file

@ -175,7 +175,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
@ -207,7 +207,7 @@ root(isDark)
top -4px top -4px
right 4px right 4px
font-size 10px font-size 10px
color $theme-color color var(--primary)
&:hover &:hover
color isDark ? #b2c1d5 : #aaa color isDark ? #b2c1d5 : #aaa
@ -216,7 +216,7 @@ root(isDark)
color isDark ? #b2c1d5 : #999 color isDark ? #b2c1d5 : #999
&[data-active] &[data-active]
color $theme-color color var(--primary)
cursor default cursor default
&:before &:before
@ -227,7 +227,7 @@ root(isDark)
left 0 left 0
width 100% width 100%
height 2px height 2px
background $theme-color background var(--primary)
> span > span
display inline-block display inline-block
@ -237,7 +237,7 @@ root(isDark)
user-select none user-select none
&[data-active] &[data-active]
color $theme-color color var(--primary)
cursor default cursor default
font-weight bold font-weight bold
@ -249,7 +249,7 @@ root(isDark)
left -8px left -8px
width calc(100% + 16px) width calc(100% + 16px)
height 2px height 2px
background $theme-color background var(--primary)
&:not([data-active]) &:not([data-active])
color isDark ? #9aa2a7 : #6f7477 color isDark ? #9aa2a7 : #6f7477

12
src/client/app/desktop/views/components/ui.header.account.vue
View file

@ -127,7 +127,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
> .header > .header
@ -249,8 +249,8 @@ root(isDark)
padding 2px 8px padding 2px 8px
font-size 90% font-size 90%
font-style normal font-style normal
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
border-radius 8px border-radius 8px
> [data-fa]:first-child > [data-fa]:first-child
@ -269,11 +269,11 @@ root(isDark)
&:hover, &:active &:hover, &:active
text-decoration none text-decoration none
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&.signout &.signout
$color = #e64137 $color = #e64137

6
src/client/app/desktop/views/components/ui.header.nav.vue
View file

@ -95,7 +95,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display inline-block display inline-block
@ -120,7 +120,7 @@ root(isDark)
&.active &.active
> a > a
border-bottom solid 3px $theme-color border-bottom solid 3px var(--primary)
> a > a
display inline-block display inline-block
@ -147,7 +147,7 @@ root(isDark)
> [data-fa]:last-child > [data-fa]:last-child
margin-left 5px margin-left 5px
font-size 10px font-size 10px
color $theme-color color var(--primary)
@media (max-width 1100px) @media (max-width 1100px)
margin-left -5px margin-left -5px

4
src/client/app/desktop/views/components/ui.header.notifications.vue
View file

@ -61,7 +61,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
@ -93,7 +93,7 @@ root(isDark)
margin-left -5px margin-left -5px
vertical-align super vertical-align super
font-size 10px font-size 10px
color $theme-color color var(--primary)
> .pop > .pop
$bgcolor = isDark ? #282c37 : #fff $bgcolor = isDark ? #282c37 : #fff

10
src/client/app/desktop/views/components/ui.header.post.vue
View file

@ -17,7 +17,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.note .note
display inline-block display inline-block
@ -33,8 +33,8 @@ export default Vue.extend({
font-size 1.2em font-size 1.2em
font-weight normal font-weight normal
text-decoration none text-decoration none
color $theme-color-foreground color var(--primaryForeground)
background $theme-color !important background var(--primary) !important
outline none outline none
border none border none
border-radius 4px border-radius 4px
@ -45,10 +45,10 @@ export default Vue.extend({
pointer-events none pointer-events none
&:hover &:hover
background lighten($theme-color, 10%) !important background var(--primaryLighten10) !important
&:active &:active
background darken($theme-color, 10%) !important background var(--primaryDarken10) !important
transition background 0s ease transition background 0s ease
</style> </style>

4
src/client/app/desktop/views/components/ui.header.search.vue
View file

@ -28,7 +28,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
> [data-fa] > [data-fa]
display block display block
@ -67,7 +67,7 @@ root(isDark)
background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08) background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
&:focus &: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] .search[data-darkmode]
root(true) root(true)

4
src/client/app/desktop/views/components/user-preview.vue
View file

@ -83,7 +83,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
position absolute position absolute
@ -151,7 +151,7 @@ root(isDark)
> span > span
font-size 1em font-size 1em
color $theme-color color var(--primary)
> .mk-follow-button > .mk-follow-button
position absolute position absolute

6
src/client/app/desktop/views/components/users-list.vue
View file

@ -69,7 +69,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-users-list .mk-users-list
height 100% height 100%
@ -104,8 +104,8 @@ export default Vue.extend({
&[data-active] &[data-active]
font-weight bold font-weight bold
color $theme-color color var(--primary)
border-color $theme-color border-color var(--primary)
cursor default cursor default
> span > span

6
src/client/app/desktop/views/components/window.vue
View file

@ -463,7 +463,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display block display block
@ -494,9 +494,9 @@ root(isDark)
&:not([data-is-modal]) &:not([data-is-modal])
> .body > .body
if isDark 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 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 > .handle
$size = 8px $size = 8px

2
src/client/app/desktop/views/pages/admin/admin.announcements.vue
View file

@ -31,7 +31,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.qldxjjsrseehkusjuoooapmsprvfrxyl .qldxjjsrseehkusjuoooapmsprvfrxyl
textarea textarea

4
src/client/app/desktop/views/pages/admin/admin.dashboard.vue
View file

@ -95,7 +95,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.obdskegsannmntldydackcpzezagxqfy .obdskegsannmntldydackcpzezagxqfy
> .stats > .stats
@ -112,7 +112,7 @@ export default Vue.extend({
> *:first-child > *:first-child
display block display block
color $theme-color color var(--primary)
> *:last-child > *:last-child
font-size 70% font-size 70%

2
src/client/app/desktop/views/pages/admin/admin.hashtags.vue
View file

@ -31,7 +31,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.jdnqwkzlnxcfftthoybjxrebyolvoucw .jdnqwkzlnxcfftthoybjxrebyolvoucw
textarea textarea

2
src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
header header
margin 10px 0 margin 10px 0

2
src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
header header
margin 10px 0 margin 10px 0

2
src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
header header
margin 10px 0 margin 10px 0

2
src/client/app/desktop/views/pages/admin/admin.verify-user.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
header header
margin 10px 0 margin 10px 0

4
src/client/app/desktop/views/pages/admin/admin.vue
View file

@ -70,7 +70,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '~const.styl'
.mk-admin .mk-admin
display flex display flex
@ -106,7 +106,7 @@ export default Vue.extend({
&.active &.active
margin-left 8px margin-left 8px
color $theme-color !important color var(--primary) !important
> main > main
width 100% width 100%

8
src/client/app/desktop/views/pages/deck/deck.column.vue
View file

@ -269,7 +269,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$header-height = 42px $header-height = 42px
@ -283,10 +283,10 @@ root(isDark)
overflow hidden overflow hidden
&.draghover &.draghover
box-shadow 0 0 0 2px rgba($theme-color, 0.8) box-shadow 0 0 0 2px var(--primaryAlpha08)
&.dragging &.dragging
box-shadow 0 0 0 2px rgba($theme-color, 0.4) box-shadow 0 0 0 2px var(--primaryAlpha04)
&.dropready &.dropready
* *
@ -329,7 +329,7 @@ root(isDark)
pointer-events none pointer-events none
&.indicate &.indicate
box-shadow 0 3px 0 0 $theme-color box-shadow 0 3px 0 0 var(--primary)
> span > span
[data-fa] [data-fa]

8
src/client/app/desktop/views/pages/deck/deck.note.vue
View file

@ -214,7 +214,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
mediaRoot(isDark) mediaRoot(isDark)
font-size 13px font-size 13px
@ -368,8 +368,8 @@ root(isDark)
padding 0 4px padding 0 4px
margin-left 4px margin-left 4px
font-size 80% font-size 80%
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 4px border-radius 4px
.mk-url-preview .mk-url-preview
@ -430,7 +430,7 @@ root(isDark)
color #999 color #999
&.reacted &.reacted
color $theme-color color var(--primary)
.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode] .zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
root(true) root(true)

2
src/client/app/desktop/views/pages/deck/deck.notes.vue
View file

@ -195,7 +195,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
.transition .transition

2
src/client/app/desktop/views/pages/deck/deck.vue
View file

@ -221,7 +221,7 @@ export default Vue.extend({
</style> </style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex

2
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
View file

@ -135,7 +135,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
.gqpwvtwtprsbmnssnbicggtwqhmylhnq .gqpwvtwtprsbmnssnbicggtwqhmylhnq

32
src/client/app/desktop/views/pages/selectdrive.vue
View file

@ -54,7 +54,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mkp-selectdrive .mkp-selectdrive
display block display block
@ -72,7 +72,7 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.upload .upload
display inline-block display inline-block
@ -85,7 +85,7 @@ export default Vue.extend({
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -93,13 +93,13 @@ export default Vue.extend({
&:hover &:hover
background transparent background transparent
border-color rgba($theme-color, 0.3) border-color var(--primaryAlpha03)
&:active &:active
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
background transparent background transparent
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset //box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
&:focus &:focus
&:after &:after
@ -110,7 +110,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
.ok .ok
@ -136,7 +136,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -145,20 +145,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

4
src/client/app/desktop/views/pages/stats/stats.vue
View file

@ -34,7 +34,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '~const.styl'
.tcrwdhwpuxrwmcttxjcsehgpagpstqey .tcrwdhwpuxrwmcttxjcsehgpagpstqey
width 100% width 100%
@ -54,7 +54,7 @@ export default Vue.extend({
> *:first-child > *:first-child
display block display block
color $theme-color color var(--primary)
> *:last-child > *:last-child
font-size 70% font-size 70%

4
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -100,7 +100,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
@ -208,7 +208,7 @@ root(isDark)
margin-right 4px margin-right 4px
font-size 1rem font-size 1rem
font-weight bold font-weight bold
color $theme-color color var(--primary)
.header[data-darkmode] .header[data-darkmode]
root(true) root(true)

6
src/client/app/desktop/views/pages/user/user.timeline.vue
View file

@ -112,7 +112,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
@ -133,7 +133,7 @@ root(isDark)
user-select none user-select none
&[data-active] &[data-active]
color $theme-color color var(--primary)
cursor default cursor default
font-weight bold font-weight bold
@ -145,7 +145,7 @@ root(isDark)
left -8px left -8px
width calc(100% + 16px) width calc(100% + 16px)
height 2px height 2px
background $theme-color background var(--primary)
&:not([data-active]) &:not([data-active])
color isDark ? #9aa2a7 : #6f7477 color isDark ? #9aa2a7 : #6f7477

6
src/client/app/desktop/views/pages/welcome.vue
View file

@ -303,7 +303,7 @@ export default Vue.extend({
</style> </style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display flex display flex
@ -385,7 +385,7 @@ root(isDark)
> .main > .main
grid-row 1 grid-row 1
grid-column 1 / 3 grid-column 1 / 3
border-top solid 5px $theme-color border-top solid 5px var(--primary)
> div > div
padding 32px padding 32px
@ -426,7 +426,7 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
color $theme-color color var(--primary)
> .char > .char
display block display block

10
src/client/app/desktop/views/widgets/post-form.vue
View file

@ -68,7 +68,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mkw-post-form .mkw-post-form
background #fff background #fff
@ -107,8 +107,8 @@ export default define({
margin 0 margin 0
padding 0 10px padding 0 10px
height 28px height 28px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color !important background var(--primary) !important
outline none outline none
border none border none
border-radius 4px border-radius 4px
@ -116,10 +116,10 @@ export default define({
cursor pointer cursor pointer
&:hover &:hover
background lighten($theme-color, 10%) !important background var(--primaryLighten10) !important
&:active &:active
background darken($theme-color, 10%) !important background var(--primaryDarken10) !important
transition background 0s ease transition background 0s ease
</style> </style>

10
src/client/app/mobile/views/components/dialog.vue
View file

@ -91,7 +91,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-dialog .mk-dialog
> .bg > .bg
@ -145,20 +145,20 @@ export default Vue.extend({
margin 0 0.375em margin 0 0.375em
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
margin 0 0 1em 0 margin 0 0 1em 0
color $theme-color color var(--primary)
// color #43A4EC // color #43A4EC
font-weight bold font-weight bold

4
src/client/app/mobile/views/components/drive.file.vue
View file

@ -63,7 +63,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
display block display block
@ -150,7 +150,7 @@ root(isDark)
color #bf4633 color #bf4633
&[data-is-selected] &[data-is-selected]
background $theme-color background var(--primary)
&, * &, *
color #fff !important color #fff !important

22
src/client/app/mobile/views/components/follow-button.vue
View file

@ -93,7 +93,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-follow-button .mk-follow-button
display block display block
@ -105,29 +105,29 @@ export default Vue.extend({
line-height 36px line-height 36px
font-size 14px font-size 14px
font-weight bold font-weight bold
color $theme-color color var(--primary)
background transparent background transparent
outline none outline none
border solid 1px $theme-color border solid 1px var(--primary)
border-radius 36px border-radius 36px
&:hover &:hover
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
&:active &:active
background rgba($theme-color, 0.2) background var(--primaryAlpha02)
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
border-color lighten($theme-color, 10%) border-color var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
&.wait &.wait
cursor wait !important cursor wait !important

22
src/client/app/mobile/views/components/mute-button.vue
View file

@ -41,7 +41,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-mute-button .mk-mute-button
display block display block
@ -53,27 +53,27 @@ export default Vue.extend({
line-height 36px line-height 36px
font-size 14px font-size 14px
font-weight bold font-weight bold
color $theme-color color var(--primary)
background transparent background transparent
outline none outline none
border solid 1px $theme-color border solid 1px var(--primary)
border-radius 36px border-radius 36px
&:hover &:hover
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
&:active &:active
background rgba($theme-color, 0.2) background var(--primaryAlpha02)
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
border-color lighten($theme-color, 10%) border-color var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
</style> </style>

4
src/client/app/mobile/views/components/note-detail.vue
View file

@ -223,7 +223,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
overflow hidden overflow hidden
@ -422,7 +422,7 @@ root(isDark)
color #999 color #999
&.reacted &.reacted
color $theme-color color var(--primary)
> .replies > .replies
> * > *

8
src/client/app/mobile/views/components/note.vue
View file

@ -228,7 +228,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
font-size 12px font-size 12px
@ -395,8 +395,8 @@ root(isDark)
padding 0 4px padding 0 4px
margin-left 4px margin-left 4px
font-size 80% font-size 80%
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 4px border-radius 4px
.mk-url-preview .mk-url-preview
@ -457,7 +457,7 @@ root(isDark)
color #999 color #999
&.reacted &.reacted
color $theme-color color var(--primary)
.note[data-darkmode] .note[data-darkmode]
root(true) root(true)

2
src/client/app/mobile/views/components/notes.vue
View file

@ -217,7 +217,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
overflow hidden overflow hidden

6
src/client/app/mobile/views/components/post-form.vue
View file

@ -324,7 +324,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
max-width 500px max-width 500px
@ -376,8 +376,8 @@ root(isDark)
padding 0 16px padding 0 16px
line-height 34px line-height 34px
vertical-align bottom vertical-align bottom
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 4px border-radius 4px
&:disabled &:disabled

6
src/client/app/mobile/views/components/ui.header.vue
View file

@ -118,7 +118,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$height = 48px $height = 48px
@ -134,7 +134,7 @@ root(isDark)
> .indicator > .indicator
height 3px height 3px
background $theme-color background var(--primary)
> .warn > .warn
display block display block
@ -216,7 +216,7 @@ root(isDark)
left 8px left 8px
pointer-events none pointer-events none
font-size 10px font-size 10px
color $theme-color color var(--primary)
> button:last-child > button:last-child
display block display block

10
src/client/app/mobile/views/components/ui.nav.vue
View file

@ -121,7 +121,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
root(isDark) root(isDark)
$color = isDark ? #c9d2e0 : #777 $color = isDark ? #c9d2e0 : #777
@ -198,11 +198,11 @@ root(isDark)
text-decoration none text-decoration none
&[data-active] &[data-active]
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
> [data-fa]:last-child > [data-fa]:last-child
color $theme-color-foreground color var(--primaryForeground)
> [data-fa]:first-child > [data-fa]:first-child
margin-right 0.5em margin-right 0.5em
@ -212,7 +212,7 @@ root(isDark)
> [data-fa].circle > [data-fa].circle
margin-left 6px margin-left 6px
font-size 10px font-size 10px
color $theme-color color var(--primary)
> [data-fa]:last-child > [data-fa]:last-child
position absolute position absolute

6
src/client/app/mobile/views/components/users-list.vue
View file

@ -65,7 +65,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-users-list .mk-users-list
@ -87,8 +87,8 @@ export default Vue.extend({
&[data-active] &[data-active]
font-weight bold font-weight bold
color $theme-color color var(--primary)
border-color $theme-color border-color var(--primary)
> span > span
display inline-block display inline-block

2
src/client/app/mobile/views/pages/favorites.vue
View file

@ -71,7 +71,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
main main
width 100% width 100%

Some files were not shown because too many files have changed in this diff Show more