ddd

CroquemboucheCroquembouche 制作的 Swirling Ashes Theme 主题版式,遵循 CC BY-SA 3.0 协议。

如果您认为当前的版式存在问题,请在网站建议区提出意见。

@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css");
@import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css");
 
/* - == === BHL VARIABLES === == - */
 
/* This is a BHL theme, which is configuration-based, so the root element
 * contains variables that will affect the whole theme
 */
:root {
  /* S-CSS-P integration */
  --theme-base: "black-highlighter";
  --theme-id: "swirling-ashes";
  --theme-name: "Swirling Ashes Theme";
 
  --logo-image: url(http://xinshuguang-wiki.wikidot.com/local--files/major/logo.png);
 
  /* Colours */
  --dark-gray-monochrome: 26, 24, 26;
  --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
  --dark-accent: 63, 9, 143;
  --medium-accent: 81, 13, 181;
  --bright-accent: 105, 49, 186;
  --pale-accent: 128, 80, 200;
 
  /* Sky */
  --sky-at-dawn: 236, 112, 99;
  --sky-at-morning: 174, 214, 241;
  --sky-at-daytime: 249, 231, 159;
  --sky-at-evening: 248, 196, 113;
  --sky-at-dusk: 140, 50, 70;
  --sky-at-night: 50, 40, 67;
  --sky-length: 15;
  --sky-time: 60s;
 
  /* Header adjustments */
  --header-title: "New light";
  --header-subtitle: "New light,new land, new life,new order";
 
  /* Delete the default header background */
  --gradient-header: linear-gradient(transparent, transparent);
  --diagonal-stripes: linear-gradient(transparent, transparent);
}
 
:root:lang(cn) {
  /* Header adjustments */
  --header-title: "火烛:新曙光";
  --header-subtitle: "核战废土之上新的秩序";
}
 
/* - == === HEADER BACKGROUNDS === == - */
 
/* The header is made up of a million different stacked backgrounds.
 * Instead of fucking about with z-index, I've added backgrounds to
 * the ::before and ::after of various full-page elements in their
 * natural stacking order.
 */
 
/* The following pseudoelements each contain a different part of the
 * header background. They need to be drawn precisely over the header
 * and made unclickable so they don't interfere with the links up there.
 * They appear on the page in this order, so they'll also be drawn on
 * top of each other in this order.
 */
body::before,
div#container-wrap-wrap::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
  content: "";
  position: absolute;
  height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0;
  pointer-events: none;
}
 
/* The sky, which loops through a series of colours to evoke the
 * unstoppable passing of time
 */
body::before {
  background: linear-gradient(
                to top,
                rgb(var(--sky-at-morning)) 0%,
                rgb(var(--sky-at-morning)) 11%,
                rgb(var(--sky-at-daytime)) 22%,
                rgb(var(--sky-at-daytime)) 33%,
                rgb(var(--sky-at-evening)) 44%,
                rgb(var(--sky-at-dusk)) 55%,
                rgb(var(--sky-at-night)) 66%,
                rgb(var(--sky-at-night)) 77%,
                rgb(var(--sky-at-dawn)) 88%,
                rgb(var(--sky-at-morning)) 100%
              );
  background-size: 100% calc(var(--header-height-on-desktop)
                             * var(--sky-length));
  animation: sky linear var(--sky-time) infinite;
}
@keyframes sky {
  from { background-position: 0 0; }
  to {
    background-position: 0 calc(var(--header-height-on-desktop)
                                * var(--sky-length));
  }
}
 
/* The city skyline */
div#container-wrap-wrap::before {
  background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline.png');
  background-size: auto var(--header-height-on-desktop);
}
 
/* Two backgrounds: a white and blurred shine on the buildings,
 * taken from a brightness threshold of the original skyline
 * image; and a white-to-transparent gradient that uses the
 * original skyline image as a clipping mask. These appear in
 * the day and fade for the night to represent the sun's
 * reflection on the buildings.
 */
div#container-wrap::before {
  background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-whitewash.png'),
              url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-highlight.png');
  background-size: auto var(--header-height-on-desktop);
  animation: shine ease-in-out var(--sky-time) infinite;
}
@keyframes shine {
  0%, 40%, 100% { opacity: 0.2; }
  55%, 77% { opacity: 0; }
}
 
/* The final two pseudoelements contain the ashes: clouds that
 * roll past the city at ground level. Two elements are needed
 * because the two layers of clouds have different widths and
 * move at different speeds.
 * The fade animation affords an unobscured view of the city
 * every 3rd night.
 */
div#container-wrap-wrap::after, body::after {
  background-size: var(--ashes-width) var(--header-height-on-desktop);
  background-repeat: repeat-x;
  animation: ashes-move linear var(--ashes-move-duration),
             ashes-fade ease calc(var(--sky-time) * 3);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
div#container-wrap-wrap::after {
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-large.png');
  --ashes-move-duration: 27s;
  --ashes-width: 500px;
  --ashes-opacity: 0.5;
}
body::after {
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-small.png');
  --ashes-move-duration: 20s;
  --ashes-width: 800px;
  --ashes-opacity: 0.4;
}
@keyframes ashes-move {
  from { background-position: 0 0; }
  to { background-position: var(--ashes-width) 0; }
}
@keyframes ashes-fade {
  0%, 85%, 96%, 100% { opacity: var(--ashes-opacity); }
  88.66%, 92.33% { opacity: 0.1; }
}
 
/* - == === BODY BACKGROUNDS === == - */
 
/* This psuedolement contains the faint purple patchy smog on the page
 * just below the header, as a thematic transition from dark to light.
 */
#content-wrap { position: relative; }
#content-wrap::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/purple-smoke.png');
  opacity: 0.2;
}
 
/* - == === MISCELLANEOUS === == - */
 
/* Add a pinch of extra contrast to the login info */
#login-status {
  background: rgba(var(--dark-accent), 0.3);
  padding-left: 0.5rem;
}
 
/* Respect user motion settings */
@media screen and (prefers-reduced-motion: reduce) {
  body::before,
  div#container-wrap::before,
  div#container-wrap-wrap::after,
  body::after {
    animation: none;
  }
}
 
#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);
 
    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
     /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0,0,0,0;
    --sidebar-media-bg-color: 0,0,0,0;
 
     /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
     /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
     /* ===SIDEBAR COLLAPSIBLES=== */
     /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
     /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
     /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
     rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
     rgba(var(--swatch-secondary-color), 0.05); /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
     rgb(var(--swatch-primary-darker), 1) /* Thumb */
     rgb(var(--swatch-menubg-dark-color), 1); /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
     rgb(var(--swatch-primary-darker), 1) /* Thumb */
     rgb(var(--swatch-menubg-color), 1); /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color),0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a img {
    filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color),0));
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
/* Fix */
#side-bar div.menu-item:first-of-type a[href="/"], #side-bar div.menu-item:nth-of-type(2) a[href="/forum:start"] {
    justify-content: flex-start;
    padding: 0 0 0 calc(var(--base-font-size)*.93333);
}
 
#page-content>div.forum-thread-box>div.new-post>a:active, #page-content>div.forum-thread-box>div.new-post>a:hover, #page-content>div.forum-thread-box>div.options>a:active, #page-content>div.forum-thread-box>div.options>a:hover, .post-container>.post>div.long>div.options a:active, .post-container>.post>div.long>div.options a:hover {
    background-color: rgba(var(--dark-accent),1);
    color: rgb(var(--white-monochrome));
}
 
#login-status #account-options li>a, #login-status #account-options li>a:visited {
    color: rgb(var(--black-monochrome));
}

@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css");
@import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css");

/* - == === BHL VARIABLES === == - */

/* This is a BHL theme, which is configuration-based, so the root element
* contains variables that will affect the whole theme
*/
:root {
/* S-CSS-P integration */
—theme-base: "black-highlighter";
—theme-id: "swirling-ashes";
—theme-name: "Swirling Ashes Theme";

—logo-image: url(http://xinshuguang-wiki.wikidot.com/local--files/major/logo.png);

/* Colours */
dark-gray-monochrome: 26, 24, 26;
—swatch-topmenu-bg-color: var(
dark-gray-monochrome);
—dark-accent: 63, 9, 143;
—medium-accent: 81, 13, 181;
—bright-accent: 105, 49, 186;
—pale-accent: 128, 80, 200;

/* Sky */
—sky-at-dawn: 236, 112, 99;
—sky-at-morning: 174, 214, 241;
—sky-at-daytime: 249, 231, 159;
—sky-at-evening: 248, 196, 113;
—sky-at-dusk: 140, 50, 70;
—sky-at-night: 50, 40, 67;
—sky-length: 15;
—sky-time: 60s;

/* Header adjustments */
—header-title: "New light";
—header-subtitle: "New light,new land, new life,new order";

/* Delete the default header background */
—gradient-header: linear-gradient(transparent, transparent);
—diagonal-stripes: linear-gradient(transparent, transparent);
}

:root:lang(cn) {
/* Header adjustments */
—header-title: "火烛:新曙光";
—header-subtitle: "核战废土之上新的秩序";
}

/* - == === HEADER BACKGROUNDS === == - */

/* The header is made up of a million different stacked backgrounds.
* Instead of fucking about with z-index, I've added backgrounds to
* the ::before and ::after of various full-page elements in their
* natural stacking order.
*/

/* The following pseudoelements each contain a different part of the
* header background. They need to be drawn precisely over the header
* and made unclickable so they don't interfere with the links up there.
* They appear on the page in this order, so they'll also be drawn on
* top of each other in this order.
*/
body::before,
div#container-wrap-wrap::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
content: "";
position: absolute;
height: var(—header-height-on-desktop); width: 100%; top: 0; left: 0;
pointer-events: none;
}

/* The sky, which loops through a series of colours to evoke the
* unstoppable passing of time
*/
body::before {
background: linear-gradient(
to top,
rgb(var(sky-at-morning)) 0%,
rgb(var(
sky-at-morning)) 11%,
rgb(var(sky-at-daytime)) 22%,
rgb(var(
sky-at-daytime)) 33%,
rgb(var(sky-at-evening)) 44%,
rgb(var(
sky-at-dusk)) 55%,
rgb(var(sky-at-night)) 66%,
rgb(var(
sky-at-night)) 77%,
rgb(var(sky-at-dawn)) 88%,
rgb(var(
sky-at-morning)) 100%
);
background-size: 100% calc(var(header-height-on-desktop)
* var(
sky-length));
animation: sky linear var(sky-time) infinite;
}
@keyframes sky {
from { background-position: 0 0; }
to {
background-position: 0 calc(var(
header-height-on-desktop)
* var(—sky-length));
}
}

/* The city skyline */
div#container-wrap-wrap::before {
background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline.png');
background-size: auto var(—header-height-on-desktop);
}

/* Two backgrounds: a white and blurred shine on the buildings,
* taken from a brightness threshold of the original skyline
* image; and a white-to-transparent gradient that uses the
* original skyline image as a clipping mask. These appear in
* the day and fade for the night to represent the sun's
* reflection on the buildings.
*/
div#container-wrap::before {
background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-whitewash.png'),
url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-highlight.png');
background-size: auto var(header-height-on-desktop);
animation: shine ease-in-out var(
sky-time) infinite;
}
@keyframes shine {
0%, 40%, 100% { opacity: 0.2; }
55%, 77% { opacity: 0; }
}

/* The final two pseudoelements contain the ashes: clouds that
* roll past the city at ground level. Two elements are needed
* because the two layers of clouds have different widths and
* move at different speeds.
* The fade animation affords an unobscured view of the city
* every 3rd night.
*/
div#container-wrap-wrap::after, body::after {
background-size: var(ashes-width) var(header-height-on-desktop);
background-repeat: repeat-x;
animation: ashes-move linear var(ashes-move-duration),
ashes-fade ease calc(var(
sky-time) * 3);
animation-iteration-count: infinite;
animation-fill-mode: both;
}
div#container-wrap-wrap::after {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-large.png');
ashes-move-duration: 27s;
—ashes-width: 500px;
—ashes-opacity: 0.5;
}
body::after {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-small.png');
—ashes-move-duration: 20s;
—ashes-width: 800px;
—ashes-opacity: 0.4;
}
@keyframes ashes-move {
from { background-position: 0 0; }
to { background-position: var(
ashes-width) 0; }
}
@keyframes ashes-fade {
0%, 85%, 96%, 100% { opacity: var(—ashes-opacity); }
88.66%, 92.33% { opacity: 0.1; }
}

/* - == === BODY BACKGROUNDS === == - */

/* This psuedolement contains the faint purple patchy smog on the page
* just below the header, as a thematic transition from dark to light.
*/
#content-wrap { position: relative; }
#content-wrap::before {
content: "";
position: absolute;
height: 100%; width: 100%; top: 0; left: 0;
background-repeat: repeat-x;
pointer-events: none;
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/purple-smoke.png');
opacity: 0.2;
}

/* - == === MISCELLANEOUS === == - */

/* Add a pinch of extra contrast to the login info */
#login-status {
background: rgba(var(—dark-accent), 0.3);
padding-left: 0.5rem;
}

/* Respect user motion settings */
@media screen and (prefers-reduced-motion: reduce) {
body::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
animation: none;
}
}

#side-bar {
/* ===SECONDARY & TERTIARY COLORS=== */
/* Editing these will edit a vast majority of theme elements. Useful for making dark themes */

/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
swatch-secondary-color: var(swatch-menubg-dark-color);
swatch-tertiary-color: var(swatch-menubg-medium-color);
swatch-alternate-color: var(swatch-menubg-light-color);

/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
swatch-text-secondary-color: var(swatch-menutxt-dark-color);
swatch-text-tertiary-color: var(swatch-menutxt-light-color);

/* ===SIDE-BAR ELEMENTS=== */

/* ===SIDE-BAR GENERAL=== */
sidebar-bg-color: var(swatch-menubg-dark-color);
—sidebar-resources-bg-color: 0,0,0,0;
—sidebar-media-bg-color: 0,0,0,0;

/* ===SIDEBLOCK MENU=== */
sideblock-heading-border-color: var(bright-accent);
sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
—sideblock-heading-text-color: var(
swatch-text-tertiary-color);

/* ===MENU-ITEMS=== */
sidebar-border-color: var(swatch-primary), 0.08;
sidebar-subtest-color: var(swatch-text-tertiary-color);

sidebar-links-text: var(swatch-text-tertiary-color);
sidebar-links-hover-bg-color: var(bright-accent);
sidebar-links-hover-text-color: var(swatch-text-tertiary-color);

/* ===SIDEBAR COLLAPSIBLES=== */
/*Folded Colors */
sidebar-collapsible-fld-link-bg: var(swatch-primary), 0.25;
sidebar-collapsible-fld-link-color: var(swatch-text-tertiary-color);
sidebar-collapsible-fld-link-hover-color: var(swatch-text-tertiary-color);
sidebar-collapsible-fld-arrow-hover-color: var(swatch-text-tertiary-color);

/*Unfolded Colors */
sidebar-collapsible-ufld-link-bg: var(swatch-primary-darker), 0.25;
sidebar-collapsible-ufld-link-color: var(swatch-text-tertiary-color);
sidebar-collapsible-ufld-link-hover-color: var(swatch-text-tertiary-color);
sidebar-collapsible-ufld-arrow-hover-color: var(swatch-text-tertiary-color);

/* Unfolded Body Colors */
sidebar-collapsible-link-color: var(swatch-text-tertiary-color);
sidebar-collapsible-link-hover-color: var(swatch-text-tertiary-color);

scrollbar-color:
rgba(var(swatch-primary-darker), 0.1) /* Thumb */
rgba(var(
swatch-secondary-color), 0.05); /* Track */

border-color: rgba(var(—swatch-secondary-color), 0.4);
}

/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
scrollbar-color:
rgb(var(swatch-primary-darker), 1) /* Thumb */
rgb(var(
swatch-menubg-dark-color), 1); /* Track */
}

#side-bar:focus-within {
scrollbar-color:
rgb(var(swatch-primary-darker), 1) /* Thumb */
rgb(var(
swatch-menubg-color), 1); /* Track */
}

#side-bar::-webkit-scrollbar-track {
background-color: rgba(var(—swatch-tertiary-color), 0.8);
}

#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
background-color: rgba(var(—swatch-menubg-dark-color), 0);
}

#side-bar .side-block.media a:any-link {
background: rgba(var(—swatch-menubg-light-color),0.75) !important;
}

#side-bar .side-block.media a::before {
background: rgb(var(—social-color));
}

#side-bar .side-block.media a img {
filter: drop-shadow(0 0 0 rgba(var(—swatch-alternate-color),0));
transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(—swatch-alternate-color)));
}

#side-bar .side-block.media a:focus-within img {
filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(—swatch-alternate-color)));
}

/* Fix */
#side-bar div.menu-item:first-of-type a[href="/"], #side-bar div.menu-item:nth-of-type(2) a[href="/forum:start"] {
justify-content: flex-start;
padding: 0 0 0 calc(var(—base-font-size)*.93333);
}

#page-content>div.forum-thread-box>div.new-post>a:active, #page-content>div.forum-thread-box>div.new-post>a:hover, #page-content>div.forum-thread-box>div.options>a:active, #page-content>div.forum-thread-box>div.options>a:hover, .post-container>.post>div.long>div.options a:active, .post-container>.post>div.long>div.options a:hover {
background-color: rgba(var(dark-accent),1);
color: rgb(var(
white-monochrome));
}

#login-status #account-options li>a, #login-status #account-options li>a:visited {
color: rgb(var(—black-monochrome));
}

Included page "component:bhl-dark-sidebar" does not exist (create it now)

别想着他妈拿老子的东西 至少通知一声 本网站还是基于cc 3.0