/* NOTE: getting all the google fonts in one request by separating families with "|", also note display=swap is recommended for fast load times, but we don't it for material-icons because it would cause the icon text to appear for a split second before icons come in */ /*@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600'); @import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive'); */ /* NOTE ON FONT-WEIGHT 700: "font-weight:bold" goes to 600, font-weight:700 doesn't do anything, even with 700 imported. First thought was to leave 700 out because it's useless and does nothing... BUT it's required for safari to not omega-bold things. For whatever reason, including the 700 weight in the import fixes the bold issue on safari */ @import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp|Roboto:300,400,500,600,700|Cedarville+Cursive'); #btnFakeSubmit { display: none !important; } /* #region service worker update */ .update-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999999999999; background-color: var(--color-container); background: repeating-linear-gradient( 45deg, var(--color-header), var(--color-header) 40px, var(--color-container) 40px, var(--color-container) 80px ); overflow: hidden; } .update-container i { font-size: 8em; color: var(--color-success); } /* #region pancake animation */ .update-container h1 { position: relative; margin: 0 auto; top: 25vh; width: 100vw; text-align: center; font-size: 6vh; color: #333; opacity: .75; animation: pulse 2.5s linear infinite; } #cooking { position: relative; margin: 0 auto; top: 0; width: 100%; max-width: 40em; height: 75vh; overflow: hidden; } .bubble { position: absolute; border-radius: 100%; box-shadow: 0 0 .25vh #4d4d4d; /* lighten(#333, 10%); */ opacity: 0; } .bubble:nth-child(1) { margin-top: 2.5vh; left: 58%; width: 2.5vh; height: 2.5vh; background-color: #404040; /* lighten(#333, 7%); */ animation: bubble 2s cubic-bezier(.53, .16, .39, .96) infinite; } .bubble:nth-child(2) { margin-top: 3vh; left: 52%; width: 2vh; height: 2vh; background-color: #404040; /* lighten(#333, 4%); */ animation: bubble 2s ease-in-out .35s infinite; } .bubble:nth-child(3) { margin-top: 1.8vh; left: 50%; width: 1.5vh; height: 1.5vh; background-color: #333; animation: bubble 1.5s cubic-bezier(.53, .16, .39, .96) .55s infinite; } .bubble:nth-child(4) { margin-top: 2.7vh; left: 56%; width: 1.2vh; height: 1.2vh; background-color: #2b2b2b; /* darken($color, 3%); */ animation: bubble 1.8s cubic-bezier(.53, .16, .39, .96) .9s infinite; } .bubble:nth-child(5) { margin-top: 2.7vh; left: 63%; width: 1.1vh; height: 1.1vh; background-color: #242424; /* darken($color, 6%); */ animation: bubble 1.6s ease-in-out 1s infinite; } #area { position: absolute; bottom: 0; left: 40%; width: 50%; height: 50%; background-color: transparent; transform-origin: 15% 60%; animation: flip 2.1s ease-in-out infinite; } #sides { position: absolute; width: 100%; height: 100%; transform-origin: 15% 60%; animation: switchSide 2.1s ease-in-out infinite; } #handle { position: absolute; bottom: 18%; right: 80%; width: 35%; height: 20%; background-color: transparent; border-top: 1vh solid #333; border-left: 1vh solid transparent; border-radius: 100%; transform: rotate(20deg) rotateX(0deg) scale(1.3, .9); } #pan { position: absolute; bottom: 20%; right: 30%; width: 50%; height: 8%; background-color: #333; border-radius: 0 0 1.4em 1.4em; transform-origin: -15% 0; } #pancake { position: absolute; top: 24%; width: 100%; height: 100%; transform: rotateX(85deg); animation: jump 2.1s ease-in-out infinite; z-index: -1; } #pastry { background: var(--mobile-logo-img); background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: 26%; right: 37%; width: 40%; height: 45%; /*background-color: $color; box-shadow: 0 0 3px 0 $color;*/ border-radius: 100%; transform-origin: -20% 0; animation: fly 2.1s ease-in-out infinite; } @keyframes jump { 0% { top: 24%; transform: rotateX(85deg); } 25% { top: 10%; transform: rotateX(0deg); } 50% { top: 30%; transform: rotateX(85deg); } 75% { transform: rotateX(0deg); } 100% { transform: rotateX(85deg); } } @keyframes flip { 0% { transform: rotate(0deg); } 5% { transform: rotate(-27deg); } 30%, 50% { transform: rotate(0deg); } 55% { transform: rotate(27deg); } 83.3% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes switchSide { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } } @keyframes fly { 0% { bottom: 26%; transform: rotate(0deg); } 10% { bottom: 40%; } 50% { bottom: 26%; transform: rotate(-190deg); } 80% { bottom: 40%; } 100% { bottom: 26%; transform: rotate(0deg); } } @keyframes bubble { 0% { transform: scale(.15, .15); top: 80%; opacity: 0; } 50% { transform: scale(1.1, 1.1); opacity: 1; } 100% { transform: scale(.33, .33); top: 60%; opacity: 0; } } @keyframes pulse { 0% { transform: scale(1, 1); opacity: .25; } 50% { transform: scale(1.2, 1); opacity: 1; } 100% { transform: scale(1, 1); opacity: .25; } } /* #endregion pancake animation */ /* #endregion service worker update */ /* #region Headers - Are these really necessary? */ h1 { font-size: 2em; font-weight: bold; } h2 { font-size: 1.5em; font-weight:bold; } h3 { font-size: 1.17em; font-weight:bold; } h4 { font-size: 1.12em; font-weight:bold; } h5 { font-size: .83em; font-weight:bold; } h6 { font-size: .75em; font-weight:bold; } /* #endregion */ /* #region SHORTCUT CLASSES */ .no-border { border: none !important; } .white-space { white-space: pre-wrap !important; /* break-spaces; */ } .accent { color: var(--color-accent); } .min-width-0 { min-width: 0; } .fill-parent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* #region TODO: GET RID OF THESE */ .no-Padding { padding:0; } .marginTop{ margin-top: 0.625em; } /* #endregion */ /* #region align */ .left-align { text-align: left !important; } .right-align { text-align: right !important; } .center-align { text-align: center !important; } /* #endregion */ /* #region display */ .show, .block { display: block !important; } .flex { display: flex !important; } .grid { display: grid !important; } .hidden, .hide, .hide-empty:empty { display: none; } .table { display: table !important; width: 100%; } .sticky { position: sticky; top: 0; z-index: 3; /* setting to 3 because input-wrapper labels are 2 */ background: var(--color-container); } @media only screen and (max-device-width : 767px) { .hide-mobile { display: none; } } /* #endregion */ /* #region float */ .float-left { float: left !important; } .float-right { float: right !important; } /* #endregion */ /* #region font size */ .size-25 { font-size: 0.25em } .size-33 { font-size: 0.333em } .size-50 { font-size: 0.5em } .size-66 { font-size: 0.666em } .size-75 { font-size: 0.75em } /* #endregion */ /* #region font style */ .bold { font-weight: bold !important; } .italic { font-style: italic; } /* #endregion */ /* #region margin */ .marg-center-horiz { margin: 0 auto; } .marg-center-vert { margin: auto 0; } .marg-auto { margin: auto; } .marg-left-auto { margin-left: auto; } .marg-right-auto { margin-right: auto; } .marg-top-auto { margin-top: auto; } .marg-bottom-auto { margin-bottom: auto; } .marg-100 { margin: 1em; } .marg-75 { margin: 0.75em; } .marg-66 { margin: 0.666em; } .marg-50 { margin: 0.5em; } .marg-33 { margin: 0.333em; } .marg-25 { margin: 0.25em; } .marg-0 { margin: 0 !important; } .marg-top-100 { margin-top: 1em; } .marg-top-75 { margin-top: 0.75em; } .marg-top-66 { margin-top: 0.666em; } .marg-top-50 { margin-top: 0.5em; } .marg-top-33 { margin-top: 0.333em; } .marg-top-25 { margin-top: 0.25em; } .marg-top-0 { margin-top: 0 !important; } .marg-right-100 { margin-right: 1em; } .marg-right-75 { margin-right: 0.75em; } .marg-right-66 { margin-right: 0.666em; } .marg-right-50 { margin-right: 0.5em; } .marg-right-33 { margin-right: 0.333em; } .marg-right-25 { margin-right: 0.25em; } .marg-right-0 { margin-right: 0 !important; } .marg-bottom-100 { margin-bottom: 1em; } .marg-bottom-75 { margin-bottom: 0.75em; } .marg-bottom-66 { margin-bottom: 0.666em; } .marg-bottom-50 { margin-bottom: 0.5em; } .marg-bottom-33 { margin-bottom: 0.333em; } .marg-bottom-25 { margin-bottom: 0.25em; } .marg-bottom-0 { margin-bottom: 0 !important; } .marg-left-100 { margin-left: 1em; } .marg-left-75 { margin-left: 0.75em; } .marg-left-66 { margin-left: 0.666em; } .marg-left-50 { margin-left: 0.5em; } .marg-left-33 { margin-left: 0.333em; } .marg-left-25 { margin-left: 0.25em; } .marg-left-0 { margin-left: 0 !important; } .no-margin-top { margin-top: 0; } .small-margin { margin-left: 0.25em; margin-right: 0.25em; } .small-margin-top { margin-top: 0.25em !important; } .small-margin-bottom { margin-bottom: 0.25em !important; } .small-margin-right { margin-right: 0.25em; } .small-margin-left { margin-left: 0.25em; } .med-margin { margin: 0.5em; } .med-margin-top { margin-top:.5em; } .med-margin-left { margin-left: .5em; } .med-margin-bottom { margin-bottom: .5em; } .med-margin-right { margin-right: .5em; } .margin-top-small { margin-top: .75em !important; } .margin-top { margin-top: 1em !important; } .margin-bottom { margin-bottom: 1em !important; } .margin-top-med { margin-top: 1.5em !important; } .margin-left { margin-left: 1em; } .margin-right { margin-right: 1em; } /* #endregion */ /* #region opacity */ .transparent { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-33 { opacity: 0.33; } .opacity-50 { opacity: 0.5; } .opacity-66 { opacity: 0.66; } .opacity-75 { opacity: 0.75; } .opaque { opacity: 1; } /* #endregion */ /* #region overflow */ .overflow-hidden { overflow: hidden; } .scroll { overflow-y: auto; /*overlay; this is the same as 'overflow-y: auto' except the scrollbar floats above the content, prevventing header from getting offset */ } .scroll-horiz { overflow-x: auto; } .text-cutoff, .text-cutoff * { /* 04-08-20: added ".text-cutoff *" so that everything inside a text-cutoff div will always get cutoff */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* #endregion */ /* #region padding */ /* TODO: replace all "small-margin-top" "pad-left-25 pad-right-0" etc with new marg/pad classes */ .pad-100 { padding: 1em; } .pad-75 { padding: 0.75em; } .pad-66 { padding: 0.666em; } .pad-50 { padding: 0.5em; } .pad-33 { padding: 0.333em; } .pad-25 { padding: 0.25em; } .pad-10 { padding: 0.1em; } .pad-0 { padding: 0 !important; } .pad-h-100 { padding: 0 1em; } .pad-h-75 { padding: 0 0.75em; } .pad-h-66 { padding: 0 0.666em; } .pad-h-50 { padding: 0 0.5em; } .pad-h-33 { padding: 0 0.333em; } .pad-h-25 { padding: 0 0.25em; } .pad-h-10 { padding: 0 0.1em; } .pad-top-100 { padding-top: 1em; } .pad-top-75 { padding-top: 0.75em; } .pad-top-66 { padding-top: 0.666em; } .pad-top-50 { padding-top: 0.5em; } .pad-top-33 { padding-top: 0.333em; } .pad-top-25 { padding-top: 0.25em; } .pad-top-10 { padding-top: 0.1em; } .pad-top-0 { padding-top: 0 !important; } .pad-right-100 { padding-right: 1em; } .pad-right-75 { padding-right: 0.75em; } .pad-right-66 { padding-right: 0.666em; } .pad-right-50 { padding-right: 0.5em; } .pad-right-33 { padding-right: 0.333em; } .pad-right-25 { padding-right: 0.25em; } .pad-right-10 { padding-right: 0.1em; } .pad-right-0 { padding-right: 0 !important; } .pad-bottom-100 { padding-bottom: 1em; } .pad-bottom-75 { padding-bottom: 0.75em; } .pad-bottom-66 { padding-bottom: 0.666em; } .pad-bottom-50 { padding-bottom: 0.5em; } .pad-bottom-33 { padding-bottom: 0.333em; } .pad-bottom-25 { padding-bottom: 0.25em; } .pad-bottom-10 { padding-bottom: 0.1em; } .pad-bottom-0 { padding-bottom: 0 !important; } .pad-left-100 { padding-left: 1em; } .pad-left-75 { padding-left: 0.75em; } .pad-left-66 { padding-left: 0.666em; } .pad-left-50 { padding-left: 0.5em; } .pad-left-33 { padding-left: 0.333em; } .pad-left-25 { padding-left: 0.25em; } .pad-left-10 { padding-left: 0.1em; } .pad-left-0 { padding-left: 0 !important; } .no-pad { padding: 0 !important; } .no-pad-top { padding-top: 0 !important; } .no-pad-right { padding-right: 0 !important; } .no-pad-left { padding-left: 0 !important; } .no-pad-bottom { padding-bottom: 0 !important; } .pad { padding-left: 0.5em; padding-right: 0.5em; } .pad-left { padding-left: 1em !important; } .pad-right { padding-right: 1em !important; } .pad-top { padding-top: .5em !important; } .pad-bottom { padding-bottom: .5em !important; } .small-pad { padding-left: .25em !important; padding-right: .25em !important; } .small-pad-left { padding-left: .25em !important; padding-right: 0; } .small-pad-right { padding-right: .25em !important; padding-left: 0; } .small-pad-bottom { padding-bottom: .25em !important; padding-top: 0; } .small-pad.top { padding-top: .25em !important; padding-top: 0; } .med-pad { padding-left: 0.35em; padding-right: 0.35em; } .med-pad-left { padding-left: .35em !important; padding-right: 0; } .med-pad-right { padding-right: .35em !important; padding-left: 0; } /* #endregion */ /* #region gap */ .gap-100, .gap { grid-gap: 1em; } .gap-75 { grid-gap: 0.75em; } .gap-66 { grid-gap: 0.6666em; } .gap-50 { grid-gap: 0.5em; } .gap-33 { grid-gap: 0.3333em; } .gap-25 { grid-gap: 0.25em; } .col-gap-100, .col-gap { grid-column-gap: 1em; } .col-gap-75 { grid-column-gap: 0.75em; } .col-gap-66 { grid-column-gap: 0.6666em; } .col-gap-50 { grid-column-gap: 0.5em; } .col-gap-33 { grid-column-gap: 0.3333em; } .col-gap-25 { grid-column-gap: 0.25em; } .row-gap-100, .row-gap { grid-row-gap: 1em; } .row-gap-75 { grid-row-gap: 0.75em; } .row-gap-66 { grid-row-gap: 0.6666em; } .row-gap-50 { grid-row-gap: 0.5em; } .row-gap-33 { grid-row-gap: 0.3333em; } .row-gap-25 { grid-row-gap: 0.25em; } /* #endregion */ /* #region cursor */ .pointer { cursor: pointer; } .grab { cursor: grab; } .grabbing { cursor: grabbing; } /* #endregion */ /* #region text-shadow */ .text-shadow { text-shadow: 0px 3px 6px black; } /* #endregion */ /* #region width / height */ .stretch-height, .height-100 { height: 100% !important; } .stretch-width, .width-100 { width: 100% !important; } /* #endregion */ /* #region visibility */ .visible { visibility: visible; } .invisible { visibility: hidden; } /* #endregion */ /* #endregion */ /* #region BANNER */ #bannerContainer { /* using a floating banner container to contain all banners so the banners can stack on top of eachother while ignoring the pages content */ position: absolute; width: 100vw; bottom: 0; left: 0; display: flex; flex-direction: column; } .banner { display: flex; flex-direction: row; align-items: center; background: var(--color-menu); z-index: 999999; color: var(--color-menu-text); border-top: 1px solid var(--color-menu-text); font-size: 1.25em; padding: 0 .5em 0 .5em; animation: banner-slide 0.5s ease-in forwards; /* forwards prevents properties from resetting when animation is finished */ overflow: hidden; /* so the content is hidden while animating */ min-height: 0; max-height: 0; } @-webkit-keyframes baner-slide { 0% { min-height: 0; max-height: 0; } 100% { max-height: 100em; min-height: 4em; } } @keyframes banner-slide { 0% { min-height: 0; max-height: 0; } 100% { min-height: 4em; max-height: 8em; } } .banner span { display: flex; flex-grow: 100; } .banner .ctrl_button { width: auto !important; overflow: hidden; } .banner:hover .ctrl_button:hover { background: transparent !important; } @media only screen and (max-width: 680px) { .banner { flex-direction: column; } .banner span { text-align: center; padding-top: 0.25em; } .banner .ctrl_button { margin: .25em 0 .5em 0; width: 100% !important; } } /* #endregion BANNER */ /* #region GLOBAL CONTROLS */ /* #region details */ details::focus { outline: none !important; } details:not(:first-child) { margin-top: 0.5em; } details > summary { background-color: var(--color-text); color: var(--color-text-text); cursor: pointer; padding: 0.5em 1em 0.5em 0.75em; list-style-type: none; display: flex; align-items: center; font-size: 1.25em; position: relative; border-top-left-radius: 4px; border-top-right-radius: 4px; } details[disabled] > summary { cursor: auto; padding-right: 0.75em; pointer-events: none; /* prevents click events */ user-select: none; /* prevents text selection */ } /* prevent pointer-events from passing down to buttons */ details[disabled] > summary button { pointer-events: auto; } details > summary[data-icon]::before { font-family: 'Material Icons'; content: attr(data-icon); margin-right: 0.5em; } details:not([disabled]) > summary::after { font-family: 'Material Icons'; content: "expand_less"; font-size: 1.5em; position: absolute; right: 0.25em; } details:not([open]):not([disabled]) > summary::after { content: "expand_more"; } details summary.success { background: var(--color-success); color: var(--color-success-text); } details summary.accent { background: var(--color-accent); color: var(--color-accent-text); } details summary.error { background: var(--color-error); color: var(--color-error-text); } details summary.warning { background: var(--color-warning); color: var(--color-warning-text); } details:not([disabled]) > summary:hover { background-color: var(--color-accent); color: var(--color-accent-text); } details > summary.success ~ *:not(summary) { border-color: var(--color-success); } details > summary.error ~ *:not(summary) { border-color: var(--color-error); } details > summary.warning ~ *:not(summary) { border-color: var(--color-warning); } details:not([disabled]) > summary:hover ~ *:not(summary) { border-color: var(--color-accent); } details > *:not(summary) { border: 1px solid var(--color-text); box-sizing: border-box; width: 100%; /* necessary for tables (non-block display types dont fill width) */ } details > div:not(:empty) { padding: 0.75em; } /* #region nested details */ details details[open] > summary { font-weight: bold; } details details:not(:first-child) { margin-top: 0; } details details:not(:last-child) { border-bottom: 1px solid var(--color-text); } details details > summary { background-color: inherit; color: inherit; padding: 0.25em 2em 0.25em 0.5em; } details details > summary::after { font-weight: normal; } details details > *:not(summary) { padding-top: 0em; padding-bottom: 0.5em; border: none; } details details > summary:hover { background-color: inherit; color: var(--color-accent); } /* #endregion */ /* rounded corner details */ /* NOTE: border-radius was previously only applied "details.rounded", but i've gone through the website and can't find a single instance where it doesnt look better rounded, so it's default now */ details > summary { border-top-left-radius: 4px; border-top-right-radius: 4px; } details:not([open]) > summary, details > *:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } /* #endregion */ /* #region striped table */ table.striped { border-spacing: 0; border-collapse: collapse; border: 1px solid var(--color-stripe-border); } table.striped td, table.striped th { padding: 0.5em; border: 1px solid var(--color-stripe-border); } table.striped td:first-child, table.striped th:first-child { border-left: none; } table.striped td:last-child, table.striped th:last-child { border-right: none; } table.striped th { font-weight: normal; background: var(--color-text); color: var(--color-text-text); padding: 0.25em 0.5em; text-align: left; } table.striped tr:nth-child(odd) { background: var(--color-header); } table.striped tr:nth-child(even) { background: var(--color-container); } /* do separate borders for horizontal only prevent weird 1px backgorund issue when scrolling down */ table.striped.separate { border-collapse: separate; } table.striped.separate tr > * { border-width: 0 1px; } /** striped table inside details container -> change header color (necessary to prevent weird pixel offset on header due to border color) */ details > table.striped th { background: var(--color-stripe-border); color: var(--color-text); font-weight: bold; } /* #endregion */ /* #region CTRL-CHECKBOX */ /* Customize the label (the container) */ .ctrl-checkbox { display: block; position: relative; padding-left: 1.75em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 1.25em; font-weight: normal; margin: 0; } /* Hide the browser's default checkbox */ .ctrl-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 1.25em; width: 1.25em; background-color: var(--color-container); border: .1em solid transparent; /*var(--color-accent); */ box-shadow: 0 0 0 1px var(--color-accent); /* NOTE: replaced border color with box shadow, so the border can still keep the checkmark centered while only being 1px wide at bigger font sizes*/ border-radius: .25em; } /* On mouse-over, add a grey background color */ .ctrl-checkbox:hover input ~ .checkmark { background-color: var(--color-accent) !important; } .ctrl-checkbox:hover .checkmark:after { border-color: white; } /* When the checkbox is checked, add a blue background */ .ctrl-checkbox input:checked ~ .checkmark { background-color: transparent; /* var(--color-accent); */ } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .ctrl-checkbox input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .ctrl-checkbox .checkmark:after { /* left: 9px; top: 5px; width: 5px; height: 10px; */ left: .3em; top: .135em; width: .4em; height: .6em; border: solid var(--color-accent); /* white */ border-width: 0 .15em .15em 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* #endregion CTRL-CHECKBOX */ /* #region INPUT-WRAPPER */ .input-wrapper { position: relative; /* important for keeping the inset-labels inside the wrapper */ border: 0.1rem solid var(--color-accent); /* using REM so all border-widths are the same regardless of their font-size, also because it gets too thick on mobile */ border-radius: 0.25em; padding: 0.1em 0.5em; background-color: white; display: flex; align-items: center; height: 2em; background: var(--color-container); } .input-wrapper:focus-within { box-shadow: 0px 0px 2px 1px var(--color-accent); } .input-wrapper.error:focus-within { box-shadow: 0px 0px 2px 1px var(--color-error); } .input-wrapper.warning:focus-within { box-shadow: 0px 0px 2px 1px var(--color-warning); } .input-wrapper.with-label { margin-top: .65em; /* this margin compensates for the absolutely positioned .inset-label */ } .input-wrapper > .readonly-input { width: 100%; white-space: pre-line; margin-top: .25em; flex-shrink: 0; overflow-wrap: break-word; } /* TODO: REMOVE .inset-label CLASS IN FAVOR OF