diff --git a/static/styles.css b/static/styles.css index 64c6851..dba672c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -561,6 +561,7 @@ body { overflow: hidden; display: none; align-items: center; + z-index: 1000; } .song-duration-fill { @@ -595,6 +596,7 @@ body { display: inline-block; padding-left: 100%; animation: scroll 15s linear infinite; + padding-right: 20px; /* Add padding to prevent overlap with timer */ } @keyframes scroll { @@ -610,6 +612,68 @@ body { 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: 200px; /* Limit maximum width */ + height: 20px; + border-radius: 10px; + } + + #ui { + display: flex; + align-items: center; + 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 { box-shadow: 0 0 10px 3px currentColor; animation: glow 1.5s ease-in-out infinite alternate;