muscle-fat

@font-face { font-family: 'novamono'; src: url('/fonts/0/NovaMono-Regular.ttf'); font-style: normal; } @font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Regular.ttf'); font-style: normal; } @font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Italic.ttf'); font-style: italic; } @font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Bold.ttf'); font-weight: bold; } html { font-size: 22px; --color-border: #BA6179; --color-background-light: #FCFCFC; --color-background-light-ev: #FEF6FA; --color-background-dark: #F799CA; --color-text-light: #FCFCFC; --color-text-lessdark: #666; --color-text-dark: #444; --color-text-darker: #111; --color-error: #F44; --color-success: #082; --color-link: #40C0FF; --color-input-shadow: #AAA; --color-blue: #D0FFF8; } body { margin: 0; color: var(--color-text-dark); font-family: ubuntumono, monospace; background: linear-gradient(to right, var(--color-background-dark) 0%, var(--color-background-dark) 30%, var(--color-background-light) 30%, var(--color-background-light) 100%); } #full-wrapper { display: block; } #bg-image { display: block; position: absolute; z-index: -1; min-height: 50%; left: 0; bottom: 0; width: 30%; background-color: rgba(0, 0, 0, 0.1); mask: url('data:image/svg+xml;utf8,') no-repeat; mask-position: center; } /* Resets */ ul { list-style-type: none; padding: 0; margin: 0; } menu, nav { display: block; margin: 0; padding: 0; } p, h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-size: 1rem; font-weight: normal; } p { line-height: 1.4; font-size: 0.9rem; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Icons */ i { background-color: var(--color-text-dark); display: inline-block; width: 1rem; height: 1rem; --svg-login: url('data:image/svg+xml; utf8,'); --svg-logout: url('data:image/svg+xml;utf8,'); --svg-register: url('data:image/svg+xml;utf8,'); --svg-users: url('data:image/svg+xml;utf8,'); --svg-calendar: url('data:image/svg+xml;utf8,'); --svg-calendar-num: url('data:image/svg+xml;utf8,'); --svg-range: url('data:image/svg+xml;utf8,'); --svg-wrench: url('data:image/svg+xml;utf8,'); --svg-meal: url('data:image/svg+xml;utf8,'); --svg-food: url('data:image/svg+xml;utf8,'); --svg-profile: url('data:image/svg+xml;utf8,'); --svg-checkbox: url('data:image/svg+xml;utf8,'); --svg-delete: url('data:image/svg+xml;utf8,'); --svg-search: url('data:image/svg+xml;utf8,'); --svg-close: url('data:image/svg+xml;utf8,'); --svg-edit: url('data:image/svg+xml;utf8,'); --svg-trash: url('data:image/svg+xml;utf8,'); --svg-menu: url('data:image/svg+xml;utf8,'); --svg-eye-hidden: url('data:image/svg+xml;utf8,'); --svg-eye-open: url('data:image/svg+xml;utf8,'); /*--svg-logo2: url('data:image/svg+xml; utf8,'); --svg-logo: url('data:image/svg+xml,<%3Fxml version="1.0"%3F>');*/ --svg-logo: url('data:image/svg+xml,%3Csvg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3ClinearGradient id="svg_4" spreadMethod="pad"%3E%3Cstop id="jq_stop_2233" offset="0" stop-color="%23ffffff"/%3E%3Cstop id="jq_stop_618" offset="1" stop-color="%23000000"/%3E%3C/linearGradient%3E%3ClinearGradient id="svg_10" spreadMethod="pad" x1="1" x2="1"%3E%3Cstop id="jq_stop_2233" offset="0" stop-color="%23ffffff"/%3E%3Cstop id="jq_stop_618" offset="1" stop-color="%23000000"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg class="layer"%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id="svg_11" transform="translate(8) matrix(0.959061, 0, 0, 0.863761, 50.9383, 52.5454)"%3E%3Cg id="svg_21" transform="matrix(1, 0, 0, 1, -8, 22)"%3E%3Cpath d="m302,425.43c0,0 -75,77.47 -182,-167.41c-107,-244.88 181,-185.22 189,-167.41" fill="url(%23svg_4)" fill-opacity="0" id="svg_8" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20"/%3E%3Cpath d="m297.93,416.31c0,0 59.28,77.47 143.85,-167.41c84.57,-244.88 -143.06,-185.22 -149.39,-167.41" fill="url(%23svg_10)" fill-opacity="0" id="svg_9" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20"/%3E%3Cpath d="m261,74.22c-13.69,-6.97 -76.08,-38.34 -73.03,-101.09c3.04,-62.74 109.55,85.98 101.18,113.87" fill="%23000000" fill-opacity="0.01" id="svg_19" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20"/%3E%3Cpath d="m315.82,69.18c12.41,-5.68 68.96,-31.22 66.2,-82.3c-2.76,-51.09 -99.31,70.01 -91.72,92.71" fill="%23000000" fill-opacity="0.01" id="svg_20" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20"/%3E%3C/g%3E%3Crect fill="%23000000" fill-opacity="0.01" height="12" id="svg_31" stroke="%23ffffff" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="20" width="590" x="-26" y="287"/%3E%3Crect fill="%23000000" fill-opacity="0.01" height="4" id="svg_30" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="586" x="-24" y="291"/%3E%3Cg id="svg_25" transform="matrix(1, 0, 0, 1, 0, 0) translate(0, 1) translate(0, 1) matrix(1, 0, 0, 1, 0, 3)"%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_22" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="-21" y="217"/%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_23" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="16" y="217.5"/%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_24" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="53" y="217.5"/%3E%3C/g%3E%3Cg id="svg_26" transform="translate(0, 1) translate(0, 1) translate(0, 1) matrix(0.999848, 0.0174524, -0.0174524, 0.999848, 496.986, 2.69239)"%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_27" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="-21" y="217"/%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_28" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="16" y="217.5"/%3E%3Crect fill="%23000000" fill-opacity="0.01" height="133" id="svg_29" rx="1" ry="1" stroke="%23000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="20" width="14" x="53" y="217.5"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); } i.login { mask: var(--svg-login); } i.logout { mask: var(--svg-logout); } i.register { mask: var(--svg-register); } i.users { mask: var(--svg-users); } i.calendar { mask: var(--svg-calendar); } i.calendar-num { mask: var(--svg-calendar-num); } i.range { mask: var(--svg-range); } i.wrench { mask: var(--svg-wrench); width: 0.9rem; height: 0.9rem; } i.meal { mask: var(--svg-meal); margin-right: 0.1rem; } i.food { mask: var(--svg-food); width: 1.1rem; height: 1.1rem; } i.profile { mask: var(--svg-profile); width: 0.9rem; height: 0.9rem; } i.checkbox { mask: var(--svg-checkbox); } i.delete { mask: var(--svg-delete); } i.search { mask: var(--svg-search); } i.close { mask: var(--svg-close); } i.edit { mask: var(--svg-edit); } i.trash { mask: var(--svg-trash); } i.menu { mask: var(--svg-menu); } i.eye-hidden { mask: var(--svg-eye-hidden); } i.eye-open { mask: var(--svg-eye-open); } i.logo { mask: var(--svg-logo); background-color: #FFF; } /* General */ .inline-block { display: inline-block; margin: 0; } .hidden { display: none; } /* Forms */ form { margin: 0 0 28px 0; padding: 0; } fieldset, .messages { margin: 0; padding: 0; border: none; } .messages:not(:has(p)) { padding: 0; margin: 0; } .messages:not(:has(p)) { padding: 0; margin: 0; } .messages .error { color: var(--color-error); } .messages .error { color: var(--color-error); } .messages p { margin: 0.8rem 0; font-size: 0.75rem; } .messages p:last-child { margin-bottom: 0; } .messages .success { color: var(--color-success); } .form-info { max-width: 540px; padding: 6px 0; font-size: 0.8rem; display: block; color: var(--color-text-dark); } fieldset { margin-top: 1rem; } fieldset:first-child { margin-top: 0; } fieldset .hint { display: none; font-size: 0.75rem; margin: 0.4rem 0; } fieldset .hint.show { display: block; } fieldset .hint.error { color: var(--color-error); } fieldset .hint.success { color: var(--color-success); } fieldset legend { color: var(--color-border); font-weight: normal; font-size: 0.8rem; } input[type="text"], input[type="password"] { scroll-margin-top: 80px; -webkit-appearance: none; padding: 4px 8px; background-color: #FFF; font-size: 1rem; font-family: ubuntumono, monospace; color: var(--color-text-dark); border-radius: 6px; box-shadow: var(--color-input-shadow) 0 0 3px 0 inset; border: 1px solid transparent; } button { font-weight: normal; -webkit-appearance: none; margin: 0; font-size: 1rem; font-family: ubuntumono, monospace; background-color: var(--color-blue); padding: 4px 24px; border-radius: 6px; color: var(--color-text-dark); cursor: pointer; border: 1px solid transparent; box-shadow: var(--color-input-shadow) 0 1px 2px, rgba(0, 0, 0, 0.30) 0 1px 2px; } button:hover { background-color: #E5FFFB; } button:active { border: 1px solid #AAA; } button.green { background-color: #E5FF2E; } button.green:hover { background-color: #F3FF9B; } button.red { background-color: #FFB5B5; } button.red:hover { background-color: #FFC4C4; } button[disabled], button[disabled]:hover, button[disabled]:active { background-color: #CCC; } label { display: block; color: var(--color-border); } .inline-group { margin-top: 0.4rem; } .input-group.inline-block label { font-size: 0.8rem; display: block; margin-bottom: 4px; } .input-group:has(.error) label { color: var(--color-error); } .input-group.full input { width: calc(100% - 18px); } .input-group.full label { display: block; } input.error { border: 1px solid var(--color-error); } /* Header */ header { position: fixed; left: 0; right: 0; background-color: var(--color-background-light); border-bottom: 1px dashed var(--color-background-dark); } h2 { background-color: var(--color-background-dark); font-size: 2rem; line-height: 1; width: 30%; text-align: right; margin: 0; font-family: novamono, monospace; color: var(--color-text-light); height: 45px; } h2 a { display: inline-block; margin-right: 20px; font-size: 1.3rem; position: relative; vertical-align: middle; margin-top: -14px; } header h2 .logo { width: 40px; height: 30px; margin-right: 8px; position: relative; top: 3px; } header a { color: inherit; text-decoration: none; } header a:hover { text-decoration: none; } nav { position: absolute; left: 30%; bottom: 0; padding-left: 12px; } nav a { padding: 0 4px; display: inline-block; line-height: 2rem; } nav a.active { color: var(--color-border); } nav a.active i { background-color: var(--color-border); } nav i { vertical-align: middle; } nav a:hover { color: var(--color-border); } nav a:hover i { background-color: var(--color-border); } #mobile-nav { display: none; } /* Side menu */ menu { position: fixed; left: 0; text-align: right; width: 30%; float: left; padding-top: 20px; color: var(--color-text-dark); } menu h5 { display: inline-block; max-width: 200px; font-size: 1.2rem; line-height: 0.8; margin-right: 20px; margin-top: 20px; } menu h5:first-child { margin-top: 0; } menu i { background-color: var(--color-text-dark); vertical-align: top; } menu a { line-height: 1.2rem; position: relative; display: inline-block; max-width: 220px; color: var(--color-text-light); text-decoration: none; margin-right: 20px; margin-top: 0.2rem; } menu .inactive { display: inline-block; max-width: 200px; margin-right: 20px; margin-top: 0.2rem; } menu a:hover { text-decoration: none; } menu a.active:after { Content: '\00AB'; position: absolute; right: -16px; } menu a:hover:after { Content: '\00AB'; position: absolute; right: -16px; color: var(--color-border); } /* q-checkbox */ .q-checkbox { cursor: pointer; display: inline-block; } .q-checkbox .box { position: relative; vertical-align: middle; display: inline-block; width: 28px; height: 28px; background: #FFF; border-radius: 4px; box-shadow: var(--color-input-shadow) 0 1px 4px 0 inset; border: 1px solid transparent; } .q-checkbox i { width: 34px; height: 34px; position: absolute; top: -4px; left: 0; background-color: var(--color-border); } .q-checkbox:not([checked]) i { display: none; } .q-checkbox .text { vertical-align: middle; } .q-checkbox:hover .box { background-color: #F9F9F9; } /* q-radio */ .q-radio { margin-right: 12px; cursor: pointer; display: inline-block; } .q-radio .box { position: relative; vertical-align: middle; display: inline-block; width: 28px; height: 28px; background: #FFF; border-radius: 50%; box-shadow: var(--color-input-shadow) 0 1px 4px 0 inset; border: 1px solid transparent; } .q-radio i { width: 34px; height: 34px; position: absolute; top: -4px; left: 0; background-color: var(--color-border); } .q-radio:not([checked]) i { display: none; } .q-radio .text { vertical-align: middle; } .q-radio:hover .box { background-color: #F9F9F9; } /* q-search */ .q-search { cursor: pointer; font-size: 0.8rem; padding: 4px 0; display: block; background: #fff; position: relative; width: 100%; border-radius: 6px; box-shadow: 1px 2px 3px var(--color-input-shadow); margin: 6px 0; } .q-search .placeholder { display: block; padding: 4px 12px 4px 12px; color: #888; } .q-search.open { margin: 0; } .q-search.open .search-container { height: 30px; position: relative; } .q-search i.search { width: 28px; height: 28px; position: absolute; left: 6px; top: 2px; } .q-search .search { display: none; height: 100%; position: relative; } .q-search.open i.search { z-index: 135; } .q-search.open .search { display: block; height: 100%; } .q-search .close-button { display: none; z-index: 135; } .q-search .search input[type="text"] { z-index: 134; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; border-radius: 0; border: 1px solid #CCC; padding: 2px 8px 2px 40px; margin: 0; } .q-search .options { display: none; z-index: 133; background: #fff; position: absolute; top: 32px; width: 100%; padding: 6px 0; border-radius: 4px; box-shadow: 0 1px 1px var(--color-input-shadow), 0 2px 2px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; } .q-search.open .options { display: block; } .q-search .option { padding: 4px 8px; } .q-search .option:not(.info):hover { background-color: #F6F6F6; cursor: pointer; } .q-search .option.info { color: #888; } .q-search.open .date { font-size: 0.65rem; color: #666; display: block; } /* Content */ #content { padding-top: 50px; margin-left: 30%; } h1 { color: var(--color-border); font-size: 1.1rem; line-height: 1; text-transform: uppercase; padding: 12px 20px 16px 20px; border-bottom: 1px dashed var(--color-background-dark); } #content-inner { padding: 20px; max-width: 880px; } #profile-follower-list { margin-top: 4px; } #profile-follower-list li { border-top: 1px dashed #CCC; padding: 4px 8px; background-color: #FFFFFF80; } #profile-follower-list li:hover { background-color: #FFFFFFDD; } #profile-follower-list li:last-child { border-bottom: 1px dashed #CCC; } #profile-follower-list i { float: right; width: 1rem; height: 1rem; } #profile-follower-list i:hover { cursor: pointer; background-color: var(--color-background-dark); } #new-food-form .macros { margin-bottom: 20px; } #new-food-form .macros .input-group input { width: 60px; text-align: right; } #new-food-form .macros .input-group { margin: 4px 0 0 0; } #register-form { margin-top: 28px; } .list-row { overflow: hidden; font-size: 0.8rem; background-color: #FFFFFF; margin: 0; padding: 0 8px; border-radius: 4px; } .list-row:nth-of-type(even) { background-color: #FFF; } .list-row:nth-of-type(odd) { background-color: var(--color-background-light-ev); } .list-row:hover { } .list-row span { line-height: 1.8rem; } .list-row .left { display: inline-block; } .list-row .right { float: right; } .list-row .q-checkbox .box { width: 24px; height: 24px; } .list-row .q-checkbox i { width: 28px; height: 28px; } .list-row .macros .macro { display: inline-block; margin-right: 4px; } .list-row .num { display: inline-block; min-width: 40px; text-align: right; } .list-row .suffix { font-size: 0.6rem; margin-left: 2px; color: var(--color-text-dark); } .list-row .date { font-size: 0.7rem; } .list-row .amount input { font-size: 0.8rem; width: 54px; display: inline-block; padding: 2px 4px; vertical-align: middle; text-align: right; } .list-row .name { color: var(--color-text-dark); } .list-row:has(.hide[data-hidden="true"]) .name { color: #CCC; } .list-row .num { color: var(--color-border); } .list-row a i.edit { vertical-align: middle; } .list-row .hide { display: inline-block; cursor: pointer; } .list-row .hide[data-hidden="true"] i { vertical-align: middle; mask: var(--svg-eye-hidden); } .list-row .hide[data-hidden="false"] i { vertical-align: middle; mask: var(--svg-eye-open); } .list-row a:hover i { background-color: var(--color-border); } .list-row .list-row { font-size: 0.8rem; padding: 0; border-radius: 0; } .list-row .list-row:first-child { border-top: 1px dashed #AAA; } .list-row .list-row:last-child { border-bottom: 1px dashed #AAA; margin: 4px; } .list-row .list-row .name { color: var(--color-text-dark); font-size: 0.7rem; } .list-row .list-row .num { font-size: 0.7rem; } .list-row .list-row:nth-of-type(odd) { background-color: #FFF; } .list-row .list-row:nth-of-type(even) { background-color: var(--color-background-light-ev); } .list-row .foods { clear: both; } .list-row .date input { width: 100px; font-size: 0.8rem; } .macro-summary { display: block; margin: 16px 0; padding: 2px 4px; border-radius: 4px; background-color: var(--color-background-dark); } .macro-summary h4 { font-weight: bold; font-size: 0.8rem; color: #FFF; line-height: 0.8rem; padding-bottom: 2px; } .macro-summary .macros { font-size: 0.8rem; background: #FFF; margin: 0 -3px -1px -3px; border-radius: 0 0 4px 4px; padding: 0 4px 2px 4px; } .macro-summary .macro { display: inline-block; margin-left: 16px; } .macro-summary .num { color: var(--color-border); display: inline-block; min-width: 40px; text-align: right; } .macro-summary .suffix { font-size: 0.6rem; margin-left: 2px; } #diets-list .action { float: right; } #diets-list .delete { vertical-align: middle; } #diets-list .action:hover { cursor: pointer; } #diets-list .action:hover .delete { background-color: var(--color-border); } #diets-list input { font-size: 0.8rem; } /* Diet entries */ .year-header { font-size: 1.4rem; font-weight: bold; margin: 0; color: var(--color-border); } .week-header.list-row { line-height: 1rem; margin: 20px -2px 4px -2px; padding: 2px 4px; border-radius: 4px; background-color: var(--color-background-dark); } .week-header.list-row .left { line-height: inherit; } .week-header.list-row .date { font-weight: bold; color: #FFF; font-size: 0.8rem; line-height: inherit; } .week-header.list-row .right { line-height: inherit; padding: 0 8px 0 4px; margin: 0 -2px 0 0; display: block; background: #FFF; border-radius: 4px; } .week-header.list-row .macros { padding: 0 8px; margin-right: 4px; line-height: inherit; } .week-header.list-row .macros .macro { line-height: inherit; } .week-header.list-row .num { font-size: 0.75rem; line-height: inherit; } .week-header.list-row .suffix { line-height: inherit; } .week-header.list-row .weight { padding: 0 8px; line-height: inherit; } .week-header.list-row .weight .num { min-width: 50px; display: inline-block; text-align: right; font-size: 0.75rem; } .calendar.list-row a { color: #AAA; display: block; cursor: pointer; } .calendar.list-row.entry a { color: #666; } .calendar.list-row a { #AAA; } .calendar.list-row a:hover { color: var(--color-link); } .calendar.list-row .date { font-size: 0.75rem; } .calendar.list-row .macros { padding: 0 8px; margin-right: 4px; } .calendar.list-row .macros .num { font-size: 0.75rem; } .calendar.list-row .weight { padding: 0 8px; } .calendar.list-row .weight .num { min-width: 50px; display: inline-block; text-align: right; font-size: 0.75rem; } h3 { color: var(--color-border); } .keyboard { display: none; } /* Controls */ .controls { text-align: center; position: fixed; right: 0; bottom: 0; left: 0; background: #F799CA; border-top: 1px dashed var(--color-background-light); padding: 4px 8px 6px 30%; } .controls button { position: relative; padding-left: 12px; padding-right: 12px; background-color: var(--color-background-light); } .controls button:has(i) { position: relative; padding-left: 48px; padding-right: 12px; } .controls i { position: absolute; left: 0; } .controls i.checkbox { background-color: var(--color-success); top: 0; width: 32px; height: 32px; left: 8px; } .controls i.trash { background-color: var(--color-error); top: -3px; width: 36px; height: 36px; left: 6px; } .controls button.green { background-color: var(--color-background-light); color: #000; } .controls button.red { background-color: var(--color-background-light); color: #000; } .controls button.green:hover { background-color: #CCC; } .controls button.red:hover { background-color: #CCC; } .controls button.green:hover { background-color: var(--color-background-light); } .controls button.red:hover { background-color: var(--color-background-light); } /* Mobile */ @media screen and (max-width: 800px) { /* q-numpad */ .keyboard { display: block; border-top: 1px solid #999; position: fixed; bottom: 0; width: 100%; background: #DDD; } .keyboard button[key] { cursor: pointer; border-radius: 4px; background: #F2F2F2; width: 31.33%; float: left; line-height: 38px; text-align: center; margin: 1%; } body.keyboard-open { padding-bottom: 294px; } @keyframes prevent_ios_focus_scroll { 0% { opacity: 0; } 100% { opacity: 1; } } .input--focused { animation: prevent_ios_focus_scroll 0.01s; } body { background: var(--color-background-light); } body.no-scroll { } #bg-image { background: transparent; } header { width: 100%; z-index: 500; height: 40px; margin: 0; } header h2 { font-size: 1rem; text-align: left; height: 100%; display: block; width: 100%; background-color: var(--color-background-dark); } header h2 a { margin: 0 0 0 58px; font-size: 1rem; line-height: 40px; margin: 0; padding-left: 52px; } header h2 .logo { width: 40px; height: 30px; position: absolute; left: 4px; margin: 0; } #mobile-nav { display: block; width: 40px; cursor: pointer; line-height: 40px; text-align: center; height: 40px; right: 0; z-index: 500; position: absolute; } #mobile-nav i { vertical-align: middle; background-color: var(--color-text-light); } header:has(#mobile-nav.open) nav { display: block; } body:has(#mobile-nav.open) { overflow: hidden; } nav { display: none; position: fixed; left: 0; right: 0; top: 40px; border-top: 1px dashed var(--color-border); background-color: #F799CA33; } nav .wrap { overflow-y: scroll; text-align: right; margin-left: calc(100% - 300px); padding: 0 0 0 4px; height: 100%; background: linear-gradient(to left, var(--color-background-light) 0%, var(--color-background-light) 98%, var(--color-background-dark) 98%, transparent 100%); } nav .icon-wrap { float: right; width: 32px; text-align: center; margin-left: 8px; } nav a { line-height: 1.8rem; display: block; color: var(--color-text-lessdark); border-bottom: 1px dashed var(--color-background-dark); } nav a.active { background-color: #F799CA22; } nav i { background-color: var(--color-text-lessdark); } header:has(#mobile-nav.open) #mobile-nav-close { position: absolute; left: 0; height: 100%; width: calc(100% - 300px + 10%); } menu { position: static; width: auto; float: none; padding-top: 4px; padding-bottom: 4px; margin-top: 0; border-bottom: 1px dashed var(--color-background-dark); } menu a { display: block; line-height: 1.4rem; margin: 4px 40px 4px 0; border: none; font-size: 0.9rem; max-width: none; } menu a.active { background-color: transparent; } menu br { display: none; } menu h5 { display: none; } #content { padding-top: 40px; margin: 0; padding-bottom: 60px; } #content-inner { padding: 16px 8px; } .q-search .placeholder { font-size: 0.8rem; } .q-search.open { position: absolute; top: 38px; right: 0; bottom: 0; left: 0; } .q-search.open .options { overflow: scroll; position: fixed; top: 70px; bottom: 0; max-height: inherit; padding: 0; overscroll-behavior-y: none; } .q-search.open .close-button { display: block; position: absolute; top: 6px; right: 0; cursor: pointer; padding: 0 6px; } .q-search.open i.close { display: block; width: 20px; height: 20px; } .q-search.open .option { font-size: 0.8rem; padding: 8px 8px; border-bottom: 1px dotted var(--color-border); } h1 { font-size: 0.8rem; border: none; padding: 8px; border-bottom: 1px dashed var(--color-background-dark); } h3 { margin-top: 1rem; font-size: 1rem; border: none; } h4 { font-size: 1rem; color: #FFF; } p { font-size: 0.8rem; line-height: 1.2; margin-top: 6px; } label { font-size: 1rem; } .year-header { font-size: 0.8rem; } .month-header { font-size: 0.8rem; border-bottom: 1px solid var(--color-border); } fieldset { margin-top: 0.5rem; } .list-row { margin: 0; position: relative; padding: 8px 2px; } .list-row.entry { padding: 4px 2px; } .list-row span { line-height: 1rem; } .list-row .num { font-size: 0.7rem; min-width: 40px; } .list-row .left { line-height: 1rem; } .list-row .date { line-height: 1rem; font-weight: bold; } .list-row .date::after { content: "\A"; white-space: pre-wrap; } .list-row .right { float: none; display: block; margin-bottom: 0; } .list-row .macros { display: block; border: none; padding: 0; } .list-row .macros .macro { margin: 0 4px 0 0; line-height: 1rem; } .list-row .macros .suffix { font-size: 0.6rem; } .list-row .weight { position: absolute; top: 4px; right: 0; border: none; } .list-row .meal .right { float: right; } .list-row .meal .amount input { width: 26px; } .list-row .name { font-size: 0.75rem; } .list-row .list-row { padding-left: 12px; } .list-row:has(.hide) { padding-right: 26px; } .list-row .hide { position: absolute; right: 2px; top: calc(50% - 11px); } .list-row:has(i.edit) { padding-right: 26px; } .list-row a:has(i.edit) { position: absolute; right: 2px; top: calc(50% - 11px); } .inline-block { display: block; } .macro-summary { margin: 0.5rem -2px 0 -2px; } .week-header.list-row .macros { margin-left: -2px; } .week-header.list-row .weight { margin: -2px 2px 0 0; } .week-header.list-row .weight .suffix { color: #FFF; } .week-header.list-row .weight .num { color: #FFF; } .week-header.list-row .right { margin: 0 -2px 0 -2px; border-radius: 4px; } input[type="text"], input[type="password"] { font-size: 0.9rem; padding: 8px; width: 100%; box-sizing: border-box; } /* Controls */ .controls { left: 0; padding-left: 4px; } .controls button { font-size: 0.75rem; } .controls i.checkbox { top: -4px; width: 32px; height: 32px; left: 8px; } .controls i.trash { top: -5px; width: 36px; height: 36px; } }