SCP基金会中文分部

/*
    Tales of the Mosaic Theme
    [2025 Wikidot Theme]
    Created by Jezixo

    CC BY-SA 3.0
*/

/* ADDING FANCY FONTS */

@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');

/* ———— COLORS ———— */

/* SETTING COLOR PALETTE */
:root {
    --white-monochrome: 251,250,249;
    --pale-gray-monochrome: 241, 241, 241;
    --light-pale-gray-monochrome: 242, 245, 247;
    --very-light-gray-monochrome: 211, 216, 222;
    --light-gray-monochrome: 151, 160, 168;
    --gray-monochrome: 40, 40, 40;
    --dark-gray-monochrome: 30, 30, 30;
    --black-monochrome: 12, 12, 12;
    --pale-accent: 118, 162, 186;
    --bright-accent: 44, 103, 166;
    --medium-accent: 29, 60, 89;
    --dark-accent: 19, 41, 52;
    --alt-accent: 240, 164, 117;
}

/* ADJUSTING UI ELEMENT COLORS */

:root {
    --link-color: var(--black-monochrome);
    --visited-link-color: var(--black-monochrome);
    --newpage-color: var(--white-monochrome);
    --footnotes-footer-num-color: var(--medium-accent);
    --header-gradient-color-bottom: var(--gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--dark-gray-monochrome);
    --login-myaccount-underline-color: var(--swatch-text-secondary-color);
    --login-myaccount-hover-color: var(--white-monochrome);
}

#main-content {
    --tabs-bg: var(--dark-accent);
    --tabs-bottom-border-color: none;
    --toc-header-bg-color: var(--medium-accent);
    --toc-header-text-color: var(--white-monochrome);
}

#page-content {
    color: rgb(var(--white-monochrome));
}

#login-status #account-options {
    background: rgb(var(--black-monochrome));
}

@media (min-width: 36rem) {
    #search-top-box {
        background: rgba(var(--search-focus-textbox-bg-color), 0.1);
    }
}

#header h1 a:focus {
  outline-color: rgb(var(--alt-accent));
}

#content-wrap {
    background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
}

/* ———— STYLING UI ELEMENTS ———— */

/* PAGE VARIABLES */

:root {
    --base-font-size: 1rem;
    --body-font: "EB Garamond", serif;
    --header-font: "EB Garamond", serif;
    --UI-font: Hepta Slab, PTRootUI,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --header-title: "Tales of the Mosaic";
    --header-subtitle: "It's always been this way";
    --logo-image: none;
    --diagonal-stripes: none;
    --header-height-on-desktop: 16rem;
    --header-height-on-mobile: 16rem;
}

/* LINKS */

#page-content a {
    font-weight: bold;
    text-decoration: underline;
    color: rgba(var(--white-monochrome));
}

#page-content a:visited {
    color: rgba(var(--white-monochrome));
}

#page-content a:hover:not(.footnote-footer a:hover, #u-source-code-button .collapsible-block a:hover, #page-content .tessera-body a:hover) {
    color: rgb(var(--alt-accent));
}

/* MAKING UTILITY ELEMENTS READABLE */

.licensebox .collapsible-block-link {
    color: rgba(var(--white-monochrome));
    opacity: 1;
 }

/* This extra margin fixes a bug on the theme page where the tags intersect the theme licensebox. */
.licensebox {
    margin-bottom: 2rem;
}

div.page-watch-options a,
.licensebox p,
.page-tags a,
#page-info {
    color: rgba(var(--white-monochrome));
}

#action-area {
    background: rgb(var(--white-monochrome));
    border-radius: 8px;
    padding: 1rem;
}

#action-area a {
    color: rgb(var(--black-monochrome));
    text-decoration: underline;
}

div#revision-list .pager a:hover {
    color: rgb(var(--black-monochrome));
    text-decoration: underline;
}

div#revision-list .pager a,
.code p,
.footnotes-footer .footnote-footer a::before,
.modalbox a,
tbody tr td #toc #toc-list a
 {
    color: rgb(var(--black-monochrome));
}

/* PAGE HEADER TEXT */

#header h1 a,  #header h1 a::before {
  display: flex;
  font-size: 0em;
}

#header h2 span::before {
    display: none;
}

#header h2 span {
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 4em);
    width: 80%;
}

#header h1 a::after {
    font-weight: 400;
    font-size: 3.2rem;
    font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif;
}

#header h2 span::after {
    text-transform: none;
    font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* BREADCRUMBS */

#breadcrumbs a:before, .pseudocrumbs a:before {
    content: none;
    display: none;
}

:is(#breadcrumbs,.pseudocrumbs) a {
    margin-right: 0px;
    color: rgb(var(--white-monochrome));
    padding-right: 0.3rem;
}

:is(#breadcrumbs,.pseudocrumbs) a:hover {
   color: rgb(var(--alt-accent));
   text-decoration: underline;
}

#breadcrumbs, .pseudocrumbs {
    color: rgb(var(--white-monochrome));
}

/* ———— SKYLINE HEADER ANIMATION ———— */

/* Making the nav bar solid, so the animation can appear from behind it */

div#header {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 36rem) {
    #search-top-box {
        right: 15%;
    }
    #login-status {
        left: 15%;
    }
}

#header div#top-bar {
    max-width: none;
}

.top-bar {
    margin: auto;
}

#header div#top-bar {
    max-width: none;
    background: rgb(var(--dark-gray-monochrome));
    border-block: 2px solid rgb(var(--black-monochrome));
}

/* SKYLINE LAYERS */

#extra-div-1,
#extra-div-2,
#extra-div-3,
#extra-div-4,
#extra-div-5 {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    height: 310px;
}

/* Layer 1 – Background */
#extra-div-1 {
    background: calc(50% - -40px) top/1640px repeat-x;
    animation: fadeIn 1.5s ease-in 0.5s forwards;
    z-index: 0;
}

/* Layer 2 - Lighthouse */
#extra-div-2 {
    background: calc(50% - -40px) top/1640px repeat-x;
    animation: fadeIn 0.5s ease-in 0.3s forwards;
    z-index: 1;
}

/* Layer 3 - Farthest buildings */
#extra-div-3 {
    background: calc(50% - -40px) top/1620px repeat-x;
    animation: backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1.5s ease-in 0.5s forwards;
    z-index: 2;
}

/* Layer 4 - Mid-distance buildings */
#extra-div-4 {
    background: calc(50% - -50px) top/1620px repeat-x;
    animation: slideLeft 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1s ease-in 0.5s forwards;
    z-index: 3;
}

/* Layer 5 - Closest buildings */
#extra-div-5 {
    background: calc(50% - -30px)  top/1620px repeat-x;
    animation: slideRight 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 0.5s ease-in 0.5s forwards;
    z-index: 4;
}

/* HEADER TEXT ANIMATION */

#header h1 a::after {
    transform: scale(0.7);
    opacity: 0;
    animation: textGrowIn 1s ease-out 1s forwards;
}

#header h2 span {
    transform: scale(0.7);
    opacity: 0;
    animation: textGrowIn 1s ease-out 1.2s forwards;
}

/* SKYLINE ANIMATIONS */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes backgroundZoomIn {
    0% {
        background-size: 1620px;
    }
    100% {
        background-size: 1640px;
    }
}

@keyframes slideRight {
    0% {
        background-position-x:  calc(50% - -30px);
    }
    100% {
        background-position-x: calc(50% - -40px);
    }
}

@keyframes slideLeft {
    0% {
        background-position-x:  calc(50% - -50px);
    }
    100% {
        background-position-x: calc(50% - -40px);
    }
}

@keyframes textGrowIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* WHITE LINE ANIMATION */
/* Making the white line around the title grow in on page load */

.title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after {
  animation: whiteLineReveal 2s cubic-bezier(.43,0,.1,1) 0.5s;
  animation-fill-mode: both;
}

.title-container .tessera-eyebrow-container::before {
  transform: rotate(180deg);
}

@keyframes whiteLineReveal {
  from { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* ACCESSIBILITY MODE */
/* Turning off all animations if user prefers reduced motion */

@media (prefers-reduced-motion: reduce) {
    #extra-div-1,
    #extra-div-2,
    #extra-div-3,
    #extra-div-4,
    #extra-div-5,
    #header h1 a::after,
    #header h2 span {
        opacity: 1;
        background: calc(50% - -40px) top/1640px repeat-x;
        animation: none;
        transform: none;
    }

    .title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after {
        animation: none;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

}

/* ———— CUSTOM PAGE ELEMENTS ———— */

/* TITLE SECTION */

div#page-title {
    display: none;
}

.title-container {
    width: fit-content;
    margin: 1rem auto 3rem;
    text-align: center;
}

span.tessera-title {
    font-weight: bold;
    color: rgb(var(--white-monochrome));
    font-size: 2.5rem;
    max-width: 24.3rem;
    display: block;
    margin: 0.5rem auto 0.5rem;
}

/* EYEBROW HEADER  */

.tessera-eyebrow-container {
    margin: 3rem auto 0rem;
    display: flex;
    align-items: center;
}

.tessera-eyebrow-text {
    text-transform: uppercase;
    color: rgb(var(--white-monochrome));
    font-weight: 700;
    font-size: 1rem;
    width: max-content;
    display: block;
    margin-inline: 1rem;
    letter-spacing: 0.15rem;
    font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif;
}

.tessera-eyebrow-container p, .title-container p {
    margin: 0px;
}

.tessera-eyebrow-container::before, .tessera-eyebrow-container::after {
    content: "";
    height: 1px;
    background: rgb(var(--white-monochrome));
    width: 100%;
}

/* AUTHOR TAG */

div#u-title-byline {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}

div#u-title-byline a {
    font-weight: 700;
}

div#u-title-byline p {
    margin: 0px;
}

/* TESSERA BODY PAPER DOCUMENT */

.tessera-body {
    padding: 24px 40px;
    background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
    box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75;
    border-radius: 0px;
    margin-block: 2.5rem;
    max-width: 35rem;
    margin: 0rem auto 3rem;
}

.tessera-body p {
    font-weight: 500;
    font-size: 1.2rem;
    color: rgb(var(--dark-gray-monochrome));
}

#page-content .tessera-body a {
    font-weight: bold;
    color: rgba(var(--bright-accent));
    text-decoration: underline;
}

#page-content .tessera-body a:visited {
    color: rgb(var(--black-monochrome));
}

#page-content .tessera-body a:hover {
    color: rgb(var(--medium-accent));
    text-decoration-style: double;
}

@media (max-width: 479px) {
    .tessera-body {
        padding: 1rem 1rem;
    }
}

/* This makes the color of images in the paper doc blend with the paper color - ideal for Costodias' monochrome line art, though you might want to disable this when using other kinds of art. */

.paper img {
    mix-blend-mode: multiply;
}

/* MOSAIC EARTHWORM */

.earthworm {
    margin-block: 3rem;
    font-weight: bold;
    font-size: 1.5rem;
    color: rgb(var(--white-monochrome));
    text-align: center;
}

#page-content .earthworm a {
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin: 1rem auto;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.5s;
    border: 1px solid rgb(var(--white-monochrome));
    background: rgb(var(--dark-accent));
    border-radius: 0px 8px 0px 8px;
    border-left-color: rgb(var(--alt-accent));
    border-bottom-color: rgb(var(--alt-accent));
    max-width: 25rem;
}

#page-content .earthworm a:visited {
    color: rgb(var(--white-monochrome));
    border-color: rgb(var(--light-gray-monochrome));
}

#page-content .earthworm a:hover {
    text-decoration: none;
    border: 1px solid rgb(var(--alt-accent));
    color: rgb(var(--alt-accent));
}

.earthworm .tessera-eyebrow-container {
    margin: 3rem auto 1rem;
}

.earthworm p, .earthworm a {
    font-weight: bold;
}

/* AUDIO PLAYER */

.audio {
    margin-top: 2rem;
}

.audio iframe {
    width: 300px;
}

/* ———— MOBILE TWEAKS ———— */

/* Making the title text wrap on small screens */

@media (max-width: 460px) {
  #header h1 a {
    padding: 0;
    line-height: 1;
  }
  #header h2 span {
    padding-top: 15%;
  }
}

/* Making the title size smaller on small screens */

@media (max-width: 300px) {
    #header h1 a::after {
        font-size: 2rem;
    }

}

/* Fixing nav bar text size */
@media only screen and (max-width: 56.25rem) {
    #header div[class*=top-bar]>ul>li>a {
        background: 0 0;
        font-size: calc(var(--base-font-size)*(13/15));
    }
}

/* ———— DAY THEME ———— */

/* These values get replaced when the other themes are enabled. */

div#header {
    --login-line-divider-color: var(--swatch-primary-darkest);
    --login-username-color: var(--swatch-primary-darkest);
    --login-myaccount-color: var(--swatch-primary-darkest);
    --login-myaccount-hover-color: var(--white-monochrome);
    --search-icon-color: var(--black-monochrome);
}

:root {
    --header-gradient-color-bottom: 1, 16, 24;
    --header-gradient-color-middle: 255, 255, 255;
    --header-gradient-color-top: 255, 255, 255;
}

#extra-div-1 {
    background-image: url('http://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-bg.webp');
}

#extra-div-2 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-lighthouse.webp');
}

#extra-div-3 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer1.webp');
}

#extra-div-4 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer2.webp');
}

#extra-div-5 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer3.webp');
}

#header h1 a::after {
    text-shadow: 5px 0px 5px #132934, 0px 4px 5px #132934, -5px 0px 5px #132934, 0px -4px 5px #132934, 5px 5px 10px #132934, -5px 5px 10px #132934, -5px -5px 10px #132934, 5px -5px 10px #132934;
}

#header h2 span::after {
    text-shadow: 5px 0px 5px #132934, 0px 4px 5px #132934, -5px 0px 5px #132934, 0px -4px 5px #132934, 5px 5px 10px #132934, -5px 5px 10px #132934, -5px -5px 10px #132934, 5px -5px 10px #132934;
}