@xingwangzhe/stalux 1.29.7 → 1.30.0

package/src/styles/theme/article.css

@@ -0,0 +1,562 @@
+@layer components {
+    /* randomPost */
+
+    .stalux-random-refresh:hover {
+        color: var(--accent-60p, #0066cc);
+    }
+
+    .stalux-random-refresh:active {
+        opacity: 0.7;
+    }
+
+    .stalux-random-refresh svg {
+        width: 1em;
+        height: 1em;
+    }
+
+    .stalux-random-refresh.stalux-random-rotating svg {
+        animation: stalux-random-spin 0.6s linear;
+    }
+
+    @keyframes stalux-random-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .stalux-random-loading,
+    .stalux-random-error,
+    .stalux-random-no-more {
+        @apply text-center;
+        padding: 1em;
+        color: var(--foreground-60p, #666);
+        font-size: 0.95em;
+    }
+
+    .stalux-random-list > li > a {
+        @apply block no-underline;
+        padding: 0.75em 1em;
+        border-radius: 0.375em;
+        background: transparent;
+        color: var(--foreground-60p, #333);
+        transition:
+            color 0.2s ease,
+            transform 0.2s ease;
+        word-break: break-word;
+    }
+
+    .stalux-random-list > li > a:hover {
+        transform: translateX(0.25em);
+    }
+
+    .stalux-random-list > li > a:active {
+        transform: translateX(0.125em);
+    }
+    @media (prefers-color-scheme: dark) {
+        .stalux-random-header {
+            border-bottom-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .stalux-random-title {
+            color: var(--foreground-60p, #e0e0e0);
+        }
+
+        .stalux-random-refresh {
+            color: var(--foreground-60p, #e0e0e0);
+        }
+
+        .stalux-random-loading,
+        .stalux-random-error,
+        .stalux-random-no-more {
+            color: var(--foreground-60p, #b0b0b0);
+        }
+
+        .stalux-random-list > li > a {
+            color: var(--foreground-60p, #e0e0e0);
+        }
+    }
+
+    /* postToc */
+
+    .stalux-toc-item:hover {
+        transform: translateX(calc(-1 * var(--space-sm)));
+    }
+
+    .stalux-toc-item:active,
+    .stalux-toc-item.stalux-toc-active {
+        color: var(--accent-90p);
+        background-color: var(--accent-20p);
+        border-left-color: var(--accent-80p);
+        font-weight: 500;
+    }
+
+    .stalux-toc-depth-1 {
+        @apply [padding-left:var(--space-xs)];
+    }
+
+    .stalux-toc-depth-2 {
+        @apply [padding-left:var(--space-lg)] [font-size:var(--font-size-smaller)];
+    }
+
+    .stalux-toc-depth-3 {
+        @apply [padding-left:2.25rem] [font-size:var(--font-size-tiny)];
+    }
+
+    .stalux-toc-depth-4,
+    .stalux-toc-depth-5,
+    .stalux-toc-depth-6 {
+        padding-left: var(--space-2xl);
+        font-size: 0.75rem;
+        color: var(--white-60p);
+    }
+
+    /* postTaxonomy */
+
+    :is(
+        .stalux-post-taxonomy-list,
+        .stalux-post-taxonomy-list-column,
+        .stalux-post-taxonomy-list-wrap
+    ) {
+        @apply flex;
+        gap: var(--space-sm);
+    }
+
+    .stalux-post-taxonomy-item-column:hover {
+        transform: translateX(4px);
+    }
+
+    .stalux-post-taxonomy-item-column:active {
+        transform: translateX(2px);
+    }
+
+    .stalux-post-taxonomy-item-pill:hover {
+        transform: translateY(-2px);
+    }
+
+    .stalux-post-taxonomy-item-pill:active {
+        transform: translateY(-1px);
+    }
+
+    /* postSidebar */
+    :is(.stalux-sidebar, .stalux-sidebar-right) {
+        @apply sticky w-full h-fit overflow-y-auto stalux-stack;
+        top: 20px;
+        max-height: calc(100vh - 40px);
+        gap: var(--space-lg);
+        padding: var(--space-lg) 0;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    :is(.stalux-sidebar, .stalux-sidebar-right)::-webkit-scrollbar {
+        @apply hidden;
+    }
+
+    @media (max-width: 1400px) {
+        .stalux-sidebar-right {
+            width: 240px;
+        }
+    }
+
+    @media (max-width: 1200px) {
+        :is(.stalux-sidebar, .stalux-sidebar-right) {
+            @apply hidden;
+        }
+    }
+
+    @media (max-width: 768px) {
+        :is(.stalux-sidebar, .stalux-sidebar-right),
+        .stalux-sidebar-right {
+            @apply hidden;
+        }
+    }
+
+    /* postNavigation */
+
+    .stalux-pagination-link::before {
+        @apply absolute w-full h-full pointer-events-none;
+        content: "";
+        top: 0;
+        left: 0;
+        background: linear-gradient(120deg, transparent, var(--accent-20p), transparent);
+        transition: transform var(--transition-slow);
+        transform: scaleX(0);
+        transform-origin: left;
+    }
+
+    .stalux-pagination-link:hover {
+        transform: translateY(-3px);
+        box-shadow: var(--shadow-raised-hover);
+    }
+
+    .stalux-pagination-link:hover::before {
+        transform: scaleX(1);
+    }
+
+    .stalux-pagination-link.stalux-pagination-disabled {
+        @apply pointer-events-none;
+        opacity: 0.5;
+        cursor: not-allowed;
+        background: var(--black-15p);
+    }
+
+    .stalux-pagination-link.stalux-pagination-prev-post {
+        @apply text-left;
+        margin-left: var(--space-xs);
+    }
+
+    .stalux-pagination-link.stalux-pagination-next-post {
+        @apply text-right;
+        justify-content: flex-end;
+        margin-right: var(--space-xs);
+    }
+    @media (max-width: 768px) {
+        .stalux-pagination {
+            margin: var(--space-md) 0;
+        }
+
+        .stalux-pagination-inner {
+            gap: var(--space-sm);
+        }
+
+        .stalux-pagination-link {
+            @apply flex-col items-start justify-center;
+            padding: var(--space-sm) var(--space-md);
+            min-height: 120px;
+        }
+
+        .stalux-pagination-link.stalux-pagination-next-post {
+            @apply items-end;
+        }
+
+        .stalux-pagination-arrow {
+            transform: scale(0.85);
+        }
+
+        .stalux-pagination-label {
+            font-size: 0.75rem;
+            margin-bottom: var(--space-xs);
+        }
+
+        .stalux-pagination-title {
+            @apply max-w-full;
+            font-size: var(--font-size-small);
+            white-space: normal;
+        }
+    }
+    @media (max-width: 480px) {
+        .stalux-pagination {
+            margin: var(--space-md) 0;
+        }
+
+        .stalux-pagination-inner {
+            @apply flex-col;
+            gap: var(--space-sm);
+        }
+
+        .stalux-pagination-link {
+            @apply w-full flex-row items-center justify-start;
+            padding: var(--space-sm) var(--space-md);
+            min-height: 100px;
+            gap: var(--space-md);
+        }
+
+        .stalux-pagination-link.stalux-pagination-prev-post,
+        .stalux-pagination-link.stalux-pagination-next-post {
+            @apply text-left items-center;
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .stalux-pagination-link.stalux-pagination-next-post {
+            @apply justify-start;
+        }
+
+        .stalux-pagination-title {
+            white-space: normal;
+        }
+    }
+
+    /* postLayout */
+    .stalux-post-layout > :nth-child(1) {
+        @apply m-0;
+    }
+
+    .stalux-post-layout > :nth-child(2) {
+        @apply min-w-0 m-0;
+    }
+
+    .stalux-post-layout > :nth-child(3) {
+        @apply m-0;
+    }
+    @media (min-width: 1600px) {
+        .stalux-post-layout {
+            grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(240px, 280px);
+            gap: 4rem;
+            padding: 2rem 1.5rem;
+        }
+    }
+    @media (max-width: 1400px) {
+        .stalux-post-layout {
+            grid-template-columns: 260px 1fr 260px;
+            gap: 3.5rem;
+            padding: 1.5rem 1rem;
+        }
+    }
+    @media (max-width: 1200px) {
+        .stalux-post-layout {
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            padding: 1rem 0.75rem;
+        }
+    }
+    @media (max-width: 768px) {
+        .stalux-post-page {
+            @apply p-0;
+        }
+
+        .stalux-post-layout {
+            @apply stalux-stack p-0 m-0;
+            gap: 2rem;
+        }
+        .stalux-post-layout > :nth-child(2) {
+            order: 1;
+        }
+
+        .stalux-post-layout > :nth-child(1) {
+            order: 2;
+        }
+
+        .stalux-post-layout > :nth-child(3) {
+            order: 3;
+        }
+    }
+    @media (max-width: 480px) {
+        .stalux-post-layout {
+            @apply p-0;
+            gap: 1.25rem;
+        }
+    }
+    @media print {
+        .stalux-post-layout {
+            grid-template-columns: 1fr;
+            gap: 2rem;
+        }
+
+        .stalux-post-layout > :nth-child(1),
+        .stalux-post-layout > :nth-child(3) {
+            @apply hidden;
+        }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .stalux-post-page * {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+    @media (prefers-contrast: more) {
+        .stalux-post-layout {
+            gap: 2rem;
+        }
+    }
+    .stalux-post-layout :focus-visible {
+        outline: 2px solid var(--accent-80p);
+        outline-offset: 2px;
+    }
+
+    /* postContent */
+
+    .stalux-post-page-stats span {
+        @apply inline-flex items-center;
+        gap: 0.3rem;
+    }
+
+    #stalux-post-vercount_value_page_pv {
+        @apply font-semibold;
+        color: #ffffffb3;
+    }
+
+    #stalux-post-vercount_container_page_pv {
+        transition: opacity 0.3s ease;
+    }
+
+    .stalux-post-source-link:hover,
+    .stalux-post-source-link:focus,
+    .stalux-post-source-link:active {
+        @apply no-underline;
+        background: var(--accent, #ffffff22);
+        border-top-color: var(--accent, #ffffff44);
+        border-right-color: var(--accent, #ffffff44);
+        border-left-color: var(--accent, #ffffff44);
+        transform: translateY(-1px);
+    }
+    .stalux-post-source-link::after {
+        display: none !important;
+    }
+
+    @keyframes stalux-post-content-reveal {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @media (max-width: 1024px) {
+        .stalux-post-title {
+            font-size: 2rem;
+        }
+
+        .stalux-post-metadata {
+            gap: 1rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .stalux-article {
+            @apply m-0 w-full p-0 box-border;
+            background: transparent;
+            box-shadow: none;
+        }
+
+        .stalux-post-body {
+            @apply w-full m-0;
+            padding: 0 0.75rem;
+        }
+
+        .stalux-post-article-header {
+            margin-bottom: 2rem;
+            padding: 1rem 1rem 0;
+        }
+
+        .stalux-post-title {
+            font-size: 1.75rem;
+        }
+
+        .stalux-post-metadata {
+            @apply flex-col;
+            gap: 0.75rem;
+            font-size: 0.85rem;
+        }
+
+        .stalux-post-article-footer {
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+        }
+        .stalux-post-page-stats {
+            font-size: 0.85rem;
+            margin-top: 0.8rem;
+            padding-top: 0.6rem;
+        }
+    }
+
+    @keyframes stalux-post-fade-in-up {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* postCC */
+
+    .stalux-license-author,
+    .stalux-license-url,
+    .stalux-license-license {
+        margin: var(--space-sm) 0;
+        font-size: var(--font-size-small);
+        color: var(--white-80p);
+        line-height: 1.6;
+    }
+
+    .stalux-license-box a {
+        @apply no-underline relative;
+        color: var(--accent-90p);
+        transition:
+            color var(--transition-normal),
+            border-bottom-color var(--transition-normal);
+        border-bottom: 1px dashed var(--accent-50p);
+        padding-bottom: 1px;
+    }
+
+    .stalux-license-box a:hover {
+        color: var(--stalux-accent-color);
+        border-bottom-color: var(--accent-80p);
+    }
+
+    .stalux-license-box a:active {
+        color: var(--accent-70p);
+    }
+
+    .stalux-license-box:hover .stalux-license-watermark {
+        opacity: 0.25;
+    }
+
+    .stalux-license-icon svg {
+        @apply w-full h-full block;
+    }
+
+    .stalux-license-icon path {
+        fill: currentColor;
+        color: var(--white-full);
+    }
+    @media (max-width: 768px) {
+        .stalux-license-box {
+            max-width: 95%;
+            padding: var(--space-md);
+            margin: var(--space-md) auto;
+        }
+
+        .stalux-license-title {
+            font-size: var(--font-size-base);
+            margin-bottom: var(--space-xs);
+        }
+
+        .stalux-license-author,
+        .stalux-license-url,
+        .stalux-license-license {
+            margin: var(--space-xs) 0;
+            font-size: 0.85rem;
+        }
+
+        .stalux-license-icon {
+            width: 80px;
+            height: 80px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .stalux-license-box {
+            @apply max-w-full;
+            padding: var(--space-sm);
+            margin: var(--space-md) 0;
+        }
+
+        .stalux-license-title {
+            font-size: var(--font-size-small);
+            margin-bottom: var(--space-2xs);
+        }
+
+        .stalux-license-author,
+        .stalux-license-url,
+        .stalux-license-license {
+            margin: var(--space-2xs) 0;
+            font-size: 0.8rem;
+        }
+
+        .stalux-license-icon {
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    /* postAuthor */
+}