main.css 1.1 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. body {
  2. all: unset;
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. }
  7. main {
  8. flex-grow: 1;
  9. display: flex;
  10. }
  11. #controls {
  12. margin: 20px;
  13. display: flex;
  14. flex-flow: column;
  15. justify-content: center;
  16. align-items: center;
  17. }
  18. #container {
  19. flex-grow: 1;
  20. margin: 20px;
  21. }
  22. button#playpause {
  23. border: none;
  24. background: none;
  25. cursor: pointer;
  26. font-size: 64px;
  27. margin: 8px;
  28. vertical-align: middle;
  29. transition: all 50ms;
  30. }
  31. button#playpause:hover,
  32. button#playpause:focus {
  33. filter: brightness(120%);
  34. outline: none;
  35. }
  36. button#playpause:active {
  37. transform: translate(1px, 1px);
  38. }
  39. label#volume-label {
  40. font-size: 30px;
  41. vertical-align: middle;
  42. }
  43. input#volume {
  44. vertical-align: middle;
  45. width: 80px;
  46. height: 30px;
  47. border-radius: 3px;
  48. background: #eee;
  49. cursor: pointer;
  50. -webkit-appearance: none;
  51. }
  52. input#volume::-moz-range-thumb {
  53. height: 30px;
  54. width: 20px;
  55. background-color: #999;
  56. border-radius: 3px;
  57. }
  58. input#volume::-webkit-slider-thumb {
  59. height: 30px;
  60. width: 20px;
  61. background-color: #999;
  62. border-radius: 3px;
  63. -webkit-appearance: none;
  64. }
  65. input#volume:hover,
  66. input#volume:focus {
  67. filter: brightness(102%);
  68. outline: none;
  69. }