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: 210px;
Expected RBRACE at line 8, col 5.
    --w-teamlogo: 40px;
Expected RBRACE at line 9, col 5.
    --w-score: 55px;
Expected RBRACE at line 10, col 5.
    --w-div: 7px;
    /* 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%);
}
 
/* 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;
}
div {
    display: grid;
}
 
/* Transitions */
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.teamName, .scoreboard > div.teamColor, .scoreboard > div.teamLogo {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1.0) 1s;
    transition-delay: 1s;
    transform: scaleX(1);
    z-index: 0;
}
Adjoining classes: .scoreboard.disabled > div.teamColor
Adjoining classes: .scoreboard.disabled > div.teamLogo
Adjoining classes: .scoreboard.disabled > div.teamName
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.teamName, .scoreboard.disabled > div.teamColor, .scoreboard.disabled > div.teamColor, .scoreboard.disabled > div.teamLogo {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1.0) 1s;
    transform: scaleX(0);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.teamScore {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1.0) 1.5s;
    transform: scaleX(1) skew(-30deg);
    z-index: 1;
}
Adjoining classes: .scoreboard.disabled > div.teamScore
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.teamScore {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1.0) 1s;
    transform: scaleX(0) skew(-30deg);
}
Don't use IDs in selectors.
Element (div.teamName#away) is overqualified, just use #away without element name.
.scoreboard > div.teamName#away {
    transform-origin: right;
}
Don't use IDs in selectors.
Element (div.teamName#home) is overqualified, just use #home without element name.
.scoreboard > div.teamName#home {
    transform-origin: left;
}
Don't use IDs in selectors.
Element (div.teamLogo#away) is overqualified, just use #away without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.teamLogo#away {
    transform-origin: calc(270px - 7px); /* do not question why we use these numbers */
    margin-right: -300px;
    z-index: -1;
}
Don't use IDs in selectors.
Element (div.teamLogo#home) is overqualified, just use #home without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.teamLogo#home {
    transform-origin: 70px; /* same deal here */
    margin-left: -300px;
    z-index: -1;
}
Don't use IDs in selectors.
Element (div.teamLogo#home) is overqualified, just use #home without element name.
.scoreboard > div.teamLogo#home > img {
    margin-left: auto;
}
Don't use IDs in selectors.
Element (div.teamColor#away) is overqualified, just use #away without element name.
.scoreboard > div.teamColor#away {
    transform-origin: 270px;
}
Don't use IDs in selectors.
Element (div.teamColor#home) is overqualified, just use #home without element name.
.scoreboard > div.teamColor#home {
    transform-origin: -270px;
}
2 IDs in the selector, really?
Element (div.teamScore#away) is overqualified, just use #away without element name.
.scoreboard#postgame > div.teamScore#away {
    transform: skew(-30deg);
    transform-origin: left;
}
2 IDs in the selector, really?
Element (div.teamScore#away) is overqualified, just use #away without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamScore#away
.scoreboard.disabled#postgame > div.teamScore#away {
    transform: translateX(-350px) skew(-30deg);
}
2 IDs in the selector, really?
Element (div.teamScore#home) is overqualified, just use #home without element name.
.scoreboard#postgame > div.teamScore#home {
    transform: skew(-30deg);
    transform-origin: right;
}
2 IDs in the selector, really?
Element (div.teamScore#home) is overqualified, just use #home without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamScore#home
.scoreboard.disabled#postgame > div.teamScore#home {
    transform: translateX(350px) skew(-30deg);
}
2 IDs in the selector, really?
Element (div.teamName#away) is overqualified, just use #away without element name.
.scoreboard#postgame > div.teamName#away {
    transform: none;
    transform-origin: left;
}
2 IDs in the selector, really?
Element (div.teamLogo#away) is overqualified, just use #away without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard#postgame > div.teamLogo#away {
    transform: none;
    transform-origin: left;
    margin-right: 0;
}
2 IDs in the selector, really?
Element (div.teamLogo#away) is overqualified, just use #away without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamLogo#away
.scoreboard.disabled#postgame > div.teamLogo#away {
    transform: translateX(-350px);
}
 
2 IDs in the selector, really?
Element (div.teamName#away) is overqualified, just use #away without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamName#away
.scoreboard.disabled#postgame > div.teamName#away {
    transform: translateX(-350px);
}
2 IDs in the selector, really?
Element (div.teamName#home) is overqualified, just use #home without element name.
.scoreboard#postgame > div.teamName#home {
    transform: none;
    transform-origin: right;
}
2 IDs in the selector, really?
Element (div.teamName#home) is overqualified, just use #home without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamName#home
.scoreboard.disabled#postgame > div.teamName#home {
    transform: translateX(350px);
}
2 IDs in the selector, really?
Element (div.teamLogo#home) is overqualified, just use #home without element name.
Rule doesn't have all its properties in alphabetical order.
.scoreboard#postgame > div.teamLogo#home {
    transform: none;
    transform-origin: right;
    margin-left: 0;
}
2 IDs in the selector, really?
Element (div.teamLogo#home) is overqualified, just use #home without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamLogo#home
.scoreboard.disabled#postgame > div.teamLogo#home {
    transform: translateX(350px);
}
2 IDs in the selector, really?
Element (div.teamColor#away) is overqualified, just use #away without element name.
.scoreboard#postgame > div.teamColor#away {
    transform: none;
    transform-origin: left;
}
2 IDs in the selector, really?
Element (div.teamColor#away) is overqualified, just use #away without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamColor#away
.scoreboard.disabled#postgame > div.teamColor#away {
    transform: translateX(-350px);
}
2 IDs in the selector, really?
Element (div.teamColor#home) is overqualified, just use #home without element name.
.scoreboard#postgame > div.teamColor#home {
    transform: none;
    transform-origin: right;
}
2 IDs in the selector, really?
Element (div.teamColor#home) is overqualified, just use #home without element name.
Adjoining classes: .scoreboard.disabled#postgame > div.teamColor#home
.scoreboard.disabled#postgame > div.teamColor#home {
    transform: translateX(350px);
}
Rule doesn't have all its properties in alphabetical order.
.scoreboard > div.vs {
    transition: cubic-bezier(0.18, 0.89, 0.33, 1) 1s;
    transform-origin: center;
    z-index: 2;
}
Adjoining classes: .scoreboard.disabled > div.vs
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.vs {
    transition: cubic-bezier(0.67, 0, 0.82, 0.11) 1s;
    transform: translateY(120px) skew(-30deg);
    transition-delay: 0.75s;
}
.scoreboard > div.div {
    transition: cubic-bezier(0.18, 0.89, 0.33,1) 1s;
    z-index: 2;
}
Adjoining classes: .scoreboard.disabled > div.div
Rule doesn't have all its properties in alphabetical order.
.scoreboard.disabled > div.div{
    transition: cubic-bezier(0.18, 0.89, 0.33,1) 1s;
    transform: translateY(80px) skew(-30deg);
}
 
/* Scoreboard & defaults */
.scoreboard {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    grid-auto-flow: column;
    grid-template-rows: var(--h-row);
}
Don't use IDs in selectors.
.scoreboard#pregame {
    grid-template-columns: var(--w-teamcolor) var(--w-teamlogo) var(--w-teamname) calc((var(--w-score) * 2) + var(--w-div)) var(--w-teamname) var(--w-teamlogo) var(--w-teamcolor);
}
Don't use IDs in selectors.
.scoreboard#postgame {
    grid-template-columns: var(--w-teamcolor) var(--w-teamlogo) var(--w-teamname) var(--w-score) var(--w-div) var(--w-score) var(--w-teamname) var(--w-teamlogo) var(--w-teamcolor);
}
.scoreboard > div {
    align-items: center;
}
.scoreboard > div:not(.teamName) {
    text-align: center;
}
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;
}
 
/* Score and team divider */
.teamScore, .vs, .div {
    transform: skew(-30deg);
}
.teamScore > span, .vs > span, .div > span {
    transform: skew(30deg);
}
Rule doesn't have all its properties in alphabetical order.
.vs, .div {
    color: white;
    background: black;
}
 
/* Team color */
.teamColor {
    width: 100%;
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamColor#away {
    border-radius: 7px 0 0 7px;
    background: var(--g-away);
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamColor#home {
    border-radius: 0 7px 7px 0;
    background: var(--g-home);
}
 
/* Team logo */
.teamLogo {
    background: var(--g-def);
}
Rule doesn't have all its properties in alphabetical order.
.teamLogo > img {
    width: calc(var(--w-teamlogo) * 0.8);
    height: calc(var(--w-teamlogo) * 0.8);
    object-fit: contain;
}
Don't use IDs in selectors.
.teamLogo#away > img {
    padding-left: calc(var(--w-teamlogo) * 0.2);
}
Don't use IDs in selectors.
.teamLogo#home > img {
    padding-right: calc(var(--w-teamlogo) * 0.2);
}
 
/* Team name */
.teamName {
    background: var(--g-def);
    padding-right: 10px;
}
Don't use IDs in selectors.
Rule doesn't have all its properties in alphabetical order.
.teamName#home {
    margin-left: -20px;
Expected (flex-start | flex-end | center | space-between | space-around) but found 'end'.
    justify-content: end;
    padding-right: 8px;
}
Don't use IDs in selectors.
.teamName#away {
    margin-right: -20px;
    padding-left: 8px;
}
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 score */
Don't use IDs in selectors.
.teamScore#away {
    background: var(--g-away);
Expected () but found 'var(--c-score-away)'.
    color: var(--c-score-away);
}
Don't use IDs in selectors.
.teamScore#home {
    background: var(--g-home);
Expected () but found 'var(--c-score-home)'.
    color: var(--c-score-home);
}