/* Тема оформления библиотеки. Три темы переключаются классом на : theme-pink / theme-gray / theme-light_pink. Значения розовой темы взяты точно по ТЗ. Светло-розовая — точная копия розовой, но с белыми (#fdfffe) заголовками. */ :root, body.theme-pink { --color-bg: #fdf2f6; --color-text-main: #797073; --color-toggle: #f6bbcf; --color-rating: #e9598e; --color-tag-bg: #f6e2ea; --color-btn-collapse: #797375; --color-text-desc: #999093; --color-text-title: #fdfffe; --color-text-author: #ffe0ec; --color-selected-block: #efb4c8; --color-collection-block: #f6bbcf; --color-collection-header: #797073; --color-surface: #ffffff; --color-accent: var(--color-rating); --color-border: #f0d8e2; --color-heading: var(--color-text-main); --color-notification: #f6bbcf; --color-tab-active-bg: #e9598e; --color-tab-active-text: #fdfffe; } body.theme-light_pink { /* Точная копия розовой темы — единственное отличие: цвет заголовков. */ --color-bg: #fdf2f6; --color-text-main: #797073; --color-toggle: #f6bbcf; --color-rating: #e9598e; --color-tag-bg: #f6e2ea; --color-btn-collapse: #797375; --color-text-desc: #999093; --color-text-title: #fdfffe; --color-text-author: #ffe0ec; --color-selected-block: #efb4c8; --color-collection-block: #f6bbcf; --color-collection-header: #797073; --color-surface: #ffffff; --color-accent: var(--color-rating); --color-border: #f0d8e2; --color-heading: #fdfffe; --color-notification: #f6bbcf; --color-tab-active-bg: #e9598e; --color-tab-active-text: #fdfffe; } body.theme-gray { /* Светло-серая тема: та же структура переменных, нейтральная палитра. */ --color-bg: #f4f4f5; --color-text-main: #55565a; --color-toggle: #c7c9cf; --color-rating: #6b6f76; --color-tag-bg: #ececee; --color-btn-collapse: #55565a; --color-text-desc: #8a8b8e; --color-text-title: #fdfffe; --color-text-author: #eceef2; --color-selected-block: #d3d5da; --color-collection-block: #d7d9dc; --color-collection-header: #5a5d63; --color-surface: #ffffff; --color-accent: #6b6f76; --color-border: #e1e2e5; --color-heading: var(--color-text-main); --color-notification: #e4e5e8; --color-tab-active-bg: #6b6f76; --color-tab-active-text: #fdfffe; } body { background-color: var(--color-bg); color: var(--color-text-main); font-family: "Montserrat", sans-serif; } /* Bulma defaults most text/UI elements to near-black ($text / $grey-darker). Override broadly so nothing black leaks through regardless of theme. */ .title, .title strong, .subtitle, .subtitle strong { color: var(--color-heading) !important; } body, p, li, td, th, label, .navbar-item, .navbar-link, .navbar-item a, .table, .table td, .table th, .button:not(.is-danger):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning), .content, .box, .select select { color: var(--color-text-main); } .table thead th, .table thead th a, .table th, .table th a, .table thead tr th, .table thead tr th a { color: var(--color-text-desc) !important; font-weight: 600; } input[type="checkbox"], .checkbox input[type="checkbox"], .book-checkbox, .form-check-input { accent-color: #e9598e !important; color: #e9598e !important; } input[type="checkbox"]:checked, .checkbox input[type="checkbox"]:checked, .book-checkbox:checked, .form-check-input:checked { accent-color: #e9598e !important; background-color: #e9598e !important; border-color: #e9598e !important; } a { color: var(--color-rating); } /* --- Book card, styled after the uploaded reference screenshot --- */ .book-card { background: var(--color-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: transform 0.15s ease; } .book-card:hover { transform: translateY(-2px); } .book-card.is-selected { background-color: var(--color-selected-block); } .book-card__cover-wrap { position: relative; background: linear-gradient(135deg, var(--color-selected-block), var(--color-bg)); padding: 1.25rem; border-radius: 16px 16px 0 0; width: 100%; aspect-ratio: 1 / 1.4; display: flex; align-items: center; justify-content: center; } .book-card__title { color: var(--color-text-title); font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .book-card__author { color: var(--color-text-author); } .book-card__cover { border-radius: 10px; width: 100%; height: 100%; aspect-ratio: 1 / 1.4; object-fit: cover; display: block; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); background: var(--color-border); } .book-card__desc { color: var(--color-text-desc); } .tag-pill { background-color: var(--color-tag-bg); color: var(--color-text-main); border-radius: 999px; padding: 0.15rem 0.75rem; font-size: 0.8rem; display: inline-block; } .rating-stars .icon { color: var(--color-rating); } .rating-stars .icon.is-empty { color: #e3d9dd; } .btn-collapse { color: var(--color-btn-collapse); background: none; border: none; cursor: pointer; } .toggle-switch { accent-color: var(--color-toggle); } /* --- "Hero" block — big rounded gradient panel behind the title/cover/key stats, used on book & author detail pages and in year-wrapped. --- */ .hero-block { background: linear-gradient(160deg, var(--color-selected-block), var(--color-bg)); border-radius: 24px; padding: 2rem; } .hero-block .title, .hero-block .title strong { color: var(--color-text-title) !important; } /* --- Reader-specific text backgrounds (deliberately keep near-black/white text here — these are reading-mode presets like an e-reader, independent of the site's pink/gray theme). --- */ .reader-bg-theme { background-color: var(--color-bg); color: var(--color-text-main); } .reader-bg-sepia { background-color: #f4ecd8; color: #5b4636; } .reader-bg-light { background-color: #ffffff; color: #2b2b2b; } .reader-bg-dark { background-color: #1e1e1e; color: #e6e6e6; } .calendar-cell img { border-radius: 6px; width: 100%; height: auto; } .author-badge { border-radius: 999px; padding: 0.1rem 0.6rem; color: #4a4a4a; font-weight: 600; } .achievement-card.is-locked { filter: grayscale(1); opacity: 0.55; } @media screen and (max-width: 768px) { .achievement-card { padding: 0.6rem 0.45rem; font-size: 0.78rem; } .achievement-card .icon.is-large { height: 1.5rem; width: 1.5rem; margin-bottom: 0.2rem; } #achievements-grid.columns, #shelf-books.columns { margin-left: -0.3rem; margin-right: -0.3rem; } #achievements-grid .column, #shelf-books .column { padding: 0.3rem; } #achievements-grid .column.is-6-mobile, #shelf-books .column.is-6-mobile { padding-left: 0.25rem; padding-right: 0.25rem; } .book-card__cover-wrap { padding: 0.45rem; aspect-ratio: 1 / 1.4; width: 100%; display: flex; align-items: center; justify-content: center; max-width: 160px; margin: 0 auto; } #shelf-books .book-card { min-width: 0; } #shelf-books .book-card__cover { max-height: 160px; width: auto; height: auto; display: block; } #shelf-books .book-card__cover-wrap { justify-content: center; } } .reading-day-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--color-border); } .reading-day-dot.is-active { background: var(--color-rating); } .star-rating-input { display: inline-flex; align-items: center; } .star-rating-star { cursor: pointer; font-size: 1.5rem; color: #e3d9dd; margin-right: 0.2rem; } .star-rating-star input { position: absolute; opacity: 0; pointer-events: none; } .star-rating-star.is-filled { color: var(--color-rating); } .star-rating-clear { color: var(--color-text-desc); } /* --- Notifications: theme color instead of Bulma's default gray --- */ .notification { background-color: var(--color-notification); color: var(--color-text-main); } /* --- Active tab highlight (shelf tabs, etc.) --- */ .tabs.is-boxed li.is-active a { background-color: var(--color-tab-active-bg) !important; border-color: var(--color-tab-active-bg) !important; color: var(--color-tab-active-text) !important; font-weight: 700; } .tabs.is-boxed a { color: var(--color-text-main); } /* --- Active main navbar section (Сводная таблица, Авторы, etc.) --- */ .navbar-item.is-current-section { background-color: #e9598e !important; color: #fdfffe !important; border-radius: 6px; } /* --- "Добавить на полку" — позиционируется через JS (fixed), чтобы не обрезаться краем узкой карточки/экрана на мобильном. --- */ .add-to-shelf-dropdown .dropdown-menu { position: fixed; min-width: 180px; max-width: 85vw; } .add-to-shelf-dropdown .dropdown-item { /* Bulma задаёт dropdown-item как white-space: nowrap по умолчанию — из-за этого длинное название полки не переносилось и обрезалось, даже когда сам попап уже не зависел от ширины карточки. */ white-space: normal; word-break: break-word; } /* --- Custom multi-value autocomplete (author/tag inputs in book form) --- */ .autocomplete-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); z-index: 30; max-height: 220px; overflow-y: auto; } .autocomplete-suggestion { padding: 0.4rem 0.75rem; cursor: pointer; color: var(--color-text-main); } .autocomplete-suggestion:hover { background: var(--color-selected-block); } .gong-shou-icon { color: var(--color-rating); } /* --- Мобильная адаптация --- */ @media screen and (max-width: 768px) { .section { padding: 1.25rem 0.75rem; } body { overflow-x: hidden; } .navbar-item { padding-left: 0.75rem; padding-right: 0.75rem; } .tabs.is-boxed { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tabs.is-boxed ul { display: flex; flex-wrap: nowrap; min-width: max-content; white-space: nowrap; } .tabs.is-boxed li { flex: 0 0 auto; } .level.mb-4.shelf-controls { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5rem !important; width: 100%; } .level.mb-4.shelf-controls .level-left, .level.mb-4.shelf-controls .level-right { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0.5rem !important; } .level.mb-4.shelf-controls .level-left { flex: 1 1 auto; } .level.mb-4.shelf-controls .level-right { flex: 0 0 auto; } .level.mb-4.shelf-controls .level-item { margin-right: 0 !important; flex: 0 0 auto !important; } .level.mb-4.shelf-controls form.level-item { flex: 1 1 auto !important; min-width: 0; } .level.mb-4.shelf-controls .field.has-addons { display: flex !important; flex-wrap: nowrap !important; min-width: 0; width: 100%; } .level.mb-4.shelf-controls .field.has-addons .control:first-child { flex: 1 1 auto; min-width: 0; } .level.mb-4.shelf-controls .field.has-addons input { width: 100% !important; min-width: 0; max-width: none; } .level.mb-4.shelf-controls .select select { max-width: 11rem; } /* Полки: 2 карточки в ряд — звёзды рейтинга (5 штук) должны помещаться в одну строку. Отступ от края даём через padding на .column (безопасно для grid-математики Bulma), а не через margin на .columns — тот ломает её встроенные отрицательные отступы и раньше приводил к тому, что вторая карточка переносилась на новую строку вместо 2 в ряд. */ #shelf-books.columns { display: flex; flex-wrap: wrap; } #shelf-books .column.is-6-mobile { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0.2rem 0.2rem 0.2rem 0.35rem; } .rating-stars .icon { width: 1rem; height: 1rem; } .rating-stars .icon .fa-star { font-size: 0.8rem; } } .cell-collapsible summary { cursor: pointer; color: var(--color-rating); font-size: 0.8rem; }