first commit
This commit is contained in:
julien
@@ -0,0 +1,605 @@
|
||||
/*
|
||||
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;
|
||||
--write-roomy: 15mm;
|
||||
--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 {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
|
||||
.animal-sheet,
|
||||
.followup-sheet,
|
||||
.health-sheet,
|
||||
.installation-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 {
|
||||
position: relative;
|
||||
height: 22mm;
|
||||
}
|
||||
|
||||
.animal-header { height: 21mm; }
|
||||
|
||||
.animal-header .title,
|
||||
.followup-header .title,
|
||||
.record-header .title,
|
||||
.installation-header .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 30pt;
|
||||
}
|
||||
|
||||
.animal-header .subtitle,
|
||||
.followup-header .subtitle,
|
||||
.record-header .subtitle,
|
||||
.installation-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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.followup-table th,
|
||||
.record-table th,
|
||||
.schedule th {
|
||||
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-roomy);
|
||||
padding: 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 .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: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 8mm;
|
||||
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: flex;
|
||||
gap: 7mm;
|
||||
color: var(--ink);
|
||||
font-size: 8.3pt;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.season-checks .check-box { margin-right: 1.5mm; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600" role="img" aria-label="Emplacement photo">
|
||||
<rect width="1200" height="600" fill="#f7f2ea"/>
|
||||
<rect x="16" y="16" width="1168" height="568" rx="18" ry="18" fill="none" stroke="#d8c5aa" stroke-width="8" stroke-dasharray="24 18"/>
|
||||
<g fill="#98682f" opacity="0.88">
|
||||
<circle cx="600" cy="220" r="44"/>
|
||||
<path d="M520 360c0-52 36-96 80-96s80 44 80 96v28H520z"/>
|
||||
</g>
|
||||
<text x="600" y="470" text-anchor="middle" font-family="Noto Sans, Arial, sans-serif" font-size="38" fill="#6c6862">Photo du gecko</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 611 B |
Reference in New Issue
Block a user