CubeLV // 立即決定主題並設置 favicon(必須在最前面執行) (function() { var saved = localStorage.getItem('themeMode'); var theme; if (saved && saved !== 'system') { theme = saved; } else { theme = 'light'; } document.documentElement.classList.add('theme-' + theme); })(); /* 在字體載入前隱藏 Material Symbols,避免顯示文字 */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; visibility: hidden; } .g-icon { font-family: 'Material Symbols Outlined'; visibility: hidden !important; } /* 字體載入前讓 ligature 文字不佔空間,避免爆版 */ html:not(.fonts-loaded) .g-icon { font-size: 0 !important; } /* 預設背景(防止黑屏閃爍) */ html, body { margin: 0; padding: 0; } /* 淺色模式背景 */ html.theme-light, html.theme-light body { background-color: #f6f6f6; } /* 深色模式背景 */ html.theme-dark, html.theme-dark body { background-color: #222222; } /* 淺色模式載入畫面(預設) */ .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-color: #f6f6f6; background-image: url('/app/assets/login-bg-2bff5a9d.svg'); background-size: cover; background-position: center; position: relative; overflow: hidden; } .login-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, #ffffff 0%, transparent 100%); opacity: 0.7; z-index: 0; } .login-card { width: 400px; background-color: transparent; padding: 40px; position: relative; z-index: 1; text-align: center; } .loading-spinner { width: 48px; height: 48px; border: 3px solid rgba(0,0,0,0.1); border-top-color: #6366f1; border-radius: 50%; animation: index-html-loading-spinner-spin 1s linear infinite; margin: 0 auto 20px; } @keyframes index-html-loading-spinner-spin { to { transform: rotate(360deg); } } .loading-text { font-size: 16px; color: rgba(0,0,0,0.6); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; } /* 深色模式載入畫面 */ html.theme-dark .login-container { background-color: #222222; } html.theme-dark .login-container::before { background: linear-gradient(45deg, #1e1e2e 0%, transparent 100%); } html.theme-dark .login-card { background-color: transparent; } html.theme-dark .loading-spinner { border: 3px solid rgba(255,255,255,0.1); border-top-color: #6366f1; } html.theme-dark .loading-text { color: rgba(255,255,255,0.7); } Loading... if (typeof VConsole !== 'undefined') { new VConsole(); var style = document.createElement('style'); style.textContent = '#__vconsole .vc-switch { bottom: 80px !important; }'; document.head.appendChild(style); } // 字體載入完成後顯示 Material Symbols 圖標 const _showMaterialIcons = () => { if (document.documentElement.classList.contains('fonts-loaded')) return; document.documentElement.classList.add('fonts-loaded'); const style = document.createElement('style'); style.textContent = '.material-symbols-outlined, .g-icon { visibility: visible !important; }'; document.head.appendChild(style); }; // 若字體已在快取中,立即顯示;否則只等待此字體載入 if (document.fonts.check('1em "Material Symbols Outlined"')) { _showMaterialIcons(); } else { document.fonts.load('1em "Material Symbols Outlined"') .then(_showMaterialIcons) .catch(_showMaterialIcons); }
FACT BOX ・ 要点整理
- 出典:PR Times
- 分類:ニュース