可道云KODBOX是一款非常好用的云端文件协同合作的开源框架,在免费里应该算是佼佼者,使用后你会惊叹它流畅的使用体验,和windows操作没多大区别,对小型的创业公司来说意义重大。
在使用过程中,如果长时间使用,还是黑暗护眼模式更舒适一些,但是目前官方还没有出黑暗模式,所以自己写了一个css样式。
简单介绍
利用css 的@media (prefers-color-scheme: dark)属性设置前端黑暗模式
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
简而言之,就是可以实现随系统(或浏览器)的深、浅色模式设置,改变网页配色。
操作方法(选择其一即可)
- 复制粘贴下面css样式至 后台管理 - 系统设置 - 基础设置 - 其他设置 - 自定义全局css,目前更新后官方改了后台css引入方式,所以此方法目前只对前台有效,
(推荐)或者新建文件dark.css,复制粘贴下文css样式,并上传到服务器再引入css文件,此方法对前台后台都有效。
- 在你的可道云随便哪个文件夹建立一个dark.css文件,复制粘贴下方css样式文件,右键-属性-复制外链地址。
- 编辑web根目录/app/template/user/index.html
在
</head>
之前插入<link href="刚才复制的外链地址" rel="stylesheet">
保存-刷新
如果没啥变化。请检查浏览器是否开启黑暗模式或者系统开启黑暗模式后浏览器跟随系统设置。理论上支持手机,平板,电脑等平台。
最终效果如图
CSS样式
此处内容需要评论回复后(审核通过)方可阅读。
附:隐藏侧边栏css
/* 隐藏侧边 */
.app-main,
#app.app-desktop .bodymain {
left: 0;
}
.menuBar {
z-index: 999999;
left: -62px;
opacity: 0;
/*box-shadow: 0 0 25px #b4b4b4;*/
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.menuBar:hover {
left: 0;
opacity: 1;
}
/* 768 < 宽度*/
@media screen and (min-width: 768px) {
.app-main,
#app.app-desktop .bodymain {
left: 0;
}
.menuBar {
z-index: 999999;
left: -62px;
opacity: 0;
/*box-shadow: 0 0 25px #b4b4b4;*/
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.menuBar:hover {
left: 0;
opacity: 1;
}
}
20210305更新
支持1.18版本
@charset "UTF-8";
:root {
--dark-q1: #dadada;
--dark-s1: #b5b5b5;
--dark-s2: #949494;
--dark-s3: #797979;
--dark-s4: #545454;
--dark-s5: #3e3e3e;
--dark-s6: #292929;
--dark-s7: #212121;
--dark-s8: #131313;
--dark-s9: #060606;
--dark-s10: #000000;
--blue-bg: #344e61;
--blue-border-s: #007da5;
--blue-light: #029ee3
}
@media (prefers-color-scheme: dark) {
body input::-webkit-input-placeholder {
color: var(--dark-q1);
opacity: 0.7
}
body input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: var(--dark-q1);
opacity: 0.7
}
body input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: var(--dark-q1);
opacity: 0.7
}
body input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--dark-q1);
opacity: 0.7
}
/*front-munebar*/
#app .menuBar {
background: linear-gradient(to bottom, var(--dark-s5), var(--dark-s9));
}
#app .app-main .frame-left {
background: var(--dark-s8);
}
#app .app-main .frame-left .ztree li a {
color: var(--dark-s1)
}
#app .app-main .frame-left .ztree li a .menu-item {
background: var(--dark-s3);
border-color: var(--dark-s4)
}
#app .frame-main-explorer .frame-left .ztree li a:hover,
#app .frame-main-explorer .frame-left .ztree li a:active,
#app .frame-main-explorer .frame-left .ztree li a:focus,
#app .frame-main-explorer .frame-left .ztree li a.level0:hover,
#app .frame-main-explorer .frame-left .ztree li a.level0:active,
#app .frame-main-explorer .frame-left .ztree li a.level0:focus {
background: var(--dark-s5)
}
#app .frame-main-explorer .frame-left .ztree li a.curSelectedNode:active,
#app .frame-main-explorer .frame-left .ztree li a.curSelectedNode,
#app .frame-main-explorer .frame-left .ztree li a.curSelectedNode:hover,
#app .frame-main-explorer .frame-left .ztree li a.curDropTreeNode,
#app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode,
#app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode:hover,
#app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode:active,
#app .frame-main-explorer .frame-left .ztree li a.level0.curDropTreeNode {
background: var(--blue-bg);
border: 1px solid var(--blue-border-s)
}
/*right-header */
#app .frame-main-explorer .frame-right {
border-left: 1px solid var(--dark-s4);
}
#app .frame-main-explorer .frame-right .frame-header {
background: linear-gradient(to bottom, var(--dark-s5), var(--dark-s7));
}
#app .frame-main-explorer .frame-header .header-content {
border-color: var(--dark-s4)
}
#app .frame-main-explorer .frame-right .frame-header .header-content .header-left .btn.btn-default .font-icon {
color: var(--dark-s1);
}
#app .frame-main-explorer .frame-right .frame-header .header-content .header-left button.disable .font-icon {
color: var(--dark-q1);
}
#app .frame-main-explorer .frame-header .header-middle .btn-default,
#app .frame-main-explorer .frame-header .header-content .header-left .btn {
background: var(--blue-bg);
border-color: var(--blue-border-s)
}
#app .frame-main-explorer .frame-header .header-middle .header-address {
border-color: var(--blue-border-s)
}
#app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a {
background-image: url(../images/common/h_button.png)
}
#app .frame-main-explorer .frame-header .header-middle .children-list {
background: var(--dark-s6);
border: 1px solid var(--dark-s5)
}
.frame-main-explorer .frame-header .header-middle .children-list .list-item {
color: var(--dark-s2)
}
.frame-main-explorer .frame-header .header-middle .children-list .list-item:hover,
.frame-main-explorer .frame-header .header-middle .children-list .list-item.active {
background: var(--dark-s7);
color: var(--blue-border-s)
}
.frame-main-explorer .frame-header .header-middle .children-list .list-item.current {
color: var(--blue-light)
}
#app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a,
#app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a:link,
#app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a:visited {
color: var(--dark-q1)
}
#app .frame-main-explorer .frame-header .header-content .header-right .search-box {
color: var(--dark-q1);
}
#app .frame-main-explorer .frame-header .header-content .header-right .search-box input.search {
background: var(--dark-s4);
border-color: var(--blue-border-s);
color: var(--dark-s1)
}
#app .frame-main-explorer .frame-header .header-content .header-right .search-box .btn-default {
background: var(--dark-s6);
border-color: var(--blue-border-s)
}
#app .frame-main-explorer .frame-header kod-toolbar .btn.btn-default,
#app .btn-group>.btn.btn-default,
#app .btn-group-sm>.btn.btn-default {
background: var(--dark-s4);
border-color: var(--blue-border-s);
text-shadow: none;
color: var(--dark-q1)
}
#app .frame-main-explorer .frame-header .tools .tools-right {
background: var(--dark-s9);
box-shadow: none
}
#app .frame-main-explorer .frame-header .search-dropdown {
border-color: var(--dark-s3);
background: var(--dark-s6)
}
#app .form-box .form-row .setting-title {
color: var(--dark-q1);
}
#app .btn-group.btn-group-segment> .btn.btn-default {
border-color: var(--dark-s3);
background: var(--dark-s7);
color: var(--dark-q1);
text-shadow: none
}
#app .form-box .form-row .setting-content,
#app .from-box {
color: var(--dark-s2)
}
#app input[type="checkbox"].kui-checkbox {
background: var(--dark-s6);
border-color: var(--dark-s3)
}
#app .frame-main-explorer .frame-header .search-dropdown .form-box.config-box .panel-form-body hr {
border-color: var(--dark-s3)
}
#app .frame-main-explorer .frame-header .search-dropdown .form-box.config-box .panel-form-body {
background: var(--dark-s6)
}
#app span.select2-container--default .select2-selection--single,
#app span.select2-container--classic .select2-selection--single {
background: var(--dark-s3);
border-color: var(--dark-s1);
}
#app .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--dark-s6)
}
#app .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--dark-s1) transparent transparent transparent
}
span.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below,
span.select2-container--classic.select2-container--open .select2-dropdown.select2-dropdown--below,
span.select2-container--default .select2-dropdown,
span.select2-container--classic .select2-dropdown {
background: var(--dark-s6);
color: var(--dark-s1);
border-color: var(--dark-s6)
}
span.select2-container .select2-results__option[aria-selected=true],
span.select2-container .select2-results__option.select2-results__option--highlighted,
span.select2-container .select2-results__option:hover,
span.select2-container .select2-results__option:active,
span.select2-container .select2-results__option:focus {
background; var(--dark-s7);
color: var(--dark-s3)
}
#app .frame-main-explorer .frame-header .tools {
background: none;
border-color: var(--dark-s3)
}
/*bodymain */
.frame-main-explorer .frame-right .bodymain {
background: var(--dark-s6);
color: var(--dark-s1)
}
body #app div.file-continer .file.select, body div.file-continer .file.file-select-drag-temp {
background: var(--dark-s4);
border-color: var(--blue-border-s)
}
#app .file-continer .file.file-focus {
background: var(--dark-s5);
border-color: var(--blue-bg)
}
body div.file-continer .file.select:focus,
body div.file-continer .file.select.file-focus,
body div.file-continer .file.file-select-drag-temp:focus,
body div.file-continer .file.file-select-drag-temp.file-focus {
border-color: var(--blue-border-s)
}
body #app div.file-continer .file.hover {
background: var(--dark-s8);
border-color: var(--dark-s4)
}
/* 右键菜单 */
.context-menu-list.animated,
.context-menu-list .context-menu-list,
#app .context-menu-list.menu-auto-fit {
background: var(--dark-s7);
border: 1px solid var(--dark-s4);
}
#app .context-menu-list .context-menu-item {
color: var(--dark-s1)
}
#app .context-menu-list .context-menu-item.hover {
background: var(--dark-s9)
}
#app .context-menu-list .context-menu-item.hover .context-menu-item .item:hover {
background: var(--dark-s9);
text-shadow: none
}
#app .context-menu-list .context-menu-item.context-menu-separator {
border-color: var(--dark-s4)
}
/*文档右侧详细信息 */
.frame-main-explorer .bodymain, .frame-main-explorer .file-panel{
background: var(--dark-s7);
border-color: var(--dark-s4)
}
.frame-main-explorer .file-panel .panel-info-header {
background: linear-gradient(190deg,var(--dark-s5),var(--dark-s8));
border-color: var(--dark-s3)
}
#app .file-panel .panel-info-header .header-content .file-name {
color: var(--dark-s1)
}
#app .file-panel .pathinfo .p.info-item-path-group .content .link,
#app .file-panel .pathinfo .p.info-item-path .content .link,
#app .file-panel .pathinfo .p.info-item-path-group .content,
#app .file-panel .pathinfo .p.info-item-path .content,
#app .file-panel .pathinfo .p > .content {
color: var(--dark-s1)
}
#app .frame-main-explorer .file-panel > .tab-group-line .tab-item {
background: var(--dark-s6);
}
#app .frame-main-explorer .file-panel .dialog-tab {
background: var(--dark-s4);
border-color: var(--dark-s5)
}
#app .frame-main-explorer .file-panel > .tab-group-line .tab-item.active,
#app .frame-main-explorer .file-panel > .tab-group-line .tab-item.active .font-icon {
background: var(--dark-s8)
}
/*上传*/
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-title {
background: var(--dark-s7);
text-shadow: none;
color: var(--dark-s1)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close {
background-color: var(--dark-s5);
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min:hover,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min:active,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max:hover,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max:active,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close:hover,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close:active {
background-color: var(--blue-bg);
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-main {
background: var(--dark-s6)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:hover,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:active,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:focus {
background: var(--dark-s5)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item.active,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item.active:hover {
background: var(--dark-s8)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab {
border-color: var(--dark-s4)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-content {
color: var(--dark-s1)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-box-tips .btn.btn-default {
background: var(--dark-s5);
text-shadow: none;
color: var(--dark-s1);
border-color: var(--dark-s3)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .list input {
background: var(--dark-s5);
color: var(--dark-s1);
border-color: var(--dark-s3)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-btn-group .btn.btn-default {
background: var(--dark-s6);
border-color: var(--dark-s3);
text-shadow: none;
color: var(--dark-s1)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-content,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .downloader-content {
border-color: var(--dark-s4)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-select-file,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-cert {
background-image: -webkit-linear-gradient(top,var(--dark-s3),var(--dark-s7));
background-image: -moz-linear-gradient(top,var(--dark-s3),var(--dark-s7));
background-image: -o-linear-gradient(top,var(--dark-s3),var(--dark-s7));
background-image: -ms-linear-gradient(top,var(--dark-s3),var(--dark-s7));
background-image: linear-gradient(top,var(--dark-s3),var(--dark-s7));
-pie-background: linear-gradient(to top,var(--dark-s3),var(--dark-s7));
background: var(--dark-s4)
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item {
background: var(--dark-s4);
border-color: var(--dark-s2);
color: var(--dark-q1);
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item .progress,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item .progress {
background-image: -webkit-linear-gradient(top,var(--dark-s3) 0,var(--dark-s5) 100%);
background-image: -o-linear-gradient(top,var(--dark-s3) 0,var(--dark-s5) 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(var(--dark-s3)),to(var(--dark-s5)));
background-image: linear-gradient(to bottom,var(--dark-s3) 0,var(--dark-s5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--dark-s3)', endColorstr='var(--dark-s5)', GradientType=0);
background-repeat: repeat-x;
}
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item .progress-bar,
.dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item .progress-bar {
background: var(--dark-s6);
color: var(--dark-s3);
}
/*文档右键属性*/
.dialog-file-panel.dialog-no-title.aui-state-focus .aui-main {
background: var(--dark-s5)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel {
background: var(--dark-s5)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .panel-info-header {
background-image: linear-gradient(190deg,var(--dark-s4),var(--dark-s7));
border-bottom: 1px solid var(--dark-s4);
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .panel-info-header .header-content .file-name {
color: var(--dark-s1)
}
.dialog-file-panel .file-panel > .dialog-tab {
border-color: var(--dark-s3)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item:hover,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item.active,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item.active:hover {
background: var(--dark-s6);
color: var(--blue-light)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item {
color: var(--dark-s1)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info {
background: var(--dark-s6);
border-color: var(--dark-s3)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .name {
right: 10px
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .bg-grey-3 {
background: var(--dark-s3)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .space-info {
padding-left: 10px;
color: var(--dark-s1)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .download-url {
background: var(--dark-s6);
color: var(--dark-s2);
border-color: var(--dark-s4)
}
.file-panel .pathinfo .input-group-btn .btn {
background: var(--dark-s4);
border-color: var(--dark-s2)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link {
color: var(--blue-light)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:hover,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:active,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:focus,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:hover,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:active,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:focus {
background: var(--dark-s6)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p:hover {
background: var(--dark-s6);
color: var(--dark-q1)
}
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p:hover .title,
.dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p > .content {
color: var(--dark-s1)
}
.file-panel .panel-history .content-header .btn-group .kui-btn {
background: var(--dark-s4);
border-color: var(--dark-s3);
color: var(--dark-s1)
}
body .file-panel .content-header {
border-color: var(--dark-s3);
box-shadow: none
}
body .file-panel .panel-history .content-list .file-item {
background: var(--dark-s4);
border-color: var(--dark-s3)
}
body .file-panel .panel-history .content-list .file-item:hover {
background: var(--dark-s6);
border-color: var(--dark-s2)
}
body .file-panel .panel-history .content-list .file-item .file-item-line {
background: var(--dark-s3);
border-color: var(--dark-s2);
}
body .file-panel .panel-history .content-list .file-item:hover .file-item-line {
background: var(--dark-s7);
border-color: var(--dark-s2);
}
body .file-panel .user-info,
body .file-panel .panel-history .content-list .file-item .item.mtime {
color: var(--dark-q1)
}
body .label-blue-light {
background: var(--blue-light);
color: var(--dark-q1)
}
body .file-panel .panel-history .content-list .file-item .item.detail .content.placeholder:hover {
background: none
}
body .file-panel .panel-history .content-list .file-item .menu-trigger {
background: var(--dark-s3)
}
body .file-panel .panel-history .content-list .file-item .menu-trigger:hover {
background: var(--dark-s5)
}
body .file-panel .panel-log .content-list .list-item:before,
body .file-panel .panel-log .content-list .list-item:after {
background: var(--dark-s4)
}
body .file-panel .panel-log .content-list .list-item {
background: var(--dark-s6);
border-color: var(--dark-s3)
}
body .file-panel .panel-log .content-list .list-item:hover {
background: var(--dark-s4);
border-color: var(--dark-s2)
}
body .form-box.config-box .panel-form-body {
background: var(--dark-s6);
}
body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row {
background: var(--dark-s5);
border-color: var(--dark-s4)
}
body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row .setting-title.has-title {
background: var(--dark-s6);
border-color: var(--blue-border-s)
}
body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row:hover .setting-title.has-title {
background: var(--dark-s7);
border-color: var(--blue-border-s)
}
.file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row.form-fileSelect .setting-content .btn {
background: var(--dark-s4);
border-color: var(--dark-s3);
text-shadow: none;
color: var(--dark-q1)
}
/*外链分享 */
.share-dialog-box.share-type-link.aui-state-focus .aui-dialog .aui-main {
background: var(--dark-s6)
}
body .dialog-form.share-dialog-box .form-row.item-shareHeader .share-info {
border-color: var(--dark-s4)
}
body .dialog-form.share-dialog-box .form-row.item-shareHeader .bg-banner-light:before {
background-image: -webkit-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
background-image: -moz-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
background-image: -o-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
background-image: -ms-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
background-image: linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
-pie-background: linear-gradient(to bottom,var(--dark-s2),var(--dark-s5));
}
body .dialog-form.share-dialog-box.share-type-link .form-row.item-shareLink .setting-content input,
.form-box .form-row .setting-content input.span-title-right {
background: var(--dark-s6);
color: var(--dark-s2)!important;
border-color: var(--dark-s3)!important
}
body .dialog-form.share-dialog-box .form-row.item-shareLink .setting-content .btn,
.dialog-form.share-dialog-box .form-row.item-password .input-title-right {
background: var(--dark-s4);
border-color: var(--dark-s2);
color: var(--dark-s1)
}