/** * 青木・伊藤（康）研究室 — 公開サイト共通スタイル * Bootstrap 5.3.3 の data-bs-theme と連動する CSS 変数設計 * （将来: light / dark / system 切替を で拡張） */ /* --- ライトモード（Claude 風 — デフォルト） --- */ :root, [data-bs-theme="light"] { --lab-bg-main: #FBFAF7; --lab-text-primary: #191816; --lab-brand-accent: #CC6B49; --lab-surface-card: #FFFFFF; --lab-primary: var(--lab-brand-accent); --lab-primary-rgb: 204, 107, 73; --lab-accent: var(--lab-brand-accent); --lab-accent-rgb: 204, 107, 73; --lab-pill-bg: var(--lab-brand-accent); --lab-nav-bg: var(--lab-bg-main); --lab-footer-bg: var(--lab-bg-main); --lab-body-bg: var(--lab-bg-main); --lab-surface: var(--lab-surface-card); --lab-surface-elevated: var(--lab-surface-card); --lab-text: var(--lab-text-primary); --lab-text-muted: #6b6560; --lab-border: rgba(25, 24, 22, 0.1); --lab-navbar-height: 4rem; --lab-footer-min-height: 3.25rem; --lab-radius: 0.75rem; --bs-primary: var(--lab-brand-accent); --bs-primary-rgb: var(--lab-primary-rgb); --bs-success: var(--lab-brand-accent); --bs-success-rgb: var(--lab-accent-rgb); --bs-body-bg: var(--lab-bg-main); --bs-body-color: var(--lab-text-primary); --bs-link-color: var(--lab-brand-accent); --bs-link-hover-color: #a85538; --bs-border-color: var(--lab-border); --bs-border-radius: var(--lab-radius); --bs-border-radius-lg: 1rem; } /* --- ダークモード --- */ [data-bs-theme="dark"] { --lab-bg-main: #121212; --lab-text-primary: #e8eaed; --lab-brand-accent: #d4846a; --lab-surface-card: #1e1e1e; --lab-primary: var(--lab-brand-accent); --lab-primary-rgb: 212, 132, 106; --lab-accent: var(--lab-brand-accent); --lab-accent-rgb: 212, 132, 106; --lab-pill-bg: var(--lab-brand-accent); --lab-nav-bg: #1e1e1e; --lab-footer-bg: #1e1e1e; --lab-body-bg: #121212; --lab-surface: #1e1e1e; --lab-surface-elevated: #2a2a2a; --lab-text: var(--lab-text-primary); --lab-text-muted: #9aa0a6; --lab-border: rgba(255, 255, 255, 0.1); --bs-primary: var(--lab-brand-accent); --bs-primary-rgb: var(--lab-primary-rgb); --bs-success: var(--lab-brand-accent); --bs-success-rgb: var(--lab-accent-rgb); --bs-body-bg: var(--lab-body-bg); --bs-body-color: var(--lab-text); --bs-link-color: var(--lab-brand-accent); --bs-link-hover-color: #e8a088; --bs-border-color: var(--lab-border); } /* --- ベースレイアウト --- */ html { scroll-behavior: smooth; } body.lab-body { background-color: var(--lab-bg-main); color: var(--lab-text-primary); letter-spacing: 0.02em; min-height: 100vh; } .lab-surface-card { background-color: var(--lab-surface-card); } /* --- ナビゲーション（旧 menu.php の #d1e7dd をモダン化） --- */ .lab-navbar { background-color: var(--lab-nav-bg) !important; border-bottom: 1px solid var(--lab-border); min-height: var(--lab-navbar-height); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .lab-navbar .navbar-brand, .lab-navbar .lab-navbar-brand { color: var(--lab-primary); font-weight: 700; letter-spacing: 0.02em; padding-top: 0.25rem; padding-bottom: 0.25rem; } .lab-navbar-brand-img { display: block; height: 40px; width: auto; } .lab-navbar .nav-link { color: var(--lab-text); font-weight: 500; border-radius: 0.375rem; transition: color 0.15s ease, background-color 0.15s ease; } .lab-navbar .nav-link:hover, .lab-navbar .nav-link:focus { color: var(--lab-primary); } .lab-navbar .nav-link.active { color: var(--lab-primary); background-color: rgba(var(--lab-primary-rgb), 0.1); font-weight: 600; } .lab-navbar .nav-link.lab-nav-link-pending { color: var(--lab-text-muted); opacity: 0.85; cursor: default; pointer-events: none; } .lab-navbar .dropdown-menu .dropdown-item.active, .lab-navbar .dropdown-menu .dropdown-item:active { background-color: rgba(var(--lab-primary-rgb), 0.1); color: var(--lab-primary); } [data-bs-theme="dark"] .lab-navbar .navbar-toggler { border-color: var(--lab-border); } [data-bs-theme="dark"] .lab-navbar .navbar-toggler-icon { filter: invert(1); } /* --- ヘッダー帯（Claude 風ミニマル単色グラデーション） --- */ .lab-hero { position: relative; background-color: var(--lab-bg-main); background-image: linear-gradient( 135deg, rgba(var(--lab-primary-rgb), 0.05) 0%, var(--lab-bg-main) 45%, rgba(var(--lab-primary-rgb), 0.03) 100% ); color: var(--lab-text); } .lab-hero h1, .lab-hero .lab-hero-title { font-size: clamp(1.05rem, 2.5vw, 1.35rem); font-weight: 400; line-height: 1.65; margin-bottom: 0; } /* --- メインコンテンツ --- */ .lab-main { flex: 1 0 auto; } /* --- フッター（旧 footer.php の表記を継承、固定配置は廃止してモダン化） --- */ .lab-footer { background-color: var(--lab-footer-bg); border-top: 1px solid var(--lab-border); color: var(--lab-text-muted); font-size: 0.875rem; margin-top: auto; min-height: var(--lab-footer-min-height); } .lab-footer .lab-footer-affiliation { color: var(--lab-text); font-size: 0.8125rem; line-height: 1.6; } .lab-footer .lab-footer-copyright { font-size: 0.8125rem; } .lab-footer-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.875rem; color: var(--lab-text); margin-bottom: 0; } .lab-footer-contact .bi-envelope-fill { font-size: 1rem; } .lab-footer-email { direction: rtl; unicode-bidi: bidi-override; color: var(--lab-text); cursor: default; user-select: all; } /* --- ブランドカラー: アイコン・リンク --- */ .lab-icon-primary { color: var(--lab-primary) !important; } .lab-icon-accent { color: var(--lab-accent) !important; } a.lab-link-primary { color: var(--lab-primary); text-decoration: none; } a.lab-link-primary:hover, a.lab-link-primary:focus { color: var(--bs-link-hover-color); text-decoration: underline; } /* --- ブランドカラー: outline ボタン --- */ .btn-outline-primary { --bs-btn-color: var(--lab-primary); --bs-btn-border-color: var(--lab-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lab-primary); --bs-btn-hover-border-color: var(--lab-primary); --bs-btn-active-bg: var(--lab-primary); --bs-btn-active-border-color: var(--lab-primary); --bs-btn-focus-shadow-rgb: var(--lab-primary-rgb); } .btn-outline-success { --bs-btn-color: var(--lab-accent); --bs-btn-border-color: var(--lab-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lab-accent); --bs-btn-hover-border-color: var(--lab-accent); --bs-btn-active-bg: var(--lab-accent); --bs-btn-active-border-color: var(--lab-accent); --bs-btn-focus-shadow-rgb: var(--lab-accent-rgb); } .lab-badge-pending { font-size: 0.6875rem; font-weight: 400; vertical-align: middle; } /* --- 旧サイト互換: 業績テーブル・カード（引き算: border なし） --- */ .lab-section-card { background-color: var(--lab-surface-card); border: 0; border-radius: var(--lab-radius); box-shadow: 0 0.125rem 0.5rem rgba(25, 24, 22, 0.06); } .lab-service-card { background-color: var(--lab-surface-card); border: 1px solid var(--lab-border); border-radius: var(--lab-radius); box-shadow: 0 0.125rem 0.375rem rgba(25, 24, 22, 0.04); transition: box-shadow 0.15s ease, transform 0.15s ease; } .lab-service-card:hover { box-shadow: 0 0.25rem 0.75rem rgba(25, 24, 22, 0.08); } .lab-service-card--admin { border-color: rgba(204, 107, 73, 0.2); } .lab-service-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--lab-radius); background-color: rgba(var(--lab-primary-rgb), 0.1); color: var(--lab-brand-accent); } .letter-spacing-wide { letter-spacing: 0.06em; } .lab-table-heading { background-color: var(--lab-primary) !important; color: #fff !important; } [data-bs-theme="dark"] .lab-table-heading { background-color: var(--lab-surface-elevated) !important; color: var(--lab-text) !important; border-bottom: 2px solid var(--lab-primary); } .lab-pill, .badge.lab-pill { background-color: var(--lab-pill-bg) !important; color: #fff; } /* --- トップページ --- */ .lab-home-news-tabs { border-bottom-color: var(--lab-border); } .lab-home-news-tabs .nav-link { color: var(--lab-text-muted); font-size: 0.875rem; font-weight: 500; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 0.75rem; } .lab-home-news-tabs .nav-link:hover, .lab-home-news-tabs .nav-link:focus { color: var(--lab-primary); border-bottom-color: rgba(var(--lab-primary-rgb), 0.35); isolation: isolate; } .lab-home-news-tabs .nav-link.active { color: var(--lab-primary); background-color: transparent; border-bottom: 2px solid var(--lab-primary); font-weight: 600; } /* --- トップページ: ダッシュボード（左 7 ボタン高さ = 右新着カード高さ） --- */ .lab-home-action-stack { height: 100%; } .lab-home-action-stack > a.list-group-item, .lab-home-action-stack > .list-group-item { padding: 0.625rem 1rem; min-height: 3.875rem; } @media (min-width: 992px) { .lab-home-top-row { align-items: stretch; } .lab-home-top-row > [class*="col-"] { display: flex; flex-direction: column; align-self: stretch; } .lab-home-action-stack { flex: 0 0 auto; } .lab-home-news-col { position: relative; min-height: 0; flex: 1 1 auto; } .lab-home-news-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; height: 100%; } .lab-home-news-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .lab-home-news-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .lab-home-news-scroll .tab-content { display: flex; flex-direction: column; min-height: 0; height: 100%; } .lab-home-news-scroll .tab-pane.show.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } } /* --- トップページ: 新着タブ領域（スクロール内リスト） --- */ .lab-home-news-scroll .tab-pane.show.active { padding: 0.25rem 0.5rem 0; border-radius: 0.375rem; background-color: rgba(var(--lab-primary-rgb), 0.04); } .lab-home-news-scroll .lab-home-feed-list { flex: 1 1 auto; min-height: 0; margin-bottom: 0; } /* --- トップページ: 旧センター型タイル（後方互換） --- */ .lab-home-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 1rem 1.25rem; text-decoration: none; color: inherit; background-color: var(--lab-surface); border-radius: 0.5rem; transition: background-color 0.2s ease; } .lab-home-tile:not(.lab-home-tile--disabled):hover, .lab-home-tile:not(.lab-home-tile--disabled):focus-visible { background-color: rgba(var(--lab-primary-rgb), 0.06); color: inherit; } .lab-home-tile--disabled { cursor: default; opacity: 0.92; } .lab-home-tile h2 { margin-bottom: 0.25rem; line-height: 1.4; } .lab-home-tile-desc { font-size: 0.8125rem; color: var(--lab-text-muted); margin-bottom: 0; line-height: 1.55; max-width: 100%; } .lab-home-tile-desc.text-start { text-align: start; align-self: stretch; } /* --- トップページ: 新着フィードヘッダー --- */ .lab-home-feed-header { padding: 0.625rem 0.5rem 0; } /* --- トップページ: 新着フィード（バッジなし極限フラット1行） --- */ .lab-home-feed-pane { flex: 1 1 auto; min-height: 0; } .lab-home-feed-list .lab-home-feed-row { padding-top: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--lab-border); } .lab-home-feed-list .lab-home-feed-row:last-child { border-bottom: none; } .lab-home-feed-row { transition: background-color 0.15s ease; } .lab-home-feed-row:hover, .lab-home-feed-row:focus-within { background-color: rgba(var(--lab-accent-rgb), 0.06); } /* 日付: 固定幅でグレー表示。tabular-nums で桁揃え */ .lab-feed-date { font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--lab-text-muted); white-space: nowrap; min-width: 7.5rem; /* "YYYY.MM.DD HH:MM" の最大幅を確保 */ letter-spacing: 0.01em; } /* タイトルリンク: 1行、はみ出た長文は「...」で省略 */ .lab-feed-link { display: inline-block; max-width: calc(100% - 10rem); color: var(--lab-text); text-decoration: none; font-size: 0.8125rem; line-height: 1.45; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .lab-feed-link:hover, .lab-feed-link:focus { color: var(--lab-primary); text-decoration: underline; } /* カテゴリバッジ（論文・学会・受賞・活動） */ .lab-feed-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; line-height: 1; padding: 0.2em 0.5em; border-radius: 0.25rem; white-space: nowrap; letter-spacing: 0.03em; vertical-align: middle; } /* 論文・学会: 落ち着いたブルー系 */ .lab-feed-badge--journal, .lab-feed-badge--conference { background-color: rgba(13, 110, 253, 0.1); color: #0a58ca; } /* 活動: イベント連動オレンジ・アースカラー */ .lab-feed-badge--activity, .lab-feed-badge--event { background-color: rgba(var(--lab-primary-rgb), 0.12); color: var(--lab-brand-accent); } /* 受賞: ゴールド・サフラン系 */ .lab-feed-badge--award { background-color: rgba(212, 167, 44, 0.15); color: #9a7209; } /* その他: 控えめなグレー・セカンダリー */ .lab-feed-badge--other { background-color: rgba(108, 117, 125, 0.12); color: var(--lab-text-muted); } [data-bs-theme="dark"] .lab-feed-badge--journal, [data-bs-theme="dark"] .lab-feed-badge--conference { background-color: rgba(110, 168, 254, 0.15); color: #6ea8fe; } [data-bs-theme="dark"] .lab-feed-badge--award { background-color: rgba(255, 193, 7, 0.12); color: #ffc107; } [data-bs-theme="dark"] .lab-feed-badge--other { background-color: rgba(173, 181, 189, 0.12); color: #adb5bd; } .lab-home-feed-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; } .lab-home-feed-footer { margin-top: auto; padding: 0.5rem 0.5rem 0.125rem; border-top: 1px solid var(--lab-border); } .lab-home-feed-more-link { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; font-weight: 500; color: var(--lab-text-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.15s ease; } .lab-home-feed-more-link:hover, .lab-home-feed-more-link:focus { color: var(--lab-primary); text-decoration: underline; } /* --- メンバー名簿（T3-V-11） --- */ .lab-roster-container { max-width: 960px; } .lab-roster-card { overflow: hidden; } .lab-roster-photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .lab-roster-photo-placeholder { aspect-ratio: 4 / 3; background-color: rgba(var(--lab-primary-rgb), 0.06); } /* --- HTMX インジケータ --- */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } /* --- アクセシビリティ: 動きの抑制 --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lab-navbar .nav-link { transition: none; } .lab-home-tile, .lab-home-feed-row { transition: none; } } /* --- イベント一覧（公開・エディトリアル・カード） --- */ .lab-event-list { font-size: 0.92rem; line-height: 1.6; } .lab-event-item { overflow: hidden; } .lab-event-date { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--lab-brand-accent); } .lab-event-content { font-size: 0.92rem; line-height: 1.6; color: var(--lab-text-primary); } .lab-event-meta { font-size: 0.75rem; color: var(--lab-text-muted); opacity: 0.85; } @media (min-width: 992px) { .lab-event-media-col { flex: 0 0 40%; max-width: 40%; } .lab-event-body-col { flex: 0 0 60%; max-width: 60%; } } .lab-event-photo-wrap { background-color: #f8f9fa; border: 1px solid var(--lab-border); display: flex; align-items: center; justify-content: center; min-height: 10rem; padding: 0.5rem; } .lab-event-photo-wrap--grid { min-height: 8rem; } [data-bs-theme="dark"] .lab-event-photo-wrap { background-color: var(--lab-surface-elevated); } .lab-event-photo-img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; object-fit: contain; } .lab-event-photo-wrap--grid .lab-event-photo-img { max-height: 180px; } .lab-event-photo-caption { color: var(--lab-text-muted); line-height: 1.4; } /* --- 活動記録（Event）管理画面 --- */ .event-list-hero-ratio { max-height: 21.875rem; } .event-list-hero-ratio > .event-photo-img { object-position: center center; } .event-photo-img { object-fit: cover; width: 100%; height: 100%; } .event-photo-caption { color: var(--lab-text-muted); line-height: 1.4; } .event-manage-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 0.375rem; flex-shrink: 0; border: 1px solid var(--lab-border); } /* --- 年別タブ・ナビ pills（旧 #d1e7dd / Bootstrap 青の置換） --- */ .lab-year-tabs { background-color: rgba(var(--lab-primary-rgb), 0.08) !important; } .lab-year-tabs .nav-link { color: var(--lab-text-muted); font-weight: 500; transition: color 0.15s ease, background-color 0.15s ease; } .lab-year-tabs .nav-link:hover, .lab-year-tabs .nav-link:focus { color: var(--lab-brand-accent); background-color: rgba(var(--lab-primary-rgb), 0.08); } .lab-year-tabs .nav-link.active, .lab-year-tabs .nav-link.active:hover, .lab-year-tabs .nav-link.active:focus { background-color: var(--lab-brand-accent) !important; color: #fff !important; } .lab-year-tabs .navbar-nav .nav-link.active { font-weight: 600; } /* --- ナビログインボタン --- */ .lab-btn-login { --bs-btn-color: #fff; --bs-btn-bg: var(--lab-brand-accent); --bs-btn-border-color: var(--lab-brand-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a85538; --bs-btn-hover-border-color: #a85538; --bs-btn-active-bg: #a85538; --bs-btn-active-border-color: #a85538; --bs-btn-focus-shadow-rgb: var(--lab-primary-rgb); font-weight: 600; letter-spacing: 0.02em; border-radius: 0.5rem; padding: 0.375rem 0.875rem; } /* --- ホーム・名簿アイコンチップ --- */ .lab-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: rgba(var(--lab-primary-rgb), 0.1); color: var(--lab-brand-accent); } .lab-icon-chip--lg { width: 60px; height: 60px; } .lab-icon-chip--muted { background-color: rgba(var(--lab-primary-rgb), 0.06); color: var(--lab-text-muted); } /* --- Bootstrap バッジのレガシー色上書き --- */ .badge.bg-primary, .badge.text-bg-primary { background-color: var(--lab-brand-accent) !important; color: #fff !important; } .badge.bg-success, .badge.text-bg-success { background-color: rgba(var(--lab-primary-rgb), 0.15) !important; color: var(--lab-brand-accent) !important; } .badge.bg-info, .badge.text-bg-info { background-color: rgba(var(--lab-primary-rgb), 0.12) !important; color: var(--lab-text-primary) !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--lab-brand-accent) !important; color: #FFFFFF !important; } .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus, .nav-pills .show > .nav-link:hover, .nav-pills .show > .nav-link:focus { background-color: var(--lab-brand-accent) !important; color: #FFFFFF !important; } .nav-tabs .nav-link.active { color: var(--lab-brand-accent); border-color: var(--lab-border) var(--lab-border) var(--lab-bg-main); } .btn-primary, .btn-success, .btn-primary:hover, .btn-success:hover, .btn-primary:active, .btn-success:active, .btn-primary.active, .btn-success.active { color: #FFFFFF !important; } /* --- プロジェクト一覧（ビジュアル・リスト形式） --- */ .lab-project-list { font-size: 0.92rem; line-height: 1.6; } .lab-project-item { overflow: hidden; } @media (min-width: 992px) { .lab-project-graphic-col { flex: 0 0 30%; max-width: 30%; } .lab-project-detail-col { flex: 0 0 70%; max-width: 70%; } } .lab-project-title { font-size: 0.92rem; line-height: 1.6; font-weight: 600; color: var(--lab-text-primary); } .lab-project-graphic-wrap { background-color: #f8f9fa; border-color: var(--lab-border) !important; min-height: 12rem; padding: 0.75rem; } [data-bs-theme="dark"] .lab-project-graphic-wrap { background-color: var(--lab-surface-elevated); } .lab-project-graphic-img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; object-fit: contain; } .lab-project-abstract { font-size: 0.92rem; line-height: 1.6; }