/static/june_2007_style/base.css.tmpl

  1## Lucida Grande for proper mac unicode characters, verdana/arial stack for others
  2body{font:13px/1.231 "Lucida Grande",verdana,arial,helvetica,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% "Lucida Grande",verdana,arial,helvetica,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
  3body{font-size:75%;}
  4
  5## Mixins
  6
  7.unselectable {
  8    user-select: none;
  9    -moz-user-select: none;
 10    -webkit-user-select: none;
 11}
 12
 13.shadow {
 14    -moz-box-shadow: 0 3px 30px black;
 15    -webkit-box-shadow: 0 3px 30px black;
 16}
 17
 18## Real styles
 19
 20body  {
 21    background: $base_bg_bottom;
 22    color: $base_text;
 23    background-image: url(base_bg.png);
 24    background-repeat: repeat-x;
 25    background-position: top;
 26    margin: 10px;
 27}
 28
 29img {
 30    border: 0;
 31}
 32
 33
 34a:link, a:visited, a:active {
 35    color: $link_text;
 36}
 37
 38h1, h2, h3, h4 {
 39    color: $header_text;
 40    /*text-shadow: #bbb 2px 2px 1px;*/
 41}
 42
 43h1:first-child, h2:first-child, h3:first-child, h4:first-child {
 44    margin-top: 0px;
 45}
 46
 47hr {
 48    border: none;
 49    height: 0px;
 50    border-bottom: dotted $base_text 1px;
 51}
 52
 53table {
 54    border-collapse: collapse;
 55}
 56
 57th {
 58    text-align: left;
 59}
 60
 61div.toolForm {
 62    border: solid $form_border 1px;
 63}
 64
 65div.toolFormTitle { 
 66    font-weight: bold;
 67    padding: 5px;
 68    padding-left: 10px;
 69    padding-right: 10px;
 70    background: $form_title_bg_bottom;
 71    ## background-image: url(form_title_bg.png);
 72    background-repeat: repeat-x;
 73    background-position: top;
 74    border-bottom: solid $form_border 1px;
 75}
 76
 77div.toolParamHelp {
 78    color: #666;
 79}
 80
 81div.toolParamHelp a {
 82    color: #666;
 83}
 84
 85div.toolFormBody { 
 86    background: $form_body_bg_bottom;
 87    background-image: url(form_body_bg.png);
 88    background-repeat: repeat-x;
 89    background-position: top;
 90    padding: 5px 0;
 91}
 92
 93div.toolFormBody div.toolFormTitle {
 94    background: transparent;
 95    border: none;
 96    font-weight: bold;
 97    border-bottom: solid $form_border 1px;
 98    margin-bottom: 5px;
 99}
100
101div.toolFormDisabled div.toolFormTitle {
102    background: ${layout_bg};
103    border-color: ${layout_border};
104}
105
106div.toolFormDisabled {
107    border-color: ${layout_border};
108}
109
110div.toolHelp {
111    margin-top: 10px;
112}
113
114div.toolHelpBody {
115    width: 100%;
116}
117
118div.metadataForm {
119    border:solid #aaaaaa 1px;
120}
121
122div.metadataFormTitle {
123    font-weight:bold;
124    padding:5px;
125    padding-left:10px;
126    padding-right:10px;
127    background:#cccccc;
128    background-repeat:repeat-x;
129    background-position:top;
130    border-bottom:solid #aaaaaa 1px;
131}
132
133div.metadataFormBody {
134    background:#FFFFFF;
135    background-image:url(form_body_bg.png);
136    background-repeat:repeat-x;
137    background-position:top;
138    padding:5px 0;
139}
140
141div.metadataFormBody div.metadataFormTitle {
142    background:transparent;
143    border:none;
144    font-weight:bold;
145    border-bottom:solid #dcb790 1px;
146    margin-bottom:5px;
147}
148
149div.metadataFormDisabled div.metadataFormTitle {
150    background:#eee;
151    border-color:#999;
152}
153
154div.metadataFormDisabled {
155    border-color:#999;
156}
157
158div.metadataHelpBody { 
159    width:100%;overflow:auto;
160}
161
162div.titleRow {
163    font-weight: bold;
164    border-bottom: dotted gray 1px;
165    margin-bottom: 0.5em;
166    padding-bottom: 0.25em;
167}
168
169## Forms 
170
171div.form {
172    border: solid $form_border 1px;
173}
174
175div.form-title { 
176    font-weight: bold;
177    padding: 5px 10px;
178    background: $form_title_bg_bottom;
179    background-image: url(form_title_bg.png);
180    background-repeat: repeat-x;
181    background-position: top;
182    border-bottom: solid $form_border 1px;
183}
184
185div.form-body { 
186    padding: 5px 0;
187}
188
189div.form-row  {
190    padding: 5px 10px;
191}
192
193div.form-title-row {
194    padding: 5px 10px;
195}
196
197div.repeat-group-item {
198    border-left: solid $form_border 5px;
199    margin-left: 10px;
200    margin-bottom: 10px;
201}
202
203div.form-row-error {
204    background: $error_message_bg;
205}
206
207div.form-row label {
208    font-weight: bold;
209    display: block;
210    margin-bottom: .2em;
211}
212
213div.form-row label.inline {
214    display: inline;
215}
216
217div.form-row-input {
218    float: left;
219}
220
221div.form-row-input label {
222    font-weight: normal;
223    display: inline;
224}
225
226div.form-row-error-message {
227    width: 300px;
228    float: left;
229    color: red;
230    font-weight: bold;
231    padding: 3px 0 0 1em;
232}
233
234select, input, textarea {
235    font: inherit;
236}
237
238select, textarea, input[type="text"], input[type="file"], input[type="password"] {
239    -webkit-box-sizing: border-box;
240    max-width: 300px;
241}
242
243## Messages 
244
245.errormessagelarge, .warningmessagelarge, .donemessagelarge, .infomessagelarge {
246    padding: 10px;
247    padding-left: 52px;
248    min-height: 32px;
249    border: 1px solid $error_message_border;
250    background-color: $error_message_bg;
251    background-image: url(error_message_icon.png);
252    background-repeat: no-repeat;
253    background-position: 10px 10px;
254}
255
256.warningmessagelarge {
257    background-image: url(warn_message_icon.png);
258    border-color: $warn_message_border;
259    background-color: $warn_message_bg;
260}
261
262.donemessagelarge {
263    background-image: url(done_message_icon.png);
264    border-color: $done_message_border;
265    background-color: $done_message_bg;
266}
267
268.infomessagelarge {
269    background-image: url(info_message_icon.png);
270    border-color: $info_message_border;
271    background-color: $info_message_bg;
272}
273
274.screencastBox {   
275    padding-left: 10px;
276    border-color: #AAAA66;
277    background-color: #FFFFCC;
278    background-image: none;
279}
280
281.errormessage, .warningmessage, .donemessage, .infomessage, .errormessagesmall, .warningmessagesmall, .donemessagesmall, .infomessagesmall {
282    padding: 5px;
283    padding-left: 25px;
284    min-height: 15px;
285    border: 1px solid $error_message_border;
286    background-color: $error_message_bg;
287    background-image: url(error_small.png);
288    background-repeat: no-repeat;
289    background-position: 5px 5px;
290}
291
292.warningmessage, .warningmessagesmall {
293    background-image: url(warn_small.png);
294    border-color: $warn_message_border;
295    background-color: $warn_message_bg;
296}
297
298.donemessage, .donemessagesmall {
299    background-image: url(ok_small.png);
300    border-color: $done_message_border;
301    background-color: $done_message_bg;
302}
303
304.infomessage, .infomessagesmall {
305    background-image: url(info_small.png);
306    border-color: $info_message_border;
307    background-color: $info_message_bg;
308}
309
310.errormark, .warningmark, .donemark, .infomark, .ok_bgr, .err_bgr {
311    padding-left: 20px;
312    min-height: 15px;
313    background: url(error_small.png) no-repeat;
314}
315
316.warningmark {
317    background-image: url(warn_small.png);
318}
319
320.donemark {
321    background-image: url(ok_small.png);
322}
323
324.infomark, .ok_bgr {
325    background-image: url(info_small.png);
326}
327
328table.simple {
329    font-size: 12px;
330    background: #fff;
331    margin: 1em;
332    border-collapse: collapse;
333    text-align: left;
334}
335table.simple th {
336    font-size: 14px;
337    font-weight: normal;
338    padding: 10px 8px;
339    border-bottom: 2px solid #333;
340}
341table.simple td {
342    padding: 10px 8px 0px 8px;
343}
344table.simple tbody tr:hover td {
345    color: #333;
346}
347
348table.tabletip {
349    width: 100%;
350    border-collapse: collapse;
351    text-align: left;
352}
353table.tabletip th {
354    white-space: nowrap;
355    border-bottom: 1px solid #444;
356    padding-right: 3px;
357}
358table.tabletip td {
359    border-bottom: 1px solid #ddd;
360}
361table.tabletip tbody tr:hover td {
362    background-color: #eee;
363}
364
365table.colored {
366    border-top: solid $table_border 1px;
367    border-bottom: solid $table_border 1px;
368}
369
370table.colored td, table.colored th {
371    text-align: left;
372    padding: 5px;
373}
374
375table.colored tr.header { 
376    background: $table_header_bg;
377    background-image: url(form_title_bg.png);
378    background-repeat: repeat-x;
379    background-position: top;
380    border-bottom: solid $table_border 1px;
381    font-weight: bold;
382}
383
384table.colored tr { 
385    background: $table_row_bg;
386}
387
388table.colored tr.odd_row { 
389    background: $odd_row_bg;
390}
391
392div.debug {
393    margin: 10px;
394    padding: 5px;
395    background: #FFFF99;
396    border: solid #FFFF33 1px;
397    color: black;
398}
399
400div.odd_row {
401    background: $odd_row_bg;
402}
403    
404#footer {
405  display: none;
406}
407
408## Tool panel stuff
409
410td.panel-body {
411    background: white;
412    color: $base_text;
413    background: $menu_bg_over url(menu_bg.png) top repeat-x;
414}
415
416div.toolSectionPad {
417    margin: 0;
418    padding: 0;
419    height: 5px;
420    font-size: 0px;
421}
422
423div.toolSectionDetailsInner { 
424    margin-left: 5px;
425    margin-right: 5px;
426}
427
428div.toolSectionTitle {
429    padding-bottom: 0px;
430    font-weight: bold;
431}
432
433div.toolTitle {
434    padding-top: 5px;
435    padding-bottom: 5px;
436    margin-left: 16px;
437    margin-right: 10px;
438    display: list-item;
439    list-style: square outside;
440}
441
442span.toolParameterExpandableCollapsable {
443    font-weight: bold;
444    cursor: pointer;
445}
446ul.toolParameterExpandableCollapsable {
447    list-style: none;
448}
449
450ul.manage-table-actions {
451    float: right;
452    margin-top: -2.5em;
453}
454ul.manage-table-actions li {
455    display: block;
456    float: left;
457    margin-left: 0.5em;
458}
459
460## State colors
461
462.state-color-new {
463    border-color: $history_new_border;
464    background: $history_new_bg;
465}
466
467.state-color-upload {
468    border-color: $history_upload_border;
469    background: $history_upload_bg;
470}
471
472.state-color-waiting {
473    border-color: $history_waiting_border;
474    background: $history_waiting_bg;
475}
476
477.state-color-queued {
478    border-color: $history_queued_border;
479    background: $history_queued_bg;
480}
481
482.state-color-running {
483    border-color: $history_running_border;
484    background: $history_running_bg;
485}
486
487.state-color-ok {
488    border-color: $history_ok_border;
489    background: $history_ok_bg;
490}
491
492.state-color-error {
493    border-color: $history_error_border;
494    background: $history_error_bg;
495}
496
497.state-color-deleted {
498    border-color: $history_deleted_border;
499    background: $history_deleted_bg;
500}
501
502.state-fg-new {
503    color: #FFB030;
504}
505
506.state-fg-upload {
507    color: #D090D0;
508}
509
510.state-fg-waiting {
511    color: #E8C060;
512}
513
514.state-fg-queued {
515    color: #888888;
516}
517
518.state-fg-running {
519    color: #AAAA66;
520}
521
522.state-fg-ok {
523    color: #66AA66;
524}
525
526.state-fg-error {
527    color: #AA6666;
528}
529
530.state-fg-deleted {
531    color: #3399FF;
532}
533
534## Button styles
535
536.action-button {
537    background: transparent;
538    line-height: 16px;
539    color: #333;
540    text-decoration: none;
541    font-size: 100%;
542    font-weight: bold;
543    display: inline-block;
544    cursor: pointer;
545    padding: 2px;
546    border: solid #aaaaaa 1px;
547    padding-right: 0.5em;
548    padding-left: 0.5em;
549    -moz-border-radius: 0.5em;
550    -webkit-border-radius: 0.5em;
551    border-radius: 0.5em;
552    user-select: none;
553    -moz-user-select: none;
554    -webkit-user-select: none;
555}
556
557.action-button > * {
558    vertical-align: middle;
559}
560
561.action-button:hover {
562    color: black;
563    background: #dddddd;
564}
565.action-button:active {
566    color: white;
567    background: #aaaaaa;
568}
569
570## A menu button is a button that has an attached popup menu
571
572.menubutton {
573    display: inline-block;
574    cursor: pointer;
575    position: relative;
576    .unselectable;
577    
578    border: solid transparent 1px;
579    -moz-border-radius: 0.25em;
580    -webkit-border-radius: 0.25em;
581    border-radius: 0.25em;
582    
583    padding: 1px 0.25em;
584    margin: -1px -0.25em;
585    
586    .label {
587        position: relative;
588        display: block;
589        border-right: none;
590    }
591}
592
593.menubutton.action-button {
594    border-color: #aaaaaa;
595}
596
597.menubutton.popup, .action-button.popup {
598    padding-right: 20px;
599    background-image: url(../images/dropdownarrow.png);
600    background-repeat: no-repeat;
601    background-position: right 7px;
602}
603
604.menubutton:hover {
605    border-color: #aaaaaa;
606    ## background: #eeeeee;
607    ## color: #333;
608}
609
610## A split menu button, the main button has an action, the arrow causes the
611## popup menu to appear
612
613.menubutton.popup.split {
614    padding-right: 2em;
615}
616
617.menubutton.popup.split:hover {
618    background: url(../images/ddarrowsplit.png) no-repeat right -39px;
619}
620
621## Popup menu styles
622
623.overlay-border {
624    position: absolute;
625    top: 0;
626    left: 0;
627    height: 100%;
628    width: 100%;
629    padding: 1em;
630    margin: -1em;
631    background-color: rgba(0,0,0,0.5);
632    -moz-border-radius: 1em;
633    -webkit-border-radius: 1em;
634    z-index: -1;
635}
636
637div.popmenu-wrapper {
638
639    position: absolute;
640    top: 100%;
641    z-index: 20000;
642
643    ul {
644        
645        display: block;
646        margin: 0;
647        padding: 0;
648        
649        background: white;
650        color: #333;
651        font-weight: bold;    
652        font-style: normal;
653        white-space: nowrap;
654        border: solid #aaaaaa 1px;
655        padding: 3px 0;
656        -moz-border-radius: 0.5em;
657        -webkit-border-radius: 0.5em;
658        border-radius: 0.5em;
659        ## margin: -3px -0.5em;
660        ## min-width: 100%;
661        
662        .unselectable;
663        
664        li {
665            display: block;
666            padding: 3px 1em;
667            cursor: pointer;
668            border-top: solid transparent 1px;
669            border-bottom: solid transparent 1px;
670        }
671        
672        li.head {
673            color: #999;
674            font-style: italic;
675        }
676    }
677}
678
679div.popmenu-wrapper ul li:hover {
680    background: #EEEEFF;
681    border-color: #aaa;
682}
683
684div.popmenu-wrapper ul li.head:hover {
685    background: inherit;
686    border-color: transparent;
687}
688
689.popup-arrow {
690    cursor: pointer;
691    text-decoration: none;
692    color: #555;
693}
694
695.popup-arrow:hover {
696    color: black;
697}
698
699div.permissionContainer {
700    padding-left: 20px;
701}
702
703## Data grid style
704
705.grid-header {
706    padding-bottom: 1em;
707}
708
709.grid-header h2 {
710    margin: 0;
711    margin-bottom: 0.5em;
712}
713
714.grid-header .title {
715    font-weight: bold;
716}
717
718.grid {
719    padding-top: 1em;
720    border-collapse: collapse;
721    width: 100%;
722}
723.grid tbody td {
724    border-top: solid #DDDDDD 1px;
725    border-bottom: solid #DDDDDD 1px;
726    padding: 0.3em 0.5em;
727}
728.grid tbody td:empty {
729    padding: 0;
730}
731.grid thead tr {
732    height: 2em;
733}
734.grid thead th {
735    background: $table_header_bg;
736    ## background-image: url(form_title_bg.png);
737    background-repeat: repeat-x;
738    background-position: top;
739    border-top: solid $table_border 1px;
740    border-bottom: solid $table_border 1px;
741    padding: 0.3em 0.5em;
742    text-align: left;
743    white-space: nowrap;
744}
745.grid tfoot td {
746    background-color: #F8F8F8;
747    border-top: solid #DDDDDD 1px;
748    border-bottom: solid #DDDDDD 1px;
749    padding: 0.3em 0.5em;
750}
751.grid .current {
752    background-color: #EEEEFF;
753}
754
755## Styles for areas of text content
756
757.text-content {
758
759    hr {
760            display:block;
761            background:black;
762            color:black;
763            width:100%;
764            height:1px;
765            border:none;
766            background:#aaa;
767            color:#aaa;
768    }
769    
770    table
771    {
772            border-collapse:collapse;
773            border-top:1px solid #ccc;
774            border-left:1px solid #ccc;
775    }
776    
777    blockquote {
778            color:#666;
779    }
780    
781    fieldset {
782            border-color:#ccc;
783            border:1px solid #ccc;
784    }
785    
786    th,td {
787            border-bottom:1px solid #ddd;
788            border-right:1px solid #ccc;
789    }
790    
791    th,td {
792            padding:.8em;
793    }
794
795}
796
797## Icon buttons.
798
799.icon-button  {
800    width: 16px;
801    height: 16px;
802    display: block;
803    float: left;
804    margin-left: 2px;
805    ## Allow alt text for screen readers
806    text-indent: 20px;
807    background-repeat:no-repeat;
808    background-position: 0px 0px;
809    padding: 0;
810}
811
812.icon-button.display {
813    -sprite-group: history-buttons;
814    -sprite-image: eye_icon.png;
815}
816.icon-button.display:hover {
817    -sprite-group: history-buttons;
818    -sprite-image: eye_icon_dark.png;
819}
820.icon-button.display_disabled {
821    -sprite-group: history-buttons;
822    -sprite-image: eye_icon_grey.png;
823}
824.icon-button.delete {
825    -sprite-group: history-buttons;
826    -sprite-image: delete_icon.png;
827}
828.icon-button.delete:hover {
829    -sprite-group: history-buttons;
830    -sprite-image: delete_icon_dark.png;
831}
832.icon-button.delete_disabled {
833    -sprite-group: history-buttons;
834    -sprite-image: delete_icon_grey.png;
835}
836.icon-button.edit {
837    -sprite-group: history-buttons;
838    -sprite-image: pencil_icon.png;
839}
840.icon-button.edit:hover {
841    -sprite-group: history-buttons;
842    -sprite-image: pencil_icon_dark.png;
843}
844.icon-button.edit_disabled {
845    -sprite-group: history-buttons;
846    -sprite-image: pencil_icon_grey.png;
847}
848.icon-button.tag {
849    -sprite-group: fugue;
850    -sprite-image: fugue/tag-label.png;
851}
852.icon-button.tags {
853    -sprite-group: fugue;
854    -sprite-image: fugue/tags.png;
855}
856.icon-button.tag--plus {
857    -sprite-group: fugue;
858    -sprite-image: fugue/tag--plus.png;
859}
860.icon-button.toggle-expand {
861    -sprite-group: fugue;
862    -sprite-image: fugue/toggle-expand.png;
863}
864.icon-button.toggle {
865    -sprite-group: fugue;
866    -sprite-image: fugue/toggle.png;
867}
868.icon-button.toggle-contract {
869    -sprite-group: fugue;
870    -sprite-image: fugue/toggle.png;
871}
872.icon-button.arrow-circle {
873    -sprite-group: fugue;
874    -sprite-image: fugue/arrow-circle.png;
875}
876.icon-button.chevron {
877    -sprite-group: fugue;
878    -sprite-image: fugue/chevron.png;
879}
880.icon-button.bug {
881    -sprite-group: fugue;
882    -sprite-image: fugue/bug.png;
883}
884.icon-button.disk {
885    -sprite-group: fugue;
886    -sprite-image: fugue/disk.png;
887}
888.icon-button.information {
889    -sprite-group: fugue;
890    -sprite-image: fugue/information-white.png;
891}
892.icon-button.annotate {
893    -sprite-group: fugue;
894    -sprite-image: fugue/sticky-note-text.png;
895}
896.icon-button.vis-chart {
897    -sprite-group: fugue;
898    -sprite-image: fugue/chart.png;
899}
900.icon-button.go-to-full-screen {
901    -sprite-group: fugue;
902    -sprite-image: fugue/external.png;
903}
904.icon-button.import {
905    -sprite-group: fugue;
906    -sprite-image: fugue/plus-circle.png;
907}
908
909.tipsy {
910    padding: 5px;
911    font-size: 10px;
912    filter: alpha(opacity=80);
913    background-repeat: no-repeat;
914    background-image: url(../images/tipsy.gif);
915}
916.tipsy-inner {
917    padding: 5px 8px 4px 8px;
918    background-color: black;
919    color: white;
920    max-width: 200px;
921    text-align: center;
922}
923
924.tipsy-north {
925    background-position: top center;
926}
927
928.tipsy-south {
929    background-position: bottom center;
930}
931
932.tipsy-east {
933    background-position: right center;
934}
935
936.tipsy-west {
937    background-position: left center;
938}
939
940.editable-text {
941    cursor:pointer;
942}
943
944.editable-text:hover {
945    cursor: text;
946    border: dotted #999999 1px;
947}
948
949.text-and-autocomplete-select {
950    -sprite-group: fugue;
951    -sprite-image: fugue/control-270.png;
952    -sprite-horiz-position: right;
953}
954.icon-button.multiinput{
955    background:url(../images/documents-stack.png) no-repeat;
956    cursor:pointer;
957    float:none;
958    display:inline-block;
959    margin-left:10px;
960}
961.icon-button.multiinput.disabled{
962    background:url(../images/documents-stack-faded.png) no-repeat;
963    cursor:auto;
964}
965.workflow-invocation-complete{
966    border:solid 1px #6A6;
967    border-left-width:5px;
968    margin:10px 0;
969    padding-left:5px;
970}
971