nfp_sites/nfp_moe_old/public/assets/app.css

1626 lines
31 KiB
CSS

/* Dark theme */
html {
box-sizing: border-box;
font-size: 16px;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
font-weight: normal;
}
body {
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
button {
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
@keyframes spinner-loader {
to {
transform: rotate(360deg);
}
}
.loading-spinner:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner-loader 0.6s linear infinite;
z-index: 1000;
}
.maincontainer {
background: white;
color: black;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
flex-grow: 2;
position: relative;
}
.error {
font-size: 0.8em;
color: #bb4d00;
font-weight: bold;
padding-bottom: 20px;
}
.error-wrapper {
flex-grow: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ccc;
padding: 40px 0;
}
.error-wrapper .error {
border: 2px dashed #bb4d00;
padding: 10px 20px;
font-size: 1em;
}
[hidden] {
display: none !important;
}
article {
display: flex;
flex-direction: column;
flex-grow: 2;
padding: 20px;
}
article header {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
article header h1 {
font-size: 1.4em;
color: #555;
flex-grow: 2;
}
article header span {
font-size: 0.8em;
color: #757575;
}
article .content {
display: flex;
flex-direction: column;
}
article .content h5 {
font-size: 1em;
font-weight: bold;
color: #555;
}
form {
display: flex;
flex-direction: column;
align-items: stretch;
}
form label {
text-align: left;
font-weight: bold;
font-size: 0.8em;
padding: 5px 0 3px;
}
form input[type=text],
form input[type=password],
form input[type=datetime-local],
form select,
form textarea {
width: 100%;
font-size: 1em;
padding: 0.5em;
margin: 0 0 0.5em;
background: white;
border: 1px solid #333;
color: black;
outline: none;
}
form input[type=text]:hover, form input[type=text]:focus,
form input[type=password]:hover,
form input[type=password]:focus,
form input[type=datetime-local]:hover,
form input[type=datetime-local]:focus,
form select:hover,
form select:focus,
form textarea:hover,
form textarea:focus {
border-color: #f57c00;
}
form input[type=submit],
form button.submit {
align-self: center;
padding: 0.5em;
margin: 0.5em 0;
min-width: 150px;
border: 1px solid #f57c00;
background: #ffad42;
color: black;
height: 31px;
}
form button.submit::-moz-focus-inner {
border: 0;
}
a, button {
outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
.ce-block__content {
word-wrap: break-word;
}
.ce-block__content .clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.ce-block__content h1, .ce-block__content h2, .ce-block__content h3, .ce-block__content h4, .ce-block__content h5, .ce-block__content h6, .ce-block__content p, .ce-block__content dl, .ce-block__content ol, .ce-block__content ul {
margin: 0 0 1em !important;
}
.ce-block__content blockquote {
border-left: solid 2px black;
margin-left: 0;
padding-left: 5px;
color: black;
}
.ce-block__content .hide-by-clipping {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.ce-block__content img.fr-rounded,
.ce-block__content .fr-img-caption.fr-rounded img {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.ce-block__content img.fr-bordered,
.ce-block__content .fr-img-caption.fr-bordered img {
border: solid 5px #CCC;
}
.ce-block__content img.fr-bordered {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.ce-block__content .fr-img-caption.fr-bordered img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ce-block__content span.fr-emoticon {
font-weight: normal;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
display: inline;
line-height: 0;
}
.ce-block__content img {
position: relative;
max-width: 100%;
}
.ce-block__content img.fr-dib {
margin: 5px auto;
display: block;
float: none;
vertical-align: top;
}
.ce-block__content img.fr-dib.fr-fil {
margin-left: 0;
text-align: left;
}
.ce-block__content img.fr-dib.fr-fir {
margin-right: 0;
text-align: right;
}
.ce-block__content img.fr-dii {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - 10px);
}
.ce-block__content img.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
.ce-block__content img.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
.ce-block__content span.fr-img-caption {
position: relative;
max-width: 100%;
}
.ce-block__content span.fr-img-caption.fr-dib {
margin: 5px auto;
display: block;
float: none;
vertical-align: top;
}
.ce-block__content span.fr-img-caption.fr-dib.fr-fil {
margin-left: 0;
text-align: left;
}
.ce-block__content span.fr-img-caption.fr-dib.fr-fir {
margin-right: 0;
text-align: right;
}
.ce-block__content span.fr-img-caption.fr-dii {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - 10px);
}
.ce-block__content span.fr-img-caption.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
.ce-block__content span.fr-img-caption.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
.ce-block__content a.fr-strong {
font-weight: 700;
}
.ce-block__content a.fr-green {
color: green;
}
.ce-block__content .fr-img-caption {
text-align: center;
}
.ce-block__content .fr-img-caption .fr-img-wrap {
padding: 0;
display: inline-block;
margin: auto;
text-align: center;
width: 100%;
}
.ce-block__content .fr-img-caption .fr-img-wrap img {
display: block;
margin: auto;
width: 100%;
}
.ce-block__content .fr-img-caption .fr-img-wrap > span {
margin: auto;
display: block;
padding: 5px 5px 10px;
font-size: 14px;
font-weight: initial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
width: 100%;
text-align: center;
}
.ce-block__content a {
color: #bb4d00;
}
.ce-block__content dt {
font-weight: bold;
}
.ce-block__content ol {
list-style-type: decimal;
padding-left: 40px;
}
.ce-block__content ul {
list-style-type: disc;
padding-left: 40px;
}
.ce-block__content h1 {
font-size: 1.8em;
font-weight: bold;
}
.ce-block__content h2 {
font-size: 1.6em;
font-weight: bold;
}
.ce-block__content h3 {
font-size: 1.4em;
font-weight: bold;
}
.ce-block__content h4 {
font-size: 1.2em;
font-weight: bold;
}
.ce-block__content h5 {
font-size: 1em;
font-weight: bold;
}
.ce-block__content h6 {
font-size: 0.8em;
font-weight: bold;
}
.ce-block__content hr {
width: 100%;
}
.ce-block__content strong {
font-weight: 700;
}
/* Dark theme */
#nav {
display: flex;
flex-direction: column;
}
#nav .top {
background: #002f6c;
color: white;
padding: 0 10px 0 0;
min-height: 100px;
display: flex;
}
#nav .top button.dark {
background: transparent;
color: #ffad42;
border: none;
cursor: pointer;
font-weight: bold;
}
#nav .top a.logo {
background: 25px center no-repeat transparent;
background-size: auto 91px;
padding-left: 120px;
display: flex;
color: white;
text-decoration: none;
}
#nav .top h2 {
align-self: center;
font-size: 30px;
}
#nav .top aside {
flex-grow: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 10px 0;
}
#nav .top aside p {
font-size: 0.8em;
color: #999999;
padding-bottom: 5px;
}
#nav .top aside p a {
margin-left: 5px;
}
#nav .top aside p button {
font-size: 0.8em;
}
#nav .top aside a, #nav .top aside a:visited {
font-weight: bold;
text-align: center;
color: #ffad42;
font-size: 0.8em;
line-height: 1.4em;
text-decoration: none;
}
#nav .top aside .adminlinks {
display: flex;
justify-content: center;
max-width: 200px;
flex-wrap: wrap;
}
#nav .top aside .adminlinks a {
padding: 3px 5px;
min-width: 100px;
}
#nav .top aside .loading-spinner {
position: relative;
width: 200px;
}
#nav nav {
display: flex;
background: #3D77C7;
color: white;
}
#nav nav .hassubmenu {
flex-grow: 2;
flex-basis: 0;
display: flex;
}
#nav nav a, #nav nav a:visited {
flex-grow: 2;
flex-basis: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 10px;
font-size: 0.9em;
text-decoration: none;
}
#nav nav a.active, #nav nav a:visited.active {
border-bottom: 3px solid #f57c00;
}
#nav .loading-spinner {
position: relative;
flex-grow: 2;
flex-basis: 0;
}
#nav .menuerror {
background: #01579b;
text-align: center;
padding: 10px;
color: #FFC7C7;
font-weight: bold;
}
.avifsupport #nav .top a.logo {
background-image: url("/assets/img/logo.avif");
}
.jpegonly #nav .top a.logo {
background-image: url("/assets/img/logo_small.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.jpegonly #nav .top a.logo {
background-image: url("/assets/img/logo.jpg");
}
}
.darkmodeon #nav .top {
background: #002f6c;
color: white;
}
.darkmodeon #nav .top a.logo {
color: white;
}
.darkmodeon #nav .top aside p {
color: #999999;
}
.darkmodeon #nav .top aside a, .darkmodeon #nav .top aside a:visited {
color: #ffad42;
}
.darkmodeon #nav nav {
background: #28518B;
color: white;
}
.darkmodeon #nav nav a, .darkmodeon #nav nav a:visited {
color: white;
}
.darkmodeon #nav nav a.active, .darkmodeon #nav nav a:visited.active {
border-bottom: 3px solid #e05e00;
}
.darkmodeon #nav .menuerror {
background: #013b68;
color: #FFC7C7;
}
footer {
margin-top: 0px;
border-top: 1px solid #ccc;
display: flex;
padding: 20px;
background: #ccc;
color: black;
}
footer .sitemap {
display: flex;
flex: 2 1 auto;
flex-direction: column;
text-align: center;
align-items: center;
font-size: 11px;
font-weight: bold;
padding: 0 20px;
}
footer .sitemap a {
text-decoration: none;
color: #8f3c00;
}
footer .sitemap a.root {
display: block;
margin: 2px;
padding: 2px 0 0;
}
footer .sitemap ul {
margin: 2px 0 0;
display: flex;
flex-wrap: wrap;
padding: 0 0 10px;
justify-content: center;
border-bottom: 1px solid white;
margin-bottom: 10px;
min-width: 300px;
}
footer .sitemap ul li {
padding: 2px 5px;
list-style-type: disc;
list-style-position: inside;
}
footer .footer-filler {
width: 119px;
flex: 0 0 119px;
}
footer .footer-logo {
background: center no-repeat transparent;
background-size: contain;
align-self: center;
width: 119px;
height: 150px;
flex: 0 0 119px;
}
footer .meta {
flex-grow: 2;
display: flex;
flex-wrap: wrap;
padding-top: 5px;
align-items: flex-end;
text-align: center;
justify-content: center;
}
footer .meta a {
margin: 0 3px;
}
.darkmodeon footer {
border-top: 1px solid #343536;
background: #343536;
color: #d7dadc;
}
.darkmodeon footer .sitemap a {
color: #fe791b;
}
.daymode.jpegonly footer .footer-logo {
background-image: url("/assets/img/tsun_small.jpg");
}
.darkmodeon.jpegonly footer .footer-logo {
background-image: url("/assets/img/dark_tsun_small.jpg");
}
.avifsupport footer .footer-logo {
background-image: url("/assets/img/tsun.avif");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.daymode.jpegonly .footer-logo {
background-image: url("/assets/img/tsun.jpg");
}
.darkmodeon.jpegonly .footer-logo {
background-image: url("/assets/img/dark_tsun.jpg");
}
}
@media (pointer: coarse) {
footer .sitemap a.root,
footer .sitemap a.child {
padding: 10px 10px;
display: inline-block;
}
}
@media screen and (max-width: 900px) {
footer .footer-filler {
display: none;
}
}
@media screen and (max-width: 480px) {
footer {
flex-direction: column;
align-items: center;
}
footer .footer-logo {
margin-top: 20px;
}
footer .sitemap {
padding: 0px;
}
footer .sitemap ul {
align-self: stretch;
}
footer .sitemap a.root,
footer .sitemap a.child {
padding: 9px 10px;
display: inline-block;
}
}
/* Dark theme */
.login-wrapper {
flex-grow: 2;
display: flex;
flex-direction: column;
justify-content: center;
background: #ccc;
padding: 40px 0;
}
.login-wrapper .login-icon {
background: url("./img/login.png") center no-repeat transparent;
background-size: contain;
width: 106px;
height: 130px;
align-self: center;
}
article.login {
text-align: center;
flex-grow: 0;
border: 1px solid #555;
background: white;
color: black;
align-self: center;
}
article.login .content {
align-items: center;
align-self: center;
padding: 20px 40px;
}
article.login h5 {
margin-bottom: 20px;
}
article.login .loading-spinner {
width: 240px;
height: 50px;
position: relative;
}
article.login form {
align-self: stretch;
margin-bottom: 20px;
}
.darkmodeon .login-wrapper {
background: #343536;
}
.darkmodeon article.login {
border: 1px solid #808080;
background: black;
color: #d7dadc;
}
newsentry {
display: flex;
color: #757575;
font-size: 12px;
}
newsentry .title {
display: flex;
margin-bottom: 10px !important;
}
newsentry .title a {
text-decoration: none;
color: #bb4d00;
font-size: 14px;
font-weight: bold;
}
newsentry a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 124px;
text-align: center;
}
newsentry a.cover img {
max-height: 70px;
width: auto;
}
newsentry a.nobg {
height: 70px;
width: 124px;
background: #ddd;
}
newsentry .entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
}
newsentry .entrycontent h3 {
margin-bottom: 0 !important;
font-size: 1.3em;
font-weight: bold;
}
newsentry .entrymeta {
font-size: 10px;
color: #757575;
font-weight: bold;
display: none;
}
fileinfo {
padding: 0 5px;
margin-bottom: 5px;
display: flex;
flex-direction: column;
}
fileinfo.slim {
padding: 0;
margin: 0;
}
fileinfo .filetitle {
display: block;
line-height: 16px;
}
fileinfo .filetitle .prefix {
font-weight: bold;
margin-right: 5px;
}
fileinfo .filetitle a {
color: #bb4d00;
font-weight: bold;
text-decoration: none;
padding-right: 5px;
border-right: 1px solid #ccc;
margin-right: 5px;
display: inline-block;
}
fileinfo .trimmed {
padding: 3px 0 5px 25px;
}
fileinfo ul {
margin: 10px 0;
padding-left: 0;
list-style-type: disc;
list-style-position: inside;
}
fileinfo ul li {
padding-left: 20px;
}
@media screen and (max-width: 480px) {
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
@media (pointer: coarse) {
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
newsitem {
display: flex;
flex-direction: column;
font-size: 15px;
background: transparent;
border: none;
}
newsitem .title {
text-decoration: none;
background: #f57c00;
color: black;
font-size: 1.2em;
font-weight: bold;
text-align: center;
padding: 5px 10px;
margin-bottom: 10px;
}
newsitem .newsitemcontent {
display: flex;
}
newsitem a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 400px;
text-align: center;
}
newsitem a.cover picture {
max-height: 400px;
max-width: 400px;
width: auto;
}
newsitem a.nobg {
height: 225px;
width: 400px;
background: #ddd;
}
newsitem .entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
}
newsitem .entrycontent.extrapadding {
padding: 0 15px 5px;
}
newsitem .entrycontent h3 {
margin-bottom: 0 !important;
font-size: 1.3em;
font-weight: bold;
}
newsitem .entrycontent .fr-view {
margin-bottom: 10px;
}
newsitem .entrycontent fileinfo {
font-size: 0.8em;
}
newsitem .entrymeta {
flex-grow: 2;
font-size: 11px;
color: #757575;
font-weight: bold;
padding: 10px 0;
}
newsitem .entrymeta a {
color: #bb4d00;
margin: 0 5px;
text-decoration: none;
}
pages {
display: flex;
justify-content: center;
width: 100%;
}
pages a, pages div {
display: block;
font-size: 0.9em;
max-width: 80px;
flex-grow: 2;
text-align: center;
padding: 10px !important;
margin-top: 10px;
}
pages a {
color: #bb4d00;
cursor: pointer;
}
@media screen and (max-width: 1000px) {
newsitem a.cover {
width: 300px;
}
newsitem a.cover picture {
max-width: 300px;
width: auto;
}
}
@media screen and (max-width: 639px) {
newsitem a.cover {
width: 100%;
margin-bottom: 20px;
}
newsitem a.cover picture {
max-height: unset;
max-width: unset;
width: 100%;
}
newsitem .newsitemcontent {
flex-direction: column;
}
newsitem .entrycontent.extrapadding {
padding: 0 5px 5px;
}
}
@media screen and (max-width: 440px) {
newsentry {
flex-direction: column;
align-items: center;
}
newsentry a.cover {
margin: 0 0 15px;
width: 100%;
}
newsentry a.cover img {
max-height: unset;
width: 100%;
}
}
.darkmodeon newsentry {
color: hsl(0deg, 0%, 55%);
}
.darkmodeon newsentry .title a {
color: #e05e00;
}
.darkmodeon newsentry .entrymeta {
color: hsl(0deg, 0%, 55%);
}
.darkmodeon fileinfo .filetitle a {
color: #e05e00;
border-right: 1px solid #343536;
}
.darkmodeon newsitem {
background: #1a1a1b;
border: 1px solid #343536;
}
.darkmodeon newsitem .title {
background: #e05e00;
color: black;
}
.darkmodeon newsitem .entrymeta {
color: hsl(0deg, 0%, 55%);
}
.darkmodeon newsitem .entrymeta a {
color: #e05e00;
}
.darkmodeon pages a {
color: #e05e00;
}
article.page {
padding-bottom: 0;
}
article.page header {
text-align: center;
margin: 20px 20px 0;
padding: 10px;
background: #f57c00;
width: 100%;
max-width: 1920px;
align-self: center;
}
article.page header h1 {
color: black;
}
article.page .loading-spinner {
position: relative;
flex-grow: 2;
height: 300px;
}
article.page .page-banner {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 150px;
width: 100%;
max-width: 1920px;
align-self: center;
flex: 0 0 150px;
}
article.page .page-cover {
margin: 0 0 20px;
}
article.page .page-cover.single {
margin: 0 20px 20px;
padding: 0 20px;
width: calc(100% - 40px);
max-width: 800px;
flex: 2 0 0;
}
article.page .goback {
width: 100%;
max-width: 1050px;
align-self: center;
padding: 10px 5px 0;
margin-bottom: -10px;
}
article.page .goback a {
font-weight: bold;
text-decoration: none;
color: #bb4d00;
}
article.page .admin-actions {
margin-bottom: 20px;
}
article.page aside.sidebar h4,
article.page aside.news h4 {
font-size: 14px;
font-weight: bold;
margin: 0 0 10px;
}
article.page .container {
flex-direction: column;
align-items: center;
height: auto;
padding: 20px 0;
width: 100%;
max-width: 1050px;
align-self: center;
background: transparent;
border-right: none;
border-left: none;
}
article.page .container.multi {
align-items: flex-start;
flex-direction: row;
flex-grow: 2;
}
article.page aside.sidebar {
width: 250px;
flex: 0 0 250px;
padding: 0 10px;
margin-bottom: 10px;
}
article.page aside.sidebar h4 {
padding: 0 5px 5px;
border-bottom: 1px solid #ccc;
}
article.page aside.sidebar a {
padding: 5px 5px 0px;
display: block;
text-decoration: none;
color: #bb4d00;
font-size: 14px;
font-weight: bold;
}
article.page .fr-view {
margin: 0 20px;
padding: 0 20px;
width: calc(100% - 40px);
max-width: 800px;
flex: 2 0 0;
}
article.page .fr-view .page-cover {
margin: 0 -10px 20px;
}
article.page .fr-view main {
padding: 0 5px;
}
aside.news {
border-top: 1px solid #ccc;
margin-top: 20px;
padding: 10px 10px;
margin: 0 -10px;
width: 100%;
align-self: center;
}
aside.news .loading-spinner {
position: relative;
height: 133px;
}
aside.news newsentry {
margin: 0 0 10px;
}
aside.news.single {
flex: 2 0 0;
padding: 0 20px 10px;
border-top: none;
margin-top: 0;
align-self: flex-start;
margin: 0;
}
aside.news.single > h4 {
padding: 0 5px 5px;
border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 800px) {
article.page aside.sidebar {
width: 200px;
flex: 0 0 200px;
}
}
@media screen and (max-width: 639px) {
article.page {
padding: 0;
}
article.page .container {
flex-direction: column !important;
border: none !important;
}
article.page aside.sidebar {
width: calc(100% - 80px);
flex: 0 0 auto;
margin: 0px 30px 30px;
border-bottom: 1px solid #ccc;
padding: 0 0 5px;
}
article.page .news.single .page-cover {
margin: 0 0 20px;
}
}
@media screen and (max-width: 360px) {
article.page .container {
flex-direction: column;
}
article.page aside {
margin: 0px 0px 10px;
}
article.page .fr-view {
margin: 0;
width: 100%;
padding: 0 5px;
}
}
@media screen and (max-width: 480px) {
article.page aside.sidebar a {
padding: 9px 10px;
}
}
@media (pointer: coarse) {
article.page aside.sidebar a {
padding: 9px 10px;
}
}
.darkmodeon article.page header {
background: #e05e00;
}
.darkmodeon article.page header h1 {
color: black;
}
.darkmodeon article.page .container {
background: #1a1a1b;
border-right: 1px solid #343536;
border-left: 1px solid #343536;
}
.darkmodeon article.page aside.sidebar h4 {
border-bottom: 1px solid #343536;
}
.darkmodeon article.page aside.sidebar a {
color: #e05e00;
}
.darkmodeon article.page .goback a {
color: #e05e00;
}
.darkmodeon aside.news.single > h4 {
border-bottom: 1px solid #343536;
}
@media screen and (max-width: 639px) {
.darkmodeon article.page aside.sidebar {
border-bottom: 1px solid #343536;
}
}
.darkmodeon .goback a {
color: #e05e00;
}
article.article {
padding: 0;
}
article.article header {
text-align: center;
margin: 20px 20px 0;
padding: 10px;
background: #f57c00;
width: 100%;
max-width: 1920px;
align-self: center;
}
article.article header h1 {
color: black;
}
article.article .loading-spinner {
position: relative;
flex-grow: 2;
height: 300px;
}
article.article .cover {
margin: 0 0 20px;
}
article.article .admin-actions {
margin-bottom: 20px;
}
article.article .fr-view {
margin: 0 20px;
padding: 20px 20px 10px;
width: calc(100% - 40px);
max-width: 800px;
flex: 2 0 0;
align-self: center;
background: transparent;
border-right: 1px solid #343536;
border-left: 1px solid #343536;
}
article.article .fr-view a.cover img {
margin-bottom: 30px;
}
article.article .fr-view main {
padding: 0 5px;
}
article.article fileinfo {
font-size: 0.8em;
}
article.article fileinfo ul {
padding-left: 0;
}
article.article .opencomments {
border: none;
align-self: center;
width: calc(100% - 40px);
max-width: 300px;
background: transparent;
font-size: 1.2em;
color: #bb4d00;
cursor: pointer;
height: 50px;
margin: 0 0 30px;
}
article.article .commentcontainer {
align-self: center;
width: calc(100% - 40px);
max-width: 800px;
margin-bottom: 30px;
min-height: 50px;
position: relative;
}
article.article .goback {
width: calc(100% - 40px);
max-width: 800px;
align-self: center;
padding: 30px 5px 0;
margin-bottom: -10px;
}
article.article .goback a {
font-weight: bold;
text-decoration: none;
color: #bb4d00;
}
article.article .entrymeta {
flex-grow: 2;
font-size: 11px;
color: #757575;
font-weight: bold;
margin: 40px 0 0;
}
article.article .entrymeta a {
color: #bb4d00;
margin: 0 4px;
text-decoration: none;
}
@media screen and (max-width: 639px) {
article.article .fr-view {
margin: 0;
width: 100%;
border: none !important;
}
}
.darkmodeon article.article header {
background: #e05e00;
}
.darkmodeon article.article header h1 {
color: black;
}
.darkmodeon article.article .fr-view {
background: #1a1a1b;
}
.darkmodeon article.article .opencomments {
color: #e05e00;
}
.darkmodeon article.article .goback a {
color: #e05e00;
}
.darkmodeon article.article .entrymeta {
color: hsl(0deg, 0%, 55%);
}
.darkmodeon article.article .entrymeta a {
color: #e05e00;
}
.frontpage-banner {
background-color: #999999;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 150px;
width: calc(100% - 40px);
max-width: 1920px;
align-self: center;
flex: 0 0 150px;
margin-bottom: 20px;
color: white;
text-shadow: 0 0 0.3em #000000;
text-align: right;
font-size: 1.6em;
padding: 10px 20px;
text-decoration: none;
margin: 20px 0;
}
frontpage {
display: flex;
align-self: center;
width: calc(100% - 40px);
max-width: 1200px;
flex: 2 0 0;
}
frontpage .frontpage-news {
display: flex;
flex-direction: column;
flex-grow: 2;
}
frontpage aside.sidebar {
width: 250px;
flex: 0 0 250px;
align-self: flex-start;
margin-right: 20px;
display: flex;
flex-direction: column;
}
frontpage aside.sidebar .categories {
padding: 10px 10px 20px;
margin-bottom: 20px;
background: transparent;
border: none;
}
frontpage aside.sidebar h4 {
font-size: 14px;
padding: 0 5px 5px;
font-weight: bold;
margin: 0 0 10px;
border-bottom: 1px solid #ccc;
}
frontpage aside.sidebar ul {
margin: 0;
padding: 0;
}
frontpage aside.sidebar ul li {
padding-left: 10px;
list-style-type: disc;
list-style-position: inside;
}
frontpage aside.sidebar a {
padding: 2px 5px;
display: block;
text-decoration: none;
color: #bb4d00;
font-size: 14px;
font-weight: bold;
display: inline-block;
max-width: 200px;
}
frontpage .loading-spinner {
height: 100px;
position: relative;
}
frontpage newsitem {
margin-bottom: 30px;
}
frontpage .asunaside {
display: block;
width: 200px;
height: 480px;
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
align-self: center;
}
@media screen and (max-width: 1000px) {
frontpage aside.sidebar {
width: 200px;
flex: 0 0 200px;
}
frontpage aside.sidebar a {
max-width: 150px;
}
}
@media screen and (max-width: 900px) {
frontpage {
flex-direction: column;
}
frontpage aside.sidebar {
width: auto;
flex: 0 0 auto;
align-self: stretch;
margin: 20px 0 30px;
border-bottom: 1px solid #ccc;
order: 2;
}
frontpage aside.sidebar .categories {
display: flex;
flex-direction: column;
align-items: center;
}
frontpage aside.sidebar .categories h4 {
align-self: stretch;
}
frontpage aside.sidebar a {
max-width: unset;
}
}
.daymode.jpegonly frontpage .asunaside {
background-image: url("/assets/img/asuna_frontpage.jpg");
}
.daymode.avifsupport frontpage .asunaside {
background-image: url("/assets/img/asuna_frontpage.avif?v=1");
}
.darkmodeon.jpegonly frontpage .asunaside {
background-image: url("/assets/img/dark_asuna_frontpage.jpg");
}
.darkmodeon.avifsupport frontpage .asunaside {
background-image: url("/assets/img/dark_asuna_frontpage.avif?v=1");
}
@media screen and (max-width: 480px) {
.frontpage-banner {
width: 100%;
}
frontpage {
padding: 0 10px;
margin: 0;
width: 100%;
}
frontpage aside.sidebar a {
padding: 9px 10px;
}
}
@media (pointer: coarse) {
frontpage aside.sidebar a {
padding: 9px 10px;
}
}
.darkmodeon .frontpage-banner {
background-color: #999999;
}
.darkmodeon frontpage aside.sidebar .categories {
background: #1a1a1b;
border: 1px solid #343536;
}
.darkmodeon frontpage aside.sidebar h4 {
border-bottom: 1px solid #343536;
}
.darkmodeon frontpage aside.sidebar a {
color: #e05e00;
}
.darkmodeon .maincontainer {
background: black;
color: #d7dadc;
}
.darkmodeon .error {
color: #e05e00;
}
.darkmodeon .fr-view blockquote {
border-left-color: #d7dadc;
color: #d7dadc;
}
.darkmodeon article.article header span,
.darkmodeon article.login header span,
.darkmodeon article.page header span {
color: hsl(0deg, 0%, 55%);
}
.darkmodeon article.article .content h5,
.darkmodeon article.login .content h5,
.darkmodeon article.page .content h5 {
color: #808080;
}
.darkmodeon .login form input[type=text],
.darkmodeon .login form input[type=password],
.darkmodeon .login form select,
.darkmodeon .login form textarea {
background: #272729;
border: 1px solid #343536;
color: white;
}
.darkmodeon .login form input[type=text]:hover, .darkmodeon .login form input[type=text]:focus,
.darkmodeon .login form input[type=password]:hover,
.darkmodeon .login form input[type=password]:focus,
.darkmodeon .login form select:hover,
.darkmodeon .login form select:focus,
.darkmodeon .login form textarea:hover,
.darkmodeon .login form textarea:focus {
border-color: #e05e00;
}
.darkmodeon .login form input[type=submit] {
border: 1px solid #e05e00;
background: #ffad42;
color: black;
}
.darkmodeon .login form input[type=submit]:hover {
background: #e05e00;
color: white;
}
.darkmodeon .fr-view a {
color: #e05e00;
}
:root {
--primary-bg: #01579b;
--primary-fg: white;
--primary-fg-url: #FFC7C7;
--primary-light-bg: #3D77C7;
--primary-light-fg: white;
--primary-dark-bg: #002f6c;
--primary-dark-fg: white;
--secondary-bg: #f57c00;
--secondary-fg: black;
--secondary-light-bg: #ffad42;
--secondary-light-fg: black;
--secondary-dark-bg: #bb4d00;
--secondary-dark-fg: white;
--table-fg: #333;
--border: #ccc;
--border-fg: black;
--border-fg-url: #8f3c00;
--title-fg: #555;
--meta-fg: #757575;
--meta-light-fg: #999999;
--main-bg: white;
--main-fg: black;
--input-bg: white;
--input-border: #333;
--input-fg: black;
--newsitem-bg: transparent;
--newsitem-border: none;
}
.darkmodeon {
--primary-bg: #013b68;
--primary-fg: white;
--primary-fg-url: #FFC7C7;
--primary-light-bg: #28518B;
--primary-light-fg: white;
--primary-dark-bg: #002f6c;
--primary-dark-fg: white;
--secondary-bg: #e05e00;
--secondary-fg: black;
--secondary-light-bg: #ffad42;
--secondary-light-fg: black;
--secondary-dark-bg: #e05e00;
--secondary-dark-fg: white;
--secondary-darker-fg: #fe791b;
--table-fg: #333;
--border: #343536;
--border-fg: #d7dadc;
--border-fg-url: #e05e00;
--title-fg: #808080;
--meta-fg: hsl(0, 0%, 55%);
--meta-light-fg: #999999;
--main-bg: black;
--main-fg: #d7dadc;
--input-bg: #272729;
--input-border: #343536;
--input-fg: white;
--newsitem-bg: #1a1a1b;
--newsitem-border: 1px solid #343536;
}
/*# sourceMappingURL=app.css.map */