<!DOCTYPE html>
<html data-theme="light">
<head>
<title>𝐀 𝕄𝕀𝔻𝕊𝕌𝕄𝕄𝔼ℝ 𝐍𝐈𝐆𝐇𝐓'𝐒 𝐃𝐑𝐄𝐀𝐌</title>
<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>
<script src="https://files.jcink.net/html/catcollapse.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<body class="act-idx code-00 group-4" style="--accent: #794f4e; --accentRGB: 121, 79, 78; --support: #8f6356; --supportRGB: 143, 99, 86;">
<script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script>
// 检查并应用保存的主题
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
}
</script>
<!-- 背景层和覆盖层 -->
<div class="underlay" id="bodyBackground"></div>
<div class="overlay" id="overlayLight"></div>
<div class="overlay" id="overlayDark"></div>
<div id="boardWrapper">
<!-- 侧边栏 -->
<div id="boardSidebar">
<div class="stickyBar">
<div class="icons">
<!-- 返回顶部按钮 -->
<div onclick="scrollSmoothToTop()">
<i class="fa-light fa-arrow-up"></i>
</div>
<!-- 主题切换开关 -->
<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>
<!-- 滚动到底部按钮 -->
<div onclick="scrollSmoothToBottom()">
<i class="fa-light fa-arrow-down"></i>
</div>
</div>
</div>
</div>
<div id="innerWrapper">
<!-- 顶部栏背景 -->
<div id="topbarBacking"></div>
<!-- 顶部栏 -->
<div id="boardTopbar">
<div id="desktopTopbar">
<!-- 访客链接 -->
<div class="guestLinks" style="display: none;">
<section class="guestAvatar">
</section>
<section class="memberInfo">
<span>访客</span>
<nav class="userLinks">
<a href="/index.php?act=Login&CODE=00"><i class="fa-duotone fa-arrow-right-to-arc"></i></a>
<a href="/index.php?act=Reg&CODE=00"><i class="fa-duotone fa-user-plus"></i></a>
</nav>
</section>
</div>
<!-- 会员链接 -->
<div class="memberLinks">
<button onclick="usertoggle()" class="memberAvatar">
<img src='https://files.jcink.net/uploads2/titania//av-1.png?1707437753' border='0' width='300' height='450' alt='' />
</button>
<section class="memberInfo">
<span><a href="/index.php?showuser=1" target="_blank">Root Admin</a></span>
<nav class="userLinks">
<a href="/index.php?act=Msg&CODE=01" class="noNewMessage"><i class="fa-duotone fa-envelope"></i></a>
<a href="/index.php?act=UserCP&CODE=alerts" class="noNewNotification"><i class="fa-duotone fa-bell"></i></a>
<a href="/index.php?act=Login&CODE=03&key=e196e32b667fd49fc8f2854ae63f28f3"><i class="fa-duotone fa-power-off"></i></a>
</nav>
</section>
</div>
</div>
<!-- 移动端顶部栏 -->
<div id="mobileTopbar" style="display: none;">
<i class="cp cp-menu"></i>
</div>
</div>
<!-- 用户切换菜单 -->
<div id="linkmenu-container">
<div id="linkmenu">
</div>
</div>
<!-- 导航栏 -->
<nav id="boardNavigation">
<div id='navstrip' align='left'><i class="fa-duotone fa-heart-circle-plus"></i> <a href='/index.php?act=idx'>𝐀 𝕄𝕀𝔻𝕊𝕌𝕄𝕄𝔼ℝ 𝐍𝐈𝐆𝐇𝐓'𝐒 𝐃𝐑𝐄𝐀𝐌</a></div>
<br />
<br />
</nav>
<!-- 头部区域 -->
<a href="/">
<div id="boardHeader">
<h1>A Midsummer Night's Dream</h1>
<h2>A Midsummer Night's Dream</h2>
<h3>A Midsummer Night's Dream</h3>
</div>
</a>
<!-- 过渡区域 -->
<div id="boardTransition">
</div>
<!-- 主要内容区域 -->
<div id="boardCrotch">
<div id="crotchContent">
<article class="introduction">
这里放内容，等我设计好后再添加 - 我想把它改回标签页形式，因为现在不是资源社区了？
</article>
<article class="divider"></article>
<article class="updates">
<div class="news">
<span class="update">
<b>标题</b>
<span>描述</span>
</span>
<span class="date">1月 <b>15</b></span>
</div>
<div class="news">
<span class="update">
<b>盛大开幕</b>
<span>描述</span>
</span>
<span class="date">1月 <b>13</b></span>
</div>
</article>
</div>
</div>
<!-- 内容包装器 -->
<div id="contentWrapper">
<!-- 分类一：入门指南 -->
<div class="categoryContainer category-1" style="display: none;">
<div class="forumContainer guidebook forum-1" style="display:none;">
<span class="forumTitle">
<h1><a href='?showforum=1'>指南手册</a></h1>
<h2><a href='?showforum=1'>指南手册</a></h2>
</span>
<span class="forumDescription">注册账号前，请先阅读我们的指南手册。</span>
</div>
<!-- 社区公告论坛 -->
<div class="forumContainer forum-2">
<span class="forumTitle">
<h1><a href='?showforum=2'>社区公告</a></h1>
<h2><a href='?showforum=2'>社区公告</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription">
<div class="bulletinLinks"><a href="/"><i class="fa-duotone fa-palette"></i> 测试区</a><a href="/"><i class="fa-duotone fa-puzzle"></i> 游戏</a></div> 这个论坛专门讨论所有与角色无关的内容，涵盖从测试区到论坛游戏的各个主题。
</span>
<span class="forumReplies">8</span>
<span class="forumTopics">1</span>
<span class="forumTopicTitle"><a href='/index.php?showtopic=1&view=getnewpost' title='欢迎来到您的新论坛'>欢迎来到您的新论坛</a></span>
<span class="forumLastPoster avatar"><img src="https://titania.jcink.net/uploads2/titania//av-15.png?1707499479"></span>
<span class="forumLastPoster userLink"><a href='/index.php?showuser=15'>Eden</a></span>
<span class="forumLastPost">49分钟前</span>
</div>
<!-- 服务和版务论坛 -->
<div class="forumContainer forum-3">
<span class="forumTitle">
<h1><a href='?showforum=3'>服务与版务</a></h1>
<h2><a href='?showforum=3'>服务与版务</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription">
<div class="moderationLinks"><a href="/"><i class="fa-duotone fa-laptop-code"></i> 模板库</a> <a href="/"><i class="fa-duotone fa-comments-question-check"></i> 版务</a> </div> 在此论坛申请所需的角色和帖子版务，以及浏览我们的模板库。
</span>
<span class="forumReplies">0</span>
<span class="forumTopics">1</span>
<span class="forumTopicTitle"><a href='/index.php?showtopic=2&view=getnewpost' title='这里会有一个更长的标题示例'>这里会有一个更长的标题示例...</a></span>
<span class="forumLastPoster avatar"><img src="https://titania.jcink.net/uploads2/titania//av-1.png?1707437753"></span>
<span class="forumLastPoster userLink"><a href='/index.php?showuser=1'>!Root</a></span>
<span class="forumLastPost">2024年2月7日 06:36</span>
</div>
<!-- 最新公告论坛 -->
<div class="forumContainer forum-4">
<span class="forumTitle">
<h1><a href='?showforum=4'>最新公告</a></h1>
<h2><a href='?showforum=4'>最新公告</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription">
<div class="decal"><i class="fa-duotone fa-bullhorn"></i></div>
</span>
<span class="forumReplies">1</span>
<span class="forumTopics">1</span>
<span class="forumTopicTitle"><a href='/index.php?showtopic=3&view=getnewpost' title='这是一个公告示例，这里有一个更长的'>这是一个公告示例，这里有...</a></span>
<span class="forumLastPoster avatar"><img src="/uploads2/titania//av-10.png?1707456778"></span>
<span class="forumLastPoster userLink"><a href='/index.php?showuser=10'>Aureliano Reyes</a></span>
<span class="forumLastPost">昨天 07:09</span>
</div>
</div>
<!-- 分类二：角色创建 -->
<div class="categoryContainer category-2" style="display: none;">
<div class="forumContainer forum-5">
<span class="forumTitle">
<h1><a href='?showforum=5'>角色创建</a></h1>
<h2><a href='?showforum=5'>角色创建</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription"></span>
<span class="forumReplies">0</span>
<span class="forumTopics">0</span>
<span class="forumTopicTitle">----</span>
<span class="forumLastPoster avatar"><img src="https://"></span>
<span class="forumLastPoster userLink"></span>
<span class="forumLastPost">--</span>
</div>
<div class="forumContainer forum-6">
<span class="forumTitle">
<h1><a href='?showforum=6'>角色统计</a></h1>
<h2><a href='?showforum=6'>角色统计</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription"></span>
<span class="forumReplies">0</span>
<span class="forumTopics">0</span>
<span class="forumTopicTitle">----</span>
<span class="forumLastPoster avatar"><img src="https://"></span>
<span class="forumLastPoster userLink"></span>
<span class="forumLastPost">--</span>
</div>
<div class="forumContainer forum-7">
<span class="forumTitle">
<h1><a href='?showforum=7'>角色发展</a></h1>
<h2><a href='?showforum=7'>角色发展</a></h2>
</span>
<div class="forumFocal"></div>
<span class="forumDescription"></span>
<span class="forumReplies">0</span>
<span class="forumTopics">0</span>
<span class="forumTopicTitle">----</span>
<span class="forumLastPoster avatar"><img src="https://"></span>
<span class="forumLastPoster userLink"></span>
<span class="forumLastPost">--</span>
</div>
</div>
</div>
</div>
</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>
<script>
// 新消息通知
$(document).ready(function() {
var newMsg = parseInt("0") != NaN ? parseInt("0") : 0;
if (newMsg > 0) {
$(".noNewMessage").addClass("newMessage");
} else {
$(".noNewMessage").removeClass("newMessage");
}
});
// 新提醒通知
$(document).ready(function() {
var newAlert = parseInt("0") != NaN ? parseInt("0") : 0;
if (newAlert > 0) {
$(".noNewNotification").addClass("newNotification");
} else {
$(".noNewNotification").removeClass("newNotification");
}
});
</script>
<script>
// 用户菜单切换
function usertoggle() {
var x = document.getElementById("linkmenu");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
scrollingElement = document.scrollingElement || document.body;
// 滚动到底部
function scrollToBottom() {
scrollingElement.scrollTop = scrollingElement.scrollHeight;
}
// 滚动到顶部
function scrollToTop(id) {
scrollingElement.scrollTop = 0;
}
// 平滑滚动到底部（需要jQuery）
function scrollSmoothToBottom(id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
},
500
);
}
// 平滑滚动到顶部（需要jQuery）
function scrollSmoothToTop(id) {
$(scrollingElement).animate({
scrollTop: 0
},
500
);
}
</script>
<script>
// 清理子账户选择器中的格式
document.querySelectorAll('[name="sub_id"] option').forEach(e => {
e.innerHTML = e.innerHTML.replace(' »', '')
})
// 导航切换
function navTog() {
const x = document.getElementById("userToggle");
x.classList.toggle("show");
}
// 子账户切换
function subaccountstog() {
const x = document.getElementById("avatarSubaccounts");
x.classList.toggle("show")
}
// 子账户切换器样式转换
if (!(document.querySelector(".imgload-Yes"))) {
let switcher = document.querySelector("#subaccounts_menu select");
let characters = switcher.querySelectorAll("option");
let newSwitch = `<div class="switch">`;
characters.forEach((character, i) => {
if (i !== 0) {
let characterName = character.innerText.trim();
let characterId = character.value;
newSwitch += `<a title="${characterName}"><label class="switch-block">
<input type="checkbox" value="${characterId}" onchange="this.form.submit()" name="sub_id" />
<div style="width: 45px; height: 45px; border-radius: 8px; background-size: cover; background-position: center; background-image: url(https://files.jcink.net/uploads2/titania/av-${characterId}.png), url(https://files.jcink.net/uploads2/titania/av-${characterId}.gif), url(https://files.jcink.net/uploads2/titania/av-${characterId}.jpg), url(https://files.jcink.net/uploads2/titania/av-${characterId}.jpeg), url(https://cdn.discordapp.com/attachments/1201396006944772096/1202848282510889010/image.png);"></div></label></a>`;
}
});
newSwitch += `</div>`;
switcher.insertAdjacentHTML("afterend", newSwitch);
switcher.remove();
}
</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;
}
/****************************************
默认样式
-------
这部分设置了body、html和链接的默认样式。
*****************************************/
body,
html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 16px/150% var(--fontBody);
color: var(--dark);
}
body {
background-image: radial-gradient(
circle at top center,
RGBA(var(--supportRGB), 0.5),
RGBA(var(--accentRGB), 0.5)
),
url(https://s13.gifyu.com/images/S0H63.png);
background-size: cover;
background-attachment: fixed;
}
a {
text-decoration: none;
cursor: crosshair;
color: var(--accent);
}
/****************************************
默认CSS变量
-------
这部分定义了默认的CSS变量。
*****************************************/
:root {
--accent: #a5735e;
--accentRGB: 165, 115, 94;
--support: #96a89a;
--supportRGB: 150, 168, 154;
--feature: #e2dcc7;
--featureRGB: 226, 220, 199;
--neutral: #9d8a80;
--neutralRGB: 157, 138, 128;
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--darkest: #1c1a1a;
--darkestRGB: 28, 26, 26;
--lighter: #dbdbdb;
--lighterRGB: 219, 219, 219;
--light: #c3c3c3;
--lightRGB: 195, 195, 195;
--lightest: #dbdbdb;
--lightestRGB: 219, 219, 219;
--fontBody: Source Serif Pro;
--fontTitle: Huova;
--fontTitleAlt: HuovaOutline;
--border: RGBA(var(--darkRGB), 0.15);
--borderAlt: RGBA(var(--darkRGB), 0.1);
}
.group-2 {
--accent: #a5735e !important;
--accentRGB: 165, 115, 94 !important;
--support: #96a89a !important;
--supportRGB: 150, 168, 154 !important;
}
/**************************
深色主题变量
--------------------
这部分在主题切换时自动反转上述变量，创建简单无缝的变化。
**************************/
[data-theme="dark"] {
--dark: #dcdcdc;
--darkRGB: 220, 220, 220;
--lighter: #1c1a1a;
--lighterRGB: 28, 26, 26;
--light: #2a2828;
--lightRGB: 42, 40, 40;
}
#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;
}
/****************************************
覆盖层
-------
*****************************************/
.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: radial-gradient(
circle at top center,
RGBA(var(--supportRGB), 0.5),
RGBA(var(--accentRGB), 0.5)
),
url(https://s13.gifyu.com/images/SC4dn.png);
background-size: cover;
background-attachment: fixed;
background-blend-mode: soft-light;
filter: brightness(0.9);
}
[data-theme="dark"] .underlay {
background-blend-mode: multiply;
filter: brightness(0.7);
}
.overlay#overlayLight {
--lightest: #ededed;
z-index: 9998;
mix-blend-mode: darken;
}
.overlay#overlayLight {
--overlay: #1c1a1a;
z-index: 9999;
mix-blend-mode: lighten;
}
/****************************************
字体
-------
*****************************************/
@font-face {
font-family: "Huova";
src: url("https://assets.codepen.io/3254510/Huova.otf") format("opentype");
}
@font-face {
font-family: "HuovaOutline";
src: url("https://assets.codepen.io/3254510/HuovaOutline.otf")
format("opentype");
}
/****************************************
论坛包装器
-------
*****************************************/
#boardWrapper {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
width: clamp(450px, 100%, 1300px);
margin: auto;
}
/****************************************
侧边栏
-------
*****************************************/
#boardSidebar {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
padding: 15px;
color: var(--neutral);
font: 600 18px/120% var(--fontBody);
background: var(--light);
}
#boardSidebar label {
display: flex;
flex-direction: column;
align-items: center;
width: 20px;
}
#boardSidebar dark i,
#boardSidebar light i {
color: var(--dark);
}
.stickyBar {
position: sticky;
top: 20px;
}
.stickyBar .icons {
height: calc(100vh - 40px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 25px;
}
/****************************************
内部包装器
-------
*****************************************/
#innerWrapper {
}
/****************************************
顶部栏
-------
*****************************************/
#topbarBacking {
position: sticky;
z-index: 9990;
top: 0px;
width: 100%;
height: 50px;
background: var(--light);
margin-bottom: -50px;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.35);
}
#boardTopbar {
position: sticky;
top: 0px;
z-index: 9990;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
padding: 15px 30px 15px 0px;
background-color: var(--light);
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.35);
border-radius: 0px 0px 20px 0px;
}
#boardTopbar:after {
content: "";
position: absolute;
z-index: 9990;
right: -34px;
top: 0px;
width: 50px;
height: 50px;
background: var(--light);
pointer-events: none;
}
#boardTopbar:before {
content: "";
position: absolute;
z-index: 0;
bottom: 10px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(172deg);
}
#desktopTopbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
#desktopTopbar:before {
content: "";
position: absolute;
z-index: 9990;
top: 85px;
left: -1px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(172deg);
}
#desktopTopbar .guestAvatar,
#desktopTopbar .memberAvatar {
width: 70px;
height: 70px;
background-color: var(--accent);
background-image: url(https://cdn.discordapp.com/attachments/1201396006944772096/1202848282510889010/image.png);
background-size: cover;
border-radius: 10px;
}
#desktopTopbar .guestAvatar:hover,
#desktopTopbar .memberAvatar:hover {
cursor: crosshair;
}
#desktopTopbar .guestAvatar img,
#desktopTopbar .memberAvatar img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 10px;
}
#desktopTopbar .guestAvatar:active,
#desktopTopbar .memberAvatar:active {
transform: translateY(10px) scale(0.99);
}
#desktopTopbar .memberInfo,
#desktopTopbar .memberInfo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-transform: uppercase;
gap: 10px;
}
#desktopTopbar .memberInfo a {
color: var(--dark);
}
#desktopTopbar .memberInfo span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font: 800 25px/120% var(--fontTitle);
color: var(--dark);
}
#desktopTopbar .guestInfo,
#desktopTopbar .memberInfo {
font: 600 25px/80% var(--fontBody);
}
.group-2 .guestLinks {
display: flex !important;
}
.group-2 .memberLinks {
display: none !important;
}
#desktopTopbar .guestLinks,
#desktopTopbar .memberLinks {
display: flex;
gap: 25px;
}
#desktopTopbar .userLinks {
display: flex;
flex-direction: row;
gap: 20px;
}
#desktopTopbar .guestLinks a,
#desktopTopbar .memberLinks a {
}
#desktopTopbar .memberLinks a {
text-transform: uppercase;
}
#desktopTopbar .guestLinks a:hover i,
#desktopTopbar .memberLinks a:hover i {
transform: scale(1.1);
}
#desktopTopbar .guestLinks a i,
#desktopTopbar .memberLinks a i {
color: var(--neutral);
}
#desktopTopbar a.newMessage i,
#desktopTopbar a.newNotification i {
color: var(--accent) !important;
animation: newanimation 2s ease infinite !important;
}
@keyframes newanimation {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-2px);
}
}
/***************
移动端样式
-------
***************/
#mobileTopbar i {
font-size: 30px;
}
/****************************************
粘性导航树
-------
*****************************************/
#boardNavigation {
position: sticky;
z-index: 9990;
top: 50px;
right: 0px;
}
#boardNavigation br {
display: none;
}
#navstrip {
position: absolute;
top: -50px;
right: 0px;
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
background: var(--accent);
color: var(--lightest);
padding: 13px;
border-radius: 0px 0px 0px 15px;
}
#navstrip:before {
content: "";
position: absolute;
z-index: 0;
top: 0px;
left: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(274deg);
}
#navstrip a {
color: var(--lightest);
}
/****************************************
登录用户导航切换
-------
*****************************************/
#linkmenu-container {
position: sticky;
z-index: 9989;
top: 0px;
margin-top: -50px;
}
#linkmenu {
position: absolute;
z-index: 9989;
top: 100px;
height: 0px;
width: calc(100% - 0px);
border-radius: 0px;
visibility: hidden;
overflow: hidden;
transition: all 0.15s linear;
margin-top: -100px;
}
#linkmenu.show {
height: calc(100vh - 0px);
padding: 25px 0px;
background: RGBA(var(--lightRGB), 0.75);
backdrop-filter: blur(10px);
visibility: visible;
transition: all 0.15s linear;
}
/****************************************
头部区域
-------
*****************************************/
.act-idx #boardHeader,
.act-idx #boardHeader:after {
height: 675px;
}
#boardHeader {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
height: 350px;
background-image: url(https://s13.gifyu.com/images/S0H63.png);
background-position: bottom center;
background-size: cover;
width: 100%;
color: var(--lightest);
margin-top: -10px;
}
#boardHeader:before {
content: "";
display: block;
position: absolute;
top: -50px;
height: 350px;
width: 350px;
background: var(--accent);
border-radius: 50%;
filter: blur(140px);
}
#boardHeader:after {
content: "";
display: block;
position: absolute;
height: 350px;
background-image: url(https://s13.gifyu.com/images/SCm8W.png);
background-position: bottom center;
background-size: cover;
width: 100%;
}
#boardHeader h1 {
text-align: center;
font: 400 86px/80% var(--fontTitle);
max-width: 650px;
}
#boardHeader h2 {
position: absolute;
z-index: 2;
text-align: center;
font: 400 86px/80% var(--fontTitleAlt);
max-width: 650px;
}
#boardHeader h3 {
position: absolute;
z-index: -1;
text-align: center;
font: 400 156px/80% var(--fontTitleAlt);
opacity: 0.1;
}
/****************************************
头部下方区域
-------
*****************************************/
#boardCrotch {
position: relative;
display: grid;
grid-template-columns: 1fr;
padding: 30px 30px 30px 0px;
background-color: var(--darkest);
overflow: clip;
}
#crotchContent {
position: relative;
display: grid;
grid-template-columns: 1fr 0fr 0.5fr;
gap: 60px;
padding: 30px;
color: var(--dark);
background-color: var(--light);
border-radius: 0px 20px 20px 0px;
margin-right: 90px;
}
#crotchContent:before {
content: "";
position: absolute;
z-index: 0;
bottom: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(174deg);
}
#crotchContent:after {
content: "";
position: absolute;
z-index: 0;
top: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(87deg);
}
#boardCrotch .introduction {
}
#boardCrotch .divider {
width: 1px;
height: 100%;
background: RGBA(var(--darkRGB), 0.25);
}
#boardCrotch .updates {
display: flex;
flex-direction: column;
gap: 30px;
margin-right: -125px;
}
#boardCrotch .updates .news:not(:first-child) {
opacity: 0.5;
}
#boardCrotch .updates .news:not(:first-child) .update {
border-top: solid 1px RGBA(var(--darkRGB), 0.25);
padding-top: 30px;
}
#boardCrotch .updates .news:not(:first-child) .date {
margin-top: 30px;
}
#boardCrotch .updates .news:hover {
opacity: 1 !important;
}
#boardCrotch .news {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
}
#boardCrotch .update {
display: flex;
flex-direction: column;
gap: 5px;
}
#boardCrotch .update b {
text-transform: uppercase;
font: 800 20px/120% var(--fontBody);
}
#boardCrotch .update b:before {
content: "ebf5";
font-size: 18px;
color: var(--support);
font-family: "cappuccicons";
margin-right: 15px;
}
#boardCrotch .news .date {
display: flex;
flex-direction: column;
align-content: center;
text-align: center;
width: 80px;
text-transform: uppercase;
font: 800 25px/100% var(--fontTitleAlt);
color: var(--accent);
}
#boardCrotch .news .date b {
font: 500 40px/100% var(--fontTitle);
}
/****************************************
内容包装器
-------
*****************************************/
#innerWrapper {
background-color: var(--darkest);
overflow: clip;
}
#contentWrapper {
position: relative;
display: block;
padding: 30px;
background-color: var(--light);
margin: 30px 0px 50px 50px;
border-radius: 20px 0px 0px 20px;
}
#contentWrapper:before {
content: "";
position: absolute;
z-index: 0;
bottom: -40px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(259deg);
}
#contentWrapper:after {
content: "";
position: absolute;
z-index: 0;
top: -40px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(1deg);
}
/****************************************
分类标题
-------
*****************************************/
.categoryTitle {
display: none;
flex-direction: row;
align-items: center;
gap: 30px;
font: 600 35px/110% var(--fontBody);
text-transform: lowercase;
border-radius: 15px;
}
.categoryTitle span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-transform: uppercase;
font: 800 35px/100% var(--fontTitleAlt);
color: var(--support);
padding: 20px;
border-radius: 15px;
}
/****************************************
隐藏的JCINK元素
-------
*****************************************/
.newstext,
#submenu {
display: none;
}
/****************************************
响应式设计
-------
*****************************************/
@media screen and (max-width: 1200px) {
#boardWrapper {
grid-template-columns: 1fr !important;
margin: 0px auto !important;
border-radius: 0px !important;
}
#boardSidebar {
display: none !important;
}
}
@media screen and (max-width: 930px) {
#crotchContent {
grid-template-rows: auto !important;
grid-template-columns: unset !important;
margin-right: 0px !important;
border-radius: 0px !important;
}
#contentWrapper:after,
#contentWrapper:before,
#crotchContent:before,
#crotchContent:after {
display: none !important;
}
#boardCrotch {
padding: 30px 0px !important;
}
#boardCrotch .introLinks {
display: none !important;
}
#boardCrotch .updates .news:not(:first-child) {
display: none !important;
}
#boardCrotch .divider {
display: none !important;
}
#boardCrotch .updates {
margin-right: 0px !important;
}
#boardCrotch .news {
gap: 30px !important;
}
#boardCrotch .news .date {
color: var(--neutral) !important;
padding-left: 30px;
border-left: solid 1px RGBA(var(--darkRGB), 0.25);
}
#contentWrapper {
border-radius: 0px !important;
margin: 0px !important;
}
}
@media screen and (max-width: 820px) {
#desktopTopbar {
display: none !important;
}
#mobileTopbar {
display: flex !important;
}
#boardHeader:after,
#boardHeader {
height: 450px !important;
}
#boardHeader {
margin-top: 70px !important;
}
#boardHeader h1,
#boardHeader h2 {
font-size: 70px !important;
}
#boardHeader:before {
top: -190px !important;
}
}
@media screen and (max-width: 560px) {
#boardHeader h1,
#boardHeader h2 {
font-size: 50px !important;
}
}
/*****************************************
隐藏的用户控制面板标题
*****************************************/
#ucpcontent .maintitle {
display: none;
}
/*****************************************
自定义用户控制面板菜单
*****************************************/
.act-UserCP table,
.act-UserCP tr,
.act-UserCP td,
.act-UserCP th,
.act-Msg table,
.act-Msg tr,
.act-Msg td,
.act-Msg th {
display: block;
all: unset;
border-collapse: collapse;
border-spacing: 0;
width: unset;
box-sizing: border-box;
}
.act-UserCP tbody {
display: block;
}
.act-UserCP table tbody tr {
display: grid;
gap: 10px;
grid-template-columns: 100%;
}
td#ucpmenu {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: calc(100% + 30px);
grid-column-gap: 30px;
padding: 60px 30px 30px;
color: var(--lightest);
background: var(--darkest);
margin: 0px 0px 0px -30px;
border-radius: 0px 20px 20px 0px;
}
td#ucpmenu:before {
content: "";
position: absolute;
z-index: 0;
top: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--darkest);
transform: rotate(93deg);
}
td#ucpmenu:after {
content: "";
position: absolute;
z-index: 0;
bottom: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--darkest);
transform: rotate(169deg);
}
td#ucpmenu p {
grid-area: 3 / auto / span 1 / span 1;
font-size: 0px;
margin: 10px 0px;
}
td#ucpmenu p a {
font-size: 18px;
font-weight: 700;
}
td#ucpmenu .pformstrip {
text-transform: uppercase;
font: 600 20px/120% var(--fontBody);
grid-area: 2 / auto / span 1 / span 1;
}
td#ucpmenu .maintitle {
grid-area: 1 / auto / span 1 / span 4;
font: 400 60px/79% var(--fontTitleAlt);
text-transform: lowercase;
margin-bottom: 30px;
}
td#ucpmenu p:nth-of-type(2),
td#ucpmenu div:nth-of-type(3) {
grid-area: auto / 4 / span 1 / span 1;
}
/*****************************************
自定义账户设置
*****************************************/
.accountSummary {
display: grid;
grid-template-columns: auto 1fr;
gap: 60px;
}
#ucpcontent.accountSummary .pformstrip {
text-transform: uppercase;
font: 600 20px/120% var(--fontBody);
margin: 30px 0px 15px 0px;
}
#ucpcontent.accountSummary > div:nth-child(2) {
margin-top: 0px !important;
}
#ucpcontent.accountSummary > table > tbody > tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
#ucpcontent.accountSummary > div:nth-child(6),
#ucpcontent.accountSummary > div:nth-child(7) {
display: none !important;
}
/*****************************************
自定义新消息界面
*****************************************/
#ucpcontent.newMessage > form > table > tbody {
}
#ucpcontent.newMessage > form > table > tbody > tr {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
gap: 30px;
}
#ucpcontent.newMessage .pformstrip {
text-transform: uppercase;
font: 600 20px/120% var(--fontBody);
margin: 30px 0px 15px 0px;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(6) {
display: none;
}
#ucpcontent.newMessage
> form
> table
> tbody
> tr:nth-child(11)
> td.pformright
> textarea {
width: 100%;
height: 100%;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(1) > td.pformstrip,
#ucpcontent.newMessage
> form
> table
> tbody
> tr:nth-child(3)
> td.pformleft
> b {
font-size: 0px;
}
#ucpcontent.newMessage
> form
> table
> tbody
> tr:nth-child(1)
> td.pformstrip:before {
content: "消息详情";
font-size: 20px;
}
#ucpcontent.newMessage
> form
> table
> tbody
> tr:nth-child(3)
> td.pformleft
> b:before {
content: "成员名称";
font-size: 16px;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(14) {
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
text-align: center;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(3) {
margin-bottom: 15px;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(2),
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(4),
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(12),
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(13),
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(5) {
display: none;
}
#ucpcontent.newMessage #smilies-table {
font-size: 0px;
}
#ucpcontent.newMessage #bbcode-buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 5px;
}
#ucpcontent.newMessage #bbcode-buttons br,
#ucpcontent.newMessage #bbcode-buttons > a {
display: none;
}
#ucpcontent.newMessage #bbcode-buttons input {
background: var(--accent);
padding: 3px;
color: var(--lightest);
border-radius: 5px;
}
#ucpcontent.newMessage #bbcode-buttons > select {
background: RGBA(var(--lighterRGB), 0.75);
border: solid 1px RGBA(var(--accentRGB), 0.5);
border-radius: 5px;
padding: 3px;
}
#ucpcontent.newMessage > form > table > tbody > tr:nth-child(14) > td > input {
background: var(--accent);
padding: 3px 5px;
font: 600 18px/120% var(--fontBody);
text-transform: uppercase;
color: var(--lightest);
border-radius: 5px;
}
#ucpcontent.newMessage #smilies-table > tbody > tr:nth-child(21) {
display: block;
}
</style>
<style type="text/css">
/****************************************
临时样式
-----
*****************************************/
.forumLastPoster.avatar img {
width: 100px;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.forumFocal {
position: absolute;
pointer-events: none;
}
.forumTitle {
position: relative;
}
.forumTitle h1 {
z-index: 0;
}
.forumTitle h2 {
position: absolute;
z-index: 2;
top: 0px;
}
/****************************************
分类一：入门指南
-----
#1 指南手册 (重定向)
#2 社区公告
#3 服务与版务
#4 公告
*****************************************/
.categoryContainer.category-1 {
position: relative;
display: grid !important;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
gap: 0px 15px;
justify-content: flex-end;
grid-template-areas:
"GuidebookForum CommunityBulletinForum"
"GuidebookForum AnnouncementsForum"
"GuidebookForum ModerationAndServicesForum";
margin-bottom: 150px;
}
.forumContainer.guidebook.forum-1 {
grid-area: GuidebookForum;
}
.forumContainer.forum-2,
.forumContainer.forum-3 {
position: relative;
background-color: var(--lighter);
padding: 30px;
text-align: right;
border-radius: 20px;
}
.forumContainer.forum-2 {
grid-area: CommunityBulletinForum;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
gap: 15px 30px;
grid-template-areas:
"ForumTitle ForumTitle LastPosterAvatar"
"ForumDescription ForumDescription LastPosterAvatar"
"TopicTitle TopicTitle LastPosterAvatar"
"LastPoster LastPostDate LastPosterAvatar";
}
.forumContainer.forum-2 .forumLastPoster.avatar {
grid-area: LastPosterAvatar;
background: var(--accent);
border-radius: 10px;
}
.forumContainer.forum-2 .forumLastPoster.avatar img {
height: 100%;
}
.forumContainer.forum-2 .forumReplies,
.forumContainer.forum-2 .forumTopics {
display: none;
}
.forumContainer.forum-2 .forumTitle {
grid-area: ForumTitle;
}
.forumContainer.forum-2 .forumDescription {
grid-area: ForumDescription;
display: flex;
flex-direction: row-reverse;
gap: 15px;
border-top: solid 1px var(--border);
border-bottom: solid 1px var(--border);
padding: 15px 0px 15px;
}
.forumContainer.forum-2 .forumTopicTitle {
grid-area: TopicTitle;
font: 600 20px/140% var(--fontBody);
}
.forumContainer.forum-2 .forumLastPoster.userLink {
grid-area: LastPoster;
}
.forumContainer.forum-2 .forumLastPost {
grid-area: LastPostDate;
}
.forumContainer.forum-2:before {
content: "";
position: absolute;
z-index: 0;
bottom: 79px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(8deg);
}
.forumContainer.forum-2:after {
}
.forumContainer.forum-3 {
grid-area: ModerationAndServicesForum;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
gap: 15px 30px;
grid-template-areas:
"ForumTitle ForumTitle LastPosterAvatar"
"ForumDescription ForumDescription LastPosterAvatar"
"TopicTitle TopicTitle LastPosterAvatar"
"LastPoster LastPostDate LastPosterAvatar";
margin-left: -210px;
border-top: solid 15px var(--light);
border-left: solid 15px var(--light);
border-radius: 35px 20px 20px 0px !important;
}
.forumContainer.forum-3 .forumLastPoster.avatar {
grid-area: LastPosterAvatar;
background: var(--accent);
border-radius: 10px;
}
.forumContainer.forum-3 .forumLastPoster.avatar img {
height: 100%;
}
.forumContainer.forum-3 .forumReplies,
.forumContainer.forum-3 .forumTopics {
display: none;
}
.forumContainer.forum-3 .forumTitle {
grid-area: ForumTitle;
}
.forumContainer.forum-3 .forumDescription {
grid-area: ForumDescription;
display: flex;
flex-direction: row-reverse;
gap: 15px;
border-top: solid 1px var(--border);
border-bottom: solid 1px var(--border);
padding: 15px 0px 15px;
}
.forumContainer.forum-3 .forumTopicTitle {
grid-area: TopicTitle;
font: 600 20px/140% var(--fontBody);
}
.forumContainer.forum-3 .forumLastPoster.userLink {
grid-area: LastPoster;
}
.forumContainer.forum-3 .forumLastPost {
grid-area: LastPostDate;
}
.forumContainer.forum-3:before {
content: "";
position: absolute;
z-index: 0;
top: 75px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(279deg);
}
.forumContainer.forum-3:after {
}
.forumContainer.forum-2 {
padding: 30px 30px 110px 30px;
}
.forumContainer.forum-3 {
padding: 100px 30px 30px 110px;
}
.forumContainer.forum-2 .forumTitle,
.forumContainer.forum-3 .forumTitle {
font: 800 40px/100% var(--fontTitle);
text-align: right;
}
.forumContainer.forum-2 .forumTitle h2,
.forumContainer.forum-3 .forumTitle h2 {
display: none;
}
.forumContainer.forum-3 .forumFocal {
position: absolute;
top: -272px;
left: -73px;
width: 287px;
height: 395px;
background-image: url(https://s13.gifyu.com/images/SCCL0.png);
filter: drop-shadow(0 10px 15px RGBA(var(--supportRGB), 0.5));
}
.forumContainer.forum-3 .forumFocal:after {
content: "";
position: absolute;
bottom: -343px;
left: -148px;
width: 303px;
height: 320px;
background-image: url(https://s13.gifyu.com/images/SCCLj.png);
}
.forumContainer.forum-3 .moderationLinks,
.forumContainer.forum-2 .bulletinLinks {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
text-align: right;
border-left: solid 1px var(--borderAlt);
padding-left: 15px;
filter: brightness(0.9) contrast(1.2);
}
.forumContainer.forum-3 .moderationLinks a,
.forumContainer.forum-2 .bulletinLinks a {
position: relative;
z-index: 1;
display: block;
font: 700 14px/120% var(--fontBody);
background: RGBA(var(--lightRGB), 0.25);
border-radius: 6px;
padding: 5px 10px 5px 25px;
color: var(--accent);
overflow-y: clip;
text-transform: uppercase;
}
.forumContainer.forum-3 .moderationLinks a i,
.forumContainer.forum-2 .bulletinLinks a i {
position: absolute;
z-index: -1;
top: -5px;
left: -5px;
color: var(--accent);
opacity: 0.15;
font-size: 50px;
}
.forumContainer.forum-3 .moderationLinks a:hover i,
.forumContainer.forum-2 .bulletinLinks a:hover i {
transform: scale(1.5);
}
.forumContainer.forum-4 {
grid-area: AnnouncementsForum;
position: relative;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
gap: 5px;
grid-template-areas:
"AnnouncementTitle AnnouncementTitle"
"AnnouncementTopic AnnouncementTopic"
"AnnouncementPoster AnnouncementDate";
background-color: var(--accent);
background-image: radial-gradient(
circle at top center,
RGBA(var(--lightRGB), 0.5),
RGBA(var(--accentRGB), 0.5)
);
color: var(--lightest);
padding: 30px;
text-align: right;
width: 90%;
border-radius: 35px;
border: solid 15px var(--light);
/* overflow-y: clip; */
margin: -80px 0px -90px;
margin-left: 12.5%;
}
.forumContainer.forum-4:after {
content: "";
position: absolute;
z-index: 0;
bottom: 26px;
left: -49px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(273deg) scale(0.7);
}
.forumContainer.forum-4:before {
content: "";
position: absolute;
z-index: 0;
top: 31px;
left: -49px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(5deg) scale(0.7);
}
.forumContainer.forum-4 a {
color: var(--lightest);
}
.forumContainer.forum-4 .forumTitle h2 {
display: none;
}
.forumContainer.forum-4 .forumDescription {
display: none;
position: absolute;
font-size: 200px;
opacity: 0.25;
transform: rotate(317deg);
pointer-events: none;
}
.forumContainer.forum-4:hover .forumDescription {
transform: rotate(317deg) scale(1.3);
}
.forumContainer.forum-4 .forumFocal,
.forumContainer.forum-4 .forumReplies,
.forumContainer.forum-4 .forumTopics,
.forumContainer.forum-4 .forumLastPoster.avatar {
display: none;
}
.forumContainer.forum-4 .forumTitle {
grid-area: AnnouncementTitle;
position: relative;
font: 800 30px/80% var(--fontTitle);
}
.forumContainer.forum-4 .forumTopicTitle {
grid-area: AnnouncementTopic;
font: 600 20px/140% var(--fontBody);
margin-bottom: -5px;
}
.forumContainer.forum-4 .forumLastPost:before {
content: "更新于";
margin-right: 5px;
}
.forumContainer.forum-4 .forumLastPoster.userLink {
grid-area: AnnouncementPoster;
}
.forumContainer.forum-4 .forumLastPost {
grid-area: AnnouncementDate;
}
/****************************************
分类二：角色创建
-----
#5 角色创建
#6 角色统计
#7 角色发展
*****************************************/
.categoryContainer.category-2 {
position: relative;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
gap: 0px 15px;
justify-content: flex-end;
grid-template-areas: "CharacterCreationForum CharacterCensusForum CharacterDevelopmentForum";
margin-bottom: 150px;
}
.forumContainer.forum-5 {
grid-area: CharacterCreationForum;
}
.forumContainer.forum-6 {
grid-area: CharacterCensusForum;
}
.forumContainer.forum-7 {
grid-area: CharacterDevelopmentForum;
}
.forumContainer.forum-5,
.forumContainer.forum-6,
.forumContainer.forum-7 {
position: relative;
background-color: var(--lighter);
padding: 30px;
text-align: right;
border-radius: 20px;
}
/****************************************
响应式设计
-------
*****************************************/
@media screen and (max-width: 1085px) {
.categoryContainer.category-1 {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
.guidebook .forumTitle {
text-align: left !important;
margin-top: 0px !important;
word-spacing: 0px !important;
}
.forumContainer.forum-3 .forumFocal,
.guidebook .forumTitle h2 {
display: none !important;
}
.guidebook.forum-1 {
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
text-align: right !important;
}
.forumContainer.forum-2,
.forumContainer.forum-3 {
padding: 30px !important;
}
.forumContainer.guidebook.forum-1,
.forumContainer.forum-2,
.forumContainer.forum-3,
.forumContainer.forum-4 {
border-radius: 20px !important;
}
.forumContainer.forum-2:before,
.forumContainer.forum-3:before,
.forumContainer.forum-4:before,
.forumContainer.forum-2:after,
.forumContainer.forum-3:after,
.forumContainer.forum-4:after {
display: none !important;
}
.forumContainer.forum-3,
.forumContainer.forum-4 {
border: none !important;
margin: 0px !important;
}
.forumContainer.forum-4 {
width: 100% !important;
}
.categoryContainer.category-2 {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
}
@media screen and (max-width: 795px) {
.guidebook .forumTitle {
font-size: 50px !important;
text-align: center !important;
}
.guidebook .forumDescription {
text-align: center !important;
}
}
@media screen and (max-width: 690px) {
.forumContainer.forum-3 .moderationLinks,
.forumContainer.forum-2 .bulletinLinks {
border-left: none !important;
padding-left: 0px;
}
.forumLastPoster.avatar {
display: none !important;
}
.forumContainer.forum-2 .forumDescription,
.forumContainer.forum-3 .forumDescription {
flex-direction: column !important;
}
.forumContainer.forum-4 .forumTitle {
line-height: 120% !important;
}
}
@media screen and (max-width: 530px) {
.guidebook.forum-1 {
flex-direction: column !important;
align-items: flex-end !important;
}
.guidebook .forumDescription {
width: 100% !important;
}
}
/****************************************
隐藏字段
*****************************************/
#field-website,
#field-location,
#field-interests {
display: none;
}
/****************************************
颜色预览
*****************************************/
#accentPreview,
#supportPreview,
#accentPreviewAlt,
#supportPreviewAlt {
display: block;
width: 100%;
height: 10px;
border-radius: 5px;
margin: 0 0px 10px;
}
/****************************************
申请指南
*****************************************/
#applicationGuide {
position: relative;
padding: 30px;
background: var(--lighter);
border-radius: 20px 20px 0px 0px;
margin: 20px 0px 0px;
}
/****************************************
图片预览
*****************************************/
#prAvatarContainer {
}
#prAvatar {
width: 300px;
height: 450px;
background: var(--neutral);
border-radius: 10px;
}
/****************************************
指南手册
-----
#1 指南手册 (重定向)
*****************************************/
.guidebook.forum-1 {
display: flex !important;
}
.guidebook {
position: relative;
flex-direction: column;
justify-content: center;
gap: 15px;
background-image: radial-gradient(
circle at top center,
RGBA(var(--lightRGB), 0.5),
RGBA(var(--accentRGB), 0.5)
),
url(https://s13.gifyu.com/images/SC4dn.png);
background-size: cover;
background-position: top right;
color: var(--lightest);
padding: 60px;
border-radius: 20px 20px 0px 20px;
}
.guidebook .forumFocal {
position: absolute;
z-index: 0;
right: -50px;
top: -50px;
}
.guidebook .forumTitle {
position: relative;
font: 800 80px/80% var(--fontTitle);
word-spacing: 500px;
margin-top: -50px;
}
.guidebook .forumTitle a {
color: var(--lightest);
}
.guidebook .forumTitle h1 {
z-index: 0;
}
.guidebook .forumTitle h2 {
position: absolute;
z-index: 2;
top: 0px;
font: 400 80px/80% var(--fontTitleAlt);
}
.guidebook .forumDescription {
font: 500 18px/120% var(--fontBody);
color: var(--lightest);
width: 60%;
}
<style>
</body>
</html>
index.html
index.html