wip
This commit is contained in:
syuilo
parent
d2d3f7810e
commit
904114740b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
color isDark ? #fff : #677f84
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
display flex
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-signin
|
||||
color #555
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-signup
|
||||
min-width 302px
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
margin 16px
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.ui-form
|
||||
> fieldset
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default define({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
.mkw-analog-clock--body
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-timeline-core
|
||||
> .mk-friends-maker
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.qldxjjsrseehkusjuoooapmsprvfrxyl
|
||||
textarea
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.jdnqwkzlnxcfftthoybjxrebyolvoucw
|
||||
textarea
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
.transition
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ export default Vue.extend({
|
|||
</style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
display flex
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -41,11 +41,11 @@ export default Vue.extend({
|
|||
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-mute-button
|
||||
display block
|
||||
user-select none
|
||||
user-select none
|
||||
cursor pointer
|
||||
padding 0 16px
|
||||
margin 0
|
||||
|
|
@ -53,27 +53,27 @@ export default Vue.extend({
|
|||
line-height 36px
|
||||
font-size 14px
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px $theme-color
|
||||
border solid 1px var(--primary)
|
||||
border-radius 36px
|
||||
|
||||
&:hover
|
||||
background rgba($theme-color, 0.1)
|
||||
background var(--primaryAlpha01)
|
||||
|
||||
&:active
|
||||
background rgba($theme-color, 0.2)
|
||||
background var(--primaryAlpha02)
|
||||
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
border-color lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
border-color var(--primaryLighten10)
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
border-color darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
border-color var(--primaryDarken10)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
> *
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue