← Back to branch summary

~darkxst/ubiquity-slideshow-ubuntu/vivid

« back to all changes in this revision

Viewing changes to slideshows/xubuntu/slides/link/base.css

  • Committer: Pasi Lallinaho
  • Date: 2015-03-11 23:38:06 UTC
  • Revision ID: pasi@shimmerproject.org-20150311233806-7e6w7d3805jef99w
Update the Xubuntu slideshow artwork and content.

Show diffs side-by-side

added added

removed removed

Lines of Context:
slideshows/xubuntu/slides/link/base.css
74
74
}
75
75
 
76
76
 
 
77
::selection {
 
78
        background-color: transparent;
 
79
}
 
80
 
77
81
/*
78
82
 *  Layout
79
83
 *
113
117
 
114
118
.header {
115
119
        display: table-cell;
116
 
        width: 750px;
117
120
 
118
121
        padding: 0 100px 0 20px;
119
122
        height: 60px;
120
123
 
121
124
        vertical-align: middle;
122
 
 
123
 
        background-color: rgba( 0, 0, 0, 0.5 );
124
125
}
125
126
 
126
127
.main {
127
128
        font-size: 90%;
128
129
 
129
 
        background-image: url(shadow.png);
130
 
        background-position: 0 0;
131
 
        background-repeat: repeat-x;
132
 
 
133
 
        padding: 30px 0 0 0;
134
 
 
135
 
        height: 330px;
 
130
        padding: 20px 0 0 0;
 
131
 
 
132
        height: 360px;
136
133
}
137
134
        .main .content,
138
135
        .main .shot {
148
145
.control-arrow {
149
146
        z-index: 100;
150
147
        position: absolute;
151
 
        top: 20px;
 
148
        top: 16px;
152
149
 
153
150
        width: 20px;
154
151
        height: 20px;
156
153
        background: transparent;
157
154
        background-position: 0 0;
158
155
}
 
156
        .control-arrow:after {
 
157
                position: relative;
 
158
 
 
159
                font-size: 300%;
 
160
                color: rgba( 255, 255, 255, 0.5 );
 
161
                transition: all 300ms;
 
162
        }
 
163
        .control-arrow:hover:after, .control-arrow:active:after, .control-arrow:focus:after {
 
164
                color: rgba( 255, 255, 255, 0.9 );
 
165
        }
159
166
.control-arrow.disabled {
160
167
        cursor:default;
161
168
}
165
172
.control-arrow:active {
166
173
        background-position: 0 -40px;
167
174
}
168
 
#prev-slide {
169
 
        left: 670px;
170
 
        background-image: url(arrow-prev.png);
171
 
}
172
 
#next-slide {
173
 
        left: 710px;
174
 
        background-image: url(arrow-next.png);
175
 
}
 
175
        #prev-slide:after {
 
176
                left: 670px;
 
177
                content: "«";
 
178
        }
 
179
        #next-slide:after {
 
180
                left: 710px;
 
181
                content: "»";
 
182
        }
176
183
 
177
184
 
178
185
/*
186
193
}
187
194
 
188
195
.main a {
189
 
        border-bottom: 1px solid #bbb;
 
196
        border-bottom: 1px solid rgba( 255, 255, 255, 0.75 );
190
197
}
191
198
 
192
199
em {
211
218
        width: 270px;
212
219
 
213
220
        padding-top: 5px;
214
 
        margin: 2em 0 1em 0;
 
221
        margin: 1em 0;
215
222
 
216
223
        font-size: 90%;
217
224
        color: #fff;
248
255
/*  Rounded-corner box  */
249
256
.box {
250
257
        background-color: rgba( 0, 0, 0, 0.2 );
251
 
        border-radius: 10px;
252
 
        padding: 10px 20px;
 
258
        border-radius: 3px;
 
259
        padding: 0.75em 1em;
253
260
}
254
261
 
255
262
.box.narrow {
258
265
        padding: 10px 20px;
259
266
}
260
267
 
261
 
/*  Note (smaller text)  */
262
 
 
263
 
.note {
264
 
        font-size: 85%;
265
 
        line-height: 1.4em;
266
 
}
267
 
 
268
268
/*  Application paths  */
269
269
 
270
 
.paths {
271
 
        width: 300px;
272
 
        position: absolute;
273
 
        top: 350px;
 
270
.applist p {
 
271
        font-size: 80%;
274
272
}
275
273
 
276
274
.app {
 
275
        border-bottom: 1px dashed rgba( 255, 255, 255, 0.5 );
 
276
}
 
277
 
 
278
.paths .path {
 
279
        display: none;
 
280
        position: fixed;
 
281
        bottom: 0;
 
282
        left: 0;
 
283
 
 
284
        width: 100%;
 
285
        margin-bottom: 0;
 
286
        padding: 5px 20px;
 
287
 
277
288
        font-size: 80%;
278
 
        width: 300px;
279
289
 
 
290
        background-color: rgba( 0, 0, 0, 0.2 );
280
291
        color: rgba( 255, 255, 255, 0.8 );
281
292
}
282
293
 
283
 
.app img {
 
294
.path img,
 
295
.applist img {
284
296
        margin: -4px 3px 0 3px;
285
297
}
286
298
 
287
 
.app b {
288
 
        color: #007fbe;
 
299
.path b,
 
300
.applist b {
 
301
        color: rgba( 255, 255, 255, 0.75 );
289
302
}
290
303
 
291
304
 
303
316
 
304
317
.panelnotes {
305
318
        padding: 0 0 0 20px;
306
 
        margin: 1em 0 2em 0;
307
 
}
308
 
 
309
 
.panelnotes p.box {
310
 
        width: 190px;
311
 
        height: 6em;
312
 
        margin-right: 10px;
313
 
        float: left;
314
 
 
315
 
        -webkit-transition: all 0.5s;
316
 
}
317
 
 
318
 
.panelnotes p.box:hover,
319
 
.panelnotes p.box:active,
320
 
.panelnotes p.box:focus {
321
 
        background-color: rgba( 0, 0, 0, 0.3 );
322
 
}
 
319
        margin: 1em 0;
 
320
 
 
321
        display: -webkit-flex;
 
322
        display: flex;
 
323
}
 
324
 
 
325
        .panelnotes .note {
 
326
                font-size: 90%;
 
327
                line-height: 1.4em;
 
328
 
 
329
                width: 32%;
 
330
                margin-right: 1em;
 
331
 
 
332
                flex-grow: 1;
 
333
        }
 
334
 
 
335
        .panelnotes p.box {
 
336
                transition: all 0.5s;
 
337
        }
 
338
 
 
339
        .panelnotes p.box:hover,
 
340
        .panelnotes p.box:active,
 
341
        .panelnotes p.box:focus {
 
342
                background-color: rgba( 0, 0, 0, 0.3 );
 
343
        }
323
344
 
324
345
/*  Panel highlights, shown with JS  */
325
346
 
331
352
}
332
353
 
333
354
#panelhighlight.visible {
334
 
        border-bottom: 2px solid #59a61b;
 
355
        border-bottom: 2px solid rgba( 255, 255, 255, 0.75 );
335
356
}
336
357
 
337
358
/*  Help & Support  */
338
359
 
339
360
.chatbubble {
340
361
        position: absolute;
341
 
        bottom: 30px;
 
362
        bottom: 20px;
342
363
        right: 20px;
343
364
}
344
 
 
345
 
.triangle {
346
 
        float: right;
347
 
        margin-right: 40px;
348
 
        height: 40px;
349
 
        width: 60px;
350
 
        background: transparent url(triangledown.png) 100% 0 no-repeat;
351
 
}
352
 
 
353
 
/* 14.10 */
354
 
 
355
 
#slideshow {
356
 
        background-color: rgba( 255, 100, 255, 0.5 );
357
 
}
358
 
 
359
 
#slideshow div.unicorn {
360
 
        background: transparent url(../images/art_unicorn.png) 100% 100% no-repeat;
361
 
}
362
 
 
363
 
.app b {
364
 
        color: rgba( 255, 255, 255, 0.8 );
365
 
}
366
 
 
367
 
#panelhighlight.visible {
368
 
        border-bottom: 2px solid rgba( 255, 255, 255, 0.9 );
369
 
}
370
 
 
371
 
::selection {
372
 
        background-color: #efa7da;
373
 
}
 
 
b'\\ No newline at end of file'
 
365
        .chatbubble:after {
 
366
                position: relative;
 
367
                float: right;
 
368
                right: 40px;
 
369
 
 
370
                content: "";
 
371
                display: block;
 
372
 
 
373
                width: 60px;
 
374
                height: 40px;
 
375
 
 
376
                background: transparent url(triangledown.png) 100% 0 no-repeat;
 
377
        }