1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.large-title {
font-weight: 300;
font-size: 24pt;
letter-spacing: 0.2rem;
}
.page-title {
font-weight: 600;
font-size: 20pt;
}
.page-body {
font-weight: 400;
font-size: 12pt;
}
.video {
opacity: 0;
}
.video.playing {
opacity: 1;
transition-property: opacity;
transition-duration: 250ms;
transition-timing-function: ease-in-out;
}
window .titlebar button {
min-width: 60px;
}
/* pages */
@keyframes welcome-bg-move {
from { background-position: center 30%, -1400px 0, -600px 0, center 30%; }
to { background-position: center 30%, 0 0, 0 0, center 30%; }
}
@keyframes up-and-down {
from { background-position: center 30%, center 30%, center; }
to { background-position: center 40%, center 30%, center; }
}
@keyframes left-and-right {
from { background-position: 40% 30%, center 30%, center; }
to { background-position: 60% 30%, center 30%, center; }
}
.page { color: #000; }
/* .page:nth-child(2) { background: linear-gradient(to right, #3584e4, #1a5fb4); } overview */
.page:nth-child(3) { } /* customize */
/* .page:nth-child(4) { background: linear-gradient(to right, #e66100, #c64600); } workspaces */
.page:nth-child(5) { /* up down */
background: url('/org/gnome/Tour/hand-fg.svg'),
url('/org/gnome/Tour/updown-bg.svg');
background-repeat: no-repeat;
background-position: center 30%;
animation: up-and-down 2s ease-in-out infinite alternate;
}
.page:nth-child(6) { /* left right */
background: url('/org/gnome/Tour/hand-fg.svg'),
url('/org/gnome/Tour/leftright-bg.svg');
background-repeat: no-repeat;
background-position: center 30%;
animation: left-and-right 2s ease-in-out infinite alternate;
}
.last-page { }
.last-page .page-title, .last-page .page-body { }