1 | @-webkit-keyframes pl-title-border-show {
|
2 | 0% {
|
3 | width: 0;
|
4 | }
|
5 | 100% {
|
6 | width: 700px;
|
7 | }
|
8 | }
|
9 | @-moz-keyframes pl-title-border-show {
|
10 | 0% {
|
11 | width: 0;
|
12 | }
|
13 | 100% {
|
14 | width: 700px;
|
15 | }
|
16 | }
|
17 | @-ms-keyframes pl-title-border-show {
|
18 | 0% {
|
19 | width: 0;
|
20 | }
|
21 | 100% {
|
22 | width: 700px;
|
23 | }
|
24 | }
|
25 | @-o-keyframes pl-title-border-show {
|
26 | 0% {
|
27 | width: 0;
|
28 | }
|
29 | 100% {
|
30 | width: 700px;
|
31 | }
|
32 | }
|
33 | @keyframes pl-title-border-show {
|
34 | 0% {
|
35 | width: 0;
|
36 | }
|
37 | 100% {
|
38 | width: 700px;
|
39 | }
|
40 | }
|
41 | .pl-screen-message {
|
42 | cursor: default;
|
43 | -webkit-touch-callout: none;
|
44 | -webkit-user-select: none;
|
45 | -khtml-user-select: none;
|
46 | -moz-user-select: none;
|
47 | -ms-user-select: none;
|
48 | user-select: none;
|
49 | z-index: 1000;
|
50 | position: fixed;
|
51 | top: 0;
|
52 | left: 0;
|
53 | right: 0;
|
54 | bottom: 0;
|
55 | background: #fff;
|
56 | }
|
57 | .pl-screen-message .title {
|
58 | position: absolute;
|
59 | top: 10px;
|
60 | left: 0;
|
61 | right: 0;
|
62 | height: 3rem;
|
63 | text-align: center;
|
64 | overflow: hidden;
|
65 | }
|
66 | .pl-screen-message .title h1 {
|
67 | position: relative;
|
68 | -webkit-transform: translateY(3rem);
|
69 | -moz-transform: translateY(3rem);
|
70 | -ms-transform: translateY(3rem);
|
71 | -o-transform: translateY(3rem);
|
72 | transform: translateY(3rem);
|
73 | font-size: 2.2rem;
|
74 | text-align: center;
|
75 | line-height: 3rem;
|
76 | margin: 0;
|
77 | }
|
78 | .pl-screen-message .pl-screen-messages-message {
|
79 | position: absolute;
|
80 | left: 2rem;
|
81 | right: 2rem;
|
82 | text-align: center;
|
83 | }
|
84 | .pl-screen-message .pl-screen-messages-message .pl-message .word {
|
85 | font-size: 5rem;
|
86 | line-height: 6rem;
|
87 | }
|
88 | .pl-screen-message .title-border {
|
89 | display: none;
|
90 | width: 700px;
|
91 | height: 1px;
|
92 | margin: 1rem auto 0;
|
93 | -webkit-animation: pl-title-border-show 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
|
94 | -moz-animation: pl-title-border-show 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
|
95 | -ms-animation: pl-title-border-show 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
|
96 | -o-animation: pl-title-border-show 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
|
97 | animation: pl-title-border-show 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
|
98 | }
|
99 | .pl-screen-message.playing .title h1 {
|
100 | -webkit-transform: translateY(0);
|
101 | -moz-transform: translateY(0);
|
102 | -ms-transform: translateY(0);
|
103 | -o-transform: translateY(0);
|
104 | transform: translateY(0);
|
105 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
106 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
107 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
108 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
109 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
110 | }
|
111 | .pl-screen-message.done .title h1 {
|
112 | -webkit-transform: translateY(-3rem);
|
113 | -moz-transform: translateY(-3rem);
|
114 | -ms-transform: translateY(-3rem);
|
115 | -o-transform: translateY(-3rem);
|
116 | transform: translateY(-3rem);
|
117 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
118 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
119 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
120 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
121 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
122 | }
|
123 | .pl-screen-message.sb-title-1 .title-border,
|
124 | .pl-screen-message.sb-title-2 .title-border {
|
125 | display: block;
|
126 | }
|
127 | .pl-screen-message.sb-title-2 .pl-screen-messages-message {
|
128 | -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
129 | -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
130 | -ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
131 | -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
132 | transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
133 | }
|
134 | .pl-screen-message.sb-title-2 .pl-screen-messages-message .message .word {
|
135 | font-size: 3rem;
|
136 | lein-height: 3rem;
|
137 | margin-left: 0.75rem;
|
138 | -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
139 | -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
140 | -ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
141 | -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
142 | transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
143 | }
|
144 | .pl-screen-message.sb-title-out-1 .pl-screen-messages-message {
|
145 | opacity: 0;
|
146 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
147 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
148 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
149 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
150 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
151 | }
|
152 | .pl-screen-message.sb-title-out-1 .pl-screen-messages-message .message .word {
|
153 | font-size: 3rem;
|
154 | lein-height: 3rem;
|
155 | margin-left: 0.75rem;
|
156 | -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
157 | -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
158 | -ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
159 | -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
160 | transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
161 | }
|
162 | .pl-screen-message.sb-title-out-2 .pl-screen-messages-message {
|
163 | opacity: 0;
|
164 | }
|