139 lines
2.5 KiB
CSS
139 lines
2.5 KiB
CSS
@page {
|
|
margin: 0;
|
|
size: A4 landscape;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'D-DIN Bold';
|
|
src: url("https://media.k-space.ee/fonts/D-DIN-Bold.woff2") format("woff2");
|
|
src: url("https://media.k-space.ee/fonts/D-DIN-Bold.woff") format('woff');
|
|
src: url("https://media.k-space.ee/fonts/D-DIN-Bold.ttf") format('ttf');
|
|
src: url("https://media.k-space.ee/fonts/D-DIN-Bold.otf") format('otf');
|
|
src: url("D-DIN-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
body {
|
|
margin: 0
|
|
}
|
|
|
|
.sheet {
|
|
display: table;
|
|
margin: 0;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
page-break-after: always;
|
|
padding: 10mm;
|
|
padding-top: 5mm;
|
|
width: 297mm;
|
|
height: 209mm;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* Put everything in the correct location */
|
|
|
|
.logo {
|
|
display: table-row;
|
|
}
|
|
|
|
.logo img {
|
|
height:35mm;
|
|
pointer-events: none;
|
|
float:initial;
|
|
}
|
|
|
|
.main {
|
|
font-family: "D-DIN Bold", sans-serif;
|
|
display: table-row;
|
|
font-size: 25mm;
|
|
width: 100%;
|
|
height: 12.5cm;
|
|
max-height: 12.5cm;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.subline {
|
|
font-family: "D-DIN Bold", sans-serif;
|
|
display: table-row;
|
|
font-size: 12mm;
|
|
text-align: center;
|
|
}
|
|
|
|
.editable {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
-webkit-user-modify: read-write;
|
|
-moz-user-modify: read-write;
|
|
user-modify: read-write;
|
|
border: none;
|
|
outline: none;
|
|
|
|
-ms-word-break: break-all;
|
|
|
|
/* Non standard for webkit */
|
|
word-break: break-word;
|
|
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/** Screen **/
|
|
|
|
@media screen {
|
|
|
|
body {
|
|
background: #eee
|
|
}
|
|
|
|
.sheet {
|
|
background: white;
|
|
box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
|
|
margin: 20mm auto;
|
|
}
|
|
|
|
.sheet, .sheet::before, .sheet::after {
|
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
|
|
border: 1px solid #bbb;
|
|
}
|
|
|
|
.sheet::before, .sheet::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 297mm;
|
|
height: 210mm;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.sheet::before {
|
|
right: 15px;
|
|
top: 0;
|
|
transform: rotate(-1deg);
|
|
z-index: -1;
|
|
}
|
|
|
|
.sheet::after {
|
|
top: 5px;
|
|
right: -5px;
|
|
transform: rotate(1deg);
|
|
z-index: -2;
|
|
}
|
|
|
|
}
|
|
|
|
@media print {
|
|
|
|
body {
|
|
width: 297mm
|
|
}
|
|
|
|
.sheet {
|
|
overflow: hidden;
|
|
/* Make input caret transparent */
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #000;
|
|
}
|
|
|
|
}
|