Implement the flow table layout in the Details View.
[online-glom:gwt-glom.git] / src / main / webapp / style.css
1 body
2 {
3         font-size: medium;
4         font-family: sans-serif;
5         margin: 1em;
6 }
7
8 a
9 {
10         font-weight: bold;
11         color: #333;
12         text-decoration: none;
13 }
14
15 a:hover
16 {
17         color: #666;
18         text-decoration: underline;
19 }
20
21 /**
22  * Top and Bottom Navigation Boxes
23  */
24 #headbox, #footbox
25 {
26         background-color: #eee;
27         border: 1px solid #aaa;
28         padding: 0.2em;
29         border-radius: 3px;
30         overflow: hidden;
31 }
32
33 .backlink
34 {
35         float: left;
36         margin: 0.2em 0.5em;
37 }
38
39 .tablechooser
40 {
41         float: right;
42         font-size: 13.3333px;
43         font-family: sans-serif;
44 }
45
46 .records
47 {
48         float: left;
49         margin: 0.2em 0.5em;
50         color: #333;
51 }
52
53 .details-navigation
54 {
55         float: right;
56         margin: 0.2em 0.5em;
57 }
58
59 .details-navigation a
60 {
61         padding-right: 1em;
62 }
63
64 table
65 {
66         border-collapse: collapse;
67 }
68 td
69 {
70         vertical-align: top;
71         padding: 0;
72         padding-right: 2em;
73 }
74
75 /**
76  * List View
77  */
78 table.data-list
79 {
80         width: 100%;
81         margin-top: 1em;
82 }
83
84 table.data-list th
85 {
86         background-color: #ccc;
87         border: 1px solid #000;
88         text-align: left;
89         font-weight: normal;
90         padding: 0.2em;
91         color: #000;
92 }
93
94 table.data-list td
95 {
96         background-color: #fff;
97         border: 1px dotted #aaa;
98         padding: 0.2em;
99         font-size: medium;
100         vertical-align: middle;
101 }
102
103 /* This is for the details column of the List View.
104    Note: Firefox, Chrome, and Safari only support the span and width
105          attributes of the col element.
106  */
107 table.data-list col.details
108 {
109
110 }
111
112 /* TODO: add 'table.data-list td.details' */
113
114 /**
115  * Details View
116  */
117 .group
118 {
119         margin: 1em 0;
120         background-color: #eee;
121         padding: 0.8em;
122         border-radius: 7px;
123 }
124
125 .group-contents
126 {
127         padding-left: 0.8em;
128 }
129
130 .subgroup
131 {
132
133 }
134
135 .group table.data-list
136 {
137         margin-bottom: 0.8em;
138 }
139
140 table.columns
141 {
142         width: 100%;
143 }
144
145 .group-title
146 {
147         font-weight: bold;
148         font-size: 100%;
149         padding: 0;
150         margin: 0;
151         margin-bottom: 0.8em;
152         border-bottom: 1px dashed #000;
153 }
154
155 .subgroup-title
156 {
157         font-weight: bold;
158         font-size: 100%;
159         padding: 0;
160         margin: 0;
161         margin-bottom: 0.6em;
162 }
163
164 group
165 {
166         margin-top: 0;
167         margin-bottom: 0.8em;
168 }
169
170 .details-cell
171 {
172         margin-top: 0;
173         margin-bottom: 0.8em;
174         overflow: hidden;
175 }
176
177 .details-data
178 {
179         padding: 0 0.25em;
180         color: #333;
181         float: left;
182 }
183
184 .details-label
185 {
186         padding: 0 0.25em;
187         float: left;
188 }
189