:root { --pfp-size: 150px; } a { text-decoration: none; color: inherit; } canvas { position: absolute; opacity: 0.7; } .animated-border { border: 4px solid transparent; border-image: linear-gradient(var(--angle), white, white); border-image-slice: 1; animation: rotate 5s linear infinite; } @keyframes rotate { to { --angle: 360deg; } } @property --angle { syntax: ""; initial-value: 0deg; inherits: false; } .action-icon { stroke-width: 2.8; fill: #222; stroke: #222; } .hidden { display: none; } .button { padding: 3px; cursor: pointer; border: 1px solid #6666; font-weight: bold; border-radius: 5px; } .selected { background-color: #9996; } .clickable { background-color: #fff6; } /* not the body tag * need this because backdrop-filter on does not scroll with page, it * stays at the top */ .body { position: relative; height: 100vh; backdrop-filter: blur(15px); overflow: hidden; } header { white-space: nowrap; position: fixed; margin-top: 10px; width: 100%; height: 50px; background: #fffa; z-index: 1; } .header-content { line-height: 50px; text-align: center; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /*============================== MODAL =======================================*/ .playBtn { height: 100%; width: 100%; position: absolute; z-index: 1; text-align: center; align-content: center; justify-content: center; display: flex; align-items: center; } .playBtn p { cursor: pointer; color: white; background: #222a; height: 100px; width: 100px; border-radius: 50%; align-content: center; } .overlay { height: 100%; width: 100%; background-color: #222a; position: fixed; z-index: 2; } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40%; width: 40%; z-index: 3; } .modal-content { padding: 10px; overflow: auto; z-index: 4; display: grid; grid-template-columns: fit-content(var(--pfp-size)) auto fit-content(16px); grid-template-rows: fit-content(var(--pfp-size)) fit-content(var(--pfp-size)) auto; gap: 10px; background-color: #fffd; border: 1px solid transparent; border-radius: 15px; } .pfp { grid-row: 1 / span 2; grid-column: 1; height: var(--pfp-size); width: var(--pfp-size); border: 1px solid transparent; border-radius: 50%; } .info-title { font-weight: bold; font-size: 2em; align-self: center; grid-row: 1; grid-column: 2; } .close { justify-self: right; cursor: pointer; grid-row: 1; grid-column: 3; } .info-subtitle { align-self: flex-start; grid-row: 2; grid-column: 2 / span 2; } .links { margin-left: 20px; margin-top: 10px; grid-row: 3; grid-column: 1 / span 3; } .links a { color: blue; /* or #0000EE */ text-decoration: underline; } /*============================== /MODAL ======================================*/ .main { position: relative; align-items: center; justify-content: center; width: 100%; height: 100%; display: flex; flex-direction: column; } .stream-actions { position: absolute; width: 100%; left: 0; top: 4px; display: flex; flex-direction: row; } .stream-actions * { margin-left: 1px; margin-right: 1px; } #Stream { position: absolute; right: 2px; } .stream-actions svg { height: 20px; width: 20px; } .player-image { position: relative; width: 70%; height: 70%; display: flex; justify-content: center; } .footer { position: relative; display: flex; margin-top: 20px; margin-top: 20px; background-color: #fff5; padding: 10px; color: #222; width: 70%; text-align: center; justify-content: center; align-items: center; } .track-info { overflow: hidden; display: flex; flex-direction: column; text-align: center; align-items: left; width: 100%; } @keyframes marquee { 0% { margin-left: 0; } 80% { margin-left: calc(-1 * var(--distance)); } 100% { margin-left: calc(-1 * var(--distance)); } } .title { font-weight: bold; user-select: text; white-space: nowrap; font-size: 1em; } .album { user-select: text; white-space: nowrap; font-size: 0.9em; } .artist { user-select: text; white-space: nowrap; font-size: 0.8em; } .track-actions * { margin-left: 1px; margin-right: 1px; } .track-actions svg { height: 16px; width: 16px; } .track-actions .bitrate { height: 16px; width: 2em; } #trackActions { position: absolute; left: 0; bottom: 2px; display: flex; flex-direction: row; } #fileActions { position: absolute; right: 2px; bottom: 0; display: flex; flex-direction: row; } @media (width <= 960px) { .player-image { width: 50%; height: 50%; } canvas { display: none; } } @media (width <= 500px) { .player-image { width: 40%; height: 40%; } }