Compare commits
No commits in common. "ef77fe72592d6223fdff8f08a5de8b3e23d9812a" and "b240756a64b7ecf4c1331779d84f0e84050e65d3" have entirely different histories.
ef77fe7259
...
b240756a64
@ -16,12 +16,9 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="ui" style="display: none;">
|
<div id="ui" style="display: none;">
|
||||||
<button id="burgerButton" class="mobile-only">☰</button>
|
|
||||||
<div id="menuButtons">
|
|
||||||
<button id="quitButton" class="button">Quit</button>
|
<button id="quitButton" class="button">Quit</button>
|
||||||
<button id="uiButton" class="button">Menu</button>
|
<button id="uiButton" class="button">Menu</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="uiWidget" class="hidden">
|
<div id="uiWidget" class="hidden">
|
||||||
<div class="widget-tabs">
|
<div class="widget-tabs">
|
||||||
<button class="tab-button" data-tab="settings">Settings</button>
|
<button class="tab-button" data-tab="settings">Settings</button>
|
||||||
|
|||||||
@ -3850,22 +3850,5 @@ function hideSongDurationBar() {
|
|||||||
document.getElementById('songDurationBar').style.display = 'none';
|
document.getElementById('songDurationBar').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const burgerButton = document.getElementById('burgerButton');
|
|
||||||
const menuButtons = document.getElementById('menuButtons');
|
|
||||||
|
|
||||||
burgerButton.addEventListener('click', () => {
|
|
||||||
menuButtons.classList.toggle('show');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close the menu when clicking outside
|
|
||||||
document.addEventListener('click', (event) => {
|
|
||||||
if (!burgerButton.contains(event.target) && !menuButtons.contains(event.target)) {
|
|
||||||
menuButtons.classList.remove('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|||||||
@ -548,49 +548,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#burgerButton {
|
|
||||||
display: none;
|
|
||||||
background-color: #ff00ff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menuButtons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menuButtons button {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
#burgerButton {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menuButtons {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba(18, 4, 88, 0.9);
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menuButtons.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.song-duration-bar {
|
.song-duration-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
@ -604,7 +561,6 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.song-duration-fill {
|
.song-duration-fill {
|
||||||
@ -639,7 +595,6 @@ body {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 100%;
|
padding-left: 100%;
|
||||||
animation: scroll 15s linear infinite;
|
animation: scroll 15s linear infinite;
|
||||||
padding-right: 20px; /* Add padding to prevent overlap with timer */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scroll {
|
@keyframes scroll {
|
||||||
@ -655,66 +610,6 @@ body {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Updated styles for mobile */
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.song-duration-bar {
|
|
||||||
top: 10px;
|
|
||||||
left: auto;
|
|
||||||
right: 10px;
|
|
||||||
transform: none;
|
|
||||||
width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
|
|
||||||
max-width: auto; /* Limit maximum width */
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ui {
|
|
||||||
position: fixed;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
z-index: 1001; /* Ensure UI is above song duration bar */
|
|
||||||
}
|
|
||||||
|
|
||||||
#ui button {
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#songName {
|
|
||||||
font-size: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
flex-grow: 1; /* Allow song name to take up available space */
|
|
||||||
}
|
|
||||||
|
|
||||||
#songTimer {
|
|
||||||
font-size: 10px;
|
|
||||||
margin-left: 5px;
|
|
||||||
flex-shrink: 0; /* Prevent timer from shrinking */
|
|
||||||
}
|
|
||||||
|
|
||||||
.song-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Additional adjustments for very small screens */
|
|
||||||
@media screen and (max-width: 400px) {
|
|
||||||
.song-duration-bar {
|
|
||||||
width: calc(100% - 120px); /* Slightly more space on very small screens */
|
|
||||||
}
|
|
||||||
|
|
||||||
#songName, #songTimer {
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.skin-option.glow-effect {
|
.skin-option.glow-effect {
|
||||||
box-shadow: 0 0 10px 3px currentColor;
|
box-shadow: 0 0 10px 3px currentColor;
|
||||||
animation: glow 1.5s ease-in-out infinite alternate;
|
animation: glow 1.5s ease-in-out infinite alternate;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user