Add all plugins CSS files, including theming, in login page

5 files changed, 259 insertions, 255 deletions

diff --git a/plugins/CoreHome/stylesheets/menu.less b/plugins/CoreHome/stylesheets/menu.less
index 0372528846..c95df5c08c 100644
--- a/plugins/CoreHome/stylesheets/menu.less
+++ b/plugins/CoreHome/stylesheets/menu.less
@@ -54,7 +54,7 @@
     text-decoration: underline;
 }
 
-.nav_tab > li.sfActive.sfHover > a {
+.nav_tab > li.sfHover > a {
     border-bottom: 1px solid #fff;
 }
 
diff --git a/plugins/Login/javascripts/login.js b/plugins/Login/javascripts/login.js
index 5458942fef..6200fc5947 100755
--- a/plugins/Login/javascripts/login.js
+++ b/plugins/Login/javascripts/login.js
@@ -6,7 +6,7 @@
  */
 (function ($) {
 
-    $(document).ready(function () {
+    $(function() {
         var switchForm = function (fromFormId, toFormId, message, callback) {
             var fromLoginInputId = '#' + fromFormId + '_login',
                 toLoginInputId = '#' + toFormId + '_login',
diff --git a/plugins/Login/stylesheets/login.css b/plugins/Login/stylesheets/login.css
index 1717d5d4c6..93b594e18a 100644
--- a/plugins/Login/stylesheets/login.css
+++ b/plugins/Login/stylesheets/login.css
@@ -1,214 +1,193 @@
-/* shamelessly taken from wordpress 2.5 - thank you guys!!! */
-* {
-    margin: 0;
-    padding: 0;
+/* LOGO
+***********************/
+#logo {
+    float: none;
+    margin: 100px auto 0 auto;
+    width: 240px;
+    position: relative;
 }
 
-body {
-    font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
+#logo .description {
+    position: absolute;
+    left: -40px !important;
+    top: -30px !important;
+    -webkit-transform: rotate(-6deg);
+    -moz-transform: rotate(-6deg);
+    -ms-transform: rotate(-6deg);
+    -o-transform: rotate(-6deg);
 }
 
-form {
-    padding: 16px 16px 16px 16px;
-    border-radius: 5px;
+#logo .description a {
+    font: 16px/16px 'Patrick Hand';
+    color: #666666;
+    right: auto;
+    text-decoration: none;
 }
 
-#login form input.submit {
-    float: right;
-    height: 35px;
-    padding: 0 20px;
-    cursor: pointer;
-    font: bold 15px Arial, Helvetica, sans-serif;
+#logo .description .arrow {
+    background: url(../../Zeitgeist/images/affix-arrow.png);
+    width: 50px;
+    height: 68px;
+    position: absolute;
+    left: -35px;
 }
 
-#login form div {
-    margin-bottom: 24px;
+#logo img {
+    border: 0;
+    vertical-align: bottom;
+    width: 260px;
+    height: auto;
 }
 
-.updated, .login #login_error, .login .message {
-    background-color: #ffffe0;
-    border-color: #e6db55;
-    margin: 0 auto;
-    width: 330px;
+#logo .h1 {
+    font-family: Georgia, "Times New Roman", Times, serif;
+    font-weight: normal;
+    color: #136F8B;
+    font-size: 45pt;
+    text-transform: none;
 }
 
-#login fieldset {
-    border: 0;
-}
 
-#login fieldset.actions {
-    line-height: 35px;
-    width: 315px;
-    margin-top: 10px;
+/* LAYOUT
+***********************/
+#loginPage a {
+    text-decoration: none;
 }
 
-#login h1 {
-    text-align: center;
-    color: #666;
-    margin: 0 0 30px 0;
-    font: normal 26px/1 Verdana, Helvetica;
-    position: relative;
+.loadingPiwik {
+    float: left;
+    margin-left: 16px;
 }
 
-#login {
+.loginSection {
     background-color: #fafafa;
     width: 360px;
     padding: 30px;
     margin: 50px auto 0 auto;
-    z-index: 0;
     border-radius: 3px;
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2);
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, .1);
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2);
 }
 
-#login form {
-    margin: 0 5px;
+.loginSection h1 {
+    text-align: center;
+    color: #666;
+    margin: 0 0 30px 0;
+    font: normal 26px/1 Verdana, Helvetica;
     position: relative;
 }
 
-#login form input[type="text"],
-#login form input[type="password"] {
-    padding: 10px 15px 10px 45px;
-    margin: 0 0 15px 0;
-    width: 253px; /* 258 + 2 + 55 = 315 */
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-}
-
-#login_form_rememberme {
-    vertical-align: middle;
-}
 
-#login_error, .message {
-    margin: 0 0 16px 8px;
-    border: 1px solid;
-    padding: 12px;
+/* FORM 
+***********************/
+.loginSection form {
+    margin: 0 5px;
+    padding: 15px;
+    position: relative;
 }
 
-#nav, #piwik {
-    margin: 0 0 0 8px;
-    padding: 16px;
+.loginSection form div {
+    margin-bottom: 24px;
 }
 
-#nav {
-    text-align: center;
+.loginSection .submit {
+    margin-top: 0;
 }
 
-#nav a:hover {
-    text-decoration: underline;
+.loginSection fieldset {
+    border: 0;
 }
 
-#login_form_password, #reset_form_password,
-#reset_form_password_bis, #login_form_login, #reset_form_login {
-    background: #fff url(../../Zeitgeist/images/login-sprite.png) no-repeat;
+.loginSection fieldset.actions {
+    line-height: 35px;
+    width: 315px;
+    margin-top: 10px;
 }
 
-#login_form_password, #reset_form_password, #reset_form_password_bis {
-    background-position: 10px -51px !important;
+#login_form_rememberme {
+    vertical-align: middle;
 }
 
-#login_form_login, #reset_form_login {
-    background-position: 10px 11px !important;
-}
 
-#login_form_password, #reset_form_password, #reset_form_password_bis,
-#login_form_login, #reset_form_login {
+/* FIELDS
+***********************/
+.loginSection form input[type="text"],
+.loginSection form input[type="password"] {
     font-size: 20px;
-    width: 97%;
-    padding: 3px;
-    margin-right: 6px;
-}
-
-#login #login_error {
-    background-color: #ffebe8;
-    border-color: #c00;
-}
-
-#login form input.submit {
-    background-color: #e5e5e5;
+    padding: 10px 15px 10px 45px;
+    margin: 0 0 15px 0;
+    width: 253px; /* 258 + 2 + 55 = 315 */
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    color: #555;
+    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
+    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
+    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
 }
 
-#login form input.submit:hover {
-    background-color: #eee;
+#login_form_password,
+#reset_form_password,
+#reset_form_password_bis,
+#login_form_login,
+#reset_form_login {
+    background: #fff url(../../Zeitgeist/images/login-sprite.png) no-repeat;
 }
 
-.login #login_error {
-    background-color: #ffffe0;
-    border-color: #e6db55;
+#login_form_password,
+#reset_form_password,
+#reset_form_password_bis {
+    background-position: 10px -51px;
 }
 
-.login #nav a {
-    color: #777;
+#login_form_login,
+#reset_form_login {
+    background-position: 10px 11px;
 }
 
-.login #piwik a {
-    color: #CDCDCD;
-}
 
-body.login {
-    border-top-color: #464646;
+/* MESSAGE 
+***********************/
+#loginPage .message_error,
+#loginPage .message {
+    margin: 0 auto;
+    border: 1px solid;
+    padding: 12px;
 }
 
-#login form input {
-    color: #555;
+#loginPage .message_error {
+    background-color: #ffebe8;
+    border-color: #c00;
 }
 
-a {
-    text-decoration: none;
+#loginPage .message {
+    background-color: #ffffe0;
+    border-color: #e6db55;
 }
 
-#logo {
-    margin: 100px auto 0 auto;
-    width: 240px;
-    position: relative;
-}
 
-#logo .description a {
-    font: 16px/16px 'Patrick Hand';
-    color: #666666;
-    right: auto;
-    text-decoration: none;
-}
-
-#logo .description {
-    position: absolute;
-    left: -40px !important;
-    top: -30px !important;
-    -webkit-transform: rotate(-6deg);
-    -moz-transform: rotate(-6deg);
-    -ms-transform: rotate(-6deg);
-    -o-transform: rotate(-6deg);
+/* NAVIGATION 
+***********************/
+#nav, 
+#piwik {
+    margin: 0 0 0 8px;
+    padding: 16px;
 }
 
-#logo .description .arrow {
-    background: url(../../Zeitgeist/images/affix-arrow.png);
-    width: 50px;
-    height: 68px;
-    position: absolute;
-    left: -35px;
+#nav {
+    text-align: center;
 }
 
-#logo img {
-    border: 0;
-    vertical-align: bottom;
-    width: 260px;
+#nav a:hover {
+    text-decoration: underline;
 }
 
-#logo .h1 {
-    font-family: Georgia, "Times New Roman", Times, serif;
-    font-weight: normal;
-    color: #136F8B;
-    font-size: 45pt;
-    text-transform: none;
+#loginPage #nav a {
+    color: #777;
 }
 
-.loadingPiwik {
-    float: left;
-    margin-left: 16px;
+#loginPage #piwik a {
+    color: #CDCDCD;
 }
 
 /* IE < 9 will use this */
diff --git a/plugins/Login/templates/login.twig b/plugins/Login/templates/login.twig
index ebc38f185d..aad97579fb 100644
--- a/plugins/Login/templates/login.twig
+++ b/plugins/Login/templates/login.twig
@@ -8,21 +8,24 @@
     <title>{% if isCustomLogo == false %}Piwik &rsaquo; {% endif %}{{ 'Login_LogIn'|translate }}</title>
 
     <link rel="shortcut icon" href="plugins/CoreHome/images/favicon.ico"/>
+    {% autoescape false %}
+    {{ includeAssets({"type": "css"}) }}
+    {% endautoescape %}
     <link rel="stylesheet" type="text/css" href="plugins/Login/stylesheets/login.css"/>
-    <meta name="description" content="{{ 'General_OpenSourceWebAnalytics'|translate }}" />
+    <meta name="description" content="{{ 'General_OpenSourceWebAnalytics'|translate }}"/>
     <!--[if lt IE 9]>
     <script src="libs/html5shiv/html5shiv.js"></script>
     <![endif]-->
     <script type="text/javascript" src="libs/jquery/jquery.js"></script>
     <script type="text/javascript" src="libs/jquery/jquery.placeholder.js"></script>
     {% if (forceSslLogin is defined and forceSslLogin) %}
-    <script type="text/javascript">
-        if (window.location.protocol !== 'https:') {
-            var url = window.location.toString();
-            url = url.replace(/^http:/, 'https:');
-            window.location.replace(url);
-        }
-    </script>
+        <script type="text/javascript">
+            if (window.location.protocol !== 'https:') {
+                var url = window.location.toString();
+                url = url.replace(/^http:/, 'https:');
+                window.location.replace(url);
+            }
+        </script>
     {% endif %}
     <script type="text/javascript">
         $(function () {
@@ -32,115 +35,137 @@
     </script>
     <script type="text/javascript" src="plugins/Login/javascripts/login.js"></script>
     {% if 'General_LayoutDirection'|translate =='rtl' %}
-    <link rel="stylesheet" type="text/css" href="plugins/Zeitgeist/stylesheets/rtl.css"/>
+        <link rel="stylesheet" type="text/css" href="plugins/Zeitgeist/stylesheets/rtl.css"/>
     {% endif %}
 </head>
-<body class="login">
-{% include "_iframeBuster.twig" %}
-<div id="logo">
-    {% if isCustomLogo == false %}<a href="http://piwik.org" title="{{ linkTitle }}">{% endif %}
-    {% if hasSVGLogo %}
-        <img src='{{ logoSVG }}' title="{{ linkTitle }}" alt="Piwik" width="240" style='margin-right: 20px' class="ie-hide"/>
-        <!--[if lt IE 9]>
-    {% endif %}
-    <img src='{{ logoLarge }}' title="{{ linkTitle }}" alt="Piwik" width="240" style='margin-right:20px'/>
-    {% if hasSVGLogo %}<![endif]-->{% endif %}
+<body id="loginPage">
 
-    {% if isCustomLogo %}
-        {% set poweredByPiwik %}
-        <i><a href="http://piwik.org/" target="_blank">{{ linkTitle }}</a></i>
-        {% endset %}
-    {% endif %}
+    {% include "_iframeBuster.twig" %}
 
-    {% if isCustomLogo == false %}</a>
-        <div class="description"><a href="http://piwik.org" title="{{ linkTitle }}">{{ linkTitle }}</a>
-            <div class="arrow"></div>
-        </div>
-    {% endif %}
-</div>
-
-
-<section id="login">
-
-    {# untrusted host warning #}
-    {% if (isValidHost is defined and invalidHostMessage is defined and isValidHost == false) %}
-        <div id="login_error">
-            <strong>{{ 'General_Warning'|translate }}:&nbsp;</strong>{{ invalidHostMessage }}
-
-            <br><br>{{ invalidHostMessageHowToFix }}
-            <br/><br/><a style="float:right" href="http://piwik.org/faq/troubleshooting/#faq_171" target="_blank">{{ 'General_Help'|translate }}
-                <img style='vertical-align: bottom' src="plugins/Zeitgeist/images/help_grey.png"/></a><br/>
-        </div>
-    {% else %}
-        <div id="message_container">
-            {% if form_data.errors %}
-                <div id="login_error">
-                    {% for data in form_data.errors %}
-                        <strong>{{ 'General_Error'|translate }}</strong>: {{ data }}<br/>
-                    {% endfor %}
-                </div>
-            {% endif %}
+    <div id="logo">
+        {% if isCustomLogo == false %}
+            <a href="http://piwik.org" title="{{ linkTitle }}">
+        {% endif %}
+        {% if hasSVGLogo %}
+            <img src='{{ logoSVG }}' title="{{ linkTitle }}" alt="Piwik" width="240" style='margin-right: 20px'
+             class="ie-hide"/>
+            <!--[if lt IE 9]>
+        {% endif %}
+        <img src='{{ logoLarge }}' title="{{ linkTitle }}" alt="Piwik" width="240" style='margin-right:20px'/>
+        {% if hasSVGLogo %}<![endif]-->{% endif %}
 
-            {% if AccessErrorString %}
-                <div id="login_error"><strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/></div>
-            {% endif %}
+        {% if isCustomLogo %}
+            {% set poweredByPiwik %}
+            <i><a href="http://piwik.org/" target="_blank">{{ linkTitle }}</a></i>
+            {% endset %}
+        {% endif %}
 
-            {% if infoMessage %}
-                <p class="message">{{ infoMessage|raw }}</p>
-            {% endif %}
-        </div>
-        <form {{ form_data.attributes|raw }}>
-            <h1>{{'Login_LogIn'|translate }}</h1>
-            <fieldset class="inputs">
-                <input type="text" name="form_login" id="login_form_login" class="input" value="" size="20" tabindex="10"
-                       placeholder="{{'General_Username'|translate }}" autofocus="autofocus"/>
-                <input type="password" name="form_password" id="login_form_password" class="input" value="" size="20" tabindex="20"
-                       placeholder="{{ 'Login_Password'|translate }}"/>
-                <input type="hidden" name="form_nonce" id="login_form_nonce" value="{{ nonce }}"/>
-            </fieldset>
-
-            <fieldset class="actions">
-                <input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90"
-                       {% if form_data.form_rememberme.value %}checked="checked" {%  endif %}/>
-                <label for="login_form_rememberme">{{ 'Login_RememberMe'|translate }}</label>
-                <input class="submit" id='login_form_submit' type="submit" value="{{ 'Login_LogIn'|translate }}" tabindex="100"/>
-            </fieldset>
-        </form>
-        <form id="reset_form" style="display:none;">
-            <fieldset class="inputs">
-                <input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20" tabindex="10"
-                       placeholder="{{ 'Login_LoginOrEmail'|translate }}"/>
-                <input type="hidden" name="form_nonce" id="reset_form_nonce" value="{{ nonce }}"/>
-
-                <input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20" tabindex="20"
-                       placeholder="{{ 'Login_Password'|translate }}"/>
-
-                <input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value="" size="20" tabindex="30"
-                       placeholder="{{ 'Login_PasswordRepeat'|translate }}"/>
-            </fieldset>
-
-            <fieldset class="actions">
-                <span class="loadingPiwik" style="display:none;"><img alt="Loading" src="plugins/Zeitgeist/images/loading-blue.gif"/></span>
-                <input class="submit" id='reset_form_submit' type="submit" value="{{ 'Login_ChangePassword'|translate }}" tabindex="100"/>
-            </fieldset>
-
-            <input type="hidden" name="module" value="Login"/>
-            <input type="hidden" name="action" value="resetPassword"/>
-        </form>
-        <p id="nav">
-            <a id="login_form_nav" href="#" title="{{ 'Login_LostYourPassword'|translate }}">{{ 'Login_LostYourPassword'|translate }}</a>
-            <a id="alternate_reset_nav" href="#" style="display:none;" title="{'Login_LogIn'|translate}">{{ 'Login_LogIn'|translate }}</a>
-            <a id="reset_form_nav" href="#" style="display:none;" title="{{ 'Mobile_NavigationBack'|translate }}">{{ 'General_Cancel'|translate }}</a>
-        </p>
-        {% if poweredByPiwik is defined %}
-            <p id="piwik">
-                {{ poweredByPiwik }}
+        {% if isCustomLogo == false %}
+            </a>
+            <div class="description">
+                <a href="http://piwik.org" title="{{ linkTitle }}">{{ linkTitle }}</a>
+                <div class="arrow"></div>
+            </div>
+        {% endif %}
+    </div>
+
+
+    <section class="loginSection">
+
+        {# untrusted host warning #}
+        {% if (isValidHost is defined and invalidHostMessage is defined and isValidHost == false) %}
+            <div class="message_error">
+                <strong>{{ 'General_Warning'|translate }}:&nbsp;</strong>{{ invalidHostMessage }}
+
+                <br><br>{{ invalidHostMessageHowToFix }}
+                <br/><br/><a style="float:right" href="http://piwik.org/faq/troubleshooting/#faq_171"
+                             target="_blank">{{ 'General_Help'|translate }}
+                    <img style='vertical-align: bottom' src="plugins/Zeitgeist/images/help_grey.png"/></a><br/>
+            </div>
+        {% else %}
+            <div id="message_container">
+                {% if form_data.errors %}
+                    <div class="message_error">
+                        {% for data in form_data.errors %}
+                            <strong>{{ 'General_Error'|translate }}</strong>: {{ data }}<br/>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+
+                {% if AccessErrorString %}
+                    <div class="message_error">
+                        <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
+                    </div>
+                {% endif %}
+
+                {% if infoMessage %}
+                    <p class="message">{{ infoMessage|raw }}</p>
+                {% endif %}
+            </div>
+            <form {{ form_data.attributes|raw }}>
+                <h1>{{ 'Login_LogIn'|translate }}</h1>
+                <fieldset class="inputs">
+                    <input type="text" name="form_login" id="login_form_login" class="input" value="" size="20"
+                           tabindex="10"
+                           placeholder="{{ 'General_Username'|translate }}" autofocus="autofocus"/>
+                    <input type="password" name="form_password" id="login_form_password" class="input" value="" size="20"
+                           tabindex="20"
+                           placeholder="{{ 'Login_Password'|translate }}"/>
+                    <input type="hidden" name="form_nonce" id="login_form_nonce" value="{{ nonce }}"/>
+                </fieldset>
+
+                <fieldset class="actions">
+                    <input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90"
+                           {% if form_data.form_rememberme.value %}checked="checked" {% endif %}/>
+                    <label for="login_form_rememberme">{{ 'Login_RememberMe'|translate }}</label>
+                    <input class="submit" id='login_form_submit' type="submit" value="{{ 'Login_LogIn'|translate }}"
+                           tabindex="100"/>
+                </fieldset>
+            </form>
+            <form id="reset_form" style="display:none;">
+                <fieldset class="inputs">
+                    <input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20"
+                           tabindex="10"
+                           placeholder="{{ 'Login_LoginOrEmail'|translate }}"/>
+                    <input type="hidden" name="form_nonce" id="reset_form_nonce" value="{{ nonce }}"/>
+
+                    <input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20"
+                           tabindex="20"
+                           placeholder="{{ 'Login_Password'|translate }}"/>
+
+                    <input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value=""
+                           size="20" tabindex="30"
+                           placeholder="{{ 'Login_PasswordRepeat'|translate }}"/>
+                </fieldset>
+
+                <fieldset class="actions">
+                    <span class="loadingPiwik" style="display:none;">
+                        <img alt="Loading" src="plugins/Zeitgeist/images/loading-blue.gif"/>
+                    </span>
+                    <input class="submit" id='reset_form_submit' type="submit"
+                           value="{{ 'Login_ChangePassword'|translate }}" tabindex="100"/>
+                </fieldset>
+
+                <input type="hidden" name="module" value="Login"/>
+                <input type="hidden" name="action" value="resetPassword"/>
+            </form>
+            <p id="nav">
+                <a id="login_form_nav" href="#"
+                   title="{{ 'Login_LostYourPassword'|translate }}">{{ 'Login_LostYourPassword'|translate }}</a>
+                <a id="alternate_reset_nav" href="#" style="display:none;"
+                   title="{'Login_LogIn'|translate}">{{ 'Login_LogIn'|translate }}</a>
+                <a id="reset_form_nav" href="#" style="display:none;"
+                   title="{{ 'Mobile_NavigationBack'|translate }}">{{ 'General_Cancel'|translate }}</a>
             </p>
+            {% if poweredByPiwik is defined %}
+                <p id="piwik">
+                    {{ poweredByPiwik }}
+                </p>
+            {% endif %}
+            <div id="lost_password_instructions" style="display:none;">
+                <p class="message">{{ 'Login_ResetPasswordInstructions'|translate }}</p>
+            </div>
         {% endif %}
-        <div id="lost_password_instructions" style="display:none;">
-            <p class="message">{{ 'Login_ResetPasswordInstructions'|translate }}</p>
-        </div>
-    {% endif %}
-</section>
+    </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/plugins/Zeitgeist/stylesheets/common.css b/plugins/Zeitgeist/stylesheets/common.css
index eb6304f543..f3cc3af429 100644
--- a/plugins/Zeitgeist/stylesheets/common.css
+++ b/plugins/Zeitgeist/stylesheets/common.css
@@ -291,7 +291,7 @@ a {
     text-decoration: none;
 }
 
-#logo > a {
+#logo img {
     height: 40px;
 }