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 }