salix/print/common/css/layout.css

230 lines
3.4 KiB
CSS

.container {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px
}
.columns {
overflow: hidden
}
.columns .size100 {
width: 100%;
float: left
}
.columns .size75 {
width: 75%;
float: left
}
.columns .size50 {
width: 50%;
float: left
}
.columns .size33 {
width: 33.33%;
float: left
}
.columns .size25 {
width: 25%;
float: left
}
.clearfix {
overflow: hidden;
display: block;
clear: both
}
.panel {
position: relative;
margin-bottom: 15px;
padding-top: 10px;
break-inside: avoid;
break-before: always;
break-after: always;
}
.panel .header {
background-color: #FFF;
padding: 2.5px 10px;
position: absolute;
font-weight: bold;
top: 0px;
left: 17.5px;
}
.panel .body {
border: 1px solid #CCC;
overflow: hidden;
padding: 20px
}
.panel .body h3 {
margin-top: 0
}
.panel.dark .header {
border: 1px solid #808080;
background-color: #FFF;
}
.panel.dark .body {
border: 1px solid #808080;
background-color: #c0c0c0
}
.field {
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-top: 1px solid #CCC;
float: left
}
.field span {
border-right: 1px solid #CCC;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: bold
}
.field.square span {
height: 35.4px;
width: 35.4px
}
.emptyField {
border-bottom: 1px dotted grey;
min-height: 1em;
display: block
}
.field.rectangle span {
height: 2em;
width: 8em
}
.pull-left {
float: left !important
}
.pull-right {
float: right !important
}
.vertical-text {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
text-align: center;
font-size: .65em;
right: -108px;
width: 200px;
top: 50%
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.row-oriented, .column-oriented {
text-align: left;
width: 100%
}
.column-oriented {
margin-bottom: 15px
}
.column-oriented td,
.column-oriented th {
padding: 5px 10px
}
.column-oriented thead {
background-color: #e5e5e5
}
.column-oriented thead tr {
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
background-color: #e5e5e5
}
.column-oriented tfoot {
border-top: 2px solid #808080;
}
.column-oriented tfoot tr:first-child td {
padding-top: 20px !important;
}
.column-oriented .description {
border-bottom: 1px solid #DDD;
font-size: 0.8em
}
.panel .row-oriented td, .panel .row-oriented th {
padding: 10px 0
}
.row-oriented > tbody > tr > td {
width: 30%
}
.row-oriented > tbody > tr > th {
padding-left: 30px;
width: 70%
}
.row-oriented .description {
padding: 0 !important;
font-size: 0.6em;
color: #888
}
.line {
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
position: relative;
margin-left: -1px;
margin-right: 1px;
margin-top: 10px;
color: #999;
padding: 5px 0
}
.line .vertical-aligned {
position: absolute;
text-align: center;
width: 100%;
}
.line span {
background-color: #FFF;
padding: 5px
}
.signature {
width: 100%
}
.signature section {
height: 150px
}
.signature p {
margin-right: 50%;
margin-top: 140px
}