leilukin-tumbleblog/admin/stylesheets/all.css

/* Group: Fonts */

@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans webfont';
    src: url('../../fonts/OpenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Cousine webfont';
    src: url('../../fonts/Cousine-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cousine webfont';
    src: url('../../fonts/Cousine-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Cousine webfont';
    src: url('../../fonts/Cousine-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Cousine webfont';
    src: url('../../fonts/Cousine-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/* Group: Reset */

html, body, div, dl, dt, dd, ul, ol, li, p,
h1, h2, h3, h4, h5, h6, img, pre, code,
form, fieldset, input, select, svg, textarea,
table, tbody, tr, th, td, legend, caption,
blockquote, aside, figure, figcaption {
    margin: 0em;
    padding: 0em;
    border: 0em;
}
html {
    font-size: 16px;
}
table {
    border-collapse: collapse;
    border-spacing: 0em;
}
ul {
    margin-bottom: 1rem;
    list-style: none;
}
ol {
    margin-bottom: 1rem;
    margin-inline-start: 2rem;
    list-style: decimal outside;
}

/* Group: Core */

:root {
    color-scheme: light dark;
    --chyrp-pure-white: #ffffff;
    --chyrp-pure-black: #000000;
    --chyrp-inky-black: #1f1f23;
    --chyrp-summer-grey: #fbfbfb;
    --chyrp-english-grey: #efefef;
    --chyrp-welsh-grey: #dfdfdf;
    --chyrp-irish-grey: #cfcfcf;
    --chyrp-scottish-grey: #afafaf;
    --chyrp-winter-grey: #656565;
    --chyrp-strong-yellow: #ffdd00;
    --chyrp-strong-orange: #ff7f00;
    --chyrp-strong-red: #c11600;
    --chyrp-strong-green: #108600;
    --chyrp-strong-blue: #1e57ba;
    --chyrp-strong-purple: #ba1eba;
    --chyrp-light-yellow: #fffde6;
    --chyrp-light-red: #faebe4;
    --chyrp-light-green: #ebfae4;
    --chyrp-light-blue: #f2fbff;
    --chyrp-light-purple: #fae4fa;
    --chyrp-medium-yellow: #fffbcc;
    --chyrp-medium-red: #fcddcf;
    --chyrp-medium-green: #daf1d0;
    --chyrp-medium-blue: #e1f2fa;
    --chyrp-medium-purple: #f6d5f6;
    --chyrp-border-yellow: #e5d7a1;
    --chyrp-border-red: #d6bdb5;
    --chyrp-border-green: #bdd6b5;
    --chyrp-border-blue: #b8cdd9;
    --chyrp-border-purple: #d6b5d6;
}
*::selection {
    color: var(--chyrp-inky-black);
    background-color: var(--chyrp-strong-yellow);
}
body {
    font-family: "Open Sans webfont", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--chyrp-inky-black);
    tab-size: 4;
    background-color: var(--chyrp-english-grey);
    min-width: 320px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    margin: 0rem 0rem 1rem 0rem;
}
h1 {
    font-size: 2em;
}
#content h1, h2 {
    font-size: 1.5em;
}
h3, h4, h5, h6 {
    font-size: 1em;
    font-weight: 600;
}
sup, sub {
    line-height: 1;
    font-size: 0.75em;
}
em, dfn, cite, var {
    font: inherit;
    font-style: italic;
}
strong {
    font: inherit;
    font-weight: bold;
}
address {
    font: inherit;
}
small, .small {
    font-size: 0.75em;
}
mark {
    color: var(--chyrp-inky-black);
    background-color: var(--chyrp-strong-yellow);
}
del {
    font: inherit;
    text-decoration: line-through;
}
ins {
    font: inherit;
    color: var(--chyrp-inky-black);
    background-color: var(--chyrp-medium-green);
}
figure, blockquote {
    margin-bottom: 1rem;
    font: inherit;
    font-size: 1rem;
}
blockquote {
    font-style: italic;
}
figcaption {
    font-size: 0.75em;
    margin: 0rem;
}
blockquote em {
    font-style: normal;
}
p {
    margin-bottom: 1rem;
}
a:link,
a:visited {
    color: var(--chyrp-inky-black);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}
a:focus {
    outline: var(--chyrp-strong-orange) dashed 2px;
    outline-offset: 0px;
}
a:hover,
a:focus,
a:active {
    color: var(--chyrp-strong-blue);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}
*:where(form, table) + h1,
*:where(form, table) + h2,
*:where(form, table) + h3,
*:where(form, table) + h4,
*:where(form, table) + h5,
*:where(form, table) + h6 {
    margin-top: 1rem;
}

/* Group: Header */

#header {
    background-color: var(--chyrp-inky-black);
    padding: 2rem 0rem 3rem 0rem;
    color: var(--chyrp-english-grey);
    text-align: center;
    position: relative;
}
#header h1 {
    margin: 0rem 2rem 2rem 2rem;
}
#header h1 a {
    color: var(--chyrp-pure-white);
    text-decoration: none;
}
#header #navigation {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    column-gap: 4px;
    bottom: 0em;
    left: 4rem;
    right: 4rem;
    margin: 0rem;
}
#header #navigation li {
    display: block;
    flex: 25%;
    min-width: 4rem;
}
#header #navigation li a {
    box-sizing: border-box;
    display: block;
    margin: 0rem;
    padding: 0rem 1rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    border-top-left-radius: 0.75em;
    border-top-right-radius: 0.75em;
}
#header #navigation li a:link,
#header #navigation li a:visited {
    background-color: var(--chyrp-irish-grey);
}
#header #navigation li.selected a:link,
#header #navigation li.selected a:visited,
#header #navigation li a:hover,
#header #navigation li a:focus {
    outline: none;
    background-color: var(--chyrp-english-grey);
}

/* Group: Sub-Navigation */

#sub_nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    column-gap: 4px;
    margin: 4rem 4rem 0rem 4rem;
    overflow: hidden;
    border-bottom: 1px solid var(--chyrp-scottish-grey);
}
#sub_nav li {
    display: block;
    height: 3rem;
    text-align: center;
    flex: fit-content;
    min-width: 4rem;
}
#sub_nav li a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-decoration: none;
    font-size: 0.75em;
    line-height: 3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0rem;
    padding: 0rem 1rem 100vh 1rem;
    border: 1px solid var(--chyrp-scottish-grey);
    border-bottom: none;
    border-top-left-radius: 0.75em;
    border-top-right-radius: 0.75em;
}
#sub_nav li a:link,
#sub_nav li a:visited {
    background-color: var(--chyrp-welsh-grey);
}
#sub_nav li.selected a:link,
#sub_nav li.selected a:visited,
#sub_nav li a:hover,
#sub_nav li a:focus {
    outline: none;
    background-color: var(--chyrp-pure-white);
}

/* Group: Content */

#content {
    clear: both;
    background-color: var(--chyrp-pure-white);
    padding: 1rem;
    margin: 0rem 4rem 4rem 4rem;
    border: 1px solid var(--chyrp-scottish-grey);
    border-top: none;
    position: relative;
    overflow: hidden;
}
hr {
    border: none;
    clear: both;
    border-top: 1px solid var(--chyrp-irish-grey);
    margin: 2rem 0rem;
}
aside {
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--chyrp-border-yellow);
    border-radius: 0.25em;
    background-color: var(--chyrp-light-yellow);
}
pre {
    font-family: "Cousine webfont", monospace;
    font-size: 0.85em;
    background-color: var(--chyrp-english-grey);
    margin: 1rem 0rem;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre;
}
code {
    font-family: "Cousine webfont", monospace;
    font-size: 0.85em;
    background-color: var(--chyrp-english-grey);
    padding: 2px 4px 0px 4px;
    border: 1px solid var(--chyrp-irish-grey);
    vertical-align: bottom;
    white-space: break-spaces;
}
pre > code {
    font-size: 0.85rem;
    display: block;
    border: none;
    padding: 0px;
    white-space: inherit;
}
div.pagination {
    text-align: center;
    margin-top: 1rem;
    display: flex;
    flex-flow: row wrap;
    column-gap: 2rem;
    row-gap: 1rem;
    justify-content: center;
}
span.pages {
    display: block;
    flex: 100%;
}
#content > *:first-child {
    margin-top: 0rem;
}
#content > *:last-child {
    margin-bottom: 0rem;
}

/* Group: Extend */

#content ul.extend {
    box-sizing: border-box;
    width: 100%;
}
#content ul.extend > li {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 4em;
    list-style: none;
    padding: 1rem;
    margin: 1rem 0rem 0rem 0rem;
    border-radius: 0.5em;
}
#content ul.extend > li {
    background-color: var(--chyrp-english-grey);
    border: 1px solid var(--chyrp-irish-grey);
}
#content ul#modules_enabled > li,
#content ul#feathers_enabled > li,
#content ul.themes > li.current {
    background-color: var(--chyrp-medium-green);
    border: 1px solid var(--chyrp-border-green);
}
#content ul#modules_enabled > li.error,
#content ul#modules_disabled > li.error  {
    background-color: var(--chyrp-medium-red);
    border: 1px solid var(--chyrp-border-red);
}
li.module ol.module_conflicts_list,
li.module ol.module_dependencies_list {
    margin: 0rem 0rem 1rem 1rem;
}
li.module:not(.error) .module_dependencies_message,
li.module:not(.error) .module_dependencies_list,
li.module:not(.error) .module_conflicts_message,
li.module:not(.error) .module_conflicts_list {
    display: none;
}
li.module div.controls,
li.feather div.controls,
li.theme div.controls {
    text-align: end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--chyrp-irish-grey);
}
ul#modules_enabled div.controls,
ul#feathers_enabled div.controls,
li.theme.current div.controls {
    border-top: 1px solid var(--chyrp-border-green);
}
ul#modules_enabled > li.error div.controls,
ul#modules_disabled > li.error div.controls {
    border-top: 1px solid var(--chyrp-border-red);
}

/* Group: Forms */

label {
    display: inline;
    font-weight: 600;
}
textarea {
    display: block;
    resize: vertical;
    height: calc(10lh + 1rem);
}
select, input {
    display: inline-block;
}
textarea[readonly],
input[readonly],
select[readonly] {
    cursor: not-allowed;
}
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    box-sizing: border-box;
    color: var(--chyrp-inky-black);
    font: inherit;
    font-size: 1.25rem;
    position: relative;
    top: 0.2em;
    width: 1em;
    height: 1em;
    border-radius: 0em;
    border: 1px solid var(--chyrp-irish-grey);
    background-color: var(--chyrp-pure-white);
}
input[type="radio"] {
    border-radius: 50%;
}
select,
textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="range"],
input[type="password"] {
    box-sizing: border-box;
    width: 20ch;
    color: var(--chyrp-inky-black);
    font: inherit;
    font-size: 1.25rem;
    padding: 0.5rem;
    border-radius: 0em;
    border: 1px solid var(--chyrp-irish-grey);
    background-color: var(--chyrp-pure-white);
}
input[type="file"] {
    box-sizing: border-box;
    color: var(--chyrp-inky-black);
    font: inherit;
    font-size: 1.25rem;
    padding: 1rem;
    border-radius: 0em;
    border: 1px solid var(--chyrp-irish-grey);
    background-color: var(--chyrp-pure-white);
}
html[dir="ltr"] select {
    appearance: none;
    padding-right: 1em;
    background-image: url(../images/icons/select.svg);
    background-size: 1rem;
    background-position: center right 0.1em;
    background-repeat: no-repeat;
}
html[dir="rtl"] select {
    appearance: none;
    padding-left: 1em;
    background-image: url(../images/icons/select.svg);
    background-size: 1rem;
    background-position: center left 0.1em;
    background-repeat: no-repeat;
}
input[type="checkbox"]:checked {
    background-image: url(../images/icons/checkbox.svg);
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
}
input[type="radio"]:checked {
    background-image: url(../images/icons/radio.svg);
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
}
input::placeholder {
    color: var(--chyrp-winter-grey);
    opacity: 1;
}
input:invalid,
textarea:invalid {
    border-color: var(--chyrp-strong-orange);
}
select:focus,
textarea:focus,
input[type="checkbox"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="range"]:focus,
input[type="password"]:focus,
input[type="file"]:focus {
    border-color: var(--chyrp-strong-blue);
    outline: var(--chyrp-strong-blue) solid 2px;
    outline-offset: -2px;
}
textarea.error,
input[type="checkbox"].error,
input[type="radio"].error,
input[type="text"].error,
input[type="email"].error,
input[type="url"].error,
input[type="tel"].error,
input[type="date"].error,
input[type="time"].error,
input[type="number"].error,
input[type="range"].error,
input[type="password"].error,
input[type="file"].error {
    background-color: var(--chyrp-light-red);
}
textarea.error:focus,
input[type="checkbox"].error:focus,
input[type="radio"].error:focus,
input[type="text"].error:focus,
input[type="email"].error:focus,
input[type="url"].error:focus,
input[type="tel"].error:focus,
input[type="date"].error:focus,
input[type="time"].error:focus,
input[type="number"].error:focus,
input[type="range"].error:focus,
input[type="password"].error:focus,
input[type="file"].error:focus {
    border: 1px solid var(--chyrp-strong-red);
    outline-color: var(--chyrp-strong-red);
}
input[type="password"].strong {
    background-color: var(--chyrp-light-green);
}
input[type="password"].strong:focus {
    border: 1px solid var(--chyrp-strong-green);
    outline-color: var(--chyrp-strong-green);
}
textarea[readonly]:focus,
input[readonly]:focus,
select[readonly]:focus {
    border-color: var(--chyrp-irish-grey);
    outline-color: var(--chyrp-irish-grey);
}
input.code,
textarea.code {
    font-family: "Cousine webfont", monospace;
    font-style: normal;
}
form.filters label,
form.filters small {
    display: block;
}
form.split h3,
form.split h4,
form.split h5,
form.split h6 {
    margin-inline-start: 40%;
}
form.split label {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    text-align: end;
    padding-inline-end: 1rem;
}
form.split input[type="text"],
form.split input[type="email"],
form.split input[type="url"],
form.split input[type="tel"],
form.split input[type="password"],
form.split input[type="file"],
form.split select,
form.split textarea {
    width: 40%;
}
form.split input[type="date"],
form.split input[type="time"],
form.split input[type="number"],
form.split input[type="range"] {
    width: 20%;
}
form.split .split_block,
form.split small,
form.split .small {
    display: block;
    margin-bottom: 1rem;
    margin-inline-start: 40%;
}
form.split .split_block {
    width: 40%;
}
form.split p.buttons {
    display: block;
    margin: 1rem 0rem 0rem 0rem;
    margin-inline-start: 40%;
}
select[disabled],
textarea[disabled],
input[disabled] {
    cursor: not-allowed;
    opacity: 0.33;
}

/* Group: Tables */

table {
    width: 100%;
}
table th {
    background-color: var(--chyrp-welsh-grey);
    padding: 0.5rem;
    font: inherit;
    font-weight: 600;
    vertical-align: middle;
    border: 1px solid var(--chyrp-scottish-grey);
}
table td {
    padding: 0.5rem;
    font: inherit;
    vertical-align: middle;
    border: 1px solid var(--chyrp-irish-grey);
}
table tbody tr:nth-child(even) td {
    background-color: var(--chyrp-summer-grey);
}
table tbody tr td.main {
    min-width: 10em;
}
table thead tr th.title,
table tbody tr td.title,
table thead tr th.name,
table tbody tr td.name,
table thead tr th.list,
table tbody tr td.list,
table thead tr th.filename,
table tbody tr td.filename {
    text-align: start;
}
table thead tr th.date,
table tbody tr td.date,
table thead tr th.emblem,
table tbody tr td.emblem,
table thead tr th.value,
table tbody tr td.value,
table thead tr th.status,
table tbody tr td.status,
table thead tr th.checkbox,
table tbody tr td.checkbox,
table tbody tr th.controls,
table tbody tr td.controls {
    text-align: center;
}
table thead tr th.checkbox,
table tbody tr td.checkbox,
table tbody tr td.controls {
    vertical-align: middle;
}
table tbody tr td.controls,
table tbody tr td.checkbox,
table tbody tr td.emblem {
    width: 2rem;
}
table tbody tr td.filename {
    word-wrap: anywhere;
}
table tbody tr td.placeholder {
    display: block;
    border: none;
}
table tbody tr td.status {
    background-color: var(--chyrp-light-blue);
}
table tbody tr.private td.status {
    background-color: var(--chyrp-light-red);
}
table tbody tr.registered_only td.status {
    background-color: var(--chyrp-light-purple);
}
table tbody tr.public td.status {
    background-color: var(--chyrp-light-green);
}
table tbody tr.denied td.status {
    background-color: var(--chyrp-light-red);
}
table tbody tr.approved td.status {
    background-color: var(--chyrp-light-green);
}
table tbody tr.comment_excerpt td p {
    margin: 0rem;
}
th.toggler > label {
    display: none;
}
td.controls svg,
td.controls img {
    fill: currentColor;
    position: relative;
    top: 2px;
    width: 16px;
    height: 16px;
}
td img.image {
    width: 70px;
    height: 70px;
    margin-inline-end: 0.5rem;
    vertical-align: middle;
    outline: var(--chyrp-border-blue) solid 1px;
    outline-offset: 0px;
}
td svg.placeholder,
td img.placeholder {
    fill: var(--chyrp-winter-grey);
    width: 16px;
    height: 16px;
    padding: 27px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Group: Flashes */

div.flash {
    padding: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--chyrp-strong-blue);
    color: var(--chyrp-pure-white);
    border: none;
    border-radius: 0.25em;
}
div.flash.notice {
    background-color: var(--chyrp-strong-green);
}
div.flash.warning {
    background-color: var(--chyrp-strong-red);
}
div.flash a {
    color: var(--chyrp-pure-white);
    font-weight: 600;
}

/* Group: Buttons */

button,
input::file-selector-button,
a.button,
a.next_page,
a.prev_page {
    box-sizing: border-box;
    display: inline-block;
    font: inherit;
    font-size: 1.25rem;
    color: var(--chyrp-inky-black);
    text-align: center;
    margin: 0rem;
    padding: 0.5rem 1rem;
    background-color: var(--chyrp-light-blue);
    border: 2px solid var(--chyrp-border-blue);
    border-radius: 0.25em;
    cursor: pointer;
    text-decoration: none;
}
input::file-selector-button {
    margin-inline-end: 1rem;
}
button:hover,
input::file-selector-button:hover,
a.button:hover,
a.next_page:hover,
a.prev_page:hover,
button:focus,
input::file-selector-button:focus,
a.button:focus,
a.next_page:focus,
a.prev_page:focus,
button:active,
input::file-selector-button:active,
a.button:active,
a.next_page:active,
a.prev_page:active {
    border-color: var(--chyrp-strong-blue);
    outline: none;
}
button.boo,
a.button.boo {
    color: var(--chyrp-inky-black);
    background-color: var(--chyrp-light-red);
    border: 2px solid var(--chyrp-border-red);
}
button.boo:hover,
a.button.boo:hover,
button.boo:focus,
a.button.boo:focus,
button.boo:active,
a.button.boo:active {
    border-color: var(--chyrp-strong-red);
}
button.yay,
a.button.yay {
    color: var(--chyrp-inky-black);
    background-color: var(--chyrp-light-green);
    border: 2px solid var(--chyrp-border-green);
}
button.yay:hover,
a.button.yay:hover,
button.yay:focus,
a.button.yay:focus,
button.yay:active,
a.button.yay:active {
    border-color: var(--chyrp-strong-green);
}
button > svg,
button > img,
a.button > svg,
a.button > img {
    fill: currentColor;
    display: block;
    position: relative;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    float: left;
    margin-right: 0.25rem;
}
div.confirmation button,
div.confirmation a.button {
    flex: 1 0 10em;
}
div.pagination a.prev_page,
div.pagination a.next_page {
    flex: 1 0 10em;
}
button[disabled] {
    cursor: not-allowed;
    opacity: 0.33;
}

/* Group: Options */

.main_options input,
.main_options select,
.main_options textarea {
    display: block;
} 
.main_options input[type="text"],
.main_options input[type="email"],
.main_options input[type="url"],
.main_options input[type="tel"],
.main_options input[type="date"],
.main_options input[type="time"],
.main_options input[type="number"],
.main_options input[type="range"],
.main_options input[type="password"],
.main_options input[type="file"],
.main_options textarea {
    width: 100%;
    margin: 0rem;
}
.more_options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    column-gap: 2rem;
    row-gap: 1rem;
    justify-content: space-between;
}
.more_options_option {
    box-sizing: border-box;
    display: block;
    margin: 0rem;
}
div.more_options p input,
div.more_options p select,
div.more_options p textarea {
    display: block;
}
div.more_options p input[type="text"],
div.more_options p input[type="email"],
div.more_options p input[type="url"],
div.more_options p input[type="tel"],
div.more_options p input[type="date"],
div.more_options p input[type="time"],
div.more_options p input[type="number"],
div.more_options p input[type="range"],
div.more_options p input[type="password"],
div.more_options p input[type="file"],
div.more_options p select,
div.more_options p textarea {
    width: 100%;
    margin: 0rem;
}
span.options_extra {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-height: 10rem;
    padding: 0.5rem;
    background-color: var(--chyrp-light-yellow);
    border: 1px solid var(--chyrp-irish-grey);
    border-top: none;
    overflow-y: auto;
}
span.options_extra:empty {
    display: none;
}
span.options_toolbar {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    gap: 24px;
    justify-content: flex-start;
    width: 100%;
    background-color: var(--chyrp-summer-grey);
    border: 1px solid var(--chyrp-irish-grey);
    border-bottom: none;
    padding: 0.5rem 0.75rem calc(0.5rem + 0.1875rem) 0.75rem;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
span.options_toolbar:empty {
    display: none;
}
span.options_tray {
    box-sizing: border-box;
    display: block;
    width: 100%;
    font-size: 0.67rem;
    background-color: var(--chyrp-summer-grey);
    border: 1px solid var(--chyrp-irish-grey);
    border-top: none;
    padding: 0.25rem 0.5rem;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
span.options_tray:empty {
    display: none;
}

/* Group: Helpers & General */

*.tag {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0em 0.25em;
    border-radius: 0.25em;
    border: 1px solid var(--chyrp-irish-grey);
    background-color: var(--chyrp-english-grey);
}
*.tag:link,
*.tag:visited {
    text-decoration: none;
}
*.tag:focus {
    outline: var(--chyrp-strong-purple) solid 2px;
    outline-offset: -1px;
}
*.tag:active,
*.tag_added {
    background-color: var(--chyrp-light-purple);
    border-color: var(--chyrp-strong-purple);
}
table.interactive + div.controls {
    background-color: var(--chyrp-light-yellow);
    padding: 1rem 0.5rem;
    border: 1px solid var(--chyrp-irish-grey);
    border-top: none;
}
table.interactive.empty + div.controls {
    display: none;
}
div.confirmation {
    margin-top: 1rem;
    display: flex;
    flex-flow: row nowrap;
    column-gap: 2rem;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--chyrp-summer-grey);
    border: 1px solid var(--chyrp-irish-grey);
    border-radius: 0.25rem;
}
a.emblem {
    text-decoration: none;
}
label.emblem {
    display: inline;
    cursor: pointer;
}
button.emblem {
    display: inline;
    font: inherit;
    font-size: 1em;
    color: var(--chyrp-inky-black);
    margin: 0rem;
    padding: 0rem;
    background-color: transparent;
    border: none;
    border-radius: 0rem;
    cursor: pointer;
}
svg.emblem,
img.emblem,
a.emblem > svg,
a.emblem > img,
label.emblem > svg,
label.emblem > img,
button.emblem > svg,
button.emblem > img {
    fill: currentColor;
    float: none;
    display: inline;
    position: relative;
    top: 0.1875rem;
    height: 1rem;
    margin: 0rem;
    padding: 0rem;
}
a.emblem:focus,
label.emblem:focus,
button.emblem:focus {
    outline: none;
}
a.emblem:hover,
a.emblem:focus,
a.emblem:active,
label.emblem:hover,
label.emblem:focus,
label.emblem:active,
button.emblem:hover,
button.emblem:focus,
button.emblem:active {
    color: var(--chyrp-strong-blue);
}
a.emblem:focus-visible > svg,
a.emblem:focus-visible > img,
button.emblem:focus-visible > svg,
button.emblem:focus-visible > img,
label.emblem.toolbar > input:focus-visible + svg,
label.emblem.toolbar > input:focus-visible + img {
    fill: var(--chyrp-strong-blue);
    outline: var(--chyrp-strong-orange) dashed 2px;
    outline-offset: 1px;
}
input.toolbar.hidden {
    display: inline !important;
    opacity: 0 !important;
    font: inherit !important;
    width: 1px !important;
    height: 16px !important;
    outline: none !important;
    border: none !important;
    padding: 0rem !important;
    margin: 0rem !important;
}
input.toolbar.hidden::file-selector-button {
    display: none !important;
}
.drag_highlight {
    background-color: var(--chyrp-light-yellow);
}

/* Group: iFrames */

.iframe_background {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* Prevent other elements overlapping */
    z-index: 1;
    backdrop-filter: blur(4px) contrast(33%) brightness(150%);
}
.iframe_foreground {
    box-sizing: border-box;    
    display: block;
    position: absolute;
    margin: 0rem;
    top: 3rem;
    left: 20%;
    width: 60%;
    height: calc(100% - 6rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: none;
    background-color: var(--chyrp-pure-white);
    box-shadow: 0px 4px 16px 2px rgba(79, 79, 79, 0.5);
}
.iframe_close_gadget {
    display: block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 1.5rem;
    right: calc(20% - 1.5rem);
    cursor: pointer;
}
.iframe_foreground:focus,
.iframe_close_gadget:focus {
    outline: none;
}
.iframe_foreground:focus-visible,
.iframe_close_gadget:focus-visible {
    outline: var(--chyrp-strong-orange) dashed 2px;
    outline-offset: 1px;
}
.iframe_close_gadget svg,
.iframe_close_gadget img {
    fill: currentColor;
    width: 1.5rem;
    height: 1.5rem;
}
.ajax_loading {
    background-size: 30px 30px;
    background-image: linear-gradient(
        -45deg,
        var(--chyrp-english-grey) 25%,
        transparent 25%,
        transparent 50%,
        var(--chyrp-english-grey) 50%,
        var(--chyrp-english-grey) 75%,
        transparent 75%,
        transparent
    ) !important;
    animation: ajax_loading 2s linear infinite;
}
.ajax_loading .controls {
    visibility: hidden;
}

/* Group: Keyframes */

@keyframes ajax_loading {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 60px 30px;
    }
}

/* Group: Breakpoints */

@media screen and (max-width: 959px) {
    #header #navigation {
        left: 1rem;
        right: 1rem;
    }
    #sub_nav, #content {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    #content {
        margin-bottom: 1rem;
    }
    #sub_nav li a {
        font-size: 1rem;
    }
    label {
        display: block;
    }
    form.split h3,
    form.split h4,
    form.split h5,
    form.split h6 {
        margin-inline-start: 0rem;
    }
    form.split label {
        width: 100%;
        text-align: start;
        padding: 0rem;
    }
    form.split .split_block,
    form.split small,
    form.split .small,
    form.split p.buttons {
        width: auto;
        margin-inline-start: 0rem;
    }
    input.text,
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="range"],
    input[type="password"],
    input[type="file"]:not(.toolbar),
    select,
    textarea {
        width: 100% !important;
    }
    #content table tbody tr td {
        padding: 1rem 0.5rem;
    }
    #content table tbody tr td.main {
        min-width: 4rem;
    }
    button:not(.toolbar),
    a.button:not(.toolbar),
    a.prev_page, a.next_page {
        display: block !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        padding: 0.5rem !important;
        margin: 1rem 0rem 0rem 0rem !important;
        text-align: center !important;
    }
    /* iOS can't have this nice thing ;_; */
    @supports not (-webkit-touch-callout: none) {
        input:not(.toolbar)::file-selector-button {
            display: block !important;
            width: 100% !important;
            margin: 0rem 0rem 1rem 0rem !important;
        }
    }
    button:not(.toolbar):has(img, svg),
    a.button:not(.toolbar):has(img, svg) {
        padding-right: calc(16px + 1rem) !important;
    }
    div.more_options {
        grid-template-columns: 1fr;
    }
    div.confirmation {
        display: block;
        padding: 0rem;
        background-color: transparent;
        border-width: 0rem;
        border-radius: 0rem;
    }
    div.pagination {
        display: block;
    }
    li.module div.controls,
    li.feather div.controls {
        padding-top: 0rem;
    }
    .iframe_foreground {
        left: 3rem;
        width: calc(100% - 6rem);
    }
    .iframe_close_gadget {
        right: 1.5rem;
    }
}

@media screen and (max-width: 719px) {
    #header #navigation {
        left: 0.5rem;
        right: 0.5rem;
    }
    #sub_nav, #content {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    #content {
        margin-bottom: 0.5rem;
    }
    textarea {
        height: max(calc(100vh - 7rem), calc(10lh + 1rem));
    }
}

@media screen and (max-width: 1199px) {
    #content table thead tr th:not(.main, .controls, .toggler),
    #content table tbody tr td:not(.main, .controls, .checkbox, .placeholder) {
        display: none;
    }
}

/* Group: Dark */

@media (prefers-color-scheme: dark) {
    body {
        color: var(--chyrp-pure-white);
        background-color: var(--chyrp-inky-black);
    }
    #header {
        background-color: var(--chyrp-winter-grey);
    }
    #header #navigation li a:link,
    #header #navigation li a:visited {
        color: var(--chyrp-pure-white);
        background-color: #2f2f2f;
    }
    #header #navigation li.selected a:link,
    #header #navigation li.selected a:visited,
    #header #navigation li a:hover,
    #header #navigation li a:focus {
        background-color: var(--chyrp-inky-black);
    }
    #sub_nav {
        border-bottom-color: var(--chyrp-pure-white);
    }
    #sub_nav li a {
        border-color: var(--chyrp-pure-white);
    }
    #sub_nav li.selected a:link,
    #sub_nav li.selected a:visited,
    #sub_nav li a:hover,
    #sub_nav li a:focus {
        background-color: var(--chyrp-english-grey);
    }
    #content {
        color: var(--chyrp-inky-black);
        background-color: var(--chyrp-english-grey);
        border-color: var(--chyrp-pure-white);
    }
    hr {
        border-color: var(--chyrp-scottish-grey);
    }
    aside {
        border-color: var(--chyrp-scottish-grey);
    }
    pre {
        background-color: var(--chyrp-welsh-grey);
    }
    code {
        background-color: var(--chyrp-welsh-grey);
        border-color: var(--chyrp-scottish-grey);
    }
    #content ul.extend > li {
        background-color: var(--chyrp-welsh-grey);
        border-color: var(--chyrp-scottish-grey);
    }
    li.module div.controls,
    li.feather div.controls,
    li.theme div.controls {
        border-color: var(--chyrp-scottish-grey);
    }
    select,
    textarea,
    input[type="checkbox"],
    input[type="radio"],
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="range"],
    input[type="password"],
    input[type="file"] {
        background-color: var(--chyrp-welsh-grey);
        border-color: var(--chyrp-scottish-grey);
    }
    input:invalid {
        border-color: var(--chyrp-strong-orange);
    }
    table tbody tr td {
        border-color: var(--chyrp-scottish-grey);
    }
    table tbody tr:nth-child(even) td {
        background-color: var(--chyrp-welsh-grey);
    }
    span.options_toolbar {
        background-color: transparent;
        border-color: var(--chyrp-scottish-grey);
    }
    span.options_tray {
        background-color: transparent;
        border-color: var(--chyrp-scottish-grey);
    }
    span.options_extra {
        border-color: var(--chyrp-scottish-grey);
    }
    *.tag {
        border-color: var(--chyrp-scottish-grey);
    }
    *.tag_added {
        border-color: var(--chyrp-strong-blue);
    }
    table.interactive + div.controls {
        border-color: var(--chyrp-scottish-grey);
    }
    div.confirmation {
        background-color: transparent;
        border-color: var(--chyrp-scottish-grey);
    }
    .iframe_foreground {
        background-color: var(--chyrp-english-grey);
    }
    .ajax_loading {
        background-image: linear-gradient(
            -45deg,
            var(--chyrp-welsh-grey) 25%,
            transparent 25%,
            transparent 50%,
            var(--chyrp-welsh-grey) 50%,
            var(--chyrp-welsh-grey) 75%,
            transparent 75%,
            transparent
        ) !important;
    }
}

/* Group: Reduced motion */

@media (prefers-reduced-motion) {
    .ajax_loading {
        animation: none;
    }
}