Created
February 6, 2026 00:00
-
-
Save Gishi1/639159d6c4757fb26fc9262d482b7e26 to your computer and use it in GitHub Desktop.
Complete dark theme with book filtering styling for WebNovel.com - Fixed image visibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @ *name WebNovel Enhanced Dark + Filter Styling - FIXED | |
| @namespace WebNovelDarkEnhanced | |
| @version 5.0 | |
| @description Complete dark theme with book filtering styling for WebNovel.com - Fixed image visibility | |
| @author idMysteries and Gishi | |
| @match https://www.webnovel.com/* | |
| @run-at document-start | |
| ==/UserStyle== */ | |
| /* ===== MODERN DARK THEME ===== */ | |
| /* Base colors */ | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-tertiary: #1a1a24; | |
| --bg-card: #16161e; | |
| --bg-hover: #1e1e28; | |
| --text-primary: #e4e4e7; | |
| --text-secondary: #a1a1aa; | |
| --text-muted: #71717a; | |
| --accent-primary: #38bdf8; | |
| --accent-secondary: #22d3ee; | |
| --accent-gold: #fbbf24; | |
| --accent-green: #34d399; | |
| --accent-red: #f87171; | |
| --border-subtle: rgba(255,255,255,0.06); | |
| --border-light: rgba(255,255,255,0.1); | |
| } | |
| /* Main backgrounds */ | |
| html, body, .header { | |
| color: var(--text-secondary) !important; | |
| background: var(--bg-primary) !important; | |
| background-color: var(--bg-primary) !important; | |
| background-image: none !important; | |
| } | |
| .det-hd, .cha-page-in, .cha-lst, .hom-rec-1st .hom-thumb i, .hom-rec-1st .hom-thumb span, .hom-rec-1st .hom-thumb::after, .hom-rec-1st .hom-thumb i::before, .hom-rec-1st .hom-thumb i::after | |
| { background-color: var(--bg-primary) !important; } | |
| .m-streamer, .hom-books a img, .m-update th, .g_lang p, .g_wrap .g_bread, .det-h2, .ui-select-datalist-li, .g_msg_hd, .hom-bd::before, .g_drop_sel ._bd, .m-main-wrap, .m-main, .m-cell, .bt-cha-link, .g_mod_hd, .cha-modal-bd, .mr5, .bt_fff | |
| { background-color: var(--bg-tertiary) !important; } | |
| /* Header - modern gradient */ | |
| .g_header, .g_share a, .g_msg_bd ._readmore, h2.g_wrap, .mb5 .c_strong, .g_goTop, .g_sub_hd h2, .bt_lg, .cha-lst h3, .hom-bd .cf, .j_bookList .lst-item a:nth-of-type(2) | |
| { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)) !important; } | |
| .g_lang p a:hover, .g_lang strong, .ui-select-button, .hom-sign .bt, .g_mod ._close, .lst-nav ._on, .det-info .bt_lg | |
| { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; color: var(--bg-primary) !important; } | |
| .lst-chapter, .ui-select-datalist-li:hover, .g_msg .g_msg_bd, .g_drop_sel a:hover, .g_mod, .g_mod_login, .g_sub_hd, .cha-tit, .lst-item, .g_sub_hd .g_wrap, .g_footer | |
| { background-color: var(--bg-secondary) !important; } | |
| .hom-bd::before, .g_mod, .g_mod_login._on, .hom-rec-1st .hom-thumb i, .hom-rec-1st .hom-thumb span, .hom-rec-1st .hom-thumb::after, .hom-rec-1st .hom-thumb i::before, .hom-rec-1st .hom-thumb i::after, .bt_fff | |
| { background-image: none !important; } | |
| .g_msg_bd ._readmore | |
| { background: linear-gradient(to right, transparent, var(--bg-tertiary) 1em) !important; } | |
| .cha-header .g_logo, .g_header .g_logo | |
| { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border-radius: 8px !important; } | |
| /* Text colors */ | |
| [color="#000"], [color="#000000"], [color="Black"], .det-con-ol li a.c_strong:visited, .hom-sign p, .g_sub_hd ._shadow, .cha-catalog a:visited strong, .hom-rec li .c_strong | |
| { color: var(--text-secondary) !important; } | |
| .m-update th, .m-update td span._tra, .g_wrap .g_bread, .det-h2, .g_drop_sel a:hover, .m-h1, .bt._f, .bt._t, .bt._g, .g_mod_hd, .cha-header .g_logo, .g_header .g_logo, svg.c_strong, .hom-h2 | |
| { color: var(--text-primary) !important; } | |
| .g_lang p a:hover, .g_lang strong, .ui-select-text, :root .ui-select-icon, .hom-sign .bt, .g_mod ._close, .lst-nav ._on, .det-info .bt_lg | |
| { color: var(--bg-primary) !important; } | |
| .g_wrap .g_bread a, .ui-select-datalist-li, .g_drop_sel ._item, .g_drop_sel a | |
| { color: var(--accent-primary) !important; } | |
| .cha-catalog a strong | |
| { color: var(--accent-primary) !important; } | |
| .hom-h1, .hom-h3, .g_star small, .det-info h2, .g_wrap .g_bread span.vam:last-child, .g_msg_bd ._readmore, .m-hd p, .g_score small, .cha-header-in .cha-hd h3 > span, .g_score small, .g_goTop, .g_sub_hd h2, .bt_lg, .cha-lst h3 | |
| { color: var(--accent-gold) !important; } | |
| [color="#00F"], [color="#0000FF"], [color="Blue"], [color="Navy"], [color="#000080"], [color="#0000F0"], [color="#0000ee"], .hom-ann small, .m-update td._l span._tim, .vam.ml10.c_small, .cha-tit h3, .cha-lst ._type | |
| { color: var(--accent-primary) !important; } | |
| .m-update td span._aut, .g_msg_hd h3:first-child span, .cha-tit p | |
| { color: var(--accent-green) !important; } | |
| p#continued strong span | |
| { color: var(--accent-red) !important; } | |
| /* Hide unnecessary elements */ | |
| .m-streamer, .hom-banner, .hom-bd::before | |
| { display: none !important; } | |
| /* Borders - subtle */ | |
| .cha-lst | |
| { border: 0 !important; } | |
| .cha-page-in, .lst-item, .hom-rec-1st .hom-thumb::before | |
| { border: 1px solid var(--border-subtle) !important; } | |
| .cha-tit | |
| { border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 7px !important; } | |
| .hom-h1 | |
| { margin-bottom: 0 !important; text-indent: 10px !important; line-height: 1.8 !important; } | |
| .m-update th | |
| { padding-top: 10px !important; text-align: center !important; } | |
| .cha-lst h3 | |
| { padding: 19px 5px !important; margin: 20px 0 20px 0 !important; } | |
| .cha-lst | |
| { padding: 0 !important; } | |
| .cha-lst ul | |
| { margin: 0 !important; } | |
| .cha-lst h4 | |
| { max-height: 80px !important; } | |
| .g_sub_hd ._shadow | |
| { opacity: 0.2 !important; } | |
| .cha-page | |
| { max-width: 75% !important; } | |
| .g_sub_hd h2 | |
| { padding: 0 10px !important; } | |
| /* Chapter content - reading area */ | |
| .cha-content { | |
| background-color: var(--bg-primary) !important; | |
| color: var(--text-secondary) !important; | |
| } | |
| .cha-content p { | |
| font-size: 20px !important; | |
| text-indent: 1em !important; | |
| line-height: 180% !important; | |
| letter-spacing: 0.3px !important; | |
| padding-bottom: 1em !important; | |
| color: var(--text-primary) !important; | |
| } | |
| .g_msg_bd ._readmore | |
| { font-size: 11px !important; } | |
| .hom-h1 | |
| { font-size: 24px !important; } | |
| /* Typography */ | |
| body * { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; | |
| } | |
| body * { | |
| text-decoration: none !important; | |
| text-shadow: none !important; | |
| } | |
| body h1, body h2, body h3, body h4, body h5, body h6, body ul, body li, body ol, body span, body p, body dt, body dd, body dl | |
| { background-color: transparent !important; } | |
| body h1, body h2, body h3, body h4, body h5, body h6, body th, body em, body b, body strong, label | |
| { color: var(--text-primary) !important; } | |
| body div, body p | |
| { color: var(--text-secondary) !important; } | |
| body blockquote { | |
| color: var(--text-secondary) !important; | |
| background-color: var(--bg-tertiary) !important; | |
| background-image: none !important; | |
| border-left: 3px solid var(--accent-primary) !important; | |
| padding: 12px 16px !important; | |
| border-radius: 0 8px 8px 0 !important; | |
| } | |
| body textarea { | |
| color: var(--text-primary) !important; | |
| background-color: var(--bg-tertiary) !important; | |
| background-image: none !important; | |
| border: 1px solid var(--border-light) !important; | |
| border-radius: 8px !important; | |
| padding: 12px !important; | |
| } | |
| body table, body tr, body td | |
| { background-color: transparent !important; color: var(--text-secondary) !important; background-image: none !important; } | |
| body select, body option { | |
| background-color: var(--bg-tertiary) !important; | |
| color: var(--text-primary) !important; | |
| border: 1px solid var(--border-light) !important; | |
| border-radius: 6px !important; | |
| } | |
| body input[type="text"] { | |
| color: var(--text-primary) !important; | |
| background-color: var(--bg-tertiary) !important; | |
| border: 1px solid var(--border-light) !important; | |
| border-radius: 8px !important; | |
| padding: 10px 14px !important; | |
| transition: border-color 0.2s ease !important; | |
| } | |
| body input[type="text"]:focus { | |
| border-color: var(--accent-primary) !important; | |
| outline: none !important; | |
| } | |
| body button, body input[type="button"], body input[type="submit"] { | |
| color: var(--bg-primary) !important; | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| padding: 10px 20px !important; | |
| font-weight: 600 !important; | |
| cursor: pointer !important; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease !important; | |
| } | |
| body button:hover, body input[type="button"]:hover, body input[type="submit"]:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3) !important; | |
| } | |
| body input[type="reset"], caption { | |
| color: var(--text-primary) !important; | |
| background-color: var(--bg-tertiary) !important; | |
| border: 1px solid var(--border-light) !important; | |
| border-radius: 8px !important; | |
| } | |
| /* Links */ | |
| body a { | |
| color: var(--accent-primary) !important; | |
| transition: color 0.2s ease !important; | |
| } | |
| body a:link { color: var(--accent-primary) !important; } | |
| body a:visited { color: #8b5cf6 !important; } | |
| body a:hover { color: var(--accent-secondary) !important; } | |
| body a:active { color: var(--accent-primary) !important; } | |
| p, span, .fs16 { color: var(--text-secondary) !important; } | |
| strong { color: var(--accent-gold) !important; } | |
| lightbox * { background: transparent !important; background-color: transparent !important; } | |
| /* Navigation tabs */ | |
| .lst-nav a, .g_tab a { | |
| background: var(--bg-tertiary) !important; | |
| color: var(--text-secondary) !important; | |
| border-radius: 8px 8px 0 0 !important; | |
| padding: 10px 20px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .lst-nav a:hover, .g_tab a:hover { | |
| background: var(--bg-hover) !important; | |
| color: var(--text-primary) !important; | |
| } | |
| .lst-nav ._on, .g_tab ._on { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; | |
| color: var(--bg-primary) !important; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px !important; | |
| height: 10px !important; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary) !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--bg-tertiary) !important; | |
| border-radius: 5px !important; | |
| border: 2px solid var(--bg-secondary) !important; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2a2a36 !important; | |
| } | |
| /* ===== CONTAINER WIDTH FIXES ===== */ | |
| /* Make main content area 80% wide */ | |
| .g_wrap, .g_row, .main-wrap, .content-wrap { | |
| width: 80% !important; | |
| max-width: 80% !important; | |
| margin: 0 auto !important; | |
| padding: 20px 0 !important; | |
| box-sizing: border-box !important; | |
| } | |
| /* Ensure inner containers don't exceed parent */ | |
| .g_wrap > .g_bd, | |
| .g_row > .g_bd, | |
| .g_wrap > .g_col_lst, | |
| .g_wrap > .fl_lst, | |
| .g_row > .tag-catalog-list, | |
| .g_row > .j_catalogList { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| } | |
| /* ===== BOOK FILTERING STYLES ===== */ | |
| /* Container styling for better grid layout - WITH MARGINS */ | |
| .g_col_lst, .fl_lst, .tag-catalog-list, .j_catalogList, .catalog-list { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| justify-content: center !important; | |
| align-items: stretch !important; | |
| gap: 30px !important; | |
| padding: 30px 25px !important; | |
| width: 100% !important; | |
| box-sizing: border-box !important; | |
| margin: 20px auto !important; | |
| max-width: 95% !important; | |
| } | |
| /* ===== BOOK LAYOUT RESTRUCTURING ===== */ | |
| /* Individual novel item styling - Modern card design */ | |
| li.fl, li.g_col, .c_item, .j_catalogItem, .catalog-item, | |
| .tag-catalog-list li, .j_catalogList li, .catalog-list li { | |
| flex: 0 0 calc(25% - 30px) !important; | |
| min-width: 320px !important; | |
| max-width: 380px !important; | |
| width: 100% !important; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| border-radius: 18px !important; | |
| overflow: hidden !important; | |
| position: relative !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| margin: 12px !important; | |
| padding: 22px !important; | |
| box-sizing: border-box !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| backdrop-filter: blur(12px) !important; | |
| min-height: 480px !important; | |
| max-height: 580px !important; | |
| } | |
| /* Score-based gradient backgrounds - Modern glass effect */ | |
| .webnovel-score-0 { | |
| background: linear-gradient(160deg, rgba(220,38,38,0.15) 0%, rgba(30,30,35,0.95) 50%, rgba(20,20,25,0.98) 100%) !important; | |
| border-color: rgba(220,38,38,0.4) !important; | |
| box-shadow: 0 8px 32px rgba(220,38,38,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important; | |
| } | |
| .webnovel-score-1 { | |
| background: linear-gradient(160deg, rgba(100,100,110,0.2) 0%, rgba(30,30,35,0.95) 50%, rgba(20,20,25,0.98) 100%) !important; | |
| border-color: rgba(100,100,110,0.3) !important; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important; | |
| } | |
| .webnovel-score-2 { | |
| background: linear-gradient(160deg, rgba(161,161,100,0.2) 0%, rgba(35,35,30,0.95) 50%, rgba(25,25,20,0.98) 100%) !important; | |
| border-color: rgba(161,161,100,0.35) !important; | |
| box-shadow: 0 8px 32px rgba(161,161,100,0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important; | |
| } | |
| .webnovel-score-3 { | |
| background: linear-gradient(160deg, rgba(34,197,94,0.2) 0%, rgba(25,35,30,0.95) 50%, rgba(18,25,20,0.98) 100%) !important; | |
| border-color: rgba(34,197,94,0.4) !important; | |
| box-shadow: 0 8px 32px rgba(34,197,94,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important; | |
| } | |
| .webnovel-score-4 { | |
| background: linear-gradient(160deg, rgba(16,185,129,0.25) 0%, rgba(20,35,30,0.95) 50%, rgba(15,25,22,0.98) 100%) !important; | |
| border-color: rgba(16,185,129,0.5) !important; | |
| box-shadow: 0 8px 32px rgba(16,185,129,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important; | |
| } | |
| .webnovel-score-5 { | |
| background: linear-gradient(160deg, rgba(56,189,248,0.25) 0%, rgba(20,30,40,0.95) 50%, rgba(15,22,32,0.98) 100%) !important; | |
| border-color: rgba(56,189,248,0.5) !important; | |
| box-shadow: 0 8px 32px rgba(56,189,248,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important; | |
| } | |
| /* Hover effects */ | |
| li.fl:hover, li.g_col:hover, .c_item:hover, | |
| .j_catalogItem:hover, .catalog-item:hover, | |
| .tag-catalog-list li:hover, .j_catalogList li:hover { | |
| transform: translateY(-6px) !important; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.1) !important; | |
| border-color: rgba(255, 255, 255, 0.3) !important; | |
| z-index: 10 !important; | |
| } | |
| /* Score-specific hover glows */ | |
| .webnovel-score-5:hover { | |
| box-shadow: 0 20px 50px rgba(56,189,248,0.3), 0 0 30px rgba(56,189,248,0.15) !important; | |
| } | |
| .webnovel-score-4:hover { | |
| box-shadow: 0 20px 50px rgba(16,185,129,0.3), 0 0 30px rgba(16,185,129,0.15) !important; | |
| } | |
| .webnovel-score-3:hover { | |
| box-shadow: 0 20px 50px rgba(34,197,94,0.25), 0 0 25px rgba(34,197,94,0.1) !important; | |
| } | |
| /* ===== IMAGE CONTAINER - MAINTAIN ASPECT RATIO ===== */ | |
| /* Remove all positioning and fixed heights from the inner structure */ | |
| li.fl > .pr, li.g_col > .pr, .c_item > .pr, .j_catalogItem > .pr, .catalog-item > .pr { | |
| position: static !important; | |
| height: auto !important; | |
| padding-left: 0 !important; | |
| width: 100% !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| flex: 1 !important; | |
| } | |
| /* Image container - FIXED ASPECT RATIO WITH LIGHT BACKGROUND */ | |
| li.fl .pa, li.g_col .pa, .c_item .pa, .j_catalogItem .pa, .catalog-item .pa { | |
| position: static !important; | |
| width: 100% !important; | |
| height: 180px !important; /* Fixed height */ | |
| margin-bottom: 15px !important; | |
| order: 1 !important; | |
| display: flex !important; | |
| justify-content: center !important; | |
| align-items: center !important; | |
| overflow: hidden !important; | |
| border-radius: 8px !important; | |
| background-color: rgba(255, 255, 255, 0.05) !important; /* LIGHT background for image contrast */ | |
| } | |
| /* Image link container */ | |
| li.fl .pa .g_thumb, li.g_col .pa .g_thumb, .c_item .pa .g_thumb, .j_catalogItem .pa .g_thumb, .catalog-item .pa .g_thumb { | |
| display: flex !important; | |
| justify-content: center !important; | |
| align-items: center !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| max-width: 140px !important; /* Limit maximum width */ | |
| background: transparent !important; /* CRITICAL FIX: Remove dark background */ | |
| background-color: transparent !important; | |
| } | |
| /* IMAGE ITSELF - MAINTAIN ASPECT RATIO */ | |
| li.fl .pa .g_thumb img, | |
| li.g_col .pa .g_thumb img, | |
| .c_item .pa .g_thumb img, | |
| .j_catalogItem .pa .g_thumb img, | |
| .catalog-item .pa .g_thumb img { | |
| width: auto !important; | |
| height: auto !important; | |
| max-width: 100% !important; | |
| max-height: 100% !important; | |
| object-fit: contain !important; | |
| border-radius: 6px !important; | |
| display: block !important; | |
| transition: transform 0.3s ease !important; | |
| background: transparent !important; /* CRITICAL FIX: Remove image background */ | |
| background-color: transparent !important; | |
| /* Preserve aspect ratio - don't set width/height attributes */ | |
| } | |
| /* Specific fix for images with width/height attributes */ | |
| li.fl .pa .g_thumb img[width][height], | |
| li.g_col .pa .g_thumb img[width][height], | |
| .c_item .pa .g_thumb img[width][height] { | |
| width: auto !important; | |
| height: auto !important; | |
| max-width: 100% !important; | |
| max-height: 100% !important; | |
| } | |
| /* Hover effect for images */ | |
| li.fl:hover .pa .g_thumb img, | |
| li.g_col:hover .pa .g_thumb img, | |
| .c_item:hover .pa .g_thumb img { | |
| transform: scale(1.03) !important; | |
| } | |
| /* Tags container - move below image */ | |
| li.fl > .pr > p.mb4, li.g_col > .pr > p.mb4, .c_item > .pr > p.mb4, .j_catalogItem > .pr > p.mb4, .catalog-item > .pr > p.mb4 { | |
| order: 2 !important; | |
| margin: 0 0 10px 0 !important; | |
| padding: 0 !important; | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 5px !important; | |
| width: 100% !important; | |
| max-height: 50px !important; | |
| overflow: hidden !important; | |
| } | |
| /* Individual tags */ | |
| li.fl > .pr > p.mb4 a, li.g_col > .pr > p.mb4 a, .c_item > .pr > p.mb4 a, .j_catalogItem > .pr > p.mb4 a, .catalog-item > .pr > p.mb4 a { | |
| margin: 0 !important; | |
| padding: 3px 6px !important; | |
| background: rgba(255, 255, 255, 0.1) !important; | |
| border-radius: 3px !important; | |
| font-size: 11px !important; | |
| color: #ffffff !important; | |
| text-decoration: none !important; | |
| transition: background 0.2s !important; | |
| white-space: nowrap !important; | |
| overflow: hidden !important; | |
| text-overflow: ellipsis !important; | |
| max-width: 100px !important; | |
| display: inline-block !important; | |
| line-height: 1.2 !important; | |
| } | |
| li.fl > .pr > p.mb4 a:hover, li.g_col > .pr > p.mb4 a:hover, .c_item > .pr > p.mb4 a:hover { | |
| background: rgba(255, 255, 255, 0.2) !important; | |
| } | |
| /* Title - move below tags */ | |
| li.fl > .pr > h3, li.g_col > .pr > h3, .c_item > .pr > h3, .j_catalogItem > .pr > h3, .catalog-item > .pr > h3 { | |
| order: 3 !important; | |
| margin: 0 0 8px 0 !important; | |
| padding: 0 !important; | |
| font-size: 16px !important; | |
| line-height: 1.3 !important; | |
| font-weight: 600 !important; | |
| color: #ffffff !important; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important; | |
| min-height: 40px !important; | |
| max-height: 52px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 2 !important; | |
| -webkit-box-orient: vertical !important; | |
| text-overflow: ellipsis !important; | |
| word-wrap: break-word !important; | |
| word-break: break-word !important; | |
| white-space: normal !important; | |
| } | |
| /* Title link */ | |
| li.fl > .pr > h3 a, li.g_col > .pr > h3 a, .c_item > .pr > h3 a, .j_catalogItem > .pr > h3 a, .catalog-item > .pr > h3 a { | |
| color: inherit !important; | |
| text-decoration: none !important; | |
| } | |
| /* Description - move below title */ | |
| li.fl > .pr > p.fw400, li.g_col > .pr > p.fw400, .c_item > .pr > p.fw400, .j_catalogItem > .pr > p.fw400, .catalog-item > .pr > p.fw400 { | |
| order: 4 !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| font-size: 13px !important; | |
| line-height: 1.4 !important; | |
| color: #cccccc !important; | |
| flex: 1 !important; | |
| max-height: 70px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 3 !important; | |
| -webkit-box-orient: vertical !important; | |
| text-overflow: ellipsis !important; | |
| word-wrap: break-word !important; | |
| word-break: break-word !important; | |
| white-space: normal !important; | |
| } | |
| /* Stats container - move to bottom */ | |
| li.fl > .pr > p.df, li.g_col > .pr > p.df, .c_item > .pr > p.df, .j_catalogItem > .pr > p.df, .catalog-item > .pr > p.df { | |
| order: 5 !important; | |
| margin: 0 !important; | |
| padding: 8px 0 0 0 !important; | |
| font-size: 11px !important; | |
| color: #aaaaaa !important; | |
| overflow: hidden !important; | |
| text-overflow: ellipsis !important; | |
| white-space: nowrap !important; | |
| line-height: 1.3 !important; | |
| min-height: 30px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: flex-start !important; | |
| gap: 12px !important; | |
| width: 100% !important; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1) !important; | |
| } | |
| /* Stats items */ | |
| li.fl > .pr > p.df > strong, li.g_col > .pr > p.df > strong, .c_item > .pr > p.df > strong, .j_catalogItem > .pr > p.df > strong, .catalog-item > .pr > p.df > strong { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 3px !important; | |
| white-space: nowrap !important; | |
| font-size: 11px !important; | |
| } | |
| /* Stats icons */ | |
| li.fl > .pr > p.df > strong svg, li.g_col > .pr > p.df > strong svg, .c_item > .pr > p.df > strong svg, .j_catalogItem > .pr > p.df > strong svg, .catalog-item > .pr > p.df > strong svg { | |
| width: 12px !important; | |
| height: 12px !important; | |
| } | |
| /* Score indicator (added by userscript) */ | |
| .novel-score { | |
| position: absolute !important; | |
| top: 14px !important; | |
| right: 14px !important; | |
| background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(30,30,30,0.95)) !important; | |
| color: white !important; | |
| padding: 5px 12px !important; | |
| border-radius: 20px !important; | |
| font-size: 12px !important; | |
| font-weight: 700 !important; | |
| z-index: 2 !important; | |
| border: 1px solid rgba(255, 255, 255, 0.15) !important; | |
| white-space: nowrap !important; | |
| backdrop-filter: blur(10px) !important; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; | |
| letter-spacing: 0.3px !important; | |
| } | |
| /* Remove button (added by userscript) */ | |
| .remove-novel { | |
| position: absolute !important; | |
| top: 14px !important; | |
| left: 14px !important; | |
| background: linear-gradient(135deg, rgba(220,38,38,0.9), rgba(185,28,28,0.95)) !important; | |
| color: white !important; | |
| border: none !important; | |
| border-radius: 20px !important; | |
| padding: 5px 12px !important; | |
| font-size: 11px !important; | |
| font-weight: 600 !important; | |
| cursor: pointer !important; | |
| z-index: 2 !important; | |
| opacity: 0; | |
| transition: all 0.3s ease !important; | |
| white-space: nowrap !important; | |
| box-shadow: 0 4px 15px rgba(220,38,38,0.3) !important; | |
| } | |
| .remove-novel:hover { | |
| background: linear-gradient(135deg, rgba(239,68,68,0.95), rgba(220,38,38,1)) !important; | |
| transform: scale(1.05) !important; | |
| } | |
| .webnovel-filter-processed:hover .remove-novel { | |
| opacity: 1 !important; | |
| } | |
| /* ===== CRITICAL IMAGE FIXES ===== */ | |
| /* Remove dark backgrounds from ALL image containers and images */ | |
| .g_thumb, .g_thumb img, .g_thumb a { | |
| background-color: transparent !important; | |
| } | |
| /* Remove background-image from list thumbnails only */ | |
| li.fl .g_thumb, li.g_col .g_thumb, .c_item .g_thumb, .j_catalogItem .g_thumb, .catalog-item .g_thumb { | |
| background-image: none !important; | |
| } | |
| /* Ensure images are fully visible */ | |
| img[src*="cover"], img[src*="book"], img[src*="novel"] { | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| background: transparent !important; | |
| } | |
| /* Fix for any remaining dark overlays */ | |
| .pr, .pa, .g_thumb, .g_thumb > a, .g_thumb > img { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| } | |
| /* ===== RESPONSIVE DESIGN ===== */ | |
| @media (max-width: 1600px) { | |
| .g_wrap, .g_row, .main-wrap, .content-wrap { | |
| width: 85% !important; | |
| max-width: 85% !important; | |
| } | |
| li.fl, li.g_col, .c_item, .j_catalogItem, .catalog-item, | |
| .tag-catalog-list li, .j_catalogList li { | |
| flex: 0 0 calc(33.333% - 25px) !important; | |
| min-width: 300px !important; | |
| max-width: 350px !important; | |
| } | |
| li.fl .pa, li.g_col .pa, .c_item .pa { | |
| height: 160px !important; | |
| } | |
| li.fl .pa .g_thumb { | |
| max-width: 120px !important; | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .g_wrap, .g_row, .main-wrap, .content-wrap { | |
| width: 90% !important; | |
| max-width: 90% !important; | |
| } | |
| li.fl, li.g_col, .c_item, .j_catalogItem, .catalog-item, | |
| .tag-catalog-list li, .j_catalogList li { | |
| flex: 0 0 calc(50% - 20px) !important; | |
| min-width: 280px !important; | |
| max-width: 320px !important; | |
| } | |
| li.fl > .pr > h3, li.g_col > .pr > h3, .c_item > .pr > h3 { | |
| font-size: 15px !important; | |
| min-height: 35px !important; | |
| max-height: 46px !important; | |
| } | |
| li.fl .pa, li.g_col .pa, .c_item .pa { | |
| height: 150px !important; | |
| } | |
| li.fl .pa .g_thumb { | |
| max-width: 110px !important; | |
| } | |
| li.fl > .pr > p.fw400, li.g_col > .pr > p.fw400, .c_item > .pr > p.fw400 { | |
| font-size: 12px !important; | |
| max-height: 60px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .g_wrap, .g_row, .main-wrap, .content-wrap { | |
| width: 95% !important; | |
| max-width: 95% !important; | |
| padding: 10px 0 !important; | |
| } | |
| li.fl, li.g_col, .c_item, .j_catalogItem, .catalog-item, | |
| .tag-catalog-list li, .j_catalogList li { | |
| flex: 0 0 100% !important; | |
| min-width: 100% !important; | |
| max-width: 100% !important; | |
| margin: 8px 0 !important; | |
| min-height: 420px !important; | |
| max-height: 500px !important; | |
| } | |
| .g_col_lst, .fl_lst, .tag-catalog-list, .j_catalogList { | |
| padding: 15px 10px !important; | |
| gap: 20px !important; | |
| } | |
| li.fl .pa, li.g_col .pa, .c_item .pa { | |
| height: 160px !important; | |
| } | |
| li.fl .pa .g_thumb { | |
| max-width: 130px !important; | |
| } | |
| li.fl > .pr > h3, li.g_col > .pr > h3, .c_item > .pr > h3 { | |
| font-size: 15px !important; | |
| min-height: 35px !important; | |
| max-height: 46px !important; | |
| } | |
| li.fl > .pr > p.fw400, li.g_col > .pr > p.fw400, .c_item > .pr > p.fw400 { | |
| font-size: 13px !important; | |
| max-height: 65px !important; | |
| } | |
| } | |
| /* Enhanced glow effects for higher scores */ | |
| .webnovel-score-4, .webnovel-score-5 { | |
| box-shadow: | |
| 0 8px 20px rgba(0, 0, 0, 0.2), | |
| 0 0 15px rgba(66, 178, 90, 0.3) !important; | |
| } | |
| .webnovel-score-3 { | |
| box-shadow: | |
| 0 8px 20px rgba(0, 0, 0, 0.2), | |
| 0 0 10px rgba(93, 137, 108, 0.3) !important; | |
| } | |
| /* Animation for newly processed elements */ | |
| @keyframes webnovelFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .webnovel-filter-processed { | |
| animation: webnovelFadeIn 0.5s ease-out !important; | |
| } | |
| /* Classes for JavaScript manipulation */ | |
| .webnovel-hidden { | |
| opacity: 0.5 !important; | |
| transform: scale(0.95) !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .webnovel-removing { | |
| animation: webnovelFadeOut 0.3s ease-in forwards !important; | |
| } | |
| @keyframes webnovelFadeOut { | |
| to { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| } | |
| /* Force aspect ratio preservation for all images */ | |
| li.fl img, li.g_col img, .c_item img, .j_catalogItem img, .catalog-item img { | |
| aspect-ratio: attr(width) / attr(height) !important; | |
| } | |
| /* Ensure images don't stretch */ | |
| img[src*="bookcover"] { | |
| object-position: center center !important; | |
| image-rendering: auto !important; | |
| } | |
| /* ===== TAGS PAGE LAYOUT FIX ===== */ | |
| /* Custom classes applied by JavaScript - completely override site styles */ | |
| /* Book item container */ | |
| .wn-book-item { | |
| position: static !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| align-items: stretch !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| padding: 0 !important; | |
| } | |
| /* Link containing image and title */ | |
| .wn-book-link { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| align-items: center !important; | |
| width: 100% !important; | |
| margin-bottom: 12px !important; | |
| text-decoration: none !important; | |
| color: inherit !important; | |
| } | |
| /* Image container */ | |
| .wn-img-container { | |
| display: block !important; | |
| width: 150px !important; | |
| height: auto !important; | |
| margin: 0 auto 18px auto !important; | |
| overflow: hidden !important; | |
| border-radius: 10px !important; | |
| background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important; | |
| position: static !important; | |
| left: auto !important; | |
| top: auto !important; | |
| font-style: normal !important; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease !important; | |
| } | |
| .wn-img-container:hover { | |
| transform: scale(1.03) !important; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important; | |
| } | |
| /* Image itself */ | |
| .wn-img { | |
| display: block !important; | |
| width: 100% !important; | |
| height: auto !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| transition: transform 0.3s ease !important; | |
| } | |
| /* Title */ | |
| .wn-title { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| font-size: 17px !important; | |
| line-height: 1.35 !important; | |
| font-weight: 700 !important; | |
| color: #ffffff !important; | |
| min-height: 46px !important; | |
| max-height: 46px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 2 !important; | |
| -webkit-box-orient: vertical !important; | |
| letter-spacing: 0.2px !important; | |
| } | |
| /* Tags container */ | |
| .wn-tags { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 6px !important; | |
| max-height: 56px !important; | |
| overflow: hidden !important; | |
| } | |
| /* Individual tag links - pill style */ | |
| .wn-tags a { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| padding: 4px 10px !important; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important; | |
| border: 1px solid rgba(255,255,255,0.1) !important; | |
| border-radius: 20px !important; | |
| font-size: 10px !important; | |
| font-weight: 500 !important; | |
| color: #d0d0d0 !important; | |
| text-decoration: none !important; | |
| white-space: nowrap !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.5px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .wn-tags a:hover { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)) !important; | |
| border-color: rgba(255,255,255,0.25) !important; | |
| color: #ffffff !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| /* First tag (category) - highlighted */ | |
| .wn-tags a:first-child { | |
| background: linear-gradient(135deg, rgba(56,169,218,0.3), rgba(56,169,218,0.15)) !important; | |
| border-color: rgba(56,169,218,0.4) !important; | |
| color: #7dd3fc !important; | |
| } | |
| /* Rating */ | |
| .wn-rating { | |
| text-align: left !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 8px 0 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 10px !important; | |
| border-top: 1px solid rgba(255,255,255,0.08) !important; | |
| border-bottom: 1px solid rgba(255,255,255,0.08) !important; | |
| } | |
| .wn-rating .g_star { | |
| display: flex !important; | |
| gap: 3px !important; | |
| } | |
| .wn-rating .g_star svg { | |
| width: 16px !important; | |
| height: 16px !important; | |
| fill: #3a3a3a !important; | |
| transition: fill 0.2s ease !important; | |
| } | |
| .wn-rating .g_star svg._on { | |
| fill: #fbbf24 !important; | |
| filter: drop-shadow(0 0 3px rgba(251,191,36,0.4)) !important; | |
| } | |
| .wn-rating .g_star svg._half { | |
| fill: #fbbf24 !important; | |
| } | |
| .wn-rating small { | |
| font-size: 15px !important; | |
| color: #fbbf24 !important; | |
| font-weight: 700 !important; | |
| letter-spacing: 0.3px !important; | |
| } | |
| /* Description */ | |
| .wn-description { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| color: #9ca3af !important; | |
| font-size: 13px !important; | |
| line-height: 1.6 !important; | |
| max-height: 85px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 4 !important; | |
| -webkit-box-orient: vertical !important; | |
| flex: 1 !important; | |
| } | |
| /* Image itself on tags page */ | |
| .g_book_item .g_thumb img { | |
| width: auto !important; | |
| height: auto !important; | |
| max-width: 140px !important; | |
| max-height: 100% !important; | |
| object-fit: contain !important; | |
| border-radius: 6px !important; | |
| display: block !important; | |
| background: transparent !important; | |
| } | |
| /* Title styling on tags page */ | |
| li.g_col._6 .g_book_item h3, | |
| .g_book_item h3 { | |
| margin: 0 0 8px 0 !important; | |
| padding: 0 !important; | |
| font-size: 16px !important; | |
| line-height: 1.3 !important; | |
| font-weight: 600 !important; | |
| color: #ffffff !important; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important; | |
| min-height: 40px !important; | |
| max-height: 52px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 2 !important; | |
| -webkit-box-orient: vertical !important; | |
| width: 100% !important; | |
| text-align: left !important; | |
| } | |
| /* Title link - should not inherit image link styling */ | |
| li.g_col._6 .g_book_item h3 a, | |
| .g_book_item h3 a { | |
| display: inline !important; | |
| color: inherit !important; | |
| text-decoration: none !important; | |
| } | |
| /* Tags container on tags page */ | |
| li.g_col._6 .g_book_item .g_tags, | |
| .g_book_item .g_tags { | |
| margin: 0 0 10px 0 !important; | |
| padding: 0 !important; | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 5px !important; | |
| width: 100% !important; | |
| max-height: 50px !important; | |
| overflow: hidden !important; | |
| text-align: left !important; | |
| } | |
| /* Individual tags on tags page */ | |
| li.g_col._6 .g_book_item .g_tags a, | |
| .g_book_item .g_tags a { | |
| margin: 0 !important; | |
| padding: 3px 6px !important; | |
| background: rgba(255, 255, 255, 0.1) !important; | |
| border-radius: 3px !important; | |
| font-size: 11px !important; | |
| color: #ffffff !important; | |
| text-decoration: none !important; | |
| transition: background 0.2s !important; | |
| white-space: nowrap !important; | |
| overflow: hidden !important; | |
| text-overflow: ellipsis !important; | |
| max-width: 100px !important; | |
| display: inline-block !important; | |
| display: inline-block !important; | |
| line-height: 1.2 !important; | |
| } | |
| /* Rating on tags page */ | |
| li.g_col._6 .g_book_item .g_star_num, | |
| .g_book_item .g_star_num { | |
| margin: 0 0 8px 0 !important; | |
| text-align: left !important; | |
| } | |
| /* Description on tags page */ | |
| li.g_col._6 .g_book_item ._txt, | |
| .g_book_item ._txt { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| font-size: 13px !important; | |
| line-height: 1.4 !important; | |
| color: #cccccc !important; | |
| max-height: 70px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 3 !important; | |
| -webkit-box-orient: vertical !important; | |
| text-align: left !important; | |
| } | |
| /* Ensure tags page list items get proper card styling */ | |
| li.g_col._6 { | |
| flex: 0 0 calc(25% - 30px) !important; | |
| min-width: 320px !important; | |
| max-width: 380px !important; | |
| width: 100% !important; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| border-radius: 18px !important; | |
| overflow: hidden !important; | |
| position: relative !important; | |
| display: block !important; | |
| margin: 12px !important; | |
| padding: 22px !important; | |
| box-sizing: border-box !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| backdrop-filter: blur(12px) !important; | |
| min-height: 520px !important; | |
| max-height: 620px !important; | |
| height: auto !important; | |
| } | |
| /* Table of Contents chapter items - override height */ | |
| li.g_col._6[data-cid] { | |
| min-height: auto !important; | |
| max-height: none !important; | |
| height: auto !important; | |
| min-width: 200px !important; | |
| max-width: none !important; | |
| flex: 0 0 calc(25% - 20px) !important; | |
| padding: 8px !important; | |
| margin: 6px !important; | |
| border-radius: 8px !important; | |
| } | |
| /* Tags page container flex layout */ | |
| ul.g_row[data-report-l2] { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| justify-content: center !important; | |
| align-items: stretch !important; | |
| gap: 30px !important; | |
| padding: 30px 25px !important; | |
| width: 100% !important; | |
| box-sizing: border-box !important; | |
| } | |
| /* Tags page responsive */ | |
| @media (max-width: 1600px) { | |
| li.g_col._6 { | |
| flex: 0 0 calc(33.333% - 25px) !important; | |
| min-width: 300px !important; | |
| max-width: 350px !important; | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| li.g_col._6 { | |
| flex: 0 0 calc(50% - 20px) !important; | |
| min-width: 280px !important; | |
| max-width: 320px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| li.g_col._6 { | |
| flex: 0 0 100% !important; | |
| min-width: 100% !important; | |
| max-width: 100% !important; | |
| margin: 8px 0 !important; | |
| } | |
| } | |
| /* ===== CRITICAL: Override site utility classes for tags page ===== */ | |
| /* Target the exact class combination: g_thumb g_thumb_bg pa l0 oh */ | |
| li.g_col._6 .g_book_item a.c_000 i.g_thumb.g_thumb_bg.pa.l0.oh, | |
| li.g_col._6 .g_book_item a.c_000 > i.pa, | |
| li.g_col._6 .g_book_item a.c_000 > i.l0, | |
| li.g_col._6 .g_book_item a i.pa.l0, | |
| li.g_col._6 i.pa, | |
| li.g_col._6 i.l0, | |
| li.g_col._6 .pa, | |
| li.g_col._6 .l0 { | |
| position: static !important; | |
| left: unset !important; | |
| top: unset !important; | |
| right: unset !important; | |
| bottom: unset !important; | |
| } | |
| /* ===== PAGE HEADER / TITLE FIX ===== */ | |
| /* Fix overlapping title and tabs on tags/category pages */ | |
| .lst-hd.g_sub_hd { | |
| padding-top: 20px !important; | |
| padding-bottom: 10px !important; | |
| } | |
| .lst-hd.g_sub_hd .g_wrap { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| align-items: flex-start !important; | |
| gap: 15px !important; | |
| } | |
| .lst-hd.g_sub_hd h2 { | |
| margin: 0 0 10px 0 !important; | |
| padding: 10px 15px !important; | |
| font-size: 36px !important; | |
| line-height: 1.2 !important; | |
| display: block !important; | |
| width: auto !important; | |
| position: relative !important; | |
| z-index: 1 !important; | |
| } | |
| .lst-hd.g_sub_hd .lst-nav._tab { | |
| position: relative !important; | |
| margin-top: 5px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 10px !important; | |
| z-index: 1 !important; | |
| } | |
| /* ===== ENHANCED HEADER / NAVBAR ===== */ | |
| /* Main header container */ | |
| .g_header { | |
| background: rgba(10, 10, 15, 0.98) !important; | |
| backdrop-filter: blur(20px) saturate(180%) !important; | |
| -webkit-backdrop-filter: blur(20px) saturate(180%) !important; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important; | |
| padding: 0 !important; | |
| height: 50px !important; | |
| min-height: 50px !important; | |
| max-height: 50px !important; | |
| z-index: 10000 !important; | |
| position: fixed !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| right: 0 !important; | |
| width: 100% !important; | |
| overflow: visible !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| } | |
| /* Header inner container - force single row */ | |
| .g_header .g_wrap { | |
| display: flex !important; | |
| flex-direction: row !important; | |
| flex-wrap: nowrap !important; | |
| align-items: center !important; | |
| justify-content: flex-start !important; | |
| padding: 0 20px !important; | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| margin: 0 !important; | |
| gap: 15px !important; | |
| height: 50px !important; | |
| } | |
| /* Force all direct children of header to be in a row */ | |
| .g_header > * { | |
| display: flex !important; | |
| align-items: center !important; | |
| flex-shrink: 0 !important; | |
| } | |
| /* Make sure any inner wrappers also stay in row */ | |
| .g_header .g_wrap > * { | |
| flex-shrink: 0 !important; | |
| } | |
| /* Logo styling */ | |
| .g_header .g_logo { | |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important; | |
| border-radius: 6px !important; | |
| padding: 6px 12px !important; | |
| font-size: 0 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important; | |
| transition: all 0.3s ease !important; | |
| min-width: 100px !important; | |
| height: 32px !important; | |
| flex-shrink: 0 !important; | |
| } | |
| /* All header links should be inline */ | |
| .g_header a, | |
| .g_header .g_hd_link, | |
| .g_header .g_dropdown { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| height: auto !important; | |
| flex-shrink: 0 !important; | |
| } | |
| /* Right side container - push to right */ | |
| .g_header .g_wrap > :last-child, | |
| .g_header .g_right, | |
| .g_header .g_hd_right { | |
| margin-left: auto !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 10px !important; | |
| } | |
| .g_header .g_logo:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| /* Navigation container */ | |
| .g_header nav, | |
| .g_header .g_nav, | |
| .g_header .nav { | |
| flex: 1 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| height: 50px !important; | |
| } | |
| .g_header nav ol, | |
| .g_header nav ul, | |
| .g_header .g_nav ol, | |
| .g_header .g_nav ul { | |
| display: flex !important; | |
| flex-direction: row !important; | |
| flex-wrap: nowrap !important; | |
| align-items: center !important; | |
| gap: 5px !important; | |
| list-style: none !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| height: 50px !important; | |
| } | |
| .g_header nav ol li, | |
| .g_header nav ul li, | |
| .g_header .g_nav li { | |
| position: relative !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| height: 50px !important; | |
| } | |
| /* Right side actions - stay on same row */ | |
| .g_header .g_wrap > div, | |
| .g_header .g_wrap > span, | |
| .g_header .g_wrap > a { | |
| display: flex !important; | |
| align-items: center !important; | |
| flex-shrink: 0 !important; | |
| } | |
| /* Flatten header structure - all children become flex items in a row */ | |
| .g_header, | |
| .g_header .g_wrap, | |
| .g_header .g_wrap > *, | |
| .g_header nav, | |
| .g_header nav > * { | |
| flex-direction: row !important; | |
| flex-wrap: nowrap !important; | |
| } | |
| /* Any nested divs/sections should also be inline */ | |
| .g_header .g_wrap > div:not(.g_drop_bd):not(.g_browse_list):not(.g_browse_panel) { | |
| display: flex !important; | |
| flex-direction: row !important; | |
| align-items: center !important; | |
| gap: 10px !important; | |
| } | |
| /* Override any block-level display */ | |
| .g_header .g_wrap > *:not(.g_drop_bd):not(.g_browse_list):not(.g_browse_panel) { | |
| display: inline-flex !important; | |
| } | |
| /* Navigation links */ | |
| .g_header .g_hd_link { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 6px !important; | |
| padding: 6px 12px !important; | |
| border-radius: 6px !important; | |
| color: var(--text-secondary) !important; | |
| font-size: 13px !important; | |
| font-weight: 500 !important; | |
| text-decoration: none !important; | |
| transition: all 0.25s ease !important; | |
| background: transparent !important; | |
| border: 1px solid transparent !important; | |
| } | |
| .g_header .g_hd_link:hover { | |
| background: rgba(255, 255, 255, 0.08) !important; | |
| color: var(--text-primary) !important; | |
| border-color: rgba(255, 255, 255, 0.1) !important; | |
| } | |
| .g_header .g_hd_link svg { | |
| width: 18px !important; | |
| height: 18px !important; | |
| fill: currentColor !important; | |
| opacity: 0.8 !important; | |
| transition: opacity 0.2s ease !important; | |
| } | |
| .g_header .g_hd_link:hover svg { | |
| opacity: 1 !important; | |
| } | |
| .g_header .g_hd_link strong { | |
| color: inherit !important; | |
| font-weight: 600 !important; | |
| } | |
| /* Contest badge */ | |
| .g_header .g_contest { | |
| background: linear-gradient(135deg, var(--accent-gold), #f59e0b) !important; | |
| color: #000 !important; | |
| font-size: 9px !important; | |
| font-weight: 700 !important; | |
| padding: 2px 6px !important; | |
| border-radius: 10px !important; | |
| position: absolute !important; | |
| top: -5px !important; | |
| right: -5px !important; | |
| box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4) !important; | |
| } | |
| /* ===== DROPDOWN MENUS ===== */ | |
| /* Dropdown trigger hover state */ | |
| .g_header .g_dropdown:hover .g_hd_link, | |
| .g_header .g_dropdown._hover:hover .g_hd_link { | |
| background: rgba(56, 189, 248, 0.1) !important; | |
| color: var(--accent-primary) !important; | |
| border-color: rgba(56, 189, 248, 0.2) !important; | |
| } | |
| /* Dropdown container */ | |
| .g_header .g_drop_bd { | |
| position: fixed !important; | |
| top: 50px !important; | |
| left: auto !important; | |
| min-width: 220px !important; | |
| background: #12121a !important; | |
| border: 1px solid rgba(255, 255, 255, 0.1) !important; | |
| border-radius: 0 0 12px 12px !important; | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7) !important; | |
| padding: 10px !important; | |
| z-index: 9999 !important; | |
| opacity: 0 !important; | |
| visibility: hidden !important; | |
| transform: translateY(-10px) !important; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| isolation: isolate !important; | |
| } | |
| .g_header .g_dropdown:hover .g_drop_bd, | |
| .g_header .g_dropdown._hover:hover .g_drop_bd { | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| transform: translateY(0) !important; | |
| } | |
| /* Browse dropdown - fixed position below navbar */ | |
| .g_header .g_browse .g_drop_bd, | |
| .g_header .g_browse_list { | |
| position: fixed !important; | |
| top: 50px !important; | |
| left: 20px !important; | |
| z-index: 10001 !important; | |
| } | |
| /* Dropdown items */ | |
| .g_header .g_drop_bd .g_drop_item { | |
| display: block !important; | |
| padding: 12px 16px !important; | |
| color: var(--text-secondary) !important; | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| text-decoration: none !important; | |
| border-radius: 8px !important; | |
| transition: all 0.2s ease !important; | |
| margin: 2px 0 !important; | |
| } | |
| .g_header .g_drop_bd .g_drop_item:hover { | |
| background: rgba(56, 189, 248, 0.12) !important; | |
| color: var(--accent-primary) !important; | |
| padding-left: 20px !important; | |
| } | |
| /* Hide custom tooltip implementations in header */ | |
| /* NOTE: Native browser tooltips (from title attribute) cannot be hidden with CSS alone. | |
| To fully remove them, the UserScript should remove title attributes from header elements. */ | |
| .g_header [title]::before, | |
| .g_header [title]::after, | |
| .g_header *[data-title]::before, | |
| .g_header *[data-title]::after, | |
| .g_header .tooltip, | |
| .g_header .g_tooltip, | |
| .g_header [role="tooltip"], | |
| .g_header .tippy-box, | |
| .g_header .tippy-content { | |
| display: none !important; | |
| content: none !important; | |
| visibility: hidden !important; | |
| opacity: 0 !important; | |
| pointer-events: none !important; | |
| } | |
| /* Hide any floating tooltip divs */ | |
| .g_tooltip, | |
| div[role="tooltip"], | |
| .tooltip-wrapper, | |
| .tippy-box { | |
| display: none !important; | |
| visibility: hidden !important; | |
| opacity: 0 !important; | |
| } | |
| /* Browse dropdown - side-by-side layout (tabs left, content right) */ | |
| .g_header .g_browse_list { | |
| position: fixed !important; | |
| top: 50px !important; | |
| left: 100px !important; | |
| width: auto !important; | |
| min-width: 500px !important; | |
| max-width: 90vw !important; | |
| padding: 0 !important; | |
| background: #12121a !important; | |
| border-radius: 0 0 12px 12px !important; | |
| overflow: visible !important; | |
| border: 1px solid rgba(255, 255, 255, 0.12) !important; | |
| border-top: none !important; | |
| box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9) !important; | |
| z-index: 10001 !important; | |
| display: flex !important; | |
| flex-direction: row !important; | |
| } | |
| /* Tab navigation (Novels, Comics, Fan-fic) - vertical on left */ | |
| .g_header .g_browse_list > ul, | |
| .g_header .g_browse_list > ul.fs16 { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| gap: 0 !important; | |
| padding: 15px 0 !important; | |
| margin: 0 !important; | |
| background: #0a0a0f !important; | |
| list-style: none !important; | |
| width: auto !important; | |
| min-width: 100px !important; | |
| flex-shrink: 0 !important; | |
| border-right: 1px solid rgba(255, 255, 255, 0.1) !important; | |
| border-radius: 0 0 0 12px !important; | |
| } | |
| .g_header .g_browse_list > ul > li, | |
| .g_header .g_browse_list > ul.fs16 > li { | |
| position: relative !important; | |
| list-style: none !important; | |
| display: block !important; | |
| width: 100% !important; | |
| } | |
| /* Tab links */ | |
| .g_header .g_browse_list > ul > li > a:first-child, | |
| .g_header .g_browse_list > ul.fs16 > li > a:first-child { | |
| display: block !important; | |
| padding: 12px 20px !important; | |
| color: var(--text-secondary) !important; | |
| font-size: 14px !important; | |
| font-weight: 600 !important; | |
| transition: all 0.2s ease !important; | |
| background: transparent !important; | |
| text-decoration: none !important; | |
| border-left: 3px solid transparent !important; | |
| white-space: nowrap !important; | |
| } | |
| .g_header .g_browse_list > ul > li._on > a:first-child, | |
| .g_header .g_browse_list > ul > li:hover > a:first-child, | |
| .g_header .g_browse_list > ul.fs16 > li._on > a:first-child, | |
| .g_header .g_browse_list > ul.fs16 > li:hover > a:first-child { | |
| background: rgba(56, 189, 248, 0.1) !important; | |
| color: var(--accent-primary) !important; | |
| border-left-color: var(--accent-primary) !important; | |
| } | |
| /* Browse panel content - appears to the right of tabs */ | |
| .g_header .g_browse_panel { | |
| display: none !important; | |
| position: absolute !important; | |
| top: 0 !important; | |
| left: 100% !important; | |
| width: auto !important; | |
| min-width: 400px !important; | |
| max-width: 600px !important; | |
| height: auto !important; | |
| min-height: 100% !important; | |
| padding: 20px !important; | |
| background: #12121a !important; | |
| box-sizing: border-box !important; | |
| max-height: 70vh !important; | |
| overflow-y: auto !important; | |
| z-index: 10002 !important; | |
| border: 1px solid rgba(255, 255, 255, 0.12) !important; | |
| border-left: none !important; | |
| border-radius: 0 0 12px 0 !important; | |
| box-shadow: 10px 15px 50px rgba(0, 0, 0, 0.7) !important; | |
| } | |
| /* Show panel on hover */ | |
| .g_header .g_browse_list > ul > li._on .g_browse_panel, | |
| .g_header .g_browse_list > ul > li:hover .g_browse_panel, | |
| .g_header .g_browse_list > ul.fs16 > li._on .g_browse_panel, | |
| .g_header .g_browse_list > ul.fs16 > li:hover .g_browse_panel { | |
| display: block !important; | |
| } | |
| /* Simple dropdown list styling (non-browse dropdowns) */ | |
| .g_header .g_drop_bd:not(.g_browse_list) ul, | |
| .g_header .g_drop_bd:not(.g_browse_list) ol { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| gap: 2px !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| list-style: none !important; | |
| } | |
| .g_header .g_drop_bd:not(.g_browse_list) li { | |
| display: block !important; | |
| height: auto !important; | |
| } | |
| .g_header .g_drop_bd:not(.g_browse_list) a { | |
| display: block !important; | |
| padding: 10px 15px !important; | |
| color: var(--text-secondary) !important; | |
| border-radius: 6px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .g_header .g_drop_bd:not(.g_browse_list) a:hover { | |
| background: rgba(56, 189, 248, 0.15) !important; | |
| color: var(--accent-primary) !important; | |
| } | |
| /* Panel content layout */ | |
| .g_header .g_browse_panel p, | |
| .g_header .g_browse_panel > div { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 10px !important; | |
| margin-bottom: 18px !important; | |
| align-items: flex-start !important; | |
| } | |
| .g_header .g_browse_panel p:last-child, | |
| .g_header .g_browse_panel > div:last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| /* Section titles (MALE LEAD, FEMALE LEAD) */ | |
| .g_header .g_browse_title, | |
| .g_header .g_browse_panel strong, | |
| .g_header .g_browse_panel .title { | |
| display: block !important; | |
| width: 100% !important; | |
| color: var(--accent-gold) !important; | |
| font-size: 12px !important; | |
| font-weight: 700 !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 1px !important; | |
| margin-bottom: 12px !important; | |
| margin-top: 5px !important; | |
| padding-bottom: 8px !important; | |
| border-bottom: 1px solid rgba(251, 191, 36, 0.25) !important; | |
| } | |
| /* First title doesn't need top margin */ | |
| .g_header .g_browse_panel strong:first-child, | |
| .g_header .g_browse_panel .title:first-child { | |
| margin-top: 0 !important; | |
| } | |
| /* Genre/category links in panel */ | |
| .g_header .g_browse_panel a { | |
| display: inline-flex !important; | |
| padding: 10px 16px !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.1) !important; | |
| border-radius: 8px !important; | |
| color: #c0c0c8 !important; | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| text-decoration: none !important; | |
| transition: all 0.2s ease !important; | |
| white-space: nowrap !important; | |
| } | |
| .g_header .g_browse_panel a:hover { | |
| background: rgba(56, 189, 248, 0.15) !important; | |
| border-color: rgba(56, 189, 248, 0.4) !important; | |
| color: var(--accent-primary) !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| /* Scrollbar for panel */ | |
| .g_header .g_browse_panel::-webkit-scrollbar { | |
| width: 6px !important; | |
| } | |
| .g_header .g_browse_panel::-webkit-scrollbar-track { | |
| background: rgba(0,0,0,0.2) !important; | |
| } | |
| .g_header .g_browse_panel::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.15) !important; | |
| border-radius: 3px !important; | |
| } | |
| .g_header .g_browse_panel::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255,255,255,0.25) !important; | |
| } | |
| /* ===== RIGHT SIDE ACTIONS ===== */ | |
| /* Search button */ | |
| .g_header .g_search, | |
| .g_header .j_search { | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| width: 40px !important; | |
| height: 40px !important; | |
| min-width: 40px !important; | |
| min-height: 40px !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| border-radius: 8px !important; | |
| transition: all 0.25s ease !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| box-sizing: border-box !important; | |
| } | |
| .g_header .g_search:hover, | |
| .g_header .j_search:hover { | |
| background: rgba(56, 189, 248, 0.15) !important; | |
| border-color: rgba(56, 189, 248, 0.3) !important; | |
| } | |
| /* Search icon - SVG */ | |
| .g_header .g_search svg, | |
| .g_header .j_search svg { | |
| width: 20px !important; | |
| height: 20px !important; | |
| min-width: 20px !important; | |
| min-height: 20px !important; | |
| fill: #a1a1aa !important; | |
| transition: fill 0.2s ease !important; | |
| display: block !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| margin: auto !important; | |
| } | |
| .g_header .g_search:hover svg, | |
| .g_header .j_search:hover svg { | |
| fill: #38bdf8 !important; | |
| } | |
| /* Ensure search icon path/use elements are visible */ | |
| .g_header .g_search svg *, | |
| .g_header .j_search svg * { | |
| fill: #a1a1aa !important; | |
| stroke: none !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| } | |
| .g_header .g_search:hover svg *, | |
| .g_header .j_search:hover svg * { | |
| fill: #38bdf8 !important; | |
| } | |
| /* Force search button to show content */ | |
| .g_header .g_search *, | |
| .g_header .j_search * { | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| } | |
| /* Library link */ | |
| .g_header a[title="Library"], | |
| .g_header a[data-title="Library"], | |
| .g_header a[data-original-title="Library"] { | |
| display: flex !important; | |
| align-items: center !important; | |
| padding: 6px 12px !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| border-radius: 6px !important; | |
| color: var(--text-secondary) !important; | |
| font-size: 13px !important; | |
| font-weight: 600 !important; | |
| text-decoration: none !important; | |
| transition: all 0.25s ease !important; | |
| } | |
| .g_header a[title="Library"]:hover, | |
| .g_header a[data-title="Library"]:hover { | |
| background: rgba(52, 211, 153, 0.15) !important; | |
| border-color: rgba(52, 211, 153, 0.3) !important; | |
| color: var(--accent-green) !important; | |
| } | |
| /* Preference/Settings button */ | |
| .g_header a[title="Preference"], | |
| .g_header a[data-original-title="Preference"], | |
| .g_header .j_drop_preference { | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| width: 34px !important; | |
| height: 34px !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| border-radius: 8px !important; | |
| transition: all 0.25s ease !important; | |
| } | |
| .g_header a[title="Preference"]:hover, | |
| .g_header .j_drop_preference:hover { | |
| background: rgba(255, 255, 255, 0.1) !important; | |
| border-color: rgba(255, 255, 255, 0.15) !important; | |
| transform: rotate(30deg) !important; | |
| } | |
| .g_header a[title="Preference"] svg, | |
| .g_header a[data-original-title="Preference"] svg, | |
| .g_header .j_drop_preference svg { | |
| width: 18px !important; | |
| height: 18px !important; | |
| fill: var(--text-secondary) !important; | |
| transition: fill 0.2s ease !important; | |
| } | |
| .g_header a[title="Preference"]:hover svg, | |
| .g_header .j_drop_preference:hover svg { | |
| fill: var(--text-primary) !important; | |
| } | |
| /* User avatar */ | |
| .g_header .g_user { | |
| position: relative !important; | |
| } | |
| .g_header .g_user img, | |
| .g_header #headerAvatar { | |
| width: 34px !important; | |
| height: 34px !important; | |
| border-radius: 8px !important; | |
| border: 2px solid rgba(255, 255, 255, 0.1) !important; | |
| transition: all 0.25s ease !important; | |
| object-fit: cover !important; | |
| } | |
| .g_header .g_user:hover img, | |
| .g_header .g_user:hover #headerAvatar { | |
| border-color: var(--accent-primary) !important; | |
| box-shadow: 0 0 20px rgba(56, 189, 248, 0.3) !important; | |
| transform: scale(1.05) !important; | |
| } | |
| /* User dropdown */ | |
| .g_header .g_user .g_drop_bd { | |
| right: 0 !important; | |
| left: auto !important; | |
| min-width: 200px !important; | |
| } | |
| /* ===== HEADER PLACEHOLDER (spacing below fixed header) ===== */ | |
| .g_header_ph { | |
| height: 50px !important; | |
| min-height: 50px !important; | |
| background: transparent !important; | |
| display: block !important; | |
| } | |
| /* Fix body content to account for fixed header */ | |
| body { | |
| padding-top: 50px !important; | |
| } | |
| /* Remove extra top margins/padding from main content areas */ | |
| .g_main, | |
| .g_bd, | |
| .m-main, | |
| .m-main-wrap, | |
| .content-wrap, | |
| main { | |
| margin-top: 0 !important; | |
| padding-top: 0 !important; | |
| } | |
| /* Page header section - reduce top spacing */ | |
| .lst-hd.g_sub_hd { | |
| margin-top: 0 !important; | |
| padding-top: 15px !important; | |
| } | |
| /* First content section after header */ | |
| .g_wrap:first-of-type, | |
| .g_row:first-of-type { | |
| margin-top: 0 !important; | |
| } | |
| /* ===== RESPONSIVE HEADER ===== */ | |
| @media (max-width: 1400px) { | |
| .g_header .g_wrap { | |
| padding: 0 15px !important; | |
| gap: 12px !important; | |
| } | |
| .g_header .g_hd_link { | |
| padding: 5px 10px !important; | |
| font-size: 12px !important; | |
| } | |
| .g_header .g_hd_link strong { | |
| display: none !important; | |
| } | |
| .g_header .g_hd_link svg { | |
| width: 18px !important; | |
| height: 18px !important; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .g_header .g_browse_list { | |
| min-width: 500px !important; | |
| } | |
| .g_header nav ol { | |
| gap: 4px !important; | |
| } | |
| .g_header .g_hd_link { | |
| padding: 5px 8px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .g_header .g_wrap { | |
| padding: 0 10px !important; | |
| flex-wrap: nowrap !important; | |
| } | |
| .g_header .g_logo { | |
| min-width: 80px !important; | |
| height: 28px !important; | |
| padding: 4px 10px !important; | |
| } | |
| .g_header .g_drop_bd { | |
| position: fixed !important; | |
| left: 10px !important; | |
| right: 10px !important; | |
| width: auto !important; | |
| min-width: auto !important; | |
| max-height: 70vh !important; | |
| overflow-y: auto !important; | |
| } | |
| .g_header .g_browse_list { | |
| min-width: auto !important; | |
| } | |
| } | |
| /* ===== STORIES PAGE LAYOUT FIX ===== */ | |
| /* Custom classes applied by JavaScript - completely override site styles */ | |
| /* Stories page list container */ | |
| .wn-stories-list { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| justify-content: center !important; | |
| align-items: stretch !important; | |
| gap: 30px !important; | |
| padding: 30px 25px !important; | |
| width: 100% !important; | |
| box-sizing: border-box !important; | |
| margin: 20px auto !important; | |
| max-width: 95% !important; | |
| list-style: none !important; | |
| } | |
| /* Stories page card container */ | |
| .wn-stories-card { | |
| flex: 0 0 calc(25% - 30px) !important; | |
| min-width: 320px !important; | |
| max-width: 380px !important; | |
| width: 100% !important; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| border-radius: 18px !important; | |
| overflow: hidden !important; | |
| position: relative !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| margin: 12px !important; | |
| padding: 22px !important; | |
| box-sizing: border-box !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| backdrop-filter: blur(12px) !important; | |
| min-height: 520px !important; | |
| max-height: 620px !important; | |
| height: auto !important; | |
| float: none !important; | |
| } | |
| /* Content wrapper */ | |
| .wn-stories-content { | |
| position: static !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| align-items: stretch !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| padding: 0 !important; | |
| flex: 1 !important; | |
| } | |
| /* Image container */ | |
| .wn-stories-img-container { | |
| display: block !important; | |
| width: 150px !important; | |
| height: auto !important; | |
| margin: 0 auto 18px auto !important; | |
| overflow: hidden !important; | |
| border-radius: 10px !important; | |
| background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important; | |
| position: static !important; | |
| left: auto !important; | |
| top: auto !important; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease !important; | |
| order: 1 !important; | |
| } | |
| .wn-stories-img-container:hover { | |
| transform: scale(1.03) !important; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important; | |
| } | |
| /* Image link */ | |
| .wn-stories-img-link { | |
| display: block !important; | |
| width: 100% !important; | |
| height: auto !important; | |
| } | |
| /* Image itself */ | |
| .wn-stories-img { | |
| display: block !important; | |
| width: 100% !important; | |
| height: auto !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| transition: transform 0.3s ease !important; | |
| border-radius: 8px !important; | |
| } | |
| /* Title */ | |
| .wn-stories-title { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| font-size: 17px !important; | |
| line-height: 1.35 !important; | |
| font-weight: 700 !important; | |
| color: #ffffff !important; | |
| min-height: 46px !important; | |
| max-height: 46px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 2 !important; | |
| -webkit-box-orient: vertical !important; | |
| letter-spacing: 0.2px !important; | |
| order: 2 !important; | |
| } | |
| .wn-stories-title a { | |
| color: inherit !important; | |
| text-decoration: none !important; | |
| } | |
| /* Tags container */ | |
| .wn-stories-tags { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 6px !important; | |
| max-height: 56px !important; | |
| overflow: hidden !important; | |
| order: 3 !important; | |
| } | |
| /* Individual tag links - pill style */ | |
| .wn-stories-tags a { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| padding: 4px 10px !important; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important; | |
| border: 1px solid rgba(255,255,255,0.1) !important; | |
| border-radius: 20px !important; | |
| font-size: 10px !important; | |
| font-weight: 500 !important; | |
| color: #d0d0d0 !important; | |
| text-decoration: none !important; | |
| white-space: nowrap !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.5px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .wn-stories-tags a:hover { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)) !important; | |
| border-color: rgba(255,255,255,0.25) !important; | |
| color: #ffffff !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| /* First tag (category) - highlighted */ | |
| .wn-stories-tags a:first-child { | |
| background: linear-gradient(135deg, rgba(56,169,218,0.3), rgba(56,169,218,0.15)) !important; | |
| border-color: rgba(56,169,218,0.4) !important; | |
| color: #7dd3fc !important; | |
| } | |
| /* Description */ | |
| .wn-stories-description { | |
| text-align: left !important; | |
| width: 100% !important; | |
| margin: 0 0 12px 0 !important; | |
| padding: 0 !important; | |
| color: #9ca3af !important; | |
| font-size: 13px !important; | |
| line-height: 1.6 !important; | |
| max-height: 85px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 4 !important; | |
| -webkit-box-orient: vertical !important; | |
| flex: 1 !important; | |
| order: 4 !important; | |
| } | |
| /* Stats container */ | |
| .wn-stories-stats { | |
| text-align: left !important; | |
| margin: auto 0 0 0 !important; | |
| padding: 12px 0 0 0 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 15px !important; | |
| border-top: 1px solid rgba(255,255,255,0.08) !important; | |
| order: 5 !important; | |
| flex-wrap: wrap !important; | |
| } | |
| .wn-stories-stats strong { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 5px !important; | |
| font-size: 12px !important; | |
| color: var(--text-secondary) !important; | |
| font-weight: 500 !important; | |
| } | |
| .wn-stories-stats svg { | |
| width: 14px !important; | |
| height: 14px !important; | |
| fill: currentColor !important; | |
| opacity: 0.7 !important; | |
| } | |
| .wn-stories-stats .g_star svg { | |
| width: 14px !important; | |
| height: 14px !important; | |
| fill: #3a3a3a !important; | |
| } | |
| .wn-stories-stats .g_star svg._on { | |
| fill: #fbbf24 !important; | |
| filter: drop-shadow(0 0 3px rgba(251,191,36,0.4)) !important; | |
| } | |
| .wn-stories-stats small { | |
| font-size: 14px !important; | |
| color: #fbbf24 !important; | |
| font-weight: 700 !important; | |
| } | |
| /* Stories page responsive */ | |
| @media (max-width: 1600px) { | |
| .wn-stories-card { | |
| flex: 0 0 calc(33.333% - 25px) !important; | |
| min-width: 300px !important; | |
| max-width: 350px !important; | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .wn-stories-card { | |
| flex: 0 0 calc(50% - 20px) !important; | |
| min-width: 280px !important; | |
| max-width: 320px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .wn-stories-card { | |
| flex: 0 0 100% !important; | |
| min-width: 100% !important; | |
| max-width: 100% !important; | |
| margin: 8px 0 !important; | |
| } | |
| .wn-stories-list { | |
| padding: 15px 10px !important; | |
| gap: 20px !important; | |
| } | |
| } | |
| /* ===== BOOK DETAIL PAGE STYLING ===== */ | |
| /* Book detail header */ | |
| .det-hd { | |
| background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important; | |
| padding-bottom: 30px !important; | |
| } | |
| /* Breadcrumb */ | |
| .det-hd .lh24.fs16 { | |
| color: var(--text-muted) !important; | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| margin-bottom: 20px !important; | |
| } | |
| .det-hd .lh24.fs16 a { | |
| color: var(--accent-primary) !important; | |
| } | |
| .det-hd .lh24.fs16 span { | |
| color: var(--text-muted) !important; | |
| } | |
| /* Book info section */ | |
| .det-info { | |
| display: flex !important; | |
| gap: 50px !important; | |
| align-items: flex-start !important; | |
| } | |
| /* Book cover */ | |
| .det-info .g_thumb { | |
| border-radius: 12px !important; | |
| overflow: hidden !important; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; | |
| flex-shrink: 0 !important; | |
| width: 350px !important; | |
| height: 467px !important; | |
| background-size: cover !important; | |
| background-repeat: no-repeat !important; | |
| background-position: center !important; | |
| } | |
| .det-info .g_thumb img { | |
| border-radius: 12px !important; | |
| display: block !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| object-fit: cover !important; | |
| } | |
| /* Original badge */ | |
| .det-info .g_thumb strong { | |
| background: linear-gradient(135deg, var(--accent-gold), #f59e0b) !important; | |
| color: #000 !important; | |
| padding: 4px 12px !important; | |
| border-radius: 0 12px 0 8px !important; | |
| font-size: 11px !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.5px !important; | |
| } | |
| /* Book title */ | |
| .det-info h1 { | |
| color: var(--text-primary) !important; | |
| font-size: 32px !important; | |
| line-height: 1.3 !important; | |
| margin-bottom: 12px !important; | |
| } | |
| /* Book meta info (category, chapters, views) */ | |
| .det-hd-detail { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 16px !important; | |
| align-items: center !important; | |
| margin-bottom: 16px !important; | |
| } | |
| .det-hd-detail .det-hd-tag, | |
| .det-hd-detail strong { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 6px !important; | |
| padding: 6px 12px !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| border-radius: 8px !important; | |
| color: var(--text-secondary) !important; | |
| font-size: 13px !important; | |
| font-weight: 500 !important; | |
| } | |
| .det-hd-detail .det-hd-tag:hover { | |
| background: rgba(56, 189, 248, 0.1) !important; | |
| border-color: rgba(56, 189, 248, 0.3) !important; | |
| color: var(--accent-primary) !important; | |
| } | |
| .det-hd-detail svg { | |
| width: 16px !important; | |
| height: 16px !important; | |
| fill: currentColor !important; | |
| opacity: 0.7 !important; | |
| } | |
| /* Author */ | |
| .det-info address { | |
| font-style: normal !important; | |
| margin-bottom: 16px !important; | |
| } | |
| .det-info address .c_s { | |
| color: var(--text-muted) !important; | |
| } | |
| .det-info address .c_primary { | |
| color: var(--accent-primary) !important; | |
| font-weight: 600 !important; | |
| } | |
| /* Rating stars */ | |
| .det-info ._score { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 12px !important; | |
| margin-bottom: 20px !important; | |
| } | |
| .det-info ._score .g_star svg { | |
| width: 20px !important; | |
| height: 20px !important; | |
| fill: #3a3a3a !important; | |
| } | |
| .det-info ._score .g_star svg._on { | |
| fill: #fbbf24 !important; | |
| } | |
| .det-info ._score small { | |
| color: var(--text-secondary) !important; | |
| } | |
| /* Action buttons */ | |
| .det-info ._bts { | |
| display: flex !important; | |
| gap: 12px !important; | |
| flex-wrap: wrap !important; | |
| margin-bottom: 16px !important; | |
| } | |
| .det-info ._bts .bt { | |
| padding: 12px 28px !important; | |
| border-radius: 10px !important; | |
| font-size: 15px !important; | |
| font-weight: 600 !important; | |
| transition: all 0.25s ease !important; | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 8px !important; | |
| } | |
| /* Read button */ | |
| .det-info ._bts .bt:first-child { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; | |
| color: #000 !important; | |
| border: none !important; | |
| } | |
| .det-info ._bts .bt:first-child:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 8px 25px rgba(56, 189, 248, 0.4) !important; | |
| } | |
| /* Add to Library button */ | |
| .det-info ._bts .g_bt_add_lib { | |
| background: rgba(255, 255, 255, 0.08) !important; | |
| border: 1px solid var(--border-light) !important; | |
| color: var(--text-primary) !important; | |
| } | |
| .det-info ._bts .g_bt_add_lib._inLib { | |
| background: rgba(52, 211, 153, 0.15) !important; | |
| border-color: rgba(52, 211, 153, 0.4) !important; | |
| color: var(--accent-green) !important; | |
| } | |
| .det-info ._bts .g_bt_add_lib:hover { | |
| background: rgba(255, 255, 255, 0.12) !important; | |
| border-color: var(--border-light) !important; | |
| } | |
| /* Report story link */ | |
| .det-info ._link_row a { | |
| color: var(--text-muted) !important; | |
| font-size: 13px !important; | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 6px !important; | |
| } | |
| .det-info ._link_row a:hover { | |
| color: var(--accent-red) !important; | |
| } | |
| /* Tab navigation */ | |
| .det-tab-nav { | |
| background: var(--bg-secondary) !important; | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| padding: 0 !important; | |
| display: flex !important; | |
| gap: 0 !important; | |
| } | |
| .det-tab-nav a { | |
| padding: 16px 24px !important; | |
| color: var(--text-secondary) !important; | |
| font-weight: 600 !important; | |
| border-bottom: 3px solid transparent !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .det-tab-nav a._on, | |
| .det-tab-nav a:hover { | |
| color: var(--accent-primary) !important; | |
| border-bottom-color: var(--accent-primary) !important; | |
| } | |
| .det-tab-nav ._hr { | |
| display: none !important; | |
| } | |
| .det-tab-nav ._line { | |
| display: none !important; | |
| } | |
| /* Synopsis section */ | |
| .det-abt { | |
| padding: 30px 0 !important; | |
| } | |
| .det-abt .g_h2 { | |
| color: var(--text-primary) !important; | |
| margin-bottom: 20px !important; | |
| } | |
| .det-abt .j_synopsis { | |
| color: var(--text-secondary) !important; | |
| line-height: 1.8 !important; | |
| font-size: 15px !important; | |
| } | |
| .det-abt .j_synopsis p { | |
| color: var(--text-secondary) !important; | |
| } | |
| /* Content rating notice - exclude synopsis and other content divs */ | |
| .det-abt > div:last-child:not(.j_synopsis):not([class*="synopsis"]):not([class*="txt"]):not(.g_wrap) { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 8px !important; | |
| padding: 12px 16px !important; | |
| background: rgba(248, 113, 113, 0.1) !important; | |
| border: 1px solid rgba(248, 113, 113, 0.3) !important; | |
| border-radius: 8px !important; | |
| color: var(--accent-red) !important; | |
| margin-top: 20px !important; | |
| } | |
| /* Tags section */ | |
| .m-tags { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 10px !important; | |
| } | |
| .m-tag { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| background: rgba(255, 255, 255, 0.06) !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| border-radius: 20px !important; | |
| padding: 0 !important; | |
| overflow: hidden !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .m-tag:hover { | |
| border-color: var(--accent-primary) !important; | |
| background: rgba(56, 189, 248, 0.1) !important; | |
| } | |
| .m-tag a { | |
| padding: 8px 12px !important; | |
| color: var(--text-secondary) !important; | |
| font-weight: 500 !important; | |
| } | |
| .m-tag:hover a { | |
| color: var(--accent-primary) !important; | |
| } | |
| .m-tag-op { | |
| padding: 8px 12px 8px 0 !important; | |
| border-left: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-tag-op .tag-icon svg { | |
| width: 16px !important; | |
| height: 16px !important; | |
| fill: var(--text-muted) !important; | |
| } | |
| /* Fans section */ | |
| .fans-bar-wrap { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 16px !important; | |
| padding: 24px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .fans-bar-wrap .g_h2 { | |
| color: var(--text-primary) !important; | |
| } | |
| .fans-list ol { | |
| display: flex !important; | |
| justify-content: space-around !important; | |
| gap: 20px !important; | |
| } | |
| .fans-list li { | |
| display: flex !important; | |
| align-items: center !important; | |
| padding: 16px !important; | |
| background: var(--bg-tertiary) !important; | |
| border-radius: 12px !important; | |
| flex: 1 !important; | |
| } | |
| .fans-list ._badge { | |
| width: 32px !important; | |
| height: 32px !important; | |
| } | |
| .fans-list ._avatar img { | |
| width: 48px !important; | |
| height: 48px !important; | |
| border-radius: 50% !important; | |
| } | |
| .fans-list ._text strong { | |
| color: var(--text-primary) !important; | |
| } | |
| .fans-list ._text small { | |
| color: var(--text-muted) !important; | |
| } | |
| /* Power ranking section */ | |
| .power-bar-wrap { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 16px !important; | |
| padding: 24px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .power-bar { | |
| background: var(--bg-tertiary) !important; | |
| border-radius: 12px !important; | |
| } | |
| .power-bar strong { | |
| color: var(--text-primary) !important; | |
| } | |
| .power-bar small { | |
| color: var(--text-muted) !important; | |
| } | |
| /* Vote button */ | |
| .power-bar .bt._warning, | |
| .power-bar .bt._warning._vote, | |
| .power-bar .bt._warning._2row { | |
| background: linear-gradient(135deg, var(--accent-gold), #f59e0b) !important; | |
| color: #000 !important; | |
| border: none !important; | |
| border-radius: 10px !important; | |
| padding: 12px 24px !important; | |
| font-weight: 600 !important; | |
| outline: none !important; | |
| box-shadow: none !important; | |
| } | |
| .power-bar .bt._warning:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4) !important; | |
| } | |
| /* Fix vote button container */ | |
| .power-bar .bt_box, | |
| .power-bar .j_power_btn_area { | |
| border: none !important; | |
| outline: none !important; | |
| background: transparent !important; | |
| } | |
| .power-bar .bt_box a, | |
| .power-bar .j_power_btn_area a { | |
| border: none !important; | |
| outline: none !important; | |
| } | |
| /* You May Also Like section */ | |
| .j_books_you_also_like { | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| gap: 15px !important; | |
| overflow-x: auto !important; | |
| margin-bottom: 24px !important; | |
| align-items: flex-start !important; | |
| } | |
| .j_books_you_also_like .g_col, | |
| .j_books_you_also_like .g_col._2 { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 10px !important; | |
| padding: 12px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| transition: all 0.25s ease !important; | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| min-width: unset !important; | |
| max-width: unset !important; | |
| height: auto !important; | |
| min-height: unset !important; | |
| max-height: unset !important; | |
| } | |
| .j_books_you_also_like .g_col:hover { | |
| border-color: var(--accent-primary) !important; | |
| transform: translateY(-3px) !important; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| .j_books_you_also_like .m-book { | |
| height: auto !important; | |
| min-height: unset !important; | |
| max-height: unset !important; | |
| } | |
| .j_books_you_also_like .m-book .g_thumb, | |
| .j_books_you_also_like .m-book i.g_thumb { | |
| border-radius: 6px !important; | |
| overflow: hidden !important; | |
| margin-bottom: 10px !important; | |
| height: auto !important; | |
| min-height: 160px !important; | |
| width: 120px !important; | |
| display: block !important; | |
| background: rgba(255,255,255,0.05) !important; | |
| font-style: normal !important; | |
| position: relative !important; | |
| } | |
| .j_books_you_also_like .m-book .g_thumb a, | |
| .j_books_you_also_like .m-book i.g_thumb a { | |
| display: block !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| } | |
| .j_books_you_also_like .m-book .g_thumb img, | |
| .j_books_you_also_like .m-book i.g_thumb img { | |
| width: 120px !important; | |
| height: auto !important; | |
| min-height: 160px !important; | |
| object-fit: cover !important; | |
| display: block !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| position: relative !important; | |
| } | |
| .j_books_you_also_like .m-book h3 { | |
| color: var(--text-primary) !important; | |
| font-size: 13px !important; | |
| line-height: 1.3 !important; | |
| margin-bottom: 6px !important; | |
| min-height: unset !important; | |
| max-height: 34px !important; | |
| overflow: hidden !important; | |
| display: -webkit-box !important; | |
| -webkit-line-clamp: 2 !important; | |
| -webkit-box-orient: vertical !important; | |
| width: 120px !important; | |
| } | |
| .j_books_you_also_like .g_star_num { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 4px !important; | |
| } | |
| .j_books_you_also_like .g_star svg { | |
| width: 12px !important; | |
| height: 12px !important; | |
| fill: #3a3a3a !important; | |
| } | |
| .j_books_you_also_like .g_star svg._on { | |
| fill: #fbbf24 !important; | |
| } | |
| .j_books_you_also_like .g_star_num small { | |
| color: var(--accent-gold) !important; | |
| font-weight: 600 !important; | |
| font-size: 12px !important; | |
| } | |
| /* Reviews section */ | |
| .rev-tit .g_h2 { | |
| color: var(--text-primary) !important; | |
| } | |
| .rev-score { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 16px !important; | |
| padding: 24px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .rev-score-list li { | |
| display: flex !important; | |
| justify-content: space-between !important; | |
| align-items: center !important; | |
| padding: 8px 0 !important; | |
| } | |
| .rev-score-list strong { | |
| color: var(--text-secondary) !important; | |
| font-weight: 500 !important; | |
| } | |
| .rev-score ._bd { | |
| border-left: 1px solid var(--border-subtle) !important; | |
| padding-left: 30px !important; | |
| } | |
| .rev-score ._bd p { | |
| color: var(--text-secondary) !important; | |
| } | |
| .rev-score ._bd .bt { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; | |
| color: #000 !important; | |
| border: none !important; | |
| border-radius: 10px !important; | |
| padding: 12px 24px !important; | |
| font-weight: 600 !important; | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 8px !important; | |
| } | |
| /* Review tabs */ | |
| .j_tab_review { | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| margin-bottom: 20px !important; | |
| } | |
| .j_tab_review a { | |
| padding: 12px 20px !important; | |
| color: var(--text-secondary) !important; | |
| font-weight: 500 !important; | |
| border-bottom: 2px solid transparent !important; | |
| } | |
| .j_tab_review a._on { | |
| color: var(--accent-primary) !important; | |
| border-bottom-color: var(--accent-primary) !important; | |
| } | |
| /* Individual review */ | |
| .m-comment { | |
| padding: 20px !important; | |
| background: var(--bg-secondary) !important; | |
| border-radius: 12px !important; | |
| margin-bottom: 16px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-comment .g_avatar img { | |
| border-radius: 50% !important; | |
| } | |
| .m-comment-hd .fw700 a { | |
| color: var(--text-primary) !important; | |
| } | |
| .m-comment-hd .g_lv { | |
| background: var(--bg-tertiary) !important; | |
| border-radius: 4px !important; | |
| padding: 2px 6px !important; | |
| font-size: 10px !important; | |
| } | |
| .m-comment-bd { | |
| color: var(--text-secondary) !important; | |
| line-height: 1.7 !important; | |
| } | |
| .m-comment-ft { | |
| margin-top: 12px !important; | |
| padding-top: 12px !important; | |
| border-top: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-comment-ft .c_m { | |
| color: var(--text-muted) !important; | |
| } | |
| .m-comment-tools .m-comment-tool { | |
| padding: 6px 12px !important; | |
| border-radius: 6px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .m-comment-tools .m-comment-tool:hover { | |
| background: rgba(255, 255, 255, 0.08) !important; | |
| } | |
| .m-comment-tools svg { | |
| width: 18px !important; | |
| height: 18px !important; | |
| fill: var(--text-muted) !important; | |
| } | |
| /* Review reply button */ | |
| .m-comment-reply-btn { | |
| color: var(--accent-primary) !important; | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 6px !important; | |
| } | |
| /* Global star styling for book pages */ | |
| .g_star svg { | |
| fill: #3a3a3a !important; | |
| } | |
| .g_star svg._on { | |
| fill: #fbbf24 !important; | |
| } | |
| .g_star svg._half { | |
| fill: url(#starHalf) !important; | |
| } | |
| /* ===== CHAPTER LIST / TABLE OF CONTENTS ===== */ | |
| /* Chapter list container */ | |
| .det-con, | |
| .det-catalog, | |
| .j_catalog_wrap { | |
| padding: 20px 0 !important; | |
| } | |
| /* Volume header */ | |
| .det-con .g_h2, | |
| .vol-title { | |
| color: var(--text-primary) !important; | |
| font-size: 18px !important; | |
| margin-bottom: 16px !important; | |
| } | |
| /* Chapter grid - make it a compact list */ | |
| .det-con ol, | |
| .det-con ul, | |
| .j_catalog_list { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| gap: 8px !important; | |
| list-style: none !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| } | |
| /* Individual chapter items */ | |
| .det-con ol li, | |
| .det-con ul li, | |
| .j_catalog_list li, | |
| .det-con .g_col { | |
| flex: 0 0 calc(25% - 6px) !important; | |
| min-width: 200px !important; | |
| max-width: none !important; | |
| height: fit-content !important; | |
| min-height: unset !important; | |
| max-height: unset !important; | |
| padding: 12px 16px !important; | |
| margin: 0 !important; | |
| background: var(--bg-secondary) !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| border-radius: 8px !important; | |
| transition: all 0.2s ease !important; | |
| box-sizing: border-box !important; | |
| align-self: flex-start !important; | |
| } | |
| .det-con ol li:hover, | |
| .det-con ul li:hover, | |
| .j_catalog_list li:hover, | |
| .det-con .g_col:hover { | |
| border-color: var(--accent-primary) !important; | |
| background: var(--bg-tertiary) !important; | |
| } | |
| /* Chapter link */ | |
| .det-con ol li a, | |
| .det-con ul li a, | |
| .j_catalog_list li a, | |
| .det-con .g_col a { | |
| display: block !important; | |
| color: var(--text-secondary) !important; | |
| text-decoration: none !important; | |
| height: auto !important; | |
| min-height: unset !important; | |
| max-height: unset !important; | |
| } | |
| .det-con ol li:hover a, | |
| .det-con ul li:hover a { | |
| color: var(--accent-primary) !important; | |
| } | |
| /* Chapter number */ | |
| .det-con ol li strong, | |
| .det-con ul li strong, | |
| .det-con .g_col strong, | |
| .chapter-index { | |
| display: block !important; | |
| font-size: 12px !important; | |
| color: var(--text-muted) !important; | |
| margin-bottom: 4px !important; | |
| } | |
| /* Chapter title */ | |
| .det-con ol li a p, | |
| .det-con ul li a p, | |
| .det-con .g_col p, | |
| .chapter-title { | |
| font-size: 13px !important; | |
| line-height: 1.4 !important; | |
| color: var(--text-primary) !important; | |
| margin: 0 0 6px 0 !important; | |
| overflow: hidden !important; | |
| text-overflow: ellipsis !important; | |
| white-space: nowrap !important; | |
| } | |
| /* Chapter date */ | |
| .det-con ol li small, | |
| .det-con ul li small, | |
| .det-con .g_col small, | |
| .chapter-date { | |
| font-size: 11px !important; | |
| color: var(--text-muted) !important; | |
| border-top: 1px solid var(--border-subtle) !important; | |
| padding-top: 6px !important; | |
| display: block !important; | |
| margin-top: 6px !important; | |
| } | |
| /* Locked chapter indicator */ | |
| .det-con ol li._lock, | |
| .det-con ul li._lock { | |
| opacity: 0.6 !important; | |
| } | |
| .det-con ol li._lock::after, | |
| .det-con ul li._lock::after { | |
| content: "🔒" !important; | |
| position: absolute !important; | |
| top: 8px !important; | |
| right: 8px !important; | |
| font-size: 12px !important; | |
| } | |
| /* Latest release info */ | |
| .det-con .latest-release, | |
| .det-con > p { | |
| margin-bottom: 20px !important; | |
| color: var(--text-secondary) !important; | |
| } | |
| .det-con > p a { | |
| color: var(--accent-primary) !important; | |
| } | |
| /* Responsive chapters */ | |
| @media (max-width: 1200px) { | |
| .det-con ol li, | |
| .det-con ul li, | |
| .j_catalog_list li, | |
| .det-con .g_col { | |
| flex: 0 0 calc(33.333% - 6px) !important; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .det-con ol li, | |
| .det-con ul li, | |
| .j_catalog_list li, | |
| .det-con .g_col { | |
| flex: 0 0 calc(50% - 4px) !important; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .det-con ol li, | |
| .det-con ul li, | |
| .j_catalog_list li, | |
| .det-con .g_col { | |
| flex: 0 0 100% !important; | |
| } | |
| } | |
| /* ===== HOMEPAGE STYLING ===== */ | |
| /* Main homepage container */ | |
| .g_bd, | |
| .m-home, | |
| .home-wrap { | |
| background: var(--bg-primary) !important; | |
| width: 100% !important; | |
| max-width: 1400px !important; | |
| margin: 0 auto !important; | |
| padding: 20px !important; | |
| box-sizing: border-box !important; | |
| } | |
| /* Section headers */ | |
| .fw700.lh32.fs24, | |
| .fw700.lh24.fs20 { | |
| color: var(--text-primary) !important; | |
| font-weight: 700 !important; | |
| margin-bottom: 20px !important; | |
| } | |
| /* Homepage sections with mb48 */ | |
| .mb48 { | |
| margin-bottom: 40px !important; | |
| } | |
| /* Book thumbnail containers */ | |
| .g_thumb._120 { | |
| width: 120px !important; | |
| height: auto !important; | |
| border-radius: 8px !important; | |
| overflow: hidden !important; | |
| } | |
| .g_thumb._120 img { | |
| width: 120px !important; | |
| height: auto !important; | |
| border-radius: 8px !important; | |
| object-fit: cover !important; | |
| } | |
| .g_thumb._auto { | |
| width: auto !important; | |
| max-width: 180px !important; | |
| border-radius: 8px !important; | |
| overflow: hidden !important; | |
| } | |
| .g_thumb._auto img { | |
| width: 100% !important; | |
| height: auto !important; | |
| max-height: 260px !important; | |
| border-radius: 8px !important; | |
| object-fit: cover !important; | |
| } | |
| .g_thumb._48 { | |
| width: 48px !important; | |
| height: 64px !important; | |
| border-radius: 4px !important; | |
| overflow: hidden !important; | |
| } | |
| .g_thumb._54 { | |
| width: 54px !important; | |
| height: 72px !important; | |
| border-radius: 4px !important; | |
| overflow: hidden !important; | |
| } | |
| /* Column layouts */ | |
| .g_col._1 { | |
| width: auto !important; | |
| flex: 0 0 auto !important; | |
| padding: 8px !important; | |
| } | |
| .g_col._4 { | |
| flex: 1 !important; | |
| min-width: 280px !important; | |
| max-width: 100% !important; | |
| } | |
| /* Row layouts - make them flex and centered */ | |
| .g_row._8 { | |
| display: flex !important; | |
| flex-wrap: wrap !important; | |
| justify-content: center !important; | |
| gap: 20px !important; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| } | |
| /* Featured book lists - horizontal scroll */ | |
| .g_row._8._switch_target { | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| overflow-x: auto !important; | |
| gap: 16px !important; | |
| padding: 10px 0 !important; | |
| justify-content: flex-start !important; | |
| } | |
| .g_row._8._switch_target .g_col._1 { | |
| flex: 0 0 auto !important; | |
| width: 180px !important; | |
| min-width: 180px !important; | |
| } | |
| .g_row._8._switch_target .g_col._1 .g_thumb._auto { | |
| width: 180px !important; | |
| } | |
| .g_row._8._switch_target .g_col._1 .g_thumb._auto img { | |
| width: 180px !important; | |
| height: 260px !important; | |
| object-fit: cover !important; | |
| } | |
| /* Book info text */ | |
| .fw700.lh20.fs16 { | |
| color: var(--text-primary) !important; | |
| } | |
| .fw400.lh16.fs12.c_s, | |
| .fw400.lh20.fs14.c_s, | |
| .fw400.lh20.fs14.c_m { | |
| color: var(--text-secondary) !important; | |
| } | |
| /* Rankings list */ | |
| .m-rank-list { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 12px !important; | |
| padding: 16px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-rank-title { | |
| color: var(--text-primary) !important; | |
| } | |
| /* Create section cards */ | |
| .m-create { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 12px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| padding: 20px !important; | |
| } | |
| /* Genre/tag buttons */ | |
| .m-7007-tag { | |
| background: var(--bg-tertiary) !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| color: var(--accent-primary) !important; | |
| border-radius: 8px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .m-7007-tag:hover { | |
| background: rgba(56, 189, 248, 0.15) !important; | |
| border-color: var(--accent-primary) !important; | |
| } | |
| /* Section titles */ | |
| .g_hr.pb12.mb16, | |
| .g_hr.pb12.mb20 { | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| margin-bottom: 20px !important; | |
| padding-bottom: 12px !important; | |
| } | |
| /* Continue Reading bar */ | |
| .m-continue, | |
| .continue-reading, | |
| .j_continue_read, | |
| [class*="continue-read"] { | |
| background: var(--bg-secondary) !important; | |
| border-top: 1px solid var(--border-subtle) !important; | |
| padding: 12px 24px !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| right: 0 !important; | |
| z-index: 9998 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| .m-continue img, | |
| .continue-reading img, | |
| .j_continue_read img { | |
| width: 40px !important; | |
| height: 53px !important; | |
| border-radius: 4px !important; | |
| margin-right: 12px !important; | |
| } | |
| .m-continue .bt, | |
| .continue-reading .bt, | |
| .j_continue_read .bt, | |
| .continue-reading a[class*="bt"] { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; | |
| color: #000 !important; | |
| padding: 10px 24px !important; | |
| border-radius: 8px !important; | |
| font-weight: 600 !important; | |
| margin-left: auto !important; | |
| } | |
| /* Ranking sections */ | |
| .m-ranking, | |
| .hom-ranking { | |
| background: var(--bg-secondary) !important; | |
| border-radius: 16px !important; | |
| padding: 24px !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-ranking li, | |
| .hom-ranking li { | |
| display: flex !important; | |
| align-items: center !important; | |
| padding: 12px 0 !important; | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| } | |
| .m-ranking li:last-child, | |
| .hom-ranking li:last-child { | |
| border-bottom: none !important; | |
| } | |
| /* Banner/slider section */ | |
| .m-banner, | |
| .hom-banner { | |
| border-radius: 16px !important; | |
| overflow: hidden !important; | |
| margin-bottom: 30px !important; | |
| } | |
| .m-banner img, | |
| .hom-banner img { | |
| border-radius: 16px !important; | |
| } | |
| /* Category tabs on homepage */ | |
| .m-tabs, | |
| .hom-tabs, | |
| .g_tab { | |
| display: flex !important; | |
| gap: 8px !important; | |
| margin-bottom: 20px !important; | |
| border-bottom: 1px solid var(--border-subtle) !important; | |
| padding-bottom: 12px !important; | |
| } | |
| /* Footer */ | |
| .g_footer { | |
| background: var(--bg-secondary) !important; | |
| border-top: 1px solid var(--border-subtle) !important; | |
| padding: 40px 0 !important; | |
| margin-top: 60px !important; | |
| } | |
| .g_footer a { | |
| color: var(--text-secondary) !important; | |
| } | |
| .g_footer a:hover { | |
| color: var(--accent-primary) !important; | |
| } | |
| /* See all / More links */ | |
| .see-all, | |
| .more-link, | |
| a[title="See all"], | |
| a[title="More"] { | |
| color: var(--accent-primary) !important; | |
| font-weight: 500 !important; | |
| } | |
| /* Loading spinners */ | |
| .g_loading, | |
| .m-loading { | |
| background: var(--bg-tertiary) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment