Files
DzzOffice/static/css/common.css

994 lines
19 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.add-menu{
font-size: 26px;
border-radius: 50%;
border: none;
bottom: 24px;
cursor: pointer;
height: 56px;
position: fixed;
line-height: 56px;
text-align: center;
webkit-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: background-color,-webkit-box-shadow;
right: 24px;
transition-property: background-color,box-shadow;
width: 56px;
z-index: 2;
box-shadow: 0px 2px 10px rgba(0,0,0,.3), 0px 0px 1px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.15);
font-family: Roboto,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
display:flex;
justify-content:center;
align-items:center;
}
.add-menu:hover{
color: #fff;
background: var(--bs-primary);
background-color: var(--bs-primary);
webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.2), 0px 10px 14px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.10);
-moz-box-shadow: 0px 5px 5px rgba(0,0,0,.2),0px 10px 14px rgba(0,0,0,.1),inset 0px 1px 0px rgba(255,255,255,.25),inset 0px -1px 0px rgba(0,0,0,.10);
box-shadow: 0px 5px 5px rgba(0,0,0,.2), 0px 10px 14px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.10);
}
.add-menu1{
border-radius: 50%;
border: none;
bottom: 88px;
cursor: pointer;
height: 56px;
position: fixed;
line-height: 56px;
text-align: center;
webkit-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: background-color,-webkit-box-shadow;
right: 24px;
transition-property: background-color,box-shadow;
width: 56px;
z-index: 2;
box-shadow: 0px 2px 10px rgba(0,0,0,.3), 0px 0px 1px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.15);
font-family: Roboto,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
display:flex;
justify-content:center;
align-items:center;
}
.add-menu1:hover{
color: #fff;
background: var(--bs-primary);
background-color: var(--bs-primary);
webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.2), 0px 10px 14px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.10);
-moz-box-shadow: 0px 5px 5px rgba(0,0,0,.2),0px 10px 14px rgba(0,0,0,.1),inset 0px 1px 0px rgba(255,255,255,.25),inset 0px -1px 0px rgba(0,0,0,.10);
box-shadow: 0px 5px 5px rgba(0,0,0,.2), 0px 10px 14px rgba(0,0,0,.1), inset 0px 1px 0px rgba(255,255,255,.25), inset 0px -1px 0px rgba(0,0,0,.10);
}
.form_name {
width: 100%;
}
.form-group{
width: 100%;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
border-radius: var(--radius);
padding: 10px;
}
.form-group:nth-child(even){
background: #fafafa;
}
.form-group:hover{
background: #e5f3ff;
border-color: transparent;
}
.no-result-title{
font-size: large;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
.member-avatar img{
width: 32px;
height: 32px;
}
.member-avatar .img-avatar{
width: 32px;
height: 32px;
line-height: 32px;
}
ul,ul li,li{
list-style: none;
}
.close:focus{
outline: 0 !important;
}
/*start 定义几种字体颜色*/
.primary{
color:#428bca !important;
}
.success{
color:#5cb85c !important;
}
.info{
color:#5bc0de !important;
}
.warning{
color:#f0ad4e !important;
}
.danger{
color:#d9534f !important;
}
.rq{
color:red !important;
}
/*start 输入框边线样式*/
textarea.input-correct, input.input-correct {
border-color: #7CB81C;
}
textarea.input-error, input.input-error {
border-color: #E26F50;
}
/*end 输入框边线样式*
/
/*认证图标*/
.verify-icon{
vertical-align:top;
max-height: 1em;
}
* html .verify-icon {
height: expression(this.height > 16 && this.width<=this.height ? 16 : true);
}
/*end 定义几种字体颜色*/
#ajaxwaitid { display: none; position: absolute; right: 0; top: 0; z-index: 1; padding: 0 5px; background: #F7F7F7 }
form{
margin:0;
}
a i{
_filter:Alpha(opacity=70);
opacity:0.7;
}
a:hover i{
_filter:Alpha(opacity=100);
opacity:1;
}
.tip{
margin: 10px;line-height: 1.8;
}
dl dd{
margin-left:20px;
}
/*一些通用的css*/
.strong{
font-weight:bold;
}
.wd60{
width:60px;
}
.wd80{
width:80px;
}
.wd100{
width:100px;
}
.wd180{
width:180px;
}
.mt10{
margin-top:10px;
}
.mr10{
margin-right:10px;
}
.ml10{
margin-left:10px;
}
.mr20{
margin-right:20px;
}
.mb20{
margin-bottom:20px;
}
.bt{
border-top:1px solid #e1e1e1;
}
.br{
border-right:1px solid #e1e1e1;
}
.bb{
border-right:1px solid #e1e1e1;
}
.b1{
border-right:1px solid #e1e1e1;
}
.b-white{
border-color:#FFF;
}
/*start 加载样式*/
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
25% { -webkit-transform: perspective(120px) rotateY(180deg) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
75% { -webkit-transform: perspective(120px) rotateX(180deg) }
100% { -webkit-transform: perspective(120px) }
}
@-moz-keyframes rotateplane {
0% { -moz-transform: perspective(120px) }
25% { -moz-transform: perspective(120px) rotateY(180deg) }
50% { -moz-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
75% { -moz-transform: perspective(120px) rotateX(180deg) }
100% { -moz-transform: perspective(120px) }
}
@-o-keyframes rotateplane {
0% { -o-transform: perspective(120px) }
25% { -o-transform: perspective(120px) rotateY(180deg) }
50% { -o-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
75% { -o-transform: perspective(120px) rotateX(180deg) }
100% { -o-transform: perspective(120px) }
}
@keyframes rotateplane {
0% { transform: perspective(120px) }
25% { transform: perspective(120px) rotateY(180deg) }
50% { transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
75% {transform: perspective(120px) rotateX(180deg) }
100% { transform: perspective(120px) }
}
.loading_img{
position:relative;
width:54px;
height:54px;
background:url(../image/common/logo.png) no-repeat;
background-size:100%;
-webkit-animation: rotateplane 3.2s infinite ease-in-out;
animation: rotateplane 3.2s infinite ease-in-out;
}
.loading_process{
position:absolute;
z-index:999999;
left:11px;
top:11px;
width:32px;
height:32px;
/*background:url(./images/loading.gif);*/
}
.ie8 .loading_process{
background:url(../image/common/loading.gif) no-repeat;
}
.ie9 .loading_process{
background:url(../image/common/loading.gif) no-repeat;
}
.ie8 .loading_img{
background:none;
}
.ie9 .loading_img{
background:none;
}
/*验证码样式相关 start*/
.seccode-wrapper{
position: relative;
}
.seccode-wrapper .dzz{
font-size:20px;
}
.seccode-input.input-group input.form-control+.input-group-addon{
padding:0;
min-width:34px;
}
.seccode-wrapper .input-group-addon .dzz{
font-size:32px;
}
.seccode-wrapper .dzz.dzz-close{
color:#FF0000;
}
.seccode-wrapper .dzz.dzz-done{
color:#3c763d;
}
.seccode-wrapper .seccode-input{
width:100%;
padding-right:150px;
}
.seccode-wrapper.seccode_type_99 .seccode-input{
padding-right:50px;
}
.seccode-wrapper img{
border:1px solid #e1e1e1;
}
.seccode-wrapper .seccode_image_tips{
display:none;
}
/*验证码样式相关 end*/
/*end 加载样式 */
.tips {
left:50%;
position:fixed;
top:0px;
width:350px;
margin-left:-125px;
z-index:999;
}
.main-container{
margin-left:120px;
height:100%;
overflow:auto;
}
.main-body{
padding: 10px
}
.main-content{
padding: 5px
}
.main-header2 {
margin: 0;
padding: 5px 8px;
position: relative;
}
.main-header .navbar-nav{
float:none;
}
.main-header2 .nput-group,.main-header .nput-group{
margin:5px 0 0;
}
/*表格样式 end*/
.un_selector{
background-color: #FFFFFF;
border: 1px solid #e1e1e1;
color: #555555;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px;
vertical-align: middle;
width:215px;
}
/*多选输入框*/
.un_selector { height: auto; cursor: text; overflow: hidden; }
.un_selector input { width: 95px; height: 21px; border-width: 0; outline: none;box-shadow:none;padding:0 }
.ie6 .un_selector input, .ie7 .un_selector input { height: 21px; }
.un_selector input:focus{
box-shadow:none;
}
.un_selector span { float: left; margin: 1px 2px 1px 0; width: 100px; height: 21px; line-height: 20px; background: #F7F6ED ; color: #369; overflow: hidden; display: inline-block;border-radius: var(--radius); }
.un_selector em { padding-left: 5px; width: 80px; font-style:normal; font-size:12px;}
.un_selector span .close{font-size:18px;font-weight:normal}
select {
width: auto;
}
.help-inline ,.help-block{
font-size:12px;
}
.help-inline:hover,.help-block:hover{
color:var(--bs-primary)
}
.nav strong{
font-size:14px;
padding:3px 15px;
line-height: 34px;
}
/*start左侧*/
.bs-left-container{
width:200px;
position:absolute;
top: 0;
left:0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
box-shadow: 0 0 2px rgba(var(--bs-dark-rgb), 0.375);
border-radius: var(--radius);
background: #fbfbfb;
}
.bs-left-container .bs-left-title{
font-size: 20px;
text-align: center;
color: #666;
}
.bs-left-container .nav-stacked{
margin: 0;
padding: 1px;
overflow: auto;
}
.bs-left-container .nav-stacked>li{
list-style: none;
margin: 3px;
}
.bs-left-container .nav-stacked>li>a{
padding: 10px;
display: block;
border-radius: var(--radius);
padding-left: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.bs-left-container .nav-stacked>li>a:hover{
background:#4285F4;
background-color:rgba(var(--bs-primary-hover),0.1);
color: var(--bs-primary);
}
.bs-left-container .nav-stacked>.active>a{
background:#4285F4;
background-color:rgba(var(--bs-primary-hover),0.3);
border-radius: var(--radius);
}
.bs-left-container .nav-stacked>.active>a:hover{
background:#4285F4;
background-color:rgba(var(--bs-primary-hover),0.2);
border-radius: var(--radius);
}
.left-container-scroll{
overflow-x:hidden;
overflow-y:auto;
}
.left-drager{
position: absolute;
padding: 0px;
margin: 0px;
overflow: visible;
left: 120px;
cursor: default;
height: 100%;
width: 7px;
top: 0;
background:url(../image/common/none.gif) repeat;
cursor:w-resize;
z-index:1901;
}
.left-drager .left-drager-op{
position:fixed;
top: 0;
left: 0;
display:none;
overflow: hidden;
text-align: center;
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
}
.left-drager .left-drager-click{
position:absolute;
border-radius:100%;
  opacity:.6;
background:#fff;
animation:waterBtn 3s;
-moz-animation:waterBtn 3s infinite; /* Firefox */
-webkit-animation:waterBtn 3s infinite; /* Safari and Chrome */
-o-animation:waterBtn 3s infinite; /* Opera */
transform: translate(-50%, -50%) scale(1);
}
@keyframes waterBtn
{
0% {
width:0px;
height:0px;
}
50% {
width:1000px;
height:1000px;
opacity:0
}
100%{
opacity:0
}
}
@-webkit-keyframes waterBtn /* Safari and Chrome */
{
0% {
width:0px;
height:0px;
}
50% {
width:1000px;
height:1000px;
opacity:0
}
100%{
opacity:0
}
}
@-o-keyframes waterBtn /* Opera */
{
0% {
width:0px;
height:0px;
}
50% {
width:1000px;
height:1000px;
opacity:0
}
100%{
opacity:0
}
}
@-moz-keyframes waterBtn /* Firefox */
{
0% {
width:0px;
height:0px;
}
50% {
width:1000px;
height:1000px;
opacity:0
}
100%{
opacity:0
}
}
.bs-container{
position:relative;
margin: 5px;
}
/*start导航*/
.bs-main-container{
margin-left:200px;
transition:margin linear 0.1s;
padding:5px;
overflow-y: auto;
box-shadow: 0 0 2px rgba(var(--bs-dark-rgb), 0.375);
border-radius: var(--radius);
}
/*start 定义圆形按钮*/
.ibtn {
display: inline-block;
vertical-align: middle;
width: 28px !important;
height: 30px;
line-height: 30px;
text-align:center;
background:#F7F7F7;
border-radius:50%;
font-size:14px;
color: var(--bs-primary);
}
.ibtn-sm{
width: 20px !important;
height: 20px;
line-height:20px;
}
.ibtn:hover {
background:#3497db;
color:#FFF;
}
.ibtn.glyphicon-trash:hover {
background:#d9534f;
}
.ibtn.glyphicon-remove:hover {
background:#d9534f;
}
/*end 定义圆形按钮*/
/*按钮样式*/
.btn-simple {
border: 1px solid #e1e1e1;
background: var(--bs-primary);
background-image: none;
text-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
/*padding: 6px 25px;*/
}
.btn-simple:hover {
background-color: #f2f2ea;
}
/*end 按钮样式*/
/*机构和用户选择盒*/
.org-sel-box {
/* box-shadow: 0 5px 15px #CCC; */
/* border: 5px solid RGBA(0,0,0,0.2); */
width: 300px;
height: 300px;
background: #FBFBFB;
border-radius: var(--radius);
overflow: hidden;
z-index: 11000;
padding-bottom:0;
}
/*调试信息*/
.debug_bar_bottom{
position:absolute;
bottom:0;
right:10px;
line-height:30px;
text-align:right;
z-index:10000;
}
.debug_bar_bottom #debuginfo{
color:green;
}
/*start 加入编辑器内容的相关css*/
.dzz-image{
cursor:pointer;
}
.dzz-attach,.dzz-link,.dzz-dzzdoc {
padding:0 10px;
display:inline-block;
}
.dzz-attach-icon,.dzz-dzzdoc-icon,.dzz-link-icon{
width:16px;
height:16px;
vertical-align: middle;
margin-top:-5px;
margin-right:5px;
}
.dzz-attach-title,.dzz-dzzdoc-title,.dzz-link-title{
text-decoration:none;
}
/*end 加入编辑器内容的相关css*/
.avatar-small{
width: 32px;
height: 32px;
}
.avatar-font-small {
display: inline-block;
text-align: center;
width: 32px;
height: 32px;
font-size: 20px;
line-height:30px;
background: #F9F9F9;
border: 1px solid #e1e1e1;
overflow: hidden;
box-shadow: inset 0px 0px 3px #FFF;
white-space:nowrap;
text-indent:5px;
letter-spacing:4px;
font-weight:400;
}
a:hover .avatar-font-small{
background:#F7F7F7;
}
dl>dl:last-child{
margin-bottom:0;
}
dl>dd{
margin:var(--radius);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
background: transparent;
}
/*loading动画 start*/
@-webkit-keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes ball-beat{
50% {
opacity: 0.2;
-ms-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes ballbeat{
50% {
opacity: 0.2;
-moz-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader {
text-align: center;
}
.ball-beat {
display: inline-block;
}
.ball-beat > div {
background-color: #bdbdbd;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-beat 0.7s 0s infinite linear;
-moz-animation: ball-beat 0.7s 0s infinite linear;
-ms-animation: ball-beat 0.7s 0s infinite linear;
animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
-webkit-animation-delay: 0.35s !important;
-moz-animation-delay: 0.35s !important;
-ms-animation-delay: 0.35s !important;
animation-delay: 0.35s !important;
}
/*loading动画 end*/
/*修改radio和checkbox start*/
.checkbox-inline, .radio-inline{
margin-top: 10px;
}
.form-horizontal checkbox-inline, .form-horizontal .radio-inline{
margin-top: 0;
}
.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline{
margin-top: 10px;
}
.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline{
margin-top: 10px;
margin-left:15px
}
.form-horizontal .checkbox-inline+.checkbox-inline,.form-horizontal .radio-inline+.radio-inline{
margin-top: 0;
}
/*修改radio和checkbox end*/
/*loading动画 end*/
.main-top-header {
margin-top: 20px;
}
.main-top-header .nav li a {
font-size: 14px;
color: rgba(73, 86, 106, 1);
}
.main-top-header .nav .active a {
color: rgba(76, 138, 251, 1);
}
.form-group .input-form {
margin-bottom: 20px;
}
.form-group .btn-primary:active:focus {
background-color: #165ad8;
color: #fff;
border-color: transparent;
}
.margin-10 {
margin-top: 10px;
}
.wxlabel-item {
width: 12%;
min-width: 100px;
text-align: left;
color: rgba(104, 120, 146, 1);
}
.wxlabel-info {
width: 87%;
display: inline-block;
}
.copyBtn-wrap {
margin-left: 30px;
}
.copy-btn {
color: #4c89fb;
cursor: pointer;
font-weight: 600;
}
.switch-info {
font-size: 1rem;
color: rgba(76, 138, 251, 1);
}
/*showDialog 关闭按钮*/
/* showDialog 样式修改 */
.alert-close {
font-size: 1.5rem;
position: absolute;
top: 8px;
right: 28px;
}
/*导航条样式*/
.navbarBox{
border-bottom: 1px solid #ddd;
width: 100%;
height: 57px;
}
.navbarUL{
margin: 0px;
padding: 0px;
overflow: hidden;
float: right;
margin-right: 10px;
margin-bottom: 0px;
}
.navbarUL li.active {
background-color: inherit;
border-bottom: 3px solid #4c89fb;
}
.navbarUL li {
float: left;
width: 80px;
line-height: 54px;
text-align: center;
}
.navbarUL li.active a {
color: #4c89fb;
}
.navbarUL li a {
color: #666;
width: 80px;
text-decoration: none;
display: inline-block;
}
/*结束*/
/*nav 左侧收起按钮hover*/
.gb_fc {
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
padding: 12px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
line-height: 0;
}
.gb_fc:hover {
background-color: rgba(0,0,0,0.071);
}
/*表情图标限制最大大小*/
.img-emotion{
max-width:24px;
max-height:24px;
}
/*用户或部门头像*/
.iconFirstWord {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
line-height: 24px;
text-align: center;
margin-right: 2px;
color: #FFFFFF;
}
.ibtn.dzz-close {
border-radius: var(--radius);
font-size: 18px;
width: 24px !important;
height: auto;
line-height: normal;
vertical-align: sub;
color: rgba(102, 102, 102, 1);
}
/*选择部门或用户相关*/
.btn-sorg {
margin: 5px 10px 5px 0px !important;
padding: 5px;
}
.btn-sorg>em{
font-style: normal
}
.btn-sorg>img {
width:24px;
height:24px;
border-radius: 50%;
margin-right:3px;
}
.btn-sorg>span {
font-size: 20px;
font-weight: normal;
margin-left: 0;
margin-right: 3px;
}
.btn-sorg span.iconFirstWord {
font-size: 14px;
vertical-align: baseline;
width: 24px;
height: 24px;
line-height: 24px;
}
.btn-sorg .ibtn.dzz-close {
width:24px;
height:24px;
line-height:24px;
border-radius: 50%;
}
.btn-sorg .ibtn.dzz-close:hover {
color:#FFF;
background-color: #e53935
}
/*选择部门或用户相关 end*/
/*图标旋转*/
@keyframes dzz-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
.spin {
-webkit-animation: dzz-spin 2s infinite linear;
animation: dzz-spin 2s infinite linear;
}
/*图标旋转*/
.table td img {
max-width: 32px;
max-height: 32px;
margin-right: 10px;
}