.top { width: 100%; height: 54px; position: relative; background: linear-gradient(#1463a5, #06386f); } .logo { padding: 12px 0 0 10px; } .admin { margin-left: 15px; padding: 17px 10px 0 0; color: #ffffff; } .admin span { padding-left: 22px; background: url('../images/user-icon.png') no-repeat left; } .admin a { margin-left: 15px; padding-left: 22px; display: inline-block; color: #ffffff; } .admin a:hover { color: #00deff; } .admin a.exit { background: url('../images/quit.png') no-repeat left; } .admin a.exit:hover { background: url('../images/quit-hover.png') no-repeat left; } .admin a.manage { background: url('../images/user-management.png') no-repeat left; } .admin a.manage.active, .admin a.manage:hover { color: #00d5f6; background: url('../images/user-management-hover.png') no-repeat left; } .nav { padding-top: 3px; } .nav ul li { height: 48px; line-height: 48px; float: left; position: relative; z-index: 10; overflow: hidden; border-radius: 5px; } .nav ul li a { padding-left: 38px; padding-right: 16px; color: #ffffff; } .nav ul li:before { content: ''; width: 16px; height: 16px; position: absolute; top: 17px; left: 13px; z-index: 0; background: url("../images/icon-dangerous.png") no-repeat; } .nav ul li:first-child:before, .nav ul li:nth-child(2):before { background-position: -18px 0; } .nav ul li:last-child:before { width: 16px; background-position: -54px 0; } .nav ul li.action { background: none; } .nav ul li.action a { color: #ffffff; background: url("../images/nav-bg.jpg") repeat-x; } .nav ul li:last-child.action:after { width: 192px; background: url("../images/nav-bg-last.png") no-repeat center; } .table .panel-body { border: 0; background-color: #002145; } .table .datagrid-htable, .table .datagrid-btable { color: #868686; } .table .datagrid-header { border-color: #234979; } .table .datagrid-row-selected td, .table .datagrid-row-over td { background-color: #2a6fc6 !important; } .table .datagrid-header td, .table .datagrid-body td { vertical-align: middle; border-color: #234979; border-style: solid; color: #ffffff; } .table .datagrid-header tr, .table .datagrid-body tr { background-color: #03244d; } .table .datagrid-body .datagrid-row{ background-color: #0f3360; } .table .datagrid-body .datagrid-row:nth-of-type(2n) { background-color: #03244d; } .table .datagrid-header td:last-child, .table .datagrid-body td:last-child { border-right: 0; } .table .edit { width: 14px; height: 14px; margin-right: 5px; cursor: pointer; display: inline-block; background: url(../images/edit.png) no-repeat } .table .delete { width: 12px; height: 14px; cursor: pointer; display: inline-block; background: url(../images/delete.png) no-repeat } .manage-table { height: calc(100vh - 109px); } .manage-table .datagrid-header td { position: relative; } .manage-table .datagrid-body td { border-bottom: 0; } .manage-table .datagrid-body .datagrid-row { background-color: #0f3360; } .manage-table .datagrid-body .datagrid-row:nth-of-type(2n) td { background-color: #03244d; } .manage-table .datagrid-header td:last-of-type .datagrid-cell, .manage-table .datagrid-body .datagrid-row td:last-of-type .datagrid-cell { padding-left: 15px; position: relative; overflow: visible; } .user-table .datagrid-header td:nth-last-child(-n+2):after, .statistic-table .datagrid-header td:nth-last-child(-n+2):after, .org-table .datagrid-header td:nth-last-child(-n+2):after, .config-table .datagrid-header td:nth-last-child(-n+2):after { content: ''; width: 10000px; height: 28px; position: absolute; top: 0px; left: 160px; background: #03244d; } .statistic-table .datagrid-header td:nth-last-child(-n+2):after { left: 161px; } .org-table .datagrid-header td:nth-last-child(-n+2):after { left: 180px; } .config-table .datagrid-header td:nth-last-child(-n+2):after { left: 201px; } /*.manage-table .datagrid-header td:last-of-type .datagrid-cell:after, .manage-table .datagrid-body .datagrid-row td:last-of-type .datagrid-cell:after { content: ''; width: 1px; height: 28px; position: absolute; top: -6px; left: 165px; background-color: #dddddd }*/ .manage-table .datagrid-cell { padding: 0 8px; } .manage-table .datagrid-body .datagrid-row:last-of-type td { border-bottom: 1px solid #234979; } .manage-table .datagrid .datagrid-pager { background: #002145; border-color: #234979; } .manage-table .l-btn-plain:hover { border-color: #00d5f6; background-color: #e8f3f5; } .manage-table .pagination-first { width: 6px; left: 11px; background: url(../images/pagination_icons.png) no-repeat 0 center; } .manage-table .pagination-prev { width: 5px; left: 12px; background: url(../images/pagination_icons.png) no-repeat -8px center; } .manage-table .pagination-next { width: 5px; left: 12px; background: url(../images/pagination_icons.png) no-repeat -15px center; } .manage-table .pagination-last { width: 6px; left: 11px; background: url(../images/pagination_icons.png) no-repeat -22px center; } .manage-table .pagination-load { width: 10px; left: 9px; background: url(../images/pagination_icons.png) no-repeat -30px center; } .manage-table .pagination-page-list { margin-top: 5px; border-radius: 3px; border: 1px solid #3871af; background: linear-gradient(#266cb9, #002c5d); color: #ffffff; } .manage-table .datagrid .datagrid-pager tr, .manage-table .pagination-info { color: #ffffff; } .manage-table .pagination td { line-height: 30px; } .manage-table .pagination .pagination-num { margin-top: 5px; border-radius: 3px; color: #ffffff; border: 1px solid #3871af; background: linear-gradient(#266cb9, #002c5d); } .manage-table .pagination-btn-separator { border-left-color: #234979; border-right: 0; } .tooltip-content { word-break: break-all; } .tooltip-content span { width: 110px; text-align: right; display: inline-block; } .line { width: 100%; height: 1px; margin-top: 12px; background-color: #234979; } .system-management { height: calc(100vh - 58px); background: #002145; } .aside { width: 247px; height: 100%; float: left; border-right: 1px solid #234979; background-color: #002145; } .aside ul li { padding: 0 10px; line-height: 35px; font-size: 16px; } .aside ul li.active { background: linear-gradient(#266cb9, #002c5d); } .aside ul li.active a { color: #ffffff; } .container { float: right; width: calc(100% - 247px); } .toolbar { height: 51px; display: flex; border-bottom: 1px solid #234979; background: #002145; } .toolbar .btn-groups { height: 30px; display: flex; margin-top: 10px; margin-left: 10px; overflow: hidden; } .toolbar .btn-groups .btn { height: 28px; line-height: 28px; padding-left: 27px; padding-right: 7px; margin-right: 3px; border: 1px solid #3871af; border-radius: 3px; background: linear-gradient(#266cb9, #002c5d); } .toolbar .btn-groups .btn:disabled { cursor: no-drop; opacity: 0.5; } .toolbar .btn-groups .btn:first-of-type:before { display: none; } .toolbar .btn-groups .btn.add-btn { background: url('../images/add.png') no-repeat left #002c5d; background-position-x: 7px; } .toolbar .btn-groups .btn.edit-btn { background: url('../images/edit.png') no-repeat left #002c5d; background-position-x: 7px; } .toolbar .btn-groups .btn.delete-btn { background: url('../images/delete.png') no-repeat left #002c5d; background-position-x: 7px; } .toolbar .btn-groups .btn.enable-btn { background: url('../images/enable.png') no-repeat left #002c5d; background-position-x: 7px; } .toolbar .btn-groups .btn.disable-btn { background: url('../images/disable.png') no-repeat left; background-position-x: 7px; } .user-toolbar { align-items: center; justify-content: space-between; } .statistic-toolbar { align-items: center; justify-content: flex-end; } .statistic-toolbar .statistic-type { margin-right: 5px; overflow: hidden; display: flex; } .statistic-toolbar .statistic-type span { padding: 0 16px; cursor: pointer; line-height: 28px; text-align: center; border: 1px solid #3871af; border-left: 0; border-radius: 3px 0 0 3px; background: #03244c; color: #ffffff; } .statistic-toolbar .statistic-type span:first-of-type { border-radius: 3px 0 0 3px; border-left: 1px solid #3871af; } .statistic-toolbar .statistic-type span:last-of-type { border-radius: 0 3px 3px 0; } .statistic-toolbar .statistic-type span.active { background: linear-gradient(#266cb9, #002c5d); } .statistic-toolbar .statistic-type span:first-of-type.active, .statistic-toolbar .statistic-type span:last-of-type.active { border-color: #3871af; } .statistic-toolbar .easyui-datetimebox { width: 150px; } .textbox { border: 1px solid #234979; background: #03244c; box-shadow: 0 0 10px rgba(48, 112, 194, 0.25) inset; } .statistic-toolbar .textbox .textbox-text { padding-top: 2px !important; color: #ffffff; } .statistic-toolbar .query-btn, .user-toolbar .query-btn { height: 28px; margin: 0 10px; padding: 0 16px; line-height: 28px; color: #ffffff; border: 1px solid #3871af; border-radius: 3px; background: linear-gradient(#266cb9, #002c5d); } .statistic-toolbar .tip, .user-toolbar .tip { margin: 0 6px; } .statistic-toolbar .query-btn:hover, .user-toolbar .query-btn:hover { color: #ffffff } .user-toolbar .btn-groups { margin-top: 0; } .user-toolbar .params-select .tip { line-height: 28px; } .user-toolbar .combo-arrow, .manage-dialog .user-dialog .combo-arrow { background: url("../images/drop-down.png") no-repeat; background-size: 20px 20px; background-position-y: 4px; } .user-toolbar .org-list { width: 150px; } .delete-user-dialog .dialog-title h2 { background: none !important; padding-left: 14px; } .delete-user-dialog .dialog-btn { height: 28px; padding: 0 16px; line-height: 28px; border-radius: 3px; } .delete-user-dialog .dialog-btn-group { width: auto; margin: 0; padding: 10px; } .manage-dialog .modal-dialog { width: 362px; margin-left: -181px; position: absolute; top: 50%; left: 50%; color: #3a3a3a; border-radius: 3px; transform: translateY(-50%); background-color: #ffffff; } .manage-dialog .user-dialog { width: 450px; margin-left: -225px; } .manage-dialog .modal-content { background: #002145; border: 1px solid #234979; } .manage-dialog .modal-header { position: relative; } .manage-dialog .modal-header h4 { padding-left: 10px; line-height: 36px; color: #ffffff; background: linear-gradient(#1463a5, #06386f); } .manage-dialog .modal-dialog .close { height: 14px; position: absolute; right: 14px; top: 11px; cursor: pointer; } .manage-dialog .modal-body { padding: 0 10px 16px 10px; border-bottom: 1px solid #234979; } .manage-dialog .modal-body .row { margin-top: 12px; display: flex; justify-content: space-between; } .manage-dialog .modal-body .row .col { width: calc(50% - 5px); position: relative; } .manage-dialog .modal-body .row .col label { margin-bottom: 10px; display: block; color: #ffffff; } .manage-dialog .modal-body .row .col .sex-select { width: 120px; border-radius: 3px; overflow: hidden; display: flex; } .manage-dialog .modal-body .row .col .sex-select span { width: 60px; cursor: pointer; line-height: 28px; text-align: center; border-style: solid; border-color: #3871af; border-width: 1px 0 1px 1px; color: #ffffff; background: #03244c; } .manage-dialog .modal-body .row .col .sex-select span:first-of-type { border-left: 1px solid #3871af; } .manage-dialog .modal-body .row .col .sex-select span:last-of-type { border-right: 1px solid #3871af; } .manage-dialog .modal-body .row .col .sex-select span.active { background: linear-gradient(#266cb9, #002c5d); } .manage-dialog .modal-body .row .col .passwordbox-open { background: url("../images/password-open.png") no-repeat center center; } .manage-dialog .modal-body .row .col .passwordbox-close { background: url("../images/password-close.png") no-repeat center center; } .manage-dialog .modal-body .row .col .textbox { width: 100%; line-height: 28px; } .manage-dialog .modal-body .row .col .textbox .textbox-text { width: 100% !important; padding: 0 10px; cursor: auto; } .manage-dialog .user-dialog .modal-body .row .col .textbox .validatebox-readonly { cursor: pointer; } .manage-dialog .modal-body .row .col .textbox .textbox-prompt { color: #ffffff; } .manage-dialog .modal-body .row .col .textbox-readonly .textbox-text { width: calc(100% - 30px) !important; } .manage-dialog .modal-body .row .col .color-picker { padding: 0; height: 30px; position: absolute; right: -1px; top: 29px; background: transparent; border: 1px solid #234979; border-radius: 0 3px 3px 0; } .manage-dialog .modal-body .row .col .file-upload { width: 30px; height: 30px; text-align: center; position: absolute; top: 30px; right: 1px; cursor: pointer; background: url("../images/upload.png") no-repeat center center; } .manage-dialog .modal-body .row .col .file-input { width: 30px; height: 30px; opacity: 0; position: absolute; top: 32px; right: 0; z-index: 10; cursor: pointer; font-size: 0; } ::-webkit-color-swatch-wrapper { background-color: #ffffff; } ::-webkit-color-swatch { position: relative; } .manage-dialog .modal-body .row .col .star { color: #f40000 } .manage-dialog .modal-body .row .single-col { width: 100%; } .manage-dialog .modal-body .user-col { display: flex; justify-content: space-between; } .manage-dialog .modal-body .user-col .item .sex-select { width: 80px; } .manage-dialog .modal-body .user-col .item .sex-select span { width: 40px; } .manage-dialog .modal-body .user-col .item:last-of-type { margin-left: 10px; } .manage-dialog .modal-footer { padding: 16px 10px; text-align: right; } .manage-dialog .modal-footer .btn { height: 28px; padding: 0 16px; line-height: 26px; border-radius: 3px; } .manage-dialog .modal-footer .sure-btn { margin-right: 7px; } .manage-dialog .modal-footer .cancel-btn { background: #002145; } .calendar-prevmonth { background: url(../images/calendar_arrows.png) no-repeat -18px -2px; } .calendar-prevyear { background: url(../images/calendar_arrows.png) no-repeat -1px -2px; } .calendar-nextmonth { background: url("../images/calendar_arrows.png") no-repeat -34px -2px; } .calendar-nextyear { background: url(../images/calendar_arrows.png) no-repeat -49px -2px; } .null-data-body { position: relative; } .null-data-body .null-data { width: 128px; position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); } .null-data-body .null-data span { width: 128px; height: 128px; display: block; background: url("../images/null-data.png") no-repeat; } .textbox .textbox-prompt { color: #ffffff; } .datagrid-mask-msg { background-color: white; display: block !important; } .control-btn-groups { position: absolute; left: 20px; top: 20px; z-index: 1000; } .control-btn-groups .control-item { margin-bottom: 10px; display: flex; align-items: center; } .control-btn-groups .control-item span { display: block; cursor: pointer; } .control-btn-groups .control-item span.icon { width: 34px; height: 34px; text-align: center; border-radius: 50%; transition: all 0.5s; background-color: rgba(4, 24, 49, 0.7); } .control-btn-groups .control-item span.icon img { width: 18px; margin-top: 8px; } .control-btn-groups .control-item .text { line-height: 30px; margin: 2px 0 0 6px; padding: 0 10px; border-radius: 3px; color: #ffffff; opacity: 0; transition: all 0.5s; background: linear-gradient(#087cd6, #003c7e); } .control-btn-groups .control-item .default-text { background: rgba(0, 0, 0, 0.5); } .control-btn-groups .control-clear-item span.icon img { width: 32px; margin-top: 1px; } .control-btn-groups .control-tag-item span.text img { width: 16px; margin-top: 9px; } .control-btn-groups .control-active-item span.icon { background: linear-gradient(#087cd6, #003c7e); transition: all 0.3s; } .control-btn-groups .control-active-item span.text { opacity: 1; transition: all 0.5s; } .chart { height: calc(100vh - 120px); margin-top: 10px; } ::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); background-color: #234979; } .datagrid-mask-msg { background-color: #002145; border-color: #234979; color: #ffffff; white-space: nowrap; transform: translateX(-50%) } .btn-file input[type=file] { font-size: 0; }