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