itube-specs 0.0.844 → 0.0.846

package/components/card/channel.vue

@@ -167,17 +167,6 @@ const infoItems = computed<InfoItem[]>(() => [
   background-color: $channel-card-placeholder-bg;
 }
 
-.card-channel__description {
-  --line-clamp: 2;
-
-  @include font-xs;
-
-  color: $channel-card-description;
-  grid-column: 1/-1;
-  grid-row: 3;
-  margin-top: 12px;
-}
-
 .card-channel__logo {
   @include from-br(xs) {
     grid-row: 1/3;

package/components/card/video/index.vue

@@ -441,6 +441,7 @@ $layout-breakpoint: 250px;
 
 .card-video.--mini .card-video__title {
   color: $video-card-mini-title;
+  font-weight: $video-card-mini-weight;
 }
 
 .card-video.--mini .card-video__poster-wrapper,

package/components/info/main.vue

@@ -348,35 +348,11 @@ const socialItems = computed<ILinkItem[]>(() => {
   }
 }
 
-.info-main__button,
 .info-main__count {
   padding: 7px 12px;
   flex-shrink: 0;
 }
 
-.info-main__button {
-  @include font-sm;
-
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-  column-gap: 6px;
-  padding: 8px 12px;
-  color: $info-button-text;
-  font-weight: 500;
-  border-radius: $radius-lg;
-  background-color: $info-button-bg;
-
-  @include hover(background-color) {
-    background-color: $info-button-bg--hover;
-  }
-}
-
-.info-main__button-pretext {
-  color: $info-button-pretext;
-}
-
 .info-main__social {
   margin-top: 8px;
   grid-column: 2;

package/components/layout/footer.vue

@@ -9,14 +9,10 @@
       <LayoutFooterLanguage />
       <p class="layout-footer__copyright">{{ copyrightText }}</p>
     </div>
-
-    <LazyDevThemeSwitch v-if="isDev" />
   </footer>
 </template>
 
 <script setup lang="ts">
-const isDev = import.meta.dev;
-
 const copyrightText = useAppConfig().copyrightText;
 
 const { t } = useI18n();

package/components/player/playlist.vue

@@ -344,6 +344,7 @@ function onFollowClick() {
   overflow-y: auto;
   flex: 1;
   max-height: calc(var(--card-height) * 3);
+  background-color: $video-playlist-list-bg;
 
   @include from-br(md) {
     aspect-ratio: 384/564;
@@ -357,9 +358,12 @@ function onFollowClick() {
   display: flex;
   column-gap: 8px;
   align-items: start;
+  background-color: $video-playlist-card-bg;
+  border-left: 2px solid $video-playlist-card-border;
 
   @include hover(background-color) {
     background-color: $video-playlist-card-bg--hover;
+    border-color: $video-playlist-card-border--hover;
   }
 
   @include from-br(md) {
@@ -386,6 +390,7 @@ function onFollowClick() {
 
 .player-playlist__card:has(.router-link-active) {
   background-color: $video-playlist-card-bg--active;
+  border-color: $video-playlist-card-border--active;
   border-bottom-color: transparent;
 }
 

package/components/section/swiper-cards.vue

@@ -61,7 +61,6 @@ const { t } = useI18n();
   @include font-lg;
 
   margin-bottom: 16px;
-  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
 }

package/components/ui/chips.vue

@@ -159,11 +159,18 @@ const name = computed(() => {
 }
 
 .ui-chips.--small {
+  background-color: $chips-small-bg;
+  color: $chips-small-text;
+
   @include from-br(sm) {
     padding-block: 4px;
     padding-inline: 8px;
     height: var(--chips-height-small);
   }
+
+  @include hover(background-color) {
+    background-color: $chips-small-bg--hover;
+  }
 }
 
 .ui-chips.--micro {
@@ -196,6 +203,11 @@ const name = computed(() => {
   align-items: center;
   place-content: center;
   aspect-ratio: 1/1;
+  background-color: $chips-bg-alphabet;
+
+  @include hover(background-color) {
+    background-color: $chips-bg-alphabet--hover;
+  }
 
   @include from-br(sm) {
     --size: 32px;
@@ -217,7 +229,7 @@ const name = computed(() => {
   background-color: $chips-alphabet-bg--active--hover;
 }
 
-.ui-chips:not(.--active, .router-link-exact-active) {
+.ui-chips:not(.--active, .router-link-exact-active, .--alphabet, .--small) {
   @include hover(background-color, color) {
     background-color: $chips-bg--hover;
     color: $chips-text--hover;

package/components/ui/popup.vue

@@ -308,7 +308,7 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 
 .ui-popup__footer {
   padding: 16px 20px;
-  border-top: 1px solid $popup-border;
+  border-top: 1px solid $popup-footer-border;
 
   @include from-br(sm) {
     padding: 16px 24px;

package/components/view/models.vue

@@ -233,10 +233,4 @@ const topCards = computed(() => {
   padding-bottom: 16px;
   border-bottom: 1px solid $page-models-popular-border;
 }
-
-.view-models__categories {
-  margin-top: auto;
-  padding-top: 32px;
-  border-top: 1px solid $page-models-categories-border;
-}
 </style>

package/package.json

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

package/components/dev/theme-switch.vue

@@ -1,38 +0,0 @@
-<template>
-  <button
-    class="dev-theme-switch"
-    type="button"
-    @click="toggle"
-  >
-    {{ label }}
-  </button>
-</template>
-
-<script setup lang="ts">
-type ThemeName = 'dark' | 'light';
-
-const { data, refresh } = await useFetch<{ theme: ThemeName }>('/api/dev/theme', { server: false });
-
-const label = computed(() => (data.value?.theme === 'light' ? 'theme: light' : 'theme: dark'));
-
-const toggle = async () => {
-  const theme: ThemeName = data.value?.theme === 'light' ? 'dark' : 'light';
-
-  await $fetch('/api/dev/theme', { method: 'POST', body: { theme } });
-  await refresh();
-};
-</script>
-
-<style lang="scss">
-.dev-theme-switch {
-  justify-self: center;
-  padding: 6px 12px;
-  border: 1px solid #888;
-  border-radius: 6px;
-  background-color: #222;
-  color: #fff;
-  cursor: pointer;
-
-  @include font-xs;
-}
-</style>

package/server/api/dev/theme.ts

@@ -1,31 +0,0 @@
-import { readFile, writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
-
-type ThemeName = 'dark' | 'light';
-
-const THEME_FILE = resolve(process.cwd(), 'assets/scss/vars/_theme.scss');
-
-export default defineEventHandler(async (event) => {
-  if (!import.meta.dev) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
-  }
-
-  if (event.method === 'GET') {
-    const content = await readFile(THEME_FILE, 'utf8');
-
-    return { theme: (content.includes('themes/light') ? 'light' : 'dark') as ThemeName };
-  }
-
-  const body = await readBody<{ theme?: ThemeName }>(event);
-  const theme: ThemeName = body?.theme === 'light' ? 'light' : 'dark';
-
-  await writeFile(
-    THEME_FILE,
-    '// Active theme. Switch by pointing the forward at another file in themes/.\n'
-    + '// The dev-only footer toggle rewrites exactly this line.\n'
-    + `@forward 'themes/${theme}';\n`,
-    'utf8',
-  );
-
-  return { theme };
-});