/** * FpNotify styles * * トースト (`.fp-notify-toast`) は bootstrap-notify の alert 上に重ねる装飾、 * モーダル (`.fp-notify-overlay` / `.fp-notify-dialog`) は独自実装。 * 既存の `.modal-overlay` とは z-index を分離 (10050 / 10100-10101)。 */ /* ========== Toast ========== */ /* 白背景 + 左アクセント縦帯 + 細いシャドウ。派手さを抑えつつ kind を識別させる。 */ .fp-notify-toast { background: #fff !important; color: #2b3440; border: 1px solid #e5e8eb; border-left: 4px solid #6c7a89; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); padding: 11px 34px 11px 14px; font-size: 13px; line-height: 1.55; min-width: 280px; max-width: 420px; } .fp-notify-toast--info { border-left-color: #3b82c4; } .fp-notify-toast--success { border-left-color: #2fa968; } .fp-notify-toast--warning { border-left-color: #d98717; } .fp-notify-toast--danger { border-left-color: #c84031; } .fp-notify-toast .close { color: #8a97a5; opacity: 1; text-shadow: none; font-size: 18px; line-height: 1; padding: 0; position: absolute; top: 8px; right: 10px; font-weight: normal; } .fp-notify-toast .close:hover { color: #2b3440; } .fp-notify-toast__title { font-size: 13px; font-weight: 600; display: inline-block; margin-bottom: 1px; color: #2b3440; } .fp-notify-toast--info .fp-notify-toast__title { color: #2f6fa8; } .fp-notify-toast--success .fp-notify-toast__title { color: #24875a; } .fp-notify-toast--warning .fp-notify-toast__title { color: #b36f11; } .fp-notify-toast--danger .fp-notify-toast__title { color: #a7382c; } .fp-notify-toast__msg { display: block; word-break: break-word; color: #4a5562; } .fp-notify-toast .progress { background: #eef1f4; height: 2px; margin-top: 8px; margin-bottom: 0; border-radius: 2px; box-shadow: none; } .fp-notify-toast .progress-bar { background: #c9d1d9; box-shadow: none; } .fp-notify-toast--info .progress-bar { background: #3b82c4; } .fp-notify-toast--success .progress-bar { background: #2fa968; } .fp-notify-toast--warning .progress-bar { background: #d98717; } .fp-notify-toast--danger .progress-bar { background: #c84031; } /* ========== Modal (alert / confirm) ========== */ .fp-notify-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 10100; } .fp-notify-dialog { position: fixed; z-index: 10101; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); top: 45%; left: 50%; transform: translate(-50%, -50%); width: 440px; max-width: 92vw; max-height: 82vh; overflow: hidden; font-size: 14px; color: #333; display: flex; flex-direction: column; } .fp-notify-dialog__header { padding: 14px 18px; background: #f6f8fa; border-bottom: 1px solid #e5e8eb; font-size: 15px; font-weight: 600; color: #333; border-left: 4px solid #3498db; } .fp-notify-dialog--warn .fp-notify-dialog__header { border-left-color: #e67e22; } .fp-notify-dialog--error .fp-notify-dialog__header { border-left-color: #e74c3c; } .fp-notify-dialog--success .fp-notify-dialog__header { border-left-color: #27ae60; } .fp-notify-dialog__body { padding: 18px; line-height: 1.65; flex: 1 1 auto; overflow-y: auto; word-break: break-word; } .fp-notify-dialog__footer { padding: 12px 18px; background: #fafbfc; border-top: 1px solid #e5e8eb; text-align: right; flex: 0 0 auto; } .fp-notify-dialog__footer .btn { min-width: 84px; margin-left: 8px; } .fp-notify-dialog__footer .btn:first-child { margin-left: 0; } /* dialog は直下 append で #wizard scope 外。bootstrap default の .btn-primary (bg #337ab7 / border #2e6da4) が当たり border が 2 色見えする。サイト共通の brand-dark (fp-univ.css :root) で単色化し wizard 配色と統一。 */ .fp-notify-dialog__footer .btn-primary { background-color: var(--brand-dark, #1F5D7A); border-color: var(--brand-dark, #1F5D7A); color: #fff; } .fp-notify-dialog__footer .btn-primary:hover, .fp-notify-dialog__footer .btn-primary:focus { background-color: var(--brand-light, #eaf2f8); border-color: var(--brand-dark, #1F5D7A); color: var(--brand-dark, #1F5D7A); } /* スマホ: 画面を広く使う */ @media (max-width: 640px) { .fp-notify-dialog { width: 92vw; } .fp-notify-toast { min-width: 240px; max-width: 92vw; } }