app/css/scoreboard.css from FC-softwares/baseball-scoreboard

app/css/scoreboard.css
Summary

Maintainability

Test Coverage

Issues
@import prevents parallel downloads, use  instead.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
 
/* Global variables */
Rule is empty.
:root {
    /* Scoreboard widths */
Expected RBRACE at line 6, col 5.
    --w-teamcolor: 7px;
Expected RBRACE at line 7, col 5.
    --w-teamname: 110px;
Expected RBRACE at line 8, col 5.
    --w-teamlogo: 40px;
Expected RBRACE at line 9, col 5.
    --w-score: 50px;
Expected RBRACE at line 10, col 5.
    --w-bases: 80px;
Expected RBRACE at line 11, col 5.
    --w-bs-out: 90px;
Expected RBRACE at line 12, col 5.
    --w-inning: 50px;
    /* Scoreboard row height */
Expected RBRACE at line 14, col 5.
    --h-row: 40px;
    /* Scoreboard team colors */
Expected RBRACE at line 16, col 5.
    --c-home: #000000;
Expected RBRACE at line 17, col 5.
    --c-away: #000000;
Expected RBRACE at line 18, col 5.
    --c-score-home: #000000;
Expected RBRACE at line 19, col 5.
    --c-score-away: #000000;
    /* Gradients (please don't edit them) */
Expected RBRACE at line 21, col 5.
    --g-home: linear-gradient(0deg, var(--c-home) 0%, rgba(255,255,255,0.4) 100%), var(--c-home);
Expected RBRACE at line 22, col 5.
    --g-away: linear-gradient(0deg, var(--c-away) 0%, rgba(255,255,255,0.4) 100%), var(--c-away);
Expected RBRACE at line 23, col 5.
    --g-def: linear-gradient(0deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
    /* Misc */
Expected RBRACE at line 25, col 5.
    --c-disabled: rgb(214, 214, 214);
    /* Code to be reviewed by @TheTecnoKing*/
Expected RBRACE at line 27, col 5.
    --w-scale: 1920px;
Expected RBRACE at line 28, col 5.
    --h-scale: 1080px;
}
 
/* Standards */
Rule doesn't have all its properties in alphabetical order.
html {
    width: min-content;
    background-color: transparent;
}
Rule doesn't have all its properties in alphabetical order.
body {
    margin: 0;
    width: fit-content;
    overflow: hidden;
    /* Code to be reviewed by @TheTecnoKing
    width: var(--w-scale);
    height: var(--h-scale);
    */
}
div {
    display: grid;
}
 
/* Transitions */
Don't use IDs in selectors.
Element (div#away) is overqualified, just use #away without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div#away{
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transform: none;
}
Don't use IDs in selectors.
Element (div#away) is overqualified, just use #away without element name.
Adjoining classes: .scoreboard.disabled > div#away
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div#away{
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transform: translateX(-750px);
}
Don't use IDs in selectors.
Element (div#home) is overqualified, just use #home without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div#home{
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transition-delay: 0.1s;
    transform: none;
}
Don't use IDs in selectors.
Element (div#home) is overqualified, just use #home without element name.
Adjoining classes: .scoreboard.disabled > div#home
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div#home{
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transition-delay: 0.1s;
    transform: translateX(-750px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.bases {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transition-delay: 0.2s;
    transform: none;
}
Adjoining classes: .scoreboard.disabled > div.bases
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.bases {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transition-delay: 0.2s;
    transform: translateY(750px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.ballStrike {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transition-delay: 0.3s;
    transform: none;
}
Adjoining classes: .scoreboard.disabled > div.ballStrike
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.ballStrike {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transition-delay: 0.4s;
    transform: translateY(750px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.out {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transition-delay: 0.4s;
    transform: none;
}
Adjoining classes: .scoreboard.disabled > div.out
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.out {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transition-delay: 0.3s;
    transform: translateY(750px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.inning {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transition-delay: 0.5s;
    transform: none;
}
Adjoining classes: .scoreboard.disabled > div.inning
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.inning {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transition-delay: 0.5s;
    transform: translateY(750px);
}
 
/* Scoreboard & defaults */
Rule doesn't have all its properties in alphabetical order.
.scoreboard {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    grid-template-rows: repeat(2, var(--h-row));
    grid-template-columns: var(--w-teamcolor) var(--w-teamlogo) var(--w-teamname) var(--w-score) var(--w-bases) var(--w-bs-out) var(--w-inning);
    grid-template-areas:
        "colorAway logoAway nameAway scoreAway bases ballStrike inning"
        "colorHome logoHome nameHome scoreHome bases out inning";
}
.scoreboard > div {
    align-items: center;
}
.scoreboard > div:not(.teamName) {
    text-align: center;
}
.bases, .teamName, .ballStrike, .out, .inning, .teamLogo {
    background: var(--g-def);
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
#bg {
    border-radius: 3px;
    width: fit-content;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    display: flex;
    align-items: center;
}
Don't use IDs in selectors.
#bg.bg-dark {
    background: #414141;
}
 
/* Team color */
.teamColor {
    width: 100%;
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamColor#away {
    grid-area: colorAway;
    border-radius: 7px 0 0;
    background: var(--g-away)
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamColor#home {
    grid-area: colorHome;
    border-radius: 0 0 0 7px;
    background: var(--g-home)
}
 
/* Team name */
.teamName {
    padding-left: 8px;
    padding-right: 10px;
}
Don't use IDs in selectors.
.teamName#away {grid-area: nameAway;}
Don't use IDs in selectors.
.teamName#home {grid-area: nameHome;}
2 IDs in the selector, really?
Rule doesn't have all its properties in alphabetical order.
.teamName#home > #bg > span {
    background: var(--g-home);
    color: transparent;
    -webkit-background-clip: text;
Expected (#) but found 'text'.
    background-clip: text;
    text-transform: uppercase;
}
2 IDs in the selector, really?
Rule doesn't have all its properties in alphabetical order.
.teamName#away > #bg > span {
    background: var(--g-away);
    color: transparent;
    -webkit-background-clip: text;
Expected (#) but found 'text'.
    background-clip: text;
    text-transform: uppercase;
}
 
/* Team logo */
Don't use IDs in selectors.
.teamLogo#away {grid-area: logoAway;}
Don't use IDs in selectors.
.teamLogo#home {grid-area: logoHome;}
Rule doesn't have all its properties in alphabetical order.
.teamLogo > img {
    padding-left: calc(var(--w-teamlogo) * 0.2);
    width: calc(var(--w-teamlogo) * 0.8);
    height: calc(var(--w-teamlogo) * 0.8);
    object-fit: contain;
}
 
/* Team score */
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamScore#away {
    grid-area: scoreAway;
    background: var(--g-away);
Expected () but found 'var(--c-score-away)'.
    color: var(--c-score-away);
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamScore#home {
    grid-area: scoreHome;
    background: var(--g-home);
Expected () but found 'var(--c-score-home)'.
    color: var(--c-score-home);
}
 
/* Bases */
.bases {
    grid-area: bases;
    padding: 17px;
}
Rule doesn't have all its properties in alphabetical order.
.bases > .container {
    width: 100%;
    height: 100%;
Unexpected token '1fr' at line 210, col 25.
    grid-template-rows: 1fr 1fr;
Unexpected token '1fr' at line 211, col 28.
    grid-template-columns: 1fr 1fr;
Unknown property 'gap'.
    gap: 5px;
    transform: rotate(45deg);
}
Rule doesn't have all its properties in alphabetical order.
.container > div {
    border: 2px solid rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
}
.container > .disabled {
Expected () but found 'var(--c-disabled)'.
    background-color: var(--c-disabled);
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.container > #home {
    transform: translateX(3px) translateY(3px);
    width: 80%;
    height: 80%;
Using width with border can sometimes make elements larger than you expect.
Using height with border can sometimes make elements larger than you expect.
    border: 0 solid black;
    border-top-left-radius: 50px;
Expected () but found 'var(--c-disabled)'.
    background-color:var(--c-disabled);
}
 
/* Ball - Strike */
Rule doesn't have all its properties in alphabetical order.
.ballStrike {
    grid-area: ballStrike;
    justify-content: center;
    grid-auto-flow: column;
Unknown property 'gap'.
    gap: 4px;
}
Don't use IDs in selectors.
.ballStrike > #div {
    font-size: 20px;
}
 
/* Out */
.out {grid-area: out;}
Don't use IDs in selectors.
.out > #number::after {
    content: " OUT";
    font-size: 20px;
}
 
/* Inning */
Rule doesn't have all its properties in alphabetical order.
.inning {
    grid-area: inning;
    border-radius: 0 7px 7px 0;
}
.inning > span:not(#number) {
    font-size: 20px;
}
Don't use IDs in selectors.
.inning > #number {
    margin: -15px;
}
.inning > .disabled {
Expected () but found 'var(--c-disabled)'.
    color: var(--c-disabled);
}