fixed 样式bug

themes/Ying/assets/css/main.css

@@ -554,6 +554,7 @@ ul {
     flex-direction: column;
     align-items: stretch;
     gap: 16px;
+    text-align: left; /* Reset text align from .main center */
 }
 
 .header-top {
@@ -563,7 +564,7 @@ ul {
     gap: 16px;
 }
 
-.head_author_img {
+.header-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -630,43 +631,47 @@ ul {
     margin-bottom: 0;
 }
 
-.header nav {
+/* Updated Header Semantics */
+.header-menu {
     border-top: 1px solid #f4f4f4;
     transition: border-color 0.35s ease;
 }
 
-.header nav ul,
-.header nav li {
+.header-menu ul,
+.header-menu li {
     margin: 0;
 }
 
-.header nav ul.flat {
+.header-menu ul.flat {
     padding: 0;
+    /* Flexbox layout for easier spacing control */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 20px; /* [PC Setting] Adjust this value to change spacing between items */
 }
 
-.header nav ul.flat li {
-    display: inline-block;
+.header-menu ul.flat li {
+    display: block;
     list-style: none;
-    margin-left: 0;
-    margin-right: 16px;
-    margin-top: 20px;
+    margin: 10px 0 0 0;
     text-transform: capitalize;
 }
 
-.header nav ul.flat li.active a {
+.header-menu ul.flat li.active a {
     color: #24292e;
 }
 
-.header nav ul.flat li a {
+.header-menu ul.flat li a {
     color: #586069;
 }
 
-.header nav ul.flat li a:hover {
+.header-menu ul.flat li a:hover {
     color: #646464;
     text-decoration: none;
 }
 
-.header .site-description {
+.header-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -674,32 +679,30 @@ ul {
     margin-top: 0;
 }
 
-.header .site-description h2 {
-    display: none;
-}
-
-.header .site-description nav {
+.header-social {
     margin: 0;
     padding: 0;
     border: none;
     min-width: 50px;
     margin-bottom: 0;
     text-align: center;
+    /* Reset gap for social icons as they rely on margin */
+    gap: 0; 
 }
 
-.header .site-description nav ul a {
+.header-social a {
     display: inline-block;
     margin: 0 5px;
     text-decoration: none;
     transition: all 0.2s ease;
 }
 
-.header .site-description nav ul a i {
+.header-social a i {
     font-size: 1.15rem;
     vertical-align: middle;
 }
 
-.header .site-description nav ul a:hover {
+.header-social a:hover {
     color: #24292e;
     transform: scale(1.2);
 }
@@ -717,23 +720,121 @@ ul {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 3px;
     transition: all 0.3s ease;
     margin: 0; /* Reset margin */
+    position: relative; /* Ensure wrapper is positioned relative to this */
 }
 
-.search-hint {
-    font-size: 0.75rem;
-    font-weight: normal;
-    color: #999;
+/* Search Hint Wrapper */
+.search-hint-wrapper {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(10px);
+    display: flex;
+    align-items: center;
+    gap: 8px;
     opacity: 0;
-    transform: translateX(-10px);
-    transition: all 0.3s ease;
+    visibility: hidden;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: none;
+    z-index: 10;
+    white-space: nowrap;
+    margin-left: 10px;
 }
 
-.section-header.normal-mode:hover .search-hint {
+.search-hint-wrapper.visible {
     opacity: 1;
-    transform: translateX(0);
+    visibility: visible;
+    transform: translateY(-50%) translateX(10px); /* Match the base/hover position */
+}
+
+.section-header.normal-mode:hover .search-hint-wrapper {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Mascot - Emoticon */
+.search-mascot {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    /* Remove shadow/border as requested */
+    border: none; 
+    box-shadow: none;
+    filter: none;
+    animation: mascot-shake 2.5s infinite ease-in-out;
+    transform-origin: bottom center;
+}
+
+@keyframes mascot-shake {
+    0%, 100% { transform: rotate(0deg); }
+    10% { transform: rotate(5deg); }
+    20% { transform: rotate(-5deg); }
+    30% { transform: rotate(3deg); }
+    40% { transform: rotate(-3deg); }
+    50% { transform: rotate(0deg); }
+}
+
+/* Clean Bubble Style - Mimic .barrage-bubble */
+.search-hint {
+    background: #000000; /* Pure Black Background */
+    color: #ffffff;
+    padding: 7px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.4;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    border: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: auto;
+    min-height: auto;
+    white-space: nowrap;
+    width: fit-content;
+    max-width: none;
+    margin-top: 1px;
+    z-index: 10;
+}
+
+/* Arrow - Optimized tip */
+.search-hint::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -5px;
+    margin-top: -5px;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid #000000; /* Match black background */
+    background: transparent;
+    box-shadow: none;
+    transform: none;
+    filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.1));
+}
+
+[data-theme="dark"] .search-hint {
+    background: #ffffff; /* White background for dark mode contrast */
+    color: #000000;
+    border: none; 
+    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+}
+
+[data-theme="dark"] .search-hint::before {
+    background: transparent;
+    border-right-color: #ffffff;
+    border-left: none;
+    border-bottom: 5px solid transparent;
+    filter: none;
+}
+
+[data-theme="dark"] .search-mascot {
+    filter: none;
 }
 
 .search-mode {
@@ -741,85 +842,150 @@ ul {
     animation: fadeIn 0.3s ease;
 }
 
-/* Simplified Search Styles for Essay/Shuoshuo */
+/* Modern Minimalist Search Styles - Bottom Border Only */
 .search-input-group {
     position: relative;
     display: flex;
     align-items: center;
-    width: 100%;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Minimalist bottom border only */
+    width: 100%; /* Responsive width */
+    max-width: 300px; /* Maximum width for PC */
+    border: none;
+    border-bottom: 1px solid #000000;
     border-radius: 0;
-    padding: 2px 0;
+    padding: 0 4px 6px 0; /* Slightly more bottom padding */
     background: transparent;
     transition: all 0.3s ease;
+    box-shadow: none;
+}
+
+.search-input-group i {
+    border: none; /* Ensure icons have no border */
+    background: transparent;
 }
 
 .search-input-group:hover {
-    border-bottom-color: rgba(0, 0, 0, 0.3);
     background: transparent;
+    border-bottom-color: #666;
 }
 
 .search-input-group:focus-within {
     background: transparent;
-    border-color: transparent;
-    border-bottom-color: var(--theme-color, #4a90e2);
+    border-bottom-color: #000;
     box-shadow: none;
-    transform: none;
 }
 
 [data-theme="dark"] .search-input-group {
-    border-bottom-color: rgba(255, 255, 255, 0.1);
     background: transparent;
+    border-bottom-color: #ffffff;
+    box-shadow: none;
 }
 
 [data-theme="dark"] .search-input-group:hover {
-    border-bottom-color: rgba(255, 255, 255, 0.3);
     background: transparent;
+    border-bottom-color: #ccc;
 }
 
 [data-theme="dark"] .search-input-group:focus-within {
     background: transparent;
-    border-color: transparent;
-    border-bottom-color: var(--theme-color, #4a90e2);
+    border-bottom-color: #fff;
     box-shadow: none;
 }
 
 .search-input-group input {
     width: 100%;
-    border: none;
+    border: none !important;
+    border-radius: 0 !important;
     background: transparent;
-    padding: 5px 30px 5px 0; /* Left align text, space for close icon on right */
-    font-size: 0.95rem;
-    color: var(--text-title-color);
+    padding: 0 4px !important;
+    padding-left: 8px !important;
+    padding-right: 20px !important; /* Prevent text overlap with close icon */
+    font-size: 1rem;
+    color: #000000;
     outline: none;
+    height: 24px;
+    font-weight: 500;
 }
 
-/* Search Icon visible */
+/* Text color on focus */
+.search-input-group:focus-within input {
+    color: #000;
+}
+
+[data-theme="dark"] .search-input-group input {
+    color: #ffffff;
+}
+
+[data-theme="dark"] .search-input-group:focus-within input {
+    color: #ffffff;
+}
+
+/* Search Icon */
 .search-icon {
-    color: #9ca3af;
+    color: #000000;
     font-size: 1.1rem;
-    margin-right: 6px;
     transition: color 0.3s ease;
 }
 
 .search-input-group:focus-within .search-icon {
-    color: var(--text-title-color);
+    color: #000000;
+}
+
+[data-theme="dark"] .search-icon {
+    color: #ffffff;
 }
 
 [data-theme="dark"] .search-input-group:focus-within .search-icon {
-    color: var(--text-title-dark-color);
+    color: #ffffff;
 }
 
-/* Close icon on the right */
+/* Close icon */
 .close-icon {
     position: absolute;
     right: 0;
-    font-size: 1.1rem;
-    color: #9ca3af;
+    font-size: 1rem;
+    color: #999;
     cursor: pointer;
     transition: all 0.2s;
     opacity: 0;
     transform: scale(0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+}
+
+.search-input-group:focus-within .close-icon {
+    color: #cccccc;
+}
+
+.close-icon:hover {
+    background: rgba(0,0,0,0.1);
+    color: #000;
+}
+
+.search-input-group:focus-within .close-icon:hover {
+    background: rgba(255,255,255,0.2);
+    color: #fff;
+}
+
+[data-theme="dark"] .close-icon {
+    color: #aaa;
+}
+
+[data-theme="dark"] .search-input-group:focus-within .close-icon {
+    color: #666;
+}
+
+[data-theme="dark"] .close-icon:hover {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+}
+
+[data-theme="dark"] .search-input-group:focus-within .close-icon:hover {
+    background: rgba(0,0,0,0.1);
+    color: #000;
 }
 
 .search-input-group.has-value .close-icon {
@@ -827,23 +993,18 @@ ul {
     transform: scale(1);
 }
 
-.close-icon:hover {
-    color: var(--theme-color, #4a90e2);
-}
-
 .search-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
-    background: rgba(255, 255, 255, 0.98); /* Less transparent for readability */
-    /* backdrop-filter: blur(12px); Removed for cleaner look */
-    border-radius: 4px; /* Sharper corners */
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow */
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    margin-top: 5px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Soft shadow */
+    border: 1px solid #f0f0f0; /* Subtle border */
+    margin-top: 8px; /* Spacing from input */
     overflow: hidden;
-    z-index: 50;
+    z-index: 100;
     opacity: 0;
     transform: translateY(5px);
     visibility: hidden;
@@ -857,28 +1018,40 @@ ul {
 }
 
 [data-theme="dark"] .search-dropdown {
-    background: #1f2933;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    background: #2a2a2a;
+    border: 1px solid #444;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
 }
 
 .search-result-item {
-    padding: 8px 10px;
-    border-bottom: none; /* Clean list */
+    padding: 10px 14px;
+    border-bottom: 1px solid #f0f0f0;
     display: flex;
     flex-direction: column;
     transition: background-color 0.2s;
 }
 
+[data-theme="dark"] .search-result-item {
+    border-bottom: 1px solid #333;
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
 .search-result-meta {
     display: flex;
     justify-content: flex-start; /* Left align */
     gap: 10px;
     font-size: 0.75rem;
-    color: #999;
+    color: #666;
     margin-top: 2px;
 }
 
+[data-theme="dark"] .search-result-meta {
+    color: #aaa;
+}
+
 .search-result-summary-text {
     max-width: 80%;
     white-space: nowrap;
@@ -888,45 +1061,45 @@ ul {
 
 .no-result {
     text-align: left;
-    color: #999;
-    padding: 10px;
+    color: #666;
+    padding: 12px 16px;
     font-size: 0.9rem;
     cursor: default;
 }
 
-[data-theme="dark"] .search-result-item {
-    border-bottom: none;
+[data-theme="dark"] .no-result {
+    color: #aaa;
 }
 
 .search-result-item:hover {
-    background: rgba(0,0,0,0.03);
+    background: #f5f5f5;
 }
 
 [data-theme="dark"] .search-result-item:hover {
-    background: rgba(255,255,255,0.05);
+    background: #1a1a1a;
 }
 
 .search-result-title {
     display: block;
-    font-weight: normal; /* Lighter weight */
-    font-size: 0.9rem;
-    color: var(--text-title-color);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: #000000;
     margin-bottom: 0;
 }
 
 [data-theme="dark"] .search-result-title {
-    color: var(--text-title-dark-color);
+    color: #ffffff;
 }
 
 .search-result-date {
     font-size: 0.75rem;
-    color: #999;
+    color: #666;
     margin-right: 10px;
 }
 
 .search-result-summary {
     font-size: 0.85rem;
-    color: #666;
+    color: #444;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -935,7 +1108,7 @@ ul {
 }
 
 [data-theme="dark"] .search-result-summary {
-    color: #9ca3af;
+    color: #ccc;
 }
 
 @keyframes fadeIn {
@@ -950,11 +1123,74 @@ ul {
 
 /* Mobile Adaptation */
 @media (max-width: 767px) {
+    .searchable-header-container {
+        flex-wrap: wrap; 
+        height: auto;
+        min-height: 40px;
+    }
+
+    .section-header.normal-mode {
+        font-size: 1rem; 
+    }
+
+    /* Adjust Hint Wrapper Position for Mobile */
+    .search-hint-wrapper {
+        position: relative; 
+        left: auto;
+        top: auto;
+        transform: none !important; 
+        margin-left: 8px;
+        opacity: 1; 
+    }
+
+    .search-hint-wrapper.visible {
+        transform: none !important;
+    }
+
+    .search-mascot {
+        width: 28px; 
+        height: 28px;
+    }
+
     .search-hint {
         opacity: 1;
-        transform: translateX(0);
-        display: inline-block;
-        margin-left: 8px;
+        font-size: 12px;
+        padding: 5px 10px;
+        margin-top: 0;
+        white-space: normal; 
+        max-width: 200px; 
+    }
+    
+    /* Ensure Input Group fits and is comfortable */
+    .search-input-group {
+        padding: 0 0 6px 0;
+        margin-top: 5px;
+        background: transparent;
+        width: 100%;
+        max-width: 280px; /* Slightly wider on mobile for better usability */
+    }
+    
+    [data-theme="dark"] .search-input-group {
+        background: transparent;
+    }
+    
+    .search-input-group input {
+        font-size: 16px; /* 16px prevents iOS zoom entirely */
+        padding-right: 20px;
+        height: 24px;
+        padding-left: 5px;
+    }
+    
+    .close-icon {
+        right: 0;
+        width: 20px;
+        height: 20px;
+    }
+
+    .search-dropdown {
+        width: 100%;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        border: none;
     }
 }
 .pjax-leave {
@@ -1258,6 +1494,35 @@ ul {
     .highlight pre::-webkit-scrollbar {
         display: none;
     }
+
+    /* Mobile Navigation Optimization - Single Line Scrollable */
+    .header-menu {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+        scrollbar-width: none; /* Firefox */
+        margin-left: -30px; /* Extend to edges */
+        margin-right: -30px;
+        padding-left: 30px; /* Start content aligned */
+        border-top: 1px solid #f4f4f4;
+    }
+    
+    .header-menu::-webkit-scrollbar {
+        display: none; /* Hide scrollbar for Chrome/Safari */
+    }
+
+    .header-menu ul.flat {
+        display: flex;
+        flex-wrap: nowrap; /* Prevent wrapping */
+        white-space: nowrap;
+        gap: 20px; /* Comfortable touch spacing */
+        align-items: center;
+        padding-right: 30px; /* Ensure scrolling reaches the end with padding */
+    }
+
+    .header-menu ul.flat li {
+        flex: 0 0 auto; /* Do not shrink */
+        margin-top: 10px; /* Maintain vertical spacing from border */
+    }
 }
 
 /* 代码复制按钮 */
@@ -4138,7 +4403,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
 /* Inline Search Styles */
 .searchable-header-container {
     position: relative;
-    margin-top: 15px;
+    /* margin-top: 15px; */
     height: 13px; 
     display: flex;
     align-items: center;
@@ -4156,177 +4421,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
     opacity: 0.7;
 }
 
-.search-hint {
-    font-size: 12px;
-    font-weight: normal;
-    color: #999;
-    margin-left: 10px;
-    opacity: 0; /* Hidden by default */
-    transform: translateX(-5px);
-    transition: all 0.3s ease;
-    display: inline-block;
-    vertical-align: middle;
-}
 
-.section-header.normal-mode:hover .search-hint {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-/* Mobile: always show hint to ensure discoverability */
-@media (max-width: 768px) {
-    .search-hint {
-        opacity: 0.6;
-        transform: translateX(0);
-    }
-}
-
-.search-mode {
-    width: 100%;
-    animation: fadeIn 0.3s ease;
-}
-
-.search-input-group {
-    display: flex;
-    align-items: center;
-    background: transparent;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 0 5px;
-    width: 100%;
-    max-width: 300px;
-    transition: all 0.3s ease;
-}
-
-.search-input-group:focus-within {
-    background: transparent;
-    border-bottom-color: var(--text-highlight-color);
-    box-shadow: none;
-}
-
-.search-input-group input {
-    border: none;
-    background: transparent;
-    flex: 1;
-    padding: 5px 5px; /* Reduced side padding */
-    font-size: 14px;
-    outline: none;
-    color: #333;
-}
-
-.search-input-group .search-icon {
-    color: #999;
-    font-size: 18px; /* Slightly larger */
-    margin-right: 4px;
-}
-
-.search-input-group .close-icon {
-    color: #999;
-    cursor: pointer;
-    font-size: 16px;
-    padding: 5px;
-}
-
-.search-input-group .close-icon:hover {
-    color: #333;
-}
-
-.search-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-width: 300px;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    z-index: 100;
-    max-height: 300px;
-    overflow-y: auto;
-    display: none;
-    margin-top: 5px;
-    border: 1px solid #eee;
-}
-
-.search-dropdown .search-result-item {
-    padding: 10px 15px;
-    font-size: 14px;
-    display: block; /* Ensure it behaves like a block */
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit text color */
-    cursor: pointer;
-    border-left: none; /* Removed accent border */
-    transition: background-color 0.2s;
-}
-
-.search-dropdown .search-result-item:hover {
-    background-color: #f5f5f5;
-    text-decoration: none;
-}
-
-.search-dropdown .search-result-title {
-    font-size: 15px;
-    font-weight: 600;
-    display: block; /* Ensure title is block to break line */
-    color: #333;
-}
-
-.search-dropdown .search-result-summary {
-    font-size: 12px;
-    -webkit-line-clamp: 1;
-}
-
-/* Dark Mode for Inline Search */
-[data-theme="dark"] .search-input-group {
-    background: transparent;
-    border-bottom-color: #444;
-    box-shadow: none;
-}
-
-[data-theme="dark"] .search-input-group:focus-within {
-    background: transparent;
-    border-bottom-color: var(--text-highlight-color);
-    box-shadow: none;
-}
-
-[data-theme="dark"] .search-input-group input {
-    color: #e0e0e0;
-}
-
-[data-theme="dark"] .search-input-group .search-icon {
-    color: #888;
-}
-
-[data-theme="dark"] .search-input-group .close-icon {
-    color: #888;
-}
-
-[data-theme="dark"] .search-input-group .close-icon:hover {
-    color: #fff;
-    background-color: transparent;
-}
-
-[data-theme="dark"] .search-dropdown {
-    background: #2d2d2d;
-    border-color: #444;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-[data-theme="dark"] .search-dropdown .search-result-item {
-    color: #e0e0e0;
-}
-
-[data-theme="dark"] .search-dropdown .search-result-item:hover {
-    background-color: #383838;
-}
-
-[data-theme="dark"] .search-dropdown .search-result-title {
-    color: #e0e0e0;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateX(-10px); }
-    to { opacity: 1; transform: translateX(0); }
-}
 
 /* Album / Light and Shadow Page Styles - Waterfall Flow Refined */
 .album-content {