/* ============================================================ 暗色主题覆盖表 —— **本文件由脚本生成，不要手改** 生成器：scripts/_gen-dark-css.mjs（改完跑 node scripts/_gen-dark-css.mjs） 来源：assets/css/ 下 23 个亮色样式表 规则：1216 条 为什么是这么一大坨：原版暗色模式是 Tailwind 的 CSS 变量在 .dark 里换一组值 （原项目 src/app/globals.css:95-132，40 行就完了）。Trident 不认 CSS 变量 （style.css 头注释里有 documentMode=11 上的实测），我们只能把颜色写死， 于是要逐条覆盖。这张表按令牌映射机械生成，不掺手工判断。 覆盖到的令牌（条数）： muted-fg 426 primary / ring / brand 271 foreground 240 border 145 muted 126 card / popover 48 destructive 41 background 35 accent 12 表单控件(白15%边+白4.5%底) 10 secondary 7 accent-fg 7 secondary-fg 6 sidebar 4 ★ 非令牌色一个都没动（金色那组 #F5D76E/#E8B84B/#C9962C/#5C3A0A/#B8740A、 emerald、品牌深色 hover #4E7488 等）—— 原版里它们也是写死的、暗色下不变。 ★ .dark 挂在 上，所以这里一律是后代选择器；html/:root 那几条 写成了 html.dark。 ============================================================ */ .dark .bg-background { background-color:rgb(13,18,21); } .dark .text-background { color:rgb(13,18,21); } .dark .bg-foreground { background-color:rgb(232,236,238); } .dark .text-foreground { color:rgb(232,236,238); } .dark .bg-card { background-color:rgb(21,28,31); } .dark .text-card { color:rgb(21,28,31); } .dark .text-card-foreground { color:rgb(232,236,238); } .dark .bg-popover { background-color:rgb(21,28,31); } .dark .text-popover { color:rgb(21,28,31); } .dark .text-popover-foreground { color:rgb(232,236,238); } .dark .bg-primary { background-color:rgb(106,161,187); } .dark .text-primary { color:rgb(106,161,187); } .dark .bg-secondary { background-color:rgb(35,42,46); } .dark .text-secondary { color:rgb(35,42,46); } .dark .text-secondary-foreground { color:rgb(232,236,238); } .dark .bg-muted { background-color:rgb(35,42,46); } .dark .text-muted { color:rgb(35,42,46); } .dark .text-muted-foreground { color:rgb(147,153,156); } .dark .bg-accent { background-color:rgb(36,48,54); } .dark .text-accent { color:rgb(36,48,54); } .dark .text-accent-foreground { color:rgb(150,198,221); } .dark .bg-destructive { background-color:rgb(255,101,104); } .dark .text-destructive { color:rgb(255,101,104); } .dark .bg-ring { background-color:rgb(106,161,187); } .dark .text-ring { color:rgb(106,161,187); } .dark .bg-sidebar { background-color:rgb(7,12,15); } .dark .text-sidebar { color:rgb(7,12,15); } .dark .border-border { border-color:rgb(NaN,10,37); } .dark .bg-red-600 { background-color:#FF6568; } .dark .text-red-600 { color:#FF6568; } .dark .border-red-600 { border-color:#FF6568; } .dark section[class*="bg-gradient-to-r"] { background-image:linear-gradient(to right,rgba(106,161,187,0.1),rgba(106,161,187,0.05),transparent); } .dark header { position:relative; background-color:rgb(13,18,21); z-index:40; } .dark #player-empty,.dark #player-playing { background-color:rgb(13,18,21); } .dark [class~="bg-background/95"] { background-color:rgb(13,18,21); } .dark [class~="bg-background/95"] { background-color:rgba(13,18,21,0.95); } .dark [class~="bg-muted/60"] { background-color:rgba(35,42,46,0.6); } .dark [class~="bg-muted/30"] { background-color:rgba(35,42,46,0.3); } .dark [class~="bg-sidebar/60"] { background-color:rgba(7,12,15,0.6); } .dark [class~="text-muted-foreground/70"] { color:rgba(147,153,156,0.7); } .dark [class~="bg-destructive/10"] { background-color:rgba(255,101,104,0.1); } .dark [class~="border-destructive/30"] { border-color:rgba(255,101,104,0.3); } .dark [class~="bg-primary/15"] { background-color:rgba(106,161,187,0.15); } .dark [class~="bg-muted/40"] { background-color:rgba(35,42,46,0.4); } .dark [class~="bg-primary/90"] { background-color:rgba(106,161,187,0.9); } .dark [class~="bg-muted/50"] { background-color:rgba(35,42,46,0.5); } .dark [class~="text-foreground/80"] { color:rgba(232,236,238,0.8); } .dark [class~="text-foreground/70"] { color:rgba(232,236,238,0.7); } .dark [class~="bg-primary/8"] { background-color:rgba(106,161,187,0.08); } .dark [class~="bg-primary/10"] { background-color:rgba(106,161,187,0.1); } .dark [class~="hover:bg-muted"]:hover { background-color:rgb(35,42,46); } .dark [class~="hover:bg-accent"]:hover { background-color:rgb(36,48,54); } .dark [class~="hover:bg-accent/50"]:hover { background-color:rgba(36,48,54,0.5); } .dark [class~="hover:bg-muted/60"]:hover { background-color:rgba(35,42,46,0.6); } .dark [class~="hover:bg-muted/50"]:hover { background-color:rgba(35,42,46,0.5); } .dark [class~="hover:bg-primary/90"]:hover { background-color:rgba(106,161,187,0.9); } .dark [class~="hover:bg-primary/10"]:hover { background-color:rgba(106,161,187,0.1); } .dark [class~="hover:bg-primary/8"]:hover { background-color:rgba(106,161,187,0.08); } .dark [class~="hover:bg-primary/5"]:hover { background-color:rgba(106,161,187,0.05); } .dark [class~="hover:bg-destructive/90"]:hover { background-color:rgba(255,101,104,0.9); } .dark [class~="hover:text-primary"]:hover { color:rgb(106,161,187); } .dark [class~="hover:text-foreground"]:hover { color:rgb(232,236,238); } .dark [class~="hover:text-muted-foreground"]:hover { color:rgb(147,153,156); } .dark [class~="hover:text-destructive"]:hover { color:rgb(255,101,104); } .dark [class~="hover:text-accent-foreground"]:hover { color:rgb(150,198,221); } .dark [class~="hover:border-primary"]:hover { border-color:rgb(106,161,187); } .dark .ar-back { display: inline-block; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: none; } .dark .ar-back:hover { color: #E8ECEE; } .dark .ar-btn-white { background-color: #FFFFFF; color: #E8ECEE; } .dark .ar-btn-white:hover { background-color: rgba(255, 255, 255, 0.9); color: #E8ECEE; } .dark .ar-k { font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-v { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .ar-vs { margin-top: 2px; font-size: 10px; line-height: 1.5; color: #93999C; } .dark .ar-tablist { display: inline-block; overflow: hidden; height: 36px; padding: 3px; border-radius: 12px; background-color: #232A2E; font-size: 0; } .dark .ar-tab { float: left; height: 29px; padding: 4px 8px; border: 1px solid transparent; border-radius: 10px; background-color: transparent; color: #E8ECEE; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; outline: none; -ms-transition: background-color 0.15s; transition: background-color 0.15s; } .dark .ar-tab.on { background-color: #0D1215; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.102), 0 1px 2px -1px rgba(0, 0, 0, 0.102); } .dark .ar-stbl { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .ar-stbl-head { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 8px 0; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(35,42,46,0.3); } .dark .ar-stbl-head > div { font-size: 11px; line-height: 1.5; color: #93999C; } .dark .ar-srow:hover { background-color: rgba(35,42,46,0.4); } .dark .ar-sc-album { display: table-cell; width: 180px; vertical-align: middle; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-sc-pc { display: table-cell; width: 80px; vertical-align: middle; text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-sc-tm { display: table-cell; width: 60px; vertical-align: middle; text-align: right; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-sc-ixn { font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-sc-play svg { display: block; margin: 0 auto; width: 14px; height: 14px; color: #6AA1BB; fill: #6AA1BB; } .dark .ar-sc-n { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; } .dark .ar-sc-al2 { font-size: 11px; line-height: 1.5; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .ar-sc-fav { display: block; width: 100%; height: 26px; padding: 6px; border: 0; border-radius: 4px; background-color: transparent; color: #93999C; opacity: 0; cursor: pointer; -ms-transition: background-color 0.15s, color 0.15s; transition: background-color 0.15s, color 0.15s; } .dark .ar-sc-fav:hover { background-color: #232A2E; } .dark .ar-sc-fav.is-fav { color: #6AA1BB; opacity: 1; } .dark .ar-acard-bub svg { display: block; margin: 12px 11px 12px 13px; width: 16px; height: 16px; color: #E8ECEE; fill: #E8ECEE; } .dark .ar-acard-n { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ar-acard-c { font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-cc-l { font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-cc-v { margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .ar-cc-s { font-size: 10px; line-height: 1.5; color: #93999C; } .dark .ar-lrow { display: table; width: 100%; border-spacing: 0; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .ar-lrow-t { display: table-cell; vertical-align: middle; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ar-crow { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .ar-in { display: block; width: 100%; height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; outline: none; } .dark .ar-in:focus { border-color: rgba(106,161,187,0.3); } .dark .ar-in:-ms-input-placeholder { color: #93999C; } .dark .ar-in::-ms-input-placeholder { color: #93999C; } .dark .ar-in::placeholder { color: #93999C; } .dark .ar-ta { display: block; width: 100%; min-height: 60px; padding: 8px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; resize: none; outline: none; } .dark .ar-ta:focus { border-color: rgba(106,161,187,0.3); } .dark .ar-ta:-ms-input-placeholder { color: #93999C; } .dark .ar-ta::-ms-input-placeholder { color: #93999C; } .dark .ar-ta::placeholder { color: #93999C; } .dark .ar-chint { display: table-cell; vertical-align: middle; font-size: 11px; line-height: 1.5; color: #93999C; } .dark .ar-dtitle { margin-bottom: 12px; font-size: 16px; line-height: 24px; font-weight: 700; color: #E8ECEE; } .dark .ar-dtitle-ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .ar-load,.dark .ar-err { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ar-emp { padding: 40px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; } .dark .ar-dtk { display: table-cell; vertical-align: top; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ar-ddv { display: table-cell; vertical-align: top; width: 1%; text-align: right; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ar-dp { font-size: 14px; line-height: 1.625; color: #93999C; } .dark .ar-sim-n { margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .ar-sim-c { font-size: 10px; line-height: 1.5; color: #93999C; } .dark .ar-none { padding: 24px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ar-post { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .ar-pname { display: table-cell; vertical-align: middle; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ar-ptime { display: table-cell; vertical-align: middle; padding-left: 8px; white-space: nowrap; font-size: 10px; line-height: 1.5; color: #93999C; } .dark .ar-prep-btn { display: inline-block; vertical-align: middle; padding: 4px; margin-right: -4px; border: 0; border-radius: 4px; background-color: transparent; color: rgba(147,153,156,0.6); cursor: pointer; -ms-transition: color 0.15s, background-color 0.15s; transition: color 0.15s, background-color 0.15s; } .dark .ar-prep-btn:hover { color: #FF6568; background-color: #232A2E; } .dark .ar-pt { margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: #E8ECEE; } .dark .ar-pc { margin-bottom: 8px; max-height: 32px; overflow: hidden; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ar-pact-on { color: #6AA1BB; } .dark .ar-pact-off { color: #93999C; } .dark .ar-pact-off:hover { color: #6AA1BB; } .dark .ar-reps { margin-top: 12px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.1); } .dark .ar-rname { font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .ar-rtime { margin-left: 8px; font-size: 10px; line-height: 1.5; color: #93999C; } .dark .ar-rc { font-size: 12px; line-height: 1.625; color: rgba(232,236,238,0.9); } .dark .ar-rin { display: block; width: 100%; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 12px; line-height: 16px; color: #E8ECEE; outline: none; } .dark .ar-rin:focus { border-color: rgba(106,161,187,0.3); } .dark .ar-rin:-ms-input-placeholder { color: #93999C; } .dark .ar-rin::-ms-input-placeholder { color: #93999C; } .dark .ar-rin::placeholder { color: #93999C; } .dark .ats-card:hover { border-color: rgba(255,255,255,.1); background-color: rgba(35,42,46,0.3); } .dark .ats-card-name { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .ats-card-l1 { margin-top: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ats-card-l2 { margin-top: 2px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .cmt-head-ico { display: table-cell; width: 56px; height: 56px; vertical-align: middle; border-radius: 16px; background-color: rgba(106,161,187,0.1); text-align: center; } .dark .cmt-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #6AA1BB; } .dark .cmt-head-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .cmt-head-tx p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmt-chd-t { display: table-cell; vertical-align: middle; width: 1%; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; } .dark .cmt-chd-n { display: table-cell; vertical-align: middle; padding-left: 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .cmt-pick-b:hover { background-color: rgba(35,42,46,0.5); } .dark .cmt-pick-b.cmt-pick-on,.dark .cmt-pick-b.cmt-pick-on:hover { background-color: rgba(106,161,187,0.1); } .dark .cmt-pick-nm { display: block; width: 100%; font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .cmt-pick-on .cmt-pick-nm { color: #6AA1BB; font-weight: 500; } .dark .cmt-cur-n { display: table-cell; vertical-align: middle; font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; } .dark .cmt-stat { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; padding: 16px; text-align: center; } .dark .cmt-stat-l { font-size: 12px; line-height: 16px; color: #93999C; } .dark .cmt-stat-v { margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .cmt-stat-s { font-size: 10px; line-height: 15px; color: #93999C; } .dark .cmt-lrow { display: table; width: 100%; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .cmt-lrow-t { display: table-cell; vertical-align: middle; padding-right: 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmt-frow { zoom: 1; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .cmt-dtitle { font-size: 16px; line-height: 24px; font-weight: 700; color: #E8ECEE; margin-bottom: 12px; } .dark .cmt-dtitle-ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .cmt-load { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmt-fail { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmt-in { display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 14px; line-height: 34px; color: #E8ECEE; outline: none; } .dark .cmt-in:focus { border-color: rgba(106,161,187,0.3); } .dark .cmt-in:-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-in::-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-in::placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-ta { display: block; width: 100%; height: 78px; box-sizing: border-box; padding: 8px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; resize: none; outline: none; } .dark .cmt-ta:focus { border-color: rgba(106,161,187,0.3); } .dark .cmt-ta:-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-ta::-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-ta::placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-empty { padding: 40px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; } .dark .cmt-prow { zoom: 1; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .cmt-phd-u { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; text-overflow: ellipsis; } .dark .cmt-phd-t { font-size: 10px; line-height: 15px; color: #93999C; } .dark .cmt-rep { display: inline-block; vertical-align: middle; margin-right: -4px; padding: 4px; border: 0; border-radius: 4px; background: none; color: rgba(147,153,156,0.6); cursor: pointer; font-size: 0; line-height: 0; -ms-transition: color 0.15s, background-color 0.15s; transition: color 0.15s, background-color 0.15s; } .dark .cmt-rep:hover { color: #FF6568; background-color: #232A2E; } .dark .cmt-pt { font-size: 14px; line-height: 20px; font-weight: 700; color: #E8ECEE; margin-bottom: 4px; } .dark .cmt-pc { font-size: 12px; line-height: 19.5px; color: #93999C; margin-bottom: 8px; word-wrap: break-word; overflow-wrap: break-word; max-height: 39px; overflow: hidden; } .dark .cmt-rps { margin-top: 12px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.1); } .dark .cmt-rhd-n { font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .cmt-rhd-t { font-size: 10px; line-height: 15px; color: #93999C; } .dark .cmt-rc { font-size: 12px; line-height: 19.5px; color: rgba(232,236,238,0.9); word-wrap: break-word; overflow-wrap: break-word; } .dark .cmt-pft-b { display: inline-block; vertical-align: middle; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 16px; color: #93999C; -ms-transition: color 0.15s; transition: color 0.15s; } .dark .cmt-pft-b:hover { color: #6AA1BB; } .dark .cmt-on { color: #6AA1BB; } .dark .cmt-rbi { display: block; width: 100%; height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background-color: rgba(35,42,46,0.4); font-family: inherit; font-size: 12px; line-height: 30px; color: #E8ECEE; outline: none; } .dark .cmt-rbi:focus { border-color: rgba(106,161,187,0.3); } .dark .cmt-rbi:-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-rbi::-ms-input-placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-rbi::placeholder { color: rgba(232,236,238,0.5); } .dark .cmt-tip-ic svg { display: block; width: 14px; height: 14px; color: #93999C; } .dark .cmt-tip-tx { display: table-cell; vertical-align: top; padding-left: 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .cmp-ast { margin-left: 8px; color: #FF6568; } .dark .cmp-count { text-align: right; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .cmp-form .ui-input:focus,.dark .cmp-form .ui-textarea:focus,.dark .cmp-form .ui-sel:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .cmp-submit:focus { box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .cmp-done-h { margin-bottom: 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .cmp-done-p { margin-bottom: 24px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmp-contact { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 20px; color: #93999C; } .dark .cmp-ci { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; position: relative; top: -1px; color: #6AA1BB; } .dark .dt-clock-ic { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: top; position: relative; top: 1px; color: #6AA1BB; } .dark .dt-card { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .dt-chead-ic { display: table-cell; vertical-align: middle; width: 16px; color: #6AA1BB; } .dark .dt-chead-t { display: table-cell; vertical-align: middle; width: 100%; margin: 0; padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .dt-bdg-sec { background-color: #232A2E; color: #E8ECEE; border-color: transparent; } .dark .dt-guest-icb { position: relative; display: block; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background-color: #232A2E; color: #93999C; } .dark .dt-guest-p { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .dt-load { padding: 48px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .dt-task { display: table; width: 100%; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; border-collapse: separate; border-spacing: 12px; -ms-transition: background-color 0.15s, border-color 0.15s; transition: background-color 0.15s, border-color 0.15s; } .dark .dt-task.dt-claimed { background-color: rgba(35,42,46,0.3); border-color: rgba(255,255,255,.1); opacity: 0.7; } .dark .dt-task.dt-todo { background-color: #151C1F; border-color: rgba(255,255,255,.1); } .dark .dt-task.dt-todo:hover { background-color: rgba(35,42,46,0.3); } .dark .dt-ticb-claimed { background-color: #232A2E; color: #93999C; } .dark .dt-ticb-todo { background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .dt-tk { font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; } .dark .dt-tbdg { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background-color: rgba(106,161,187,0.1); color: #6AA1BB; font-size: 10px; line-height: 15px; white-space: nowrap; } .dark .dt-tdesc { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .dt-rule { display: table; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; line-height: 1.625; color: #93999C; } .dark .dt-rule-n { display: table-cell; vertical-align: top; width: 1px; white-space: nowrap; padding-right: 8px; color: #6AA1BB; font-weight: 600; } .dark .dt-foot { text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .dl-back { display: table; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: none; -ms-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .dl-back:hover { color: #E8ECEE; } .dark .dl-btn-white { background-color: #FFFFFF; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .dark .dl-btn-ghostw:hover { background-color: rgba(255,255,255,0.2); color: #96C6DD; } .dark .dl-st-icb { position: relative; display: block; width: 36px; height: 36px; border-radius: 12px; background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .dl-st-k { font-size: 12px; line-height: 16px; color: #93999C; } .dark .dl-st-f { margin-top: 6px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .dl-lh-t { display: table-cell; vertical-align: middle; width: 100%; font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .dl-lh-ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 6px; color: #6AA1BB; } .dark .dl-share { display: inline-block; vertical-align: top; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: #93999C; font-size: 0; line-height: 0; -ms-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .dl-share:hover { color: #6AA1BB; } .dark .dl-empty { padding: 80px 0; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .dl-lv { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .dl-lhead { border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(35,42,46,0.3); font-size: 11px; line-height: 1.5; color: #93999C; } .dark .dl-lrow { border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; } .dark .dl-lrow:hover { background-color: rgba(35,42,46,0.4); } .dark .dl-lidx-n { display: inline; font-size: 12px; line-height: 16px; color: #93999C; font-variant-numeric: tabular-nums; } .dark .dl-lidx-play { display: none; width: 14px; height: 14px; margin: 0 auto; color: #6AA1BB; fill: currentColor; } .dark .dl-lnname { display: inline-block; vertical-align: middle; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .dl-lnname:hover { color: #6AA1BB; text-decoration: underline; } .dark .dl-lartist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .dl-lalb { display: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .dl-reason-p { display: inline; padding: 2px 6px; border-radius: 4px; background-color: rgba(106,161,187,0.1); color: #6AA1BB; font-size: 10px; line-height: 15px; white-space: nowrap; } .dark .dl-ldur { font-size: 12px; line-height: 16px; color: #93999C; text-align: right; font-variant-numeric: tabular-nums; } .dark .dl-lfav { display: block; width: 100%; padding: 6px; border: 0; background: transparent; border-radius: 4px; color: #93999C; opacity: 0; cursor: pointer; text-align: left; } .dark .dl-lfav:hover { background-color: #232A2E; } .dark .dl-foot { text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .idf-tablist { width: 448px; height: 36px; padding: 3px; margin-bottom: 8px; border-radius: 12px; background-color: #232A2E; overflow: hidden; } .dark .idf-tab { float: left; width: 50%; height: 29px; padding: 4px 8px; border: 1px solid transparent; border-radius: 10px; background-color: transparent; color: #E8ECEE; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-align: center; cursor: pointer; -ms-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .idf-tab-on { background-color: #0D1215; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.102), 0 1px 2px -1px rgba(0, 0, 0, 0.102); } .dark .idf-head-ico { display: table-cell; width: 56px; height: 56px; vertical-align: middle; border-radius: 16px; background-color: rgba(106,161,187,0.1); text-align: center; } .dark .idf-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #6AA1BB; } .dark .idf-head-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .idf-head-tx p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .idf-mic { display: block; width: 80px; height: 80px; margin: 0 auto 20px; padding: 0; border: 0; border-radius: 50%; background-color: #232A2E; position: relative; overflow: visible; text-align: center; font-size: 0; line-height: 80px; cursor: pointer; -ms-transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .idf-mic:hover { background-color: rgba(35,42,46,0.7); } .dark .idf-mic-listen { background-color: rgba(106,161,187,0.15); } .dark .idf-mic-listen:hover { background-color: rgba(106,161,187,0.15); } .dark .idf-micico svg.idf-svg-idle { color: #93999C; } .dark .idf-micico svg.idf-svg-listen { color: #6AA1BB; -ms-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .dark .idf-micico svg.idf-svg-nf { color: rgba(147,153,156,0.6); } .dark .idf-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(106,161,187,0.25); -ms-animation: idf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; animation: idf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .dark .idf-wave-2 { background-color: rgba(106,161,187,0.15); -ms-animation-delay: 0.7s; animation-delay: 0.7s; } .dark .idf-h2 { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; } .dark .idf-hint { max-width: 576px; margin: 0 auto; font-size: 14px; line-height: 22.75px; color: #93999C; } .dark .idf-prog { max-width: 320px; height: 4px; margin: 20px auto 0; border-radius: 9999px; background-color: #232A2E; overflow: hidden; } .dark .idf-progbar { height: 100%; border-radius: 9999px; background-color: #6AA1BB; -ms-animation: idf-progress 10s linear forwards; animation: idf-progress 10s linear forwards; } .dark .idf-rhead-ic svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .idf-rhead-tx { display: table-cell; width: 100%; vertical-align: middle; padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .idf-desc { margin-bottom: 20px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .idf-badge2 { display: inline-block; vertical-align: middle; padding: 2px 8px; border: 1px solid transparent; border-radius: 10px; background-color: #232A2E; color: #E8ECEE; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } .dark .idf-lb { display: block; font-size: 12px; line-height: 16px; color: #93999C; } .dark .idf-srow:hover { background-color: rgba(35,42,46,0.5); } .dark .idf-srow-nm { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .idf-srow-meta { font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .idf-play { display: block; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background-color: transparent; color: #E8ECEE; text-align: center; font-size: 0; line-height: 36px; cursor: pointer; -ms-transition: background-color 0.15s, color 0.15s; transition: background-color 0.15s, color 0.15s; } .dark .idf-play:hover { background-color: #243036; color: #96C6DD; } .dark .idf-empty-ic { width: 32px; height: 32px; margin: 0 auto; color: rgba(147,153,156,0.5); } .dark .idf-empty-d { margin-top: 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .idf-empty-t { margin-top: 20px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .idf-chip { display: inline-block; margin: 4px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; background: none; font-family: inherit; font-size: 12px; line-height: 16px; color: #E8ECEE; cursor: pointer; -ms-transition: border-color 0.15s, color 0.15s; transition: border-color 0.15s, color 0.15s; } .dark .idf-chip:hover { border-color: #6AA1BB; color: #6AA1BB; } .dark .idf-chip-n { color: #93999C; } .dark .idf-loading { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .lgi-card { padding: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background-color: #151C1F; } .dark .lgi-tabs { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; padding: 4px; margin-bottom: 32px; border-radius: 16px; background-color: rgba(35,42,46,0.6); } .dark .lgi-tab-on { background-color: #0D1215; color: #6AA1BB; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .dark .lgi-tab-off { color: #93999C; } .dark .lgi-tab-off:hover { color: #E8ECEE; } .dark .lgi-in-ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #93999C; } .dark .lgi-pwbtn { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; background: none; color: #93999C; cursor: pointer; } .dark .lgi-pwbtn:hover { color: #E8ECEE; } .dark .lgi-ck-mk { display: block; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 0; } .dark .lgi-ck-in:checked + .lgi-ck-mk { background-color: #6AA1BB; border-color: #6AA1BB; } .dark .lgi-ck-in:focus-visible + .lgi-ck-mk { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .dark .lgi-ck-in:focus + .lgi-ck-mk { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5); } } .dark .lgi-rem-lb { float: left; margin-left: 10px; font-size: 12px; line-height: 16px; color: #93999C; cursor: pointer; } .dark .lgi-forgot { float: right; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 400; color: #6AA1BB; cursor: pointer; } .dark .lgi-forgot:hover { background: none; color: #6AA1BB; text-decoration: underline; } .dark .lgi-note { font-size: 11px; line-height: 17.875px; text-align: center; color: #93999C; } .dark .lgi-foot { margin-top: 24px; text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .lgi-foot-a { display: inline-block; margin-left: 4px; color: #6AA1BB; text-decoration: none; } .dark .lgi-foot-a:hover { color: #6AA1BB; text-decoration: underline; } .dark .lgi-mcard { padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .lgi-mico { width: 36px; height: 36px; border-radius: 12px; background-color: rgba(106,161,187,0.1); text-align: center; font-size: 0; line-height: 36px; } .dark .lgi-mico svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; color: #6AA1BB; } .dark .lgi-mt { font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; } .dark .lgi-md { margin-top: 2px; font-size: 11px; line-height: 17.875px; color: #93999C; } .dark .mu-sechd-ico svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .mu-sechd-t { font-size: 16px; line-height: 24px; font-weight: bold; color: #E8ECEE; } .dark .mu-sechd-sub { display: inline-block; vertical-align: top; height: 16px; margin-top: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .mu-fcard { position: relative; display: table; table-layout: fixed; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; cursor: pointer; overflow: hidden; transition: box-shadow 0.15s cubic-bezier(0.4,0,0.2,1), transform 0.15s cubic-bezier(0.4,0,0.2,1); } .dark .mu-frank-1 { color: #6AA1BB; } .dark .mu-fmeta { margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .mu-fplays { position: relative; margin-top: 6px; padding-left: 16px; font-size: 11px; line-height: 1.5; color: #93999C; } .dark .mu-chip { display: inline-block; vertical-align: top; height: 28px; line-height: 28px; padding: 0 12px; margin: 0 6px 0 0; border-radius: 9999px; font-size: 12px; color: #93999C; background-color: rgba(35,42,46,0.6); } .dark .mu-chip:hover { background-color: #232A2E; color: #E8ECEE; } .dark .mu-chip-on,.dark .mu-chip-on:hover { background-color: #6AA1BB; color: #FCFCFC; font-weight: 500; } .dark .mu-sortsep { padding: 0 4px; color: rgba(255,255,255,.1); } .dark .mu-sortlink { display: block; padding: 4px 6px; border-radius: 4px; color: #93999C; transition: color 0.15s cubic-bezier(0.4,0,0.2,1); } .dark .mu-sortlink:hover { color: #E8ECEE; } .dark .mu-sortlink-on,.dark .mu-sortlink-on:hover { color: #6AA1BB; font-weight: 500; } .dark .mu-views { display: table; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 2px; border-collapse: separate; border-spacing: 0; } .dark .mu-vbtn { display: table-cell; vertical-align: middle; padding: 6px; border-radius: 10px; color: #93999C; } .dark .mu-vbtn:hover { color: #E8ECEE; } .dark .mu-vbtn-on,.dark .mu-vbtn-on:hover { background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .mu-empty { border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; padding: 80px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .mu-gname { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; transition: color 0.15s cubic-bezier(0.4,0,0.2,1); } .dark .mu-gcard:hover .mu-gname { color: #6AA1BB; } .dark .mu-gart { display: block; height: 16px; margin-top: 5px; margin-bottom: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .mu-gart:hover { color: #6AA1BB; } .dark .mu-fav { display: inline-block; padding: 4px; border: 0; background: transparent; border-radius: 9999px; color: #93999C; opacity: 0; } .dark .mu-fav:hover { background-color: #232A2E; } .dark .mu-lv { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; overflow: hidden; } .dark .mu-lhead { display: none; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 11px; line-height: 1.5; color: #93999C; } .dark .mu-lrow { border-bottom: 1px solid rgba(NaN,10,37,0.6); cursor: pointer; } .dark .mu-lrow:hover { background-color: rgba(35,42,46,0.5); } .dark .mu-lidx-n { display: block; font-size: 14px; line-height: 20px; color: #93999C; font-variant-numeric: tabular-nums; } .dark .mu-lidx-play { display: none; width: 16px; height: 16px; margin: 0 auto; color: #6AA1BB; fill: currentColor; } .dark .mu-lnname { display: inline-block; vertical-align: middle; max-width: calc(100% - 66px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .mu-lnname:hover { color: #6AA1BB; text-decoration: underline; } .dark .mu-lhi > span { display: inline-block; vertical-align: middle; padding: 0 4px; border: 1px solid rgba(106,161,187,0.4); border-radius: 4px; font-size: 10px; line-height: 15px; color: #6AA1BB; white-space: nowrap; } .dark .mu-lmeta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .mu-lartlink { color: #93999C; } .dark .mu-lartlink:hover { color: #6AA1BB; } .dark .mu-lgen,.dark .mu-lalbum { display: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .mu-ltime { font-size: 12px; line-height: 16px; color: #93999C; text-align: right; font-variant-numeric: tabular-nums; } .dark .mu-lfav { display: inline-block; vertical-align: top; padding: 6px; border: 0; background: transparent; border-radius: 9999px; color: #93999C; opacity: 0; } .dark .mu-lfav:hover { background-color: #232A2E; } .dark .mu-lfoot { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: 11px; line-height: 1.5; color: #93999C; } .dark .mu-rdplay svg { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -6px; width: 16px; height: 16px; fill: #E8ECEE; color: #E8ECEE; } .dark .mu-rdn { margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .mu-rdd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: #93999C; } .dark .msc-lock { display: table; width: 100%; border-spacing: 0; padding: 20px; border: 1px solid rgba(246, 158, 0, 0.3); border-radius: 16px; background-color: #151C1F; } .dark .msc-lock-tx { display: table-cell; vertical-align: middle; padding: 0 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .msc-youth { padding: 48px 24px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .msc-youth-ico { position: relative; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 9999px; background-color: #232A2E; } .dark .msc-youth-cic { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: #93999C; } .dark .msc-youth-t { font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; margin-bottom: 8px; } .dark .msc-youth-p { font-size: 14px; line-height: 1.625; color: #93999C; margin-bottom: 24px; } .dark .msc-sec-t { font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; margin-bottom: 16px; } .dark .msc-t-ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .msc-t-ic-sm { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 2px; color: #6AA1BB; } .dark .msc-step { position: relative; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .msc-step-n { font-size: 12px; line-height: 16px; font-weight: 700; color: rgba(106,161,187,0.7); margin-bottom: 4px; } .dark .msc-step-t { font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; margin-bottom: 4px; } .dark .msc-step-d { font-size: 11px; line-height: 1.625; color: #93999C; } .dark .msc-step-ar { display: block; position: absolute; right: -12px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: rgba(147,153,156,0.4); } .dark .msc-info { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.4); } .dark .msc-info-t { font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; margin-bottom: 8px; } .dark .msc-list { padding-left: 20px; list-style-type: disc; list-style-position: outside; font-size: 12px; line-height: 1.625; color: #93999C; } .dark .msc-form { padding: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background-color: #151C1F; } .dark .msc-form-t { font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; margin-bottom: 4px; } .dark .msc-form-p { font-size: 12px; line-height: 16px; color: #93999C; margin-bottom: 24px; } .dark .msc-req { margin-left: 8px; color: #FF6568; } .dark .msc-link { margin: 0 4px; color: #6AA1BB; } .dark .msc-link:hover { color: #6AA1BB; text-decoration: underline; } .dark .msc-agree { display: block; position: relative; margin-top: 24px; padding-left: 24px; font-size: 12px; line-height: 16px; color: #93999C; cursor: pointer; } .dark .msc-agree input { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; cursor: pointer; accent-color: #6AA1BB; } .dark .msc-st { position: relative; overflow: hidden; padding: 36px 24px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background-color: #151C1F; } .dark .msc-st-t { font-size: 20px; line-height: 28px; font-weight: 600; color: #E8ECEE; } .dark .msc-st-p { margin-top: 8px; font-size: 14px; line-height: 1.625; color: #93999C; } .dark .msc-st-strong { font-weight: 500; color: #E8ECEE; } .dark .msc-st-sub { margin-top: 6px; font-size: 12px; line-height: 16px; color: rgba(147,153,156,0.8); } .dark .msc-st-meta { margin-top: 24px; text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .msc-dot { color: rgba(255,255,255,.1); } .dark .msc-st2 { padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .msc-st2-hic { display: table-cell; width: 16px; color: #6AA1BB; } .dark .msc-st2-t { padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .msc-st2-sub { font-size: 12px; line-height: 16px; color: #93999C; } .dark .msc-note-bad { background-color: rgba(255,101,104,0.1); color: #FF6568; } .dark .msc-dl-t { margin-bottom: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .msc-pill-no { background-color: rgba(255,101,104,0.15); color: #FF6568; } .dark .fw-stat-ic svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .fw-stat-l { margin-left: 6px; color: #93999C; } .dark .fw-dot { margin: 0 16px; color: #93999C; } .dark .fw-search-input { display: block; width: 100%; height: 32px; box-sizing: border-box; padding: 4px 12px 4px 32px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background-color: rgba(255,255,255,.045); font-family: inherit; font-size: 12px; line-height: 20px; color: #E8ECEE; outline: none; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } @media (min-width: 768px) { .dark .fw-search-input { font-size: 14px; background-color:rgba(255,255,255,.045); } } .dark .fw-search-input:-ms-input-placeholder { color: #93999C; } .dark .fw-search-input::-ms-input-placeholder { color: #93999C; } .dark .fw-search-input::placeholder { color: #93999C; } .dark .fw-search-input:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5); } .dark .fw-search-ic svg { display: block; width: 14px; height: 14px; color: #93999C; } .dark .fw-h2 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 12px; color: #E8ECEE; } .dark .fw-h2-ic svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .fw-card { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; overflow: hidden; cursor: pointer; -ms-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .dark .fw-card-unf { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(13,18,21,0.8); color: #93999C; cursor: pointer; opacity: 0; font-size: 0; -ms-transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); } .dark .fw-card-unf svg { position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; fill: #6AA1BB; } .dark .fw-card-unf:hover { color: #FF6568; } .dark .fw-card-name { font-size: 14px; line-height: 20px; font-weight: 700; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .fw-card-sub { margin-top: 2px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .fw-card-meta { margin-top: 8px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .fw-bar { display: table; table-layout: fixed; width: 100%; border-spacing: 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; line-height: 15px; color: #93999C; } .dark .fw-bar-cmid { border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); } .dark .fw-bar-btn { display: block; width: 100%; padding: 6px 0; margin: 0; border: 0; background-color: transparent; font-family: inherit; font-size: 10px; line-height: 15px; color: #93999C; text-align: center; cursor: pointer; } .dark .fw-bar-btn:hover { background-color: rgba(35,42,46,0.5); color: #6AA1BB; } .dark .fw-bar-on,.dark .fw-bar-on:hover { color: #6AA1BB; } .dark .fw-empty-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background-color: #232A2E; } .dark .fw-empty-ic svg { display: block; width: 28px; height: 28px; margin: 0 auto; position: relative; top: 14px; color: #93999C; } .dark .fw-empty p { font-size: 14px; line-height: 20px; color: #93999C; } .dark .fw-tile-plus { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background-color: #6AA1BB; color: #FCFCFC; cursor: pointer; font-size: 0; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); -ms-transition: -ms-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .dark .fw-tile-name { margin-top: 14px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .fw-tile-sub { font-size: 10px; line-height: 15px; color: #93999C; } .dark .fw-msg-count { text-align: right; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .rep-empty { padding: 56px 0; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; text-align: center; } .dark .rep-empty-ico { position: relative; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 9999px; background-color: #232A2E; } .dark .rep-empty-ico svg { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: #93999C; } .dark .rep-empty-p { margin-bottom: 16px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .rep-foot { font-size: 12px; line-height: 16px; color: #93999C; text-align: center; } .dark .rep-stat { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; text-align: center; } .dark .rep-stat-l { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-stat-v { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .rep-stat-s { margin-top: 2px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .rep-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .rep-card-hd { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); background-image: linear-gradient(to right, rgba(123,45,142,0.10) 0%, rgba(123,45,142,0) 100%); } .dark .rep-chd-t { display: inline-block; vertical-align: top; font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .rep-chd-s { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-ic-primary { color: #6AA1BB; } .dark .rep-k { margin-bottom: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-artist-t { margin-bottom: 8px; font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .rep-song-t { margin-bottom: 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .rep-bio { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .rep-num-v { font-size: 18px; line-height: 28px; font-weight: 700; color: #6AA1BB; } .dark .rep-num-l { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-playrow-d { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-row:hover { background-color: rgba(35,42,46,0.6); } .dark .rep-row-rk { display: table-cell; width: 24px; vertical-align: middle; text-align: center; font-size: 14px; line-height: 20px; font-weight: 700; color: #93999C; } .dark .rep-row-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .rep-row-s { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rep-bar { width: 96px; height: 6px; border-radius: 9999px; background-color: #232A2E; overflow: hidden; } .dark .rep-panel { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; } .dark .rep-genre-n { float: left; font-weight: 500; color: #E8ECEE; } .dark .rep-genre-p { float: right; color: #93999C; } .dark .rep-gbar { width: 100%; height: 8px; border-radius: 9999px; background-color: #232A2E; overflow: hidden; } .dark .rep-note { margin-top: 12px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .rep-genre-none { padding: 24px 0; font-size: 14px; line-height: 20px; color: #93999C; text-align: center; } .dark .rep-ach-i { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.3); opacity: 0.6; text-align: center; } .dark .rep-ach-on { border-color: rgba(106,161,187,0.3); background-color: rgba(106,161,187,0.05); opacity: 1; } .dark .rep-ach-t { font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .rep-ach-s { margin-top: 2px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .mr-head-ico { display: table-cell; width: 56px; height: 56px; vertical-align: middle; border-radius: 16px; background-color: rgba(106,161,187,0.10); text-align: center; } .dark .mr-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #6AA1BB; } .dark .mr-head-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .mr-head-tx p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .mr-sub { font-size: 12px; line-height: 16px; color: #93999C; } .dark .mr-empty-ico { position: relative; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 9999px; background-color: #232A2E; } .dark .mr-empty-ico svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #93999C; } .dark .mr-empty-p { display: table; margin: 0 auto 16px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .pyr-ico-primary { color: #6AA1BB; } .dark .pyr-ico-muted { color: #93999C; } .dark .pyr-h1 { margin-top: 20px; font-size: 20px; line-height: 28px; font-weight: 700; color: #93999C; } .dark .pl-d-back { display: inline-block; margin-bottom: 24px; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: none; } .dark .pl-d-back:hover { color: #E8ECEE; } .dark .pl-d-favbtn.is-fav { border-color: #6AA1BB; color: #6AA1BB; } .dark .pl-d-tr { font-size: 14px; line-height: 20px; color: #E8ECEE; } .dark .pl-d-tr:hover { background-color: rgba(35,42,46,0.4); } .dark .pl-d-thead { font-size: 11px; line-height: 16.5px; color: #93999C; background-color: rgba(35,42,46,0.2); border-bottom: 1px solid rgba(255,255,255,.1); } .dark .pl-d-ixn { font-size: 12px; line-height: 16px; color: #93999C; } .dark .pl-d-ixb { display: none; width: 14px; height: 14px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; color: #6AA1BB; } .dark .pl-d-name:hover { color: #6AA1BB; text-decoration: underline; } .dark .pl-d-artist { font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .pl-d-alb { font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .pl-d-qchip { display: inline-block; padding: 2px 6px; border-radius: 4px; background-color: #232A2E; color: #93999C; font-size: 10px; line-height: 15px; } .dark .pl-d-dur { font-size: 12px; line-height: 16px; color: #93999C; } .dark .pl-d-fav { display: block; width: 26px; height: 26px; margin-left: auto; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #93999C; opacity: 0; cursor: pointer; } .dark .pl-d-fav:hover { background-color: #232A2E; } .dark .pl-d-req { color: #FF6568; } .dark .xdc-wrap { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); } .dark .xdc-h3 { font-size: 16px; line-height: 24px; font-weight: 700; color: #E8ECEE; } .dark .xdc-h3ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .xdc-sortdot { color: #93999C; } .dark .xdc-sortb,.dark [data-csort] { padding: 2px 8px; border-radius: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 16px; color: #93999C; } .dark .xdc-sortb.xdc-sortb-on,.dark [data-csort][class*="text-primary"] { color: #6AA1BB; font-weight: 500; } .dark .xdc-sortb:hover,.dark [data-csort][class*="text-muted-foreground"]:hover { color: #E8ECEE; } .dark .xdc-formwrap { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.3); } .dark .ui-textarea.xdc-in { min-height: 60px; border: 0; resize: none; background-color: #0D1215; } .dark .xdc-fic { display: inline-block; width: 24px; height: 24px; padding: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 0; line-height: 0; color: #93999C; vertical-align: middle; } .dark .xdc-fic:hover { color: #6AA1BB; } .dark .xdc-count { display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .xdc-list > div[data-cid] { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 20px; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:first-child > *:first-child { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:first-child > *:last-child { margin-left: 8px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .xdc-list > div[data-cid] > div > *:last-child > p { margin-top: 4px; font-size: 14px; line-height: 22.75px; color: rgba(232,236,238,0.9); word-wrap: break-word; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > * { display: inline-block; vertical-align: middle; cursor: pointer; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12px; line-height: 16px; color: #93999C; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > *:hover { color: #6AA1BB; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > *[data-report]:hover { color: #FF6568; } .dark .xdc-list > div:not([data-cid]) > *:first-child { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 9999px; background-color: #232A2E; font-size: 0; line-height: 48px; } .dark .xdc-list > div:not([data-cid]) > *:first-child > svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; color: #93999C; } .dark .xdc-list > div:not([data-cid]) > *:last-child { font-size: 14px; line-height: 20px; color: #93999C; } .dark .xdc-list > div.xdc-load { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .xdc-list > div.xdc-load > .xdc-loadic > svg { display: block; width: 16px; height: 16px; color: #93999C; -ms-animation: xdc-spin 1s linear infinite; animation: xdc-spin 1s linear infinite; } .dark .xdc-moreb { display: block; width: 100%; margin-top: 8px; padding: 12px 0; border: 0; border-radius: 12px; background: none; cursor: pointer; font-family: inherit; text-align: center; font-size: 12px; line-height: 16px; color: #6AA1BB; } .dark .xdc-moreb:hover { background-color: rgba(106,161,187,0.05); } .dark .pf-hero { display: table; width: 100%; padding: 20px; border: 1px solid rgba(106,161,187,0.15); border-radius: 16px; background-color: #E0EBF0; background-image: linear-gradient(to right, rgba(106,161,187,0.10) 0%, rgba(106,161,187,0.05) 50%, rgba(106,161,187,0) 100%); } .dark .pf-name { font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .pf-hsub { margin-top: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .pf-hstat-n { font-weight: 700; color: #E8ECEE; } .dark .pf-hstat-l { color: #93999C; } .dark .pf-tablist { width: 100%; max-width: 448px; height: 36px; padding: 3px; border-radius: 12px; background-color: #232A2E; overflow: hidden; } .dark .pf-tab { float: left; width: 25%; height: 29px; padding: 4px 8px; border: 1px solid transparent; border-radius: 10px; background-color: transparent; color: #E8ECEE; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer; } .dark .pf-tab-on { background-color: #0D1215; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.102), 0 1px 2px -1px rgba(0, 0, 0, 0.102); } .dark .pf-sec-ico svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .pf-sec-t { padding-left: 8px; font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .pf-sec-sub { padding-left: 16px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .pf-sec-more { display: inline-block; font-size: 12px; line-height: 16px; color: #93999C; text-decoration: none; } .dark .pf-sec-more:hover { color: #6AA1BB; } .dark .pf-empty { margin: 0; padding: 24px 0; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .pf-pl-name { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .pf-pl-meta { font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .pf-newpl-in { position: relative; display: block; height: 0; padding-bottom: calc(100% - 4px); border: 2px dashed rgba(255,255,255,.1); border-radius: 16px; background-color: transparent; font-size: 0; color: #93999C; } .dark .pf-newpl:hover .pf-newpl-in { border-color: #6AA1BB; background-color: rgba(106,161,187,0.05); color: #6AA1BB; } .dark .pf-pl-ghost { display: inline-block; width: 40px; height: 32px; padding: 8px 12px; border: 0; border-radius: 10px; background-color: transparent; color: #93999C; opacity: 0; cursor: pointer; } .dark .pf-pl-ghost:hover { background-color: #232A2E; } .dark .pf-pl-ghost-edit:hover { color: #6AA1BB; } .dark .pf-pl-ghost-del:hover { color: #FF6568; } .dark .pf-btn-muted { color: #93999C; } .dark .pf-btn-report { background-color: #0D1215; background-image: linear-gradient(to right, rgba(123,45,142,0.10), rgba(245,158,11,0.10)); border-color: rgba(123,45,142,0.30); color: #7B2D8E; } .dark .pf-att-bad { color: #FF6568; } .dark .sng-back { display: inline-block; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: none; } .dark .sng-back:hover { color: #E8ECEE; } .dark .sng-wbtn { background-color: #FFFFFF; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sng-wbtn:hover { background-color: rgba(255, 255, 255, 0.9); color: #E8ECEE; } .dark .sng-lyr { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .sng-lyrhead { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); background-image: linear-gradient(to right, rgba(106,161,187,0.05), rgba(106,161,187,0)); } .dark .sng-lyric { font-size: 16px; line-height: 26px; color: rgba(232,236,238,0.8); } .dark .sng-lyric-on { font-size: 18px; line-height: 29.25px; font-weight: 600; color: #6AA1BB; } .dark .sng-lyrempty { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sng-lyrload { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sng-h2 { font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .sng-h2ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 6px; color: #6AA1BB; } .dark .sng-arlist { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .sng-artr { display: table; width: 100%; table-layout: fixed; border-spacing: 8px 0; padding: 8px 8px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 20px; color: #E8ECEE; } .dark .sng-artr:hover { background-color: rgba(35,42,46,0.4); } .dark .sng-arnum { font-size: 12px; line-height: 16px; color: #93999C; } .dark .sng-arplay { display: none; width: 14px; height: 14px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; color: #6AA1BB; } .dark .sng-artalb { font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sng-artcnt { font-size: 12px; line-height: 16px; color: #93999C; } .dark .sng-artfav { display: block; width: 26px; height: 26px; margin-left: auto; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #93999C; opacity: 0; cursor: pointer; } .dark .sng-artfav:hover { background-color: #232A2E; } .dark .sng-card { display: block; text-decoration: none; color: #E8ECEE; } .dark .sng-cardsub { font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sng-void { padding: 24px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sng-cmt { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; } .dark .xdc-wrap { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); } .dark .xdc-h3 { font-size: 16px; line-height: 24px; font-weight: 700; color: #E8ECEE; } .dark .xdc-h3ic { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .xdc-sortdot { color: #93999C; } .dark .xdc-sortb,.dark [data-csort] { padding: 2px 8px; border-radius: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 16px; color: #93999C; } .dark .xdc-sortb.xdc-sortb-on,.dark [data-csort][class*="text-primary"] { color: #6AA1BB; font-weight: 500; } .dark .xdc-sortb:hover,.dark [data-csort][class*="text-muted-foreground"]:hover { color: #E8ECEE; } .dark .xdc-formwrap { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.3); } .dark .ui-textarea.xdc-in { min-height: 60px; border: 0; resize: none; background-color: #0D1215; } .dark .xdc-fic { display: inline-block; width: 24px; height: 24px; padding: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 0; line-height: 0; color: #93999C; vertical-align: middle; } .dark .xdc-fic:hover { color: #6AA1BB; } .dark .xdc-count { display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .xdc-list > div[data-cid] { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 20px; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:first-child > *:first-child { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:first-child > *:last-child { margin-left: 8px; font-size: 10px; line-height: 15px; color: #93999C; } .dark .xdc-list > div[data-cid] > div > *:last-child > p { margin-top: 4px; font-size: 14px; line-height: 22.75px; color: rgba(232,236,238,0.9); word-wrap: break-word; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > * { display: inline-block; vertical-align: middle; cursor: pointer; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12px; line-height: 16px; color: #93999C; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > *:hover { color: #6AA1BB; } .dark .xdc-list > div[data-cid] > div > *:last-child > *:last-child > *[data-report]:hover { color: #FF6568; } .dark .xdc-list > div:not([data-cid]) > *:first-child { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 9999px; background-color: #232A2E; font-size: 0; line-height: 48px; } .dark .xdc-list > div:not([data-cid]) > *:first-child > svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; color: #93999C; } .dark .xdc-list > div:not([data-cid]) > *:last-child { font-size: 14px; line-height: 20px; color: #93999C; } .dark .xdc-list > div.xdc-load { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .xdc-list > div.xdc-load > .xdc-loadic > svg { display: block; width: 16px; height: 16px; color: #93999C; -ms-animation: xdc-spin 1s linear infinite; animation: xdc-spin 1s linear infinite; } .dark .xdc-moreb { display: block; width: 100%; margin-top: 8px; padding: 12px 0; border: 0; border-radius: 12px; background: none; cursor: pointer; font-family: inherit; text-align: center; font-size: 12px; line-height: 16px; color: #6AA1BB; } .dark .xdc-moreb:hover { background-color: rgba(106,161,187,0.05); } .dark .spk-card { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .spk-ch-ic svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .spk-ch-t { display: table-cell; vertical-align: middle; padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .spk-bdg-soft { border-color: transparent; background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .spk-bdg-sec { border-color: transparent; background-color: #232A2E; color: #E8ECEE; } .dark .spk-rule { display: table-cell; width: 50%; vertical-align: top; padding: 12px; border-radius: 16px; background-color: rgba(35,42,46,0.4); font-size: 0; line-height: 0; } .dark .spk-rule-d { display: inline-block; vertical-align: top; margin-left: 12px; padding-top: 2px; font-size: 12px; line-height: 19.5px; color: #93999C; } .dark .spk-guest-ic { position: relative; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 9999px; background-color: #232A2E; } .dark .spk-guest-ic svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #93999C; } .dark .spk-guest-t { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .spk-load { padding: 48px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .spk-row:hover { background-color: rgba(35,42,46,0.4); } .dark .spk-row-top { border: 1px solid rgba(106,161,187,0.1); background-color: transparent; background-image: linear-gradient(to right, rgba(106,161,187,0.05) 0%, rgba(106,161,187,0) 100%); } .dark .spk-rk-0 { background-color: #232A2E; color: #93999C; } .dark .spk-info-n { font-size: 14px; line-height: 20px; font-weight: 600; color: #E8ECEE; -ms-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .spk-info-n:hover { color: #6AA1BB; } .dark .spk-info-a { font-size: 12px; line-height: 16px; color: #93999C; } .dark .spk-num { font-size: 14px; line-height: 20px; font-weight: 700; color: #E8ECEE; } .dark .spk-num-k { font-size: 10px; line-height: 15px; color: #93999C; } .dark .spk-winner-ph { padding: 24px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .spk-winner { display: table; width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; border-collapse: separate; border-spacing: 16px; background-image: linear-gradient(to bottom right, rgba(106,161,187,0.05) 0%, rgba(106,161,187,0) 100%); } .dark .spk-foot { text-align: center; font-size: 12px; line-height: 16px; color: #93999C; } .dark .spk-c-pri { color: #6AA1BB; } .dark .vp-h2 { margin-bottom: 16px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .vp-h2-ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: top; position: relative; top: 4px; color: #6AA1BB; } .dark .vp-plan-off { border-color: #FFFFFF; background-color: #151C1F; } .dark .vp-plan-n { font-size: 18px; line-height: 28px; font-weight: 700; color: #E8ECEE; } .dark .vp-price-old { margin-left: 4px; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: line-through; } .dark .vp-price-per { margin-left: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .vp-feat-t { font-size: 14px; line-height: 20px; color: rgba(232,236,238,0.8); } .dark .vp-tbl-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; overflow: hidden; } .dark .vp-tbl th,.dark .vp-tbl td { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 400; text-align: center; } .dark .vp-th-1 { text-align: left; font-weight: 500; color: #93999C; } .dark .vp-th { font-weight: 700; color: #E8ECEE; } .dark .vp-th-sub { margin-top: 2px; font-size: 11px; line-height: 15.7143px; font-weight: 400; color: #93999C; } .dark .vp-td-1 { text-align: left; color: rgba(232,236,238,0.8); } .dark .vp-dash { color: rgba(147,153,156,0.4); } .dark .ym-lock-ico { display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; background-color: rgba(106,161,187,0.1); line-height: 64px; text-align: center; font-size: 0; } .dark .ym-lock-ico svg { display: inline-block; vertical-align: middle; width: 32px; height: 32px; color: #6AA1BB; } .dark .ym-lock-t { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; } .dark .ym-lock-p { margin-bottom: 24px; font-size: 14px; line-height: 22.75px; color: #93999C; } .dark .ym-loading { padding: 40px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ym-tc { text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ym-sec-hd-t { display: table-cell; vertical-align: middle; padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .ym-sec-p,.dark .ym-hp { font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-li-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ym-li-p { margin-top: 2px; font-size: 12px; line-height: 19.5px; color: #93999C; } .dark .ym-st-off { background-color: #232A2E; color: #93999C; } .dark .ym-hd-t2 { display: table-cell; vertical-align: middle; font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .ym-hd-sub { margin-top: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-pill-off { background-color: #232A2E; color: #93999C; } .dark .ym-pill-d-off { background-color: #93999C; } .dark .ym-blk { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } .dark .ym-nums-r { display: table-cell; vertical-align: bottom; padding-left: 12px; text-align: right; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-num { font-size: 30px; line-height: 36px; font-weight: 700; color: #E8ECEE; } .dark .ym-num-s { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-em { color: #E8ECEE; font-weight: 500; } .dark .ym-bar { position: relative; width: 100%; height: 8px; overflow: hidden; border-radius: 9999px; background-color: rgba(106,161,187,0.2); } .dark .ym-bar-in { height: 100%; width: 100%; background-color: #6AA1BB; -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .dark .ym-fact { padding: 12px; border-radius: 16px; background-color: rgba(35,42,46,0.5); } .dark .ym-dt { display: table; border-collapse: separate; border-spacing: 0; margin-bottom: 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-dd { font-weight: 500; color: #E8ECEE; } .dark .ym-dd-n { color: #93999C; font-weight: 400; } .dark .ym-red { color: #FF6568; } .dark .ym-h3 { margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ym-sep-blk { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } .dark .ym-u { padding-bottom: 8px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ym-inline-c { display: table-cell; vertical-align: middle; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ym-tip2 { margin-top: 16px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ym-link { margin: 0 4px; color: #6AA1BB; text-decoration: none; } .dark .ym-page .ui-input:focus,.dark #y-reset-modal .ui-input:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark body { min-height: 100%; padding-top: 64px; padding-bottom: 80px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: "cv01", "cv02", "ss01"; font-size: 16px; line-height: 1.5; color: #E8ECEE; background: #0D1215; } .dark a { color: #E8ECEE; text-decoration: none; } .dark a:hover { color: #6AA1BB; } .dark input,.dark select,.dark textarea { font-family: inherit; font-size: 14px; color: #E8ECEE; outline: none; } .dark .site-header { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 40; padding: 0 48px; background: #0D1215; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .main-nav a { display: inline-block; height: 36px; line-height: 36px; padding: 0 16px; margin-right: 4px; font-size: 14px; font-weight: 500; border-radius: 12px; white-space: nowrap; color: rgba(232,236,238,0.7); } .dark .main-nav a:hover { color: #E8ECEE; background: #232A2E; } .dark .main-nav a.active { color: #6AA1BB; background: rgba(106,161,187,0.08); } .dark .search-box .sb-ico { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; color: #93999C; } .dark .search-box input { width: 100%; height: 36px; padding: 4px 36px; border: 0; border-radius: 9999px; background: rgba(35,42,46,0.6); font-size: 14px; line-height: 20px; color: #E8ECEE; outline: none; } .dark .search-box input:-ms-input-placeholder { color: #93999C; } .dark .search-box input::-ms-input-placeholder { color: #93999C; } .dark .search-box input::placeholder { color: #93999C; } .dark .search-box .sb-clear { position: absolute; right: 12px; top: 11px; width: 14px; height: 14px; padding: 0; border: 0; background: transparent; color: #93999C; font-size: 0; cursor: pointer; } .dark .search-box .sb-clear:hover { color: #E8ECEE; } .dark .search-box input:focus { box-shadow: 0 0 0 1px rgba(106,161,187,0.4); } .dark .hs-panel { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: #151C1F; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); z-index: 50; overflow: hidden; text-align: left; pointer-events: auto; font-size: 16px; line-height: 1.5; } .dark .hs-head { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(35,42,46,0.3); font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; } .dark .hs-head-r { float: right; padding: 0; border: 0; background: transparent; color: #6AA1BB; font-size: 12px; line-height: 16px; cursor: pointer; } .dark .hs-sec-top { border-top: 1px solid rgba(255,255,255,.1); } .dark .hs-sec-t { padding: 4px; font-size: 10px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #93999C; } .dark .hs-row:hover { background: rgba(35,42,46,0.6); } .dark .hs-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .hs-sub { font-size: 12px; line-height: 16px; color: #93999C; } .dark .hs-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.1); } .dark .hs-all { display: block; width: 100%; padding: 6px 0; border: 0; border-radius: 10px; background: transparent; color: #6AA1BB; font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; } .dark .hs-all:hover { background: rgba(106,161,187,0.05); } .dark .hs-eh { margin-bottom: 8px; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; } .dark .hs-eh-r { float: right; padding: 0; border: 0; background: transparent; color: #93999C; font-size: 12px; line-height: 16px; cursor: pointer; } .dark .hs-eh-r:hover { color: #E8ECEE; } .dark .hs-word { float: left; margin: 0 6px 6px 0; padding: 4px 10px; border: 0; border-radius: 9999px; background: #232A2E; color: #E8ECEE; font-size: 12px; line-height: 16px; cursor: pointer; } .dark .hs-word:hover { background: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .hs-rt { margin-bottom: 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .hs-grow { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: #E8ECEE; font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; overflow: hidden; } .dark .hs-grow:hover { background: rgba(35,42,46,0.6); } .dark .hs-rk { color: #6AA1BB; font-weight: 700; } .dark .hs-rk-n { color: #93999C; } .dark .btn-icon { display: inline-block; width: 36px; height: 36px; line-height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #E8ECEE; text-align: center; vertical-align: middle; position: relative; } .dark .btn-icon:hover { background: #243036; } .dark .btn-ghost { display: inline-block; height: 36px; line-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #E8ECEE; font-size: 12px; font-weight: 500; vertical-align: middle; white-space: nowrap; } .dark .btn-ghost:hover { background: #243036; } .dark .btn-login { display: inline-block; height: 36px; line-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #6AA1BB; color: #FCFCFC; font-size: 14px; font-weight: 500; vertical-align: middle; } .dark .badge-dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; background: #6AA1BB; color: #FCFCFC; font-size: 9px; font-weight: bold; text-align: center; box-shadow: 0 0 0 2px #0D1215; z-index: 1; } .dark .user-chip:hover { background: #232A2E; } .dark .user-chip .ulv { display: block; font-size: 10px; line-height: 10px; color: #93999C; margin-top: 2px; } .dark .user-chip .ucheb { display: table-cell; vertical-align: middle; padding-left: 8px; color: #93999C; line-height: 0; } .dark .dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 224px; background: #151C1F; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.102), 0 2px 4px -2px rgba(0,0,0,0.102); padding: 4px; z-index: 60; text-align: left; } .dark .dropdown a,.dark .dropdown .ditem,.dark .dropdown button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; line-height: 1.4; color: #E8ECEE; text-align: left; cursor: pointer; white-space: nowrap; } .dark .dropdown a:hover,.dark .dropdown .ditem:hover,.dark .dropdown button:hover { background: #243036; color: #E8ECEE; } .dark .dropdown .ditem-danger { color: #FF6568; } .dark .dropdown .ditem-danger:hover { color: #FF6568; } .dark .dropdown .dd-head { padding: 6px 8px; font-size: 12px; color: #93999C; } .dark .dropdown .dsep { height: 1px; line-height: 0; font-size: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 4px -4px; overflow: hidden; } .dark .np { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 384px; max-width: calc(100vw - 32px); background: #151C1F; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.251); z-index: 50; overflow: hidden; text-align: left; font-size: 16px; line-height: 1.5; } .dark .np-head { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); overflow: hidden; } .dark .np-bell { margin-top: 4px; color: #6AA1BB; } .dark .np-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #E8ECEE; } .dark .np-badge { margin-top: 2px; height: 20px; line-height: 20px; min-width: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: #6AA1BB; color: #FCFCFC; font-size: 10px; font-weight: 500; text-align: center; white-space: nowrap; } .dark .np-allread { height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: #93999C; font-size: 12px; line-height: 24px; cursor: pointer; } .dark .np-allread:hover { background: #232A2E; color: #6AA1BB; } .dark .np-close { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #93999C; font-size: 0; line-height: 24px; text-align: center; cursor: pointer; } .dark .np-close:hover { background: #232A2E; } .dark .np-tablist { height: 36px; padding: 3px; border-radius: 12px; background: #232A2E; overflow: hidden; } .dark .np-tab { float: left; width: 50%; height: 29px; padding: 4px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #E8ECEE; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-align: center; cursor: pointer; } .dark .np-tab.on { background: #0D1215; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.102), 0 1px 2px -1px rgba(0,0,0,0.102); } .dark .np-empty-ic { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%; background: #232A2E; font-size: 0; line-height: 48px; text-align: center; } .dark .np-empty-t { font-size: 14px; line-height: 20px; color: #93999C; } .dark .np-gologin { display: inline-block; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: #6AA1BB; color: #FCFCFC; font-size: 14px; line-height: 32px; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.051); } .dark .np-item { display: block; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); background: transparent; color: #E8ECEE; text-align: left; cursor: pointer; } .dark .np-item:hover { background: rgba(35,42,46,0.6); } .dark .np-item.unread { background: rgba(106,161,187,0.03); } .dark .np-dot { display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: middle; border-radius: 50%; background: #6AA1BB; } .dark .np-txt { display: block; margin-top: 2px; max-height: 32px; overflow: hidden; font-size: 12px; line-height: 16px; color: #93999C; } .dark .np-time { float: left; font-size: 10px; line-height: 15px; color: #93999C; } .dark .np-act { float: right; font-size: 11px; line-height: 16.5px; color: #6AA1BB; opacity: 0; } .dark .np-foot { padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(35,42,46,0.3); font-size: 12px; line-height: 16px; } .dark .np-link { font-size: 12px; line-height: 16px; color: #93999C; text-decoration: none; } .dark .np-link:hover { color: #6AA1BB; } .dark .np-ico-system { background: #232A2E; color: #93999C; } .dark .np-ico-playlist { background: rgba(106,161,187,0.15); color: #6AA1BB; } .dark .np-ico-report { background: rgba(255,101,104,0.15); color: #FF6568; } .dark .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 288px; max-width: 80%; z-index: 101; background: #0D1215; border-right: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 32px rgba(0,0,0,0.2); } .dark .drawer .dw-head { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .drawer .dw-close { float: right; width: 36px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: #E8ECEE; font-size: 18px; line-height: 36px; text-align: center; } .dark .drawer .dw-close:hover { background: #232A2E; } .dark .drawer .dw-user { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(35,42,46,0.3); } .dark .drawer .dw-user .du-sub { font-size: 10px; color: #93999C; margin-top: 2px; } .dark .drawer .dw-group { padding: 4px 12px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #93999C; } .dark .drawer .dw-item { display: block; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: rgba(232,236,238,0.8); } .dark .drawer .dw-item:hover { background: #232A2E; color: #E8ECEE; } .dark .drawer .dw-item.active { background: rgba(106,161,187,0.1); color: #6AA1BB; font-weight: 500; } .dark .drawer .dw-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.1); } .dark .drawer .dw-logout { display: block; width: 100%; padding: 4px 0; border: 0; background: transparent; font-size: 12px; color: #93999C; text-align: center; } .dark .drawer .dw-logout:hover { color: #FF6568; } .dark .page-desc { color: #93999C; margin: -12px 0 24px; font-size: 13px; } .dark .card { background: #151C1F; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 20px; margin-bottom: 16px; } .dark .btn { display: inline-block; height: 34px; line-height: 34px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #151C1F; color: #E8ECEE; font-size: 13px; text-align: center; cursor: pointer; } .dark .btn:hover { border-color: #6AA1BB; color: #6AA1BB; } .dark .btn-primary { background: #6AA1BB; border-color: #6AA1BB; color: #fff; } .dark .btn-danger { background: #FF6568; border-color: #FF6568; color: #fff; } .dark .sec-head-l svg { display: block; width: 20px; height: 20px; color: #6AA1BB; } .dark .sec-head-sub { padding-left: 16px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .sec-head-more { float: right; font-size: 12px; line-height: 16px; color: #93999C; margin-top: 6px; } .dark .sec-head-more:hover { color: #6AA1BB; } .dark .carousel .cbtn { display: inline-block; height: 38px; line-height: 38px; padding: 0 20px; background: #fff; color: #E8ECEE; border-radius: 6px; font-size: 14px; } .dark .carousel .cbtn:hover { background: #f0f0f0; color: #E8ECEE; } .dark .song-row { background: #151C1F; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; overflow: hidden; } .dark .song-row .sartist { font-size: 12px; color: #93999C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .song-row .salbum { float: left; width: 300px; font-size: 12px; color: #93999C; margin-top: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .song-row .sdur { float: right; font-size: 12px; color: #93999C; margin-top: 14px; width: 40px; text-align: right; } .dark .song-row .sops a { display: inline-block; margin-left: 8px; color: #93999C; font-size: 14px; } .dark .song-row .sops a:hover { color: #6AA1BB; } .dark .song-row .sops a.on { color: #6AA1BB; } .dark .grid-item .gcover .gplay .pbtn { display: inline-block; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #6AA1BB; line-height: 46px; text-align: center; font-size: 18px; margin-top: 34%; } .dark .grid-item .gcover .gofficial { position: absolute; bottom: 8px; right: 8px; background: #6AA1BB; color: #fff; font-size: 10px; border-radius: 3px; padding: 1px 6px; } .dark .grid-item .gcover .gfav.on { display: block; background: #6AA1BB; } .dark .grid-item .gname:hover { color: #6AA1BB; } .dark .grid-item .gmeta { font-size: 12px; color: #93999C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .scroll-row .sarrow { position: absolute; top: 38%; margin-top: -18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,.1); color: #E8ECEE; font-size: 16px; z-index: 5; display: none; } .dark .rpt-bar { font-size: 0; line-height: 0; padding: 10px 16px 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.3); text-align: center; } .dark .rpt-bar-tip { position: relative; padding-left: 20px; color: #93999C; } .dark .rpt-bar-tip svg { position: absolute; left: 0; top: 1px; color: #6AA1BB; } .dark .rpt-bar-a { color: #93999C; text-decoration: underline; -ms-transition: color 150ms; transition: color 150ms; } .dark .rpt-bar-a:hover { color: #6AA1BB; } .dark .rpt-bar-sep { color: rgba(147,153,156,0.4); } .dark .hero-cta { display: inline-block; height: 36px; line-height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; color: #E8ECEE; font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .dark .hero-cta:hover { background: rgba(255,255,255,0.9); color: #E8ECEE; } .dark .song-card { display: table; width: 100%; padding: 12px; border-radius: 16px; background: #151C1F; cursor: pointer; } .dark .song-card-name:hover { color: #6AA1BB; } .dark .song-card-artist { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .song-card-dur { font-size: 12px; line-height: 16px; color: #93999C; font-variant-numeric: tabular-nums; } .dark .song-card-fav-btn { padding: 6px; border: 0; border-radius: 999px; background: transparent; color: #93999C; opacity: 0; transition: background-color 0.15s, color 0.15s; } .dark .song-card-fav-btn:hover { background: #232A2E; } .dark .is-fav { color: #6AA1BB; } .dark .srow-btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; background-color: #0D1215; color: #E8ECEE; opacity: 0; z-index: 20; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); -ms-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .dark .srow-btn:hover { -ms-transform: scale(1.1); transform: scale(1.1); background-color: #6AA1BB; border-color: #6AA1BB; color: #FCFCFC; } .dark .dsc-play48 svg { position: absolute; left: 15px; top: 14px; width: 20px; height: 20px; color: #6AA1BB; fill: currentColor; } .dark .dsc-play40 svg { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; color: #E8ECEE; fill: currentColor; } .dark .dsc-pl-name { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-pl-meta { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-alb-name { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-alb-artist { font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-art-name { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-art-cnt { display: table; margin-left: auto; margin-right: auto; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .dsc-art-reg { position: absolute; right: -4px; bottom: -4px; padding: 2px 6px; border-radius: 9999px; background-color: #0D1215; border: 1px solid rgba(255,255,255,.1); font-size: 9px; line-height: 13.5px; font-weight: 500; white-space: nowrap; } .dark .dsc-rank-body { padding: 12px; background-color: #151C1F; } .dark .dsc-rank-row { display: table; width: 100%; font-size: 12px; line-height: 16px; color: #E8ECEE; cursor: pointer; } .dark .dsc-rank-row:hover { color: #6AA1BB; } .dark .dsc-rank-no { width: 16px; text-align: center; font-weight: 700; color: #93999C; } .dark .dsc-n1 { color: #6AA1BB; } .dark .dsc-rank-sart > span { display: block; font-size: 10px; line-height: 13.3333px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .dsc-vip { position: relative; overflow: hidden; padding: 24px; border: 1px solid rgba(106,161,187,0.15); border-radius: 16px; background-image: linear-gradient(to right, rgba(106,161,187,0.1) 0px, rgba(106,161,187,0.05) 50%, rgba(0, 0, 0, 0) 100%); } .dark .dsc-vip-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .rk-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: #151C1F; } .dark .rk-body { background: #151C1F; padding: 12px; } .dark .rk-row:hover { background: rgba(35,42,46,0.6); } .dark .rk-no.n1 { color: #6AA1BB; } .dark .rk-no.n4 { color: #93999C; font-size: 14px; } .dark .rk-dur { float: right; margin-left: 12px; font-size: 12px; color: #93999C; line-height: 40px; } .dark .rk-smeta { font-size: 12px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .page-head .ph-ico { display: inline-block; vertical-align: middle; color: #6AA1BB; } .dark .page-head .ph-sub { display: inline-block; vertical-align: middle; font-size: 12px; color: #93999C; margin-left: 8px; } .dark .artist-item .acount { font-size: 11px; color: #93999C; } .dark .vip-strip .vdesc { font-size: 13px; color: #93999C; margin-top: 4px; } .dark .tbl { width: 100%; border-collapse: collapse; background: #151C1F; } .dark .tbl th { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); color: #93999C; font-weight: normal; font-size: 13px; } .dark .tbl td { padding: 12px 16px; border-bottom: 1px solid #232A2E; font-size: 13px; } .dark .form-input { width: 100%; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 0 12px; background: rgba(255,255,255,.045); } .dark .form-input:focus { border-color: #6AA1BB; } .dark .form-hint { font-size: 12px; color: #93999C; margin-top: 4px; } .dark .form-error { font-size: 12px; color: #FF6568; margin-top: 4px; display: none; } .dark .modal { position: fixed; left: 50%; top: 50%; z-index: 2600; background: #151C1F; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.25); width: 440px; margin-left: -220px; } .dark .modal .mhead { padding: 16px 20px; border-bottom: 1px solid #232A2E; font-size: 16px; font-weight: bold; } .dark .modal .mclose { float: right; color: #93999C; cursor: pointer; font-weight: normal; font-size: 16px; } .dark .pl-body { height: 80px; padding: 0 16px; background: rgba(13,18,21,0.95); border-top: 1px solid rgba(255,255,255,.1); } .dark .pl-error { height: 36px; line-height: 36px; padding: 0 16px; text-align: center; background: rgba(255,101,104,0.1); border-top: 1px solid rgba(255,101,104,0.3); color: #FF6568; } .dark .pl-ico { float: left; width: 48px; height: 48px; margin: 16px 16px 0 0; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(106,161,187,0.2) 0%, rgba(106,161,187,0.05) 100%); } .dark .pl-empty-txt .t2 { font-size: 12px; line-height: 16px; color: #93999C; } .dark .pl-random { position: relative; float: right; height: 32px; line-height: 32px; margin: 24px 0 0 16px; padding: 0 10px 0 32px; border: 0; border-radius: 10px; background: #6AA1BB; color: #FCFCFC; font-size: 14px; text-align: left; white-space: nowrap; } .dark .pl-fav { float: right; width: 28px; height: 28px; margin-top: 26px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #93999C; } .dark .pl-fav:hover { background: #232A2E; } .dark .pl-fav.on { color: #6AA1BB; } .dark .pl-name:hover { color: #6AA1BB; text-decoration: underline; } .dark .pl-badge.tier { background: rgba(106,161,187,0.15); color: #6AA1BB; } .dark .pl-subrow { height: 16px; line-height: 16px; font-size: 0; margin-top: 2px; color: #93999C; overflow: hidden; white-space: nowrap; } .dark .pl-eq span { display: inline-block; vertical-align: bottom; width: 2px; height: 100%; margin-left: 2px; background: #6AA1BB; } .dark .pl-btn { width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #E8ECEE; line-height: 0; } .dark .pl-btn:hover { background: #232A2E; } .dark .pl-btn.on { color: #6AA1BB; } .dark .pl-play-btn { width: 36px; height: 36px; padding: 10px; border-radius: 50%; background: #6AA1BB; color: #FCFCFC; box-shadow: 0 10px 15px -3px rgba(106,161,187,0.3); } .dark .pl-time { float: left; width: 40px; font-size: 11px; line-height: 16px; color: #93999C; text-align: right; } .dark .pl-track { position: absolute; left: 0; right: 0; top: 5px; height: 6px; border-radius: 3px; background: #232A2E; overflow: hidden; } .dark .pl-fill { display: block; height: 100%; width: 0; background: #6AA1BB; border-radius: 3px; } .dark .pl-thumb { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #0D1215; border: 1px solid #6AA1BB; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); -ms-transform: translateX(-50%); transform: translateX(-50%); } .dark .pl-thumb:hover { box-shadow: 0 0 0 4px rgba(106,161,187,0.5), 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); } .dark .pl-ctl { position: relative; width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #93999C; line-height: 0; } .dark .pl-ctl:hover { background: #232A2E; } .dark .pl-ctl.on { color: #6AA1BB; } .dark .pl-tier { height: 24px; line-height: 24px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: #93999C; font-size: 11px; font-weight: 500; } .dark .pl-tier:hover { background: #232A2E; } .dark .pl-div { display: inline-block; vertical-align: middle; width: 1px; height: 20px; margin: 0 4px 0 8px; background: rgba(255,255,255,.1); } .dark .pl-qcount { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #6AA1BB; color: #FCFCFC; font-size: 9px; font-weight: bold; text-align: center; } .dark .pl-menu { position: absolute; z-index: 50; margin-bottom: 4px; padding: 4px; border-spacing: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #151C1F; color: #E8ECEE; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.102), 0 2px 4px -2px rgba(0,0,0,0.102); text-align: left; } .dark .pl-menu .pmi { position: relative; display: block; padding: 6px 8px; border-radius: 8px; font-size: 14px; line-height: 20px; color: #E8ECEE; cursor: default; white-space: nowrap; } .dark .pl-menu .pmi:hover { background: #243036; } .dark .pl-menu .pmi-i { display: table-cell; vertical-align: middle; padding-right: 6px; color: #93999C; } .dark .pl-menu .pmi-r { position: absolute; top: 6px; right: 8px; font-size: 10px; line-height: 20px; color: #93999C; } .dark .pl-menu .pmi-sep { height: 1px; line-height: 0; font-size: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 4px -4px; overflow: hidden; } .dark .pl-menu .pmi-empty { margin: 0; padding: 6px 8px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .pl-menu .pmi-note { margin: 4px 0 0; padding: 6px 8px 4px; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; line-height: 16.25px; color: #93999C; } .dark .pl-menu .pmi-c { position: absolute; top: 12px; right: 8px; width: 8px; height: 8px; color: #6AA1BB; } .dark .qdrawer { position: fixed; right: 16px; bottom: 80px; z-index: 30; width: 320px; max-height: 50vh; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: #151C1F; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .dark .q-head { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(230,236,240,0.4); overflow: hidden; } .dark .q-close { float: right; border: 0; background: transparent; color: #93999C; font-size: 16px; line-height: 24px; } .dark .q-close:hover { color: #E8ECEE; } .dark .q-empty { padding: 24px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .q-item.on { background: rgba(106,161,187,0.08); } .dark .q-no { float: left; width: 24px; height: 16px; line-height: 16px; margin: 10px 8px 0 0; text-align: center; font-size: 0; color: #93999C; } .dark .q-item.on .q-name { color: #6AA1BB; } .dark .q-artist { font-size: 10px; line-height: 15px; color: #93999C; } .dark .q-eq span { display: inline-block; vertical-align: bottom; width: 2px; height: 100%; margin-left: 2px; background: #6AA1BB; } .dark .q-dur { float: right; height: 15px; line-height: 15px; margin: 10.5px 8px 0 0; font-size: 10px; color: #93999C; } .dark .q-del { float: right; height: 24px; line-height: 24px; margin: 6px 0 0 0; font-size: 16px; color: #93999C; opacity: 0; cursor: pointer; } .dark .lyr-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(13,18,21,0.98); } .dark .lyr-head { height: 68px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.1); } .dark .lyr-close:hover { background: #232A2E; } .dark .lyr-htitle svg { display: inline-block; vertical-align: middle; color: #6AA1BB; } .dark .lyr-disc { width: 288px; height: 288px; border: 8px solid #0D1215; border-radius: 50%; background-image: linear-gradient(to bottom right, rgba(232,236,238,0.1) 0%, rgba(232,236,238,0.05) 100%); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); font-size: 0; } .dark .lyr-hole { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(232,236,238,0.1); border-radius: 50%; background: #0D1215; } .dark .lyr-sub { margin: 0; font-size: 14px; line-height: 20px; color: #93999C; } .dark .lyr-badge { display: inline-block; vertical-align: top; padding: 2px 8px; border-radius: 4px; background: #232A2E; font-size: 12px; line-height: 16px; color: #93999C; } .dark .lyr-line { display: block; width: 100%; margin: 0 0 16px; padding: 4px 0; border: 0; background: transparent; font-family: inherit; font-size: 18px; line-height: 28px; color: rgba(147,153,156,0.6); text-align: center; cursor: pointer; transition: all 0.3s; -ms-transition: all 0.3s; } .dark .lyr-line:hover { color: rgba(232,236,238,0.8); } .dark .lyr-line.on { font-size: 24px; line-height: 32px; font-weight: 700; color: #6AA1BB; -ms-transform: scale(1.05); transform: scale(1.05); } .dark .lyr-empty { padding: 80px 0; margin-bottom: 16px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .lyr-empty svg { display: block; margin: 0 auto 12px; color: #93999C; opacity: 0.5; } .dark .lyr-fade-t { top: 0; background: linear-gradient(to bottom, #0D1215 0%, rgba(13,18,21,0) 100%); } .dark .lyr-fade-b { bottom: 0; background: linear-gradient(to top, #0D1215 0%, rgba(13,18,21,0) 100%); } .dark .lyr-time { display: inline-block; vertical-align: middle; width: 40px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .lyr-track { display: block; height: 6px; border-radius: 3px; background: #232A2E; overflow: hidden; } .dark .lyr-range { display: block; height: 100%; width: 0; background: #6AA1BB; } .dark .lyr-thumb { position: absolute; top: -5px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #0D1215; border: 1px solid #6AA1BB; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); -ms-transform: translateX(-50%); transform: translateX(-50%); } .dark .lyr-thumb:hover { box-shadow: 0 0 0 4px rgba(106,161,187,0.5), 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); } .dark .mdl-box { position: relative; display: inline-block; vertical-align: middle; width: 512px; padding: 24px; background: #0D1215; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; text-align: left; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .dark .mdl-title { font-size: 18px; line-height: 18px; font-weight: 600; color: #E8ECEE; } .dark .mdl-desc { margin-top: 8px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .mdl-btn { display: inline-block; vertical-align: middle; height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #0D1215; color: #E8ECEE; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 34px; text-align: center; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .mdl-btn:hover { background: #243036; color: #96C6DD; } .dark .mdl-btn-primary { border: 0; background: #6AA1BB; color: #FCFCFC; line-height: 36px; } .dark .mdl-btn-primary:hover { background: rgba(106,161,187,0.9); color: #FCFCFC; } .dark .vipm-desc { margin-top: 8px; font-size: 14px; line-height: 20px; color: #93999C; text-align: center; } .dark .vipm-seclabel { margin-bottom: 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .vipm-right em { display: block; margin-top: 2px; font-size: 10px; line-height: 12.5px; font-style: normal; font-weight: 400; color: #93999C; } .dark .vipm-plan { position: relative; display: block; width: 100%; padding: 16px; border: 2px solid rgba(255,255,255,.1); border-radius: 16px; background: #151C1F; text-align: left; cursor: pointer; } .dark .vipm-priceold { display: inline-block; vertical-align: baseline; margin-right: 4px; font-size: 12px; line-height: 16px; color: #93999C; text-decoration: line-through; white-space: nowrap; } .dark .vipm-period { display: inline-block; vertical-align: baseline; font-size: 12px; line-height: 16px; color: #93999C; white-space: nowrap; } .dark .vipm-feat span { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 16px; color: rgba(232,236,238,0.8); } .dark .vipm-agree { margin-bottom: 16px; font-size: 11px; line-height: 17.875px; color: #93999C; } .dark .vipm-agree a { margin: 0 4px; color: #6AA1BB; text-decoration: none; } .dark .vipm-note { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; text-align: center; } .dark .ym-title { font-size: 20px; line-height: 28px; font-weight: 600; color: #E8ECEE; text-align: center; } .dark .ym-sub { margin-top: 8px; font-size: 14px; line-height: 20px; color: #93999C; text-align: center; } .dark .ym-card { display: table-cell; width: 33.3333%; vertical-align: top; padding: 12px; border-radius: 12px; background: #232A2E; text-align: center; } .dark .ym-card b { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .ym-card em { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; font-style: normal; color: #93999C; } .dark .ym-notice p { margin-bottom: 10px; font-size: 12px; line-height: 19.5px; color: #93999C; } .dark .ym-notice li { font-size: 12px; line-height: 19.5px; color: #93999C; } .dark .ym-notice li b { font-weight: 500; color: #E8ECEE; } .dark .ym-manage { display: block; padding: 10px 12px; border: 1px solid rgba(0, 188, 125, 0.3); border-radius: 16px; background: rgba(0, 188, 125, 0.1); text-align: left; cursor: pointer; color: #E8ECEE; } .dark .ym-manage-t1 { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ym-manage-t2 { display: block; margin-top: 2px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .ym-label { display: block; height: 14px; margin-bottom: 8px; font-size: 14px; line-height: 14px; font-weight: 500; color: #E8ECEE; } .dark .ym-input { display: block; width: 100%; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.045); font-family: inherit; font-size: 14px; line-height: 34px; color: #E8ECEE; text-align: center; letter-spacing: 1.4px; } .dark .ym-input:focus { border-color: #6AA1BB; } .dark .ym-help { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .ym-bu { display: table-cell; width: 14px; vertical-align: middle; white-space: nowrap; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ym-trig select { position: relative; z-index: 1; display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 0 26px 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.045); font-family: inherit; font-size: 14px; color: #E8ECEE; cursor: pointer; } .dark .rp-preview { padding: 12px; border-radius: 12px; background: rgba(35,42,46,0.5); font-size: 12px; line-height: 16px; color: #93999C; white-space: pre-line; overflow: hidden; max-height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .dark .rp-label { display: block; font-size: 14px; line-height: 14px; font-weight: 500; color: #E8ECEE; } .dark .rp-label .rp-req { margin-left: 8px; color: #FF6568; } .dark .rp-select { position: relative; z-index: 1; display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 0 36px 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background-color: rgba(255,255,255,.045); font-family: inherit; font-size: 14px; color: #E8ECEE; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .rp-select.ph { color: #93999C; } .dark .rp-selarrow { position: absolute; z-index: 0; top: 10px; right: 13px; width: 16px; height: 16px; opacity: 0.5; color: #93999C; } .dark .rp-textarea { display: block; width: 100%; height: 60px; overflow: auto; padding: 8px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background-color: rgba(255,255,255,.045); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; resize: none; outline: none; } .dark .rp-select:focus,.dark .rp-textarea:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .rp-count { text-align: right; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .pay-order { padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: rgba(35,42,46,0.4); } .dark .pay-order-title { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .pay-order-kind { margin-top: 2px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .pay-cur { font-size: 12px; line-height: 16px; color: #93999C; } .dark .pay-num { font-size: 24px; line-height: 32px; font-weight: 700; color: #6AA1BB; } .dark .pay-method-hd { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .pay-opt { position: relative; display: table; width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid rgba(255,255,255,.1); border-radius: 12px; cursor: pointer; } .dark .pay-opt-on { border-color: #6AA1BB; background-color: rgba(106,161,187,0.05); } .dark .pay-dot { display: inline-block; position: relative; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background-color: #FFFFFF; vertical-align: middle; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .pay-radio:focus-visible + .pay-dot { box-shadow: 0 0 0 3px rgba(106,161,187,0.5); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .dark .pay-radio:focus + .pay-dot { box-shadow: 0 0 0 3px rgba(106,161,187,0.5); } } .dark .pay-radio:checked + .pay-dot:after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background-color: #6AA1BB; } .dark .pay-opt-name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .pay-opt-sub { display: block; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .pay-check { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .pay-go { display: block; width: 100%; height: 48px; padding: 0; border: 0; box-sizing: border-box; border-radius: 10px; background-color: #6AA1BB; color: #FCFCFC; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .pay-go:hover { background-color: rgba(106,161,187,0.9); } .dark .pay-alert { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: #FF6568; } .dark .pay-wait { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; text-align: center; } .dark .pay-secure { margin-top: 12px; text-align: center; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .cpl-lab { display: block; font-size: 14px; line-height: 14px; font-weight: 500; color: #E8ECEE; } .dark .cpl-lab i { font-style: normal; margin-left: 8px; color: #FF6568; } .dark .cpl-in { display: block; width: 100%; height: 36px; padding: 0 12px; font-family: inherit; font-size: 14px; line-height: 34px; color: #E8ECEE; background-color: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); outline: none; } .dark .cpl-in:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .cpl-ta { display: block; width: 100%; height: 64px; padding: 8px 12px; font-family: inherit; font-size: 14px; line-height: 21px; color: #E8ECEE; background-color: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); outline: none; } .dark .cpl-ta:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .cpl-cnt { font-size: 11px; line-height: 16.5px; color: #93999C; text-align: right; } .dark .cpl-swbtn.on { -ms-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #E8ECEE; } .dark .ui-btn-primary { background-color: #6AA1BB; color: #FCFCFC; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-btn-primary:hover { background-color: rgba(106,161,187,0.9); color: #FCFCFC; } .dark .ui-btn-outline { border: 1px solid rgba(255,255,255,.1); line-height: 18px; background-color: #0D1215; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-btn-outline:hover { background-color: #243036; color: #96C6DD; } .dark .ui-btn-secondary { background-color: #232A2E; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-btn-secondary:hover { background-color: rgba(35,42,46,0.8); color: #E8ECEE; } .dark .ui-btn-danger { background-color: #FF6568; color: #FFFFFF; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-btn-danger:hover { background-color: rgba(255,101,104,0.9); color: #FFFFFF; } .dark .ui-btn-ghost { background-color: transparent; color: #E8ECEE; } .dark .ui-btn-ghost:hover { background-color: #243036; color: #96C6DD; } .dark .ui-card,.dark .ui-card-3,.dark .ui-card-4,.dark .ui-card-8 { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; } .dark .ui-empty-ico { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 9999px; background-color: rgb(35,42,46); } .dark .ui-empty-ico svg { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; color: #93999C; } .dark .ui-empty-t { display: table; margin: 0 auto 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ui-empty-p { display: table; margin: 0 auto 16px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ui-nf-p { margin-bottom: 12px; font-size: 16px; line-height: 24px; color: #93999C; } .dark .ui-nf-t { font-size: 14px; line-height: 20px; color: #93999C; } .dark .ui-sec { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; overflow: hidden; } .dark .ui-sec-hd { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(35,42,46,0.3); } .dark .ui-sec-hd h2 { font-size: 14px; line-height: 20px; font-weight: bold; color: #E8ECEE; } .dark .ui-sec-hd p { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ui-row-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ui-row-d { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ui-row-p { font-size: 14px; line-height: 20px; color: #93999C; } .dark .ui-vol-btn button { display: block; width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 9999px; background-color: transparent; color: #93999C; cursor: pointer; outline: none; } .dark .ui-vol-btn button:hover { background-color: #232A2E; } .dark .ui-vol-val { display: table-cell; vertical-align: middle; width: 32px; text-align: right; font-size: 12px; line-height: 16px; color: #93999C; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .dark .ui-slider-tr { position: absolute; left: 0; right: 0; top: 5px; height: 6px; border-radius: 9999px; background-color: #232A2E; overflow: hidden; } .dark .ui-slider-rg { position: absolute; left: 0; top: 0; height: 6px; background-color: #6AA1BB; } .dark .ui-slider-th { position: absolute; top: 0; width: 16px; height: 16px; border: 1px solid #6AA1BB; border-radius: 9999px; background-color: #0D1215; -ms-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .dark .ui-sep { height: 1px; font-size: 0; line-height: 0; background-color: rgba(255,255,255,.1); overflow: hidden; } .dark .ui-label { display: block; font-size: 14px; line-height: 14px; font-weight: 500; color: #E8ECEE; } .dark .ui-input { display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 4px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background-color: rgba(255,255,255,.045); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; outline: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-input:-ms-input-placeholder { color: #93999C; } .dark .ui-input::-ms-input-placeholder { color: #93999C; } .dark .ui-input::placeholder { color: #93999C; } .dark .ui-textarea { display: block; width: 100%; min-height: 64px; box-sizing: border-box; padding: 8px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background-color: rgba(255,255,255,.045); font-family: inherit; font-size: 14px; line-height: 20px; color: #E8ECEE; outline: none; resize: vertical; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } @media (max-width: 767px) { .dark .ui-input,.dark .ui-textarea { font-size: 16px; line-height: 24px; background-color:rgba(255,255,255,.045); } } .dark .ui-sel { position: relative; z-index: 1; display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 0 36px 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background-color: transparent; font-family: inherit; font-size: 14px; color: #E8ECEE; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .ui-selarrow { position: absolute; z-index: 0; top: 10px; right: 13px; width: 16px; height: 16px; opacity: 0.5; color: #93999C; } .dark .ui-choice { display: inline-block; vertical-align: middle; padding: 6px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background-color: transparent; background-image: none; font-family: inherit; font-size: 12px; line-height: 16px; font-weight: normal; color: #93999C; text-align: center; text-decoration: none; cursor: pointer; outline: none; white-space: nowrap; -ms-transition: color 0.15s, border-color 0.15s, background-color 0.15s, box-shadow 0.15s; transition: color 0.15s, border-color 0.15s, background-color 0.15s, box-shadow 0.15s; } .dark .ui-choice:hover { color: #E8ECEE; border-color: rgba(232,236,238,0.3); } .dark .ui-choice-on { border-color: #6AA1BB; background-color: rgba(106,161,187,0.1); color: #6AA1BB; font-weight: 500; } .dark .ui-choice-on:hover { color: #6AA1BB; border-color: #6AA1BB; } .dark .ui-switch { position: relative; display: inline-block; vertical-align: baseline; width: 32px; height: 18.4px; border: 1px solid transparent; border-radius: 9999px; background-color: rgba(255,255,255,.1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: pointer; outline: none; -ms-transition: background-color 0.15s; transition: background-color 0.15s; } .dark .ui-switch-on { background-color: #6AA1BB; } .dark .ui-switch-th { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 9999px; background-color: #0D1215; -ms-transition: left 0.15s; transition: left 0.15s; } .dark .ui-badge { display: inline-block; vertical-align: middle; padding: 2px 8px; border: 1px solid transparent; border-radius: 10px; background-color: #6AA1BB; color: #FCFCFC; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } .dark .ui-badge-outline { background-color: transparent; border-color: rgba(255,255,255,.1); color: #E8ECEE; } .dark .ui-lbl-ic { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .ui-title-bk a,.dark .ui-title-bk button { display: block; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 9999px; background-color: transparent; color: #93999C; cursor: pointer; outline: none; text-align: center; font-family: inherit; -ms-transition: background-color 0.15s; transition: background-color 0.15s; } .dark .ui-title-bk a:hover,.dark .ui-title-bk button:hover { background-color: #232A2E; } .dark .ui-title-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .ui-title-tx p { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .ui-back { display: block; padding: 0; border: 0; background-color: transparent; color: #93999C; cursor: pointer; outline: none; font-family: inherit; font-size: 14px; line-height: 20px; } .dark .ui-back:hover { color: #E8ECEE; } .dark .ui-head-ico { display: table-cell; width: 56px; height: 56px; vertical-align: middle; border-radius: 16px; background-color: rgba(106,161,187,0.1); text-align: center; } .dark .ui-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #6AA1BB; } .dark .ui-head-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .ui-head-tx p { margin-top: 2px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .ui-gr-l { display: table-cell; vertical-align: middle; width: 48px; min-width: 48px; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; } .dark .ui-swatch-on,.dark .ui-swatch-on:hover { opacity: 1; -ms-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 0 0 2px #151C1F, 0 0 0 4px rgba(232,236,238,0.4); } .dark .ui-hint { font-size: 11px; line-height: 1.5; color: #93999C; } .dark .ui-row-n { font-size: 16px; line-height: 24px; color: #E8ECEE; } .dark .ui-nums-over { color: #FF6568; font-weight: 500; } .dark .ui-face-review { box-shadow: 0 0 0 2px #151C1F, 0 0 0 4px rgba(251, 191, 36, 0.7); } .dark .ui-pe-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 9999px; background-color: #6AA1BB; box-shadow: 0 0 0 2px #151C1F; } .dark .alb-head-ico { display: table-cell; width: 56px; height: 56px; vertical-align: middle; border-radius: 16px; background-color: rgba(106,161,187,0.1); text-align: center; } .dark .alb-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #6AA1BB; } .dark .alb-head-txt h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; } .dark .alb-head-txt p { margin-top: 2px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .alb-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background-color: #151C1F; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dark .alb-card:hover { -ms-transform: translateY(-4px); transform: translateY(-4px); box-shadow: 0 8px 24px -6px rgba(106,161,187,0.15); } .dark .alb-price { position: absolute; top: 10px; right: 8px; padding: 2px 8px; border: 1px solid transparent; border-radius: 10px; background-color: rgba(106,161,187,0.9); color: #FCFCFC; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } .dark .alb-name { font-size: 14px; line-height: 20px; font-weight: 700; color: #E8ECEE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .alb-artist { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .alb-count { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .alb-buy { display: block; width: 100%; height: 32px; line-height: 32px; margin-top: 12px; padding: 0 10px; border: 0; border-radius: 10px; background-color: #6AA1BB; color: #FCFCFC; font-family: inherit; font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .alb-buy:hover { background-color: rgba(106,161,187,0.9); } .dark .card-hover:hover { -ms-transform: translateY(-4px); transform: translateY(-4px); box-shadow: 0 8px 24px -6px rgba(106,161,187,0.15); } .dark .pl-head-ico svg { display: block; width: 24px; height: 24px; color: #6AA1BB; } .dark .pl-head h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #E8ECEE; white-space: nowrap; } .dark .pl-head-cnt { padding-left: 8px; font-size: 12px; line-height: 16px; color: #93999C; white-space: nowrap; } .dark .pl-pill { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 400; background-color: #232A2E; color: #93999C; text-decoration: none; -ms-transition: background-color 150ms, color 150ms; transition: background-color 150ms, color 150ms; } .dark .pl-pill:hover { background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .pl-pill.on { background-color: #6AA1BB; color: #FCFCFC; } .dark .pl-sortlink { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; line-height: 16px; font-weight: 400; color: #93999C; text-decoration: none; } .dark .pl-sortlink.on { color: #6AA1BB; font-weight: 500; } .dark .pl-sortsep { display: inline-block; margin: 0 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .plc-playbtn svg { position: absolute; left: 15px; top: 14px; width: 20px; height: 20px; color: #6AA1BB; fill: currentColor; } .dark .plc-fav.is-fav { background-color: #6AA1BB; color: #FFFFFF; opacity: 1; } .dark .plc-off { position: absolute; right: 8px; bottom: 8px; height: 19px; line-height: 19px; padding: 0 6px; border-radius: 4px; background-color: rgba(106,161,187,0.9); color: #FCFCFC; font-size: 10px; font-weight: 700; white-space: nowrap; } .dark .plc-name { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .plc-meta { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .empty-box { border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; padding: 80px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .mypl-hl-ico svg { display: block; width: 20px; height: 20px; color: #6AA1BB; } .dark .mypl-hl h3 { padding-left: 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: #E8ECEE; white-space: nowrap; } .dark .mypl-hl-cnt { padding-left: 16px; font-size: 12px; line-height: 16px; color: #93999C; white-space: nowrap; } .dark .pl-newbtn { position: relative; display: inline-block; height: 36px; line-height: 34px; padding: 0 16px 0 40px; border: 1px solid #6AA1BB; border-radius: 10px; background-color: #6AA1BB; color: #FCFCFC; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .pl-login { border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; padding: 40px 0; text-align: center; } .dark .pl-login-ico { position: relative; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%; background-color: #232A2E; } .dark .pl-login-ico svg { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; color: #93999C; } .dark .pl-login p { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: #93999C; } .dark .mypl-row:hover { background-color: rgba(35,42,46,0.6); } .dark .mypl-name { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .mypl-meta { margin-top: 2px; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .mypl-btn { display: inline-block; height: 32px; line-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background-color: #151C1F; color: #E8ECEE; font-size: 14px; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .mypl-btn:hover { background-color: #232A2E; } .dark .mypl-btn-del { position: relative; height: 32px; line-height: 30px; padding: 0 12px 0 34px; border: 1px solid #FF6568; border-radius: 10px; background-color: #FF6568; color: #FFFFFF; font-size: 14px; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sr-back { display: table; position: relative; padding-left: 20px; font-size: 14px; line-height: 20px; color: #93999C; text-decoration: none; } .dark .sr-back:hover { color: #E8ECEE; } .dark .sr-big-w svg { position: absolute; left: 16px; top: 14px; width: 20px; height: 20px; color: #93999C; } .dark .sr-big-in { display: block; width: 100%; height: 48px; padding: 4px 16px 4px 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; background-color: transparent; font-size: 14px; line-height: 20px; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sr-big-in:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sr-big-in:-ms-input-placeholder { color: #93999C; } .dark .sr-big-in::-ms-input-placeholder { color: #93999C; } .dark .sr-big-in::placeholder { color: #93999C; } .dark .sr-reco-h { position: relative; padding-left: 22px; font-size: 14px; font-weight: 600; line-height: 20px; margin-bottom: 12px; color: #E8ECEE; } .dark .sr-reco-h svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; color: #6AA1BB; } .dark .sr-reco-row:hover { background-color: rgba(35,42,46,0.6); } .dark .sr-reco-rk { float: left; width: 24px; text-align: center; font-size: 16px; font-weight: 700; line-height: 24px; color: #93999C; } .dark .sr-reco-rk.n1 { color: #6AA1BB; } .dark .sr-reco-wd { display: block; margin-left: 36px; margin-top: 2px; font-size: 14px; line-height: 20px; color: #E8ECEE; } .dark .sr-reco-row:hover .sr-reco-wd { color: #6AA1BB; } .dark .sr-hist-h { display: table; position: relative; padding-left: 22px; font-size: 14px; font-weight: 600; line-height: 20px; color: #E8ECEE; } .dark .sr-hist-h svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; color: #93999C; } .dark .sr-hist-clr { position: absolute; right: 0; top: 2px; border: 0; background: none; padding: 0; font-size: 12px; line-height: 16px; color: #93999C; cursor: pointer; } .dark .sr-hist-clr:hover { color: #E8ECEE; } .dark .sr-hist-chip { float: left; margin-right: 8px; margin-bottom: 8px; padding: 4px 12px; border: 0; border-radius: 9999px; background-color: #232A2E; font-size: 12px; line-height: 16px; color: #E8ECEE; cursor: pointer; } .dark .sr-hist-chip:hover { background-color: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .sr-res-back:hover { background-color: #232A2E; } .dark .sr-res-back svg { display: block; width: 20px; height: 20px; color: #E8ECEE; } .dark .sr-res-box > svg { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: #93999C; } .dark .sr-res-in { display: block; width: 100%; height: 40px; padding: 0 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; background-color: transparent; font-size: 14px; line-height: 20px; color: #E8ECEE; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sr-res-in:focus { border-color: #6AA1BB; box-shadow: 0 0 0 3px rgba(106,161,187,0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .sr-res-clr { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; color: #93999C; } .dark .sr-res-clr:hover { color: #E8ECEE; } .dark .sr-res-st { font-size: 14px; line-height: 20px; color: #93999C; } .dark .sr-res-st-q { color: #6AA1BB; font-weight: 500; } .dark .sr-res-st-n { color: #E8ECEE; font-weight: 700; } .dark .sr-tabs { border-bottom: 1px solid rgba(255,255,255,.1); font-size: 0; line-height: 0; } .dark .sr-tab { display: inline-block; vertical-align: top; margin-right: 4px; margin-bottom: -1px; padding: 8px 16px; border-bottom: 2px solid transparent; font-size: 14px; line-height: 20px; font-weight: 500; color: #93999C; text-decoration: none; } .dark .sr-tab:hover { color: #E8ECEE; } .dark .sr-tab.on { border-bottom-color: #6AA1BB; color: #6AA1BB; } .dark .sr-sec-h3 { float: left; display: table; font-size: 16px; line-height: 24px; font-weight: 700; color: #E8ECEE; } .dark .sr-sec-h3 svg { display: block; width: 16px; height: 16px; color: #6AA1BB; } .dark .sr-sec-more { float: right; margin-top: 4px; font-size: 12px; line-height: 16px; color: #93999C; text-decoration: none; } .dark .sr-sec-more:hover { color: #6AA1BB; } .dark .sr-srow:hover { background: rgba(35,42,46,0.6); } .dark .sr-srow-ix-n { font-size: 12px; line-height: 16px; color: #93999C; } .dark .sr-srow-ix-p { display: none; width: 14px; height: 14px; margin: 0 auto; color: #6AA1BB; fill: currentColor; } .dark .sr-srow:hover .sr-srow-nm { color: #6AA1BB; } .dark .sr-srow-meta { font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-srow-durs { display: block; font-size: 12px; line-height: 16px; color: #93999C; font-variant-numeric: tabular-nums; } .dark .sr-srow-fav-btn { display: block; width: 100%; min-width: 60px; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #93999C; opacity: 0; transition: background-color 0.15s, color 0.15s; } .dark .sr-srow-fav-btn:hover { background: #232A2E; } .dark .sr-artcard-nm { margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-artcard-cnt { font-size: 10px; line-height: 15px; color: #93999C; } .dark .sr-mcard-nm { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E8ECEE; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-mcard-sub { font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-empty-ico { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 9999px; background-color: rgb(35,42,46); } .dark .sr-empty-ico svg { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; color: #93999C; } .dark .sr-empty-t { display: table; margin: 0 auto 4px; font-size: 16px; line-height: 24px; font-weight: 500; color: #E8ECEE; } .dark .sr-empty-p { display: table; margin: 0 auto; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sr-tlist { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .sr-trow { display: table; width: 100%; padding: 8px; border-spacing: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; } .dark .sr-trow:hover { background: rgba(35,42,46,0.4); } .dark .sr-trow-ix-n { font-size: 12px; line-height: 16px; color: #93999C; } .dark .sr-trow-ix-p { display: none; width: 14px; height: 14px; margin: 0 auto; color: #6AA1BB; fill: currentColor; } .dark .sr-trow:hover .sr-trow-nm { color: #6AA1BB; } .dark .sr-trow-meta { font-size: 11px; line-height: 16.5px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-trow-albb,.dark .sr-trow-pcb,.dark .sr-trow-durb { display: block; font-size: 12px; line-height: 16px; color: #93999C; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dark .sr-trow-fav-btn { display: block; width: 100%; min-width: 32px; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #93999C; opacity: 0; cursor: pointer; } .dark .sr-trow-fav-btn:hover { background: rgb(35,42,46); } .dark .sr-trow-fav-btn.is-fav { color: #6AA1BB; opacity: 1; } .dark .support-fab { position: fixed; left: 16px; bottom: 96px; z-index: 30; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: #6AA1BB; color: #FCFCFC; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .dark .sp-title-ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: top; color: #6AA1BB; } .dark .sp-note { padding: 12px; border-radius: 12px; background-color: rgba(35,42,46,0.5); font-size: 12px; line-height: 19.5px; color: #93999C; } .dark .sp-note-a { margin: 0 4px; color: #6AA1BB; text-decoration: none; } .dark .sp-ast { margin-left: 4px; color: #FF6568; } .dark .sp-hint { font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .sp-count { text-align: right; font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .sp-histcount { float: left; padding-top: 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .sp-empty { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sp-loading { padding: 24px 0; text-align: center; font-size: 14px; line-height: 20px; color: #93999C; } .dark .sp-error { padding: 12px; border-radius: 12px; background-color: rgba(255,101,104,0.10); font-size: 14px; line-height: 20px; color: #FF6568; } .dark .sp-foot { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; } .dark .sp-footlabel { display: block; font-size: 12px; line-height: 16px; color: #93999C; } .dark .sp-linkic { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: top; position: relative; top: 1px; color: #6AA1BB; } .dark .mr-list { font-size: 14px; line-height: 20px; color: #93999C; } .dark .mr-item { padding: 12px; border-radius: 12px; background-color: rgba(35,42,46,0.5); } .dark .mr-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .mr-tone-off { background-color: #232A2E; color: #93999C; } .dark .mr-reply { padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background-color: #0D1215; font-size: 14px; line-height: 22.75px; } .dark .mr-time { font-size: 11px; line-height: 16.5px; color: #93999C; } .dark .comment-item { padding: 14px 0; border-bottom: 1px solid #232A2E; } .dark .comment-item .cops { margin-top: 6px; font-size: 12px; color: #93999C; } .dark .comment-item .cops span:hover { color: #6AA1BB; } .dark .site-footer { margin-top: auto; background: rgba(7,12,15,0.6); border-top: 1px solid rgba(255,255,255,.1); } .dark .site-footer .f-links a { display: inline-block; vertical-align: top; margin: 0 10px 8px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .site-footer .f-links a:hover { color: #6AA1BB; } .dark .site-footer .f-meta span,.dark .site-footer .f-meta a { display: inline-block; vertical-align: top; margin: 0 8px 4px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .site-footer .f-meta a:hover { color: #6AA1BB; } .dark .site-footer .f-tip { margin: 16px auto 0; max-width: 672px; padding: 0 8px; font-size: 11px; line-height: 1.625; color: rgba(147,153,156,0.7); } .dark .auth-tabs .atab { float: left; width: 50%; text-align: center; height: 40px; line-height: 40px; cursor: pointer; border-bottom: 2px solid rgba(255,255,255,.1); color: #93999C; font-size: 15px; } .dark .auth-tabs .atab.active { border-bottom-color: #6AA1BB; color: #E8ECEE; font-weight: bold; } .dark .status-rejected { background: #FBEAEA; color: #FF6568; } .dark .status-closed { background: #232A2E; color: #93999C; } .dark .doc-hd-ico { position: relative; float: left; width: 56px; height: 56px; border-radius: 16px; background: rgba(106,161,187,0.1); color: #6AA1BB; } .dark .doc-hd-t { font-size: 24px; line-height: 32px; font-weight: bold; color: #E8ECEE; } .dark .doc-hd-d { font-size: 14px; line-height: 20px; color: #93999C; margin-top: 4px; } .dark .doc-sec { background: #151C1F; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; } .dark .doc-sec-n { display: block; border-radius: 10px; padding: 2px 8px; background: rgba(106,161,187,0.1); color: #6AA1BB; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } .dark .doc-sec-t { display: table-cell; vertical-align: middle; font-size: 18px; line-height: 28px; font-weight: 600; color: #E8ECEE; } .dark .doc-li-ic { float: left; width: 16px; height: 16px; margin-top: 2px; color: rgba(106,161,187,0.6); } .dark .doc-li-t { float: left; margin-left: 8px; font-size: 14px; line-height: 1.625; color: #93999C; } .dark .doc-row-ic { float: left; width: 16px; height: 16px; margin-top: 3.375px; color: #6AA1BB; } .dark .doc-row-txt { float: left; margin-left: 8px; font-size: 14px; line-height: 1.625; color: #93999C; } .dark .doc-row-txt a { color: #6AA1BB; text-decoration: none; } .dark .rn-p { font-size: 12px; line-height: 1.625; color: #93999C; } .dark .rn-p11 { font-size: 11px; line-height: 1.625; color: #93999C; } .dark .rn-pick-n { display: table-cell; vertical-align: middle; font-size: 14px; line-height: 20px; font-weight: 500; color: #E8ECEE; } .dark .rn-drop { display: block; position: relative; width: 100%; padding: 0 0 calc(62.5% - 4px) 0; border: 2px dashed rgba(255,255,255,.1); border-radius: 16px; background-color: transparent; cursor: pointer; overflow: hidden; } .dark .rn-drop-ico { display: block; width: 20px; height: 20px; margin: 0 auto; color: #93999C; } .dark .rn-drop-t { display: table; margin: 6px auto 0; border-spacing: 0; font-size: 12px; line-height: 16px; color: #93999C; } .dark .rn-drop-on { border-color: #6AA1BB; background-color: rgba(106,161,187,0.05); } .dark .rn-photo { position: relative; display: block; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; } .dark .rn-badge-no { background-color: rgba(255,101,104,0.15); color: #FF6568; } .dark .rn-status .rn-sub { font-size: 12px; line-height: 16px; color: #93999C; } .dark .rn-note { padding: 12px; border-radius: 12px; font-size: 14px; line-height: 1.625; color: #E8ECEE; background-color: rgba(35,42,46,0.5); } .dark .rn-note-bad { background-color: rgba(255,101,104,0.1); color: #FF6568; } .dark .rn-dl-t { margin-bottom: 2px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .rn-thumb { display: inline-block; vertical-align: top; width: 128px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; } .dark .rn-thumbs-t { margin-bottom: 6px; font-size: 12px; line-height: 16px; color: #93999C; } .dark .rn-link { color: #6AA1BB; text-decoration: none; margin: 0 4px; } .dark .rn-strong { font-weight: 500; color: #E8ECEE; } .dark .rn-none { font-size: 12px; line-height: 16px; color: #93999C; } /* ── 手写补丁（机械替换覆盖不到的） ───────────────────────────── */ /* Select 的暗色 hover：原版 SelectTrigger 上是 dark:hover:bg-input/50， .15 × .5 = .075。亮色那张表里没有 hover 背景（原版亮色就是没有）， 所以这条不是「换值」而是「暗色独有」，生成器替换不到。 */ .dark .rp-select:hover { background-color: rgba(255, 255, 255, .075); }