itube-specs 0.0.835 → 0.0.837

package/components/card/round.vue

@@ -63,17 +63,18 @@ function onImageError() {
   display: grid;
   justify-content: center;
   justify-items: center;
+  padding: 2px;
 }
 
 .card-round__img {
-  width: $popular-size;
-  height: $popular-size;
+  width: $card-round-size;
+  height: $card-round-size;
   margin-bottom: 8px;
   aspect-ratio: 1/1;
   border-radius: $radius-full;
   object-fit: cover;
   object-position: center 70%;
-  border: 2px solid $popular-border;
+  border: 2px solid $card-round-border;
 
   @include from-br(sm) {
     transition: var(--transition) border-color;
@@ -82,7 +83,8 @@ function onImageError() {
 
 .card-round:is(:hover, :focus-visible) .card-round__img {
   @include from-br(sm) {
-    border-color: $popular-border--hover;
+    border-color: $card-round-border--hover;
+    outline: 1px solid $card-round-outline--hover;
   }
 }
 
@@ -93,7 +95,7 @@ function onImageError() {
   grid-template-columns: minmax(12px, 1fr) auto;
   column-gap: 4px;
   align-items: center;
-  color: $popular-subtext;
+  color: $card-round-subtext;
 }
 
 .card-round__count-text {
@@ -106,7 +108,7 @@ function onImageError() {
   @include font-sm;
 
   font-weight: 500;
-  color: $popular-text;
+  color: $card-round-text;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -119,7 +121,7 @@ function onImageError() {
 
 .card-round:is(:hover, :focus-visible) .card-round__title {
   @include from-br(sm) {
-    color: $popular-text--hover;
+    color: $card-round-text--hover;
   }
 }
 

package/components/card/video/dropdown.vue

@@ -12,7 +12,6 @@
           :aria-label="$t('open_menu')"
           class="card-video-dropdown__trigger"
           type="button"
-          @click="emit('triggerClick', $event)"
         >
           <UiIcon
             name="dots-vertical"
@@ -101,14 +100,12 @@ const props = defineProps<{
   showShare?: boolean
   showReport?: boolean
   showRemove?: boolean
-  autoOpen?: boolean
 }>();
 
 const emit = defineEmits<{
   (e: 'watchLater'): void
   (e: 'share'): void
   (e: 'remove'): void
-  (e: 'triggerClick', event: Event): void
 }>();
 
 const { isAuthorized } = useUser(AuthorizationApiService);
@@ -120,10 +117,6 @@ function openDropdown() {
   dropdownRef.value?.openDropdown();
 }
 
-onMounted(() => {
-  if (props.autoOpen) openDropdown();
-});
-
 function onAddPlaylist() {
   usePlaylistAdd().openPlaylistAdd(isAuthorized, props.card, openDropdown);
 }
@@ -153,4 +146,16 @@ defineExpose({ openDropdown });
   padding: 16px 32px 16px 16px;
   border-bottom: 1px solid $video-card-dropdown-border;
 }
+
+.card-video-dropdown__trigger > .ui-icon {
+  @include from-br(sm) {
+    transition: var(--transition) transform;
+  }
+}
+
+.card-video-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
+  @include from-br(sm) {
+    transform: scale($video-card-dropdown-size--hover);
+  }
+}
 </style>

package/components/card/video/index.vue

@@ -112,25 +112,11 @@
         </div>
       </div>
       <LazyCardVideoDropdown
-        v-if="dropdownMounted"
         :card="card"
         :show-watch-later="featureFlags.FeatureWatchLaterEnabled"
         class="card-video__dropdown"
         show-report
-        auto-open
       />
-      <button
-        v-else
-        :aria-label="t('open_menu')"
-        class="card-video__dropdown card-video-dropdown__trigger"
-        type="button"
-        @click="dropdownMounted = true"
-      >
-        <UiIcon
-          name="dots-vertical"
-          size="18"
-        />
-      </button>
     </div>
   </div>
 </template>
@@ -165,8 +151,6 @@ const isChannelPage = computed(() => pageName === 'channels-channel');
 
 const isPreviewShow = ref(false);
 
-const dropdownMounted = ref(false);
-
 function playVideo() {
   isPreviewShow.value = true;
 }

package/components/layout/burger.vue

@@ -205,6 +205,7 @@ router.afterEach(() => {
   background-color: $burger-bg;
   backdrop-filter: blur($blur-md);
   overflow: auto;
+  border-left: 1px solid $burger-border;
 }
 
 .layout-burger__buttons {

package/components/player/core.vue

@@ -5,6 +5,7 @@
 <template>
   <ITubePlayer
     ref="playerRef"
+    v-bind="$attrs"
     :source="source"
     :options="options"
     :ad-config="loadAdConfig"
@@ -26,6 +27,7 @@
 
 <script setup lang="ts">
 import { ITubePlayer } from 'itube-modern-player/vue';
+
 import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup, MenuRequestPayload } from 'itube-modern-player';
 import { AdvertsHelper } from '../../utils/adverts-helper';
 import { AdSpotType, ThumbSize  } from '../../runtime';
@@ -39,6 +41,8 @@ import actionsIcon from '../../assets/icons/player/actions.svg?raw';
 import locationIcon from '../../assets/icons/player/location.svg?raw';
 import modelsIcon from '../../assets/icons/player/models.svg?raw';
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps<{
   data: IVideoData
   // Следующий ролик из related — нужен плееру только для ховер-превью на кнопке next.

package/components/player/like.vue

@@ -82,14 +82,22 @@ const isDisliked = computed(() => likeStatus.value === 'dislike');
 const resultLikes = ref(props.likes);
 const resultDislikes = ref(props.dislikes);
 
-onMounted(() => {
+function syncFromProps() {
+  likeStatus.value = null;
+  resultLikes.value = props.likes;
+  resultDislikes.value = props.dislikes;
+
   const stored = localStorage.getItem(storageKey.value);
   if (stored === 'like' || stored === 'dislike') {
     likeStatus.value = stored;
     if (stored === 'like') resultLikes.value += 1;
     if (stored === 'dislike') resultDislikes.value += 1;
   }
-});
+}
+
+onMounted(syncFromProps);
+
+watch(storageKey, syncFromProps);
 
 async function onReactionClick(type: 'like' | 'dislike') {
   if (likeStatus.value !== type) {

package/components/profile/setup.vue

@@ -351,6 +351,7 @@ function cancelEdit() {
 .profile-setup__avatar-edit.--delete {
   background-color: $setup-delete-bg;
   color: $setup-delete-text;
+  border: 2px solid $setup-delete-border;
 
   @include hover(background-color) {
     background-color: $setup-delete-bg--hover;

package/components/search/input.vue

@@ -97,34 +97,58 @@ $icon-size: 16px;
 .search-input {
   position: relative;
   display: block;
-  background-color: $search-bg;
   border-radius: $radius;
-  border: 1px solid $search-border;
-  transition: var(--transition) border-color;
+
+  @include to-br(sm) {
+    background-color: $search-bg--mobile;
+    border: 1px solid $search-border--mobile;
+    transition: var(--transition) border-color;
+  }
+
+  @include from-br(sm) {
+    background-color: $search-bg;
+    border: 1px solid $search-border;
+    transition: var(--transition) border-color;
+  }
 }
 
 .search-field__input {
   font-size: inherit;
   background-color: transparent;
   width: 100%;
-  color: $search-text;
   padding-left: 16px;
   padding-right: 80px;
   padding-block: 12px;
 
+  @include to-br(sm) {
+    color: $search-text--mobile;
+  }
+
   @include from-br(sm) {
     @include font-sm;
+
+    color: $search-text;
   }
 }
 
 .search-input.search-input--focused {
-  border-color: $search-border--active;
+  border-color: $search-border--active--mobile;
+
+  @include from-br(sm) {
+    border-color: $search-border--active;
+  }
 }
 
 .search-field__input::placeholder {
   @include font-sm;
 
-  color: $search-placeholder;
+    @include to-br(sm) {
+      color: $search-placeholder--mobile;
+    }
+
+    @include from-br(sm) {
+        color: $search-placeholder;
+    }
 }
 
 .search-field__search {

package/components/search/item.vue

@@ -62,12 +62,13 @@ const safeTitle = computed(() =>
   display: flex;
   align-items: center;
   column-gap: 8px;
-  color: $search-item-text;
+  color: $search-item-text--mobile;
   padding-block: 6px;
   padding-inline: 8px;
 
   @include from-br(sm) {
     border-radius: 4px;
+    color: $search-item-text;
   }
 
   @include hover(background-color, color) {

package/components/search/result.vue

@@ -178,11 +178,11 @@ const latestSearches = computed(() =>
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: $search-result-scrollbar;
-  color: $search-result-text;
+  color: $search-result-text--mobile;
   width: calc(100vw - calc(var(--container-padding-inline) * 2));
-  border: 1px solid $search-result-border;
+  border: 1px solid $search-result-border--mobile;
   border-radius: $radius;
-  background-color: $search-result-bg;
+  background-color: $search-result-bg--mobile;
   box-shadow: $search-result-shadow;
 
   @include to-br(sm) {
@@ -197,6 +197,7 @@ const latestSearches = computed(() =>
     max-height: 90dvh;
     display: grid;
     width: $search-max-width;
+    color: $search-result-text;
     border: 1px solid $search-result-border;
     border-radius: $radius;
     background-color: $search-result-bg;
@@ -227,7 +228,11 @@ const latestSearches = computed(() =>
 }
 
 .search-result__default:not(:last-of-type) {
-  border-bottom: 1px solid $search-result-border;
+  border-bottom: 1px solid $search-result-border--mobile;
+
+  @include from-br(sm) {
+    border-bottom-color: $search-result-border;
+  }
 }
 
 .search-result__default,

package/components/section/swiper-cards.vue

@@ -79,18 +79,19 @@ const { t } = useI18n();
 
   display: grid;
   place-content: center;
-  width: $popular-size;
-  height: $popular-size;
+  width: $card-round-size;
+  height: $card-round-size;
   aspect-ratio: 1/1;
   border-radius: $radius-full;
   object-fit: cover;
-  border: 2px solid $popular-border;
-  background-color: $popup-content-bg;
-  color: $swiper-items-all-text;
+  border: 2px solid $card-round-border;
+  background-color: $card-round-all-bg;
+  color: $card-round-all-text;
   text-align: center;
 
-  @include hover(border-color) {
-    border-color: $popular-border--hover;
+  @include hover(border-color, background-color) {
+    border-color: $card-round-border--hover;
+    background-color: $card-round-all-bg--hover;
   }
 }
 </style>

package/components/ui/swiper.vue

@@ -141,18 +141,29 @@ $nav-gap: 4px;
   display: none;
 
   @include from-br(sm) {
+    $size: 40px;
+
     position: absolute;
     top: calc(var(--slide-width) / 2);
     transform: translateY(-50%);
     z-index: calc($z-index-plus + 2);
+    display: grid;
+    place-content: center;
     cursor: pointer;
     padding: 0;
-    border: none;
-    background: none;
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    border: $swiper-nav-border;
+    background-color: $swiper-nav-bg;
     color: $swiper-nav-text;
+    box-shadow: 0 4px 6px -1px $swiper-nav-shadow, 0 2px 4px -2px $swiper-nav-shadow;
     opacity: 1;
     transition: opacity var(--transition);
-    display: block;
+
+    @include hover(background-color) {
+      background-color: $swiper-nav-bg--hover;
+    }
 
     &::before {
       position: absolute;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.835",
+  "version": "0.0.837",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {