Ncam Gnrvngu
7bc11e49a4
initial commit a lot more stuff Make project REUSE compliant start working on implementing audio
61 lines
1.1 KiB
SCSS
61 lines
1.1 KiB
SCSS
/*
|
|
* SPDX-FileCopyrightText: 2025 Ncam Gnrvngu <info@ncamgnrvngu.eu>
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
#player {
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#title {
|
|
text-align: center;
|
|
}
|
|
|
|
#controls {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
#playbutton {
|
|
width: 10%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.seek {
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.seek {
|
|
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
|
width: 80%;
|
|
--thumb-height: 1.125em;
|
|
--track-height: 0.125em;
|
|
--brightness-hover: 180%;
|
|
--brightness-down: 80%;
|
|
--clip-edges: 0.125em;
|
|
color: #f07167;
|
|
--track-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.seek::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.seek:focus {
|
|
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
|
}
|
|
|
|
.seek::-ms-track {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
|
|
/* Hides the slider so custom styles can be added */
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|