1
Fork 0
mmaker.moe/static/css/style.css
2025-12-02 23:49:51 -05:00

869 lines
No EOL
17 KiB
CSS

:root {
/* Colors */
--color-bg-darkest: #202022;
--color-bg-dark: #2e2f31;
--color-bg-base: #1c1c1f;
--color-bg-medium: #313134;
--color-text: #d0d1d4;
--color-text-muted: #808080;
--color-accent: #fa0;
--color-link: #0cf;
/* Layout */
--sidebar-width: 188px;
--content-width: 768px;
}
html, body {
background-color: var(--color-bg-base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%232e2f31' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
color: var(--color-text);
text-rendering: optimizeLegibility;
line-height: 1.5;
margin: 0;
padding: 0;
}
h1, h2, h3 {
margin: 0;
padding: 0;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 12px;
}
article {
background-color: var(--color-bg-dark);
margin-bottom: 2px;
padding: 12px 24px;
}
article p {
margin-block: 1.5em;
}
.articlecontent {
margin-bottom: 16px;
}
#left p {
margin-block: 0.5em;
}
a {
text-decoration: underline;
color: var(--color-link);
}
a:hover, a:visited {
color: var(--color-accent);
}
a:active {
color: var(--color-accent);
}
/* article a[href^="http://"]:after, article a[href^="https://"]:after {
margin-left: 3px;
content: "";
display: inline-block;
height: 10px;
width: 10px;
background-image: url("/etc/external-link-ltr-icon.svg");
} */
#left ul, #left li {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
}
.highlight > div {
background-color: var(--color-bg-darkest) !important;
border: 1px solid var(--color-text);
border-left: 3px solid var(--color-accent);
padding: 2px 6px;
}
code {
display: block;
margin: auto;
font-family: "Consolas", monospace;
page-break-inside: avoid;
font-size: 12px;
max-width: 90%;
overflow: auto;
word-wrap: break-word;
}
pre {
background: none !important;
}
hr {
border: none;
border-top: 2px solid var(--color-bg-darkest);
}
table {
table-layout: fixed;
width: 100%;
}
thead {
text-align: left;
}
th, td {
padding: 4px;
border-bottom: 1px solid #79797a;
}
thead th:nth-child(1) {
width: 30%;
}
.important {
background-color: #572B2B;
}
.warning {
background-color: #574E2B;
}
.code {
padding: 3px;
color: #d62672;
background-color: var(--color-bg-darkest);
border-radius: 1px;
vertical-align: middle;
}
header {
background-color: var(--color-bg-dark);
text-align: center;
height: 72px;
padding: 8px;
border: 2px solid var(--color-bg-darkest);
border-radius: 4px;
margin-bottom: 8px;
}
#wrapper {
width: var(--content-width);
margin: 8px auto;
}
#container {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
border: 2px solid var(--color-bg-darkest);
border-radius: 4px;
overflow: visible;
}
#left {
background-color: var(--color-bg-dark);
grid-column: 1;
grid-row: 1;
padding: 8px;
border-right: 2px solid var(--color-bg-darkest);
box-sizing: border-box;
}
main {
grid-column: 2;
grid-row: 1;
}
/* #container::after,#left::after,#content::after
{
content:"";
display:block;
clear:both;
} */
.image-container p, .video-container p {
font-size: 12px;
text-align: center;
margin-block: 0.5em;
margin-bottom: 32px;
}
.image-container img, .video-container video {
padding: 6px;
display: block;
margin: auto;
max-width: 90%;
border: 1px solid var(--color-text);
background-color: var(--color-bg-darkest);
}
.title {
color: var(--color-link);
font-weight: bold;
}
h1 a, h1 a:hover, h1 a:active, h1 a:visited {
text-decoration: none;
color: inherit;
}
.date {
padding: 4px 0px;
}
.video-wrapper, .videoplayer {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-wrapper iframe, .videoplayer video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoplayer video {
background: black !important;
}
.videoplayer-title, .videoplayer-description {
font-weight: bold;
font-size: 16px;
}
.pagination {
padding: 12px 24px;
background-color: var(--color-bg-dark);
margin-top: 2px;
}
.kpan {
padding: 12px 0px;
background-color: var(--color-bg-dark);
margin-top: 8px;
border: 2px solid var(--color-bg-darkest);
border-radius: 4px;
}
.kpan iframe {
margin: 0 auto;
border: none;
display: block;
}
#navlink-ad {
opacity: 1;
}
.tip {
display: block;
border: 1px solid var(--color-bg-dark);
width: 460px;
height: 90px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
padding: 8px;
font-size: 24px;
font-weight: bold;
position: relative;
margin-bottom: 8px;
}
.tip:hover {
border-color: var(--color-accent);
}
.tip-content {
position: absolute;
bottom: 4px;
left: 8px;
}
.medialist.medialistscroll, .videodescription {
height: 224px;
overflow: hidden;
overflow-y: scroll;
}
.videodescription {
padding: 16px;
background-color: var(--color-bg-darkest);
white-space: pre-wrap;
}
.medialist a {
color: var(--color-text) !important;
text-decoration: none;
}
.mediaitem {
position: relative;
width: 496px;
height: 90px;
margin-bottom: 8px;
background-color: var(--color-bg-darkest);
border: 1px solid #1a1a1b;
cursor: pointer !important;
}
.mediaitem:hover {
border-color: var(--color-accent);
}
.mediaitem-thumb {
position: absolute;
left: 0;
z-index: 10;
}
.mediaitem-thumb img {
width: 160px;
height: 90px;
object-fit: cover;
}
.mediaitem-type {
position: absolute;
right: 8px;
bottom: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 36px;
color: var(--color-bg-medium);
user-select: none;
}
.mediaitem-data {
padding-left: 168px;
}
.mediaitem-title, .mediaitem-date {
display: block;
}
.mediaitem-title {
font-weight: bold;
font-size: 16px;
}
.mediaitem-date {
font-style: italic;
font-size: 12px;
}
/* #region isso (comments) */
article hr:last-child {
display: none;
}
.commentarea {
margin-top: 16px;
}
/* Dark theme variable overrides */
:root {
--isso-primary-text-color: #d0d1d4;
--isso-secondary-text-color: #808080;
--isso-border: 1px solid rgba(0, 0, 0, 0.2);
--isso-box-shadow-color: rgba(0, 0, 0, 0.1);
--isso-hover-color: #909090;
--isso-link-hover-color: #fa0;
--isso-link-text-shadow-color: transparent;
--isso-input-background-color: #2e2f31;
--isso-input-outline-color: rgba(0, 0, 0, 0.8);
--isso-button-background-color: #2e2f31;
--isso-button-border: 1px solid #2e2f31;
--isso-button-hover-background-color: #3a3b3d;
--isso-button-active-background-color: #202022;
--isso-preview-border-color: #2e2f31;
--isso-preview-box-shadow-color: #888;
--isso-preview-background: repeating-linear-gradient(-45deg, #202022, #202022 10px, #2e2f31 10px, #2e2f31 20px);
--isso-pre-color: #d0d1d4;
--isso-pre-background-color: #202022;
--isso-pre-border-color: #2e2f31;
--isso-comment-divider-color: rgba(255, 255, 255, 0.1);
--isso-page-author-suffix-color: #d0d1d4;
--isso-target-fade-background-color: #3f3c1c;
}
/* isso base styles */
#isso-thread * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#isso-thread {
padding: 0;
margin: 0;
}
h4.isso-thread-heading {
color: var(--isso-primary-text-color);
font-weight: bold;
}
.isso-feedlink {
float: right;
padding-left: 1em;
}
.isso-feedlink a {
font-size: 0.8em;
vertical-align: bottom;
}
.isso-comment {
max-width: 68em;
margin: 0 auto;
}
.isso-preview .isso-comment {
padding-top: 0;
margin: 0;
}
.isso-comment:not(:first-of-type),
.isso-follow-up .isso-comment {
border-top: 1px solid var(--isso-comment-divider-color);
margin-bottom: 0.5em;
}
.isso-avatar {
display: block;
float: left;
margin: 0.95em 0.95em 0;
}
.isso-avatar svg {
max-width: 48px;
max-height: 48px;
width: 100%;
height: 100%;
border: var(--isso-border);
border-radius: 3px;
box-shadow: 0 1px 2px var(--isso-box-shadow-color);
}
.isso-text-wrapper {
display: block;
padding: 0.95em;
}
.isso-follow-up {
padding-left: calc(7% + 20px);
}
.isso-comment-footer {
font-size: 0.95em;
}
.isso-comment-header {
font-size: 0.85em;
}
.isso-comment-header a {
text-decoration: none;
}
.isso-comment-header .isso-spacer {
padding: 0 6px;
}
.isso-spacer,
.isso-permalink,
.isso-note,
.isso-parent {
color: var(--isso-secondary-text-color);
font-weight: normal;
text-shadow: none;
}
.isso-spacer:hover,
.isso-permalink:hover,
.isso-note:hover,
.isso-parent:hover {
color: var(--isso-hover-color);
}
.isso-note {
float: right;
}
.isso-author {
font-weight: bold;
color: var(--isso-primary-text-color);
}
.isso-page-author-suffix {
font-weight: bold;
color: var(--isso-page-author-suffix-color);
}
.isso-textarea,
.isso-preview {
margin-top: 0.2em;
width: 100%;
border: 1px solid var(--isso-preview-border-color);
border-radius: 2px;
box-shadow: 0 0 2px var(--isso-box-shadow-color);
}
.isso-text {
word-break: break-word;
}
.isso-text p {
margin-top: 0.2em;
}
.isso-text p:last-child {
margin-bottom: 0.2em;
}
.isso-text h1,
.isso-text h2,
.isso-text h3,
.isso-text h4,
.isso-text h5,
.isso-text h6 {
font-size: 130%;
font-weight: bold;
}
.isso-text pre {
background: var(--isso-pre-background-color);
border: 1px solid var(--isso-pre-border-color);
padding: 10px 15px;
color: var(--isso-pre-color);
overflow: auto;
line-height: 1.5em;
}
.isso-text :not(pre) > code {
padding: .2em .4em;
margin: 0;
font-size: 85%;
background-color: var(--isso-pre-background-color);
border-radius: 6px;
}
.isso-comment-footer {
font-size: 0.80em;
color: var(--isso-secondary-text-color);
clear: left;
}
.isso-feedlink,
.isso-comment-footer a {
font-weight: bold;
text-decoration: none;
}
.isso-feedlink:hover,
.isso-comment-footer a:hover {
color: var(--isso-link-hover-color);
text-shadow: var(--isso-link-text-shadow-color) 0 0 1px;
}
.isso-comment-footer > a {
position: relative;
top: .2em;
}
.isso-comment-footer > a + a {
padding-left: 1em;
}
.isso-comment-footer .isso-votes {
color: var(--isso-secondary-text-color);
}
.isso-upvote svg,
.isso-downvote svg {
position: relative;
top: .2em;
}
.isso-comment .isso-postbox {
margin-top: 0.8em;
}
.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
display: none;
}
.isso-postbox {
max-width: 68em;
margin: 0 auto 2em;
clear: right;
}
.isso-form-wrapper {
display: block;
padding: 0;
}
.isso-textarea,
.isso-preview {
margin: 0 0 .3em;
padding: .4em .8em;
border-radius: 3px;
background-color: var(--isso-input-background-color);
border: var(--isso-border);
box-shadow: 0 1px 2px var(--isso-box-shadow-color);
}
.isso-textarea {
outline: 0;
width: 100%;
resize: none;
color: var(--isso-primary-text-color);
}
.isso-form-wrapper input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
margin-left: 0;
}
.isso-notification-section {
font-size: 0.90em;
padding-top: .3em;
display: none;
padding-bottom: 10px;
}
.isso-auth-section {
display: block;
}
.isso-textarea:focus,
.isso-input-wrapper input:focus,
.isso-auth-section input:focus {
outline: 2px solid var(--isso-input-outline-color);
}
.isso-input-wrapper {
display: inline-block;
position: relative;
margin: 0 1% 0 0;
}
.isso-input-wrapper input {
display: block;
padding: .3em 10px;
max-width: 100%;
border-radius: 3px;
background-color: var(--isso-input-background-color);
color: var(--isso-primary-text-color);
line-height: 1.4em;
border: var(--isso-border);
box-shadow: 0 1px 2px var(--isso-box-shadow-color);
}
.isso-input-wrapper label {
display: block;
line-height: 1.4em;
height: 1.4em;
}
.isso-post-action {
display: block;
float: right;
margin: 1.4em 0 0 5px;
}
.isso-post-action > input {
padding: calc(.3em - 1px);
border-radius: 2px;
border: var(--isso-button-border);
background-color: var(--isso-button-background-color);
color: var(--isso-primary-text-color);
cursor: pointer;
outline: 0;
line-height: 1.4em;
box-shadow: 0 1px 2px var(--isso-box-shadow-color);
}
.isso-post-action > input:hover {
background-color: var(--isso-button-hover-background-color);
}
.isso-post-action > input:active {
background-color: var(--isso-button-active-background-color);
}
.isso-preview,
.isso-post-action input[name="edit"],
.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
display: none;
}
.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
display: block;
}
.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
display: inline;
}
.isso-preview {
background: var(--isso-preview-background);
}
.isso-target {
animation: isso-target-fade 5s ease-out;
}
@keyframes isso-target-fade {
0% { background-color: var(--isso-target-fade-background-color); }
}
@media screen and (max-width:600px) {
.isso-input-wrapper {
display: block;
max-width: 100%;
margin: 0 0 .3em;
}
.isso-input-wrapper input {
width: 100%;
}
.isso-post-action {
margin-top: 0;
}
}
/* Custom overrides */
#isso-thread {
margin-top: 32px;
}
h4.isso-thread-heading {
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* Hide delete/edit buttons */
.isso-delete, .isso-edit {
display: none;
}
/* Reverse root comment order */
#isso-root {
display: flex;
flex-direction: column-reverse;
}
.isso-comment {
flex: 0;
width: 100%;
}
.isso-comment[data-hash='6cd03b53e8c2'] > .isso-avatar img {
content: url(/mmaker.png);
}
/* Hide email field */
.isso-auth-section .isso-input-wrapper:nth-child(2) {
display: none;
}
/* #endregion */
/* archive page */
.archive-year {
margin-bottom: 16px;
}
.archive-year h3 {
font-size: 16px;
margin-bottom: 8px;
}
.archive-list {
list-style: none;
padding: 0;
margin: 0 0 0 8px;
}
.archive-list li {
display: flex;
align-items: baseline;
padding: 4px 0;
}
.archive-date {
flex-shrink: 0;
font-family: "Consolas", monospace;
font-size: 12px;
color: var(--color-text-muted);
margin-right: 12px;
}
/* archive responsive visibility */
.archive-mobile { display: none; }
.new {
margin-left: 2px; display:inline-block; height:15px; width:auto; vertical-align:middle;
}
/* mobile */
@media only screen and (max-width: 796px) {
.archive-desktop { display: none !important; }
.archive-mobile { display: flex; }
.new { display: none !important; }
html,body {
background-image: none;
}
header {
border: none;
border-radius: 0px;
}
#wrapper {
width: 100%;
margin: 0;
}
#container {
display: block;
border: none;
border-radius: 0px;
}
#left {
box-sizing: border-box;
border: none;
border-radius: 0px;
width: 100%;
margin: 8px 0;
}
main {
width: 100%;
margin: 0;
}
article {
margin-bottom: 24px;
}
main > article:last-of-type {
margin-bottom: 8px;
}
.kpan {
display: none;
}
.video-wrapper img {
width: 100%;
height: auto;
}
#left ul:not(#buttons) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#left ul:not(#buttons) li {
flex: 0 0 calc((100% / 3) - 12px);
text-align: center;
border: 2px solid var(--color-bg-darkest);
margin: 4px 2px;
padding: 2px;
}
#left ul#contact li {
flex: 0 0 calc((100% / 2) - 12px);
}
ul#buttons {
text-align: center;
}
#left ul#buttons li {
display: inline-block;
}
#left ul > span {
display: block;
width: 100%;
}
#left ul img[style*="float"] {
display: none;
}
.mediaitem {
width: calc(100% - 2px);
}
.mediaitem-type {
display: none;
}
}