@steedos-labs/content-compliance 1.0.5 → 1.0.6

package/public/dynamic.css

@@ -41,7 +41,33 @@ form {
 
 .mt-6.flex.justify-end {
     order: 6;
-    margin-top: 1rem;
+    margin-top: 24px;
+}
+
+/* 输入框组：去掉上下额外留白，使分隔线、输入框、按钮之间统一为 24px */
+form>.rounded-md.shadow-sm{
+    margin-top: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+/* 邮箱、密码拆成两个独立的圆角输入框，间距 12px */
+form>.rounded-md.shadow-sm>.-mt-px{
+    margin-top: 12px;
+}
+
+#loginId,
+#password{
+    height: 44px;
+    border-radius: 6px !important;
+}
+
+/* 输入框聚焦：主题色边框 + 浅色光晕 */
+#loginId:focus,
+#password:focus{
+    outline: none;
+    border-color: rgb(2 53 90);
+    box-shadow: 0 0 0 2px rgb(2 53 90 / 15%);
 }
 
 .mt-6.flex.justify-end button{
@@ -49,6 +75,7 @@ form {
     background: none;
     color: rgb(2 53 90 / var(--tw-bg-opacity));
     font-weight: 400;
+    height: 44px;
 }
 
 .flex:last-of-type {
@@ -58,18 +85,40 @@ form {
 .flex:last-of-type>a{
     background-color: rgb(2 53 90 / var(--tw-bg-opacity));
     color: #ffffff !important;
-    height: 60px;
+    height: 44px;
 }
 
 .mt-6.mb-6.relative {
     order: 2;
 }
 
+/* 分隔线文字「外部用户请使用以下登录方式」 */
+form>.mt-6.mb-6.relative span{
+    font-size: 14px;
+    color: #374151;
+}
+
 .h-10{
     margin-bottom: 2rem;
     height: auto !important;
 }
 
+/* 登录框与账号申请弹框统一字体：英文字体在前，中文指定苹方 / 微软雅黑（均为系统字体） */
+.relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md,
+.account-apply-modal{
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+        "PingFang SC", "Microsoft YaHei", "Noto Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@media (min-width: 769px) {
+    .relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md{
+        border-radius: 20px;
+        box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+    }
+}
+
 .relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md>div{
     display: flex;
     justify-content: center;
@@ -84,7 +133,8 @@ form {
 }
 
 form{
-    margin-bottom: 40px;
+    /* 隐私勾选行 bottom: 40px、行高 20px，此处 44px 使其与上方按钮间距为 24px */
+    margin-bottom: 44px;
 }
 
 .agreement-container{
@@ -94,16 +144,62 @@ form{
     /* bottom: -30px; */
     bottom: 40px;
     font-size: 12px;
+    line-height: 20px;
+    color: #1f2937;
+}
+
+.agreement-container label{
+    vertical-align: middle;
+    cursor: pointer;
 }
 
 .agreement-container a{
-    color: rgb(2 53 90 / var(--tw-bg-opacity)) !important;
+    color: rgb(2 53 90) !important;
     background-color: none !important;
+    text-decoration-line: none;
+    margin: 0 2px;
+}
+
+.agreement-container a:hover{
     text-decoration-line: underline;
 }
 
-.agreement-container input{
-    margin-right: 5px;
+/* 复选框：浅灰描边圆角方框，勾选后为主题色 */
+.agreement-container input[type="checkbox"]{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    margin: 0 5px 0 0;
+    vertical-align: middle;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+    position: relative;
+    /* 中文字形偏下，略微下移与文字居中对齐 */
+    top: 3px;
+}
+
+.agreement-container input[type="checkbox"]:hover{
+    border-color: rgb(2 53 90);
+}
+
+.agreement-container input[type="checkbox"]:checked{
+    border-color: rgb(2 53 90);
+    background: rgb(2 53 90);
+}
+
+.agreement-container input[type="checkbox"]:checked::after{
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+    border: solid #ffffff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
 }
 
 .privacy-message{
@@ -121,20 +217,24 @@ input{
 .account-apply-btn{
     z-index: 999;
     position: absolute;
-    right: 2.5rem;
-    bottom: 34px;
-    padding: 2px 12px;
+    /* 减去左右内边距，使文字与输入框右边缘对齐 */
+    right: calc(2.5rem - 8px);
+    /* 与左侧隐私勾选行垂直居中对齐 */
+    bottom: 38px;
+    padding: 2px 8px;
     font-size: 12px;
     line-height: 20px;
-    color: rgb(2 53 90);
-    background: #ffffff;
-    border: solid 1px rgb(2 53 90);
+    color: #4b5563;
+    background: transparent;
+    border: none;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
 }
 
 .account-apply-btn:hover{
-    background: rgb(2 53 90 / 8%);
+    color: rgb(2 53 90);
+    background: #f3f4f6;
 }
 
 .account-apply-modal{
@@ -272,5 +372,5 @@ input{
     display: none !important;
 }
 .w-full.border.border-gray-300.justify-center.hover\:bg-gray-50.text-gray-800.py-2.px-4.rounded.inline-flex.items-center span{
-    font-weight: bold;
+    font-weight: 600;
 }