/*
The Nationarea Main Page CSS
by eastleavecn
Based on
Backrooms CN Main Page CSS
by hoah2333, Eltrac, Ambersight & Lambda Core
*/
/*
The Nationarea Main Page CSS
by eastleavecn
Based on
Backrooms CN Main Page CSS
by hoah2333, Eltrac, Ambersight & Lambda Core
*/
/*
注意：仅保留了精选块部分CSS
*/
#page-title {
display: none;
}
#page-content .recentPages {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
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;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
@media (max-width: 550px) {
#page-content .recentPages .pageContainer {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
}
#page-content .recentPages .pageContainer p {
margin: 0;
}
#page-content .recentPages .pageContainer .title {
text-align: center;
grid-area: title;
background: #033753;
color: #f8faee;
font-weight: bold;
padding: 0 1rem;
}
#page-content .recentPages .pageContainer .page {
grid-area: page;
border: solid #033753;
border-width: 0 3px 0 4px;
padding: 0.5em calc(1rem - 4px);
max-height: 12rem;
background-color: #f8faee;
overflow-y: hidden;
}
#page-content .recentPages .pageContainer .page .list-pages-box p {
max-height: 12rem;
overflow-y: hidden;
}
#page-content .recentPages .pageContainer .page .list-pages-box p br {
display: none;
}
#page-content .recentPages .pageContainer .page .list-pages-box p a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#page-content .recentPages .pageContainer .recently {
grid-area: recently;
background: #033753;
text-align: right;
padding: 0 1rem;
}
#page-content .recentPages .pageContainer .recently a {
color: #f8faee;
}
#page-content .recentPages .featurePrize {
grid-template-rows: 1.5rem minmax(auto, 7.68rem) 1.5rem;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
@media (max-width: 550px) {
#page-content .recentPages .featurePrize {
grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem;
}
}
#page-content .recentPages .featureLevelO .page p,
#page-content .recentPages .featureTaleO .page p,
#page-content .recentPages .featureLevelT .page p,
#page-content .recentPages .featureTaleT .page p,
#page-content .recentPages .featurePrize .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),
#page-content .recentPages .featurePrize .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),
#page-content .recentPages .featurePrize .page p:nth-of-type(2) {
font-size: 0.5rem;
margin: 0 0 0.5rem 0;
}
/* meta style
this makes it harder for staff members to accidentally guff the SEO*/
#action-area h1 + p + h2 ~ div[style="padding-left:3em;"] > div:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6), :nth-of-type(7)) a {
visibility: unset !important;
pointer-events: unset !important;
}
#edit-meta-newtag-form a:nth-of-type(2) {
display: inline-flex;
pointer-events: auto;
}
#page-title { display: none; }
#page-content {
--section-gap: 1.1rem;
--grid-gap: 0.5rem;
--related-gap: 1rem;
}
.flex-container { display: flex; }
.grid-container { display: grid; }
.main-container { display: flex; gap: var(--section-gap); flex-direction: column; }
/* linkblocks */
.linkblock { position: relative;}
.linkblock a:not(.artscroll a, .linkblock .nolinkblock a):hover { opacity: 0.4; }
.linkblock a:not(.artscroll a, .linkblock .nolinkblock a) { color: rgba(0,0,0,0);position: absolute; opacity: 0; z-index: 6; height: 100%; width: 100%; top: 0; left: 0; right: 0; transition: 0.3s; background: rgba(255,255,255,0.3);}
.nolinkblock a { position: relative; z-index: 10; }
.featureblock.linkblock a:not(.linkblock .nolinkblock a):hover { opacity: 0; }
/* top nav boxes */
.navflex { height: 5rem; }
.topnav {
width: -webkit-fill-available;
width: -moz-available;
width: 100%;
-webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
transition: all 0.2s cubic-bezier(1, 0, 0, 1);
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0px 0px 8px 8px;
background-color: rgb(var(--gray-monochrome));
color: rgb(var(--white-monochrome));
padding: 0.01rem 1rem;
margin: -0.25px 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgb(0 0 0 / 25%);
}
.topnav:hover {
height: 5rem;
}
.topnav a:not(.linkblock .nolinkblock a) {
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 95%);
}
/* dark stylequotes part */
.darkquotes {
flex-direction: column; gap: var(--grid-gap);
}
.darkquotes .darkblock {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.darkquotes .darkblock div {
margin: 0.4rem;
text-align: center;
width: -webkit-fill-available;
width: -moz-available;
}
/* newsblocks */
.newsblocks .styled-quote {
margin: 0;
text-align: center;
border-left: none;
border-top: 0.5rem solid rgba(var(--gray-monochrome));
transition: 0.5s;
padding-bottom: 1rem;
}
.newsblocks .styled-quote h3 { color: rgb(var(--link-color)); }
@media (max-width: 769px) {
#page-content .newsblocks {
grid-template-columns: 100%;
}
}
.newsblocks {
gap: var(--grid-gap);
grid-template-columns: calc(50% - calc(var(--grid-gap) / 2)) calc(50% - calc(var(--grid-gap) / 2));
grid-auto-rows: 1fr;
}
.newsblocks .styled-quote a:not(.linkblock .nolinkblock a) {
color: rgba(0,0,0,0);
position: absolute;
opacity: 0; z-index: 5;
height: 100%; width: 100%;
top: 0; left: 0; right: 0;
transition: 0.3s;
background: rgb(var(--gray-monochrome));
}
.newsblocks .styled-quote a:not(.linkblock .nolinkblock a):hover { opacity: 0.2; }
/* related article style has been moved to the related article bit */
/* featureblocks */
.usercredit p { margin: 0; margin-bottom: 0.5rem; }
.featureblock img {
height: auto; width: 100%; position: absolute; top: 0; right: 0;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0));
mask-image: linear-gradient(to left, rgba(0,0,0,0.5), transparent); background-size: cover; pointer-events: none; transition: 0.4s; opacity: 0;}
.featureblock:hover img { opacity: 1; }
.featureblock { flex-direction: column; text-align: center; padding-left: 0; padding-right: 0; margin: 0; }
.featureblock .lightblock { padding: 1rem; height: 7rem; position: relative; box-shadow: none; color: rgb(var(--swatch-text-general)); font-style: italic; margin-left: 0; margin-left: 0; text-align: left; }
.usercredit { text-align: right; padding-right: 1rem; font-style: italic; }
.quote {
flex-grow: 2;
background: rgb(var(--pale-gray-monochrome));
color: rgb(var(--swatch-text-general));
text-align: left;
background-size: cover;
position: relative;
padding: 1rem;
overflow: hidden;
}
.cool-links a,
.cool-links a:visited {
--hover-link-color: var(--swatch-text-secondary-color);
--wght: calc(var(--ui-wght) + 200);
margin: -0.15em 0;
padding: 0.15em;
transition:
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
color 150ms cubic-bezier(0.4, 0, 0.2, 1),
font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1),
font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary));
font-weight: var(--wght);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-text-decoration: underline dotted 0.09375rem;
text-decoration: underline dotted 0.09375rem;
}
.cool-links a:hover,
.cool-links a:active {
--wght: calc(var(--ui-hvr-wght) + 200);
box-shadow: inset -30vw 0 0 0 rgb(var(--swatch-primary));
color: rgb(var(--swatch-text-secondary-color));
font-weight: var(--wght);
text-decoration: none;
}
.cool-links a:focus-within {
--wght: calc(var(--ui-hvr-wght) + 200);
box-shadow: inset -30vw 0 0 0 rgb(var(--swatch-primary));
color: rgb(var(--swatch-text-secondary-color));
font-weight: var(--wght);
text-decoration: none;
}
| 
| 
| 
| 