X-Git-Url: https://git.plutz.net/?a=blobdiff_plain;f=themes%2Fdefault.css;h=691c43c56a8ad5711b284c60e6605b2c82b8e4bb;hb=1d098440ff588c4843bbdffd2bce807522ccf159;hp=f9fdc799be7c78736e2a65027ee25da817704a37;hpb=7213d4e9f90acaa688a17b110f1c17b1e7ca74d3;p=shellwiki diff --git a/themes/default.css b/themes/default.css index f9fdc79..691c43c 100644 --- a/themes/default.css +++ b/themes/default.css @@ -1,3 +1,19 @@ +/* +# 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 { @@ -17,6 +33,7 @@ header, footer { } footer { + padding-top: .5em; position: absolute; bottom: 0; } @@ -26,16 +43,38 @@ main > :last-child { margin-bottom: 0; } +header h1, header h2, -header .menu { +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 { @@ -61,6 +100,19 @@ main > form#deletepage, 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; @@ -75,16 +127,157 @@ main > form#deletepage, 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 === */ -body[id$="/[edit]"] textarea, -body[id$="/[newpage]"] textarea { +[id$="/[edit]"] main .pagemenu { + margin-bottom: 1em; +} + +.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; min-height: 70vh; 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] { @@ -112,39 +305,58 @@ body[id$="/[newpage]"] textarea { margin-right: 1em; } -[id$="/[attachment]"] input[type=radio].tab ~ ul.attachment.list.tab { +.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; - margin-left: 0; padding-top: 1em; +} +[id$="/[attachment]"] input[type=radio].tab ~ div.tab ul.attachment.list { list-style: none; + margin-left: 0; } -ul.attachment.list.tab li input[name=select], -ul.attachment.list.tab li label.name, -ul.attachment.list.tab li a.name, -ul.attachment.list.tab li input.name { +.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 ~ ul li a.name, -[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ ul li input[name=select], -[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ ul li label.name, -[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ ul li input[name=select], -[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ ul li label.name { +[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 ~ ul li input.name { +[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 ~ button[name=action][value=delete], -[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ button[name=action][value=move], -[id$="/[attachment]"] input[type=radio].tab#tren:checked ~ button[name=action][value=rename] { - display: 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 { @@ -163,3 +375,65 @@ ul.attachment.list.tab li input.name { .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; } + + +.macro.calendar.cal_month { + border: 1pt solid #AAA; + -box-shadow: .25em .25em .75em #AAA; +} +.macro.calendar.cal_month td { + padding: .25em; + vertical-align: top; +} +.macro.calendar.cal_month td > label { + display: block; + background-color: #F4F4F4; + text-align: center; + margin-right: 0; +} +.macro.calendar.cal_month td > ul { + padding: .25em 1em; +} +.macro.calendar.cal_month td > ul > li { + display: block; +}