优化加入我们录取进度查询表单样式

增加文章详情页文章筛选方式
用户点击文章标签时自动筛选出对应标签文章

assets/css/content.css

@@ -637,21 +637,75 @@
 .news-archive-tools {
   margin-top: 14px;
   display: grid;
-  grid-template-columns: 1fr minmax(240px, 320px);
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
   gap: 12px;
-  align-items: center;
+  align-items: end;
 }
 
-.news-archive-tools-single {
-  grid-template-columns: minmax(240px, 420px);
-  justify-content: end;
-  margin-left: auto;
+.news-archive-filter-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: end;
+}
+
+.news-archive-filter-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.news-archive-filter-field {
+  display: grid;
+  gap: 4px;
+}
+
+.news-archive-filter-field span {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+
+.news-archive-filter-form input[type="date"],
+.news-archive-filter-form select {
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  padding: 0 11px;
+  font-size: 0.85rem;
+}
+
+.news-archive-filter-form input[type="date"]:focus,
+.news-archive-filter-form select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.news-archive-filter-form button {
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.86rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.news-archive-filter-form button:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .news-archive-search {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px;
+  align-self: end;
 }
 
 .news-archive-search input[type="search"] {
@@ -687,6 +741,24 @@
   color: var(--color-primary);
 }
 
+html:not([data-theme="dark"]) .news-archive-filter-form input[type="date"],
+html:not([data-theme="dark"]) .news-archive-filter-form select {
+  color-scheme: light;
+}
+
+[data-theme="dark"] .news-archive-filter-form input[type="date"],
+[data-theme="dark"] .news-archive-filter-form select {
+  background: color-mix(in srgb, var(--bg-card) 92%, #000 8%);
+  color: var(--text-primary);
+  color-scheme: dark;
+}
+
+[data-theme="dark"] .news-archive-filter-form select option,
+[data-theme="dark"] .news-archive-filter-form select optgroup {
+  background-color: #0f1724;
+  color: var(--text-primary);
+}
+
 .news-archive-layout {
   margin-top: 22px;
   display: grid;
@@ -1005,9 +1077,13 @@
     grid-template-columns: 1fr;
   }
 
-  .news-archive-tools-single {
+  .news-archive-filter-form {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .news-archive-filter-fields {
     grid-template-columns: 1fr;
-    margin-left: 0;
   }
 
   .news-archive-search {

assets/css/join-page.css

@@ -660,15 +660,72 @@
 }
 
 .join-form-card {
-  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
-  border-radius: 14px;
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--bg-card) 82%, #1b2430 18%) 0%,
-    color-mix(in srgb, var(--bg-card) 94%, transparent) 100%
-  );
+  position: relative;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-default) 72%);
+  border-radius: 6px;
+  background:
+    linear-gradient(
+      118deg,
+      color-mix(in srgb, var(--color-primary) 12%, transparent) 0%,
+      transparent 36%
+    ),
+    radial-gradient(
+      120% 80% at 100% 0%,
+      color-mix(in srgb, var(--color-primary) 14%, transparent) 0%,
+      transparent 52%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-card) 84%, #0f1a2b 16%) 0%,
+      color-mix(in srgb, var(--bg-card) 95%, transparent) 100%
+    );
   padding: 18px;
-  box-shadow: 0 16px 30px -24px color-mix(in srgb, #000000 65%, transparent);
+  box-shadow:
+    0 22px 40px -32px color-mix(in srgb, #000000 78%, transparent),
+    inset 0 1px 0 color-mix(in srgb, #9bc9ff 18%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, #0a101a 70%, transparent);
+}
+
+.join-form-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--color-primary) 8%, transparent) 0 1px,
+      transparent 1px 13px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 7%, transparent) 0 1px,
+      transparent 1px 18px
+    );
+  opacity: 0.26;
+}
+
+.join-form-card::after {
+  content: "";
+  position: absolute;
+  inset: 10px;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 72%, transparent), transparent)
+      top left / 88px 1px no-repeat,
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 72%, transparent), transparent)
+      top left / 1px 44px no-repeat,
+    linear-gradient(270deg, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent)
+      bottom right / 66px 1px no-repeat,
+    linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent)
+      bottom right / 1px 30px no-repeat;
+  opacity: 0.65;
+}
+
+.join-form-card > * {
+  position: relative;
+  z-index: 1;
 }
 
 .join-form-card + .join-panel-title {
@@ -712,18 +769,55 @@
 
 .join-progress-query-field input {
   width: 100%;
-  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
-  color: var(--text-primary);
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent) !important;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-card) 90%, transparent) !important;
+  color: var(--text-primary) !important;
   padding: 9px 10px;
   line-height: 1.3;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
+}
+
+.join-progress-query-field input::placeholder {
+  color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-primary) 22%);
+  opacity: 1;
+}
+
+.join-progress-query-field input:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border-default) 58%) !important;
 }
 
 .join-progress-query-field input:focus {
   outline: none;
-  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-default) 45%);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
+  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-default) 45%) !important;
+  background: color-mix(in srgb, var(--bg-card) 90%, transparent) !important;
+  color: var(--text-primary) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
+}
+
+.join-progress-query-field input:-webkit-autofill,
+.join-progress-query-field input:-webkit-autofill:hover,
+.join-progress-query-field input:-webkit-autofill:focus,
+.join-progress-query-field input:autofill {
+  -webkit-text-fill-color: var(--text-primary) !important;
+  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg-card) 90%, transparent) inset !important;
+  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg-card) 90%, transparent) inset !important;
+  background: color-mix(in srgb, var(--bg-card) 90%, transparent) !important;
+  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent) !important;
+  caret-color: var(--text-primary) !important;
+  transition: background-color 9999s ease-out 0s !important;
+}
+
+[data-theme="dark"] .join-progress-query-form,
+[data-theme="dark"] .join-progress-query-field input {
+  color-scheme: dark;
+}
+
+[data-theme="light"] .join-progress-query-form,
+[data-theme="light"] .join-progress-query-field input {
+  color-scheme: light;
 }
 
 .join-progress-query-actions {
@@ -1060,12 +1154,26 @@
 }
 
 [data-theme="light"] .join-form-card {
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, #ffffff 94%, #e8f2ff 6%) 0%,
-    color-mix(in srgb, #ffffff 98%, #e8f2ff 2%) 100%
-  );
-  box-shadow: 0 16px 30px -24px rgba(120, 140, 165, 0.35);
+  border-color: color-mix(in srgb, #8bbcff 52%, var(--border-default) 48%);
+  background:
+    linear-gradient(
+      118deg,
+      color-mix(in srgb, #d9eaff 42%, transparent) 0%,
+      transparent 40%
+    ),
+    radial-gradient(
+      140% 90% at 100% 0%,
+      color-mix(in srgb, #dbe9ff 48%, transparent) 0%,
+      transparent 54%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, #ffffff 94%, #edf5ff 6%) 0%,
+      color-mix(in srgb, #ffffff 98%, #edf5ff 2%) 100%
+    );
+  box-shadow:
+    0 18px 34px -26px rgba(92, 126, 172, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 
 [data-theme="light"] .join-form-content .frm_style_formidable-style.with_frm_style input[type="text"],