summaryrefslogtreecommitdiff
path: root/src/client/app/desktop/views/components/follow-button.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/app/desktop/views/components/follow-button.vue')
-rw-r--r--src/client/app/desktop/views/components/follow-button.vue37
1 files changed, 13 insertions, 24 deletions
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 1db4b0cfa4..45e63ad928 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,9 +101,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.mk-follow-button
display block
cursor pointer
padding 0
@@ -126,37 +124,34 @@ 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)
- color isDark ? #fff : #888
- background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
- border solid 1px isDark ? #1c2023 : #e2e2e2
+ color var(--primary)
+ border solid 1px var(--primary)
&:hover
- background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
- border-color isDark ? #151a1d : #dcdcdc
+ background var(--primaryAlpha03)
&:active
- background isDark ? #22262f : #ececec
- border-color isDark ? #151a1d : #dcdcdc
+ background var(--primaryAlpha05)
&.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 var(--primary)
+ border solid 1px var(--primary)
&: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 var(--primaryLighten5)
+ border-color var(--primaryLighten5)
&:active:not(:disabled)
- background $theme-color
- border-color $theme-color
+ background var(--primaryDarken5)
+ border-color var(--primaryDarken5)
&.wait
cursor wait !important
@@ -167,10 +162,4 @@ root(isDark)
height 38px
line-height 38px
-.mk-follow-button[data-darkmode]
- root(true)
-
-.mk-follow-button:not([data-darkmode])
- root(false)
-
</style>