Show sourcecode
The following files exists in this folder. Click to view.
databas/
dbtestforfattare.php
forms/
funktioner/
grunder/
incl/
include/
index.php
ovn_fn1.php
ovn_fn2.php
ovn_fn3.php
ovn_fn4.php
ovn_fn5.php
ovn_fn6.php
ovn_gr1.php
ovn_gr2.php
ovn_gr3.php
ovn_gr4.php
ovn_gr5.php
ovn_incl1.php
ovningar.css
resultatsidor/
ovningar.css
595 lines UTF-8 Unix (LF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
/* ===== Övningssidorna, ligger i samma terminalfönster som indexsidorna (terminal.css) ===== */
/* Plats ovanför fönstret så att knappraden inte hamnar över det */
body {
padding: 50px 0 40px;
}
/* På smala skärmar ligger knappraden överst på sidan och tar sin egen plats (style.css) */
@media (max-width: 600px) {
body {
padding-top: 0;
}
}
/* Rubriker i markdown-stil, h1 är utskriften från "php ovn_xx.php" */
h1 {
font-size: 24px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--fg);
}
h1::before { content: "# "; color: var(--link); }
h2, h3, h4 {
margin-top: 30px;
margin-bottom: 10px;
}
h2::before { content: "## "; color: var(--link); }
h3::before { content: "### "; color: var(--link); }
h4::before { content: "#### "; color: var(--link); }
/* Tätare textrader, så långa utskrifter (t.ex. loopar) inte blir enorma */
p {
margin: 4px 0;
}
b, strong {
color: var(--hover);
}
.resultat {
display: inline-block;
min-width: 60px;
padding: 6px 14px;
border: 1px solid var(--fg);
color: var(--hover);
}
.resultat::before {
content: "=> ";
color: var(--link);
}
/* Bakgrunden tar färgen från temat istället för hårdkodat grönt.
Bara i <main>, källkoden har egen stil längre ner */
.array, main pre {
padding: 12px 16px;
border-left: 2px solid var(--link);
background-color: color-mix(in srgb, var(--fg) 5%, transparent);
line-height: 1.4;
overflow-x: auto;
}
/* ===== Formulär, i samma stil som knapparna och terminalfönstret ===== */
/* Webbläsarens egna delar (kalenderikoner, sifferpilar, listor som fälls ut)
blir mörka i de mörka temana och ljusa i paper */
main {
color-scheme: dark;
}
[data-theme="paper"] main {
color-scheme: light;
}
/* Två kolumner: kryssrutor och radioknappar i den första, deras etiketter i den andra.
Allt annat (textfält, etiketter ovanför fält, knappar) tar hela bredden */
main form,
main fieldset {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1ch;
align-items: center;
justify-items: start;
}
main form {
margin: 12px 0;
}
main :is(form, fieldset) > * {
grid-column: 1 / -1;
}
/* Etiketten ovanför fältet, i samma färg som prompten */
main label {
display: block;
margin-top: 10px;
color: var(--link);
}
/* Radioknapp eller kryssruta med etiketten direkt efter, på samma rad */
main :is(form, fieldset) > :is(input[type="checkbox"], input[type="radio"]) {
grid-column: 1;
}
main :is(form, fieldset) > :is(input[type="checkbox"], input[type="radio"]) + label {
grid-column: 2;
margin: 0;
padding: 2px 0;
color: var(--fg);
cursor: pointer;
}
/* Etiketter runt kryssrutor och radioknappar står på samma rad som rutan */
main label:has(> input[type="checkbox"], > input[type="radio"]) {
display: flex;
align-items: center;
gap: 1ch;
margin-top: 4px;
color: var(--fg);
cursor: pointer;
}
/* Gruppen tar hela bredden, inte bara så bred som innehållet */
main fieldset {
justify-self: stretch;
margin: 12px 0;
padding: 4px 16px 12px;
border: 1px dashed var(--fg);
}
main legend {
padding: 0 1ch;
color: var(--link);
}
/* Textfält, listor och textrutor: genomskinliga med ram, som terminalfönstret.
Fälttyper som har en egen stil längre ner räknas inte hit */
main input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
main select,
main textarea {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 40ch;
margin: 4px 0 8px;
padding: 4px 8px;
border: 1px solid var(--fg);
border-radius: 0;
background-color: transparent;
color: var(--fg);
caret-color: var(--hover);
font: inherit;
}
main textarea {
max-width: 100%;
min-height: 6em;
resize: vertical;
}
/* Fältet man skriver i får ljusare ram och svagt tonad bakgrund,
istället för webbläsarens blå kant */
main input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]):focus,
main select:focus,
main textarea:focus {
outline: none;
border-color: var(--hover);
background-color: color-mix(in srgb, var(--fg) 5%, transparent);
}
main ::placeholder {
color: color-mix(in srgb, var(--fg) 50%, var(--bg));
}
/* Webbläsarens autofyll ger annars fältet ljusblå bakgrund */
main input:-webkit-autofill {
-webkit-text-fill-color: var(--fg);
box-shadow: 0 0 0 100px var(--bg) inset;
}
/* Felifyllda fält får streckad ram. :user-invalid gäller först när man har
ändrat i fältet eller försökt skicka, så tomma fält är inte röda från början */
main :is(input, select, textarea):user-invalid {
border-style: dashed;
border-color: var(--hover);
}
/* Avstängda fält och deras etiketter */
main :disabled,
main :is(input[type="checkbox"], input[type="radio"]):disabled + label,
main label:has(> :disabled) {
opacity: 0.5;
cursor: not-allowed;
}
/* ===== Listor (<select>) ===== */
/* Reserv för webbläsare som inte kan styla listan som fälls ut, då blir den
åtminstone i temats färger */
main option {
background-color: var(--bg);
color: var(--fg);
}
main optgroup {
color: var(--link);
}
/* Lista där alla val syns på en gång (multiple eller size), valda rader inverteras.
Bakgrunden måste vara en gradient, en vanlig färg skrivs över av webbläsaren */
main select:is([multiple], [size]:not([size="1"])) option {
padding: 2px 8px;
}
main select:is([multiple], [size]:not([size="1"])) option:checked {
background: linear-gradient(var(--fg), var(--fg));
color: var(--bg);
}
/* Nyare Chrome och Edge kan styla listan som fälls ut helt. Den ser då ut som
temalistan under [tema]: "> " vid hover och "* " framför det valda */
@supports (appearance: base-select) {
main select:not([multiple], [size]),
main select:not([multiple], [size])::picker(select) {
appearance: base-select;
}
main select:not([multiple], [size])::picker(select) {
padding: 0;
border: 1px solid var(--fg);
background-color: var(--bg);
color: var(--fg);
}
main select:not([multiple], [size]):open {
border-color: var(--hover);
}
main select:not([multiple], [size])::picker-icon {
color: var(--link);
}
main select:not([multiple], [size]) option {
padding: 3px 12px;
cursor: pointer;
}
/* Bocken som webbläsaren sätter framför det valda, "* " används istället */
main select:not([multiple], [size]) option::checkmark {
display: none;
}
main select:not([multiple], [size]) option::before {
content: "> ";
opacity: 0;
}
main select:not([multiple], [size]) option:is(:hover, :focus-visible) {
outline: none;
background-color: var(--bg);
color: var(--hover);
}
main select:not([multiple], [size]) option:is(:hover, :focus-visible)::before {
opacity: 1;
}
main select:not([multiple], [size]) option:checked::before {
content: "* ";
opacity: 1;
color: var(--link);
}
}
/* ===== Kryssrutor och radioknappar ===== */
/* Egna kryssrutor och radioknappar, webbläsarens egna är vita och följer inte temat.
En ram i temats färg, och en fylld punkt i mitten när den är vald */
main input[type="checkbox"],
main input[type="radio"] {
appearance: none;
display: grid;
place-content: center;
width: 1.1em;
height: 1.1em;
margin: 0;
border: 1px solid var(--fg);
background-color: transparent;
cursor: pointer;
}
main input[type="radio"],
main input[type="radio"]::before {
border-radius: 50%;
}
main input[type="checkbox"]::before,
main input[type="radio"]::before {
content: "";
width: 0.55em;
height: 0.55em;
background-color: var(--hover);
visibility: hidden;
}
main input[type="checkbox"]:checked,
main input[type="radio"]:checked {
border-color: var(--hover);
}
main input[type="checkbox"]:checked::before,
main input[type="radio"]:checked::before {
visibility: visible;
}
/* Etiketten till det valda alternativet lyser upp, likadant vid hover */
main :is(input[type="checkbox"], input[type="radio"]):checked + label,
main :is(input[type="checkbox"], input[type="radio"]) + label:hover,
main label:has(> input:checked),
main label:has(> input[type="checkbox"], > input[type="radio"]):hover {
color: var(--hover);
}
/* Samma fokusram på allt som inte är ett textfält eller en knapp */
main :is(input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"]):focus-visible {
outline: 1px solid var(--hover);
outline-offset: 2px;
}
/* ===== Skjutreglage, färgväljare och filväljare ===== */
/* Skjutreglaget är en tunn ram med ett block som markören i terminalen.
Chrome och Firefox har olika namn på delarna, därför står varje regel två gånger
(en webbläsare hoppar över hela regeln om den inte känner igen ett namn) */
main input[type="range"] {
appearance: none;
display: block;
width: 100%;
max-width: 40ch;
margin: 12px 0;
background: transparent;
cursor: pointer;
}
main input[type="range"]::-webkit-slider-runnable-track {
box-sizing: border-box;
height: 6px;
border: 1px solid var(--fg);
background: transparent;
}
main input[type="range"]::-moz-range-track {
box-sizing: border-box;
height: 6px;
border: 1px solid var(--fg);
background: transparent;
}
/* margin-top centrerar blocket på spåret: (4px innanför ramen - 16px) / 2 */
main input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 8px;
height: 16px;
margin-top: -6px;
border: none;
border-radius: 0;
background-color: var(--fg);
}
main input[type="range"]::-moz-range-thumb {
width: 8px;
height: 16px;
border: none;
border-radius: 0;
background-color: var(--fg);
}
/* Firefox kan fylla spåret fram till blocket */
main input[type="range"]::-moz-range-progress {
height: 6px;
background-color: var(--link);
}
main input[type="range"]:is(:hover, :focus-visible)::-webkit-slider-thumb {
background-color: var(--hover);
}
main input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb {
background-color: var(--hover);
}
/* Färgväljaren: bara färgrutan inuti en ram, utan webbläsarens grå knapp */
main input[type="color"] {
display: block;
width: 4em;
height: 2em;
margin: 4px 0 8px;
padding: 2px;
border: 1px solid var(--fg);
border-radius: 0;
background-color: transparent;
cursor: pointer;
}
main input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
main input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 0;
}
main input[type="color"]::-moz-color-swatch {
border: none;
border-radius: 0;
}
/* Filväljaren: texten med filnamnet, knappen får samma stil som de andra knapparna */
main input[type="file"] {
display: block;
max-width: 100%;
margin: 4px 0 8px;
color: var(--fg);
font: inherit;
cursor: pointer;
}
/* ===== Förlopp och mätare (<progress>, <meter>) ===== */
main progress,
main meter {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 40ch;
height: 1em;
margin: 4px 0 8px;
}
main progress {
appearance: none;
border: 1px solid var(--fg);
background: transparent;
}
main progress::-webkit-progress-bar {
background: transparent;
}
main progress::-webkit-progress-value {
background-color: var(--link);
}
main progress::-moz-progress-bar {
background-color: var(--link);
}
main meter::-webkit-meter-bar {
box-sizing: border-box;
height: 1em;
border: 1px solid var(--fg);
border-radius: 0;
background: transparent;
}
main meter::-webkit-meter-optimum-value {
background: var(--link);
}
/* Sämre värden (utanför low/high) får hover-färgen */
main meter::-webkit-meter-suboptimum-value,
main meter::-webkit-meter-even-less-good-value {
background: var(--hover);
}
main meter::-moz-meter-bar {
background: var(--link);
}
/* <output> visar ett uträknat värde, i samma stil som .resultat */
main output {
color: var(--hover);
}
main output::before {
content: "=> ";
color: var(--link);
}
/* ===== Knappar ===== */
/* Knappar ser ut som [cd ..] och [tema], med inverterade färger vid hover */
main button,
main input[type="submit"],
main input[type="button"],
main input[type="reset"],
main input[type="file"]::file-selector-button {
margin-top: 8px;
padding: 4px 10px;
border: 1px solid var(--fg);
border-radius: 0;
background-color: var(--bg);
color: var(--fg);
font: inherit;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
}
/* Knappen i filväljaren står på samma rad som filnamnet */
main input[type="file"]::file-selector-button {
margin: 0 1ch 0 0;
}
main button:hover,
main button:focus-visible,
main input[type="submit"]:hover,
main input[type="submit"]:focus-visible,
main input[type="button"]:hover,
main input[type="button"]:focus-visible,
main input[type="reset"]:hover,
main input[type="reset"]:focus-visible,
main input[type="file"]:hover::file-selector-button {
outline: none;
background-color: var(--fg);
color: var(--bg);
}
/* ===== Källkoden som visas med [cat source] (kallkod.php) ===== */
/* Nedtonad färg för radnummer, kommentarer och HTML:en runt PHP-koden */
.kallkod {
--dim: color-mix(in srgb, var(--fg) 60%, var(--bg));
margin-bottom: 20px;
}
/* Radnummer till vänster om koden, som "cat -n" */
.kod {
display: flex;
overflow: auto;
}
.kod pre {
margin: 0;
line-height: 1.4;
}
/* Står kvar när koden rullas i sidled, och följer inte med när man kopierar koden */
.radnummer {
position: sticky;
left: 0;
padding-right: 2ch;
background-color: var(--bg);
color: var(--dim);
text-align: right;
user-select: none;
}
/* Bredvid resultatet när det får plats, annars ovanför det */
@media (min-width: 1000px) {
body:has(> .kallkod:not([hidden])) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 700px));
justify-content: center;
align-items: start;
column-gap: 20px;
}
body:has(> .kallkod:not([hidden])) > .terminal {
margin: 0;
}
/* Står kvar när man rullar, så koden syns bredvid även långa resultat.
58px är avståndet till toppen innan man rullat (bodyns marginal + padding).
Med border-box räknas ramen in, så hela fönstret får plats på skärmen
och koden rullar inuti det */
.kallkod:not([hidden]) {
box-sizing: border-box;
grid-column: 2;
grid-row: 1;
position: sticky;
top: 58px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 78px);
}
.kallkod .kod {
min-height: 0;
}
}