Поиск по тегам

2025-11-03 02:56:11 +03:00
parent 6b68df95dc
commit f3577b0128
6 changed files with 7 additions and 3 deletions
--- a/static/css/manga_view.css
+++ b/static/css/manga_view.css
@@ -0,0 +1,187 @@
+/* Базовые стили */
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f8f9fa;
+}
+
+.main-container {
+    margin: 0 auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    align-items: center;
+    background-color: #ffffff;
+    justify-content: center;
+
+
+}
+
+.frame_content{
+    min-height: 100vh;
+    width: 50%;
+    place-items: center;
+    background-color: #cee6fd;
+    flex-direction: column;
+
+}
+
+/* Хедер */
+.navigation-box {
+    padding: 15px 0;
+    margin-bottom: 0;
+    width: 100%;
+    border-bottom: dashed #ffffff;
+
+}
+
+.breadcrumb {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    flex-wrap: wrap;
+}
+
+.breadcrumb a, .breadcrumb span {
+    margin: 0 5px;
+    white-space: nowrap;
+}
+
+/* Основное содержимое */
+.content-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+
+
+/* Контейнер сетки */
+.manga-grid-container {
+    width: 100%;
+    overflow-x: auto; /* На случай узких экранов */
+}
+
+/* Сетка превью */
+.grid-container {
+    width: 100%;
+    margin: 20px;
+}
+
+.manga-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+    gap: var(--grid-gap); /* Фиксированный отступ */
+    justify-items: center;
+    max-width: calc(
+        (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
+        (var(--grid-gap) * (var(--grid-columns) - 1))
+    );
+}
+
+/* Элементы превью */
+.manga-preview {
+    width: calc(var(--preview-base-width) * var(--preview-scale));
+    height: calc(var(--preview-base-height) * var(--preview-scale));
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: transform 0.3s;
+}
+
+.manga-preview:hover {
+    transform: scale(1.05);
+}
+
+.manga-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+/* Страница манги */
+.image-scaling-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
+}
+
+.scalable-image {
+    width: calc(100% * var(--page-scale));
+    height: auto;
+    max-width: 100%;
+    object-fit: contain;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
+}
+/* Футер */
+.footer-navigation {
+    margin-top: 0;
+    padding: 15px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+    border-top: dashed #ffffff;
+
+}
+
+.dropdown-box select {
+    padding: 8px 15px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    min-width: 200px;
+    max-width: 100%;
+}
+
+.page-buttons {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.nav-button {
+    padding: 8px 15px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #333;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.nav-button:hover {
+    background: #e0e0e0;
+}
+
+/* Адаптивность */
+@media (max-width: 1200px) {
+    :root { --grid-columns: 4; }
+}
+
+@media (max-width: 768px) {
+    :root {
+        --grid-columns: 3;
+        --preview-scale: 0.7;
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        --grid-columns: 2;
+        --grid-gap: 10px; /* Можно уменьшить для мобилок */
+    }
+}