This commit is contained in:
syuilo 2021-10-14 01:27:45 +09:00
parent dc12b189de
commit 46f3736f44
10 changed files with 36 additions and 9 deletions

View file

@ -56,7 +56,7 @@
</label> </label>
<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/> <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"/> <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> </template>
</form> </form>
</template> </template>

View file

@ -1,6 +1,6 @@
<template> <template>
<button v-if="!link" class="bghgjjyj _button" <button v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full }"
:type="type" :type="type"
@click="$emit('click', $event)" @click="$emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -11,7 +11,7 @@
</div> </div>
</button> </button>
<MkA v-else class="bghgjjyj _button" <MkA v-else class="bghgjjyj _button"
:class="{ inline, primary, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full }"
:to="to" :to="to"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
@ -36,6 +36,11 @@ export default defineComponent({
required: false, required: false,
default: false default: false
}, },
gradate: {
type: Boolean,
required: false,
default: false
},
rounded: { rounded: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -137,8 +142,8 @@ export default defineComponent({
padding: 8px 14px; padding: 8px 14px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
font-size: 0.9em; font-size: 0.8em;
line-height: 24px; line-height: 22px;
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); 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 { &.danger {
color: #ff2a2a; color: #ff2a2a;

View file

@ -27,7 +27,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <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> <MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
</div> </div>
<div class="status" v-if="onlineUsersCount && stats"> <div class="status" v-if="onlineUsersCount && stats">

View file

@ -12,7 +12,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <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> <MkButton class="signin" @click="signin()" inline>{{ $ts.login }}</MkButton>
</div> </div>
<div class="status" v-if="onlineUsersCount && stats"> <div class="status" v-if="onlineUsersCount && stats">

View file

@ -24,7 +24,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <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> <MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
</div> </div>
<div class="status" v-if="onlineUsersCount && stats"> <div class="status" v-if="onlineUsersCount && stats">

View file

@ -57,6 +57,8 @@
cwHoverBg: '#707b97', cwHoverBg: '#707b97',
buttonBg: 'rgba(255, 255, 255, 0.05)', buttonBg: 'rgba(255, 255, 255, 0.05)',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)', buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)', listItemHoverBg: 'rgba(255, 255, 255, 0.03)',

View file

@ -57,6 +57,8 @@
cwHoverBg: '#bbc4ce', cwHoverBg: '#bbc4ce',
buttonBg: 'rgba(0, 0, 0, 0.05)', buttonBg: 'rgba(0, 0, 0, 0.05)',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)', buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
inputBorder: 'rgba(0, 0, 0, 0.1)', inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)', inputBorderHover: 'rgba(0, 0, 0, 0.2)',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)', listItemHoverBg: 'rgba(0, 0, 0, 0.03)',

View file

@ -46,6 +46,8 @@
navIndicator: '@accent', navIndicator: '@accent',
accentLighten: ':lighten<10<@accent', accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)', buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
buttonGradateA: '@accent',
buttonGradateB: ':hue<-20<@accent',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',

View file

@ -21,5 +21,7 @@
mentionMe: '@accent', mentionMe: '@accent',
hashtag: '#70c0e8', hashtag: '#70c0e8',
link: '#e88080', link: '#e88080',
buttonGradateA: '@accent',
buttonGradateB: ':saturate<30<:hue<30<@accent',
}, },
} }

View file

@ -372,7 +372,7 @@ export default defineComponent({
right: 0; right: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
background: var(--accent); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
} }
&:hover, &.active { &:hover, &.active {