🆗 给打卡时间异常和补签卡加边框样式展示

src/main/resources/static/style.css

@@ -638,6 +638,35 @@ body > div > div.userinfo_dialog > div > div > div input {
   }
 }
 
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+
+@keyframes border-angle-rotate {
+  from { --border-angle: 0deg; }
+  to { --border-angle: 360deg; }
+}
+
+.rainbow {
+  background: linear-gradient(var(--header-bg-color), var(--header-bg-color)) padding-box,
+  conic-gradient(
+          from var(--border-angle),
+          oklch(100% 100% 0deg),
+          oklch(100% 100% 45deg),
+          oklch(100% 100% 90deg),
+          oklch(100% 100% 135deg),
+          oklch(100% 100% 180deg),
+          oklch(100% 100% 225deg),
+          oklch(100% 100% 270deg),
+          oklch(100% 100% 315deg),
+          oklch(100% 100% 360deg)
+  )
+  border-box;
+}
+
 .job-card {
   padding: 20px 16px;
   background-color: var(--header-bg-color);
@@ -645,6 +674,9 @@ body > div > div.userinfo_dialog > div > div > div input {
   cursor: pointer;
   -webkit-transition: .2s;
   transition: .2s;
+  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
+  animation: border-angle-rotate 2s infinite linear;
+  border: 0.5rem solid transparent;
 }
 .job-card:hover {
   -webkit-transform: scale(1.02);
@@ -722,7 +754,7 @@ body > div > div.userinfo_dialog > div > div > div input {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 10px;
-  grid-row-gap: 25px;
+  grid-row-gap: 4px;
 }
 
 .job-card-buttons {