timepicker.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .timepicker-panel .clock-wrap {
  2. position: relative;
  3. }
  4. .timepicker-panel .clock {
  5. position: relative;
  6. background: #817865;
  7. color: #ffffff;
  8. border-radius: 50%;
  9. position: absolute;
  10. left: 50%;
  11. top: 50%;
  12. }
  13. .timepicker-panel .clock .item {
  14. width: 32px;
  15. height: 32px;
  16. left: 50%;
  17. top: 50%;
  18. margin-left: -16px;
  19. margin-top: -16px;
  20. position: absolute;
  21. user-select: none;
  22. border-radius: 50%;
  23. z-index: 9;
  24. cursor: pointer;
  25. }
  26. .timepicker-panel .clock .item-selected {
  27. background: #655e4e;
  28. color: #0074c7;
  29. }
  30. .timepicker-panel .clock .hand {
  31. width: 2px;
  32. bottom: 50%;
  33. left: 50%;
  34. margin-left: -1px;
  35. top: 20px;
  36. -webkit-transform-origin: center bottom;
  37. transform-origin: center bottom;
  38. position: absolute;
  39. will-change: transform;
  40. z-index: 1;
  41. background-color: #655e4e;
  42. }
  43. .timepicker-panel .clock .hand .drag {
  44. top: -16px;
  45. left: -15px;
  46. width: 4px;
  47. height: 4px;
  48. border: 14px solid #655e4e;
  49. position: absolute;
  50. box-sizing: content-box;
  51. border-radius: 100%;
  52. background-color: #0074c7;
  53. }
  54. .timepicker-panel .clock .center {
  55. top: 50%;
  56. left: 50%;
  57. width: 6px;
  58. height: 6px;
  59. position: absolute;
  60. transform: translate(-50%,-50%);
  61. border-radius: 50%;
  62. background-color: #655e4e;
  63. }
  64. .timepicker-panel .panel-header {
  65. height: 70px;
  66. border: 0;
  67. font-size: 36px;
  68. position: relative;
  69. }
  70. .timepicker-panel .body {
  71. position: relative;
  72. }
  73. .timepicker-panel .panel-header .ampm {
  74. font-size: 16px;
  75. padding-left: 10px;
  76. position: absolute;
  77. right: 20px;
  78. }
  79. .timepicker-panel .panel-header .sep {
  80. opacity: 0.6;
  81. }
  82. .timepicker-panel .panel-header .title {
  83. cursor: pointer;
  84. opacity: 0.6;
  85. }
  86. .timepicker-panel .panel-header .title:hover {
  87. opacity: 1.0;
  88. }
  89. .timepicker-panel .panel-header .title-selected,
  90. .timepicker-panel .panel-header .title-selected:hover {
  91. cursor: default;
  92. opacity: 1.0;
  93. }