add f0ck98 theme

This commit is contained in:
2026-07-25 22:14:54 +02:00
parent 88e6b6efb9
commit 07de9d4488
8 changed files with 626 additions and 4 deletions

View File

@@ -4026,11 +4026,293 @@ html[theme="f0ck95d"] .admin-search button {
color: black;
}
html[theme="f0ck95d"] .embed-responsive.embed-responsive-16by9 {
html[theme="f0ck98"] .embed-responsive.embed-responsive-16by9 {
background: black;
}
/* ==========================================
f0ck98 Theme - Windows 98 Authentic Retro
========================================== */
html[theme="f0ck98"] {
--accent: #000080;
--bg: silver;
--black: #000000;
--white: #ffffff;
--gray: silver;
--nav-bg: silver;
--nav-brand-border: outset 2px silver;
--nav-brand-bg: silver;
--navigation-links-bg: silver;
--navigation-links-background-linear-gradient: none;
--navigation-links-border-color: #808080;
--navigation-links-box-shadow: none;
--nav-link-background-linear-gradient: none;
--nav-link-box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
--nav-link-hover-bg: #000080;
--nav-border-color: #808080;
--dropdown-bg: silver;
--dropdown-item-hover: #000080;
--nav-brand-font: 'Pixelated MS Sans Serif', Arial, sans-serif;
--font: 'Pixelated MS Sans Serif', Arial, sans-serif;
--pagination-background: silver;
--pagination-box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
--pagination-anchor-box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
--pagination-background-hover: #000080;
--pagination-border-color: #808080;
--metadata-bg: silver;
--badge-bg: silver;
--posts-meta-bg: rgba(192, 192, 192, 0.95);
--badge-sfw: #008080;
--badge-nsfw: #a72828;
--badge-nsfl: #660000;
--badge-tag: #808080;
--scrollbar-color: silver;
--scroller-bg: silver;
--footbar-color: #000000;
--loading-indicator-color: #000000;
--img-border-width: 0;
--img-border-color: #808080;
--bg-gradient: none;
--motd-bg: silver;
--comment-bg: #ffffff;
background-color: silver !important;
background: silver !important;
}
html[theme="f0ck98"] body {
color: #000000;
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
}
html[theme="f0ck98"] a {
color: #000080;
}
html[theme="f0ck98"] a:hover {
color: #1084d0;
}
/* Header & Titlebar */
html[theme="f0ck98"] ._204863 {
background: linear-gradient(90deg, #000080, #1084d0);
color: #ffffff;
width: 100%;
border: 2px outset silver;
line-height: 1.7;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 4px;
box-sizing: border-box;
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
font-weight: bold;
}
html[theme="f0ck98"] ._204863 .location {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff;
}
html[theme="f0ck98"] ._204863 .location::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: var(--favicon-url, url('/s/img/favicon.gif'));
background-size: contain;
background-repeat: no-repeat;
background-position: center;
image-rendering: pixelated;
image-rendering: crisp-edges;
flex-shrink: 0;
}
html[theme="f0ck98"] ._204863::after {
content: " _ ❐ ✕ ";
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: silver;
color: #000000;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
padding: 0 4px;
height: 14px;
line-height: 12px;
display: inline-flex;
align-items: center;
margin-left: auto;
letter-spacing: 1px;
cursor: default;
user-select: none;
}
html[theme="f0ck98"] #tags .badge>a:first-child {
text-shadow: none;
}
html[theme="f0ck98"] .item_title {
background: silver;
color: #000000;
border-left: 2px outset silver;
border-right: 2px outset silver;
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
font-size: 11px;
font-weight: normal;
padding: 3px 8px;
-webkit-font-smoothing: none;
}
/* Navbar */
html[theme="f0ck98"] .nav,
html[theme="f0ck98"] .navbar {
background: silver !important;
border-bottom: 2px outset #fff;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
}
html[theme="f0ck98"] .nav-link {
color: #000000 !important;
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
border-radius: 0;
}
html[theme="f0ck98"] .nav-link:hover,
html[theme="f0ck98"] .nav-link.active {
background: #000080 !important;
color: #ffffff !important;
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
/* Sidebars & Window Containers */
html[theme="f0ck98"] .global-sidebar-left,
html[theme="f0ck98"] .global-sidebar-right,
html[theme="f0ck98"] .about,
html[theme="f0ck98"] .modal-content,
html[theme="f0ck98"] .card {
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
color: #000000;
padding: 6px;
border-radius: 0;
}
/* Item Grid Tiles */
html[theme="f0ck98"] div.posts > a:not(.notif-item) {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
background-color: silver;
}
html[theme="f0ck98"] div.posts > a:not(.notif-item):hover,
html[theme="f0ck98"] div.posts > a:not(.notif-item):focus-visible {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
html[theme="f0ck98"] div.posts > a:not(.notif-item)::after {
color: #000000;
background: silver;
border-top: 1px solid grey;
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
text-shadow: none;
}
/* Comments Section */
html[theme="f0ck98"] .comment-item,
html[theme="f0ck98"] .comments-container {
background: #ffffff;
color: #000000;
box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
html[theme="f0ck98"] .comment-author {
color: #000080 !important;
font-weight: bold;
}
html[theme="f0ck98"] .comment-content {
color: #000000;
}
html[theme="f0ck98"] .comment-children {
border-left: 1px dotted grey;
}
html[theme="f0ck98"] .comment-actions button,
html[theme="f0ck98"] .report-comment-btn,
html[theme="f0ck98"] .reply-btn,
html[theme="f0ck98"] .quote-btn {
color: #000000 !important;
opacity: 1 !important;
}
html[theme="f0ck98"] .comment-actions button svg,
html[theme="f0ck98"] .report-comment-btn svg,
html[theme="f0ck98"] .reply-btn i,
html[theme="f0ck98"] .quote-btn i,
html[theme="f0ck98"] .report-comment-btn i {
color: #000000 !important;
fill: #000000 !important;
}
html[theme="f0ck98"] .report-comment-btn:hover,
html[theme="f0ck98"] .report-comment-btn:hover svg,
html[theme="f0ck98"] .report-comment-btn:hover i {
color: #a72828 !important;
fill: #a72828 !important;
}
html[theme="f0ck98"] .reply-btn:hover,
html[theme="f0ck98"] .quote-btn:hover,
html[theme="f0ck98"] .reply-btn:hover i,
html[theme="f0ck98"] .quote-btn:hover i {
color: #000080 !important;
}
/* Badges & Tags */
html[theme="f0ck98"] .badge,
html[theme="f0ck98"] .badge-light,
html[theme="f0ck98"] .badge-dark,
html[theme="f0ck98"] .badge-success,
html[theme="f0ck98"] .badge-danger {
background: silver;
color: #000000;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
border-radius: 0;
text-shadow: none;
}
/* Dropdown Menu */
html[theme="f0ck98"] .dropdown-menu {
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
border: none;
border-radius: 0;
}
html[theme="f0ck98"] .dropdown-item {
color: #000000;
}
html[theme="f0ck98"] .dropdown-item:hover {
background: #000080;
color: #ffffff;
}
/* Footer / Status Bar */
html[theme="f0ck98"] footer,
html[theme="f0ck98"] .footbar {
background: silver;
color: #000000;
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
padding: 3px 6px;
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
}
/* fullscreen */
html[res="fullscreen"] ._204863 {
border-top: none;