DedeV6/src/static/web/css/style.css

:root {
	--bg:#f8fafb;
	--gray-300:#dee2e6;
	--gray-500:#adb5bd;
	--b-radius:0.5rem
}
::-webkit-scrollbar {
	width:10px;
	height:10px
}
::-webkit-scrollbar-track {
	background:var(--bg)
}
::-webkit-scrollbar-thumb {
	background:var(--gray-300)
}
* {
	scrollbar-width:thin
}
body {
	line-height:1.6;
	letter-spacing:0.5px;
	font-size:14px;
	font-family:"Poppins","Helvetica Neue",Arial,"Microsoft JhengHei",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;
	list-style:none
}
h1,h2,h3,h4,h5,h6 {
	margin:0;
	line-height:1.2;
	font-weight:700;
	color:var(--gray-dark)
}
h1 {
	font-size:36px
}
h2 {
	font-size:24px
}
h3,h4 {
	font-size:18px
}
h5,h6 {
	font-size:16px
}
form.search {
	display:flex;
	width:100%
}
input[type=file] {
	padding:0;
	height:auto;
	border:0
}
input[type=radio],input[type=checkbox],input[type=radio]:focus,input[type=checkbox]:focus {
	width:14px;
	height:14px;
	outline:none;
	box-shadow:none;
	vertical-align:middle
}
.body-bg {
	background:var(--bg)
}
#carouselDede .carousel-caption h2 {
	color:var(--white)
}
#carouselDede .carousel-caption h2,.item-article h2,.item-admin h2,.item-vote h2,.item-tag h2,.list-info-search h2 {
	font-size:18px
}
.item-article li {
	margin-bottom:10px;
	line-height:18px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.item-article li:last-child {
	margin-bottom:0
}
.item-admin {
	padding:75px 1rem
}
.item-theme {
	margin-bottom:2rem
}
.item-theme-box {
	padding:1.5rem
}
.item-theme-box .text-left i,.item-theme-box .text-right span,.item-news .author,.item-news .author a,.item-news .date,.item-info a,.list-article-body i,.list-article-body span,.article-hot-box i,.article-hot-box span,.article-meta span {
	color:var(--gray-500)
}
.item-theme .title a,.item-news .title a {
	color:var(--gray-dark)
}
.item-theme-img img {
	width:100%;
	height:250px
}
.item-theme p,.item-news p {
	color:var(--gray-500);
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical
}
.item-news {
	margin-bottom:2rem;
	padding:1.5rem
}
.item-theme:hover,.item-news:hover {
	box-shadow:0 14px 30px -16px rgba(0,36,100,0.25);
	transform:translateY(-5px)
}
.item-news .title {
	margin:20px 0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.item-news-img img {
	width:100%;
	height:200px
}
.item-vote .table,.article-theme-body p:last-child,.article-hot:last-child {
	margin-bottom:0
}
.list-article-img img {
	width:100%;
	height:260px
}
.list-article-body h2 {
	font-size:18px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.list-article-body h2 a {
	color:var(--gray-dark)
}
.article-theme-title h1 {
	margin-bottom:1rem;
	font-size:24px
}
.article-theme-img,.article-hot-img img {
	width:100%
}
.article-theme-info .item {
	display:inline-block;
	width:100px
}
.article-theme-info .price {
	font-size:18px;
	font-weight:700
}
.article-theme-body h2,.article-right h2 {
	margin-bottom:1rem;
	font-size:18px
}
.article-hot {
	margin-bottom:1.5rem
}
.article-hot-box {
	padding:1rem 1.5rem;
	background:var(--white)
}
.article-hot-box h4 {
	font-size:14px;
	font-weight:300;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.article-main .title h1 {
	font-size:24px
}
.article-main .body h1,.article-main .body h2,.article-main .body h3,.article-main .body h4,.article-main .body h5,.article-main .body h6 {
	margin:20px 0;
	padding:0 10px;
	font-size:18px!important;
	border-left:3px solid var(--success)
}
.article-main .meta span {
	margin-right:1rem
}
.likes .comment-container {
	width:200px;
	padding:10px 20px;
	border:1px solid var(--bg);
	border-radius:30px;
	margin:0 6px;
	cursor:pointer
}
.likes .comment-container:hover {
	background:var(--white)
}
.likes .comment-top {
	display:flex;
	flex-direction:row;
	align-items:center;
	margin-bottom:10px
}
.likes .comment-top-text {
	margin-left:10px;
	color:var(--blue)
}
.likes .comment-top-text-danger {
	margin-left:10px;
	color:var(--danger)
}
.likes .text-like {
	color:var(--blue)
}
.likes .text-unlike {
	color:var(--danger)
}
.likes .comment-top p {
	margin-bottom:unset
}
.prenext .pagination-previous,.pagination-next {
	padding:10px 20px;
	font-size:14px;
	color:var(--gray);
	border-radius:30px;
	border:1px solid var(--light);
	cursor:pointer
}
.actbox {
	float:right;
	padding:10px
}
.actbox ul {
	list-style:none
}
.actbox ul li {
	float:left;
	margin-left:10px
}
.feedbacks .face {
	width:40px;
	height:40px;
	border-radius:50%;
	border:solid 1px var(--gray-300)
}
.feedbacks .media {
	border-bottom:solid 1px var(--gray-300)
}
.feedbacks .feedback_replies .media {
	border-top:solid 1px var(--gray-300);
	border-bottom:0
}
.feedbacks .media-body span {
	color:var(--gray-500)
}
.feedbacks .feedback-basic {
	display:inline-block
}
.feedbacks .feedback-action {
	float:right
}
.feedbacks ._feedback_reply .alert {
	margin-bottom:0
}
.login-from {
	margin:5rem auto;
	width:500px
}
.login-box {
	padding:1.25rem;
	background:var(--white)
}
.user-login,.user-actions {
	line-height:40px
}
.user-actions {
	text-align:right
}
.copyright {
	padding:1.5rem;
	background:var(--gray-dark)
}
.flink,.flink a,.copyright,.copyright a {
	color:var(--white)
}
.user-meter i {
	font-size:24px!important;
	color:var(--green)
}
.userspace .info {
	font-size:14px;
	font-weight:300;
	color:var(--gray)
}
.logo img {
	height:36px
}
.pannel-main-container {
	padding:1.5rem;
	background:var(--white)
}
#returntop {
	display:none;
	position:fixed;
	padding:10px 15px;
	right:1rem;
	bottom:1rem;
	color:var(--white);
	cursor:pointer;
	background:var(--orange);
	border-radius:var(--b-radius);
	border:0;
	z-index:9998
}
#returntop:hover {
	background:var(--orange)
}
.biz-mb {
	margin-bottom:-2rem
}
.bannr-img {
	width:100%;
	height:340px
}
.user-img-md {
	width:60px;
	height:60px;
	border-radius:50%;
	border:1px solid var(--gray-300)
}
.user-img-sm {
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid var(--gray-300)
}
.user-img-xs {
	width:30px;
	height:30px;
	border-radius:50%;
	border:1px solid var(--gray-300)
}
.nav-item .active {
	color:var(--warning)
}
.nav-link {
	padding:0 10px;
	height:36px;
	line-height:36px
}
.navbar-dark .navbar-nav .nav-link {
	color:var(--gray-300)
}
.list-group-item.active a {
	color:var(--white)
}
.list-group-flush>.list-group-item {
	border:0;
	cursor:pointer
}
.input-group-append .btn-sm {
	line-height:1.8
}
.table td,.table th {
	padding:0.5rem;
	vertical-align:middle
}
.form-control {
	display:inline-block;
	height:36px
}
.form-control,.fa,.btn,.dropdown-menu {
	font-size:14px!important
}
.input-text {
	height:36px;
	line-height:36px
}
.thumbnail-md {
	max-width:280px;
	max-height:168px
}
.admin-textarea-xl {
	width:100%
}
.admin-input-lg {
	width:350px
}
.admin-input-md {
	width:230px
}
.admin-input-sm {
	width:180px
}
.admin-input-xs {
	width:70px
}
a:hover,.item-theme:hover,.item-news:hover,.table-hover tbody tr:hover {
	transition:all 0.5s
}
.navbar-toggler,.dropdown-menu,.breadcrumb,.cke_chrome,.cke_inner,.pagination,.form-control,.btn,.alert,.rounded {
	border-radius:var(--b-radius)!important
}
.cke_top,.item-theme-img img,.list-article-img img,.article-hot-img img {
	border-radius:var(--b-radius) var(--b-radius) 0 0!important
}
.cke_bottom,.list-article-radius {
	border-radius:0 0 var(--b-radius) var(--b-radius)!important
}
.rounded-circle {
	border-radius:50%!important
}
.page-item:first-child .page-link {
	border-top-left-radius:var(--b-radius)!important;
	border-bottom-left-radius:var(--b-radius)!important
}
.page-item:last-child .page-link {
	border-top-right-radius:var(--b-radius)!important;
	border-bottom-right-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
}
.btn+.btn {
	margin-left:0.5rem
}
.shadow-sm {
	box-shadow:0 .125rem 0.25rem rgba(0,0,0,0.015)!important
}
.btn-send,#validateimg {
	border-radius:0 var(--b-radius) var(--b-radius) 0;
	cursor:pointer
}
@media (max-width:768px) {
	.pb-m-3 {
		padding-bottom:1rem
	}
	.login-from {
		width:100%
	}
	.bannr-img,.item-theme-img img,.list-article-img img {
		height:250px
	}
	.item-news-img img {
		height:210px
	}
	.feedbacks .feedback-action {
		float:none
	}
}