

@mixin panel_main($t) {
	.#{$t} {
		$color: map-get($theme, $t);
		.panel {
			font-size: 12px;
			background: transparent;

			.nav {
				width: 100%;
				overflow: hidden;
				background: #fff;
				ul {
					list-style:none;
					padding: 0;

					li {
						float: left;
						height: 30px;
						width: 33%;

						&> a {
							height: 30px;
							line-height: 30px;
							display: block;
							text-align: center;
							color: #333;
							text-decoration: none;

							&.selected {
								border-bottom: 3px solid map-get($color, 'nav_border');
								color: map-get($color, 'nav_border');
							}
						}

					}
				}
			}


			.device-list {
				ul {
					list-style: none;
					padding: 0;
					li {
						border-bottom: 1px dashed map-get($color, 'upload_btn_border');
						overflow: hidden;
						margin-top: 6px;
						padding-left: 8px;
						padding-bottom: 4px;
						position: relative;
						p {
							margin: 3px 0;
						}
						i {
							position: absolute;
							right: 10px;
							top: 16px;
							font-size: 14px;
							color: #00A000;
						}
					}
				}
			}

			.item {
				width: 200px;
				margin: 0 auto;
				padding: 6px 10px;
				text-align: left;
				background: map-get($color, 'upload_btn_bg');
				border-radius: 8px;

				p {
					margin: 8px 0;
				}
			}

			.wifi-content {

				.tip {
					padding-top: 20px;

					.local-ip {
						text-align: center;
						margin-top: 20px;
						color: map-get($color, 'upload_text_color');
					}
				}
				.qrcode-content {
					position: absolute;
                    bottom: 30px;
                    width: 100%;
					text-align: center;
					background: map-get($color, 'upload_btn_bg');
					box-shadow: 3px 0 5px map-get($color, 'header_border');
					.qrcode {
						width: 130px;
						height: 130px;
						margin: 10px auto;
						border: 5px solid #fff;
					}
				}
                .ip-input {
                    position: absolute;
                    bottom: 30px;
                    width: 100%;
                    padding: 6px;
                    background: map-get($color, 'upload_btn_bg');
                    box-shadow: 3px 0 3px map-get($color, 'header_border');

                    span {
                        font-size: 12px;
                        color: map-get($color, 'upload_text_color');
                    }
					input {
						width: 90%;
						@include common_btn($color);
						padding-left: 6px;
					}
                }
				.input {
					position: absolute;
					bottom: 4px;
					width: 100%;
					text-align: center;
					margin: 0 8px;
					a {
						color: map-get($color, 'anchor');
						text-decoration: underline;

						&:first-child {
							margin-right: 10px;
						}

						&:last-child {
							margin-left: 10px;
						}

						&:hover {
							text-decoration: none;
						}
					}

				}
			}

			.usb-content {
				.action {
					text-align: center;
					padding-top: 20px;
					button {
						margin-top: 10px;
						padding: 6px 12px;
						@include common_btn($color);
						font-size: 12px;

						&:active {
							@include common_btn_acitve($color);
						}
					}
				}
				.tip {
					position: absolute;
					bottom: 4px;
					font-size: 12px;
					padding-left: 8px;
					color: map-get($color, 'upload_text_color');

					p {
						margin: 4px 0;

						a {
							color: map-get($color, 'anchor');
							text-decoration: underline;
						}
					}
				}

				.refresh-loading {
					margin-top: 10px;
				}
				.refresh-status {
					margin-top: 10px;
					color: map-get($color, 'anchor');
				}
			}

			.web-content {
				.qrcode {
					width: 130px;
					height: 130px;
					margin: 10px auto;
					border: 5px solid #fff;
				}
				p {
					font-size: 12px;
					text-align: center;
				}
                .link {
                    text-align: center;
                }

			}

		}

	}
}

@include panel_main('gray');
@include panel_main('white');
@include panel_main('dark');
@include panel_main('black');
