Files
benchcoach/src/scss/eventsheet.scss

1037 lines
19 KiB
SCSS

@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');
@import url('/font/futura-now/stylesheet.css');
: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;
--header-height: 17px;
--row-height: 14px;
--monospace-font: "Inconsolata", monospace;
--section-border: 0.5px solid black;
}
/** For Print **/
@media print {
:root {
margin: 0;
}
body {
margin:0;
}
body .sheet {
padding: 0.175in;
background:white;
}
}
/** For screen preview **/
@media screen {
body .sheet {
padding: 0.175in;
}
body {
background: #e0e0e0;
}
.sheet {
margin: auto;
margin-bottom: 12px;
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;
background: white;
}
/** Paper sizes **/
body.B5 .sheet { width: 176mm; height: 250mm;}
body.index-card .sheet { width: 3.5in; height: 5in;}
body.letter .sheet { width: 8.5in; height: 11in; }
body {
font-family: "Helvetica Now", "Helvetica", sans-serif;
position: relative;
font-size: 11px;
text-transform: uppercase;
}
table {
font-size: inherit;
border-collapse: collapse;
empty-cells: show;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
th {
color: var(--color-grey-700);
}
th, td {
overflow: hidden;
padding: 0 2px 0 2px;
&:empty::after {
content: "\00a0";
}
}
&.striped {
tr {
&:nth-child(odd) {td, th {
background-color: whitesmoke;
}}
&:nth-child(even) {td,th {
background-color: white;
}}
}
}
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.eventsheet{
--page-margin: 0.175in;
&:has(section) {
display: grid;
section {
--divider-border: lightgrey dashed 1px;
box-sizing: content-box;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
outline-style: solid;
outline-width: calc(var(--divider-border)/4);
outline-color: lightgray;
> div {
display: flex;
flex: 1;
align-items: stretch;
height: auto;
width:100%
}
&.NW {
grid-area: 1 / 1 / 2 / 2;
}
&.NE {
grid-area: 1 / 2 / 2 / 3;
}
&.SW {
grid-area: 2 / 1 / 3 / 2;
}
&.SE {
grid-area: 2 / 2 / 3 / 3;
}
&.NW .divider, &.SW .divider {
border-right:var(--divider-border);
}
&.NW .divider, &.NE .divider {
border-bottom:var(--divider-border);
}
}
}
}
.eventsheet.quarters {
--section-margin: calc(var(--page-margin)/2);
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: calc(var(--page-margin)*2);
row-gap: calc(var(--page-margin)*2);
outline-offset: var(--section-margin);
section {
outline-offset: var(--page-margin);
}
}
.letter .eventsheet.quarters {
--header-height: 0.5in;
}
.letter .eventsheet.index-cards-4x6 {
--section-margin: calc(var(--page-margin)/2);
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 125mm;
column-gap: calc(var(--page-margin)*2);
row-gap: calc(var(--page-margin)*2);
section {
outline-offset: var(--page-margin);
}
}
.letter .eventsheet.index-cards-3x5 {
--section-margin: calc(var(--page-margin)/2);
grid-template-columns: 3in 3in;
grid-template-rows: 5in 5in;
column-gap: calc(var(--page-margin)*2);
row-gap: calc(var(--page-margin)*2);
section {
outline-offset: var(--page-margin);
}
}
.lineup-card {
counter-reset: lineup-sequence-counter 0;
--border: 0.5px solid grey;
border: var(--section-border);
header {
text-transform: uppercase;
font-stretch: 85%;
border-style: none;
border-bottom: var(--border);
height: var(--header-height);
&:empty::after {
content: "\00a0";
}
}
th {
width: inherit;
&.sequence {
counter-increment: lineup-sequence-counter 1;
color: var(--color-grey-600);
font-size: inherit;
width: 2ch;
font-stretch: 50%;
border-right: var(--border);
&.counter::before {
content: counter(lineup-sequence-counter);
}
}
}
thead th {
color: var(--color-grey-600);
font-size: 0.7em;
border-bottom: var(--border);
}
table {
@extend table, .striped;
font-size: 21px;
}
td {
/* height: 34px; */
&.substitution {
width: 8ch;
&::after {
content: "";
}
}
&.position, &.jersey-number {
width: 2ch;
}
&.position, &.jersey-number, &.substitution {
font-family: var(--monospace-font);
border-left: var(--border);
text-align: right;
padding-left: 2.5px;
padding-right: 2.5px;
}
}
tr + tr {
td, th{
// border-top: 1px solid black;
border-top: var(--border);
} }
&.dugout {
td.player-name {
width: 10ch;
font-stretch: 75%;
}
.position, .jersey-number, .substitution {
font-stretch: 75%;
}
}
&.exchange {
header {
text-align: center;
.float-left, .float-right {
float:none;
}
}
.player-name {
font-stretch: 100%;
}
.homeaway, .substitution {
display: none;
}
}
}
section.blank {
svg, header {
filter: grayscale(1) opacity(0.4);
}
> div {
filter: opacity(0.4);
td.substitution {
border-width: 0.5;
}
}
}
#todays-game {
> div {
display: grid;
grid-template-columns: 110px auto;
grid-template-rows: auto auto;
grid-template-areas:
"offense defense"
"footer footer";
}
#offense-pane {
grid-area: offense;
}
#defense-pane {
grid-area: defense;
}
.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;
table {
height: 100%;
outline: none;
border-style: none;
tr {
td, th {
background-color: white;
outline: none;
border-bottom: 0.5px solid var(--color-grey-500);
}
:last-child td {
background-color: white;
outline: none;
border-bottom-style: none;
}
}
th {
text-align: left;
color: var(--color-grey-600);
}
td {
height: var(--row-height);
border: none;
&empty::after {
content: "";
}
}
}
}
table {
&.notes {
th {
border-left: none;
border-right: none;
line-height: 1em;
}
td:empty::after {
content: "";
}
}
}
}
#defense-card {
#defense-pane {
width: 100%;
}
.footer {
display: none;
}
.slot-set {
table {
font-size: 14px;
width: 120px;
tbody > tr:last-child td {
// display: none;
}
}
&.pos-c {
grid-area: 6 / 1 / 7 / 5 !important;
}
&.pos-p {
table {
width: 120px !important;
tbody > tr:last-child {
display: table-row;
}
}
justify-content: center !important;
align-items: center;
margin-bottom: inherit !important;
grid-area: 5 / 1 / 6 / 5 !important;
}
}
}
#defense-card {
border: var(--section-border);
}
#defense-pane {
position: relative;
grid-area: defense;
padding: 4px 4px 0px 4px; /* top right bottom left */
display: flex;
.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;
}
svg {
position: absolute;
stroke-linecap: round;
stroke-miterlimit: 1.5;
z-index: -1;
opacity: 70%;
#outfield-path {
stroke: #4AA1D5;
fill: none;
stroke-width: 4px;
}
#infield-path {
stroke: #4AA1D5;
fill: #D1E6F7;
stroke-width: 4px;
fill-opacity: 50%;
}
}
.slot-set {
display: flex;
align-items: center;
$positions: "cf", "lf", "rf", "ss", "2b", "3b", "1b", "c", "p";
.player-name {
font-stretch: 80%;
}
table {
--border: grey solid 0.5px;
border: var(--border);
opacity: 85%;
tr {
&:first-child th {
border-bottom: var(--border);
}
& + tr {td,th {
border-top: var(--border);
}}
th.position {
font-family: var(--monospace-font);
width: 2ch;
text-align: right;
}
}
}
@each $position in $positions {
&.pos-#{$position} tr:first-child {
th.position:empty{
border-right: var(--border);
&::after {
content: $position;
}}
}
}
&.pos-cf {
justify-content: center;
// align-items: start;
grid-area: 1 / 1 / 2 / 5;
}
&.pos-lf {
justify-content: flex-start;
grid-area: 2 / 1 / 3 / 3;
}
&.pos-rf {
justify-content: flex-end;
grid-area: 2 / 3 / 3 / 5;
}
&.pos-ss {
justify-content: flex-end;
grid-area: 3 / 1 / 4 / 3;
}
&.pos-2b {
justify-content: flex-start;
grid-area: 3 / 3 / 4 / 5;
}
&.pos-3b {
justify-content: flex-start;
grid-area: 4 / 1 / 5 / 3;
}
&.pos-1b {
justify-content: flex-end;
grid-area: 4 / 3 / 5 / 5;
}
&.pos-c {
justify-content: center;
grid-area: 5 / 1 / 6 / 5;
}
&.pos-p {
table {
width: 100%;
}
align-items: end;
margin-bottom: 4px;
grid-area: 6 / 1 / 7 / 5;
tr.substitute .position:empty{
border-right: var(--border);
&::after{
content: "RP";
}}
}
}
}
#offense-pane {
position: relative;
/* box-sizing: border-box; */
height: 100%;
// grid-area: offense;
border-bottom: 0.5px solid black;
counter-reset: lineup-sequence-counter 0;
/* outline: 0.5px solid black; */
table {
height: 100%;
border: none;
}
th.sequence{
counter-increment: lineup-sequence-counter 1;
&.counter::before {
content: counter(lineup-sequence-counter);
}
}
}
header {
background-color: #cadcf9;
height: var(--header-height);
font-family: "Oswald";
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border-bottom: var(--section-border);
}
.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;
}
#roster-and-history {
--border: var(--section-border);
table {
@extend table, .striped;
}
table tr td {
&.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;
}
}
table thead tr {
border: black solid 1px;
height: var(--header-height);
}
> div > table {
/* font-size: 10.5px; */
padding: 0;
line-height: 1em;
/* outline: 0.5px black; */
}
tr.starting-today td {
&.jersey-number, &.player-name{
font-weight: bold;
}
}
.player-name {
font-stretch: 95%;
}
.jersey-number {
font-family: var(--monospace-font);
width: 2ch;
text-align: right;
overflow: hidden;
}
.position {
@extend td, .availability-on-day
}
tr + tr {
border-top: var(--border);
}
td, th {
border-left: none;
border-right: none;
padding: 0.2em 0.1em 0.2em 0.1em; /* top right bottom left */
&.availability-on-day {
font-family: var(--monospace-font);
font-stretch: 60%;
text-align: center;
max-width: 0.8em;
min-width: 0.8em;
}
&.availability-on-day.future,
&.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;
}
&.position-capability {
font-size: 8px;
font-stretch: 50%;
width: 5px;
text-align: center;
padding: 0;
}
&.spacer {
display: none;
&.first-of-group, &.last-of-group {
border: none;
}
}
&.player-stats {
display:none;
font-family: var(--monospace-font);
font-size: 1em;
font-stretch: 60%;
font-weight: 300;
.delimiter,
.decimal-point {
font-family: Helvetica Now;
font-stretch: expanded;
color: var(--color-grey-500);
}
.decimal-point {
color: rgb(0, 0, 0, 0);
}
.delimiter {
color: var(--color-grey-500);
}
}
}
td{
&.player-name {
color: black !important;
text-align: left;
font-stretch: 95%;
}
&.jersey-number {
color: black !important;
}
}
.first-of-group {
border-left-width: 1px;
border-left-style: solid;
border-left-color: black;
}
.last-of-group {
border-right-width: 1px;
border-right-style: solid;
border-right-color: black;
}
col.player-stats {
// visibility:collapse;
border: inherit;
}
table tr:nth-child(odd) th { //needs to have n-thchild to override .striped
background-color: #cadcf9;
color: black;
&.availability-on-day div {
transform: rotate(270deg);
/* font-stretch: 40%; */
font-stretch: 75%;
font-weight: 500;
text-align: left;
}
// .position-capability {
// font-size: inherit;
// }
}
thead > tr, tfoot > tr {
border-bottom: solid black 1px;
}
tbody {
border-bottom: solid black 1px;
}
tr.border-top {td, th {
border-top: 1px solid black;
}}
}
.letter .eventsheet.quarters {
header {
font-size: xx-large;
}
.lineup-card table {
font-size: 23;
}
#defense-pane .slot-set.pos-p {
align-items: start;
}
#roster-and-history {
.spacer {
display:table-cell;
width: 30%;
}
td.position.last-of-group {
border-right: none;
}
.container {
--padding: 2px;
display: block;
flex: none;
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
height: calc(4.25in - 2 * var(--page-margin) - 2 * var(--padding));
width: calc(5.5in - 2 * var(--page-margin) - 2 * var(--padding));
padding: var(--padding)
}
table {
thead tr {
height: inherit;
th {
padding-top: 2px;
padding-bottom: 2px;
}
}
font-size: 11;
height:100%;
td, th {
&.player-name {
// width: 38%;
}
}
th.availability-on-day div {
transform: none;
text-align: center;
}
}
.position, .availability-on-day, .is-present-checkbox {
// width: 3ch;
}
#defense-pane .slot-set.pos-p {
align-items: start;
}
}}
table tr td.position-capability:not(:empty) {
color: var(--color-grey-700);
background-color: var(--color-grey-200);
}
table tr td.position-capability:empty {
background-color: white;
}
table tr 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;
}
#front-cover {
border: solid 1px black;
Header {
font-family: "Helvetica Now";
font-weight: 600;
background-color: #323669;
color: white;
display: inline-flex;
border: none;
padding-left: 5px;
padding-right: 5px;
height: auto;
.title {
display: grid;
font-family: "Futura Now";
flex-grow: 1;
align-content: center;
font-size: medium;
}
.homeaway {
font-weight: 800;
font-size: xx-large;
}
.game-number, .homeaway{
display: grid;
align-content: center;
}
.game-number {
font-size: large;
font-stretch: extra-condensed;
font-weight: 700;
text-wrap: nowrap;
}
}
> div {
width: inherit;
}
th {
background-color: whitesmoke;
}
th, td {
font-family: "Futura Now";
border: solid 0.5px grey;
}
.conjuction {
text-align: center;
font-family: "Futura Now";
text-transform: none;
}
.head-to-head {
padding:5px;
display: flex;
flex-direction: column;
}
.opponent, .team {
text-align: center;
font-weight: 800;
font-size: x-large;
align-items: center;
font-family: 'Pacifico';
text-transform: none;
display: inline-flex;
width: 100%;
flex-grow:1;
height: 100%;
}
.opponent img, .team img{
height: 115px;
}
.opponent div:has(.name), .team div:has(.name){
flex-grow: 1;
}
.opponent name{
text-align: left;
}
.team name{
text-align: right;
}
}