
$color-primary: #579ddb;
$color-info: #3db8da;
$color-success: #8cc74f;
$color-mint: #3acaa1;
$color-mint-hover: #3abaa1;
$color-warning: #f0a636;
$color-danger: #f75d3f;
$color-pink: #df74a1;
$color-purple: #98518e;
$color-dark: #2e3235;


$theme: (
		'black': (
				'header_bg': #262626,
				'header_border': #212121,
				'link': #dddddd,
				'anchor': $color-mint,
				'link_active': #eeeeee,
				'nav_border': #ff5c5c,
				'upload_btn_bg': #292929,
				'upload_btn_border': #474747,
				'upload_text_color': #f0f0f0,
		),
		'dark': (
				'header_bg': #424242,
				'header_border': #383838,
				'link': #dddddd,
				'link_active': #eeeeee,
				'anchor': $color-mint,
				'nav_border': #ff5c5c,
				'upload_btn_bg': #454545,
				'upload_btn_border': #666666,
				'upload_text_color': #f0f0f0,
		),
		'gray': (
				'header_bg': #c8c8c8,
				'header_border': #a3a3a3,
				'link': #333333,
				'link_active': #666666,
				'anchor': $color-primary,
				'nav_border': #ff5c5c,
				'upload_btn_bg': #d1d1d1,
				'upload_btn_border': #949494,
				'upload_text_color': #666666,
		),
		'white': (
				'header_bg': #dbdbdb,
				'header_border': #c4c4c4,
				'link': #767676,
				'link_active': #333333,
				'nav_border': #ff5c5c,
				'anchor': $color-primary,
				'upload_btn_bg': #ffffff,
				'upload_btn_border': #cccccc,
				'upload_text_color': #666666,
		)
);

$button:(
		'white': (
				'border': #cccccc,
				'background': #ffffff,
				'background-hover': #f0f0f0,
				'background-active': #dbdbdb,
				'active': #d9d9d9
		),
		'gray' : (
				'border': #949494,
				'background': #cccccc,
				'background-hover': #b8b8b8,
				'background-active': #a3a3a3,
				'active': #d9d9d9
		),
		'dark' : (
				'border': #666666,
				'background': #454545,
				'background-hover': #535353,
				'background-active': #666666,
				'active': #d9d9d9
		),
		'black': (
				'border': #474747,
				'background': #292929,
				'background-hover': #323232,
				'background-active': #454545,
				'active': #d9d9d9
		)
);



@mixin common_btn($color) {
	outline: none;
	background: map-get($color, 'upload_btn_bg');
	border: 1px solid map-get($color, 'upload_btn_border');
	border-radius: 0;
	text-shadow: none;
	color: map-get($color, 'upload_text_color');
	box-shadow: none;
}

@mixin common_btn_acitve($color) {
	@include common_btn($color);
	color: #0f0f0f;
	background: $color-mint;
}

@mixin main($t) {
	body.#{$t} {
		$color: map-get($theme, $t);
		margin: 0;
		padding: 0;
		font-family: 'Courier New', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', sans-serif;
		color: map-get($color, 'link');
		overflow: hidden;

		::-webkit-scrollbar{width:0}

		a {
			color: map-get($color, 'anchor');
			text-decoration: none;
			&:hover {
				color: $color-mint-hover;
			}
		}

		input {
			background: map-get($color, 'upload_btn_bg');
			border: 1px solid map-get($color, 'upload_btn_border');
			border-radius: 0;
			text-shadow: none;
			color: map-get($color, 'upload_text_color');
			box-shadow: none;
		}

		button {
			@include common_btn($color);
			&:hover {
				@include common_btn_acitve($color);
			}
		}

		.toast {
			position: absolute;
			top: 100px;
			width: 100%;
			z-index: 100001;
			text-align: center;
		}
		.toast span {
			display: inline-block;
			background: rgba(0, 0, 0, 0.6);
			color: #fff;
			border-radius: 4px;
			padding: 6px 10px;
			font-size: 12px;
			font-weight: normal;
		}

	}
}


@import "preview";
@import "login";

@include main('white');
