322 lines
10 KiB
CSS
322 lines
10 KiB
CSS
/*common elements*/
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
height: 100%;
|
|
}
|
|
body, table, tr, td, th, input, select, textarea, button, form, ul, li, p {
|
|
font-size: 11px;
|
|
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
|
|
color:black;
|
|
}
|
|
form {margin: 0;padding:0;}
|
|
p {margin: 0.5em;}
|
|
table {border-collapse: collapse;}
|
|
img {border: none; margin: 0; vertical-align: middle;}
|
|
a, a:link, a:visited {color: #111111; text-decoration: underline;}
|
|
a:hover {color: #ff7600; text-decoration: underline;}
|
|
|
|
|
|
/* form elements */
|
|
input {color: black; padding: 0 0.3em; }
|
|
input:read-only {color:#555; background-color:#f0f0f0;}
|
|
input:disabled {color:#555; background-color:#f0f0f0;}
|
|
select:disabled {color:#555;}
|
|
select option[disabled] { color:#ddd;}
|
|
|
|
.detail .td input[type="text"]:disabled {border:1px solid #aaa; color:#555;}
|
|
.textbox-disabled {display:inline-block; border: 1px solid #aaa; color:#555; background-color:#f0f0f0; padding:.1em;}
|
|
|
|
/*layout*/
|
|
|
|
div.vspacer {height:5px;}
|
|
|
|
ul#mainmenu {
|
|
list-style-type:none;
|
|
padding:0;
|
|
margin:0;
|
|
display:block;
|
|
width:100%;
|
|
}
|
|
ul#mainmenu li {
|
|
text-align:right;
|
|
vertical-align:baseline;
|
|
padding:.2em 15px .2em 0 ;
|
|
margin:.3em 0;
|
|
background: url('../img/sarrow.gif') center right no-repeat;
|
|
font-size:120%;
|
|
font-weight:normal;
|
|
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
|
|
line-height: 1.1em;
|
|
}
|
|
ul#mainmenu li a{/*display:block;*/color:#cde;text-decoration:none;}
|
|
ul#mainmenu li a:hover{text-decoration:underline;}
|
|
ul#mainmenu li.selected {color: /*#4682b4;*/ #fa6 /*#00f*/;}
|
|
ul#mainmenu li.menu-item-ext {background: url('../img/external.gif') center right no-repeat;}
|
|
ul#mainmenu li.menu-item-noaction {background: none; color: #777;}
|
|
ul#mainmenu li.menu-title {
|
|
color: #111;
|
|
background:none white;
|
|
margin:.5em 0 0 0;
|
|
/*font-weight: bold;*/
|
|
/*border:1px solid #ccc;*/
|
|
}
|
|
|
|
.page {display:table; table-layout: fixed; width:100%; height:100%;}
|
|
|
|
.page-main {display:table-row; height:100%;}
|
|
|
|
.page-footer {display:table-row; height:1px;}
|
|
|
|
.menu {display:table-cell; width:150px; padding:0 0 0 .5em; background-color: #012; -border:1px solid red;}
|
|
|
|
.content {display:table-cell; height:100%; vertical-align:top; padding: 3px;}
|
|
|
|
.header {display:block; /*background:url('../img/portlet_dot.gif') center left no-repeat; padding-left:33px;*/ line-height: 21px; font-family: Verdana, Tahoma, sans-serif;}
|
|
|
|
.control-bar {display:table; width:100%; color:/*#559*/white; /*border:1px solid #ccc;*/ height:19px; }
|
|
.header .control-bar a:link, .header .control-bar a:visited {color:white; padding: .2em .5em;}
|
|
.header .control-bar a:hover {background:white;color:#f90; padding: .2em .5em;}
|
|
|
|
.title {display:table-cell; padding:1px 12px; vertical-align:middle; font-size:110%; background-color:#aaa/*#ccc*//*rgb(117,147,156)*/; /*color:#fa6;*/ border: 1px solid #bbb; border-right:none;}
|
|
.title b {color:#026;}
|
|
|
|
.main-controls {display:table-cell; padding:0 7px; text-align:right; vertical-align: middle; background-color:#aaa/*rgb(117,147,156)*/; border: 1px solid #bbb; border-left:none;}
|
|
|
|
.footer {height:21px; line-height: 21px; background-color:#e0e0e0; border:1px solid #bbb; text-align: right; vertical-align: middle; padding:0 3px;}
|
|
|
|
|
|
.table {display:table;}
|
|
.tr {display:table-row;}
|
|
.td, .th {display:table-cell; padding: 0 0.5em; vertical-align:top;}
|
|
|
|
|
|
.detail {
|
|
display:table;
|
|
width:100%;
|
|
margin: 3px 0;
|
|
border:1px solid #ddd;
|
|
border-collapse: collapse;
|
|
}
|
|
.detail .tr{
|
|
line-height: 1.5em;
|
|
}
|
|
.detail .th {
|
|
display:table-cell;
|
|
text-align:right;
|
|
background-color:#e0e0e0;
|
|
padding:0.35em 0.5em;
|
|
border:none;
|
|
/*color: #5f5f5f;*/
|
|
font-weight:normal;
|
|
vertical-align:top;
|
|
/*border:1px solid red;*/
|
|
}
|
|
.detail .td {
|
|
display:table-cell;
|
|
background-color:#e7e7e7;
|
|
padding:0.2em 0.5em;
|
|
border:1px solid #ddd;
|
|
vertical-align:baseline;
|
|
}
|
|
.detail .td input, .detail .td select, .detail .td img, .detail .td button, .detail .td div, .detail .td span {
|
|
vertical-align: baseline;
|
|
margin: 0 0.3em;
|
|
}
|
|
|
|
.detail .td label {
|
|
vertical-align: baseline;
|
|
margin: 0 0.3em 0 0;
|
|
line-height:normal;
|
|
}
|
|
|
|
.detail .td input[type="checkbox"] {
|
|
vertical-align: top; margin: 0 0 0 0.3em;
|
|
}
|
|
|
|
/*.detail .td input[type="text"] {
|
|
width: 97%;
|
|
}*/
|
|
|
|
.detail .td textarea {
|
|
color: black;
|
|
width: 97%;
|
|
margin-left: 0.2em;
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
/***hack*/
|
|
.detail .td a img {vertical-align:text-bottom;}
|
|
|
|
.filter {background-color: #f7f7f7;}
|
|
.disabled, tr.disabled td, tr.disabled th {color: #888;}
|
|
.plate {background-color:#f0f0f0; padding:.1em; border:1px solid #ddd;}
|
|
|
|
button, .button, .content a.button:link {
|
|
background: #fafafa;
|
|
-background: -webkit-linear-gradient(top, #fafafa 0%, #f4f4f4 40%,#e5e5e5 100%);
|
|
background:-webkit-linear-gradient(top, #dde 0%, #cde 40%,#bcd 100%);
|
|
border: 1px solid #aad;
|
|
padding: 1px 10px;
|
|
color: #black;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 1px #ddd;
|
|
}
|
|
|
|
button:disabled, .button:disabled, .maincontrol:disabled {
|
|
background: #fafafa;
|
|
background: -webkit-linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
|
|
border-color: #aaa;
|
|
color: #999;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:not(:disabled):hover,
|
|
.button:not(:disabled):hover,
|
|
.maincontrol:not(:disabled):hover
|
|
{
|
|
background: #fefefe;
|
|
background: -webkit-linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
|
|
box-shadow: 0 1px 3px rgba(7, 7, 7, 0.35);
|
|
border: 1px solid #aaa;
|
|
color: #ff7600;
|
|
}
|
|
|
|
button:not(:disabled):active, .button:not(:disabled):active {
|
|
background: #f4f4f4;
|
|
background: -webkit-linear-gradient(top, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
|
|
box-shadow: inset 0 1px 3px rgba(7, 7, 7, 0.35);
|
|
}
|
|
|
|
button.maincontrol {
|
|
/*background-color:#c3c82f;
|
|
background:-webkit-linear-gradient(top, #cd6 0%, #cd6 40%,#bc5 100%);*/
|
|
-background-color:#6fa0f0;
|
|
background-color:#6fa0f0;
|
|
background:-webkit-linear-gradient(top, #dde 0%, #cde 40%,#bcd 100%);
|
|
color: black;
|
|
}
|
|
|
|
button.maincontrol:hover {
|
|
|
|
}
|
|
|
|
|
|
/*не совсем аккуратно, при нажатии выглядит чуть иначе, чем кнопка*/
|
|
.content button a, .content button a:link, .content button a:visited {color: #790; text-decoration:none; cursor:default;}
|
|
.content button:hover a, .content button:active {color: #ff7600; text-decoration:none; cursor:default;}
|
|
.content button.maincontrol a, .content button.maincontrol a:link,.content button.maincontrol a:visited {color: black;}
|
|
.content button.maincontrol:hover a, .content button.maincontrol:active a {color: #ff7600;}
|
|
|
|
.submitnew {
|
|
background-image:url('../img/new.gif');
|
|
width:13px; height:13px; border:none; padding:0; color:transparent; cursor:pointer;
|
|
}
|
|
.submitsave {
|
|
background-image:url('../img/save.gif');
|
|
width:14px; height:14px; border:none; padding:0; color:transparent; cursor:pointer;
|
|
}
|
|
.submitdel {
|
|
background-image:url('../img/del.gif');
|
|
width:13px; height:13px; border:none; padding:0; color:transparent; cursor:pointer;
|
|
}
|
|
.submitminus {
|
|
background-image:url('../img/minus.gif');
|
|
width:13px; height:13px; border:none; padding:0; color:transparent; cursor:pointer;
|
|
}
|
|
|
|
.content a, .content a:link, .content a:visited {color: #1111ee; text-decoration: none;}
|
|
.content a:hover {color: #ff7600; text-decoration: underline;}
|
|
.content h4 {margin-block-end: .5em;}
|
|
.content i {color:#555;}
|
|
|
|
.cell {border: 1px solid #ddd; width:100%; padding: 0.2em;}
|
|
|
|
.l, td.l, th.l{text-align: left;}
|
|
.r, td.r, th.r{text-align: right;}
|
|
.c, td.c, th.c{text-align: center;}
|
|
.nw {white-space: nowrap;}
|
|
.b {font-weight:bold;}
|
|
.i {font-style:italic;}
|
|
.wide {min-width:100%}
|
|
.wh100 {width:100%; height:100%;}
|
|
.table {display:table}
|
|
.tcell {display:table-cell}
|
|
.mid {vertical-align:middle} /*используется для заполнения ячейки таблицы якорем a href*/
|
|
|
|
.err {color: red;}
|
|
.warn {color: #f80;}
|
|
|
|
a.up {background: url('../img/up.gif') center right no-repeat; padding-right: 7px;}
|
|
a.add {background: url('../img/add.gif') center right no-repeat; width:13px; height:13px; display:inline-block;}
|
|
a.edit {background: url('../img/edit.gif') center right no-repeat; width:13px; height:13px; display:inline-block;}
|
|
a.view {background: url('../img/view.gif') center right no-repeat; width:13px; height:13px; display:inline-block;}
|
|
a.del {background: url('../img/del.gif') center right no-repeat; width:13px; height:13px; display:inline-block;}
|
|
|
|
|
|
/* worktable classes */
|
|
|
|
table.worktable {border-collapse:separate; border-spacing:0; border-left:1px solid #ddd;}
|
|
|
|
table.worktable th,
|
|
table.worktable td {
|
|
border-bottom: thin solid #ddd;
|
|
border-right: thin solid #ddd;
|
|
}
|
|
table.worktable thead th,
|
|
table.worktable thead td {
|
|
box-shadow: 0 -1px 0 0 #ddd;
|
|
}
|
|
table.worktable thead {
|
|
top: 0;
|
|
left: 0;
|
|
position: sticky;
|
|
z-index: 1;
|
|
}
|
|
|
|
table.worktable td p {margin:0;}
|
|
|
|
table.worktable thead tr td, table.worktable tr th{padding: 3px; background-color: #999;}
|
|
|
|
table.worktable tr {height: 1.7em; background-color: white;}
|
|
|
|
table.worktable tr td {padding:0.1em 0.3em; height:2em;}
|
|
|
|
table.worktable tr:hover, table.worktable tr td:hover {background-color:#e5e5e5;}
|
|
|
|
table.worktable th {font-weight:500; color:white;}
|
|
|
|
/*double borders - not tested with border-collapse:separate*/
|
|
table.worktable tbody tr td.lbd,
|
|
table.worktable thead tr td.lbd
|
|
{border-left: double #ccc;}
|
|
|
|
table.worktable tbody tr td.rbd,
|
|
table.worktable thead tr td.rbd
|
|
{border-right: double #ccc;}
|
|
|
|
table.worktable tbody tr td.tbd,
|
|
table.worktable thead tr td.tbd,
|
|
table.worktable tbody tr.tbd td,
|
|
table.worktable thead tr.tbd td
|
|
{border-top: double #ccc;}
|
|
|
|
table.worktable tbody tr td.bbd,
|
|
table.worktable thead tr td.bbd,
|
|
table.worktable tbody tr.bbd td,
|
|
table.worktable thead tr.bbd td
|
|
{border-bottom: double #ccc;}
|
|
|
|
table.worktable tr.hist {background-color: #f6f6f6;}
|
|
table.worktable tr.hist:hover, table.worktable tr.hist:hover td, table.worktable tr.comment:hover{background-color:#efefef;}
|
|
table.worktable tr.hist td.marked {background: #ddf5c0;}
|
|
table.worktable tr.hist:hover td.marked{background-color:#d0f0b9;}
|
|
|
|
|
|
@media print {
|
|
#mainmenu, .menu, .page-footer, .control-bar, .noprint {display:none;}
|
|
}
|
|
|
|
|
|
|