← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to ivle/webapp/coremedia/ivle.css

  • Committer: William Grant
  • Date: 2009-12-08 03:50:24 UTC
  • mfrom: (1294.2.143 ui-the-third)
  • Revision ID: grantw@unimelb.edu.au-20091208035024-wjx8zp54gth15ph8
Merge ui-the-third. This is another UI revamp.

The header is now thin! Thin! The yellow bar is gone. The tabs are gone.
Breadcrumbs are here. Routes is replaced (with an object publishing
mechanism). Views are less repetitive. etc.

Show diffs side-by-side

added added

removed removed

Lines of Context:
ivle/webapp/coremedia/ivle.css
33
33
    border: none;
34
34
}
35
35
 
36
 
/* h1s are styled specially to a small golden 3D bar */
37
 
#ivlebody h1 {
38
 
    background-color: #fea;
39
 
    background-image: url(../ivle.webapp.core/images/chrome/h1-bg.png);
40
 
    background-repeat: repeat-y;
 
36
h1 {
41
37
    margin: 0;
42
 
    padding: 0.5em;
43
 
    border-top: white 2px solid;        /* Top edge of 3D effect */
44
 
    border-bottom: #863 1px solid;      /* Bottom edge of 3D effect */
45
 
    font-size: 1em;
46
 
    font-weight: bold;
 
38
    padding: 0.5em 0 0 0.5em;
 
39
    font-size: x-large;
 
40
    font-weight: normal;
47
41
}
48
42
 
49
 
#ivlebody h2 {
50
 
    font-size: 1.4em;
 
43
h2 {
 
44
    font-size: larger;
 
45
    font-weight: normal;
51
46
}
52
47
 
53
48
/** Special styles for header section **/
59
54
    background-repeat: repeat-x;
60
55
    padding: 0;
61
56
    border-bottom: 1px solid black;
62
 
    /* IMPORTANT: This 4em is hard-coded elsewhere in this file. Search for
 
57
    /* IMPORTANT: This 2em is hard-coded elsewhere in this file. Search for
63
58
     * #ivleheader.height to update it. */
64
 
    height: 4em;
 
59
    height: 2em;
65
60
    left: 0;
66
61
    right: 0;
67
62
    z-index: 1;     /* Background to all, but the body */
68
63
}
69
64
 
70
 
#ivleheader h1 {
 
65
/* Now we have lots of breadcrumb styles.
 
66
   The breadcrumbs are <li>s in a <ul>. Each <li> has either an <a> or
 
67
   a <span> inside it, with the label of the breadcrumb. <li>s may also
 
68
   have an <ul> inside them, which is a menu that pops up on hover.
 
69
 */
 
70
ul#ivle_breadcrumbs {
71
71
    margin: 0;
72
 
    padding: 8px;
 
72
    padding: 0;
 
73
    list-style-type: none;
 
74
}
 
75
 
 
76
ul#ivle_breadcrumbs > li {
 
77
    background: url(../ivle.webapp.core/images/chrome/breadcrumb-chevron.png) scroll no-repeat right;
 
78
    float: left;
 
79
    min-height: 29px;
 
80
    margin-right: 4px;
 
81
    position: relative;
 
82
}
 
83
 
 
84
ul#ivle_breadcrumbs > li > a {
 
85
    display: block;
 
86
    line-height: 2em;
 
87
    padding-right: 16px;
 
88
    vertical-align: middle;
 
89
    text-decoration: none;
 
90
    color: black;
 
91
}
 
92
 
 
93
ul#ivle_breadcrumbs > li > a > img {
 
94
    vertical-align: middle;
 
95
}
 
96
 
 
97
/* There is no breadcrumb to the left of the first one, so there is no margin.
 
98
   We add a special one. */
 
99
ul#ivle_breadcrumbs > li:first-child > a {
 
100
    padding-left: 6px;
 
101
}
 
102
 
 
103
ul#ivle_breadcrumbs > li > span {
 
104
    display: block;
 
105
    line-height: 2em;
 
106
    padding-right: 16px;
 
107
    vertical-align: middle;
 
108
}
 
109
 
 
110
ul#ivle_breadcrumbs > li > a:hover {
 
111
    text-decoration: underline;
 
112
}
 
113
 
 
114
ul#ivle_breadcrumbs > li > ul {
 
115
    display: none;
 
116
    list-style-type: none;
 
117
 
 
118
    position: absolute;
 
119
    padding-left: 0;
 
120
    top: 2em;
 
121
    left: -21px; /* Just meets the chevron on the left. */
 
122
    width: 200px;
 
123
 
 
124
    background: #abf;
 
125
    border: 1px solid #dee4ff;
 
126
    opacity: 0.95;
 
127
}
 
128
 
 
129
ul#ivle_breadcrumbs > li:first-child > ul {
 
130
    left: 0; /* Don't want the IVLE menu to run off the LHS. */
 
131
}
 
132
 
 
133
ul#ivle_breadcrumbs > li:hover > ul {
 
134
    display: block;
 
135
}
 
136
 
 
137
ul#ivle_breadcrumbs > li > ul > li {
 
138
    padding: 0.3em;
 
139
}
 
140
 
 
141
/* The IVLE crumb's menu items are extra high, with icons. */
 
142
ul#ivle_breadcrumbs > li:first-child > ul > li > a {
 
143
    min-height: 24px;
 
144
    vertical-align: middle;
 
145
    padding-top: 2px;
 
146
}
 
147
 
 
148
ul#ivle_breadcrumbs > li > ul > li > a {
 
149
    display: block;
 
150
}
 
151
 
 
152
ul#ivle_breadcrumbs > li > ul > li:hover {
 
153
    background: #b8c6ff;
 
154
}
 
155
 
 
156
ul#ivle_breadcrumbs > li.crumbmenu > a {
 
157
    background: url(../ivle.webapp.core/images/chrome/drop-down.png) scroll no-repeat right;
 
158
    margin-right: 10px;
73
159
}
74
160
 
75
161
#ivleheader_text {
76
162
    position: absolute;
77
 
    padding: 0.5em;
78
163
    top: 0;
79
 
    right: 0.5em;
 
164
    right: 0;
 
165
    padding: 0.5em;
80
166
}
81
167
 
82
168
/* Note: The body has NO PADDING by default (unlike plain HTML).
88
174
    /* This is positioned absolutely so that its content can be positioned
89
175
     * absolutely as well, and so height: 100% really means it. */
90
176
    position: absolute;
91
 
    top: 4em;               /* == #ivleheader.height */
 
177
    top: 2em;               /* == #ivleheader.height */
92
178
    bottom: 0;
93
179
    width: 100%;
94
180
    z-index: 0;     /* Behind header */
111
197
    font-weight: bold;
112
198
}
113
199
 
114
 
/* The tabs bar is positioned absolutely, unlike the other header content.
115
 
 * This allows it to be aligned exactly with the bottom of the header bar.
116
 
 */
117
 
#ivleheader_tabs {
118
 
    position: absolute;
119
 
    right: 1em;
120
 
    bottom: 0;
121
 
}
122
 
 
123
 
#ivleheader_tabs p {
124
 
    /* This allows for a single paragraph, currently used to display a warning
125
 
     * about Debuginfo */
126
 
    position: absolute;
127
 
    left: 1em;
128
 
    bottom: 0.5em;
129
 
    margin: 0;
130
 
}
131
 
 
132
 
ul#apptabs {
133
 
    margin: 0;
134
 
    white-space: nowrap;
135
 
}
136
 
 
137
 
ul#apptabs li {
138
 
    display: inline;
139
 
    /*border: 1px solid black;*/
140
 
    /*background-color: #fc6;*/
141
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-left.png);
142
 
    background-repeat: no-repeat;
143
 
    background-position: top left;
144
 
    padding: 0;
145
 
    padding-left: 4px;
146
 
}
147
 
ul#apptabs li a {
148
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-right.png);
149
 
    background-repeat: no-repeat;
150
 
    background-position: top right;
151
 
    padding: 0;
152
 
    padding-right: 4px;
153
 
}
154
 
ul#apptabs li a span {
155
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-mid.png);
156
 
    background-repeat: repeat-x;
157
 
    padding: 0 3px;
158
 
}
159
 
ul#apptabs li:hover {
160
 
    /*background-color: #fd8;*/
161
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-left.png);
162
 
}
163
 
ul#apptabs li:hover a {
164
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-right.png);
165
 
}
166
 
ul#apptabs li:hover a span {
167
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-mid.png);
168
 
}
169
 
/* Currently active app tab */
170
 
ul#apptabs li.thisapp {
171
 
    /*background-color: white;*/
172
 
    /*border-bottom: 1px solid white;*/
173
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-left.png);
174
 
}
175
 
ul#apptabs li.thisapp a {
176
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-right.png);
177
 
}
178
 
ul#apptabs li.thisapp a span {
179
 
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-mid.png);
180
 
}
181
 
 
182
 
ul#apptabs a {
183
 
    color: navy;    /* Text colour not to change */
184
 
    text-decoration: none;
185
 
}
186
 
 
187
200
/* Terms of Service accept / decline buttons */
188
201
#tos_acceptbuttons {
189
202
    text-align: center;
190
203
}
191
204
 
192
 
/* For system warning messages */
193
 
.system_warning {
194
 
    margin: 1em;
195
 
    padding: 0.5em;
196
 
    border: 1px solid #a22;
197
 
    background: #f88;
198
 
}
199
 
 
200
205
form.verticalform div {
201
206
    padding: 0.2em 0;
202
207
}