git.plutz.net Git - cgilite/blob - common.css

   1 /* ======= GENERIC HTML STYLES ======= */
   2
   3 * {
   4   box-sizing: border-box;
   5   position: relative;
   6   font: inherit;
   7   text-decoration: inherit;
   8   color: inherit; background: transparent;
   9   max-width: 100%;
  10   margin: 0; padding: 0;
  11   border: none;
  12 }
  13
  14 body {
  15   font: normal normal normal medium/1.5em sans-serif;
  16   color: #000; background: #FFF;
  17 }
  18
  19 ul, ol, dl, table, p { margin-bottom: .5em; }
  20 p:only-child { margin-bottom: 0; }
  21
  22 a {
  23   font-style: italic;
  24   text-decoration: underline;
  25   color: #068;
  26 }
  27 a.button {
  28   font-style: inherit;
  29   text-decoration: inherit;
  30   color: inherit;
  31 }
  32
  33 sup { vertical-align: super; }
  34 sub { vertical-align: sub; }
  35 small { font-size: .75em; }
  36 big   { font-size: 1.25em; }
  37 strike, del, s { text-decoration: line-through; }
  38 u {text-decoration: underline; }
  39 i, em { font-style: italic; }
  40 b, strong { font-weight: bolder; }
  41 tt, code, var, samp, kbd { font-family: monospace; }
  42 kbd { font-style: italic; }
  43
  44 ul, ol { margin-left: 1.125em; }
  45 dl dt { font-weight: bolder; }
  46 table th { font-weight: bold; }
  47
  48 li p + ul, li p + ol {
  49   margin-top: -.25em;
  50 }
  51
  52 hr { border-bottom: 1pt solid; }
  53
  54 h1, h2, h3 {
  55   font-weight: bold;
  56   margin-top: .75em;
  57   margin-bottom: .5em;
  58 }
  59
  60 h4, h5, h6, form legend {
  61   font-weight: bolder;
  62   margin-bottom: .25em;
  63 }
  64
  65 h1 { font-size: 1.5em; }
  66 h2 { font-size: 1.125em; }
  67
  68 select, input, button, textarea, a.button {
  69   display: inline-block;
  70   color: #000; background-color: #FFF;
  71   border: .5pt solid;
  72   padding: .25em .75em;
  73   vertical-align: text-bottom;
  74   border: .5pt solid #000;
  75   border-radius: 2pt;
  76 }
  77 select { padding: .375em 0; }
  78 textarea { min-height: 7em; }
  79
  80 input[type=radio], input[type=checkbox] {
  81   vertical-align: baseline;
  82 }
  83 input[type=number] { text-align: right; padding-right: 0; }
  84
  85 button, input[type=button], a.button {
  86   box-shadow: .125em .125em .25em;
  87   cursor: pointer;
  88 }
  89 input[type=radio], input[type=checkbox], label[for] {
  90   cursor: pointer;
  91 }
  92
  93 label { margin-right: .75em; }
  94 input + label {
  95   margin-left: .375em;
  96 }
  97
  98 input.search + button.search {
  99   width: 2.5em;
 100   color: transparent;
 101   background-color: #CCC;
 102   margin-left: -2pt;
 103   border-left: none;
 104   border-radius: 0 2pt 2pt 0;
 105   white-space: nowrap;
 106 }
 107 input.search + button.search:before {
 108   content: '\1f50d';
 109   color: #000;
 110   font-weight: bold;
 111 }
 112
 113 @media print {
 114   @page { margin: 20mm; }
 115
 116   h1 { text-align: center; }
 117
 118   h1, h2, h3, h4, h5, h6, form legend {
 119     page-break-inside: avoid;
 120     page-break-after: avoid;
 121     page-break-before: auto;
 122   }
 123   li { page-break-inside: avoid; }
 124   th, dt { page-break-after: avoid; }
 125 }
 126
 127 /* ======= End Generic Styles ======= */
 128
 129 /* ======= Common Styles ======= */
 130
 131 *[tooltip]:hover:after {
 132   display: block;
 133   position: absolute;
 134   min-width: 12em;
 135   bottom: 100%; left: 50%; transform: translate(-50%, 0);
 136   content: attr(tooltip);
 137   padding: .5em;
 138   color: #000; background-color: #FFC;
 139   border: .5pt solid;
 140   z-index: 1;
 141 }
 142
 143 input[type=radio].tab { display: none; }
 144 input[type=radio].tab + label {
 145   display: table-cell;
 146   padding: .5em 1em;
 147   color: #000; background-color: #EEE;
 148   border: .5pt solid;
 149 }
 150 input[type=radio].tab:checked + label {
 151   background-color: #FFF;
 152   border-bottom: none;
 153   box-shadow: .125em -.125em .125em #888;
 154   z-index: 1;
 155 }
 156 input[type=radio].tab ~ *.tab {
 157   display: none;
 158   width: 100%;
 159   margin-top: -.5pt; padding: .25em .75em;
 160   border: .5pt solid;
 161   border-radius: 0;
 162   box-shadow: .125em .125em .125em #888;
 163 }
 164
 165 /* ======= End Common Styles ======= */