Patrick
/
acaresydney_ts
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
timesheet source code
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
64 коммитов
1 ветка
1.5MB
Дерево: 3a5841613a
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '3a5841613a'
${ noResults }
acaresydney_ts/css/bts_office.css

980 lines
22KB
Исходник Blame История 

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

  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 {

  558.     position: relative;

  559.     left: -10px;

  560. }

  561. 

  562. div.week2 {

  563.     position: relative;

  564.     left: 10px;

  565. }

  566. 

  567. div.week1 > div,

  568. div.week2 > div {

  569.     display: inline-block;

  570.     text-align: center;

  571.     width: 10%;

  572.     height: 40px;

  573.     margin-top: 5px;

  574.     font-weight: bolder;

  575.     border-radius: 10px;

  576. }

  577. 

  578. div.week1 div:hover,

  579. div.week2 div:hover {

  580.     cursor: pointer;

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

  582. }

  583. 

  584. div.week1 > div {

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

  586. }

  587. 

  588. .week1color {

  589.     color: black;

  590. 

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

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

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

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

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

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

  597. }

  598. 

  599. div.week2 > div {

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

  601. }

  602. 

  603. .week2color {

  604.     color: white;

  605. 

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

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

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

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

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

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

  612. }

  613. 

  614. div.assignment > div {

  615.     color: navy;

  616.     background-color: white;

  617.     font-size: 20px;

  618.     font-weight: lighter;

  619.     border: 1px dotted lightgrey;

  620. }

  621. 

  622. /* peple item card*/

  623. .peopleitem div span.checked {

  624.     color: orange;

  625. }

  626. 

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

  628.     height: auto;

  629.     text-align: center;

  630.     background-color: lightgrey;

  631. }

  632. 

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

  634.     width: 100%;

  635.     height: 15px;

  636.     background-color: dimgrey;

  637.     color: white;

  638. }

  639. 

  640. div.back > span.icon {

  641.     width: 100%;

  642.     background-color: lightgrey;

  643.     color: dimgrey;

  644. }

  645. 

  646. div.front >  span.badge,

  647. div.back >  span.badge {

  648.     border-radius: 50%;

  649.     display: inline-block;

  650.     padding-left: 8px;

  651.     padding-right: 8px;

  652.     text-align: center;

  653.     position: absolute;

  654.     right: -5px;

  655.     top: -5px;

  656. }

  657. 

  658. span.badge.blue {

  659.     color: #fff;

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

  661.     background-color: black;

  662. }

  663. 

  664. span.badge.pink {

  665.     color: black;

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

  667.     background-color: white;

  668. }

  669. 

  670. /* div table */

  671. div.blueTable {

  672.     border: 1px solid #1C6EA4;

  673.     background-color: white;

  674.     width: 100%;

  675.     text-align: left;

  676.     border-collapse: collapse;

  677.     border: 0px;

  678. }

  679. 

  680. div.blueTable.emptyrecord {

  681.     background-color: #eeeeee;

  682. }

  683. 

  684. .divTable.blueTable .divTableCell,

  685. .divTable.blueTable .divTableHead,

  686.  {

  687.     border: 1px solid #AAAAAA;

  688.     padding: 3px 2px;

  689. }

  690. 

  691. .divTable.blueTable .divTableBody .divTableCell {

  692.     font-size: 15px;

  693.     border-bottom: 1px lightgrey solid;

  694.     border-right: 1px lightgrey dotted;

  695. 	vertical-align: middle;

  696. }

  697. 

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

  699.     background: #D0E4F5;

  700. }

  701. 

  702. .divTable.blueTable .divTableHeading {

  703.     background: #1C6EA4;

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

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

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

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

  708. }

  709. 

  710. .divTable.blueTable .divTableHeading .divTableHead {

  711.     font-size: 15px;

  712.     font-weight: bold;

  713.     color: #FFFFFF;

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

  715. }

  716. 

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

  718.     border-left: none;

  719. }

  720. 

  721. .blueTable .tableFootStyle {

  722.     font-size: 14px;

  723.     font-weight: bold;

  724.     color: #FFFFFF;

  725.     background: #D0E4F5;

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

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

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

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

  730. }

  731. 

  732. .blueTable .tableFootStyle {

  733.     font-size: 14px;

  734. }

  735. 

  736. .blueTable .tableFootStyle .links {

  737.     text-align: right;

  738. }

  739. 

  740. .blueTable .tableFootStyle .links a {

  741.     display: inline-block;

  742.     background: #1C6EA4;

  743.     color: #FFFFFF;

  744.     padding: 2px 8px;

  745.     border-radius: 5px;

  746. }

  747. 

  748. .blueTable.outerTableFooter {

  749.     border-top: none;

  750. }

  751. 

  752. .blueTable.outerTableFooter .tableFootStyle {

  753.     padding: 3px 5px;

  754. }

  755. 

  756. /* DivTable.com */

  757. .divTable {

  758.     display: table;

  759.     margin: 3px 0px 3px 0px;

  760. }

  761. 

  762. .divTable.highlight {

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

  764. }

  765. .divTable.highlight div {

  766. 	background-color: lightyellow !important;

  767. }

  768. 

  769. .divTable.invalidjob.highlight {

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

  771. }

  772. 

  773. .divTable.highlight.newcopy {

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

  775.     border: 5px orange solid;

  776. }

  777. 

  778. .divTableRow {

  779.     display: table-row;

  780. }

  781. 

  782. .divTableRow.errmsg {

  783.     background-color: white;

  784.     font-weight: bolder;

  785.     color: red;

  786. }

  787. 

  788. .divTableHeading {

  789.     display: table-header-group;

  790. }

  791. 

  792. .divTableCell,

  793. .divTableHead {

  794.     display: table-cell;

  795. }

  796. 

  797. .divTableHeading {

  798.     display: table-header-group;

  799. }

  800. 

  801. .divTableFoot {

  802.     display: table-footer-group;

  803. }

  804. 

  805. .divTableBody {

  806.     display: table-row-group;

  807. }

  808. 

  809. /* customized part of div table */

  810. div.sheettableheader {

  811.     margin-top: 0px;

  812.     height: 36px;

  813.     overflow-x: hidden;

  814.     overflow-y: scroll;

  815. }

  816. 

  817. div.btos,

  818. div.bstart,

  819. div.bfinish,

  820. div.brate,

  821. div.bstaff,

  822. div.bclient,

  823. div.bconfirmed,

  824. div.bsave,

  825. div.brating,

  826. div.bdelete {

  827.     width: 10%;

  828.     height: 30px;

  829. }

  830. 

  831. div.btos {

  832.     width: 20%;

  833. }

  834. 

  835. div.bstart,

  836. div.bfinish {

  837.     width: 11%;

  838. }

  839. 

  840. div.brate {

  841.     width: 10%;

  842.     max-width: 20px;

  843. }

  844. 

  845. div.brate.error{

  846. 	background-color: red !important;

  847. 	animation: bolder 1s linear infinite;

  848. }

  849. 

  850. .divTable div > select {

  851.     width: 100%;

  852.     height: 100%;

  853. }

  854. 

  855. div.bdelete,

  856. div.bsave,

  857. div.bconfirmed {

  858.     text-align: center;

  859.     width: 5%;

  860. }

  861. 

  862. div.brating {

  863.     text-align: center;

  864.     cursor: pointer;

  865. }

  866. 

  867. .brating {

  868.     unicode-bidi: bidi-override;

  869.     direction: rtl;

  870. }

  871. 

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

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

  874.     content: "\2605";

  875.     position: absolute;

  876. }

  877. 

  878. div.bsave span.ticon-copy {

  879.      display: none;  

  880. }

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

  882.     display: inline-block;

  883.     border: 3px solid orange;

  884.     padding: 5px;

  885.     border-radius: 20px;

  886.     color: orange;

  887. }

  888. 

  889. div.bsave span.ticon-save {

  890.     display: inline-block;

  891.     border: 3px solid lightgrey;

  892.     padding: 5px;

  893.     border-radius: 5px;

  894.     color: black;

  895.     cursor: pointer;

  896. }

  897. 

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

  899.     display: none;

  900. }

  901. 

  902. div.jobTable.saved div{

  903. 	background-color: transparent;

  904. }

  905. 

  906. div.jobTable.dirty div.bsave{

  907. 	background-color: lightyellow;

  908. }

  909. div.jobTable.dirty div.bsave span{

  910. 	animation-duration: 0.3s;

  911.     animation-timing-function: linear;

  912.     animation-delay: 0s;

  913.     animation-iteration-count: 5;

  914.     animation-direction: normal;

  915.     animation-fill-mode: none;

  916.     animation-play-state: running;

  917.     animation-name: blinker;	

  918. }

  919. 

  920. div.bdelete span.ticon-trash {

  921.     display: inline-block;

  922.     border: 3px solid lightgrey;

  923.     padding: 5px;

  924.     border-radius: 5px;

  925.     color: red;

  926.     cursor: pointer;

  927. }

  928. 

  929. div.workspace div > span:hover {

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

  931. }

  932. 

  933. div.divTableHeading div > span:hover {

  934.     cursor: pointer;

  935.     animation: blinker 0.3s linear infinite;

  936. }

  937. 

  938. /* short code for the table */

  939. div.btos select,

  940. div.bstart input,

  941. div.bfinish input {

  942.     width: 100%;

  943.     height: 98%;

  944. }

  945. 

  946. div.divTable.validjob {

  947.     border: 0px solid white;

  948. }

  949. 

  950. div.divTable.invalidjob {

  951.     border-left: 2px solid red;

  952.     border-right: 2px solid red;

  953. }

  954. 

  955. div.divTable .invalid {

  956.     background-color: yellow;

  957. }

  958. 

  959. /* end of div table */

  960. /* pop up message box */

  961. .bts_message .ult_modal-body {

  962.     height: 50vh;

  963.     overflow: scroll;

  964. }

  965. 

  966. .bts_message .ult_modal-body .sent {

  967.     color: green;

  968. }

  969. 

  970. .bts_message .ult_modal-body .nojob {

  971.     color: dimgrey;

  972. }

  973. 

  974. .bts_message .ult_modal-body .error {

  975.     color: red;

  976. }

  977. 

  978. .bts_message .ult_modal-body .span {

  979.     font-weight: 900;

  980. }