fix account and login stylesheets

plugins/account.less

@@ -1 +0,0 @@
-// This file is automatically generated, please do not edit it.

plugins/login.less

@@ -1 +0,0 @@
-// This file is automatically generated, please do not edit it.

resources/www/_shared/styles/_main-menu.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 #mainMenu{
-  height:30px;
+  height:35px;
   bottom:auto;
   -moz-border-radius-bottomleft:4px;
   -moz-border-radius-bottomright:4px;

resources/www/account/styles/_skin.scss

@@ -99,6 +99,29 @@ ul {
 
 /** Button style */
 
+.btn {
+    $glow: inset 0 1px 0 rgba(255, 255, 255, 0.2),  0 1px 7px rgba(0, 0, 0, 1);
+    @include glow($glow);
+    @include border-radius($borderRadiusSmall);
+    text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.btn-success {
+    @include gradient ($btnSuccessBackground, 0.7);
+}
+
+.btn-info {
+    @include gradient ($btnInfoBackground, 0.7);
+}
+
+.btn-success:hover {
+    @include gradient ($btnSuccessBackgroundHighlight, 0.7);
+}
+
+.btn-info:hover {
+    @include gradient ($btnInfoBackgroundHighlight, 0.7);
+}
+
 .btn-flat {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');
     -webkit-box-shadow: none;
@@ -271,6 +294,30 @@ ul {
    padding: 9px 5px;
 }
 
+/** blockquote style */
+
+blockquote {
+    page-break-inside: avoid;
+    background: #f9f9f9;
+    border-left: 10px solid #ccc;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "\201C""\201D""\2018""\2019";
+    color: #333;
+}
+
+blockquote:before {
+    color: #ccc;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+
+blockquote p {
+    display: inline;
+}
 /** app css */
 
 .help-block-error {
@@ -610,8 +657,37 @@ form[name=registerForm] label[for=terms-of-use] input{
     height: 100%;
 }
 
+#main-bar {
+    margin-top: 40px;
+}
+
+.brand .section-title {
+    color: $grayLight;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+    min-height: 30px;
+}
+
+legend {
+    color: $grayLighter;
+}
+
 .footer {
-    padding: 10px 0;
+    padding: 20px 0px;
 }
 
 .footer-list {
@@ -925,6 +1001,69 @@ form[name=registerForm] .multiselect-group {
     }
 }
 
+
+
+h1, h2, h3, h4 {
+    font-weight: 100;
+}
+
+.content{
+    min-height: 500px;
+}
+
+.url_callback_input input {
+    margin: 0;
+}
+
+.modal {
+    color: $black;
+}
+
+.app-list {
+    border: 1px solid $grayDark;
+    background: lighten($background, 2%);
+    @include border-radius($baseBorderRadius);
+}
+
+.app-list li {
+    padding: 10px;
+    border-top: 1px solid $grayDark;
+}
+
+.app-list li:first-child {
+    border-top:none;
+}
+
+.app-list li .app-row {
+    line-height: $fontSizeLarge * 1.25;
+    padding-bottm: 5px;
+}
+
+.app-list li .app-row a {
+    font-size: $fontSizeLarge * 1.25;
+}
+
+.text-success {
+    color: $green;
+}
+
+.text-error {
+    color: $red;
+}
+
+.control-span {
+    padding-top: 5px;
+    line-height: 20px;
+}
+
+form[name="changeEmail"] .control-label {
+    width: 200px;
+}
+
+form[name="changeEmail"] .controls {
+    margin-left: 220px;
+}
+
 /* Landscape phones and down */
 @media (max-width: 480px) {
 

resources/www/account/styles/_variables.scss

@@ -73,13 +73,13 @@ $inputIEBackground:                #6D6D6D;
 
 // Scaffolding
 // -------------------------
-$bodyBackground:        $white;
+$bodyBackground:        $background;
 $textColor:             $white;
 
 
 // Links
 // -------------------------
-$linkColor:             #fff;
+$linkColor:             #08c;
 $linkColorHover:        darken($linkColor, 15%);
 $footerLinkColor:       $linkColor;
 $footerLinkColorHover:  $linkColorHover;
@@ -121,7 +121,7 @@ $borderRadiusSmall:     3px;
 // Tables
 // -------------------------
 $tableBackground:                   transparent; // overall background-color
-$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundAccent:             lighten($background, 5%); // for striping
 $tableBackgroundHover:              #f5f5f5; // for hover
 $tableBorder:                       #ddd; // table and cell border
 
@@ -131,14 +131,14 @@ $btnBackground:                     $white;
 $btnBackgroundHighlight:            darken($white, 10%);
 $btnBorder:                         #bbb;
 
-$btnPrimaryBackground:              $linkColor;
+$btnPrimaryBackground:              lighten($background, 15%);
-$btnPrimaryBackgroundHighlight:     darken($btnPrimaryBackground, 20%);
+$btnPrimaryBackgroundHighlight:     darken($background, 10%);
 
-$btnInfoBackground:                 #3d8fa8;
+$btnInfoBackground:                 #1c607f;
-$btnInfoBackgroundHighlight:        #0d4461;
+$btnInfoBackgroundHighlight:        darken($btnInfoBackground, 10%);
 
-$btnSuccessBackground:              #2fac74;
+$btnSuccessBackground:              #1ea062;
-$btnSuccessBackgroundHighlight:     #118749;
+$btnSuccessBackgroundHighlight:     darken($btnSuccessBackground, 10%);
 
 $btnWarningBackground:              lighten($orange, 15%);
 $btnWarningBackgroundHighlight:     $orange;
@@ -152,12 +152,12 @@ $btnInverseBackgroundHighlight:     $grayDarker;
 
 // Forms
 // -------------------------
-$inputBackground:               $black;
+$inputBackground:               $white;
-$inputBorder:                   none;
+$inputBorder:                   lighten($background, 5%);
-$inputBorderRadius:             0px;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
-$formActionsBackground:         #f5f5f5;
+$formActionsBackground:         $background;
-$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+$inputHeight:                   30px; // base line-height + 8px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
@@ -168,10 +168,10 @@ $dropdownDividerTop:            #e5e5e5;
 $dropdownDividerBottom:         $white;
 
 $dropdownLinkColor:             $white;
-$dropdownLinkColorHover:        $white;
+$dropdownLinkColorHover:        $gray;
 $dropdownLinkColorActive:       $white;
 
-$dropdownLinkBackgroundActive:  lighten($backgroundSideBar, 10%);
+$dropdownLinkBackgroundActive:  $linkColor;
 $dropdownLinkBackgroundHover:   $dropdownLinkBackgroundActive;
 
 
@@ -215,7 +215,7 @@ $horizontalComponentOffset:       180px;
 
 // Wells
 // -------------------------
-$wellBackground:                  #f5f5f5;
+$wellBackground:                  $grayDarker;
 
 
 // Navbar
@@ -224,18 +224,18 @@ $navbarCollapseWidth:             979px;
 $navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
 
 $navbarHeight:                    40px;
-$navbarBackgroundHighlight:       #ffffff;
+$navbarBackgroundHighlight:       lighten($background, 5%);
-$navbarBackground:                darken($navbarBackgroundHighlight, 5%);
+$navbarBackground:                $background;
 $navbarBorder:                    darken($navbarBackground, 12%);
 
-$navbarText:                      #777;
+$navbarText:                      $white;
-$navbarLinkColor:                 #777;
+$navbarLinkColor:                 $linkColor;
-$navbarLinkColorHover:            $grayDark;
+$navbarLinkColorHover:            $white;
-$navbarLinkColorActive:           $gray;
+$navbarLinkColorActive:           $linkColor;
-$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundHover:       $background;
-$navbarLinkBackgroundActive:      darken($navbarBackground, 5%);
+$navbarLinkBackgroundActive:      lighten($background, 15%);
 
-$navbarBrandColor:                $navbarLinkColor;
+$navbarBrandColor:                $white;
 
 // Inverted navbar
 $navbarInverseBackground:                #111111;

resources/www/account/styles/main.scss

@@ -1,9 +1,8 @@
-@import '../../../../www/bower_components/normalize-css/normalize'; // not extension for inline import
+// @import '../../../../www/bower_components/normalize-css/normalize'; // not extension for inline import
-@import '../../vendors/bootstrap/bootstrap';
 @import '../../_shared/styles/variables';
-// @TODO enable importation of: @import "../../../../plugins/login.less";
+@import '../../../../plugins/account.scss';
 @import 'variables';
-
+@import '../../vendors/bootstrap/bootstrap';
 @import 'skin';
 @import '../../../../www/bower_components/font-awesome/sass/font-awesome.scss';
 @import '../../../../www/bower_components/jquery-ui/themes/base/jquery.ui.autocomplete'; // not extension for inline import

resources/www/authentication/styles/_variables.scss

@@ -0,0 +1,346 @@
+// Variables
+// --------------------------------------------------
+
+@mixin glow($glow) {
+  box-shadow: $glow;
+  -webkit-box-shadow: $glow;
+  -moz-box-shadow: $glow;
+}
+
+@mixin gradient ($colorButton, $multiplier){
+  $colorHsl: lightness($colorButton) * $multiplier;
+
+  background: -moz-linear-gradient($colorButton, hsl(hue($colorButton), saturation($colorButton), $colorHsl)); /* FF 3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $colorButton), color-stop(100%, hsl(hue($colorButton), saturation($colorButton), $colorHsl)));  /*Safari 4+, Chrome 2+*/
+  background: -webkit-linear-gradient($colorButton, hsl(hue($colorButton), saturation($colorButton), $colorHsl)); /* Safari 5.1+, Chrome 10+ */
+  background: -o-linear-gradient($colorButton, hsl(hue($colorButton), saturation($colorButton), $colorHsl)); /* Opera 11.10 */
+  /*    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');  IE6 & IE7
+      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";  IE8+ */
+  background: linear-gradient($colorButton, hsl(hue($colorButton), saturation($colorButton), $colorHsl)); /* the standard */
+}
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$grayDarker:            #222;
+$grayDark:              #333;
+$gray:                  #555;
+$grayLight:             #999;
+$grayLighter:           #eee;
+$white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+$blue:                  #049cdb;
+$blueDark:              #0064cd;
+$green:                 #46a546;
+$red:                   #9d261d;
+$yellow:                #ffc40d;
+$orange:                #f89406;
+$pink:                  #c3325f;
+$purple:                #7a43b6;
+
+
+// Own variables
+// ----------------------------
+
+$inputOutsideBorder:                #4c4c4c;
+$colorError:                        #af3030;
+$colorSuccess:                      #108946;
+$colorFacebook:                     #3b5a97;
+$colorGooglePlus:                   #ba2828;
+$colorViadeo:                       #242424;
+$colorTwitter:                      #2fa3dc;
+$colorLinkedin:                     #025b8e;
+$colorGithub:                       #908c8b;
+$backgroundSideBar:                 #1a1a1a;
+$background:                        #141414;
+$defaultFontFamily:                 'tahoma', lucida grande,verdana,arial,sans-serif;
+$sideBarGlow:                       0 0 15px rgba(0, 0, 0, 1);
+$dropDownLanguageGlow:              0 0 15px rgba(0, 0, 0, 1);
+$sideBarBlockBorderColorBottom:     $black;
+$sideBarBlockBorderColorTop:        #232222;
+$identityPhraseanetBackgroundColor: #f2f2f2;
+$identityPhraseanetColor:           #323232;
+$identityPhraseanetIconColor:       #b3b3b3;
+$languageCaretColor:                $white;
+$inputIEBackground:                #6D6D6D;
+
+// Scaffolding
+// -------------------------
+$bodyBackground:        $white;
+$textColor:             $white;
+
+
+// Links
+// -------------------------
+$linkColor:             #fff;
+$linkColorHover:        darken($linkColor, 15%);
+$footerLinkColor:       $linkColor;
+$footerLinkColorHover:  $linkColorHover;
+
+
+// Typography
+// -------------------------
+$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontFamily:        $defaultFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
+
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    bold;    // instead of browser default, bold
+$headingsColor:         inherit; // empty to use BS default, $textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0 6px;   // 22px
+
+$baseBorderRadius:      4px;
+$borderRadiusLarge:     6px;
+$borderRadiusSmall:     3px;
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #f5f5f5; // for hover
+$tableBorder:                       #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+$btnBackground:                     $white;
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         #bbb;
+
+$btnPrimaryBackground:              $linkColor;
+$btnPrimaryBackgroundHighlight:     darken($btnPrimaryBackground, 20%);
+
+$btnInfoBackground:                 #3d8fa8;
+$btnInfoBackgroundHighlight:        #0d4461;
+
+$btnSuccessBackground:              #2fac74;
+$btnSuccessBackgroundHighlight:     #118749;
+
+$btnWarningBackground:              lighten($orange, 15%);
+$btnWarningBackgroundHighlight:     $orange;
+
+$btnDangerBackground:               #ee5f5b;
+$btnDangerBackgroundHighlight:      #bd362f;
+
+$btnInverseBackground:              #444;
+$btnInverseBackgroundHighlight:     $grayDarker;
+
+
+// Forms
+// -------------------------
+$inputBackground:               $black;
+$inputBorder:                   none;
+$inputBorderRadius:             0px;
+$inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         #f5f5f5;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+$dropdownBackground:            $backgroundSideBar;
+$dropdownBorder:                rgba(0,0,0,.2);
+$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerBottom:         $white;
+
+$dropdownLinkColor:             $white;
+$dropdownLinkColorHover:        $white;
+$dropdownLinkColorActive:       $white;
+
+$dropdownLinkBackgroundActive:  lighten($backgroundSideBar, 10%);
+$dropdownLinkBackgroundHover:   $dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1030;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          "/assets/vendors/bootstrap/img/glyphicons-halflings.png";
+$iconWhiteSpritePath:     "/assets/vendors/bootstrap/img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText:         $grayLight;
+
+
+// Hr border color
+// -------------------------
+$hrBorder:                $grayLighter;
+
+
+// Horizontal forms , lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f5f5f5;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    40px;
+$navbarBackgroundHighlight:       #ffffff;
+$navbarBackground:                darken($navbarBackgroundHighlight, 5%);
+$navbarBorder:                    darken($navbarBackground, 12%);
+
+$navbarText:                      #777;
+$navbarLinkColor:                 #777;
+$navbarLinkColorHover:            $grayDark;
+$navbarLinkColorActive:           $gray;
+$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundActive:      darken($navbarBackground, 5%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                #111111;
+$navbarInverseBackgroundHighlight:       #222222;
+$navbarInverseBorder:                    #252525;
+
+$navbarInverseText:                      $grayLight;
+$navbarInverseLinkColor:                 $grayLight;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       transparent;
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    #ccc;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                #fff;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayLighter;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             $white;
+$warningBackground:       $grayDark;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+
+$errorText:               $white;
+$errorBackground:         #c9322b;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+
+$successText:             $white;
+$successBackground:       #1f914f;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+
+$infoText:                $white;
+$infoBackground:          #4889af;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+
+
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       #000;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       #fff;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       #fff;
+$popoverTitleBackground:  darken($popoverBackground, 3%);
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$gridColumnWidth:         60px;
+$gridGutterWidth:         20px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);

resources/www/authentication/styles/main.scss

@@ -1 +1,10 @@
-@import '../../account/styles/main';
+// @import '../../account/styles/main';
+// @import '../../../../www/bower_components/normalize-css/normalize'; // not extension for inline import
+@import '../../_shared/styles/variables';
+@import 'variables';
+@import '../../vendors/bootstrap/bootstrap';
+@import '../../account/styles/skin';
+@import '../../../../plugins/login.scss';
+
+@import '../../../../www/bower_components/font-awesome/sass/font-awesome.scss';
+@import '../../../../www/bower_components/jquery-ui/themes/base/jquery.ui.autocomplete'; // not extension for inline import