Administrator
|
OK, the *.less type is not in the svn config. I'll revert, add it, and commit again.
So again, please committers remember to do so when you commit a new file type. While at it I really wonder if we need to have 4 colored versions of the same theme in trunk? I suggest to have only one and propose the others as external components, later plugins. We could use a third party location to propose the 3 others theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.) Opinions? Jacques Le 24/08/2016 à 07:44, [hidden email] a écrit : > Author: jleroux > Date: Wed Aug 24 05:44:00 2016 > New Revision: 1757462 > > URL: http://svn.apache.org/viewvc?rev=1757462&view=rev > Log: > Removes now useless IE7 "star html hack". I was used to prevent IE7 from applying some CCS rules: http://css-discuss.incutio.com/wiki/Star_Html_Hack > And the hack is claimed deprecated here : https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ > > Thanks to Florian Montalbano research at "css property name correction in flatgrey and rainbowstone themes" - https://issues.apache.org/jira/browse/OFBIZ-7960# > > I checked, the IE7 market share is residual, no needs to keep this dragging down feature > > Modified: > ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css > ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less > ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less > ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less > ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less > ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css > > Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css > URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff > ============================================================================== > --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) > +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 05:44:00 2016 > @@ -922,10 +922,6 @@ form .basic-table, > text-shadow: #fff 0 1px 1px; /* Setting must be in px */ > /*text-transform:uppercase;*/ > width: auto; > - > - /* IE7 */ > - *padding-top: 0.2em; > - *padding-bottom: 0; > } > > .basic-table .collapsed { > @@ -1512,16 +1508,6 @@ input[type="button"] { > text-shadow: #fff 0 1px 1px; /* Setting must be in px */ > /*text-transform:uppercase;*/ > width: auto; > - > - /* IE7 */ > - *padding-top: 0.2em; > - *padding-bottom: 0; > -} > - > -button { > - /* IE7 */ > - *padding-top: 0.1em; > - *padding-bottom: 0.1em; > } > > a.disabled, > @@ -1563,11 +1549,6 @@ input[type="week"] { > padding: 0.2em 0.3em; > > height: 1.8em; > - > - /* IE7 */ > - *padding-top: 0.2em; > - *padding-bottom: 0.1em; > - *height: auto; > } > > /* > > Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less > URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff > ============================================================================== > --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less (original) > +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less Wed Aug 24 05:44:00 2016 > @@ -1,1997 +1,1990 @@ > -/* common colors */ > -@black: #000; > -@white: #fff; > -@grey: #e6e6e6; > -@greydark: #929292; > - > -@color-success: #8cff8c; > -@font-color-for-success: @black; > -@color-alert: #ff8c8c; > -@font-color-for-alert: @black; > - > -@color-success-dark: #356e35; > -@font-color-for-success: @black; > -@color-alert-dark: #932f33; > -@font-color-for-alert: @black; > - > -@color-background-alert: #f2dede; > -@color-font-alert: #a94442; > -@color-border-alert: #ebccd1; > - > -@color-background-success: #dff0d8; > -@color-font-success: #3c763d; > -@color-border-success: #d6e9c6; > - > -/* Saphir colors */ > -@blue-dark: #002333; > -@blue-main: #005982; > -@blue-medium: #c7dfff; > -@blue-light: #f1f7ff; > -@blue-light2: #e4f0f5; > - > -/* Ruby colors */ > -@red-dark: #420000; > -@red-main: #bf1616; > -@red-medium: #f7baba; > -@red-light: #fce7e7; > -@red-light2: #fed7c9; > - > -/* Emerald colors */ > -@green-dark: #197948; > -@green-main: #23af9b; > -@green-medium: #7ae3ad; > -@green-light: #e5f9ef; > -@green-light2: #d7f9ef; > - > -/* Amber colors */ > -@amber-dark: #bc4216; > -@amber-main: #f08906; > -@amber-medium: #f5c4b3; > -@amber-light: #fcede8; > -@amber-light2: #fcedcd; > - > -/* Saphir theme */ > -/* > -@main-color-theme : @blue-main; > -@dark-color-theme : @blue-dark; > -@medium-color-theme : @blue-medium; > -@light-color-theme : @blue-light; > -@light2-color-theme : @blue-light2; > -@font-color-for-dark : @grey; > -@font-color-for-main : @white; > -@font-color-for-medium : @dark-color-theme; > -@font-color-for-light : @dark-color-theme; > -@shadow-color : @black; > -@shadow-color-light : @greydark; > -*/ > - > -/* Ruby theme */ > -/* > -@main-color-theme : @red-main; > -@dark-color-theme : @red-dark; > -@medium-color-theme : @red-medium; > -@light-color-theme : @red-light; > -@light2-color-theme : @red-light2; > -@font-color-for-dark : @grey; > -@font-color-for-main : @white; > -@font-color-for-medium : @dark-color-theme; > -@font-color-for-light : @dark-color-theme; > -@shadow-color : @black; > -@shadow-color-light : @greydark; > -/* > - > -/* Emerald theme */ > -/* > -@main-color-theme : @green-main; > -@dark-color-theme : @green-dark; > -@medium-color-theme : @green-medium; > -@light-color-theme : @green-light; > -@light2-color-theme : @green-light2; > -@font-color-for-dark : @white; > -@font-color-for-main : @white; > -@font-color-for-medium : @dark-color-theme; > -@font-color-for-light : @dark-color-theme; > -@shadow-color : @black; > -@shadow-color-light : @greydark; > -*/ > -/* Amber theme */ > -@main-color-theme : @amber-main; > -@dark-color-theme : @amber-dark; > -@medium-color-theme : @amber-medium; > -@light-color-theme : @amber-light; > -@light2-color-theme : @amber-light2; > -@font-color-for-dark : @white; > -@font-color-for-main : @white; > -@font-color-for-medium : @dark-color-theme; > -@font-color-for-light : @dark-color-theme; > -@shadow-color : @black; > -@shadow-color-light : @greydark; > - > - > -@app-bar-height: 60px; > -@sub-app-bar-height: 40px; > -@footer-height: 20px; > -@home-btn-width: 47px; > -@color-line-height: 9px; > - > -@home-menu-tile-height: 80px; > -@home-menu-tile-min-width: 100px; > -@home-menu-tile-max-width: 100px; > - > -@third-lvl-height: 80px; > -@third-lvl-width : 100px; > -@min-screen : 1170px; > -@min-container-width: 1130px; > - > -@box-border-color: #d7d7d7; > - > -@font-face { > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - src: url('fonts/quicksand/quicksandbold.otf'); > - font-weight: normal; > - font-style: normal; > -} > - > -@font-face { > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - src: url('fonts/quicksand/quicksandbold.otf'); > - font-weight: bold; > - font-style: normal; > -} > - > -/* ---------------------------------- */ > -/* Begin special checkbox type switch */ > -/* ---------------------------------- */ > - > -[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox { > - display: none; > -} > - > -[type="checkbox"]:not(:checked).nrd-chkbox + label, > -[type="checkbox"]:checked.nrd-chkbox + label{ > - cursor: pointer; > -} > -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, > -[type="checkbox"]:checked.nrd-chkbox + label:before{ > - content: ""; > - width: 150px; > - min-width: 150px; > - background-color: @light-color-theme; > - padding: 2px 20px 2px 20px; > - border-radius: 8px 8px 8px 8px; > - > - cursor: pointer; > -} > - > -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, > -[type="checkbox"]:checked.nrd-chkbox + label:after{ > - content: ""; > - position: relative; > - left:-35px; > - background-color: @dark-color-theme; > - min-height: 10px; > - min-width: 10px; > - padding-left: 4px; > - padding-right: 5px; > - border-radius: 8px 8px 8px 8px; > - transition: all .2s; > -} > - > -[type="checkbox"]:checked.nrd-chkbox + label:after{ > - position: relative; > - left: -15px; > - transition: all .2s; > -} > -/* ---------------------------------- */ > -/* End special checkbox type switch */ > -/* ---------------------------------- */ > - > -/* ---------------------------------- */ > -/* Begin square Checkbox */ > -/* ---------------------------------- */ > - > -[type="checkbox"]:not(:checked).nrd-square-chkbox, > -[type="checkbox"]:checked.nrd-square-chkbox{ > - position: absolute; > - left: -9999px; > -} > - > -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, > -[type="checkbox"]:checked.nrd-square-chkbox + label{ > - content: ''; > - padding-left: 35px; > - position: relative; > - cursor: pointer; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - font-size: 12px; > - > -} > -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, > -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ > - content: ''; > - position: absolute; > - left:10px; > - top: -4px; > - width: 17px; > - height: 17px; /* dim. de la case */ > - border: 1px solid #aaa; > - background: @light-color-theme; > - border-radius: 2px; > -} > - > -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { > - background: @light-color-theme; > -} > -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ > - background: @main-color-theme; > -} > - > -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, > -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ > - content: 'â'; > - position: absolute; > - top: -4px; > - left: 14px; > - font-size: 16px; > - color: @font-color-for-main; > - transition: all .2s; > -} > -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { > - opacity: 0; > - transform: scale(0); > -} > -[type="checkbox"]:checked.nrd-square-chkbox + label:after { > - opacity: 1; > - transform: scale(1); > -} > -/* ---------------------------------*/ > -/* End square Checkbox */ > -/* ---------------------------------*/ > - > -/* ---------------------------------*/ > -/* Begin class content mgmt */ > -/* ---------------------------------*/ > - > - > -.flex-row { > - display: flex; > - flex-direction: row !important; > -} > -.flex-column { > - display: flex; > - flex-direction: column; > -} > - > -.col-width-1 { > - width: 10%; > -} > -.col-width-2 { > - width: 20%; > -} > -.col-width-3 { > - width: 30%; > -} > -.col-width-4 { > - width: 40%; > -} > -.col-width-5 { > - width: 50%; > -} > -.col-width-6 { > - width: 60%; > -} > -.col-width-7 { > - width: 70%; > -} > -.col-width-8 { > - width: 80%; > -} > -.col-width-9 { > - width: 90%; > -} > -.col-width-10 { > - width: 100%; > -} > - > -.align-v-center { > - display:flex; > - align-items: center; > -} > - > -.align-h-center { > - display:flex; > - justify-content: center; > -} > - > -/* ---------------------------------*/ > -/* End class content mgmt */ > -/* ---------------------------------*/ > - > - > -/* ---------------------------------- */ > -/* Begin btn-sort */ > -/* ---------------------------------- */ > - > -.btn-sort { > - position: relative; > - top: -6px; > - border:none; > - background:none; > - border-radius: 0; > - margin-left:5px; > -} > - > -.btn-sort:before{ > - content: ''; > - position: absolute; > - left: -1px; > - width: 0; > - height: 0; > - border-right: 10px solid transparent; > - border-bottom: 10px solid @greydark; > - border-left: 10px solid transparent; > -} > - > -.btn-sort:after{ > - content: ''; > - position: absolute; > - right: -1px; > - width: 0; > - height: 0; > - border-right: 10px solid transparent; > - border-top: 10px solid @greydark; > - border-left: 10px solid transparent; > - @media screen and (max-width: 1349px) { > - right: -5px; > - } > -} > - > -.btn-sort.btn-sort-asc:before{ > - border-bottom: 10px solid @main-color-theme; > -} > - > -.btn-sort.btn-sort-desc:after{ > - border-top: 10px solid @main-color-theme; > -} > - > -/* ---------------------------------- */ > -/* End btn-sort */ > -/* ---------------------------------- */ > - > - > -/* ---------------------------------- */ > -/* Begin defaut colour class */ > -/* ---------------------------------- */ > - > -.dark-color { > - background-color: @dark-color-theme !important; > - color: @font-color-for-dark !important; > -} > -.main-color { > - background-color: @main-color-theme !important; > - color: @font-color-for-main !important; > -} > -.medium-color { > - background-color: @medium-color-theme !important; > - color: @font-color-for-medium !important; > -} > -.light-color { > - background-color: @light-color-theme !important; > - color: @font-color-for-light !important; > -} > -.light2-color { > - background-color: @light2-color-theme !important; > - color: @font-color-for-light !important; > -} > - > -.grey-color { > - background-color: @grey !important; > -} > -.darkgrey-color { > - background-color: @greydark !important; > -} > - > -/* begin lookup widget */ > -.ui-dialog { > - opacity: 1; > - z-index: 50; > -} > - > -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { > - background: none !important; > - background-color: @dark-color-theme !important; > - button { > - background: none; > - background-color: @light-color-theme; > - } > -} > -/* end lookup widget */ > - > -.main-bar-label { > - color: @light-color-theme; > - padding-left: 3px; > - padding-right: 6px; > - font-size: 15px; > - font-weight: bold; > -} > - > -#company-logo { > - right: 10px; > - top: 2px; > - background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover; > - min-height: 50px; > - min-width: 50px; > - margin-right: 15px; > - align-self: center; > - @media screen and (min-width : 1232px) { > - min-height: 50px; > - min-width: 129px; > - background: url("images/ofbiz-white.svg") no-repeat left top / cover; > - } > -} > - > -.modal-screen { > - visibility: hidden; > - display: flex; > - flex-direction: column; > - background-color: @grey; > - opacity: .93; > - position: fixed; > - top: 0; > - left: 0; > - height: 100%; > - width: 100%; > - z-index: 9999; > -} > - > -.modal-box{ > - background-color: @white; > - opacity: 1; > - margin: 10%; > - border-radius: 10px; > - border: solid 2px @main-color-theme; > - padding : 10px 40px 10px 40px; > - .modal-header { > - position: relative; > - display: flex; > - flex-direction: row; > - h2 { > - font-size: 25px; > - font-weight: normal; > - color: @main-color-theme; > - } > - .btn-close-nrd { > - position: absolute; > - right: 0; > - display: flex; > - justify-content: center; > - border: solid 1px @main-color-theme; > - border-radius: 5px; > - color: @main-color-theme; > - font-size: 25px; > - height: 30px; > - width: 30px; > - text-decoration: none !important; > - } > - } > - .modal-body { > - p { > - font-size: 20px; > - } > - } > - .modal-footer { > - position: relative; > - height: 35px; > - display: flex; > - justify-content: flex-end; > - .btn-nrd { > - background: none; > - border: none; > - text-shadow: none; > - opacity: 1; > - margin-right: 10px; > - font-size: 20px; > - padding: 5px; > - border-radius: 8px; > - } > - .btn-nrd-main { > - background-color: @main-color-theme; > - color: @white; > - } > - .btn-nrd-std { > - background-color: @white; > - color: @main-color-theme; > - border: solid 1px @main-color-theme !important; > - } > - } > -} > -.btn-nrd:hover { > - box-shadow: 5px 5px 3px 0 @black; > -} > - > -.btn-nrd-std:hover { > - background-color: @main-color-theme !important; > - color: @white !important; > - border: solid 1px @main-color-theme !important; > -} > - > -.btn-close-nrd:hover { > - background-color: @main-color-theme !important; > - color: @white !important; > -} > - > -.list-nrd { > - border: solid 2px @main-color-theme; > - border-bottom-left-radius: 10px; > - border-bottom-right-radius: 10px; > - display: flex; > - flex-direction: column; > - margin-top: 15px; > - margin-bottom: 15px; > - .title-list-nrd { > - background-color: @main-color-theme; > - color : @white; > - font-size: 20px; > - font-weight: bold; > - padding-left: 5px; > - } > - > - li { > - position: relative; > - display: flex; > - flex-direction: row; > - font-size: 20px; > - padding-left: 5px; > - padding-top: 2px; > - padding-bottom: 2px; > - margin-bottom: 3px; > - a { > - color: @main-color-theme; > - } > - span { > - position: absolute; > - right: 0; > - color: @main-color-theme; > - font-size: 30px; > - } > - } > -} > -li.line-odd { > - background-color: @light-color-theme; > -} > - > -#user-avatar { > - height: 40px; > - width: 40px; > - padding: 2px; > - > - align-self: center; > - > - :hover { > - cursor: pointer; > - } > - img { > - max-height: 40px; > - max-width: 40px; > - position: relative; > - top: -2px; > - padding: 2px; > - background-color: @white; > - border-radius: 2px; > - } > -} > - > -#main-navigation-bar { > - position: relative; > - width: 100%; > - min-width: @min-container-width; > - display: flex; > - flex-direction: row; > - align-items: center; > - justify-content: space-between; > - font-family: Quicksand,sans-serif; > - background-color: @dark-color-theme; > - z-index: 5; > - height: @app-bar-height; > -} > -#main-nav-bar-left { > - position: relative; > - display: flex; > - align-items: center; > -} > -#main-nav-bar-right { > - position: relative; > - display: flex; > - align-items: center; > - padding-right: 15px; > -} > - > -.app-btn{ > - height: @app-bar-height; > - background-color: @dark-color-theme; > - display: flex; > - align-items: center; > - flex-direction: row; > - margin-right: 2px; > - margin-left: 2px; > - a { > - padding:10px; > - color: @font-color-for-dark; > - font-size: 1.4em !important; > - } > -} > - > -.app-btn a:visited { > - color: @font-color-for-dark; > -} > - > -.app-btn:hover{ > - position: relative; > - top: -6px; > - background-color: @main-color-theme; > - border-bottom-left-radius: 5px; > - border-bottom-right-radius: 5px; > - box-shadow: 1px 1px 12px @shadow-color; > - a { > - position: relative; > - top: 6px; > - color : @font-color-for-main; > - } > -} > -.app-btn.selected:hover { > - background-color: @dark-color-theme; > - box-shadow: none; > - top:0; > -} > - > -.app-btn a:hover { > - text-decoration: none; > -} > -#app-selected { > - position: relative; > - display: flex; > - flex-direction: column; > - align-items: center; > - justify-content: center; > - background-color: @main-color-theme; > - box-shadow: 1px -2px 12px @shadow-color; > - z-index: 0; > - opacity: .99; > - border-top-left-radius : 8px ; > - border-top-right-radius : 8px ; > - a { > - position: relative; > - top: 3px; > - color: @font-color-for-main; > - } > -} > -.app-btn.selected a:hover { > - text-decoration: none; > -} > - > -#app-bar-line { > - position: relative; > - width: 100%; > - min-width: @min-container-width; > - height: @color-line-height; > - background-color: @main-color-theme; > - box-shadow: 2px 2px 5px @shadow-color; > -} > -#color-add { > - width: 150px; > - background-color: @main-color-theme; > - height: @color-line-height; > - z-index: 20; > - position: relative; > - top: @color-line-height; > -} > - > -#more-app { > - position: relative; > - display: flex; > - align-items: center; > - justify-content: center; > - font-weight: bold; > - font-size: 1.4em !important; > - width: 40px; > - height: @app-bar-height; > - color: @font-color-for-dark; > -} > -#more-app:hover { > - background-color: @main-color-theme; > - text-decoration: none; > -} > -#more-app:hover #more-app-list { > - display: block; > -} > -#more-app.selected { > - background-color: @main-color-theme; > -} > - > -#more-app-list { > - display: none; > - position: absolute; > - top: @app-bar-height; > - left: -20px; > - background-color: @dark-color-theme; > - z-index: 10; > - border: solid 4px @main-color-theme; > - border-top-width: @color-line-height; > - border-bottom-left-radius: 4px; > - border-bottom-right-radius: 4px; > - li { > - padding-left : 4px; > - padding-right: 4px; > - } > - > - a { > - color: @font-color-for-dark; > - font-size: 15px; > - } > - > - :hover { > - background-color: @medium-color-theme; > - a { > - box-shadow: none; > - color: @dark-color-theme; > - } > - a:hover{ > - box-shadow: none; > - text-decoration: none; > - border-radius: 0; > - } > - } > - > - li.selected { > - background-color: @main-color-theme; > - a { > - color: @font-color-for-main; > - } > - a:hover { > - color: @font-color-for-main; > - background-color: @main-color-theme; > - } > - } > -} > - > -#homeButton { > - display: flex; > - //visibility: hidden; > - align-items: center; > - justify-content: center; > - background-color:@grey; > - border: none; > - border-radius : 0; > - > - height: @app-bar-height; > - width : @home-btn-width; > - text-decoration: none; > - img { > - height: 25px; > - transition: all .2s ease-in-out; > - } > -} > - > -#homeButton:hover img { > - transform: scale(1.1); > -} > - > -#app-bar-list { > - display: flex; > -} > - > -#user-details { > - position: absolute; > - right: 20px; > - top : 62px; > - background-color: @dark-color-theme; > - color : @font-color-for-dark; > - font-size: 15px; > - font-weight: bold; > - padding-top: 5px; > - padding-bottom: 10px; > - z-index: 15; > - box-shadow: 3px 3px 12px @shadow-color; > - border-radius: 3px; > - transition: all .1s ease-in-out; > - > - img { > - height: 50px; > - background-color: @white; > - padding: 4px; > - border-radius : 3px; > - margin-left: 10px; > - margin-right: 5px; > - } > - #logout { > - background-color: @white; > - color: @dark-color-theme !important; > - border-radius: 2px; > - :hover { > - text-decoration: none; > - } > - } > -} > - > -#user-details:after{ > - content: ''; > - position: absolute; > - top: -10px; > - right: 5px; > - width: 0; > - height: 0; > - border-right: 10px solid transparent; > - border-bottom: 10px solid @dark-color-theme; > - border-left: 10px solid transparent; > -} > - > -a.user-pref-btn { > - margin-top: 15px; > - background-color: @dark-color-theme; > - margin-left: 10px; > - margin-right: 10px; > - padding-top: 2px; > - padding-bottom: 2px; > - display: flex; > - justify-content: center; > - color: @font-color-for-dark !important; > - :hover { > - text-decoration: none; > - } > -} > - > -#user-name { > - display: flex; > - flex-direction: column; > - justify-content: center; > - align-content: center; > - padding-left : 5px; > - padding-right : 5px; > - span { > - min-width: 100px; > - padding-bottom : 5px; > - padding-top : 5px; > - } > -} > - > -#user-row1 { > - display: flex; > - flex-direction: row; > - justify-content: center; > - #user-lang { > - display: flex; > - flex-direction: row; > - justify-content: center; > - align-content: center; > - padding-left: 10px; > - padding-right: 10px; > - span { > - min-width: 30px; > - color: @font-color-for-dark; > - } > - } > -} > - > -.appbar-btn-img { > - height: @app-bar-height - 40px; > -} > - > -#help-btn { > - font-size: 10px; > - min-width: 20px; > - margin-right: 15px; > -} > -/* Begin sub Menu section */ > - > -#app-navigation { > - height: @sub-app-bar-height; > - border-right: solid 1px @black; > - border-bottom: solid 1px @black; > - width: 100%; > - min-width: @min-container-width; > - h2 { > - display: none; > - } > - ul { > - display: flex; > - flex-direction: row; > - background-color: @grey; > - flex-grow: 1; > - } > - ul li ul li { > - border-left: solid 1px @black; > - height: @sub-app-bar-height; > - display: flex; > - align-items: center; > - justify-items: center; > - justify-content: center; > - min-width: 75px; > - padding-left: 6px; > - padding-right: 6px; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - border-bottom: solid 1px @black; > - font-size: 12px; > - @media screen and (max-width: 1500px) { > - font-size: 10px; > - min-width: 65px; > - } > - @media screen and (max-width: 1300px) { > - font-size: 10px; > - min-width: 50px; > - } > - a { > - display: flex; > - justify-content: center; > - align-items: center; > - text-align: center; > - height: 100%; > - width: 100%; > - text-decoration: none; > - } > - } > -} > - > -#app-navigation ul li ul li:last-child { > - border-right: solid 1px @black; > -} > - > -#app-navigation ul li ul li:hover { > - background-color: @main-color-theme; > - min-height: @sub-app-bar-height; > - position: relative; > - //top: -1px; > - a { > - color: @white; > - text-decoration: none; > - } > -} > -#app-navigation ul li ul li.selected:hover { > - a { > - color: @black !important; > - } > -} > - > -#app-navigation ul li ul li.selected { > - background-color: @white; > - position: relative; > - top: 1px; > - height: @sub-app-bar-height + 1px; > - border-top-right-radius: 2px; > - border-top-left-radius: 2px; > - border-bottom: none; > - > - :after { > - content: ''; > - position: absolute; > - top: -2px; > - left: 5px; > - width: 0; > - height: 0; > - border-right: 10px solid transparent; > - border-top: 10px solid @main-color-theme; > - border-left: 10px solid transparent; > - } > - > -} > - > - > -/* End sub Menu section */ > - > -/* begin sub Menu section 3rd level */ > - > -.button-bar.tab-bar { > - ul li ul li { > - border: solid 1px @grey; > - border-radius: 4px; > - a { > - width: 100%; > - height: 100%; > - } > - } > - li.selected{ > - background-color: @main-color-theme; > - a{ > - color: @font-color-for-main; > - } > - } > - ul li ul li:hover { > - background-color: @main-color-theme; > - a { > - color: @font-color-for-main ; > - } > - } > -} > - > -#third-level-menu-container { > - display: flex; > - flex-direction: row; > -} > -#working-area { > - width: 100%; > -} > - > -#left-column-menu { > - width: 100px; > -} > - > -.third-lvl-menu { > - background-color: @dark-color-theme; > - position: relative; > - left: -10px; > - border-top-right-radius: 4px; > - border-bottom-right-radius: 4px; > - padding-top: 4px; > - padding-bottom: 4px; > - ul { > - li { > - ul { > - position: relative; > - top: 5px; > - width: @third-lvl-width; > - } > - } > - } > - h2 { > - visibility: hidden; > - } > -} > -.third-level-item:last-child { > - border-bottom: solid 1px @main-color-theme; > -} > - > -.third-level-item { > - min-height: @third-lvl-height; > - background-color: @dark-color-theme; > - padding-right: 3px; > - border-top: solid 1px @main-color-theme; > - > - a, a:visited { > - display: flex; > - justify-content: center; > - align-items: center; > - width: 100%; > - color: @font-color-for-dark !important; > - min-height: @third-lvl-height; > - max-width: @third-lvl-width; > - text-align: center; > - } > -} > -.third-level-item.selected { > - position: relative; > - border-left: solid 9px @main-color-theme; > - a, a:visited { > - background-color: @white; > - color: @dark-color-theme !important; > - } > - :after { > - content: ''; > - position: absolute; > - top: 5px; > - left: 0; > - width: 0; > - height: 0; > - border-top: 10px solid transparent; > - border-left: 10px solid @main-color-theme; > - border-bottom: 10px solid transparent; > - } > -} > - > -.third-level-item a:hover { > - background-color: @main-color-theme; > - color: @font-color-for-main ; > - text-decoration: none; > -} > -/* End 3rd level menu */ > - > - > - > -/* Begin Home Menu for IB section */ > -.fixed-nav-bar { > - position: fixed !important; > - width: 100%; > -} > -#nav-bar-offset { > - height: @app-bar-height ; > -} > - > -#homeGlyph { > - margin-left: 20px; > - height: 20px; > -} > - > -#homePageTitle { > - color: @white; > - font-size: 20px; > - font-weight: bold; > - margin-right: 20px; > - margin-left: 20px; > -} > -.home-menu-list { > - display: flex; > - flex-direction: column; > - align-items: center; > -} > -.hp-applist { > - display: flex; > - flex-direction: row; > - color : @white; > - align-items: center; > - .app-title { > - display: flex; > - align-items: center; > - justify-content: center; > - background-color: @dark-color-theme; > - height: @home-menu-tile-height; > - padding: 5px 10px 5px 10px; > - border-bottom: solid 1px @black; > - span { > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; > - font-size: 15px; > - font-weight: bold; > - width: 110px; > - a { > - display: flex; > - justify-content: center; > - color : @white; > - } > - } > - } > - > - .hp-menu-item { > - display: flex; > - align-items: center; > - justify-content: center; > - position: relative; > - margin-left: 5px; > - margin-right: 5px; > - border: solid 2px @grey; > - border-radius: 8px; > - height: @home-menu-tile-height - 4px; > - min-width: @home-menu-tile-min-width; > - max-width: @home-menu-tile-max-width; > - .menu-link { > - font-size: 10px; > - color: @black; > - padding: 10px; > - } > - .star-link { > - position: absolute; > - height: 25px; > - top: 5px; > - right: 5px; > - } > - } > - > -} > -.hp-applist .app-title span a:hover { > - text-decoration: none; > -} > - > -.hp-menu-item.favoriteItem { > - border: solid 2px @dark-color-theme; > -} > - > -.hp-menu-item:hover { > - box-shadow: 3px 3px 12px @shadow-color; > - a { > - text-decoration: none; > - } > -} > - > -/* End Home Menu for IB section */ > - > -/* Begin Login screenlet */ > -#login-container { > - #content-messages { > - position: relative; > - top: @app-bar-height; > - border-radius: 4px; > - width: 97%; > - &.errorMessage { > - background-color : @color-background-alert !important; > - color: @color-font-alert !important; > - border : solid 1px @color-border-alert !important; > - } > - &.eventMessage { > - background-color : @color-background-success !important; > - color: @color-font-success !important; > - border : solid 1px @color-border-success !important; > - } > - } > -} > -#loginBar { > - position: fixed; > - top:0; > - left: 0; > - width: 100%; > - height: @app-bar-height; > - background-color: @dark-color-theme; > - span { > - background-color: @white; > - color: @main-color-theme; > - border-top-right-radius: 5px; > - border-top-left-radius: 5px; > - font-size: 25px; > - position: relative; > - top: @app-bar-height - 32px; > - left: 15px; > - padding: 5px 10px 5px 10px; > - } > - #company-logo { > - position: absolute; > - } > -} > - > -.login-screenlet { > - display: flex; > - flex-direction: column; > - min-width: 300px; > - max-width: 50em; > - border-radius: 8px !important; > - margin-top: 15%; > - box-shadow: 3px 3px 12px @shadow-color; > - .screenlet-title-bar { > - display: flex; > - align-content: center; > - justify-content: center; > - margin:0; > - padding:0; > - h3{ > - padding-top:2px; > - padding-bottom:2px; > - background-color: @dark-color-theme !important; > - color: @font-color-for-dark; > - height: 100%; > - width:100%; > - text-shadow: none; > - font-size: 25px; > - } > - } > - .screenlet-body { > - background-color: @main-color-theme !important; > - form { > - .button { > - width: 150px; > - border-radius: 4px; > - background: none; > - background-color: @dark-color-theme; > - color: @font-color-for-dark; > - text-shadow: none; > - margin-top: 20px; > - margin-bottom: 10px; > - } > - > - table { > - tr { > - width: 100%; > - .label { > - color: @font-color-for-main; > - width: 25%; > - font-size: 15px; > - } > - input { > - width: 100%; > - } > - .buttontext, > - [type="submit"] { > - width: 150px; > - border-radius: 4px; > - background: none; > - background-color: @dark-color-theme; > - color: @font-color-for-dark; > - text-shadow: none; > - } > - [name="GET_PASSWORD_HINT"] { > - background-color: @font-color-for-dark; > - color: @main-color-theme; > - border: none; > - width: 100%; > - } > - [name="EMAIL_PASSWORD"] { > - background-color: @font-color-for-dark; > - color: @main-color-theme; > - border: none; > - width: 100%; > - } > - td { > - padding: 5px; > - color: @font-color-for-main; > - font-size: 15px; > - font-weight: bold; > - } > - } > - } > - } > - a { > - color: @font-color-for-main; > - } > - } > -} > - > -.login-screenlet .screenlet-title-bar { > - text-align: center; > -} > - > -/* End Login screenlet */ > - > - > -/* --------------------------------------------- */ > -/* Begin Screenlet style */ > -/* --------------------------------------------- */ > -.screenlet-title-bar { > - text-decoration: none ; > - color: @dark-color-theme; > - background-color: @grey; > - height: 1%; /* IE fix */ > - min-height: 1.5em; > - padding:0.8em 0.2em; > -} > - > -.screenlet { > - border-radius: 5px; > - border: solid 1px @grey; > - height: auto !important; > - margin-bottom: 1em; > - overflow: auto; > -} > - > -.screenlet-body { > - background-color: #FFFFFF; > - height: auto !important; > - height: 1%; > - padding: 0.4em; > -} > - > -.screenlet-body div { > - margin: 0.8em 0.1em > -} > - > -/* Special Screenlet style for locale and timezone window */ > -.lists.screenlet { > - margin-left: 25%; > - margin-right: 25%; > - margin-top: 1em; > -} > - > -.lists.screenlet .basic-table tr td { > - text-align: center; > -} > - > -.lists.screenlet .basic-table tr td a { > - display: block; > -} > - > -/* Alternate table header style */ > -.basic-table .header-row-2 th, > -.basic-table .header-row-2 td { > - background-color: @greydark; > - border-bottom: 0; > - border-left: 0.1em solid #aaa; > - border-right: 0.1em solid #888; > - color: #ffffff; > - font-weight: bold; > -} > - > -/* No padding screenlet decorator */ > -.no-padding { > - padding: 0; > - border: none; > -} > - > -.no-padding .h1, > -.no-padding .h2, > -.no-padding .h3, > -.no-paddingr h1, > -.no-padding h2, > -.no-padding h3 { > - padding: 0.7em; > -} > - > -.screenlet-title-bar ul a:hover { > - color: @main-color-theme !important; > - text-decoration: none; > -} > - > - > -/* --------------------------------------------- */ > -/* End Screenlet style */ > -/* --------------------------------------------- */ > - > -/* ---------------------- */ > -/* Table Styles */ > -/* ---------------------- */ > - > -.basic-table { > - background-color: #ffffff; > - color: #000000; > - margin-bottom: 1em; > - width: 100%; > -} > - > -form table, > -form .basic-table, > -.screenlet-body .basic-table { > - background: transparent; > - margin-bottom: 0; > -} > - > -.basic-table tr td { > - /* Style for all cells */ > - padding: 0.8em 0.1em; > - vertical-align: middle; > -} > - > -.basic-table tr .align-bottom { > - vertical-align: bottom; > -} > - > -.basic-table tr .align-top { > - vertical-align: top; > -} > - > -.basic-table tr .label, > -.basic-table tr .group-label { > - /* field labels for forms */ > - font-weight: bold; > - text-align: right; > - padding-right: 1.5em; > - white-space: nowrap; > - width: 1%; > -} > - > -.basic-table tr .group-label { > - /* "header" for field label groups */ > - font-size: 1.2em; > - padding: 2em 1.5em 0 0; > -} > - > -.basic-table tr th, > -.basic-table .header-row { > - font-weight: bold; > - text-align: left; > -} > - > -.basic-table .header-row td { > - border-bottom: 0.1em solid #000000; > -} > - > -.basic-table .header-row td a { > - color: #000000; > -} > - > -.basic-table .alternate-row { > - /* Alternating row style */ > - background-color: #eeeeee; > -} > - > -.basic-table .selected { > - background: #FFFCCF; > -} > - > -.basic-table .alternate-rowSelected { > - background: #FFF55F; > -} > - > -.basic-table .Validate { > - /*Style use by alt-row-style on list*/ > - background: #A0D5F7; > -} > - > -.basic-table .alternate-rowValidate { > - /*Style use by alt-row-style on list*/ > - background: #72A8F2; > -} > - > -.basic-table .Warn { > - /*Style use by alt-row-style on list*/ > - background: #f55C5C; > -} > - > -.basic-table .alternate-rowWarn { > - /*Style use by alt-row-style on list*/ > - background: #FC7455; > -} > - > -.basic-table tr .button-col { > - /* button column style - for the small > - collection of buttons used in lists */ > - vertical-align: top; > - padding: 0.3em; > -} > -.basic-table tr .button-col a, > -.basic-table tr .button-col button, > -.basic-table tr .button-col input[type="reset"], > -.basic-table tr .button-col input[type="submit"], > -.basic-table tr .button-col input[type="button"] { > - -webkit-appearance: none; > - -moz-border-radius: 1em; > - -webkit-border-radius: 1em; > - border-radius: 2px; > - border: 0.1em solid @main-color-theme; > - background-color: @white; > - cursor: pointer; > - color: @main-color-theme; > - display:inline-block; > - font-size: 0.9em; > - font-weight: bold; > - outline: 0; > - overflow: visible; > - padding: 0.1em 0.5em 0.2em 0.5em; > - text-decoration: none; > - width: auto; > - > - /* IE7 */ > - *padding-top: 0.2em; > - *padding-bottom: 0; > - > - &:hover { > - background-color: @main-color-theme; > - color: @white; > - } > -} > - > -.basic-table .collapsed { > - visibility: collapse; > -} > - > -/* Sort field style */ > -.basic-table .header-row-2 th .sort-order-asc, > -.basic-table .header-row-2 td .sort-order-asc{ > - background: url(/images/arrow-gr-up.png) no-repeat right; > - padding-left: 0.5em; > - padding-right: 20px; /* Setting must be in px */ > -} > -.basic-table .header-row-2 th .sort-order-desc, > -.basic-table .header-row-2 td .sort-order-desc{ > - background: url(/images/arrow-gr-dw.png) no-repeat right; > - padding-left: 0.5em; > - padding-right: 20px; /* Setting must be in px */ > -} > -.basic-table .header-row-2 th .sort-order, > -.basic-table .header-row-2 td .sort-order{ > - background: url(/images/arrow-gr.png) no-repeat right; > - padding-left: 0.5em; > - padding-right: 20px; /* Setting must be in px */ > - color:#fff > -} > - > - > -/* --------------------------------------------- */ > -/* Begin Message Info */ > -/* --------------------------------------------- */ > -.count-message { > - display: flex; > - align-items: center; > - justify-content: center; > - min-height:20px; > - min-width: 20px; > - max-height:20px; > - max-width: 20px; > - background: @white; > - font-size:12px; > - font-weight: bold; > - border-radius: 50%; > -} > -.info-message-title { > - min-width:150px; > - margin: 5px; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - font-size: 16px; > - font-weight: bold; > -} > -.message-list { > - position:relative; > - margin-top: 10px; > - box-shadow: 1px 3px 5px @greydark; > - border-radius: 0 5px 5px 0; > - transition: height 2s; > -} > -.message-list-main { > - padding: 5px 15px 5px 15px; > -} > -.message-list-alert { > - background-color: @color-alert; > - border-left : solid 5px @color-alert-dark; > - .count-message { > - color: @color-alert-dark; > - } > -} > -.message-list-success { > - background-color: @color-success; > - border-left: solid 5px @color-success-dark; > - .count-message { > - color: @color-success-dark; > - } > -} > -.message-list-table-container { > - background-color: @white; > - border-radius: 5px; > - overflow: hidden; > - height: 0; > -} > -.info-message-success { > - display: none; > -} > -.info-message-alert { > - display: none; > -} > -table.msg-list { > - width: 100%; > - font-size: 16px; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - padding: 0; > - thead { > - height: 100%; > - background-color: @grey; > - margin: 0; > - padding: 0; > - tr{ > - font-weight: bold; > - border-bottom: solid 1px @black; > - height: 100%; > - background-color: @grey; > - line-height: 30px; > - } > - } > - tbody { > - tr { > - line-height: 25px; > - } > - tr.msg-row-success { > - background-color: @color-success; > - } > - tr.msg-row-alert { > - background-color: @color-alert; > - } > - } > - td { > - padding-left: 5px; > - } > -} > - > -/* --------------------------------------------- */ > -/* End Message Info */ > -/* --------------------------------------------- */ > - > -/* ---------------------- */ > -/* Paginate Style */ > -/* ---------------------- */ > - > -.paginate-bar-nrd { > - display: flex; > - flex-direction: row; > - align-items: center; > - font-size: 15px; > - background-color: @grey; > - padding-left: 10px; > - padding-top: 3px; > - padding-bottom: 3px; > - box-shadow: 0 2px 5px @shadow-color; > - > - ul.paginate-pg-list { > - display: flex; > - flex-direction: row; > - background-color: @white; > - color: @main-color-theme; > - margin-right: 10px; > - border-radius: 8px; > - border: solid 1px @box-border-color; > - height: 18px; > - li { > - display: flex; > - justify-content: center; > - min-width: 17px; > - border-right: solid 1px @box-border-color; > - padding-left: 2px; > - padding-right: 2px; > - height:100%; > - a { > - display: flex; > - justify-content: center; > - align-items: center; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - color: @dark-color-theme; > - height: 100%; > - width: 100%; > - } > - .paginate-disable { > - > - } > - } > - li.selected { > - background-color: @main-color-theme; > - a { > - color: @font-color-for-main; > - } > - } > - li:first-child, li:last-child { > - width: 20px; > - } > - li:first-child { > - border-top-left-radius: 3px; > - border-bottom-left-radius: 3px; > - } > - li:last-child { > - border-right: none; > - border-top-right-radius: 3px; > - border-bottom-right-radius: 3px; > - } > - } > - > -} > -select.paginate-select { > - position: relative; > - background: @white; > - font-size: 16px; > - font-weight: bold; > - border: 1px solid @box-border-color; > - option { > - display: flex; > - justify-self: center; > - font-size: 14px; > - } > -} > - > -.paginate-select-label { > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - font-size: 16px; > - padding-left: 15px; > - padding-right: 15px; > -} > - > -.paginate-information { > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - font-size: 16px; > - padding-left: 15px; > - padding-right: 15px; > -} > - > -ul.paginate-pg-list li:hover{ > - background-color: @main-color-theme; > - a { > - text-decoration: none; > - color: @font-color-for-main; > - } > -} > - > -/* End of Paginate Style */ > -/* ---------------------- */ > - > -/* ------------------------------- */ > -/* List Navigation Style */ > -/* ------------------------------- */ > - > -.nav-pager { > - background-color: @greydark; > - color: @white; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > - font-size: 9px; > - font-weight: bold; > - line-height: 3.5em; > - height: 3.5em; > - margin: 0.5em 0 0.5em 0; > - border-radius: 3px 3px 0 0; > -} > - > -.nav-pager ul { > - display: inline; /* IE Fix */ > -} > - > -.nav-pager ul li { > - float:left; > - vertical-align: middle; > -} > - > -.nav-pager ul li a { > - display: block; > -} > - > -.nav-pager ul a { > - color: @white; > - padding: 0 1em 0 1em; > - text-decoration: none; > -} > - > -.nav-pager ul a:hover { > - background-color: @main-color-theme; > - color: @font-color-for-main; > -} > - > -.nav-pager ul .nav-pagesize, > -.nav-pager ul .nav-page-select, > -.nav-pager ul .nav-displaying { > - padding: 0 1em 0 1em; > -} > - > -.nav-pager ul .nav-first-disabled, > -.nav-pager ul .nav-previous-disabled, > -.nav-pager ul .nav-next-disabled, > -.nav-pager ul .nav-last-disabled { > - padding: 0 1em 0 1em; > -} > - > -.nav-pager ul .nav-first-disabled:hover, > -.nav-pager ul .nav-previous-disabled:hover, > -.nav-pager ul .nav-next-disabled:hover, > -.nav-pager ul .nav-last-disabled:hover { > - cursor: not-allowed; > -} > - > - > -.nav-pager ul .nav-displaying { > - border-right: none; > -} > - > - > -/* ---------------------------- */ > -/* Multi-Column Styles */ > -/* ---------------------------- */ > - > -#column-container { > - margin: auto; > - padding: 1em; > - position: relative; > - min-width: @min-container-width; > -} > - > -#column-container h1, > -#column-container .h1, > -#column-container h2, > -#column-container .h2 { > - margin-bottom: 0.5em; > -} > - > -#column-container h1, > -#column-container .h1 { > - color: #557996; > -} > - > -#column-container .left { > - float: left; > - /* alt: position: absolute; top: 0px; left: 0px; */ > - width: 22em; > - margin-right: 1em; > -} > - > -#column-container .left-larger { > - float: left; > - /* alt: position: absolute; top: 0px; left: 0px; */ > - width: 25em; > - margin-right: 1em; > -} > - > -.lefthalf { > - float: left; > - height: 1%; > - left: 0; > - margin: 0% 1% 1% 0%; > - width: 49%; > -} > - > -.righthalf { > - float: right; > - height: 1%; > - margin: 0 0 1% 1%; > - right: 0; > - width: 49%; > -} > - > -#column-container .right { > - float: right; > - margin-left: 1em; > - width: 22em; > -} > - > -#column-container .leftonly { > - margin-left: 23em; > - width: auto; > -} > - > -#column-container .leftonly-larger { > - margin-left: 26em; > - width: auto; > -} > - > -#column-container .rightonly { > - margin-right: 23em; > - width: auto; > -} > - > -#column-container .center { > - margin-left: 23em; > - margin-right: 23em; > - width: auto; > -} > - > -#column-container .nocolumns { > - width: auto; > -} > - > -/* ---------------------- */ > -/* Button Style */ > -/* ---------------------- */ > - > -.button-bar li.buttontext a, > -a.buttontext, > -a.buttontextbig, > -.smallSubmit, > -.smallSubmit:hover, > -.mediumSubmit, > -.largeSubmit, > -.loginButton, > -.button-style-1 a, > -.button-style-1 ul a, > -.button-style-2 ul a, > -.button-style-2 a, > -.button, > -button, > -input[type="reset"], > -input[type="submit"], > -input[type="button"] { > - -webkit-appearance: none; > - -moz-border-radius: 1.1em; > - -webkit-border-radius: 1.1em; > - border-radius: 2px; > - border: 0.1em solid @main-color-theme; > - background-color: @white; > - cursor: pointer; > - color: @main-color-theme; > - display:inline-block; > - font-size: 1em; > - font-weight: bold; > - outline: 0; > - overflow: visible; > - padding: 0.4em 1em 0.4em; > - text-decoration:none; > - /*text-transform:uppercase;*/ > - width: auto; > - > - /* IE7 */ > - *padding-top: 0.2em; > - *padding-bottom: 0; > - &:hover { > - color: @font-color-for-main; > - background-color: @main-color-theme; > - } > -} > - > - > -/* ---------------------- */ > -/* Footer Style */ > -/* ---------------------- */ > - > -#footer { > - background: @dark-color-theme; > - border-top: 0.1em inset #000; > - padding: 0.5em 0 0.5em 0.5em; > - > - height: @footer-height; > - position: fixed; > - bottom: 0; > - width: 100%; > - display: flex; > - flex-direction: row; > - align-items: center; > - justify-content: space-between; > - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; > - z-index: 10; > - > - span { > - color: @font-color-for-dark; > - padding: 10px; > - } > - > - a { > - color: @font-color-for-dark; > - font-weight: normal; > - } > -} > - > -#footer a:focus { > - text-decoration: underline; > -} > - > -#footer-offset { > - height: @footer-height + 10px; > - width: 100%; > -} > +/* common colors */ > +@black: #000; > +@white: #fff; > +@grey: #e6e6e6; > +@greydark: #929292; > + > +@color-success: #8cff8c; > +@font-color-for-success: @black; > +@color-alert: #ff8c8c; > +@font-color-for-alert: @black; > + > +@color-success-dark: #356e35; > +@font-color-for-success: @black; > +@color-alert-dark: #932f33; > +@font-color-for-alert: @black; > + > +@color-background-alert: #f2dede; > +@color-font-alert: #a94442; > +@color-border-alert: #ebccd1; > + > +@color-background-success: #dff0d8; > +@color-font-success: #3c763d; > +@color-border-success: #d6e9c6; > + > +/* Saphir colors */ > +@blue-dark: #002333; > +@blue-main: #005982; > +@blue-medium: #c7dfff; > +@blue-light: #f1f7ff; > +@blue-light2: #e4f0f5; > + > +/* Ruby colors */ > +@red-dark: #420000; > +@red-main: #bf1616; > +@red-medium: #f7baba; > +@red-light: #fce7e7; > +@red-light2: #fed7c9; > + > +/* Emerald colors */ > +@green-dark: #197948; > +@green-main: #23af9b; > +@green-medium: #7ae3ad; > +@green-light: #e5f9ef; > +@green-light2: #d7f9ef; > + > +/* Amber colors */ > +@amber-dark: #bc4216; > +@amber-main: #f08906; > +@amber-medium: #f5c4b3; > +@amber-light: #fcede8; > +@amber-light2: #fcedcd; > + > +/* Saphir theme */ > +/* > +@main-color-theme : @blue-main; > +@dark-color-theme : @blue-dark; > +@medium-color-theme : @blue-medium; > +@light-color-theme : @blue-light; > +@light2-color-theme : @blue-light2; > +@font-color-for-dark : @grey; > +@font-color-for-main : @white; > +@font-color-for-medium : @dark-color-theme; > +@font-color-for-light : @dark-color-theme; > +@shadow-color : @black; > +@shadow-color-light : @greydark; > +*/ > + > +/* Ruby theme */ > +/* > +@main-color-theme : @red-main; > +@dark-color-theme : @red-dark; > +@medium-color-theme : @red-medium; > +@light-color-theme : @red-light; > +@light2-color-theme : @red-light2; > +@font-color-for-dark : @grey; > +@font-color-for-main : @white; > +@font-color-for-medium : @dark-color-theme; > +@font-color-for-light : @dark-color-theme; > +@shadow-color : @black; > +@shadow-color-light : @greydark; > +/* > + > +/* Emerald theme */ > +/* > +@main-color-theme : @green-main; > +@dark-color-theme : @green-dark; > +@medium-color-theme : @green-medium; > +@light-color-theme : @green-light; > +@light2-color-theme : @green-light2; > +@font-color-for-dark : @white; > +@font-color-for-main : @white; > +@font-color-for-medium : @dark-color-theme; > +@font-color-for-light : @dark-color-theme; > +@shadow-color : @black; > +@shadow-color-light : @greydark; > +*/ > +/* Amber theme */ > +@main-color-theme : @amber-main; > +@dark-color-theme : @amber-dark; > +@medium-color-theme : @amber-medium; > +@light-color-theme : @amber-light; > +@light2-color-theme : @amber-light2; > +@font-color-for-dark : @white; > +@font-color-for-main : @white; > +@font-color-for-medium : @dark-color-theme; > +@font-color-for-light : @dark-color-theme; > +@shadow-color : @black; > +@shadow-color-light : @greydark; > + > + > +@app-bar-height: 60px; > +@sub-app-bar-height: 40px; > +@footer-height: 20px; > +@home-btn-width: 47px; > +@color-line-height: 9px; > + > +@home-menu-tile-height: 80px; > +@home-menu-tile-min-width: 100px; > +@home-menu-tile-max-width: 100px; > + > +@third-lvl-height: 80px; > +@third-lvl-width : 100px; > +@min-screen : 1170px; > +@min-container-width: 1130px; > + > +@box-border-color: #d7d7d7; > + > +@font-face { > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + src: url('fonts/quicksand/quicksandbold.otf'); > + font-weight: normal; > + font-style: normal; > +} > + > +@font-face { > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + src: url('fonts/quicksand/quicksandbold.otf'); > + font-weight: bold; > + font-style: normal; > +} > + > +/* ---------------------------------- */ > +/* Begin special checkbox type switch */ > +/* ---------------------------------- */ > + > +[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox { > + display: none; > +} > + > +[type="checkbox"]:not(:checked).nrd-chkbox + label, > +[type="checkbox"]:checked.nrd-chkbox + label{ > + cursor: pointer; > +} > +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, > +[type="checkbox"]:checked.nrd-chkbox + label:before{ > + content: ""; > + width: 150px; > + min-width: 150px; > + background-color: @light-color-theme; > + padding: 2px 20px 2px 20px; > + border-radius: 8px 8px 8px 8px; > + > + cursor: pointer; > +} > + > +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, > +[type="checkbox"]:checked.nrd-chkbox + label:after{ > + content: ""; > + position: relative; > + left:-35px; > + background-color: @dark-color-theme; > + min-height: 10px; > + min-width: 10px; > + padding-left: 4px; > + padding-right: 5px; > + border-radius: 8px 8px 8px 8px; > + transition: all .2s; > +} > + > +[type="checkbox"]:checked.nrd-chkbox + label:after{ > + position: relative; > + left: -15px; > + transition: all .2s; > +} > +/* ---------------------------------- */ > +/* End special checkbox type switch */ > +/* ---------------------------------- */ > + > +/* ---------------------------------- */ > +/* Begin square Checkbox */ > +/* ---------------------------------- */ > + > +[type="checkbox"]:not(:checked).nrd-square-chkbox, > +[type="checkbox"]:checked.nrd-square-chkbox{ > + position: absolute; > + left: -9999px; > +} > + > +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, > +[type="checkbox"]:checked.nrd-square-chkbox + label{ > + content: ''; > + padding-left: 35px; > + position: relative; > + cursor: pointer; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + font-size: 12px; > + > +} > +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, > +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ > + content: ''; > + position: absolute; > + left:10px; > + top: -4px; > + width: 17px; > + height: 17px; /* dim. de la case */ > + border: 1px solid #aaa; > + background: @light-color-theme; > + border-radius: 2px; > +} > + > +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { > + background: @light-color-theme; > +} > +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ > + background: @main-color-theme; > +} > + > +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, > +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ > + content: 'â'; > + position: absolute; > + top: -4px; > + left: 14px; > + font-size: 16px; > + color: @font-color-for-main; > + transition: all .2s; > +} > +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { > + opacity: 0; > + transform: scale(0); > +} > +[type="checkbox"]:checked.nrd-square-chkbox + label:after { > + opacity: 1; > + transform: scale(1); > +} > +/* ---------------------------------*/ > +/* End square Checkbox */ > +/* ---------------------------------*/ > + > +/* ---------------------------------*/ > +/* Begin class content mgmt */ > +/* ---------------------------------*/ > + > + > +.flex-row { > + display: flex; > + flex-direction: row !important; > +} > +.flex-column { > + display: flex; > + flex-direction: column; > +} > + > +.col-width-1 { > + width: 10%; > +} > +.col-width-2 { > + width: 20%; > +} > +.col-width-3 { > + width: 30%; > +} > +.col-width-4 { > + width: 40%; > +} > +.col-width-5 { > + width: 50%; > +} > +.col-width-6 { > + width: 60%; > +} > +.col-width-7 { > + width: 70%; > +} > +.col-width-8 { > + width: 80%; > +} > +.col-width-9 { > + width: 90%; > +} > +.col-width-10 { > + width: 100%; > +} > + > +.align-v-center { > + display:flex; > + align-items: center; > +} > + > +.align-h-center { > + display:flex; > + justify-content: center; > +} > + > +/* ---------------------------------*/ > +/* End class content mgmt */ > +/* ---------------------------------*/ > + > + > +/* ---------------------------------- */ > +/* Begin btn-sort */ > +/* ---------------------------------- */ > + > +.btn-sort { > + position: relative; > + top: -6px; > + border:none; > + background:none; > + border-radius: 0; > + margin-left:5px; > +} > + > +.btn-sort:before{ > + content: ''; > + position: absolute; > + left: -1px; > + width: 0; > + height: 0; > + border-right: 10px solid transparent; > + border-bottom: 10px solid @greydark; > + border-left: 10px solid transparent; > +} > + > +.btn-sort:after{ > + content: ''; > + position: absolute; > + right: -1px; > + width: 0; > + height: 0; > + border-right: 10px solid transparent; > + border-top: 10px solid @greydark; > + border-left: 10px solid transparent; > + @media screen and (max-width: 1349px) { > + right: -5px; > + } > +} > + > +.btn-sort.btn-sort-asc:before{ > + border-bottom: 10px solid @main-color-theme; > +} > + > +.btn-sort.btn-sort-desc:after{ > + border-top: 10px solid @main-color-theme; > +} > + > +/* ---------------------------------- */ > +/* End btn-sort */ > +/* ---------------------------------- */ > + > + > +/* ---------------------------------- */ > +/* Begin defaut colour class */ > +/* ---------------------------------- */ > + > +.dark-color { > + background-color: @dark-color-theme !important; > + color: @font-color-for-dark !important; > +} > +.main-color { > + background-color: @main-color-theme !important; > + color: @font-color-for-main !important; > +} > +.medium-color { > + background-color: @medium-color-theme !important; > + color: @font-color-for-medium !important; > +} > +.light-color { > + background-color: @light-color-theme !important; > + color: @font-color-for-light !important; > +} > +.light2-color { > + background-color: @light2-color-theme !important; > + color: @font-color-for-light !important; > +} > + > +.grey-color { > + background-color: @grey !important; > +} > +.darkgrey-color { > + background-color: @greydark !important; > +} > + > +/* begin lookup widget */ > +.ui-dialog { > + opacity: 1; > + z-index: 50; > +} > + > +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { > + background: none !important; > + background-color: @dark-color-theme !important; > + button { > + background: none; > + background-color: @light-color-theme; > + } > +} > +/* end lookup widget */ > + > +.main-bar-label { > + color: @light-color-theme; > + padding-left: 3px; > + padding-right: 6px; > + font-size: 15px; > + font-weight: bold; > +} > + > +#company-logo { > + right: 10px; > + top: 2px; > + background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover; > + min-height: 50px; > + min-width: 50px; > + margin-right: 15px; > + align-self: center; > + @media screen and (min-width : 1232px) { > + min-height: 50px; > + min-width: 129px; > + background: url("images/ofbiz-white.svg") no-repeat left top / cover; > + } > +} > + > +.modal-screen { > + visibility: hidden; > + display: flex; > + flex-direction: column; > + background-color: @grey; > + opacity: .93; > + position: fixed; > + top: 0; > + left: 0; > + height: 100%; > + width: 100%; > + z-index: 9999; > +} > + > +.modal-box{ > + background-color: @white; > + opacity: 1; > + margin: 10%; > + border-radius: 10px; > + border: solid 2px @main-color-theme; > + padding : 10px 40px 10px 40px; > + .modal-header { > + position: relative; > + display: flex; > + flex-direction: row; > + h2 { > + font-size: 25px; > + font-weight: normal; > + color: @main-color-theme; > + } > + .btn-close-nrd { > + position: absolute; > + right: 0; > + display: flex; > + justify-content: center; > + border: solid 1px @main-color-theme; > + border-radius: 5px; > + color: @main-color-theme; > + font-size: 25px; > + height: 30px; > + width: 30px; > + text-decoration: none !important; > + } > + } > + .modal-body { > + p { > + font-size: 20px; > + } > + } > + .modal-footer { > + position: relative; > + height: 35px; > + display: flex; > + justify-content: flex-end; > + .btn-nrd { > + background: none; > + border: none; > + text-shadow: none; > + opacity: 1; > + margin-right: 10px; > + font-size: 20px; > + padding: 5px; > + border-radius: 8px; > + } > + .btn-nrd-main { > + background-color: @main-color-theme; > + color: @white; > + } > + .btn-nrd-std { > + background-color: @white; > + color: @main-color-theme; > + border: solid 1px @main-color-theme !important; > + } > + } > +} > +.btn-nrd:hover { > + box-shadow: 5px 5px 3px 0 @black; > +} > + > +.btn-nrd-std:hover { > + background-color: @main-color-theme !important; > + color: @white !important; > + border: solid 1px @main-color-theme !important; > +} > + > +.btn-close-nrd:hover { > + background-color: @main-color-theme !important; > + color: @white !important; > +} > + > +.list-nrd { > + border: solid 2px @main-color-theme; > + border-bottom-left-radius: 10px; > + border-bottom-right-radius: 10px; > + display: flex; > + flex-direction: column; > + margin-top: 15px; > + margin-bottom: 15px; > + .title-list-nrd { > + background-color: @main-color-theme; > + color : @white; > + font-size: 20px; > + font-weight: bold; > + padding-left: 5px; > + } > + > + li { > + position: relative; > + display: flex; > + flex-direction: row; > + font-size: 20px; > + padding-left: 5px; > + padding-top: 2px; > + padding-bottom: 2px; > + margin-bottom: 3px; > + a { > + color: @main-color-theme; > + } > + span { > + position: absolute; > + right: 0; > + color: @main-color-theme; > + font-size: 30px; > + } > + } > +} > +li.line-odd { > + background-color: @light-color-theme; > +} > + > +#user-avatar { > + height: 40px; > + width: 40px; > + padding: 2px; > + > + align-self: center; > + > + :hover { > + cursor: pointer; > + } > + img { > + max-height: 40px; > + max-width: 40px; > + position: relative; > + top: -2px; > + padding: 2px; > + background-color: @white; > + border-radius: 2px; > + } > +} > + > +#main-navigation-bar { > + position: relative; > + width: 100%; > + min-width: @min-container-width; > + display: flex; > + flex-direction: row; > + align-items: center; > + justify-content: space-between; > + font-family: Quicksand,sans-serif; > + background-color: @dark-color-theme; > + z-index: 5; > + height: @app-bar-height; > +} > +#main-nav-bar-left { > + position: relative; > + display: flex; > + align-items: center; > +} > +#main-nav-bar-right { > + position: relative; > + display: flex; > + align-items: center; > + padding-right: 15px; > +} > + > +.app-btn{ > + height: @app-bar-height; > + background-color: @dark-color-theme; > + display: flex; > + align-items: center; > + flex-direction: row; > + margin-right: 2px; > + margin-left: 2px; > + a { > + padding:10px; > + color: @font-color-for-dark; > + font-size: 1.4em !important; > + } > +} > + > +.app-btn a:visited { > + color: @font-color-for-dark; > +} > + > +.app-btn:hover{ > + position: relative; > + top: -6px; > + background-color: @main-color-theme; > + border-bottom-left-radius: 5px; > + border-bottom-right-radius: 5px; > + box-shadow: 1px 1px 12px @shadow-color; > + a { > + position: relative; > + top: 6px; > + color : @font-color-for-main; > + } > +} > +.app-btn.selected:hover { > + background-color: @dark-color-theme; > + box-shadow: none; > + top:0; > +} > + > +.app-btn a:hover { > + text-decoration: none; > +} > +#app-selected { > + position: relative; > + display: flex; > + flex-direction: column; > + align-items: center; > + justify-content: center; > + background-color: @main-color-theme; > + box-shadow: 1px -2px 12px @shadow-color; > + z-index: 0; > + opacity: .99; > + border-top-left-radius : 8px ; > + border-top-right-radius : 8px ; > + a { > + position: relative; > + top: 3px; > + color: @font-color-for-main; > + } > +} > +.app-btn.selected a:hover { > + text-decoration: none; > +} > + > +#app-bar-line { > + position: relative; > + width: 100%; > + min-width: @min-container-width; > + height: @color-line-height; > + background-color: @main-color-theme; > + box-shadow: 2px 2px 5px @shadow-color; > +} > +#color-add { > + width: 150px; > + background-color: @main-color-theme; > + height: @color-line-height; > + z-index: 20; > + position: relative; > + top: @color-line-height; > +} > + > +#more-app { > + position: relative; > + display: flex; > + align-items: center; > + justify-content: center; > + font-weight: bold; > + font-size: 1.4em !important; > + width: 40px; > + height: @app-bar-height; > + color: @font-color-for-dark; > +} > +#more-app:hover { > + background-color: @main-color-theme; > + text-decoration: none; > +} > +#more-app:hover #more-app-list { > + display: block; > +} > +#more-app.selected { > + background-color: @main-color-theme; > +} > + > +#more-app-list { > + display: none; > + position: absolute; > + top: @app-bar-height; > + left: -20px; > + background-color: @dark-color-theme; > + z-index: 10; > + border: solid 4px @main-color-theme; > + border-top-width: @color-line-height; > + border-bottom-left-radius: 4px; > + border-bottom-right-radius: 4px; > + li { > + padding-left : 4px; > + padding-right: 4px; > + } > + > + a { > + color: @font-color-for-dark; > + font-size: 15px; > + } > + > + :hover { > + background-color: @medium-color-theme; > + a { > + box-shadow: none; > + color: @dark-color-theme; > + } > + a:hover{ > + box-shadow: none; > + text-decoration: none; > + border-radius: 0; > + } > + } > + > + li.selected { > + background-color: @main-color-theme; > + a { > + color: @font-color-for-main; > + } > + a:hover { > + color: @font-color-for-main; > + background-color: @main-color-theme; > + } > + } > +} > + > +#homeButton { > + display: flex; > + //visibility: hidden; > + align-items: center; > + justify-content: center; > + background-color:@grey; > + border: none; > + border-radius : 0; > + > + height: @app-bar-height; > + width : @home-btn-width; > + text-decoration: none; > + img { > + height: 25px; > + transition: all .2s ease-in-out; > + } > +} > + > +#homeButton:hover img { > + transform: scale(1.1); > +} > + > +#app-bar-list { > + display: flex; > +} > + > +#user-details { > + position: absolute; > + right: 20px; > + top : 62px; > + background-color: @dark-color-theme; > + color : @font-color-for-dark; > + font-size: 15px; > + font-weight: bold; > + padding-top: 5px; > + padding-bottom: 10px; > + z-index: 15; > + box-shadow: 3px 3px 12px @shadow-color; > + border-radius: 3px; > + transition: all .1s ease-in-out; > + > + img { > + height: 50px; > + background-color: @white; > + padding: 4px; > + border-radius : 3px; > + margin-left: 10px; > + margin-right: 5px; > + } > + #logout { > + background-color: @white; > + color: @dark-color-theme !important; > + border-radius: 2px; > + :hover { > + text-decoration: none; > + } > + } > +} > + > +#user-details:after{ > + content: ''; > + position: absolute; > + top: -10px; > + right: 5px; > + width: 0; > + height: 0; > + border-right: 10px solid transparent; > + border-bottom: 10px solid @dark-color-theme; > + border-left: 10px solid transparent; > +} > + > +a.user-pref-btn { > + margin-top: 15px; > + background-color: @dark-color-theme; > + margin-left: 10px; > + margin-right: 10px; > + padding-top: 2px; > + padding-bottom: 2px; > + display: flex; > + justify-content: center; > + color: @font-color-for-dark !important; > + :hover { > + text-decoration: none; > + } > +} > + > +#user-name { > + display: flex; > + flex-direction: column; > + justify-content: center; > + align-content: center; > + padding-left : 5px; > + padding-right : 5px; > + span { > + min-width: 100px; > + padding-bottom : 5px; > + padding-top : 5px; > + } > +} > + > +#user-row1 { > + display: flex; > + flex-direction: row; > + justify-content: center; > + #user-lang { > + display: flex; > + flex-direction: row; > + justify-content: center; > + align-content: center; > + padding-left: 10px; > + padding-right: 10px; > + span { > + min-width: 30px; > + color: @font-color-for-dark; > + } > + } > +} > + > +.appbar-btn-img { > + height: @app-bar-height - 40px; > +} > + > +#help-btn { > + font-size: 10px; > + min-width: 20px; > + margin-right: 15px; > +} > +/* Begin sub Menu section */ > + > +#app-navigation { > + height: @sub-app-bar-height; > + border-right: solid 1px @black; > + border-bottom: solid 1px @black; > + width: 100%; > + min-width: @min-container-width; > + h2 { > + display: none; > + } > + ul { > + display: flex; > + flex-direction: row; > + background-color: @grey; > + flex-grow: 1; > + } > + ul li ul li { > + border-left: solid 1px @black; > + height: @sub-app-bar-height; > + display: flex; > + align-items: center; > + justify-items: center; > + justify-content: center; > + min-width: 75px; > + padding-left: 6px; > + padding-right: 6px; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + border-bottom: solid 1px @black; > + font-size: 12px; > + @media screen and (max-width: 1500px) { > + font-size: 10px; > + min-width: 65px; > + } > + @media screen and (max-width: 1300px) { > + font-size: 10px; > + min-width: 50px; > + } > + a { > + display: flex; > + justify-content: center; > + align-items: center; > + text-align: center; > + height: 100%; > + width: 100%; > + text-decoration: none; > + } > + } > +} > + > +#app-navigation ul li ul li:last-child { > + border-right: solid 1px @black; > +} > + > +#app-navigation ul li ul li:hover { > + background-color: @main-color-theme; > + min-height: @sub-app-bar-height; > + position: relative; > + //top: -1px; > + a { > + color: @white; > + text-decoration: none; > + } > +} > +#app-navigation ul li ul li.selected:hover { > + a { > + color: @black !important; > + } > +} > + > +#app-navigation ul li ul li.selected { > + background-color: @white; > + position: relative; > + top: 1px; > + height: @sub-app-bar-height + 1px; > + border-top-right-radius: 2px; > + border-top-left-radius: 2px; > + border-bottom: none; > + > + :after { > + content: ''; > + position: absolute; > + top: -2px; > + left: 5px; > + width: 0; > + height: 0; > + border-right: 10px solid transparent; > + border-top: 10px solid @main-color-theme; > + border-left: 10px solid transparent; > + } > + > +} > + > + > +/* End sub Menu section */ > + > +/* begin sub Menu section 3rd level */ > + > +.button-bar.tab-bar { > + ul li ul li { > + border: solid 1px @grey; > + border-radius: 4px; > + a { > + width: 100%; > + height: 100%; > + } > + } > + li.selected{ > + background-color: @main-color-theme; > + a{ > + color: @font-color-for-main; > + } > + } > + ul li ul li:hover { > + background-color: @main-color-theme; > + a { > + color: @font-color-for-main ; > + } > + } > +} > + > +#third-level-menu-container { > + display: flex; > + flex-direction: row; > +} > +#working-area { > + width: 100%; > +} > + > +#left-column-menu { > + width: 100px; > +} > + > +.third-lvl-menu { > + background-color: @dark-color-theme; > + position: relative; > + left: -10px; > + border-top-right-radius: 4px; > + border-bottom-right-radius: 4px; > + padding-top: 4px; > + padding-bottom: 4px; > + ul { > + li { > + ul { > + position: relative; > + top: 5px; > + width: @third-lvl-width; > + } > + } > + } > + h2 { > + visibility: hidden; > + } > +} > +.third-level-item:last-child { > + border-bottom: solid 1px @main-color-theme; > +} > + > +.third-level-item { > + min-height: @third-lvl-height; > + background-color: @dark-color-theme; > + padding-right: 3px; > + border-top: solid 1px @main-color-theme; > + > + a, a:visited { > + display: flex; > + justify-content: center; > + align-items: center; > + width: 100%; > + color: @font-color-for-dark !important; > + min-height: @third-lvl-height; > + max-width: @third-lvl-width; > + text-align: center; > + } > +} > +.third-level-item.selected { > + position: relative; > + border-left: solid 9px @main-color-theme; > + a, a:visited { > + background-color: @white; > + color: @dark-color-theme !important; > + } > + :after { > + content: ''; > + position: absolute; > + top: 5px; > + left: 0; > + width: 0; > + height: 0; > + border-top: 10px solid transparent; > + border-left: 10px solid @main-color-theme; > + border-bottom: 10px solid transparent; > + } > +} > + > +.third-level-item a:hover { > + background-color: @main-color-theme; > + color: @font-color-for-main ; > + text-decoration: none; > +} > +/* End 3rd level menu */ > + > + > + > +/* Begin Home Menu for IB section */ > +.fixed-nav-bar { > + position: fixed !important; > + width: 100%; > +} > +#nav-bar-offset { > + height: @app-bar-height ; > +} > + > +#homeGlyph { > + margin-left: 20px; > + height: 20px; > +} > + > +#homePageTitle { > + color: @white; > + font-size: 20px; > + font-weight: bold; > + margin-right: 20px; > + margin-left: 20px; > +} > +.home-menu-list { > + display: flex; > + flex-direction: column; > + align-items: center; > +} > +.hp-applist { > + display: flex; > + flex-direction: row; > + color : @white; > + align-items: center; > + .app-title { > + display: flex; > + align-items: center; > + justify-content: center; > + background-color: @dark-color-theme; > + height: @home-menu-tile-height; > + padding: 5px 10px 5px 10px; > + border-bottom: solid 1px @black; > + span { > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; > + font-size: 15px; > + font-weight: bold; > + width: 110px; > + a { > + display: flex; > + justify-content: center; > + color : @white; > + } > + } > + } > + > + .hp-menu-item { > + display: flex; > + align-items: center; > + justify-content: center; > + position: relative; > + margin-left: 5px; > + margin-right: 5px; > + border: solid 2px @grey; > + border-radius: 8px; > + height: @home-menu-tile-height - 4px; > + min-width: @home-menu-tile-min-width; > + max-width: @home-menu-tile-max-width; > + .menu-link { > + font-size: 10px; > + color: @black; > + padding: 10px; > + } > + .star-link { > + position: absolute; > + height: 25px; > + top: 5px; > + right: 5px; > + } > + } > + > +} > +.hp-applist .app-title span a:hover { > + text-decoration: none; > +} > + > +.hp-menu-item.favoriteItem { > + border: solid 2px @dark-color-theme; > +} > + > +.hp-menu-item:hover { > + box-shadow: 3px 3px 12px @shadow-color; > + a { > + text-decoration: none; > + } > +} > + > +/* End Home Menu for IB section */ > + > +/* Begin Login screenlet */ > +#login-container { > + #content-messages { > + position: relative; > + top: @app-bar-height; > + border-radius: 4px; > + width: 97%; > + &.errorMessage { > + background-color : @color-background-alert !important; > + color: @color-font-alert !important; > + border : solid 1px @color-border-alert !important; > + } > + &.eventMessage { > + background-color : @color-background-success !important; > + color: @color-font-success !important; > + border : solid 1px @color-border-success !important; > + } > + } > +} > +#loginBar { > + position: fixed; > + top:0; > + left: 0; > + width: 100%; > + height: @app-bar-height; > + background-color: @dark-color-theme; > + span { > + background-color: @white; > + color: @main-color-theme; > + border-top-right-radius: 5px; > + border-top-left-radius: 5px; > + font-size: 25px; > + position: relative; > + top: @app-bar-height - 32px; > + left: 15px; > + padding: 5px 10px 5px 10px; > + } > + #company-logo { > + position: absolute; > + } > +} > + > +.login-screenlet { > + display: flex; > + flex-direction: column; > + min-width: 300px; > + max-width: 50em; > + border-radius: 8px !important; > + margin-top: 15%; > + box-shadow: 3px 3px 12px @shadow-color; > + .screenlet-title-bar { > + display: flex; > + align-content: center; > + justify-content: center; > + margin:0; > + padding:0; > + h3{ > + padding-top:2px; > + padding-bottom:2px; > + background-color: @dark-color-theme !important; > + color: @font-color-for-dark; > + height: 100%; > + width:100%; > + text-shadow: none; > + font-size: 25px; > + } > + } > + .screenlet-body { > + background-color: @main-color-theme !important; > + form { > + .button { > + width: 150px; > + border-radius: 4px; > + background: none; > + background-color: @dark-color-theme; > + color: @font-color-for-dark; > + text-shadow: none; > + margin-top: 20px; > + margin-bottom: 10px; > + } > + > + table { > + tr { > + width: 100%; > + .label { > + color: @font-color-for-main; > + width: 25%; > + font-size: 15px; > + } > + input { > + width: 100%; > + } > + .buttontext, > + [type="submit"] { > + width: 150px; > + border-radius: 4px; > + background: none; > + background-color: @dark-color-theme; > + color: @font-color-for-dark; > + text-shadow: none; > + } > + [name="GET_PASSWORD_HINT"] { > + background-color: @font-color-for-dark; > + color: @main-color-theme; > + border: none; > + width: 100%; > + } > + [name="EMAIL_PASSWORD"] { > + background-color: @font-color-for-dark; > + color: @main-color-theme; > + border: none; > + width: 100%; > + } > + td { > + padding: 5px; > + color: @font-color-for-main; > + font-size: 15px; > + font-weight: bold; > + } > + } > + } > + } > + a { > + color: @font-color-for-main; > + } > + } > +} > + > +.login-screenlet .screenlet-title-bar { > + text-align: center; > +} > + > +/* End Login screenlet */ > + > + > +/* --------------------------------------------- */ > +/* Begin Screenlet style */ > +/* --------------------------------------------- */ > +.screenlet-title-bar { > + text-decoration: none ; > + color: @dark-color-theme; > + background-color: @grey; > + height: 1%; /* IE fix */ > + min-height: 1.5em; > + padding:0.8em 0.2em; > +} > + > +.screenlet { > + border-radius: 5px; > + border: solid 1px @grey; > + height: auto !important; > + margin-bottom: 1em; > + overflow: auto; > +} > + > +.screenlet-body { > + background-color: #FFFFFF; > + height: auto !important; > + height: 1%; > + padding: 0.4em; > +} > + > +.screenlet-body div { > + margin: 0.8em 0.1em > +} > + > +/* Special Screenlet style for locale and timezone window */ > +.lists.screenlet { > + margin-left: 25%; > + margin-right: 25%; > + margin-top: 1em; > +} > + > +.lists.screenlet .basic-table tr td { > + text-align: center; > +} > + > +.lists.screenlet .basic-table tr td a { > + display: block; > +} > + > +/* Alternate table header style */ > +.basic-table .header-row-2 th, > +.basic-table .header-row-2 td { > + background-color: @greydark; > + border-bottom: 0; > + border-left: 0.1em solid #aaa; > + border-right: 0.1em solid #888; > + color: #ffffff; > + font-weight: bold; > +} > + > +/* No padding screenlet decorator */ > +.no-padding { > + padding: 0; > + border: none; > +} > + > +.no-padding .h1, > +.no-padding .h2, > +.no-padding .h3, > +.no-paddingr h1, > +.no-padding h2, > +.no-padding h3 { > + padding: 0.7em; > +} > + > +.screenlet-title-bar ul a:hover { > + color: @main-color-theme !important; > + text-decoration: none; > +} > + > + > +/* --------------------------------------------- */ > +/* End Screenlet style */ > +/* --------------------------------------------- */ > + > +/* ---------------------- */ > +/* Table Styles */ > +/* ---------------------- */ > + > +.basic-table { > + background-color: #ffffff; > + color: #000000; > + margin-bottom: 1em; > + width: 100%; > +} > + > +form table, > +form .basic-table, > +.screenlet-body .basic-table { > + background: transparent; > + margin-bottom: 0; > +} > + > +.basic-table tr td { > + /* Style for all cells */ > + padding: 0.8em 0.1em; > + vertical-align: middle; > +} > + > +.basic-table tr .align-bottom { > + vertical-align: bottom; > +} > + > +.basic-table tr .align-top { > + vertical-align: top; > +} > + > +.basic-table tr .label, > +.basic-table tr .group-label { > + /* field labels for forms */ > + font-weight: bold; > + text-align: right; > + padding-right: 1.5em; > + white-space: nowrap; > + width: 1%; > +} > + > +.basic-table tr .group-label { > + /* "header" for field label groups */ > + font-size: 1.2em; > + padding: 2em 1.5em 0 0; > +} > + > +.basic-table tr th, > +.basic-table .header-row { > + font-weight: bold; > + text-align: left; > +} > + > +.basic-table .header-row td { > + border-bottom: 0.1em solid #000000; > +} > + > +.basic-table .header-row td a { > + color: #000000; > +} > + > +.basic-table .alternate-row { > + /* Alternating row style */ > + background-color: #eeeeee; > +} > + > +.basic-table .selected { > + background: #FFFCCF; > +} > + > +.basic-table .alternate-rowSelected { > + background: #FFF55F; > +} > + > +.basic-table .Validate { > + /*Style use by alt-row-style on list*/ > + background: #A0D5F7; > +} > + > +.basic-table .alternate-rowValidate { > + /*Style use by alt-row-style on list*/ > + background: #72A8F2; > +} > + > +.basic-table .Warn { > + /*Style use by alt-row-style on list*/ > + background: #f55C5C; > +} > + > +.basic-table .alternate-rowWarn { > + /*Style use by alt-row-style on list*/ > + background: #FC7455; > +} > + > +.basic-table tr .button-col { > + /* button column style - for the small > + collection of buttons used in lists */ > + vertical-align: top; > + padding: 0.3em; > +} > +.basic-table tr .button-col a, > +.basic-table tr .button-col button, > +.basic-table tr .button-col input[type="reset"], > +.basic-table tr .button-col input[type="submit"], > +.basic-table tr .button-col input[type="button"] { > + -webkit-appearance: none; > + -moz-border-radius: 1em; > + -webkit-border-radius: 1em; > + border-radius: 2px; > + border: 0.1em solid @main-color-theme; > + background-color: @white; > + cursor: pointer; > + color: @main-color-theme; > + display:inline-block; > + font-size: 0.9em; > + font-weight: bold; > + outline: 0; > + overflow: visible; > + padding: 0.1em 0.5em 0.2em 0.5em; > + text-decoration: none; > + width: auto; > + > + &:hover { > + background-color: @main-color-theme; > + color: @white; > + } > +} > + > +.basic-table .collapsed { > + visibility: collapse; > +} > + > +/* Sort field style */ > +.basic-table .header-row-2 th .sort-order-asc, > +.basic-table .header-row-2 td .sort-order-asc{ > + background: url(/images/arrow-gr-up.png) no-repeat right; > + padding-left: 0.5em; > + padding-right: 20px; /* Setting must be in px */ > +} > +.basic-table .header-row-2 th .sort-order-desc, > +.basic-table .header-row-2 td .sort-order-desc{ > + background: url(/images/arrow-gr-dw.png) no-repeat right; > + padding-left: 0.5em; > + padding-right: 20px; /* Setting must be in px */ > +} > +.basic-table .header-row-2 th .sort-order, > +.basic-table .header-row-2 td .sort-order{ > + background: url(/images/arrow-gr.png) no-repeat right; > + padding-left: 0.5em; > + padding-right: 20px; /* Setting must be in px */ > + color:#fff > +} > + > + > +/* --------------------------------------------- */ > +/* Begin Message Info */ > +/* --------------------------------------------- */ > +.count-message { > + display: flex; > + align-items: center; > + justify-content: center; > + min-height:20px; > + min-width: 20px; > + max-height:20px; > + max-width: 20px; > + background: @white; > + font-size:12px; > + font-weight: bold; > + border-radius: 50%; > +} > +.info-message-title { > + min-width:150px; > + margin: 5px; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + font-size: 16px; > + font-weight: bold; > +} > +.message-list { > + position:relative; > + margin-top: 10px; > + box-shadow: 1px 3px 5px @greydark; > + border-radius: 0 5px 5px 0; > + transition: height 2s; > +} > +.message-list-main { > + padding: 5px 15px 5px 15px; > +} > +.message-list-alert { > + background-color: @color-alert; > + border-left : solid 5px @color-alert-dark; > + .count-message { > + color: @color-alert-dark; > + } > +} > +.message-list-success { > + background-color: @color-success; > + border-left: solid 5px @color-success-dark; > + .count-message { > + color: @color-success-dark; > + } > +} > +.message-list-table-container { > + background-color: @white; > + border-radius: 5px; > + overflow: hidden; > + height: 0; > +} > +.info-message-success { > + display: none; > +} > +.info-message-alert { > + display: none; > +} > +table.msg-list { > + width: 100%; > + font-size: 16px; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + padding: 0; > + thead { > + height: 100%; > + background-color: @grey; > + margin: 0; > + padding: 0; > + tr{ > + font-weight: bold; > + border-bottom: solid 1px @black; > + height: 100%; > + background-color: @grey; > + line-height: 30px; > + } > + } > + tbody { > + tr { > + line-height: 25px; > + } > + tr.msg-row-success { > + background-color: @color-success; > + } > + tr.msg-row-alert { > + background-color: @color-alert; > + } > + } > + td { > + padding-left: 5px; > + } > +} > + > +/* --------------------------------------------- */ > +/* End Message Info */ > +/* --------------------------------------------- */ > + > +/* ---------------------- */ > +/* Paginate Style */ > +/* ---------------------- */ > + > +.paginate-bar-nrd { > + display: flex; > + flex-direction: row; > + align-items: center; > + font-size: 15px; > + background-color: @grey; > + padding-left: 10px; > + padding-top: 3px; > + padding-bottom: 3px; > + box-shadow: 0 2px 5px @shadow-color; > + > + ul.paginate-pg-list { > + display: flex; > + flex-direction: row; > + background-color: @white; > + color: @main-color-theme; > + margin-right: 10px; > + border-radius: 8px; > + border: solid 1px @box-border-color; > + height: 18px; > + li { > + display: flex; > + justify-content: center; > + min-width: 17px; > + border-right: solid 1px @box-border-color; > + padding-left: 2px; > + padding-right: 2px; > + height:100%; > + a { > + display: flex; > + justify-content: center; > + align-items: center; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + color: @dark-color-theme; > + height: 100%; > + width: 100%; > + } > + .paginate-disable { > + > + } > + } > + li.selected { > + background-color: @main-color-theme; > + a { > + color: @font-color-for-main; > + } > + } > + li:first-child, li:last-child { > + width: 20px; > + } > + li:first-child { > + border-top-left-radius: 3px; > + border-bottom-left-radius: 3px; > + } > + li:last-child { > + border-right: none; > + border-top-right-radius: 3px; > + border-bottom-right-radius: 3px; > + } > + } > + > +} > +select.paginate-select { > + position: relative; > + background: @white; > + font-size: 16px; > + font-weight: bold; > + border: 1px solid @box-border-color; > + option { > + display: flex; > + justify-self: center; > + font-size: 14px; > + } > +} > + > +.paginate-select-label { > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + font-size: 16px; > + padding-left: 15px; > + padding-right: 15px; > +} > + > +.paginate-information { > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + font-size: 16px; > + padding-left: 15px; > + padding-right: 15px; > +} > + > +ul.paginate-pg-list li:hover{ > + background-color: @main-color-theme; > + a { > + text-decoration: none; > + color: @font-color-for-main; > + } > +} > + > +/* End of Paginate Style */ > +/* ---------------------- */ > + > +/* ------------------------------- */ > +/* List Navigation Style */ > +/* ------------------------------- */ > + > +.nav-pager { > + background-color: @greydark; > + color: @white; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; > + font-size: 9px; > + font-weight: bold; > + line-height: 3.5em; > + height: 3.5em; > + margin: 0.5em 0 0.5em 0; > + border-radius: 3px 3px 0 0; > +} > + > +.nav-pager ul { > + display: inline; /* IE Fix */ > +} > + > +.nav-pager ul li { > + float:left; > + vertical-align: middle; > +} > + > +.nav-pager ul li a { > + display: block; > +} > + > +.nav-pager ul a { > + color: @white; > + padding: 0 1em 0 1em; > + text-decoration: none; > +} > + > +.nav-pager ul a:hover { > + background-color: @main-color-theme; > + color: @font-color-for-main; > +} > + > +.nav-pager ul .nav-pagesize, > +.nav-pager ul .nav-page-select, > +.nav-pager ul .nav-displaying { > + padding: 0 1em 0 1em; > +} > + > +.nav-pager ul .nav-first-disabled, > +.nav-pager ul .nav-previous-disabled, > +.nav-pager ul .nav-next-disabled, > +.nav-pager ul .nav-last-disabled { > + padding: 0 1em 0 1em; > +} > + > +.nav-pager ul .nav-first-disabled:hover, > +.nav-pager ul .nav-previous-disabled:hover, > +.nav-pager ul .nav-next-disabled:hover, > +.nav-pager ul .nav-last-disabled:hover { > + cursor: not-allowed; > +} > + > + > +.nav-pager ul .nav-displaying { > + border-right: none; > +} > + > + > +/* ---------------------------- */ > +/* Multi-Column Styles */ > +/* ---------------------------- */ > + > +#column-container { > + margin: auto; > + padding: 1em; > + position: relative; > + min-width: @min-container-width; > +} > + > +#column-container h1, > +#column-container .h1, > +#column-container h2, > +#column-container .h2 { > + margin-bottom: 0.5em; > +} > + > +#column-container h1, > +#column-container .h1 { > + color: #557996; > +} > + > +#column-container .left { > + float: left; > + /* alt: position: absolute; top: 0px; left: 0px; */ > + width: 22em; > + margin-right: 1em; > +} > + > +#column-container .left-larger { > + float: left; > + /* alt: position: absolute; top: 0px; left: 0px; */ > + width: 25em; > + margin-right: 1em; > +} > + > +.lefthalf { > + float: left; > + height: 1%; > + left: 0; > + margin: 0% 1% 1% 0%; > + width: 49%; > +} > + > +.righthalf { > + float: right; > + height: 1%; > + margin: 0 0 1% 1%; > + right: 0; > + width: 49%; > +} > + > +#column-container .right { > + float: right; > + margin-left: 1em; > + width: 22em; > +} > + > +#column-container .leftonly { > + margin-left: 23em; > + width: auto; > +} > + > +#column-container .leftonly-larger { > + margin-left: 26em; > + width: auto; > +} > + > +#column-container .rightonly { > + margin-right: 23em; > + width: auto; > +} > + > +#column-container .center { > + margin-left: 23em; > + margin-right: 23em; > + width: auto; > +} > + > +#column-container .nocolumns { > + width: auto; > +} > + > +/* ---------------------- */ > +/* Button Style */ > +/* ---------------------- */ > + > +.button-bar li.buttontext a, > +a.buttontext, > +a.buttontextbig, > +.smallSubmit, > +.smallSubmit:hover, > +.mediumSubmit, > +.largeSubmit, > +.loginButton, > +.button-style-1 a, > +.button-style-1 ul a, > +.button-style-2 ul a, > +.button-style-2 a, > +.button, > +button, > +input[type="reset"], > +input[type="submit"], > +input[type="button"] { > + -webkit-appearance: none; > + -moz-border-radius: 1.1em; > + -webkit-border-radius: 1.1em; > + border-radius: 2px; > + border: 0.1em solid @main-color-theme; > + background-color: @white; > + cursor: pointer; > + color: @main-color-theme; > + display:inline-block; > + font-size: 1em; > + font-weight: bold; > + outline: 0; > + overflow: visible; > + padding: 0.4em 1em 0.4em; > + text-decoration:none; > + /*text-transform:uppercase;*/ > + width: auto; > + > + &:hover { > + color: @font-color-for-main; > + background-color: @main-color-theme; > + } > +} > + > + > +/* ---------------------- */ > +/* Footer Style */ > +/* ---------------------- */ > + > +#footer { > + background: @dark-color-theme; > + border-top: 0.1em inset #000; > + padding: 0.5em 0 0.5em 0.5em; > + > + height: @footer-height; > + position: fixed; > + bottom: 0; > + width: 100%; > + display: flex; > + flex-direction: row; > + align-items: center; > + justify-content: space-between; > + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; > + z-index: 10; > + > + span { > + color: @font-color-for-dark; > + padding: 10px; > + } > + > + a { > + color: @font-color-for-dark; > + font-weight: normal; > + } > +} > + > +#footer a:focus { > + text-decoration: underline; > +} > + > +#footer-offset { > + height: @footer-height + 10px; > + width: 100%; > +} > > > > |
Hi Jacques,
I don't understand what to do if we had a new file type. I understand that something is wrong with the svn config but I don't know what. For the 4 colors, it is only because my customer order included 4 theme colors and when I push the theme in trunk, I keep them. I like the 4 colors (and want to have more :) ) but it seems to be a problem (what is exactly this problem ?). In the same idea, why do we keep more than one theme ? Just decide witch one is official and then, the other will be push out of the theme folder. Julien. On 24/08/2016 07:52, Jacques Le Roux wrote: > OK, the *.less type is not in the svn config. I'll revert, add it, and > commit again. > > So again, please committers remember to do so when you commit a new > file type. > > While at it I really wonder if we need to have 4 colored versions of > the same theme in trunk? > > I suggest to have only one and propose the others as external > components, later plugins. We could use a third party location to > propose the 3 others theme component (GitHub, > https://oem.ofbizci.net/oci-2, etc.) > > Opinions? > > Jacques > > Le 24/08/2016 à 07:44, [hidden email] a écrit : >> Author: jleroux >> Date: Wed Aug 24 05:44:00 2016 >> New Revision: 1757462 >> >> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev >> Log: >> Removes now useless IE7 "star html hack". I was used to prevent IE7 >> from applying some CCS rules: >> http://css-discuss.incutio.com/wiki/Star_Html_Hack >> And the hack is claimed deprecated here : >> https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ >> >> Thanks to Florian Montalbano research at "css property name >> correction in flatgrey and rainbowstone themes" - >> https://issues.apache.org/jira/browse/OFBIZ-7960# >> >> I checked, the IE7 market share is residual, no needs to keep this >> dragging down feature >> >> Modified: >> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css >> >> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >> URL: >> http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff >> ============================================================================== >> >> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) >> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 >> 05:44:00 2016 >> @@ -922,10 +922,6 @@ form .basic-table, >> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >> /*text-transform:uppercase;*/ >> width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> } >> .basic-table .collapsed { >> @@ -1512,16 +1508,6 @@ input[type="button"] { >> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >> /*text-transform:uppercase;*/ >> width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> -} >> - >> -button { >> - /* IE7 */ >> - *padding-top: 0.1em; >> - *padding-bottom: 0.1em; >> } >> a.disabled, >> @@ -1563,11 +1549,6 @@ input[type="week"] { >> padding: 0.2em 0.3em; >> height: 1.8em; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0.1em; >> - *height: auto; >> } >> /* >> >> Modified: >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> URL: >> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff >> ============================================================================== >> >> --- >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> (original) >> +++ >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> Wed Aug 24 05:44:00 2016 >> @@ -1,1997 +1,1990 @@ >> -/* common colors */ >> -@black: #000; >> -@white: #fff; >> -@grey: #e6e6e6; >> -@greydark: #929292; >> - >> -@color-success: #8cff8c; >> -@font-color-for-success: @black; >> -@color-alert: #ff8c8c; >> -@font-color-for-alert: @black; >> - >> -@color-success-dark: #356e35; >> -@font-color-for-success: @black; >> -@color-alert-dark: #932f33; >> -@font-color-for-alert: @black; >> - >> -@color-background-alert: #f2dede; >> -@color-font-alert: #a94442; >> -@color-border-alert: #ebccd1; >> - >> -@color-background-success: #dff0d8; >> -@color-font-success: #3c763d; >> -@color-border-success: #d6e9c6; >> - >> -/* Saphir colors */ >> -@blue-dark: #002333; >> -@blue-main: #005982; >> -@blue-medium: #c7dfff; >> -@blue-light: #f1f7ff; >> -@blue-light2: #e4f0f5; >> - >> -/* Ruby colors */ >> -@red-dark: #420000; >> -@red-main: #bf1616; >> -@red-medium: #f7baba; >> -@red-light: #fce7e7; >> -@red-light2: #fed7c9; >> - >> -/* Emerald colors */ >> -@green-dark: #197948; >> -@green-main: #23af9b; >> -@green-medium: #7ae3ad; >> -@green-light: #e5f9ef; >> -@green-light2: #d7f9ef; >> - >> -/* Amber colors */ >> -@amber-dark: #bc4216; >> -@amber-main: #f08906; >> -@amber-medium: #f5c4b3; >> -@amber-light: #fcede8; >> -@amber-light2: #fcedcd; >> - >> -/* Saphir theme */ >> -/* >> -@main-color-theme : @blue-main; >> -@dark-color-theme : @blue-dark; >> -@medium-color-theme : @blue-medium; >> -@light-color-theme : @blue-light; >> -@light2-color-theme : @blue-light2; >> -@font-color-for-dark : @grey; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -*/ >> - >> -/* Ruby theme */ >> -/* >> -@main-color-theme : @red-main; >> -@dark-color-theme : @red-dark; >> -@medium-color-theme : @red-medium; >> -@light-color-theme : @red-light; >> -@light2-color-theme : @red-light2; >> -@font-color-for-dark : @grey; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -/* >> - >> -/* Emerald theme */ >> -/* >> -@main-color-theme : @green-main; >> -@dark-color-theme : @green-dark; >> -@medium-color-theme : @green-medium; >> -@light-color-theme : @green-light; >> -@light2-color-theme : @green-light2; >> -@font-color-for-dark : @white; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -*/ >> -/* Amber theme */ >> -@main-color-theme : @amber-main; >> -@dark-color-theme : @amber-dark; >> -@medium-color-theme : @amber-medium; >> -@light-color-theme : @amber-light; >> -@light2-color-theme : @amber-light2; >> -@font-color-for-dark : @white; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> - >> - >> -@app-bar-height: 60px; >> -@sub-app-bar-height: 40px; >> -@footer-height: 20px; >> -@home-btn-width: 47px; >> -@color-line-height: 9px; >> - >> -@home-menu-tile-height: 80px; >> -@home-menu-tile-min-width: 100px; >> -@home-menu-tile-max-width: 100px; >> - >> -@third-lvl-height: 80px; >> -@third-lvl-width : 100px; >> -@min-screen : 1170px; >> -@min-container-width: 1130px; >> - >> -@box-border-color: #d7d7d7; >> - >> -@font-face { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - src: url('fonts/quicksand/quicksandbold.otf'); >> - font-weight: normal; >> - font-style: normal; >> -} >> - >> -@font-face { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - src: url('fonts/quicksand/quicksandbold.otf'); >> - font-weight: bold; >> - font-style: normal; >> -} >> - >> -/* ---------------------------------- */ >> -/* Begin special checkbox type switch */ >> -/* ---------------------------------- */ >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox, >> [type="checkbox"]:checked.nrd-chkbox { >> - display: none; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox + label, >> -[type="checkbox"]:checked.nrd-chkbox + label{ >> - cursor: pointer; >> -} >> -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >> -[type="checkbox"]:checked.nrd-chkbox + label:before{ >> - content: ""; >> - width: 150px; >> - min-width: 150px; >> - background-color: @light-color-theme; >> - padding: 2px 20px 2px 20px; >> - border-radius: 8px 8px 8px 8px; >> - >> - cursor: pointer; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >> - content: ""; >> - position: relative; >> - left:-35px; >> - background-color: @dark-color-theme; >> - min-height: 10px; >> - min-width: 10px; >> - padding-left: 4px; >> - padding-right: 5px; >> - border-radius: 8px 8px 8px 8px; >> - transition: all .2s; >> -} >> - >> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >> - position: relative; >> - left: -15px; >> - transition: all .2s; >> -} >> -/* ---------------------------------- */ >> -/* End special checkbox type switch */ >> -/* ---------------------------------- */ >> - >> -/* ---------------------------------- */ >> -/* Begin square Checkbox */ >> -/* ---------------------------------- */ >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox, >> -[type="checkbox"]:checked.nrd-square-chkbox{ >> - position: absolute; >> - left: -9999px; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >> -[type="checkbox"]:checked.nrd-square-chkbox + label{ >> - content: ''; >> - padding-left: 35px; >> - position: relative; >> - cursor: pointer; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 12px; >> - >> -} >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> - content: ''; >> - position: absolute; >> - left:10px; >> - top: -4px; >> - width: 17px; >> - height: 17px; /* dim. de la case */ >> - border: 1px solid #aaa; >> - background: @light-color-theme; >> - border-radius: 2px; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >> - background: @light-color-theme; >> -} >> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> - background: @main-color-theme; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >> -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >> - content: 'â'; >> - position: absolute; >> - top: -4px; >> - left: 14px; >> - font-size: 16px; >> - color: @font-color-for-main; >> - transition: all .2s; >> -} >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >> - opacity: 0; >> - transform: scale(0); >> -} >> -[type="checkbox"]:checked.nrd-square-chkbox + label:after { >> - opacity: 1; >> - transform: scale(1); >> -} >> -/* ---------------------------------*/ >> -/* End square Checkbox */ >> -/* ---------------------------------*/ >> - >> -/* ---------------------------------*/ >> -/* Begin class content mgmt */ >> -/* ---------------------------------*/ >> - >> - >> -.flex-row { >> - display: flex; >> - flex-direction: row !important; >> -} >> -.flex-column { >> - display: flex; >> - flex-direction: column; >> -} >> - >> -.col-width-1 { >> - width: 10%; >> -} >> -.col-width-2 { >> - width: 20%; >> -} >> -.col-width-3 { >> - width: 30%; >> -} >> -.col-width-4 { >> - width: 40%; >> -} >> -.col-width-5 { >> - width: 50%; >> -} >> -.col-width-6 { >> - width: 60%; >> -} >> -.col-width-7 { >> - width: 70%; >> -} >> -.col-width-8 { >> - width: 80%; >> -} >> -.col-width-9 { >> - width: 90%; >> -} >> -.col-width-10 { >> - width: 100%; >> -} >> - >> -.align-v-center { >> - display:flex; >> - align-items: center; >> -} >> - >> -.align-h-center { >> - display:flex; >> - justify-content: center; >> -} >> - >> -/* ---------------------------------*/ >> -/* End class content mgmt */ >> -/* ---------------------------------*/ >> - >> - >> -/* ---------------------------------- */ >> -/* Begin btn-sort */ >> -/* ---------------------------------- */ >> - >> -.btn-sort { >> - position: relative; >> - top: -6px; >> - border:none; >> - background:none; >> - border-radius: 0; >> - margin-left:5px; >> -} >> - >> -.btn-sort:before{ >> - content: ''; >> - position: absolute; >> - left: -1px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-bottom: 10px solid @greydark; >> - border-left: 10px solid transparent; >> -} >> - >> -.btn-sort:after{ >> - content: ''; >> - position: absolute; >> - right: -1px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-top: 10px solid @greydark; >> - border-left: 10px solid transparent; >> - @media screen and (max-width: 1349px) { >> - right: -5px; >> - } >> -} >> - >> -.btn-sort.btn-sort-asc:before{ >> - border-bottom: 10px solid @main-color-theme; >> -} >> - >> -.btn-sort.btn-sort-desc:after{ >> - border-top: 10px solid @main-color-theme; >> -} >> - >> -/* ---------------------------------- */ >> -/* End btn-sort */ >> -/* ---------------------------------- */ >> - >> - >> -/* ---------------------------------- */ >> -/* Begin defaut colour class */ >> -/* ---------------------------------- */ >> - >> -.dark-color { >> - background-color: @dark-color-theme !important; >> - color: @font-color-for-dark !important; >> -} >> -.main-color { >> - background-color: @main-color-theme !important; >> - color: @font-color-for-main !important; >> -} >> -.medium-color { >> - background-color: @medium-color-theme !important; >> - color: @font-color-for-medium !important; >> -} >> -.light-color { >> - background-color: @light-color-theme !important; >> - color: @font-color-for-light !important; >> -} >> -.light2-color { >> - background-color: @light2-color-theme !important; >> - color: @font-color-for-light !important; >> -} >> - >> -.grey-color { >> - background-color: @grey !important; >> -} >> -.darkgrey-color { >> - background-color: @greydark !important; >> -} >> - >> -/* begin lookup widget */ >> -.ui-dialog { >> - opacity: 1; >> - z-index: 50; >> -} >> - >> -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >> - background: none !important; >> - background-color: @dark-color-theme !important; >> - button { >> - background: none; >> - background-color: @light-color-theme; >> - } >> -} >> -/* end lookup widget */ >> - >> -.main-bar-label { >> - color: @light-color-theme; >> - padding-left: 3px; >> - padding-right: 6px; >> - font-size: 15px; >> - font-weight: bold; >> -} >> - >> -#company-logo { >> - right: 10px; >> - top: 2px; >> - background: url("images/ofbiz-simple-white.svg") no-repeat left >> top / cover; >> - min-height: 50px; >> - min-width: 50px; >> - margin-right: 15px; >> - align-self: center; >> - @media screen and (min-width : 1232px) { >> - min-height: 50px; >> - min-width: 129px; >> - background: url("images/ofbiz-white.svg") no-repeat left top / >> cover; >> - } >> -} >> - >> -.modal-screen { >> - visibility: hidden; >> - display: flex; >> - flex-direction: column; >> - background-color: @grey; >> - opacity: .93; >> - position: fixed; >> - top: 0; >> - left: 0; >> - height: 100%; >> - width: 100%; >> - z-index: 9999; >> -} >> - >> -.modal-box{ >> - background-color: @white; >> - opacity: 1; >> - margin: 10%; >> - border-radius: 10px; >> - border: solid 2px @main-color-theme; >> - padding : 10px 40px 10px 40px; >> - .modal-header { >> - position: relative; >> - display: flex; >> - flex-direction: row; >> - h2 { >> - font-size: 25px; >> - font-weight: normal; >> - color: @main-color-theme; >> - } >> - .btn-close-nrd { >> - position: absolute; >> - right: 0; >> - display: flex; >> - justify-content: center; >> - border: solid 1px @main-color-theme; >> - border-radius: 5px; >> - color: @main-color-theme; >> - font-size: 25px; >> - height: 30px; >> - width: 30px; >> - text-decoration: none !important; >> - } >> - } >> - .modal-body { >> - p { >> - font-size: 20px; >> - } >> - } >> - .modal-footer { >> - position: relative; >> - height: 35px; >> - display: flex; >> - justify-content: flex-end; >> - .btn-nrd { >> - background: none; >> - border: none; >> - text-shadow: none; >> - opacity: 1; >> - margin-right: 10px; >> - font-size: 20px; >> - padding: 5px; >> - border-radius: 8px; >> - } >> - .btn-nrd-main { >> - background-color: @main-color-theme; >> - color: @white; >> - } >> - .btn-nrd-std { >> - background-color: @white; >> - color: @main-color-theme; >> - border: solid 1px @main-color-theme !important; >> - } >> - } >> -} >> -.btn-nrd:hover { >> - box-shadow: 5px 5px 3px 0 @black; >> -} >> - >> -.btn-nrd-std:hover { >> - background-color: @main-color-theme !important; >> - color: @white !important; >> - border: solid 1px @main-color-theme !important; >> -} >> - >> -.btn-close-nrd:hover { >> - background-color: @main-color-theme !important; >> - color: @white !important; >> -} >> - >> -.list-nrd { >> - border: solid 2px @main-color-theme; >> - border-bottom-left-radius: 10px; >> - border-bottom-right-radius: 10px; >> - display: flex; >> - flex-direction: column; >> - margin-top: 15px; >> - margin-bottom: 15px; >> - .title-list-nrd { >> - background-color: @main-color-theme; >> - color : @white; >> - font-size: 20px; >> - font-weight: bold; >> - padding-left: 5px; >> - } >> - >> - li { >> - position: relative; >> - display: flex; >> - flex-direction: row; >> - font-size: 20px; >> - padding-left: 5px; >> - padding-top: 2px; >> - padding-bottom: 2px; >> - margin-bottom: 3px; >> - a { >> - color: @main-color-theme; >> - } >> - span { >> - position: absolute; >> - right: 0; >> - color: @main-color-theme; >> - font-size: 30px; >> - } >> - } >> -} >> -li.line-odd { >> - background-color: @light-color-theme; >> -} >> - >> -#user-avatar { >> - height: 40px; >> - width: 40px; >> - padding: 2px; >> - >> - align-self: center; >> - >> - :hover { >> - cursor: pointer; >> - } >> - img { >> - max-height: 40px; >> - max-width: 40px; >> - position: relative; >> - top: -2px; >> - padding: 2px; >> - background-color: @white; >> - border-radius: 2px; >> - } >> -} >> - >> -#main-navigation-bar { >> - position: relative; >> - width: 100%; >> - min-width: @min-container-width; >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - justify-content: space-between; >> - font-family: Quicksand,sans-serif; >> - background-color: @dark-color-theme; >> - z-index: 5; >> - height: @app-bar-height; >> -} >> -#main-nav-bar-left { >> - position: relative; >> - display: flex; >> - align-items: center; >> -} >> -#main-nav-bar-right { >> - position: relative; >> - display: flex; >> - align-items: center; >> - padding-right: 15px; >> -} >> - >> -.app-btn{ >> - height: @app-bar-height; >> - background-color: @dark-color-theme; >> - display: flex; >> - align-items: center; >> - flex-direction: row; >> - margin-right: 2px; >> - margin-left: 2px; >> - a { >> - padding:10px; >> - color: @font-color-for-dark; >> - font-size: 1.4em !important; >> - } >> -} >> - >> -.app-btn a:visited { >> - color: @font-color-for-dark; >> -} >> - >> -.app-btn:hover{ >> - position: relative; >> - top: -6px; >> - background-color: @main-color-theme; >> - border-bottom-left-radius: 5px; >> - border-bottom-right-radius: 5px; >> - box-shadow: 1px 1px 12px @shadow-color; >> - a { >> - position: relative; >> - top: 6px; >> - color : @font-color-for-main; >> - } >> -} >> -.app-btn.selected:hover { >> - background-color: @dark-color-theme; >> - box-shadow: none; >> - top:0; >> -} >> - >> -.app-btn a:hover { >> - text-decoration: none; >> -} >> -#app-selected { >> - position: relative; >> - display: flex; >> - flex-direction: column; >> - align-items: center; >> - justify-content: center; >> - background-color: @main-color-theme; >> - box-shadow: 1px -2px 12px @shadow-color; >> - z-index: 0; >> - opacity: .99; >> - border-top-left-radius : 8px ; >> - border-top-right-radius : 8px ; >> - a { >> - position: relative; >> - top: 3px; >> - color: @font-color-for-main; >> - } >> -} >> -.app-btn.selected a:hover { >> - text-decoration: none; >> -} >> - >> -#app-bar-line { >> - position: relative; >> - width: 100%; >> - min-width: @min-container-width; >> - height: @color-line-height; >> - background-color: @main-color-theme; >> - box-shadow: 2px 2px 5px @shadow-color; >> -} >> -#color-add { >> - width: 150px; >> - background-color: @main-color-theme; >> - height: @color-line-height; >> - z-index: 20; >> - position: relative; >> - top: @color-line-height; >> -} >> - >> -#more-app { >> - position: relative; >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - font-weight: bold; >> - font-size: 1.4em !important; >> - width: 40px; >> - height: @app-bar-height; >> - color: @font-color-for-dark; >> -} >> -#more-app:hover { >> - background-color: @main-color-theme; >> - text-decoration: none; >> -} >> -#more-app:hover #more-app-list { >> - display: block; >> -} >> -#more-app.selected { >> - background-color: @main-color-theme; >> -} >> - >> -#more-app-list { >> - display: none; >> - position: absolute; >> - top: @app-bar-height; >> - left: -20px; >> - background-color: @dark-color-theme; >> - z-index: 10; >> - border: solid 4px @main-color-theme; >> - border-top-width: @color-line-height; >> - border-bottom-left-radius: 4px; >> - border-bottom-right-radius: 4px; >> - li { >> - padding-left : 4px; >> - padding-right: 4px; >> - } >> - >> - a { >> - color: @font-color-for-dark; >> - font-size: 15px; >> - } >> - >> - :hover { >> - background-color: @medium-color-theme; >> - a { >> - box-shadow: none; >> - color: @dark-color-theme; >> - } >> - a:hover{ >> - box-shadow: none; >> - text-decoration: none; >> - border-radius: 0; >> - } >> - } >> - >> - li.selected { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main; >> - } >> - a:hover { >> - color: @font-color-for-main; >> - background-color: @main-color-theme; >> - } >> - } >> -} >> - >> -#homeButton { >> - display: flex; >> - //visibility: hidden; >> - align-items: center; >> - justify-content: center; >> - background-color:@grey; >> - border: none; >> - border-radius : 0; >> - >> - height: @app-bar-height; >> - width : @home-btn-width; >> - text-decoration: none; >> - img { >> - height: 25px; >> - transition: all .2s ease-in-out; >> - } >> -} >> - >> -#homeButton:hover img { >> - transform: scale(1.1); >> -} >> - >> -#app-bar-list { >> - display: flex; >> -} >> - >> -#user-details { >> - position: absolute; >> - right: 20px; >> - top : 62px; >> - background-color: @dark-color-theme; >> - color : @font-color-for-dark; >> - font-size: 15px; >> - font-weight: bold; >> - padding-top: 5px; >> - padding-bottom: 10px; >> - z-index: 15; >> - box-shadow: 3px 3px 12px @shadow-color; >> - border-radius: 3px; >> - transition: all .1s ease-in-out; >> - >> - img { >> - height: 50px; >> - background-color: @white; >> - padding: 4px; >> - border-radius : 3px; >> - margin-left: 10px; >> - margin-right: 5px; >> - } >> - #logout { >> - background-color: @white; >> - color: @dark-color-theme !important; >> - border-radius: 2px; >> - :hover { >> - text-decoration: none; >> - } >> - } >> -} >> - >> -#user-details:after{ >> - content: ''; >> - position: absolute; >> - top: -10px; >> - right: 5px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-bottom: 10px solid @dark-color-theme; >> - border-left: 10px solid transparent; >> -} >> - >> -a.user-pref-btn { >> - margin-top: 15px; >> - background-color: @dark-color-theme; >> - margin-left: 10px; >> - margin-right: 10px; >> - padding-top: 2px; >> - padding-bottom: 2px; >> - display: flex; >> - justify-content: center; >> - color: @font-color-for-dark !important; >> - :hover { >> - text-decoration: none; >> - } >> -} >> - >> -#user-name { >> - display: flex; >> - flex-direction: column; >> - justify-content: center; >> - align-content: center; >> - padding-left : 5px; >> - padding-right : 5px; >> - span { >> - min-width: 100px; >> - padding-bottom : 5px; >> - padding-top : 5px; >> - } >> -} >> - >> -#user-row1 { >> - display: flex; >> - flex-direction: row; >> - justify-content: center; >> - #user-lang { >> - display: flex; >> - flex-direction: row; >> - justify-content: center; >> - align-content: center; >> - padding-left: 10px; >> - padding-right: 10px; >> - span { >> - min-width: 30px; >> - color: @font-color-for-dark; >> - } >> - } >> -} >> - >> -.appbar-btn-img { >> - height: @app-bar-height - 40px; >> -} >> - >> -#help-btn { >> - font-size: 10px; >> - min-width: 20px; >> - margin-right: 15px; >> -} >> -/* Begin sub Menu section */ >> - >> -#app-navigation { >> - height: @sub-app-bar-height; >> - border-right: solid 1px @black; >> - border-bottom: solid 1px @black; >> - width: 100%; >> - min-width: @min-container-width; >> - h2 { >> - display: none; >> - } >> - ul { >> - display: flex; >> - flex-direction: row; >> - background-color: @grey; >> - flex-grow: 1; >> - } >> - ul li ul li { >> - border-left: solid 1px @black; >> - height: @sub-app-bar-height; >> - display: flex; >> - align-items: center; >> - justify-items: center; >> - justify-content: center; >> - min-width: 75px; >> - padding-left: 6px; >> - padding-right: 6px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - border-bottom: solid 1px @black; >> - font-size: 12px; >> - @media screen and (max-width: 1500px) { >> - font-size: 10px; >> - min-width: 65px; >> - } >> - @media screen and (max-width: 1300px) { >> - font-size: 10px; >> - min-width: 50px; >> - } >> - a { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - text-align: center; >> - height: 100%; >> - width: 100%; >> - text-decoration: none; >> - } >> - } >> -} >> - >> -#app-navigation ul li ul li:last-child { >> - border-right: solid 1px @black; >> -} >> - >> -#app-navigation ul li ul li:hover { >> - background-color: @main-color-theme; >> - min-height: @sub-app-bar-height; >> - position: relative; >> - //top: -1px; >> - a { >> - color: @white; >> - text-decoration: none; >> - } >> -} >> -#app-navigation ul li ul li.selected:hover { >> - a { >> - color: @black !important; >> - } >> -} >> - >> -#app-navigation ul li ul li.selected { >> - background-color: @white; >> - position: relative; >> - top: 1px; >> - height: @sub-app-bar-height + 1px; >> - border-top-right-radius: 2px; >> - border-top-left-radius: 2px; >> - border-bottom: none; >> - >> - :after { >> - content: ''; >> - position: absolute; >> - top: -2px; >> - left: 5px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-top: 10px solid @main-color-theme; >> - border-left: 10px solid transparent; >> - } >> - >> -} >> - >> - >> -/* End sub Menu section */ >> - >> -/* begin sub Menu section 3rd level */ >> - >> -.button-bar.tab-bar { >> - ul li ul li { >> - border: solid 1px @grey; >> - border-radius: 4px; >> - a { >> - width: 100%; >> - height: 100%; >> - } >> - } >> - li.selected{ >> - background-color: @main-color-theme; >> - a{ >> - color: @font-color-for-main; >> - } >> - } >> - ul li ul li:hover { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main ; >> - } >> - } >> -} >> - >> -#third-level-menu-container { >> - display: flex; >> - flex-direction: row; >> -} >> -#working-area { >> - width: 100%; >> -} >> - >> -#left-column-menu { >> - width: 100px; >> -} >> - >> -.third-lvl-menu { >> - background-color: @dark-color-theme; >> - position: relative; >> - left: -10px; >> - border-top-right-radius: 4px; >> - border-bottom-right-radius: 4px; >> - padding-top: 4px; >> - padding-bottom: 4px; >> - ul { >> - li { >> - ul { >> - position: relative; >> - top: 5px; >> - width: @third-lvl-width; >> - } >> - } >> - } >> - h2 { >> - visibility: hidden; >> - } >> -} >> -.third-level-item:last-child { >> - border-bottom: solid 1px @main-color-theme; >> -} >> - >> -.third-level-item { >> - min-height: @third-lvl-height; >> - background-color: @dark-color-theme; >> - padding-right: 3px; >> - border-top: solid 1px @main-color-theme; >> - >> - a, a:visited { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - width: 100%; >> - color: @font-color-for-dark !important; >> - min-height: @third-lvl-height; >> - max-width: @third-lvl-width; >> - text-align: center; >> - } >> -} >> -.third-level-item.selected { >> - position: relative; >> - border-left: solid 9px @main-color-theme; >> - a, a:visited { >> - background-color: @white; >> - color: @dark-color-theme !important; >> - } >> - :after { >> - content: ''; >> - position: absolute; >> - top: 5px; >> - left: 0; >> - width: 0; >> - height: 0; >> - border-top: 10px solid transparent; >> - border-left: 10px solid @main-color-theme; >> - border-bottom: 10px solid transparent; >> - } >> -} >> - >> -.third-level-item a:hover { >> - background-color: @main-color-theme; >> - color: @font-color-for-main ; >> - text-decoration: none; >> -} >> -/* End 3rd level menu */ >> - >> - >> - >> -/* Begin Home Menu for IB section */ >> -.fixed-nav-bar { >> - position: fixed !important; >> - width: 100%; >> -} >> -#nav-bar-offset { >> - height: @app-bar-height ; >> -} >> - >> -#homeGlyph { >> - margin-left: 20px; >> - height: 20px; >> -} >> - >> -#homePageTitle { >> - color: @white; >> - font-size: 20px; >> - font-weight: bold; >> - margin-right: 20px; >> - margin-left: 20px; >> -} >> -.home-menu-list { >> - display: flex; >> - flex-direction: column; >> - align-items: center; >> -} >> -.hp-applist { >> - display: flex; >> - flex-direction: row; >> - color : @white; >> - align-items: center; >> - .app-title { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - background-color: @dark-color-theme; >> - height: @home-menu-tile-height; >> - padding: 5px 10px 5px 10px; >> - border-bottom: solid 1px @black; >> - span { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> - font-size: 15px; >> - font-weight: bold; >> - width: 110px; >> - a { >> - display: flex; >> - justify-content: center; >> - color : @white; >> - } >> - } >> - } >> - >> - .hp-menu-item { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - position: relative; >> - margin-left: 5px; >> - margin-right: 5px; >> - border: solid 2px @grey; >> - border-radius: 8px; >> - height: @home-menu-tile-height - 4px; >> - min-width: @home-menu-tile-min-width; >> - max-width: @home-menu-tile-max-width; >> - .menu-link { >> - font-size: 10px; >> - color: @black; >> - padding: 10px; >> - } >> - .star-link { >> - position: absolute; >> - height: 25px; >> - top: 5px; >> - right: 5px; >> - } >> - } >> - >> -} >> -.hp-applist .app-title span a:hover { >> - text-decoration: none; >> -} >> - >> -.hp-menu-item.favoriteItem { >> - border: solid 2px @dark-color-theme; >> -} >> - >> -.hp-menu-item:hover { >> - box-shadow: 3px 3px 12px @shadow-color; >> - a { >> - text-decoration: none; >> - } >> -} >> - >> -/* End Home Menu for IB section */ >> - >> -/* Begin Login screenlet */ >> -#login-container { >> - #content-messages { >> - position: relative; >> - top: @app-bar-height; >> - border-radius: 4px; >> - width: 97%; >> - &.errorMessage { >> - background-color : @color-background-alert !important; >> - color: @color-font-alert !important; >> - border : solid 1px @color-border-alert !important; >> - } >> - &.eventMessage { >> - background-color : @color-background-success !important; >> - color: @color-font-success !important; >> - border : solid 1px @color-border-success !important; >> - } >> - } >> -} >> -#loginBar { >> - position: fixed; >> - top:0; >> - left: 0; >> - width: 100%; >> - height: @app-bar-height; >> - background-color: @dark-color-theme; >> - span { >> - background-color: @white; >> - color: @main-color-theme; >> - border-top-right-radius: 5px; >> - border-top-left-radius: 5px; >> - font-size: 25px; >> - position: relative; >> - top: @app-bar-height - 32px; >> - left: 15px; >> - padding: 5px 10px 5px 10px; >> - } >> - #company-logo { >> - position: absolute; >> - } >> -} >> - >> -.login-screenlet { >> - display: flex; >> - flex-direction: column; >> - min-width: 300px; >> - max-width: 50em; >> - border-radius: 8px !important; >> - margin-top: 15%; >> - box-shadow: 3px 3px 12px @shadow-color; >> - .screenlet-title-bar { >> - display: flex; >> - align-content: center; >> - justify-content: center; >> - margin:0; >> - padding:0; >> - h3{ >> - padding-top:2px; >> - padding-bottom:2px; >> - background-color: @dark-color-theme !important; >> - color: @font-color-for-dark; >> - height: 100%; >> - width:100%; >> - text-shadow: none; >> - font-size: 25px; >> - } >> - } >> - .screenlet-body { >> - background-color: @main-color-theme !important; >> - form { >> - .button { >> - width: 150px; >> - border-radius: 4px; >> - background: none; >> - background-color: @dark-color-theme; >> - color: @font-color-for-dark; >> - text-shadow: none; >> - margin-top: 20px; >> - margin-bottom: 10px; >> - } >> - >> - table { >> - tr { >> - width: 100%; >> - .label { >> - color: @font-color-for-main; >> - width: 25%; >> - font-size: 15px; >> - } >> - input { >> - width: 100%; >> - } >> - .buttontext, >> - [type="submit"] { >> - width: 150px; >> - border-radius: 4px; >> - background: none; >> - background-color: @dark-color-theme; >> - color: @font-color-for-dark; >> - text-shadow: none; >> - } >> - [name="GET_PASSWORD_HINT"] { >> - background-color: @font-color-for-dark; >> - color: @main-color-theme; >> - border: none; >> - width: 100%; >> - } >> - [name="EMAIL_PASSWORD"] { >> - background-color: @font-color-for-dark; >> - color: @main-color-theme; >> - border: none; >> - width: 100%; >> - } >> - td { >> - padding: 5px; >> - color: @font-color-for-main; >> - font-size: 15px; >> - font-weight: bold; >> - } >> - } >> - } >> - } >> - a { >> - color: @font-color-for-main; >> - } >> - } >> -} >> - >> -.login-screenlet .screenlet-title-bar { >> - text-align: center; >> -} >> - >> -/* End Login screenlet */ >> - >> - >> -/* --------------------------------------------- */ >> -/* Begin Screenlet style */ >> -/* --------------------------------------------- */ >> -.screenlet-title-bar { >> - text-decoration: none ; >> - color: @dark-color-theme; >> - background-color: @grey; >> - height: 1%; /* IE fix */ >> - min-height: 1.5em; >> - padding:0.8em 0.2em; >> -} >> - >> -.screenlet { >> - border-radius: 5px; >> - border: solid 1px @grey; >> - height: auto !important; >> - margin-bottom: 1em; >> - overflow: auto; >> -} >> - >> -.screenlet-body { >> - background-color: #FFFFFF; >> - height: auto !important; >> - height: 1%; >> - padding: 0.4em; >> -} >> - >> -.screenlet-body div { >> - margin: 0.8em 0.1em >> -} >> - >> -/* Special Screenlet style for locale and timezone window */ >> -.lists.screenlet { >> - margin-left: 25%; >> - margin-right: 25%; >> - margin-top: 1em; >> -} >> - >> -.lists.screenlet .basic-table tr td { >> - text-align: center; >> -} >> - >> -.lists.screenlet .basic-table tr td a { >> - display: block; >> -} >> - >> -/* Alternate table header style */ >> -.basic-table .header-row-2 th, >> -.basic-table .header-row-2 td { >> - background-color: @greydark; >> - border-bottom: 0; >> - border-left: 0.1em solid #aaa; >> - border-right: 0.1em solid #888; >> - color: #ffffff; >> - font-weight: bold; >> -} >> - >> -/* No padding screenlet decorator */ >> -.no-padding { >> - padding: 0; >> - border: none; >> -} >> - >> -.no-padding .h1, >> -.no-padding .h2, >> -.no-padding .h3, >> -.no-paddingr h1, >> -.no-padding h2, >> -.no-padding h3 { >> - padding: 0.7em; >> -} >> - >> -.screenlet-title-bar ul a:hover { >> - color: @main-color-theme !important; >> - text-decoration: none; >> -} >> - >> - >> -/* --------------------------------------------- */ >> -/* End Screenlet style */ >> -/* --------------------------------------------- */ >> - >> -/* ---------------------- */ >> -/* Table Styles */ >> -/* ---------------------- */ >> - >> -.basic-table { >> - background-color: #ffffff; >> - color: #000000; >> - margin-bottom: 1em; >> - width: 100%; >> -} >> - >> -form table, >> -form .basic-table, >> -.screenlet-body .basic-table { >> - background: transparent; >> - margin-bottom: 0; >> -} >> - >> -.basic-table tr td { >> - /* Style for all cells */ >> - padding: 0.8em 0.1em; >> - vertical-align: middle; >> -} >> - >> -.basic-table tr .align-bottom { >> - vertical-align: bottom; >> -} >> - >> -.basic-table tr .align-top { >> - vertical-align: top; >> -} >> - >> -.basic-table tr .label, >> -.basic-table tr .group-label { >> - /* field labels for forms */ >> - font-weight: bold; >> - text-align: right; >> - padding-right: 1.5em; >> - white-space: nowrap; >> - width: 1%; >> -} >> - >> -.basic-table tr .group-label { >> - /* "header" for field label groups */ >> - font-size: 1.2em; >> - padding: 2em 1.5em 0 0; >> -} >> - >> -.basic-table tr th, >> -.basic-table .header-row { >> - font-weight: bold; >> - text-align: left; >> -} >> - >> -.basic-table .header-row td { >> - border-bottom: 0.1em solid #000000; >> -} >> - >> -.basic-table .header-row td a { >> - color: #000000; >> -} >> - >> -.basic-table .alternate-row { >> - /* Alternating row style */ >> - background-color: #eeeeee; >> -} >> - >> -.basic-table .selected { >> - background: #FFFCCF; >> -} >> - >> -.basic-table .alternate-rowSelected { >> - background: #FFF55F; >> -} >> - >> -.basic-table .Validate { >> - /*Style use by alt-row-style on list*/ >> - background: #A0D5F7; >> -} >> - >> -.basic-table .alternate-rowValidate { >> - /*Style use by alt-row-style on list*/ >> - background: #72A8F2; >> -} >> - >> -.basic-table .Warn { >> - /*Style use by alt-row-style on list*/ >> - background: #f55C5C; >> -} >> - >> -.basic-table .alternate-rowWarn { >> - /*Style use by alt-row-style on list*/ >> - background: #FC7455; >> -} >> - >> -.basic-table tr .button-col { >> - /* button column style - for the small >> - collection of buttons used in lists */ >> - vertical-align: top; >> - padding: 0.3em; >> -} >> -.basic-table tr .button-col a, >> -.basic-table tr .button-col button, >> -.basic-table tr .button-col input[type="reset"], >> -.basic-table tr .button-col input[type="submit"], >> -.basic-table tr .button-col input[type="button"] { >> - -webkit-appearance: none; >> - -moz-border-radius: 1em; >> - -webkit-border-radius: 1em; >> - border-radius: 2px; >> - border: 0.1em solid @main-color-theme; >> - background-color: @white; >> - cursor: pointer; >> - color: @main-color-theme; >> - display:inline-block; >> - font-size: 0.9em; >> - font-weight: bold; >> - outline: 0; >> - overflow: visible; >> - padding: 0.1em 0.5em 0.2em 0.5em; >> - text-decoration: none; >> - width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> - >> - &:hover { >> - background-color: @main-color-theme; >> - color: @white; >> - } >> -} >> - >> -.basic-table .collapsed { >> - visibility: collapse; >> -} >> - >> -/* Sort field style */ >> -.basic-table .header-row-2 th .sort-order-asc, >> -.basic-table .header-row-2 td .sort-order-asc{ >> - background: url(/images/arrow-gr-up.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> -} >> -.basic-table .header-row-2 th .sort-order-desc, >> -.basic-table .header-row-2 td .sort-order-desc{ >> - background: url(/images/arrow-gr-dw.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> -} >> -.basic-table .header-row-2 th .sort-order, >> -.basic-table .header-row-2 td .sort-order{ >> - background: url(/images/arrow-gr.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> - color:#fff >> -} >> - >> - >> -/* --------------------------------------------- */ >> -/* Begin Message Info */ >> -/* --------------------------------------------- */ >> -.count-message { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - min-height:20px; >> - min-width: 20px; >> - max-height:20px; >> - max-width: 20px; >> - background: @white; >> - font-size:12px; >> - font-weight: bold; >> - border-radius: 50%; >> -} >> -.info-message-title { >> - min-width:150px; >> - margin: 5px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - font-weight: bold; >> -} >> -.message-list { >> - position:relative; >> - margin-top: 10px; >> - box-shadow: 1px 3px 5px @greydark; >> - border-radius: 0 5px 5px 0; >> - transition: height 2s; >> -} >> -.message-list-main { >> - padding: 5px 15px 5px 15px; >> -} >> -.message-list-alert { >> - background-color: @color-alert; >> - border-left : solid 5px @color-alert-dark; >> - .count-message { >> - color: @color-alert-dark; >> - } >> -} >> -.message-list-success { >> - background-color: @color-success; >> - border-left: solid 5px @color-success-dark; >> - .count-message { >> - color: @color-success-dark; >> - } >> -} >> -.message-list-table-container { >> - background-color: @white; >> - border-radius: 5px; >> - overflow: hidden; >> - height: 0; >> -} >> -.info-message-success { >> - display: none; >> -} >> -.info-message-alert { >> - display: none; >> -} >> -table.msg-list { >> - width: 100%; >> - font-size: 16px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - padding: 0; >> - thead { >> - height: 100%; >> - background-color: @grey; >> - margin: 0; >> - padding: 0; >> - tr{ >> - font-weight: bold; >> - border-bottom: solid 1px @black; >> - height: 100%; >> - background-color: @grey; >> - line-height: 30px; >> - } >> - } >> - tbody { >> - tr { >> - line-height: 25px; >> - } >> - tr.msg-row-success { >> - background-color: @color-success; >> - } >> - tr.msg-row-alert { >> - background-color: @color-alert; >> - } >> - } >> - td { >> - padding-left: 5px; >> - } >> -} >> - >> -/* --------------------------------------------- */ >> -/* End Message Info */ >> -/* --------------------------------------------- */ >> - >> -/* ---------------------- */ >> -/* Paginate Style */ >> -/* ---------------------- */ >> - >> -.paginate-bar-nrd { >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - font-size: 15px; >> - background-color: @grey; >> - padding-left: 10px; >> - padding-top: 3px; >> - padding-bottom: 3px; >> - box-shadow: 0 2px 5px @shadow-color; >> - >> - ul.paginate-pg-list { >> - display: flex; >> - flex-direction: row; >> - background-color: @white; >> - color: @main-color-theme; >> - margin-right: 10px; >> - border-radius: 8px; >> - border: solid 1px @box-border-color; >> - height: 18px; >> - li { >> - display: flex; >> - justify-content: center; >> - min-width: 17px; >> - border-right: solid 1px @box-border-color; >> - padding-left: 2px; >> - padding-right: 2px; >> - height:100%; >> - a { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - color: @dark-color-theme; >> - height: 100%; >> - width: 100%; >> - } >> - .paginate-disable { >> - >> - } >> - } >> - li.selected { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main; >> - } >> - } >> - li:first-child, li:last-child { >> - width: 20px; >> - } >> - li:first-child { >> - border-top-left-radius: 3px; >> - border-bottom-left-radius: 3px; >> - } >> - li:last-child { >> - border-right: none; >> - border-top-right-radius: 3px; >> - border-bottom-right-radius: 3px; >> - } >> - } >> - >> -} >> -select.paginate-select { >> - position: relative; >> - background: @white; >> - font-size: 16px; >> - font-weight: bold; >> - border: 1px solid @box-border-color; >> - option { >> - display: flex; >> - justify-self: center; >> - font-size: 14px; >> - } >> -} >> - >> -.paginate-select-label { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - padding-left: 15px; >> - padding-right: 15px; >> -} >> - >> -.paginate-information { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - padding-left: 15px; >> - padding-right: 15px; >> -} >> - >> -ul.paginate-pg-list li:hover{ >> - background-color: @main-color-theme; >> - a { >> - text-decoration: none; >> - color: @font-color-for-main; >> - } >> -} >> - >> -/* End of Paginate Style */ >> -/* ---------------------- */ >> - >> -/* ------------------------------- */ >> -/* List Navigation Style */ >> -/* ------------------------------- */ >> - >> -.nav-pager { >> - background-color: @greydark; >> - color: @white; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 9px; >> - font-weight: bold; >> - line-height: 3.5em; >> - height: 3.5em; >> - margin: 0.5em 0 0.5em 0; >> - border-radius: 3px 3px 0 0; >> -} >> - >> -.nav-pager ul { >> - display: inline; /* IE Fix */ >> -} >> - >> -.nav-pager ul li { >> - float:left; >> - vertical-align: middle; >> -} >> - >> -.nav-pager ul li a { >> - display: block; >> -} >> - >> -.nav-pager ul a { >> - color: @white; >> - padding: 0 1em 0 1em; >> - text-decoration: none; >> -} >> - >> -.nav-pager ul a:hover { >> - background-color: @main-color-theme; >> - color: @font-color-for-main; >> -} >> - >> -.nav-pager ul .nav-pagesize, >> -.nav-pager ul .nav-page-select, >> -.nav-pager ul .nav-displaying { >> - padding: 0 1em 0 1em; >> -} >> - >> -.nav-pager ul .nav-first-disabled, >> -.nav-pager ul .nav-previous-disabled, >> -.nav-pager ul .nav-next-disabled, >> -.nav-pager ul .nav-last-disabled { >> - padding: 0 1em 0 1em; >> -} >> - >> -.nav-pager ul .nav-first-disabled:hover, >> -.nav-pager ul .nav-previous-disabled:hover, >> -.nav-pager ul .nav-next-disabled:hover, >> -.nav-pager ul .nav-last-disabled:hover { >> - cursor: not-allowed; >> -} >> - >> - >> -.nav-pager ul .nav-displaying { >> - border-right: none; >> -} >> - >> - >> -/* ---------------------------- */ >> -/* Multi-Column Styles */ >> -/* ---------------------------- */ >> - >> -#column-container { >> - margin: auto; >> - padding: 1em; >> - position: relative; >> - min-width: @min-container-width; >> -} >> - >> -#column-container h1, >> -#column-container .h1, >> -#column-container h2, >> -#column-container .h2 { >> - margin-bottom: 0.5em; >> -} >> - >> -#column-container h1, >> -#column-container .h1 { >> - color: #557996; >> -} >> - >> -#column-container .left { >> - float: left; >> - /* alt: position: absolute; top: 0px; left: 0px; */ >> - width: 22em; >> - margin-right: 1em; >> -} >> - >> -#column-container .left-larger { >> - float: left; >> - /* alt: position: absolute; top: 0px; left: 0px; */ >> - width: 25em; >> - margin-right: 1em; >> -} >> - >> -.lefthalf { >> - float: left; >> - height: 1%; >> - left: 0; >> - margin: 0% 1% 1% 0%; >> - width: 49%; >> -} >> - >> -.righthalf { >> - float: right; >> - height: 1%; >> - margin: 0 0 1% 1%; >> - right: 0; >> - width: 49%; >> -} >> - >> -#column-container .right { >> - float: right; >> - margin-left: 1em; >> - width: 22em; >> -} >> - >> -#column-container .leftonly { >> - margin-left: 23em; >> - width: auto; >> -} >> - >> -#column-container .leftonly-larger { >> - margin-left: 26em; >> - width: auto; >> -} >> - >> -#column-container .rightonly { >> - margin-right: 23em; >> - width: auto; >> -} >> - >> -#column-container .center { >> - margin-left: 23em; >> - margin-right: 23em; >> - width: auto; >> -} >> - >> -#column-container .nocolumns { >> - width: auto; >> -} >> - >> -/* ---------------------- */ >> -/* Button Style */ >> -/* ---------------------- */ >> - >> -.button-bar li.buttontext a, >> -a.buttontext, >> -a.buttontextbig, >> -.smallSubmit, >> -.smallSubmit:hover, >> -.mediumSubmit, >> -.largeSubmit, >> -.loginButton, >> -.button-style-1 a, >> -.button-style-1 ul a, >> -.button-style-2 ul a, >> -.button-style-2 a, >> -.button, >> -button, >> -input[type="reset"], >> -input[type="submit"], >> -input[type="button"] { >> - -webkit-appearance: none; >> - -moz-border-radius: 1.1em; >> - -webkit-border-radius: 1.1em; >> - border-radius: 2px; >> - border: 0.1em solid @main-color-theme; >> - background-color: @white; >> - cursor: pointer; >> - color: @main-color-theme; >> - display:inline-block; >> - font-size: 1em; >> - font-weight: bold; >> - outline: 0; >> - overflow: visible; >> - padding: 0.4em 1em 0.4em; >> - text-decoration:none; >> - /*text-transform:uppercase;*/ >> - width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> - &:hover { >> - color: @font-color-for-main; >> - background-color: @main-color-theme; >> - } >> -} >> - >> - >> -/* ---------------------- */ >> -/* Footer Style */ >> -/* ---------------------- */ >> - >> -#footer { >> - background: @dark-color-theme; >> - border-top: 0.1em inset #000; >> - padding: 0.5em 0 0.5em 0.5em; >> - >> - height: @footer-height; >> - position: fixed; >> - bottom: 0; >> - width: 100%; >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - justify-content: space-between; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> - z-index: 10; >> - >> - span { >> - color: @font-color-for-dark; >> - padding: 10px; >> - } >> - >> - a { >> - color: @font-color-for-dark; >> - font-weight: normal; >> - } >> -} >> - >> -#footer a:focus { >> - text-decoration: underline; >> -} >> - >> -#footer-offset { >> - height: @footer-height + 10px; >> - width: 100%; >> -} >> +/* common colors */ >> +@black: #000; >> +@white: #fff; >> +@grey: #e6e6e6; >> +@greydark: #929292; >> + >> +@color-success: #8cff8c; >> +@font-color-for-success: @black; >> +@color-alert: #ff8c8c; >> +@font-color-for-alert: @black; >> + >> +@color-success-dark: #356e35; >> +@font-color-for-success: @black; >> +@color-alert-dark: #932f33; >> +@font-color-for-alert: @black; >> + >> +@color-background-alert: #f2dede; >> +@color-font-alert: #a94442; >> +@color-border-alert: #ebccd1; >> + >> +@color-background-success: #dff0d8; >> +@color-font-success: #3c763d; >> +@color-border-success: #d6e9c6; >> + >> +/* Saphir colors */ >> +@blue-dark: #002333; >> +@blue-main: #005982; >> +@blue-medium: #c7dfff; >> +@blue-light: #f1f7ff; >> +@blue-light2: #e4f0f5; >> + >> +/* Ruby colors */ >> +@red-dark: #420000; >> +@red-main: #bf1616; >> +@red-medium: #f7baba; >> +@red-light: #fce7e7; >> +@red-light2: #fed7c9; >> + >> +/* Emerald colors */ >> +@green-dark: #197948; >> +@green-main: #23af9b; >> +@green-medium: #7ae3ad; >> +@green-light: #e5f9ef; >> +@green-light2: #d7f9ef; >> + >> +/* Amber colors */ >> +@amber-dark: #bc4216; >> +@amber-main: #f08906; >> +@amber-medium: #f5c4b3; >> +@amber-light: #fcede8; >> +@amber-light2: #fcedcd; >> + >> +/* Saphir theme */ >> +/* >> +@main-color-theme : @blue-main; >> +@dark-color-theme : @blue-dark; >> +@medium-color-theme : @blue-medium; >> +@light-color-theme : @blue-light; >> +@light2-color-theme : @blue-light2; >> +@font-color-for-dark : @grey; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +*/ >> + >> +/* Ruby theme */ >> +/* >> +@main-color-theme : @red-main; >> +@dark-color-theme : @red-dark; >> +@medium-color-theme : @red-medium; >> +@light-color-theme : @red-light; >> +@light2-color-theme : @red-light2; >> +@font-color-for-dark : @grey; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +/* >> + >> +/* Emerald theme */ >> +/* >> +@main-color-theme : @green-main; >> +@dark-color-theme : @green-dark; >> +@medium-color-theme : @green-medium; >> +@light-color-theme : @green-light; >> +@light2-color-theme : @green-light2; >> +@font-color-for-dark : @white; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +*/ >> +/* Amber theme */ >> +@main-color-theme : @amber-main; >> +@dark-color-theme : @amber-dark; >> +@medium-color-theme : @amber-medium; >> +@light-color-theme : @amber-light; >> +@light2-color-theme : @amber-light2; >> +@font-color-for-dark : @white; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> + >> + >> +@app-bar-height: 60px; >> +@sub-app-bar-height: 40px; >> +@footer-height: 20px; >> +@home-btn-width: 47px; >> +@color-line-height: 9px; >> + >> +@home-menu-tile-height: 80px; >> +@home-menu-tile-min-width: 100px; >> +@home-menu-tile-max-width: 100px; >> + >> +@third-lvl-height: 80px; >> +@third-lvl-width : 100px; >> +@min-screen : 1170px; >> +@min-container-width: 1130px; >> + >> +@box-border-color: #d7d7d7; >> + >> +@font-face { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + src: url('fonts/quicksand/quicksandbold.otf'); >> + font-weight: normal; >> + font-style: normal; >> +} >> + >> +@font-face { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + src: url('fonts/quicksand/quicksandbold.otf'); >> + font-weight: bold; >> + font-style: normal; >> +} >> + >> +/* ---------------------------------- */ >> +/* Begin special checkbox type switch */ >> +/* ---------------------------------- */ >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox, >> [type="checkbox"]:checked.nrd-chkbox { >> + display: none; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox + label, >> +[type="checkbox"]:checked.nrd-chkbox + label{ >> + cursor: pointer; >> +} >> +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >> +[type="checkbox"]:checked.nrd-chkbox + label:before{ >> + content: ""; >> + width: 150px; >> + min-width: 150px; >> + background-color: @light-color-theme; >> + padding: 2px 20px 2px 20px; >> + border-radius: 8px 8px 8px 8px; >> + >> + cursor: pointer; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >> + content: ""; >> + position: relative; >> + left:-35px; >> + background-color: @dark-color-theme; >> + min-height: 10px; >> + min-width: 10px; >> + padding-left: 4px; >> + padding-right: 5px; >> + border-radius: 8px 8px 8px 8px; >> + transition: all .2s; >> +} >> + >> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >> + position: relative; >> + left: -15px; >> + transition: all .2s; >> +} >> +/* ---------------------------------- */ >> +/* End special checkbox type switch */ >> +/* ---------------------------------- */ >> + >> +/* ---------------------------------- */ >> +/* Begin square Checkbox */ >> +/* ---------------------------------- */ >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox, >> +[type="checkbox"]:checked.nrd-square-chkbox{ >> + position: absolute; >> + left: -9999px; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >> +[type="checkbox"]:checked.nrd-square-chkbox + label{ >> + content: ''; >> + padding-left: 35px; >> + position: relative; >> + cursor: pointer; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 12px; >> + >> +} >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> + content: ''; >> + position: absolute; >> + left:10px; >> + top: -4px; >> + width: 17px; >> + height: 17px; /* dim. de la case */ >> + border: 1px solid #aaa; >> + background: @light-color-theme; >> + border-radius: 2px; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >> + background: @light-color-theme; >> +} >> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> + background: @main-color-theme; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >> +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >> + content: 'â'; >> + position: absolute; >> + top: -4px; >> + left: 14px; >> + font-size: 16px; >> + color: @font-color-for-main; >> + transition: all .2s; >> +} >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >> + opacity: 0; >> + transform: scale(0); >> +} >> +[type="checkbox"]:checked.nrd-square-chkbox + label:after { >> + opacity: 1; >> + transform: scale(1); >> +} >> +/* ---------------------------------*/ >> +/* End square Checkbox */ >> +/* ---------------------------------*/ >> + >> +/* ---------------------------------*/ >> +/* Begin class content mgmt */ >> +/* ---------------------------------*/ >> + >> + >> +.flex-row { >> + display: flex; >> + flex-direction: row !important; >> +} >> +.flex-column { >> + display: flex; >> + flex-direction: column; >> +} >> + >> +.col-width-1 { >> + width: 10%; >> +} >> +.col-width-2 { >> + width: 20%; >> +} >> +.col-width-3 { >> + width: 30%; >> +} >> +.col-width-4 { >> + width: 40%; >> +} >> +.col-width-5 { >> + width: 50%; >> +} >> +.col-width-6 { >> + width: 60%; >> +} >> +.col-width-7 { >> + width: 70%; >> +} >> +.col-width-8 { >> + width: 80%; >> +} >> +.col-width-9 { >> + width: 90%; >> +} >> +.col-width-10 { >> + width: 100%; >> +} >> + >> +.align-v-center { >> + display:flex; >> + align-items: center; >> +} >> + >> +.align-h-center { >> + display:flex; >> + justify-content: center; >> +} >> + >> +/* ---------------------------------*/ >> +/* End class content mgmt */ >> +/* ---------------------------------*/ >> + >> + >> +/* ---------------------------------- */ >> +/* Begin btn-sort */ >> +/* ---------------------------------- */ >> + >> +.btn-sort { >> + position: relative; >> + top: -6px; >> + border:none; >> + background:none; >> + border-radius: 0; >> + margin-left:5px; >> +} >> + >> +.btn-sort:before{ >> + content: ''; >> + position: absolute; >> + left: -1px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-bottom: 10px solid @greydark; >> + border-left: 10px solid transparent; >> +} >> + >> +.btn-sort:after{ >> + content: ''; >> + position: absolute; >> + right: -1px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-top: 10px solid @greydark; >> + border-left: 10px solid transparent; >> + @media screen and (max-width: 1349px) { >> + right: -5px; >> + } >> +} >> + >> +.btn-sort.btn-sort-asc:before{ >> + border-bottom: 10px solid @main-color-theme; >> +} >> + >> +.btn-sort.btn-sort-desc:after{ >> + border-top: 10px solid @main-color-theme; >> +} >> + >> +/* ---------------------------------- */ >> +/* End btn-sort */ >> +/* ---------------------------------- */ >> + >> + >> +/* ---------------------------------- */ >> +/* Begin defaut colour class */ >> +/* ---------------------------------- */ >> + >> +.dark-color { >> + background-color: @dark-color-theme !important; >> + color: @font-color-for-dark !important; >> +} >> +.main-color { >> + background-color: @main-color-theme !important; >> + color: @font-color-for-main !important; >> +} >> +.medium-color { >> + background-color: @medium-color-theme !important; >> + color: @font-color-for-medium !important; >> +} >> +.light-color { >> + background-color: @light-color-theme !important; >> + color: @font-color-for-light !important; >> +} >> +.light2-color { >> + background-color: @light2-color-theme !important; >> + color: @font-color-for-light !important; >> +} >> + >> +.grey-color { >> + background-color: @grey !important; >> +} >> +.darkgrey-color { >> + background-color: @greydark !important; >> +} >> + >> +/* begin lookup widget */ >> +.ui-dialog { >> + opacity: 1; >> + z-index: 50; >> +} >> + >> +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >> + background: none !important; >> + background-color: @dark-color-theme !important; >> + button { >> + background: none; >> + background-color: @light-color-theme; >> + } >> +} >> +/* end lookup widget */ >> + >> +.main-bar-label { >> + color: @light-color-theme; >> + padding-left: 3px; >> + padding-right: 6px; >> + font-size: 15px; >> + font-weight: bold; >> +} >> + >> +#company-logo { >> + right: 10px; >> + top: 2px; >> + background: url("images/ofbiz-simple-white.svg") no-repeat left >> top / cover; >> + min-height: 50px; >> + min-width: 50px; >> + margin-right: 15px; >> + align-self: center; >> + @media screen and (min-width : 1232px) { >> + min-height: 50px; >> + min-width: 129px; >> + background: url("images/ofbiz-white.svg") no-repeat left top / >> cover; >> + } >> +} >> + >> +.modal-screen { >> + visibility: hidden; >> + display: flex; >> + flex-direction: column; >> + background-color: @grey; >> + opacity: .93; >> + position: fixed; >> + top: 0; >> + left: 0; >> + height: 100%; >> + width: 100%; >> + z-index: 9999; >> +} >> + >> +.modal-box{ >> + background-color: @white; >> + opacity: 1; >> + margin: 10%; >> + border-radius: 10px; >> + border: solid 2px @main-color-theme; >> + padding : 10px 40px 10px 40px; >> + .modal-header { >> + position: relative; >> + display: flex; >> + flex-direction: row; >> + h2 { >> + font-size: 25px; >> + font-weight: normal; >> + color: @main-color-theme; >> + } >> + .btn-close-nrd { >> + position: absolute; >> + right: 0; >> + display: flex; >> + justify-content: center; >> + border: solid 1px @main-color-theme; >> + border-radius: 5px; >> + color: @main-color-theme; >> + font-size: 25px; >> + height: 30px; >> + width: 30px; >> + text-decoration: none !important; >> + } >> + } >> + .modal-body { >> + p { >> + font-size: 20px; >> + } >> + } >> + .modal-footer { >> + position: relative; >> + height: 35px; >> + display: flex; >> + justify-content: flex-end; >> + .btn-nrd { >> + background: none; >> + border: none; >> + text-shadow: none; >> + opacity: 1; >> + margin-right: 10px; >> + font-size: 20px; >> + padding: 5px; >> + border-radius: 8px; >> + } >> + .btn-nrd-main { >> + background-color: @main-color-theme; >> + color: @white; >> + } >> + .btn-nrd-std { >> + background-color: @white; >> + color: @main-color-theme; >> + border: solid 1px @main-color-theme !important; >> + } >> + } >> +} >> +.btn-nrd:hover { >> + box-shadow: 5px 5px 3px 0 @black; >> +} >> + >> +.btn-nrd-std:hover { >> + background-color: @main-color-theme !important; >> + color: @white !important; >> + border: solid 1px @main-color-theme !important; >> +} >> + >> +.btn-close-nrd:hover { >> + background-color: @main-color-theme !important; >> + color: @white !important; >> +} >> + >> +.list-nrd { >> + border: solid 2px @main-color-theme; >> + border-bottom-left-radius: 10px; >> + border-bottom-right-radius: 10px; >> + display: flex; >> + flex-direction: column; >> + margin-top: 15px; >> + margin-bottom: 15px; >> + .title-list-nrd { >> + background-color: @main-color-theme; >> + color : @white; >> + font-size: 20px; >> + font-weight: bold; >> + padding-left: 5px; >> + } >> + >> + li { >> + position: relative; >> + display: flex; >> + flex-direction: row; >> + font-size: 20px; >> + padding-left: 5px; >> + padding-top: 2px; >> + padding-bottom: 2px; >> + margin-bottom: 3px; >> + a { >> + color: @main-color-theme; >> + } >> + span { >> + position: absolute; >> + right: 0; >> + color: @main-color-theme; >> + font-size: 30px; >> + } >> + } >> +} >> +li.line-odd { >> + background-color: @light-color-theme; >> +} >> + >> +#user-avatar { >> + height: 40px; >> + width: 40px; >> + padding: 2px; >> + >> + align-self: center; >> + >> + :hover { >> + cursor: pointer; >> + } >> + img { >> + max-height: 40px; >> + max-width: 40px; >> + position: relative; >> + top: -2px; >> + padding: 2px; >> + background-color: @white; >> + border-radius: 2px; >> + } >> +} >> + >> +#main-navigation-bar { >> + position: relative; >> + width: 100%; >> + min-width: @min-container-width; >> + display: flex; >> + flex-direction: row; >> + align-items: center; >> + justify-content: space-between; >> + font-family: Quicksand,sans-serif; >> + background-color: @dark-color-theme; >> + z-index: 5; >> + height: @app-bar-height; >> +} >> +#main-nav-bar-left { >> + position: relative; >> + display: flex; >> + align-items: center; >> +} >> +#main-nav-bar-right { >> + position: relative; >> + display: flex; >> + align-items: center; >> + padding-right: 15px; >> +} >> + >> +.app-btn{ >> + height: @app-bar-height; >> + background-color: @dark-color-theme; >> + display: flex; >> + align-items: center; >> + flex-direction: row; >> + margin-right: 2px; >> + margin-left: 2px; >> + a { >> + padding:10px; >> + color: @font-color-for-dark; >> + font-size: 1.4em !important; >> + } >> +} >> + >> +.app-btn a:visited { >> + color: @font-color-for-dark; >> +} >> + >> +.app-btn:hover{ >> + position: relative; >> + top: -6px; >> + background-color: @main-color-theme; >> + border-bottom-left-radius: 5px; >> + border-bottom-right-radius: 5px; >> + box-shadow: 1px 1px 12px @shadow-color; >> + a { >> + position: relative; >> + top: 6px; >> + color : @font-color-for-main; >> + } >> +} >> +.app-btn.selected:hover { >> + background-color: @dark-color-theme; >> + box-shadow: none; >> + top:0; >> +} >> + >> +.app-btn a:hover { >> + text-decoration: none; >> +} >> +#app-selected { >> + position: relative; >> + display: flex; >> + flex-direction: column; >> + align-items: center; >> + justify-content: center; >> + background-color: @main-color-theme; >> + box-shadow: 1px -2px 12px @shadow-color; >> + z-index: 0; >> + opacity: .99; >> + border-top-left-radius : 8px ; >> + border-top-right-radius : 8px ; >> + a { >> + position: relative; >> + top: 3px; >> + color: @font-color-for-main; >> + } >> +} >> +.app-btn.selected a:hover { >> + text-decoration: none; >> +} >> + >> +#app-bar-line { >> + position: relative; >> + width: 100%; >> + min-width: @min-container-width; >> + height: @color-line-height; >> + background-color: @main-color-theme; >> + box-shadow: 2px 2px 5px @shadow-color; >> +} >> +#color-add { >> + width: 150px; >> + background-color: @main-color-theme; >> + height: @color-line-height; >> + z-index: 20; >> + position: relative; >> + top: @color-line-height; >> +} >> + >> +#more-app { >> + position: relative; >> + display: flex; >> + align-items: center; >> + justify-content: center; >> + font-weight: bold; >> + font-size: 1.4em !important; >> + width: 40px; >> + height: @app-bar-height; >> + color: @font-color-for-dark; >> +} >> +#more-app:hover { >> + background-color: @main-color-theme; >> + text-decoration: none; >> +} >> +#more-app:hover #more-app-list { >> + display: block; >> +} >> +#more-app.selected { >> + background-color: @main-color-theme; >> +} >> + >> +#more-app-list { >> + display: none; >> + position: absolute; >> + top: @app-bar-height; >> + left: -20px; >> + background-color: @dark-color-theme; >> + z-index: 10; >> + border: solid 4px @main-color-theme; >> + border-top-width: @color-line-height; >> + border-bottom-left-radius: 4px; >> + border-bottom-right-radius: 4px; >> + li { >> + padding-left : 4px; >> + padding-right: 4px; >> + } >> + >> + a { >> + color: @font-color-for-dark; >> + font-size: 15px; >> + } >> + >> + :hover { >> + background-color: @medium-color-theme; >> + a { >> + box-shadow: none; >> + color: @dark-color-theme; >> + } >> + a:hover{ >> + box-shadow: none; >> + text-decoration: none; >> + border-radius: 0; >> + } >> + } >> + >> + li.selected { >> + background-color: @main-color-theme; >> + a { >> + color: @font-color-for-main; >> + } >> + a:hover { >> + color: @font-color-for-main; >> + background-color: @main-color-theme; >> + } >> + } >> +} >> + >> +#homeButton { >> + display: flex; >> + //visibility: hidden; >> + align-items: center; >> + justify-content: center; >> + background-color:@grey; >> + border: none; >> + border-radius : 0; >> + >> + height: @app-bar-height; >> + width : @home-btn-width; >> + text-decoration: none; >> + img { >> + height: 25px; >> + transition: all .2s ease-in-out; >> + } >> +} >> + >> +#homeButton:hover img { >> + transform: scale(1.1); >> +} >> + >> +#app-bar-list { >> + display: flex; >> +} >> + >> +#user-details { >> + position: absolute; >> + right: 20px; >> + top : 62px; >> + background-color: @dark-color-theme; >> + color : @font-color-for-dark; >> + font-size: 15px; >> + font-weight: bold; >> + padding-top: 5px; >> + padding-bottom: 10px; >> + z-index: 15; >> + box-shadow: 3px 3px 12px @shadow-color; >> + border-radius: 3px; >> + transition: all .1s ease-in-out; >> + >> + img { >> + height: 50px; >> + background-color: @white; >> + padding: 4px; >> + border-radius : 3px; >> + margin-left: 10px; >> + margin-right: 5px; >> + } >> + #logout { >> + background-color: @white; >> + color: @dark-color-theme !important; >> + border-radius: 2px; >> + :hover { >> + text-decoration: none; >> + } >> + } >> +} >> + >> +#user-details:after{ >> + content: ''; >> + position: absolute; >> + top: -10px; >> + right: 5px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-bottom: 10px solid @dark-color-theme; >> + border-left: 10px solid transparent; >> +} >> + >> +a.user-pref-btn { >> + margin-top: 15px; >> + background-color: @dark-color-theme; >> + margin-left: 10px; >> + margin-right: 10px; >> + padding-top: 2px; >> + padding-bottom: 2px; >> + display: flex; >> + justify-content: center; >> + color: @font-color-for-dark !important; >> + :hover { >> + text-decoration: none; >> + } >> +} >> + >> +#user-name { >> + display: flex; >> + flex-direction: column; >> + justify-content: center; >> + align-content: center; >> + padding-left : 5px; >> + padding-right : 5px; >> + span { >> + min-width: 100px; >> + padding-bottom : 5px; >> + padding-top : 5px; >> + } >> +} >> + >> +#user-row1 { >> + display: flex; >> + flex-direction: row; >> + justify-content: center; >> + #user-lang { >> + display: flex; >> + flex-direction: row; >> + justify-content: center; >> + align-content: center; >> + padding-left: 10px; >> + padding-right: 10px; >> + span { >> + min-width: 30px; >> + color: @font-color-for-dark; >> + } >> + } >> +} >> + >> +.appbar-btn-img { >> + height: @app-bar-height - 40px; >> +} >> + >> +#help-btn { >> + font-size: 10px; >> + min-width: 20px; >> + margin-right: 15px; >> +} >> +/* Begin sub Menu section */ >> + >> +#app-navigation { >> + height: @sub-app-bar-height; >> + border-right: solid 1px @black; >> + border-bottom: solid 1px @black; >> + width: 100%; >> + min-width: @min-container-width; >> + h2 { >> + display: none; >> + } >> + ul { >> + display: flex; >> + flex-direction: row; >> + background-color: @grey; >> + flex-grow: 1; >> + } >> + ul li ul li { >> + border-left: solid 1px @black; >> + height: @sub-app-bar-height; >> + display: flex; >> + align-items: center; >> + justify-items: center; >> + justify-content: center; >> + min-width: 75px; >> + padding-left: 6px; >> + padding-right: 6px; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + border-bottom: solid 1px @black; >> + font-size: 12px; >> + @media screen and (max-width: 1500px) { >> + font-size: 10px; >> + min-width: 65px; >> + } >> + @media screen and (max-width: 1300px) { >> + font-size: 10px; >> + min-width: 50px; >> + } >> + a { >> + display: flex; >> + justify-content: center; >> + align-items: center; >> + text-align: center; >> + height: 100%; >> + width: 100%; >> + text-decoration: none; >> + } >> + } >> +} >> + >> +#app-navigation ul li ul li:last-child { >> + border-right: solid 1px @black; >> +} >> + >> +#app-navigation ul li ul li:hover { >> + background-color: @main-color-theme; >> + min-height: @sub-app-bar-height; >> + position: relative; >> + //top: -1px; >> + a { >> + color: @white; >> + text-decoration: none; >> + } >> +} >> +#app-navigation ul li ul li.selected:hover { >> + a { >> + color: @black !important; >> + } >> +} >> + >> +#app-navigation ul li ul li.selected { >> + background-color: @white; >> + position: relative; >> + top: 1px; >> + height: @sub-app-bar-height + 1px; >> + border-top-right-radius: 2px; >> + border-top-left-radius: 2px; >> + border-bottom: none; >> + >> + :after { >> + content: ''; >> + position: absolute; >> + top: -2px; >> + left: 5px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-top: 10px solid @main-color-theme; >> + border-left: 10px solid transparent; >> + } >> + >> +} >> + >> + >> +/* End sub Menu section */ >> + >> +/* begin sub Menu section 3rd level */ >> + >> +.button-bar.tab-bar { >> + ul li ul li { >> + border: solid 1px @grey; >> + border-radius: 4px; >> + a { >> + width: 100%; >> + height: 100%; >> + } >> + } >> + li.selected{ >> + background-color: @main-color-theme; >> + a{ >> + color: @font-color-for-main; >> + } >> + } >> + ul li ul li:hover { >> + background-color: @main-color-theme; >> + a { >> + color: @font-color-for-main ; >> + } >> + } >> +} >> + >> +#third-level-menu-container { >> + display: flex; >> + flex-direction: row; >> +} >> +#working-area { >> + width: 100%; >> +} >> + >> +#left-column-menu { >> + width: 100px; >> +} >> + >> +.third-lvl-menu { >> + background-color: @dark-color-theme; >> + position: relative; >> + left: -10px; >> + border-top-right-radius: 4px; >> + border-bottom-right-radius: 4px; >> + padding-top: 4px; >> + padding-bottom: 4px; >> + ul { >> + li { >> + ul { >> + position: relative; >> + top: 5px; >> + width: @third-lvl-width; >> + } >> + } >> + } >> + h2 { >> + visibility: hidden; >> + } >> +} >> +.third-level-item:last-child { >> + border-bottom: solid 1px @main-color-theme; >> +} >> + >> +.third-level-item { >> + min-height: @third-lvl-height; >> + background-color: @dark-color-theme; >> + padding-right: 3px; >> + border-top: solid 1px @main-color-theme; >> + >> + a, a:visited { >> + display: flex; >> + justify-content: center; >> + align-items: center; >> + width: 100%; >> + color: @font-color-for-dark !important; >> + min-height: @third-lvl-height; >> + max-width: @third-lvl-width; >> + text-align: center; >> + } >> +} >> +.third-level-item.selected { >> + position: relative; >> + border-left: solid 9px @main-color-theme; >> + a, a:visited { >> + background-color: @white; >> + color: @dark-color-theme !important; >> + } >> + :after { >> + content: ''; >> + position: absolute; >> + top: 5px; >> + left: 0; >> + width: 0; >> + height: 0; >> + border-top: 10px solid transparent; >> + border-left: 10px solid @main-color-theme; >> + border-bottom: 10px solid transparent; >> + } >> +} >> + >> +.third-level-item a:hover { >> + background-color: @main-color-theme; >> + color: @font-color-for-main ; >> + text-decoration: none; >> +} >> +/* End 3rd level menu */ >> + >> + >> + >> +/* Begin Home Menu for IB section */ >> +.fixed-nav-bar { >> + position: fixed !important; >> + width: 100%; >> +} >> +#nav-bar-offset { >> + height: @app-bar-height ; >> +} >> + >> +#homeGlyph { >> + margin-left: 20px; >> + height: 20px; >> +} >> + >> +#homePageTitle { >> + color: @white; >> + font-size: 20px; >> + font-weight: bold; >> + margin-right: 20px; >> + margin-left: 20px; >> +} >> +.home-menu-list { >> + display: flex; >> + flex-direction: column; >> + align-items: center; >> +} >> +.hp-applist { >> + display: flex; >> + flex-direction: row; >> + color : @white; >> + align-items: center; >> + .app-title { >> + display: flex; >> + align-items: center; >> + justify-content: center; >> + background-color: @dark-color-theme; >> + height: @home-menu-tile-height; >> + padding: 5px 10px 5px 10px; >> + border-bottom: solid 1px @black; >> + span { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> + font-size: 15px; >> + font-weight: bold; >> + width: 110px; >> + a { >> + display: flex; >> + justify-content: center; >> + color : @white; >> + } >> + } >> + } >> + >> + .hp-menu-item { >> + display: flex; >> + align-items: center; >> + justify-content: center; >> + position: relative; >> + margin-left: 5px; >> + margin-right: 5px; >> + border: solid 2px @grey; >> + border-radius: 8px; >> + height: @home-menu-tile-height - 4px; >> + min-width: @home-menu-tile-min-width; >> + max-width: @home-menu-tile-max-width; >> + .menu-link { >> + font-size: 10px; >> + color: @black; >> + padding: 10px; >> + } >> + .star-link { >> + position: absolute; >> + height: 25px; >> + top: 5px; >> + right: 5px; >> + } >> + } >> + >> +} >> +.hp-applist .app-title span a:hover { >> + text-decoration: none; >> +} >> + >> +.hp-menu-item.favoriteItem { >> + border: solid 2px @dark-color-theme; >> +} >> + >> +.hp-menu-item:hover { >> + box-shadow: 3px 3px 12px @shadow-color; >> + a { >> + text-decoration: none; >> + } >> +} >> + >> +/* End Home Menu for IB section */ >> + >> +/* Begin Login screenlet */ >> +#login-container { >> + #content-messages { >> + position: relative; >> + top: @app-bar-height; >> + border-radius: 4px; >> + width: 97%; >> + &.errorMessage { >> + background-color : @color-background-alert !important; >> + color: @color-font-alert !important; >> + border : solid 1px @color-border-alert !important; >> + } >> + &.eventMessage { >> + background-color : @color-background-success !important; >> + color: @color-font-success !important; >> + border : solid 1px @color-border-success !important; >> + } >> + } >> +} >> +#loginBar { >> + position: fixed; >> + top:0; >> + left: 0; >> + width: 100%; >> + height: @app-bar-height; >> + background-color: @dark-color-theme; >> + span { >> + background-color: @white; >> + color: @main-color-theme; >> + border-top-right-radius: 5px; >> + border-top-left-radius: 5px; >> + font-size: 25px; >> + position: relative; >> + top: @app-bar-height - 32px; >> + left: 15px; >> + padding: 5px 10px 5px 10px; >> + } >> + #company-logo { >> + position: absolute; >> + } >> +} >> + >> +.login-screenlet { >> + display: flex; >> + flex-direction: column; >> + min-width: 300px; >> + max-width: 50em; >> + border-radius: 8px !important; >> + margin-top: 15%; >> + box-shadow: 3px 3px 12px @shadow-color; >> + .screenlet-title-bar { >> + display: flex; >> + align-content: center; >> + justify-content: center; >> + margin:0; >> + padding:0; >> + h3{ >> + padding-top:2px; >> + padding-bottom:2px; >> + background-color: @dark-color-theme !important; >> + color: @font-color-for-dark; >> + height: 100%; >> + width:100%; >> + text-shadow: none; >> + font-size: 25px; >> + } >> + } >> + .screenlet-body { >> + background-color: @main-color-theme !important; >> + form { >> + .button { >> + width: 150px; >> + border-radius: 4px; >> + background: none; >> + background-color: @dark-color-theme; >> + color: @font-color-for-dark; >> + text-shadow: none; >> + margin-top: 20px; >> + margin-bottom: 10px; >> + } >> + >> + table { >> + tr { >> + width: 100%; >> + .label { >> + color: @font-color-for-main; >> + width: 25%; >> + font-size: 15px; >> + } >> + input { >> + width: 100%; >> + } >> + .buttontext, >> + [type="submit"] { >> + width: 150px; >> + border-radius: 4px; >> + background: none; >> + background-color: @dark-color-theme; >> + color: @font-color-for-dark; >> + text-shadow: none; >> + } >> + [name="GET_PASSWORD_HINT"] { >> + background-color: @font-color-for-dark; >> + color: @main-color-theme; >> + border: none; >> + width: 100%; >> + } >> + [name="EMAIL_PASSWORD"] { >> + background-color: @font-color-for-dark; >> + color: @main-color-theme; >> + border: none; >> + width: 100%; >> + } >> + td { >> + padding: 5px; >> + color: @font-color-for-main; >> + font-size: 15px; >> + font-weight: bold; >> + } >> + } >> + } >> + } >> + a { >> + color: @font-color-for-main; >> + } >> + } >> +} >> + >> +.login-screenlet .screenlet-title-bar { >> + text-align: center; >> +} >> + >> +/* End Login screenlet */ >> + >> + >> +/* --------------------------------------------- */ >> +/* Begin Screenlet style */ >> +/* --------------------------------------------- */ >> +.screenlet-title-bar { >> + text-decoration: none ; >> + color: @dark-color-theme; >> + background-color: @grey; >> + height: 1%; /* IE fix */ >> + min-height: 1.5em; >> + padding:0.8em 0.2em; >> +} >> + >> +.screenlet { >> + border-radius: 5px; >> + border: solid 1px @grey; >> + height: auto !important; >> + margin-bottom: 1em; >> + overflow: auto; >> +} >> + >> +.screenlet-body { >> + background-color: #FFFFFF; >> + height: auto !important; >> + height: 1%; >> + padding: 0.4em; >> +} >> + >> +.screenlet-body div { >> + margin: 0.8em 0.1em >> +} >> + >> +/* Special Screenlet style for locale and timezone window */ >> +.lists.screenlet { >> + margin-left: 25%; >> + margin-right: 25%; >> + margin-top: 1em; >> +} >> + >> +.lists.screenlet .basic-table tr td { >> + text-align: center; >> +} >> + >> +.lists.screenlet .basic-table tr td a { >> + display: block; >> +} >> + >> +/* Alternate table header style */ >> +.basic-table .header-row-2 th, >> +.basic-table .header-row-2 td { >> + background-color: @greydark; >> + border-bottom: 0; >> + border-left: 0.1em solid #aaa; >> + border-right: 0.1em solid #888; >> + color: #ffffff; >> + font-weight: bold; >> +} >> + >> +/* No padding screenlet decorator */ >> +.no-padding { >> + padding: 0; >> + border: none; >> +} >> + >> +.no-padding .h1, >> +.no-padding .h2, >> +.no-padding .h3, >> +.no-paddingr h1, >> +.no-padding h2, >> +.no-padding h3 { >> + padding: 0.7em; >> +} >> + >> +.screenlet-title-bar ul a:hover { >> + color: @main-color-theme !important; >> + text-decoration: none; >> +} >> + >> + >> +/* --------------------------------------------- */ >> +/* End Screenlet style */ >> +/* --------------------------------------------- */ >> + >> +/* ---------------------- */ >> +/* Table Styles */ >> +/* ---------------------- */ >> + >> +.basic-table { >> + background-color: #ffffff; >> + color: #000000; >> + margin-bottom: 1em; >> + width: 100%; >> +} >> + >> +form table, >> +form .basic-table, >> +.screenlet-body .basic-table { >> + background: transparent; >> + margin-bottom: 0; >> +} >> + >> +.basic-table tr td { >> + /* Style for all cells */ >> + padding: 0.8em 0.1em; >> + vertical-align: middle; >> +} >> + >> +.basic-table tr .align-bottom { >> + vertical-align: bottom; >> +} >> + >> +.basic-table tr .align-top { >> + vertical-align: top; >> +} >> + >> +.basic-table tr .label, >> +.basic-table tr .group-label { >> + /* field labels for forms */ >> + font-weight: bold; >> + text-align: right; >> + padding-right: 1.5em; >> + white-space: nowrap; >> + width: 1%; >> +} >> + >> +.basic-table tr .group-label { >> + /* "header" for field label groups */ >> + font-size: 1.2em; >> + padding: 2em 1.5em 0 0; >> +} >> + >> +.basic-table tr th, >> +.basic-table .header-row { >> + font-weight: bold; >> + text-align: left; >> +} >> + >> +.basic-table .header-row td { >> + border-bottom: 0.1em solid #000000; >> +} >> + >> +.basic-table .header-row td a { >> + color: #000000; >> +} >> + >> +.basic-table .alternate-row { >> + /* Alternating row style */ >> + background-color: #eeeeee; >> +} >> + >> +.basic-table .selected { >> + background: #FFFCCF; >> +} >> + >> +.basic-table .alternate-rowSelected { >> + background: #FFF55F; >> +} >> + >> +.basic-table .Validate { >> + /*Style use by alt-row-style on list*/ >> + background: #A0D5F7; >> +} >> + >> +.basic-table .alternate-rowValidate { >> + /*Style use by alt-row-style on list*/ >> + background: #72A8F2; >> +} >> + >> +.basic-table .Warn { >> + /*Style use by alt-row-style on list*/ >> + background: #f55C5C; >> +} >> + >> +.basic-table .alternate-rowWarn { >> + /*Style use by alt-row-style on list*/ >> + background: #FC7455; >> +} >> + >> +.basic-table tr .button-col { >> + /* button column style - for the small >> + collection of buttons used in lists */ >> + vertical-align: top; >> + padding: 0.3em; >> +} >> +.basic-table tr .button-col a, >> +.basic-table tr .button-col button, >> +.basic-table tr .button-col input[type="reset"], >> +.basic-table tr .button-col input[type="submit"], >> +.basic-table tr .button-col input[type="button"] { >> + -webkit-appearance: none; >> + -moz-border-radius: 1em; >> + -webkit-border-radius: 1em; >> + border-radius: 2px; >> + border: 0.1em solid @main-color-theme; >> + background-color: @white; >> + cursor: pointer; >> + color: @main-color-theme; >> + display:inline-block; >> + font-size: 0.9em; >> + font-weight: bold; >> + outline: 0; >> + overflow: visible; >> + padding: 0.1em 0.5em 0.2em 0.5em; >> + text-decoration: none; >> + width: auto; >> + >> + &:hover { >> + background-color: @main-color-theme; >> + color: @white; >> + } >> +} >> + >> +.basic-table .collapsed { >> + visibility: collapse; >> +} >> + >> +/* Sort field style */ >> +.basic-table .header-row-2 th .sort-order-asc, >> +.basic-table .header-row-2 td .sort-order-asc{ >> + background: url(/images/arrow-gr-up.png) no-repeat right; >> + padding-left: 0.5em; >> + padding-right: 20px; /* Setting must be in px */ >> +} >> +.basic-table .header-row-2 th .sort-order-desc, >> +.basic-table .header-row-2 td .sort-order-desc{ >> + background: url(/images/arrow-gr-dw.png) no-repeat right; >> + padding-left: 0.5em; >> + padding-right: 20px; /* Setting must be in px */ >> +} >> +.basic-table .header-row-2 th .sort-order, >> +.basic-table .header-row-2 td .sort-order{ >> + background: url(/images/arrow-gr.png) no-repeat right; >> + padding-left: 0.5em; >> + padding-right: 20px; /* Setting must be in px */ >> + color:#fff >> +} >> + >> + >> +/* --------------------------------------------- */ >> +/* Begin Message Info */ >> +/* --------------------------------------------- */ >> +.count-message { >> + display: flex; >> + align-items: center; >> + justify-content: center; >> + min-height:20px; >> + min-width: 20px; >> + max-height:20px; >> + max-width: 20px; >> + background: @white; >> + font-size:12px; >> + font-weight: bold; >> + border-radius: 50%; >> +} >> +.info-message-title { >> + min-width:150px; >> + margin: 5px; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 16px; >> + font-weight: bold; >> +} >> +.message-list { >> + position:relative; >> + margin-top: 10px; >> + box-shadow: 1px 3px 5px @greydark; >> + border-radius: 0 5px 5px 0; >> + transition: height 2s; >> +} >> +.message-list-main { >> + padding: 5px 15px 5px 15px; >> +} >> +.message-list-alert { >> + background-color: @color-alert; >> + border-left : solid 5px @color-alert-dark; >> + .count-message { >> + color: @color-alert-dark; >> + } >> +} >> +.message-list-success { >> + background-color: @color-success; >> + border-left: solid 5px @color-success-dark; >> + .count-message { >> + color: @color-success-dark; >> + } >> +} >> +.message-list-table-container { >> + background-color: @white; >> + border-radius: 5px; >> + overflow: hidden; >> + height: 0; >> +} >> +.info-message-success { >> + display: none; >> +} >> +.info-message-alert { >> + display: none; >> +} >> +table.msg-list { >> + width: 100%; >> + font-size: 16px; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + padding: 0; >> + thead { >> + height: 100%; >> + background-color: @grey; >> + margin: 0; >> + padding: 0; >> + tr{ >> + font-weight: bold; >> + border-bottom: solid 1px @black; >> + height: 100%; >> + background-color: @grey; >> + line-height: 30px; >> + } >> + } >> + tbody { >> + tr { >> + line-height: 25px; >> + } >> + tr.msg-row-success { >> + background-color: @color-success; >> + } >> + tr.msg-row-alert { >> + background-color: @color-alert; >> + } >> + } >> + td { >> + padding-left: 5px; >> + } >> +} >> + >> +/* --------------------------------------------- */ >> +/* End Message Info */ >> +/* --------------------------------------------- */ >> + >> +/* ---------------------- */ >> +/* Paginate Style */ >> +/* ---------------------- */ >> + >> +.paginate-bar-nrd { >> + display: flex; >> + flex-direction: row; >> + align-items: center; >> + font-size: 15px; >> + background-color: @grey; >> + padding-left: 10px; >> + padding-top: 3px; >> + padding-bottom: 3px; >> + box-shadow: 0 2px 5px @shadow-color; >> + >> + ul.paginate-pg-list { >> + display: flex; >> + flex-direction: row; >> + background-color: @white; >> + color: @main-color-theme; >> + margin-right: 10px; >> + border-radius: 8px; >> + border: solid 1px @box-border-color; >> + height: 18px; >> + li { >> + display: flex; >> + justify-content: center; >> + min-width: 17px; >> + border-right: solid 1px @box-border-color; >> + padding-left: 2px; >> + padding-right: 2px; >> + height:100%; >> + a { >> + display: flex; >> + justify-content: center; >> + align-items: center; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + color: @dark-color-theme; >> + height: 100%; >> + width: 100%; >> + } >> + .paginate-disable { >> + >> + } >> + } >> + li.selected { >> + background-color: @main-color-theme; >> + a { >> + color: @font-color-for-main; >> + } >> + } >> + li:first-child, li:last-child { >> + width: 20px; >> + } >> + li:first-child { >> + border-top-left-radius: 3px; >> + border-bottom-left-radius: 3px; >> + } >> + li:last-child { >> + border-right: none; >> + border-top-right-radius: 3px; >> + border-bottom-right-radius: 3px; >> + } >> + } >> + >> +} >> +select.paginate-select { >> + position: relative; >> + background: @white; >> + font-size: 16px; >> + font-weight: bold; >> + border: 1px solid @box-border-color; >> + option { >> + display: flex; >> + justify-self: center; >> + font-size: 14px; >> + } >> +} >> + >> +.paginate-select-label { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 16px; >> + padding-left: 15px; >> + padding-right: 15px; >> +} >> + >> +.paginate-information { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 16px; >> + padding-left: 15px; >> + padding-right: 15px; >> +} >> + >> +ul.paginate-pg-list li:hover{ >> + background-color: @main-color-theme; >> + a { >> + text-decoration: none; >> + color: @font-color-for-main; >> + } >> +} >> + >> +/* End of Paginate Style */ >> +/* ---------------------- */ >> + >> +/* ------------------------------- */ >> +/* List Navigation Style */ >> +/* ------------------------------- */ >> + >> +.nav-pager { >> + background-color: @greydark; >> + color: @white; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 9px; >> + font-weight: bold; >> + line-height: 3.5em; >> + height: 3.5em; >> + margin: 0.5em 0 0.5em 0; >> + border-radius: 3px 3px 0 0; >> +} >> + >> +.nav-pager ul { >> + display: inline; /* IE Fix */ >> +} >> + >> +.nav-pager ul li { >> + float:left; >> + vertical-align: middle; >> +} >> + >> +.nav-pager ul li a { >> + display: block; >> +} >> + >> +.nav-pager ul a { >> + color: @white; >> + padding: 0 1em 0 1em; >> + text-decoration: none; >> +} >> + >> +.nav-pager ul a:hover { >> + background-color: @main-color-theme; >> + color: @font-color-for-main; >> +} >> + >> +.nav-pager ul .nav-pagesize, >> +.nav-pager ul .nav-page-select, >> +.nav-pager ul .nav-displaying { >> + padding: 0 1em 0 1em; >> +} >> + >> +.nav-pager ul .nav-first-disabled, >> +.nav-pager ul .nav-previous-disabled, >> +.nav-pager ul .nav-next-disabled, >> +.nav-pager ul .nav-last-disabled { >> + padding: 0 1em 0 1em; >> +} >> + >> +.nav-pager ul .nav-first-disabled:hover, >> +.nav-pager ul .nav-previous-disabled:hover, >> +.nav-pager ul .nav-next-disabled:hover, >> +.nav-pager ul .nav-last-disabled:hover { >> + cursor: not-allowed; >> +} >> + >> + >> +.nav-pager ul .nav-displaying { >> + border-right: none; >> +} >> + >> + >> +/* ---------------------------- */ >> +/* Multi-Column Styles */ >> +/* ---------------------------- */ >> + >> +#column-container { >> + margin: auto; >> + padding: 1em; >> + position: relative; >> + min-width: @min-container-width; >> +} >> + >> +#column-container h1, >> +#column-container .h1, >> +#column-container h2, >> +#column-container .h2 { >> + margin-bottom: 0.5em; >> +} >> + >> +#column-container h1, >> +#column-container .h1 { >> + color: #557996; >> +} >> + >> +#column-container .left { >> + float: left; >> + /* alt: position: absolute; top: 0px; left: 0px; */ >> + width: 22em; >> + margin-right: 1em; >> +} >> + >> +#column-container .left-larger { >> + float: left; >> + /* alt: position: absolute; top: 0px; left: 0px; */ >> + width: 25em; >> + margin-right: 1em; >> +} >> + >> +.lefthalf { >> + float: left; >> + height: 1%; >> + left: 0; >> + margin: 0% 1% 1% 0%; >> + width: 49%; >> +} >> + >> +.righthalf { >> + float: right; >> + height: 1%; >> + margin: 0 0 1% 1%; >> + right: 0; >> + width: 49%; >> +} >> + >> +#column-container .right { >> + float: right; >> + margin-left: 1em; >> + width: 22em; >> +} >> + >> +#column-container .leftonly { >> + margin-left: 23em; >> + width: auto; >> +} >> + >> +#column-container .leftonly-larger { >> + margin-left: 26em; >> + width: auto; >> +} >> + >> +#column-container .rightonly { >> + margin-right: 23em; >> + width: auto; >> +} >> + >> +#column-container .center { >> + margin-left: 23em; >> + margin-right: 23em; >> + width: auto; >> +} >> + >> +#column-container .nocolumns { >> + width: auto; >> +} >> + >> +/* ---------------------- */ >> +/* Button Style */ >> +/* ---------------------- */ >> + >> +.button-bar li.buttontext a, >> +a.buttontext, >> +a.buttontextbig, >> +.smallSubmit, >> +.smallSubmit:hover, >> +.mediumSubmit, >> +.largeSubmit, >> +.loginButton, >> +.button-style-1 a, >> +.button-style-1 ul a, >> +.button-style-2 ul a, >> +.button-style-2 a, >> +.button, >> +button, >> +input[type="reset"], >> +input[type="submit"], >> +input[type="button"] { >> + -webkit-appearance: none; >> + -moz-border-radius: 1.1em; >> + -webkit-border-radius: 1.1em; >> + border-radius: 2px; >> + border: 0.1em solid @main-color-theme; >> + background-color: @white; >> + cursor: pointer; >> + color: @main-color-theme; >> + display:inline-block; >> + font-size: 1em; >> + font-weight: bold; >> + outline: 0; >> + overflow: visible; >> + padding: 0.4em 1em 0.4em; >> + text-decoration:none; >> + /*text-transform:uppercase;*/ >> + width: auto; >> + >> + &:hover { >> + color: @font-color-for-main; >> + background-color: @main-color-theme; >> + } >> +} >> + >> + >> +/* ---------------------- */ >> +/* Footer Style */ >> +/* ---------------------- */ >> + >> +#footer { >> + background: @dark-color-theme; >> + border-top: 0.1em inset #000; >> + padding: 0.5em 0 0.5em 0.5em; >> + >> + height: @footer-height; >> + position: fixed; >> + bottom: 0; >> + width: 100%; >> + display: flex; >> + flex-direction: row; >> + align-items: center; >> + justify-content: space-between; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> + z-index: 10; >> + >> + span { >> + color: @font-color-for-dark; >> + padding: 10px; >> + } >> + >> + a { >> + color: @font-color-for-dark; >> + font-weight: normal; >> + } >> +} >> + >> +#footer a:focus { >> + text-decoration: underline; >> +} >> + >> +#footer-offset { >> + height: @footer-height + 10px; >> + width: 100%; >> +} >> >> >> >> > > > > |
In reply to this post by Jacques Le Roux
Please keep in mind that the OEM (https://oem.ofbizci.net/oci-2) is just a
place to promote the components. That is why it lists both OFBiz controlled components and themes (in ASF SVN) and products that are controlled by others (and elsewhere, e.g. GitHub). It links through to the actual locations of: - the product description - the code repository of the contributor. It doesn't provide code storage. But, any contributor can have his product listed. Best regards Pierre Smits ORRTIZ.COM <http://www.orrtiz.com> OFBiz based solutions & services OFBiz Extensions Marketplace http://oem.ofbizci.net/oci-2/ On Wed, Aug 24, 2016 at 7:52 AM, Jacques Le Roux < [hidden email]> wrote: > OK, the *.less type is not in the svn config. I'll revert, add it, and > commit again. > > So again, please committers remember to do so when you commit a new file > type. > > While at it I really wonder if we need to have 4 colored versions of the > same theme in trunk? > > I suggest to have only one and propose the others as external components, > later plugins. We could use a third party location to propose the 3 others > theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.) > > Opinions? > > Jacques > > Le 24/08/2016 à 07:44, [hidden email] a écrit : > >> Author: jleroux >> Date: Wed Aug 24 05:44:00 2016 >> New Revision: 1757462 >> >> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev >> Log: >> Removes now useless IE7 "star html hack". I was used to prevent IE7 from >> applying some CCS rules: http://css-discuss.incutio.com >> /wiki/Star_Html_Hack >> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.c >> om/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ >> >> Thanks to Florian Montalbano research at "css property name correction in >> flatgrey and rainbowstone themes" - https://issues.apache.org/jira >> /browse/OFBIZ-7960# >> >> I checked, the IE7 market share is residual, no needs to keep this >> dragging down feature >> >> Modified: >> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >> rainbowstone-amber.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >> rainbowstone-emerald.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >> rainbowstone-ruby.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >> rainbowstone-saphir.less >> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css >> >> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/web >> app/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff >> ============================================================ >> ================== >> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) >> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 >> 05:44:00 2016 >> @@ -922,10 +922,6 @@ form .basic-table, >> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >> /*text-transform:uppercase;*/ >> width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> } >> .basic-table .collapsed { >> @@ -1512,16 +1508,6 @@ input[type="button"] { >> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >> /*text-transform:uppercase;*/ >> width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> -} >> - >> -button { >> - /* IE7 */ >> - *padding-top: 0.1em; >> - *padding-bottom: 0.1em; >> } >> a.disabled, >> @@ -1563,11 +1549,6 @@ input[type="week"] { >> padding: 0.2em 0.3em; >> height: 1.8em; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0.1em; >> - *height: auto; >> } >> /* >> >> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >> rainbowstone-amber.less >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone >> /webapp/rainbowstone/rainbowstone-amber.less?rev= >> 1757462&r1=1757461&r2=1757462&view=diff >> ============================================================ >> ================== >> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> (original) >> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >> Wed Aug 24 05:44:00 2016 >> @@ -1,1997 +1,1990 @@ >> -/* common colors */ >> -@black: #000; >> -@white: #fff; >> -@grey: #e6e6e6; >> -@greydark: #929292; >> - >> -@color-success: #8cff8c; >> -@font-color-for-success: @black; >> -@color-alert: #ff8c8c; >> -@font-color-for-alert: @black; >> - >> -@color-success-dark: #356e35; >> -@font-color-for-success: @black; >> -@color-alert-dark: #932f33; >> -@font-color-for-alert: @black; >> - >> -@color-background-alert: #f2dede; >> -@color-font-alert: #a94442; >> -@color-border-alert: #ebccd1; >> - >> -@color-background-success: #dff0d8; >> -@color-font-success: #3c763d; >> -@color-border-success: #d6e9c6; >> - >> -/* Saphir colors */ >> -@blue-dark: #002333; >> -@blue-main: #005982; >> -@blue-medium: #c7dfff; >> -@blue-light: #f1f7ff; >> -@blue-light2: #e4f0f5; >> - >> -/* Ruby colors */ >> -@red-dark: #420000; >> -@red-main: #bf1616; >> -@red-medium: #f7baba; >> -@red-light: #fce7e7; >> -@red-light2: #fed7c9; >> - >> -/* Emerald colors */ >> -@green-dark: #197948; >> -@green-main: #23af9b; >> -@green-medium: #7ae3ad; >> -@green-light: #e5f9ef; >> -@green-light2: #d7f9ef; >> - >> -/* Amber colors */ >> -@amber-dark: #bc4216; >> -@amber-main: #f08906; >> -@amber-medium: #f5c4b3; >> -@amber-light: #fcede8; >> -@amber-light2: #fcedcd; >> - >> -/* Saphir theme */ >> -/* >> -@main-color-theme : @blue-main; >> -@dark-color-theme : @blue-dark; >> -@medium-color-theme : @blue-medium; >> -@light-color-theme : @blue-light; >> -@light2-color-theme : @blue-light2; >> -@font-color-for-dark : @grey; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -*/ >> - >> -/* Ruby theme */ >> -/* >> -@main-color-theme : @red-main; >> -@dark-color-theme : @red-dark; >> -@medium-color-theme : @red-medium; >> -@light-color-theme : @red-light; >> -@light2-color-theme : @red-light2; >> -@font-color-for-dark : @grey; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -/* >> - >> -/* Emerald theme */ >> -/* >> -@main-color-theme : @green-main; >> -@dark-color-theme : @green-dark; >> -@medium-color-theme : @green-medium; >> -@light-color-theme : @green-light; >> -@light2-color-theme : @green-light2; >> -@font-color-for-dark : @white; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> -*/ >> -/* Amber theme */ >> -@main-color-theme : @amber-main; >> -@dark-color-theme : @amber-dark; >> -@medium-color-theme : @amber-medium; >> -@light-color-theme : @amber-light; >> -@light2-color-theme : @amber-light2; >> -@font-color-for-dark : @white; >> -@font-color-for-main : @white; >> -@font-color-for-medium : @dark-color-theme; >> -@font-color-for-light : @dark-color-theme; >> -@shadow-color : @black; >> -@shadow-color-light : @greydark; >> - >> - >> -@app-bar-height: 60px; >> -@sub-app-bar-height: 40px; >> -@footer-height: 20px; >> -@home-btn-width: 47px; >> -@color-line-height: 9px; >> - >> -@home-menu-tile-height: 80px; >> -@home-menu-tile-min-width: 100px; >> -@home-menu-tile-max-width: 100px; >> - >> -@third-lvl-height: 80px; >> -@third-lvl-width : 100px; >> -@min-screen : 1170px; >> -@min-container-width: 1130px; >> - >> -@box-border-color: #d7d7d7; >> - >> -@font-face { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - src: url('fonts/quicksand/quicksandbold.otf'); >> - font-weight: normal; >> - font-style: normal; >> -} >> - >> -@font-face { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - src: url('fonts/quicksand/quicksandbold.otf'); >> - font-weight: bold; >> - font-style: normal; >> -} >> - >> -/* ---------------------------------- */ >> -/* Begin special checkbox type switch */ >> -/* ---------------------------------- */ >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox, >> [type="checkbox"]:checked.nrd-chkbox { >> - display: none; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox + label, >> -[type="checkbox"]:checked.nrd-chkbox + label{ >> - cursor: pointer; >> -} >> -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >> -[type="checkbox"]:checked.nrd-chkbox + label:before{ >> - content: ""; >> - width: 150px; >> - min-width: 150px; >> - background-color: @light-color-theme; >> - padding: 2px 20px 2px 20px; >> - border-radius: 8px 8px 8px 8px; >> - >> - cursor: pointer; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >> - content: ""; >> - position: relative; >> - left:-35px; >> - background-color: @dark-color-theme; >> - min-height: 10px; >> - min-width: 10px; >> - padding-left: 4px; >> - padding-right: 5px; >> - border-radius: 8px 8px 8px 8px; >> - transition: all .2s; >> -} >> - >> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >> - position: relative; >> - left: -15px; >> - transition: all .2s; >> -} >> -/* ---------------------------------- */ >> -/* End special checkbox type switch */ >> -/* ---------------------------------- */ >> - >> -/* ---------------------------------- */ >> -/* Begin square Checkbox */ >> -/* ---------------------------------- */ >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox, >> -[type="checkbox"]:checked.nrd-square-chkbox{ >> - position: absolute; >> - left: -9999px; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >> -[type="checkbox"]:checked.nrd-square-chkbox + label{ >> - content: ''; >> - padding-left: 35px; >> - position: relative; >> - cursor: pointer; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 12px; >> - >> -} >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> - content: ''; >> - position: absolute; >> - left:10px; >> - top: -4px; >> - width: 17px; >> - height: 17px; /* dim. de la case */ >> - border: 1px solid #aaa; >> - background: @light-color-theme; >> - border-radius: 2px; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >> - background: @light-color-theme; >> -} >> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> - background: @main-color-theme; >> -} >> - >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >> -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >> - content: '✔'; >> - position: absolute; >> - top: -4px; >> - left: 14px; >> - font-size: 16px; >> - color: @font-color-for-main; >> - transition: all .2s; >> -} >> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >> - opacity: 0; >> - transform: scale(0); >> -} >> -[type="checkbox"]:checked.nrd-square-chkbox + label:after { >> - opacity: 1; >> - transform: scale(1); >> -} >> -/* ---------------------------------*/ >> -/* End square Checkbox */ >> -/* ---------------------------------*/ >> - >> -/* ---------------------------------*/ >> -/* Begin class content mgmt */ >> -/* ---------------------------------*/ >> - >> - >> -.flex-row { >> - display: flex; >> - flex-direction: row !important; >> -} >> -.flex-column { >> - display: flex; >> - flex-direction: column; >> -} >> - >> -.col-width-1 { >> - width: 10%; >> -} >> -.col-width-2 { >> - width: 20%; >> -} >> -.col-width-3 { >> - width: 30%; >> -} >> -.col-width-4 { >> - width: 40%; >> -} >> -.col-width-5 { >> - width: 50%; >> -} >> -.col-width-6 { >> - width: 60%; >> -} >> -.col-width-7 { >> - width: 70%; >> -} >> -.col-width-8 { >> - width: 80%; >> -} >> -.col-width-9 { >> - width: 90%; >> -} >> -.col-width-10 { >> - width: 100%; >> -} >> - >> -.align-v-center { >> - display:flex; >> - align-items: center; >> -} >> - >> -.align-h-center { >> - display:flex; >> - justify-content: center; >> -} >> - >> -/* ---------------------------------*/ >> -/* End class content mgmt */ >> -/* ---------------------------------*/ >> - >> - >> -/* ---------------------------------- */ >> -/* Begin btn-sort */ >> -/* ---------------------------------- */ >> - >> -.btn-sort { >> - position: relative; >> - top: -6px; >> - border:none; >> - background:none; >> - border-radius: 0; >> - margin-left:5px; >> -} >> - >> -.btn-sort:before{ >> - content: ''; >> - position: absolute; >> - left: -1px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-bottom: 10px solid @greydark; >> - border-left: 10px solid transparent; >> -} >> - >> -.btn-sort:after{ >> - content: ''; >> - position: absolute; >> - right: -1px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-top: 10px solid @greydark; >> - border-left: 10px solid transparent; >> - @media screen and (max-width: 1349px) { >> - right: -5px; >> - } >> -} >> - >> -.btn-sort.btn-sort-asc:before{ >> - border-bottom: 10px solid @main-color-theme; >> -} >> - >> -.btn-sort.btn-sort-desc:after{ >> - border-top: 10px solid @main-color-theme; >> -} >> - >> -/* ---------------------------------- */ >> -/* End btn-sort */ >> -/* ---------------------------------- */ >> - >> - >> -/* ---------------------------------- */ >> -/* Begin defaut colour class */ >> -/* ---------------------------------- */ >> - >> -.dark-color { >> - background-color: @dark-color-theme !important; >> - color: @font-color-for-dark !important; >> -} >> -.main-color { >> - background-color: @main-color-theme !important; >> - color: @font-color-for-main !important; >> -} >> -.medium-color { >> - background-color: @medium-color-theme !important; >> - color: @font-color-for-medium !important; >> -} >> -.light-color { >> - background-color: @light-color-theme !important; >> - color: @font-color-for-light !important; >> -} >> -.light2-color { >> - background-color: @light2-color-theme !important; >> - color: @font-color-for-light !important; >> -} >> - >> -.grey-color { >> - background-color: @grey !important; >> -} >> -.darkgrey-color { >> - background-color: @greydark !important; >> -} >> - >> -/* begin lookup widget */ >> -.ui-dialog { >> - opacity: 1; >> - z-index: 50; >> -} >> - >> -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >> - background: none !important; >> - background-color: @dark-color-theme !important; >> - button { >> - background: none; >> - background-color: @light-color-theme; >> - } >> -} >> -/* end lookup widget */ >> - >> -.main-bar-label { >> - color: @light-color-theme; >> - padding-left: 3px; >> - padding-right: 6px; >> - font-size: 15px; >> - font-weight: bold; >> -} >> - >> -#company-logo { >> - right: 10px; >> - top: 2px; >> - background: url("images/ofbiz-simple-white.svg") no-repeat left top / >> cover; >> - min-height: 50px; >> - min-width: 50px; >> - margin-right: 15px; >> - align-self: center; >> - @media screen and (min-width : 1232px) { >> - min-height: 50px; >> - min-width: 129px; >> - background: url("images/ofbiz-white.svg") no-repeat left top / cover; >> - } >> -} >> - >> -.modal-screen { >> - visibility: hidden; >> - display: flex; >> - flex-direction: column; >> - background-color: @grey; >> - opacity: .93; >> - position: fixed; >> - top: 0; >> - left: 0; >> - height: 100%; >> - width: 100%; >> - z-index: 9999; >> -} >> - >> -.modal-box{ >> - background-color: @white; >> - opacity: 1; >> - margin: 10%; >> - border-radius: 10px; >> - border: solid 2px @main-color-theme; >> - padding : 10px 40px 10px 40px; >> - .modal-header { >> - position: relative; >> - display: flex; >> - flex-direction: row; >> - h2 { >> - font-size: 25px; >> - font-weight: normal; >> - color: @main-color-theme; >> - } >> - .btn-close-nrd { >> - position: absolute; >> - right: 0; >> - display: flex; >> - justify-content: center; >> - border: solid 1px @main-color-theme; >> - border-radius: 5px; >> - color: @main-color-theme; >> - font-size: 25px; >> - height: 30px; >> - width: 30px; >> - text-decoration: none !important; >> - } >> - } >> - .modal-body { >> - p { >> - font-size: 20px; >> - } >> - } >> - .modal-footer { >> - position: relative; >> - height: 35px; >> - display: flex; >> - justify-content: flex-end; >> - .btn-nrd { >> - background: none; >> - border: none; >> - text-shadow: none; >> - opacity: 1; >> - margin-right: 10px; >> - font-size: 20px; >> - padding: 5px; >> - border-radius: 8px; >> - } >> - .btn-nrd-main { >> - background-color: @main-color-theme; >> - color: @white; >> - } >> - .btn-nrd-std { >> - background-color: @white; >> - color: @main-color-theme; >> - border: solid 1px @main-color-theme !important; >> - } >> - } >> -} >> -.btn-nrd:hover { >> - box-shadow: 5px 5px 3px 0 @black; >> -} >> - >> -.btn-nrd-std:hover { >> - background-color: @main-color-theme !important; >> - color: @white !important; >> - border: solid 1px @main-color-theme !important; >> -} >> - >> -.btn-close-nrd:hover { >> - background-color: @main-color-theme !important; >> - color: @white !important; >> -} >> - >> -.list-nrd { >> - border: solid 2px @main-color-theme; >> - border-bottom-left-radius: 10px; >> - border-bottom-right-radius: 10px; >> - display: flex; >> - flex-direction: column; >> - margin-top: 15px; >> - margin-bottom: 15px; >> - .title-list-nrd { >> - background-color: @main-color-theme; >> - color : @white; >> - font-size: 20px; >> - font-weight: bold; >> - padding-left: 5px; >> - } >> - >> - li { >> - position: relative; >> - display: flex; >> - flex-direction: row; >> - font-size: 20px; >> - padding-left: 5px; >> - padding-top: 2px; >> - padding-bottom: 2px; >> - margin-bottom: 3px; >> - a { >> - color: @main-color-theme; >> - } >> - span { >> - position: absolute; >> - right: 0; >> - color: @main-color-theme; >> - font-size: 30px; >> - } >> - } >> -} >> -li.line-odd { >> - background-color: @light-color-theme; >> -} >> - >> -#user-avatar { >> - height: 40px; >> - width: 40px; >> - padding: 2px; >> - >> - align-self: center; >> - >> - :hover { >> - cursor: pointer; >> - } >> - img { >> - max-height: 40px; >> - max-width: 40px; >> - position: relative; >> - top: -2px; >> - padding: 2px; >> - background-color: @white; >> - border-radius: 2px; >> - } >> -} >> - >> -#main-navigation-bar { >> - position: relative; >> - width: 100%; >> - min-width: @min-container-width; >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - justify-content: space-between; >> - font-family: Quicksand,sans-serif; >> - background-color: @dark-color-theme; >> - z-index: 5; >> - height: @app-bar-height; >> -} >> -#main-nav-bar-left { >> - position: relative; >> - display: flex; >> - align-items: center; >> -} >> -#main-nav-bar-right { >> - position: relative; >> - display: flex; >> - align-items: center; >> - padding-right: 15px; >> -} >> - >> -.app-btn{ >> - height: @app-bar-height; >> - background-color: @dark-color-theme; >> - display: flex; >> - align-items: center; >> - flex-direction: row; >> - margin-right: 2px; >> - margin-left: 2px; >> - a { >> - padding:10px; >> - color: @font-color-for-dark; >> - font-size: 1.4em !important; >> - } >> -} >> - >> -.app-btn a:visited { >> - color: @font-color-for-dark; >> -} >> - >> -.app-btn:hover{ >> - position: relative; >> - top: -6px; >> - background-color: @main-color-theme; >> - border-bottom-left-radius: 5px; >> - border-bottom-right-radius: 5px; >> - box-shadow: 1px 1px 12px @shadow-color; >> - a { >> - position: relative; >> - top: 6px; >> - color : @font-color-for-main; >> - } >> -} >> -.app-btn.selected:hover { >> - background-color: @dark-color-theme; >> - box-shadow: none; >> - top:0; >> -} >> - >> -.app-btn a:hover { >> - text-decoration: none; >> -} >> -#app-selected { >> - position: relative; >> - display: flex; >> - flex-direction: column; >> - align-items: center; >> - justify-content: center; >> - background-color: @main-color-theme; >> - box-shadow: 1px -2px 12px @shadow-color; >> - z-index: 0; >> - opacity: .99; >> - border-top-left-radius : 8px ; >> - border-top-right-radius : 8px ; >> - a { >> - position: relative; >> - top: 3px; >> - color: @font-color-for-main; >> - } >> -} >> -.app-btn.selected a:hover { >> - text-decoration: none; >> -} >> - >> -#app-bar-line { >> - position: relative; >> - width: 100%; >> - min-width: @min-container-width; >> - height: @color-line-height; >> - background-color: @main-color-theme; >> - box-shadow: 2px 2px 5px @shadow-color; >> -} >> -#color-add { >> - width: 150px; >> - background-color: @main-color-theme; >> - height: @color-line-height; >> - z-index: 20; >> - position: relative; >> - top: @color-line-height; >> -} >> - >> -#more-app { >> - position: relative; >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - font-weight: bold; >> - font-size: 1.4em !important; >> - width: 40px; >> - height: @app-bar-height; >> - color: @font-color-for-dark; >> -} >> -#more-app:hover { >> - background-color: @main-color-theme; >> - text-decoration: none; >> -} >> -#more-app:hover #more-app-list { >> - display: block; >> -} >> -#more-app.selected { >> - background-color: @main-color-theme; >> -} >> - >> -#more-app-list { >> - display: none; >> - position: absolute; >> - top: @app-bar-height; >> - left: -20px; >> - background-color: @dark-color-theme; >> - z-index: 10; >> - border: solid 4px @main-color-theme; >> - border-top-width: @color-line-height; >> - border-bottom-left-radius: 4px; >> - border-bottom-right-radius: 4px; >> - li { >> - padding-left : 4px; >> - padding-right: 4px; >> - } >> - >> - a { >> - color: @font-color-for-dark; >> - font-size: 15px; >> - } >> - >> - :hover { >> - background-color: @medium-color-theme; >> - a { >> - box-shadow: none; >> - color: @dark-color-theme; >> - } >> - a:hover{ >> - box-shadow: none; >> - text-decoration: none; >> - border-radius: 0; >> - } >> - } >> - >> - li.selected { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main; >> - } >> - a:hover { >> - color: @font-color-for-main; >> - background-color: @main-color-theme; >> - } >> - } >> -} >> - >> -#homeButton { >> - display: flex; >> - //visibility: hidden; >> - align-items: center; >> - justify-content: center; >> - background-color:@grey; >> - border: none; >> - border-radius : 0; >> - >> - height: @app-bar-height; >> - width : @home-btn-width; >> - text-decoration: none; >> - img { >> - height: 25px; >> - transition: all .2s ease-in-out; >> - } >> -} >> - >> -#homeButton:hover img { >> - transform: scale(1.1); >> -} >> - >> -#app-bar-list { >> - display: flex; >> -} >> - >> -#user-details { >> - position: absolute; >> - right: 20px; >> - top : 62px; >> - background-color: @dark-color-theme; >> - color : @font-color-for-dark; >> - font-size: 15px; >> - font-weight: bold; >> - padding-top: 5px; >> - padding-bottom: 10px; >> - z-index: 15; >> - box-shadow: 3px 3px 12px @shadow-color; >> - border-radius: 3px; >> - transition: all .1s ease-in-out; >> - >> - img { >> - height: 50px; >> - background-color: @white; >> - padding: 4px; >> - border-radius : 3px; >> - margin-left: 10px; >> - margin-right: 5px; >> - } >> - #logout { >> - background-color: @white; >> - color: @dark-color-theme !important; >> - border-radius: 2px; >> - :hover { >> - text-decoration: none; >> - } >> - } >> -} >> - >> -#user-details:after{ >> - content: ''; >> - position: absolute; >> - top: -10px; >> - right: 5px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-bottom: 10px solid @dark-color-theme; >> - border-left: 10px solid transparent; >> -} >> - >> -a.user-pref-btn { >> - margin-top: 15px; >> - background-color: @dark-color-theme; >> - margin-left: 10px; >> - margin-right: 10px; >> - padding-top: 2px; >> - padding-bottom: 2px; >> - display: flex; >> - justify-content: center; >> - color: @font-color-for-dark !important; >> - :hover { >> - text-decoration: none; >> - } >> -} >> - >> -#user-name { >> - display: flex; >> - flex-direction: column; >> - justify-content: center; >> - align-content: center; >> - padding-left : 5px; >> - padding-right : 5px; >> - span { >> - min-width: 100px; >> - padding-bottom : 5px; >> - padding-top : 5px; >> - } >> -} >> - >> -#user-row1 { >> - display: flex; >> - flex-direction: row; >> - justify-content: center; >> - #user-lang { >> - display: flex; >> - flex-direction: row; >> - justify-content: center; >> - align-content: center; >> - padding-left: 10px; >> - padding-right: 10px; >> - span { >> - min-width: 30px; >> - color: @font-color-for-dark; >> - } >> - } >> -} >> - >> -.appbar-btn-img { >> - height: @app-bar-height - 40px; >> -} >> - >> -#help-btn { >> - font-size: 10px; >> - min-width: 20px; >> - margin-right: 15px; >> -} >> -/* Begin sub Menu section */ >> - >> -#app-navigation { >> - height: @sub-app-bar-height; >> - border-right: solid 1px @black; >> - border-bottom: solid 1px @black; >> - width: 100%; >> - min-width: @min-container-width; >> - h2 { >> - display: none; >> - } >> - ul { >> - display: flex; >> - flex-direction: row; >> - background-color: @grey; >> - flex-grow: 1; >> - } >> - ul li ul li { >> - border-left: solid 1px @black; >> - height: @sub-app-bar-height; >> - display: flex; >> - align-items: center; >> - justify-items: center; >> - justify-content: center; >> - min-width: 75px; >> - padding-left: 6px; >> - padding-right: 6px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - border-bottom: solid 1px @black; >> - font-size: 12px; >> - @media screen and (max-width: 1500px) { >> - font-size: 10px; >> - min-width: 65px; >> - } >> - @media screen and (max-width: 1300px) { >> - font-size: 10px; >> - min-width: 50px; >> - } >> - a { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - text-align: center; >> - height: 100%; >> - width: 100%; >> - text-decoration: none; >> - } >> - } >> -} >> - >> -#app-navigation ul li ul li:last-child { >> - border-right: solid 1px @black; >> -} >> - >> -#app-navigation ul li ul li:hover { >> - background-color: @main-color-theme; >> - min-height: @sub-app-bar-height; >> - position: relative; >> - //top: -1px; >> - a { >> - color: @white; >> - text-decoration: none; >> - } >> -} >> -#app-navigation ul li ul li.selected:hover { >> - a { >> - color: @black !important; >> - } >> -} >> - >> -#app-navigation ul li ul li.selected { >> - background-color: @white; >> - position: relative; >> - top: 1px; >> - height: @sub-app-bar-height + 1px; >> - border-top-right-radius: 2px; >> - border-top-left-radius: 2px; >> - border-bottom: none; >> - >> - :after { >> - content: ''; >> - position: absolute; >> - top: -2px; >> - left: 5px; >> - width: 0; >> - height: 0; >> - border-right: 10px solid transparent; >> - border-top: 10px solid @main-color-theme; >> - border-left: 10px solid transparent; >> - } >> - >> -} >> - >> - >> -/* End sub Menu section */ >> - >> -/* begin sub Menu section 3rd level */ >> - >> -.button-bar.tab-bar { >> - ul li ul li { >> - border: solid 1px @grey; >> - border-radius: 4px; >> - a { >> - width: 100%; >> - height: 100%; >> - } >> - } >> - li.selected{ >> - background-color: @main-color-theme; >> - a{ >> - color: @font-color-for-main; >> - } >> - } >> - ul li ul li:hover { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main ; >> - } >> - } >> -} >> - >> -#third-level-menu-container { >> - display: flex; >> - flex-direction: row; >> -} >> -#working-area { >> - width: 100%; >> -} >> - >> -#left-column-menu { >> - width: 100px; >> -} >> - >> -.third-lvl-menu { >> - background-color: @dark-color-theme; >> - position: relative; >> - left: -10px; >> - border-top-right-radius: 4px; >> - border-bottom-right-radius: 4px; >> - padding-top: 4px; >> - padding-bottom: 4px; >> - ul { >> - li { >> - ul { >> - position: relative; >> - top: 5px; >> - width: @third-lvl-width; >> - } >> - } >> - } >> - h2 { >> - visibility: hidden; >> - } >> -} >> -.third-level-item:last-child { >> - border-bottom: solid 1px @main-color-theme; >> -} >> - >> -.third-level-item { >> - min-height: @third-lvl-height; >> - background-color: @dark-color-theme; >> - padding-right: 3px; >> - border-top: solid 1px @main-color-theme; >> - >> - a, a:visited { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - width: 100%; >> - color: @font-color-for-dark !important; >> - min-height: @third-lvl-height; >> - max-width: @third-lvl-width; >> - text-align: center; >> - } >> -} >> -.third-level-item.selected { >> - position: relative; >> - border-left: solid 9px @main-color-theme; >> - a, a:visited { >> - background-color: @white; >> - color: @dark-color-theme !important; >> - } >> - :after { >> - content: ''; >> - position: absolute; >> - top: 5px; >> - left: 0; >> - width: 0; >> - height: 0; >> - border-top: 10px solid transparent; >> - border-left: 10px solid @main-color-theme; >> - border-bottom: 10px solid transparent; >> - } >> -} >> - >> -.third-level-item a:hover { >> - background-color: @main-color-theme; >> - color: @font-color-for-main ; >> - text-decoration: none; >> -} >> -/* End 3rd level menu */ >> - >> - >> - >> -/* Begin Home Menu for IB section */ >> -.fixed-nav-bar { >> - position: fixed !important; >> - width: 100%; >> -} >> -#nav-bar-offset { >> - height: @app-bar-height ; >> -} >> - >> -#homeGlyph { >> - margin-left: 20px; >> - height: 20px; >> -} >> - >> -#homePageTitle { >> - color: @white; >> - font-size: 20px; >> - font-weight: bold; >> - margin-right: 20px; >> - margin-left: 20px; >> -} >> -.home-menu-list { >> - display: flex; >> - flex-direction: column; >> - align-items: center; >> -} >> -.hp-applist { >> - display: flex; >> - flex-direction: row; >> - color : @white; >> - align-items: center; >> - .app-title { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - background-color: @dark-color-theme; >> - height: @home-menu-tile-height; >> - padding: 5px 10px 5px 10px; >> - border-bottom: solid 1px @black; >> - span { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> - font-size: 15px; >> - font-weight: bold; >> - width: 110px; >> - a { >> - display: flex; >> - justify-content: center; >> - color : @white; >> - } >> - } >> - } >> - >> - .hp-menu-item { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - position: relative; >> - margin-left: 5px; >> - margin-right: 5px; >> - border: solid 2px @grey; >> - border-radius: 8px; >> - height: @home-menu-tile-height - 4px; >> - min-width: @home-menu-tile-min-width; >> - max-width: @home-menu-tile-max-width; >> - .menu-link { >> - font-size: 10px; >> - color: @black; >> - padding: 10px; >> - } >> - .star-link { >> - position: absolute; >> - height: 25px; >> - top: 5px; >> - right: 5px; >> - } >> - } >> - >> -} >> -.hp-applist .app-title span a:hover { >> - text-decoration: none; >> -} >> - >> -.hp-menu-item.favoriteItem { >> - border: solid 2px @dark-color-theme; >> -} >> - >> -.hp-menu-item:hover { >> - box-shadow: 3px 3px 12px @shadow-color; >> - a { >> - text-decoration: none; >> - } >> -} >> - >> -/* End Home Menu for IB section */ >> - >> -/* Begin Login screenlet */ >> -#login-container { >> - #content-messages { >> - position: relative; >> - top: @app-bar-height; >> - border-radius: 4px; >> - width: 97%; >> - &.errorMessage { >> - background-color : @color-background-alert !important; >> - color: @color-font-alert !important; >> - border : solid 1px @color-border-alert !important; >> - } >> - &.eventMessage { >> - background-color : @color-background-success !important; >> - color: @color-font-success !important; >> - border : solid 1px @color-border-success !important; >> - } >> - } >> -} >> -#loginBar { >> - position: fixed; >> - top:0; >> - left: 0; >> - width: 100%; >> - height: @app-bar-height; >> - background-color: @dark-color-theme; >> - span { >> - background-color: @white; >> - color: @main-color-theme; >> - border-top-right-radius: 5px; >> - border-top-left-radius: 5px; >> - font-size: 25px; >> - position: relative; >> - top: @app-bar-height - 32px; >> - left: 15px; >> - padding: 5px 10px 5px 10px; >> - } >> - #company-logo { >> - position: absolute; >> - } >> -} >> - >> -.login-screenlet { >> - display: flex; >> - flex-direction: column; >> - min-width: 300px; >> - max-width: 50em; >> - border-radius: 8px !important; >> - margin-top: 15%; >> - box-shadow: 3px 3px 12px @shadow-color; >> - .screenlet-title-bar { >> - display: flex; >> - align-content: center; >> - justify-content: center; >> - margin:0; >> - padding:0; >> - h3{ >> - padding-top:2px; >> - padding-bottom:2px; >> - background-color: @dark-color-theme !important; >> - color: @font-color-for-dark; >> - height: 100%; >> - width:100%; >> - text-shadow: none; >> - font-size: 25px; >> - } >> - } >> - .screenlet-body { >> - background-color: @main-color-theme !important; >> - form { >> - .button { >> - width: 150px; >> - border-radius: 4px; >> - background: none; >> - background-color: @dark-color-theme; >> - color: @font-color-for-dark; >> - text-shadow: none; >> - margin-top: 20px; >> - margin-bottom: 10px; >> - } >> - >> - table { >> - tr { >> - width: 100%; >> - .label { >> - color: @font-color-for-main; >> - width: 25%; >> - font-size: 15px; >> - } >> - input { >> - width: 100%; >> - } >> - .buttontext, >> - [type="submit"] { >> - width: 150px; >> - border-radius: 4px; >> - background: none; >> - background-color: @dark-color-theme; >> - color: @font-color-for-dark; >> - text-shadow: none; >> - } >> - [name="GET_PASSWORD_HINT"] { >> - background-color: @font-color-for-dark; >> - color: @main-color-theme; >> - border: none; >> - width: 100%; >> - } >> - [name="EMAIL_PASSWORD"] { >> - background-color: @font-color-for-dark; >> - color: @main-color-theme; >> - border: none; >> - width: 100%; >> - } >> - td { >> - padding: 5px; >> - color: @font-color-for-main; >> - font-size: 15px; >> - font-weight: bold; >> - } >> - } >> - } >> - } >> - a { >> - color: @font-color-for-main; >> - } >> - } >> -} >> - >> -.login-screenlet .screenlet-title-bar { >> - text-align: center; >> -} >> - >> -/* End Login screenlet */ >> - >> - >> -/* --------------------------------------------- */ >> -/* Begin Screenlet style */ >> -/* --------------------------------------------- */ >> -.screenlet-title-bar { >> - text-decoration: none ; >> - color: @dark-color-theme; >> - background-color: @grey; >> - height: 1%; /* IE fix */ >> - min-height: 1.5em; >> - padding:0.8em 0.2em; >> -} >> - >> -.screenlet { >> - border-radius: 5px; >> - border: solid 1px @grey; >> - height: auto !important; >> - margin-bottom: 1em; >> - overflow: auto; >> -} >> - >> -.screenlet-body { >> - background-color: #FFFFFF; >> - height: auto !important; >> - height: 1%; >> - padding: 0.4em; >> -} >> - >> -.screenlet-body div { >> - margin: 0.8em 0.1em >> -} >> - >> -/* Special Screenlet style for locale and timezone window */ >> -.lists.screenlet { >> - margin-left: 25%; >> - margin-right: 25%; >> - margin-top: 1em; >> -} >> - >> -.lists.screenlet .basic-table tr td { >> - text-align: center; >> -} >> - >> -.lists.screenlet .basic-table tr td a { >> - display: block; >> -} >> - >> -/* Alternate table header style */ >> -.basic-table .header-row-2 th, >> -.basic-table .header-row-2 td { >> - background-color: @greydark; >> - border-bottom: 0; >> - border-left: 0.1em solid #aaa; >> - border-right: 0.1em solid #888; >> - color: #ffffff; >> - font-weight: bold; >> -} >> - >> -/* No padding screenlet decorator */ >> -.no-padding { >> - padding: 0; >> - border: none; >> -} >> - >> -.no-padding .h1, >> -.no-padding .h2, >> -.no-padding .h3, >> -.no-paddingr h1, >> -.no-padding h2, >> -.no-padding h3 { >> - padding: 0.7em; >> -} >> - >> -.screenlet-title-bar ul a:hover { >> - color: @main-color-theme !important; >> - text-decoration: none; >> -} >> - >> - >> -/* --------------------------------------------- */ >> -/* End Screenlet style */ >> -/* --------------------------------------------- */ >> - >> -/* ---------------------- */ >> -/* Table Styles */ >> -/* ---------------------- */ >> - >> -.basic-table { >> - background-color: #ffffff; >> - color: #000000; >> - margin-bottom: 1em; >> - width: 100%; >> -} >> - >> -form table, >> -form .basic-table, >> -.screenlet-body .basic-table { >> - background: transparent; >> - margin-bottom: 0; >> -} >> - >> -.basic-table tr td { >> - /* Style for all cells */ >> - padding: 0.8em 0.1em; >> - vertical-align: middle; >> -} >> - >> -.basic-table tr .align-bottom { >> - vertical-align: bottom; >> -} >> - >> -.basic-table tr .align-top { >> - vertical-align: top; >> -} >> - >> -.basic-table tr .label, >> -.basic-table tr .group-label { >> - /* field labels for forms */ >> - font-weight: bold; >> - text-align: right; >> - padding-right: 1.5em; >> - white-space: nowrap; >> - width: 1%; >> -} >> - >> -.basic-table tr .group-label { >> - /* "header" for field label groups */ >> - font-size: 1.2em; >> - padding: 2em 1.5em 0 0; >> -} >> - >> -.basic-table tr th, >> -.basic-table .header-row { >> - font-weight: bold; >> - text-align: left; >> -} >> - >> -.basic-table .header-row td { >> - border-bottom: 0.1em solid #000000; >> -} >> - >> -.basic-table .header-row td a { >> - color: #000000; >> -} >> - >> -.basic-table .alternate-row { >> - /* Alternating row style */ >> - background-color: #eeeeee; >> -} >> - >> -.basic-table .selected { >> - background: #FFFCCF; >> -} >> - >> -.basic-table .alternate-rowSelected { >> - background: #FFF55F; >> -} >> - >> -.basic-table .Validate { >> - /*Style use by alt-row-style on list*/ >> - background: #A0D5F7; >> -} >> - >> -.basic-table .alternate-rowValidate { >> - /*Style use by alt-row-style on list*/ >> - background: #72A8F2; >> -} >> - >> -.basic-table .Warn { >> - /*Style use by alt-row-style on list*/ >> - background: #f55C5C; >> -} >> - >> -.basic-table .alternate-rowWarn { >> - /*Style use by alt-row-style on list*/ >> - background: #FC7455; >> -} >> - >> -.basic-table tr .button-col { >> - /* button column style - for the small >> - collection of buttons used in lists */ >> - vertical-align: top; >> - padding: 0.3em; >> -} >> -.basic-table tr .button-col a, >> -.basic-table tr .button-col button, >> -.basic-table tr .button-col input[type="reset"], >> -.basic-table tr .button-col input[type="submit"], >> -.basic-table tr .button-col input[type="button"] { >> - -webkit-appearance: none; >> - -moz-border-radius: 1em; >> - -webkit-border-radius: 1em; >> - border-radius: 2px; >> - border: 0.1em solid @main-color-theme; >> - background-color: @white; >> - cursor: pointer; >> - color: @main-color-theme; >> - display:inline-block; >> - font-size: 0.9em; >> - font-weight: bold; >> - outline: 0; >> - overflow: visible; >> - padding: 0.1em 0.5em 0.2em 0.5em; >> - text-decoration: none; >> - width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> - >> - &:hover { >> - background-color: @main-color-theme; >> - color: @white; >> - } >> -} >> - >> -.basic-table .collapsed { >> - visibility: collapse; >> -} >> - >> -/* Sort field style */ >> -.basic-table .header-row-2 th .sort-order-asc, >> -.basic-table .header-row-2 td .sort-order-asc{ >> - background: url(/images/arrow-gr-up.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> -} >> -.basic-table .header-row-2 th .sort-order-desc, >> -.basic-table .header-row-2 td .sort-order-desc{ >> - background: url(/images/arrow-gr-dw.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> -} >> -.basic-table .header-row-2 th .sort-order, >> -.basic-table .header-row-2 td .sort-order{ >> - background: url(/images/arrow-gr.png) no-repeat right; >> - padding-left: 0.5em; >> - padding-right: 20px; /* Setting must be in px */ >> - color:#fff >> -} >> - >> - >> -/* --------------------------------------------- */ >> -/* Begin Message Info */ >> -/* --------------------------------------------- */ >> -.count-message { >> - display: flex; >> - align-items: center; >> - justify-content: center; >> - min-height:20px; >> - min-width: 20px; >> - max-height:20px; >> - max-width: 20px; >> - background: @white; >> - font-size:12px; >> - font-weight: bold; >> - border-radius: 50%; >> -} >> -.info-message-title { >> - min-width:150px; >> - margin: 5px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - font-weight: bold; >> -} >> -.message-list { >> - position:relative; >> - margin-top: 10px; >> - box-shadow: 1px 3px 5px @greydark; >> - border-radius: 0 5px 5px 0; >> - transition: height 2s; >> -} >> -.message-list-main { >> - padding: 5px 15px 5px 15px; >> -} >> -.message-list-alert { >> - background-color: @color-alert; >> - border-left : solid 5px @color-alert-dark; >> - .count-message { >> - color: @color-alert-dark; >> - } >> -} >> -.message-list-success { >> - background-color: @color-success; >> - border-left: solid 5px @color-success-dark; >> - .count-message { >> - color: @color-success-dark; >> - } >> -} >> -.message-list-table-container { >> - background-color: @white; >> - border-radius: 5px; >> - overflow: hidden; >> - height: 0; >> -} >> -.info-message-success { >> - display: none; >> -} >> -.info-message-alert { >> - display: none; >> -} >> -table.msg-list { >> - width: 100%; >> - font-size: 16px; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - padding: 0; >> - thead { >> - height: 100%; >> - background-color: @grey; >> - margin: 0; >> - padding: 0; >> - tr{ >> - font-weight: bold; >> - border-bottom: solid 1px @black; >> - height: 100%; >> - background-color: @grey; >> - line-height: 30px; >> - } >> - } >> - tbody { >> - tr { >> - line-height: 25px; >> - } >> - tr.msg-row-success { >> - background-color: @color-success; >> - } >> - tr.msg-row-alert { >> - background-color: @color-alert; >> - } >> - } >> - td { >> - padding-left: 5px; >> - } >> -} >> - >> -/* --------------------------------------------- */ >> -/* End Message Info */ >> -/* --------------------------------------------- */ >> - >> -/* ---------------------- */ >> -/* Paginate Style */ >> -/* ---------------------- */ >> - >> -.paginate-bar-nrd { >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - font-size: 15px; >> - background-color: @grey; >> - padding-left: 10px; >> - padding-top: 3px; >> - padding-bottom: 3px; >> - box-shadow: 0 2px 5px @shadow-color; >> - >> - ul.paginate-pg-list { >> - display: flex; >> - flex-direction: row; >> - background-color: @white; >> - color: @main-color-theme; >> - margin-right: 10px; >> - border-radius: 8px; >> - border: solid 1px @box-border-color; >> - height: 18px; >> - li { >> - display: flex; >> - justify-content: center; >> - min-width: 17px; >> - border-right: solid 1px @box-border-color; >> - padding-left: 2px; >> - padding-right: 2px; >> - height:100%; >> - a { >> - display: flex; >> - justify-content: center; >> - align-items: center; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - color: @dark-color-theme; >> - height: 100%; >> - width: 100%; >> - } >> - .paginate-disable { >> - >> - } >> - } >> - li.selected { >> - background-color: @main-color-theme; >> - a { >> - color: @font-color-for-main; >> - } >> - } >> - li:first-child, li:last-child { >> - width: 20px; >> - } >> - li:first-child { >> - border-top-left-radius: 3px; >> - border-bottom-left-radius: 3px; >> - } >> - li:last-child { >> - border-right: none; >> - border-top-right-radius: 3px; >> - border-bottom-right-radius: 3px; >> - } >> - } >> - >> -} >> -select.paginate-select { >> - position: relative; >> - background: @white; >> - font-size: 16px; >> - font-weight: bold; >> - border: 1px solid @box-border-color; >> - option { >> - display: flex; >> - justify-self: center; >> - font-size: 14px; >> - } >> -} >> - >> -.paginate-select-label { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - padding-left: 15px; >> - padding-right: 15px; >> -} >> - >> -.paginate-information { >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 16px; >> - padding-left: 15px; >> - padding-right: 15px; >> -} >> - >> -ul.paginate-pg-list li:hover{ >> - background-color: @main-color-theme; >> - a { >> - text-decoration: none; >> - color: @font-color-for-main; >> - } >> -} >> - >> -/* End of Paginate Style */ >> -/* ---------------------- */ >> - >> -/* ------------------------------- */ >> -/* List Navigation Style */ >> -/* ------------------------------- */ >> - >> -.nav-pager { >> - background-color: @greydark; >> - color: @white; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> - font-size: 9px; >> - font-weight: bold; >> - line-height: 3.5em; >> - height: 3.5em; >> - margin: 0.5em 0 0.5em 0; >> - border-radius: 3px 3px 0 0; >> -} >> - >> -.nav-pager ul { >> - display: inline; /* IE Fix */ >> -} >> - >> -.nav-pager ul li { >> - float:left; >> - vertical-align: middle; >> -} >> - >> -.nav-pager ul li a { >> - display: block; >> -} >> - >> -.nav-pager ul a { >> - color: @white; >> - padding: 0 1em 0 1em; >> - text-decoration: none; >> -} >> - >> -.nav-pager ul a:hover { >> - background-color: @main-color-theme; >> - color: @font-color-for-main; >> -} >> - >> -.nav-pager ul .nav-pagesize, >> -.nav-pager ul .nav-page-select, >> -.nav-pager ul .nav-displaying { >> - padding: 0 1em 0 1em; >> -} >> - >> -.nav-pager ul .nav-first-disabled, >> -.nav-pager ul .nav-previous-disabled, >> -.nav-pager ul .nav-next-disabled, >> -.nav-pager ul .nav-last-disabled { >> - padding: 0 1em 0 1em; >> -} >> - >> -.nav-pager ul .nav-first-disabled:hover, >> -.nav-pager ul .nav-previous-disabled:hover, >> -.nav-pager ul .nav-next-disabled:hover, >> -.nav-pager ul .nav-last-disabled:hover { >> - cursor: not-allowed; >> -} >> - >> - >> -.nav-pager ul .nav-displaying { >> - border-right: none; >> -} >> - >> - >> -/* ---------------------------- */ >> -/* Multi-Column Styles */ >> -/* ---------------------------- */ >> - >> -#column-container { >> - margin: auto; >> - padding: 1em; >> - position: relative; >> - min-width: @min-container-width; >> -} >> - >> -#column-container h1, >> -#column-container .h1, >> -#column-container h2, >> -#column-container .h2 { >> - margin-bottom: 0.5em; >> -} >> - >> -#column-container h1, >> -#column-container .h1 { >> - color: #557996; >> -} >> - >> -#column-container .left { >> - float: left; >> - /* alt: position: absolute; top: 0px; left: 0px; */ >> - width: 22em; >> - margin-right: 1em; >> -} >> - >> -#column-container .left-larger { >> - float: left; >> - /* alt: position: absolute; top: 0px; left: 0px; */ >> - width: 25em; >> - margin-right: 1em; >> -} >> - >> -.lefthalf { >> - float: left; >> - height: 1%; >> - left: 0; >> - margin: 0% 1% 1% 0%; >> - width: 49%; >> -} >> - >> -.righthalf { >> - float: right; >> - height: 1%; >> - margin: 0 0 1% 1%; >> - right: 0; >> - width: 49%; >> -} >> - >> -#column-container .right { >> - float: right; >> - margin-left: 1em; >> - width: 22em; >> -} >> - >> -#column-container .leftonly { >> - margin-left: 23em; >> - width: auto; >> -} >> - >> -#column-container .leftonly-larger { >> - margin-left: 26em; >> - width: auto; >> -} >> - >> -#column-container .rightonly { >> - margin-right: 23em; >> - width: auto; >> -} >> - >> -#column-container .center { >> - margin-left: 23em; >> - margin-right: 23em; >> - width: auto; >> -} >> - >> -#column-container .nocolumns { >> - width: auto; >> -} >> - >> -/* ---------------------- */ >> -/* Button Style */ >> -/* ---------------------- */ >> - >> -.button-bar li.buttontext a, >> -a.buttontext, >> -a.buttontextbig, >> -.smallSubmit, >> -.smallSubmit:hover, >> -.mediumSubmit, >> -.largeSubmit, >> -.loginButton, >> -.button-style-1 a, >> -.button-style-1 ul a, >> -.button-style-2 ul a, >> -.button-style-2 a, >> -.button, >> -button, >> -input[type="reset"], >> -input[type="submit"], >> -input[type="button"] { >> - -webkit-appearance: none; >> - -moz-border-radius: 1.1em; >> - -webkit-border-radius: 1.1em; >> - border-radius: 2px; >> - border: 0.1em solid @main-color-theme; >> - background-color: @white; >> - cursor: pointer; >> - color: @main-color-theme; >> - display:inline-block; >> - font-size: 1em; >> - font-weight: bold; >> - outline: 0; >> - overflow: visible; >> - padding: 0.4em 1em 0.4em; >> - text-decoration:none; >> - /*text-transform:uppercase;*/ >> - width: auto; >> - >> - /* IE7 */ >> - *padding-top: 0.2em; >> - *padding-bottom: 0; >> - &:hover { >> - color: @font-color-for-main; >> - background-color: @main-color-theme; >> - } >> -} >> - >> - >> -/* ---------------------- */ >> -/* Footer Style */ >> -/* ---------------------- */ >> - >> -#footer { >> - background: @dark-color-theme; >> - border-top: 0.1em inset #000; >> - padding: 0.5em 0 0.5em 0.5em; >> - >> - height: @footer-height; >> - position: fixed; >> - bottom: 0; >> - width: 100%; >> - display: flex; >> - flex-direction: row; >> - align-items: center; >> - justify-content: space-between; >> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >> !important; >> - z-index: 10; >> - >> - span { >> - color: @font-color-for-dark; >> - padding: 10px; >> - } >> - >> - a { >> - color: @font-color-for-dark; >> - font-weight: normal; >> - } >> -} >> - >> -#footer a:focus { >> - text-decoration: underline; >> -} >> - >> -#footer-offset { >> - height: @footer-height + 10px; >> - width: 100%; >> -} >> +/* common colors */ >> +@black: #000; >> +@white: #fff; >> +@grey: #e6e6e6; >> +@greydark: #929292; >> + >> +@color-success: #8cff8c; >> +@font-color-for-success: @black; >> +@color-alert: #ff8c8c; >> +@font-color-for-alert: @black; >> + >> +@color-success-dark: #356e35; >> +@font-color-for-success: @black; >> +@color-alert-dark: #932f33; >> +@font-color-for-alert: @black; >> + >> +@color-background-alert: #f2dede; >> +@color-font-alert: #a94442; >> +@color-border-alert: #ebccd1; >> + >> +@color-background-success: #dff0d8; >> +@color-font-success: #3c763d; >> +@color-border-success: #d6e9c6; >> + >> +/* Saphir colors */ >> +@blue-dark: #002333; >> +@blue-main: #005982; >> +@blue-medium: #c7dfff; >> +@blue-light: #f1f7ff; >> +@blue-light2: #e4f0f5; >> + >> +/* Ruby colors */ >> +@red-dark: #420000; >> +@red-main: #bf1616; >> +@red-medium: #f7baba; >> +@red-light: #fce7e7; >> +@red-light2: #fed7c9; >> + >> +/* Emerald colors */ >> +@green-dark: #197948; >> +@green-main: #23af9b; >> +@green-medium: #7ae3ad; >> +@green-light: #e5f9ef; >> +@green-light2: #d7f9ef; >> + >> +/* Amber colors */ >> +@amber-dark: #bc4216; >> +@amber-main: #f08906; >> +@amber-medium: #f5c4b3; >> +@amber-light: #fcede8; >> +@amber-light2: #fcedcd; >> + >> +/* Saphir theme */ >> +/* >> +@main-color-theme : @blue-main; >> +@dark-color-theme : @blue-dark; >> +@medium-color-theme : @blue-medium; >> +@light-color-theme : @blue-light; >> +@light2-color-theme : @blue-light2; >> +@font-color-for-dark : @grey; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +*/ >> + >> +/* Ruby theme */ >> +/* >> +@main-color-theme : @red-main; >> +@dark-color-theme : @red-dark; >> +@medium-color-theme : @red-medium; >> +@light-color-theme : @red-light; >> +@light2-color-theme : @red-light2; >> +@font-color-for-dark : @grey; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +/* >> + >> +/* Emerald theme */ >> +/* >> +@main-color-theme : @green-main; >> +@dark-color-theme : @green-dark; >> +@medium-color-theme : @green-medium; >> +@light-color-theme : @green-light; >> +@light2-color-theme : @green-light2; >> +@font-color-for-dark : @white; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> +*/ >> +/* Amber theme */ >> +@main-color-theme : @amber-main; >> +@dark-color-theme : @amber-dark; >> +@medium-color-theme : @amber-medium; >> +@light-color-theme : @amber-light; >> +@light2-color-theme : @amber-light2; >> +@font-color-for-dark : @white; >> +@font-color-for-main : @white; >> +@font-color-for-medium : @dark-color-theme; >> +@font-color-for-light : @dark-color-theme; >> +@shadow-color : @black; >> +@shadow-color-light : @greydark; >> + >> + >> +@app-bar-height: 60px; >> +@sub-app-bar-height: 40px; >> +@footer-height: 20px; >> +@home-btn-width: 47px; >> +@color-line-height: 9px; >> + >> +@home-menu-tile-height: 80px; >> +@home-menu-tile-min-width: 100px; >> +@home-menu-tile-max-width: 100px; >> + >> +@third-lvl-height: 80px; >> +@third-lvl-width : 100px; >> +@min-screen : 1170px; >> +@min-container-width: 1130px; >> + >> +@box-border-color: #d7d7d7; >> + >> +@font-face { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + src: url('fonts/quicksand/quicksandbold.otf'); >> + font-weight: normal; >> + font-style: normal; >> +} >> + >> +@font-face { >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + src: url('fonts/quicksand/quicksandbold.otf'); >> + font-weight: bold; >> + font-style: normal; >> +} >> + >> +/* ---------------------------------- */ >> +/* Begin special checkbox type switch */ >> +/* ---------------------------------- */ >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox, >> [type="checkbox"]:checked.nrd-chkbox { >> + display: none; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox + label, >> +[type="checkbox"]:checked.nrd-chkbox + label{ >> + cursor: pointer; >> +} >> +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >> +[type="checkbox"]:checked.nrd-chkbox + label:before{ >> + content: ""; >> + width: 150px; >> + min-width: 150px; >> + background-color: @light-color-theme; >> + padding: 2px 20px 2px 20px; >> + border-radius: 8px 8px 8px 8px; >> + >> + cursor: pointer; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >> + content: ""; >> + position: relative; >> + left:-35px; >> + background-color: @dark-color-theme; >> + min-height: 10px; >> + min-width: 10px; >> + padding-left: 4px; >> + padding-right: 5px; >> + border-radius: 8px 8px 8px 8px; >> + transition: all .2s; >> +} >> + >> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >> + position: relative; >> + left: -15px; >> + transition: all .2s; >> +} >> +/* ---------------------------------- */ >> +/* End special checkbox type switch */ >> +/* ---------------------------------- */ >> + >> +/* ---------------------------------- */ >> +/* Begin square Checkbox */ >> +/* ---------------------------------- */ >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox, >> +[type="checkbox"]:checked.nrd-square-chkbox{ >> + position: absolute; >> + left: -9999px; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >> +[type="checkbox"]:checked.nrd-square-chkbox + label{ >> + content: ''; >> + padding-left: 35px; >> + position: relative; >> + cursor: pointer; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + font-size: 12px; >> + >> +} >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> + content: ''; >> + position: absolute; >> + left:10px; >> + top: -4px; >> + width: 17px; >> + height: 17px; /* dim. de la case */ >> + border: 1px solid #aaa; >> + background: @light-color-theme; >> + border-radius: 2px; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >> + background: @light-color-theme; >> +} >> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >> + background: @main-color-theme; >> +} >> + >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >> +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >> + content: '✔'; >> + position: absolute; >> + top: -4px; >> + left: 14px; >> + font-size: 16px; >> + color: @font-color-for-main; >> + transition: all .2s; >> +} >> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >> + opacity: 0; >> + transform: scale(0); >> +} >> +[type="checkbox"]:checked.nrd-square-chkbox + label:after { >> + opacity: 1; >> + transform: scale(1); >> +} >> +/* ---------------------------------*/ >> +/* End square Checkbox */ >> +/* ---------------------------------*/ >> + >> +/* ---------------------------------*/ >> +/* Begin class content mgmt */ >> +/* ---------------------------------*/ >> + >> + >> +.flex-row { >> + display: flex; >> + flex-direction: row !important; >> +} >> +.flex-column { >> + display: flex; >> + flex-direction: column; >> +} >> + >> +.col-width-1 { >> + width: 10%; >> +} >> +.col-width-2 { >> + width: 20%; >> +} >> +.col-width-3 { >> + width: 30%; >> +} >> +.col-width-4 { >> + width: 40%; >> +} >> +.col-width-5 { >> + width: 50%; >> +} >> +.col-width-6 { >> + width: 60%; >> +} >> +.col-width-7 { >> + width: 70%; >> +} >> +.col-width-8 { >> + width: 80%; >> +} >> +.col-width-9 { >> + width: 90%; >> +} >> +.col-width-10 { >> + width: 100%; >> +} >> + >> +.align-v-center { >> + display:flex; >> + align-items: center; >> +} >> + >> +.align-h-center { >> + display:flex; >> + justify-content: center; >> +} >> + >> +/* ---------------------------------*/ >> +/* End class content mgmt */ >> +/* ---------------------------------*/ >> + >> + >> +/* ---------------------------------- */ >> +/* Begin btn-sort */ >> +/* ---------------------------------- */ >> + >> +.btn-sort { >> + position: relative; >> + top: -6px; >> + border:none; >> + background:none; >> + border-radius: 0; >> + margin-left:5px; >> +} >> + >> +.btn-sort:before{ >> + content: ''; >> + position: absolute; >> + left: -1px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-bottom: 10px solid @greydark; >> + border-left: 10px solid transparent; >> +} >> + >> +.btn-sort:after{ >> + content: ''; >> + position: absolute; >> + right: -1px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-top: 10px solid @greydark; >> + border-left: 10px solid transparent; >> + @media screen and (max-width: 1349px) { >> + right: -5px; >> + } >> +} >> + >> +.btn-sort.btn-sort-asc:before{ >> + border-bottom: 10px solid @main-color-theme; >> +} >> + >> +.btn-sort.btn-sort-desc:after{ >> + border-top: 10px solid @main-color-theme; >> +} >> + >> +/* ---------------------------------- */ >> +/* End btn-sort */ >> +/* ---------------------------------- */ >> + >> + >> +/* ---------------------------------- */ >> +/* Begin defaut colour class */ >> +/* ---------------------------------- */ >> + >> +.dark-color { >> + background-color: @dark-color-theme !important; >> + color: @font-color-for-dark !important; >> +} >> +.main-color { >> + background-color: @main-color-theme !important; >> + color: @font-color-for-main !important; >> +} >> +.medium-color { >> + background-color: @medium-color-theme !important; >> + color: @font-color-for-medium !important; >> +} >> +.light-color { >> + background-color: @light-color-theme !important; >> + color: @font-color-for-light !important; >> +} >> +.light2-color { >> + background-color: @light2-color-theme !important; >> + color: @font-color-for-light !important; >> +} >> + >> +.grey-color { >> + background-color: @grey !important; >> +} >> +.darkgrey-color { >> + background-color: @greydark !important; >> +} >> + >> +/* begin lookup widget */ >> +.ui-dialog { >> + opacity: 1; >> + z-index: 50; >> +} >> + >> +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >> + background: none !important; >> + background-color: @dark-color-theme !important; >> + button { >> + background: none; >> + background-color: @light-color-theme; >> + } >> +} >> +/* end lookup widget */ >> + >> +.main-bar-label { >> + color: @light-color-theme; >> + padding-left: 3px; >> + padding-right: 6px; >> + font-size: 15px; >> + font-weight: bold; >> +} >> + >> +#company-logo { >> + right: 10px; >> + top: 2px; >> + background: url("images/ofbiz-simple-white.svg") no-repeat left top / >> cover; >> + min-height: 50px; >> + min-width: 50px; >> + margin-right: 15px; >> + align-self: center; >> + @media screen and (min-width : 1232px) { >> + min-height: 50px; >> + min-width: 129px; >> + background: url("images/ofbiz-white.svg") no-repeat left top / cover; >> + } >> +} >> + >> +.modal-screen { >> + visibility: hidden; >> + display: flex; >> + flex-direction: column; >> + background-color: @grey; >> + opacity: .93; >> + position: fixed; >> + top: 0; >> + left: 0; >> + height: 100%; >> + width: 100%; >> + z-index: 9999; >> +} >> + >> +.modal-box{ >> + background-color: @white; >> + opacity: 1; >> + margin: 10%; >> + border-radius: 10px; >> + border: solid 2px @main-color-theme; >> + padding : 10px 40px 10px 40px; >> + .modal-header { >> + position: relative; >> + display: flex; >> + flex-direction: row; >> + h2 { >> + font-size: 25px; >> + font-weight: normal; >> + color: @main-color-theme; >> + } >> + .btn-close-nrd { >> + position: absolute; >> + right: 0; >> + display: flex; >> + justify-content: center; >> + border: solid 1px @main-color-theme; >> + border-radius: 5px; >> + color: @main-color-theme; >> + font-size: 25px; >> + height: 30px; >> + width: 30px; >> + text-decoration: none !important; >> + } >> + } >> + .modal-body { >> + p { >> + font-size: 20px; >> + } >> + } >> + .modal-footer { >> + position: relative; >> + height: 35px; >> + display: flex; >> + justify-content: flex-end; >> + .btn-nrd { >> + background: none; >> + border: none; >> + text-shadow: none; >> + opacity: 1; >> + margin-right: 10px; >> + font-size: 20px; >> + padding: 5px; >> + border-radius: 8px; >> + } >> + .btn-nrd-main { >> + background-color: @main-color-theme; >> + color: @white; >> + } >> + .btn-nrd-std { >> + background-color: @white; >> + color: @main-color-theme; >> + border: solid 1px @main-color-theme !important; >> + } >> + } >> +} >> +.btn-nrd:hover { >> + box-shadow: 5px 5px 3px 0 @black; >> +} >> + >> +.btn-nrd-std:hover { >> + background-color: @main-color-theme !important; >> + color: @white !important; >> + border: solid 1px @main-color-theme !important; >> +} >> + >> +.btn-close-nrd:hover { >> + background-color: @main-color-theme !important; >> + color: @white !important; >> +} >> + >> +.list-nrd { >> + border: solid 2px @main-color-theme; >> + border-bottom-left-radius: 10px; >> + border-bottom-right-radius: 10px; >> + display: flex; >> + flex-direction: column; >> + margin-top: 15px; >> + margin-bottom: 15px; >> + .title-list-nrd { >> + background-color: @main-color-theme; >> + color : @white; >> + font-size: 20px; >> + font-weight: bold; >> + padding-left: 5px; >> + } >> + >> + li { >> + position: relative; >> + display: flex; >> + flex-direction: row; >> + font-size: 20px; >> + padding-left: 5px; >> + padding-top: 2px; >> + padding-bottom: 2px; >> + margin-bottom: 3px; >> + a { >> + color: @main-color-theme; >> + } >> + span { >> + position: absolute; >> + right: 0; >> + color: @main-color-theme; >> + font-size: 30px; >> + } >> + } >> +} >> +li.line-odd { >> + background-color: @light-color-theme; >> +} >> + >> +#user-avatar { >> + height: 40px; >> + width: 40px; >> + padding: 2px; >> + >> + align-self: center; >> + >> + :hover { >> + cursor: pointer; >> + } >> + img { >> + max-height: 40px; >> + max-width: 40px; >> + position: relative; >> + top: -2px; >> + padding: 2px; >> + background-color: @white; >> + border-radius: 2px; >> + } >> +} >> + >> +#main-navigation-bar { >> + position: relative; >> + width: 100%; >> + min-width: @min-container-width; >> + display: flex; >> + flex-direction: row; >> + align-items: center; >> + justify-content: space-between; >> + font-family: Quicksand,sans-serif; >> + background-color: @dark-color-theme; >> + z-index: 5; >> + height: @app-bar-height; >> +} >> +#main-nav-bar-left { >> + position: relative; >> + display: flex; >> + align-items: center; >> +} >> +#main-nav-bar-right { >> + position: relative; >> + display: flex; >> + align-items: center; >> + padding-right: 15px; >> +} >> + >> +.app-btn{ >> + height: @app-bar-height; >> + background-color: @dark-color-theme; >> + display: flex; >> + align-items: center; >> + flex-direction: row; >> + margin-right: 2px; >> + margin-left: 2px; >> + a { >> + padding:10px; >> + color: @font-color-for-dark; >> + font-size: 1.4em !important; >> + } >> +} >> + >> +.app-btn a:visited { >> + color: @font-color-for-dark; >> +} >> + >> +.app-btn:hover{ >> + position: relative; >> + top: -6px; >> + background-color: @main-color-theme; >> + border-bottom-left-radius: 5px; >> + border-bottom-right-radius: 5px; >> + box-shadow: 1px 1px 12px @shadow-color; >> + a { >> + position: relative; >> + top: 6px; >> + color : @font-color-for-main; >> + } >> +} >> +.app-btn.selected:hover { >> + background-color: @dark-color-theme; >> + box-shadow: none; >> + top:0; >> +} >> + >> +.app-btn a:hover { >> + text-decoration: none; >> +} >> +#app-selected { >> + position: relative; >> + display: flex; >> + flex-direction: column; >> + align-items: center; >> + justify-content: center; >> + background-color: @main-color-theme; >> + box-shadow: 1px -2px 12px @shadow-color; >> + z-index: 0; >> + opacity: .99; >> + border-top-left-radius : 8px ; >> + border-top-right-radius : 8px ; >> + a { >> + position: relative; >> + top: 3px; >> + color: @font-color-for-main; >> + } >> +} >> +.app-btn.selected a:hover { >> + text-decoration: none; >> +} >> + >> +#app-bar-line { >> + position: relative; >> + width: 100%; >> + min-width: @min-container-width; >> + height: @color-line-height; >> + background-color: @main-color-theme; >> + box-shadow: 2px 2px 5px @shadow-color; >> +} >> +#color-add { >> + width: 150px; >> + background-color: @main-color-theme; >> + height: @color-line-height; >> + z-index: 20; >> + position: relative; >> + top: @color-line-height; >> +} >> + >> +#more-app { >> + position: relative; >> + display: flex; >> + align-items: center; >> + justify-content: center; >> + font-weight: bold; >> + font-size: 1.4em !important; >> + width: 40px; >> + height: @app-bar-height; >> + color: @font-color-for-dark; >> +} >> +#more-app:hover { >> + background-color: @main-color-theme; >> + text-decoration: none; >> +} >> +#more-app:hover #more-app-list { >> + display: block; >> +} >> +#more-app.selected { >> + background-color: @main-color-theme; >> +} >> + >> +#more-app-list { >> + display: none; >> + position: absolute; >> + top: @app-bar-height; >> + left: -20px; >> + background-color: @dark-color-theme; >> + z-index: 10; >> + border: solid 4px @main-color-theme; >> + border-top-width: @color-line-height; >> + border-bottom-left-radius: 4px; >> + border-bottom-right-radius: 4px; >> + li { >> + padding-left : 4px; >> + padding-right: 4px; >> + } >> + >> + a { >> + color: @font-color-for-dark; >> + font-size: 15px; >> + } >> + >> + :hover { >> + background-color: @medium-color-theme; >> + a { >> + box-shadow: none; >> + color: @dark-color-theme; >> + } >> + a:hover{ >> + box-shadow: none; >> + text-decoration: none; >> + border-radius: 0; >> + } >> + } >> + >> + li.selected { >> + background-color: @main-color-theme; >> + a { >> + color: @font-color-for-main; >> + } >> + a:hover { >> + color: @font-color-for-main; >> + background-color: @main-color-theme; >> + } >> + } >> +} >> + >> +#homeButton { >> + display: flex; >> + //visibility: hidden; >> + align-items: center; >> + justify-content: center; >> + background-color:@grey; >> + border: none; >> + border-radius : 0; >> + >> + height: @app-bar-height; >> + width : @home-btn-width; >> + text-decoration: none; >> + img { >> + height: 25px; >> + transition: all .2s ease-in-out; >> + } >> +} >> + >> +#homeButton:hover img { >> + transform: scale(1.1); >> +} >> + >> +#app-bar-list { >> + display: flex; >> +} >> + >> +#user-details { >> + position: absolute; >> + right: 20px; >> + top : 62px; >> + background-color: @dark-color-theme; >> + color : @font-color-for-dark; >> + font-size: 15px; >> + font-weight: bold; >> + padding-top: 5px; >> + padding-bottom: 10px; >> + z-index: 15; >> + box-shadow: 3px 3px 12px @shadow-color; >> + border-radius: 3px; >> + transition: all .1s ease-in-out; >> + >> + img { >> + height: 50px; >> + background-color: @white; >> + padding: 4px; >> + border-radius : 3px; >> + margin-left: 10px; >> + margin-right: 5px; >> + } >> + #logout { >> + background-color: @white; >> + color: @dark-color-theme !important; >> + border-radius: 2px; >> + :hover { >> + text-decoration: none; >> + } >> + } >> +} >> + >> +#user-details:after{ >> + content: ''; >> + position: absolute; >> + top: -10px; >> + right: 5px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-bottom: 10px solid @dark-color-theme; >> + border-left: 10px solid transparent; >> +} >> + >> +a.user-pref-btn { >> + margin-top: 15px; >> + background-color: @dark-color-theme; >> + margin-left: 10px; >> + margin-right: 10px; >> + padding-top: 2px; >> + padding-bottom: 2px; >> + display: flex; >> + justify-content: center; >> + color: @font-color-for-dark !important; >> + :hover { >> + text-decoration: none; >> + } >> +} >> + >> +#user-name { >> + display: flex; >> + flex-direction: column; >> + justify-content: center; >> + align-content: center; >> + padding-left : 5px; >> + padding-right : 5px; >> + span { >> + min-width: 100px; >> + padding-bottom : 5px; >> + padding-top : 5px; >> + } >> +} >> + >> +#user-row1 { >> + display: flex; >> + flex-direction: row; >> + justify-content: center; >> + #user-lang { >> + display: flex; >> + flex-direction: row; >> + justify-content: center; >> + align-content: center; >> + padding-left: 10px; >> + padding-right: 10px; >> + span { >> + min-width: 30px; >> + color: @font-color-for-dark; >> + } >> + } >> +} >> + >> +.appbar-btn-img { >> + height: @app-bar-height - 40px; >> +} >> + >> +#help-btn { >> + font-size: 10px; >> + min-width: 20px; >> + margin-right: 15px; >> +} >> +/* Begin sub Menu section */ >> + >> +#app-navigation { >> + height: @sub-app-bar-height; >> + border-right: solid 1px @black; >> + border-bottom: solid 1px @black; >> + width: 100%; >> + min-width: @min-container-width; >> + h2 { >> + display: none; >> + } >> + ul { >> + display: flex; >> + flex-direction: row; >> + background-color: @grey; >> + flex-grow: 1; >> + } >> + ul li ul li { >> + border-left: solid 1px @black; >> + height: @sub-app-bar-height; >> + display: flex; >> + align-items: center; >> + justify-items: center; >> + justify-content: center; >> + min-width: 75px; >> + padding-left: 6px; >> + padding-right: 6px; >> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >> + border-bottom: solid 1px @black; >> + font-size: 12px; >> + @media screen and (max-width: 1500px) { >> + font-size: 10px; >> + min-width: 65px; >> + } >> + @media screen and (max-width: 1300px) { >> + font-size: 10px; >> + min-width: 50px; >> + } >> + a { >> + display: flex; >> + justify-content: center; >> + align-items: center; >> + text-align: center; >> + height: 100%; >> + width: 100%; >> + text-decoration: none; >> + } >> + } >> +} >> + >> +#app-navigation ul li ul li:last-child { >> + border-right: solid 1px @black; >> +} >> + >> +#app-navigation ul li ul li:hover { >> + background-color: @main-color-theme; >> + min-height: @sub-app-bar-height; >> + position: relative; >> + //top: -1px; >> + a { >> + color: @white; >> + text-decoration: none; >> + } >> +} >> +#app-navigation ul li ul li.selected:hover { >> + a { >> + color: @black !important; >> + } >> +} >> + >> +#app-navigation ul li ul li.selected { >> + background-color: @white; >> + position: relative; >> + top: 1px; >> + height: @sub-app-bar-height + 1px; >> + border-top-right-radius: 2px; >> + border-top-left-radius: 2px; >> + border-bottom: none; >> + >> + :after { >> + content: ''; >> + position: absolute; >> + top: -2px; >> + left: 5px; >> + width: 0; >> + height: 0; >> + border-right: 10px solid transparent; >> + border-top: 10px solid @main-color-theme; >> + border-left: 10px solid transparent; >> + } >> + >> +} >> + >> + >> +/* End sub Menu section */ >> + >> +/* begin sub Menu section 3rd level */ >> + >> +.button-bar.tab-bar { >> + ul li ul li { >> + border: solid 1px @grey; >> + border-radius: 4px; >> + a { >> + width: 100%; >> + height: 100%; >> + } >> + } >> + li.selected{ >> + background-color: @main-color-theme; >> + a{ >> + color: @font-color-for-main; >> + } >> + } >> + ul li ul li:hover { >> + background-color: @main-color-theme; >> + a { >> + color: @font-color-for-main ; >> + } >> + } >> +} >> + >> +#third-level-menu-container { >> + display: flex; >> + flex-direction: row; >> +} >> +#working-area { >> + width: 100%; >> +} >> + >> +#left-column-menu { >> + width: 100px; >> +} >> + >> +.third-lvl-menu { >> + background-color: @dark-color-theme; >> + position: relative; >> + left: -10px; >> + border-top-right-radius: 4px; >> + border-bottom-right-radius: 4px; >> + padding-top: 4px; > > |
Administrator
|
In reply to this post by Julien NICOLAS
Le 24/08/2016 à 09:23, Julien NICOLAS a écrit :
> Hi Jacques, > > I don't understand what to do if we had a new file type. I understand that something is wrong with the svn config but I don't know what. Simple, just add it, like I did for *.less at http://svn.apache.org/viewvc?rev=1757468&view=rev Then update your local one and ask other committers to do so > > For the 4 colors, it is only because my customer order included 4 theme colors and when I push the theme in trunk, I keep them. > > I like the 4 colors (and want to have more :) ) but it seems to be a problem (what is exactly this problem ?). Simple, maintaining 4 similar things instead of 1 > > In the same idea, why do we keep more than one theme ? Just decide witch one is official and then, the other will be push out of the theme folder. This is a moot point (which one? :)) But indeed with plugins I agree we should have only 1 OOTB and others external Jacques > > Julien. > > > On 24/08/2016 07:52, Jacques Le Roux wrote: >> OK, the *.less type is not in the svn config. I'll revert, add it, and commit again. >> >> So again, please committers remember to do so when you commit a new file type. >> >> While at it I really wonder if we need to have 4 colored versions of the same theme in trunk? >> >> I suggest to have only one and propose the others as external components, later plugins. We could use a third party location to propose the 3 >> others theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.) >> >> Opinions? >> >> Jacques >> >> Le 24/08/2016 à 07:44, [hidden email] a écrit : >>> Author: jleroux >>> Date: Wed Aug 24 05:44:00 2016 >>> New Revision: 1757462 >>> >>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev >>> Log: >>> Removes now useless IE7 "star html hack". I was used to prevent IE7 from applying some CCS rules: http://css-discuss.incutio.com/wiki/Star_Html_Hack >>> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ >>> >>> Thanks to Florian Montalbano research at "css property name correction in flatgrey and rainbowstone themes" - >>> https://issues.apache.org/jira/browse/OFBIZ-7960# >>> >>> I checked, the IE7 market share is residual, no needs to keep this dragging down feature >>> >>> Modified: >>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css >>> >>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff >>> ============================================================================== >>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) >>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 05:44:00 2016 >>> @@ -922,10 +922,6 @@ form .basic-table, >>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>> /*text-transform:uppercase;*/ >>> width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> } >>> .basic-table .collapsed { >>> @@ -1512,16 +1508,6 @@ input[type="button"] { >>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>> /*text-transform:uppercase;*/ >>> width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> -} >>> - >>> -button { >>> - /* IE7 */ >>> - *padding-top: 0.1em; >>> - *padding-bottom: 0.1em; >>> } >>> a.disabled, >>> @@ -1563,11 +1549,6 @@ input[type="week"] { >>> padding: 0.2em 0.3em; >>> height: 1.8em; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0.1em; >>> - *height: auto; >>> } >>> /* >>> >>> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>> URL: >>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff >>> ============================================================================== >>> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less (original) >>> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less Wed Aug 24 05:44:00 2016 >>> @@ -1,1997 +1,1990 @@ >>> -/* common colors */ >>> -@black: #000; >>> -@white: #fff; >>> -@grey: #e6e6e6; >>> -@greydark: #929292; >>> - >>> -@color-success: #8cff8c; >>> -@font-color-for-success: @black; >>> -@color-alert: #ff8c8c; >>> -@font-color-for-alert: @black; >>> - >>> -@color-success-dark: #356e35; >>> -@font-color-for-success: @black; >>> -@color-alert-dark: #932f33; >>> -@font-color-for-alert: @black; >>> - >>> -@color-background-alert: #f2dede; >>> -@color-font-alert: #a94442; >>> -@color-border-alert: #ebccd1; >>> - >>> -@color-background-success: #dff0d8; >>> -@color-font-success: #3c763d; >>> -@color-border-success: #d6e9c6; >>> - >>> -/* Saphir colors */ >>> -@blue-dark: #002333; >>> -@blue-main: #005982; >>> -@blue-medium: #c7dfff; >>> -@blue-light: #f1f7ff; >>> -@blue-light2: #e4f0f5; >>> - >>> -/* Ruby colors */ >>> -@red-dark: #420000; >>> -@red-main: #bf1616; >>> -@red-medium: #f7baba; >>> -@red-light: #fce7e7; >>> -@red-light2: #fed7c9; >>> - >>> -/* Emerald colors */ >>> -@green-dark: #197948; >>> -@green-main: #23af9b; >>> -@green-medium: #7ae3ad; >>> -@green-light: #e5f9ef; >>> -@green-light2: #d7f9ef; >>> - >>> -/* Amber colors */ >>> -@amber-dark: #bc4216; >>> -@amber-main: #f08906; >>> -@amber-medium: #f5c4b3; >>> -@amber-light: #fcede8; >>> -@amber-light2: #fcedcd; >>> - >>> -/* Saphir theme */ >>> -/* >>> -@main-color-theme : @blue-main; >>> -@dark-color-theme : @blue-dark; >>> -@medium-color-theme : @blue-medium; >>> -@light-color-theme : @blue-light; >>> -@light2-color-theme : @blue-light2; >>> -@font-color-for-dark : @grey; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -*/ >>> - >>> -/* Ruby theme */ >>> -/* >>> -@main-color-theme : @red-main; >>> -@dark-color-theme : @red-dark; >>> -@medium-color-theme : @red-medium; >>> -@light-color-theme : @red-light; >>> -@light2-color-theme : @red-light2; >>> -@font-color-for-dark : @grey; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -/* >>> - >>> -/* Emerald theme */ >>> -/* >>> -@main-color-theme : @green-main; >>> -@dark-color-theme : @green-dark; >>> -@medium-color-theme : @green-medium; >>> -@light-color-theme : @green-light; >>> -@light2-color-theme : @green-light2; >>> -@font-color-for-dark : @white; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -*/ >>> -/* Amber theme */ >>> -@main-color-theme : @amber-main; >>> -@dark-color-theme : @amber-dark; >>> -@medium-color-theme : @amber-medium; >>> -@light-color-theme : @amber-light; >>> -@light2-color-theme : @amber-light2; >>> -@font-color-for-dark : @white; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> - >>> - >>> -@app-bar-height: 60px; >>> -@sub-app-bar-height: 40px; >>> -@footer-height: 20px; >>> -@home-btn-width: 47px; >>> -@color-line-height: 9px; >>> - >>> -@home-menu-tile-height: 80px; >>> -@home-menu-tile-min-width: 100px; >>> -@home-menu-tile-max-width: 100px; >>> - >>> -@third-lvl-height: 80px; >>> -@third-lvl-width : 100px; >>> -@min-screen : 1170px; >>> -@min-container-width: 1130px; >>> - >>> -@box-border-color: #d7d7d7; >>> - >>> -@font-face { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - src: url('fonts/quicksand/quicksandbold.otf'); >>> - font-weight: normal; >>> - font-style: normal; >>> -} >>> - >>> -@font-face { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - src: url('fonts/quicksand/quicksandbold.otf'); >>> - font-weight: bold; >>> - font-style: normal; >>> -} >>> - >>> -/* ---------------------------------- */ >>> -/* Begin special checkbox type switch */ >>> -/* ---------------------------------- */ >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox { >>> - display: none; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label, >>> -[type="checkbox"]:checked.nrd-chkbox + label{ >>> - cursor: pointer; >>> -} >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>> -[type="checkbox"]:checked.nrd-chkbox + label:before{ >>> - content: ""; >>> - width: 150px; >>> - min-width: 150px; >>> - background-color: @light-color-theme; >>> - padding: 2px 20px 2px 20px; >>> - border-radius: 8px 8px 8px 8px; >>> - >>> - cursor: pointer; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> - content: ""; >>> - position: relative; >>> - left:-35px; >>> - background-color: @dark-color-theme; >>> - min-height: 10px; >>> - min-width: 10px; >>> - padding-left: 4px; >>> - padding-right: 5px; >>> - border-radius: 8px 8px 8px 8px; >>> - transition: all .2s; >>> -} >>> - >>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> - position: relative; >>> - left: -15px; >>> - transition: all .2s; >>> -} >>> -/* ---------------------------------- */ >>> -/* End special checkbox type switch */ >>> -/* ---------------------------------- */ >>> - >>> -/* ---------------------------------- */ >>> -/* Begin square Checkbox */ >>> -/* ---------------------------------- */ >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox, >>> -[type="checkbox"]:checked.nrd-square-chkbox{ >>> - position: absolute; >>> - left: -9999px; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label{ >>> - content: ''; >>> - padding-left: 35px; >>> - position: relative; >>> - cursor: pointer; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 12px; >>> - >>> -} >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> - content: ''; >>> - position: absolute; >>> - left:10px; >>> - top: -4px; >>> - width: 17px; >>> - height: 17px; /* dim. de la case */ >>> - border: 1px solid #aaa; >>> - background: @light-color-theme; >>> - border-radius: 2px; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>> - background: @light-color-theme; >>> -} >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> - background: @main-color-theme; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>> - content: 'â'; >>> - position: absolute; >>> - top: -4px; >>> - left: 14px; >>> - font-size: 16px; >>> - color: @font-color-for-main; >>> - transition: all .2s; >>> -} >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>> - opacity: 0; >>> - transform: scale(0); >>> -} >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>> - opacity: 1; >>> - transform: scale(1); >>> -} >>> -/* ---------------------------------*/ >>> -/* End square Checkbox */ >>> -/* ---------------------------------*/ >>> - >>> -/* ---------------------------------*/ >>> -/* Begin class content mgmt */ >>> -/* ---------------------------------*/ >>> - >>> - >>> -.flex-row { >>> - display: flex; >>> - flex-direction: row !important; >>> -} >>> -.flex-column { >>> - display: flex; >>> - flex-direction: column; >>> -} >>> - >>> -.col-width-1 { >>> - width: 10%; >>> -} >>> -.col-width-2 { >>> - width: 20%; >>> -} >>> -.col-width-3 { >>> - width: 30%; >>> -} >>> -.col-width-4 { >>> - width: 40%; >>> -} >>> -.col-width-5 { >>> - width: 50%; >>> -} >>> -.col-width-6 { >>> - width: 60%; >>> -} >>> -.col-width-7 { >>> - width: 70%; >>> -} >>> -.col-width-8 { >>> - width: 80%; >>> -} >>> -.col-width-9 { >>> - width: 90%; >>> -} >>> -.col-width-10 { >>> - width: 100%; >>> -} >>> - >>> -.align-v-center { >>> - display:flex; >>> - align-items: center; >>> -} >>> - >>> -.align-h-center { >>> - display:flex; >>> - justify-content: center; >>> -} >>> - >>> -/* ---------------------------------*/ >>> -/* End class content mgmt */ >>> -/* ---------------------------------*/ >>> - >>> - >>> -/* ---------------------------------- */ >>> -/* Begin btn-sort */ >>> -/* ---------------------------------- */ >>> - >>> -.btn-sort { >>> - position: relative; >>> - top: -6px; >>> - border:none; >>> - background:none; >>> - border-radius: 0; >>> - margin-left:5px; >>> -} >>> - >>> -.btn-sort:before{ >>> - content: ''; >>> - position: absolute; >>> - left: -1px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-bottom: 10px solid @greydark; >>> - border-left: 10px solid transparent; >>> -} >>> - >>> -.btn-sort:after{ >>> - content: ''; >>> - position: absolute; >>> - right: -1px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-top: 10px solid @greydark; >>> - border-left: 10px solid transparent; >>> - @media screen and (max-width: 1349px) { >>> - right: -5px; >>> - } >>> -} >>> - >>> -.btn-sort.btn-sort-asc:before{ >>> - border-bottom: 10px solid @main-color-theme; >>> -} >>> - >>> -.btn-sort.btn-sort-desc:after{ >>> - border-top: 10px solid @main-color-theme; >>> -} >>> - >>> -/* ---------------------------------- */ >>> -/* End btn-sort */ >>> -/* ---------------------------------- */ >>> - >>> - >>> -/* ---------------------------------- */ >>> -/* Begin defaut colour class */ >>> -/* ---------------------------------- */ >>> - >>> -.dark-color { >>> - background-color: @dark-color-theme !important; >>> - color: @font-color-for-dark !important; >>> -} >>> -.main-color { >>> - background-color: @main-color-theme !important; >>> - color: @font-color-for-main !important; >>> -} >>> -.medium-color { >>> - background-color: @medium-color-theme !important; >>> - color: @font-color-for-medium !important; >>> -} >>> -.light-color { >>> - background-color: @light-color-theme !important; >>> - color: @font-color-for-light !important; >>> -} >>> -.light2-color { >>> - background-color: @light2-color-theme !important; >>> - color: @font-color-for-light !important; >>> -} >>> - >>> -.grey-color { >>> - background-color: @grey !important; >>> -} >>> -.darkgrey-color { >>> - background-color: @greydark !important; >>> -} >>> - >>> -/* begin lookup widget */ >>> -.ui-dialog { >>> - opacity: 1; >>> - z-index: 50; >>> -} >>> - >>> -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >>> - background: none !important; >>> - background-color: @dark-color-theme !important; >>> - button { >>> - background: none; >>> - background-color: @light-color-theme; >>> - } >>> -} >>> -/* end lookup widget */ >>> - >>> -.main-bar-label { >>> - color: @light-color-theme; >>> - padding-left: 3px; >>> - padding-right: 6px; >>> - font-size: 15px; >>> - font-weight: bold; >>> -} >>> - >>> -#company-logo { >>> - right: 10px; >>> - top: 2px; >>> - background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover; >>> - min-height: 50px; >>> - min-width: 50px; >>> - margin-right: 15px; >>> - align-self: center; >>> - @media screen and (min-width : 1232px) { >>> - min-height: 50px; >>> - min-width: 129px; >>> - background: url("images/ofbiz-white.svg") no-repeat left top / cover; >>> - } >>> -} >>> - >>> -.modal-screen { >>> - visibility: hidden; >>> - display: flex; >>> - flex-direction: column; >>> - background-color: @grey; >>> - opacity: .93; >>> - position: fixed; >>> - top: 0; >>> - left: 0; >>> - height: 100%; >>> - width: 100%; >>> - z-index: 9999; >>> -} >>> - >>> -.modal-box{ >>> - background-color: @white; >>> - opacity: 1; >>> - margin: 10%; >>> - border-radius: 10px; >>> - border: solid 2px @main-color-theme; >>> - padding : 10px 40px 10px 40px; >>> - .modal-header { >>> - position: relative; >>> - display: flex; >>> - flex-direction: row; >>> - h2 { >>> - font-size: 25px; >>> - font-weight: normal; >>> - color: @main-color-theme; >>> - } >>> - .btn-close-nrd { >>> - position: absolute; >>> - right: 0; >>> - display: flex; >>> - justify-content: center; >>> - border: solid 1px @main-color-theme; >>> - border-radius: 5px; >>> - color: @main-color-theme; >>> - font-size: 25px; >>> - height: 30px; >>> - width: 30px; >>> - text-decoration: none !important; >>> - } >>> - } >>> - .modal-body { >>> - p { >>> - font-size: 20px; >>> - } >>> - } >>> - .modal-footer { >>> - position: relative; >>> - height: 35px; >>> - display: flex; >>> - justify-content: flex-end; >>> - .btn-nrd { >>> - background: none; >>> - border: none; >>> - text-shadow: none; >>> - opacity: 1; >>> - margin-right: 10px; >>> - font-size: 20px; >>> - padding: 5px; >>> - border-radius: 8px; >>> - } >>> - .btn-nrd-main { >>> - background-color: @main-color-theme; >>> - color: @white; >>> - } >>> - .btn-nrd-std { >>> - background-color: @white; >>> - color: @main-color-theme; >>> - border: solid 1px @main-color-theme !important; >>> - } >>> - } >>> -} >>> -.btn-nrd:hover { >>> - box-shadow: 5px 5px 3px 0 @black; >>> -} >>> - >>> -.btn-nrd-std:hover { >>> - background-color: @main-color-theme !important; >>> - color: @white !important; >>> - border: solid 1px @main-color-theme !important; >>> -} >>> - >>> -.btn-close-nrd:hover { >>> - background-color: @main-color-theme !important; >>> - color: @white !important; >>> -} >>> - >>> -.list-nrd { >>> - border: solid 2px @main-color-theme; >>> - border-bottom-left-radius: 10px; >>> - border-bottom-right-radius: 10px; >>> - display: flex; >>> - flex-direction: column; >>> - margin-top: 15px; >>> - margin-bottom: 15px; >>> - .title-list-nrd { >>> - background-color: @main-color-theme; >>> - color : @white; >>> - font-size: 20px; >>> - font-weight: bold; >>> - padding-left: 5px; >>> - } >>> - >>> - li { >>> - position: relative; >>> - display: flex; >>> - flex-direction: row; >>> - font-size: 20px; >>> - padding-left: 5px; >>> - padding-top: 2px; >>> - padding-bottom: 2px; >>> - margin-bottom: 3px; >>> - a { >>> - color: @main-color-theme; >>> - } >>> - span { >>> - position: absolute; >>> - right: 0; >>> - color: @main-color-theme; >>> - font-size: 30px; >>> - } >>> - } >>> -} >>> -li.line-odd { >>> - background-color: @light-color-theme; >>> -} >>> - >>> -#user-avatar { >>> - height: 40px; >>> - width: 40px; >>> - padding: 2px; >>> - >>> - align-self: center; >>> - >>> - :hover { >>> - cursor: pointer; >>> - } >>> - img { >>> - max-height: 40px; >>> - max-width: 40px; >>> - position: relative; >>> - top: -2px; >>> - padding: 2px; >>> - background-color: @white; >>> - border-radius: 2px; >>> - } >>> -} >>> - >>> -#main-navigation-bar { >>> - position: relative; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - justify-content: space-between; >>> - font-family: Quicksand,sans-serif; >>> - background-color: @dark-color-theme; >>> - z-index: 5; >>> - height: @app-bar-height; >>> -} >>> -#main-nav-bar-left { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> -} >>> -#main-nav-bar-right { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> - padding-right: 15px; >>> -} >>> - >>> -.app-btn{ >>> - height: @app-bar-height; >>> - background-color: @dark-color-theme; >>> - display: flex; >>> - align-items: center; >>> - flex-direction: row; >>> - margin-right: 2px; >>> - margin-left: 2px; >>> - a { >>> - padding:10px; >>> - color: @font-color-for-dark; >>> - font-size: 1.4em !important; >>> - } >>> -} >>> - >>> -.app-btn a:visited { >>> - color: @font-color-for-dark; >>> -} >>> - >>> -.app-btn:hover{ >>> - position: relative; >>> - top: -6px; >>> - background-color: @main-color-theme; >>> - border-bottom-left-radius: 5px; >>> - border-bottom-right-radius: 5px; >>> - box-shadow: 1px 1px 12px @shadow-color; >>> - a { >>> - position: relative; >>> - top: 6px; >>> - color : @font-color-for-main; >>> - } >>> -} >>> -.app-btn.selected:hover { >>> - background-color: @dark-color-theme; >>> - box-shadow: none; >>> - top:0; >>> -} >>> - >>> -.app-btn a:hover { >>> - text-decoration: none; >>> -} >>> -#app-selected { >>> - position: relative; >>> - display: flex; >>> - flex-direction: column; >>> - align-items: center; >>> - justify-content: center; >>> - background-color: @main-color-theme; >>> - box-shadow: 1px -2px 12px @shadow-color; >>> - z-index: 0; >>> - opacity: .99; >>> - border-top-left-radius : 8px ; >>> - border-top-right-radius : 8px ; >>> - a { >>> - position: relative; >>> - top: 3px; >>> - color: @font-color-for-main; >>> - } >>> -} >>> -.app-btn.selected a:hover { >>> - text-decoration: none; >>> -} >>> - >>> -#app-bar-line { >>> - position: relative; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - height: @color-line-height; >>> - background-color: @main-color-theme; >>> - box-shadow: 2px 2px 5px @shadow-color; >>> -} >>> -#color-add { >>> - width: 150px; >>> - background-color: @main-color-theme; >>> - height: @color-line-height; >>> - z-index: 20; >>> - position: relative; >>> - top: @color-line-height; >>> -} >>> - >>> -#more-app { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - font-weight: bold; >>> - font-size: 1.4em !important; >>> - width: 40px; >>> - height: @app-bar-height; >>> - color: @font-color-for-dark; >>> -} >>> -#more-app:hover { >>> - background-color: @main-color-theme; >>> - text-decoration: none; >>> -} >>> -#more-app:hover #more-app-list { >>> - display: block; >>> -} >>> -#more-app.selected { >>> - background-color: @main-color-theme; >>> -} >>> - >>> -#more-app-list { >>> - display: none; >>> - position: absolute; >>> - top: @app-bar-height; >>> - left: -20px; >>> - background-color: @dark-color-theme; >>> - z-index: 10; >>> - border: solid 4px @main-color-theme; >>> - border-top-width: @color-line-height; >>> - border-bottom-left-radius: 4px; >>> - border-bottom-right-radius: 4px; >>> - li { >>> - padding-left : 4px; >>> - padding-right: 4px; >>> - } >>> - >>> - a { >>> - color: @font-color-for-dark; >>> - font-size: 15px; >>> - } >>> - >>> - :hover { >>> - background-color: @medium-color-theme; >>> - a { >>> - box-shadow: none; >>> - color: @dark-color-theme; >>> - } >>> - a:hover{ >>> - box-shadow: none; >>> - text-decoration: none; >>> - border-radius: 0; >>> - } >>> - } >>> - >>> - li.selected { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - a:hover { >>> - color: @font-color-for-main; >>> - background-color: @main-color-theme; >>> - } >>> - } >>> -} >>> - >>> -#homeButton { >>> - display: flex; >>> - //visibility: hidden; >>> - align-items: center; >>> - justify-content: center; >>> - background-color:@grey; >>> - border: none; >>> - border-radius : 0; >>> - >>> - height: @app-bar-height; >>> - width : @home-btn-width; >>> - text-decoration: none; >>> - img { >>> - height: 25px; >>> - transition: all .2s ease-in-out; >>> - } >>> -} >>> - >>> -#homeButton:hover img { >>> - transform: scale(1.1); >>> -} >>> - >>> -#app-bar-list { >>> - display: flex; >>> -} >>> - >>> -#user-details { >>> - position: absolute; >>> - right: 20px; >>> - top : 62px; >>> - background-color: @dark-color-theme; >>> - color : @font-color-for-dark; >>> - font-size: 15px; >>> - font-weight: bold; >>> - padding-top: 5px; >>> - padding-bottom: 10px; >>> - z-index: 15; >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - border-radius: 3px; >>> - transition: all .1s ease-in-out; >>> - >>> - img { >>> - height: 50px; >>> - background-color: @white; >>> - padding: 4px; >>> - border-radius : 3px; >>> - margin-left: 10px; >>> - margin-right: 5px; >>> - } >>> - #logout { >>> - background-color: @white; >>> - color: @dark-color-theme !important; >>> - border-radius: 2px; >>> - :hover { >>> - text-decoration: none; >>> - } >>> - } >>> -} >>> - >>> -#user-details:after{ >>> - content: ''; >>> - position: absolute; >>> - top: -10px; >>> - right: 5px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-bottom: 10px solid @dark-color-theme; >>> - border-left: 10px solid transparent; >>> -} >>> - >>> -a.user-pref-btn { >>> - margin-top: 15px; >>> - background-color: @dark-color-theme; >>> - margin-left: 10px; >>> - margin-right: 10px; >>> - padding-top: 2px; >>> - padding-bottom: 2px; >>> - display: flex; >>> - justify-content: center; >>> - color: @font-color-for-dark !important; >>> - :hover { >>> - text-decoration: none; >>> - } >>> -} >>> - >>> -#user-name { >>> - display: flex; >>> - flex-direction: column; >>> - justify-content: center; >>> - align-content: center; >>> - padding-left : 5px; >>> - padding-right : 5px; >>> - span { >>> - min-width: 100px; >>> - padding-bottom : 5px; >>> - padding-top : 5px; >>> - } >>> -} >>> - >>> -#user-row1 { >>> - display: flex; >>> - flex-direction: row; >>> - justify-content: center; >>> - #user-lang { >>> - display: flex; >>> - flex-direction: row; >>> - justify-content: center; >>> - align-content: center; >>> - padding-left: 10px; >>> - padding-right: 10px; >>> - span { >>> - min-width: 30px; >>> - color: @font-color-for-dark; >>> - } >>> - } >>> -} >>> - >>> -.appbar-btn-img { >>> - height: @app-bar-height - 40px; >>> -} >>> - >>> -#help-btn { >>> - font-size: 10px; >>> - min-width: 20px; >>> - margin-right: 15px; >>> -} >>> -/* Begin sub Menu section */ >>> - >>> -#app-navigation { >>> - height: @sub-app-bar-height; >>> - border-right: solid 1px @black; >>> - border-bottom: solid 1px @black; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - h2 { >>> - display: none; >>> - } >>> - ul { >>> - display: flex; >>> - flex-direction: row; >>> - background-color: @grey; >>> - flex-grow: 1; >>> - } >>> - ul li ul li { >>> - border-left: solid 1px @black; >>> - height: @sub-app-bar-height; >>> - display: flex; >>> - align-items: center; >>> - justify-items: center; >>> - justify-content: center; >>> - min-width: 75px; >>> - padding-left: 6px; >>> - padding-right: 6px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - border-bottom: solid 1px @black; >>> - font-size: 12px; >>> - @media screen and (max-width: 1500px) { >>> - font-size: 10px; >>> - min-width: 65px; >>> - } >>> - @media screen and (max-width: 1300px) { >>> - font-size: 10px; >>> - min-width: 50px; >>> - } >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - text-align: center; >>> - height: 100%; >>> - width: 100%; >>> - text-decoration: none; >>> - } >>> - } >>> -} >>> - >>> -#app-navigation ul li ul li:last-child { >>> - border-right: solid 1px @black; >>> -} >>> - >>> -#app-navigation ul li ul li:hover { >>> - background-color: @main-color-theme; >>> - min-height: @sub-app-bar-height; >>> - position: relative; >>> - //top: -1px; >>> - a { >>> - color: @white; >>> - text-decoration: none; >>> - } >>> -} >>> -#app-navigation ul li ul li.selected:hover { >>> - a { >>> - color: @black !important; >>> - } >>> -} >>> - >>> -#app-navigation ul li ul li.selected { >>> - background-color: @white; >>> - position: relative; >>> - top: 1px; >>> - height: @sub-app-bar-height + 1px; >>> - border-top-right-radius: 2px; >>> - border-top-left-radius: 2px; >>> - border-bottom: none; >>> - >>> - :after { >>> - content: ''; >>> - position: absolute; >>> - top: -2px; >>> - left: 5px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-top: 10px solid @main-color-theme; >>> - border-left: 10px solid transparent; >>> - } >>> - >>> -} >>> - >>> - >>> -/* End sub Menu section */ >>> - >>> -/* begin sub Menu section 3rd level */ >>> - >>> -.button-bar.tab-bar { >>> - ul li ul li { >>> - border: solid 1px @grey; >>> - border-radius: 4px; >>> - a { >>> - width: 100%; >>> - height: 100%; >>> - } >>> - } >>> - li.selected{ >>> - background-color: @main-color-theme; >>> - a{ >>> - color: @font-color-for-main; >>> - } >>> - } >>> - ul li ul li:hover { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main ; >>> - } >>> - } >>> -} >>> - >>> -#third-level-menu-container { >>> - display: flex; >>> - flex-direction: row; >>> -} >>> -#working-area { >>> - width: 100%; >>> -} >>> - >>> -#left-column-menu { >>> - width: 100px; >>> -} >>> - >>> -.third-lvl-menu { >>> - background-color: @dark-color-theme; >>> - position: relative; >>> - left: -10px; >>> - border-top-right-radius: 4px; >>> - border-bottom-right-radius: 4px; >>> - padding-top: 4px; >>> - padding-bottom: 4px; >>> - ul { >>> - li { >>> - ul { >>> - position: relative; >>> - top: 5px; >>> - width: @third-lvl-width; >>> - } >>> - } >>> - } >>> - h2 { >>> - visibility: hidden; >>> - } >>> -} >>> -.third-level-item:last-child { >>> - border-bottom: solid 1px @main-color-theme; >>> -} >>> - >>> -.third-level-item { >>> - min-height: @third-lvl-height; >>> - background-color: @dark-color-theme; >>> - padding-right: 3px; >>> - border-top: solid 1px @main-color-theme; >>> - >>> - a, a:visited { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - width: 100%; >>> - color: @font-color-for-dark !important; >>> - min-height: @third-lvl-height; >>> - max-width: @third-lvl-width; >>> - text-align: center; >>> - } >>> -} >>> -.third-level-item.selected { >>> - position: relative; >>> - border-left: solid 9px @main-color-theme; >>> - a, a:visited { >>> - background-color: @white; >>> - color: @dark-color-theme !important; >>> - } >>> - :after { >>> - content: ''; >>> - position: absolute; >>> - top: 5px; >>> - left: 0; >>> - width: 0; >>> - height: 0; >>> - border-top: 10px solid transparent; >>> - border-left: 10px solid @main-color-theme; >>> - border-bottom: 10px solid transparent; >>> - } >>> -} >>> - >>> -.third-level-item a:hover { >>> - background-color: @main-color-theme; >>> - color: @font-color-for-main ; >>> - text-decoration: none; >>> -} >>> -/* End 3rd level menu */ >>> - >>> - >>> - >>> -/* Begin Home Menu for IB section */ >>> -.fixed-nav-bar { >>> - position: fixed !important; >>> - width: 100%; >>> -} >>> -#nav-bar-offset { >>> - height: @app-bar-height ; >>> -} >>> - >>> -#homeGlyph { >>> - margin-left: 20px; >>> - height: 20px; >>> -} >>> - >>> -#homePageTitle { >>> - color: @white; >>> - font-size: 20px; >>> - font-weight: bold; >>> - margin-right: 20px; >>> - margin-left: 20px; >>> -} >>> -.home-menu-list { >>> - display: flex; >>> - flex-direction: column; >>> - align-items: center; >>> -} >>> -.hp-applist { >>> - display: flex; >>> - flex-direction: row; >>> - color : @white; >>> - align-items: center; >>> - .app-title { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - background-color: @dark-color-theme; >>> - height: @home-menu-tile-height; >>> - padding: 5px 10px 5px 10px; >>> - border-bottom: solid 1px @black; >>> - span { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; >>> - font-size: 15px; >>> - font-weight: bold; >>> - width: 110px; >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - color : @white; >>> - } >>> - } >>> - } >>> - >>> - .hp-menu-item { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - position: relative; >>> - margin-left: 5px; >>> - margin-right: 5px; >>> - border: solid 2px @grey; >>> - border-radius: 8px; >>> - height: @home-menu-tile-height - 4px; >>> - min-width: @home-menu-tile-min-width; >>> - max-width: @home-menu-tile-max-width; >>> - .menu-link { >>> - font-size: 10px; >>> - color: @black; >>> - padding: 10px; >>> - } >>> - .star-link { >>> - position: absolute; >>> - height: 25px; >>> - top: 5px; >>> - right: 5px; >>> - } >>> - } >>> - >>> -} >>> -.hp-applist .app-title span a:hover { >>> - text-decoration: none; >>> -} >>> - >>> -.hp-menu-item.favoriteItem { >>> - border: solid 2px @dark-color-theme; >>> -} >>> - >>> -.hp-menu-item:hover { >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - a { >>> - text-decoration: none; >>> - } >>> -} >>> - >>> -/* End Home Menu for IB section */ >>> - >>> -/* Begin Login screenlet */ >>> -#login-container { >>> - #content-messages { >>> - position: relative; >>> - top: @app-bar-height; >>> - border-radius: 4px; >>> - width: 97%; >>> - &.errorMessage { >>> - background-color : @color-background-alert !important; >>> - color: @color-font-alert !important; >>> - border : solid 1px @color-border-alert !important; >>> - } >>> - &.eventMessage { >>> - background-color : @color-background-success !important; >>> - color: @color-font-success !important; >>> - border : solid 1px @color-border-success !important; >>> - } >>> - } >>> -} >>> -#loginBar { >>> - position: fixed; >>> - top:0; >>> - left: 0; >>> - width: 100%; >>> - height: @app-bar-height; >>> - background-color: @dark-color-theme; >>> - span { >>> - background-color: @white; >>> - color: @main-color-theme; >>> - border-top-right-radius: 5px; >>> - border-top-left-radius: 5px; >>> - font-size: 25px; >>> - position: relative; >>> - top: @app-bar-height - 32px; >>> - left: 15px; >>> - padding: 5px 10px 5px 10px; >>> - } >>> - #company-logo { >>> - position: absolute; >>> - } >>> -} >>> - >>> -.login-screenlet { >>> - display: flex; >>> - flex-direction: column; >>> - min-width: 300px; >>> - max-width: 50em; >>> - border-radius: 8px !important; >>> - margin-top: 15%; >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - .screenlet-title-bar { >>> - display: flex; >>> - align-content: center; >>> - justify-content: center; >>> - margin:0; >>> - padding:0; >>> - h3{ >>> - padding-top:2px; >>> - padding-bottom:2px; >>> - background-color: @dark-color-theme !important; >>> - color: @font-color-for-dark; >>> - height: 100%; >>> - width:100%; >>> - text-shadow: none; >>> - font-size: 25px; >>> - } >>> - } >>> - .screenlet-body { >>> - background-color: @main-color-theme !important; >>> - form { >>> - .button { >>> - width: 150px; >>> - border-radius: 4px; >>> - background: none; >>> - background-color: @dark-color-theme; >>> - color: @font-color-for-dark; >>> - text-shadow: none; >>> - margin-top: 20px; >>> - margin-bottom: 10px; >>> - } >>> - >>> - table { >>> - tr { >>> - width: 100%; >>> - .label { >>> - color: @font-color-for-main; >>> - width: 25%; >>> - font-size: 15px; >>> - } >>> - input { >>> - width: 100%; >>> - } >>> - .buttontext, >>> - [type="submit"] { >>> - width: 150px; >>> - border-radius: 4px; >>> - background: none; >>> - background-color: @dark-color-theme; >>> - color: @font-color-for-dark; >>> - text-shadow: none; >>> - } >>> - [name="GET_PASSWORD_HINT"] { >>> - background-color: @font-color-for-dark; >>> - color: @main-color-theme; >>> - border: none; >>> - width: 100%; >>> - } >>> - [name="EMAIL_PASSWORD"] { >>> - background-color: @font-color-for-dark; >>> - color: @main-color-theme; >>> - border: none; >>> - width: 100%; >>> - } >>> - td { >>> - padding: 5px; >>> - color: @font-color-for-main; >>> - font-size: 15px; >>> - font-weight: bold; >>> - } >>> - } >>> - } >>> - } >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - } >>> -} >>> - >>> -.login-screenlet .screenlet-title-bar { >>> - text-align: center; >>> -} >>> - >>> -/* End Login screenlet */ >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* Begin Screenlet style */ >>> -/* --------------------------------------------- */ >>> -.screenlet-title-bar { >>> - text-decoration: none ; >>> - color: @dark-color-theme; >>> - background-color: @grey; >>> - height: 1%; /* IE fix */ >>> - min-height: 1.5em; >>> - padding:0.8em 0.2em; >>> -} >>> - >>> -.screenlet { >>> - border-radius: 5px; >>> - border: solid 1px @grey; >>> - height: auto !important; >>> - margin-bottom: 1em; >>> - overflow: auto; >>> -} >>> - >>> -.screenlet-body { >>> - background-color: #FFFFFF; >>> - height: auto !important; >>> - height: 1%; >>> - padding: 0.4em; >>> -} >>> - >>> -.screenlet-body div { >>> - margin: 0.8em 0.1em >>> -} >>> - >>> -/* Special Screenlet style for locale and timezone window */ >>> -.lists.screenlet { >>> - margin-left: 25%; >>> - margin-right: 25%; >>> - margin-top: 1em; >>> -} >>> - >>> -.lists.screenlet .basic-table tr td { >>> - text-align: center; >>> -} >>> - >>> -.lists.screenlet .basic-table tr td a { >>> - display: block; >>> -} >>> - >>> -/* Alternate table header style */ >>> -.basic-table .header-row-2 th, >>> -.basic-table .header-row-2 td { >>> - background-color: @greydark; >>> - border-bottom: 0; >>> - border-left: 0.1em solid #aaa; >>> - border-right: 0.1em solid #888; >>> - color: #ffffff; >>> - font-weight: bold; >>> -} >>> - >>> -/* No padding screenlet decorator */ >>> -.no-padding { >>> - padding: 0; >>> - border: none; >>> -} >>> - >>> -.no-padding .h1, >>> -.no-padding .h2, >>> -.no-padding .h3, >>> -.no-paddingr h1, >>> -.no-padding h2, >>> -.no-padding h3 { >>> - padding: 0.7em; >>> -} >>> - >>> -.screenlet-title-bar ul a:hover { >>> - color: @main-color-theme !important; >>> - text-decoration: none; >>> -} >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* End Screenlet style */ >>> -/* --------------------------------------------- */ >>> - >>> -/* ---------------------- */ >>> -/* Table Styles */ >>> -/* ---------------------- */ >>> - >>> -.basic-table { >>> - background-color: #ffffff; >>> - color: #000000; >>> - margin-bottom: 1em; >>> - width: 100%; >>> -} >>> - >>> -form table, >>> -form .basic-table, >>> -.screenlet-body .basic-table { >>> - background: transparent; >>> - margin-bottom: 0; >>> -} >>> - >>> -.basic-table tr td { >>> - /* Style for all cells */ >>> - padding: 0.8em 0.1em; >>> - vertical-align: middle; >>> -} >>> - >>> -.basic-table tr .align-bottom { >>> - vertical-align: bottom; >>> -} >>> - >>> -.basic-table tr .align-top { >>> - vertical-align: top; >>> -} >>> - >>> -.basic-table tr .label, >>> -.basic-table tr .group-label { >>> - /* field labels for forms */ >>> - font-weight: bold; >>> - text-align: right; >>> - padding-right: 1.5em; >>> - white-space: nowrap; >>> - width: 1%; >>> -} >>> - >>> -.basic-table tr .group-label { >>> - /* "header" for field label groups */ >>> - font-size: 1.2em; >>> - padding: 2em 1.5em 0 0; >>> -} >>> - >>> -.basic-table tr th, >>> -.basic-table .header-row { >>> - font-weight: bold; >>> - text-align: left; >>> -} >>> - >>> -.basic-table .header-row td { >>> - border-bottom: 0.1em solid #000000; >>> -} >>> - >>> -.basic-table .header-row td a { >>> - color: #000000; >>> -} >>> - >>> -.basic-table .alternate-row { >>> - /* Alternating row style */ >>> - background-color: #eeeeee; >>> -} >>> - >>> -.basic-table .selected { >>> - background: #FFFCCF; >>> -} >>> - >>> -.basic-table .alternate-rowSelected { >>> - background: #FFF55F; >>> -} >>> - >>> -.basic-table .Validate { >>> - /*Style use by alt-row-style on list*/ >>> - background: #A0D5F7; >>> -} >>> - >>> -.basic-table .alternate-rowValidate { >>> - /*Style use by alt-row-style on list*/ >>> - background: #72A8F2; >>> -} >>> - >>> -.basic-table .Warn { >>> - /*Style use by alt-row-style on list*/ >>> - background: #f55C5C; >>> -} >>> - >>> -.basic-table .alternate-rowWarn { >>> - /*Style use by alt-row-style on list*/ >>> - background: #FC7455; >>> -} >>> - >>> -.basic-table tr .button-col { >>> - /* button column style - for the small >>> - collection of buttons used in lists */ >>> - vertical-align: top; >>> - padding: 0.3em; >>> -} >>> -.basic-table tr .button-col a, >>> -.basic-table tr .button-col button, >>> -.basic-table tr .button-col input[type="reset"], >>> -.basic-table tr .button-col input[type="submit"], >>> -.basic-table tr .button-col input[type="button"] { >>> - -webkit-appearance: none; >>> - -moz-border-radius: 1em; >>> - -webkit-border-radius: 1em; >>> - border-radius: 2px; >>> - border: 0.1em solid @main-color-theme; >>> - background-color: @white; >>> - cursor: pointer; >>> - color: @main-color-theme; >>> - display:inline-block; >>> - font-size: 0.9em; >>> - font-weight: bold; >>> - outline: 0; >>> - overflow: visible; >>> - padding: 0.1em 0.5em 0.2em 0.5em; >>> - text-decoration: none; >>> - width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> - >>> - &:hover { >>> - background-color: @main-color-theme; >>> - color: @white; >>> - } >>> -} >>> - >>> -.basic-table .collapsed { >>> - visibility: collapse; >>> -} >>> - >>> -/* Sort field style */ >>> -.basic-table .header-row-2 th .sort-order-asc, >>> -.basic-table .header-row-2 td .sort-order-asc{ >>> - background: url(/images/arrow-gr-up.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> -} >>> -.basic-table .header-row-2 th .sort-order-desc, >>> -.basic-table .header-row-2 td .sort-order-desc{ >>> - background: url(/images/arrow-gr-dw.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> -} >>> -.basic-table .header-row-2 th .sort-order, >>> -.basic-table .header-row-2 td .sort-order{ >>> - background: url(/images/arrow-gr.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> - color:#fff >>> -} >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* Begin Message Info */ >>> -/* --------------------------------------------- */ >>> -.count-message { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - min-height:20px; >>> - min-width: 20px; >>> - max-height:20px; >>> - max-width: 20px; >>> - background: @white; >>> - font-size:12px; >>> - font-weight: bold; >>> - border-radius: 50%; >>> -} >>> -.info-message-title { >>> - min-width:150px; >>> - margin: 5px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - font-weight: bold; >>> -} >>> -.message-list { >>> - position:relative; >>> - margin-top: 10px; >>> - box-shadow: 1px 3px 5px @greydark; >>> - border-radius: 0 5px 5px 0; >>> - transition: height 2s; >>> -} >>> -.message-list-main { >>> - padding: 5px 15px 5px 15px; >>> -} >>> -.message-list-alert { >>> - background-color: @color-alert; >>> - border-left : solid 5px @color-alert-dark; >>> - .count-message { >>> - color: @color-alert-dark; >>> - } >>> -} >>> -.message-list-success { >>> - background-color: @color-success; >>> - border-left: solid 5px @color-success-dark; >>> - .count-message { >>> - color: @color-success-dark; >>> - } >>> -} >>> -.message-list-table-container { >>> - background-color: @white; >>> - border-radius: 5px; >>> - overflow: hidden; >>> - height: 0; >>> -} >>> -.info-message-success { >>> - display: none; >>> -} >>> -.info-message-alert { >>> - display: none; >>> -} >>> -table.msg-list { >>> - width: 100%; >>> - font-size: 16px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - padding: 0; >>> - thead { >>> - height: 100%; >>> - background-color: @grey; >>> - margin: 0; >>> - padding: 0; >>> - tr{ >>> - font-weight: bold; >>> - border-bottom: solid 1px @black; >>> - height: 100%; >>> - background-color: @grey; >>> - line-height: 30px; >>> - } >>> - } >>> - tbody { >>> - tr { >>> - line-height: 25px; >>> - } >>> - tr.msg-row-success { >>> - background-color: @color-success; >>> - } >>> - tr.msg-row-alert { >>> - background-color: @color-alert; >>> - } >>> - } >>> - td { >>> - padding-left: 5px; >>> - } >>> -} >>> - >>> -/* --------------------------------------------- */ >>> -/* End Message Info */ >>> -/* --------------------------------------------- */ >>> - >>> -/* ---------------------- */ >>> -/* Paginate Style */ >>> -/* ---------------------- */ >>> - >>> -.paginate-bar-nrd { >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - font-size: 15px; >>> - background-color: @grey; >>> - padding-left: 10px; >>> - padding-top: 3px; >>> - padding-bottom: 3px; >>> - box-shadow: 0 2px 5px @shadow-color; >>> - >>> - ul.paginate-pg-list { >>> - display: flex; >>> - flex-direction: row; >>> - background-color: @white; >>> - color: @main-color-theme; >>> - margin-right: 10px; >>> - border-radius: 8px; >>> - border: solid 1px @box-border-color; >>> - height: 18px; >>> - li { >>> - display: flex; >>> - justify-content: center; >>> - min-width: 17px; >>> - border-right: solid 1px @box-border-color; >>> - padding-left: 2px; >>> - padding-right: 2px; >>> - height:100%; >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - color: @dark-color-theme; >>> - height: 100%; >>> - width: 100%; >>> - } >>> - .paginate-disable { >>> - >>> - } >>> - } >>> - li.selected { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - } >>> - li:first-child, li:last-child { >>> - width: 20px; >>> - } >>> - li:first-child { >>> - border-top-left-radius: 3px; >>> - border-bottom-left-radius: 3px; >>> - } >>> - li:last-child { >>> - border-right: none; >>> - border-top-right-radius: 3px; >>> - border-bottom-right-radius: 3px; >>> - } >>> - } >>> - >>> -} >>> -select.paginate-select { >>> - position: relative; >>> - background: @white; >>> - font-size: 16px; >>> - font-weight: bold; >>> - border: 1px solid @box-border-color; >>> - option { >>> - display: flex; >>> - justify-self: center; >>> - font-size: 14px; >>> - } >>> -} >>> - >>> -.paginate-select-label { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - padding-left: 15px; >>> - padding-right: 15px; >>> -} >>> - >>> -.paginate-information { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - padding-left: 15px; >>> - padding-right: 15px; >>> -} >>> - >>> -ul.paginate-pg-list li:hover{ >>> - background-color: @main-color-theme; >>> - a { >>> - text-decoration: none; >>> - color: @font-color-for-main; >>> - } >>> -} >>> - >>> -/* End of Paginate Style */ >>> -/* ---------------------- */ >>> - >>> -/* ------------------------------- */ >>> -/* List Navigation Style */ >>> -/* ------------------------------- */ >>> - >>> -.nav-pager { >>> - background-color: @greydark; >>> - color: @white; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 9px; >>> - font-weight: bold; >>> - line-height: 3.5em; >>> - height: 3.5em; >>> - margin: 0.5em 0 0.5em 0; >>> - border-radius: 3px 3px 0 0; >>> -} >>> - >>> -.nav-pager ul { >>> - display: inline; /* IE Fix */ >>> -} >>> - >>> -.nav-pager ul li { >>> - float:left; >>> - vertical-align: middle; >>> -} >>> - >>> -.nav-pager ul li a { >>> - display: block; >>> -} >>> - >>> -.nav-pager ul a { >>> - color: @white; >>> - padding: 0 1em 0 1em; >>> - text-decoration: none; >>> -} >>> - >>> -.nav-pager ul a:hover { >>> - background-color: @main-color-theme; >>> - color: @font-color-for-main; >>> -} >>> - >>> -.nav-pager ul .nav-pagesize, >>> -.nav-pager ul .nav-page-select, >>> -.nav-pager ul .nav-displaying { >>> - padding: 0 1em 0 1em; >>> -} >>> - >>> -.nav-pager ul .nav-first-disabled, >>> -.nav-pager ul .nav-previous-disabled, >>> -.nav-pager ul .nav-next-disabled, >>> -.nav-pager ul .nav-last-disabled { >>> - padding: 0 1em 0 1em; >>> -} >>> - >>> -.nav-pager ul .nav-first-disabled:hover, >>> -.nav-pager ul .nav-previous-disabled:hover, >>> -.nav-pager ul .nav-next-disabled:hover, >>> -.nav-pager ul .nav-last-disabled:hover { >>> - cursor: not-allowed; >>> -} >>> - >>> - >>> -.nav-pager ul .nav-displaying { >>> - border-right: none; >>> -} >>> - >>> - >>> -/* ---------------------------- */ >>> -/* Multi-Column Styles */ >>> -/* ---------------------------- */ >>> - >>> -#column-container { >>> - margin: auto; >>> - padding: 1em; >>> - position: relative; >>> - min-width: @min-container-width; >>> -} >>> - >>> -#column-container h1, >>> -#column-container .h1, >>> -#column-container h2, >>> -#column-container .h2 { >>> - margin-bottom: 0.5em; >>> -} >>> - >>> -#column-container h1, >>> -#column-container .h1 { >>> - color: #557996; >>> -} >>> - >>> -#column-container .left { >>> - float: left; >>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>> - width: 22em; >>> - margin-right: 1em; >>> -} >>> - >>> -#column-container .left-larger { >>> - float: left; >>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>> - width: 25em; >>> - margin-right: 1em; >>> -} >>> - >>> -.lefthalf { >>> - float: left; >>> - height: 1%; >>> - left: 0; >>> - margin: 0% 1% 1% 0%; >>> - width: 49%; >>> -} >>> - >>> -.righthalf { >>> - float: right; >>> - height: 1%; >>> - margin: 0 0 1% 1%; >>> - right: 0; >>> - width: 49%; >>> -} >>> - >>> -#column-container .right { >>> - float: right; >>> - margin-left: 1em; >>> - width: 22em; >>> -} >>> - >>> -#column-container .leftonly { >>> - margin-left: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .leftonly-larger { >>> - margin-left: 26em; >>> - width: auto; >>> -} >>> - >>> -#column-container .rightonly { >>> - margin-right: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .center { >>> - margin-left: 23em; >>> - margin-right: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .nocolumns { >>> - width: auto; >>> -} >>> - >>> -/* ---------------------- */ >>> -/* Button Style */ >>> -/* ---------------------- */ >>> - >>> -.button-bar li.buttontext a, >>> -a.buttontext, >>> -a.buttontextbig, >>> -.smallSubmit, >>> -.smallSubmit:hover, >>> -.mediumSubmit, >>> -.largeSubmit, >>> -.loginButton, >>> -.button-style-1 a, >>> -.button-style-1 ul a, >>> -.button-style-2 ul a, >>> -.button-style-2 a, >>> -.button, >>> -button, >>> -input[type="reset"], >>> -input[type="submit"], >>> -input[type="button"] { >>> - -webkit-appearance: none; >>> - -moz-border-radius: 1.1em; >>> - -webkit-border-radius: 1.1em; >>> - border-radius: 2px; >>> - border: 0.1em solid @main-color-theme; >>> - background-color: @white; >>> - cursor: pointer; >>> - color: @main-color-theme; >>> - display:inline-block; >>> - font-size: 1em; >>> - font-weight: bold; >>> - outline: 0; >>> - overflow: visible; >>> - padding: 0.4em 1em 0.4em; >>> - text-decoration:none; >>> - /*text-transform:uppercase;*/ >>> - width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> - &:hover { >>> - color: @font-color-for-main; >>> - background-color: @main-color-theme; >>> - } >>> -} >>> - >>> - >>> -/* ---------------------- */ >>> -/* Footer Style */ >>> -/* ---------------------- */ >>> - >>> -#footer { >>> - background: @dark-color-theme; >>> - border-top: 0.1em inset #000; >>> - padding: 0.5em 0 0.5em 0.5em; >>> - >>> - height: @footer-height; >>> - position: fixed; >>> - bottom: 0; >>> - width: 100%; >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - justify-content: space-between; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; >>> - z-index: 10; >>> - >>> - span { >>> - color: @font-color-for-dark; >>> - padding: 10px; >>> - } >>> - >>> - a { >>> - color: @font-color-for-dark; >>> - font-weight: normal; >>> - } >>> -} >>> - >>> -#footer a:focus { >>> - text-decoration: underline; >>> -} >>> - >>> -#footer-offset { >>> - height: @footer-height + 10px; >>> - width: 100%; >>> -} >>> +/* common colors */ >>> +@black: #000; >>> +@white: #fff; >>> +@grey: #e6e6e6; >>> +@greydark: #929292; >>> + >>> +@color-success: #8cff8c; >>> +@font-color-for-success: @black; >>> +@color-alert: #ff8c8c; >>> +@font-color-for-alert: @black; >>> + >>> +@color-success-dark: #356e35; >>> +@font-color-for-success: @black; >>> +@color-alert-dark: #932f33; >>> +@font-color-for-alert: @black; >>> + >>> +@color-background-alert: #f2dede; >>> +@color-font-alert: #a94442; >>> +@color-border-alert: #ebccd1; >>> + >>> +@color-background-success: #dff0d8; >>> +@color-font-success: #3c763d; >>> +@color-border-success: #d6e9c6; >>> + >>> +/* Saphir colors */ >>> +@blue-dark: #002333; >>> +@blue-main: #005982; >>> +@blue-medium: #c7dfff; >>> +@blue-light: #f1f7ff; >>> +@blue-light2: #e4f0f5; >>> + >>> +/* Ruby colors */ >>> +@red-dark: #420000; >>> +@red-main: #bf1616; >>> +@red-medium: #f7baba; >>> +@red-light: #fce7e7; >>> +@red-light2: #fed7c9; >>> + >>> +/* Emerald colors */ >>> +@green-dark: #197948; >>> +@green-main: #23af9b; >>> +@green-medium: #7ae3ad; >>> +@green-light: #e5f9ef; >>> +@green-light2: #d7f9ef; >>> + >>> +/* Amber colors */ >>> +@amber-dark: #bc4216; >>> +@amber-main: #f08906; >>> +@amber-medium: #f5c4b3; >>> +@amber-light: #fcede8; >>> +@amber-light2: #fcedcd; >>> + >>> +/* Saphir theme */ >>> +/* >>> +@main-color-theme : @blue-main; >>> +@dark-color-theme : @blue-dark; >>> +@medium-color-theme : @blue-medium; >>> +@light-color-theme : @blue-light; >>> +@light2-color-theme : @blue-light2; >>> +@font-color-for-dark : @grey; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +*/ >>> + >>> +/* Ruby theme */ >>> +/* >>> +@main-color-theme : @red-main; >>> +@dark-color-theme : @red-dark; >>> +@medium-color-theme : @red-medium; >>> +@light-color-theme : @red-light; >>> +@light2-color-theme : @red-light2; >>> +@font-color-for-dark : @grey; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +/* >>> + >>> +/* Emerald theme */ >>> +/* >>> +@main-color-theme : @green-main; >>> +@dark-color-theme : @green-dark; >>> +@medium-color-theme : @green-medium; >>> +@light-color-theme : @green-light; >>> +@light2-color-theme : @green-light2; >>> +@font-color-for-dark : @white; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +*/ >>> +/* Amber theme */ >>> +@main-color-theme : @amber-main; >>> +@dark-color-theme : @amber-dark; >>> +@medium-color-theme : @amber-medium; >>> +@light-color-theme : @amber-light; >>> +@light2-color-theme : @amber-light2; >>> +@font-color-for-dark : @white; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> + >>> + >>> +@app-bar-height: 60px; >>> +@sub-app-bar-height: 40px; >>> +@footer-height: 20px; >>> +@home-btn-width: 47px; >>> +@color-line-height: 9px; >>> + >>> +@home-menu-tile-height: 80px; >>> +@home-menu-tile-min-width: 100px; >>> +@home-menu-tile-max-width: 100px; >>> + >>> +@third-lvl-height: 80px; >>> +@third-lvl-width : 100px; >>> +@min-screen : 1170px; >>> +@min-container-width: 1130px; >>> + >>> +@box-border-color: #d7d7d7; >>> + >>> +@font-face { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + src: url('fonts/quicksand/quicksandbold.otf'); >>> + font-weight: normal; >>> + font-style: normal; >>> +} >>> + >>> +@font-face { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + src: url('fonts/quicksand/quicksandbold.otf'); >>> + font-weight: bold; >>> + font-style: normal; >>> +} >>> + >>> +/* ---------------------------------- */ >>> +/* Begin special checkbox type switch */ >>> +/* ---------------------------------- */ >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox { >>> + display: none; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label, >>> +[type="checkbox"]:checked.nrd-chkbox + label{ >>> + cursor: pointer; >>> +} >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>> +[type="checkbox"]:checked.nrd-chkbox + label:before{ >>> + content: ""; >>> + width: 150px; >>> + min-width: 150px; >>> + background-color: @light-color-theme; >>> + padding: 2px 20px 2px 20px; >>> + border-radius: 8px 8px 8px 8px; >>> + >>> + cursor: pointer; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> + content: ""; >>> + position: relative; >>> + left:-35px; >>> + background-color: @dark-color-theme; >>> + min-height: 10px; >>> + min-width: 10px; >>> + padding-left: 4px; >>> + padding-right: 5px; >>> + border-radius: 8px 8px 8px 8px; >>> + transition: all .2s; >>> +} >>> + >>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> + position: relative; >>> + left: -15px; >>> + transition: all .2s; >>> +} >>> +/* ---------------------------------- */ >>> +/* End special checkbox type switch */ >>> +/* ---------------------------------- */ >>> + >>> +/* ---------------------------------- */ >>> +/* Begin square Checkbox */ >>> +/* ---------------------------------- */ >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox, >>> +[type="checkbox"]:checked.nrd-square-chkbox{ >>> + position: absolute; >>> + left: -9999px; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label{ >>> + content: ''; >>> + padding-left: 35px; >>> + position: relative; >>> + cursor: pointer; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 12px; >>> + >>> +} >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> + content: ''; >>> + position: absolute; >>> + left:10px; >>> + top: -4px; >>> + width: 17px; >>> + height: 17px; /* dim. de la case */ >>> + border: 1px solid #aaa; >>> + background: @light-color-theme; >>> + border-radius: 2px; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>> + background: @light-color-theme; >>> +} >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> + background: @main-color-theme; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>> + content: 'â'; >>> + position: absolute; >>> + top: -4px; >>> + left: 14px; >>> + font-size: 16px; >>> + color: @font-color-for-main; >>> + transition: all .2s; >>> +} >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>> + opacity: 0; >>> + transform: scale(0); >>> +} >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>> + opacity: 1; >>> + transform: scale(1); >>> +} >>> +/* ---------------------------------*/ >>> +/* End square Checkbox */ >>> +/* ---------------------------------*/ >>> + >>> +/* ---------------------------------*/ >>> +/* Begin class content mgmt */ >>> +/* ---------------------------------*/ >>> + >>> + >>> +.flex-row { >>> + display: flex; >>> + flex-direction: row !important; >>> +} >>> +.flex-column { >>> + display: flex; >>> + flex-direction: column; >>> +} >>> + >>> +.col-width-1 { >>> + width: 10%; >>> +} >>> +.col-width-2 { >>> + width: 20%; >>> +} >>> +.col-width-3 { >>> + width: 30%; >>> +} >>> +.col-width-4 { >>> + width: 40%; >>> +} >>> +.col-width-5 { >>> + width: 50%; >>> +} >>> +.col-width-6 { >>> + width: 60%; >>> +} >>> +.col-width-7 { >>> + width: 70%; >>> +} >>> +.col-width-8 { >>> + width: 80%; >>> +} >>> +.col-width-9 { >>> + width: 90%; >>> +} >>> +.col-width-10 { >>> + width: 100%; >>> +} >>> + >>> +.align-v-center { >>> + display:flex; >>> + align-items: center; >>> +} >>> + >>> +.align-h-center { >>> + display:flex; >>> + justify-content: center; >>> +} >>> + >>> +/* ---------------------------------*/ >>> +/* End class content mgmt */ >>> +/* ---------------------------------*/ >>> + >>> + >>> +/* ---------------------------------- */ >>> +/* Begin btn-sort */ >>> +/* ---------------------------------- */ >>> + >>> +.btn-sort { >>> + position: relative; >>> + top: -6px; >>> + border:none; >>> + background:none; >>> + border-radius: 0; >>> + margin-left:5px; >>> +} >>> + >>> +.btn-sort:before{ >>> + content: ''; >>> + position: absolute; >>> + left: -1px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-bottom: 10px solid @greydark; >>> + border-left: 10px solid transparent; >>> +} >>> + >>> +.btn-sort:after{ >>> + content: ''; >>> + position: absolute; >>> + right: -1px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-top: 10px solid @greydark; >>> + border-left: 10px solid transparent; >>> + @media screen and (max-width: 1349px) { >>> + right: -5px; >>> + } >>> +} >>> + >>> +.btn-sort.btn-sort-asc:before{ >>> + border-bottom: 10px solid @main-color-theme; >>> +} >>> + >>> +.btn-sort.btn-sort-desc:after{ >>> + border-top: 10px solid @main-color-theme; >>> +} >>> + >>> +/* ---------------------------------- */ >>> +/* End btn-sort */ >>> +/* ---------------------------------- */ >>> + >>> + >>> +/* ---------------------------------- */ >>> +/* Begin defaut colour class */ >>> +/* ---------------------------------- */ >>> + >>> +.dark-color { >>> + background-color: @dark-color-theme !important; >>> + color: @font-color-for-dark !important; >>> +} >>> +.main-color { >>> + background-color: @main-color-theme !important; >>> + color: @font-color-for-main !important; >>> +} >>> +.medium-color { >>> + background-color: @medium-color-theme !important; >>> + color: @font-color-for-medium !important; >>> +} >>> +.light-color { >>> + background-color: @light-color-theme !important; >>> + color: @font-color-for-light !important; >>> +} >>> +.light2-color { >>> + background-color: @light2-color-theme !important; >>> + color: @font-color-for-light !important; >>> +} >>> + >>> +.grey-color { >>> + background-color: @grey !important; >>> +} >>> +.darkgrey-color { >>> + background-color: @greydark !important; >>> +} >>> + >>> +/* begin lookup widget */ >>> +.ui-dialog { >>> + opacity: 1; >>> + z-index: 50; >>> +} >>> + >>> +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >>> + background: none !important; >>> + background-color: @dark-color-theme !important; >>> + button { >>> + background: none; >>> + background-color: @light-color-theme; >>> + } >>> +} >>> +/* end lookup widget */ >>> + >>> +.main-bar-label { >>> + color: @light-color-theme; >>> + padding-left: 3px; >>> + padding-right: 6px; >>> + font-size: 15px; >>> + font-weight: bold; >>> +} >>> + >>> +#company-logo { >>> + right: 10px; >>> + top: 2px; >>> + background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover; >>> + min-height: 50px; >>> + min-width: 50px; >>> + margin-right: 15px; >>> + align-self: center; >>> + @media screen and (min-width : 1232px) { >>> + min-height: 50px; >>> + min-width: 129px; >>> + background: url("images/ofbiz-white.svg") no-repeat left top / cover; >>> + } >>> +} >>> + >>> +.modal-screen { >>> + visibility: hidden; >>> + display: flex; >>> + flex-direction: column; >>> + background-color: @grey; >>> + opacity: .93; >>> + position: fixed; >>> + top: 0; >>> + left: 0; >>> + height: 100%; >>> + width: 100%; >>> + z-index: 9999; >>> +} >>> + >>> +.modal-box{ >>> + background-color: @white; >>> + opacity: 1; >>> + margin: 10%; >>> + border-radius: 10px; >>> + border: solid 2px @main-color-theme; >>> + padding : 10px 40px 10px 40px; >>> + .modal-header { >>> + position: relative; >>> + display: flex; >>> + flex-direction: row; >>> + h2 { >>> + font-size: 25px; >>> + font-weight: normal; >>> + color: @main-color-theme; >>> + } >>> + .btn-close-nrd { >>> + position: absolute; >>> + right: 0; >>> + display: flex; >>> + justify-content: center; >>> + border: solid 1px @main-color-theme; >>> + border-radius: 5px; >>> + color: @main-color-theme; >>> + font-size: 25px; >>> + height: 30px; >>> + width: 30px; >>> + text-decoration: none !important; >>> + } >>> + } >>> + .modal-body { >>> + p { >>> + font-size: 20px; >>> + } >>> + } >>> + .modal-footer { >>> + position: relative; >>> + height: 35px; >>> + display: flex; >>> + justify-content: flex-end; >>> + .btn-nrd { >>> + background: none; >>> + border: none; >>> + text-shadow: none; >>> + opacity: 1; >>> + margin-right: 10px; >>> + font-size: 20px; >>> + padding: 5px; >>> + border-radius: 8px; >>> + } >>> + .btn-nrd-main { >>> + background-color: @main-color-theme; >>> + color: @white; >>> + } >>> + .btn-nrd-std { >>> + background-color: @white; >>> + color: @main-color-theme; >>> + border: solid 1px @main-color-theme !important; >>> + } >>> + } >>> +} >>> +.btn-nrd:hover { >>> + box-shadow: 5px 5px 3px 0 @black; >>> +} >>> + >>> +.btn-nrd-std:hover { >>> + background-color: @main-color-theme !important; >>> + color: @white !important; >>> + border: solid 1px @main-color-theme !important; >>> +} >>> + >>> +.btn-close-nrd:hover { >>> + background-color: @main-color-theme !important; >>> + color: @white !important; >>> +} >>> + >>> +.list-nrd { >>> + border: solid 2px @main-color-theme; >>> + border-bottom-left-radius: 10px; >>> + border-bottom-right-radius: 10px; >>> + display: flex; >>> + flex-direction: column; >>> + margin-top: 15px; >>> + margin-bottom: 15px; >>> + .title-list-nrd { >>> + background-color: @main-color-theme; >>> + color : @white; >>> + font-size: 20px; >>> + font-weight: bold; >>> + padding-left: 5px; >>> + } >>> + >>> + li { >>> + position: relative; >>> + display: flex; >>> + flex-direction: row; >>> + font-size: 20px; >>> + padding-left: 5px; >>> + padding-top: 2px; >>> + padding-bottom: 2px; >>> + margin-bottom: 3px; >>> + a { >>> + color: @main-color-theme; >>> + } >>> + span { >>> + position: absolute; >>> + right: 0; >>> + color: @main-color-theme; >>> + font-size: 30px; >>> + } >>> + } >>> +} >>> +li.line-odd { >>> + background-color: @light-color-theme; >>> +} >>> + >>> +#user-avatar { >>> + height: 40px; >>> + width: 40px; >>> + padding: 2px; >>> + >>> + align-self: center; >>> + >>> + :hover { >>> + cursor: pointer; >>> + } >>> + img { >>> + max-height: 40px; >>> + max-width: 40px; >>> + position: relative; >>> + top: -2px; >>> + padding: 2px; >>> + background-color: @white; >>> + border-radius: 2px; >>> + } >>> +} >>> + >>> +#main-navigation-bar { >>> + position: relative; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + display: flex; >>> + flex-direction: row; >>> + align-items: center; >>> + justify-content: space-between; >>> + font-family: Quicksand,sans-serif; >>> + background-color: @dark-color-theme; >>> + z-index: 5; >>> + height: @app-bar-height; >>> +} >>> +#main-nav-bar-left { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> +} >>> +#main-nav-bar-right { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> + padding-right: 15px; >>> +} >>> + >>> +.app-btn{ >>> + height: @app-bar-height; >>> + background-color: @dark-color-theme; >>> + display: flex; >>> + align-items: center; >>> + flex-direction: row; >>> + margin-right: 2px; >>> + margin-left: 2px; >>> + a { >>> + padding:10px; >>> + color: @font-color-for-dark; >>> + font-size: 1.4em !important; >>> + } >>> +} >>> + >>> +.app-btn a:visited { >>> + color: @font-color-for-dark; >>> +} >>> + >>> +.app-btn:hover{ >>> + position: relative; >>> + top: -6px; >>> + background-color: @main-color-theme; >>> + border-bottom-left-radius: 5px; >>> + border-bottom-right-radius: 5px; >>> + box-shadow: 1px 1px 12px @shadow-color; >>> + a { >>> + position: relative; >>> + top: 6px; >>> + color : @font-color-for-main; >>> + } >>> +} >>> +.app-btn.selected:hover { >>> + background-color: @dark-color-theme; >>> + box-shadow: none; >>> + top:0; >>> +} >>> + >>> +.app-btn a:hover { >>> + text-decoration: none; >>> +} >>> +#app-selected { >>> + position: relative; >>> + display: flex; >>> + flex-direction: column; >>> + align-items: center; >>> + justify-content: center; >>> + background-color: @main-color-theme; >>> + box-shadow: 1px -2px 12px @shadow-color; >>> + z-index: 0; >>> + opacity: .99; >>> + border-top-left-radius : 8px ; >>> + border-top-right-radius : 8px ; >>> + a { >>> + position: relative; >>> + top: 3px; >>> + color: @font-color-for-main; >>> + } >>> +} >>> +.app-btn.selected a:hover { >>> + text-decoration: none; >>> +} >>> + >>> +#app-bar-line { >>> + position: relative; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + height: @color-line-height; >>> + background-color: @main-color-theme; >>> + box-shadow: 2px 2px 5px @shadow-color; >>> +} >>> +#color-add { >>> + width: 150px; >>> + background-color: @main-color-theme; >>> + height: @color-line-height; >>> + z-index: 20; >>> + position: relative; >>> + top: @color-line-height; >>> +} >>> + >>> +#more-app { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> + justify-content: center; >>> + font-weight: bold; >>> + font-size: 1.4em !important; >>> + width: 40px; >>> + height: @app-bar-height; >>> + color: @font-color-for-dark; >>> +} >>> +#more-app:hover { >>> + background-color: @main-color-theme; >>> + text-decoration: none; >>> +} >>> +#more-app:hover #more-app-list { >>> + display: block; >>> +} >>> +#more-app.selected { >>> + background-color: @main-color-theme; >>> +} >>> + >>> +#more-app-list { >>> + display: none; >>> + position: absolute; >>> + top: @app-bar-height; >>> + left: -20px; >>> + background-color: @dark-color-theme; >>> + z-index: 10; >>> + border: solid 4px @main-color-theme; >>> + border-top-width: @color-line-height; >>> + border-bottom-left-radius: 4px; >>> + border-bottom-right-radius: 4px; >>> + li { >>> + padding-left : 4px; >>> + padding-right: 4px; >>> + } >>> + >>> + a { >>> + color: @font-color-for-dark; >>> + font-size: 15px; >>> + } >>> + >>> + :hover { >>> + background-color: @medium-color-theme; >>> + a { >>> + box-shadow: none; >>> + color: @dark-color-theme; >>> + } >>> + a:hover{ >>> + box-shadow: none; >>> + text-decoration: none; >>> + border-radius: 0; >>> + } >>> + } >>> + >>> + li.selected { >>> + background-color: @main-color-theme; >>> + a { >>> + color: @font-color-for-main; >>> + } >>> + a:hover { >>> + color: @font-color-for-main; >>> + background-color: @main-color-theme; >>> + } >>> + } >>> +} >>> + >>> +#homeButton { >>> + display: flex; >>> + //visibility: hidden; >>> + align-items: center; >>> + justify-content: center; >>> + background-color:@grey; >>> + border: none; >>> + border-radius : 0; >>> + >>> + height: @app-bar-height; >>> + width : @home-btn-width; >>> + text-decoration: none; >>> + img { >>> + height: 25px; >>> + transition: all .2s ease-in-out; >>> + } >>> +} >>> + >>> +#homeButton:hover img { >>> + transform: scale(1.1); >>> +} >>> + >>> +#app-bar-list { >>> + display: flex; >>> +} >>> + >>> +#user-details { >>> + position: absolute; >>> + right: 20px; >>> + top : 62px; >>> + background-color: @dark-color-theme; >>> + color : @font-color-for-dark; >>> + font-size: 15px; >>> + font-weight: bold; >>> + padding-top: 5px; >>> + padding-bottom: 10px; >>> + z-index: 15; >>> + box-shadow: 3px 3px 12px @shadow-color; >>> + border-radius: 3px; >>> + transition: all .1s ease-in-out; >>> + >>> + img { >>> + height: 50px; >>> + background-color: @white; >>> + padding: 4px; >>> + border-radius : 3px; >>> + margin-left: 10px; >>> + margin-right: 5px; >>> + } >>> + #logout { >>> + background-color: @white; >>> + color: @dark-color-theme !important; >>> + border-radius: 2px; >>> + :hover { >>> + text-decoration: none; >>> + } >>> + } >>> +} >>> + >>> +#user-details:after{ >>> + content: ''; >>> + position: absolute; >>> + top: -10px; >>> + right: 5px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-bottom: 10px solid @dark-color-theme; >>> + border-left: 10px solid transparent; >>> +} >>> + >>> +a.user-pref-btn { >>> + margin-top: 15px; >>> + background-color: @dark-color-theme; >>> + margin-left: 10px; >>> + margin-right: 10px; >>> + padding-top: 2px; >>> + padding-bottom: 2px; >>> + display: flex; >>> + justify-content: center; >>> + color: @font-color-for-dark !important; >>> + :hover { >>> + text-decoration: none; >>> + } >>> +} >>> + >>> +#user-name { >>> + display: flex; >>> + flex-direction: column; >>> + justify-content: center; >>> + align-content: center; >>> + padding-left : 5px; >>> + padding-right : 5px; >>> + span { >>> + min-width: 100px; >>> + padding-bottom : 5px; >>> + padding-top : 5px; >>> + } >>> +} >>> + >>> +#user-row1 { >>> + display: flex; >>> + flex-direction: row; >>> + justify-content: center; >>> + #user-lang { >>> + display: flex; >>> + flex-direction: row; >>> + justify-content: center; >>> + align-content: center; >>> + padding-left: 10px; >>> + padding-right: 10px; >>> + span { >>> + min-width: 30px; >>> + color: @font-color-for-dark; >>> + } >>> + } >>> +} >>> + >>> +.appbar-btn-img { >>> + height: @app-bar-height - 40px; >>> +} >>> + >>> +#help-btn { >>> + font-size: 10px; >>> + min-width: 20px; >>> + margin-right: 15px; >>> +} >>> +/* Begin sub Menu section */ >>> + >>> +#app-navigation { >>> + height: @sub-app-bar-height; >>> + border-right: solid 1px @black; >>> + border-bottom: solid 1px @black; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + h2 { >>> + display: none; >>> + } >>> + ul { >>> + display: flex; >>> + flex-direction: row; >>> + background-color: @grey; >>> + flex-grow: 1; >>> + } >>> + ul li ul li { >>> + border-left: solid 1px @black; >>> + height: @sub-app-bar-height; >>> + display: flex; >>> + align-items: center; >>> + justify-items: center; >>> + justify-content: center; >>> + min-width: 75px; >>> + padding-left: 6px; >>> + padding-right: 6px; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + border-bottom: solid 1px @black; >>> + font-size: 12px; >>> + @media screen and (max-width: 1500px) { >>> + font-size: 10px; >>> + min-width: 65px; >>> + } >>> + @media screen and (max-width: 1300px) { >>> + font-size: 10px; >>> + min-width: 50px; >>> + } >>> + a { >>> + display: flex; >>> + justify-content: center; >>> + align-items: center; >>> + text-align: center; >>> + height: 100%; >>> + width: 100%; >>> + text-decoration: none; >>> + } >>> + } >>> +} >>> + >>> +#app-navigation ul li ul li:last-child { >>> + border-right: solid 1px @black; >>> +} >>> + >>> +#app-navigation ul li ul li:hover { >>> + background-color: @main-color-theme; >>> + min-height: @sub-app-bar-height; >>> + position: relative; >>> + //top: -1px; >>> + a { >>> + color: @white; >>> + text-decoration: none; >>> + } >>> +} >>> +#app-navigation ul li ul li.selected:hover { >>> + a { >>> + color: @black !important; >>> + } >>> +} >>> + >>> +#app-navigation ul li ul li.selected { >>> + background-color: @white; >>> + position: relative; >>> + top: 1px; >>> + height: @sub-app-bar-height + 1px; >>> + border-top-right-radius: 2px; >>> + border-top-left-radius: 2px; >>> + border-bottom: none; >>> + >>> + :after { >>> + content: ''; >>> + position: absolute; >>> + top: -2px; >>> + left: 5px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-top: 10px solid @main-color-theme; >>> + border-left: 10px solid transparent; >>> + } >>> + >>> +} >>> + >>> + >>> +/* End sub Menu section */ >>> + >>> +/* begin sub Menu section 3rd level */ >>> + >>> +.button-bar.tab-bar { >>> + ul li ul li { >>> + border: solid 1px @grey; >>> + border-radius: 4px; >>> + a { >>> + width: 100%; >>> + height: 100%; >>> + } >>> + } >>> + li.selected{ >>> + background-color: @main-color-theme; >>> + a{ >>> + color: @font-color-for-main; >>> + } >>> + } >>> + ul li ul li:hover { >>> + background-color: @main-color-theme; >>> + a { >>> + color: @font-color-for-main ; >>> + } >>> + } >>> +} >>> + >>> +#third-level-menu-container { >>> + display: flex; >>> + flex-direction: row; >>> +} >>> +#working-area { >>> + width: 100%; >>> +} >>> + >>> +#left-column-menu { >>> + width: 100px; >>> +} >>> + >>> +.third-lvl-menu { >>> + background-color: @dark-color-theme; >>> + position: relative; >>> + left: -10px; >>> + border-top-right-radius: 4px; >>> + border-bottom-right-radius: 4px; >>> + padding-top: 4px; >>> + padding-bottom: 4px; >>> + ul { >>> + li { >>> + ul { >>> + position: relative; >>> + top: 5px; >>> + width: @third-lvl-width; >>> + } >>> + } >>> + } >>> + h2 { >>> + visibility: hidden; >>> + } >>> +} >>> +.third-level-item:last-child { >>> + border-bottom: solid 1px @main-color-theme; >>> +} >>> + >>> +.third-level-item { >>> + min-height: @third-lvl-height; >>> + background-color: @dark-color-theme; >>> + padding-right: 3px; >>> + border-top: solid 1px @main-color-theme; >>> + >>> + a, a:visited { >>> + display: flex; >>> + justify-content: center; >>> + align-items: center; >>> + width: 100%; >>> + color: @font-color-for-dark !important; >>> + min-height: @third-lvl-height; >>> + max-width: @third-lvl-width; >>> + text-align: center; >>> + } >>> +} >>> +.third-level-item.selected { >>> + position: relative; >>> + border-left: solid 9px @main-color-theme; >>> + a, a:visited { >>> + background-color: @white; >>> + color: @dark-color-theme !important; >>> + } >>> + :after { >>> + content: ''; >>> + position: absolute; >>> + top: 5px; >>> + left: 0; >>> + width: 0; >>> + height: 0; >>> + border-top: 10px solid transparent; >>> + border-left: 10px solid @main-color-theme; >>> + border-bottom: 10px solid transparent; >>> + } >>> +} >>> + >>> +.third-level-item a:hover { >>> + background-color: @main-color-theme; >>> + color: @font-color-for-main ; >>> + text-decoration: none; >>> +} >>> +/* End 3rd level menu */ >>> + >>> + >>> + >>> +/* Begin Home Menu for IB section */ >>> +.fixed-nav-bar { >>> + position: fixed !important; >>> + width: 100%; >>> +} >>> +#nav-bar-offset { >>> + height: @app-bar-height ; >>> +} >>> + >>> +#homeGlyph { >>> + margin-left: 20px; >>> + height: 20px; >>> +} >>> + >>> +#homePageTitle { >>> + color: @white; >>> + font-size: 20px; >>> + font-weight: bold; >>> + margin-right: 20px; >>> + margin-left: 20px; >>> +} >>> +.home-menu-list { >>> + display: flex; >>> + flex-direction: column; >>> + align-items: center; >>> +} >>> +.hp-applist { >>> + display: flex; >>> + flex-direction: row; >>> + color : @white; >>> + align-items: center; >>> + .app-title { >>> + display: flex; >>> + align-items: center; >>> + justify-content: center; >>> + background-color: @dark-color-theme; >>> + height: @home-menu-tile-height; >>> + padding: 5px 10px 5px 10px; >>> + border-bottom: solid 1px @black; >>> + span { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; >>> + font-size: 15px; >>> + font-weight: bold; >>> + width: 110px; >>> + a { >>> + display: flex; >>> + justify-content: center; >>> + color : @white; >>> + } >>> + } >>> + } >>> + >>> + .hp-menu-item { >>> + display: flex; >>> + align-items: center; >>> + justify-content: center; >>> + position: relative; >>> + margin-left: 5px; >>> + margin-right: 5px; >>> + border: solid 2px @grey; >>> + border-radius: 8px; >>> + height: @home-menu-tile-height - 4px; >>> + min-width: @home-menu-tile-min-width; >>> + max-width: @home-menu-tile-max-width; >>> + .menu-link { >>> + font-size: 10px; >>> + color: @black; >>> + padding: 10px; >>> + } >>> + .star-link { >>> + position: absolute; >>> + height: 25px; >>> + top: 5px; >>> + right: 5px; >>> + } >>> + } >>> + >>> +} >>> +.hp-applist .app-title span a:hover { >>> + text-decoration: none; >>> +} >>> + >>> +.hp-menu-item.favoriteItem { >>> + border: solid 2px @dark-color-theme; >>> +} >>> + >>> +.hp-menu-item:hover { >>> + box-shadow: 3px 3px 12px @shadow-color; >>> + a { >>> + text-decoration: none; >>> + } >>> +} >>> + >>> +/* End Home Menu for IB section */ >>> + >>> +/* Begin Login screenlet */ >>> +#login-container { >>> + #content-messages { >>> + position: relative; >>> + top: @app-bar-height; >>> + border-radius: 4px; >>> + width: 97%; >>> + &.errorMessage { >>> + background-color : @color-background-alert !important; >>> + color: @color-font-alert !important; >>> + border : solid 1px @color-border-alert !important; >>> + } >>> + &.eventMessage { >>> + background-color : @color-background-success !important; >>> + color: @color-font-success !important; >>> + border : solid 1px @color-border-success !important; >>> + } >>> + } >>> +} >>> +#loginBar { >>> + position: fixed; >>> + top:0; >>> + left: 0; >>> + width: 100%; >>> + height: @app-bar-height; >>> + background-color: @dark-color-theme; >>> + span { >>> + background-color: @white; >>> + color: @main-color-theme; >>> + border-top-right-radius: 5px; >>> + border-top-left-radius: 5px; >>> + font-size: 25px; >>> + position: relative; >>> + top: @app-bar-height - 32px; >>> + left: 15px; >>> + padding: 5px 10px 5px 10px; >>> + } >>> + #company-logo { >>> + position: absolute; >>> + } >>> +} >>> + >>> +.login-screenlet { >>> + display: flex; >>> + flex-direction: column; >>> + min-width: 300px; >>> + max-width: 50em; >>> + border-radius: 8px !important; >>> + margin-top: 15%; >>> + box-shadow: 3px 3px 12px @shadow-color; >>> + .screenlet-title-bar { >>> + display: flex; >>> + align-content: center; >>> + justify-content: center; >>> + margin:0; >>> + padding:0; >>> + h3{ >>> + padding-top:2px; >>> + padding-bottom:2px; >>> + background-color: @dark-color-theme !important; >>> + color: @font-color-for-dark; >>> + height: 100%; >>> + width:100%; >>> + text-shadow: none; >>> + font-size: 25px; >>> + } >>> + } >>> + .screenlet-body { >>> + background-color: @main-color-theme !important; >>> + form { >>> + .button { >>> + width: 150px; >>> + border-radius: 4px; >>> + background: none; >>> + background-color: @dark-color-theme; >>> + color: @font-color-for-dark; >>> + text-shadow: none; >>> + margin-top: 20px; >>> + margin-bottom: 10px; >>> + } >>> + >>> + table { >>> + tr { >>> + width: 100%; >>> + .label { >>> + color: @font-color-for-main; >>> + width: 25%; >>> + font-size: 15px; >>> + } >>> + input { >>> + width: 100%; >>> + } >>> + .buttontext, >>> + [type="submit"] { >>> + width: 150px; >>> + border-radius: 4px; >>> + background: none; >>> + background-color: @dark-color-theme; >>> + color: @font-color-for-dark; >>> + text-shadow: none; >>> + } >>> + [name="GET_PASSWORD_HINT"] { >>> + background-color: @font-color-for-dark; >>> + color: @main-color-theme; >>> + border: none; >>> + width: 100%; >>> + } >>> + [name="EMAIL_PASSWORD"] { >>> + background-color: @font-color-for-dark; >>> + color: @main-color-theme; >>> + border: none; >>> + width: 100%; >>> + } >>> + td { >>> + padding: 5px; >>> + color: @font-color-for-main; >>> + font-size: 15px; >>> + font-weight: bold; >>> + } >>> + } >>> + } >>> + } >>> + a { >>> + color: @font-color-for-main; >>> + } >>> + } >>> +} >>> + >>> +.login-screenlet .screenlet-title-bar { >>> + text-align: center; >>> +} >>> + >>> +/* End Login screenlet */ >>> + >>> + >>> +/* --------------------------------------------- */ >>> +/* Begin Screenlet style */ >>> +/* --------------------------------------------- */ >>> +.screenlet-title-bar { >>> + text-decoration: none ; >>> + color: @dark-color-theme; >>> + background-color: @grey; >>> + height: 1%; /* IE fix */ >>> + min-height: 1.5em; >>> + padding:0.8em 0.2em; >>> +} >>> + >>> +.screenlet { >>> + border-radius: 5px; >>> + border: solid 1px @grey; >>> + height: auto !important; >>> + margin-bottom: 1em; >>> + overflow: auto; >>> +} >>> + >>> +.screenlet-body { >>> + background-color: #FFFFFF; >>> + height: auto !important; >>> + height: 1%; >>> + padding: 0.4em; >>> +} >>> + >>> +.screenlet-body div { >>> + margin: 0.8em 0.1em >>> +} >>> + >>> +/* Special Screenlet style for locale and timezone window */ >>> +.lists.screenlet { >>> + margin-left: 25%; >>> + margin-right: 25%; >>> + margin-top: 1em; >>> +} >>> + >>> +.lists.screenlet .basic-table tr td { >>> + text-align: center; >>> +} >>> + >>> +.lists.screenlet .basic-table tr td a { >>> + display: block; >>> +} >>> + >>> +/* Alternate table header style */ >>> +.basic-table .header-row-2 th, >>> +.basic-table .header-row-2 td { >>> + background-color: @greydark; >>> + border-bottom: 0; >>> + border-left: 0.1em solid #aaa; >>> + border-right: 0.1em solid #888; >>> + color: #ffffff; >>> + font-weight: bold; >>> +} >>> + >>> +/* No padding screenlet decorator */ >>> +.no-padding { >>> + padding: 0; >>> + border: none; >>> +} >>> + >>> +.no-padding .h1, >>> +.no-padding .h2, >>> +.no-padding .h3, >>> +.no-paddingr h1, >>> +.no-padding h2, >>> +.no-padding h3 { >>> + padding: 0.7em; >>> +} >>> + >>> +.screenlet-title-bar ul a:hover { >>> + color: @main-color-theme !important; >>> + text-decoration: none; >>> +} >>> + >>> + >>> +/* --------------------------------------------- */ >>> +/* End Screenlet style */ >>> +/* --------------------------------------------- */ >>> + >>> +/* ---------------------- */ >>> +/* Table Styles */ >>> +/* ---------------------- */ >>> + >>> +.basic-table { >>> + background-color: #ffffff; >>> + color: #000000; >>> + margin-bottom: 1em; >>> + width: 100%; >>> +} >>> + >>> +form table, >>> +form .basic-table, >>> +.screenlet-body .basic-table { >>> + background: transparent; >>> + margin-bottom: 0; >>> +} >>> + >>> +.basic-table tr td { >>> + /* Style for all cells */ >>> + padding: 0.8em 0.1em; >>> + vertical-align: middle; >>> +} >>> + >>> +.basic-table tr .align-bottom { >>> + vertical-align: bottom; >>> +} >>> + >>> +.basic-table tr .align-top { >>> + vertical-align: top; >>> +} >>> + >>> +.basic-table tr .label, >>> +.basic-table tr .group-label { >>> + /* field labels for forms */ >>> + font-weight: bold; >>> + text-align: right; >>> + padding-right: 1.5em; >>> + white-space: nowrap; >>> + width: 1%; >>> +} >>> + >>> +.basic-table tr .group-label { >>> + /* "header" for field label groups */ >>> + font-size: 1.2em; >>> + padding: 2em 1.5em 0 0; >>> +} >>> + >>> +.basic-table tr th, >>> +.basic-table .header-row { >>> + font-weight: bold; >>> + text-align: left; >>> +} >>> + >>> +.basic-table .header-row td { >>> + border-bottom: 0.1em solid #000000; >>> +} >>> + >>> +.basic-table .header-row td a { >>> + color: #000000; >>> +} >>> + >>> +.basic-table .alternate-row { >>> + /* Alternating row style */ >>> + background-color: #eeeeee; >>> +} >>> + >>> +.basic-table .selected { >>> + background: #FFFCCF; >>> +} >>> + >>> +.basic-table .alternate-rowSelected { >>> + background: #FFF55F; >>> +} >>> + >>> +.basic-table .Validate { >>> + /*Style use by alt-row-style on list*/ >>> + background: #A0D5F7; >>> +} >>> + >>> +.basic-table .alternate-rowValidate { >>> + /*Style use by alt-row-style on list*/ >>> + background: #72A8F2; >>> +} >>> + >>> +.basic-table .Warn { >>> + /*Style use by alt-row-style on list*/ >>> + background: #f55C5C; >>> +} >>> + >>> +.basic-table .alternate-rowWarn { >>> + /*Style use by alt-row-style on list*/ >>> + background: #FC7455; >>> +} >>> + >>> +.basic-table tr .button-col { >>> + /* button column style - for the small >>> + collection of buttons used in lists */ >>> + vertical-align: top; >>> + padding: 0.3em; >>> +} >>> +.basic-table tr .button-col a, >>> +.basic-table tr .button-col button, >>> +.basic-table tr .button-col input[type="reset"], >>> +.basic-table tr .button-col input[type="submit"], >>> +.basic-table tr .button-col input[type="button"] { >>> + -webkit-appearance: none; >>> + -moz-border-radius: 1em; >>> + -webkit-border-radius: 1em; >>> + border-radius: 2px; >>> + border: 0.1em solid @main-color-theme; >>> + background-color: @white; >>> + cursor: pointer; >>> + color: @main-color-theme; >>> + display:inline-block; >>> + font-size: 0.9em; >>> + font-weight: bold; >>> + outline: 0; >>> + overflow: visible; >>> + padding: 0.1em 0.5em 0.2em 0.5em; >>> + text-decoration: none; >>> + width: auto; >>> + >>> + &:hover { >>> + background-color: @main-color-theme; >>> + color: @white; >>> + } >>> +} >>> + >>> +.basic-table .collapsed { >>> + visibility: collapse; >>> +} >>> + >>> +/* Sort field style */ >>> +.basic-table .header-row-2 th .sort-order-asc, >>> +.basic-table .header-row-2 td .sort-order-asc{ >>> + background: url(/images/arrow-gr-up.png) no-repeat right; >>> + padding-left: 0.5em; >>> + padding-right: 20px; /* Setting must be in px */ >>> +} >>> +.basic-table .header-row-2 th .sort-order-desc, >>> +.basic-table .header-row-2 td .sort-order-desc{ >>> + background: url(/images/arrow-gr-dw.png) no-repeat right; >>> + padding-left: 0.5em; >>> + padding-right: 20px; /* Setting must be in px */ >>> +} >>> +.basic-table .header-row-2 th .sort-order, >>> +.basic-table .header-row-2 td .sort-order{ >>> + background: url(/images/arrow-gr.png) no-repeat right; >>> + padding-left: 0.5em; >>> + padding-right: 20px; /* Setting must be in px */ >>> + color:#fff >>> +} >>> + >>> + >>> +/* --------------------------------------------- */ >>> +/* Begin Message Info */ >>> +/* --------------------------------------------- */ >>> +.count-message { >>> + display: flex; >>> + align-items: center; >>> + justify-content: center; >>> + min-height:20px; >>> + min-width: 20px; >>> + max-height:20px; >>> + max-width: 20px; >>> + background: @white; >>> + font-size:12px; >>> + font-weight: bold; >>> + border-radius: 50%; >>> +} >>> +.info-message-title { >>> + min-width:150px; >>> + margin: 5px; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 16px; >>> + font-weight: bold; >>> +} >>> +.message-list { >>> + position:relative; >>> + margin-top: 10px; >>> + box-shadow: 1px 3px 5px @greydark; >>> + border-radius: 0 5px 5px 0; >>> + transition: height 2s; >>> +} >>> +.message-list-main { >>> + padding: 5px 15px 5px 15px; >>> +} >>> +.message-list-alert { >>> + background-color: @color-alert; >>> + border-left : solid 5px @color-alert-dark; >>> + .count-message { >>> + color: @color-alert-dark; >>> + } >>> +} >>> +.message-list-success { >>> + background-color: @color-success; >>> + border-left: solid 5px @color-success-dark; >>> + .count-message { >>> + color: @color-success-dark; >>> + } >>> +} >>> +.message-list-table-container { >>> + background-color: @white; >>> + border-radius: 5px; >>> + overflow: hidden; >>> + height: 0; >>> +} >>> +.info-message-success { >>> + display: none; >>> +} >>> +.info-message-alert { >>> + display: none; >>> +} >>> +table.msg-list { >>> + width: 100%; >>> + font-size: 16px; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + padding: 0; >>> + thead { >>> + height: 100%; >>> + background-color: @grey; >>> + margin: 0; >>> + padding: 0; >>> + tr{ >>> + font-weight: bold; >>> + border-bottom: solid 1px @black; >>> + height: 100%; >>> + background-color: @grey; >>> + line-height: 30px; >>> + } >>> + } >>> + tbody { >>> + tr { >>> + line-height: 25px; >>> + } >>> + tr.msg-row-success { >>> + background-color: @color-success; >>> + } >>> + tr.msg-row-alert { >>> + background-color: @color-alert; >>> + } >>> + } >>> + td { >>> + padding-left: 5px; >>> + } >>> +} >>> + >>> +/* --------------------------------------------- */ >>> +/* End Message Info */ >>> +/* --------------------------------------------- */ >>> + >>> +/* ---------------------- */ >>> +/* Paginate Style */ >>> +/* ---------------------- */ >>> + >>> +.paginate-bar-nrd { >>> + display: flex; >>> + flex-direction: row; >>> + align-items: center; >>> + font-size: 15px; >>> + background-color: @grey; >>> + padding-left: 10px; >>> + padding-top: 3px; >>> + padding-bottom: 3px; >>> + box-shadow: 0 2px 5px @shadow-color; >>> + >>> + ul.paginate-pg-list { >>> + display: flex; >>> + flex-direction: row; >>> + background-color: @white; >>> + color: @main-color-theme; >>> + margin-right: 10px; >>> + border-radius: 8px; >>> + border: solid 1px @box-border-color; >>> + height: 18px; >>> + li { >>> + display: flex; >>> + justify-content: center; >>> + min-width: 17px; >>> + border-right: solid 1px @box-border-color; >>> + padding-left: 2px; >>> + padding-right: 2px; >>> + height:100%; >>> + a { >>> + display: flex; >>> + justify-content: center; >>> + align-items: center; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + color: @dark-color-theme; >>> + height: 100%; >>> + width: 100%; >>> + } >>> + .paginate-disable { >>> + >>> + } >>> + } >>> + li.selected { >>> + background-color: @main-color-theme; >>> + a { >>> + color: @font-color-for-main; >>> + } >>> + } >>> + li:first-child, li:last-child { >>> + width: 20px; >>> + } >>> + li:first-child { >>> + border-top-left-radius: 3px; >>> + border-bottom-left-radius: 3px; >>> + } >>> + li:last-child { >>> + border-right: none; >>> + border-top-right-radius: 3px; >>> + border-bottom-right-radius: 3px; >>> + } >>> + } >>> + >>> +} >>> +select.paginate-select { >>> + position: relative; >>> + background: @white; >>> + font-size: 16px; >>> + font-weight: bold; >>> + border: 1px solid @box-border-color; >>> + option { >>> + display: flex; >>> + justify-self: center; >>> + font-size: 14px; >>> + } >>> +} >>> + >>> +.paginate-select-label { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 16px; >>> + padding-left: 15px; >>> + padding-right: 15px; >>> +} >>> + >>> +.paginate-information { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 16px; >>> + padding-left: 15px; >>> + padding-right: 15px; >>> +} >>> + >>> +ul.paginate-pg-list li:hover{ >>> + background-color: @main-color-theme; >>> + a { >>> + text-decoration: none; >>> + color: @font-color-for-main; >>> + } >>> +} >>> + >>> +/* End of Paginate Style */ >>> +/* ---------------------- */ >>> + >>> +/* ------------------------------- */ >>> +/* List Navigation Style */ >>> +/* ------------------------------- */ >>> + >>> +.nav-pager { >>> + background-color: @greydark; >>> + color: @white; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 9px; >>> + font-weight: bold; >>> + line-height: 3.5em; >>> + height: 3.5em; >>> + margin: 0.5em 0 0.5em 0; >>> + border-radius: 3px 3px 0 0; >>> +} >>> + >>> +.nav-pager ul { >>> + display: inline; /* IE Fix */ >>> +} >>> + >>> +.nav-pager ul li { >>> + float:left; >>> + vertical-align: middle; >>> +} >>> + >>> +.nav-pager ul li a { >>> + display: block; >>> +} >>> + >>> +.nav-pager ul a { >>> + color: @white; >>> + padding: 0 1em 0 1em; >>> + text-decoration: none; >>> +} >>> + >>> +.nav-pager ul a:hover { >>> + background-color: @main-color-theme; >>> + color: @font-color-for-main; >>> +} >>> + >>> +.nav-pager ul .nav-pagesize, >>> +.nav-pager ul .nav-page-select, >>> +.nav-pager ul .nav-displaying { >>> + padding: 0 1em 0 1em; >>> +} >>> + >>> +.nav-pager ul .nav-first-disabled, >>> +.nav-pager ul .nav-previous-disabled, >>> +.nav-pager ul .nav-next-disabled, >>> +.nav-pager ul .nav-last-disabled { >>> + padding: 0 1em 0 1em; >>> +} >>> + >>> +.nav-pager ul .nav-first-disabled:hover, >>> +.nav-pager ul .nav-previous-disabled:hover, >>> +.nav-pager ul .nav-next-disabled:hover, >>> +.nav-pager ul .nav-last-disabled:hover { >>> + cursor: not-allowed; >>> +} >>> + >>> + >>> +.nav-pager ul .nav-displaying { >>> + border-right: none; >>> +} >>> + >>> + >>> +/* ---------------------------- */ >>> +/* Multi-Column Styles */ >>> +/* ---------------------------- */ >>> + >>> +#column-container { >>> + margin: auto; >>> + padding: 1em; >>> + position: relative; >>> + min-width: @min-container-width; >>> +} >>> + >>> +#column-container h1, >>> +#column-container .h1, >>> +#column-container h2, >>> +#column-container .h2 { >>> + margin-bottom: 0.5em; >>> +} >>> + >>> +#column-container h1, >>> +#column-container .h1 { >>> + color: #557996; >>> +} >>> + >>> +#column-container .left { >>> + float: left; >>> + /* alt: position: absolute; top: 0px; left: 0px; */ >>> + width: 22em; >>> + margin-right: 1em; >>> +} >>> + >>> +#column-container .left-larger { >>> + float: left; >>> + /* alt: position: absolute; top: 0px; left: 0px; */ >>> + width: 25em; >>> + margin-right: 1em; >>> +} >>> + >>> +.lefthalf { >>> + float: left; >>> + height: 1%; >>> + left: 0; >>> + margin: 0% 1% 1% 0%; >>> + width: 49%; >>> +} >>> + >>> +.righthalf { >>> + float: right; >>> + height: 1%; >>> + margin: 0 0 1% 1%; >>> + right: 0; >>> + width: 49%; >>> +} >>> + >>> +#column-container .right { >>> + float: right; >>> + margin-left: 1em; >>> + width: 22em; >>> +} >>> + >>> +#column-container .leftonly { >>> + margin-left: 23em; >>> + width: auto; >>> +} >>> + >>> +#column-container .leftonly-larger { >>> + margin-left: 26em; >>> + width: auto; >>> +} >>> + >>> +#column-container .rightonly { >>> + margin-right: 23em; >>> + width: auto; >>> +} >>> + >>> +#column-container .center { >>> + margin-left: 23em; >>> + margin-right: 23em; >>> + width: auto; >>> +} >>> + >>> +#column-container .nocolumns { >>> + width: auto; >>> +} >>> + >>> +/* ---------------------- */ >>> +/* Button Style */ >>> +/* ---------------------- */ >>> + >>> +.button-bar li.buttontext a, >>> +a.buttontext, >>> +a.buttontextbig, >>> +.smallSubmit, >>> +.smallSubmit:hover, >>> +.mediumSubmit, >>> +.largeSubmit, >>> +.loginButton, >>> +.button-style-1 a, >>> +.button-style-1 ul a, >>> +.button-style-2 ul a, >>> +.button-style-2 a, >>> +.button, >>> +button, >>> +input[type="reset"], >>> +input[type="submit"], >>> +input[type="button"] { >>> + -webkit-appearance: none; >>> + -moz-border-radius: 1.1em; >>> + -webkit-border-radius: 1.1em; >>> + border-radius: 2px; >>> + border: 0.1em solid @main-color-theme; >>> + background-color: @white; >>> + cursor: pointer; >>> + color: @main-color-theme; >>> + display:inline-block; >>> + font-size: 1em; >>> + font-weight: bold; >>> + outline: 0; >>> + overflow: visible; >>> + padding: 0.4em 1em 0.4em; >>> + text-decoration:none; >>> + /*text-transform:uppercase;*/ >>> + width: auto; >>> + >>> + &:hover { >>> + color: @font-color-for-main; >>> + background-color: @main-color-theme; >>> + } >>> +} >>> + >>> + >>> +/* ---------------------- */ >>> +/* Footer Style */ >>> +/* ---------------------- */ >>> + >>> +#footer { >>> + background: @dark-color-theme; >>> + border-top: 0.1em inset #000; >>> + padding: 0.5em 0 0.5em 0.5em; >>> + >>> + height: @footer-height; >>> + position: fixed; >>> + bottom: 0; >>> + width: 100%; >>> + display: flex; >>> + flex-direction: row; >>> + align-items: center; >>> + justify-content: space-between; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important; >>> + z-index: 10; >>> + >>> + span { >>> + color: @font-color-for-dark; >>> + padding: 10px; >>> + } >>> + >>> + a { >>> + color: @font-color-for-dark; >>> + font-weight: normal; >>> + } >>> +} >>> + >>> +#footer a:focus { >>> + text-decoration: underline; >>> +} >>> + >>> +#footer-offset { >>> + height: @footer-height + 10px; >>> + width: 100%; >>> +} >>> >>> >>> >>> >> >> >> >> > > |
Administrator
|
In reply to this post by Pierre Smits
Thanks Pierre for the explanation, I never used it so thought it also provided storage.
Jacques Le 24/08/2016 à 09:32, Pierre Smits a écrit : > Please keep in mind that the OEM (https://oem.ofbizci.net/oci-2) is just a > place to promote the components. That is why it lists both OFBiz controlled > components and themes (in ASF SVN) and products that are controlled by > others (and elsewhere, e.g. GitHub). > > > It links through to the actual locations of: > > - the product description > - the code repository > > of the contributor. It doesn't provide code storage. > > But, any contributor can have his product listed. > > Best regards > > Pierre Smits > > ORRTIZ.COM <http://www.orrtiz.com> > OFBiz based solutions & services > > OFBiz Extensions Marketplace > http://oem.ofbizci.net/oci-2/ > > On Wed, Aug 24, 2016 at 7:52 AM, Jacques Le Roux < > [hidden email]> wrote: > >> OK, the *.less type is not in the svn config. I'll revert, add it, and >> commit again. >> >> So again, please committers remember to do so when you commit a new file >> type. >> >> While at it I really wonder if we need to have 4 colored versions of the >> same theme in trunk? >> >> I suggest to have only one and propose the others as external components, >> later plugins. We could use a third party location to propose the 3 others >> theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.) >> >> Opinions? >> >> Jacques >> >> Le 24/08/2016 à 07:44, [hidden email] a écrit : >> >>> Author: jleroux >>> Date: Wed Aug 24 05:44:00 2016 >>> New Revision: 1757462 >>> >>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev >>> Log: >>> Removes now useless IE7 "star html hack". I was used to prevent IE7 from >>> applying some CCS rules: http://css-discuss.incutio.com >>> /wiki/Star_Html_Hack >>> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.c >>> om/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ >>> >>> Thanks to Florian Montalbano research at "css property name correction in >>> flatgrey and rainbowstone themes" - https://issues.apache.org/jira >>> /browse/OFBIZ-7960# >>> >>> I checked, the IE7 market share is residual, no needs to keep this >>> dragging down feature >>> >>> Modified: >>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >>> rainbowstone-amber.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >>> rainbowstone-emerald.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >>> rainbowstone-ruby.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >>> rainbowstone-saphir.less >>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css >>> >>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/web >>> app/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff >>> ============================================================ >>> ================== >>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) >>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 >>> 05:44:00 2016 >>> @@ -922,10 +922,6 @@ form .basic-table, >>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>> /*text-transform:uppercase;*/ >>> width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> } >>> .basic-table .collapsed { >>> @@ -1512,16 +1508,6 @@ input[type="button"] { >>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>> /*text-transform:uppercase;*/ >>> width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> -} >>> - >>> -button { >>> - /* IE7 */ >>> - *padding-top: 0.1em; >>> - *padding-bottom: 0.1em; >>> } >>> a.disabled, >>> @@ -1563,11 +1549,6 @@ input[type="week"] { >>> padding: 0.2em 0.3em; >>> height: 1.8em; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0.1em; >>> - *height: auto; >>> } >>> /* >>> >>> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/ >>> rainbowstone-amber.less >>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone >>> /webapp/rainbowstone/rainbowstone-amber.less?rev= >>> 1757462&r1=1757461&r2=1757462&view=diff >>> ============================================================ >>> ================== >>> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>> (original) >>> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>> Wed Aug 24 05:44:00 2016 >>> @@ -1,1997 +1,1990 @@ >>> -/* common colors */ >>> -@black: #000; >>> -@white: #fff; >>> -@grey: #e6e6e6; >>> -@greydark: #929292; >>> - >>> -@color-success: #8cff8c; >>> -@font-color-for-success: @black; >>> -@color-alert: #ff8c8c; >>> -@font-color-for-alert: @black; >>> - >>> -@color-success-dark: #356e35; >>> -@font-color-for-success: @black; >>> -@color-alert-dark: #932f33; >>> -@font-color-for-alert: @black; >>> - >>> -@color-background-alert: #f2dede; >>> -@color-font-alert: #a94442; >>> -@color-border-alert: #ebccd1; >>> - >>> -@color-background-success: #dff0d8; >>> -@color-font-success: #3c763d; >>> -@color-border-success: #d6e9c6; >>> - >>> -/* Saphir colors */ >>> -@blue-dark: #002333; >>> -@blue-main: #005982; >>> -@blue-medium: #c7dfff; >>> -@blue-light: #f1f7ff; >>> -@blue-light2: #e4f0f5; >>> - >>> -/* Ruby colors */ >>> -@red-dark: #420000; >>> -@red-main: #bf1616; >>> -@red-medium: #f7baba; >>> -@red-light: #fce7e7; >>> -@red-light2: #fed7c9; >>> - >>> -/* Emerald colors */ >>> -@green-dark: #197948; >>> -@green-main: #23af9b; >>> -@green-medium: #7ae3ad; >>> -@green-light: #e5f9ef; >>> -@green-light2: #d7f9ef; >>> - >>> -/* Amber colors */ >>> -@amber-dark: #bc4216; >>> -@amber-main: #f08906; >>> -@amber-medium: #f5c4b3; >>> -@amber-light: #fcede8; >>> -@amber-light2: #fcedcd; >>> - >>> -/* Saphir theme */ >>> -/* >>> -@main-color-theme : @blue-main; >>> -@dark-color-theme : @blue-dark; >>> -@medium-color-theme : @blue-medium; >>> -@light-color-theme : @blue-light; >>> -@light2-color-theme : @blue-light2; >>> -@font-color-for-dark : @grey; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -*/ >>> - >>> -/* Ruby theme */ >>> -/* >>> -@main-color-theme : @red-main; >>> -@dark-color-theme : @red-dark; >>> -@medium-color-theme : @red-medium; >>> -@light-color-theme : @red-light; >>> -@light2-color-theme : @red-light2; >>> -@font-color-for-dark : @grey; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -/* >>> - >>> -/* Emerald theme */ >>> -/* >>> -@main-color-theme : @green-main; >>> -@dark-color-theme : @green-dark; >>> -@medium-color-theme : @green-medium; >>> -@light-color-theme : @green-light; >>> -@light2-color-theme : @green-light2; >>> -@font-color-for-dark : @white; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> -*/ >>> -/* Amber theme */ >>> -@main-color-theme : @amber-main; >>> -@dark-color-theme : @amber-dark; >>> -@medium-color-theme : @amber-medium; >>> -@light-color-theme : @amber-light; >>> -@light2-color-theme : @amber-light2; >>> -@font-color-for-dark : @white; >>> -@font-color-for-main : @white; >>> -@font-color-for-medium : @dark-color-theme; >>> -@font-color-for-light : @dark-color-theme; >>> -@shadow-color : @black; >>> -@shadow-color-light : @greydark; >>> - >>> - >>> -@app-bar-height: 60px; >>> -@sub-app-bar-height: 40px; >>> -@footer-height: 20px; >>> -@home-btn-width: 47px; >>> -@color-line-height: 9px; >>> - >>> -@home-menu-tile-height: 80px; >>> -@home-menu-tile-min-width: 100px; >>> -@home-menu-tile-max-width: 100px; >>> - >>> -@third-lvl-height: 80px; >>> -@third-lvl-width : 100px; >>> -@min-screen : 1170px; >>> -@min-container-width: 1130px; >>> - >>> -@box-border-color: #d7d7d7; >>> - >>> -@font-face { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - src: url('fonts/quicksand/quicksandbold.otf'); >>> - font-weight: normal; >>> - font-style: normal; >>> -} >>> - >>> -@font-face { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - src: url('fonts/quicksand/quicksandbold.otf'); >>> - font-weight: bold; >>> - font-style: normal; >>> -} >>> - >>> -/* ---------------------------------- */ >>> -/* Begin special checkbox type switch */ >>> -/* ---------------------------------- */ >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox, >>> [type="checkbox"]:checked.nrd-chkbox { >>> - display: none; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label, >>> -[type="checkbox"]:checked.nrd-chkbox + label{ >>> - cursor: pointer; >>> -} >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>> -[type="checkbox"]:checked.nrd-chkbox + label:before{ >>> - content: ""; >>> - width: 150px; >>> - min-width: 150px; >>> - background-color: @light-color-theme; >>> - padding: 2px 20px 2px 20px; >>> - border-radius: 8px 8px 8px 8px; >>> - >>> - cursor: pointer; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> - content: ""; >>> - position: relative; >>> - left:-35px; >>> - background-color: @dark-color-theme; >>> - min-height: 10px; >>> - min-width: 10px; >>> - padding-left: 4px; >>> - padding-right: 5px; >>> - border-radius: 8px 8px 8px 8px; >>> - transition: all .2s; >>> -} >>> - >>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> - position: relative; >>> - left: -15px; >>> - transition: all .2s; >>> -} >>> -/* ---------------------------------- */ >>> -/* End special checkbox type switch */ >>> -/* ---------------------------------- */ >>> - >>> -/* ---------------------------------- */ >>> -/* Begin square Checkbox */ >>> -/* ---------------------------------- */ >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox, >>> -[type="checkbox"]:checked.nrd-square-chkbox{ >>> - position: absolute; >>> - left: -9999px; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label{ >>> - content: ''; >>> - padding-left: 35px; >>> - position: relative; >>> - cursor: pointer; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 12px; >>> - >>> -} >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> - content: ''; >>> - position: absolute; >>> - left:10px; >>> - top: -4px; >>> - width: 17px; >>> - height: 17px; /* dim. de la case */ >>> - border: 1px solid #aaa; >>> - background: @light-color-theme; >>> - border-radius: 2px; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>> - background: @light-color-theme; >>> -} >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> - background: @main-color-theme; >>> -} >>> - >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>> - content: '✔'; >>> - position: absolute; >>> - top: -4px; >>> - left: 14px; >>> - font-size: 16px; >>> - color: @font-color-for-main; >>> - transition: all .2s; >>> -} >>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>> - opacity: 0; >>> - transform: scale(0); >>> -} >>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>> - opacity: 1; >>> - transform: scale(1); >>> -} >>> -/* ---------------------------------*/ >>> -/* End square Checkbox */ >>> -/* ---------------------------------*/ >>> - >>> -/* ---------------------------------*/ >>> -/* Begin class content mgmt */ >>> -/* ---------------------------------*/ >>> - >>> - >>> -.flex-row { >>> - display: flex; >>> - flex-direction: row !important; >>> -} >>> -.flex-column { >>> - display: flex; >>> - flex-direction: column; >>> -} >>> - >>> -.col-width-1 { >>> - width: 10%; >>> -} >>> -.col-width-2 { >>> - width: 20%; >>> -} >>> -.col-width-3 { >>> - width: 30%; >>> -} >>> -.col-width-4 { >>> - width: 40%; >>> -} >>> -.col-width-5 { >>> - width: 50%; >>> -} >>> -.col-width-6 { >>> - width: 60%; >>> -} >>> -.col-width-7 { >>> - width: 70%; >>> -} >>> -.col-width-8 { >>> - width: 80%; >>> -} >>> -.col-width-9 { >>> - width: 90%; >>> -} >>> -.col-width-10 { >>> - width: 100%; >>> -} >>> - >>> -.align-v-center { >>> - display:flex; >>> - align-items: center; >>> -} >>> - >>> -.align-h-center { >>> - display:flex; >>> - justify-content: center; >>> -} >>> - >>> -/* ---------------------------------*/ >>> -/* End class content mgmt */ >>> -/* ---------------------------------*/ >>> - >>> - >>> -/* ---------------------------------- */ >>> -/* Begin btn-sort */ >>> -/* ---------------------------------- */ >>> - >>> -.btn-sort { >>> - position: relative; >>> - top: -6px; >>> - border:none; >>> - background:none; >>> - border-radius: 0; >>> - margin-left:5px; >>> -} >>> - >>> -.btn-sort:before{ >>> - content: ''; >>> - position: absolute; >>> - left: -1px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-bottom: 10px solid @greydark; >>> - border-left: 10px solid transparent; >>> -} >>> - >>> -.btn-sort:after{ >>> - content: ''; >>> - position: absolute; >>> - right: -1px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-top: 10px solid @greydark; >>> - border-left: 10px solid transparent; >>> - @media screen and (max-width: 1349px) { >>> - right: -5px; >>> - } >>> -} >>> - >>> -.btn-sort.btn-sort-asc:before{ >>> - border-bottom: 10px solid @main-color-theme; >>> -} >>> - >>> -.btn-sort.btn-sort-desc:after{ >>> - border-top: 10px solid @main-color-theme; >>> -} >>> - >>> -/* ---------------------------------- */ >>> -/* End btn-sort */ >>> -/* ---------------------------------- */ >>> - >>> - >>> -/* ---------------------------------- */ >>> -/* Begin defaut colour class */ >>> -/* ---------------------------------- */ >>> - >>> -.dark-color { >>> - background-color: @dark-color-theme !important; >>> - color: @font-color-for-dark !important; >>> -} >>> -.main-color { >>> - background-color: @main-color-theme !important; >>> - color: @font-color-for-main !important; >>> -} >>> -.medium-color { >>> - background-color: @medium-color-theme !important; >>> - color: @font-color-for-medium !important; >>> -} >>> -.light-color { >>> - background-color: @light-color-theme !important; >>> - color: @font-color-for-light !important; >>> -} >>> -.light2-color { >>> - background-color: @light2-color-theme !important; >>> - color: @font-color-for-light !important; >>> -} >>> - >>> -.grey-color { >>> - background-color: @grey !important; >>> -} >>> -.darkgrey-color { >>> - background-color: @greydark !important; >>> -} >>> - >>> -/* begin lookup widget */ >>> -.ui-dialog { >>> - opacity: 1; >>> - z-index: 50; >>> -} >>> - >>> -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >>> - background: none !important; >>> - background-color: @dark-color-theme !important; >>> - button { >>> - background: none; >>> - background-color: @light-color-theme; >>> - } >>> -} >>> -/* end lookup widget */ >>> - >>> -.main-bar-label { >>> - color: @light-color-theme; >>> - padding-left: 3px; >>> - padding-right: 6px; >>> - font-size: 15px; >>> - font-weight: bold; >>> -} >>> - >>> -#company-logo { >>> - right: 10px; >>> - top: 2px; >>> - background: url("images/ofbiz-simple-white.svg") no-repeat left top / >>> cover; >>> - min-height: 50px; >>> - min-width: 50px; >>> - margin-right: 15px; >>> - align-self: center; >>> - @media screen and (min-width : 1232px) { >>> - min-height: 50px; >>> - min-width: 129px; >>> - background: url("images/ofbiz-white.svg") no-repeat left top / cover; >>> - } >>> -} >>> - >>> -.modal-screen { >>> - visibility: hidden; >>> - display: flex; >>> - flex-direction: column; >>> - background-color: @grey; >>> - opacity: .93; >>> - position: fixed; >>> - top: 0; >>> - left: 0; >>> - height: 100%; >>> - width: 100%; >>> - z-index: 9999; >>> -} >>> - >>> -.modal-box{ >>> - background-color: @white; >>> - opacity: 1; >>> - margin: 10%; >>> - border-radius: 10px; >>> - border: solid 2px @main-color-theme; >>> - padding : 10px 40px 10px 40px; >>> - .modal-header { >>> - position: relative; >>> - display: flex; >>> - flex-direction: row; >>> - h2 { >>> - font-size: 25px; >>> - font-weight: normal; >>> - color: @main-color-theme; >>> - } >>> - .btn-close-nrd { >>> - position: absolute; >>> - right: 0; >>> - display: flex; >>> - justify-content: center; >>> - border: solid 1px @main-color-theme; >>> - border-radius: 5px; >>> - color: @main-color-theme; >>> - font-size: 25px; >>> - height: 30px; >>> - width: 30px; >>> - text-decoration: none !important; >>> - } >>> - } >>> - .modal-body { >>> - p { >>> - font-size: 20px; >>> - } >>> - } >>> - .modal-footer { >>> - position: relative; >>> - height: 35px; >>> - display: flex; >>> - justify-content: flex-end; >>> - .btn-nrd { >>> - background: none; >>> - border: none; >>> - text-shadow: none; >>> - opacity: 1; >>> - margin-right: 10px; >>> - font-size: 20px; >>> - padding: 5px; >>> - border-radius: 8px; >>> - } >>> - .btn-nrd-main { >>> - background-color: @main-color-theme; >>> - color: @white; >>> - } >>> - .btn-nrd-std { >>> - background-color: @white; >>> - color: @main-color-theme; >>> - border: solid 1px @main-color-theme !important; >>> - } >>> - } >>> -} >>> -.btn-nrd:hover { >>> - box-shadow: 5px 5px 3px 0 @black; >>> -} >>> - >>> -.btn-nrd-std:hover { >>> - background-color: @main-color-theme !important; >>> - color: @white !important; >>> - border: solid 1px @main-color-theme !important; >>> -} >>> - >>> -.btn-close-nrd:hover { >>> - background-color: @main-color-theme !important; >>> - color: @white !important; >>> -} >>> - >>> -.list-nrd { >>> - border: solid 2px @main-color-theme; >>> - border-bottom-left-radius: 10px; >>> - border-bottom-right-radius: 10px; >>> - display: flex; >>> - flex-direction: column; >>> - margin-top: 15px; >>> - margin-bottom: 15px; >>> - .title-list-nrd { >>> - background-color: @main-color-theme; >>> - color : @white; >>> - font-size: 20px; >>> - font-weight: bold; >>> - padding-left: 5px; >>> - } >>> - >>> - li { >>> - position: relative; >>> - display: flex; >>> - flex-direction: row; >>> - font-size: 20px; >>> - padding-left: 5px; >>> - padding-top: 2px; >>> - padding-bottom: 2px; >>> - margin-bottom: 3px; >>> - a { >>> - color: @main-color-theme; >>> - } >>> - span { >>> - position: absolute; >>> - right: 0; >>> - color: @main-color-theme; >>> - font-size: 30px; >>> - } >>> - } >>> -} >>> -li.line-odd { >>> - background-color: @light-color-theme; >>> -} >>> - >>> -#user-avatar { >>> - height: 40px; >>> - width: 40px; >>> - padding: 2px; >>> - >>> - align-self: center; >>> - >>> - :hover { >>> - cursor: pointer; >>> - } >>> - img { >>> - max-height: 40px; >>> - max-width: 40px; >>> - position: relative; >>> - top: -2px; >>> - padding: 2px; >>> - background-color: @white; >>> - border-radius: 2px; >>> - } >>> -} >>> - >>> -#main-navigation-bar { >>> - position: relative; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - justify-content: space-between; >>> - font-family: Quicksand,sans-serif; >>> - background-color: @dark-color-theme; >>> - z-index: 5; >>> - height: @app-bar-height; >>> -} >>> -#main-nav-bar-left { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> -} >>> -#main-nav-bar-right { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> - padding-right: 15px; >>> -} >>> - >>> -.app-btn{ >>> - height: @app-bar-height; >>> - background-color: @dark-color-theme; >>> - display: flex; >>> - align-items: center; >>> - flex-direction: row; >>> - margin-right: 2px; >>> - margin-left: 2px; >>> - a { >>> - padding:10px; >>> - color: @font-color-for-dark; >>> - font-size: 1.4em !important; >>> - } >>> -} >>> - >>> -.app-btn a:visited { >>> - color: @font-color-for-dark; >>> -} >>> - >>> -.app-btn:hover{ >>> - position: relative; >>> - top: -6px; >>> - background-color: @main-color-theme; >>> - border-bottom-left-radius: 5px; >>> - border-bottom-right-radius: 5px; >>> - box-shadow: 1px 1px 12px @shadow-color; >>> - a { >>> - position: relative; >>> - top: 6px; >>> - color : @font-color-for-main; >>> - } >>> -} >>> -.app-btn.selected:hover { >>> - background-color: @dark-color-theme; >>> - box-shadow: none; >>> - top:0; >>> -} >>> - >>> -.app-btn a:hover { >>> - text-decoration: none; >>> -} >>> -#app-selected { >>> - position: relative; >>> - display: flex; >>> - flex-direction: column; >>> - align-items: center; >>> - justify-content: center; >>> - background-color: @main-color-theme; >>> - box-shadow: 1px -2px 12px @shadow-color; >>> - z-index: 0; >>> - opacity: .99; >>> - border-top-left-radius : 8px ; >>> - border-top-right-radius : 8px ; >>> - a { >>> - position: relative; >>> - top: 3px; >>> - color: @font-color-for-main; >>> - } >>> -} >>> -.app-btn.selected a:hover { >>> - text-decoration: none; >>> -} >>> - >>> -#app-bar-line { >>> - position: relative; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - height: @color-line-height; >>> - background-color: @main-color-theme; >>> - box-shadow: 2px 2px 5px @shadow-color; >>> -} >>> -#color-add { >>> - width: 150px; >>> - background-color: @main-color-theme; >>> - height: @color-line-height; >>> - z-index: 20; >>> - position: relative; >>> - top: @color-line-height; >>> -} >>> - >>> -#more-app { >>> - position: relative; >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - font-weight: bold; >>> - font-size: 1.4em !important; >>> - width: 40px; >>> - height: @app-bar-height; >>> - color: @font-color-for-dark; >>> -} >>> -#more-app:hover { >>> - background-color: @main-color-theme; >>> - text-decoration: none; >>> -} >>> -#more-app:hover #more-app-list { >>> - display: block; >>> -} >>> -#more-app.selected { >>> - background-color: @main-color-theme; >>> -} >>> - >>> -#more-app-list { >>> - display: none; >>> - position: absolute; >>> - top: @app-bar-height; >>> - left: -20px; >>> - background-color: @dark-color-theme; >>> - z-index: 10; >>> - border: solid 4px @main-color-theme; >>> - border-top-width: @color-line-height; >>> - border-bottom-left-radius: 4px; >>> - border-bottom-right-radius: 4px; >>> - li { >>> - padding-left : 4px; >>> - padding-right: 4px; >>> - } >>> - >>> - a { >>> - color: @font-color-for-dark; >>> - font-size: 15px; >>> - } >>> - >>> - :hover { >>> - background-color: @medium-color-theme; >>> - a { >>> - box-shadow: none; >>> - color: @dark-color-theme; >>> - } >>> - a:hover{ >>> - box-shadow: none; >>> - text-decoration: none; >>> - border-radius: 0; >>> - } >>> - } >>> - >>> - li.selected { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - a:hover { >>> - color: @font-color-for-main; >>> - background-color: @main-color-theme; >>> - } >>> - } >>> -} >>> - >>> -#homeButton { >>> - display: flex; >>> - //visibility: hidden; >>> - align-items: center; >>> - justify-content: center; >>> - background-color:@grey; >>> - border: none; >>> - border-radius : 0; >>> - >>> - height: @app-bar-height; >>> - width : @home-btn-width; >>> - text-decoration: none; >>> - img { >>> - height: 25px; >>> - transition: all .2s ease-in-out; >>> - } >>> -} >>> - >>> -#homeButton:hover img { >>> - transform: scale(1.1); >>> -} >>> - >>> -#app-bar-list { >>> - display: flex; >>> -} >>> - >>> -#user-details { >>> - position: absolute; >>> - right: 20px; >>> - top : 62px; >>> - background-color: @dark-color-theme; >>> - color : @font-color-for-dark; >>> - font-size: 15px; >>> - font-weight: bold; >>> - padding-top: 5px; >>> - padding-bottom: 10px; >>> - z-index: 15; >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - border-radius: 3px; >>> - transition: all .1s ease-in-out; >>> - >>> - img { >>> - height: 50px; >>> - background-color: @white; >>> - padding: 4px; >>> - border-radius : 3px; >>> - margin-left: 10px; >>> - margin-right: 5px; >>> - } >>> - #logout { >>> - background-color: @white; >>> - color: @dark-color-theme !important; >>> - border-radius: 2px; >>> - :hover { >>> - text-decoration: none; >>> - } >>> - } >>> -} >>> - >>> -#user-details:after{ >>> - content: ''; >>> - position: absolute; >>> - top: -10px; >>> - right: 5px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-bottom: 10px solid @dark-color-theme; >>> - border-left: 10px solid transparent; >>> -} >>> - >>> -a.user-pref-btn { >>> - margin-top: 15px; >>> - background-color: @dark-color-theme; >>> - margin-left: 10px; >>> - margin-right: 10px; >>> - padding-top: 2px; >>> - padding-bottom: 2px; >>> - display: flex; >>> - justify-content: center; >>> - color: @font-color-for-dark !important; >>> - :hover { >>> - text-decoration: none; >>> - } >>> -} >>> - >>> -#user-name { >>> - display: flex; >>> - flex-direction: column; >>> - justify-content: center; >>> - align-content: center; >>> - padding-left : 5px; >>> - padding-right : 5px; >>> - span { >>> - min-width: 100px; >>> - padding-bottom : 5px; >>> - padding-top : 5px; >>> - } >>> -} >>> - >>> -#user-row1 { >>> - display: flex; >>> - flex-direction: row; >>> - justify-content: center; >>> - #user-lang { >>> - display: flex; >>> - flex-direction: row; >>> - justify-content: center; >>> - align-content: center; >>> - padding-left: 10px; >>> - padding-right: 10px; >>> - span { >>> - min-width: 30px; >>> - color: @font-color-for-dark; >>> - } >>> - } >>> -} >>> - >>> -.appbar-btn-img { >>> - height: @app-bar-height - 40px; >>> -} >>> - >>> -#help-btn { >>> - font-size: 10px; >>> - min-width: 20px; >>> - margin-right: 15px; >>> -} >>> -/* Begin sub Menu section */ >>> - >>> -#app-navigation { >>> - height: @sub-app-bar-height; >>> - border-right: solid 1px @black; >>> - border-bottom: solid 1px @black; >>> - width: 100%; >>> - min-width: @min-container-width; >>> - h2 { >>> - display: none; >>> - } >>> - ul { >>> - display: flex; >>> - flex-direction: row; >>> - background-color: @grey; >>> - flex-grow: 1; >>> - } >>> - ul li ul li { >>> - border-left: solid 1px @black; >>> - height: @sub-app-bar-height; >>> - display: flex; >>> - align-items: center; >>> - justify-items: center; >>> - justify-content: center; >>> - min-width: 75px; >>> - padding-left: 6px; >>> - padding-right: 6px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - border-bottom: solid 1px @black; >>> - font-size: 12px; >>> - @media screen and (max-width: 1500px) { >>> - font-size: 10px; >>> - min-width: 65px; >>> - } >>> - @media screen and (max-width: 1300px) { >>> - font-size: 10px; >>> - min-width: 50px; >>> - } >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - text-align: center; >>> - height: 100%; >>> - width: 100%; >>> - text-decoration: none; >>> - } >>> - } >>> -} >>> - >>> -#app-navigation ul li ul li:last-child { >>> - border-right: solid 1px @black; >>> -} >>> - >>> -#app-navigation ul li ul li:hover { >>> - background-color: @main-color-theme; >>> - min-height: @sub-app-bar-height; >>> - position: relative; >>> - //top: -1px; >>> - a { >>> - color: @white; >>> - text-decoration: none; >>> - } >>> -} >>> -#app-navigation ul li ul li.selected:hover { >>> - a { >>> - color: @black !important; >>> - } >>> -} >>> - >>> -#app-navigation ul li ul li.selected { >>> - background-color: @white; >>> - position: relative; >>> - top: 1px; >>> - height: @sub-app-bar-height + 1px; >>> - border-top-right-radius: 2px; >>> - border-top-left-radius: 2px; >>> - border-bottom: none; >>> - >>> - :after { >>> - content: ''; >>> - position: absolute; >>> - top: -2px; >>> - left: 5px; >>> - width: 0; >>> - height: 0; >>> - border-right: 10px solid transparent; >>> - border-top: 10px solid @main-color-theme; >>> - border-left: 10px solid transparent; >>> - } >>> - >>> -} >>> - >>> - >>> -/* End sub Menu section */ >>> - >>> -/* begin sub Menu section 3rd level */ >>> - >>> -.button-bar.tab-bar { >>> - ul li ul li { >>> - border: solid 1px @grey; >>> - border-radius: 4px; >>> - a { >>> - width: 100%; >>> - height: 100%; >>> - } >>> - } >>> - li.selected{ >>> - background-color: @main-color-theme; >>> - a{ >>> - color: @font-color-for-main; >>> - } >>> - } >>> - ul li ul li:hover { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main ; >>> - } >>> - } >>> -} >>> - >>> -#third-level-menu-container { >>> - display: flex; >>> - flex-direction: row; >>> -} >>> -#working-area { >>> - width: 100%; >>> -} >>> - >>> -#left-column-menu { >>> - width: 100px; >>> -} >>> - >>> -.third-lvl-menu { >>> - background-color: @dark-color-theme; >>> - position: relative; >>> - left: -10px; >>> - border-top-right-radius: 4px; >>> - border-bottom-right-radius: 4px; >>> - padding-top: 4px; >>> - padding-bottom: 4px; >>> - ul { >>> - li { >>> - ul { >>> - position: relative; >>> - top: 5px; >>> - width: @third-lvl-width; >>> - } >>> - } >>> - } >>> - h2 { >>> - visibility: hidden; >>> - } >>> -} >>> -.third-level-item:last-child { >>> - border-bottom: solid 1px @main-color-theme; >>> -} >>> - >>> -.third-level-item { >>> - min-height: @third-lvl-height; >>> - background-color: @dark-color-theme; >>> - padding-right: 3px; >>> - border-top: solid 1px @main-color-theme; >>> - >>> - a, a:visited { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - width: 100%; >>> - color: @font-color-for-dark !important; >>> - min-height: @third-lvl-height; >>> - max-width: @third-lvl-width; >>> - text-align: center; >>> - } >>> -} >>> -.third-level-item.selected { >>> - position: relative; >>> - border-left: solid 9px @main-color-theme; >>> - a, a:visited { >>> - background-color: @white; >>> - color: @dark-color-theme !important; >>> - } >>> - :after { >>> - content: ''; >>> - position: absolute; >>> - top: 5px; >>> - left: 0; >>> - width: 0; >>> - height: 0; >>> - border-top: 10px solid transparent; >>> - border-left: 10px solid @main-color-theme; >>> - border-bottom: 10px solid transparent; >>> - } >>> -} >>> - >>> -.third-level-item a:hover { >>> - background-color: @main-color-theme; >>> - color: @font-color-for-main ; >>> - text-decoration: none; >>> -} >>> -/* End 3rd level menu */ >>> - >>> - >>> - >>> -/* Begin Home Menu for IB section */ >>> -.fixed-nav-bar { >>> - position: fixed !important; >>> - width: 100%; >>> -} >>> -#nav-bar-offset { >>> - height: @app-bar-height ; >>> -} >>> - >>> -#homeGlyph { >>> - margin-left: 20px; >>> - height: 20px; >>> -} >>> - >>> -#homePageTitle { >>> - color: @white; >>> - font-size: 20px; >>> - font-weight: bold; >>> - margin-right: 20px; >>> - margin-left: 20px; >>> -} >>> -.home-menu-list { >>> - display: flex; >>> - flex-direction: column; >>> - align-items: center; >>> -} >>> -.hp-applist { >>> - display: flex; >>> - flex-direction: row; >>> - color : @white; >>> - align-items: center; >>> - .app-title { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - background-color: @dark-color-theme; >>> - height: @home-menu-tile-height; >>> - padding: 5px 10px 5px 10px; >>> - border-bottom: solid 1px @black; >>> - span { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>> !important; >>> - font-size: 15px; >>> - font-weight: bold; >>> - width: 110px; >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - color : @white; >>> - } >>> - } >>> - } >>> - >>> - .hp-menu-item { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - position: relative; >>> - margin-left: 5px; >>> - margin-right: 5px; >>> - border: solid 2px @grey; >>> - border-radius: 8px; >>> - height: @home-menu-tile-height - 4px; >>> - min-width: @home-menu-tile-min-width; >>> - max-width: @home-menu-tile-max-width; >>> - .menu-link { >>> - font-size: 10px; >>> - color: @black; >>> - padding: 10px; >>> - } >>> - .star-link { >>> - position: absolute; >>> - height: 25px; >>> - top: 5px; >>> - right: 5px; >>> - } >>> - } >>> - >>> -} >>> -.hp-applist .app-title span a:hover { >>> - text-decoration: none; >>> -} >>> - >>> -.hp-menu-item.favoriteItem { >>> - border: solid 2px @dark-color-theme; >>> -} >>> - >>> -.hp-menu-item:hover { >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - a { >>> - text-decoration: none; >>> - } >>> -} >>> - >>> -/* End Home Menu for IB section */ >>> - >>> -/* Begin Login screenlet */ >>> -#login-container { >>> - #content-messages { >>> - position: relative; >>> - top: @app-bar-height; >>> - border-radius: 4px; >>> - width: 97%; >>> - &.errorMessage { >>> - background-color : @color-background-alert !important; >>> - color: @color-font-alert !important; >>> - border : solid 1px @color-border-alert !important; >>> - } >>> - &.eventMessage { >>> - background-color : @color-background-success !important; >>> - color: @color-font-success !important; >>> - border : solid 1px @color-border-success !important; >>> - } >>> - } >>> -} >>> -#loginBar { >>> - position: fixed; >>> - top:0; >>> - left: 0; >>> - width: 100%; >>> - height: @app-bar-height; >>> - background-color: @dark-color-theme; >>> - span { >>> - background-color: @white; >>> - color: @main-color-theme; >>> - border-top-right-radius: 5px; >>> - border-top-left-radius: 5px; >>> - font-size: 25px; >>> - position: relative; >>> - top: @app-bar-height - 32px; >>> - left: 15px; >>> - padding: 5px 10px 5px 10px; >>> - } >>> - #company-logo { >>> - position: absolute; >>> - } >>> -} >>> - >>> -.login-screenlet { >>> - display: flex; >>> - flex-direction: column; >>> - min-width: 300px; >>> - max-width: 50em; >>> - border-radius: 8px !important; >>> - margin-top: 15%; >>> - box-shadow: 3px 3px 12px @shadow-color; >>> - .screenlet-title-bar { >>> - display: flex; >>> - align-content: center; >>> - justify-content: center; >>> - margin:0; >>> - padding:0; >>> - h3{ >>> - padding-top:2px; >>> - padding-bottom:2px; >>> - background-color: @dark-color-theme !important; >>> - color: @font-color-for-dark; >>> - height: 100%; >>> - width:100%; >>> - text-shadow: none; >>> - font-size: 25px; >>> - } >>> - } >>> - .screenlet-body { >>> - background-color: @main-color-theme !important; >>> - form { >>> - .button { >>> - width: 150px; >>> - border-radius: 4px; >>> - background: none; >>> - background-color: @dark-color-theme; >>> - color: @font-color-for-dark; >>> - text-shadow: none; >>> - margin-top: 20px; >>> - margin-bottom: 10px; >>> - } >>> - >>> - table { >>> - tr { >>> - width: 100%; >>> - .label { >>> - color: @font-color-for-main; >>> - width: 25%; >>> - font-size: 15px; >>> - } >>> - input { >>> - width: 100%; >>> - } >>> - .buttontext, >>> - [type="submit"] { >>> - width: 150px; >>> - border-radius: 4px; >>> - background: none; >>> - background-color: @dark-color-theme; >>> - color: @font-color-for-dark; >>> - text-shadow: none; >>> - } >>> - [name="GET_PASSWORD_HINT"] { >>> - background-color: @font-color-for-dark; >>> - color: @main-color-theme; >>> - border: none; >>> - width: 100%; >>> - } >>> - [name="EMAIL_PASSWORD"] { >>> - background-color: @font-color-for-dark; >>> - color: @main-color-theme; >>> - border: none; >>> - width: 100%; >>> - } >>> - td { >>> - padding: 5px; >>> - color: @font-color-for-main; >>> - font-size: 15px; >>> - font-weight: bold; >>> - } >>> - } >>> - } >>> - } >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - } >>> -} >>> - >>> -.login-screenlet .screenlet-title-bar { >>> - text-align: center; >>> -} >>> - >>> -/* End Login screenlet */ >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* Begin Screenlet style */ >>> -/* --------------------------------------------- */ >>> -.screenlet-title-bar { >>> - text-decoration: none ; >>> - color: @dark-color-theme; >>> - background-color: @grey; >>> - height: 1%; /* IE fix */ >>> - min-height: 1.5em; >>> - padding:0.8em 0.2em; >>> -} >>> - >>> -.screenlet { >>> - border-radius: 5px; >>> - border: solid 1px @grey; >>> - height: auto !important; >>> - margin-bottom: 1em; >>> - overflow: auto; >>> -} >>> - >>> -.screenlet-body { >>> - background-color: #FFFFFF; >>> - height: auto !important; >>> - height: 1%; >>> - padding: 0.4em; >>> -} >>> - >>> -.screenlet-body div { >>> - margin: 0.8em 0.1em >>> -} >>> - >>> -/* Special Screenlet style for locale and timezone window */ >>> -.lists.screenlet { >>> - margin-left: 25%; >>> - margin-right: 25%; >>> - margin-top: 1em; >>> -} >>> - >>> -.lists.screenlet .basic-table tr td { >>> - text-align: center; >>> -} >>> - >>> -.lists.screenlet .basic-table tr td a { >>> - display: block; >>> -} >>> - >>> -/* Alternate table header style */ >>> -.basic-table .header-row-2 th, >>> -.basic-table .header-row-2 td { >>> - background-color: @greydark; >>> - border-bottom: 0; >>> - border-left: 0.1em solid #aaa; >>> - border-right: 0.1em solid #888; >>> - color: #ffffff; >>> - font-weight: bold; >>> -} >>> - >>> -/* No padding screenlet decorator */ >>> -.no-padding { >>> - padding: 0; >>> - border: none; >>> -} >>> - >>> -.no-padding .h1, >>> -.no-padding .h2, >>> -.no-padding .h3, >>> -.no-paddingr h1, >>> -.no-padding h2, >>> -.no-padding h3 { >>> - padding: 0.7em; >>> -} >>> - >>> -.screenlet-title-bar ul a:hover { >>> - color: @main-color-theme !important; >>> - text-decoration: none; >>> -} >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* End Screenlet style */ >>> -/* --------------------------------------------- */ >>> - >>> -/* ---------------------- */ >>> -/* Table Styles */ >>> -/* ---------------------- */ >>> - >>> -.basic-table { >>> - background-color: #ffffff; >>> - color: #000000; >>> - margin-bottom: 1em; >>> - width: 100%; >>> -} >>> - >>> -form table, >>> -form .basic-table, >>> -.screenlet-body .basic-table { >>> - background: transparent; >>> - margin-bottom: 0; >>> -} >>> - >>> -.basic-table tr td { >>> - /* Style for all cells */ >>> - padding: 0.8em 0.1em; >>> - vertical-align: middle; >>> -} >>> - >>> -.basic-table tr .align-bottom { >>> - vertical-align: bottom; >>> -} >>> - >>> -.basic-table tr .align-top { >>> - vertical-align: top; >>> -} >>> - >>> -.basic-table tr .label, >>> -.basic-table tr .group-label { >>> - /* field labels for forms */ >>> - font-weight: bold; >>> - text-align: right; >>> - padding-right: 1.5em; >>> - white-space: nowrap; >>> - width: 1%; >>> -} >>> - >>> -.basic-table tr .group-label { >>> - /* "header" for field label groups */ >>> - font-size: 1.2em; >>> - padding: 2em 1.5em 0 0; >>> -} >>> - >>> -.basic-table tr th, >>> -.basic-table .header-row { >>> - font-weight: bold; >>> - text-align: left; >>> -} >>> - >>> -.basic-table .header-row td { >>> - border-bottom: 0.1em solid #000000; >>> -} >>> - >>> -.basic-table .header-row td a { >>> - color: #000000; >>> -} >>> - >>> -.basic-table .alternate-row { >>> - /* Alternating row style */ >>> - background-color: #eeeeee; >>> -} >>> - >>> -.basic-table .selected { >>> - background: #FFFCCF; >>> -} >>> - >>> -.basic-table .alternate-rowSelected { >>> - background: #FFF55F; >>> -} >>> - >>> -.basic-table .Validate { >>> - /*Style use by alt-row-style on list*/ >>> - background: #A0D5F7; >>> -} >>> - >>> -.basic-table .alternate-rowValidate { >>> - /*Style use by alt-row-style on list*/ >>> - background: #72A8F2; >>> -} >>> - >>> -.basic-table .Warn { >>> - /*Style use by alt-row-style on list*/ >>> - background: #f55C5C; >>> -} >>> - >>> -.basic-table .alternate-rowWarn { >>> - /*Style use by alt-row-style on list*/ >>> - background: #FC7455; >>> -} >>> - >>> -.basic-table tr .button-col { >>> - /* button column style - for the small >>> - collection of buttons used in lists */ >>> - vertical-align: top; >>> - padding: 0.3em; >>> -} >>> -.basic-table tr .button-col a, >>> -.basic-table tr .button-col button, >>> -.basic-table tr .button-col input[type="reset"], >>> -.basic-table tr .button-col input[type="submit"], >>> -.basic-table tr .button-col input[type="button"] { >>> - -webkit-appearance: none; >>> - -moz-border-radius: 1em; >>> - -webkit-border-radius: 1em; >>> - border-radius: 2px; >>> - border: 0.1em solid @main-color-theme; >>> - background-color: @white; >>> - cursor: pointer; >>> - color: @main-color-theme; >>> - display:inline-block; >>> - font-size: 0.9em; >>> - font-weight: bold; >>> - outline: 0; >>> - overflow: visible; >>> - padding: 0.1em 0.5em 0.2em 0.5em; >>> - text-decoration: none; >>> - width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> - >>> - &:hover { >>> - background-color: @main-color-theme; >>> - color: @white; >>> - } >>> -} >>> - >>> -.basic-table .collapsed { >>> - visibility: collapse; >>> -} >>> - >>> -/* Sort field style */ >>> -.basic-table .header-row-2 th .sort-order-asc, >>> -.basic-table .header-row-2 td .sort-order-asc{ >>> - background: url(/images/arrow-gr-up.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> -} >>> -.basic-table .header-row-2 th .sort-order-desc, >>> -.basic-table .header-row-2 td .sort-order-desc{ >>> - background: url(/images/arrow-gr-dw.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> -} >>> -.basic-table .header-row-2 th .sort-order, >>> -.basic-table .header-row-2 td .sort-order{ >>> - background: url(/images/arrow-gr.png) no-repeat right; >>> - padding-left: 0.5em; >>> - padding-right: 20px; /* Setting must be in px */ >>> - color:#fff >>> -} >>> - >>> - >>> -/* --------------------------------------------- */ >>> -/* Begin Message Info */ >>> -/* --------------------------------------------- */ >>> -.count-message { >>> - display: flex; >>> - align-items: center; >>> - justify-content: center; >>> - min-height:20px; >>> - min-width: 20px; >>> - max-height:20px; >>> - max-width: 20px; >>> - background: @white; >>> - font-size:12px; >>> - font-weight: bold; >>> - border-radius: 50%; >>> -} >>> -.info-message-title { >>> - min-width:150px; >>> - margin: 5px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - font-weight: bold; >>> -} >>> -.message-list { >>> - position:relative; >>> - margin-top: 10px; >>> - box-shadow: 1px 3px 5px @greydark; >>> - border-radius: 0 5px 5px 0; >>> - transition: height 2s; >>> -} >>> -.message-list-main { >>> - padding: 5px 15px 5px 15px; >>> -} >>> -.message-list-alert { >>> - background-color: @color-alert; >>> - border-left : solid 5px @color-alert-dark; >>> - .count-message { >>> - color: @color-alert-dark; >>> - } >>> -} >>> -.message-list-success { >>> - background-color: @color-success; >>> - border-left: solid 5px @color-success-dark; >>> - .count-message { >>> - color: @color-success-dark; >>> - } >>> -} >>> -.message-list-table-container { >>> - background-color: @white; >>> - border-radius: 5px; >>> - overflow: hidden; >>> - height: 0; >>> -} >>> -.info-message-success { >>> - display: none; >>> -} >>> -.info-message-alert { >>> - display: none; >>> -} >>> -table.msg-list { >>> - width: 100%; >>> - font-size: 16px; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - padding: 0; >>> - thead { >>> - height: 100%; >>> - background-color: @grey; >>> - margin: 0; >>> - padding: 0; >>> - tr{ >>> - font-weight: bold; >>> - border-bottom: solid 1px @black; >>> - height: 100%; >>> - background-color: @grey; >>> - line-height: 30px; >>> - } >>> - } >>> - tbody { >>> - tr { >>> - line-height: 25px; >>> - } >>> - tr.msg-row-success { >>> - background-color: @color-success; >>> - } >>> - tr.msg-row-alert { >>> - background-color: @color-alert; >>> - } >>> - } >>> - td { >>> - padding-left: 5px; >>> - } >>> -} >>> - >>> -/* --------------------------------------------- */ >>> -/* End Message Info */ >>> -/* --------------------------------------------- */ >>> - >>> -/* ---------------------- */ >>> -/* Paginate Style */ >>> -/* ---------------------- */ >>> - >>> -.paginate-bar-nrd { >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - font-size: 15px; >>> - background-color: @grey; >>> - padding-left: 10px; >>> - padding-top: 3px; >>> - padding-bottom: 3px; >>> - box-shadow: 0 2px 5px @shadow-color; >>> - >>> - ul.paginate-pg-list { >>> - display: flex; >>> - flex-direction: row; >>> - background-color: @white; >>> - color: @main-color-theme; >>> - margin-right: 10px; >>> - border-radius: 8px; >>> - border: solid 1px @box-border-color; >>> - height: 18px; >>> - li { >>> - display: flex; >>> - justify-content: center; >>> - min-width: 17px; >>> - border-right: solid 1px @box-border-color; >>> - padding-left: 2px; >>> - padding-right: 2px; >>> - height:100%; >>> - a { >>> - display: flex; >>> - justify-content: center; >>> - align-items: center; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - color: @dark-color-theme; >>> - height: 100%; >>> - width: 100%; >>> - } >>> - .paginate-disable { >>> - >>> - } >>> - } >>> - li.selected { >>> - background-color: @main-color-theme; >>> - a { >>> - color: @font-color-for-main; >>> - } >>> - } >>> - li:first-child, li:last-child { >>> - width: 20px; >>> - } >>> - li:first-child { >>> - border-top-left-radius: 3px; >>> - border-bottom-left-radius: 3px; >>> - } >>> - li:last-child { >>> - border-right: none; >>> - border-top-right-radius: 3px; >>> - border-bottom-right-radius: 3px; >>> - } >>> - } >>> - >>> -} >>> -select.paginate-select { >>> - position: relative; >>> - background: @white; >>> - font-size: 16px; >>> - font-weight: bold; >>> - border: 1px solid @box-border-color; >>> - option { >>> - display: flex; >>> - justify-self: center; >>> - font-size: 14px; >>> - } >>> -} >>> - >>> -.paginate-select-label { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - padding-left: 15px; >>> - padding-right: 15px; >>> -} >>> - >>> -.paginate-information { >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 16px; >>> - padding-left: 15px; >>> - padding-right: 15px; >>> -} >>> - >>> -ul.paginate-pg-list li:hover{ >>> - background-color: @main-color-theme; >>> - a { >>> - text-decoration: none; >>> - color: @font-color-for-main; >>> - } >>> -} >>> - >>> -/* End of Paginate Style */ >>> -/* ---------------------- */ >>> - >>> -/* ------------------------------- */ >>> -/* List Navigation Style */ >>> -/* ------------------------------- */ >>> - >>> -.nav-pager { >>> - background-color: @greydark; >>> - color: @white; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> - font-size: 9px; >>> - font-weight: bold; >>> - line-height: 3.5em; >>> - height: 3.5em; >>> - margin: 0.5em 0 0.5em 0; >>> - border-radius: 3px 3px 0 0; >>> -} >>> - >>> -.nav-pager ul { >>> - display: inline; /* IE Fix */ >>> -} >>> - >>> -.nav-pager ul li { >>> - float:left; >>> - vertical-align: middle; >>> -} >>> - >>> -.nav-pager ul li a { >>> - display: block; >>> -} >>> - >>> -.nav-pager ul a { >>> - color: @white; >>> - padding: 0 1em 0 1em; >>> - text-decoration: none; >>> -} >>> - >>> -.nav-pager ul a:hover { >>> - background-color: @main-color-theme; >>> - color: @font-color-for-main; >>> -} >>> - >>> -.nav-pager ul .nav-pagesize, >>> -.nav-pager ul .nav-page-select, >>> -.nav-pager ul .nav-displaying { >>> - padding: 0 1em 0 1em; >>> -} >>> - >>> -.nav-pager ul .nav-first-disabled, >>> -.nav-pager ul .nav-previous-disabled, >>> -.nav-pager ul .nav-next-disabled, >>> -.nav-pager ul .nav-last-disabled { >>> - padding: 0 1em 0 1em; >>> -} >>> - >>> -.nav-pager ul .nav-first-disabled:hover, >>> -.nav-pager ul .nav-previous-disabled:hover, >>> -.nav-pager ul .nav-next-disabled:hover, >>> -.nav-pager ul .nav-last-disabled:hover { >>> - cursor: not-allowed; >>> -} >>> - >>> - >>> -.nav-pager ul .nav-displaying { >>> - border-right: none; >>> -} >>> - >>> - >>> -/* ---------------------------- */ >>> -/* Multi-Column Styles */ >>> -/* ---------------------------- */ >>> - >>> -#column-container { >>> - margin: auto; >>> - padding: 1em; >>> - position: relative; >>> - min-width: @min-container-width; >>> -} >>> - >>> -#column-container h1, >>> -#column-container .h1, >>> -#column-container h2, >>> -#column-container .h2 { >>> - margin-bottom: 0.5em; >>> -} >>> - >>> -#column-container h1, >>> -#column-container .h1 { >>> - color: #557996; >>> -} >>> - >>> -#column-container .left { >>> - float: left; >>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>> - width: 22em; >>> - margin-right: 1em; >>> -} >>> - >>> -#column-container .left-larger { >>> - float: left; >>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>> - width: 25em; >>> - margin-right: 1em; >>> -} >>> - >>> -.lefthalf { >>> - float: left; >>> - height: 1%; >>> - left: 0; >>> - margin: 0% 1% 1% 0%; >>> - width: 49%; >>> -} >>> - >>> -.righthalf { >>> - float: right; >>> - height: 1%; >>> - margin: 0 0 1% 1%; >>> - right: 0; >>> - width: 49%; >>> -} >>> - >>> -#column-container .right { >>> - float: right; >>> - margin-left: 1em; >>> - width: 22em; >>> -} >>> - >>> -#column-container .leftonly { >>> - margin-left: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .leftonly-larger { >>> - margin-left: 26em; >>> - width: auto; >>> -} >>> - >>> -#column-container .rightonly { >>> - margin-right: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .center { >>> - margin-left: 23em; >>> - margin-right: 23em; >>> - width: auto; >>> -} >>> - >>> -#column-container .nocolumns { >>> - width: auto; >>> -} >>> - >>> -/* ---------------------- */ >>> -/* Button Style */ >>> -/* ---------------------- */ >>> - >>> -.button-bar li.buttontext a, >>> -a.buttontext, >>> -a.buttontextbig, >>> -.smallSubmit, >>> -.smallSubmit:hover, >>> -.mediumSubmit, >>> -.largeSubmit, >>> -.loginButton, >>> -.button-style-1 a, >>> -.button-style-1 ul a, >>> -.button-style-2 ul a, >>> -.button-style-2 a, >>> -.button, >>> -button, >>> -input[type="reset"], >>> -input[type="submit"], >>> -input[type="button"] { >>> - -webkit-appearance: none; >>> - -moz-border-radius: 1.1em; >>> - -webkit-border-radius: 1.1em; >>> - border-radius: 2px; >>> - border: 0.1em solid @main-color-theme; >>> - background-color: @white; >>> - cursor: pointer; >>> - color: @main-color-theme; >>> - display:inline-block; >>> - font-size: 1em; >>> - font-weight: bold; >>> - outline: 0; >>> - overflow: visible; >>> - padding: 0.4em 1em 0.4em; >>> - text-decoration:none; >>> - /*text-transform:uppercase;*/ >>> - width: auto; >>> - >>> - /* IE7 */ >>> - *padding-top: 0.2em; >>> - *padding-bottom: 0; >>> - &:hover { >>> - color: @font-color-for-main; >>> - background-color: @main-color-theme; >>> - } >>> -} >>> - >>> - >>> -/* ---------------------- */ >>> -/* Footer Style */ >>> -/* ---------------------- */ >>> - >>> -#footer { >>> - background: @dark-color-theme; >>> - border-top: 0.1em inset #000; >>> - padding: 0.5em 0 0.5em 0.5em; >>> - >>> - height: @footer-height; >>> - position: fixed; >>> - bottom: 0; >>> - width: 100%; >>> - display: flex; >>> - flex-direction: row; >>> - align-items: center; >>> - justify-content: space-between; >>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>> !important; >>> - z-index: 10; >>> - >>> - span { >>> - color: @font-color-for-dark; >>> - padding: 10px; >>> - } >>> - >>> - a { >>> - color: @font-color-for-dark; >>> - font-weight: normal; >>> - } >>> -} >>> - >>> -#footer a:focus { >>> - text-decoration: underline; >>> -} >>> - >>> -#footer-offset { >>> - height: @footer-height + 10px; >>> - width: 100%; >>> -} >>> +/* common colors */ >>> +@black: #000; >>> +@white: #fff; >>> +@grey: #e6e6e6; >>> +@greydark: #929292; >>> + >>> +@color-success: #8cff8c; >>> +@font-color-for-success: @black; >>> +@color-alert: #ff8c8c; >>> +@font-color-for-alert: @black; >>> + >>> +@color-success-dark: #356e35; >>> +@font-color-for-success: @black; >>> +@color-alert-dark: #932f33; >>> +@font-color-for-alert: @black; >>> + >>> +@color-background-alert: #f2dede; >>> +@color-font-alert: #a94442; >>> +@color-border-alert: #ebccd1; >>> + >>> +@color-background-success: #dff0d8; >>> +@color-font-success: #3c763d; >>> +@color-border-success: #d6e9c6; >>> + >>> +/* Saphir colors */ >>> +@blue-dark: #002333; >>> +@blue-main: #005982; >>> +@blue-medium: #c7dfff; >>> +@blue-light: #f1f7ff; >>> +@blue-light2: #e4f0f5; >>> + >>> +/* Ruby colors */ >>> +@red-dark: #420000; >>> +@red-main: #bf1616; >>> +@red-medium: #f7baba; >>> +@red-light: #fce7e7; >>> +@red-light2: #fed7c9; >>> + >>> +/* Emerald colors */ >>> +@green-dark: #197948; >>> +@green-main: #23af9b; >>> +@green-medium: #7ae3ad; >>> +@green-light: #e5f9ef; >>> +@green-light2: #d7f9ef; >>> + >>> +/* Amber colors */ >>> +@amber-dark: #bc4216; >>> +@amber-main: #f08906; >>> +@amber-medium: #f5c4b3; >>> +@amber-light: #fcede8; >>> +@amber-light2: #fcedcd; >>> + >>> +/* Saphir theme */ >>> +/* >>> +@main-color-theme : @blue-main; >>> +@dark-color-theme : @blue-dark; >>> +@medium-color-theme : @blue-medium; >>> +@light-color-theme : @blue-light; >>> +@light2-color-theme : @blue-light2; >>> +@font-color-for-dark : @grey; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +*/ >>> + >>> +/* Ruby theme */ >>> +/* >>> +@main-color-theme : @red-main; >>> +@dark-color-theme : @red-dark; >>> +@medium-color-theme : @red-medium; >>> +@light-color-theme : @red-light; >>> +@light2-color-theme : @red-light2; >>> +@font-color-for-dark : @grey; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +/* >>> + >>> +/* Emerald theme */ >>> +/* >>> +@main-color-theme : @green-main; >>> +@dark-color-theme : @green-dark; >>> +@medium-color-theme : @green-medium; >>> +@light-color-theme : @green-light; >>> +@light2-color-theme : @green-light2; >>> +@font-color-for-dark : @white; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> +*/ >>> +/* Amber theme */ >>> +@main-color-theme : @amber-main; >>> +@dark-color-theme : @amber-dark; >>> +@medium-color-theme : @amber-medium; >>> +@light-color-theme : @amber-light; >>> +@light2-color-theme : @amber-light2; >>> +@font-color-for-dark : @white; >>> +@font-color-for-main : @white; >>> +@font-color-for-medium : @dark-color-theme; >>> +@font-color-for-light : @dark-color-theme; >>> +@shadow-color : @black; >>> +@shadow-color-light : @greydark; >>> + >>> + >>> +@app-bar-height: 60px; >>> +@sub-app-bar-height: 40px; >>> +@footer-height: 20px; >>> +@home-btn-width: 47px; >>> +@color-line-height: 9px; >>> + >>> +@home-menu-tile-height: 80px; >>> +@home-menu-tile-min-width: 100px; >>> +@home-menu-tile-max-width: 100px; >>> + >>> +@third-lvl-height: 80px; >>> +@third-lvl-width : 100px; >>> +@min-screen : 1170px; >>> +@min-container-width: 1130px; >>> + >>> +@box-border-color: #d7d7d7; >>> + >>> +@font-face { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + src: url('fonts/quicksand/quicksandbold.otf'); >>> + font-weight: normal; >>> + font-style: normal; >>> +} >>> + >>> +@font-face { >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + src: url('fonts/quicksand/quicksandbold.otf'); >>> + font-weight: bold; >>> + font-style: normal; >>> +} >>> + >>> +/* ---------------------------------- */ >>> +/* Begin special checkbox type switch */ >>> +/* ---------------------------------- */ >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox, >>> [type="checkbox"]:checked.nrd-chkbox { >>> + display: none; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label, >>> +[type="checkbox"]:checked.nrd-chkbox + label{ >>> + cursor: pointer; >>> +} >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>> +[type="checkbox"]:checked.nrd-chkbox + label:before{ >>> + content: ""; >>> + width: 150px; >>> + min-width: 150px; >>> + background-color: @light-color-theme; >>> + padding: 2px 20px 2px 20px; >>> + border-radius: 8px 8px 8px 8px; >>> + >>> + cursor: pointer; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> + content: ""; >>> + position: relative; >>> + left:-35px; >>> + background-color: @dark-color-theme; >>> + min-height: 10px; >>> + min-width: 10px; >>> + padding-left: 4px; >>> + padding-right: 5px; >>> + border-radius: 8px 8px 8px 8px; >>> + transition: all .2s; >>> +} >>> + >>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>> + position: relative; >>> + left: -15px; >>> + transition: all .2s; >>> +} >>> +/* ---------------------------------- */ >>> +/* End special checkbox type switch */ >>> +/* ---------------------------------- */ >>> + >>> +/* ---------------------------------- */ >>> +/* Begin square Checkbox */ >>> +/* ---------------------------------- */ >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox, >>> +[type="checkbox"]:checked.nrd-square-chkbox{ >>> + position: absolute; >>> + left: -9999px; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label{ >>> + content: ''; >>> + padding-left: 35px; >>> + position: relative; >>> + cursor: pointer; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + font-size: 12px; >>> + >>> +} >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> + content: ''; >>> + position: absolute; >>> + left:10px; >>> + top: -4px; >>> + width: 17px; >>> + height: 17px; /* dim. de la case */ >>> + border: 1px solid #aaa; >>> + background: @light-color-theme; >>> + border-radius: 2px; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>> + background: @light-color-theme; >>> +} >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>> + background: @main-color-theme; >>> +} >>> + >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>> + content: '✔'; >>> + position: absolute; >>> + top: -4px; >>> + left: 14px; >>> + font-size: 16px; >>> + color: @font-color-for-main; >>> + transition: all .2s; >>> +} >>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>> + opacity: 0; >>> + transform: scale(0); >>> +} >>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>> + opacity: 1; >>> + transform: scale(1); >>> +} >>> +/* ---------------------------------*/ >>> +/* End square Checkbox */ >>> +/* ---------------------------------*/ >>> + >>> +/* ---------------------------------*/ >>> +/* Begin class content mgmt */ >>> +/* ---------------------------------*/ >>> + >>> + >>> +.flex-row { >>> + display: flex; >>> + flex-direction: row !important; >>> +} >>> +.flex-column { >>> + display: flex; >>> + flex-direction: column; >>> +} >>> + >>> +.col-width-1 { >>> + width: 10%; >>> +} >>> +.col-width-2 { >>> + width: 20%; >>> +} >>> +.col-width-3 { >>> + width: 30%; >>> +} >>> +.col-width-4 { >>> + width: 40%; >>> +} >>> +.col-width-5 { >>> + width: 50%; >>> +} >>> +.col-width-6 { >>> + width: 60%; >>> +} >>> +.col-width-7 { >>> + width: 70%; >>> +} >>> +.col-width-8 { >>> + width: 80%; >>> +} >>> +.col-width-9 { >>> + width: 90%; >>> +} >>> +.col-width-10 { >>> + width: 100%; >>> +} >>> + >>> +.align-v-center { >>> + display:flex; >>> + align-items: center; >>> +} >>> + >>> +.align-h-center { >>> + display:flex; >>> + justify-content: center; >>> +} >>> + >>> +/* ---------------------------------*/ >>> +/* End class content mgmt */ >>> +/* ---------------------------------*/ >>> + >>> + >>> +/* ---------------------------------- */ >>> +/* Begin btn-sort */ >>> +/* ---------------------------------- */ >>> + >>> +.btn-sort { >>> + position: relative; >>> + top: -6px; >>> + border:none; >>> + background:none; >>> + border-radius: 0; >>> + margin-left:5px; >>> +} >>> + >>> +.btn-sort:before{ >>> + content: ''; >>> + position: absolute; >>> + left: -1px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-bottom: 10px solid @greydark; >>> + border-left: 10px solid transparent; >>> +} >>> + >>> +.btn-sort:after{ >>> + content: ''; >>> + position: absolute; >>> + right: -1px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-top: 10px solid @greydark; >>> + border-left: 10px solid transparent; >>> + @media screen and (max-width: 1349px) { >>> + right: -5px; >>> + } >>> +} >>> + >>> +.btn-sort.btn-sort-asc:before{ >>> + border-bottom: 10px solid @main-color-theme; >>> +} >>> + >>> +.btn-sort.btn-sort-desc:after{ >>> + border-top: 10px solid @main-color-theme; >>> +} >>> + >>> +/* ---------------------------------- */ >>> +/* End btn-sort */ >>> +/* ---------------------------------- */ >>> + >>> + >>> +/* ---------------------------------- */ >>> +/* Begin defaut colour class */ >>> +/* ---------------------------------- */ >>> + >>> +.dark-color { >>> + background-color: @dark-color-theme !important; >>> + color: @font-color-for-dark !important; >>> +} >>> +.main-color { >>> + background-color: @main-color-theme !important; >>> + color: @font-color-for-main !important; >>> +} >>> +.medium-color { >>> + background-color: @medium-color-theme !important; >>> + color: @font-color-for-medium !important; >>> +} >>> +.light-color { >>> + background-color: @light-color-theme !important; >>> + color: @font-color-for-light !important; >>> +} >>> +.light2-color { >>> + background-color: @light2-color-theme !important; >>> + color: @font-color-for-light !important; >>> +} >>> + >>> +.grey-color { >>> + background-color: @grey !important; >>> +} >>> +.darkgrey-color { >>> + background-color: @greydark !important; >>> +} >>> + >>> +/* begin lookup widget */ >>> +.ui-dialog { >>> + opacity: 1; >>> + z-index: 50; >>> +} >>> + >>> +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { >>> + background: none !important; >>> + background-color: @dark-color-theme !important; >>> + button { >>> + background: none; >>> + background-color: @light-color-theme; >>> + } >>> +} >>> +/* end lookup widget */ >>> + >>> +.main-bar-label { >>> + color: @light-color-theme; >>> + padding-left: 3px; >>> + padding-right: 6px; >>> + font-size: 15px; >>> + font-weight: bold; >>> +} >>> + >>> +#company-logo { >>> + right: 10px; >>> + top: 2px; >>> + background: url("images/ofbiz-simple-white.svg") no-repeat left top / >>> cover; >>> + min-height: 50px; >>> + min-width: 50px; >>> + margin-right: 15px; >>> + align-self: center; >>> + @media screen and (min-width : 1232px) { >>> + min-height: 50px; >>> + min-width: 129px; >>> + background: url("images/ofbiz-white.svg") no-repeat left top / cover; >>> + } >>> +} >>> + >>> +.modal-screen { >>> + visibility: hidden; >>> + display: flex; >>> + flex-direction: column; >>> + background-color: @grey; >>> + opacity: .93; >>> + position: fixed; >>> + top: 0; >>> + left: 0; >>> + height: 100%; >>> + width: 100%; >>> + z-index: 9999; >>> +} >>> + >>> +.modal-box{ >>> + background-color: @white; >>> + opacity: 1; >>> + margin: 10%; >>> + border-radius: 10px; >>> + border: solid 2px @main-color-theme; >>> + padding : 10px 40px 10px 40px; >>> + .modal-header { >>> + position: relative; >>> + display: flex; >>> + flex-direction: row; >>> + h2 { >>> + font-size: 25px; >>> + font-weight: normal; >>> + color: @main-color-theme; >>> + } >>> + .btn-close-nrd { >>> + position: absolute; >>> + right: 0; >>> + display: flex; >>> + justify-content: center; >>> + border: solid 1px @main-color-theme; >>> + border-radius: 5px; >>> + color: @main-color-theme; >>> + font-size: 25px; >>> + height: 30px; >>> + width: 30px; >>> + text-decoration: none !important; >>> + } >>> + } >>> + .modal-body { >>> + p { >>> + font-size: 20px; >>> + } >>> + } >>> + .modal-footer { >>> + position: relative; >>> + height: 35px; >>> + display: flex; >>> + justify-content: flex-end; >>> + .btn-nrd { >>> + background: none; >>> + border: none; >>> + text-shadow: none; >>> + opacity: 1; >>> + margin-right: 10px; >>> + font-size: 20px; >>> + padding: 5px; >>> + border-radius: 8px; >>> + } >>> + .btn-nrd-main { >>> + background-color: @main-color-theme; >>> + color: @white; >>> + } >>> + .btn-nrd-std { >>> + background-color: @white; >>> + color: @main-color-theme; >>> + border: solid 1px @main-color-theme !important; >>> + } >>> + } >>> +} >>> +.btn-nrd:hover { >>> + box-shadow: 5px 5px 3px 0 @black; >>> +} >>> + >>> +.btn-nrd-std:hover { >>> + background-color: @main-color-theme !important; >>> + color: @white !important; >>> + border: solid 1px @main-color-theme !important; >>> +} >>> + >>> +.btn-close-nrd:hover { >>> + background-color: @main-color-theme !important; >>> + color: @white !important; >>> +} >>> + >>> +.list-nrd { >>> + border: solid 2px @main-color-theme; >>> + border-bottom-left-radius: 10px; >>> + border-bottom-right-radius: 10px; >>> + display: flex; >>> + flex-direction: column; >>> + margin-top: 15px; >>> + margin-bottom: 15px; >>> + .title-list-nrd { >>> + background-color: @main-color-theme; >>> + color : @white; >>> + font-size: 20px; >>> + font-weight: bold; >>> + padding-left: 5px; >>> + } >>> + >>> + li { >>> + position: relative; >>> + display: flex; >>> + flex-direction: row; >>> + font-size: 20px; >>> + padding-left: 5px; >>> + padding-top: 2px; >>> + padding-bottom: 2px; >>> + margin-bottom: 3px; >>> + a { >>> + color: @main-color-theme; >>> + } >>> + span { >>> + position: absolute; >>> + right: 0; >>> + color: @main-color-theme; >>> + font-size: 30px; >>> + } >>> + } >>> +} >>> +li.line-odd { >>> + background-color: @light-color-theme; >>> +} >>> + >>> +#user-avatar { >>> + height: 40px; >>> + width: 40px; >>> + padding: 2px; >>> + >>> + align-self: center; >>> + >>> + :hover { >>> + cursor: pointer; >>> + } >>> + img { >>> + max-height: 40px; >>> + max-width: 40px; >>> + position: relative; >>> + top: -2px; >>> + padding: 2px; >>> + background-color: @white; >>> + border-radius: 2px; >>> + } >>> +} >>> + >>> +#main-navigation-bar { >>> + position: relative; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + display: flex; >>> + flex-direction: row; >>> + align-items: center; >>> + justify-content: space-between; >>> + font-family: Quicksand,sans-serif; >>> + background-color: @dark-color-theme; >>> + z-index: 5; >>> + height: @app-bar-height; >>> +} >>> +#main-nav-bar-left { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> +} >>> +#main-nav-bar-right { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> + padding-right: 15px; >>> +} >>> + >>> +.app-btn{ >>> + height: @app-bar-height; >>> + background-color: @dark-color-theme; >>> + display: flex; >>> + align-items: center; >>> + flex-direction: row; >>> + margin-right: 2px; >>> + margin-left: 2px; >>> + a { >>> + padding:10px; >>> + color: @font-color-for-dark; >>> + font-size: 1.4em !important; >>> + } >>> +} >>> + >>> +.app-btn a:visited { >>> + color: @font-color-for-dark; >>> +} >>> + >>> +.app-btn:hover{ >>> + position: relative; >>> + top: -6px; >>> + background-color: @main-color-theme; >>> + border-bottom-left-radius: 5px; >>> + border-bottom-right-radius: 5px; >>> + box-shadow: 1px 1px 12px @shadow-color; >>> + a { >>> + position: relative; >>> + top: 6px; >>> + color : @font-color-for-main; >>> + } >>> +} >>> +.app-btn.selected:hover { >>> + background-color: @dark-color-theme; >>> + box-shadow: none; >>> + top:0; >>> +} >>> + >>> +.app-btn a:hover { >>> + text-decoration: none; >>> +} >>> +#app-selected { >>> + position: relative; >>> + display: flex; >>> + flex-direction: column; >>> + align-items: center; >>> + justify-content: center; >>> + background-color: @main-color-theme; >>> + box-shadow: 1px -2px 12px @shadow-color; >>> + z-index: 0; >>> + opacity: .99; >>> + border-top-left-radius : 8px ; >>> + border-top-right-radius : 8px ; >>> + a { >>> + position: relative; >>> + top: 3px; >>> + color: @font-color-for-main; >>> + } >>> +} >>> +.app-btn.selected a:hover { >>> + text-decoration: none; >>> +} >>> + >>> +#app-bar-line { >>> + position: relative; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + height: @color-line-height; >>> + background-color: @main-color-theme; >>> + box-shadow: 2px 2px 5px @shadow-color; >>> +} >>> +#color-add { >>> + width: 150px; >>> + background-color: @main-color-theme; >>> + height: @color-line-height; >>> + z-index: 20; >>> + position: relative; >>> + top: @color-line-height; >>> +} >>> + >>> +#more-app { >>> + position: relative; >>> + display: flex; >>> + align-items: center; >>> + justify-content: center; >>> + font-weight: bold; >>> + font-size: 1.4em !important; >>> + width: 40px; >>> + height: @app-bar-height; >>> + color: @font-color-for-dark; >>> +} >>> +#more-app:hover { >>> + background-color: @main-color-theme; >>> + text-decoration: none; >>> +} >>> +#more-app:hover #more-app-list { >>> + display: block; >>> +} >>> +#more-app.selected { >>> + background-color: @main-color-theme; >>> +} >>> + >>> +#more-app-list { >>> + display: none; >>> + position: absolute; >>> + top: @app-bar-height; >>> + left: -20px; >>> + background-color: @dark-color-theme; >>> + z-index: 10; >>> + border: solid 4px @main-color-theme; >>> + border-top-width: @color-line-height; >>> + border-bottom-left-radius: 4px; >>> + border-bottom-right-radius: 4px; >>> + li { >>> + padding-left : 4px; >>> + padding-right: 4px; >>> + } >>> + >>> + a { >>> + color: @font-color-for-dark; >>> + font-size: 15px; >>> + } >>> + >>> + :hover { >>> + background-color: @medium-color-theme; >>> + a { >>> + box-shadow: none; >>> + color: @dark-color-theme; >>> + } >>> + a:hover{ >>> + box-shadow: none; >>> + text-decoration: none; >>> + border-radius: 0; >>> + } >>> + } >>> + >>> + li.selected { >>> + background-color: @main-color-theme; >>> + a { >>> + color: @font-color-for-main; >>> + } >>> + a:hover { >>> + color: @font-color-for-main; >>> + background-color: @main-color-theme; >>> + } >>> + } >>> +} >>> + >>> +#homeButton { >>> + display: flex; >>> + //visibility: hidden; >>> + align-items: center; >>> + justify-content: center; >>> + background-color:@grey; >>> + border: none; >>> + border-radius : 0; >>> + >>> + height: @app-bar-height; >>> + width : @home-btn-width; >>> + text-decoration: none; >>> + img { >>> + height: 25px; >>> + transition: all .2s ease-in-out; >>> + } >>> +} >>> + >>> +#homeButton:hover img { >>> + transform: scale(1.1); >>> +} >>> + >>> +#app-bar-list { >>> + display: flex; >>> +} >>> + >>> +#user-details { >>> + position: absolute; >>> + right: 20px; >>> + top : 62px; >>> + background-color: @dark-color-theme; >>> + color : @font-color-for-dark; >>> + font-size: 15px; >>> + font-weight: bold; >>> + padding-top: 5px; >>> + padding-bottom: 10px; >>> + z-index: 15; >>> + box-shadow: 3px 3px 12px @shadow-color; >>> + border-radius: 3px; >>> + transition: all .1s ease-in-out; >>> + >>> + img { >>> + height: 50px; >>> + background-color: @white; >>> + padding: 4px; >>> + border-radius : 3px; >>> + margin-left: 10px; >>> + margin-right: 5px; >>> + } >>> + #logout { >>> + background-color: @white; >>> + color: @dark-color-theme !important; >>> + border-radius: 2px; >>> + :hover { >>> + text-decoration: none; >>> + } >>> + } >>> +} >>> + >>> +#user-details:after{ >>> + content: ''; >>> + position: absolute; >>> + top: -10px; >>> + right: 5px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-bottom: 10px solid @dark-color-theme; >>> + border-left: 10px solid transparent; >>> +} >>> + >>> +a.user-pref-btn { >>> + margin-top: 15px; >>> + background-color: @dark-color-theme; >>> + margin-left: 10px; >>> + margin-right: 10px; >>> + padding-top: 2px; >>> + padding-bottom: 2px; >>> + display: flex; >>> + justify-content: center; >>> + color: @font-color-for-dark !important; >>> + :hover { >>> + text-decoration: none; >>> + } >>> +} >>> + >>> +#user-name { >>> + display: flex; >>> + flex-direction: column; >>> + justify-content: center; >>> + align-content: center; >>> + padding-left : 5px; >>> + padding-right : 5px; >>> + span { >>> + min-width: 100px; >>> + padding-bottom : 5px; >>> + padding-top : 5px; >>> + } >>> +} >>> + >>> +#user-row1 { >>> + display: flex; >>> + flex-direction: row; >>> + justify-content: center; >>> + #user-lang { >>> + display: flex; >>> + flex-direction: row; >>> + justify-content: center; >>> + align-content: center; >>> + padding-left: 10px; >>> + padding-right: 10px; >>> + span { >>> + min-width: 30px; >>> + color: @font-color-for-dark; >>> + } >>> + } >>> +} >>> + >>> +.appbar-btn-img { >>> + height: @app-bar-height - 40px; >>> +} >>> + >>> +#help-btn { >>> + font-size: 10px; >>> + min-width: 20px; >>> + margin-right: 15px; >>> +} >>> +/* Begin sub Menu section */ >>> + >>> +#app-navigation { >>> + height: @sub-app-bar-height; >>> + border-right: solid 1px @black; >>> + border-bottom: solid 1px @black; >>> + width: 100%; >>> + min-width: @min-container-width; >>> + h2 { >>> + display: none; >>> + } >>> + ul { >>> + display: flex; >>> + flex-direction: row; >>> + background-color: @grey; >>> + flex-grow: 1; >>> + } >>> + ul li ul li { >>> + border-left: solid 1px @black; >>> + height: @sub-app-bar-height; >>> + display: flex; >>> + align-items: center; >>> + justify-items: center; >>> + justify-content: center; >>> + min-width: 75px; >>> + padding-left: 6px; >>> + padding-right: 6px; >>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>> + border-bottom: solid 1px @black; >>> + font-size: 12px; >>> + @media screen and (max-width: 1500px) { >>> + font-size: 10px; >>> + min-width: 65px; >>> + } >>> + @media screen and (max-width: 1300px) { >>> + font-size: 10px; >>> + min-width: 50px; >>> + } >>> + a { >>> + display: flex; >>> + justify-content: center; >>> + align-items: center; >>> + text-align: center; >>> + height: 100%; >>> + width: 100%; >>> + text-decoration: none; >>> + } >>> + } >>> +} >>> + >>> +#app-navigation ul li ul li:last-child { >>> + border-right: solid 1px @black; >>> +} >>> + >>> +#app-navigation ul li ul li:hover { >>> + background-color: @main-color-theme; >>> + min-height: @sub-app-bar-height; >>> + position: relative; >>> + //top: -1px; >>> + a { >>> + color: @white; >>> + text-decoration: none; >>> + } >>> +} >>> +#app-navigation ul li ul li.selected:hover { >>> + a { >>> + color: @black !important; >>> + } >>> +} >>> + >>> +#app-navigation ul li ul li.selected { >>> + background-color: @white; >>> + position: relative; >>> + top: 1px; >>> + height: @sub-app-bar-height + 1px; >>> + border-top-right-radius: 2px; >>> + border-top-left-radius: 2px; >>> + border-bottom: none; >>> + >>> + :after { >>> + content: ''; >>> + position: absolute; >>> + top: -2px; >>> + left: 5px; >>> + width: 0; >>> + height: 0; >>> + border-right: 10px solid transparent; >>> + border-top: 10px solid @main-color-theme; >>> + border-left: 10px solid transparent; >>> + } >>> + >>> +} >>> + >>> + >>> +/* End sub Menu section */ >>> + >>> +/* begin sub Menu section 3rd level */ >>> + >>> +.button-bar.tab-bar { >>> + ul li ul li { >>> + border: solid 1px @grey; >>> + border-radius: 4px; >>> + a { >>> + width: 100%; >>> + height: 100%; >>> + } >>> + } >>> + li.selected{ >>> + background-color: @main-color-theme; >>> + a{ >>> + color: @font-color-for-main; >>> + } >>> + } >>> + ul li ul li:hover { >>> + background-color: @main-color-theme; >>> + a { >>> + color: @font-color-for-main ; >>> + } >>> + } >>> +} >>> + >>> +#third-level-menu-container { >>> + display: flex; >>> + flex-direction: row; >>> +} >>> +#working-area { >>> + width: 100%; >>> +} >>> + >>> +#left-column-menu { >>> + width: 100px; >>> +} >>> + >>> +.third-lvl-menu { >>> + background-color: @dark-color-theme; >>> + position: relative; >>> + left: -10px; >>> + border-top-right-radius: 4px; >>> + border-bottom-right-radius: 4px; >>> + padding-top: 4px; >> |
In reply to this post by Jacques Le Roux
On 24/08/2016 09:41, Jacques Le Roux wrote: > Le 24/08/2016 à 09:23, Julien NICOLAS a écrit : >> Hi Jacques, >> >> I don't understand what to do if we had a new file type. I understand >> that something is wrong with the svn config but I don't know what. > > Simple, just add it, like I did for *.less at > http://svn.apache.org/viewvc?rev=1757468&view=rev > > Then update your local one and ask other committers to do so > >> >> For the 4 colors, it is only because my customer order included 4 >> theme colors and when I push the theme in trunk, I keep them. >> >> I like the 4 colors (and want to have more :) ) but it seems to be a >> problem (what is exactly this problem ?). > > Simple, maintaining 4 similar things instead of 1 with a central less file and 4 others less only for colors. It could be better and solve the maintaining issue. > >> >> In the same idea, why do we keep more than one theme ? Just decide >> witch one is official and then, the other will be push out of the >> theme folder. > > This is a moot point (which one? :)) But indeed with plugins I agree > we should have only 1 OOTB and others external I dream about this <3 pluggin system <3 in OFBiz :D which one => I think it could be a vote by the community (only issueless themes). > > Jacques > >> >> Julien. >> >> >> On 24/08/2016 07:52, Jacques Le Roux wrote: >>> OK, the *.less type is not in the svn config. I'll revert, add it, >>> and commit again. >>> >>> So again, please committers remember to do so when you commit a new >>> file type. >>> >>> While at it I really wonder if we need to have 4 colored versions of >>> the same theme in trunk? >>> >>> I suggest to have only one and propose the others as external >>> components, later plugins. We could use a third party location to >>> propose the 3 others theme component (GitHub, >>> https://oem.ofbizci.net/oci-2, etc.) >>> >>> Opinions? >>> >>> Jacques >>> >>> Le 24/08/2016 à 07:44, [hidden email] a écrit : >>>> Author: jleroux >>>> Date: Wed Aug 24 05:44:00 2016 >>>> New Revision: 1757462 >>>> >>>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev >>>> Log: >>>> Removes now useless IE7 "star html hack". I was used to prevent IE7 >>>> from applying some CCS rules: >>>> http://css-discuss.incutio.com/wiki/Star_Html_Hack >>>> And the hack is claimed deprecated here : >>>> https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/ >>>> >>>> Thanks to Florian Montalbano research at "css property name >>>> correction in flatgrey and rainbowstone themes" - >>>> https://issues.apache.org/jira/browse/OFBIZ-7960# >>>> >>>> I checked, the IE7 market share is residual, no needs to keep this >>>> dragging down feature >>>> >>>> Modified: >>>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>>> >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less >>>> >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less >>>> >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less >>>> >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css >>>> >>>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css >>>> URL: >>>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff >>>> ============================================================================== >>>> >>>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original) >>>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug >>>> 24 05:44:00 2016 >>>> @@ -922,10 +922,6 @@ form .basic-table, >>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>>> /*text-transform:uppercase;*/ >>>> width: auto; >>>> - >>>> - /* IE7 */ >>>> - *padding-top: 0.2em; >>>> - *padding-bottom: 0; >>>> } >>>> .basic-table .collapsed { >>>> @@ -1512,16 +1508,6 @@ input[type="button"] { >>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */ >>>> /*text-transform:uppercase;*/ >>>> width: auto; >>>> - >>>> - /* IE7 */ >>>> - *padding-top: 0.2em; >>>> - *padding-bottom: 0; >>>> -} >>>> - >>>> -button { >>>> - /* IE7 */ >>>> - *padding-top: 0.1em; >>>> - *padding-bottom: 0.1em; >>>> } >>>> a.disabled, >>>> @@ -1563,11 +1549,6 @@ input[type="week"] { >>>> padding: 0.2em 0.3em; >>>> height: 1.8em; >>>> - >>>> - /* IE7 */ >>>> - *padding-top: 0.2em; >>>> - *padding-bottom: 0.1em; >>>> - *height: auto; >>>> } >>>> /* >>>> >>>> Modified: >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>>> URL: >>>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff >>>> ============================================================================== >>>> >>>> --- >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>>> (original) >>>> +++ >>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less >>>> Wed Aug 24 05:44:00 2016 >>>> @@ -1,1997 +1,1990 @@ >>>> -/* common colors */ >>>> -@black: #000; >>>> -@white: #fff; >>>> -@grey: #e6e6e6; >>>> -@greydark: #929292; >>>> - >>>> -@color-success: #8cff8c; >>>> -@font-color-for-success: @black; >>>> -@color-alert: #ff8c8c; >>>> -@font-color-for-alert: @black; >>>> - >>>> -@color-success-dark: #356e35; >>>> -@font-color-for-success: @black; >>>> -@color-alert-dark: #932f33; >>>> -@font-color-for-alert: @black; >>>> - >>>> -@color-background-alert: #f2dede; >>>> -@color-font-alert: #a94442; >>>> -@color-border-alert: #ebccd1; >>>> - >>>> -@color-background-success: #dff0d8; >>>> -@color-font-success: #3c763d; >>>> -@color-border-success: #d6e9c6; >>>> - >>>> -/* Saphir colors */ >>>> -@blue-dark: #002333; >>>> -@blue-main: #005982; >>>> -@blue-medium: #c7dfff; >>>> -@blue-light: #f1f7ff; >>>> -@blue-light2: #e4f0f5; >>>> - >>>> -/* Ruby colors */ >>>> -@red-dark: #420000; >>>> -@red-main: #bf1616; >>>> -@red-medium: #f7baba; >>>> -@red-light: #fce7e7; >>>> -@red-light2: #fed7c9; >>>> - >>>> -/* Emerald colors */ >>>> -@green-dark: #197948; >>>> -@green-main: #23af9b; >>>> -@green-medium: #7ae3ad; >>>> -@green-light: #e5f9ef; >>>> -@green-light2: #d7f9ef; >>>> - >>>> -/* Amber colors */ >>>> -@amber-dark: #bc4216; >>>> -@amber-main: #f08906; >>>> -@amber-medium: #f5c4b3; >>>> -@amber-light: #fcede8; >>>> -@amber-light2: #fcedcd; >>>> - >>>> -/* Saphir theme */ >>>> -/* >>>> -@main-color-theme : @blue-main; >>>> -@dark-color-theme : @blue-dark; >>>> -@medium-color-theme : @blue-medium; >>>> -@light-color-theme : @blue-light; >>>> -@light2-color-theme : @blue-light2; >>>> -@font-color-for-dark : @grey; >>>> -@font-color-for-main : @white; >>>> -@font-color-for-medium : @dark-color-theme; >>>> -@font-color-for-light : @dark-color-theme; >>>> -@shadow-color : @black; >>>> -@shadow-color-light : @greydark; >>>> -*/ >>>> - >>>> -/* Ruby theme */ >>>> -/* >>>> -@main-color-theme : @red-main; >>>> -@dark-color-theme : @red-dark; >>>> -@medium-color-theme : @red-medium; >>>> -@light-color-theme : @red-light; >>>> -@light2-color-theme : @red-light2; >>>> -@font-color-for-dark : @grey; >>>> -@font-color-for-main : @white; >>>> -@font-color-for-medium : @dark-color-theme; >>>> -@font-color-for-light : @dark-color-theme; >>>> -@shadow-color : @black; >>>> -@shadow-color-light : @greydark; >>>> -/* >>>> - >>>> -/* Emerald theme */ >>>> -/* >>>> -@main-color-theme : @green-main; >>>> -@dark-color-theme : @green-dark; >>>> -@medium-color-theme : @green-medium; >>>> -@light-color-theme : @green-light; >>>> -@light2-color-theme : @green-light2; >>>> -@font-color-for-dark : @white; >>>> -@font-color-for-main : @white; >>>> -@font-color-for-medium : @dark-color-theme; >>>> -@font-color-for-light : @dark-color-theme; >>>> -@shadow-color : @black; >>>> -@shadow-color-light : @greydark; >>>> -*/ >>>> -/* Amber theme */ >>>> -@main-color-theme : @amber-main; >>>> -@dark-color-theme : @amber-dark; >>>> -@medium-color-theme : @amber-medium; >>>> -@light-color-theme : @amber-light; >>>> -@light2-color-theme : @amber-light2; >>>> -@font-color-for-dark : @white; >>>> -@font-color-for-main : @white; >>>> -@font-color-for-medium : @dark-color-theme; >>>> -@font-color-for-light : @dark-color-theme; >>>> -@shadow-color : @black; >>>> -@shadow-color-light : @greydark; >>>> - >>>> - >>>> -@app-bar-height: 60px; >>>> -@sub-app-bar-height: 40px; >>>> -@footer-height: 20px; >>>> -@home-btn-width: 47px; >>>> -@color-line-height: 9px; >>>> - >>>> -@home-menu-tile-height: 80px; >>>> -@home-menu-tile-min-width: 100px; >>>> -@home-menu-tile-max-width: 100px; >>>> - >>>> -@third-lvl-height: 80px; >>>> -@third-lvl-width : 100px; >>>> -@min-screen : 1170px; >>>> -@min-container-width: 1130px; >>>> - >>>> -@box-border-color: #d7d7d7; >>>> - >>>> -@font-face { >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - src: url('fonts/quicksand/quicksandbold.otf'); >>>> - font-weight: normal; >>>> - font-style: normal; >>>> -} >>>> - >>>> -@font-face { >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - src: url('fonts/quicksand/quicksandbold.otf'); >>>> - font-weight: bold; >>>> - font-style: normal; >>>> -} >>>> - >>>> -/* ---------------------------------- */ >>>> -/* Begin special checkbox type switch */ >>>> -/* ---------------------------------- */ >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-chkbox, >>>> [type="checkbox"]:checked.nrd-chkbox { >>>> - display: none; >>>> -} >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-chkbox + label, >>>> -[type="checkbox"]:checked.nrd-chkbox + label{ >>>> - cursor: pointer; >>>> -} >>>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>>> -[type="checkbox"]:checked.nrd-chkbox + label:before{ >>>> - content: ""; >>>> - width: 150px; >>>> - min-width: 150px; >>>> - background-color: @light-color-theme; >>>> - padding: 2px 20px 2px 20px; >>>> - border-radius: 8px 8px 8px 8px; >>>> - >>>> - cursor: pointer; >>>> -} >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>>> - content: ""; >>>> - position: relative; >>>> - left:-35px; >>>> - background-color: @dark-color-theme; >>>> - min-height: 10px; >>>> - min-width: 10px; >>>> - padding-left: 4px; >>>> - padding-right: 5px; >>>> - border-radius: 8px 8px 8px 8px; >>>> - transition: all .2s; >>>> -} >>>> - >>>> -[type="checkbox"]:checked.nrd-chkbox + label:after{ >>>> - position: relative; >>>> - left: -15px; >>>> - transition: all .2s; >>>> -} >>>> -/* ---------------------------------- */ >>>> -/* End special checkbox type switch */ >>>> -/* ---------------------------------- */ >>>> - >>>> -/* ---------------------------------- */ >>>> -/* Begin square Checkbox */ >>>> -/* ---------------------------------- */ >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox, >>>> -[type="checkbox"]:checked.nrd-square-chkbox{ >>>> - position: absolute; >>>> - left: -9999px; >>>> -} >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>>> -[type="checkbox"]:checked.nrd-square-chkbox + label{ >>>> - content: ''; >>>> - padding-left: 35px; >>>> - position: relative; >>>> - cursor: pointer; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - font-size: 12px; >>>> - >>>> -} >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>>> - content: ''; >>>> - position: absolute; >>>> - left:10px; >>>> - top: -4px; >>>> - width: 17px; >>>> - height: 17px; /* dim. de la case */ >>>> - border: 1px solid #aaa; >>>> - background: @light-color-theme; >>>> - border-radius: 2px; >>>> -} >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>>> - background: @light-color-theme; >>>> -} >>>> -[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>>> - background: @main-color-theme; >>>> -} >>>> - >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>>> - content: 'â'; >>>> - position: absolute; >>>> - top: -4px; >>>> - left: 14px; >>>> - font-size: 16px; >>>> - color: @font-color-for-main; >>>> - transition: all .2s; >>>> -} >>>> -[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>>> - opacity: 0; >>>> - transform: scale(0); >>>> -} >>>> -[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>>> - opacity: 1; >>>> - transform: scale(1); >>>> -} >>>> -/* ---------------------------------*/ >>>> -/* End square Checkbox */ >>>> -/* ---------------------------------*/ >>>> - >>>> -/* ---------------------------------*/ >>>> -/* Begin class content mgmt */ >>>> -/* ---------------------------------*/ >>>> - >>>> - >>>> -.flex-row { >>>> - display: flex; >>>> - flex-direction: row !important; >>>> -} >>>> -.flex-column { >>>> - display: flex; >>>> - flex-direction: column; >>>> -} >>>> - >>>> -.col-width-1 { >>>> - width: 10%; >>>> -} >>>> -.col-width-2 { >>>> - width: 20%; >>>> -} >>>> -.col-width-3 { >>>> - width: 30%; >>>> -} >>>> -.col-width-4 { >>>> - width: 40%; >>>> -} >>>> -.col-width-5 { >>>> - width: 50%; >>>> -} >>>> -.col-width-6 { >>>> - width: 60%; >>>> -} >>>> -.col-width-7 { >>>> - width: 70%; >>>> -} >>>> -.col-width-8 { >>>> - width: 80%; >>>> -} >>>> -.col-width-9 { >>>> - width: 90%; >>>> -} >>>> -.col-width-10 { >>>> - width: 100%; >>>> -} >>>> - >>>> -.align-v-center { >>>> - display:flex; >>>> - align-items: center; >>>> -} >>>> - >>>> -.align-h-center { >>>> - display:flex; >>>> - justify-content: center; >>>> -} >>>> - >>>> -/* ---------------------------------*/ >>>> -/* End class content mgmt */ >>>> -/* ---------------------------------*/ >>>> - >>>> - >>>> -/* ---------------------------------- */ >>>> -/* Begin btn-sort */ >>>> -/* ---------------------------------- */ >>>> - >>>> -.btn-sort { >>>> - position: relative; >>>> - top: -6px; >>>> - border:none; >>>> - background:none; >>>> - border-radius: 0; >>>> - margin-left:5px; >>>> -} >>>> - >>>> -.btn-sort:before{ >>>> - content: ''; >>>> - position: absolute; >>>> - left: -1px; >>>> - width: 0; >>>> - height: 0; >>>> - border-right: 10px solid transparent; >>>> - border-bottom: 10px solid @greydark; >>>> - border-left: 10px solid transparent; >>>> -} >>>> - >>>> -.btn-sort:after{ >>>> - content: ''; >>>> - position: absolute; >>>> - right: -1px; >>>> - width: 0; >>>> - height: 0; >>>> - border-right: 10px solid transparent; >>>> - border-top: 10px solid @greydark; >>>> - border-left: 10px solid transparent; >>>> - @media screen and (max-width: 1349px) { >>>> - right: -5px; >>>> - } >>>> -} >>>> - >>>> -.btn-sort.btn-sort-asc:before{ >>>> - border-bottom: 10px solid @main-color-theme; >>>> -} >>>> - >>>> -.btn-sort.btn-sort-desc:after{ >>>> - border-top: 10px solid @main-color-theme; >>>> -} >>>> - >>>> -/* ---------------------------------- */ >>>> -/* End btn-sort */ >>>> -/* ---------------------------------- */ >>>> - >>>> - >>>> -/* ---------------------------------- */ >>>> -/* Begin defaut colour class */ >>>> -/* ---------------------------------- */ >>>> - >>>> -.dark-color { >>>> - background-color: @dark-color-theme !important; >>>> - color: @font-color-for-dark !important; >>>> -} >>>> -.main-color { >>>> - background-color: @main-color-theme !important; >>>> - color: @font-color-for-main !important; >>>> -} >>>> -.medium-color { >>>> - background-color: @medium-color-theme !important; >>>> - color: @font-color-for-medium !important; >>>> -} >>>> -.light-color { >>>> - background-color: @light-color-theme !important; >>>> - color: @font-color-for-light !important; >>>> -} >>>> -.light2-color { >>>> - background-color: @light2-color-theme !important; >>>> - color: @font-color-for-light !important; >>>> -} >>>> - >>>> -.grey-color { >>>> - background-color: @grey !important; >>>> -} >>>> -.darkgrey-color { >>>> - background-color: @greydark !important; >>>> -} >>>> - >>>> -/* begin lookup widget */ >>>> -.ui-dialog { >>>> - opacity: 1; >>>> - z-index: 50; >>>> -} >>>> - >>>> -.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix >>>> { >>>> - background: none !important; >>>> - background-color: @dark-color-theme !important; >>>> - button { >>>> - background: none; >>>> - background-color: @light-color-theme; >>>> - } >>>> -} >>>> -/* end lookup widget */ >>>> - >>>> -.main-bar-label { >>>> - color: @light-color-theme; >>>> - padding-left: 3px; >>>> - padding-right: 6px; >>>> - font-size: 15px; >>>> - font-weight: bold; >>>> -} >>>> - >>>> -#company-logo { >>>> - right: 10px; >>>> - top: 2px; >>>> - background: url("images/ofbiz-simple-white.svg") no-repeat left >>>> top / cover; >>>> - min-height: 50px; >>>> - min-width: 50px; >>>> - margin-right: 15px; >>>> - align-self: center; >>>> - @media screen and (min-width : 1232px) { >>>> - min-height: 50px; >>>> - min-width: 129px; >>>> - background: url("images/ofbiz-white.svg") no-repeat left top / >>>> cover; >>>> - } >>>> -} >>>> - >>>> -.modal-screen { >>>> - visibility: hidden; >>>> - display: flex; >>>> - flex-direction: column; >>>> - background-color: @grey; >>>> - opacity: .93; >>>> - position: fixed; >>>> - top: 0; >>>> - left: 0; >>>> - height: 100%; >>>> - width: 100%; >>>> - z-index: 9999; >>>> -} >>>> - >>>> -.modal-box{ >>>> - background-color: @white; >>>> - opacity: 1; >>>> - margin: 10%; >>>> - border-radius: 10px; >>>> - border: solid 2px @main-color-theme; >>>> - padding : 10px 40px 10px 40px; >>>> - .modal-header { >>>> - position: relative; >>>> - display: flex; >>>> - flex-direction: row; >>>> - h2 { >>>> - font-size: 25px; >>>> - font-weight: normal; >>>> - color: @main-color-theme; >>>> - } >>>> - .btn-close-nrd { >>>> - position: absolute; >>>> - right: 0; >>>> - display: flex; >>>> - justify-content: center; >>>> - border: solid 1px @main-color-theme; >>>> - border-radius: 5px; >>>> - color: @main-color-theme; >>>> - font-size: 25px; >>>> - height: 30px; >>>> - width: 30px; >>>> - text-decoration: none !important; >>>> - } >>>> - } >>>> - .modal-body { >>>> - p { >>>> - font-size: 20px; >>>> - } >>>> - } >>>> - .modal-footer { >>>> - position: relative; >>>> - height: 35px; >>>> - display: flex; >>>> - justify-content: flex-end; >>>> - .btn-nrd { >>>> - background: none; >>>> - border: none; >>>> - text-shadow: none; >>>> - opacity: 1; >>>> - margin-right: 10px; >>>> - font-size: 20px; >>>> - padding: 5px; >>>> - border-radius: 8px; >>>> - } >>>> - .btn-nrd-main { >>>> - background-color: @main-color-theme; >>>> - color: @white; >>>> - } >>>> - .btn-nrd-std { >>>> - background-color: @white; >>>> - color: @main-color-theme; >>>> - border: solid 1px @main-color-theme !important; >>>> - } >>>> - } >>>> -} >>>> -.btn-nrd:hover { >>>> - box-shadow: 5px 5px 3px 0 @black; >>>> -} >>>> - >>>> -.btn-nrd-std:hover { >>>> - background-color: @main-color-theme !important; >>>> - color: @white !important; >>>> - border: solid 1px @main-color-theme !important; >>>> -} >>>> - >>>> -.btn-close-nrd:hover { >>>> - background-color: @main-color-theme !important; >>>> - color: @white !important; >>>> -} >>>> - >>>> -.list-nrd { >>>> - border: solid 2px @main-color-theme; >>>> - border-bottom-left-radius: 10px; >>>> - border-bottom-right-radius: 10px; >>>> - display: flex; >>>> - flex-direction: column; >>>> - margin-top: 15px; >>>> - margin-bottom: 15px; >>>> - .title-list-nrd { >>>> - background-color: @main-color-theme; >>>> - color : @white; >>>> - font-size: 20px; >>>> - font-weight: bold; >>>> - padding-left: 5px; >>>> - } >>>> - >>>> - li { >>>> - position: relative; >>>> - display: flex; >>>> - flex-direction: row; >>>> - font-size: 20px; >>>> - padding-left: 5px; >>>> - padding-top: 2px; >>>> - padding-bottom: 2px; >>>> - margin-bottom: 3px; >>>> - a { >>>> - color: @main-color-theme; >>>> - } >>>> - span { >>>> - position: absolute; >>>> - right: 0; >>>> - color: @main-color-theme; >>>> - font-size: 30px; >>>> - } >>>> - } >>>> -} >>>> -li.line-odd { >>>> - background-color: @light-color-theme; >>>> -} >>>> - >>>> -#user-avatar { >>>> - height: 40px; >>>> - width: 40px; >>>> - padding: 2px; >>>> - >>>> - align-self: center; >>>> - >>>> - :hover { >>>> - cursor: pointer; >>>> - } >>>> - img { >>>> - max-height: 40px; >>>> - max-width: 40px; >>>> - position: relative; >>>> - top: -2px; >>>> - padding: 2px; >>>> - background-color: @white; >>>> - border-radius: 2px; >>>> - } >>>> -} >>>> - >>>> -#main-navigation-bar { >>>> - position: relative; >>>> - width: 100%; >>>> - min-width: @min-container-width; >>>> - display: flex; >>>> - flex-direction: row; >>>> - align-items: center; >>>> - justify-content: space-between; >>>> - font-family: Quicksand,sans-serif; >>>> - background-color: @dark-color-theme; >>>> - z-index: 5; >>>> - height: @app-bar-height; >>>> -} >>>> -#main-nav-bar-left { >>>> - position: relative; >>>> - display: flex; >>>> - align-items: center; >>>> -} >>>> -#main-nav-bar-right { >>>> - position: relative; >>>> - display: flex; >>>> - align-items: center; >>>> - padding-right: 15px; >>>> -} >>>> - >>>> -.app-btn{ >>>> - height: @app-bar-height; >>>> - background-color: @dark-color-theme; >>>> - display: flex; >>>> - align-items: center; >>>> - flex-direction: row; >>>> - margin-right: 2px; >>>> - margin-left: 2px; >>>> - a { >>>> - padding:10px; >>>> - color: @font-color-for-dark; >>>> - font-size: 1.4em !important; >>>> - } >>>> -} >>>> - >>>> -.app-btn a:visited { >>>> - color: @font-color-for-dark; >>>> -} >>>> - >>>> -.app-btn:hover{ >>>> - position: relative; >>>> - top: -6px; >>>> - background-color: @main-color-theme; >>>> - border-bottom-left-radius: 5px; >>>> - border-bottom-right-radius: 5px; >>>> - box-shadow: 1px 1px 12px @shadow-color; >>>> - a { >>>> - position: relative; >>>> - top: 6px; >>>> - color : @font-color-for-main; >>>> - } >>>> -} >>>> -.app-btn.selected:hover { >>>> - background-color: @dark-color-theme; >>>> - box-shadow: none; >>>> - top:0; >>>> -} >>>> - >>>> -.app-btn a:hover { >>>> - text-decoration: none; >>>> -} >>>> -#app-selected { >>>> - position: relative; >>>> - display: flex; >>>> - flex-direction: column; >>>> - align-items: center; >>>> - justify-content: center; >>>> - background-color: @main-color-theme; >>>> - box-shadow: 1px -2px 12px @shadow-color; >>>> - z-index: 0; >>>> - opacity: .99; >>>> - border-top-left-radius : 8px ; >>>> - border-top-right-radius : 8px ; >>>> - a { >>>> - position: relative; >>>> - top: 3px; >>>> - color: @font-color-for-main; >>>> - } >>>> -} >>>> -.app-btn.selected a:hover { >>>> - text-decoration: none; >>>> -} >>>> - >>>> -#app-bar-line { >>>> - position: relative; >>>> - width: 100%; >>>> - min-width: @min-container-width; >>>> - height: @color-line-height; >>>> - background-color: @main-color-theme; >>>> - box-shadow: 2px 2px 5px @shadow-color; >>>> -} >>>> -#color-add { >>>> - width: 150px; >>>> - background-color: @main-color-theme; >>>> - height: @color-line-height; >>>> - z-index: 20; >>>> - position: relative; >>>> - top: @color-line-height; >>>> -} >>>> - >>>> -#more-app { >>>> - position: relative; >>>> - display: flex; >>>> - align-items: center; >>>> - justify-content: center; >>>> - font-weight: bold; >>>> - font-size: 1.4em !important; >>>> - width: 40px; >>>> - height: @app-bar-height; >>>> - color: @font-color-for-dark; >>>> -} >>>> -#more-app:hover { >>>> - background-color: @main-color-theme; >>>> - text-decoration: none; >>>> -} >>>> -#more-app:hover #more-app-list { >>>> - display: block; >>>> -} >>>> -#more-app.selected { >>>> - background-color: @main-color-theme; >>>> -} >>>> - >>>> -#more-app-list { >>>> - display: none; >>>> - position: absolute; >>>> - top: @app-bar-height; >>>> - left: -20px; >>>> - background-color: @dark-color-theme; >>>> - z-index: 10; >>>> - border: solid 4px @main-color-theme; >>>> - border-top-width: @color-line-height; >>>> - border-bottom-left-radius: 4px; >>>> - border-bottom-right-radius: 4px; >>>> - li { >>>> - padding-left : 4px; >>>> - padding-right: 4px; >>>> - } >>>> - >>>> - a { >>>> - color: @font-color-for-dark; >>>> - font-size: 15px; >>>> - } >>>> - >>>> - :hover { >>>> - background-color: @medium-color-theme; >>>> - a { >>>> - box-shadow: none; >>>> - color: @dark-color-theme; >>>> - } >>>> - a:hover{ >>>> - box-shadow: none; >>>> - text-decoration: none; >>>> - border-radius: 0; >>>> - } >>>> - } >>>> - >>>> - li.selected { >>>> - background-color: @main-color-theme; >>>> - a { >>>> - color: @font-color-for-main; >>>> - } >>>> - a:hover { >>>> - color: @font-color-for-main; >>>> - background-color: @main-color-theme; >>>> - } >>>> - } >>>> -} >>>> - >>>> -#homeButton { >>>> - display: flex; >>>> - //visibility: hidden; >>>> - align-items: center; >>>> - justify-content: center; >>>> - background-color:@grey; >>>> - border: none; >>>> - border-radius : 0; >>>> - >>>> - height: @app-bar-height; >>>> - width : @home-btn-width; >>>> - text-decoration: none; >>>> - img { >>>> - height: 25px; >>>> - transition: all .2s ease-in-out; >>>> - } >>>> -} >>>> - >>>> -#homeButton:hover img { >>>> - transform: scale(1.1); >>>> -} >>>> - >>>> -#app-bar-list { >>>> - display: flex; >>>> -} >>>> - >>>> -#user-details { >>>> - position: absolute; >>>> - right: 20px; >>>> - top : 62px; >>>> - background-color: @dark-color-theme; >>>> - color : @font-color-for-dark; >>>> - font-size: 15px; >>>> - font-weight: bold; >>>> - padding-top: 5px; >>>> - padding-bottom: 10px; >>>> - z-index: 15; >>>> - box-shadow: 3px 3px 12px @shadow-color; >>>> - border-radius: 3px; >>>> - transition: all .1s ease-in-out; >>>> - >>>> - img { >>>> - height: 50px; >>>> - background-color: @white; >>>> - padding: 4px; >>>> - border-radius : 3px; >>>> - margin-left: 10px; >>>> - margin-right: 5px; >>>> - } >>>> - #logout { >>>> - background-color: @white; >>>> - color: @dark-color-theme !important; >>>> - border-radius: 2px; >>>> - :hover { >>>> - text-decoration: none; >>>> - } >>>> - } >>>> -} >>>> - >>>> -#user-details:after{ >>>> - content: ''; >>>> - position: absolute; >>>> - top: -10px; >>>> - right: 5px; >>>> - width: 0; >>>> - height: 0; >>>> - border-right: 10px solid transparent; >>>> - border-bottom: 10px solid @dark-color-theme; >>>> - border-left: 10px solid transparent; >>>> -} >>>> - >>>> -a.user-pref-btn { >>>> - margin-top: 15px; >>>> - background-color: @dark-color-theme; >>>> - margin-left: 10px; >>>> - margin-right: 10px; >>>> - padding-top: 2px; >>>> - padding-bottom: 2px; >>>> - display: flex; >>>> - justify-content: center; >>>> - color: @font-color-for-dark !important; >>>> - :hover { >>>> - text-decoration: none; >>>> - } >>>> -} >>>> - >>>> -#user-name { >>>> - display: flex; >>>> - flex-direction: column; >>>> - justify-content: center; >>>> - align-content: center; >>>> - padding-left : 5px; >>>> - padding-right : 5px; >>>> - span { >>>> - min-width: 100px; >>>> - padding-bottom : 5px; >>>> - padding-top : 5px; >>>> - } >>>> -} >>>> - >>>> -#user-row1 { >>>> - display: flex; >>>> - flex-direction: row; >>>> - justify-content: center; >>>> - #user-lang { >>>> - display: flex; >>>> - flex-direction: row; >>>> - justify-content: center; >>>> - align-content: center; >>>> - padding-left: 10px; >>>> - padding-right: 10px; >>>> - span { >>>> - min-width: 30px; >>>> - color: @font-color-for-dark; >>>> - } >>>> - } >>>> -} >>>> - >>>> -.appbar-btn-img { >>>> - height: @app-bar-height - 40px; >>>> -} >>>> - >>>> -#help-btn { >>>> - font-size: 10px; >>>> - min-width: 20px; >>>> - margin-right: 15px; >>>> -} >>>> -/* Begin sub Menu section */ >>>> - >>>> -#app-navigation { >>>> - height: @sub-app-bar-height; >>>> - border-right: solid 1px @black; >>>> - border-bottom: solid 1px @black; >>>> - width: 100%; >>>> - min-width: @min-container-width; >>>> - h2 { >>>> - display: none; >>>> - } >>>> - ul { >>>> - display: flex; >>>> - flex-direction: row; >>>> - background-color: @grey; >>>> - flex-grow: 1; >>>> - } >>>> - ul li ul li { >>>> - border-left: solid 1px @black; >>>> - height: @sub-app-bar-height; >>>> - display: flex; >>>> - align-items: center; >>>> - justify-items: center; >>>> - justify-content: center; >>>> - min-width: 75px; >>>> - padding-left: 6px; >>>> - padding-right: 6px; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - border-bottom: solid 1px @black; >>>> - font-size: 12px; >>>> - @media screen and (max-width: 1500px) { >>>> - font-size: 10px; >>>> - min-width: 65px; >>>> - } >>>> - @media screen and (max-width: 1300px) { >>>> - font-size: 10px; >>>> - min-width: 50px; >>>> - } >>>> - a { >>>> - display: flex; >>>> - justify-content: center; >>>> - align-items: center; >>>> - text-align: center; >>>> - height: 100%; >>>> - width: 100%; >>>> - text-decoration: none; >>>> - } >>>> - } >>>> -} >>>> - >>>> -#app-navigation ul li ul li:last-child { >>>> - border-right: solid 1px @black; >>>> -} >>>> - >>>> -#app-navigation ul li ul li:hover { >>>> - background-color: @main-color-theme; >>>> - min-height: @sub-app-bar-height; >>>> - position: relative; >>>> - //top: -1px; >>>> - a { >>>> - color: @white; >>>> - text-decoration: none; >>>> - } >>>> -} >>>> -#app-navigation ul li ul li.selected:hover { >>>> - a { >>>> - color: @black !important; >>>> - } >>>> -} >>>> - >>>> -#app-navigation ul li ul li.selected { >>>> - background-color: @white; >>>> - position: relative; >>>> - top: 1px; >>>> - height: @sub-app-bar-height + 1px; >>>> - border-top-right-radius: 2px; >>>> - border-top-left-radius: 2px; >>>> - border-bottom: none; >>>> - >>>> - :after { >>>> - content: ''; >>>> - position: absolute; >>>> - top: -2px; >>>> - left: 5px; >>>> - width: 0; >>>> - height: 0; >>>> - border-right: 10px solid transparent; >>>> - border-top: 10px solid @main-color-theme; >>>> - border-left: 10px solid transparent; >>>> - } >>>> - >>>> -} >>>> - >>>> - >>>> -/* End sub Menu section */ >>>> - >>>> -/* begin sub Menu section 3rd level */ >>>> - >>>> -.button-bar.tab-bar { >>>> - ul li ul li { >>>> - border: solid 1px @grey; >>>> - border-radius: 4px; >>>> - a { >>>> - width: 100%; >>>> - height: 100%; >>>> - } >>>> - } >>>> - li.selected{ >>>> - background-color: @main-color-theme; >>>> - a{ >>>> - color: @font-color-for-main; >>>> - } >>>> - } >>>> - ul li ul li:hover { >>>> - background-color: @main-color-theme; >>>> - a { >>>> - color: @font-color-for-main ; >>>> - } >>>> - } >>>> -} >>>> - >>>> -#third-level-menu-container { >>>> - display: flex; >>>> - flex-direction: row; >>>> -} >>>> -#working-area { >>>> - width: 100%; >>>> -} >>>> - >>>> -#left-column-menu { >>>> - width: 100px; >>>> -} >>>> - >>>> -.third-lvl-menu { >>>> - background-color: @dark-color-theme; >>>> - position: relative; >>>> - left: -10px; >>>> - border-top-right-radius: 4px; >>>> - border-bottom-right-radius: 4px; >>>> - padding-top: 4px; >>>> - padding-bottom: 4px; >>>> - ul { >>>> - li { >>>> - ul { >>>> - position: relative; >>>> - top: 5px; >>>> - width: @third-lvl-width; >>>> - } >>>> - } >>>> - } >>>> - h2 { >>>> - visibility: hidden; >>>> - } >>>> -} >>>> -.third-level-item:last-child { >>>> - border-bottom: solid 1px @main-color-theme; >>>> -} >>>> - >>>> -.third-level-item { >>>> - min-height: @third-lvl-height; >>>> - background-color: @dark-color-theme; >>>> - padding-right: 3px; >>>> - border-top: solid 1px @main-color-theme; >>>> - >>>> - a, a:visited { >>>> - display: flex; >>>> - justify-content: center; >>>> - align-items: center; >>>> - width: 100%; >>>> - color: @font-color-for-dark !important; >>>> - min-height: @third-lvl-height; >>>> - max-width: @third-lvl-width; >>>> - text-align: center; >>>> - } >>>> -} >>>> -.third-level-item.selected { >>>> - position: relative; >>>> - border-left: solid 9px @main-color-theme; >>>> - a, a:visited { >>>> - background-color: @white; >>>> - color: @dark-color-theme !important; >>>> - } >>>> - :after { >>>> - content: ''; >>>> - position: absolute; >>>> - top: 5px; >>>> - left: 0; >>>> - width: 0; >>>> - height: 0; >>>> - border-top: 10px solid transparent; >>>> - border-left: 10px solid @main-color-theme; >>>> - border-bottom: 10px solid transparent; >>>> - } >>>> -} >>>> - >>>> -.third-level-item a:hover { >>>> - background-color: @main-color-theme; >>>> - color: @font-color-for-main ; >>>> - text-decoration: none; >>>> -} >>>> -/* End 3rd level menu */ >>>> - >>>> - >>>> - >>>> -/* Begin Home Menu for IB section */ >>>> -.fixed-nav-bar { >>>> - position: fixed !important; >>>> - width: 100%; >>>> -} >>>> -#nav-bar-offset { >>>> - height: @app-bar-height ; >>>> -} >>>> - >>>> -#homeGlyph { >>>> - margin-left: 20px; >>>> - height: 20px; >>>> -} >>>> - >>>> -#homePageTitle { >>>> - color: @white; >>>> - font-size: 20px; >>>> - font-weight: bold; >>>> - margin-right: 20px; >>>> - margin-left: 20px; >>>> -} >>>> -.home-menu-list { >>>> - display: flex; >>>> - flex-direction: column; >>>> - align-items: center; >>>> -} >>>> -.hp-applist { >>>> - display: flex; >>>> - flex-direction: row; >>>> - color : @white; >>>> - align-items: center; >>>> - .app-title { >>>> - display: flex; >>>> - align-items: center; >>>> - justify-content: center; >>>> - background-color: @dark-color-theme; >>>> - height: @home-menu-tile-height; >>>> - padding: 5px 10px 5px 10px; >>>> - border-bottom: solid 1px @black; >>>> - span { >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>>> !important; >>>> - font-size: 15px; >>>> - font-weight: bold; >>>> - width: 110px; >>>> - a { >>>> - display: flex; >>>> - justify-content: center; >>>> - color : @white; >>>> - } >>>> - } >>>> - } >>>> - >>>> - .hp-menu-item { >>>> - display: flex; >>>> - align-items: center; >>>> - justify-content: center; >>>> - position: relative; >>>> - margin-left: 5px; >>>> - margin-right: 5px; >>>> - border: solid 2px @grey; >>>> - border-radius: 8px; >>>> - height: @home-menu-tile-height - 4px; >>>> - min-width: @home-menu-tile-min-width; >>>> - max-width: @home-menu-tile-max-width; >>>> - .menu-link { >>>> - font-size: 10px; >>>> - color: @black; >>>> - padding: 10px; >>>> - } >>>> - .star-link { >>>> - position: absolute; >>>> - height: 25px; >>>> - top: 5px; >>>> - right: 5px; >>>> - } >>>> - } >>>> - >>>> -} >>>> -.hp-applist .app-title span a:hover { >>>> - text-decoration: none; >>>> -} >>>> - >>>> -.hp-menu-item.favoriteItem { >>>> - border: solid 2px @dark-color-theme; >>>> -} >>>> - >>>> -.hp-menu-item:hover { >>>> - box-shadow: 3px 3px 12px @shadow-color; >>>> - a { >>>> - text-decoration: none; >>>> - } >>>> -} >>>> - >>>> -/* End Home Menu for IB section */ >>>> - >>>> -/* Begin Login screenlet */ >>>> -#login-container { >>>> - #content-messages { >>>> - position: relative; >>>> - top: @app-bar-height; >>>> - border-radius: 4px; >>>> - width: 97%; >>>> - &.errorMessage { >>>> - background-color : @color-background-alert !important; >>>> - color: @color-font-alert !important; >>>> - border : solid 1px @color-border-alert !important; >>>> - } >>>> - &.eventMessage { >>>> - background-color : @color-background-success !important; >>>> - color: @color-font-success !important; >>>> - border : solid 1px @color-border-success !important; >>>> - } >>>> - } >>>> -} >>>> -#loginBar { >>>> - position: fixed; >>>> - top:0; >>>> - left: 0; >>>> - width: 100%; >>>> - height: @app-bar-height; >>>> - background-color: @dark-color-theme; >>>> - span { >>>> - background-color: @white; >>>> - color: @main-color-theme; >>>> - border-top-right-radius: 5px; >>>> - border-top-left-radius: 5px; >>>> - font-size: 25px; >>>> - position: relative; >>>> - top: @app-bar-height - 32px; >>>> - left: 15px; >>>> - padding: 5px 10px 5px 10px; >>>> - } >>>> - #company-logo { >>>> - position: absolute; >>>> - } >>>> -} >>>> - >>>> -.login-screenlet { >>>> - display: flex; >>>> - flex-direction: column; >>>> - min-width: 300px; >>>> - max-width: 50em; >>>> - border-radius: 8px !important; >>>> - margin-top: 15%; >>>> - box-shadow: 3px 3px 12px @shadow-color; >>>> - .screenlet-title-bar { >>>> - display: flex; >>>> - align-content: center; >>>> - justify-content: center; >>>> - margin:0; >>>> - padding:0; >>>> - h3{ >>>> - padding-top:2px; >>>> - padding-bottom:2px; >>>> - background-color: @dark-color-theme !important; >>>> - color: @font-color-for-dark; >>>> - height: 100%; >>>> - width:100%; >>>> - text-shadow: none; >>>> - font-size: 25px; >>>> - } >>>> - } >>>> - .screenlet-body { >>>> - background-color: @main-color-theme !important; >>>> - form { >>>> - .button { >>>> - width: 150px; >>>> - border-radius: 4px; >>>> - background: none; >>>> - background-color: @dark-color-theme; >>>> - color: @font-color-for-dark; >>>> - text-shadow: none; >>>> - margin-top: 20px; >>>> - margin-bottom: 10px; >>>> - } >>>> - >>>> - table { >>>> - tr { >>>> - width: 100%; >>>> - .label { >>>> - color: @font-color-for-main; >>>> - width: 25%; >>>> - font-size: 15px; >>>> - } >>>> - input { >>>> - width: 100%; >>>> - } >>>> - .buttontext, >>>> - [type="submit"] { >>>> - width: 150px; >>>> - border-radius: 4px; >>>> - background: none; >>>> - background-color: @dark-color-theme; >>>> - color: @font-color-for-dark; >>>> - text-shadow: none; >>>> - } >>>> - [name="GET_PASSWORD_HINT"] { >>>> - background-color: @font-color-for-dark; >>>> - color: @main-color-theme; >>>> - border: none; >>>> - width: 100%; >>>> - } >>>> - [name="EMAIL_PASSWORD"] { >>>> - background-color: @font-color-for-dark; >>>> - color: @main-color-theme; >>>> - border: none; >>>> - width: 100%; >>>> - } >>>> - td { >>>> - padding: 5px; >>>> - color: @font-color-for-main; >>>> - font-size: 15px; >>>> - font-weight: bold; >>>> - } >>>> - } >>>> - } >>>> - } >>>> - a { >>>> - color: @font-color-for-main; >>>> - } >>>> - } >>>> -} >>>> - >>>> -.login-screenlet .screenlet-title-bar { >>>> - text-align: center; >>>> -} >>>> - >>>> -/* End Login screenlet */ >>>> - >>>> - >>>> -/* --------------------------------------------- */ >>>> -/* Begin Screenlet style */ >>>> -/* --------------------------------------------- */ >>>> -.screenlet-title-bar { >>>> - text-decoration: none ; >>>> - color: @dark-color-theme; >>>> - background-color: @grey; >>>> - height: 1%; /* IE fix */ >>>> - min-height: 1.5em; >>>> - padding:0.8em 0.2em; >>>> -} >>>> - >>>> -.screenlet { >>>> - border-radius: 5px; >>>> - border: solid 1px @grey; >>>> - height: auto !important; >>>> - margin-bottom: 1em; >>>> - overflow: auto; >>>> -} >>>> - >>>> -.screenlet-body { >>>> - background-color: #FFFFFF; >>>> - height: auto !important; >>>> - height: 1%; >>>> - padding: 0.4em; >>>> -} >>>> - >>>> -.screenlet-body div { >>>> - margin: 0.8em 0.1em >>>> -} >>>> - >>>> -/* Special Screenlet style for locale and timezone window */ >>>> -.lists.screenlet { >>>> - margin-left: 25%; >>>> - margin-right: 25%; >>>> - margin-top: 1em; >>>> -} >>>> - >>>> -.lists.screenlet .basic-table tr td { >>>> - text-align: center; >>>> -} >>>> - >>>> -.lists.screenlet .basic-table tr td a { >>>> - display: block; >>>> -} >>>> - >>>> -/* Alternate table header style */ >>>> -.basic-table .header-row-2 th, >>>> -.basic-table .header-row-2 td { >>>> - background-color: @greydark; >>>> - border-bottom: 0; >>>> - border-left: 0.1em solid #aaa; >>>> - border-right: 0.1em solid #888; >>>> - color: #ffffff; >>>> - font-weight: bold; >>>> -} >>>> - >>>> -/* No padding screenlet decorator */ >>>> -.no-padding { >>>> - padding: 0; >>>> - border: none; >>>> -} >>>> - >>>> -.no-padding .h1, >>>> -.no-padding .h2, >>>> -.no-padding .h3, >>>> -.no-paddingr h1, >>>> -.no-padding h2, >>>> -.no-padding h3 { >>>> - padding: 0.7em; >>>> -} >>>> - >>>> -.screenlet-title-bar ul a:hover { >>>> - color: @main-color-theme !important; >>>> - text-decoration: none; >>>> -} >>>> - >>>> - >>>> -/* --------------------------------------------- */ >>>> -/* End Screenlet style */ >>>> -/* --------------------------------------------- */ >>>> - >>>> -/* ---------------------- */ >>>> -/* Table Styles */ >>>> -/* ---------------------- */ >>>> - >>>> -.basic-table { >>>> - background-color: #ffffff; >>>> - color: #000000; >>>> - margin-bottom: 1em; >>>> - width: 100%; >>>> -} >>>> - >>>> -form table, >>>> -form .basic-table, >>>> -.screenlet-body .basic-table { >>>> - background: transparent; >>>> - margin-bottom: 0; >>>> -} >>>> - >>>> -.basic-table tr td { >>>> - /* Style for all cells */ >>>> - padding: 0.8em 0.1em; >>>> - vertical-align: middle; >>>> -} >>>> - >>>> -.basic-table tr .align-bottom { >>>> - vertical-align: bottom; >>>> -} >>>> - >>>> -.basic-table tr .align-top { >>>> - vertical-align: top; >>>> -} >>>> - >>>> -.basic-table tr .label, >>>> -.basic-table tr .group-label { >>>> - /* field labels for forms */ >>>> - font-weight: bold; >>>> - text-align: right; >>>> - padding-right: 1.5em; >>>> - white-space: nowrap; >>>> - width: 1%; >>>> -} >>>> - >>>> -.basic-table tr .group-label { >>>> - /* "header" for field label groups */ >>>> - font-size: 1.2em; >>>> - padding: 2em 1.5em 0 0; >>>> -} >>>> - >>>> -.basic-table tr th, >>>> -.basic-table .header-row { >>>> - font-weight: bold; >>>> - text-align: left; >>>> -} >>>> - >>>> -.basic-table .header-row td { >>>> - border-bottom: 0.1em solid #000000; >>>> -} >>>> - >>>> -.basic-table .header-row td a { >>>> - color: #000000; >>>> -} >>>> - >>>> -.basic-table .alternate-row { >>>> - /* Alternating row style */ >>>> - background-color: #eeeeee; >>>> -} >>>> - >>>> -.basic-table .selected { >>>> - background: #FFFCCF; >>>> -} >>>> - >>>> -.basic-table .alternate-rowSelected { >>>> - background: #FFF55F; >>>> -} >>>> - >>>> -.basic-table .Validate { >>>> - /*Style use by alt-row-style on list*/ >>>> - background: #A0D5F7; >>>> -} >>>> - >>>> -.basic-table .alternate-rowValidate { >>>> - /*Style use by alt-row-style on list*/ >>>> - background: #72A8F2; >>>> -} >>>> - >>>> -.basic-table .Warn { >>>> - /*Style use by alt-row-style on list*/ >>>> - background: #f55C5C; >>>> -} >>>> - >>>> -.basic-table .alternate-rowWarn { >>>> - /*Style use by alt-row-style on list*/ >>>> - background: #FC7455; >>>> -} >>>> - >>>> -.basic-table tr .button-col { >>>> - /* button column style - for the small >>>> - collection of buttons used in lists */ >>>> - vertical-align: top; >>>> - padding: 0.3em; >>>> -} >>>> -.basic-table tr .button-col a, >>>> -.basic-table tr .button-col button, >>>> -.basic-table tr .button-col input[type="reset"], >>>> -.basic-table tr .button-col input[type="submit"], >>>> -.basic-table tr .button-col input[type="button"] { >>>> - -webkit-appearance: none; >>>> - -moz-border-radius: 1em; >>>> - -webkit-border-radius: 1em; >>>> - border-radius: 2px; >>>> - border: 0.1em solid @main-color-theme; >>>> - background-color: @white; >>>> - cursor: pointer; >>>> - color: @main-color-theme; >>>> - display:inline-block; >>>> - font-size: 0.9em; >>>> - font-weight: bold; >>>> - outline: 0; >>>> - overflow: visible; >>>> - padding: 0.1em 0.5em 0.2em 0.5em; >>>> - text-decoration: none; >>>> - width: auto; >>>> - >>>> - /* IE7 */ >>>> - *padding-top: 0.2em; >>>> - *padding-bottom: 0; >>>> - >>>> - &:hover { >>>> - background-color: @main-color-theme; >>>> - color: @white; >>>> - } >>>> -} >>>> - >>>> -.basic-table .collapsed { >>>> - visibility: collapse; >>>> -} >>>> - >>>> -/* Sort field style */ >>>> -.basic-table .header-row-2 th .sort-order-asc, >>>> -.basic-table .header-row-2 td .sort-order-asc{ >>>> - background: url(/images/arrow-gr-up.png) no-repeat right; >>>> - padding-left: 0.5em; >>>> - padding-right: 20px; /* Setting must be in px */ >>>> -} >>>> -.basic-table .header-row-2 th .sort-order-desc, >>>> -.basic-table .header-row-2 td .sort-order-desc{ >>>> - background: url(/images/arrow-gr-dw.png) no-repeat right; >>>> - padding-left: 0.5em; >>>> - padding-right: 20px; /* Setting must be in px */ >>>> -} >>>> -.basic-table .header-row-2 th .sort-order, >>>> -.basic-table .header-row-2 td .sort-order{ >>>> - background: url(/images/arrow-gr.png) no-repeat right; >>>> - padding-left: 0.5em; >>>> - padding-right: 20px; /* Setting must be in px */ >>>> - color:#fff >>>> -} >>>> - >>>> - >>>> -/* --------------------------------------------- */ >>>> -/* Begin Message Info */ >>>> -/* --------------------------------------------- */ >>>> -.count-message { >>>> - display: flex; >>>> - align-items: center; >>>> - justify-content: center; >>>> - min-height:20px; >>>> - min-width: 20px; >>>> - max-height:20px; >>>> - max-width: 20px; >>>> - background: @white; >>>> - font-size:12px; >>>> - font-weight: bold; >>>> - border-radius: 50%; >>>> -} >>>> -.info-message-title { >>>> - min-width:150px; >>>> - margin: 5px; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - font-size: 16px; >>>> - font-weight: bold; >>>> -} >>>> -.message-list { >>>> - position:relative; >>>> - margin-top: 10px; >>>> - box-shadow: 1px 3px 5px @greydark; >>>> - border-radius: 0 5px 5px 0; >>>> - transition: height 2s; >>>> -} >>>> -.message-list-main { >>>> - padding: 5px 15px 5px 15px; >>>> -} >>>> -.message-list-alert { >>>> - background-color: @color-alert; >>>> - border-left : solid 5px @color-alert-dark; >>>> - .count-message { >>>> - color: @color-alert-dark; >>>> - } >>>> -} >>>> -.message-list-success { >>>> - background-color: @color-success; >>>> - border-left: solid 5px @color-success-dark; >>>> - .count-message { >>>> - color: @color-success-dark; >>>> - } >>>> -} >>>> -.message-list-table-container { >>>> - background-color: @white; >>>> - border-radius: 5px; >>>> - overflow: hidden; >>>> - height: 0; >>>> -} >>>> -.info-message-success { >>>> - display: none; >>>> -} >>>> -.info-message-alert { >>>> - display: none; >>>> -} >>>> -table.msg-list { >>>> - width: 100%; >>>> - font-size: 16px; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - padding: 0; >>>> - thead { >>>> - height: 100%; >>>> - background-color: @grey; >>>> - margin: 0; >>>> - padding: 0; >>>> - tr{ >>>> - font-weight: bold; >>>> - border-bottom: solid 1px @black; >>>> - height: 100%; >>>> - background-color: @grey; >>>> - line-height: 30px; >>>> - } >>>> - } >>>> - tbody { >>>> - tr { >>>> - line-height: 25px; >>>> - } >>>> - tr.msg-row-success { >>>> - background-color: @color-success; >>>> - } >>>> - tr.msg-row-alert { >>>> - background-color: @color-alert; >>>> - } >>>> - } >>>> - td { >>>> - padding-left: 5px; >>>> - } >>>> -} >>>> - >>>> -/* --------------------------------------------- */ >>>> -/* End Message Info */ >>>> -/* --------------------------------------------- */ >>>> - >>>> -/* ---------------------- */ >>>> -/* Paginate Style */ >>>> -/* ---------------------- */ >>>> - >>>> -.paginate-bar-nrd { >>>> - display: flex; >>>> - flex-direction: row; >>>> - align-items: center; >>>> - font-size: 15px; >>>> - background-color: @grey; >>>> - padding-left: 10px; >>>> - padding-top: 3px; >>>> - padding-bottom: 3px; >>>> - box-shadow: 0 2px 5px @shadow-color; >>>> - >>>> - ul.paginate-pg-list { >>>> - display: flex; >>>> - flex-direction: row; >>>> - background-color: @white; >>>> - color: @main-color-theme; >>>> - margin-right: 10px; >>>> - border-radius: 8px; >>>> - border: solid 1px @box-border-color; >>>> - height: 18px; >>>> - li { >>>> - display: flex; >>>> - justify-content: center; >>>> - min-width: 17px; >>>> - border-right: solid 1px @box-border-color; >>>> - padding-left: 2px; >>>> - padding-right: 2px; >>>> - height:100%; >>>> - a { >>>> - display: flex; >>>> - justify-content: center; >>>> - align-items: center; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - color: @dark-color-theme; >>>> - height: 100%; >>>> - width: 100%; >>>> - } >>>> - .paginate-disable { >>>> - >>>> - } >>>> - } >>>> - li.selected { >>>> - background-color: @main-color-theme; >>>> - a { >>>> - color: @font-color-for-main; >>>> - } >>>> - } >>>> - li:first-child, li:last-child { >>>> - width: 20px; >>>> - } >>>> - li:first-child { >>>> - border-top-left-radius: 3px; >>>> - border-bottom-left-radius: 3px; >>>> - } >>>> - li:last-child { >>>> - border-right: none; >>>> - border-top-right-radius: 3px; >>>> - border-bottom-right-radius: 3px; >>>> - } >>>> - } >>>> - >>>> -} >>>> -select.paginate-select { >>>> - position: relative; >>>> - background: @white; >>>> - font-size: 16px; >>>> - font-weight: bold; >>>> - border: 1px solid @box-border-color; >>>> - option { >>>> - display: flex; >>>> - justify-self: center; >>>> - font-size: 14px; >>>> - } >>>> -} >>>> - >>>> -.paginate-select-label { >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - font-size: 16px; >>>> - padding-left: 15px; >>>> - padding-right: 15px; >>>> -} >>>> - >>>> -.paginate-information { >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - font-size: 16px; >>>> - padding-left: 15px; >>>> - padding-right: 15px; >>>> -} >>>> - >>>> -ul.paginate-pg-list li:hover{ >>>> - background-color: @main-color-theme; >>>> - a { >>>> - text-decoration: none; >>>> - color: @font-color-for-main; >>>> - } >>>> -} >>>> - >>>> -/* End of Paginate Style */ >>>> -/* ---------------------- */ >>>> - >>>> -/* ------------------------------- */ >>>> -/* List Navigation Style */ >>>> -/* ------------------------------- */ >>>> - >>>> -.nav-pager { >>>> - background-color: @greydark; >>>> - color: @white; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> - font-size: 9px; >>>> - font-weight: bold; >>>> - line-height: 3.5em; >>>> - height: 3.5em; >>>> - margin: 0.5em 0 0.5em 0; >>>> - border-radius: 3px 3px 0 0; >>>> -} >>>> - >>>> -.nav-pager ul { >>>> - display: inline; /* IE Fix */ >>>> -} >>>> - >>>> -.nav-pager ul li { >>>> - float:left; >>>> - vertical-align: middle; >>>> -} >>>> - >>>> -.nav-pager ul li a { >>>> - display: block; >>>> -} >>>> - >>>> -.nav-pager ul a { >>>> - color: @white; >>>> - padding: 0 1em 0 1em; >>>> - text-decoration: none; >>>> -} >>>> - >>>> -.nav-pager ul a:hover { >>>> - background-color: @main-color-theme; >>>> - color: @font-color-for-main; >>>> -} >>>> - >>>> -.nav-pager ul .nav-pagesize, >>>> -.nav-pager ul .nav-page-select, >>>> -.nav-pager ul .nav-displaying { >>>> - padding: 0 1em 0 1em; >>>> -} >>>> - >>>> -.nav-pager ul .nav-first-disabled, >>>> -.nav-pager ul .nav-previous-disabled, >>>> -.nav-pager ul .nav-next-disabled, >>>> -.nav-pager ul .nav-last-disabled { >>>> - padding: 0 1em 0 1em; >>>> -} >>>> - >>>> -.nav-pager ul .nav-first-disabled:hover, >>>> -.nav-pager ul .nav-previous-disabled:hover, >>>> -.nav-pager ul .nav-next-disabled:hover, >>>> -.nav-pager ul .nav-last-disabled:hover { >>>> - cursor: not-allowed; >>>> -} >>>> - >>>> - >>>> -.nav-pager ul .nav-displaying { >>>> - border-right: none; >>>> -} >>>> - >>>> - >>>> -/* ---------------------------- */ >>>> -/* Multi-Column Styles */ >>>> -/* ---------------------------- */ >>>> - >>>> -#column-container { >>>> - margin: auto; >>>> - padding: 1em; >>>> - position: relative; >>>> - min-width: @min-container-width; >>>> -} >>>> - >>>> -#column-container h1, >>>> -#column-container .h1, >>>> -#column-container h2, >>>> -#column-container .h2 { >>>> - margin-bottom: 0.5em; >>>> -} >>>> - >>>> -#column-container h1, >>>> -#column-container .h1 { >>>> - color: #557996; >>>> -} >>>> - >>>> -#column-container .left { >>>> - float: left; >>>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>>> - width: 22em; >>>> - margin-right: 1em; >>>> -} >>>> - >>>> -#column-container .left-larger { >>>> - float: left; >>>> - /* alt: position: absolute; top: 0px; left: 0px; */ >>>> - width: 25em; >>>> - margin-right: 1em; >>>> -} >>>> - >>>> -.lefthalf { >>>> - float: left; >>>> - height: 1%; >>>> - left: 0; >>>> - margin: 0% 1% 1% 0%; >>>> - width: 49%; >>>> -} >>>> - >>>> -.righthalf { >>>> - float: right; >>>> - height: 1%; >>>> - margin: 0 0 1% 1%; >>>> - right: 0; >>>> - width: 49%; >>>> -} >>>> - >>>> -#column-container .right { >>>> - float: right; >>>> - margin-left: 1em; >>>> - width: 22em; >>>> -} >>>> - >>>> -#column-container .leftonly { >>>> - margin-left: 23em; >>>> - width: auto; >>>> -} >>>> - >>>> -#column-container .leftonly-larger { >>>> - margin-left: 26em; >>>> - width: auto; >>>> -} >>>> - >>>> -#column-container .rightonly { >>>> - margin-right: 23em; >>>> - width: auto; >>>> -} >>>> - >>>> -#column-container .center { >>>> - margin-left: 23em; >>>> - margin-right: 23em; >>>> - width: auto; >>>> -} >>>> - >>>> -#column-container .nocolumns { >>>> - width: auto; >>>> -} >>>> - >>>> -/* ---------------------- */ >>>> -/* Button Style */ >>>> -/* ---------------------- */ >>>> - >>>> -.button-bar li.buttontext a, >>>> -a.buttontext, >>>> -a.buttontextbig, >>>> -.smallSubmit, >>>> -.smallSubmit:hover, >>>> -.mediumSubmit, >>>> -.largeSubmit, >>>> -.loginButton, >>>> -.button-style-1 a, >>>> -.button-style-1 ul a, >>>> -.button-style-2 ul a, >>>> -.button-style-2 a, >>>> -.button, >>>> -button, >>>> -input[type="reset"], >>>> -input[type="submit"], >>>> -input[type="button"] { >>>> - -webkit-appearance: none; >>>> - -moz-border-radius: 1.1em; >>>> - -webkit-border-radius: 1.1em; >>>> - border-radius: 2px; >>>> - border: 0.1em solid @main-color-theme; >>>> - background-color: @white; >>>> - cursor: pointer; >>>> - color: @main-color-theme; >>>> - display:inline-block; >>>> - font-size: 1em; >>>> - font-weight: bold; >>>> - outline: 0; >>>> - overflow: visible; >>>> - padding: 0.4em 1em 0.4em; >>>> - text-decoration:none; >>>> - /*text-transform:uppercase;*/ >>>> - width: auto; >>>> - >>>> - /* IE7 */ >>>> - *padding-top: 0.2em; >>>> - *padding-bottom: 0; >>>> - &:hover { >>>> - color: @font-color-for-main; >>>> - background-color: @main-color-theme; >>>> - } >>>> -} >>>> - >>>> - >>>> -/* ---------------------- */ >>>> -/* Footer Style */ >>>> -/* ---------------------- */ >>>> - >>>> -#footer { >>>> - background: @dark-color-theme; >>>> - border-top: 0.1em inset #000; >>>> - padding: 0.5em 0 0.5em 0.5em; >>>> - >>>> - height: @footer-height; >>>> - position: fixed; >>>> - bottom: 0; >>>> - width: 100%; >>>> - display: flex; >>>> - flex-direction: row; >>>> - align-items: center; >>>> - justify-content: space-between; >>>> - font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>>> !important; >>>> - z-index: 10; >>>> - >>>> - span { >>>> - color: @font-color-for-dark; >>>> - padding: 10px; >>>> - } >>>> - >>>> - a { >>>> - color: @font-color-for-dark; >>>> - font-weight: normal; >>>> - } >>>> -} >>>> - >>>> -#footer a:focus { >>>> - text-decoration: underline; >>>> -} >>>> - >>>> -#footer-offset { >>>> - height: @footer-height + 10px; >>>> - width: 100%; >>>> -} >>>> +/* common colors */ >>>> +@black: #000; >>>> +@white: #fff; >>>> +@grey: #e6e6e6; >>>> +@greydark: #929292; >>>> + >>>> +@color-success: #8cff8c; >>>> +@font-color-for-success: @black; >>>> +@color-alert: #ff8c8c; >>>> +@font-color-for-alert: @black; >>>> + >>>> +@color-success-dark: #356e35; >>>> +@font-color-for-success: @black; >>>> +@color-alert-dark: #932f33; >>>> +@font-color-for-alert: @black; >>>> + >>>> +@color-background-alert: #f2dede; >>>> +@color-font-alert: #a94442; >>>> +@color-border-alert: #ebccd1; >>>> + >>>> +@color-background-success: #dff0d8; >>>> +@color-font-success: #3c763d; >>>> +@color-border-success: #d6e9c6; >>>> + >>>> +/* Saphir colors */ >>>> +@blue-dark: #002333; >>>> +@blue-main: #005982; >>>> +@blue-medium: #c7dfff; >>>> +@blue-light: #f1f7ff; >>>> +@blue-light2: #e4f0f5; >>>> + >>>> +/* Ruby colors */ >>>> +@red-dark: #420000; >>>> +@red-main: #bf1616; >>>> +@red-medium: #f7baba; >>>> +@red-light: #fce7e7; >>>> +@red-light2: #fed7c9; >>>> + >>>> +/* Emerald colors */ >>>> +@green-dark: #197948; >>>> +@green-main: #23af9b; >>>> +@green-medium: #7ae3ad; >>>> +@green-light: #e5f9ef; >>>> +@green-light2: #d7f9ef; >>>> + >>>> +/* Amber colors */ >>>> +@amber-dark: #bc4216; >>>> +@amber-main: #f08906; >>>> +@amber-medium: #f5c4b3; >>>> +@amber-light: #fcede8; >>>> +@amber-light2: #fcedcd; >>>> + >>>> +/* Saphir theme */ >>>> +/* >>>> +@main-color-theme : @blue-main; >>>> +@dark-color-theme : @blue-dark; >>>> +@medium-color-theme : @blue-medium; >>>> +@light-color-theme : @blue-light; >>>> +@light2-color-theme : @blue-light2; >>>> +@font-color-for-dark : @grey; >>>> +@font-color-for-main : @white; >>>> +@font-color-for-medium : @dark-color-theme; >>>> +@font-color-for-light : @dark-color-theme; >>>> +@shadow-color : @black; >>>> +@shadow-color-light : @greydark; >>>> +*/ >>>> + >>>> +/* Ruby theme */ >>>> +/* >>>> +@main-color-theme : @red-main; >>>> +@dark-color-theme : @red-dark; >>>> +@medium-color-theme : @red-medium; >>>> +@light-color-theme : @red-light; >>>> +@light2-color-theme : @red-light2; >>>> +@font-color-for-dark : @grey; >>>> +@font-color-for-main : @white; >>>> +@font-color-for-medium : @dark-color-theme; >>>> +@font-color-for-light : @dark-color-theme; >>>> +@shadow-color : @black; >>>> +@shadow-color-light : @greydark; >>>> +/* >>>> + >>>> +/* Emerald theme */ >>>> +/* >>>> +@main-color-theme : @green-main; >>>> +@dark-color-theme : @green-dark; >>>> +@medium-color-theme : @green-medium; >>>> +@light-color-theme : @green-light; >>>> +@light2-color-theme : @green-light2; >>>> +@font-color-for-dark : @white; >>>> +@font-color-for-main : @white; >>>> +@font-color-for-medium : @dark-color-theme; >>>> +@font-color-for-light : @dark-color-theme; >>>> +@shadow-color : @black; >>>> +@shadow-color-light : @greydark; >>>> +*/ >>>> +/* Amber theme */ >>>> +@main-color-theme : @amber-main; >>>> +@dark-color-theme : @amber-dark; >>>> +@medium-color-theme : @amber-medium; >>>> +@light-color-theme : @amber-light; >>>> +@light2-color-theme : @amber-light2; >>>> +@font-color-for-dark : @white; >>>> +@font-color-for-main : @white; >>>> +@font-color-for-medium : @dark-color-theme; >>>> +@font-color-for-light : @dark-color-theme; >>>> +@shadow-color : @black; >>>> +@shadow-color-light : @greydark; >>>> + >>>> + >>>> +@app-bar-height: 60px; >>>> +@sub-app-bar-height: 40px; >>>> +@footer-height: 20px; >>>> +@home-btn-width: 47px; >>>> +@color-line-height: 9px; >>>> + >>>> +@home-menu-tile-height: 80px; >>>> +@home-menu-tile-min-width: 100px; >>>> +@home-menu-tile-max-width: 100px; >>>> + >>>> +@third-lvl-height: 80px; >>>> +@third-lvl-width : 100px; >>>> +@min-screen : 1170px; >>>> +@min-container-width: 1130px; >>>> + >>>> +@box-border-color: #d7d7d7; >>>> + >>>> +@font-face { >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + src: url('fonts/quicksand/quicksandbold.otf'); >>>> + font-weight: normal; >>>> + font-style: normal; >>>> +} >>>> + >>>> +@font-face { >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + src: url('fonts/quicksand/quicksandbold.otf'); >>>> + font-weight: bold; >>>> + font-style: normal; >>>> +} >>>> + >>>> +/* ---------------------------------- */ >>>> +/* Begin special checkbox type switch */ >>>> +/* ---------------------------------- */ >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-chkbox, >>>> [type="checkbox"]:checked.nrd-chkbox { >>>> + display: none; >>>> +} >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-chkbox + label, >>>> +[type="checkbox"]:checked.nrd-chkbox + label{ >>>> + cursor: pointer; >>>> +} >>>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:before, >>>> +[type="checkbox"]:checked.nrd-chkbox + label:before{ >>>> + content: ""; >>>> + width: 150px; >>>> + min-width: 150px; >>>> + background-color: @light-color-theme; >>>> + padding: 2px 20px 2px 20px; >>>> + border-radius: 8px 8px 8px 8px; >>>> + >>>> + cursor: pointer; >>>> +} >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-chkbox + label:after, >>>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>>> + content: ""; >>>> + position: relative; >>>> + left:-35px; >>>> + background-color: @dark-color-theme; >>>> + min-height: 10px; >>>> + min-width: 10px; >>>> + padding-left: 4px; >>>> + padding-right: 5px; >>>> + border-radius: 8px 8px 8px 8px; >>>> + transition: all .2s; >>>> +} >>>> + >>>> +[type="checkbox"]:checked.nrd-chkbox + label:after{ >>>> + position: relative; >>>> + left: -15px; >>>> + transition: all .2s; >>>> +} >>>> +/* ---------------------------------- */ >>>> +/* End special checkbox type switch */ >>>> +/* ---------------------------------- */ >>>> + >>>> +/* ---------------------------------- */ >>>> +/* Begin square Checkbox */ >>>> +/* ---------------------------------- */ >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox, >>>> +[type="checkbox"]:checked.nrd-square-chkbox{ >>>> + position: absolute; >>>> + left: -9999px; >>>> +} >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label, >>>> +[type="checkbox"]:checked.nrd-square-chkbox + label{ >>>> + content: ''; >>>> + padding-left: 35px; >>>> + position: relative; >>>> + cursor: pointer; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + font-size: 12px; >>>> + >>>> +} >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before, >>>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>>> + content: ''; >>>> + position: absolute; >>>> + left:10px; >>>> + top: -4px; >>>> + width: 17px; >>>> + height: 17px; /* dim. de la case */ >>>> + border: 1px solid #aaa; >>>> + background: @light-color-theme; >>>> + border-radius: 2px; >>>> +} >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before { >>>> + background: @light-color-theme; >>>> +} >>>> +[type="checkbox"]:checked.nrd-square-chkbox + label:before{ >>>> + background: @main-color-theme; >>>> +} >>>> + >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after, >>>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after{ >>>> + content: 'â'; >>>> + position: absolute; >>>> + top: -4px; >>>> + left: 14px; >>>> + font-size: 16px; >>>> + color: @font-color-for-main; >>>> + transition: all .2s; >>>> +} >>>> +[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after { >>>> + opacity: 0; >>>> + transform: scale(0); >>>> +} >>>> +[type="checkbox"]:checked.nrd-square-chkbox + label:after { >>>> + opacity: 1; >>>> + transform: scale(1); >>>> +} >>>> +/* ---------------------------------*/ >>>> +/* End square Checkbox */ >>>> +/* ---------------------------------*/ >>>> + >>>> +/* ---------------------------------*/ >>>> +/* Begin class content mgmt */ >>>> +/* ---------------------------------*/ >>>> + >>>> + >>>> +.flex-row { >>>> + display: flex; >>>> + flex-direction: row !important; >>>> +} >>>> +.flex-column { >>>> + display: flex; >>>> + flex-direction: column; >>>> +} >>>> + >>>> +.col-width-1 { >>>> + width: 10%; >>>> +} >>>> +.col-width-2 { >>>> + width: 20%; >>>> +} >>>> +.col-width-3 { >>>> + width: 30%; >>>> +} >>>> +.col-width-4 { >>>> + width: 40%; >>>> +} >>>> +.col-width-5 { >>>> + width: 50%; >>>> +} >>>> +.col-width-6 { >>>> + width: 60%; >>>> +} >>>> +.col-width-7 { >>>> + width: 70%; >>>> +} >>>> +.col-width-8 { >>>> + width: 80%; >>>> +} >>>> +.col-width-9 { >>>> + width: 90%; >>>> +} >>>> +.col-width-10 { >>>> + width: 100%; >>>> +} >>>> + >>>> +.align-v-center { >>>> + display:flex; >>>> + align-items: center; >>>> +} >>>> + >>>> +.align-h-center { >>>> + display:flex; >>>> + justify-content: center; >>>> +} >>>> + >>>> +/* ---------------------------------*/ >>>> +/* End class content mgmt */ >>>> +/* ---------------------------------*/ >>>> + >>>> + >>>> +/* ---------------------------------- */ >>>> +/* Begin btn-sort */ >>>> +/* ---------------------------------- */ >>>> + >>>> +.btn-sort { >>>> + position: relative; >>>> + top: -6px; >>>> + border:none; >>>> + background:none; >>>> + border-radius: 0; >>>> + margin-left:5px; >>>> +} >>>> + >>>> +.btn-sort:before{ >>>> + content: ''; >>>> + position: absolute; >>>> + left: -1px; >>>> + width: 0; >>>> + height: 0; >>>> + border-right: 10px solid transparent; >>>> + border-bottom: 10px solid @greydark; >>>> + border-left: 10px solid transparent; >>>> +} >>>> + >>>> +.btn-sort:after{ >>>> + content: ''; >>>> + position: absolute; >>>> + right: -1px; >>>> + width: 0; >>>> + height: 0; >>>> + border-right: 10px solid transparent; >>>> + border-top: 10px solid @greydark; >>>> + border-left: 10px solid transparent; >>>> + @media screen and (max-width: 1349px) { >>>> + right: -5px; >>>> + } >>>> +} >>>> + >>>> +.btn-sort.btn-sort-asc:before{ >>>> + border-bottom: 10px solid @main-color-theme; >>>> +} >>>> + >>>> +.btn-sort.btn-sort-desc:after{ >>>> + border-top: 10px solid @main-color-theme; >>>> +} >>>> + >>>> +/* ---------------------------------- */ >>>> +/* End btn-sort */ >>>> +/* ---------------------------------- */ >>>> + >>>> + >>>> +/* ---------------------------------- */ >>>> +/* Begin defaut colour class */ >>>> +/* ---------------------------------- */ >>>> + >>>> +.dark-color { >>>> + background-color: @dark-color-theme !important; >>>> + color: @font-color-for-dark !important; >>>> +} >>>> +.main-color { >>>> + background-color: @main-color-theme !important; >>>> + color: @font-color-for-main !important; >>>> +} >>>> +.medium-color { >>>> + background-color: @medium-color-theme !important; >>>> + color: @font-color-for-medium !important; >>>> +} >>>> +.light-color { >>>> + background-color: @light-color-theme !important; >>>> + color: @font-color-for-light !important; >>>> +} >>>> +.light2-color { >>>> + background-color: @light2-color-theme !important; >>>> + color: @font-color-for-light !important; >>>> +} >>>> + >>>> +.grey-color { >>>> + background-color: @grey !important; >>>> +} >>>> +.darkgrey-color { >>>> + background-color: @greydark !important; >>>> +} >>>> + >>>> +/* begin lookup widget */ >>>> +.ui-dialog { >>>> + opacity: 1; >>>> + z-index: 50; >>>> +} >>>> + >>>> +.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix >>>> { >>>> + background: none !important; >>>> + background-color: @dark-color-theme !important; >>>> + button { >>>> + background: none; >>>> + background-color: @light-color-theme; >>>> + } >>>> +} >>>> +/* end lookup widget */ >>>> + >>>> +.main-bar-label { >>>> + color: @light-color-theme; >>>> + padding-left: 3px; >>>> + padding-right: 6px; >>>> + font-size: 15px; >>>> + font-weight: bold; >>>> +} >>>> + >>>> +#company-logo { >>>> + right: 10px; >>>> + top: 2px; >>>> + background: url("images/ofbiz-simple-white.svg") no-repeat left >>>> top / cover; >>>> + min-height: 50px; >>>> + min-width: 50px; >>>> + margin-right: 15px; >>>> + align-self: center; >>>> + @media screen and (min-width : 1232px) { >>>> + min-height: 50px; >>>> + min-width: 129px; >>>> + background: url("images/ofbiz-white.svg") no-repeat left top / >>>> cover; >>>> + } >>>> +} >>>> + >>>> +.modal-screen { >>>> + visibility: hidden; >>>> + display: flex; >>>> + flex-direction: column; >>>> + background-color: @grey; >>>> + opacity: .93; >>>> + position: fixed; >>>> + top: 0; >>>> + left: 0; >>>> + height: 100%; >>>> + width: 100%; >>>> + z-index: 9999; >>>> +} >>>> + >>>> +.modal-box{ >>>> + background-color: @white; >>>> + opacity: 1; >>>> + margin: 10%; >>>> + border-radius: 10px; >>>> + border: solid 2px @main-color-theme; >>>> + padding : 10px 40px 10px 40px; >>>> + .modal-header { >>>> + position: relative; >>>> + display: flex; >>>> + flex-direction: row; >>>> + h2 { >>>> + font-size: 25px; >>>> + font-weight: normal; >>>> + color: @main-color-theme; >>>> + } >>>> + .btn-close-nrd { >>>> + position: absolute; >>>> + right: 0; >>>> + display: flex; >>>> + justify-content: center; >>>> + border: solid 1px @main-color-theme; >>>> + border-radius: 5px; >>>> + color: @main-color-theme; >>>> + font-size: 25px; >>>> + height: 30px; >>>> + width: 30px; >>>> + text-decoration: none !important; >>>> + } >>>> + } >>>> + .modal-body { >>>> + p { >>>> + font-size: 20px; >>>> + } >>>> + } >>>> + .modal-footer { >>>> + position: relative; >>>> + height: 35px; >>>> + display: flex; >>>> + justify-content: flex-end; >>>> + .btn-nrd { >>>> + background: none; >>>> + border: none; >>>> + text-shadow: none; >>>> + opacity: 1; >>>> + margin-right: 10px; >>>> + font-size: 20px; >>>> + padding: 5px; >>>> + border-radius: 8px; >>>> + } >>>> + .btn-nrd-main { >>>> + background-color: @main-color-theme; >>>> + color: @white; >>>> + } >>>> + .btn-nrd-std { >>>> + background-color: @white; >>>> + color: @main-color-theme; >>>> + border: solid 1px @main-color-theme !important; >>>> + } >>>> + } >>>> +} >>>> +.btn-nrd:hover { >>>> + box-shadow: 5px 5px 3px 0 @black; >>>> +} >>>> + >>>> +.btn-nrd-std:hover { >>>> + background-color: @main-color-theme !important; >>>> + color: @white !important; >>>> + border: solid 1px @main-color-theme !important; >>>> +} >>>> + >>>> +.btn-close-nrd:hover { >>>> + background-color: @main-color-theme !important; >>>> + color: @white !important; >>>> +} >>>> + >>>> +.list-nrd { >>>> + border: solid 2px @main-color-theme; >>>> + border-bottom-left-radius: 10px; >>>> + border-bottom-right-radius: 10px; >>>> + display: flex; >>>> + flex-direction: column; >>>> + margin-top: 15px; >>>> + margin-bottom: 15px; >>>> + .title-list-nrd { >>>> + background-color: @main-color-theme; >>>> + color : @white; >>>> + font-size: 20px; >>>> + font-weight: bold; >>>> + padding-left: 5px; >>>> + } >>>> + >>>> + li { >>>> + position: relative; >>>> + display: flex; >>>> + flex-direction: row; >>>> + font-size: 20px; >>>> + padding-left: 5px; >>>> + padding-top: 2px; >>>> + padding-bottom: 2px; >>>> + margin-bottom: 3px; >>>> + a { >>>> + color: @main-color-theme; >>>> + } >>>> + span { >>>> + position: absolute; >>>> + right: 0; >>>> + color: @main-color-theme; >>>> + font-size: 30px; >>>> + } >>>> + } >>>> +} >>>> +li.line-odd { >>>> + background-color: @light-color-theme; >>>> +} >>>> + >>>> +#user-avatar { >>>> + height: 40px; >>>> + width: 40px; >>>> + padding: 2px; >>>> + >>>> + align-self: center; >>>> + >>>> + :hover { >>>> + cursor: pointer; >>>> + } >>>> + img { >>>> + max-height: 40px; >>>> + max-width: 40px; >>>> + position: relative; >>>> + top: -2px; >>>> + padding: 2px; >>>> + background-color: @white; >>>> + border-radius: 2px; >>>> + } >>>> +} >>>> + >>>> +#main-navigation-bar { >>>> + position: relative; >>>> + width: 100%; >>>> + min-width: @min-container-width; >>>> + display: flex; >>>> + flex-direction: row; >>>> + align-items: center; >>>> + justify-content: space-between; >>>> + font-family: Quicksand,sans-serif; >>>> + background-color: @dark-color-theme; >>>> + z-index: 5; >>>> + height: @app-bar-height; >>>> +} >>>> +#main-nav-bar-left { >>>> + position: relative; >>>> + display: flex; >>>> + align-items: center; >>>> +} >>>> +#main-nav-bar-right { >>>> + position: relative; >>>> + display: flex; >>>> + align-items: center; >>>> + padding-right: 15px; >>>> +} >>>> + >>>> +.app-btn{ >>>> + height: @app-bar-height; >>>> + background-color: @dark-color-theme; >>>> + display: flex; >>>> + align-items: center; >>>> + flex-direction: row; >>>> + margin-right: 2px; >>>> + margin-left: 2px; >>>> + a { >>>> + padding:10px; >>>> + color: @font-color-for-dark; >>>> + font-size: 1.4em !important; >>>> + } >>>> +} >>>> + >>>> +.app-btn a:visited { >>>> + color: @font-color-for-dark; >>>> +} >>>> + >>>> +.app-btn:hover{ >>>> + position: relative; >>>> + top: -6px; >>>> + background-color: @main-color-theme; >>>> + border-bottom-left-radius: 5px; >>>> + border-bottom-right-radius: 5px; >>>> + box-shadow: 1px 1px 12px @shadow-color; >>>> + a { >>>> + position: relative; >>>> + top: 6px; >>>> + color : @font-color-for-main; >>>> + } >>>> +} >>>> +.app-btn.selected:hover { >>>> + background-color: @dark-color-theme; >>>> + box-shadow: none; >>>> + top:0; >>>> +} >>>> + >>>> +.app-btn a:hover { >>>> + text-decoration: none; >>>> +} >>>> +#app-selected { >>>> + position: relative; >>>> + display: flex; >>>> + flex-direction: column; >>>> + align-items: center; >>>> + justify-content: center; >>>> + background-color: @main-color-theme; >>>> + box-shadow: 1px -2px 12px @shadow-color; >>>> + z-index: 0; >>>> + opacity: .99; >>>> + border-top-left-radius : 8px ; >>>> + border-top-right-radius : 8px ; >>>> + a { >>>> + position: relative; >>>> + top: 3px; >>>> + color: @font-color-for-main; >>>> + } >>>> +} >>>> +.app-btn.selected a:hover { >>>> + text-decoration: none; >>>> +} >>>> + >>>> +#app-bar-line { >>>> + position: relative; >>>> + width: 100%; >>>> + min-width: @min-container-width; >>>> + height: @color-line-height; >>>> + background-color: @main-color-theme; >>>> + box-shadow: 2px 2px 5px @shadow-color; >>>> +} >>>> +#color-add { >>>> + width: 150px; >>>> + background-color: @main-color-theme; >>>> + height: @color-line-height; >>>> + z-index: 20; >>>> + position: relative; >>>> + top: @color-line-height; >>>> +} >>>> + >>>> +#more-app { >>>> + position: relative; >>>> + display: flex; >>>> + align-items: center; >>>> + justify-content: center; >>>> + font-weight: bold; >>>> + font-size: 1.4em !important; >>>> + width: 40px; >>>> + height: @app-bar-height; >>>> + color: @font-color-for-dark; >>>> +} >>>> +#more-app:hover { >>>> + background-color: @main-color-theme; >>>> + text-decoration: none; >>>> +} >>>> +#more-app:hover #more-app-list { >>>> + display: block; >>>> +} >>>> +#more-app.selected { >>>> + background-color: @main-color-theme; >>>> +} >>>> + >>>> +#more-app-list { >>>> + display: none; >>>> + position: absolute; >>>> + top: @app-bar-height; >>>> + left: -20px; >>>> + background-color: @dark-color-theme; >>>> + z-index: 10; >>>> + border: solid 4px @main-color-theme; >>>> + border-top-width: @color-line-height; >>>> + border-bottom-left-radius: 4px; >>>> + border-bottom-right-radius: 4px; >>>> + li { >>>> + padding-left : 4px; >>>> + padding-right: 4px; >>>> + } >>>> + >>>> + a { >>>> + color: @font-color-for-dark; >>>> + font-size: 15px; >>>> + } >>>> + >>>> + :hover { >>>> + background-color: @medium-color-theme; >>>> + a { >>>> + box-shadow: none; >>>> + color: @dark-color-theme; >>>> + } >>>> + a:hover{ >>>> + box-shadow: none; >>>> + text-decoration: none; >>>> + border-radius: 0; >>>> + } >>>> + } >>>> + >>>> + li.selected { >>>> + background-color: @main-color-theme; >>>> + a { >>>> + color: @font-color-for-main; >>>> + } >>>> + a:hover { >>>> + color: @font-color-for-main; >>>> + background-color: @main-color-theme; >>>> + } >>>> + } >>>> +} >>>> + >>>> +#homeButton { >>>> + display: flex; >>>> + //visibility: hidden; >>>> + align-items: center; >>>> + justify-content: center; >>>> + background-color:@grey; >>>> + border: none; >>>> + border-radius : 0; >>>> + >>>> + height: @app-bar-height; >>>> + width : @home-btn-width; >>>> + text-decoration: none; >>>> + img { >>>> + height: 25px; >>>> + transition: all .2s ease-in-out; >>>> + } >>>> +} >>>> + >>>> +#homeButton:hover img { >>>> + transform: scale(1.1); >>>> +} >>>> + >>>> +#app-bar-list { >>>> + display: flex; >>>> +} >>>> + >>>> +#user-details { >>>> + position: absolute; >>>> + right: 20px; >>>> + top : 62px; >>>> + background-color: @dark-color-theme; >>>> + color : @font-color-for-dark; >>>> + font-size: 15px; >>>> + font-weight: bold; >>>> + padding-top: 5px; >>>> + padding-bottom: 10px; >>>> + z-index: 15; >>>> + box-shadow: 3px 3px 12px @shadow-color; >>>> + border-radius: 3px; >>>> + transition: all .1s ease-in-out; >>>> + >>>> + img { >>>> + height: 50px; >>>> + background-color: @white; >>>> + padding: 4px; >>>> + border-radius : 3px; >>>> + margin-left: 10px; >>>> + margin-right: 5px; >>>> + } >>>> + #logout { >>>> + background-color: @white; >>>> + color: @dark-color-theme !important; >>>> + border-radius: 2px; >>>> + :hover { >>>> + text-decoration: none; >>>> + } >>>> + } >>>> +} >>>> + >>>> +#user-details:after{ >>>> + content: ''; >>>> + position: absolute; >>>> + top: -10px; >>>> + right: 5px; >>>> + width: 0; >>>> + height: 0; >>>> + border-right: 10px solid transparent; >>>> + border-bottom: 10px solid @dark-color-theme; >>>> + border-left: 10px solid transparent; >>>> +} >>>> + >>>> +a.user-pref-btn { >>>> + margin-top: 15px; >>>> + background-color: @dark-color-theme; >>>> + margin-left: 10px; >>>> + margin-right: 10px; >>>> + padding-top: 2px; >>>> + padding-bottom: 2px; >>>> + display: flex; >>>> + justify-content: center; >>>> + color: @font-color-for-dark !important; >>>> + :hover { >>>> + text-decoration: none; >>>> + } >>>> +} >>>> + >>>> +#user-name { >>>> + display: flex; >>>> + flex-direction: column; >>>> + justify-content: center; >>>> + align-content: center; >>>> + padding-left : 5px; >>>> + padding-right : 5px; >>>> + span { >>>> + min-width: 100px; >>>> + padding-bottom : 5px; >>>> + padding-top : 5px; >>>> + } >>>> +} >>>> + >>>> +#user-row1 { >>>> + display: flex; >>>> + flex-direction: row; >>>> + justify-content: center; >>>> + #user-lang { >>>> + display: flex; >>>> + flex-direction: row; >>>> + justify-content: center; >>>> + align-content: center; >>>> + padding-left: 10px; >>>> + padding-right: 10px; >>>> + span { >>>> + min-width: 30px; >>>> + color: @font-color-for-dark; >>>> + } >>>> + } >>>> +} >>>> + >>>> +.appbar-btn-img { >>>> + height: @app-bar-height - 40px; >>>> +} >>>> + >>>> +#help-btn { >>>> + font-size: 10px; >>>> + min-width: 20px; >>>> + margin-right: 15px; >>>> +} >>>> +/* Begin sub Menu section */ >>>> + >>>> +#app-navigation { >>>> + height: @sub-app-bar-height; >>>> + border-right: solid 1px @black; >>>> + border-bottom: solid 1px @black; >>>> + width: 100%; >>>> + min-width: @min-container-width; >>>> + h2 { >>>> + display: none; >>>> + } >>>> + ul { >>>> + display: flex; >>>> + flex-direction: row; >>>> + background-color: @grey; >>>> + flex-grow: 1; >>>> + } >>>> + ul li ul li { >>>> + border-left: solid 1px @black; >>>> + height: @sub-app-bar-height; >>>> + display: flex; >>>> + align-items: center; >>>> + justify-items: center; >>>> + justify-content: center; >>>> + min-width: 75px; >>>> + padding-left: 6px; >>>> + padding-right: 6px; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + border-bottom: solid 1px @black; >>>> + font-size: 12px; >>>> + @media screen and (max-width: 1500px) { >>>> + font-size: 10px; >>>> + min-width: 65px; >>>> + } >>>> + @media screen and (max-width: 1300px) { >>>> + font-size: 10px; >>>> + min-width: 50px; >>>> + } >>>> + a { >>>> + display: flex; >>>> + justify-content: center; >>>> + align-items: center; >>>> + text-align: center; >>>> + height: 100%; >>>> + width: 100%; >>>> + text-decoration: none; >>>> + } >>>> + } >>>> +} >>>> + >>>> +#app-navigation ul li ul li:last-child { >>>> + border-right: solid 1px @black; >>>> +} >>>> + >>>> +#app-navigation ul li ul li:hover { >>>> + background-color: @main-color-theme; >>>> + min-height: @sub-app-bar-height; >>>> + position: relative; >>>> + //top: -1px; >>>> + a { >>>> + color: @white; >>>> + text-decoration: none; >>>> + } >>>> +} >>>> +#app-navigation ul li ul li.selected:hover { >>>> + a { >>>> + color: @black !important; >>>> + } >>>> +} >>>> + >>>> +#app-navigation ul li ul li.selected { >>>> + background-color: @white; >>>> + position: relative; >>>> + top: 1px; >>>> + height: @sub-app-bar-height + 1px; >>>> + border-top-right-radius: 2px; >>>> + border-top-left-radius: 2px; >>>> + border-bottom: none; >>>> + >>>> + :after { >>>> + content: ''; >>>> + position: absolute; >>>> + top: -2px; >>>> + left: 5px; >>>> + width: 0; >>>> + height: 0; >>>> + border-right: 10px solid transparent; >>>> + border-top: 10px solid @main-color-theme; >>>> + border-left: 10px solid transparent; >>>> + } >>>> + >>>> +} >>>> + >>>> + >>>> +/* End sub Menu section */ >>>> + >>>> +/* begin sub Menu section 3rd level */ >>>> + >>>> +.button-bar.tab-bar { >>>> + ul li ul li { >>>> + border: solid 1px @grey; >>>> + border-radius: 4px; >>>> + a { >>>> + width: 100%; >>>> + height: 100%; >>>> + } >>>> + } >>>> + li.selected{ >>>> + background-color: @main-color-theme; >>>> + a{ >>>> + color: @font-color-for-main; >>>> + } >>>> + } >>>> + ul li ul li:hover { >>>> + background-color: @main-color-theme; >>>> + a { >>>> + color: @font-color-for-main ; >>>> + } >>>> + } >>>> +} >>>> + >>>> +#third-level-menu-container { >>>> + display: flex; >>>> + flex-direction: row; >>>> +} >>>> +#working-area { >>>> + width: 100%; >>>> +} >>>> + >>>> +#left-column-menu { >>>> + width: 100px; >>>> +} >>>> + >>>> +.third-lvl-menu { >>>> + background-color: @dark-color-theme; >>>> + position: relative; >>>> + left: -10px; >>>> + border-top-right-radius: 4px; >>>> + border-bottom-right-radius: 4px; >>>> + padding-top: 4px; >>>> + padding-bottom: 4px; >>>> + ul { >>>> + li { >>>> + ul { >>>> + position: relative; >>>> + top: 5px; >>>> + width: @third-lvl-width; >>>> + } >>>> + } >>>> + } >>>> + h2 { >>>> + visibility: hidden; >>>> + } >>>> +} >>>> +.third-level-item:last-child { >>>> + border-bottom: solid 1px @main-color-theme; >>>> +} >>>> + >>>> +.third-level-item { >>>> + min-height: @third-lvl-height; >>>> + background-color: @dark-color-theme; >>>> + padding-right: 3px; >>>> + border-top: solid 1px @main-color-theme; >>>> + >>>> + a, a:visited { >>>> + display: flex; >>>> + justify-content: center; >>>> + align-items: center; >>>> + width: 100%; >>>> + color: @font-color-for-dark !important; >>>> + min-height: @third-lvl-height; >>>> + max-width: @third-lvl-width; >>>> + text-align: center; >>>> + } >>>> +} >>>> +.third-level-item.selected { >>>> + position: relative; >>>> + border-left: solid 9px @main-color-theme; >>>> + a, a:visited { >>>> + background-color: @white; >>>> + color: @dark-color-theme !important; >>>> + } >>>> + :after { >>>> + content: ''; >>>> + position: absolute; >>>> + top: 5px; >>>> + left: 0; >>>> + width: 0; >>>> + height: 0; >>>> + border-top: 10px solid transparent; >>>> + border-left: 10px solid @main-color-theme; >>>> + border-bottom: 10px solid transparent; >>>> + } >>>> +} >>>> + >>>> +.third-level-item a:hover { >>>> + background-color: @main-color-theme; >>>> + color: @font-color-for-main ; >>>> + text-decoration: none; >>>> +} >>>> +/* End 3rd level menu */ >>>> + >>>> + >>>> + >>>> +/* Begin Home Menu for IB section */ >>>> +.fixed-nav-bar { >>>> + position: fixed !important; >>>> + width: 100%; >>>> +} >>>> +#nav-bar-offset { >>>> + height: @app-bar-height ; >>>> +} >>>> + >>>> +#homeGlyph { >>>> + margin-left: 20px; >>>> + height: 20px; >>>> +} >>>> + >>>> +#homePageTitle { >>>> + color: @white; >>>> + font-size: 20px; >>>> + font-weight: bold; >>>> + margin-right: 20px; >>>> + margin-left: 20px; >>>> +} >>>> +.home-menu-list { >>>> + display: flex; >>>> + flex-direction: column; >>>> + align-items: center; >>>> +} >>>> +.hp-applist { >>>> + display: flex; >>>> + flex-direction: row; >>>> + color : @white; >>>> + align-items: center; >>>> + .app-title { >>>> + display: flex; >>>> + align-items: center; >>>> + justify-content: center; >>>> + background-color: @dark-color-theme; >>>> + height: @home-menu-tile-height; >>>> + padding: 5px 10px 5px 10px; >>>> + border-bottom: solid 1px @black; >>>> + span { >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>>> !important; >>>> + font-size: 15px; >>>> + font-weight: bold; >>>> + width: 110px; >>>> + a { >>>> + display: flex; >>>> + justify-content: center; >>>> + color : @white; >>>> + } >>>> + } >>>> + } >>>> + >>>> + .hp-menu-item { >>>> + display: flex; >>>> + align-items: center; >>>> + justify-content: center; >>>> + position: relative; >>>> + margin-left: 5px; >>>> + margin-right: 5px; >>>> + border: solid 2px @grey; >>>> + border-radius: 8px; >>>> + height: @home-menu-tile-height - 4px; >>>> + min-width: @home-menu-tile-min-width; >>>> + max-width: @home-menu-tile-max-width; >>>> + .menu-link { >>>> + font-size: 10px; >>>> + color: @black; >>>> + padding: 10px; >>>> + } >>>> + .star-link { >>>> + position: absolute; >>>> + height: 25px; >>>> + top: 5px; >>>> + right: 5px; >>>> + } >>>> + } >>>> + >>>> +} >>>> +.hp-applist .app-title span a:hover { >>>> + text-decoration: none; >>>> +} >>>> + >>>> +.hp-menu-item.favoriteItem { >>>> + border: solid 2px @dark-color-theme; >>>> +} >>>> + >>>> +.hp-menu-item:hover { >>>> + box-shadow: 3px 3px 12px @shadow-color; >>>> + a { >>>> + text-decoration: none; >>>> + } >>>> +} >>>> + >>>> +/* End Home Menu for IB section */ >>>> + >>>> +/* Begin Login screenlet */ >>>> +#login-container { >>>> + #content-messages { >>>> + position: relative; >>>> + top: @app-bar-height; >>>> + border-radius: 4px; >>>> + width: 97%; >>>> + &.errorMessage { >>>> + background-color : @color-background-alert !important; >>>> + color: @color-font-alert !important; >>>> + border : solid 1px @color-border-alert !important; >>>> + } >>>> + &.eventMessage { >>>> + background-color : @color-background-success !important; >>>> + color: @color-font-success !important; >>>> + border : solid 1px @color-border-success !important; >>>> + } >>>> + } >>>> +} >>>> +#loginBar { >>>> + position: fixed; >>>> + top:0; >>>> + left: 0; >>>> + width: 100%; >>>> + height: @app-bar-height; >>>> + background-color: @dark-color-theme; >>>> + span { >>>> + background-color: @white; >>>> + color: @main-color-theme; >>>> + border-top-right-radius: 5px; >>>> + border-top-left-radius: 5px; >>>> + font-size: 25px; >>>> + position: relative; >>>> + top: @app-bar-height - 32px; >>>> + left: 15px; >>>> + padding: 5px 10px 5px 10px; >>>> + } >>>> + #company-logo { >>>> + position: absolute; >>>> + } >>>> +} >>>> + >>>> +.login-screenlet { >>>> + display: flex; >>>> + flex-direction: column; >>>> + min-width: 300px; >>>> + max-width: 50em; >>>> + border-radius: 8px !important; >>>> + margin-top: 15%; >>>> + box-shadow: 3px 3px 12px @shadow-color; >>>> + .screenlet-title-bar { >>>> + display: flex; >>>> + align-content: center; >>>> + justify-content: center; >>>> + margin:0; >>>> + padding:0; >>>> + h3{ >>>> + padding-top:2px; >>>> + padding-bottom:2px; >>>> + background-color: @dark-color-theme !important; >>>> + color: @font-color-for-dark; >>>> + height: 100%; >>>> + width:100%; >>>> + text-shadow: none; >>>> + font-size: 25px; >>>> + } >>>> + } >>>> + .screenlet-body { >>>> + background-color: @main-color-theme !important; >>>> + form { >>>> + .button { >>>> + width: 150px; >>>> + border-radius: 4px; >>>> + background: none; >>>> + background-color: @dark-color-theme; >>>> + color: @font-color-for-dark; >>>> + text-shadow: none; >>>> + margin-top: 20px; >>>> + margin-bottom: 10px; >>>> + } >>>> + >>>> + table { >>>> + tr { >>>> + width: 100%; >>>> + .label { >>>> + color: @font-color-for-main; >>>> + width: 25%; >>>> + font-size: 15px; >>>> + } >>>> + input { >>>> + width: 100%; >>>> + } >>>> + .buttontext, >>>> + [type="submit"] { >>>> + width: 150px; >>>> + border-radius: 4px; >>>> + background: none; >>>> + background-color: @dark-color-theme; >>>> + color: @font-color-for-dark; >>>> + text-shadow: none; >>>> + } >>>> + [name="GET_PASSWORD_HINT"] { >>>> + background-color: @font-color-for-dark; >>>> + color: @main-color-theme; >>>> + border: none; >>>> + width: 100%; >>>> + } >>>> + [name="EMAIL_PASSWORD"] { >>>> + background-color: @font-color-for-dark; >>>> + color: @main-color-theme; >>>> + border: none; >>>> + width: 100%; >>>> + } >>>> + td { >>>> + padding: 5px; >>>> + color: @font-color-for-main; >>>> + font-size: 15px; >>>> + font-weight: bold; >>>> + } >>>> + } >>>> + } >>>> + } >>>> + a { >>>> + color: @font-color-for-main; >>>> + } >>>> + } >>>> +} >>>> + >>>> +.login-screenlet .screenlet-title-bar { >>>> + text-align: center; >>>> +} >>>> + >>>> +/* End Login screenlet */ >>>> + >>>> + >>>> +/* --------------------------------------------- */ >>>> +/* Begin Screenlet style */ >>>> +/* --------------------------------------------- */ >>>> +.screenlet-title-bar { >>>> + text-decoration: none ; >>>> + color: @dark-color-theme; >>>> + background-color: @grey; >>>> + height: 1%; /* IE fix */ >>>> + min-height: 1.5em; >>>> + padding:0.8em 0.2em; >>>> +} >>>> + >>>> +.screenlet { >>>> + border-radius: 5px; >>>> + border: solid 1px @grey; >>>> + height: auto !important; >>>> + margin-bottom: 1em; >>>> + overflow: auto; >>>> +} >>>> + >>>> +.screenlet-body { >>>> + background-color: #FFFFFF; >>>> + height: auto !important; >>>> + height: 1%; >>>> + padding: 0.4em; >>>> +} >>>> + >>>> +.screenlet-body div { >>>> + margin: 0.8em 0.1em >>>> +} >>>> + >>>> +/* Special Screenlet style for locale and timezone window */ >>>> +.lists.screenlet { >>>> + margin-left: 25%; >>>> + margin-right: 25%; >>>> + margin-top: 1em; >>>> +} >>>> + >>>> +.lists.screenlet .basic-table tr td { >>>> + text-align: center; >>>> +} >>>> + >>>> +.lists.screenlet .basic-table tr td a { >>>> + display: block; >>>> +} >>>> + >>>> +/* Alternate table header style */ >>>> +.basic-table .header-row-2 th, >>>> +.basic-table .header-row-2 td { >>>> + background-color: @greydark; >>>> + border-bottom: 0; >>>> + border-left: 0.1em solid #aaa; >>>> + border-right: 0.1em solid #888; >>>> + color: #ffffff; >>>> + font-weight: bold; >>>> +} >>>> + >>>> +/* No padding screenlet decorator */ >>>> +.no-padding { >>>> + padding: 0; >>>> + border: none; >>>> +} >>>> + >>>> +.no-padding .h1, >>>> +.no-padding .h2, >>>> +.no-padding .h3, >>>> +.no-paddingr h1, >>>> +.no-padding h2, >>>> +.no-padding h3 { >>>> + padding: 0.7em; >>>> +} >>>> + >>>> +.screenlet-title-bar ul a:hover { >>>> + color: @main-color-theme !important; >>>> + text-decoration: none; >>>> +} >>>> + >>>> + >>>> +/* --------------------------------------------- */ >>>> +/* End Screenlet style */ >>>> +/* --------------------------------------------- */ >>>> + >>>> +/* ---------------------- */ >>>> +/* Table Styles */ >>>> +/* ---------------------- */ >>>> + >>>> +.basic-table { >>>> + background-color: #ffffff; >>>> + color: #000000; >>>> + margin-bottom: 1em; >>>> + width: 100%; >>>> +} >>>> + >>>> +form table, >>>> +form .basic-table, >>>> +.screenlet-body .basic-table { >>>> + background: transparent; >>>> + margin-bottom: 0; >>>> +} >>>> + >>>> +.basic-table tr td { >>>> + /* Style for all cells */ >>>> + padding: 0.8em 0.1em; >>>> + vertical-align: middle; >>>> +} >>>> + >>>> +.basic-table tr .align-bottom { >>>> + vertical-align: bottom; >>>> +} >>>> + >>>> +.basic-table tr .align-top { >>>> + vertical-align: top; >>>> +} >>>> + >>>> +.basic-table tr .label, >>>> +.basic-table tr .group-label { >>>> + /* field labels for forms */ >>>> + font-weight: bold; >>>> + text-align: right; >>>> + padding-right: 1.5em; >>>> + white-space: nowrap; >>>> + width: 1%; >>>> +} >>>> + >>>> +.basic-table tr .group-label { >>>> + /* "header" for field label groups */ >>>> + font-size: 1.2em; >>>> + padding: 2em 1.5em 0 0; >>>> +} >>>> + >>>> +.basic-table tr th, >>>> +.basic-table .header-row { >>>> + font-weight: bold; >>>> + text-align: left; >>>> +} >>>> + >>>> +.basic-table .header-row td { >>>> + border-bottom: 0.1em solid #000000; >>>> +} >>>> + >>>> +.basic-table .header-row td a { >>>> + color: #000000; >>>> +} >>>> + >>>> +.basic-table .alternate-row { >>>> + /* Alternating row style */ >>>> + background-color: #eeeeee; >>>> +} >>>> + >>>> +.basic-table .selected { >>>> + background: #FFFCCF; >>>> +} >>>> + >>>> +.basic-table .alternate-rowSelected { >>>> + background: #FFF55F; >>>> +} >>>> + >>>> +.basic-table .Validate { >>>> + /*Style use by alt-row-style on list*/ >>>> + background: #A0D5F7; >>>> +} >>>> + >>>> +.basic-table .alternate-rowValidate { >>>> + /*Style use by alt-row-style on list*/ >>>> + background: #72A8F2; >>>> +} >>>> + >>>> +.basic-table .Warn { >>>> + /*Style use by alt-row-style on list*/ >>>> + background: #f55C5C; >>>> +} >>>> + >>>> +.basic-table .alternate-rowWarn { >>>> + /*Style use by alt-row-style on list*/ >>>> + background: #FC7455; >>>> +} >>>> + >>>> +.basic-table tr .button-col { >>>> + /* button column style - for the small >>>> + collection of buttons used in lists */ >>>> + vertical-align: top; >>>> + padding: 0.3em; >>>> +} >>>> +.basic-table tr .button-col a, >>>> +.basic-table tr .button-col button, >>>> +.basic-table tr .button-col input[type="reset"], >>>> +.basic-table tr .button-col input[type="submit"], >>>> +.basic-table tr .button-col input[type="button"] { >>>> + -webkit-appearance: none; >>>> + -moz-border-radius: 1em; >>>> + -webkit-border-radius: 1em; >>>> + border-radius: 2px; >>>> + border: 0.1em solid @main-color-theme; >>>> + background-color: @white; >>>> + cursor: pointer; >>>> + color: @main-color-theme; >>>> + display:inline-block; >>>> + font-size: 0.9em; >>>> + font-weight: bold; >>>> + outline: 0; >>>> + overflow: visible; >>>> + padding: 0.1em 0.5em 0.2em 0.5em; >>>> + text-decoration: none; >>>> + width: auto; >>>> + >>>> + &:hover { >>>> + background-color: @main-color-theme; >>>> + color: @white; >>>> + } >>>> +} >>>> + >>>> +.basic-table .collapsed { >>>> + visibility: collapse; >>>> +} >>>> + >>>> +/* Sort field style */ >>>> +.basic-table .header-row-2 th .sort-order-asc, >>>> +.basic-table .header-row-2 td .sort-order-asc{ >>>> + background: url(/images/arrow-gr-up.png) no-repeat right; >>>> + padding-left: 0.5em; >>>> + padding-right: 20px; /* Setting must be in px */ >>>> +} >>>> +.basic-table .header-row-2 th .sort-order-desc, >>>> +.basic-table .header-row-2 td .sort-order-desc{ >>>> + background: url(/images/arrow-gr-dw.png) no-repeat right; >>>> + padding-left: 0.5em; >>>> + padding-right: 20px; /* Setting must be in px */ >>>> +} >>>> +.basic-table .header-row-2 th .sort-order, >>>> +.basic-table .header-row-2 td .sort-order{ >>>> + background: url(/images/arrow-gr.png) no-repeat right; >>>> + padding-left: 0.5em; >>>> + padding-right: 20px; /* Setting must be in px */ >>>> + color:#fff >>>> +} >>>> + >>>> + >>>> +/* --------------------------------------------- */ >>>> +/* Begin Message Info */ >>>> +/* --------------------------------------------- */ >>>> +.count-message { >>>> + display: flex; >>>> + align-items: center; >>>> + justify-content: center; >>>> + min-height:20px; >>>> + min-width: 20px; >>>> + max-height:20px; >>>> + max-width: 20px; >>>> + background: @white; >>>> + font-size:12px; >>>> + font-weight: bold; >>>> + border-radius: 50%; >>>> +} >>>> +.info-message-title { >>>> + min-width:150px; >>>> + margin: 5px; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + font-size: 16px; >>>> + font-weight: bold; >>>> +} >>>> +.message-list { >>>> + position:relative; >>>> + margin-top: 10px; >>>> + box-shadow: 1px 3px 5px @greydark; >>>> + border-radius: 0 5px 5px 0; >>>> + transition: height 2s; >>>> +} >>>> +.message-list-main { >>>> + padding: 5px 15px 5px 15px; >>>> +} >>>> +.message-list-alert { >>>> + background-color: @color-alert; >>>> + border-left : solid 5px @color-alert-dark; >>>> + .count-message { >>>> + color: @color-alert-dark; >>>> + } >>>> +} >>>> +.message-list-success { >>>> + background-color: @color-success; >>>> + border-left: solid 5px @color-success-dark; >>>> + .count-message { >>>> + color: @color-success-dark; >>>> + } >>>> +} >>>> +.message-list-table-container { >>>> + background-color: @white; >>>> + border-radius: 5px; >>>> + overflow: hidden; >>>> + height: 0; >>>> +} >>>> +.info-message-success { >>>> + display: none; >>>> +} >>>> +.info-message-alert { >>>> + display: none; >>>> +} >>>> +table.msg-list { >>>> + width: 100%; >>>> + font-size: 16px; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + padding: 0; >>>> + thead { >>>> + height: 100%; >>>> + background-color: @grey; >>>> + margin: 0; >>>> + padding: 0; >>>> + tr{ >>>> + font-weight: bold; >>>> + border-bottom: solid 1px @black; >>>> + height: 100%; >>>> + background-color: @grey; >>>> + line-height: 30px; >>>> + } >>>> + } >>>> + tbody { >>>> + tr { >>>> + line-height: 25px; >>>> + } >>>> + tr.msg-row-success { >>>> + background-color: @color-success; >>>> + } >>>> + tr.msg-row-alert { >>>> + background-color: @color-alert; >>>> + } >>>> + } >>>> + td { >>>> + padding-left: 5px; >>>> + } >>>> +} >>>> + >>>> +/* --------------------------------------------- */ >>>> +/* End Message Info */ >>>> +/* --------------------------------------------- */ >>>> + >>>> +/* ---------------------- */ >>>> +/* Paginate Style */ >>>> +/* ---------------------- */ >>>> + >>>> +.paginate-bar-nrd { >>>> + display: flex; >>>> + flex-direction: row; >>>> + align-items: center; >>>> + font-size: 15px; >>>> + background-color: @grey; >>>> + padding-left: 10px; >>>> + padding-top: 3px; >>>> + padding-bottom: 3px; >>>> + box-shadow: 0 2px 5px @shadow-color; >>>> + >>>> + ul.paginate-pg-list { >>>> + display: flex; >>>> + flex-direction: row; >>>> + background-color: @white; >>>> + color: @main-color-theme; >>>> + margin-right: 10px; >>>> + border-radius: 8px; >>>> + border: solid 1px @box-border-color; >>>> + height: 18px; >>>> + li { >>>> + display: flex; >>>> + justify-content: center; >>>> + min-width: 17px; >>>> + border-right: solid 1px @box-border-color; >>>> + padding-left: 2px; >>>> + padding-right: 2px; >>>> + height:100%; >>>> + a { >>>> + display: flex; >>>> + justify-content: center; >>>> + align-items: center; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + color: @dark-color-theme; >>>> + height: 100%; >>>> + width: 100%; >>>> + } >>>> + .paginate-disable { >>>> + >>>> + } >>>> + } >>>> + li.selected { >>>> + background-color: @main-color-theme; >>>> + a { >>>> + color: @font-color-for-main; >>>> + } >>>> + } >>>> + li:first-child, li:last-child { >>>> + width: 20px; >>>> + } >>>> + li:first-child { >>>> + border-top-left-radius: 3px; >>>> + border-bottom-left-radius: 3px; >>>> + } >>>> + li:last-child { >>>> + border-right: none; >>>> + border-top-right-radius: 3px; >>>> + border-bottom-right-radius: 3px; >>>> + } >>>> + } >>>> + >>>> +} >>>> +select.paginate-select { >>>> + position: relative; >>>> + background: @white; >>>> + font-size: 16px; >>>> + font-weight: bold; >>>> + border: 1px solid @box-border-color; >>>> + option { >>>> + display: flex; >>>> + justify-self: center; >>>> + font-size: 14px; >>>> + } >>>> +} >>>> + >>>> +.paginate-select-label { >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + font-size: 16px; >>>> + padding-left: 15px; >>>> + padding-right: 15px; >>>> +} >>>> + >>>> +.paginate-information { >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + font-size: 16px; >>>> + padding-left: 15px; >>>> + padding-right: 15px; >>>> +} >>>> + >>>> +ul.paginate-pg-list li:hover{ >>>> + background-color: @main-color-theme; >>>> + a { >>>> + text-decoration: none; >>>> + color: @font-color-for-main; >>>> + } >>>> +} >>>> + >>>> +/* End of Paginate Style */ >>>> +/* ---------------------- */ >>>> + >>>> +/* ------------------------------- */ >>>> +/* List Navigation Style */ >>>> +/* ------------------------------- */ >>>> + >>>> +.nav-pager { >>>> + background-color: @greydark; >>>> + color: @white; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif; >>>> + font-size: 9px; >>>> + font-weight: bold; >>>> + line-height: 3.5em; >>>> + height: 3.5em; >>>> + margin: 0.5em 0 0.5em 0; >>>> + border-radius: 3px 3px 0 0; >>>> +} >>>> + >>>> +.nav-pager ul { >>>> + display: inline; /* IE Fix */ >>>> +} >>>> + >>>> +.nav-pager ul li { >>>> + float:left; >>>> + vertical-align: middle; >>>> +} >>>> + >>>> +.nav-pager ul li a { >>>> + display: block; >>>> +} >>>> + >>>> +.nav-pager ul a { >>>> + color: @white; >>>> + padding: 0 1em 0 1em; >>>> + text-decoration: none; >>>> +} >>>> + >>>> +.nav-pager ul a:hover { >>>> + background-color: @main-color-theme; >>>> + color: @font-color-for-main; >>>> +} >>>> + >>>> +.nav-pager ul .nav-pagesize, >>>> +.nav-pager ul .nav-page-select, >>>> +.nav-pager ul .nav-displaying { >>>> + padding: 0 1em 0 1em; >>>> +} >>>> + >>>> +.nav-pager ul .nav-first-disabled, >>>> +.nav-pager ul .nav-previous-disabled, >>>> +.nav-pager ul .nav-next-disabled, >>>> +.nav-pager ul .nav-last-disabled { >>>> + padding: 0 1em 0 1em; >>>> +} >>>> + >>>> +.nav-pager ul .nav-first-disabled:hover, >>>> +.nav-pager ul .nav-previous-disabled:hover, >>>> +.nav-pager ul .nav-next-disabled:hover, >>>> +.nav-pager ul .nav-last-disabled:hover { >>>> + cursor: not-allowed; >>>> +} >>>> + >>>> + >>>> +.nav-pager ul .nav-displaying { >>>> + border-right: none; >>>> +} >>>> + >>>> + >>>> +/* ---------------------------- */ >>>> +/* Multi-Column Styles */ >>>> +/* ---------------------------- */ >>>> + >>>> +#column-container { >>>> + margin: auto; >>>> + padding: 1em; >>>> + position: relative; >>>> + min-width: @min-container-width; >>>> +} >>>> + >>>> +#column-container h1, >>>> +#column-container .h1, >>>> +#column-container h2, >>>> +#column-container .h2 { >>>> + margin-bottom: 0.5em; >>>> +} >>>> + >>>> +#column-container h1, >>>> +#column-container .h1 { >>>> + color: #557996; >>>> +} >>>> + >>>> +#column-container .left { >>>> + float: left; >>>> + /* alt: position: absolute; top: 0px; left: 0px; */ >>>> + width: 22em; >>>> + margin-right: 1em; >>>> +} >>>> + >>>> +#column-container .left-larger { >>>> + float: left; >>>> + /* alt: position: absolute; top: 0px; left: 0px; */ >>>> + width: 25em; >>>> + margin-right: 1em; >>>> +} >>>> + >>>> +.lefthalf { >>>> + float: left; >>>> + height: 1%; >>>> + left: 0; >>>> + margin: 0% 1% 1% 0%; >>>> + width: 49%; >>>> +} >>>> + >>>> +.righthalf { >>>> + float: right; >>>> + height: 1%; >>>> + margin: 0 0 1% 1%; >>>> + right: 0; >>>> + width: 49%; >>>> +} >>>> + >>>> +#column-container .right { >>>> + float: right; >>>> + margin-left: 1em; >>>> + width: 22em; >>>> +} >>>> + >>>> +#column-container .leftonly { >>>> + margin-left: 23em; >>>> + width: auto; >>>> +} >>>> + >>>> +#column-container .leftonly-larger { >>>> + margin-left: 26em; >>>> + width: auto; >>>> +} >>>> + >>>> +#column-container .rightonly { >>>> + margin-right: 23em; >>>> + width: auto; >>>> +} >>>> + >>>> +#column-container .center { >>>> + margin-left: 23em; >>>> + margin-right: 23em; >>>> + width: auto; >>>> +} >>>> + >>>> +#column-container .nocolumns { >>>> + width: auto; >>>> +} >>>> + >>>> +/* ---------------------- */ >>>> +/* Button Style */ >>>> +/* ---------------------- */ >>>> + >>>> +.button-bar li.buttontext a, >>>> +a.buttontext, >>>> +a.buttontextbig, >>>> +.smallSubmit, >>>> +.smallSubmit:hover, >>>> +.mediumSubmit, >>>> +.largeSubmit, >>>> +.loginButton, >>>> +.button-style-1 a, >>>> +.button-style-1 ul a, >>>> +.button-style-2 ul a, >>>> +.button-style-2 a, >>>> +.button, >>>> +button, >>>> +input[type="reset"], >>>> +input[type="submit"], >>>> +input[type="button"] { >>>> + -webkit-appearance: none; >>>> + -moz-border-radius: 1.1em; >>>> + -webkit-border-radius: 1.1em; >>>> + border-radius: 2px; >>>> + border: 0.1em solid @main-color-theme; >>>> + background-color: @white; >>>> + cursor: pointer; >>>> + color: @main-color-theme; >>>> + display:inline-block; >>>> + font-size: 1em; >>>> + font-weight: bold; >>>> + outline: 0; >>>> + overflow: visible; >>>> + padding: 0.4em 1em 0.4em; >>>> + text-decoration:none; >>>> + /*text-transform:uppercase;*/ >>>> + width: auto; >>>> + >>>> + &:hover { >>>> + color: @font-color-for-main; >>>> + background-color: @main-color-theme; >>>> + } >>>> +} >>>> + >>>> + >>>> +/* ---------------------- */ >>>> +/* Footer Style */ >>>> +/* ---------------------- */ >>>> + >>>> +#footer { >>>> + background: @dark-color-theme; >>>> + border-top: 0.1em inset #000; >>>> + padding: 0.5em 0 0.5em 0.5em; >>>> + >>>> + height: @footer-height; >>>> + position: fixed; >>>> + bottom: 0; >>>> + width: 100%; >>>> + display: flex; >>>> + flex-direction: row; >>>> + align-items: center; >>>> + justify-content: space-between; >>>> + font-family: "Quicksand", Arial, "Lucida Grande", sans-serif >>>> !important; >>>> + z-index: 10; >>>> + >>>> + span { >>>> + color: @font-color-for-dark; >>>> + padding: 10px; >>>> + } >>>> + >>>> + a { >>>> + color: @font-color-for-dark; >>>> + font-weight: normal; >>>> + } >>>> +} >>>> + >>>> +#footer a:focus { >>>> + text-decoration: underline; >>>> +} >>>> + >>>> +#footer-offset { >>>> + height: @footer-height + 10px; >>>> + width: 100%; >>>> +} >>>> >>>> >>>> >>>> >>> >>> >>> >>> >> >> > > |
Free forum by Nabble | Edit this page |