Bảng Màu Theme
Hướng dẫn
Lưu ý: Đây là theme dựa trên Black Highlighter. Bạn sẽ cần import cả theme Black Highlighter để sử dụng theme này. Để tìm hiểu thêm bấm vào đây.
Để sử dụng theme này, thêm đoạn sau vào bài viết:
[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:ch-scp-theme]]
Nếu đang dùng Tiêu Đề Giữa hãy sử dụng theo cách này:
[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:ch-scp-theme]]
[[include :scp-vn:component:centered-header-bhl |ch-scp=--]]]
Ví dụ
Một dòng kẻ ngang có thể được tạo với 5 dấu gạch ngang "-----" và giãn ra cả trang nếu nó không được đặt trong bất kì thứ gì (ví dụ một blockquote). Các đường chia phần của tài liệu là các dòng kẻ ngang.
Đề mục có thể được tạo bằng cách đặt giữa một và sáu dấu cộng "+" ở đầu dòng
Đây là tab.
Nhìn này, có thêm chữ.
Thật kỳ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là tab dài. Nó có rất nhiều chữ.
Đây là blockquote, tạo bằng cách đưa "> " vào đầu mỗi dòng.
Thêm chữ
Đó là một dòng kẻ ngang
Blockquote trong blockquote
Đây là cái | bảng |
---|---|
Bạn cần biết | cách làm bảng |
rồi chứ |
/* Fonts */ @import url("https://use.typekit.net/rbw6esf.css"); /* All Vars Used */ @supports(display:grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighter"; /* must be either "nuscp" or "sigma9" */ --theme-id: "chscp-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Theme BHL Trung Quốc"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchlogonotagline.png"); --header-title: "Tổ Chức"; --header-subtitle: " "; /* Typefaces */ --header-font: great-primer-sc, 'Poppins', sans-serif; --title-font: great-primer-sc, 'Poppins', sans-serif; --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 234, 224, 224; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 160, 150, 150; /* light accent gray for login status */ --gray-monochrome: 72, 66, 66; /* gray */ --dark-gray-monochrome: 0, 0, 0; /* dark accent gray for sidebar background */ --black-monochrome: 0, 0, 0; /* black */ --bright-accent: 195, 7, 7; /* bright red */ --medium-accent: 171, 0, 5; /* medium red */ --dark-accent: 80, 0, 2; /* dark red */ --newpage-color: 210, 74, 32; /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); /* Primary Text Colors */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--white-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--black-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--black-monochrome); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--black-monochrome); --swatch-topmenu-bg-color: var(--gray-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /* Header Gradients */ --gradient-header: linear-gradient(to top, rgba(var(--bright-accent), 0.97) 0%, rgb(var(--medium-accent)) 70%, rgb(var(--medium-accent)) 100%); --gradient-topmenu: linear-gradient(to bottom, white 0%, white var(--header-height-on-desktop), rgba(var(--swatch-topmenu-border-color), 0.05) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 0.05) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(208, 208, 208, 1) 0, rgba(217, 217, 217, 1) 0.125rem, rgba(217, 217, 217, 1) calc(3rem - 0.125rem), rgba(217, 217, 217, 1) calc(3rem - 0.125rem), rgba(208, 208, 208, 1) 3rem); --diagonal-stripes: initial; --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--dark-accent), 0.85) 0%, rgba(var(--bright-accent), 0.95) 100%); --gradient-background: linear-gradient(to bottom, rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance))); --header-background-image-size: 100% var(--header-height-on-desktop); /* Spacing Measurements */ --offset-from-page-top: 0.75rem; /* space between the top of the page and the start of the header */ --body-width-on-desktop: 44.25rem; --sidebar-width-on-desktop: calc(var(--base-font-size)*16); --sidebar-width-on-mobile: 14rem; --scrollbar-width: 0.5625rem; --border-styling: solid 0.0625rem rgb(var(--swatch-border-color)); --border-radius-width: 0.0625rem; /* Box-Shadow 1px Borders */ --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color)); --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color)); --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color)); --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color)); --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color)); /* Sidebar */ --sidebar-transition-timing: 0.5s ease-in-out 0.1s; --sidebar-internal-border-thickness: 0.125rem; --background-gradient-color: 215, 215, 215; --background-gradient-distance: 40rem; } a, a:active, a:visited { color: rgb(var(--swatch-primary-darker)); } #header { background-position: left .75rem top .65rem; background-size: auto 6.375rem; -webkit-filter: unset; filter: unset; } #header h1 a { margin-left: 7.75rem; } #header h1 a::before { text-shadow: unset; } #header h2 { background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchtag.png'); background-repeat: no-repeat; background-clip: border-box; background-size: contain; top: 4.5rem; left: 8rem; height: 2rem; } #top-bar { margin: var(--header-height-on-desktop) 0 1.75rem 0; height: 1.875rem; font-size: calc(var(--base-font-size) * .75); } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { color: rgb(var(--swatch-menutxt-dark-color)) !important; font-family: var(--header-font); text-transform: uppercase; } #top-bar div.top-bar>ul>li:hover>a, #top-bar div.top-bar>ul>li:focus-within>a, #top-bar div.mobile-top-bar>ul>li:hover>a, #top-bar div.mobile-top-bar>ul>li:focus-within>a { color: rgb(var(--swatch-menutxt-light-color)) !important; } #top-bar div.top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:focus-within, #top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.mobile-top-bar>ul>li:focus-within { background-color: rgba(var(--swatch-primary-darker), 0.93); background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: auto 5.625rem; } #top-bar div.top-bar>ul>li>ul, #top-bar div.mobile-top-bar>ul>li>ul { margin-top: 1.875rem; background: rgba(var(--swatch-primary-darker), 0.93); background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: auto 5.625rem; } #top-bar div.top-bar>ul>li>a::before { height: calc(0.0625rem * 3); } #top-bar div.top-bar>ul>li>a::after { height: calc(0.0625rem * 2); } #top-bar div.top-bar>ul>li>a::before, #top-bar div.top-bar>ul>li>a::after { background-color: rgba(var(--swatch-border-color), 1); } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { font-weight: 600; font-size: calc(var(--base-font-size) * 0.9); } #skrollr-body::before { background-image: linear-gradient(to bottom, rgba(var(--bright-accent), 0.5) 0, rgba(var(--bright-accent), 0.25) 10rem, rgba(var(--white-monochrome), 1) 22rem, rgba(var(--white-monochrome), 1) 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center top var(--final-header-height-on-desktop); content: " "; width: 100%; height: 100%; position: absolute; pointer-events: none; z-index: -2; } #container-wrap-wrap::before { content: " "; width: 100%; height: 25%; position: absolute; top: var(--final-header-height-on-desktop); background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: 5.625rem; background-repeat: repeat; background-position: 0 0; pointer-events: none; z-index: -1; } div#container-wrap { background-image: unset; } div#container-wrap::before { background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-size: auto; background-repeat: repeat; background-position: 0 0; background-blend-mode: soft-light; content: " "; height: var(--final-header-height-on-desktop); width: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } #side-bar { overflow-y: auto; overflow-x: hidden; } #side-bar .close-menu::before { font-family: var(--title-font) !important; } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { letter-spacing: .15em; } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { font-family: var(--header-font); text-shadow: unset; } .code { font-size: calc(var(--base-font-size) * 0.8); } textarea, input { font-family: var(--body-font); } #search-top-box-form input[type="submit"] { font-size: calc(var(--base-font-size) * 0.9); } #page-title, .meta-title, .meta-title span { font-family: var(--header-font); color: rgb(255, 237, 6); } /* Sky Sermon Nav CSS */ .skysermon-nav { --text-shadow: rgba(var(--black-monochrome), 0.35); --box-shadow: rgb(var(--gray-monochrome)); --border-color: rgb(var(--newpage-color)); color: rgb(var(--white-monochrome)); text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); border-radius: 0.0625rem; border: double 0.188rem var(--border-color); background-color: rgb(var(--bright-accent)); box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow); padding: 0 0.125rem; margin: 0.625rem 0 0.938rem; margin-bottom: 1.250rem; } .skysermon-nav a { color: rgb(255, 237, 6); display: inline-block; position: relative; width: 100%; height: 100%; padding-top: 0.45em; padding-bottom: 0.35em; } .skysermon-nav a::before { display: flex; position: absolute; align-items: center; height: 100%; font-size: calc(var(--base-font-size) * 1.1); line-height: calc(var(--base-font-size) * 0.7); font-weight: 800; top: 0; } .skysermon-nav .footer-wikiwalk-nav { display: flex; align-items: center; justify-content: center; font-weight: 400; letter-spacing: 0.025em; font-size: 75%; } .skysermon-nav .footer-wikiwalk-nav * { line-height: 1em; } .skysermon-nav .footer-wikiwalk-nav .center { flex-basis: 8em; text-align: center; } .skysermon-nav .footer-wikiwalk-nav .left, .skysermon-nav .footer-wikiwalk-nav .right { flex-basis: calc(50% - 5em); display: inline-flex; align-items: center; font-size: calc(var(--base-font-size) * 0.8); position: relative; } .skysermon-nav .footer-wikiwalk-nav .left { text-align: right; justify-content: flex-end; border-right: 0.0625rem solid rgb(var(--black-monochrome)); padding-left: 1em; padding-right: 0.5em; margin: 0.35em 0 0.35em 0.35em; } .skysermon-nav .left>a::before { content: "«"; left: -0.75em; transition: left 1s ease-in-out; -webkit-animation: bounce-left 1.7s infinite; animation: bounce-left 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .left>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } .skysermon-nav .footer-wikiwalk-nav .right { text-align: left; justify-content: flex-start; border-left: 0.0625rem solid rgb(var(--black-monochrome)); padding-left: 0.5em; padding-right: 1em; margin: 0.35em 0.35em 0.35em 0; } .skysermon-nav .right>a::before { content: "»"; right: -0.75em; transition: left 1s ease-in-out; -webkit-animation: bounce-right 1.7s infinite; animation: bounce-right 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .right>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } /* Rating Box */ .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { font-weight: 400; } @media only screen and (max-width: 56.25rem) { #header h1 { font-size: calc(var(--base-font-size) * 1.25); } #header h1 a { margin-top: calc(0.8rem + var(--offset-from-page-top)); } #header h2 { height: 1.15rem; } #side-bar { left: calc(-17rem - var(--scrollbar-width)); } #side-bar:target { overflow-x: hidden; } #top-bar>div.mobile-top-bar>div.open-menu>p>a { color: rgb(var(--swatch-menutxt-dark-color)) !important; } #skrollr-body:target #side-bar { left: 0; } #side-bar:target .close-menu { margin-left: calc(15.5rem + 2 * var(--scrollbar-width) + 0.125rem); } #skrollr-body:target #container { transform: none; } #skrollr-body:target #container-wrap-wrap { overflow: hidden; } #top-bar div.top-bar>ul>li>ul, #top-bar div.mobile-top-bar>ul>li>ul { transform: translate(-50%, 0); display: flex; } #top-bar div.mobile-top-bar>ul>li>ul>li { max-height: calc(99vh / 15); max-width: calc(98vw + 1px); display: flex; width: calc(98vw + 1px); flex-grow: 2; flex-basis: calc(98vw / 2); } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { height: 100%; width: 100%; line-height: 1em; display: flex; align-items: center; justify-content: center; font-size: calc(var(--base-font-size) * 0.8); } #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(1)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(11)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(21)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(31)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(41)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(51)>a::before { display: flex; align-items: center; justify-content: center; } } @-webkit-keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @-webkit-keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } @keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } }