|
|
|
@@ -0,0 +1,946 @@ |
|
|
|
html, |
|
|
|
body { |
|
|
|
margin: 0px !important; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.bts_hidden { |
|
|
|
z-index: -1; |
|
|
|
} |
|
|
|
|
|
|
|
.blink_me { |
|
|
|
animation: blinker 0.3s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes blinker { |
|
|
|
50% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.titlebar_gradient { |
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100 */ |
|
|
|
background: rgb(246,230,180); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
.sheettitle h1:hover { |
|
|
|
text-decoration: underline; |
|
|
|
font-weight: bolder; |
|
|
|
cursor: pointer; |
|
|
|
animation: blinker 1s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.timesheets { |
|
|
|
width: calc(100vw - 300px); |
|
|
|
height: 100vh; |
|
|
|
margin: 0px; |
|
|
|
padding: 0px; |
|
|
|
left: 150px; |
|
|
|
position: fixed; |
|
|
|
background-color: red; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.peoplebar { |
|
|
|
position: fixed; |
|
|
|
top: 0px; |
|
|
|
width: 150px; |
|
|
|
height: 100vh; |
|
|
|
background: lightgrey; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.peoplebar.left { |
|
|
|
border-radius: 5px 0px 0px 0px; |
|
|
|
left: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.peoplebar.right { |
|
|
|
right: 0px; |
|
|
|
border-radius: 0px 5px 0px 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.timesheets .sheettitle { |
|
|
|
padding-top: 8px; |
|
|
|
text-align: center; |
|
|
|
background-color: lightgrey; |
|
|
|
height: 40px; |
|
|
|
text-shadow: 1px 1px 1px #fcfcfc; |
|
|
|
} |
|
|
|
|
|
|
|
.timesheets .workspace { |
|
|
|
height: calc(100vh - 190px); |
|
|
|
background-color: white; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
.timesheets .workspace img { |
|
|
|
display: block; |
|
|
|
margin-top: 140px; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.timesheets .statusbar { |
|
|
|
position: relative; |
|
|
|
height: 40px; |
|
|
|
background-color: ivory; |
|
|
|
box-shadow: 1px 1px 10px black; |
|
|
|
} |
|
|
|
|
|
|
|
/* staff search bar*/ |
|
|
|
.b_search { |
|
|
|
position: relative; |
|
|
|
height: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.b_search input { |
|
|
|
margin-top: 5px; |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
border-radius: 20px; |
|
|
|
box-shadow: 1px 1px 2px grey inset; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.b_search .ticon-search { |
|
|
|
position: absolute; |
|
|
|
top: 15px; |
|
|
|
left: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.b_search .ticon-times-circle-o { |
|
|
|
position: absolute; |
|
|
|
top: 15px; |
|
|
|
right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.peoplebar button { |
|
|
|
width: 100%; |
|
|
|
padding: 0px; |
|
|
|
height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.peoplebar .stafflist, |
|
|
|
.peoplebar .clientlist { |
|
|
|
height: calc(100vh - 80px); |
|
|
|
background-color: dimgrey; |
|
|
|
overflow: hidden; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
/* scroll-behavior: smooth; */ |
|
|
|
} |
|
|
|
|
|
|
|
.peopleitem { |
|
|
|
position: relative; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
height: 100px; |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
/* hover box */ |
|
|
|
div.peopleitem > label { |
|
|
|
-webkit-perspective: 1000px; |
|
|
|
perspective: 1000px; |
|
|
|
-webkit-transform-style: preserve-3d; |
|
|
|
transform-style: preserve-3d; |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 100px; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
-webkit-transform: translate(-50%, -50%); |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem .card { |
|
|
|
position: relative; |
|
|
|
height: 100%; |
|
|
|
width: 95%; |
|
|
|
margin: auto; |
|
|
|
-webkit-transform-style: preserve-3d; |
|
|
|
transform-style: preserve-3d; |
|
|
|
-webkit-transition: all 600ms; |
|
|
|
transition: all 600ms; |
|
|
|
z-index: 20; |
|
|
|
border: 1px solid black; |
|
|
|
box-shadow: 1px 1px 10px black; |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem .card > div { |
|
|
|
position: absolute; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
background: #FFF; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
/* line-height: 200px; */ |
|
|
|
-webkit-backface-visibility: hidden; |
|
|
|
backface-visibility: hidden; |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem .card .back { |
|
|
|
background: #222; |
|
|
|
color: #FFF; |
|
|
|
-webkit-transform: rotateX(180deg); |
|
|
|
transform: rotateX(180deg); |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem label:hover .card { |
|
|
|
-webkit-transform: rotateX(20deg); |
|
|
|
transform: rotateX(20deg); |
|
|
|
box-shadow: 0 20px 20px rgba(50,50,50,.2); |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem input { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem :checked + .card { |
|
|
|
transform: rotateX(180deg); |
|
|
|
-webkit-transform: rotateX(180deg); |
|
|
|
} |
|
|
|
|
|
|
|
div.peopleitem label:hover :checked + .card { |
|
|
|
transform: rotateX(160deg); |
|
|
|
-webkit-transform: rotateX(160deg); |
|
|
|
box-shadow: 0 20px 20px rgba(255,255,255,.2); |
|
|
|
} |
|
|
|
|
|
|
|
/* end of hover box */ |
|
|
|
.satusbar { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar * { |
|
|
|
vertical-align: top; |
|
|
|
text-shadow: 1px 1px 1px #fcfcfc; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar div { |
|
|
|
position: relative; |
|
|
|
display: inline; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .xero { |
|
|
|
width: 40px; |
|
|
|
height: 100%; |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 5px; |
|
|
|
display: inline-block; |
|
|
|
background-color: white; |
|
|
|
box-shadow: inset 0px 0px 2px dotted white; |
|
|
|
border-radius: 100px; |
|
|
|
background-image: url(../img/xero.png); |
|
|
|
background-size: 40px; |
|
|
|
box-shadow: 0px 0px 10px white; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .wifi i, |
|
|
|
.statusbar .xero i, |
|
|
|
.statusbar .csv i { |
|
|
|
font-size: 20px; |
|
|
|
color: red; |
|
|
|
position: absolute; |
|
|
|
right: 0px; |
|
|
|
top: -5px; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .wifi { |
|
|
|
width: 40px; |
|
|
|
height: 100%; |
|
|
|
margin-left: 0px; |
|
|
|
margin-right: 5px; |
|
|
|
display: inline-block; |
|
|
|
background-color: white; |
|
|
|
box-shadow: inset 0px 0px 2px black; |
|
|
|
border-radius: 100px; |
|
|
|
background-image: url(../img/wnet.png); |
|
|
|
background-size: 40px; |
|
|
|
box-shadow: 0px 0px 10px white; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .csv { |
|
|
|
width: 40px; |
|
|
|
height: 100%; |
|
|
|
margin-left: 0px; |
|
|
|
margin-right: 5px; |
|
|
|
display: inline-block; |
|
|
|
background-color: white; |
|
|
|
box-shadow: inset 0px 0px 2px black; |
|
|
|
border-radius: 100px; |
|
|
|
background-image: url(../img/csv.png); |
|
|
|
background-size: 40px; |
|
|
|
box-shadow: 0px 0px 10px white; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .xero:hover, |
|
|
|
.statusbar .wifi:hover, |
|
|
|
.statusbar .csv:hover { |
|
|
|
box-shadow: 0px 0px 3px black; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .wages { |
|
|
|
text-align: center; |
|
|
|
width: 150px; |
|
|
|
height: 100%; |
|
|
|
display: inline-block; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: bold; |
|
|
|
color: dimgrey; |
|
|
|
border: 1px dotted white; |
|
|
|
position: absolute; |
|
|
|
right: 400px; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar .workinghours { |
|
|
|
background-color: transparent; |
|
|
|
width: 175px; |
|
|
|
height: 100%; |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
right: 220px; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar #woh:hover { |
|
|
|
cursor: pointer; |
|
|
|
animation: blinker 0.3s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.workinghours label { |
|
|
|
transform: unset; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 50px; |
|
|
|
height: 100%; |
|
|
|
padding: 0.5em; |
|
|
|
text-align: left; |
|
|
|
display: inline-block; |
|
|
|
color: #A974D; |
|
|
|
font-weight: bolder; |
|
|
|
line-height: 15px; |
|
|
|
background-color: transparent; |
|
|
|
margin-right: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar input { |
|
|
|
margin: 0px; |
|
|
|
width: 115px; |
|
|
|
height: 100%; |
|
|
|
display: inline-block; |
|
|
|
font-size: 24px; |
|
|
|
background: transparent; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.statusbar button[name='confirmschedule'] { |
|
|
|
margin-top: 5px; |
|
|
|
margin-bottom: 5px ; |
|
|
|
text-shadow: 0px 0px 2px black; |
|
|
|
width: 200px ; |
|
|
|
height: calc( 100% - 10px ); |
|
|
|
font-weight: bolder; |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.sheetsheader { |
|
|
|
height: 110px; |
|
|
|
background: darkorange; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
div.prevweek { |
|
|
|
display: inline-block; |
|
|
|
height: 70px; |
|
|
|
width: 40px; |
|
|
|
font-size: 36px; |
|
|
|
padding-top: 5px; |
|
|
|
padding-left: 2px; |
|
|
|
float: left; |
|
|
|
background: darkorange; |
|
|
|
} |
|
|
|
|
|
|
|
div.prevweek span:hover, |
|
|
|
div.nextweek span:hover { |
|
|
|
box-shadow: 1px 1px 10px black; |
|
|
|
border-radius: 20px; |
|
|
|
color: black; |
|
|
|
} |
|
|
|
|
|
|
|
div.nextweek { |
|
|
|
display: inline-block; |
|
|
|
height: 70px; |
|
|
|
width: 40px; |
|
|
|
font-size: 36px; |
|
|
|
padding-top: 5px; |
|
|
|
padding-left: 4px; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly { |
|
|
|
width: calc( 100% - 80px ) ; |
|
|
|
display: inline-block; |
|
|
|
background-color: black; |
|
|
|
height: 70px; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div { |
|
|
|
margin: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.weekname { |
|
|
|
position: relative; |
|
|
|
width: 170px; |
|
|
|
top: -5px; |
|
|
|
border: 2px solid grey; |
|
|
|
border-radius: 10px; |
|
|
|
text-align: center; |
|
|
|
color: white; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */ |
|
|
|
background: rgb(181,189,200); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.weekname input{ |
|
|
|
width: 80px; |
|
|
|
height: 20px; |
|
|
|
border:0px; |
|
|
|
background-color:transparent; |
|
|
|
color: white; |
|
|
|
padding-left:4px; |
|
|
|
padding-right:4px; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.weekname input.hasDatepicker{ |
|
|
|
background-image:none |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.weekname.prev { |
|
|
|
position: absolute; |
|
|
|
left: 100px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.weekname.next { |
|
|
|
position: absolute; |
|
|
|
right: 100px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly >div.weekname:hover, |
|
|
|
div.weekly div[name='copyschedule']:hover { |
|
|
|
cursor: pointer; |
|
|
|
box-shadow: 0px 0px 10px #2c87f0; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekly div.copyprogress { |
|
|
|
position: absolute; |
|
|
|
display: inline-block; |
|
|
|
width: calc(100% - 80px); |
|
|
|
height: 15px; |
|
|
|
top: 0px; |
|
|
|
border-radius: 2px; |
|
|
|
box-shadow: inset 1px 1px 2px black; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */ |
|
|
|
background: rgb(254,252,234); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.copyprogress div[name='copyschedule'] { |
|
|
|
position: relative; |
|
|
|
top: -5px; |
|
|
|
width: 150px; |
|
|
|
height: 25px; |
|
|
|
padding: 0px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: auto; |
|
|
|
z-index: 1; |
|
|
|
color: white; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */ |
|
|
|
background: rgb(181,189,200); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
#gotoweek { |
|
|
|
width: 50%; |
|
|
|
background-color: transparent; |
|
|
|
border: 0px; |
|
|
|
color: white; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
div.weekdays { |
|
|
|
position: absolute; |
|
|
|
top: 15px; |
|
|
|
width: calc(100% - 80px); |
|
|
|
height: 55px; |
|
|
|
background-color: darkorange; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1, |
|
|
|
div.week2 { |
|
|
|
display: inline-block; |
|
|
|
width: 45%; |
|
|
|
height: 55px; |
|
|
|
background-color: darkorange; |
|
|
|
text-align: justify; |
|
|
|
border: 1px dashed lightgrey; |
|
|
|
padding-left: 10px; |
|
|
|
padding-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1:hover, |
|
|
|
div.week2:Hover { |
|
|
|
border-radius: 20px; |
|
|
|
box-shadow: 0px 0px 2px #2c87f0 inset; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */ |
|
|
|
background: rgb(235,241,246); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.week1.filtered, |
|
|
|
div.week2.filtered { |
|
|
|
border-radius: 20px; |
|
|
|
|
|
|
|
/* background:white; */ |
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */ |
|
|
|
background: rgb(235,241,246); /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.week1:after, |
|
|
|
div.week2:after { |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1 { |
|
|
|
position: relative; |
|
|
|
left: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.week2 { |
|
|
|
position: relative; |
|
|
|
left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1 > div, |
|
|
|
div.week2 > div { |
|
|
|
display: inline-block; |
|
|
|
text-align: center; |
|
|
|
width: 10%; |
|
|
|
height: 40px; |
|
|
|
margin-top: 5px; |
|
|
|
font-weight: bolder; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1 div:hover, |
|
|
|
div.week2 div:hover { |
|
|
|
cursor: pointer; |
|
|
|
box-shadow: 0px 0px 10px red; |
|
|
|
} |
|
|
|
|
|
|
|
div.week1 > div { |
|
|
|
box-shadow: 0px 0px 10px white inset; |
|
|
|
} |
|
|
|
|
|
|
|
.week1color { |
|
|
|
color: black; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */ |
|
|
|
background: #ebe9f9; /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.week2 > div { |
|
|
|
box-shadow: 0px 0px 10px white inset; |
|
|
|
} |
|
|
|
|
|
|
|
.week2color { |
|
|
|
color: white; |
|
|
|
|
|
|
|
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */ |
|
|
|
background: #627d4d; /* Old browsers */ |
|
|
|
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */ |
|
|
|
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */ |
|
|
|
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */ |
|
|
|
} |
|
|
|
|
|
|
|
div.assignment > div { |
|
|
|
color: navy; |
|
|
|
background-color: white; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: lighter; |
|
|
|
border: 1px dotted lightgrey; |
|
|
|
} |
|
|
|
|
|
|
|
/* peple item card*/ |
|
|
|
.peopleitem div span.checked { |
|
|
|
color: orange; |
|
|
|
} |
|
|
|
|
|
|
|
.peopleitem div.card div.front > div[name="title"] { |
|
|
|
height: auto; |
|
|
|
text-align: center; |
|
|
|
background-color: lightgrey; |
|
|
|
} |
|
|
|
|
|
|
|
div.front > span[name='icon'] { |
|
|
|
width: 100%; |
|
|
|
height: 15px; |
|
|
|
background-color: dimgrey; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
div.back > span.icon { |
|
|
|
width: 100%; |
|
|
|
background-color: lightgrey; |
|
|
|
color: dimgrey; |
|
|
|
} |
|
|
|
|
|
|
|
div.front > span.badge, |
|
|
|
div.back > span.badge { |
|
|
|
border-radius: 50%; |
|
|
|
display: inline-block; |
|
|
|
padding-left: 8px; |
|
|
|
padding-right: 8px; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
right: -5px; |
|
|
|
top: -5px; |
|
|
|
} |
|
|
|
|
|
|
|
span.badge.blue { |
|
|
|
color: #fff; |
|
|
|
box-shadow: 1px 1px 10px black; |
|
|
|
background-color: black; |
|
|
|
} |
|
|
|
|
|
|
|
span.badge.pink { |
|
|
|
color: black; |
|
|
|
box-shadow: 1px 1px 10px white; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* div table */ |
|
|
|
div.blueTable { |
|
|
|
border: 1px solid #1C6EA4; |
|
|
|
background-color: white; |
|
|
|
width: 100%; |
|
|
|
text-align: left; |
|
|
|
border-collapse: collapse; |
|
|
|
border: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
div.blueTable.emptyrecord { |
|
|
|
background-color: #eeeeee; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableCell, |
|
|
|
.divTable.blueTable .divTableHead, |
|
|
|
{ |
|
|
|
border: 1px solid #AAAAAA; |
|
|
|
padding: 3px 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableBody .divTableCell { |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableRow:nth-child(even) { |
|
|
|
background: #D0E4F5; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableHeading { |
|
|
|
background: #1C6EA4; |
|
|
|
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); |
|
|
|
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); |
|
|
|
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%); |
|
|
|
border-bottom: 2px solid #444444; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableHeading .divTableHead { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: bold; |
|
|
|
color: #FFFFFF; |
|
|
|
border-left: 2px solid #D0E4F5; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.blueTable .divTableHeading .divTableHead:first-child { |
|
|
|
border-left: none; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable .tableFootStyle { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
color: #FFFFFF; |
|
|
|
background: #D0E4F5; |
|
|
|
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); |
|
|
|
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); |
|
|
|
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); |
|
|
|
border-top: 2px solid #444444; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable .tableFootStyle { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable .tableFootStyle .links { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable .tableFootStyle .links a { |
|
|
|
display: inline-block; |
|
|
|
background: #1C6EA4; |
|
|
|
color: #FFFFFF; |
|
|
|
padding: 2px 8px; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable.outerTableFooter { |
|
|
|
border-top: none; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTable.outerTableFooter .tableFootStyle { |
|
|
|
padding: 3px 5px; |
|
|
|
} |
|
|
|
|
|
|
|
/* DivTable.com */ |
|
|
|
.divTable { |
|
|
|
display: table; |
|
|
|
margin: 3px 0px 3px 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.highlight { |
|
|
|
box-shadow: 1px 1px 10px green; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.invalidjob.highlight { |
|
|
|
box-shadow: 1px 1px 10px #f50202; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable.highlight.newcopy { |
|
|
|
box-shadow: 1px 1px 10px orange; |
|
|
|
border: 5px orange solid; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableRow { |
|
|
|
display: table-row; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableRow.errmsg { |
|
|
|
background-color: white; |
|
|
|
font-weight: bolder; |
|
|
|
color: red; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableHeading { |
|
|
|
display: table-header-group; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableCell, |
|
|
|
.divTableHead { |
|
|
|
display: table-cell; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableHeading { |
|
|
|
display: table-header-group; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableFoot { |
|
|
|
display: table-footer-group; |
|
|
|
} |
|
|
|
|
|
|
|
.divTableBody { |
|
|
|
display: table-row-group; |
|
|
|
} |
|
|
|
|
|
|
|
/* customized part of div table */ |
|
|
|
div.sheettableheader { |
|
|
|
margin-top: 0px; |
|
|
|
height: 36px; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
div.btos, |
|
|
|
div.bstart, |
|
|
|
div.bfinish, |
|
|
|
div.brate, |
|
|
|
div.bstaff, |
|
|
|
div.bclient, |
|
|
|
div.bconfirmed, |
|
|
|
div.bsave, |
|
|
|
div.brating, |
|
|
|
div.bdelete { |
|
|
|
width: 10%; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
div.btos { |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
div.bstart, |
|
|
|
div.bfinish { |
|
|
|
width: 11%; |
|
|
|
} |
|
|
|
|
|
|
|
div.brate { |
|
|
|
width: 10%; |
|
|
|
max-width: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.divTable div > select { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
div.bdelete, |
|
|
|
div.bsave, |
|
|
|
div.bconfirmed { |
|
|
|
text-align: center; |
|
|
|
width: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
div.brating { |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.brating { |
|
|
|
unicode-bidi: bidi-override; |
|
|
|
direction: rtl; |
|
|
|
} |
|
|
|
|
|
|
|
div.workspace .brating > span:hover:before, |
|
|
|
div.workspace .brating > span:hover ~ span:before { |
|
|
|
content: "\2605"; |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
div.bsave span.ticon-copy { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
div.bsave span.ticon-save { |
|
|
|
display: inline-block; |
|
|
|
border: 3px solid lightgrey; |
|
|
|
padding: 5px; |
|
|
|
border-radius: 5px; |
|
|
|
color: black; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
div.bsave.saved span.ticon-save { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
div.bsave.saved span.ticon-copy { |
|
|
|
display: inline-block; |
|
|
|
border: 3px solid orange; |
|
|
|
padding: 5px; |
|
|
|
border-radius: 20px; |
|
|
|
color: orange; |
|
|
|
} |
|
|
|
|
|
|
|
div.bdelete span.ticon-trash { |
|
|
|
display: inline-block; |
|
|
|
border: 3px solid lightgrey; |
|
|
|
padding: 5px; |
|
|
|
border-radius: 5px; |
|
|
|
color: red; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
div.workspace div > span:hover { |
|
|
|
box-shadow: 0px 0px 10px black; |
|
|
|
} |
|
|
|
|
|
|
|
div.divTableHeading div > span:hover { |
|
|
|
cursor: pointer; |
|
|
|
animation: blinker 0.3s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
/* short code for the table */ |
|
|
|
div.btos select, |
|
|
|
div.bstart input, |
|
|
|
div.bfinish input { |
|
|
|
width: 100%; |
|
|
|
height: 98%; |
|
|
|
} |
|
|
|
|
|
|
|
div.divTable.validjob { |
|
|
|
border: 0px solid white; |
|
|
|
} |
|
|
|
|
|
|
|
div.divTable.invalidjob { |
|
|
|
border-left: 2px solid red; |
|
|
|
border-right: 2px solid red; |
|
|
|
} |
|
|
|
|
|
|
|
div.divTable .invalid { |
|
|
|
background-color: yellow; |
|
|
|
} |
|
|
|
|
|
|
|
/* end of div table */ |
|
|
|
/* pop up message box */ |
|
|
|
.bts_message .ult_modal-body { |
|
|
|
height: 50vh; |
|
|
|
overflow: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
.bts_message .ult_modal-body .sent { |
|
|
|
color: green; |
|
|
|
} |
|
|
|
|
|
|
|
.bts_message .ult_modal-body .nojob { |
|
|
|
color: dimgrey; |
|
|
|
} |
|
|
|
|
|
|
|
.bts_message .ult_modal-body .error { |
|
|
|
color: red; |
|
|
|
} |
|
|
|
|
|
|
|
.bts_message .ult_modal-body .span { |
|
|
|
font-weight: 900; |
|
|
|
} |