Patrick
/
acaresydney_ts
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
timesheet source code
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
67 Commits
1 Branch
1.5MB
Struktur: 37baac6f78
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „37baac6f78“
${ noResults }
acaresydney_ts/css/bts_office.css

1050 Zeilen
24KB
Originalformat Blame Verlauf 

  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. /* end of hover box */

  224. .satusbar {

  225.     position: relative;

  226. }

  227. 

  228. .statusbar * {

  229.     vertical-align: top;

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

  231. }

  232. 

  233. .statusbar div {

  234.     position: relative;

  235.     display: inline;

  236. }

  237. 

  238. .statusbar .xero {

  239.     width: 40px;

  240.     height: 100%;

  241.     margin-left: 5px;

  242.     margin-right: 5px;

  243.     display: inline-block;

  244.     background-color: white;

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

  246.     border-radius: 100px;

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

  248.     background-size: 40px;

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

  250. }

  251. 

  252. .statusbar .wifi i,

  253. .statusbar .xero i,

  254. .statusbar .csv i {

  255.     font-size: 20px;

  256.     color: red;

  257.     position: absolute;

  258.     right: 0px;

  259.     top: -5px;

  260. }

  261. 

  262. .statusbar .wifi {

  263.     width: 40px;

  264.     height: 100%;

  265.     margin-left: 0px;

  266.     margin-right: 5px;

  267.     display: inline-block;

  268.     background-color: white;

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

  270.     border-radius: 100px;

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

  272.     background-size: 40px;

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

  274. }

  275. 

  276. .statusbar .csv {

  277.     width: 40px;

  278.     height: 100%;

  279.     margin-left: 0px;

  280.     margin-right: 5px;

  281.     display: inline-block;

  282.     background-color: white;

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

  284.     border-radius: 100px;

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

  286.     background-size: 40px;

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

  288. }

  289. 

  290. .statusbar .xero:hover,

  291. .statusbar .wifi:hover,

  292. .statusbar .csv:hover {

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

  294. }

  295. 

  296. .statusbar .wages {

  297.     text-align: center;

  298.     width: 150px;

  299.     height: 100%;

  300.     display: inline-block;

  301.     background-color: transparent;

  302.     font-size: 24px;

  303.     font-weight: bold;

  304.     color: dimgrey;

  305.     border: 1px dotted white;

  306.     position: absolute;

  307.     right: 400px;

  308. }

  309. 

  310. .statusbar .workinghours {

  311.     background-color: transparent;

  312.     width: 175px;

  313.     height: 100%;

  314.     display: inline-block;

  315.     position: absolute;

  316.     right: 220px;

  317. }

  318. 

  319. .statusbar #woh:hover {

  320.     cursor: pointer;

  321.     animation: blinker 0.3s linear infinite;

  322. }

  323. 

  324. .workinghours label {

  325.     transform: unset;

  326.     left: 0;

  327.     top: 0;

  328.     width: 50px;

  329.     height: 100%;

  330.     padding: 0.5em;

  331.     text-align: left;

  332.     display: inline-block;

  333.     color: #A974D;

  334.     font-weight: bolder;

  335.     line-height: 15px;

  336.     background-color: transparent;

  337.     margin-right: 0px;

  338. }

  339. 

  340. .statusbar input {

  341.     margin: 0px;

  342.     width: 115px;

  343.     height: 100%;

  344.     display: inline-block;

  345.     font-size: 24px;

  346.     background: transparent;

  347.     text-align: center;

  348. }

  349. 

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

  351.     margin-top: 5px;

  352.     margin-bottom: 5px ;

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

  354.     width: 200px ;

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

  356.     font-weight: bolder;

  357.     position: absolute;

  358.     right: 10px;

  359. }

  360. 

  361. div.sheetsheader {

  362.     height: 110px;

  363.     background: darkorange;

  364.     position: relative;

  365. }

  366. 

  367. div.prevweek {

  368.     display: inline-block;

  369.     height: 70px;

  370.     width: 40px;

  371.     font-size: 36px;

  372.     padding-top: 5px;

  373.     padding-left: 2px;

  374.     float: left;

  375.     background: darkorange;

  376. }

  377. 

  378. div.prevweek span:hover,

  379. div.nextweek span:hover {

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

  381.     border-radius: 20px;

  382.     color: black;

  383. }

  384. 

  385. div.nextweek {

  386.     display: inline-block;

  387.     height: 70px;

  388.     width: 40px;

  389.     font-size: 36px;

  390.     padding-top: 5px;

  391.     padding-left: 4px;

  392.     float: right;

  393. }

  394. 

  395. div.weekly {

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

  397.     display: inline-block;

  398.     background-color: black;

  399.     height: 70px;

  400. }

  401. 

  402. div.weekly div {

  403.     margin: 0px;

  404. }

  405. 

  406. div.weekly div.weekname {

  407.     position: relative;

  408.     width: 170px;

  409.     top: -5px;

  410.     border: 2px solid grey;

  411.     border-radius: 10px;

  412.     text-align: center;

  413.     color: white;

  414. 

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

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

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

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

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

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

  421. }

  422. 

  423. div.weekly div.weekname input{

  424.     width: 80px;

  425.     height: 20px;

  426.     border:0px;

  427.     background-color:transparent;

  428.     color: white;

  429.     padding-left:4px;

  430.     padding-right:4px;

  431. }

  432. 

  433. div.weekly div.weekname input.hasDatepicker{

  434. 	background-image:none

  435. }

  436. 

  437. div.weekly div.weekname.prev {

  438.     position: absolute;

  439.     left: 100px;

  440.     z-index: 1;

  441. }

  442. 

  443. div.weekly div.weekname.next {

  444.     position: absolute;

  445.     right: 100px;

  446.     z-index: 1;

  447. }

  448. 

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

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

  451.     cursor: pointer;

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

  453. }

  454. 

  455. div.weekly div.copyprogress {

  456.     position: absolute;

  457.     display: inline-block;

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

  459.     height: 15px;

  460.     top: 0px;

  461.     border-radius: 2px;

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

  463.     text-align: center;

  464. 

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

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

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

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

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

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

  471. }

  472. 

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

  474.     position: relative;

  475.     top: -5px;

  476.     width: 150px;

  477.     height: 25px;

  478.     padding: 0px;

  479.     border-radius: 10px;

  480.     margin: auto;

  481.     z-index: 1;

  482.     color: white;

  483. 

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

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

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

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

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

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

  490. }

  491. 

  492. #gotoweek {

  493.     width: 50%;

  494.     background-color: transparent;

  495.     border: 0px;

  496.     color: white;

  497.     font-weight: 900;

  498. }

  499. 

  500. div.weekdays {

  501.     position: absolute;

  502.     top: 15px;

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

  504.     height: 55px;

  505.     background-color: darkorange;

  506.     text-align: center;

  507. }

  508. 

  509. div.week1,

  510. div.week2 {

  511.     display: inline-block;

  512.     width: 45%;

  513.     height: 55px;

  514.     background-color: darkorange;

  515.     text-align: justify;

  516.     border: 1px dashed lightgrey;

  517.     padding-left: 10px;

  518.     padding-right: 10px;

  519. }

  520. 

  521. div.week1:hover,

  522. div.week2:Hover {

  523.     border-radius: 20px;

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

  525.     cursor: pointer;

  526. 

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

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

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

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

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

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

  533. }

  534. 

  535. div.week1.filtered,

  536. div.week2.filtered {

  537.     border-radius: 20px;

  538. 

  539.     /* background:white; */

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

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

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

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

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

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

  546. }

  547. 

  548. div.week1::after,

  549. div.week2::after {

  550.     content: '';

  551.     display: inline-block;

  552.     width: 100%;

  553. }

  554. 

  555. div.week1.filtered span,

  556. div.week2.filtered span,

  557. div.week1.filtered div.week1color,

  558. div.week2.filtered div.week2color

  559. {

  560. 	visibility: hidden;

  561. }

  562. 

  563. div.week1 {

  564.     position: relative;

  565.     left: -10px;

  566. }

  567. 

  568. div.week2 {

  569.     position: relative;

  570.     left: 10px;

  571. }

  572. 

  573. div.week1 > div,

  574. div.week2 > div {

  575.     display: inline-block;

  576.     text-align: center;

  577.     width: 10%;

  578.     height: 40px;

  579.     margin-top: 5px;

  580.     font-weight: bolder;

  581.     border-radius: 10px;

  582. }

  583. 

  584. div.week1 div:hover,

  585. div.week2 div:hover {

  586.     cursor: pointer;

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

  588. }

  589. 

  590. div.week1 > div {

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

  592. }

  593. 

  594. .week1color {

  595.     color: black;

  596. 

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

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

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

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

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

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

  603. }

  604. 

  605. div.week2 > div {

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

  607. }

  608. 

  609. .week2color {

  610.     color: white;

  611. 

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

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

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

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

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

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

  618. }

  619. 

  620. div.assignment > div {

  621.     color: navy;

  622.     background-color: white;

  623.     font-size: 20px;

  624.     font-weight: lighter;

  625.     border: 1px dotted lightgrey;

  626. }

  627. 

  628. /* peple item card*/

  629. .peopleitem div span.checked {

  630.     color: orange;

  631. }

  632. 

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

  634.     height: auto;

  635.     text-align: center;

  636.     background-color: lightgrey;

  637. }

  638. 

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

  640.     width: 100%;

  641.     height: 15px;

  642.     background-color: dimgrey;

  643.     color: white;

  644. }

  645. 

  646. div.back > span.icon {

  647.     width: 100%;

  648.     background-color: lightgrey;

  649.     color: dimgrey;

  650. }

  651. 

  652. div.front >  span.badge,

  653. div.back >  span.badge {

  654.     border-radius: 50%;

  655.     display: inline-block;

  656.     padding-left: 8px;

  657.     padding-right: 8px;

  658.     text-align: center;

  659.     position: absolute;

  660.     right: -5px;

  661.     top: -5px;

  662. }

  663. 

  664. span.badge.blue {

  665.     color: #fff;

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

  667.     background-color: black;

  668. }

  669. 

  670. span.badge.pink {

  671.     color: black;

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

  673.     background-color: white;

  674. }

  675. 

  676. /* div table */

  677. div.blueTable {

  678.     border: 1px solid #1C6EA4;

  679.     background-color: white;

  680.     width: 100%;

  681.     text-align: left;

  682.     border-collapse: collapse;

  683.     border: 0px;

  684. }

  685. 

  686. div.blueTable.emptyrecord {

  687.     background-color: #eeeeee;

  688. }

  689. 

  690. .divTable.blueTable .divTableCell,

  691. .divTable.blueTable .divTableHead,

  692.  {

  693.     border: 1px solid #AAAAAA;

  694.     padding: 3px 2px;

  695. }

  696. 

  697. .divTable.blueTable .divTableBody .divTableCell {

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

  699.     border-bottom: 1px lightgrey solid;

  700.     border-right: 1px lightgrey dotted;

  701. 	vertical-align: middle;

  702. }

  703. 

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

  705.     background: #D0E4F5;

  706. }

  707. 

  708. .divTable.blueTable .divTableHeading {

  709.     background: #1C6EA4;

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

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

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

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

  714. }

  715. 

  716. .divTable.blueTable .divTableHeading .divTableHead {

  717.     font-size: 15px;

  718.     font-weight: bold;

  719.     color: #FFFFFF !important;

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

  721. }

  722. 

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

  724.     border-left: none;

  725. }

  726. 

  727. .blueTable .tableFootStyle {

  728.     font-size: 14px;

  729.     font-weight: bold;

  730.     color: #FFFFFF;

  731.     background: #D0E4F5;

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

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

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

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

  736. }

  737. 

  738. .blueTable .tableFootStyle {

  739.     font-size: 14px;

  740. }

  741. 

  742. .blueTable .tableFootStyle .links {

  743.     text-align: right;

  744. }

  745. 

  746. .blueTable .tableFootStyle .links a {

  747.     display: inline-block;

  748.     background: #1C6EA4;

  749.     color: #FFFFFF;

  750.     padding: 2px 8px;

  751.     border-radius: 5px;

  752. }

  753. 

  754. .blueTable.outerTableFooter {

  755.     border-top: none;

  756. }

  757. 

  758. .blueTable.outerTableFooter .tableFootStyle {

  759.     padding: 3px 5px;

  760. }

  761. 

  762. /* DivTable.com */

  763. .divTable {

  764.     display: table;

  765.     margin: 3px 0px 3px 0px;

  766. }

  767. 

  768. .divTable.highlight {

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

  770. }

  771. .divTable.highlight div {

  772. 	background-color: lightyellow !important;

  773. }

  774. 

  775. .jobTable.Editing{

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

  777. 	animation: flash 1s linear infinite;

  778. }

  779. .Editor{

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

  781. }

  782. .Editor select{

  783. 	color:black !important;

  784. }

  785. .jobTable.Editing div, 

  786. .Editor div {

  787. 	font-weight:900;

  788. 	background-color: lightyellow !important;

  789. }

  790. 

  791. 

  792. .divTable.invalidjob.highlight {

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

  794. }

  795. 

  796. .divTable.highlight.newcopy {

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

  798.     border: 5px orange solid;

  799. }

  800. 

  801. .divTableRow {

  802.     display: table-row;

  803. }

  804. 

  805. .divTableRow.errmsg {

  806.     background-color: white;

  807.     font-weight: bolder;

  808.     color: red;

  809. }

  810. 

  811. .divTableHeading {

  812.     display: table-header-group;

  813. }

  814. 

  815. .divTableCell,

  816. .divTableHead {

  817.     display: table-cell;

  818. }

  819. 

  820. .divTableHeading {

  821.     display: table-header-group;

  822. }

  823. 

  824. .divTableFoot {

  825.     display: table-footer-group;

  826. }

  827. 

  828. .divTableBody {

  829.     display: table-row-group;

  830. }

  831. 

  832. /* customized part of div table */

  833. div.sheettableheader {

  834.     margin-top: 0px;

  835.     height: 36px;

  836.     overflow-x: hidden;

  837.     overflow-y: scroll;

  838. }

  839. 

  840. div.btos,

  841. div.bstart,

  842. div.bfinish,

  843. div.brate,

  844. div.bstaff,

  845. div.bclient,

  846. div.bconfirmed,

  847. div.bedit,

  848. div.bsave,

  849. div.brating,

  850. div.bdelete {

  851.     width: 5%;

  852.     height: 30px;

  853. 	position:relative;

  854. }

  855. 

  856. div.btos {

  857.     width: 15%;

  858. }

  859. 

  860. div.bstart,

  861. div.bfinish {

  862.     width: 10%;

  863. }

  864. 

  865. div.bstaff,

  866. div.bclient{

  867. 	width: 10%;

  868. }

  869. 

  870. div.brate {

  871.     width: 10%;

  872.     max-width: 20px;

  873. }

  874. div.btos.error,

  875. div.bstart.error,

  876. div.bfinish.error,

  877. div.bstaff.error,

  878. div.bclient.error,

  879. div.brate.error{

  880. 	position:relative;

  881. 	background-color: yellow !important;

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

  883. }

  884. div.error::after{

  885. 	position:absolute;

  886. 	right:0px;

  887. 	bottom:0px;

  888. 	color:red;

  889. 	font-family: "ticons"; 

  890. 	font-weight: 900; 

  891. 	content: "\f071";	

  892. 	animation: blinker 0.3s linear infinite;

  893. }

  894. 

  895. .divTable div > select {

  896.     width: 100%;

  897.     height: 100%;

  898. }

  899. 

  900. div.bdelete,

  901. div.bedit,

  902. div.bsave,

  903. div.bconfirmed {

  904.     text-align: center;

  905.     width: 3%;

  906. }

  907. 

  908. div.brating {

  909. 	width: 3%;

  910.     text-align: center;

  911.     cursor: pointer;

  912. }

  913. 

  914. div.Editor div.brating{

  915. 	min-width:110px;

  916. }

  917. 

  918. div.bedit{

  919. 	text-align:center;

  920. 	cursor: pointer;

  921. }

  922. 

  923. div.bsave span.ticon-copy {

  924.      display: none;  

  925. }

  926. 

  927. div.divTableHeading  div.bsave span.ticon,

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

  929.     display: inline-block;

  930.     border: 3px solid orange;

  931.     padding: 5px;

  932.     border-radius: 20px;

  933.     color: orange;

  934. }

  935. 

  936. div.bsave span.ticon-save {

  937.     display: inline-block;

  938.     border: 3px solid lightgrey;

  939.     padding: 5px;

  940.     border-radius: 5px;

  941.     color: black;

  942.     cursor: pointer;

  943. }

  944. 

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

  946.     display: none;

  947. }

  948. 

  949. div.jobTable.saved div{

  950. 	background-color: transparent;

  951. }

  952. 

  953. div.jobTable.dirty div.bsave{

  954. 	background-color: lightyellow;

  955. }

  956. div.jobTable.dirty div.bsave span{

  957. 	animation-duration: 0.3s;

  958.     animation-timing-function: linear;

  959.     animation-delay: 0s;

  960.     animation-iteration-count: 5;

  961.     animation-direction: normal;

  962.     animation-fill-mode: none;

  963.     animation-play-state: running;

  964.     animation-name: blinker;	

  965. }

  966. 

  967. div.bdelete span.ticon-trash,

  968. div.bedit span.ticon-edit {

  969.     display: inline-block;

  970.     border: 3px solid lightgrey;

  971.     padding: 5px;

  972.     border-radius: 5px;

  973.     color: red;

  974.     cursor: pointer;

  975. }

  976. div.bedit span.ticon-edit{

  977. 	color:blue;

  978. }

  979. 

  980. div.workspace div > span:hover {

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

  982. }

  983. 

  984. div.jobTable.to_be_deleted_duplicate{

  985. 	color: red;

  986. }

  987. 

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

  989. {

  990. 	animation: blinker 0.3s linear infinite;

  991. }

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

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

  994. 	display:none !important;

  995. }

  996. 

  997. div.divTableHeading div > span:hover {

  998.     cursor: pointer;

  999.     animation: blinker 0.3s linear infinite;

  1000. }

  1001. 

  1002. /* short code for the table */

  1003. div.btos select,

  1004. div.bstart input,

  1005. div.bfinish input {

  1006.     width: 100%;

  1007.     height: 98%;

  1008. }

  1009. 

  1010. div.divTable.validjob {

  1011.     border: 0px solid white;

  1012. }

  1013. 

  1014. div.divTable.invalidjob {

  1015.     border-left: 2px solid red;

  1016.     border-right: 2px solid red;

  1017. }

  1018. 

  1019. div.divTable .invalid {

  1020.     background-color: yellow;

  1021. }

  1022. 

  1023. /* end of div table */

  1024. /* pop up message box */

  1025. .bts_message .ult_modal-body {

  1026.     height: 50vh;

  1027.     overflow: scroll;

  1028. }

  1029. 

  1030. .bts_message .ult_modal-body .sent {

  1031.     color: green;

  1032. }

  1033. 

  1034. .bts_message .ult_modal-body .nojob {

  1035.     color: dimgrey;

  1036. }

  1037. 

  1038. .bts_message .ult_modal-body .error {

  1039.     color: red;

  1040. }

  1041. 

  1042. .bts_message .ult_modal-body .span {

  1043.     font-weight: 900;

  1044. }

  1045. 

  1046. 

  1047. .xdsoft_datetimepicker{

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

  1049. }