/* css/print.css Styles für Ausdrucke der Unterlagen*/ /* ----- Index ----- - Seite - Typo - Spalte 1 - Foto - Kontaktdaten - Spalte 2 - Name / Überschrift - Kurzprofil - Berufspraxis / Schulbildung - Spalte 3 - Kreisbalken - Führerschein - Anlage mit Detailtexten */ /* Seite */ /* Format festlegen, Ränder entfernen */ @page { size: A4 horizontal; margin: 0 0 0 0; } /* Header und Footer entfernen */ @page :header :footer{ display:none; } /*Nicht für den Druck bestimmte Elemente ausblenden !important um JS Veränderungen zu überschreiben*/ .noprint{ display:none !important; } /*Erste Seite*/ #main { width: 210mm; height: 297mm; position: absolute; } /* ----- Typo ----- */ /*Schriftart für Überschriften laden*/ @font-face { font-family: "Mouse"; src: url("../font/MouseMemoirs-Regular.ttf"); } /*Standartwerte für Dokument festsetzen*/ body { align-items:center; background: #fff; font: 10pt Helvetica, Arial, sans-serif; color: #000; height: 100%; margin: 0px; overflow: hidden; } /*Überschrift für den Namen*/ h1 { font-family: Mouse, Helvetica, Arial, sans-serif; font-size: 50pt; font-weight:bold; margin-bottom: 0; } /*Überschrift mit Mouse Font*/ h2 { font-family: Mouse, Helvetica, Arial, sans-serif; text-align:left; font-size: 19pt; margin-top:-5mm; } /*Namen von Arbeitgebern und Schulen*/ h3 { margin-bottom:-5mm; } /*Berufsbezeichnungen*/ h4 { margin-top:5mm; margin-bottom:1mm; } /*Links*/ a:link, a:active, a:visited{ text-decoration: none; font-weight:bold; color:#000; } /*Absätze*/ p { margin: 30pt 0; } /* ----- Spalte 1 ----- */ /*Linke Spalte*/ #column1{ float:left; width: 60mm; height:100%; display:block !important;/*falls gedruckt bevor eingeblendet*/ position: absolute; background-color:#216477; color-adjust:exact; /*Hintergrund und Schirftfarbe drucken*/ -webkit-print-color-adjust:exact; } /*Foto positionieren*/ .photo{ display:block; width:60mm; height:90mm; } /*Foto nachladen, damit es für Screen nicht geladen werden muss*/ .photo img{ display:block; content: url('../media/foto_small.jpg'); background-image: url('../media/foto_small.jpg'); background-size: cover; width:60mm; height:90mm; color-adjust:exact; /*Foto auch für IE und Edge*/ -webkit-print-color-adjust:exact; } /*Kontaktdaten positionieren*/ .contactbox{ color:#fff; visibility:visible !important;/*falls gedruckt bevor eingeblendet*/ margin-left: 10mm; margin-top: 8mm; } .contactbox h2{ margin-top:0; margin-bottom:3mm; } .contacttext{ vertical-align:middle; } /*Icons vor Kontaktdaten*/ .contacttext img{ height:4mm; width:4mm; margin-top:1mm; -webkit-filter: invert(1); filter: invert(1); } /*bei mehrzeiligen einrücken*/ .contacttext div{ margin-left:7.5mm; margin-top:-5mm; } /* Links als Text stylen */ .contacttext a:link, .contacttext a:active, .contacttext a:visited{ text-decoration: none; color:#fff; } /* ----- Spalte 2 ----- */ /*Hauptteil positionieren*/ #column2{ margin-top:48mm; width: 130mm; height:100%; margin-left: 70mm; float:left; display:block !important;/*falls gedruckt bevor eingeblendet */ } /*Name als Überschirft positionieren*/ .namebox{ left: 65mm; top: -5mm; position:absolute; text-align:center; width:70mm; font-size: 10pt; } /*Titel*/ .worktitle{ font-size: 16pt; margin-top:-2mm; } .worktitle:before{ content: "♠"; padding-right:1mm; } .worktitle:after{ content: "♠"; padding-left:1mm; } /*Kurzprofil*/ .textbox{ margin-bottom:10mm; text-align:justify; } .textbox h2 { font-family: Mouse, Helvetica, Arial, sans-serif; text-align:left; font-size: 19pt; margin-bottom:4mm; } /*Berufspraxis / Schulbildung*/ .tablebox{ margin-bottom:10mm; } .table{ margin-bottom:5mm; } /*Datumsfeld*/ .tabledate{ float:left; width: 14mm; border-top:1px solid #444; border-bottom:1px solid #444; text-align:center; margin-right:8mm; } /*Text hinter Datum*/ .tabletext{ text-align:justify; margin-left: 22mm; } /* ----- Spalte 3 ----- */ /*Kreisbalken und Führerschein positionieren*/ #column3{ display:block !important; /* immer anzeigen, auch wenn durch JS verändert */ left:0; top:135mm; position:absolute; width: 60mm; color: #fff; color-adjust:exact; /*Schriftfarbe weiß lassen*/ -webkit-print-color-adjust:exact; } /*Block für Kreisbalken - Breite ist Grundlage für die Größe der Kreisbalken*/ .circleblock{ padding-bottom:0; width:60mm; } /* Überschrift für Kreisbalkenblock */ .circletitle{ width:60mm; } .circletitle h2{ text-align:center; margin-top:0; margin-bottom:2mm; color: #fff; } /* Feld für die Anordnung Kreisbalken*/ .circles { margin-top:1.5mm; margin-bottom: -1.5mm; } /*Anordnung der einzelnen Kreisbalken*/ .circle { width: 25mm; height: 13mm; margin: 1.6mm 1.6mm 5.3mm; display: inline-block; position: relative; text-align: center; color: #fff; } /* Canvas für die eigentlichen Balken */ .circle canvas { vertical-align: middle; -webkit-filter: grayscale(1) brightness(2) contrast(3); /* Farbige Balken in Schwarz / Weiß für den Druck */ filter: grayscale(1) brightness(2) contrast(3); } /*Namenstag der Kreisbalken positionieren und formatieren */ .circle a, .circle a:hover, .circle a:active, .circle a:visited { hyphens: auto; position: absolute; top: 50%; left: calc(50% - 1.6mm); transform: translate(calc(-50% + 1.6mm), -50%); width: 25mm; vertical-align:middle; text-align: center; line-height: 11pt; font-size: 10pt; color:#fff; text-decoration:none; background:rgba(33, 100, 119, 0.75); /*Texthintergrund für bessere Lesbarkeit */ text-shadow: 1pt 1pt 0 #216477, -1pt -1pt 0 #216477, 1pt -1pt 0 #216477, -1pt 1pt 0 #216477, 1pt 1pt 0 #216477; /*Außenlinie für bessere Lesbarkeit*/ } /*Führerschein */ .licence{ font-size:9pt; text-align:justify; padding-left:5mm; padding-right:5mm; margin-top:5mm; } /* ----- Anlage mit Detailtexten ----- */ /* Auf Folgeseiten positionieren */ #popoverblock { page-break-before:always; display:block !important; /*immer anzeigen, auch wenn durch JS verändert */ width: 170mm; float:left; margin-left: 30mm; } #popover { hyphens: auto; display:block !important; /*immer anzeigen, auch wenn durch JS verändert */ } /*Detailtexte Blocksatz mit automatischem Zeilen- und verhidnertem Seitenumbruch */ .popcont{ display:block !important; /*immer anzeigen, auch wenn durch JS verändert */ text-align:justify; page-break-inside:avoid; /*kein Seitenumbruch im Text*/ } /* Abstand am oberen Seitenrand */ #popcont_kp, #popcont_tb, #popcont_bbs{ padding-top: 20mm; page-break-before:always; } /*Platz sparen, weniger Abstand unter den Überschriften*/ .popcont h2{ margin-bottom: -2mm; } /*Format der Hashtags*/ .hashtags{ color:#888; font-style:italic; color-adjust:exact; /*Schriftfarbe grau lassen*/ -webkit-print-color-adjust:exact; }