Mercurial > hgrepos > hgweb.cgi > s4
diff examples/common/default/default.css @ 1002:47b3e770372d draft
Auth-ON/OFF button available in all modes
author | HIROSE Yuuji <yuuji@gentei.org> |
---|---|
date | Sun, 04 Dec 2022 16:59:59 +0859 |
parents | bbd5a0c50d5b |
children | 0967a3ef14cf |
line wrap: on
line diff
--- a/examples/common/default/default.css Sun Dec 04 10:36:33 2022 +0859 +++ b/examples/common/default/default.css Sun Dec 04 16:59:59 2022 +0859 @@ -1,6 +1,13 @@ /* * Default CSS definitions */ +@media print { + div.blogcomment, div.blogcomment *, div.topmenu, + table.bloghead button { + display: none + } + a {text-decoration: none;} +} body {background: #eff; margin: 2px; padding: 6px;} h2, h3, hr {clear: both;} *.warn {color: red;} @@ -222,54 +229,56 @@ body.grouphome p.groupimg img { max-width: 380px; max-height: 380px;} -div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} -div.noborder {border: 0px; margin: 0;} -div.fold > div { +@media screen { + div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} + div.noborder {border: 0px; margin: 0;} + div.fold > div { xxdisplay: none; max-height: 80%; overflow: auto; height: 0px; opacity: 0; padding: 0 1ex; -} -div.fold input[type="checkbox"]:checked ~ div, -div.fold input[type="radio"]:checked ~ div { + } + div.fold input[type="checkbox"]:checked ~ div, + div.fold input[type="radio"]:checked ~ div { display: block; background: #fadede; height: auto; opacity: 1.0; transition: 1s; -} -input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} -input[type="checkbox"].fold:checked + label + *.folded { - opacity: 1.0; transition: 2s; -} -input[type="checkbox"].fold:checked + label + div.folded { - display: block; hight: auto; transition: 2s; -} + } + input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} + input[type="checkbox"].fold:checked + label + *.folded { + opacity: 1.0; transition: 2s; + } + input[type="checkbox"].fold:checked + label + div.folded { + display: block; hight: auto; transition: 2s; + } -/* fold2!! */ -div.foldtabs { - position: relative; height: 5em; margin-top: 1em; - border-top: 1px solid black; padding-top: 1em; -} -div.foldtabs > div { - position: absolute; top: 2.5em; opacity: 0.0; background: pink; - margin: 2px; overflow: auto; + /* fold2!! */ + div.foldtabs { + position: relative; height: 5em; margin-top: 1em; + border-top: 1px solid black; padding-top: 1em; + } + div.foldtabs > div { + position: absolute; top: 2.5em; opacity: 0.0; background: pink; + margin: 2px; overflow: auto; + } + div.foldtabs input[type="radio"] {display: none;} + div.foldtabs input[type="radio"]:checked + label + div { + display: block; opacity: 1.0; transition: 0.2s; width: 100%; + margin: 0; z-index: 2; + } + div.foldtabs > label { + border: 1px outset #ddd; background: #ddd; xbackground: pink; + border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; + margin: 0; + padding: 0.2ex 0.5em; height: 3em; + } + div.foldtabs > input:active + label {background: white;} + div.foldtabs input:checked + label { + background: pink; border: pink 1px solid; border-bottom-width: 6px; + } + div.foldtabs input:checked + label:last-of-type {border-width: 1px;} + input[type="checkbox"] + label + input[type="submit"] {display: none;} + input[type="checkbox"]:checked + label + input[type="submit"] { + display: inline;} + div.foldtabs p {margin: 0;} } -div.foldtabs input[type="radio"] {display: none;} -div.foldtabs input[type="radio"]:checked + label + div { - display: block; opacity: 1.0; transition: 0.2s; width: 100%; - margin: 0; z-index: 2; -} -div.foldtabs > label { - border: 1px outset #ddd; background: #ddd; xbackground: pink; - border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; - margin: 0; - padding: 0.2ex 0.5em; height: 3em; -} -div.foldtabs > input:active + label {background: white;} -div.foldtabs input:checked + label { - background: pink; border: pink 1px solid; border-bottom-width: 6px; -} -div.foldtabs input:checked + label:last-of-type {border-width: 1px;} -input[type="checkbox"] + label + input[type="submit"] {display: none;} -input[type="checkbox"]:checked + label + input[type="submit"] { - display: inline;} -div.foldtabs p {margin: 0;} /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */ input.s4-checkbox {display: none;} /* Do not show real checkbox */