@charset "UTF-8"; /* ========================================================= * anview 共通テーマ * - 背景画像（bg.png） * - フォント（M PLUS 1p） * - 配色（メイン #3fb5e0 / テキスト #666666） * dashboard/index.blade.php のデザインを他画面へ適用する用 * ========================================================= */ /* ---------- 1. CSS 変数（テーマトークン） ---------- */ :root { --anview-color-primary: #3fb5e0; --anview-color-primary-hover: #2ba3cf; --anview-color-text: #666666; --anview-color-text-strong: #444444; --anview-color-bg: #ffffff; --anview-color-border: #e4e4e4; --anview-color-card-bg: #ffffff; --anview-color-section-bg: #f1f1f1; --anview-font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "Meiryo", sans-serif; } /* ---------- 2. 基本タイポグラフィ ---------- */ /* * bodyに対して直接適用すると Tailwind の bg-* 系などと競合するので、 * 共通の囲いに対して指定する。 */ body.anview-theme { margin: 0; padding: 0; font-family: var(--anview-font-family); font-weight: 400; color: var(--anview-color-text); background: var(--anview-color-bg); min-height: 100vh; overflow-x: hidden; } body.anview-theme a { color: inherit; text-decoration: none; } body.anview-theme img { max-width: 100%; display: block; } /* ---------- 3. 背景画像つきコンテナ ---------- */ /* * 画面全体の背景に bg.png を敷くためのユーティリティ。 * dashboard/index.blade.php の .container と同じ表現をベースに、 * 画面幅が広いときも左右に白余白が出ないように background-size を 100% auto に。 * 画像本来のアスペクト比は保ったまま、画面幅いっぱいに広げる。 */ .anview-bg { background: var(--anview-color-bg) url('/images/bg.png') no-repeat center center; background-size: auto 100vh; background-attachment: fixed; min-height: 100vh; } /* 画面全体に背景を敷くタイプ（ログイン画面で使用） */ .anview-bg-fullscreen { background: var(--anview-color-bg) url('/images/bg.png') no-repeat center center; background-size: cover; background-attachment: fixed; min-height: 100vh; width: 100%; } /* ---------- 4. プライマリボタン（ログイン・ログアウト等） ---------- */ .anview-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; background: var(--anview-color-primary); color: #ffffff; font-family: var(--anview-font-family); font-weight: 700; font-size: 15px; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08); transition: background .15s ease, transform .05s ease; text-decoration: none; line-height: 1.4; } .anview-btn-primary:hover { background: var(--anview-color-primary-hover); } .anview-btn-primary:active { transform: translateY(1px); } /* ピル型（角丸大） */ .anview-btn-primary--pill { border-radius: 999px; padding: 8px 22px; } /* ---------- 5. 入力フィールド ---------- */ .anview-input { width: 100%; padding: 8px 12px; background: #ffffff; color: var(--anview-color-text-strong); font-family: var(--anview-font-family); font-size: 15px; border: 1px solid #cfcfcf; border-radius: 4px; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .anview-input:focus { outline: none; border-color: var(--anview-color-primary); box-shadow: 0 0 0 3px rgba(63, 181, 224, 0.15); } .anview-label { display: block; color: var(--anview-color-text); font-family: var(--anview-font-family); font-size: 14px; font-weight: 500; margin-bottom: 4px; } /* ---------- 6. セクションヘッダ（青帯） ---------- */ .anview-section-header { display: block; padding: 8px 16px; background: var(--anview-color-primary); color: #ffffff; font-weight: 700; font-size: 16px; letter-spacing: 0.05em; border-radius: 4px 4px 0 0; } /* ---------- 7. ヘッダ（ロゴ + ナビ + ユーザー） ---------- */ .anview-header { display: flex; align-items: center; padding: 14px 32px; background: #ffffff; border-bottom: 1px solid var(--anview-color-border); min-height: 60px; gap: 32px; } .anview-header__logo img { height: 42px; width: auto; display: block; } .anview-header__nav { display: flex; align-items: center; gap: 28px; flex: 1; } .anview-header__nav a { color: var(--anview-color-text); font-size: 15px; font-weight: 500; padding: 6px 4px; transition: color .15s ease; } .anview-header__nav a:hover { color: var(--anview-color-primary); } .anview-header__nav a.is-active { color: var(--anview-color-primary); border-bottom: 2px solid var(--anview-color-primary); } .anview-header__user { display: flex; align-items: center; gap: 14px; margin-left: auto; } .anview-header__user-info { display: flex; align-items: center; gap: 8px; color: var(--anview-color-text); font-size: 14px; } .anview-header__user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e5e5e5; display: flex; align-items: center; justify-content: center; color: #888888; font-size: 18px; border: 1px solid #cfcfcf; overflow: hidden; } /* ---------- 8. 見出し ---------- */ .anview-page-title { text-align: center; font-family: var(--anview-font-family); color: var(--anview-color-text-strong); font-size: 22px; font-weight: 700; margin: 28px 0 24px; } /* ---------- 9. ページカード（透明・bg.png を背景に見せる） ---------- */ /* * archive / estate / group / incidents / resident / room / sensor / user 等の * ページ最上位ラッパー用。dashboard と同じ要領で、ページ全体の最外ラッパー自体は * 完全に透明にして bg.png を見せ、個別の入力欄やカード（白背景を持つ要素）が * 浮き出るように見せる。 * * 以前の Tailwind の bg-[#ffffe0] (淡黄色) を置き換えるためのクラス。 * 背景・影・角丸は持たない。文字色・フォントだけ統一する。 */ .anview-page-card { background: transparent; color: var(--anview-color-text); font-family: var(--anview-font-family); } /* * 共通テーマ適用画面でのインプット/テキストエリア/セレクトの可読性向上 * bg.png の上に置かれる入力系コントロールは、白背景にして読みやすくする。 * すでに inline style や Tailwind の bg-* で個別指定されているケースは、 * そちらが優先されるので影響なし。 */ .anview-page-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .anview-page-card textarea, .anview-page-card select { background-color: #ffffff; } /* ---------- 10. レスポンシブ ---------- */ @media (max-width: 768px) { .anview-header { padding: 12px 16px; gap: 16px; } .anview-header__nav { display: none; /* 必要に応じてハンバーガーへ */ } .anview-page-title { font-size: 18px; } }