[TASK] Optimize CSS clearfix usage
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _login_screen.less
1 //
2 // Login Screen
3 //
4
5 //
6 // Login Screen
7 // Warning:
8 // DO NOT prevent the copyright notice from being shown!
9 // According to the GPL license an interactive application must show such a notice on start-up ('If the program is interactive, make it output a short notice... ' - see GPL.txt)
10 // Therefore preventing this notice from being properly shown is a violation of the license, regardless of whether you remove it or use the stylesheet to obstruct the display.
11 //
12
13
14 @login-width: 360px;
15 @login-bg: #eee;
16 @login-border-radius: 5px;
17
18 @login-highlight: #ff8800;
19 @login-btn-text: #fff;
20 @login-btn-bg: @login-highlight;
21
22 @login-copyright-text: #444;
23
24 @login-input-height: @input-height-large;
25 @login-input-font-size: 12px;
26 @login-input-line-height: @line-height-large;
27 @login-input-border-radius: 2px;
28 @login-input-border-color: #ccc;
29 @login-input-padding-vertical: @padding-large-vertical;
30 @login-input-padding-horizontal: @padding-large-horizontal;
31
32
33 //
34 // Login
35 //
36 .typo3-login {
37 background-color: @login-bg;
38 background-repeat: no-repeat;
39 background-size: cover;
40 background-position: center center;
41 display: table;
42 position: absolute;
43 top: 0;
44 left: 0;
45 padding: 10px;
46 width: 100%;
47 min-height: 100%;
48 height: 100%;
49 }
50 .typo3-login-container {
51 display: table-cell;
52 vertical-align: middle;
53 }
54 .typo3-login-wrap {
55 max-width: @login-width;
56 margin: 0 auto;
57 }
58 .typo3-login-links {
59 padding-top: inherit;
60 margin-top: 20px;
61 margin-bottom: 20px;
62 .disabled {
63 cursor: not-allowed!important;
64 text-decoration: none!important;
65 color: @text-muted!important;
66 span {
67 cursor: inherit;
68 }
69 }
70 }
71
72
73 //
74 // Logo
75 //
76 .typo3-login-logo {
77 margin-bottom: 30px;
78 > img {
79 display: block;
80 max-width: 100%;
81 height: auto;
82 margin: 0 auto;
83 }
84 }
85
86
87 //
88 // News
89 //
90 .typo3-login-news-heading {
91 font-size: 14px;
92 line-height: 1.3em;
93 margin-top: 0;
94 }
95
96
97 //
98 // Panel
99 //
100 .panel-login {
101 border-color: darken(@login-bg, 10%);
102 border-radius: @login-border-radius;
103 .panel-heading {
104 .border-top-radius((@login-border-radius - 1));
105 }
106 .panel-body {
107 border-bottom: 3px solid @login-highlight;
108 }
109 .panel-footer {
110 .border-bottom-radius((@login-border-radius - 1));
111 }
112 a {
113 font-weight: bold;
114 }
115 @media (max-width: @screen-xs-max){
116 margin-bottom: 0;
117 }
118 }
119
120
121 //
122 // Forms
123 //
124 .input-login {
125 border-color: @login-input-border-color;
126 .box-shadow(none);
127 .input-size(@login-input-height; @login-input-padding-vertical; @login-input-padding-horizontal; @login-input-font-size; @login-input-line-height; @login-input-border-radius);
128 &:focus {
129 .box-shadow(none);
130 }
131 }
132 .btn-login {
133 .button-size(@login-input-padding-vertical; @login-input-padding-horizontal; @login-input-font-size; 1em; @login-input-border-radius);
134 .button-variant(@login-btn-text; @login-btn-bg; rgba(0,0,0,0.1));
135 line-height: 1.3em;
136 &:active,
137 &:active:focus,
138 &:active:hover,
139 &:focus,
140 &:hover,
141 &:visited {
142 background-color: @login-btn-bg;
143 }
144 &:active:focus,
145 &:focus {
146 outline: none;
147 }
148 &:hover {
149 box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.125);
150 }
151 &:active:focus,
152 &:active:hover {
153 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
154 }
155 &:focus {
156 .box-shadow(none);
157 }
158 }
159
160
161 //
162 // Carousel
163 //
164 .typo3-login-carousel-control {
165 top: 50%;
166 margin-top: -30px;
167 height: 60px;
168 line-height: 60px;
169 width: 10px;
170 background-color: #ffffff;
171 text-align: center;
172 position: absolute;
173 .opacity(0.25);
174 .transition(opacity 0.2s ease-in-out);
175 &:hover {
176 .opacity(1);
177 }
178 &.left {
179 left: -10px;
180 border: 1px solid darken(@login-bg, 10%);
181 border-right: 0;
182 border-radius: 2px 0 0 2px;
183 }
184 &.right {
185 right: -10px;
186 border: 1px solid darken(@login-bg, 10%);
187 border-left: 0;
188 border-radius: 0 2px 2px 0;
189 }
190 @media (min-width: @screen-sm-min){
191 width: 20px;
192 &.left {
193 left: -20px;
194 }
195 &.right {
196 right: -20px;
197 }
198 }
199 }
200
201
202 //
203 // Copyright
204 //
205 .typo3-login-copyright-link {
206 &:extend(.clearfix all);
207 > img {
208 float: right;
209 margin-top: -4px;
210 }
211 }
212 .typo3-login-copyright-text {
213 margin-top: @line-height-computed;
214 color: @login-copyright-text;
215 .fa {
216 font-size: 13px;
217 }
218 > *:first-child {
219 margin-top: 0;
220 }
221 > *:last-child {
222 margin-bottom: 0;
223 }
224 }