fortune-http/lib/page.css

HTTP implementation for Fortune.js.

 /* reset */
* { margin: 0; padding: 0; border: none; box-sizing: border-box; }

/* page */
html, body { height: 100% }
body, input, textarea { font-size: 16px; }
body { line-height: 1.5em; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
a { text-decoration: inherit; }
code { font-size: calc(1em * 7 / 8); }
input[id^="toggle-"] { display: none; }
input[id^="toggle-"] ~ form, input[id^="toggle-"] ~ label.overlay { display: none; }
input[id^="toggle-"]:checked ~ form, input[id^="toggle-"]:checked ~ label.overlay { display: block; }
input:focus, textarea:focus { outline: none; }

/* common type */
body, input, textarea, .records .message, .empty-message, .error-message, label[class^="label-"], form.record-form { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.media-type, .records, .definition-name, .definition-link { font-family: monospace; }

/* basic layout */
header.top { padding: calc(1.5em / 2); }
header.top a, .token-status { color: inherit; opacity: 0.5; }
.breadcrumbs, .token-status { font-size: calc(1em * 7 / 8); line-height: calc(1.5em / (7 / 8)); }
.breadcrumbs { float: left; margin-left: calc(1.5em * (3 / 2) / (7 / 8)); }
.breadcrumb { display: inline-block; }
.breadcrumb:nth-of-type(2) { text-transform: capitalize; }
.breadcrumb::after { content: '➔'; margin: 0 6px; }
.breadcrumb:last-of-type::after { display: none; }
.token-status { float: right; }
.container { min-height: 100%; position: relative; }
.table-wrapper { overflow: auto; }
header.page { padding: calc(1.5em / 2); position: relative; }
header.page > h1 { font-size: calc(1em * 5 / 4); text-transform: capitalize; }
header.page > h1 a { color: inherit; }
header.page > h1 a.record-type-link { text-transform: capitalize; display: inline-block; font-weight: 300; }
header.page > h1 a.record-type-link::after { content: '/'; margin: 0 calc(1.5em / 4); opacity: 0.25; }
header.page > h1 a.record-type-link:last-of-type::after { display: none; }
header.page > h1 .tagline { font-size: calc(1em * (3 / 4) / (5 / 4)); font-weight: normal; text-transform: none; opacity: 0.25; margin-left: 8px; position: absolute; }
header.page > h1 .label-create { font-size: calc(1em * (7 / 8) / (5 / 4)); font-weight: normal; float: right; z-index: 155; }
label[class^="label-"] { font-size: calc(1em * (7 / 8)); border: 1px transparent solid; border-radius: 4px; padding: 1px 6px; margin: -2px 0; cursor: pointer; position: relative; }

/* side menu */
#toggle-aside:not(:checked) ~ *:not(aside) { margin-left: calc(1.5em * 9); }
#toggle-aside:checked ~ *:not(aside) { margin-left: 6px; }
#toggle-aside:checked ~ aside { margin-left: calc(1.5em * 9 * -1 + 6px); }
#toggle-aside:checked ~ aside::before { left: calc(1.5em * 9 * -1 + 6px); }
aside ~ * { position: relative; left: 0; }
aside, aside::before, aside ~ * { transition: margin-left 0.2s ease, left 0.2s ease; }
aside { width: calc(1.5em * 9); min-height: 100%; position: absolute; top: 0; left: 0; margin-left: 0; z-index: 50; }
aside::before { height: 100%; width: calc(1.5em * 9); position: fixed; top: 0; left: 0; content: ' '; display: block; }
aside > label { position: absolute; top: 8px; left: calc(1.5em * 9); display: block; width: calc(1.5em * 3 / 2); height: calc(1.5em * 2 - 8px * 2); border-radius: 0 4px 4px 0; padding: calc(1.5em / 2 - 8px) 0 0 calc(1.5em / 2); cursor: pointer; }
aside > label::before { content: '⇤'; opacity: 0.5; }
#toggle-aside:checked ~ aside > label::before { content: '⇥'; }
aside > header { height: calc(1.5em * 4); position: relative; }
aside .logo { position: absolute; top: calc(1.5em / 2); left: calc(1.5em / 2); width: 1.5em; height: 1.5em; }
aside .side-title { position: absolute; bottom: calc(1.5em / 2); left: calc(1.5em / 2); font-weight: inherit; }
aside .content { position: sticky; top: 0; }

/* record form */
form.record-form { position: absolute; top: calc(1.5em * 2 - 5px); right: calc(1.5em / 2); width: calc(1.5em * 13); z-index: 200; text-align: left; }
form.record-form::before { content: ' '; display: block; position: absolute; bottom: calc(100% - 10px); right: 1.5em; width: 0; height: 0; border-style: solid; border-width: 0 5px 9px 5px; }
form.record-form .inputs { padding: calc(1.5em / 2) 1.5em; max-height: calc(1.5em * 15); overflow: auto; border-bottom: 1px transparent solid; border-radius: 4px 4px 0 0; margin-top: 10px; }
form.record-form > div:last-of-type { border-radius: 0 0 4px 4px; padding: 1.5em; }
.radio-group input[type="radio"] { display: none; }
.radio-group label { border: 1px transparent solid; display: inline-block; overflow: hidden; margin-bottom: calc(1.5em / -4); cursor: pointer; }
.radio-group label span { display: block; border-radius: 3px; margin: 3px; padding: 0 8px; font-size: calc(1em * 3 / 4); border: 1px transparent solid; }
.radio-group label input:not(:checked) + span { opacity: 0.5; }
.radio-group label.true { border-radius: 4px 0 0 4px; border-right: none; }
.radio-group label.false { border-radius: 0 4px 4px 0; border-left: none; }
.radio-group label.null { border-radius: 4px; margin-left: 6px; }
.submit-label input[type="submit"] { display: none; }
.submit-label { display: block; border-radius: 4px; padding: calc(1.5em / 3) 0; text-align: center; cursor: pointer; text-transform: capitalize; }
.submit-label span { font-size: calc(1em * 7 / 8); font-weight: bold; }
label.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; }

/* record types */
.record-type, .query-group { padding: calc(1.5em / 2); }
.type-header, .query-header { font-size: calc(1em * 7 / 8); font-weight: bold; text-transform: capitalize; margin-bottom: calc(1.5em / 2 / (7 / 8)); padding-bottom: calc(1.5em / 2 / (7 / 8) - 1px); border-bottom: 1px transparent solid; display: block; }
.query-header { text-transform: none; }
.record-type .field { font-size: calc(1em * 7 / 8); display: block; opacity: 0.75; }
.record-type .field:hover { opacity: 1; }

/* side query */
aside form { padding-bottom: 1.5em; }
.input-title { font-size: calc(1em * 3 / 4); font-weight: inherit; opacity: 0.5; }
.input-group { margin-bottom: calc(1.5em / 2); display: block; }
.input-group input, .input-group textarea { display: block; height: calc(1.5em * 3 / 2 / (3 / 4)); background: none; border-bottom: 1px transparent solid; width: 100%; font-size: calc(1em * 3 / 4); margin-top: calc(1.5em * -1 / 4 / (3 / 4)); }
.input-group input[type="file"] { border-bottom: 0; margin-top: 0.25em; }
.input-group textarea { padding: calc(1.5em / 2) 0; height: calc(1.5em * 2); min-height: calc(1.5em * 2); max-height: calc(1.5em * 10); min-width: 100%; max-width: 100%; }
aside form input[type="submit"] { display: none; }
aside form .submit { font-size: calc(1em * 7 / 8); border-radius: 4px; padding: calc(1.5em / 3 / (7 / 8)) 0; text-align: center; font-weight: bold; display: block; width: calc(100% - 1.5em * 3 / (7 / 8)); margin: 0 calc(1.5em * 3 / 2 / (7 / 8)); cursor: pointer; }

/* documentation, table layout */
.documentation { padding-bottom: calc(1.5em / 2); }
.index-tabs { padding: calc(1.5em / 2); padding-bottom: calc(1.5em / 2 - 1px); border-bottom: 1px transparent solid; margin-bottom: calc(1.5em / 2); }
.index-tabs > div { display: none; font-size: calc(1em * 7 / 8); margin: -1px calc(1.5em / -2 / (7 / 8)) calc(1.5em / -2 / (7 / 8)); padding: calc(1.5em / 2 / (7 / 8)); border-top: 1px transparent solid; }
.index-tabs input[type="radio"] { display: none; }
.index-tabs label { cursor: pointer; padding: calc(1.5em / 4 / (7 / 8) - 1px) 6px; margin: 0 10px 0 -6px; border-radius: 4px 4px 0 0; font-size: calc(1em * 7 / 8); font-weight: 700; border: 1px transparent solid; display: inline-block; opacity: 0.75; }
.index-tabs .description.empty { font-style: italic; }
.index-tabs #description:checked ~ .description, .index-tabs #media-types:checked ~ .media-types { display: block; }
.index-tabs #description:checked ~ .description-label, .index-tabs #media-types:checked ~ .media-types-label { opacity: 1; }
.media-type { font-size: calc(1em * 7 / 8); border-radius: 4px; border: 1px transparent solid; padding: 2px 6px; margin: 3px 6px 3px 0; display: inline-block; }
.definitions, .records { display: table; width: 100%; position: relative; }
.definitions h4 { font-size: calc(1em * 3 / 4); text-transform: uppercase; letter-spacing: 1px; }
.definition, .row, .definitions header, .records header { display: table-row; }
.definitions header, .records header { position: sticky; top: 0; z-index: 100; }
.definition-name, .definition-link { font-size: calc(1em * 7 / 8); }
.definition-name { font-weight: inherit; }
.definition-link { font-weight: bold; text-transform: capitalize; }
.definition > div, .row > div, .definitions header > div, .records header > div { padding: calc(1.5em / 2); padding-bottom: calc(1.5em / 2 - 1px); display: table-cell; border-bottom: 1px transparent solid; }
.definition > div:nth-of-type(1), .definitions header > div:nth-of-type(1), .row > div:nth-of-type(1), .records header > div:nth-of-type(1) { width: calc(1.5em * 3 / 2); padding-right: 0; }
.definition > div:nth-of-type(2), .definitions header > div:nth-of-type(2) { width: calc(1.5em * 8); }
.definition > div:nth-of-type(3), .definitions header > div:nth-of-type(3) { width: calc(1.5em * 8); }
.definition > div:nth-of-type(4), .definitions header > div:nth-of-type(4) { width: calc(100% - 1.5em * (8 + 8 + 3 / 2)); min-width: calc(1.5em * 16); }
.definition-description.missing { opacity: 0.5; font-style: italic; }
.tag { font-size: calc(1em * 7 / 8); padding: 0 4px; border: 1px transparent solid; border-radius: 4px; margin: 2px 6px 2px 0; display: inline-block; }
.tag-link { text-transform: capitalize; }

/* records */
.records-container:first-of-type .records header > div { border-bottom-color: transparent !important; }
.records-container .table-wrapper { padding-bottom: calc(1.5em * (15 + 5)); margin-bottom: calc(1.5em * (15 + 5 - 3 / 2) * -1); }
.records header > div, .row > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.records header a { margin-left: 6px; opacity: 0.5; }
.row span, .row a { font-size: calc(1em * 7 / 8); }
.value.empty span { opacity: 0.25; }
.value.buffer, .value.date, .value.boolean, .value.object, .value.array { font-style: italic; }
.value.buffer, .value.object { opacity: 0.5; }
.row > div:last-of-type, .records header > div:last-of-type { text-align: right; overflow: visible; }
.row input[id^="toggle-"]:checked ~ label.label-update { z-index: 200; }
.records header > div:nth-of-type(1) { padding-right: calc(1.5em / 2); }
.records header > div:nth-of-type(1) span, .records header > div:last-of-type span { opacity: 0.25; }
.records header > div:nth-of-type(2) { text-transform: uppercase; }
.records h4, .records header a { font-size: calc(1em * 3 / 4); display: inline; }
.empty-message, .error-message { font-size: calc(1em * 7 / 8); padding: calc(1.5em / 2 / (7 / 8)); }
.empty-message ~ *, .error-message ~ * { display: none !important; }
.records .message { position: absolute; top: calc(1.5em * 2); left: 0; width: 100%; padding: calc(1.5em / 2); padding-bottom: calc(1.5em / 2 - 1px); border-bottom: 1px transparent solid; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.records .message span { font-size: calc(1em * 7 / 8); }
.records .message + * > div { padding-top: calc(1.5em * 5 / 2 + 1px); }
.delete-record input[type="submit"] { display: none; }
.delete-record label { cursor: pointer; }
form.record-form.update { position: absolute; top: auto; right: calc(1.5em / 2); }
form.record-form.update::before { right: calc(1.5em - 10px); }
label.overlay.update { z-index: 160; }

/* generic error */
.generic-error { text-align: center; height: 100%; }
.generic-error > div { position: relative; top: 50%; transform: translateY(-50%); width: calc(1.5em * 20); margin: 0 auto; }
.generic-error p { padding: 1.5em 1.5em calc(1.5em * 2); }

/* colors */
input::placeholder, textarea::placeholder { opacity: 0.5; }
body, form.record-form .inputs, form.record-form input, form.record-form input::placeholder, form.record-form textarea, form.record-form textarea::placeholder, .records-container { background-color: #ffffff; color: #353837; }
label.overlay { background-color: #36967b; opacity: 0.125; }
form.record-form input, form.record-form textarea, form.record-form .radio-group label { background: none; border-color: rgba(0, 0, 0, 0.125); }
aside, aside::before { background-color: #f0f5f3; }
aside, aside .content a, aside form .submit, .submit-label { color: #757c7a; }
aside > label, aside > header, aside > header a { background-color: #276270; color: #ffffff; }
aside form .submit, .submit-label { background-color: #cbd6d1; color: #ffffff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.075); }
a { color: #36967b; }
.row .label-update, .radio-group label input:checked + span { color: #c690db; border-color: #c690db; }
header.top, .documentation header.page, .records-container:first-of-type header.page { background-color: #35717f; color: #ffffff; }
.index-tabs, .index-tabs label { background-color: #f4edf7; }
.index-tabs > div, .index-tabs label { border-color: rgba(0, 0, 0, 0.075); }
.index-tabs #description:checked ~ .description-label, .index-tabs #media-types:checked ~ .media-types-label { border-bottom-color: transparent; }
.records .message { background-color: #faf4fc; color: #c690db; }
.error-message, .empty-message { background-color: #dd8c5d; color: #ffffff; }
.media-type { background-color: rgba(255, 255, 255, 0.4); border-bottom-color: rgba(0, 0, 0, 0.125); }
.definition-link, .definition-name, .index-tabs, .media-type { color: #8b599e; }
.definition, .row, .definitions header, .records header { background-color: #ffffff; }
.records-container:first-of-type .records header { background-color: #ede8ef; color: #7a9b91; }
.records-container:first-of-type .records header a { color: inherit; }
.records-container:first-of-type .records header > div:nth-of-type(2n) { background-color: #f4edf7; }
.definition > div, .row > div, .definitions header > div, .records header > div, form.record-form .inputs { border-color: #f4f4f2; }
.definition:nth-of-type(2n - 1), .row:nth-of-type(2n - 1), form.record-form > div:last-of-type { background-color: #f9fcfb; }
form.record-form::before { border-color: transparent transparent #ffffff transparent; }
.type-header, .query-header { border-color: #d5e2dd; }
.input-group input, .input-group input::placeholder, .input-group textarea, .input-group textarea::placeholder { border-color: rgba(0, 0, 0, 0.0375); color: #353837; }
.delete-record, .generic-error h1 { color: #dd8c5d; }
header.page > h1 .label-create { color: #71bca7; border-color: #71bca7; }
.tag { background-color: #f0f5f3; border-bottom-color: rgba(0, 0, 0, 0.075); }
.tag-type { background-color: #f5eff7; }

/* clearfix */
header.top::after, header.page::after { content: ' '; display: block; clear: both; }

/* disable select */
aside form .submit, .submit-label, label[class^="label-"], .records header > div:first-of-type, .records header > div:last-of-type, .records header a, .value.empty, form.delete-record { user-select: none; }

/* responsive */
@media (max-width: 640px) {
#toggle-aside:checked ~ *:not(aside) { margin-left: 0; left: calc(1.5em * 9); }
#toggle-aside:checked ~ aside, #toggle-aside:not(:checked) ~ *:not(aside) { margin-left: 0; }
#toggle-aside:checked ~ aside::before { left: 0; }
#toggle-aside:not(:checked) ~ aside { margin-left: calc(1.5em * 9 * -1); }
#toggle-aside:not(:checked) ~ aside::before { left: calc(1.5em * 9 * -1); }
aside > label::before { content: '⇥'; }
#toggle-aside:checked ~ aside > label::before { content: '⇤'; }
form.record-form { width: calc(100% - 1.5em); }
form.record-form.update { width: calc(1.5em * 11); }
.definitions, .definition, .definition > div { display: block; }
.definitions header > div:not(:first-of-type), .definition > div:nth-of-type(1) { display: none; }
.definitions header > div:nth-of-type(1) { width: auto; display: block; }
.definition > div:nth-of-type(2) { padding-right: 0; }
.definition > div:nth-of-type(2), .definition > div:nth-of-type(3) { float: left; border: none; }
.definition > div:nth-of-type(2), .definition > div:nth-of-type(3), .definition > div:nth-of-type(4) { width: auto; }
.definition > div:nth-of-type(4) { clear: both; padding-top: 0; padding-bottom: 1.5em; }
.tag { margin-top: 0; margin-bottom: 0; }
}