DedeV6/src/static/web/css/admin.css

:root {
	--bg:#f8fafb;
	--gray-300:#dee2e6;
	--gray-500:#adb5bd;
	--blue-300:#80bdff;
	--success-800:#009688;
	--b-radius:0.5rem;
	--b-radius-sm:0.25rem
}
* {
	scrollbar-width:thin;
	letter-spacing:0.5px
}
body {
	line-height:1.5;
	font-size:14px;
	font-family:Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	color:var(--gray);
	background:var(--bg)
}
a {
	color:var(--gray);
	text-decoration:none
}
a:hover {
	color:var(--blue);
	text-decoration:none
}
img {
	max-width:100%;
	border-radius:var(--b-radius)
}
ul,ol,li {
	margin:0;
	padding:0
}
li {
	list-style:none
}
form,label {
	margin-bottom:0
}
td {
	word-break:break-all;
	word-wrap:break-word
}
input {
	padding:0.25rem 0.5rem;
	height:30px;
	color:var(--gray);
	background:var(--white);
	border:1px solid var(--gray-300);
	vertical-align:middle
}
input[type=file] {
	padding:0;
	border:0;
	border-radius:0!important
}
input:focus,select:focus,textarea:focus {
	color:var(--gray);
	background:var(--white);
	border-color:var(--blue-300);
	box-shadow:0 0 0 0.25rem rgba(0,123,255,0.25);
	outline:0
}
input[type=radio],input[type=checkbox],input[type=radio]:focus,input[type=checkbox]:focus {
	width:14px;
	height:14px;
	box-shadow:none;
	vertical-align:middle
}
select {
	padding:0.25rem 0.5rem;
	height:30px;
	color:var(--gray);
	background:var(--white);
	border:1px solid var(--gray-300);
	vertical-align:middle
}
select[multiple=yes] {
	height:160px
}
option {
	padding:0.25rem 0
}
option:checked {
	color:var(--blue)
}
textarea {
	padding:0.25rem 0.5rem;
	color:var(--gray);
	background:var(--white);
	border:1px solid var(--gray-300);
	vertical-align:middle
}
.install-head {
	padding:1rem 0;
	background:var(--white)
}
.install-head .logo {
	font-size:18px;
	font-weight:700;
	color:var(--gray-dark)
}
.install-head .logo img,.login-box .logo img {
	margin-right:0.5rem;
	height:36px
}
.install-box {
	margin:0 auto;
	width:750px
}
.install-box .card-header,.install-box .card-body {
	padding:1.25rem
}
.install-box h1 {
	margin:0;
	font-size:18px;
	font-weight:700;
	color:var(--gray-dark)
}
.install-box label {
	margin-bottom:0.5rem
}
.install-box .form-control {
	height:36px
}
.login-step {
	height:100vh;
	overflow-x:hidden
}
.login-step .login-bg {
	height:100%;
	background:var(--gray-300) url(../img/login_bg.jpg)no-repeat top center;
	background-size:cover
}
.login-box {
	padding:100px 80px 0
}
.login-box .logo {
	margin-bottom:60px
}
.login-box .logo a {
	font-size:18px;
	font-weight:700;
	color:var(--gray-dark)
}
.login-box .title,.login-box .alert {
	margin-bottom:20px
}
.login-box .title h1 {
	margin-bottom:40px;
	font-size:18px;
	font-weight:700;
	color:var(--gray-dark)
}
.login-from {
	margin-bottom:40px
}
.login-from .form-group {
	margin-bottom:20px;
	position:relative
}
.login-from .form-icon {
	position:absolute;
	top:16px;
	left:16px;
	z-index:1998
}
.login-from .form-icon i {
	font-size:18px!important;
	color:var(--gray-500)
}
.login-from .form-control {
	padding-left:45px;
	height:50px
}
.login-from .operate {
	margin-top:40px
}
.login-from .operate button {
	width:100%;
	height:50px
}
.admin-head {
	padding:0;
	width:100%;
	height:60px;
	line-height:60px;
	background:linear-gradient(90deg,var(--green) 45%,var(--success-800) 100%)
}
.admin-head .logo {
	padding-left:1rem;
	width:220px
}
.admin-head .logo .name {
	line-height:18px;
	font-size:18px;
	font-weight:700;
	color:var(--white);
	vertical-align:middle
}
.admin-head .logo .version {
	font-size:12px;
	color:var(--white)
}
.admin-head .nav-item {
	position:relative
}
.admin-head .nav-item .search {
	position:absolute;
	top:16px;
	right:0;
	color:var(--gray)
}
.admin-head .nav-link {
	padding:0 1rem!important
}
.admin-head .nav-link,.admin-head .user a {
	color:var(--white)!important
}
.admin-head .nav-link:hover,.admin-head .user a:hover {
	color:var(--gray-300)!important
}
.admin-head .user img {
	margin-right:0.5rem;
	width:25px;
	height:25px;
	border-radius:50%
}
body.menu-hide .admin-aside {
	display:none
}
body.menu-hide .admin-content {
	left:0
}
body.menu-show .admin-aside {
	display:block
}
body.menu-show .admin-content {
	left:220px
}
.admin-aside {
	position:absolute;
	top:60px;
	left:0;
	bottom:0;
	width:220px;
	overflow-y:auto
}
.side-menu {
	padding:1rem 0;
	min-height:100%
}
.side-menu .menu-item {
	position:relative;
	padding-left:2.5rem;
	height:40px;
	line-height:40px;
	border-left:3px solid transparent;
	cursor:pointer
}
.side-menu .menu-item .menu-link {
	color:var(--gray)
}
.side-menu .menu-item .menu-link .fa {
	position:absolute;
	top:13px;
	left:1rem
}
.side-menu .menu-item .fa,.side-menu .sub-item .fa {
	position:absolute;
	top:13px;
	right:1rem
}
.side-menu .menu-sub {
	display:none
}
.side-menu .sub-item {
	position:relative;
	padding-left:2.675rem;
	height:40px;
	line-height:40px
}
#open {
	border-left:3px solid var(--green)
}
#open .menu-link,#open .fa-angle-down,.side-menu .sub-item.active a {
	color:var(--green)
}
#open .fa-angle-down {
	transform:rotate(180deg)
}
.admin-content {
	position:absolute;
	top:60px;
	right:0;
	bottom:0
}
.admin-content iframe {
	width:100%;
	height:99%;
	border:0
}
.update-close {
	background:var(--white);
	border:0
}
.updates-dot {
	display:none;
	position:absolute;
	top:1rem;
	right:0.35rem;
	width:8px;
	height:8px;
	background:var(--danger);
	border-radius:50%
}
.spinner-border {
	width:20px;
	height:20px;
	vertical-align:bottom
}
#system-info td {
	white-space:nowrap
}
#_fileList,#_verList {
	height:350px;
	overflow-y:auto
}
#_msgInfo {
	display:none
}
.fullpagediv {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:var(--bg);
	opacity:0.6;
	z-index:1980
}
.colordlg {
	background:var(--white);
	border:1px solid var(--gray-300);
	z-index:19991
}
.pubdlg {
	z-index:19992
}
.quicksel {
	height:350px;
	overflow-y:auto;
	z-index:19993
}
.quickselitem .topcat {
	margin-bottom:1rem;
	padding:0 1rem;
	background:var(--light)
}
.quickselitem .soncat {
	margin-bottom:1rem;
	padding:0 1rem
}
.quickselitem .list {
	display:inline-block;
	padding-right:0.5rem
}
.mysource,.mywriter {
	width:500px;
	border:1px solid var(--gray-300);
	z-index:19994
}
.adtab li {
	display:inline-block;
	padding:0.5rem;
	cursor:pointer
}
.adtab .active {
	color:var(--blue)
}
.nw {
	float:left;
	width:180px
}
.cls {
	clear:both
}
.sys-search {
	position:relative
}
.sys-search .sys-times {
	position:absolute;
	top:0;
	right:0
}
.helpinfo {
	float:left;
	display:none;
	padding:1rem;
	width:100%;
	background:var(--bg);
	border:1px solid var(--gray-300);
	border-radius:var(--b-radius)
}
.tips-box {
	margin:70px auto 0;
	width:500px;
	height:auto;
	background:var(--white);
	border-radius:var(--b-radius)
}
.tips-head {
	margin:0 1rem;
	padding:1rem 0;
	border-bottom:1px solid var(--light)
}
.tips-head p {
	margin:0;
	padding-left:1rem;
	line-height:16px;
	color:var(--gray-dark);
	text-align:left;
	border-left:3px solid var(--yellow)
}
.tips-body {
	padding:1rem;
	min-height:160px;
	color:var(--gray);
	word-break:break-all;
	word-wrap:break-word
}
.atlas {
	display:inline-block;
	padding:0.5rem;
	width:12.5%;
	height:auto;
	text-align:center
}
.atlas .atlas-head {
	padding-bottom:75%;
	position:relative
}
.atlas .atlas-head img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover
}
.atlas .atlas-head,.atlas .atlas-body {
	margin-bottom:0.5rem
}
.atlas .atlas-input {
	width:100%
}
#toolimg {
	position:absolute;
	display:none
}
#uploadfield {
	float:left
}
#uploadwait {
	z-index:19999
}
#validateimg {
	border-radius:0 var(--b-radius) var(--b-radius) 0;
	cursor:pointer
}
#wrap {
	padding:1rem
}
#topbar {
	margin-bottom:1rem;
	border-bottom:1px solid var(--light);
	text-align:right
}
#file_list {
	display:grid;
	grid-gap:1rem;
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
}
#file_list:empty:after {
	content:'支持拖拽图此处片上传'
}
#file_list li {
	position:relative
}
#file_list li .picbox {
	padding-bottom:75%;
	position:relative
}
#file_list li .picbox img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover
}
#file_list li .namebox {
	padding-top:0.5rem
}
#file_list li.up-over .picbox:after {
	position:absolute;
	top:0;
	left:0;
	font-family:'FontAwesome';
	font-size:14px;
	color:var(--green);
	content:'\f058';
	z-index:1991
}
#file_list li .tools {
	display:none;
	position:absolute;
	bottom:0;
	right:0;
	z-index:1992
}
#file_list li:hover .tools {
	display:block
}
#file_list li .tools .remove {
	cursor:pointer
}
#file_list li .tools .remove:after {
	font-family:'FontAwesome';
	font-size:14px;
	color:var(--danger);
	content:'\f1f8'
}
#selColor {
	padding:0.2rem;
	width:45px
}
#edsta {
	display:none;
	position:absolute;
	top:100px;
	left:150px;
	width:500px;
	height:auto
}
.browsehappy {
	padding:1rem 30px;
	color:var(--orange);
	background:var(--yellow)
}
.body-row {
	display:flex;
	flex-wrap:wrap
}
.w-65 {
	width:65%
}
.w-35 {
	width:35%
}
.column:hover {
	background:rgba(0,0,0,0.075)
}
.opt-img .list {
	display:inline-block;
	padding:0.5rem;
	width:20%;
	text-align:center
}
.opt-img .list.dir {
	width:12.5%
}
.opt-img .list a {
	display:block;
	margin-bottom:0.5rem;
	padding-bottom:75%;
	position:relative
}
.opt-img .list a > img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover
}
.opt-img .list span {
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.opt-bg1 {
	background:var(--gray-300)
}
.opt-bg2 {
	background:var(--gray-500)
}
.opt-bg3 {
	background:var(--white)
}
.opt-button {
	position:relative
}
.opt-button input {
	position:absolute;
	width:43px;
	top:0;
	left:0;
	opacity:0;
	cursor:pointer
}
.user-img-md {
	width:60px;
	height:60px;
	border-radius:50%;
	border:1px solid var(--light)
}
.user-img-sm {
	width:30px;
	height:30px;
	border-radius:50%;
	border:1px solid var(--light)
}
.thumbnail-md {
	max-width:200px;
	max-height:120px
}
.thumbnail-sm {
	max-width:80px;
	max-height:80px
}
.admin-win {
	background:var(--bg);
	border:1px solid var(--gray-300)!important
}
.admin-win-iframe {
	width:100%;
	height:350px
}
.admin-main-sort {
	margin-left:1rem;
	padding:0;
	width:30px;
	text-align:center
}
.admin-textarea-xl {
	width:100%;
	height:90px!important
}
.admin-textarea-sm {
	width:350px;
	height:60px
}
.admin-input-lg {
	width:350px
}
.admin-input-md {
	width:230px
}
.admin-input-sm {
	width:190px
}
.admin-input-xs {
	width:70px
}
.container-fluid {
	padding:1rem
}
.breadcrumb {
	padding:0;
	background:none
}
.modal-title {
	font-size:14px;
	line-height:1.6
}
.card,.modal-content {
	border:0
}
.card-header {
	padding:1rem;
	background-color:rgba(0,0,0,0);
	border-bottom:1px solid rgba(0,0,0,0.05)
}
.card-body {
	padding:1rem
}
.card-body canvas {
	height:370px!important
}
.table {
	margin-bottom:0;
	font-size:14px;
	color:var(--gray)
}
.table.icon img {
	width:20px;
	height:20px
}
.table th,.table td {
	padding:0.5rem 1rem 0.5rem 0;
	vertical-align:middle
}
.form-control {
	display:inline-block
}
.form-control,.btn,.fa {
	font-size:14px!important
}
a:hover,body.menu-hide .admin-content,body.menu-show .admin-content,.sidemenu .submenu li:hover,.column:hover,.table-hover tbody tr:hover {
	transition:all 0.5s
}
span.page-link {
	color:var(--white);
	background:var(--green)
}
input,select,textarea,button,.colordlg,.pubdlg,.quickselitem .topcat,.mysource,.mywriter,#edsta,.cke_chrome,.cke_inner,.alert,.card,.rounded,.form-control,.btn {
	border-radius:var(--b-radius)!important
}
.cke_top {
	border-radius:var(--b-radius) var(--b-radius) 0 0!important
}
.cke_bottom {
	border-radius:0 0 var(--b-radius) var(--b-radius)!important
}
.input-group>.input-group-append>.btn {
	border-top-left-radius:0!important;
	border-bottom-left-radius:0!important
}
.input-group:not(.has-validation)>.form-control:not(:last-child) {
	border-top-right-radius:0!important;
	border-bottom-right-radius:0!important
}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
	background:var(--green)
}
.nav-pills .nav-link,.btn-sm {
	padding:0 0.5rem;
	height:30px;
	line-height:30px;
	font-size:12px!important
}
.btn-xs {
	padding:0.15rem;
	line-height:1;
	font-size:12px!important;
	border-radius:var(--b-radius-sm)!important
}
.btn+.btn {
	margin-left:0.5rem!important
}
.shadow-sm {
	box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.015)!important
}
@media  screen and (min-width:1199px) {
	.modal-dialog {
		max-width:500px
	}
}
@media screen and (min-width:992px) and (max-width:1199px) {
	.login-box {
		padding:1rem
	}
}
@media screen and (max-width:767px) {
	td {
		white-space:nowrap
	}
	.install-box,.tips-box,.w-65,.w-35 {
		width:100%!important
	}
	.admin-textarea-sm,.admin-input-lg,.admin-input-md,.admin-input-sm {
		width:auto!important;
		min-width:35%
	}
	.admin-head .navbar-nav {
		margin-left:auto
	}
	body.menu-hide .admin-aside {
		display:block;
		width:100%
	}
	body.menu-hide .admin-content {
		left:100%
	}
	body.menu-show .admin-aside {
		display:none
	}
	body.menu-show .admin-content {
		left:0
	}
	.tips {
		padding:0 1rem
	}
	.login-box {
		padding:30px
	}
	.card-body canvas {
		height:230px!important
	}
	.pagination,.page-item {
		display:inline-table
	}
}