itube-specs 0.0.868 → 0.0.869

package/assets/scss/base/_hacks.scss

@@ -13,8 +13,8 @@ select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
   box-shadow: 0 0 0 1000px transparent inset !important;
-  -webkit-text-fill-color: $input-autofill-text !important;
-  color: $input-autofill-text !important;
+  -webkit-text-fill-color: var(--input-autofill-text, #{$input-autofill-text}) !important;
+  color: var(--input-autofill-text, #{$input-autofill-text}) !important;
   border: none !important;
   transition: background-color 5000s ease-in-out 0s !important;
   font-size: inherit !important;

package/assets/scss/mixins/_surface.scss

@@ -37,7 +37,8 @@ $surface-roles: (
   control-bg: (--input-bg, --select-bg),
   control-compact-bg: (--input-s-bg,),
   control-bg--disabled: (--input-bg--disabled,),
-  control-text: (--input-text, --select-text),
+  control-text: (--input-text, --input-autofill-text, --select-text),
+  control-compact-text: (--input-s-text,),
   control-text--disabled: (--input-text--disabled,),
   control-placeholder: (--input-placeholder, --select-placeholder),
   control-label: (--input-label, --select-label),

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

@@ -77,10 +77,10 @@ $input-label: $color-zinc-400;
 $input-icon: inherit;
 $input-pre-icon: $color-zinc-500;
 $input-s-bg: $color-zinc-800;
+$input-s-text: $color-white;
 $input-s-border: transparent;
 $input-s-border--focus: $color-zinc-600;
 $input-text--disabled: $color-zinc-400;
-$input-text--error: $color-red-500;
 $input-border--error: $color-red-500;
 $input-autofill-text: $color-white;
 $input-button-text: $color-zinc-500;
@@ -218,8 +218,6 @@ $video-info-description-text: $color-zinc-400;
 // ─── Video interface ───
 $video-interface-button-bg: $color-zinc-800;
 $video-interface-button-text: $color-zinc-400;
-$video-interface-button-bg--hover: $color-zinc-700;
-$video-interface-button-text--hover: $color-white;
 
 // ─── Video channel ───
 $video-channel-bg: $color-zinc-800-60;
@@ -428,9 +426,7 @@ $dropdown-crest: $color-zinc-500;
 $dropdown-separator: $color-zinc-800-60;
 
 // ─── Snackbar ───
-$snackbar-bg: $color-zinc-800;
 $snackbar-text: $color-zinc-200;
-$snackbar-border: $color-zinc-700;
 $snackbar-close: $color-zinc-500;
 $snackbar-close--hover: $color-zinc-300;
 $snackbar-close-bg--hover: $color-zinc-700;
@@ -528,7 +524,6 @@ $radio-bg: $color-zinc-800;
 $radio-border--checked: $color-indigo-600;
 $radio-bg--checked: $color-indigo-600;
 $radio-label: $color-white;
-$radio-label--hover: $color-zinc-300;
 $radio-description: $color-zinc-500;
 $radio-border--disabled: $color-zinc-800;
 $radio-text--disabled: $color-zinc-400;
@@ -600,9 +595,6 @@ $expand-row-pre-text: $color-zinc-500;
 $full-description-text: $color-zinc-400;
 $full-description-bg: $color-zinc-800-50;
 
-// ─── Swiper items ───
-$swiper-items-all-text: $color-zinc-400;
-
 // ─── Report ───
 $report-category-border: $color-zinc-800;
 $report-category-bg--hover: $color-zinc-800-50;
@@ -612,9 +604,6 @@ $report-text: $color-zinc-400;
 $report-required: $color-red-500;
 $report-text--error: $color-red-500;
 
-// ─── Model filters ───
-$model-filters-border: $color-zinc-800;
-
 // ─── Share ───
 $share-cancel-border: $color-zinc-800;
 $share-button-copy-bg: $color-zinc-800;
@@ -689,10 +678,6 @@ $player-menu-scene-time: $color-zinc-500;            // text-zinc-500
 $player-menu-scene-time--current: $color-zinc-200;   // text-zinc-200
 $player-menu-section-title: $color-zinc-400;
 
-// ─── Filter page ───
-$filter-page-group-title: $color-white;
-$filter-page-group-border: $color-zinc-800;
-
 // ─── Search ───
 $search-close-bg: $color-zinc-700;
 $search-close-text: $color-zinc-300;
@@ -728,10 +713,8 @@ $filters-main-bg--hover: $color-zinc-700-70;
 
 // ─── Info grid ───
 $info-grid-group-title: $color-zinc-300;
-$info-grid-item-bg: $color-zinc-700-50;
 $info-grid-item-border: $color-zinc-700-50;
 $info-grid-item-bg--hover: $color-zinc-700-30;
-$info-grid-item-border--hover: $color-zinc-600;
 $info-grid-item-title: $color-zinc-500;
 $info-grid-item-title-bg: $color-zinc-900;
 $info-grid-item-value-bg: $color-zinc-900;
@@ -739,7 +722,6 @@ $info-grid-item-value-bg--link: $color-zinc-700-50;
 $info-grid-item-value-link-bg--hover: $color-zinc-700-50;
 $info-grid-item-value--link: $color-white;
 $info-grid-item-value-border: $color-zinc-700-50;
-$info-grid-item-values: $color-white;
 $info-grid-item-success: $color-green-400;
 $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-zinc-400;
@@ -783,7 +765,6 @@ $shadow-color--active: $mono-black-42; // тень при drag
 
 // ─── Page models ───
 $page-models-popular-border: $color-zinc-800;
-$page-models-categories-border: $color-zinc-800-50;
 
 // ─── Page model videos ───
 $page-model-videos-section-border: $color-zinc-800-50;
@@ -809,7 +790,6 @@ $model-card-params-footer: $color-zinc-500;
 $model-card-name: $color-zinc-200;
 $model-card-name--hover: $color-indigo-400;
 $model-card-count: $color-zinc-500;
-$model-card-divider: $color-zinc-700;
 
 // ─── Playlist card ───
 $playlist-card-bg: $color-zinc-800-50;
@@ -896,7 +876,6 @@ $native-card-secondary: $color-zinc-500;
 
 // ─── Page: grouped categories ───
 $grouped-highlight-border: $color-zinc-800;
-$grouped-separator: $color-zinc-800;
 $grouped-category-icon: $color-zinc-500;
 $grouped-footer-text: $color-zinc-500;
 $grouped-section-border: $color-zinc-800;
@@ -944,16 +923,6 @@ $contacts-wrapper-bg: $color-zinc-900;
 $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
-// ─── Page: playlist ───
-$page-playlist-edit: $color-zinc-500;
-$page-playlist-edit-border: $color-zinc-800;
-$page-playlist-header-border: $color-zinc-800;
-$page-playlist-avatar-bg: $color-indigo-600;
-$page-playlist-avatar-text: $color-white;
-$page-playlist-user-name: $color-zinc-400;
-$page-playlist-private-bg: $color-zinc-800-60;
-$page-playlist-like-bg: $color-zinc-900;
-
 // ─── Page: playlists ───
 $page-playlists-border: $color-zinc-800;
 

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

@@ -87,14 +87,14 @@ $input-label: $color-gray-700;
 $input-icon: $color-gray-500;
 $input-pre-icon: $color-gray-500;
 $input-s-bg: $color-slate-750;
+$input-s-text: $color-white;
 $input-s-border: transparent;
 $input-s-border--focus: $color-indigo-soft;
 $input-text--disabled: $color-gray-400;
-$input-text--error: $color-red-500;
 $input-border--error: $color-red-500;
-$input-autofill-text: $color-white;
+$input-autofill-text: $color-gray-900;
 $input-button-text: $color-gray-500;
-$input-button-text--hover: $color-white;
+$input-button-text--hover: $color-gray-500;
 
 // ─── Surfaces ("островки") ───
 // Только отличия от базовых токенов. Подложки нет в карте — нет и оверрайда.
@@ -207,7 +207,7 @@ $popup-auth-icon-bg: $color-indigo-600;
 $popup-border: transparent;
 $popup-footer-border: $color-slate-750;
 $popup-text: $color-white;
-$popup-scrollbar: $color-gray-800;
+$popup-scrollbar: $color-gray-400;
 $popup-close-icon: $color-gray-400;
 $popup-close-icon--hover: $color-white;
 
@@ -275,8 +275,6 @@ $video-info-description-text: $color-gray-700;
 // ─── Video interface ───
 $video-interface-button-bg: $color-slate-750;
 $video-interface-button-text: $color-gray-400;
-$video-interface-button-bg--hover: $color-slate-700;
-$video-interface-button-text--hover: $color-white;
 
 // ─── Video channel ───
 $video-channel-bg: $color-gray-200;
@@ -485,9 +483,7 @@ $dropdown-crest: $color-gray-400;
 $dropdown-separator: $color-slate-750;
 
 // ─── Snackbar ───
-$snackbar-bg: $color-slate-750;
 $snackbar-text: $color-gray-200;
-$snackbar-border: $color-slate-700;
 $snackbar-close: $color-gray-500;
 $snackbar-close--hover: $color-gray-300;
 $snackbar-close-bg--hover: $color-slate-700;
@@ -568,8 +564,8 @@ $checkbox-border: $color-gray-400;
 $checkbox-color: $color-white;
 $checkbox-bg--checked: $color-indigo-soft;
 $checkbox-border--checked: $color-indigo-600;
-$checkbox-label: $color-gray-400;
-$checkbox-label--hover: $color-gray-300;
+$checkbox-label: $color-gray-700;
+$checkbox-label--hover: $color-gray-500;
 $checkbox-description: $color-gray-500;
 $checkbox-border--disabled: transparent;
 $checkbox-text--disabled: $color-gray-400;
@@ -581,7 +577,6 @@ $radio-bg: transparent;
 $radio-border--checked: $color-indigo-soft;
 $radio-bg--checked: $color-indigo-soft;
 $radio-label: $color-gray-700;
-$radio-label--hover: $color-gray-300;
 $radio-description: $color-gray-500;
 $radio-border--disabled: $color-slate-700;
 $radio-text--disabled: $color-gray-400;
@@ -653,9 +648,6 @@ $expand-row-pre-text: $color-gray-500;
 $full-description-text: $color-gray-600;
 $full-description-bg: $color-gray-100;
 
-// ─── Swiper items ───
-$swiper-items-all-text: $color-gray-400;
-
 // ─── Report ───
 $report-category-border: $color-slate-700;
 $report-category-bg--hover: $color-slate-750;
@@ -665,9 +657,6 @@ $report-text: $color-gray-400;
 $report-required: $color-red-500;
 $report-text--error: $color-red-500;
 
-// ─── Model filters ───
-$model-filters-border: transparent;
-
 // ─── Share ───
 $share-cancel-border: transparent;
 $share-button-copy-bg: $color-slate-750;
@@ -742,10 +731,6 @@ $player-menu-scene-time: $color-gray-500;            // text-zinc-500
 $player-menu-scene-time--current: $color-gray-200;   // text-zinc-200
 $player-menu-section-title: $color-gray-400;
 
-// ─── Filter page ───
-$filter-page-group-title: $color-white;
-$filter-page-group-border: transparent;
-
 // ─── Filters main ───
 $filters-main-slider-bg: $color-night;
 $filters-main-slider-border: transparent;
@@ -758,10 +743,8 @@ $filters-main-bg--hover: $button-secondary-bg--hover;
 
 // ─── Info grid ───
 $info-grid-group-title: $color-gray-600;
-$info-grid-item-bg: $color-white;
 $info-grid-item-border: $color-gray-300;
 $info-grid-item-bg--hover: $color-slate-700;
-$info-grid-item-border--hover: $color-gray-600;
 $info-grid-item-title: $color-gray-500;
 $info-grid-item-title-bg: $color-white;
 $info-grid-item-value-bg: $color-gray-100;
@@ -769,7 +752,6 @@ $info-grid-item-value-bg--link: $color-slate-700;
 $info-grid-item-value-link-bg--hover: $color-slate-750;
 $info-grid-item-value--link: $color-white;
 $info-grid-item-value-border: $color-gray-300;
-$info-grid-item-values: $color-white;
 $info-grid-item-success: $color-green-400;
 $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-gray-400;
@@ -813,7 +795,6 @@ $shadow-color--active: $mono-black-42; // тень при drag
 
 // ─── Page models ───
 $page-models-popular-border: transparent;
-$page-models-categories-border: transparent;
 
 // ─── Page model videos ───
 $page-model-videos-section-border: transparent;
@@ -839,7 +820,6 @@ $model-card-params-footer: $color-gray-600;
 $model-card-name: $color-gray-900;
 $model-card-name--hover: $model-card-name;
 $model-card-count: $color-gray-600;
-$model-card-divider: $color-gray-400;
 
 // ─── Playlist card ───
 $playlist-card-bg: $color-gray-100;
@@ -883,8 +863,8 @@ $channel-card-mini-name: $color-white;
 $channel-card-mini-info: $color-gray-400;
 
 // ─── Playlist card mini ───
-$playlist-card-mini-empty-gradient-from: $color-gray-700;
-$playlist-card-mini-empty-gradient-to: $color-gray-800;
+$playlist-card-mini-empty-gradient-from: $color-slate-700;
+$playlist-card-mini-empty-gradient-to: $color-slate-750;
 $playlist-card-mini-empty-text: $color-white;
 $playlist-card-mini-name: $color-white;
 $playlist-card-mini-user: $color-gray-500;
@@ -920,13 +900,12 @@ $auth-register-link--hover: $color-indigo-blue;
 $auth-register-login: $color-gray-400;
 
 // ─── Native card ───
-$native-card-bg: $color-black;
+$native-card-bg: $color-slate-800;
 $native-card-primary: $color-gray-400;
 $native-card-secondary: $color-gray-500;
 
 // ─── Page: grouped categories ───
 $grouped-highlight-border: transparent;
-$grouped-separator: $color-gray-800;
 $grouped-category-icon: $color-gray-500;
 $grouped-footer-text: $color-gray-500;
 $grouped-section-border: $color-gray-200;
@@ -974,16 +953,6 @@ $contacts-wrapper-bg: $color-gray-200;
 $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
-// ─── Page: playlist ───
-$page-playlist-edit: $color-gray-500;
-$page-playlist-edit-border: $color-slate-700;
-$page-playlist-header-border: $color-slate-700;
-$page-playlist-avatar-bg: $color-indigo-600;
-$page-playlist-avatar-text: $color-white;
-$page-playlist-user-name: $color-gray-400;
-$page-playlist-private-bg: $color-slate-750;
-$page-playlist-like-bg: $color-slate-800;
-
 // ─── Page: playlists ───
 $page-playlists-border: transparent;
 

package/components/search/input.vue

@@ -121,12 +121,16 @@ $icon-size: 16px;
   padding-block: 12px;
 
   @include to-br(sm) {
+    --input-autofill-text: #{$search-text--mobile};
+
     color: $search-text--mobile;
   }
 
   @include from-br(sm) {
     @include font-sm;
 
+    --input-autofill-text: #{$search-text};
+
     color: $search-text;
   }
 }

package/components/ui/input.vue

@@ -336,6 +336,11 @@ const normalizedValue = computed(() => {
   color: var(--input-pre-icon, #{$input-pre-icon});
 }
 
+.ui-input.ui-input--s {
+  --input-text: var(--input-s-text, #{$input-s-text});
+  --input-autofill-text: var(--input-s-text, #{$input-s-text});
+}
+
 .ui-input.ui-input--s .ui-input__input {
   padding: 8px 16px;
   background-color: var(--input-s-bg, #{$input-s-bg});

package/package.json

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

package/pages/categories/index.vue

@@ -117,17 +117,6 @@ const breadcrumbs = [
   }
 }
 
-.grouped__options-separate {
-  display: block;
-  width: 1px;
-  height: 24px;
-  background-color: $grouped-separator;
-
-  @include from-br(sm) {
-    height: 32px;
-  }
-}
-
 .grouped__loading {
   --size: 24px;