383 lines
6.9 KiB
SCSS
383 lines
6.9 KiB
SCSS
/*
|
|
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
|
* listed below.
|
|
*
|
|
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
|
|
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
|
*
|
|
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
|
* compiled file so the styles you add here take precedence over styles defined in any other CSS
|
|
* files in this directory. Styles in this file should be added after the last require_* statement.
|
|
* It is generally better to create a new file per style scope.
|
|
*
|
|
*= require_tree .
|
|
*= require_self
|
|
*/
|
|
|
|
@import "../../node_modules/@teamsnap/teamsnap-ui/src/css/teamsnap-ui.scss";
|
|
@import url('/font/helvetica-now/stylesheet.css');
|
|
|
|
|
|
$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;
|
|
|
|
|
|
// Components
|
|
@import "components/progress";
|
|
|
|
:root {
|
|
--bc-text-muted:#6c757d;
|
|
--bc-avail-color-yes: $cu-positive;
|
|
--bc-avail-color-no: $cu-negative;
|
|
--bc-avail-color-maybe:#113b63;
|
|
}
|
|
|
|
.availability-bar {
|
|
&.going {
|
|
background-color: $ts-green;
|
|
}
|
|
|
|
&.not-going {
|
|
background-color: $ts-red;
|
|
}
|
|
|
|
&.maybe {
|
|
background-color: $ts-blue;
|
|
}
|
|
|
|
&.unknown {
|
|
background-color: $ts-grey;
|
|
}
|
|
}
|
|
|
|
header {
|
|
background: #323669;
|
|
padding: 8px 0;
|
|
// margin: 0 0 16px 0;
|
|
box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
|
|
border-bottom: 1px solid #d6d6d6;
|
|
color: white;
|
|
text-decoration: none;
|
|
|
|
.Header-banner {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.filler {
|
|
flex-grow:1,
|
|
}
|
|
|
|
:has(>.Header-bannerLogo):has(>.Header-bannerTitle) {
|
|
display: inline-flex
|
|
}
|
|
|
|
.Header-bannerLogo, .Header-bannerTitle {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.Header-bannerLogo img {
|
|
height: 36px;
|
|
width: auto;
|
|
}
|
|
|
|
.Header-bannerTitle {
|
|
font-family: "Helvetica", sans-serif;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: white;
|
|
font-size: 28px;
|
|
}
|
|
|
|
}
|
|
|
|
.btn--Full {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(246, 246, 246);
|
|
}
|
|
|
|
/* .u-padSm.u-border.u-borderRadiusLg.u-spaceEndsSm.u-maxWidthXs */
|
|
|
|
.event-card {
|
|
font-family: "Open Sans", Helvetica, sans-serif;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 8px;
|
|
max-width: 480px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
background: white;
|
|
|
|
.title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.event-card-body {
|
|
padding: 8px 8px 8px 8px;
|
|
}
|
|
}
|
|
|
|
.event-card-body {
|
|
> .availability-bar {
|
|
margin: 4px;
|
|
|
|
&.fullwidth {
|
|
margin-top: 4px;
|
|
margin-bottom: -8px;
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
|
|
.availability-bar.fullwidth .progress {
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.event-card {
|
|
.date, .location {
|
|
color: #7a7a7a;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.opponent {}
|
|
|
|
.Button span {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.event-card-footer {
|
|
padding: 8px;
|
|
border-radius: 0px 0px 8px 8px;
|
|
background-color: rgb(251, 251, 251);
|
|
border-top: solid 1px rgb(214, 214, 214);
|
|
}
|
|
}
|
|
|
|
.event-card-footer div {
|
|
text-align: center;
|
|
}
|
|
|
|
a.Panel-row {
|
|
color: inherit;
|
|
}
|
|
|
|
.lineup-slot .Panel-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
div.event-lineup {
|
|
max-width: 576px;
|
|
counter-reset: lineup-sequence-counter 0;
|
|
margin-left: 8px;
|
|
margin-right: 9px;
|
|
}
|
|
|
|
.lineup-slot {
|
|
counter-increment: lineup-sequence-counter 1;
|
|
|
|
.Panel-cell {
|
|
&.Panel-cell--header {
|
|
background: rgba(256, 256, 256, 0);
|
|
}
|
|
|
|
}
|
|
|
|
[class*="availability-status-code"]::before {
|
|
padding-right: 6px;
|
|
font-family: "bootstrap-icons";
|
|
}
|
|
}
|
|
|
|
.lineup-slot .availability-status-code-1 .icon {
|
|
color: $ts-green;
|
|
}
|
|
|
|
.lineup-slot .availability-status-code-2 .icon {
|
|
color: $ts-blue;
|
|
}
|
|
|
|
.lineup-slot .availability-status-code-0 .icon {
|
|
color: $ts-red;
|
|
}
|
|
|
|
.lineup-slot {
|
|
.availability-status-code-nil .icon, .availability-status-code- .icon {
|
|
color: $ts-grey;
|
|
}
|
|
}
|
|
|
|
li .availability-status-code- {
|
|
content: "\F50B";
|
|
color: var(--bs-secondary);
|
|
}
|
|
|
|
.lineup-slot {
|
|
line-height: 100%;
|
|
vertical-align: middle;
|
|
span {
|
|
margin:auto;
|
|
}
|
|
.lastname {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.jerseynumber {
|
|
text-transform: uppercase;
|
|
font-weight: light;
|
|
color: var(--bc-text-muted);
|
|
font-size: 0.8em;
|
|
|
|
// &::before {
|
|
// content: "-";
|
|
// margin-right: 4px;
|
|
margin-left: 4px;
|
|
// }
|
|
}
|
|
|
|
button {
|
|
margin-right: 0.5ch;
|
|
}
|
|
.sequence {
|
|
width: 2.4ch;
|
|
text-align: right;
|
|
margin-right: 0.3ch;
|
|
|
|
&::before {
|
|
content: counter(lineup-sequence-counter);
|
|
}
|
|
}
|
|
|
|
.drag-handle {
|
|
width: 2ch;
|
|
}
|
|
|
|
.position-select-box {
|
|
width: 11ch;
|
|
}
|
|
|
|
.Panel-cell {
|
|
&:has(.sequence), &:has(.drag-handle), &:has(.position-select-box) {
|
|
flex: 0 0 0% !important;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
div.event-lineup {
|
|
.lineup-segment {
|
|
&:has(input.Toggle-input:not(:checked)) {
|
|
&.out {
|
|
.Panel-cell:has(.SelectBox),
|
|
.Panel-cell:has(.drag-handle),
|
|
button:has(+.position-label-flags),
|
|
button.addToStarting,
|
|
button.addToBench
|
|
{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.bench, &.position-only, &.out {
|
|
.Panel-cell:has(.sequence) {
|
|
display: none;
|
|
}
|
|
&.bench button.addToBench {
|
|
display: none;
|
|
}
|
|
}
|
|
&.starting button.addToStarting, &.position-only button.addToStarting {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Tooltip:after {
|
|
padding: 2px !important;
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
@media (max-width: 480px){
|
|
.Panel--full {
|
|
border-radius: 0;
|
|
// margin-right: -16px;
|
|
// margin-left: -16px;
|
|
border-right: none;
|
|
border-left: none;
|
|
}}
|
|
|
|
.lineup-email {
|
|
font-family: "Helvetica", sans-serif;
|
|
|
|
.title-cell {
|
|
font-weight:bold;
|
|
background-color:#323669;
|
|
color:#fff;
|
|
padding:2px 5px;
|
|
text-transform: uppercase;
|
|
|
|
&.out {
|
|
background-color: rgb(244, 199, 195);
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.sequence-cell {
|
|
font-weight:bold;
|
|
padding: 1px 5px;
|
|
text-align: left
|
|
}
|
|
|
|
.name-cell {
|
|
width:200px;
|
|
text-align: left;
|
|
}
|
|
|
|
.position-label-cell {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
|
|
.Panel .Panel{
|
|
// padding: 0;
|
|
// border-radius: 0;
|
|
// border: none;
|
|
// border-top: 1px solid #d6d6d6;
|
|
// border-bottom: 1px solid #d6d6d6;
|
|
margin: 8px;
|
|
}
|
|
|
|
.scroll-horizontal {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
button:has(+.position-label-flags :checked) {
|
|
@extend .Button--blue
|
|
} |