← 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: Matt Giuca
  • Date: 2009-02-25 10:19:29 UTC
  • mfrom: (1100.1.35 new-ui)
  • Revision ID: matt.giuca@gmail.com-20090225101929-v2206kbf3lgkm1kz
*Spoiler warning: Plot or ending details follow*

Merged from new-ui branch.

IVLE top bar and top of filebrowser and console have all been made over. They
look very shiny and web 2.0!

Added image-source top-level directory with SVG source images.

Added new chrome images to ivle/webapp/coremedia/images.

Redid a lot CSS and HTML.
Every page now has an H1 at the top (common UI). Moved existing H1s to the top
of the page. Other H1s have been cleaned up (moved to H2s or restyled).
IVLE top bar has been majorly cleaned up (previously had many layered divs);
now more accessible.

Subject icon replaced with tutorial one.

The funeral for the tacky yellow and blue stylesheet will be held this Friday.

Show diffs side-by-side

added added

removed removed

Lines of Context:
ivle/webapp/coremedia/ivle.css
29
29
    color: #a00;
30
30
}
31
31
 
 
32
a img {
 
33
    border: none;
 
34
}
 
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;
 
41
    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;
 
47
}
 
48
 
 
49
#ivlebody h2 {
 
50
    font-size: 1.4em;
 
51
}
 
52
 
32
53
/** Special styles for header section **/
33
54
 
34
55
#ivleheader {
35
56
    position: absolute;
36
 
    background-color: #fea;
 
57
    background-color: #abf;
 
58
    background-image: url(../ivle.webapp.core/images/chrome/topbar-slashes.png);
 
59
    background-repeat: repeat-x;
37
60
    padding: 0;
38
61
    border-bottom: 1px solid black;
39
 
    /* IMPORTANT: This 5.3em is hard-coded elsewhere in this file. Search for
 
62
    /* IMPORTANT: This 4em is hard-coded elsewhere in this file. Search for
40
63
     * #ivleheader.height to update it. */
41
 
    height: 5.3em;
 
64
    height: 4em;
42
65
    left: 0;
43
66
    right: 0;
44
67
    z-index: 1;     /* Background to all, but the body */
45
68
}
46
69
 
 
70
#ivleheader h1 {
 
71
    margin: 0;
 
72
    padding: 8px;
 
73
}
 
74
 
47
75
#ivleheader_text {
48
 
    /* Pad left and right. */
49
 
    position: absolute;
50
 
    padding: 0 1em;
51
 
    left: 0;
52
 
    right: 0;
53
 
    z-index: 3;     /* In front */
54
 
}
55
 
 
56
 
/* Special "IVLE" and "Informatics Virtual Learning Environment" titles */
57
 
#ivleheader_text h1 {
58
 
    position: absolute;
59
 
    text-align: left;
60
 
    font-size: 3.8em;
61
 
    font-style: italic;
62
 
    color: #ffc;
63
 
    margin: 0;
64
 
    padding: 0;
65
 
}
66
 
#ivleheader_text h2 {
67
 
    position: absolute;
68
 
    text-align: left;
69
 
    font-size: 1.3em;
70
 
    margin-top: 1em;
71
 
    margin-bottom: 1em;
72
 
    padding: 0;
 
76
    position: absolute;
 
77
    padding: 0.5em;
 
78
    top: 0;
 
79
    right: 0.5em;
73
80
}
74
81
 
75
82
/* Note: The body has NO PADDING by default (unlike plain HTML).
81
88
    /* This is positioned absolutely so that its content can be positioned
82
89
     * absolutely as well, and so height: 100% really means it. */
83
90
    position: absolute;
84
 
    top: 5.3em;             /* == #ivleheader.height */
 
91
    top: 4em;               /* == #ivleheader.height */
85
92
    bottom: 0;
86
93
    width: 100%;
87
94
    z-index: 0;     /* Behind header */
89
96
 
90
97
/* Apps can optionally have a <div id="ivle_padding"> as the outermost
91
98
 * element, if 1em of padding is desired (otherwise there will be no padding).
 
99
 * Note: No top padding, since the first element should have a margins (p or
 
100
 * h2).
92
101
 */
93
102
#ivle_padding {
94
 
    padding: 1em;
 
103
    padding: 0 1em 1em 1em;
95
104
}
96
105
 
97
 
.userhello {
 
106
p.userhello {
98
107
    font-size: .8em;
99
 
    top: 0;
100
 
    text-align: right;
101
 
    padding: 11px 0;
102
108
    margin: 0;
103
109
}
104
110
.userhello .username {
110
116
 */
111
117
#ivleheader_tabs {
112
118
    position: absolute;
113
 
    height: 5.3em;          /* == #ivleheader.height */
114
 
    top: 0;
115
 
    left: 0;
116
 
    right: 0;
117
 
    width: 100%;
118
 
    padding: 0;
119
 
    margin: 0;
120
 
    z-index: 2;     /* In front of background, behind text */
 
119
    right: 1em;
 
120
    bottom: 0;
121
121
}
122
122
 
123
123
#ivleheader_tabs p {
129
129
    margin: 0;
130
130
}
131
131
 
132
 
/* The apptabs ul is aligned to the bottom of #ivleheader_tabs */
133
132
ul#apptabs {
134
 
    position: absolute;
135
 
    text-align: right;
136
 
    bottom: 0;
137
 
    right: 1em;             /* == #ivleheader.padding-right */
138
 
    padding: 0;
139
133
    margin: 0;
140
134
}
 
135
 
141
136
ul#apptabs li {
142
137
    display: inline;
143
 
    padding: 3px;
144
 
    border: 1px solid black;
145
 
    background-color: #fc6;
 
138
    /*border: 1px solid black;*/
 
139
    /*background-color: #fc6;*/
 
140
    background-image: url(../ivle.webapp.core/images/chrome/tab-left.png);
 
141
    background-repeat: no-repeat;
 
142
    background-position: top left;
 
143
    padding: 0;
 
144
    padding-left: 4px;
 
145
}
 
146
ul#apptabs li a {
 
147
    background-image: url(../ivle.webapp.core/images/chrome/tab-right.png);
 
148
    background-repeat: no-repeat;
 
149
    background-position: top right;
 
150
    padding: 0;
 
151
    padding-right: 4px;
 
152
}
 
153
ul#apptabs li a span {
 
154
    background-image: url(../ivle.webapp.core/images/chrome/tab-mid.png);
 
155
    background-repeat: repeat-x;
146
156
    padding: 0 3px;
147
157
}
148
158
ul#apptabs li:hover {
149
 
    background-color: #fd8;
 
159
    /*background-color: #fd8;*/
 
160
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-left.png);
 
161
}
 
162
ul#apptabs li:hover a {
 
163
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-right.png);
 
164
}
 
165
ul#apptabs li:hover a span {
 
166
    background-image: url(../ivle.webapp.core/images/chrome/tab-hover-mid.png);
150
167
}
151
168
/* Currently active app tab */
152
169
ul#apptabs li.thisapp {
153
 
    background-color: white;
154
 
    border-bottom: 1px solid white;
 
170
    /*background-color: white;*/
 
171
    /*border-bottom: 1px solid white;*/
 
172
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-left.png);
 
173
}
 
174
ul#apptabs li.thisapp a {
 
175
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-right.png);
 
176
}
 
177
ul#apptabs li.thisapp a span {
 
178
    background-image: url(../ivle.webapp.core/images/chrome/tab-selected-mid.png);
155
179
}
156
180
 
157
181
ul#apptabs a {