mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2026-07-14 03:23:48 +08:00
🎨ui: 优化Identity样式
This commit is contained in:
yubaolee
@@ -1,4 +1,19 @@
|
||||
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="status-icon status-icon--error">🚫</div>
|
||||
<h1>访问被拒绝</h1>
|
||||
<p>抱歉，您没有权限访问该资源。</p>
|
||||
</div>
|
||||
|
||||
<div class="status-text">
|
||||
请联系管理员获取相应的访问权限，或返回首页。
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a class="status-link" href="/">返回首页 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Access Denied</h1>
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.LoggedOutViewModel
|
||||
|
||||
@{
|
||||
// set this so the layout rendering sees an anonymous user
|
||||
@{
|
||||
ViewData["signed-out"] = true;
|
||||
}
|
||||
|
||||
<div class="page-header logged-out">
|
||||
<h1>
|
||||
Logout
|
||||
<small>You are now logged out</small>
|
||||
</h1>
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="status-icon status-icon--success">✔</div>
|
||||
<h1>已安全退出</h1>
|
||||
<p>您已成功退出登录</p>
|
||||
</div>
|
||||
|
||||
@if (Model.PostLogoutRedirectUri != null)
|
||||
{
|
||||
<div>
|
||||
Click <a class="PostLogoutRedirectUri" href="@Model.PostLogoutRedirectUri">here</a> to return to the
|
||||
<span>@Model.ClientName</span> application.
|
||||
<div style="text-align: center;">
|
||||
<a class="status-link" href="@Model.PostLogoutRedirectUri">
|
||||
返回 @Model.ClientName →
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (Model.SignOutIframeUrl != null)
|
||||
{
|
||||
<iframe width="0" height="0" class="signout" src="@Model.SignOutIframeUrl"></iframe>
|
||||
<iframe class="signout-iframe" src="@Model.SignOutIframeUrl"></iframe>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,92 +1,75 @@
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.LoginViewModel
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.LoginViewModel
|
||||
|
||||
<div class="login-page">
|
||||
<div class="page-header">
|
||||
<h1>Login</h1>
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="auth-icon">🔒</div>
|
||||
<h1>欢迎登录</h1>
|
||||
<p>登录 OpenAuth.Net 统一认证平台</p>
|
||||
</div>
|
||||
|
||||
<partial name="_ValidationSummary" />
|
||||
|
||||
<div class="row">
|
||||
@if (Model.EnableLocalLogin)
|
||||
{
|
||||
<form asp-route="Login">
|
||||
<input type="hidden" asp-for="ReturnUrl" />
|
||||
|
||||
<div class="form-group">
|
||||
<label asp-for="Username">用户名</label>
|
||||
<input class="form-control" placeholder="请输入用户名" asp-for="Username" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label asp-for="Password">密码</label>
|
||||
<input type="password" class="form-control" placeholder="请输入密码" asp-for="Password" autocomplete="off">
|
||||
</div>
|
||||
|
||||
@if (Model.AllowRememberLogin)
|
||||
{
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" asp-for="RememberLogin" id="RememberLogin">
|
||||
<label for="RememberLogin">记住登录状态</label>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" name="button" value="login">登 录</button>
|
||||
<button class="btn btn-secondary" name="button" value="cancel">取 消</button>
|
||||
</div>
|
||||
|
||||
<div class="hint-text">
|
||||
测试账号：System/123456 | admin/admin | test/test
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
@if (Model.VisibleExternalProviders.Any())
|
||||
{
|
||||
@if (Model.EnableLocalLogin)
|
||||
{
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Local Login</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<form asp-route="Login">
|
||||
<input type="hidden" asp-for="ReturnUrl" />
|
||||
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label asp-for="Username"></label>
|
||||
<input class="form-control" placeholder="Username" asp-for="Username" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label asp-for="Password"></label>
|
||||
<input type="password" class="form-control" placeholder="Password" asp-for="Password" autocomplete="off">
|
||||
</div>
|
||||
@if (Model.AllowRememberLogin)
|
||||
{
|
||||
<div class="form-group login-remember">
|
||||
<label asp-for="RememberLogin">
|
||||
<input asp-for="RememberLogin">
|
||||
<strong>Remember My Login</strong>
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary" name="button" value="login">Login</button>
|
||||
<button class="btn btn-default" name="button" value="cancel">Cancel</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
*Test Accounts: System/123456 | admin/admin | test/test
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"><span>或使用其他方式登录</span></div>
|
||||
}
|
||||
<div class="external-providers">
|
||||
@foreach (var provider in Model.VisibleExternalProviders)
|
||||
{
|
||||
<a class="btn btn-outline"
|
||||
asp-controller="External"
|
||||
asp-action="Challenge"
|
||||
asp-route-provider="@provider.AuthenticationScheme"
|
||||
asp-route-returnUrl="@Model.ReturnUrl">
|
||||
@provider.DisplayName
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (Model.VisibleExternalProviders.Any())
|
||||
{
|
||||
<div class="col-md-6 col-sm-6 external-providers">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">External Login</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="list-inline">
|
||||
@foreach (var provider in Model.VisibleExternalProviders)
|
||||
{
|
||||
<li>
|
||||
<a class="btn btn-default"
|
||||
asp-controller="External"
|
||||
asp-action="Challenge"
|
||||
asp-route-provider="@provider.AuthenticationScheme"
|
||||
asp-route-returnUrl="@Model.ReturnUrl">
|
||||
@provider.DisplayName
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
|
||||
{
|
||||
<div class="alert alert-warning">
|
||||
<span>⚠</span>
|
||||
<div>
|
||||
<strong>无效的登录请求</strong>
|
||||
<p>当前客户端未配置任何登录方式。</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
|
||||
{
|
||||
<div class="alert alert-warning">
|
||||
<strong>Invalid login request</strong>
|
||||
There are no login schemes configured for this client.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.LogoutViewModel
|
||||
|
||||
<div class="logout-page">
|
||||
<div class="page-header">
|
||||
<h1>Logout</h1>
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="status-icon status-icon--warning">👋</div>
|
||||
<h1>确认退出</h1>
|
||||
<p>您确定要退出当前登录状态吗？</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<p>Would you like to logout of IdentityServer?</p>
|
||||
<form asp-action="Logout">
|
||||
<input type="hidden" name="logoutId" value="@Model.LogoutId" />
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary">Yes</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form asp-action="Logout">
|
||||
<input type="hidden" name="logoutId" value="@Model.LogoutId" />
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-danger" type="submit">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
<div class="welcome-page">
|
||||
<div class="row page-header">
|
||||
<div class="col-sm-10">
|
||||
<h1>
|
||||
<img class="icon" src="~/icon.jpg">
|
||||
Welcome to OpenAuth.Net IdentityServer
|
||||
<small>(OpenIddict)</small>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="auth-card auth-card--wide">
|
||||
<div class="auth-card-header">
|
||||
<div class="auth-icon">🏠</div>
|
||||
<h1>OpenAuth.Net 认证中心</h1>
|
||||
<p>基于 OpenIddict 的统一身份认证平台</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<p>
|
||||
IdentityServer publishes a
|
||||
<a href="~/.well-known/openid-configuration">discovery document</a>
|
||||
where you can find metadata and links to all the endpoints, key material, etc.
|
||||
</p>
|
||||
<div class="welcome-content">
|
||||
<div class="status-text">
|
||||
本服务提供 OpenID Connect / OAuth 2.0 协议支持，为应用提供安全可靠的身份验证服务。
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 24px;">
|
||||
<a class="discovery-link" href="~/.well-known/openid-configuration">
|
||||
🔗 查看发现文档 (Discovery)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,31 @@
|
||||
@model OpenAuth.IdentityServer.Quickstart.Home.ErrorViewModel
|
||||
@model OpenAuth.IdentityServer.Quickstart.Home.ErrorViewModel
|
||||
|
||||
<div class="error-page">
|
||||
<div class="page-header">
|
||||
<h1>Error</h1>
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="status-icon status-icon--error">❌</div>
|
||||
<h1>出错了</h1>
|
||||
<p>处理您的请求时发生了错误</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="alert alert-danger">
|
||||
Sorry, there was an error
|
||||
|
||||
@if (!string.IsNullOrEmpty(Model?.ErrorId))
|
||||
{
|
||||
<div>Error Id: @Model.ErrorId</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(Model?.ErrorMessage))
|
||||
{
|
||||
<div>@Model.ErrorMessage</div>
|
||||
}
|
||||
</div>
|
||||
<div class="alert alert-error">
|
||||
<span>⚠</span>
|
||||
<div>
|
||||
@if (!string.IsNullOrEmpty(Model?.ErrorId))
|
||||
{
|
||||
<div><strong>错误编号：</strong>@Model.ErrorId</div>
|
||||
}
|
||||
@if (!string.IsNullOrEmpty(Model?.ErrorMessage))
|
||||
{
|
||||
<div>@Model.ErrorMessage</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div>抱歉，服务器遇到了意外问题。</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a class="status-link" href="/">返回首页 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.RedirectViewModel
|
||||
@model OpenAuth.IdentityServer.Quickstart.Account.RedirectViewModel
|
||||
|
||||
<h1>You are now being returned to the application.</h1>
|
||||
<p>Once complete, you may close this tab</p>
|
||||
<div class="auth-card">
|
||||
<div class="auth-card-header">
|
||||
<div class="status-icon status-icon--info">↺</div>
|
||||
<h1>正在跳转</h1>
|
||||
<p class="loading-dots">正在返回应用程序</p>
|
||||
</div>
|
||||
|
||||
<div class="status-text">
|
||||
页面即将自动跳转，如未自动跳转请 <a href="@Model.RedirectUrl">点击此处</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<meta http-equiv="refresh" content="0;url=@Model.RedirectUrl" data-url="@Model.RedirectUrl">
|
||||
<script src="~/js/signin-redirect.js"></script>
|
||||
|
||||
@@ -6,66 +6,42 @@
|
||||
}
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenAuth.Net认证中心- 最好用的.net权限工作流框架|.net core快速开发框架|.net core权限管理|.net core工作流</title>
|
||||
<meta name="Keywords" content="openauth.net,.net开源工作流,.NET开源权限管理">
|
||||
<meta name="Description" content="最好用的.net开源工作流框架,最好用的.NET开源权限管理框架">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>OpenAuth.Net 认证中心</title>
|
||||
<meta name="description" content="OpenAuth.Net 统一身份认证平台" />
|
||||
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
|
||||
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="~/css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="~/">
|
||||
<span class="navbar-brand">
|
||||
<img src="~/icon.png" class="icon-banner">
|
||||
OpenAuth.Net IdentityServer认证中心
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="auth-wrapper">
|
||||
<header class="auth-header">
|
||||
<a href="~/" class="brand">
|
||||
<img src="~/favicon.ico" alt="Logo" />
|
||||
<span>OpenAuth.Net</span>
|
||||
</a>
|
||||
@if (!string.IsNullOrWhiteSpace(name))
|
||||
{
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@name <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a asp-action="Logout" asp-controller="Account">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="user-menu">
|
||||
<span>@name</span>
|
||||
<a asp-action="Logout" asp-controller="Account">退出登录</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="auth-main">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<footer class="auth-footer">
|
||||
© @DateTime.Now.Year OpenAuth.Net - 统一身份认证平台
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="container body-content">
|
||||
@RenderBody()
|
||||
</div>
|
||||
|
||||
<script src="~/lib/jquery/jquery.js"></script>
|
||||
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "//hm.baidu.com/hm.js?93a7b9a145222f9b7109d643a0c58f8d";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
@RenderSection("scripts", required: false)
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,14 @@
|
||||
@if (ViewContext.ModelState.IsValid == false)
|
||||
{
|
||||
<div class="alert alert-error">
|
||||
<span>⚠</span>
|
||||
<div>
|
||||
<strong>操作失败</strong>
|
||||
<div asp-validation-summary="All"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (ViewContext.ModelState.IsValid == false)
|
||||
{
|
||||
<div class="alert alert-danger">
|
||||
<strong>Error</strong>
|
||||
|
||||
@@ -1,5 +1,594 @@
|
||||
body {
|
||||
margin-top: 65px;
|
||||
/* ============================================
|
||||
OpenAuth.Net 认证中心 - 现代化设计系统
|
||||
============================================ */
|
||||
|
||||
/* --- 设计令牌 (Design Tokens) --- */
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--color-primary: #6366f1;
|
||||
--color-primary-hover: #4f46e5;
|
||||
--color-primary-light: #eef2ff;
|
||||
--color-secondary: #8b5cf6;
|
||||
|
||||
/* 背景渐变 */
|
||||
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--bg-gradient-subtle: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
|
||||
/* 中性色 */
|
||||
--color-text: #1e293b;
|
||||
--color-text-secondary: #64748b;
|
||||
--color-text-muted: #94a3b8;
|
||||
--color-border: #e2e8f0;
|
||||
--color-bg-white: #ffffff;
|
||||
--color-bg-gray: #f8fafc;
|
||||
|
||||
/* 状态色 */
|
||||
--color-success: #10b981;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #ef4444;
|
||||
--color-error-bg: #fef2f2;
|
||||
--color-error-border: #fecaca;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* 间距 */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
|
||||
/* 字体 */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-base: 16px;
|
||||
--font-size-lg: 18px;
|
||||
--font-size-xl: 20px;
|
||||
--font-size-2xl: 24px;
|
||||
--font-size-3xl: 30px;
|
||||
|
||||
/* 动画 */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* --- 全局重置 --- */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-gradient);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
/* --- 布局容器 --- */
|
||||
.auth-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.auth-header .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-header .brand img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.auth-header .user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.auth-header .user-menu a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
transition: all var(--transition-fast);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.auth-header .user-menu a:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.auth-main {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.auth-main::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
flex: 0 0 auto;
|
||||
text-align: center;
|
||||
padding: var(--space-md);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* --- 认证卡片 --- */
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--color-bg-white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: var(--space-2xl);
|
||||
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.auth-card.auth-card--wide {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.auth-card-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.auth-card-header .auth-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-md);
|
||||
font-size: 28px;
|
||||
background: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.auth-card-header h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.auth-card-header p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* --- 表单元素 --- */
|
||||
.form-group {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg-gray);
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
outline: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background: var(--color-bg-white);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* --- 按钮 --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
font-family: var(--font-family);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
||||
transform: translateY(-1px);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-bg-gray);
|
||||
color: var(--color-text);
|
||||
border: 1.5px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-bg-white);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 1.5px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-error);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
transform: translateY(-1px);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* --- 复选框 --- */
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- 提示信息 --- */
|
||||
.alert {
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: var(--color-error-bg);
|
||||
border: 1px solid var(--color-error-border);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fed7aa;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #ecfdf5;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* --- 分割线 --- */
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: var(--space-lg) 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.divider::before,
|
||||
.divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.divider span {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* --- 外部登录 --- */
|
||||
.external-providers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.external-providers .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* --- 提示文字 --- */
|
||||
.hint-text {
|
||||
text-align: center;
|
||||
margin-top: var(--space-md);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-muted);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* --- 状态页面 --- */
|
||||
.status-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-lg);
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.status-icon--success {
|
||||
background: #ecfdf5;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.status-icon--error {
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.status-icon--warning {
|
||||
background: #fffbeb;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.status-icon--info {
|
||||
background: #eff6ff;
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.status-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-lg);
|
||||
padding: 10px 20px;
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.status-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- 首页欢迎 --- */
|
||||
.welcome-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-content .discovery-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-md);
|
||||
padding: 10px 20px;
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.welcome-content .discovery-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- 动画 --- */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.loading-dots::after {
|
||||
content: '...';
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* --- 隐藏iframe --- */
|
||||
.signout-iframe {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* --- 响应式 --- */
|
||||
@media (max-width: 480px) {
|
||||
.auth-card {
|
||||
padding: var(--space-lg);
|
||||
margin: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.auth-main {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.auth-card {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.auth-card-header h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
.navbar-header {
|
||||
position: relative;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.1 KiB |
Reference in New Issue
Block a user