style.css - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
style.css (4224B)
---
1 @keyframes fade-in {
2 0% {
3 opacity: 0;
4 }
5 100% {
6 opacity: 1;
7 }
8 }
9 @keyframes fade-out {
10 0% {
11 opacity: 1;
12 }
13 100% {
14 opacity: 0;
15 }
16 }
17 @keyframes news-slide-in {
18 0% {
19 margin-left: 100%;
20 opacity: 0;
21 }
22 100% {
23 margin-left: 0;
24 opacity: 1;
25 }
26 }
27 @keyframes news-slide-out {
28 0% {
29 margin-left: 0;
30 opacity: 1;
31 }
32 100% {
33 opacity: 0;
34 margin-left: -100%;
35 }
36 }
37 body {
38 font-family: sans-serif;
39 }
40 html, body {
41 overflow: hidden;
42 }
43 h1 {
44 font-size: 120%;
45 font-weight: bold;
46 margin: 5px 0;
47 padding: 0;
48 }
49 ul {
50 margin: 0;
51 padding: 0;
52 }
53 iframe {
54 border: 0;
55 }
56 .news-ticker {
57 position: fixed;
58 background-color: #eee;
59 line-height: 90px;
60 height: 90px;
61 overflow: hidden;
62 }
63 .news-ticker div {
64 position: absolute;
65 padding: 0 0 0 5px;
66 line-height: 90px;
67 height: 90px;
68 animation: ease-out news-slide-in 1s;
69 }
70 .news-ticker div.out {
71 animation: ease-out news-slide-out 2s;
72 }
73 .ticker1 {
74 z-index: 9999;
75 bottom: 90px;
76 left: 0;
77 right: 0;
78 font-size: 40px;
79 background-color: #333;
80 color: #fff;
81 font-weight: bold;
82 }
83 .ticker2 {
84 z-index: 9999;
85 bottom: 0;
86 left: 0;
87 right: 0;
88 font-size: 40px;
89 background-color: #555;
90 color: #fff;
91 font-weight: bold;
92 }
93 .logo {
94 width: 854px;
95 background-image: url('logo.png');
96 background-repeat: no-repeat;
97 background-position: center left;
98 background-size: auto 160px;
99 height: 180px;
100 position: absolute;
101 top: 0;
102 left: 25px;
103 z-index: 999;
104 }
105 .screen {
106 position: absolute;
107 top: 0;
108 left: 0;
109 right: 0;
110 bottom: 0;
111
112 background-repeat: no-repeat;
113 }
114 .topbar {
115 z-index: 997;
116
117 position: absolute;
118 top: 0;
119 left: 0;
120 height: 115px;
121 right: 0;
122 background-color: #333;
123 }
124 .topbar-right {
125 z-index: 999;
126 position: absolute;
127 top: 0;
128 right: 0;
129 height: 115px;
130 background-color: #333;
131 background-repeat: no-repeat;
132 text-align: left;
133 }
134 .topbar-info-dashboard {
135 z-index: 999;
136 position: absolute;
137 top: 0;
138 width: 343px;
139 left: 100px;
140 height: 158px;
141 background-image: url('img/image.png');
142 background-repeat: no-repeat;
143 text-align: left;
144 }
145 .date {
146 float: right;
147 color: #fff;
148 font-size: 60px;
149 line-height: 115px;
150 padding-right: 70px;
151 white-space: nowrap;
152 }
153 .time {
154 margin-left: 50px;
155 padding-right: 50px;
156 float: right;
157 color: #fff;
158 font-weight: bold;
159 font-size: 90px;
160 line-height: 115px;
161 height: 115px;
162 }
163 .slide {
164 display: none;
165 background-repeat: no-repeat;
166 /* default background color, must be set for overlapping slides for transitions */
167 /*background-color: #fff;*/
168 }
169 body > .screen > .slides > .slide {
170 position: absolute;
171 top: 0;
172 right: 0;
173 bottom: 0;
174 left: 0;
175 height: 100%;
176 width: 100%;
177 }
178 body > .screen > .slides > .slide-2 {
179 background-color: #333;
180 }
181 .visible {
182 z-index: 995; /* visible has more preference over paused */
183 display: block;
184
185 animation: ease-in fade-in 1s;
186 animation-play-state: running;
187 }
188 .pause {
189 z-index: 990;
190 display: block;
191 opacity: 0;
192
193 animation: ease-out fade-out 1s;
194 animation-play-state: running;
195 }
196 .animate-once {
197 animation-iteration-count: 1;
198 }
199 .progressbar {
200 z-index: 9999;
201 position: absolute;
202 bottom: 0;
203 height: 3px;
204 left: 0;
205 width: 0%;
206 background-color: #fff;
207 opacity: 1.0 !important;
208 }
209 .widget {
210 padding: 0;
211 margin: 0;
212 color: #333;
213 font-size: 14pt;
214 }
215 .widget-header {
216 font-size: 30px;
217 font-weight: bold;
218 background-repeat: no-repeat;
219 color: #fff;
220 line-height: 60px;
221 padding: 0 10px;
222 text-transform: uppercase;
223 }
224 .widget-body {
225 padding: 5px 10px;
226 }
227 .widget-body ul {
228 padding: 0 20px;
229 }
230 .widget-lichess {
231 z-index: 1001;
232 position: absolute;
233 left: 7px;
234 width: 628px;
235 top: 160px;
236 height: 365px;
237 font-weight: bold;
238 }
239
240 /* fun: */
241 /* for progressbar image */
242 .progressbar {
243 background: none;
244 text-align: right;
245 vertical-align: bottom;
246 height: 32px;
247 }
248 @keyframes move-snail {
249 0% {
250 padding-left: -4px;
251 }
252 20% {
253 padding-left: -4px;
254 }
255 40% {
256 padding-left: 30px;
257 }
258 60% {
259 padding-left: 20px;
260 }
261 80% {
262 padding-left: 0px;
263 }
264 100% {
265 padding-left: -4px;
266 }
267 }
268 /* gary moves like a snail */
269 .gary {
270 position: absolute;
271 margin-left: -36px;
272 height: 32px;
273
274 animation: linear move-snail 2s;
275 animation-iteration-count: infinite;
276 animation-direction: alternate;
277 }
278 /* santa slides his sled */
279 .santa {
280 position: absolute;
281 margin-left: -36px;
282 height: 32px;
283