Patrick
/
acaresydney_ts
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
timesheet source code
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 Commits
1 Branch
1.5MB
Tree: 926d121f88
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '926d121f88'
${ noResults }
acaresydney_ts/css/bts_timesheet.css

897 lines
20KB
Raw Blame History 

  1. html,

  2. body {

  3.     margin: 0px !important;

  4.     overflow: hidden;

  5. }

  6. 

  7. .bts_hidden{

  8. 	z-index: -1;

  9. }

  10. 

  11. .blink_me {

  12. 	animation: blinker 0.3s linear infinite;

  13. }

  14. 

  15. @keyframes blinker { 

  16. 	50% { opacity: 0; }

  17. }

  18. 

  19. .titlebar_gradient {

  20.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100 */

  21.     background: rgb(246,230,180); /* Old browsers */

  22.     background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); /* FF3.6-15 */

  23.     background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10-25,Safari5.1-6 */

  24.     background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  25.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */

  26. }

  27. 

  28. 

  29. .sheettitle h1:hover{

  30. 	text-decoration: underline;

  31. 	font-weight: bolder;

  32. 	cursor: pointer;

  33. 	animation: blinker 1s linear infinite;

  34. }

  35. 

  36. .timesheets {

  37.     width: calc(100vw - 300px);

  38.     height: 100vh;

  39.     margin: 0px;

  40.     padding: 0px;

  41.     left: 150px;

  42.     position: fixed;

  43.     background-color: red;

  44.     overflow: hidden;

  45. }

  46. 

  47. .peoplebar {

  48.     position: fixed;

  49.     top: 0px;

  50.     width: 150px;

  51.     height: 100vh;

  52.     background: lightgrey;

  53.     overflow: hidden;

  54. }

  55. 

  56. .peoplebar.left {

  57.     border-radius: 5px 0px 0px 0px;

  58.     left: 0px;

  59. }

  60. 

  61. .peoplebar.right {

  62.     right: 0px;

  63.     border-radius: 0px 5px 0px 0px;

  64. }

  65. 

  66. .timesheets .sheettitle {

  67.     padding-top: 8px;

  68.     text-align: center;

  69.     background-color: lightgrey;

  70.     height: 40px;

  71.     text-shadow: 1px 1px 1px #fcfcfc;

  72. }

  73. 

  74. .timesheets .workspace {

  75.     height: calc(100vh - 190px);

  76.     background-color: white;

  77.     overflow-x: hidden;

  78.     overflow-y: scroll;

  79. }

  80. 

  81. .timesheets .workspace img {

  82. 	display: block;

  83. 	margin-top: 140px;

  84. 	margin-left:auto;

  85. 	margin-right:auto;

  86. }

  87. 

  88. 

  89. .timesheets .statusbar {

  90.     position: relative;

  91.     height: 40px;

  92.     background-color: ivory;

  93.     box-shadow: 1px 1px 10px black;

  94. }

  95. 

  96. /* staff search bar*/

  97. .b_search {

  98.     position: relative;

  99.     height: 40px;

  100. }

  101. 

  102. .b_search input {

  103.     margin-top: 5px;

  104.     padding-left: 20px;

  105.     padding-right: 20px;

  106.     border-radius: 20px;

  107.     box-shadow: 1px 1px 2px grey inset;

  108.     height: 30px;

  109. }

  110. 

  111. .b_search .ticon-search {

  112.     position: absolute;

  113.     top: 15px;

  114.     left: 5px;

  115. }

  116. 

  117. .b_search .ticon-times-circle-o {

  118.     position: absolute;

  119.     top: 15px;

  120.     right: 5px;

  121. }

  122. 

  123. .peoplebar button {

  124.     width: 100%;

  125.     padding: 0px;

  126.     height: 20px;

  127. }

  128. 

  129. .peoplebar .stafflist,

  130. .peoplebar .clientlist {

  131.     height: calc(100vh - 80px);

  132.     background-color: dimgrey;

  133.     overflow: hidden;

  134. 	text-align: center;

  135.     /*    scroll-behavior: smooth;  */

  136. }

  137. 

  138. .peopleitem {

  139.     position: relative;

  140.     margin-top: 10px;

  141.     margin-bottom: 10px;

  142.     height: 100px;

  143.     background: transparent;

  144. }

  145. 

  146. /* hover box */

  147. div.peopleitem > label {

  148.     -webkit-perspective: 1000px;

  149.     perspective: 1000px;

  150.     -webkit-transform-style: preserve-3d;

  151.     transform-style: preserve-3d;

  152.     display: block;

  153.     width: 100%;

  154.     height: 100px;

  155.     position: absolute;

  156.     left: 50%;

  157.     top: 50%;

  158.     -webkit-transform: translate(-50%, -50%);

  159.     transform: translate(-50%, -50%);

  160.     cursor: pointer;

  161. }

  162. 

  163. div.peopleitem .card {

  164.     position: relative;

  165.     height: 100%;

  166.     width: 95%;

  167.     margin: auto;

  168.     -webkit-transform-style: preserve-3d;

  169.     transform-style: preserve-3d;

  170.     -webkit-transition: all 600ms;

  171.     transition: all 600ms;

  172.     z-index: 20;

  173.     border: 1px solid black;

  174.     box-shadow: 1px 1px 10px black;

  175. }

  176. 

  177. div.peopleitem .card > div {

  178.     position: absolute;

  179.     height: 100%;

  180.     width: 100%;

  181.     background: #FFF;

  182.     text-align: center;

  183. 

  184.     /* line-height: 200px; */

  185.     -webkit-backface-visibility: hidden;

  186.     backface-visibility: hidden;

  187.     border-radius: 2px;

  188. }

  189. 

  190. div.peopleitem .card .back {

  191.     background: #222;

  192.     color: #FFF;

  193.     -webkit-transform: rotateX(180deg);

  194.     transform: rotateX(180deg);

  195. }

  196. 

  197. div.peopleitem label:hover .card {

  198.     -webkit-transform: rotateX(20deg);

  199.     transform: rotateX(20deg);

  200.     box-shadow: 0 20px 20px rgba(50,50,50,.2);

  201. }

  202. 

  203. div.peopleitem input {

  204.     display: none;

  205. }

  206. 

  207. div.peopleitem :checked + .card {

  208.     transform: rotateX(180deg);

  209.     -webkit-transform: rotateX(180deg);

  210. }

  211. 

  212. div.peopleitem label:hover :checked + .card {

  213.     transform: rotateX(160deg);

  214.     -webkit-transform: rotateX(160deg);

  215.     box-shadow: 0 20px 20px rgba(255,255,255,.2);

  216. }

  217. 

  218. /* end of hover box */

  219. .satusbar {

  220.     position: relative;

  221. }

  222. 

  223. .statusbar * {

  224.     vertical-align: top;

  225.     text-shadow: 1px 1px 1px #fcfcfc;

  226. }

  227. 

  228. .statusbar div {

  229.     position: relative;

  230.     display: inline;

  231. }

  232. 

  233. .statusbar .xero {

  234.     width: 40px;

  235.     height: 100%;

  236.     margin-left: 5px;

  237.     margin-right: 5px;

  238.     display: inline-block;

  239.     background-color: white;

  240.     box-shadow: inset 0px 0px 2px dotted white;

  241.     border-radius: 100px;

  242.     background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/xero.png);

  243.     background-size: 40px;

  244.     box-shadow: 0px 0px 10px white;

  245. }

  246. 

  247. .statusbar .wifi i,

  248. .statusbar .xero i {

  249.     font-size: 20px;

  250.     color: red;

  251.     position: absolute;

  252.     right: 0px;

  253.     top: -5px;

  254. }

  255. 

  256. .statusbar .wifi {

  257.     width: 40px;

  258.     height: 100%;

  259.     margin-left: 0px;

  260.     margin-right: 100px;

  261.     display: inline-block;

  262.     background-color: white;

  263.     box-shadow: inset 0px 0px 2px black;

  264.     border-radius: 100px;

  265.     background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/wnet.png);

  266.     background-size: 40px;

  267.     box-shadow: 0px 0px 10px white;

  268. }

  269. 

  270. .statusbar .xero:hover,

  271. .statusbar .wifi:hover {

  272.     box-shadow: 0px 0px 3px black;

  273. }

  274. 

  275. .statusbar .wages {

  276.     text-align: center;

  277.     width: 150px;

  278.     height: 100%;

  279.     display: inline-block;

  280.     background-color: transparent;

  281.     font-size: 24px;

  282.     font-weight: bold;

  283.     color: dimgrey;

  284.     border: 1px dotted white;

  285.     position: absolute;

  286.     right: 400px;

  287. }

  288. 

  289. .statusbar .workinghours {

  290.     background-color: transparent;

  291.     width: 175px;

  292.     height: 100%;

  293.     display: inline-block;

  294.     position: absolute;

  295.     right: 220px;

  296. 	

  297. }

  298. .statusbar #woh:hover {

  299. 	cursor: pointer;

  300. 	animation: blinker 0.3s linear infinite;

  301. }

  302. .workinghours label {

  303.     transform: unset;

  304.     left: 0;

  305.     top: 0;

  306.     width: 50px;

  307.     height: 100%;

  308.     padding: 0.5em;

  309.     text-align: left;

  310.     display: inline-block;

  311.     color: #A974D;

  312.     font-weight: bolder;

  313.     line-height: 15px;

  314.     background-color: transparent;

  315.     margin-right: 0px;

  316. }

  317. 

  318. .statusbar input {

  319.     margin: 0px;

  320.     width: 115px;

  321.     height: 100%;

  322.     display: inline-block;

  323.     font-size: 24px;

  324.     background: transparent;

  325.     text-align: center;

  326. }

  327. 

  328. .statusbar button[name='confirmschedule'] {

  329.     margin-top: 5px;

  330.     margin-bottom: 5px ;

  331.     text-shadow: 0px 0px 2px black;

  332.     width: 200px ;

  333.     height: calc( 100% - 10px );

  334.     font-weight: bolder;

  335.     position: absolute;

  336.     right: 10px;

  337. }

  338. 

  339. div.sheetsheader {

  340.     height: 110px;

  341.     background: darkorange;

  342.     position: relative;

  343. }

  344. 

  345. div.prevweek {

  346.     display: inline-block;

  347.     height: 70px;

  348.     width: 40px;

  349.     font-size: 36px;

  350.     padding-top: 5px;

  351.     padding-left: 2px;

  352.     float: left;

  353.     background: darkorange;

  354. }

  355. 

  356. div.prevweek span:hover,

  357. div.nextweek span:hover {

  358.     box-shadow: 1px 1px 10px black;

  359. 	border-radius: 20px;

  360. 	color: black;

  361. }

  362. 

  363. div.nextweek {

  364.     display: inline-block;

  365.     height: 70px;

  366.     width: 40px;

  367.     font-size: 36px;

  368.     padding-top: 5px;

  369.     padding-left: 4px;

  370.     float: right;

  371. }

  372. 

  373. div.weekly {

  374.     width: calc( 100% - 80px ) ;

  375.     display: inline-block;

  376.     background-color: black;

  377.     height: 70px;

  378. }

  379. 

  380. div.weekly div {

  381.     margin: 0px;

  382. }

  383. 

  384. div.weekly div.weekname {

  385.     position: relative;

  386.     width: 130px;

  387.     top: -5px;

  388.     border: 2px solid grey;

  389.     border-radius: 10px;

  390.     text-align: center;

  391. 	

  392.     color: white;	

  393. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */

  394. 	background: rgb(181,189,200); /* Old browsers */

  395. 	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 */

  396. 	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 */

  397. 	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+ */

  398. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	

  399. }

  400. 

  401. div.weekly div.weekname.prev {

  402.     position: absolute;

  403.     left: 100px;

  404.     z-index: 1;

  405. }

  406. 

  407. div.weekly div.weekname.next {

  408.     position: absolute;

  409.     right: 100px;

  410.     z-index: 1;

  411. }

  412. 

  413. div.weekly >div.weekname:hover,

  414. div.weekly div[name='copyschedule']:hover

  415. {

  416. 	cursor: pointer;

  417. 	box-shadow: 0px 0px 10px #2c87f0;

  418. }

  419. 

  420. div.weekly div.copyprogress {

  421.     position: absolute;

  422.     display: inline-block;

  423.     width: calc(100% - 80px);

  424.     height: 15px;

  425.     top: 0px;

  426.     border-radius: 2px;

  427.     box-shadow: inset 1px 1px 2px black;

  428.     text-align:center;

  429. 	

  430. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */

  431. 	background: rgb(254,252,234); /* Old browsers */

  432. 	background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */

  433. 	background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */

  434. 	background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  435. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */	

  436. }

  437. 

  438. div.copyprogress div[name='copyschedule'] {

  439.     position: relative;

  440.     top: -5px;

  441.     width: 100px;

  442.     height: 25px;

  443.     padding: 0px;

  444.     border-radius: 10px;

  445. 

  446.     margin:auto;

  447.     z-index:1;

  448. 	

  449. 	color: white;	

  450. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */

  451. 	background: rgb(181,189,200); /* Old browsers */

  452. 	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 */

  453. 	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 */

  454. 	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+ */

  455. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	

  456. }

  457. 

  458. div.weekdays {

  459.     position: absolute;

  460.     top: 15px;

  461.     width: calc(100% - 80px);

  462.     height: 55px;

  463.     background-color: darkorange;

  464.     text-align: center;

  465. }

  466. 

  467. div.week1,

  468. div.week2 {

  469.     display: inline-block;

  470.     width: 45%;

  471.     height: 55px;

  472.     background-color: darkorange;

  473.     text-align: justify;

  474.     border: 1px dashed lightgrey;

  475.     padding-left: 10px;

  476.     padding-right: 10px;

  477. }

  478. div.week1:hover,

  479. div.week2:Hover {

  480. 	border-radius: 20px;

  481. 	box-shadow: 0px 0px 2px #2c87f0 inset; 

  482. 	cursor: pointer;

  483. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */

  484. 	background: rgb(235,241,246); /* Old browsers */

  485. 	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 */

  486. 	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 */

  487. 	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+ */

  488. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	

  489. }

  490. 

  491. div.week1.filtered,

  492. div.week2.filtered{

  493. 	border-radius: 20px;

  494. 	/* background:white; */

  495. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */

  496. 	background: rgb(235,241,246); /* Old browsers */

  497. 	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 */

  498. 	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 */

  499. 	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+ */

  500. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	

  501. }

  502. 

  503. div.week1:after,

  504. div.week2:after {

  505.     content: '';

  506.     display: inline-block;

  507.     width: 100%;

  508. }

  509. 

  510. div.week1 {

  511.     position: relative;

  512.     left: -10px;

  513. }

  514. 

  515. div.week2 {

  516.     position: relative;

  517.     left: 10px;

  518. }

  519. 

  520. div.week1 > div,

  521. div.week2 > div {

  522.     display: inline-block;

  523.     text-align: center;

  524.     width: 10%;

  525.     height: 40px;

  526.     margin-top: 5px;

  527.     font-weight: bolder;

  528. 	border-radius: 10px;

  529. }

  530. 

  531. div.week1 div:hover,

  532. div.week2 div:hover

  533. {

  534. 	cursor:pointer;

  535. 	box-shadow: 0px 0px 10px red;

  536. }

  537. 

  538. div.week1 > div {

  539.     box-shadow: 0px 0px 10px white inset;

  540. }

  541. .week1color{

  542. 	color: black;

  543. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */

  544. 	background: #ebe9f9; /* Old browsers */

  545. 	background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */

  546. 	background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */

  547. 	background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  548. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */

  549. }

  550. 

  551. div.week2 > div {

  552.     box-shadow: 0px 0px 10px white inset;

  553. }

  554. .week2color{

  555. 	color:white;

  556. 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */

  557. 	background: #627d4d; /* Old browsers */

  558. 	background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */

  559. 	background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */

  560. 	background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  561. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

  562. }

  563. 

  564. div.assignment > div {

  565.     color: navy;

  566.     background-color: white;

  567.     font-size: 20px;

  568.     font-weight: lighter;

  569.     border: 1px dotted lightgrey;

  570. }

  571. 

  572. /* peple item card*/

  573. .peopleitem div span.checked {

  574.     color: orange;

  575. }

  576. 

  577. .peopleitem div.card div.front > div[name="title"] {

  578.     height: auto;

  579.     text-align: center;

  580.     background-color: lightgrey;

  581. }

  582. 

  583. div.front > span[name='icon'] {

  584.     width: 100%;

  585.     height: 15px;

  586.     background-color: dimgrey;

  587.     color: white;

  588. }

  589. 

  590. div.back > span.icon {

  591.     width: 100%;

  592.     background-color: lightgrey;

  593.     color: dimgrey;

  594. }

  595. 

  596. div.front >  span.badge,

  597. div.back >  span.badge {

  598.     border-radius: 50%;

  599.     display: inline-block;

  600.     padding-left: 8px;

  601.     padding-right: 8px;

  602.     text-align: center;

  603.     position: absolute;

  604.     right: -5px;

  605.     top: -5px;

  606. }

  607. 

  608. span.badge.blue {

  609.     color: #fff;

  610.     box-shadow: 1px 1px 10px black;

  611.     background-color: black;

  612. }

  613. 

  614. span.badge.pink {

  615.     color: black;

  616.     box-shadow: 1px 1px 10px white;

  617.     background-color: white;

  618. }

  619. 

  620. /* div table */

  621. div.blueTable {

  622.     border: 1px solid #1C6EA4;

  623.     background-color: white;

  624.     width: 100%;

  625.     text-align: left;

  626.     border-collapse: collapse;

  627. 	border:0px;

  628. }

  629. 

  630. div.blueTable.emptyrecord{

  631. 	background-color: #eeeeee;

  632. }

  633. 

  634. .divTable.blueTable .divTableCell,

  635. .divTable.blueTable .divTableHead,

  636.  {

  637.     border: 1px solid #AAAAAA;

  638.     padding: 3px 2px;

  639. }

  640. 

  641. .divTable.blueTable .divTableBody .divTableCell {

  642.     font-size: 15px;

  643. }

  644. 

  645. .divTable.blueTable .divTableRow:nth-child(even) {

  646.     background: #D0E4F5;

  647. }

  648. 

  649. .divTable.blueTable .divTableHeading {

  650.     background: #1C6EA4;

  651.     background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  652.     background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  653.     background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  654.     border-bottom: 2px solid #444444;

  655. }

  656. 

  657. .divTable.blueTable .divTableHeading .divTableHead {

  658.     font-size: 15px;

  659.     font-weight: bold;

  660.     color: #FFFFFF;

  661.     border-left: 2px solid #D0E4F5;

  662. }

  663. 

  664. .divTable.blueTable .divTableHeading .divTableHead:first-child {

  665.     border-left: none;

  666. }

  667. 

  668. .blueTable .tableFootStyle {

  669.     font-size: 14px;

  670.     font-weight: bold;

  671.     color: #FFFFFF;

  672.     background: #D0E4F5;

  673.     background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  674.     background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  675.     background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  676.     border-top: 2px solid #444444;

  677. }

  678. 

  679. .blueTable .tableFootStyle {

  680.     font-size: 14px;

  681. }

  682. 

  683. .blueTable .tableFootStyle .links {

  684.     text-align: right;

  685. }

  686. 

  687. .blueTable .tableFootStyle .links a {

  688.     display: inline-block;

  689.     background: #1C6EA4;

  690.     color: #FFFFFF;

  691.     padding: 2px 8px;

  692.     border-radius: 5px;

  693. }

  694. 

  695. .blueTable.outerTableFooter {

  696.     border-top: none;

  697. }

  698. 

  699. .blueTable.outerTableFooter .tableFootStyle {

  700.     padding: 3px 5px;

  701. }

  702. 

  703. /* DivTable.com */

  704. .divTable {

  705.     display: table;

  706. 	margin: 3px 0px 3px 0px;

  707. }

  708. 

  709. .divTable.highlight{

  710. 	box-shadow: 1px 1px 10px green;

  711. }

  712. 

  713. .divTable.invalidjob.highlight{

  714. 	box-shadow: 1px 1px 10px #f50202;

  715. }

  716. 

  717. .divTable.highlight.newcopy{

  718. 	box-shadow: 1px 1px 10px orange;

  719. 	border:5px orange solid;

  720. }

  721. 

  722. 

  723. .divTableRow {

  724.     display: table-row;

  725. }

  726. 

  727. .divTableRow.errmsg{

  728. 	background-color:white;

  729. 	font-weight:bolder;

  730. 	color:red;

  731. }

  732. 

  733. .divTableHeading {

  734.     display: table-header-group;

  735. }

  736. 

  737. .divTableCell,

  738. .divTableHead {

  739.     display: table-cell;

  740. }

  741. 

  742. .divTableHeading {

  743.     display: table-header-group;

  744. }

  745. 

  746. .divTableFoot {

  747.     display: table-footer-group;

  748. }

  749. 

  750. .divTableBody {

  751.     display: table-row-group;

  752. }

  753. 

  754. /* customized part of div table */

  755. div.sheettableheader {

  756.     margin-top: 0px;

  757.     height: 36px;

  758.     overflow-x: hidden;

  759.     overflow-y: scroll;

  760. }

  761. 

  762. div.btos,

  763. div.bstart,

  764. div.bfinish,

  765. div.brate,

  766. div.bstaff,

  767. div.bclient,

  768. div.bconfirmed,

  769. div.bsave,

  770. div.brating,

  771. div.bdelete {

  772.     width: 10%;

  773.     height: 30px;

  774. }

  775. 

  776. div.btos {

  777.     width: 20%;

  778. }

  779. 

  780. div.bstart,

  781. div.bfinish{

  782. 	width:11%;

  783. }

  784. 

  785. div.brate{

  786. 	width: 10%;

  787. 	max-width: 20px;

  788. }

  789. .divTable div > select{

  790. 	width: 100%;

  791. 	height: 100%;

  792. }

  793. 

  794. 

  795. div.bdelete,

  796. div.bsave,

  797. div.bconfirmed {

  798. 	text-align:center;

  799.     width: 5%;

  800. }

  801. 

  802. div.brating{

  803.     text-align: center;

  804. 	cursor: pointer;

  805. }

  806. 

  807. 

  808. .brating {

  809.   unicode-bidi: bidi-override;

  810.   direction: rtl;

  811. }

  812. div.workspace .brating > span:hover:before,

  813. div.workspace .brating > span:hover ~ span:before {

  814.    content: "\2605";

  815.    position: absolute;

  816. }

  817. 

  818. div.bsave span.ticon-copy{

  819.     display: none;

  820. }

  821. div.bsave span.ticon-save{

  822.     display: inline-block;

  823. 	border: 3px solid lightgrey;

  824.     padding: 5px;

  825.     border-radius: 5px;

  826.     color: black;	

  827. 	cursor: pointer;	

  828. 	

  829. }

  830. div.bsave.saved span.ticon-save{

  831.     display: none;

  832. }

  833. 

  834. div.bsave.saved span.ticon-copy{

  835.     display: inline-block;

  836.     border: 3px solid orange;

  837.     padding: 5px;

  838.     border-radius: 20px;

  839.     color: orange;	

  840. }

  841. div.bdelete span.ticon-trash{

  842.     display: inline-block;

  843.     border: 3px solid lightgrey;

  844.     padding: 5px;

  845.     border-radius: 5px;

  846.     color: red;	

  847. 	cursor: pointer;

  848. }

  849. 

  850. div.workspace div > span:hover{

  851. 	box-shadow:0px 0px 10px black;

  852. }

  853. 

  854. div.divTableHeading div > span:hover{

  855. 	cursor: pointer;

  856. 	animation: blinker 0.3s linear infinite;

  857. }

  858. 

  859. /* short code for the table */

  860. div.btos select,

  861. div.bstart input,

  862. div.bfinish input{

  863. 	width: 100%;

  864. 	height: 98%;

  865. }

  866. 

  867. div.divTable.validjob{

  868. 	border: 0px solid white;

  869. }

  870. 

  871. div.divTable.invalidjob{

  872. 	border-left: 2px solid red;

  873. 	border-right: 2px solid red;

  874. }

  875. 

  876. div.divTable .invalid{

  877. 	background-color:yellow;

  878. }

  879. /* end of div table */

  880. 

  881. /* pop up message box */

  882. .bts_message .ult_modal-body{

  883. 	height:50vh;

  884. 	overflow:scroll;

  885. }

  886. .bts_message .ult_modal-body .sent{

  887. 	color: green;

  888. }

  889. .bts_message .ult_modal-body .nojob{

  890. 	color: dimgrey;

  891. }

  892. .bts_message .ult_modal-body .error{

  893. 	color : red;

  894. }

  895. .bts_message .ult_modal-body .span{

  896. 	font-weight:900;	

  897. }