/** * AuctLect Platform - Navbar Styles (Pattern C) * * 全ページ共通の Navbar CSS。 * 各HTMLの で style-new.css の後に読み込む: * */ /* ========== Mobile Language Selector ========== */ .navbar-lang-selector { display: flex; align-items: center; margin-right: 0.5rem; } @media (max-width: 991.98px) { .navbar-lang-selector { order: 1; } .navbar-toggler { order: 2; } } /* ========== PC Navbar - 横並び維持 ========== */ @media (min-width: 992px) { .navbar-nav { flex-wrap: nowrap !important; flex-direction: row !important; } .navbar-nav .nav-item { white-space: nowrap !important; } .navbar-nav .nav-link { white-space: nowrap !important; padding: 0.5rem 0.6rem !important; font-size: 0.9rem; } .navbar-collapse .d-flex { flex-wrap: nowrap !important; } .dropdown-menu { white-space: nowrap; } .navbar-buttons-guest { display: flex !important; flex-wrap: nowrap !important; gap: 0.5rem; } .navbar-buttons-guest .btn { white-space: nowrap !important; flex-shrink: 0; } } /* ========== Auth Visibility Control ========== */ .auth-only { display: none !important; } .guest-only { display: block; } body.logged-in .auth-only { display: block !important; } body.logged-in .auth-only.nav-item { display: list-item !important; } body.logged-in .auth-only.dropdown { display: block !important; } body.logged-in .guest-only { display: none !important; } @media (min-width: 992px) { body.logged-in .navbar-buttons-guest { display: none !important; } } /* ========== User Dropdown Menu ========== */ .user-dropdown { position: relative; } .user-dropdown-toggle { display: flex; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid var(--color-border); border-radius: 25px; padding: 0.4rem 0.75rem; cursor: pointer; color: var(--color-text); transition: all 0.2s; } .user-dropdown-toggle:hover { border-color: var(--color-accent); background: rgba(139, 115, 85, 0.05); } .user-dropdown-toggle i:first-child { font-size: 1.25rem; color: var(--color-accent); } .user-name { font-weight: 500; font-size: 0.9rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chevron { font-size: 0.7rem; color: var(--color-text-secondary); transition: transform 0.2s; } .user-dropdown.open .user-chevron { transform: rotate(180deg); } .user-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 240px; z-index: 1001; display: none; overflow: hidden; } .user-menu.show { display: block; } .user-menu-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--color-bg-main); } .user-avatar { font-size: 2.5rem; color: var(--color-accent); } .user-info { flex: 1; min-width: 0; } .user-display-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-email { font-size: 0.8rem; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-divider { height: 1px; background: var(--color-border); } .user-menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--color-text); text-decoration: none; font-size: 0.9rem; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; } .user-menu-item:hover { background: var(--color-bg-hover); color: var(--color-accent); } .user-menu-item i { width: 20px; text-align: center; color: var(--color-text-secondary); } .user-menu-item:hover i { color: var(--color-accent); } .logout-btn { color: var(--color-error); } .logout-btn i { color: var(--color-error); } .logout-btn:hover { background: rgba(199, 93, 93, 0.1); color: var(--color-error); } /* ========== Message Unread Badge ========== */ .msg-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-error, #C75D5D); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; margin-left: 6px; line-height: 1; vertical-align: middle; } /* ========== Navbar Overlay ========== */ .navbar-overlay { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; } .navbar-overlay.show { display: block; } /* ========== Mobile Adjustments ========== */ @media (max-width: 991.98px) { .user-dropdown { order: 3; margin-left: 0.5rem; } .user-dropdown-toggle { padding: 0.3rem; border-radius: 50%; width: 38px; height: 38px; justify-content: center; } .user-menu { position: fixed; top: 56px; right: 10px; left: auto; min-width: 260px; max-width: calc(100vw - 20px); z-index: 9999; } .navbar-collapse { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .navbar-collapse.show, .navbar-collapse.collapsing { position: fixed; top: 56px; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 1045; padding: 0.5rem 1rem; } .navbar-custom { z-index: 1050 !important; background: #FFFFFF !important; } /* Vertical layout for collapse submenus (Tools etc.) */ .navbar-collapse .collapse:not(.show) { display: none; } .navbar-collapse .collapse.show { display: flex; flex-direction: column; } .navbar-collapse .collapse .nav-link { padding: 0.5rem 1rem !important; border-radius: 0.5rem; } }