Patrick
/
acaresydney_ts
Obserwuj 1
Polub 0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
timesheet source code
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
52 Commity
1 Gałąź
1.5MB
Drzewo: f3361ab0f6
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'f3361ab0f6'
${ noResults }
acaresydney_ts/css/bts_timesheet.css

942 lines
22KB
Czysty Wina Historia 

  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. .titlebar_gradient {

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

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

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

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

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

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

  28. }

  29. 

  30. .sheettitle h1:hover {

  31.     text-decoration: underline;

  32.     font-weight: bolder;

  33.     cursor: pointer;

  34.     animation: blinker 1s linear infinite;

  35. }

  36. 

  37. .timesheets {

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

  39.     height: 100vh;

  40.     margin: 0px;

  41.     padding: 0px;

  42.     left: 150px;

  43.     position: fixed;

  44.     background-color: red;

  45.     overflow: hidden;

  46. }

  47. 

  48. .peoplebar {

  49.     position: fixed;

  50.     top: 0px;

  51.     width: 150px;

  52.     height: 100vh;

  53.     background: lightgrey;

  54.     overflow: hidden;

  55. }

  56. 

  57. .peoplebar.left {

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

  59.     left: 0px;

  60. }

  61. 

  62. .peoplebar.right {

  63.     right: 0px;

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

  65. }

  66. 

  67. .timesheets .sheettitle {

  68.     padding-top: 8px;

  69.     text-align: center;

  70.     background-color: lightgrey;

  71.     height: 40px;

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

  73. }

  74. 

  75. .timesheets .workspace {

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

  77.     background-color: white;

  78.     overflow-x: hidden;

  79.     overflow-y: scroll;

  80. }

  81. 

  82. .timesheets .workspace img {

  83.     display: block;

  84.     margin-top: 140px;

  85.     margin-left: auto;

  86.     margin-right: auto;

  87. }

  88. 

  89. .timesheets .statusbar {

  90.     position: relative;

  91.     height: 40px;

  92.     background-color: ivory;

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

  94. }

  95. 

  96. /* staff search bar*/

  97. .b_search {

  98.     position: relative;

  99.     height: 40px;

  100. }

  101. 

  102. .b_search input {

  103.     margin-top: 5px;

  104.     padding-left: 20px;

  105.     padding-right: 20px;

  106.     border-radius: 20px;

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

  108.     height: 30px;

  109. }

  110. 

  111. .b_search .ticon-search {

  112.     position: absolute;

  113.     top: 15px;

  114.     left: 5px;

  115. }

  116. 

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

  118.     position: absolute;

  119.     top: 15px;

  120.     right: 5px;

  121. }

  122. 

  123. .peoplebar button {

  124.     width: 100%;

  125.     padding: 0px;

  126.     height: 20px;

  127. }

  128. 

  129. .peoplebar .stafflist,

  130. .peoplebar .clientlist {

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

  132.     background-color: dimgrey;

  133.     overflow: hidden;

  134.     text-align: center;

  135. 

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

  137. }

  138. 

  139. .peopleitem {

  140.     position: relative;

  141.     margin-top: 10px;

  142.     margin-bottom: 10px;

  143.     height: 100px;

  144.     background: transparent;

  145. }

  146. 

  147. /* hover box */

  148. div.peopleitem > label {

  149.     -webkit-perspective: 1000px;

  150.     perspective: 1000px;

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

  152.     transform-style: preserve-3d;

  153.     display: block;

  154.     width: 100%;

  155.     height: 100px;

  156.     position: absolute;

  157.     left: 50%;

  158.     top: 50%;

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

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

  161.     cursor: pointer;

  162. }

  163. 

  164. div.peopleitem .card {

  165.     position: relative;

  166.     height: 100%;

  167.     width: 95%;

  168.     margin: auto;

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

  170.     transform-style: preserve-3d;

  171.     -webkit-transition: all 600ms;

  172.     transition: all 600ms;

  173.     z-index: 20;

  174.     border: 1px solid black;

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

  176. }

  177. 

  178. div.peopleitem .card > div {

  179.     position: absolute;

  180.     height: 100%;

  181.     width: 100%;

  182.     background: #FFF;

  183.     text-align: center;

  184. 

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

  186.     -webkit-backface-visibility: hidden;

  187.     backface-visibility: hidden;

  188.     border-radius: 2px;

  189. }

  190. 

  191. div.peopleitem .card .back {

  192.     background: #222;

  193.     color: #FFF;

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

  195.     transform: rotateX(180deg);

  196. }

  197. 

  198. div.peopleitem label:hover .card {

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

  200.     transform: rotateX(20deg);

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

  202. }

  203. 

  204. div.peopleitem input {

  205.     display: none;

  206. }

  207. 

  208. div.peopleitem :checked + .card {

  209.     transform: rotateX(180deg);

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

  211. }

  212. 

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

  214.     transform: rotateX(160deg);

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

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

  217. }

  218. 

  219. /* end of hover box */

  220. .satusbar {

  221.     position: relative;

  222. }

  223. 

  224. .statusbar * {

  225.     vertical-align: top;

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

  227. }

  228. 

  229. .statusbar div {

  230.     position: relative;

  231.     display: inline;

  232. }

  233. 

  234. .statusbar .xero {

  235.     width: 40px;

  236.     height: 100%;

  237.     margin-left: 5px;

  238.     margin-right: 5px;

  239.     display: inline-block;

  240.     background-color: white;

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

  242.     border-radius: 100px;

  243.     background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/xero.png);

  244.     background-size: 40px;

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

  246. }

  247. 

  248. .statusbar .wifi i,

  249. .statusbar .xero i,

  250. .statusbar .csv i {

  251.     font-size: 20px;

  252.     color: red;

  253.     position: absolute;

  254.     right: 0px;

  255.     top: -5px;

  256. }

  257. 

  258. .statusbar .wifi {

  259.     width: 40px;

  260.     height: 100%;

  261.     margin-left: 0px;

  262.     margin-right: 5px;

  263.     display: inline-block;

  264.     background-color: white;

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

  266.     border-radius: 100px;

  267.     background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/wnet.png);

  268.     background-size: 40px;

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

  270. }

  271. 

  272. .statusbar .csv {

  273.     width: 40px;

  274.     height: 100%;

  275.     margin-left: 0px;

  276.     margin-right: 5px;

  277.     display: inline-block;

  278.     background-color: white;

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

  280.     border-radius: 100px;

  281.     background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/08/csv.png);

  282.     background-size: 40px;

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

  284. }

  285. 

  286. .statusbar .xero:hover,

  287. .statusbar .wifi:hover,

  288. .statusbar .csv:hover {

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

  290. }

  291. 

  292. .statusbar .wages {

  293.     text-align: center;

  294.     width: 150px;

  295.     height: 100%;

  296.     display: inline-block;

  297.     background-color: transparent;

  298.     font-size: 24px;

  299.     font-weight: bold;

  300.     color: dimgrey;

  301.     border: 1px dotted white;

  302.     position: absolute;

  303.     right: 400px;

  304. }

  305. 

  306. .statusbar .workinghours {

  307.     background-color: transparent;

  308.     width: 175px;

  309.     height: 100%;

  310.     display: inline-block;

  311.     position: absolute;

  312.     right: 220px;

  313. }

  314. 

  315. .statusbar #woh:hover {

  316.     cursor: pointer;

  317.     animation: blinker 0.3s linear infinite;

  318. }

  319. 

  320. .workinghours label {

  321.     transform: unset;

  322.     left: 0;

  323.     top: 0;

  324.     width: 50px;

  325.     height: 100%;

  326.     padding: 0.5em;

  327.     text-align: left;

  328.     display: inline-block;

  329.     color: #A974D;

  330.     font-weight: bolder;

  331.     line-height: 15px;

  332.     background-color: transparent;

  333.     margin-right: 0px;

  334. }

  335. 

  336. .statusbar input {

  337.     margin: 0px;

  338.     width: 115px;

  339.     height: 100%;

  340.     display: inline-block;

  341.     font-size: 24px;

  342.     background: transparent;

  343.     text-align: center;

  344. }

  345. 

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

  347.     margin-top: 5px;

  348.     margin-bottom: 5px ;

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

  350.     width: 200px ;

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

  352.     font-weight: bolder;

  353.     position: absolute;

  354.     right: 10px;

  355. }

  356. 

  357. div.sheetsheader {

  358.     height: 110px;

  359.     background: darkorange;

  360.     position: relative;

  361. }

  362. 

  363. div.prevweek {

  364.     display: inline-block;

  365.     height: 70px;

  366.     width: 40px;

  367.     font-size: 36px;

  368.     padding-top: 5px;

  369.     padding-left: 2px;

  370.     float: left;

  371.     background: darkorange;

  372. }

  373. 

  374. div.prevweek span:hover,

  375. div.nextweek span:hover {

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

  377.     border-radius: 20px;

  378.     color: black;

  379. }

  380. 

  381. div.nextweek {

  382.     display: inline-block;

  383.     height: 70px;

  384.     width: 40px;

  385.     font-size: 36px;

  386.     padding-top: 5px;

  387.     padding-left: 4px;

  388.     float: right;

  389. }

  390. 

  391. div.weekly {

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

  393.     display: inline-block;

  394.     background-color: black;

  395.     height: 70px;

  396. }

  397. 

  398. div.weekly div {

  399.     margin: 0px;

  400. }

  401. 

  402. div.weekly div.weekname {

  403.     position: relative;

  404.     width: 170px;

  405.     top: -5px;

  406.     border: 2px solid grey;

  407.     border-radius: 10px;

  408.     text-align: center;

  409.     color: white;

  410. 

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

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

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

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

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

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

  417. }

  418. 

  419. div.weekly div.weekname input{

  420.     width: 80px;

  421.     height: 20px;

  422.     border:0px;

  423.     background-color:transparent;

  424.     color: white;

  425.     padding-left:4px;

  426.     padding-right:4px;

  427. }

  428. 

  429. div.weekly div.weekname.prev {

  430.     position: absolute;

  431.     left: 100px;

  432.     z-index: 1;

  433. }

  434. 

  435. div.weekly div.weekname.next {

  436.     position: absolute;

  437.     right: 100px;

  438.     z-index: 1;

  439. }

  440. 

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

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

  443.     cursor: pointer;

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

  445. }

  446. 

  447. div.weekly div.copyprogress {

  448.     position: absolute;

  449.     display: inline-block;

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

  451.     height: 15px;

  452.     top: 0px;

  453.     border-radius: 2px;

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

  455.     text-align: center;

  456. 

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

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

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

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

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

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

  463. }

  464. 

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

  466.     position: relative;

  467.     top: -5px;

  468.     width: 150px;

  469.     height: 25px;

  470.     padding: 0px;

  471.     border-radius: 10px;

  472.     margin: auto;

  473.     z-index: 1;

  474.     color: white;

  475. 

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

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

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

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

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

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

  482. }

  483. 

  484. #gotoweek {

  485.     width: 50%;

  486.     background-color: transparent;

  487.     border: 0px;

  488.     color: white;

  489.     font-weight: 900;

  490. }

  491. 

  492. div.weekdays {

  493.     position: absolute;

  494.     top: 15px;

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

  496.     height: 55px;

  497.     background-color: darkorange;

  498.     text-align: center;

  499. }

  500. 

  501. div.week1,

  502. div.week2 {

  503.     display: inline-block;

  504.     width: 45%;

  505.     height: 55px;

  506.     background-color: darkorange;

  507.     text-align: justify;

  508.     border: 1px dashed lightgrey;

  509.     padding-left: 10px;

  510.     padding-right: 10px;

  511. }

  512. 

  513. div.week1:hover,

  514. div.week2:Hover {

  515.     border-radius: 20px;

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

  517.     cursor: pointer;

  518. 

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

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

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

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

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

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

  525. }

  526. 

  527. div.week1.filtered,

  528. div.week2.filtered {

  529.     border-radius: 20px;

  530. 

  531.     /* background:white; */

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

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

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

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

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

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

  538. }

  539. 

  540. div.week1:after,

  541. div.week2:after {

  542.     content: '';

  543.     display: inline-block;

  544.     width: 100%;

  545. }

  546. 

  547. div.week1 {

  548.     position: relative;

  549.     left: -10px;

  550. }

  551. 

  552. div.week2 {

  553.     position: relative;

  554.     left: 10px;

  555. }

  556. 

  557. div.week1 > div,

  558. div.week2 > div {

  559.     display: inline-block;

  560.     text-align: center;

  561.     width: 10%;

  562.     height: 40px;

  563.     margin-top: 5px;

  564.     font-weight: bolder;

  565.     border-radius: 10px;

  566. }

  567. 

  568. div.week1 div:hover,

  569. div.week2 div:hover {

  570.     cursor: pointer;

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

  572. }

  573. 

  574. div.week1 > div {

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

  576. }

  577. 

  578. .week1color {

  579.     color: black;

  580. 

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

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

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

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

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

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

  587. }

  588. 

  589. div.week2 > div {

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

  591. }

  592. 

  593. .week2color {

  594.     color: white;

  595. 

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

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

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

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

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

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

  602. }

  603. 

  604. div.assignment > div {

  605.     color: navy;

  606.     background-color: white;

  607.     font-size: 20px;

  608.     font-weight: lighter;

  609.     border: 1px dotted lightgrey;

  610. }

  611. 

  612. /* peple item card*/

  613. .peopleitem div span.checked {

  614.     color: orange;

  615. }

  616. 

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

  618.     height: auto;

  619.     text-align: center;

  620.     background-color: lightgrey;

  621. }

  622. 

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

  624.     width: 100%;

  625.     height: 15px;

  626.     background-color: dimgrey;

  627.     color: white;

  628. }

  629. 

  630. div.back > span.icon {

  631.     width: 100%;

  632.     background-color: lightgrey;

  633.     color: dimgrey;

  634. }

  635. 

  636. div.front >  span.badge,

  637. div.back >  span.badge {

  638.     border-radius: 50%;

  639.     display: inline-block;

  640.     padding-left: 8px;

  641.     padding-right: 8px;

  642.     text-align: center;

  643.     position: absolute;

  644.     right: -5px;

  645.     top: -5px;

  646. }

  647. 

  648. span.badge.blue {

  649.     color: #fff;

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

  651.     background-color: black;

  652. }

  653. 

  654. span.badge.pink {

  655.     color: black;

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

  657.     background-color: white;

  658. }

  659. 

  660. /* div table */

  661. div.blueTable {

  662.     border: 1px solid #1C6EA4;

  663.     background-color: white;

  664.     width: 100%;

  665.     text-align: left;

  666.     border-collapse: collapse;

  667.     border: 0px;

  668. }

  669. 

  670. div.blueTable.emptyrecord {

  671.     background-color: #eeeeee;

  672. }

  673. 

  674. .divTable.blueTable .divTableCell,

  675. .divTable.blueTable .divTableHead,

  676.  {

  677.     border: 1px solid #AAAAAA;

  678.     padding: 3px 2px;

  679. }

  680. 

  681. .divTable.blueTable .divTableBody .divTableCell {

  682.     font-size: 15px;

  683. }

  684. 

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

  686.     background: #D0E4F5;

  687. }

  688. 

  689. .divTable.blueTable .divTableHeading {

  690.     background: #1C6EA4;

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

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

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

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

  695. }

  696. 

  697. .divTable.blueTable .divTableHeading .divTableHead {

  698.     font-size: 15px;

  699.     font-weight: bold;

  700.     color: #FFFFFF;

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

  702. }

  703. 

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

  705.     border-left: none;

  706. }

  707. 

  708. .blueTable .tableFootStyle {

  709.     font-size: 14px;

  710.     font-weight: bold;

  711.     color: #FFFFFF;

  712.     background: #D0E4F5;

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

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

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

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

  717. }

  718. 

  719. .blueTable .tableFootStyle {

  720.     font-size: 14px;

  721. }

  722. 

  723. .blueTable .tableFootStyle .links {

  724.     text-align: right;

  725. }

  726. 

  727. .blueTable .tableFootStyle .links a {

  728.     display: inline-block;

  729.     background: #1C6EA4;

  730.     color: #FFFFFF;

  731.     padding: 2px 8px;

  732.     border-radius: 5px;

  733. }

  734. 

  735. .blueTable.outerTableFooter {

  736.     border-top: none;

  737. }

  738. 

  739. .blueTable.outerTableFooter .tableFootStyle {

  740.     padding: 3px 5px;

  741. }

  742. 

  743. /* DivTable.com */

  744. .divTable {

  745.     display: table;

  746.     margin: 3px 0px 3px 0px;

  747. }

  748. 

  749. .divTable.highlight {

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

  751. }

  752. 

  753. .divTable.invalidjob.highlight {

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

  755. }

  756. 

  757. .divTable.highlight.newcopy {

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

  759.     border: 5px orange solid;

  760. }

  761. 

  762. .divTableRow {

  763.     display: table-row;

  764. }

  765. 

  766. .divTableRow.errmsg {

  767.     background-color: white;

  768.     font-weight: bolder;

  769.     color: red;

  770. }

  771. 

  772. .divTableHeading {

  773.     display: table-header-group;

  774. }

  775. 

  776. .divTableCell,

  777. .divTableHead {

  778.     display: table-cell;

  779. }

  780. 

  781. .divTableHeading {

  782.     display: table-header-group;

  783. }

  784. 

  785. .divTableFoot {

  786.     display: table-footer-group;

  787. }

  788. 

  789. .divTableBody {

  790.     display: table-row-group;

  791. }

  792. 

  793. /* customized part of div table */

  794. div.sheettableheader {

  795.     margin-top: 0px;

  796.     height: 36px;

  797.     overflow-x: hidden;

  798.     overflow-y: scroll;

  799. }

  800. 

  801. div.btos,

  802. div.bstart,

  803. div.bfinish,

  804. div.brate,

  805. div.bstaff,

  806. div.bclient,

  807. div.bconfirmed,

  808. div.bsave,

  809. div.brating,

  810. div.bdelete {

  811.     width: 10%;

  812.     height: 30px;

  813. }

  814. 

  815. div.btos {

  816.     width: 20%;

  817. }

  818. 

  819. div.bstart,

  820. div.bfinish {

  821.     width: 11%;

  822. }

  823. 

  824. div.brate {

  825.     width: 10%;

  826.     max-width: 20px;

  827. }

  828. 

  829. .divTable div > select {

  830.     width: 100%;

  831.     height: 100%;

  832. }

  833. 

  834. div.bdelete,

  835. div.bsave,

  836. div.bconfirmed {

  837.     text-align: center;

  838.     width: 5%;

  839. }

  840. 

  841. div.brating {

  842.     text-align: center;

  843.     cursor: pointer;

  844. }

  845. 

  846. .brating {

  847.     unicode-bidi: bidi-override;

  848.     direction: rtl;

  849. }

  850. 

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

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

  853.     content: "\2605";

  854.     position: absolute;

  855. }

  856. 

  857. div.bsave span.ticon-copy {

  858.     display: none;

  859. }

  860. 

  861. div.bsave span.ticon-save {

  862.     display: inline-block;

  863.     border: 3px solid lightgrey;

  864.     padding: 5px;

  865.     border-radius: 5px;

  866.     color: black;

  867.     cursor: pointer;

  868. }

  869. 

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

  871.     display: none;

  872. }

  873. 

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

  875.     display: inline-block;

  876.     border: 3px solid orange;

  877.     padding: 5px;

  878.     border-radius: 20px;

  879.     color: orange;

  880. }

  881. 

  882. div.bdelete span.ticon-trash {

  883.     display: inline-block;

  884.     border: 3px solid lightgrey;

  885.     padding: 5px;

  886.     border-radius: 5px;

  887.     color: red;

  888.     cursor: pointer;

  889. }

  890. 

  891. div.workspace div > span:hover {

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

  893. }

  894. 

  895. div.divTableHeading div > span:hover {

  896.     cursor: pointer;

  897.     animation: blinker 0.3s linear infinite;

  898. }

  899. 

  900. /* short code for the table */

  901. div.btos select,

  902. div.bstart input,

  903. div.bfinish input {

  904.     width: 100%;

  905.     height: 98%;

  906. }

  907. 

  908. div.divTable.validjob {

  909.     border: 0px solid white;

  910. }

  911. 

  912. div.divTable.invalidjob {

  913.     border-left: 2px solid red;

  914.     border-right: 2px solid red;

  915. }

  916. 

  917. div.divTable .invalid {

  918.     background-color: yellow;

  919. }

  920. 

  921. /* end of div table */

  922. /* pop up message box */

  923. .bts_message .ult_modal-body {

  924.     height: 50vh;

  925.     overflow: scroll;

  926. }

  927. 

  928. .bts_message .ult_modal-body .sent {

  929.     color: green;

  930. }

  931. 

  932. .bts_message .ult_modal-body .nojob {

  933.     color: dimgrey;

  934. }

  935. 

  936. .bts_message .ult_modal-body .error {

  937.     color: red;

  938. }

  939. 

  940. .bts_message .ult_modal-body .span {

  941.     font-weight: 900;

  942. }