BLANKSTYLE CSS
BLANKSTYLE CSS
Placeholder McDPlaceholder McD,
HarryBlankHarryBlank
Published on March 2021
Thank you to stormbreathstormbreath, EstrellaYoshteEstrellaYoshte, and CroquemboucheCroquembouche for collectively creating most of the code that is included in this theme.
このテーマに含まれている殆どのコードを共同制作してくださったことに関してstormbreathstormbreath、EstrellaYoshteEstrellaYoshte、CroquemboucheCroquemboucheの3名に感謝します。
評価: 0+–x
評価: 0+–x
blank.png

クレジット

BLANKSTYLE CSS
By: Placeholder McDPlaceholder McD, HarryBlankHarryBlank

Thank you to stormbreathstormbreath, EstrellaYoshteEstrellaYoshte, and CroquemboucheCroquembouche for collectively creating most of the code that is included in this theme. Especially Estrella.
このテーマに含まれている殆どのコードを共同制作してくださったことに関してstormbreathstormbreath、EstrellaYoshteEstrellaYoshte、CroquemboucheCroquemboucheの3名に感謝します。特にEstrellaへ。

評価: 0+–x

What Is This?

これは何?

This is Blankstyle CSS: a visual style created by Placeholder McDPlaceholder McD and HarryBlankHarryBlank for use in the latter's articles. It exists so it can be easily updated and applied across a wide range of works. It essentially functions as a Light-theme variant of EstrellaYoshteEstrellaYoshte's Penumbra Theme, plus several Blank-specific caveats.
このBlankstyle CSSは、Placeholder McDPlaceholder McDとHarryBlankHarryBlankが、後者の記事で使用するために作成したビジュアルスタイルです。幅広い作品に適用し、簡単に更新することができるように作成されました。本質的にはEstrellaYoshteEstrellaYoshteによるPenumbra Themeのライトテーマ版として機能しますが、Blank特有の注意事項が何点かあります。

It almost certainly will not work with other themes, most of all Black Highlighter. Do not use this unless you know what you're getting into.
他のテーマ、特にBlack Highlighterと共にはほぼ確実に機能しません。何が起こるか分からないのであれば、使用しないでください。

How to Use

使い方

To use this theme, please copy this syntax onto the top of your page:
このテーマを使用するには、次の構文をページの最上部 (creditモジュールを使用している場合はその真下) にコピー＆ペーストしてください。

[[include :scp-jp:theme:blankstyle]]

Note that this theme includes the following components:
このテーマには次のコンポーネントがインクルードされていることに留意してください。

When using this theme in conjunction with the info-rate module, wrap the module in a [[div]] to ensure that the information panel is not delayed by the Fade-In.
このテーマをinfo-rateモジュールやcreditモジュールと併用する際は、情報パネルがフェードイン構文によって遅延しないようにするために、それらのモジュールを[[div]]で囲んでください。

This theme borrows code from PeppersGhostPeppersGhost's Image Block Peppo and EstrellaYoshte which centers base images and image-blocks so that they appear more aesthetically on smaller screens (read: mobile). It also borrows Estrella's genius sidebox technology from the Penumbra Theme, and most of its code is derived from the Paperstack Theme.
このテーマではPeppersGhostPeppersGhostのImage Block PeppoとEstrellaYoshteから、小さな画面 (モバイル端末など) で画像ブロックを中央寄せにして綺麗に見せるためのコードを転用しています。また、PenumblaテーマからEstrellaの天才的なsidebox構文も借りており、そしてそのコードの大部分はPaperstackテーマからの派生です。

To read about some of the additional features of BLANKSTYLE CSS, head to the discussion thread and view the patch notes.
BLANKSTYLE CSSの追加の機能については、ディスカッションにあるパッチノートを参照してください。

ACS-COLORED TABLES

ACSカラーテーブル

The following tables with custom-colored header cells can be used by wrapping your table in a div, named "table1" through "table5", respectively.Note that wrapping an scp-image-block in one of these divs will apply the same to its caption. Note, also, that this is a BetterFootnote, and details for its usage can be found at the above link.. These correspond to the 5 basic levels of the ACS Component Bar. There is also a table6 div for purple tables.
次のようなカスタムカラーの見出しセルを持つテーブルは、それぞれ"table1"から"table5"と名付けられたdivで囲むことで作成できます.これらのdivで画像ブロックを囲むと、キャプションに同様のカスタムカラーが適用されることに注意してください。また、これがBetterFootnotesであることに注目してください。使用方法の詳細は上記のリンクに記載されています。。これらは、ACSコンポーネントバーの5つの基本レベルに準じています。また、table6で紫色のテーブルも使用できます。

This is a normal table;
it is boring to test
これは普通のテーブルです。
これじゃテストにならない
This is a GREEN table;
it is fun to test.
これは緑色のテーブルです。
これなら試しがいがある
This is a BLUE table;
it, too, is fun to test.
これは青色のテーブルです。
これもテストしがいがある
This is a YELLOW table;
it, too, is fun to test.
これは黄色のテーブルです。
これもテストしがいがある
This is an ORANGE table;
it, too, is fun to test.
これは橙色のテーブルです。
これもテストしがいがある
This is a RED table;
it's not so fun to test.
これは赤色のテーブルです。
やりがいがなくなってきた
This is a PURPLE table
it is the test
これは紫色のテーブルです。
これテスト

Note: Purple is used to denote Thaumiel-class objects, and documents requiring Level 6 (Cosmic Top Secret) or 6/Provisional (Thaumiel-Proviso) clearance. This reflects the synaesthetic preferences of Placeholder McDPlaceholder McD, and the willingness of Harry to include things I like in his articles.
注: 紫色はThaumielクラスオブジェクトや、要レベル6(Cosmic Top Secret)文書または要レベル6/暫定(Thaumiel-Proviso)文書を示すために使用されます。これはPlaceholder McDPlaceholder McDの共感覚的嗜好や、私の好きなものを記事に盛り込もうとするHarryの意欲を汲んだものです。

The tableb div will also separate cells within its tables.

tablebクラスのdivの中にあるテーブルはセル同士が分割されます。

This is a BROKEN table;
it is quite fun to test!
これは分割版テーブルです。
このテストめちゃ楽しい！

Harry has been formatting his tables manually for a long, long time. What a nerd.

Harryは長い間ずっとテーブル構文を手作業でフォーマットしてきました。オタクめ。

Source Code

ソースコード

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        bottom: 0.5em;
        left: 0.5em;
        z-index: 15;
        font-family: san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
        text-decoration: none!important;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
 
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
 
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        z-index: -1;
    }
}
:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.7s * var(--timeScale));
    animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}
+ コード

_noneiti119テーマ
ページリビジョン: 8, 最終更新: 07 Sep 2022 07:35
編集 評価 (0) タグ ディスカッション 履歴 ファイル 印刷 サイトツール + オプション
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License