git.plutz.net Git - confetti/blob - style.css

   1 * {
   2   font-family: sans-serif;
   3   -moz-box-sizing: border-box;
   4   -webkit-box-sizing: border-box;
   5   box-sizing: border-box;
   6   padding: 0; margin: 0;
   7   font-size: initial;
   8   line-height: 1.25em;
   9   z-index: 0;
  10 }
  11
  12 input, textarea, select, select * {
  13   font-size: .875em;
  14   padding: .125em .125em;
  15 }
  16 input, select {
  17   height: 1.5em;
  18   vertical-align: bottom;
  19 }
  20 button { padding: 0 .5em; }
  21
  22 body {
  23   background: #EEE;
  24   margin: 0;
  25   padding: 0;
  26   padding-top: 2.5em;
  27   position: absolute;
  28   min-height: 100%;
  29   width: 100%;
  30   padding-bottom: 2em;
  31 }
  32 .NAVIGATION {
  33   position: fixed;
  34   top: 0;
  35   display: inline-block;
  36   border-style: none solid solid solid;
  37   border-width: 0 1px 1px 1px;
  38   border-radius: 0 0 4px 4px;
  39   margin: 0 2em;
  40   padding: .5em 1ex;
  41   background: #FFF;
  42   z-index: 1;
  43 }
  44 .NAVIGATION label,
  45 .NAVIGATION a {
  46   color: #008;
  47   border: solid 1px #BBF;
  48   margin: .5em .5ex .25em .5ex;
  49   padding: .2em 3ex .2em 3ex;
  50   background: #EFF;
  51 }
  52 .NAVIGATION label:hover,
  53 .NAVIGATION a:hover {
  54   border-width: 2px 1px;
  55   background: #F3FFFF;
  56 }
  57
  58 #CONFIGURE        label[for="navigationconfig"] { display: none; }
  59 #CONFIGURE:target label[for="navigationconfig"] { display: inline; }
  60
  61 .NAVIGATION input#navigationconfig { display: none; }
  62 .NAVIGATION input + form.config {
  63   position: static;
  64   display: none;
  65 }
  66
  67 .NAVIGATION .config a { display: block; }
  68 .NAVIGATION .config a:hover { border-width: 1px 2px; }
  69 .NAVIGATION input:checked + form.config { display: block; }
  70 .NAVIGATION .config input[type=text],
  71 .NAVIGATION .config button {
  72   font-size: .875em;
  73   line-height: 1.5em;
  74   height: 1.75em;
  75   padding: 0 .25em;
  76   vertical-align: bottom;
  77   border: 1px solid #000;
  78   background-color: #FFF;
  79 }
  80 .NAVIGATION .config input[type=text] {
  81   margin: .25em 0 0 .375em;
  82   border-right: none;
  83   width: 70%;
  84 }
  85 .NAVIGATION .config button {
  86   min-width: 2.5em;
  87   text-align: center;
  88   max-width: 30%;
  89 }
  90 .NAVIGATION .config button[value=del] {
  91   background: #FCC;
  92 }
  93
  94 #message {
  95   display: block;
  96   position: fixed;
  97   top: 0; width: 100%;
  98   margin: 0; padding: 1em;
  99   text-align: center;
 100   font-weight: bold;
 101   background-color: #FAA;
 102   border: 1px solid #000;
 103   border-style: none none solid none;
 104 }
 105
 106 .trailbtn { display: none; }
 107 .trailbtn + .trailbox { display: none; }
 108 .trailbtn:checked + .trailbox { display: inline-block; }
 109 .trailbtn:checked + .trailbox + .trailbtn { display: block; }
 110 .trailbtn:checked + .trailbox + .trailbtn:before {
 111    display: block; content: '+';
 112    width: 3ex; text-align: center;
 113    margin-top: .25em; padding: .25em 0;
 114    background-color: #FFF;
 115    border-width: 1px; border-style: solid;
 116 }
 117 .trailbtn:checked + .trailbox + .trailbtn:checked,
 118 .trailbtn:checked { display: none; }
 119
 120 #footer {
 121   width: 100%;
 122   background-color: #FFF;
 123   border-top: 1px solid #BBF;
 124   margin: 0; padding: .5em 2em;
 125   position: absolute; bottom: 0;
 126 }