Changed to module based css
This commit is contained in:
Liam
parent
43b8645c5f
commit
6218fbd27a
@ -4,8 +4,6 @@ import Head from 'next/head'
|
||||
|
||||
import Config from '../config.json';
|
||||
|
||||
import '../styles/globals.css'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
// 2. Use at the root of your app
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import {Component} from 'react'
|
||||
import { Component } from 'react'
|
||||
|
||||
import '../styles/main.module.css'
|
||||
|
||||
export default class Home extends Component {
|
||||
|
||||
constructor(props) {
|
||||
@ -6,11 +9,17 @@ export default class Home extends Component {
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
const params = Object.fromEntries(urlSearchParams.entries());
|
||||
|
||||
if (params.id) {
|
||||
document.location.href = "/overlay/"+ window.location.search
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
return <div className={main}>
|
||||
hi
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,10 @@ import ScoreStats from '../src/components/ScoreStats';
|
||||
import SongInfo from "../src/components/SongInfo";
|
||||
|
||||
import Utils from '../src/utils/utils';
|
||||
import styles from '../styles/overlay.module.css';
|
||||
import playerStatsStyles from '../styles/playerStats.module.css';
|
||||
|
||||
export default class Home extends Component {
|
||||
export default class Overlay extends Component {
|
||||
|
||||
#_beatSaverURL = "";
|
||||
|
||||
@ -122,7 +124,6 @@ export default class Home extends Component {
|
||||
shouldConnectSocket = true;
|
||||
}
|
||||
|
||||
console.log(`shouldConnectSocket = ${shouldConnectSocket}`);
|
||||
if (shouldConnectSocket) {
|
||||
this.connectSocket(params.socketaddress);
|
||||
}
|
||||
@ -150,12 +151,15 @@ export default class Home extends Component {
|
||||
* Setup the HTTP Status connection
|
||||
*/
|
||||
connectSocket(socketAddress) {
|
||||
socketAddress = socketAddress === undefined ? 'ws://localhost' : `ws://${socketAddress}:6557/socket`;
|
||||
socketAddress = (socketAddress === undefined ? 'ws://localhost' : `ws://${socketAddress}`) + ":6557/socket";
|
||||
console.log(`Connecting to ${socketAddress}`);
|
||||
const socket = new WebSocket(socketAddress);
|
||||
socket.addEventListener('open', () => {
|
||||
console.log(`Connected to ${socketAddress}`);
|
||||
});
|
||||
socket.addEventListener('close', () => {
|
||||
console.log("Attempting to re-connect to the HTTP Status socket in 30 seconds.");
|
||||
setTimeout(() => this.connectSocket(), 30_000);
|
||||
console.log("Attempting to re-connect to the HTTP Status socket in 10 seconds.");
|
||||
setTimeout(() => this.connectSocket(), 10_000);
|
||||
});
|
||||
socket.addEventListener('message', (message) => {
|
||||
const json = JSON.parse(message.data);
|
||||
@ -295,7 +299,8 @@ export default class Home extends Component {
|
||||
"noteMissed": () => {},
|
||||
"noteSpawned": () => {},
|
||||
"bombMissed": () => {},
|
||||
"beatmapEvent": () => {}
|
||||
"beatmapEvent": () => {},
|
||||
"energyChanged": () => {},
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -307,31 +312,29 @@ export default class Home extends Component {
|
||||
body.style.backgroundColor = "#181a1b";
|
||||
}
|
||||
|
||||
return <>
|
||||
return <div className={styles.main}>
|
||||
{ loading ?
|
||||
<div className={'loading'}>
|
||||
<div className={styles.loading}>
|
||||
<h2>Loading...</h2>
|
||||
</div>
|
||||
: !isValidSteamId ?
|
||||
<div className={'invalid-player'}>
|
||||
<div className={styles.invalidPlayer}>
|
||||
<h1>Invalid player, please visit the main page.</h1>
|
||||
<Link href="/">
|
||||
<a>Go Home</a>
|
||||
</Link>
|
||||
</div> :
|
||||
<div className={'overlay'}>
|
||||
{ this.state.showPlayerStats ?
|
||||
<div className={'player-stats-container'}>
|
||||
<Avatar url={data.profilePicture || data.avatar} />
|
||||
<PlayerStats
|
||||
pp={data.pp.toLocaleString()}
|
||||
globalPos={data.rank.toLocaleString()}
|
||||
country={data.country}
|
||||
countryRank={data.countryRank.toLocaleString()}
|
||||
websiteType={websiteType}
|
||||
/>
|
||||
</div> :
|
||||
""
|
||||
<div className={styles.overlay}>
|
||||
{
|
||||
this.state.showPlayerStats ? <PlayerStats
|
||||
pp={data.pp.toLocaleString()}
|
||||
globalPos={data.rank.toLocaleString()}
|
||||
country={data.country}
|
||||
countryRank={data.countryRank.toLocaleString()}
|
||||
websiteType={websiteType}
|
||||
avatar={data.profilePicture || data.avatar}
|
||||
/>
|
||||
: ""
|
||||
}
|
||||
{
|
||||
this.state.showScore && this.state.isVisible ? <ScoreStats data={this.state} /> : ""
|
||||
@ -341,6 +344,6 @@ export default class Home extends Component {
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import styles from '../../styles/avatar.module.css';
|
||||
|
||||
const Avatar = (props) => {
|
||||
return <>
|
||||
<Image
|
||||
className={'player-avatar'}
|
||||
className={styles.playerAvatar}
|
||||
src={props.url}
|
||||
width={180}
|
||||
height={180}
|
||||
|
||||
@ -1,16 +1,24 @@
|
||||
import ReactCountryFlag from "react-country-flag";
|
||||
|
||||
import styles from '../../styles/playerStats.module.css';
|
||||
import Avatar from "./Avatar";
|
||||
|
||||
const PlayerStats = (props) => {
|
||||
return <div className={'player-stats'}>
|
||||
<p>{props.pp}pp <span style={{
|
||||
fontSize: '20px',
|
||||
}}>({props.websiteType})</span></p>
|
||||
<p>#{props.globalPos}</p>
|
||||
<div className="player-country">
|
||||
<p>#{props.countryRank}</p>
|
||||
<ReactCountryFlag className={'player-country-icon'} svg countryCode={props.country} />
|
||||
return <div className={styles.playerStatsContainer}>
|
||||
<div>
|
||||
<Avatar url={props.avatar} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.playerStats}>
|
||||
<p>{props.pp}pp <span style={{
|
||||
fontSize: '20px',
|
||||
}}>({props.websiteType})</span></p>
|
||||
<p>#{props.globalPos}</p>
|
||||
<div className={styles.playerCountry}>
|
||||
<p>#{props.countryRank}</p>
|
||||
<ReactCountryFlag className={styles.playerCountryIcon} svg countryCode={props.country} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default PlayerStats;
|
||||
@ -1,5 +1,7 @@
|
||||
import {Component} from "react";
|
||||
|
||||
import styles from '../../styles/scoreStats.module.css';
|
||||
|
||||
export default class ScoreStats extends Component {
|
||||
|
||||
constructor(params) {
|
||||
@ -19,19 +21,19 @@ export default class ScoreStats extends Component {
|
||||
render() {
|
||||
const data = this.props.data;
|
||||
|
||||
return <div className={'score-stats'}>
|
||||
<div className={'score-stats-info'}>
|
||||
return <div className={styles.scoreStats}>
|
||||
<div className={styles.scoreStatsInfo}>
|
||||
<p>{data.percentage}</p>
|
||||
<p>{data.currentScore.toLocaleString()}</p>
|
||||
</div>
|
||||
<p className={'score-stats-average-cut'}>Average Cut</p>
|
||||
<div className={'score-stats-hands'}>
|
||||
<div className={'score-stats-left'}>
|
||||
<p className={styles.scoreStatsAverageCut}>Average Cut</p>
|
||||
<div className={styles.scoreStatsHands}>
|
||||
<div className={styles.scoreStatsLeft}>
|
||||
<p>{this.getAverage(data.leftHand.averagePreSwing).toFixed(2)}</p>
|
||||
<p>{this.getAverage(data.leftHand.averagePostSwing).toFixed(2)}</p>
|
||||
<p>{this.getAverage(data.leftHand.averageCut).toFixed(2)}</p>
|
||||
</div>
|
||||
<div className={'score-stats-right'}>
|
||||
<div className={styles.scoreStatsRight}>
|
||||
<p>{this.getAverage(data.rightHand.averagePreSwing).toFixed(2)}</p>
|
||||
<p>{this.getAverage(data.rightHand.averagePostSwing).toFixed(2)}</p>
|
||||
<p>{this.getAverage(data.rightHand.averageCut).toFixed(2)}</p>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import {Component} from "react";
|
||||
|
||||
import styles from '../../styles/songInfo.module.css';
|
||||
|
||||
export default class SongInfo extends Component {
|
||||
|
||||
constructor(params) {
|
||||
@ -62,19 +64,19 @@ export default class SongInfo extends Component {
|
||||
// what in the fuck is this?? LMFAO
|
||||
const songTimerPercentage = ((this.props.data.currentSongTime / 1000) / (data.length / 1000)) * 100000;
|
||||
|
||||
return <div className={'song-info-container'}>
|
||||
return <div className={styles.songInfoContainer}>
|
||||
<img src={songArt}/>
|
||||
<div className={'song-info'}>
|
||||
<p className={'song-info-song-name'}>{songName}</p>
|
||||
<p className={'song-info-song-author'}>{songAuthorName}</p>
|
||||
<div className={'song-info-song-other-container'}>
|
||||
<p className={'song-info-diff'} style={{ backgroundColor: this.state.diffColor }}>{difficulty}</p>
|
||||
<p className={'song-info-bsr'}>!bsr {bsr}</p>
|
||||
<div className={styles.songInfo}>
|
||||
<p className={styles.songInfoSongName}>{songName}</p>
|
||||
<p className={styles.songInfoSongAuthor}>{songAuthorName}</p>
|
||||
<div className={styles.songInfoSongOtherContainer}>
|
||||
<p className={styles.songInfoDiff} style={{ backgroundColor: this.state.diffColor }}>{difficulty}</p>
|
||||
<p className={styles.songInfoBsr}>!bsr {bsr}</p>
|
||||
</div>
|
||||
<p className={'song-time-text'}>{this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/{this.msToMinSeconds(data.length)}</p>
|
||||
<div className={'song-time-container'}>
|
||||
<div className={'song-time-background'}/>
|
||||
<div className={'song-time'} style={{ width: songTimerPercentage + '%' }}/>
|
||||
<p className={styles.songTimeText}>{this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/{this.msToMinSeconds(data.length)}</p>
|
||||
<div className={styles.songTimeContainer}>
|
||||
<div className={styles.songTimeBackground}/>
|
||||
<div className={styles.songTime} style={{ width: songTimerPercentage + '%' }}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
3
styles/avatar.module.css
Normal file
3
styles/avatar.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.playerAvatar {
|
||||
border-radius: 5%;
|
||||
}
|
||||
@ -1,196 +0,0 @@
|
||||
* {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
color: white !important;
|
||||
font-size: xx-large;
|
||||
line-height: 1.4em !important;
|
||||
}
|
||||
|
||||
/* Needed to see the UI in the browser,
|
||||
* when using OBS it overrides the background color anyway
|
||||
*/
|
||||
body, html {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 35px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info a {
|
||||
font-size: large;
|
||||
text-decoration: none;
|
||||
color: #7299d4;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
color: #4b72d3 !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.invalid-player p {
|
||||
font-size: large !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.invalid-player b {
|
||||
font-size: large !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.player-stats-container {
|
||||
display: flex;
|
||||
margin-left: -5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.player-country {
|
||||
display: flex;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.player-country span {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.player-country p {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.player-country-icon {
|
||||
margin-top: 7px;
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
.player-avatar {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.player-stats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.score-stats {
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.score-stats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.score-stats-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.score-stats-average-cut {
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.score-stats-hands {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.score-stats-hands div {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.score-stats-info {
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.song-info-container {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: large !important;
|
||||
}
|
||||
|
||||
.song-info-container img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.song-info {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.song-info p {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.song-info-song-name {
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.song-info-song-author {
|
||||
font-size: large;
|
||||
margin-top: -5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.song-info-song-other-container {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.song-info-diff {
|
||||
font-size: large;
|
||||
padding: 0px 4px;
|
||||
width: fit-content;
|
||||
border-radius: 5%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.song-info-bsr {
|
||||
font-size: large;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.song-time-container {
|
||||
width: 200px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.song-time-background {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.song-time {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 2;
|
||||
padding: 3px;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.song-time-text {
|
||||
margin-top: 6px;
|
||||
font-size: large;
|
||||
}
|
||||
3
styles/main.module.css
Normal file
3
styles/main.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.main {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
}
|
||||
189
styles/overlay.module.css
Normal file
189
styles/overlay.module.css
Normal file
@ -0,0 +1,189 @@
|
||||
.main {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
color: white !important;
|
||||
font-size: xx-large;
|
||||
line-height: 1.4em !important;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 35px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info a {
|
||||
font-size: large;
|
||||
text-decoration: none;
|
||||
color: #7299d4;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
color: #4b72d3 !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.invalid-player p {
|
||||
font-size: large !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.invalid-player b {
|
||||
font-size: large !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.player-stats-container {
|
||||
display: flex;
|
||||
margin-left: -5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.player-country {
|
||||
display: flex;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.player-country span {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.player-country p {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.player-country-icon {
|
||||
margin-top: 7px;
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
.player-avatar {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.player-stats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.score-stats {
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.score-stats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.score-stats-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.score-stats-average-cut {
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.score-stats-hands {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.score-stats-hands div {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.score-stats-info {
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.song-info-container {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: large !important;
|
||||
}
|
||||
|
||||
.song-info-container img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.song-info {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.song-info p {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.song-info-song-name {
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.song-info-song-author {
|
||||
font-size: large;
|
||||
margin-top: -5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.song-info-song-other-container {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.song-info-diff {
|
||||
font-size: large;
|
||||
padding: 0px 4px;
|
||||
width: fit-content;
|
||||
border-radius: 5%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.song-info-bsr {
|
||||
font-size: large;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.song-time-container {
|
||||
width: 200px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.song-time-background {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.song-time {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 2;
|
||||
padding: 3px;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.song-time-text {
|
||||
margin-top: 6px;
|
||||
font-size: large;
|
||||
}
|
||||
41
styles/playerStats.module.css
Normal file
41
styles/playerStats.module.css
Normal file
@ -0,0 +1,41 @@
|
||||
.playerStatsContainer {
|
||||
display: flex;
|
||||
margin-left: -5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.playerStatsContainer p {
|
||||
font-size: xx-large;
|
||||
line-height: 1.4em !important;
|
||||
}
|
||||
|
||||
.playerCountry {
|
||||
display: flex;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.playerCountry span {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.playerCountry p {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.playerCountryIcon {
|
||||
margin-top: 7px;
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
.playerAvatar {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.playerStats {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.playerStats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
33
styles/scoreStats.module.css
Normal file
33
styles/scoreStats.module.css
Normal file
@ -0,0 +1,33 @@
|
||||
.scoreStats {
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.scoreStats p {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.scoreStatsRight {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.scoreStatsAverageCut {
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.scoreStatsHands {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.scoreStatsHands div {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.scoreStatsInfo {
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
77
styles/songInfo.module.css
Normal file
77
styles/songInfo.module.css
Normal file
@ -0,0 +1,77 @@
|
||||
.songInfoContainer {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: large !important;
|
||||
}
|
||||
|
||||
.songInfoContainer img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.songInfo {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.songInfo p {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.songInfoSongName {
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.songInfoSongAuthor {
|
||||
font-size: large;
|
||||
margin-top: -5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.songInfoSongOtherContainer {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.songInfoDiff {
|
||||
font-size: large;
|
||||
padding: 0px 4px;
|
||||
width: fit-content;
|
||||
border-radius: 5%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.songInfoBsr {
|
||||
font-size: large;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.songTimeContainer {
|
||||
width: 200px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.songTimeBackground {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.songTime {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 2;
|
||||
padding: 3px;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.songTimeText {
|
||||
margin-top: 6px;
|
||||
font-size: large;
|
||||
}
|
||||
Reference in New Issue
Block a user