Remove always-redundant and now-incorrect log_level setting.
[mkws-moved-to-github.git] / examples / htdocs / prettysimple.css
1 /* General styling */
2 html {
3   height: 100%;
4   margin: 0;
5 }
6 body {
7   display: flex;
8   align-content: space-between;
9   align-items: center;
10   flex-wrap: wrap;
11   height: 100%;
12   width: 100%;
13   max-width: 1100px;
14   margin: auto;
15   font-family: "Open Sans", sans-serif;
16 }
17 a {
18  text-decoration: none;
19  color: black;
20 }
21
22 /* Top level layout */
23 .header {
24   width: 100%;
25   display: flex;
26   margin: .5em;
27   margin-bottom: 1em;
28 }
29 .mkws-switch {
30   margin-left: auto;
31 }
32 .main {
33   width: 100%;
34   display: flex;
35   align-items: flex-start;
36   margin: 1em;
37   margin-bottom: auto;
38 }
39 .forms {
40   width: 100%;
41   margin: 1em;
42 }
43 .mkws-facets {
44   margin-right: 66px;
45   flex: 1;
46 }
47 .results {
48   flex: 3;
49 }
50
51 /* Search form */
52 /* heavily inspired by: */
53 /* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
54 .mkws-search {
55   margin-left: auto;
56   margin-bottom: 0;
57 }
58 .mkws-search-form {
59   display: flex;
60   margin-left: auto;
61   max-width: 30em;
62 }
63 .mkws-search-form .mkws-query {
64   flex: 1;
65   border-right: 0 !important;
66   border-radius: 2px 0 0 2px;
67   font-size: 1.1em;
68 }
69 .mkws-search-form .mkws-button {
70   border-radius: 0 2px 2px 0;
71   background-color: hsla(31, 15%, 50%, 0.1);
72   font: inherit;
73   font-weight: normal;
74 }
75 .mkws-search-form .mkws-query, .mkws-search-form .mkws-button {
76   border: 1px solid hsla(31, 15%, 50%, 0.25);
77   padding: 0.5em 0.75em;
78   margin: 0;
79 }
80 .mkws-ranking {
81   font-family: "Open Sans Light", sans-serif;
82   border-top: none;
83   border-bottom-left-radius: 5em 100%;
84   margin-top: 0;
85   margin-left: auto;
86   font-size: .9em;
87   text-align: right;
88   max-width: 25em;
89 }
90 .mkws-ranking select {
91  font-size: 1.0em;
92  font-family: "Open Sans", sans-serif;
93  border: none;
94  background: none;
95 }
96
97 /* Misc. elements */
98 .mkws-lang {
99   color: gray;
100   font-family: "Open Sans Light", sans-serif;
101 }
102 .mkws-lang > span {
103   color: black;
104   font-family: "Open Sans", sans-serif;
105 }
106 .mkws-switch {
107   color: gray;
108   font-family: "Open Sans Light", sans-serif;
109 }
110 .mkws-switch > a {
111   color: black;
112 }
113 .mkws-pager {
114   width: 100%;
115 }
116 .mkws-current-page {
117   background: gray;
118   border-radius: 3em;
119   padding: 0 .5em;
120   color: white;
121 }
122 .mkws-navi {
123   margin-top: 10px;
124   width: 100%;
125   
126 }
127 .mkws-removable:after {
128   content: " X";
129   color: DarkRed; 
130 }
131 .mkws-removable:hover {
132   text-decoration: line-through;
133 }
134 .mkws-records {
135   width: 100%;
136 }
137
138
139 /* Facets */
140 .mkws-facet {
141   padding-bottom: 1em;
142 }
143 .mkws-facet-title {
144   border-left: 5px solid #7d8187;
145   padding: .5em 10px;
146   text-transform: uppercase;
147 }
148 .mkws-facet:nth-child(1)>.mkws-facet-title {
149   border-color: #2980b9;
150 }
151 .mkws-facet:nth-child(2)>.mkws-facet-title {
152   border-color: #68a863;
153 }
154 .mkws-facet:nth-child(3)>.mkws-facet-title {
155   border-color: #b45b47;
156 }
157
158 .mkws-facet:last-child {
159   padding-bottom: initial;
160 }
161 .mkws-term {
162   display: flex;
163   padding-left: 15px;
164   font-size: .9em;
165 }
166 .mkws-term a {
167   flex: 1;
168   overflow: hidden; 
169   text-overflow: ellipsis;
170   white-space: nowrap;
171 }
172 .mkws-term span {
173   flex: 0 0 min-content;
174   float: right;
175   margin-left: .7em;
176 }
177 .mkws-stat {
178   font-family: "Open Sans Light", sans-serif;
179   text-align: right;
180   font-size: .9em;
181 }
182
183
184 /* Result containers */
185 .mkws-summary {
186   padding: 40px 20px;
187   min-height: 120px;
188   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
189 }
190 .mkws-summary:last-child {
191   border: none;
192 }
193 .mkws-field-data {
194   min-height: 120px;
195   display: flex;
196   flex-direction: column;
197   flex-wrap: wrap;
198   align-items: flex-start;
199   align-content: flex-start;
200   justify-content: space-around;
201 }
202
203 /* Result fields */
204 .mkws-field-data > * {
205   flex 1;
206 }
207 .mkws-field-date {
208   order: 1;
209   font-size: 14px;
210   color: rgba(0, 0, 0, 0.3);
211 }
212 .mkws-field-title {
213   order: 2;
214   font-family: "Open Sans Light", sans-serif;
215   font-size: 24px;
216   line-height: 1.2;
217   letter-spacing: -0.02em;
218   margin-bottom: 4px;
219 }
220 .mkws-field-title-remainder {
221   order: 3;
222   font-family: "Open Sans Light", sans-serif;
223   font-size: 12px;
224   margin-top: -4px;
225   margin-bottom: 4px;
226   overflow: hidden; 
227   text-overflow: ellipsis;
228 }
229 .mkws-field-description {
230   order: 4;
231   font-family: "Open Sans Light", sans-serif;
232   font-size: 18px;
233   line-height: 1.2;
234   max-height: 44px;
235   overflow: hidden;
236 }
237 .mkws-field-author {
238   order: 5;
239   font-weight: bold;
240   font-size: 12px;
241   letter-spacing: 0.1em;
242   text-transform: uppercase;
243 }
244 .mkws-field-thumb {
245   float: left;
246   margin-right: 25px;
247 }
248 .mkws-field-thumb > img {
249   width: 140px;
250   height: 120px;
251   object-fit: contain;
252 }
253 .mkws-details {
254   margin-top: 25px;
255 }
256 .mkws-prev, .mkws-next {
257   text-transform: uppercase;
258   font-size: .75em;
259
260
261
262 /* Responsive */
263 @media screen and (max-width: 1020px) {
264   .mkws-facets {
265     margin-right: 30px;
266   }
267 }
268 @media screen and (max-width: 900px) {
269   .mkws-pager {
270     margin: 0;
271   }
272   .mkws-pager > div {
273     margin-top: 10px;
274   }
275   .main {
276     flex-wrap: wrap;
277   }
278   .mkws-facets {
279     order: 99;
280     width: 100%;
281     margin-top: 40px;
282     margin-right: 0;
283     flex: none;
284   }
285   .results {
286     width: 100%;
287     order 1;
288     flex: none;
289   }
290   .mkws-ranking {
291     width: 100%;
292   }
293   .mkws-search {
294     width: 100%;
295   }
296   .mkws-summary {
297     min-height: 60px;
298     padding: 20px 10px;
299   }
300   .mkws-field-data {
301     min-height: 60px;
302   }
303   .mkws-field-date {
304     font-size: 12px;
305   }
306   .mkws-field-title {
307     font-size: 18px;
308   }
309   .mkws-field-description {
310     font-size: 14px;
311     max-height: 34px;
312   }
313   .mkws-field-author {
314     font-size: 11px;
315   }
316   .mkws-field-thumb {
317     order: -1;
318     margin-right: 10px;
319   }
320   .mkws-field-thumb > img {
321     width: 70px;
322     height: 60px;
323     object-fit: contain;
324   }
325   .mkws-pager > div {
326     float: none !important;
327   }
328 }
329
330 /* Font (from mozilla.org) */
331 @font-face{
332   font-family:'Open Sans Light';
333   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot);
334   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight) format('svg');
335   font-weight:400;
336   font-style:normal
337 }
338
339 @font-face{
340   font-family:'Open Sans Light';
341   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
342   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
343   font-weight:700;
344   font-style:normal
345 }
346
347 @font-face{
348   font-family:'Open Sans Light';
349   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot);
350   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.svg#OpenSansRegular) format('svg');
351   font-weight:400;
352   font-style:italic
353 }
354
355 @font-face{
356   font-family:'Open Sans';
357   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
358   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
359   font-weight:400;
360   font-style:normal
361 }
362
363 @font-face{
364   font-family:'Open Sans';
365   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot);
366   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold) format('svg');
367   font-weight:700;
368   font-style:normal
369 }
370
371 @font-face{
372   font-family:'Open Sans';
373   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot);
374   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic) format('svg');
375   font-weight:400;
376   font-style:italic
377 }
378
379 @font-face{
380   font-family:'Open Sans Extra Bold';
381   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot);
382   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansSemibold) format('svg');
383   font-weight:700;
384   font-style:normal
385 }
386