/* ================================================================ НАШ ДОМ — полный файл стилей Темы переключаются атрибутом data-theme на ================================================================ */ /* ===== ТЕМА: Светлая (по умолчанию) ===== */ :root { --bg: linear-gradient(160deg, #f6f4ef 0%, #efe9e1 100%); --bg-solid: #f6f4ef; --card: rgba(255, 255, 255, 0.72); --card-solid: #ffffff; --stroke: rgba(0, 0, 0, 0.07); --text: #2b2a27; --text-2: #8a857c; --accent: #c96f4a; --accent-soft: rgba(201, 111, 74, 0.10); --danger: #e25555; --radius: 18px; --shadow: 0 8px 28px rgba(60, 50, 40, 0.08); --blur: blur(14px); } /* ===== ТЕМА: Тёмная ===== */ html[data-theme="dark"] { --bg: linear-gradient(160deg, #191917 0%, #211f1c 100%); --bg-solid: #191917; --card: rgba(38, 37, 34, 0.72); --card-solid: #262522; --stroke: rgba(255, 255, 255, 0.08); --text: #ece9e2; --text-2: #97928a; --accent: #e08a62; --accent-soft: rgba(224, 138, 98, 0.13); --shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } /* ===== ТЕМА: Океан ===== */ html[data-theme="ocean"] { --bg: linear-gradient(160deg, #eef4f7 0%, #e2ecf2 100%); --bg-solid: #eef4f7; --card: rgba(255, 255, 255, 0.75); --card-solid: #ffffff; --stroke: rgba(20, 60, 90, 0.08); --text: #1f2e38; --text-2: #7b8d99; --accent: #3a7ca5; --accent-soft: rgba(58, 124, 165, 0.10); --shadow: 0 8px 28px rgba(30, 60, 90, 0.08); } /* ===== ТЕМА: Лес ===== */ html[data-theme="forest"] { --bg: linear-gradient(160deg, #f0f4ee 0%, #e6eee2 100%); --bg-solid: #f0f4ee; --card: rgba(255, 255, 255, 0.75); --card-solid: #ffffff; --stroke: rgba(30, 70, 30, 0.08); --text: #25332433; --text: #253324; --text-2: #82917e; --accent: #4a8a52; --accent-soft: rgba(74, 138, 82, 0.10); --shadow: 0 8px 28px rgba(40, 80, 40, 0.08); } /* ===== ТЕМА: Ночной графит ===== */ html[data-theme="graphite"] { --bg: linear-gradient(160deg, #15171a 0%, #1c2026 100%); --bg-solid: #15171a; --card: rgba(36, 40, 46, 0.72); --card-solid: #24282e; --stroke: rgba(255, 255, 255, 0.08); --text: #e8eaee; --text-2: #8d939c; --accent: #7c9fd4; --accent-soft: rgba(124, 159, 212, 0.13); --shadow: 0 8px 28px rgba(0, 0, 0, 0.4); } /* ================================================================ БАЗА ================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 700; } a { color: var(--accent); } /* ===== Карточки ===== */ .glass-card { background: var(--card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; } /* ===== Поля ввода ===== */ input, textarea, select { width: 100%; padding: 12px 14px; margin-bottom: 12px; background: var(--card-solid); border: 1px solid var(--stroke); border-radius: 14px; color: var(--text); font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--text-2); } textarea { resize: vertical; } /* ===== Кнопки ===== */ .btn-primary { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px var(--accent-soft); transition: transform .12s, opacity .15s; } .btn-primary:hover { opacity: .92; } .btn-primary:active { transform: scale(.98); } .icon-btn { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: none; border-radius: 14px; cursor: pointer; font-size: 18px; color: var(--text); transition: transform .15s; } .icon-btn:active { transform: scale(.92); } .icon-btn.small { width: 34px; height: 34px; font-size: 14px; background: transparent; } .icon-btn.active-tool { background: var(--accent); color: #fff; } .badge { background: var(--accent-soft); color: var(--accent); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } /* ================================================================ КАРКАС И НАВИГАЦИЯ ================================================================ */ #fh-app { display: flex; min-height: 100vh; } .fh-nav { width: 210px; flex-shrink: 0; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--stroke); position: sticky; top: 0; height: 100vh; } .fh-nav-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border: none; border-radius: 14px; cursor: pointer; color: var(--text-2); font-size: 15px; font-weight: 600; text-align: left; font-family: inherit; transition: all .15s; } .fh-nav-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .fh-nav-btn:hover { background: var(--accent-soft); color: var(--text); } .fh-nav-btn.active { background: var(--accent-soft); color: var(--accent); } #tab-root { flex: 1; max-width: 760px; margin: 0 auto; padding: 18px; width: 100%; } /* ================================================================ ТУЛБАРЫ, СЕГМЕНТЫ (Кино, Заметки, Напоминания) ================================================================ */ .movies-toolbar { display: flex; align-items: center; gap: 10px; } .seg { flex: 1; display: flex; background: var(--accent-soft); border-radius: 14px; padding: 4px; } .seg-btn { flex: 1; padding: 10px; background: transparent; border: none; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); font-family: inherit; transition: all .2s; } .seg-btn.active { background: var(--card-solid); color: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } /* ================================================================ КИНО ================================================================ */ .movie-form { margin-top: 14px; } .movie-row { display: flex; gap: 14px; } .movie-poster { width: 85px; border-radius: 12px; align-self: flex-start; flex-shrink: 0; } .movie-info { flex: 1; min-width: 0; } .movie-info p { font-size: 13px; color: var(--text-2); margin-top: 6px; } .card-icons { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .movie-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .movie-footer a { color: var(--accent); text-decoration: none; font-size: 14px; } .movie-footer .btn-primary { margin-left: auto; width: auto; padding: 10px 20px; } /* ================================================================ ФАЙЛЫ: ПАПКИ И ПЛИТКИ ================================================================ */ .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .folder-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; background: var(--card-solid); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; text-align: center; transition: transform .15s; } .folder-tile:hover { transform: translateY(-3px); } .folder-tile strong { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-tile small { color: var(--text-2); font-size: 11px; } .folder-tile .f-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 16px; color: var(--accent); font-size: 26px; } .folder-tile .f-icon svg { width: 28px; height: 28px; } .folder-tile .f-del { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; opacity: .35; font-size: 13px; color: var(--text); } .folder-tile.add-tile { border-style: dashed; box-shadow: none; background: transparent; } .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .file-tile { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; background: var(--card-solid); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: transform .15s; } .file-tile:hover { transform: translateY(-3px); } .file-tile .thumb { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; font-size: 42px; background: var(--accent-soft); overflow: hidden; } .file-tile .thumb img { width: 100%; height: 100%; object-fit: cover; } .file-tile .meta { padding: 8px 10px; } .file-tile .meta strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-tile .meta small { color: var(--text-2); font-size: 11px; } .file-tile .actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 2; } .tile-act { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .85); border: none; border-radius: 10px; cursor: pointer; font-size: 14px; text-decoration: none; color: #2b2a27; backdrop-filter: blur(4px); } .dropzone { border: 2px dashed var(--stroke); border-radius: 14px; padding: 22px; text-align: center; color: var(--text-2); cursor: pointer; transition: all .15s; } .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } /* ===== Просмотрщик ===== */ .viewer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; padding: 20px; } .viewer-overlay .viewer-content { max-width: 95vw; max-height: 90vh; } .viewer-overlay img, .viewer-overlay video { max-width: 95vw; max-height: 85vh; border-radius: 14px; } .viewer-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; background: rgba(255, 255, 255, .15); border: none; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; } /* ================================================================ НАПОМИНАНИЯ ================================================================ */ .rem-tile { display: flex; flex-direction: column; aspect-ratio: 1; padding: 14px; background: var(--card-solid); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; transition: transform .15s; } .rem-tile:hover { transform: translateY(-3px); } .rem-tile .rem-time { font-size: 22px; font-weight: 700; color: var(--accent); } .rem-tile .rem-date { font-size: 12px; color: var(--text-2); margin-bottom: 8px; } .rem-tile .rem-title { font-weight: 600; font-size: 14px; overflow: hidden; flex: 1; } .rem-tile .rem-desc { font-size: 12px; color: var(--text-2); overflow: hidden; max-height: 3em; } .rem-tile .f-del { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; opacity: .35; font-size: 13px; color: var(--text); } .rem-tile.past { opacity: .55; } .rem-tile.soon { border-color: var(--accent); } /* ================================================================ ТЕМЫ: ПЛИТКИ ВЫБОРА (раздел «Ещё») ================================================================ */ .theme-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .theme-swatch { width: 74px; padding: 8px; border: 2px solid var(--stroke); border-radius: 14px; background: var(--card-solid); cursor: pointer; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-2); font-family: inherit; } .theme-swatch .sw { height: 34px; border-radius: 9px; margin-bottom: 6px; } .theme-swatch.active { border-color: var(--accent); color: var(--accent); } /* ================================================================ МОБИЛЬНАЯ ВЕРСИЯ ================================================================ */ @media (max-width: 700px) { #fh-app { flex-direction: column; } .fh-nav { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; width: auto; flex-direction: row; justify-content: space-around; padding: 6px 4px; background: var(--card-solid); border-right: none; border-top: 1px solid var(--stroke); z-index: 50; } .fh-nav-btn { flex-direction: column; gap: 3px; font-size: 11px; padding: 6px 8px; } .fh-nav-btn span { display: block; } #tab-root { padding-bottom: 95px; } .folder-grid, .file-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* ================================================================ ЛЕС НА ФОНЕ + ПОДЛОЖКА ПОД ТЕМУ ================================================================ */ :root { --overlay: rgba(246, 244, 239, .72); } html[data-theme="dark"] { --overlay: rgba(22, 22, 20, .84); } html[data-theme="graphite"] { --overlay: rgba(18, 20, 23, .84); } html[data-theme="ocean"] { --overlay: rgba(238, 244, 247, .72); } html[data-theme="forest"] { --overlay: rgba(240, 244, 238, .55); } body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('/img/forest.png') center / cover no-repeat; background-color: #2f4030; /* подложка, пока картинка грузится */ } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--overlay); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* hidden должен побеждать любые display */ [hidden] { display: none !important; } /* ===== Фикс модалки: всегда по центру ===== */ .fh-modal-overlay { position: fixed !important; inset: 0 !important; z-index: 2000; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, .45); padding: 20px; } .fh-modal { background: var(--card-solid); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; max-width: 360px; width: 100%; text-align: center; } .fh-modal p { font-size: 15px; margin-bottom: 20px; } .fh-modal-btns { display: flex; gap: 10px; } .fh-modal-btns button { flex: 1; padding: 12px; border: none; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .fh-m-cancel { background: var(--accent-soft); color: var(--text); } .fh-m-ok { background: var(--accent); color: #fff; } .fh-m-ok.danger { background: var(--danger); }