使用方法
注意:這是根據Black Highlighter(黑色標記筆)主題進而改版製作的。您還需要導入Black Highlighter才能使用此主題 更多詳情請見此。
在任何維基上添加下面兩行代碼到您的頁面最上方即可使用:
在任何維基上添加下面兩行代碼到您的頁面最上方即可使用:
[[include :scp-wiki:component:black-highlighter-theme-dev]]
[[include :scp-zh-tr:component:expose-theme]]
如果您不想在標題上使用警車燈,請在文章內的任何位置添加以下代碼:
[[module css]]
div#extra-div-1,div#extra-div-2{display:none;}
[[/module]]
效果展示
可以使用5個連字符“-----” 建立一條分線,如果它沒有放在任何內容(例如引用框)內,則可以在整個頁面中延伸。
標題可以通過在每行的開頭放上一至六個“+”號來建立
這是一個分頁籤效果展示
嘿看,這裡有更多文字。
多麼精巧。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個很長的分頁籤。 它包含很多文字。
這是一個引用框,你能在每行字的最前面加上 "> " 來使用它。
更多文字
這是一個分隔線
引用框的疊加
多疊一個1
- 曝光主題的引用框還有顏色的代碼能更改
[[div class="gray1"]]
> 引用框淺灰色樣式
[[/div]]
[[div class="gray2"]]
> 引用框深灰色樣式
[[/div]]
這是一個 | 表格 |
---|---|
你應該老早 | 就知道怎麼 |
做這個了吧 |
@supports(--css: variables) { :root { /* Header */ --logo-image: url("https://i.imgur.com/0SjByjV.png"); --header-title: "SCP基金會"; --header-subtitle: "安全續行於陽光之下"; /* Standard Colors */ --pale-accent: 255, 7, 7; --bright-accent: 214, 0, 0; --medium-accent: 119, 119, 119; --dark-accent: 42, 42, 42; /* Header Colors */ --header-gradient-color-bottom: 66, 66, 66; --header-gradient-color-middle: var(--black-monochrome); --header-gradient-color-top: var(--black-monochrome); /* Primary Menu Colors */ --swatch-menubg-hover-color: var(--pale-accent); /* Primary Header Colors */ --swatch-headerh2-color: var(--pale-accent); --swatch-topmenu-border-color: var(--gray-monochrome); --swatch-topmenu-bg-color: var(--very-light-gray-monochrome); /* Link Colors */ --link-color: var(--swatch-primary); --visited-link-color: var(--swatch-primary); --hover-link-color: var(--pale-accent); /* Ayer's Info Bar */ --barColour: rgb(var(--link-color)); } /* Anchor Links */ a { color: rgb(214, 0, 0); color: rgb(var(--link-color)); } a:visited { color: rgb(214, 0, 0); color: rgb(var(--visited-link-color)); } a.newpage { color: rgb(221, 102, 17); color: rgb(var(--newpage-color)); } a:hover { color: rgb(255, 7, 7); color: rgb(var(--hover-link-color)); } /* Article Bottom Buttons */ div#page-options-bottom > a, div#page-options-bottom-2 > a { background-color: rgba(119, 119, 119, 1); background-color: rgba(var(--swatch-primary-darker), 1); border-color: rgba(66, 66, 72, 1); border-color: rgba(var(--swatch-menubg-medium-dark-color), 1); } div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active { background-color: rgba(214, 0, 0, 1); background-color: rgba(var(--swatch-primary), 1); border-color: rgba(66, 66, 72, 1); border-color: rgba(var(--swatch-menubg-medium-dark-color), 1); } /* Header */ #header { background-position: left 0.75rem top 1.1875rem; background-size: auto -webkit-calc(var(--header-height-on-desktop) - 2.125rem); background-size: auto -moz-calc(var(--header-height-on-desktop) - 2.125rem); background-size: auto calc(var(--header-height-on-desktop) - 2.125rem); } #header h1 a, #header h2 span { margin-left: 11rem; } #search-top-box-form input[type="submit"], #search-top-box-form input[type="submit"]:hover, #search-top-box-form input[type="submit"]:focus { background: rgb(214, 0, 0); background: rgb(var(--swatch-primary)); } /* Top-Bar */ #top-bar div.top-bar > ul > li:hover, #top-bar div.mobile-top-bar > ul > li:hover, #top-bar div.top-bar > ul > li.sfhover, #top-bar div.mobile-top-bar > ul > li.sfhover, #top-bar div.top-bar > ul > li:focus-within, #top-bar div.mobile-top-bar > ul > li:focus-within { background-color: rgb(252, 252, 252); background-color: rgb(var(--swatch-menubg-color)); } #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a { color: rgb(12, 12, 12); color: rgb(var(--swatch-menutxt-dark-color)); } #top-bar div.top-bar > ul > li > a::before, #top-bar div.top-bar > ul > li > a::after, #top-bar div.mobile-top-bar > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > a::after { width: 100%; height: 0; background-color: rgba(214, 0, 0, 0.75); background-color: rgba(var(--swatch-primary), 0.75); -webkit-transition-property: height; -moz-transition-property: height; -o-transition-property: height; transition-property: height; } #top-bar div.top-bar > ul > li:hover > a::before, #top-bar div.top-bar > ul > li:hover > a::after, #top-bar div.top-bar > ul > li.sfhover > a::before, #top-bar div.top-bar > ul > li.sfhover > a::after, #top-bar div.top-bar > ul > li:focus-within > a::before, #top-bar div.top-bar > ul > li:focus-within > a::after, #top-bar div.mobile-top-bar > ul > li:hover > a::before, #top-bar div.mobile-top-bar > ul > li:hover > a::after, #top-bar div.mobile-top-bar > ul > li.sfhover > a::before, #top-bar div.mobile-top-bar > ul > li.sfhover > a::after, #top-bar div.mobile-top-bar > ul > li:focus-within > a::before, #top-bar div.mobile-top-bar > ul > li:focus-within > a::after { height: -webkit-calc(0.0625rem * 4); height: -moz-calc(0.0625rem * 4); height: calc(0.0625rem * 4); } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background-color: rgba(252, 252, 252, 0.93); background-color: rgba(var(--swatch-menubg-color), 0.93); } #top-bar div.top-bar > ul > li > ul > li:hover, #top-bar div.mobile-top-bar > ul > li > ul > li:hover, #top-bar div.top-bar > ul > li > ul > li > ul > li:hover, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover { background-color: transparent; background-color: rgba(var(--pale-accent), 0.05); } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before { background-color: rgba(255, 7, 7, 0.7); background-color: rgba(var(--pale-accent), 0.7); } /* Side-Bar */ #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background-color: rgba(255, 7, 7, 0.7); background-color: rgba(var(--pale-accent), 0.7); } /* Blockquote */ .gray1 blockquote, .gray2 blockquote { margin: 1em 0; border: 0.1875rem solid rgb(var(--bright-accent)); border-radius: 0.625rem; } .gray1 blockquote { background-color: rgb(244, 244, 244); } .gray2 blockquote { background-color: rgb(232, 232, 232); } /* Flashing Lights */ div#extra-div-1, div#extra-div-2 { position: absolute; top: 2.5rem; width: 6rem; height: 1rem; border-radius: 0.0625rem; } div#extra-div-1 { --light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset; --light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset; left: 55%; background-color: rgba(255, 0, 0, 0.75); -webkit-animation: flash-1 1s infinite; -moz-animation: flash-1 1s infinite; -o-animation: flash-1 1s infinite; animation: flash-1 1s infinite; } @keyframes flash-1 { 0% { opacity: 0.2; box-shadow: var(--light-off); } 12.5% { opacity: 1; box-shadow: var(--light-on); } 25% { opacity: 0.2; box-shadow: var(--light-off); } 37.5% { opacity: 1; box-shadow: var(--light-on); } 50% { opacity: 0.2; box-shadow: var(--light-off); } 100% { opacity: 0.2; box-shadow: var(--light-off); } } div#extra-div-2 { --light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset; --light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset; left: -webkit-calc(55% + 6.25rem); left: -moz-calc(55% + 6.25rem); left: calc(55% + 6.25rem); background-color: rgba(0, 0, 255, 0.75); -webkit-animation: flash-2 1s infinite; -moz-animation: flash-2 1s infinite; -o-animation: flash-2 1s infinite; animation: flash-2 1s infinite; } @keyframes flash-2 { 0% { opacity: 0.2; box-shadow: var(--light-off); } 50% { opacity: 0.2; box-shadow: var(--light-off); } 62.5% { opacity: 1; box-shadow: var(--light-on); } 75% { opacity: 0.2; box-shadow: var(--light-off); } 87.5% { opacity: 1; box-shadow: var(--light-on); } 100% { opacity: 0.2; box-shadow: var(--light-off); } } /* Mobile */ @media only screen and (max-width: 768px) { #top-bar div.top-bar > ul > li > ul > li:hover, #top-bar div.mobile-top-bar > ul > li > ul > li:hover, #top-bar div.top-bar > ul > li > ul > li > ul > li:hover, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover { background-color: rgba(255, 7, 7, 0.7); background-color: rgba(var(--pale-accent), 0.7); } /* Mobile Search */ #search-top-box form[id="search-top-box-form"] input[type="submit"] { background-color: rgb(214, 0, 0); background-color: rgb(var(--swatch-primary)); } /* Flashing Lights */ div#extra-div-1 { max-width: -webkit-calc(100vw - 55%); max-width: -moz-calc(100vw - 55%); max-width: calc(100vw - 55%); } div#extra-div-2 { max-width: -webkit-calc(100vw - 55% - 6.25rem); max-width: -moz-calc(100vw - 55% - 6.25rem); max-width: calc(100vw - 55% - 6.25rem); } } @media only screen and (max-width: 400px) { #header h1 a, #header h2 span { margin-left: 10rem; } } }