settings
code:style.css
/* ヘッダー */
.navbar {
}
/* 新規投稿ボタン */
.new-button {
}
.horizontal-line {
}
.vertical-line {
}
/* 検索フォーム */
.btn-search {
}
code:style.css
/* ブランドアイコンを今日の日付にする */
/* .navbar-brand::before {
/* content: '';
/* width: 48px;
/* height: 48px;
/* position: absolute;
/* background-size: cover;
/* background-position: center;
/* border-radius: 4px;
/* }
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
.app:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 }
}
/* スマホ向け */
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
.app:not(.presentation) { padding-top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto } }
/* @media (prefers-color-scheme: dark) {
/* .navbar-brand::before {
/* }
/* }
/* @media (prefers-color-scheme: light) {
/* .navbar-brand::before {
/* }
/* }
code:style.css
/* ドロップダウンメニュー */
/* .dropdown-toggle {
/* }
/* ボディ */
/* body {
/* background-color: #15141b !important; /* }
/* ページ */
/* .page {
/* background-color: #bdbdbd !important; /* }
/* テキスト */
/* 太字 もしくは 大きな文字 */
.line strong {
}
/* 空のページリンク */
/* .line a.empty-page-link {
/* }
/* ページリンク */
/* .line a.link {
/* }
/* 外部ページリンク */
/* .line a.page-link {
/* }
code:style.css
/* ピン留めされたページを独立した段に表示する */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:style.css
/* インデントレベルをわかりやすくする */
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 43%;
margin: -4px 0;
border-left: 2px solid #bdbdbd; /* 色の指定 */ }
/* .line .indent-mark .dot {
/* opacity: 0.0;
/* }
/* .line .indent-mark .c-0 + .dot {
/* opacity: 1.0;
/* }
/* .line .indent-mark .c-1 + .dot {
/* opacity: 0.8;
/* }
/* .line .indent-mark .c-2 + .dot {
/* opacity: 0.6;
/* }
/* .line .indent-mark .c-3 + .dot {
/* opacity: 0.4;
/* }
/* .line .indent-mark .c-4 + .dot {
/* opacity: 0.2;
/* }
code:style.css
/* 番号付きリストのバレットを表示させる */
.line.number-list .dot {
display: block !important;
}
code:style.css
/* 画像の表示サイズを［** ］で設定できるようにする */
.level-1 img {
width: 16.7%; max-height: none;
}
.level-2 img {
width: 33.3%; max-height: none;
}
.level-3 img {
width: 50%; max-height: none;
}
.level-4 img {
width: 66.7%; max-height: none;
}
.level-5 img {
width: 83.3%; max-height: none;
}
.level-6 img {
width: 100%; max-height: none;
}
code:style.css
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
background-color: rgba(0, 0, 0, .02);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
/** カーソルを点滅する UserCSS */
/** 変数 */
.cursor {
--cursor-width: 2px;
--cursor-blink-time: 1s;
}
@keyframes blink {
0% { opacity: 0; }
49%{ opacity: 0; }
50%{ opacity: 1; }
}
.cursor {
width: var(--cursor-width);
}
.cursor svg rect {
fill: var(--cursor-color);
width: var(--cursor-width);
animation: blink var(--cursor-blink-time) infinite;
}
code:style.css
/* 使わない popup menu を消す */
.popup-menu .link-button,
.popup-menu .strong-button,
.popup-menu .italic-button,
.popup-menu .strike-button,
.popup-menu .copy-plain-button {
display: none !important;
}
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 10%, #61ffca 25%, #61ffca 70%, transparent 90%) }
.deco-\! { /* 重要な部分は ! を付ける */
background: linear-gradient(transparent 10%, #f694ff 25%, #f694ff 70%, transparent 90%) /* background-color: #f694ff; /* 背景をピンクにする */ /* font-size: 1.2em; 重要なので最初から大きな文字にする */
}
.deco-\# {
background: linear-gradient(transparent 10%, #ffca85 25%, #ffca85 70%, transparent 90%) /* background-color: #ffca85; /* 背景をオレンジにする */ }
code:style.css
/* 付箋を追加する */
/* 文字列 とすることで、赤いボーダーがついている付箋の様な記法になる */
/* 文字列 とすることで、青いボーダーがついている付箋の様な記法になります */
.deco-\&{
padding: 6px 20px;
}
.deco-\%{
padding: 6px 20px;
}
/** 変数 */
.deco-\. {
--bookmark-icon: yellowgreen;
}
/** しおり記法 */
@media screen {
.app:not(.presentation) .line .deco-\. {
background-color: var(--bookmark-background);
}
.app:not(.presentation) .line .deco-\.::after {
position: absolute;
top: 3px;
left: -1.4em;
content: '\f02e';
font: 1.7rem/1 'Font Awesome 5 Free';
font-weight: 900;
color: var(--bookmark-icon);
}
}
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after {
position: static;
padding-left: .3em;
}
}
/** 栞一覧を出すページメニューボタンのスタイル */
a#Bookmarks.tool-btn:hover {
text-decoration: none;
}
a#Bookmarks.tool-btn::before {
position: absolute;
left: calc(46px/3);
content: '\f02e';
font: 20px/46px 'Font Awesome 5 Free';
}
a#Bookmarks.tool-btn img {
opacity: 0;
}
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title, .code-block-start {
counter-reset: codeline;
}
.code-block code > span:not(class) { counter-increment: codeline;
}
.code-block code > span:not(class)::before { content: counter(codeline);
position: absolute;
display: inline-block;
left: -4em;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace;
color: grey;
}
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: 0.5;
}
.cursor-line .code-block code > span:not(class)::before { opacity: 1;
font-weight: bolder;
}
}
code:style.css
code:style.css
code:style.css
code:style.css
code:style.css
;){kind=link}