]>
Commit | Line | Data |
---|---|---|
1 | /* vim: set ts=4 tw=4 sw=4 noet: */ | |
2 | /* ---------- GENERAL ---------- */ | |
3 | * { | |
4 | box-sizing: border-box; | |
5 | } | |
6 | *:before, *:after { | |
7 | box-sizing: border-box; | |
8 | } | |
9 | ||
10 | body { | |
11 | background: #eaeaea; | |
12 | color: #999; | |
13 | font: 400 16px/1.5em sans-serif; | |
14 | margin: 0; | |
15 | } | |
16 | ||
17 | h3 { | |
18 | margin: 0; | |
19 | } | |
20 | ||
21 | a { | |
22 | color: #999; | |
23 | text-decoration: none; | |
24 | } | |
25 | ||
26 | a:hover { | |
27 | color: #1dabb8; | |
28 | } | |
29 | ||
30 | fieldset { | |
31 | border: none; | |
32 | margin: 0; | |
33 | } | |
34 | ||
35 | input { | |
36 | border: none; | |
37 | font-family: inherit; | |
38 | font-size: inherit; | |
39 | margin: 0; | |
40 | -webkit-appearance: none; | |
41 | } | |
42 | ||
43 | input:focus { | |
44 | outline: none; | |
45 | } | |
46 | ||
47 | input[type="submit"] { | |
48 | cursor: pointer; | |
49 | } | |
50 | ||
51 | .clearfix { | |
52 | *zoom: 1; | |
53 | } | |
54 | .clearfix:before, .clearfix:after { | |
55 | content: ' '; | |
56 | display: table; | |
57 | } | |
58 | .clearfix:after { | |
59 | clear: both; | |
60 | } | |
61 | ||
62 | .container { | |
63 | left: 50%; | |
64 | position: fixed; | |
65 | top: 50%; | |
66 | -webkit-transform: translate(-50%, -50%); | |
67 | -ms-transform: translate(-50%, -50%); | |
68 | transform: translate(-50%, -50%); | |
69 | } | |
70 | ||
71 | .footer { | |
72 | text-align: center; | |
73 | margin-top: 10px; | |
74 | margin-bottom: 10px; | |
75 | font-size: 0.7em; | |
76 | background: #ECECAC; | |
77 | color: black; | |
78 | } | |
79 | ||
80 | /* ---------- LOGIN-FORM ---------- */ | |
81 | #login-form { | |
82 | width: 300px; | |
83 | } | |
84 | ||
85 | #login-form h3 { | |
86 | background-color: #282830; | |
87 | border-radius: 5px 5px 0 0; | |
88 | color: #fff; | |
89 | font-size: 14px; | |
90 | padding: 20px; | |
91 | text-align: center; | |
92 | text-transform: uppercase; | |
93 | } | |
94 | ||
95 | #login-form fieldset { | |
96 | background: #fff; | |
97 | border-radius: 0 0 5px 5px; | |
98 | padding: 20px; | |
99 | position: relative; | |
100 | } | |
101 | ||
102 | #login-form fieldset:before { | |
103 | background-color: #fff; | |
104 | content: ""; | |
105 | height: 8px; | |
106 | left: 50%; | |
107 | margin: -4px 0 0 -4px; | |
108 | position: absolute; | |
109 | top: 0; | |
110 | -webkit-transform: rotate(45deg); | |
111 | -ms-transform: rotate(45deg); | |
112 | transform: rotate(45deg); | |
113 | width: 8px; | |
114 | } | |
115 | ||
116 | #login-form input { | |
117 | font-size: 14px; | |
118 | } | |
119 | ||
120 | #login-form input[type="email"], | |
121 | #login-form input[type="password"] { | |
122 | border: 1px solid #dcdcdc; | |
123 | padding: 12px 10px; | |
124 | width: 100%; | |
125 | } | |
126 | ||
127 | #login-form input[type="email"] { | |
128 | border-radius: 3px 3px 0 0; | |
129 | } | |
130 | ||
131 | #login-form input[type="password"] { | |
132 | border-top: none; | |
133 | border-radius: 0px 0px 3px 3px; | |
134 | } | |
135 | ||
136 | #login-form input[type="submit"] { | |
137 | background: #1dabb8; | |
138 | border-radius: 3px; | |
139 | color: #fff; | |
140 | float: right; | |
141 | font-weight: bold; | |
142 | margin-top: 20px; | |
143 | padding: 12px 20px; | |
144 | } | |
145 | ||
146 | #login-form input[type="submit"]:hover { | |
147 | background: #198d98; | |
148 | } | |
149 | ||
150 | #login-form footer { | |
151 | font-size: 12px; | |
152 | margin-top: 16px; | |
153 | } | |
154 | ||
155 | .info { | |
156 | background: #e5e5e5; | |
157 | border-radius: 50%; | |
158 | display: inline-block; | |
159 | height: 20px; | |
160 | line-height: 20px; | |
161 | margin: 0 10px 0 0; | |
162 | text-align: center; | |
163 | width: 20px; | |
164 | } | |
165 | ||
166 | /* ---------- GREETING ---------- */ | |
167 | #greeting { | |
168 | width: 300px; | |
169 | } | |
170 | ||
171 | #greeting fieldset { | |
172 | background: #fff; | |
173 | border-radius: 0 0 5px 5px; | |
174 | padding: 20px; | |
175 | position: relative; | |
176 | } | |
177 | ||
178 | #greeting h3 { | |
179 | background-color: #282830; | |
180 | border-radius: 5px 5px 0 0; | |
181 | color: #fff; | |
182 | font-size: 14px; | |
183 | padding: 20px; | |
184 | text-align: center; | |
185 | text-transform: uppercase; | |
186 | } | |
187 | ||
188 | #greeting p { | |
189 | text-align: center; | |
190 | color: navy; | |
191 | } | |
192 | ||
193 | #greeting a { | |
194 | color: green; | |
195 | } | |
196 | ||
197 | .error { | |
198 | color: red; | |
199 | } |