Agent task: 开发: Phase A+E+F — CSS 全量改造 (mnote-web)

2026-06-16 01:19:04 +08:00
parent 1f483e3d7c
commit 1a3db17eea
13 changed files with 7539 additions and 6552 deletions
@@ -0,0 +1,186 @@
+/* ===== 认证页面 ===== */
+.mnote-auth {
+  position: relative;
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 48px 20px;
+  background: #FFFFFF;
+}
+
+.mnote-auth-brand {
+  position: fixed;
+  top: 28px;
+  left: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: #37352F;
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: 0;
+}
+
+.mnote-auth-brand:hover {
+  color: #37352F;
+}
+
+.mnote-auth-brand-mark {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #37352F;
+  color: #FFF;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mnote-auth-panel {
+  width: min(100%, 360px);
+  color: #37352F;
+}
+
+.mnote-auth-heading {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.mnote-auth-heading h1 {
+  margin: 0 0 8px;
+  color: #37352F;
+  font-size: 28px;
+  font-weight: 650;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.mnote-auth-heading p {
+  color: #9B9A97;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.mnote-auth-form {
+  display: grid;
+  gap: 12px;
+}
+
+.mnote-auth-field {
+  display: grid;
+  gap: 7px;
+  color: #6D6D69;
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+.mnote-auth-field input {
+  width: 100%;
+  height: 42px;
+  border: 1px solid #DCDAD6;
+  border-radius: 4px;
+  background: #FFF;
+  color: #37352F;
+  font: 400 15px/1.4 var(--wolai-font-sans);
+  letter-spacing: 0;
+  outline: none;
+  padding: 0 12px;
+}
+
+.mnote-auth-field input::placeholder {
+  color: #B5B1AA;
+}
+
+.mnote-auth-field input:focus {
+  border-color: #A8A39A;
+  box-shadow: 0 0 0 2px rgba(55, 53, 47, 0.08);
+}
+
+.mnote-auth-message {
+  min-height: 20px;
+  color: #9B9A97;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+}
+
+.mnote-auth-message[data-type="error"] {
+  color: #D14343;
+}
+
+.mnote-auth-message[data-type="success"] {
+  color: #23834D;
+}
+
+.mnote-auth-submit {
+  width: 100%;
+  height: 42px;
+  border: 0;
+  border-radius: 4px;
+  background: #37352F;
+  color: #FFF;
+  cursor: pointer;
+  font: 600 15px/1 var(--wolai-font-sans);
+  letter-spacing: 0;
+}
+
+.mnote-auth-submit:hover {
+  background: #2F2D29;
+}
+
+.mnote-auth-submit:disabled {
+  cursor: default;
+  opacity: .58;
+}
+
+.mnote-auth-quick-login {
+  width: 100%;
+  height: 42px;
+  border: 1px solid #DCDAD6;
+  border-radius: 4px;
+  background: #FFF;
+  color: #37352F;
+  cursor: pointer;
+  font: 500 14px/1 var(--wolai-font-sans);
+  letter-spacing: 0;
+}
+
+.mnote-auth-quick-login:hover {
+  background: #F7F7F5;
+}
+
+.mnote-auth-quick-login:disabled {
+  cursor: default;
+  opacity: .58;
+}
+
+.mnote-auth-switch {
+  display: block;
+  margin: 18px auto 0;
+  border: 0;
+  background: transparent;
+  color: #6D6D69;
+  cursor: pointer;
+  font: 400 14px/1.4 var(--wolai-font-sans);
+  letter-spacing: 0;
+}
+
+.mnote-auth-switch:hover {
+  color: #37352F;
+}
+
+@media (max-width: 640px) {
+  .mnote-auth {
+    align-items: start;
+    padding-top: 132px;
+  }
+
+  .mnote-auth-brand {
+    top: 24px;
+    left: 22px;
+  }
+}
+