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

View File

@ -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",

View File

@ -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

View File

@ -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)]);
return getColor(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
];
}
//#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();
}

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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

View File

@ -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]

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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)

View File

@ -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

View File

@ -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]

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 {

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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]

View File

@ -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

View File

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

View File

@ -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>

View File

@ -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

View File

@ -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]

View File

@ -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

View File

@ -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

View File

@ -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%

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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%

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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%

View File

@ -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]

View File

@ -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)

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -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%

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -41,7 +41,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-mute-button
display block
@ -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>

View File

@ -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
> *

View File

@ -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)

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

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