ACSやCSSテーマの備忘録

砂箱に置きっぱなしにするのもあれなので共有
視覚表現において使えそうなCSSのテンプレートやテーマの組み合わせ、CSS変数などを置いておく場所です
暇になり次第更新され、誰でも追記・編集可能

ACSアイコンのページ

もっとクールなACSの副次クラスのアイコンが欲しいなら
Calibriの超クールなアートページ(ほとんどアイコンだけだけれど、それでもやっぱり超クール)
Dr Monedのアイコンとアートワーク
Enderman_desuによる、多分クールなACSアイコン集
JosephJoestarのアイコン倉庫
(以下未翻訳)
Golem's ACS Icon & Department Logo Page
ZackVMK's ACS Icon Page
Art Page of an Ost (IT HAS ACS ICONS!) (ft. The Simpsons Farting)
Chaos Arts
Classifications, Guides, and Icons by Billith

CSSテーマ

BHLの中央寄せヘッダーとかトグルサイドバーとかの詰め合わせ

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:component:bhl-dark-sidebar]]
[[include :scp-jp:component:toggle-sidebar-bhl]]
[[include :scp-jp:component:centered-header-bhl]]
[[include :scp-jp:component:fade-in speed=1]]
[[include :scp-jp:component:acs-animation]]


上から順番に、
ベースのテーマ
ダークサイドバー
BHL用トグルサイドバー
BHL用中央寄せヘッダー
フェードイン
ACSアニメーション

Foxtrotのタイトル消去とワイドモード

[[include :scp-jp:theme:foxtrot wide=a | hidetitle=a]]


Basalt 2.0の通達ボックスで背景に表示されるロゴをでっかくする

div[class$="_memo"] {
background-size: 75% auto !important;
background-position: center center !important;
}


[[module CSS]][[/module]]にぶち込みましょう
サイズ調整はbackground-sizeを任意の値に
background-position: center centerで通達のロゴを通達のボックス全体の中心に表示されるようにしている
改変前のデフォルトの値であるbackground-size: contain;では通達のボックスのサイズに応じて背景画像のサイズも変わるようになっている

Basalt 2.0でオリジナルの通達ボックスを作成する
以下は仮におさしみおいしい部門の場合

div.osasimioisii_memo {
--memo-heading: "NOTICE FROM DEPARTMENT OF OSASIMI OISII";
--memo-logo: url(OSASIMI.png);
--memo-color: 245, 100, 320;
}


--memo-headingで上部に表示されるメッセージの内容を指定
--memo-logoで背景に表示されるロゴを指定
--memo-colorで背景色(ライトモードの場合)を指定しています
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License