704 lines
12 KiB
CSS
704 lines
12 KiB
CSS
/*
|
|
GeckoBreizh - charte graphique commune
|
|
------------------------------------
|
|
Charte unique conçue pour l'impression papier en A4.
|
|
L'affichage HTML reprend volontairement le rendu imprimé.
|
|
*/
|
|
|
|
:root {
|
|
--ink: #000000;
|
|
--muted: #333333;
|
|
--line: #666666;
|
|
--grid: #555555;
|
|
--table-head: #dedede;
|
|
--radius: 3mm;
|
|
--write-short: 8mm;
|
|
--write-standard: 10mm;
|
|
--font: "Noto Sans", "DejaVu Sans", Arial, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #ffffff;
|
|
color: var(--ink);
|
|
font-family: var(--font);
|
|
}
|
|
|
|
body {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
/* Toutes les fiches sont en A4 portrait, sauf l'éclairage annuel. */
|
|
@page { size: A4 portrait; margin: 0; }
|
|
@page lighting { size: A4 landscape; margin: 0; }
|
|
|
|
.animal-sheet,
|
|
.followup-sheet,
|
|
.health-sheet,
|
|
.installation-sheet,
|
|
.reproduction-sheet,
|
|
.abbreviation-sheet {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
}
|
|
|
|
.animal-sheet,
|
|
.followup-sheet,
|
|
.health-sheet,
|
|
.installation-sheet,
|
|
.abbreviation-sheet {
|
|
padding: 14mm 16mm;
|
|
}
|
|
|
|
.reproduction-sheet { padding: 10mm 16mm; }
|
|
|
|
.lighting-sheet {
|
|
page: lighting;
|
|
width: 297mm;
|
|
height: 210mm;
|
|
padding: 10mm 13mm 9mm;
|
|
}
|
|
|
|
/* ----- Éléments communs ----- */
|
|
.title {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.header-rule {
|
|
margin: 0;
|
|
border: 0;
|
|
border-top: .5mm solid var(--grid);
|
|
}
|
|
|
|
.panel {
|
|
border: .32mm solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0 0 4mm;
|
|
font-size: 10.4pt;
|
|
font-weight: 800;
|
|
letter-spacing: .005em;
|
|
}
|
|
|
|
.section-note {
|
|
margin-left: 2mm;
|
|
color: var(--muted);
|
|
font-size: 8pt;
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
}
|
|
|
|
.label {
|
|
color: var(--muted);
|
|
font-size: 7.7pt;
|
|
font-weight: 500;
|
|
letter-spacing: .01em;
|
|
}
|
|
|
|
.value {
|
|
color: var(--ink);
|
|
font-size: 9.6pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.write-line {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 5mm;
|
|
border-bottom: .27mm solid var(--grid);
|
|
}
|
|
|
|
.meta-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.1mm;
|
|
min-width: 0;
|
|
}
|
|
|
|
.meta-field .label {
|
|
font-size: 8pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ----- En-têtes portrait ----- */
|
|
.animal-header,
|
|
.followup-header,
|
|
.record-header,
|
|
.installation-header,
|
|
.abbreviation-header {
|
|
position: relative;
|
|
height: 22mm;
|
|
}
|
|
|
|
.animal-header { height: 21mm; }
|
|
|
|
.animal-header .title,
|
|
.followup-header .title,
|
|
.record-header .title,
|
|
.installation-header .title,
|
|
.abbreviation-header .title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 30pt;
|
|
}
|
|
|
|
.animal-header .subtitle,
|
|
.followup-header .subtitle,
|
|
.record-header .subtitle,
|
|
.installation-header .subtitle,
|
|
.abbreviation-header .subtitle {
|
|
position: absolute;
|
|
top: 2mm;
|
|
right: 0;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.animal-header .subtitle { font-style: italic; }
|
|
|
|
.animal-header .header-rule,
|
|
.followup-header .header-rule,
|
|
.record-header .header-rule,
|
|
.installation-header .header-rule,
|
|
.abbreviation-header .header-rule {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 1mm;
|
|
left: 0;
|
|
}
|
|
|
|
/* ----- Fiche animal ----- */
|
|
.animal-photo {
|
|
width: 100%;
|
|
height: 88mm;
|
|
margin: 7mm 0 0;
|
|
overflow: hidden;
|
|
border: .28mm solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.animal-photo img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 50%;
|
|
}
|
|
|
|
.identity {
|
|
min-height: 47mm;
|
|
margin-top: 6mm;
|
|
padding: 5mm 6mm 4.5mm;
|
|
}
|
|
|
|
.identity-grid {
|
|
display: grid;
|
|
grid-template-columns: 39mm 1fr;
|
|
row-gap: 2.8mm;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.origin {
|
|
min-height: 75mm;
|
|
margin-top: 5mm;
|
|
padding: 5mm 7mm;
|
|
}
|
|
|
|
.origin-item .name {
|
|
margin: 0;
|
|
font-size: 10pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.origin-item .detail {
|
|
margin: 1.1mm 0 0;
|
|
color: var(--muted);
|
|
font-size: 9.4pt;
|
|
}
|
|
|
|
.origin-item .detail.small { font-size: 8.7pt; }
|
|
|
|
/* Flèche verticale plus régulière et mieux proportionnée. */
|
|
.origin-arrow {
|
|
position: relative;
|
|
width: 12mm;
|
|
height: 8.2mm;
|
|
margin: .7mm 0 .9mm 1.1mm;
|
|
}
|
|
|
|
.origin-arrow::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: .5mm;
|
|
left: 5.7mm;
|
|
width: .35mm;
|
|
height: 4.8mm;
|
|
background: var(--grid);
|
|
border-radius: .2mm;
|
|
}
|
|
|
|
.origin-arrow::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4.25mm;
|
|
left: 4.35mm;
|
|
width: 2.7mm;
|
|
height: 2.7mm;
|
|
border-right: .36mm solid var(--grid);
|
|
border-bottom: .36mm solid var(--grid);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.origin-arrival {
|
|
margin: 0;
|
|
font-size: 9.1pt;
|
|
}
|
|
|
|
/* ----- Tableaux communs ----- */
|
|
.followup-table-wrap,
|
|
.record-table-wrap,
|
|
.schedule-wrap {
|
|
overflow: hidden;
|
|
border: .35mm solid var(--grid);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.followup-table-wrap { margin-top: 6mm; }
|
|
|
|
table.followup-table,
|
|
table.record-table,
|
|
table.schedule {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
table.followup-table { font-size: 8.8pt; }
|
|
table.record-table { font-size: 8.6pt; }
|
|
table.schedule { font-size: 9.5pt; }
|
|
|
|
.followup-table th,
|
|
.record-table th,
|
|
.schedule th {
|
|
background: var(--table-head);
|
|
color: var(--ink);
|
|
font-weight: 800;
|
|
text-align: center;
|
|
border-right: .25mm solid #777777;
|
|
}
|
|
|
|
.followup-table th:last-child,
|
|
.record-table th:last-child,
|
|
.schedule th:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.followup-table td,
|
|
.record-table td,
|
|
.schedule td {
|
|
border-top: .25mm solid var(--grid);
|
|
border-right: .25mm solid var(--grid);
|
|
}
|
|
|
|
.followup-table td:last-child,
|
|
.record-table td:last-child,
|
|
.schedule td:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
/* ----- Fiche de suivi ----- */
|
|
.followup-meta {
|
|
display: grid;
|
|
grid-template-columns: 1fr 34mm;
|
|
gap: 6mm;
|
|
margin-top: 6mm;
|
|
padding: 4.3mm 6mm 4.6mm;
|
|
}
|
|
|
|
.followup-table th {
|
|
height: 12mm;
|
|
padding: 1.8mm 1.2mm;
|
|
font-size: 9pt;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.followup-table td {
|
|
height: var(--write-short);
|
|
padding: 1.1mm 1.5mm;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.followup-table .date { width: 16mm; }
|
|
.followup-table .weight { width: 18mm; }
|
|
.followup-table .food { width: 42mm; }
|
|
.followup-table .moult { width: 16mm; }
|
|
.followup-table .stool { width: 16mm; }
|
|
|
|
.followup-hint {
|
|
margin: 4mm 1mm 0;
|
|
color: var(--muted);
|
|
font-size: 8.2pt;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ----- Installation ----- */
|
|
.installation-meta {
|
|
display: grid;
|
|
grid-template-columns: 1.15fr .75fr 1fr;
|
|
gap: 6mm;
|
|
margin-top: 6mm;
|
|
padding: 4.3mm 6mm 4.6mm;
|
|
}
|
|
|
|
.installation-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5mm;
|
|
margin-top: 6mm;
|
|
}
|
|
|
|
.installation-panel {
|
|
min-height: 68mm;
|
|
padding: 5mm 6mm;
|
|
}
|
|
|
|
.installation-list {
|
|
display: grid;
|
|
gap: 2.5mm;
|
|
}
|
|
|
|
.installation-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .7mm;
|
|
}
|
|
|
|
.installation-row .label { font-size: 8pt; }
|
|
|
|
.installation-notes {
|
|
min-height: 64mm;
|
|
margin-top: 5mm;
|
|
padding: 5mm 6mm;
|
|
}
|
|
|
|
.notes-lines {
|
|
display: grid;
|
|
gap: 5mm;
|
|
margin-top: 1mm;
|
|
}
|
|
|
|
.notes-lines span {
|
|
display: block;
|
|
height: 5mm;
|
|
border-bottom: .24mm solid var(--grid);
|
|
}
|
|
|
|
/* ----- Santé et reproduction ----- */
|
|
.record-meta {
|
|
display: grid;
|
|
gap: 5mm;
|
|
margin-top: 6mm;
|
|
padding: 4.3mm 6mm 4.6mm;
|
|
}
|
|
|
|
.health-meta {
|
|
grid-template-columns: 1.4fr .8fr .65fr;
|
|
margin-top: 5mm;
|
|
}
|
|
|
|
.reproduction-meta {
|
|
grid-template-columns: 1fr 1fr .85fr;
|
|
margin-top: 4mm;
|
|
padding-top: 4mm;
|
|
padding-bottom: 4.2mm;
|
|
}
|
|
|
|
.record-panel { padding: 5mm 6mm; }
|
|
|
|
.health-symptoms {
|
|
min-height: 44mm;
|
|
margin-top: 4mm;
|
|
}
|
|
|
|
.health-context {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6mm;
|
|
margin-bottom: 2mm;
|
|
}
|
|
|
|
.record-inline-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .8mm;
|
|
margin-bottom: 2mm;
|
|
}
|
|
|
|
.record-inline-field .label {
|
|
font-size: 8pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.record-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5mm;
|
|
}
|
|
|
|
.health-grid { margin-top: 3mm; }
|
|
.health-grid .record-panel { min-height: 53mm; }
|
|
|
|
.compact-lines { gap: 4mm; }
|
|
.compact-lines span { height: 4mm; }
|
|
|
|
.record-table-title {
|
|
margin: 0 0 2.1mm 1mm;
|
|
font-size: 10.3pt;
|
|
font-weight: 800;
|
|
letter-spacing: .005em;
|
|
}
|
|
|
|
.record-table th {
|
|
height: var(--write-standard);
|
|
padding: 1.6mm 1.1mm;
|
|
font-size: 8.7pt;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.record-table td {
|
|
height: var(--write-standard);
|
|
padding: 1.1mm;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.health-evolution { margin-top: 3mm; }
|
|
.health-table td { height: var(--write-short); }
|
|
.health-table .health-date { width: 27mm; }
|
|
.health-table .health-weight { width: 24mm; }
|
|
|
|
.health-outcome {
|
|
min-height: 28mm;
|
|
margin-top: 3mm;
|
|
}
|
|
|
|
.reproduction-section { margin-top: 3mm; }
|
|
.reproduction-section .record-table-title { margin-bottom: 1.3mm; }
|
|
|
|
.mating-table td,
|
|
.clutch-table td,
|
|
.hatchling-table td {
|
|
height: var(--write-short);
|
|
}
|
|
|
|
.mating-table .mating-date { width: 24mm; }
|
|
.mating-table .mating-ovulation { width: 25mm; }
|
|
.mating-table .mating-seen { width: 29mm; }
|
|
|
|
.clutch-table .clutch-number { width: 11mm; }
|
|
.clutch-table .clutch-date { width: 22mm; }
|
|
.clutch-table .clutch-eggs { width: 15mm; }
|
|
.clutch-table .clutch-status { width: 22mm; }
|
|
.clutch-table .clutch-temp { width: 19mm; }
|
|
.clutch-table .clutch-hatch { width: 23mm; }
|
|
|
|
.hatchling-table th { height: 8.7mm; }
|
|
.hatchling-table td { padding: .8mm 1mm; }
|
|
.hatchling-table .hatchling-name { width: 23mm; }
|
|
.hatchling-table .hatchling-date { width: 25mm; }
|
|
.hatchling-table .hatchling-weight { width: 19mm; }
|
|
.hatchling-table .hatchling-sex { width: 18mm; }
|
|
|
|
/* ----- Éclairage annuel ----- */
|
|
.lighting-header { text-align: center; }
|
|
|
|
.lighting-header .title { font-size: 26pt; }
|
|
|
|
.lighting-header .subtitle {
|
|
margin-top: 2.3mm;
|
|
font-size: 9.8pt;
|
|
}
|
|
|
|
.lighting-header .header-rule { margin-top: 3.3mm; }
|
|
|
|
.lighting-meta {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr .55fr 1.1fr;
|
|
gap: 6mm;
|
|
margin-top: 4mm;
|
|
padding: 3.2mm 5mm 3.7mm;
|
|
}
|
|
|
|
.lighting-legend {
|
|
margin: 3.5mm 0;
|
|
text-align: center;
|
|
font-size: 10.2pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lighting-legend span + span { margin-left: 10mm; }
|
|
|
|
.schedule th {
|
|
height: var(--write-standard);
|
|
padding: 1.4mm 1mm;
|
|
font-size: 9.5pt;
|
|
}
|
|
|
|
.schedule td {
|
|
height: 8.25mm;
|
|
text-align: center;
|
|
}
|
|
|
|
.schedule td:nth-child(2) { font-weight: 700; }
|
|
.schedule-check { width: 18mm; }
|
|
|
|
.check-box {
|
|
display: inline-block;
|
|
width: 4.4mm;
|
|
height: 4.4mm;
|
|
vertical-align: -0.7mm;
|
|
background: #ffffff;
|
|
border: .35mm solid var(--grid);
|
|
border-radius: .6mm;
|
|
}
|
|
|
|
.lighting-note {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 132mm;
|
|
align-items: center;
|
|
gap: 6mm;
|
|
min-height: 15mm;
|
|
margin-top: 4mm;
|
|
padding: 3mm 5mm;
|
|
}
|
|
|
|
.note-text {
|
|
color: var(--muted);
|
|
font-size: 8.3pt;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.note-text p { margin: 0; }
|
|
|
|
.season-checks {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 5mm;
|
|
color: var(--ink);
|
|
font-size: 8.3pt;
|
|
}
|
|
|
|
.season-checks > span {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.season-checks .check-box {
|
|
flex: 0 0 auto;
|
|
margin-right: 1.5mm;
|
|
}
|
|
|
|
|
|
/* ----- Abréviations ----- */
|
|
.abbreviation-intro {
|
|
margin-top: 6mm;
|
|
padding: 4.5mm 6mm;
|
|
}
|
|
|
|
.abbreviation-intro p {
|
|
margin: 0;
|
|
font-size: 9pt;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.abbreviation-pattern {
|
|
margin-top: 2.2mm;
|
|
font-size: 9.4pt;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.abbreviation-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr .9fr;
|
|
gap: 5mm;
|
|
margin-top: 5mm;
|
|
}
|
|
|
|
.abbreviation-panel {
|
|
padding: 5mm 6mm;
|
|
}
|
|
|
|
.abbreviation-list {
|
|
display: grid;
|
|
}
|
|
|
|
.abbreviation-row {
|
|
display: grid;
|
|
grid-template-columns: 24mm 1fr;
|
|
gap: 4mm;
|
|
align-items: baseline;
|
|
min-height: 9mm;
|
|
padding: 2.1mm 0;
|
|
border-bottom: .24mm solid var(--grid);
|
|
}
|
|
|
|
.abbreviation-row:last-child { border-bottom: 0; }
|
|
|
|
.abbreviation-code {
|
|
font-size: 9.2pt;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.abbreviation-name {
|
|
font-size: 9pt;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.abbreviation-side {
|
|
display: grid;
|
|
gap: 5mm;
|
|
align-content: start;
|
|
}
|
|
|
|
.abbreviation-example {
|
|
display: grid;
|
|
gap: .5mm;
|
|
margin: 0 0 3.2mm;
|
|
font-size: 9pt;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.abbreviation-example:last-child { margin-bottom: 0; }
|
|
|
|
.abbreviation-example strong { font-weight: 800; }
|
|
|
|
.abbreviation-note {
|
|
margin: 3.2mm 0 0;
|
|
color: var(--muted);
|
|
font-size: 8.2pt;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.abbreviation-additions {
|
|
margin-top: 5mm;
|
|
min-height: 54mm;
|
|
padding: 5mm 6mm;
|
|
}
|