jcs.org
Website content for chibug.org
1/* application css */
2html {
3 overflow: -moz-scrollbars-vertical !important;
4}
5
6body {
7 font-family: sans-serif;
8 font-size: 11pt;
9 margin: 1.5em auto;
10 max-width: 675px;
11 -webkit-text-size-adjust: 100%;
12 color: #222;
13}
14
15/* default form styling */
16
17input,
18button,
19select,
20textarea {
21 color: #555;
22 background-color: white;
23 line-height: 1.2em;
24 padding: 3px 5px;
25}
26textarea {
27 line-height: 1.35em;
28 resize: vertical;
29}
30input[type="text"],
31input[type="search"],
32input[type="password"],
33input[type="email"],
34textarea {
35 border: 1px solid #ccc;
36}
37input:focus, textarea:focus {
38 outline-style: solid;
39 outline-width: 2px;
40}
41input[type="checkbox"] {
42 margin-top: 0.5em;
43}
44select {
45 border: 1px solid #ccc;
46}
47input:focus,
48textarea:focus {
49 border-color: #888;
50 color: #303030;
51 background-color: white;
52 outline: 0;
53}
54textarea:disabled {
55 background-color: #f0f0f0;
56}
57
58
59input[type="submit"]:focus,
60button:focus {
61 border-color: #888;
62 outline: 1px solid #888;
63}
64
65/* these must be separate */
66::-webkit-input-placeholder {
67 color: #aaa;
68 font-style: italic;
69}
70:-moz-placeholder {
71 color: #aaa;
72 font-style: italic;
73}
74
75button,
76input[type="button"],
77input[type="reset"],
78input[type="submit"],
79div.select2-choices {
80 display: inline-block;
81 padding: 2px 10px 2px 10px;
82 line-height: 18px;
83 color: #333333;
84 text-align: center;
85 background-color: #fafafa;
86 border: 1px solid #ccc;
87 border-bottom-color: #bbb;
88 cursor: pointer;
89}
90button:first-child,
91input[type="button"]:first-child,
92input[type="reset"]:first-child,
93input[type="submit"]:first-child {
94 margin-left: 0;
95}
96button:hover,
97input[type="button"]:hover,
98input[type="reset"]:hover,
99input[type="submit"]:hover {
100 color: #333333;
101 text-decoration: none;
102 background-color: #e6e6e6;
103}
104
105select {
106 margin-top: 3px;
107 min-width: 100px;
108}
109select:focus {
110 border-color: rgba(160,160,160,.8);
111 color: #303030;
112 outline: 0;
113}
114select::-moz-focus-inner {
115 border: 0;
116 outline: 0;
117}
118
119div.field_with_errors {
120 display: inline;
121}
122
123div.field_with_errors input[type="text"],
124div.field_with_errors input[type="email"],
125div.field_with_errors input[type="password"] {
126 border: 1px solid red;
127}
128div.field_with_errors input:focus {
129 border-color: rgba(255,0,0,.8);
130}
131
132input:disabled, button:disabled {
133 background-color: #e9e9e9;
134 color: gray;
135}
136
137table.data caption {
138 font-weight: bold;
139 text-align: left;
140 padding-bottom: 3px;
141}
142table.data .capright {
143 float: right;
144}
145
146table.data th {
147 background-color: #eaeaea;
148 border-bottom: 1px solid #cacaca;
149 border-top: 1px solid #cacaca;
150 padding: 3px;
151 padding-left: 3px;
152 text-align: left;
153}
154table.data th img {
155 vertical-align: middle;
156 margin-bottom: 5px;
157}
158
159table.data th.r, table.data td.r {
160 text-align: right;
161 padding-right: 3px;
162}
163
164table.data td {
165 padding-left: 5px;
166 padding-top: 4px;
167 padding-bottom: 3px;
168}
169table.data td img {
170 vertical-align: middle;
171 padding-left: 2px;
172}
173
174table.thread td {
175 padding: 0px 0px 0px 3px;
176 margin-bottom: 0px;
177 line-height: 17px;
178 /* text-vertical-align: middle; */
179 overflow: hidden;
180}
181table.thread td img {
182 vertical-align: middle;
183}
184
185table.data tr.row0 td {
186 background-color: white;
187 border-bottom: 1px solid #eaeaea;
188}
189table.data tr.row1 td {
190 background-color: #f9f9f9;
191 border-bottom: 1px solid #eaeaea;
192}
193table.data tr.nobottom td {
194 border-bottom: 0px;
195 padding-bottom: 0px;
196}
197
198table.data tr.void td, table.data tr.void td a {
199 text-decoration: line-through;
200 color: gray !important;
201}
202
203
204/* boxes */
205.box {
206 border: 0;
207 margin: 0 40px;
208 padding: 0;
209}
210.box_submitter {
211 border: 1px solid #cacaca;
212 border-top: 0px;
213 background-color: #eaeaea;
214 padding: 1em;
215}
216.box_submitter input {
217 width: 10em;
218}
219
220.box .legend {
221 background-color: white;
222 margin-bottom: 1em;
223 padding: 0;
224 font-weight: bold;
225 font-size: 11pt;
226}
227.box .sublegend {
228 font-size: 9.5pt;
229 font-weight: normal;
230 font-style: italic;
231 color: gray;
232}
233.box .legend.right {
234 float: right;
235}
236
237.box .boxtitle {
238 background-color: #f0f0f0;
239 border-bottom: 1px solid #cacaca;
240 display: block;
241 font-weight: bold;
242 margin: -3px -7px 4px -7px;
243 padding: 3px 5px 3px 5px;
244}
245
246
247fieldset.box {
248 border: 1px solid #cacaca;
249 padding: 4px 8px 8px 8px;
250}
251fieldset.box legend {
252 border: 2px solid gray;
253 background-color: white;
254 padding: 4px 8px;
255 font-weight: bold;
256}
257fieldset.box .boxtitle {
258 background-color: #f0f0f0;
259 border-bottom: 1px solid #cacaca;
260 display: block;
261 font-weight: bold;
262 margin: -3px -7px 4px -7px;
263 padding: 3px 5px 3px 5px;
264}
265
266
267
268.box label,
269.box .label_holder {
270 display: block;
271 float: left;
272 margin-bottom: 4px;
273}
274
275.box label.required {
276 font-weight: bold;
277}
278.box img {
279 vertical-align: middle;
280}
281.box label,
282.box span,
283.box select {
284 line-height: 2em;
285}
286.box br {
287 clear: left;
288}
289.box .boxline {
290 clear: both;
291 margin-bottom: 0.5em;
292}
293.box p {
294 margin-top: 1em;
295}
296
297.box textarea {
298 margin-bottom: 4px;
299 width: 75%;
300}
301
302.box label,
303.box .label_holder {
304 width: 7em;
305 line-height: 2em;
306 vertical-align: middle;
307}
308.box div.d {
309 margin-left: 7em;
310 line-height: 2em;
311}
312
313.box input.normal,
314.box label.normal {
315 display: inline;
316 float: none;
317 vertical-align: middle;
318}
319
320.box span.d label,
321.box td label,
322.box .legend label,
323.box div.d label {
324 display: inline;
325 float: none;
326 vertical-align: baseline;
327}
328
329.box span.d a.tag {
330 vertical-align: middle;
331}
332
333.box .label_holder label,
334.box .label_holder input {
335 line-height: 2.5em;
336 vertical-align: middle;
337}
338
339.hint {
340 color: gray;
341 font-style: italic;
342 margin-left: 1em;
343}
344
345.hintblock {
346 color: gray;
347 font-style: italic;
348 margin-left: 7em;
349}
350
351.box.wide label,
352.box.wide .label_holder {
353 width: 12em;
354}
355.box.wide .hintblock {
356 margin-left: 12em;
357}
358.box.wide div.d {
359 margin-left: 12em;
360}
361
362
363/* chibug */
364
365a {
366 color: #3a89c9;
367}
368a:visited {
369 color: gray;
370}
371
372nav {
373 background-color: #3a89c9;
374 font-size: larger;
375 font-weight: bold;
376 padding: 0.75em;
377 color: white;
378 vertical-align: middle;
379}
380nav a,
381nav a:visited {
382 color: white;
383}
384div.subheader {
385 margin-bottom: 1em;
386 padding: 0.4em 0.75em;
387 background-color: #b3ddf2;
388 border-bottom: 1px solid #8aabbb;
389}
390div.subheader a {
391 font-weight: bold;
392 color: #333;
393}
394
395div#logo {
396 float: right;
397}
398div#logo img {
399 padding: 0.5em 0.5em 0 0.5em;
400}
401
402main {
403 padding: 0 0.25em;
404}
405
406div.call {
407 font-style: italic;
408 font-size: 11pt;
409 font-weight: normal;
410 margin-bottom: 0;
411}
412div.call p {
413 margin-top: 0.25em;
414 margin-bottom: 0.75em;
415}
416
417section {
418 margin-bottom: 1em;
419 margin-top: 1.5em;
420 padding: 0.5em;
421}
422
423section header {
424 background-color: #b3ddf2;
425 border-bottom: 1px solid #8aabbb;
426 font-weight: bold;
427 font-size: 12.5pt;
428 padding: 0.4em 0.25em 0.25em 0.5em;
429 margin: -0.5em;
430 margin-bottom: 0.5em;
431 vertical-align: middle;
432}
433section header a,
434section header a:visited {
435 color: #333;
436}
437
438section span.details {
439 color: #555;
440 font-weight: normal;
441 font-size: 10pt;
442}
443
444.message_details {
445 width: 100%;
446}
447
448.message_details span {
449 line-height: 1.5em;
450}
451.message_details .header {
452 width: 100px;
453 float: left;
454 font-weight: bold;
455}
456.message_details br {
457 clear: both;
458}
459
460.message_body {
461 font-family: monospace;
462 font-size: 10pt;
463 width: 80ch;
464}
465
466.message_body .signature {
467 color: gray;
468}
469
470.message_body .quote1 {
471 color: green;
472}
473
474.message_body .quote2 {
475 color: blue;
476}
477
478.message_body .quote3 {
479 color: gray;
480}
481
482ul.mailinglist {
483 padding-left: 1.5em;
484 list-style: disc;
485 margin: 0;
486}
487ul.mailinglist li {
488 line-height: 1.5em;
489 font-size: 10pt;
490}
491ul.mailinglist li.highlighted {
492 font-weight: bold;
493 background-color: lightyellow;
494}
495ul.mailinglist li.first a {
496 font-weight: bold;
497}
498
499ul.mailinglist > ul.mailinglist {
500 list-style: circle;
501}
502
503ul.mailinglist span.from {
504 padding-left: 0.5em;
505}
506
507ul.mailinglist span.date {
508 font-size: smaller;
509 color: gray;
510 font-style: italic;
511 padding-left: 0.5em;
512}
513
514.friend {
515 /* boxes
516 border: 1px solid #b3ddf2;
517 border-radius: 1rem; */
518 display: flex;
519}
520.friend img {
521 margin: 15px;
522}
523.friend a {
524 display: flex;
525 margin: 20px 15px;
526}
527.friend p {
528 margin: 15px;
529}
530
531.page_nav {
532 text-align: center;
533 margin-top: 3em;
534 color: #555;
535}
536.page_nav.top {
537 margin-top: 0;
538 margin-bottom: 1em;
539}
540.page_nav .page {
541 border: 1px solid #ddd;
542 display: inline-block;
543 padding: 5px 10px;
544 margin-left: 0.5em;
545 text-align: center;
546 border-radius: 8px;
547}
548.page_nav .page.ellipses {
549 border-color: transparent;
550}
551
552.page_nav .page.cur_page {
553 background-color: #f7f7f2;
554 font-weight: bold;
555 color: #555;
556}
557
558
559/* for flash_errors(), flash_notices() and flash_successes() */
560div.flash-error,
561div.flash-notice,
562div.flash-success {
563 border: 2px solid;
564 margin: 5px 5px 10px 5px;
565 padding: 5px 10px;
566}
567
568div.flash-error {
569 background-color: #ffe7e7;
570 border-color: red;
571}
572
573div.flash-success {
574 background-color: #e8ffe7;
575 border-color: green;
576}
577
578div.flash-notice {
579 background-color: #e0e2fc;
580 border-color: blue;
581}
582
583/* for error_messages_for() */
584div.fieldWithErrors {
585 display: inline;
586}
587
588div.fieldWithErrors input,
589div.fieldWithErrors select,
590div.fieldWithErrors textarea {
591 border: 2px solid red;
592 padding: 2px;
593}
594
595
596/* mobile view */
597
598@media only screen and (max-width: 675px) {
599 body {
600 margin: 0;
601 max-width: auto;
602 }
603
604 div#logo img {
605 width: 75px;
606 height: 50px;
607 margin: 0;
608 padding: 0;
609 }
610
611 main {
612 padding-left: 1em;
613 padding-right: 1em;
614 }
615
616 section {
617 padding-left: 0;
618 padding-right: 0;
619 }
620
621 div.call p {
622 margin-bottom: 0;
623 }
624
625 .message_body {
626 font-size: 9pt;
627 width: auto;
628 }
629}