894ab4a6f92f99fc750067aaff72ae3ea7f3715c
[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
17 @login-highlight: #ff8800;
18 @login-btn-text: #fff;
19 @login-btn-bg: @login-highlight;
20
21 @login-copyright-text: #444;
22
23 @login-input-height: @input-height-large;
24 @login-input-font-size: 12px;
25 @login-input-line-height: @line-height-large;
26 @login-input-border-radius: 2px;
27 @login-input-border-color: #ccc;
28 @login-input-padding-vertical: @padding-large-vertical;
29 @login-input-padding-horizontal: @padding-large-horizontal;
30
31
32 //
33 // Login
34 //
35 .typo3-login {
36 background-color: @login-bg;
37 background-repeat: no-repeat;
38 background-size: cover;
39 background-position: center center;
40 display: table;
41 position: absolute;
42 top: 0;
43 left: 0;
44 padding: 10px;
45 width: 100%;
46 min-height: 100%;
47 height: 100%;
48 }
49 .typo3-login-container {
50 display: table-cell;
51 vertical-align: middle;
52 }
53 .typo3-login-wrap {
54 max-width: @login-width;
55 margin: 0 auto;
56 }
57 .typo3-login-links {
58 padding-top: inherit;
59 margin-top: 40px;
60 margin-bottom: 0;
61 .disabled {
62 cursor: not-allowed!important;
63 text-decoration: none!important;
64 color: @text-muted!important;
65 span {
66 cursor: inherit;
67 }
68 }
69 }
70
71
72 //
73 // Logo
74 //
75 .typo3-login-logo {
76 margin-bottom: 30px;
77 > img {
78 display: block;
79 max-width: 100%;
80 height: auto;
81 margin: 0 auto;
82 }
83 }
84
85
86 //
87 // News
88 //
89 .typo3-login-news-heading {
90 font-size: 14px;
91 line-height: 1.3em;
92 margin-top: 0;
93 }
94
95
96 //
97 // Panel
98 //
99 .panel-login {
100 border-color: darken(@login-bg, 10%);
101 .panel-body {
102 border-bottom: 3px solid @login-highlight;
103 }
104 a {
105 font-weight: bold;
106 }
107 @media (max-width: @screen-xs-max){
108 margin-bottom: 0;
109 }
110 }
111
112
113 //
114 // Forms
115 //
116 .input-login {
117 border-color: @login-input-border-color;
118 .box-shadow(none);
119 .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);
120 &:focus {
121 .box-shadow(none);
122 }
123 }
124 .btn-login {
125 .button-size(@login-input-padding-vertical; @login-input-padding-horizontal; @login-input-font-size; 1em; @login-input-border-radius);
126 .button-variant(@login-btn-text; @login-btn-bg; rgba(0,0,0,0.1));
127 line-height: 1.3em;
128 &:focus {
129 outline: none;
130 .box-shadow(none);
131 }
132 }
133
134
135 //
136 // Carousel
137 //
138 .typo3-login-carousel-control {
139 top: 50%;
140 margin-top: -30px;
141 height: 60px;
142 line-height: 60px;
143 width: 10px;
144 background-color: #ffffff;
145 text-align: center;
146 position: absolute;
147 .opacity(0.25);
148 .transition(opacity 0.2s ease-in-out);
149 &:hover {
150 .opacity(1);
151 }
152 &.left {
153 left: -10px;
154 border: 1px solid darken(@login-bg, 10%);
155 border-right: 0;
156 border-radius: 2px 0 0 2px;
157 }
158 &.right {
159 right: -10px;
160 border: 1px solid darken(@login-bg, 10%);
161 border-left: 0;
162 border-radius: 0 2px 2px 0;
163 }
164 @media (min-width: @screen-sm-min){
165 width: 20px;
166 &.left {
167 left: -20px;
168 }
169 &.right {
170 right: -20px;
171 }
172 }
173 }
174
175
176 //
177 // Copyright
178 //
179 .typo3-login-copyright-link {
180 .clearfix();
181 > img {
182 float: right;
183 margin-top: -4px;
184 }
185 }
186 .typo3-login-copyright-text {
187 margin-top: @line-height-computed;
188 color: @login-copyright-text;
189 .fa {
190 font-size: 13px;
191 }
192 > *:first-child {
193 margin-top: 0;
194 }
195 > *:last-child {
196 margin-bottom: 0;
197 }
198 }