|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- body {
- all: unset;
- min-height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- user-select: none;
- }
-
- main {
- flex-grow: 1;
- display: flex;
- }
-
- #controls {
- margin: 20px;
- display: flex;
- flex-flow: column;
- justify-content: center;
- align-items: center;
- }
-
- #container {
- flex-grow: 1;
- margin: 20px;
- }
-
- ::-moz-focus-inner {
- border: none;
- }
-
- button#playpause {
- border: none;
- background: none;
- cursor: pointer;
- font-size: 64px;
- margin: 8px;
- vertical-align: middle;
- transition: all 50ms;
- }
-
- button#playpause:hover,
- button#playpause:focus {
- filter: brightness(120%);
- outline: none;
- }
-
- button#playpause:active {
- transform: translate(1px, 1px);
- }
-
- label#volume-label {
- font-size: 30px;
- vertical-align: middle;
- }
-
- input#volume {
- vertical-align: middle;
- width: 80px;
- height: 30px;
- border-radius: 3px;
- background: #eee;
- cursor: pointer;
- -webkit-appearance: none;
- }
-
- input#volume::-moz-range-thumb {
- height: 30px;
- width: 20px;
- background-color: #999;
- border-radius: 3px;
- border: none;
- }
-
- input#volume::-webkit-slider-thumb {
- height: 30px;
- width: 20px;
- background-color: #999;
- border-radius: 3px;
- -webkit-appearance: none;
- }
-
- input#volume:hover,
- input#volume:focus {
- filter: brightness(102%);
- outline: none;
- }
|