[FOLLOWUP][TASK] New Login Screen
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / 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: 40px;
61 margin-bottom: 0;
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 &:focus {
137 outline: none;
138 .box-shadow(none);
139 }
140 }
141
142
143 //
144 // Carousel
145 //
146 .typo3-login-carousel-control {
147 top: 50%;
148 margin-top: -30px;
149 height: 60px;
150 line-height: 60px;
151 width: 10px;
152 background-color: #ffffff;
153 text-align: center;
154 position: absolute;
155 .opacity(0.25);
156 .transition(opacity 0.2s ease-in-out);
157 &:hover {
158 .opacity(1);
159 }
160 &.left {
161 left: -10px;
162 border: 1px solid darken(@login-bg, 10%);
163 border-right: 0;
164 border-radius: 2px 0 0 2px;
165 }
166 &.right {
167 right: -10px;
168 border: 1px solid darken(@login-bg, 10%);
169 border-left: 0;
170 border-radius: 0 2px 2px 0;
171 }
172 @media (min-width: @screen-sm-min){
173 width: 20px;
174 &.left {
175 left: -20px;
176 }
177 &.right {
178 right: -20px;
179 }
180 }
181 }
182
183
184 //
185 // Copyright
186 //
187 .typo3-login-copyright-link {
188 .clearfix();
189 > img {
190 float: right;
191 margin-top: -4px;
192 }
193 }
194 .typo3-login-copyright-text {
195 margin-top: @line-height-computed;
196 color: @login-copyright-text;
197 .fa {
198 font-size: 13px;
199 }
200 > *:first-child {
201 margin-top: 0;
202 }
203 > *:last-child {
204 margin-bottom: 0;
205 }
206 }