← Back to branch summary

~ubuntu-mate-dev/ubiquity-slideshow-ubuntu/ubuntu-mate-new-pngs

« back to all changes in this revision

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

  • Committer: Mathieu Trudel-Lapierre
  • Date: 2017-05-24 23:35:02 UTC
  • mfrom: (779.1.6 artful)
  • Revision ID: mathieu.trudel-lapierre@canonical.com-20170524233502-qsuz8b0wcvgcscfl
Update Kubuntu slideshow for 17.10.

Show diffs side-by-side

added added

removed removed

Lines of Context:
slideshows/kubuntu/slides/link/base.css
1
 
html, body
2
 
{
3
 
        margin:0;
4
 
        padding:0;
5
 
        font-family: Oxygen-Sans;
6
 
        color:#000000;
7
 
        background-color: #EFF0F1;
 
1
html, body, div, span, applet, object, iframe,
 
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
3
a, abbr, acronym, address, big, cite, code,
 
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
 
5
small, strike, strong, sub, sup, tt, var,
 
6
b, u, i, center,
 
7
dl, dt, dd, ol, ul, li,
 
8
fieldset, form, label, legend,
 
9
table, caption, tbody, tfoot, thead, tr, th, td {
 
10
        margin:0;
 
11
        padding:0;
 
12
        border:0;
 
13
        outline:0;
 
14
        font-size: 100%;
 
15
        font-style:normal;
 
16
        text-decoration:none;
 
17
        font-weight:normal;
 
18
        vertical-align:baseline;
 
19
        background:transparent;
 
20
}
 
21
ol, ul {
 
22
        list-style:none;
 
23
}
 
24
 
 
25
html, body {
 
26
        margin:0;
 
27
        padding:0;
 
28
 
 
29
        background-color:#F7F6F6;
 
30
 
 
31
        font-family: 'Droid Sans', 'Cantarell', 'Ubuntu', 'UbuntuBeta', sans-serif;
 
32
        font-size:13px;
 
33
        line-height:1.4em;
 
34
 
 
35
        color:#333333;
 
36
 
 
37
        /* no reason to expose this extra stuff to the user */
 
38
        -webkit-user-select:none;
 
39
        -moz-user-select:none;
 
40
        user-select:none;
 
41
        cursor:default;
8
42
}
9
43
 
10
44
/*
11
45
Hyperlink-style text
12
46
*/
13
 
a
14
 
{
15
 
        color: #0088aa;
16
 
}
17
 
 
18
 
#slideshow
19
 
{
 
47
a {
 
48
        /*color:#0087ED;*/
 
49
        color:#1d99f3;
 
50
        text-decoration:underline;
 
51
        display:inline;
 
52
}
 
53
 
 
54
.text a:hover {
 
55
        text-decoration:underline;
 
56
}
 
57
 
 
58
strong {
 
59
        font-weight: bolder;
 
60
}
 
61
 
 
62
#wrapper {
20
63
        position:absolute;
21
 
        
22
 
        width: 100%;
23
 
        height: 100%;
24
 
        
 
64
 
 
65
        width:752px;
 
66
        height:100%;
 
67
}
 
68
 
 
69
#slideshow {
 
70
        width:752px;
 
71
        min-height:442px;
 
72
        height:100%;
25
73
        overflow:hidden;
 
74
        /* move this to #main if we want the background image to move with slides */
 
75
        /*background-image:url('background.jpg');*/
 
76
        /*background-position: bottom;*/
26
77
}
27
78
#slideshow > div {
28
79
        position:absolute;
30
81
        height:100%;
31
82
}
32
83
 
33
 
#debug-controls {
34
 
        display:none;
35
 
        position:absolute;
36
 
        top:440px;
37
 
        width:700px;
38
 
        text-align:center;
39
 
}
40
 
#debug-controls input {
41
 
        width:40px;
42
 
}
43
 
 
44
 
/*
45
 
Title block is positioned at the top of a slide.
46
 
*/
47
 
.title
48
 
{
49
 
        position:absolute;
50
 
        top:15px;
51
 
        left:10px;
 
84
.control-arrow {
 
85
        display:block;
 
86
        position:absolute;
 
87
 
 
88
        z-index:100;
 
89
        top:378px;
 
90
        height:64px;
 
91
        width:33px;
 
92
 
 
93
        background-repeat:no-repeat;
 
94
        cursor:pointer;
 
95
}
 
96
.control-arrow.disabled {
 
97
        cursor:default;
 
98
}
 
99
.control-arrow:hover {
 
100
        background-position: 0px -65px;
 
101
}
 
102
.control-arrow:active {
 
103
        background-position: 0px -130px;
 
104
}
 
105
.control-arrow#prev-slide {
 
106
        background-image:url('arrow-back.png');
 
107
        left:686px;
 
108
}
 
109
.control-arrow#next-slide {
 
110
        background-image:url('arrow-next.png');
 
111
        left:719px; /* 752px - 33px */
 
112
}
 
113
 
 
114
/* Fixed container for a slide's title */
 
115
.header {
 
116
        display:table; /* this is a bit evil, but it lets us vertically centre stuff */
 
117
        position:absolute;
 
118
        /* FIXME: better to use position:relative here and for #main.
 
119
           Need to have a specific maximum height, though,
 
120
           which isn't working with display:table */
 
121
        top:0px;
 
122
        width:100%;
 
123
        height:68px;
 
124
        z-index: 2;
 
125
        background-color:#232629;
 
126
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 
127
}
 
128
 
 
129
.header > .slidetitle {
 
130
        display:table-cell;
 
131
        padding:0px 25px;
 
132
        vertical-align:middle;
52
133
 
53
134
        font-size:20px;
54
 
        font-weight:bold;
55
 
        color: #0f262f;
56
 
        border-bottom: 1px solid #3DAEE9;
57
 
        width: 100%;
58
 
 
59
 
        padding:0;
60
 
        margin:0;
61
 
}
62
 
 
63
 
/*
64
 
Typically an image. This is positioned at the top
65
 
right of a slide and is given a size of 64x64 pixels.
66
 
*/
67
 
.icon
68
 
{
69
 
        position:absolute;
70
 
        
71
 
        width:auto;
72
 
        height:auto;
73
 
        
74
 
        bottom:10px;
75
 
        right:10px;
76
 
        
77
 
        z-index:11;
78
 
        border:0px;
79
 
}
80
 
 
81
 
/*
82
 
#content expects to be contained in here. #main
83
 
creates a nice, plain surface upon which it can
84
 
appear :)
85
 
*/
86
 
.main
87
 
{
88
 
        position:absolute;
89
 
        
90
 
        top:50px;
91
 
        left:0px;
92
 
        
93
 
        padding-right:60px;
94
 
        
95
 
        font-size:14px;
96
 
        
97
 
        z-index:12;
98
 
}
99
 
 
100
 
/*
101
 
Slide's body text goes here. It appears right below
102
 
the title, at the top of the white area with heavy
103
 
margins around it.
104
 
*/
105
 
.main .content
106
 
{
107
 
        padding-left:16px;
108
 
        padding-right:16px;
109
 
}
110
 
 
111
 
.content ul
112
 
{
113
 
        margin-top:0px;
114
 
        padding-left:1.8em;
115
 
        
116
 
        height:auto;
117
 
        
118
 
        overflow:auto;
119
 
        
120
 
        list-style-image:url("bullet-point.png");
121
 
}
122
 
 
123
 
.content li
124
 
{
125
 
        padding:0.6em;
126
 
}
127
 
 
128
 
.content .special
129
 
{
130
 
        position:absolute;
131
 
        top:290px;
132
 
        left:50px;
133
 
        
134
 
        font-weight:bold;
135
 
}
136
 
 
137
 
.content img.inline
138
 
{
139
 
        height:auto;
140
 
        width:auto;
 
135
        line-height:50px;
 
136
        font-weight:bold;
 
137
        color:#F7F6F6;
 
138
}
 
139
.header > .slidetitle img {
 
140
        display: block;
 
141
}
 
142
 
 
143
.main {
 
144
        position:absolute;
 
145
        top:70px; /* 68px + 2px margin */
 
146
        bottom:0px;
 
147
        left:0px;
 
148
        right:0px;
 
149
        min-height:370px; /* 442px (from #slideshow) - 70px - 2px */
 
150
        /* move this to #slideshow if we don't want the background image to move with slides */
 
151
        /*background-image:url('background.png');*/
 
152
}
 
153
 
 
154
.main.big {
 
155
        top:68px;
 
156
        left:0px;
 
157
        right:0px;
 
158
        bottom:0px;
 
159
}
 
160
 
 
161
.main.wide{
 
162
        top:68px;
 
163
        left:0px;
 
164
        right:0px;
 
165
        bottom:0px;
 
166
        /*background-image:url('background.jpg');*/
 
167
}
 
168
 
 
169
/*
 
170
A slide's body text goes inside here.
 
171
Inner space is 224px wide.
 
172
*/
 
173
 
 
174
{
 
175
        position:absolute;
 
176
        z-index:10;
 
177
        top:55px;
 
178
        left:30px;
 
179
        width:248px;
 
180
        bottom:0px;
 
181
        min-height:314px; /* 369 - 25 - 15 (for bottom) */
 
182
        overflow:auto;
 
183
}
 
184
 
 
185
.text > div {
 
186
        margin-bottom:8px;
 
187
        padding:6px 12px;
 
188
}
 
189
.text > div:last-child {
 
190
        margin-bottom:0px;
 
191
}
 
192
 
 
193
.text > div > .subtitle {
 
194
        padding-bottom:2px;
 
195
        margin-bottom:5px;
 
196
        font-size:inherit;
 
197
        font-weight:normal;
 
198
        text-decoration:none;
 
199
        border-bottom:#F7F6F6 dotted 1px;
 
200
}
 
201
 
 
202
.main.big > .text {
 
203
        top:55px;
 
204
        width:320px;
 
205
}
 
206
 
 
207
.main.big > .text > div {
 
208
        background:none;
 
209
        font-size:13px;
 
210
        line-height:1.2em;
 
211
        color:#F7F6F6;
 
212
        /*text-shadow:1px 1px 1px #333333;*/
 
213
}
 
214
 
 
215
.main.wide > .text {
 
216
        position:absolute;
 
217
        z-index:10;
 
218
        top:235px;
 
219
        left:36px;
 
220
        width:680px;
 
221
        overflow:auto;
 
222
}
 
223
 
 
224
.main.wide > .text > div {
 
225
        background:none;
 
226
        font-size:inherit;
 
227
        line-height:1.2em;
 
228
        margin-bottom:8px;
 
229
        padding:6px 12px;
 
230
        background-color:#FCFCFC;
 
231
}
 
232
 
 
233
/* Kubuntu addons 
 
234
 * Aaron Honeycutt <aaronhoneycutt@kubuntu.org>
 
235
 * ahoneybun on IRC
 
236
 */
 
237
 
 
238
.main > .text > ul.center {
 
239
    list-style-type:disc;
 
240
    font-size:15px;
 
241
    width:525px;
 
242
    margin-left:15px;
 
243
    padding-top:25px;
 
244
    padding-left:15px;
 
245
}
 
246
 
 
247
#left-text {
 
248
    font-size:16px;
 
249
    text-align:left;
 
250
    padding-top:35px;
 
251
    padding-left:13px;
 
252
    width:209px;
 
253
    overflow:auto;
 
254
}
 
255
 
 
256
#left-text-alt {
 
257
    font-size:16px;
 
258
    text-align:left;
 
259
    padding-top:35px;
 
260
    padding-left:13px;
 
261
    width:250px;
 
262
    overflow:auto;
 
263
}
 
264
 
 
265
#right-text { 
 
266
    font-size:16px;
 
267
    text-align:right;
 
268
    padding-top:65px;
 
269
    padding-left:250px;
 
270
    width:350px;
 
271
    overflow:auto;
 
272
}
 
273
 
 
274
/* End of addons by Kubuntu */
 
275
 
 
276
.featured ul {
 
277
        display:table;
 
278
}
 
279
.featured li {
 
280
        display:table-row;
 
281
}
 
282
.featured li > * {
 
283
        padding-bottom:12px;
 
284
}
 
285
.featured li .icon {
 
286
        display:table-cell;
 
287
        width:24px;
 
288
        height:auto;
 
289
        padding-right:12px;
 
290
}
 
291
.featured li .caption {
 
292
        display:table-cell;
 
293
        vertical-align:middle;
 
294
}
 
295
 
 
296
.bigicon{
 
297
        position: absolute;
 
298
        bottom:0px;
 
299
}
 
300
 
 
301
.bigicon ul{
 
302
        width:100%;
 
303
}
 
304
.bigicon li{
 
305
        margin-right:20px;
 
306
        float:left;
 
307
}
 
308
 
 
309
/* Expects screenshot to be 448x347 px */
 
310
.main > .screenshot {
 
311
        position:absolute;
 
312
        top:25px;
 
313
        right:-2px; /* offsets 2px margin of .main */
 
314
 
 
315
        z-index:2;
 
316
 
 
317
        /* Screenshot shadow, not in use but might be useful in future releases*/
 
318
        /* -webkit-box-shadow:#999999 0px 0px 5px;
 
319
        -moz-box-shadow:#999999 0px 0px 5px;
 
320
        box-shadow:#999999 0px 0px 5px; */
 
321
}
 
322
 
 
323
/* Expects screenshot to be 748x370 px */
 
324
.main.wide > .background {
 
325
        top:0px;
 
326
        right:0px;
 
327
        width:100%;
 
328
        height:auto;
 
329
        -webkit-box-shadow:none;
 
330
        -moz-box-shadow:none;
 
331
        box-shadow:none;
 
332
 
 
333
        z-index:0;
141
334
}
142
335
 
143
336
/*
144
337
This rule disables drag-and-drop for images.  See bug #448703.
145
338
*/
146
 
img
147
 
{
148
 
        -webkit-user-drag: none;
 
339
img {
 
340
        -webkit-user-drag:none;
149
341
}
150
342
 
151
343
 
154
346
.rtl {
155
347
        direction:rtl;
156
348
}
157
 
.rtl .title {
158
 
        right:10px;
159
 
}
160
 
.rtl .icon {
161
 
        left:10px;
 
349
 
 
350
.rtl .control-arrow#prev-slide {
 
351
        background-image:url('arrow-next.png');
 
352
        left:719px;
 
353
}
 
354
.rtl .control-arrow#next-slide {
 
355
        background-image:url('arrow-back.png');
 
356
        left:686px; /* 752px - 33px */
 
357
}
 
358
 
 
359
.rtl .main > .text {
 
360
        left:auto;
 
361
        right:36px;
 
362
}
 
363
 
 
364
.rtl .main > .screenshot {
162
365
        right:auto;
 
366
        left:-2px;
163
367
}
164
 
.rtl .main {
165
 
        right:0px;
 
368
 
 
369
.rtl .featured li .icon {
166
370
        padding-right:0px;
167
 
        padding-left:60px;
168
 
}
169
 
.rtl .content ul {
170
 
        list-style-image:url("bullet-point.rtl.png");
171
 
}
172
 
.rtl .content .special {
173
 
        right:50px;
174
 
        left:auto;
 
371
        padding-left:12px;
 
372
}
 
373
 
 
374
.l10n-string {
 
375
        display:none;
175
376
}