itube-specs 0.0.1018 → 0.0.1021

package/SITE_UPDATES.md

@@ -11,6 +11,33 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1021 — 2026-10-08
+
+- **Сайтам со своей темой** (`assets/scss/vars/_theme.scss` в сайте, как у hdsex-remaster): завести токены
+  нового инфо-блока модели — как в `themes/dark/_theme.scss` слоя: `$info-model-about-title`,
+  `$info-model-about-text`, `$info-model-summary-bg`, `$info-model-summary-bg--hover`, `$info-model-summary-text`,
+  `$info-model-summary-icon`, `$info-grid-item-value`. Удалены (можно убрать): `$info-model-border`,
+  `$info-model-bg`, `$info-model-footer-border`. По макету: `$info-model-description` → `$color-zinc-300`,
+  `$info-grid-item-title` → `$color-zinc-450`. Не завести — сборка падает на undefined variable.
+- **Сайтам с форком `components/view/model-videos.vue`:** убрать `<LazyUiFullDescr>` с `fullDescription` внизу
+  страницы — длинное описание теперь показывает `InfoModel` в блоке «About». Не убрать — текст на странице
+  задублируется.
+
+## 0.0.1019 — 2026-10-08
+
+- **Сайтам со своей темой** (`assets/scss/vars/_theme.scss` в сайте, как у hdsex-remaster): завести токены
+  строки над плеером и описания — как в `themes/dark/_theme.scss` слоя:
+  `$player-tags-chip-bg`, `$player-tags-tag-bg`, `$player-tags-more-text`, `$player-tags-more-text--hover`,
+  `$video-info-handler-text--hover`. Плюс по макету изменились значения: `$video-channel-bg` → `$color-zinc-800`,
+  `$video-info-handler-text` → `$color-zinc-500`. Не завести — сборка падает на undefined variable. Образец —
+  коммит hdsex-remaster с переходом на эту версию.
+- **Сайтам с форком `components/view/video.vue`:** строку над плеером `<UiExpandRow …>` заменить на
+  `<PlayerTags …>` (те же `items` и слот `prepend`) — новая раскладка по макету: «More +N» после влезших чипсов,
+  теги светлее категорий, на мобиле строка листается. Не заменить — у сайта останется старая строка.
+- **Сайтам с хуком попандера на карточке видео** (`pu-trigger` на `<CardVideo>`): класс перенести в проп
+  `link-class="pu-trigger"` — он ляжет только на ссылки на ролик (превью и тайтл), меню и кнопки карточки
+  перестанут открывать попандер. Остальным — ничего.
+
 ## 0.0.1013 — 2026-10-07
 
 - **Всем сайтам — чистка своих переводов (`i18n/locales/*.json`, во всех локалях):** образец —

package/assets/scss/base/_normalize.scss

@@ -4,8 +4,7 @@
     box-sizing: border-box;
 }
 
-ul[class],
-ol[class] {
+:where(ul[class], ol[class]) {
     padding: 0;
 }
 
@@ -15,8 +14,7 @@ h2,
 h3,
 h4,
 p,
-ul[class],
-ol[class],
+:where(ul[class], ol[class]),
 li,
 figure,
 figcaption,
@@ -33,8 +31,7 @@ body {
     line-height: 1.5;
 }
 
-ul[class],
-ol[class] {
+:where(ul[class], ol[class]) {
     list-style: none;
 }
 

package/assets/scss/themes/dark/_theme.scss

@@ -238,7 +238,8 @@ $video-menu-preview-border: $color-zinc-800;
 
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;
-$video-info-handler-text: $color-zinc-400;
+$video-info-handler-text: $color-zinc-500;
+$video-info-handler-text--hover: $color-white;
 $video-info-description-text: $color-zinc-400;
 
 // ─── Video interface ───
@@ -253,7 +254,7 @@ $video-interface-mobile-label: $color-zinc-300;
 $video-interface-mobile-border: $color-zinc-800;
 
 // ─── Video channel ───
-$video-channel-bg: $color-zinc-800-60;
+$video-channel-bg: $color-zinc-800;
 $video-channel-initials-gradient-from: $color-indigo-500;
 $video-channel-initials-gradient-to: $color-purple-600;
 $video-channel-initials-text: $color-white;
@@ -813,8 +814,9 @@ $filters-main-bg--hover: $color-zinc-700-70;
 $info-grid-group-title: $color-zinc-300;
 $info-grid-item-border: $color-zinc-700-50;
 $info-grid-item-bg--hover: $color-zinc-700-30;
-$info-grid-item-title: $color-zinc-500;
+$info-grid-item-title: $color-zinc-450;
 $info-grid-item-title-bg: $color-zinc-900;
+$info-grid-item-value: $color-zinc-300;
 $info-grid-item-value-bg: $color-zinc-900;
 $info-grid-item-value-bg--link: $color-zinc-700-50;
 $info-grid-item-value-link-bg--hover: $color-zinc-700-50;
@@ -831,11 +833,14 @@ $info-img-border: $color-zinc-700;
 $info-description: $color-zinc-400;
 
 // ─── Info model ───
-$info-model-border: $color-zinc-800-50;
-$info-model-bg: $color-zinc-900-50;
 $info-model-img-bg: $color-zinc-800;
-$info-model-description: $color-zinc-400;
-$info-model-footer-border: $color-zinc-800-50;
+$info-model-description: $color-zinc-300;
+$info-model-about-title: $color-zinc-300;
+$info-model-about-text: $color-zinc-400;
+$info-model-summary-bg: $color-zinc-700-50;
+$info-model-summary-bg--hover: $color-zinc-700;
+$info-model-summary-text: $color-white;
+$info-model-summary-icon: $color-zinc-400;
 $info-model-more-text: $color-zinc-500;
 $info-model-more-text--hover: $color-zinc-300;
 $info-model-also: $color-zinc-400;
@@ -1171,3 +1176,9 @@ $switcher-subtitle--active: $color-white-60;
 $card-webcam-languages-border: $color-white-20;
 $card-webcam-languages-fallback-bg: $color-zinc-800;
 $card-webcam-languages-fallback-icon: $color-zinc-300;
+
+// ─── Player tags (строка над плеером) ───
+$player-tags-chip-bg: $color-zinc-800;
+$player-tags-tag-bg: $color-zinc-800-50;
+$player-tags-more-text: $color-zinc-400;
+$player-tags-more-text--hover: $color-white;

package/assets/scss/themes/light/_theme.scss

@@ -295,6 +295,7 @@ $video-menu-preview-border: transparent;
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;
+$video-info-handler-text--hover: $color-gray-900;
 $video-info-description-text: $color-gray-700;
 
 // ─── Video interface ───
@@ -842,6 +843,7 @@ $info-grid-item-border: $color-gray-300;
 $info-grid-item-bg--hover: $color-slate-700;
 $info-grid-item-title: $color-gray-500;
 $info-grid-item-title-bg: $color-white;
+$info-grid-item-value: $color-gray-900;
 $info-grid-item-value-bg: $color-gray-100;
 $info-grid-item-value-bg--link: $color-slate-700;
 $info-grid-item-value-link-bg--hover: $color-slate-750;
@@ -858,11 +860,14 @@ $info-img-border: transparent;
 $info-description: $color-gray-600;
 
 // ─── Info model ───
-$info-model-border: transparent;
-$info-model-bg: $color-gray-200;
 $info-model-img-bg: $color-gray-300;
 $info-model-description: $color-gray-600;
-$info-model-footer-border: $color-gray-300;
+$info-model-about-title: $color-gray-600;
+$info-model-about-text: $color-gray-600;
+$info-model-summary-bg: $color-slate-700;
+$info-model-summary-bg--hover: $color-slate-750;
+$info-model-summary-text: $color-white;
+$info-model-summary-icon: $color-gray-400;
 $info-model-more-text: $color-gray-600;
 $info-model-more-text--hover: $color-gray-600;
 $info-model-also: $color-gray-600;
@@ -1198,3 +1203,9 @@ $switcher-subtitle--active: $color-white-60;
 $card-webcam-languages-border: $color-gray-300;
 $card-webcam-languages-fallback-bg: $color-gray-200;
 $card-webcam-languages-fallback-icon: $color-gray-600;
+
+// ─── Player tags (строка над плеером) ───
+$player-tags-chip-bg: $color-gray-200;
+$player-tags-tag-bg: $color-gray-100;
+$player-tags-more-text: $color-gray-700;
+$player-tags-more-text--hover: $color-gray-900;

package/components/card/video/index.vue

@@ -13,6 +13,7 @@
   >
     <NuxtLink
       :to="link"
+      :class="linkClass"
       class="card-video__poster-wrapper"
       @mouseenter.passive="startPreviewByHover(previewId)"
       @mouseleave.passive="stopPreviewByHover(previewId)"
@@ -91,6 +92,7 @@
       <NuxtLink
         :to="link"
         :title="card.title"
+        :class="linkClass"
         class="card-video__title _truncate"
       >{{ card.title }}
       </NuxtLink>
@@ -153,6 +155,8 @@ const props = defineProps<{
   history?: boolean
   /** Развилка мета-строки истории: вместо «когда смотрели» — сколько осталось до конца («Продолжить просмотр») */
   remaining?: boolean
+  /** Класс на ссылки на ролик (превью и тайтл) — например хук попандера сайта, чтобы меню и кнопки карточки его не задевали */
+  linkClass?: string
 }>();
 
 const emit = defineEmits<{

package/components/card/webcam/index.vue

@@ -677,9 +677,7 @@ onBeforeUnmount(() => {
   }
 }
 
-// селектор с родителем не случайно: ресет обнуляет отступы у `ul[class]`, и
-// одиночного класса ему не хватает
-.card-webcam > .card-webcam__tags {
+.card-webcam__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
@@ -688,7 +686,7 @@ onBeforeUnmount(() => {
 
 // на узких экранах теги в один ряд с горизонтальным скроллом: в две колонки они
 // не влезают, а перенос делал карточки в сетке разной высоты
-.card-webcam > .card-webcam__tags {
+.card-webcam__tags {
   @include to-br(xm) {
     flex-wrap: nowrap;
     overflow-x: auto;

package/components/info/grid.vue

@@ -26,7 +26,7 @@
             :is="item.isFilter && value ? NuxtLink : 'div'"
             :key="`s-info-grid-value-${gIndex}-${index}-${vIndex}`"
             :class="{'--link': item.isFilter && value}"
-            :to="item.isFilter && value ? generateLink(link(item, value.name)) : undefined"
+            :to="item.isFilter && value ? generateLink(modelFilterLink(item, value.name)) : undefined"
             class="info-grid__item"
           >
             <span
@@ -67,7 +67,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IGroupedParameter, IGroupedParameterItem } from '../../types';
+import type { IGroupedParameter } from '../../types';
+import { modelFilterLink } from '../../utils/info-grid/model-filter-link';
 
 defineProps<{
   groups: IGroupedParameter[]
@@ -84,16 +85,6 @@ const NuxtLink = resolveComponent('NuxtLink');
 const { hiddenByUnits } = useUnits();
 const { generateLink } = useGenerateLink();
 
-function link(item: IGroupedParameterItem, value: string) {
-  const formattedValue = value.toLowerCase().replace(/\s+/g, '+');
-
-  if (item.kind === 'range') {
-    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
-  } else {
-    return `/models?filter_${item.name}=${formattedValue}`;
-  }
-}
-
 function isSuccess(value: string) {
   const values = ['active'];
   return values.includes(value);
@@ -108,7 +99,7 @@ function isWarning(value: string) {
 <style lang="scss">
 .info-grid {
   display: grid;
-  row-gap: 28px;
+  row-gap: 20px;
 }
 
 .info-grid__group-title {
@@ -116,9 +107,9 @@ function isWarning(value: string) {
 
   margin-bottom: 12px;
   color: $info-grid-group-title;
-  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
   text-transform: uppercase;
-  font-weight: 500;
 }
 
 .info-grid__group-items {
@@ -133,14 +124,16 @@ function isWarning(value: string) {
 
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
+  height: 36px;
   border-radius: $radius-lg;
   border: 1px solid $info-grid-item-border;
   overflow: hidden;
 }
 
 .info-grid__item-title {
-  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  padding-inline: 10px;
   color: $info-grid-item-title;
   background-color: $info-grid-item-title-bg;
 }
@@ -150,7 +143,7 @@ function isWarning(value: string) {
   flex-wrap: nowrap;
   align-items: center;
   column-gap: 4px;
-  padding: 6px 10px;
+  padding-inline: 10px;
 }
 
 .info-grid__item.--link {
@@ -175,10 +168,14 @@ function isWarning(value: string) {
 }
 
 .info-grid__item:not(.--link) .info-grid__item-value {
-  border-left: 1px solid $info-grid-item-value-border;
+  color: $info-grid-item-value;
   background-color: $info-grid-item-value-bg;
 }
 
+.info-grid__item:not(.--link) .info-grid__item-title + .info-grid__item-value {
+  border-left: 1px solid $info-grid-item-value-border;
+}
+
 .info-grid__item:not(.--link) .info-grid__item-title {
   background-color: $info-grid-item-value-bg;
 }
@@ -203,6 +200,9 @@ function isWarning(value: string) {
 .info-grid__plain-text {
   @include font-sm;
 
+  max-width: 740px;
+  margin-block: -6px;
   color: $info-grid-plain-text;
+  line-height: 1.625;
 }
 </style>