Update: Js 4 Log.html
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
/* static/css/input.css */
|
||||
@import "tailwindcss";
|
||||
|
||||
/* @import "./css/flatpickr.min.css"; */
|
||||
/* =================================================================== */
|
||||
/* [核心] 定义 shadcn/ui 的设计系统变量 */
|
||||
/* =================================================================== */
|
||||
@@ -97,6 +97,155 @@
|
||||
focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
|
||||
disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------ */
|
||||
/* Custom Flatpickr Theme using shadcn/ui variables */
|
||||
/* ------------------------------------------------ */
|
||||
|
||||
.flatpickr-calendar {
|
||||
/* --- 主题样式 --- */
|
||||
@apply bg-background text-foreground rounded-lg shadow-lg border border-border w-auto font-sans;
|
||||
animation: var(--animation-panel-in);
|
||||
width: 200px;
|
||||
/* --- 核心结构样式 --- */
|
||||
display: none;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
|
||||
}
|
||||
.flatpickr-calendar.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flatpickr-calendar.not-ready {
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.flatpickr-calendar.static {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.flatpickr-calendar.static { position: relative; top: auto; left: auto; display: block; visibility: visible; opacity: 1; }
|
||||
.flatpickr-calendar.not-ready { top: 0; left: 0; visibility: hidden; }
|
||||
/* 月份导航区域 */
|
||||
.flatpickr-months {
|
||||
@apply flex items-center bg-transparent p-0 border-b border-zinc-500/30;
|
||||
}
|
||||
.flatpickr-month { @apply h-auto pt-2 pb-1; }
|
||||
.flatpickr-current-month {
|
||||
@apply flex flex-1 items-center justify-center text-foreground font-semibold text-sm h-auto;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .numInputWrapper {
|
||||
@apply ml-0;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .numInputWrapper input.numInput {
|
||||
|
||||
@apply w-14 text-center font-semibold bg-transparent border-0 p-0 text-sm text-foreground;
|
||||
|
||||
/* 移除默认的浏览器样式和聚焦时的轮廓 */
|
||||
@apply appearance-none focus:outline-none focus:ring-0;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
/* 强制移除数字输入框在 Chrome, Safari, Edge 等 Webkit 浏览器中的上下箭头 */
|
||||
.flatpickr-current-month .numInputWrapper input.numInput::-webkit-outer-spin-button,
|
||||
.flatpickr-current-month .numInputWrapper input.numInput::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.flatpickr-current-month .cur-month { @apply font-semibold; }
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
|
||||
@apply w-[5.5rem] font-semibold bg-transparent border-0 p-0 text-sm text-foreground text-right;
|
||||
|
||||
@apply appearance-none focus:outline-none focus:ring-0;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; /* 确保月份名不换行 */
|
||||
}
|
||||
option.flatpickr-monthDropdown-month {
|
||||
@apply bg-background text-foreground border-0;
|
||||
@apply dark:bg-zinc-800 dark:text-zinc-200;
|
||||
}
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months,
|
||||
.flatpickr-current-month .numInputWrapper input.numInput {
|
||||
@apply text-sm pl-0 ;
|
||||
}
|
||||
/* 导航箭头 */
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
@apply inline-flex items-center justify-center whitespace-nowrap rounded-md pt-2 pb-1 text-sm font-medium transition-colors
|
||||
focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
hover:text-accent-foreground
|
||||
h-7 w-7 flex-shrink-0;
|
||||
position: relative;
|
||||
}
|
||||
.flatpickr-prev-month svg,
|
||||
.flatpickr-next-month svg {
|
||||
@apply h-3 w-3 hover:h-4 hover:w-4 fill-zinc-500;
|
||||
}
|
||||
|
||||
/* 星期标题 */
|
||||
.flatpickr-weekdaycontainer {
|
||||
@apply flex justify-around p-1;
|
||||
}
|
||||
span.flatpickr-weekday {
|
||||
@apply flex-1 text-center text-muted-foreground font-medium;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
/* 日期网格 */
|
||||
.dayContainer {
|
||||
@apply flex flex-wrap p-1 pt-0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flatpickr-day {
|
||||
@apply w-4 h-6.5 flex items-center justify-center rounded-full border-0 text-foreground transition-colors flex-shrink-0; /* <--- 从 w-9 h-9 缩小 */
|
||||
flex-basis: 14.2857%;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem; /* 介于 text-xs 和 text-sm 之间 */
|
||||
}
|
||||
.flatpickr-day:hover,
|
||||
.flatpickr-day:focus { @apply bg-accent text-accent-foreground outline-none; }
|
||||
.flatpickr-day.today { @apply border border-primary; }
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover {
|
||||
@apply bg-primary text-primary-foreground;
|
||||
}
|
||||
.flatpickr-day.inRange { @apply bg-accent rounded-none shadow-none; }
|
||||
.flatpickr-day.startRange { @apply rounded-l-full; }
|
||||
.flatpickr-day.endRange { @apply rounded-r-full; }
|
||||
.flatpickr-day.disabled,
|
||||
.flatpickr-day.disabled:hover { @apply bg-transparent text-muted-foreground/50 cursor-not-allowed; }
|
||||
.flatpickr-day.nextMonthDay, .flatpickr-day.prevMonthDay { @apply text-muted-foreground/50; }
|
||||
.flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay:hover { @apply bg-accent; }
|
||||
|
||||
/* 清除按钮 */
|
||||
.flatpickr-calendar .flatpickr-clear-button {
|
||||
@apply h-6 py-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium transition-colors
|
||||
focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
text-primary underline-offset-4 hover:text-sm
|
||||
w-full rounded-t-none border-t border-zinc-500/20;
|
||||
}
|
||||
}
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@@ -752,14 +901,18 @@
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
|
||||
/* =================================================================== */
|
||||
/* 自定义 table 样式 (Custom SweetAlert2 Styles) */
|
||||
/* =================================================================== */
|
||||
@layer components {
|
||||
/* --- [新增] 可复用的表格组件样式 --- */
|
||||
/* --- 可复用的表格组件样式 --- */
|
||||
.table {
|
||||
@apply w-full caption-bottom text-sm;
|
||||
}
|
||||
.table-header {
|
||||
/* 使用语义化颜色，自动适应暗色模式 */
|
||||
@apply sticky top-0 z-10 border-b border-border bg-muted/50;
|
||||
@apply sticky top-0 z-10 border-b border-border bg-zinc-200 dark:bg-zinc-900;
|
||||
}
|
||||
.table-header .table-row {
|
||||
/* 表头的 hover 效果通常与数据行不同，或者没有 */
|
||||
@@ -769,7 +922,7 @@
|
||||
@apply [&_tr:last-child]:border-0;
|
||||
}
|
||||
.table-row {
|
||||
@apply border-b border-border transition-colors hover:bg-muted/80;
|
||||
@apply border-b border-border transition-colors hover:bg-muted;
|
||||
}
|
||||
.table-head-cell {
|
||||
@apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
|
||||
@@ -777,4 +930,5 @@
|
||||
.table-cell {
|
||||
@apply p-4 align-middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user