🎨
This commit is contained in:
parent
dc12b189de
commit
46f3736f44
10 changed files with 36 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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)',
|
||||
|
|
|
@ -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)',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -21,5 +21,7 @@
|
|||
mentionMe: '@accent',
|
||||
hashtag: '#70c0e8',
|
||||
link: '#e88080',
|
||||
buttonGradateA: '@accent',
|
||||
buttonGradateB: ':saturate<30<:hue<30<@accent',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue