Patrick
/
acaresydney_ts
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
timesheet source code
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
65 Revize
1 Větev
1.5MB
Strom: ab8747016b
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „ab8747016b“
${ noResults }
acaresydney_ts/css/bts_office.css

999 lines
23KB
Surový Blame Historie 

  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% {

  17.         opacity: 0;

  18.     }

  19. }

  20. 

  21. @keyframes swing {

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

  23. 	50% { padding-left:10px; background-color: lightyellow;}

  24. 	100% { padding-left:0px; background-color:yellow;}

  25. }

  26. 

  27. .titlebar_gradient {

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

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

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

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

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

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

  34. }

  35. 

  36. .sheettitle h1:hover {

  37.     text-decoration: underline;

  38.     font-weight: bolder;

  39.     cursor: pointer;

  40.     animation: blinker 1s linear infinite;

  41. }

  42. 

  43. .timesheets {

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

  45.     height: 100vh;

  46.     margin: 0px;

  47.     padding: 0px;

  48.     left: 150px;

  49.     position: fixed;

  50.     background-color: red;

  51.     overflow: hidden;

  52. }

  53. 

  54. .peoplebar {

  55.     position: fixed;

  56.     top: 0px;

  57.     width: 150px;

  58.     height: 100vh;

  59.     background: lightgrey;

  60.     overflow: hidden;

  61. }

  62. 

  63. .peoplebar.left {

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

  65.     left: 0px;

  66. }

  67. 

  68. .peoplebar.right {

  69.     right: 0px;

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

  71. }

  72. 

  73. .timesheets .sheettitle {

  74.     padding-top: 8px;

  75.     text-align: center;

  76.     background-color: lightgrey;

  77.     height: 40px;

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

  79. }

  80. 

  81. .timesheets .workspace {

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

  83.     background-color: white;

  84.     overflow-x: hidden;

  85.     overflow-y: scroll;

  86. }

  87. 

  88. .timesheets .workspace img {

  89.     display: block;

  90.     margin-top: 140px;

  91.     margin-left: auto;

  92.     margin-right: auto;

  93. }

  94. 

  95. .timesheets .statusbar {

  96.     position: relative;

  97.     height: 40px;

  98.     background-color: ivory;

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

  100. }

  101. 

  102. /* staff search bar*/

  103. .b_search {

  104.     position: relative;

  105.     height: 40px;

  106. }

  107. 

  108. .b_search input {

  109.     margin-top: 5px;

  110.     padding-left: 20px;

  111.     padding-right: 20px;

  112.     border-radius: 20px;

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

  114.     height: 30px;

  115. }

  116. 

  117. .b_search .ticon-search {

  118.     position: absolute;

  119.     top: 15px;

  120.     left: 5px;

  121. }

  122. 

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

  124.     position: absolute;

  125.     top: 15px;

  126.     right: 5px;

  127. }

  128. 

  129. .peoplebar button {

  130.     width: 100%;

  131.     padding: 0px;

  132.     height: 20px;

  133. }

  134. 

  135. .peoplebar .stafflist,

  136. .peoplebar .clientlist {

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

  138.     background-color: dimgrey;

  139.     overflow: hidden;

  140.     text-align: center;

  141. 

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

  143. }

  144. 

  145. .peopleitem {

  146.     position: relative;

  147.     margin-top: 10px;

  148.     margin-bottom: 10px;

  149.     height: 100px;

  150.     background: transparent;

  151. }

  152. 

  153. /* hover box */

  154. div.peopleitem > label {

  155.     -webkit-perspective: 1000px;

  156.     perspective: 1000px;

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

  158.     transform-style: preserve-3d;

  159.     display: block;

  160.     width: 100%;

  161.     height: 100px;

  162.     position: absolute;

  163.     left: 50%;

  164.     top: 50%;

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

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

  167.     cursor: pointer;

  168. }

  169. 

  170. div.peopleitem .card {

  171.     position: relative;

  172.     height: 100%;

  173.     width: 95%;

  174.     margin: auto;

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

  176.     transform-style: preserve-3d;

  177.     -webkit-transition: all 600ms;

  178.     transition: all 600ms;

  179.     z-index: 20;

  180.     border: 1px solid black;

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

  182. }

  183. 

  184. div.peopleitem .card > div {

  185.     position: absolute;

  186.     height: 100%;

  187.     width: 100%;

  188.     background: #FFF;

  189.     text-align: center;

  190. 

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

  192.     -webkit-backface-visibility: hidden;

  193.     backface-visibility: hidden;

  194.     border-radius: 2px;

  195. }

  196. 

  197. div.peopleitem .card .back {

  198.     background: #222;

  199.     color: #FFF;

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

  201.     transform: rotateX(180deg);

  202. }

  203. 

  204. div.peopleitem label:hover .card {

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

  206.     transform: rotateX(20deg);

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

  208. }

  209. 

  210. div.peopleitem input {

  211.     display: none;

  212. }

  213. 

  214. div.peopleitem :checked + .card {

  215.     transform: rotateX(180deg);

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

  217. }

  218. 

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

  220.     transform: rotateX(160deg);

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

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

  223. }

  224. 

  225. /* end of hover box */

  226. .satusbar {

  227.     position: relative;

  228. }

  229. 

  230. .statusbar * {

  231.     vertical-align: top;

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

  233. }

  234. 

  235. .statusbar div {

  236.     position: relative;

  237.     display: inline;

  238. }

  239. 

  240. .statusbar .xero {

  241.     width: 40px;

  242.     height: 100%;

  243.     margin-left: 5px;

  244.     margin-right: 5px;

  245.     display: inline-block;

  246.     background-color: white;

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

  248.     border-radius: 100px;

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

  250.     background-size: 40px;

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

  252. }

  253. 

  254. .statusbar .wifi i,

  255. .statusbar .xero i,

  256. .statusbar .csv i {

  257.     font-size: 20px;

  258.     color: red;

  259.     position: absolute;

  260.     right: 0px;

  261.     top: -5px;

  262. }

  263. 

  264. .statusbar .wifi {

  265.     width: 40px;

  266.     height: 100%;

  267.     margin-left: 0px;

  268.     margin-right: 5px;

  269.     display: inline-block;

  270.     background-color: white;

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

  272.     border-radius: 100px;

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

  274.     background-size: 40px;

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

  276. }

  277. 

  278. .statusbar .csv {

  279.     width: 40px;

  280.     height: 100%;

  281.     margin-left: 0px;

  282.     margin-right: 5px;

  283.     display: inline-block;

  284.     background-color: white;

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

  286.     border-radius: 100px;

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

  288.     background-size: 40px;

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

  290. }

  291. 

  292. .statusbar .xero:hover,

  293. .statusbar .wifi:hover,

  294. .statusbar .csv:hover {

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

  296. }

  297. 

  298. .statusbar .wages {

  299.     text-align: center;

  300.     width: 150px;

  301.     height: 100%;

  302.     display: inline-block;

  303.     background-color: transparent;

  304.     font-size: 24px;

  305.     font-weight: bold;

  306.     color: dimgrey;

  307.     border: 1px dotted white;

  308.     position: absolute;

  309.     right: 400px;

  310. }

  311. 

  312. .statusbar .workinghours {

  313.     background-color: transparent;

  314.     width: 175px;

  315.     height: 100%;

  316.     display: inline-block;

  317.     position: absolute;

  318.     right: 220px;

  319. }

  320. 

  321. .statusbar #woh:hover {

  322.     cursor: pointer;

  323.     animation: blinker 0.3s linear infinite;

  324. }

  325. 

  326. .workinghours label {

  327.     transform: unset;

  328.     left: 0;

  329.     top: 0;

  330.     width: 50px;

  331.     height: 100%;

  332.     padding: 0.5em;

  333.     text-align: left;

  334.     display: inline-block;

  335.     color: #A974D;

  336.     font-weight: bolder;

  337.     line-height: 15px;

  338.     background-color: transparent;

  339.     margin-right: 0px;

  340. }

  341. 

  342. .statusbar input {

  343.     margin: 0px;

  344.     width: 115px;

  345.     height: 100%;

  346.     display: inline-block;

  347.     font-size: 24px;

  348.     background: transparent;

  349.     text-align: center;

  350. }

  351. 

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

  353.     margin-top: 5px;

  354.     margin-bottom: 5px ;

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

  356.     width: 200px ;

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

  358.     font-weight: bolder;

  359.     position: absolute;

  360.     right: 10px;

  361. }

  362. 

  363. div.sheetsheader {

  364.     height: 110px;

  365.     background: darkorange;

  366.     position: relative;

  367. }

  368. 

  369. div.prevweek {

  370.     display: inline-block;

  371.     height: 70px;

  372.     width: 40px;

  373.     font-size: 36px;

  374.     padding-top: 5px;

  375.     padding-left: 2px;

  376.     float: left;

  377.     background: darkorange;

  378. }

  379. 

  380. div.prevweek span:hover,

  381. div.nextweek span:hover {

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

  383.     border-radius: 20px;

  384.     color: black;

  385. }

  386. 

  387. div.nextweek {

  388.     display: inline-block;

  389.     height: 70px;

  390.     width: 40px;

  391.     font-size: 36px;

  392.     padding-top: 5px;

  393.     padding-left: 4px;

  394.     float: right;

  395. }

  396. 

  397. div.weekly {

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

  399.     display: inline-block;

  400.     background-color: black;

  401.     height: 70px;

  402. }

  403. 

  404. div.weekly div {

  405.     margin: 0px;

  406. }

  407. 

  408. div.weekly div.weekname {

  409.     position: relative;

  410.     width: 170px;

  411.     top: -5px;

  412.     border: 2px solid grey;

  413.     border-radius: 10px;

  414.     text-align: center;

  415.     color: white;

  416. 

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

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

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

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

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

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

  423. }

  424. 

  425. div.weekly div.weekname input{

  426.     width: 80px;

  427.     height: 20px;

  428.     border:0px;

  429.     background-color:transparent;

  430.     color: white;

  431.     padding-left:4px;

  432.     padding-right:4px;

  433. }

  434. 

  435. div.weekly div.weekname input.hasDatepicker{

  436. 	background-image:none

  437. }

  438. 

  439. div.weekly div.weekname.prev {

  440.     position: absolute;

  441.     left: 100px;

  442.     z-index: 1;

  443. }

  444. 

  445. div.weekly div.weekname.next {

  446.     position: absolute;

  447.     right: 100px;

  448.     z-index: 1;

  449. }

  450. 

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

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

  453.     cursor: pointer;

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

  455. }

  456. 

  457. div.weekly div.copyprogress {

  458.     position: absolute;

  459.     display: inline-block;

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

  461.     height: 15px;

  462.     top: 0px;

  463.     border-radius: 2px;

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

  465.     text-align: center;

  466. 

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

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

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

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

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

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

  473. }

  474. 

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

  476.     position: relative;

  477.     top: -5px;

  478.     width: 150px;

  479.     height: 25px;

  480.     padding: 0px;

  481.     border-radius: 10px;

  482.     margin: auto;

  483.     z-index: 1;

  484.     color: white;

  485. 

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

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

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

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

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

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

  492. }

  493. 

  494. #gotoweek {

  495.     width: 50%;

  496.     background-color: transparent;

  497.     border: 0px;

  498.     color: white;

  499.     font-weight: 900;

  500. }

  501. 

  502. div.weekdays {

  503.     position: absolute;

  504.     top: 15px;

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

  506.     height: 55px;

  507.     background-color: darkorange;

  508.     text-align: center;

  509. }

  510. 

  511. div.week1,

  512. div.week2 {

  513.     display: inline-block;

  514.     width: 45%;

  515.     height: 55px;

  516.     background-color: darkorange;

  517.     text-align: justify;

  518.     border: 1px dashed lightgrey;

  519.     padding-left: 10px;

  520.     padding-right: 10px;

  521. }

  522. 

  523. div.week1:hover,

  524. div.week2:Hover {

  525.     border-radius: 20px;

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

  527.     cursor: pointer;

  528. 

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

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

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

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

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

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

  535. }

  536. 

  537. div.week1.filtered,

  538. div.week2.filtered {

  539.     border-radius: 20px;

  540. 

  541.     /* background:white; */

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

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

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

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

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

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

  548. }

  549. 

  550. div.week1::after,

  551. div.week2::after {

  552.     content: '';

  553.     display: inline-block;

  554.     width: 100%;

  555. }

  556. 

  557. div.week1.filtered span,

  558. div.week2.filtered span,

  559. div.week1.filtered div.week1color,

  560. div.week2.filtered div.week2color

  561. {

  562. 	visibility: hidden;

  563. }

  564. 

  565. div.week1 {

  566.     position: relative;

  567.     left: -10px;

  568. }

  569. 

  570. div.week2 {

  571.     position: relative;

  572.     left: 10px;

  573. }

  574. 

  575. div.week1 > div,

  576. div.week2 > div {

  577.     display: inline-block;

  578.     text-align: center;

  579.     width: 10%;

  580.     height: 40px;

  581.     margin-top: 5px;

  582.     font-weight: bolder;

  583.     border-radius: 10px;

  584. }

  585. 

  586. div.week1 div:hover,

  587. div.week2 div:hover {

  588.     cursor: pointer;

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

  590. }

  591. 

  592. div.week1 > div {

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

  594. }

  595. 

  596. .week1color {

  597.     color: black;

  598. 

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

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

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

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

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

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

  605. }

  606. 

  607. div.week2 > div {

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

  609. }

  610. 

  611. .week2color {

  612.     color: white;

  613. 

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

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

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

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

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

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

  620. }

  621. 

  622. div.assignment > div {

  623.     color: navy;

  624.     background-color: white;

  625.     font-size: 20px;

  626.     font-weight: lighter;

  627.     border: 1px dotted lightgrey;

  628. }

  629. 

  630. /* peple item card*/

  631. .peopleitem div span.checked {

  632.     color: orange;

  633. }

  634. 

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

  636.     height: auto;

  637.     text-align: center;

  638.     background-color: lightgrey;

  639. }

  640. 

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

  642.     width: 100%;

  643.     height: 15px;

  644.     background-color: dimgrey;

  645.     color: white;

  646. }

  647. 

  648. div.back > span.icon {

  649.     width: 100%;

  650.     background-color: lightgrey;

  651.     color: dimgrey;

  652. }

  653. 

  654. div.front >  span.badge,

  655. div.back >  span.badge {

  656.     border-radius: 50%;

  657.     display: inline-block;

  658.     padding-left: 8px;

  659.     padding-right: 8px;

  660.     text-align: center;

  661.     position: absolute;

  662.     right: -5px;

  663.     top: -5px;

  664. }

  665. 

  666. span.badge.blue {

  667.     color: #fff;

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

  669.     background-color: black;

  670. }

  671. 

  672. span.badge.pink {

  673.     color: black;

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

  675.     background-color: white;

  676. }

  677. 

  678. /* div table */

  679. div.blueTable {

  680.     border: 1px solid #1C6EA4;

  681.     background-color: white;

  682.     width: 100%;

  683.     text-align: left;

  684.     border-collapse: collapse;

  685.     border: 0px;

  686. }

  687. 

  688. div.blueTable.emptyrecord {

  689.     background-color: #eeeeee;

  690. }

  691. 

  692. .divTable.blueTable .divTableCell,

  693. .divTable.blueTable .divTableHead,

  694.  {

  695.     border: 1px solid #AAAAAA;

  696.     padding: 3px 2px;

  697. }

  698. 

  699. .divTable.blueTable .divTableBody .divTableCell {

  700.     font-size: 15px;

  701.     border-bottom: 1px lightgrey solid;

  702.     border-right: 1px lightgrey dotted;

  703. 	vertical-align: middle;

  704. }

  705. 

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

  707.     background: #D0E4F5;

  708. }

  709. 

  710. .divTable.blueTable .divTableHeading {

  711.     background: #1C6EA4;

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

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

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

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

  716. }

  717. 

  718. .divTable.blueTable .divTableHeading .divTableHead {

  719.     font-size: 15px;

  720.     font-weight: bold;

  721.     color: #FFFFFF;

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

  723. }

  724. 

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

  726.     border-left: none;

  727. }

  728. 

  729. .blueTable .tableFootStyle {

  730.     font-size: 14px;

  731.     font-weight: bold;

  732.     color: #FFFFFF;

  733.     background: #D0E4F5;

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

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

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

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

  738. }

  739. 

  740. .blueTable .tableFootStyle {

  741.     font-size: 14px;

  742. }

  743. 

  744. .blueTable .tableFootStyle .links {

  745.     text-align: right;

  746. }

  747. 

  748. .blueTable .tableFootStyle .links a {

  749.     display: inline-block;

  750.     background: #1C6EA4;

  751.     color: #FFFFFF;

  752.     padding: 2px 8px;

  753.     border-radius: 5px;

  754. }

  755. 

  756. .blueTable.outerTableFooter {

  757.     border-top: none;

  758. }

  759. 

  760. .blueTable.outerTableFooter .tableFootStyle {

  761.     padding: 3px 5px;

  762. }

  763. 

  764. /* DivTable.com */

  765. .divTable {

  766.     display: table;

  767.     margin: 3px 0px 3px 0px;

  768. }

  769. 

  770. .divTable.highlight {

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

  772. }

  773. .divTable.highlight div {

  774. 	background-color: lightyellow !important;

  775. }

  776. 

  777. .divTable.invalidjob.highlight {

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

  779. }

  780. 

  781. .divTable.highlight.newcopy {

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

  783.     border: 5px orange solid;

  784. }

  785. 

  786. .divTableRow {

  787.     display: table-row;

  788. }

  789. 

  790. .divTableRow.errmsg {

  791.     background-color: white;

  792.     font-weight: bolder;

  793.     color: red;

  794. }

  795. 

  796. .divTableHeading {

  797.     display: table-header-group;

  798. }

  799. 

  800. .divTableCell,

  801. .divTableHead {

  802.     display: table-cell;

  803. }

  804. 

  805. .divTableHeading {

  806.     display: table-header-group;

  807. }

  808. 

  809. .divTableFoot {

  810.     display: table-footer-group;

  811. }

  812. 

  813. .divTableBody {

  814.     display: table-row-group;

  815. }

  816. 

  817. /* customized part of div table */

  818. div.sheettableheader {

  819.     margin-top: 0px;

  820.     height: 36px;

  821.     overflow-x: hidden;

  822.     overflow-y: scroll;

  823. }

  824. 

  825. div.btos,

  826. div.bstart,

  827. div.bfinish,

  828. div.brate,

  829. div.bstaff,

  830. div.bclient,

  831. div.bconfirmed,

  832. div.bsave,

  833. div.brating,

  834. div.bdelete {

  835.     width: 10%;

  836.     height: 30px;

  837. }

  838. 

  839. div.btos {

  840.     width: 20%;

  841. }

  842. 

  843. div.bstart,

  844. div.bfinish {

  845.     width: 11%;

  846. }

  847. 

  848. div.brate {

  849.     width: 10%;

  850.     max-width: 20px;

  851. }

  852. 

  853. div.brate.error{

  854. 	position:relative;

  855. 	background-color: red !important;

  856. 	animation: swing 1s linear infinite;

  857. }

  858. div.error::after{

  859. 	position:absolute;

  860. 	right:0px;

  861. 	bottom:0px;

  862. 	color:red;

  863. 	font-family: "ticons"; 

  864. 	font-weight: 900; 

  865. 	content: "\f071";	

  866. 	animation: blinker 0.3s linear infinite;

  867. }

  868. 

  869. .divTable div > select {

  870.     width: 100%;

  871.     height: 100%;

  872. }

  873. 

  874. div.bdelete,

  875. div.bsave,

  876. div.bconfirmed {

  877.     text-align: center;

  878.     width: 5%;

  879. }

  880. 

  881. div.brating {

  882.     text-align: center;

  883.     cursor: pointer;

  884. }

  885. 

  886. .brating {

  887.     unicode-bidi: bidi-override;

  888.     direction: rtl;

  889. }

  890. 

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

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

  893.     content: "\2605";

  894.     position: absolute;

  895. }

  896. 

  897. div.bsave span.ticon-copy {

  898.      display: none;  

  899. }

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

  901.     display: inline-block;

  902.     border: 3px solid orange;

  903.     padding: 5px;

  904.     border-radius: 20px;

  905.     color: orange;

  906. }

  907. 

  908. div.bsave span.ticon-save {

  909.     display: inline-block;

  910.     border: 3px solid lightgrey;

  911.     padding: 5px;

  912.     border-radius: 5px;

  913.     color: black;

  914.     cursor: pointer;

  915. }

  916. 

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

  918.     display: none;

  919. }

  920. 

  921. div.jobTable.saved div{

  922. 	background-color: transparent;

  923. }

  924. 

  925. div.jobTable.dirty div.bsave{

  926. 	background-color: lightyellow;

  927. }

  928. div.jobTable.dirty div.bsave span{

  929. 	animation-duration: 0.3s;

  930.     animation-timing-function: linear;

  931.     animation-delay: 0s;

  932.     animation-iteration-count: 5;

  933.     animation-direction: normal;

  934.     animation-fill-mode: none;

  935.     animation-play-state: running;

  936.     animation-name: blinker;	

  937. }

  938. 

  939. div.bdelete span.ticon-trash {

  940.     display: inline-block;

  941.     border: 3px solid lightgrey;

  942.     padding: 5px;

  943.     border-radius: 5px;

  944.     color: red;

  945.     cursor: pointer;

  946. }

  947. 

  948. div.workspace div > span:hover {

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

  950. }

  951. 

  952. div.divTableHeading div > span:hover {

  953.     cursor: pointer;

  954.     animation: blinker 0.3s linear infinite;

  955. }

  956. 

  957. /* short code for the table */

  958. div.btos select,

  959. div.bstart input,

  960. div.bfinish input {

  961.     width: 100%;

  962.     height: 98%;

  963. }

  964. 

  965. div.divTable.validjob {

  966.     border: 0px solid white;

  967. }

  968. 

  969. div.divTable.invalidjob {

  970.     border-left: 2px solid red;

  971.     border-right: 2px solid red;

  972. }

  973. 

  974. div.divTable .invalid {

  975.     background-color: yellow;

  976. }

  977. 

  978. /* end of div table */

  979. /* pop up message box */

  980. .bts_message .ult_modal-body {

  981.     height: 50vh;

  982.     overflow: scroll;

  983. }

  984. 

  985. .bts_message .ult_modal-body .sent {

  986.     color: green;

  987. }

  988. 

  989. .bts_message .ult_modal-body .nojob {

  990.     color: dimgrey;

  991. }

  992. 

  993. .bts_message .ult_modal-body .error {

  994.     color: red;

  995. }

  996. 

  997. .bts_message .ult_modal-body .span {

  998.     font-weight: 900;

  999. }