diff --git a/yuthon_login_theme/__init__.py b/yuthon_login_theme/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/yuthon_login_theme/__manifest__.py b/yuthon_login_theme/__manifest__.py new file mode 100644 index 0000000..199a995 --- /dev/null +++ b/yuthon_login_theme/__manifest__.py @@ -0,0 +1,23 @@ +# -*- coding: utf-8 -*- +{ + 'name': '校园登录主题', + 'summary': '把 Odoo 登录页美化成教育网站风格', + 'description': ''' + 纯前端主题模块，只改登录页外观，不新增任何业务数据： + - 整页渐变背景（教育紫） + - 玻璃质感登录卡片 + 品牌标题 + - 登录按钮与主色统一 + ''', + 'category': 'Education', + 'version': '1.0', + 'depends': ['web'], + 'data': [ + 'views/login_templates.xml', + ], + 'assets': { + 'web.assets_frontend': [ + 'yuthon_login_theme/static/src/css/login.css', + ], + }, + 'installable': True, +} diff --git a/yuthon_login_theme/static/src/css/login.css b/yuthon_login_theme/static/src/css/login.css new file mode 100644 index 0000000..025f3a4 --- /dev/null +++ b/yuthon_login_theme/static/src/css/login.css @@ -0,0 +1,112 @@ +/* =========================================================== + 校园登录主题 · 教育网站风格 + 仅作用于登录页（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; +} + +/* 登录卡片：纯白实底 + 圆角 + 阴影，覆盖第三方主题 + 同时覆盖「数据库选择页(.o_database_list)」与「登录页(.oe_login_form)」两种卡片 */ +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; + 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; + background-color: #ffffff !important; + overflow: hidden; +} + +/* 数据库选择卡片内部 .card-body 也强制白底，防止透出背景图 */ +html body.light-dm main:has(.o_database_list) .o_database_list > .card-body { + background-color: #ffffff !important; +} + +/* 品牌标题区（我们注入的内容，不受主题作用域影响） */ +.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; + } +} diff --git a/yuthon_login_theme/static/src/img/login_bg.jpg b/yuthon_login_theme/static/src/img/login_bg.jpg new file mode 100644 index 0000000..7417d45 Binary files /dev/null and b/yuthon_login_theme/static/src/img/login_bg.jpg differ diff --git a/yuthon_login_theme/views/login_templates.xml b/yuthon_login_theme/views/login_templates.xml new file mode 100644 index 0000000..501a8af --- /dev/null +++ b/yuthon_login_theme/views/login_templates.xml @@ -0,0 +1,19 @@ + + + + +