Patrick
/
acaresydney_ts
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
timesheet source code
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
73 Révisions
1 Branche
1.5MB
Aborescence: 1c475ff05a
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '1c475ff05a'
${ noResults }
acaresydney_ts/css/bts_office.css

1072 lignes
24KB
Brut Annotations Historique 

  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. @keyframes flash {

  20. 	0% { padding-top:0px; background-color:yellow;}

  21. 	50% { padding-top:5px; color:red; background-color: lightyellow;}

  22. 	100% { padding-top:0px; background-color:yellow;}

  23. }

  24. 

  25. .titlebar_gradient {

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

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

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

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

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

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

  32. }

  33. 

  34. .sheettitle h1:hover {

  35.     text-decoration: underline;

  36.     font-weight: bolder;

  37.     cursor: pointer;

  38.     animation: blinker 1s linear infinite;

  39. }

  40. 

  41. .timesheets {

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

  43.     height: 100vh;

  44.     margin: 0px;

  45.     padding: 0px;

  46.     left: 150px;

  47.     position: fixed;

  48.     background-color: red;

  49.     overflow: hidden;

  50. }

  51. 

  52. .peoplebar {

  53.     position: fixed;

  54.     top: 0px;

  55.     width: 150px;

  56.     height: 100vh;

  57.     background: lightgrey;

  58.     overflow: hidden;

  59. }

  60. 

  61. .peoplebar.left {

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

  63.     left: 0px;

  64. }

  65. 

  66. .peoplebar.right {

  67.     right: 0px;

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

  69. }

  70. 

  71. .timesheets .sheettitle {

  72.     padding-top: 8px;

  73.     text-align: center;

  74.     background-color: lightgrey;

  75.     height: 40px;

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

  77. }

  78. 

  79. .timesheets .workspace {

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

  81.     background-color: white;

  82.     overflow-x: hidden;

  83.     overflow-y: scroll;

  84. }

  85. 

  86. .timesheets .workspace img {

  87.     display: block;

  88.     margin-top: 140px;

  89.     margin-left: auto;

  90.     margin-right: auto;

  91. }

  92. 

  93. .timesheets .statusbar {

  94.     position: relative;

  95.     height: 40px;

  96.     background-color: ivory;

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

  98. }

  99. 

  100. /* staff search bar*/

  101. .b_search {

  102.     position: relative;

  103.     height: 40px;

  104. }

  105. 

  106. .b_search input {

  107.     margin-top: 5px;

  108.     padding-left: 20px;

  109.     padding-right: 20px;

  110.     border-radius: 20px;

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

  112.     height: 30px;

  113. }

  114. 

  115. .b_search .ticon-search {

  116.     position: absolute;

  117.     top: 15px;

  118.     left: 5px;

  119. }

  120. 

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

  122.     position: absolute;

  123.     top: 15px;

  124.     right: 5px;

  125. }

  126. 

  127. .peoplebar button {

  128.     width: 100%;

  129.     padding: 0px;

  130.     height: 20px;

  131. }

  132. 

  133. .peoplebar .stafflist,

  134. .peoplebar .clientlist {

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

  136.     background-color: dimgrey;

  137.     overflow: hidden;

  138.     text-align: center;

  139. 

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

  141. }

  142. 

  143. .peopleitem {

  144.     position: relative;

  145.     margin-top: 10px;

  146.     margin-bottom: 10px;

  147.     height: 100px;

  148.     background: transparent;

  149. }

  150. 

  151. /* hover box */

  152. div.peopleitem > label {

  153.     -webkit-perspective: 1000px;

  154.     perspective: 1000px;

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

  156.     transform-style: preserve-3d;

  157.     display: block;

  158.     width: 100%;

  159.     height: 100px;

  160.     position: absolute;

  161.     left: 50%;

  162.     top: 50%;

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

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

  165.     cursor: pointer;

  166. }

  167. 

  168. div.peopleitem .card {

  169.     position: relative;

  170.     height: 100%;

  171.     width: 95%;

  172.     margin: auto;

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

  174.     transform-style: preserve-3d;

  175.     -webkit-transition: all 600ms;

  176.     transition: all 600ms;

  177.     z-index: 20;

  178.     border: 1px solid black;

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

  180. }

  181. 

  182. div.peopleitem .card > div {

  183.     position: absolute;

  184.     height: 100%;

  185.     width: 100%;

  186.     background: #FFF;

  187.     text-align: center;

  188. 

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

  190.     -webkit-backface-visibility: hidden;

  191.     backface-visibility: hidden;

  192.     border-radius: 2px;

  193. }

  194. 

  195. div.peopleitem .card .back {

  196.     background: #222;

  197.     color: #FFF;

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

  199.     transform: rotateX(180deg);

  200. }

  201. 

  202. div.peopleitem label:hover .card {

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

  204.     transform: rotateX(20deg);

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

  206. }

  207. 

  208. div.peopleitem input {

  209.     display: none;

  210. }

  211. 

  212. div.peopleitem :checked + .card {

  213.     transform: rotateX(180deg);

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

  215. }

  216. 

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

  218.     transform: rotateX(160deg);

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

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

  221. }

  222. 

  223. div.peopleitem span.notes,

  224. div.peopleitem a.notes{

  225. 	font-weight: 900;

  226. 	color: white;

  227. 	text-decoration: underline;

  228. }

  229. 

  230. /* end of hover box */

  231. .satusbar {

  232.     position: relative;

  233. }

  234. 

  235. .statusbar * {

  236.     vertical-align: top;

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

  238. }

  239. 

  240. .statusbar div {

  241.     position: relative;

  242.     display: inline;

  243. }

  244. 

  245. .statusbar .xero {

  246.     width: 40px;

  247.     height: 100%;

  248.     margin-left: 5px;

  249.     margin-right: 5px;

  250.     display: inline-block;

  251.     background-color: white;

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

  253.     border-radius: 100px;

  254.     background-image: url(../img/xero.png);

  255.     background-size: 40px;

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

  257. }

  258. 

  259. .statusbar .wifi i,

  260. .statusbar .xero i,

  261. .statusbar .csv i {

  262.     font-size: 20px;

  263.     color: red;

  264.     position: absolute;

  265.     right: 0px;

  266.     top: -5px;

  267. }

  268. 

  269. .statusbar .wifi {

  270.     width: 40px;

  271.     height: 100%;

  272.     margin-left: 0px;

  273.     margin-right: 5px;

  274.     display: inline-block;

  275.     background-color: white;

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

  277.     border-radius: 100px;

  278.     background-image: url(../img/wnet.png);

  279.     background-size: 40px;

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

  281. }

  282. 

  283. .statusbar .csv {

  284.     width: 40px;

  285.     height: 100%;

  286.     margin-left: 0px;

  287.     margin-right: 5px;

  288.     display: inline-block;

  289.     background-color: white;

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

  291.     border-radius: 100px;

  292.     background-image: url(../img/csv.png);

  293.     background-size: 40px;

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

  295. }

  296. 

  297. .statusbar .xero:hover,

  298. .statusbar .wifi:hover,

  299. .statusbar .csv:hover {

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

  301. }

  302. 

  303. .statusbar .wages {

  304.     text-align: center;

  305.     width: 150px;

  306.     height: 100%;

  307.     display: inline-block;

  308.     background-color: transparent;

  309.     font-size: 24px;

  310.     font-weight: bold;

  311.     color: dimgrey;

  312.     border: 1px dotted white;

  313.     position: absolute;

  314.     right: 400px;

  315. }

  316. 

  317. .statusbar .workinghours {

  318.     background-color: transparent;

  319.     width: 175px;

  320.     height: 100%;

  321.     display: inline-block;

  322.     position: absolute;

  323.     right: 220px;

  324. }

  325. 

  326. .statusbar #woh:hover {

  327.     cursor: pointer;

  328.     animation: blinker 0.3s linear infinite;

  329. }

  330. 

  331. .workinghours label {

  332.     transform: unset;

  333.     left: 0;

  334.     top: 0;

  335.     width: 50px;

  336.     height: 100%;

  337.     padding: 0.5em;

  338.     text-align: left;

  339.     display: inline-block;

  340.     color: #A974D;

  341.     font-weight: bolder;

  342.     line-height: 15px;

  343.     background-color: transparent;

  344.     margin-right: 0px;

  345. }

  346. 

  347. .statusbar input {

  348.     margin: 0px;

  349.     width: 115px;

  350.     height: 100%;

  351.     display: inline-block;

  352.     font-size: 24px;

  353.     background: transparent;

  354.     text-align: center;

  355. }

  356. 

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

  358.     margin-top: 5px;

  359.     margin-bottom: 5px ;

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

  361.     width: 200px ;

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

  363.     font-weight: bolder;

  364.     position: absolute;

  365.     right: 10px;

  366. }

  367. 

  368. div.sheetsheader {

  369.     height: 110px;

  370.     background: darkorange;

  371.     position: relative;

  372. }

  373. 

  374. div.prevweek {

  375.     display: inline-block;

  376.     height: 70px;

  377.     width: 40px;

  378.     font-size: 36px;

  379.     padding-top: 5px;

  380.     padding-left: 2px;

  381.     float: left;

  382.     background: darkorange;

  383. }

  384. 

  385. div.prevweek span:hover,

  386. div.nextweek span:hover {

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

  388.     border-radius: 20px;

  389.     color: black;

  390. }

  391. 

  392. div.nextweek {

  393.     display: inline-block;

  394.     height: 70px;

  395.     width: 40px;

  396.     font-size: 36px;

  397.     padding-top: 5px;

  398.     padding-left: 4px;

  399.     float: right;

  400. }

  401. 

  402. div.weekly {

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

  404.     display: inline-block;

  405.     background-color: black;

  406.     height: 70px;

  407. }

  408. 

  409. div.weekly div {

  410.     margin: 0px;

  411. }

  412. 

  413. div.weekly div.weekname {

  414.     position: relative;

  415.     width: 170px;

  416.     top: -5px;

  417.     border: 2px solid grey;

  418.     border-radius: 10px;

  419.     text-align: center;

  420.     color: white;

  421. 

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

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

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

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

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

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

  428. }

  429. 

  430. div.weekly div.weekname input{

  431.     width: 80px;

  432.     height: 20px;

  433.     border:0px;

  434.     background-color:transparent;

  435.     color: white;

  436.     padding-left:4px;

  437.     padding-right:4px;

  438. }

  439. 

  440. div.weekly div.weekname input.hasDatepicker{

  441. 	background-image:none

  442. }

  443. 

  444. div.weekly div.weekname.prev {

  445.     position: absolute;

  446.     left: 100px;

  447.     z-index: 1;

  448. }

  449. 

  450. div.weekly div.weekname.next {

  451.     position: absolute;

  452.     right: 100px;

  453.     z-index: 1;

  454. }

  455. 

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

  457. div.weekly div[name='copyschedule']:hover {

  458.     cursor: pointer;

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

  460. }

  461. 

  462. div.weekly div.copyprogress {

  463.     position: absolute;

  464.     display: inline-block;

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

  466.     height: 15px;

  467.     top: 0px;

  468.     border-radius: 2px;

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

  470.     text-align: center;

  471. 

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

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

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

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

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

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

  478. }

  479. 

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

  481.     position: relative;

  482.     top: -5px;

  483.     width: 150px;

  484.     height: 25px;

  485.     padding: 0px;

  486.     border-radius: 10px;

  487.     margin: auto;

  488.     z-index: 1;

  489.     color: white;

  490. 

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

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

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

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

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

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

  497. }

  498. 

  499. #gotoweek {

  500.     width: 50%;

  501.     background-color: transparent;

  502.     border: 0px;

  503.     color: white;

  504.     font-weight: 900;

  505. }

  506. 

  507. div.weekdays {

  508.     position: absolute;

  509.     top: 15px;

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

  511.     height: 55px;

  512.     background-color: darkorange;

  513.     text-align: center;

  514. }

  515. 

  516. div.week1,

  517. div.week2 {

  518.     display: inline-block;

  519.     width: 45%;

  520.     height: 55px;

  521.     background-color: darkorange;

  522.     text-align: justify;

  523.     border: 1px dashed lightgrey;

  524.     padding-left: 10px;

  525.     padding-right: 10px;

  526. }

  527. 

  528. div.week1:hover,

  529. div.week2:Hover {

  530.     border-radius: 20px;

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

  532.     cursor: pointer;

  533. 

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

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

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

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

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

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

  540. }

  541. 

  542. div.week1.filtered,

  543. div.week2.filtered {

  544.     border-radius: 20px;

  545. 

  546.     /* background:white; */

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

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

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

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

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

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

  553. }

  554. 

  555. div.week1::after,

  556. div.week2::after {

  557.     content: '';

  558.     display: inline-block;

  559.     width: 100%;

  560. }

  561. 

  562. div.week1.filtered span,

  563. div.week2.filtered span,

  564. div.week1.filtered div.week1color,

  565. div.week2.filtered div.week2color

  566. {

  567. 	visibility: hidden;

  568. }

  569. 

  570. div.week1 {

  571.     position: relative;

  572.     left: -10px;

  573. }

  574. 

  575. div.week2 {

  576.     position: relative;

  577.     left: 10px;

  578. }

  579. 

  580. div.week1 > div,

  581. div.week2 > div {

  582.     display: inline-block;

  583.     text-align: center;

  584.     width: 10%;

  585.     height: 40px;

  586.     margin-top: 5px;

  587.     font-weight: bolder;

  588.     border-radius: 10px;

  589. }

  590. 

  591. div.week1 div:hover,

  592. div.week2 div:hover {

  593.     cursor: pointer;

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

  595. }

  596. 

  597. div.week1 > div {

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

  599. }

  600. 

  601. .week1color {

  602.     color: black;

  603. 

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

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

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

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

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

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

  610. }

  611. 

  612. div.week2 > div {

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

  614. }

  615. 

  616. .week2color {

  617.     color: white;

  618. 

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

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

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

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

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

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

  625. }

  626. 

  627. div.assignment > div {

  628.     color: navy;

  629.     background-color: white;

  630.     font-size: 20px;

  631.     font-weight: lighter;

  632.     border: 1px dotted lightgrey;

  633. }

  634. 

  635. /* peple item card*/

  636. .peopleitem div span.checked {

  637.     color: orange;

  638. }

  639. 

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

  641.     height: auto;

  642.     text-align: center;

  643.     background-color: lightgrey;

  644. }

  645. 

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

  647.     width: 100%;

  648.     height: 15px;

  649.     background-color: dimgrey;

  650.     color: white;

  651. }

  652. 

  653. div.back > span.icon {

  654.     width: 100%;

  655.     background-color: lightgrey;

  656.     color: dimgrey;

  657. }

  658. 

  659. div.front >  span.badge,

  660. div.back >  span.badge {

  661.     border-radius: 50%;

  662.     display: inline-block;

  663.     padding-left: 8px;

  664.     padding-right: 8px;

  665.     text-align: center;

  666.     position: absolute;

  667.     right: -5px;

  668.     top: -5px;

  669. }

  670. 

  671. span.badge.blue {

  672.     color: #fff;

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

  674.     background-color: black;

  675. }

  676. 

  677. span.badge.pink {

  678.     color: black;

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

  680.     background-color: white;

  681. }

  682. 

  683. /* div table */

  684. div.blueTable {

  685.     border: 1px solid #1C6EA4;

  686.     background-color: white;

  687.     width: 100%;

  688.     text-align: left;

  689.     border-collapse: collapse;

  690.     border: 0px;

  691. }

  692. 

  693. div.blueTable.emptyrecord {

  694.     background-color: #eeeeee;

  695. }

  696. 

  697. .divTable.blueTable .divTableCell,

  698. .divTable.blueTable .divTableHead,

  699.  {

  700.     border: 1px solid #AAAAAA;

  701.     padding: 3px 2px;

  702. }

  703. 

  704. .divTable.blueTable .divTableBody .divTableCell {

  705.     /* font-size: 15px; */

  706.     border-bottom: 1px lightgrey solid;

  707.     border-right: 1px lightgrey dotted;

  708. 	vertical-align: middle;

  709. }

  710. 

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

  712.     background: #D0E4F5;

  713. }

  714. 

  715. .divTable.blueTable .divTableHeading {

  716.     background: #1C6EA4;

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

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

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

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

  721. }

  722. 

  723. .divTable.blueTable .divTableHeading .divTableHead {

  724.     font-size: 15px;

  725.     font-weight: bold;

  726.     color: #FFFFFF !important;

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

  728. }

  729. 

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

  731.     border-left: none;

  732. }

  733. 

  734. .blueTable .tableFootStyle {

  735.     font-size: 14px;

  736.     font-weight: bold;

  737.     color: #FFFFFF;

  738.     background: #D0E4F5;

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

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

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

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

  743. }

  744. 

  745. .blueTable .tableFootStyle {

  746.     font-size: 14px;

  747. }

  748. 

  749. .blueTable .tableFootStyle .links {

  750.     text-align: right;

  751. }

  752. 

  753. .blueTable .tableFootStyle .links a {

  754.     display: inline-block;

  755.     background: #1C6EA4;

  756.     color: #FFFFFF;

  757.     padding: 2px 8px;

  758.     border-radius: 5px;

  759. }

  760. 

  761. .blueTable.outerTableFooter {

  762.     border-top: none;

  763. }

  764. 

  765. .blueTable.outerTableFooter .tableFootStyle {

  766.     padding: 3px 5px;

  767. }

  768. 

  769. /* DivTable.com */

  770. .divTable {

  771.     display: table;

  772.     margin: 3px 0px 3px 0px;

  773. }

  774. 

  775. .divTable.highlight {

  776.     box-shadow: 0px 0px 10px green;

  777. }

  778. .divTable.highlight div {

  779. 	background-color: lightyellow !important;

  780. }

  781. 

  782. .jobTable.Editing{

  783. 	box-shadow: 0px 0px 10px green;

  784. 	animation: flash 1s linear infinite;

  785. }

  786. .Editor{

  787. 	box-shadow: 0px 0px 10px green;

  788. }

  789. .Editor select{

  790. 	color:black !important;

  791. }

  792. .jobTable.Editing div, 

  793. .Editor div {

  794. 	font-weight:900;

  795. 	background-color: lightyellow !important;

  796. }

  797. 

  798. 

  799. .divTable.invalidjob.highlight {

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

  801. }

  802. 

  803. .divTable.highlight.newcopy {

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

  805.     border: 5px orange solid;

  806. }

  807. 

  808. .divTableRow {

  809.     display: table-row;

  810. }

  811. 

  812. .divTableRow.errmsg {

  813.     background-color: white;

  814.     font-weight: bolder;

  815.     color: red;

  816. }

  817. 

  818. .divTableHeading {

  819.     display: table-header-group;

  820. }

  821. 

  822. .divTableCell,

  823. .divTableHead {

  824.     display: table-cell;

  825. }

  826. 

  827. .divTableHeading {

  828.     display: table-header-group;

  829. }

  830. 

  831. .divTableFoot {

  832.     display: table-footer-group;

  833. }

  834. 

  835. .divTableBody {

  836.     display: table-row-group;

  837. }

  838. 

  839. /* customized part of div table */

  840. div.sheettableheader {

  841.     margin-top: 0px;

  842.     height: 36px;

  843.     overflow-x: hidden;

  844.     overflow-y: scroll;

  845. }

  846. 

  847. div.btos,

  848. div.bstart,

  849. div.bfinish,

  850. div.brate,

  851. div.bstaff,

  852. div.bclient,

  853. div.bconfirmed,

  854. div.bedit,

  855. div.bsave,

  856. div.brating,

  857. div.bdelete {

  858.     width: 5%;

  859.     height: 30px;

  860. 	position:relative;

  861. }

  862. 

  863. div.btos {

  864.     width: 15%;

  865. }

  866. 

  867. div.bstart,

  868. div.bfinish {

  869.     width: 10%;

  870. }

  871. 

  872. div.bstaff,

  873. div.bclient{

  874. 	width: 10%;

  875. }

  876. 

  877. div.brate {

  878.     width: 10%;

  879.     max-width: 20px;

  880. }

  881. div.btos.error,

  882. div.bstart.error,

  883. div.bfinish.error,

  884. div.bstaff.error,

  885. div.bclient.error,

  886. div.brate.error{

  887. 	position:relative;

  888. 	background-color: yellow !important;

  889. 	/* animation: flash 1s linear infinite; */

  890. }

  891. div.error::after{

  892. 	position:absolute;

  893. 	right:0px;

  894. 	bottom:0px;

  895. 	color:red;

  896. 	font-family: "ticons"; 

  897. 	font-weight: 900; 

  898. 	content: "\f071";	

  899. 	animation: blinker 0.3s linear infinite;

  900. }

  901. 

  902. .divTable div > select {

  903.     width: 100%;

  904.     height: 100%;

  905. }

  906. 

  907. div.bdelete,

  908. div.bedit,

  909. div.bsave,

  910. div.bconfirmed {

  911.     text-align: center;

  912.     width: 3%;

  913. }

  914. 

  915. div.brating {

  916. 	width: 3%;

  917.     text-align: center;

  918.     cursor: pointer;

  919. }

  920. 

  921. div.Editor div.brating{

  922. 	min-width:110px;

  923. }

  924. 

  925. div.bedit{

  926. 	text-align:center;

  927. 	cursor: pointer;

  928. }

  929. 

  930. div.bsave span.ticon-copy {

  931.      display: none;  

  932. }

  933. 

  934. div.divTableHeading  div.bsave span.ticon,

  935. div.jobTable.saved div.bsave span.ticon-copy {

  936.     display: inline-block;

  937.     border: 3px solid orange;

  938.     padding: 5px;

  939.     border-radius: 20px;

  940.     color: orange;

  941. }

  942. 

  943. div.bsave span.ticon-save {

  944.     display: inline-block;

  945.     border: 3px solid lightgrey;

  946.     padding: 5px;

  947.     border-radius: 5px;

  948.     color: black;

  949.     cursor: pointer;

  950. }

  951. 

  952. div.jobTable.to_be_deleted_duplicate div.bsave span.ticon-save,

  953. div.jobTable.saved div.bsave span.ticon-save {

  954.     display: none;

  955. }

  956. 

  957. div.jobTable.saved div{

  958. 	background-color: transparent;

  959. }

  960. 

  961. div.jobTable.dirty div.bsave{

  962. 	background-color: lightyellow;

  963. }

  964. div.jobTable.dirty div.bsave span{

  965. 	animation-duration: 0.3s;

  966.     animation-timing-function: linear;

  967.     animation-delay: 0s;

  968.     animation-iteration-count: 5;

  969.     animation-direction: normal;

  970.     animation-fill-mode: none;

  971.     animation-play-state: running;

  972.     animation-name: blinker;	

  973. }

  974. 

  975. div.workspace div.bdelete span.ticon-trash,

  976. div.workspace div.bedit span.ticon-edit {

  977.     display: inline-block;

  978.     border: 3px solid lightgrey;

  979.     padding: 5px;

  980.     border-radius: 5px;

  981.     color: red;

  982.     cursor: pointer;

  983. }

  984. div.workspace div.bedit span.ticon-edit{

  985. 	color:blue;

  986. }

  987. 

  988. div.workspace div > span:hover {

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

  990. }

  991. 

  992. div.jobTable.to_be_deleted_duplicate{

  993. 	color: red;

  994. }

  995. 

  996. div.jobTable.to_be_deleted_duplicate span.ticon-trash

  997. {

  998. 	animation: blinker 0.3s linear infinite;

  999. }

  1000. 

  1001. div.jobTable.to_be_deleted_duplicate span.ticon-copy,

  1002. div.jobTable.to_be_deleted_duplicate span.ticon-edit{

  1003. 	display:none !important;

  1004. }

  1005. div.jobTable:not(.to_be_deleted_duplicate) span.ticon-check-circle{

  1006. 	display:none !important;

  1007. }

  1008. div.jobTable.to_be_deleted_duplicate span.ticon-check-circle{

  1009.     display: inline-block;

  1010.     border: 3px solid green;

  1011.     padding: 5px;

  1012.     border-radius: 10px;

  1013.     color: green;

  1014.     cursor: pointer;

  1015. 	font-size: 1.1em;	

  1016. }

  1017. 

  1018. div.divTableHeading div > span.ticon-trash:hover,

  1019. div.divTableHeading div > span.ticon-search:hover {

  1020.     cursor: pointer;

  1021.     animation: blinker 0.3s linear infinite;

  1022. }

  1023. 

  1024. /* short code for the table */

  1025. div.btos select,

  1026. div.bstart input,

  1027. div.bfinish input {

  1028.     width: 100%;

  1029.     height: 98%;

  1030. }

  1031. 

  1032. div.divTable.validjob {

  1033.     border: 0px solid white;

  1034. }

  1035. 

  1036. div.divTable.invalidjob {

  1037.     border-left: 2px solid red;

  1038.     border-right: 2px solid red;

  1039. }

  1040. 

  1041. div.divTable .invalid {

  1042.     background-color: yellow;

  1043. }

  1044. 

  1045. /* end of div table */

  1046. /* pop up message box */

  1047. .bts_message .ult_modal-body {

  1048.     height: 50vh;

  1049.     overflow: scroll;

  1050. }

  1051. 

  1052. .bts_message .ult_modal-body .sent {

  1053.     color: green;

  1054. }

  1055. 

  1056. .bts_message .ult_modal-body .nojob {

  1057.     color: dimgrey;

  1058. }

  1059. 

  1060. .bts_message .ult_modal-body .error {

  1061.     color: red;

  1062. }

  1063. 

  1064. .bts_message .ult_modal-body .span {

  1065.     font-weight: 900;

  1066. }

  1067. 

  1068. 

  1069. .xdsoft_datetimepicker{

  1070. 	z-index: 16777272; /* above the modal box */ 	

  1071. }