12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- .playerbar {
- position: sticky;
- bottom: 0;
- left: 0;
- width: 100%;
- padding-bottom: 1%;
- background-color: #131341;
- &__range {
- margin: 0 10px 6px 10px;
- -webkit-appearance: none;
- outline: none;
- cursor: pointer;
-
- &::-webkit-slider-thumb {
- -webkit-appearance: none;
- border: 1px solid #000000;
- height: 20px;
- width: 20px;
- border-radius: 100%;
- cursor: pointer;
- margin-top: -8px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- }
- &::-webkit-slider-runnable-track {
- width: 100%;
- border: 1px solid rgba(255, 255, 0, 0.26);
- height: 4px;
- }
- }
- &__info {
- display: flex;
- justify-content: space-between;
- width: 95%;
- margin: 0 auto;
- }
- button {
- font-size: large;
- padding: 0.5%;
- background-color: yellow;
- border: none;
- margin: 0 5px;
- }
- }
- .timestamp {
- margin: 0 10px;
- font-weight: 500;
- }
- .plumline {
- &::-webkit-slider-runnable-track {
- background: #2f1dce;
- }
- }
- .blueline {
- &::-webkit-slider-runnable-track {
- background: #70b2e7;
- }
- }
- .yellowThumb {
- &::-webkit-slider-thumb {
- background: yellow;
- }
- }
- .blueThumb {
- &::-webkit-slider-thumb {
- background: #499fe6;
- }
- }
|