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: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;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2;font-weight:600;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);transition:all 0.5s}
.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:600}
.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)ce0}
.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)}
.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{cursor:pointer}
.input-group-append .btn-sm{line-height:1.8}
.table{color:var(--gray)}
.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}
.btn+.btn{margin-left:10px}
.input-text{height:36px;line-height:36px}
.thumbnail-md{max-width:280px;max-height:168px}
.admin-textarea-xl{width:100%}
.admin-input-lg{width:60%}
.admin-input-sm{width:160px}
.admin-input-xs{width:60px}
.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:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label,.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after,.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
#validateimg,.btn-send{border-radius:0 var(--b-radius) var(--b-radius) 0!important}
#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)}
@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}
}