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 < jacques.le.r...@les7arts.com> 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, jler...@apache.org 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; > >
