← 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-31 01:44:30 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:345
Global CSS change: ivlebody no longer has 1em of padding (it has none).
This is because most apps were disabling it (and it had to change anyway for
other reasons -- see below).

Hence, all apps which WERE disabling the padding have had that removed, and
just work by default. (console, browser, tutorial)
All apps which WEREN'T disabling the padding (very few) now have to manually
include an extra div. This has been done on all such apps, and has been
heavily documented (both in the CSS file and doc/app_howto). (help, dummy,
debuginfo).

media/common/ivle.css: 
    The real change here (which isn't yet being used) is that ivlebody is now
    positioned absolutely and takes up all the space on the canvas. This is
    to be used for full-page layouts in console and browser.

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
 
22
24
    padding: 1em;
23
25
}
24
26
 
 
27
/* OVERALL LAYOUT */
 
28
 
 
29
#middle, #middle tbody {
 
30
    width: 100%;
 
31
    vertical-align: top;
 
32
    border-collapse: collapse;
 
33
}
 
34
 
 
35
#sidepanel {
 
36
    width: 300px;
 
37
}
 
38
 
25
39
/* TOP BAR */
26
40
 
27
41
#topbar {
28
 
    position: absolute;
29
 
    left: 0;
30
 
    right: 0;
31
 
    top: 0;
32
 
    /* height == h2.margin + h2.line-height
33
 
     *              + max(h2.margin, p.margin) + p.line-height + p.margin
34
 
     *        == 1.1*0.7em + 1.1*1.2em + 1.1*0.7em + 1.1em + 0.7em
35
 
     *        == 4.6em */
36
 
    height: 4.6em;
37
 
    padding: 0.5em;
 
42
    padding: 8px;
38
43
    background-color: #aaf;
39
44
}
40
 
 
41
 
#topbar div {
42
 
    margin: 0.2em;
43
 
}
44
 
 
45
 
#topbar #path a {
 
45
#topbar a {
46
46
    font-weight: bold;
47
47
}
48
 
/* class "choice" is for all choices, enabled and disabled. This is for both
49
 
 * the <a> actions and <option> actions.
50
 
 * class "disabled" is for disabled choices.
 
48
 
 
49
/* FILE LISTINGS TABLE */
 
50
 
 
51
#filetable {
 
52
    border-collapse: collapse;
 
53
    border-right: 1px solid #888;
 
54
    padding: 0;
 
55
}
 
56
 
 
57
th {
 
58
    text-align: left;
 
59
}
 
60
 
 
61
td.thincol {
 
62
    width: 18px;
 
63
}
 
64
 
 
65
#filetablediv {
 
66
    overflow: auto;
 
67
}
 
68
 
 
69
/* Individual column sizes */
 
70
/* All columns have fixed widths except filename, which expands to fit. */
 
71
 
 
72
.col-check {
 
73
    width: 20px;
 
74
}
 
75
.col-icons {
 
76
    width: 50px;
 
77
}
 
78
.col-filename {
 
79
    width: auto;
 
80
}
 
81
.col-size {
 
82
    width: 100px;
 
83
}
 
84
.col-date {
 
85
    width: 150px;
 
86
}
 
87
 
 
88
/* Table borders and rows */
 
89
 
 
90
tr.rowhead {
 
91
    background-color: #336;
 
92
    color: white;
 
93
}
 
94
tr.rowhead a:link, tr.rowhead a:visited {
 
95
    color: #aaf;
 
96
}
 
97
/* Unselected (grey shades)
 
98
 * Note alternating rows are different shades
51
99
 */
52
 
#actions1 a.choice, #actions2 a {
53
 
    color: navy;
54
 
    text-decoration: underline;
55
 
    cursor: pointer;
56
 
}
57
 
#actions1 a.choice:hover, #actions1 a.choice:active, #actions1 a.choice:focus,
58
 
    #actions2 a:hover, #actions2 a:active, #actions2 a:focus {
59
 
    color: blue;
60
 
}
61
 
#actions1 a.disabled {
62
 
    color: black;
63
 
    text-decoration: none;
64
 
    cursor: auto;
65
 
}
66
 
/* Drop-down actions and headings */
67
 
#actions1 option.moreactions, #actions1 option.disabled {
68
 
    color: #aaa;
69
 
}
70
 
 
71
 
#actions2 p {
 
100
tr.row1 {
 
101
    background-color: #ccc;
 
102
    cursor: pointer;
 
103
}
 
104
tr.row2 {
 
105
    background-color: #bbb;
 
106
    cursor: pointer;
 
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: #77d;
 
115
    cursor: pointer;
 
116
}
 
117
 
 
118
#filetable table {
 
119
    border-collapse: collapse;
 
120
}
 
121
 
 
122
#filetable td, #filetable th {
 
123
    border: 1px solid #888;
 
124
}
 
125
 
 
126
/* Borders between icons and filename are turned off. */
 
127
 
 
128
#filetable td.col-icons, #filetable th.col-date, #filetable td.col-date {
 
129
    border-right: 0 none;
 
130
}
 
131
#filetable td.col-filename {
 
132
    border-left: 0 none;
 
133
}
 
134
 
 
135
/* SIDE PANEL */
 
136
 
 
137
#sidepanel {
 
138
    border-left: 1px solid #888;
 
139
    border-top: 1px solid #888;
 
140
    background-color: #ccc;
 
141
    font-size: 0.8em;
 
142
    padding: 8px;
 
143
    text-align: center;
 
144
}
 
145
 
 
146
#sidepanel p, #sidepanel h2, #sidepanel h3 {
72
147
    margin: 0;
73
 
}
74
 
 
75
 
/* One of the actions2s is shown at runtime, depending on the context.
76
 
 * We will show moreactions if we need it. */
77
 
#actions1 #moreactions_area, #actions2 #actions2_file,
78
 
#actions2 #actions2_directory {
79
 
    display: none;
80
 
}
81
 
 
82
 
/* Everything under the top bar */
83
 
 
84
 
#filesbody {
85
 
    position: absolute;
86
 
    left: 0;
87
 
    right: 0;
88
 
    /* top == #topbar.height + #topbar.padding * 2 */
89
 
    top: 5.6em;
90
 
    /* Space for the mimimised console */
91
 
    bottom: 3.5em;
92
 
}
93
 
 
 
148
    padding: 0;
 
149
}
 
150
 
 
151
#sidepanel h3 {
 
152
    margin-top: 1em;
 
153
}
 
154
 
 
155
#sidepanel a {
 
156
    font-weight: bold;
 
157
}
 
158
 
 
159
/* STATUS BAR */
 
160
 
 
161
#statusbar {
 
162
    background-color: #aaa;
 
163
    border-top: 1px solid #888;
 
164
    font-size: 0.8em;
 
165
    padding: 2px;
 
166
}
 
167
 
 
168
/* TEXT EDITOR */
 
169
 
 
170
#editbox {
 
171
    width: 100%;
 
172
    height: 100%;
 
173
}