Mercurial > repos > adam-novak > hexagram

comparison hexagram-6ae12361157c/hexagram/hexagram.css @ 0:1407e3634bcf draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Uploaded r11 from test tool shed.
author adam-novak
date Tue, 22 Oct 2013 14:17:59 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1407e3634bcf
1 /* Global font stuff */
2 body {
3 font-family: sans-serif;
4 }
5
6 /*
7 The visualization element needs to take up all available space.
8 */
9 #visualization {
10 position: absolute;
11 left: 0;
12 right: 0;
13 top: 0;
14 bottom: 0;
15 overflow: hidden;
16 }
17
18 /*
19 Row and column layout boilerplate
20 From http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
21 */
22
23 body {
24 margin: 0;
25 }
26
27 .row, .col {
28 overflow: hidden;
29 position: absolute;
30 }
31
32 .row {
33 left: 0;
34 right: 0;
35 }
36
37 .col {
38 top: 0;
39 bottom: 0;
40 }
41
42 .scroll-x {
43 overflow-x: auto;
44 }
45
46 .scroll-y {
47 overflow-y: auto;
48 }
49
50 /*
51 Read as "The content row", distinct from whatever else that element might be.
52 */
53 .content.row {
54 top: 6em;
55 bottom: 0;
56 z-index: 1;
57 }
58
59 .header.row {
60 height: 4em;
61 top: 2em;
62 border-bottom: 1px solid black;
63 overflow: visible;
64 }
65
66 .browse.col {
67 left: 0;
68 width: 22em;
69 /* Not sure what's up with the lack of dynamic height here, but... */
70 height: 4em;
71 }
72
73 .shortlist.col {
74 right: 0;
75 width: 21em;
76 overflow: visible;
77 }
78
79 .error.row{
80 height: 2em;
81 top: 0;
82 border-bottom: 1px solid black;
83 background: #F7EFAD;
84 z-index: 101;
85 display: none;
86 }
87
88 .tools.row {
89 height: 2em;
90 top: 0em;
91 border-bottom: 1px solid black;
92 background: #e0e0e0;
93 }
94
95 /*
96 These are all supposed to stack against the left end in a toolbar thingy.
97 */
98 .stacker {
99 float: left;
100 line-height: 2em;
101 margin-left: 0.5em;
102 height: 2em;
103 }
104
105 #error-notification {
106 color: red;
107 font-weight: bold;
108 text-align: center;
109 line-height: 2em;
110 margin-left: 0.5em;
111 height: 2em;
112 }
113
114 /* Except these which stack on the right */
115 .stacker.right {
116 float: right;
117 margin-left: 0;
118 margin-right: 0.5em;
119 }
120
121 /* Code for fancy expandy side pannels */
122
123 .panel-holder {
124 overflow: hidden;
125 height: 3.9em;
126 max-height: 4em;
127 top: 2.1em;
128 width: 20em;
129 position: fixed;
130 z-index: 100;
131 transition: max-height 100ms;
132 }
133
134 /* When a holder gets moused over, open it up to 100% window height */
135 .panel-holder:hover {
136 height: auto;
137 max-height: 100%;
138 bottom: 0;
139 }
140
141 .panel {
142 position: relative;
143 top: 0;
144 left: 0;
145 height: 100%;
146 border-radius: 10px;
147 border: 1px solid gray;
148 background: white;
149 z-index: 100;
150 }
151
152 .panel-contents {
153 overflow-y: auto;
154 overflow-x: hidden;
155 position: absolute;
156 left: 0;
157 right: 0;
158 bottom: 0;
159 top: 1em;
160 }
161
162 .panel-title {
163 text-align: center;
164 font-weight: bold;
165 font-family: sans-serif;
166 height: 1em;
167 }
168
169 /* Browsing stuff */
170
171 #browse-holder {
172 margin-left: 0.5em;
173 width: 500px;
174 }
175 #search {
176 width: 322px;
177 }
178
179 #recalculate-statistics {
180 padding: 0.2em;
181 margin-left: 10px;
182 }
183
184 #calculate-set-operation {
185 padding: 0.2em;
186 }
187
188 #inflate{
189 display: none;
190 }
191
192 .recalculate-throbber {
193 display: none;
194 }
195
196 /* Set Operation Menu */
197
198 #set-operation {
199 padding: 0.2em;
200 }
201
202 .set-operation-col {
203 visibility:hidden;
204 width: 25em;
205 overflow: visible;
206 }
207
208 .set-operation-panel-holder {
209 visibility:hidden;
210 margin-left:21em;
211 padding-top: 2em;
212 overflow: hidden;
213 top: 4em;
214 width: 25em;
215 z-index: 100;
216 }
217
218 .set-operation-panel {
219 text-align: center;
220 visibility:hidden;
221 height: 160px;
222 position: relative;
223 top: 0;
224 border-radius: 10px;
225 border: 1px solid gray;
226 background: white;
227 z-index: 100;
228 }
229
230 .set-operation-panel-title {
231 visibility:hidden;
232 text-align: center;
233 }
234
235 .set-operation-panel-contents {
236 visibility:hidden;
237 overflow-y: auto;
238 overflow-x: hidden;
239 top: 1em;
240 }
241
242 #set-operations-list {
243 }
244
245 .set-operation-entry {
246 text-align: left;
247 position: relative;
248 height: auto;
249 width: auto;
250 padding: 5px;
251 }
252
253 .set-operation-value {
254 visibility: hidden;
255 width: 15em;
256 margin-bottom: 10px;
257 }
258
259 .set-operation-layer-value {
260 visibility: hidden;
261 width: 8em;
262 margin-left: 50px;
263 }
264
265 .compute-button {
266 visibility: hidden;
267 text-align: center;
268 width: 190px;
269 margin-left: 25%;
270 }
271 /* Do some custom styling of browse results */
272 .layer-entry {
273 padding-right: 20px;
274 }
275 .select2-results .select2-highlighted {
276 background-image: url("right.svg");
277 background-repeat: no-repeat;
278 background-position: right center;
279 }
280
281 .layer-name {
282 /* Force silly underscore names into shape */
283 word-wrap: break-word;
284 }
285
286 /* Make the browse dropdown tall */
287 .results-dropdown.select2-container .select2-results {
288 max-height: 30em;
289 }
290
291 .results-dropdown .select2-results {
292 max-height: 30em;
293 }
294
295 .layer-metadata {
296 font-size: 70%;
297 /* Serif is more visible at small sizes */
298 font-family: serif;
299 }
300
301 /* Vertical alignment tables */
302 .vertical-table {
303 display: table;
304 }
305
306 .vertical-cell {
307 display: table-cell;
308 vertical-align: middle;
309 }
310
311 /*
312 Not much room for the results for this column. Just get them out of the way.
313 */
314 #browse-results.panel-contents {
315 top: 4em;
316 }
317
318 /* Map Layout Selection Stuff */
319
320 #layout-holder{
321 margin-left: 0.5em;
322 }
323
324 #layout-search {
325 width: 22em;
326 }
327
328 .layout-entry {
329 padding-right: 20px;
330 }
331
332 layout-name {
333 /* Force silly underscore names into shape */
334 word-wrap: break-word;
335 }
336 #current-layout {
337 padding-top: 2.5em;
338 width: 700px;
339 }
340
341 /* Shortlist UI stuff */
342
343 .shortlist-controls {
344 position: absolute;
345 left: 0;
346 top: 0;
347 bottom: 0;
348 width: 2em;
349 background-image: url("drag.svg");
350 background-repeat: no-repeat;
351 background-position: 50% 70%;
352 border-radius: 5px;
353 padding: 5px;
354 }
355
356 .shortlist-entry {
357 position: relative;
358 height: auto;
359 width: auto;
360 background: #E0E0FF;
361 border-radius: 5px;
362 padding: 5px;
363 padding-left: 3em;
364 margin: 0.5em;
365 word-wrap: break-word;
366 }
367
368 .shortlist-entry.selection {
369 background: #FFE0FF;
370 }
371
372 .shortlist-controls {
373 cursor: grab;
374 cursor: -moz-grab;
375 cursor: -webkit-grab;
376 }
377
378 .shortlist-controls:activate {
379 cursor: grabbing;
380 cursor: -moz-grabbing;
381 cursor: -webkit-grabbing;
382 }
383
384 .shortlist-entry:after {
385 content: "";
386 display: block;
387 clear: both;
388 }
389
390 #shortlist-holder {
391 right: 0;
392 }
393
394 .layer-on {
395
396 }
397
398 .radio-label, .radio-clear {
399 margin-right: 0.1em;
400 margin-left: 0.1em;
401 }
402
403 /* Hide the radio button clearing links unless the radio button is selected. */
404 input[type="radio"] + .radio-clear {
405 display: none;
406 }
407
408 input[type="radio"]:checked + .radio-clear {
409 display: inline;
410 }
411
412
413 /* These are the layer scaling sliders */
414 .range-slider {
415 width: 10em;
416 margin-left: 0.3em;
417 margin-right: 0.3em;
418 margin-top: 0.5em;
419 }
420
421 /*Shortlist holders*/
422 #left-columns {
423 width: 33%;
424 }
425 #center-columns {
426 margin-left: 33%;
427 }
428 #right-columns {
429 margin-left: 66%
430 }
431
432 /* Filtering stuff */
433
434 .filter {
435 line-height: 1em;
436 vertical-align: center;
437 }
438 .filter-threshold, .filter-value {
439 display: none;
440 width: 5em;
441 }
442 .filter-holder {
443 float: left;
444 text-align: left;
445 width: 120px;
446 }
447
448 .save-filter {
449 display: none;
450 }
451
452 /* Intersection */
453 .intersection {
454 line-height: 1em;
455 vertical-align: center;
456 }
457 .intersection-text {
458 width: 15px;
459 float: left;
460 text-align: center;
461 }
462 .intersection-checkbox {
463 float: left;
464 text-align: center;
465 margin-left: 2px;
466 }
467 .intersection-holder {
468 float: left;
469 text-align: center;
470 }
471 .intersection-threshold, .intersection-value {
472 display: none;
473 width: 5em;
474 }
475
476 /*Union*/
477 .union {
478 line-height: 1em;
479 vertical-align: center;
480 }
481 .union-text{
482 width: 15px;
483 float: left;
484 text-align: center;
485 }
486 .union-checkbox {
487 float: left;
488 text-align: center;
489 margin-left: 2px;
490 }
491 .union-holder {
492 float: left;
493 text-align: center;
494 margin-left: 10px;
495 }
496 .union-threshold, .union-value {
497 display: none;
498 width: 5em;
499 }
500
501 /*Set Difference*/
502 .set-difference {
503 line-height: 1em;
504 vertical-align: center;
505 }
506 .set-difference-text{
507 width: 15px;
508 float: left;
509 text-align: center;
510 }
511 .set-difference-checkbox {
512 float: left;
513 text-align: center;
514 margin-left: 2px;
515 }
516 .set-difference-holder {
517 float: left;
518 text-align: center;
519 margin-left: 10px;
520 }
521 .set-difference-threshold, .set-difference-value {
522 display: none;
523 width: 5em;
524 }
525
526 /*Symmetric Difference*/
527 .symmetric-difference {
528 line-height: 1em;
529 vertical-align: center;
530 }
531 .symmetric-difference-text{
532 width: 15px;
533 float: left;
534 text-align: center;
535 }
536 .symmetric-difference-checkbox {
537 float: left;
538 text-align: center;
539 margin-left: 2px;
540 }
541 .symmetric-difference-holder {
542 float: left;
543 text-align: center;
544 margin-left: 10px;
545 }
546 .symmetric-difference-threshold, .symmetric-difference-value {
547 display: none;
548 width: 5em;
549 }
550
551 /*Absolute Complement*/
552 .absolute-complement {
553 line-height: 1em;
554 vertical-align: center;
555 }
556 .absolute-complement-text{
557 width: 40px;
558 float: left;
559 text-align: center;
560 }
561 .absolute-complement-checkbox {
562 float: left;
563 text-align: center;
564 margin-left: 2px;
565 }
566 .absolute-complement-holder {
567 width: 65px;
568 float: left;
569 text-align: center;
570 margin-left: 10px
571 }
572 .absolute-complement-threshold, .absolute-complement-value {
573 display: none;
574 width: 5em;
575 }
576
577 /* This is the color key */
578 .key {
579 overflow: visible;
580 position: absolute;
581 z-index: 2;
582 top: 2em;
583 right: 2em;
584 height: 150px;
585 width: 150px;
586 display: none;
587 pointer-events: none;
588 font-family: serif;
589 }
590
591 #color-key {
592 width: 100px;
593 height: 100px;
594 position: absolute;
595 display: block;
596 left:25px;
597 top: 25px;
598 border: 1px solid white;
599 }
600
601 .label {
602 color: white;
603 }
604
605 .axis {
606 word-wrap: break-word;
607 }
608
609 #low-both {
610 position: absolute;
611 left: 0;
612 bottom: 0;
613 }
614
615 #high-x {
616 position: absolute;
617 right: 0;
618 bottom: 0;
619 }
620
621 #high-y {
622 position: absolute;
623 left: 0;
624 top: 0;
625 }
626
627 #x-axis {
628 position: absolute;
629 top: 155px;
630 width: 150px;
631 margin: auto;
632 text-align: center;
633 }
634
635 /*
636 Complicated table centering thing from
637 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
638 */
639
640 #y-axis-holder {
641 display: table;
642 right: 155px;
643 width: 150px;
644 top: 0;
645 height: 100%;
646 position: absolute;
647 }
648
649 #y-axis-cell {
650 display: table-cell;
651 vertical-align: middle;
652 }
653
654 #y-axis {
655 text-align: right;
656 }
657
658 /* This is the info window/infocard styling */
659 .infocard {
660 word-break: break-all;
661 font-family: sans-serif;
662 }
663
664 .info-row {
665 margin-bottom: 0.1em;
666 }
667
668 .info-key {
669 background: green;
670 color: white;
671 text-align: center;
672 font-weight: bold;
673 }
674
675 .info-value {
676 background: #F0F0F0;
677 }
678
679 /* Tool stuff */
680 textarea.import {
681 height: 10em;
682 width: 100%;
683 font-size: 10pt;
684 }
685
686 input.import {
687 width: 100%;
688 /*
689 Apparently Firefox ignores your width and makes it some random size
690 depending on font size. Make that small enough.
691 */
692 font-size: 0.5em;
693 }
694
695