You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by jl...@apache.org on 2016/08/24 06:03:20 UTC
svn commit: r1757463 [2/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less?rev=1757463&r1=1757462&r2=1757463&view=diff
==============================================================================
--- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less (original)
+++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less Wed Aug 24 06:03:20 2016
@@ -1,1991 +1,1998 @@
-/* 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%;
-}
+/* 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%;
+}