From 01fafc404db197bd300c6bf54117d0c863d2ea3d Mon Sep 17 00:00:00 2001 From: Florian BLOUET Date: Wed, 18 Nov 2015 18:50:14 +0100 Subject: [PATCH] fix account and login stylesheets --- plugins/account.less | 1 - plugins/login.less | 1 - resources/www/_shared/styles/_main-menu.scss | 2 +- resources/www/account/styles/_skin.scss | 141 ++++++- resources/www/account/styles/_variables.scss | 52 +-- resources/www/account/styles/main.scss | 7 +- .../www/authentication/styles/_variables.scss | 346 ++++++++++++++++++ resources/www/authentication/styles/main.scss | 11 +- 8 files changed, 526 insertions(+), 35 deletions(-) delete mode 100644 plugins/account.less delete mode 100644 plugins/login.less create mode 100644 resources/www/authentication/styles/_variables.scss diff --git a/plugins/account.less b/plugins/account.less deleted file mode 100644 index 7670144a87..0000000000 --- a/plugins/account.less +++ /dev/null @@ -1 +0,0 @@ -// This file is automatically generated, please do not edit it. \ No newline at end of file diff --git a/plugins/login.less b/plugins/login.less deleted file mode 100644 index 7670144a87..0000000000 --- a/plugins/login.less +++ /dev/null @@ -1 +0,0 @@ -// This file is automatically generated, please do not edit it. \ No newline at end of file diff --git a/resources/www/_shared/styles/_main-menu.scss b/resources/www/_shared/styles/_main-menu.scss index ca1af706cb..402ba57980 100644 --- a/resources/www/_shared/styles/_main-menu.scss +++ b/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; diff --git a/resources/www/account/styles/_skin.scss b/resources/www/account/styles/_skin.scss index cf46de40a5..ab53ae6fd9 100644 --- a/resources/www/account/styles/_skin.scss +++ b/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) { diff --git a/resources/www/account/styles/_variables.scss b/resources/www/account/styles/_variables.scss index 92e88f2847..388ae4ee2a 100644 --- a/resources/www/account/styles/_variables.scss +++ b/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; -$btnPrimaryBackgroundHighlight: darken($btnPrimaryBackground, 20%); +$btnPrimaryBackground: lighten($background, 15%); +$btnPrimaryBackgroundHighlight: darken($background, 10%); -$btnInfoBackground: #3d8fa8; -$btnInfoBackgroundHighlight: #0d4461; +$btnInfoBackground: #1c607f; +$btnInfoBackgroundHighlight: darken($btnInfoBackground, 10%); -$btnSuccessBackground: #2fac74; -$btnSuccessBackgroundHighlight: #118749; +$btnSuccessBackground: #1ea062; +$btnSuccessBackgroundHighlight: darken($btnSuccessBackground, 10%); $btnWarningBackground: lighten($orange, 15%); $btnWarningBackgroundHighlight: $orange; @@ -152,12 +152,12 @@ $btnInverseBackgroundHighlight: $grayDarker; // Forms // ------------------------- -$inputBackground: $black; -$inputBorder: none; -$inputBorderRadius: 0px; +$inputBackground: $white; +$inputBorder: lighten($background, 5%); +$inputBorderRadius: $baseBorderRadius; $inputDisabledBackground: $grayLighter; -$formActionsBackground: #f5f5f5; -$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$formActionsBackground: $background; +$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; -$navbarBackground: darken($navbarBackgroundHighlight, 5%); +$navbarBackgroundHighlight: lighten($background, 5%); +$navbarBackground: $background; $navbarBorder: darken($navbarBackground, 12%); -$navbarText: #777; -$navbarLinkColor: #777; -$navbarLinkColorHover: $grayDark; -$navbarLinkColorActive: $gray; -$navbarLinkBackgroundHover: transparent; -$navbarLinkBackgroundActive: darken($navbarBackground, 5%); +$navbarText: $white; +$navbarLinkColor: $linkColor; +$navbarLinkColorHover: $white; +$navbarLinkColorActive: $linkColor; +$navbarLinkBackgroundHover: $background; +$navbarLinkBackgroundActive: lighten($background, 15%); -$navbarBrandColor: $navbarLinkColor; +$navbarBrandColor: $white; // Inverted navbar $navbarInverseBackground: #111111; diff --git a/resources/www/account/styles/main.scss b/resources/www/account/styles/main.scss index 7c0c913be4..2ef9dc2aef 100644 --- a/resources/www/account/styles/main.scss +++ b/resources/www/account/styles/main.scss @@ -1,9 +1,8 @@ -@import '../../../../www/bower_components/normalize-css/normalize'; // not extension for inline import -@import '../../vendors/bootstrap/bootstrap'; +// @import '../../../../www/bower_components/normalize-css/normalize'; // not extension for inline import @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 \ No newline at end of file diff --git a/resources/www/authentication/styles/_variables.scss b/resources/www/authentication/styles/_variables.scss new file mode 100644 index 0000000000..81e944f582 --- /dev/null +++ b/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); diff --git a/resources/www/authentication/styles/main.scss b/resources/www/authentication/styles/main.scss index 99cf2a752b..e18a76e22a 100644 --- a/resources/www/authentication/styles/main.scss +++ b/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 \ No newline at end of file