NodeSeek Clean Theme by lxfy

/* ==UserStyle==
@name           NodeSeek Clean Theme
@namespace      github.com/openstyles
@version        1.0.0
@description    A simple and content-focused NodeSeek forum theme style.
@author         LucidLynx
@license        MIT
==/UserStyle== */

/* 
 * NodeSeek Clean Theme
 * 
 * This is a minimalist theme designed for the NodeSeek forum.
 * It is more suitable for distraction-free reading and work environments.
 * 
 * Features:
 * 1. Removes all unnecessary visual elements.
 * 2. Hides avatars and emojis.
 * 3. Expands the main content area.
 * 4. Optimizes readability and typography.
 */

@-moz-document domain("nodeseek.com") {
    /* 基础样式重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 基础变量定义 
    * --main-bg: 主背景色
    * --text-color: 正文文本颜色
    * --link-color: 链接颜色
    * --link-hover: 链接悬停颜色
    * --border-color: 边框颜色
    */
    :root {
        --main-bg: #ffffff;
        --text-color: #333333;
        --link-color: #2c3e50;
        --link-hover: #3498db;
        --border-color: #eee;
    }

    /* 移除表情和装饰字符 
    * 包括：
    * - emoji 表情
    * - 表情图片
    * - SVG 图标（除了导航按钮）
    * - Unicode 表情符号
    */
    [class*="emoji"],
    [class*="emoticon"],
    [class*="smiley"],
    img[src*="emoji"],
    img[alt*="emoji"],
    img[src*=".svg"]:not([id="back-to-top"] *):not([id="back-to-bottom"] *),
    .emoji-mart,
    .emoji-picker,
    .emoji-wrapper,
    .emojione,
    .emojify,
    span[role="img"],
    [class*="reaction"],
    [data-emoji],
    [aria-label*="emoji"],
    [title*="emoji"],
    [class*="twemoji"],
    [class*="moji"],
    img[draggable="false"],
    .iconpark-icon:not(#back-to-top .iconpark-icon):not(#back-to-bottom .iconpark-icon) {
        display: none !important;
        font-size: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 移除 Unicode 表情符号 */
    * {
        font-variant-emoji: none !important;
    }

    /* 基础布局设置 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: none !important;
        color: var(--text-color);
        line-height: 1.6;
        margin: 0;
    }

    /* 移除装饰元素 
    * 包括：
    * - 用户卡片
    * - 头像
    * - 徽章
    * - 背景图片
    * - 横幅
    */
    .hover-user-card,
    .avatar-large,
    .user-badges,
    .decorative-icons,
    .background-patterns,
    .special-effects,
    .animations,
    .user-avatar,
    .avatar,
    .avatar-wrapper,
    .avatar-normal,
    img[src*="/avatar/"],
    img[data-uid],
    img[alt*="avatar"],
    .user-profile-avatar,
    .sidebar,
    .side-widgets,
    .right-sidebar,
    .left-sidebar,
    .widget-area,
    .background-image,
    .background-overlay,
    .site-background,
    .decorative-background,
    .profile-banner,
    .user-banner,
    .banner-image,
    .site-header-background,
    .header-image,
    .footer-background,
    .footer-image,
    .logo-background,
    .theme-background,
    .page-background,
    #nsk-right-panel-container {
        display: none !important;
    }

    /* 移除头像相关的父元素 */
    [class*="avatar"],
    [class*="profile-pic"],
    [class*="user-pic"],
    [class*="user-image"],
    a:has(img[src*="/avatar/"]),
    div:has(> img[src*="/avatar/"]) {
        display: none !important;
    }

    /* 移除背景图片和效果 */
    [class*="background"],
    [class*="bg-"],
    [style*="background"] {
        background: none !important;
        background-image: none !important;
        backdrop-filter: none !important;
    }

    /* 移除边栏和额外布局 */
    .layout-sidebar,
    .layout-3col,
    .layout-with-sidebar,
    .container-with-sidebar,
    [class*="sidebar"],
    [class*="widget"],
    [class*="aside"],
    .secondary-content,
    .supplementary-content,
    .additional-content,
    [id*="panel"],
    [class*="panel"] {
        display: none !important;
    }

    /* 扩展主内容区域 
    * 使内容占据全屏宽度
    */
    #nsk-main-container,
    .main-container,
    .content-container,
    [class*="main-content"],
    [class*="content-area"] {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 15px !important;
        float: none !important;
        flex: 1 1 100% !important;
    }

    /* 修复布局包装器 */
    .layout-wrapper,
    .site-wrapper,
    .page-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 禁用非必要图片 */
    img:not([src*="avatar"]),
    .image,
    .picture,
    .thumbnail,
    .preview-image,
    .post-image,
    .thread-image {
        display: none !important;
    }

    /* 头部导航布局 */
    .user-head {
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
        background: none !important;
    }

    .user-head .menu {
        padding: 10px;
    }

    .user-head .Username {
        font-size: 14px;
        font-weight: 500;
        color: var(--link-color);
    }

    .user-head .iconpark-icon {
        display: none;
    }

    /* 论坛内容容器 */
    .forum-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 15px;
    }

    /* 帖子列表样式 */
    .thread-list {
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 15px;
        background: var(--main-bg) !important;
    }

    .thread-item {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .thread-item:last-child {
        border-bottom: none;
    }

    /* 按钮统一样式 */
    button,
    .button {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 8px 16px;
        color: var(--text-color);
        cursor: pointer;
    }

    button:hover,
    .button:hover {
        background: #e9ecef;
    }

    /* 内容排版优化 */
    .post-content,
    .thread-content {
        font-size: 14px;
        line-height: 1.6;
        max-width: 100%;
        overflow-x: auto;
    }

    /* 导航菜单样式 */
    .navigation-menu {
        background: #f8f9fa;
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .navigation-menu a {
        color: var(--link-color);
        text-decoration: none;
        padding: 8px 16px;
    }

    .navigation-menu a:hover {
        color: var(--link-hover);
    }

    /* 强制单列布局容器 */
    .container,
    .content-area,
    .main-content,
    .site-content {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        float: none !important;
        padding: 15px !important;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .forum-container {
            grid-template-columns: 1fr;
        }
        
        .thread-list {
            margin: 8px;
        }
    } 

    /* 添加返回顶部和底部按钮样式 */
    #back-to-top,
    #back-to-bottom {
        display: block !important;
        position: fixed;
        right: 20px;
        z-index: 1000;
        background: rgba(248, 249, 250, 0.9) !important;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 8px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    #back-to-top {
        bottom: 80px;
    }

    #back-to-bottom {
        bottom: 30px;
    }

    #back-to-top .iconpark-icon,
    #back-to-bottom .iconpark-icon {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        color: var(--text-color) !important;
    }

    #back-to-top:hover,
    #back-to-bottom:hover {
        background: rgba(233, 236, 239, 0.9) !important;
    } 
}