颜色变量

src/static/web/css/admin.css

@@ -1,49 +1,50 @@
+:root{--bg:#f8fafb;--gray-300:#dee2e6;--gray-500:#adb5bd;--success-900:#009688}
 ::-webkit-scrollbar{width:8px;height:10px}
-::-webkit-scrollbar-track{background:#f5f5f5}
-::-webkit-scrollbar-thumb{background:#dee2e6}
+::-webkit-scrollbar-track{background:var(--bg)}
+::-webkit-scrollbar-thumb{background:var(--gray-300)}
 *{font-size:14px;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:#6c757d;background:#fff}
-a{color:#6c757d;text-decoration:none}
-a:hover{color:#007bff;text-decoration:none}
+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(--white)}
+a{color:var(--gray);text-decoration:none}
+a:hover{color:var(--blue);text-decoration:none}
 img{max-width:100%;border-radius:0.5rem}
 ul,ol,li{margin:0;padding:0}
 li{list-style:none}
 form,label{margin-bottom:0}
-table{background:#fff;border-spacing:0;border-collapse:separate}
+table{background:var(--white);border-spacing:0;border-collapse:separate}
 table tr:first-child td:first-child{border-top-left-radius:0.5rem;border-top:0}
 table tr:first-child td:last-child{border-top-right-radius:0.5rem;border-top:0}
 table tr:last-child td:first-child{border-bottom-left-radius:0.5rem;border-bottom:0}
 table tr:last-child td:last-child{border-bottom-right-radius:0.5rem;border-bottom:0}
 td{word-break:break-all;word-wrap:break-word}
-input{padding:0.375rem 0.75rem;height:30px;color:#6c757d;background:#fff;border:1px solid #dee2e6;vertical-align:middle}
+input{padding:0.375rem 0.75rem;height:30px;color:var(--gray);background:var(--white);border:1px solid var(--gray-300);vertical-align:middle}
 input[type=file]{padding:0;height:auto;border:0;border-radius:0!important;vertical-align:middle}
-input[type=button],input[type=submit],input[type=reset]{padding:0.375rem 0.75rem;height:30px;line-height:1.5;font-size:12px;color:#fff;background:#1eb867;border:0}
+input[type=button],input[type=submit],input[type=reset]{padding:0.375rem 0.75rem;height:30px;line-height:1.5;font-size:12px;color:var(--white);background:var(--green);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}
-select{padding:0.375rem 0.75rem;height:30px;color:#6c757d;background:#fff;border:1px solid #dee2e6;vertical-align:middle}
+select{padding:0.375rem 0.75rem;height:30px;color:var(--gray);background:var(--white);border:1px solid var(--gray-300);vertical-align:middle}
 select[multiple=yes]{height:180px}
 option{display:flex;padding:0;height:30px;align-items:center}
-textarea{padding:0.375rem 0.75rem;color:#6c757d;background:#fff;border:1px solid #dee2e6;vertical-align:middle}
-input:focus,select:focus,textarea:focus{color:#6c757d;background:#fff;border-color:#80bdff;box-shadow:0 0 0 0.2rem rgba(0,123,255,.25);outline:0}
+textarea{padding:0.375rem 0.75rem;color:var(--gray);background:var(--white);border:1px solid var(--gray-300);vertical-align:middle}
+input:focus,select:focus,textarea:focus{color:var(--gray);background:var(--white);border-color:var(--info);box-shadow:0 0 0 0.2rem rgba(0,123,255,.25);outline:0}
 .install-box{margin:0 auto;width:800px}
 .install-box .card-header,.install-box .card-body{padding:1.25rem}
-.install-box h2,.install-box legend{margin:0;line-height:1.2;font-size:18px;font-weight:600;color:#343a40}
+.install-box h2,.install-box legend{margin:0;line-height:1.2;font-size:18px;font-weight:600;color:var(--gray-dark)}
 .install-box label,.login-box label{margin-bottom:5px}
 .install-box .form-control,.login-box .form-control{height:36px}
-.login-head{padding:1rem 0;background:#fff}
-.login-head .logo{font-size:18px;color:#343a40;font-weight:600}
+.login-head{padding:1rem 0;background:var(--white)}
+.login-head .logo{font-size:18px;color:var(--gray-dark);font-weight:600}
 .login-head .logo img{margin-right:0.5rem;height:32px}
 .login-from{margin:5rem auto;width:500px}
-.login-box{padding:1.25rem;background:#fff}
-.login-box h2{margin:0;line-height:1.2;font-size:24px;font-weight:600;color:#343a40}
-.admin-head{width:100%;height:60px;background:linear-gradient(45deg,#1eb867,#009688 100%)}
+.login-box{padding:1.25rem;background:var(--white)}
+.login-box h2{margin:0;line-height:1.2;font-size:24px;font-weight:600;color:var(--gray-dark)}
+.admin-head{width:100%;height:60px;background:linear-gradient(45deg,var(--green),var(--success-900) 100%)}
 .admin-head .logo{float:left;padding-left:25px;height:60px;line-height:60px;width:220px}
-.admin-head .logo .name a{font-size:18px;font-weight:600;color:#fff;vertical-align:middle}
-.admin-head .logo .version{margin-left:5px;font-size:12px;color:#fff;vertical-align:top}
+.admin-head .logo .name a{font-size:18px;font-weight:600;color:var(--white);vertical-align:middle}
+.admin-head .logo .version{margin-left:5px;font-size:12px;color:var(--white);vertical-align:top}
 .admin-head .logo .btn-version{margin-left:5px}
 .admin-head .item li{float:left;position:relative;padding:0 1rem;height:60px;line-height:60px}
-.admin-head .item li a,.admin-head .user li a{color:#fff}
-.admin-head .item li a:hover,.admin-head .user li a:hover{color:#dee2e6}
-.admin-head .item .search{position:absolute;top:20px;right:20px;height:20px;line-height:20px;color:#6c757d;background:0;border:0}
+.admin-head .item li a,.admin-head .user li a{color:var(--white)}
+.admin-head .item li a:hover,.admin-head .user li a:hover{color:var(--gray-300)}
+.admin-head .item .search{position:absolute;top:20px;right:20px;height:20px;line-height:20px;color:var(--gray);background:0;border:0}
 .admin-head .user{float:right;padding-right:25px;height:60px;line-height:60px}
 .admin-head .user li{float:left;padding:0 1rem;height:60px;line-height:60px}
 .admin-head .user li:last-child{padding-right:0}
@@ -53,62 +54,61 @@ body.menu-hide .body-right{left:0;transition:all 0.5s}
 body.menu-show .menu-left{display:block}
 body.menu-show .body-right{left:220px;transition:all 0.5s}
 .menu-left{padding:1rem 5px;position:absolute;top:60px;left:0;bottom:0;width:220px;overflow-y:auto}
-.sidemenu{background:#fff;border-radius:0.5rem}
+.sidemenu{background:var(--white);border-radius:0.5rem}
 .sidemenu .link{position:relative;padding-left:50px;display:block;height:42px;line-height:42px;cursor:pointer}
 .sidemenu li:last-child .link{border-bottom:0}
-.sidemenu li i{position:absolute;top:14px;left:20px;color:#6c757d}
+.sidemenu li i{position:absolute;top:14px;left:20px;color:var(--gray)}
 .sidemenu li i.fa-angle-down{right:20px;left:auto}
-.sidemenu li.open .link,.sidemenu li.open i{color:#1eb867}
+.sidemenu li.open .link,.sidemenu li.open i{color:var(--green)}
 .sidemenu li.open i.fa-angle-down{transform:rotate(180deg)}
-.sidemenu .submenu{display:none;padding:5px 0;background:#adb5bd}
+.sidemenu .submenu{display:none;padding:5px 0;background:var(--gray-500)}
 .sidemenu .submenu li{height:40px;line-height:40px}
-.sidemenu .submenu li:hover{background:#009688;transition:all 0.5s}
-.sidemenu .submenu a{float:left;display:block;padding:0 10px 0 50px;color:#fff}
-.sidemenu .submenu .active{background:#1eb867}
+.sidemenu .submenu li:hover{background:var(--success-900);transition:all 0.5s}
+.sidemenu .submenu a{float:left;display:block;padding:0 10px 0 50px;color:var(--white)}
+.sidemenu .submenu .active{background:var(--green)}
 .sidemenu .submenu-right{float:right!important;padding:0 20px 0 10px!important}
 .body-right{position:absolute;top:60px;right:0;bottom:0}
 .body-right iframe{width:100%;height:99%;border:0}
-.web-info{padding:10px;background:#f5f5f5;text-overflow:ellipsis;white-space:nowrap}
+.web-info{padding:10px;background:var(--bg);text-overflow:ellipsis;white-space:nowrap}
 #_fileList,#_verList{height:350px;overflow-y:auto}
 #_msgInfo{display:none}
-.update-close{background:#fff;border:0}
-.updates-dot{display:none;position:absolute;top:12px;right:6px;height:6px;width:6px;background:#dc3545;border-radius:50%}
+.update-close{background:var(--white);border:0}
+.updates-dot{display:none;position:absolute;top:12px;right:6px;height:6px;width:6px;background:var(--danger);border-radius:50%}
 .spinner-border{width:20px;height:20px;vertical-align:bottom}
 .sys-search{position:relative}
 .sys-search .sys-times{position:absolute;top:1px;right:20px}
-.coolbg{padding:0.5rem;background:#fff;border-bottom:1px solid #dee2e6;text-align:right}
-.coolbg-box{padding:0.5rem;background:#fff;overflow:auto}
-.colordlg{padding:0.5rem;background:#fff;border:1px solid #dee2e6;z-index:10005}
-.pubdlg{background:#fff;border:1px solid #dee2e6;z-index:8888}
-.pubdlg .title{padding:0 0.5rem;height:30px;line-height:30px;color:#343a40;background:#f5f5f5;border-bottom:1px solid #dee2e6}
-.fullpagediv{position:absolute;top:0;left:0;width:100%;height:100%;background:#f5f5f5;opacity:0.6;z-index:1999}
+.coolbg{padding:0.5rem;background:var(--white);border-bottom:1px solid var(--gray-300);text-align:right}
+.coolbg-box{padding:0.5rem;background:var(--white);overflow:auto}
+.colordlg{padding:0.5rem;background:var(--white);border:1px solid var(--gray-300);z-index:10005}
+.pubdlg{background:var(--white);border:1px solid var(--gray-300);z-index:8888}
+.pubdlg .title{padding:0 0.5rem;height:30px;line-height:30px;color:var(--gray-dark);background:var(--bg);border-bottom:1px solid var(--gray-300)}
+.fullpagediv{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg);opacity:0.6;z-index:1999}
 .quicksel{margin-left:10px;margin-top:10px;width:680px;height:420px;overflow:auto;z-index:10005}
 .quickselitem{display:block;line-height:30px}
-.quickselitem .topcat{margin-bottom:1rem;padding:0 10px;background:#e9ecef;clear:both}
+.quickselitem .topcat{margin-bottom:1rem;padding:0 10px;background:var(--light);clear:both}
 .quickselitem .soncat{margin-bottom:1rem;padding:0 10px}
 .quickselitem .list{display:inline-block;padding-left:10px}
-.quickselfoot{padding:0.5rem;background:#f5f5f5;border-top:1px solid #dee2e6}
-.mysource,.mywriter{width:300px;background:#fff;border:1px solid #dee2e6;z-index:10001}
-.column .admin-td{border-bottom:1px solid #dee2e6!important}
-.add-tab ul .active{color:#007bff}
+.quickselfoot{padding:0.5rem;background:var(--bg);border-top:1px solid var(--gray-300)}
+.mysource,.mywriter{width:300px;background:var(--white);border:1px solid var(--gray-300);z-index:10001}
+.column .admin-td{border-bottom:1px solid var(--gray-300)!important}
+.add-tab ul .active{color:var(--blue)}
 .add-tab li{float:left;width:60px;line-height:30px;cursor:pointer}
 .nw{float:left;width:160px}
 .cls{clear:both}
-.helpinfo{float:left;display:none;padding:10px;width:100%;background:#f5f5f5;border:1px solid #dee2e6;border-radius:0.5rem}
+.helpinfo{float:left;display:none;padding:10px;width:100%;background:var(--bg);border:1px solid var(--gray-300);border-radius:0.5rem}
 #toolimg{position:absolute;display:none}
 #uploadfield{float:left}
 #uploadwait{z-index:19999}
-.option1{background:#e9ecef}
-.option2{background:#adb5bd}
-.option3{background:#fff}
-.body-bg{background:#f5f5f5}
-.upload-box{margin:10px;background:#fff}
-.tips-box{margin:70px auto 0;width:500px;height:auto;background:#fff;border-radius:0.5rem;box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.075)}
-.tips-head{margin:0 20px;padding:18px 0;border-bottom:1px solid #f5f5f5}
-.tips-head p{margin:0;padding-left:10px;line-height:16px;color:#343a40;text-align:left;border-left:3px solid #ff8400}
-.tips-body{padding:20px;min-height:160px;color:#6c757d;word-break:break-all;word-wrap:break-word}
-.user-img-md{width:60px;height:60px;border-radius:50%;border:1px solid #eee}
-.user-img-sm{width:30px;height:30px;border-radius:50%;border:1px solid #eee}
+.body-bg,.option1{background:var(--bg)}
+.option2{background:var(--gray-500)}
+.option3{background:var(--white)}
+.upload-box{margin:10px;background:var(--white)}
+.tips-box{margin:70px auto 0;width:500px;height:auto;background:var(--white);border-radius:0.5rem;box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.075)}
+.tips-head{margin:0 20px;padding:18px 0;border-bottom:1px solid var(--bg)}
+.tips-head p{margin:0;padding-left:10px;line-height:16px;color:var(--gray-dark);text-align:left;border-left:3px solid var(--yellow)}
+.tips-body{padding:20px;min-height:160px;color:var(--gray);word-break:break-all;word-wrap:break-word}
+.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}
 .icon img{width:20px;height:20px}
@@ -119,22 +119,22 @@ body.menu-show .body-right{left:220px;transition:all 0.5s}
 .card-body canvas{height:360px!important}
 .fileinput-button{display:inline-block;position:relative;overflow:hidden}
 .fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;direction:ltr;cursor:pointer}
-.maintable{width:98%!important;border:1px solid #dee2e6!important}
-.table{margin-bottom:0;color:#6c757d}
+.maintable{width:98%!important;border:1px solid var(--gray-300)!important}
+.table{margin-bottom:0;color:var(--gray)}
 .table td,.table th{padding:0.5rem;vertical-align:middle}
 .form-control{display:inline-block}
 .fa{font-size:14px!important;color:inherit}
-.admin-win{background:#f5f5f5;border:1px solid #dee2e6!important}
+.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-td{padding:0.5rem;border-bottom:1px solid #dee2e6}
+.admin-td{padding:0.5rem;border-bottom:1px solid var(--gray-300)}
 .admin-textarea-xl{width:100%;height:90px}
 .admin-textarea-sm{width:360px;height:60px}
 .admin-input-lg{width:360px}
 .admin-input-md{width:260px}
 .admin-input-sm{width:160px}
 .admin-input-xs{width:60px}
-span.page-link{color:#fff;background:#1eb867}
+span.page-link{color:var(--white);background:var(--green)}
 table,input,select,textarea,.login-box,.colordlg,.pubdlg,.quickselitem .topcat,.mysource,.mywriter,.web-info,.upload-box,.cke_chrome,.cke_inner,.pagination,.card,.form-control,.btn,.alert,.rounded,#edsta{border-radius:0.5rem!important}
 .coolbg,.pubdlg .title,.cke_top{border-radius:0.5rem 0.5rem 0 0!important}
 .submenu,.coolbg-box,.cke_bottom{border-radius:0 0 0.5rem 0.5rem!important}
@@ -147,28 +147,26 @@ table,input,select,textarea,.login-box,.colordlg,.pubdlg,.quickselitem .topcat,.
 .btn+.btn{margin-left:10px}
 #validateimg{border-radius:0 0.5rem 0.5rem 0;cursor:pointer}
 #wrap{padding:10px}
-#topbar{padding:10px 0;border-bottom:1px solid #ccc;text-align:right}
+#topbar{padding:10px 0;border-bottom:1px solid var(--light);text-align:right}
 #file_list{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-top:10px}
 #file_list:empty:after{content:'拖拽图片到此处上传'}
 #file_list li{display:block;position:relative;padding:10px;vertical-align:top;border-radius:0.5rem}
-#file_list li:hover{background:#f5f5f5}
+#file_list li:hover{background:var(--light)}
 #file_list li .picbox{display:flex;flex:0 0 auto;position:relative;padding-top:90%;width:100%;align-items:center;justify-content:center;overflow:hidden}
 #file_list li .picbox img{display:block;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);border-radius:0.5rem}
 #file_list li .namebox{display:flex;padding:10px;justify-content:center;align-items:flex-start}
-#file_list li.up-over .picbox:after{position:absolute;bottom:10px;right:0;font-family:'FontAwesome';font-size:18px;color:#1eb867;content:'\f058';z-index:9}
+#file_list li.up-over .picbox:after{position:absolute;bottom:10px;right:0;font-family:'FontAwesome';font-size:18px;color:var(--green);content:'\f058';z-index:9}
 #file_list li .tools{display:none;position:absolute;bottom:12px;right:10px;z-index:99}
 #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:18px;color:#dc3545;content:'\f1f8'}
+#file_list li .tools .remove:after{font-family:'FontAwesome';font-size:18px;color:var(--danger);content:'\f1f8'}
 #selColor{padding:5px;width:35px}
-#edsta{display:none;padding:0.5rem;position:absolute;top:100px;left:200px;width:450px;height:auto;background:#f5f5f5;border:1px solid #dee2e6}
-#browsehappy{padding:1rem 30px;color:#856404;background:#fff3cd}
+#edsta{display:none;padding:0.5rem;position:absolute;top:100px;left:200px;width:450px;height:auto;background:var(--bg);border:1px solid var(--gray-300)}
+#browsehappy{padding:1rem 30px;color:var(--orange);background:var(--yellow)}
 .browsehappy-close{float:right;cursor:pointer}
-@media (min-width:1200px){
-.modal-dialog{max-width:500px}
+@media (min-width:1200px){.modal-dialog{max-width:500px}
 }
-@media (max-width:768px){
-td{text-overflow:ellipsis;white-space:nowrap}
+@media (max-width:768px){td{text-overflow:ellipsis;white-space:nowrap}
 .install-box,.login-from,.tips-box{width:100%}
 .tips{padding:0 1rem}
 }

src/static/web/css/style.css

@@ -1,13 +1,14 @@
+:root{--bg:#f8fafb;--gray-300:#dee2e6;--gray-500:#adb5bd}
 ::-webkit-scrollbar{width:8px;height:10px}
-::-webkit-scrollbar-track{background:#f5f5f5}
-::-webkit-scrollbar-thumb{background:#dee2e6}
+::-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:#6c757d;background:#fff}
-a{color:#6c757d;text-decoration:none}
-a:hover{color:#007bff;text-decoration:none}
+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(--white)}
+a{color:var(--gray);text-decoration:none}
+a:hover{color:var(--blue);text-decoration:none}
 img{max-width:100%;border-radius:0.5rem}
 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:#343a40}
+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}
@@ -15,26 +16,26 @@ 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:#f5f5f5}
-#carouselDede .carousel-caption h2{color:#fff}
+.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 .title a,.item-news .title a{color:#343a40}
+.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{margin-bottom:0;color:#999;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.item-theme p,.item-news p{margin-bottom:0;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,.25);transform:translateY(-5px);transition:all 0.5s}
 .item-news .title{margin:20px 0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .item-news-img img{width:100%;height:200px}
-.item-news i,.item-news span{color:#999}
-.item-info a{color:#1eb867}
+.item-news i,.item-news span{color:var(--gray-500)}
+.item-info a{color:var(--green)}
 .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:#343a40}
+.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}
@@ -42,53 +43,53 @@ input[type=radio],input[type=checkbox],input[type=radio]:focus,input[type=checkb
 .list-article-body p,.item-vote .table,.article-theme-body p:last-child,.article-hot:last-child{margin-bottom:0}
 .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:#fff}
+.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-hot-box i,.article-hot-box span,.article-meta span,.item-theme-box .text-left i,.item-theme-box .text-right span,.list-article-body i,.list-article-body span{color:#999}
+.article-hot-box i,.article-hot-box span,.article-meta span,.item-theme-box .text-left i,.item-theme-box .text-right span,.list-article-body i,.list-article-body span{color:var(--gray-500)}
 .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 #20c997}
+.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 #f5f5f5;border-radius:30px;margin:0 6px;cursor:pointer}
-.likes .comment-container:hover{background:#fffce0}
+.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:#497cf6}
-.likes .comment-top-text-danger{margin-left:10px;color:#d21d35}
-.likes .text-like{color:#497cf6}
-.likes .text-unlike{color:#d21d35}
+.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:#a6a5a6;border-radius:30px;border:1px solid #f0f0f0;cursor:pointer}
+.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 #ccc}
-.feedbacks .media{border-bottom:solid 1px #ccc}
-.feedbacks .feedback_replies .media{border-top:solid 1px #ccc;border-bottom:0}
-.feedbacks .media-body span{color:#999}
+.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:#fff}
+.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:#343a40}
-.flink,.flink a,.copyright,.copyright a{color:#fff}
+.copyright{padding:1.5rem;background:var(--gray-dark)}
+.flink,.flink a,.copyright,.copyright a{color: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 #eee}
-.user-img-sm{width:36px;height:36px;border-radius:50%;border:1px solid #eee}
-.user-img-xs{width:30px;height:30px;border-radius:50%;border:1px solid #eee}
-.user-meter i{font-size:24px!important;color:#1eb867}
-.userspace .info{font-size:14px;font-weight:300;color:#6c757d}
+.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)}
+.user-meter i{font-size:24px!important;color:var(--green)}
+.userspace .info{font-size:14px;font-weight:300;color:var(--gray)}
 .logo img{height:40px}
-.nav-item .active{color:#ff8400}
+.nav-item .active{color:var(--warning)}
 .nav-link{padding:0 10px;height:36px;line-height:36px}
-.navbar-dark .navbar-nav .nav-link{color:#eee}
-.list-group-item.active a{color:#fff}
+.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}
-.pannel-main-container{padding:1.5rem;background:#fff}
+.pannel-main-container{padding:1.5rem;background:var(--white)}
 .input-group-append .btn-sm{line-height:1.8}
-.table{color:#6c757d}
+.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}
@@ -108,10 +109,9 @@ input[type=radio],input[type=checkbox],input[type=radio]:focus,input[type=checkb
 .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 0.5rem 0.5rem 0!important}
-#returntop{display:none;position:fixed;padding:10px 15px;right:1rem;bottom:1rem;color:#fff;cursor:pointer;background:#ec982c;border-radius:0.5rem;border:0;z-index:9998}
-#returntop:hover{background:#e77817}
-@media (max-width:768px){
-.m-pb-1{padding-bottom:1rem}
+#returntop{display:none;position:fixed;padding:10px 15px;right:1rem;bottom:1rem;color:var(--white);cursor:pointer;background:var(--orange);border-radius:0.5rem;border:0;z-index:9998}
+#returntop:hover{background:var(--orange)}
+@media (max-width:768px){.m-pb-1{padding-bottom:1rem}
 .m-pb-2{padding-bottom:2rem}
 .login-from{width:100%}
 .bannr-img,.item-theme-img img,.list-article-img img{height:250px}