This is an automated email from the git hooks/post-receive script. New commit to branch refonteUI-2017 in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit ecf8b31cc76b1099d182d66a8279b2d89fffd34f Author: kaufmann <kaufmann@codelutin.com> Date: Tue Dec 19 17:42:34 2017 +0100 Refonte de l'UI: Modification du style (Ajout d'une police, couleurs, boutons, ...) --- bow-ui/src/main/less/base/_footer.less | 19 +++-- bow-ui/src/main/less/base/_layout.less | 93 ++++--------------------- bow-ui/src/main/less/common/_button.less | 19 +++-- bow-ui/src/main/less/common/_font.less | 20 ++++++ bow-ui/src/main/less/common/_form.less | 52 ++++++++------ bow-ui/src/main/less/common/_modal.less | 3 + bow-ui/src/main/less/common/_notifications.less | 40 +++++++++++ bow-ui/src/main/less/common/_tools.less | 9 +++ bow-ui/src/main/less/components/connexion.less | 20 +++--- bow-ui/src/main/less/variables/_colors.less | 45 ++++++++---- bow-ui/src/main/less/variables/_globals.less | 12 ++-- 11 files changed, 185 insertions(+), 147 deletions(-) diff --git a/bow-ui/src/main/less/base/_footer.less b/bow-ui/src/main/less/base/_footer.less index 84457bb..806b396 100644 --- a/bow-ui/src/main/less/base/_footer.less +++ b/bow-ui/src/main/less/base/_footer.less @@ -1,14 +1,11 @@ - #footer{ - padding-top:30px; -} - -#footer a{ - color:#bf8a9c; + margin-top: -@default-footer-height; + height: @default-footer-height; + text-align: center; + color: #CCC; + + a { + color: #BBB; + } } -#footer p{ - font-size:14px; - text-align:center; - line-height:50px; -} diff --git a/bow-ui/src/main/less/base/_layout.less b/bow-ui/src/main/less/base/_layout.less index 72175a1..8cbb9e2 100644 --- a/bow-ui/src/main/less/base/_layout.less +++ b/bow-ui/src/main/less/base/_layout.less @@ -1,90 +1,25 @@ *{ - padding:0; margin:0; + padding:0; + vertical-align: baseline; + box-sizing: border-box; } body{ - font-size: @defaut-font-size; - font-family:Verdana, Arial, Helvetica, sans-serif; -} - - -#page-wrap{ - clear:both; - float:left; - overflow-x:hidden; - overflow-y:visible; - position:relative; - width:100%; -} - - - - -#main .menu{ - margin: 0 auto; - clear:both; - border-bottom: 2px solid #804561; - text-align: center; -} - - -#main .counter { - -} - -#main .menu form{ - color:#9edcf8; - font-size:12px; -} - -#import .input input{ - width:90%; - margin-bottom:10px; -} - -.error{ - float:left; - color:red; - font-size:medium; - background-color:white; - overflow:auto; - margin-bottom:25px; - padding:4px; -} + overflow-x: hidden; -.errorMessage{ - font-weight:normal; - font-size:12px; - color:red; -} + padding-left: @default-sidebar-width; -#actionmessageHeader{ - color:blue; - position:fixed; - left:25%; - top:12px; -} - -#actionerrorHeader{ - color:red; - position:relative; - left:25%; - top:12px; -} - -#actionmessageHeader ul, #actionerrorHeader ul{ - list-style-type:none; + background-color: @color-background; + font-family: @default-font, Verdana, Arial; + font-size: @defaut-font-size; } -.fond { - background: #E0EDF3; - - padding:10px; +#bow-main { + min-height: 100vh; + padding-bottom: @default-footer-height; } -form, .wwFormTable{ - color:#804561; - font-size:11px; - font-weight:bold; -} +h1 { + color: @color-main; +} \ No newline at end of file diff --git a/bow-ui/src/main/less/common/_button.less b/bow-ui/src/main/less/common/_button.less index 1fc2551..a100b91 100644 --- a/bow-ui/src/main/less/common/_button.less +++ b/bow-ui/src/main/less/common/_button.less @@ -1,4 +1,3 @@ - a { color: @color-link; text-decoration: none; @@ -8,14 +7,12 @@ a { } } -.button{ - margin-top:20px; - background:url('../img/fdboutonV.jpg') repeat-x; - height:31px; - line-height:31px; - color:#FFFFFF; - font-weight:bold; - border:none; - width:auto; - padding:2px; +.buttton, +.submit-button { + background-color: transparent; + border: 2px solid @color-main; + color: @color-main; + outline: none; + + padding: @default-marge--small / 2 @default-marge--small; } \ No newline at end of file diff --git a/bow-ui/src/main/less/common/_font.less b/bow-ui/src/main/less/common/_font.less new file mode 100644 index 0000000..47edd76 --- /dev/null +++ b/bow-ui/src/main/less/common/_font.less @@ -0,0 +1,20 @@ +@font-face { + font-family: 'Titillium'; + src: url('../font/Titillium-Regular.otf'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Titillium'; + src: url('../font/Titillium-Bold.otf'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Titillium'; + src: url('../font/Titillium-Light.otf'); + font-weight: lighter; + font-style: normal; +} \ No newline at end of file diff --git a/bow-ui/src/main/less/common/_form.less b/bow-ui/src/main/less/common/_form.less index 90b6b47..57c370e 100644 --- a/bow-ui/src/main/less/common/_form.less +++ b/bow-ui/src/main/less/common/_form.less @@ -1,26 +1,38 @@ - - - -.recherche .input { - float: left; -} - -.user { - background: #CCC; +.bow-form-wrapper { + text-align: center; + padding-top: @default-marge--large; } -.user a { - color: #888; - border-color: #888; +.bow-form { + display: table; + margin: @default-marge--small auto @default-marge--large auto; } -.user #logout { +.bow-form-row { + text-align: left; + border-bottom: 1px solid @color-separation-border; + padding-top: @default-marge--small; + padding-bottom: @default-marge--small; + display: flex; + + label { + display: block; float: left; -} - - - -textarea{ - height:100px; - width:200px; + font-style: normal; + font-weight: lighter; + margin-bottom: @default-marge--small; + margin-top: @default-marge--small; + font-size: 110%; + color: @color-form-label; + min-width: 25%; + } + input[type="text"], + input[type="password"], + input[type="number"], + textarea { + flex: 1; + border: 1px solid @color-separation-border; + border-radius: 3px; + padding: @default-marge--small @default-marge--small; + } } \ No newline at end of file diff --git a/bow-ui/src/main/less/common/_modal.less b/bow-ui/src/main/less/common/_modal.less new file mode 100644 index 0000000..7d4484d --- /dev/null +++ b/bow-ui/src/main/less/common/_modal.less @@ -0,0 +1,3 @@ +.fullscreen-modal { + display: none; +} \ No newline at end of file diff --git a/bow-ui/src/main/less/common/_notifications.less b/bow-ui/src/main/less/common/_notifications.less new file mode 100644 index 0000000..db82230 --- /dev/null +++ b/bow-ui/src/main/less/common/_notifications.less @@ -0,0 +1,40 @@ + +.error{ + float:left; + overflow:auto; + + margin-bottom:25px; + padding:4px; + + color:red; + background-color:white; + + font-size:medium; +} + +.errorMessage{ + color:red; + + font-size:12px; + font-weight:normal; +} + +#actionmessageHeader{ + position:fixed; + top:12px; + left:25%; + + color:blue; +} + +#actionerrorHeader{ + position:relative; + top:12px; + left:25%; + + color:red; +} + +#actionmessageHeader ul, #actionerrorHeader ul{ + list-style-type:none; +} diff --git a/bow-ui/src/main/less/common/_tools.less b/bow-ui/src/main/less/common/_tools.less index a979e46..6b42f71 100644 --- a/bow-ui/src/main/less/common/_tools.less +++ b/bow-ui/src/main/less/common/_tools.less @@ -25,4 +25,13 @@ left: 50%; top: 50%; transform: translate(-50%, -50%); +} + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color; + background: -webkit-gradient(linear,left bottom,left top,color-stop(0, @start),color-stop(1, @stop)); + background: -ms-linear-gradient(bottom,@start,@stop); + background: -moz-linear-gradient(center bottom,@start 0%,@stop 100%); + background: -o-linear-gradient(@stop,@start); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); } \ No newline at end of file diff --git a/bow-ui/src/main/less/components/connexion.less b/bow-ui/src/main/less/components/connexion.less index 10dbd1d..fd11ef2 100644 --- a/bow-ui/src/main/less/components/connexion.less +++ b/bow-ui/src/main/less/components/connexion.less @@ -1,12 +1,14 @@ -// out: ../../webapp/generated-css/components/connexion.css, sourcemap: true, compress: true +@import "../common/_tools"; +@import "../variables/_colors"; +@import "../variables/_globals"; -#header { - background:#FFFFFF; - height:30px; - box-shadow: 0px 2px 5px rgba(0,0,0,0.05); +#bow-login { + min-height: calc(~"100vh" - @default-footer-height); + .gradient(@color-main, @color-main, darken(@color-main, 15)); + color: #FFF; } -#header a.logo{ - background:transparent url('../img/logobow.png') no-repeat scroll 0 0; - height:25px; -} \ No newline at end of file +#bow-login-header { + background-color: @color-sidebar-background; + min-height: @default-sidebar-width; +} diff --git a/bow-ui/src/main/less/variables/_colors.less b/bow-ui/src/main/less/variables/_colors.less index 0c98e84..718ed55 100644 --- a/bow-ui/src/main/less/variables/_colors.less +++ b/bow-ui/src/main/less/variables/_colors.less @@ -1,18 +1,37 @@ -@color-purple : #804561; -@color-blue-1 : #7DBED2; -@color-blue-2 : darken(@color-blue-1, 25%); -@color-grey-1 : #DDD; -@color-grey-2 : #F5F5F5; +@col-purple : #804561; +@col-purple-bright : #f390bf; +@col-blue : #7DBED2; +@col-blue-dark : darken(@col-blue, 25%); +@col-blue-pale : #E9F2F5; +@col-grey-medium : #DDD; +@col-grey-pale : #f9f5f7; +@col-grey-dark : #999; +@col-dark : #1e2a2f; +@col-dark-pale : #777; +@col-white : #FFF; +@col-white-pale : #FAFBFC; -@color-white-1 : #FFF; -@color-white-2 : #FAFBFC; -@color-background : @color-white-1; -@color-background-user-infos : @color-grey-2; +@color-background : lighten(@color-sidebar-background, 75%); -@color-link : @color-blue-1; -@color-link-hover : @color-blue-2; +@color-sidebar-background : @col-dark; -@color-main : @color-purple; +@color-link : @col-blue; +@color-link-hover : @col-blue-dark; +@color-menu-link : @col-grey-dark; +@color-menu-link-hover : @col-purple-bright; -@color-separation-border : @color-grey-1; \ No newline at end of file +@color-text-on-color : @col-white; + +@color-main : @col-purple; + +@color-bookmark-background : @color-main; +@color-bookmark-title : @col-white; +@color-bookmark-text : @col-white-pale; +@color-bookmark-shadow : @col-dark; + +@color-form-label : @col-dark-pale; + +@color-tag-cloud-background : mix(@col-blue, #FFF, 70%); + +@color-separation-border : @col-grey-medium; \ No newline at end of file diff --git a/bow-ui/src/main/less/variables/_globals.less b/bow-ui/src/main/less/variables/_globals.less index 8f308c2..32e69a6 100644 --- a/bow-ui/src/main/less/variables/_globals.less +++ b/bow-ui/src/main/less/variables/_globals.less @@ -1,7 +1,11 @@ -@default-header-height: 50px; - -@defaut-font-size: 14px; +@default-footer-height: 100px; +@default-sidebar-width: 75px; @default-marge--small: 10px; @default-marge--medium: 30px; -@default-marge--large: 50px; \ No newline at end of file +@default-marge--large: 50px; + +@default-font: Titillium; +@defaut-font-size: 16px; + +@default-bookmark-radius: 5px; \ No newline at end of file -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.