generated at
Settingsの作業残骸(20230126)
Settings改修2023/01/26時点でのログ
Scrapboxに直接CSSを書くのがかなり辛くなってきたので、SCSSVSCode環境に移行した


今までのSettings
style.css
@import "../Settings_old/style.css";

開発中のUserCSS
_style.css
/* @import */ @import "/api/code/Mijinko/工事中の札を貼るUserCSS-B/style.css"; /* 工事中でも最低限必要なCSSのみimportする */ @import "/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css"; /* 無いと見づらい */ @import "/api/code/Mijinko/ピンしたページのスタイル/style.css"; /* 記法関連 */ @import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/color.css"; @import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/style.css"; @import "/api/code/Mijinko/警告記法/style.css"; @import "/api/code/Mijinko/スポイラー記法/style.css"; /* Noto Sans JPをダウンロードする */ @import "https://fonts.googleapis.com/css?family=Noto+Sans+JP"; /* Font Awesome 6をダウンロードする */ @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";

テスト用
_style.css
/* ####### テスト用 ####### */ #Test_4 { /* 今は必要ないので消す */ display: none; } :root { /* 要素が隠れてしまうことがあるので一時的に横スクロール可能にする */ overflow-x: auto; }

変数(UserCSSの設定)
_style.css
/* ページタイトル周りのレイアウトを調整する */ body, *::after, *::before { --body-bg: #373b44; /* ページ背景としては使用していないが、互換性のために残す */ --page-bg: var(--body-bg); --navbar-bg: hsl(0deg 100% 77%); /* 仮 */ /* ページ内のフォントサイズ */ --page-font-size: 15px; /* デフォルトで設定されているフォント * Font Awesomeを常時使えるようにするUserCSSから流用したもの */ --base-fonts: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 6 Free","Font Awesome 5 Brands","AppIcons",sans-serif; /* ページタイトルとかに使っているフォント */ --label-fonts: "Noto Sans JP", var(--base-fonts); /* # ナビゲーションバー */ /* ナビゲーションバーの最小縦幅 */ --navbar-min-height: 80px; /* デフォルト:40px */ /* ナビゲーションバーの最大縦幅 */ --navbar-max-height: calc(var(--navbar-min-height) + 28px); /* ナビゲーションバーの1行あたりの縦幅 */ --navbar-row-height: calc(var(--navbar-min-height) / 2); /* # ツールバー */ /* ツールバーの高さ */ --tool-height: var(--navbar-row-height); /* ツールバーの下マージン */ --tool-margin-bottom: calc((var(--navbar-max-height) - var(--navbar-row-height) - var(--tool-height)) / 2); /* ツールバーの角丸の深さ */ --tool-border-radius: 3px; /* プロジェクトタイトルのボタン色 */ --tool-bg: hsl(0deg 20% 47%); /* ホバーしていない時に使われる */ --tool-hover-bg: #2b2e38;/*hsl(230deg 12% 40%); /* 元々は--tool-bgだった */ /* プロジェクトタイトルと戻るボタンの間の線【不要】 */ --tool-separator-width: 1.5px; --tool-separator-height: 18px; --tool-separator-color: #0000002e; /* # ページ周り */ --page-menu-icon-size: 46px; /* # ページ内部 */ /* ページの横padding * テロメアの位置調整も必要なので変数で管理する */ --page-padding-horizon: 30px; /* 元々は42px */ /* ページの上padding */ --page-padding-top: 21px; /* 元々は42px */ /* ページタイトルの左padding */ --line-title-margin-left: -12px; /* ページタイトル下線の幅 */ --line-title-border-width: 2px; /* ページタイトル下線の色 */ --line-title-border-color: var(--line-title-color, white); /* # 関連ページリスト・ページカード */ /* ページカードの上の線 */ --card-title-bg: var(--page-text-color); /* 互換性のために残してある */ /* 関連ページリストのページカードの背景 */ --relation-page-bg-1:; --relation-page-bg-pro1:; --relation-page-bg-2:; --relation-page-bg-empty:; } /* # 関連ページリストを右側に持ってくるやつの専用設定 */ @media (min-width: 768px) { body, *::after, *::before { /* ページ情報の大きさ */ --page-info-height: 178px; --page-info-width: 250px; /* * ページメニュー全体の高さ * 自分のアイコンの数によって高さを変える */ --page-menu-height: calc(var(--page-info-height) + (var(--page-menu-icon-size) * var(--page-menu-rows))); /* ページメニューのアイコンの数 */ --page-menu-columns: 4; /* 横並びの個数 */ --page-menu-rows: 2; /* 縦並びの個数 */ /* 関連ページリストのラベルのフォントサイズ */ --relation-label-font-size: 16px; /* 関連ページリストのラベルの鎖アイコンの大きさ */ --relation-label-icon-size: 18px; /* 関連ページリストの横側の空白 */ --relation-label-margin-left: 3px; } }

スタイル指定
_style.css
/* # 基本 */ div.app { padding-top: 0; border-top-width: var(--navbar-max-height); border-top-style: solid; border-top-color: var(--tool-bg); } /* # ナビゲーションバー */ nav.navbar { /* ナビゲーションバー */ height: var(--navbar-row-height); border-bottom-width: calc(var(--navbar-min-height) - var(--navbar-row-height)); border-bottom-style: solid; border-bottom-color: var(--tool-bg); box-sizing: content-box; box-shadow: none; } .app > .container:not([style]), .navbar > .container { /* ナビゲーションバーとツールバー */ /* 原則ページの左端にラインを合わせるが、 * ウィンドウが狭くなった際にはウィンドウ端から8px離すようにする */ padding: 0; width: calc(100% - (8px * 2)); } .navbar .col-brand.dropdown > .dropdown-menu, .navbar .col-menu .dropdown > .dropdown-menu { /* ドロップダウンメニュー */ margin-top: calc(var(--navbar-max-height) - var(--navbar-row-height)); } /* # ツールバー */ .app > .container:not([style]) { /* ツールバー(プロジェクトタイトルとかが入っているバー) */ position: sticky; margin-top: calc(-1 * var(--navbar-row-height) - var(--tool-margin-bottom)); top: var(--navbar-row-height); z-index: 1010; /* navbarより10上 */ } .app > .container:has(.alert-info) { /* システムメッセージのレイヤーを手前にする */ z-index: 1020; /* ツールバーより10上 */ } .container > .alert-info { /* システムメッセージ */ position: fixed; top: calc(var(--navbar-row-height) + 5px); width: calc(100% - 16px); max-width: 1200px; } .quick-launch .left-box > .btn { border-radius: 0; } .quick-launch .left-box > .btn:first-child { border-radius: var(--tool-border-radius) 0 0 var(--tool-border-radius); } .quick-launch .left-box > .btn:last-child { border-radius: 0 var(--tool-border-radius) var(--tool-border-radius) 0; } .quick-launch .left-box > .btn:first-child:last-child { border-radius: var(--tool-border-radius); } /*.quick-launch .left-box .btn:first-child:not(:last-child):after {*/ /* プロジェクトタイトルと戻るボタンの間に線を引いてみる */ /*content: ""; position: relative; left: calc(8.5px + (var(--tool-separator-width) / 2)); border-right: var(--tool-separator-width) solid var(--tool-separator-color); height: var(--tool-separator-height) }*/ .quick-launch .right-box .dropdown > .btn { border-radius: var(--tool-border-radius); } .quick-launch .left-box .btn { /* プロジェクトタイトルのボタン */ background-color: var(--tool-bg); height: var(--tool-height); min-height: inherit; } .quick-launch .left-box .btn:hover { /* プロジェクトタイトルのボタン(ホバー時) */ background-color: var(--tool-hover-bg); } [data-hover-visible] .page-sort-menu a.tool-btn:hover { /* ツールバーの右側のボタン */ background: var(--tool-hover-bg); } /* # ページ周り */ div.editor { /* ページ内のフォントサイズを変数化する */ font-size: var(--page-font-size); } div.editor, .grid li, .stream { /* 全体のフォント種類を変数化する */ font-family: var(--base-fonts); } ul.grid li.page-list-item a { border-radius: 0; box-shadow: none; } .row-flex > .col-page-side { /* ページ横の空白を消し飛ばす */ width: 0; } .page-menu .dropdown, .page-menu .dropdown .tool-btn { /* アイコンの大きさを変数化する */ width: var(--page-menu-icon-size); height: var(--page-menu-icon-size); } div.page-menu ul > li > div { /* ページメニューの行の高さから小数が出ないようにする */ line-height: 20px; } /* # ページ内部 */ div.page { box-shadow: none; background-color: transparent; /* ページのpaddingを半分にする(実験的) */ padding: var(--page-padding-top) var(--page-padding-horizon) 17px; } div.line.line-title { /* ページタイトルの設定 */ margin-left: var(--line-title-margin-left); font-size: 1.9em; font-weight: bold; font-family: var(--label-fonts); /* ページタイトルから下線までの空白 */ padding-bottom: calc(var(--page-font-size) * 1); /* ページタイトルの下線 */ border-bottom-width: var(--line-title-border-width); border-bottom-style: solid; border-bottom-color: var(--line-title-border-color); } div.line.line-title .text { /* 元々設定されているpaddingを消す */ padding-bottom: 0; } div.line.line-title .telomere-border { /* ページタイトルのテロメアにできた隙間を埋める */ padding-bottom: var(--line-title-border-width); } div.line.line-title + .line { /* タイトル行の下線の下の空白 */ padding-top: 2em; } .line .telomere div.telomere-border { /* ページpaddingを調整したらテロメアの座標も調整しないといけなかった */ left: calc(-49px + 42px - var(--page-padding-horizon)); /* paddingにも背景色を塗るようにする */ box-sizing: content-box; } .line.line-title .telomere div.telomere-border { /* ページタイトルのテロメアの位置合わせ */ left: calc(-49px + 42px - var(--page-padding-horizon) - var(--line-title-margin-left)); } .line .text .indent-mark { /* タイトル行直下のインデント座標がバグる不具合への対策 */ top: auto; } @media (max-width: 767px) { div.col-page { padding: 0 15px 0 8px; } } /* ページ情報を常時表示する */ /* & 関連ページリストを右側に持ってくる */ @media (min-width: 768px) { /* # ページ情報を常時表示する */ div.page-menu { /* メニューボタンをグリッド状にする */ display: grid; grid-auto-flow: row; top: calc(var(--navbar-min-height) + 5px); width: var(--page-info-width); max-height: var(--page-menu-height); border-radius: 3px; backdrop-filter: blur(1.5px); box-shadow: 0px 0px 9px 0px black; /* 暫定 */ } .app > .row-flex { /* ページの上端とページ情報の上端を合わせる */ padding-top: var(--page-padding-top); } div.page { /* ページ上部に元々設定されていたpaddingを削除する */ padding-top: 0; } .page-menu [aria-labelledby="page-info-menu"] { /* ページ情報を常時表示する */ position: relative; display: flex; inset: auto; width: var(--page-info-width); box-shadow: none; z-index: auto; } .page-menu > .dropdown:nth-child(1) { /* ページ情報 */ grid-column: 1 / calc(var(--page-menu-columns) + 1); width: 100%; height: var(--page-info-height); } #page-info-menu ~ .dropdown-menu > :nth-child(2) { /* ページ作成者の情報 */ /* 個人プロジェクトでは不要なので非表示にする */ display: none; } #page-info-menu { /* ページ情報のボタンを非表示に */ display: none; } .page-menu > .dropdown { /* ページメニューのボタン配置を中央揃えに */ align-self: center; justify-self: center; } .page-menu > .random-jump-button { /* ランダムボタンは個別に中央揃えにしないといけない */ margin: auto; } .page-menu > .dropdown:nth-child(2) { /* ページメニューのボタンを2行目から配置する */ grid-row-start: 2; } .page-menu .dropdown:not(:first-child) ul.dropdown-menu-right { /* ボタンを押した時のメニューの位置 */ top: 50px; right: 0; } div.row-flex { /* ページを左寄せにする */ margin: 0 auto; padding: 0 8px; max-width: 1200px; justify-content: flex-start; } div.col-page { /* ページ領域の幅 */ width: calc(100% - 20px - var(--page-info-width)); } /* # 関連ページリストを右側に */ .page-wrapper { /* ページとリンクをまとめているやつ */ display: flex; flex-direction: row; } div.drag-and-drop-enter { /* ページ本体が入っている要素 */ flex-basis: 100%; } div.related-page-list { /* 関連ページリスト */ position: relative; margin-top: calc(var(--page-menu-height) + .5em); margin-right: -100%; margin-left: 10px; width: var(--page-info-width); } .related-page-list .related-page-sort-menu { /* ソートメニューを中央揃えに */ justify-content: center; } div.related-page-list ul.grid { /* marginに負の値を設定されるのを防止する */ margin: calc(var(--relation-label-font-size) * .5) 0; } .related-page-list .grid .relation-label { /* 関連ページリストのラベル領域 */ width: 100%; height: auto; margin: 0 0 10px; } .related-page-list .grid .relation-label .arrow { /* 吹き出しの矢印は不要なので消す */ display: none; } .related-page-list .grid li.relation-label a { /* 関連ページリストのラベルリンク */ padding: 0; padding-left: calc((var(--relation-label-margin-left) * 2) + var(--relation-label-icon-size)); border-bottom: solid 1px var(--relation-label-text); display: flex; width: 100%; border-radius: 0; flex-direction: row-reverse; justify-content: center; color: var(--relation-label-text); background-color: transparent; } .related-page-list .grid .relation-label a .title { /* ラベル文字 */ font-family: var(--label-fonts); font-size: var(--relation-label-font-size); line-height: 1.5em; } .related-page-list .grid .relation-label a .icon-lg { /* ラベルの鎖アイコン */ position: absolute; left: 3px; margin: 0; font-size: var(--relation-label-icon-size); width: 1em; height: 1.5em; line-height: 1.5em; vertical-align: middle; } .related-page-list .grid .page-list-item { /* 関連ページリストのページリンク領域 */ margin: 0; padding: 0 .5em; width: var(--page-info-width); height: 6em; } .related-page-list .grid .page-list-item a { /* 関連ページリストのページリンク本体 */ width: auto; background-color: hsl(0deg 0% 0% / 50%); /*【仮】*/ } .related-page-list .grid .page-list-item .header { /* ページリンクのタイトル領域 */ padding-bottom: 3px; border-top-color: var(--card-title-bg); border-top-style: solid; border-top-width: 4px; background-color: hsl(0deg 0% 100% / 25%); /*【仮】*/ z-index: 1; /* アイコンより上にする */ } .related-page-list .grid .page-list-item .description { /* ページリンクの書き出し文 */ padding-top: 3px; } .related-page-list .grid .page-list-item .icon { /* ページリンクのアイコン */ position: absolute; height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; opacity: .5; } .related-page-list .grid .page-list-item .icon::before { /* アイコン画像をグラデーションで透過(風に)しようかと思ったけれどやめた */ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; /* content: ""; */ background: linear-gradient(273deg, transparent 0 15%, var(--body-bg) 75% 100%); } .related-page-list .grid .page-list-item .icon > img { /* ページリンクのアイコン画像 */ margin: 0; width: 75%; height: fit-content; vertical-align: middle; } .related-page-list .grid .splitter.splitter { /* 底に沈んでいる区切り線 */ /* プロパティのいじり方でどうとでもなるので消す */ display: none; } }