这个版式由
想要用这个版式,可以把
[[include :r-backrooms-wiki-cn:theme:zongsedangan]]
塞到你的文档里!
文字
文字
文字
文字
文字
文字
文字1
文字
文字
文字
| 标题文字 | 标题文字 |
|---|---|
| 不知道 | 你有没有发现 |
| 这个表格是等宽的,而且每行颜色不一样。 | |
[[div class="lightblock"]]
文字
[[/div]]
[[div class="darkblock"]]
文字
[[/div]]
[[div class="styled-quote"]]
文字
[[/div]]
[[div class="dark-styled-quote"]]
文字
[[/div]]
[[div class="lightblock-c"]]
文字
[[/div]]
[[div class="darkblock-c"]]
文字
[[/div]]
[[div class="styled-quote-d"]]
文字
[[/div]]
[[div class="dark-styled-quote-d"]]
文字
[[/div]]
[[div class="dark-clipblock"]]
文字
[[/div]]
[[div class="lightblock-c"]]
文字
[[/div]]
[[div class="darkblock-c"]]
文字
[[/div]]
标题示例
[[div class="titleblock"]]
[[span class="titlebox"]]标题示例[[/span]]
[[/div]]
标题示例
[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]标题示例[[/span]]
[[/div]]
[[div class="light-borderblock"]]
文字
[[/div]]
[[div class="dark-borderblock"]]
文字
[[/div]]
[[div class="border-logoblock"]]
文字
[[/div]]
[[div class="glassblock"]]
文字
[[/div]]
[[div class="hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="light-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="dark-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="inset-hoverblock"]]
试试把鼠标放在这里
[[/div]]
文件袋(试试放鼠标)
[[div class="file-bag"]]
[[span class="file-bag-text"]]文件袋[[/span]]
[[div class="file-content"]]
文件内容
[[/div]]
[[/div]]
示例标题
[[div class="news-grid"]]
[[div class="side"]]
[[div class="news-title" ]]
标题
[[/div]]
侧边文字
[[/div]]
[[div class="news-1"]]
第一栏文字
[[/div]]
[[div class="news-2"]]
第二栏文字
[[/div]]
[[/div]]
(使用时把三段代码结合起来使用)
/*======================引入半新阈限====================*/ @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Theme/THEME_normalize-archived_min.css"); @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Theme/THEME_BHL-archived_min.css"); @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/004v_THEME-liminal_base.css"); @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/003v_THEME-liminal_new-BHL.css"); /*---------------- 字体-----------------*/ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); @import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap'); @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/001v_THEME-liminal_centered-header.css"); @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/000v_THEME-liminal_collapsible-sidebar.css"); #header h1 a::before { color: rgb(var(--swatch-headerh1-color));} @media (min-width: 767px) { #side-bar{ left:0 } } @media only screen and (min-width: 769px){#side-bar :is(.side-block:nth-child(4), .side-block:nth-child(5), .side-block:nth-child(3)) {margin-top:-0.5rem;}} .hovertip { display: block; text-align: left; max-width: max-content; } #main-content .page-tags::before { font-family: var(--tagguid-font); } @media (max-width: 500px){ .footnotes-footer { width: 100%; } } .side-block.media{ margin-left:0 !important;; } /*=================版式正文=====================*/ :root { --logo-image: url("http://r-backrooms-wiki-cn.wikidot.com/local--files/rate:lpoigd5289-logo/ERR"); --header-title: "棕色档案"; --header-subtitle: "棕色的沉淀"; --body-font: 'Source Code Pro', 'zcoolwenyiti', '等线' , monospace; --header-font: 'Dotted Songti Square', sans-serif; --title-font: 'Dotted Songti Square', sans-serif; --mono-font: 'Source Code Pro', 'zcoolwenyiti', '等线' ,monospace; --white-monochrome:249,244,242; --pale-gray-monochrome: 255,244,242; --light-gray-monochrome: 59,69,69; --gray-monochrome:58,7,7; --medium-accent: 140,40,10; --bright-accent: 58,7,7; --dark-accent: 58,7,7; --black-monochrome: 58,7,3; } #skrollr-body { background-image: radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0); background-repeat: repeat; background-size: 0.25em 0.25em; width: 100%; height: 7.5rem; } /*-----------折叠框美化---------*/ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: rgb(var(--black-monochrome)); transition: background 0.25s linear; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; width: -webkit-min-content; width: -moz-min-content; width: min-content; white-space: nowrap; overflow: hidden; margin: auto; } #page-content .collapsible-block-folded .collapsible-block-link::before { content: "+ "; } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "- "; } #page-content .collapsible-block-link { text-decoration: none; color: rgb(var(--white-monochrome)); font-weight: 700; } #page-content .collapsible-block-link:hover { color: rgb(var(--black-monochrome)); } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover { background: rgb(var(--swatch-primary)); } #page-content .collapsible-block-unfolded-link { box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary)); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 0.625rem; margin-bottom: 0.625rem; } /*---------表格美化-------------*/ table.wiki-content-table { border-spacing: 0; overflow: auto; min-width: 100% } #main-content table.wiki-content-table th { color: rgba(var(--black-monochrome)); background: rgba(var(--bright-accent),.6); } #main-content table.wiki-content-table td, table.wiki-content-table th { padding: 6px 13px } table.wiki-content-table tr { background-color: rgba(var(--white-monochrome),.05); } table.wiki-content-table tr:nth-child(odd) { background-color: rgba(var(--bright-accent),.05); } #page-content table.wiki-content-table th, #page-content table.wiki-content-table td, #page-content div.b-tables table.wiki-content-table th, #page-content div.b-tables table.wiki-content-table td { border: 0.15rem solid rgba(var(--tables-border),.6) !important; } /*-------------div----------------*/ .styled-quote { background-color: rgb(var(--pale-gray-monochrome)); border-left: 0.5rem solid rgba(var(--gray-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0, 0, 0, .25); } .dark-styled-quote { background-color: rgb(var(--gray-monochrome)); border-left: 0.5rem solid rgba(var(--pale-gray-monochrome)); color: rgb(var(--white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0, 0, 0, .25); } .dark-styled-quote a { color: rgb(var(--swatch-menubg-medium-color)); } .lightblock { background-color: rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .25); } .darkblock { background-color: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .25); } .darkblock a { color: rgb(var(--swatch-menubg-medium-color)); } /*高级一点的div*/ .lightblock-c { background-color: rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .darkblock-c { background-color: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .glassblock { background-image: linear-gradient(-30deg, rgba(var(--medium-accent),.8) -80%, rgba(var(--white-monochrome),.4) 100%); border: solid rgb(var(--pale-accent)) 2px; padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: box-shadow 0.3s ease-out; -webkit-transition: box-shadow 0.3s ease-out; } .hoverblock:hover,.hoverblock:focus{ box-shadow: 0px 4px 10px 0 rgba(0,0,0, .25); } .light-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .light-hoverblock:hover,.light-hoverblock:focus{ background-color: rgb(var(--pale-gray-monochrome)); box-shadow: 0px 4px 10px 0 rgba(0,0,0, .25); } .dark-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .dark-hoverblock:hover,.dark-hoverblock:focus{ background-color: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); box-shadow: 0px 4px 10px 0 rgba(0,0,0, .25); } .inset-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: box-shadow 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transform: translateY(0em); } .inset-hoverblock:hover,.hoverblock:focus{ box-shadow: inset 0px 4px 20px 0 rgba(var(--black-monochrome), .25); background-color: rgb(var(--white-monochrome)); color: rgb(var(--black-monochrome)); transform: translateY(.3em); } .styled-quote-d { background-color:rgb(var(--white-monochrome)); border-left: 0.5rem solid rgba(var(--gray-monochrome)); border-right: 0.5rem solid rgba(var(--gray-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote-d { background-color:rgb(var(--gray-monochrome)); border-left: 0.5rem solid rgb(var(--white-monochrome)); border-right: 0.5rem solid rgb(var(--white-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote-d a{ color: #bbbbbb; } .shadow-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ box-shadow: 4px 4px 0 0 rgba(var(--light-gray-monochrome)); border: 0.3rem solid rgba(var(--light-gray-monochrome)); } .shadow-hoverblock:hover,.shadow-hoverblock:focus{ box-shadow: 20px 20px 0px 0 rgba(var(--light-gray-monochrome)); transform: translate(-.3em); } .dark-clipblock{ background-color: rgba(var(--gray-monochrome)); margin: 0.5rem 0.25rem; padding: 0.01rem 3.2rem 0.01rem 1rem; clip-path: polygon(-100% -100%,100% 0%,calc(100% - 3rem) 50%,100% 100%,0% 100%); color:rgb(var(--white-monochrome)); } .titleblock { background-color: rgb(var(--pale-gray-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-top: solid rgb(var(--pale-accent)) 0.3rem; color: rgb(var(--gray-monochrome)); } .dark-titlebox{ position: relative; top: -1.6rem; left: -0.5rem; background-color: rgb(var(--pale-accent)); color: rgb(var(--white-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-titleblock { background-color:rgb(var(--gray-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-top: solid rgb(var(--dark-accent)) 0.3rem; } .titlebox{ position: relative; top: -1.6rem; left: -0.5rem; background-color: rgb(var(--pale-accent)); color: rgb(var(--gray-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-borderblock { background-color:rgb(var(--gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--white-monochrome)); } .light-borderblock { background-color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--dark-accent)); } .border-logoblock{ padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color:rgb(255, 255, 255); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--gray-monochrome)); border: solid 0.3rem rgb(var(--white-monochrome)); } .border-logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: url(var(--logo-image)) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; height:400px; border: 0.35rem solid rgba(var(--gray-monochrome),0.8); } .side { grid-area: 1 / 1 / 3 / 2; border-right: solid rgb(var(--medium-accent)) 0.15rem; } .news-1 { grid-area: 1 / 2 / 2 / 4; border-bottom: solid rgb(var(--medium-accent)) 0.15rem; } .news-2 { grid-area: 2 / 2 / 3 / 4; } .news-title { font-size: 28px; /* 标题字体大小 */ color: rgb(var(--gray-monochrome)); /* 标题颜色 */ text-align: center; /* 居中对齐 */ font-weight: bold; /* 粗体 */ border-bottom:solid rgb(var(--gray-monochrome)) 0.25rem; } .file-bag { position: relative; width: 50%; height: 0; padding-top: 50%; background-color: rgb(var(--gray-monochrome)); border: 2px solid rgb(var(--gray-monochrome)); box-sizing: border-box; transition: transform 0.3s ease-out; } .file-bag:hover .file-content { left: 100%; opacity: 1; } .file-bag-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: rgb(var(--white-monochrome)); } .file-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--pale-white-monochrome)); color: #000; padding: 10px; box-sizing: border-box; transition: left 0.2s ease-out, opacity 0.2s ease; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0, 0, 0, .25); opacity: 0; }

