|
169
by mattgiuca
Added global common css file (media/common/ivle.css). |
1 |
/* IVLE - Informatics Virtual Learning Environment
|
2 |
* Copyright (C) 2007-2008 The University of Melbourne
|
|
3 |
* Common Style Sheet
|
|
4 |
* This file is redistributable under the terms of the GNU General Public
|
|
5 |
* License version 2 or later.
|
|
6 |
*/
|
|
7 |
||
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
8 |
/** Generic styling **/
|
9 |
||
10 |
html, body { |
|
11 |
margin: 0; |
|
12 |
padding: 0; |
|
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
13 |
background-color: white; |
14 |
color: black; |
|
|
228
by mattgiuca
common/ivle.css: changed font family from "sans" to "sans-serif" (this is |
15 |
font-family: sans-serif; |
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
16 |
font-size: 0.95em; |
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
17 |
}
|
18 |
||
|
1026
by mattgiuca
CSS: Fixed up 'a' elements as follows: |
19 |
a { |
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
20 |
color: navy; |
|
1026
by mattgiuca
CSS: Fixed up 'a' elements as follows: |
21 |
text-decoration: underline; |
22 |
cursor: pointer; |
|
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
23 |
}
|
24 |
a:hover, a:active, a:focus { |
|
25 |
color: blue; |
|
26 |
}
|
|
27 |
||
|
1100.1.34
by Matt Giuca
ivle-headings.html: The IVLE logo is now clickable (takes you to /). |
28 |
a img { |
29 |
border: none; |
|
30 |
}
|
|
31 |
||
|
1294.2.111
by William Grant
Shrink and unembolden h2s. |
32 |
h1 { |
|
1100.1.17
by Matt Giuca
Generic style: h1 is now rendered specially, as a golden bar along the top. |
33 |
margin: 0; |
|
1442.1.29
by William Grant
Restrict the h1 padding to h1s directly inside ivleview, so we can use more h1s lower down. |
34 |
font-size: x-large; |
35 |
font-weight: normal; |
|
36 |
}
|
|
37 |
||
38 |
#ivleview > h1 { |
|
|
1451.1.1
by William Grant
Switch the main h1 to use margin, rather than padding, and add 0.5em beneath it. |
39 |
margin: 0.5em 0 0.5em 0.5em; |
|
1100.1.17
by Matt Giuca
Generic style: h1 is now rendered specially, as a golden bar along the top. |
40 |
}
|
41 |
||
|
1294.2.111
by William Grant
Shrink and unembolden h2s. |
42 |
h2 { |
43 |
font-size: larger; |
|
44 |
font-weight: normal; |
|
|
1100.1.21
by Matt Giuca
ivle.css: Tweaked sizes - ivlepadding and h2. |
45 |
}
|
46 |
||
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
47 |
/** Special styles for header section **/
|
48 |
||
49 |
#ivleheader { |
|
|
361
by mattgiuca
dispatch/html , ivle.css: Split header into 3 divs, and used CSS to explicitly |
50 |
position: absolute; |
|
1100.1.3
by Matt Giuca
webapp/coremedia/ivle.css: Changed the header bar from yellow to blue. |
51 |
background-color: #abf; |
|
1100.1.18
by William Grant
Fix CSS reference to topbar-hashes; it's slashes. |
52 |
background-image: url(../ivle.webapp.core/images/chrome/topbar-slashes.png); |
|
1100.1.1
by Matt Giuca
Added a new look to the IVLE header bar. Mmmm... Web 2.0. |
53 |
background-repeat: repeat-x; |
|
361
by mattgiuca
dispatch/html , ivle.css: Split header into 3 divs, and used CSS to explicitly |
54 |
padding: 0; |
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
55 |
border-bottom: 1px solid black; |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
56 |
/* IMPORTANT: This 2em is hard-coded elsewhere in this file. Search for
|
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
57 |
* #ivleheader.height to update it. */
|
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
58 |
height: 2em; |
|
361
by mattgiuca
dispatch/html , ivle.css: Split header into 3 divs, and used CSS to explicitly |
59 |
left: 0; |
60 |
right: 0; |
|
61 |
z-index: 1; /* Background to all, but the body */ |
|
62 |
}
|
|
63 |
||
|
1294.2.113
by William Grant
Add some comments to the breadcrumb styles. |
64 |
/* Now we have lots of breadcrumb styles.
|
65 |
The breadcrumbs are <li>s in a <ul>. Each <li> has either an <a> or
|
|
66 |
a <span> inside it, with the label of the breadcrumb. <li>s may also
|
|
67 |
have an <ul> inside them, which is a menu that pops up on hover.
|
|
68 |
*/
|
|
|
1294.2.82
by William Grant
Replace the div>span breadcrumbs with ul>li, and style the text. |
69 |
ul#ivle_breadcrumbs { |
|
1100.1.20
by Matt Giuca
IVLE title is now an H1 again. |
70 |
margin: 0; |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
71 |
padding: 0; |
|
1294.2.84
by William Grant
Add styles for popup menus on the breadcrumbs. |
72 |
list-style-type: none; |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
73 |
}
|
74 |
||
|
1294.2.82
by William Grant
Replace the div>span breadcrumbs with ul>li, and style the text. |
75 |
ul#ivle_breadcrumbs > li { |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
76 |
background: url(../ivle.webapp.core/images/chrome/breadcrumb-chevron.png) scroll no-repeat right; |
77 |
float: left; |
|
|
1294.2.81
by William Grant
Leave a little unlinked gap between breadcrumbs. |
78 |
min-height: 29px; |
|
1294.2.104
by William Grant
Recenter the breadcrumb text. |
79 |
margin-right: 4px; |
|
1294.2.84
by William Grant
Add styles for popup menus on the breadcrumbs. |
80 |
position: relative; |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
81 |
}
|
82 |
||
|
1294.2.93
by William Grant
Unbreak breadcrumb menu CSS. |
83 |
ul#ivle_breadcrumbs > li > a { |
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
84 |
display: block; |
|
1294.4.4
by David Coles
Automatically add dropdown arrow for all menus with submenus (Previously only worked for the main IVLE menu). |
85 |
line-height: 2em; |
86 |
padding-right: 16px; |
|
87 |
vertical-align: middle; |
|
|
1294.2.82
by William Grant
Replace the div>span breadcrumbs with ul>li, and style the text. |
88 |
text-decoration: none; |
89 |
color: black; |
|
90 |
}
|
|
91 |
||
|
1294.4.4
by David Coles
Automatically add dropdown arrow for all menus with submenus (Previously only worked for the main IVLE menu). |
92 |
ul#ivle_breadcrumbs > li > a > img { |
93 |
vertical-align: middle; |
|
94 |
}
|
|
95 |
||
|
1294.2.113
by William Grant
Add some comments to the breadcrumb styles. |
96 |
/* There is no breadcrumb to the left of the first one, so there is no margin.
|
97 |
We add a special one. */
|
|
|
1294.2.104
by William Grant
Recenter the breadcrumb text. |
98 |
ul#ivle_breadcrumbs > li:first-child > a { |
99 |
padding-left: 6px; |
|
100 |
}
|
|
101 |
||
|
1294.2.93
by William Grant
Unbreak breadcrumb menu CSS. |
102 |
ul#ivle_breadcrumbs > li > span { |
103 |
display: block; |
|
|
1294.4.4
by David Coles
Automatically add dropdown arrow for all menus with submenus (Previously only worked for the main IVLE menu). |
104 |
line-height: 2em; |
105 |
padding-right: 16px; |
|
106 |
vertical-align: middle; |
|
|
1294.2.93
by William Grant
Unbreak breadcrumb menu CSS. |
107 |
}
|
108 |
||
|
1294.2.83
by William Grant
Missed one. |
109 |
ul#ivle_breadcrumbs > li > a:hover { |
|
1294.2.82
by William Grant
Replace the div>span breadcrumbs with ul>li, and style the text. |
110 |
text-decoration: underline; |
|
1100.1.9
by Matt Giuca
The IVLE logo is now an <img> element, rather than a CSS background. |
111 |
}
|
112 |
||
|
1294.2.84
by William Grant
Add styles for popup menus on the breadcrumbs. |
113 |
ul#ivle_breadcrumbs > li > ul { |
114 |
display: none; |
|
115 |
list-style-type: none; |
|
116 |
||
117 |
position: absolute; |
|
118 |
padding-left: 0; |
|
119 |
top: 2em; |
|
120 |
left: -21px; /* Just meets the chevron on the left. */ |
|
121 |
width: 200px; |
|
122 |
||
123 |
background: #abf; |
|
124 |
border: 1px solid #dee4ff; |
|
125 |
opacity: 0.95; |
|
126 |
}
|
|
127 |
||
|
1294.2.87
by William Grant
Prevent the IVLE crumb's menu from running off the LHS. |
128 |
ul#ivle_breadcrumbs > li:first-child > ul { |
129 |
left: 0; /* Don't want the IVLE menu to run off the LHS. */ |
|
130 |
}
|
|
131 |
||
|
1294.2.84
by William Grant
Add styles for popup menus on the breadcrumbs. |
132 |
ul#ivle_breadcrumbs > li:hover > ul { |
133 |
display: block; |
|
134 |
}
|
|
135 |
||
136 |
ul#ivle_breadcrumbs > li > ul > li { |
|
137 |
padding: 0.3em; |
|
138 |
}
|
|
139 |
||
|
1294.2.113
by William Grant
Add some comments to the breadcrumb styles. |
140 |
/* The IVLE crumb's menu items are extra high, with icons. */
|
|
1294.2.91
by William Grant
Enlarge the IVLE menu's items, and use CSS for the icons, not <img>s. |
141 |
ul#ivle_breadcrumbs > li:first-child > ul > li > a { |
142 |
min-height: 24px; |
|
143 |
vertical-align: middle; |
|
144 |
padding-top: 2px; |
|
145 |
}
|
|
146 |
||
|
1294.2.86
by William Grant
display: block; <a>s in submenus, so the whole row is a link. |
147 |
ul#ivle_breadcrumbs > li > ul > li > a { |
148 |
display: block; |
|
149 |
}
|
|
150 |
||
|
1294.2.84
by William Grant
Add styles for popup menus on the breadcrumbs. |
151 |
ul#ivle_breadcrumbs > li > ul > li:hover { |
152 |
background: #b8c6ff; |
|
153 |
}
|
|
154 |
||
|
1294.4.4
by David Coles
Automatically add dropdown arrow for all menus with submenus (Previously only worked for the main IVLE menu). |
155 |
ul#ivle_breadcrumbs > li.crumbmenu > a { |
|
1294.4.1
by David Coles
Show drop down icon for breadcrumbs with a sub-menu. |
156 |
background: url(../ivle.webapp.core/images/chrome/drop-down.png) scroll no-repeat right; |
157 |
margin-right: 10px; |
|
158 |
}
|
|
159 |
||
|
361
by mattgiuca
dispatch/html , ivle.css: Split header into 3 divs, and used CSS to explicitly |
160 |
#ivleheader_text { |
|
1294.2.114
by William Grant
Absolutely position #ivleheader_text, so it doesn't ever wrap. |
161 |
position: absolute; |
162 |
top: 0; |
|
163 |
right: 0; |
|
|
1100.1.31
by Matt Giuca
Ivle header: Put ivleheader_text inside ivleheader, simplifying the CSS a lot. |
164 |
padding: 0.5em; |
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
165 |
}
|
|
197
by mattgiuca
dispatch.html, ivle.css: Main IVLE header is now an h1/h2 pair, styled to the |
166 |
|
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
167 |
/* Note: The body has NO PADDING by default (unlike plain HTML).
|
168 |
* This is because almost all of the apps need this behaviour.
|
|
169 |
* If a particular app needs padding, it should manually wrap all of its
|
|
170 |
* output in a <div id="ivle_padding">.
|
|
171 |
*/
|
|
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
172 |
#ivlebody { |
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
173 |
/* This is positioned absolutely so that its content can be positioned
|
174 |
* absolutely as well, and so height: 100% really means it. */
|
|
175 |
position: absolute; |
|
|
1294.2.76
by William Grant
Shrink the top bar, and start breadcrumerisation. |
176 |
top: 2em; /* == #ivleheader.height */ |
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
177 |
bottom: 0; |
178 |
width: 100%; |
|
|
361
by mattgiuca
dispatch/html , ivle.css: Split header into 3 divs, and used CSS to explicitly |
179 |
z-index: 0; /* Behind header */ |
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
180 |
}
|
181 |
||
182 |
/* Apps can optionally have a <div id="ivle_padding"> as the outermost
|
|
183 |
* element, if 1em of padding is desired (otherwise there will be no padding).
|
|
|
1100.1.21
by Matt Giuca
ivle.css: Tweaked sizes - ivlepadding and h2. |
184 |
* Note: No top padding, since the first element should have a margins (p or
|
185 |
* h2).
|
|
|
345
by mattgiuca
Global CSS change: ivlebody no longer has 1em of padding (it has none). |
186 |
*/
|
187 |
#ivle_padding { |
|
|
1100.1.21
by Matt Giuca
ivle.css: Tweaked sizes - ivlepadding and h2. |
188 |
padding: 0 1em 1em 1em; |
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
189 |
}
|
190 |
||
|
1442.1.9
by William Grant
Add some extra margin between the projects and worksheets sections. |
191 |
/* Add extra vertical spacing between major page sections. */
|
192 |
#ivle_padding .majorsection { |
|
193 |
margin-bottom: 2em; |
|
194 |
}
|
|
195 |
||
|
1442.1.22
by William Grant
Indent majorsection content by 1.5em. |
196 |
#ivle_padding .majorsection > * { |
197 |
margin-left: 1.5em; |
|
198 |
}
|
|
199 |
||
200 |
#ivle_padding .majorsection > h2:first-child { |
|
201 |
margin-left: 0; |
|
202 |
}
|
|
203 |
||
|
1100.1.31
by Matt Giuca
Ivle header: Put ivleheader_text inside ivleheader, simplifying the CSS a lot. |
204 |
p.userhello { |
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
205 |
font-size: .8em; |
|
198
by mattgiuca
ivle.css: Fixed header layout so it has a minimum height (in the non-tabs |
206 |
margin: 0; |
|
191
by mattgiuca
dispatch.html, ivle.css, browser.css: Major restyling of the IVLE website. |
207 |
}
|
|
1076
by chadnickbok
Created a new app, logout, which when given a GET |
208 |
.userhello .username { |
|
186
by mattgiuca
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML). |
209 |
font-weight: bold; |
210 |
}
|
|
211 |
||
|
455
by mattgiuca
Login now handles the 3 login states: no_agreement, enabled and disabled. |
212 |
/* Terms of Service accept / decline buttons */
|
213 |
#tos_acceptbuttons { |
|
214 |
text-align: center; |
|
215 |
}
|
|
|
1099.1.222
by Nick Chadwick
Added a warning message to exercise editor (untested/unfinished code). |
216 |
|
|
1294.1.10
by William Grant
Switch to CSS form layout for the user edit views. |
217 |
form.verticalform div { |
218 |
padding: 0.2em 0; |
|
219 |
}
|
|
220 |
||
221 |
form.verticalform div label { |
|
222 |
display: block; |
|
223 |
float: left; |
|
224 |
text-align: right; |
|
225 |
width: 200px; |
|
226 |
margin-right: 5px; |
|
227 |
font-weight: bold; |
|
228 |
}
|
|
|
1366
by Matt Giuca
CSS: Moved ivle/webapp/admin/subject-media/project.css's project_list styles to ivle/webapp/coremedia/ivle.css as pretty_table, since it is generally useful and very pretty. |
229 |
|
|
1463.1.1
by William Grant
Explain that exercises must exist before a worksheet can be saved, and provide an exercise management link. |
230 |
form.verticalform div.submit { |
|
1390
by William Grant
Nicely format the worksheet add/edit forms. |
231 |
margin-left: 205px; |
232 |
}
|
|
233 |
||
|
1394.2.15
by William Grant
Prettify ExerciseEditView a bit. |
234 |
.stackedform div label { |
235 |
font-weight: bold; |
|
236 |
}
|
|
237 |
||
|
1370
by Matt Giuca
Subjects list: Rather than use h2 for current, h3 for inactive, use h2 for both with class subject_current for current subjects (more semantic). |
238 |
/* Subjects list */
|
239 |
.subject_current { |
|
240 |
font-weight: bold; |
|
241 |
}
|
|
242 |
||
|
1366
by Matt Giuca
CSS: Moved ivle/webapp/admin/subject-media/project.css's project_list styles to ivle/webapp/coremedia/ivle.css as pretty_table, since it is generally useful and very pretty. |
243 |
.pretty_table { |
244 |
text-align: left; |
|
245 |
border-collapse: collapse; |
|
246 |
}
|
|
247 |
||
248 |
.pretty_table td, .pretty_table th { |
|
249 |
padding: 0.2em 0.7em; |
|
250 |
border-bottom: 1px solid #ccc; |
|
251 |
}
|
|
252 |
||
253 |
.pretty_table th { |
|
254 |
border-bottom: 2px solid gray; |
|
255 |
}
|
|
256 |
||
257 |
.pretty_table tbody td { |
|
258 |
color: #444; |
|
259 |
}
|
|
260 |
||
261 |
.pretty_table tbody tr:hover { |
|
262 |
background-color: #efefef; |
|
263 |
}
|
|
264 |
||
265 |
.pretty_table td:first-child, .pretty_table th:first-child { |
|
266 |
padding-left: 0; |
|
267 |
}
|
|
268 |
||
269 |
.pretty_table tbody tr:hover td { |
|
270 |
color: #111; |
|
271 |
}
|
|
|
1440
by William Grant
Add core add/edit icons from famfamfam Silk, plus some CSS to start an actions meme. |
272 |
|
|
1442.1.10
by William Grant
Add a nice padded list of projects. |
273 |
.paddedlist > li { |
274 |
margin-bottom: 0.5em; |
|
275 |
}
|
|
276 |
||
|
1440
by William Grant
Add core add/edit icons from famfamfam Silk, plus some CSS to start an actions meme. |
277 |
/* Action links have a 16x16 icon on the left. */
|
278 |
.addaction, |
|
|
1463.1.3
by William Grant
ExercisesView links only to the exercise's index, which now has edit and delete links. |
279 |
.deleteaction, |
|
1442
by William Grant
Convert the user modification actions to a context actions menu. |
280 |
.editaction, |
|
1443
by William Grant
Add manage/group actions. |
281 |
.keyaction, |
282 |
.manageaction, |
|
|
1451.1.2
by William Grant
Move Subject.url to Offering, and add Offering.description. Show these on the offering index. |
283 |
.groupaction, |
284 |
.webaction { |
|
|
1444
by William Grant
Increase the space between icon and action from 2 to 4 pixels. |
285 |
padding-left: 20px; |
|
1440
by William Grant
Add core add/edit icons from famfamfam Silk, plus some CSS to start an actions meme. |
286 |
background-position: left center; |
287 |
background-repeat: no-repeat; |
|
288 |
}
|
|
289 |
||
290 |
.addaction { |
|
291 |
background-image: url(images/interface/add.png); |
|
292 |
}
|
|
293 |
||
|
1463.1.3
by William Grant
ExercisesView links only to the exercise's index, which now has edit and delete links. |
294 |
.deleteaction { |
295 |
background-image: url(images/interface/delete.png); |
|
296 |
}
|
|
297 |
||
|
1440
by William Grant
Add core add/edit icons from famfamfam Silk, plus some CSS to start an actions meme. |
298 |
.editaction { |
299 |
background-image: url(images/interface/pencil.png); |
|
300 |
}
|
|
301 |
||
|
1442
by William Grant
Convert the user modification actions to a context actions menu. |
302 |
.keyaction { |
303 |
background-image: url(images/interface/key.png); |
|
304 |
}
|
|
305 |
||
|
1443
by William Grant
Add manage/group actions. |
306 |
.manageaction { |
307 |
background-image: url(images/interface/wrench.png); |
|
308 |
}
|
|
309 |
||
310 |
.groupaction { |
|
311 |
background-image: url(images/interface/group.png); |
|
312 |
}
|
|
313 |
||
|
1451.1.2
by William Grant
Move Subject.url to Offering, and add Offering.description. Show these on the offering index. |
314 |
.webaction { |
315 |
background-image: url(images/interface/world.png); |
|
316 |
}
|
|
317 |
||
|
1440
by William Grant
Add core add/edit icons from famfamfam Silk, plus some CSS to start an actions meme. |
318 |
/* Actions relating the context can be floated at the right. */
|
319 |
.contextactions { |
|
320 |
position: absolute; |
|
321 |
top: 0; |
|
322 |
right: 0; |
|
323 |
margin: 1em; |
|
324 |
}
|
|
|
1442
by William Grant
Convert the user modification actions to a context actions menu. |
325 |
|
326 |
.contextactions a { |
|
327 |
display: block; |
|
328 |
margin-bottom: 0.3em; |
|
329 |
}
|
|
|
1442.1.13
by William Grant
Reduce the opacity of projects that are closed. |
330 |
|
331 |
.project.closed { |
|
332 |
opacity: 0.6; |
|
333 |
}
|
|
|
1457
by William Grant
Make form_errors darkred. |
334 |
|
335 |
.form_error { |
|
336 |
color: darkred; |
|
337 |
}
|