settings
変数
code:style.css.off
:root {
--body-bgc: #373b44;
--body-bgc-rgb: 55 59 68;
--indent-border: #343740;
--menu-bgc-rgb: 32 34 40;
--page-bgc: #202228;
--text-clr: #d3d3d3;
--text-invert: #212121;
}
code:style.css
@media (prefers-color-scheme: light) {
:root {
--body-bgc: #ddd;
--body-bgc-rgb: 215 216 220;
--indent-border: #f4f4f4;
--menu-bgc-rgb: 200 201 204;
--page-bgc: #fff;
--page-text-color: #212121;
--tool-text-color: #212121;
--text-clr: #212121;
--text-invert: #d3d3d3;
}
}
ピン
code:app.css
.grid li.page-list-item.pin::after {
content:"";
display:block;
position:absolute;
background:var(--card-pin-overhang-color, transparent);
width:25px;
height:11px;
top:-2px;
right:-8px;
z-index:10;
transform:rotate(45deg);
user-select:none
}
code:style.css
.grid li.page-list-item.grid-style-item::after {
content:"";
display:block;
position:absolute;
background:var(--card-pin-overhang-color, transparent);
width:auto;
height:auto;
top:auto;
right:0px;
transform:rotate(0deg);
text-align:center;
user-select:none
}
ページのリンクに応じてホーム画面でラベルをつける
code:style.css
.grid li.page-list-item:not(data-page-title='音楽自習室', data-page-title='タグ一覧', data-page-title='tips'){
&data-page-links*='tips'::after {
content: "tips";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #babfe9;
}
&data-page-links*='reaper'::after {
content: "REAPER";
position: absolute;
bottom: 0px;
right: 0px;
padding: 2px 4px 1px;
background-color: #338c46;
color: var(--text-clr);
}
&data-page-links*='utau'::after {
content: "UTAU";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #ff71a3;
}
&data-page-links*='プラグイン'::after {
content: "プラグイン";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #fbf961;
}
&data-page-links*='音作り'::after {
content: "音作り";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: var(--text-clr);
background-color: #4d58de;
}
}
ホーム・本文・メニューバー
code:style.css
/* ホーム画面 */
.grid li.page-list-item a { box-shadow: none !important;}
/* ピン留めを段分け */
.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1;}
/* settingsを透明化 */
.page-list .grid li.page-list-itemdata-page-title="settings" {visibility: hidden;}
/* kofuを透明化*/
.page-list .grid li.page-list-itemdata-page-title="kofu" {visibility: hidden;}
/* "hid"を隠す */
.page-list .grid li.page-list-itemdata-page-links*="hid" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="転載" {display: none;}
.page {
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;
} */
/* メニューバー背景 */
.navbar {background-color: rgb(var(--menu-bgc-rgb) / .3);}
.search-form .form-group input:focus {
background-color: rgb(var(--menu-bgc-rgb) / .92);
color: var(--text-clr);
}
.search-form .form-group input:is(:focus, .for-mobile) {
background-color: rgb(var(--menu-bgc-rgb) / .92);
color: var(--text-clr);
}
.navbar-form .dropdown-menu {
background-color: rgb(var(--body-bgc-rgb) / .92);
min-width: 100%;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.navbar-form .dropdown-menu a {
color: var(--text-clr);
}
.global-menu {
background-color: rgb(var(--body-bgc-rgb) / .92);
}
.global-menu li a {
color: var(--text-clr);
}
.global-menu li a.updated, .global-menu li a.highlight {
border-left: 2px solid #547efc;
}
.global-menu .project-list-tab a.active {
background-color: rgb(var(--body-bgc-rgb) / .92);
color: var(--text-clr);
}
.project-list-tab a {
color: var(--text-clr);
}
.global-menu li.project-list-filter a:hover {
background-color: var(--page-bgc);
}
code:コードブロック
code:style.css
.line span.code-block .code-block-start {
padding: 2px 4px 2px 4px;
}
table:テーブル
1 2 3
A A1 A2 A3
B B1 B2 B3
C C1 C2 C3
code:style.css
.line span.table-block .table-block-start {
background-color: var(--text-invert);
font-size: 1.05em;
padding: 2px 4px 2px 4px;
}
.line span.table-block .table-block-start a {
color: var(--text-clr);
}
/* 折り返し */
.table-block {
overflow-wrap : break-word; /* できてない */
}
/* セル間に枠線 */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目を太字、中央揃え */
font-size: 1.05em;
font-weight: bold;
text-align: center;
}
インデント
code:style.css
/* 表示 */
.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(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1.5px solid var(--indent-border);
}
タグのラベル化 #settings
code:style.css.off
atype="hashTag" {
display: inline-block;
padding: 0.8px 6px;
margin: 0 8px 10px 0;
background: var(--page-bgc);
color: var(--text-clr);
font-size: 0.9em;
border: 1.5px solid var(--body-bgc);
border-radius: 4px;
transition: .3s;
transform: scale(1);
-webkit-transform: scale(1);
}
atype="hashTag":hover {
color: #fff;
border: 1.5px solid ;
transform: scale(1);
-webkit-transform: scale(1);
}
二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) {
color: #fff;
background: linear-gradient(transparent 75%, rgb(255 255 102 / 0.7) 25%);
}
文字色
code:style.css
.deco-\! {color: #dc322f;}
.deco-\# {color: #0000ff;}
.deco-\% {color: #a8a8a8;}
水平線
code:style.css
.deco-\' {
display: block;
border-bottom: 1px solid #c0c0c0;
}
小見出し
code:style.css
.deco-\| {
border-left: 4px solid #bbb;
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 !important;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
右揃え
中央揃え画像下キャプション
code:style.css
.deco-\> {
position: absolute;
right: 0;
}
.deco-\+ {
display: block;
text-align: center;
}
.deco-\& {
display: block;
text-align: center;
font-size: smaller;
line-height: 1;
opacity: 0.8;
}
ポップアップメニュー
code:style.css.off
/* ポップアップメニューの修飾ボタンをアイコン化 */
.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 }