diff --git a/public/s/css/98.css b/public/s/css/98.css new file mode 100644 index 0000000..0609ce7 --- /dev/null +++ b/public/s/css/98.css @@ -0,0 +1,339 @@ +/* 98.css framework - Scoped exclusively for f0ck98 theme */ + +@font-face { + font-family: "Pixelated MS Sans Serif"; + font-style: normal; + font-weight: 400; + src: url("/s/fonts/ms_sans_serif.woff2") format("woff2"); +} + +@font-face { + font-family: "Pixelated MS Sans Serif"; + font-style: normal; + font-weight: 700; + src: url("/s/fonts/ms_sans_serif_bold.woff2") format("woff2"); +} + +html[theme="f0ck98"] { + --w98-silver: #c0c0c0; + --w98-teal: #008080; + --w98-navy: #000080; + --w98-navy-gradient: linear-gradient(90deg, navy, #1084d0); + --w98-dark-shadow: #0a0a0a; + --w98-light-highlight: #ffffff; + --w98-mid-gray: grey; + --w98-light-gray: #dfdfdf; + + color: #000; + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + font-size: 11px; + background-color: var(--w98-silver) !important; + background: var(--w98-silver) !important; +} + +html[theme="f0ck98"] body { + color: #000; + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + font-size: 11px; +} + +html[theme="f0ck98"] .title-bar, +html[theme="f0ck98"] .window, +html[theme="f0ck98"] button, +html[theme="f0ck98"] input, +html[theme="f0ck98"] label, +html[theme="f0ck98"] legend, +html[theme="f0ck98"] li[role=tab], +html[theme="f0ck98"] option, +html[theme="f0ck98"] select, +html[theme="f0ck98"] table, +html[theme="f0ck98"] textarea, +html[theme="f0ck98"] ul.tree-view { + -webkit-font-smoothing: none; + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + font-size: 11px; +} + +html[theme="f0ck98"] u { + border-bottom: 0.5px solid #222; + text-decoration: none; +} + +/* Windows 98 Buttons */ +html[theme="f0ck98"] button, +html[theme="f0ck98"] input[type=reset], +html[theme="f0ck98"] input[type=submit], +html[theme="f0ck98"] .btn { + background: silver; + border: none; + border-radius: 0; + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; + box-sizing: border-box; + color: #000; + min-height: 23px; + min-width: 75px; + padding: 0 12px; +} + +html[theme="f0ck98"] button.default, +html[theme="f0ck98"] input[type=reset].default, +html[theme="f0ck98"] input[type=submit].default, +html[theme="f0ck98"] .btn.default { + box-shadow: inset -2px -2px #0a0a0a, inset 1px 1px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf; +} + +html[theme="f0ck98"] .vertical-bar { + background: silver; + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; + height: 20px; + width: 4px; +} + +html[theme="f0ck98"] button:not(:disabled):active, +html[theme="f0ck98"] input[type=reset]:not(:disabled):active, +html[theme="f0ck98"] input[type=submit]:not(:disabled):active, +html[theme="f0ck98"] .btn:not(:disabled):active { + box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; +} + +html[theme="f0ck98"] button.default:not(:disabled):active, +html[theme="f0ck98"] input[type=reset].default:not(:disabled):active, +html[theme="f0ck98"] input[type=submit].default:not(:disabled):active { + box-shadow: inset 2px 2px #0a0a0a, inset -1px -1px #0a0a0a, inset -2px -2px #fff, inset 3px 3px grey, inset -3px -3px #dfdfdf; +} + +html[theme="f0ck98"] button:focus, +html[theme="f0ck98"] input[type=reset]:focus, +html[theme="f0ck98"] input[type=submit]:focus, +html[theme="f0ck98"] .btn:focus { + outline: 1px dotted #000; + outline-offset: -4px; +} + +html[theme="f0ck98"] :disabled, +html[theme="f0ck98"] :disabled+label, +html[theme="f0ck98"] input[readonly], +html[theme="f0ck98"] input[readonly]+label { + color: grey; +} + +html[theme="f0ck98"] :disabled+label, +html[theme="f0ck98"] button:disabled, +html[theme="f0ck98"] input[type=reset]:disabled, +html[theme="f0ck98"] input[type=submit]:disabled, +html[theme="f0ck98"] .btn:disabled { + text-shadow: 1px 1px 0 #fff; +} + +/* Window Shell & Title Bars */ +html[theme="f0ck98"] .window { + background: silver; + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; + padding: 3px; +} + +html[theme="f0ck98"] .title-bar { + align-items: center; + background: linear-gradient(90deg, navy, #1084d0); + display: flex; + justify-content: space-between; + padding: 3px 2px 3px 3px; +} + +html[theme="f0ck98"] .title-bar.inactive { + background: linear-gradient(90deg, grey, #b5b5b5); +} + +html[theme="f0ck98"] .title-bar-text { + color: #fff; + font-weight: 700; + letter-spacing: 0; + margin-right: 24px; +} + +html[theme="f0ck98"] .title-bar-controls { + display: flex; +} + +html[theme="f0ck98"] .title-bar-controls button { + display: block; + min-height: 14px; + min-width: 16px; + padding: 0; +} + +html[theme="f0ck98"] .title-bar-controls button:active { + padding: 0; +} + +html[theme="f0ck98"] .title-bar-controls button:focus { + outline: none; +} + +html[theme="f0ck98"] .title-bar-controls button[aria-label=Minimize], +html[theme="f0ck98"] .title-bar-controls button[aria-label].minimize { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); + background-position: bottom 3px left 4px; + background-repeat: no-repeat; +} + +html[theme="f0ck98"] .title-bar-controls button[aria-label=Maximize], +html[theme="f0ck98"] .title-bar-controls button[aria-label].maximize { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 2px left 3px; + background-repeat: no-repeat; +} + +html[theme="f0ck98"] .title-bar-controls button[aria-label=Close], +html[theme="f0ck98"] .title-bar-controls button[aria-label].close { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 3px left 4px; + background-repeat: no-repeat; + margin-left: 2px; +} + +/* Status Bar */ +html[theme="f0ck98"] .status-bar { + gap: 1px; + display: flex; + margin: 0 1px; +} + +html[theme="f0ck98"] .status-bar-field { + box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey; + flex-grow: 1; + margin: 0; + padding: 2px 3px; +} + +html[theme="f0ck98"] .window-body { + margin: 8px; +} + +html[theme="f0ck98"] fieldset { + border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2; + margin: 0; + padding: 10px; + padding-block-start: 8px; +} + +html[theme="f0ck98"] legend { + background: silver; +} + +html[theme="f0ck98"] .field-row { + align-items: center; + display: flex; +} + +html[theme="f0ck98"] [class^=field-row]+[class^=field-row] { + margin-top: 6px; +} + +html[theme="f0ck98"] .field-row>*+* { + margin-left: 6px; +} + +html[theme="f0ck98"] label { + align-items: center; + display: inline-flex; + user-select: none; +} + +/* Form Inputs & Textarea */ +html[theme="f0ck98"] input[type=email], +html[theme="f0ck98"] input[type=number], +html[theme="f0ck98"] input[type=password], +html[theme="f0ck98"] input[type=search], +html[theme="f0ck98"] input[type=tel], +html[theme="f0ck98"] input[type=text], +html[theme="f0ck98"] input[type=url], +html[theme="f0ck98"] select, +html[theme="f0ck98"] textarea { + background-color: #fff; + box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; + box-sizing: border-box; + padding: 3px 4px; + border: none; + border-radius: 0; + color: #000; +} + +html[theme="f0ck98"] input[type=email]:disabled, +html[theme="f0ck98"] input[type=number]:disabled, +html[theme="f0ck98"] input[type=password]:disabled, +html[theme="f0ck98"] input[type=search]:disabled, +html[theme="f0ck98"] input[type=tel]:disabled, +html[theme="f0ck98"] input[type=text]:disabled, +html[theme="f0ck98"] input[type=url]:disabled, +html[theme="f0ck98"] textarea:disabled { + background-color: silver; +} + +html[theme="f0ck98"] select { + appearance: none; + -webkit-appearance: none; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + border-radius: 0; + padding-right: 32px; +} + +html[theme="f0ck98"] input[type=email]:focus, +html[theme="f0ck98"] input[type=number]:focus, +html[theme="f0ck98"] input[type=password]:focus, +html[theme="f0ck98"] input[type=search]:focus, +html[theme="f0ck98"] input[type=tel]:focus, +html[theme="f0ck98"] input[type=text]:focus, +html[theme="f0ck98"] input[type=url]:focus, +html[theme="f0ck98"] select:focus, +html[theme="f0ck98"] textarea:focus { + outline: none; +} + +html[theme="f0ck98"] a { + color: #000080; +} + +html[theme="f0ck98"] a:focus { + outline: 1px dotted #000080; +} + +html[theme="f0ck98"] .sunken-panel { + background-color: #fff; + box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; + box-sizing: border-box; + overflow: auto; +} + +/* Scoped Scrollbars for f0ck98 */ +html[theme="f0ck98"] ::-webkit-scrollbar { + width: 16px; + height: 17px; +} + +html[theme="f0ck98"] ::-webkit-scrollbar-corner { + background: #dfdfdf; +} + +html[theme="f0ck98"] ::-webkit-scrollbar-track { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E"); +} + +html[theme="f0ck98"] ::-webkit-scrollbar-thumb { + background-color: #dfdfdf; + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; +} + +html[theme="f0ck98"] ::-webkit-scrollbar-button:vertical:start { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); + height: 17px; + display: block; +} + +html[theme="f0ck98"] ::-webkit-scrollbar-button:vertical:end { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + height: 17px; + display: block; +} diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 61f4451..be013c3 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -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; diff --git a/public/s/fonts/ms_sans_serif.woff2 b/public/s/fonts/ms_sans_serif.woff2 new file mode 100644 index 0000000..83ea806 Binary files /dev/null and b/public/s/fonts/ms_sans_serif.woff2 differ diff --git a/public/s/fonts/ms_sans_serif_bold.woff2 b/public/s/fonts/ms_sans_serif_bold.woff2 new file mode 100644 index 0000000..610c091 Binary files /dev/null and b/public/s/fonts/ms_sans_serif_bold.woff2 differ diff --git a/public/s/js/theme.js b/public/s/js/theme.js index 881cf41..b4e7157 100644 --- a/public/s/js/theme.js +++ b/public/s/js/theme.js @@ -15,7 +15,7 @@ } }; - const themes = window.f0ckThemes || ['amoled', 'atmos', 'f0ck', 'f0ck95d', 'iced', 'orange', 'p1nk', '4d']; + const themes = window.f0ckThemes || ['amoled', 'atmos', 'f0ck', 'f0ck95d', 'f0ck98', 'iced', 'orange', 'p1nk', '4d']; const defaultTheme = window.f0ckDefaultTheme || (window.f0ckSession && window.f0ckSession.default_theme) || themes[0] || 'amoled'; const setTheme = (theme) => { diff --git a/scripts/build-css.mjs b/scripts/build-css.mjs index 12d9148..6511221 100644 --- a/scripts/build-css.mjs +++ b/scripts/build-css.mjs @@ -2,7 +2,7 @@ import fs from 'fs'; import path from 'path'; const cssDir = path.join(process.cwd(), 'public/s/css'); -const files = ['f0ckm.css', 'v0ck.css']; +const files = ['f0ckm.css', 'v0ck.css', '98.css']; const outputFile = path.join(cssDir, 'bundle.css'); let combined = ''; diff --git a/src/index.mjs b/src/index.mjs index 87b405c..072c7e9 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -604,7 +604,7 @@ process.on('uncaughtException', err => { } return; } - const availableThemes = cfg.websrv.themes || ['amoled', 'atmos', 'f0ck', 'f0ck95d', 'iced', 'orange', 'p1nk', '4d']; + const availableThemes = cfg.websrv.themes || ['amoled', 'atmos', 'f0ck', 'f0ck95d', 'f0ck98', 'iced', 'orange', 'p1nk', '4d']; const defaultTheme = cfg.websrv.theme || 'amoled'; req.theme = (req.cookies?.theme && availableThemes.includes(req.cookies.theme)) ? req.cookies.theme : defaultTheme; req.fullscreen = req.cookies.fullscreen || 0; diff --git a/views/snippets/header.html b/views/snippets/header.html index 227cc98..0802f18 100644 --- a/views/snippets/header.html +++ b/views/snippets/header.html @@ -56,6 +56,7 @@ @if(!private_society || session) @if(development || (private_society && !session)) + @endif @if(development)