itube-specs 0.0.911 → 0.0.913

package/assets/scss/base/_animations.scss

@@ -2,22 +2,23 @@
 @use '../mixins' as *;
 
 /**
-  Анимация открытия попапов, для анимации открытия попапа обернуть SPopup в transition
+  Анимация открытия попапов, для анимации открытия попапа обернуть попап в transition.
+  Гейты `--no-enter-anim` / `--no-leave-anim` вешает useOverlayStack: появление
+  анимируется только у первого оверлея в стеке, закрытие — только у последнего.
+  Негации завёрнуты в `:where()`, чтобы не поднимать вес селектора — иначе они начинают
+  спорить с правилами компонентов (`.ui-snackbar.v-enter-from` и Ко).
  */
-.v-enter-active,
-.v-leave-active {
-  transition: 100ms ease opacity;
+.v-enter-active:where(:not(.--no-enter-anim)),
+.v-leave-active:where(:not(.--no-leave-anim)) {
+  transition: 200ms linear opacity, 200ms linear transform;
 
   @include from-br(sm) {
     transition: 300ms linear opacity, 200ms linear transform;
   }
 }
 
-.v-enter-from,
-.v-leave-to {
+.v-enter-from:where(:not(.--no-enter-anim)),
+.v-leave-to:where(:not(.--no-leave-anim)) {
   opacity: 0;
-
-  @include from-br(sm) {
-    transform: scale(0.99) translateY(8px);
-  }
+  transform: scale(0.99) translateY(8px);
 }

package/assets/scss/mixins/_font-sizes.scss

@@ -48,9 +48,12 @@
   line-height: 1.333;
 }
 
+@mixin font-3xl {
+  font-size: 30px;
+  line-height: 1.2;
+}
+
 @mixin font-4xl {
   font-size: 36px;
   line-height: 1.111;
 }
-
-

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

@@ -59,8 +59,10 @@ $chips-bg--active: $color-zinc-700;
 $chips-text: $color-zinc-400;
 $chips-text--hover: $color-white;
 $chips-text--active: $color-white;
-$chips-micro-bg: $color-zinc-800;
-$chips-micro-text: $color-zinc-400;
+$chips-micro-bg: $color-zinc-800-80;
+$chips-micro-bg--hover: $color-zinc-700;
+$chips-micro-text: $color-zinc-300;
+$chips-micro-text--hover: $color-white;
 $chips-small-bg: $color-zinc-800-50;
 $chips-small-bg--hover: $color-zinc-700;
 $chips-small-text: $color-zinc-400;
@@ -200,8 +202,8 @@ $video-card-dropdown-icon--hover: $color-white;
 $video-card-secondary: $color-zinc-500;
 $video-card-mini-title: $color-zinc-300;
 $video-card-mini-weight: 400;
-$video-card-user-text: $color-zinc-400;
-$video-card-user-bg: $color-zinc-700;
+$video-card-user-text: $color-zinc-500;
+$video-card-user-bg: $color-zinc-800;
 $video-card-progress-bg: $mono-white-50;
 $video-card-progress-fill: $color-indigo-500;
 $video-card-remaining: $color-indigo-400;
@@ -300,18 +302,18 @@ $like-bar-bg: $color-zinc-700;
 $like-bar-likes: $color-zinc-500;
 
 // ─── Playlist input ───
-$playlist-input-label: $color-white;
-$playlist-input-toggle-icon: $color-zinc-500;
-$playlist-input-toggle-icon--active: $color-zinc-400;
-$playlist-input-hint-text: $color-zinc-900;
-$playlist-input-hint-bg: $color-zinc-600;
-$playlist-input-hint-bg--hover: $color-zinc-500;
+$playlist-input-bg: $color-zinc-900;
 $playlist-input-back: $color-zinc-500;
 $playlist-input-back--hover: $color-white;
-$playlist-input-tooltip-highlight: $color-white;
-$playlist-input-delete-text: $color-red-400;
-$playlist-input-delete-bg: $color-red-500-10;
-$playlist-input-delete-bg--hover: $color-red-500-20;
+$playlist-input-back-bg: $color-zinc-800;
+$playlist-input-back-bg--hover: $color-zinc-700;
+
+// ─── Playlist visibility ───
+$playlist-visibility-icon: $color-zinc-400;
+$playlist-visibility-hint-text: $color-zinc-900;
+$playlist-visibility-hint-bg: $color-zinc-600;
+$playlist-visibility-hint-bg--hover: $color-zinc-500;
+$playlist-visibility-tooltip-highlight: $color-white;
 
 // ─── Playlist add ───
 $playlist-add-item-bg--hover: $color-zinc-800-50;
@@ -324,8 +326,10 @@ $playlist-add-item-edit: $color-zinc-500;
 $playlist-add-item-edit--hover: $color-white;
 
 // ─── Playlist edit ───
-$playlist-edit-border: $color-zinc-800;
-$playlist-edit-icon: $color-indigo-600;
+$playlist-edit-delete-text: $color-red-400;
+$playlist-edit-delete-text--hover: $color-red-300;
+$playlist-edit-confirm-highlight: $color-white;
+$playlist-edit-confirm-note: $color-zinc-500;
 
 // ─── Playlist delete video ───
 $playlist-delete-video-icon: $color-indigo-600;
@@ -554,7 +558,7 @@ $select-border--active: $color-indigo-500;
 
 // ─── Toggle ───
 $toggle-bg: $color-zinc-700;
-$toggle-bg--active: $color-emerald-500;
+$toggle-bg--active: $color-zinc-500;
 $toggle-handle: $mono-white-50;
 $toggle-handle--active: $mono-white-100;
 $toggle-text--disabled: $mono-white-25;
@@ -696,6 +700,7 @@ $filter-popup--active: $color-zinc-400;
 $filter-popup-active-bg: $color-zinc-800;
 $filter-popup-quick-title: $color-zinc-400;
 $filter-popup-group-border: $color-zinc-800;
+$filter-popup-summary-arrow: $color-zinc-400;
 $filter-popup-summary-description: $color-zinc-500;
 $filter-popup-active-chip-bg: $color-indigo-600;
 $filter-popup-active-chip-bg--hover: $color-indigo-500;
@@ -980,7 +985,6 @@ $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
 // ─── Page: playlists ───
-$page-playlists-border: $color-zinc-800;
 
 // ─── Page: channels ───
 $page-channels-border: $color-zinc-800;

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

@@ -72,7 +72,9 @@ $chips-text: $color-gray-700;
 $chips-text--hover: $color-gray-900;
 $chips-text--active: $color-white;
 $chips-micro-bg: $color-gray-300;
+$chips-micro-bg--hover: $color-gray-400;
 $chips-micro-text: $color-gray-700;
+$chips-micro-text--hover: $color-gray-900;
 $chips-small-bg: $color-gray-300;
 $chips-small-bg--hover: $color-gray-400;
 $chips-small-text: $color-gray-700;
@@ -357,18 +359,18 @@ $like-bar-bg: $color-slate-700;
 $like-bar-likes: $color-gray-500;
 
 // ─── Playlist input ───
-$playlist-input-label: $color-white;
-$playlist-input-toggle-icon: $color-gray-500;
-$playlist-input-toggle-icon--active: $color-gray-400;
-$playlist-input-hint-text: $color-gray-900;
-$playlist-input-hint-bg: $color-gray-600;
-$playlist-input-hint-bg--hover: $color-gray-500;
+$playlist-input-bg: $color-slate-900;
 $playlist-input-back: $color-gray-400;
 $playlist-input-back--hover: $color-white;
-$playlist-input-tooltip-highlight: $color-white;
-$playlist-input-delete-text: $color-red-400;
-$playlist-input-delete-bg: $color-red-500-10;
-$playlist-input-delete-bg--hover: $color-red-500-20;
+$playlist-input-back-bg: $color-slate-750;
+$playlist-input-back-bg--hover: $color-slate-700;
+
+// ─── Playlist visibility ───
+$playlist-visibility-icon: $color-gray-400;
+$playlist-visibility-hint-text: $color-gray-900;
+$playlist-visibility-hint-bg: $color-gray-600;
+$playlist-visibility-hint-bg--hover: $color-gray-500;
+$playlist-visibility-tooltip-highlight: $color-white;
 
 // ─── Playlist add ───
 $playlist-add-item-bg--hover: $color-slate-750;
@@ -381,8 +383,10 @@ $playlist-add-item-edit: $color-gray-400;
 $playlist-add-item-edit--hover: $color-white;
 
 // ─── Playlist edit ───
-$playlist-edit-border: transparent;
-$playlist-edit-icon: $color-indigo-600;
+$playlist-edit-delete-text: $color-red-400;
+$playlist-edit-delete-text--hover: $color-red-300;
+$playlist-edit-confirm-highlight: $color-white;
+$playlist-edit-confirm-note: $color-gray-500;
 
 // ─── Playlist delete video ───
 $playlist-delete-video-icon: $color-indigo-600;
@@ -747,6 +751,7 @@ $filter-popup--active: $color-gray-400;
 $filter-popup-active-bg: transparent;
 $filter-popup-quick-title: $color-gray-400;
 $filter-popup-group-border: transparent;
+$filter-popup-summary-arrow: $color-gray-400;
 $filter-popup-summary-description: $color-gray-500;
 $filter-popup-active-chip-bg: $color-indigo-600;
 $filter-popup-active-chip-bg--hover: $color-indigo-500;
@@ -1008,7 +1013,6 @@ $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
 // ─── Page: playlists ───
-$page-playlists-border: transparent;
 
 // ─── Page: channels ───
 $page-channels-border: transparent;

package/assets/scss/vars/_tokens.scss

@@ -21,7 +21,7 @@
   // ─── Project-specific ───
   --chips-height: 32px;
   --chips-height-small: 24px;
-  --chips-height-micro: 20px;
+  --chips-height-micro: 24px;
   --transition: var(--default-transition-duration) var(--default-transition-timing-function);
   --header-height: 64px;
   --control-min-width: 126px;

package/assets/scss/vars/_vars.scss

@@ -3,6 +3,7 @@ $spacing: 4px;
 // ─── Border radius ───
 $radius: 10px;
 $radius-small: 4px;
+$radius-6: 6px;
 $radius-md: 8px;
 $radius-lg: 10px;
 $radius-12: 12px;

package/components/auth/register.vue

@@ -171,10 +171,6 @@ async function submit() {
 
     await useUser(AuthorizationApiService).register(form.value);
 
-    // Создаем сразу Favorites плейлист, возможно костыль убрать когда будет нормальная логика с беком
-    // const { FAVORITES_KEY } = useFavorites();
-    // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, PlaylistType.Private);
-
     useAuthPopup().closeAuthPopup();
     show('Registration success');
   } catch (err) {

package/components/card/collections-more.vue

@@ -118,7 +118,7 @@ const images = computed(() => {
 }
 
 .card-collections-more__count {
-  @include font-2xl;
+  @include font-3xl;
 
   font-weight: 700;
   color: $collections-more-count;

package/components/card/dropdown/index.vue

@@ -31,7 +31,7 @@
         v-if="showWatchLater"
         :class="className"
         type="button"
-        @click="toggleWatchLater(card.guid)"
+        @click="toggleWatchLater(card.guid, card.title)"
       >
         <UiIcon
           name="clock"
@@ -43,7 +43,7 @@
         v-if="showFavorites"
         :class="className"
         type="button"
-        @click="toggleFavorite(card.guid)"
+        @click="toggleFavorite(card.guid, card.title)"
       >
         <UiIcon
           name="heart-stroke"

package/components/card/playlist.vue

@@ -55,7 +55,7 @@
           >
             <UiIcon
               name="thumbs-up"
-              size="12"
+              size="14"
             />
             {{ $n(card.likes, 'compact') }}
           </span>
@@ -73,7 +73,7 @@
         <p class="card-playlist__created">
           <UiIcon
             name="date"
-            size="12"
+            size="14"
           />
           {{ formatDate(card.created) }}
         </p>
@@ -83,7 +83,7 @@
           v-if="avatar"
           :src="avatar"
           :alt="card.username"
-          class="card-playlist__avatar _from-xs"
+          class="card-collections-more__count _from-xs"
           width="36"
           height="36"
           sizes="36px"
@@ -292,7 +292,7 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
 .card-playlist__wrapper {
   display: grid;
   align-items: center;
-  padding: 16px;
+  padding: 12px;
 }
 
 .card-playlist__wrapper-header {
@@ -300,7 +300,7 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   align-items: center;
   justify-content: space-between;
   column-gap: 24px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .card-playlist__wrapper.--top {
@@ -407,8 +407,8 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   --line-clamp: 1;
 
   color: $playlist-card-tags;
-  padding-top: 12px;
-  margin-top: 12px;
+  padding-top: 8px;
+  margin-top: 8px;
   border-top: 1px solid $playlist-card-tags-border;
 }
 
@@ -456,7 +456,6 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   grid-template-columns: auto 1fr;
   column-gap: 12px;
   align-items: start;
-  margin-bottom: 12px;
 }
 
 .card-playlist__content-wrapper {

package/components/card/video/actions.vue

@@ -7,7 +7,7 @@
       class="card-video-actions__btn --active"
       type="button"
       aria-pressed="true"
-      @click="toggleFavorite(card.guid)"
+      @click="toggleFavorite(card.guid, card.title)"
     >
       <UiIcon
         name="heart"
@@ -22,7 +22,7 @@
       :aria-pressed="later"
       :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
       type="button"
-      @click="toggleWatchLater(card.guid)"
+      @click="toggleWatchLater(card.guid, card.title)"
     >
       <UiIcon
         :name="later ? 'clock-filled' : 'clock'"

package/components/card/video/index.vue

@@ -398,14 +398,14 @@ $dropdown-column: 18px;
   }
 
   @include from-cq($layout-breakpoint) {
-    column-gap: 8px;
-    grid-template-columns: 32px 1fr $dropdown-column;
+    column-gap: 12px;
+    grid-template-columns: 36px 1fr $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
-  column-gap: 8px;
-  grid-template-columns: 32px 1fr $dropdown-column;
+  column-gap: 12px;
+  grid-template-columns: 36px 1fr $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -585,23 +585,23 @@ $dropdown-column: 18px;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2;
-    margin-top: 8px;
+    margin-top: 10px;
   }
 }
 
 .card-video__tags-wrapper {
-  max-height: calc( var(--chips-height-micro) * 2 + 2px);
+  max-height: calc( var(--chips-height-micro) * 2 + 8px);
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
-  gap: 2px;
+  gap: 8px;
 }
 
 .card-video__user {
   @include font-xs;
 
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   display: grid;
   place-content: center;
   font-weight: 700;

package/components/filter/popup.vue

@@ -288,6 +288,7 @@ const { t } = useI18n();
 
 .filter-popup__summary-arrow {
   flex-shrink: 0;
+  color: $filter-popup-summary-arrow;
   transition: transform var(--transition);
 }
 

package/components/library/feed.vue

@@ -141,19 +141,6 @@
         compact
       />
     </div>
-
-    <!-- <UiLink
-      :to="item.to"
-      theme="secondary"
-      class="library-feed__all _to-sm"
-      wide
-    >
-      {{ videosText }}
-      <UiIcon
-        name="arrow-right"
-        size="16"
-      />
-    </UiLink> -->
   </article>
 </template>
 
@@ -212,7 +199,7 @@ const ageText = computed(() => {
   grid-template-columns: auto minmax(0, 1fr) auto;
   column-gap: 16px;
   row-gap: 12px;
-  align-items: center;
+  align-items: start;
   margin-bottom: 20px;
 }