← Back to branch summary

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

« back to all changes in this revision

Viewing changes to www/media/browser/browser.css

  • Committer: mattgiuca
  • Date: 2008-01-11 07:39:40 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:186
Added a bit of "chrome" (some CSS styling and minor touching up of the HTML).
In particular, the main header has been moved around a bit, with the "hello"
message and tabs moved to the right, and the tabs converted from a bullet list
to actual tabs.

dispatch: html, login: Minor changes to HTML layout.
ivle.css: Wrote a few styles to change the appearance of the whole program.
browser.css: A few styles were removed from here and brought into the main css
file. Minor changes to be compatible with ivle.css.

browser: Removed all the sample content (which in actuality will be generated
by JavaScript).

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/browser/browser.css
7
7
 
8
8
/* GENERAL FORMATTING */
9
9
 
10
 
#ivlebody p, #ivlebody h2, #ivlebody h3 {
 
10
p, h2, h3 {
11
11
    padding: 0;
12
 
    margin: 0.7em 0;
 
12
    margin: 0;
 
13
    margin-top: 11px;
 
14
    margin-bottom: 11px;
13
15
}
14
 
#ivlebody p, #ivlebody h3 {
 
16
p, h3 {
15
17
    font-size: 1em;
16
18
}
17
 
#ivlebody h2 {
 
19
h2 {
18
20
    font-size: 1.1em;
19
21
}
20
22
 
21
 
.padding {
22
 
    padding: 1em;
 
23
/* OVERALL LAYOUT */
 
24
 
 
25
body {
 
26
    margin: 0;
 
27
    padding: 0;
 
28
}
 
29
 
 
30
#middle, #middle tbody {
 
31
    width: 100%;
 
32
    vertical-align: top;
 
33
    border-collapse: collapse;
 
34
}
 
35
 
 
36
#sidepanel {
 
37
    width: 300px;
23
38
}
24
39
 
25
40
/* TOP BAR */
26
41
 
27
42
#topbar {
28
 
    position: absolute;
29
 
    left: 0;
30
 
    right: 0;
31
 
    top: 0;
32
 
    /* Approximate height of the components */
33
 
    height: 5em;
 
43
    padding: 8px;
 
44
    background-color: #aaf;
 
45
}
 
46
#topbar a {
 
47
    font-weight: bold;
 
48
}
 
49
 
 
50
/* FILE LISTINGS TABLE */
 
51
 
 
52
#filetable {
 
53
    border-collapse: collapse;
 
54
    border-right: 1px solid #888;
34
55
    padding: 0;
35
 
    background-color: #ddd;
36
 
}
37
 
 
38
 
/* NOTE: This style is copied from the generic h1 style
39
 
 * (without the font styling) */
40
 
#topbar #path {
41
 
    background-color: #fea;
42
 
    background-image: url(../ivle.webapp.core/images/chrome/h1-bg.png);
43
 
    background-repeat: repeat-y;
 
56
}
 
57
 
 
58
th {
 
59
    text-align: left;
 
60
}
 
61
 
 
62
#filetablediv {
 
63
    overflow: auto;
 
64
}
 
65
 
 
66
/* Individual column sizes */
 
67
/* All columns have fixed widths except filename, which expands to fit. */
 
68
 
 
69
.col-check {
 
70
    width: 20px;
 
71
}
 
72
.col-icons {
 
73
    width: 50px;
 
74
}
 
75
.col-filename {
 
76
    width: auto;
 
77
}
 
78
.col-size {
 
79
    width: 100px;
 
80
}
 
81
.col-date {
 
82
    width: 150px;
 
83
}
 
84
 
 
85
/* Table borders and rows */
 
86
 
 
87
tr.rowhead {
 
88
    background-color: #336;
 
89
    color: white;
 
90
}
 
91
tr.rowhead a:link, tr.rowhead a:visited {
 
92
    color: #aaf;
 
93
}
 
94
/* Unselected (grey shades)
 
95
 * Note alternating rows are different shades
 
96
 */
 
97
tr.row1 {
 
98
    background-color: #ccc;
 
99
    cursor: pointer;
 
100
}
 
101
tr.row2 {
 
102
    background-color: #aaa;
 
103
    cursor: pointer;
 
104
}
 
105
tr.row1:hover, tr.row2:hover {
 
106
    background-color: #eee;
 
107
}
 
108
/* And if they are selected (blue shades) */
 
109
tr.row1sel {
 
110
    background-color: #88e;
 
111
    cursor: pointer;
 
112
}
 
113
tr.row2sel {
 
114
    background-color: #66c;
 
115
    cursor: pointer;
 
116
}
 
117
tr.row1sel:hover, tr.row2sel:hover {
 
118
    background-color: #eee;
 
119
}
 
120
 
 
121
#filetable table {
 
122
    border-collapse: collapse;
 
123
}
 
124
 
 
125
#filetable td, #filetable th {
 
126
    border: 1px solid #888;
 
127
}
 
128
 
 
129
/* Borders between icons and filename are turned off. */
 
130
 
 
131
#filetable td.col-icons, #filetable th.col-date, #filetable td.col-date {
 
132
    border-right: 0 none;
 
133
}
 
134
#filetable td.col-filename {
 
135
    border-left: 0 none;
 
136
}
 
137
 
 
138
/* SIDE PANEL */
 
139
 
 
140
#sidepanel {
 
141
    border-left: 1px solid #888;
 
142
    border-top: 1px solid #888;
 
143
    background-color: #ccc;
 
144
    font-size: 0.8em;
 
145
    padding: 8px;
 
146
    text-align: center;
 
147
}
 
148
 
 
149
#sidepanel p, h1, h2 {
44
150
    margin: 0;
45
 
    padding: 0.5em;
46
 
    border-top: white 2px solid;        /* Top edge of 3D effect */
47
 
    border-bottom: #863 1px solid;      /* Bottom edge of 3D effect */
48
 
}
49
 
 
50
 
#topbar #path a {
 
151
    padding: 0;
 
152
}
 
153
 
 
154
#sidepanel h2 {
 
155
    margin-top: 8px;
 
156
}
 
157
 
 
158
#sidepanel a {
51
159
    font-weight: bold;
52
160
}
53
161
 
54
 
#actions {
55
 
    padding: 0.3em 0.5em;
56
 
    border-top: white 1px solid;        /* Top edge of 3D effect */
57
 
}
58
 
/* class "choice" is for all choices, enabled and disabled. This is for both
59
 
 * the <a> actions and <option> actions.
60
 
 * class "disabled" is for disabled choices.
61
 
 */
62
 
#actions1 a.choice, #actions2 a {
63
 
    color: navy;
64
 
    text-decoration: underline;
65
 
    cursor: pointer;
66
 
}
67
 
#actions1 a.choice:hover, #actions1 a.choice:active, #actions1 a.choice:focus,
68
 
    #actions2 a:hover, #actions2 a:active, #actions2 a:focus {
69
 
    color: blue;
70
 
}
71
 
#actions1 a.disabled {
72
 
    color: black;
73
 
    text-decoration: none;
74
 
    cursor: auto;
75
 
}
76
 
/* Drop-down actions and headings */
77
 
#actions1 option.moreactions, #actions1 option.disabled {
78
 
    color: #aaa;
79
 
}
80
 
 
81
 
/* One of the actions2s is shown at runtime, depending on the context.
82
 
 * We will show moreactions if we need it. */
83
 
#actions1 #moreactions_area, #actions2 #actions2_file,
84
 
#actions2 #actions2_directory {
85
 
    display: none;
86
 
}
87
 
 
88
 
/* Everything under the top bar */
89
 
 
90
 
#filesbody {
91
 
    position: absolute;
92
 
    left: 0;
93
 
    right: 0;
94
 
    /* top == #topbar.height */
95
 
    top: 5em;
96
 
    /* Space for the mimimised console */
97
 
    bottom: 2em;
98
 
}
99
 
 
 
162
/* STATUS BAR */
 
163
 
 
164
#statusbar {
 
165
    background-color: #aaa;
 
166
    border-top: 1px solid #888;
 
167
    font-size: 0.8em;
 
168
}