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 }
190
191 .recalculate-throbber {
192 display: none;
193 }
194
195 /* Set Operation Menu */
196
197 #set-operation {
198 padding: 0.2em;
199 }
200
201 .set-operation-col {
202 visibility:hidden;
203 width: 25em;
204 overflow: visible;
205 }
206
207 .set-operation-panel-holder {
208 visibility:hidden;
209 margin-left:21em;
210 padding-top: 2em;
211 overflow: hidden;
212 top: 4em;
213 width: 25em;
214 z-index: 100;
215 }
216
217 .set-operation-panel {
218 text-align: center;
219 visibility:hidden;
220 height: 160px;
221 position: relative;
222 top: 0;
223 border-radius: 10px;
224 border: 1px solid gray;
225 background: white;
226 z-index: 100;
227 }
228
229 .set-operation-panel-title {
230 visibility:hidden;
231 text-align: center;
232 }
233
234 .set-operation-panel-contents {
235 visibility:hidden;
236 overflow-y: auto;
237 overflow-x: hidden;
238 top: 1em;
239 }
240
241 #set-operations-list {
242 }
243
244 .set-operation-entry {
245 text-align: left;
246 position: relative;
247 height: auto;
248 width: auto;
249 padding: 5px;
250 }
251
252 .set-operation-value {
253 visibility: hidden;
254 width: 15em;
255 margin-bottom: 10px;
256 }
257
258 .set-operation-layer-value {
259 visibility: hidden;
260 width: 8em;
261 margin-left: 50px;
262 }
263
264 .compute-button {
265 visibility: hidden;
266 text-align: center;
267 width: 190px;
268 margin-left: 25%;
269 }
270 /* Do some custom styling of browse results */
271 .layer-entry {
272 padding-right: 20px;
273 }
274 .select2-results .select2-highlighted {
275 background-image: url("right.svg");
276 background-repeat: no-repeat;
277 background-position: right center;
278 }
279
280 .layer-name {
281 /* Force silly underscore names into shape */
282 word-wrap: break-word;
283 }
284
285 /* Make the browse dropdown tall */
286 .results-dropdown.select2-container .select2-results {
287 max-height: 30em;
288 }
289
290 .results-dropdown .select2-results {
291 max-height: 30em;
292 }
293
294 .layer-metadata {
295 font-size: 70%;
296 /* Serif is more visible at small sizes */
297 font-family: serif;
298 }
299
300 /* Vertical alignment tables */
301 .vertical-table {
302 display: table;
303 }
304
305 .vertical-cell {
306 display: table-cell;
307 vertical-align: middle;
308 }
309
310 /*
311 Not much room for the results for this column. Just get them out of the way.
312 */
313 #browse-results.panel-contents {
314 top: 4em;
315 }
316
317 /* Map Layout Selection Stuff */
318
319 #layout-holder{
320 margin-left: 0.5em;
321 }
322
323 #layout-search {
324 width: 22em;
325 }
326
327 .layout-entry {
328 padding-right: 20px;
329 }
330
331 layout-name {
332 /* Force silly underscore names into shape */
333 word-wrap: break-word;
334 }
335 #current-layout {
336 padding-top: 2.5em;
337 width: 700px;
338 }
339
340 /* Shortlist UI stuff */
341
342 .shortlist-controls {
343 position: absolute;
344 left: 0;
345 top: 0;
346 bottom: 0;
347 width: 2em;
348 background-image: url("drag.svg");
349 background-repeat: no-repeat;
350 background-position: 50% 70%;
351 border-radius: 5px;
352 padding: 5px;
353 }
354
355 .shortlist-entry {
356 position: relative;
357 height: auto;
358 width: auto;
359 background: #E0E0FF;
360 border-radius: 5px;
361 padding: 5px;
362 padding-left: 3em;
363 margin: 0.5em;
364 word-wrap: break-word;
365 }
366
367 .shortlist-entry.selection {
368 background: #FFE0FF;
369 }
370
371 .shortlist-controls {
372 cursor: grab;
373 cursor: -moz-grab;
374 cursor: -webkit-grab;
375 }
376
377 .shortlist-controls:activate {
378 cursor: grabbing;
379 cursor: -moz-grabbing;
380 cursor: -webkit-grabbing;
381 }
382
383 .shortlist-entry:after {
384 content: "";
385 display: block;
386 clear: both;
387 }
388
389 #shortlist-holder {
390 right: 0;
391 }
392
393 .layer-on {
394
395 }
396
397 .radio-label, .radio-clear {
398 margin-right: 0.1em;
399 margin-left: 0.1em;
400 }
401
402 /* Hide the radio button clearing links unless the radio button is selected. */
403 input[type="radio"] + .radio-clear {
404 display: none;
405 }
406
407 input[type="radio"]:checked + .radio-clear {
408 display: inline;
409 }
410
411
412 /* These are the layer scaling sliders */
413 .range-slider {
414 width: 10em;
415 margin-left: 0.3em;
416 margin-right: 0.3em;
417 margin-top: 0.5em;
418 }
419
420 /*Shortlist holders*/
421 #left-columns {
422 width: 33%;
423 }
424 #center-columns {
425 margin-left: 33%;
426 }
427 #right-columns {
428 margin-left: 66%
429 }
430
431 /* Filtering stuff */
432
433 .filter {
434 line-height: 1em;
435 vertical-align: center;
436 }
437 .filter-threshold, .filter-value {
438 display: none;
439 width: 5em;
440 }
441 .filter-holder {
442 float: left;
443 text-align: left;
444 width: 120px;
445 }
446
447 .save-filter {
448 display: none;
449 }
450
451 /* Intersection */
452 .intersection {
453 line-height: 1em;
454 vertical-align: center;
455 }
456 .intersection-text {
457 width: 15px;
458 float: left;
459 text-align: center;
460 }
461 .intersection-checkbox {
462 float: left;
463 text-align: center;
464 margin-left: 2px;
465 }
466 .intersection-holder {
467 float: left;
468 text-align: center;
469 }
470 .intersection-threshold, .intersection-value {
471 display: none;
472 width: 5em;
473 }
474
475 /*Union*/
476 .union {
477 line-height: 1em;
478 vertical-align: center;
479 }
480 .union-text{
481 width: 15px;
482 float: left;
483 text-align: center;
484 }
485 .union-checkbox {
486 float: left;
487 text-align: center;
488 margin-left: 2px;
489 }
490 .union-holder {
491 float: left;
492 text-align: center;
493 margin-left: 10px;
494 }
495 .union-threshold, .union-value {
496 display: none;
497 width: 5em;
498 }
499
500 /*Set Difference*/
501 .set-difference {
502 line-height: 1em;
503 vertical-align: center;
504 }
505 .set-difference-text{
506 width: 15px;
507 float: left;
508 text-align: center;
509 }
510 .set-difference-checkbox {
511 float: left;
512 text-align: center;
513 margin-left: 2px;
514 }
515 .set-difference-holder {
516 float: left;
517 text-align: center;
518 margin-left: 10px;
519 }
520 .set-difference-threshold, .set-difference-value {
521 display: none;
522 width: 5em;
523 }
524
525 /*Symmetric Difference*/
526 .symmetric-difference {
527 line-height: 1em;
528 vertical-align: center;
529 }
530 .symmetric-difference-text{
531 width: 15px;
532 float: left;
533 text-align: center;
534 }
535 .symmetric-difference-checkbox {
536 float: left;
537 text-align: center;
538 margin-left: 2px;
539 }
540 .symmetric-difference-holder {
541 float: left;
542 text-align: center;
543 margin-left: 10px;
544 }
545 .symmetric-difference-threshold, .symmetric-difference-value {
546 display: none;
547 width: 5em;
548 }
549
550 /*Absolute Complement*/
551 .absolute-complement {
552 line-height: 1em;
553 vertical-align: center;
554 }
555 .absolute-complement-text{
556 width: 40px;
557 float: left;
558 text-align: center;
559 }
560 .absolute-complement-checkbox {
561 float: left;
562 text-align: center;
563 margin-left: 2px;
564 }
565 .absolute-complement-holder {
566 width: 65px;
567 float: left;
568 text-align: center;
569 margin-left: 10px
570 }
571 .absolute-complement-threshold, .absolute-complement-value {
572 display: none;
573 width: 5em;
574 }
575
576 /* This is the color key */
577 .key {
578 overflow: visible;
579 position: absolute;
580 z-index: 2;
581 top: 2em;
582 right: 2em;
583 height: 150px;
584 width: 150px;
585 display: none;
586 pointer-events: none;
587 font-family: serif;
588 }
589
590 #color-key {
591 width: 100px;
592 height: 100px;
593 position: absolute;
594 display: block;
595 left:25px;
596 top: 25px;
597 border: 1px solid white;
598 }
599
600 .label {
601 color: white;
602 }
603
604 .axis {
605 word-wrap: break-word;
606 }
607
608 #low-both {
609 position: absolute;
610 left: 0;
611 bottom: 0;
612 }
613
614 #high-x {
615 position: absolute;
616 right: 0;
617 bottom: 0;
618 }
619
620 #high-y {
621 position: absolute;
622 left: 0;
623 top: 0;
624 }
625
626 #x-axis {
627 position: absolute;
628 top: 155px;
629 width: 150px;
630 margin: auto;
631 text-align: center;
632 }
633
634 /*
635 Complicated table centering thing from
636 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
637 */
638
639 #y-axis-holder {
640 display: table;
641 right: 155px;
642 width: 150px;
643 top: 0;
644 height: 100%;
645 position: absolute;
646 }
647
648 #y-axis-cell {
649 display: table-cell;
650 vertical-align: middle;
651 }
652
653 #y-axis {
654 text-align: right;
655 }
656
657 /* This is the info window/infocard styling */
658 .infocard {
659 word-break: break-all;
660 font-family: sans-serif;
661 }
662
663 .info-row {
664 margin-bottom: 0.1em;
665 }
666
667 .info-key {
668 background: green;
669 color: white;
670 text-align: center;
671 font-weight: bold;
672 }
673
674 .info-value {
675 background: #F0F0F0;
676 }
677
678 /* Tool stuff */
679 textarea.import {
680 height: 10em;
681 width: 100%;
682 font-size: 10pt;
683 }
684
685 input.import {
686 width: 100%;
687 /*
688 Apparently Firefox ignores your width and makes it some random size
689 depending on font size. Make that small enough.
690 */
691 font-size: 0.5em;
692 }
693
694