source: vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/style.less @ 5149

Last change on this file since 5149 was 5149, checked in by Twan Goosen, 10 years ago

Further less/css refactoring... moved colour-common in with style, and importing colour variables first so that the theme colours do not need to import common colour styles

  • Property svn:executable set to *
File size: 7.2 KB
Line 
1/* global */
2html{height: 100%;}
3
4body
5{ font-family: arial, sans-serif;
6  padding: 0px;
7  margin: 0px;
8  font-size: .78em;
9}
10
11p
12{ margin: 0px;
13  padding: 0px 0px 16px 0px;
14  line-height: 1.7em;
15}
16
17h1
18{ font-family: serif;
19  font-size: 108%;
20  letter-spacing: .1em;
21}
22
23h2
24{
25    width: 100%;
26    margin: 0px 0px 1em 0px;
27    padding: 8px 0px 0px 0px;
28    font-size: 100%;
29    letter-spacing: .1em;
30    font-weight: bold;
31    text-decoration: none;
32    border-bottom: 1px solid #666;
33    text-transform: uppercase;
34}
35
36h3
37{ margin: 0px;
38  padding: 4px 0px 4px 0px;
39  font-size: 100%;
40  letter-spacing: .1em;
41  font-weight: bold;
42}
43
44img{border: 0px;}
45
46a{outline: none;}
47
48/* image positioning - left, right and center */
49.left
50{ float: left; 
51  padding: 0px 8px 0px 0px;
52}
53
54.right
55{ float: right; 
56  padding: 0px 0px 0px 8px;
57}
58
59.center
60{ display: block;
61  text-align: center;
62  margin: 0 auto;
63}
64
65/* block quote */
66blockquote
67{ margin: 20px 0px 20px 0px; 
68  padding: 10px 20px 0px 20px;
69  border-left: 8px solid;
70}
71
72/* unordered list */
73ul
74{ margin: 8px 0px 0px 16px;
75  padding: 0px;
76}
77
78ul li
79{ list-style-type: square;
80  margin: 0px 0px 11px 0px; 
81  padding: 0px;
82}
83
84/* ordered list */
85ol
86{ margin: 8px 0px 0px 24px;
87  padding: 0px;
88}
89
90ol li
91{ margin: 0px 0px 11px 0px; 
92  padding: 0px;
93}
94
95/* margin lefts / margin rights - to centre content */
96#main, #links, #footer, #logo, #menu, div.content
97{ margin-left: auto; 
98  margin-right: auto;
99}
100
101/* main container */
102#main{
103    width: 980px; /* used to be 850px */
104}
105
106/* header */
107#header
108{ border-top: 1px solid; 
109  border-bottom: 1px solid;
110  height: 87px;
111}
112
113/* logo */
114#logo
115{ padding: 11px 0px 0px 14px;
116  float: left;
117}
118
119#address
120{ padding: 11px 17px 0px 14px;
121  float: right;
122  text-align: right;
123}
124
125#logo h1
126{ font-family: verdana, arial, sans-serif;
127  margin: 0px;
128  padding: 18px 0px 0px 0px;
129  font-size: 160%;
130  letter-spacing: .3em;
131}
132
133#logo h2
134{ font-family: verdana, arial, sans-serif;
135  margin: 0px;
136  padding: 5px 0px 0px 0px;
137  font-size: 100%;
138  letter-spacing: .2em;
139}
140
141/* navigation menu */
142#menu
143{ height: 40px; 
144  border-bottom: 1px solid;
145}
146
147#menu ul{margin: 0px auto;} 
148
149#menu li
150{ float: left; 
151  margin: 0px 0px 0px 0px; 
152  padding: 0px;
153  list-style: none;
154} 
155
156#menu li a 
157{ font-family: verdana, arial, sans-serif;
158  display: block; 
159  float: left; 
160  height: 27px;
161  text-decoration: none; 
162  padding: 11px 14px 2px 14px;
163  text-transform: uppercase;
164  font-size: 80%;
165  border-right: 1px solid;
166} 
167
168#links
169{ float: right; 
170  width: 100px;
171  text-align: right;
172  padding: 10px 18px 0px 0px;
173}
174
175/* top bar */
176.topbar
177{ 
178    margin: 8px 15px 2px 15px;
179    padding: 0px 0px 0px 0px;
180    clear: both;
181}
182
183/* sidebars */
184.sidebar
185{
186    float: left;
187    width: 214px; /*  used to be 194px */
188    padding: 16px 15px 15px 15px;
189}
190
191/* sidebar items / links */
192.sidebaritem
193{ text-align: left;
194  width: 100%; /*  used to be 194px */
195  float: left;
196  margin: 0px 0px 11px 0px;
197  padding: 0px 0px 0px 0px;
198}
199
200.sidebaritem h1, .sidebaritem h2, .sidebaritem p, .topbar h1, .topbar p {margin: 0px 10px 0px 10px}
201
202.sidebaritem h1, .topbar h1
203{ font-weight: normal; padding: 8px 0px 8px 0px;
204  text-transform: uppercase;
205}
206
207.sidebaritem p, .topbar p
208{ line-height: 16px; 
209  padding: 0px 0px 8px 0px;
210}
211
212.sbilinks {clear: both;}
213
214.sbilinks ul{margin: 0px;}
215
216.sbilinks li
217{ list-style: none; 
218  padding: 0px 0px 0px 0px;
219  margin: 0px 0px 5px 0px;
220}
221
222.sbilinks li a, .sbilinks li a:hover
223{ 
224    padding: 0px 0px 2px 14px;
225    height: 16px;
226    text-decoration: none; 
227    width: 149px;
228} 
229
230/* page content (centre) */
231div.content
232{
233    width: 697px;
234    margin: 8px 15px 2px 20px;
235    float: left;
236}
237
238div.content h1
239{ font-family: arial, sans-serif;
240  margin: 2px 0px 12px 0px; 
241  font-size: 128%; 
242  font-weight: normal;
243  text-transform: uppercase;
244}
245
246div.content a, div.content a:hover
247{ padding: 0px 0px 2px 0px;
248  text-decoration: none;
249}
250
251/* footer */
252#footer
253{ height: 44px; 
254  padding: 18px 0px 4px 0px;
255  font-size: 80%;
256  text-transform: uppercase;
257  font-family: verdana, arial, sans-serif;
258  clear: both;
259  text-align: center; 
260}
261
262#footer a
263{ text-decoration: none;
264  padding: 0px 0px 2px 0px;
265  border-bottom: 1px dashed;
266}
267
268#footer a:hover
269{ text-decoration: none;
270  padding: 0px 0px 2px 0px;
271  border-bottom: 1px solid;
272}
273
274/* Based on Nifty Corners: rounded corners without images */
275/* By Alessandro Fulciniti */
276/* http://www.html.it/articoli/nifty/index.html */
277.rtop, .rbottom{display: block; clear: both;}
278
279.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
280.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
281{ display: block;
282  height: 1px;
283  overflow: hidden; 
284}
285
286.r1{margin: 0 5px}
287
288.r2{margin: 0 3px}
289
290.r3{margin: 0 2px}
291
292.rtop .r4, .rbottom .r4
293{ margin: 0 1px;
294  height: 2px
295}
296
297blockquote{border-color: #777;}
298
299a:hover, div.content a:hover, .facetvalues li a:hover {
300    color: #000;
301}
302
303h1
304{ background: transparent;
305  color: #4c504d;
306}
307
308#header
309{ background: #B5B9A7;
310  color: #777;
311  border-top-color: #EEE;
312  border-bottom-color: #ABB197;
313}
314
315#logo, #logo h1
316{ background: transparent;
317  color: #777;
318}
319
320#menu li a
321{ background: transparent;
322  color: #F5F6F0;
323  border-color: #989898;
324}
325
326#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
327{ background: #c9b4a8 url(menu_hover.png);
328  color: #F5F6F0;
329  border-color: #989898;
330}
331
332
333.sbilinks li a, .sidebaritem a, .topbar a, .facetvalues a
334{ 
335    /*background: transparent url(arrow.png) no-repeat left center;*/
336    color: #555;
337}
338
339.sbilinks li a:hover, .sidebaritem a:hover,  .facetvalues a:hover
340{
341    color: #555;
342    text-decoration: underline;
343} 
344
345div.content a
346{ background: transparent;
347  color: #666257;
348}
349
350#address, #footer a, #footer a:hover
351{ background: transparent;
352  color: #414141;
353}
354
355#record .attributeValues .searchword, #recordcmdi .searchword {
356    background: yellow;
357}
358
359/*
360 * colours, using the colour variables from the themes
361 */
362
363body{background: @body-background;}
364
365#main{background: @main-background;}
366
367#menu
368{ background: @menu-background url(menu.png);
369  color: @menu-foregrond;
370  border-color: @menu-border-color;
371}
372
373.sidebar, div.content
374{ background: @main-background;
375  color: @content-color;
376}
377
378.sidebaritem, .topbar
379{ background: @sidebar-item-background;
380  color: @sidebar-item-foreground;
381} 
382
383#footer
384{ background: @footer-background url(footer.png) repeat-x;
385  color: @footer-foreground;
386  border-color: @footer-border-color;
387}
388
389li.searchresultitem:nth-child(even), #record .recorddetailstable tr:nth-child(odd) {
390    background: @search-result-alternative-background;
391}
392
393span.breadcrumbfacet:hover {
394    background: @breadcrumb-hover-background;
395}
396
397/* Based on Nifty Corners: rounded corners without images */
398/* By Alessandro Fulciniti */
399/* http://www.html.it/articoli/nifty/index.html */
400.rtop, .rbottom{background: @main-background;}
401.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
402.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: @sidebar-item-background;}
Note: See TracBrowser for help on using the repository browser.