← Back to branch summary

~mattsturgeon/ubiquity-slideshow-ubuntu/login-slide

« back to all changes in this revision

Viewing changes to slideshows/edubuntu/slides/link/general.css

  • Committer: Jonathan Carter
  • Date: 2010-11-10 15:37:43 UTC
  • Revision ID: jcarter@revolutionlinux.com-20101110153743-wp15n2uxhn00dted
Add Edubuntu slideshow, update standards version

Show diffs side-by-side

added added

removed removed

Lines of Context:
slideshows/edubuntu/slides/link/general.css
 
1
html, body {
 
2
        margin:0;
 
3
        padding:0;
 
4
        
 
5
        background-color:#424242;
 
6
        
 
7
        font-family:sans-serif;
 
8
        color:#ffffff;
 
9
}
 
10
 
 
11
/*
 
12
Hyperlink-style text
 
13
*/
 
14
a {
 
15
        color:#ffffff;
 
16
        font-style:italic;
 
17
        text-decoration:none;
 
18
}
 
19
 
 
20
#container {
 
21
        position:absolute;
 
22
        
 
23
        width:798px;
 
24
        height:465px;
 
25
        
 
26
        overflow:hidden;
 
27
        
 
28
        background-image:url('background.png');
 
29
        background-repeat:no-repeat;
 
30
        background-position:top right;
 
31
        
 
32
/*      background-color:#ffffff; */
 
33
        
 
34
        /*cursor:default;*/
 
35
}
 
36
 
 
37
#debug-controls {
 
38
        display:none;
 
39
        position:absolute;
 
40
        top:540px;
 
41
        width:700px;
 
42
        text-align:center;
 
43
}
 
44
 
 
45
#debug-controls input {
 
46
        width:40px;
 
47
}
 
48
 
 
49
#debug-controls input#current-slide {
 
50
        width:600px;
 
51
}
 
52
 
 
53
/* fixed container to align title */
 
54
.header {
 
55
        position:fixed; /* FIXME: This is a terrible hack to keep the header from moving during a transition */
 
56
        top:-15px;
 
57
        height:225px;
 
58
}
 
59
 
 
60
/* title block is positioned at the bottom of its parent, which should be .header */
 
61
.title {
 
62
        position:absolute;
 
63
        
 
64
        bottom:12px;
 
65
        width:510px; /* the ideal width would leave more space on the right */
 
66
        left:36px; /* matches padding of .content and .content ul: 16 + 20 */
 
67
        
 
68
        font-size:20px; /* applies to all lines except first */
 
69
        font-weight:normal;
 
70
        
 
71
        letter-spacing:-2px;
 
72
        
 
73
        color:#ffffff;
 
74
        
 
75
        padding:0px;
 
76
        margin:0px;
 
77
}
 
78
.title:first-line {
 
79
        font-size:28px;
 
80
}
 
81
 
 
82
/*
 
83
Typically an image. This is positioned at the top
 
84
right of a slide and is given a size of 64x64 pixels.
 
85
*/
 
86
.icon {
 
87
        /* FIXME: This is a horrible hack to keep the title from moving during slide transition */
 
88
        position:fixed; /* was position:absolute */
 
89
        
 
90
        width:auto;
 
91
        height:auto;
 
92
        
 
93
        top:40px;
 
94
        left:577px;
 
95
        
 
96
        z-index:11;
 
97
        border:0px;
 
98
}
 
99
/*.icon.exact {
 
100
        top:69px;
 
101
        left:549px;
 
102
        width:215px;
 
103
        height:auto;
 
104
}*/
 
105
 
 
106
/*
 
107
.content expects to be contained in here. .main
 
108
creates a nice, plain surface upon which it can
 
109
appear, spaced appropriately from .title.
 
110
*/
 
111
.main {
 
112
        position:absolute;
 
113
        
 
114
        top:180px;
 
115
        left:0px;
 
116
        
 
117
        width:100%;
 
118
        height:180px;
 
119
        
 
120
        padding-right:60px;
 
121
        
 
122
        z-index:12;
 
123
}
 
124
 
 
125
/*
 
126
Slide's body text goes inside here.
 
127
*/
 
128
.content {
 
129
        padding:16px;
 
130
        padding-top:32px;
 
131
        
 
132
        font-size:14px;
 
133
        color:#ffffff;
 
134
}
 
135
 
 
136
.content ul {
 
137
        margin-top:0px;
 
138
        padding-left:20px;
 
139
        
 
140
        width:650px;
 
141
        height:223px;
 
142
        
 
143
        overflow:auto;
 
144
        
 
145
        list-style-type:none;
 
146
        list-style-image:url("bullet-point.png");
 
147
}
 
148
 
 
149
.content li {
 
150
        padding:8px;
 
151
        padding-left:0px;
 
152
}
 
153
/* hack to get the text wrapping around the icon. If we could do this for
 
154
ul :first-line, there would be less room for failure. */
 
155
.content.wrap-top li:first-child {
 
156
        width:550px;
 
157
}
 
158
 
 
159
.content .footer {
 
160
        position:relative;
 
161
        width:100%;
 
162
        padding:0px;
 
163
        margin:0px;
 
164
        bottom:10px;
 
165
        text-align:right;
 
166
        
 
167
        font-weight:bold;
 
168
        color:#c3c3c3;
 
169
}
 
170
 
 
171
.content img.inline {
 
172
        height:14px;
 
173
        width:auto;
 
174
}
 
175
 
 
176
/*
 
177
The menu-item style is a descriptive aid for pointing the end user at,
 
178
for example, a place in either the system menu or an application menu.
 
179
This way we can provide clear visual cues with minimal babbling.
 
180
*/
 
181
.menu-item {
 
182
        display:inline-block;
 
183
        
 
184
        border-radius:3px;
 
185
        -webkit-border-radius:3px;
 
186
        -moz-border-radius:3px;
 
187
        
 
188
        height:16px;
 
189
        padding:1px;
 
190
        
 
191
        padding-left:3px;
 
192
        padding-right:3px;
 
193
        
 
194
        border-style:solid;
 
195
        border-width:1px;
 
196
        border-color:#a89a8d;
 
197
        
 
198
        background-color:#f7f5f3;
 
199
}
 
200
 
 
201
/*
 
202
This rule applies to an img of class menu-arrow. It appears as a nice
 
203
looking arrow that can separate items in a menu much like how submenus
 
204
look in Ubuntu's GTK theme.
 
205
*/
 
206
.menu-item img.menu-arrow {
 
207
        display:inline-block;
 
208
        content:url('menu-arrow.png');
 
209
        
 
210
        padding-left:2px;
 
211
        padding-right:5px;
 
212
}
 
213
 
 
214
/*
 
215
This rule disables drag-and-drop for images.  See bug #448703.
 
216
*/
 
217
img {
 
218
        -webkit-user-drag: none;
 
219
}
 
220
 
 
221
 
 
222
 
 
223
/* RTL stuff */
 
224
.rtl {
 
225
        direction:rtl;
 
226
}
 
227
/* TODO: NEED reversed title and icon for RTL */
 
228
/*.rtl .title {
 
229
        right:10px;
 
230
}*/
 
231
/*.rtl .icon {
 
232
        left:10px;
 
233
        right:auto;
 
234
}*/
 
235
.rtl .main {
 
236
        right:0px;
 
237
        padding-right:0px;
 
238
        padding-left:60px;
 
239
}
 
240
.rtl .content .footer {
 
241
    text-align:left;
 
242
}