/*
Backrooms CN Main Page CSS
by hoah2333
*/
#page-title {
display: none;
}
/* 欢迎栏 */
#page-content .bannerContainer {
display: grid;
grid-template-areas:
"welcome welcome welcome"
"discord faq join";
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3%;
}
#page-content .bannerContainer .welcome {
grid-area: welcome;
background-color: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
font-style: italic;
padding: 1rem;
}
#page-content .bannerContainer .navigator {
display: flex;
background-color: rgb(var(--gray-monochrome));
border-radius: 0 0 1rem 1rem;
height: min-content;
margin: 0 0 4rem 0;
transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .bannerContainer .navigator:hover,
#page-content .bannerContainer .navigator:active {
margin: 0 0 1rem 0;
}
#page-content .bannerContainer .navigator a {
padding: 0.5rem 0;
width: 100%;
text-align: center;
color: rgb(var(--white-monochrome));
font-size: 1.25rem;
transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);
font-weight: bold;
}
#page-content .bannerContainer .navigator a:hover,
#page-content .bannerContainer .navigator a:active {
text-decoration: none;
text-decoration-color: transparent;
padding: 2rem 0;
}
#page-content .bannerContainer .discord {
grid-area: discord;
}
#page-content .bannerContainer .faq {
grid-area: faq;
}
#page-content .bannerContainer .join {
grid-area: join;
}
@media (max-width: 767px) {
#page-content .bannerContainer .navigator a {
font-size: 1.1rem;
}
#page-content .bannerContainer .navigator a:hover,
#page-content .bannerContainer .navigator a:active {
padding: 1.5rem 0;
}
#page-content .bannerContainer .navigator {
margin: 0 0 2rem 0
}
#page-content .bannerContainer .navigator:hover {
margin: 0;
}
#page-content .announceContainer .welcome {
font-size: 1.2rem;
}
}
/* 公告栏 */
/* 为什么要用grid折磨自己呢？ */
#page-content .announceContainer {
display: flex;
flex-wrap: wrap;
border: 4px solid rgb(var(--gray-monochrome));
align-content: space-between;
}
#page-content .announceContainer .welcome {
background-color: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
font-weight: bold;
width: 100%;
text-align: center;
font-size: 1.5rem;
padding: 0 0.75rem;
}
#page-content .announceContainer .announcement,
#page-content .announceContainer .more {
background-color: rgb(var(--pale-gray-monochrome));
width: 100%;
padding: 0.75rem;
border-top: 4px solid rgb(var(--gray-monochrome));
}
#page-content .announceContainer .more {
padding: 0;
}
#page-content .announceContainer .more .collapsible-block-folded,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link {
display: flex;
}
#page-content .announceContainer .more .collapsible-block-folded[style*="block"],
#page-content .announceContainer .more .collapsible-block-unfolded[style*="block"] .collapsible-block-unfolded-link {
display: flex !important;
}
#page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link {
width: 100%;
padding: 1rem 0;
text-align: center;
background: rgba(var(--gray-monochrome), 0.2);
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link:hover,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link:hover {
text-decoration: none;
text-decoration-color: transparent;
background: rgba(var(--gray-monochrome), 0.4);
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link {
border-bottom: 4px solid rgb(var(--gray-monochrome));
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content {
background: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
text-align: center;
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content p,
#page-content .recentPages .pageContainer p {
margin: 0;
}
#page-content .announceContainer .archive {
background: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
text-align: right;
width: 100%;
}
#page-content .announceContainer .archive a {
padding: 0 1rem;
color: rgb(var(--white-monochrome));
}
/* 最近新增 */
#page-content .recentPages {
display: grid;
grid-template-areas: "translation original"
"featureLevelO featureTaleO"
"featureLevelT featureTaleT";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-row-gap: 1rem;
}
@media (max-width: 550px) {
#page-content .recentPages {
grid-template-areas: "translation" "original"
"featureLevelO" "featureTaleO"
"featureLevelT" "featureTaleT";
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-row-gap: 1rem;
}
}
#page-content .recentPages .pageContainer {
display: grid;
grid-template-areas: "title"
"page"
"recently";
grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem;
}
#page-content .recentPages .translation {
grid-area: translation;
}
#page-content .recentPages .original {
grid-area: original;
}
#page-content .recentPages .featureLevelO {
grid-area: featureLevelO;
}
#page-content .recentPages .featureTaleO {
grid-area: featureTaleO;
}
#page-content .recentPages .featureLevelT {
grid-area: featureLevelT;
}
#page-content .recentPages .featureTaleT {
grid-area: featureTaleT;
}
#page-content .recentPages .pageContainer .title {
grid-area: title;
background: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
font-weight: bold;
padding: 0 1rem;
}
#page-content .recentPages .pageContainer .page {
grid-area: page;
border: solid rgb(var(--gray-monochrome));
border-width: 0 3px 0 4px;
padding: 0.5em calc(1rem - 4px);
max-height: 12rem;
background-color: rgb(var(--pale-gray-monochrome));
overflow-y: hidden;
}
#page-content .recentPages .pageContainer .page .list-pages-box p {
max-height: 12rem;
overflow-y: hidden;
}
#page-content .recentPages .pageContainer .recently {
grid-area: recently;
background: rgb(var(--gray-monochrome));
text-align: right;
padding: 0 1rem;
}
#page-content .recentPages .pageContainer .recently a {
color: rgb(var(--white-monochrome));
}
#page-content .recentPages .featureLevelO .page p,
#page-content .recentPages .featureTaleO .page p,
#page-content .recentPages .featureLevelT .page p,
#page-content .recentPages .featureTaleT .page p {
font-size: 0.8rem;
}
#page-content .recentPages .featureLevelO .page p:nth-of-type(1),
#page-content .recentPages .featureTaleO .page p:nth-of-type(1),
#page-content .recentPages .featureLevelT .page p:nth-of-type(1),
#page-content .recentPages .featureTaleT .page p:nth-of-type(1) {
font-size: 1rem;
}
#page-content .recentPages .featureLevelO .page p:nth-of-type(2),
#page-content .recentPages .featureTaleO .page p:nth-of-type(2),
#page-content .recentPages .featureLevelT .page p:nth-of-type(2),
#page-content .recentPages .featureTaleT .page p:nth-of-type(2) {
font-size: 0.5rem;
}
/* Tools */
#page-content .toolsContainer {
display: grid;
color: rgb(var(--white-monochrome));
grid-gap: 0.5rem;
}
#page-content .toolsContainer .tools {
display: grid;
grid-template-areas: "image text"
"link text";
grid-template-columns: 5rem auto;
justify-items: center;
grid-gap: 0.5rem;
background-color: rgb(var(--gray-monochrome));
padding: 0.75rem;
}
#page-content .toolsContainer .tools:nth-of-type(2n) {
direction: rtl;
}
#page-content .toolsContainer .tools:nth-of-type(2n) * {
direction: ltr;
}
#page-content .toolsContainer .tools img {
grid-area: image;
}
#page-content .toolsContainer .tools a {
grid-area: link;
color: rgb(var(--white-monochrome));
}
#page-content .toolsContainer .tools .description {
grid-area: text;
justify-self: left;
pointer-events: none;
}
#page-content .toolsContainer .tools br {
display: none;
}
/* International */
#page-content .international .announcement {
display: flex;
align-items: flex-end;
position: relative;
}
#page-content .international .announcement img {
width: 50px;
filter: drop-shadow(0 0 1px rgba(var(--gray-monochrome), 0.8));
}
#page-content .international .announcement.es img {
align-self: center;
}
#page-content .international .announcement h3 {
margin-left: 1rem;
}
#page-content .international .announcement a {
font-size: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .international .announcement a:hover {
background-color: rgba(var(--gray-monochrome), 0.2);
}
