Files
yunkong2.admin/src/less/adminCommons.less
2018-09-14 19:26:46 +08:00

676 lines
13 KiB
Plaintext

@import "commons";
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes dash {
0% { stroke-dashoffset: @offset; }
50% {
stroke-dashoffset: @offset/4;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: @offset;
transform: rotate(450deg);
}
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.iob-font {
font-family: @iob-font;
font-weight: normal;
}
.iob-font-12 {
font-size: @list-font-size !important;
&:extend(.iob-font);
}
.iob-list-font {
font-size: @list-font-size !important;
&:extend(.iob-font);
}
table.iob-list-table>thead>tr>th {
background: @list-header-background;
color: #000;
text-align: left;
font-weight: normal;
padding-left: @line-indent;
height: @header-height - 2px;
//&:extend(.iob-font-12);
}
.toolbar-frame {
height: @toolbar-size;
//margin-top: (@toolbar-y-margin - @tabs-padding-top);
margin-bottom: @toolbar-y-margin;
margin-top: @toolbar-y-margin;
}
.line-indent {
padding-left: @line-indent;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited,
.ui-state-hover a,
.ui-state-hover a:link,
.ui-state-hover a:visited {
outline: none;
}
.ui-jqgrid tr.jqgrow td {
font-size: @list-font-size;
}
.ui-jqgrid .ui-pg-input {
height: 20px !important;
}
.header {
height: 29px;
line-height: 29px;
font-size: 16px;
margin-left: @line-indent !important;
margin-right: 6px !important;
}
.ui-tabs-nav {
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
}
/** tabs **/
/**/
.ui-tabs-panel {
border: none;
padding: @tabs-padding !important;
padding-top: @tabs-padding-top !important;
}
.ui-jqgrid-titlebar-close {
display: none !important;
}
@keyframes highlight {
0% {
color: #00f900
}
80% {
color: green
}
100% {
color: black;
}
}
.icon-large {
position: absolute;
z-index: 2;
-webkit-box-shadow: 10px 10px 12px 0 rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 12px 0 rgba(0,0,0,0.75);
box-shadow: 10px 10px 12px 0 rgba(0,0,0,0.75);
background: white;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0 solid #000000;
overflow: hidden;
}
.icon-large img {
width: 12em;
height: 12em;
}
.select-id-quick-edit:hover {
cursor: text;
}
.ui-button-icon-only {
width: 1.8em;
height: 1.8em;
}
.ui-state-active {
/*background: #800000 !important;*/
background: none;
}
.fancytree-node.ui-state-active {
background: inherit !important;
border:0;
margin:0;
padding:0;
}
.iob-list-icon, .instance-image {
width: 18px;
height: 18px;
}
table.fancytree-ext-table>tbody>tr>td,
.iob-list-table {
border: @td-border !important;
border-top: 0 !important; /*xxx*/
white-space: nowrap;
table-layout: fixed;
&:extend(.iob-list-font);
}
table.fancytree-ext-table>thead>tr { /*border: 1px solid #D8D8D8 !important;*/
border:0 !important;
background: @list-header-background !important;
}
table.fancytree-ext-table>tbody>tr>td {
}
table.fancytree-ext-table>tbody>tr>td>table {
height: 100% !important;
}
table.fancytree-ext-table>tbody>tr>td>table>tbody>tr>td {
border: 0;
}
table.iob-list-table>tbody>tr {
height: 25px;
}
.panel-table { // global toolbar
width: 100%;
padding: 0;
border-spacing: 0;
height: 30px;
}
table.panel-table>tbody>tr>td {
padding:0;
margin:0;
}
.toolbar-button {
width: @toolbar-size;
height: @toolbar-size;
border: @td-toolbar-border;
padding: 0;
margin: 0;
}
.toolbar-button-bg {
.toolbar-button;
background: @toolbar-background;
}
.main-toolbar-table {
.toolbar-frame;
width: 100%;
padding: 0;
border-spacing: @toolbar-button-distance 0;
position: relative;
left: -@toolbar-button-distance;
//padding-bottom: 0 !important;
margin-bottom: @main-frame-distance;
}
table.ui-pg-table.main-toolbar-table {
margin-bottom: 0 !important;
}
table.main-toolbar-table > tbody > tr {
white-space: nowrap;
}
table.main-toolbar-table > tbody > tr > td:not(:first-child):last-child {
width: auto !important;
text-align: right;
white-space: nowrap;
font-size: @toolbar-font-size;
font-weight: normal;
}
table.main-toolbar-table > tbody > tr > td > button { //}, table.main-toolbar-table>tbody>tr>td>div {
.toolbar-button !important;
}
table.main-toolbar-table > tbody > tr > td > button:hover { //}, table.main-toolbar-table>tbody>tr>td>div {
.toolbar-button !important;
}
table.main-toolbar-table > tbody > tr > td { //}, table.main-toolbar-table>tbody>tr>td>div {
border: 1px solid transparent;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
width: @toolbar-size;
height: @toolbar-size;
padding-left: 0 !important; //new
}
table.main-toolbar-table > tbody > tr > td:hover { //}, table.main-toolbar-table>tbody>tr>td>div {
border: @toolbar-outer-hover;
}
table.main-toolbar-table > tbody > tr > td:not(:first-child):last-child:hover { //}, table.main-toolbar-table>tbody>tr>td>div {
//border: 1px solid @iob-background;
border: 1px solid transparent;
}
table.main-toolbar-table>tr>td {
padding: 10px !important;
}
table.instance-table>thead>tr {
background: @list-header-background !important;
color: #000;
text-align: left;
font-weight: normal !important;
}
table.instance-table>thead>tr>th {
font-weight: normal;
}
/* column filter header table ***************/
.main-header-table {
border-spacing: 0;
border-collapse: collapse;
height: @toolbar-size;
margin-left: 1px;
width: calc(~'100% - 4px'); //???
background: @list-header-background;
&:extend(.iob-font-12);
// List header
.list-header-input {
width: calc(~"100% - 1px");
line-height: 1.5em;
padding: 0 0 0 5px;
font-family: "Segoe UI",Tahoma,Arial,"Courier New";
font-size: .82rem;
border: 0;
height: 23px;
background: transparent;
}
.list-header-clear {
display: none;
}
th {
font-weight: normal;
}
.list-header-text {
padding-left: 5px;
}
th.filter-active {
background: @toolbar-filter-active-background;
}
.filter-active {
.list-header-input {
width: calc(~"100% - 23px");
}
.list-header-clear {
display: inline-block;
width: 19px;
height: 16px;
background: transparent;
border: 0;
margin-top: 3px;
i {
font-size: 12px;
}
}
}
}
table.main-header-table>tbody>tr,
table.main-header-table>thead>tr {
height: @toolbar-size - 1px !important;
margin-top: 1px;
}
table.main-header-table>tbody>tr>td,
table.main-header-table>thead>tr>td,
table.main-header-table>thead>tr>th {
padding: 0 !important;
border: @td-toolbar-border !important;
text-align: left;
}
.main-header-input-table,
.panel-input-table {
width: 100%;
height: 100%;
padding: 0;
border-spacing: 0;
border-radius: 2px;
font-family: @iob-font;
font-size: @list-font-size;
table-layout: fixed;
}
.main-header-input-table>tbody>tr {
background: @list-header-background;
}
table.main-header-input-table>tbody>tr>td {
vertical-align: middle;
border: 0;
padding: 0; /*?*/
width: 100%; // neu
}
table.main-header-input-table>tbody>tr>td>input:hover,
table.main-header-input-table>tbody>tr>td>select:hover {
width: calc(~'100% - 0px');
outline: @toolbar-outer-hover;
outline-offset: -1px;
}
table.main-header-input-table>tbody>tr>td>select:hover {
width: calc(~'100% - 0px');
background-position-x: calc(~'100% - 4px');
}
table.main-header-input-table>tbody>tr>td>button {
width: 18px;
height: 18px;
margin-top: (@header-height - 18px - 2) / 2;
border: 0 !important;
background: @list-header-background !important;
display: none;
}
table.main-header-input-table>tbody>tr.filter-active>td>button {
display: unset;
}
table.main-header-input-table>tbody>tr.filter-active>td>input,
table.main-header-input-table>tbody>tr.filter-active>td>select,
table.main-header-input-table>tbody>tr.filter-active,
.input-not-empty {
background-color: @toolbar-filter-active-background !important;
}
table.main-header-input-table>tbody>tr>td>select>option {
padding: 0;
margin: 0;
}
table.main-header-input-table>tbody>tr>td>select,
table.main-header-input-table>tbody>tr>td>input,
table.main-header-input-table>tbody>tr>td>span {
font-family: @iob-font;
font-size: @list-font-size;
padding: 0;
border: 0;
height: (@header-height - 2px) !important; //xxxx
}
table.main-header-input-table>tbody>tr>td>input,
table.main-header-input-table>tbody>tr>td>span {
padding-left: @line-indent;
}
table.main-header-input-table>tbody>tr>td>span {
cursor: default;
}
table.main-header-input-table>tbody>tr>td>select {
cursor: pointer;
}
#grid-instances-head>tr:first-child {
cursor: default;
}
table.main-header-input-table>tbody>tr>td>select {
line-height: (@header-height - 2px);
width: calc(~'100% - 1px');
}
table.main-header-input-table>tbody>tr>td>input {
width: calc(~'100% - 1px');
line-height: 1.5em;
}
table.main-header-input-table>tbody>tr>td.ui-search-input>input {
top: unset !important;
}
#gview_grid-states table.main-header-input-table>tbody>tr>td.ui-search-clear>a {
top: 3px !important;
}
/** main-header-input-table end **/
/*******************************************/
.panel-input-table {
width: auto;
height: 20px;
font-size: 14px;
background: @toolbar-background;
border: @td-toolbar-border;
}
.panel-input-table:hover {
border: 1px solid #c0c0c0;
}
.panel-button {
width: @toolbar-size !important;
height: @toolbar-size;
border:0; /*?*/
margin:0; /*?*/
}
.toolbar-icon-text-button {
width: 100% !important;
padding-left: 20px !important;
font-size: 12px;
vertical-align: middle;
padding-top: 3px !important;
padding-right: 5px !important;
}
.list-column-header-filter {
font-size: @list-font-size;
line-height: 1.5em;
width: 100%;
padding: 0;
border: 0;
}
.ui-widget-content {
background: #efefef;
}
.td-button-width, .td-button, .clippy-button, .td-button-placeholder {
width: @td-button-size;
}
.td-button-placeholder {
height: 1px;
display: inline-block;
}
.td-button, .clippy-button {
height: @td-button-size;
margin:0;
position: relative;
bottom: 1px;
z-index: 1;
}
.toolbar-button-table {
width: 100%;
padding: 0;
height: 30px;
}
.fancytree-title {
padding-left: @line-indent !important;
display: inline-flex !important;
align-items: center;
}
.iob-list-font>tbody>tr>td>span {
display: inline-flex;
align-items: center;
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
@corner-radius: unset;
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: @corner-radius;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: @corner-radius;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: @corner-radius;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: @corner-radius;
}
.ui-corner-all {
border: @corner-radius;
}
.fancytree-title {
padding-bottom: 0 !important;
padding-top: 0 !important;
border:0 !important;
}
table.iob-list-font>tbody>tr {
height: 25px !important;
}
table.iob-list-font>tbody>tr>td>table>tbody>tr:hover {
outline: none !important;
}
table.iob-list-font>tbody>tr>td {
}
#inhalte-werden-zentriert {
display: flex;
align-items: center;
justify-content: center;
}
.iob-ellipsis {
width: calc(~'100% - ' @line-indent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.objects-list-table .iob-ellipsis {
padding-left: @line-indent;
padding-right: @line-indent;
}
.iob-toolbar-sep () { // for a td
width: @toolbar-button-distance * 2 !important;
visibility: hidden;
}
.main-toolbar-table>tbody>tr>td.iob-toolbar-sep {
.iob-toolbar-sep;
}
.main-toolbar-table>tbody>tr>td.select-id-custom-buttons {
.iob-toolbar-sep;
}
span.dark-blue {
color: #009;
}
span.dark-green {
color: #090;
}
div#dialog-select-member>div:first-child {
height: calc(~'100vh - 150px') !important;
}
div#dialog-select-member .main-toolbar-table {
margin-bottom: 0 !important;
}
.main-header-input-table select{
padding-left: 5px !important;
font-size: 16px;
line-height: (@header-height - 2px);
background: url("../img/arrow-down-10x10.png") no-repeat right #fff;
-webkit-appearance: none;
background-position-x: calc(~'100% - 3px');
background-size: 10px;
}
span.select-id-cnt {
position: absolute;
top: 6px;
right: 5px;
font-size: smaller;
color: lightslategray;
}
.grid-objects-head,
.grid-objects-head tr.ui-widget-header th {
line-height: 1.6em !important;
background-color: #e0e0e0;
text-align: left;
color: #000;
font-size: @list-font-size !important;
}
// loader
.loader {
width: calc(~"100% - 50px");
text-align: center;
.spinner {
animation: rotator @duration linear infinite;
}
.path {
stroke-dasharray: @offset;
stroke-dashoffset: 0;
transform-origin: center;
stroke: #4285F4;
animation: dash @duration ease-in-out infinite;
//colors (@duration*4) ease-in-out infinite;
}
}
.main-toolbar-table {
position: relative;
.select-id-custom-buttons {
display: inline-block;
}
}