🎨
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…
	
	Add table
		Add a link
		
	
		Reference in a new issue