Link to article: Nav Generic CSS.
hr {
margin: 1rem 0;
height: 0.05rem;
background-color: #cfcfcf;
}
.content-grid {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.content-box {
flex-basis: 15.5rem;
flex-grow: 1;
background: #fff;
box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.175);
display: flex;
flex-direction: column;
--box-accent: #823f3f;
}
.tale { --box-accent: #3b5c97; }
.goi { --box-accent: #b57e16; }
.art { --box-accent: #3d8554; }
.alt {--box-accent: #4b4848; }
.content-box::after {
content: "";
display: block;
flex-basis: 0.425rem;
flex-grow: 1;
}
.content-type-title {
display: flex;
font-weight: 700;
color: white;
font-size: 115%;
box-shadow: inset 0 0.525rem 0 var(--box-accent);
}
.content-type-title p {
display: block;
height: 100%;
line-height: 1.15;
margin: 0;
padding: 0.275em 0.425em;
box-sizing: border-box;
flex-grow: 1;
max-width: calc(90% - 3.25rem);
min-width: min-content;
background: var(--box-accent);
}
.content-type-title a { color: inherit; }
.content-type-title::after {
content: "";
display: block;
width: 2.25rem;
flex-shrink: 1;
background: var(--box-accent);
margin-inline-end: 1rem;
margin-inline-start: -0.02rem;
-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.content-type-description .wiki-content-table {
width: 100%;
margin: 0;
}
.content-type-description .wiki-content-table tr {
border-bottom: solid 0.05rem rgba(0,0,0,0.1);
background: transparent;
transition: background 0.125s ease-out;
}
.content-type-description .wiki-content-table tr:is(:hover,:focus-within) {
background: #fff0f0dd;
}
.content-type-description .wiki-content-table :is(td,th) {
background: transparent;
border: none;
padding: 0.35rem 0.5rem;
}
.content-type-description .wiki-content-table td:nth-child(2) {
font-size: 0.875em;
width: 4rem;
}
.content-type-description .wiki-content-table td:nth-child(3) {
text-align: center;
width: 1.25rem;
min-width: max-content;
}
.content-type-description .pager {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.content-type-description .pager .pager-no {
/*
padding: 0.325rem 0.5rem;
box-sizing: border-box;
font-weight: bold;
flex-basis: 100%; */
display: none;
}
.content-type-description .pager span,
.content-type-description .pager span a {
margin: 0;
border: none;
}
.content-type-description .pager span.target { display: contents; }
.content-type-description .pager span:is(:nth-child(2),:last-child) a { font-weight: bold; }
.content-type-description .pager :is(span.current, .target a) {
padding: 0.225rem 0.425rem;
flex-grow: 1;
color: var(--box-accent);
}
.content-type-description .pager span.current {
background-color: var(--box-accent);
color: #fff;
}
.content-type-footer {
color: #fff;
font-size: 0.75em;
order: 1;
flex-basis: 1.15rem;
align-items: center;
box-shadow: inset 0 -0.375rem 0 var(--box-accent);
display: flex;
flex-direction: row-reverse;
}
.content-type-footer:empty::before {
content: "";
display: block;
width: calc(37.5% - 1.5rem);
height: 100%;
background: var(--box-accent);
}
.content-type-footer::after {
content: "";
display: block;
background: var(--box-accent);
margin-inline-start: 1rem;
margin-inline-end: -0.02rem;
width: 1.5rem; height: 100%;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.content-type-footer p {
display: block;
background: var(--box-accent);
margin: 0;
height: 100%;
padding: 0.25em 0.425em;
box-sizing: border-box;
}
.content-type-footer a { color: inherit; }
.content-type-footer a::before {
content: ">>";
display: inline-block;
margin-inline-end: 0.325em;
}