Mercurial > hgrepos > hgweb.cgi > s4
comparison 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 |
comparison
equal
deleted
inserted
replaced
| 1001:bbd5a0c50d5b | 1002:47b3e770372d |
|---|---|
| 1 /* | 1 /* |
| 2 * Default CSS definitions | 2 * Default CSS definitions |
| 3 */ | 3 */ |
| 4 @media print { | |
| 5 div.blogcomment, div.blogcomment *, div.topmenu, | |
| 6 table.bloghead button { | |
| 7 display: none | |
| 8 } | |
| 9 a {text-decoration: none;} | |
| 10 } | |
| 4 body {background: #eff; margin: 2px; padding: 6px;} | 11 body {background: #eff; margin: 2px; padding: 6px;} |
| 5 h2, h3, hr {clear: both;} | 12 h2, h3, hr {clear: both;} |
| 6 *.warn {color: red;} | 13 *.warn {color: red;} |
| 7 *.warnbg {background: red;} | 14 *.warnbg {background: red;} |
| 8 *.hidden {visibility: hidden;} | 15 *.hidden {visibility: hidden;} |
| 220 float: right; margin: 0 1em 1ex; | 227 float: right; margin: 0 1em 1ex; |
| 221 overflow: hidden;} | 228 overflow: hidden;} |
| 222 body.grouphome p.groupimg img { | 229 body.grouphome p.groupimg img { |
| 223 max-width: 380px; max-height: 380px;} | 230 max-width: 380px; max-height: 380px;} |
| 224 | 231 |
| 225 div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} | 232 @media screen { |
| 226 div.noborder {border: 0px; margin: 0;} | 233 div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} |
| 227 div.fold > div { | 234 div.noborder {border: 0px; margin: 0;} |
| 235 div.fold > div { | |
| 228 xxdisplay: none; max-height: 80%; overflow: auto; | 236 xxdisplay: none; max-height: 80%; overflow: auto; |
| 229 height: 0px; opacity: 0; padding: 0 1ex; | 237 height: 0px; opacity: 0; padding: 0 1ex; |
| 230 } | 238 } |
| 231 div.fold input[type="checkbox"]:checked ~ div, | 239 div.fold input[type="checkbox"]:checked ~ div, |
| 232 div.fold input[type="radio"]:checked ~ div { | 240 div.fold input[type="radio"]:checked ~ div { |
| 233 display: block; background: #fadede; | 241 display: block; background: #fadede; |
| 234 height: auto; opacity: 1.0; transition: 1s; | 242 height: auto; opacity: 1.0; transition: 1s; |
| 235 } | 243 } |
| 236 input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} | 244 input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} |
| 237 input[type="checkbox"].fold:checked + label + *.folded { | 245 input[type="checkbox"].fold:checked + label + *.folded { |
| 238 opacity: 1.0; transition: 2s; | 246 opacity: 1.0; transition: 2s; |
| 239 } | 247 } |
| 240 input[type="checkbox"].fold:checked + label + div.folded { | 248 input[type="checkbox"].fold:checked + label + div.folded { |
| 241 display: block; hight: auto; transition: 2s; | 249 display: block; hight: auto; transition: 2s; |
| 242 } | 250 } |
| 243 | 251 |
| 244 /* fold2!! */ | 252 /* fold2!! */ |
| 245 div.foldtabs { | 253 div.foldtabs { |
| 246 position: relative; height: 5em; margin-top: 1em; | 254 position: relative; height: 5em; margin-top: 1em; |
| 247 border-top: 1px solid black; padding-top: 1em; | 255 border-top: 1px solid black; padding-top: 1em; |
| 248 } | 256 } |
| 249 div.foldtabs > div { | 257 div.foldtabs > div { |
| 250 position: absolute; top: 2.5em; opacity: 0.0; background: pink; | 258 position: absolute; top: 2.5em; opacity: 0.0; background: pink; |
| 251 margin: 2px; overflow: auto; | 259 margin: 2px; overflow: auto; |
| 252 } | 260 } |
| 253 div.foldtabs input[type="radio"] {display: none;} | 261 div.foldtabs input[type="radio"] {display: none;} |
| 254 div.foldtabs input[type="radio"]:checked + label + div { | 262 div.foldtabs input[type="radio"]:checked + label + div { |
| 255 display: block; opacity: 1.0; transition: 0.2s; width: 100%; | 263 display: block; opacity: 1.0; transition: 0.2s; width: 100%; |
| 256 margin: 0; z-index: 2; | 264 margin: 0; z-index: 2; |
| 257 } | 265 } |
| 258 div.foldtabs > label { | 266 div.foldtabs > label { |
| 259 border: 1px outset #ddd; background: #ddd; xbackground: pink; | 267 border: 1px outset #ddd; background: #ddd; xbackground: pink; |
| 260 border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; | 268 border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; |
| 261 margin: 0; | 269 margin: 0; |
| 262 padding: 0.2ex 0.5em; height: 3em; | 270 padding: 0.2ex 0.5em; height: 3em; |
| 263 } | 271 } |
| 264 div.foldtabs > input:active + label {background: white;} | 272 div.foldtabs > input:active + label {background: white;} |
| 265 div.foldtabs input:checked + label { | 273 div.foldtabs input:checked + label { |
| 266 background: pink; border: pink 1px solid; border-bottom-width: 6px; | 274 background: pink; border: pink 1px solid; border-bottom-width: 6px; |
| 267 } | 275 } |
| 268 div.foldtabs input:checked + label:last-of-type {border-width: 1px;} | 276 div.foldtabs input:checked + label:last-of-type {border-width: 1px;} |
| 269 input[type="checkbox"] + label + input[type="submit"] {display: none;} | 277 input[type="checkbox"] + label + input[type="submit"] {display: none;} |
| 270 input[type="checkbox"]:checked + label + input[type="submit"] { | 278 input[type="checkbox"]:checked + label + input[type="submit"] { |
| 271 display: inline;} | 279 display: inline;} |
| 272 div.foldtabs p {margin: 0;} | 280 div.foldtabs p {margin: 0;} |
| 281 } | |
| 273 | 282 |
| 274 /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */ | 283 /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */ |
| 275 input.s4-checkbox {display: none;} /* Do not show real checkbox */ | 284 input.s4-checkbox {display: none;} /* Do not show real checkbox */ |
| 276 input.s4-checkbox + label { | 285 input.s4-checkbox + label { |
| 277 position: relative; padding-left: 0.8em; margin-right: 1em; | 286 position: relative; padding-left: 0.8em; margin-right: 1em; |
