//fix css login

This commit is contained in:
Kevin Granger
2013-11-20 17:24:52 +01:00
parent 63f2082da3
commit 9e2dac8ece
6 changed files with 78 additions and 62 deletions
+48 -32
View File
@@ -3076,6 +3076,53 @@ a.link-social:hover { text-decoration: none; }
[class^="icon-Admin"] { margin-right: 6px; }
#login { height: 100%; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(10%, rgba(104, 128, 138, 0.4)), color-stop(40%, rgba(138, 114, 76, 0))), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(57, 173, 219, 0.25)), color-stop(100%, rgba(42, 60, 87, 0.4))), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #670d10), color-stop(100%, #092756)); background: -webkit-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(left top, #670d10, #092756); background: -moz-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -moz-linear-gradient(left top, #670d10, #092756); background: -o-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -o-linear-gradient(left top, #670d10, #092756); background: radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(left top, #670d10, #092756); }
#login-header { padding-top: 40px; margin-bottom: 30px; color: white; }
#login-header h1, #login-header h4 { margin: 0; padding: 0; }
#login-panel { margin: 0 auto; width: 420px; }
#login-panel .panel, #login-panel #header_notifs_icon_wrapper .notifs_panel, #header_notifs_icon_wrapper #login-panel .notifs_panel, #login-panel .bootstrap #dash_version, .bootstrap #login-panel #dash_version { -webkit-box-shadow: rgba(255, 255, 255, 0.45) 0 0 0 6px; box-shadow: rgba(255, 255, 255, 0.45) 0 0 0 6px; }
#login-panel .panel-footer, #login-panel #header_notifs_icon_wrapper .notifs_panel .notifs_panel_footer, #header_notifs_icon_wrapper .notifs_panel #login-panel .notifs_panel_footer { margin: 0 -20px -20px; }
#login-panel .flip-container { -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; height: 370px; }
#login-panel .flip-container.flip .flipper { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
#login-panel .flipper { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; }
#login-panel .front, #login-panel .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 420px; padding: 20px; position: absolute; top: 0; left: 0; }
#login-panel .front { z-index: 2; }
#login-panel .back { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
#login-footer a { color: #a0aab5; }
.animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); }
100% { opacity: 1; -moz-transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); }
100% { opacity: 1; -o-transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); } }
.animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
.animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; }
.bootstrap { @-webkit-keyframes one { 0% { background-color: #00a4e7; }
100% { background-color: white; } }
@-webkit-keyframes two { 0% { -webkit-box-shadow: #00a4e7 0 0 0 20px inset; box-shadow: #00a4e7 0 0 0 20px inset; }
@@ -3086,23 +3133,7 @@ a.link-social:hover { text-decoration: none; }
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); }
100% { opacity: 1; -moz-transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); }
100% { opacity: 1; -o-transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }
@-webkit-keyframes bounceG { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); }
*/ @-webkit-keyframes bounceG { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); }
100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } }
@-moz-keyframes bounceG { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); }
100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } }
@@ -3404,21 +3435,6 @@ a.link-social:hover { text-decoration: none; }
.bootstrap .ladda-button[data-size=s] .ladda-label { font-size: 0.9em; }
.bootstrap .ladda-button[data-size=l] .ladda-label { font-size: 1.2em; }
.bootstrap .ladda-button[data-size=xl] .ladda-label { font-size: 1.5em; }
.bootstrap #login { height: 100%; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(10%, rgba(104, 128, 138, 0.4)), color-stop(40%, rgba(138, 114, 76, 0))), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(57, 173, 219, 0.25)), color-stop(100%, rgba(42, 60, 87, 0.4))), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #670d10), color-stop(100%, #092756)); background: -webkit-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(left top, #670d10, #092756); background: -moz-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -moz-linear-gradient(left top, #670d10, #092756); background: -o-radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -o-linear-gradient(left top, #670d10, #092756); background: radial-gradient(top left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(left top, #670d10, #092756); }
.bootstrap #login-header { margin: 0 0 60px 0; color: white; }
.bootstrap #login-panel { margin: 0 auto; width: 420px; }
.bootstrap #login-panel .panel, .bootstrap #login-panel #header_notifs_icon_wrapper .notifs_panel, #header_notifs_icon_wrapper .bootstrap #login-panel .notifs_panel, .bootstrap #login-panel #dash_version { -webkit-box-shadow: rgba(255, 255, 255, 0.45) 0 0 0 6px; box-shadow: rgba(255, 255, 255, 0.45) 0 0 0 6px; }
.bootstrap #login-panel .panel-footer, .bootstrap #login-panel #header_notifs_icon_wrapper .notifs_panel .notifs_panel_footer, #header_notifs_icon_wrapper .notifs_panel .bootstrap #login-panel .notifs_panel_footer { margin: 0 -20px -20px; }
.bootstrap #login-panel .flip-container { -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; height: 370px; }
.bootstrap #login-panel .flip-container.flip .flipper { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
.bootstrap #login-panel .flipper { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; }
.bootstrap #login-panel .front, .bootstrap #login-panel .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 420px; position: absolute; top: 0; left: 0; }
.bootstrap #login-panel .front { z-index: 2; }
.bootstrap #login-panel .back { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
.bootstrap #login-footer a { color: #a0aab5; }
.bootstrap .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }
.bootstrap .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; }
.bootstrap .animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; }
.bootstrap #carrier_wizard { position: relative; display: block; }
.bootstrap #carrier_wizard .stepContainer { position: relative; display: block; clear: both; }
.bootstrap #carrier_wizard .stepContainer div.content { position: absolute; display: block; width: 100%; clear: both; }
@@ -2,12 +2,11 @@
@import "compass"
@import "admin-theme/admin-theme-colors"
@import "admin-theme/_bootstrap-variables"
@import "admin-theme/_font-awesome"
@import "admin-theme/animate"
@import "admin-theme/bootstrap-variables"
@import "admin-theme/font-awesome"
@import "admin-theme/vendor/animate"
//Bootstrap from bower-components
//some help about bower here.
//Bootstrap Core : Variables + Mixins + Reset + Print
@import "../bower_components/sass-bootstrap/lib/variables"
@@ -57,10 +56,12 @@
@import "../bower_components/sass-bootstrap/lib/utilities"
@import "../bower_components/sass-bootstrap/lib/responsive-utilities"
//PrestaShop Elements
@import "admin-theme/admin-content"
@import "admin-theme/admin-header"
@import "admin-theme/admin-footer"
@import "admin-theme/admin-nav"
@import "admin-theme/admin-login"
.bootstrap
//components
@@ -74,7 +75,6 @@
@import "admin-theme/admin-date-range-picker"
@import "admin-theme/ladda"
//page specific
@import "admin-theme/admin-login"
@import "admin-theme/admin-carrier-wizard"
@import "admin-theme/admin-modules"
@import "admin-theme/admin-dashboard"
@@ -1,10 +1,14 @@
#login
height: 100%
height: 100%
@include background(radial-gradient(color-stops(rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), top left),linear-gradient(top,rgba(57,173,219,.25),rgba(42,60,87,.4)),linear-gradient(left top,#670D10,#092756))
#login-header
margin: 0 0 60px 0
padding-top: 40px
margin-bottom: 30px
color: white
h1, h4
margin: 0
padding: 0
#login-panel
margin: 0 auto
@@ -22,12 +26,13 @@
.flipper
@include transition-duration(0.6s)
@include transform-style(preserve-3d)
@include transform-style
position: relative
.front, .back
@include backface-visibility(hidden)
width: 420px
padding: 20px
position: absolute
top: 0
left: 0
@@ -88,8 +93,7 @@
-webkit-animation-name: fadeInDown
-moz-animation-name: fadeInDown
-o-animation-name: fadeInDown
animation-name: fadeInDown
//animation-name: fadeInDown
@-webkit-keyframes fadeIn
0%
@@ -119,4 +123,4 @@
-webkit-animation-name: fadeIn
-moz-animation-name: fadeIn
-o-animation-name: fadeIn
animation-name: fadeIn
//animation-name: fadeIn
@@ -46,5 +46,5 @@
<link rel="shortcut icon" type="image/x-icon" href="{$img_dir}favicon.ico" />
</head>
<body class="page-topbar">
<div id="login">
<div id="login" class="bootstrap">
<div id="content">
@@ -24,25 +24,21 @@
*}
<div class="bootstrap">
<h3><i class="icon-cogs"></i> {l s='Configuration'}</h3>
<div class="row">
<div class="input-group">
<button type="button" class="btn btn-default dropdown-toggle" tabindex="-1" data-toggle="dropdown">
<i class="icon-flag"></i>
{l s='Manage translations'}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{foreach from=$module_languages item=language}
<li><a href="{$trad_link}{$language['iso_code']}#{$module_name}">{$language.name}</a></li>
{/foreach}
</ul>
</div>
<div class="input-group">
<button type="button" class="btn btn-default dropdown-toggle" tabindex="-1" data-toggle="dropdown">
<i class="icon-flag"></i>
{l s='Manage translations'}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{foreach from=$module_languages item=language}
<li><a href="{$trad_link}{$language['iso_code']}#{$module_name}">{$language.name}</a></li>
{/foreach}
</ul>
</div>
{if isset($display_multishop_checkbox) && $display_multishop_checkbox}
<div class="row">
<input type="checkbox" name="activateModule" value="1"{if $module->active} checked="checked"{/if}
onclick="location.href = '{$current_url}&enable='+(($(this).attr('checked')) ? 1 : 0)" />
{l s='Activate module for '}{$shop_context}
</div>
<input type="checkbox" name="activateModule" value="1"{if $module->active} checked="checked"{/if}
onclick="location.href = '{$current_url}&enable='+(($(this).attr('checked')) ? 1 : 0)" />
{l s='Activate module for '}{$shop_context}
{/if}
</div>