child so it dodges the settings-card button override. */ .moo-chat-media__item--failed::after { content: '\f021'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-accent); background: rgba(6, 13, 16, 0.5); z-index: 2; } .moo-chat-media__item--missing { opacity: 0.5; } .moo-chat-media__item--missing::after { content: '\f127'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--color-text-primary); background: rgba(6, 13, 16, 0.45); z-index: 2; } .moo-chat-media__item--file { aspect-ratio: 1; } .moo-chat-media__file-cover { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(14, 22, 28, 0.90); } .moo-chat-media__file-cover i { font-size: 28px; color: var(--color-accent); opacity: 0.5; } .moo-chat-media__file-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.3); } .moo-chat-media__grid:not(:empty) + .moo-chat-media__show-all { margin-top: 12px; } .moo-chat-media__show-all { width: 100%; padding: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--color-text-primary); font-size: 13px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-chat-media__show-all:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-chat-media__show-all:active { transform: scale(0.98); background: rgba(0, 229, 160, 0.08); } /* ===== GROUP INVITE CARDS (chats page) ===== */ .moo-gi-card { display: flex; align-items: center; gap: 12px; background: rgba(0, 229, 160, 0.06); border: 1px solid rgba(0, 229, 160, 0.12); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; transition: opacity 0.2s; } .moo-gi-card:last-child { margin-bottom: 0; } .moo-gi-card__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 229, 160, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent); font-size: 16px; } .moo-gi-card__info { flex: 1; min-width: 0; } .moo-gi-card__title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-gi-card__sub { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; } .moo-gi-card__actions { display: flex; gap: 8px; flex-shrink: 0; } .moo-gi-card__accept { width: 40px; height: 40px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-gi-card__accept:active { transform: scale(0.9); } .moo-gi-card__decline { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(18, 26, 32, 0.92); color: rgba(255, 255, 255, 0.5); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-gi-card__decline:active { transform: scale(0.9); background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.2); color: var(--color-danger); } /* ===== RECOVERY-KEY BACKFILL NUDGE (chats page) ===== One-time security prompt shown only to accounts whose recovery key can't yet unlock their encrypted data. Shares the glass-card language of the invite cards; the labeled primary action marks it as an account-security task rather than a routine notification. Mint is the light source — no glow/halo. */ .moo-rk-nudge { position: relative; display: flex; align-items: flex-start; gap: 13px; background: rgba(0, 229, 160, 0.06); border: 1px solid rgba(0, 229, 160, 0.16); border-radius: 16px; padding: 16px; margin-bottom: 16px; } .moo-rk-nudge__icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 229, 160, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent); font-size: 18px; } .moo-rk-nudge__body { flex: 1; min-width: 0; padding-right: 22px; /* clear the dismiss control */ } .moo-rk-nudge__title { font-size: 14.5px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; } .moo-rk-nudge__text { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin-top: 4px; } .moo-rk-nudge__cta { display: inline-flex; align-items: center; margin-top: 13px; padding: 10px 16px; border-radius: 11px; border: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease, filter 0.18s ease; } .moo-rk-nudge__cta:hover { filter: brightness(1.06); } .moo-rk-nudge__cta:active { transform: scale(0.97); } .moo-rk-nudge__dismiss { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent; color: rgba(255, 255, 255, 0.4); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, color 0.18s ease; } .moo-rk-nudge__dismiss:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text-primary); } /* Group invite modal */ #gi_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 100000; /* above the F14 /info slide-over panel (10000) */ animation: mooOverlayIn 0.2s ease-out; } #gi_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 100001; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Clickable pinned items */ .moo-pinned-item__content { cursor: pointer; transition: opacity 0.2s; } .moo-pinned-item__content:active { opacity: 0.7; } #delete_chat_button { width:100%; } .chat_participants { margin-top:20px; } .klipy_indv { width: 100%; aspect-ratio: 16 / 9; } .klipy_indv img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; } /* KLIPY attribution watermark — subtle dark-glass chip on the sent GIF message card. Mint as atmosphere (the light source), not paint. Anchored to the position:relative .moo-media-grid__item card. */ .klipy_wm { position: absolute; right: 8px; bottom: 8px; z-index: 2; pointer-events: none; padding: 4px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: rgba(255, 255, 255, 0.82); background: rgba(6, 13, 16, 0.55); border: 1px solid rgba(0, 229, 160, 0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .gifs_loading { position:absolute; top:68px; left:0px; opacity: 0; transition: opacity 250ms ease; display:none; text-align: center; vertical-align:middle; justify-content: center; align-items: center; width:100%; height:calc(100% - 68px); background-color: var(--color-bg-elevated); z-index:9; font-size:24px; font-weight:bold; color:var(--color-white); } #klipy_results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; height: calc(100% - 108px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; position: relative; margin-top: 20px; border-radius: 12px; padding: 0; box-sizing: border-box; } #klipy_search { width:calc(100% - 35px); min-height: 20px; line-height: 20px; background-color: var(--color-white); color: var(--color-black); margin: 0px; padding: 5px; padding-left:30px; font-size: 14px; height: 20px; border: 0px; border-radius: 12px; } #klipy_popup { overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:80%; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; z-index:9999; } #klipy_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } .klipy_title { margin-bottom:20px; font-weight:bold; height:38px; font-size:20px; text-align:center; line-height:1.2; } .klipy_title_sub { width:100%; font-weight: normal; font-size:12px; text-align: center; } .GIF_IMG { width:auto !important; height:auto !important; min-width: 200px; max-width: 50vw; border-radius: 12px; overflow:hidden; display:flex; } .klipy_search_cont { position:relative; } .klipy_search_icon { position:absolute; top:0px; left:0px; display:flex; align-items: center; justify-content: center; text-align: center; line-height:1; width:30px; height:30px; color:var(--color-black); } .push_button button { width:100%; margin-top:10px; } .push_button { display:flex; justify-content: center; align-items: center; gap:10px; } .unread_badge { position:absolute; top:-5px; right:-5px; background-color: var(--color-badge); color:var(--color-white); border-radius: 50%; width:20px; height:20px; overflow:hidden; font-weight:bold; font-size:12px; display:none; justify-content: center; text-align: center; align-items: center; } .input_time { background-color: var(--color-white); height:23px; text-align: left; } #pn_asked_wrap { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(6, 13, 16, 0.6); display: block; z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #pn_asked_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 32px; width: min(320px, 80%); height: auto; background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; color: var(--color-text-primary); display: block; text-align: center; z-index: 9999; animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .moo-pn-asked-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 22px; color: var(--color-accent); } #pn_asked_popup .pn_popup_title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; margin-bottom: 8px; } #pn_asked_popup .pn_popup_message { font-size: 14px; color: rgba(255, 255, 255, 0.45); line-height: 1.6; margin-bottom: 24px; } #pn_asked_popup .mop_buttons_cont { display: flex; gap: 10px; } #pn_asked_popup .pn_button_no { flex: 1; margin-left: 0; padding: 14px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 14px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; width: auto; } #pn_asked_popup .pn_button_no:hover { background: rgba(28, 36, 44, 0.92); } #pn_asked_popup .mop_button_yes { flex: 1; padding: 14px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 14px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; width: auto; display: flex; align-items: center; justify-content: center; gap: 8px; } #pn_asked_popup .mop_button_yes:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25); } /* ===== Push-notification recovery banner ===== * Surfaces the localStorage 'vocyl_pn_recovery_needed' flag set by * pwa_pn.js when the subscription dies silently. NON-modal (a banner, * not an interrupt) since the recovery state is "you should fix this" * not "you must fix this immediately". Amber-warning aurora glass to * differentiate from the accent-green primary actions — same visual * vocabulary as #pn_asked_popup (icon chip + title + button) but a * banner geometry that doesn't block the viewport. * * Hidden by default; JS toggles display:flex when the flag is set or * the 'vocyl-pn-needs-attention' custom event fires. */ #pn_recovery_banner { position: fixed; top: 0; left: 0; right: 0; z-index: 990; margin: env(safe-area-inset-top) auto 0; padding: 12px 14px; max-width: 540px; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(36, 28, 12, 0.96), rgba(20, 30, 38, 0.96)); border-bottom: 1px solid rgba(251, 191, 36, 0.28); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.85); animation: mooPnBannerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; } @media (min-width: 600px) { #pn_recovery_banner { margin-top: calc(env(safe-area-inset-top) + 12px); border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 14px; } } @keyframes mooPnBannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .moo-pn-banner__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.3); display: flex; align-items: center; justify-content: center; color: #fbbf24; font-size: 14px; flex-shrink: 0; } .moo-pn-banner__body { flex: 1; min-width: 0; } .moo-pn-banner__title { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: -0.1px; } .moo-pn-banner__msg { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); line-height: 1.4; margin-top: 1px; } .moo-pn-banner__action { flex-shrink: 0; padding: 8px 14px; background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 9px; color: #fbbf24; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: background-color 0.15s, border-color 0.15s, opacity 0.15s; } .moo-pn-banner__action:hover { background: rgba(251, 191, 36, 0.24); border-color: rgba(251, 191, 36, 0.55); } .moo-pn-banner__action:disabled { opacity: 0.5; cursor: not-allowed; } .moo-pn-banner__close { flex-shrink: 0; width: 28px; height: 28px; background: transparent; border: 0; border-radius: 8px; color: rgba(255, 255, 255, 0.4); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .moo-pn-banner__close:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); } #chats_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #chats_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:60%; height:auto; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .co_contact_form { display:flex; justify-content: center; text-align: center; align-items: center; gap:40px; } .contact_mn_display { font-size:16px; font-weight:normal; } .contact_last_online { font-size:14px; font-weight:normal; margin-top:10px; } .contact_timezone { font-size:14px; font-weight:normal; } .my_top_display { font-size:12px; font-weight:normal; } .loading_bar { position: fixed; top: 0px; left: 0px; width: calc(100% - 40px); height: 24px; color: var(--color-text-primary); background: var(--color-bg); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0px; padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0)); overflow: hidden; display: none; justify-content: flex-start; align-items: center; text-align: left; z-index: 999999; } .lb_left { font-size: 20px; color: var(--color-accent); display: flex; justify-content: center; align-items: center; text-align: center; } .lb_right { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; text-align: left; margin-left: 14px; } .lbr_line1 { font-weight: 700; font-size: 15px; color: var(--color-text-primary); display: flex; justify-content: flex-start; align-items: center; text-align: left; line-height: 1; } .lbr_line2 { font-size: 12px; color: rgba(255, 255, 255, 0.4); display: flex; justify-content: flex-start; align-items: center; text-align: left; line-height: 1; margin-top: 2px; } #br_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #br_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; max-width:300px; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-white); border: 1px solid rgba(255, 255, 255, 0.08); color:var(--color-black); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .br_popup_title { font-size:18px; text-align:center; font-weight:bold; margin-bottom:20px; } .br_form { display:flex; flex-direction: column; gap:10px; width:100%; } .br_submit_button { font-size: 17px; font-weight: bold; padding: 15px; text-align: center; height: auto; margin: 0px; border: 0px; border-radius: 12px; background-color: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); width: 100%; } .br_selectbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 17px; margin: 0px; padding: 15px; width:100%; margin-right: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--color-white); color:var(--color-black); } .br_textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 17px; margin: 0px; padding: 15px; width:calc(100% - 32px); height:140px; margin-right: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color:var(--color-black); overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; resize:none; } .br_textarea::placeholder { font-weight: normal; opacity: 1; color: var(--color-black); } #ms_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #ms_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-bg-elevated); border:0px; color:var(--color-text-primary); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .ms_popup_title { font-size:18px; text-align:center; font-weight:bold; margin-bottom:20px; } .messages_encrypted { height:auto; width:fit-content; text-align:center; padding:10px; font-size:14px; font-weight:normal; clear:both; margin-bottom:20px; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:10px; margin-left:auto; margin-right:auto; } .input_select { font-size: 18px; margin: 0px; padding: 5px; width: calc(100% - 12px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .loading_more_chat { position:absolute; top:20px; left:20px; width:calc(100% - 80px); height:auto; padding: 20px; font-size: 20px; font-weight: bold; background-color: var(--color-bg-elevated); color: var(--color-text-primary); border-radius: 12px; opacity: 0; transition: opacity 200ms ease; display:none; justify-content: center; align-items: center; text-align: center; } .lmc_text { margin-left:10px; } .table_cont { border:1px solid rgba(255, 255, 255, 0.1); border-radius:14px; display:flex; flex-direction: column; overflow:hidden; } .table_header { background-color: var(--color-bg-elevated); padding:20px; color:var(--color-white); font-weight:bold; font-size:20px; } .table_content { display:flex; flex-direction: column; overflow:hidden; } .table_headers { font-weight:bold; font-size:18px; border-bottom:1px solid rgba(255, 255, 255, 0.1); } .table_row { font-size:16px; display:flex; justify-content: space-between; align-items: center; overflow:hidden; } .table_column { display:flex; padding:20px; overflow-x:scroll; overscroll-behavior-x: none; white-space: nowrap; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .tc_splitbutton { justify-content: space-between; align-items: center; gap:20px; } .table_buttons { display:flex; align-items: center; gap:10px; justify-content: flex-start; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .table_buttons button { color: var(--color-text-primary); font-size:16px; width:28px; height:28px; border-radius: 10px; background-color: var(--color-bg-elevated); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .fa_eye_slash_button { font-size:13px !important; } .table_content_hidden { display:none; } .table_open_content_button { border-radius:10px; cursor: pointer; font-size:14px; font-weight:bold; padding:0px 10px; height:28px; background-color: var(--color-accent); color:var(--color-bg); touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; display:flex; text-align: center; align-items: center; justify-content: center; } .table_row_content:nth-child(odd) { background-color: var(--color-row-alt); } .sv_trc1 { width:50%; } .sv_trc2 { width:50%; } .tc_margintop { margin-top:20px; } .table_norows { padding:20px; } .report_trc1 { width:20%; } .report_trc2 { width:30%; } .report_trc3 { width:50%; } .content_dialog_text { display:flex; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; } #content_dialog_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #cd_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-white); border: 1px solid rgba(255, 255, 255, 0.08); color:var(--color-black); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .chats_list_none { display:none; } .hli_cont { display:flex; justify-content: center; align-items: center; text-align: center; } .hive_logo_img { width:70%; max-width:300px; } .settings_item_last { margin-bottom:0px; } /* ===================================================================== ALARM TOOL — Mission-control visual system. State-as-color is the primary semantic. Hero state is the centerpiece. Quiet most of the time; loud on trigger. Scoped under so it never bleeds. ===================================================================== */ :root { /* Semantic state hues — solid colours used for borders, text, glows. */ --alarm-c-disarmed: hsl(158, 64%, 50%); --alarm-c-arming: hsl(40, 92%, 58%); --alarm-c-armed-away: hsl(355, 82%, 60%); --alarm-c-armed-home: hsl(22, 90%, 58%); --alarm-c-pending: hsl(354, 88%, 62%); --alarm-c-triggered: hsl(0, 95%, 62%); /* Glass surface scale */ --alarm-glass-1: rgba(255,255,255,0.035); --alarm-glass-2: rgba(255,255,255,0.062); --alarm-glass-3: rgba(255,255,255,0.095); --alarm-border: rgba(255,255,255,0.07); --alarm-border-strong: rgba(255,255,255,0.14); /* Text scale */ --alarm-text-primary: rgba(255,255,255,0.95); --alarm-text-secondary: rgba(255,255,255,0.62); --alarm-text-muted: rgba(255,255,255,0.40); /* Shadows */ --alarm-shadow-card: 0 4px 24px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset; /* Online-dot scale */ --alarm-c-online: hsl(150, 70%, 50%); --alarm-c-online-warn: hsl(40, 90%, 55%); --alarm-c-offline: hsl(0, 70%, 55%); /* Battery */ --alarm-c-battery-ok: hsl(150, 60%, 50%); --alarm-c-battery-low: hsl(40, 90%, 55%); --alarm-c-battery-crit: hsl(0, 80%, 58%); } /* ===== Page wrapper ===== No custom wrapper rules — inherit fully from .chats_cont + .moo-tools so sizing matches every other Vello tool. Content elements have their own spacing/gaps; the wrapper stays vanilla block-layout. */ /* ===== Generic buttons ===== */ .moo-alarm__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(24, 32, 40, 0.92); color: var(--alarm-text-primary); font: 600 13px/1 'Montserrat', sans-serif; letter-spacing: 0.02em; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 80ms ease; white-space: nowrap; text-decoration: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; font-family: inherit; } .moo-alarm__btn:hover { background: var(--alarm-glass-3); } .moo-alarm__btn:active { transform: translateY(1px); } .moo-alarm__btn[disabled] { opacity: 0.42; cursor: not-allowed; pointer-events: none; } .moo-alarm__btn--primary { background: color-mix(in srgb, var(--alarm-c-disarmed) 18%, var(--alarm-glass-2)); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 50%, transparent); color: var(--alarm-c-disarmed); } .moo-alarm__btn--primary:hover { background: color-mix(in srgb, var(--alarm-c-disarmed) 26%, var(--alarm-glass-2)); } .moo-alarm__btn--danger { background: color-mix(in srgb, var(--alarm-c-triggered) 18%, var(--alarm-glass-2)); border-color: color-mix(in srgb, var(--alarm-c-triggered) 55%, transparent); color: var(--alarm-c-triggered); } .moo-alarm__btn--danger:hover { background: color-mix(in srgb, var(--alarm-c-triggered) 26%, var(--alarm-glass-2)); } .moo-alarm__btn--ghost { background: transparent; border-color: var(--alarm-border); color: var(--alarm-text-secondary); } .moo-alarm__btn--block { width: 100%; } .moo-alarm__btn--sm { padding: 8px 12px; font-size: 12px; border-radius: 10px; gap: 6px; } /* Utility layout helpers for alarm — replaces scattered inline `style=""` */ .moo-alarm__check-row { display: flex; gap: 14px; flex-wrap: wrap; } .moo-alarm__pin-actions { display: flex; gap: 6px; flex-shrink: 0; } .moo-alarm__placeholder--ghost { background: transparent; border: 0; padding: 32px 16px; } .moo-alarm__heading--gap { margin-top: 18px; } /* Wraps {label, control, optional hint} as one tight unit. Inside an expand-inner the parent's child-spacing rule treats the whole block as a single child, so the internals stay close together (label margin-bottom 8 to control, optional 6px hint below) instead of inheriting a 14px sibling gap that would visually break the label from its control. */ .moo-alarm__field-block { display: block; } /* Helper hint sitting tight below a control (input / readonly-field). 6px is the "tight pair" distance — close enough to read as belonging to the control above, far enough to register as secondary text. Replaces scattered inline `style="margin-top: 6px"` on .moo-alarm__field-row-desc. */ .moo-alarm__field-row-desc--hint { margin-top: 6px; } .moo-alarm__btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* Active header-nav button — green accent matching .moo-tools__item-icon highlight. ALM-061(b): route the brand accent through the --color-accent :root token (#00e5a0 == rgb(0,229,160)) instead of hardcoding the literal, so a brand retune in :root stays in sync with the rest of the accent-coloured UI. */ body:has(.moo-tools) .hb_button_multi.is-active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-accent); } /* ===== Form controls ===== */ .moo-alarm__input { width: 100%; padding: 12px 16px; border-radius: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--alarm-text-primary); font: 500 15px/1.3 'Montserrat', sans-serif; transition: border-color 160ms ease, background-color 160ms ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; } .moo-alarm__input:focus { outline: none; border-color: rgba(255, 255, 255, 0.16); background: rgba(24, 32, 40, 0.92); } .moo-alarm__input::placeholder { color: var(--alarm-text-muted); } .moo-alarm__input option { background: #0e161c; color: var(--alarm-text-primary); } select.moo-alarm__input { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba%28255%2C 255%2C 255%2C 0.62%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; cursor: pointer; -moz-appearance: none; } select.moo-alarm__input::-ms-expand { display: none; } .moo-alarm__check input:focus-visible + .moo-alarm__check-box { outline: 2px solid var(--alarm-c-disarmed); outline-offset: 2px; } /* ALM-061(a): scope the alarm-green focus ring to alarm toggles only. `.moo-toggle`/`.moo-toggle__track` is a SHARED component (Bills, Cloud Drive, Settings, Chat — Bills & CD even share the .moo-tools wrapper), so this rule was unscoped and leaked --alarm-c-disarmed onto every toggle in the app. `.moo-alarm__field-row-control` is the alarm-only ancestor of every alarm toggle (devices.php / users.php) and never appears outside the alarm subsystem. */ .moo-alarm__field-row-control .moo-toggle input:focus-visible + .moo-toggle__track { outline: 2px solid var(--alarm-c-disarmed); outline-offset: 2px; } /* Direct-child spacing inside expand-inner. Block layout (set below) makes spacing margin-driven — keeps a wrapper (form, .moo-alarm__field-block) tight inside while putting consistent breathing room between siblings. The `--gap` modifier on a heading promotes it to a section break (24px). */ .moo-alarm__list-card-expand-inner > * + * { margin-top: 14px; } .moo-alarm__list-card-expand-inner > .moo-alarm__heading--gap, .moo-alarm__list-card-expand-inner > .moo-alarm__form--gap-top { margin-top: 24px; } /* Label baseline for alarm forms. Existing Vocyl `.cn_input_title` is only styled inside `.moo-form-card`; alarm forms aren't wrapped in that. Apply the same look + consistent stacking margins. Scoped with body:has() NOT a `.moo-tools` descendant: the modals are relocated to (outside `.moo-tools`) on load, so a descendant selector would leave their labels unstyled — the bug behind "modal font sizes are wrong". */ body:has(.moo-tools) .cn_input_title { display: block; color: rgba(255, 255, 255, 0.40); font: 700 11px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 8px; } .moo-tools .cn_input_title:first-child, .moo-tools form .cn_input_title:first-child, .moo-tools .moo-alarm__list-card-expand .cn_input_title:first-of-type, body:has(.moo-tools) .moo-alarm__modal .cn_input_title:first-of-type { margin-top: 0; } /* ALM-061(d): `.moo-tools .cn_subtext` (a generic, tool-wide helper rule) was relocated OUT of this alarm block to the shared tools section (search ".moo-tools .moo-form-card .cn_subtext") so a future "delete the alarm CSS" refactor can't accidentally drop a style every tool relies on. */ /* Inline helper hint inside an uppercase label (e.g. the parentheticals in the Add Camera form): reset the inherited bold UPPERCASE tracking so it reads as soft, normal-case text rather than shouting at label size. */ body:has(.moo-tools) .cn_input_title .moo-alarm__muted { text-transform: none; letter-spacing: 0; font-weight: 500; } /* Form-level layout: alarm forms inside list-card-expand / section / modal use BLOCK layout (default). Children manage their own margins so each label / input / row gets identical top spacing. */ .moo-tools .moo-alarm__list-card-expand form { display: block; } /* Modal forms are the flex column that fills the modal: a scrollable .moo-alarm__modal-body sits above a pinned .moo-alarm__modal-actions footer. */ body:has(.moo-tools) .moo-alarm__modal form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Field-row toggles inside a form get generous breathing above (matches label margin-top). They are standalone control groups, not paired to a preceding label. */ .moo-tools .moo-alarm__list-card-expand form .moo-alarm__field-row, body:has(.moo-tools) .moo-alarm__modal form .moo-alarm__field-row { margin-top: 20px; } /* Check-rows are paired to the cn_input_title directly above them — they are the "input" for that label. Sit them close (only the label's own margin-bottom applies). */ .moo-tools .moo-alarm__list-card-expand form .moo-alarm__check-row, body:has(.moo-tools) .moo-alarm__modal form .moo-alarm__check-row { margin-top: 0; } /* Submit row sits below the last form group with generous breathing room. (Modal footers are pinned via padding in the modal block below, not margin.) */ .moo-tools .moo-alarm__list-card-expand form > button[type="submit"], .moo-tools .moo-alarm__list-card-expand form > .moo-alarm__btn-row { margin-top: 24px; } /* Toggle: use existing .moo-toggle / .moo-toggle__track from bills (pure CSS). */ /* Checkbox (square) */ .moo-alarm__check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .moo-alarm__check input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .moo-alarm__check-box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--alarm-border-strong); background: var(--alarm-glass-1); display: inline-flex; align-items: center; justify-content: center; transition: background-color 160ms ease, border-color 160ms ease; flex-shrink: 0; } .moo-alarm__check-box::after { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--alarm-c-disarmed); transform: scale(0); transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1); } .moo-alarm__check input:checked + .moo-alarm__check-box { border-color: color-mix(in srgb, var(--alarm-c-disarmed) 55%, transparent); background: color-mix(in srgb, var(--alarm-c-disarmed) 14%, var(--alarm-glass-2)); } .moo-alarm__check input:checked + .moo-alarm__check-box::after { transform: scale(1); } .moo-alarm__check-label { font: 500 14px/1.3 'Montserrat', sans-serif; color: var(--alarm-text-primary); } /* ===== Section card (used in Settings, etc) ===== */ .moo-alarm__section { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 20px; } .moo-alarm__section-title { font: 700 11px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); display: flex; align-items: center; gap: 8px; margin: 0; } .moo-alarm__section-title > i { font-size: 11px; } .moo-alarm__section + .moo-alarm__section { margin-top: 16px; } .moo-alarm__field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; } /* Subtle divider between adjacent field-rows inside a section. The .moo-alarm__section parent supplies a 20px flex gap; we add 20px padding ABOVE the border so the line has matching breathing room top and bottom. */ .moo-alarm__section .moo-alarm__field-row + .moo-alarm__field-row { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 20px; } .moo-alarm__field-row-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .moo-alarm__field-row-info .moo-alarm__field-row-desc { margin-top: 0; } .moo-alarm__field-row-title { font: 700 14px/1.25 'Montserrat', sans-serif; color: var(--alarm-text-primary); } .moo-alarm__field-row-desc { font: 500 12px/1.4 'Montserrat', sans-serif; color: rgba(255, 255, 255, 0.55); } .moo-alarm__field-row-control { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; } /* ===== Dashboard: Hero card ===== */ .moo-alarm__hero { position: relative; border-radius: 18px; padding: 26px 22px 22px; margin-bottom: 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 10px; height: auto; overflow: hidden; isolation: isolate; box-shadow: var(--alarm-shadow-card); transition: border-color 280ms ease, background-color 280ms ease; } .moo-alarm__hero::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 20% 20%, var(--_alarm-hero-glow, transparent), transparent 60%); opacity: 0.55; z-index: -1; transition: background 280ms ease, opacity 280ms ease; pointer-events: none; } /* Hero type hierarchy — PRIMARY (state) > SECONDARY (countdown) > SUPPORTING (detail) > CAPTION (meta). The state label IS the headline; the countdown sits beneath as urgent-but-secondary numeric data. */ .moo-alarm__hero-state { font: 700 46px/1.02 'Montserrat', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--_alarm-hero-fg, var(--alarm-text-primary)); transition: color 280ms ease; word-break: break-word; /* Two-layer dark drop shadow — the close 1/2px layer crisps the edge against the hero's radial-gradient backdrop, the wider 3/12px layer adds soft depth below. Was a colored glow (matched the state's fg color at 22%/28px blur) which read as harsh "lit up from inside"; dark shadow drops the text into the panel instead. Uses plain black rather than `var(--color-bg)` so the shadow is the same on every state without picking up the panel's bg tint. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 3px 12px rgba(0, 0, 0, 0.35); } .moo-alarm__hero-meta { font: 600 11px/1.4 'Montserrat', sans-serif; letter-spacing: 0.10em; text-transform: uppercase; /* Override `--alarm-text-muted` (0.4 alpha) for this one element — the hero's "since 14:32" meta line was disappearing into the panel against the new dark text-shadow on the state above it. 0.8 reads as clearly legible supporting copy without overpowering the headline. */ color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; } .moo-alarm__hero-countdown { font: 800 38px/1 'Montserrat', sans-serif; color: var(--_alarm-hero-fg, var(--alarm-text-primary)); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; margin-top: 2px; } .moo-alarm__hero-detail { font: 500 15px/1.45 'Montserrat', sans-serif; color: var(--alarm-text-primary); letter-spacing: 0.005em; } /* Hero body wrapper — purely a JS-patch handle. display:contents keeps the meta/detail/countdown direct-child flex behaviour of the hero. */ [data-alarm-hero-body] { display: contents; } /* Hero state palette swaps */ .moo-alarm__hero--disarmed { --_alarm-hero-fg: var(--alarm-c-disarmed); --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-disarmed) 35%, transparent); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 24%, transparent); } .moo-alarm__hero--arming_away, .moo-alarm__hero--arming_home { --_alarm-hero-fg: var(--alarm-c-arming); --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-arming) 35%, transparent); border-color: color-mix(in srgb, var(--alarm-c-arming) 30%, transparent); animation: alarmPulseSoft 1.6s ease-in-out infinite; } .moo-alarm__hero--armed_away { --_alarm-hero-fg: var(--alarm-c-armed-away); --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-armed-away) 38%, transparent); border-color: color-mix(in srgb, var(--alarm-c-armed-away) 30%, transparent); } .moo-alarm__hero--armed_home { --_alarm-hero-fg: var(--alarm-c-armed-home); --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-armed-home) 38%, transparent); border-color: color-mix(in srgb, var(--alarm-c-armed-home) 30%, transparent); } .moo-alarm__hero--pending { --_alarm-hero-fg: var(--alarm-c-pending); --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-pending) 45%, transparent); border-color: color-mix(in srgb, var(--alarm-c-pending) 50%, transparent); animation: alarmPulseSoft 1.0s ease-in-out infinite; } .moo-alarm__hero--triggered { --_alarm-hero-fg: #fff; --_alarm-hero-glow: color-mix(in srgb, var(--alarm-c-triggered) 55%, transparent); background: color-mix(in srgb, var(--alarm-c-triggered) 22%, var(--alarm-glass-2)); border-color: var(--alarm-c-triggered); animation: alarmFlash 0.55s steps(2) infinite; box-shadow: 0 0 0 2px color-mix(in srgb, var(--alarm-c-triggered) 65%, transparent), 0 16px 48px color-mix(in srgb, var(--alarm-c-triggered) 35%, transparent), 0 1px 0 rgba(255,255,255,0.06) inset; } /* ===== Dashboard: section titles ===== */ /* ===== Arm/disarm command buttons — embedded in the hero card. margin-top mirrors the hero's outer padding so the gap above the buttons equals the padding on every other side (6px hero gap + 16px margin = 22px). */ .moo-alarm__commands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; margin-bottom: 0; } .moo-alarm__cmd-status { display: flex; justify-content: center; margin-top: 16px; padding-top: 2px; } .moo-alarm__cmd-status[hidden] { display: none; } .moo-alarm__cmd-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.03); color: var(--alarm-text-secondary); font: 600 11px/1.3 'Montserrat', sans-serif; letter-spacing: 0.02em; } .moo-alarm__cmd-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--color-accent); } .moo-alarm__cmd-status-pill--pending .moo-alarm__cmd-status-dot { background: var(--color-accent); animation: moo-alarm-cmd-pulse 1.2s ease-in-out infinite; } /* "Command didn't apply" — use the alarm-scoped triggered token (red) since the command genuinely failed; the global --color-warning is hue-adjacent to the arming/armed_home hero glow and washed out against those states. */ .moo-alarm__cmd-status-pill--failed { color: var(--alarm-text-primary); } .moo-alarm__cmd-status-pill--failed .moo-alarm__cmd-status-dot { background: var(--alarm-c-triggered); } @keyframes moo-alarm-cmd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } @media (prefers-reduced-motion: reduce) { .moo-alarm__cmd-status-pill--pending .moo-alarm__cmd-status-dot { animation: none; } } /* ===== Dashboard: Agent-silent banner ===== Sits above the hero card when the Pi agent hasn't been heard from recently (alarm_agent_last_sync stale). Two severities: --warn (2-10min, transient, yellow) and --off (>10min or never-seen, real outage, red). Hidden when agent is in 'ok' state. Glass-morphism strip with a left-edge severity stripe + radial glow matching the hero's aesthetic. Severity → banner mapping mirrors alarm_get_base_station_status's online_cls ('warn' = warn banner, 'off' = off banner). The patcher in dashboard.php toggles the modifier class + the `hidden` attribute. */ .moo-alarm__agent-banner { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 18px; margin-bottom: 14px; border-radius: 14px; background: rgba(14, 22, 28, 0.92); border: 1px solid var(--alarm-border); border-left-width: 3px; border-left-color: var(--_alarm-agent-accent, var(--alarm-border-strong)); box-shadow: var(--alarm-shadow-card); overflow: hidden; isolation: isolate; transition: border-color 240ms ease, background-color 240ms ease; } .moo-alarm__agent-banner[hidden] { display: none; } .moo-alarm__agent-banner::before { content: ''; position: absolute; inset: -60% -40% -60% -40%; background: radial-gradient(circle at 0% 50%, var(--_alarm-agent-glow, transparent), transparent 55%); opacity: 0.5; z-index: -1; pointer-events: none; transition: background 240ms ease, opacity 240ms ease; } .moo-alarm__agent-banner--warn { --_alarm-agent-accent: var(--alarm-c-online-warn); --_alarm-agent-glow: color-mix(in srgb, var(--alarm-c-online-warn) 40%, transparent); } .moo-alarm__agent-banner--off { --_alarm-agent-accent: var(--alarm-c-offline); --_alarm-agent-glow: color-mix(in srgb, var(--alarm-c-offline) 55%, transparent); animation: moo-alarm-agent-banner-ring 2.4s ease-in-out infinite; } @keyframes moo-alarm-agent-banner-ring { 0%, 100% { box-shadow: var(--alarm-shadow-card), 0 0 0 0 color-mix(in srgb, var(--alarm-c-offline) 35%, transparent); } 50% { box-shadow: var(--alarm-shadow-card), 0 0 0 4px color-mix(in srgb, var(--alarm-c-offline) 10%, transparent); } } .moo-alarm__agent-banner-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--_alarm-agent-accent) 14%, transparent); color: var(--_alarm-agent-accent); font-size: 16px; } .moo-alarm__agent-banner-icon-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--_alarm-agent-accent); box-shadow: 0 0 0 2px rgba(14, 22, 28, 0.92); animation: moo-alarm-agent-icon-pulse 1.4s ease-in-out infinite; } @keyframes moo-alarm-agent-icon-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } .moo-alarm__agent-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .moo-alarm__agent-banner-label { font: 700 11px/1.4 'Montserrat', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--_alarm-agent-accent); } .moo-alarm__agent-banner-text { font: 500 14px/1.4 'Montserrat', sans-serif; color: var(--alarm-text-primary); letter-spacing: 0.002em; } @media (prefers-reduced-motion: reduce) { .moo-alarm__agent-banner--off { animation: none; } .moo-alarm__agent-banner-icon-dot { animation: none; } } .moo-alarm__cmd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; min-height: 78px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.25); color: var(--alarm-text-secondary); font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; font-family: inherit; } .moo-alarm__cmd > i { font-size: 18px; } .moo-alarm__cmd:hover { background: rgba(0, 0, 0, 0.4); color: var(--alarm-text-primary); } .moo-alarm__cmd:active { transform: translateY(1px); } .moo-alarm__cmd--away.is-active { background: color-mix(in srgb, var(--alarm-c-armed-away) 22%, var(--alarm-glass-2)); border-color: color-mix(in srgb, var(--alarm-c-armed-away) 55%, transparent); color: var(--alarm-c-armed-away); } .moo-alarm__cmd--away:hover { color: var(--alarm-c-armed-away); border-color: color-mix(in srgb, var(--alarm-c-armed-away) 35%, transparent); } .moo-alarm__cmd--home.is-active { background: color-mix(in srgb, var(--alarm-c-armed-home) 22%, var(--alarm-glass-2)); border-color: color-mix(in srgb, var(--alarm-c-armed-home) 55%, transparent); color: var(--alarm-c-armed-home); } .moo-alarm__cmd--home:hover { color: var(--alarm-c-armed-home); border-color: color-mix(in srgb, var(--alarm-c-armed-home) 35%, transparent); } .moo-alarm__cmd--off.is-active { background: color-mix(in srgb, var(--alarm-c-disarmed) 22%, var(--alarm-glass-2)); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 55%, transparent); color: var(--alarm-c-disarmed); } .moo-alarm__cmd--off:hover { color: var(--alarm-c-disarmed); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 35%, transparent); } /* Disabled arm/disarm — engaged when the Pi agent is >10min silent (the same threshold that flips the agent-silent banner to red). Buttons stay visible so the user can see what's there, but interactivity is suppressed: pointer-events off, cursor not-allowed, no hover/active feedback, fade + subtle grayscale. `[disabled]` is the native HTML attr (already non-clickable for

can group {label, control, hint} as one tight unit without inheriting a parent flex gap that double-counts with its children's own margin-top. */ display: block; min-height: 0; overflow: hidden; } .moo-alarm__list-card.is-open .moo-alarm__list-card-expand { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s; } .moo-alarm__list-card.is-open .moo-alarm__list-card-expand-inner { /* margin-top compensates for the removed parent flex gap (parent has gap:0); total spacing between button + form content stays ≈ pre-grid-rows. NO padding-bottom — it would survive into the collapsed state if ever moved out of `.is-open`. */ margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } @media (prefers-reduced-motion: reduce) { .moo-alarm__list-card-expand { transition: none; } } .moo-alarm__list-card-chevron { font-size: 11px; color: var(--alarm-text-muted); transition: transform 200ms ease; } .moo-alarm__list-card.is-open .moo-alarm__list-card-chevron { transform: rotate(90deg); } /* Invisible chevron used on non-expandable cards (e.g. the Vocyl Alarm Agent base station) so the online dot stays in the same column as the dots on the expandable cards above. Visibility (not display:none) keeps the box in flow so the dot's position is unchanged. */ .moo-alarm__list-card-chevron--spacer { visibility: hidden; } /* Role / status badges */ .moo-alarm__badge { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: var(--alarm-glass-3); border: 1px solid var(--alarm-border); font: 700 10px/1 'Montserrat', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alarm-text-secondary); } /* ===== Devices tab sections (Sensors / Cameras / Base Station) ===== */ body:has(.moo-tools) .moo-alarm__section { display: block; margin: 0 0 22px; background: none; border: none; border-radius: 0; padding: 0; } body:has(.moo-tools) .moo-alarm__section:last-of-type { margin-bottom: 0; } body:has(.moo-tools) .moo-alarm__section-header { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; } body:has(.moo-tools) .moo-alarm__section-title { margin: 0; font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--alarm-text-secondary); flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--alarm-glass-2); border: 1px solid var(--alarm-border, rgba(255,255,255,0.08)); font: 700 11px/1 'Montserrat', sans-serif; color: var(--alarm-text-secondary); flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__section-rule { flex: 1; height: 1px; background: linear-gradient( to right, rgba(255,255,255,0.10), rgba(255,255,255,0.0) ); margin-left: 4px; } /* Empty-state block inside a section */ body:has(.moo-tools) .moo-alarm__empty { display: flex; align-items: center; gap: 14px; padding: 18px 18px; background: rgba(14, 22, 28, 0.55); border: 1px dashed rgba(255,255,255,0.10); border-radius: 16px; } body:has(.moo-tools) .moo-alarm__empty-icon { font-size: 18px; color: var(--alarm-text-muted); flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__empty-text { font: 500 12.5px/1.45 'Montserrat', sans-serif; color: var(--alarm-text-secondary); } /* "+ Add Camera" CTA card — sits at the bottom of the Cameras section. Looks like a list-card but with primary-action accent + dashed border. */ body:has(.moo-tools) .moo-alarm__add-card { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; margin: 10px 0 0; padding: 16px 18px; background: color-mix(in srgb, var(--alarm-c-disarmed) 6%, rgba(14, 22, 28, 0.55)); border: 1px dashed color-mix(in srgb, var(--alarm-c-disarmed) 40%, transparent); border-radius: 20px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease; } body:has(.moo-tools) .moo-alarm__add-card:hover { background: color-mix(in srgb, var(--alarm-c-disarmed) 12%, rgba(14, 22, 28, 0.65)); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 60%, transparent); } body:has(.moo-tools) .moo-alarm__add-card:active { transform: translateY(1px); } body:has(.moo-tools) .moo-alarm__add-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--alarm-c-disarmed) 18%, transparent); border: 1px solid color-mix(in srgb, var(--alarm-c-disarmed) 40%, transparent); color: var(--alarm-c-disarmed); font-size: 14px; flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__add-card-label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } body:has(.moo-tools) .moo-alarm__add-card-title { font: 700 14px/1.2 'Montserrat', sans-serif; color: var(--alarm-text-primary); } body:has(.moo-tools) .moo-alarm__add-card-sub { font: 500 11.5px/1.3 'Montserrat', sans-serif; color: var(--alarm-text-secondary); } body:has(.moo-tools) .moo-alarm__add-card-chevron { font-size: 11px; color: var(--alarm-text-muted); flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__muted { color: var(--alarm-text-muted); } /* ===== Live View modal (Dashboard + Devices both summon it) ===== */ /* Full-screen on phones, centered on desktop. Sits at z-index above nav/modals — designed to be a focused single-purpose overlay. */ .moo-alarm__liveview-wrap { position: fixed; inset: 0; /* Above the existing moo-alarm__modal-wrap (9000) so Live View opened from a card-edit form sits over the Add/Delete modals if both are visible. */ z-index: 9500; display: flex; align-items: stretch; justify-content: stretch; background: rgba(2, 6, 10, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: alarmLvFade 220ms ease-out; } .moo-alarm__liveview-wrap[hidden] { display: none !important; } @keyframes alarmLvFade { from { opacity: 0; } to { opacity: 1; } } .moo-alarm__liveview { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; margin: 0; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); background: transparent; } @media (min-width: 720px) { .moo-alarm__liveview-wrap { align-items: center; justify-content: center; padding: 24px; } .moo-alarm__liveview { flex: 0 1 auto; width: min(960px, 92vw); max-height: calc(100vh - 48px); border-radius: 22px; overflow: hidden; /* iOS Safari leaks blur/box-shadow halos past border-radius on rounded containers — belt-and-braces clip via mask + clip-path so the video feed (and any child backdrop-filter / box-shadow) never bleeds past the rounded corners. */ -webkit-mask-image: -webkit-radial-gradient(white, black); clip-path: inset(0 round 22px); background: linear-gradient(180deg, rgba(20, 28, 34, 0.96), rgba(10, 14, 18, 0.96)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } /* Give the stage a definite 16:9 height. On mobile it's `flex: 1` and fills the full-screen overlay; but in the desktop/tablet centered box the parent is content-sized (flex: 0 1 auto), so a `flex: 1` child has no free space to grow into and collapses to 0 height — that's why the feed was invisible on desktop until the window narrowed back to the full-screen layout. aspect-ratio derives a real height from the box width; the inherited min-height:0 lets it shrink so the controls stay visible on short windows. */ .moo-alarm__liveview-stage { flex: 0 1 auto; width: 100%; aspect-ratio: 16 / 9; } } .moo-alarm__liveview-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .moo-alarm__liveview-title { display: flex; align-items: center; gap: 10px; font: 700 14px/1.2 'Montserrat', sans-serif; letter-spacing: 0.02em; color: var(--alarm-text-primary); } .moo-alarm__liveview-title > i { color: var(--alarm-c-armed-home); font-size: 13px; } .moo-alarm__liveview-close { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); border-radius: 12px; color: rgba(255, 255, 255, 0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out; } .moo-alarm__liveview-close:hover { /* ALM-061(c): the same block already uses var(--color-danger) for `color`; route the background/border literals (#f43f5e == rgb(244,63,94)) through the same token so a danger retune can't split the hover into two reds. */ background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); } /* Video stage — 16:9 aspect on mobile, fills available height on desktop */ .moo-alarm__liveview-stage { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; /* Disable native browser gestures inside the stage so the JS gesture handler owns pinch/pan: without this iOS Safari does its own page- zoom on a two-finger pinch and Chrome would try to scroll. */ touch-action: none; } .moo-alarm__liveview-stage.is-zoomed { /* Drag-to-pan affordance — only when actually zoomed in, since at 1x there's nowhere to pan to. */ cursor: grab; } .moo-alarm__liveview-stage.is-zoomed.is-panning { cursor: grabbing; } .moo-alarm__liveview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Hint the compositor to keep the video on its own GPU layer during zoom/pan so the transform updates don't trigger layout-paint cycles. */ will-change: transform; /* CRITICAL: override the global `* { touch-action: pan-y }` rule (CLAUDE.md design rules) so iOS Safari doesn't intercept the pinch/pan gesture on the video itself. Without this the pinch would appear to "bounce back" on release because the browser was running its own (cancelled) pan logic in parallel with our JS gesture handler — when the user lifted, the browser's interpretation would briefly reset the visual state before our transform reasserted. `none` allows clicks (we don't actually use them here) but blocks all browser-managed touch gestures, leaving the stage's pointer- event listeners as the sole driver of pan/zoom. */ touch-action: none; } /* During an active pinch / drag / wheel-burst the transform updates on every frame, so the 220ms ease would lag behind the finger. Kill the transition while `.is-panning` is set; the JS toggles it on pointerdown/wheel and removes it on pointerup or wheel-burst-end. */ .moo-alarm__liveview-stage.is-panning .moo-alarm__liveview-video { transition: none; } .moo-alarm__liveview-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--alarm-text-secondary); font: 600 13.5px/1.4 'Montserrat', sans-serif; pointer-events: none; background: rgba(0, 0, 0, 0.4); } .moo-alarm__liveview-overlay > i { font-size: 26px; color: var(--alarm-c-armed-home); } /* "Tap for sound" badge — shown over the video while muted. Tapping it unmutes audio (works because the click counts as a user gesture, which browsers require to enable autoplay-with-sound). */ .moo-alarm__liveview-unmute-badge { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: #fff; font: 600 12.5px/1 'Montserrat', sans-serif; letter-spacing: 0.02em; cursor: pointer; z-index: 5; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 160ms ease, transform 160ms ease; animation: alarmLvBadgePop 360ms ease-out both; } .moo-alarm__liveview-unmute-badge:hover { background: rgba(0, 0, 0, 0.85); } .moo-alarm__liveview-unmute-badge:active { transform: translateX(-50%) scale(0.96); } .moo-alarm__liveview-unmute-badge > i { font-size: 12px; } .moo-alarm__liveview-unmute-badge[hidden] { display: none; } @keyframes alarmLvBadgePop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Controls — d-pad on left, side-stack (zoom/mute) on right */ .moo-alarm__liveview-controls { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0)); border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .moo-alarm__liveview-dpad { display: grid; grid-template-columns: 48px 48px 48px; grid-template-rows: 48px 48px 48px; grid-template-areas: ". up ." "left . right" ". down ."; gap: 6px; } .moo-alarm__liveview-dpad-up { grid-area: up; } .moo-alarm__liveview-dpad-left { grid-area: left; } .moo-alarm__liveview-dpad-right { grid-area: right; } .moo-alarm__liveview-dpad-down { grid-area: down; } .moo-alarm__liveview-dpad-center { grid-area: 2 / 2 / 3 / 3; width: 24px; height: 24px; align-self: center; justify-self: center; border-radius: 8px; background: rgba(255, 255, 255, 0.10); } .moo-alarm__liveview-dpad-btn { appearance: none; -webkit-appearance: none; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; background: rgba(255, 255, 255, 0.04); position: relative; cursor: pointer; transition: background-color 100ms ease, transform 80ms ease, border-color 120ms ease; -webkit-tap-highlight-color: transparent; } .moo-alarm__liveview-dpad-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } .moo-alarm__liveview-dpad-btn:active { background: color-mix(in srgb, var(--alarm-c-armed-home) 16%, rgba(255, 255, 255, 0.08)); border-color: color-mix(in srgb, var(--alarm-c-armed-home) 35%, transparent); transform: scale(0.96); } /* Triangle arrows drawn with ::before */ .moo-alarm__liveview-dpad-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; } .moo-alarm__liveview-dpad-up::before { border-width: 0 8px 11px 8px; border-color: transparent transparent var(--alarm-text-primary) transparent; } .moo-alarm__liveview-dpad-down::before { border-width: 11px 8px 0 8px; border-color: var(--alarm-text-primary) transparent transparent transparent; } .moo-alarm__liveview-dpad-left::before { border-width: 8px 11px 8px 0; border-color: transparent var(--alarm-text-primary) transparent transparent; } .moo-alarm__liveview-dpad-right::before { border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--alarm-text-primary); } .moo-alarm__liveview-side { display: flex; flex-direction: column; gap: 6px; } .moo-alarm__liveview-icon-btn { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); color: var(--alarm-text-primary); font-size: 14px; cursor: pointer; transition: background-color 100ms ease, border-color 120ms ease, transform 80ms ease; -webkit-tap-highlight-color: transparent; } .moo-alarm__liveview-icon-btn:hover { background: rgba(255, 255, 255, 0.08); } .moo-alarm__liveview-icon-btn:active { transform: scale(0.95); } .moo-alarm__liveview-icon-btn--muted { color: var(--alarm-text-muted); } /* Confirmation flash for the Set Home button — tinted green + checkmark for ~1.2s after a successful tap. Uses the disarmed accent (same green the rest of the alarm UI uses for "ok / committed"). The icon swap is pure CSS (::before overlay) so the JS doesn't need to rewrite the element on every flash. transition: color smooths the fade-out when the JS removes the class. */ .moo-alarm__liveview-icon-btn--success { color: var(--alarm-c-disarmed); background: color-mix(in srgb, var(--alarm-c-disarmed) 18%, rgba(255, 255, 255, 0.04)); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 45%, transparent); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .moo-alarm__liveview-icon-btn--success > i { /* Swap the house icon to a checkmark via a CSS-only icon replacement. `display:none` the original FA glyph and project a check in its place using the same FA font + the FA check unicode (\f00c). Keeps the button geometry identical — no layout shift on the flash. */ visibility: hidden; position: relative; } .moo-alarm__liveview-icon-btn--success > i::after { visibility: visible; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; content: '\f00c'; /* fa-check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 14px; } /* Lock body scroll while Live View is open */ body.is-liveview-open { overflow: hidden; } /* Dashboard camera tile should look tappable */ body:has(.moo-tools) .moo-alarm__sensor-card[data-type="camera"] { cursor: pointer; } body:has(.moo-tools) .moo-alarm__sensor-card[data-type="camera"]:hover { border-color: color-mix(in srgb, var(--alarm-c-armed-home) 30%, transparent); } /* Error pill — bubbles up post-redirect cam_err parameter under the Add card. */ body:has(.moo-tools) .moo-alarm__error-pill { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 12px 14px; background: color-mix(in srgb, var(--alarm-c-armed-away) 12%, rgba(14, 22, 28, 0.55)); border: 1px solid color-mix(in srgb, var(--alarm-c-armed-away) 45%, transparent); border-radius: 12px; font: 600 12.5px/1.4 'Montserrat', sans-serif; color: var(--alarm-c-armed-away); } body:has(.moo-tools) .moo-alarm__error-pill > i { font-size: 14px; flex-shrink: 0; } /* Read-only field — visually echoes .moo-alarm__input but dimmed/muted to communicate "you can't change this here". Used for sensor Type. */ body:has(.moo-tools) .moo-alarm__readonly-field { display: flex; align-items: center; gap: 8px; min-height: 41px; padding: 11px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.05); font: 500 15px/1.2 'Montserrat', sans-serif; color: var(--alarm-text-secondary); letter-spacing: 0.01em; box-sizing: border-box; } /* Consolidated Status row: Health + Tamper + Temperature inline */ body:has(.moo-tools) .moo-alarm__status-row { flex-wrap: wrap; height: auto; min-height: 41px; padding: 9px 16px; row-gap: 6px; column-gap: 10px; line-height: 1.3; } body:has(.moo-tools) .moo-alarm__status-item { display: inline-flex; align-items: center; gap: 6px; color: var(--alarm-text-secondary); } body:has(.moo-tools) .moo-alarm__status-item--ok { color: var(--alarm-c-battery-ok); } body:has(.moo-tools) .moo-alarm__status-item--warn { color: var(--alarm-c-battery-low); } body:has(.moo-tools) .moo-alarm__status-item--crit { color: var(--alarm-c-battery-crit); } body:has(.moo-tools) .moo-alarm__status-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); flex-shrink: 0; } body:has(.moo-tools) .moo-alarm__badge--connecting { color: var(--alarm-c-arming); background: color-mix(in srgb, var(--alarm-c-arming) 14%, transparent); border-color: color-mix(in srgb, var(--alarm-c-arming) 35%, transparent); animation: alarmConnectingPulse 2s ease-in-out infinite; } @keyframes alarmConnectingPulse { 0%, 100% { opacity: 0.78; } 50% { opacity: 1.0; } } /* Base-station card uses a faint tint to differentiate from sensors */ body:has(.moo-tools) .moo-alarm__list-card--basestation { background: linear-gradient( 180deg, rgba(14, 22, 28, 0.92), color-mix(in srgb, var(--alarm-c-disarmed) 3%, rgba(14, 22, 28, 0.92)) ); } /* Non-expandable cards (base station). No hover cursor, no chevron, no toggle. */ body:has(.moo-tools) .moo-alarm__list-card--static { cursor: default; } body:has(.moo-tools) .moo-alarm__list-card-top--static { cursor: default; user-select: text; } /* Nested PIN sub-list inside a user card */ .moo-alarm__pin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: rgba(24, 32, 40, 0.92); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.07); } .moo-alarm__pin-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .moo-alarm__pin-mask { font: 800 18px/1 'Montserrat', sans-serif; color: var(--alarm-text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.18em; } .moo-alarm__pin-label { font: 500 12px/1.3 'Montserrat', sans-serif; color: rgba(255, 255, 255, 0.55); } /* ===== Evidence Clip — inline pill on history-feed rows ===== Glass-morphism red pill with a pulsing REC dot. Lives in the existing event-chips grid cell so the row layout doesn't shift. Triggers the evidence playback modal via the event-delegation listener installed below in alarm.php. */ .moo-alarm__event-clip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--alarm-c-triggered) 18%, transparent), color-mix(in srgb, var(--alarm-c-triggered) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--alarm-c-triggered) 40%, transparent); color: var(--alarm-c-triggered); font: 700 10px/1 'Montserrat', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; white-space: nowrap; transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .moo-alarm__event-clip-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, color-mix(in srgb, var(--alarm-c-triggered) 28%, transparent), color-mix(in srgb, var(--alarm-c-triggered) 16%, transparent)); border-color: color-mix(in srgb, var(--alarm-c-triggered) 60%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--alarm-c-triggered) 25%, transparent); } .moo-alarm__event-clip-btn:active { transform: translateY(0); } .moo-alarm__event-clip-btn > i { font-size: 9px; } .moo-alarm__event-clip-btn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--alarm-c-triggered); box-shadow: 0 0 8px color-mix(in srgb, var(--alarm-c-triggered) 80%, transparent); animation: alarm-evid-dot-pulse 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes alarm-evid-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .moo-alarm__event-clip-btn-dot { animation: none; } } /* ===== History tab: filter bar + pager ===== Filter chips are a flex-wrap row of rounded-rect pills (12px radius — matches the rest of the alarm "control" radius — NOT pure pills, per the Vello design language). Inactive chips read as muted ghost surfaces; the active chip flips to the green disarmed accent so the current state is unambiguous at a glance. */ .moo-alarm__filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } /* Each chip on a row is EQUAL width — not proportional to content. `flex: 1 1 0` (basis 0) means every chip starts at 0 width and grows equally to share the row's free space, so two chips with different content widths end up the same final size. The lone-chip-on-row-2 case stretches to 100% since it has no row-mates to share with. 4 on row → 25% each; 3+1 → 33% × 3 then 100%; 2+2 → 50% each. `min-width: min-content` keeps the chip from shrinking below its intrinsic content width (so text + count badge never clip): when the row can't fit all chips at min-content + gaps, one wraps to the next row instead. */ .moo-alarm__filter-bar > .moo-alarm__filter-chip { flex: 1 1 0; min-width: min-content; justify-content: center; } .moo-alarm__filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); font: 600 12.5px/1 'Montserrat', sans-serif; letter-spacing: 0.02em; color: var(--alarm-text-secondary); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .moo-alarm__filter-chip:hover { background: rgba(24, 32, 40, 0.92); border-color: rgba(255, 255, 255, 0.14); color: var(--alarm-text-primary); } .moo-alarm__filter-chip > i { font-size: 11px; opacity: 0.85; } .moo-alarm__filter-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font: 700 10.5px/1 'Montserrat', sans-serif; color: var(--alarm-text-muted); font-variant-numeric: tabular-nums; } .moo-alarm__filter-chip.is-active { background: color-mix(in srgb, var(--alarm-c-disarmed) 14%, rgba(14, 22, 28, 0.92)); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 50%, transparent); color: var(--alarm-c-disarmed); } .moo-alarm__filter-chip.is-active > i { opacity: 1; } .moo-alarm__filter-chip.is-active .moo-alarm__filter-chip-count { background: color-mix(in srgb, var(--alarm-c-disarmed) 22%, transparent); color: var(--alarm-c-disarmed); } /* Pager cluster: prev/next chevron buttons flanking a centered row of numbered page pills. Disabled arrows stay in place (dimmed) so the cluster doesn't shift horizontally between first / middle / last page. Summary line ("Page X of Y · N events") sits below as a muted caption. */ .moo-alarm__pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 8px; /* MUST stay on a single line — combined with the tightened page-set logic (ellipsis kicks in at 8+ pages, max ~6 pills + 2 ellipses) and the no-shrink pills below, the cluster fits a 320px viewport. */ flex-wrap: nowrap; } .moo-alarm__pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--alarm-text-secondary); font-size: 11px; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .moo-alarm__pager-arrow:hover { background: rgba(24, 32, 40, 0.92); border-color: rgba(255, 255, 255, 0.14); color: var(--alarm-text-primary); } .moo-alarm__pager-arrow.is-disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; } .moo-alarm__pager-pages { display: flex; align-items: center; gap: 3px; /* Constrain to its own intrinsic size so the surrounding arrows stay pinned to the cluster's edges and the pills shrink-share remaining space if needed. min-width:0 lets flex-shrink work on overflow. */ min-width: 0; flex-shrink: 1; } .moo-alarm__pager-page { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; background: transparent; border: 1px solid transparent; font: 600 12.5px/1 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; color: var(--alarm-text-secondary); text-decoration: none; cursor: pointer; flex-shrink: 0; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .moo-alarm__pager-page:hover { background: rgba(24, 32, 40, 0.92); color: var(--alarm-text-primary); } .moo-alarm__pager-page.is-active { background: color-mix(in srgb, var(--alarm-c-disarmed) 16%, transparent); border-color: color-mix(in srgb, var(--alarm-c-disarmed) 50%, transparent); color: var(--alarm-c-disarmed); cursor: default; } .moo-alarm__pager-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 30px; color: var(--alarm-text-muted); font: 700 13px/1 'Montserrat', sans-serif; letter-spacing: 0.04em; user-select: none; flex-shrink: 0; } .moo-alarm__pager-summary { text-align: center; margin: 0 0 8px; font: 600 12px/1.3 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; color: var(--alarm-text-muted); } .moo-alarm__pager-summary--alone { margin: 18px 0 0; } /* Narrow-viewport pager: hide the non-active page pills + ellipses so the cluster fits on a single line even at 320px. The active pill stays as a "current page" badge between the prev/next arrows, and the summary line below ("Page X of Y · N events") gives the full context. Loses jump- to-page on mobile — acceptable trade-off for not overflowing the viewport edge (which was the previous behaviour at ≤ 360px). */ @media (max-width: 479px) { .moo-alarm__pager-pages > .moo-alarm__pager-page:not(.is-active), .moo-alarm__pager-pages > .moo-alarm__pager-ellipsis { display: none; } } .moo-alarm__history-row { display: grid; grid-template-columns: 88px 32px 1fr auto 16px; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: background-color 120ms ease; } .moo-alarm__history-row:first-of-type { border-top: 0; } .moo-alarm__history-row:hover { background: rgba(24, 32, 40, 0.92); } .moo-alarm__history-row:focus-visible { outline: 2px solid var(--alarm-c-disarmed); outline-offset: -2px; background: rgba(24, 32, 40, 0.92); } .moo-alarm__history-row-chevron { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--alarm-text-muted); transition: transform 200ms ease; } .moo-alarm__history-row.is-open .moo-alarm__history-row-chevron { transform: rotate(90deg); } .moo-alarm__history-row-payload { display: none; padding: 14px 16px; font: 500 11px/1.5 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--alarm-text-secondary); background: var(--alarm-glass-1); white-space: pre-wrap; word-break: break-all; } .moo-alarm__history-row.is-open + .moo-alarm__history-row-payload { display: block; } /* ===== Modal pattern ===== Overlay uses position:absolute (NOT fixed) so it tracks viewport.js's html/body resize when the iOS keyboard opens — every form modal here has a text input. Each wrap is relocated to on load (see each page's footer script) so it sizes against the keyboard-aware body box. The modal itself is a three-zone column — fixed header, scrollable body, pinned footer — so the title + actions stay put while the content scrolls when it outgrows the viewport. All five alarm modals share this skeleton. */ .moo-alarm__modal-wrap { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; } .moo-alarm__modal-wrap.is-open { display: flex; animation: mooOverlayIn 0.2s ease-out; } /* Body-scroll lock while any alarm modal is open. Stops the page behind the backdrop from scrolling on iOS (would otherwise scroll-shift the entire viewport during keyboard interactions inside the modal). Released only when no .moo-alarm__modal-wrap.is-open remains — handled in the page-level JS. */ body.moo-alarm-modal-open { overflow: hidden; } /* Alarm header nav row — replaces the previous inline gap:6px. Scopes the gap to this nav so other tools' .hbbm_cont uses (currently none) aren't affected. */ .moo-alarm__nav { gap: 6px; } /* Modal title's auxiliary text ("for Erin", etc.) — used to be inline-styled. */ body:has(.moo-tools) .moo-alarm__modal-title-aux { font-weight: 400; opacity: 0.7; } /* Form spacing helpers — replace inline style="margin-top:N" calls. */ body:has(.moo-tools) .moo-alarm__form--gap-top { margin-top: 14px; } body:has(.moo-tools) .moo-alarm__input--stacked { margin-top: 8px; } .moo-alarm__modal { position: relative; width: min(420px, 100%); max-height: 100%; background: rgba(18, 22, 26, 0.96); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset; display: flex; flex-direction: column; overflow: hidden; animation: alarmModalIn 0.26s cubic-bezier(0.4, 0, 0.2, 1); } /* Header — fixed at the top */ .moo-alarm__modal-title { flex-shrink: 0; padding: 22px 24px 0; font: 800 18px/1.25 'Montserrat', sans-serif; color: var(--alarm-text-primary); letter-spacing: -0.01em; } .moo-alarm__modal-desc { flex-shrink: 0; padding: 7px 24px 0; font: 500 13px/1.5 'Montserrat', sans-serif; color: var(--alarm-text-secondary); } /* Body — the only zone that scrolls once the modal hits max-height */ .moo-alarm__modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 24px; scrollbar-width: none; } .moo-alarm__modal-body::-webkit-scrollbar { display: none; } /* Footer — pinned at the bottom, always reachable above the keyboard */ .moo-alarm__modal-actions { flex-shrink: 0; display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px 22px; } /* When a scrollable body sits above the footer, add a hairline + opaque backing so content reads as sliding beneath the pinned actions. Confirm-only modals (title + desc + actions, no body) intentionally skip it. */ .moo-alarm__modal-body + .moo-alarm__modal-actions { border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(18, 22, 26, 0.96); } @keyframes alarmModalIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .moo-alarm__modal-wrap.is-open, .moo-alarm__modal { animation: none; } } /* Big PIN entry input */ .moo-alarm__pin-input { display: block; width: 100%; box-sizing: border-box; text-align: center; font: 800 30px/1 'Montserrat', sans-serif; letter-spacing: 0.36em; padding: 16px 16px 16px 28px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; color: var(--alarm-text-primary); font-variant-numeric: tabular-nums; caret-color: var(--alarm-c-disarmed); appearance: none; -webkit-appearance: none; } .moo-alarm__pin-input:focus { outline: none; border-color: var(--alarm-c-disarmed); background: rgba(24, 32, 40, 0.92); } /* ===== Empty / placeholder ===== */ .moo-alarm__placeholder { text-align: center; padding: 40px 24px; color: var(--alarm-text-secondary); background: rgba(14, 22, 28, 0.92); border: 1px dashed rgba(255, 255, 255, 0.10); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 13px/1.4 'Montserrat', sans-serif; } .moo-alarm__placeholder > i { font-size: 28px; color: var(--alarm-text-secondary); } .moo-alarm__placeholder p { margin: 0; } /* ===== Animations ===== */ @keyframes alarmPulseSoft { 0%, 100% { box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 0px transparent; } 50% { box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 24px var(--_alarm-hero-glow, transparent); } } @keyframes alarmFlash { 0% { opacity: 1; } 100% { opacity: 0.55; } } @keyframes alarmSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ===== Mobile tweaks ===== */ @media (max-width: 480px) { .moo-alarm__hero { padding: 22px 18px; min-height: 140px; } .moo-alarm__hero-state { font-size: 36px; letter-spacing: 0.03em; } .moo-alarm__hero-countdown { font-size: 32px; } .moo-alarm__hero-detail { font-size: 14px; } .moo-alarm__sensor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Keep the chips column (auto) on mobile so the View Clip pill stays visible in History — same inline treatment as the dashboard's Recent Activity rows. Previously the whole chips cell was display:none here, which hid the pill on phones (the primary platform) and is why clips appeared in Recent Activity but not History. The summary already ellipsises (white-space:nowrap), so the narrower body cell is fine. */ .moo-alarm__history-row { grid-template-columns: 70px 28px 1fr auto 16px; } /* Drop only the secondary sensor mini-chip on mobile — the row summary already names the sensor inline, so it's redundant; the actionable View Clip pill is kept. When a row has no clip the auto column collapses to 0, so non-clip rows are visually unchanged. */ .moo-alarm__history-row .moo-alarm__event-mini-chip { display: none; } } /* Honour reduce-motion */ @media (prefers-reduced-motion: reduce) { .moo-alarm__hero--triggered, .moo-alarm__hero--pending, .moo-alarm__hero--arming_away, .moo-alarm__hero--arming_home { animation: none; } .moo-alarm__event-new { animation: none; } } /* ============================================================ Time Tracker Tool (.moo-tt-*) ============================================================ */ .moo-tt-page { padding-bottom: 40px; } /* Week navigation */ .moo-tt-weeknav { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; } .moo-tt-weeknav__btn { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-primary); text-decoration: none; transition: background-color 0.2s, border-color 0.2s; } .moo-tt-weeknav__btn:hover { border-color: rgba(255, 255, 255, 0.18); } .moo-tt-weeknav__btn:active { background: rgba(24, 32, 40, 0.92); } .moo-tt-weeknav__center { flex: 1 1 auto; text-align: center; min-width: 0; } .moo-tt-weeknav__title { font-size: 17px; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; } .moo-tt-weeknav__range { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; margin-top: 3px; } /* Week summary hero */ .moo-tt-sum { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 24px 22px; text-align: center; margin-bottom: 22px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); } .moo-tt-sum--over { background: linear-gradient(135deg, rgba(0, 229, 160, 0.10), transparent 55%), rgba(14, 22, 28, 0.92); border-color: rgba(0, 229, 160, 0.18); } .moo-tt-sum__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.4); margin-bottom: 10px; } .moo-tt-sum__headline { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--color-text-primary); } .moo-tt-sum--over .moo-tt-sum__headline { color: var(--color-accent); } .moo-tt-sum__headline--empty { font-size: 23px; font-weight: 700; letter-spacing: 0; } .moo-tt-sum__money { font-size: 15px; font-weight: 600; margin-top: 9px; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; } .moo-tt-sum--over .moo-tt-sum__money { color: var(--color-accent); } .moo-tt-sum__sub { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-top: 8px; } /* Contract-line meter (signature element) */ .moo-tt-meter { position: relative; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); margin: 18px 2px 16px; overflow: hidden; } .moo-tt-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.28); border-radius: 6px; } .moo-tt-meter__over { position: absolute; top: 0; bottom: 0; background: var(--color-accent); border-radius: 0 6px 6px 0; } .moo-tt-meter__tick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.55); } /* Summary breakdown rows */ .moo-tt-sum__breakdown { margin-top: 2px; } .moo-tt-sum-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; } .moo-tt-sum-row__label { color: rgba(255, 255, 255, 0.55); font-weight: 500; } .moo-tt-sum-row__value { color: var(--color-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; } /* Day rows */ .moo-tt-days { display: flex; flex-direction: column; gap: 8px; } .moo-tt-day { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left; margin: 0; padding: 14px 16px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s, border-color 0.2s, transform 0.15s; } .moo-tt-day:hover { border-color: rgba(255, 255, 255, 0.16); } .moo-tt-day:active { background: rgba(24, 32, 40, 0.92); transform: scale(0.99); } .moo-tt-day--empty { background: rgba(12, 18, 23, 0.55); border-style: dashed; border-color: rgba(255, 255, 255, 0.1); } .moo-tt-day--today { border-color: rgba(0, 229, 160, 0.3); } .moo-tt-day__head { flex: 0 0 52px; } .moo-tt-day__dow { font-size: 14px; font-weight: 700; white-space: nowrap; } .moo-tt-day--today .moo-tt-day__dow { color: var(--color-accent); } .moo-tt-day__date { font-size: 11px; color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; } .moo-tt-day__mid { flex: 1 1 auto; min-width: 0; } .moo-tt-day__shift { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .moo-tt-day__shift i { font-size: 11px; color: rgba(255, 255, 255, 0.35); } .moo-tt-day__next { font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 6px; background: rgba(0, 229, 160, 0.12); color: var(--color-accent); } .moo-tt-day__chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .moo-tt-chip { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); } .moo-tt-chip--break { color: rgba(255, 255, 255, 0.42); } .moo-tt-day__net { flex: 0 0 auto; text-align: right; } .moo-tt-day__net-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .moo-tt-day__net-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.38); margin-top: 1px; } .moo-tt-day__add { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .moo-tt-day__add i { font-size: 12px; color: var(--color-accent); } /* Entry + settings modals (overlay + centered; absolute because they hold inputs) */ #tt_entry_wrap, #tt_settings_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 9998; animation: mooOverlayIn 0.25s ease; } #tt_entry_modal, #tt_settings_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; width: min(400px, calc(100% - 40px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px); overflow-y: auto; overscroll-behavior: contain; background: rgba(20, 30, 38, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #tt_entry_modal .moo-da-modal__icon, #tt_settings_modal .moo-da-modal__icon { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.18); color: var(--color-accent); } #tt_entry_modal form, #tt_settings_modal form { margin: 0; } /* Entry modal fields */ .moo-tt-entry-date { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); text-align: center; margin-bottom: 16px; } .moo-tt-times { display: flex; gap: 12px; } .moo-tt-field { flex: 1; display: flex; flex-direction: column; gap: 7px; } .moo-tt-field__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.4); } .moo-tt-field input[type="time"] { width: 100%; box-sizing: border-box; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 14px; font-size: 16px; font-weight: 600; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; transition: border-color 0.25s; } .moo-tt-field input[type="time"]:focus { border-color: rgba(0, 229, 160, 0.45); outline: none; } /* Live preview */ .moo-tt-preview { margin-top: 16px; padding: 14px 16px; background: rgba(0, 229, 160, 0.05); border: 1px solid rgba(0, 229, 160, 0.12); border-radius: 12px; } .moo-tt-preview__empty { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.45); } .moo-tt-preview__row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .moo-tt-preview__row strong { color: var(--color-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; } .moo-tt-preview__row--net { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .moo-tt-preview__row--net span { color: rgba(255, 255, 255, 0.8); font-weight: 600; } .moo-tt-preview__row--net strong { color: var(--color-accent); font-size: 16px; } .moo-tt-preview__note { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(0, 229, 160, 0.85); } /* Settings modal rows */ .moo-tt-set { display: flex; flex-direction: column; } .moo-tt-set__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .moo-tt-set__row:last-child { border-bottom: none; } .moo-tt-set__lbl { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .moo-tt-set__hint { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.4); } /* Fixed-width control so every input box lines up in one vertical column. */ .moo-tt-set__control { position: relative; flex: 0 0 112px; width: 112px; } .moo-tt-set__control input[type="number"] { width: 100%; box-sizing: border-box; text-align: right; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--color-text-primary); padding: 10px 48px 10px 14px; /* right room for the unit suffix + clear gap */ font-size: 15px; font-weight: 600; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; } .moo-tt-set__control--money input[type="number"] { padding: 10px 14px 10px 28px; } /* left room for the £ */ .moo-tt-set__control input[type="number"]:focus { border-color: rgba(0, 229, 160, 0.45); outline: none; } .moo-tt-set__unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.45); } .moo-tt-set__pre { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.45); } .moo-tt-set__static { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } /* Modal action buttons */ .moo-tt-save { flex: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; color: var(--color-bg); font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: box-shadow 0.2s, opacity 0.2s; } .moo-tt-save:hover { box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25); } .moo-tt-save:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } .moo-tt-del { width: 100%; box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 20px; border-radius: 12px; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.28); color: var(--color-danger); font-size: 13px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .moo-tt-del:hover { background: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.45); } #tt_entry_delform { padding: 14px 24px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Day-type segmented control (entry modal) */ .moo-tt-typesel { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: rgba(8, 14, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; } .moo-tt-typesel__opt { flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 4px; border-radius: 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .moo-tt-typesel__opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .moo-tt-typesel__opt:has(input:checked) { background: rgba(0, 229, 160, 0.14); color: var(--color-accent); } /* Holiday / Off-sick info panel (entry modal) */ .moo-tt-typeinfo { margin-top: 4px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); align-items: center; gap: 9px; } .moo-tt-typeinfo i { color: rgba(255, 255, 255, 0.4); font-size: 15px; flex: 0 0 auto; } .moo-tt-typeinfo strong { color: var(--color-text-primary); font-weight: 700; } /* Holiday / Off-sick day-row tags */ .moo-tt-day__tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; } .moo-tt-day__tag i { font-size: 12px; } .moo-tt-day__tag--holiday { background: rgba(56, 189, 248, 0.12); color: var(--color-accent-sky); } .moo-tt-day__tag--sick { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); } .moo-tt-day__tag--dayoff { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); } .moo-tt-day__net-val--none { color: rgba(255, 255, 255, 0.3); }