/* file KLEIDER/web/src/pinw/pinw.css */ /* 2020-05-28 Herbert Schiemann */ /* Gesamtes Fenster */ /* ================ */ body { margin: 0px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } body.grey { background-color: #808080; } body.black { color: #FFFFFF; background-color: #000000; } /* keine "Ameisen" */ div:focus { outline: none; } h1, h2, h3 { font-family: sans-serif; } li { padding: 0.5em; } a { color: currentcolor; text-decoration: none; } a:focus, span[x-l]:focus, li[x-l]:focus, p[x-l]:focus { color: #FF1111; outline: none; } a:hover, span[x-l]:hover, li[x-l]:hover, p[x-l]:hover, img[x-l]:hover { color: #1111FF; cursor: pointer; } *.hide { display: none; } /* Kopfzeile */ /* ========= */ /* s. h1-Regeln in https://www.w3.org/TR/CSS2/sample.html */ div#head { display: flex; justify-content: space-between; margin: .67em 0; font-size: 2em; font-family: sans-serif; font-weight: bolder; padding: 0 0.5em; } div#head.hide { display: none; } img#logo { height: 1em; } img#logo:hover { background-color: #8888ff; } div#head span[class~="spacer"] { flex-grow: 1; flex-shrink: 0; } div#head * + * {margin-left: 1em;} /* Hinweis auf maschinelle Übersetzung */ /* =================================== */ div#mt { position: absolute; left: 0; bottom: 0; background-color: #d9cd84; border: solid 1px #000000; } div#mt * { padding: 0.5em; vertical-align: middle; } div#mt span[class~="dblsz"] { font-size: 200%; cursor: pointer; } /* Inhaltsbereich */ /* ============== */ div#d_cont { position: absolute; left: 0; right: 0; bottom: 0; } /* Pinwand */ /* ======= */ div.pinw { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Pinwand-Bild im Hochformat */ div.pinw > img.h { position: absolute; width: 300px; border: solid 2px #FFFFFF; } /* Pinwand-Bild im Querformat */ div.pinw > img.q { position: absolute; width: 420px; border: solid 2px #FFFFFF; } div.pinw > img:focus { border: solid 2px #FF1111; outline: none; } div.fc { position: absolute; border: solid 1px #444444; padding: 3px; width: 350px; color: #000000; background-color: #EEEEEE; } ul.fc { position: absolute; border: solid 1px #444444; margin: 0; padding: 0; width: 300px; color: #000000; background-color: #EEEEEE; list-style-type: none; } .fc:focus { border-color: #FF1111; outline: none; } /* Symbole am Ende einer Verweisliste */ li.sym { display: flex; width: 100%; justify-content: space-around; font-size: 200%; } li.sym span:hover { color: #1111FF; cursor: pointer; } /* Textabschnitt */ /* ============= */ div.snim { padding: 0 0.5em; } /* Verweis-Bilder im Textabschnitt */ img.thb { margin: 5px; } /* https://www.w3.org/TR/CSS2/ui.html#propdef-outline */ img.thb:hover { outline: #1111FF solid 2px; } img.thb:focus { outline: #FF1111 solid 2px; } /* Bilderschau */ /* =========== */ div#d_vw > div { display: flex; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* Bild */ div#d_vw .img { justify-content: space-around; } img#ds_img { /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */ /* Werte: fill, contain, cover, none, scale-down, fill ändert das Seitenverhältnis */ object-fit: contain; width: 98%; height: 98%; } img#ds_img.shrink { object-fit: scale-down; } /* Steuerelemente */ div#d_vw_ctrl { font-size: 160%; flex-direction: row; justify-content: space-between; } div#d_vw_ctrl div { padding: 0 0.5em; } div#d_vw_ctrl div > p { visibility: hidden; } div#d_vw_ctrl div:hover > p { visibility: visible; } /* Verweisfeld */ /* =========== */ div#d_links { position: absolute; right: 1em; background-color: #d9cd84; color: #000000; border-style: solid; border-width: 1px; padding: 1em; } div#d_links ul { margin: 0; padding: 0; list-style-type: none; } div#d_links li { padding: 0; } /* Hinweisfeld */ /* =========== */ div#d_hint{ position: absolute; right: 1em; background-color: #d9cd84; color: #000000; border-style: solid; border-width: 1px; padding: 1em; font-size: 200%; } /* Hilfe */ /* ===== */ div[class~="hlp"] { position: absolute; max-width: 60em; right: 1em; background-color: #d9cd84; color: #000000; border-style: solid; border-width: 1px; padding: 1em; } /* end of file KLEIDER/web/src/pinw/pinw.css */