← 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;
 
101
    -webkit-border-top-left-radius: 10px;
 
102
    -webkit-border-top-right-radius: 10px;
 
103
    border-top-left-radius: 10px;
 
104
    border-top-right-radius: 10px;
87
105
}
88
106
 
89
 
#console_input {
 
107
.console_input {
90
108
    position: absolute;
91
109
    /* Input bar goes along the bottom. Pad all sides */
92
 
    left: 0.5em;
93
 
    right: 0.5em;
94
110
    bottom: 0.5em;
95
 
}
96
 
 
97
 
#console_body.windowpane #console_input {
 
111
    padding: 0 0.5em;
 
112
    /* Treat console line as table formatted, so the textbox is dynamic in size. */
 
113
    display: table;
 
114
    font-size: 13px;
 
115
}
 
116
 
 
117
.console_help_example .console_input {
 
118
    position: relative;
 
119
    bottom: 0;
 
120
}
 
121
 
 
122
.console_input > div {
 
123
    display: table-row;
 
124
}
 
125
 
 
126
.console_input > div > * {
 
127
    display: table-cell;
 
128
 
 
129
    /* Don't let the buttons wrap onto multiple lines.
 
130
     * This forces the textbox to shrink.
 
131
     */
 
132
    white-space: nowrap;
 
133
}
 
134
 
 
135
.console_input > div > .console_button {
 
136
    /* If the console button is in a cell, don't float */
 
137
    position: static !important;
 
138
    padding: 0 0.2em;
 
139
}
 
140
 
 
141
.console_inputCell {
 
142
    width: 100%;
 
143
    padding-right: 0.5em;
 
144
}
 
145
 
 
146
.console_body.windowpane .console_input {
98
147
    /* Don't want this absolutely positioned in windowpane mode */
99
148
    position: static;
100
149
}
101
 
#console_prompt {
 
150
.console_prompt {
102
151
    font-family: monospace;
 
152
    font-weight: bold;
 
153
    white-space: pre;
103
154
}
104
 
#console_inputText {
 
155
.console_inputText {
105
156
    font-family: monospace;
106
 
    width: 75%;
 
157
    width: 100%;
107
158
}
108
159
 
109
160
/* console filler takes up the same space as console_body.windowpane
131
182
}
132
183
#console_filler.minimal {
133
184
    /* Trial and error is useful to work this out. */
134
 
    height: 1em;
135
 
}
 
185
    height: 2em;
 
186
}
 
187
 
 
188
.console_message {
 
189
    color: gray;
 
190
}
 
191
 
136
192
*.errorMsg {
137
193
    color: red;
138
194
    margin-top: 0em;