feat(user): 迁移为 StarIDC 新拟态 2.0 UI 主题
4 个文件变更
+865
-205
3933415854@qq.com
| •templates/default/user/assets/user-neomorphism.css | +649 -0 |
| •templates/default/user/head.php | +14 -3 |
| •templates/default/user/index.php | +119 -113 |
| •templates/default/user/login.php | +83 -89 |
变更内容
diff --git a/templates/default/user/assets/user-neomorphism.css b/templates/default/user/assets/user-neomorphism.css
new file mode 100644
index 0000000..d31e0e6
--- /dev/null
+++ b/templates/default/user/assets/user-neomorphism.css
@@ -0,0 +1,649 @@
+/* ============================================================
+ MNBT 用户端 — StarIDC 新拟态 2.0 主题
+ 基于 StarIDC theme/新拟态2.0/style.css 迁移
+ ============================================================ */
+
+/* ---------- 1. 设计变量（来自 StarIDC 新拟态2.0） ---------- */
+:root {
+ --n-bg: #e9eef2;
+ --n-bg-alt: #e3e8ec;
+ --n-fg: #2c3e50;
+ --n-muted: #607d8b;
+ --n-accent: #5c6bc0;
+ --n-accent-light: #7986cb;
+ --n-accent-dark: #3f51b5;
+ --n-shadow-light: #ffffff;
+ --n-shadow-dark: #cbd6e2;
+ --n-radius: 16px;
+ --n-radius-sm: 12px;
+ --n-radius-lg: 24px;
+ --n-radius-xl: 32px;
+ --n-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+ --n-gradient-accent: linear-gradient(135deg, #5c6bc0 0%, #7e57c2 100%);
+
+ /* Bootstrap 兼容色映射 */
+ --primary: #5c6bc0;
+ --secondary: #607d8b;
+ --success: #2e7d32;
+ --info: #1565c0;
+ --warning: #e65100;
+ --danger: #c62828;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --n-bg: #2c303a;
+ --n-bg-alt: #262a33;
+ --n-fg: #eceff4;
+ --n-muted: #929bac;
+ --n-accent: #a78bfa;
+ --n-accent-light: #c4b5fd;
+ --n-accent-dark: #8b5cf6;
+ --n-shadow-light: #3d4353;
+ --n-shadow-dark: #1e2129;
+ --n-gradient-accent: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
+ }
+}
+
+/* ---------- 2. 全局重置 ---------- */
+* { box-sizing: border-box; }
+html, body {
+ background: var(--n-bg) !important;
+ color: var(--n-fg) !important;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
+ line-height: 1.6 !important;
+ -webkit-font-smoothing: antialiased;
+ scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--n-bg); }
+::-webkit-scrollbar-thumb { background: var(--n-shadow-dark); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--n-muted); }
+
+/* ---------- 3. Lyear 布局框架覆盖 ---------- */
+body.lyear-layout-body { background: var(--n-bg) !important; }
+.lyear-layout-web { background: var(--n-bg) !important; }
+.lyear-layout-container { background: var(--n-bg) !important; }
+
+/* --- 侧边栏（新拟态凹陷风格） --- */
+.lyear-layout-sidebar {
+ background: var(--n-bg) !important;
+ box-shadow: inset 4px 4px 10px var(--n-shadow-dark), inset -4px -4px 10px var(--n-shadow-light) !important;
+ border-right: none !important;
+}
+.sidebar-header {
+ background: var(--n-bg) !important;
+ border-bottom: none !important;
+ box-shadow: none !important;
+ padding: 20px 24px !important;
+}
+.sidebar-header a { display: flex; align-items: center; justify-content: center; }
+.sidebar-header img { max-height: 40px; filter: drop-shadow(2px 2px 4px var(--n-shadow-dark)); }
+
+.sidebar-main .nav-drawer { padding: 16px 12px !important; }
+.sidebar-main .nav-item { margin-bottom: 4px; }
+.sidebar-main .nav-item > a {
+ display: flex !important;
+ align-items: center !important;
+ padding: 12px 18px !important;
+ margin: 4px 0 !important;
+ border-radius: var(--n-radius-sm) !important;
+ background: var(--n-bg) !important;
+ color: var(--n-muted) !important;
+ font-weight: 600 !important;
+ font-size: 0.92rem !important;
+ box-shadow: 5px 5px 10px var(--n-shadow-dark), -5px -5px 10px var(--n-shadow-light) !important;
+ border: none !important;
+ transition: all var(--n-transition) !important;
+}
+.sidebar-main .nav-item > a:hover,
+.sidebar-main .nav-item.active > a {
+ color: var(--n-accent) !important;
+ box-shadow: inset 4px 4px 8px var(--n-shadow-dark), inset -4px -4px 8px var(--n-shadow-light) !important;
+ background: var(--n-bg) !important;
+}
+.sidebar-main .nav-item.nav-item-has-subnav > a {
+ box-shadow: 5px 5px 10px var(--n-shadow-dark), -5px -5px 10px var(--n-shadow-light) !important;
+}
+.sidebar-main .nav-subnav {
+ background: transparent !important;
+ box-shadow: none !important;
+ padding: 6px 0 6px 14px !important;
+ margin: 0 !important;
+ border-left: none !important;
+}
+.sidebar-main .nav-subnav li a {
+ padding: 8px 14px !important;
+ border-radius: var(--n-radius-sm) !important;
+ font-size: 0.88rem !important;
+ background: var(--n-bg) !important;
+ color: var(--n-muted) !important;
+ box-shadow: 3px 3px 6px var(--n-shadow-dark), -3px -3px 6px var(--n-shadow-light) !important;
+}
+.sidebar-main .nav-subnav li a:hover {
+ color: var(--n-accent) !important;
+}
+.sidebar-main .nav-item i { margin-right: 10px !important; }
+
+.sidebar-footer {
+ background: transparent !important;
+ border-top: none !important;
+ box-shadow: none !important;
+ padding: 16px !important;
+}
+.sidebar-footer .copyright {
+ color: var(--n-muted) !important;
+ font-size: 0.82rem !important;
+}
+
+/* --- 头部 --- */
+.lyear-layout-header {
+ background: var(--n-bg) !important;
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+ border-bottom: none !important;
+}
+.lyear-layout-header .navbar {
+ background: var(--n-bg) !important;
+ border-bottom: none !important;
+}
+.navbar-right .dropdown-profile > a {
+ border-radius: var(--n-radius-sm) !important;
+ padding: 6px 14px 6px 6px !important;
+ background: var(--n-bg) !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light) !important;
+ color: var(--n-fg) !important;
+}
+.navbar-right .dropdown-profile > a:hover {
+ box-shadow: inset 2px 2px 4px var(--n-shadow-dark), inset -2px -2px 4px var(--n-shadow-light) !important;
+}
+.navbar-right .dropdown-profile img { border: none !important; box-shadow: 2px 2px 4px var(--n-shadow-dark), -2px -2px 4px var(--n-shadow-light); }
+
+/* 侧边栏折叠按钮 */
+.lyear-aside-toggler {
+ width: 36px; height: 36px;
+ border-radius: var(--n-radius-sm) !important;
+ background: var(--n-bg) !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light) !important;
+ margin-right: 8px;
+}
+.lyear-aside-toggler .lyear-toggler-bar { background: var(--n-muted) !important; height: 2px !important; border-radius: 1px; }
+
+/* --- 主内容区 --- */
+.lyear-layout-content {
+ background: var(--n-bg) !important;
+ padding: 24px !important;
+}
+
+/* --- 多标签栏 --- */
+.mt-nav-bar {
+ background: var(--n-bg) !important;
+ box-shadow: inset 0 1px 3px var(--n-shadow-dark) !important;
+ border-top: none !important;
+ border-bottom: none !important;
+}
+.mt-nav-bar .nav-tabs { background: var(--n-bg) !important; border: none !important; }
+.mt-nav-bar .nav-tabs > li > a {
+ border: none !important;
+ background: var(--n-bg) !important;
+ color: var(--n-muted) !important;
+ border-radius: var(--n-radius-sm) !important;
+ margin: 6px 4px !important;
+ padding: 8px 16px !important;
+ box-shadow: 3px 3px 6px var(--n-shadow-dark), -3px -3px 6px var(--n-shadow-light) !important;
+}
+.mt-nav-bar .nav-tabs > li > a:hover { color: var(--n-accent); }
+.mt-nav-bar .nav-tabs > li.active > a {
+ box-shadow: inset 2px 2px 4px var(--n-shadow-dark), inset -2px -2px 4px var(--n-shadow-light) !important;
+ color: var(--n-accent) !important;
+ background: var(--n-bg) !important;
+}
+
+/* ---------- 4. Bootstrap 组件覆盖 ---------- */
+
+/* --- Card --- */
+.card {
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius-lg) !important;
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+ margin-bottom: 24px !important;
+ transition: all var(--n-transition);
+}
+.card-header {
+ background: var(--n-bg) !important;
+ border-bottom: none !important;
+ border-radius: var(--n-radius-lg) var(--n-radius-lg) 0 0 !important;
+ padding: 20px 28px !important;
+ box-shadow: inset 0 -1px 0 var(--n-shadow-dark) !important;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.card-header h4, .card-header h3, .card-header .card-title {
+ color: var(--n-fg) !important;
+ font-weight: 700 !important;
+ font-size: 1.05rem !important;
+ margin: 0 !important;
+}
+.card-header ul.card-actions { display: flex; margin: 0; padding: 0; list-style: none; }
+.card-header ul.card-actions li { display: inline-flex; align-items: center; }
+.card-header ul.card-actions li span { cursor: pointer; padding: 4px; border-radius: 6px; box-shadow: 2px 2px 4px var(--n-shadow-dark), -2px -2px 4px var(--n-shadow-light); color: var(--n-muted); }
+.card-header ul.card-actions li span:hover { color: var(--n-accent); }
+
+.card-body { padding: 24px 28px !important; color: var(--n-fg); }
+
+.card.bg-primary, .card.bg-success, .card.bg-info, .card.bg-danger {
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+ border: none !important;
+}
+
+/* --- btn 按钮系列 --- */
+.btn {
+ border-radius: var(--n-radius-sm) !important;
+ font-weight: 600 !important;
+ padding: 10px 20px !important;
+ border: none !important;
+ transition: all var(--n-transition) !important;
+ font-size: 0.92rem !important;
+ letter-spacing: 0.3px;
+}
+.btn-primary {
+ background: var(--n-gradient-accent) !important;
+ color: #fff !important;
+ box-shadow: 0 4px 12px rgba(92, 107, 192, 0.35) !important;
+}
+.btn-primary:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 6px 16px rgba(92, 107, 192, 0.45) !important;
+}
+.btn-primary:active {
+ box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3) !important;
+ transform: none;
+}
+.btn-default {
+ background: var(--n-bg) !important;
+ color: var(--n-fg) !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light) !important;
+}
+.btn-default:hover {
+ box-shadow: 2px 2px 4px var(--n-shadow-dark), -2px -2px 4px var(--n-shadow-light) !important;
+ color: var(--n-accent) !important;
+}
+.btn-default:active {
+ box-shadow: inset 3px 3px 6px var(--n-shadow-dark), inset -3px -3px 6px var(--n-shadow-light) !important;
+}
+.btn-success {
+ background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
+ box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3) !important;
+ color: #fff !important;
+}
+.btn-info {
+ background: linear-gradient(135deg, #1565c0, #1976d2) !important;
+ box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3) !important;
+ color: #fff !important;
+}
+.btn-warning {
+ background: linear-gradient(135deg, #e65100, #f57c00) !important;
+ box-shadow: 0 4px 10px rgba(230, 81, 0, 0.3) !important;
+ color: #fff !important;
+}
+.btn-danger {
+ background: linear-gradient(135deg, #c62828, #d32f2f) !important;
+ box-shadow: 0 4px 10px rgba(198, 40, 40, 0.3) !important;
+ color: #fff !important;
+}
+.btn-cyan {
+ background: linear-gradient(135deg, #0097a7, #00acc1) !important;
+ color: #fff !important;
+ box-shadow: 0 4px 10px rgba(0, 151, 167, 0.3) !important;
+}
+.btn-purple {
+ background: linear-gradient(135deg, #7b1fa2, #8e24aa) !important;
+ color: #fff !important;
+ box-shadow: 0 4px 10px rgba(123, 31, 162, 0.3) !important;
+}
+.btn-xs { padding: 5px 12px !important; font-size: 0.78rem !important; border-radius: 8px !important; }
+.btn-sm { padding: 8px 16px !important; font-size: 0.85rem !important; }
+.btn-group .btn { box-shadow: none !important; }
+
+/* --- form-control 输入框 --- */
+.form-control {
+ border-radius: var(--n-radius-sm) !important;
+ background: var(--n-bg) !important;
+ border: none !important;
+ box-shadow: inset 4px 4px 8px var(--n-shadow-dark), inset -4px -4px 8px var(--n-shadow-light) !important;
+ color: var(--n-fg) !important;
+ padding: 12px 16px !important;
+ font-size: 0.95rem !important;
+ transition: box-shadow var(--n-transition) !important;
+ height: auto !important;
+}
+.form-control:focus {
+ box-shadow: inset 3px 3px 6px var(--n-shadow-dark), inset -3px -3px 6px var(--n-shadow-light) !important;
+ background: var(--n-bg) !important;
+ border: none !important;
+ color: var(--n-fg) !important;
+}
+.form-control::placeholder { color: var(--n-muted); }
+textarea.form-control { resize: vertical; min-height: 100px; }
+
+.form-group { margin-bottom: 18px !important; }
+.form-group label, .control-label {
+ font-weight: 600 !important;
+ color: var(--n-fg) !important;
+ font-size: 0.9rem !important;
+ margin-bottom: 8px !important;
+}
+
+/* --- table 表格 --- */
+.table {
+ color: var(--n-fg) !important;
+ background: transparent !important;
+ margin-bottom: 0 !important;
+}
+.table thead th {
+ background: var(--n-bg) !important;
+ color: var(--n-fg) !important;
+ font-weight: 700 !important;
+ border-bottom: 2px solid var(--n-shadow-dark) !important;
+ border-top: none !important;
+ padding: 14px 12px !important;
+ font-size: 0.88rem;
+}
+.table tbody td {
+ border-color: var(--n-shadow-dark) !important;
+ border-top: 1px solid var(--n-shadow-dark) !important;
+ padding: 12px !important;
+ background: transparent !important;
+ font-size: 0.9rem;
+}
+.table.table-bordered {
+ border: none !important;
+}
+.table.table-bordered > thead > tr > th,
+.table.table-bordered > tbody > tr > td {
+ border: 1px solid var(--n-shadow-dark) !important;
+ background: var(--n-bg) !important;
+}
+.table.table-striped > tbody > tr:nth-of-type(odd) {
+ background: rgba(0,0,0,0.015) !important;
+}
+.table.table-striped > tbody > tr:nth-of-type(odd) td {
+ background: rgba(0,0,0,0.02) !important;
+}
+
+/* --- nav-tabs --- */
+.nav-tabs {
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius) !important;
+ padding: 6px !important;
+ box-shadow: inset 2px 2px 5px var(--n-shadow-dark), inset -2px -2px 5px var(--n-shadow-light) !important;
+ margin-bottom: 24px !important;
+}
+.nav-tabs > li > a {
+ border: none !important;
+ border-radius: var(--n-radius-sm) !important;
+ padding: 12px 20px !important;
+ margin: 2px !important;
+ color: var(--n-muted) !important;
+ font-weight: 600 !important;
+ font-size: 0.92rem !important;
+ background: transparent !important;
+ transition: all var(--n-transition);
+}
+.nav-tabs > li > a:hover { color: var(--n-accent) !important; }
+.nav-tabs > li.active > a {
+ background: var(--n-gradient-accent) !important;
+ color: #fff !important;
+ box-shadow: 0 3px 10px rgba(92, 107, 192, 0.4) !important;
+}
+
+/* --- progress 进度条 --- */
+.progress {
+ background: var(--n-bg) !important;
+ border-radius: 20px !important;
+ height: 20px !important;
+ box-shadow: inset 3px 3px 6px var(--n-shadow-dark), inset -3px -3px 6px var(--n-shadow-light) !important;
+ margin: 0 !important;
+}
+.progress-bar {
+ background: var(--n-gradient-accent) !important;
+ border-radius: 20px !important;
+ box-shadow: none !important;
+}
+.progress-bar-striped { background-image: none !important; }
+
+/* --- badge --- */
+.badge {
+ border-radius: 10px !important;
+ padding: 4px 12px !important;
+ font-weight: 700 !important;
+ font-size: 0.78rem !important;
+}
+.badge-primary-light { background: #c5cae9 !important; color: #3949ab !important; }
+.badge-success { background: #c8e6c9 !important; color: #2e7d32 !important; }
+.badge-danger { background: #ffcdd2 !important; color: #c62828 !important; }
+.badge-warning { background: #ffe0b2 !important; color: #e65100 !important; }
+.badge-info { background: #bbdefb !important; color: #1565c0 !important; }
+.badge-light { background: var(--n-shadow-dark) !important; color: var(--n-fg) !important; }
+
+/* --- modal --- */
+.modal-content {
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius-lg) !important;
+ box-shadow: 16px 16px 32px var(--n-shadow-dark), -16px -16px 32px var(--n-shadow-light) !important;
+}
+.modal-header {
+ background: var(--n-bg) !important;
+ border-bottom: none !important;
+ box-shadow: inset 0 -1px 0 var(--n-shadow-dark) !important;
+ padding: 20px 28px !important;
+}
+.modal-header .modal-title { color: var(--n-fg) !important; font-weight: 700 !important; }
+.modal-header .close {
+ color: var(--n-muted) !important;
+ text-shadow: none !important;
+ opacity: 0.6;
+ width: 30px; height: 30px;
+ border-radius: 50%;
+ background: var(--n-bg);
+ box-shadow: 3px 3px 6px var(--n-shadow-dark), -3px -3px 6px var(--n-shadow-light);
+ display: inline-flex; align-items: center; justify-content: center;
+ font-size: 1.2rem;
+}
+.modal-header .close:hover { opacity: 1; color: #e53935; }
+
+.modal-body { padding: 24px 28px !important; color: var(--n-fg); }
+.modal-footer {
+ border-top: none !important;
+ box-shadow: inset 0 1px 0 var(--n-shadow-dark) !important;
+ padding: 16px 28px !important;
+ background: var(--n-bg) !important;
+}
+
+/* --- callout --- */
+.callout {
+ border-radius: var(--n-radius-sm) !important;
+ border: none !important;
+ padding: 16px 20px !important;
+ background: var(--n-bg) !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light) !important;
+ color: var(--n-fg) !important;
+}
+.callout-info { border-left: 4px solid var(--n-info) !important; }
+.callout-primary { border-left: 4px solid var(--n-accent) !important; }
+.callout-success { border-left: 4px solid var(--n-success) !important; }
+.callout-danger { border-left: 4px solid var(--n-danger) !important; }
+
+/* --- text 颜色 --- */
+.text-primary { color: var(--n-accent) !important; }
+.text-success { color: var(--success) !important; }
+.text-info { color: var(--info) !important; }
+.text-warning { color: var(--warning) !important; }
+.text-danger { color: var(--danger) !important; }
+.text-muted { color: var(--n-muted) !important; }
+.text-white { color: #fff !important; }
+.text-purple { color: #7b1fa2 !important; }
+
+/* --- 空状态 --- */
+.text-center.text-muted { padding: 20px; color: var(--n-muted); }
+
+/* ---------- 5. 登录页新拟态 ---------- */
+body.login-page {
+ background: var(--n-bg) !important;
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.login-card {
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius-xl) !important;
+ box-shadow: 12px 12px 24px var(--n-shadow-dark), -12px -12px 24px var(--n-shadow-light) !important;
+}
+.login-brand .title { color: var(--n-fg) !important; font-weight: 800 !important; }
+.login-brand .sub { color: var(--n-muted) !important; }
+.login-form .form-control {
+ height: auto !important;
+ box-shadow: inset 6px 6px 12px var(--n-shadow-dark), inset -6px -6px 12px var(--n-shadow-light) !important;
+ padding: 14px 18px 14px 40px !important;
+ height: 50px !important;
+ border-radius: var(--n-radius-sm) !important;
+ border: none !important;
+ background: var(--n-bg) !important;
+ color: var(--n-fg) !important;
+}
+.login-form .form-control::placeholder { color: var(--n-muted); }
+.login-form .has-feedback .mdi { color: var(--n-muted) !important; }
+
+.login-form .btn-login {
+ background: var(--n-gradient-accent) !important;
+ height: 50px !important;
+ border-radius: var(--n-radius-sm) !important;
+ box-shadow: 0 6px 16px rgba(92, 107, 192, 0.4) !important;
+ color: #fff !important;
+ font-weight: 700 !important;
+}
+.login-form .btn-login:hover {
+ box-shadow: 0 8px 20px rgba(92, 107, 192, 0.5) !important;
+}
+.login-footer { color: var(--n-muted) !important; }
+
+.captcha-img {
+ height: 50px !important;
+ border-radius: var(--n-radius-sm) !important;
+ border: none !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light) !important;
+}
+
+/* ---------- 6. iframe 内容通用 ---------- */
+.container-fluid, .container {
+ padding: 24px !important;
+ max-width: 100%;
+}
+
+/* 控制面板统计卡片 */
+.byys.card {
+ box-shadow: 6px 6px 12px var(--n-shadow-dark), -6px -6px 12px var(--n-shadow-light) !important;
+ border-radius: var(--n-radius) !important;
+}
+.byys .card-header.bg-info {
+ background: var(--n-bg) !important;
+ box-shadow: inset 0 -1px 0 var(--n-shadow-dark) !important;
+ color: var(--n-fg) !important;
+}
+.byys .card-header.bg-info h4 { color: var(--n-fg) !important; font-weight: 700 !important; }
+
+/* 功能菜单卡片 */
+.card.text-dark.border {
+ background: var(--n-bg) !important;
+ border: none !important;
+ box-shadow: 5px 5px 10px var(--n-shadow-dark), -5px -5px 10px var(--n-shadow-light) !important;
+ border-radius: var(--n-radius) !important;
+ padding: 16px 12px !important;
+ margin: 6px !important;
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: center !important;
+ text-align: center !important;
+ color: var(--n-fg) !important;
+ font-weight: 600 !important;
+ text-decoration: none !important;
+ transition: all var(--n-transition);
+ min-height: 110px !important;
+}
+.card.text-dark.border:hover {
+ transform: translateY(-4px);
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+ color: var(--n-accent) !important;
+}
+.card.text-dark.border:active {
+ box-shadow: inset 3px 3px 6px var(--n-shadow-dark), inset -3px -3px 6px var(--n-shadow-light) !important;
+ transform: none;
+}
+.card.text-dark.border .mdi { color: var(--n-accent) !important; margin-bottom: 8px; }
+
+/* 面板内表格边框统一去除 */
+.table-bordered { border: none !important; }
+.table-bordered td, .table-bordered th { border-color: var(--n-shadow-dark) !important; }
+
+/* ---------- 7. dropdown 下拉菜单 ---------- */
+.dropdown-menu {
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius-sm) !important;
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+ padding: 8px !important;
+}
+.dropdown-menu > li > a {
+ border-radius: 8px !important;
+ padding: 10px 18px !important;
+ color: var(--n-fg) !important;
+ font-weight: 500 !important;
+}
+.dropdown-menu > li > a:hover {
+ background: var(--n-bg-alt) !important;
+ color: var(--n-accent) !important;
+}
+
+/* ---------- 8. jQuery-confirm 对话框 ---------- */
+.jconfirm-box {
+ background: var(--n-bg) !important;
+ border-radius: var(--n-radius-lg) !important;
+ box-shadow: 16px 16px 32px var(--n-shadow-dark), -16px -16px 32px var(--n-shadow-light) !important;
+ border: none !important;
+}
+.jconfirm-content, .jconfirm-box .jconfirm-title-c {
+ color: var(--n-fg) !important;
+}
+.jconfirm-box .btn {
+ border-radius: var(--n-radius-sm) !important;
+ font-weight: 600 !important;
+}
+
+/* ---------- 9. jQuery-toast 消息 ---------- */
+.jconfirm-toast .jconfirm-content-pane {
+ border-radius: var(--n-radius) !important;
+ box-shadow: 8px 8px 16px var(--n-shadow-dark), -8px -8px 16px var(--n-shadow-light) !important;
+}
+
+/* ---------- 10. iframe loading 动画内边距修正 ---------- */
+.loading_upds { padding: 40px 20px; }
+
+/* ---------- 11. 响应式 ---------- */
+@media (max-width: 768px) {
+ .card-header { padding: 16px 20px !important; }
+ .card-body { padding: 20px !important; }
+ .container-fluid, .container { padding: 16px !important; }
+ .lyear-layout-content { padding: 16px !important; }
+ .card.text-dark.border { min-height: 90px !important; padding: 12px 8px !important; }
+ .byys .card-header h4, .byys .card-header .card-title { font-size: 0.95rem !important; }
+}
+@media (max-width: 480px) {
+ .btn { padding: 8px 14px !important; font-size: 0.85rem !important; }
+ .nav-tabs > li > a { padding: 10px 12px !important; font-size: 0.85rem !important; }
+}
diff --git a/templates/default/user/head.php b/templates/default/user/head.php
index 3adc98f..234d9cc 100644
--- a/templates/default/user/head.php
+++ b/templates/default/user/head.php
@@ -17,11 +17,25 @@ if (!empty($mn_conf['xf']['qk'])) {
<title><?=$title ?? 'MNBT'?></title>
<link rel="icon" href="<?=mnbt_asset_url('upload_logo/logo.head.png')?>?<?=$conf['auther'] ?? ''?>" type="image/ico">
<meta name="author" content="yinqi">
+
+<!-- 基础依赖 -->
<link href="<?=mnbt_asset_url('css/bootstrap.min.css')?>" rel="stylesheet">
<link href="<?=mnbt_asset_url('css/materialdesignicons.min.css')?>" rel="stylesheet">
<link rel="stylesheet" href="<?=mnbt_asset_url('js/bootstrap-multitabs/multitabs.min.css')?>">
<link href="<?=mnbt_asset_url('css/animate.min.css')?>" rel="stylesheet">
<link href="<?=mnbt_asset_url('css/style.min.css')?>" rel="stylesheet">
+
+<!-- 表格 & 弹窗 -->
+<link href="<?=mnbt_asset_url('js/bootstrap-table/bootstrap-table.min.css')?>" rel="stylesheet">
+<link href="<?=mnbt_asset_url('js/jquery-confirm/jquery-confirm.min.css')?>" rel="stylesheet">
+
+<!-- 原主题通用样式 -->
+<link href="<?=mnbt_theme_asset('user-common.css')?>" rel="stylesheet">
+
+<!-- ===== StarIDC 新拟态 2.0 主题（覆盖层，必须放在最末以确保优先级） ===== -->
+<link href="<?=mnbt_theme_asset('user-neomorphism.css')?>" rel="stylesheet">
+
+<!-- JS 依赖 -->
<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?=mnbt_asset_url('js/popper.min.js')?>"></script>
<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap.min.js')?>"></script>
@@ -29,8 +43,5 @@ if (!empty($mn_conf['xf']['qk'])) {
<script src="<?=mnbt_asset_url('js/bootstrap-notify.min.js')?>"></script>
<script type="text/javascript" src="<?=mnbt_asset_url('js/main.min.js')?>"></script>
<script type="text/javascript" src="<?=mnbt_asset_url('js/fn-hs.js')?>?1.74"></script>
-<link href="<?=mnbt_asset_url('js/bootstrap-table/bootstrap-table.min.css')?>" rel="stylesheet">
-<link href="<?=mnbt_asset_url('js/jquery-confirm/jquery-confirm.min.css')?>" rel="stylesheet">
-<link href="<?=mnbt_theme_asset('user-common.css')?>" rel="stylesheet">
</head>
<body>
diff --git a/templates/default/user/index.php b/templates/default/user/index.php
index b0ac84c..75b1bfa 100644
--- a/templates/default/user/index.php
+++ b/templates/default/user/index.php
@@ -11,20 +11,35 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+<!-- 基础依赖 -->
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('css/materialdesignicons.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('css/bootstrap.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('js/bootstrap-multitabs/multitabs.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('css/animate.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('css/style.min.css')?>">
+<!-- 弹窗 -->
<link rel="stylesheet" type="text/css" href="<?=mnbt_asset_url('js/jquery-confirm/jquery-confirm.min.css')?>">
+
+<!-- ===== StarIDC 新拟态 2.0 主题（覆盖层，放在最末以确保优先级） ===== -->
+<link href="<?=mnbt_theme_asset('user-neomorphism.css')?>" rel="stylesheet">
+
<script type="text/javascript" src="<?=mnbt_asset_url('js/fn-hs.js')?>"></script>
+
<style>
-@keyframes rotate {
- 100%{-webkit-transform:rotate(360deg);}
-}
-#iframe_shuax{
- cursor:pointer;
+@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+#iframe_shuax { cursor: pointer; }
+
+/* 侧边栏 logo 区域渐变标题（可选） */
+.sidebar-header .sidebar-brand-text {
+ font-size: 1.3rem;
+ font-weight: 800;
+ background: var(--n-gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: -0.5px;
}
</style>
</head>
@@ -36,7 +51,11 @@
<aside class="lyear-layout-sidebar">
<!-- logo -->
-<div id="logo" class="sidebar-header"> <a href="index.php"> <img src="<?=mnbt_asset_url('upload_logo/logo.index.png')?>?<?=$conf['auther']?>" title="MN_logo" alt="MN_logo" /> </a> </div>
+<div id="logo" class="sidebar-header">
+ <a href="index.php">
+ <img src="<?=mnbt_asset_url('upload_logo/logo.index.png')?>?<?=$conf['auther']?>" title="MN_logo" alt="MN_logo" />
+ </a>
+</div>
<div class="lyear-layout-sidebar-info lyear-scroll">
<nav class="sidebar-main">
<ul class="nav-drawer">
@@ -45,16 +64,13 @@
<li class="nav-item nav-item-has-subnav"> <a href="javascript:void(0)"> <i class="mdi mdi-console"></i> <span>基本配置</span> </a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="set.php?gn=php">PHP版本切换</a> </li>
- <!-- <li> <a class="multitabs" href="set.php?gn=rzfx">日志分析</a> </li> -->
<li> <a class="multitabs" href="set.php?gn=url">域名修改</a> </li>
<li> <a class="multitabs" href="set.php?gn=pass">设置密码访问</a> </li>
<li> <a class="multitabs" href="set.php?gn=mrwd">修改默认文档</a> </li>
- <!-- <li> <a class="multitabs" href="set.php?gn=nginx">nginx配置文件</a> </li>-->
<li> <a class="multitabs" href="set.php?gn=yxml">设置运行目录</a> </li>
<li> <a class="multitabs" href="set.php?gn=wjt">设置伪静态</a> </li>
<li> <a class="multitabs" href="set.php?gn=ssl">SSL配置</a> </li>
<li> <a class="multitabs" href="set.php?gn=fdl">防盗链</a> </li>
- <!-- <li> <a class="multitabs" href="set.php?gn=fzjh">负载均衡配置(开发中)</a> </li> -->
<li> <a class="multitabs" href="set.php?gn=gzip">Gzip配置</a> </li>
<li> <a class="multitabs" href="set.php?gn=cache">缓存配置</a> </li>
<li> <a class="multitabs" href="set.php?gn=xgpass">修改密码</a> </li>
@@ -88,18 +104,22 @@ if (function_exists('mnbt_plugin_render_menu_user_html')) {
</div>
</div>
</aside>
-<!--End 左侧导航-->
+<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar">
<div class="navbar-left">
- <div class="lyear-aside-toggler float-left"> <span class="lyear-toggler-bar"></span> <span class="lyear-toggler-bar"></span> <span class="lyear-toggler-bar"></span> </div>
- <i class="ml-2 mdi mdi-refresh mdi-18px" id="iframe_shuax"></i>
+ <div class="lyear-aside-toggler float-left">
+ <span class="lyear-toggler-bar"></span>
+ <span class="lyear-toggler-bar"></span>
+ <span class="lyear-toggler-bar"></span>
+ </div>
+ <i class="ml-2 mdi mdi-refresh mdi-18px" id="iframe_shuax" style="color: var(--n-muted); cursor: pointer; padding: 6px; border-radius: 50%; box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light);"></i>
</div>
<ul class="navbar-right d-flex align-items-center">
<!--切换主题配色-->
- <li class="dropdown dropdown-skin"> <span data-toggle="dropdown" class="icon-item"> <i class="mdi mdi-palette"></i> </span>
+ <li class="dropdown dropdown-skin"> <span data-toggle="dropdown" class="icon-item" style="cursor: pointer; padding: 6px; border-radius: 50%; box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light); color: var(--n-muted); display: inline-flex;"> <i class="mdi mdi-palette"></i> </span>
<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
<li class="drop-title">
<p>LOGO</p>
@@ -192,15 +212,13 @@ if (function_exists('mnbt_plugin_render_menu_user_html')) {
<?=$user?>
</span> </a>
<ul class="dropdown-menu dropdown-menu-right">
- <li> <a class="dropdown-item"> <i class="mdi mdi-delete"> 清空缓存</i> </a> </li>
- <li class="dropdown-divider"></li>
<li> <a class="dropdown-item" onclick="chteci();"> <i class="mdi mdi-logout-variant"> 退出登录</i> </a> </li>
</ul>
</li>
</ul>
</nav>
</header>
-<!--End 头部信息-->
+<!--End 头部信息-->
<!--页面主要内容-->
<main class="lyear-layout-content">
@@ -209,136 +227,124 @@ if (function_exists('mnbt_plugin_render_menu_user_html')) {
<!--End 页面主要内容-->
</div>
</div>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/popper.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/perfect-scrollbar.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap-multitabs/multitabs.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery.cookie.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/index.min.js')?>"></script>
-<!--消息提示-->
+<!-- Scripts -->
+<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/popper.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/perfect-scrollbar.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap-multitabs/multitabs.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery.cookie.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/index.min.js')?>"></script>
+
+<!-- 消息提示 -->
<script type="text/javascript" src="<?=mnbt_asset_url('js/jquery-confirm/jquery-confirm.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/lyear-loading.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/main.min.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/fn-hs.js')?>"></script>
+<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap-notify.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/lyear-loading.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/main.min.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/fn-hs.js')?>"></script>
-<script type="text/javascript" src="<?=mnbt_asset_url('js/bootstrap-notify.min.js')?>"></script>
<script type="text/javascript">
function xiaole()
{
$.confirm({
title: '邮箱绑定',
- //content: 'url:form.html', // 也可以采用url形式
- content: '<div class="form-group p-1 mb-0">' +
+ content: '<div class="form-group p-1 mb-0">' +
' <label class="control-label">请输入你的邮箱,必须输入邮箱</label>' +
' <input autofocus="" type="text" id="input-name" placeholder="请输入您的邮箱" class="form-control">' +
'</div>',
buttons: {
sayMyName: {
text: '提交',
- btnClass: 'btn-orange',
+ btnClass: 'btn-primary',
action: function() {
var input = this.$content.find('input#input-name');
- var errorText = this.$content.find('.text-danger');
var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
- if (!emailRegex.test(input.val())||!$.trim(input.val()))
- {
- $.alert({
- content: "邮箱错误",
- type: 'red'
- });
+ if (!emailRegex.test(input.val()) || !$.trim(input.val())) {
+ $.alert({ content: "邮箱错误", type: 'red' });
return false;
- }
- msloading('正在处理中，请稍后...'); // 加载显示
+ }
+ msloading('正在处理中，请稍后...');
let data = {};
data["gn"] = "mailbd";
data['mail'] = input.val();
$.post('./ajax.php', data, function (date) {
- var jsoe= JSON.parse(date);
- var qk= jsoe.code
- if(qk == "绑定成功")
- {
- msalert(1,'绑定成功！将在两秒后跳转登录！',2000);
- setTimeout(function()
- {
- window.location.href="./index.php";
- },2000);
- }
- else
- {
- msalert(4, qk,2000);
- setTimeout(function()
- {
- window.location.href="./index.php";
- },2000);
-
- }
-
- })
-
+ var jsoe = JSON.parse(date);
+ var qk = jsoe.code;
+ if (qk == "绑定成功") {
+ msalert(1, '绑定成功！将在两秒后跳转登录！', 2000);
+ setTimeout(function() { window.location.href = "./index.php"; }, 2000);
+ } else {
+ msalert(4, qk, 2000);
+ setTimeout(function() { window.location.href = "./index.php"; }, 2000);
+ }
+ });
}
- },
+ }
}
});
+}
+function chteci() {
+ msloading('正在退出登录中...', 'text-info', 'text-info');
+ let data = {};
+ data["gn"] = "login";
+ data["logout"] = "tclogin";
+ $.post('./ajax.php', data, function (date) {
+ var jsoe = JSON.parse(date);
+ var qk = jsoe.code;
+ msalert(1, qk, 2000);
+ window.location.href = "./login.php";
+ msloadingde();
+ });
}
- function chteci() {
- msloading('正在退出登录中...','text-info','text-info'); // 加载显示
- let data = {};
- data["gn"]="login";
- data["logout"]="tclogin";
- $.post('./ajax.php', data, function (date) {
- var jsoe= JSON.parse(date);
- var qk= jsoe.code
- msalert(1,qk,2000);
- window.location.href="./login.php"
- msloadingde();
- })
- }
-
- //页面加载动画
- $thisTabs = $('#iframe-content')
- var datasl=[];
- $thisTabs.bind('DOMNodeInserted',function(){
- var xzl=$(this)[0].innerText;
- var dqs=xzl.split('\n');
- if(datasl.indexOf(dqs[dqs.length-1])==-1){
- //页面loading
- setTimeout(function(){
- var $thisTabs = parent.$('.mt-nav-bar .nav-tabs').find('a.active');
- var ifarid=$thisTabs.attr('data-id');
- $('#'+ifarid).contents().find('body').html('<link href="<?=mnbt_asset_url('css/style.min.css')?>" rel="stylesheet"><link href="<?=mnbt_asset_url('css/bootstrap.min.css')?>" rel="stylesheet"><link href="<?=mnbt_asset_url('css/index.loading.css')?>" rel="stylesheet"><div class="loading_upds"><div class="ctn-preloader"><div class="round_spinner"><div class="spinner"></div><img src="<?=mnbt_asset_url('upload_logo/logo.head.png')?>?<?=$conf['auther']?>" alt=""></div</div></div>');
- },2)
- }
- datasl=dqs;
- })
-
- //页面刷新
- $("#iframe_shuax").on('click',function(){
- var $thisTabs = parent.$('.mt-nav-bar .nav-tabs').find('a.active');
- var ifarid=$thisTabs.attr('data-id');
- //旋转动画
- $(this).css({animation: "rotate 0.5s linear 1",display: "inline-block"});
- setTimeout(function(){$("#iframe_shuax").removeAttr('style');},500);
-
- //页面loading
- $('#'+ifarid).contents().find('body').html('<link href="<?=mnbt_asset_url('css/style.min.css')?>" rel="stylesheet"><link href="<?=mnbt_asset_url('css/bootstrap.min.css')?>" rel="stylesheet"><link href="<?=mnbt_asset_url('css/index.loading.css')?>" rel="stylesheet"><div class="loading_upds"><div class="ctn-preloader"><div class="round_spinner"><div class="spinner"></div><img src="<?=mnbt_asset_url('upload_logo/logo.head.png')?>?<?=$conf['auther']?>" alt=""></div</div></div>');
-
- $('#'+ifarid).attr('src', $('#'+ifarid).attr('src')); //刷新子页面
- })
-
+//页面加载动画
+$thisTabs = $('#iframe-content');
+var datasl = [];
+$thisTabs.bind('DOMNodeInserted', function() {
+ var xzl = $(this)[0].innerText;
+ var dqs = xzl.split('\n');
+ if (datasl.indexOf(dqs[dqs.length-1]) == -1) {
+ setTimeout(function() {
+ var $thisTabs = parent.$('.mt-nav-bar .nav-tabs').find('a.active');
+ var ifarid = $thisTabs.attr('data-id');
+ $('#'+ifarid).contents().find('body').html(
+ '<link href="<?=mnbt_asset_url('css/style.min.css')?>" rel="stylesheet">'+
+ '<link href="<?=mnbt_asset_url('css/bootstrap.min.css')?>" rel="stylesheet">'+
+ '<link href="<?=mnbt_asset_url('css/index.loading.css')?>" rel="stylesheet">'+
+ '<div class="loading_upds"><div class="ctn-preloader"><div class="round_spinner"><div class="spinner"></div><img src="<?=mnbt_asset_url('upload_logo/logo.head.png')?>?<?=$conf['auther']?>" alt=""></div></div></div>'
+ );
+ }, 2);
+ }
+ datasl = dqs;
+});
- </script>
+//页面刷新
+$("#iframe_shuax").on('click', function() {
+ var $thisTabs = parent.$('.mt-nav-bar .nav-tabs').find('a.active');
+ var ifarid = $thisTabs.attr('data-id');
+ $(this).css({ animation: "rotate 0.5s linear 1", display: "inline-block" });
+ setTimeout(function() { $("#iframe_shuax").removeAttr('style'); }, 500);
+
+ $('#'+ifarid).contents().find('body').html(
+ '<link href="<?=mnbt_asset_url('css/style.min.css')?>" rel="stylesheet">'+
+ '<link href="<?=mnbt_asset_url('css/bootstrap.min.css')?>" rel="stylesheet">'+
+ '<link href="<?=mnbt_asset_url('css/index.loading.css')?>" rel="stylesheet">'+
+ '<div class="loading_upds"><div class="ctn-preloader"><div class="round_spinner"><div class="spinner"></div><img src="<?=mnbt_asset_url('upload_logo/logo.head.png')?>?<?=$conf['auther']?>" alt=""></div></div></div>'
+ );
+
+ $('#'+ifarid).attr('src', $('#'+ifarid).attr('src'));
+});
+</script>
</body>
</html>
<?php
if($conf['zjyxbd'] == "true")
{
-if($yhc['mailuser'] == "" || $yhc['mailuser'] == null)
-{
- echo '<script>xiaole()</script>';
-}
+ if($yhc['mailuser'] == "" || $yhc['mailuser'] == null)
+ {
+ echo '<script>xiaole()</script>';
+ }
}
?>
diff --git a/templates/default/user/login.php b/templates/default/user/login.php
index 5de5446..2ed47f5 100644
--- a/templates/default/user/login.php
+++ b/templates/default/user/login.php
@@ -1,8 +1,7 @@
<?php mnbt_theme_include('head'); ?>
<style>
-html, body {
- height: 100%;
-}
+html, body { height: 100%; }
+
body.login-page {
margin: 0;
min-height: 100vh;
@@ -10,129 +9,124 @@ body.login-page {
align-items: center;
justify-content: center;
padding: 24px 16px;
- background: #f4f6f8;
+ background: var(--n-bg) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
-.login-wrap {
- width: 100%;
- max-width: 400px;
-}
+
+.login-wrap { width: 100%; max-width: 420px; }
+
.login-card {
- background: #fff;
- border-radius: 16px;
- padding: 40px 32px 28px;
- box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
- border: 1px solid #eef1f4;
-}
-.login-brand {
- text-align: center;
- margin-bottom: 28px;
-}
+ background: var(--n-bg) !important;
+ border: none !important;
+ border-radius: var(--n-radius-xl) !important;
+ padding: 44px 40px 32px;
+ box-shadow: 12px 12px 24px var(--n-shadow-dark), -12px -12px 24px var(--n-shadow-light) !important;
+}
+
+.login-brand { text-align: center; margin-bottom: 32px; }
.login-brand img {
- max-height: 48px;
- max-width: 200px;
+ max-height: 56px;
+ max-width: 220px;
object-fit: contain;
+ filter: drop-shadow(2px 2px 4px var(--n-shadow-dark));
}
.login-brand .title {
- margin: 14px 0 0;
- font-size: 18px;
- font-weight: 600;
- color: #1e293b;
- letter-spacing: -0.01em;
+ margin: 16px 0 0;
+ font-size: 1.3rem;
+ font-weight: 800;
+ background: var(--n-gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: -0.3px;
}
.login-brand .sub {
margin: 6px 0 0;
- font-size: 13px;
- color: #94a3b8;
-}
-.login-form .form-group {
- margin-bottom: 16px;
+ font-size: 0.9rem;
+ color: var(--n-muted);
}
+
+.login-form .form-group { margin-bottom: 20px; }
.login-form .form-control {
- height: 44px;
- border-radius: 10px;
- border: 1px solid #e2e8f0;
- background: #f8fafc;
- color: #1e293b;
- padding: 0 14px 0 40px;
- font-size: 14px;
- box-shadow: none;
- transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
+ height: 52px !important;
+ border-radius: var(--n-radius-sm) !important;
+ border: none !important;
+ background: var(--n-bg) !important;
+ color: var(--n-fg) !important;
+ padding: 14px 18px 14px 44px !important;
+ font-size: 0.95rem;
+ box-shadow: inset 6px 6px 12px var(--n-shadow-dark), inset -6px -6px 12px var(--n-shadow-light) !important;
+ transition: box-shadow var(--n-transition);
}
.login-form .form-control:focus {
- background: #fff;
- border-color: #33cabb;
- box-shadow: 0 0 0 3px rgba(51, 202, 187, 0.15);
- outline: none;
-}
-.login-form .form-control::placeholder {
- color: #94a3b8;
-}
-.login-form .has-feedback {
- position: relative;
+ box-shadow: inset 4px 4px 8px var(--n-shadow-dark), inset -4px -4px 8px var(--n-shadow-light) !important;
}
+.login-form .form-control::placeholder { color: var(--n-muted); }
+.login-form .has-feedback { position: relative; }
.login-form .has-feedback .mdi {
position: absolute;
- left: 0;
- top: 0;
- width: 40px;
- height: 44px;
- line-height: 44px;
+ left: 0; top: 0;
+ width: 44px; height: 52px;
+ line-height: 52px;
text-align: center;
- color: #94a3b8;
+ color: var(--n-muted);
z-index: 2;
pointer-events: none;
+ font-size: 1.1rem;
}
-.login-form .has-feedback.row .mdi {
- left: 15px;
-}
+
.login-form .captcha-row {
display: flex;
- gap: 10px;
+ gap: 12px;
align-items: stretch;
}
-.login-form .captcha-row .captcha-input {
- flex: 1;
- min-width: 0;
-}
+.login-form .captcha-row .captcha-input { flex: 1; min-width: 0; }
.login-form .captcha-img {
- height: 44px;
- border-radius: 10px;
- border: 1px solid #e2e8f0;
+ height: 52px;
+ border-radius: var(--n-radius-sm);
+ border: none !important;
+ box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light);
cursor: pointer;
flex-shrink: 0;
}
+
.login-form .btn-login {
- height: 44px;
- border-radius: 10px;
- border: none;
- background: #33cabb;
- color: #fff;
- font-size: 15px;
- font-weight: 600;
+ height: 52px !important;
+ border-radius: var(--n-radius-sm) !important;
+ border: none !important;
+ background: var(--n-gradient-accent) !important;
+ color: #fff !important;
+ font-size: 1rem !important;
+ font-weight: 700 !important;
width: 100%;
- margin-top: 4px;
- transition: background .15s ease, transform .1s ease;
+ margin-top: 8px;
+ box-shadow: 0 6px 18px rgba(92, 107, 192, 0.4) !important;
+ transition: all var(--n-transition);
+ letter-spacing: 2px;
}
-.login-form .btn-login:hover,
-.login-form .btn-login:focus {
- background: #2bb3a5;
- color: #fff;
+.login-form .btn-login:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 8px 22px rgba(92, 107, 192, 0.55) !important;
}
.login-form .btn-login:active {
- transform: scale(0.99);
+ transform: none;
+ box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3), 0 4px 12px rgba(92, 107, 192, 0.4) !important;
}
+
.login-footer {
- margin: 20px 0 0;
+ margin: 24px 0 0;
text-align: center;
- font-size: 12px;
- color: #94a3b8;
- line-height: 1.5;
-}
-@media (max-width: 420px) {
- .login-card {
- padding: 32px 20px 24px;
- }
+ font-size: 0.82rem;
+ color: var(--n-muted);
+ line-height: 1.6;
+}
+
+@media (max-width: 480px) {
+ .login-card { padding: 36px 24px 28px; border-radius: var(--n-radius-lg) !important; }
+ .login-brand img { max-height: 44px; max-width: 180px; }
+ .login-brand .title { font-size: 1.15rem; }
+ .captcha-row { flex-direction: column; gap: 10px; }
+ .captcha-img { width: 100%; height: 52px; }
}
</style>
</head>