X-Git-Url: https://git.plutz.net/?a=blobdiff_plain;f=themes%2Fdefault.css;h=e7d5091a088600cfba92110b369af6aaed44a833;hb=81d216bea30f87c783d9ed427a1bd3150b41708f;hp=864d966ab2959692ae5569289fa39b28c5e20da0;hpb=e9681856866f504bccfdd074c11f9d60524940c4;p=shellwiki diff --git a/themes/default.css b/themes/default.css index 864d966..e7d5091 100644 --- a/themes/default.css +++ b/themes/default.css @@ -1,40 +1,80 @@ -html { - min-height: 100%; -} +/* +# Copyright 2022 - 2023 Paul Hänsch +# +# Permission to use, copy, modify, and/or distribute this software for any +# purpose with or without fee is hereby granted, provided that the above +# copyright notice and this permission notice appear in all copies. +# +# THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES +# WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +# MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY +# SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +# WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +# ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR +# IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. +*/ + +html { min-height: 100%; } body { position: absolute; width: 100%; min-height: 100%; -} - -footer { - position: absolute; - bottom: 0; + padding-bottom: 6em; + background-color: #EEE; + font-size: 12pt; } header, footer { + background-color: #FFF; box-shadow: 0 0 .75em; width: 100%; z-index: 1; - background-color: inherit; } -header :last-child, main :last-child { +footer { + padding-top: .5em; + position: absolute; + bottom: 0; +} + +header > :last-child, +main > :last-child { margin-bottom: 0; } -header h2, header .menu { +header h1, +header h2, +header .menu, +footer .menu { display: inline-block; } -header .menu { - list-style: none; -} +header .menu, +footer .menu { list-style: none; } -header .menu li { +header .menu > ul > li, +header .menu > ol > li, +footer .menu > ul > li, +footer .menu > ol > li { display: inline-block; margin-right: .5em; + vertical-align: top; +} + +header .menu.dropdown li > ul, +header .menu.dropdown li > ol { + display: none; + position: absolute; + background-color: #FFF; + margin: 0; + padding: .25em .5em; + padding-left: 1.5em; + box-shadow: 0 0 .75em; +} +header .menu.dropdown li:hover > ul, +header .menu.dropdown li:hover > ol { + display: table; } main .pagemenu { @@ -48,11 +88,330 @@ main .pagemenu li { display: inline-block; margin-right: 1em; } -main .pagemenu li a { - color: #FFF; +main .pagemenu li a { color: #FFF; } + +main article, +main > form#renamepage, main > form#movepage, +main > form#deletepage, +[id$="/[attachment]"] main > form { + margin: 1em; + padding: .125em 1em 1em 1em; + box-shadow: .25em .25em .75em; + background-color: #FFF; +} + +main > form#deletepage label[for=delsub] { + text-decoration: underline; +} +main > form#deletepage input#delsub:checked + label + ul li.delsub { + text-decoration: line-through; +} + +main > form#movepage input, +main > form#renamepage input { + min-width: 30em; + max-width: 100%; +} + +[id$="/[revision]"] main .revisions, +[id$="/[attachment]"] main > .attachment.list { + margin: 1em; + padding: 1em 2em; +} +[id$="/[revision]"] main .revisions:before, +[id$="/[attachment]"] main > .attachment.list:before { + content: ''; + position: absolute; + top: 0; bottom: 0; left: 0; right: 0; + background-color: #FFF; + box-shadow: .25em .25em .75em; +} + +main code { + padding: .125em .25em; + background-color: #EEE; +} +main pre { + padding: .5em .5em; + background-color: #EEE; + max-width: 100%; + overflow-x: auto; +} +main pre > code { + padding: 0; +} + +li.task > input[type=checkbox][disabled], +li.task > p > input[type=checkbox][disabled] { + display: none; +} +li.task > p:first-child { display: inline-block;} + +-li.task:before { font-size: 1.125em; } +li.task.pending:before { content: '\274f '; color: #222; } +li.task.partial:before { content: '\25d4 '; color: #880; } +li.task.negative:before { content: '\2718 '; color: #800; } +li.task.done:before { content: '\2714 '; color: #080; } +li.task.unsure:before { content: '? ' ; color: #880; font-weight: bold; padding-left: 2pt; } + +/* Alternative Check Symbols, all from "geometric shapes" block */ /* +-li.task.pending:before { content: '\25a1 '; color: #222; } +-li.task.partial:before { content: '\25d4 '; color: #880; } +-li.task.negative:before { content: '\25a8 '; color: #800; } +-li.task.done:before { content: '\25a3 '; color: #080; } +*/ + +h1 { text-align: center; } +.center { text-align: center; } + +form.newpage, form.search { + margin-bottom: 1em; +} +form.search { text-align: center; } +input.search, input[type="search"] { + min-width: 50%; + max-width: 80%; + max-width: calc(100% - 2.5em); +} +ul.searchresults, ol.searchresults { + margin-left: auto; margin-right: auto; + width: 100%; max-width: 540pt; + text-align: center; +} + +table { + min-width: 50%; + margin-left: auto; + margin-right: auto; +} + +@media(min-width: 540pt) { + .half { + display: inline-block; + width: 50%; + padding-right: 1em; + vertical-align: top; + } + .right { + float: right; + clear: both; + width: 33%; + margin: .25em 0 .5em 1em; + } + .left { + float: left; + clear: both; + width: 33%; + margin: .25em 1em .5em 0; + } + .left .left, .left .right, + .right .left, .right .right, + .half .left, .half .right { + float: none; + width: 100%; + margin: .25em 0 .5em 0; + } + section.left > :first-child, + section.right > :first-child { + float: none; + margin: 0 0 .5em 0; + } + .left > section:first-child > :first-child, + .right > section:first-child > :first-child { + margin-top: 0; + } + .left table, .right table, .half table { + width: 100%; + } + + .left input.search, .left input[type="search"], + .right input.search, .right input[type="search"] { + width: 80%; + width: calc(100% - 2.5em); + } + ul.searchresults, ol.searchresults { + min-width: 50%; + } +} + + +/* === Editor === */ + +[id$="/[edit]"] main .pagemenu { + margin-bottom: 1em; } -body.editor textarea { +.tab[name=edithelp] ~ .tab.editor textarea, +.tab[name=edithelp] ~ .tab.syntax, +.tab[name=edithelp] ~ .tab.attach, +.tab[name=edithelp] ~ .tab.transl { + background-color: #FFF; + min-height: 20em; min-height: 50vh; +} + +.tab[name=edithelp] ~ .tab.editor textarea { width: 100%; - min-height: 20em; + font-family: monospace; + font-size: inherit; +} + +.tab[name=edithelp] ~ .tab.attach { + padding-top: 1em; + padding-left: 7em; +} +.tab[name=edithelp] ~ .tab.attach .aimg img { + float: left; + max-height: 4em; + margin-left: -6em; +} + +.tab[name=edithelp] ~ .tab.transl { + font-family: monospace; + white-space: pre; +} + +.tab[name=edithelp]#editor:checked ~ .tab.editor, +.tab[name=edithelp]#syntax:checked ~ .tab.syntax, +.tab[name=edithelp]#attach:checked ~ .tab.attach, +.tab[name=edithelp]#transl:checked ~ .tab.transl { + display: block; +} + + +/* === Attachments === */ + +.attachment.list button[name=delete] { + font-size: .75em; + line-height: 1.25em; + margin-right: 1.25em; +} +.attachment.list .size, +.attachment.list .date { + font-size: .875em; + top: -.25em; +} + +.attachment.list .name:after { + white-space: pre-line; + content: "\0a"; +} +.attachment.list .size { + margin-right: 1em; +} + +.revisions li { margin: 1em 0; } +.revisions li span.hash, +.revisions li span.date { + margin-right: 1em; +} + +.revisions .diff span { + font-family: monospace; + display: block; + white-space: pre; + line-height: 1.375em; +} +.revisions .diff span.linenum { color: #D60; } +.revisions .diff span.linedel { color: #A00; } +.revisions .diff span.lineadd { color: #0A0; } +.revisions .diff span.linenote { color: #AAA; } + + +[id$="/[attachment]"] input[type=radio].tab ~ div.tab { + display: block; + padding-top: 1em; +} +[id$="/[attachment]"] input[type=radio].tab ~ div.tab ul.attachment.list { + list-style: none; + margin-left: 0; +} + +.tab ul li input[name=select], +.tab ul li label.name, +.tab ul li a.name, +.tab ul li input.name { + display: none; +} + +[id$="/[attachment]"] input[type=radio].tab#tview:checked ~ div.tab ul li a.name, +[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ div.tab ul li input[name=select], +[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ div.tab ul li label.name, +[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li input[name=select], +[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li label.name { + display: inline; +} +[id$="/[attachment]"] input[type=radio].tab#tren:checked ~ .tab ul li input.name { + display: block; +} + +[id$="/[attachment]"] label[for=moveto], [id$="/[attachment]"] input#moveto, +[id$="/[attachment]"] button[name=action] { display: none; } + +[id$="/[attachment]"] .upload button[name=action] { display: inline-block; } +[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ div.tab button[name=action][value=delete], +[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab label[for=moveto], +[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab input#moveto, +[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab button[name=action][value=move], +[id$="/[attachment]"] input[type=radio].tab#tren:checked ~ div.tab button[name=action][value=rename] { + display: inline; +} + + +/* === Macros === */ + +.macro.toc { + display: inline-block; + list-style-position: inside; + margin-left: 0; + background-color: #DDD; + background-color: rgba(0, 0, 0, .125); + padding: .75em 1em; + border: 1pt solid; + border-radius: 2pt; +} +.macro.toc li.h2 { margin-left: 1.25em; } +.macro.toc li.h3 { margin-left: 2.5em; } +.macro.toc li.h4 { margin-left: 3.75em; } +.macro.toc li.h5 { margin-left: 5em; } +.macro.toc li.h6 { margin-left: 6.25em; } + + +.macro.gallery { + text-align: center; + margin: 2em 0; + padding: .5em .125em; + background-color: #444; + clear: both; +} +.macro.gallery img { + max-height: 9em; + margin: 0 .25em; +} + + +ul.macro.tag { padding: 0; } +.macro.tag li.tag { + display: inline-block; + color: #FFF; + background-color: #333; + font-size: .875em; + padding: 0 .5em; + margin: .25em .25em 0 0; + border-radius: .375em; +} + + +.macro.changes td .date { + display: block; + font-size: .75em; +} +.macro.changes td.outdated, +.macro.changes td.current, +.macro.changes td.missing { + text-align: center; } +.macro.changes th { background-color: #EEF; } +.macro.changes td { background-color: #DFF; } +.macro.changes td.outdated { background-color: #FFD; } +.macro.changes td.current { background-color: #DFD; } +.macro.changes td.missing { background-color: #FDD; }