直线天堂美学版式

资源中心 » 组件中心 » 原创主题版式一览 » 直线天堂美学版式

超阈限版式

[[include :backrooms-wiki-cn:theme:super-liminal]]
[[include :backrooms-wiki-cn:theme:linear-paradise]]
（请同时引用以上两行代码！）

介绍

直线天堂是由 Liurd 制作的“经典构成”系列（WIP）美学版式之一，基于超阈限。

展示

评分: +42+–x


close
著作信息

X
特别感谢：（排名不分先后）

Dr Hormress；

LemonCat233；

Ambersight；

cakelord114514；

lest-day；

Chris Evertworth；

hoah2333

等用户为本版式带来的帮助与建议！
评分: +42+–x

Level 0 的第一张照片。

Level 0 是一处非线性空间，外观类似于一家零售店的储藏后室。与它此前被确认的形式相似，Level 0 中的所有房间都在外观上呈现出具有共同表面特征的统一制式模样，例如泛黄的墙纸、潮湿的地毯和以不一致方式安装的荧光灯具。然而，本层中不存在两个完全相同的房间¹。

一号标题

二号标题

三号标题

+ 这是一个折叠。

无序列表
列表之二
- 列表嵌套

有序列表
二号

这是一个	表格
制作它的	方法
请查询维基语法。

> blockquote
[[div class="blockquote"]]

[[code]]
[[div class="code"]]

[[div class="lightblock"]]

[[div class="darkblock"]]

[[div class="styled-quote"]]

[[div class="dark-styled-quote"]]

[[div class="borderblock"]]

[[div class="styled-quote l"]]

[[div class="darkblock r"]]

[[note]]

白墙也是墙！

[[span class="bblock"]]

[[span class="dblock"]]

[[span class="keycap"]]

[[span class="ruby"]][[span class="rt"]]

[[div class="meta-title"]]

[[div class="lightblock classic r"]]

如果你希望使用一个延伸到页面两端的元素，请添加以下代码：

[[div class="overflow-wrapper-wrapper"]]

[[div class="overflow-wrapper"]]

内容在此

[[/div]]

[[/div]]

但通常而言文字不应该一起延伸到两边。毕竟如果那么做的话页面可读性就太可怕了（而且因为我的糟糕代码有溢出的问题），如果你不想那样就加一个 [[div class="classic"]] 来解决这个问题。当然，给 [[div]] 同时添加两个及以上的类也是可以的，就像这个一样。

像这里就只加了 classic！没错，这真的有一个块，我没开玩笑，认真的。什么？你问我为什么要套两层？呃…因为它的代码实现实在是太灾难了，你绝对不会想看源代码的，真的。另外，这段文字的另一个功能是充当乱数假文。

也可以反过来嵌套使用！——你自己看源代码就知道怎么做了，对吧？

标题字体是 Railway
正文字体是 Montserrat
等宽字体是 PT mono

‡ 授权 / 引用

版式 CSS 代码

关闭

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 
:root {
    /* Basic Colors */
    --background-color: 248, 248, 248;
    --text-color: 30, 30, 30;
 
    /* Deco Colors */
    --light-color-1: var(--background-color);
    --light-color-2: 235, 235, 235;
    --dark-color-1: 180, 180, 180;
    --dark-color-2: 90, 90, 90;
    --dark-color-3: var(--text-color);
    --dark-color-4: var(--text-color);
 
    /* Special Colors */
    --warning-color: 193, 44, 50;
    --accept-color: 20, 169, 32;
    --neutral-color: 193, 147, 44;
    --warning-text-color: var(--light-color-2);
    --accept-text-color: var(--warning-text-color);
    --neutral-text-color: var(--warning-text-color);
 
    /* Link Colors */
    --link-color: 68, 123, 230;
    --hover-link-color: 24, 80, 187;
    --visited-link-color: 23, 24, 120;
    --newpage-color: 68, 23, 230;
 
    /* Select Colors */
    --selected-background-color: 67, 98, 197;
    --selected-text-color: 253, 253, 253;
 
    /* Scrollbar Colors */
    --scrollbar-color: var(--dark-color-1), 0.75;
    --scrollbar-background-color: var(--dark-color-1), 0.15;
 
    /* Note Colors */
    --note-background-color: var(--light-color-1);
 
    /* General Buttons */
    --general-button-background-color: var(--general-dark-background-color);
    --general-hover-button-background-color: var(--general-medium-background-color);
 
    /* Header Colors */
    --header-background-bottom: var(--background-color), 0;
    --header-background-top: var(--dark-color-1), 0.3;
    --header-extra-background-image: none;
    --header-text-color: var(--general-dark-text-color);
 
    /* Topbar Colors */
    --topbar-background-color: var(--dark-color-4);
    --topbar-hover-background-color: var(--dark-color-2);
    --topbar-drop-text-color: var(--text-color);
    --topbar-drop-background-color: var(--background-color), 0.75;
    --topbar-drop-hover-background-color: var(--general-dark-background-color);
 
    /* User Account Colors */
    --header-username-color: var(--general-dark-text-color);
    --account-button-text-color: var(--general-dark-text-color);
    --account-button-hover-text-color: var(--general-medium-text-color);
    --account-button-background-color: var(--general-dark-background-color);
    --account-button-hover-background-color: var(--general-medium-background-color);
 
    /* Page Title Colors */
    --page-title-text-color: var(--general-dark-text-color);
 
    /* Page Tag Colors */
    --page-tag-border-color: var(--general-dark-background-color);
 
    /* Footer Colors */
    --footer-background-color: var(--general-dark-background-color);
 
    /* Sidebar Colors */
    --sidebar-background-color: var(--light-color-1);
    --sidebar-media-background-color: var(--background-color);
    --sidebar-title-background-color: var(--general-dark-background-color);
    --sidebar-hover-text-color: var(--general-dark-text-color);
    --sidebar-hover-background-color: var(--general-medium-background-color);
 
    /* Action Colors */
    --action-area-info-background-color: var(--general-dark-background-color);
 
    /* Edit Area Colors */
    --edit-area-textarea-background-color: var(--background-color);
 
    /* Rating Module Colors */
    --rating-rateup-color: var(--dark-color-3);
    --rating-ratedown-color: var(--dark-color-3);
    --rating-cancel-color: var(--dark-color-3);
 
    /* Popups Colors */
    --popup-background-color: var(--background-color);
 
    /* The 4 */
    --dark-styled-quote-border-color: var(--dark-color-2);
 
    /* Header Vs */
    --main-header-height: 12rem;
    --main-header-height-on-mobile: 12rem;
    --header-title: "THE BACKROOMS";
    --header-title-font-size: 2.65rem;
    --header-title-font-size-on-mobile: 2rem;
    --header-subtitle: "真理隐于几何之间";
    --header-subtitle-font-size: 1rem;
    --header-subtitle-font-size-on-mobile: 1rem;
 
    /* Topbar Vs */
    --topbar-height: 2.5rem;
    --topbar-height-on-mobile: 2.5rem;
    --topbar-font-size-on-mobile: 0.8rem;
 
    /* Font Set */
    --body-font: "Montserrat", sans-serif;
    --header-font: "Raleway", sans-serif;
    --title-font: var(--header-font);
    --mono-font: "PT Mono", monospace;
}
 
html {
    background: unset;
}
 
body {
    background: linear-gradient(to bottom, rgba(var(--dark-color-1), .4), rgba(var(--background-color)) 40rem);
}
 
#extra-div-1 {
    position: absolute;
    width: 100%;
    height: 10rem;
    top: 1rem;
    left: 0;
    background: linear-gradient(-5deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 150%);
    clip-path: polygon(0 0, 100% 8rem, 100% 100%, 0 2rem);
    z-index: -1;
}
 
#extra-div-2 {
    position: absolute;
    width: 100%;
    height: 6rem;
    top: -3rem;
    left: 0;
    background: linear-gradient(120deg, rgb(var(--dark-color-3)) 20%, rgba(var(--dark-color-1)) 200%);
    clip-path: polygon(100% 0, 0 calc(100% - 2rem), 0 100%, 100% 2rem);
    z-index: -4;
}
 
#extra-div-3 {
    position: absolute;
    width: 100%;
    height: 25rem;
    top: -16rem;
    left: 0;
    background: linear-gradient(-85deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 80%);
    clip-path: polygon(0 calc(100% - 2rem), 100% 0, 100% 2rem, 0 100%);
    z-index: -3;
}
 
#extra-div-4 {
    --gap: 17vh;
 
    position: absolute;
    background-image: repeating-linear-gradient(-15deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1)) var(--gap), rgba(var(--dark-color-1)) calc(var(--gap) + 3px));
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -4;
    opacity: 0.4;
    mask: linear-gradient(175deg, black 0, transparent 25rem, transparent calc(100% - 60rem), black calc(100% - 0rem));
}
 
#extra-div-5 {
    --gap: 10vh;
 
    position: absolute;
    background-image: repeating-linear-gradient(16deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-2), 1) var(--gap), rgba(var(--dark-color-2), 1) calc(var(--gap) + 1rem));
    mask: linear-gradient(175deg, black 0, transparent 80%);
    width: 100%;
    height: 32rem;
    top: 0;
    z-index: -5;
    opacity: 0.6;
}
 
#extra-div-6 {
    --gap: 25vh;
 
    position: absolute;
    background-image: repeating-linear-gradient(10deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1)) var(--gap), rgba(var(--dark-color-1)) calc(var(--gap) + 1px));
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -4;
    opacity: 0.4;
    mask: linear-gradient(175deg, transparent 40rem, black 100rem, black calc(100% - 120rem), transparent calc(100% - 50rem));
}
 
#header-extra-div-1 {
    position: absolute;
    width: 100%;
    height: 6.4rem;
    top: 9rem;
    left: 0;
    background: linear-gradient(175deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-1)) 150%);
    clip-path: polygon(0 0, 100% calc(100% - 2rem), 100% 100%, 0 2rem);
}
 
#header-extra-div-2 {
    position: absolute;
    width: 100%;
    height: 11rem;
    top: -2rem;
    left: 0;
    background: linear-gradient(60deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 250%);
    clip-path: polygon(0 calc(100% - 2rem), 100% 0rem, 100% 2rem, 0 100%);
}
 
#header-extra-div-3 {
    position: absolute;
    width: 100%;
    height: 8rem;
    top: 6rem;
    left: 0;
    background: linear-gradient(50deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-1)) 250%);
    clip-path: polygon(0 calc(100% - 2rem), 100% 0rem, 100% 2rem, 0 100%);
}
 
#header {
    position: sticky;
    top: -12rem;
}
 
#header h1 a span {
    font-weight: 300;
    text-shadow: 0 0 0.3rem rgb(var(--dark-color-3)), 0 0 0.5rem rgb(var(--dark-color-3));
}
 
#header h1 a span::after {
    font-weight: 400;
}
 
#header h2 span::before {
    filter: drop-shadow(0 0 0.4rem rgb(var(--dark-color-1)));
    opacity: 0.8;
    background-position: center 0.5rem;
    background-size: auto 85%;
    position: relative;
    top: 0.8rem;
}
 
#login-status {
    text-shadow: 0 0 0.5rem rgb(var(--dark-color-3));
}
 
#account-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    text-shadow: none;
}
 
#top-bar {
    background: linear-gradient(90deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 150%);
    box-shadow: 0 0 0.5rem rgb(var(--dark-color-1), .2);
}
 
#top-bar::before {
    content:"";
    display: block;
    background: inherit;
    width: 100%;
    height: 1rem;
    position: absolute;
    bottom: 100%;
    left: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: -1;
}
 
#top-bar::after {
    content:"";
    display: block;
    background: inherit;
    width: 100%;
    height: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    clip-path: polygon(0 100%, 100% 0, 0 0);
    z-index: -1;
}
 
#content-wrap {
    overflow-x: hidden;
}
 
#main-content {
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
#main-content > div:not(#page-title) {
    width: min(var(--body-width), calc(100% - 2rem));
}
 
#page-title, .meta-title {
    padding: 2.5rem 0;
    text-align: center;
    border-bottom: unset;
    background: linear-gradient(-141deg, rgb(var(--dark-color-3)) 50%, rgba(var(--dark-color-2)) 120%);
    clip-path: polygon(0 2.5rem, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}
 
#page-title {
    width: 100%;
    padding: 2.5rem var(--body-margin);
    box-sizing: border-box;
}
 
#page-content a:not(div.page-rate-widget-box a, div.creditButton p a, div.creditButtonStandalone p a, .licensebox a, .pager a), .page-watch-options a {
    text-shadow: 0 0 0.2rem rgb(var(--dark-color-1));
    transition: color 0.15s, text-shadow 0.15s cubic-bezier(0.4, 0.0, 1, 1);
}
 
#page-content a:not(div.page-rate-widget-box a, div.creditButton p a, div.creditButtonStandalone p a, .licensebox a, .pager a):hover, .page-watch-options a:hover {
    text-shadow: 0 0 0.5rem rgb(var(--dark-color-1));
    text-decoration: none;
}
 
.overflow-wrapper-wrapper {
    width: 0;
    margin: auto;
}
 
.overflow-wrapper {
    margin-left: -51vw; margin-right: -51vw;
}
 
.classic {
    width: min(var(--body-width), calc(100% - 2rem));
    margin-left: auto; margin-right: auto;
}
 
.l {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    clip-path: polygon(0 1rem, 100% 0, 100% calc(100% - 1rem), 0 100%);
}
 
.r {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    clip-path: polygon(100% 1rem, 0 0, 0 calc(100% - 1rem), 100% 100%);
}
 
.borderblock {
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    border-top: 0.3rem solid rgb(var(--general-dark-border-color));
    border-bottom: 0.3rem solid rgb(var(--general-dark-border-color));
}
 
.footnotes-footer, .bibitems {
    height: fit-content;
}
 
.page-tags span a {
    border-radius: 0;
}
 
.owindow.owait {
    --gap: 3%;
 
    background-image: repeating-linear-gradient(to bottom right, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1), .4) var(--gap), rgba(var(--dark-color-1), .4) calc(var(--gap) + 3px));
    background-size: 1000% 1000%;
    animation: saving-page-animation infinite ease-in-out 3s alternate;
    justify-content: center;
}
 
.owindow.owait .content{
    display: none;
}
 
@keyframes saving-page-animation {
    0% {
        background-position: 0 0;
    }
 
    100% {
        background-position: 10% 10%;
    }
}

关闭

原创版式美学版式

页面版本: 5, 最后编辑于: 17 Feb 2025 11:29

编辑评分 (+42) 标签讨论 (12) 历史记录附件打印网站工具 + 选项

The Backrooms中文维基

你曾经来过这里

介绍

展示

著作信息

一号标题

二号标题

三号标题