<!DOCTYPE html>
<html data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=Yes, initial-scale=1.2, maximum-scale=1.2, minimum-scale=0.9">
<!-- 引入jQuery和其他JS库 -->
<script type='text/javascript' src='//files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='//files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
<script type='text/javascript' src='//files.jcink.net/html/catcollapse.js'></script>
<script src="https://files.jcink.net/html/jquery-3.7.1.min.js"></script>
<!-- 引入字体和图标库 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
<style>
/****************************************
重置样式
*****************************************/
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
transition: all ease 0.25s;
-moz-transition: all ease 0.25s;
}
*:focus,
button,
textarea,
.forminput {
border: none;
outline: none !important;
}
textarea,
.forminput {
padding: 15px;
background: RGBA(var(--lighterRGB), 0.75);
border: solid 1px RGBA(var(--accentRGB), 0.5);
border-radius: 5px;
outline: none !important;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
/*****************************
隐藏损坏的链接和图片
*****************************/
img[src="<i>No Information</i>"],
img[src=""],
a[href="<i>No Information</i>"],
a[href=""]:not([name]):not([onclick]) {
display: none !important;
}
/*****************************
调整表情符号大小
*****************************/
a[href*="javascript:emoticon"] img,
div.postcolor img[alt*="https"],
td[class*="post"] img[alt*="https"],
a[href*="javascript:add_smilie"] img,
#ucpcontent img[alt*="https"],
div.box img[alt*="https"] {
height: 20px;
}
/****************************************
默认变量
*****************************************/
:root {
--accent: #b479a3;
--accentRGB: 180, 121, 163;
--support: #9893bd;
--supportRGB: 152, 147, 189;
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--darkest: #1c1a1a;
--darkestRGB: 28, 26, 26;
--lighter: #dbdbdb;
--lighterRGB: 219, 219, 219;
--light: #cbcbcb;
--lightRGB: 203, 203, 203;
--lightest: #dbdbdb;
--lightestRGB: 219, 219, 219;
--fontBody: Quicksand;
--fontTitle: LostaMasta_Regular;
--fontSubtitle: Monotalic;
--border: RGBA(var(--darkRGB), 0.15);
--borderAlt: RGBA(var(--darkRGB), 0.1);
}
.group-2 {
--accent: #b479a3 !important;
--accentRGB: 180, 121, 163 !important;
--support: #9893bd !important;
--supportRGB: 152, 147, 189 !important;
}
[data-theme="dark"] * {
--light: #333333;
--lightRGB: 51, 51, 51;
--lighter: #1d1d1d;
--lighterRGB: 29, 29, 29;
--darker: #dbdbdb;
--darkerRGB: 219, 219, 219;
--dark: #c3c3c3;
--darkRGB: 195, 195, 195;
}
[data-theme="dark"] #boardWrapper {
filter: brightness(1) contrast(1.1) grayscale(0.1) !important;
}
[data-theme="dark"] img {
filter: brightness(0.85);
}
[data-theme="dark"] .underlay {
mix-blend-mode: overlay;
}
/****************************************
默认样式
*****************************************/
body, html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 16px/150% var(--fontBody);
color: var(--dark);
}
body {
background-color: var(--light);
background-size: cover;
background-attachment: fixed;
}
a {
text-decoration: none;
cursor: crosshair;
color: var(--accent);
}
button {
padding: 0px;
margin: 0px;
background: unset !important;
}
/****************************************
自定义字体支持
*****************************************/
@font-face {
font-family: "LostaMasta_Thin";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Thin.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Regular";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Regular.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Ornaments";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Ornaments.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Medium";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Medium.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Light";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Light.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_ExtraBold";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_ExtraBold.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Bold";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Bold.otf") format("opentype");
}
@font-face {
font-family: "LostaMasta_Black";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/LostaMasta_Black.otf") format("opentype");
}
@font-face {
font-family: "Monotalic";
src: url("https://files.jcink.net/uploads/homesick/Fonts/Monotalic_Regular.woff2") format("woff2");
}
@font-face {
font-family: "Wallingstar";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Wallingstar.otf") format("woff");
}
@font-face {
font-family: "Feminine";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Feminine.otf") format("opentype");
}
/****************************************
覆盖层样式
*****************************************/
.underlay,
.overlay {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background: var(--overlay);
pointer-events: none;
}
.underlay {
z-index: -1;
background-image: url(https://s10.gifyu.com/images/SDuAr.png),
radial-gradient(
circle at bottom,
var(--light) 30%,
var(--support) 70%,
var(--accent) 90%
);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-blend-mode: soft-light;
background-size: cover;
background-attachment: fixed;
}
.overlay#overlayDark {
--overlay: #d9d9d9;
z-index: 9998;
mix-blend-mode: darken;
}
.overlay#overlayLight {
--overlay: #1c1a1a;
z-index: 9999;
mix-blend-mode: lighten;
}
/****************************************
论坛主容器
*****************************************/
#boardWrapper {
display: block;
position: relative;
min-height: 100vh;
background-color: var(--lighter);
width: 100%;
max-width: 1200px;
min-width: 600px;
margin: 0px auto;
overflow: clip;
}
/****************************************
顶部导航栏
*****************************************/
#topbar {
position: sticky;
z-index: 999;
top: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
background-image: linear-gradient(
135deg,
RGB(var(--accentRGB), 1) 50%,
RGB(var(--supportRGB), 1) 80%
);
padding: 15px 30px 15px 45px;
border-radius: 0px 0px 15px 15px;
}
#topbarBottom {
position: sticky;
z-index: 998;
top: 56px;
display: block;
width: 100%;
height: 30px;
background-color: var(--light);
background-image: linear-gradient(
135deg,
RGB(var(--lightRGB), 1) 50%,
RGB(var(--lightRGB), 1) 80%
);
border-radius: 0px 0px 10px 10px;
box-shadow: 2px 2px 50px RGBA(23, 23, 23, 0.15);
margin-top: -15px;
}
#topbarBottom:before {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
right: -1px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(640deg);
}
/******************
用户信息区域
******************/
#userInfo {
position: absolute;
top: 0px;
padding: 15px;
background-color: var(--accent);
border-radius: 0px 0px 10px 10px;
}
#userInfo:after {
content: "";
position: absolute;
z-index: -1;
top: 70px;
left: -45px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(275deg);
}
#userInfo:before {
content: "";
position: absolute;
z-index: -1;
top: 70px;
right: -45px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(535deg);
}
#userAvatar {
position: relative;
z-index: 2;
width: 80px;
height: 140px;
border-radius: 5px;
background-image: url(https://s12.gifyu.com/images/S51PV.png);
background-size: cover;
filter: drop-shadow(0 10px 60px var(--light));
}
[data-theme="dark"] #userAvatar {
filter: none !important;
}
#userAvatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
#userAvatarUnderlay {
position: absolute;
z-index: -2;
top: 70px;
left: -15px;
width: 140px;
height: 115px;
background-color: var(--light);
border-radius: 0px 0px 15px 15px;
}
#userAvatarUnderlay:after {
content: "";
position: absolute;
z-index: -1;
top: 15px;
left: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(275deg);
}
#userAvatarUnderlay:before {
content: "";
position: absolute;
z-index: -1;
top: 15px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(535deg);
}
#loggedIn,
#loggedOut {
position: absolute;
top: 55px;
display: flex;
flex-direction: column;
gap: 5px;
margin-left: 140px;
}
#loggedOut {
display: none;
}
#loggedIn a,
#loggedOut a,
#loggedIn button,
#loggedOut button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
width: 40px;
height: 40px;
background: var(--accent) !important;
border-radius: 50%;
}
#loggedIn > a:nth-child(3),
#loggedOut > a:nth-child(3) {
background-image: linear-gradient(
180deg,
RGB(var(--accentRGB), 1) 30%,
RGB(var(--supportRGB), 1)
) !important;
}
#loggedIn i,
#loggedOut i {
font-weight: 400;
color: var(--light);
}
#loggedIn a:hover i,
#loggedOut a:hover i,
#loggedIn button:hover i,
#loggedOut button:hover i {
transform: scale(1.3);
}
#loggedIn > button:before,
#loggedOut > button:before {
content: "";
position: absolute;
z-index: -1;
top: 15px;
right: -37px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(550deg);
}
#loggedIn > button:after,
#loggedOut > button:after {
content: "";
position: absolute;
z-index: -1;
top: 15px;
left: -37px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(613deg);
}
#userInformation {
position: relative;
color: var(--lightest);
margin-left: 150px;
}
#userInformation a {
color: var(--lightest);
}
#userNotifications {
display: flex;
flex-direction: row;
gap: 5px;
}
.group-4 #userNotifications a.adminButton {
display: flex !important;
margin-left: 15px;
background-color: var(--accent);
color: var(--light) !important;
}
.group-4 #userNotifications a.adminButton i {
color: var(--light);
}
#userNotifications a,
#theme_switch_click {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
width: 40px;
height: 40px;
background: var(--light);
border-radius: 50%;
filter: drop-shadow(0 10px 60px var(--light));
}
[data-theme="dark"] #userNotifications a,
[data-theme="dark"] #theme_switch_click {
filter: none !important;
}
#theme_switch_click i,
#userNotifications i {
font-weight: 400;
color: var(--accent);
}
#theme_switch_click:hover i,
#userNotifications a:hover i,
#userNotifications button:hover i {
transform: scale(1.3);
}
/******************
暗黑模式切换按钮
******************/
#theme_switch_click #checkbox,
#theme_switch_click > light,
#theme_switch_click > dark {
display: none;
}
[data-theme="light"] #theme_switch_click > light,
[data-theme="dark"] #theme_switch_click > dark {
display: flex !important;
}
/****************************************
主内容区域
*****************************************/
#innerWrapper {
display: grid;
grid-template-columns: 240px 1fr;
}
/****************************************
侧边栏
*****************************************/
#sidebar {
padding-left: 30px;
padding-right: 70px;
text-align: center;
word-break: break-all;
}
#sidebar .loggedIn,
#sidebar .loggedOut {
position: sticky;
top: 205px;
font-weight: 600;
}
#sidebar .loggedIn .loggedInAlias,
#sidebar .loggedOut .loggedInAlias {
display: block;
font-weight: 800;
letter-spacing: -2px;
font-family: var(--fontSubtitle);
color: var(--support);
margin-top: 15px;
}
#sidebar .loggedIn button {
display: block;
color: var(--dark);
margin-top: 30px;
}
#sidebar .loggedIn button i {
color: var(--accent);
font-weight: 600;
}
/****************************************
论坛内容区域
*****************************************/
#boardContent {
position: relative;
margin: 0px 30px 30px 0px;
}
/****************************************
桌面版头部
*****************************************/
#desktopHeader {
position: relative;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 600px;
background: var(--light);
background-size: cover;
padding: 30px;
margin: 30px 30px 85px 0px;
border-radius: 20px;
}
.act-idx #desktopHeader {
display: flex;
}
#desktopHeader img {
position: absolute;
z-index: 2;
max-width: 100%;
margin-top: 180px;
pointer-events: none;
}
#desktopHeader:before {
content: "";
position: absolute;
z-index: 2;
width: 90%;
height: 70%;
background: var(--support);
border-radius: 50%;
filter: blur(50px);
mix-blend-mode: hue;
}
#desktopHeader h1 {
position: absolute;
z-index: 0;
text-transform: uppercase;
font: 800 130px / 100% var(--fontTitle);
color: var(--accent);
text-shadow: 1px 1px 1px RGBA(var(--accentRGB), 0.15),
0px 0px 15px RGBA(var(--accentRGB), 0.75);
text-align: center;
}
[data-theme="dark"] #desktopHeader h1 {
}
#desktopHeader h1 b {
font-size: 205px;
}
#headerSVG {
position: absolute;
top: 0px;
border-radius: 20px 20px 0px 0px;
}
#headerTransition {
position: absolute;
right: 60px;
bottom: -112px;
height: 152px;
width: 130px;
background: var(--light);
}
#headerTransition:before {
content: "";
position: absolute;
z-index: 0;
top: 40px;
right: -37px;
width: 90px;
height: 112px;
border-radius: 50% 0px 0px 50%;
background: var(--lighter);
}
#headerTransition:after {
content: "";
position: absolute;
z-index: 0;
top: 40px;
left: -47px;
width: 90px;
height: 112px;
border-radius: 0% 50px 50px 0%;
background: var(--lighter);
}
#headerTitle {
position: relative;
z-index: 10;
display: none;
padding: 11px 23px;
width: calc(100% - 175px);
color: var(--lighter);
font: 500 33px / 100% var(--fontTitle);
background: var(--accent);
background-image: linear-gradient(
135deg,
RGB(var(--accentRGB), 1) 50%,
RGB(var(--supportRGB), 1) 80%
);
border-radius: 20px 50px 50px 20px;
margin-top: -60px;
}
.act-idx #headerTitle {
display: block;
}
#headerTitle b {
font-weight: 800;
text-transform: uppercase;
}
#headerGrid {
margin-top: 32px;
display: none;
gap: 25px;
grid-template-columns: 1.25fr 2fr;
}
.act-idx #headerGrid {
display: grid;
}
#headerIntroductionPanel {
position: relative;
z-index: 2;
padding: 30px;
font-weight: 600;
background-color: var(--accent);
color: var(--light);
border-radius: 20px;
}
#headerIntroductionPanel .fa-solid {
position: absolute;
top: 5px;
left: 10px;
z-index: 10;
font-size: 60px;
text-shadow: 1px 1px 1px RGBA(var(--supportRGB), 0.15),
0px 0px 15px RGBA(var(--supportRGB), 0.75);
pointer-events: none;
}
.introPanel {
position: relative;
z-index: 2;
padding: 30px;
height: 100%;
color: RGBA(var(--lightestRGB), 0.8);
background: var(--darkest);
border-radius: 20px;
margin: 0px -80px 0px 0px;
}
.panelTransition {
position: absolute;
z-index: 2;
top: -37px;
width: 35px;
height: 37px;
background-color: var(--accent);
}
.panelTransition:before {
content: "";
position: absolute;
left: -20px;
top: 4px;
width: 30px;
height: 34px;
background-color: var(--lighter);
border-radius: 0px 50% 50% 0px;
}
.panelTransition:after {
content: "";
position: absolute;
right: -20px;
top: 4px;
width: 30px;
height: 33px;
background-color: var(--lighter);
border-radius: 50% 0px 0px 50%;
}
#panelSVG {
position: absolute;
bottom: 0px;
z-index: 0;
left: 0px;
height: 100px;
width: 100%;
filter: brightness(0.8);
border-radius: 0px 0px 20px 20px;
}
#headerPanel {
position: relative;
text-indent: 30px;
padding: 30px 30px 30px 60px;
background-color: var(--light);
border-radius: 20px;
}
#headerPanel b {
font-family: var(--fontSubtitle);
font-weight: 500;
background: linear-gradient(
to right,
RGBA(var(--accentRGB), 0.25),
RGBA(var(--supportRGB), 0.25)
);
-webkit-box-decoration-break: clone;
background-size: 100% 40%;
background-repeat: repeat-x;
background-position: bottom;
padding: 0px 5px;
border-radius: 5px;
}
.staff {
position: absolute;
bottom: 0px;
right: 0px;
display: flex;
flex-direction: row;
gap: 15px;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
background: var(--lighter);
border-radius: 20px 0px 0px 0px;
padding: 15px 0px 0px 15px;
margin-top: 30px;
}
.staff:before {
content: "";
position: absolute;
z-index: 0;
top: -39px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(352deg);
}
.staff:after {
content: "";
position: absolute;
z-index: 0;
bottom: 0px;
left: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(724deg);
}
.staff img {
display: block;
width: 75px;
height: 75px;
object-fit: cover;
border-radius: 15px;
}
/****************************************
导航弹出菜单
*****************************************/
#userToggle-container {
position: sticky;
z-index: 9997;
top: 85px;
width: 100%;
max-width: 1200px;
margin: auto;
margin-top: 0px;
}
#userToggle {
position: absolute;
z-index: 9990;
top: 30px;
height: 600px;
width: 100%;
max-width: 1200px;
background-color: RGBA(var(--lightRGB), 1);
border-radius: 20px;
visibility: hidden;
opacity: 0;
}
#userToggle.show {
visibility: visible;
opacity: 1;
}
/****************************************
账户切换弹出菜单
*****************************************/
#subToggle-container {
position: sticky;
z-index: 9997;
top: 85px;
width: 100%;
max-width: 1200px;
margin: auto;
margin-top: 0px;
}
#subToggle {
position: absolute;
z-index: 9990;
top: 30px;
height: 600px;
width: 100%;
max-width: 1200px;
background-color: RGBA(var(--lightRGB), 0.75);
border-radius: 20px;
backdrop-filter: blur(15px);
visibility: hidden;
opacity: 0;
}
#subToggle.show {
visibility: visible;
opacity: 1;
}
#navstrip {
position: sticky;
top: 70px;
z-index: 998;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
background: var(--support);
color: var(--light);
font-weight: 600;
border-radius: 0px 0px 20px 20px;
padding: 15px 30px;
margin-top: -15px;
}
#navstrip:after {
content: "";
position: absolute;
z-index: -3;
top: 0px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--support);
transform: rotate(535deg);
}
.act-idx #navstrip {
display: none !important;
}
#navstrip a {
color: var(--light);
}
#navstrip br {
display: none;
}
/****************************************
主题按钮
*****************************************/
.btnContainer,
.btnFooterContainer,
#topicTitleFormat > tr > td:nth-child(2) {
display: flex;
flex-wrap: wrap;
gap: 15px;
width: 100%;
}
.btnFooterContainer {
flex-direction: row-reverse;
margin-left: 20%;
}
#topicTitleFormat > tr > td:nth-child(1) {
display: none;
}
.btnFooter {
display: flex;
justify-content: space-between;
gap: 15px;
padding: 0px;
}
.btn {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 15px 8px 70px;
background-image: linear-gradient(
120deg,
var(--accent) 0%,
var(--support) 100%
);
font: 800 15px / 131% var(--fontSubtitle);
color: var(--lighter);
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
border-radius: 5px;
box-shadow: 2px 2px 15px RGBA(23, 23, 23, 0.15);
overflow: hidden;
}
.btn:hover {
background-image: linear-gradient(
120deg,
var(--accent) -20%,
var(--support) 100%
);
}
.btn i {
position: absolute;
z-index: 2;
left: -30px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--lighter);
color: var(--support);
font-size: 20px;
width: 80px;
height: 80px;
padding-left: 25px;
border-radius: 50%;
}
.btn:hover i,
.btn:hover:before,
.btn:hover:after {
transform: scale(1.1);
}
.btn:before {
content: "";
position: absolute;
z-index: 1;
left: -25px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--accent);
width: 80px;
height: 80px;
border-radius: 50%;
opacity: 0.75;
}
.btn:after {
content: "";
position: absolute;
z-index: 1;
left: -20px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--accent);
width: 80px;
height: 80px;
border-radius: 50%;
opacity: 0.25;
}
/****************************************
主题标题和描述
*****************************************/
.act-ST #contentWrapper > table:nth-child(3) > tbody > tr > td {
display: flex;
flex-direction: row;
gap: 30px;
margin-bottom: 30px;
}
#topicTitleFormat {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 15px;
grid-template-areas:
"MaintitleTopic MaintitleTopic MaintitleTopic MaintitleTopic"
"MaintitleTopicDescription MaintitleTopicDescription MaintitleTopicDescription MaintitleTopicDescription "
"TopicButtons TopicButtons UserPostLinks UserPostLinks"
"TopicButtons TopicButtons MaintitlePagination MaintitlePagination";
background-image: url(https://s10.gifyu.com/images/SDuAr.png),
linear-gradient(
135deg,
RGB(var(--accentRGB), 1) 40%,
RGB(var(--supportRGB), 1) 90%
);
background-size: cover;
background-attachment: fixed;
background-blend-mode: soft-light;
background-position: center;
padding: 50px 30px 30px;
border-radius: 20px;
color: var(--lighter);
margin: 0px 0px 60px 0px;
filter: brightness(0.9) contrast(1.1);
}
.topic-title {
grid-area: MaintitleTopic;
font: 600 55px/100% var(--fontTitle);
text-shadow: 1px 1px 1px RGBA(var(--darkestRGB), 0.25),
0px 0px 15px RGBA(var(--darkestRGB), 0.25);
}
.topic-desc {
grid-area: MaintitleTopicDescription;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
gap: 10px;
font: 800 18px/150% var(--fontBody);
text-shadow: 1px 1px 1px RGBA(var(--darkestRGB), 0.25),
0px 0px 15px RGBA(var(--darkestRGB), 0.25);
}
.postlinksbar {
grid-area: UserPostLinks;
}
.btnContainer {
grid-area: TopicButtons;
display: flex;
justify-content: flex-start !important;
}
.pagination {
grid-area: MaintitlePagination;
display: flex;
justify-content: flex-end;
font-weight: 600;
text-transform: uppercase;
}
.btnFooter .pagination {
justify-content: flex-start;
margin-top: 20px;
}
.postlinksbar {
font-size: 0px;
}
.postlinksbar a {
position: relative;
padding: 9px 15px 9px 15px;
background-color: RGBA(23, 23, 23, 0.075);
font: 800 11px/150% var(--fontBody);
background-color: var(--accent);
color: var(--lighter);
text-transform: uppercase;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
border-radius: 5px;
overflow-y: clip;
filter: brightness(0.9) contrast(1.1);
}
.postlinksbar strong {
display: flex;
justify-content: flex-end;
gap: 7px;
}
.btnFooterContainer a {
display: inline-block;
}
/****************************************
隐藏元素
*****************************************/
.act-ST #boardContent .row2 {
display: none;
}
#userlinks,
.activeuserstrip,
.newstext,
.toplinks {
display: none;
}
/****************************************
用户组覆盖样式
*****************************************/
.group-2 #sidebar .loggedIn,
.group-2 #loggedIn {
display: none;
}
.group-2 #sidebar .loggedOut {
display: block !important;
}
.group-2 #loggedOut {
display: flex;
}
/****************************************
响应式设计调整
*****************************************/
@media all and (max-width: 1200px) {
#desktopHeader h1 {
font-size: 160px;
}
#desktopHeader h1 b {
font-size: 155px;
}
}
@media all and (max-width: 1180px) {
#headerTitle {
font-size: 30px;
}
}
@media all and (max-width: 1117px) {
#desktopHeader h1 {
font-size: 140px;
}
#desktopHeader h1 b {
font-size: 155px;
}
#headerTransition {
bottom: -139px;
height: 179px;
}
#headerTransition:before,
#headerTransition:after {
height: 138px;
}
}
@media all and (max-width: 1035) {
#desktopHeader h1 {
font-size: 120px;
}
#desktopHeader h1 b {
font-size: 130px;
}
}
@media all and (max-width: 1000px) {
#innerWrapper {
display: grid;
grid-template-columns: 1fr;
}
#boardContent {
position: relative;
margin: 0px 30px 30px;
}
#headerTransition {
bottom: -112px;
height: 152px;
}
#headerTransition:before,
#headerTransition:after {
height: 112px;
}
#sidebar {
display: none;
}
#navstrip {
margin-left: 215px;
}
}
@media all and (max-width: 905px) {
#headerTransition {
bottom: -139px;
height: 179px;
}
#headerTransition:before,
#headerTransition:after {
height: 138px;
}
}
@media all and (max-width: 795px) {
#desktopHeader h1 {
font-size: 125px;
}
#desktopHeader h1 b {
font-size: 130px;
}
}
@media all and (max-width: 750px) {
#userInfo,
#loggedIn,
#loggedOut,
.group-2 #loggedOut #userAvatarUnderlay {
display: none !important;
}
#navstrip {
margin-left: -15px;
}
}
@media all and (max-width: 700px) {
.act-idx #headerGrid {
grid-template-columns: 1fr;
}
#headerPanel {
display: none;
}
.introPanel {
margin: 0px;
}
#panelSVG {
height: 170px;
}
#desktopHeader h1 {
font-size: 90px;
}
#desktopHeader h1 b {
font-size: 100px;
}
}
@media all and (max-width: 666px) {
#panelSVG {
height: 163px;
}
}
@media all and (max-width: 617px) {
.act-idx #headerGrid {
grid-template-columns: 1fr;
}
#desktopHeader {
height: 450px;
}
#headerTitle {
width: 100%;
}
#headerTransition,
#headerPanel {
display: none;
}
}
@media all and (max-width: 604px) {
#panelSVG {
height: 142px;
}
}
</style>
</head>
<body class="act-idx code-<!-- |input_CODE| --> group-4" style="--accent: #<!-- |field_7| -->; --accentRGB: <!-- |field_8| -->; --support: #<!-- |field_9| -->; --supportRGB: <!-- |field_10| -->; --fa-primary-color: var(--accent); --fa-secondary-color: var(--support);">
<!-- 主题颜色设置脚本 -->
<script>
$(document).ready(function() {
var newAccentColor = '#b479a3';
var newAccentRGB = '180, 121, 163';
var newSupportColor = '#9893bd';
var newSupportRGB = '152, 147, 189';
$('body').each(function() {
var $body = $(this);
var currentStyle = $body.attr('style');
var hasPlaceholders = /<!-- \|field_\d+\| -->/.test(currentStyle);
var invalidRGB = /--accentRGB: NaN, NaN, NaN;|--supportRGB: NaN, NaN, NaN;/.test(currentStyle);
var hasOnlyHash = /--accent: #;|--support: #;/.test(currentStyle);
var blankRGB = /--accentRGB:\s*;|--supportRGB:\s*;/.test(currentStyle);
if (hasPlaceholders || invalidRGB || hasOnlyHash || blankRGB) {
var updatedStyle = currentStyle
.replace(/--accent: #<!-- \|field_7\| -->;/, `--accent: ${newAccentColor};`)
.replace(/--accentRGB: <!-- \|field_8\| -->;/, `--accentRGB: ${newAccentRGB};`)
.replace(/--support: #<!-- \|field_9\| -->;/, `--support: ${newSupportColor};`)
.replace(/--supportRGB: <!-- \|field_10\| -->;/, `--supportRGB: ${newSupportRGB};`)
.replace(/--accent: #;/, `--accent: ${newAccentColor};`)
.replace(/--support: #;/, `--support: ${newSupportColor};`)
.replace(/--accentRGB: NaN, NaN, NaN;/, `--accentRGB: ${newAccentRGB};`)
.replace(/--supportRGB: NaN, NaN, NaN;/, `--supportRGB: ${newSupportRGB};`)
.replace(/--accentRGB:\s*;/, `--accentRGB: ${newAccentRGB};`)
.replace(/--supportRGB:\s*;/, `--supportRGB: ${newSupportRGB};`);
$body.attr('style', updatedStyle);
}
});
});
</script>
<!-- 主题切换脚本 -->
<script>
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
} else {
const defaultTheme = "light";
document.documentElement.setAttribute("data-theme", defaultTheme);
localStorage.setItem("theme", defaultTheme);
}
</script>
<!-- 页面背景层 -->
<div class="underlay" id="bodyBackground"></div>
<div class="overlay" id="overlayLight"></div>
<div class="overlay" id="overlayDark"></div>
<!-- 主容器 -->
<div id="boardWrapper">
<!-- 顶部导航栏 -->
<nav id="topbar">
<section id="userInfo">
<div id="userAvatarUnderlay"></div>
<div id="userAvatar">
<a href="/index.php?showuser=0" target="_blank" title="Logged in as Guest"></a>
</div>
</section>
<section id="loggedIn">
<button onclick="navTog()" id="arrowButtons">
<i class="fa-light fa-bars"></i>
</button>
<a href="/index.php?act=UserCP&CODE=01" title="Account control panel">
<i class="fa-light fa-gear"></i>
</a>
<a href="/index.php?act=Login&CODE=03&key=4c158e544b207aa984f4dfdcd17e4839" title="Log Out">
<i class="fa-light fa-right-from-bracket"></i>
</a>
</section>
<section id="loggedOut">
<button onclick="navTog()" id="arrowButtons">
<i class="fa-light fa-bars"></i>
</button>
<a href="/index.php?act=Reg&CODE=00" title="Register a new account">
<i class="fa-light fa-user-plus"></i>
</a>
<a href="/index.php?act=Login&CODE=00" title="Log In">
<i class="fa-light fa-right-to-bracket"></i>
</a>
</section>
<section></section>
<section id="userNotifications">
<a class="notifAlerts" href="/index.php?act=UserCP&CODE=alerts"><i class="fa-light fa-bell"></i></a>
<a class="notifMSG" href="/index.php?act=Msg&CODE=01"><i class="fa-light fa-envelope"></i></a>
<label class="theme-switch" for="checkbox" id="theme_switch_click">
<input type="checkbox" id="checkbox">
<dark><i class="fa-light fa-lightbulb-on"></i></dark>
<light><i class="fa-light fa-lightbulb"></i></light>
</label>
<a class="adminButton" href="/admin.php" target="_blank" style="display: none;"><i class="fa-light fa-crown"></i></a>
</section>
</nav>
<div id="topbarBottom"></div>
<!-- 主内容区域 -->
<content id="innerWrapper">
<aside id="sidebar">
<div class="loggedOut" style="display: none;">
Welcome aboard, <span class="loggedInAlias">Guest</span>
</div>
<div class="loggedIn">
Welcome back, <span class="loggedInAlias">Ciel</span>
<button onclick="subaccountstog()">
<i class="fa-light fa-arrows-retweet"></i> Switch account
</button>
</div>
</aside>
<main id="boardContent">
<!-- 导航弹出菜单容器 -->
<div id="userToggle-container">
<div id="userToggle" class=""> heyo
</div>
</div>
<!-- 账户切换弹出菜单容器 -->
<div id="subToggle-container">
<div id="subToggle" class=""> heyo 2
</div>
</div>
<!-- 论坛头部 -->
<a href="/">
<header id="desktopHeader">
<svg id="headerSVG" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
<defs>
<linearGradient id="gradient-2" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="var(--support)"></stop>
<stop offset="95%" stop-color="var(--accent)"></stop>
</linearGradient>
</defs>
<path d="M 0,700 C 0,700 0,175 0,175 C 112.60714285714286,178.46428571428572 225.21428571428572,181.92857142857142 348,185 C 470.7857142857143,188.07142857142858 603.7499999999999,190.75 721,198 C 838.2500000000001,205.25 939.7857142857142,217.07142857142858 1057,214 C 1174.2142857142858,210.92857142857142 1307.107142857143,192.96428571428572 1440,175 C 1440,175 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient-2)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path>
<defs>
<linearGradient id="gradient-2" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="var(--support)"></stop>
<stop offset="95%" stop-color="var(--accent)"></stop>
</linearGradient>
</defs>
<path d="M 0,700 C 0,700 0,350 0,350 C 120.28571428571428,330.9642857142857 240.57142857142856,311.92857142857144 371,319 C 501.42857142857144,326.07142857142856 642,359.24999999999994 769,355 C 896,350.75000000000006 1009.4285714285713,309.0714285714286 1119,302 C 1228.5714285714287,294.9285714285714 1334.2857142857142,322.46428571428567 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient-2)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 350)"></path>
<defs>
<linearGradient id="gradient-2" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="var(--support)"></stop>
<stop offset="95%" stop-color="var(--accent)"></stop>
</linearGradient>
</defs>
<path d="M 0,700 C 0,700 0,525 0,525 C 121.92857142857142,491.1071428571429 243.85714285714283,457.2142857142857 371,476 C 498.14285714285717,494.7857142857143 630.5,566.25 759,562 C 887.5,557.75 1012.1428571428571,477.78571428571433 1125,459 C 1237.857142857143,440.21428571428567 1338.9285714285716,482.60714285714283 1440,525 C 1440,525 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient-2)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 350)"></path>
</svg>
<img src="https://s12.gifyu.com/images/SDudw.png">
<h1>night sky with <b>exit wounds</b></h1>
<!-- 只在论坛首页显示的过渡元素 -->
<div id="headerTransition"></div>
</header>
</a>
<!-- 标题区域 -->
<div id="headerTitle">
Welcome to <b>Night Sky with Exit Wounds</b>
</div>
<div id="headerGrid">
<div id="headerIntroductionPanel">
<i class="fa-solid fa-moon-stars"></i>
<div class="panelTransition"></div>
<div class="introPanel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<svg width="100%" height="100%" id="panelSVG" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
<path d="M 0,400 L 0,75 C 149.86666666666667,55.266666666666666 299.73333333333335,35.53333333333334 439,39 C 578.2666666666667,42.46666666666666 706.9333333333334,69.13333333333333 872,79 C 1037.0666666666666,88.86666666666667 1238.5333333333333,81.93333333333334 1440,75 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="var(--support)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<path d="M 0,400 L 0,175 C 195.33333333333331,151.93333333333334 390.66666666666663,128.86666666666665 549,137 C 707.3333333333334,145.13333333333335 828.6666666666667,184.46666666666667 971,196 C 1113.3333333333333,207.53333333333333 1276.6666666666665,191.26666666666665 1440,175 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="var(--support)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
<path d="M 0,400 L 0,275 C 109.33333333333331,263.4 218.66666666666663,251.8 396,259 C 573.3333333333334,266.2 818.6666666666667,292.2 1004,298 C 1189.3333333333333,303.8 1314.6666666666665,289.4 1440,275 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="var(--support)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>
</div>
<div id="headerPanel">
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
????
</main>
</content>
</div>
<!-- 主题切换和交互脚本 -->
<script type="text/javascript">
// 初始化主题切换状态
if (localStorage.getItem("theme") === "light") {
$('#checkbox').prop('checked', true)
}
var themeToggle = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
// 切换主题函数
function switchTheme(e) {
console.log(themeToggle)
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
}
themeToggle.addEventListener("change", switchTheme, false);
</script>
<!-- 引入fitty库用于文本适配 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.3.6/fitty.min.js"></script>
<!-- 自定义交互脚本 -->
<script>
// 点击效果函数
function CLICKED(e) {
if (!document.querySelector(e)) return false;
const toggling = document.querySelectorAll(e);
for (const e of toggling) {
e.addEventListener("click", function () {
e.classList.toggle("clicked");
});
}
}
CLICKED(".miniAvatarContainer");
// 检查新消息
$(document).ready(function () {
var newMsg = parseInt("") != NaN ? parseInt("") : 0;
if (newMsg > 0) {
$(".noNewMessage").addClass("newMessage");
} else {
$(".noNewMessage").removeClass("newMessage");
}
});
// 检查新通知
$(document).ready(function () {
var newAlert = parseInt("") != NaN ? parseInt("") : 0;
if (newAlert > 0) {
$(".noNewNotification").addClass("newNotification");
} else {
$(".noNewNotification").removeClass("newNotification");
}
});
// 使用fitty调整文本大小
fitty(".loggedInAlias", { minSize: 18, maxSize: 60, multiLine: false });
// 导航菜单切换函数
function navTog() {
const x = document.getElementById("userToggle");
x.classList.toggle("show");
}
// 子账户切换函数
function subaccountstog() {
const x = document.getElementById("subToggle");
x.classList.toggle("show");
}
</script>
</body>
</html>
index.html
style.css
index.js