settings
CSSのカスタム用
code:style.css
@import "./color.css";
@import "./import.css";
@import "./fixed-title.css";
@import "./fonts.css";
@import "./bg.css";
@import "./video-emb.css";
@import "./deco.css";
@import "./espace.css";
@import "./table.css";
@import "./image-size.css"
code: color.css
body {
--body-bg: #EDF4FF;
--navbar-bg: rgba(132, 168, 219, 0.8);
--card-title-bg: #3F739E;
--tool-color: #6d6d6d;
--telomere-unread: rgba(132, 168, 219, 0.8);
--title-under: rgba(132, 168, 219, 0.8);
}
code:import.css
/* https://scrapbox.io/scrasobox/箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
/* https://scrapbox.io/forum-jp/インラインのコード記法は色をつけないで欲しい */
code.code span {
color: inherit !important;
}
/* https://scrapbox.io/customize/Streamにアクセスするボタン */
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs {
display: block !important;
}
/* External links */
/*https://scrapbox.io/scrasobox/settings */
.line a.link:not(.icon)::after { font-family:'Font Awesome 5 Free'; font-weight: 900; content: ' \f35d'; display: inline-block }
/* ここから https://scrapbox.io/api/code/ci7lus/settings/custom.css */
/* 最大画像サイズ制御 */
.line img.image, .video-player video {
max-width: 80%;
max-height: 50vh;
margin: 4px 0;
}
@media (max-width: 540px) {
.line img.image, .video-player video {
max-width: 100%;
max-height: unset;
}
}
@media (min-width: 541px) {
a.link[href^="https://twitter.com"] > img {
max-width: 400px;
}
}
/* モーダルから画像がはみださないようにする */
.full-content-modal .modal-dialog .modal-content .modal-body .full-content {
max-height: -webkit-fill-available;
max-height: 85vh;
}
/* hogeのみweightを調整する */
strong.level-1 > span.deco-\* {
font-weight: bold;
}
/* ここまで */
code: fixed-title.css
/* ホームボタンをナビゲーションバー内に固定する */
/* https://scrapbox.io/api/code/ci7lus/settings/fixed_project_home.css */
.quick-launch .project-home {
left: 20px;
bottom: 2px;
color: #fff;
position: relative;
pointer-events: auto;
}
@media screen and (hover: none) and (pointer: coarse){
/* タッチデバイスのみ実行 */
.navbar>.container, .navbar>.container-fluid {
padding-top: 2px;
padding-bottom: 2px;
}
}
@media screen and (max-width:940px) {
.quick-launch .project-home {
left: 56px;
bottom: 0;
}
}
@media screen and (max-width:420px) {
.quick-launch .project-home {
left: 48px;
}
@media (display-mode: standalone){
/* PWA環境下のみ実行 */
.quick-launch .project-home {
left: 42px;
}
.navbar .navbar-menu>li>a {
padding: 0 8px;
}
}
}
.quick-launch {
margin-bottom: 1rem;
}
data-hover-visible .quick-launch .project-home:hover {
text-decoration: none;
color: #fff;
background: none;
}
.quick-launch .project-home span.title:hover {
opacity: 0.8;
}
.quick-launch .left-box {
position: fixed;
top: 0;
color: #fff;
z-index: 1000;
width: 100%;
pointer-events: none;
}
.quick-launch .plan-badge {
margin: 0 0 0 64px;
}
.navbar {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
div.app {
padding-top: 60px;
}
code:fonts.css
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
.grid li {
font-family: "IBM Plex Sans JP", "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", Meiryo, sans-serif;
}
.editor {
font-family: "IBM Plex Sans JP", "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", Meiryo, sans-serif;
}
body {
font-family: "IBM Plex Sans JP", "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", Meiryo, sans-serif;
}
a.project-home > span.title {
font-family: 'Lobster Two', cursive, serif;
font-size: 30px;
font-weight: 700;
overflow: visible !important;
}
@media screen and (max-width:940px) {
a.project-home > span.title {
font-size: 28px;
}
}
@media screen and (max-width:420px) {
a.project-home > span.title {
font-size: 26px;
}
}
code, kbd, pre, samp {
font-family: "Cascadia Code", "Fira Code",Menlo,Monaco,Consolas,"Courier New",monospace;
}
code: bg.css
/* https://www.magicpattern.design/tools/css-backgrounds */
body {
background-color: #edf4ff;
opacity: 1;
background-size: 26px 26px;
background-image: repeating-linear-gradient(0deg, #fff, #fff 1.3px, #edf4ff 1.3px, #edf4ff);
}
code:video-emb.css
/* YouTube埋め込みのサイズ調整 */
.iframe-video-player {
display: inline-block;
position: relative;
width: 98%;
max-width: 600px;
}
.iframe-video-player::before {
content: '';
display: block;
padding-top: 56.25%;
}
.iframe-video-player iframe {
display: inline-block;
margin: 4px 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
code:espace.css
/* 記号類をエスケープする記法 */
.line:not(.cursor-line) .deco-\+::before{
content:"[";
}
.line:not(.cursor-line) .deco-\+::after{
content:"]";
}
code:deco.css
.line strong.level-2:before {
content: '';
position: absolute;
width: 4px;
height: 70%;
top: 0;
bottom: 2px;
left: 0;
margin: auto 0;
background: var(--navbar-bg, rgb(132, 168, 219));
}
strong.level-2 > span.deco-\* {
line-height: 2.0;
margin-left: 12px;
}
.line.line-title .text {
padding-bottom: 8px;
border-bottom: dotted 1px var(--title-under, rgba(132, 168, 219, 0.8));
}
.line.line-title {
padding-bottom: 20px;
}
/* text で小文字に */
.deco-\" {
font-size: 80%;
}
code:table.css
/* セル間に線を入れる */
.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;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
code:image-size.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; }