@kaikybrofc/omnizap-system 2.1.8

package/public/css/styles.css

@@ -0,0 +1,671 @@
+:root {
+  color-scheme: dark;
+  --bg: #0b1120;
+  --bg-2: #101a30;
+  --card: rgba(17, 28, 48, 0.9);
+  --line: #273d63;
+  --line-soft: #304c7a;
+  --text: #e8eef8;
+  --muted: #9aacc9;
+  --primary: #24bb69;
+  --primary-strong: #189858;
+  --primary-2: #7aa8ff;
+}
+
+body.catalog-body {
+  font-family: "Manrope", "Bricolage Grotesque", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(58rem 24rem at -8% -12%, rgba(34, 197, 94, 0.14), transparent 60%),
+    radial-gradient(58rem 24rem at 112% -10%, rgba(56, 189, 248, 0.14), transparent 58%),
+    linear-gradient(165deg, var(--bg), var(--bg-2));
+  min-height: 100vh;
+  background-attachment: fixed;
+}
+
+body.catalog-body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
+  background-size: 26px 26px;
+  opacity: 0.2;
+  z-index: -1;
+}
+
+.glass-nav {
+  backdrop-filter: blur(12px);
+  background: rgba(10, 17, 33, 0.84);
+  border-color: #223250 !important;
+}
+
+.navbar-brand,
+.nav-link {
+  color: var(--text) !important;
+}
+
+.navbar-brand {
+  font-weight: 700;
+  letter-spacing: 0.1px;
+}
+
+.nav-link {
+  opacity: 0.9;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 0.44rem 0.72rem !important;
+  transition: 180ms ease;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+  opacity: 1;
+  border-color: #355688;
+  background: #0f1b33;
+  color: #dff0ff !important;
+}
+
+.hero-card {
+  border-color: var(--line-soft) !important;
+  background: linear-gradient(155deg, rgba(12, 22, 42, 0.97), rgba(15, 27, 51, 0.97));
+  box-shadow: 0 18px 50px rgba(4, 9, 20, 0.42);
+}
+
+.hero-card .card-body {
+  padding-block: clamp(1.3rem, 2.5vw, 2.2rem) !important;
+}
+
+.catalog-title,
+.section-title,
+#panel-title {
+  font-family: "Sora", "Instrument Serif", serif;
+  color: var(--text);
+}
+
+.catalog-title {
+  font-size: clamp(1.7rem, 4vw, 2.5rem);
+  line-height: 1.07;
+  max-width: 760px;
+}
+
+.status-text {
+  color: var(--muted);
+  min-height: 20px;
+}
+
+.panel-controls {
+  border: 1px solid var(--line);
+  background: rgba(13, 21, 40, 0.88);
+}
+
+.form-control,
+.form-select {
+  background: #0f1729;
+  border-color: var(--line);
+  color: var(--text);
+  border-radius: 14px;
+  min-height: 46px;
+}
+
+.search-wrap {
+  position: relative;
+}
+
+.search-input-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #8aa3c8;
+  pointer-events: none;
+}
+
+#search-input {
+  padding-left: 36px;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #3f5f90;
+  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.16);
+  background: #111b31;
+  color: var(--text);
+}
+
+#categories-input {
+  display: none !important;
+}
+
+.categories-picker {
+  border: 1px solid #345381;
+  border-radius: 14px;
+  background: linear-gradient(160deg, rgba(13, 24, 45, 0.98), rgba(9, 18, 34, 0.98));
+  box-shadow: inset 0 1px 0 rgba(158, 191, 245, 0.08);
+  padding: 0.45rem;
+  min-height: 104px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.38rem;
+}
+
+.categories-picker:focus-within {
+  border-color: #4c72ac;
+  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(190, 214, 255, 0.12);
+}
+
+.categories-search-wrap {
+  position: relative;
+}
+
+.categories-search-icon {
+  position: absolute;
+  left: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #88a4cd;
+  pointer-events: none;
+}
+
+.categories-search-input {
+  min-height: 34px;
+  font-size: 0.86rem;
+  border-radius: 10px;
+  padding-left: 30px;
+}
+
+.categories-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.28rem;
+  min-height: 24px;
+}
+
+.categories-empty {
+  color: #94a8c7;
+  font-size: 0.75rem;
+}
+
+.category-chip {
+  border: 1px solid rgba(114, 154, 220, 0.56);
+  background: linear-gradient(130deg, rgba(19, 40, 72, 0.94), rgba(15, 30, 56, 0.94));
+  color: #dcedff;
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.34rem;
+  padding: 0.2rem 0.46rem;
+  cursor: pointer;
+}
+
+.category-chip:hover,
+.category-chip:focus-visible {
+  border-color: rgba(146, 183, 240, 0.8);
+  background: linear-gradient(130deg, rgba(24, 47, 84, 0.96), rgba(18, 35, 66, 0.96));
+}
+
+.category-chip-remove {
+  font-size: 0.66rem;
+  opacity: 0.9;
+}
+
+.categories-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.3rem;
+  max-height: 120px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.category-option {
+  border: 1px solid #33527e;
+  background: rgba(16, 30, 54, 0.88);
+  color: #d7e7fb;
+  border-radius: 10px;
+  font-size: 0.74rem;
+  line-height: 1.1;
+  min-height: 28px;
+  padding: 0.28rem 0.4rem;
+  text-align: left;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+  cursor: pointer;
+}
+
+.category-option:hover,
+.category-option:focus-visible {
+  border-color: #4a74ab;
+  background: rgba(22, 39, 68, 0.94);
+}
+
+.category-option-check {
+  opacity: 0;
+  transform: scale(0.7);
+  transition: 140ms ease;
+}
+
+.category-option.selected {
+  border-color: rgba(49, 180, 112, 0.72);
+  background: linear-gradient(90deg, rgba(30, 168, 99, 0.36), rgba(23, 124, 76, 0.36));
+  color: #e9fff4;
+}
+
+.category-option.selected .category-option-check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.categories-options-empty {
+  color: #93a7c7;
+  font-size: 0.76rem;
+  padding: 0.18rem 0.3rem;
+}
+
+.categories-options::-webkit-scrollbar {
+  width: 8px;
+}
+
+.categories-options::-webkit-scrollbar-track {
+  background: rgba(14, 24, 43, 0.8);
+  border-radius: 999px;
+}
+
+.categories-options::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #3a5e92, #284874);
+  border-radius: 999px;
+  border: 1px solid rgba(14, 24, 43, 0.85);
+}
+
+.btn-success {
+  background: linear-gradient(90deg, var(--primary), var(--primary-strong));
+  border-color: transparent;
+  color: #062411;
+  font-weight: 700;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(24, 152, 88, 0.24);
+  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  background: linear-gradient(90deg, #21b965, #178d55);
+  color: #041a0c;
+  transform: translateY(-1px);
+  box-shadow: 0 14px 30px rgba(24, 152, 88, 0.3);
+  filter: saturate(0.95);
+}
+
+.btn-outline-light {
+  border-color: #3d557f;
+  color: #d5e4fb;
+}
+
+.btn-outline-light:hover,
+.btn-outline-light:focus {
+  background: #1a2742;
+  border-color: #4a6696;
+  color: #eff6ff;
+}
+
+.pack-card {
+  cursor: pointer;
+  background: rgba(16, 26, 44, 0.96) !important;
+  border-color: var(--line-soft) !important;
+  border-radius: 14px !important;
+  overflow: hidden;
+  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
+  animation: fadeInUp 260ms ease both;
+}
+
+.pack-card .card-body {
+  padding: 0.75rem;
+}
+
+.pack-card:nth-child(2n) {
+  animation-delay: 0.03s;
+}
+
+.pack-card:nth-child(3n) {
+  animation-delay: 0.06s;
+}
+
+.pack-card:hover,
+.pack-card:focus-visible {
+  transform: translateY(-4px);
+  border-color: #5171a6 !important;
+  box-shadow: 0 0 0 1px rgba(122, 168, 255, 0.22), 0 18px 36px rgba(0, 0, 0, 0.4);
+}
+
+.pack-card .card-title {
+  font-size: 0.92rem;
+  color: #eaf3ff;
+  line-height: 1.28;
+}
+
+.pack-thumb {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border: 1px solid #2f4a74;
+  border-radius: 0.82rem;
+  overflow: hidden;
+  background: radial-gradient(circle at 20% 20%, rgba(122, 168, 255, 0.2), rgba(9, 15, 30, 0.95));
+  display: grid;
+  place-items: center;
+}
+
+.pack-thumb::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(8, 14, 28, 0.32), rgba(8, 14, 28, 0));
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
+.pack-card:hover .pack-thumb::after,
+.pack-card:focus-visible .pack-thumb::after {
+  opacity: 1;
+}
+
+.pack-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pack-visibility-badge,
+.pack-count-badge {
+  position: absolute;
+  z-index: 2;
+  font-size: 0.63rem;
+  line-height: 1;
+  border-radius: 999px;
+  padding: 0.34rem 0.48rem;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(116, 151, 214, 0.42);
+}
+
+.pack-visibility-badge {
+  top: 8px;
+  left: 8px;
+  color: #d5e7ff;
+  background: rgba(15, 26, 49, 0.78);
+}
+
+.pack-count-badge {
+  right: 8px;
+  bottom: 8px;
+  color: #dbf8e8;
+  background: rgba(19, 52, 35, 0.78);
+  border-color: rgba(61, 180, 119, 0.45);
+}
+
+.pack-thumb-fallback {
+  color: #9eb2d2;
+  font-size: 0.75rem;
+  text-align: center;
+  padding: 0.6rem;
+}
+
+.pack-meta {
+  color: #a7b9d8;
+  font-size: 0.73rem;
+  line-height: 1.28;
+}
+
+.pack-count {
+  color: #d5e6ff;
+  font-weight: 700;
+}
+
+.pack-author {
+  color: #8ea6cb;
+}
+
+.orphan-card {
+  border: 1px solid #334b72;
+  background: linear-gradient(165deg, rgba(17, 26, 46, 0.95), rgba(14, 22, 40, 0.95));
+  position: relative;
+}
+
+.orphan-card img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
+  border-radius: 0.5rem;
+  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.13), rgba(7, 12, 24, 0.95));
+}
+
+.orphan-meta {
+  font-size: 0.75rem;
+  color: #b9c9e4;
+  word-break: break-word;
+}
+
+.sticker-tile {
+  border: 1px solid #334b72;
+  background: linear-gradient(165deg, rgba(17, 26, 46, 0.95), rgba(14, 22, 40, 0.95));
+  border-radius: 0.75rem;
+  padding: 0.5rem;
+  position: relative;
+}
+
+.sticker-tile img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
+  border-radius: 0.5rem;
+  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.13), rgba(7, 12, 24, 0.95));
+}
+
+#pack-page-stickers .sticker-tile {
+  min-height: 120px;
+}
+
+.sticker-tags {
+  position: static;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.28rem;
+  max-width: 100%;
+  margin-top: 0.42rem;
+  margin-bottom: 0.2rem;
+}
+
+.sticker-tag {
+  font-size: 0.62rem;
+  line-height: 1;
+  padding: 0.24rem 0.42rem;
+  border-radius: 999px;
+  color: #eff7ff;
+  background: linear-gradient(120deg, rgba(16, 31, 57, 0.92), rgba(28, 53, 94, 0.9));
+  border: 1px solid rgba(111, 151, 220, 0.62);
+  box-shadow: 0 6px 14px rgba(2, 8, 22, 0.34), inset 0 1px 0 rgba(190, 216, 255, 0.2);
+  backdrop-filter: blur(6px);
+  text-transform: lowercase;
+  letter-spacing: 0.015em;
+  font-weight: 600;
+}
+
+.pack-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.1rem;
+}
+
+.pack-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.2rem 0.44rem;
+  font-size: 0.62rem;
+  line-height: 1;
+  font-weight: 700;
+  text-transform: lowercase;
+  color: #def0ff;
+  border: 1px solid rgba(108, 151, 219, 0.58);
+  background: linear-gradient(120deg, rgba(13, 26, 48, 0.96), rgba(20, 39, 70, 0.94));
+  box-shadow: inset 0 1px 0 rgba(176, 206, 255, 0.16);
+}
+
+.modal-content {
+  background: #121a2f !important;
+  border-color: var(--line-soft) !important;
+}
+
+#panel-subtitle,
+#panel-page-info,
+#orphan-page-info,
+.text-secondary {
+  color: var(--muted) !important;
+}
+
+.skeleton {
+  border-radius: 0.55rem;
+  background: linear-gradient(90deg, rgba(61, 85, 127, 0.26), rgba(104, 137, 189, 0.28), rgba(61, 85, 127, 0.26));
+  background-size: 220% 100%;
+  animation: shimmer 1.2s linear infinite;
+}
+
+.skeleton-thumb,
+.skeleton-orphan {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+
+.skeleton-line {
+  width: 100%;
+  height: 14px;
+}
+
+.skeleton-line.short {
+  width: 58%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 576px) {
+  .hero-card .card-body {
+    padding: 1.2rem !important;
+  }
+
+  #packs-section #grid {
+    --bs-gutter-x: 0.55rem;
+    --bs-gutter-y: 0.55rem;
+  }
+
+  #packs-section .pack-card .card-body {
+    padding: 0.48rem;
+    gap: 0.3rem !important;
+  }
+
+  #packs-section .pack-card .card-title {
+    font-size: 0.66rem;
+    line-height: 1.18;
+    margin-bottom: 0.1rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  #packs-section .pack-thumb {
+    border-radius: 0.4rem;
+  }
+
+  #packs-section .pack-meta {
+    font-size: 0.56rem;
+    line-height: 1.2;
+  }
+
+  .pack-visibility-badge,
+  .pack-count-badge {
+    font-size: 0.52rem;
+    padding: 0.28rem 0.36rem;
+  }
+
+  .sticker-tags {
+    gap: 0.18rem;
+    margin-top: 0.36rem;
+    margin-bottom: 0.16rem;
+  }
+
+  .sticker-tag {
+    font-size: 0.5rem;
+    padding: 0.18rem 0.28rem;
+  }
+
+  .categories-picker {
+    min-height: 96px;
+    padding: 0.4rem;
+  }
+
+  .categories-options {
+    grid-template-columns: 1fr;
+    max-height: 96px;
+  }
+
+  .category-chip {
+    font-size: 0.62rem;
+    padding: 0.16rem 0.38rem;
+  }
+
+  .category-option {
+    font-size: 0.68rem;
+    min-height: 26px;
+  }
+
+  .pack-tags {
+    gap: 0.2rem;
+  }
+
+  .pack-tag {
+    font-size: 0.5rem;
+    padding: 0.16rem 0.3rem;
+  }
+}
+
+@media (max-width: 430px) {
+  #packs-section .pack-card .card-body {
+    padding: 0.35rem;
+    gap: 0.25rem !important;
+  }
+
+  #packs-section .pack-card .card-title {
+    font-size: 0.62rem;
+    line-height: 1.15;
+    min-height: 1.45rem;
+  }
+
+  #packs-section .pack-meta {
+    font-size: 0.56rem;
+    line-height: 1.15;
+  }
+}