leilukin-tumbleblog/admin/stylesheets/all.css

1456 lines
31 KiB
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, 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-light-yellow: #fffde6;
--chyrp-light-red: #faebe4;
--chyrp-light-green: #ebfae4;
--chyrp-light-blue: #f2fbff;
--chyrp-medium-yellow: #fffbcc;
--chyrp-medium-red: #fcddcf;
--chyrp-medium-green: #daf1d0;
--chyrp-medium-blue: #e1f2fa;
--chyrp-border-yellow: #e5d7a1;
--chyrp-border-red: #d6bdb5;
--chyrp-border-green: #bdd6b5;
--chyrp-border-blue: #b8cdd9;
}
*::selection {
color: #1f1f23;
background-color: #ffdd00;
}
body {
font-family: "Open Sans webfont", sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #1f1f23;
tab-size: 4;
background-color: #efefef;
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: #1f1f23;
background-color: #ffdd00;
}
del {
font: inherit;
text-decoration: line-through;
}
ins {
font: inherit;
color: #1f1f23;
background-color: #daf1d0;
}
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: #1f1f23;
text-decoration: underline;
text-underline-offset: 0.125em;
}
a:focus {
outline: #ff7f00 dashed 2px;
outline-offset: 1px;
}
a:hover,
a:focus,
a:active {
color: #1e57ba;
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: #1f1f23;
padding: 2rem 0rem 3rem 0rem;
color: #efefef;
text-align: center;
position: relative;
}
#header h1 {
margin: 0rem 2rem 2rem 2rem;
}
#header h1 a {
color: #ffffff;
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: #cfcfcf;
}
#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: #efefef;
}
/* 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 #afafaf;
}
#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 #afafaf;
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: #dfdfdf;
}
#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: #ffffff;
}
/* Group: Content */
#content {
clear: both;
background-color: #ffffff;
padding: 1rem;
margin: 0rem 4rem 4rem 4rem;
border: 1px solid #afafaf;
border-top: none;
position: relative;
overflow: hidden;
}
hr {
border: none;
clear: both;
border-top: 1px solid #cfcfcf;
margin: 2rem 0rem;
}
aside {
box-sizing: border-box;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
border: 1px solid #e5d7a1;
border-radius: 0.25em;
background-color: #fffde6;
}
pre {
font-family: "Cousine webfont", monospace;
font-size: 0.85em;
background-color: #efefef;
margin: 1rem 0rem;
padding: 1rem;
overflow-x: auto;
white-space: pre;
}
code {
font-family: "Cousine webfont", monospace;
font-size: 0.85em;
background-color: #efefef;
padding: 0px 2px;
border: 1px solid #cfcfcf;
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: #efefef;
border: 1px solid #cfcfcf;
}
#content ul#modules_enabled > li,
#content ul#feathers_enabled > li,
#content ul.themes > li.current {
background-color: #daf1d0;
border: 1px solid #bdd6b5;
}
#content ul#modules_enabled > li.error,
#content ul#modules_disabled > li.error {
background-color: #fcddcf;
border: 1px solid #d6bdb5;
}
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 #cfcfcf;
}
ul#modules_enabled div.controls,
ul#feathers_enabled div.controls,
li.theme.current div.controls {
border-top: 1px solid #bdd6b5;
}
ul#modules_enabled > li.error div.controls,
ul#modules_disabled > li.error div.controls {
border-top: 1px solid #d6bdb5;
}
#content ul.extend li a.emblem img,
#content ul.extend > li > h3 a {
text-decoration: none;
}
/* Group: Forms */
label {
display: inline;
font-weight: 600;
}
textarea {
display: block;
resize: vertical;
height: calc(10lh + 1rem);
}
select, input {
display: inline-block;
}
input[type="checkbox"],
input[type="radio"] {
appearance: none;
box-sizing: border-box;
color: #1f1f23;
font: inherit;
font-size: 1.25rem;
position: relative;
top: 0.2em;
width: 1em;
height: 1em;
border-radius: 0em;
border: 1px solid #cfcfcf;
background-color: #ffffff;
}
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: #1f1f23;
font: inherit;
font-size: 1.25rem;
padding: 0.5rem;
border-radius: 0em;
border: 1px solid #cfcfcf;
background-color: #ffffff;
}
input[type="file"] {
box-sizing: border-box;
color: #1f1f23;
font: inherit;
font-size: 1.25rem;
padding: 1rem;
border-radius: 0em;
border: 1px solid #cfcfcf;
background-color: #ffffff;
}
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: #656565;
opacity: 1;
}
input:invalid,
textarea:invalid {
border-color: #ff7f00;
}
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: #1e57ba;
outline: #1e57ba 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: #faebe4;
}
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 #c11600;
outline-color: #c11600;
}
input[type="password"].strong {
background-color: #ebfae4;
}
input[type="password"].strong:focus {
border: 1px solid #108600;
outline-color: #108600;
}
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: #dfdfdf;
padding: 0.5rem;
font: inherit;
font-weight: 600;
vertical-align: middle;
border: 1px solid #afafaf;
}
table td {
padding: 0.5rem;
font: inherit;
vertical-align: middle;
border: 1px solid #cfcfcf;
}
table tbody tr:nth-child(even) td {
background-color: #fbfbfb;
}
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: #f2fbff;
}
table tbody tr.private td.status {
background-color: #faebe4;
}
table tbody tr.registered_only td.status {
background-color: #fffde6;
}
table tbody tr.public td.status {
background-color: #ebfae4;
}
table tbody tr.denied td.status {
background-color: #faebe4;
}
table tbody tr.approved td.status {
background-color: #ebfae4;
}
table tbody tr.comment_excerpt td p {
margin: 0rem;
}
th.toggler > label {
display: none;
}
td.controls img {
position: relative;
top: 2px;
width: 16px;
height: 16px;
}
td img.image {
width: 70px;
height: 70px;
margin-inline-end: 0.5rem;
vertical-align: middle;
outline: #ff7f00 solid 1px;
outline-offset: 0px;
}
td img.placeholder {
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: #1e57ba;
color: #ffffff;
border: none;
border-radius: 0.25em;
}
div.flash.notice {
background-color: #108600;
}
div.flash.warning {
background-color: #c11600;
}
div.flash a {
color: #ffffff;
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: #1f1f23;
text-align: center;
margin: 0rem;
padding: 0.5rem 1rem;
background-color: #f2fbff;
border: 2px solid #b8cdd9;
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: #1e57ba;
outline: none;
}
button.boo,
a.button.boo {
color: #1f1f23;
background-color: #faebe4;
border: 2px solid #d6bdb5;
}
button.boo:hover,
a.button.boo:hover,
button.boo:focus,
a.button.boo:focus,
button.boo:active,
a.button.boo:active {
border-color: #c11600;
}
button.yay,
a.button.yay {
color: #1f1f23;
background-color: #ebfae4;
border: 2px solid #bdd6b5;
}
button.yay:hover,
a.button.yay:hover,
button.yay:focus,
a.button.yay:focus,
button.yay:active,
a.button.yay:active {
border-color: #108600;
}
button > img,
a.button > img {
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: 1rem;
background-color: #fffde6;
border: 1px solid #cfcfcf;
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: #fbfbfb;
border: 1px solid #cfcfcf;
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: #fbfbfb;
border: 1px solid #cfcfcf;
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 #cfcfcf;
background-color: #efefef;
}
*.tag:link,
*.tag:visited {
text-decoration: none;
}
*.tag_added {
background-color: #f2fbff;
border-color: #1e57ba;
}
table.interactive + div.controls {
background-color: #fffde6;
padding: 1rem;
border: 1px solid #cfcfcf;
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: #fbfbfb;
border: 1px solid #cfcfcf;
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: #1f1f23;
margin: 0rem;
padding: 0rem;
background-color: transparent;
border: none;
border-radius: 0rem;
cursor: pointer;
}
img.emblem,
a.emblem > img,
label.emblem > img,
button.emblem > img {
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:focus > img,
button.emblem:focus > img,
label.emblem.toolbar > input:focus + img {
outline: #ff7f00 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: #fffde6;
}
/* Group: iFrames */
.iframe_background {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
/* Prevent other elements overlapping */
z-index: 1;
background-color: rgba(239, 239, 239, 0.75);
}
.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: #ffffff;
box-shadow: 0px 4px 16px 2px rgba(79, 79, 79, 0.5);
}
.iframe_foreground:focus {
outline: #ff7f00 dashed 2px;
outline-offset: 1px;
}
.iframe_close_gadget {
display: block;
position: absolute;
width: 1.5rem;
height: 1.5rem;
top: 1.5rem;
right: calc(20% - 1.5rem);
cursor: pointer;
}
.iframe_close_gadget img {
width: 1.5rem;
height: 1.5rem;
}
.ajax_loading {
background-size: 30px 30px;
background-image: linear-gradient(
-45deg,
#efefef 25%,
transparent 25%,
transparent 50%,
#efefef 50%,
#efefef 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;
}
input.text + a.help.emblem {
float: right;
position: relative;
top: -2.25rem;
left: -0.5rem;
}
#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),
a.button:not(.toolbar):has(img) {
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: #ffffff;
background-color: #1f1f23;
}
#header {
background-color: #656565;
}
#header #navigation li a:link,
#header #navigation li a:visited {
color: #ffffff;
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: #1f1f23;
}
#sub_nav {
border-bottom-color: #ffffff;
}
#sub_nav li a {
border-color: #ffffff;
}
#sub_nav li.selected a:link,
#sub_nav li.selected a:visited,
#sub_nav li a:hover,
#sub_nav li a:focus {
background-color: #efefef;
}
#content {
color: #1f1f23;
background-color: #efefef;
border-color: #ffffff;
}
hr {
border-color: #afafaf;
}
aside {
border-color: #afafaf;
}
pre {
background-color: #dfdfdf;
}
code {
background-color: #dfdfdf;
border-color: #afafaf;
}
#content ul.extend > li {
background-color: #dfdfdf;
border-color: #afafaf;
}
li.module div.controls,
li.feather div.controls,
li.theme div.controls {
border-color: #afafaf;
}
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: #dfdfdf;
border-color: #afafaf;
}
input:invalid {
border-color: #ff7f00;
}
table tbody tr td {
border-color: #afafaf;
}
table tbody tr:nth-child(even) td {
background-color: #dfdfdf;
}
span.options_toolbar {
background-color: transparent;
border-color: #afafaf;
}
span.options_tray {
background-color: transparent;
border-color: #afafaf;
}
span.options_extra {
border-color: #afafaf;
}
*.tag {
border-color: #afafaf;
}
*.tag_added {
border-color: #1e57ba;
}
table.interactive + div.controls {
border-color: #afafaf;
}
div.confirmation {
background-color: transparent;
border-color: #afafaf;
}
.iframe_background {
background-color: rgba(159, 159, 159, 0.75);
}
.iframe_foreground {
background-color: #efefef;
}
.ajax_loading {
background-image: linear-gradient(
-45deg,
#dfdfdf 25%,
transparent 25%,
transparent 50%,
#dfdfdf 50%,
#dfdfdf 75%,
transparent 75%,
transparent
) !important;
}
}
/* Group: Reduced motion */
@media (prefers-reduced-motion) {
.ajax_loading {
animation: none;
}
}