Patrick
/
acaresydney_ts
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
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.
44 Commit
1 Ramo (Branch)
1.5MB
Albero (Tree): 74494a1e58
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '74494a1e58'
${ noResults }
acaresydney_ts/css/bts_timesheet.css

893 lines
20KB
Originale Blame Cronologia 

  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. .workinghours label {

  299.     transform: unset;

  300.     left: 0;

  301.     top: 0;

  302.     width: 50px;

  303.     height: 100%;

  304.     padding: 0.5em;

  305.     text-align: left;

  306.     display: inline-block;

  307.     color: #A974D;

  308.     font-weight: bolder;

  309.     line-height: 15px;

  310.     background-color: transparent;

  311.     margin-right: 0px;

  312. }

  313. 

  314. .statusbar input {

  315.     margin: 0px;

  316.     width: 115px;

  317.     height: 100%;

  318.     display: inline-block;

  319.     font-size: 24px;

  320.     background: transparent;

  321.     text-align: center;

  322. }

  323. 

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

  325.     margin-top: 5px;

  326.     margin-bottom: 5px ;

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

  328.     width: 200px ;

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

  330.     font-weight: bolder;

  331.     position: absolute;

  332.     right: 10px;

  333. }

  334. 

  335. div.sheetsheader {

  336.     height: 110px;

  337.     background: darkorange;

  338.     position: relative;

  339. }

  340. 

  341. div.prevweek {

  342.     display: inline-block;

  343.     height: 70px;

  344.     width: 40px;

  345.     font-size: 36px;

  346.     padding-top: 5px;

  347.     padding-left: 2px;

  348.     float: left;

  349.     background: darkorange;

  350. }

  351. 

  352. div.prevweek span:hover,

  353. div.nextweek span:hover {

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

  355. 	border-radius: 20px;

  356. 	color: black;

  357. }

  358. 

  359. div.nextweek {

  360.     display: inline-block;

  361.     height: 70px;

  362.     width: 40px;

  363.     font-size: 36px;

  364.     padding-top: 5px;

  365.     padding-left: 4px;

  366.     float: right;

  367. }

  368. 

  369. div.weekly {

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

  371.     display: inline-block;

  372.     background-color: black;

  373.     height: 70px;

  374. }

  375. 

  376. div.weekly div {

  377.     margin: 0px;

  378. }

  379. 

  380. div.weekly div.weekname {

  381.     position: relative;

  382.     width: 130px;

  383.     top: -5px;

  384.     border: 2px solid grey;

  385.     border-radius: 10px;

  386.     text-align: center;

  387. 	

  388.     color: white;	

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

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

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

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

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

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

  395. }

  396. 

  397. div.weekly div.weekname.prev {

  398.     position: absolute;

  399.     left: 100px;

  400.     z-index: 1;

  401. }

  402. 

  403. div.weekly div.weekname.next {

  404.     position: absolute;

  405.     right: 100px;

  406.     z-index: 1;

  407. }

  408. 

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

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

  411. {

  412. 	cursor: pointer;

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

  414. }

  415. 

  416. div.weekly div.copyprogress {

  417.     position: absolute;

  418.     display: inline-block;

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

  420.     height: 15px;

  421.     top: 0px;

  422.     border-radius: 2px;

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

  424.     text-align:center;

  425. 	

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

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

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

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

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

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

  432. }

  433. 

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

  435.     position: relative;

  436.     top: -5px;

  437.     width: 100px;

  438.     height: 25px;

  439.     padding: 0px;

  440.     border-radius: 10px;

  441. 

  442.     margin:auto;

  443.     z-index:1;

  444. 	

  445. 	color: white;	

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

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

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

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

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

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

  452. }

  453. 

  454. div.weekdays {

  455.     position: absolute;

  456.     top: 15px;

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

  458.     height: 55px;

  459.     background-color: darkorange;

  460.     text-align: center;

  461. }

  462. 

  463. div.week1,

  464. div.week2 {

  465.     display: inline-block;

  466.     width: 45%;

  467.     height: 55px;

  468.     background-color: darkorange;

  469.     text-align: justify;

  470.     border: 1px dashed lightgrey;

  471.     padding-left: 10px;

  472.     padding-right: 10px;

  473. }

  474. div.week1:hover,

  475. div.week2:Hover {

  476. 	border-radius: 20px;

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

  478. 	cursor: pointer;

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

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

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

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

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

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

  485. }

  486. 

  487. div.week1.filtered,

  488. div.week2.filtered{

  489. 	border-radius: 20px;

  490. 	/* background:white; */

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

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

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

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

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

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

  497. }

  498. 

  499. div.week1:after,

  500. div.week2:after {

  501.     content: '';

  502.     display: inline-block;

  503.     width: 100%;

  504. }

  505. 

  506. div.week1 {

  507.     position: relative;

  508.     left: -10px;

  509. }

  510. 

  511. div.week2 {

  512.     position: relative;

  513.     left: 10px;

  514. }

  515. 

  516. div.week1 > div,

  517. div.week2 > div {

  518.     display: inline-block;

  519.     text-align: center;

  520.     width: 10%;

  521.     height: 40px;

  522.     margin-top: 5px;

  523.     font-weight: bolder;

  524. 	border-radius: 10px;

  525. }

  526. 

  527. div.week1 div:hover,

  528. div.week2 div:hover

  529. {

  530. 	cursor:pointer;

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

  532. }

  533. 

  534. div.week1 > div {

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

  536. }

  537. .week1color{

  538. 	color: black;

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

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

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

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

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

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

  545. }

  546. 

  547. div.week2 > div {

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

  549. }

  550. .week2color{

  551. 	color:white;

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

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

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

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

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

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

  558. }

  559. 

  560. div.assignment > div {

  561.     color: navy;

  562.     background-color: white;

  563.     font-size: 20px;

  564.     font-weight: lighter;

  565.     border: 1px dotted lightgrey;

  566. }

  567. 

  568. /* peple item card*/

  569. .peopleitem div span.checked {

  570.     color: orange;

  571. }

  572. 

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

  574.     height: auto;

  575.     text-align: center;

  576.     background-color: lightgrey;

  577. }

  578. 

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

  580.     width: 100%;

  581.     height: 15px;

  582.     background-color: dimgrey;

  583.     color: white;

  584. }

  585. 

  586. div.back > span.icon {

  587.     width: 100%;

  588.     background-color: lightgrey;

  589.     color: dimgrey;

  590. }

  591. 

  592. div.front >  span.badge,

  593. div.back >  span.badge {

  594.     border-radius: 50%;

  595.     display: inline-block;

  596.     padding-left: 8px;

  597.     padding-right: 8px;

  598.     text-align: center;

  599.     position: absolute;

  600.     right: -5px;

  601.     top: -5px;

  602. }

  603. 

  604. span.badge.blue {

  605.     color: #fff;

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

  607.     background-color: black;

  608. }

  609. 

  610. span.badge.pink {

  611.     color: black;

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

  613.     background-color: white;

  614. }

  615. 

  616. /* div table */

  617. div.blueTable {

  618.     border: 1px solid #1C6EA4;

  619.     background-color: white;

  620.     width: 100%;

  621.     text-align: left;

  622.     border-collapse: collapse;

  623. 	border:0px;

  624. }

  625. 

  626. div.blueTable.emptyrecord{

  627. 	background-color: #eeeeee;

  628. }

  629. 

  630. .divTable.blueTable .divTableCell,

  631. .divTable.blueTable .divTableHead,

  632.  {

  633.     border: 1px solid #AAAAAA;

  634.     padding: 3px 2px;

  635. }

  636. 

  637. .divTable.blueTable .divTableBody .divTableCell {

  638.     font-size: 15px;

  639. }

  640. 

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

  642.     background: #D0E4F5;

  643. }

  644. 

  645. .divTable.blueTable .divTableHeading {

  646.     background: #1C6EA4;

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

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

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

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

  651. }

  652. 

  653. .divTable.blueTable .divTableHeading .divTableHead {

  654.     font-size: 15px;

  655.     font-weight: bold;

  656.     color: #FFFFFF;

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

  658. }

  659. 

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

  661.     border-left: none;

  662. }

  663. 

  664. .blueTable .tableFootStyle {

  665.     font-size: 14px;

  666.     font-weight: bold;

  667.     color: #FFFFFF;

  668.     background: #D0E4F5;

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

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

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

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

  673. }

  674. 

  675. .blueTable .tableFootStyle {

  676.     font-size: 14px;

  677. }

  678. 

  679. .blueTable .tableFootStyle .links {

  680.     text-align: right;

  681. }

  682. 

  683. .blueTable .tableFootStyle .links a {

  684.     display: inline-block;

  685.     background: #1C6EA4;

  686.     color: #FFFFFF;

  687.     padding: 2px 8px;

  688.     border-radius: 5px;

  689. }

  690. 

  691. .blueTable.outerTableFooter {

  692.     border-top: none;

  693. }

  694. 

  695. .blueTable.outerTableFooter .tableFootStyle {

  696.     padding: 3px 5px;

  697. }

  698. 

  699. /* DivTable.com */

  700. .divTable {

  701.     display: table;

  702. 	margin: 3px 0px 3px 0px;

  703. }

  704. 

  705. .divTable.highlight{

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

  707. }

  708. 

  709. .divTable.invalidjob.highlight{

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

  711. }

  712. 

  713. .divTable.highlight.newcopy{

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

  715. 	border:5px orange solid;

  716. }

  717. 

  718. 

  719. .divTableRow {

  720.     display: table-row;

  721. }

  722. 

  723. .divTableRow.errmsg{

  724. 	background-color:white;

  725. 	font-weight:bolder;

  726. 	color:red;

  727. }

  728. 

  729. .divTableHeading {

  730.     display: table-header-group;

  731. }

  732. 

  733. .divTableCell,

  734. .divTableHead {

  735.     display: table-cell;

  736. }

  737. 

  738. .divTableHeading {

  739.     display: table-header-group;

  740. }

  741. 

  742. .divTableFoot {

  743.     display: table-footer-group;

  744. }

  745. 

  746. .divTableBody {

  747.     display: table-row-group;

  748. }

  749. 

  750. /* customized part of div table */

  751. div.sheettableheader {

  752.     margin-top: 0px;

  753.     height: 36px;

  754.     overflow-x: hidden;

  755.     overflow-y: scroll;

  756. }

  757. 

  758. div.btos,

  759. div.bstart,

  760. div.bfinish,

  761. div.brate,

  762. div.bstaff,

  763. div.bclient,

  764. div.bconfirmed,

  765. div.bsave,

  766. div.brating,

  767. div.bdelete {

  768.     width: 10%;

  769.     height: 30px;

  770. }

  771. 

  772. div.btos {

  773.     width: 20%;

  774. }

  775. 

  776. div.bstart,

  777. div.bfinish{

  778. 	width:11%;

  779. }

  780. 

  781. div.brate{

  782. 	width: 10%;

  783. 	max-width: 20px;

  784. }

  785. .divTable div > select{

  786. 	width: 100%;

  787. 	height: 100%;

  788. }

  789. 

  790. 

  791. div.bdelete,

  792. div.bsave,

  793. div.bconfirmed {

  794. 	text-align:center;

  795.     width: 5%;

  796. }

  797. 

  798. div.brating{

  799.     text-align: center;

  800. 	cursor: pointer;

  801. }

  802. 

  803. 

  804. .brating {

  805.   unicode-bidi: bidi-override;

  806.   direction: rtl;

  807. }

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

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

  810.    content: "\2605";

  811.    position: absolute;

  812. }

  813. 

  814. div.bsave span.ticon-copy{

  815.     display: none;

  816. }

  817. div.bsave span.ticon-save{

  818.     display: inline-block;

  819. 	border: 3px solid lightgrey;

  820.     padding: 5px;

  821.     border-radius: 5px;

  822.     color: black;	

  823. 	cursor: pointer;	

  824. 	

  825. }

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

  827.     display: none;

  828. }

  829. 

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

  831.     display: inline-block;

  832.     border: 3px solid orange;

  833.     padding: 5px;

  834.     border-radius: 20px;

  835.     color: orange;	

  836. }

  837. div.bdelete span.ticon-trash{

  838.     display: inline-block;

  839.     border: 3px solid lightgrey;

  840.     padding: 5px;

  841.     border-radius: 5px;

  842.     color: red;	

  843. 	cursor: pointer;

  844. }

  845. 

  846. div.workspace div > span:hover{

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

  848. }

  849. 

  850. div.divTableHeading div > span:hover{

  851. 	cursor: pointer;

  852. 	animation: blinker 0.3s linear infinite;

  853. }

  854. 

  855. /* short code for the table */

  856. div.btos select,

  857. div.bstart input,

  858. div.bfinish input{

  859. 	width: 100%;

  860. 	height: 98%;

  861. }

  862. 

  863. div.divTable.validjob{

  864. 	border: 0px solid white;

  865. }

  866. 

  867. div.divTable.invalidjob{

  868. 	border-left: 2px solid red;

  869. 	border-right: 2px solid red;

  870. }

  871. 

  872. div.divTable .invalid{

  873. 	background-color:yellow;

  874. }

  875. /* end of div table */

  876. 

  877. /* pop up message box */

  878. .bts_message .ult_modal-body{

  879. 	height:50vh;

  880. 	overflow:scroll;

  881. }

  882. .bts_message .ult_modal-body .sent{

  883. 	color: green;

  884. }

  885. .bts_message .ult_modal-body .nojob{

  886. 	color: dimgrey;

  887. }

  888. .bts_message .ult_modal-body .error{

  889. 	color : red;

  890. }

  891. .bts_message .ult_modal-body .span{

  892. 	font-weight:900;	

  893. }