sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-09-26 20:19:35 +09:00
parent d2d3f7810e
commit 904114740b
110 changed files with 529 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,5 @@
import * as tinycolor from 'tinycolor2';
export default function(theme: { [key: string]: string }) {
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();
}

6
src/client/app/common/views/components/autocomplete.vue
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

12
src/client/app/common/views/components/connect-failed.vue
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

6
src/client/app/common/views/components/forkit.vue
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

10
src/client/app/common/views/components/games/reversi/reversi.game.vue
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

4
src/client/app/common/views/components/games/reversi/reversi.index.vue
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

4
src/client/app/common/views/components/games/reversi/reversi.room.vue
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

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

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

10
src/client/app/common/views/components/menu.vue
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

10
src/client/app/common/views/components/messaging-room.form.vue
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]

4
src/client/app/common/views/components/messaging-room.message.vue
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

10
src/client/app/common/views/components/messaging-room.vue
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

10
src/client/app/common/views/components/messaging.vue
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

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

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

22
src/client/app/common/views/components/poll-editor.vue
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)

4
src/client/app/common/views/components/poll.vue
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

6
src/client/app/common/views/components/reaction-picker.vue
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]

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

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

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

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

16
src/client/app/common/views/components/switch.vue
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

16
src/client/app/common/views/components/ui/button.vue
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

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

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

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

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

28
src/client/app/common/views/components/ui/form/button.vue
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

8
src/client/app/common/views/components/ui/form/radio.vue
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

6
src/client/app/common/views/components/ui/input.vue
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

6
src/client/app/common/views/components/ui/radio.vue
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

6
src/client/app/common/views/components/ui/select.vue
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

8
src/client/app/common/views/components/ui/switch.vue
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

6
src/client/app/common/views/components/ui/textarea.vue
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

30
src/client/app/common/views/components/uploader.vue
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

6
src/client/app/common/views/components/visibility-chooser.vue
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

22
src/client/app/common/views/pages/follow.vue
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

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

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

4
src/client/app/common/views/widgets/calendar.vue
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)

10
src/client/app/common/views/widgets/memo.vue
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