/* ============================================================ VtigerCRM Custom CSS - High Readability Edition Version: 2026.09.22-UI4.8-TAGS-HELP-CONTRAST Base: 添付JP_Language_Patch内 2026.09.15-UI3-READABILITY Changes: 1. フォーカス・必須項目、保存／キャンセル、見出し余白、選択行を継承 2. 一覧の余白縮小、顧客名・案件名等の強調、操作アイコンの指定修正 3. 単一行入力をPC 36pxに統一、複数選択と長文入力は可変高 4. 991px以下は項目ごとに1段、767px以下はラベルを入力欄の上へ 5. 見出し・関連タブ・ダッシュボード・モーダルの配色を統一 6. 色・寸法を変数化し、Input Groupと表の枠線指定を整理 7. 専用スクロール枠を識別できる一覧に見出し・識別列の固定を適用 8. ウィジェット見出しの上下配置、ブロック見出しの余白を修正 9. 単一選択ピックリストの選択済み文字を縦中央に配置 10. 白・薄いグレー＋濃い文字。操作位置は青、保存は緑、エラーは赤で区別 11. 主要な文字配色は7:1以上、入力枠は周辺の淡色背景に対し3:1以上を目標 12. 重要ラベルを内部項目名で強調（必須設定との自動連動ではありません） 13. 編集中・既存検証エラーのラベルを、隣接する値セルの状態に連動 14. 詳細の文字列・URL・長文の折り返し、長文入力欄の初期高さを調整 15. 一覧の識別項目の折り返し、詳細内の実リンクの下線表示 16. ブロック識別子に基づく控えめな色分け、モーダル見出しの折り返し 17. ブラウザー印刷時に詳細画面の操作アイコンを省略 18. 日付・通貨等の外枠の固定高を解除し、入力と付属ボタンの寸法を統一 19. クイック表示の項目表の余白・列幅を調整（UI4.2） 20. 一覧・詳細・編集・クイック表示のスマホ／タブレット対応（UI4.3） 21. 上部操作ボタンの背景色を重要度に応じて調整（UI4.4） 22. 関連タブの名称表示・幅調整、詳細ヘッダーの余白調整（UI4.5） 23. 一覧・クイック表示の操作領域拡大、一覧の数値表示を右寄せ（UI4.5） 24. 編集可能セルのホバー表示、長文入力欄の高さ調整（UI4.6） 25. 実行ルールを維持した本番用圧縮版を同梱（UI4.6） 26. Select2候補・操作メニューの文字と選択領域を拡大（UI4.7） 27. 詳細の削除メニューを警告色と区切り線で識別（UI4.7） 28. 住所欄の初期高88px、備考の最小高140pxを維持（UI4.7） 29. タッチ時のカレンダー拡大、今日・選択日の識別（UI4.7） 30. 複数選択済みタグの折り返しと解除操作領域の調整（UI4.8） 31. 既存の補足・エラー説明の文字と行間を調整（UI4.8） 32. 高コントラスト設定時の選択・エラー状態を線で補完（UI4.8） Usage: 既存のcustom.cssをバックアップし、本ファイルをcustom.cssに改名して差し替え。 UTF-8。追記用CSSではありません。HTML／JavaScriptの変更は不要。 Scope: 見た目のみ。検証、保存、権限、表示条件、レコード選択は既存処理。 項目配置の変更はfieldLabelを持つフォーム表に限定します。 商品明細や関連一覧等のデータ表をフォーム配置へ変更しません。 Notes: 配色値の計算は代表的な組み合わせのみ。画面全体のWCAG適合を保証するものではありません。 UI4.5/UI4.7はテスト環境のHTMLを参照。UI4.8の追加対象DOMは再確認できていません。 修正版適用後の描画・実機操作は未検証。READMEの確認事項を参照してください。 :has()／:is()／:where()対応ブラウザーを前提とします。 一覧の固定はSection 13のDOM条件に一致する場合のみ有効です。 寸法・色はSection 0、入力部品は11、画面幅対応は12、状態表示は14。 UI4の追加部分はSection 16〜31。PHP・TPL・JavaScript・DBの変更は不要。 ============================================================ */ /* ============================================================ 0. Design Tokens（視認性重視版：明るい無彩色＋濃い文字） ============================================================ */ :root { --ip-ui-font: "BIZ UDPGothic", "BIZ UDGothic","Segoe UI Variable", "Segoe UI", "Meiryo", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --ip-ui-font-size: 14px; --ip-ui-text: #20242a; --ip-ui-text-strong: #111827; --ip-ui-label-text: #384250; --ip-ui-muted: #424c58; --ip-ui-accent: #17385a; --ip-ui-page-bg: #f2f3f5; --ip-ui-surface: #ffffff; --ip-ui-label-bg: #f5f6f8; --ip-ui-heading-bg: #e9edf2; --ip-ui-border: #c7cdd4; --ip-ui-border-strong: #aab4c0; --ip-ui-stripe-bg: #f8f9fa; --ip-ui-focus: #005fcc; --ip-ui-focus-bg: #eef5ff; --ip-ui-error: #9f1d16; --ip-ui-error-bg: #fff1f0; --ip-ui-save: #1f5d36; --ip-ui-save-hover: #174829; --ip-ui-cancel: #424c58; --ip-ui-selected-bg: #dcecff; --ip-ui-row-focus-bg: #edf5ff; --ip-ui-tab-active-bg: #dcecff; --ip-ui-radius: 4px; --ip-ui-card-radius: 6px; --ip-ui-control-height: 36px; --ip-ui-control-pad-y: 7px; --ip-ui-control-line-height: 20px; --ip-ui-inline-size: 30px; --ip-ui-widget-header-min-height: 50px; --ip-ui-widget-header-pad-y: 10px; --ip-ui-block-title-space-top: 12px; --ip-ui-block-title-space-bottom: 10px; --ip-ui-textarea-min-height: 128px; --ip-ui-list-pad-y: 7px; --ip-ui-label-width: 15%; --ip-ui-value-width: 35%; --ip-ui-page-top: 65px; /* 一覧固定を解除する場合: sticky-positionをstatic、max-heightをnoneへ。 */ --ip-ui-list-sticky-position: sticky; --ip-ui-list-max-height: min(68vh, 720px); /* UI4: 追加機能の調整値。対象項目の追加・削除はSection 16。 */ --ip-ui-important-label: #1e40af; --ip-ui-important-weight: 700; --ip-ui-focus-label-bg: #e8f0ff; --ip-ui-field-line-height: 1.6; --ip-ui-longtext-line-height: 1.75; --ip-ui-list-name-min: 12rem; --ip-ui-list-name-max: 28rem; --ip-ui-link-color: #1e40af; --ip-ui-block-basic: #1e40af; --ip-ui-block-address: #27665f; --ip-ui-block-notes: #655184; } /* ============================================================ 1. Typography & Global Reset ============================================================ */ /* フォント設定：システムフォント優先で可読性を確保 */ body, h1, h2, h3, h4, h5, h6, .fieldLabel, .inputElement, .btn, .table, .select2-container, .select2-choice, .select2-results, textarea, input, select, button, .fc, .fc-toolbar, .fc-view { font-family: var(--ip-ui-font) !important; text-rendering: optimizeLegibility !important; font-feature-settings: "palt" !important; } /* 数値の視認性（等幅） */ .currency, .currencyField, .fieldValue { font-variant-numeric: tabular-nums !important; } /* 基本文字色：白や薄いグレーの背景から読み取りやすいチャコール */ body, h1, h2, h3, h4, h5, h6, .fieldLabel, .listViewEntries td, .detailview-table td, .fieldValue, .inputElement { color: var(--ip-ui-text) !important; } /* フィールドラベル：太字＋濃いグレー */ .fieldLabel, .detailview-table .fieldLabel, .editViewContents .fieldLabel, .summaryWidgetContainer .fieldLabel, .summaryViewEntries .fieldLabel { color: var(--ip-ui-label-text) !important; font-weight: 600 !important; } /* 補助情報と項目ラベルの強弱。ラベル内のmutedはラベルの色を引き継ぐ。 */ .muted, .text-muted { color: var(--ip-ui-muted) !important; font-weight: 400 !important; } .fieldLabel .muted { color: inherit !important; font-weight: inherit !important; } .fieldLabel, .fieldLabel > label { white-space: normal; overflow-wrap: anywhere; } /* 背景色設定：全体を薄いグレー、カード類を白に統一 */ body, .global-nav, .app-nav .module-action-bar .module-action-content, .main-container .sidebar-essentials, .detailViewContainer .content-area, .editViewPageDiv .content-area, .editViewPageDiv.content-area, .editViewPageDiv .reports-content-area, .detailViewContainer, #appnavcontent, .dashBoardContainer, .grid-stack, .dashBoardContainer .tab-content, .listview-actions-container { background: var(--ip-ui-page-bg) !important; } /* ページ上部の余白調整 */ #page { padding-top: var(--ip-ui-page-top) !important; } .module-action-bar .module-title { color: var(--ip-ui-text-strong) !important; } .picklist-color { border-radius: var(--ip-ui-radius) !important; } /* ============================================================ 2. Components: Buttons, Forms, Icons ============================================================ */ /* ボタン：フラット化、影削除 */ .btn, .module-buttons.btn { border-radius: var(--ip-ui-radius) !important; box-shadow: none !important; border: 1px solid var(--ip-ui-border-strong) !important; background-image: none !important; filter: none !important; font-weight: 600 !important; } /* Primary/Successボタン（保存等） */ .btn-success, button[type="submit"] { font-weight: bold !important; letter-spacing: 1px !important; box-shadow: none !important; } .btn-success:hover, button[type="submit"]:hover { transform: none !important; box-shadow: none !important; opacity: 0.9 !important; } .btn-default { background-color: var(--ip-ui-surface) !important; color: var(--ip-ui-cancel) !important; } .btn-default:where(:not(:disabled, .disabled, [aria-disabled="true"])):hover { background-color: var(--ip-ui-heading-bg) !important; } /* 入力フォーム：境界線を明確化 */ .inputElement, .search-link .keyword-input, .searchWorkflows { border-radius: var(--ip-ui-radius) !important; border: 1px solid var(--ip-ui-border-strong) !important; } /* フォーカス・エラー・変更不可の表示はSection 14.1で定義。 */ /* Input Groupの枠線・寸法・結合部はSection 11に集約。 */ /* アイコンフォント設定 */ [class^="vicon-"], [class*=" vicon-"] { font-family: 'Vtiger-icons'; speak: none; font-size: 20px !important; } .navbar .vicon { font-size: 16px !important; } /* グローバルUX：トランジション統一 */ .btn, .inputElement, a, .listViewEntries td, .related-tabs .nav-tabs > li > a { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } /* アニメーション無効化（キビキビした動作へ） */ .fade { transition: opacity 0s linear !important; } .collapse, .collapsing { transition: none !important; } .modal.fade .modal-dialog { transform: none !important; transition: transform 0s !important; } /* ============================================================ 3. Modals & Popups ============================================================ */ /* モーダル枠：影なし・フラット */ .dropdown-menu, .modal-content { border-radius: var(--ip-ui-card-radius) !important; box-shadow: none !important; border: 1px solid #7b8591 !important; } @media (min-width: 768px) { .navbar-right .dropdown-menu { border-radius: var(--ip-ui-card-radius) !important; } } .modal-header { border-radius: var(--ip-ui-card-radius) var(--ip-ui-card-radius) 0 0 !important; } .modal-footer { border-radius: 0 0 var(--ip-ui-card-radius) var(--ip-ui-card-radius) !important; } /* モーダルは見出しだけ濃紺。入力部品や各ボタンに文字色を一律指定しない。 */ .modal .modal-header { color: #ffffff; background-color: var(--ip-ui-accent) !important; border-bottom: 1px solid var(--ip-ui-accent) !important; padding: 12px 16px !important; } .modal .modal-header :is(.modal-title, h3, h4, h5) { color: #ffffff !important; text-shadow: none !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 !important; } .modal .modal-header :is(.close, button.close) { color: #ffffff !important; opacity: 0.9 !important; text-shadow: none !important; } .modal .modal-header .close:hover { opacity: 1 !important; } .modal .modal-header :is(a, button):focus-visible { outline-color: #ffffff !important; } .modal-footer { border-top-color: var(--ip-ui-border) !important; } /* ============================================================ 4. List View (一覧画面) ============================================================ */ /* 通常のリンクは標準の太さ。識別項目のリンクだけ後述の指定で強調。 */ .listViewPageDiv a { font-weight: 400 !important; } tr.listViewEntries:nth-child(even) { --ip-row-bg: var(--ip-ui-stripe-bg); } tr.listViewEntries:nth-child(odd) { --ip-row-bg: var(--ip-ui-surface); } tr.listViewEntries { background-color: var(--ip-row-bg, var(--ip-ui-surface)) !important; } tr.listViewEntries > td { background-color: var(--ip-row-bg, var(--ip-ui-surface)) !important; padding-top: var(--ip-ui-list-pad-y) !important; padding-bottom: var(--ip-ui-list-pad-y) !important; vertical-align: middle !important; } tr.listViewEntries:hover { --ip-row-bg: var(--ip-ui-row-focus-bg); } /* 既存の行クリック処理を保ち、チェックボックスやボタンには元のカーソルを使用。 */ tr.listViewEntries:hover > td { cursor: pointer; } /* 行内の操作部品。td/trのdisplayを変えず、非表示指定は尊重する。 */ tr.listViewEntries :is(.actions, .actionImages):where(:not(.hide, .hidden, [hidden])) { visibility: visible !important; opacity: 1 !important; } /* 列の内部名を確認できる顧客名・案件名・件名等を強調。列番号では判定しない。 */ tr.listViewEntries > td:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]) > a, tr.listViewEntries > td:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]) .value > a, tr.listViewEntries .listViewEntryName, tr.listViewEntries a.recordLabel { color: var(--ip-ui-accent) !important; font-weight: 600 !important; } tr.listViewEntries > td:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]) > a:hover { text-decoration: underline !important; text-underline-offset: 2px; } /* テーブル境界線 */ .table-bordered { border: 1px solid var(--ip-ui-border-strong) !important; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: 1px solid var(--ip-ui-border) !important; } /* ============================================================ 5. Detail View (詳細画面) ============================================================ */ /* ブロック共通：カード化・左端アクセント線 */ .detailViewContainer .block, .related-tabs.row, .detailViewContainer .commentContainer .commentTitle.row, .detailViewContainer .commentContainer .showcomments, .detailview-header-block { border-radius: var(--ip-ui-radius) !important; box-shadow: none !important; border: 1px solid var(--ip-ui-border-strong) !important; border-left: 3px solid var(--ip-ui-accent) !important; /* アクセントカラー */ margin-top: 2px !important; background-color: var(--ip-ui-surface) !important; } .related-tabs.row { margin-top: 10px !important; } /* ブロックヘッダー */ .blockHeader, .detailViewContainer .block .blockHeader { background: var(--ip-ui-heading-bg) !important; border-radius: var(--ip-ui-radius) !important; border: 1px solid var(--ip-ui-border) !important; border-left: 1px solid var(--ip-ui-border) !important; padding: 10px 15px !important; margin: 5px 0 10px 0 !important; line-height: 1.4 !important; min-height: 40px !important; } /* blockHeaderがない見出しにも余白を確保。inline-blockで余白の相殺を防ぐ。 */ #detailView .block h4, .detailViewContainer .block h4 { font-weight: 600 !important; color: var(--ip-ui-accent) !important; letter-spacing: 0.02em !important; border-bottom: none !important; margin-top: var(--ip-ui-block-title-space-top) !important; margin-bottom: var(--ip-ui-block-title-space-bottom) !important; line-height: 1.4 !important; display: inline-block !important; vertical-align: middle !important; } /* 親ヘッダーにpaddingがある場合は、h4の余白を重ねない。 */ .blockHeader h4, .detailViewContainer .block .blockHeader h4, #detailView .block .blockHeader h4 { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.4 !important; } .detailViewContainer tr.blockHeader > :is(th, td), .editViewContents tr.blockHeader > :is(th, td) { padding-top: 10px !important; padding-bottom: 10px !important; } .editViewContents .fieldBlockContainer > h4 { margin: 6px 0 10px !important; padding-top: 8px !important; padding-bottom: 8px !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; } /* 詳細テーブルレイアウト */ .detailview-table { border-collapse: collapse !important; } /* 左側：ラベルセル */ .detailview-table .fieldLabel, .detailViewInfo .fieldLabel { width: var(--ip-ui-label-width) !important; text-align: right !important; background-color: var(--ip-ui-label-bg) !important; border: 1px solid var(--ip-ui-border-strong) !important; } /* 右側：値セル */ .detailview-table .fieldValue { border: 1px solid var(--ip-ui-border-strong) !important; width: var(--ip-ui-value-width) !important; } #detailView td.fieldValue .action { position: static !important; margin-left: 10px !important; } /* レコードヘッダー周り */ .record-header .recordBasicInfo h4 { border-bottom: 1px solid var(--ip-ui-border) !important; font-weight: bold !important; } .detailViewContainer .recordImage .name span { color: var(--ip-ui-accent) !important; } .detailview-header .recordImage [class^="vicon-"] { color: white !important; } .detailview-header-block { margin-top: 5px !important; } /* ============================================================ 6. Edit View / Inline Edit (Updated: Grid Layout) ============================================================ */ /* 編集画面レイアウト */ /* --- 枠線・背景色・グリッド化 --- */ /* テーブル全体の枠線結合 */ .editViewContents, .editViewContents table { border-collapse: collapse !important; width: 100% !important; border-spacing: 0 !important; } /* ラベルセル：薄いグレー背景＋枠線 */ .editViewContents .fieldLabel, .editViewContents td.fieldLabel { background-color: var(--ip-ui-label-bg) !important; border: 1px solid var(--ip-ui-border) !important; padding: 5px 10px !important; vertical-align: middle !important; color: var(--ip-ui-label-text) !important; text-align: right !important; width: var(--ip-ui-label-width) !important; } /* 入力欄セル：白背景＋枠線 */ .editViewContents .fieldValue, .editViewContents td.fieldValue { background-color: var(--ip-ui-surface) !important; border: 1px solid var(--ip-ui-border) !important; padding: 5px 10px !important; vertical-align: middle !important; width: var(--ip-ui-value-width) !important; position: relative !important; } .editViewContents td.fieldValue[colspan="3"] { width: 85% !important; } /* --- 入力エリアの調整 --- */ .editViewContents .input-group { display: flex; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; } .editViewContents .fieldValue .inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])), .editViewContents .fieldValue .select2-container, .editViewContents .fieldValue textarea, .fieldBlockContainer .inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])) { width: 100% !important; flex-grow: 1 !important; max-width: 100% !important; box-sizing: border-box !important; margin-bottom: 0 !important; } /* Flexの自動最小幅で長い関連先名が入力欄を押し広げないようにする。 */ :is(.editViewContents, .detailview-table) .fieldValue { min-width: 0; overflow-wrap: anywhere; } :is(.editViewContents, .detailview-table) .fieldValue :is(.inputElement, .select2-container, textarea) { min-width: 0; } /* 必須項目の目印。既存の文字を通常の流れで表示し、入力欄に重ねない。 必須ラベルの新規生成や、HTML上の位置の移動は行いません。 */ span.mandatoryField:not(.inputElement):not(.select2-container) { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; height: auto !important; z-index: auto !important; color: var(--ip-ui-error) !important; font-weight: 700 !important; vertical-align: baseline !important; margin-left: 3px !important; margin-right: 3px !important; } /* 同じクラスが実際の入力部品に付いても、通常の配置・寸法を保つ。 */ input.mandatoryField, select.mandatoryField, textarea.mandatoryField { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: auto !important; } /* --- Inline Edit (詳細画面での編集) --- */ .detailview-table td.fieldValue .edit { width: 100% !important; } .detailview-table td.fieldValue .inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])), .detailview-table td.fieldValue .select2-container, .detailview-table td.fieldValue textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .detailview-table td.fieldValue .input-group { width: 100% !important; display: flex; } .detailview-table td.fieldValue .edit .input-group { margin-bottom: 0 !important; } /* 保存・キャンセル・✓／×の表示はSection 14.2で定義。 */ /* ============================================================ 7. Summary View & Dashboard (概要・ダッシュボード) ============================================================ */ /* ウィジェットカードスタイル */ .summaryView, .summaryWidgetContainer, li.dashboardWidget { border-radius: var(--ip-ui-radius) !important; box-shadow: none !important; border: 1px solid var(--ip-ui-border-strong) !important; border-left: 3px solid var(--ip-ui-accent) !important; background-color: var(--ip-ui-surface) !important; } /* 背景帯の内側でタイトルと操作を縦中央に揃える。 高さは内容に応じて伸長。displayには!importantを付けず既存の表示制御を尊重。 */ .summaryView .summaryViewHeader, .summaryWidgetContainer .widget_header, .dashboardWidgetHeader { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; min-height: var(--ip-ui-widget-header-min-height) !important; height: auto !important; padding: var(--ip-ui-widget-header-pad-y) 12px !important; box-sizing: border-box !important; background-color: var(--ip-ui-heading-bg) !important; border-bottom: 1px solid var(--ip-ui-border) !important; } /* 見出し自体の上下余白・paddingによる片寄りを除去。 詳細ブロック内ではSection 5のh4余白よりこちらを優先する。 */ .summaryView .summaryViewHeader h4, .summaryWidgetContainer .widget_header h4, .dashboardWidgetHeader :is(h4, .title), .detailViewContainer .block :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader) h4, #detailView .block :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader) h4 { color: var(--ip-ui-accent) !important; font-weight: 600 !important; text-decoration: none !important; text-align: left !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.4 !important; } :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader) > :is(h4, .title) { min-width: 0; margin-right: 12px; overflow-wrap: anywhere; } /* 右側操作の負の上余白を打ち消し、背景帯の内側に収める。 */ :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader) > .pull-right { float: none !important; align-self: center; max-width: 100%; margin-left: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; } :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader) .btn { margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle !important; } /* Bootstrapのclearfixをflexの余分な項目として扱わない。 */ :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader).clearfix::before, :is(.summaryViewHeader, .widget_header, .dashboardWidgetHeader).clearfix::after, .summaryWidgetContainer .widget_header.row::before, .summaryWidgetContainer .widget_header.row::after, .summaryWidgetContainer .widget_header.row-fluid::before, .summaryWidgetContainer .widget_header.row-fluid::after { content: none; } /* アイコン画像枠 */ .commentsList .recordImage, .summaryWidgetContainer .recordImage { background: var(--ip-ui-heading-bg) !important; border-radius: var(--ip-ui-card-radius) !important; width: 78px !important; box-shadow: none !important; border: 1px solid #c7cdd4 !important; } /* 概要ビュー：フィールドラベル */ .summaryWidgetContainer .fieldLabel, .summaryViewEntries .fieldLabel { text-align: right !important; padding-right: 15px !important; width: 35% !important; background-color: var(--ip-ui-label-bg) !important; padding-top: 7px !important; line-height: 1.4 !important; } .summaryWidgetContainer .fieldValue, .summaryViewEntries .fieldValue { padding-left: 5px !important; } /* ダッシュボードタブ */ .dashBoardContainer .tabContainer .nav { background-color: var(--ip-ui-page-bg) !important; border: 0 !important; } .dashBoardContainer .tabContainer .nav > li > a { color: var(--ip-ui-text) !important; } li.dashboardWidget, .dashboardWidgetContent { background-color: var(--ip-ui-surface) !important; } /* 重要指標（Key Fields）の特別枠線 */ .summaryViewFields .fieldLabel, .summaryViewFields .fieldValue { border: 1px solid var(--ip-ui-border-strong) !important; } .summaryViewFields .fieldLabel { background-color: var(--ip-ui-label-bg) !important; } /* Projects等：指標ボックスのスリム化・中央寄せ */ .summaryViewFields .well[style]{ height: auto !important; min-height: 60px !important; max-height: none !important; border-radius: var(--ip-ui-radius); } .summaryViewFields .well { display: flex !important; flex-direction: column !important; justify-content: center !important; } /* ============================================================ 8. Tabs (Related Tabs) ============================================================ */ /* 関連タブ・ダッシュボードの選択状態を共通化。折り返しを許容する。 */ .related-tabs .nav-tabs, .dashBoardContainer .tabContainer .nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-top: 4px !important; border-bottom: 1px solid var(--ip-ui-border) !important; overflow: visible; } .related-tabs .nav-tabs > li, .dashBoardContainer .tabContainer .nav > li { margin-bottom: 0 !important; border: 0 !important; } .related-tabs .nav-tabs > li > a, .dashBoardContainer .tabContainer .nav > li > a { border-radius: var(--ip-ui-radius) var(--ip-ui-radius) 0 0 !important; padding: 8px 13px !important; margin: 0 !important; color: var(--ip-ui-muted) !important; background-color: transparent !important; border: 1px solid transparent !important; border-bottom: 3px solid transparent !important; font-weight: 600 !important; display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1.4 !important; min-height: 40px; box-sizing: border-box; } .related-tabs .nav-tabs > li > a:hover, .dashBoardContainer .tabContainer .nav > li > a:hover { color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-heading-bg) !important; } .related-tabs .nav-tabs > li.active > a, .related-tabs .nav-tabs > li.active > a:hover, .dashBoardContainer .tabContainer .nav > li.active > a, .dashBoardContainer .tabContainer .nav > li.active > a:hover { color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-tab-active-bg) !important; border-bottom-color: var(--ip-ui-accent) !important; box-shadow: none !important; } .related-tabs .nav-tabs > li > a :is(.badge, .count), .dashBoardContainer .tabContainer .nav > li > a :is(.badge, .count) { position: static !important; margin: 0 0 0 2px !important; transform: none !important; line-height: 1.2 !important; color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-border) !important; border-radius: 10px !important; padding: 2px 6px; white-space: nowrap; } .related-tabs .nav-tabs > li.active > a :is(.badge, .count), .dashBoardContainer .tabContainer .nav > li.active > a :is(.badge, .count) { color: #ffffff !important; background-color: var(--ip-ui-accent) !important; } .related-tabs .nav-tabs > li > a > * { vertical-align: middle !important; } .related-tabs .nav-tabs > li.dropdown > a .caret { margin-top: 0 !important; margin-left: 4px !important; border-top-width: 5px !important; flex: 0 0 auto; } /* .caretが実在する場合だけ重複したFontAwesome矢印を隠す。 */ @supports selector(a:has(.caret)) { .related-tabs .nav-tabs > li.dropdown > a:has(.caret) .fa-caret-down { display: none !important; } } .related-tabs .dropdown-menu { max-width: calc(100vw - 24px); } .related-tabs .dropdown-menu > li > a { white-space: normal; overflow-wrap: anywhere; } /* ============================================================ 9. Admin Settings ============================================================ */ .blockHeader th, .settingsPageDiv .table thead th, .settingsPageDiv .table th { color: var(--ip-ui-text) !important; font-weight: bold !important; background-color: transparent !important; border-bottom: 1px solid var(--ip-ui-border-strong) !important; } .settingsPageDiv .table-bordered thead tr { background-color: #e9edf2 !important; } /* ============================================================ 10. Tables: No-Border Logic & Block Folding Fix ============================================================ */ /* 枠線はセル側に描画し、tbodyの折りたたみ時には一緒に消す。 overflowを隠さず、インライン編集のメニュー等が切れる原因を減らす。 */ table:is(.detailview-table, .summary-table).no-border { border: 0 !important; box-shadow: none !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: var(--ip-ui-radius) !important; overflow: visible; background-clip: padding-box; } table:is(.detailview-table, .summary-table).no-border :is(td, th) { border: 0 !important; border-right: 1px solid var(--ip-ui-border) !important; border-bottom: 1px solid var(--ip-ui-border) !important; } table:is(.detailview-table, .summary-table).no-border tr:first-child > :is(td, th) { border-top: 1px solid var(--ip-ui-border-strong) !important; } table:is(.detailview-table, .summary-table).no-border tr > :is(td, th):first-child { border-left: 1px solid var(--ip-ui-border-strong) !important; } table:is(.detailview-table, .summary-table).no-border tr > :is(td, th):last-child { border-right: 1px solid var(--ip-ui-border-strong) !important; } table:is(.detailview-table, .summary-table).no-border tr:last-child > :is(td, th) { border-bottom: 1px solid var(--ip-ui-border-strong) !important; } table:is(.detailview-table, .summary-table).no-border tr:first-child > :is(td, th):first-child { border-top-left-radius: var(--ip-ui-radius) !important; } table:is(.detailview-table, .summary-table).no-border tr:first-child > :is(td, th):last-child { border-top-right-radius: var(--ip-ui-radius) !important; } table:is(.detailview-table, .summary-table).no-border tr:last-child > :is(td, th):first-child { border-bottom-left-radius: var(--ip-ui-radius) !important; } table:is(.detailview-table, .summary-table).no-border tr:last-child > :is(td, th):last-child { border-bottom-right-radius: var(--ip-ui-radius) !important; } /* その他ユーティリティ */ .numberCircle { background-color: var(--ip-ui-accent) !important; color: #ffffff !important; } /* ============================================================ 11. Checkboxes / Input Group (Safe Version) ============================================================ */ /* --- Checkboxes --- */ :is(.fieldBlockContainer, .editViewContents, .detailview-table, .modal) input.inputElement:is([type="checkbox"], [type="radio"]) { width: auto !important; min-width: 20px !important; height: 20px !important; margin: 5px 0 0 0 !important; box-shadow: none !important; cursor: pointer !important; flex: 0 0 auto !important; transform: none !important; } .editViewContents .fieldValue input[type="checkbox"] { float: left !important; display: inline-block !important; } /* --- 単一行入力の寸法。特殊入力と複数選択は固定高の対象外。 --- */ :is(.editViewContents, .detailview-table, .modal) input.inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])), :is(.editViewContents, .detailview-table, .modal) select.inputElement:where(:not([multiple], [size])) { height: var(--ip-ui-control-height) !important; min-height: var(--ip-ui-control-height) !important; padding: var(--ip-ui-control-pad-y) 10px !important; font-size: var(--ip-ui-font-size) !important; line-height: var(--ip-ui-control-line-height) !important; box-sizing: border-box !important; } :is(.editViewContents, .detailview-table, .modal) textarea.inputElement, :is(.editViewContents, .detailview-table) .fieldValue textarea { min-height: var(--ip-ui-textarea-min-height) !important; max-width: 100% !important; padding: 8px 10px !important; font-size: var(--ip-ui-font-size) !important; line-height: 1.6 !important; resize: vertical; overflow: auto; box-sizing: border-box; } :is(.editViewContents, .detailview-table, .modal) input[type="file"] { max-width: 100%; } /* 単一選択Select2 v3／v4。 テーマ由来の上下padding／固定ラベル高に大きなline-heightが重なると文字が切れる。 選択枠の高さと文字の行高を分離し、flexで縦中央に配置する。 */ :is(.editViewContents, .detailview-table, .modal) .select2-container:has(> .select2-choice), :is(.editViewContents, .detailview-table, .modal) .select2-container:has(> .selection > .select2-selection--single) { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; } :is(.editViewContents, .detailview-table, .modal) .select2-container > .select2-choice, :is(.editViewContents, .detailview-table, .modal) .select2-selection--single { display: flex !important; align-items: center !important; height: var(--ip-ui-control-height) !important; min-height: var(--ip-ui-control-height) !important; padding: 0 30px 0 10px !important; font-size: var(--ip-ui-font-size) !important; line-height: 1.4 !important; border-width: 1px !important; border-style: solid !important; border-color: var(--ip-ui-control-border, var(--ip-ui-border-strong)) !important; border-radius: var(--ip-ui-radius) !important; box-sizing: border-box !important; background-image: none !important; } :is(.editViewContents, .detailview-table, .modal) .select2-choice .select2-chosen, :is(.editViewContents, .detailview-table, .modal) .select2-selection--single .select2-selection__rendered { display: block !important; flex: 1 1 auto; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; font-size: var(--ip-ui-font-size) !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* クリアボタンがあるv3の選択欄では、文字と×のための領域を分ける。 */ :is(.editViewContents, .detailview-table, .modal) .select2-container > .select2-choice.select2-allowclear { padding-right: 48px !important; } :is(.editViewContents, .detailview-table, .modal) .select2-choice .select2-search-choice-close { top: 50% !important; transform: translateY(-50%); } :is(.editViewContents, .detailview-table, .modal) .select2-choice .select2-arrow, :is(.editViewContents, .detailview-table, .modal) .select2-selection--single .select2-selection__arrow { height: calc(var(--ip-ui-control-height) - 2px) !important; } :is(.editViewContents, .detailview-table, .modal) .select2-container-multi > .select2-choices, :is(.editViewContents, .detailview-table, .modal) .select2-selection--multiple { height: auto !important; min-height: var(--ip-ui-control-height) !important; border-width: 1px !important; border-style: solid !important; border-color: var(--ip-ui-control-border, var(--ip-ui-border-strong)) !important; border-radius: var(--ip-ui-radius) !important; background-image: none !important; box-sizing: border-box !important; } /* 複数選択の内部検索に二重の入力枠を作らない。外側のフォーカス表示を使用。 */ .select2-choices .select2-search-field input, .select2-selection--multiple .select2-search__field { border: 0 !important; box-shadow: none !important; } /* Input Groupはここで枠線・寸法を一度だけ定義。 */ .input-group :is(input, select).inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [multiple], [size])), .input-group .input-group-addon, .input-group .input-group-btn > .btn { border: 1px solid var(--ip-ui-border-strong) !important; border-radius: var(--ip-ui-radius) !important; box-shadow: none !important; height: var(--ip-ui-control-height) !important; box-sizing: border-box !important; } .input-group .input-group-addon { background-color: var(--ip-ui-label-bg) !important; color: var(--ip-ui-label-text) !important; min-width: 40px; } :is(.editViewContents, .detailview-table, .modal) .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; min-width: 0; } :is(.editViewContents, .detailview-table, .modal) .input-group > :is(input, select, textarea).inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])) , :is(.editViewContents, .detailview-table, .modal) .input-group > .select2-container { flex: 1 1 0% !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; } :is(.editViewContents, .detailview-table, .modal) .input-group > :is(.input-group-addon, .input-group-btn) { flex: 0 0 auto; width: auto !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } :is(.editViewContents, .detailview-table, .modal) .input-group > .input-group-addon { padding: var(--ip-ui-control-pad-y) 10px !important; line-height: var(--ip-ui-control-line-height) !important; } /* hidden inputが先頭にあっても、見える入力欄の角を欠かさない。 次のaddon/buttonが実際に存在する側だけ結合する。 */ @supports selector(input:has(+ span)) { .input-group > .inputElement:has(+ :is(.input-group-addon, .input-group-btn)) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-width: 0 !important; } .input-group > .input-group-addon:has(+ :is(.inputElement, .input-group-btn, .input-group-addon)), .input-group > .input-group-btn:has(+ :is(.inputElement, .input-group-addon)) > .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-width: 0 !important; } } .input-group > :is(.inputElement, .input-group-addon, .input-group-btn) + .input-group-addon, .input-group > :is(.input-group-addon, .input-group-btn) + .inputElement, .input-group > :is(.inputElement, .input-group-addon, .input-group-btn) + .input-group-btn > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* アニメーション設定はSection 2に集約。 */ /* ============================================================ 12. Responsive Forms（商品明細／データ一覧の列は維持） ============================================================ */ @media (min-width: 992px) and (max-width: 1199px) { :root { --ip-ui-label-width: 19%; --ip-ui-value-width: 31%; } } @supports selector(table:has(> tbody > tr > td.fieldLabel)) { @media (max-width: 991px) { /* displayには!importantを付けず、折りたたみ等のinline display:noneを優先。 */ :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)):where(:not(.hide, .hidden, [hidden])), :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody:where(:not(.hide, .hidden, [hidden])) { display: block; width: 100% !important; max-width: 100%; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr:has(> td.fieldLabel):where(:not(.hide, .hidden, [hidden])) { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); width: 100%; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > :is(td.fieldLabel, td.fieldValue):where(:not(.hide, .hidden, [hidden])) { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; white-space: normal !important; overflow-wrap: anywhere; padding: 8px 10px !important; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > td.fieldLabel { text-align: left !important; } /* colspanはGridでの列数に変換。通常のラベル＋値はそれぞれ1列。 */ :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > td[colspan="4"] { grid-column: 1 / -1; } } @media (max-width: 767px) { :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr:has(> td.fieldLabel):where(:not(.hide, .hidden, [hidden])) { grid-template-columns: minmax(0, 1fr); } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > td.fieldValue { padding-bottom: 12px !important; } } } @media (max-width: 767px) { :root { --ip-ui-control-height: 44px; --ip-ui-control-pad-y: 11px; --ip-ui-font-size: 16px; --ip-ui-list-pad-y: 9px; --ip-ui-inline-size: 44px; } .modal-dialog { width: auto !important; max-width: calc(100vw - 24px); margin: 12px !important; } .modal-body { padding: 12px !important; } .related-tabs .nav-tabs > li > a, .dashBoardContainer .tabContainer .nav > li > a { min-height: 44px; padding: 9px 11px !important; } } @media (pointer: coarse) { :root { --ip-ui-control-height: 44px; --ip-ui-control-pad-y: 11px; --ip-ui-inline-size: 44px; } } @media (prefers-reduced-motion: reduce) { .btn, .inputElement, a, .listViewEntries td, .related-tabs .nav-tabs > li > a { transition: none !important; } } /* ============================================================ 13. List Scrolling（対応する専用枠だけに適用） ============================================================ */ /* 対象は専用クラスのdiv直下に一覧表がある構造。 ページ全体やフォームのoverflow、ナビゲーションの高さを変更しない。 構造が異なる画面では固定を適用しない。固定解除はSection 0の2変数で設定。 スクロール枠の仕様: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */ @supports selector(div:has(> table > tbody > tr.listViewEntries)) { .listViewPageDiv :is(.table-container, .listview-table-container, .table-responsive):has(> table > tbody > tr.listViewEntries) { overflow: auto; max-height: var(--ip-ui-list-max-height); position: relative; isolation: isolate; } .listViewPageDiv :is(.table-container, .listview-table-container, .table-responsive):has(> table > tbody > tr.listViewEntries) > table > thead { position: var(--ip-ui-list-sticky-position); top: 0; z-index: 3; background-color: var(--ip-ui-heading-bg) !important; } .listViewPageDiv :is(.table-container, .listview-table-container, .table-responsive):has(> table > tbody > tr.listViewEntries) > table > thead > tr > :is(th, td) { background-color: var(--ip-ui-heading-bg) !important; } /* 識別項目が複数あっても、最初の1列だけを固定して重なりを防ぐ。 */ .listViewPageDiv :is(.table-container, .listview-table-container, .table-responsive):has(> table > tbody > tr.listViewEntries) > table > tbody > tr.listViewEntries > td:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]):not(:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]) ~ td) { position: var(--ip-ui-list-sticky-position); left: 0; z-index: 1; background-color: var(--ip-row-bg, var(--ip-ui-surface)) !important; } .listViewPageDiv :is(.table-container, .listview-table-container, .table-responsive):has(> table > tbody > tr.listViewEntries) > table > thead > tr > :is(th, td):is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]):not(:is([data-name="accountname"], [data-name="potentialname"], [data-name="ticket_title"], [data-name="subject"], [data-name="lastname"], [data-name="firstname"], [data-name="productname"], [data-name="servicename"], [data-name="projectname"], [data-name="assetname"], [data-name="campaignname"], [data-name="name"], [data-fieldname="accountname"], [data-fieldname="potentialname"], [data-fieldname="ticket_title"], [data-fieldname="subject"], [data-fieldname="lastname"], [data-fieldname="firstname"], [data-fieldname="productname"], [data-fieldname="servicename"], [data-fieldname="projectname"], [data-fieldname="assetname"], [data-fieldname="campaignname"], [data-fieldname="name"]) ~ :is(th, td)) { position: var(--ip-ui-list-sticky-position); left: 0; z-index: 4; background-color: var(--ip-ui-heading-bg) !important; } } /* ============================================================ 14. Interaction States (UI1を継承) 通常の枠線・背景の指定より後に置き、操作状態を優先します。 ============================================================ */ /* --- 14.1 フォーカス・必須項目に関連する入力状態 --- */ /* 通常入力・日付・関連先入力。結合部の枠線の太さ／角丸は変更しない。 readonlyの関連先表示欄は通常背景を保ち、Tab操作時の枠は別途表示。 checkbox/radio等にテキスト入力用の背景を付けない。 */ input:focus:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [readonly], :disabled)), select:focus:where(:not(:disabled)), textarea:focus:where(:not([readonly], :disabled)), :is(input, select, textarea):is(.inputElement, .form-control):focus:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [readonly], :disabled)), .input-group :is(input, select, textarea).inputElement:focus:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [readonly], :disabled)) { border-color: var(--ip-ui-focus) !important; background-color: var(--ip-ui-focus-bg) !important; outline: 2px solid var(--ip-ui-focus) !important; outline-offset: 1px !important; box-shadow: none !important; } /* キーボード操作位置。色付き背景だけに頼らず、ボタン・リンクにも枠を表示。 */ :is(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--ip-ui-focus) !important; outline-offset: 2px !important; } /* Select2の通常枠線にも状態色を伝える。サイズ指定との詳細度競合を避ける。 */ .select2-container:is(.select2-container-active, .select2-container--focus, .select2-container--open), .select2-container:focus-within { --ip-ui-control-border: var(--ip-ui-focus); } .select2-container:is(.input-error, .error, [aria-invalid="true"]), .has-error .select2-container { --ip-ui-control-border: var(--ip-ui-error); } .select2-container:is(.select2-container-disabled, .select2-container--disabled) { --ip-ui-control-border: var(--ip-ui-border-strong); } /* Select2 v3系とv4系。既存のフォーカスクラス／内部のフォーカスを使用。 */ :is(.select2-container-active, .select2-container--focus, .select2-container--open) > :is(.select2-choice, .select2-choices, .select2-selection), .select2-container:focus-within > :is(.select2-choice, .select2-choices, .select2-selection), .select2-container:is(.select2-container--focus, .select2-container--open) > .selection > .select2-selection, .select2-container:focus-within > .selection > .select2-selection { border-color: var(--ip-ui-focus) !important; background-color: var(--ip-ui-focus-bg) !important; background-image: none !important; outline: 2px solid var(--ip-ui-focus) !important; outline-offset: 1px !important; box-shadow: none !important; } /* 既存の検証処理がエラーを付けた欄だけ赤くする。 :invalidによる未入力欄の一斉赤表示は行わない。フォーカス中も赤枠を維持。 */ :is(input, select, textarea):is(.inputElement, .form-control):is(.input-error, .error, [aria-invalid="true"]), :is(input, select, textarea):is(.inputElement, .form-control):is(.input-error, .error, [aria-invalid="true"]):focus, .has-error :is(input, select, textarea):is(.inputElement, .form-control), .has-error :is(input, select, textarea):is(.inputElement, .form-control):focus { border-color: var(--ip-ui-error) !important; background-color: var(--ip-ui-error-bg) !important; outline-color: var(--ip-ui-error) !important; } .select2-container:is(.input-error, .error, [aria-invalid="true"]) > :is(.select2-choice, .select2-choices, .select2-selection), .has-error .select2-container > :is(.select2-choice, .select2-choices, .select2-selection), .select2-container:is(.input-error, .error, [aria-invalid="true"]) > .selection > .select2-selection, .has-error .select2-container > .selection > .select2-selection { border-color: var(--ip-ui-error) !important; background-color: var(--ip-ui-error-bg) !important; outline-color: var(--ip-ui-error) !important; } /* 編集不可の欄。既存のreadonly/disabled属性に従い、属性自体は変更しない。 */ :is(input, select, textarea):is(.inputElement, .form-control):is([readonly], :disabled) { background-color: #e7e9ec !important; color: #424c58 !important; } :is(input, select, textarea):is(.inputElement, .form-control):disabled { cursor: not-allowed !important; } .select2-container:is(.select2-container-disabled, .select2-container--disabled) > :is(.select2-choice, .select2-choices, .select2-selection), .select2-container.select2-container--disabled > .selection > .select2-selection { background-color: #e7e9ec !important; background-image: none !important; color: #424c58 !important; border-color: var(--ip-ui-border-strong) !important; outline: none !important; } /* --- 14.2 保存・キャンセルの区別 --- */ /* 保存／確定に使う既存のsuccessボタンと詳細画面のインライン保存を強調。 検索などを含む、すべてのsubmitボタンへの一律着色は行わない。 */ .btn-success, .detailview-table td.fieldValue .edit button[type="submit"] { color: #ffffff !important; background-color: var(--ip-ui-save) !important; border-color: var(--ip-ui-save) !important; letter-spacing: 0.02em !important; box-shadow: none !important; } .btn-success:where(:not(:disabled, .disabled, [aria-disabled="true"])):hover, .detailview-table td.fieldValue .edit button[type="submit"]:where(:not(:disabled, .disabled, [aria-disabled="true"])):hover { color: #ffffff !important; background-color: var(--ip-ui-save-hover) !important; border-color: var(--ip-ui-save-hover) !important; opacity: 1 !important; } .input-save-wrap:where(:not(.hide, .hidden, [hidden])) { display: inline-flex !important; gap: 6px !important; align-items: center !important; } /* span全体への一律指定を廃止。リンク／ボタンと、直接操作する✓／×だけを整形。 hidden系クラス／属性を持つ操作は、この規則で表示させない。 */ .input-save-wrap :is(a, button):where(:not(.hide, .hidden, [hidden])), .input-save-wrap > :is(.btn, .saveAction, .cancelAction, .fa-check, .fa-times, .fa-close):where(:not(.hide, .hidden, [hidden])) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: var(--ip-ui-inline-size) !important; min-height: var(--ip-ui-inline-size) !important; padding: 4px 7px !important; border: 1px solid var(--ip-inline-border, #7b8591) !important; border-radius: var(--ip-ui-radius) !important; color: var(--ip-inline-fg, var(--ip-ui-cancel)) !important; background-color: var(--ip-inline-bg, #ffffff) !important; background-image: none !important; line-height: 1.2 !important; box-sizing: border-box !important; text-decoration: none !important; } /* ✓／×の内側のアイコンに、もう一つの枠を付けない。 */ .input-save-wrap :is(a, button) :is(.fa-check, .fa-times, .fa-close), .input-save-wrap > span:not(.fa) > :is(.fa-check, .fa-times, .fa-close) { color: inherit !important; line-height: 1 !important; } .input-save-wrap :is(.fa-check, .fa-times, .fa-close)::before { color: inherit !important; } /* クラスで識別できる保存操作と、直接操作する✓。 */ .input-save-wrap :is(.btn-success, .saveAction), .input-save-wrap > .fa-check { --ip-inline-fg: #ffffff; --ip-inline-bg: var(--ip-ui-save); --ip-inline-border: var(--ip-ui-save); --ip-inline-hover-bg: var(--ip-ui-save-hover); --ip-inline-hover-border: var(--ip-ui-save-hover); } /* アイコンを包むa/button/spanにも対応。混在する操作グループ全体は着色しない。 */ @supports selector(a:has(.fa-check)) { .input-save-wrap :is(a, button):has(.fa-check):not(:has(.fa-times, .fa-close)), .input-save-wrap > span:has(> .fa-check):not(:has(.fa-times, .fa-close)) { --ip-inline-fg: #ffffff; --ip-inline-bg: var(--ip-ui-save); --ip-inline-border: var(--ip-ui-save); --ip-inline-hover-bg: var(--ip-ui-save-hover); --ip-inline-hover-border: var(--ip-ui-save-hover); } .input-save-wrap > span:has(> .fa-check, > .fa-times, > .fa-close):not(:has(> .fa-check ~ .fa-times, > .fa-check ~ .fa-close, > .fa-times ~ .fa-check, > .fa-close ~ .fa-check)):where(:not(.hide, .hidden, [hidden])) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: var(--ip-ui-inline-size) !important; min-height: var(--ip-ui-inline-size) !important; padding: 4px 7px !important; border: 1px solid var(--ip-inline-border, #7b8591) !important; border-radius: var(--ip-ui-radius) !important; color: var(--ip-inline-fg, var(--ip-ui-cancel)) !important; background-color: var(--ip-inline-bg, #ffffff) !important; line-height: 1.2 !important; box-sizing: border-box !important; } .input-save-wrap > span:has(> .fa-check, > .fa-times, > .fa-close):not(:has(> .fa-check ~ .fa-times, > .fa-check ~ .fa-close, > .fa-times ~ .fa-check, > .fa-close ~ .fa-check)):where(:not(:disabled, .disabled, [aria-disabled="true"])):hover { background-color: var(--ip-inline-hover-bg, #e7e9ec) !important; border-color: var(--ip-inline-hover-border, #505b68) !important; } } .input-save-wrap :is(a, button):where(:not(:disabled, .disabled, [aria-disabled="true"])):hover, .input-save-wrap > :is(.btn, .saveAction, .cancelAction, .fa-check, .fa-times, .fa-close):where(:not(:disabled, .disabled, [aria-disabled="true"])):hover { background-color: var(--ip-inline-hover-bg, #e7e9ec) !important; border-color: var(--ip-inline-hover-border, #505b68) !important; } /* キャンセルは白／灰色。既存のリンク／ボタンの動作はそのまま使用。 */ .editViewPageDiv a.cancelLink, .modal-footer a.cancelLink { color: var(--ip-ui-cancel) !important; text-decoration: underline !important; text-underline-offset: 2px; } .input-save-wrap :is(.cancelAction, .cancelLink), .input-save-wrap > :is(.fa-times, .fa-close) { --ip-inline-fg: var(--ip-ui-cancel); --ip-inline-bg: #ffffff; --ip-inline-border: #7b8591; --ip-inline-hover-bg: #e7e9ec; --ip-inline-hover-border: #505b68; } /* 無効状態でも色で有効に見せない。クリック可否は既存処理に従う。 */ .btn-success:is(:disabled, .disabled, [aria-disabled="true"]), .detailview-table td.fieldValue .edit button[type="submit"]:is(:disabled, .disabled, [aria-disabled="true"]), .input-save-wrap :is(a, button, span, i):is(:disabled, .disabled, [aria-disabled="true"]) { opacity: 0.5 !important; cursor: not-allowed !important; } /* --- 14.3 一覧の選択状態 --- */ /* Tab操作中の行。行内にフォーカスがある間だけ表示。 */ tr.listViewEntries:focus-within { --ip-row-bg: var(--ip-ui-row-focus-bg); } tr.listViewEntries:focus-within > td { background-color: var(--ip-ui-row-focus-bg) !important; } /* aria-selectedを付ける画面／拡張向け。通常ホバーより優先。 */ tr.listViewEntries[aria-selected="true"], tr.listViewEntries[aria-selected="true"]:hover, tr.listViewEntries[aria-selected="true"]:focus-within { --ip-row-bg: var(--ip-ui-selected-bg); } tr.listViewEntries[aria-selected="true"] > td, tr.listViewEntries[aria-selected="true"]:hover > td, tr.listViewEntries[aria-selected="true"]:focus-within > td { background-color: var(--ip-ui-selected-bg) !important; } /* 行選択用チェックボックスのみを対象にする。 業務データのYes/No欄をチェックしただけでは、選択行として着色しない。 AJAXで追加された行にもCSSが適用され、チェック解除で元の表示に戻る。 対象: listViewEntriesCheckBox / name="selected_id" / name="selected_id[]" 拡張が別のクラスを使う場合は、実際の選択用checkboxに合わせて追加する。 :has() の仕様: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has */ @supports selector(tr:has(input:checked)) { tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked), tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked):hover, tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked):focus-within { --ip-row-bg: var(--ip-ui-selected-bg); } tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked) > td, tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked):hover > td, tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked):focus-within > td { background-color: var(--ip-ui-selected-bg) !important; } } /* 複数選択の入力中は外側の枠でフォーカスを示す。内部検索の二重枠を抑える。 */ .select2-container-multi .select2-choices .select2-search-field input:focus, .select2-container .select2-selection--multiple .select2-search__field:focus { outline: none !important; background-color: transparent !important; } /* ============================================================ 15. High Readability Theme（標準部品のコントラストを統一） ============================================================ */ /* 通常の主操作ボタン。保存・警告などの意味を持つ色は優先する。 */ .btn-primary:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info)) { color: #ffffff !important; background-color: var(--ip-ui-accent) !important; border-color: var(--ip-ui-accent) !important; } .btn-primary:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, :disabled, .disabled, [aria-disabled="true"])):is(:hover, :active, .active), .open > .dropdown-toggle.btn-primary:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, :disabled, .disabled, [aria-disabled="true"])) { background-color: #102b47 !important; border-color: #102b47 !important; } /* ピックリスト候補のハイライト。候補の寸法・配置や業務上の色ラベルは維持。 */ .select2-results .select2-highlighted:where(:not(.select2-disabled, [aria-disabled="true"])), .select2-results .select2-results__option--highlighted:where(:not(.select2-results__option--disabled, [aria-disabled="true"])) { color: #ffffff !important; background-color: var(--ip-ui-accent) !important; } /* ブラウザー標準の選択マークも濃紺に揃える。 */ input[type="checkbox"], input[type="radio"] { accent-color: var(--ip-ui-accent); } /* 入力例が薄すぎて読めない状態を避ける。文字の大きさ・位置は既存設定を維持。 */ input::placeholder, textarea::placeholder { color: var(--ip-ui-muted) !important; opacity: 1 !important; } /* ウィジェットの角丸を調整 */ .summaryView, .summaryWidgetContainer, li.dashboardWidget { border-radius: 8px !important; } /* ブロックの角丸を8pxに変更 */ .detailViewContainer .block { border-radius: 8px !important; } /* ============================================================ 16. UI4 / 優先度: 高 / 重要項目のラベル 「必須」を推定しない。内部項目名の明示リストでラベルだけを強調。 値セル・入力値には文字色を指定しない。顧客企業名のIDは提供画像で確認。 他の画面は同じ命名規則のIDを持つ場合に適用。独自項目はIDを確認して追加。 ============================================================ */ :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:is( [id$="_fieldLabel_accountname"], [id$="_fieldLabel_potentialname"], [id$="_fieldLabel_ticket_title"], [id$="_fieldLabel_subject"], [id$="_fieldLabel_lastname"], [id$="_fieldLabel_firstname"], [id$="_fieldLabel_company"], [id$="_fieldLabel_assigned_user_id"], [id$="_fieldLabel_productname"], [id$="_fieldLabel_servicename"], [id$="_fieldLabel_projectname"], [id$="_fieldLabel_vendorname"], [id$="_fieldLabel_assetname"], [id$="_fieldLabel_campaignname"] ) { color: var(--ip-ui-important-label) !important; font-weight: var(--ip-ui-important-weight) !important; } :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:is( [id$="_fieldLabel_accountname"], [id$="_fieldLabel_potentialname"], [id$="_fieldLabel_ticket_title"], [id$="_fieldLabel_subject"], [id$="_fieldLabel_lastname"], [id$="_fieldLabel_firstname"], [id$="_fieldLabel_company"], [id$="_fieldLabel_assigned_user_id"], [id$="_fieldLabel_productname"], [id$="_fieldLabel_servicename"], [id$="_fieldLabel_projectname"], [id$="_fieldLabel_vendorname"], [id$="_fieldLabel_assetname"], [id$="_fieldLabel_campaignname"] ) > :is(.muted, label) { color: inherit !important; font-weight: inherit !important; } /* 編集画面にラベルIDがない場合は、直後の値セルのフォーム項目名を使用。 */ @supports selector(td:has(+ td input)) { .editViewContents td.fieldLabel:has(+ td.fieldValue :is(input, select, textarea):is([name="accountname"], [name="potentialname"], [name="ticket_title"], [name="subject"], [name="lastname"], [name="firstname"], [name="company"], [name="assigned_user_id"], [name="productname"], [name="servicename"], [name="projectname"], [name="vendorname"], [name="assetname"], [name="campaignname"])) { color: var(--ip-ui-important-label) !important; font-weight: var(--ip-ui-important-weight) !important; } .editViewContents td.fieldLabel:has(+ td.fieldValue :is(input, select, textarea):is([name="accountname"], [name="potentialname"], [name="ticket_title"], [name="subject"], [name="lastname"], [name="firstname"], [name="company"], [name="assigned_user_id"], [name="productname"], [name="servicename"], [name="projectname"], [name="vendorname"], [name="assetname"], [name="campaignname"])) > :is(.muted, label) { color: inherit !important; font-weight: inherit !important; } } /* ============================================================ 17. UI4 / 優先度: 高 / 編集中・エラー時のラベル 同じ行の全ラベルではなく、直前のラベル1つだけを対象にする。 Select2は標準の状態クラスを利用。検証エラーは既存処理が付けた状態のみ。 ============================================================ */ @supports selector(td:has(+ td:focus-within)) { :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue:focus-within), :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue .select2-container:is(.select2-container-active, .select2-container--focus, .select2-container--open)) { color: var(--ip-ui-important-label) !important; font-weight: var(--ip-ui-important-weight) !important; background-color: var(--ip-ui-focus-label-bg) !important; } :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue:focus-within) > :is(.muted, label), :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue .select2-container:is(.select2-container-active, .select2-container--focus, .select2-container--open)) > :is(.muted, label) { color: inherit !important; font-weight: inherit !important; } :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue.has-error), :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue :is(input, select, textarea, .select2-container):is(.inputElement, .form-control, .select2-container):is(.input-error, .error, [aria-invalid="true"])) { color: var(--ip-ui-error) !important; font-weight: var(--ip-ui-important-weight) !important; background-color: var(--ip-ui-error-bg) !important; } :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue.has-error) > :is(.muted, label), :is(#detailView, .editViewContents, .summaryViewFields) td.fieldLabel:has(+ td.fieldValue :is(input, select, textarea, .select2-container):is(.inputElement, .form-control, .select2-container):is(.input-error, .error, [aria-invalid="true"])) > :is(.muted, label) { color: inherit !important; font-weight: inherit !important; } } /* ============================================================ 18. UI4 / 優先度: 高 / 詳細の文字列・URL・長文 値ラッパーの既存data-field-type、またはdescription/solutionのIDに限定。 省略によってDOMから失われた文章の復元や、データ上の改行の追加は行わない。 display/visibility/固定高さは指定せず、インライン編集の表示切替を尊重。 ============================================================ */ #detailView td.fieldValue > .value:is([data-field-type="string"], [data-field-type="text"], [data-field-type="url"], [data-field-type="email"], [data-field-type="reference"], [data-field-type="owner"]), #detailView td.fieldValue:is([id$="_fieldValue_description"], [id$="_fieldValue_solution"]) > .value { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal; line-height: var(--ip-ui-field-line-height) !important; } #detailView td.fieldValue > .value[data-field-type="text"], #detailView td.fieldValue:is([id$="_fieldValue_description"], [id$="_fieldValue_solution"]) > .value { line-height: var(--ip-ui-longtext-line-height) !important; } #detailView td.fieldValue:is([id$="_fieldValue_description"], [id$="_fieldValue_solution"]) { vertical-align: top !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* 大きなリッチテキスト画像だけをセル内に収める。表/iframeのレイアウトは変更しない。 */ #detailView td.fieldValue > .value[data-field-type="text"] img:not([width]):not([height]) { max-width: 100%; height: auto; } /* ============================================================ 19. UI4 / 優先度: 中 / 一覧の識別項目 内部名を持つ列だけに限定。金額・日付・操作列の幅は変更しない。 行高の一律固定や行数制限は行わず、長い名称は全文を折り返す。 ============================================================ */ .listViewPageDiv tr.listViewEntries > td:is( [data-name="accountname"], [data-fieldname="accountname"], [data-name="potentialname"], [data-fieldname="potentialname"], [data-name="ticket_title"], [data-fieldname="ticket_title"], [data-name="subject"], [data-fieldname="subject"], [data-name="productname"], [data-fieldname="productname"], [data-name="servicename"], [data-fieldname="servicename"], [data-name="projectname"], [data-fieldname="projectname"] ) { min-width: var(--ip-ui-list-name-min); max-width: var(--ip-ui-list-name-max); white-space: normal !important; overflow-wrap: anywhere; word-break: normal; line-height: 1.5 !important; } .listViewPageDiv tr.listViewEntries > td:is( [data-name="accountname"], [data-fieldname="accountname"], [data-name="potentialname"], [data-fieldname="potentialname"], [data-name="ticket_title"], [data-fieldname="ticket_title"], [data-name="subject"], [data-fieldname="subject"], [data-name="productname"], [data-fieldname="productname"], [data-name="servicename"], [data-fieldname="servicename"], [data-name="projectname"], [data-fieldname="projectname"] ) > :is(a, .value, .textOverflowEllipsis) { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip !important; max-width: 100%; } /* ============================================================ 20. UI4 / 優先度: 中 / 詳細内の実リンクを識別しやすくする hrefを持つ値内リンクだけ。電話番号のリンク化やリンク先の変更はしない。 ボタン/バッジ/アイコンには適用しない。 ============================================================ */ #detailView td.fieldValue > .value a:is([href^="https://"], [href^="http://"], [href^="mailto:"], [href^="tel:"], [href^="index.php?"]):where(:not(.btn, .badge, .label, .picklist-color, .fa, [role="button"])) { color: var(--ip-ui-link-color) !important; text-decoration-line: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; } /* ============================================================ 21. UI4 / 優先度: 中 / ブロックの種類を控えめに区別 既存のdata-block属性と一致する詳細ブロックのみ。見出し文字は置換しない。 ============================================================ */ .detailViewContainer .block:is([data-block="LBL_ACCOUNT_INFORMATION"], [data-block="LBL_CONTACT_INFORMATION"], [data-block="LBL_LEAD_INFORMATION"], [data-block="LBL_OPPORTUNITY_INFORMATION"], [data-block="LBL_TICKET_INFORMATION"], [data-block="LBL_QUOTE_INFORMATION"], [data-block="LBL_INVOICE_INFORMATION"]) { border-left-color: var(--ip-ui-block-basic) !important; } .detailViewContainer .block[data-block="LBL_ADDRESS_INFORMATION"] { border-left-color: var(--ip-ui-block-address) !important; } .detailViewContainer .block:is([data-block="LBL_DESCRIPTION_INFORMATION"], [data-block="LBL_TICKET_RESOLUTION"]) { border-left-color: var(--ip-ui-block-notes) !important; } /* ============================================================ 22. UI4 / 優先度: 中 / ダイアログの長い見出し・項目名 セレクト候補のポップアップを切らないよう、本文のoverflowや高さは変更しない。 ============================================================ */ .modal .modal-header :is(.modal-title, h3, h4, h5) { overflow-wrap: anywhere; white-space: normal !important; padding-right: 28px; } .modal td.fieldLabel, .modal td.fieldLabel > :is(.muted, label), .modal .modal-body :is(.help-block, .help-inline) { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.6 !important; } /* ラベル直後のフォーム欄に限定し、標準入力の既定幅による横はみ出しを防ぐ。 */ .modal td.fieldLabel + td.fieldValue input.inputElement:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])), .modal td.fieldLabel + td.fieldValue textarea.inputElement, .modal td.fieldLabel + td.fieldValue select.inputElement { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* ============================================================ 23. UI4 / 優先度: 中 / ブラウザー印刷の詳細本文 詳細画面の操作アイコンだけ省略。非表示データや折りたたみは展開しない。 全件印刷/見積書PDF/メニュー除去を伴う専用帳票レイアウトではありません。 ============================================================ */ @media print { #detailView td.fieldValue > .action, #detailView .input-save-wrap { display: none !important; } #detailView .block h4 { break-after: avoid; } #detailView .block { box-shadow: none !important; } #detailView td.fieldValue > .value { overflow-wrap: anywhere; } #detailView td.fieldValue > .value a[href] { color: #000000 !important; text-decoration: underline !important; } } /* ============================================================ 24. UI4.1 / 日付・通貨・数値の複合入力欄のはみ出し修正 外枠 .input-group.inputElement の固定高と、子部品の高さの競合を解消。 inputElementを持たないdateField/currencyFieldなどの直接のinputも対象。 幅100%の入力欄にボタン幅が加算されないよう、入力部分だけを伸縮させる。 カレンダー等のポップアップを切り落とさない。hidden入力は対象外。 ============================================================ */ :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible; align-items: stretch; } /* 外枠はレイアウトのみ担当。枠線は入力・通貨記号・ボタンに持たせる。 */ :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group.inputElement { padding: 0 !important; border: 0 !important; background-color: transparent !important; box-shadow: none !important; } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])) { flex: 1 1 0% !important; width: 1% !important; min-width: 0 !important; max-width: 100% !important; height: var(--ip-ui-control-height) !important; min-height: var(--ip-ui-control-height) !important; max-height: none !important; box-sizing: border-box !important; padding: var(--ip-ui-control-pad-y) 10px !important; margin: 0 !important; float: none !important; font-size: var(--ip-ui-font-size) !important; line-height: var(--ip-ui-control-line-height) !important; border: 1px solid var(--ip-ui-group-border, var(--ip-ui-border-strong)) !important; border-radius: var(--ip-ui-radius) !important; box-shadow: none !important; } /* 通貨記号、カレンダー、検索ボタンは縮めず、同じ高さで配置。 */ :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > :is(.input-group-addon, .input-group-btn) { flex: 0 0 auto !important; width: auto !important; min-width: 0; height: var(--ip-ui-control-height) !important; min-height: var(--ip-ui-control-height) !important; max-height: none !important; box-sizing: border-box !important; margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: top; } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > .input-group-addon { min-width: 40px; padding: var(--ip-ui-control-pad-y) 10px !important; line-height: var(--ip-ui-control-line-height) !important; } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > .input-group-btn > .btn { height: var(--ip-ui-control-height) !important; min-height: var(--ip-ui-control-height) !important; margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } /* inputElementクラスがない入力も、隣接する部品と枠線・角を連結。 */ @supports selector(input:has(+ span)) { :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"])):has(+ :is(.input-group-addon, .input-group-btn)) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-width: 0 !important; } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > .input-group-addon:has(+ input:not([type="hidden"])) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-width: 0 !important; } } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:not([type="hidden"]) + .input-group-addon, :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:not([type="hidden"]) + .input-group-btn > .btn, :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > :is(.input-group-addon, .input-group-btn) + input:not([type="hidden"]) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* 枠線の正規化後も、フォーカスと既存のエラー表示を優先。 */ :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:focus { --ip-ui-group-border: var(--ip-ui-focus); } :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:is(.input-error, .error, [aria-invalid="true"]), :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group > input:is(.input-error, .error, [aria-invalid="true"]):focus, :is(.editViewContents, .detailview-table, .modal) .fieldValue.has-error .input-group > input, :is(.editViewContents, .detailview-table, .modal) .fieldValue .has-error > input { --ip-ui-group-border: var(--ip-ui-error); outline-color: var(--ip-ui-error) !important; background-color: var(--ip-ui-error-bg) !important; } /* 幅・高さだけの修正で、非表示部品を表示しない。 */ :is(.editViewContents, .detailview-table, .modal) .fieldValue .input-group:is(.hide, .hidden, [hidden]) { display: none !important; } /* ============================================================ 25. Quick Preview: ラベルと値の重なりを防ぐ 対象は提供画像で確認した .quickPreviewSummary 内の項目表のみ。 ============================================================ */ .quickPreviewSummary > table.summary-table { width: 100% !important; table-layout: fixed !important; } .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > :is(td.fieldLabel, td.fieldValue) { float: none !important; box-sizing: border-box !important; min-width: 0 !important; padding: 8px 12px !important; vertical-align: top !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.6 !important; } .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldLabel { width: 38% !important; } .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldValue { width: 62% !important; } /* Bootstrap .row の負の左右余白を、このセル直下だけで解除する。 */ .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldValue > .row { margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; } .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldLabel > label, .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldValue :is(.value, .fieldValue, a:not(.btn), .textOverflowEllipsis) { white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; } .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldLabel > label { margin-bottom: 0 !important; } /* ============================================================ 26. Mobile / Tablet — 一覧・詳細・編集・クイック表示 UI4.2を継承。screenのみ。PCマウスの1200px以上は元のレイアウト。 displayに!importantを付けず、hide/hidden/inline非表示を優先する。 ナビゲーションやJS制御のスクロール位置・開閉状態は変更しない。 ============================================================ */ @media screen and (max-width: 1199px) { :is(.listViewPageDiv, .detailViewContainer, .editViewPageDiv, .editViewContents) { min-width: 0; max-width: 100%; box-sizing: border-box; } /* 26.1 一覧 — 実際に一覧行を持つ専用枠だけで横スクロール。 */ .listViewPageDiv :is(div.table-container, div.listview-table-container, div.table-responsive, div.listview-table, div#listViewContents):has(> table > tbody > tr.listViewEntries) { min-width: 0 !important; max-width: 100% !important; width: 100% !important; overflow: auto !important; box-sizing: border-box; } .listViewPageDiv :is(div.table-container, div.listview-table-container, div.table-responsive, div.listview-table, div#listViewContents):has(> table > tbody > tr.listViewEntries) > table { min-width: 680px; width: 100%; } /* 固定ナビ全体の高さは触らず、画面内の操作欄を折り返す。 */ .listViewPageDiv :is(.listview-actions-container, .listViewActionsContainer), .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer { min-width: 0; max-width: 100%; white-space: normal !important; } .detailview-header-block .detailViewButtoncontainer { float: none !important; width: 100% !important; clear: both; } :is(.listViewPageDiv .listview-actions-container, .listViewPageDiv .listViewActionsContainer, .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer) > :is(.pull-left, .pull-right) { float: none !important; max-width: 100%; } :is(.listViewPageDiv .listview-actions-container, .listViewPageDiv .listViewActionsContainer, .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer) .btn-group:where(:not(.hide, .hidden, [hidden])) { display: inline-flex; flex-wrap: wrap; max-width: 100%; vertical-align: top; margin-bottom: 6px; } :is(.listViewPageDiv .listview-actions-container, .listViewPageDiv .listViewActionsContainer, .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer) .btn-group > .btn { float: none !important; white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; } .detailview-header-block .recordBasicInfo, .detailview-header-block .recordBasicInfo :is(h3, h4, .recordLabel) { min-width: 0; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; } .detailViewContainer .related-tabs.row { margin-left: 0 !important; margin-right: 0 !important; } /* 26.2 詳細・編集 — 概要欄の固定幅や長い補助文も収める。 */ :is(.detailViewContainer, .editViewContents) :is(.fieldLabel, .fieldValue) { min-width: 0; overflow-wrap: anywhere; } :is(.detailViewContainer, .editViewContents) .fieldValue > .row { margin-left: 0 !important; margin-right: 0 !important; } :is(.detailViewContainer, .editViewContents) .fieldValue :is(.help-block, .input-info, .input-error-message) { white-space: normal !important; max-width: 100%; overflow-wrap: anywhere; } :is(.detailViewContainer, .editViewContents) .fieldValue input[type="file"] { max-width: 100%; min-width: 0; } /* 26.3 クイック表示 — helpPageOverlayの他用途に波及させない。 */ #helpPageOverlay:has(> .quickPreview) { box-sizing: border-box !important; width: min(550px, 100vw) !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; padding-left: max(8px, env(safe-area-inset-left, 0px)) !important; padding-right: max(8px, env(safe-area-inset-right, 0px)) !important; } #helpPageOverlay > .quickPreview, #helpPageOverlay > .quickPreview > .quick-preview-modal { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; } #helpPageOverlay > .quickPreview .quickPreviewModuleHeader.row { margin-left: 0 !important; margin-right: 0 !important; } #helpPageOverlay > .quickPreview :is(.quickPreviewModuleHeader, .quickPreviewActions) { min-width: 0; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; } #helpPageOverlay > .quickPreview .quickPreviewModuleHeader :is(h3, h4, .recordLabel, a:not(.btn)) { white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; } #helpPageOverlay > .quickPreview .quickPreviewActions .btn { margin-bottom: 6px; white-space: normal !important; max-width: 100%; } } /* 26.4 992〜1199pxにも、既存のタブレット向けフォーム配置を拡張。 */ @media screen and (min-width: 992px) and (max-width: 1199px) { :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)):where(:not(.hide, .hidden, [hidden])), :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody:where(:not(.hide, .hidden, [hidden])) { display: block; width: 100% !important; max-width: 100%; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr:has(> td.fieldLabel):where(:not(.hide, .hidden, [hidden])) { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); width: 100%; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > :is(td.fieldLabel, td.fieldValue):where(:not(.hide, .hidden, [hidden])) { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; white-space: normal !important; overflow-wrap: anywhere; padding: 8px 10px !important; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > td.fieldLabel { text-align: left !important; } :is(.editViewContents, .detailViewContainer, .summaryWidgetContainer) table:has(> tbody > tr > td.fieldLabel):not(:has(> tbody > tr.listViewEntries)) > tbody > tr > td[colspan="4"] { grid-column: 1 / -1; } } /* 26.5 指で操作する画面のボタン。文字サイズ・配色は既存を継承。 */ @media screen and (max-width: 1199px), screen and (pointer: coarse) { :is(.listViewPageDiv .listview-actions-container, .listViewPageDiv .listViewActionsContainer, .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer) .btn, #helpPageOverlay > .quickPreview :is(.quickPreviewActions .btn, button.close, a.close), .detailViewContainer .related-tabs .nav-tabs > li > a { min-height: 44px !important; min-width: 44px; box-sizing: border-box; padding: 10px 12px !important; line-height: 22px !important; } .listViewPageDiv tr.listViewEntries :is(.actions, .actionImages) :is(a, button):where(:not(.hide, .hidden, [hidden])) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; vertical-align: middle; } /* Bootstrapのdisplay指定より、明示されたhidden属性を優先。 */ :is(.listViewPageDiv .listview-actions-container, .listViewPageDiv .listViewActionsContainer, .detailview-header-block .detailViewButtoncontainer, .editViewPageDiv .modal-overlay-footer) .btn-group[hidden], .listViewPageDiv tr.listViewEntries :is(.actions, .actionImages) :is(a, button)[hidden] { display: none !important; } :is(.listViewPageDiv, .editViewContents) input[type="checkbox"]:not([hidden]) { width: 20px !important; height: 20px !important; min-height: 20px !important; vertical-align: middle; } } @media screen and (max-width: 767px) { /* 横固定の名称列で狭い画面が埋まるのを防ぐ。列自体は全て残す。 */ .listViewPageDiv { --ip-ui-list-sticky-position: static; } .listViewPageDiv tr.listViewEntries > td { font-size: 14px; line-height: 1.6; } :is(.detailViewContainer, .editViewContents) :is(td.fieldLabel, td.fieldValue) { font-size: 16px; line-height: 1.6 !important; } :is(.detailViewContainer, .editViewContents) td.fieldLabel > :is(label, .muted) { margin-bottom: 0 !important; } /* 外側のモーダル幅調整はSection 12を継承。編集画面を含むものに限定。 */ .modal:has(.editViewContents) .modal-footer { white-space: normal; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); } .modal:has(.editViewContents) .modal-footer .btn { min-height: 44px; margin-bottom: 6px; max-width: 100%; white-space: normal; } } /* 26.6 スマホのクイック項目表はラベル→値の順に縦並び。 */ @media screen and (max-width: 575px) { #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table:where(:not(.hide, .hidden, [hidden])), #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table > tbody:where(:not(.hide, .hidden, [hidden])), #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries:where(:not(.hide, .hidden, [hidden])), #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > :is(td.fieldLabel, td.fieldValue):where(:not(.hide, .hidden, [hidden])) { display: block; width: 100% !important; box-sizing: border-box; min-width: 0 !important; max-width: 100%; } #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldLabel { text-align: left !important; padding: 8px 12px 4px !important; } #helpPageOverlay > .quickPreview .quickPreviewSummary > table.summary-table > tbody > tr.summaryViewEntries > td.fieldValue { padding: 8px 12px 12px !important; font-size: 16px; } } /* ============================================================ 27. Toolbar Button Colors — グレー・青の操作ボタン 配色のみ。寸法・位置・イベント・表示条件・権限は変更しない。 対象: module-action-bar / detailview-header-block / detailViewButtoncontainer 編集・追加はID等で判別。日本語表示文字やボタンの順番では判別しない。 ============================================================ */ @media screen { :root { --ip-ui-toolbar-bg: #e9edf2; --ip-ui-toolbar-hover-bg: #dce2e9; --ip-ui-toolbar-text: #20242a; --ip-ui-toolbar-edit-bg: #17385a; --ip-ui-toolbar-edit-hover-bg: #102b47; --ip-ui-toolbar-add-bg: #dcecff; --ip-ui-toolbar-add-hover-bg: #c7dfff; } :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)) { --ip-toolbar-bg: var(--ip-ui-toolbar-bg); --ip-toolbar-hover-bg: var(--ip-ui-toolbar-hover-bg); --ip-toolbar-fg: var(--ip-ui-toolbar-text); --ip-toolbar-border: var(--ip-ui-border-strong); color: var(--ip-toolbar-fg) !important; background-color: var(--ip-toolbar-bg) !important; border-color: var(--ip-toolbar-border) !important; text-shadow: none !important; } /* 既存のprimaryと、識別できた編集ボタンは濃紺。 */ :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)).btn-primary, :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):is([id$="_basicAction_LBL_EDIT"], [name="edit"], [onclick*="triggerEditView("]) { --ip-toolbar-bg: var(--ip-ui-toolbar-edit-bg); --ip-toolbar-hover-bg: var(--ip-ui-toolbar-edit-hover-bg); --ip-toolbar-fg: #ffffff; --ip-toolbar-border: var(--ip-ui-toolbar-edit-bg); } :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):is([id$="_basicAction_LBL_ADD_RECORD"], [name="addButton"]) { --ip-toolbar-bg: var(--ip-ui-toolbar-add-bg); --ip-toolbar-hover-bg: var(--ip-ui-toolbar-add-hover-bg); --ip-toolbar-fg: var(--ip-ui-accent); --ip-toolbar-border: var(--ip-ui-border-strong); } /* 前後移動は白背景のまま。 */ :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):is([id$="_detailView_previousRecord"], [id$="_detailView_nextRecord"], .previousRecordButton, .nextRecordButton, :has(> :is(.fa-chevron-left, .fa-chevron-right, .fa-angle-left, .fa-angle-right))) { --ip-toolbar-bg: #ffffff; --ip-toolbar-hover-bg: var(--ip-ui-toolbar-bg); --ip-toolbar-fg: var(--ip-ui-accent); --ip-toolbar-border: var(--ip-ui-border-strong); } :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):where(:not(:disabled, .disabled, [aria-disabled="true"])):is(:hover, :active, .active, [aria-pressed="true"]), :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .open > .btn.dropdown-toggle:where(:not(:disabled, .disabled, [aria-disabled="true"])):where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)) { background-color: var(--ip-toolbar-hover-bg) !important; color: var(--ip-toolbar-fg) !important; border-color: var(--ip-toolbar-border) !important; } :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):where(:not(:disabled, .disabled, [aria-disabled="true"])):focus-visible { outline: 2px solid var(--ip-ui-focus) !important; outline-offset: 2px !important; } :is(.module-action-bar, .detailview-header-block, .detailViewButtoncontainer) .btn:where(:not(.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-link, [type="submit"], .saveAction, .cancelAction, .dropdown-menu *)):is(:disabled, .disabled, [aria-disabled="true"]) { color: var(--ip-ui-muted) !important; background-color: var(--ip-ui-toolbar-bg) !important; border-color: var(--ip-ui-border-strong) !important; opacity: 0.6 !important; } } /* 参照先を選択するポップアップの横幅 */ .modal-dialog:has(#popupPageContainer) { width: 1200px !important; max-width: calc(100vw - 32px) !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ 28. UI4.5 / CSSだけで行う操作性改善（2026-09-20） 確認した実環境のHTML: 関連タブのdisplaylabel / tab-icon内のtitle、 一覧のtable-actions、listViewEntryValueのdata-field-type、quickPreview。 28以降を削除するとUI4.4の表示に戻せます。 JS・PHP・TPL・DBの変更は不要。表示条件・クリック処理は既存処理を使用。 ============================================================ */ @media screen { :root { --ip-ui-tab-label-size: 13px; --ip-ui-tab-label-display: inline; /* noneで追加したタブ名を非表示 */ --ip-ui-action-hit-size: 32px; --ip-ui-detail-header-pad-top: 16px; --ip-ui-detail-header-pad-bottom: 12px; } /* 28.1 関連タブ: 固定幅90pxと余白を解除し、名称の長さに合わせる。 順序・件数・「その他」メニュー・標準JSのタブ開閉は変更しない。 */ .related-tabs .nav-tabs { align-items: stretch; gap: 3px; padding: 3px 6px 0 !important; } .related-tabs .nav-tabs > li { width: auto !important; min-width: 0; max-width: 100%; flex: 0 1 auto; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .related-tabs .nav-tabs > li > a { width: auto !important; max-width: 100%; min-height: 40px; padding: 8px 10px !important; white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip !important; font-size: var(--ip-ui-tab-label-size) !important; line-height: 1.5 !important; gap: 5px; } /* 既に文字ラベルを持つタブには生成しない。空・非表示のアイコンも対象外。 displaylabelは件数取得後に標準JSが追加する属性。DOMを変更せず追従する。 */ .related-tabs .nav-tabs > li[data-module] > a[displaylabel]:not([displaylabel=""]):has(> .tab-icon):not(:has(.tab-label))::after { content: attr(displaylabel); display: var(--ip-ui-tab-label-display); order: 1; min-width: 0; font-family: var(--ip-ui-font); font-style: normal; font-weight: 600; font-size: var(--ip-ui-tab-label-size); line-height: 1.5; color: inherit; white-space: normal; overflow-wrap: anywhere; } /* displaylabelがまだ無い場合は、実在するアイコンのtitleを使う。 */ .related-tabs .nav-tabs > li[data-module] > a:is(:not([displaylabel]), [displaylabel=""]):not(:has(.tab-label)) > .tab-icon > i[title]:not([title=""])::after { content: attr(title); display: var(--ip-ui-tab-label-display); margin-left: 5px; font-family: var(--ip-ui-font); font-size: var(--ip-ui-tab-label-size); font-style: normal; font-weight: 600; line-height: 1.5; color: inherit; white-space: normal; overflow-wrap: anywhere; } .related-tabs .nav-tabs > li > a > .tab-icon { min-width: 0; } /* 実環境の件数は.badgeではなく.numberCircle。桁が増えても収める。 */ .related-tabs .nav-tabs > li > a > .numberCircle { order: 2; flex: 0 0 auto; width: auto !important; height: auto !important; min-width: 20px; margin: 0 !important; padding: 2px 5px !important; border-radius: 10px !important; font-size: 12px; line-height: 16px !important; text-align: center; white-space: nowrap; } /* 28.2 詳細ヘッダー: 外側の余白を控えめにし、長い名称を折り返す。 画像サイズや固定ナビ・検索欄の配置には触れない。 */ .detailview-header-block { padding-top: var(--ip-ui-detail-header-pad-top) !important; padding-bottom: var(--ip-ui-detail-header-pad-bottom) !important; } .detailview-header-block .detailview-header { margin-bottom: 6px !important; } .detailview-header-block .recordBasicInfo h4 { height: auto !important; min-height: 25px; line-height: 1.45 !important; margin-bottom: 5px !important; } .detailview-header-block .recordBasicInfo :is(h4, .recordLabel) { white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; } /* 28.3 一覧の操作: 実環境の.table-actionsだけに適用。 保存欄・ドロップダウン項目を常時表示しない。 */ .listViewPageDiv tr.listViewEntries > td.listViewRecordActions .table-actions { width: auto !important; min-width: calc(3 * var(--ip-ui-action-hit-size) + 48px); white-space: nowrap; } .listViewPageDiv tr.listViewEntries > td.listViewRecordActions .table-actions > span:where(:not(.hide, .hidden, [hidden])) { display: inline-block; float: none !important; width: auto !important; padding: 0 !important; margin-right: 3px !important; vertical-align: middle; } .listViewPageDiv tr.listViewEntries .table-actions > span > a:is(.quickView, .markStar):where(:not(.hide, .hidden, [hidden])), .listViewPageDiv tr.listViewEntries .table-actions > .more > .dropdown-toggle:where(:not(.hide, .hidden, [hidden])) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: var(--ip-ui-action-hit-size) !important; min-height: var(--ip-ui-action-hit-size) !important; padding: 4px !important; margin: 0 !important; line-height: 1.2 !important; border: 1px solid transparent; border-radius: var(--ip-ui-radius); text-decoration: none !important; cursor: pointer; } .listViewPageDiv tr.listViewEntries .table-actions > span > a:is(.quickView, .markStar):where(:not(.disabled, [aria-disabled="true"])):is(:hover, :focus-visible), .listViewPageDiv tr.listViewEntries .table-actions > .more > .dropdown-toggle:where(:not(.disabled, [aria-disabled="true"])):is(:hover, :focus-visible) { background-color: var(--ip-ui-selected-bg); border-color: var(--ip-ui-border-strong); } .listViewPageDiv tr.listViewEntries .table-actions > .input > input.listViewEntriesCheckBox { width: 18px; height: 18px; vertical-align: middle; } /* 28.4 クイック表示: 小さい閉じる・前後・詳細ボタンを押しやすく。 disabledやhidden、フォーカス表示は元の状態を維持する。 */ #helpPageOverlay > .quickPreview .quickPreviewActions .btn, #helpPageOverlay > .quickPreview .quickPreviewModuleHeader button.close { min-width: var(--ip-ui-action-hit-size) !important; min-height: var(--ip-ui-action-hit-size) !important; padding: 5px 9px !important; box-sizing: border-box; line-height: 20px !important; } #helpPageOverlay > .quickPreview .quickPreviewModuleHeader button.close { opacity: 1; border-radius: var(--ip-ui-radius); color: var(--ip-ui-muted); } #helpPageOverlay > .quickPreview .quickPreviewModuleHeader button.close:hover { background-color: var(--ip-ui-heading-bg); } /* 一覧に比べて小さい.btn-xsを標準的な文字サイズへ。 */ #helpPageOverlay > .quickPreview .quickPreviewActions .btn { font-size: 13px !important; white-space: normal; } /* 28.5 金額・数量の表示値だけを右寄せ。 実環境のdata-field-typeを使い、電話・日付・郵便番号等は含めない。 編集用input/selectやセル全体の配置は変更しない。 */ .listViewPageDiv tr.listViewEntries > td.listViewEntryValue:is([data-field-type="currency"], [data-field-type="double"], [data-field-type="integer"], [data-field-type="percentage"]) > .fieldValue:where(:not(.hide, .hidden, [hidden])) { display: block; width: 100%; max-width: 100%; text-align: right !important; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .listViewPageDiv tr.listViewEntries > td.listViewEntryValue:is([data-field-type="currency"], [data-field-type="double"], [data-field-type="integer"], [data-field-type="percentage"]) > .fieldValue > .value { text-align: right !important; font-variant-numeric: tabular-nums; } } /* 28.6 小さい画面・タッチ操作。既存UI4.3の44pxを継承する。 */ @media screen and (max-width: 1199px), screen and (pointer: coarse) { :root { --ip-ui-action-hit-size: 44px; } .related-tabs .nav-tabs > li > a { min-height: 44px !important; } } @media screen and (max-width: 767px) { .related-tabs .nav-tabs > li > a { padding: 9px 8px !important; } } /* ============================================================ 29. UI4.6 / 操作性向上パッチ（最後尾追加分） ============================================================ */ /* 29.1 詳細画面：インライン編集可能セルのホバー明示 */ @media (hover: hover) { #detailView td.fieldValue:has(.action:not(.hide) .editAction) :is(.editAction) { cursor: pointer; } #detailView td.fieldValue:has(.action:not(.hide) .editAction):not(:has(> .edit:not(.hide))):hover { background-color: #f8fafc !important; outline: 1px solid var(--ip-ui-border-strong); outline-offset: -1px; } } /* 29.2 長文入力欄：高さを確保し、縦方向に拡張可能にする */ .editViewContents td.fieldValue textarea.inputElement { min-height: 140px !important; resize: vertical; } /* ============================================================ 30. UI4.7 / 選択操作と用途別の入力欄（2026-09-22） 対象: Select2候補、操作メニュー、住所欄、Bootstrap datepicker。 表示条件・選択・保存・削除・日付判定は既存処理のまま。 ============================================================ */ @media screen { :root { --ip-ui-option-font-size: 14px; --ip-ui-option-line-height: 20px; --ip-ui-option-min-height: 32px; --ip-ui-option-pad-y: 6px; --ip-ui-address-min-height: 88px; --ip-ui-calendar-cell-size: 30px; } /* 30.1 Select2: 開いた候補だけを調整。 v3は実環境で確認。v4はrole=optionの候補に限定した互換指定。 グループの字下げ、選択色、非表示・無効状態は既存CSSを継承。 body直下に出るため.editViewContents配下には限定しない。 */ .select2-drop .select2-results .select2-result-selectable > .select2-result-label, .select2-dropdown .select2-results__option[role="option"] { min-height: var(--ip-ui-option-min-height) !important; padding-top: var(--ip-ui-option-pad-y) !important; padding-bottom: var(--ip-ui-option-pad-y) !important; font-size: var(--ip-ui-option-font-size) !important; line-height: var(--ip-ui-option-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; box-sizing: border-box; } /* 30.2 操作メニュー: ヘッダー・一覧のツールバー内だけ。 カレンダー、ユーザーメニュー、通常ボタンには適用しない。 display/visibility/pointer-eventsを変えず、権限等による非表示を維持。 */ :is(.module-action-bar, .detailViewButtoncontainer, .listViewActionsContainer) .dropdown-menu:not(.datepicker-dropdown) > li > a { min-height: var(--ip-ui-option-min-height) !important; padding-top: var(--ip-ui-option-pad-y) !important; padding-bottom: var(--ip-ui-option-pad-y) !important; font-size: var(--ip-ui-option-font-size) !important; line-height: var(--ip-ui-option-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; box-sizing: border-box; } :is(.module-action-bar, .detailViewButtoncontainer, .listViewActionsContainer) .dropdown-menu:not(.datepicker-dropdown) > li:not(.disabled):not([aria-disabled="true"]) > a:not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) { color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-focus-bg) !important; } /* 削除は翻訳された表示名やIDではなく、確認済みの処理名で識別。 警告色・区切り線のみであり、確認ダイアログを追加する指定ではない。 */ .detailViewButtoncontainer .dropdown-menu > li:has(> a[href^="javascript:Vtiger_Detail_Js.deleteRecord("]) { border-bottom: 1px solid var(--ip-ui-border-strong); padding-bottom: 4px; margin-bottom: 4px; } .detailViewButtoncontainer .dropdown-menu > li:not(.disabled):not([aria-disabled="true"]) > a[href^="javascript:Vtiger_Detail_Js.deleteRecord("]:not(.disabled):not([aria-disabled="true"]) { color: var(--ip-ui-error) !important; font-weight: 700; } .detailViewButtoncontainer .dropdown-menu > li:not(.disabled):not([aria-disabled="true"]) > a[href^="javascript:Vtiger_Detail_Js.deleteRecord("]:not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) { color: var(--ip-ui-error) !important; background-color: var(--ip-ui-error-bg) !important; } /* 30.3 住所欄: 編集画面の請求先・納入先住所だけをコンパクトに。 Section29の一律140pxをこの2項目だけ上書き。備考は140pxを維持。 rows=5による自動高を避けて初期高を指定するが、heightには !importantを付けず、手動リサイズのinline heightを優先する。 */ .editViewContents td.fieldValue textarea.inputElement:is([name="bill_street"], [name="ship_street"]) { min-height: var(--ip-ui-address-min-height) !important; height: var(--ip-ui-address-min-height); resize: vertical; } /* 30.4 日付カレンダー: Bootstrap datepickerのポップアップだけ。 7列＋左右padding4px＋border1pxを含む幅。位置決定は既存JSに任せる。 月/年選択のspanを日セルと同じ幅にしない。 */ .datepicker.datepicker-dropdown { width: calc(7 * var(--ip-ui-calendar-cell-size) + 10px) !important; min-width: 0 !important; max-width: calc(100vw - 16px) !important; padding: 4px !important; border-width: 1px !important; box-sizing: border-box; } .datepicker.datepicker-dropdown > div > table { width: 100% !important; border-collapse: collapse; border-spacing: 0; } .datepicker.datepicker-dropdown > .datepicker-days > table { table-layout: fixed; } .datepicker.datepicker-dropdown .datepicker-days td.day { width: var(--ip-ui-calendar-cell-size) !important; height: var(--ip-ui-calendar-cell-size) !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; text-align: center; vertical-align: middle; box-sizing: border-box; } .datepicker.datepicker-dropdown th:is(.prev, .next) { width: var(--ip-ui-calendar-cell-size) !important; } .datepicker.datepicker-dropdown th:is(.prev, .next, .datepicker-switch, .today, .clear) { height: var(--ip-ui-calendar-cell-size) !important; padding: 0 2px !important; font-size: 14px !important; line-height: 1.4 !important; text-align: center; vertical-align: middle; box-sizing: border-box; } /* 通常・別月・無効日。無効日を選べるようにする変更は行わない。 */ .datepicker.datepicker-dropdown .datepicker-days td.day:not(.active):not(.today):not(.disabled):not(.disabled-date) { color: var(--ip-ui-text); } .datepicker.datepicker-dropdown .datepicker-days td.day:is(.old, .new):not(.active):not(.today):not(.disabled):not(.disabled-date) { color: var(--ip-ui-muted); } .datepicker.datepicker-dropdown .datepicker-days td.day:not(.active):not(.disabled):not(.disabled-date):hover { background-color: var(--ip-ui-focus-bg) !important; background-image: none !important; } /* todayクラスは既存カレンダーが付与するものを利用する。 非選択の今日=淡い青＋内側の青線、選択日=濃い青＋白文字。 */ .datepicker.datepicker-dropdown .datepicker-days td.day.today:not(.active):not(.disabled):not(.disabled-date) { color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-focus-bg) !important; background-image: none !important; box-shadow: inset 0 0 0 2px var(--ip-ui-focus) !important; font-weight: 700; text-shadow: none !important; } .datepicker.datepicker-dropdown .datepicker-days td.day.active:not(.disabled):not(.disabled-date) { color: #fff !important; background-color: var(--ip-ui-accent) !important; background-image: none !important; font-weight: 700; text-shadow: none !important; } .datepicker.datepicker-dropdown .datepicker-days td.day.active.today:not(.disabled):not(.disabled-date) { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--ip-ui-accent) !important; } } /* 小画面、またはタッチを主入力とする端末は候補/メニュー44px。 指定は寸法だけ。ホバー必須の操作や新しいJS処理は追加しない。 */ @media screen and (max-width: 767px), screen and (pointer: coarse) { :root { --ip-ui-option-min-height: 44px; --ip-ui-option-pad-y: 12px; --ip-ui-calendar-cell-size: 44px; } } /* 320px級の画面は日付セル40px。7列280px＋外周10px=290px。 */ @media screen and (max-width: 359px) { :root { --ip-ui-calendar-cell-size: 40px; } } /* ============================================================ 31. UI4.8 / CSSだけで行う第二弾（2026-09-22） 対象: 複数選択タグ、既存のエラー/補足文、高コントラスト表示。 新しい検証・保存処理や、スクロール・一覧固定処理は追加しない。 ============================================================ */ @media screen { :root { --ip-ui-tag-font-size: 14px; --ip-ui-tag-line-height: 20px; --ip-ui-tag-min-height: 32px; --ip-ui-tag-pad-y: 5px; --ip-ui-tag-close-size: 28px; --ip-ui-help-font-size: 13px; --ip-ui-message-line-height: 1.6; } /* 31.1 複数選択済みタグ。候補リスト・単一選択・内部検索は対象外。 既存のfloat配置を維持し、長いタグだけ折り返す。 v3は既存環境の系統。v4は既存CSSと同じ互換対応を維持。 */ .select2-container-multi:has(> .select2-choices > .select2-search-choice), .select2-container-multi > .select2-choices:has(> .select2-search-choice), .select2-container:has(> .selection > .select2-selection--multiple .select2-selection__choice), .select2-container .select2-selection--multiple:has(.select2-selection__choice) { height: auto !important; min-width: 0; max-width: 100%; } .select2-container-multi > .select2-choices > .select2-search-choice, .select2-container .select2-selection--multiple .select2-selection__choice { position: relative; width: auto !important; min-width: 0; max-width: calc(100% - 6px) !important; height: auto !important; min-height: var(--ip-ui-tag-min-height) !important; margin: 3px !important; padding: var(--ip-ui-tag-pad-y) 8px var(--ip-ui-tag-pad-y) calc(var(--ip-ui-tag-close-size) + 8px) !important; font-size: var(--ip-ui-tag-font-size) !important; line-height: var(--ip-ui-tag-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; box-sizing: border-box !important; } .select2-container-multi > .select2-choices > .select2-search-choice > div, .select2-container .select2-selection--multiple .select2-selection__choice__display { min-width: 0; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; line-height: inherit; } /* v3の空リンクだけを拡大。スプライト画像は拡大せずCSSの線で×を描く。 既存リンクのクリック処理・tabindex・非表示条件は変更しない。 子要素を持つ独自拡張の解除リンクにはこの置換を適用しない。 */ .select2-container-multi > .select2-choices > .select2-search-choice > a.select2-search-choice-close:empty { width: var(--ip-ui-tag-close-size) !important; height: var(--ip-ui-tag-close-size) !important; left: 2px !important; right: auto !important; top: 50% !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background-image: none !important; background-color: transparent; color: var(--ip-ui-label-text); border: 1px solid transparent; border-radius: 3px; box-sizing: border-box !important; } .select2-container-multi > .select2-choices > .select2-search-choice > a.select2-search-choice-close:empty::before, .select2-container-multi > .select2-choices > .select2-search-choice > a.select2-search-choice-close:empty::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 0; border: 0; border-top: 2px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); } .select2-container-multi > .select2-choices > .select2-search-choice > a.select2-search-choice-close:empty::after { transform: translate(-50%, -50%) rotate(-45deg); } /* v4では既存の×文字を使用。displayを指定せず非表示状態を維持。 */ .select2-container .select2-selection--multiple .select2-selection__choice > .select2-selection__choice__remove { position: absolute; left: 2px !important; right: auto !important; top: 50% !important; width: var(--ip-ui-tag-close-size) !important; height: var(--ip-ui-tag-close-size) !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%); font-size: 20px !important; line-height: calc(var(--ip-ui-tag-close-size) - 2px) !important; text-align: center; color: var(--ip-ui-label-text); border: 1px solid transparent; border-radius: 3px; box-sizing: border-box !important; } .select2-container-multi:not(.select2-container-disabled) > .select2-choices > .select2-search-choice:not(.select2-locked) > a.select2-search-choice-close:empty:where(:not(.disabled, [aria-disabled="true"])):is(:hover, :focus-visible), .select2-container:not(.select2-container--disabled) .select2-selection--multiple .select2-selection__choice > .select2-selection__choice__remove:where(:not(:disabled, .disabled, [aria-disabled="true"])):is(:hover, :focus-visible) { color: var(--ip-ui-accent) !important; background-color: var(--ip-ui-focus-bg) !important; border-color: var(--ip-ui-border-strong) !important; } .select2-container-multi > .select2-choices > .select2-search-choice.select2-search-choice-focus { outline: 2px solid var(--ip-ui-focus); outline-offset: -2px; } /* 31.2 既存の補足・エラー説明。入力欄そのものを説明文扱いにしない。 文字・行間・折り返しだけを共通化し、display/positionは継承。 */ :is(.editViewContents, .detailViewContainer, .modal) .fieldValue :is(.help-block, .help-inline, .input-info, .input-error-message):not(input):not(select):not(textarea) { font-size: var(--ip-ui-help-font-size) !important; line-height: var(--ip-ui-message-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; max-width: 100%; box-sizing: border-box; } /* 一般補足の色は継承し、has-error内の意味のある配色を維持する。 */ :is(.editViewContents, .detailViewContainer, .modal) .fieldValue :is(.input-error-message, .help-block.error, .help-inline.error, label.error, span.error):not(input):not(select):not(textarea) { color: var(--ip-ui-error) !important; font-size: var(--ip-ui-help-font-size) !important; line-height: var(--ip-ui-message-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; max-width: 100%; } /* validationEngine形式の吹き出しに限る互換指定。 通常のtooltip/popoverは変更しない。吹き出し外枠・位置・矢印は継承。 */ .formError > .formErrorContent { font-size: var(--ip-ui-help-font-size) !important; line-height: var(--ip-ui-message-line-height) !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; } } @media screen and (max-width: 767px), screen and (pointer: coarse) { :root { --ip-ui-tag-min-height: 44px; --ip-ui-tag-pad-y: 11px; --ip-ui-tag-close-size: 40px; --ip-ui-help-font-size: 14px; } } /* 31.3 OSの高コントラスト設定時だけの補完。 ブラウザー標準の配色変換を活用し、forced-color-adjust:noneは使わない。 通常配色・通常レイアウトには影響しない。 */ @media screen and (forced-colors: active) { :root { --ip-ui-focus: Highlight; --ip-ui-error: CanvasText; --ip-ui-border-strong: ButtonText; } /* 枠とフォーカスを別の線で識別。色変換で影が消えても輪郭を残す。 */ :is(.editViewContents, .detailViewContainer, .modal) .btn { border-color: ButtonText !important; border-style: solid !important; } :is(.editViewContents, .detailViewContainer, .modal) :is(input, select, textarea):is(.inputElement, .form-control):is(.input-error, .error, [aria-invalid="true"]), :is(.editViewContents, .detailViewContainer, .modal) .has-error :is(input, select, textarea):is(.inputElement, .form-control), .select2-container:is(.input-error, .error, [aria-invalid="true"]) > :is(.select2-choice, .select2-choices, .select2-selection), .has-error .select2-container > :is(.select2-choice, .select2-choices, .select2-selection), .select2-container:is(.input-error, .error, [aria-invalid="true"]) > .selection > .select2-selection, .has-error .select2-container > .selection > .select2-selection { border-style: dashed !important; } /* 複合入力の外枠は既存CSSがborder:0にするためoutlineで補完。 */ :is(.editViewContents, .detailViewContainer, .modal) .fieldValue .input-group:has(> input:is(.input-error, .error, [aria-invalid="true"])), :is(.editViewContents, .detailViewContainer, .modal) .fieldValue.has-error .input-group { outline: 2px dashed CanvasText !important; outline-offset: 2px; } :is(.editViewContents, .detailViewContainer, .modal) .fieldValue :is(.input-error-message, .help-block.error, .help-inline.error, label.error, span.error):not(input):not(select):not(textarea) { text-decoration: underline; text-decoration-style: dotted; } /* 選択済み行。業務データのcheckboxを誤って行選択扱いしない。 */ tr.listViewEntries[aria-selected="true"] > td, tr.listViewEntries:has(> td input[type="checkbox"]:is(.listViewEntriesCheckBox, [name="selected_id"], [name="selected_id[]"]):checked) > td { outline: 1px solid Highlight !important; outline-offset: -2px !important; } .related-tabs .nav-tabs > li.active > a { outline: 2px solid Highlight !important; outline-offset: -3px !important; } /* Select2の選択候補。システム背景色と文字色は必ず対で指定。 */ .select2-results .select2-highlighted:where(:not(.select2-disabled, [aria-disabled="true"])), .select2-results .select2-results__option--highlighted:where(:not(.select2-results__option--disabled, [aria-disabled="true"])) { color: HighlightText !important; background-color: Highlight !important; outline: 1px solid HighlightText !important; outline-offset: -2px; } .select2-container-multi > .select2-choices > .select2-search-choice, .select2-container .select2-selection--multiple .select2-selection__choice { border: 1px solid CanvasText !important; } /* UI4.7の日付状態を影に依存しない線へ。今日=点線、選択日=実線。 選択日が今日の場合は実線と下線を併用する。 */ .datepicker.datepicker-dropdown .datepicker-days td.day.today:not(.active):not(.disabled):not(.disabled-date) { outline: 2px dotted CanvasText !important; outline-offset: -3px; } .datepicker.datepicker-dropdown .datepicker-days td.day.active:not(.disabled):not(.disabled-date) { color: HighlightText !important; background-color: Highlight !important; outline: 2px solid HighlightText !important; outline-offset: -3px; } .datepicker.datepicker-dropdown .datepicker-days td.day.active.today:not(.disabled):not(.disabled-date) { text-decoration: underline; text-underline-offset: 2px; } } /* ダッシュボード：「他」ボタンを右端へ配置 */ .dashBoardContainer .tabContainer .nav > .moreSettings { margin-left: auto !important; float: none !important; flex: 0 0 auto; } /* ========================================================== jqPlotグラフ：ダッシュボード・レポート共通 ========================================================== */ /* フォントと基本表示 */ .dashBoardContainer .jqplot-target, .jqplot-target[data-mode="Reports"] { font-family: var(--ip-ui-font) !important; color: var(--ip-ui-text) !important; } /* 古い立体的な影を削除 */ .dashBoardContainer .jqplot-series-shadowCanvas, .jqplot-target[data-mode="Reports"] .jqplot-series-shadowCanvas { display: none !important; } /* グラフタイトル */ .dashBoardContainer .jqplot-title, .jqplot-target[data-mode="Reports"] .jqplot-title { color: var(--ip-ui-heading) !important; font-family: var(--ip-ui-font) !important; font-size: 14px !important; font-weight: 900 !important; } /* 凡例を現代的なカード表示にする */ .dashBoardContainer table.jqplot-table-legend, .jqplot-target[data-mode="Reports"] table.jqplot-table-legend { padding: 6px 8px !important; background-color: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--ip-ui-border) !important; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(15, 42, 68, 0.08) !important; color: var(--ip-ui-text) !important; font-family: var(--ip-ui-font) !important; font-size: 8px !important; } /* 凡例の項目間隔 */ .dashBoardContainer table.jqplot-table-legend td, .jqplot-target[data-mode="Reports"] table.jqplot-table-legend td { padding: 2px 3px !important; vertical-align: middle !important; } /* 凡例の色見本 */ .dashBoardContainer .jqplot-table-legend-swatch-outline, .jqplot-target[data-mode="Reports"] .jqplot-table-legend-swatch-outline { padding: 0 !important; border: 0 !important; } .dashBoardContainer .jqplot-table-legend-swatch, .jqplot-target[data-mode="Reports"] .jqplot-table-legend-swatch { width: 11px !important; height: 11px !important; border: 0 !important; border-radius: 3px !important; } /* グラフ内の数値ラベル */ .dashBoardContainer .jqplot-point-label, .jqplot-target[data-mode="Reports"] .jqplot-point-label { color: var(--ip-ui-text) !important; font-family: var(--ip-ui-font) !important; font-size: 8px !important; font-weight: 600 !important; text-shadow: none !important; } /* HTMLとして生成される軸ラベル */ .dashBoardContainer .jqplot-axis, .jqplot-target[data-mode="Reports"] .jqplot-axis { color: var(--ip-ui-text-muted) !important; font-family: var(--ip-ui-font) !important; font-size: 8px !important; }