|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- body {
- /* display: grid
- grid-template-columns: 100%
- grid-template-rows: 1fr 1fr 1fr 1fr */
- height: 100vh;
- width: 100vw;
- margin: 0px;
- }
-
- .audio-player {
- width: 100vw;
- height: 30 rem;
- --player-button-width: 3em;
- --sound-button-width: 2em;
- --space: .5em;
- --tw-bg-opacity: 1;
- --acc-background: rgb(239 239 239/var(--tw-bg-opacity));
- --acc-background: #d9d9d9;
- --acc-button: rgb(255 255 255/var(--tw-bg-opacity));
- --acc-black: rgb(0 0 0/var(--tw-bg-opacity));
- }
-
- .icon-container {
- width: 100%;
- height: 100%;
- background-color: #000000;
- background-color: var(--acc-black);
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .audio-icon {
- width: 90%;
- height: 90%;
- }
-
- .controls {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 100%;
- /* margin-top: 10px; */
- }
-
- .player-button {
- background-color: transparent;
- border: 0;
- width: var(--player-button-width);
- height: var(--player-button-width);
- cursor: pointer;
- padding: 0;
- box-shadow: 0 0 20px 2px #00000040;
- }
-
-
- .timeline {
- -webkit-appearance: none;
- width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
- height: .5em;
- background-color: var(--acc-background);
- border-radius: 5px;
- background-size: 0% 100%;
- background-image: linear-gradient(#00000080, var(--acc-background));
- background-repeat: no-repeat;
- margin-right: var(--space);
- width: 100vw;
- }
-
- .timeline::-webkit-slider-thumb {
- -webkit-appearance: none;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- cursor: pointer;
- opacity: 0;
- transition: all .1s;
- background-color: var(--acc-background);
- }
-
- .timeline::-moz-range-thumb {
- -webkit-appearance: none;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- cursor: pointer;
- opacity: 0;
- transition: all .1s;
- background-color: var(--acc-background);
- }
-
- .timeline::-ms-thumb {
- -webkit-appearance: none;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- cursor: pointer;
- opacity: 0;
- transition: all .1s;
- background-color: var(--acc-background);
- }
-
- .timeline::-webkit-slider-runnable-track {
- -webkit-appearance: none;
- box-shadow: none;
- border: none;
- background: transparent;
- }
-
- .timeline::-moz-range-track {
- -webkit-appearance: none;
- box-shadow: none;
- border: none;
- background: transparent;
- }
-
- .timeline::-ms-track {
- -webkit-appearance: none;
- box-shadow: none;
- border: none;
- background: transparent;
- }
-
- iframe {
- width: 100vw;
- height: 100vh;
- border: none;
- }
|