/*
* Aktieoversigten — /aktier.html og /aktier/.html.
*
* Indlæses betinget fra lego/_header.php ($page_aktier_css), samme mønster som
* miner.css: filen bruges to steder og skal ikke koste en forespørgsel på hver
* eneste artikel. Farver og radius kommer fra blue.css' :root, så siden ikke
* får sin egen palet, der langsomt driver fra resten af sitet.
*/
:root {
/* Gevinst og tab.
*
* EGNE tokens og ikke --up/--down fra blue.css. De to er pasteller, lavet
* som BAGGRUND bag mørk tekst i et badge. Her skal farven bære betydning
* som tekst på hvidt, og der forsvinder en pastel. Samme kulør, mørkere
* og mere mættet, præcis som miner.css gør det med sine stregfarver. */
--aktie-op: oklch(0.52 0.14 155);
--aktie-ned: oklch(0.54 0.17 25);
/* Søjlen i fordelingen. Skal kunne ses bag tekst uden at gøre den svær
at læse, derfor lav mætning. */
--aktie-soejle: oklch(0.93 0.04 220);
}
/* ---- Nøgletal øverst ----------------------------------------------------- */
.aktie-tal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0.75rem;
margin: 1.5rem 0;
}
.aktie-tal-kort {
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
}
.aktie-tal-navn {
display: block;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.aktie-tal-vaerdi {
display: block;
margin-top: 0.3rem;
font-family: var(--font-display);
font-size: 1.6rem;
line-height: 1.15;
color: var(--foreground);
}
.aktie-tal-under {
display: block;
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--muted-foreground);
}
/* ---- Kildelinje ---------------------------------------------------------- */
/*
* Datoen er ikke pynt.
*
* Kurserne hentes én gang i døgnet fra en gratis kilde uden aftale bag. Holder
* kilden op med at svare, står tallene stille, og så er datoen det eneste, der
* afslører det. Derfor står den ved tallene og ikke nede i en fodnote.
*/
.aktie-kilde {
margin: 0.25rem 0 1.5rem;
font-size: 0.88rem;
color: var(--muted-foreground);
}
/* ---- Tabellen ------------------------------------------------------------ */
/*
* Vandret rulning i EGEN beholder.
*
* Tabellen har seks kolonner og kan ikke klemmes ned på en telefon uden at
* blive ulæselig. Uden hylsteret ville hele siden rulle sidelæns, og så
* flytter brødteksten sig, hver gang man ser på tabellen.
*/
.aktie-hylster {
overflow-x: auto;
margin: 1rem 0 2rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
}
.aktie-tabel {
width: 100%;
border-collapse: collapse;
font-size: 0.94rem;
}
.aktie-tabel th,
.aktie-tabel td {
padding: 0.6rem 0.85rem;
text-align: right;
white-space: nowrap;
border-bottom: 1px solid var(--border);
}
.aktie-tabel th {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--muted-foreground);
background: var(--muted);
}
.aktie-tabel tr:last-child td {
border-bottom: 0;
}
/* Navnekolonnen er den eneste, der læses som tekst. Resten er tal og skal
stå på linje til højre, så størrelsesordener kan sammenlignes lodret. */
.aktie-tabel th:first-child,
.aktie-tabel td:first-child {
text-align: left;
white-space: normal;
min-width: 13rem;
}
.aktie-tabel td:first-child a {
font-weight: 600;
color: var(--foreground);
text-decoration: none;
}
.aktie-tabel td:first-child a:hover {
text-decoration: underline;
}
.aktie-under {
display: block;
font-size: 0.82rem;
font-weight: 400;
color: var(--muted-foreground);
}
.aktie-op { color: var(--aktie-op); }
.aktie-ned { color: var(--aktie-ned); }
.aktie-mangler {
font-style: italic;
color: var(--muted-foreground);
}
/* Summen nederst. Tykkere streg over, så øjet kan se hvor tallene holder op
og resultatet begynder. */
.aktie-tabel tfoot td {
padding-top: 0.75rem;
font-weight: 700;
border-top: 2px solid var(--border);
background: var(--muted);
}
/* ---- Fordeling ----------------------------------------------------------- */
.aktie-fordeling {
margin: 1rem 0 2rem;
}
.aktie-linje {
position: relative;
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
}
.aktie-linje:last-child { border-bottom: 0; }
/*
* Søjlen tegnes som en baggrund BAG teksten og ikke som et element ved siden
* af. På den måde kan navnet fylde hele bredden på en telefon, uden at søjlen
* bliver klemt ned til nogle få pixels og holder op med at kunne aflæses.
*/
.aktie-linje::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--andel, 0%);
background: var(--aktie-soejle);
border-radius: 0 var(--radius) var(--radius) 0;
z-index: 0;
}
.aktie-linje > * { position: relative; z-index: 1; }
.aktie-linje-navn { font-weight: 600; }
.aktie-linje-tal {
white-space: nowrap;
color: var(--muted-foreground);
}
/* ---- Papirets egen side -------------------------------------------------- */
.aktie-retur {
display: inline-block;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.aktie-fakta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
margin: 1.25rem 0 2rem;
}
.aktie-note {
margin: 1.5rem 0;
padding: 0.9rem 1.1rem;
border-left: 3px solid var(--border);
background: var(--muted);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.92rem;
color: var(--muted-foreground);
}
.aktie-note p { margin: 0 0 0.5rem; }
.aktie-note p:last-child { margin-bottom: 0; }
.aktie-h2 {
margin: 2rem 0 0.5rem;
font-family: var(--font-display);
font-size: 1.35rem;
}
/* Portrættet af papiret. Smallere end tabellerne ved siden af: linjerne skal
kunne læses, og en tekstlinje på tværs af hele 4xl-bredden bliver til noget,
øjet taber undervejs. */
.aktie-omtale {
max-width: 42rem;
font-size: 1.02rem;
line-height: 1.65;
}
.aktie-omtale p { margin: 0 0 1rem; }
.aktie-omtale ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.aktie-omtale li { margin-bottom: 0.35rem; }