diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index b420bca5a31a067a2d6846be3017e501d7439543..cb25eadf06bd45fad1b662c44e01c2811eb2ac79 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -56,7 +56,7 @@
</label>
<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
- <MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
+ <MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
</template>
</form>
</template>
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index e74c4f550ba1870522d3c56dad223a2ebd5be5e9..5f36be0d7611a80eaf5a0698daa4282e05d06b6e 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,6 +1,6 @@
<template>
<button v-if="!link" class="bghgjjyj _button"
- :class="{ inline, primary, danger, rounded, full }"
+ :class="{ inline, primary, gradate, danger, rounded, full }"
:type="type"
@click="$emit('click', $event)"
@mousedown="onMousedown"
@@ -11,7 +11,7 @@
</div>
</button>
<MkA v-else class="bghgjjyj _button"
- :class="{ inline, primary, danger, rounded, full }"
+ :class="{ inline, primary, gradate, danger, rounded, full }"
:to="to"
@mousedown="onMousedown"
>
@@ -36,6 +36,11 @@ export default defineComponent({
required: false,
default: false
},
+ gradate: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
rounded: {
type: Boolean,
required: false,
@@ -137,8 +142,8 @@ export default defineComponent({
padding: 8px 14px;
text-align: center;
font-weight: normal;
- font-size: 0.9em;
- line-height: 24px;
+ font-size: 0.8em;
+ line-height: 22px;
box-shadow: none;
text-decoration: none;
background: var(--buttonBg);
@@ -177,6 +182,20 @@ export default defineComponent({
}
}
+ &.gradate {
+ font-weight: bold;
+ color: var(--fgOnAccent) !important;
+ background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+ &:not(:disabled):hover {
+ background: var(--X8);
+ }
+
+ &:not(:disabled):active {
+ background: var(--X8);
+ }
+ }
+
&.danger {
color: #ff2a2a;
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 467a6fb1ade9a4d80c028cefab3654808e6e6ca6..13f099379372dabe17000059150f252abf3e1541 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -27,7 +27,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton @click="signup()" inline primary data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
+ <MkButton @click="signup()" inline gradate data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
</div>
<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/pages/welcome.entrance.b.vue b/src/client/pages/welcome.entrance.b.vue
index a5c12f09e2d23c30e856e279df62d2048a10d239..163fc1e35f65326e5ccb56485e65e81af59cf1d3 100644
--- a/src/client/pages/welcome.entrance.b.vue
+++ b/src/client/pages/welcome.entrance.b.vue
@@ -12,7 +12,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton class="signup" @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+ <MkButton class="signup" @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
<MkButton class="signin" @click="signin()" inline>{{ $ts.login }}</MkButton>
</div>
<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/pages/welcome.entrance.c.vue b/src/client/pages/welcome.entrance.c.vue
index 2c8db6e264fc90bc12b12da7d00cadeb9c914b4f..bf1c9b1998f5918e5a710aadb118d0c32213cc82 100644
--- a/src/client/pages/welcome.entrance.c.vue
+++ b/src/client/pages/welcome.entrance.c.vue
@@ -24,7 +24,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+ <MkButton @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
</div>
<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 22f4dc13d49c2ab749ed22e8645c1e4fbd7f69fe..d8be16f60ada9d84d67e4637a352007d7b8f7eda 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -57,6 +57,8 @@
cwHoverBg: '#707b97',
buttonBg: 'rgba(255, 255, 255, 0.05)',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+ buttonGradateA: '@accent',
+ buttonGradateB: ':hue<20<@accent',
inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 64b92dba8a6e3047f3d0fc7ae3808f63b684d846..251aa36c7aae228b9bd364cbfd7b4bb3842aad04 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -57,6 +57,8 @@
cwHoverBg: '#bbc4ce',
buttonBg: 'rgba(0, 0, 0, 0.05)',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+ buttonGradateA: '@accent',
+ buttonGradateB: ':hue<20<@accent',
inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
diff --git a/src/client/themes/d-astro.json5 b/src/client/themes/d-astro.json5
index 08846dec20226f3fe2b67c7779ea6f65e8f174af..2350e3d46d730710db96dec138636a0c5183d5ae 100644
--- a/src/client/themes/d-astro.json5
+++ b/src/client/themes/d-astro.json5
@@ -46,6 +46,8 @@
navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+ buttonGradateA: '@accent',
+ buttonGradateB: ':hue<-20<@accent',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
panelHeaderBg: ':lighten<3<@panel',
diff --git a/src/client/themes/d-future.json5 b/src/client/themes/d-future.json5
index 05ffe87bf0076c8707a329fc906b72953e41e969..18826091211a5a2650cb7e91b0d2cb973d869326 100644
--- a/src/client/themes/d-future.json5
+++ b/src/client/themes/d-future.json5
@@ -21,5 +21,7 @@
mentionMe: '@accent',
hashtag: '#70c0e8',
link: '#e88080',
+ buttonGradateA: '@accent',
+ buttonGradateB: ':saturate<30<:hue<30<@accent',
},
}
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue
index 33aea31c395ffdf462ea72de6b95702c9d4cd52c..d00327b0966f78502e34190ec9d11ac1b8c82151 100644
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@@ -372,7 +372,7 @@ export default defineComponent({
right: 0;
bottom: 0;
border-radius: 999px;
- background: var(--accent);
+ background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
&:hover, &.active {