settings
code:style.css
/*══════════════════════════════════════════════════════════════
Version: 0.9.2
Updated: 2026-01-21
══════════════════════════════════════════════════════════════*/
/*──────────────────────────────
フォント読み込み
──────────────────────────────*/
/*──────────────────────────────
カスタムプロパティ（変数）
──────────────────────────────*/
:root {
/* カラー：メイン */
/* カラー：ベーシック */
/* カラー：グレー系 */
--color-gray-light: #ddd; /* カラー：ボーダー・UI */
--color-border-light: #eee; /* カラー：リンク */
/* レイアウト */
--max-width: 1300px;
--content-width: 800px;
--navbar-height: 64px;
--grid-gap: 30px;
--card-width: 192px;
/* フォント */
--font-sans: "Noto Sans JP", "Inter", sans-serif;
--font-size-medium: 20px;
--font-size-small: 11px;
}
/*──────────────────────────────
ベーススタイル
──────────────────────────────*/
body {
/* Scrapbox内部変数の上書き */
--font-sans: "Noto Sans JP", "Inter", sans-serif;
--search-form-icon-color: var(--color-text);
--page-link-color: var(--color-link);
--page-link-hover-color: var(--color-link-hover);
--card-description-link-color: var(--color-primary);
--relation-label-links-bg: var(--color-primary);
--empty-page-link-color: var(--color-accent);
--empty-page-link-hover-color: var(--color-accent);
--relation-label-empty-bg: var(--color-accent);
--line-title-color: var(--color-text);
--tool-color: var(--color-text);
--telomere-border: var(--color-gray-light);
--telomere-unread: var(--color-gray-light);
--telomere-updated: var(--color-text);
--card-bg: var(--color-bg);
margin-bottom: 0px !important;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
text-underline-offset: 2px;
padding-right: unset !important;
}
/*──────────────────────────────
タイポグラフィ
──────────────────────────────*/
strong, b {
font-weight: 600 !important;
}
em {
font-style: italic !important;
}
/* 強調テキストにマーカー風のハイライト */
.line strong:not(class) { background: linear-gradient(transparent 60%, #ffc414 0%); }
/*──────────────────────────────
レイアウト：メインコンテナ
──────────────────────────────*/
.app {
padding-top: 0 !important;
}
.container {
max-width: var(--max-width) !important;
width: 100% !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box;
}
.page {
background-color: var(--color-bg) !important;
padding: 0;
box-shadow: none !important;
border: none !important;
}
.page-column {
grid-template-columns: minmax(200px, var(--content-width)) min-content;
margin: 0 !important;
gap: 0;
border-left: 1px var(--color-border-light) solid;
border-right: 1px var(--color-border-light) solid;
}
.col-page {
width: var(--content-width);
padding: 0 !important;
position: relative;
}
.footer {
display: none;
}
/*──────────────────────────────
リンクスタイル
──────────────────────────────*/
/* ページ内リンク */
.line a.page-link {
text-decoration: underline;
text-decoration-thickness: from-font;
color: var(--page-link-hover-color);
}
}
/* 外部リンク */
.line a.link {
text-decoration-thickness: from-font;
}
color: var(--page-link-hover-color);
text-decoration: none;
}
/* 外部リンクにアイコン追加 */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
content: "arrow_outward";
vertical-align: middle;
display: inline-block;
}
/* グリッド内リンクテキスト */
.grid li.page-list-item a {
word-break: break-all;
line-height: 12px;
}
/*──────────────────────────────
ハッシュタグ
──────────────────────────────*/
background-color: transparent;
border-radius: 0;
padding: 12px 6px;
margin: 0 4px;
text-decoration: none;
border: 1px solid var(--color-border-light);
}
background-color: var(--color-gray-light);
&:after{
content: "（書き途中です）"
}
}
}
}
color: var(--color-text) !important;
}
content: '';
display: inline-block;
width: 0.2em;
}
/*──────────────────────────────
ナビゲーションバー
──────────────────────────────*/
.navbar {
position: relative;
top: unset;
max-width: var(--max-width) !important;
width: 100% !important;
margin: 0 auto !important;
background-color: var(--color-bg);
box-shadow: none !important;
border-bottom: none !important;
padding: 0 16px !important;
}
.row {
display: flex !important;
background-color: transparent !important;
width: 100% !important;
height: var(--navbar-height) !important;
padding: 16px !important;
margin: 0 auto !important;
border: 1px var(--color-border-light) solid;
border-top: none;
box-sizing: border-box;
}
.left {
flex: 1;
}
/* プロジェクトホーム（ロゴ部分） */
.project-home {
position: relative;
height: 32px !important;
padding: 0 8px !important;
border-radius: 0 !important;
}
.project-home .title {
font-weight: 400;
font-size: var(--font-size-small);
color: var(--color-black);
}
/* ブランドアイコン（非表示） */
.brand-icon {
display: none;
& svg {
display: none;
}
}
/* キャレット */
.kamon-caret-down,
.navbar .navbar-brand .kamon-caret-down {
color: var(--color-black) !important;
}
/*──────────────────────────────
ハンバーガーメニュー
──────────────────────────────*/
div.col-brand.dropdown.global-menu-button {
& a.navbar-brand {
justify-content: left;
display: inline;
margin-right: 8px;
pointer-events: auto;
line-height: 1px;
/* ハンバーガーアイコン（3本線） */
& span.kamon.kamon-caret-down {
background: var(--color-black) !important;
border: none !important;
box-shadow: none !important;
width: 20px;
height: 1px;
display: inline-block;
position: relative;
cursor: pointer;
vertical-align: middle;
margin-right: 0;
padding: 0;
box-sizing: border-box;
transform: none !important;
transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, width 0.15s ease-in-out;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
width: 20px;
height: 1px;
background-color: var(--color-black);
transform: none !important;
transform-origin: center;
transition: transform 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out;
}
&::before {
top: -6px;
}
&::after {
bottom: -6px;
}
}
}
/* 開いた状態：×マークに変形 */
&.open a.navbar-brand span.kamon.kamon-caret-down {
background-color: transparent !important;
transform: none !important;
&::before {
top: 0 !important;
height: .5px !important;
transform: rotate(45deg) !important;
}
&::after {
bottom: 0 !important;
height: .5px !important;
transform: rotate(-45deg) !important;
}
}
}
/*──────────────────────────────
ドロップダウンメニュー
──────────────────────────────*/
ul.dropdown-menu {
max-width: none !important;
box-shadow: none;
border: 1px var(--color-border-light) solid !important;
border-radius: 4px;
pointer-events: auto;
background: var(--color-white);
}
ul.global-menu.dropdown-menu,
.navbar .dropdown-menu-right {
background: var(--color-white);
min-width: max-content;
box-shadow: none;
}
/* グローバルメニュー内検索 */
.global-menu .project-list-filter {
& input {
display: block;
font-size: 14px;
flex-grow: 1;
padding-left: 36px !important;
}
& .kamon {
position: absolute;
left: 26px;
}
& a {
padding: 0;
overflow: visible !important;
&:focus-within {
box-shadow: none;
background-color: transparent !important;
}
}
}
/* メニュー内ハイライト */
.global-menu li a.updated,
.global-menu li a.highlight,
.user-menu li a.updated,
.user-menu li a.highlight {
border-left: 2px solid var(--unread-color, var(--color-gray));
}
.dropdown-menu > li > a.selected,
.user-menu li a.highlight {
color: var(--unread-color, var(--color-primary));
}
/*──────────────────────────────
ナビバー内ボタン・UI
──────────────────────────────*/
/* 検索フォーム */
.search-form .form-group input {
background-color: var(--color-white);
border-radius: 4px;
border: 1px var(--color-border-light) solid;
height: 30px;
pointer-events: auto;
}
/* ナビバーメニューアイテム */
.navbar .navbar-menu > li {
pointer-events: auto;
min-width: 30px;
& .dropdown-toggle > .icon {
border: none;
border-radius: 0;
width: 30px;
height: 30px;
}
}
/* 新規作成ボタン */
.new-button {
background-color: transparent !important;
margin-right: 18px;
&:hover {
text-decoration: none !important;
background: var(--color-gray-light);
}
& .horizontal-line,
& .vertical-line {
display: none;
}
&::after {
font-size: 2rem;
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
color: var(--color-text);
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
content: "add_box";
vertical-align: middle;
display: inline-block;
}
}
/* ツールボタン */
.page-menu .tool-btn {
border-radius: 0;
}
.btn.tool-btn.dropdown-toggle {
display: none !important;
}
/* 翻訳メニュー非表示 */
display: none;
}
/*──────────────────────────────
サイドメニュー（展開式）
──────────────────────────────*/
.page-menu {
position: static !important;
}
.expandable-menu {
top: 12px;
backdrop-filter: none;
box-shadow: 0 0 0 1px var(--color-black);
border-radius: 1000px 0 0 1000px;
& .toggle-button {
opacity: 1;
color: var(--color-black);
}
& .page-menu .tool-btn {
color: var(--tool-color);
}
}
.quick-launch {
margin-bottom: 0;
}
/*──────────────────────────────
エディタ：行・インデント
──────────────────────────────*/
.lines {
padding-right: 0px;
border-right: 1px var(--color-border-light) solid;
}
.lines .line {
&:nth-child(2) {
padding-top: 24px;
}
&:last-child{
padding-bottom: 48px;
}
.indent-mark {
height: 100%;
}
&:nth-child(2) {
.indent-mark {
top: 24px;
}
}
.table-block .indent-mark {
height: auto;
}
}
/* インデントマーク */
.indent-mark {
& .pad {
height: 100% !important;
overflow: unset !important;
}
& span:not(:nth-last-child(-n+2)) .pad {
/*border-right: 1px solid var(--color-gray-dark);*/
}
}
/* インデントのドット */
.app .line .indent-mark .dot {
height: 1px;
width: 8px;
background-color: var(--color-gray);
border-radius: 0;
display: inline-block;
vertical-align: middle;
margin-top: 0.15em;
right: 7px;
top: 11px;
}
/* 番号リスト・引用のドット */
.line.number-list .dot,
.line.quote-line .dot {
top: 12.5px !important;
height: 2px !important;
border-radius: unset !important;
background-color: var(--color-black) !important;
}
/* 引用行のドット非表示 */
.line.quote-line .dot {
display: none !important;
}
/* 引用内のインデント線を非表示 */
.line:has(.quote) .indent-mark span .pad {
border-right-color: transparent !important;
}
/* 引用内画像のタグ非表示 */
.line:not(.cursor-line) .quote:has(.modal-image) > .tag {
display: none;
}
/*──────────────────────────────
テロメア（行の左側マーカー）
──────────────────────────────*/
.telomere {
display: block;
}
.line .telomere .telomere-border {
width: 12px !important;
border-color: var(--color-border-light);
border-width: 0 1px 0 0 !important;
left: -12px;
&:hover{
width: auto !important;
}
}
.line .telomere .telomere-border.updated-after-load {
border-color: var(--color-gray-light);
}
/*──────────────────────────────
ツールバー（エディタ）
──────────────────────────────*/
.page-menu .dropdown .tool-btn{
border-right: 1px var(--color-border-light) solid;
border-bottom: 1px var(--color-border-light) solid;
}
/*──────────────────────────────
タイトル行
──────────────────────────────*/
.line.line-title .text {
padding-top: 13px;
padding-bottom: 12px;
font-size: var(--font-size-medium);
line-height: 1;
border-bottom: 1px var(--color-border-light) solid;
}
/*──────────────────────────────
テーブル
──────────────────────────────*/
.table-block .table-block-start {
background-color: rgba(0, 0, 0, 0.1);
}
.table-block .cell {
border-top: 1px solid currentColor;
}
/*──────────────────────────────
画像
──────────────────────────────*/
.line img.icon {
top: -0.1em;
}
.line .image {
margin: 16px 0;
max-width: 90%;
max-height: none;
display: inline-block;
vertical-align: top;
}
/* 複数画像が並ぶ場合のスペース */
.text > span > span:has(.modal-image) ~ span:has(.modal-image) .image,
.indent > span:has(.modal-image) ~ span:has(.modal-image) .image,
.quote > span:has(.modal-image) ~ span:has(.modal-image) .image {
margin-left: 8px;
}
/* スラッシュ区切り画像で画僧を横並びに */
width: calc(45% - 4px);
}
display: none;
}
/*──────────────────────────────
画像モーダル
──────────────────────────────*/
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none !important;
height: 80vh;
width: auto;
object-fit: contain;
}
.full-content-modal .modal-body img.full-content,
.full-content-modal .modal-body svg.full-content {
background: none !important;
}
/* 描画ボタン非表示 */
button.btn.btn-primary.draw-button {
display: none;
}
/* モーダルのフェードアニメーション */
.modal-backdrop.fade {
opacity: 0;
}
.fade {
transition: opacity 0s linear;
}
.modal.fade .modal-dialog {
transition: transform 0s ease-out;
}
.modal-backdrop.in {
opacity: .9;
}
/*──────────────────────────────
動画埋め込み
──────────────────────────────*/
.iframe-video-player iframe {
display: inline-block;
vertical-align: middle;
width: 100%;
height: auto;
aspect-ratio: 16/9;
max-height: 40vw;
border: 0;
}
iframe.vimeo {
background: var(--color-black);
}
/*──────────────────────────────
カーソルアニメーション
──────────────────────────────*/
@keyframes blink {
0%, 49% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.cursor {
animation: blink 1s infinite;
}
/*──────────────────────────────
スクロールバー
──────────────────────────────*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: var(--color-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--color-gray-light);
border-radius: 0;
}
/*──────────────────────────────
関連ページ・ページリスト共通
──────────────────────────────*/
.related-page-list {
margin-top: 0;
.links-container {
gap: 0;
}
}
/* 吹き出し削除 */
.grid li.relation-label .arrow{
display: none;
}
/* ピンの背景を削除 */
.grid li.page-list-item a .pin,
.grid li.page-list-item.pin::after {
background: transparent;
background-image: none;
display: none;
}
/* プライベートページを非表示 */
display: none;
}
.stream {
display: none;
}
/* 関連ラベルのアイコンサイズ */
.grid li.relation-label a .icon-lg {
width: 36px;
height: 24px !important;
line-height: 36px;
font-size: 24px;
display: inline-block;
}
/* 関連ラベルのhover */
.related-page-list div.links-1-hop ul.grid:hover .relation-label a {
color: var(--color-text);
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label a {
color: var(--color-text);
}
.related-page-list div.links-3-hop ul.grid:hover .relation-label a {
color: var(--color-text);
}
/* 検索・ランダムジャンプボタン非表示 */
.related-page-list-search,
.random-jump-button {
display: none !important;
}
.related-page-list .toolbar {
margin-bottom: 0;
}
/* ステータスバー */
.status-bar > div {
border-style: dashed none none dashed;
font-family: var(--code-font);
}
/*══════════════════════════════════════════════════════════════
グリッドシステム
══════════════════════════════════════════════════════════════*/
/* スプリッター非表示 */
.grid li.splitter.splitter {
display: none;
}
/* グリッドレイアウト */
:is(.page-list, .related-page-list) ul.grid {
margin: 0;
padding-bottom: 40px;
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
gap: 0 !important;
}
ul.grid {
border-left: 1px var(--color-border-light) solid;
/* ページリスト内アイテム */
.page-list & li.page-list-item {
height: auto;
margin: 0 !important;
aspect-ratio: auto;
grid-column: span 1;
grid-row: span 1;
border-bottom: 1px var(--color-border-light) solid;
border-right: 1px var(--color-border-light) solid;
}
/* アイテムリンク */
& li.page-list-item a {
position: relative;
height: auto;
padding: 16px;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 1);
overflow: unset !important;
border-radius: 0;
border: none !important;
&:hover {
background: var(--color-white);
box-shadow: none !important;
}
&:has(.icon) {
box-shadow: none;
}
& .content {
position: relative;
height: auto !important;
border-radius: 0;
overflow: hidden;
&:has(.description) {
margin: 0;
padding-top: 0;
}
}
& .header {
position: absolute;
top: 4px;
left: 2px;
padding: 0 2px;
border-top: none;
text-align: left;
z-index: 30;
}
& .title {
position: relative;
display: inline;
padding: 0 0 1px;
font-family: var(--font-sans) !important;
font-weight: 400 !important;
font-size: 13px;
color: var(--color-text);
letter-spacing: 0;
line-height: 16px;
font-feature-settings: "palt";
background: linear-gradient(var(--color-white) 0 0) left / 100% 16px no-repeat;
border-radius: 0;
z-index: 30;
}
& .description {
display: flex;
flex-direction: column;
max-height: 16em;
padding: 4em 2px 0;
margin-inline: 0;
line-height: 16px;
aspect-ratio: 1 / 1;
.line,
.line code,
.line span {
}
br {
display: none;
}
}
& img.inline-icon {
border-radius: 0;
width: auto;
padding: 0;
}
& .icon {
flex: auto !important;
padding: 0;
margin-inline: 0;
border-radius: 0 !important;
aspect-ratio: 1 / 1;
& img {
object-fit: cover;
object-position: top;
height: 100%;
border-radius: 0;
transition: transform 0.2s ease;
}
}
/* ホバーオーバーレイ用の疑似要素 */
&::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0);
mix-blend-mode: screen;
transition: background-color 0s ease, backdrop-filter 0s ease;
z-index: 10;
pointer-events: none;
}
&:hover .icon img {
transform: scale(1.0);
}
}
}
/* ホバー背景を透明に */
.grid li.page-list-item a .hover {
background-color: transparent;
}
/*──────────────────────────────
グリッド：特殊パターン
──────────────────────────────*/
ul.grid {
.page-list & li.page-list-item {
/* メンバーカード：アイコンのみ中央配置 */
grid-column: span 2 !important;
grid-row: span 2 !important;
aspect-ratio: auto;
& .content {
display: flex;
justify-content: center;
align-items: center;
height: 100% !important;
}
& .header {
display: none;
}
& a {
height: 100%;
& .icon {
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
& img {
height: unset !important;
}
}
}
}
/* 写真カード：2カラム幅、タイトル非表示 */
/* grid-column: span 2; */
& a {
height: 100%;
padding: 0;
&:hover {
opacity: .8;
}
}
& .content {
height: 100% !important;
}
& .header {
display: none;
}
& a .icon {
aspect-ratio: 2 / 1;
}
}
/* ピン留めカード */
&.pin {
grid-column: span 2;
grid-row: span 1;
& .header .title {
color: var(--color-white);
background: linear-gradient(var(--color-black) 0 0) left / 100% 14px no-repeat;
}
/* スペーサー用の空カード */
grid-column: span 2;
grid-row: span 1;
pointer-events: none;
& a{
position: relative;
&::after{
content: "";
position: absolute;
top: 111px;
left: -26px;
width: 113%;
background: var(--color-border);
height: 0.5px;
transform: rotate(-28deg);
}
}
& a .content {
display: none;
}
}
}
/* WIP */
& .header .title {
color: var(--color-gray-dark);
}
/*
& .title {
&::after{
white-space: nowrap;
}
}
*/
& .description{
&::before{
color: var(--color-gray-dark);
white-space: nowrap;
}
}
}
}
}
/*──────────────────────────────
関連ページリスト
──────────────────────────────*/
.related-page-list {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
border-top: 1px var(--color-border-light) solid;
border-right: 1px var(--color-border-light) solid;
/* 左側の線 */
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: var(--color-border-light);
}
& .grid li {
aspect-ratio: 1/1;
&.page-list-item {
height: auto;
margin: 0 !important;
aspect-ratio: auto;
grid-column: span 1;
grid-row: span 1;
border-bottom: 1px var(--color-border-light) solid;
border-right: 1px var(--color-border-light) solid;
}
}
/* 関連ラベル（カテゴリタイトル） */
& .grid li.relation-label a {
aspect-ratio: 1/1;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--color-text);
border-bottom: 1px var(--color-border-light) solid;
border-right: 1px var(--color-border-light) solid;
background: transparent;
}
/* リンク系ラベルは斜線パターンなし */
& li.relation-label:is(.links, .project-links) a {
background-image: none;
}
}
/*══════════════════════════════════════════════════════════════
レスポンシブ対応
══════════════════════════════════════════════════════════════*/
/* タッチデバイス */
@media (hover: none) {
/* ブランドアイコン表示 */
.brand-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
pointer-events: auto;
&::after{
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
content: "menu";
vertical-align: middle;
display: inline-block;
}
}
}
/* 1300px以下：スペーサー非表示 */
@media screen and (max-width: 1300px) {
ul.grid {
.page-list & li.page-list-item {
&.pin {
grid-column: span 1;
display: none;
}
}
}
}
}
/* 768px以下：モバイル対応 */
@media screen and (max-width: 768px) {
/* ベースリセット */
html, body, .page, .content {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
/* コンテナ幅調整 */
.container, .row, .col-page, .links-container {
max-width: 100% !important;
width: 100% !important;
}
.row {
height: auto !important;
padding: 16px !important;
}
.new-button {
margin-right: 0;
}
.app {
padding-top: 0 !important;
}
.col-page {
left: 0;
}
ul.grid {
li.page-list-item {
grid-row: span 1 !important;
aspect-ratio: 2 / 1;
}
a {
& .title {
font-size: 14px;
padding: 1px 2px 3px;
}
}
}
}
/* 動画サイズ調整 */
.iframe-video-player iframe {
max-height: 50vw;
}
/* フォントサイズ調整 */
/*.lines,*/
textarea,
.editor textarea,
.text-input {
font-size: .8em !important;
}
/* サイドメニュー非表示 */
.expandable-menu,
.expandable-menu-margin {
display: none;
}
/* インデントドット調整 */
.app .line .indent-mark .dot {
margin-top: 0.1em;
right: 4.5px;
}
/* 画像調整 */
width: calc(50% - 6px);
}
}
/* 640px以下：2列グリッド */
@media screen and (max-width: 640px) {
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: 1fr 1fr;
}
}
/* EOF */