settings
色味は今のところvvvv gamma本体の配色に沿う方針
そのまま背景#131313だとちょっと暗すぎるのでHelp Browserの背景#222222に
bodyはRegionの背景#333333
code:style.css
:root {
--page-bgc:#222;
--body-bgc:#333;
--body-bgc-rgb:51 51 51;
}
メニューアイコンはgammaのアイコンに
settings#662f0a2569d64a0000a549e2
記法
引用
code:style.css
.line .quote {
background-color: #2a2a2a;
display: block;
}
二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) {
color: #fff;
background: linear-gradient(transparent 75%, rgb(255 255 102 / .7) 25%);
}
文字色
code:style.css
.deco-\! {color: #dc322f;}
.deco-\# {color: #0000ff;}
.deco-\% {color: #434343;}
黒塗り
code:style.css
.deco-\":not(:hover){color:transparent;background-color:#28292b;a.page-link {color: transparent;};a.icon {visibility: hidden;};img {filter: contrast(0);}}.line:not(.cursor-line)
水平線
code:style.css
.deco-\' {
display: block;
border-bottom: 1px solid #c0c0c0;
}
小見出し
code:style.css
.deco-\| {
border-left: 4px solid #fff;
padding-left: 11px;
margin-bottom: 3px;
}
大見出し
code:style.css
.deco-\~ {
display: block;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: var(--level-3-border);
padding: 1px 0 1px 0.5em;
font-size: 1.7em;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
右揃え
code:style.css
.deco-\> {
position: absolute;
right: 0;
}
中央揃え
code:style.css
.deco-\+ {
display: block;
text-align: center;
}
画像下キャプション
code:style.css
.deco-\& {
display: block;
text-align: center;
font-size: smaller;
line-height: 1;
opacity: 0.8;
}
#タグのラベル化
code:style.css
atype="hashTag" {
display: inline-block;
padding: 0.8px 6px;
margin: 0 8px 10px 0;
background: #222222;
color: #fff;
font-size: 0.9em;
border: 1.5px solid #535863;
border-radius: 4px;
transition: .3s;
transform: scale(1);
-webkit-transform: scale(1);
}
atype="hashTag":hover {
color: #fff;
border: 1.5px solid #909090;
transform: scale(1);
-webkit-transform: scale(1);
}
code:style.css
/* ホーム表示 */
/* 背景 */
.grid li.page-list-item a {
background-color: var(--body-bgc);
box-shadow: none !important;
}
/* settingsを透明化 */
.page-list .grid li.page-list-itemdata-page-title="settings" {visibility: hidden;}
/* scrapbox translatorを透明化 */
.page-list .grid li.page-list-itemdata-page-title="scrapbox translator" {display: none;}
/* _で隠す */
.page-list .grid li.page-list-itemdata-page-title^="_" {display: none;}
/* ピン留めを段分け */
.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1;}
/* ピン表示 */
.grid li.page-list-item a .pin {
position: absolute;
height: 12px;
width: 12px;
top: 0;
right: 0;
border-radius: 0 0 0 0px;
background: var(--page-bgc);
z-index: 2;
outline:solid 4px var(--body-bgc);
}
/* 背景 */
body {
background-color: var(--page-bgc);
}
/* 本文 */
.page {
background: var(--body-bgc);
box-shadow: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
/* タイトル */
.line.line-title .text {
border-bottom: 1px solid #c0c0c0;
padding-bottom: 1rem;
margin-bottom: 3rem;
}
/* テロメアをおとなしくする */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
border-color: #52555D;
width: 0;
}
.unread {
border-color: #e7a270 !important;
}
/* メニューバー */
/* 背景色 */
.navbar {background-color: rgb(0 0 0 / .3);}
/* 新規作成ボタン */
.new-button {background-color: #363b43;}
/* scrapboxアイコン上書き */
.brand-icon {
visibility:hidden;
}
a.navbar-brand.dropdown-toggle {
position: relative;
visibility: hidden:
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 4px;
left: -2px;
background-image: url('https://i.gyazo.com/08f92e582b5f4bfafa1fd3b88f352be6.png');
background-size: contain;
background-repeat: no-repeat;
}
/* 検索メニュー */
.search-form .form-group input:focus {
background-color: rgb(5 5 5 / .3);
color: #d3d3d3);
}
.search-form .form-group input:is(:focus, .for-mobile) {
background-color: rgb(5 5 5 / .3);
color: #d3d3d3;
}
.navbar-form .dropdown.open .dropdown-menu {
background-color: #1b1b1b;
min-width: 100%;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.navbar-form .dropdown-menu a {
color: #d3d3d3;
}
/* グローバルメニュー */
.global-menu {
background-color: rgb(var(--body-bgc-rgb) / .93);
}
.global-menu li a {
color: #d3d3d3;
}
.global-menu li a.updated, .global-menu li a.highlight {
border-left: 2px solid #859900;
}
.global-menu .project-list-tab a.active {
background-color: var(--body-bgc);
color: #d3d3d3;
}
.project-list-tab a {
color: #d3d3d3;
}
.global-menu li.project-list-filter a:hover {
background-color: var(--page-bgc);
}
/* 関連ページ */
.related-page-list .toolbar .related-page-list-search:focus-within {
background-color: 383838;
caret-color: #d3d3d3;
}
.related-page-list .toolbar .related-page-list-search:focus-within .fa-search {
color: #383838;
}
/* インデント */
/* 表示 */
.line .indent-mark .dot {
display: block;
position: absolute;
right: 10px;
top: 13px;
width: 2px;
height: 2px;
border-radius: 0;
}
/* 列を色分け*/
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(2n+2) .pad {
background: #383838;
}
/* 特定リンクにアイコン */
:is(.line, .line .deco) a.link:is(
href$=".pdf",
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f1c1';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://thegraybook.vvvv.org"],
)::before{
content: ' ';
background-color: #222222;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://youtube.com"],
[href^="https://www.youtube.com"],
[href^="https://youtu.be"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f167';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
/* デフォルトのtwitterリンクのアイコンがユーザー用リンクでも表示されるように名指し */
[href="https://twitter.com/takumanakata"],
[href="https://twitter.com/7MPra"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f099';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://www.instagram.com"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f16d';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://github.com"],
[href^="https://raw.githubusercontent.com"],
[href^="https://gist.github.com"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f09b';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://www.amazon.co.jp"],
[href^="https://amazon.co.jp"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f270';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
[href^="https://ja.wikipedia.org"],
[href^="https://en.wikipedia.org"],
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f266';
font-weight:400;
margin-right:0px;
}
/* ポップアップメニュー */
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
フォント
code:style_.css
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500;1,600;1,700;1,800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .grid li {
font-family:'l-safe','calibri','Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}