182 lines
		
	
	
		
			3.3 KiB
		
	
	
	
		
			Stylus
		
	
	
	
	
	
			
		
		
	
	
			182 lines
		
	
	
		
			3.3 KiB
		
	
	
	
		
			Stylus
		
	
	
	
	
	
@import "../../const"
 | 
						|
 | 
						|
button
 | 
						|
	font-family sans-serif
 | 
						|
 | 
						|
	*
 | 
						|
		pointer-events none
 | 
						|
 | 
						|
button.ui
 | 
						|
.button.ui
 | 
						|
	display inline-block
 | 
						|
	cursor pointer
 | 
						|
	padding 0 14px
 | 
						|
	margin 0
 | 
						|
	min-width 100px
 | 
						|
	line-height 38px
 | 
						|
	font-size 14px
 | 
						|
	color #888
 | 
						|
	text-decoration none
 | 
						|
	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
 | 
						|
	border solid 1px #e2e2e2
 | 
						|
	border-radius 4px
 | 
						|
	outline none
 | 
						|
 | 
						|
	&.block
 | 
						|
		display block
 | 
						|
 | 
						|
	&:focus
 | 
						|
		&:after
 | 
						|
			content ""
 | 
						|
			pointer-events none
 | 
						|
			position absolute
 | 
						|
			top -5px
 | 
						|
			right -5px
 | 
						|
			bottom -5px
 | 
						|
			left -5px
 | 
						|
			border 2px solid rgba($theme-color, 0.3)
 | 
						|
			border-radius 8px
 | 
						|
 | 
						|
	&:disabled
 | 
						|
		opacity 0.7
 | 
						|
		cursor default
 | 
						|
 | 
						|
	&:hover
 | 
						|
		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
 | 
						|
		border-color #dcdcdc
 | 
						|
 | 
						|
	&:active
 | 
						|
		background #ececec
 | 
						|
		border-color #dcdcdc
 | 
						|
 | 
						|
	&.primary
 | 
						|
		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%)
 | 
						|
 | 
						|
		&: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
 | 
						|
 | 
						|
		&:active:not(:disabled)
 | 
						|
			background $theme-color
 | 
						|
			border-color $theme-color
 | 
						|
 | 
						|
input:not([type]).ui
 | 
						|
input[type='text'].ui
 | 
						|
input[type='password'].ui
 | 
						|
input[type='email'].ui
 | 
						|
input[type='date'].ui
 | 
						|
input[type='number'].ui
 | 
						|
textarea.ui
 | 
						|
	display block
 | 
						|
	padding 10px
 | 
						|
	width 100%
 | 
						|
	height 40px
 | 
						|
	font-family sans-serif
 | 
						|
	font-size 16px
 | 
						|
	color #55595c
 | 
						|
	border solid 1px #dadada
 | 
						|
	border-radius 4px
 | 
						|
 | 
						|
	&:hover
 | 
						|
		border-color #b0b0b0
 | 
						|
 | 
						|
	&:focus
 | 
						|
		border-color $theme-color
 | 
						|
 | 
						|
textarea.ui
 | 
						|
	min-width 100%
 | 
						|
	max-width 100%
 | 
						|
	min-height 64px
 | 
						|
 | 
						|
.ui.info
 | 
						|
	display block
 | 
						|
	margin 1em 0
 | 
						|
	padding 0 1em
 | 
						|
	font-size 90%
 | 
						|
	color rgba(#000, 0.87)
 | 
						|
	background #f8f8f9
 | 
						|
	border solid 1px rgba(34, 36, 38, 0.22)
 | 
						|
	border-radius 4px
 | 
						|
 | 
						|
	> p
 | 
						|
		opacity 0.8
 | 
						|
 | 
						|
		> [data-fa]:first-child
 | 
						|
			margin-right 0.25em
 | 
						|
 | 
						|
	&.warn
 | 
						|
		color #573a08
 | 
						|
		background #FFFAF3
 | 
						|
		border-color #C9BA9B
 | 
						|
 | 
						|
.ui.from.group
 | 
						|
	display block
 | 
						|
	margin 16px 0
 | 
						|
 | 
						|
	> p:first-child
 | 
						|
		margin 0 0 6px 0
 | 
						|
		font-size 90%
 | 
						|
		font-weight bold
 | 
						|
		color rgba(#373a3c, 0.9)
 | 
						|
 | 
						|
html[data-darkmode]
 | 
						|
	button.ui
 | 
						|
	.button.ui
 | 
						|
		color #fff
 | 
						|
		background linear-gradient(to bottom, #313543 0%, #282c37 100%)
 | 
						|
		border-color #1c2023
 | 
						|
 | 
						|
		&:hover
 | 
						|
			background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
 | 
						|
			border-color #151a1d
 | 
						|
 | 
						|
		&:active
 | 
						|
			background #22262f
 | 
						|
			border-color #151a1d
 | 
						|
 | 
						|
		&.primary
 | 
						|
			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%)
 | 
						|
 | 
						|
			&:hover:not(:disabled)
 | 
						|
				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
 | 
						|
				border-color $theme-color
 | 
						|
 | 
						|
			&:active:not(:disabled)
 | 
						|
				background $theme-color
 | 
						|
				border-color $theme-color
 | 
						|
 | 
						|
	input:not([type]).ui
 | 
						|
	input[type='text'].ui
 | 
						|
	input[type='password'].ui
 | 
						|
	input[type='email'].ui
 | 
						|
	input[type='date'].ui
 | 
						|
	input[type='number'].ui
 | 
						|
	textarea.ui
 | 
						|
		display block
 | 
						|
		padding 10px
 | 
						|
		width 100%
 | 
						|
		height 40px
 | 
						|
		font-family sans-serif
 | 
						|
		font-size 16px
 | 
						|
		color #dee4e8
 | 
						|
		background #191b22
 | 
						|
		border solid 1px #495156
 | 
						|
		border-radius 4px
 | 
						|
 | 
						|
		&:hover
 | 
						|
			border-color #b0b0b0
 | 
						|
 | 
						|
		&:focus
 | 
						|
			border-color $theme-color
 | 
						|
 | 
						|
	.ui.from.group
 | 
						|
		> p:first-child
 | 
						|
			color #c0c7cc
 |