/* 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 */