134 lines
4.8 KiB
CSS
134 lines
4.8 KiB
CSS
/* ===========================================================
|
||
校园登录主题 · 教育网站风格
|
||
仅作用于登录页（body.bg-100 / .o_database_list / .oe_login_form / .edu-*）
|
||
注意：本实例装了第三方主题 udoo_om_ux，其登录卡片样式作用在
|
||
body.light-dm 作用域下，优先级较高。此处用同等/更高 specificity
|
||
的选择器 + !important 覆盖，确保白底与层级生效。
|
||
=========================================================== */
|
||
|
||
/* 整页背景图：教育背景图铺满 */
|
||
html body.bg-100 {
|
||
background-image: url('/yuthon_login_theme/static/src/img/login_bg.jpg') !important;
|
||
background-repeat: no-repeat !important;
|
||
background-position: center center !important;
|
||
background-attachment: fixed !important;
|
||
background-size: cover !important;
|
||
background-color: transparent !important;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 全屏背景层：沉到最底层，避免盖住登录卡片 */
|
||
.edu-login-bg {
|
||
position: fixed;
|
||
inset: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background: url('/yuthon_login_theme/static/src/img/login_bg.jpg') no-repeat center center;
|
||
background-size: cover;
|
||
}
|
||
|
||
/* 登录卡片：核心修复
|
||
真相（用户 F12 确认）：
|
||
.o_database_list 是 <div class="card ...">，内嵌 <div class="card-body">
|
||
udoo_om_ux/style_login_page.scss:
|
||
- line 12-14: .o_database_list { border-radius: 16px !important; border; box-shadow }
|
||
- line 16-17: .card-body { border-radius: 16px !important }
|
||
两层都有 border-radius + padding → 视觉"壳子"。
|
||
修复策略：让 .o_database_list 完全透明（无 border/box-shadow/bg），所有视觉
|
||
样式给 .card-body，card 与 card-body 融为一体。 */
|
||
html body.light-dm main:has(.o_database_list) .o_database_list,
|
||
html body.light-dm .oe_login_form,
|
||
.edu-login-card {
|
||
position: relative !important;
|
||
z-index: 10 !important;
|
||
max-width: 420px !important;
|
||
margin: 0 auto !important;
|
||
margin-top: 0 !important;
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 所有视觉样式集中在 .card-body：白底 + 圆角 + 阴影 + padding */
|
||
html body.light-dm main:has(.o_database_list) .o_database_list > .card-body {
|
||
background-color: #ffffff !important;
|
||
border-radius: 22px !important;
|
||
border: 1px solid rgba(226, 232, 240, 0.8) !important;
|
||
box-shadow: 0 24px 70px rgba(79, 70, 229, 0.22) !important;
|
||
padding: 2rem 1.5rem !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 品牌标题区（我们注入的内容，不受主题作用域影响） */
|
||
.edu-login-head {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.edu-login-brand {
|
||
font-size: 13px;
|
||
letter-spacing: 3px;
|
||
color: #8b5cf6;
|
||
font-weight: 600;
|
||
}
|
||
.edu-login-title {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: #1e1b4b;
|
||
margin: 8px 0 4px;
|
||
}
|
||
.edu-login-sub {
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 输入框聚焦高亮（提高优先级覆盖主题作用域） */
|
||
html body.light-dm .oe_login_form .form-control:focus,
|
||
html body.light-dm main:has(.o_database_list) .o_database_list .form-control:focus {
|
||
border-color: #8b5cf6 !important;
|
||
box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.20) !important;
|
||
}
|
||
|
||
/* 登录按钮：主色 + 通栏 */
|
||
html body.light-dm .oe_login_form .btn-primary,
|
||
html body.light-dm main:has(.o_database_list) .o_database_list .btn-primary {
|
||
background-color: #4f46e5 !important;
|
||
border-color: #4f46e5 !important;
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
font-size: 15px;
|
||
}
|
||
html body.light-dm .oe_login_form .btn-primary:hover,
|
||
html body.light-dm main:has(.o_database_list) .o_database_list .btn-primary:hover {
|
||
background-color: #4338ca !important;
|
||
border-color: #4338ca !important;
|
||
}
|
||
|
||
/* 卡片内分隔线柔和一点 */
|
||
html body.light-dm .oe_login_form .border-top,
|
||
html body.light-dm .oe_login_form .border-bottom,
|
||
html body.light-dm main:has(.o_database_list) .o_database_list .border-top,
|
||
html body.light-dm main:has(.o_database_list) .o_database_list .border-bottom {
|
||
border-color: rgba(99, 102, 241, 0.12) !important;
|
||
}
|
||
|
||
/* 移动端：卡片占满、留边距 */
|
||
@media (max-width: 480px) {
|
||
html body.light-dm main:has(.o_database_list) .o_database_list,
|
||
html body.light-dm .oe_login_form {
|
||
max-width: 92% !important;
|
||
}
|
||
}
|
||
|
||
/* ===========================================================
|
||
隐藏 Odoo 默认 logo 和底部"管理数据库 | 由Odoo提供支持"
|
||
注：login_templates.xml 里的 xpath 方案因 web.login_layout
|
||
内部 <t t-call> 调用链导致深层元素不可匹配，改为 CSS 隐藏
|
||
=========================================================== */
|
||
.o_database_list .card-body > .text-center.pb-3,
|
||
.o_database_list .card-body > .text-center.small {
|
||
display: none !important;
|
||
}
|