/* ========================================= * trend-calendar-ttcal.css（最小・安全ベース） * - カレンダーの前面化 / SP中央固定 * - 入力欄（CI/CO）のカーソルだけポインタ化 * - レイアウト寸法やセル余白は一切触らない（＝flatpickr既定に戻す） * ========================================= */ /* 前面化のみ（他UIに埋もれないように） */ .flatpickr-calendar { z-index: 99999 !important; } /* === SP中央配置（モーダル風） === ※ JS 側で .ttcal-center を付与したときのみ有効 */ @media (max-width: 768px){ .flatpickr-calendar.ttcal-center{ position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; max-width: 92vw; width: auto; } } /* ===== CI/CO 入力のカーソルを指アイコンに（見た目だけ） ===== ※ フォーカス時もテキストキャレットは出さない */ .ttf-ci, .ttf-ci-wrap input[type="text"], .ttf-co, .ttf-co-wrap input[type="text"]{ cursor: pointer !important; caret-color: transparent; user-select: none; -webkit-user-select: none; } .ttf-ci:focus, .ttf-ci-wrap input[type="text"]:focus, .ttf-co:focus, .ttf-co-wrap input[type="text"]:focus{ cursor: pointer !important; caret-color: transparent; } /* ===== 旧アンカーの点滅クラスが残っても視覚効果をOFF（保険） ===== */ #ttcal_anchor_s3.ttcal-ping, #ttcal_anchor.ttcal-ping, #ttcal-anchor.ttcal-ping, #calendar_anchor.ttcal-ping, .ttcal-anchor.ttcal-ping{ outline:none !important; animation:none !important; } /* ====== 重要：レイアウトを狂わせる上書きは一切しない ====== 下記のような指定（余白・幅・高さ・margin/padding）は入れないこと .flatpickr-days, .dayContainer, .flatpickr-day { margin/padding/width/height の変更禁止 } */ /* === 選択色カスタム === */ :root{ --ttc-select-bg: #ff8600; /* 始点・終点の塗り */ --ttc-select-text: #fff; /* 始点・終点の文字色 */ --ttc-range-bg: #ffe5c4; /* 帯（inRange）の塗り */ } /* 始点・終点（丸ピル） */ .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange{ background: var(--ttc-select-bg) !important; border-color: var(--ttc-select-bg) !important; color: var(--ttc-select-text) !important; } /* 帯（範囲内） */ .flatpickr-calendar .flatpickr-day.inRange{ background: var(--ttc-range-bg) !important; border-color: var(--ttc-range-bg) !important; color: inherit !important; /* 文字色は通常のまま */ } /* ホバー/フォーカス時も色を維持 */ .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover, .flatpickr-calendar .flatpickr-day.inRange:hover{ background: inherit !important; border-color: inherit !important; color: inherit !important; } /* === 仕切り線を全てオフ === */ /* 帯（inRange）に入る薄いグレーの縦線を消す */ .flatpickr-calendar .flatpickr-day.inRange{ box-shadow: none !important; /* ← これで縦線が消える */ border-color: var(--ttc-range-bg) !important; /* セル境界も帯色で埋める */ } /* 始点・終点が隣り合ったときに出る“青いライン”を消す */ .flatpickr-calendar .flatpickr-day.startRange + .flatpickr-day.endRange, .flatpickr-calendar .flatpickr-day.startRange + .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected + .flatpickr-day.endRange{ box-shadow: none !important; border-left-color: var(--ttc-select-bg) !important; /* 目地を埋めて一体化 */ } /* 念のため選択セル側にも影を出さない */ .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange{ box-shadow: none !important; } /* === カレンダー外枠の内側余白（左右+下に5px） === */ /* グリッド(dayContainer)には触らないので列崩れしません */ .flatpickr-calendar{ /* padding-left: 5px !important; padding-right: 5px !important; */ padding-bottom: 5px !important; } /* === 曜日ヘッダーの色（Sun / Sat）=== */ .flatpickr-weekdays .flatpickr-weekday:nth-child(1){ /* 日 */ color:#e53935 !important; } .flatpickr-weekdays .flatpickr-weekday:nth-child(7){ /* 土 */ color:#1e88e5 !important; } /* === 日付セルの色（Sun / Sat）=== */ /* ※ 無効日（過去/他月）は除外。選択中は選択色が優先される */ .dayContainer .flatpickr-day:nth-child(7n+1):not(.flatpickr-disabled){ /* 日 */ color:#e53935; } .dayContainer .flatpickr-day:nth-child(7n):not(.flatpickr-disabled){ /* 土 */ color:#1e88e5; } /* === 過去日（および前後月）は常にグレーアウト === */ /* minDate で無効化された現在月の過去日は .flatpickr-disabled が付きます */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:#c9c9c9 !important; background: none !important; box-shadow: none !important; cursor: default !important; } /* 祝日は最優先で赤（無効日は除外） */ .flatpickr-day.tt-holiday:not(.flatpickr-disabled){ color:#e53935 !important; } /* 週末色の後勝ち対策（より具体的に） */ .flatpickr-day.tt-holiday.inRange, .flatpickr-day.tt-holiday.startRange, .flatpickr-day.tt-holiday.endRange{ color:#fff !important; } /* 選択端はあなたの指定に合わせて必要なら */ /* ===== 祝日 強調：始点/終点は祝日色＋白文字 ===== */ :root{ --tt-holiday-bg: #f2265d; /* 祝日の背景（始点・終点） */ --tt-holiday-fg: #fff; /* 祝日の文字色（始点・終点） */ --tt-holiday-range-bg: #f5abbf; /* 祝日が選択範囲内に入った時の背景 */ } .flatpickr-day.tt-holiday.startRange:not(.flatpickr-disabled), .flatpickr-day.tt-holiday.endRange:not(.flatpickr-disabled), .flatpickr-day.tt-holiday.selected:not(.flatpickr-disabled){ background: var(--tt-holiday-bg) !important; color: var(--tt-holiday-fg) !important; border-color: var(--tt-holiday-bg) !important; box-shadow: none !important; } .flatpickr-day.tt-holiday.startRange:hover:not(.flatpickr-disabled), .flatpickr-day.tt-holiday.endRange:hover:not(.flatpickr-disabled), .flatpickr-day.tt-holiday.selected:hover:not(.flatpickr-disabled){ background: var(--tt-holiday-bg) !important; color: var(--tt-holiday-fg) !important; border-color: var(--tt-holiday-bg) !important; } /* ===== 祝日が“範囲内（inRange）”に入ったとき：背景だけ #f7789a、文字色は変更しない ===== */ .flatpickr-day.tt-holiday.inRange:not(.flatpickr-disabled){ background: var(--tt-holiday-range-bg) !important; /* color は指定しない＝現状のまま（サイトの既定やflatpickrの設定を尊重） */ } .flatpickr-day.tt-holiday.inRange:hover:not(.flatpickr-disabled){ background: var(--tt-holiday-range-bg) !important; } /* 2枚表示時に右端の角丸が切れないよう、クリッピングを解除 */ .flatpickr-calendar .flatpickr-days, .flatpickr-calendar .dayContainer{ overflow: visible !important; } /* フキダシ（三角）を完全に非表示 */ .flatpickr-calendar:before, .flatpickr-calendar:after{ content: none !important; display: none !important; border: 0 !important; } /* 念のため、テーマによって使われるクラスにも保険をかける */ .flatpickr-calendar.arrowTop, .flatpickr-calendar.arrowBottom{ /* 矢印用の余白を消す */ margin-top: 0 !important; }