[!!!][TASK] New Login Screen 66/38366/18
authorBenjamin Kott <benjamin.kott@outlook.com>
Mon, 30 Mar 2015 21:46:40 +0000 (23:46 +0200)
committerXavier Perseguers <xavier@typo3.org>
Thu, 16 Apr 2015 09:41:54 +0000 (11:41 +0200)
The login screen is now supporting background
images and adjustable highlight colors out of the
box. Settings for the login screen can now be
accessed in the backend extension setting.

To keep the focus on the most important stuff,
the news that can be displayed are reduced to
a single view carousel where you can slide
through the latest news.

Releases: master
Resolves: #66431
Change-Id: I12aa4e078cd9782ba4f73921164731a055226004
Reviewed-on: http://review.typo3.org/38366
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Xavier Perseguers <xavier@typo3.org>
Tested-by: Xavier Perseguers <xavier@typo3.org>
Reviewed-by: Felix Kopp <felix-source@phorax.com>
Tested-by: Felix Kopp <felix-source@phorax.com>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
18 files changed:
typo3/sysext/backend/Classes/Controller/LoginController.php
typo3/sysext/backend/Resources/Private/Language/locallang.xlf
typo3/sysext/backend/Resources/Private/Templates/Login.html
typo3/sysext/backend/Resources/Public/Images/icon_capslock.svg [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/Images/typo3_black.svg [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/Images/typo3_orange.svg [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/Login.js
typo3/sysext/backend/ext_conf_template.txt [new file with mode: 0644]
typo3/sysext/core/Configuration/DefaultConfiguration.php
typo3/sysext/core/Documentation/Changelog/master/Breaking-66431-NewLoginScreen.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/master/Deprecation-66431-NewLoginScreen.rst [new file with mode: 0644]
typo3/sysext/install/Classes/Service/SilentConfigurationUpgradeService.php
typo3/sysext/lang/locallang_login.xlf
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_panel.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_login_screen.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_form.less
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 1445cc3..cf6362a 100644 (file)
@@ -224,18 +224,52 @@ class LoginController {
                // Might set JavaScript in the header to close window.
                $this->checkRedirect();
 
-               if ($GLOBALS['TBE_STYLES']['logo_login']) {
-                       $logo = '<img src="' . htmlspecialchars(($GLOBALS['BACK_PATH'] . $GLOBALS['TBE_STYLES']['logo_login'])) . '" alt="" class="t3-login-logo" />';
-               } else {
-                       $logo = '<img' . IconUtility::skinImg($GLOBALS['BACK_PATH'], 'gfx/typo3-transparent@2x.png', 'width="140" height="39"') . ' alt="" class="t3-login-logo t3-default-logo" />';
+               // Extension Configuration
+               $extConf = unserialize($GLOBALS['TYPO3_CONF_VARS']['EXT']['extConf']['backend']);
+
+               // Background Image
+               if (!empty($extConf['loginBackgroundImage'])) {
+                       $this->getDocumentTemplate()->inDocStylesArray[] = '
+                               @media (min-width: 768px){
+                                       .typo3-login { background-image: url("' . $extConf['loginBackgroundImage'] . '"); }
+                               }
+                       ';
                }
 
-               $formType = empty($this->getBackendUserAuthentication()->user['uid']) ? 'loginForm' : 'logoutForm';
-               $loginNewsTitle = $GLOBALS['TYPO3_CONF_VARS']['BE']['loginNewsTitle']
-                       ? $GLOBALS['TYPO3_CONF_VARS']['BE']['loginNewsTitle']
-                       : $this->getLanguageService()->getLL('newsheadline');
+               // Add additional css to use the highlight color in the login screen
+               if (!empty($extConf['loginHighlightColor'])) {
+                       $this->getDocumentTemplate()->inDocStylesArray[] = '
+                               .btn-login.disabled, .btn-login[disabled], fieldset[disabled] .btn-login,
+                               .btn-login.disabled:hover, .btn-login[disabled]:hover, fieldset[disabled] .btn-login:hover,
+                               .btn-login.disabled:focus, .btn-login[disabled]:focus, fieldset[disabled] .btn-login:focus,
+                               .btn-login.disabled.focus, .btn-login[disabled].focus, fieldset[disabled] .btn-login.focus,
+                               .btn-login.disabled:active, .btn-login[disabled]:active, fieldset[disabled] .btn-login:active,
+                               .btn-login.disabled.active, .btn-login[disabled].active, fieldset[disabled] .btn-login.active,
+                               .btn-login:hover, .btn-login:focus, .btn-login:active,
+                               .btn-login { background-color: ' . $extConf['loginHighlightColor'] . '; }
+                               .panel-login .panel-body { border-color: ' . $extConf['loginHighlightColor'] . '; }
+                       ';
+               }
+
+               // Logo
+               $logo = '';
+               if (!empty($extConf['loginLogo'])) {
+                       $logo = $extConf['loginLogo'];
+               } elseif (!empty($GLOBALS['TBE_STYLES']['logo_login'])) {
+                       // Fallback to old TBE_STYLES login logo
+                       $logo = $GLOBALS['TBE_STYLES']['logo_login'];
+                       GeneralUtility::deprecationLog('$GLOBALS["TBE_STYLES"]["logo_login"] is deprecated since TYPO3 CMS 7 and will be removed in TYPO3 CMS 8, please head to the backend extension configuration instead.');
+               } else {
+                       // Use TYPO3 logo depending on highlight color
+                       if (!empty($extConf['loginHighlightColor'])) {
+                               $logo = 'EXT:backend/Resources/Public/Images/typo3_black.svg';
+                       } else {
+                               $logo = 'EXT:backend/Resources/Public/Images/typo3_orange.svg';
+                       }
+               }
 
                // Start form
+               $formType = empty($this->getBackendUserAuthentication()->user['uid']) ? 'loginForm' : 'logoutForm';
                $view->assignMultiple(array(
                        'formTag' => $this->startForm(),
                        'labelPrefixPath' => 'LLL:EXT:lang/locallang_login.xlf:',
@@ -248,7 +282,6 @@ class LoginController {
                        'logo' => $logo,
                        'isOpenIdLoaded' => ExtensionManagementUtility::isLoaded('openid'),
                        'copyright' => BackendUtility::TYPO3_copyRightNotice($GLOBALS['TYPO3_CONF_VARS']['SYS']['loginCopyrightShowVersion']),
-                       'loginNewsTitle' => $loginNewsTitle,
                        'loginNewsItems' => $this->getSystemNews()
                ));
 
@@ -388,10 +421,10 @@ class LoginController {
                                                        <option value="' . htmlspecialchars($jumpScript[$valueStr]) . '">' . htmlspecialchars($labels[$valueStr]) . '</option>';
                                }
                                $this->interfaceSelector = '
-                                               <select id="t3-interfaceselector" name="interface" class="form-control t3-interfaces input-lg" tabindex="3">' . $this->interfaceSelector . '
+                                               <select id="t3-interfaceselector" name="interface" class="form-control input-login t3js-login-interface-field" tabindex="3">' . $this->interfaceSelector . '
                                                </select>';
                                $this->interfaceSelector_jump = '
-                                               <select id="t3-interfaceselector" name="interface" class="form-control t3-interfaces input-lg" tabindex="3" onchange="window.location.href=this.options[this.selectedIndex].value;">' . $this->interfaceSelector_jump . '
+                                               <select id="t3-interfaceselector" name="interface" class="form-control input-login t3js-login-interface-field" tabindex="3" onchange="window.location.href=this.options[this.selectedIndex].value;">' . $this->interfaceSelector_jump . '
                                                </select>';
                        } elseif (!$this->redirect_url) {
                                // If there is only ONE interface value set and no redirect_url is present:
@@ -443,7 +476,7 @@ class LoginController {
                        }
                }
                $output .= $form . '<input type="hidden" name="login_status" value="login" />' .
-                       '<input type="hidden" id="t3-field-userident" name="userident" value="" />' .
+                       '<input type="hidden" id="t3-field-userident" class="t3js-login-userident-field" name="userident" value="" />' .
                        '<input type="hidden" name="redirect_url" value="' . htmlspecialchars($this->redirectToURL) . '" />' .
                        '<input type="hidden" name="loginRefresh" value="' . htmlspecialchars($this->loginRefresh) . '" />' .
                        $this->interfaceSelector_hidden . $this->addFields_hidden;
index d031df5..3a434a7 100644 (file)
                                <source>Your system is fully operational.
 Have a nice day.</source>
                        </trans-unit>
+                       <trans-unit id="config.loginLogo">
+                               <source>Logo: If set, this logo will be used instead of the TYPO3 logo above the login credential fields.</source>
+                       </trans-unit>
+                       <trans-unit id="config.loginHighlightColor">
+                               <source>Highlight Color: If set, this color will be used as highlight color in the login screen.</source>
+                       </trans-unit>
+                       <trans-unit id="config.loginBackgroundImage">
+                               <source>Background Image: If set, this image will be used as background image for the login screen for screen sizes greater than 767 pixel. This should be a URI such as /fileadmin/my-background.jpg</source>
+                       </trans-unit>
                </body>
        </file>
-</xliff>
+</xliff>
\ No newline at end of file
index 2510337..a65ccea 100644 (file)
-
-<div id="t3-login-wrap">
-       <div class="t3-login-header">
-               <f:format.raw>{logo}</f:format.raw>
-       </div>
-
-       <div class="t3-login-body">
-               <f:render section="{formType}" arguments="{_all}" />
-
-               <div class="t3-login-footer">
-                       <div id="t3-login-form-footer-default">
-                               <f:if condition="{isOpenIdLoaded}">
-                                       <a id="t3-login-switchToOpenId" class="switchToOpenId text-muted">
-                                               <i class="fa fa-openid"></i><f:translate key="{labelPrefixPath}labels.switchToOpenId" />
-                                       </a>
-                               </f:if>
-                       </div>
-                       <f:if condition="{isOpenIdLoaded}">
-                               <div id="t3-login-form-footer-openId" style="display: none;">
-                                       <a id="t3-login-switchToDefault" class="switchToOpenId">
-                                               <i class="fa fa-key"></i><f:translate key="{labelPrefixPath}labels.switchToDefault" />
-                                       </a>
+<div class="typo3-login">
+       <div class="typo3-login-container">
+               <div class="typo3-login-wrap">
+                       <div class="panel panel-lg panel-login">
+                               <div class="panel-body">
+                                       <div class="typo3-login-logo">
+                                               <f:image src="{logo}" class="typo3-login-image" />
+                                       </div>
+                                       <f:render section="{formType}" arguments="{_all}" />
                                </div>
-                       </f:if>
+                               <f:render section="loginNews" arguments="{_all}" />
+                               <div class="panel-footer">
+                                       <div class="login-copyright-wrap">
+                                               <a href="#loginCopyright" class="typo3-login-copyright-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="loginCopyright">
+                                                       <span><f:translate key="{labelPrefixPath}copyright.link" /></span>
+                                                       <f:image src="EXT:backend/Resources/Public/Images/typo3_orange.svg" alt="{f:translate(key: '{labelPrefixPath}typo3.logo')}" width="70" height="20" />
+                                               </a>
+                                               <div id="loginCopyright" class="collapse">
+                                                       <div class="typo3-login-copyright-text">
+                                                               <p>
+                                                                       <f:format.raw>{copyright}</f:format.raw>
+                                                               </p>
+                                                               <ul class="list-unstyled">
+                                                                       <li><a href="http://typo3.org" target="_blank" class="t3-login-link-typo3"><i class="fa fa-external-link"></i> TYPO3.org</a></li>
+                                                                       <li><a href="http://typo3.org/donate/" target="_blank" class="t3-login-link-donate"><i class="fa fa-external-link"></i> <f:translate key="{labelPrefixPath}labels.donate" /></a></li>
+                                                               </ul>
+                                                       </div>
+                                               </div>
+                                       </div>
+                               </div>
+                       </div>
                </div>
        </div>
-       <f:render section="loginNews" arguments="{_all}" />
 </div>
-<div id="t3-login-copyright">
-       <f:format.raw>{copyright}</f:format.raw>
-       <a href="http://typo3.org" target="_blank" class="t3-login-link-typo3">TYPO3.org</a>,
-       <strong><a href="http://typo3.org/donate/" target="_blank" class="t3-login-link-donate"><f:translate key="{labelPrefixPath}labels.donate" /></a></strong>
-</div>
-
 
 
 <f:section name="loginForm">
-       <f:format.raw>{formTag}</f:format.raw>
-               <f:if condition="{hasLoginError}">
-                       <div id="t3-login-error" class="alert alert-danger">
+       <f:if condition="{hasLoginError}">
+               <div class="t3js-login-error" id="t3-login-error">
+                       <div class="alert alert-danger">
                                <strong><f:translate key="{labelPrefixPath}error.login.title" /></strong>
                                <p><f:translate key="{labelPrefixPath}error.login.description" /></p>
                        </div>
-               </f:if>
-
-               <noscript>
-                       <div id="t3-noscript-error" class="t3-login-alert t3-login-alert-error">
-                               <h4><f:translate key="{labelPrefixPath}error.javascript" /></h4>
-                       </div>
-               </noscript>
-
-               <div id="t3-nocookies-error" class="t3-login-alert alert alert-warning" style="display:none;">
-                       <h4><f:translate key="{labelPrefixPath}error.cookies" /></h4>
-               </div>
-
-               <div class="form-group" id="t3-login-username-section">
-                       <input type="text" id="t3-username" name="username" value="{presetUsername}" placeholder="{f:translate(key: '{labelPrefixPath}labels.username')}" class="form-control t3-username" autofocus="autofocus" required="required">
-
-                       <div class="t3-login-alert-capslock" id="t3-username-alert-capslock" style="display: none;">
-                               <img src="sysext/t3skin/icons/login_capslock.gif" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
-                       </div>
-               </div>
-
-               <div class="form-group" id="t3-login-password-section">
-                       <input type="password" id="t3-password" name="p_field" value="{presetPassword}" placeholder="{f:translate(key: '{labelPrefixPath}labels.password')}" class="form-control t3-password" required="required">
-
-                       <div class="t3-login-alert-capslock" id="t3-password-alert-capslock" style="display: none;">
-                               <img src="sysext/t3skin/icons/login_capslock.gif" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
-                       </div>
                </div>
-
-               <f:if condition="{isOpenIdLoaded}">
-                       <div class="form-group" id="t3-login-openid_url-section" style="display: none;">
-                               <div class="input-group">
-                                       <input type="text" id="openid_url" name="openid_url" value="{presetOpenId}" placeholder="{f:translate(key: '{labelPrefixPath}labels.openId')}" class="form-control t3-openidurl" />
-
-                                       <div class="input-group-addon">
-                                               <span class="fa fa-openid"></span>
+       </f:if>
+       <noscript>
+               <f:be.infobox message="{f:translate(key: '{labelPrefixPath}error.javascript')}" state="2" />
+       </noscript>
+       <div class="hidden t3js-login-error-nocookies">
+               <f:be.infobox message="{f:translate(key: '{labelPrefixPath}error.cookies')}" state="2" />
+       </div>
+       <div class="typo3-login-form t3js-login-formfields">
+               <f:format.raw>{formTag}</f:format.raw>
+                       <f:if condition="{interfaceSelector}">
+                               <div class="form-group t3js-login-interface-section" id="t3-login-interface-section">
+                                       <div class="form-control-wrap">
+                                               <f:format.raw>{interfaceSelector}</f:format.raw>
+                                       </div>
+                               </div>
+                       </f:if>
+                       <div class="form-group t3js-login-username-section" id="t3-login-username-section">
+                               <div class="form-control-wrap">
+                                       <div class="form-control-holder">
+                                               <input type="text" id="t3-username" name="username" value="{presetUsername}" placeholder="{f:translate(key: '{labelPrefixPath}labels.username')}" class="form-control input-login t3js-clearable t3js-login-username-field" autofocus="autofocus" required="required">
+                                               <div class="form-notice-capslock hidden t3js-login-alert-capslock">
+                                                       <f:image src="EXT:backend/Resources/Public/Images/icon_capslock.svg" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
+                                               </div>
                                        </div>
                                </div>
                        </div>
-               </f:if>
-
-               <f:if condition="{interfaceSelector}">
-                       <div class="form-group">
-                               <div class="t3-login-interface" id="t3-login-interface-section">
-                                       <f:format.raw>{interfaceSelector}</f:format.raw>
+                       <div class="form-group t3js-login-password-section" id="t3-login-password-section">
+                               <div class="form-control-wrap">
+                                       <div class="form-control-holder">
+                                               <input type="password" id="t3-password" name="p_field" value="{presetPassword}" placeholder="{f:translate(key: '{labelPrefixPath}labels.password')}" class="form-control input-login t3js-clearable t3js-login-password-field" required="required">
+                                               <div class="form-notice-capslock hidden t3js-login-alert-capslock">
+                                                       <f:image src="EXT:backend/Resources/Public/Images/icon_capslock.svg" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
+                                               </div>
+                                       </div>
                                </div>
                        </div>
-               </f:if>
-
-               <div class="form-group">
-                       <input class="btn btn-block" type="submit" name="commandLI" value="{f:translate(key: '{labelPrefixPath}labels.submitLogin')}" id="t3-login-submit" />
-                       <div id="t3-login-process" style="display: none;">
-                               <i class="fa fa-spin fa-spinner"></i>
-                               <f:translate key="{labelPrefixPath}login_process" />
+                       <f:if condition="{isOpenIdLoaded}">
+                               <div class="form-group hidden t3js-login-openid-section" id="t3-login-openid_url-section">
+                                       <div class="input-group">
+                                               <input type="text" id="openid_url" name="openid_url" value="{presetOpenId}" placeholder="{f:translate(key: '{labelPrefixPath}labels.openId')}" class="form-control input-login t3js-clearable t3js-login-openid-field" />
+                                               <div class="input-group-addon">
+                                                       <span class="fa fa-openid"></span>
+                                               </div>
+                                       </div>
+                               </div>
+                       </f:if>
+                       <div class="form-group" id="t3-login-submit-section">
+                               <button class="btn btn-block btn-login t3js-login-submit" id="t3-login-submit" type="submit" name="commandLI" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {f:translate(key: '{labelPrefixPath}login_process')}" autocomplete="off">
+                                       <f:translate key="{labelPrefixPath}labels.submitLogin" />
+                               </button>
                        </div>
-               </div>
-       </form>
+                       <f:if condition="{isOpenIdLoaded}">
+                               <ul class="list-unstyled typo3-login-links">
+                                       <li>
+                                               <a class="t3js-login-switch-to-openid">
+                                                       <i class="fa fa-fw fa-openid"></i> <span><f:translate key="{labelPrefixPath}labels.switchToOpenId" /></span>
+                                               </a>
+                                               <a class="t3js-login-switch-to-default hidden">
+                                                         <i class="fa fa-fw fa-key"></i> <span><f:translate key="{labelPrefixPath}labels.switchToDefault" /></span>
+                                               </a>
+                                       </li>
+                               </ul>
+                       </f:if>
+               </form>
+       </div>
 </f:section>
 
 
-
 <f:section name="logoutForm">
        <form action="index.php" method="post" name="loginform">
                <input type="hidden" name="login_status" value="logout" />
                                        </div>
                                </f:if>
                                <input type="hidden" name="p_field" value="" />
-                               <input class="btn btn-block" type="submit" name="commandLO" value="{f:translate(key: '{labelPrefixPath}labels.submitLogin')}" id="t3-login-submit" />
+                               <input class="btn btn-block btn-lg" type="submit" name="commandLO" value="{f:translate(key: '{labelPrefixPath}labels.submitLogin')}" id="t3-login-submit" />
                        </div>
                </div>
        </form>
 </f:section>
 
 
-
 <f:section name="loginNews">
        <f:if condition="{loginNewsItems}">
-               <div id="t3-login-news">
-                       <div class="t3-login-box-body">
-                               <dl>
-                                       <f:for each="{loginNewsItems}" as="item">
-                                               <dt>
-                                                       <span class="t3-news-date">{item.date}</span><br>
-                                                       {item.header}
-                                               </dt>
-                                               <dd><f:format.html>{item.content}</f:format.html></dd>
-                                       </f:for>
-                               </dl>
+               <div class="panel-carousel carousel slide t3js-login-news-carousel" id="loginNews" data-interval="0" data-ride="carousel">
+                       <div class="carousel-inner" role="listbox">
+                               <f:for each="{loginNewsItems}" as="item" iteration="loginNewsIterator">
+                               <div class="item{f:if(condition: loginNewsIterator.isFirst,then: ' active')}">
+                                       <h3 class="typo3-login-news-heading">{item.header}</h3>
+                                       <f:format.html>{item.content}</f:format.html>
+                                       <span class="text-muted">{item.date}</span>
+                               </div>
+                               </f:for>
                        </div>
+                       <a class="left typo3-login-carousel-control" href="#loginNews" role="button" data-slide="prev">
+                               <i class="fa fa-angle-left"></i>
+                               <span class="sr-only"><f:translate key="{labelPrefixPath}labels.previous" /></span>
+                       </a>
+                       <a class="right typo3-login-carousel-control" href="#loginNews" role="button" data-slide="next">
+                               <i class="fa fa-angle-right"></i>
+                               <span class="sr-only"><f:translate key="{labelPrefixPath}labels.next" /></span>
+                       </a>
                </div>
        </f:if>
-</f:section>
+</f:section>
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/Images/icon_capslock.svg b/typo3/sysext/backend/Resources/Public/Images/icon_capslock.svg
new file mode 100644 (file)
index 0000000..fb1bdb4
--- /dev/null
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
+<path d="M11.3,12H2.7c-0.5,0-0.9,0.4-0.9,0.9v0.1c0,0.5,0.4,0.9,0.9,0.9h8.6c0.5,0,0.9-0.4,0.9-0.9v-0.1C12.2,12.4,11.8,12,11.3,12z
+        M2.5,6.1c0.4,0.4,1,0.4,1.4,0l2-2v5.5c0,0.5,0.4,1,1,1h0.4c0.5,0,1-0.4,1-1V4.1l2,2c0.4,0.4,1,0.4,1.4,0l0.3-0.3
+       c0.4-0.4,0.4-1,0-1.4L8,0.6c0,0,0-0.1-0.1-0.1L7.7,0.3C7.5,0.1,7.3,0,7,0C6.7,0,6.5,0.1,6.3,0.3L6,0.6c0,0,0,0-0.1,0.1L2.2,4.4
+       c-0.4,0.4-0.4,1,0,1.4L2.5,6.1z"/>
+</svg>
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/Images/typo3_black.svg b/typo3/sysext/backend/Resources/Public/Images/typo3_black.svg
new file mode 100644 (file)
index 0000000..2830277
--- /dev/null
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 150 42" enable-background="new 0 0 150 42" xml:space="preserve">
+<path d="M60.2,14.4v27h-3.8v-27h-6.7v-3.3h17.1v3.3H60.2z M80.4,27.3v14h-3.9v-14l-7.7-16.2h4.1l5.7,12.2l5.7-12.2h3.9L80.4,27.3z
+        M99.9,29.9h-3.6v11.4h-3.8V11.1c0,0,3.7-0.3,7.3-0.3c6.6,0,8.5,4.1,8.5,9.4C108.3,26.7,106,29.9,99.9,29.9 M100.3,13.9
+       c-2.4,0-4.1,0.3-4.1,0.3v12.6h4.1c2.4,0,4.1-1.6,4.1-6.3C104.4,16.1,103.4,13.9,100.3,13.9 M121.8,41.6c-7.1,0-9-5.2-9-15.8
+       c0-10.2,1.9-15.1,9-15.1s9,4.9,9,15.1C130.9,36.4,129,41.6,121.8,41.6 M121.8,13.9c-3.9,0-5.2,2.6-5.2,12.1c0,9.3,1.3,12.4,5.2,12.4
+       c3.9,0,5.2-3.1,5.2-12.4C127,16.6,125.7,13.9,121.8,13.9 M141.7,41.6c-2.1,0-5.3-0.6-5.7-0.7v-3.1c1,0.2,3.7,0.7,5.6,0.7
+       c2.2,0,3.6-1.9,3.6-5.2c0-3.9-0.6-6-3.7-6H138V24h3.1c3.5,0,3.7-3.6,3.7-5.3c0-3.4-1.1-4.8-3.2-4.8c-1.9,0-4.1,0.5-5.3,0.7v-3.2
+       c0.5-0.1,3-0.7,5.2-0.7c4.4,0,7,1.9,7,8.3c0,2.9-1,5.5-3.3,6.3c2.6,0.2,3.8,3.1,3.8,7.3C149,39.2,146.5,41.6,141.7,41.6"/>
+<path d="M31.7,28.8c-0.6,0.2-1.1,0.2-1.7,0.2c-5.2,0-12.9-18.2-12.9-24.3c0-2.2,0.5-3,1.3-3.6C12,1.9,4.3,4.2,1.9,7.2
+       C1.3,8,1,9.1,1,10.6c0,9.5,10.1,31,17.3,31C21.6,41.6,27.1,36.2,31.7,28.8"/>
+<path d="M28.4,0.5c6.6,0,13.2,1.1,13.2,4.8c0,7.6-4.8,16.7-7.2,16.7C30,22,24.5,9.9,24.5,3.8C24.5,1,25.6,0.5,28.4,0.5"/>
+</svg>
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/Images/typo3_orange.svg b/typo3/sysext/backend/Resources/Public/Images/typo3_orange.svg
new file mode 100644 (file)
index 0000000..0cea63c
--- /dev/null
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 150 42" enable-background="new 0 0 150 42" xml:space="preserve">
+<path d="M60.2,14.4v27h-3.8v-27h-6.7v-3.3h17.1v3.3H60.2z M80.4,27.3v14h-3.9v-14l-7.7-16.2h4.1l5.7,12.2l5.7-12.2h3.9L80.4,27.3z
+        M99.9,29.9h-3.6v11.4h-3.8V11.1c0,0,3.7-0.3,7.3-0.3c6.6,0,8.5,4.1,8.5,9.4C108.3,26.7,106,29.9,99.9,29.9 M100.3,13.9
+       c-2.4,0-4.1,0.3-4.1,0.3v12.6h4.1c2.4,0,4.1-1.6,4.1-6.3C104.4,16.1,103.4,13.9,100.3,13.9 M121.8,41.6c-7.1,0-9-5.2-9-15.8
+       c0-10.2,1.9-15.1,9-15.1s9,4.9,9,15.1C130.9,36.4,129,41.6,121.8,41.6 M121.8,13.9c-3.9,0-5.2,2.6-5.2,12.1c0,9.3,1.3,12.4,5.2,12.4
+       c3.9,0,5.2-3.1,5.2-12.4C127,16.6,125.7,13.9,121.8,13.9 M141.7,41.6c-2.1,0-5.3-0.6-5.7-0.7v-3.1c1,0.2,3.7,0.7,5.6,0.7
+       c2.2,0,3.6-1.9,3.6-5.2c0-3.9-0.6-6-3.7-6H138V24h3.1c3.5,0,3.7-3.6,3.7-5.3c0-3.4-1.1-4.8-3.2-4.8c-1.9,0-4.1,0.5-5.3,0.7v-3.2
+       c0.5-0.1,3-0.7,5.2-0.7c4.4,0,7,1.9,7,8.3c0,2.9-1,5.5-3.3,6.3c2.6,0.2,3.8,3.1,3.8,7.3C149,39.2,146.5,41.6,141.7,41.6"/>
+<path fill="#FF8700" d="M31.7,28.8c-0.6,0.2-1.1,0.2-1.7,0.2c-5.2,0-12.9-18.2-12.9-24.3c0-2.2,0.5-3,1.3-3.6
+       C12,1.9,4.3,4.2,1.9,7.2C1.3,8,1,9.1,1,10.6c0,9.5,10.1,31,17.3,31C21.6,41.6,27.1,36.2,31.7,28.8"/>
+<path fill="#FF8700" d="M28.4,0.5c6.6,0,13.2,1.1,13.2,4.8c0,7.6-4.8,16.7-7.2,16.7C30,22,24.5,9.9,24.5,3.8
+       C24.5,1,25.6,0.5,28.4,0.5"/>
+</svg>
\ No newline at end of file
index bfde65a..f757388 100755 (executable)
  *
  * The TYPO3 project - inspiring people to share!
  */
-define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
+
+/**
+ * JavaScript module for the backend login form
+ */
+define('TYPO3/CMS/Backend/Login', ['jquery', 'jquery/jquery.clearable', 'bootstrap'], function($) {
        var BackendLogin = {
                options: {
-                       usernameField: '#t3-username',
-                       passwordField: '#t3-password',
-                       useridentField: '#t3-field-userident',
-                       openIdField: '#openid_url',
-                       submitButton: '#t3-login-submit',
-                       clearIconSelector: '.t3-login-clearInputField',
-                       interfaceSelector: '#t3-interfaceselector'
+                       interfaceField: '.t3js-login-interface-field',
+                       interfaceSection: '.t3js-login-interface-section',
+                       usernameField: '.t3js-login-username-field',
+                       usernameSection: '.t3js-login-username-section',
+                       passwordField: '.t3js-login-password-field',
+                       passwordSection: '.t3js-login-password-section',
+                       openIdField: '.t3js-login-openid-field',
+                       openIdSection: '.t3js-login-openid-section',
+                       useridentField: '.t3js-login-userident-field',
+                       submitButton: '.t3js-login-submit',
+                       error: '.t3js-login-error',
+                       errorNoCookies: '.t3js-login-error-nocookies',
+                       formFields: '.t3js-login-formfields',
+                       switchOpenIdSelector: '.t3js-login-switch-to-openid',
+                       switchDefaultSelector: '.t3js-login-switch-to-default'
                }
        },
        options = BackendLogin.options;
 
-       // Checks weather capslock is enabled (returns TRUE if enabled, false otherwise)
+       // Checks whether capslock is enabled (returns TRUE if enabled, false otherwise)
        // thanks to http://24ways.org/2007/capturing-caps-lock
        BackendLogin.isCapslockEnabled = function(e) {
                var ev = e ? e : window.event;
@@ -52,53 +64,51 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
        /**
         * Change to Interface for OpenId login and save the selection to a cookie
         */
-       BackendLogin.switchToOpenId = function() {
-               $('#t3-login-form-footer-default').hide();
-               $('#t3-login-form-footer-openId').show();
-
-               $('#t3-login-username-section, #t3-login-password-section').hide();
-               $('#t3-login-openid_url-section').show();
-               $('#t3-login-interface-section').hide();
-
-               $(options.openIdField).trigger('focus');
-               $(options.usernameField).val('openid_url');
-               $(options.passwordField).val('');
-
-               BackendLogin.setLogintypeCookie('openid');
+       BackendLogin.switchToOpenId = function(e) {
+               if (!$(this).hasClass("disabled")) {
+                       $(options.switchOpenIdSelector).addClass('hidden');
+                       $(options.switchDefaultSelector).removeClass('hidden');
+                       $(options.interfaceSection).addClass('hidden');
+                       $(options.passwordSection + ', ' + options.usernameSection).addClass('hidden');
+                       $(options.openIdSection).removeClass('hidden');
+                       $(options.openIdField).trigger('focus');
+                       $(options.usernameField).val('openid_url');
+                       $(options.passwordField).val('');
+                       BackendLogin.setLogintypeCookie('openid');
+               } else {
+                       return false;
+               }
        };
 
        /**
         * Change to Interface for default login and save the selection to a cookie
         */
-       BackendLogin.switchToDefault = function() {
-               $('#t3-login-openIdLogo').hide();
-
-               $(options.openIdField).val('');
-               $(options.usernameField).val('');
-
-
-               $('#t3-login-form-footer-default').show();
-               $('#t3-login-form-footer-openId').hide();
-               $('#t3-login-username-section, #t3-login-password-section').show();
-               $('#t3-login-openid_url-section').hide();
-               $('#t3-login-interface-section').show();
-
-               $(options.usernameField).trigger('focus');
-
-               BackendLogin.setLogintypeCookie('username');
+       BackendLogin.switchToDefault = function(e) {
+               if (!$(this).hasClass("disabled")) {
+                       $(options.switchOpenIdSelector).removeClass('hidden');
+                       $(options.switchDefaultSelector).addClass('hidden');
+                       $(options.interfaceSection).removeClass('hidden');
+                       $(options.passwordSection + ', ' + options.usernameSection).removeClass('hidden');
+                       $(options.openIdSection).addClass('hidden');
+                       $(options.usernameField).trigger('focus');
+                       $(options.openIdField).val('');
+                       $(options.usernameField).val('');
+                       BackendLogin.setLogintypeCookie('username');
+               } else {
+                       return false;
+               }
        };
 
        /**
         * Hide all form fields and show a progress message and icon
         */
        BackendLogin.showLoginProcess = function() {
-               // setting a fixed height (based on the current, calculated height of the browser) for
-               // the box with the login form, so it doesn't jump around when the spinner is shown
-               var loginBoxHeight = $('#t3-login-form-fields').height();
-               $('#t3-login-process').height(loginBoxHeight).show();
-               $('#t3-login-error').hide();
-               $('#t3-login-form-fields').hide();
-               $('#t3-nocookies-error').hide();
+               $(options.submitButton).button('loading');
+               $(options.error).addClass('hidden');
+               $(options.errorNoCookies).addClass('hidden');
+
+               $(options.switchOpenIdSelector).addClass('disabled');
+               $(options.switchDefaultSelector).addClass('disabled');
        };
 
        /**
@@ -126,18 +136,7 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
        BackendLogin.interfaceSelectorChanged = function() {
                var now = new Date();
                var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
-               document.cookie = 'typo3-login-interface=' + $(options.interfaceSelector).val() + '; expires=' + expires.toGMTString() + ';';
-       };
-
-       /**
-        * Shows up the clear icon for a field which is not empty, and hides it otherwise
-        */
-       BackendLogin.setVisibilityOfClearIcon = function($formFieldElement) {
-               if ($formFieldElement.val().length > 0) {
-                       $formFieldElement.next(options.clearIconSelector).find('a').show();
-               } else {
-                       $formFieldElement.next(options.clearIconSelector).find('a').hide();
-               }
+               document.cookie = 'typo3-login-interface=' + $(options.interfaceField).val() + '; expires=' + expires.toGMTString() + ';';
        };
 
        /**
@@ -151,13 +150,13 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
         * Check if an interface was stored in a cookie and preselect it in the select box
         */
        BackendLogin.checkForInterfaceCookie = function() {
-               if ($(options.interfaceSelector).length) {
+               if ($(options.interfaceField).length) {
                        var posStart = document.cookie.indexOf('typo3-login-interface=');
                        if (posStart != -1) {
                                var selectedInterface = document.cookie.substr(posStart + 22);
                                selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
                        }
-                       $(options.interfaceSelector).val(selectedInterface);
+                       $(options.interfaceField).val(selectedInterface);
                }
        };
 
@@ -166,9 +165,9 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
         */
        BackendLogin.showCapsLockWarning = function($alertIconElement, event) {
                if (BackendLogin.isCapslockEnabled(event) === true) {
-                       $alertIconElement.show();
+                       $alertIconElement.removeClass('hidden');
                } else {
-                       $alertIconElement.hide();
+                       $alertIconElement.addClass('hidden');
                }
        };
 
@@ -176,16 +175,16 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
         * Hides input fields and shows cookie warning
         */
        BackendLogin.showCookieWarning = function() {
-               $('#t3-login-form-fields').hide();
-               $('#t3-nocookies-error').show();
+               $(options.formFields).addClass('hidden');
+               $(options.errorNoCookies).removeClass('hidden');
        };
 
        /**
         * Hides cookie warning and shows input fields
         */
        BackendLogin.hideCookieWarning = function() {
-               $('#t3-nocookies-error').hide();
-               $('#t3-login-form-fields').show();
+               $(options.formFields).removeClass('hidden');
+               $(options.errorNoCookies).addClass('hidden');
        };
 
        /**
@@ -219,28 +218,29 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
         * Registers listeners for the Login Interface (e.g. to toggle OpenID and Default login)
         */
        BackendLogin.initializeEvents = function() {
-               $(document).on('click', '#t3-login-switchToOpenId', BackendLogin.switchToOpenId);
-               $(document).on('click', '#t3-login-switchToDefault', BackendLogin.switchToDefault);
+               $(document).on('click', options.switchOpenIdSelector, BackendLogin.switchToOpenId);
+               $(document).on('click', options.switchDefaultSelector, BackendLogin.switchToDefault);
                $(document).on('click', options.submitButton, BackendLogin.showLoginProcess);
 
                        // The Interface selector is not always present, so this check is needed
-               if ($(options.interfaceSelector).length > 0) {
-                       $(document).on('change blur', options.interfaceSelector, BackendLogin.interfaceSelectorChanged);
+               if ($(options.interfaceField).length > 0) {
+                       $(document).on('change blur', options.interfaceField, BackendLogin.interfaceSelectorChanged);
                }
 
-               $(document).on('click', options.clearIconSelector, function() {
-                       BackendLogin.clearInputField($(this).prev());
-               });
-               $(document).on('focus blur keypress', options.usernameField + ', ' + options.passwordField + ', ' + options.openIdField, function() {
-                       BackendLogin.setVisibilityOfClearIcon($(this));
-               });
                $(document).on('keypress', options.usernameField + ', ' + options.passwordField + ', ' + options.openIdField, function(evt) {
-                       BackendLogin.showCapsLockWarning($(this).siblings('.t3-login-alert-capslock'), evt);
+                       BackendLogin.showCapsLockWarning($(this).parent().parent().find('.t3js-login-alert-capslock'), evt);
+               });
+
+               $('.t3js-clearable').clearable();
+
+               // carousel news height transition
+               $('.t3js-login-news-carousel').on('slide.bs.carousel', function(e) {
+                       var nextH = $(e.relatedTarget).height();
+                       $(this).find('div.active').parent().animate({ height: nextH }, 500);
                });
        };
        // initialize and return the BackendLogin object
        return function() {
-
                $(document).ready(function() {
                        BackendLogin.checkForInterfaceCookie();
                        BackendLogin.checkForLogintypeCookie();
@@ -255,10 +255,7 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
                                if (parent.opener && parent.opener.TS && parent.opener.TS.username) {
                                        $(options.usernameField).val(parent.opener.TS.username);
                                }
-                       } catch(error) {} // continue
-
-                       BackendLogin.setVisibilityOfClearIcon($(options.usernameField));
-                       BackendLogin.setVisibilityOfClearIcon($(options.passwordField));
+                       } catch (error) {} // continue
 
                        // previously named "check focus"
                        if ($(options.usernameField).val() == '') {
@@ -277,4 +274,4 @@ define('TYPO3/CMS/Backend/Login', ['jquery'], function($) {
                TYPO3.BackendLogin = BackendLogin;
                return BackendLogin;
        }();
-});
+});
\ No newline at end of file
diff --git a/typo3/sysext/backend/ext_conf_template.txt b/typo3/sysext/backend/ext_conf_template.txt
new file mode 100644 (file)
index 0000000..580e5fb
--- /dev/null
@@ -0,0 +1,12 @@
+###################
+### LOGINSCREEN ###
+###################
+
+# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginLogo
+loginLogo =
+
+# cat=Login; type=color; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginHighlightColor
+loginHighlightColor =
+
+# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginBackgroundImage
+loginBackgroundImage =
\ No newline at end of file
index 0cfc56f..c3d3b91 100644 (file)
@@ -613,7 +613,6 @@ return array(
                'customPermOptions' => array(),                                         // Array with sets of custom permission options. Syntax is; 'key' => array('header' => 'header string, language splitted', 'items' => array('key' => array('label, language splitted', 'icon reference', 'Description text, language splitted'))). Keys cannot contain ":|," characters.
                'fileDenyPattern' => FILE_DENY_PATTERN_DEFAULT,         // A perl-compatible regular expression (without delimiters!) that - if it matches a filename - will deny the file upload/rename or whatever in the webspace. For security reasons, files with multiple extensions have to be denied on an Apache environment with mod_alias, if the filename contains a valid php handler in an arbitary position. Also, ".htaccess" files have to be denied. Matching is done case-insensitive. Default value is stored in constant FILE_DENY_PATTERN_DEFAULT
                'interfaces' => 'backend',                                                      // This determines which interface options is available in the login prompt and in which order (All options: ",backend,frontend")
-               'loginNewsTitle' => '',                                                         // Define alternative header message for the LoginNews. If this var is empty, the default header "Important messages:" is displayed.
                'notificationPrefix' => '[TYPO3 Note]',                         // String: Used to prefix the subject of mails sent in the taskcenter
                'explicitADmode' => 'explicitDeny',                                     // Sets the general allow/deny mode for selector box values. Value can be either "explicitAllow" or "explicitDeny", nothing else!
                'niceFlexFormXMLtags' => TRUE,                                          // If set, the flexform XML will be stored with meaningful tags which can be validated with DTD schema. If you rely on custom reading of the XML from pre-4.0 versions you should set this to FALSE if you don't like to change your reader code (internally it is insignificant since \TYPO3\CMS\Core\Utility\GeneralUtility::xml2array() doesn't care for the tags if the index-attribute value is set)
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Breaking-66431-NewLoginScreen.rst b/typo3/sysext/core/Documentation/Changelog/master/Breaking-66431-NewLoginScreen.rst
new file mode 100644 (file)
index 0000000..4d25f6f
--- /dev/null
@@ -0,0 +1,34 @@
+===================================
+Breaking - #66431: New Login Screen
+===================================
+
+Description
+===========
+
+To keep the focus on the most recent news, the news are reduced to a single view
+carousel where you can slide through the latest news.
+
+A title for the news section is not needed anymore, in result
+$GLOBALS['TYPO3_CONF_VARS']['BE']['loginNewsTitle'] is superfluous and was
+removed completely without replacement.
+
+
+Impact
+======
+
+The news section title has been dropped without replacement.
+There will be no alternative section title displayed.
+
+
+Affected Installations
+======================
+
+Installations that used $GLOBALS['TYPO3_CONF_VARS']['BE']['loginNewsTitle'] to
+set an alternative section title for the news.
+
+
+Migration
+=========
+
+If an entry for BE/loginNewsTitle exists in your local configuration it will be
+removed by the SilentConfigurationUpgradeService automaticly.
\ No newline at end of file
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Deprecation-66431-NewLoginScreen.rst b/typo3/sysext/core/Documentation/Changelog/master/Deprecation-66431-NewLoginScreen.rst
new file mode 100644 (file)
index 0000000..5293045
--- /dev/null
@@ -0,0 +1,35 @@
+======================================
+Deprecation - #66431: New Login Screen
+======================================
+
+Description
+===========
+
+The login screen is now supporting background images and adjustable highlight
+colors out of the box. Settings for the login screen can now be accessed in
+the backend extension setting.
+
+Since the needed settings for the login screen are moved to the backend extension
+configuration, $GLOBALS['TBE_STYLES']['logo_login'] is only used as fallback.
+The option is deprecated now and will be removed with TYPO3 CMS 8.
+
+
+Impact
+======
+
+$GLOBALS['TBE_STYLES']['logo_login'] will add a deprecation log message,
+is still used as fallback to the new option but will be removed with TYPO3 CMS 8.
+
+
+Affected Installations
+======================
+
+Installations that use $GLOBALS['TBE_STYLES']['logo_login'] to set an alternative
+logo for the backend login.
+
+
+Migration
+=========
+
+Remove the $GLOBALS['TBE_STYLES']['logo_login'] from your setup and go to the
+extension manager edit the configuration for the backend extension.
\ No newline at end of file
index bedef5b..b54dc5b 100644 (file)
@@ -70,6 +70,8 @@ class SilentConfigurationUpgradeService {
                'BE/staticFileEditPath',
                // #64226
                'BE/accessListRenderMode',
+               // #66431
+               'BE/loginNewsTitle',
                // #24900
                'SYS/compat_version',
                // #64643
index da0c075..86298b9 100644 (file)
                        <trans-unit id="labels.interface">
                                <source>Interface</source>
                        </trans-unit>
+                       <trans-unit id="labels.previous">
+                               <source>Previous</source>
+                       </trans-unit>
+                       <trans-unit id="labels.next">
+                               <source>Next</source>
+                       </trans-unit>
                        <trans-unit id="labels.submitLogin">
                                <source>Login</source>
                        </trans-unit>
                        <trans-unit id="copyright">
                                <source>Copyright</source>
                        </trans-unit>
+                       <trans-unit id="copyright.link">
+                               <source>More about TYPO3</source>
+                       </trans-unit>
                        <trans-unit id="extension.copyright">
                                <source>Extensions are copyright of their respective owners.</source>
                        </trans-unit>
index 6152040..8129f61 100644 (file)
@@ -1,7 +1,14 @@
 //
+// Variables
+//
+@panel-lg-padding:          35px;
+
+
+//
 // Panel
 //
 .panel {
+       .box-shadow(0px 2px 0px rgba(0, 0, 0, 0.1));
        &.ui-sortable-helper {
                border-style: dashed;
        }
        }
 }
 
+
+//
+// Panel carousel
+//
+.panel-carousel {
+       padding: @panel-body-padding;
+}
+
+
 //
 // Panel heading
 //
                border-top: none;
        }
 }
+
+
+//
+// Panel large
+//
+.panel-lg {
+       .panel-body {
+               padding: @panel-lg-padding;
+       }
+       .panel-heading,
+       .panel-footer {
+               padding: ceil(@panel-lg-padding * 0.5) @panel-lg-padding;
+       }
+       .panel-carousel {
+               padding: @panel-lg-padding;
+       }
+}
\ No newline at end of file
index b8ef581..894ab4a 100644 (file)
 // 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.
 //
 
-#typo3-index-php {
-       background: rgb(235, 235, 235);
-       min-width: 400px;
-       min-height: 550px;
-
-       #t3-login-wrap {
-               position: absolute;
-               left: 50%;
-               margin-left: -200px;
-               width: 400px;
-               z-index: 1;
-               padding-top: 50px;
-               padding-bottom: 100px;
-       }
 
-       .t3-login-header {
-               padding: @line-height-computed;
-       }
+@login-width:                          360px;
+@login-bg:                                     #eee;
 
-       .t3-default-logo {
-               margin: 5px 15px;
-       }
+@login-highlight:                      #ff8800;
+@login-btn-text:                       #fff;
+@login-btn-bg:                         @login-highlight;
 
-       .t3-login-body {
-               background-color: @gray-dark;
-               padding: 25px 40px;
-
-               a {
-                       cursor: pointer;
-                       i {
-                               margin-right: 6px;
-                       }
-                       &.switchToOpenId {
-                               color: lighten(@gray-dark, 30%);
-                       }
-               }
-       }
+@login-copyright-text:         #444;
+
+@login-input-height:                           @input-height-large;
+@login-input-font-size:                                12px;
+@login-input-line-height:                      @line-height-large;
+@login-input-border-radius:                    2px;
+@login-input-border-color:                     #ccc;
+@login-input-padding-vertical:         @padding-large-vertical;
+@login-input-padding-horizontal:       @padding-large-horizontal;
 
-       .form-group {
-               margin-bottom: 10px;
-               position: relative;
 
-               &:last-child {
-                       margin-bottom: 0;
+//
+// Login
+//
+.typo3-login {
+       background-color: @login-bg;
+       background-repeat: no-repeat;
+       background-size: cover;
+       background-position: center center;
+       display: table;
+       position: absolute;
+       top: 0;
+       left: 0;
+       padding: 10px;
+       width: 100%;
+       min-height: 100%;
+       height: 100%;
+}
+.typo3-login-container {
+       display: table-cell;
+       vertical-align: middle;
+}
+.typo3-login-wrap {
+       max-width: @login-width;
+       margin: 0 auto;
+}
+.typo3-login-links {
+       padding-top: inherit;
+       margin-top: 40px;
+       margin-bottom: 0;
+       .disabled {
+               cursor: not-allowed!important;
+               text-decoration: none!important;
+               color: @text-muted!important;
+               span {
+                       cursor: inherit;
                }
        }
+}
 
-       .form-control {
-               border-radius: 0;
-               background-color: darken(@gray-dark, 12.5%);
-               color: lighten(@gray-dark, 30%);
-               border: none;
-               font-size: @font-size-base;
-               height: @input-height-large;
-               padding-left: 12px;
-               padding-right: 12px;
-
-               &:hover {
-                       color: #fff;
-               }
 
-               &:focus {
-                       border: none;
-                       box-shadow: none;
-               }
+//
+// Logo
+//
+.typo3-login-logo {
+       margin-bottom: 30px;
+       > img {
+               display: block;
+               max-width: 100%;
+               height: auto;
+               margin: 0 auto;
        }
+}
 
-       .input-group-addon {
-               background-color: darken(@gray-dark, 12.5%);
-               color: lighten(@gray-dark, 30%);
-               border-radius: 0;
-               border: none;
-       }
 
-       #t3-login-submit {
-               background-color: #ff8600;
-               background-image: linear-gradient(center top, #fe9500 0%, #cf6610 100%);
-               background-repeat: repeat-x;
-               text-shadow: 0px -1px 0 rgba(149, 81, 5, 0.6);
-               color: #fff;
-               padding: 4px 20px;
-               height: @input-height-large;
-       }
+//
+// News
+//
+.typo3-login-news-heading {
+       font-size: 14px;
+       line-height: 1.3em;
+       margin-top: 0;
+}
 
-       #t3-login-process {
-               background-color: #ff8600;
-               color: #fff;
-               cursor: wait;
-               position: absolute;
-               top: 0;
-               right: 0;
-               bottom: 0;
-               left: 0;
-               z-index: 10;
-               line-height: @input-height-large;
-               text-align: center;
-       }
 
-       #t3-login-news {
-               background: #fff;
-               padding: 25px 40px;
+//
+// Panel
+//
+.panel-login {
+       border-color: darken(@login-bg, 10%);
+       .panel-body {
+               border-bottom: 3px solid @login-highlight;
+       }
+       a {
+               font-weight: bold;
+       }
+       @media (max-width: @screen-xs-max){
+               margin-bottom: 0;
+       }
+}
 
-               h4 {
-                       margin-top: 0;
-               }
 
-               dl {
-                       margin-bottom: 0;
+//
+// Forms
+//
+.input-login {
+       border-color: @login-input-border-color;
+       .box-shadow(none);
+       .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);
+       &:focus {
+               .box-shadow(none);
+       }
+}
+.btn-login {
+       .button-size(@login-input-padding-vertical; @login-input-padding-horizontal; @login-input-font-size; 1em; @login-input-border-radius);
+       .button-variant(@login-btn-text; @login-btn-bg; rgba(0,0,0,0.1));
+       line-height: 1.3em;
+       &:focus {
+               outline: none;
+               .box-shadow(none);
+       }
+}
 
-                       dt {
-                               span {
-                                       color: @headings-small-color;
-                                       font-size: @font-size-small;
-                               }
 
-                               font-size: @font-size-h3;
-                               font-weight: @headings-font-weight;
-                       }
+//
+// Carousel
+//
+.typo3-login-carousel-control {
+       top: 50%;
+       margin-top: -30px;
+       height: 60px;
+       line-height: 60px;
+       width: 10px;
+       background-color: #ffffff;
+       text-align: center;
+       position: absolute;
+       .opacity(0.25);
+       .transition(opacity 0.2s ease-in-out);
+       &:hover {
+               .opacity(1);
+       }
+       &.left {
+               left: -10px;
+               border: 1px solid darken(@login-bg, 10%);
+               border-right: 0;
+               border-radius: 2px 0 0 2px;
+       }
+       &.right {
+               right: -10px;
+               border: 1px solid darken(@login-bg, 10%);
+               border-left: 0;
+               border-radius: 0 2px 2px 0;
+       }
+       @media (min-width: @screen-sm-min){
+               width: 20px;
+               &.left {
+                       left: -20px;
+               }
+               &.right {
+                       right: -20px;
                }
        }
+}
 
-       #t3-login-copyright {
-               font-size: 11px;
-               color: @gray;
-               position: fixed;
-               bottom: @line-height-computed;
-               left: @line-height-computed;
-               right: @line-height-computed;
-               a {
-                       color: darken(@gray, 15%);
-                       text-decoration: underline;
-                       &:hover {
-                               color: #000;
-                       }
-               }
+
+//
+// Copyright
+//
+.typo3-login-copyright-link {
+       .clearfix();
+       > img {
+               float: right;
+               margin-top: -4px;
        }
 }
+.typo3-login-copyright-text {
+       margin-top: @line-height-computed;
+       color: @login-copyright-text;
+       .fa {
+               font-size: 13px;
+       }
+       > *:first-child {
+               margin-top: 0;
+       }
+       > *:last-child {
+               margin-bottom: 0;
+       }
+}
\ No newline at end of file
index 222ed3b..2014e4f 100644 (file)
@@ -69,6 +69,9 @@ span.typo3-moduleHeader img {
 .form-control-wrap {
        margin: 9px 0;
 }
+.form-control-holder {
+       position: relative;
+}
 .row {
        > .form-group {
                > .form-control-wrap {
@@ -139,6 +142,25 @@ select {
 }
 
 //
+// Styles for the "capslock" jquery plugin.
+//
+.form-notice-capslock {
+       position: absolute;
+       right: 6px;
+       top: 50%;
+       margin-top: -10px;
+       height: 20px;
+       width: 20px;
+       padding: 3px;
+       z-index: 10;
+       background-color: #fff;
+       > img {
+               display: block;
+               opacity: 0.5;
+       }
+}
+
+//
 // Form Inline adjustments
 //
 .form-inline-spaced {
@@ -328,4 +350,4 @@ textarea {
        &.t3js-formengine-textarea {
                resize: none;
        }
-}
\ No newline at end of file
+}
index 42415af..3202835 100644 (file)
@@ -60,7 +60,7 @@
 @import "@{library-directory-prefix}/bootstrap/less/modals.less";
 @import "@{library-directory-prefix}/bootstrap/less/popovers.less";
 @import "@{library-directory-prefix}/bootstrap/less/tooltip.less";
-// @import "@{library-directory-prefix}/bootstrap/less/carousel.less";
+@import "@{library-directory-prefix}/bootstrap/less/carousel.less";
 
 // Utility classes
 @import "@{library-directory-prefix}/bootstrap/less/utilities.less";
index 1f6e24e..a8c7c19 100644 (file)
@@ -243,7 +243,9 @@ img {
 }
 .img-responsive,
 .thumbnail > img,
-.thumbnail a > img {
+.thumbnail a > img,
+.carousel-inner > .item > img,
+.carousel-inner > .item > a > img {
   display: block;
   max-width: 100%;
   height: auto;
@@ -5071,6 +5073,229 @@ button.close {
   border-width: 0 3px 3px;
   border-bottom-color: #333333;
 }
+.carousel {
+  position: relative;
+}
+.carousel-inner {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+.carousel-inner > .item {
+  display: none;
+  position: relative;
+  -webkit-transition: 0.6s ease-in-out left;
+  -o-transition: 0.6s ease-in-out left;
+  transition: 0.6s ease-in-out left;
+}
+.carousel-inner > .item > img,
+.carousel-inner > .item > a > img {
+  line-height: 1;
+}
+@media all and (transform-3d), (-webkit-transform-3d) {
+  .carousel-inner > .item {
+    -webkit-transition: -webkit-transform 0.6s ease-in-out;
+    -moz-transition: -moz-transform 0.6s ease-in-out;
+    -o-transition: -o-transform 0.6s ease-in-out;
+    transition: transform 0.6s ease-in-out;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    perspective: 1000;
+  }
+  .carousel-inner > .item.next,
+  .carousel-inner > .item.active.right {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    left: 0;
+  }
+  .carousel-inner > .item.prev,
+  .carousel-inner > .item.active.left {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    left: 0;
+  }
+  .carousel-inner > .item.next.left,
+  .carousel-inner > .item.prev.right,
+  .carousel-inner > .item.active {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    left: 0;
+  }
+}
+.carousel-inner > .active,
+.carousel-inner > .next,
+.carousel-inner > .prev {
+  display: block;
+}
+.carousel-inner > .active {
+  left: 0;
+}
+.carousel-inner > .next,
+.carousel-inner > .prev {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.carousel-inner > .next {
+  left: 100%;
+}
+.carousel-inner > .prev {
+  left: -100%;
+}
+.carousel-inner > .next.left,
+.carousel-inner > .prev.right {
+  left: 0;
+}
+.carousel-inner > .active.left {
+  left: -100%;
+}
+.carousel-inner > .active.right {
+  left: 100%;
+}
+.carousel-control {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 15%;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+.carousel-control.left {
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+}
+.carousel-control.right {
+  left: auto;
+  right: 0;
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+}
+.carousel-control:hover,
+.carousel-control:focus {
+  outline: 0;
+  color: #ffffff;
+  text-decoration: none;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+.carousel-control .icon-prev,
+.carousel-control .icon-next,
+.carousel-control .glyphicon-chevron-left,
+.carousel-control .glyphicon-chevron-right {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  display: inline-block;
+}
+.carousel-control .icon-prev,
+.carousel-control .glyphicon-chevron-left {
+  left: 50%;
+  margin-left: -10px;
+}
+.carousel-control .icon-next,
+.carousel-control .glyphicon-chevron-right {
+  right: 50%;
+  margin-right: -10px;
+}
+.carousel-control .icon-prev,
+.carousel-control .icon-next {
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  line-height: 1;
+  font-family: serif;
+}
+.carousel-control .icon-prev:before {
+  content: '\2039';
+}
+.carousel-control .icon-next:before {
+  content: '\203a';
+}
+.carousel-indicators {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  z-index: 15;
+  width: 60%;
+  margin-left: -30%;
+  padding-left: 0;
+  list-style: none;
+  text-align: center;
+}
+.carousel-indicators li {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 1px;
+  text-indent: -999px;
+  border: 1px solid #ffffff;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: #000 \9;
+  background-color: rgba(0, 0, 0, 0);
+}
+.carousel-indicators .active {
+  margin: 0;
+  width: 12px;
+  height: 12px;
+  background-color: #ffffff;
+}
+.carousel-caption {
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  bottom: 20px;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #ffffff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+.carousel-caption .btn {
+  text-shadow: none;
+}
+@media screen and (min-width: 768px) {
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right,
+  .carousel-control .icon-prev,
+  .carousel-control .icon-next {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    font-size: 30px;
+  }
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .icon-prev {
+    margin-left: -15px;
+  }
+  .carousel-control .glyphicon-chevron-right,
+  .carousel-control .icon-next {
+    margin-right: -15px;
+  }
+  .carousel-caption {
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
+  }
+  .carousel-indicators {
+    bottom: 20px;
+  }
+}
 .clearfix:before,
 .clearfix:after,
 .dl-horizontal dd:before,
@@ -9562,6 +9787,10 @@ fieldset[disabled] .table .btn-default.active {
 .tooltip-inner {
   padding: 5px 10px;
 }
+.panel {
+  -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
 .panel.ui-sortable-helper {
   border-style: dashed;
 }
@@ -9573,6 +9802,9 @@ fieldset[disabled] .table .btn-default.active {
   border: 0;
   margin: 0;
 }
+.panel-carousel {
+  padding: 15px;
+}
 .panel-heading {
   position: relative;
 }
@@ -9645,6 +9877,16 @@ fieldset[disabled] .table .btn-default.active {
 .tab-pane > .panel-tab:first-child {
   border-top: none;
 }
+.panel-lg .panel-body {
+  padding: 35px;
+}
+.panel-lg .panel-heading,
+.panel-lg .panel-footer {
+  padding: 18px 35px;
+}
+.panel-lg .panel-carousel {
+  padding: 35px;
+}
 .popover {
   padding: 0;
 }
@@ -10362,123 +10604,220 @@ a.badge-danger:hover {
 .t3-icon-empty {
   background-image: none;
 }
-#typo3-index-php {
-  background: #ebebeb;
-  min-width: 400px;
-  min-height: 550px;
-}
-#typo3-index-php #t3-login-wrap {
+.typo3-login {
+  background-color: #eeeeee;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  display: table;
   position: absolute;
-  left: 50%;
-  margin-left: -200px;
-  width: 400px;
-  z-index: 1;
-  padding-top: 50px;
-  padding-bottom: 100px;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
 }
-#typo3-index-php .t3-login-header {
-  padding: 18px;
+.typo3-login-container {
+  display: table-cell;
+  vertical-align: middle;
 }
-#typo3-index-php .t3-default-logo {
-  margin: 5px 15px;
+.typo3-login-wrap {
+  max-width: 360px;
+  margin: 0 auto;
 }
-#typo3-index-php .t3-login-body {
-  background-color: #5a5a5a;
-  padding: 25px 40px;
+.typo3-login-links {
+  padding-top: inherit;
+  margin-top: 40px;
+  margin-bottom: 0;
 }
-#typo3-index-php .t3-login-body a {
-  cursor: pointer;
+.typo3-login-links .disabled {
+  cursor: not-allowed !important;
+  text-decoration: none!important;
+  color: #737373 !important;
 }
-#typo3-index-php .t3-login-body a i {
-  margin-right: 6px;
+.typo3-login-links .disabled span {
+  cursor: inherit;
 }
-#typo3-index-php .t3-login-body a.switchToOpenId {
-  color: #a7a7a7;
+.typo3-login-logo {
+  margin-bottom: 30px;
 }
-#typo3-index-php .form-group {
-  margin-bottom: 10px;
-  position: relative;
+.typo3-login-logo > img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
 }
-#typo3-index-php .form-group:last-child {
-  margin-bottom: 0;
+.typo3-login-news-heading {
+  font-size: 14px;
+  line-height: 1.3em;
+  margin-top: 0;
 }
-#typo3-index-php .form-control {
-  border-radius: 0;
-  background-color: #3a3a3a;
-  color: #a7a7a7;
-  border: none;
+.panel-login {
+  border-color: #d5d5d5;
+}
+.panel-login .panel-body {
+  border-bottom: 3px solid #ff8800;
+}
+.panel-login a {
+  font-weight: bold;
+}
+@media (max-width: 767px) {
+  .panel-login {
+    margin-bottom: 0;
+  }
+}
+.input-login {
+  border-color: #cccccc;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  height: 41.2px;
+  padding: 12px 12px;
   font-size: 12px;
+  line-height: 1.33;
+  border-radius: 2px;
+}
+select.input-login {
   height: 41.2px;
-  padding-left: 12px;
-  padding-right: 12px;
+  line-height: 41.2px;
 }
-#typo3-index-php .form-control:hover {
-  color: #fff;
+textarea.input-login,
+select[multiple].input-login {
+  height: auto;
 }
-#typo3-index-php .form-control:focus {
-  border: none;
+.input-login:focus {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
-#typo3-index-php .input-group-addon {
-  background-color: #3a3a3a;
-  color: #a7a7a7;
-  border-radius: 0;
-  border: none;
+.btn-login {
+  padding: 12px 12px;
+  font-size: 12px;
+  line-height: 1em;
+  border-radius: 2px;
+  color: #ffffff;
+  background-color: #ff8800;
+  border-color: rgba(0, 0, 0, 0.1);
+  line-height: 1.3em;
+}
+.btn-login:hover,
+.btn-login:focus,
+.btn-login.focus,
+.btn-login:active,
+.btn-login.active,
+.open > .dropdown-toggle.btn-login {
+  color: #ffffff;
+  background-color: #cc6d00;
+  border-color: rgba(0, 0, 0, 0.1);
 }
-#typo3-index-php #t3-login-submit {
-  background-color: #ff8600;
-  background-image: linear-gradient(center top, #fe9500 0%, #cf6610 100%);
-  background-repeat: repeat-x;
-  text-shadow: 0px -1px 0 rgba(149, 81, 5, 0.6);
-  color: #fff;
-  padding: 4px 20px;
-  height: 41.2px;
+.btn-login:active,
+.btn-login.active,
+.open > .dropdown-toggle.btn-login {
+  background-image: none;
 }
-#typo3-index-php #t3-login-process {
-  background-color: #ff8600;
-  color: #fff;
-  cursor: wait;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  line-height: 41.2px;
+.btn-login.disabled,
+.btn-login[disabled],
+fieldset[disabled] .btn-login,
+.btn-login.disabled:hover,
+.btn-login[disabled]:hover,
+fieldset[disabled] .btn-login:hover,
+.btn-login.disabled:focus,
+.btn-login[disabled]:focus,
+fieldset[disabled] .btn-login:focus,
+.btn-login.disabled.focus,
+.btn-login[disabled].focus,
+fieldset[disabled] .btn-login.focus,
+.btn-login.disabled:active,
+.btn-login[disabled]:active,
+fieldset[disabled] .btn-login:active,
+.btn-login.disabled.active,
+.btn-login[disabled].active,
+fieldset[disabled] .btn-login.active {
+  background-color: #ff8800;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.btn-login .badge {
+  color: #ff8800;
+  background-color: #ffffff;
+}
+.btn-login:focus {
+  outline: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.typo3-login-carousel-control {
+  top: 50%;
+  margin-top: -30px;
+  height: 60px;
+  line-height: 60px;
+  width: 10px;
+  background-color: #ffffff;
   text-align: center;
+  position: absolute;
+  opacity: 0.25;
+  filter: alpha(opacity=25);
+  -webkit-transition: opacity 0.2s ease-in-out;
+  -o-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
-#typo3-index-php #t3-login-news {
-  background: #fff;
-  padding: 25px 40px;
+.typo3-login-carousel-control:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
 }
-#typo3-index-php #t3-login-news h4 {
-  margin-top: 0;
+.typo3-login-carousel-control.left {
+  left: -10px;
+  border: 1px solid #d5d5d5;
+  border-right: 0;
+  border-radius: 2px 0 0 2px;
 }
-#typo3-index-php #t3-login-news dl {
-  margin-bottom: 0;
+.typo3-login-carousel-control.right {
+  right: -10px;
+  border: 1px solid #d5d5d5;
+  border-left: 0;
+  border-radius: 0 2px 2px 0;
 }
-#typo3-index-php #t3-login-news dl dt {
-  font-size: 17px;
-  font-weight: 500;
+@media (min-width: 768px) {
+  .typo3-login-carousel-control {
+    width: 20px;
+  }
+  .typo3-login-carousel-control.left {
+    left: -20px;
+  }
+  .typo3-login-carousel-control.right {
+    right: -20px;
+  }
 }
-#typo3-index-php #t3-login-news dl dt span {
-  color: #737373;
-  font-size: 11px;
+.typo3-login-copyright-link:before,
+.typo3-login-copyright-link:after {
+  content: " ";
+  display: table;
 }
-#typo3-index-php #t3-login-copyright {
-  font-size: 11px;
-  color: #737373;
-  position: fixed;
-  bottom: 18px;
-  left: 18px;
-  right: 18px;
+.typo3-login-copyright-link:after {
+  clear: both;
 }
-#typo3-index-php #t3-login-copyright a {
-  color: #4d4d4d;
-  text-decoration: underline;
+.typo3-login-copyright-link:before,
+.typo3-login-copyright-link:after {
+  content: " ";
+  display: table;
 }
-#typo3-index-php #t3-login-copyright a:hover {
-  color: #000;
+.typo3-login-copyright-link:after {
+  clear: both;
+}
+.typo3-login-copyright-link > img {
+  float: right;
+  margin-top: -4px;
+}
+.typo3-login-copyright-text {
+  margin-top: 18px;
+  color: #444444;
+}
+.typo3-login-copyright-text .fa {
+  font-size: 13px;
+}
+.typo3-login-copyright-text > *:first-child {
+  margin-top: 0;
+}
+.typo3-login-copyright-text > *:last-child {
+  margin-bottom: 0;
 }
 div.typo3-noDoc {
   margin-left: 10px;
@@ -10753,6 +11092,9 @@ span.typo3-moduleHeader img {
 .form-control-wrap {
   margin: 9px 0;
 }
+.form-control-holder {
+  position: relative;
+}
 .row > .form-group > .form-control-wrap {
   margin-bottom: 0;
 }
@@ -10801,6 +11143,21 @@ select.icon-select option {
 .input-group .form-control-clearable .form-control {
   display: block;
 }
+.form-notice-capslock {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  margin-top: -10px;
+  height: 20px;
+  width: 20px;
+  padding: 3px;
+  z-index: 10;
+  background-color: #fff;
+}
+.form-notice-capslock > img {
+  display: block;
+  opacity: 0.5;
+}
 .form-inline-spaced {
   margin: 0 -0.5em 18px;
 }