/* Static/print calendar styling -- shared by every place the read-only
purchase calendar renders (account screen, admin screen, print, PDF),
regardless of theme. Embedded inline (not linked) wherever it's needed,
since wkhtmltopdf strips tags and this keeps one file working
for both themes without either needing a copy. */
/* No user feedback is needed for static calendars. */
.meals .calendar.calendar-static .calendar_date {
cursor: default;
}
.meals .calendar.calendar-static .calendar_date.today {
cursor: default;
/* A static calendar isn't a view for considering "today" specifically, so
don't call it out */
background-color: #fff;
}
.meals .calendar.calendar-static .calendar_date:not(.today):not(.adj_month):hover {
background-color: #fff;
}
.meals-print {
background-color: transparent;
}
/* Zero the default UA body margin -- it's not accounted for in .meals-print-page's height budget. */
.meals-print body {
margin: 0;
}
/* Force background colors to print/export -- browsers drop them by default. */
.calendar_month,
.calendar_month * {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* meals.css sets .meals table.calendar_month{height:1px} as a base for the
live screen calendar's percentage-height cell trick -- scoped to
".meals-print" (the print page only, via the class on ) so it
doesn't affect that screen view, which still needs the 1px trick. */
html.meals-print .meals table.calendar_month {
height: auto;
}
/* Restate the colors uikit's print reset strips, at higher specificity --
scoped to ".meals-print" (the print page only) since that reset (and
the need to fight it) is specific to print media, not the screen view,
which was losing its own colors (e.g. "today") to these otherwise. */
html.meals-print .calendar_month {
background-color: #eee !important;
}
html.meals-print .calendar_month .calendar_date {
background-color: #fff !important;
}
html.meals-print .calendar_month .calendar_date.adj_month {
background-color: #D6DBEA !important;
}
/* Drop the on-screen card framing for print. */
.meals-print .meals-frontend {
margin: 0in;
max-width: none;
box-shadow: none;
}
/* Let the calendar table use the full print width, edge to edge. */
.meals-print .calendar_month {
margin: 0;
}
.meals-account-student-calendar-header {
position : relative;
font-size : 18pt;
font-weight : bold;
padding : 0.25em 0 0.25em 0;
text-align : center;
line-height : 0.9em;
/* Clearfix -- without it, the floated .meals-account-student-calendar-brand
below could escape this box's own height, and the sizing script budgets
space based on this box's real (measured) height. */
overflow : visible;
}
/* Logo for the calendar export: */
.meals-account-student-calendar-brand {
position : absolute;
font-size : 12pt;
font-weight : normal;
width : 175px;
text-align : left;
top : -0.02in;
}
.wkhtmltopdf .meals-account-student-calendar-brand {
/* wkhtmltopdf's old engine needs a hint to render the SVG correctly */
top : -0.02in;
}
.meals-account-student-calendar-logo {
position: relative;
display : inline-block;
vertical-align: middle;
width: 36px;
height: 36px;
/* meals-logo.svg's viewBox is 24x24 (square, 1:1) but it has no explicit
width/height attributes of its own. */
}
.wkhtmltopdf .meals-account-student-calendar-logo {
/* wkhtmltopdf's old engine needs a hint to render the SVG correctly */
}
/* Fit a Letter landscape page when printed directly from the browser. */
@page {
size: Letter landscape;
margin: 0.25in;
}
/* Square off corners for wkhtmltopdf -- its border-radius rendering is poor. */
.wkhtmltopdf .calendar_month,
.wkhtmltopdf .calendar_date {
border-radius: 0 !important;
}
html.meals-print,
html.meals-print #developer_toolbar-padding {
padding: 0;
}
html.wkhtmltopdf .meals-frontend-print {
width: 10in;
}
/* Flex-size the page: header/footer keep their natural height, the
calendar grows/shrinks to fill whatever's left. wkhtmltopdf's old
-webkit-box model gets its own rules, scoped by the ".wkhtmltopdf" tag
(see the script above), rather than a second declaration of the same
property in one rule -- older parsers don't always fall back cleanly
from a value they don't recognize, so relying on that isn't safe here. */
/* width, like height above, is a literal absolute value rather than 100%
-- percentage widths need a definite-width ancestor to resolve against,
same as percentage heights need a definite-height one, and confirmed:
the whole descendant chain (.meals-static-calendar, .calendar-static,
the table, its columns) was collapsing in wkhtmltopdf without one.
11in Letter-landscape page, minus 0.25in left/right @page margins. */
.meals-print-page {
display: flex;
flex-direction: column;
height: 7.999in;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
html.wkhtmltopdf .meals-print-page {
display: -webkit-box;
-webkit-box-orient: vertical;
}
.meals-account-student-calendar-header,
.meals-account-student-calendar-footer {
flex: 0 0 auto;
overflow:hidden;
/* DEBUG: background-color: rgba(255,0,0,0.5); */
}
html.wkhtmltopdf .meals-account-student-calendar-header,
html.wkhtmltopdf .meals-account-student-calendar-footer {
-webkit-box-flex: 0;
height: 0;
min-height: 0;
}
.meals-static-calendar {
flex: 1 1 auto;
min-height: 0;
height: 100%;
overflow: visible;
/* DEBUG: background-color: rgba(0,255,0,0.5); */
}
html.wkhtmltopdf .meals-static-calendar {
-webkit-box-flex: 1;
width: 100%;
height: auto;
display: -webkit-box;
-webkit-box-orient: vertical;
}
/* Chain -webkit-box-flex one level further down, from .calendar-static to
table.calendar_month, to test whether it can grow the table itself too
(rather than just the wrapper divs around it). */
html.wkhtmltopdf .calendar-static {
-webkit-box-flex: 0;
display: -webkit-box;
width: 100%;
height: auto;
}
html.wkhtmltopdf table.calendar_month {
-webkit-box-flex: 0;
width: 100%;
height: 100%;
}
html.wkhtmltopdf table.calendar_month td {
width: auto;
}
@media screen {
.meals-print body {
padding: 0.25in 0.5in;
}
}
@media print {
.meals-print body {
padding: 0 0.25in;
}
}
.meals-account-student-calendar-footer {
padding : 0.5em 0 0.25em 0;
height : auto;
position : relative;
}
.meals-account-student-calendar-link {
font-weight: normal;
}
.meals-account-student-calendar-link-label {
font-weight: bold;
}
.meals-account-student-calendar-timestamp {
position: absolute;
/*bottom: 0;*/
/*left: 0;*/
top: 0.75em;
right: 0;
font-size: 10px;
color: #777;
line-height: 1;
white-space: nowrap;
}
.meals-account-student-calendar-copyright {
display: none;
position: absolute;
bottom: 0;
right : 0;
font-size: 10px;
color: #777;
line-height: 1;
white-space: nowrap;
}
html.meals-print .meals table.calendar_month {
height: 100%;
}
html.meals-print .meals table.calendar_month > tbody > tr > td {
height: 20%;
}
.calendar-static {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* table.calendar_month (meals.css) has no width of its own, so it
defaults to shrink-to-fit -- with wrappable text inside, wkhtmltopdf's
old engine was shrinking it to something absurdly narrow (confirmed:
cellObj.offsetWidth was reporting ~10px) rather than filling its
container the way real browsers happen to. table-layout:fixed lets the
column widths come straight from the
percentages instead of
waiting on content analysis. Scoped to .calendar-static specifically,
not meals.css's own shared rule, so the live Vue calendar is untouched. */
.calendar-static table.calendar_month {
table-layout: auto;
width: 100%;
}
/* Clip .calendar_date regardless of where its height comes from. */
.calendar_date {
overflow: hidden;
}
/* Clip a busy day's item list instead of overflowing the cell. The JS
sizing script shrinks this element's own font-size first to try to fit
everything within the cell's real (runtime-computed) height; this is
just the fallback if it still doesn't fit even at the smallest size it
tries. No line-clamp here -- a fixed line count would cap content below
whatever the shrunk font size could actually fit. Shared by every kind of
static calendar (purchases, menu items) -- see .meals-static-calendar-cell-content. */
.meals-static-calendar-cell-content {
width: 100%;
overflow: hidden;
font-size: 10pt;
line-height: 1.15;
}
.meals-static-calendar-empty {
color: #999;
font-style: italic;
text-align: center;
position: relative;
top: -0.25em;
}
.meals-static-calendar-purchase-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}
.meals-static-calendar-purchase-price {
font-weight: bold;
}
/* Menu-style layout: styled as a table row (display:table/table-cell on
plain elements, not a real
) so the price can vertical-align
against however many lines the title wraps to -- a plain float can only
ever sit at the top of wrapped text, not the middle or bottom. A real
nested
here was throwing off wkhtmltopdf's scrollHeight
measurement, which the font-shrink script depends on. */
.meals-static-calendar-menu-item {
display: table;
width: 100%;
line-height: 1;
border-collapse: collapse;
}
.meals-static-calendar-menu-item-title {
display: table-cell;
overflow: hidden;
white-space: wrap;
vertical-align: top;
padding: 0;
}
.meals-static-calendar-menu-price {
display: table-cell;
white-space: nowrap;
text-align: right;
vertical-align: middle;
padding: 0 0 0 0.5em;
font-weight: bold;
}
/* "Offered Every Serving Day" footnote -- items that were pulled out of every
individual day cell because they're available on every day anything is
offered this month, listed once instead of repeated across the whole
calendar. A genuine footer in document order and appearance in every
context (print/PDF, and desktop screen) -- unchanged from before any of
the mobile-specific work. Below the mobile breakpoint (see meals.css),
it's hidden and replaced by a real day cell (the calendar's own first
row) instead; .meals-static-calendar-footer-type/-type-group below are
shared with that cell's markup (see menu_calendar.php), since its
choices are grouped under a type heading the same way. */
.meals-static-calendar-footer {
width: 100%;
font-size: 9pt;
line-height: 1.3;
padding: 0.35em 0 0 0;
}
.meals-static-calendar-footer-label {
font-weight: bold;
}
.meals-static-calendar-footer-item::before {
content: " \2014 ";
padding: 0 0.4em 0 0.25em;
}
.meals-static-calendar-footer-type {
font-weight: bold;
}
/* Type-group spacing only matters for the mobile day-cell version -- the
footer's own .meals-static-calendar-footer-item spans are inline, so
margin has no visible effect there. */
.meals-static-calendar-footer-type-group {
margin-bottom: 0.5em;
}
.meals-static-calendar-footer-type-group:last-child {
margin-bottom: 0;
}
/* Each choice under a type heading (mobile day-cell version) uses the
exact same table layout (title left, price right) as a regular day
cell's own items -- just indented a bit to read as belonging under its
type heading. Scoped to stay out of regular day cells' own
.meals-static-calendar-menu-item. */
.meals-static-calendar-footer-type-group .meals-static-calendar-menu-item {
/* border-box, or the added padding-left would push this width:100% element
past its container's edge instead of just insetting its content. */
box-sizing: border-box;
padding-left: 0.5em;
}