FC-softwares/baseball-scoreboard

@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-inning: 50px;
Expected RBRACE at line 10, col 5.
    --w-score: 100px;
    /* Scoreboard row height */
Expected RBRACE at line 12, col 5.
    --h-row: 40px;
    /* Scoreboard team colors */
Expected RBRACE at line 14, col 5.
    --c-home: #000000;
Expected RBRACE at line 15, col 5.
    --c-away: #000000;
Expected RBRACE at line 16, col 5.
    --c-score-home: #000000;
Expected RBRACE at line 17, col 5.
    --c-score-away: #000000;
    /* Gradients (please don't edit them) */
Expected RBRACE at line 19, 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 20, 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 21, col 5.
    --g-def: linear-gradient(0deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
    /* Misc */
Expected RBRACE at line 23, col 5.
    --c-disabled: rgb(247, 247, 247);
Expected RBRACE at line 24, col 5.
    --i-inning: 0;
}
 
/* 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;
}
Rule doesn't have all its properties in alphabetical order.
div {
    display: grid;
    align-items: center;
}
 
/* Transitions */
Rule doesn't have all its properties in alphabetical order.
.scoreboard > .teamColor, .scoreboard > .teamName, .scoreboard > .teamLogo {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1.5s;
    transform: none;
}
Adjoining classes: .scoreboard.disabled > .teamColor
Adjoining classes: .scoreboard.disabled > .teamName
Adjoining classes: .scoreboard.disabled > .teamLogo
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > .teamColor, .scoreboard.disabled > .teamName, .scoreboard.disabled > .teamLogo {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 2s;
    transform: translateX(-1000px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > .score {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1.5s;
    transition-delay: calc(var(--i-inning) * 0.1s + 0.4s);
    transform: none;
}
Adjoining classes: .scoreboard.disabled > .score
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > .score {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1.5s;
    transition-delay: calc(var(--i-inning) * 0.1s + 0.1s);
    transform: translateX(1000px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > .container > .inning {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 2s;
    transform: none;
}
/* Set the delay to the number of previous innings es: first inning = 0.2s, second inning = 0.3s, third inning = 0.4s, etc. */
/* Without SCSS this is the only way to do it (sorry @TheTecnoKing) */
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(1)
.scoreboard > .container > .inning:nth-child(1), .scoreboard.disabled > .container > .inning:nth-child(1) {
    transition-delay: 0.2s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(2)
.scoreboard > .container > .inning:nth-child(2), .scoreboard.disabled > .container > .inning:nth-child(2) {
    transition-delay: 0.3s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(3)
.scoreboard > .container > .inning:nth-child(3), .scoreboard.disabled > .container > .inning:nth-child(3) {
    transition-delay: 0.4s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(4)
.scoreboard > .container > .inning:nth-child(4), .scoreboard.disabled > .container > .inning:nth-child(4) {
    transition-delay: 0.5s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(5)
.scoreboard > .container > .inning:nth-child(5), .scoreboard.disabled > .container > .inning:nth-child(5) {
    transition-delay: 0.6s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(6)
.scoreboard > .container > .inning:nth-child(6), .scoreboard.disabled > .container > .inning:nth-child(6) {
    transition-delay: 0.7s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(7)
.scoreboard > .container > .inning:nth-child(7), .scoreboard.disabled > .container > .inning:nth-child(7) {
    transition-delay: 0.8s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(8)
.scoreboard > .container > .inning:nth-child(8), .scoreboard.disabled > .container > .inning:nth-child(8) {
    transition-delay: 0.9s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(9)
.scoreboard > .container > .inning:nth-child(9), .scoreboard.disabled > .container > .inning:nth-child(9) {
    transition-delay: 1s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(10)
.scoreboard > .container > .inning:nth-child(10), .scoreboard.disabled > .container > .inning:nth-child(10) {
    transition-delay: 1.1s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(11)
.scoreboard > .container > .inning:nth-child(11), .scoreboard.disabled > .container > .inning:nth-child(11) {
    transition-delay: 1.2s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(12)
.scoreboard > .container > .inning:nth-child(12), .scoreboard.disabled > .container > .inning:nth-child(12) {
    transition-delay: 1.3s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(13)
.scoreboard > .container > .inning:nth-child(13), .scoreboard.disabled > .container > .inning:nth-child(13) {
    transition-delay: 1.4s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(14)
.scoreboard > .container > .inning:nth-child(14), .scoreboard.disabled > .container > .inning:nth-child(14) {
    transition-delay: 1.5s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(15)
.scoreboard > .container > .inning:nth-child(15), .scoreboard.disabled > .container > .inning:nth-child(15) {
    transition-delay: 1.6s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(16)
.scoreboard > .container > .inning:nth-child(16), .scoreboard.disabled > .container > .inning:nth-child(16) {
    transition-delay: 1.7s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(17)
.scoreboard > .container > .inning:nth-child(17), .scoreboard.disabled > .container > .inning:nth-child(17) {
    transition-delay: 1.8s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(18)
.scoreboard > .container > .inning:nth-child(18), .scoreboard.disabled > .container > .inning:nth-child(18) {
    transition-delay: 1.9s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning:nth-child(19)
.scoreboard > .container > .inning:nth-child(19), .scoreboard.disabled > .container > .inning:nth-child(19) {
    transition-delay: 2s;
}
Adjoining classes: .scoreboard.disabled > .container > .inning
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > .container > .inning {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1.5s;
    transform: translateY(1000px);
}
 
/* 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(3, var(--h-row));
    grid-template-columns: var(--w-teamcolor) var(--w-teamlogo) var(--w-teamname) auto var(--w-score);
    grid-auto-flow: column;
    grid-template-areas:
        "empty empty empty container score"
        "colorAway logoAway nameAway container score"
        "colorHome logoHome nameHome container score";
}
Unexpected token ')' at line 141, col 31.
Unexpected token '{' at line 141, col 33.
Expected LBRACE at line 141, col 31.
div:not(.teamName, .scoreboard) {
Expected a `FUNCTION` or `IDENT` after colon at line 142, col 15.
    text-align: center;
}
.container {
    grid-area: container;
    grid-template-columns: repeat(var(--i-inning), var(--w-inning));
}
.inning {
    grid-template-rows: repeat(3, var(--h-row));
}
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 */
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 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 name */
.teamName {
    padding-left: 8px;
    padding-right: 10px;
}
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;
}
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;
}
.teamName, .inning > .number, .score > .inning > .total, .teamLogo {
    background: var(--g-def);
}
 
.disabledinng {
Expected () but found 'var(--c-disabled)'.
    color: var(--c-disabled);
}
Don't use IDs in selectors.
The universal selector (*) is known to be slow.
.scoreboard#inning > *, .inning > *, .score > * {
    height: 100%;
}
 
The universal selector (*) is known to be slow.
Rule doesn't have all its properties in alphabetical order.
.inning > *, .score > * {
    display: grid;
    align-items: center;
}
div.score {
    border-radius: 0 7px 7px 0;
    grid-area: score;
}
.score > .total {
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255,255,255,0.4) 100%), rgb(0, 0, 0);
    color: white;
}
Don't use IDs in selectors.
.score > .score#away {
    background: var(--g-away);
Expected () but found 'var(--c-score-away)'.
    color: var(--c-score-away);
}
Don't use IDs in selectors.
.score > .score#home {
    background: var(--g-home);
Expected () but found 'var(--c-score-home)'.
    color: var(--c-score-home);
}
.total {
    border-radius: 0 7px 0 0;
}
Don't use IDs in selectors.
Element (span.score#home) is overqualified, just use #home without element name.
.score > span.score#home {
    border-radius: 0 0 7px;
}
Don't use IDs in selectors.
.inning#i1 > span.number {
    border-radius: 7px 0 0;
}
span.score {
    background: var(--c-disabled);
}
Don't use IDs in selectors.
#iex {
    grid-template-columns: var(--w-inning);
}