diff options
Diffstat (limited to 'point/base.css')
-rw-r--r-- | point/base.css | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/point/base.css b/point/base.css new file mode 100644 index 0000000..fcdc2a6 --- /dev/null +++ b/point/base.css | |||
@@ -0,0 +1,114 @@ | |||
1 | /* | ||
2 | * This file is part of "What's The Point" <https://github.com/Pacien/WhatsThePoint> | ||
3 | * Copyright (C) 2014 Pacien TRAN-GIRARD | ||
4 | * | ||
5 | * "What's The Point" is free software: you can redistribute it and/or modify | ||
6 | * it under the terms of the GNU Affero General Public License as | ||
7 | * published by the Free Software Foundation, either version 3 of the | ||
8 | * License, or (at your option) any later version. | ||
9 | * | ||
10 | * "What's The Point" is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
17 | */ | ||
18 | @import url("libs/normalizecss/normalize.css"); | ||
19 | |||
20 | html { | ||
21 | width: 100%; | ||
22 | height: 100%; | ||
23 | } | ||
24 | |||
25 | body { | ||
26 | position: absolute; | ||
27 | width: 100%; | ||
28 | height: 100%; | ||
29 | background: black; | ||
30 | } | ||
31 | |||
32 | noscript { | ||
33 | position: absolute; | ||
34 | width: 20em; | ||
35 | height: 5em; | ||
36 | margin: auto; | ||
37 | top: 0; | ||
38 | bottom: 0; | ||
39 | left: 0; | ||
40 | right: 0; | ||
41 | text-align: center; | ||
42 | color: white; | ||
43 | background: black; | ||
44 | } | ||
45 | |||
46 | /* loading animation */ | ||
47 | /* http://codepen.io/lixquid/pen/ybjmr */ | ||
48 | |||
49 | #loadingclock { | ||
50 | position: absolute; | ||
51 | margin: auto; | ||
52 | top: 0; | ||
53 | bottom: 0; | ||
54 | left: 0; | ||
55 | right: 0; | ||
56 | width: 48px; | ||
57 | height: 48px; | ||
58 | border: 2px solid #ccc; | ||
59 | border-radius: 100%; | ||
60 | } | ||
61 | |||
62 | #loadingclock:before { | ||
63 | display: block; | ||
64 | position: absolute; | ||
65 | left: 23px; | ||
66 | top: 2px; | ||
67 | width: 2px; | ||
68 | height: 22px; | ||
69 | background-color: #ccc; | ||
70 | animation: spin 3s linear infinite; | ||
71 | -webkit-animation: spin 3s linear infinite; | ||
72 | content: " "; | ||
73 | transform-origin: 1px 22px; | ||
74 | -webkit-transform-origin: 1px 22px; | ||
75 | } | ||
76 | |||
77 | #loadingclock:after { | ||
78 | display: block; | ||
79 | position: absolute; | ||
80 | left: 23px; | ||
81 | top: 3px; | ||
82 | width: 2px; | ||
83 | height: 21px; | ||
84 | background-color: #ccc; | ||
85 | animation: spin 18s linear infinite; | ||
86 | -webkit-animation: spin 18s linear infinite; | ||
87 | content: ""; | ||
88 | transform-origin: 1px 21px; | ||
89 | -webkit-transform-origin: 1px 21px; | ||
90 | } | ||
91 | |||
92 | @-moz-keyframes spin { | ||
93 | to { | ||
94 | transform: rotate(360deg); | ||
95 | } | ||
96 | } | ||
97 | |||
98 | @-webkit-keyframes spin { | ||
99 | to { | ||
100 | -webkit-transform: rotate(360deg); | ||
101 | } | ||
102 | } | ||
103 | |||
104 | @-o-keyframes spin { | ||
105 | to { | ||
106 | transform: rotate(360deg); | ||
107 | } | ||
108 | } | ||
109 | |||
110 | @keyframes spin { | ||
111 | to { | ||
112 | transform: rotate(360deg); | ||
113 | } | ||
114 | } | ||