/* 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 border */ .border-top-text { border-top: 1px solid var(--color-text); } .border-left-text { border-left: 1px solid var(--color-text); } .border-bottom-text { border-bottom: 1px solid var(--color-text); } .border-right-text { border-right: 1px solid var(--color-text); } .border-top-accent { border-top: 1px solid var(--color-accent); } .border-left-accent { border-left: 1px solid var(--color-accent); } .border-bottom-accent { border-bottom: 1px solid var(--color-accent); } .border-right-accent { border-right: 1px solid var(--color-accent); } /* #endregion */ /* #region float */ .float-left { float: left !important; } .float-right { float: right !important; } /* #endregion */ /* #region font size */ .font-10 { font-size: 0.1em; } .font-25 { font-size: 0.25em; } .font-33 { font-size: 0.333em; } .font-50 { font-size: 0.5em; } .font-66 { font-size: 0.666em; } .font-75 { font-size: 0.75em; } .font-100 { font-size: 1em; } .font-125 { font-size: 1.25em; } .font-150 { font-size: 1.5em; } .font-175 { font-size: 1.75em; } .font-200 { font-size: 2em; } .font-250 { font-size: 2.5em; } .font-300 { font-size: 3em; } /* #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-left: 1em; padding-right: 1em; } .pad-h-75 { padding-left: 0.75em; padding-right: 0.75em; } .pad-h-66 { padding-left: 0.666em; padding-right: 0.666em; } .pad-h-50 { padding-left: 0.5em; padding-right: 0.5em; } .pad-h-33 { padding-left: 0.333em; padding-right: 0.333em; } .pad-h-25 { padding-left: 0.25em; padding-right: 0.25em; } .pad-h-10 { padding-left: 0.1em; padding-right: 0.1em; } .pad-v-100 { padding-top: 1em; padding-bottom: 1em; } .pad-v-75 { padding-top: 0.75em; padding-bottom: 0.75em; } .pad-v-66 { padding-top: 0.666em; padding-bottom: 0.666em; } .pad-v-50 { padding-top: 0.5em; padding-bottom: 0.5em; } .pad-v-33 { padding-top: 0.333em; padding-bottom: 0.333em; } .pad-v-25 { padding-top: 0.25em; padding-bottom: 0.25em; } .pad-v-10 { padding-top: 0.1em; padding-bottom: 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; } .gap-h-100, .col-gap-100, .col-gap { grid-column-gap: 1em; } .gap-h-75, .col-gap-75 { grid-column-gap: 0.75em; } .gap-h-66, .col-gap-66 { grid-column-gap: 0.6666em; } .gap-h-50, .col-gap-50 { grid-column-gap: 0.5em; } .gap-h-33, .col-gap-33 { grid-column-gap: 0.3333em; } .gap-h-25, .col-gap-25 { grid-column-gap: 0.25em; } .gap-v-100, .row-gap-100, .row-gap { grid-row-gap: 1em; } .gap-v-75, .row-gap-75 { grid-row-gap: 0.75em; } .gap-v-66, .row-gap-66 { grid-row-gap: 0.6666em; } .gap-v-50, .row-gap-50 { grid-row-gap: 0.5em; } .gap-v-33, .row-gap-33 { grid-row-gap: 0.3333em; } .gap-v-25, .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; } .width-75 { width: 75% !important; } .width-66 { width: 66.66% !important; } .width-50 { width: 50% !important; } .width-33 { width: 33.33% !important; } .width-25 { width: 25% !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); } /* striped table wihtin error details: final rows cell needs red bottom border to match the outer details border */ details > summary.error ~ table tr:last-child td { border-bottom-color: var(--color-error); } 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; } /** unfortunately details>div is more specific than .pad-50 so we have to carve out exclusions to let padding classes work here */ details > div.pad-50 { padding: 0.5em; } details > div.pad-25 { padding: 0.25em; } /* #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.success:focus-within { box-shadow: 0px 0px 2px 1px var(--color-success); } .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 <label>*/ .input-wrapper.invalid label, .input-wrapper.invalid .inset-label { color: var(--color-error) !important; } .input-wrapper > label:not(.switch), .input-wrapper .inset-label { position: absolute; line-height: 1em; top: -.6em; left: .2em; /*.35em; /* this positioning assumes the input-wrapper is contained within a column with no padding. if it has padding, this will have to be adjusted */ background: var(--color-container); background: linear-gradient(0deg, rgba(0,0,0,0) 25%, var(--color-container) 25%, var(--color-container) 75%, rgba(0,0,0,0) 75%); padding: 0 .2em; /*.35em;*/ color: var(--color-text); user-select: none; font-style: italic; z-index: 2; font-weight: bold; display: flex; align-items: center; max-width: calc(100% - 0.8em); } .input-wrapper > label.right-align:not(.switch), .input-wrapper .inset-label.right-align { left: auto; right: .2em; } .input-wrapper > label:not(.switch) > .help { font-size: 1.25em; margin-left: 0.25em; margin-top: -0.125em; } .input-wrapper:has(input[disabled]) label:not(.switch), .input-wrapper.disabled label:not(.switch), .input-wrapper.disabled > div { opacity: 0.75; /* NOTE: .disabled class is still required for input-wrapper that don't have inputs (i.e. customer selection boxes, etc) */ } /* #region error */ .input-wrapper.error { border-color: var(--color-error); color: var(--color-error); } .input-wrapper.error .btn-icon.invert { background: var(--color-error); color: var(--color-error-text); } .input-wrapper.error .inset-label, .input-wrapper.error label { color: var(--color-error); } /* #endregion */ /* #region success */ .input-wrapper.success { border-color: var(--color-success); color: var(--color-success); } .input-wrapper.success .btn-icon.invert { background: var(--color-success); color: var(--color-success-text); } .input-wrapper.success .inset-label, .input-wrapper.success label { color: var(--color-success); } /* #endregion */ /* #region warning */ .input-wrapper.warning { border-color: var(--color-warning); color: var(--color-warning); } .input-wrapper.warning .btn-icon.invert { background: var(--color-warning); color: var(--color-warning-text); } .input-wrapper.warning .inset-label, .input-wrapper.warning label { color: var(--color-warning); } /* #endregion */ /* NOTE 2024-01-10: removing disabled input wrapper opacity in favor of ".input-wrapper:has(input[disabled])" the benefit is that disabling inputs don't need to set anything on the containing input-wrapper class. and this is now consistent with normal inputs and dropdowns all browsers support this now except for random ones like android firefox (0.31% population) .input-wrapper.disabled { opacity: 0.75; } */ /*.input-wrapper div { padding: 0; }*/ .input-wrapper input, .input-wrapper textarea { width: 100%; box-sizing: border-box; outline: none; border: none; /*border-top-right-radius: 5px; border-bottom-right-radius: 5px;*/ margin-top: .1rem; /* input slightly overlaps top border on mobile */ background-color: transparent; flex-grow: 1; min-width: 0; /* necessary so input doesn't grow outside container with large font */ text-overflow: ellipsis; /*white-space: nowrap; REMOVING THIS 8/21/19 for user maintenance user notes... does this cause issues on customer page? */ overflow: hidden; } input:-webkit-autofill { /* chrome tries to force autofill styling... */ -webkit-box-shadow: 0 0 0px 1000px var(--color-container) inset; -webkit-text-fill-color: var(--color-text) !important; } .input-wrapper > i:not(:first-child) { padding-left: .25em; } .input-wrapper > i:first-child { padding-right: .25em; } .input-wrapper > i.material-icons { cursor: default; } /* #region textarea wrapper */ .input-wrapper.textarea-wrapper { height: auto !important; min-height: 2em; padding: 0; } .input-wrapper.textarea-wrapper textarea { line-height: 1em; min-height: 2em; padding: 0.25em 0.5em; } .input-wrapper.textarea-wrapper:has(textarea[disabled]) label:not(.switch) { opacity: 0.75; } /* #endregion */ .input-wrapper > .btn-icon { padding: 0 0.15em; flex-shrink: 0; } /* NOTE: icon button margin is different for dropdown-wrapper due to different container padding */ .input-wrapper > .btn-icon:not(.left):last-of-type { margin-right: -0.38em !important; } .input-wrapper > .btn-icon.left { margin-left: -0.38em !important; } .input-wrapper > .icon-button, .input-wrapper > .btn-icon.invert { height: calc(100% + 0.125em + 0.2rem); } .input-wrapper > .icon-button, .input-wrapper > .btn-icon.invert:not(.left) { border-radius: 0 3px 3px 0 !important; } .input-wrapper > .btn-icon.invert.left { border-radius: 3px 0 0 3px !important; } .input-wrapper.required > label::after, .switch-wrapper.required > b::after { content: "*"; color: var(--color-error); margin-left: 0.25em; } .input-wrapper > a.btn-icon { text-decoration:none !important; } .input-wrapper .input-label { margin-top: .7rem; text-align:left; padding-left:1rem; padding-right: 1rem; font-weight:bold; display: inline-flex; flex: 1 0 auto; white-space: pre; /* important for making inputs line up */ font-family: Courier New, Courier, monospace; } .input-wrapper input::-webkit-input-placeholder, .input-wrapper input:-moz-placeholder, .input-wrapper input::-moz-placeholder, .input-wrapper input:-ms-input-placeholder { font-style: italic; } .input-wrapper .loader { position: absolute; font-size: 2.5em; width: 0.5em; height: 0.5em; top: auto; left: auto; bottom: 0.135em; right: 0.1em; margin: 0; border-width: .08em; display: none; overflow: visible; } .input-wrapper.loading .loader { top: 0.125em; display: block; } .input-wrapper.loading .loader.relative { /* 2024-01-11 dropdown loader position is screwed up, idk when this happened I've got dropdown adding the "relative" class to it's loader, in combination with this posiitoning gets the desired result but I dont have a full list of all the loadable dropdowns in the portal to test this on... so fingers crossed 2024-03-07 the "right:0.25em" was screwed up for loadable dropdowns that also have a btn-icon to the right unfortunately the ideal spacing is inconsistent: when no button exists, you want a little extra right-padding for the loader when a button exists, this extra padding looks like too much simplest solution is to only add the right margin if last child */ top: calc(100% - 0.65em); /*right: 0.25em;*/ } .input-wrapper.loading .loader.relative:last-child { margin-right: 0.25em; } .input-wrapper > .btn-icon ~ .loader { right: 0.9em; } /* #region MULTI-INPUT-WRAPPER this is for multiple inputs separated by lines (i.e. Address1,2,3 in one container) */ .input-wrapper.multi { align-items: stretch; padding: 0 0.5em 0 0; height: auto; } .input-wrapper.multi input { border-radius: 0; padding: 0 .5em; } .input-wrapper.multi > .flex-column input:first-child { /* moving first input down a bit so it doesn't get overlapped by label */ margin-top: 0.1em; } .input-wrapper.multi > .flex-column input:not(:last-child) { border-bottom: 1px solid var(--color-accent); } .input-wrapper.multi .btn-icon { height: auto; } /* #endregion MULTI-INPUT-WRAPPER */ /* #region stretch input wrapper this is for displaying multiple lines of data in an input-wrapper and having it stretch to contain the data input-wrapper.stretch should contain a div inside it to contain the multiple children. the button to the right will stretch alongside the inner div (this is used for custom rendered search fields i.e. quote entry customers where you hit the search button to the right, then select, then it updates the value inside the wrapper, but the user does not type into it) TODO 2025-05-08: sales entry pages all use .address-wrapper with a ton of duplicate code. Update them to use this */ .input-wrapper.stretch { height: unset; min-height: 2em; align-items: stretch; padding-top: 0; padding-bottom: 0; flex-shrink: 0; } .input-wrapper.stretch > .btn-icon { height: unset; } .input-wrapper.stretch > div { flex-grow: 100; line-height: 1.25em; margin-top: 0.25em; align-self: center; } /* #endregion */ /* #endregion INPUT-WRAPPER */ /* #region SEARCH BOX */ .rounded-search-box { margin: 0 !important; padding: 0.25em .5em 0 .5em; display: flex; align-items: center; height: 100%; width: 100%; border-radius: .5em; background-color: var(--color-accent-text); color: var(--color-text); } .search-box { display: flex; align-items: center; padding-bottom: .1em; border-bottom: 1px solid grey; margin: .5em 0; background-color: var(--color-container); } .search-box input { flex-grow: 100; outline: none; border: none; height: 100%; background-color: transparent; min-width: 0; /* necessary so input doesn't grow outside container with large font */ } .search-box i { font-size: 1.25em; } /* #endregion SEARCH BOX */ /* #region SEARCH BOX (BORDER) */ .search { display: flex; border: 1px solid var(--color-text); border-radius: 5px; padding: .5em; position: relative; outline: none; align-items: center; } .search:focus-within { border-color: var(--color-accent) !important; } .search input { border: none; width: 100%; outline: none; flex-grow: 100; height: 100%; background-color: transparent; } .search i { float: right; font-size: 1.5em; } /* #endregion SEARCH BOX (BORDER) */ /* #region 3-way slider (range input) */ input[type=range].tri-switch { -webkit-appearance: none; width: 3em; margin: 0 0; display: inline-block; pointer-events: none; } input[disabled].tri-switch { opacity: 1; /* overwriting .5 opacity on generic inputs */ } .tri-switch-wrapper.disabled > input[type=range] { opacity: 0.5 !important; /* since tri-switches are always disabled, we disable them by adding the "disabled" class to the container */ } input[type=range].tri-switch :focus { outline: none; } .tri-switch-wrapper { display: inline-flex; cursor: pointer; } input[type=range][value="-1"].tri-switch::-webkit-slider-runnable-track { background-color: var(--color-error); } input[type=range][value="-1"].tri-switch.partial::-webkit-slider-runnable-track { background-color: var(--color-header); } input[type=range][value="0"].tri-switch.partial::-webkit-slider-runnable-track, input[type=range][value="0"].tri-switch.stop::-webkit-slider-runnable-track { background-color: var(--color-warning); } input[type=range][value="1"].tri-switch::-webkit-slider-runnable-track { background-color: var(--color-success); } /* input[type=range].tri-switch::-moz-range-track, input[type=range].tri-switch::-ms-track */ input[type=range].tri-switch::-webkit-slider-runnable-track { width: 100%; height: 1.5em; cursor: pointer; background-color: var(--color-header); border-radius: 1em; border: 0px solid #010101; -webkit-transition: background-color 100ms ease-out; transition: background-color 100ms ease-out; } /*input[type=range].tri-switch::-moz-range-thumb, input[type=range].tri-switch::-ms-thumb */ input[type=range].tri-switch::-webkit-slider-thumb { border: 1px solid var(--color-accent); height: 1.5em; width: 1.5em; border-radius: 1em; background: var(--color-container); cursor: pointer; -webkit-appearance: none; margin-top: 0px; } /* default = [red, gray, green] partial = [gray, yellow, green] stop = [red, yellow, green] */ input[type=range][value="-1"].tri-switch::-webkit-slider-thumb { border-color: var(--color-error); } input[type=range][value="-1"].tri-switch.partial::-webkit-slider-thumb { border-color: var(--color-auxiliary); } input[type=range][value="0"].tri-switch.partial::-webkit-slider-thumb, input[type=range][value="0"].tri-switch.stop::-webkit-slider-thumb { border-color: var(--color-warning); } input[type=range][value="1"].tri-switch::-webkit-slider-thumb { border-color: var(--color-success); } input[type=range].tri-switch:focus::-webkit-slider-runnable-track { background: #8080ff; } /* not sure what all this ms--fill crap is, gonna need to test it in IE and/or edge */ input[type=range].tri-switch::-ms-fill-lower { background: #000080; border: 0px solid #010101; border-radius: 0px; box-shadow: 0.1px 0.1px 0px #005900, 0px 0px 0.1px #007200; } input[type=range].tri-switch::-ms-fill-upper { background: #0000ff; border: 0px solid #010101; border-radius: 0px; box-shadow: 0.1px 0.1px 0px #005900, 0px 0px 0.1px #007200; } input[type=range].tri-switch:focus::-ms-fill-lower { background: #0000ff; } input[type=range].tri-switch:focus::-ms-fill-upper { background: #8080ff; } /* #endregion 3-way slider (range input) */ /* #region SLIDER / TOGGLE SWITCH */ .switch-label { height: 1.5em; display: inline-block; vertical-align: top; margin-left: 1rem; } .switch { position: relative; display: inline-block; width: 3em; height: 1.5em; margin-bottom: 0 !important; } .switch input { display: none; } .slider-label { font-weight: bold; font-style: italic; text-align: center; line-height: 1em; /* was previously line-height:1.25em, but was getting margin-top:-0.25em applied outside... */ } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #efefef; -webkit-transition: .1s; transition: .1s; } .slider:before { position: absolute; content: ""; height: 1.5em; width: 1.5em; left: 0; bottom: 0; background-color: var(--color-container); -webkit-transition: .1s; transition: .1s; border: 1px solid var(--color-accent); } /* NOTE: "+" means after */ input:disabled + .slider { opacity: 0.5; cursor: auto; } input:focus + .slider { box-shadow: 0 0 1px var(--color-accent); } input:checked + .slider { background-color: var(--color-success); } input:not(:checked) + .slider { background-color: var(--color-error); } input:checked + .slider::before { -webkit-transform: translateX(1.5em); -ms-transform: translateX(1.5em); transform: translateX(1.5em); border-color: var(--color-success); color: var(--color-success); } input:not(:checked) + .slider::before { border-color: var(--color-error); color: var(--color-error); } /* #region filter slider (gray/accent as opposed to error/success) */ /* NOTE: filter.success is for dropdown pills. normally .filter is accent/gray, but pills have accent background so green/gray is necessary*/ input:not(:checked) + .slider.filter { background-color: var(--color-header); } input:not(:checked) + .slider.filter::before { border-color: var(--color-auxiliary); } input:checked + .slider.filter:not(.success) { background-color: var(--color-accent); } input:checked + .slider.filter::before { border-color: var(--color-accent); } /* #endregion */ /* #region directional slider (consistent background regardless of check state, simply points in a direction) */ input + .slider.directional { background-color: var(--color-header); } input + .slider.directional::before { border-color: var(--color-accent); } .slider.round { border-radius: 1.5em; } .slider.round:before { border-radius: 50%; } .switch-wrapper { display: flex; flex-direction: column; position: relative; } .switch-wrapper > b { line-height: 1em; font-style: italic; } /* #endregion SLIDER / TOGGLE SWITCH */ /* #region LOADER */ .loader-modal { position: fixed; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 9999; left: 0px; right: 0; top: 0; bottom: 0; margin: 0px !important; /*box-shadow: inset 5px 5px 100px black;*/ overflow: hidden; } .loader { border-radius: 50%; width: 2.5em; height: 2.5em; border-bottom-color: transparent; font-size: 5rem; text-indent: -9999em; border-width: .25em; border-style: solid; border-color: var(--color-accent) var(--color-accent) transparent var(--color-accent); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } .loader:not(.relative) { position: absolute; left: 50%; right: 50%; top: 50%; bottom: 50%; margin-top: -1.25em; margin-left: -1.25em; z-index: 9999; } .small-loader { width: 100px !important; height: 100px !important; margin-top: -50px !important; margin-left: -50px !important; border-top: 10px solid var(--color-accent) !important; border-right: 10px solid var(--color-accent) !important; border-bottom: 10px solid var(--color-accent) !important; border-left: 10px solid #ffffff !important; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* #endregion LOADER */ /* #region CTRL_TEXTBOX */ .ctrl_textbox { width: 100%; background-color: white !important; border: none; border-bottom: 1px solid black; border-radius: 3px; margin-bottom: .5rem; height: auto; padding: .6rem .5rem 0 .5rem; color: black; outline: none; } .ctrl_textbox:hover { background-color: rgba(255,255,255,0.8); } .ctrl_textbox:focus { background-color: rgb(255,255,255); border-color: black; color: black; } /* #endregion CTRL_TEXTBOX */ /* #region TB_BUTTON */ .tb_button { border: none; width: 100%; padding-top: .25em; padding-bottom: .25em; /*padding-top: 1em; padding-bottom: .2em;*/ border-bottom: 2px solid black; display: block; text-align: center; text-decoration: none; outline: none; background-color: var(--color-container); color: var(--color-text); border-color: var(--color-text); display: flex; align-items: center; justify-content: center; user-select: none; } a.tb_button, a.tb_button:visited, aa.tb_button:link { color: var(--color-text) !important; /* overriding inline-styles from emails */ text-decoration: none !important; } /* only do this for non-mobile devices (sticky hover state issue on mobile) */ @media (hover: hover) { .tb_button:enabled:hover:not(.selected-tab):not(.current-tab), a.tb_button:hover:not(.selected-tab):not(.current-tab) { background-color: var(--color-text) !important; color: var(--color-text-text) !important; } } .tb_button span { margin-left: .5em; } .tb_button:hover { text-decoration: none !important; } /* #endregion TB_BUTTON */ /* #region tooltip */ .tooltip { position: relative; display: flex; justify-content: center; cursor: help; } .tooltip > .text { visibility: hidden; position: absolute; bottom: 160%; /* if this is too high, add this to a new ".input-wrapper .tooltip > .text" rule */ width: max-content; max-width: 20em; background-color: var(--color-accent); color: #fff; padding: 0.5em; border-radius: 0.25em; z-index: 2; } .tooltip > .text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -0.5em; border-width: 0.75em; border-style: solid; border-color: var(--color-accent) transparent transparent transparent; } .tooltip.right > .text { right: 0; } .tooltip.right > .text::after { left: unset; right: 0.125em; } /* only allowing hover on desktop right now because the tooltips aren't very mobile friendly yet (they don't fit to popups etc) */ @media(hover: hover) { .tooltip:hover > .material-icons { color: var(--color-accent); } .tooltip:hover > .text { visibility: visible; } } /* #endregion */ /* #region tab-bar */ .tab-bar { padding: 0.1em 0.2em 0 0.2em; background: var(--color-header-border); display: flex; column-gap: 0.2em; } .tab-bar > * { padding: 0 !important; } .tab-bar.sticky { position: sticky; top: 0; z-index: 2; } .tab-bar a { text-decoration: none; } .tab-bar button:not(.btn-icon), .tab-bar a { width: 100%; height: 3.25em; border-top-left-radius: 1em; border-top-right-radius: 1em; background: var(--color-header); color: var(--color-header-text); border: none; outline: none; display: flex; align-items: center; justify-content: center; } /* #region .tab-bar WITH bordering around .current-tab (default behavior, detail pages don't have border) */ .tab-bar:not(.no-border) { border-bottom: 1px solid var(--color-text); } .tab-bar:not(.no-border) button:not(.btn-icon), .tab-bar:not(.no-border) a { /* margin causes button to overlap container's bottom border. this allows .current-tab to hide the bottom border when selected */ margin-top: 1px; margin-bottom: -1px; border-bottom: 1px solid var(--color-text); /* invisible top border to prevent .current-tab from moving 1px down when adding border */ border-top: 1px solid var(--color-header); } .tab-bar:not(.no-border) button[disabled] { /* buttons get 50% opacity when disabled, but in this case we need the button to maintian full opacity for the white bottom-border to overlap the tab-bars bottom-border. solution is to pass the opacity down to children */ opacity: 1; } .tab-bar:not(.no-border) button[disabled] > * { opacity: 0.5; } .tab-bar button.current-tab, .tab-bar button.selected-tab { cursor: default; } .tab-bar:not(.no-border) .current-tab, #settingsHeader .selected-setting-tab { background: var(--color-container) !important; color: var(--color-text) !important; border-top: 1px solid var(--color-text) !important; border-left: 1px solid var(--color-text); border-right: 1px solid var(--color-text); border-bottom: 1px solid var(--color-container) !important; z-index: 2; } /* #endregion .tab-bar with border */ /* #region tab-bar slim */ .tab-bar.slim button, .tab-bar.slim a { height: 2em; } /* #endregion tab-bar slim */ @media (hover: hover) { .tab-bar button:not(.current-tab):not(.selected-tab):enabled:hover, .tab-bar a:not(.current-tab):not(.selected-tab):hover { background: var(--color-text) !important; color: var(--color-text-text) !important; border-bottom: 1px solid var(--color-text); /* this fills up the bottom 1px to line up with .tab-bar border */ } } .tab-bar button i, .tab-bar a i { margin-right: .25em; margin-left: -.25em; } @media screen and (max-width: 767px) { .tab-bar.vertical-mobile button, .tab-bar.vertical-mobile a{ height: auto; flex-direction: column; padding-top: .25em; } .tab-bar.vertical-mobile button i, .tab-bar.vertical-mobile a i { margin: 0; } } @media only screen and (max-width: 800px) { .tab-bar.icon-mobile button, .tab-bar.icon-mobile a { flex-direction: column; } .tab-bar.icon-mobile button i, .tab-bar.icon-mobile a i { margin: 0; } } @media only screen and (max-width: 500px) { .tab-bar.icon-mobile button span, .tab-bar.icon-mobile a span { display: none; } .tab-bar.icon-mobile button i, .tab-bar.icon-mobile a i { margin: 0; } } /* #endregion tab-bar */ /* #region CTRL_BUTTON */ .ctrl_button { border-radius: 0.25em; /*z-index: 9999; Im not sure why this was here?? it's causing problems now */ padding: 1rem; min-width: 6em; text-align: center; /* for non-buttons */ outline: none; background-color: var(--color-accent); color: var(--color-accent-text); border: 1px solid var(--color-accent); position: relative; } .ctrl_button.error { background-color: var(--color-error); color: var(--color-error-text); border: 1px solid var(--color-error); } .ctrl_button.success { background-color: var(--color-success); color: var(--color-success-text); border: 1px solid var(--color-success); } .ctrl_button.warning { background-color: var(--color-warning); color: var(--color-warning-text); border: 1px solid var(--color-warning); } .ctrl_button.text { background-color: var(--color-text); color: var(--color-text-text); border: 1px solid var(--color-text); } .ctrl_button.auxiliary { background-color: var(--color-auxiliary); color: var(--color-auxiliary-text); border: 1px solid var(--color-auxiliary); } @media (hover:hover) { /* hovering applies transparent white overlay */ .ctrl_button:not(:disabled):hover:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); border-radius: 6px; } } .ctrl_button.center, .ctrl_button.full-center { gap: 0.25em; /* gap between icon and label */ } .ctrl_button:not(.loading) .loader { display: none; } .ctrl_button.loading { position: relative; } .ctrl_button.loading i { visibility: hidden; } .ctrl_button.loading .loader { font-size: 0.5em; left: 3em; top: 3em; border-width: 0.4em; border-color: var(--color-accent-text) var(--color-accent-text) transparent var(--color-accent-text); } a.ctrl_button { text-decoration: none; user-select: none; -webkit-user-drag: none; } a.ctrl_button:hover { color: var(--color-accent-text) !important; } /* #endregion CTRL_BUTTON */ /* #region ANCHOR-BUTTON */ .anchor-button { border: none; outline: none; /*text-decoration: underline;*/ background: transparent; padding: 0; color: var(--color-accent); } .anchor-button:hover { color: var(--color-accent-75); } /* #endregion ANCHOR-BUTTON */ /* #region ICON-BUTTON */ .icon-button { /* for buttons that should appear as an icon with no border */ border: none; outline: none; background: transparent; display: flex; align-items: center; justify-content: center; } .icon-button i { width: 1em; } .icon-button.accent { background: var(--color-accent); color: var(--color-accent-text); border: 1px solid var(--color-accent); border-radius: .33em; } .icon-button.accent:hover:enabled { background-color: transparent !important; /*var(--color-container) !important;*/ cursor: pointer; } .icon-button.accent:hover:enabled, .icon-button.accent:hover:enabled i, .icon-button.accent:hover:enabled span { color: var(--color-accent) !important; } /* #endregion ICON-BUTTON */ /* #region btn-icon */ /* this is the improved version of icon-button... instead of the <button>containing an <i class="material-icons">, i copy the .material-icons css into the button itself */ .btn-icon { font-family: 'Material Icons'; /* begin .material-icons css*/ font-weight: normal; font-style: normal; font-size: 1.5em; /* modified font-size:24px to 1.5em (icons are pretty small, 1.5 tends to line up with actual font-size) */ line-height: 1; letter-spacing: normal; text-transform: none !important; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; /* end .material-icons css */ border: none; outline: none; background: transparent; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 4px; overflow: hidden; /* hiding overflow so that the hover::after overlay doesn't escape custom border-radius */ } .btn-icon.accent { background: var(--color-accent); color: var(--color-accent-text); border: 1px solid var(--color-accent); border-radius: 0.33em; } .btn-icon.accent:hover:enabled { background-color: transparent !important; cursor: pointer; } .btn-icon.accent:hover:enabled, .btn-icon.accent:hover:enabled i, .btn-icon.accent:hover:enabled span { color: var(--color-accent) !important; } .btn-icon.invert { background-color: var(--color-accent); color: var(--color-accent-text); } .btn-icon.invert.error { background-color: var(--color-error); color: var(--color-error-text); } .btn-icon.invert.success { background-color: var(--color-success); color: var(--color-success-text); } .btn-icon.invert.warning { background-color: var(--color-warning); color: var(--color-warning-text); } .btn-icon.invert.text { background-color: var(--color-text); color: var(--color-text-text); } .btn-icon.invert.aux, .btn-icon.invert.auxiliary { background-color: var(--color-auxiliary); color: var(--color-accent-text); } a.btn-icon.invert[href='#'], a.btn-icon.invert[href='tel:'] { opacity: 0.75; cursor: default; } @media (hover:hover) { /* hovering applies transparent white overlay */ .btn-icon.invert:enabled:hover:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); border-radius: 6px; } } .btn-icon.rounded { border-radius: 999em !important; } /* #region btn-icon-loader */ .btn-icon .btn-icon-loader { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; border-radius: 50%; border: 2px solid var(--color-accent-text); border-bottom-color: transparent; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-icon.loading { background: var(--color-accent-75); } .btn-icon.loading .btn-icon-loader { display: block; animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear; } /* #endregion */ /* #endregion btn-icon */ /* #region attach-button */ .attach-buttons > .btn-icon { flex-shrink: 0; padding: 0.333em; } .attach-buttons > .btn-icon::before { content: attr(data-count); color: var(--color-accent-text); font-family: 'Roboto', sans-serif; } .attach-buttons > .btn-icon.error::before { content: 'WARNING ' attr(data-count); } .attach-buttons > .btn-icon::before:not(:empty) { padding-right: 0.25em; } /* #endregion */ /* #region LINE INFO BUTTON */ .btn-line-info { outline: none; background: transparent; color: var(--color-accent); border: .05em solid var(--color-accent); font-size: 1.8em; min-width: unset; border-radius: 2em; padding: .25em; min-width: 2em; } @media (hover:hover) { .btn-line-info:hover { background: var(--color-accent); color: var(--color-accent-text); } } /* #endregion LINE INFO BUTTON */ /* #region progress bar */ .progress-bar { width: 100%; height: 2em; position: relative; border: 1px solid var(--color-auxiliary); border-radius: 0.25em; } .progress-bar > div { position: absolute; top: 0; left: 0; bottom: 0; } /* #endregion */ /* #region progress-wrapper */ .progress-wrapper { width: 100%; height: 24px; position: relative; } .progress-wrapper progress { width: 100%; height: 100%; } .progress-wrapper > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text); } /* background: */ .progress-wrapper progress::-webkit-progress-bar { background-color: var(--color-header-border); width: 100%; } .progress-wrapper progress { background-color: var(--color-header-border); border: 1px solid var(--color-auxiliary); border-radius: 2px; overflow: hidden; } /* value: */ .progress-wrapper progress.error::-webkit-progress-value { background-color: var(--color-error) !important;} .progress-wrapper progress.error::-moz-progress-bar { background-color: var(--color-error) !important;} .progress-wrapper progress.error { color: var(--color-error); } .progress-wrapper progress.warning::-webkit-progress-value { background-color: var(--color-warning) !important;} .progress-wrapper progress.warning::-moz-progress-bar { background-color: var(--color-warning) !important;} .progress-wrapper progress.warning { color: var(--color-warning); } .progress-wrapper progress.success::-webkit-progress-value { background-color: var(--color-success) !important;} .progress-wrapper progress.success::-moz-progress-bar { background-color: var(--color-success) !important;} .progress-wrapper progress.success { color: var(--color-success); } /* #endregion */ /* #endregion GLOBAL CONTROLS */ /* #region toggle buttons */ .toggle-button { border: none; outline: none; background: transparent; padding: 0; } /* TODO: create a line-sep container class that does this, along with grid-gap to allow the absolutely positioned lines to get spaced appropraitely? issue is the lines wouldn't wrap with the grid-gap */ /* separating multiple toggle buttons with dashes. downside is ::after content has to match color of the button itself UNLESS absolutely positioned but then we'd have to use gap on container*/ .toggle-button:not(.pill):not(:last-child)::after { content: "-"; margin-left: 0.75em; color: var(--color-auxiliary) !important; } .toggle-button[data-value='false'], .toggle-button.tri[data-value='-1'] { color: var(--color-error); } .toggle-button.tri[data-value='0'] { color: var(--color-auxiliary); opacity: 0.5; } .toggle-button.tri[data-value='1'], .toggle-button[data-value='true'] { color: var(--color-success); } /* #region filter mode (bi: [gray -> green] tri: [gray -> yellow -> green]) */ .toggle-button.filter[data-value='false'], .toggle-button.tri.filter[data-value='-1'] { color: var(--color-auxiliary); opacity: 0.5 } .toggle-button.tri.filter[data-value='0'] { color: var(--color-warning); } /* #endregion */ /* #region pill */ .toggle-button.pill { border-radius: 8px; padding: 0.25em 0.5em; } .toggle-button.pill[data-value='false'], .toggle-button.pill[data-value='-1'] { background: var(--color-error); color: var(--color-error-text); } .toggle-button.pill[data-value='0'], .toggle-button.pill.filter[data-value='false'], .toggle-button.pill.filter[data-value='0'] { background: var(--color-auxiliary); color: var(--color-auxiliary-text); } .toggle-button.pill[data-value='true'], .toggle-button.pill[data-value='1'] { background: var(--color-success); color: var(--color-success-text); } /* #endregion */ /* #endregion */ /* #endregion*/ /* #region MISC */ .line-through { text-decoration: line-through; color: var(--color-auxiliary); } a:hover .line-through { color: var(--color-accent-75); opacity: 0.5; } /* #region headers */ .inverted-header, .sticky-header { background: var(--color-accent); color: var(--color-accent-text); } .inverted-header-2 { background: var(--color-text); color: var(--color-text-text); } .underline-header { border-bottom: 1px solid var(--color-text); font-weight: bold; } .sticky-header { position: sticky; top: 0; /* top: 0 required for sticky to take effect */ z-index: 1; } /* #endregion headers */ /* #region material icon overlay text */ .material-icons { position: relative; cursor: default; /* sometimes i add a title to icons for help text and it feels weird having a text cursor */ } .material-icons > i { font-style: normal; /* preventing nested icons from being italic (when adding multiple icons to one material-icon container) */ } .material-icons > span { position: absolute; top: 0; left: -0.5px; right: 0.5px; line-height: 24px; font-size: 12px; text-align: center; color: var(--color-text-text); font-family: 'Roboto', sans-serif; } /* #endregion */ /* #region mark */ /* TODO: remove getHighlightSpan in favor of mark() */ .highlight { background-color: var(--color-accent) !important; color: var(--color-accent-text) !important; } .highlight:not(:empty) { padding: 0 .1em; } mark { background: var(--color-accent) !important; color: var(--color-accent-text) !important; } mark:not(:empty) { padding: 0 0.05em; } /* #endregion */ /* #region striped */ .striped { border-bottom: 1px solid var(--color-stripe-border); } .striped-even { border-top: 1px solid var(--color-stripe-border); } .striped:nth-child(odd) { background: var(--color-header); } .striped-even:nth-child(even) { background: var(--color-header); } /* #endregion */ /* #region labeled */ .labeled:not(:empty)::before { content: attr(data-label); font-weight: bold; } /* #endregion */ .icon-before::before, .icon-after::after { font-family: 'Material Icons'; /* begin .material-icons css*/ font-weight: normal; font-style: normal; font-size: 1.5em; /* modified font-size:24px to 1.5em (icons are pretty small, 1.5 tends to line up with actual font-size) */ line-height: 1; letter-spacing: normal; text-transform: none !important; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; /* end .material-icons css */ } #PageBackgroundImage { position: fixed; z-index: -1; width: 100%; height: 100%; overflow: hidden; top: 0px; left: 0px; } .vertical-spaced { margin-top: 2em; margin-bottom: 2em; } .mobileDivider { display: none; } /*.valid { border-color: var(--color-success) !important; }*/ .invalid { border-color: var(--color-error) !important; } :-ms-input-placeholder { color: gray; } button[disabled], html input[disabled], textarea[disabled] { opacity: .5; } a { text-decoration: underline; } .no-select { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .col-5 { float: left; /* bootstrap doesn't support using 5 columns without nesting divs. I've created this to function as a col-xs-2.4 */ width: 20%; } /* #endregion MISC */ /* #region PLUGINS */ /* #region JSTREE */ /* #region JSTREE context menu */ /* #region jstree context menu material-icons hack */ .jstree-default .jstree-context { background: unset !important; border-radius: unset !important; box-shadow: unset !important; } .material-icons.add::before { content: "add"; } .material-icons.rename::before { content: "edit"; } .material-icons.remove::before { content: "clear"; } .material-icons.edit::before { content: "edit"; } .material-icons.expand-all::before { content: "fullscreen"; } .material-icons.collapse-all::before { content: "minimize"; } .material-icons.inside::before { content: "arrow_back" } .material-icons.after::before { content: "arrow_downward" } .material-icons.enable::before { content: "check"; color: var(--color-success); } .material-icons.disable::before { content: "block"; color: var(--color-error); } .vakata-context li > a > i.material-icons::before { padding: 0 .25em; } .vakata-context li > a { display: flex !important; align-items: center; } .vakata-context.jstree-contextmenu li > a > i:empty { display: inline-block !important; margin-right: 0 !important; width: auto !important; line-height: 1em !important; } .vakata-context li > a > i { width: auto !important; height: auto !important; margin: 0 !important; line-height: 1em !important; } /* #endregion jstree context menu material-icons hack */ .vakata-context.jstree-contextmenu { border-radius: .25em; background: var(--color-container) !important; } .vakata-context li > a:hover, .vakata-context .vakata-context-hover > a { background-color: var(--color-accent) !important; color: var(--color-accent-text) !important; box-shadow: none; text-shadow: none !important; font-weight: normal !important; } .vakata-context li > a > i:empty { display: none !important; } .vakata-context li > a { padding-left: 0 !important; margin-left: 0 !important; color: var(--color-text) !important; font-weight: bold; } /* #endregion JSTREE context menu */ .jstree-default .jstree-search { color: var(--color-accent) !important; font-weight: normal !important; } .jstree-wholerow.jstree-wholerow-clicked { background: var(--color-accent) !important; } .jstree-wholerow.jstree-wholerow-hovered { background: var(--color-accent-75) !important; } .jstree-default .jstree-disabled.jstree-clicked { background: var(--color-accent-75) !important; } .jstree-anchor.jstree-clicked { color: var(--color-accent-text) !important; } .jstree-anchor.jstree-hovered:not(.jstree-disabled) { color: var(--color-accent-text) !important; } .jstree-disabled { cursor: default !important; } /*.jstree-clicked:not(.jstree-disabled) { color: var(--color-accent-text) !important; }*/ jstree a { color: var(--color-text) !important; } /* #endregion JSTREE */ /* #region JQUERYUI */ .ui-state-highlight, .ui-state-active { border-color: var(--color-accent) !important; background: var(--color-accent) !important; color: var(--color-accent-text) !important; } .ui-widget-header { color: var(--color-accent) !important; } .ui-widget-content, .ui-state-default, .ui-widget-content .ui-state-default { color: var(--color-text); } .ui-datepicker-today > a.ui-state-default { background: var(--color-success) !important; border-color: var(--color-success) !important; color: var(--color-success-text) !important; } .ui-datepicker { /* NOTE: previously commented out !important, but its required beacuse jquery is setting "z-index:1" inline... setting to 9999 because that's the z-index for .popup, and the ui-datepicker is appended to end of body. also has to have z-index>3 to show above input-wrapper labels */ z-index: 9999 !important; } .dp-highlight > a.ui-state-default { background: var(--color-accent); /* this is a custom class to highlight selection when selecting between 2 separate dates */ color: var(--color-accent-text); } .ui-datepicker td a { text-align: center !important; } /* #endregion JQUERYUI */ /* #endregion PLUGINS */ /* #region THEME */ html { background-color: var(--color-background); background-image: var(--background-img); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* FIXING MOBILE OVER SCROLL PROBLEM (url bar minimizes and background doesnt cover entire page) */ height: 100%; overflow: hidden; } body { overflow: auto; /* END FIXING MOBILE OVER SCROLL PROBLEM */ /* ios pwa fixes */ /* 06-28-21: re-enabling user select for global website. will need to disable for specific items */ /*-webkit-user-select: none; -webkit-tap-highlight-color: transparent;*/ -webkit-touch-callout: none; font-family: 'Roboto', sans-serif; color: var(--color-text); background: transparent !important; /* new flex spec */ display: flex; flex-direction: column; position: absolute; /* using absolute/100%/100% instead of 100vh for android url bar issue */ height: 100%; width: 100%; z-index: 0; /* NOTE: this is for safari z-index issue. It seems like safari doesn't default z-index to 0, modal popups were totally screwed up on safari until i set body z-index to 0 */ } form, .container, .content-container { display: flex; flex-direction: column; flex-grow: 100; flex-basis: 0; /* these 0s weren't necessary before... randomly things started growing outside flex container causing scrolling in the body instead of container */ height: 0; /* by telling it to start at 0 and get height from flex-grow, it forces it to stay within container */ } .content-container { max-width: 100vw; } .container { padding: 0; width: 100% !important; max-width: 1480px; /*UPDATE 05-03-21: trying a wider container size 1170px;*/ -webkit-box-shadow: 0px 0px 15px 5px #00000024; box-shadow: 0px 0px 15px 5px #00000024; } a, #userIcon { color: var(--color-accent); } a[href] { cursor: pointer; } a[href]:not(.btn-icon):hover { color: var(--color-accent-75); } a[href].btn-icon:hover { opacity: 0.75; } /* NOTE: normally button:hover gets highligted with transparent ::after content, but anchors don't support ::after... Best global solution for hovering link icon buttons is to change opacity since theres a 99% chance its going to be accent/red/green background against a white background, hovering will lighten it up */ a[href]:not(.jstree-anchor):focus { /* getting rid of that god-awful black border that came with chromium update... */ outline: none; font-weight: bold !important; } .content-container { color: var(--color-text); background-color: var(--color-container); /*border-radius: 5px;*/ } .selected-tab, .selected-dialog-tab, a.tb_button.selected-tab { background: var(--color-accent) !important; color: var(--color-accent-text) !important; opacity: 1 !important; } .selected { border-color: var(--color-accent) !important; } .success { color: var(--color-success); } .warning { color: var(--color-warning); } .auxiliary { color: var(--color-auxiliary); } .error, .negative { color: var(--color-error); } /* #endregion THEME */ /* #region titlebar input / dropdown theme */ #pageHeader .input-wrapper { border: 1px solid var(--color-menu-text) !important; color: var(--color-menu-text) !important; background: transparent !important; font-size: 0.75em; } #pageHeader input::placeholder { color: var(--color-menu-text) !important; opacity: 0.65; } #pageHeader .dropdown-wrapper:not(.loading):not(.open) .value-container:after { border-top-color: var(--color-menu-text); } #pageHeader .dropdown-wrapper:not(.loading).open .value-container:after { border-bottom-color: var(--color-menu-text); } #pageHeader .input-wrapper:not(.error):not(.required):focus-within { box-shadow: 0px 0px 2px 1px var(--color-menu-text); } #pageHeader .dropdown-options { box-shadow: 0px 0px 2px 1px var(--color-menu-text); } #pageHeader .dropdown-wrapper .btn-clear { background-color: var(--color-menu); } #pageHeader .dropdown-options { background: var(--color-menu); border-color: var(--color-menu-text); color: var(--color-menu-text); } #pageHeader .dropdown-options > div { color: var(--color-menu-text); } #pageHeader .dropdown-options > div:nth-child(odd) { background: var(--color-menu-stripe); } #pageHeader .dropdown-options > div.option.selected { background: var(--color-accent); color: var(--color-accent-text); } @media screen and (max-device-width: 500px) { #pageHeader .input-wrapper { font-size: 1em; } } /* #endregion */ /* #region Impersonation Toolbar */ #impersonation_toolbar { font-size: 1.25em; height: 3em; background: var(--color-accent); color: var(--color-accent-text); width: 100%; max-width: 100vw; z-index: 500; flex-shrink: 0; padding: 0 .5em; z-index: 999; } #impersonation_toolbar .input-wrapper { margin-bottom: 0; } /* #endregion Impersonation Toolbar */ /* #region MEDIA QUERIES */ /* everything bigger than ipad (1024px wide in landscape) */ @media only screen and (min-device-width: 1025px), (min-device-width: 1025x) and (orientation:landscape) { /* making .mobile containers and fullscreen popups simulate mobile width on everything except tablets beecause the small width looks weird on tablets */ .container.mobile { max-width: 500px; } /* new container sizes for limiting container width, because some content looks bad when there's too much width/white-space stretching out the columns */ .container.small { max-width: 726px; } .container.medium { max-width: 1024px; } .container.large { max-width: 1200px; } } /* tablets */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { body { font-size: 1.5em; } .content-container { border-radius: 0; } } @media only screen and (max-device-width: 480px) { .input-wrapper { font-size: 2rem; } } /* phones (bootstrap xs) */ @media only screen and (max-device-width : 767px) { /* TODO: REMOVE .inset-label CLASS IN FAVOR OF <label>*/ .input-wrapper label, .input-wrapper .inset-label { font-size: .75em; } #impersonation_toolbar .input-wrapper { display: flex; flex-grow: 100; } .tb_button span { margin: 0; display: block; } #ui-datepicker-div { font-size: 1.25em !important; } .mobileDivider { display: block; border-top: 0.063em solid #8c8b8b; margin: 1.25em 0; } #homePageList li { width: 33.33333%; } .content-container { border-radius: 0; } .input-wrapper .material-icons { font-size: 1.5em; } } /* tablets (bootstrap sm) @media only screen and (min-device-width : 768px) and (max-device-width : 991px) {} */ /* small laptops (boostrap md) @media only screen and (min-device-width : 992px) and (max-device-width : 1199px) {} */ /* #endregion MEDIA QUERIES */ /* #region ATTACHMENT VIEWER */ .attch-img { flex-grow: 100; background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; } /* #endregion ATTACHMENT VIEWER */ /* #region flex */ .flex-wrap { display: flex; flex-wrap: wrap; } .flex-column { display: flex; flex-direction: column; } @media screen and (max-width: 500px) { .flex-column-mobile { display: flex; flex-direction: column; } } .flex-row { display: flex; flex-direction: row; } .flex-fill { flex-grow: 100; } .flex-grow { flex-grow: 1; } .no-shrink { flex-shrink: 0; } .shrink { flex-shrink: 1; min-width: 0; } .center-self { align-self: center; } .center, .right-center, .full-center { display: flex; align-items: center; } .flex-start { justify-content: flex-start; align-items: flex-start; } .flex-end { justify-content: flex-end; } .full-center { justify-content: center; /* this will cause content to be centered horizontally and vertically */ } .right-center { justify-content: flex-end; /* this will cause content to be centered in flex-direction and right-aligned in the other direction */ } .align-end { align-items: flex-end; } .justify-end { display: flex; justify-content: flex-end; } .justify-center { display: flex; justify-content: center; } .horiz-center { display: flex; justify-content: center; } .row-center { /* .row-center and .col-center are for center aligning bootstrap columns without having to use blank columns (so you can center a col-md-3 without having to fill in the other 9 spaces somehow) */ text-align: center; } .col-center { display: inline-block; float: none; } .flex-10 { flex: 1 1 10%; } .flex-20 { flex: 1 1 20%; } .flex-25 { flex: 1 1 25%; } .flex-30 { flex: 1 1 30%; } .flex-33 { flex: 1 1 33.3333%; } .flex-35 { flex: 1 1 35%; } .flex-40 { flex: 1 1 40%; } .flex-45 { flex: 1 1 45%; } .flex-50 { flex: 1 1 50%; } .flex-50 { flex: 1 1 55%; } .flex-60 { flex: 1 1 60%; } .flex-65 { flex: 1 1 65%; } .flex-66 { flex: 1 1 66.6666%; } .flex-70 { flex: 1 1 70%; } .flex-75 { flex: 1 1 75%; } .flex-80 { flex: 1 1 80%; } .flex-85 { flex: 1 1 85%; } .flex-90 { flex: 1 1 90%; } .flex-95 { flex: 1 1 95%; } .flex-100 { flex: 1 1 100%; } /* #region shrink */ .flex-shrink-10 { flex: 0 1 10%; } .flex-shrink-20 { flex: 0 1 20%; } .flex-shrink-25 { flex: 0 1 25%; } .flex-shrink-30 { flex: 0 1 30%; } .flex-shrink-33 { flex: 0 1 33.3333%; } .flex-shrink-40 { flex: 0 1 40%; } .flex-shrink-50 { flex: 0 1 50%; } .flex-shrink-60 { flex: 0 1 60%; } .flex-shrink-66 { flex: 0 1 66.6666%; } .flex-shrink-70 { flex: 0 1 70%; } .flex-shrink-75 { flex: 0 1 75%; } .flex-shrink-80 { flex: 0 1 80%; } .flex-shrink-90 { flex: 0 1 90%; } .flex-shrink-100 { flex: 0 1 100%; } /* #endregion */ /* #region grow */ .flex-grow-10 { flex: 1 0 10%; } .flex-grow-20 { flex: 1 0 20%; } .flex-grow-25 { flex: 1 0 25%; } .flex-grow-30 { flex: 1 0 30%; } .flex-grow-33 { flex: 1 0 33.3333%; } .flex-grow-40 { flex: 1 0 40%; } .flex-grow-50 { flex: 1 0 50%; } .flex-grow-60 { flex: 1 0 60%; } .flex-grow-66 { flex: 1 0 66.6666%; } .flex-grow-70 { flex: 1 0 70%; } .flex-grow-75 { flex: 1 0 75%; } .flex-grow-80 { flex: 1 0 80%; } .flex-grow-90 { flex: 1 0 90%; } .flex-grow-100 { flex: 1 0 100%; } /* #endregion */ .space-around { justify-content: space-around; } .space-between { justify-content: space-between; } /* #endregion */ /* #region fit */ .contain { object-fit: contain; } /* #endregion */ /* #region form list */ .forms { background: var(--color-header); padding: 0.5em 1em 1em 1em; width: 100%; } .forms h2 { width: 100%; margin: 0.25em 0 0 0; border-bottom: 1px solid var(--color-text); } .forms h3 { margin: 0 0 0.25em 0; } .forms > div { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em; } .forms .form { position: relative; border: 1px solid var(--color-text); background: var(--color-container); width: 8em; height: 8em; border-radius: 4px; display: flex; flex-direction: column; text-align: center; padding: 1em 0.5em; } .forms .form, .forms .form * { cursor: pointer; } .forms .form i.form-status { position: absolute; top: 2px; left: 4px; font-size: 24px; } .forms .form > i.icon { flex-grow: 1; display: flex; justify-content: center; align-items: center; font-size: 48px; } @media (hover:hover) { .forms .form:hover { background: var(--color-text); color: var(--color-text-text); } } /* #endregion */ /* #region display NOTE: it's important that these display class (specifically hidden) are at the end of the css in order for them to take priority otherwise, a flex-wrapper.hidden would have display:flex because .hidden was at the top of the css and got overriden */ .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 */</label></i></button></label>