Mercurial > libervia-templates
comparison default/static/login.css @ 54:a5dc14675d5e
login: login, logged and registration pages
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 27 Oct 2017 18:56:21 +0200 |
parents | |
children | f76ec90e0e1e |
comparison
equal
deleted
inserted
replaced
53:dfef430a26ef | 54:a5dc14675d5e |
---|---|
1 body { | |
2 background: #111; | |
3 } | |
4 | |
5 footer { | |
6 color: #999; | |
7 } | |
8 | |
9 #login_container { | |
10 display: flex; | |
11 height: 100%; | |
12 align-items: center; | |
13 justify-content: center; | |
14 } | |
15 | |
16 #login_box { | |
17 display: flex; | |
18 background: #111; | |
19 color: #aaa; | |
20 width: 600px; | |
21 margin: auto; | |
22 } | |
23 | |
24 #login_left { | |
25 display: none; | |
26 } | |
27 | |
28 #login_right { | |
29 width: 100%; | |
30 position: relative; | |
31 } | |
32 | |
33 #login_form { | |
34 margin-top: 60px; | |
35 } | |
36 | |
37 #login_form label { | |
38 font-weight: bold; | |
39 display: block; | |
40 text-align: center; | |
41 } | |
42 | |
43 #login_form input:not(.form_submit) { | |
44 display: block; | |
45 margin: 0 auto; | |
46 height: 25px; | |
47 line-height: 25px; | |
48 width: 200px; | |
49 text-indent: 11px; | |
50 background: #000; | |
51 color: #ccc; | |
52 border: 1px solid #555; | |
53 border-radius: 15px 15px 15px 15px; | |
54 } | |
55 | |
56 #login_form input:hover { | |
57 background-color: #222; | |
58 } | |
59 | |
60 #login_form input:focus { | |
61 border: 1px solid #999; | |
62 } | |
63 | |
64 #login_box .form_input { | |
65 display: block; | |
66 margin-bottom: 1em; | |
67 } | |
68 | |
69 #login_form .form_submit, | |
70 #logged .form_submit { | |
71 /* FIXME: as above /media is not good. | |
72 * url should be replaced by real gradient */ | |
73 color: #fff; | |
74 background: #222 url('/media/libervia/gradient.png') repeat-x; | |
75 font-weight: bold; | |
76 line-height: 1; | |
77 text-shadow: 0 -1px 1px rgba(0,0,0,0.25); | |
78 padding: 7px 10px 8px; | |
79 border: 0; | |
80 border-radius: 6px 6px 6px 6px; | |
81 cursor: pointer; | |
82 margin-top: 30px; | |
83 } | |
84 | |
85 #login_form .form_submit:hover, | |
86 #logged .form_submit:hover { | |
87 background-color: #bc0000; | |
88 } | |
89 | |
90 #login_error { | |
91 position: absolute; | |
92 margin: -90px 0 0; | |
93 width: 100%; | |
94 height: 150px; | |
95 overflow: auto; | |
96 font-size: 0.9em; | |
97 font-weight: bold; | |
98 color: lightcoral; | |
99 text-align: center; | |
100 } | |
101 | |
102 #login_error p { | |
103 position: absolute; | |
104 bottom: 0; | |
105 margin-left: 46px; | |
106 margin-right: 46px; | |
107 } | |
108 | |
109 #create_account_link { | |
110 width: 100%; | |
111 margin-top: 3em; | |
112 } | |
113 | |
114 #login_link { | |
115 margin-top: 1em; | |
116 } | |
117 | |
118 #create_account_link a, | |
119 #login_link a { | |
120 text-decoration: none; | |
121 text-align: center; | |
122 font-size: 0.8em; | |
123 cursor: pointer; | |
124 color: #fff; | |
125 display: block; | |
126 text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2); | |
127 } | |
128 | |
129 .logged_box { | |
130 margin: 3em; | |
131 padding: 1em; | |
132 text-align: center; | |
133 font-style: italic; | |
134 } | |
135 | |
136 .logged_profile { | |
137 font-style: normal; | |
138 font-weight: bold; | |
139 } | |
140 | |
141 #login_form form.register input[type=submit] { | |
142 margin-top: 0.5em; | |
143 } | |
144 | |
145 @media (min-width: 600px) { | |
146 body { | |
147 background: transparent; | |
148 } | |
149 | |
150 footer { | |
151 color: black; | |
152 } | |
153 | |
154 #login_left { | |
155 display: inline; | |
156 } | |
157 | |
158 #login_right { | |
159 /* FIXME: there is not way to correctly select images from | |
160 * media path at the moment */ | |
161 background: url('/media/libervia/register_right.png'); | |
162 } | |
163 | |
164 #login_error { | |
165 width: auto; | |
166 max-height: 50px; | |
167 margin: 10px 46px 0; | |
168 } | |
169 | |
170 #login_error p { | |
171 position: static; | |
172 margin: 0; | |
173 } | |
174 | |
175 #login_form label { | |
176 text-align: initial; | |
177 position: relative; | |
178 left: 50px; | |
179 } | |
180 | |
181 #login_form label::after { | |
182 content: ':' | |
183 } | |
184 | |
185 #login_form input:not(.form_submit) { | |
186 display: inline; | |
187 margin: 0; | |
188 position: relative; | |
189 left: 50px; | |
190 } | |
191 | |
192 #create_account_link { | |
193 margin-top: 0; | |
194 bottom: 0; | |
195 position: absolute; | |
196 } | |
197 } |