茶壶 版式

这是为站点茶水间所做的版式，基于由 Aelanna 制作并由 Vodka Wells 与 MrPasserby 二次修改后的小城的问候版式进行究极魔改。

此版式已被默认应用至全局。在你的作品开头添加如下语法以应用此版式：

[[include :tea-room:theme:teapot]]

---

示例

好熟悉的标志，我在哪里见过？

可通过九个连字符“---------¹”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

---

标题可通过在一行字起始处输入1至6个加号“+”来创建

标题

首先，半影是神
然后忘了

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长Tab

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

空tab

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

---

一条分割线

嵌套引用块

我去除了大部分的悖蓝，但我保留了一部分，我觉得只有保留深色编辑框你才知道你用的是O9做的版式
等宽字叫Oxygen Mono，足以说明问题（（

这是	表格
你应该老早	就知道怎么
做这个了吧

• 一级²
  • 二级

正文、页眉、标题和LOGO字体为思源黑体/Montserrat，等宽字体为Oxygen Mono/思源黑体。

---

脚注

1. 我将用这种方式同时激怒所有人

2. 脚注。

---

源代码

/*
 
    TeaPot Theme
    [2023 Wikidot Theme]
    By OxygenNine
    Based on:
       Smalltown Greetings Theme by Vodka Wells & MrPasserby
       Sigma-9 Theme by Aelanna
 
*/
 
/* Basic CSS */
 
:root {
 --accentColor:#8DD188;
 --warnColor:#F4777C;
 --lightColor:#8497B0;
 --accentLight:#D9F0D7;
 --accentDark:#49A942;
 --darkColor:#262626;
 --darkColor2:#44546A;
 --lightGray:#EEEEEE;
 --darkGray:#353535;
 --logo:url(http://tea-room.wikidot.com/local--files/files/tearoom-logo.svg);
}
 
/* Fonts */
 
@import url(http://paraarc-sandbox.wikidot.com/local--files/files/Montserrat-Medium.otf);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('http://tea-room.wikidot.com/local--files/files/OxygenMono-Regular.otf');
 
@font-face {
  font-family: "Oxygen Mono";
  src: url("http://tea-room.wikidot.com/local--files/files/OxygenMono-Regular.otf") format("otf");
}
 
/* Basic Changes */
/* Body and Header */
 
body {
    font-family: 'Montserrat','Noto Sans SC', sans-serif;
    color: var(--darkColor);
    background: #FFF;
}
 
.page-source, tt {
    font-family: "Oxygen Mono","Consolas","Noto Sans SC",MONOSPACE;
}
 
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px;
    background: var(--logo) no-repeat;
    width: 90%;
    margin: 0 auto;
    background-size: 30em;
    background-position: center;
}
 
@media (min-width: 768px) and (max-width: 979px) {
 #header {
     background-position: center;
     background-size: 24rem;
 }
}
@media (max-width: 767px) {
 #header {
     background-size: 80%;
     background-position: center;
 }
}
 
#header h1 a {opacity:0;}
 
#header h1, #header h2 {
    margin: 0 auto !important;
    float: none !important;
}
 
#header h2 {
    padding-top: 3.1em;
    text-align: center;
}
 
#header h2 span {
    display: block;
    margin: 0;
    padding: 19px 0;
    line-height: 0px;
    max-height: 0;
    font-weight: lighter;
    color: var(--accentColor);
    text-shadow: none;
    letter-spacing: 5px;
    font-size: 0.8rem;
}
 
div#container-wrap {
    background: url(http://tea-room.wikidot.com/local--files/files/tearoom-bg.svg) top left repeat-x;
    background-size: 110% 12rem;
    background-position-x: -1rem;
}
 
#content-wrap {
    margin: 5em auto 0;
}
 
#top-bar {
    position: relative;
    top: 0rem;
    right: auto;
    width: 70%;
    height: 22px;
    line-height: 18px;
    padding: 0;
    margin: 0 auto;
    z-index: 20;
    font-size: 90%;
    display: flex;
    justify-content: center;
    background-color: var(--darkColor);
    border-radius: 1em;
    box-shadow: 0px 0px 0px 3px var(--accentColor) , 0px 2px 12px #000000d9;
}
 
#top-bar ul li a {
    border-left: none;
    border-right: none;
    text-decoration: none;
    transition: all 0.2s;
    color:var(--lightGray);
}
 
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
    color: var(--accentColor);
    border-left: none;
    border-right: none;
    background-color: transparent;
}
 
#top-bar a:hover {
    background-color: transparent;
    text-decoration: none;
    transform: scale(1.2);
    color: var(--accentColor);
}
 
#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
    background: transparent;
    text-decoration: none;
    text-shadow: 0px 0px 5px var(--accentColor);
}
 
#search-top-box-input {
    display: none;
}
 
#search-top-box-form input[type=submit] {
    border: solid 2px var(--accentColor);
    border-radius: 0px;
    padding: 2px 5px;
    color: var(--lightGray);
    background-color: var(--darkColor);
    background: var(--darkColor);
    box-shadow: none;
 
}
 
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
    border: solid 2px var(--accentColor);
    color: var(--accentColor);
    text-shadow: none;
    background-color: var(--darkColor);
    background: var(--darkColor);
    box-shadow: none;
    transition: all 0.3s;
}
 
#search-top-box {
    top: 3rem;
}
 
#account-options {
    background-color: var(--darkGray);
    box-shadow: -2px 0px 0px var(--accentColor);
}
 
#login-status ul a {
    color: var(--accentColor);
    background: transparent;
}
 
#account-options li a:hover {
    color: var(--lightGray);
    text-decoration: none;
    transition: all 0.3s;
}
 
/* Main Content */
 
#page-title {
    border-color: #c7c7c7;
    border-width: 2px;
}
 
h1, #page-title {
    color: var(--darkColor);
    padding: 0 0 0.15em;
    margin: 0 0 0.6em;
    font-weight: 900;
}
 
/* Tabs */
 
.yui-navset .yui-nav { border-color: var(--paper-ink-color); }
 
.yui-navset.yui-navset-top .yui-nav li {
    flex-grow: 1;
}
.yui-navset.yui-navset-top .yui-nav li a {
    border-width: 0;
}
 
.yui-navset .yui-content {
    padding: .5rem;
    border: none;
    background-color: var(--darkColor);
    box-shadow: none;
}
 
.yui-navset {
    position: relative;
    zoom: 1;
    box-shadow: 0px 0px 12px #00000021;
}
 
.yui-navset .yui-nav {
    border-color: var(--darkColor);
    display: flex;
}
 
.yui-navset.yui-navset-top .yui-nav li {
    flex-grow: 1;
    border: none;
    box-shadow: none;
}
 
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0 0 -3px 0;
}
 
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    margin: 0 0 0 0;
    padding: 1px 0 0;
    zoom: 1;
}
 
div.yui-navset ul.yui-nav .selected a, div.yui-navset ul.yui-nav .selected a:focus, div.yui-navset ul.yui-nav .selected a:hover {
    background: var(--darkColor);
    color: var(--lightGray);
    text-align: center;
    font-weight: 600;
    border: none;
}
 
div.yui-navset ul.yui-nav a, div.yui-navset div.yui-navset-top ul.yui-nav a {
    background: var(--lightGray);
    color: #000;
    width: 100%;
    text-align: center;
    font-weight: 400;
    transition: all 0.35s;
    border: none;
}
 
div.yui-navset ul.yui-nav a:hover, div.yui-navset ul.yui-nav a:focus {
    background: var(--darkGray);
    color: #fff;
}
 
/* Page Content */
 
.code {
    border: none;
    background-color: #000000;
    font-family: "Oxygen Mono","Consolas","Noto Sans SC",MONOSPACE;
    padding: 0 1em;
    margin: 0.4em 0;
    overflow: auto;
    border-radius: 1em 1em 1em 1em;
    color: var(--lightGray);
    background-image: linear-gradient(#000000 1.7em,#474747 1.7em);
    box-shadow: 0px 0px 12px #0000004f;
}
.code,pre,.code * {    font-family: "Oxygen Mono","Consolas","Noto Sans SC",MONOSPACE;}
.code::before {
    content: '● ● ●';
    background-image: linear-gradient(90deg, #FF0000 0%,#FF0000 33%,#FFFF00 33%,#00FF00 33%,#00FF00 68%,#FFFF00 68%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transform: translateY(0px);
    display: inline-block;
    z-index: 1;
    position: relative;
    font-family: 'Noto Sans SC';
}
 
a.newpage {
    color: var(--warnColor);
    text-decoration: none;
    background: transparent;
}
 
a,a:visited {
    color: var(--accentDark);
    text-decoration: none;
    background: transparent;
}
 
a:hover {
    text-decoration: none;
    background-color: transparent;
    color: var(--accentColor);
    transition: color 0.25s;
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #21252E;
    transition: background 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    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: #ededed;
    font-weight: bold;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Sidebar */
 
#side-bar .side-block {
    padding: 10px;
    border: none;
    box-shadow: none;
    background: var(--lightGray);
    margin-bottom: 10px;
}
 
.menu-item a:hover {
    background-color: var(--darkColor2);
    color: white;
    transition: 0.25s all;
}
 
.menu-collapsible a:hover {
    background-color: var(--accentColor);
    color: white !important;
    transition: 0.25s all;
}
 
#side-bar .heading {
    color: var(--darkGray);
    border-bottom: solid 1px var(--lightColor);
    padding-left: 15px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: normal;
    font-family: 'Noto Sans SC', sans-serif;
}
 
#side-bar a:visited {
    color: var(--accentDark);
}
 
div.blockquote, blockquote {
    border: none;
    padding: 0.5rem 1rem;
    background-color: #fff;
    box-shadow: 0px 0px 0px 1px #ddd ,-4px 0px 0px var(--darkColor), 0px 0px 12px #00000029;
}
 
.scp-image-block {
    border: none;
    box-shadow: 0px 0px 12px #00000040;
    width: 300px;
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--darkGray);
    border-top: none;
    padding: 4px 0;
    color: #fff;
}
 
/* Action Area */
 
#action-area {
    width: 96%;
    background: #000;
    border: solid 3px var(--accentColor);
    padding: 1em;
    margin: 0 auto;
    color: var(--lightGray);
}
 
#action-area h1 {
    color: var(--accentColor);
}
 
input.text {
    border: solid 2px var(--accentColor);
    margin: 0 1px;
    padding: 0.2rem;
    background-color: #3f3f3f;
    color: #fff;
    text-align: center;
    width: 95%;
}
 
table.form {
    margin: 0 auto !important;
    padding: 0;
}
 
table.form td, table.form th {
    vertical-align: top;
    padding: 0;
    font-size: 1.2rem;
}
 
.wd-editor-toolbar-panel {
    align-items: center;
}
 
.wd-editor-toolbar-panel div {
    height: 40px;
    display: flex;
}
 
.wd-editor-toolbar-panel ul li a {
    height: 22px;
    width: 22px;
    padding: 0px;
    margin: 0em 0.2em 0em 0.2em;
    display: block;
    transition: box-shadow 0.2s , filter 0.3s;
}
 
.wd-editor-toolbar-panel li.hseparator {
    width: 2px;
    height: 33px;
    margin: 0 5px;
    background-color: #efefef;
}
 
#edit-page-comments {
    width: 100%;
    height: 4rem;
}
 
.wd-editor-toolbar-panel a {
    background-image: url(http://paraarc-sandbox.wikidot.com/local--files/files/eidicons1.svg);
    background-size: 969px;
    zoom: 1.4;
}
 
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://paraarc-sandbox.wikidot.com/local--files/files/eidicons1.svg);
    filter: brightness(1) contrast(1.5) invert(1);
    box-shadow: 2px 2px 0px rgb(0 0 0 / 50%);
}
 
.wd-editor-toolbar-panel ul {
    padding: 0;
    margin: 0 auto;
    float: left;
    list-style: none;
}
 
@media (max-width: 768px) {
    .wd-editor-toolbar-panel li.hseparator {
        width: 2px;
        height: 23px;
        margin: 5px 3px;
        background-color: #efefef;
    }
    .wd-editor-toolbar-panel ul li {
        padding: 0;
        margin: 0px;
        float: left;
    }
    .wd-editor-toolbar-panel ul {
        padding: 0;
        margin: 0 auto;
        float: left;
        list-style: none;
    }
    .wd-editor-toolbar-panel div {
        height: 30px;
    }
    .wd-editor-toolbar-panel a {
        zoom:1;
    }
    .wd-editor-toolbar-panel div {
        display: block !important;
    }
}
 
textarea {
    padding: 10px;
    font-size: 105%;
    border: solid 2px var(--accentColor);
    background-color: #232323;
    color: #f0f0f0;
    font-family: "Oxygen Mono","Consolas","Noto Sans SC",MONOSPACE;
}
 
change-textarea-size a {
    color: var(--accentColor);
    background-color: #000;
    border: solid 2px var(--accentColor);
    padding: 4px 4px;
    font-size: 1.3em;
    text-decoration: none;
    top: 0.4em;
    position: relative;
}
 
#lock-info {
    background-color: var(--darkerColor);
    border-color: #ededed;
    border: solid 2px var(--accentColor);
    display: inline-block;
    position: relative;
    right: -5em;
}
 
div#lock-info {
    font-size: 0;
    margin: 0.8rem 0;
    padding: 0.4rem 0.8rem;
    margin-left: 2rem;
    height: 4.4rem;
}
 
div#lock-info > strong {
    font-size: 0.82rem;
    color: var(--accentColor);
    font-family: "Oxygen Mono","Consolas","Noto Sans SC",MONOSPACE;
}
 
#edit-save-button {
    color: #33ff33;
    border: solid 2px #11aa11;
    transition: color 0.15s linear;
}
 
#edit-save-button:hover {
    color: #000000;
    background-color: #33ff33;
}
 
#edit-cancel-button {
    color: #ff3333;
    border: solid 2px #aa1111;
    transition: color 0.15s linear;
}
 
#edit-cancel-button:hover {
    color: #000000;
    background-color: #ff3333;
}
 
.buttons .btn {
    width: 7em;
    display: inline;
}
 
div.buttons.alignleft {
    text-align: center;
}
 
div.buttons input, input.button, button, file, a.button {
    margin: 0 2px;
    padding: 0.5em 0.5em;
    text-decoration: none;
    background-color: var(--darkGray);
    border: solid 2px #444;
    color: var(--lightGray);
    cursor: pointer;
    font-weight: 900;
    font-size: 110%;
    transition: all 0.25s;
}
 
.page-options-bottom {
    margin: 4px 0;
    text-align: right;
    height: 1%;
    line-height: 230%;
}
 
.yui-ac-content {
    border: solid 2px var(--accentColor);
    background: #2c2c2c;
}
 
.autocomplete-list li {
    padding: 0 0.5em;
    cursor: pointer;
}
 
.autocomplete-list li.yui-ac-highlight {
    background-color: #4a4a4a;
}
 
@media (max-width: 768px) {
    .wd-editor-toolbar-panel div {
        height: 40px;
        display:block;
    }
 
}
 
/* Page Options */
 
.page-options-bottom a {
    font-size: 95%;
    border: solid 2px #ddd;
    padding: 4px 6px;
    margin-top: 0.7em;
    width: 100%;
    word-break: keep-all;
    text-align: center;
    border-radius: 1em;
    background-color: var(--lightGray);
    color: #666;
}
 
.page-options-bottom a:hover {
    border: solid 2px var(--accentColor);
    background-color: #333;
    color: #e2e2e2;
}
 
.page-options-bottom a:active {
    border: solid 2px var(--accentColor);
    background-color: var(--accentColor);
    color: #000;
}
 
@media(min-width:767px) {
 
    .page-options-bottom {
        line-height: 200%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }
    .page-options-bottom a {
        padding: 2px 2px;
    }
 
    #action-area {
    width: calc(100% + 19em);
    background: #000;
    border: solid 3px var(--accentColor);
    padding: 1em;
    margin: 0 auto;
    color: var(--lightGray);
    left: -19em;
    position: relative;
}
 
textarea#edit-page-textarea::-webkit-scrollbar-thumb {
    background: var(--accentColor);
}
 
textarea#edit-page-textarea::-webkit-scrollbar-track {
    background: #333;
    border-left: solid 2px var(--accentColor);
}
 
/* Other Page Content */
 
::-webkit-scrollbar-track {
    background: var(--lightGray);
    border: none;
}
 
::-webkit-scrollbar-thumb {
    background: var(--accentLight);
}
 
::-webkit-scrollbar-thumb:hover {
    background: var(--accentColor);
}
 
}
 
#main-content .page-tags a::before {
    content: '◎';
}
 
#main-content .page-tags a:hover {
    background: #444444;
    color: #fff;
    border: solid 2px var(--accentColor);
    font-weight: bolder;
    box-shadow: 0px 0px 10px var(--accentColor);
}
 
/* Other wtf */
 
#footer {
    clear: both;
    font-size: 77%;
    background: var(--lightColor);
    color: #fff;
    margin-top: 15px;
    padding: 3px 10px;
}
 
.footnotes-footer {
    margin: 0;
    padding: 0.5em 1em;
    height: 1%;
    background: #fff;
    box-shadow: -4px 0px 0px var(--accentDark),0px 0px 0px 1px #ddd, 0px 0px 12px #00000029;
}
 
.hl-code {color: #c1c1c1;}
.hl-var {color: #6dff6d;}
.hl-identifier {color: #ffffff;}
.hl-identifier {color: #ffffff;}
.hl-reserved {color: #9898ff;}
.hl-number {color: #de80ff;font-style:italic;}
.hl-string {color: #fffb3e;}
.hl-brackets {color: #969696;}
.hl-special {color: #5b5bff;font-weight: bold;}