HANSARP 版式
Woedenaz 给我下挑战令,让我给他的 HANSARP 版式做点有用的东西。我接下了。
可能是绿色?--medium-accent(60, 84, 111)
不是红色--bright-accent(222, 71, 30)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Manicla--pale-gray-monochrome(226, 191, 130)
Lalalight--white-monochrome(242, 230, 212)
Barely Blue--dark-gray-monochrome(48,48,52)
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

Woedenaz 所作的 HANSARP 标志
用法
注意:这是一个基于黑色标记笔的主题版式。若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
在任意维基上:
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:hansarp]]
示例
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
页眉与标题字体为 Permanent Marker / Ma Shan Zheng。
正文字体为 Mali / 幼圆。
等宽字体为 Azeret Mono / Noto Sans SC。
用户界面字体为 Klee One / Noto Serif SC。
源代码:
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); :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 "black-highlighter" or "sigma9" */ --theme-id: "hansarp"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "HANSARP Theme"; /* set this to your theme's full name */ /* Typefaces */ --header-font: 'Permanent Marker', cursive; --title-font: 'Permanent Marker', cursive; --body-font: 'Mali', cursive; --mono-font: 'Azeret Mono', monospace; --UI-font: 'Klee One', cursive; /* Header */ --logo-image: none; --diagonal-stripes: initial; --header-height-on-desktop: 10.5rem; --header-height-on-mobile: 10.5rem; --background-gradient-distance: 0rem; /* Standard Colors */ --white-monochrome: 242, 230, 212; --pale-gray-monochrome: 226, 191, 130; --bright-accent: 222, 71, 30; --medium-accent: 60, 84, 111; --dark-accent: 38, 44, 51; --pale-accent: var(--bright-accent); --topbar-height-on-desktop: 2.5rem; --swatch-topmenu-bg-color: var(--dark-accent); --swatch-topmenu-border-color: var(--bright-accent); --hoverblock-header-bg: var(--swatch-primary-darkest); } :root:lang(cn) { --header-font: 'Permanent Marker', 'Ma Shan Zheng', cursive; --title-font: 'Permanent Marker', 'Ma Shan Zheng', cursive; --body-font: 'Mali', '幼圆', cursive; --mono-font: 'Azeret Mono', 'Noto Sans SC', monospace; --UI-font: 'Klee One', 'Noto Serif SC', cursive; } #main-content { --blockquote-bg-color: var(--dark-accent); --tables-border: var(--bright-accent); } /*-----------------------------------*/ /*-----------------------------------*/ body { background: radial-gradient(rgba(var(--swatch-secondary-color), 1) 1.5px, transparent 1.5px), radial-gradient(rgba(var(--swatch-secondary-color), 1) 1.5px, rgba(var(--white-monochrome),1) 1.5px); background-size: 60px 60px; background-position: 0 0, 30px 30px; } #header { --header-h1-font-size: calc(var(--base-font-size)*3.25); --header-title: "什么是 HANSARP?"; --header-title-mobile: "HANSARP?"; --swatch-headerh1-color: var(--bright-accent); } @media only screen and (max-width: 34.25rem) { #header { --header-title: var(--header-title-mobile); } } #header h1 { transform: rotate(-10deg); } #header h1 a { margin-left: calc(var(--header-height-on-desktop)/1.25 - 1.5rem); padding-top: 2.5rem; } #header h1 a::before { filter: drop-shadow(-3.95em -1.15em 0 rgb(var(--dark-accent))); } #header h2 { display: none; } #extrac-div-1 { width: 100%; height: calc(var(--final-header-height-on-desktop)*1.025); display: block; position: absolute; top: 0; left: 0; overflow: hidden; z-index: -1; } #extrac-div-1::before, #extrac-div-1::after { content: " "; display: block; position: absolute; height: calc(var(--final-header-height-on-desktop)*0.975); width: calc(var(--final-header-height-on-desktop)*0.975); box-sizing: border-box; border-radius: 50%; } #extrac-div-1::before { top: -2rem; left: -5rem; border: solid 3.5rem rgb(var(--bright-accent)); box-shadow: 4rem 1rem 0 rgb(var(--medium-accent)); } #extrac-div-1::after { content: " "; display: block; position: absolute; height: calc(var(--final-header-height-on-desktop)*0.975); width: calc(var(--final-header-height-on-desktop)*0.975); border-radius: 76% 64% 66% 80%; background-color: rgb(var(--medium-accent)); right: calc(36vw - 15rem); top: calc(var(--final-header-height-on-desktop)/-3); transform: skew(0deg, 10deg) rotate(52deg) scale(1.6, 1.75); box-shadow: -7rem 3rem 0 rgb(var(--dark-accent)); z-index: -2; } #extrac-div-1 span { display: block; position: absolute; height: calc(var(--final-header-height-on-desktop)*0.75); width: calc(var(--final-header-height-on-desktop)*0.75); background-image: url(https://scptestwiki.wdfiles.com/local--files/sigma:hansarp-theme/hansarplogo.png); background-size: contain; background-repeat: no-repeat; left: calc(60% + 4rem); bottom: 1.5rem; transform: rotate(30deg); } /*-----------------------------------*/ #page-content > *:nth-child(3n-2):not(.image-block, .scp-image-block, .page-rate-widget-box) { transform: rotate(0.68deg); } #page-content > *:nth-child(3n):not(.image-block, .scp-image-block, .page-rate-widget-box) { transform: rotate(-0.68deg); } /*-----------------------------------*/ /*-----Top Menu-----*/ /*-----------------------------------*/ #top-bar .top-bar { position: relative; background: linear-gradient(90deg, rgb(var(--bright-accent)) 10%, rgb(var(--swatch-topmenu-bg-color)) 30%, rgb(var(--swatch-topmenu-bg-color)) 70%, rgb(var(--medium-accent)) 90%); } #header #top-bar .top-bar ul>li>ul { background: transparent; box-shadow: none; backdrop-filter: none; filter: drop-shadow(0.3rem 0.35rem 0 rgb(var(--bright-accent))); } #header #top-bar .top-bar ul>li>ul>li::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: rgb(var(--medium-accent)); } #header #top-bar .top-bar ul>li>ul>li:nth-child(2n)::before { background-color: rgb(var(--dark-accent)); } #top-bar .top-bar>ul>li ul>li:nth-child(2n) { transform: perspective(1rem) rotateY(1.5deg) scale(1.02); } #top-bar .top-bar>ul>li ul>li:nth-child(2n-1) { transform: perspective(1rem) rotateY(-1.5deg) scale(1.02); } #extrac-div-2 { width: 100%; height: calc(var(--final-header-height-on-desktop)*1.5); display: block; position: absolute; top: 0; left: 0; overflow: hidden; z-index: -1; pointer-events: none; } #extrac-div-2::before, #extrac-div-2::after { content: ""; display: block; position: absolute; width: 80%; height: 5.5rem; } #extrac-div-2::before { left: 0; bottom: calc(var(--final-header-height-on-desktop)*0.5); background-color: rgb(var(--bright-accent)); clip-path: polygon(0 0, 100% 100%, 0 100%); } #extrac-div-2::after { right: 0; top: var(--header-height-on-desktop); background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgb(var(--medium-accent)) 30%); clip-path: polygon(0 0, 100% 0, 100% 100%); } /*-----------------------------------*/ /*-----Side Bar-----*/ /*-----------------------------------*/ #side-bar { --sidebar-bg-color: var(--swatch-secondary-color); --swatch-menubg-color: var(--sidebar-bg-color); } #side-bar > .scpnet-interwiki-wrapper { --swatch-primary: var(--sidebar-bg-color); } #interwiki .side-block, #side-bar .side-block { box-shadow: 0.25rem 0.25rem 0 rgb(var(--dark-gray-monochrome)), 0.5rem 0.5rem 0 rgb(var(--bright-accent)); } #interwiki .side-block > *:nth-child(2n), #side-bar .side-block > *:nth-child(2n) { --sidebar-links-hover-bg-color: var(--medium-accent); } #interwiki .heading, #side-bar .heading { box-shadow: none; position: relative; } #interwiki .heading p, #side-bar .heading p { color: rgb(var(--white-monochrome)); display: inline-block; position: relative; padding: 0.45em 1em; text-indent: 0; margin: 0 1.5em 0 auto; transform: perspective(7em) rotateY(19deg) scale(1.05); } #interwiki .heading p:first-letter, #side-bar .heading p:first-letter { background-color: rgb(var(--white-monochrome)); color: rgb(var(--dark-accent)); padding: 0 0.25em; margin-right: 0.2em; } #interwiki .heading p::after, #side-bar .heading p::after { content: " "; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-color: rgb(var(--dark-accent)); z-index: -1; transform: skewX(-30deg) translateY(0.1em); box-shadow: 1.5em 0.25em 0 rgb(var( --swatch-primary)); } /*-----------------------------------*/ /*-----------------------------------*/ /*-----Links-----*/ #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a) { color: rgb(var(--link-color)); display: inline-block; position: relative; text-decoration: underline; padding: 0.05em 0.25em; margin: 0.1em 0 0.1em -0.25em; --hover-link-color: var(--white-monochrome); --link-color: var(--bright-accent); transition: transform 0.125s ease; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::before { content: " "; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-color: transparent; transform: none; transform-style: flat; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 73.5%); transition: transform 0.125s ease-out, background-color 0.01s ease; z-index: -2; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::after { content: " "; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-color: transparent; transition: background-color 0.075s linear; z-index: -1; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus) { text-decoration: none; color: rgb(var(--hover-link-color)); margin-right: -0.465em; transform: scale(1.05) rotate(3deg); z-index: 2; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus)::before { background-color: rgb(var(--bright-accent)); transform: skew(-20deg) scale(1.06, 1.4) rotate(-4deg) translate(0.25em, calc(0.12em + 9%)); } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus)::after { background-color: rgb(var(--dark-accent)); } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus):first-letter { background-color: rgb(var(--white-monochrome)); color: rgb(var(--dark-accent)); padding: 0 0.15em; margin-right: 0.1em; font-weight: bold; text-transform: capitalize; } /*Firefox Styling*/ @supports (-moz-appearance:none) { #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus) { margin-right: -0.65em; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::before { display: none; } #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover,:focus)::after { transition: background-color 0.075s linear, box-shadow 0.08s ease-out 0.03s, transform 0.05s; box-shadow: 0.35em 0.25em 0 rgb(var(--bright-accent)); transform: translatex(-3%) scaleY(1.1) skew(-15deg); } } /*-----Blockquote-----*/ #main-content blockquote, #main-content div.blockquote { color: rgb(var(--white-monochrome)); background-color: transparent; box-shadow: none; margin-left: 3.5rem; margin-bottom: calc(8% + 2.5rem); margin-top: 1rem; padding: 1.85rem 1.75rem 1.45rem 1.35rem; position: relative; filter: brightness(1.14) hue-rotate(2deg) drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary))); } #page-content > blockquote, #page-content > div.blockquote { filter: drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary))); } :is(blockquote, div.blockquote)::before, :is(blockquote, div.blockquote)::after { content: ""; display: block; position: absolute; background-color: rgb(var(--blockquote-bg-color)); z-index: -1; } :is(blockquote, div.blockquote)::before { top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 1rem, 100% 0, calc(100% - 1rem) 100%, 0.5rem calc(100% - 0.5rem)); } :is(blockquote, div.blockquote)::after { top: calc(97.5% - 0.75rem); right: calc(90% - 2rem); width: calc(15% + 5rem); height: calc(10% + 3rem); clip-path: polygon(0 55%, 40% 40%, 37% 0, 100% 30%, 93% 83%, 60% 64%, 56% 84%); transform: rotate(-25deg); } @media only screen and (max-width: 42.5rem) { :is(blockquote, div.blockquote)::after { display: none; } #main-content blockquote, #main-content div.blockquote { margin: 1rem auto; padding: 1.75rem 1.75rem 1.15rem 1.5rem; } } /*-----Page Title, h1-6-----*/ #page-title, .meta-title { text-align: center; position: relative; display: flow-root; font-size: 2.5em; margin: 0.25em 0.5rem; } #main-content :is(h1, h2, h3, h4, h5, h6) { position: relative; display: flow-root; margin: 0.35em 0.5rem; } #page-title:first-letter, .meta-title:first-letter, #main-content :is(h1, h2, h3, h4, h5, h6):first-letter { font-size: 135%; color: rgb(var(--swatch-primary)); } #page-title::after, .meta-title::after, #main-content :is(h1, h2, h3, h4, h5, h6)::after { content: ""; position: absolute; bottom: -0.05em; left: 0; width: 100%; height: 0.65em; margin: 0; z-index: -1; background-color: rgba(var(--pale-gray-monochrome),0.65); transform: skewX(25deg); } /*-----Rate Module-----*/ .page-rate-widget-box:not(.rateBox .page-rate-widget-box), #page-content .rate-box-with-credit-button { transform: skew(-15deg) scale(1.03); box-shadow: 0.35rem 0.15rem 0 0.05rem rgb(var(--rating-module-bottom-border-color)), -0.75rem 0.45rem 0 0.1rem rgb(var(--medium-accent)); } .page-rate-widget-box:not(.rateBox .page-rate-widget-box) > *, #page-content .rate-box-with-credit-button > * { transform: skew(15deg); } /*-----Horizontal Rule-----*/ hr { position: relative; background-color: transparent; border: none; height: 0.75rem; --hrmask: linear-gradient(#000 0 0) center/calc(100% - 1.5rem) calc(100% - 1.5rem) no-repeat, conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 0 0/1.5rem 0.75rem space no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/1.5rem 0.75rem space no-repeat, conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) 0 0/0.75rem 1.5rem no-repeat space, conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/0.75rem 1.5rem no-repeat space; } hr::before, hr::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--dark-accent)); -webkit-mask: var(--hrmask); mask: var(--hrmask); } hr::before { top: 0.4rem; left: 0.4rem; background-color: rgb(var(--swatch-primary)); } /*-----Image Block-----*/ #page-content :is(.image-block, .scp-image-block) { box-shadow: 0.75rem 0.75rem 0 rgb(var(--swatch-primary)), 1.5rem 1.5rem 0 rgb(var(--dark-accent)); padding: 0.8rem; box-sizing: border-box; background: linear-gradient(180deg, rgb(var(--medium-accent)), rgb(var(--dark-accent))); margin-bottom: 2rem; } :is(.image-block, .scp-image-block):not(.block-center) { transform: perspective(4rem) rotateY(-1.5deg) translateZ(-5px) scale(1.06); } #page-content :is(.image-block, .scp-image-block).block-left { box-shadow: -0.75rem 0.75rem 0 rgb(var(--swatch-primary)), -1.5rem 1.5rem 0 rgb(var(--dark-accent)); transform: perspective(4rem) rotateY(1.5deg) translateZ(-5px) scale(1.06); } #page-content :is(.image-block, .scp-image-block):not(.block-center) { margin-top: calc(5% + 0.65rem); margin-bottom: calc(5% + 0.65rem); } :is(.image-block, .scp-image-block):not(.block-center) img.image { transform: perspective(4rem) rotateY(1.5deg) translateZ(-5px) scale(1.06); } :is(.image-block, .scp-image-block).block-left img.image { transform: perspective(4rem) rotateY(-1.5deg) translateZ(-5px) scale(1.06); } :is(.image-block, .scp-image-block) .scp-image-caption { font-size: 1em; margin-top: 0.425rem; box-shadow: none; } :is(.image-block, .scp-image-block):not(.block-center) .scp-image-caption { transform: perspective(6rem) rotateY(4.5deg) rotateZ(-2.5deg) rotateX(-1deg) skew(-2deg, -0.35deg); } :is(.image-block, .scp-image-block).block-left .scp-image-caption { transform: perspective(6rem) rotateY(-4.5deg) rotateZ(2.5deg) rotateX(-1deg) skew(2deg, 0.35deg); } /*-----Tabs-----*/ .yui-navset.yui-navset-top { display: grid; grid-template: "content tabs"; grid-template-columns: 1fr 9rem; } .yui-navset.yui-navset-top > .yui-nav { grid-area: tabs; display: flex; clip-path: none; align-items: stretch; align-self: flex-start; flex-direction: column; position: sticky; top: var(--topbar-height-on-mobile); } .yui-navset.yui-navset-top > .yui-nav > li { flex-grow: 0; } .yui-navset .yui-nav .selected { transform: perspective(6em) rotateY(-15deg) translateZ(1.5em) scale(0.835) translateX(-0.7em); } .yui-navset .yui-nav .selected a em, .yui-navset .yui-nav a em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yui-navset.yui-navset-top > .yui-content { grid-area: content; border: none; border-right: solid 0.35rem rgb(var(--swatch-primary)); } /*-----Hovertip-----*/ .hovertip[style*="display: block"] { filter: drop-shadow(-0.45em -0.45em 0 rgb(var(--swatch-primary))); } .hovertip:before { box-shadow: none!important; } .hovertip .content { box-shadow: -0.5em -0.5em 0 rgb(var(--swatch-primary-darkest)); } .hovertip .f-heading { transform: perspective(5em) rotateY(12deg) rotateZ(0.25deg) scale(1.15) translateY(0.2em); } /*-----------------------------------*/ /*-----Edit Area-----*/ /*-----------------------------------*/ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn { transition: border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1), font-weight .2s cubic-bezier(.4,0,.2,1), font-variation-settings .2s cubic-bezier(.4,0,.2,1), transform 0.15s; } div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:is(:hover, :active) { transform: scale(0.9) skew(-5deg); box-shadow: 0 0 0 .125rem rgb(var(--ui-button-hover-outline)), inset var(--icon-size) 0 0 0 rgb(var(--ui-icon-hover-bg)), 0.45rem .35rem 0 .1rem rgb(var(--ui-icon-bg)); } .page-source { background-color: rgba(var(--tabs-content-bg-color)); }