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