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