timesheet source code
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

142 lines
3.0KB

  1. @CHARSET "UTF-8";
  2. .card {
  3. /* Add shadows to create the "card" effect */
  4. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  5. transition: 0.3s;
  6. }
  7. /* On mouse-over, add a deeper shadow */
  8. .card:hover {
  9. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  10. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
  11. background: rgb(214,249,255); /* Old browsers */
  12. background: -moz-linear-gradient(top, rgba(214,249,255,1) 0%, rgba(158,232,250,1) 100%); /* FF3.6-15 */
  13. background: -webkit-linear-gradient(top, rgba(214,249,255,1) 0%,rgba(158,232,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
  14. background: linear-gradient(to bottom, rgba(214,249,255,1) 0%,rgba(158,232,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  15. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
  16. }
  17. /* Add some padding inside the card container */
  18. .card .container {
  19. padding: 2px 0px;
  20. min-height:300px;
  21. position: relative;
  22. }
  23. .card .container.rated {
  24. background: url('../img/circle.png') no-repeat center;
  25. background-size: contain;
  26. }
  27. .card img{
  28. width:100%;
  29. }
  30. .card .ratecontainer{
  31. display : inline-block;
  32. position : relative;
  33. text-align: center;
  34. width: 100%;
  35. position:absolute;
  36. bottom: 5px;
  37. }
  38. .card .container p,
  39. .card .container h1{
  40. margin-top:5px;
  41. margin-bottom:5px;
  42. margin-left:16px;
  43. margin-right:16px;
  44. }
  45. .card .container h1{
  46. font-weight:900;
  47. min-height:100px;
  48. max-height:100px;
  49. }
  50. .day_of_week{
  51. font-weight:900;
  52. font-size: 5em;
  53. text-align: center;
  54. background-color:dimgrey;
  55. color:white;
  56. text-shadow: 0 0 10px #0e0606;
  57. }
  58. .job_start,
  59. .job_finish {
  60. display:inline-block;
  61. font-weight:900;
  62. width: 50%;
  63. font-size:3em;
  64. background-color:grey;
  65. color:white;
  66. margin:0px;
  67. padding:0px;
  68. text-align:center;
  69. box-shadow:0 0 2px black inset;
  70. text-shadow: 0 0 10px #0e0606;
  71. }
  72. .job_time{
  73. box-shadow:0 0 2px white inset;
  74. }
  75. .job_day_of_week{
  76. position: absolute;
  77. top: 1px;
  78. color: white;
  79. right: 20px;
  80. font-size: 1em;
  81. font-weight: bolder;
  82. border-left: 1px dotted white;
  83. border-bottom: 1px dotted white;
  84. padding: 0 10px 0 10px;
  85. }
  86. .rate {
  87. float: left;
  88. height: 46px;
  89. padding: 0 10px;
  90. display: block;
  91. }
  92. .rate:not(:checked) > input {
  93. position:absolute;
  94. /* top:-9999px; */
  95. visibility:hidden;
  96. }
  97. .rate:not(:checked) > label {
  98. float:right;
  99. width:1em;
  100. overflow:hidden;
  101. white-space:nowrap;
  102. cursor:pointer;
  103. font-size: 2.6em;
  104. color:#ccc;
  105. }
  106. .rate:not(:checked) > label:before {
  107. content: '★ ';
  108. }
  109. .rate > input:checked ~ label {
  110. color: #ffc700;
  111. }
  112. .rate:not(:checked) > label:hover,
  113. .rate:not(:checked) > label:hover ~ label {
  114. color: #deb217;
  115. }
  116. .rate > input:checked + label:hover,
  117. .rate > input:checked + label:hover ~ label,
  118. .rate > input:checked ~ label:hover,
  119. .rate > input:checked ~ label:hover ~ label,
  120. .rate > label:hover ~ input:checked ~ label {
  121. color: #c59b08;
  122. }
  123. .ult_modal-body{
  124. height:60vh;
  125. width:80vw;
  126. }