component:theme
为什么
我每次搞全站版式
一用就崩
cnm
这是第二次尝试,失败了我就滚
改自http://scp-wiki-cn.wikidot.com/theme:shark-punching-centre-bhl
@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css"); @import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css"); #page-title, #breadcrumbs { text-align: center !important; } .scp-image-block.block-right { margin: 1em 0 1em 2em; } .scp-image-block > a:first-of-type { background: var(--gradient-header); } .scp-image-block .printuser img.small { width: initial; } .scp-image-block img { min-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.5em; } :root { --logo-image: url("https://3703r.wikidot.com/local--files/fujian/aaa"); --header-title: "R-U-NITLIGHT"; --header-subtitle: "FOR YOU,THAT'S ALL"; --rating-module-bg-color: 232, 240, 255; --rating-module-bottom-border-color: 0, 35, 94; --newpage-color: var(--alt-accent); /* ===THEME COLORS=== */ /* subdued theme color, for visited links */ --pale-accent: 20, 20, 210; /* vivid theme color, the "default" accent color */ --bright-accent: 0, 71, 194; /* theme color */ --medium-accent: 40, 91, 122; /* darker theme color */ --dark-accent: 0, 42, 115; /* alternate accent color, for newpage links */ --alt-accent: 190, 190, 255; --modal-header-bg: 150, 191, 255; } :root:lang(cn) { --header-title: "R·U·NITLIGHT"; --header-subtitle: "避难所,但不只是避难所"; } #main-content { --tables-header-bg: 0, 71, 194; --footnotes-footer-colorbar-color: 0, 42, 115; --pagetags-title-bg: 0, 42, 115; --blockquote-border-color: 0, 42, 115; } #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.wikidot.com/local--files/theme:shark-punching-centre-bhl/band.png'); opacity: 0.5; } #page-title, .meta-title { color: rgb(0, 0, 200); } .SPCbox { box-sizing: border-box; border: rgb(var(--medium-accent)) 10px solid; padding: 1rem; } .SPCbox-filled { box-sizing: border-box; border: rgb(var(--medium-accent)) 10px solid; padding: 1rem; background-color: rgb(122, 182, 255); } .SPCbox-dotted { box-sizing: border-box; border: rgb(var(--medium-accent)) 10px dashed; padding: 1rem; } .SPCbox-dotted-filled { box-sizing: border-box; border: rgb(var(--medium-accent)) 10px dashed; padding: 1rem; background-color: rgb(122, 182, 255); } .CICAPOCOnotice { border: #999999 1px solid; background-color: lightblue; padding: 5px; margin-bottom: 10px; } .DOnotice { border: hsl(0, 0%, 5%) 2px solid; background: hsl(208, 67%, 44%); padding: 5px; margin-bottom: 10px; color: hsl(208, 100%, 97%); } h1, h2, h3, h4, h5, h6 { color: rgb(0, 42, 115); } hr { color: rgb(0, 42, 115); background: rgb(0, 42, 115); border: rgb(0, 42, 115) 1px solid; } /*=======特色代码=======*/ /* * @name: 文字样式扩展 * @author: HelloOSMe * @version: 1.0 */ .mobile-show{ display:none; } @media screen and (max-width: 600px) { .mobile-show{ display:block; } .desktop-show{ display:none; } } /*黑幕*/ .heimu{ color: transparent; display:inline-block; background:#aaa; transition:all 100ms linear 0s; padding:0px; margin:0px; } .heimu:hover{ background: none; color:#aaa; transition:all 100ms linear 0s; } .heimu p{ display:inline-block; padding:0px; margin:0px; } /*模糊文字*/ .blur{ text-shadow: var(--text-color) 0 0 5px; color:transparent; display:inline-block; } /*模糊幕*/ .hblur{ text-shadow: #aaa 0 0 5px; color:transparent; transition:all 100ms linear 0s; display:inline-block; } .hblur:hover{ text-shadow:none; color:#aaa; transition:all 100ms linear 0s; } .hblur p{ display:inline-block; padding:0px; margin:0px; } /*颜色*/ .colorful{ background:linear-gradient(to right, red 0% , orange 20% , yellow 40% , green 60%, blue 80%, purple 100%); -webkit-background-clip: text; color: transparent; display:inline-block; } /*错误框*/ .errorbox{ border: dashed var(--error-color) 1px; padding:1em; color:var(--error-color); } .errorbox p{ padding:0px; margin:0px; } .buttonlink a{ border: var(--button-border)!important; background: var(--button-background)!important; color: #99a; padding-left:7px; padding-right:7px; padding-bottom:1px; transition:none; cursor:default; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } .buttonlink a:hover{ color:#fff; text-decoration:none; border-color:#fff; transition:none; cursor:default; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } /*=======结束:特色代码=======*/ /*=======原作者helloos========*/ /*=======很抱歉未经允许自己加了awa========*/ /*其他↓*/ /*剧中页眉,对就是基金会的那个组件*/ /*原作者woedenaz*/ @supports(display: grid) { :root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-tertiary-color)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-tertiary-color)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } } /*↓↓↓黑标风格折叠*/ /*也是基金会的组件,,,*/ /* BHL styled collapsibles with fancy-schamncy animations! By Monkatraz */ /* #page-content is shoved everywhere to make sure it's the most specific thingy */ /* Styling! */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; /* Animated things */ transition: background 0.2s linear; background: rgb(66, 66, 72); /* Technical bits */ width: min-content; white-space: nowrap; overflow: hidden; } /* The Clicky Text */ #page-content .collapsible-block-link { color: white; font-weight: bold; } /* Gets rid of the underline when hovering over the collapsible */ #page-content .collapsible-block-link:hover { text-decoration: none } /* Collapsible content */ #page-content .collapsible-block-content { border-bottom: solid 3px rgb(66,66,72); /* Animated things */ transition: border-top-color 0.2s linear; border-top: solid rgb(66, 66, 72) 5px; } /* End of addendum tag */ #page-content .collapsible-block-content::after { content:"附录结束"; font-weight: bold; font-size: 95%; color:white; background: rgb(66, 66, 72); width: 150px; border-radius: 3px; /* Technical bits */ display: block; text-align: center; margin:auto; margin-bottom: -3px; } /* Folded blocks are animated, unfolded ones are not */ #page-content .collapsible-block-folded { transition: max-width 0.2s linear; max-width: 7.75em; } #page-content .collapsible-block-unfolded-link{ width: min-content; } /* Addendum counter */ #page-content { counter-reset: collapse; } #page-content .collapsible-block, #page-content .unfolded-collapse, #page-content .centered-unfolded-collapse{ counter-increment: collapse; } /* Addendum prefixes */ #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷ 附录 XXXX." counter(collapse); border-right: dotted 0.25em; padding-right: 1rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽ 附录 XXXX." counter(collapse); border-right: dotted 0.25em; padding-right: 1rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } /* Hovering effects */ #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover{ background: rgb(100, 46, 44); max-width: 100%; } /* Top of the collapsible border - because it looks prettier this way */ #page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{ border-top-color: rgb(100, 46, 44); } /* Accent flash when clicking, also forces the collapsible to expand */ #page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active{ transition: background 0s, max-width 0s; background: rgb(133, 0, 5); max-width: 100%; } /* Done with normal collapsibles, now we do all the variations */ /* Unfolded collapsible */ #page-content .unfolded-collapse{ margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; background: rgb(66, 66, 72); /* Text */ color: white; font-weight: bold; /* Technical bits */ width: min-content; white-space: nowrap; overflow: hidden; } /* Addendum prefix */ #page-content .unfolded-collapse::before { content: "▽ 附录 XXXX." counter(collapse); border-right: dotted 0.25em; padding-right: 1rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } /* Bottom border */ #page-content .unfolded-collapse-border { display: block; width: 700px; border-top: solid rgb(66, 66, 72) 5px; } /* Centering, very simple */ #page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{ margin:auto; margin-top: 10px; } /* Removing the slick animation and addendum number because you're a monster */ /* Set back the max width and just ignore the transition screwyness */ #page-content .no-addendum .collapsible-block-folded { max-width: none; } /* Prefixes */ #page-content .no-addendum .collapsible-block-unfolded .collapsible-block-link::before, #page-content .no-addendum .unfolded-collapse::before { content: "▽"; border-right: none; padding-right: 0rem; } #page-content .no-addendum .collapsible-block-folded .collapsible-block-link::before { content: "▷"; border-right: none; padding-right: 0rem; } /* Kill the automatic footer because you haven no trouble figuring out where your addendums end */ #page-content .no-footer .collapsible-block-content{ border-bottom: none; } #page-content .no-footer .collapsible-block-content::after{ display:none; } /* Fittingly, we finish with the footer object */ /* The footer is actually the giant bottom border object because larger -> smaller works better */ #page-content .addendumfooter{ display: block; border-bottom: solid 3px rgb(66,66,72); margin:auto; text-align: center; } /* Texty bits */ #page-content .addendumfooter::after{ content: "附录结束"; font-weight: bold; font-size: 95%; color:white; background: rgb(66, 66, 72); width: 150px; border-radius: 3px; /* Technical bits */ display: block; text-align: center; margin:auto; margin-bottom: -3px; } /* Ayer's info-bar patch */ #page-content .info-container .collapsible-block { counter-increment: none; } #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { transition: none; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; background: var(--barColour); } #page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: ""; display: none; } #page-content .info-container .collapsible-block-content { border-bottom: none; transition: none; border-top: none; } #page-content .info-container .collapsible-block-content::after { display: none; } /* License Box Patch */ #page-content .licensebox .collapsible-block-link { color: inherit; } #page-content .licensebox .collapsible-block-link:hover { text-decoration: underline; } #page-content .licensebox .collapsible-block { counter-increment: none; } #page-content .licensebox .collapsible-block-folded, #page-content .licensebox .collapsible-block-unfolded-link { transition: none; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; background: none; } #page-content .licensebox .collapsible-block-folded::before, #page-content .licensebox .collapsible-block-unfolded-link::before { content: ""; display: none; } #page-content .licensebox .collapsible-block-content { border-bottom: none; transition: none; border-top: none; } #page-content .licensebox .collapsible-block-folded .collapsible-block-link::before, #page-content .licensebox .collapsible-block-unfolded .collapsible-block-link::before, #page-content .licensebox .unfolded-collapse::before { display: none; } #page-content .licensebox .collapsible-block-content::after { display: none; } /*可折叠侧边栏,依然是基金会的组件(*/ :root { --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15)); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 56.25rem) { #content-wrap { display: flex; position: initial; flex-direction: row; flex-grow: 2; width: calc(100vw - (100vw - 100%)); max-width: inherit; height: auto; min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem)); margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2); } #main-content { position: initial; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } #side-bar { position: -webkit-sticky; position: sticky; top: 0; left: 0; grid-area: side-bar; width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; max-height: 100vh; padding-right: 2.5rem; padding-left: 0.5rem; overflow-y: scroll; transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear; border: none; border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem); direction: rtl; scrollbar-width: thin; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: rgba(var(--swatch-primary-darker), 0.1) /* Thumb */ rgba(var(--swatch-tertiary-color), 0.05); /* Track */ } #side-bar::-webkit-scrollbar-track { background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8); } #side-bar::-webkit-scrollbar, #side-bar::-webkit-scrollbar-thumb, #side-bar::-webkit-scrollbar-corner { width: 0.5rem; border-right-width: calc(100vw + 100vh); border-right-style: inset; border-color: inherit; background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); } #side-bar:is(:hover, :active, :focus-within) { margin-right: 2.25rem; padding-right: 0.25rem; overflow-x: hidden; overflow-y: auto; border-color: rgba(var(--swatch-primary-darker), 1); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1); translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)); scrollbar-color: rgba(170, 170, 170, 1) /* Thumb */ rgba(252, 252, 252, 1); /* Track */ scrollbar-color: rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */ rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */ } #main-content::after { content: " "; display: flex; position: fixed; top: 0; left: 1rem; align-items: center; justify-content: center; width: 1rem; height: 100%; max-height: 100%; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center left 1rem; background-size: 1rem 12.875rem; pointer-events: none; } #side-bar:is(:hover, :active, :focus-within) + #main-content::after { left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); width: 0rem; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0; background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); font-size: 0em; } #main-content::before { content: " "; position: absolute; z-index: 9; top: var(--final-header-height-on-desktop, 0); left: 0; width: var(--sidebar-width-on-desktop, 14.5rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.5; background-color: rgb(var(--swatch-alternate-color, 0, 0, 0)); pointer-events: none; translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem); } #side-bar:is(:hover, :active, :focus-within) + #main-content::before { translate: 0; opacity: 0; } #side-bar .side-block { margin-top: 1em; padding-left: 0.25em; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); direction: ltr; } #side-bar .scpnet-interwiki-wrapper { direction: ltr; } /* Print Friendly Formatting by Estrella */ body.print-body { --sidebar-width-on-desktop: 0; } body.print-body #main-content::before, body.print-body #main-content::after { display: none; } }