settings_old
カスタム設定用のページ
CSSはそんな詳しくないので動けばいいや的精神で書いてる
（気が向いたら整理するかも）
自分がよく使うプロジェクトのsettingsはこのページを参照するようになってる
ここを変えると全部変わる
インポート: @import "https://scrapbox.io/api/code/bluemountain-theme/settings/style.css";
借用リスト
/masui/settings
/phoooutty/settings
/shoya140/settings
code:style.css
body {
/* background-color: #e0e0e0*/
}
//code:style.css
/* .navbar .row .col-menu { width: unset } */
@media screen and (min-width: 768px) {
body {
padding-top: 0px !important;
}
}
.project-home .title {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
color: #fff; /* color: var(--search-form-icon-color, #fff);*/
}
/customize/titleをnav barに固定するUserCSS 一部改変（フォントサイズ等）
//code:style.css
@media screen {
.quick-launch .left-box {
position: fixed;
top: 3.5px;
left: 70px; /* brand-iconの幅に応じて変えてください */
z-index: 1000;
}
.quick-launch .project-home {
line-height: 30px;
min-height: 30px;
}
.project-home .title {
font-size: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .left-box {
left: 85px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .left-box {
left: 100px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .left-box {
left: calc((100% - 1280px)/2 + 110px);
}
}
/* 鍵アイコンの色を調整 */
.kamon-locked {
color: #fff;
opacity: 0.3;
}
.quick-launch .private-badge:hover {
background-color: rgba(0, 0, 0, 0) !important;
}
トップページの上のとこにあるゴタゴタを消す
anti: トップページの上のとこにあるゴタゴタを消さない
//code: style.css
.quick-launch .right-box {
display: none;
}
code: style.css
.plan-badge {
display: none !important;
}
検索アイコンを薄く
//code:style.css
.navbar .kamon {
opacity: 0.5;
}
プロジェクト名ホバー時の色
//code:style.css
.project-home:hover {
background-color: rgba(0,0,0,0.08) !important
}
-.icon
プレゼンテーションモードのカスタマイズ
code:style.css
.app.presentation .line .dot {
width: .8vw;
height: .8vw;
top: calc(.8em - .25vw);
right: 1vw;
}
.app.presentation .line .indent-mark .dot {
background-color: #dfdfdf;
}
.app.presentation .deco-\# {
top: 25vh;
position: relative;
}
.app.presentation .deco-\* {
font-family: "Toppan Bunkyu Midashi Gothic";
}
.app.presentation .deco-\~ {
font-family: "Toppan Bunkyu Midashi Gothic";
}
.app.presentation .deco-\+ {
font-family: "Toppan Bunkyu Midashi Gothic";
}
.app.presentation {
--page-bg: #fff;
--body-bg: #ffffff;
}
code:style.css
@import url("https://fonts.googleapis.com/css?family=Kosugi Maru");
.app.presentation .line.section-title {
font-family: "Toppan Bunkyu Midashi Gothic";
font-size: 5vw;
}
.app.presentation .line.line-title {
font-family: "Toppan Bunkyu Midashi Gothic";
font-size: 6vw;
}
.app.presentation .line {
font-family: "Toppan Bunkyu Gothic";
font-weight: bold;
color: black;
line-height: 160%;
}
/customize/Streamにアクセスするボタン
code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
これをdisableにするにはStreamボタンをdisableするcss
テーブル記法を見やすく
code:style.css
.table-block .cell:nth-child(even) {
background-color: rgba(0,0,0,0.08);
}
.table-block .cell:nth-child(odd) {
background-color: rgba(0,0,0,0.04);
}
code:style.css
@import '/api/code/bluemountain-theme/見える文字数カウンター/style.css';
/customize/番号付きリストのバレットを表示させるUserCSS
code:style.css
.line.number-list .dot {
display: block !important;
}
-.icon
機能拡張系
code:style.css
.level-1 img:not(.icon) { width: 16.7%; max-height: none !important; }
.level-2 img:not(.icon) { width: 33.3%; max-height: none !important; }
.level-3 img:not(.icon) { width: 50%; max-height: none !important; }
.level-4 img:not(.icon) { width: 66.7%; max-height: none !important; }
.level-5 img:not(.icon) { width: 83.3%; max-height: none !important; }
.level-6 img:not(.icon) { width: 100%; max-height: none !important; }
.deco-\- img:not(.icon) { width: 0%; max-height: none !important; }
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
background-color: #bfbfbf }
code:style.css
.deco-\. {
font-size: 60% !important;
}
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
ScrapCalc
code:style.css
.deco-\# {
font-style:italic;
background: rgb(116 118 225 / 20%);
}
.scrapcalc_result {
background: rgb(212 225 116 / 20%);
}
/scrasobox/コードの行番号を表示する
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: Menlo,Monaco,Consolas,"Courier New",monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 }
.cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } }
隠すやつ
code:style.css
.deco-\,{ /* 記法のキーとして#を使ったけど何でもいいと思う */
background-color: #000; /* 背景色をテキスト色と同じにする */
color: #000;
}
.line.cursor-line .deco-\,, .deco-\,:hover { /* カーソルがある行とマウスホバー時だけ背景を戻す */
background-color: inherit;
color: var(--page-text-color);
}
ピン留めされたページを独立した段に表示する
cf. /aioilight/settings
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
/pokutuna/文字装飾記法
重要赤 [! 重要赤] で出ます
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
重要青 [~ 重要青] で出ます
code:style.css
.deco-\~ {
color: #fff;
background-color: #1976d2;
padding: 0.1em 0.2em 0.1em 0.2em;
}
蛍光ペン [+ 蛍光ペン] で出ます
code:style.css
.deco-\+ {
background: linear-gradient(transparent 60%, rgb(255 247 57 / 45%) 40%);
}
薄く表示 [( 薄く表示] で出ます
code:style.css
.deco-\( {
opacity: 0.5;
}
[*[アイコン]]をより大きく（本棚用）
code:style.css
.deco-\* .icon {
height: 6em !important;
vertical-align: bottom;
}
bluemountain.icon
インライン引用
from /scrasobox/拡張記法がきた！#59e5376896b9040000af691a
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
color: #a0a0a0;
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
/customize/テーブルの見た目をカスタマイズを改変
とりあえずダークモードにしか対応していないけど、/blu3moでは問題ないのでとりあえずこれで
後で気が向いたら直したい
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px rgba(255,255,255, 0.2);
border-bottom: solid 1px rgba(255,255,255, 0.2);
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px rgba(255,255,255, 0.2);
}