s4

diff examples/common/default/default.css @ 1002:47b3e770372d

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 diff
     1.1 --- a/examples/common/default/default.css	Sun Dec 04 10:36:33 2022 +0859
     1.2 +++ b/examples/common/default/default.css	Sun Dec 04 16:59:59 2022 +0859
     1.3 @@ -1,6 +1,13 @@
     1.4  /*
     1.5   * Default CSS definitions
     1.6   */
     1.7 +@media print {
     1.8 +    div.blogcomment, div.blogcomment *, div.topmenu,
     1.9 +    table.bloghead button {
    1.10 +	display: none
    1.11 +    }
    1.12 +    a {text-decoration: none;}
    1.13 +}
    1.14  body {background: #eff; margin: 2px; padding: 6px;}
    1.15  h2, h3, hr {clear: both;}
    1.16  *.warn {color: red;}
    1.17 @@ -222,54 +229,56 @@
    1.18  body.grouphome p.groupimg img {
    1.19      max-width: 380px; max-height: 380px;}
    1.20  
    1.21 -div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}
    1.22 -div.noborder {border: 0px; margin: 0;}
    1.23 -div.fold > div {
    1.24 +@media screen {
    1.25 +  div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}
    1.26 +  div.noborder {border: 0px; margin: 0;}
    1.27 +  div.fold > div {
    1.28      xxdisplay: none; max-height: 80%; overflow: auto;
    1.29      height: 0px; opacity: 0; padding: 0 1ex;
    1.30 -}
    1.31 -div.fold input[type="checkbox"]:checked ~ div,
    1.32 -div.fold input[type="radio"]:checked ~ div {
    1.33 +  }
    1.34 +  div.fold input[type="checkbox"]:checked ~ div,
    1.35 +  div.fold input[type="radio"]:checked ~ div {
    1.36      display: block; background: #fadede;
    1.37      height: auto; opacity: 1.0; transition: 1s;
    1.38 +  }
    1.39 +  input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}
    1.40 +  input[type="checkbox"].fold:checked + label + *.folded {
    1.41 +      opacity: 1.0; transition: 2s;
    1.42 +  }
    1.43 +  input[type="checkbox"].fold:checked + label + div.folded {
    1.44 +      display: block; hight: auto; transition: 2s;
    1.45 +  }
    1.46 +
    1.47 +  /* fold2!! */
    1.48 +  div.foldtabs {
    1.49 +      position: relative; height: 5em; margin-top: 1em;
    1.50 +      border-top: 1px solid black; padding-top: 1em;
    1.51 +  }
    1.52 +  div.foldtabs > div {
    1.53 +      position: absolute; top: 2.5em; opacity: 0.0; background: pink;
    1.54 +      margin: 2px; overflow: auto;
    1.55 +  }
    1.56 +  div.foldtabs input[type="radio"] {display: none;}
    1.57 +  div.foldtabs input[type="radio"]:checked + label + div {
    1.58 +      display: block; opacity: 1.0; transition: 0.2s; width: 100%;
    1.59 +      margin: 0; z-index: 2;
    1.60 +  }
    1.61 +  div.foldtabs > label {
    1.62 +      border: 1px outset #ddd; background: #ddd; xbackground: pink;
    1.63 +      border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;
    1.64 +      margin: 0;
    1.65 +      padding: 0.2ex 0.5em; height: 3em;
    1.66 +  }
    1.67 +  div.foldtabs > input:active + label {background: white;}
    1.68 +  div.foldtabs input:checked + label {
    1.69 +      background: pink; border: pink 1px solid; border-bottom-width: 6px;
    1.70 +  }
    1.71 +  div.foldtabs input:checked + label:last-of-type {border-width: 1px;}
    1.72 +  input[type="checkbox"] + label + input[type="submit"] {display: none;}
    1.73 +  input[type="checkbox"]:checked + label + input[type="submit"] {
    1.74 +      display: inline;}
    1.75 +  div.foldtabs p {margin: 0;}
    1.76  }
    1.77 -input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}
    1.78 -input[type="checkbox"].fold:checked + label + *.folded {
    1.79 -    opacity: 1.0; transition: 2s;
    1.80 -}
    1.81 -input[type="checkbox"].fold:checked + label + div.folded {
    1.82 -    display: block; hight: auto; transition: 2s;
    1.83 -}
    1.84 -
    1.85 -/* fold2!! */
    1.86 -div.foldtabs {
    1.87 -    position: relative; height: 5em; margin-top: 1em;
    1.88 -    border-top: 1px solid black; padding-top: 1em;
    1.89 -}
    1.90 -div.foldtabs > div {
    1.91 -    position: absolute; top: 2.5em; opacity: 0.0; background: pink;
    1.92 -    margin: 2px; overflow: auto;
    1.93 -}
    1.94 -div.foldtabs input[type="radio"] {display: none;}
    1.95 -div.foldtabs input[type="radio"]:checked + label + div {
    1.96 -    display: block; opacity: 1.0; transition: 0.2s; width: 100%;
    1.97 -    margin: 0; z-index: 2;
    1.98 -}
    1.99 -div.foldtabs > label {
   1.100 -    border: 1px outset #ddd; background: #ddd; xbackground: pink;
   1.101 -    border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;
   1.102 -    margin: 0;
   1.103 -    padding: 0.2ex 0.5em; height: 3em;
   1.104 -}
   1.105 -div.foldtabs > input:active + label {background: white;}
   1.106 -div.foldtabs input:checked + label {
   1.107 -    background: pink; border: pink 1px solid; border-bottom-width: 6px;
   1.108 -}
   1.109 -div.foldtabs input:checked + label:last-of-type {border-width: 1px;}
   1.110 -input[type="checkbox"] + label + input[type="submit"] {display: none;}
   1.111 -input[type="checkbox"]:checked + label + input[type="submit"] {
   1.112 -    display: inline;}
   1.113 -div.foldtabs p {margin: 0;}
   1.114  
   1.115  /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */
   1.116  input.s4-checkbox {display: none;}	/* Do not show real checkbox */