← Back to branch summary

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

« back to all changes in this revision

Viewing changes to ivle/webapp/console/media/console.css

  • Committer: David Coles
  • Date: 2010-07-28 10:52:48 UTC
  • mfrom: (1791.2.10 mediahandlers)
  • Revision ID: coles.david@gmail.com-20100728105248-zvbn9g72v1nsskvd
A series of HTML5 based media handlers using the <audio> and <video> tags.  
This replaces the previous page that just showed a download link (which is 
already available on the menu).

Also solves issue where media files were downloaded by the client twice (once 
in an AJAX request intended only for text).

Known issues:
    * Bug #588285: External BHO will not be able to play media due to not
      having IVLE cookie.
    * Bug #610745: Does not correctly preview revisions
    * Bug #610780: Ogg media does not work in Chromium

Show diffs side-by-side

added added

removed removed

Lines of Context:
ivle/webapp/console/media/console.css
1
 
#console_body {
 
1
.console_body {
2
2
    background-color: white;
3
3
    position: absolute;
4
4
    color: black;
8
8
    bottom: 0;
9
9
}
10
10
/* console_body when displayed as a window panel and not the whole app */
11
 
#console_body.windowpane {
 
11
.console_body.windowpane {
12
12
    position: fixed;
13
13
    top: auto;      /* Do not fix to top */
14
14
    bottom: 0;
16
16
    right: 0;
17
17
    z-index: 1;     /* Go in front of console_filler */
18
18
}
19
 
#console_body.windowpane.minimal {
 
19
.console_body.windowpane.minimal {
20
20
    border-top: 1px solid black;
21
21
}
22
 
#console_body.windowpane #console_body2 {
 
22
.console_body.windowpane .console_body2 {
23
23
    /* Need some padding in windowpane mode */
24
24
    /* (In full mode, things are positioned absolutely) */
25
25
    padding: 0.2em;
26
26
}
 
27
 
 
28
.console_help_example_body {
 
29
    border: 1px solid black;
 
30
    border-top: none;
 
31
    padding-bottom: 0.5em;
 
32
}
 
33
 
27
34
/* Heading bar */
28
 
#console_heading {
 
35
.console_heading {
29
36
    background-color: gray;
30
37
    border: 2px solid black;
31
38
    padding: 2px;
34
41
    font-weight: bold;
35
42
}
36
43
/* If "minimized", console_heading and console_output are hidden */
37
 
#console_body.minimal #console_heading,
38
 
#console_body.minimal #console_output,
 
44
.console_body.minimal .console_heading,
 
45
.console_body.minimal .console_output,
39
46
/* If "maximized", the maximize button is hidden */
40
 
#console_body.maximal .maximize {
 
47
.console_body.maximal .maximize {
41
48
    display: none;
42
49
}
43
50
/* Minimize/maximize button */
46
53
    position: absolute;
47
54
    right: 0.5em;
48
55
}
49
 
#console_output {
 
56
.console_output {
50
57
    /*height: 20em;*/       /* Might be needed for windowpane mode */
51
58
    /*margin-bottom: 0.5em;*/
52
59
    position: absolute;
53
 
    /* 2em is to accomodate the header bar, and some padding */
54
 
    top: 3.4em;
 
60
    /* Start immediately under the blue header. */
 
61
    top: 0;
55
62
    /* 2.5em is to accomodate the input bar, and padding either side */
56
63
    bottom: 2.5em;
57
64
    left: 0;
71
78
     */
72
79
    font-size: 13px;
73
80
}
74
 
#console_body.windowpane #console_output {
 
81
.console_body.windowpane .console_output {
75
82
    /* Don't want this absolutely positioned in windowpane mode */
76
83
    position: static;
77
84
    /* Make it a bit higher up, because the header is thinner in this mode */
81
88
    margin-bottom: 0.5em;
82
89
}
83
90
 
84
 
#console_body.windowpane.maximal, #console_body.windowpane #console_heading {
 
91
.console_help_example .console_output {
 
92
    position: relative;
 
93
    top: 0;
 
94
    height: auto;
 
95
}
 
96
 
 
97
.console_body.windowpane.maximal, .console_body.windowpane .console_heading,
 
98
.console_help_example .console_heading {
85
99
    -moz-border-radius-topleft: 10px;
86
100
    -moz-border-radius-topright: 10px;
87
101
    -webkit-border-top-left-radius: 10px;
90
104
    border-top-right-radius: 10px;
91
105
}
92
106
 
93
 
#console_input {
 
107
.console_input {
94
108
    position: absolute;
95
109
    /* Input bar goes along the bottom. Pad all sides */
96
110
    bottom: 0.5em;
100
114
    font-size: 13px;
101
115
}
102
116
 
103
 
#console_input > div {
 
117
.console_help_example .console_input {
 
118
    position: relative;
 
119
    bottom: 0;
 
120
}
 
121
 
 
122
.console_input > div {
104
123
    display: table-row;
105
124
}
106
125
 
107
 
#console_input > div > * {
 
126
.console_input > div > * {
108
127
    display: table-cell;
109
128
 
110
129
    /* Don't let the buttons wrap onto multiple lines.
113
132
    white-space: nowrap;
114
133
}
115
134
 
116
 
#console_input > div > .console_button {
 
135
.console_input > div > .console_button {
117
136
    /* If the console button is in a cell, don't float */
118
137
    position: static !important;
119
138
    padding: 0 0.2em;
120
139
}
121
140
 
122
 
#console_inputCell {
 
141
.console_inputCell {
123
142
    width: 100%;
124
143
    padding-right: 0.5em;
125
144
}
126
145
 
127
 
#console_body.windowpane #console_input {
 
146
.console_body.windowpane .console_input {
128
147
    /* Don't want this absolutely positioned in windowpane mode */
129
148
    position: static;
130
149
}
131
 
#console_prompt {
 
150
.console_prompt {
132
151
    font-family: monospace;
133
152
    font-weight: bold;
134
153
    white-space: pre;
135
154
}
136
 
#console_inputText {
 
155
.console_inputText {
137
156
    font-family: monospace;
138
157
    width: 100%;
139
158
}
163
182
}
164
183
#console_filler.minimal {
165
184
    /* Trial and error is useful to work this out. */
166
 
    height: 1em;
167
 
}
 
185
    height: 2em;
 
186
}
 
187
 
 
188
.console_message {
 
189
    color: gray;
 
190
}
 
191
 
168
192
*.errorMsg {
169
193
    color: red;
170
194
    margin-top: 0em;