/* 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; | |
/* 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%; | |
} |