kopia lustrzana https://github.com/inkstitch/inkstitch
833 wiersze
16 KiB
CSS
833 wiersze
16 KiB
CSS
@font-face {
|
|
font-family: 'Barlow Condensed';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(barlow_condensed.ttf) format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Barlow';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(barlow.ttf) format('truetype');
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Barlow';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url(barlow-bold.ttf) format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Barlow';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url(barlow-extra-bold.ttf) format('truetype');
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Barlow Condensed';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url(barlow-condensed-bold.ttf) format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Barlow Condensed';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url(barlow-condensed-extra-bold.ttf) format('truetype');
|
|
}
|
|
|
|
@media screen {
|
|
.page {
|
|
margin-top: 20mm !important;
|
|
outline: 1px dotted grey;
|
|
}
|
|
|
|
.header-field::before {
|
|
content: attr(data-label);
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
[contenteditable=true]:empty::after{
|
|
content: attr(data-placeholder);
|
|
color: rgb(200, 200, 200);
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.page {
|
|
page-break-after: always;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
figure.inksimulation div {
|
|
display: none;
|
|
}
|
|
|
|
.ui {
|
|
display: none;
|
|
}
|
|
|
|
#settings-ui {
|
|
display: none !important;
|
|
}
|
|
|
|
#errors {
|
|
display: none !important;
|
|
}
|
|
|
|
.header-field:not(:empty)::before {
|
|
content: attr(data-label);
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
span.logo-instructions {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@page {
|
|
size: auto; /* auto is the initial value */
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: "Barlow", sans-serif;
|
|
font-size: 8pt;
|
|
text-align: center;
|
|
color: rgb(80,80,80);
|
|
margin: 0;
|
|
margin-bottom: 5mm;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page {
|
|
width: 210mm;
|
|
height: 275mm;
|
|
padding: 5mm;
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
vertical-align: text-bottom;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Printing Size */
|
|
.page.a4 {
|
|
width: 205mm;
|
|
height: 292mm;
|
|
padding: 15mm;
|
|
}
|
|
|
|
/* Settings */
|
|
|
|
.ui {
|
|
z-index: 1;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 1em;
|
|
text-align: center;
|
|
background: rgb(255, 255, 255);
|
|
background: rgba(255,255,255, 0.7);
|
|
border-bottom: 1px solid rgb(188, 188, 188);
|
|
border-bottom: 1px solid rgba(129, 129, 129, 0.5);
|
|
box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
|
|
}
|
|
|
|
.ui .header {
|
|
font-weight: bold;
|
|
font-size: 16pt;
|
|
float: left;
|
|
margin: 0.5em 0 0 1em;
|
|
}
|
|
|
|
.ui .buttons {
|
|
float: right;
|
|
margin-right: 50%;
|
|
}
|
|
|
|
.ui button {
|
|
margin: 0.5em;
|
|
background: white;
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
-webkit-transition-duration: 0.4s;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
.ui button.close {
|
|
border: 1px solid rgb(197,5,5);
|
|
|
|
}
|
|
|
|
.ui button.close:hover {
|
|
background: rgb(197,5,5);
|
|
color: white;
|
|
|
|
}
|
|
|
|
.ui button.settings {
|
|
border: 1px solid rgb(243,204,35);
|
|
}
|
|
|
|
.ui button.settings:hover {
|
|
background: rgb(243,204,35);
|
|
color: white;
|
|
}
|
|
|
|
.ui button.print {
|
|
border: 1px solid rgb(50,132,50);
|
|
}
|
|
|
|
.ui button:hover {
|
|
background: rgb(50,132,50);
|
|
color: white;
|
|
}
|
|
|
|
#settings-ui {
|
|
display: none;
|
|
overflow: auto;
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 80%;
|
|
height: 80%;
|
|
margin: 0 auto;
|
|
padding: 2mm 5mm;
|
|
background: rgb(255, 255, 255);
|
|
background: rgba(255,255,255, 0.9);
|
|
border-bottom: 1px solid rgb(188, 188, 188);
|
|
border-bottom: 1px solid rgba(129, 129, 129, 0.5);
|
|
box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
|
|
text-align: left;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
#close-settings {
|
|
position: absolute;
|
|
padding: 0.5em 1em;
|
|
right: 1em;
|
|
top: 1em;
|
|
margin: 0;
|
|
background: #c50505;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#settings-ui fieldset {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#modal-background {
|
|
display: none;
|
|
z-index: 3;
|
|
position: fixed;
|
|
background: black;
|
|
opacity: 0.5;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#modal-content {
|
|
display: none;
|
|
z-index: 4;
|
|
position: fixed;
|
|
width: 50%;
|
|
height: 25%%;
|
|
top: 200px;
|
|
left: 25%;
|
|
background: rgb(255, 255, 255);
|
|
border-bottom: 1px solid rgb(188, 188, 188);
|
|
box-shadow: 0 1px 1px 1px rgb(194, 191, 191);
|
|
text-align: center;
|
|
font-size: 16pt;
|
|
}
|
|
|
|
/* Header */
|
|
|
|
|
|
header {
|
|
width: 100%;
|
|
height: 40mm;
|
|
margin: 0;
|
|
text-align: right;
|
|
display: flex;
|
|
display: -webkit-flex; /* old webkit */
|
|
display: -ms-flexbox; /* IE 10 */
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
}
|
|
|
|
figure.brandlogo {
|
|
height: 30mm;
|
|
width: 30mm;
|
|
margin: 2.5mm;
|
|
}
|
|
|
|
figure.brandlogo label {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 30mm;
|
|
text-align: center;
|
|
}
|
|
|
|
figure.brandlogo img {
|
|
max-width: 30mm;
|
|
max-height: 30mm;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* hide the actual file picker control, since we just want them to click the
|
|
* image instead
|
|
*/
|
|
#logo-picker {
|
|
width: 0px;
|
|
height: 0px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.logo-instructions {
|
|
white-space: nowrap;
|
|
|
|
/* chrome ignores this :(
|
|
text-align: center;
|
|
*/
|
|
|
|
font-size: 10px;
|
|
color: rgb(192, 192, 192);
|
|
}
|
|
|
|
.operator-detailedview figure.brandlogo {
|
|
height: 20mm;
|
|
width: 30mm;
|
|
margin: 0 2.5mm;
|
|
text-align: left;
|
|
}
|
|
|
|
.operator-detailedview figure.brandlogo img {
|
|
max-width: 30mm;
|
|
max-height: 20mm;
|
|
}
|
|
|
|
div.headline {
|
|
display: flex;
|
|
display: -webkit-flex; /* old webkit */
|
|
display: -ms-flexbox; /* IE 10 */
|
|
width: calc(100% - 50mm);
|
|
height: 50%;
|
|
}
|
|
|
|
div.headline h1 {
|
|
font-size: 18pt;
|
|
}
|
|
|
|
div.headline p {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
div.job-details {
|
|
display: flex;
|
|
display: -webkit-flex; /* old webkit */
|
|
display: -ms-flexbox; /* IE 10 */
|
|
width: calc(100% - 50mm);
|
|
height: 50%;
|
|
font-family: "Barlow Condensed", sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
div.job-details > div {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
div.job-details .table {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
div.job-details > div:last-child {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
div.job-details p {
|
|
margin: 0;
|
|
display: table-row;
|
|
}
|
|
|
|
div.job-details p span {
|
|
display: table-cell;
|
|
}
|
|
|
|
div.job-details p span:first-child {
|
|
font-weight: bold;
|
|
padding-right: 1mm;
|
|
}
|
|
|
|
div.job-details p span:last-child {
|
|
text-align: left;
|
|
}
|
|
|
|
div.job-details > div:last-child span {
|
|
text-align: right !important;
|
|
}
|
|
|
|
div.client-detailedview .job-details {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
div.client-detailedview .job-details > div:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.pageTitle {
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.pageTitle h1,
|
|
.pageTitle p {
|
|
margin: 0;
|
|
}
|
|
|
|
.currentDate {
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* client dedailed view header */
|
|
.client-detailedview div.job-details p span:first-child {
|
|
width: 20mm;
|
|
}
|
|
|
|
.client-detailedview div.job-details p span:last-child {
|
|
max-width: 60mm;
|
|
}
|
|
|
|
|
|
/* SVG Preview Image */
|
|
|
|
figure.inksimulation {
|
|
width: 100%;
|
|
height: 175mm;
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
border: 1mm solid grey;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.client-overview-main figure.inksimulation {
|
|
height: 155mm;
|
|
}
|
|
|
|
figure.inksimulation svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
figure.inksimulation figcaption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
line-height: 12pt;
|
|
margin: 2.5mm;
|
|
background: rgba(255, 255, 255, 0.73);
|
|
padding: 5px;
|
|
}
|
|
|
|
figure.inksimulation div {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
figure.inksimulation button {
|
|
border: none;
|
|
background: grey;
|
|
color: white;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-family: "Barlow", sans-serif;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
margin: 0px 1px 0px 1px;
|
|
}
|
|
|
|
input.realistic {
|
|
position: absolute;
|
|
transform: scale(0.7);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
label.realistic {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/* prevents Chrome from sending a double event for the checkbox
|
|
and the containing <button> */
|
|
.realistic {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Color Swatches */
|
|
|
|
.color-palette {
|
|
width: 100%;
|
|
height: 40mm;
|
|
background: #fff;
|
|
padding-top: 1.5mm;
|
|
padding-bottom: 1.5mm;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
display: -webkit-flex; /* old webkit */
|
|
display: -ms-flexbox; /* IE 10 */
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.color-swatch {
|
|
font-family: "Barlow", sans-serif;
|
|
|
|
/* white text on dark colors doesn't print well unless it's bold */
|
|
font-weight: 700;
|
|
font-size: 12pt;
|
|
color: black;
|
|
background: white;
|
|
border: 0.5mm solid white;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.swatch-info {
|
|
text-align: left;
|
|
min-width: 20mm;
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.swatch-info .title {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.color-swatch-svg rect {
|
|
border: 1px solid rgb(192, 192, 192);
|
|
}
|
|
|
|
.signature {
|
|
height: 20mm;
|
|
border: 0.5mm solid rgb(80, 80, 80);
|
|
flex-grow: 1;
|
|
line-height: 30mm;
|
|
text-align: center;
|
|
}
|
|
|
|
/* detailedview color swatch */
|
|
|
|
.color-palette.detailed > div {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.color-palette.detailed .color-info {
|
|
position: absolute;
|
|
top: 2mm;
|
|
left: 45mm;
|
|
}
|
|
|
|
.color-palette.detailed .color-info > div {
|
|
display: table;
|
|
}
|
|
|
|
.color-palette.detailed .color-info p {
|
|
display: table-row;
|
|
}
|
|
|
|
.color-palette.detailed .color-info span {
|
|
display: table-cell;
|
|
padding-right: 5mm;
|
|
}
|
|
|
|
/* Operator Detailed View */
|
|
|
|
.operator-detailedview header {
|
|
height: 25mm;
|
|
}
|
|
|
|
.operator-detailedveiw figure.brandlogo{
|
|
height: 15mm;
|
|
width: 15mm;
|
|
}
|
|
|
|
.operator-detailedveiw figure.brandlogo img {
|
|
max-width: 12.5mm;
|
|
max-height: 12.5mm;
|
|
}
|
|
|
|
.operator-detailedview main {
|
|
height: 230mm;
|
|
}
|
|
|
|
.operator-job-info {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.operator-job-info div {
|
|
display: table-row;
|
|
}
|
|
|
|
div.job-headline {
|
|
display: table-header-group;
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.job-headline p {
|
|
height: 1em;
|
|
}
|
|
|
|
.operator-job-info p {
|
|
height: 15mm;
|
|
max-width: 15mm;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgb(239,239,239);
|
|
}
|
|
|
|
.operator-job-info span {
|
|
display: block;
|
|
}
|
|
|
|
.operator-job-info span.color-index {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
line-height: 15mm;
|
|
width: 10mm;
|
|
}
|
|
|
|
.operator-svg.operator-colorswatch {
|
|
width: 15mm;
|
|
}
|
|
|
|
.operator-svg.operator-preview {
|
|
min-width: 15mm;
|
|
max-width: 20mm;
|
|
height: 15mm;
|
|
}
|
|
|
|
.operator-svg svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: auto;
|
|
max-width: 30mm;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/* Footer */
|
|
|
|
footer {
|
|
width: 100%;
|
|
height: 7mm;
|
|
background: #fff;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
white-space: wrap;
|
|
text-align: center;
|
|
padding-top: 2mm;
|
|
|
|
}
|
|
|
|
footer p.num_pages {
|
|
float: right;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Messages */
|
|
|
|
#errors.show {
|
|
display: block;
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 1em;
|
|
color: red;
|
|
font-family: "Barlow", sans-serif;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
#errors {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Color Swatch Logic */
|
|
/* reference : http://jsfiddle.net/jrulle/btg63ezy/3/ */
|
|
|
|
/* one item */
|
|
.color-swatch:first-child:nth-last-child(n+1),
|
|
.color-swatch:first-child:nth-last-child(n+1) ~ .color-swatch {
|
|
font-size: 12pt;
|
|
height: 100%;
|
|
}
|
|
|
|
/* two items */
|
|
.color-swatch:first-child:nth-last-child(n+2),
|
|
.color-swatch:first-child:nth-last-child(n+2) ~ .color-swatch {
|
|
width: calc(100% / 2);
|
|
}
|
|
|
|
/* three items */
|
|
.color-swatch:first-child:nth-last-child(n+3),
|
|
.color-swatch:first-child:nth-last-child(n+3) ~ .color-swatch {
|
|
font-size: 12pt;
|
|
width: calc(100% / 3);
|
|
}
|
|
|
|
/* four items */
|
|
.color-swatch:first-child:nth-last-child(n+4),
|
|
.color-swatch:first-child:nth-last-child(n+4) ~ .color-swatch {
|
|
font-size: 10pt;
|
|
width: calc(100% / 4);
|
|
}
|
|
|
|
/* five items */
|
|
.color-swatch:first-child:nth-last-child(n+5),
|
|
.color-swatch:first-child:nth-last-child(n+5) ~ .color-swatch {
|
|
font-size: 9pt;
|
|
width: calc(100% / 5);
|
|
}
|
|
|
|
/* six items */
|
|
.color-swatch:first-child:nth-last-child(n+6),
|
|
.color-swatch:first-child:nth-last-child(n+6) ~ .color-swatch {
|
|
font-size: 8pt;
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
/* seven items */
|
|
.color-swatch:first-child:nth-last-child(n+7),
|
|
.color-swatch:first-child:nth-last-child(n+7) ~ .color-swatch {
|
|
width: calc(100% / 4);
|
|
height: calc(100% / 2);
|
|
}
|
|
|
|
/* nine items */
|
|
.color-swatch:first-child:nth-last-child(n+9),
|
|
.color-swatch:first-child:nth-last-child(n+9) ~ .color-swatch {
|
|
width: calc(100% / 5);
|
|
}
|
|
|
|
/* eleven items */
|
|
.color-swatch:first-child:nth-last-child(n+11),
|
|
.color-swatch:first-child:nth-last-child(n+11) ~ .color-swatch {
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
/* thirteen items */
|
|
.color-swatch:first-child:nth-last-child(n+13),
|
|
.color-swatch:first-child:nth-last-child(n+13) ~ .color-swatch {
|
|
width: calc(100% / 5);
|
|
height: calc(100% / 3);
|
|
}
|
|
|
|
/* fourteen items */
|
|
.color-swatch:first-child:nth-last-child(n+14),
|
|
.color-swatch:first-child:nth-last-child(n+14) ~ .color-swatch {
|
|
width: calc(100% / 5);
|
|
}
|
|
|
|
/* sixteen items */
|
|
.color-swatch:first-child:nth-last-child(n+16),
|
|
.color-swatch:first-child:nth-last-child(n+16) ~ .color-swatch {
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
/* nineteen items */
|
|
.color-swatch:first-child:nth-last-child(n+19),
|
|
.color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch {
|
|
height: calc(100% / 4);
|
|
width: calc(100% / 5);
|
|
}
|
|
.color-swatch:first-child:nth-last-child(n+19) .swatch-info,
|
|
.color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch .swatch-info {
|
|
margin-left: -1mm;
|
|
margin-top: -1mm;
|
|
height: calc(100% + 1mm);
|
|
}
|
|
|
|
/* twenty-one items */
|
|
.color-swatch:first-child:nth-last-child(n+21),
|
|
.color-swatch:first-child:nth-last-child(n+21) ~ .color-swatch {
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
/* twenty-five items */
|
|
.color-swatch:first-child:nth-last-child(n+25),
|
|
.color-swatch:first-child:nth-last-child(n+25) ~ .color-swatch {
|
|
width: calc(100% / 7);
|
|
font-size: 6pt;
|
|
}
|
|
|
|
/* twenty-nine items */
|
|
.color-swatch:first-child:nth-last-child(n+29),
|
|
.color-swatch:first-child:nth-last-child(n+29) ~ .color-swatch {
|
|
width: calc(100% / 9);
|
|
}
|
|
|
|
/* thirty-seven items */
|
|
.color-swatch:first-child:nth-last-child(n+37),
|
|
.color-swatch:first-child:nth-last-child(n+37) ~ .color-swatch {
|
|
width: calc(100% / 10);
|
|
}
|
|
|
|
/* fourty items */
|
|
.color-swatch:first-child:nth-last-child(n+40),
|
|
.color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
|
|
width: calc(100% / 12);
|
|
}
|
|
|
|
/* fourty-nine items */
|
|
.color-swatch:first-child:nth-last-child(n+49),
|
|
.color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
|
|
height: calc(100% / 5);
|
|
width: calc(100% / 12);
|
|
}
|