From 5446283fe20d224d2fe73537c0a6bd649c5d8b92 Mon Sep 17 00:00:00 2001 From: yamamoto Date: Fri, 23 Oct 2026 02:10:31 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style(manager):=20SoftSlate=20=E3=82=92?= =?UTF-8?q?=E3=83=95=E3=83=A9=E3=83=83=E3=83=88=E3=81=A7=E7=AB=AF=E6=AD=A3?= =?UTF-8?q?=E3=81=AA=E6=A5=AD=E5=8B=99=E3=82=B7=E3=82=B9=E3=83=86=E3=83=A0?= =?UTF-8?q?=E5=90=91=E3=81=91=E3=81=AE=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=81=AB?= =?UTF-8?q?=E6=95=B4=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 落ち着いたブルーグレーと情報密度はそのままに、古い印象の装飾を整理する。 - ページヘッダー: リソース編集などでタイトルの灰色の帯と右上の操作ボタン群が重なっていたため、 タイトルをメイン幅いっぱいの白い帯にし、ボタン群(白地と細い枠でまとめる)をその右側に収めて 一つのヘッダーにする。幅 1200px 以下ではボタン群をタイトルの下の段に置き、重ならないようにする - タブ: フラットなフォルダ型にする。未選択は薄いグレー、選択中は白地・太字(600)・上端のスレートの線で示し、 下の中身とつなげる。ホバーは控えめな地色、キーボード操作時はフォーカス枠を出す - セクション: 見出しのグラデーションをやめ、薄い地色と細い枠にする。見出しと本文を一枚の枠にまとめ、 角丸を 6px に抑える - グローバルナビ: 1 段目の縦ストライプをやめ、ごく弱い縦グラデーションにする。未選択の文字を明るくし (コントラスト比 4.7 → 5.3 以上)、選択中は上端の青い線でも示す。フォーカス枠を出す - ツリー: フラットな明るいブルーグレーにし、選択中(地色と枠)とホバー(地色のみ)の差をはっきりさせる - 操作ボタン: 主ボタンのホバーを明るい青にせずスレートを濃くする。削除系は赤い文字と枠にする - モーダルでフッターへ移る #actions には枠と影を付けない Co-Authored-By: Claude Opus 5.5 --- manager/media/style/SoftSlate/style.css | 260 +++++++++++++++++------- 1 file changed, 186 insertions(+), 74 deletions(-) diff --git a/manager/media/style/SoftSlate/style.css b/manager/media/style/SoftSlate/style.css index 8e0a0cda9..e1d46aa6b 100644 --- a/manager/media/style/SoftSlate/style.css +++ b/manager/media/style/SoftSlate/style.css @@ -92,11 +92,23 @@ --color-warning: #444; --color-info: #3CB371; - /* Component Colors - Sections */ - --color-section-header-text: #606060; + /* Component Colors - Sections (白地 + 細い枠。影と丸みは控えめ) */ + --color-section-header-text: #2c3a46; --color-section-header-start: var(--gray-100); - --color-section-header-end: #dddddd; + --color-section-header-end: #f5f7f9; --color-section-bg: #F7F7F7; + --color-heading: #1f2d38; + --color-frame: #d5dce3; + --color-frame-light: #e3e8ec; + --shadow-frame: 0 1px 2px rgba(16, 24, 40, 0.05); + + /* Focus - キーボード操作時の枠 */ + --color-focus: #4a7ba7; + + /* Danger - 削除など取り消せない操作 */ + --color-danger: #b42318; + --color-danger-border: #e0b4ae; + --color-danger-bg-hover: #fdf1f0; /* Component Colors - Navigation */ --color-nav-subnav-start: #4a5f6f; @@ -270,22 +282,56 @@ h1, h2, h3, h4, h5, h6, .subTitle { font-weight: normal; } +/* ページタイトル。灰色の帯をやめ、濃い文字で本文と階層を分ける */ h1 { - font-size: 1.25em; - color: var(--gray-800); + font-size: 1.3em; + color: var(--color-heading); font-weight: bold; - background-color: #d0d0d0; - letter-spacing: 1px; - line-height: 1em; - padding: var(--space-2); + background-color: transparent; + letter-spacing: 0.02em; + line-height: 1.3; + padding: var(--space-2) var(--space-1); border-radius: var(--radius-md); margin: var(--space-2); } +/* 下書きは地色で見分けるため残す */ h1.draft { background-color: #F4E2C3; } +/* シェルでは、タイトルと右上の操作ボタン(#actions。shell.css で fixed)を一つのページヘッダーにまとめる。 + タイトルをメイン領域の幅いっぱいの白い帯にし、ボタン群はその帯の右側に重なる位置に置く。 + ボタン群は DOM 上でタイトルの前にも後にも来るため、並び順に頼らず高さと位置で揃える */ +body.evo-shell #mainPane h1 { + display: flex; + align-items: center; + box-sizing: border-box; + min-height: 64px; + margin: calc(-1 * var(--shell-main-padding, var(--space-2))) calc(-1 * var(--shell-main-padding, var(--space-2))) var(--space-4); + padding: var(--space-2) var(--space-5); + border-radius: 0; + border-bottom: 1px solid var(--color-frame); + background-color: var(--color-surface); +} + +body.evo-shell #mainPane h1.draft { + background-color: #F4E2C3; +} + +/* 狭い画面では、タイトルの下の段にボタン群を置いて重ならないようにする */ +@media (max-width: 1200px) { + body.evo-shell #mainPane:has(#actions) h1 { + align-items: flex-start; + min-height: 112px; + padding-top: var(--space-3); + } + + html body.evo-shell #mainPane:has(h1) #actions { + top: calc(var(--shell-menu-height, 58px) + 52px); + } +} + h2 { font-size: 1.64em; } @@ -727,16 +773,17 @@ form .imeoff { margin-bottom: 10px; } +/* セクション見出し。グラデーションの帯をやめ、ごく薄い地色と下線で本文と区切る */ .sectionHeader { color: var(--color-section-header-text); margin: 0 8px; - padding: 8px 16px; + padding: 10px 16px; font-weight: bold; - border: 1px solid var(--color-border-default); - border-bottom: none; - background: linear-gradient(180deg, var(--gray-100), var(--gray-200)); + border: 1px solid var(--color-frame); + border-bottom-color: var(--color-frame-light); + background: var(--color-section-header-end); box-shadow: none; - border-radius: 8px 8px 0 0; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .tab-page .sectionHeader { @@ -757,11 +804,17 @@ form .imeoff { .tab-page .sectionBody, .section .sectionBody { background: var(--color-surface); - border: 1px solid var(--color-border-default); - border-radius: 0 0 10px 10px; - box-shadow: var(--shadow-sm); + border: 1px solid var(--color-frame); + border-radius: var(--radius-lg); + box-shadow: none; margin: 0 3px 15px; - padding: 15px; + padding: var(--space-4); +} + +/* 見出しの直後は、見出しと一枚の枠にまとめる(二重線にしない) */ +.sectionHeader + .sectionBody { + border-top: none; + border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .rtl .sectionBody { @@ -856,12 +909,19 @@ a img { background-color: var(--gray-100); } +/* ツリーは明るいブルーグレーのフラットな地。メインとの境目は 1px の線にする */ div.treeframebody { - background: linear-gradient(180deg, #f3f5f9 0%, #e9edf5 100%) !important; - box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.08); + background: #eef2f6 !important; + box-shadow: none; padding: var(--space-2); } +/* shell.css の 3px の白い境目を、枠と同じ細い線にする + (shell.css より後に効かせるため html を足して詳細度を上げる) */ +html body.evo-shell > #treePane { + border-inline-end: 1px solid var(--color-frame); +} + #treeMenu * { vertical-align: middle; } @@ -918,18 +978,20 @@ div.treeNode { white-space: nowrap; } +/* ホバーは淡い地色だけ、選択中はスレートの地色と枠で示す。行の寸法は変えない */ .treeNodeSelected, .treeNodeHover { - background-color: rgba(59, 130, 246, 0.12); - border: 1px solid rgba(15, 23, 42, 0.08); + background-color: rgba(61, 79, 93, 0.07); + border: 1px solid transparent; color: #0f172a; padding: 1px 2px; margin-left: -3px; - border-radius: 6px; + border-radius: var(--radius-md); } -.treeNodeHover { - background-color: rgba(59, 130, 246, 0.08); +.treeNodeSelected { + background-color: rgba(61, 79, 93, 0.14); + border-color: rgba(61, 79, 93, 0.45); } .unpublished a, .unpublishedNode { @@ -1192,20 +1254,13 @@ a.hometblink:hover { /* Softer dark gray palette */ --topnav-background: #3d4f5d; --topnav-border: #4a5f6f; - --topnav-link-color: #d4dade; + --topnav-link-color: #e2e7ea; --topnav-link-hover-color: #ffffff; --topnav-link-hover-bg: #4a5f6f; --topnav-link-active-bg: #2f3d48; border-bottom: 1px solid var(--topnav-border); - background: - repeating-linear-gradient( - 90deg, - rgba(255,255,255,0.015) 0px, - rgba(255,255,255,0.015) 1px, - rgba(0,0,0,0) 1px, - rgba(0,0,0,0) 4px - ), - #3d4f5d; + /* 縦ストライプはやめ、スレートブルーのごく弱い縦グラデーションにする */ + background: linear-gradient(180deg, #415465 0%, #3a4b58 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, @@ -1213,7 +1268,7 @@ a.hometblink:hover { } #Navcontainer { - color: #d4dade; + color: var(--topnav-link-color); padding: var(--topnav-padding-top, 10px) var(--subnav-horizontal-padding) calc(var(--subnav-height) + 12px); position: relative; text-shadow: none; @@ -1260,11 +1315,19 @@ a.hometblink:hover { border-color: var(--topnav-border); } +#nav > li > a:focus-visible, +#nav > li > ul.subnav a:focus-visible { + outline: 2px solid #9cc3e0; + outline-offset: -2px; +} + +/* 選択中は 2 段目と同じ地色でつなげ、上端の青い線でも示す */ #nav > li.active > a { background: var(--topnav-link-active-bg); border-color: var(--topnav-link-active-bg); border-top: 1px solid var(--topnav-border); border-bottom: none; + box-shadow: inset 0 2px 0 #7eb3d6; color: var(--topnav-link-hover-color); position: relative; text-shadow: none; @@ -1313,7 +1376,7 @@ a.hometblink:hover { line-height: var(--subnav-height); padding: 0 18px; text-decoration: none; - border-radius: 8px; + border-radius: var(--radius-md); transition: background-color .18s ease, color .18s ease; } @@ -1466,52 +1529,59 @@ a.hometblink:hover { direction: rtl; } +/* タブ。フラットなフォルダ型にする。未選択は薄いグレー、選択中は白地・太字・上端のスレートの線で示し、 + 下の中身(白い枠)とつなげる。タブ列の下線に、選択中のタブの白い下辺を 1px 重ねて切る */ .dynamic-tab-pane-control .tab-row .tab { - color: var(--color-secondary-text); + color: #4a5a67; font-size: 1em; cursor: pointer; display: inline; - margin: 3px 2px 1px 0; + margin: 0 var(--space-1) -1px 0; float: left; padding: 8px 16px; z-index: 1; position: relative; - top: 1px; - border: 1px solid var(--color-secondary-border); - border-radius: 5px 5px 0 0; - background-color: var(--color-secondary-start); + top: 0; + border: 1px solid var(--color-frame); + border-radius: var(--radius-md) var(--radius-md) 0 0; + background-color: #e8edf1; + transition: background-color var(--transition-fast), color var(--transition-fast); } .rtl .dynamic-tab-pane-control .tab-row .tab { - margin: 3px 5px 1px -3px; + margin: 0 0 -1px var(--space-1); float: right; - padding: 2px 15px 3px; + padding: 8px 16px; } .dynamic-tab-pane-control .tab-row .tab:hover { text-decoration: none; - color: var(--color-secondary-hover-text); - border-color: var(--color-secondary-border); - background-color: var(--color-secondary-hover-start); - background-image: linear-gradient(var(--color-secondary-hover-start), var(--color-secondary-hover-end)); + color: var(--color-heading); + border-color: var(--color-frame); + background-color: #dde4ea; + background-image: none; +} + +.dynamic-tab-pane-control .tab-row .tab:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: -2px; } .dynamic-tab-pane-control .tab-row .tab.selected { - color: var(--gray-900); + color: var(--color-heading); + font-weight: 600; z-index: 999; - top: 1px; - border-width: 1px; - border-bottom-style: solid; - border-color: var(--color-primary-hover-end) #b7c2c7 #FFF #b7c2c7; - border-radius: 5px 5px 0 0; - border-width: 1px 1px 0; + top: 0; + border-color: var(--color-frame); + border-bottom-color: var(--color-surface); background-color: var(--color-surface); background-image: none; + box-shadow: inset 0 2px 0 var(--color-primary); } .dynamic-tab-pane-control .tab-row .tab.selected span { - color: #111; - background-color: var(--color-surface); + color: inherit; + background-color: transparent; text-shadow: none; } @@ -1525,14 +1595,15 @@ a.hometblink:hover { } .dynamic-tab-pane-control .tab-row .tab.selected:hover { - color: var(--gray-900); - border-color: var(--color-primary-hover-end) #b7c2c7 #FFF #b7c2c7; + color: var(--color-heading); + border-color: var(--color-frame); + border-bottom-color: var(--color-surface); background-color: var(--color-surface); background-image: none; } .dynamic-tab-pane-control .tab-row .tab.selected:hover span { - color: #111; + color: inherit; } .dynamic-tab-pane-control .tab-row .tab .alert { @@ -1543,13 +1614,16 @@ a.hometblink:hover { color: #c00; } +/* タブの中身。上辺はタブ列の下線が受け持つので、残りの 3 辺を細い枠で囲む */ .dynamic-tab-pane-control .tab-page { clear: both; background: var(--color-surface); z-index: 2; position: relative; - top: -2px; - padding: 20px 15px 14px !important; + top: 0; + border-top: none; + box-shadow: var(--shadow-frame); + padding: 20px 16px 16px !important; } .rtl .dynamic-tab-pane-control .tab-page { @@ -1559,6 +1633,9 @@ a.hometblink:hover { .dynamic-tab-pane-control .tab-row { z-index: 1; white-space: nowrap; + /* float のタブを包み、下線をタブの下に引く */ + display: flow-root; + border-bottom: 1px solid var(--color-frame); } .dynamic-tab-pane-control ul { @@ -1626,8 +1703,8 @@ a.hometblink, a.hometblink img { } .tab-page { - border: 1px solid var(--color-secondary-border); - border-radius: 0 0 10px 10px; + border: 1px solid var(--color-frame); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #ffffff; } @@ -1737,8 +1814,12 @@ h2#edit_document_title { ============================================================================ */ /* from https://github.com/manse/ScienceStyle */ +/* 操作ボタンの群。灰色の半透明の帯をやめ、白地と細い枠でまとめる。 + ページヘッダー(h1)の帯の上にも、スクロール後の本文の上にも自然に乗るようにする */ #actions { - background: none repeat scroll 0 0 rgba(60, 60, 60, 0.2); + background: var(--color-surface); + border: 1px solid var(--color-frame); + box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); margin: 0; padding: var(--space-2) var(--space-4) !important; position: fixed; @@ -1746,7 +1827,13 @@ h2#edit_document_title { text-align: right; top: var(--space-2); z-index: 100; - border-radius: var(--space-2); + border-radius: var(--radius-lg); +} + +/* モーダルでは shell.js が #actions をフッターへ移す。shell.css は位置と背景だけを戻すため、枠と影もここで外す */ +body.evo-shell #evoShellModalFooter #actions { + border: none; + box-shadow: none; } select#stay { @@ -1802,16 +1889,22 @@ ul.actionButtons { .actionButtons a { display: block; float: left; - border-radius: 6px; - border: 1px solid var(--color-neutral-button-border); - color: var(--gray-900); + border-radius: var(--radius-md); + border: 1px solid #c3ccd4; + color: var(--color-heading); font-size: 1em; font-weight: 700; outline: medium none; padding: 8px 12px; text-decoration: none; white-space: nowrap; - background-color: var(--color-neutral-button-start); + background-color: var(--color-surface); + transition: background-color var(--transition-fast), border-color var(--transition-fast); +} + +.actionButtons a:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: 2px; } .actionButtons a.disabled img { @@ -1820,7 +1913,7 @@ ul.actionButtons { .actionButtons a:hover { border-color: var(--color-neutral-button-border); - background-color: var(--color-neutral-button-hover-end); + background-color: #f0f3f6; } .actionButtons a:active { @@ -1868,10 +1961,29 @@ ul.actionButtons { border-color: var(--color-primary-end); } +/* 主ボタンのホバーは、明るい青に変えず同じスレートを一段濃くする */ .actionButtons #Button1 a:hover, .actionButtons a:hover.default { - background-color: var(--color-primary-hover-start); - border-color: var(--color-primary-hover-end); + color: #fff; + background-color: #33434f; + border-color: #33434f; +} + +/* 削除系。取り消せない操作なので赤い文字と枠で示す。 + リソースは li#delete / li#deletedraft、エレメントやユーザーは onclick="delete…();" のボタン */ +.actionButtons #delete a, +.actionButtons #deletedraft a, +.actionButtons a[onclick^="delete"] { + color: var(--color-danger); + border-color: var(--color-danger-border); +} + +.actionButtons #delete a:hover, +.actionButtons #deletedraft a:hover, +.actionButtons a[onclick^="delete"]:hover { + color: var(--color-danger); + border-color: var(--color-danger); + background-color: var(--color-danger-bg-hover); } .actionButtons #Button1 a:active, From a9a3dcdce54866492d4f805bf8106dfe76081be8 Mon Sep 17 00:00:00 2001 From: yamamoto Date: Fri, 23 Oct 2026 02:19:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?style(manager):=20SoftSlate=20=E3=81=AE?= =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB=E3=81=A8=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=85=83=E3=81=AE=E6=B5=AE?= =?UTF-8?q?=E9=81=8A=E8=A1=A8=E7=A4=BA=E3=81=A8=E3=82=B3=E3=83=B3=E3=83=91?= =?UTF-8?q?=E3=82=AF=E3=83=88=E3=81=AA=E9=85=8D=E7=BD=AE=E3=81=AB=E6=88=BB?= =?UTF-8?q?=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 前回、タイトル(h1)をメイン幅いっぱいのページヘッダーにした指定(min-height 64px、下余白 16px、 狭い画面では 112px)で、タブとフォームが 30px 以上押し下げられ、情報密度が下がっていた。 - ページヘッダーの指定と、狭い画面でボタン群を下の段に置く指定を削除し、h1 を元の寸法に戻す (灰色の帯をやめた見た目は残す)。操作ボタン群は shell.css の fixed のまま右上に浮かぶ - 幅 1100px 以下では右上のボタン群がタイトルを覆うため、浮かせる位置だけ右下へ移す。 本文は押し下げず、最後の項目が隠れないよう下側に余白を足す - セクション見出しと本文、タブの中身の余白も元の値に戻す Co-Authored-By: Claude Opus 5.5 --- manager/media/style/SoftSlate/style.css | 51 ++++++++----------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/manager/media/style/SoftSlate/style.css b/manager/media/style/SoftSlate/style.css index e1d46aa6b..e65e5f3cb 100644 --- a/manager/media/style/SoftSlate/style.css +++ b/manager/media/style/SoftSlate/style.css @@ -284,13 +284,13 @@ h1, h2, h3, h4, h5, h6, .subTitle { /* ページタイトル。灰色の帯をやめ、濃い文字で本文と階層を分ける */ h1 { - font-size: 1.3em; + font-size: 1.25em; color: var(--color-heading); font-weight: bold; background-color: transparent; - letter-spacing: 0.02em; - line-height: 1.3; - padding: var(--space-2) var(--space-1); + letter-spacing: 1px; + line-height: 1em; + padding: var(--space-2); border-radius: var(--radius-md); margin: var(--space-2); } @@ -300,35 +300,16 @@ h1.draft { background-color: #F4E2C3; } -/* シェルでは、タイトルと右上の操作ボタン(#actions。shell.css で fixed)を一つのページヘッダーにまとめる。 - タイトルをメイン領域の幅いっぱいの白い帯にし、ボタン群はその帯の右側に重なる位置に置く。 - ボタン群は DOM 上でタイトルの前にも後にも来るため、並び順に頼らず高さと位置で揃える */ -body.evo-shell #mainPane h1 { - display: flex; - align-items: center; - box-sizing: border-box; - min-height: 64px; - margin: calc(-1 * var(--shell-main-padding, var(--space-2))) calc(-1 * var(--shell-main-padding, var(--space-2))) var(--space-4); - padding: var(--space-2) var(--space-5); - border-radius: 0; - border-bottom: 1px solid var(--color-frame); - background-color: var(--color-surface); -} - -body.evo-shell #mainPane h1.draft { - background-color: #F4E2C3; -} - -/* 狭い画面では、タイトルの下の段にボタン群を置いて重ならないようにする */ -@media (max-width: 1200px) { - body.evo-shell #mainPane:has(#actions) h1 { - align-items: flex-start; - min-height: 112px; - padding-top: var(--space-3); +/* 狭い画面では、右上に浮かぶ操作ボタン群(shell.css で fixed)がタイトルを覆うため、浮かせる位置を右下へ移す。 + 本文は押し下げず、最後の項目がボタン群に隠れないよう下側にだけ余白を足す */ +@media (max-width: 1100px) { + html body.evo-shell #mainPane #actions { + top: auto; + bottom: var(--space-2); } - html body.evo-shell #mainPane:has(h1) #actions { - top: calc(var(--shell-menu-height, 58px) + 52px); + html body.evo-shell > #mainPane:has(#actions) { + padding-bottom: 72px; } } @@ -777,7 +758,7 @@ form .imeoff { .sectionHeader { color: var(--color-section-header-text); margin: 0 8px; - padding: 10px 16px; + padding: 8px 16px; font-weight: bold; border: 1px solid var(--color-frame); border-bottom-color: var(--color-frame-light); @@ -808,7 +789,7 @@ form .imeoff { border-radius: var(--radius-lg); box-shadow: none; margin: 0 3px 15px; - padding: var(--space-4); + padding: 15px; } /* 見出しの直後は、見出しと一枚の枠にまとめる(二重線にしない) */ @@ -1623,7 +1604,7 @@ a.hometblink:hover { top: 0; border-top: none; box-shadow: var(--shadow-frame); - padding: 20px 16px 16px !important; + padding: 20px 15px 14px !important; } .rtl .dynamic-tab-pane-control .tab-page { @@ -1815,7 +1796,7 @@ h2#edit_document_title { /* from https://github.com/manse/ScienceStyle */ /* 操作ボタンの群。灰色の半透明の帯をやめ、白地と細い枠でまとめる。 - ページヘッダー(h1)の帯の上にも、スクロール後の本文の上にも自然に乗るようにする */ + 右上に浮かび、タイトルの上にもスクロール後の本文の上にも重なる */ #actions { background: var(--color-surface); border: 1px solid var(--color-frame); From 63ce01d5d7af650a3c2841cba76f0448aa56cccc Mon Sep 17 00:00:00 2001 From: yamamoto Date: Fri, 23 Oct 2026 02:24:00 +0900 Subject: [PATCH 3/3] =?UTF-8?q?style(manager):=20SoftSlate=20=E3=81=AE?= =?UTF-8?q?=E3=82=B0=E3=83=AD=E3=83=BC=E3=83=90=E3=83=AB=E3=83=8A=E3=83=93?= =?UTF-8?q?=E3=81=AE=E9=81=B8=E6=8A=9E=E4=B8=AD=E3=81=8B=E3=82=89=E6=B0=B4?= =?UTF-8?q?=E8=89=B2=E3=81=AE=E4=B8=8A=E8=BE=BA=E7=B7=9A=E3=82=92=E3=81=AA?= =?UTF-8?q?=E3=81=8F=E3=81=97=E3=80=81=E7=99=BD=E3=81=84=E5=A4=AA=E5=AD=97?= =?UTF-8?q?=E3=81=A7=E7=A4=BA=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 選択中の項目に付けていた水色の内側の影(上辺の線)と、上辺だけ明るい枠線をやめる。 2 段目と同じ暗いスレートの地色と、白い太字(600)で選択中を示し、角丸を 4px に抑える。 枠線の幅は残すため、ナビの高さと項目の位置・寸法は変わらない。 Co-Authored-By: Claude Opus 5.5 --- manager/media/style/SoftSlate/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/manager/media/style/SoftSlate/style.css b/manager/media/style/SoftSlate/style.css index e65e5f3cb..1a232e028 100644 --- a/manager/media/style/SoftSlate/style.css +++ b/manager/media/style/SoftSlate/style.css @@ -1302,14 +1302,14 @@ a.hometblink:hover { outline-offset: -2px; } -/* 選択中は 2 段目と同じ地色でつなげ、上端の青い線でも示す */ +/* 選択中は 2 段目と同じ暗いスレートの地色でつなげ、白い太字で示す。線や影は付けない */ #nav > li.active > a { background: var(--topnav-link-active-bg); border-color: var(--topnav-link-active-bg); - border-top: 1px solid var(--topnav-border); border-bottom: none; - box-shadow: inset 0 2px 0 #7eb3d6; + border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--topnav-link-hover-color); + font-weight: 600; position: relative; text-shadow: none; z-index: 2;