root/galaxy-central/static/june_2007_style/base.css.tmpl

リビジョン 2, 17.1 KB (コミッタ: hatakeyama, 14 年 前)

import galaxy-central

行番号 
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}
112
113div.toolHelpBody {
114    width: 100%;
115    overflow: auto;
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-input {
214    float: left;
215    width: 300px;
216}
217
218div.form-row-input > input {
219    max-width: 300px;
220}
221
222div.form-row-error-message {
223    width: 300px;
224    float: left;
225    color: red;
226    font-weight: bold;
227    padding: 3px 0 0 1em;
228}
229
230select, input, textarea {
231    font: inherit;
232    font-size: 115%;
233}
234
235select, textarea, input[type="text"], input[type="file"], input[type="password"] {
236    -webkit-box-sizing: border-box;
237    max-width: 300px;
238}
239
240## Messages
241
242.errormessagelarge, .warningmessagelarge, .donemessagelarge, .infomessagelarge {
243    padding: 10px;
244    padding-left: 52px;
245    min-height: 32px;
246    border: 1px solid $error_message_border;
247    background-color: $error_message_bg;
248    background-image: url(error_message_icon.png);
249    background-repeat: no-repeat;
250    background-position: 10px 10px;
251}
252
253.warningmessagelarge {
254    background-image: url(warn_message_icon.png);
255    border-color: $warn_message_border;
256    background-color: $warn_message_bg;
257}
258
259.donemessagelarge {
260    background-image: url(done_message_icon.png);
261    border-color: $done_message_border;
262    background-color: $done_message_bg;
263}
264
265.infomessagelarge {
266    background-image: url(info_message_icon.png);
267    border-color: $info_message_border;
268    background-color: $info_message_bg;
269}
270
271.screencastBox {   
272    padding-left: 10px;
273    border-color: #AAAA66;
274    background-color: #FFFFCC;
275    background-image: none;
276}
277
278.errormessage, .warningmessage, .donemessage, .infomessage, .errormessagesmall, .warningmessagesmall, .donemessagesmall, .infomessagesmall {
279    padding: 5px;
280    padding-left: 25px;
281    min-height: 15px;
282    border: 1px solid $error_message_border;
283    background-color: $error_message_bg;
284    background-image: url(error_small.png);
285    background-repeat: no-repeat;
286    background-position: 5px 5px;
287}
288
289.warningmessage, .warningmessagesmall {
290    background-image: url(warn_small.png);
291    border-color: $warn_message_border;
292    background-color: $warn_message_bg;
293}
294
295.donemessage, .donemessagesmall {
296    background-image: url(ok_small.png);
297    border-color: $done_message_border;
298    background-color: $done_message_bg;
299}
300
301.infomessage, .infomessagesmall {
302    background-image: url(info_small.png);
303    border-color: $info_message_border;
304    background-color: $info_message_bg;
305}
306
307.errormark, .warningmark, .donemark, .infomark, .ok_bgr, .err_bgr {
308    padding-left: 20px;
309    min-height: 15px;
310    background: url(error_small.png) no-repeat;
311}
312
313.warningmark {
314    background-image: url(warn_small.png);
315}
316
317.donemark {
318    background-image: url(ok_small.png);
319}
320
321.infomark, .ok_bgr {
322    background-image: url(info_small.png);
323}
324
325table.colored {
326    border-top: solid $table_border 1px;
327    border-bottom: solid $table_border 1px;
328}
329
330table.colored td, table.colored th {
331    text-align: left;
332    padding: 5px;
333}
334
335table.colored tr.header {
336    background: $table_header_bg;
337    background-image: url(form_title_bg.png);
338    background-repeat: repeat-x;
339    background-position: top;
340    border-bottom: solid $table_border 1px;
341    font-weight: bold;
342}
343
344table.colored tr {
345    background: $table_row_bg;
346}
347
348table.colored tr.odd_row {
349    background: $odd_row_bg;
350}
351
352div.debug {
353    margin: 10px;
354    padding: 5px;
355    background: #FFFF99;
356    border: solid #FFFF33 1px;
357    color: black;
358}
359
360div.odd_row {
361    background: $odd_row_bg;
362}
363   
364#footer {
365  display: none;
366}
367
368## Tool panel stuff
369
370td.panel-body {
371    background: white;
372    color: $base_text;
373    background: $menu_bg_over url(menu_bg.png) top repeat-x;
374}
375
376div.toolSectionPad {
377    margin: 0;
378    padding: 0;
379    height: 5px;
380    font-size: 0px;
381}
382
383div.toolSectionDetailsInner {
384    margin-left: 5px;
385    margin-right: 5px;
386}
387
388div.toolSectionTitle {
389    padding-bottom: 0px;
390    font-weight: bold;
391}
392
393div.toolTitle {
394    padding-top: 5px;
395    padding-bottom: 5px;
396    margin-left: 16px;
397    margin-right: 10px;
398    display: list-item;
399    list-style: square outside;
400}
401
402span.toolParameterExpandableCollapsable {
403    font-weight: bold;
404    cursor: pointer;
405}
406ul.toolParameterExpandableCollapsable {
407    list-style: none;
408}
409
410ul.manage-table-actions {
411    float: right;
412    margin-top: -2.5em;
413}
414ul.manage-table-actions li {
415    display: block;
416    float: left;
417    margin-left: 0.5em;
418}
419
420## State colors
421
422.state-color-new {
423    border-color: $history_new_border;
424    background: $history_new_bg;
425}
426
427.state-color-upload {
428    border-color: $history_upload_border;
429    background: $history_upload_bg;
430}
431
432.state-color-waiting {
433    border-color: $history_waiting_border;
434    background: $history_waiting_bg;
435}
436
437.state-color-queued {
438    border-color: $history_queued_border;
439    background: $history_queued_bg;
440}
441
442.state-color-running {
443    border-color: $history_running_border;
444    background: $history_running_bg;
445}
446
447.state-color-ok {
448    border-color: $history_ok_border;
449    background: $history_ok_bg;
450}
451
452.state-color-error {
453    border-color: $history_error_border;
454    background: $history_error_bg;
455}
456
457.state-color-deleted {
458    border-color: $history_deleted_border;
459    background: $history_deleted_bg;
460}
461
462.state-fg-new {
463    color: #FFB030;
464}
465
466.state-fg-upload {
467    color: #D090D0;
468}
469
470.state-fg-waiting {
471    color: #E8C060;
472}
473
474.state-fg-queued {
475    color: #888888;
476}
477
478.state-fg-running {
479    color: #AAAA66;
480}
481
482.state-fg-ok {
483    color: #66AA66;
484}
485
486.state-fg-error {
487    color: #AA6666;
488}
489
490.state-fg-deleted {
491    color: #3399FF;
492}
493
494## Button styles
495
496.action-button {
497    background: transparent;
498    line-height: 16px;
499    color: #333;
500    text-decoration: none;
501    font-size: 100%;
502    font-weight: bold;
503    display: inline-block;
504    cursor: pointer;
505    padding: 2px;
506    border: solid #aaaaaa 1px;
507    padding-right: 0.5em;
508    padding-left: 0.5em;
509    -moz-border-radius: 0.5em;
510    -webkit-border-radius: 0.5em;
511    border-radius: 0.5em;
512    user-select: none;
513    -moz-user-select: none;
514    -webkit-user-select: none;
515}
516
517.action-button > * {
518    vertical-align: middle;
519}
520
521.action-button:hover {
522    color: black;
523    background: #dddddd;
524}
525.action-button:active {
526    color: white;
527    background: #aaaaaa;
528}
529
530## A menu button is a button that has an attached popup menu
531
532.menubutton {
533    display: inline-block;
534    cursor: pointer;
535    position: relative;
536    .unselectable;
537   
538    border: solid transparent 1px;
539    -moz-border-radius: 0.5em;
540    -webkit-border-radius: 0.5em;
541    border-radius: 0.5em;
542   
543    padding: 3px 0.5em;
544    margin: -3px -0.5em;
545   
546    .label {
547        position: relative;
548        display: block;
549        border-right: none;
550    }
551}
552
553.menubutton.action-button {
554    border-color: #aaaaaa;
555}
556
557.menubutton.popup, .action-button.popup {
558    padding-right: 20px;
559    background-image: url(../images/dropdownarrow.png);
560    background-repeat: no-repeat;
561    background-position: right 8px;
562}
563
564.menubutton:hover {
565    border-color: #aaaaaa;
566    ## background: #eeeeee;
567    ## color: #333;
568}
569
570## A split menu button, the main button has an action, the arrow causes the
571## popup menu to appear
572
573.menubutton.popup.split {
574    padding-right: 2em;
575}
576
577.menubutton.popup.split:hover {
578    background: url(../images/ddarrowsplit.png) no-repeat right -38px;
579}
580
581## Popup menu styles
582
583.overlay-border {
584    position: absolute;
585    top: 0;
586    left: 0;
587    height: 100%;
588    width: 100%;
589    padding: 1em;
590    margin: -1em;
591    background-color: rgba(0,0,0,0.5);
592    -moz-border-radius: 1em;
593    -webkit-border-radius: 1em;
594    z-index: -1;
595}
596
597div.popmenu-wrapper {
598
599    position: absolute;
600    top: 100%;
601    z-index: 20000;
602
603    ul {
604       
605        display: block;
606        margin: 0;
607        padding: 0;
608       
609        background: white;
610        color: #333;
611        font-weight: bold;   
612        font-style: normal;
613        white-space: nowrap;
614        border: solid #aaaaaa 1px;
615        padding: 3px 0;
616        -moz-border-radius: 0.5em;
617        -webkit-border-radius: 0.5em;
618        border-radius: 0.5em;
619        ## margin: -3px -0.5em;
620        ## min-width: 100%;
621       
622        .unselectable;
623       
624        li {
625            display: block;
626            padding: 3px 1em;
627            cursor: pointer;
628            border-top: solid transparent 1px;
629            border-bottom: solid transparent 1px;
630        }
631       
632        li.head {
633            color: #999;
634            font-style: italic;
635        }
636    }
637}
638
639div.popmenu-wrapper ul li:hover {
640    background: #EEEEFF;
641    border-color: #aaa;
642}
643
644div.popmenu-wrapper ul li.head:hover {
645    background: inherit;
646    border-color: transparent;
647}
648
649.popup-arrow {
650    cursor: pointer;
651    text-decoration: none;
652    color: #555;
653}
654
655.popup-arrow:hover {
656    color: black;
657}
658
659div.permissionContainer {
660    padding-left: 20px;
661}
662
663## Data grid style
664
665.grid-header {
666    padding-bottom: 1em;
667}
668
669.grid-header h2 {
670    margin: 0;
671    margin-bottom: 0.5em;
672}
673
674.grid-header .title {
675    font-weight: bold;
676}
677
678.grid {
679    padding-top: 1em;
680    border-collapse: collapse;
681    width: 100%;
682}
683.grid tbody td {
684    border-top: solid #DDDDDD 1px;
685    border-bottom: solid #DDDDDD 1px;
686    padding: 0.5em 1em;
687}
688.grid tbody td:empty {
689    padding: 0;
690}
691.grid thead th {
692    background: $table_header_bg;
693    ## background-image: url(form_title_bg.png);
694    background-repeat: repeat-x;
695    background-position: top;
696    border-top: solid $table_border 1px;
697    border-bottom: solid $table_border 1px;
698    padding: 0.5em 1em;
699    text-align: left;
700}
701.grid tfoot td {
702    background-color: #F8F8F8;
703    border-top: solid #DDDDDD 1px;
704    border-bottom: solid #DDDDDD 1px;
705    padding: 0.5em 1em;
706}
707.grid .current {
708    background-color: #EEEEFF;
709}
710
711## Styles for areas of text content
712
713.text-content {
714
715    hr {
716            display:block;
717            background:black;
718            color:black;
719            width:100%;
720            height:1px;
721            border:none;
722            background:#aaa;
723            color:#aaa;
724    }
725   
726    table
727    {
728            border-collapse:collapse;
729            border-top:1px solid #ccc;
730            border-left:1px solid #ccc;
731    }
732   
733    blockquote {
734            color:#666;
735    }
736   
737    fieldset {
738            border-color:#ccc;
739            border:1px solid #ccc;
740    }
741   
742    th,td {
743            border-bottom:1px solid #ddd;
744            border-right:1px solid #ccc;
745    }
746   
747    th,td {
748            padding:.8em;
749    }
750
751}
752
753## Icon buttons.
754
755.icon-button  {
756    width: 16px;
757    height: 16px;
758    display: block;
759    float: left;
760    margin-left: 2px;
761    ## Allow alt text for screen readers
762    text-indent: 20px;
763    background-repeat:no-repeat;
764    background-position: 0px 0px;
765    padding: 0;
766}
767
768.icon-button.display {
769    -sprite-group: history-buttons;
770    -sprite-image: eye_icon.png;
771}
772.icon-button.display:hover {
773    -sprite-group: history-buttons;
774    -sprite-image: eye_icon_dark.png;
775}
776.icon-button.display_disabled {
777    -sprite-group: history-buttons;
778    -sprite-image: eye_icon_grey.png;
779}
780.icon-button.delete {
781    -sprite-group: history-buttons;
782    -sprite-image: delete_icon.png;
783}
784.icon-button.delete:hover {
785    -sprite-group: history-buttons;
786    -sprite-image: delete_icon_dark.png;
787}
788.icon-button.edit {
789    -sprite-group: history-buttons;
790    -sprite-image: pencil_icon.png;
791}
792.icon-button.edit:hover {
793    -sprite-group: history-buttons;
794    -sprite-image: pencil_icon_dark.png;
795}
796.icon-button.edit_disabled {
797    -sprite-group: history-buttons;
798    -sprite-image: pencil_icon_grey.png;
799}
800.icon-button.tag {
801    -sprite-group: fugue;
802    -sprite-image: fugue/tag-label.png;
803}
804.icon-button.tags {
805    -sprite-group: fugue;
806    -sprite-image: fugue/tags.png;
807}
808.icon-button.tag--plus {
809    -sprite-group: fugue;
810    -sprite-image: fugue/tag--plus.png;
811}
812.icon-button.toggle-expand {
813    -sprite-group: fugue;
814    -sprite-image: fugue/toggle-expand.png;
815}
816.icon-button.toggle {
817    -sprite-group: fugue;
818    -sprite-image: fugue/toggle.png;
819}
820.icon-button.toggle-contract {
821    -sprite-group: fugue;
822    -sprite-image: fugue/toggle.png;
823}
824.icon-button.arrow-circle {
825    -sprite-group: fugue;
826    -sprite-image: fugue/arrow-circle.png;
827}
828.icon-button.chevron {
829    -sprite-group: fugue;
830    -sprite-image: fugue/chevron.png;
831}
832.icon-button.bug {
833    -sprite-group: fugue;
834    -sprite-image: fugue/bug.png;
835}
836.icon-button.disk {
837    -sprite-group: fugue;
838    -sprite-image: fugue/disk.png;
839}
840.icon-button.annotate {
841    -sprite-group: fugue;
842    -sprite-image: fugue/sticky-note-text.png;
843}
844.icon-button.vis-chart {
845    -sprite-group: fugue;
846    -sprite-image: fugue/chart.png;
847}
848.icon-button.go-to-full-screen {
849    -sprite-group: fugue;
850    -sprite-image: fugue/external.png;
851}
852.icon-button.import {
853    -sprite-group: fugue;
854    -sprite-image: fugue/plus-circle.png;
855}
856
857.tipsy {
858    padding: 5px;
859    font-size: 10px;
860    filter: alpha(opacity=80);
861    background-repeat: no-repeat;
862    background-image: url(../images/tipsy.gif);
863}
864.tipsy-inner {
865    padding: 5px 8px 4px 8px;
866    background-color: black;
867    color: white;
868    max-width: 200px;
869    text-align: center;
870}
871
872.tipsy-north {
873    background-position: top center;
874}
875
876.tipsy-south {
877    background-position: bottom center;
878}
879
880.tipsy-east {
881    background-position: right center;
882}
883
884.tipsy-west {
885    background-position: left center;
886}
887
888.editable-text {
889    cursor:pointer;
890}
891
892.editable-text:hover {
893    cursor: text;
894    border: dotted #999999 1px;
895}
896
897.text-and-autocomplete-select {
898    -sprite-group: fugue;
899    -sprite-image: fugue/control-270.png;
900    -sprite-horiz-position: right;
901}
902   
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。