github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-21 19:41:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 fix https://github.com/siyuan-note/siyuan/issues/6821

Browse Source
This commit is contained in:
Vanessa 2022-12-09 12:48:50 +08:00
parent 76c8b15699
commit 336ff210e5
1 changed files with 65 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/stage/auth.html
View File

@ -3,10 +3,37 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
<title>SiYuan Auth</title> <title>{{.l6}}</title>
<style> <style>
body { body {
margin: 0;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
--b3-theme-on-surface: #5f6368;
--b3-protyle-code-background: rgba(27, 31, 35, .05);
--b3-protyle-inline-link-color: #4285f4;
--b3-theme-primary: #3573f0;
--b3-theme-primary-lighter: rgba(53, 115, 240, 0.38);
--b3-theme-primary-lightest: rgba(53, 115, 240, 0.12);
--b3-theme-background: #fff;
--b3-theme-on-background: #202124;
--b3-theme-on-primary: #fff;
}
.dark {
--b3-theme-on-surface: #9aa0a6;
--b3-protyle-code-background: rgba(240, 246, 252, .15);
--b3-protyle-inline-link-color: #8ab4f8;
--b3-theme-primary: #3573f0;
--b3-theme-primary-lighter: rgba(53, 115, 240, 0.48);
--b3-theme-primary-lightest: rgba(53, 115, 240, 0.24);
--b3-theme-background: #212224;
--b3-theme-on-background: #c9d1d9;
--b3-theme-on-primary: #fff;
background-color: var(--b3-theme-background);
} }
.b3-button { .b3-button {
@ -17,7 +44,6 @@
border-radius: 4px; border-radius: 4px;
line-height: 20px; line-height: 20px;
padding: 4px 8px; padding: 4px 8px;
background-color: #4285f4;
white-space: nowrap; white-space: nowrap;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -27,6 +53,7 @@
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
background-color: var(--b3-theme-primary);
} }
.b3-button svg { .b3-button svg {
@ -38,51 +65,51 @@
.b3-button:hover, .b3-button:focus { .b3-button:hover, .b3-button:focus {
outline: none; outline: none;
text-decoration: none; text-decoration: none;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
} }
.b3-button:active { .b3-button:active {
outline: none; outline: none;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
} }
.b3-button--white { .b3-button--white {
color: #0969da; color: var(--b3-theme-primary);
box-shadow: inset 0 0 0 1px #0969da; box-shadow: inset 0 0 0 1px var(--b3-theme-primary);
background-color: transparent; background-color: transparent;
} }
.b3-button--white:hover, .b3-button--white:hover,
.b3-button--white:focus { .b3-button--white:focus {
background-color: rgba(9, 105, 218, 0.12); background-color: var(--b3-theme-primary-lightest);
box-shadow: inset 0 0 0 1px #0969da; box-shadow: inset 0 0 0 1px var(--b3-theme-primary);
} }
.b3-button--white:active { .b3-button--white:active {
background-color: rgba(9, 105, 218, 0.38); background-color: var(--b3-theme-primary-lighter);
box-shadow: inset 0 0 0 1px #0969da; box-shadow: inset 0 0 0 1px var(--b3-theme-primary);
} }
.b3-text-filed { .b3-text-filed {
width: 240px; width: 240px;
border: 1px solid #5f6368; border: 0;
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--b3-theme-on-surface);
padding: 4px 8px; padding: 4px 8px;
line-height: 20px; line-height: 20px;
box-sizing: border-box; box-sizing: border-box;
color: #202124; color: var(--b3-theme-on-background);
transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
background-color: #f8f9fa; background-color: var(--b3-theme-background);
} }
.b3-text-filed:hover { .b3-text-filed:hover {
border-color: #202124; border-color: var(--b3-theme-on-background);
} }
.b3-text-filed:focus { .b3-text-filed:focus {
outline: none; outline: none;
border-color: #4285f4; box-shadow: inset 0 0 0 1px var(--b3-theme-primary), 0 0 0 3px var(--b3-theme-primary-lightest);
box-shadow: 0 0 0 3px rgb(66 133 244 / 12%);
} }
.b3-snackbar { .b3-snackbar {
@ -113,23 +140,22 @@
line-height: 20px; line-height: 20px;
border-radius: 4px; border-radius: 4px;
padding: 8px 16px; padding: 8px 16px;
color: #fff;
font-size: inherit; font-size: inherit;
background-color: #4285F4; background-color: var(--b3-theme-primary);
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
transform: scale(0.8); transform: scale(0.8);
top: 16px; top: 16px;
position: absolute; position: absolute;
word-break: break-word; word-break: break-word;
max-width: 80vw; color: var(--b3-theme-on-primary);
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
} }
a { a {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
color: #4285f4; color: var(--b3-protyle-inline-link-color);
} }
a:hover { a:hover {
@ -145,43 +171,33 @@
word-break: break-word; word-break: break-word;
background-size: 20px 20px; background-size: 20px 20px;
white-space: pre-wrap; white-space: pre-wrap;
background-color: rgba(27, 31, 35, .05); background-color: var(--b3-protyle-code-background);
}
.ft__on-surface {
color: var(--b3-theme-on-surface);
font-size: 14px;
margin: 16px 0;
} }
</style> </style>
</head> </head>
<body style="margin: 0; <body>
display: flex;
align-items: center;
height: 100%;
justify-content: center;
">
<div style="-webkit-app-region: drag;height: 32px;width: 100%;position: absolute;top: 0;"></div> <div style="-webkit-app-region: drag;height: 32px;width: 100%;position: absolute;top: 0;"></div>
<div style="position: relative;z-index: 2;text-align: center"> <div style="position: relative;z-index: 2;text-align: center">
<h1 style="margin-bottom: 48px;">{{.l4}}</h1> <h1 style="margin-bottom: 48px;color:var(--b3-theme-on-background)">{{.l4}}</h1>
<input class="b3-text-filed" id="authCode" type="password" placeholder="{{.l0}}"/><br> <input class="b3-text-filed" id="authCode" type="password" placeholder="{{.l0}}"/><br>
<div style="position: relative;width: 240px;margin: 8px auto 0;display: none"> <div style="position: relative;width: 240px;margin: 8px auto 0;display: none">
<img id="captchaImg" style="top: 1px;position: absolute;height: 28px;right: 1px;cursor: pointer"> <img id="captchaImg" style="top: 1px;position: absolute;height: 28px;right: 1px;cursor: pointer">
<input id="captcha" class="b3-text-filed" placeholder="{{.l3}}"> <input id="captcha" class="b3-text-filed" placeholder="{{.l3}}">
</div> </div>
<button class="b3-button" onclick="submitAuth()">{{.l1}}</button> <button class="b3-button" onclick="submitAuth()">{{.l1}}</button>
<div style="color: #5f6368;font-size: 14px;margin: 16px 0;"> <div class="ft__on-surface">
{{.l2}} {{.l2}}
</div> </div>
<button class="b3-button b3-button--white" onclick="exitSiYuan()">{{.l5}}</button> <button class="b3-button b3-button--white" onclick="exitSiYuan()">{{.l5}}</button>
</div> </div>
<div style="overflow: hidden; <div style="overflow: hidden;position: absolute;height: 100%;width: 100%;top: 0;left: 0;">
position: absolute; <svg style="top: 50%;left: 50%;width: 200%;transform: translate(-50%, -50%);position: absolute;z-index: 1;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" height="1602"
height: 100%;
width: 100%;
top: 0;
left: 0;">
<svg style="
top: 50%;
left: 50%;
width: 200%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 1;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" height="1602"
viewBox="0 0 2769 1602" width="2769"> viewBox="0 0 2769 1602" width="2769">
<filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1044" width="1044" <filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1044" width="1044"
x="1682" y="558"> x="1682" y="558">
@ -397,6 +413,9 @@
<div class="b3-snackbar__content"></div> <div class="b3-snackbar__content"></div>
</div> </div>
<script> <script>
if ({{.appearanceModeOS}} && window.matchMedia('(prefers-color-scheme: dark)').matches || {{.appearanceMode}} === 1) {
document.body.classList.add('dark')
}
if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') { if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
document.querySelector('.b3-button--white').remove() document.querySelector('.b3-button--white').remove()
} }
@ -507,7 +526,7 @@
} }
// 用于授权页保持连接，避免非常驻内存内核自动退出 https://github.com/siyuan-note/insider/issues/1099 // 用于授权页保持连接，避免非常驻内存内核自动退出 https://github.com/siyuan-note/insider/issues/1099
new WebSocket(window.location.protocol === "https:" ? "wss" : "ws" + "://" + window.location.host + "/ws?app=siyuan&id=auth"); new WebSocket(window.location.protocol === 'https:' ? 'wss' : 'ws' + '://' + window.location.host + '/ws?app=siyuan&id=auth')
</script> </script>
</body> </body>
</html> </html>