Settingsの作業残骸(20230126)
code:style.css
@import "../Settings_old/style.css";
開発中のUserCSS
code:_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をダウンロードする */
/* Font Awesome 6をダウンロードする */
テスト用
code:_style.css
/* ####### テスト用 ####### */
/* 今は必要ないので消す */
display: none;
}
:root {
/* 要素が隠れてしまうことがあるので一時的に横スクロール可能にする */
overflow-x: auto;
}
変数（UserCSSの設定）
code:_style.css
/* ページタイトル周りのレイアウトを調整する */
body, *::after, *::before {
/* ページ背景としては使用していないが、互換性のために残す */
--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-separator-width: 1.5px;
--tool-separator-height: 18px;
/* # ページ周り */
--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;
}
}
スタイル指定
code:_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);
}
/* ツールバーの右側のボタン */
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;
}
/* ページ情報を常時表示する */
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);
}
/* ページ作成者の情報 */
/* 個人プロジェクトでは不要なので非表示にする */
display: none;
}
/* ページ情報のボタンを非表示に */
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;
}
}