Files
benchcoach/src/public/css/eventsheet.css

803 lines
16 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Pacifico");
@import url("https://fonts.googleapis.com/css2?family=Oswald");
@import url("https://fonts.googleapis.com/css2?family=Graduate");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900&display=swap");
@import url("/font/helvetica-now/stylesheet.css");
@font-face {
font-family: "Futura Now";
src: url("/font/futura-now/futura-now.ttf") format("truetype");
font-weight: 125 900;
font-stretch: 50% 150%;
}
@page {
margin: 0;
}
/** For Print **/
@media print {
body {
margin: 0;
}
body .sheet {
size: B5;
padding: 0.175in;
}
}
/** For screen preview **/
@media screen {
body .sheet {
padding: 0.175in;
}
body {
background: #e0e0e0;
}
.sheet {
background: white;
box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
}
}
.sheet {
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
}
/** Paper sizes **/
body.B5 .sheet {
width: 176mm;
height: 250mm;
}
body.index-card .sheet {
width: 3.5in;
height: 5in;
}
:root {
--color-success: #b7e1cd;
--color-danger: #f4c7c3;
--color-neutral: #acc9fe;
--color-warning: rgb(249, 228, 180);
--color-grey-100: #f8f9fa;
--color-grey-200: #e9ecef;
--color-grey-300: #dee2e6;
--color-grey-400: #ced4da;
--color-grey-500: #adb5bd;
--color-grey-600: #6c757d;
--color-grey-700: #495057;
--color-grey-800: #343a40;
--color-grey-900: #212529;
--row-height: 14px;
--monospace-font: "Inconsolata", monospace;
}
body {
font-family: "Helvetica Now", "Helvetica", sans-serif;
position: relative;
font-size: 11px;
}
table {
position: inherit;
font-size: inherit;
border-collapse: collapse;
empty-cells: show;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
border: 0.5px solid black;
display: inline-table;
}
table tr {
border-bottom-width: 0.5px;
border-color: grey;
border-bottom-style: solid;
}
table tr:nth-child(odd) {
background-color: rgba(242, 242, 242, 0.85);
}
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.85);
}
table tr th {
font-stretch: extra-condensed;
width: 1em;
text-align: center;
text-transform: uppercase;
}
table tr td.player-name {
text-transform: uppercase;
font-stretch: 75%;
}
table tr td.position, table tr td.jersey-number {
font-family: var(--monospace-font);
width: 2ch;
text-align: right;
overflow: hidden;
}
table tr th, table tr td {
border-left: 0.5px solid grey;
border-right: 0.5px solid grey;
overflow: hidden;
padding: 0 2px 0 2px;
}
table tr th:empty::after, table tr td:empty::after {
content: " ";
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.B5 > .eventsheet {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 0.35in;
row-gap: 0.35in;
background-size: 100%;
}
.eventsheet > section {
box-sizing: content-box;
overflow: hidden;
/* outline: 0.5px dashed lightgrey; */
display: flex;
flex-direction: column;
align-items: stretch;
}
.eventsheet > section > div {
display: flex;
flex: 1;
align-items: stretch;
height: auto;
}
.lineup-card th {
width: inherit;
}
#lineup-card-dugout div.grid-container,
#lineup-card-dugout-blank div.grid-container {
display: grid;
grid-template-columns: 60% auto;
grid-template-rows: fit-content(16px) auto;
grid-template-areas: "header header" "sarting-lineup-table substitution-table";
}
#lineup-card-exchange div.grid-container,
#lineup-card-exchange-blank div.grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: fit-content(16px) auto;
grid-template-areas: "header" "sarting-lineup-table";
}
#lineup-card-exchange .substitution,
#lineup-card-exchange .homeaway,
#lineup-card-exchange-blank .substitution,
#lineup-card-exchange-blank .homeaway {
display: none;
}
.lineup-card div.grid-container > header {
grid-area: "header";
font-size: 14px;
font-weight: bold;
}
.lineup-card div.grid-container > header:empty::after {
content: " ";
}
div.grid-container > .starting-lineup-table {
grid-area: "starting-lineup-table";
}
div.grid-container > .substitution-table {
grid-area: "substitution-table";
}
section.lineup-card {
counter-reset: lineup-sequence-counter 0;
}
section.lineup-card thead th {
color: var(--color-grey-600);
font-size: 0.7em;
}
section.lineup-card th.sequence {
counter-increment: lineup-sequence-counter 1;
color: var(--color-grey-600);
font-size: inherit;
width: 2ch;
}
section.lineup-card th.sequence.counter::before {
content: counter(lineup-sequence-counter);
}
.lineup-card table {
font-size: 22px;
}
.lineup-card td {
/* height: 34px; */
}
.lineup-card td.substitution {
width: 8ch;
}
.lineup-card td.substitution::after {
content: "";
}
#lineup-card-exchange tr,
#lineup-card-exchange-blank tr,
#lineup-card-dugout .starting-lineup-table tr,
#lineup-card-dugout-blank .starting-lineup-table tr,
#lineup-card-dugout .substitution-table tr:nth-child(odd) {
border-top: 1px solid black;
}
#lineup-card-exchange tr,
#lineup-card-exchange-blank tr,
#lineup-card-dugout .starting-lineup-table tr,
#lineup-card-dugout-blank .starting-lineup-table tr,
#lineup-card-dugout .substitution-table tr:nth-child(even) {
border-bottom: 1px solid black;
}
td.substitution {
border-left: 1px solid black;
}
section.blank {
filter: opacity(0.4);
}
section.blank img, section.blank header {
filter: grayscale(1);
}
section.blank td.substitution {
border-width: 0.5;
}
#lineup-card-exchange td.player-name {
font-stretch: 100%;
}
#lineup-card-dugout td.player-name {
width: 10ch;
}
.lineup-card .position,
.lineup-card .jersey-number {
width: 2ch;
}
#lineup-card-dugout .position,
#lineup-card-dugout .jersey-number {
font-stretch: 75%;
padding-left: 2.5px;
padding-right: 2.5px;
}
.lineup-card header {
font-size: inherit;
text-transform: uppercase;
font-stretch: 85%;
}
#todays-game > div {
display: grid;
grid-template-columns: 110px auto;
grid-template-rows: auto auto;
grid-template-areas: "offense defense" "footer footer";
}
#todays-game #offense-pane {
grid-area: offense;
}
#todays-game #defense-pane {
grid-area: defense;
}
#todays-game .footer {
/* height:var(--row-height); */
position: relative;
box-sizing: border-box;
grid-area: footer;
/* border: 1px solid black; */
height: 100%;
border-right: 0.5px solid grey;
border-left: 0.5px solid grey;
}
#todays-game .footer table {
height: 100%;
outline: none;
border-style: none;
}
#todays-game .footer table tr {
background-color: white;
outline: none;
border-bottom: 0.5px solid var(--color-grey-500);
}
#todays-game .footer table tr :last-child {
background-color: white;
outline: none;
border-bottom-style: none;
}
#todays-game .footer table th {
text-align: left;
color: var(--color-grey-600);
}
#todays-game .footer table td {
height: var(--row-height);
border: none;
}
#todays-game .footer table tdempty::after {
content: "";
}
#todays-game table.notes th {
border-left: none;
border-right: none;
line-height: 1em;
}
#todays-game table.notes td:empty::after {
content: "";
}
#defense-card #defense-pane {
width: 100%;
}
#defense-card .footer {
display: none;
}
#defense-card .slot-set table {
font-size: 14px;
width: 120px;
}
#defense-card .slot-set.pos-c {
grid-area: 6/1/7/5 !important;
}
#defense-card .slot-set.pos-p {
justify-content: center !important;
align-items: center;
margin-bottom: inherit !important;
grid-area: 5/1/6/5 !important;
}
#defense-card .slot-set.pos-p table {
width: 120px !important;
}
#defense-card .slot-set.pos-p table tbody > tr:last-child {
display: table-row;
}
#defense-pane {
position: relative;
grid-area: defense;
padding: 4px 4px 0px 4px; /* top right bottom left */
display: flex;
border: 0.5px solid grey;
}
#defense-pane .field-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 4px;
width: 100%;
z-index: 2;
}
#defense-pane img {
position: absolute;
z-index: -1;
}
#defense-pane .slot-set {
display: flex;
align-items: center;
}
#defense-pane .slot-set.pos-cf tr:first-child th.position:empty::after {
content: "cf";
}
#defense-pane .slot-set.pos-lf tr:first-child th.position:empty::after {
content: "lf";
}
#defense-pane .slot-set.pos-rf tr:first-child th.position:empty::after {
content: "rf";
}
#defense-pane .slot-set.pos-ss tr:first-child th.position:empty::after {
content: "ss";
}
#defense-pane .slot-set.pos-2b tr:first-child th.position:empty::after {
content: "2b";
}
#defense-pane .slot-set.pos-3b tr:first-child th.position:empty::after {
content: "3b";
}
#defense-pane .slot-set.pos-1b tr:first-child th.position:empty::after {
content: "1b";
}
#defense-pane .slot-set.pos-c tr:first-child th.position:empty::after {
content: "c";
}
#defense-pane .slot-set.pos-p tr:first-child th.position:empty::after {
content: "p";
}
#defense-pane .slot-set.pos-cf {
justify-content: center;
grid-area: 1/1/2/5;
}
#defense-pane .slot-set.pos-lf {
justify-content: flex-start;
grid-area: 2/1/3/3;
}
#defense-pane .slot-set.pos-rf {
justify-content: flex-end;
grid-area: 2/3/3/5;
}
#defense-pane .slot-set.pos-ss {
justify-content: flex-end;
grid-area: 3/1/4/3;
}
#defense-pane .slot-set.pos-2b {
justify-content: flex-start;
grid-area: 3/3/4/5;
}
#defense-pane .slot-set.pos-3b {
justify-content: flex-start;
grid-area: 4/1/5/3;
}
#defense-pane .slot-set.pos-1b {
justify-content: flex-end;
grid-area: 4/3/5/5;
}
#defense-pane .slot-set.pos-c {
justify-content: center;
grid-area: 5/1/6/5;
}
#defense-pane .slot-set.pos-p {
align-items: end;
margin-bottom: 4px;
grid-area: 6/1/7/5;
}
#defense-pane .slot-set.pos-p table {
width: 100%;
}
#defense-pane .slot-set.pos-p tr.substitute .position:empty::after {
content: "RP";
}
#offense-pane {
position: relative;
/* box-sizing: border-box; */
height: 100%;
border-bottom: 0.5px solid black;
counter-reset: lineup-sequence-counter 0;
/* outline: 0.5px solid black; */
}
#offense-pane table {
height: 100%;
border: none;
}
#offense-pane th.sequence {
counter-increment: lineup-sequence-counter 1;
}
#offense-pane th.sequence.counter::before {
content: counter(lineup-sequence-counter);
}
.slot-set table {
width: 77px;
}
.slot-set.pos-slot-p table {
width: 100%;
}
.index-card .defense-slot-set {
width: 65px;
}
.index-card .defense-slot-set .player-name {
font-stretch: 70%;
}
.container .row {
width: 100%;
display: flex;
align-items: center;
}
header {
background-color: #cadcf9;
font-family: "Oswald";
/* font-size: 8.8px; */
/* outline: 1px solid black; */
/* height: var(--row-height); */
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 0.5px solid black;
z-index: 1;
}
.cell-checkbox {
font-size: 0.75em;
}
.in-starting-lineup {
font-weight: bold;
}
.gametitle {
font-weight: bold;
text-transform: uppercase;
font-stretch: semi-condensed;
}
.homeaway {
text-transform: uppercase;
font-stretch: normal;
font-weight: bolder;
float: right;
text-transform: uppercase;
}
.cell-smalltext {
font-stretch: condensed;
font-size: 10px;
}
.statscell {
font-family: "m+1m";
text-align: center;
font-stretch: extra-condensed;
font-size: 9px;
width: 60px;
}
.condensedNameCell {
width: 70px;
text-transform: uppercase;
font-stretch: condensed;
}
.cell-square {
height: var(--row-height);
width: 14px;
text-align: center;
}
.cell-square.narrow {
width: 10px;
}
.cell-mono {
font-family: "m+1m";
}
.cell-condensed {
font-stretch: condensed;
}
.available-status-code-1 {
color: rgb(0, 85, 0);
background-color: #b7e1cd;
}
.available-status-code-0 {
color: rgb(170, 0, 0);
background-color: #f4c7c3;
}
.past.available-status-code-0,
.past.available-status-code-null {
color: var(--color-grey-600);
background-color: inherit;
}
.past.available-status-code-1.Y {
color: inherit;
background-color: var(--color-warning);
}
.available-status-code-2 {
color: blue;
background-color: #acc9fe;
}
#roster-and-history .player-name {
font-stretch: 95%;
}
.starting {
font-weight: bold;
}
#roster-and-history thead {
border: black solid 1px;
}
#roster-and-history > div > table {
/* font-size: 10.5px; */
padding: 0;
line-height: 1em;
/* outline: 0.5px black; */
}
#roster-and-history td, #roster-and-history th {
border-left: none;
border-right: none;
padding: 0.2em 0.1em 0.2em 0.1em; /* top right bottom left */
}
#roster-and-history td.availability-on-day, #roster-and-history th.availability-on-day {
font-family: var(--monospace-font);
font-stretch: 60%;
text-align: center;
max-width: 0.8em;
min-width: 0.8em;
}
#roster-and-history td.availability-on-day.future, #roster-and-history td.availability-on-day.past, #roster-and-history th.availability-on-day.future, #roster-and-history th.availability-on-day.past {
font-family: var(--monospace-font);
font-stretch: condensed;
font-weight: normal;
font-size: 0.8em;
padding: 0.1em;
text-transform: uppercase;
}
#roster-and-history td.position-capability, #roster-and-history th.position-capability {
font-size: 8px;
font-stretch: 50%;
width: 5px;
text-align: center;
padding: 0;
}
#roster-and-history td.player-stats, #roster-and-history th.player-stats {
display: none;
font-family: var(--monospace-font);
font-size: 1em;
font-stretch: 60%;
font-weight: 300;
}
#roster-and-history td.player-stats .delimiter,
#roster-and-history td.player-stats .decimal-point, #roster-and-history th.player-stats .delimiter,
#roster-and-history th.player-stats .decimal-point {
font-family: Helvetica Now;
font-stretch: expanded;
color: var(--color-grey-500);
}
#roster-and-history td.player-stats .decimal-point, #roster-and-history th.player-stats .decimal-point {
color: rgba(0, 0, 0, 0);
}
#roster-and-history td.player-stats .delimiter, #roster-and-history th.player-stats .delimiter {
color: var(--color-grey-500);
}
#roster-and-history td.player-name {
color: black;
text-align: left;
font-stretch: 95%;
}
#roster-and-history td.jersey-number {
color: black;
border-left: 0.5px solid lightgrey;
}
#roster-and-history colgroup {
border-left-width: 1px;
border-left-style: solid;
border-left-color: black;
border-right-width: 1px;
border-right-style: solid;
border-right-color: black;
}
#roster-and-history col.player-stats {
border: inherit;
}
#roster-and-history th {
background-color: #cadcf9;
color: black;
border: none;
}
#roster-and-history th.availability-on-day div {
transform: rotate(270deg);
}
#roster-and-history thead > tr, #roster-and-history tfoot > tr {
border-bottom: solid black 1px;
}
#roster-and-history tbody {
border-bottom: solid black 1px;
}
#roster-and-history tr.border-top {
border-top: 1px solid black;
}
td.position-capability:not(:empty) {
color: var(--color-grey-700);
background-color: var(--color-grey-200);
}
td.is-present-checkbox {
font-size: 0.5em;
text-align: center;
color: white;
/* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000; */
}
td.is-present-checkbox.available-status-code-0 > span {
display: none;
}
td.is-present-checkbox.available-status-code-None > span {
display: none;
}
.game-number .label {
font-size: xx-small;
}
.game-number .label, .game-number .value {
display: none;
}
#front-cover {
border: solid 1px black;
}
#front-cover Header {
font-family: "Helvetica Now";
font-weight: 600;
line-height: 1.5em;
background-color: #323669;
color: white;
display: inline-flex;
border: none;
padding-left: 5px;
padding-right: 5px;
}
#front-cover .game-number, #front-cover .homeaway {
display: grid;
font-size: xx-large;
align-content: center;
width: 1.4em;
font-weight: 800;
}
#front-cover .title {
display: grid;
font-size: small;
flex-grow: 1;
align-content: center;
}
#front-cover .head-to-head {
padding: 5px;
display: flex;
flex-direction: column;
}
#front-cover .opponent, #front-cover .team {
text-align: center;
font-weight: 800;
font-size: x-large;
align-items: center;
font-family: "Pacifico";
display: inline-flex;
width: 100%;
flex-grow: 1;
height: 100%;
}
#front-cover .opponent img, #front-cover .team img {
height: 115px;
}
#front-cover .opponent div:has(.name), #front-cover .team div:has(.name) {
flex-grow: 1;
}
#front-cover .opponent name {
text-align: left;
}
#front-cover .team name {
text-align: right;
}
/*# sourceMappingURL=eventsheet.css.map */