Magazine theme

Hide Memu Cursor out | Close

+ Rate 

---

• Usage

• Examples

• Image block

• Horizontal rule

• Blockquote

• Tabs

• Horiz center title

• Column

---

Goto top

Goto bottom

Usage

Update to
http://scp-wiki.wikidot.com/theme:magazine

---

This is a sigma9 theme created by Etinjat, which is inspired by MalyceGraves' newspaper theme and hoah2333. And the sidebar logo is made by Kcorena.

To use this theme, put the following syntax on any page:

[[include :scp-wiki-cn:theme:magazine
|version-en=true
]]

Custom Options：

[[include :scp-wiki-cn:theme:magazine
|collapsible-sidebar=true To use the collapsible sidebar.
|content-width= Change the width of main content.
|header-title= 'texts' Change the text of header title¹.
|header-subtitle= 'texts' Change the text of header subtitle
|mob-title= 'texts' Change the header title when in narrow screen (like phone).
|mob-subtitle= 'texts' Header subtitle when in narrow screen.
|logo-image=url('link') Logo on header.
|logo-sidebar=url('link') Logo on sidebar.
|sidebar-content='texts' Text under the sidebar logo.
|page-title= none No page-title.
]]

Add background image

[[module css]]
#container {
background: url('IMAGE LIKE') center 0 repeat;
}

#side-bar::before, #side-bar {
background-color: transparent !important;
}

[[/module]]

• PS：For many calculation programs of layout are used, so if you want to change the values of element size, please modify the variables in :root and use rem as the unit.

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Titles can be created by putting between one and six plus "+" at the start of the line.

Rating:
Something wrong in int's theme

Rating w/ Credit Module:

• 

  close

  Info

  ---

  X

  Info about your page.

  ---

  More information about your page.

  ---

bold | italic | underline | strikethrough | teletype text ^superscript_subscript

+ A collapsible

This is a	table
You should know	how to make these
already

• Unvisited Link
  • A link you probably visited
  • Empty link

Image block

Standard Image Block

• Wrap the following div codes on the outside of the standard image block to use the special styles below:

[[div class="mz-img-wrap " ]]
[[include component:image-block
name=
|width=
|caption=
|align=
]]
[[/div]]

Image
class="mz-img-wrap img-tt "²

Image
class="mz-img-wrap img-frame"

Image
class="mz-img-wrap img-b3d"

Image
class="mz-img-wrap img-border"

Image
class="mz-img-wrap img-border img-frame"

Horizontal rule

A horizontal rule can be created with 5 hyphens "-" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Customize horizontal rule

---

Wrap a div block, and add classname：

• Reduce line size：hr-contract
• Change line to solid ：hr-solid
• To dotted：hr-dotted

[[div class="mz-hr hr-contract hr-solid" ]]

------

[[/div]]

---

#

Woohoo

#

---

#

Add things on the side of the horizontal rules:

• Leave a blank line between each thing.
• Rules can be added repeatedly.
• Be careful not to add so many things to avoid a pile on the narrow screen.

[[div class="mz-hr" ]]

[[image xxxx ]]

------

{{#}} Change to a vertical line.

text

[[module Rate]]

------

[[/div]]

Blockquote

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes³

Other blockquote

[[div class="mz-blockquote"]]

mz-blockquote

[[/div]]

[[div class="mz-board" ]]

mz-board

[[/div]]

[[div class="mz-cover"]]

mz-cover

[[/div]]

[[div class="mz-paper"]]

mz-paper

[[/div]]

[[div class="mz-textquote"]]
mz-textquote
[[/div]]

[[div class="mz-outbox"]]
[[div class="mz-innerbox"]]
text
[[/div]]
[[/div]]

Comprehensive

Here Be Dragon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae suscipit ante, quis interdum arcu. Nam efficitur magna nec nulla luctus, eu faucibus magna elementum. Duis tempor odio in magna efficitur, sit amet porttitor purus dapibus. Sed interdum elit vel enim dapibus, quis gravida mi dapibus. Donec tincidunt commodo tellus vitae malesuada. Mauris a volutpat ante, quis tempus ex. Nullam nisl neque, sollicitudin sed congue at, iaculis ullamcorper libero. Praesent egestas urna ut ante accumsan, et posuere lacus bibendum. Nunc sit amet dictum nisi, ac fermentum arcu. Nam eu pretium nibh. Vestibulum efficitur, elit non lacinia semper, turpis nunc cursus orci, vel accumsan dolor felis ac risus.

Cras lacus nulla, finibus sit amet rutrum nec, tincidunt ut est. Ut interdum odio neque, eu finibus leo eleifend sed. Cras porta consequat congue. Vestibulum placerat felis vehicula, imperdiet felis sit amet, vestibulum dui. Sed venenatis, lorem et ullamcorper condimentum, tortor sem hendrerit ipsum, et aliquet nibh orci vel ligula. Fusce in luctus mauris. Aenean elit dui, lobortis vel leo at, iaculis maximus neque. Sed sit amet neque in urna elementum tempus. Nullam at velit eu magna sodales convallis. Donec placerat pulvinar ante, quis volutpat erat dapibus ut. Pellentesque in scelerisque sapien, ac vestibulum felis. Fusce euismod faucibus hendrerit.

---

_{Lorem Ipsum}

---

Praesent malesuada lacinia mattis. Vivamus a urna eu orci scelerisque tincidunt sed sed risus. Sed maximus consectetur lectus sed dapibus. Integer sit amet tempor velit. In pellentesque nulla et elit dapibus, sed facilisis nunc semper. Vivamus nisl est, ultricies sit amet placerat ac, imperdiet vitae sem. Quisque dictum quam ac odio tempor, quis scelerisque massa sodales. Praesent ligula ante, sodales ac mi nec, euismod luctus sem. Duis urna erat, bibendum sit amet scelerisque vel, faucibus vitae nunc. Sed consequat mi ex, non lacinia dui tincidunt eget. Donec blandit nec lacus ac pulvinar. Donec ut mollis sem. Proin vel arcu tincidunt, dignissim libero sed, finibus lorem. Aenean nec enim sem.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo, lacus mauris eleifend metus, vel tincidunt nisi nisi a neque. Sed feugiat ante sit amet nibh dictum laoreet. Cras vehicula porttitor magna, quis sollicitudin magna varius ut. Mauris quis urna in mauris pellentesque consectetur. Duis quis enim non turpis dapibus laoreet a id nisi. Duis gravida condimentum mi, ut ornare purus egestas et.

TABs

Tabulator

This is a tab view.

Customize

• Put them under the include.

[[module CSS]]
:root{
--tabNAV-bgHover:#333;Background color of the navTAB which is selected / hovered.
--tabMain-border:#333; Border color
}
[[/module]]

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

long long long long long long long long long long long long long Tab

vvvvvvvvvvv

linear tab

Tabulator

[[div class="mz-tab-line"]]
[[tabview]]
[[tab TAB]]

[[/tab]]
[[/tabview]]
[[/div]]

Customize

• Put them under the include.

[[module CSS]]
:root{
--Line-tab-base:#333; Border color
--Line-tabNAV-txt:#333; Text color of the navTAB.
--Line-tabNAV-txtHover:#e8e8e8; Text color of the navTAB which is selected or hovered.
}

[[/module]]

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

long long long long long long long long long long long long long Tab

vvvvvvvvvvv

Flip tab

Tabulator

• A second click on the same navTAB will flip the content in tab.

[[div class="mz-tab"]]
[[tabview]]
[[tab TAB]]

[[/tab]]
[[/tabview]]
[[/div]]

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

long long long long long long long long long long long long long Tab

vvvvvvvvvvv

Horizontally center title

○ Type A

Type B

Horizontally center title (see above)

[[div class="mz-tt"]]
+ Type A
[[/div]]

OR

[[div class="mz-tt"]]
+ Type B
[[/div]]

Pseudo Blacklight box（see there）

[[div class="mz-tt tt-box" style="padding-top: 0rem"]]
+* title

texts

+* more titles

[[/div]]

Box color

[[div class="mz-tt tt-box" style="padding-top: 0rem"]]
+* [[span style="background:#141527; color:#fff"]] Box color[[/span]]

texts

[[/div]]

Customized code:

[[module CSS]]
--ttbox-h1BDR-color: #333; Color of the title box' border
--ttbox-boxBDR-color: #333; Color of the content box' border
--ttbox-before-color: #333; Color of the title box' bevel

--ttbox-h1-bg: #333; Background color of title
--ttbox-h1-color: fff; Color of title

[[/module]]

Column

The following code divides the page into two or three columns, but it would be shrinked to one column if the screen is narrow.

[[div class="mz-column"]]
Two columns
[[/div]]

[[div class="mz-column column-333"]]
Three columns
[[/div]]

[[div class="mz-column column-nip"]]
No column-rule
[[/div]]

[[div class="mz-column column-nip column-333"]]
Three columns without column-rule
[[/div]]

Lorem Ipsum：
In sit amet velit lacus. Ut finibus lorem vel felis interdum, ut posuere nisl sollicitudin. Proin ultrices neque ac mattis venenatis. Suspendisse potenti. Aliquam quis lacinia lorem, vel facilisis neque. Curabitur imperdiet nisl vitae nibh bibendum cursus. Nunc sollicitudin nisl eget egestas fermentum. Proin facilisis scelerisque ex, non molestie elit ultrices pulvinar. Morbi ac ultricies lacus. Proin consectetur dolor erat, a vestibulum metus scelerisque a. Sed dictum faucibus leo non condimentum. Donec enim augue, vehicula ut porta euismod, pellentesque quis lectus. Nam feugiat nisi nec nulla pretium, vel elementum sapien faucibus.

Goat sheet

Cras dolor velit, fermentum et sem ut, consequat iaculis orci. Ut dictum ipsum sed risus ullamcorper convallis. Nam non molestie odio, et pharetra risus. Aenean velit nisi, iaculis at venenatis a, semper vitae nibh. Vivamus aliquam risus at erat malesuada dapibus. Aliquam sit amet sapien risus. Vivamus efficitur aliquam justo, eget feugiat diam tincidunt vel. Suspendisse potenti. Maecenas eleifend eleifend auctor. Ut eget scelerisque augue. Nunc lacinia massa quam, in cursus erat tristique eget.

---

Text wrapping

○ Nobody

Suspendisse vitae libero a lectus consectetur iaculis non in massa. Suspendisse sed turpis id dolor consectetur egestas quis feugiat eros. Nam porta sit amet massa et volutpat. Praesent ut risus eu purus dictum varius. Nulla facilisi. In hac habitasse platea dictumst. Nam volutpat massa quis risus tincidunt, ut porttitor velit consequat. Ut tincidunt nulla in orci suscipit dapibus. Nulla ante ligula, sollicitudin in mauris nec, sollicitudin pharetra ligula. Quisque congue non metus at tristique. Nam bibendum sem magna, a consectetur elit dictum eu. Duis sagittis, nibh sit amet dignissim feugiat, dui quam mattis nisi, vel convallis lacus dui at nisl. Fusce lobortis non massa in tempus. Nunc ut vulputate magna. Nulla euismod metus quis lorem egestas, eget accumsan diam tristique.

Proin eu ultrices eros. Sed sit amet sapien ornare, tempus mauris tristique, consectetur ligula. Vestibulum ac tincidunt nunc. Morbi suscipit, lacus ut auctor lobortis, libero lacus egestas tellus, non fringilla metus nibh vel nisi. In mi lectus, varius non lorem vel, faucibus tempor enim. Fusce tincidunt libero id efficitur posuere. Integer sit amet dictum ipsum. Phasellus blandit est quis eros mollis sollicitudin. Nunc vehicula arcu vitae nisi pretium scelerisque. Vestibulum tristique odio eget urna facilisis finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent id nisl et ligula volutpat venenatis sit amet sit amet massa. Nam feugiat, odio vel tincidunt interdum, lorem sapien fringilla ipsum, vel molestie ipsum mi vitae tortor. Quisque sit amet enim nulla. Aenean consectetur erat ut mauris bibendum ornare. Ut posuere ante id libero tincidunt gravida. Nunc feugiat, lectus vitae consequat iaculis, velit dui placerat mauris, id mollis ipsum felis non sem. Vestibulum et eleifend dolor. Nulla facilisi. Praesent vel sapien pharetra, rhoncus metus id, ornare lorem. Nullam et molestie diam.

Ut ac suscipit nisl. Suspendisse bibendum lorem egestas ex tempor malesuada. Praesent ut facilisis odio, id imperdiet dui. Suspendisse vehicula augue tempor risus porttitor vestibulum. Nam a turpis finibus, hendrerit risus ut, finibus diam. Fusce sed pulvinar augue. Nulla ut arcu eros. Duis tempus egestas risus id maximus. Cras non ex pharetra, posuere risus eget, scelerisque purus. Duis bibendum ultricies molestie. Curabitur hendrerit ligula vitae molestie vestibulum. Etiam vel rutrum massa. Proin quis est eget nulla tristique egestas.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo, lacus mauris eleifend metus, vel tincidunt nisi nisi a neque. Sed feugiat ante sit amet nibh dictum laoreet. Cras vehicula porttitor magna, quis sollicitudin magna varius ut.

---

Wrap content in two columns

[[include :etinjat:css:column-start
|name=111 Unique ID.
|box-width=10rem Fixed width of wrapped content.
|box-height=14rem Fixed height of wrapped content.
]]

Wrapped content

[[include :etinjat:css:column-left]]

Left text

[[include :etinjat:css:column-right
|mid-style= Style of columns' middle gap. Set border: none ; to remove the midline.
]]

Right text

[[include :etinjat:css:column-end]]

+ CODE

/*=====================================
Magazine Theme - sigma9
[2021 Wikidot Theme]
by Etinjat
 
Inspired by EstrellaYoshte, hoah2333 and MalyceGraves
Magazine logo is created by Kcorena 
Bird icon from https://pixabay.com/zh/vectors/eagle-bird-animal-perching-162199/
=====================================*/
 
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
/*=====================================
根属性 ROOT
=====================================*/
 
:root{
 
/* ----------- 页面 || PAGE ----------- */
 
--content-width:inherit;
--main-width:inherit;
 
    --main-top:var(--TB_height_half);
    --main-top_PAD:min(var(--PGtt_size),1.3rem); 
    --main-top_MOB:min(var(--PGtt_size),1rem);   
 
/* ----------- 字体 || FONT ----------- */
 
    --page-font: 'Roboto Slab', 'Markazi Text', 'Nanum Gothic', verdana, arial, helvetica, sans-serif;
    --handwriting-font:'Yesteryear', 'La Belle Aurore', "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    --page-tt-font:'DM Serif Display', 'Roboto Slab', 'BauhausLTDemi', sans-serif;   
    --header-tt-font:'IM Fell English', 'DM Serif Display','Roboto Slab', 'BauhausLTDemi', sans-serif;   
    --mono-font:'Courier New', 'Nanum Gothic Coding', 'Ubuntu Mono', "Trebuchet MS", Courier, monospace;
    --teletype-font:'Special Elite', 'IM Fell English', Courier, monospace;
 
--header-tt-font-weight:500;
--HD-h2_font-weight:600;
 
--mob-tt-font:var(--page-tt-font);
 
/* 用户栏文本 */
--font_printuser: var(--handwriting-font);
--font_my-account: var(--teletype-font);
 
/* 编辑区域 */    
--EDIT-box_font:  "Trebuchet MS", var(--page-font);
--EDIT-btn_font: 'Nanum Gothic', 'Special Elite', "Monotype Corsiva", "Bradley Hand ITC",var(--page-font);
--EDIT-help_font: fontawesome, 'Nanum Gothic', "Trebuchet MS", var(--mono-font);
 
/* ----------- 颜色 || BASE COLOR----------- */
 
--dark-accent:rgb(110, 100, 105);
--page-bg:var(--color-grey);
--accentColor:#542429;
 
--color-red:#990314;
--color-darkred:#6f1212;
--color-grey:#ecebf0;
--color-grey-pale:#eee;
--color-grey-dark:#e0e1e1;
--color-grey-darker:#d2d2d2;
--color-grey-darkest:#c4c4c4;
--swatch-primary-darker:egb(64,96,22);
 
--color-kraft:rgb(185,137,102);
--color-navy:rgb(20,21,39);
--color-blue:#2c477d;
--color-paleblue:#4e5166;
--color-gold:#c39c52;
--color-brown:#ead1b3;
 
--color-light:#e8e8e8;
--color-darkest:#000;
--color-darker:#333;
--color-dark:#555;  
 
/* ------------ 版头 ------------------  */
 
   /* 版头 和 标题 */
 --HD_bg:var(--color-kraft);
 --TB_bg:var(--color-navy);
 --TB_txt:var(--color-gold);
 --HD_mob_HOV:var(--color-red);
 --HDtt_color:var(--accentColor);
 --HD-h2_color:var(--color-darkest);     
 
 --HD_height:var(--HD_height_PC);
 --HD_height_PC:max(8rem, var(--HDtt_height));  
 --HD_height_PAD:var(--HD_height_PC);  
 --HD_height_MOB:var(--HD_height_PC);  
 --HD_blank:var(--SB_width-total,16rem);    
 
    /* 页眉标题 */
--header-title:"FOUNDATION";
--header-subtitle:"Secure Contain Protect";
--mob-title:"S C P";
--mob-subtitle:"FOUNDATION";
--pad-title:var(--header-title);
--pad-subtitle:var(--header-subtitle);
 
    --HDtt_top:2rem;
    --HDtt_size:4rem;
    --HDtt_size_PAD:3rem;
    --HDtt_size_MOB:var(--HDtt_size_PAD);
    --HD-h2_size:1.5rem;
    --HD-h2_size_PAD:1.25rem;
    --HD-h2_size_MOB:var(--HD-h2_size_PAD);
    --HDtt_gap:0.5rem;
    --HDtt_gap_MOB:0.25rem;
    --HDtt_height:calc(var(--HDtt_size) + var(--HDtt_gap) + var(--HD-h2_size) + var(--TB_height));
    --HD-h1_top:inherit;
    --HD-h2_top:-0.25em;
    --HD-h1_top_PAD:1rem;
    --HD-h1_top_MOB:var(--HD-h1_top_PAD);
 
  /* 用户栏和搜索栏 */  
     --SEARCH_line:var(--accentColor);
     --SEARCH_bg:transparent;
     --SEARCH_bg_HOV:var(--SEARCH_line);
     --SEARCH_txt:var(--SEARCH_line);
     --SEARCH_txt_HOV:var(--HD_bg);
    --USER_line:var(--HDtt_color);
    --USER_unline:var(--HD-h2_color);
    --USER-list_txt:var(--HDtt_color);
    --USER-list_txt_HOV:var(--color-gold);
    --HD-btn_line_HOV:var(--HD_mob_HOV);
    --HD-btn_bg_HOV:var(--HDtt_color);
    --HD-btn_line_HOV:var(--SEARCH_txt_HOV);
 
 --STATUS_maxwidth:var(--HD_blank); 
 --STATUS_top:1rem;
 --STATUS_padding:0.5rem; 
 --STATUS-btn_padding:0.5rem;
 --STATUS_grid: 1.5rem;
 --STATUS_grid-gap: 0.25rem;
 --STATUS-btn_grid: 2rem;
 --STATUS-btn_btn: 1.2rem;    
 --STATUS-btn_size: 1rem;
 --USER_font-size:var(--STATUS_grid);
 --unlogin-font-size: 1.25rem;
 --STATUS_row-11:var(--STATUS_grid);
 --STATUS_row-22:var(--STATUS_grid);
 --STATUS_column-11:0;
 --STATUS_column-22:var(--STATUS-btn_grid);
 --STATUS_column-33:minmax(5rem,auto);   
 
  --SEARCH_top:calc(var(--STATUS_top) + var(--STATUS_padding) * 3 + var(--USER_font-size) * 2 );  
   --HD-menu_minwidth:10rem;
   --HD-menu_maxwidth:var(--HD_blank);
   --HD-menu_height:var(--STATUS_grid);
 
/* 顶栏 */    
   --TB_height:1.8rem;
   --TB_height_half:calc(var(--TB_height) / 2 + var(--HDtt_gap) / 2);
   --TB_font-size:90%;
 
/* -------------------------------- 标志 ---------------------------------------- */
    --HD_cover:var(--icon-noise);
    --LOGO_sidebar-opacity:1;
    --LOGO_size:7rem;
    --LOGO_top:0;
    --LOGO_opacity:0.2;
    --LOGO_position:50.2% 0%;
    --LOGO_top_PAD:0.45rem;
    --LOGO_size_PAD:6.5rem;
    --LOGO_position_PAD:50.1% 0%;
    --LOGO_top_MOB:var(--LOGO_top_PAD);
    --LOGO_size_MOB:var(--LOGO_size_PAD);
    --LOGO_position_MOB:var(--LOGO_position_PAD);
   --LOGO_image:none;
    --LOGO_image_PAD:var(--LOGO_image);
   --LOGO_image_MOB:var(--LOGO_image_PAD);
 
   --LOGO_sidebar:var(--icon-magazine);
   --LOGO_sidebar_MOB:var(--LOGO_sidebar);
 
/* 图标 || ICON */
 
--icon-scp:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_SCP.svg);
--icon-magazine:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg);
--icon-noise:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/IMG_noise.png);
 
--mzlog-img:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/ICON_eagle.svg');
 
 /* ----------------  侧边栏 || SIDE BAR ---------------------- */
   --SB_content:'Documents';   
   --barColour: var(--color-grey);
   --SB-hdtxt_color:#600;
 
   --SB-hdtxt_size:0.95rem;
    --SB-link_size:0.85rem;
    --SB-main_size:1.2rem;
 
--SB-line11: solid 0.18em var(--SB-hdtxt_cl);
--SB-line22: solid min(0.12em, 0.15rem) var(--SB-line_cl);
 
  /* 左右空白 + 侧边栏 = 整个侧边栏尺寸 = 页面右侧空白  */
    --SB_width:14rem;
    --SB-blank_right:1rem;
    --SB-blank_left:2rem;
    --SB-blank_top:6rem;
    --content-width:54rem;   
    --SB_width-total:calc(var(--SB_width) + var(--SB-blank_left) + var(--SB-blank_right));  
 
    /* 背景颜色 */
     --SB-bg_PC:transparent;
     --SB-bg_MOB:transparent;
     --SB-cover_MOB:transparent ; /* var(--icon-noise);*/
 
    /* 项目颜色 || ITEM COLOR */
    --SB-btn_border_cl:var(--color-darker);
    --SB-btn_txt:var(--color-darker);
    --SB-btn_bg:var(--color-navy);
 
    --SB-link_txt:var(--color-navy);
    --SB-link_bg:transparent;
    --SB-link_txt_HOV:var(--color-light);
    --SB-link_bg_HOV:var(--accentColor);
 
/* 栏线颜色 || ITEM LINE */
    --SB-hdtxt_cl:var(--accentColor);
    --SB-line_cl:var(--SB-hdtxt_cl);
    --SB-content_color:var(--SB-hdtxt_cl);
    --SB-hdtxt_cl_MOD:var(--SB-hdtxt_cl);
   --color-hr-sidebar:var(--color-navy);
   --SB-fold_color:var(--color-red);
 
    /* 栏线 */
    --SB-hdtxt_left: 0.4em;
    --SB-line11_size: min(0.2em, 2.5rem);
    --SB-line22_size: min(0.12em, 1.5rem);   
    --SB-line22_top:var(--SB-line11_size);
    --SB-line22_left: var(--SB-hdtxt_left);
    --SB-line22_right: max(7em, 65%) ;
    --SB-line_height: calc((var(--SB-line11_size) + var(--SB-line22_size)) / 2 + 0.5px );  
 
    --SB-line_clip: polygon(0 0, 100% 0, 100% var(--SB-line22_top), var(--SB-line22_right) var(--SB-line22_top), var(--SB-line22_right) 100%,  var(--SB-line22_left)  100%, var(--SB-line22_left)  var(--SB-line22_top), 0% var(--SB-line22_top));
 
/* 栏头 */
    --SB-topbox_size:8rem;
    --SB-topbox_top222:0rem;   
    --SB-phrase_size:2rem;
    --SB-phrase_top:calc(var(--SB-topbox_size) + 0.5rem);
 
     /* 手机按钮 */
    --SB_btntxt: "\f0c9";
    --SB-btn_square:1.5rem;
    --SB-btn_left:1rem;
    --SB-btn_top:1rem;
    --SB-btntxt_size:1rem;
    --SB-btntxt_size_HOV:var(--SB-btntxt_size);
    --SB-btntxt_cl:var(--color-navy);
    --SB-btn_bgcl:var(--color-navy);
    --SB-btn_border_cl: var(--color-navy);   
    --SB-btntxt_bg_HOV:var(--accentColor);
    --SB-btntxt_cl_HOV:var(--TB_txt); 
    --SB-btn_bgcl:var(--color-grey-dark); 
 
/* ------------------- 页面标题 || PAGE TITLE ------------------- */
  --PGtt_txt-color:var(--color-darkest);
    --PGtt_size:2.5rem;
    --PGtt_size_PAD:2rem;    
    --PGtt_size_MOB:1.5rem;    
 
     /*.....底部盒子.....*/
    --PGtt_underbox-gap:0rem;  
    --PGtt_underbox-height:0.5em;
 
     /*.....底部装饰线.....*/
    --PGtt-line_color:var(--color-darker);
    --PGtt-linebox_space: max(var(--PGtt-line01_height),var(--PGtt-line02_height) );
    --PGtt-linebox_gap: 0.07em;
    --PGtt-line_ornleft:calc(50% - var(--PGtt-orn_width) / 2);
    --PGtt-line_ornright:calc(50% + var(--PGtt-orn_width) / 2);
 
    --PGtt-line01_height: 0.1em;
    --PGtt-line02_height: 0.06em;
    --PGtt-line02clip_height: var(--PGtt-line01_height);
    --PGtt-line02clip_right: calc(100% - var(--PGtt-line02clip_left));
    --PGtt-line02clip_left: min(10%, var(--PGtt-orn_size) * 10 );
 
  --PGtt-lines-img: linear-gradient(90deg, var(--PGtt-line_color) , var(--PGtt-line_color));
  --PGtt-line02_clip:polygon(100% 0, 0 0, 0 var(--PGtt-line02clip_height), var(--PGtt-line02clip_left) var(--PGtt-line02clip_height), var(--PGtt-line02clip_left) 100%, var(--PGtt-line_ornleft) 100%, var(--PGtt-line_ornleft) 0, var(--PGtt-line_ornright) 0, var(--PGtt-line_ornright) 100%, var(--PGtt-line02clip_right) 100%, var(--PGtt-line02clip_right) var(--PGtt-line02clip_height), 100% var(--PGtt-line02clip_height));
 
     /*.....底部图案.....*/
    --PGtt-orn_content:"\f005";
    --PGtt-orn_txt-color:var(--accentColor);   
    --PGtt-orn_size:0.8em;
    --PGtt-orn_width:calc(var(--PGtt-orn_size) * 1.5);    
 
/* ------------------- 评分栏 || RATE BOX------------------- */
 
  --RATE_text:'Rating';
    --RATE_text_HOV:var(--RATE_text);   
    /* 颜色 */
    --RATE_font:var(--page-font);
    --RATE_bg:var(--page-bg);
    --RATE-num_bg:var(--RATE-num_border);
    --RATE-num_num:var(--color-light);
    --RATE-num_txt:var(--color-darkest);
    --RATE-num_border:var(--color-darker);
 
    --RATE-info_btn:var(--color-dark);
    --RATE-info_btn_HOV:var(--color-darker);
    --RATE-info_btn_HOV-txt:var(--color-light);
    --RATE-info_border:var(--color-grey-darkest);
 
    --RATE-mobox_border:var(--color-navy);
    --RATE-mobox_bg:var(--color-kraft);
    --RATE-mobox_tt:var(--color-gold);
    --RATE-mobox_txt:var(--color-darkest); 
    --RATE-mobox_btn: var(--accentColor) ; 
 
 /* .....尺寸..... */
    --RATE-num_size:1.2rem;
    --RATE-txt_size:0.8rem;
    --RATE-num_lh:1.2; /* 数字行间距 */
    --RATE-num_padding:0.4em;  
    --RATE_padding-left:0em;
    --RATE-num_height:calc(var(--RATE-num_size) + var(--RATE-num_padding) * 2);
 
    /*按钮*/
    --RATE-btn_mgleft:0.5rem;
    --RATE-btn_mgleft_half:0.25rem;    
    --RATE-btn_width: 1.5em;
    --flag-delta-size:0.5em;
    --RATE-btn_height:2em; 
    --RATE-btn_size: 1rem;
 
    --RATE-box_heigh:calc(var(--RATE_padding-top) + var(--RATE-line_width) + var(--RATE-num_size) + var(--RATE-line_gap) + var(--RATE-box_margin-bottom) - 1px);
    --RATE-box_margin-bottom:0.25rem;
 
      /* 旗子 */
   --RATE-btn_bgcolor:var(--RATE_bg);  
   --RATE-btn_color:var(--accentColor);  
   --RATE_bg_HOV:var(--color-grey-darkest);
   --RATE_txt_HOV:var(--color-red);
   --RATE_boder-flag:var(--color-darker);
   --RATE-flag_gap:var(--page-bg);  
    --RATE_padding-top:0rem;
    --RATE-flag_top: calc(var(--RATE_padding-top) + var(--RATE-btn_height) );
    --RATE-delta_height:calc(var(--RATE-btn_width) / 4);
    --flag-delta-count: calc(100% - var(--flag-delta-size));
 
    /* 线条 */ 
    --RATE-line_width:0.1rem; 
    --RATE-line_bottom: var(--RATE-line_width);
    --RATE-line_gap: var(--RATE-line_width);
    --RATE-line_gapcount:calc(var(--RATE-line_width) * 2 + var(--RATE-line_gap));
 
   /* ---------  引用块  --------- */
 
    --QUOTE_bg:rgba(236,235,220, 0.6);
    --QUOTE_bg222:rgba(220,220,230, 0.2);
    --QUOTE_border:rgba(33,33,33,0.4);
    --QUOTE_border-left:rgba(33,33,33,0.7);
 
  /* --------- 分割线 --------- */
 
      --color-hr:rgba(128,128,128,0.8);
 
  /* --------- 目录 / TOC MENU--------- */
 
    --TOC-bd_cl:var(--color-navy);
    --TOC-tt_cl:var(--color-navy);
    --TOC-tt_bg:var(--page-bg);
 
       --TOC-txt_size:1rem;
       --TOC-line_height:1.6rem;
 
       --TOC_text-tt:'MENU';
       --TOC_text-fold:'Fold';
       --TOC_text-unfold:'Unfold';
 
  /* --------- 特殊 div 样式 --------- */
 
    /* 泛黄块 */
    --mz-paper-bg:rgba(236,235,220, 0.6);
    --mz-paper-bg222:#e9e9e2;
 
    /* 便利贴 */
    --tip-bdcl:155,155,155;
    --tip-color:var(--color-grey-darker);
    --tip-deg:-45deg;
    --tip-dogear-size:1.5em;
    --tip-dogearoll-size:calc( var(--tip-dogear-size) * 1.4); 
    --tip-maxwidth_PC:calc(var(--content-width, 56rem) * 0.5);
    --tip-dogearoll-margin: 0rem -0.9rem 0 0;
 
   /* --------- 维基图片框 || IMAGE BOX--------- */
 
    --mz-img-bg:var(--page-bg);
    --shadow-gap:var(--mz-img-bg);
    --shadow-line:var(--color-navy);
 
    --box-line:drop-shadow(0px -1px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
        drop-shadow(0px 0px 0.1px var(--shadow-gap)) drop-shadow(0px 0px 0.1px var(--shadow-line))
        drop-shadow(0px 0px 0.1px var(--shadow-gap)) drop-shadow(0px 0px 0.1px var(--shadow-gap))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line));
 
 /* ----------- TAB 样式 ----------- */
 
    --tabNAV-txt:var(--color-navy);
    --tabNAV-txt_HOV:var(--color-light);
    --tabMain-txt:var(--color-darker);
 
    --tabNAV-bg_HOV:var(--accentColor);
    --tabNAV-bg_SEL:var(--tabNAV-bg_HOV);
 
    --tabNAV-txt_SEL:var(--tabNAV-txt_HOV);
    --tabNAV-bg_ACT:var(--tabNAV-bg_HOV);
    --tabNAV-txt_ACT:var(--tabNAV-txt_HOV);
 
    --tabNAV-border:var(--color-darker);   
   --tabMain-border:var(--accentColor);
   --tabNAV-bg:var(--color-grey-darker);
   --tabMain-bg:var(--color-grey-dark);
    --tab-shadow:var(--color-grey-darkest);
 
    /* 深线样式 */
    --Line-tabNAV-txt:var(--color-navy);
    --Line-tabNAV-txt_HOV:var(--color-light);
 
   --Line-tabNAV-txt_SEL:var(--Line-tabNAV-txt_HOV);
   --Line-tabNAV-txt_ACT:var(--Line-tabNAV-txt_HOV);
 
   --Line-tab-base:var(--color-navy);  
    --Line-tabNAV-bg_HOV:var(--Line-tab-base);
    --Line-tabNAV-bg_SEL:var(--Line-tabNAV-bg_HOV);
    --Line-tabNAV-bg_ACT:var(--Line-tabNAV-bg_HOV);
 
    --Line-tabNAV-border:var(--Line-tab-base);
    --Line-tabMain-border:var(--Line-tab-base);
 
   --Line-tabNAV-bg:var(--page-bg);
   --Line-tabMain-bg:var(--Line-tabNAV-bg);
   --Line-tab-shadow:transparent;
   --Line-tabMain-txt:var(--Line-tab-base);
 
   --Line-tabBD-weight:3px;
 
    /* ------------- 文本标题框 / TITLE BOX-------------  */
    --ttbox_padding:0.5rem;
    --ttbox_margin:0.5rem;
 
    --ttbox_h1BDR-color:var(--color-navy);
    --ttbox_boxBDR-color:var(--ttbox_h1BDR-color);
    --ttbox_bevel-color:var(--ttbox_h1BDR-color);
 
    --ttbox_h1-color:var(--color-navy);
 
    --ttbox_h1-bg:var(--page-bg);
    --ttbox_box-bg:var(--page-bg);
 
    --ttbox_box-size:0.2rem;
    --ttbox_border-size:0.25rem;
 
    --ttbox_h1-size:1.2rem;
    --ttbox_h1-top:calc(0rem - var(--ttbox_h1-size) * 2 );
    --ttbox_h1-left:calc(0rem - var(--ttbox_padding) * 4);
    --mztt-h1pd-horiz:1rem;
 
     --ttbox_bevel-size:2rem;
     --ttbox_bevel-left:calc(0rem - var(--mztt-h1pd-horiz) + var(--ttbox_padding));
     --ttbox_bevel-top:calc(0rem - var(--ttbox_padding) + var(--ttbox_h1-size));
     --ttbox_bevel-bg:linear-gradient(-135deg, var(--ttbox_bevel-color), var(--ttbox_bevel-color) 50%, transparent 50%, transparent 100%);
 
 /*-------------- 操作区域 ----------------*/ 
 
  /*......... 历史区 .........*/
    --HISTORY-btn_size：1rem;
    --HISTORY-form_columns:repeat(8, auto);
    --HISTORY-form_td_width:100%;
    --HISTORY-form_td_margin:0.2rem 0;
    --HISTORY-perpage_width: 8.5rem;
 
  /*......... 编辑区 .........*/
   --EDIT-table_width:95%;
 
    --EDIT-ui_size-11: 1rem;
    --EDIT-ui_size-22: 0.8em;
    --EDIT-ui_size-33: 0.8em;
    --EDIT-ui_size-sub: 0.7em;
    --EDIT-ui_size-99:1em;
    --EDIT-ui_height: 2em;
    --EDIT-ui_weight: var(--EDIT-ui_height);
    --EDIT-ui_mono-font: 'Nanum Gothic Coding';
    --EDIT-ui_color:var(--color-navy);
    --EDIT-ui_color_HOV:var(--EDIT-ui_color);
    --EDIT-ui_bg:transparent;
    --EDIT-ui_bg_HOV:var(--color-grey-dark);
    --EDIT-ui-sub_HOV:var(--color-grey-darkest);
 
    --EDIT-ui-btn_margin:0 0.5em 0 0;
    --EDIT-ui-panel_margin:0 0 0.5em 0;
 
    --EDIT-border_color:var(--color-dark);
    --EDIT-border_color_Foc:var(--color-dark);
 
    --EDIT-box_bg:var( --color-grey);
    --EDIT-box_bg_Foc:var( --color-grey-pale);
 
    --EDIT-ui_outline:1.5px solid var(--EDIT-border_color);
    --EDIT-ui_font: 'Roboto Slab', 'DM Serif Display',"Trebuchet MS","FontAwesome";    
 
    /* ............... 保存盒子 .......- */
--lock-info111:"You have an exclusive 15-minute lock that \A will stop others editing this page while you are working. \A The lock expires in ";
--lock-info222:"\00A0 seconds of inactivity.";
--lock-info333:"Saving Page...... If this tip has been displaying for a long time, \A you may need to copy your contents from \A the Edit Form and refresh the page.";
 
 --lock-info111_MOB: "You can exclusively edit this page in ";
--lock-info222_MOB: "s.";
--lock-info333_MOB: "Saving Page. Backup your work if no response.";   
 
 /*-------------- 页脚 ----------------*/   
--FOOT_size: 0.8rem;
--LICENSE_bg: var(--color-grey-darker);
--LICENSE_cl: var(--color-darker);   
--FOOT-line_cl: var(--color-grey-darkest);
 
/* ----------- 讨论区帖子 / FORUM POST ----------- */
 
    --POST_hdbg:#e5e5e5;
    --POST_short:#DBDBDB;
    --POST_BDcolor:#333;
    --POST_BDcolor-222:#929292;
 
/* ----------- 笔记本组件厚度 ----------- */
--cl-tab-bar:var(--color-navy);
--cl-tab-bar222:#fff;
}
 
/*------------------------------------------------
PAD 根属性
------------------------------------------------*/
 
@media (max-width:1000px){
    :root{
 /* ----------------  侧边栏  ---------------------- */
    --SB-blank_right:0rem;
    --SB-blank_left:0rem;
  }
}
 
/*------------------------------------------------
MOB 根属性
------------------------------------------------*/
 
@media (max-width:500px){
  :root{
 /*-------------- 操作区域 ----------------*/   
      --EDIT-table_width:95%;
   --EDIT-ui_size-11:0.8rem;
    --EDIT-ui-btn_margin: 0 0.15em 0 0;
    --EDIT-box_txt-size:1rem;   
--EDIT-ui_outline: 0.5px solid var(--EDIT-border_color);
 
--EDIT-bottomtable_width:95%;      
--EDIT-bottomtable_columns:100%;             
--EDIT-bottomtable_tip-order:-1;  
--EDIT-box-btn_padding:0 0.2em;
 --EDIT-help_size:0.9em;     
 --EDIT-help_display: inline-grid;   
--EDIT-help_right:0;      
 --EDIT-ui-panel_margin: -0.5rem 0 0.5rem 0rem;
 
        --lock-info111: var(--lock-info111_MOB); 
        --lock-info222: var(--lock-info222_MOB);
        --lock-info333: var(--lock-info333_MOB); 
 
   /*............ 历史区 .......*/
    --HISTORY-btn_size：1rem;
    --HISTORY-form_columns:repeat(4, auto);
--HISTORY-update_size: 0.8rem;
    --HISTORY-perpage_width: 5rem; 
 
 /*-------------- 页脚 ----------------*/   
 
      --FOOT-wiki_display:none;
      --LICENSE-link_size:1em;
      --LICENSE_size:0.75em;
  }
}
 
/*
=====================================
页面全局 / GLOBLE
=====================================
*/
 
body {
    font-family:var(--page-font), sans-serif;
    background-color: var(--page-bg);
    background-image:none;
}
 
#page-content p{
/*    font-size: 1.1em; */
}
 
tt {
    font-family:var(--mono-font);
    font-size: 98%;
}
 
::selection {
     color: white;
    background:var(--color-blue);
}
 
::-moz-selection {
     color: white;
    background:var(--color-blue);
}
 
a {
    color: var(--color-red);
}
 
a:visited {
    color:var(--color-darkred);
}
 
a.newpage {
    color: var(--color-kraft);
}
 
#page-content a {
    border: none;
}
 
#page-content .printuser img.small {
    padding-right: 0.25rem;
}
 
/* ----------------- 字体及字重 || FONT -------------------- */
 
#action-area h1,
div#extra-div-1:before, div#extra-div-1:after, 
#page-title, .meta-title, #page-content :is(h1, h2, h3, h4, h5,h6) {
        font-weight:600;
        font-family:var(--page-tt-font), serif;
}
 
#header :is(h1,h1 a,h1 a::before, h2,  h2::before) {
    font-family:var(--header-tt-font), serif;
    font-weight:var(--header-tt-font-weight, 600);
}
 
#header h2::before {
    font-weight:var(--HD-h2_font-weight,600);
}
 
@media (max-width: 600px) {
div#extra-div-1:before, div#extra-div-1:after, 
#page-title, .meta-title, #page-content :is(h1, h2, h3, h4, h5,h6) {
       font-family:var(--mob-tt-font);
       font-weight: var(--mob-hdtt-h1-font-weight,600);
 letter-spacing: 1.5px;
  }
 #container {
    /*  overflow: hidden; */
  }
 
}
 
/*
=====================================
版头
=====================================
*/
 
#container-wrap-wrap #container-wrap {
    background-color: none;
    background-image: none;
}
 
div#header {   
 
    background-image: none;
    width: 100%;
   max-width: 100%;
    height: var(--HD_height_PC);
    background-color:var(--HD_bg);
    background-image: var(--HD_cover);
    background-size:18rem;
    background-position: 0% 0%;
    background-repeat: repeat;
 
  display: grid;
  justify-content: space-between;
  grid-template-columns: var(--HD_leftright,1.2rem) minmax(300px, 100%) min-content var(--HD_leftright,1.2rem);
  grid-template-rows:0  var(--HDtt_top) minmax(var(--HDtt_size), 100%) minmax(var(--HD-h2_size), 100%) auto;
      grid-template-areas:
    '.  upper  upper    . ' 
    '.      leftop rightop .      '
    'hdleft bigtt  bigtt   hdright' 
    'hdleft subtt  subtt   hdright' 
    'topbar topbar topbar  topbar ';
 
}
 
#header h1, #header h2, 
#top-bar,#login-status, #search-top-box{
    position: initial;
    display: grid;
    top: 0;
    left:0;
    right:0;
    margin: 0;
    padding: 0;
    height: auto;
    align-content: center;
}
 
#header h1 a {
  padding:0;
}
 
#header h1{
    order: 1;
    grid-area: bigtt;
    display: inline-grid;    
    height: var(--HDtt_size);
    line-height: 0
}
 
#header h2{
    order: 2;
    grid-area: subtt;
}
 
/* ------------- ----
LOGO 
------------------ */
 
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3{
     grid-area: upper;
}
 
#header-extra-div-1{
height: var(--HD_height);
width: 100%;
    display: inline-flex;
    justify-content: center;
   top:var(--LOGO_top);
    position: relative;
    overflow: hidden;
}
 
#header-extra-div-1:before{
    content: ' ';
    display: inline-flex;
    align-self: center;
    position: relative;
    height: var(--LOGO_size);
width: 100%;
background-size: contain;
background-position: var(--LOGO_position);
background-repeat: no-repeat;
background-image: var(--LOGO_image);
opacity: var(--LOGO_opacity);   
}
 
#header-extra-div-2{
    order:0
}
#header-extra-div-3{
    order:0
}
 
/* ---------------- 
版头标题
--------------------- */
 
#header h1, #header h2 {
    margin-left: 0;
    float: none;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}
 
#header h1 span, #header h2 span {
    font-size: 0;
    display: none;
}
 
#header h1 a::before, #header h2::before {
    text-shadow: none;
}
 
div#header h1 a{
    top: var(--HD-h1_top); 
    position: relative;
    letter-spacing: 0.1rem;
    max-width: max-content;
    margin: 0 auto;
}
 
div#header h1 a:before{
    font-size:var(--HDtt_size);
    content: var(--header-title);
    color: var(--HDtt_color);
}
 
#header h2::before {
   content: var(--header-subtitle);
   font-size:var(--HD-h2_size);
   margin-top:var(--HD-h2_top);
   color: var(--HD-h2_color);
}
 
/* ------------- ----
用户栏 
------------------ */
 
#login-status{
    grid-area: var(--area-status,rightop);
    margin-top: var(--STATUS_top);
    align-items: center;
    align-self: start;
    grid-gap: 0.5rem 0rem;
    grid-template-columns:var(--STATUS_column-11) var(--STATUS_column-22) var(--STATUS_column-33)  var(--STATUS_column-44,0);
    grid-template-rows:  var(--STATUS_row-11) var(--STATUS_row-22) var(--STATUS_row-33, auto);
    grid-template-areas:
        'left botton   Account  right'
        'left messages username right';
    width: max-content;
    word-break:  keep-all;
    color: transparent;
    font-size: 0;
    max-width: var(--HD-menu_maxwidth);
    min-width: var(--HD-menu_minwidth);
    display: inline-grid;
    height: var(--STATUS_height);
    justify-self: var(--justify-status);
    position: relative;
    left:var(--STATUS_left, 0);
}
 
/*------- 账户与用户名  ----------*/
 
#login-status .printuser, #login-status #my-account , #account-topbutton{
     font-family: var(--header-tt-font);
      color: var(--USER_line);
      font-size: var(--USER_font-size);
    margin-left: var(--STATUS_grid-gap);
}
 
#login-status #my-account{
    grid-area: Account;
    text-decoration: none;
    order:0;
    font-family: var(--font_my-account);
    pointer-events: none;
    width: auto;
    display: var(--display-status-txt,inline-grid);
    align-self: start;
}
 
#login-status .printuser{
    font-family: var(--font_printuser);
    grid-area: var(--area-username,username);
    white-space: nowrap;
    overflow: hidden ;
    text-overflow: '.';
    letter-spacing: 0.1rem;
    background-image:linear-gradient(40deg, transparent 0%, transparent 12%, var(--USER_line) 14%, var(--USER_line) 15%, var(--USER_line) 60%, transparent 90%, transparent 100%);
    background-size: 110% 0.15rem;
    background-repeat: no-repeat;
    background-position:-0.25em 70%;   
     width: 90%;
     max-width: min-content;
    cursor: default;
    padding: var(--STATUS_padding); 
    display: var(--display-topbox-notbtn);
    background-blend-mode:  color-burn
}
 
#login-status:hover .printuser{
    animation:  user-script 1.5s;
}
 
#login-status:has(:is(#account-topbutton, a[href*="messages"]):hover) .printuser{
    animation:  none;
}
 
#login-status .printuser:hover{
       color:var(--HD-h2_color) ;
    -webkit-text-stroke: 0.5px var(--HD_mob_HOV);
}
 
@keyframes user-script{
    0% {width:10%; background-size: 0% 0.15rem;text-overflow: '';}
    80% {width:90%; background-size: 0% 0.15rem;text-overflow: '';}
    100%  {width:90%; background-size: 0% 0.15rem;}
}
 
#login-status .printuser a{
    width: 100%;
    position: relative;
    display:  inline-block;
    margin-right: -100%;
    height: 100%;
    opacity: 0;
}
 
#login-status .printuser img.small {
 height:var(--USER_font-size);
}
 
/*------- 菜单 ----------*/
#account-topbutton{
        grid-area: botton;
    font-size: 0rem;
    border: none;
    margin: 0
}
 
#account-topbutton:hover:before {
    color: var(--HD_bg);
 background-color:  var(--USER_line);
}
 
#login-status #account-options{
    font-size:  var(--STATUS-btn_size);
    position: relative;
    background-color: var(--HD_bg);
    border: 2px solid var(--USER_line);
    grid-area: var(--area-account-options,left);
    justify-self:  var(--justify-account-options,end);
    align-self: start;
    overflow:hidden;
}
 
#account-options:hover, #login-status #account-options[style*="block"]{
    display: inline-grid;
}
 
#account-options ul {
margin:-0.1rem;   
width:105%;
height:105%;
}
 
#login-status #account-options a {
    color: var(--USER-list_txt);
    background-color: var(--HD_bg);
    border: 1px solid var(--USER_line);
    text-decoration: none;
}
 
#login-status  #account-options a:hover {
    background-color: var(--USER_line);
    color: var(--USER-list_txt_HOV);
    border: 1px solid var(--USER_unline);
}
 
/*------------- 按钮 --------------------*/
#login-status:before,
#login-status:after,
#account-topbutton,
#login-status :not(div) + a[href*="messages"]{
    display: inline-grid;
    color:var(--USER_unline);
    font-size: 0rem;
    margin: 0;
    padding: 0;    
    justify-items: left;    
    margin-left: var(--STATUS_padding);
        min-height: var(--HD-menu_height);
}
 
#account-topbutton:after,
#login-status :not(div) + a[href*="messages"]:after{
    width: var(--STATUS-btn_grid);
    height:var(--STATUS-btn_grid);
    position: absolute;
}
 
/* 按钮样式 */
#login-status a:is(.login-status-create-account, .login-status-sign-in):before,
#login-status:before,
#login-status:after,
#search-top-box-form:before,
#account-topbutton:before {
    display: inline-grid;
    justify-content: center;
    color: var(--USER_line);
    content: '\f007';
    font-family: FontAwesome;
    font-size: var(--STATUS-btn_size);
    border:  var(--USER_line) solid 2px;
    width: var(--STATUS-btn_btn);
    min-height: var(--STATUS-btn_btn);
    margin-right: var(--STATUS-btn_padding);
    content: '\f007';
    border-radius:40%;
    padding:1px;
    align-content: center;
}
 
/* 用户名旁的装饰 */
#login-status:before,
#login-status:after{
   content:"\f05a";
    grid-area: messages;
    border:none;
    font-size: var(--STATUS-btn_btn);
    justify-content: end;
    display:none;
}
 
#login-status:has(:not(div) + a[href*="messages"]):after{
    display:none;
}
 
#login-status:before{
    grid-area: botton;
}
 
#login-status:has(.printuser):after{
    display: var(--display-status-txt, inherit);
}
 
/*------------- 私信 --------------------*/
#login-status :not(div) + a[href*="messages"]{
     grid-area: var(--area-messages,messages);
    display: inline-grid;
     align-self:  start;
    align-content:  center;
        height: 0;
}
 
#login-status  :not(div) + a[href*="messages"]:before{
    content: '\f0e0 ';
    font-size: var(--STATUS_grid);
    font-family: 'FontAwesome';
    color:var(--USER_line);
 
    -webkit-animation-name: user-messages;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
    animation-name: user-messages;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    animation-duration: 1s;
}
 
#login-status  :not(div) + a[href*="messages"]:hover:before{
   color:var(--HD_mob_HOV);
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
 
#login-status > a > strong {
    text-decoration: none ;
}
 
@-webkit-keyframes user-messages {
    from { content: '\f0e0 '; }
    to { content: '\f003'; }
}
 
@keyframes user-messages {
    from { content: '\f0e0 '; }
    to { content: '\f003'; }
}
 
/* ----------------- 未登录 ------------------- */
#login-status {
    column-gap: var(--STATUS_gridbox-gap,0);
}
 
#login-status a:is(.login-status-create-account, .login-status-sign-in){
   font-size:var(--unlogin-font-size);
   grid-area: var(--area-create-account, messages);
   font-family: var(--header-tt-font), var(--page-tt-font), serif;
   font-weight:600;
   color: var(--USER_line);
   display:inline-grid;
   white-space:nowrap;
   grid-template-columns: var(--STATUS-btn_grid) auto;
   grid-gap: var(--STATUS_unlogin-gap,var(--STATUS_padding));
   justify-content: start;
   align-self: start;
   text-decoration: none;
}
 
#login-status a.login-status-sign-in{
   grid-area: var(--area-sign-in,botton);
}
 
#login-status a:is(.login-status-create-account, .login-status-sign-in):before{
   content:"\f090";
   font-family:fontawesome;
   font-size:var(--STATUS-btn_size);
   width: var(--STATUS-btn_btn);
   height:var(--STATUS-btn_btn);
   border-radius: 5px;
   align-content: center;
   margin-left: var(--STATUS_padding);
   align-self: center;
}
 
#login-status a.login-status-create-account:before{
  content:"\f234"; 
}
 
#search-top-box-form:hover:before,
#login-status :is(.login-status-create-account, .login-status-sign-in):hover:before{
      color: var(--SEARCH_txt_HOV);
    background: var(--SEARCH_bg_HOV);
}
 
#login-status a:is(.login-status-create-account, .login-status-sign-in)::after {
    content: "";
}
 
/* ------------- ----
搜索栏 
------------------ */
 
#header  #search-top-box{
    grid-area: var(--area-search, rightop);
    justify-content: var(--justify-search,stretch);
    align-content:   start;
    width: 100%;
    min-width: var(--HD-menu_minwidth);
    margin-top:var(--SEARCH_top);
    position: relative;
    left: var(--HD-menu_left);
    height: var(--STATUS_grid);
}
 
#search-top-box-form {
   position: relative;
   display: grid;
   width:  initial;
   grid-template-columns: var(--STATUS-btn_grid) auto;
   grid-gap: var(--STATUS_grid-gap); 
}
 
#search-top-box-form:before {
      content: '\f002 ';
      position: absolute;
      z-index: -1;
      border-radius: 5px;
      align-self: center;
      min-height: var(--STATUS-btn_btn);
      margin-left: var(--STATUS_padding);
}
 
#search-top-box input.empty,
#search-top-box-input {
    order: 2;
    border: solid 2px var(--SEARCH_line);
    background-color: transparent;
    box-shadow: none;
    color: var(--SEARCH_txt);
   width: 100%;
   margin-left:0.25rem;
        display: var(--display-topbox-notbtn);
    border-radius: 5px;
}
 
#search-top-box-form #search-top-box-input:hover,
#search-top-box-form  #search-top-box-input:focus {
    border: solid 2px var(--SEARCH_line);
    color: var(--SEARCH_txt_HOV);
    background-color:var(--SEARCH_bg_HOV);
    box-shadow: none;
       outline: none;
}
 
#search-top-box-form input[type="submit"]:focus,
#search-top-box-form input[type="submit"]:hover {
    color: transparent;
    background: transparent;
    border: none;
    box-shadow: none;
}
 
#search-top-box-form input[type="submit"] {
    color: var(--SEARCH_txt);
    background: transparent;
    box-shadow: none;
    border: none;
    font-size: 0;
    width: var(--USER_font-size);
    height: var(--STATUS_grid);
   margin-left: var(--STATUS_padding);
}
 
/*========================== 
顶栏 
==============================*/
#header #top-bar{
    grid-area: topbar; 
    height: var(--TB_height); 
    font-size: var(--TB_font-size); 
    position: absolute; 
    background:var(--TB_bg);
    background-size: cover;
    background-position: 0% 0%;
    max-width: 100%;
    justify-content: center;
    display: inline-grid;
    align-items: center;
     margin-top: var(--HDtt_gap); 
}
 
#top-bar div.top-bar  > ul > li > ul,
#top-bar  .mobile-top-bar > ul > li > ul {
      border: var(--accentColor)  solid 2px  ;      
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
 border-top:1px solid var(--accentColor);
}
 
#top-bar li ul li a {
    background: var(--color-kraft);
    border: var(--accentColor)  solid 2px  ;   
}
 
#top-bar ul li a {
    border-left: solid 1px rgba(264,64,64,.2);
    border-right: solid 1px rgba(264,64,64,.2);
}
 
#header #top-bar a{
    color:var(--TB_txt);
    text-align:center;
    padding: 0 min(1.2vw,1em);
    letter-spacing: 0.5px;
    font-size:var(--TB-li_size);
}
 
#top-bar ul li a{
display: unset
}
 
#top-bar ul li ul a{
display: block
}
 
#header #top-bar .sfhover a{
    color: var(--accentColor);
   background-color:var(--color-kraft);
}
 
#header  #top-bar a:hover{
    background: var(--accentColor);
        color: var(--color-gold);
}
 
/*========================== 
版头窄屏 
==============================*/
 
@media (max-width: 1100px) {
  div#header{
    --area-status:leftop;
    --area-username:Account;
    --area-account-options:username;
     --area-sign-in:botton;
     --area-create-account:Account;
    --STATUS_top:0.5rem;
   --STATUS_unlogin-gap:var(--STATUS_grid-gap);
    --SEARCH_top:var(--STATUS_top); 
    --STATUS_column-22:max-content;
    --display-status-txt:none;
    --HD-menu_maxwidth:80vw;
    --justify-account-options:start;   
      --justify-search:right;
  }
}
 
@media (max-width: 767px) {
  div#header{
   --HD_height:var(--HD_height_PAD);  
   --HDtt_size:var(--HDtt_size_PAD);
   --HD-h2_size:var(--HD-h2_size_PAD);
   --header-title:var(--pad-title);
   --header-subtitle:var(--pad-subtitle);
      --HD_leftright:0;
    --HD-h1_top:var(--HD-h1_top_PAD);
    --HD-h2_top:var(--HD-h2_top_PAD);
     --LOGO_image:var(--LOGO_image_PAD);
    --LOGO_top:var(--LOGO_top_PAD);
    --LOGO_size:var(--LOGO_size_PAD);
    --LOGO_position:var(--LOGO_position_PAD);
   --HDtt_gap:var(--HDtt_gap_MOB);
   --display-topbox-notbtn:none;
   --HD-menu_minwidth:var(--STATUS_grid);
    --HD-menu_maxwidth:var(--STATUS_grid);
   --area-status:upper;
   --area-search:upper;
      --STATUS_row-22:auto;
       --STATUS_row-33:0;
  --STATUS_column-11:var(--HD-menu_minwidth);
      --STATUS_column-22:var(--HD-menu_minwidth);
      --STATUS_column-33:var(--HD-menu_minwidth);
      --STATUS_column-44:0;
      --HD-menu_left:-0.5rem;
      --STATUS_gridbox-gap:calc(var(--STATUS_padding)  + var(--HD-menu_left) - var(--HD-menu_left) * 1.5);
      --STATUS_left:calc(0rem - var(--STATUS_gridbox-gap) + var(--HD-menu_left) * 2  - var(--STATUS-btn_size) - var(--STATUS_grid) * 2 );
      --unlogin-font-size:0rem;
    --area-account-options:username ;
    --area-messages:left;
    --area-sign-in:left;
    --area-create-account: botton ;
    --justify-account-options:end;    
    --justify-status:end; 
    --justify-search:end;   
  }
  .mobile-top-bar {
      width: 100%;
      justify-content:center;
      display: inline-flex;
      bottom: unset;
      left: unset;
  }
}
 
@media (max-width: 480px) {
  div#header{
   --HD_height:var(--HD_height_MOB);  
   --HDtt_size:var(--HDtt_size_MOB);
   --HD-h2_size:var(--HD-h2_size_MOB);
   --header-title:var(--mob-title);
   --header-subtitle:var(--mob-subtitle);
    --HD-h1_top:var(--HD-h1_top_MOB);
    --HD-h2_top:var(--HD-h2_top_MOB);
     --LOGO_image:var(--LOGO_image_MOB);
     --LOGO_top:var(--LOGO_top_MOB);
     --LOGO_size:var(--LOGO_size_MOB);
     --LOGO_position:var(--LOGO_position_MOB);
      --TB-li_size:90%;
  }
}
 
/*=====================================
标题
=====================================*/
 
/* ----------- 页面标题  ---------------- */
#page-title,
#page-content .meta-title{
 display: grid;
    width: 100%;
font-size: var(--PGtt_size);
font-weight: bold;
color: var(--PGtt_txt-color);    
background: var(--PGtt_bg);
background-size: var(--PGtt_bg-size,contain);
background-repeat:no-repeat;
 background-position: center;  
position: relative;
border: none;
justify-content: center;
    align-items: end;
    text-align: center;
grid-template-columns: 100%;
 grid-template-rows:  min-content var(--PGtt_underbox-gap) var(--PGtt_underbox-height);
grid-template-areas: 'body' 'gap' 'underbox' ;
    margin-bottom:0.5rem;
 
}
 
.meta-title:before,
#page-title:before{       
      grid-area:underbox;
    align-self: center;
    content: '  ';
    height:var(--PGtt-linebox_gap);
    background:transparent;
    border:var(--PGtt-linebox_space) solid;     border-image-source:var(--PGtt-lines-img);
    border-image-width: var(--PGtt-line01_height) 0px var(--PGtt-line02_height) 0px;
    border-image-slice: 100% 0 100% 0;
    -webkit-clip-path:var(--PGtt-line02_clip);
    clip-path:var(--PGtt-line02_clip);   
    background: var(--PGtt-linebox_background);
}
 
.meta-title:after,
#page-title:after{    
  grid-area:underbox;
 justify-self: center;
 align-self: center; 
 text-align:center;   
 content: var(--PGtt-orn_content);
 background:var(--PGtt_ornBG);
 background-size:var(--PGtt_ornBG-size, contain);
 background-repeat: no-repeat;
 background-position: center;
 height:var(--PGtt-orn_height,max-content);
 width:var(--PGtt-orn_width); 
 font-size: var(--PGtt-orn_size);
 color: var(--PGtt-orn_txt-color);
 z-index: 1;
font-family: 'FontAwesome',var(--RATE_font);
  margin-top: var(--PGtt-orn_top);
}
 
 /* ----------- 面包屑导航------------ */
#breadcrumbs {
  margin: 0.5em 0em;
}
 
/* ----------- 内文一级标题 || H1 ---------------- */
#action-area h1,
#page-content h1 {
    font-weight: bold;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    display: flex;
}
 
#page-content h1 {
    font-weight: bold;
    margin-bottom: 0.6rem;
    display: flex;
}
 
#action-area h1:after, 
#page-content h1::after {
    content: " ";
    flex-grow: 1;
    display: inline-flex;
    height: 0.1rem;
    margin: auto auto auto 0.375rem;
    color: var(--accentColor);
    background-color: var(--dark-accent);
    width:auto;
}
 
#page-content  blockquote :is(blockquote, .blockquote) h1,
#page-content .blockquote :is(blockquote, .blockquote) h1,
#page-content div:is(.note-nobody, .yui-content, .blockquote, .code, .mz-cover, .mz-textquote, .mz-outbox, .mz-blockquote,mz-board, .clip-wrap, .note-page, .mz-note ) h1{
    display: block;
}
 
h1 {
    color: var(--color-red);
    font-size: var(--PG-h1_size, 190%);
}
h2 {
    font-size: var(--PG-h2_size, 170%);
}
h3 {
    font-size: var(--PG-h3_size, 150%);
}
h4 {
    font-size: var(--PG-h4_size, 130%);
}
h5 {
    font-size: var(--PG-h5_size, 110%);
}
h6 {
    font-size: var(--PG-h6_size, 100%);
}
 
h2, h3, h4, h5, h6 {
    color: var(--color-navy);
}
/*
=====================================
标题与侧边栏适应 / adjust PAGE TITLE & SIDEBAR
=====================================
*/
 
#main-content{
    padding-top: 0;
    margin-top: 0em;
}
 
#side-bar .side-block:first-child {
    padding-top: 0;
    margin-top: 2em;
}
 
#content-wrap{
    display: flex;
    justify-content:  flex-start;
    align-items: flex-start;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
       margin-top: var(--main-top);
    width:var(--main-width, 100vw);
    flex-grow: 1;
    width:var(--main-width, 100vw);
    padding: 0 0rem;
}
 
#main-content{    
    margin: 0 auto;
    width:var(--content-width, 56rem);
    max-width:calc(98% - var(--SB_width-total)); 
    padding-right: var(--main-padding-right);
    padding-left:var(--main-padding-left);
    position: initial;
}
 
#side-bar,
#content-wrap:after{
    content: '  ';
    max-width: var(--SB_width);
    height:12rem;
    flex-grow: 1;
    flex-shrink: 0;
}
 
#content-wrap:after{
  flex-grow: 0;
  flex-shrink: 100;
  flex-basis:var(--SB_width-total,inherit);
  width: 0;
  margin-right:var(--SB-blank_left);
  margin-left:var(--SB-blank_right);
 
}
 
@media (max-width: 0rem){
      #main-content{    
    padding-left:10rem;
  }
}
 
@media (max-width: 1100px){
   #content-wrap #side-bar {
  --SB-blank_right: 0rem;
  --SB-blank_left: 0rem;
  }
}
 
@media (max-width: 767px){
    #content-wrap{
  }
 
  #main-content{    
   --PGtt_size: var(--PGtt_size_PAD);
   --main-top:  var(--main-top_PAD);   
     flex-grow: 1;  
     max-width:90%;
     margin: 0 auto ;
     padding-left:0;
     padding-right:0rem;
  }
 
  #content-wrap:before,
  #content-wrap:after{
    display:none;
    position: absolute;
    margin:0;
  }       
}
 
@media (max-width: 479px) {
 #content-wrap{
        --main-top:var(--main-top_MOB);   
   }
  #main-content{
    --PGtt_size: var(--PGtt_size_MOB);
    --PG-h1_size:150%; 
    --PG-h2_size:135%;  
    --PG-h3_size:120%;  
    --PG-h4_size:110%;  
    --PG-h5_size:100%;  
    --PG-h6_size:90%;  
    }
}
 
/*
=====================================
侧边栏 / SIDEBAR
=====================================
*/
 
/* ----------- 侧边栏样式 ---------------- */
 
#side-bar{
    --link-main-page:1.3rem;
    flex-basis:var(--SB_width,inherit);
    min-width:var(--SB_width,16em);
    position:  relative;
    margin-left:var(--SB-blank_left);
    margin-right:var(--SB-blank_right);
    left: 0;
    height:100%;
    margin-top: var(--SB-topbox_top222);
    padding: 0;
    background-color: var(--SB-bg_PC);
    border: none;
    filter: none;
    box-shadow:none
}
 
#side-bar:before { 
    position:relative;
    height:auto;
    width: 100%;
    background-size:  auto var(--SB-topbox_size);
    background-image:var(--LOGO_sidebar);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: var(--SB-bg_PC);
    opacity: var(--LOGO_sidebar-opacity);
    left: 0;
 
    color:var(--SB-content_color);   
    content:var(--SB_content);
    font-family: var(--handwriting-font);
    font-size: var(--SB-phrase_size);
    display: inline-grid;
    justify-content: center;
    padding-top: var(--SB-phrase_top);
    margin-top: 1rem;
    white-space: break-spaces;
 }
 
/* -------------- 内部 ----------- */
#side-bar .side-block.resources,
#side-bar div.side-block:first-child{
margin-top: 0;   
    padding-top: 0;
}
 
#side-bar div.side-block :not(a)  img{
    display: none ;
 
}
 
#side-bar div.side-block:not(.side-links) a  img{
    display: inline-block ;
    /*! padding: 0 0.1em; */;
}
 
#side-bar div.side-block img[alt*="cc-by-sa"]{
    margin: 0 auto;
}
 
#side-bar div.side-block a[href*="https:"]:not([href*="wikidot"]){
    background: none ;
    padding: 0;
}
 
#side-bar .side-block {
    padding: 0rem 0.8em;
    padding-top: 0px;
    border: none;
    border-radius:0px;
    box-shadow: none;
    background: transparent !important;
}
 
/* ------- 分割线 -------- */
#side-bar hr{
    display: none;
}
 
#side-bar .side-block hr{
    display: block;
    border-top: 2px  dotted var(--color-hr-sidebar);
}
 
/* ------- 媒体图标 -------- */
 
#side-bar .side-block:is(.media, .sns) {
padding-bottom: 0 !important;
}
 
#side-bar :is(.media, .sns) img{
    transition:transform 0.2s;
    background-color: transparent;
    width: var(--media_width,inherit)
}
 
 #side-bar :is(.media, .sns) img:hover{
     --media-scale:1.2;
    -ms-transform:scale(var(--media-scale));    
    -moz-transform:scale(var(--media-scale));
    -webkit-transform:scale(var(--media-scale));
    -o-transform:scale(var(--media-scale));
    transform:scale(var(--media-scale));
    transition:transform 0.1s;
     background-color: transparent;
}
 
#side-bar :is(.media, .sns) a img {
  --media_pd: 0.1em;  /* 7 icons in en */
  padding: 0;
  padding-left:  var( --media_pd);
   padding-right:  var( --media_pd);  
   padding-bottom: 0.5em;
}
 
#side-bar :is(.media, .sns):has(a:nth-child(2)) a img{
  --media_pd: 0.6em;
}
#side-bar :is(.media, .sns):has(a:nth-child(4)) a img{
  --media_pd: 0.5em;
}
#side-bar :is(.media, .sns):has(a::nth-child(6)) a img{
 --media_pd: 0.3em;
}
#side-bar :is(.media, .sns):has(a:nth-child(7)) a img{
 --media_pd: 0.1em;
}
#side-bar :is(.media, .sns):has(a:nth-child(11)) a img{
  --media_pd: 0.3em;
}
#side-bar :is(.media, .sns):has(a:nth-child(13)) a img{
  --media_pd: 0.1em;
}
 
@media (max-width: 479px) {
 #content-wrap #side-bar :is(.media, .sns) a img{
      --media_pd: 0.6em;
     --media_width:2em;
  }   
}
 
/* fixed for JP*/
#side-bar .sns div :is(a, a:hover){ 
    padding-top: 0; padding-bottom: 0; 
    background-color: transparent;
}
 
/*-----------------侧边栏主页按钮 / MAIN PAGE BTN -----------------------*/
 
#side-bar .menu-item a {
 font-size: var(--SB-link_size);
    font-family: var(--SB-link_font, "Trebuchet MS");
    letter-spacing:1px;
 
}
 
#side-bar .menu-item :is(a[href="/"], a[href="/"] ~ a[href="/forum:start"]){
    font-size: var(--SB-main_size);
     font-family: var(--SB-main_font, var(--page-tt-font));
}
 
#side-bar > *:first-child[class="image"] {
  display: none;
}
 
#side-bar .menu-item a[href="/"],
#side-bar .menu-item a:visited,
#side-bar .menu-item a{
    color: var(--SB-link_txt);
    padding:0.2em  0.3em;
}
 
#side-bar .menu-item a[href="/"]:hover,
#side-bar .menu-item a:hover {
    color:var(--SB-link_txt_HOV);
    background-color: var(--SB-link_bg_HOV);
    text-decoration: none;
}
 
#side-bar .menu-item a[href="/"] {
    top:0rem;
    position: relative;
    align-self: center;
}
 
#side-bar .heading {
    border: 0;
    padding:10px 0px 8px 0px;
    margin-bottom: 0.4em;
    font-size: var(--SB-hdtxt_size);
    font-weight: bold;
    color:var(--SB-hdtxt_color);
    width: 100%;
 
}
 
#side-bar .heading p{
    padding-left:var(--SB-hdtxt_left);
    padding-bottom: var(--SB-hdtxt_bottom, 0.1em);
}
 
/* 主页下方的系列 */
.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) {
    width:100%;
    display: inline-grid;
    grid-template-columns: 15% 2% 20% 2%  20% 2% 20% 2% 20%;
     font-size: 0;
    justify-items: center;
}
 
.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) a{
  --SB-item-line_cl:var(--color-dark);
    text-align: center;
    width: 100%;    
    border-image-source:linear-gradient(transparent 15%, var(--SB-item-line_cl) 15%, var(--SB-item-line_cl) 85%, transparent 85%);
    border-image-width: 0 0.1rem 0 0;
    border-image-slice: 0 100% 0 0;
    padding:  0;
}
 
.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) :is(a:hover, a:last-child) {
   --SB-item-line_cl:transparent
}
 
/*-----------------底部线条  -----------------------*/
#side-bar .heading:after,
#side-bar .collapsible-block-folded:after,
#side-bar .collapsible-block-unfolded-link:after{
    content: ' ';
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
    font-size: var(--SB-hdtxt_size);
 height: 0.15em; 
 border-top: var(--SB-line11_size) solid var(--SB-line_cl);
 border-bottom: var(--SB-line22_size) solid var(--SB-line_cl);   
   -webkit-clip-path: var(--SB-line_clip);
   clip-path: var(--SB-line_clip);   
}
 
/*-----------------侧边栏折叠 / collapsible  -----------------------*/
 
 #side-bar .collapsible-block-folded{
    background: none;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar div.collapsible-block div.collapsible-block-folded > .collapsible-block-link {
    display: block;
      font-size: var(--SB-hdtxt_size);
    margin: 0;
}
/* 线*/
#side-bar .collapsible-block-unfolded-link::after,
#side-bar .collapsible-block-folded:after{
    width: 100%;
}
 
#side-bar .collapsible-block-unfolded-link,
#side-bar .collapsible-block-folded {
    background:none;
      border-bottom: 0.15em solid var(--SB-line);
}
 
/* 提示 */
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar a.collapsible-block-link{
     color:var(--SB-fold_color);
        text-decoration: none;
        margin-left: 0px;
      font-family: 'FontAwesome',var(--RATE_font);
}
 
#side-bar .collapsible-block-folded  a.collapsible-block-link:before{
   content: '\f0fe  \00A0 ';
}
 
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link:before {
    content: '\f146  \00A0';
}
 
#side-bar .collapsible-block-folded  a.collapsible-block-link:hover:before{
   content: '\f13a  \00A0 ';
}
 
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link:hover:before {
    content: '\f139  \00A0';
}
 
/* 折叠内容 */
#side-bar .collapsible-block-unfolded {
  border: none;
}
 
#side-bar .collapsible-block .menu-item:first-child{
    padding-top: 0.5rem;
}
 
/* ----------- 手机样式 || MOB ---------------- */
 
#content-wrap #side-bar:target {
    display: block;
    left: 0;
    position: fixed;
    background-color:var(--HD_bg);
    background-image: var(--HD_cover);
    background-size:300px;/* 20% */
    background-position: 0% 0%;
    background-repeat: repeat;
    border:none;
    border-right: 4px solid rgba(0,0,0,0.3);
    overflow-y: scroll;
    overflow-x: hidden;
}
 
@media (max-width: 767px){
 #content-wrap #side-bar {
     --SB-fold_color:var(--color-darkred);
        --SB-hdtxt_size:0.9rem;
    --SB-link_size:0.8rem;
    --SB-main_size:1.2rem;
      position: fixed;
      top: 0;
      margin-top: 0;
      margin-left: 0;
      left: -20rem;
      z-index: 50;
      background-image: var(--HD_cover);
      background-color:var(--SB-bg_PC);
      background-color:var(--HD_bg);
  }
 
  #side-bar:before {
background-color: var(--SB-bg_MOB);
background-image: var(--LOGO_sidebar_MOB);
pointer-events: none;
   }
 
    #side-bar:target {
    display: block;
    left: 0;
    position: fixed;
  } 
  #side-bar:target .close-menu {
   background: rgba(0,0,0,0.2) 1px 1px repeat;
  }
 
   #header #top-bar .open-menu a {     
    position: fixed;
    top: var(--SB-btn_top);
    z-index:20;
    border-radius: 5px;
    border: 0.15rem solid var(--SB-btn_border_cl);
    color:  var(--SB-btntxt_cl);
    background-color: var(--SB-btn_bgcl);
    background-image: var(--SB-btn_image, unset);
    font-size:0rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--SB-btn_square);
    height: var(--SB-btn_square);
    left:  var(--SB-btn_left);
}
 
 #header #top-bar .open-menu a:before {
    content: var(--SB_btntxt);
    font-size:var(--SB-btntxt_size);
    font-family: FontAwesome;
}
 
#header #top-bar .open-menu a:hover {
    --SB-btntxt_size: var(--SB-btntxt_size_HOV);
    --SB-btntxt_cl: var(--SB-btntxt_cl_HOV);
    --SB-btn_bgcl:var(--SB-btntxt_bg_HOV);
      -webkit-box-shadow:none;
      box-shadow:none;
  }  
   div.scpnet-interwiki-wrapper {
  margin: 0;
   }
}
 
/*=====================================
评分栏 / RATE BOX
=====================================*/
 
.rateBox .creditButton p a:focus,
.page-rate-widget-box a:focus{
user-select:none;
background:transparent;
}
 
/* ---------------------------------
----------- 常规 || normal -----------
-------------------------------------- */
 
.mz-talking-wrap, .rateBox, .page-rate-widget-box {
         --RATE-btn_filter: drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.2px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag));    
}
 
/* ---------------------------------
----------- 常规 -----------
-------------------------------------- */
 
.page-rate-widget-box {
    border-radius: 0;
    box-shadow: none;
    margin-top:0px;
    margin-bottom:var(--RATE-box_margin-bottom);
    margin-right: 0rem;
    position: relative;
    user-select:none;  
    z-index: 1;
    display: inline-flex;
}
 
/* .....评分文本栏和第一底线..... */
#main-content .page-rate-widget-box  .rate-points {
    border: solid 0px transparent;
    border-bottom: solid var(--RATE-line_width, 2px) var(--RATE-num_border);
    border-radius: 0;
    padding-top:var(--RATE_padding-top, 0.5rem);
    padding-right:var(--RATE_padding-left, 1rem);
    padding-bottom: var(--RATE-line_bottom,0.1rem);
 
    font-size: 0;
    color:var(--RATE-num_txt) ;
    position: relative;
 
    z-index: 1;
    display: inline-grid;
    align-self: start;
    align-items: baseline;   
    background-color: transparent !important; 
    margin-bottom: var(--RATE-line_bottom);
 
grid-template-columns: var(--RATE_column-11) var(--RATE_column-22) var(--RATE_column-33);
grid-template-rows: var(--RATE_row-11) var(--RATE_row-22) var(--RATE_row-33);
grid-template-areas:
'top top  top ' 
'. text number'
'. line line'
 'bottom bottom bottom'  ;
}
 
.page-rate-widget-box .rate-points {
    background-color: transparent !important;
}
 
/* 第二条底线 */
.rate-points::after {
  grid-area: line;
  content: ' ';
  border-bottom: solid var(--RATE-line_width, 2px) var(--RATE-num_border);
}
 
/* 评分数字 */
.rate-points .number {
    font-size: var(--RATE-num_size);
    background-color:var(--RATE-num_bg);
    color:var(--RATE-num_num);
    padding: 0 var(--RATE-num_padding);
    letter-spacing: 1px;
    line-height: var(--RATE-num_lh);
    word-break: keep-all;
    grid-area: number;
}
 
/* 评分文本 */
.page-rate-widget-box  .rate-points:before {
    grid-area: text;
    content: var(--RATE_text);
    font-size: var(--RATE-txt_size,0.8rem);
    padding: 0 0.4em 0 0.8em;
    margin-left: 0rem;
    font-family: 'FontAwesome',var(--RATE_font);
    letter-spacing: 0.25em;
    color: var(--RATE-info_btn);
    word-break:  keep-all;
    white-space:pre;
    /*! font-family: "Trebuchet MS"; */
}
 
.page-rate-widget-box:hover  .rate-points:before {
    content: var(--RATE_text_HOV) ;
}
 
/*.....评分旗子 || BTN FLAG ........*/
.page-rate-widget-box span.btn {
    background-color: transparent;
    border: solid 0px transparent; 
}
 
.creditRate .creditButton,
.page-rate-widget-box span.btn {
     font-size: var(--RATE-btn_size);
     height:var(--RATE-btn_height);
     width: var(--RATE-btn_width);
     text-align: center;
    -webkit-filter:var(--RATE-btn_filter);
    filter:var(--RATE-btn_filter);
    display: inline-flex;
    justify-content:  center;
    align-content: start;
    align-self: center;  
    top: 0;
    left: 0;
    padding: 0;
    margin-left: var(--flag-delta-size);
}
 
.page-rate-widget-box span.btn a{
    width: 100%;   
    background-color:  var(--RATE-btn_bgcolor);
    margin: 0;
    padding-bottom:0;
}
 
.creditRate  .creditButton p,
.page-rate-widget-box span.btn a{
    --flag-clip: polygon(100% 0, 100% 50%, 100% 100%, 50% var(--flag-delta-count), 0 100%, 0 0);
     background-color:  var(--RATE-btn_bgcolor);
    -webkit-clip-path:var(--flag-clip);
     clip-path: var(--flag-clip);
}
 
.page-rate-widget-box span.btn a:hover,
.creditRate .creditButton:hover p a{
          background-color:var(--RATE_bg_HOV);
          color:var(--RATE_txt_HOV);
          border-radius: 0;
          text-decoration: none;
}
 
/* ---------------------------------
著作信息栏 || INFO BOX
--------------------------------- */
 
.rateBox .rate-box-with-credit-button{
   background-color: transparent;
   border: none;
   border-radius: 0x;
   box-shadow: none;   
   user-select:none;
    display: inline-flex;
}
 
#page-content .creditRate{
  margin-right: 0.5rem;
}
 
.rateBox :is(.page-rate-widget-box, .creditButton){
    display: inline-flex;
}
 
.page-rate-widget-box span.btn:last-child {
     margin-right: 0;
}
 
.creditRate .creditButton{
    display: inline-flex;
    position: relative;
    margin-left: var(--RATE-btn_mgleft);
}
 
.creditRate .creditButton  a{
   --RATE-txt_size: var(--RATE-txt_size);
    font-size: var(--RATE-btn_size);
    margin: auto;
    background-color: transparent;
    color: var(--RATE-num_bg);
    left: unset;
    top: unset;
    display: inline-grid;
    justify-content: center;   
    align-items: center;
    grid-template-rows:var(--RATE-btn_width) auto;
     height:var(--RATE-btn_height);
     width: var(--RATE-btn_width);
 }
 
/* -------- 著作信息内部弹窗 --------------  */
.modalbox hr{
    border: none;
}
 
.modalcontainer  .modalbox .close-credits {
-webkit-filter:sepia(100%)   saturate(500%) brightness(200%);
filter: sepia(100%)   saturate(500%) brightness(200%);
}
 
.modalcontainer  .modalbox h2:first-child{
    color: var(--RATE-mobox_tt);
}
 
/* ------------ 著作信息评分栏 ------------------- */
div:is(#u-credit-view, #u-credit-otherwise) .modalcontainer .modalbox {
    --RATE_bg: var(--RATE-mobox_bg) ;
    --RATE-info_btn:var(--RATE-mobox_txt) ;
    --RATE-num_num: var(--RATE-mobox_bg);
    --RATE-num_bg: var(--RATE-mobox_border) ;   
    --RATE_boder-flag:var(--RATE-mobox_border);
    --RATE-flag_gap: var(--RATE-num_bg);
     --RATE-btn_bgcolor:var(--RATE-mobox_bg) ;  
     --RATE_bg_HOV:var(--RATE-mobox_btn);
    --RATE_txt_HOV:var(--RATE-mobox_tt);
 
    background: linear-gradient(var(--RATE-mobox_border) 51px,var(--RATE-mobox_bg) 51px);
    border: var(--RATE-num_bg) solid 4px;
    color: var(--RATE-mobox_txt) ;   
    scrollbar-color:  var(--RATE-mobox_btn) var(--RATE-mobox_border);
}
 
 .modalcontainer :is(a, .rateup a, .ratedown a, .cancel a) {
  color: var(--RATE-mobox_btn);
}
 
/* ----------- TAB 里的颜色 ---------------- */
.yui-content .page-rate-widget-box .btn:not(:first-child),
.yui-content .page-rate-widget-box:before {
    background-color: var(--tabMain-bg);
}
 
.yui-content .rate-points .number{
  color: var(--tabMain-bg);
}
 
.yui-content .page-rate-widget-box .btn:not(:first-child)::after{
    border-color: var(--tabMain-bg) var(--tabMain-bg) transparent var(--tabMain-bg);
}
 
/* ----------- 窄屏 ---------------- */
 
@media (max-width: 500px){
   .page-rate-widget-box {
       z-index: 0;
   }
    /* 让著作信息按钮在窄屏下，不出框架 */
    .creditButton  p{
    position: relative;
   }
}
 
/*
=====================================
正文元素 / PAGE CONTAINER 
=====================================
*/
 
/* ----------- 表格 ------------ */
table.wiki-content-table th {
  color: var(--RATE-num_bg);
  background-color: var(--color-light);
}
 
/* ----------- 目录（有空再弄） ------------ */
 
#page-content #toc-action-bar a {
     padding: 0;
}
 
#toc #toc-action-bar {
   text-align: center;
}
 
#toc{
     display: flex;
     flex-wrap: wrap;
     flex-basis: 100%;
     flex-direction: column;
 
     min-width: 8rem;
     font-size: var(--TOC-txt_size);
      padding: 0em 0em;
     background-color: transparent;
     line-height: var(--TOC-line_height);
 
    border: 0px solid var(--TOC-bd_cl);
    border-radius: 0rem 0.875rem;
    border-bottom: solid 0.2rem var(--TOC-bd_cl);
    border-top: solid 0.2rem var(--TOC-bd_cl);
    position: relative;
 
}
 
#toc .title {
    visibility: hidden;
    margin-top: -1rem;
    padding: 0;
    position: relative;
    text-align: left;
 
}
 
#toc .title:before {
 content:var(--TOC_text-tt,'MENU') ;
    visibility: visible;
    padding: 0.2rem 0.4rem;
    background-color:var(--TOC-tt_bg);
    color:var(--TOC-tt_cl);
        border-radius: 0.5rem;
    border: 2px solid var(--TOC-bd_cl);
}
 
 #toc #toc-action-bar{
    order: 3;
    text-align: right ;
}
 
#toc  #toc-action-bar {
padding: 0;
    line-height: 0.5rem;
    position: relative;
    bottom: -0.5rem;
}
 
#toc-action-bar a{
    font-size:0;
    text-decoration: none;
}
 
#toc-action-bar a[onclick*="foldToc"]:before,
#toc-action-bar a[onclick*="unfoldToc"]:before{
    font-size: initial;
        padding: 0.2rem 0.4rem;
    font-family: var(--page-font);
    background-color:var(--TOC-tt_bg);
    color:var(--TOC-tt_cl);
        border-radius: 0.5rem;
    border: 2px solid var(--TOC-bd_cl);  
}
 
#toc-action-bar a[onclick*="foldToc"]:before{
    content: var(--TOC_text-fold);
}
 
#toc-action-bar a[onclick*="unfoldToc"]:before{
    content: var(--TOC_text-unfold);
}
 
#toc-action-bar a[onclick*="foldToc"]:hover:before,
#toc-action-bar a[onclick*="unfoldToc"]:hover:before{
    background:  var(--TOC-bd_cl);
    color:var(--TOC-tt_bg);
}
 
/* ----------- 引用块 ------------ */
 
blockquote,
div.blockquote {
    border: 2px dashed var(--QUOTE_border);
    padding:0.5rem 0.8rem;
    margin: 1rem 3em;
    background-color: var(--QUOTE_bg222);
}
 
/* ----------- 替代引用块的div ------------ */
.mz-board,
.mz-blockquote {
    border: 3px double var(--QUOTE_border);
        border-left: 5px solid var(--QUOTE_border-left);
    padding:0.5rem 0.8rem;
    margin: 1rem 3em;
        background-size:80px;/* 20% */
    background-position: 0% 0%;
 background-repeat: repeat;
    background-color: transparent;
}
 
.mz-board:after,
.mz-blockquote:after {
    content: '\f06c ';
    font-family: 'FontAwesome';
    display: block;
    font-size: 1.2rem;
    width: 1rem;
    height:1rem;
    padding: 0.5rem;
    float: right;
 
    position: relative;
    margin-right: -1.5rem;
   margin-top:-1rem;
       background-color: var(--page-bg)
}
 
.mz-board:after,
.mz-blockquote div  .mz-blockquote:after,
.mz-blockquote div  .mz-blockquote:after {
    content: '\f02e ';
    font-family: 'FontAwesome';
    font-size: 1.2rem;
    background: none;
        margin-right: -1.5rem;
   margin-top:-0.5rem;
}
 
.mz-blockquote  .mz-blockquote  .mz-blockquote:after {
    display: none;
}
 
.mz-board{
    border: 2px solid #333;
    border-left: 7px solid #333;
    background: rgba(150,150,150,0.1);
}
 
.yui-content .mz-blockquote::after {
    background-color: var(--tabMain-bg);
}
 
.mz-tab-line .yui-content .mz-board::after,
.mz-tab-line .yui-content .mz-blockquote::after {
    background-color: var(--page-bg);
}
 
.mz-cover,
.mz-paper{
        border: 3.5px double #555;
        padding:0.5rem 1rem;
        margin: 1rem 1rem;
        background-size:100px;
        background-position: 0% 0%;
        background-repeat: repeat;
        background-color:var(--mz-paper-bg);
        background-image: var(--icon-noise);
}
 
.mz-cover{
        border: 2px solid var(--color-navy);
        background-color:var(--color-kraft);
        background-image: var(--icon-noise);
}
 
#page-content .mz-cover :is(h1, h2, h3, h4, h5, h6){
font-family:var(--teletype-font);
}
 
.mz-cover tt{
font-family:var(--teletype-font);
}
 
/**/
 
.mz-textquote {
    border-left: 5px #75878a solid;
    color: #75878a;
    padding:0px 0px 0px 1em;
    margin: 0.5em 1em;
}
 
.mz-textquote *:first-child{
    margin-top: 0.2rem ;
}
 
.mz-textquote *:last-child{
    margin-bottom: 0.2rem;
}
 
/*  引用块 与 div块 在手机格式下的边距  */
 
@media (max-width: 600px){
   blockquote, div.blockquote,
  .mz-paper,  .mz-blockquote,
  .mz-board, .mz-cover {  
    margin: 0.6rem 0.5rem;
      padding:0.5em 1em;
   }
}
 
/* ----------------- 异学会装饰性框架 ---------------------- */
 
.mz-outbox{
  border: solid 1px #C0C0C0;
  padding: 2% 2%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
 
.mz-innerbox{
 border: solid 1px #C0C0C0;
padding: 2% 2%;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
 
.mz-tabcell{
   border: solid 1px #C0C0C0;
   padding: 10px 15px;
   box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
 
/*-------------- 便利贴与脚注 ------------------*/
.hovertip .content .footnote,
.mz-note{
    min-width: 15vw;
}
 
.hovertip  .content,
.mz-note{
    background-image:linear-gradient(var(--tip-deg),transparent 0%, transparent var(--tip-dogear-size) ,var(--tip-color) var(--tip-dogear-size), var(--tip-color) 100%);
    -webkit-filter: drop-shadow(0px 0px 2px rgba(var(--tip-bdcl),0.5));
    filter: drop-shadow(0px 0px 2px rgba(var(--tip-bdcl),0.5));
}
 
.hovertip  .content:after,
.mz-note::after{
    content: "  ";
    display: block;
    width: var(--tip-dogearoll-size);
    height: var(--tip-dogearoll-size);
    background-size:contain;
    background-image:linear-gradient(var(--tip-deg),transparent 0%, transparent 50% , var(--tip-color) 50%, var(--tip-color) 100%);    
    float: right;
    margin: 0 -0.5rem -0.5rem 0;
    -webkit-filter: drop-shadow(-2px -1px 4px rgba(var(--tip-bdcl),0.6))  drop-shadow(2px -1px 1px rgba(var(--tip-bdcl),0.2)) grayscale(50%);
    filter: drop-shadow(-2px -1px 4px rgba(var(--tip-bdcl),0.6))  drop-shadow(2px -1px 1px rgba(var(--tip-bdcl),0.2)) grayscale(50%);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}
 
.mz-note.note-left{
    --tip-deg:45deg;
}
 
.mz-note.note-left:after{
   float: left;
    right: unset;
    left: 0;
}
 
.mz-note .blockquote,
.mz-note blockquote{
    padding:0 1em;
    margin: 1rem 1em;
}
 
.mz-note hr{
   border-width: 2px;
   border-style: solid;
}
 
#page-content .mz-note{
    max-width:var(--tip-maxwidth_PC);
    padding: 0.5rem;
}
 
a.footnoteref  {
    display: inline-flex;
    font-family:var(--page-tt-font);
    text-decoration: none;
}
 
a.footnoteref::before{
    content: "(";
    margin: 0 0.1em;
}
 
a.footnoteref::after{
    content: ")";
      margin: 0 0.1em;
}
 
.hovertip  {
    --tip-dogear-size:1em;
    --tip-dogearoll-size:1.35em;
    border: none !important;
    background: transparent !important;
   width: auto !important;
    font-size:var(--tip-txt_size)
}
 
.hovertip .content{
    --tip-dogear-padding: 0.5rem  calc(var(--tip-dogearoll-size) + 0.5em) 0.5rem 0.5rem;
    -webkit-filter: drop-shadow(0px 0px 3px rgba(var(--tip-bdcl),0.5))  drop-shadow(0px 0px 1px rgba(var(--tip-bdcl),1));  
    filter: drop-shadow(0px 0px 3px rgba(var(--tip-bdcl),0.5))  drop-shadow(0px 0px 1px rgba(var(--tip-bdcl),1));  
    padding:var(--tip-dogear-padding);
    font-size: 110%;
    min-height: var(--tip-dogearoll-size);
}
 
.hovertip .f-footer{
    height: 0;
    font-size: 0;
}
 
.hovertip .f-heading  {
    max-width: 11em;
    padding: 0em 0 0em 0em;
    font-size: 110%;
    font-family:var(--handwriting-font);
    letter-spacing:1px;
    font-weight: 600;
}
 
.hovertip .f-heading::after {
    content: ' ';
    height: 0.1rem;
    display: block;    
    padding: 0;
    margin-left: -5px;  
    background-image: linear-gradient(70deg, transparent 0px,  var(--color-navy) 8%,  var(--color-navy) 10%, transparent 100%);
}
 
@media (max-width: 500px) {  
  #page-content .mz-note{
     max-width: 90%;
  }   
  .hovertip {
    max-width: 90vw;
      --tip-txt_size:0.9em;
  }
 a.footnoteref  {
    font-size:80%;
  }
}
 
/* 非脚注的注释 */
.hovertip:not(:has(.f-heading))  .content {
    --tip-dogear-size:0;
    --tip-dogearoll-size:0;
    --tip-dogear-padding:0.5rem 1em;
    --tip-color:var(--color-grey-pale);
    letter-spacing: 1px
}
 
/*--------------便签纸-----------------*/
 
.note-page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC",var(--handwriting-font);
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}
 
.note-page p,
.note-page ul {
    line-height: 20px;
    margin: 0;
}
 
.note-page blockquote,
.note-page .blockquote{
    margin: 0.5rem 2em;  
}
 
/*--------------回形针-----------------*/
 
.clip-wrap div {
    max-width: 60%;
    margin: 1rem auto;
    width: 60%;
}
 
.clip-wrap .clip-img,
.clip-wrap .clip-body {
    border: solid 2px rgb(var(--clip-border,0,0,0));
    background-color: rgb(var(--clip-bg, 244, 244, 244));
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    padding: 0.5rem;
}
 
.clip-wrap .clip-img::before,.clip-wrap .clip-img::after,
.clip-wrap .clip-body::before,.clip-wrap .clip-body::after {
    content:'';
    position: absolute;
    pointer-events: none;
    border: solid 0.25rem var(--color-darker);
    transform: rotate(25deg);
}
 
.clip-wrap .clip-img::before,.clip-wrap .clip-img::after {
    border: solid 0.25rem var(--color-darker);
}
 
.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
  right: 0.45rem;
  height: 36px;
  width: 9px;
  top: -0.45rem;
  border-radius: 0 0 2rem 2rem;
  border-top: none;
}
 
.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
    top: -24px;
    right: -0.5rem;
    height: 16px;
    width: 14px;
    border-radius: 2rem 2rem 0 0;
    border-bottom: solid 0.55rem transparent;
    z-index: -1;
}
 
.clip-wrap .clip-body img,
.clip-wrap .clip-img {
    border: 0.15rem solid var(--color-darkest);
  width: max-content;
}
 
.clip-wrap .clip-img::before {
  right: -0.2rem;
  top: -0.45rem;
}
 
.clip-wrap .clip-img::after {
    right: -0.8rem;
        height: 45px;
}
 
.clip-wrap .clip-img {
    padding: 0rem;
    border: 0.12rem solid var(--color-darkest);
    box-shadow:  0px 0px 0px 9px rgba(50,50,50, 0.1), 0px 0px 0px 12px rgba(150,150,150, 0.1);
}
 
@media (max-width: 500px) {
.clip-wrap{
     max-width: 100%;
}
.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
  right: 0.3rem;
  height: 1.4rem;
  width: 0.4rem;
  top: 0rem;
}
 
.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
    top: -1rem;
    right: -0.5rem;
    height: 1rem;
    width: 0.7rem;
}
}
 
/* ----------- 分割线 ------------ */
 
hr{
    margin: 1em 0em;
    padding-bottom: -1em;
    height: 0px;
    border-top: var(--color-hr) dashed 3.5px;
    color: transparent;
    background-color:  transparent;
}
 
.mz-hr{
    display: flex;
    flex-wrap: nowrap;
    flex-basis: 20%;
    width: 100%;
}
 
.hr-double hr{
    --color-hr: var(--color-dark);
    height:3px;
border-top: var(--color-hr) solid 3px;  
border-bottom: var(--color-hr) solid 3px;  
 
}
 
/* 缩减  */
 
blockquote hr,
div:is(.mz-cover, .yui-content, .mz-board, .mz-blockquote, .blockquote, .authorcontent) hr {
    border-top: var(--color-hr) solid 2px;
    margin: 1em 1.5em;
}
 
.mz-tt.tt-box hr{
  margin: 0.5rem  1rem;
    border-top:1px solid var(--color-hr);
}
 
/* 分割线框  */
.mz-hr.hr-contract  hr{
         margin: 1em 2em;
        border-block-width: 1px;
 
}
 
.mz-hr.hr-solid hr{
               border-style: solid;
}
 
.mz-hr.hr-dotted hr{
           border-style: dotted;
}
 
.mz-hr hr{
    flex-basis: 20%;
    flex-grow: 1;
    top: 1rem;
    position: relative;
}
 
.mz-hr tt sub{
    flex-basis: 0%;
    font-size: 0rem;
    top:0;
    bottom: 0;
}
 
.mz-hr  sub {
   font-size: inherit;
  position: relative;
top:0.3rem;
}
 
.mz-hr  tt sub:before {
    content: ' ';
margin: 1rem  0.8rem 0 0.8rem;
    font-size: 1.6rem;
      border-left:2px solid  var(--RATE-info_border);
    position: relative;
}
 
.mz-hr img{
    width: 2rem;
    margin: 0 0.2rem;
}
 
/* 分割线窄屏 */
@media (max-width: 500px){
.mz-hr  tt sub:before {
    content: ' ';
    margin: 0 0.3rem;
}
 
  hr{
    border-top: 2px dashed var(--color-hr);
 }
 
  .mz-hr{
    flex-wrap: nowrap;
  }
 
    .mz-hr .page-rate-widget-box{
    flex-shrink: 0;
  }
 
  .mz-hr p{
    flex-shrink: 1;
  }
     .mz-hr img{
    flex-shrink: 2;
  }
}
 
/* ----------- 插图 || IMAGE BOX ---------------- */
 
/* 无框 */
.mz-img-wrap .scp-image-block {
    margin: 0 0.5rem;
}
 
.mz-img-wrap .scp-image-block {
    border: none;
    box-shadow: none;
}
 
.mz-img-wrap .scp-image-block .scp-image-caption {
    background-color: transparent;
    border-top: none;
    padding: 0.8rem 0;
    font-size: 100%;
    font-weight: normal;
    letter-spacing: 1px;
}
 
/* 图片有框  */
.mz-img-wrap.img-frame img{
    border: 3px double #333;
}
 
.mz-img-wrap.img-frame .scp-image-caption{
    display: flex;
    flex: 100%;
}
 
.mz-img-wrap.img-frame .scp-image-caption:after,
.mz-img-wrap.img-frame .scp-image-caption:before{
   content: "";
    margin: auto auto auto 0.375rem;
    color: var(--color-navy);
    border-top: 0px double var(--accentColor);
    flex-shrink: 0;
    font-size: 2rem;
    position: relative;
    display: inline-flex;
    flex-grow: 1;
    height: 1rem;
    background-color: var(--dark-accent);
    justify-content:  flex-start;
}
 
.mz-img-wrap.img-frame.img-border img{
        border: 2px dotted #333;
}
 
/* 模块外框 */
.mz-img-wrap.img-border .scp-image-block {
        overflow: hidden;        
    padding: 1rem;
      background: linear-gradient(-45deg,transparent 15px,var(--mz-img-bg) 0) bottom right,
              linear-gradient(45deg,transparent 15px,var(--mz-img-bg) 0) bottom left,
              linear-gradient(135deg,transparent 15px,var(--mz-img-bg) 0) top left,
              linear-gradient(-135deg,transparent 15px,var(--mz-img-bg) 0) top right;
  background-size: 50% 51%;
  background-repeat: no-repeat;
    position:  inherit;
    filter:var(--box-line);
 
}
 
.img-border.img-paper .scp-image-block {      
    background: linear-gradient(-45deg,transparent 15px,var(--mz-paper-bg222) 0) bottom right,
               linear-gradient(45deg,transparent 15px,var(--mz-paper-bg222) 0) bottom left,
               linear-gradient(135deg,transparent 15px,var(--mz-paper-bg222) 0) top left,
               linear-gradient(-135deg,transparent 15px,var(--mz-paper-bg222) 0) top right;
}
 
/* 3d 边框  */
.mz-img-wrap.img-b3d .scp-image-block {
    border: #999 5px ridge;
}
 
.mz-img-wrap.img-b3d .scp-image-block .scp-image-caption {
    border-top: solid 3px #666;
}
 
/* 额外适应  */
.mz-img-wrap.img-tt .scp-image-caption{
    font-family: var(--page-tt-font), serif;
    font-size: 150%;
    letter-spacing: 1px;
}
 
/*
=====================================
更多效果 / MORE
=====================================
*/
 
/* ------------------------- 
内文标题 || Horizontally center title 
------------------------- */
 
#page-content  :is(.mz-tt.tt-box, .mz-tt333) h1{
    display: block;
    text-align: center;
}
 
.mz-tt{
    text-align:center;
    margin: var(--ttbox_margin);
}
 
.mz-tt h1 span{
     padding: 0 var(--mztt-h1pd-horiz);
}
 
.mz-tt h1:before{
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto auto auto 0.375rem;
color: var(--accentColor);
background-color: var(--dark-accent);   
}
 
/* -----------横跨标题其二 || Horizontally center title 2nd ----------- */
.mz-tt222 {
    border-top: 3px solid #6d6b82;
    border-bottom: 3px solid #6d6b82;
    padding:0 0.5rem;
    margin: 1rem 3em;
}
 
.mz-tt222:before,
.mz-tt222:after{
    content: ' ';
    border-top: 1.5px solid #6d6b82;
    margin: 0.1rem;
    text-align: center;
display: block;
}
 
#page-content  .mz-tt222 *{
    text-align: center;
    display: block;
}
 
/* -----------横跨标题其三 || Horizontally center title 3 ----------- */
 
.mz-tt333 *{
    margin: auto;
}
 
.mz-tt333:after{
    content: '  ';
    display: block;
    width:100%;
    border-bottom: 0.25em solid var(--PGtt-line_color)
}
 
/* --------------------------------- 
分栏 || Columns
---------------------------------  */
.mz-column p:first-of-type{
   margin: 0;  
}
 
.mz-column{
  -moz-column-count:2;
  -moz-column-rule:2px solid grey;
  -moz-column-gap:4rem;
  -webkit-column-count:2;     
  -webkit-column-rule:2px solid grey;
  -webkit-column-gap:4rem;
  column-count:2;     
  column-rule:2px solid grey;
  column-gap:4rem;
 
}
 
.mz-column.column-333{
      -moz-column-count:3;
      -webkit-column-count:3;    
      column-count:3;     
 
}
 
.mz-column.column-nip{
  -moz-column-rule:0px solid grey;
  -moz-column-gap:1.5rem;
 
   -webkit-column-rule:0px solid grey;
   -webkit-column-gap:1.5rem;
 
      column-rule:0px solid grey;
      column-gap:1.5rem;
}
 
.mz-column p:first-child{
  margin-top:0rem;
}
 
@media (max-width: 600px){
.mz-column.column-333, 
.mz-column{
  -moz-column-count:1;   
  -webkit-column-count:1;    
           column-count:1;    
  }
}
 
/* ---------------------------------------
 伪黑光盒 || Pseudo Blacklight box 
---------------------------------------- */
 
#page-content  .mz-tt.tt-box h1:after {
 content: " ";
 
    width: var(--ttbox_bevel-size);
    height:var(--ttbox_bevel-size);
 
    background: var(--ttbox_bevel-bg);
    color:var(--ttbox_bevel-color);
 
    position: absolute;
    font-size:var(--ttbox_bevel-size);
    margin-top:var(--ttbox_bevel-top);
    margin-left: var(--ttbox_bevel-left);
 
    z-index: -1;
       display: block;
}
 
#page-content  .mz-tt.tt-box h1:before{
    display: none;
}
 
#page-content  .mz-tt.tt-box h1{
    display: block;
    letter-spacing: 0.1rem;
    font-size:var(--ttbox_h1-size);
    background-color: var(--ttbox_h1-bg);
    border: solid var(--ttbox_border-size)  var(--ttbox_h1BDR-color);
    padding: var(--ttbox_padding);
    color:  var(--ttbox_h1-color);
    margin-left:  var(--ttbox_h1-left);
    max-width:  max-content;
}
 
.mz-tt.tt-box {
       background-color: var(--ttbox_box-bg);
  border: solid var(--ttbox_box-size)  var(--ttbox_boxBDR-color);
    padding: 0rem 0 1rem 0;
   position: relative;
   padding: var(--ttbox_padding);
    text-align: left;
}
 
.mz-tt.tt-box  h1:first-of-type {
    display: block;
    top:var(--ttbox_h1-top);
    position: relative;
}
 
.mz-tt.tt-box  h1:first-of-type + * {
    margin-top:var(--ttbox_h1-top);
}
 
.tt-box p{  
    padding:inherit 0.5rem;
}
 
@media (max-width: 600px){
#page-content .mz-tt.tt-box  h1 {
  font-size:130%;
}
}
 
/*=====================================
tab 分页
=====================================*/
 
/* ---- YUI TAB BASE ---- */
.yui-navset {
 
    margin: 0 0.1rem;
}
 
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{
    background-color:inherit;
    background-image:inherit
}
 
.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{
    background:inherit;
    text-decoration:inherit
}
 
.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{
    color:inherit;
    background:inherit;
}
 
.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{
    border-color:inherit
}
 
.yui-navset li{
    line-height:inherit;
    min-width: 15%;   
}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
    /* width: calc(100% - .05rem); */
     /*! margin: 0 auto; */
     border-color: var(--tabNAV-border);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
 
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: var(--tabNAV-bg);
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #d6d6d6;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--tabNAV-bg_HOV);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #d6d6d6;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--tabNAV-bg_SEL);
     color:var(--tabNAV-txt_SEL);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: var(--tabNAV-txt_SEL);
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color:var(--tabNAV-txt_ACT);
     background-color: var(--tabNAV-bg_ACT);
}
 .yui-navset .yui-content {
    background-color:var(--tabMain-bg);
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5rem;
     margin: var(--tab-margin);
     border: var(--tabMain-border) solid 1px;
          border-top: var(--tabMain-border) solid 4px;
}
 
.yui-navset .yui-nav{
     border: none ;  
          filter: drop-shadow(0px -1px 1px var(--tab-shadow));
}
 
.mz-tab .yui-navset{
     filter: drop-shadow(-1px 1px 0.5px var(--tab-shadow)) drop-shadow(1px 1px 0.5px var(--tab-shadow))
         drop-shadow(0px -1px 0.5px var(--tab-shadow)) drop-shadow(0px -1px 0.5px var(--tab-shadow) );
}
 
/* ---------------- 线条 ---------------- */
 
.mz-tab-line  .yui-navset .yui-nav{
    filter:none;
    background-color: var(--Line-tabNAV-border);  
    padding-left:var(--Line-tabBD-weight);
}
 
.mz-tab-line  .yui-navset .yui-nav li {
    margin-right:var(--Line-tabBD-weight);
   margin-top: var(--Line-tabBD-weight);
}
 
.mz-tab-line .yui-navset .yui-nav a,
.mz-tab-line .yui-navset .yui-navset-top .yui-nav a{
     background-color: var(--Line-tabNAV-bg);
    border-top: var(--Line-tabBD-weight) solid var(--Line-tabNAV-border);  
    color: var(--Line-tabNAV-txt);
}
 
.mz-tab-line .yui-navset .yui-nav a:hover,
.mz-tab-line .yui-navset .yui-nav a:focus{
     background-color: var(--Line-tabNAV-bg_HOV);
}
 
.mz-tab-line .yui-navset .yui-nav .selected,
.mz-tab-line  .yui-navset .yui-navset-top .yui-nav .selected{
     background-color: var(--Line-tabNAV-bg_SEL);
     color:var(--Line-tabNAV-txt_SEL);
}
 
 .mz-tab-line .mz-line .yui-navset .yui-nav .selected a{
     color: var(--Line-tabNAV-txt_SEL);
}
 .mz-tab-line .yui-navset .yui-nav .selected a:focus,
 .mz-tab-line .yui-navset .yui-nav .selected a:active{
     color:var(--Line-tabNAV-txt_ACT);
     background-color: var(--Line-tabNAV-bg_ACT);
}
 .mz-tab-line .yui-navset .yui-nav  a:hover,
 .mz-tab-line .yui-navset .yui-nav .selected a,
 .mz-tab-line .yui-navset .yui-nav .selected a:focus,
 .mz-tab-line .yui-navset .yui-nav .selected a:hover {
       color:var(--Line-tabNAV-txt_HOV);
     background-color: var(--Line-tabNAV-bg_HOV);
}
 
 .mz-tab-line .yui-navset .yui-nav .selected,
 .mz-tab-line .yui-navset .yui-navset-top .yui-nav .selected {
    background-color: var(--Line-tabNAV-bg_SEL);
    color: var(--Line-tabNAV-txt_SEL);
}
 
.mz-tab-line .yui-navset .yui-content {
    background-color:var(--Line-tabMain-bg);
}
 
.mz-tab-line .yui-navset .yui-content,
.mz-tab-line .yui-navset .yui-navset-top .yui-content{
     border: var(--Line-tabMain-border) solid var(--Line-tabBD-weight);
}
 
@media (max-width:520px){
  .mz-tab-line  .yui-navset .yui-nav{
    width:initial;
  }
}
 
/*=====================================
底栏
=====================================*/
 
.page-tags a{
    padding: 0.2rem 0.2rem;
    margin: 0 0.05rem;
}
 
.page-tags a:hover,
.page-watch-options a:hover:before,
#page-options-container  a:hover{  
 color: var(--SB-link_txt_HOV);
 background-color: var(--SB-link_bg_HOV);
    text-decoration: none;
}
 
/*========================
操作区
========================*/
 
/*------------------------
按钮
--------------------------*/
 
/* 通常 */
 
#action-area .btn:hover{
   text-decoration: none;
    cursor: pointer;
}
 
/* 关闭 */
 
a.action-area-close{
    height: 2em;
    margin-top: 0.5em;
    align-content: center;
    display: grid;
    background: var(--ACT-close_bg);
    border: 2px dotted var(--color-darker)
}
 
a.action-area-close:hover{
  --ACT-close_bg: var(--color-darkest);
 text-decoration: none;
  border: 2px solid var(--color-darker);
}
 
/* 勾选 */
 
.checkbox * {
    display: inline-flex;
    align-items: center;
}
 
#action-area input[type="checkbox"]{
    margin-left: 1em;
    background-color: transparent;
     width: 1rem;
    appearance: none;
    cursor:  pointer;   
}
 
#action-area  input[type="checkbox"]::before{
    content: "\f096";
    font-family: fontawesome;
    font-size: 150%;
}
 
#action-area input[type="checkbox"]:checked::before{
    content: "\f046";
}
 
/*----------------------------------
历史区（未完成）
------------------------------------*/
 
#history-form-1 .form tbody{
    display: flex;
    flex-wrap: wrap; 
}
 
#history-form-1 .form tbody td {
    width: var(--HISTORY-form_td_width);
    margin:var(--HISTORY-form_td_margin);
}
 
#history-form-1 .form tbody > tr td:last-child{
    display: inline-grid;
    grid-template-columns: var(--HISTORY-form_columns);
    grid-template-rows: auto auto;
    grid-gap: 0.25em 0rem;
    font-size: var(--HISTORY-btn_size);
    align-items: center;
    align-content: center;
    width: max-content;
    padding-right: 0
}
 
#history-form-1{
  display: grid;
  grid-template-areas:
 'left m11 right' 
 'left m22 right' 
  'left m33 right'     
 'under under  under';
      grid-template-columns:1fr auto 1fr;
      grid-template-rows:auto auto auto auto;
}
 
#history-form-1 .form {
    grid-area: m11;
    margin: 0;
    max-width: max-content;
}
 
#history-form-1 .buttons{
    position: relative;
     grid-area: m22; 
    text-align: right;
    margin: -1.8rem 0 0 0;
    padding: 0;
    width: max-content;
    justify-self: flex-end;
    font-size: var(--HISTORY-update_size);
 }
 
#revision-list{
    grid-area: under;
 
}
 
#history-form-1 #h-perpage{
    width: var(--HISTORY-perpage_width);
}
 
/*----------------------------------
编辑区
------------------------------------*/
 
/*--------------- 代码按钮 ---------------------*/
 
.wd-editor-toolbar-panel li.hseparator {
display: none;
}
 
.wd-editor-toolbar-panel {
   display: flex;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    margin: var(--EDIT-ui-panel_margin);
}
 
.wd-editor-toolbar-panel div {
   flex-basis: 100%;
   margin: 0.2rem 0;
   height: auto;
   display: flex;
}
 
.wd-editor-toolbar-panel div:nth-child(2) {
    order: 3;
}
 
.wd-editor-toolbar-panel div:nth-child(1) {
    order: 2;
}
 
.wd-editor-toolbar-panel div:nth-child(1):after {
   content: '\f096';
   width: var( --EDIT-ui_weight);
   display: inline-grid;
   margin: var(--EDIT-ui-btn_margin);
    justify-content :center;
    align-items: center;
}
 
.wd-editor-toolbar-panel ul li {
 margin: var(--EDIT-ui-btn_margin);
}
 
.wd-editor-toolbar-panel,
.wd-editor-toolbar-panel a ,
.wd-editor-toolbar-panel a:hover {
        background-image:none;
        font-family: var(--EDIT-ui_font);
        letter-spacing: 1px;
        text-decoration: none;
        font-size: var(--EDIT-ui_size-11);
}
 
.wd-editor-toolbar-panel ul li ul li a,
.wd-editor-toolbar-panel ul li a {
     height: var(--EDIT-ui_height);
     width: var(--EDIT-ui_weight);
     display: inline-grid;
     position: relative;
     background-color: var(--EDIT-ui_bg);
    text-align: center;   
}
 
.wd-editor-toolbar-panel a::before {
    content: "";
   display: inline-grid; 
    left: 0;
    top: 0; 
  height: var( --EDIT-ui_height);
  width: var( --EDIT-ui_weight);
    text-align: center;
    line-height: 1.5em;
    white-space: nowrap;
    z-index: 5;
    color:var(--EDIT-ui_color);
    align-content: center;
    justify-self: center;
    align-self: center;
}
 
.wd-editor-toolbar-panel a:hover {
    --EDIT-ui_color: var(--EDIT-ui_color_HOV);
    outline:var(--EDIT-ui_outline);
     -webkit-filter:brightness(90%);  
    filter: brightness(90%);  
    background-image: var(--hollow-image);
 }
 
/*---------- 引导 -----------*/
 
.wd-editor-toolbar-panel a[class*="wiz"]::after {
    content:"\f0d0";
    font-size: var(--EDIT-ui_size-99);
    justify-self:right;
    align-self: flex-end;
    opacity: 1;
    color:var(--EDIT-ui_color);  
    z-index: 6;
    transition:  opacity 0.5s;
    position: absolute;
}
 
.wd-editor-toolbar-panel a[class*="wiz"]::before {
     opacity:0.25 ;
     -webkit-text-stroke: 1px rgba(50,50,50,0.4);
        transition:  opacity 0.5s;
}
 
.wd-editor-toolbar-panel a[class*="wiz"]:hover::before {
     opacity:1 ;
        transition:  opacity 0.25s;
}
 
.wd-editor-toolbar-panel a[class*="wiz"]:hover::after {
    opacity: 0.25;
    transition:  opacity 0.25s;
}
 
/*---------- 次级框 -----------*/
.wd-editor-toolbar-panel li li a {
    --EDIT-ui_bg: var(--page-bg);
    outline:var(--EDIT-ui_outline);
    background-image: var(--hollow-image);
}
 
.wd-editor-toolbar-panel ul li ul:before {
    content: '▲';    
    position: relative;
    top:-1.3em;
    left: 1em;
    font-size: 0.65em;
    width: 0;
    height: 0;
    display: block;
    color: var(--EDIT-border_color); 
}
 
/*---------- 各项 -----------*/
 
.wd-editor-toolbar-panel ul {
  display: flex;
}
 
.wd-editor-toolbar-panel ul li ul a::before {
    content: "H";
    font-size: var(--EDIT-ui_size-sub);
    font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-h1::before{
    content: "H1";
    font-size: var(--EDIT-ui_size-11);
    font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-h2::before {
    content: "H2";
}
 
.wd-editor-toolbar-panel a.weditor-h3::before {
    content: "H3";
}
 
.wd-editor-toolbar-panel a.weditor-h4::before {
    content: "H4";
}
 
.wd-editor-toolbar-panel a.weditor-h5::before {
    content: "H5";
}
 
.wd-editor-toolbar-panel a.weditor-h6::before {
    content: "H6";
}
 
.wd-editor-toolbar-panel a.weditor-bold::before {
    content: "\f032";
}
 
.wd-editor-toolbar-panel a.weditor-italic::before {
    content: "\f033";
}
 
.wd-editor-toolbar-panel a.weditor-underline::before {
    content: "\f0cd";
}
 
.wd-editor-toolbar-panel a.weditor-strikethrough::before {
    content: "\f0cc";
}
 
.wd-editor-toolbar-panel a.weditor-teletype::before {
    content: "\f035";
}
 
.wd-editor-toolbar-panel a.weditor-quote::before {
    content: "\f10e";
}
 
.wd-editor-toolbar-panel a.weditor-superscript::before {
    content: "\f12b";
}
 
.wd-editor-toolbar-panel a.weditor-subscript::before {
    content: "\f12c";
}
 
.wd-editor-toolbar-panel a.weditor-raw::before {
    content: "\f070";
}
 
.wd-editor-toolbar-panel a.weditor-hr::before {
    content: "——";
    font-weight: 900;
}
 
.wd-editor-toolbar-panel a.weditor-div::before {
    content: "div";
    font-size: var(--EDIT-ui_size-33);
   font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-clearfloat::before {
    content: "\f0ec";
}
 
.wd-editor-toolbar-panel a.weditor-clearfloatleft::before {
    content: "\f177";
}
 
.wd-editor-toolbar-panel a.weditor-clearfloatright::before {
    content: "\f178";
}
 
.wd-editor-toolbar-panel a.weditor-table::before {
    content: "\f0ce";
}
 
.wd-editor-toolbar-panel a.weditor-toc::before {
    content: "toc";
    font-size: var(--EDIT-ui_size-33);
    font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-code::before,
.wd-editor-toolbar-panel a.weditor-codewiz::before  {
    content: "\003c\002f\003e";
    font-size: var(--EDIT-ui_size-33);
}
 
.wd-editor-toolbar-panel a.weditor-uri::before,
.wd-editor-toolbar-panel a.weditor-uriwiz::before {
    content: "\f0c6";
}
 
.wd-editor-toolbar-panel a.weditor-pagelink::before,
.wd-editor-toolbar-panel a.weditor-pagelinkwiz::before {
    content: "\f0c1";
}
 
.wd-editor-toolbar-panel a.weditor-image::before,
.wd-editor-toolbar-panel a.weditor-imagewiz::before {
    content: "\f03e";
}
 
.wd-editor-toolbar-panel a.weditor-html::before {
    content: "\f1c9";
}
 
.wd-editor-toolbar-panel a.weditor-numlist::before {
    content: "\f0cb";
}
 
.wd-editor-toolbar-panel a.weditor-bullist::before {
    content: "\f0ca";
}
 
.wd-editor-toolbar-panel a.weditor-incindent::before {
    content: "\f03c";
}
 
.wd-editor-toolbar-panel a.weditor-decindent::before {
    content: "\f03b";
}
 
.wd-editor-toolbar-panel a.weditor-deflist::before {
    content: "\f03a";
}
 
.wd-editor-toolbar-panel a.weditor-footnote::before {
    content:"\f0f6";
    transform:  rotateX(180deg);
    margin-top: 1px   
}
 
.wd-editor-toolbar-panel li:nth-child(6){
 order: 10
}
 
.wd-editor-toolbar-panel a.weditor-math::before {
    content: "√x";
        font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-mathinline::before {
    content: "x/2";
    font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-eqref::before {
    content: "Eq";
    font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-bib::before {
    content: "Bib";
    font-size: var(--EDIT-ui_size-33);
        font-weight: 600;
}
 
.wd-editor-toolbar-panel a.weditor-bibcite::before {
    content: "[n]";
    font-size: var(--EDIT-ui_size-22);
        font-weight: 600;
}
 
/*--------------- 编辑框 ---------------------*/
 
#edit-page-form tbody {
    width: 100%;
}
 
#edit-page-form .form {
    width: 100%;
    display: flex;
}
 
#edit-page-form  .form tr td:first-child{
    vertical-align:  middle;
    margin-bottom: 0.5rem;
    padding: 0;
    text-align: center;
}
 
 #edit-page-title,  
 #edit-page-textarea{
  max-width: var(--EDIT-table_width) !important;
  width: var(--EDIT-table_width) !important;
  }
 
#edit-page-form *::selection,
#edit-page-form *::-moz-selection {
     color: white;
    background:var(--color-darker);
}
 
#main-content textarea:focus,
#main-content input.text:focus{
    outline:var(--EDIT-ui_outline);
    background-color: var(--EDIT-box_bg_Foc);
}
 
#main-content textarea,
#main-content input.text {
      border: 2px solid var(--EDIT-border_color);
      background-color: var(--EDIT-box_bg);
      background-image: var(--hollow-image);
    -webkit-filter:brightness(95%);  
    filter: brightness(95%);  
    width: 100%;
    font-family: var(--EDIT-box_font);
}
 
#edit-page-title,
#edit-page-comments,
#edit-page-textarea{    
    line-height: 130%;
    padding: 5px 5px;   
    font-size: var(--EDIT-box_txt-size, 1.1rem);
    letter-spacing:0.5px;
}
 
/* 编辑框下小物件 */
.change-textarea-size {
  padding:var(--EDIT-box-btn_padding, 0 2.5rem);
}
 
.edit-help-34{
    display: var(--EDIT-help_display);
    grid-template-areas: 'a b''c d';
    margin-top: 0.5em;
 
}
 
.edit-help-34 a{
    font-family: var(--EDIT-help_font);
    letter-spacing: 0px;
        color: var(--color-paleblue);
        font-size: var(--EDIT-help_size, 0.9rem);
    font-weight: 400;
    letter-spacing:0.5px;
    margin-right:var(--EDIT-help_right, 0.5em);
}
 
.edit-help-34 a:first-child{
    grid-area: b;
}
 
.edit-help-34 a:last-child{
    grid-area: d;
}
 
.edit-help-34 a:before{
    content:"\f002";
    margin:0 0.2em 0 0.2em;
}
.edit-help-34 a:hover,
.edit-help-34 a:hover:before{
    text-decoration: none;
        color: var(--color-red);
}
 
/* ---------- 编辑补充信息 ---------- */
 
.edit-page-bottomtable{
   width:var(--EDIT-table_width);
}
 
.edit-page-bottomtable tbody td{
    line-height: 1.5rem;
}
 
.edit-page-bottomtable tbody tr {
    display: inline-grid;
    grid-gap: 0.5em 5%; 
    grid-template-columns: var(--EDIT-bottomtable_columns, 35% 60%);
    grid-template-rows: 50% 50%;
    margin-top:0.5em;
    align-items: center;
    width: 100%;
}
 
/*------------------ 修复保存卡死 || Fixed the saving box by W Asriel ------------------------- */
 
table.edit-page-bottomtable td {
  padding: 0 !important;
}
 
table.edit-page-bottomtable td:last-child {
   --lock-info_size:0.8rem;
    border: 2px dashed var(--color-grey-darkest) !important;
    background-color: var(--color-grey-pale) !important;
    border: 2px dashed var(--color-grey-darkest);
    width: 100%;
    order: var(--EDIT-bottomtable_tip-order, 0);
    padding: 0.3em 0.1em 0rem 0.5em !important;  
}
 
table.edit-page-bottomtable td div#lock-info {
    font-family: "Trebuchet MS";
    font-size: 0;
    background: none !important;
    border: none !important;
}
 
body[class="wait"] #odialog-shader-iframe,body[class="wait"] #odialog-shader {
    display:none!important
}
#odialog-container {
    position:fixed!important;
}
body[class="wait"] #odialog-container {
    z-index:-1
}
body[class="wait"] #odialog-container #owindow-1 {
    display:none!important
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area .edit-page-bottomtable td:last-child {
    background-color:rgb(var(--very-light-gray-monochrome,200,200,200)) !important;;
    border:2px solid rgb(var(--dark-gray-monochrome,0,0,0)) !important;
}
 
div#lock-info {
    content:var(--lock-info222);
    display:inline;
    font-size:var(--lock-info_size);
}
 
div#lock-info::before {
    content:var(--lock-info111);
    display:inline;
    font-size:var(--lock-info_size);
    white-space:pre-wrap
}
div#lock-info>strong {
    font-size:var(--lock-info_size);
}
div#lock-info>br {
    display:none
}
div#lock-info::after {
    content:var(--lock-info222);
    display:inline;
    font-size:var(--lock-info_size);
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::before {
    content:var(--lock-info333);
    display:inline;
    font-size:var(--lock-info_size);
    color:rgb(var(--gray-monochrome,33,33,33));
    white-space:pre-wrap
}
 
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size:0
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info>strong {
    font-size:0
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size:0
}
 
/* ---------- 编辑操作按钮 ---------- */
.mz-btn,
div.buttons input:not(.btn-sm) {
  font-family: var(--EDIT-btn_font);
    padding: 0.5rem;
    color: var(--color-darkgrey);
    border-radius:10px;
    background:var(--color-light);
    border: 2px double var(--color-dark);
    margin:var(--EDIT-btn_margin, 0 0.6rem 0.5rem 0rem) ;
}
 
.mz-btn:hover,
div.buttons input:not(.btn-sm):hover{
    filter: brightness(95%);
    background-image: var(--icon-noise); 
 
}
 
/* ===============================
页脚 
================================*/
 
#footer {
 display: inline-grid !important;     
 grid-template-areas: 
     '. left  right'
     '. under  under';   
 grid-template-columns: 1rem max-content auto 1rem;
     font-size: 0;
         width: 100%;
     padding: 2px 0;
     font-family:   "Trebuchet MS", 'Nanum Gothic', var(--mono-font);     
}
 
 #footer a{
     font-size: var(--FOOT_size);
}
 
 #footer a[href="http://www.wikidot.com"]{
    grid-area: left;
    width: max-content;
     display: var(--FOOT-wiki_display, block);
}
 
 #footer a[href="http://www.wikidot.com"]:before{
    content: "Powered by ";
     color: var(--FOOT-line_cl);
 
}
 
#footer .options :is(a:first-child, a:nth-child(2)) {
display:var(--FOOT-wiki_display, inline); 
}
 
#footer .options {
  grid-area:  var(--FOOT-options_area, right);
    order: 2;
    width: max-content;
    text-align: center;
    float: unset;
    justify-self: right
}
 
#footer .options a:not(:last-child):after {
    content: '|';
    margin: 0 0.5em;
    color: var(--FOOT-line_cl);
}
 
#license-area{
   background:var(--LICENSE_bg);
   font-size:var(--LICENSE_size);  
   color: var(--LICENSE_cl);
}
 
#license-area a{
    word-break:  keep-all;
    white-space:   pre-wrap;
    font-size:var(--LICENSE-link_size)
 
}
 
/* ===============================
最近发帖 
================================*/
 
.thread-container .post .long .head .title a {
  font-weight: bold;
  font-size:0.9em;
    width: 100%;
    padding-bottom: 0.2rem;
    display: block;
}
 
.thread-container .post .long .head .info {
    display: flex;
    flex-wrap:  wrap;
    font-size: 0;
}
 
.thread-container .post .long .head .info * {
    font-size: initial;
}
 
.thread-container .post .long .head .info br + a + a,
.thread-container .post .long .head .info br + a,
.thread-container .post .long .head .info .odate  {
   margin: 0 0.1rem;
}
 
.thread-container .post .long .head .info br {
  display: none;
}
 
.thread-container .post .long .head .info .printuser{
    display:  inline-flex;
    flex-wrap: nowrap;
     margin: 0;
    margin-right: 0.5rem;
}
 
.thread-container .post .long .head .info br + a ,
.thread-container .post .long .head .info br + a + a  {
    text-decoration: none;
    padding:0 0.2rem;
    border-bottom: 1px solid transparent;   
}
 
.thread-container .post .long .head .info br + a:hover ,
.thread-container .post .long .head .info br + a + a:hover  {
    border-color:var(--accentColor)
}
 
.thread-container .post .long .head .info br + a +  a  {
padding-left: 0;
}
 
.thread-container .post .long .head .info br + a + a:before {
   content: '▷';
    color:var(--POST_BDcolor);
   border-bottom: 1px solid transparent;
    border-color: var(--POST_hdbg);
    padding-right: 0.3rem;
}
 
/*=====================================
其他小组件 / OTHER
=====================================*/
 
/* ----------- 辑录  ----------------*/
 
.mz-mirror{
     -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
 
.mz-log-trigger{
  background-image: var(--mzlog-img);
  width: 2rem;
  height:auto;
  background-size: contain;
  background-repeat: no-repeat;
    background-position: center;
  margin: var(--mzlog-trigger-margin);
  cursor: help;
  margin: 0 0.1rem;
}
 
.mz-log-hovertip{
  position: absolute;
  z-index: -1;
  right:12%;
  max-width: 15rem;
  max-height:8rem;
  background-color: #ecebf0;
  background-color: var(--page-bg);
  padding:0.1rem 0.5rem;
  border: 4px double grey;
  opacity: 0;
        transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
 
.mz-log-trigger:hover + .mz-log-hovertip,
.mz-log-hovertip:hover{
  z-index: 1;
  opacity: 1;
        transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
 
.mz-log-content{
  margin-top:-0.5rem;
}
 
/* -----------窄屏隐藏----------------*/
 
@media (max-width: 520px) {
  .mob-hid{
     display:none;
  }
    .center-mg-mob{
       margin:0 auto;
   }
}
 
/* -----------悬浮目录----------------*/
 
.float-sticky{
  position: sticky;
   top: 0rem;
  right: 0;
 
}
 
.float-toc{
  float: right;
  position: absolute;
  right: -16rem;
}
 
@media (max-width: 1300px) {
.float-toc{
 display:none;
}
}
 
/*=====================================
调整其他组件 Modify the comportments
=====================================*/
 
/* ----------------- Author Label  -----------------------*/
 
#page-content .authorlink-wrapper {
 --swatch-tertiary-color:50,50,50,0.8;
  z-index: 0;
  margin-top: var(--author-top-adjust, 0rem);  
  margin-right: var(--author-right-adjust, 0.5em);
}
 
/* ----------------- Ayers' info tab  -----------------------*/
 
#main-content:has(.info-container) #page-title:before, 
#main-content:has(.info-container) #page-title:after {
    display: none   
}
 
.info-container {
  top:-1rem;
  position:relative;
}
 
/*  Anomaly Class Bar */
.w-cell > hr{
border-width: 2px;
border-color: transparent;
}
 
/*=====================================
外文站排版修复 fixed for other sites
=====================================*/
 
/* ---------- EN & ES ---------- */
.side-block.borradores + .side-block .menu-item:first-child,
.side-block.resources + div + .side-block .menu-item:first-child{
    display: inline-flex;
    font-size: var(--link-main-page);
    justify-content:  space-around;
    width: 100%;
    color: transparent;
    margin: auto;
    font-family:var(--page-tt-font);
    align-content: center;
    align-items: center;
}
 
.side-block.borradores + .side-block .menu-item:first-child a:before,
.side-block.resources + div + .side-block .menu-item:first-child a:before{
    display: inline-flex;
    content:"\f138";
    font-family: FontAwesome;
    align-items:center;
    padding-right: 0.6rem;
    font-size: 0.8em;
    color:var(--SB-link_txt);
}
 
.side-block.borradores + .side-block .menu-item:first-child a:hover:before,
.side-block.resources + div + .side-block .menu-item:first-child a:hover:before{
    color:var(--SB-link_txt_HOV);
}
 
/* -------- KO ---------- */
#side-bar:lang(ko) .menu-item :is(a[href="/"], a[href="/"] + div, a[href="/"] ~ a ) {
   font-size:var(--link-main-page);
   align-self: baseline;
}
 
/* ---------- VN ---------- */
#side-bar:lang(vi) .side-block a:is(.collapsible-block-link):before {
    display: none;
}
 
/* ---------- INT ---------- */
 
#content-wrap:lang(en){
  --SEARCH_top_MOB:0rem;  
  --ct_bg_open-menu-button:none; 
  --ct_col_m_sidebar-bg:transprent;
  --ct_brd_m_sidebar-right:transprent;
  --ct_bg_sidebar-item-main:none;
  --ct_bg_sidebar-item-default:none;
  --ct_bg_sidebar-item-home:none;
  --ct_bg_sidebar-collapse:none;
  --ct_bg_sidebar-expand:none;
  --ct_col_rate-primary:transparent;
}
 
 #side-bar .side-bar-container {
  padding:0;
  width: 100%;
  overflow: unset;
}
 
#side-bar .side-bar-container .menu-item.home a{
    font-family: var(--page-tt-font);
}
 
#side-bar .side-bar-container .hover {
  color: var(--color-darkred);
}
 
#side-bar .side-bar-container .menu-item {
    padding: 0;
    margin: 0;
}
 
#side-bar .side-bar-container .menu-item p::before{
    display: none;
}
 
#side-bar .side-bar-container  .collapsible-block-link::before{
    display: unset;
    color: var(--SB-fold_color);
    margin:0;
    margin-bottom: 2rem;
}
 
#side-bar .side-bar-container .scpnet-interwiki-frame{
    min-height: 10rem;
    width: auto;
    max-width: auto;
}
 
.scpnet-interwiki-wrapper{
    margin-left: 0;
    margin:0 -0.5rem ;
    width: auto;
}
 
.page-rate-widget-box:lang(en) span a{
  --ct_col_rate-primary:var(--RATE-btn_color);
}

/*
=====================================
    Magazine Theme
----------------------------------
    Interwiki Source
=====================================
*/
 
:root{
    --color-grey: #ecebf0;
    --accentColor: #613339;
    --color-light: #e8e8e8;
    --color-navy: rgb(20,21,39);
}
 
#interwiki .side-block img {
 filter: hue-rotate(220deg);
 -webkit-filter: hue-rotate(220deg);
}
 
#interwiki div.side-block:nth-child(4) > div:nth-child(1) > div:nth-child(1) img {
 filter: none;
 -webkit-filter: none;
}
 
#interwiki .side-block {
 border: solid 1px var(--accentColor);;
 border-radius: 0px;
 background: var(--color-light);
 box-shadow: none;
}
 
#interwiki .side-block .heading {
    margin-top: 0;
 padding-left: 5px;
 padding-top: 3px;
 height: 18px;
 color:var(--color-grey);
 background-color: var(--accentColor);
 background-size: cover;
 text-align: center;
}
 
#interwiki .side-block div.menu-item a:visited,
#interwiki .side-block div.menu-item a {
 color: var(--accentColor);
}
 
@media screen and (max-width: 230px){
    #interwiki .side-block {
        background: none;
        border: none;
  } 
#interwiki  .side-block div.menu-item a:visited,
#interwiki  .side-block div.menu-item a {
      color: var(--color-navy);
  }
}

/*=====================================
    Magazine Theme
----------------------------------
    Extensions Source
=====================================*/
 
@import url(https://scp-wiki.wikidot.com/local--files/theme:magazine/IMG-source_base64.css);
 
:root{
--img-chew444: var(--MASK-chew222);
}
 
/* ==================
笔记本组件
====================*/
 
:root{
 --color-notepage: var(--color-light);
 --NOTEBOOK-bookmark_color:var(--color-dark);
  --color-header-footer:var(--color-notepage);
 
 --cl-a1:235,235,225,1;
  --cl-a2:222,210,220,1;
  --cl-a3:210,200,195,1;
  --cl-a4:25,25,25,1;
   --page-color:#f3f3f3;
 
/* 书本厚度描框 */
--box-bk-0:0.0625rem 0.0625rem 0 rgba(var(--cl-a1)), 0.125rem 0.125rem 0 rgba(var(--cl-a2)), 0.1875rem 0.1875rem 0 rgba(var(--cl-a2)), 0.25rem 0.25rem 0 rgba(var(--cl-a3)), 0.3125rem 0.3125rem 0 rgba(var(--cl-a2)), 0.375rem 0.375rem 0 rgba(var(--cl-a2)), 0.4375rem 0.4375rem 0 rgba(var(--cl-a2)), 0.8rem 0.8rem 0 rgba(var(--cl-a4));
/* 书籍拱起描边 */ 
  --NOTE-book-arch:drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4)));
 
/**/    
 
  --NOTEPAGE-txt_size: 1.1rem; 
  --NOTEPAGE-p_padding-top:0em;  
 
    --NOTEPAGE-line_size: 1.5em;
 
    --NOTEPAGE-line-height: 1.5em; 
    --NOTEPAGE-line-height_half: calc(var(--NOTEPAGE-line-height) / 2);
    --NOTEPAGE-line-height_half-OPS: calc( 0em -  var(--NOTEPAGE-line-height_half));
--color-rowline: #c0c0c0;
 
    --NOTEPAGE-side_width: 1rem;
   --NOTEPAGE-side_height: 100%; 
    --NOTEPAGE-txt_border-size: 0;
 
    --MASK-chew_repeat: repeat;
    --MASK-chew_size:100%;
 
    /* 小 */
    --NOTE-quote_bg:#e9e8e0;
    --NOTE-quote_line: var(--NOTE-quote_bg);
    --NOTE-quote_width:2em;
    --NOTE-quote_shadow: drop-shadow(1px 1px 2px rgba(11,11,11,0.5)); 
 
    --NOTE-quote_bg-size:  calc(var(--NOTEPAGE-line_size) * 1.4) calc(var(--NOTEPAGE-line_size) * 1.4);
     --NOTE-quote_height:100%;
     --NOTE-quote-side_position: 0 0.5em;
    --NOTE-quote-side_clip: inset(0 0 0 25%);
     --NOTE-quote_padding_lr: 0.5em; 
     --NOTE-quote_padding: var(--NOTEPAGE-line-height_half) var( --NOTE-quote_padding_lr); 
 
    /* 书缝 */
        --NOTE-bookseam_bg: 55,55,55;
     --NOTE-bookseam_width: 2rem;
    --NOTE-bookseam_width-half: -1rem;
 
}
 
@media (max-width: 550px) {    
   .notebook-body, .notepage-body{
     --NOTEPAGE-txt_size: 0.9rem; 
     --NOTE-bookmark_display:none;
     --NOTE-bookseam_display:none;
    }  
 
    .mz-notebook-wrap {        
    --NOTEBOOK-grid:'left' 'right';
    --NOTEBOOK-grid-columns:auto;
    --NOTEBOOK-mid_display:none;
    --NOTEBOOK-bookmark_display:none;    
    --box-bk-0:none;
     --NOTEPAGE-side_width: 0.6rem;
     --NOTEBOOK_padding:0 0 1em 0;
        --NOTEBOOK_border:3px solid #bbb;
    }
 
    .notebook-right{
        --NOTEBOOK-bookmark_display:none;
        margin-top: calc( 0em - var(--NOTEPAGE-line-height) / 2);
    }
 
}
 
/*---------------------------
整本
--------------------------*/
 
.notebook-body{   
    display:grid;
     grid-template-areas:  var(--NOTEBOOK-grid,'left mid right');
    grid-template-columns: var(--NOTEBOOK-grid-columns, 50% auto 50%);
 
    -moz-box-shadow:  var(--box-bk-0);
    -webkit-box-shadow: var(--box-bk-0);
    -o-box-shadow: var(--box-bk-0);
    -ms-box-shadow: var(--box-bk-0);
    box-shadow: var(--box-bk-0);
    background-color: #f3f3f3;
    background-color: var(--page-color);
    border:var(--NOTEBOOK_border, 1px solid #cccccc); 
    background-color: var(--color-notepage);
    padding: var(--NOTEBOOK_padding, 0);
}
 
.notebook-left{
    grid-area: left;
}
 
.notebook-mid{
    grid-area: mid;
    width: 0.15em;
    height: 100%;
    background-color: var(--color-dark);
    display: var(--NOTEBOOK-mid_display, inline-grid);
    grid-template-rows: 100% 0%;
}
 
.notebook-right{
    grid-area: right;
}
 
.notebook-body .notepage-main{
   margin: 0 var(--NOTEPAGE-side_width) var(--NOTEPAGE-side_width) var(--NOTEPAGE-side_width); 
    height: 100%;
    width: calc(100% - var(--NOTEPAGE-side_width) * 2 );
    align-self: flex-start;
    align-items: flex-start;
    align-content: flex-start
}
 
.notebook-mid:before{
     content: ' ';
    display: inline-grid;     
}
 
.notebook-mid:after{
   content: '▲';
    display: inline-grid;
    position: relative;
    width: 0rem;
    height: 0rem;
    left:-0.55rem;
    bottom:-0.4rem;
   color: var(--page-bg);
    font-size: 1.2rem;
    line-height: 0;
 
   -webkit-filter: var(--NOTE-book-arch);
    filter: var(--NOTE-book-arch);  
}
 
.mz-notebook-wrap .notebook-body:before{
    content: "";
    display:  var(--NOTE-bookseam_display, inline-grid);
    grid-area: right;
    width: var(--NOTE-bookseam_width);
    margin-left: var(--NOTE-bookseam_width-half);
    position: relative;
    background-image: linear-gradient(to left,transparent 0%, transparent 20%, rgba(var(--NOTE-bookseam_bg),0.1) 40%, rgba(var(--NOTE-bookseam_bg),0.2) 50%, rgba(var(--NOTE-bookseam_bg),0.1) 60%, transparent 80%, transparent 100%);
}
 
.notebook-noseam{
    --NOTE-bookseam_display:none;
}
 
/*---------- 书签 --------------*/
.notebook-bookmark{
    display:grid;
    grid-template-areas: 'mid ';
}
 
.notebook-bookmark:before{
    grid-area: mid;
    content: ' ';
    display:var(--NOTEBOOK-bookmark_display,block);
    position: relative;
    width: var(--NOTEBOOK-bookmark_width, 1.2rem);
    height:var(--NOTEBOOK-bookmark_height, 20rem);
    max-height: 40%; 
    background-color: var(--NOTEBOOK-bookmark_color);
    margin-top: -1px;
    margin-left:var(--NOTEBOOK-bookmark_left, 90%);
    z-index: 2;
 
-webkit-clip-path:var(--NOTEBOOK-bookmark-clip);
clip-path: var(--NOTEBOOK-bookmark-clip);
 
    --NOTEBOOK-bookmark-clip:polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 100%);
 
}
 
/*---------------------------
单页与边缘
--------------------------*/
 
.mz-notepage-wrap{
    width: 100%;
    margin: 0 auto;
   -webkit-filter:drop-shadow(1px 2px 2px #333);
    filter: drop-shadow(1px 2px 2px #333);
    height: auto;
}
 
.notepage-body{
 display: inline-grid;
    grid-template-areas:
        'header header header'
        'left top  right'
        'left mid right'
        'left bottom right'
        'footer footer footer';
    grid-gap: 0;
 
}
 
.notepage-body:before,
.notepage-body:after{
        content: ' ';
    width: var(--NOTEPAGE-side_width);
    height: var(--NOTEPAGE-side_height); 
    -webkit-mask-position: left;
            mask-position: top;
     -webkit-mask-repeat:var(--MASK-chew_repeat);
         mask-repeat: var(--MASK-chew_repeat);
     -webkit-mask-size: var(--MASK-chew_size);
         mask-size:var(--MASK-chew_size);
            background-color: var(--color-notepage);
}
 
.notepage-body:before{
    grid-area: var(--NOTEPAGE-before_area,left);  
    -webkit-mask-image:var(--MASK-chew-before);
            mask-image:var(--MASK-chew-before);
    margin: var(--MASK-chew-before_margin);
    display: var(--NOTEPAGE-before_display, inherit);  
}
 
.notepage-body:after{
    grid-area:var(--NOTEPAGE-after_area,right);  
            -webkit-mask-image:var(--MASK-chew-after);
            mask-image:var(--MASK-chew-after);
        margin: var(--MASK-chew-after_margin);
    display: var(--NOTEPAGE-after_display, inherit);  
}
 
.mz-notepage-wrap :is(.blockquote, blockquote):before{
    content: " ";
    display: block;
    position: absolute; 
    margin:-2.5em 0em 0 -0.5em;
    width: 1.5em;
    height: 6em;
    background: var(--NOTE-tap_bg, rgba(55,55,55,0.1));
    transform: rotate(45deg);
    border: var(--NOTE-tap_bd, rgba(33,33,33,0.4) solid 1.5px);
}
 
/* 撕痕 */
.chew-left .notepage-body:before{
   --MASK-chew-before: var(--MASK-chew);
    --NOTEPAGE-before_display:inline-grid;
}
 
.chew-right .notepage-body:after{
   --MASK-chew-after: var(--MASK-chew);
   --NOTEPAGE-after_display:inline-grid;
   -webkit-transform:scale(-1);
    transform: scale(-1);
}
 
.chew-bottom,
.chew-top{
    --NOTEPAGE-txt_border-size:0.8em;
    --NOTEPAGE-before_area:header;
    --NOTEPAGE-after_area:footer;
    --NOTEPAGE-side_width: 100%;
   --NOTEPAGE-side_height: 1rem; 
     --MASK-chew_repeat: repeat-x;
    --MASK-chew_size:14rem;
    --NOTEPAGE-before_display:none;
    --NOTEPAGE-after_display:none;
    --NOTEPAGE-header_font-size:0;
    --NOTEPAGE-footer_font-size:0; 
 
    --NOTE-quote_width:100%;
    --NOTE-quote_bg-size:3em;
    --NOTE-quote_height:3em;
     --NOTE-quote-side_clip:inset(0 0 25% 0);
   --NOTE-quote-side_position: 0em 0;
  --NOTE-quote-side_repeat:repeat-x;
}
 
.chew-top {
        --NOTEPAGE-before_display:inline-grid;
        --MASK-chew-before_margin:0px 0 -1px 0;
        --NOTEPAGE-footer_font-size:0.8em;
        --NOTEPAGE-header_display:none;
 
}
 
.chew-bottom {
     --MASK-chew-after_margin: -1px 0 0 0;  
    --NOTEPAGE-after_display:inline-grid;
    --NOTEPAGE-header_font-size:1.5em;
}
 
.chew-bottom .notepage-body:after{
    --MASK-chew-after: var(--MASK-chew222);
}
 
.chew-top .notepage-body:before{
    --MASK-chew-before: var(--MASK-chew222);
    transform: scaleY(-1);
}
 
/*---------- 头尾 --------------*/
 
.notepage-header{
    grid-area: top;  
    min-height:var(--NOTEPAGE-header_min-height, 1.5rem);
    height: var(--NOTEPAGE-header_height);
    background-color:var(--color-header-footer);
    display: var(--NOTEPAGE-header_display, inherit);  
      font-size: var(--NOTEPAGE-header_font-size, inherit);    
}
 
.notepage-footer{
    grid-area: bottom; 
    min-height:var(--NOTEPAGE-footer_min-height, 1.5rem);
    height: var(--NOTEPAGE-footer_height);    
    width: 100%;
    background-color: var(--color-header-footer);
    display: var(--NOTEPAGE-footer_display, inherit);  
    font-size: var(--NOTEPAGE-footer_font-size, inherit);  
}
 
/*---------- 正文 --------------*/
.notepage-main:before, .notepage-main:after{
  content: ' ';    
    height: 100%;
}
.notepage-main{
    grid-area: mid;   
    display: var(--NOTE-main_display, inline-grid);
  --NOTEPAGE-rowline :linear-gradient(to top ,var(--color-rowline) 0em, var(--color-rowline) 0.05em, transparent 0.06em, transparent 0.16em,#c0c0c0 0.17em, var(--color-rowline) 0.22em, transparent 0.25em,transparent 100%);
  --NOTEPAGE-rowline_single:linear-gradient(to top , var(--color-rowline) 0em,  var(--color-rowline) 0.12em, transparent 0.15em); 
}
 
.notepage-main :is(.blockquote, blockquote),
.notepage-main{
    white-space:normal;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-repeat: repeat;
    background-position: 0rem 0;
    background-size: 100% var(--NOTEPAGE-line_size);
    background-image: var(--NOTEPAGE-rowline);
    background-color: var(--color-notepage);
    padding-top: var(--NOTEPAGE-p_padding-top);
    border-left: var(--NOTEPAGE-txt_border-size)  var(--color-notepage) solid;
    border-right: var(--NOTEPAGE-txt_border-size)   var(--color-notepage) solid;
    color:var(--color-bookpage-txt, inherit);
            font-size: var(--NOTEPAGE-txt_size); 
}
 
#page-content .notepage-main p{
        font-size: var(--NOTEPAGE-txt_size);
        line-height: var(--NOTEPAGE-line-height); 
        padding:var(--NOTEPAGE-txt_padding, 0 0.5em);
        margin-top: var(--NOTEPAGE-line-height);
  margin-bottom: 0
}
 
/*-------------- 洞洞书页 ------------------*/
.mz-notequote-wrap{
     --NOTE-quote_line: var(--color-grey-darkest);
    --NOTEPAGE-footer_display:inline-grid;
    --color-header-footer: var(--NOTE-quote_bg);
    --NOTEPAGE-header_min-height:1.2em;
    --NOTEPAGE-footer_min-height:1.2em;
        --NOTEPAGE-before_display:none;
        --NOTEPAGE-after_display:none;
   --MASK-chew: none;
    --MASK-chew222:none;
    --page-color:red;
 
}
 
.mz-notequote-wrap .notepage-main,
.notepage-main :is(.blockquote, blockquote){
    background-color:  var(--NOTE-quote_bg);
   background-image: linear-gradient(to top ,var(--NOTE-quote_line) 0%, var(--NOTE-quote_bg) 10%);        
    border: 0;
    margin-top: var(--NOTEPAGE-line-height);
    margin-bottom: 0;
    background-position: 0 var(--NOTEPAGE-line-height_half);
    padding: var(--NOTE-quote_padding);
    -webkit-filter: var(--NOTE-quote_shadow);
            filter: var(--NOTE-quote_shadow);
}
 
.mz-notequote-wrap .notepage-body:before,
.mz-notequote-wrap .notepage-body:after,
.mz-notequote-wrap :is(.blockquote, blockquote):before{
   content: '  ';
    width:var(--NOTE-quote_width);
    height: var(--NOTE-quote_height);
    margin: var(--NOTEPAGE-line-height_half-OPS) 0  var(--NOTEPAGE-line-height_half-OPS) var(--NOTE-quote_margin-left);
    position: relative;
    float: left;
    background-image: radial-gradient(transparent 38%,var(--NOTE-quote_bg) 41%); /* 标准的语法（必须放在最后） */
     background-size:var( --NOTE-quote_bg-size);
     background-position: var( --NOTE-quote-side_position);
    background-repeat: var( --NOTE-quote-side_repeat); 
}
 
.notepage-main :is(.blockquote, blockquote){
    --NOTE-quote_width:var(--NOTE-inerquote_width, 1.5em);
    --NOTE-quote_height: calc(100% + var(--NOTEPAGE-line-height_half) * 2);
    --NOTE-quote_bg-size:var( --NOTE-quote_width) var( --NOTE-quote_width);
    --NOTE-quote-side_repeat:repeat-y;
    --NOTEPAGE-txt_padding:0;
     --NOTE-quote-side_position:auto;
    --NOTE-quote_margin-left: calc(0em - var(--NOTE-quote_width) - var(--NOTE-quote_padding_lr) );  
}
 
.mz-notequote-wrap .notepage-main {
            margin-top: 0;
    -webkit-filter: none;
            filter: none;   
}
 
.mz-notequote-wrap .notepage-body{
        -webkit-filter: var(--NOTE-quote_shadow);
          filter: var(--NOTE-quote_shadow);
}
 
.mz-notequote-wrap .notepage-body:before,
.mz-notequote-wrap .notepage-body:after{
    margin: 0    ;
    float: none;
    font-size: var(--NOTEPAGE-txt_size); 
    background-color: transparent;
-webkit-clip-path:  var(--NOTE-quote-side_clip);
clip-path: var(--NOTE-quote-side_clip);
}
 
.mz-notequote-wrap .notepage-body:before{
    display: var(--NOTEPAGE-before_display, inline-grid);
}
.mz-notequote-wrap .notepage-body:after{
    display: var(--NOTEPAGE-after_display, inline-grid);
}
/*------------ 其他 --------------*/
 
#page-content .notepage-main :is(.blockquote, blockquote) p{
   margin: 0;
}
 
.notepage-main hr{
    border: none;
    height:  1px;
    margin: 0 auto;
    position: relative;
    top: 0.5em;
    box-shadow: 0 0.2em 0px 1px var(--color-dark);
    width: 90%;  
}
 
.notepage-main .mz-note :is(.blockquote, blockquote){
    -webkit-filter: none;
    filter: none;
    background-image: none;
    background-color: var(--QUOTE_bg222);
    border: 2px dashed var(--QUOTE_border);
    margin-top: 0
}
 
.notepage-main ul{
    margin: 0;
}
.notepage-main ul li{
    line-height: var(--NOTEPAGE-line-height);  
}
/*------------ 扩展 --------------*/
 
.rowline-single .notepage-main, .notepage-main.rowline-single{
        background-image: var(--NOTEPAGE-rowline_single);  
}
 
.rowline-none, .rowline-none *{
        background-image: none;  
}
 
 /* ====================
对话框
===================== */
 
.mz-talking-wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
 /* 变量 */
    --tk-img-width:5rem;
    --tk-img-heigh:var(--tk-img-width);
    --tk-img-margin:0rem 1.2rem;
    --tk-img-left:var(--icon-scp);
    --tk-img-right:var(--icon-magazine);
    --tk-delta-width:0.5rem;
    --tk-delta-width:0.5rem;
    --tk-box-bg: var(--page-bg);
    --tk-txt-padd:1rem;
    --tk-delta-size:2rem;
    --tk-delta-horiz: -0.5rem; /* 似乎低配版chrome无法用负数margin实现该功能*/
    --tk-delta-verti: -1rem;
    --tk-delta-path: polygon(50% 0, 100% 0, 100% 50%, 0 100%);
    --tk-bd-weight:1px;
    --tk-bdops-weight:-1px;
    --tk-img-out:calc(var(--tk-img-heigh) * -0.8);
    --tk-img-out-ops:calc(var(--tk-img-out) * -1);
 
    --line-border-shadow:
        drop-shadow(var(--tk-bd-weight) 0px 0px var(--shadow-line)) drop-shadow(0px var(--tk-bd-weight) 0px var(--shadow-line)) 
        drop-shadow(var(--tk-bdops-weight) 0px 0px var(--shadow-line)) drop-shadow(0px var(--tk-bdops-weight) 0px var(--shadow-line));  /* 放这里让变量可以直接在style中修改 */ 
}
 
.mz-talking-wrap :is(.talking-left,.talking-right){
    display: inline-flex;
    width: 100%;
    margin-bottom: var(--tk-delta-size);
}
 
.talking-img{
    margin: var(--tk-img-margin);
    min-height: var(--tk-img-heigh);
    min-width:  var(--tk-img-width);
    background-image: var(--tk-img-left);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;  
}
 
.talking-right .talking-img{
    background-image: var(--tk-img-right);
}
 
.mz-talking-wrap .talking-img.no-image, 
.mz-talking-wrap .no-image .talking-img,
.mz-talking-wrap.no-image  .talking-img{
    background-image: none;
}
 
.talking-box p:first-child{
    margin: 0;
}
 
#page-content .talking-box{
        max-width: 40%;
}
 
.talking-box{
    display:flex;
    flex-wrap: wrap;
    max-width: 60%;
    padding:var(--tk-txt-padd);
    background-color: var(--tk-box-bg);  
    -webkit-filter: var(--line-border-shadow);
    filter: var(--line-border-shadow);
    align-self:   center;
}
 
.talking-box::after,
.talking-box:before{
   content: ' ';
   width: var(--tk-delta-size);
   height: var(--tk-delta-size);
   display: inline-flex;
   position: absolute;
    align-self: end;   
    background-repeat: no-repeat;
 
   background-color: inherit;
  -webkit-clip-path:var(--tk-delta-path);
    clip-path: var(--tk-delta-path);
    z-index: -1;
 
    left: var(--tk-delta-horiz);
    bottom:var(--tk-delta-verti);
}
 
.talking-box::after{
    display: none ;
}
 
.talking-right, .talking-right .talking-box{
    flex-direction: row-reverse;
}
 
.talking-right, .talking-right .talking-box p{
   text-align: left;
    flex-basis: 100%;
}
 
.talking-right .talking-box:before, 
.talking-right .talking-box:after{
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    left: unset;
    right: var(--tk-delta-horiz);
}
 
.talking-center{
    margin: 0 auto;
    display:flex;
    align-items:  center;
}
 
.talking-center *{
    margin: 0 0.2rem;
}
 
/*------ 手机 -------*/
 
@media (max-width: 500px) {
    .talking-img{
        display: none;
    }
 
    .mz-talking-wrap div:is(.talkimg-upper, .talkimg-below){
        margin: 0 0 var(--tk-delta-size) 0;
    }
 
   #page-content .talking-box{
        max-width: 80%;
   }
}
 
/* 方向 */
.talking-box.talkbox-righttop:before,
.talking-box.talkbox-lefttop:before, 
.talking-box.talkbox-righttop:after,
.talking-box.talkbox-lefttop:after {
     align-self: start;
 
    right: var(--tk-delta-horiz);
    top:var(--tk-delta-verti);
    bottom:unset;
 
     -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
}
 
.talking-box.talkbox-righttop:before,
.talking-box.talkbox-righttop:after{
   -moz-transform:scale(-1,-1);
    -webkit-transform:scale(-1,-1);
    -o-transform:scale(-1,-1);
     transform:scale(-1,-1);
 
    left:unset;
    right: var(--tk-delta-horiz);
    top:var(--tk-delta-verti);
    bottom:unset;
}
 
.talkbox-inby{
     align-self: start;
}
 
.talkbox-inby::before,
.talkbox-inby::after {
       -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
 
    left: var(--tk-delta-verti);
    bottom:0;
}
 
.talkbox-inby.talkbox-lefttop::before,
.talkbox-inby.talkbox-lefttop::after{
     transform:scaleY(1);
    left:var(--tk-delta-verti);
    right: unset;
    top:0;
    bottom:unset;
}
 
.talking-right .talkbox-inby::before, 
.talking-right .talkbox-inby::after{
    -moz-transform:scale(-1);
    -webkit-transform:scale(-1);
    -o-transform:scale(-1);
   transform:scale(-1);
    left:unset;
    right:var(--tk-delta-verti);
    top:unset;
    bottom:0;
}
 
.talkbox-inby.talkbox-righttop::before,
.talkbox-inby.talkbox-righttop::after {
   -moz-transform:scale(-1,1);
    -webkit-transform:scale(-1,1);
    -o-transform:scale(-1,1);
        transform:scale(-1,1);
    left:unset;
    right:var(--tk-delta-verti);
    top:0;
    bottom:unset;
}
 
/* 内折 */
.talkbox-round.talkbox-inby{
   --tk-delta-verti: var(--tk-delta-horiz)
}
 
/*------ 自定义 -------*/
 
.talkbox-round{
    border-radius:40px;
}
 
.talkbox-dark, div:is(.talking-box:before, .talking-box:after) {
   background-color: var(--shadow-line);
   color: var(--page-bg);
}
 
.talkbox-doubleline{
    -webkit-filter: var(--RATE-btn_filter);
    filter: var(--RATE-btn_filter);
}
 
/* 图片位置 */
.mz-talking-wrap .talkimg-below {
    margin-bottom: var(--tk-img-out-ops);
}
.mz-talking-wrap .talkimg-upper {
    margin-top: var(--tk-img-out-ops);
}
 
.talkimg-below .talking-img{
    background-position: bottom center;
    position: relative;
    bottom: var(--tk-img-out);
}
 
.talkimg-upper .talking-img{
    background-position: top center;
    position: relative;
    top: var(--tk-img-out);
}
 
/* 思考气泡 */
.talkbox-bubles.talking-box {
    margin-bottom: 1.5rem 
}
 
.talkbox-bubles.talking-box::after {
display: block;
}
 
.talkbox-bubles.talking-box::before,
.talkbox-bubles.talking-box::after{
 --tk-delta-path: polygon(0 74%, 41% 74%, 41% 100%, 0 100%);
}
 
.talkbox-bubles.talking-box::before {
    --tk-delta-path:polygon(0 65%, 40% 65%, 39% 100%, 0 100%);
    --tk-delta-size:3rem;
    --tk-delta-horiz: -0.5rem;
    --tk-delta-verti: -1rem;
}
 
.talkbox-bubles.talking-box::after {
    --tk-delta-path:polygon(0 65%, 40% 65%, 39% 100%, 0 100%);
    --tk-delta-size:2rem;
    --tk-delta-horiz: -1.2rem;
    --tk-delta-verti: -2rem;
}
 
.talkbox-round.talkbox-bubles.talking-box::before {
    --tk-delta-path:circle(28% at 50% 50%);
}
 
.talkbox-round.talkbox-bubles.talking-box::after {
    --tk-delta-path:circle(20% at 50% 50%);
}
 
 /* ====================
翻页
===================== */
 
.mz-tab .yui-navset{
     filter: drop-shadow(-1px 0px 1px var(--tab-shadow)) drop-shadow(1px 1px 1px var(--tab-shadow));
}
 
.mz-tab  .yui-navset .yui-content {
    border: none;
    border-top: solid 4px var(--accentColor);
    color:  var(--tabMain-txt);
    background-color: var(--tabMain-bg);
    display: flex;
flex-wrap:wrap;
 
}
 
.mz-tab  .yui-navset .yui-content div[id*="wiki-tab"]{
    width: 100%;
    margin: 0 -0.2rem 0 -0.2rem;
    padding: 1rem;
}
 
.mz-tab  .yui-navset .yui-content:after{
     display: block;
    content: '  ';
    border: none;
    border-top: solid 0px transparent;
    padding:0rem 0;
     margin: 0;
    color: #ece3e3;
    width: 100%;
    height: 10rem;
           height:auto;
    background-color: var(--tabMain-bg);
 
 -webkit-mask-repeat: repeat-x;
         mask-repeat: repeat-x;
 -webkit-mask-size: 10rem;
         mask-size: 12rem;
    -webkit-mask-image:var(--img-chew444);
    mask-image:var(--img-chew444);
    -webkit-mask-position: bottom;
   mask-position:bottom;
     position: relative;
margin:0 0 -1rem 0;
    z-index: 1;
     top:0rem;
 
}
 
/**/
.mz-tab  .yui-content div[style*="display: none;"][id*="wiki-tab"]{
transform:rotateX(-180deg);    
    left: 0rem;
 
    position: absolute;
    opacity: 0;
    display: block !important;
    top:0%;
        transform-origin:  50% 0;  
height: 0;
    visibility:  hidden;
    border: 1px solid rgba(33,33,33,.8);
     border-top:0px solid rgba(33,33,33,0);
    background: #fffcf8;
    transition:   all 0s;
    height: 0 ;
 
   z-index: -0 !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
 
}
 
.mz-tab  .yui-content div[style*="display: block;"][id*="wiki-tab"]{
transform:rotateX(0deg);
        left: 0rem;
        position:     relative;
    top:0;
    transform-origin:  50% 0;   
z-index:0;
height: auto;
background:  var(--tabMain-bg);
    border: 1px solid rgba(33,33,33,0);
        transition:   all 1s;
transform-style: preserve-3d;
}

Usage

This is a sigma9 theme created by Etinjat, which is inspired by Newspaper Theme and hoah2333's old Semimonth Theme (Now it looks better). And the magazine logo on sidebar is made by Kcorena.

To use this theme, put the following syntax on any page:

[[include :scp-wiki:theme:magazine]]

Custom Options：

[[include :scp-wiki:theme:magazine
|collapsible-sidebar=---] To use the collapsible sidebar.
|content-width= Change the width of main content.
|header-title= "texts" Change the big header title⁴.
|header-subtitle= "texts" Change the small header subtitle
|mob-title= "texts" Change the header title when in narrow screen (like phones).
|mob-subtitle= "texts" Header subtitle when in narrow screen.
|logo-image=url('yourlink') Logo on header (Hidden by default).
|logo-image-mob=url('yourlink') Header Logo in narrow screen (Default to the Foundation logo).
|logo-sidebar=url('yourlink') Logo on sidebar (Default to the magazine logo).
|sidebar-content= "texts" Text under the sidebar logo.
|page-title= none Remove page-title.
|title-underlines = none Remove underlines of page-title.
|title-orn-content= "★" The ornament below page-title
|title-orn-size= 1.5rem⁵
|title-orn-color= #542429
|title-orn-width= 2rem⁶
]]

Add background image

[[module css]]
#container {
--hollow-image: url('YOUR IMAGE LINK');
background: var(--hollow-image) center 0 repeat;
}

#content-wrap #side-bar::before,
#content-wrap #side-bar {
background-color: transparent ;
}

[[/module]]

• PS：For many calc function are used, so if you want to change the values of elements, please modify the variables in :root and use rem as the unit.

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Rating:

Rating w/ Credit Module:

• 

  close

  Info

  ---

  X

  Info about your page.

  ---

  More information about your page.

  ---

bold | italic | underline | strikethrough | Mono text ^superscript_subscript

+ A collapsible

This is a	table
You should know	how to make these
already

• Unvisited Link
  • A link you probably visited
  • Empty link

Fonts

Header title：IM Fell English

Page title：DM Serif Display

Body：Roboto Slab

Handwriting：Yesteryear

Mono：Courier New

Teletype：Special Elite

Image block

Standard Image Block

Wrap the following div codes on
the outside of the standard image block
to use the special styles below:

[[div class="mz-img-wrap " ]]
[[include component:image-block
name=
|width=
|caption=
|align=
]]
[[/div]]

Image
class="mz-img-wrap"

Image
class="mz-img-wrap img-frame"

Image
class="mz-img-wrap img-b3d"

Image
class="mz-img-wrap img-border"

Image
class="mz-img-wrap img-border img-frame"

Horizontal rule

A horizontal rule can be created with 5 hyphens "-" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

---

---

---

---

---

Wrap a div block, and add classname：

• Reduce hrs' size：hr-contract
• Change hrs to solid ：hr-solid
• To dotted：hr-dotted
• Double line: hr-double

[[div class="mz-hr hr-contract hr-solid" ]]

------

[[/div]]

---

_#

Woohoo

_#

---

_#

Add stuff to one or both sides of the horizontal rule(s):

• Leave a blank text line between each thing.
• Horiz rules can be added repeatedly.
• Notice that not to add so much stuff to avoid a pile on the narrow screen.

[[div class="mz-hr" ]]

[[image xxxx ]]

------

{{,,#,,}} Convert to a vertical line.

text

[[module Rate]]

------

[[/div]]

Magazine theme

_#

---

Author：Etinjat

Date：11 Dec 2021 14:06

Tags：cn deleted theme

Modules can be used for a variety of things. Like this:

[[include :scp-wiki:theme:magazine
|page-title= none
]]

[[div class="pgtt-module mz-hr" ]]
[[module ListPages category="*" limit="1" fullname="="]]
%#%title%%
[[/module]]
{{,,#,,}}
------
{{,,#,,}}
[[image source]]
[[/div]]

OR MORE!
Move your mouse over the picture to see the hovertip box.

[[div class="mz-log-wrap"]]
[[module ListPages category="*" limit="1" fullname="="]]
[[div class="mz-log-list"]]
[[div class="mz-hr" ]]
%#%title%%
{{,,#,,}}
------
[[div class="mz-log-trigger"]]
[[/div]]
[[div class="mz-log-hovertip"]]
**Author：**%#%created_by%%
**Date：**%#%created_at|%m-%d-%Y%%
**Tags：**% %tags%%
[[/div]]
[[/div]]
[[div class="mz-log-content"]]
OR MORE!
[[/div]]
[[/div]]
[[/module]]
[[/div]]

Blockquote

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes⁷

Other blockquote

[[div class="mz-blockquote"]]

mz-blockquote

[[/div]]

[[div class="mz-board" ]]

mz-board

[[/div]]

[[div class="mz-cover"]]
normal text
{{teletype text}}
[[/div]]

[[div class="mz-paper"]]

mz-paper

[[/div]]

[[div class="mz-textquote"]]
mz-textquote
[[/div]]

[[div class="mz-outbox"]]
[[div class="mz-innerbox"]]
text
[[/div]]
[[/div]]

Composite

NO OIL HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae suscipit ante, quis interdum arcu. Nam efficitur magna nec nulla luctus, eu faucibus magna elementum. Duis tempor odio in magna efficitur, sit amet porttitor purus dapibus. Sed interdum elit vel enim dapibus, quis gravida mi dapibus. Donec tincidunt commodo tellus vitae malesuada. Mauris a volutpat ante, quis tempus ex. Nullam nisl neque, sollicitudin sed congue at, iaculis ullamcorper libero. Praesent egestas urna ut ante accumsan, et posuere lacus bibendum. Nunc sit amet dictum nisi, ac fermentum arcu. Nam eu pretium nibh. Vestibulum efficitur, elit non lacinia semper, turpis nunc cursus orci, vel accumsan dolor felis ac risus.

Cras lacus nulla, finibus sit amet rutrum nec, tincidunt ut est. Ut interdum odio neque, eu finibus leo eleifend sed. Cras porta consequat congue. Vestibulum placerat felis vehicula, imperdiet felis sit amet, vestibulum dui. Sed venenatis, lorem et ullamcorper condimentum, tortor sem hendrerit ipsum, et aliquet nibh orci vel ligula. Fusce in luctus mauris. Aenean elit dui, lobortis vel leo at, iaculis maximus neque. Sed sit amet neque in urna elementum tempus. Nullam at velit eu magna sodales convallis. Donec placerat pulvinar ante, quis volutpat erat dapibus ut. Pellentesque in scelerisque sapien, ac vestibulum felis. Fusce euismod faucibus hendrerit.

---

_{Lorem Ipsum}

---

Praesent malesuada lacinia mattis. Vivamus a urna eu orci scelerisque tincidunt sed sed risus. Sed maximus consectetur lectus sed dapibus. Integer sit amet tempor velit. In pellentesque nulla et elit dapibus, sed facilisis nunc semper. Vivamus nisl est, ultricies sit amet placerat ac, imperdiet vitae sem. Quisque dictum quam ac odio tempor, quis scelerisque massa sodales. Praesent ligula ante, sodales ac mi nec, euismod luctus sem. Duis urna erat, bibendum sit amet scelerisque vel, faucibus vitae nunc. Sed consequat mi ex, non lacinia dui tincidunt eget. Donec blandit nec lacus ac pulvinar. Donec ut mollis sem. Proin vel arcu tincidunt, dignissim libero sed, finibus lorem. Aenean nec enim sem.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo, lacus mauris eleifend metus, vel tincidunt nisi nisi a neque. Sed feugiat ante sit amet nibh dictum laoreet. Cras vehicula porttitor magna, quis sollicitudin magna varius ut. Mauris quis urna in mauris pellentesque consectetur. Duis quis enim non turpis dapibus laoreet a id nisi. Duis gravida condimentum mi, ut ornare purus egestas et.

More div blocks

Clip

[[div class="clip-wrap"]]
[[div class="clip-body"]]
content
[[/div]]
[[/div]]

content

Code

[[div class="clip-wrap"]]
[[div class="clip-body"]]
[[image YOUR-IMAGE-LINK]]
content
[[/div]]
[[/div]]

[[div class="clip-wrap"]]
[[div class="clip-img"]]
[[image YOUR-IMAGE-LINK]]
[[/div]]
[[/div]]

Note pages

Note paper

[[div class="note-page"]]
content
[[/div]]

Note tip

[[div class="mz-note"]]
[[/div]]

---

Left Dogear:

[[div class="mz-note note-left"]]
[[/div]]

---

Swap the background color of note:

[[div class="mz-note" style="--tip-color:blue"]]
[[/div]]

---

Row-striped pages

---

Usage

To enable the style of row-striped pages and notebook pages bellow, add a line of code in the include:

[[include :scp-wiki-cn:theme:magazine
|extensions=true
]]

To use more similar stuff, see the component here.

[[div class="mz-notepage-wrap chew-left"]]⁸
[[div class="notepage-body"]]
[[div_ class="notepage-header"]]
Top text.
[[/div]]
[[div class="notepage-main"]]
Main text.
[[/div]]
[[div class="notepage-footer"]]
Bottom text, usually the page number.
[[/div]]
[[/div]]
[[/div]]

The usage method is the same as above, just replace

mz-notepage-wrap

to:

mz-notequote-wrap

That's done.

---

Notebook

---

[[div class="mz-notebook-wrap"]]
[[div class="notebook-body"]]
[[div class="notebook-left"]]
[[div class="notepage-main"]]
Left text.
[[/div]]
[[/div]]
[[div class="notebook-mid"]]
[[/div]]
[[div class="notebook-right "]]
[[div class="notepage-main "]]
Right text.
[[/div]]
[[/div]]
[[/div]]
[[/div]]

Hey, it look like a tab⁹.

Widening the page of site and folding the sidebar may improve the visual effect of this block.

Note:

• This block only displays the full appearance on a wide screen, and changes to the row-striped page style above on a narrow screen.
• To modify the color of background/row-stripes/text of bookpage separately, add style="--color-notepage: blue;--color-rowline: green;--color-bookpage-txt:red" to the div which class="notebook-body".
• To remove the bookseam style in the middle of the notebook, add notebook-noseam in the div which class="notebook-body".
• To enable the bookmark, add notebook-bookmark in the div which class="notebook-left/right".
• To change the default row stripe style of the bookpage block to single stripe, add rowline-single in the div which class="notepage-main".
  • Add rowline-none to remove the stripe.

Dialogues

Mabe you want a talk.

See the folow to create a sheet of speech bubbles.

+ Here we go

Code

[[include :scp-wiki-cn:theme:magazine extensions=true]]Add the code at include.

[[div class="mz-talking-wrap"]] The Beginning-block
[[div class="talking-left talkimg-below" ]]The Dialog-block
[[div class="talking-img"]] The Image-block
[[/div]]
[[div class="talking-box"]]The Text-block
Left
[[/div]]
[[/div]]

[[div class="talking-right talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
Right
[[/div]]
[[/div]]

[[/div]]

Intro

Maybe the speech bubbles sheet is too broad to display a well visual effect on the wide screen (like PC), so you can add the coda style="width:80%;margin: 0 auto" at the beginning-block to narrow the whole sheet. Meanwhile, add the classname pc-width to make it restore 100% width when on narrow screen (like phone).

[[div class="mz-talking-wrap pc-width"  style="width:80%;margin: 0 auto"]]

On narrow screens, the picture in the image-block are hidden to leave space for text. If you want to hide the picture in wide screen, add the classname no-image in the image-block. Like this:

 [[div class="talking-img no-image"]]

Left dialog-block：

[[div class="talking-left talkimg-below" ]]

Right dialog-block：

[[div class="talking-right talkimg-below" ]]

To place the dialog-block below the picture, follow this:

1. Fill in the classname of dialog-block with talkimg-upper to modify the picture position.

[[div class="talking-left talkimg-upper" ]]

2. Fill in the classname of text-block with talkbox-lefttop / talkbox-righttopr to modify the position of speech triangle of dialog-block.

[[div class="talking-box talkbox-lefttop"]]

To place the picture in the center of image-block, do not fill in the classname of dialog-block with anything except talking-left / talking-right and add talkbox-inby into text-block.

[[div class="talking-box talkbox-lefttop  talkbox-inby"]]

To swap a new picture, need to fill in --tk-img-left or --tk-img-right to the style of text-block according to its direction.

[[div class="talking-right" style="--tk-img-right:url(IMAGE_LINK)"]]

If you fill both codes in the beginning-block, the left and right pictures in the whole sheet will be converted.

 [[div class="mz-talking-wrap" style="--tk-img-left:url(IMAGE_LINK); --tk-img-right:url(IMAGE_LINK);" ]]

To change the colors of text-block, need to full --shadow-line and --tk-box-bg within its style definition.

[[div class="talking-box talkbox-lefttop  talkbox-inby " style="--shadow-line:green;--tk-box-bg:skyblue;color:darkred"]]

Full in the classname of text-block with talkbox-round to change its border to round; Full with talkbox-dark to make a dark style.

[[div class="talking-box talkbox-round  talkbox-dark"]]

Full with talkbox-doubleline to change its border to doubleline.

[[div class="talking-box talkbox-doubleline"]]

Full with talkbox-bubles to change the speech triangle to two bubles (default to square).

[[div class="talking-box talkbox-bubles"]]

Add the talkbox-round to make them round).

[[div class="talking-box talkbox-round talkbox-bubles"]]

TABs

Tabulator

This is a tab view.

Customization

• Put them under the include.

[[module CSS]]
:root{
--tabNAV-bgHover:#333;Background color of the TABnav which is selected / hovered.
--tabMain-border:#333; Border color
}
[[/module]]

Tabulation

Hey look, more text here.

How quaint.

Long Tab

[[div class="mz-tabcell"]]
Text.
[[/div]]

---

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

long long long long long long long long long long long long long Tab

vvvvvvvvvvv

Teared tab

Tabulator

This teared tab flipped the second time it was selected.

Not good.

Code

[[include :scp-wiki-cn:theme:magazine
|extensions=true
]]

[[div class="mz-tab"]]
[[tabview]]
[[tab Tabulate]]

[[/tab]]
[[/tabview]]
[[/div]]

linear tab

Tabulator

[[div class="mz-tab-line"]]
[[tabview]]
[[tab TAB]]

[[/tab]]
[[/tabview]]
[[/div]]

Customization

• Put them under the include.

[[module CSS]]
:root{
--Line-tab-base:#333; Border color
--Line-tabNAV-txt:#333; Text color of the navTAB.
--Line-tabNAV-txtHover:#e8e8e8; Text color of the TAB-nav which is selected or hovered.
}

[[/module]]

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

long long long long long long long long long long long long long Tab

vvvvvvvvvvv

Horizontally center title

○ Type A

[[div class="mz-tt"]]
+ Type A
[[/div]]

Type B

○ text

[[div class="mz-tt222"]]
+ Type B
[[/div]]

Type C

[[div class="mz-tt333"]]
+* Type C
[[/div]]

Or just horizontal line:

[[div class="mz-tt333"]]
[[/div]]

Meta Title

[[div class="meta-title"]]
Meta Title
[[/div]]

Or just horizontal line:

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

Pseudo Blacklight box

[[div class="mz-tt tt-box" style="padding-top: 0rem"]]
+* title

texts

+* more titles

[[/div]]

Customization

[[module CSS]]
:root{
--ttbox_h1BDR-color: #333; Color of the title box's border
--ttbox_boxBDR-color: #333; Color of the content box's border
--ttbox_bevel-color: #333; Color of the title box's bevel

--ttbox_h1-bg: #333; Background color of title
--ttbox_h1-color: fff; Color of title
}

[[/module]]

Individual title

[[div style="height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;"]]
+* Individual title
[[/div]]

Columns

The following codes divide the page into two or three columns, but it would be shrinked to one column if the screen is narrow¹⁰.

[[div class="mz-column"]]
Two columns
[[/div]]

[[div class="mz-column column-333"]]
Three columns
[[/div]]

[[div class="mz-column column-nip"]]
No column-rule
[[/div]]

[[div class="mz-column column-nip column-333"]]
Three columns without column-rule
[[/div]]

Lorem Ipsum：
In sit amet velit lacus. Ut finibus lorem vel felis interdum, ut posuere nisl sollicitudin. Proin ultrices neque ac mattis venenatis. Suspendisse potenti. Aliquam quis lacinia lorem, vel facilisis neque. Curabitur imperdiet nisl vitae nibh bibendum cursus. Nunc sollicitudin nisl eget egestas fermentum. Proin facilisis scelerisque ex, non molestie elit ultrices pulvinar. Morbi ac ultricies lacus. Proin consectetur dolor erat, a vestibulum metus scelerisque a. Sed dictum faucibus leo non condimentum. Donec enim augue, vehicula ut porta euismod, pellentesque quis lectus. Nam feugiat nisi nec nulla pretium, vel elementum sapien faucibus.

Goat sheet

Cras dolor velit, fermentum et sem ut, consequat iaculis orci. Ut dictum ipsum sed risus ullamcorper convallis. Nam non molestie odio, et pharetra risus. Aenean velit nisi, iaculis at venenatis a, semper vitae nibh. Vivamus aliquam risus at erat malesuada dapibus. Aliquam sit amet sapien risus. Vivamus efficitur aliquam justo, eget feugiat diam tincidunt vel. Suspendisse potenti. Maecenas eleifend eleifend auctor. Ut eget scelerisque augue. Nunc lacinia massa quam, in cursus erat tristique eget.

---

Box of text wrapping

○ Nobody

Suspendisse vitae libero a lectus consectetur iaculis non in massa. Suspendisse sed turpis id dolor consectetur egestas quis feugiat eros. Nam porta sit amet massa et volutpat. Praesent ut risus eu purus dictum varius. Nulla facilisi. In hac habitasse platea dictumst. Nam volutpat massa quis risus tincidunt, ut porttitor velit consequat. Ut tincidunt nulla in orci suscipit dapibus. Nulla ante ligula, sollicitudin in mauris nec, sollicitudin pharetra ligula. Quisque congue non metus at tristique. Nam bibendum sem magna, a consectetur elit dictum eu. Duis sagittis, nibh sit amet dignissim feugiat, dui quam mattis nisi, vel convallis lacus dui at nisl. Fusce lobortis non massa in tempus. Nunc ut vulputate magna. Nulla euismod metus quis lorem egestas, eget accumsan diam tristique.

Proin eu ultrices eros. Sed sit amet sapien ornare, tempus mauris tristique, consectetur ligula. Vestibulum ac tincidunt nunc. Morbi suscipit, lacus ut auctor lobortis, libero lacus egestas tellus, non fringilla metus nibh vel nisi. In mi lectus, varius non lorem vel, faucibus tempor enim. Fusce tincidunt libero id efficitur posuere. Integer sit amet dictum ipsum. Phasellus blandit est quis eros mollis sollicitudin. Nunc vehicula arcu vitae nisi pretium scelerisque. Vestibulum tristique odio eget urna facilisis finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent id nisl et ligula volutpat venenatis sit amet sit amet massa. Nam feugiat, odio vel tincidunt interdum, lorem sapien fringilla ipsum, vel molestie ipsum mi vitae tortor. Quisque sit amet enim nulla. Aenean consectetur erat ut mauris bibendum ornare. Ut posuere ante id libero tincidunt gravida. Nunc feugiat, lectus vitae consequat iaculis, velit dui placerat mauris, id mollis ipsum felis non sem. Vestibulum et eleifend dolor. Nulla facilisi. Praesent vel sapien pharetra, rhoncus metus id, ornare lorem. Nullam et molestie diam.

Ut ac suscipit nisl. Suspendisse bibendum lorem egestas ex tempor malesuada. Praesent ut facilisis odio, id imperdiet dui. Suspendisse vehicula augue tempor risus porttitor vestibulum. Nam a turpis finibus, hendrerit risus ut, finibus diam. Fusce sed pulvinar augue. Nulla ut arcu eros. Duis tempus egestas risus id maximus. Cras non ex pharetra, posuere risus eget, scelerisque purus. Duis bibendum ultricies molestie. Curabitur hendrerit ligula vitae molestie vestibulum. Etiam vel rutrum massa. Proin quis est eget nulla tristique egestas.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo.

---

How to use

Select all and replace the following placeholders:

{$name} Unique ID of each wrapped box.
{$box-width} Fixed width of wrapped content.
{$box-height} Fixed height of wrapped content.

+ CODES

[[div class="mz-column222-wrap column-wrap-{$name}"]]
[[div class="column222-box"]]
Wrapped content
[[/div]]
[[div class="mz-column222-cell column222-left"]]
[[div class="column222-left-blank"]]
[[/div]]
Left text
[[/div]]
[[div class="mz-column222-cell column222-mid"]]
[[/div]]
[[div class="mz-column222-cell column222-mid "]]
[[div class="column222-mid-line" style="{$mid-line}"]]
[[/div]]
[[/div]]
[[div class="mz-column222-cell column222-right"]]
[[div class="column222-right-blank"]]
[[/div]]
Right text
[[/div]]
[[/div]]

[[module CSS]]
:root{
--column{$name}-box-width:{$box-width};
--column{$name}-box-height:{$box-height};
--column{$name}-gap:0rem;
--column{$name}-mid-width: 4rem;
--column{$name}-boxMOB-width:AUTO;
--column{$name}-blank-width:calc(var(--column{$name}-box-width) / 2.5 - var(--column{$name}-gap) );
--column{$name}-blank-height:calc(var(--column{$name}-box-height) + var(--column{$name}-gap) / 2 + var(--column{$name}-blank-width) / 2.5 );
--column{$name}-line-top:calc(var(--column{$name}-blank-height) + 0.2rem );
--column{$name}-line-height: calc(100% - var(--column{$name}-blank-height) - 0.5rem);
}

.mz-column222-wrap{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}

.column222-right, .column222-left{
max-width:46% !important;
}

.column-wrap-{$name} .column222-box{
display: block;
background: {$box-bg};
position: absolute;
width: var(--column{$name}-box-width);
height: var(--column{$name}-box-height);
}

.column-wrap-{$name} .column222-left-blank,
.column-wrap-{$name} .column222-right-blank{
float: right;
width: var(--column{$name}-blank-width);
height: var(--column{$name}-blank-height);
padding: 0 var(—column{$name}-gap);
}

.column-wrap-{$name} .column222-right-blank{
float: left;
}

.column-wrap-{$name} .column222-mid{
width: var(--column{$name}-mid-width);
}

.column-wrap-{$name} .column222-mid-line{
display: block;
position: relative;
border-left: 2px solid #333;
height: var(--column{$name}-line-height);
top: var(--column{$name}-line-top);
}

@media (max-width: 600px){
.mz-column222-wrap{
display: block;
}

.column-wrap-{$name} .column222-box{
position: inherit;
width: var(--column{$name}-boxMOB-width);
height: auto;
margin: 0 auto;
}
.column222-left-blank,
.column222-right-blank,
.column222-mid-line{
display: none;
}
.column222-right, .column222-left{
max-width:100% !important;
}
}

[[/module]]

Goto Bottom

---

Footnotes

1. It should be enclosed with 'single quotation marks'

2. if you dont want to use title font and increase font size，remove img-tt.

3. FOOTENOTE!

4. It should be enclosed with "quotation marks"

5. It is equivalent to removing the ornament when you set 0.

6. The width of the blank space behind the ornament.

7. FOOTENOTE!

8. In "chew-xxx", "xxx" can be replaced with left/right/top/bottom/both/none to adjust the position of the torn edge.

9. Maybe you would need some color codes:
#bbdcea #f3a2aa #f0dd8e #bbdcea #b5b6ae

10. For saving space, the following columns demonstration will not be displayed on narrow screen.