修复EXIF

astro.config.mjs

@@ -5,9 +5,11 @@ import Icons from "unplugin-icons/vite";
 
 export default defineConfig({
   base: "/themes/warm-island",
+  compressHTML: true,
   build: {
     assets: "assets",
     format: "file",
+    cssMinify: true,
   },
   outDir: "./templates",
   integrations: [vue()],

package.json

@@ -29,14 +29,9 @@
     ]
   },
   "dependencies": {
-    "@astrojs/mdx": "^5.0.3",
-    "@astrojs/rss": "^4.0.18",
     "@astrojs/vue": "^6.0.1",
-    "@halo-dev/api-client": "^2.23.0",
     "astro": "^6.1.4",
-    "ky": "^2.0.0",
     "lightgallery": "^2.9.0",
-    "sharp": "^0.34.5",
     "vue": "^3.5.32"
   },
   "devDependencies": {

settings.yaml

@@ -189,6 +189,26 @@ spec:
           name: home_pinned_title
           label: 置顶模块标题
           value: 置顶
+        - $formkit: text
+          name: home_posts_title
+          label: 文章模块标题
+          value: 文章
+        - $formkit: switch
+          name: home_card_show_visit
+          label: 文章卡片显示阅读量
+          value: true
+        - $formkit: switch
+          name: home_card_show_wordcount
+          label: 文章卡片显示字数
+          value: true
+        - $formkit: switch
+          name: home_card_show_category
+          label: 文章卡片显示分类
+          value: true
+        - $formkit: switch
+          name: home_card_show_tags
+          label: 文章卡片显示标签
+          value: true
         - $formkit: number
           name: home_excerpt_lines
           label: 文章简介显示行数

src/components/CursorGlow.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from "vue";
 
-const x = ref(0);
-const y = ref(0);
+const glowEl = ref<HTMLElement | null>(null);
 const visible = ref(false);
+var rafId = 0;
 
 function handleMouseMove(e: MouseEvent) {
-  x.value = e.clientX;
-  y.value = e.clientY;
+  if (rafId) return;
+  rafId = requestAnimationFrame(() => {
+    if (glowEl.value) {
+      glowEl.value.style.transform = `translate(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%))`;
+    }
+    rafId = 0;
+  });
   visible.value = true;
 }
 
@@ -16,21 +21,22 @@ function handleMouseLeave() {
 }
 
 onMounted(() => {
-  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mousemove", handleMouseMove, { passive: true });
   document.addEventListener("mouseleave", handleMouseLeave);
 });
 
 onUnmounted(() => {
   document.removeEventListener("mousemove", handleMouseMove);
   document.removeEventListener("mouseleave", handleMouseLeave);
+  if (rafId) cancelAnimationFrame(rafId);
 });
 </script>
 
 <template>
   <div
+    ref="glowEl"
     class="wi-cursor-glow"
     :class="{ 'wi-cursor-glow--visible': visible }"
-    :style="{ transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))` }"
   />
 </template>
 

src/components/LightGallery.astro

@@ -2,7 +2,12 @@
 ---
 
 <script>
-  import 'lightgallery/css/lightgallery-bundle.css';
+  import 'lightgallery/css/lightgallery.css';
+  import 'lightgallery/css/lg-zoom.css';
+  import 'lightgallery/css/lg-thumbnail.css';
+  import 'lightgallery/css/lg-fullscreen.css';
+  import 'lightgallery/css/lg-rotate.css';
+  import 'lightgallery/css/lg-autoplay.css';
   import lightGallery from 'lightgallery';
   import lgZoom from 'lightgallery/plugins/zoom';
   import lgThumbnail from 'lightgallery/plugins/thumbnail';
@@ -84,9 +89,12 @@
       showZoomInOutIcons: true,
       toggleThumb: true,
       allowMediaOverlap: true,
-      autoplay: false,
-      slideDelay: 5000,
+      autoplay: true,
+      slideShowAutoplay: false,
+      slideShowInterval: 5000,
       progressBar: true,
+      autoplayControls: true,
+      forceSlideShowAutoplay: false,
       rotate: true,
       flipHorizontal: false,
       flipVertical: false,
@@ -107,6 +115,10 @@
     markInitialized(el);
   }
 
+  function isMobile() {
+    return window.innerWidth < 768;
+  }
+
   function initLightGallery() {
     initContentPages();
     initPhotosPage();
@@ -122,6 +134,18 @@
         }
       }
     }, true);
+
+    document.addEventListener('click', function(e) {
+      var link = e.target.closest('.wi-lightgallery-item');
+      if (link) {
+        setTimeout(function() {
+          var lgOuter = document.querySelector('.lg-outer');
+          if (lgOuter && !lgOuter.classList.contains('wi-thumb-shown') && !isMobile()) {
+            lgOuter.classList.add('wi-thumb-shown');
+          }
+        }, 350);
+      }
+    });
   }
 
   function initContentPages() {

src/components/Navbar.astro

@@ -51,7 +51,7 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
       </button>
 
       <th:block th:if="${theme.config?.navbar?.navbar_show_theme_switch != false}">
-        <ThemeSwitcher client:load />
+        <ThemeSwitcher client:idle />
       </th:block>
 
       <button

src/components/PhotosSection.astro

@@ -28,6 +28,7 @@ const pageConfig = findPageBySlug("photos");
                       th:alt="${photo.spec.displayName ?: ''}"
                       class="wi-photos-section__image"
                       loading="lazy"
+                      decoding="async"
                     />
                   </div>
                 </a>

src/layouts/Layout.astro

@@ -72,8 +72,8 @@ const { pageTitle, contentClass, wide, home } = Astro.props;
     </main>
     <Footer />
     <MobileMenu />
-    <ScrollReveal client:load />
-    <CursorGlow th:if="${theme.config?.animation?.animation_cursor_glow}" client:load />
+    <ScrollReveal client:visible />
+    <CursorGlow th:if="${theme.config?.animation?.animation_cursor_glow}" client:idle />
   </body>
 </html>
 

src/pages/archives.astro

@@ -11,7 +11,7 @@ import Layout from "../layouts/Layout.astro";
     <header class="wi-archives__header">
       <h1 class="wi-archives__title">归档</h1>
       <span class="wi-page-accent"></span>
-      <p class="wi-archives__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', archives.total)}"></p>
+      <p class="wi-archives__subtitle" th:text="|共 ${archives.total} 篇文章|"></p>
     </header>
 
     <section class="wi-archives__timeline" aria-label="Archive timeline">

src/pages/category.astro

@@ -14,7 +14,7 @@ import Layout from "../layouts/Layout.astro";
         th:text="${category.spec.displayName}"
       ></h1>
       <span class="wi-page-accent"></span>
-      <p class="wi-category__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', posts.total)}"></p>
+      <p class="wi-category__subtitle" th:text="|共 ${posts.total} 篇文章|"></p>
       <p
         th:if="${not #strings.isEmpty(category.spec.description)}"
         class="wi-category__description"

src/pages/index.astro

@@ -60,36 +60,74 @@ import HeroSection from "../components/HeroSection.astro";
 
   <section class="wi-home-posts" id="wi-home-posts">
     <div class="wi-container">
+      <div class="wi-section__header">
+        <h2 class="wi-section__title" th:text="${theme.config?.home?.home_posts_title ?: '文章'}">文章</h2>
+      </div>
       <div class="wi-flow" id="wi-post-grid">
-        <a
+        <article
           th:each="post : ${posts.items}"
           th:if="${!post.spec.pinned}"
-          th:href="@{${post.status.permalink}}"
           class="wi-flow__card"
           th:classappend="${!#strings.isEmpty(post.spec.cover)} ? 'wi-flow__card--with-cover' : ''"
         >
+          <a
+            class="wi-flow__stretched-link"
+            th:href="@{${post.status.permalink}}"
+            tabindex="-1"
+            aria-hidden="true"
+          ></a>
           <div class="wi-flow__body">
             <div class="wi-flow__meta">
-              <span
-                class="wi-flow__category"
-                th:if="${!#lists.isEmpty(post.categories)}"
-                th:text="${post.categories[0].spec.displayName}"
-              ></span>
+              <th:block th:if="${(theme.config?.home?.home_card_show_category ?: true) and !#lists.isEmpty(post.categories)}">
+                <span class="wi-flow__categories">
+                  <a
+                    th:each="cat : ${post.categories}"
+                    th:href="@{${cat.status.permalink}}"
+                    th:text="${cat.spec.displayName}"
+                    class="wi-flow__category-link"
+                  ></a>
+                </span>
+              </th:block>
               <time
                 class="wi-flow__date"
                 th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
               ></time>
             </div>
+            <a
+              th:href="@{${post.status.permalink}}"
+              class="wi-flow__title-link"
+            >
               <h3
                 class="wi-flow__title"
                 th:text="${post.spec.title}"
               ></h3>
+            </a>
             <p
               class="wi-flow__excerpt"
               th:if="${post.status.excerpt}"
               th:text="${post.status.excerpt}"
               th:style="'-webkit-line-clamp:' + (${theme.config?.home?.home_excerpt_lines ?: 3})"
             ></p>
+            <div class="wi-flow__footer">
+              <th:block th:if="${(theme.config?.home?.home_card_show_tags ?: true) and post.tags != null and !#lists.isEmpty(post.tags)}">
+                <div class="wi-flow__tags">
+                  <a
+                    th:each="tag : ${post.tags}"
+                    th:href="@{${tag.status.permalink}}"
+                    th:text="${tag.spec.displayName}"
+                    class="wi-flow__tag-link"
+                  ></a>
+                </div>
+              </th:block>
+              <div class="wi-flow__stats">
+                <span
+                  class="wi-flow__stat"
+                  th:if="${theme.config?.home?.home_card_show_visit ?: true}"
+                >
+                  <th:block th:text="${post.stats?.visit ?: 0}"></th:block> 阅读
+                </span>
+              </div>
+            </div>
           </div>
           <div
             class="wi-flow__cover"
@@ -97,7 +135,7 @@ import HeroSection from "../components/HeroSection.astro";
           >
             <img th:src="${post.spec.cover}" th:alt="${post.spec.title}" class="wi-flow__image" />
           </div>
-        </a>
+        </article>
       </div>
 
       <nav
@@ -396,13 +434,19 @@ import HeroSection from "../components/HeroSection.astro";
     overflow: hidden;
     background: var(--bg-raised);
     box-shadow: var(--shadow-sm);
-    text-decoration: none;
     color: inherit;
+    position: relative;
     transition:
       transform var(--duration-normal) var(--ease-out-expo),
       box-shadow var(--duration-normal) var(--ease-out-expo);
   }
 
+  .wi-flow__stretched-link {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
   .wi-flow__card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
@@ -448,20 +492,37 @@ import HeroSection from "../components/HeroSection.astro";
     flex-wrap: wrap;
   }
 
-  .wi-flow__category {
+  .wi-flow__categories {
     font-size: var(--text-xs);
-    color: var(--accent);
     letter-spacing: var(--tracking-wide);
-    text-transform: uppercase;
     font-weight: 600;
   }
 
-  .wi-flow__category::after {
+  .wi-flow__categories::after {
     content: '·';
     margin-left: var(--space-sm);
+    margin-right: var(--space-sm);
     color: var(--ink-3);
   }
 
+  .wi-flow__category-link {
+    color: var(--accent);
+    text-decoration: none;
+    position: relative;
+    z-index: 2;
+    transition: color var(--duration-fast) var(--ease-out-quart);
+  }
+
+  .wi-flow__category-link:hover {
+    color: var(--accent-hover);
+    text-decoration: underline;
+  }
+
+  .wi-flow__category-link + .wi-flow__category-link::before {
+    content: '、';
+    color: var(--accent);
+  }
+
   .wi-flow__date {
     font-size: var(--text-xs);
     color: var(--ink-3);
@@ -469,6 +530,12 @@ import HeroSection from "../components/HeroSection.astro";
     text-transform: uppercase;
   }
 
+  .wi-flow__title-link {
+    text-decoration: none;
+    position: relative;
+    z-index: 2;
+  }
+
   .wi-flow__title {
     font-family: var(--font-sans);
     font-size: var(--text-lg);
@@ -493,6 +560,57 @@ import HeroSection from "../components/HeroSection.astro";
     margin-block-end: 0;
   }
 
+  .wi-flow__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: auto;
+    padding-top: var(--space-xs);
+  }
+
+  .wi-flow__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .wi-flow__tag-link {
+    font-size: 11px;
+    color: var(--ink-3);
+    text-decoration: none;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--bg);
+    border: 1px solid var(--rule);
+    position: relative;
+    z-index: 2;
+    transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), background var(--duration-fast) var(--ease-out-quart);
+    white-space: nowrap;
+  }
+
+  .wi-flow__tag-link:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
+  }
+
+  .wi-flow__stats {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--text-xs);
+    color: var(--ink-3);
+    white-space: nowrap;
+  }
+
+  .wi-flow__stat + .wi-flow__stat::before {
+    content: '·';
+    margin-right: 0.5rem;
+    color: var(--ink-3);
+  }
+
   .wi-pagination {
     display: flex;
     align-items: center;
@@ -561,5 +679,11 @@ import HeroSection from "../components/HeroSection.astro";
       width: 100%;
       aspect-ratio: 16 / 9;
     }
+
+    .wi-flow__footer {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.4rem;
+    }
   }
 </style>

src/pages/moments.astro

@@ -37,6 +37,7 @@ import LightGallery from "../components/LightGallery.astro";
                             th:alt="''"
                             class="wi-moments-page__image"
                             loading="lazy"
+                            decoding="async"
                           />
                         </th:block>
                       </div>
@@ -93,6 +94,7 @@ import LightGallery from "../components/LightGallery.astro";
                           th:alt="''"
                           class="wi-moments-page__card-image"
                           loading="lazy"
+                          decoding="async"
                         />
                       </th:block>
                     </div>
@@ -148,6 +150,7 @@ import LightGallery from "../components/LightGallery.astro";
                           th:alt="''"
                           class="wi-moments-page__masonry-image"
                           loading="lazy"
+                          decoding="async"
                         />
                       </th:block>
                     </div>

src/pages/photos.astro

@@ -68,6 +68,7 @@ import LightGallery from "../components/LightGallery.astro";
                             th:alt="${photo.spec.displayName ?: ''}"
                             class="wi-photos-page__image"
                             loading="lazy"
+                            decoding="async"
                           />
                           <div class="wi-photos-page__overlay">
                             <span
@@ -111,6 +112,7 @@ import LightGallery from "../components/LightGallery.astro";
                           th:alt="${photo.spec.displayName ?: ''}"
                           class="wi-photos-page__image"
                           loading="lazy"
+                          decoding="async"
                         />
                         <div class="wi-photos-page__overlay">
                           <span
@@ -148,6 +150,7 @@ import LightGallery from "../components/LightGallery.astro";
                           th:alt="${photo.spec.displayName ?: ''}"
                           class="wi-photos-page__image"
                           loading="lazy"
+                          decoding="async"
                         />
                         <div class="wi-photos-page__overlay">
                           <span
@@ -176,6 +179,7 @@ import LightGallery from "../components/LightGallery.astro";
                         th:alt="${photo.spec.displayName ?: ''}"
                         class="wi-photos-page__image"
                         loading="lazy"
+                        decoding="async"
                       />
                       <div class="wi-photos-page__overlay">
                         <span
@@ -187,6 +191,7 @@ import LightGallery from "../components/LightGallery.astro";
                     </a>
                   </div>
                 </th:block>
+                </th:block>
               </div>
             </th:block>
           </th:block>
@@ -221,6 +226,7 @@ import LightGallery from "../components/LightGallery.astro";
                           th:alt="${photo.spec.displayName ?: ''}"
                           class="wi-photos-page__image"
                           loading="lazy"
+                          decoding="async"
                         />
                         <div class="wi-photos-page__overlay">
                           <span

src/pages/post.astro

@@ -210,12 +210,19 @@ import LightGallery from "../components/LightGallery.astro";
       if (progressBar) {
         var article = document.querySelector(".wi-post");
         if (article) {
+          var progressTicking = false;
           window.addEventListener("scroll", function () {
+            if (!progressTicking) {
+              requestAnimationFrame(function () {
                 var rect = article.getBoundingClientRect();
                 var articleHeight = article.offsetHeight;
                 var scrolled = -rect.top;
                 var progress = Math.min(Math.max(scrolled / (articleHeight - window.innerHeight), 0), 1);
                 progressBar.style.width = (progress * 100) + "%";
+                progressTicking = false;
+              });
+              progressTicking = true;
+            }
           }, { passive: true });
         }
       }
@@ -242,24 +249,34 @@ import LightGallery from "../components/LightGallery.astro";
       function buildTocHtml(headings) {
         var groups = [];
         var currentGroup = null;
+        var baseLevel = 6;
+
+        headings.forEach(function (h) {
+          var level = parseInt(h.tagName.charAt(1), 10);
+          if (level < baseLevel) baseLevel = level;
+        });
 
         headings.forEach(function (h, i) {
           var id = "wi-heading-" + i;
           h.id = id;
           var level = parseInt(h.tagName.charAt(1), 10);
 
-          if (level === 2 || !currentGroup) {
-            currentGroup = { h2: { id: id, text: h.textContent.trim() }, children: [] };
+          if (level === baseLevel || !currentGroup) {
+            currentGroup = { h2: { id: id, text: h.textContent.trim(), level: level }, children: [] };
             groups.push(currentGroup);
-          } else {
+          } else if (level > baseLevel) {
             currentGroup.children.push({ id: id, text: h.textContent.trim(), level: level });
           }
         });
 
         var html = "";
           groups.forEach(function (group) {
+            var linkClasses = "wi-toc__link";
+            if (group.children.length > 0) {
+              linkClasses += " wi-toc__link--group";
+            }
             html += '<div class="wi-toc__group" data-h2="' + group.h2.id + '">';
-          html += '<a class="wi-toc__link wi-toc__link--h2" href="#' + group.h2.id + '">' + group.h2.text + '</a>';
+            html += '<a class="' + linkClasses + ' wi-toc__link--h' + group.h2.level + '" href="#' + group.h2.id + '">' + group.h2.text + '</a>';
             if (group.children.length > 0) {
             html += '<div class="wi-toc__sub">';
             group.children.forEach(function (child) {
@@ -286,16 +303,12 @@ import LightGallery from "../components/LightGallery.astro";
           var tocLinks = tocNav.querySelectorAll(".wi-toc__link");
 
           tocGroups.forEach(function (group) {
-            var h2Link = group.querySelector(".wi-toc__link--h2");
-            if (h2Link) {
-              h2Link.addEventListener("click", function (e) {
+            var groupLink = group.querySelector(".wi-toc__link--group");
+            if (groupLink) {
+              groupLink.addEventListener("click", function (e) {
                 e.preventDefault();
-                var isExpanded = group.classList.contains("wi-toc__group--expanded");
-                tocGroups.forEach(function (g) { g.classList.remove("wi-toc__group--expanded"); });
-                if (!isExpanded) {
-                  group.classList.add("wi-toc__group--expanded");
-                }
-                var targetId = h2Link.getAttribute("href").substring(1);
+                group.classList.toggle("wi-toc__group--expanded");
+                var targetId = groupLink.getAttribute("href").substring(1);
                 var target = document.getElementById(targetId);
                 if (target) {
                   target.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -394,16 +407,12 @@ import LightGallery from "../components/LightGallery.astro";
         var drawerGroups = tocDrawerNav.querySelectorAll(".wi-toc__group");
         tocDrawerNav.querySelectorAll(".wi-toc__link").forEach(function (link) {
           link.addEventListener("click", function (e) {
-            var h2Link = link.classList.contains("wi-toc__link--h2");
-            if (h2Link) {
+            var isGroupLink = link.classList.contains("wi-toc__link--group");
+            if (isGroupLink) {
               e.preventDefault();
               var group = link.closest(".wi-toc__group");
               if (group) {
-                var isExpanded = group.classList.contains("wi-toc__group--expanded");
-                drawerGroups.forEach(function (g) { g.classList.remove("wi-toc__group--expanded"); });
-                if (!isExpanded) {
-                  group.classList.add("wi-toc__group--expanded");
-                }
+                group.classList.toggle("wi-toc__group--expanded");
               }
               var targetId = link.getAttribute("href").substring(1);
               var target = document.getElementById(targetId);
@@ -967,9 +976,13 @@ import LightGallery from "../components/LightGallery.astro";
     transition: max-height 0.3s ease, opacity 0.25s ease;
   }
 
-  .wi-toc__group--active .wi-toc__sub,
+  .wi-toc__group--active .wi-toc__sub {
+    max-height: 600px;
+    opacity: 1;
+  }
+
   .wi-toc__group--expanded .wi-toc__sub {
-    max-height: 500px;
+    max-height: 600px;
     opacity: 1;
   }
 
@@ -998,14 +1011,14 @@ import LightGallery from "../components/LightGallery.astro";
     background: color-mix(in srgb, var(--accent) 8%, transparent);
   }
 
-  .wi-toc__link--h2 {
+  .wi-toc__link--group {
     padding-left: 0;
     padding-right: 4px;
     font-weight: 500;
     cursor: pointer;
   }
 
-  .wi-toc__link--h2::before {
+  .wi-toc__link--group::before {
     content: "";
     display: inline-block;
     width: 4px;
@@ -1017,7 +1030,25 @@ import LightGallery from "../components/LightGallery.astro";
     transition: background 0.15s ease;
   }
 
-  .wi-toc__link--active.wi-toc__link--h2::before {
+  .wi-toc__link--group::after {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-right: 1.5px solid var(--ink-3);
+    border-bottom: 1.5px solid var(--ink-3);
+    transform: rotate(-45deg);
+    margin-left: 6px;
+    vertical-align: middle;
+    transition: transform 0.2s ease, border-color 0.15s ease;
+  }
+
+  .wi-toc__group--expanded > .wi-toc__link--group::after,
+  .wi-toc__group--active > .wi-toc__link--group::after {
+    transform: rotate(45deg);
+  }
+
+  .wi-toc__link--active.wi-toc__link--group::before {
     background: var(--accent);
   }
 

src/pages/tag.astro

@@ -11,7 +11,7 @@ import Layout from "../layouts/Layout.astro";
     <header class="wi-tag__header">
       <h1 class="wi-tag__title" th:text="${tag.spec.displayName}"></h1>
       <span class="wi-page-accent"></span>
-      <p class="wi-tag__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', posts.total)}"></p>
+      <p class="wi-tag__subtitle" th:text="|共 ${posts.total} 篇文章|"></p>
       <p
         th:if="${not #strings.isEmpty(tag.spec.description)}"
         class="wi-tag__description"
@@ -46,6 +46,7 @@ import Layout from "../layouts/Layout.astro";
             th:src="${post.spec.cover}"
             alt=""
             loading="lazy"
+            decoding="async"
           />
         </a>
       </li>

src/styles/_lightgallery.scss

@@ -81,6 +81,7 @@ $lg-thumb-height: 100px;
   font-size: 13px;
   letter-spacing: 0.02em;
   padding: 48px 16px 12px;
+  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .wi-lg-caption {
@@ -165,6 +166,7 @@ $lg-thumb-height: 100px;
 
 .lg-progress-bar {
   height: 2px;
+  top: 0;
 }
 
 .lg-progress-bar .lg-progress {
@@ -173,16 +175,35 @@ $lg-thumb-height: 100px;
   border-radius: 1px;
 }
 
+.lg-autoplay-button {
+  &.lg-icon::after {
+    content: '';
+    display: none;
+  }
+}
+
+.lg-outer.lg-show-autoplay .lg-autoplay-button {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .lg-outer .lg-thumb-outer {
-  display: none !important;
+  transform: translateY(100%);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
 }
 
 .lg-outer.wi-thumb-shown .lg-thumb-outer {
-  display: block !important;
+  transform: translateY(0);
 }
 
 .lg-outer.wi-thumb-shown .lg-inner {
   bottom: $lg-thumb-height !important;
+  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lg-outer.wi-thumb-shown .lg-sub-html {
+  bottom: $lg-thumb-height;
+  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .lg-outer .lg-item {
@@ -337,6 +358,10 @@ html.dark {
   .lg-outer.wi-thumb-shown .lg-inner {
     bottom: 80px !important;
   }
+
+  .lg-outer.wi-thumb-shown .lg-sub-html {
+    bottom: 80px;
+  }
 }
 
 @media (max-width: $breakpoint-sm - 1px) {