/* ================================================================= 尘缘 CHENYUAN · admin edit-mode overlay only takes effect when has class "is-editing" ================================================================= */ body.is-editing { cursor: default; } /* make sure scrolling to an editable element doesn't put it under the bar */ body.is-editing [data-edit-text], body.is-editing [data-edit-image] { scroll-margin-top: 80px; } /* ----- TOP BAR ----- */ .admin-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 56px; background: rgba(28, 31, 34, 0.92); color: #F4F2ED; display: none; align-items: center; justify-content: space-between; padding: 0 24px; font-family: "Noto Sans SC", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.06em; box-shadow: 0 2px 12px rgba(0,0,0,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.is-editing .admin-bar { display: flex; } .admin-bar__left { display: flex; align-items: center; gap: 16px; } .admin-bar__title { font-weight: 500; } .admin-bar__status { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8C9095; padding: 4px 10px; border: 1px solid #2D3E2C; border-radius: 999px; } .admin-bar__right { display: flex; gap: 8px; } .admin-bar__btn { background: transparent; color: #F4F2ED; border: 1px solid #5A5F64; border-radius: 999px; padding: 6px 14px; font-size: 12px; letter-spacing: 0.08em; cursor: pointer; transition: background 200ms, color 200ms; } .admin-bar__btn:hover { background: #F4F2ED; color: #1C1F22; } .admin-bar__btn--primary { background: #2D3E2C; border-color: #2D3E2C; } .admin-bar__btn--primary:hover { background: #1E2B1D; color: #F4F2ED; } .admin-bar__btn--danger { border-color: #8B2E2A; color: #f3a39f; } .admin-bar__btn--danger:hover { background: #8B2E2A; color: #F4F2ED; } /* push page content down to make room for the admin bar */ body.is-editing { padding-top: 56px; } body.is-editing .nav { top: 56px; } /* clear hint shown briefly after entering edit mode */ body.is-editing::after { content: "编辑模式 · 点任何文字 / 图片即可修改 · 顶部完成退出"; position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9999; background: #2D3E2C; color: #F4F2ED; font-family: "Noto Sans SC", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.18em; padding: 6px 16px; border-radius: 999px; pointer-events: none; animation: admin-hint-fade 6s ease-out forwards; } @keyframes admin-hint-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } /* ----- EDITABLE TEXT ----- */ :where([data-edit-text]) { outline: 1px dashed rgba(45, 62, 44, 0.0); outline-offset: 4px; transition: outline-color 160ms; cursor: text; } body.is-editing [data-edit-text].js-form-editable { cursor: text; background: rgba(244, 242, 237, 0.6); transition: background 160ms; } body.is-editing [data-edit-text].js-form-editable:hover { background: rgba(235, 231, 223, 0.8); outline: 1px solid #2D3E2C; } body.is-editing [data-edit-text].js-form-editable:focus { background: #FFFFFF; outline: 2px solid #2D3E2C; } body.is-editing [data-edit-text]:hover { outline-color: rgba(45, 62, 44, 0.45); } body.is-editing [data-edit-text]:focus { outline: 2px solid #2D3E2C; background: rgba(244, 242, 237, 0.6); } body.is-editing [data-edit-text]::before { content: "✎"; position: absolute; top: -10px; left: -2px; background: #2D3E2C; color: #F4F2ED; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 3px; font-family: "JetBrains Mono", monospace; opacity: 0; pointer-events: none; transition: opacity 160ms; } body.is-editing [data-edit-text]:hover::before { opacity: 1; } /* ----- EDITABLE IMAGE ----- */ :where([data-edit-image]) { outline: 1px dashed rgba(45, 62, 44, 0.0); outline-offset: -2px; transition: outline-color 160ms; cursor: pointer; } body.is-editing [data-edit-image]:hover { outline-color: rgba(45, 62, 44, 0.5); } body.is-editing [data-edit-image]::after { content: "🖼"; position: absolute; top: 8px; left: 8px; background: #2D3E2C; color: #F4F2ED; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 3px; pointer-events: none; } body.is-editing [data-edit-image] .admin-img-overlay { position: absolute; inset: 0; background: rgba(28, 31, 34, 0.0); display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; pointer-events: none; transition: background 160ms; } body.is-editing [data-edit-image]:hover .admin-img-overlay { background: rgba(28, 31, 34, 0.25); } body.is-editing [data-edit-image] .admin-img-overlay__pos { background: rgba(28, 31, 34, 0.85); color: #F4F2ED; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px; pointer-events: none; opacity: 0; transition: opacity 160ms; } body.is-editing [data-edit-image]:hover .admin-img-overlay__pos { opacity: 1; } /* ----- POSITION PICKER MODAL ----- */ .admin-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(28, 31, 34, 0.6); display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .admin-modal.is-open { display: flex; } .admin-modal__panel { background: #F4F2ED; border-radius: 6px; padding: 32px; width: min(440px, 90vw); font-family: "Noto Sans SC", system-ui, sans-serif; color: #1C1F22; box-shadow: 0 24px 80px rgba(0,0,0,0.4); } .admin-modal__title { font-family: "Noto Serif SC", serif; font-size: 20px; font-weight: 500; margin-bottom: 4px; letter-spacing: 0.06em; } .admin-modal__sub { font-size: 12px; letter-spacing: 0.12em; color: #5A5F64; margin-bottom: 24px; } .admin-modal__group { margin-bottom: 20px; } .admin-modal__group h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #5A5F64; font-weight: 500; margin-bottom: 10px; } .admin-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 144px; height: 96px; background: #DDD8CE; padding: 4px; border-radius: 4px; } .admin-picker__cell { background: #F4F2ED; border: none; border-radius: 2px; cursor: pointer; transition: background 160ms; position: relative; } .admin-picker__cell:hover { background: #EBE7DF; } .admin-picker__cell.is-active { background: #2D3E2C; } .admin-picker__cell.is-active::after { content: ""; position: absolute; inset: 50%; width: 6px; height: 6px; background: #F4F2ED; border-radius: 50%; transform: translate(-50%, -50%); } .admin-modal__file { display: block; width: 100%; font-size: 12px; padding: 10px; background: #F4F2ED; border: 1px dashed #C8C2B5; border-radius: 4px; color: #5A5F64; cursor: pointer; } .admin-modal__file:hover { border-color: #2D3E2C; color: #1C1F22; } .admin-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .admin-modal__btn { background: transparent; border: 1px solid #1C1F22; color: #1C1F22; border-radius: 999px; padding: 8px 18px; font-size: 12px; letter-spacing: 0.12em; cursor: pointer; transition: background 200ms, color 200ms; } .admin-modal__btn:hover { background: #1C1F22; color: #F4F2ED; } .admin-modal__btn--primary { background: #2D3E2C; border-color: #2D3E2C; color: #F4F2ED; } .admin-modal__btn--primary:hover { background: #1E2B1D; } .admin-modal__hint { font-size: 11px; color: #8C9095; margin-top: 8px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.05em; } /* ----- TOAST ----- */ .admin-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 10001; background: #1C1F22; color: #F4F2ED; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-family: "Noto Sans SC", system-ui, sans-serif; letter-spacing: 0.06em; opacity: 0; pointer-events: none; transition: opacity 240ms, transform 240ms; } .admin-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ----- REDUCED MOTION ----- */ @media (prefers-reduced-motion: reduce) { [data-edit-text], [data-edit-image] { transition: none; } .admin-toast { transition: none; } }