1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
/* IVLE - Informatics Virtual Learning Environment
* Copyright (C) 2007-2008 The University of Melbourne
* Style Sheet for File Browser and Editor
* (File Listing view)
* This file is redistributable under the terms of the GNU General Public
* License version 2 or later.
*/
/* OVERALL LAYOUT */
/* Note: Top-level things are layed out with position: absolute in order to
* make sure they fill up the whole canvas. */
#middle {
/* Fill containing box, but reserve space for status bar */
position: absolute;
top: 0;
/* bottom == #statusbar_outer.height + #statusbar_outer.padding * 2 */
bottom: 1.4em;
left: 0;
right: 0;
}
/* FILE LISTINGS TABLE */
#filetable {
/* Position to fill its containing box, except the right 200px, for
* sidepanel. */
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 200px;
border-collapse: collapse;
border-right: 1px solid #888;
padding: 0;
/* Present a vertical scroll bar in case there are too many files.
* This ensures the overall page will never scroll (which causes huge
* problems for everything being absolutely positioned). */
overflow: scroll;
/* Some browsers support overflow-x and overflow-y. In this case, use
* overflow-x: auto to disable the horizontal scroll bar.
* (If unsupported this will simply fall back to a harmless but annoying
* horizontal scroll bar).
*/
overflow-x: auto;
}
th {
text-align: left;
}
td.thincol {
width: 18px;
}
#filetablediv {
overflow: auto;
}
/* Individual column sizes */
/* All columns have fixed widths except filename, which expands to fit. */
.col-check {
width: 20px;
}
.col-icons {
width: 50px;
}
.col-filename {
width: auto;
}
.col-size {
width: 100px;
}
.col-date {
width: 150px;
}
/* Table borders and rows */
tr.rowhead {
background-color: #336;
color: white;
}
tr.rowhead a:link, tr.rowhead a:visited {
color: #aaf;
}
/* Unselected (grey shades)
* Note alternating rows are different shades
*/
tr.row1 {
background-color: #ccc;
cursor: pointer;
}
tr.row2 {
background-color: #bbb;
cursor: pointer;
}
/* And if they are selected (blue shades) */
tr.row1sel {
background-color: #88e;
cursor: pointer;
}
tr.row2sel {
background-color: #77d;
cursor: pointer;
}
#filetable table {
border-collapse: collapse;
}
#filetable td, #filetable th {
border: 1px solid #888;
}
/* Borders between icons and filename are turned off. */
#filetable td.col-icons, #filetable th.col-date, #filetable td.col-date {
border-right: 0 none;
}
#filetable td.col-filename {
border-left: 0 none;
}
/* SIDE PANEL */
#sidepanel_outer {
/* Position this full canvas height, page right */
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
border-left: 1px solid #888;
border-top: 1px solid #888;
background-color: #ccc;
font-size: 0.8em;
text-align: center;
/* Cut off the bottom if it doesn't fit on the page for some reason.
* This ensures the overall page will never scroll (which causes huge
* problems for everything being absolutely positioned). */
overflow: hidden;
}
#sidepanel {
padding: 8px;
}
#sidepanel p, #sidepanel h2, #sidepanel h3 {
margin: 0;
padding: 0;
}
#sidepanel h3 {
margin-top: 1em;
}
#sidepanel a {
font-weight: bold;
}
/* Input boxes in the upload panel need a bit more space */
#uploadpanel p {
margin: 0.5em 0;
}
/* STATUS BAR */
#statusbar_outer {
/* Get this to the bottom of the screen */
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #aaa;
border-top: 1px solid #888;
padding: 0.2em;
height: 1em; /* Mandate an exact height */
}
/* Nested div so the font size doesn't affect our outer calculations */
#statusbar {
font-size: 0.8em;
}
|