/* 日期选择控件（Tabler Date Picker / Litepicker）统一视觉。 * * Users / 公共端由 stylesheet_link_tag :app 自动收录；Admin 布局单独 link 本文件。 * * 颜色刻意不在这里定义： * 占位文字 —— Tabler 的 .form-control::placeholder { color: var(--tblr-tertiary) } * 日历图标 —— Tabler 的 .input-icon-addon { color: var(--tblr-icon-color) } * 两个变量在 Tabler 1.4.0 里都等于 var(--tblr-gray-400)（#9ca3af）， * 也就是「搜索稿件标题」等搜索框占位文字用的同一条规则，复用即可。 */ /* .input-icon 自带 position: relative；日期字段还要能在弹性/栅格里撑满一格。 */ .date-picker-field { display: block; min-width: 0; } .date-picker-field .date-picker-input { width: 100%; /* 整个输入区域（含被 pointer-events: none 的图标盖住的部分）都用来开面板。 */ cursor: pointer; } /* 工作台筛选条里日期框是弹性项，包一层之后宽度要落在外层容器上。原来的 140px 是按 Chrome 原生「年/月/日」量的；现在要放得下「请选择开始日期」七个汉字加右侧 2.5rem 的图标位，定到 180px——与同一行「搜索稿件标题」等宽，不靠输入框 size 属性的固有宽度碰巧凑出来。窄屏由筛选条本身换行处理。 */ .workspace-filter-strip-form .date-picker-field.workspace-filter-date { flex: 0 0 auto; width: 180px; max-width: 100%; } .workspace-filter-strip-form .date-picker-field .date-picker-input { width: 100%; min-width: 0; } /* 浮层本身不再加样式：Litepicker 挂在上（parentEl 默认为空），天然不会被 card/table 的 overflow 裁掉，配色由 Tabler 的 .litepicker 主题变量给全。 */ /* 面板表头右侧的「清除」。Tabler 的 Litepicker 主题片段里没有 .reset-button 这一节（官方 demo 根本没开这个选项），所以这颗按钮的样子全在这里定： - 它是文字不是图标。浮层角上的「×」谁看都是「关掉面板」，Litepicker 自带的那枚「撤销」回转箭头也一样得猜；筛选条通篇是「查询 / 重置 / 筛选」的文字按钮，这里跟着写「清除」，不需要任何解释。 - Litepicker 自带的 .reset-button 只给了个字色，配的还是一抹亮蓝 hover，不是 Tabler 的调子，一并盖掉。 - 不做成链接的样子：没有下划线、hover 也不变蓝。它不是跳转，只是把输入框清空，写成链接会让人以为点了要走到别处去；hover 只把字压深一档表示可点。 - 字号压到与星期行同级，并且比月份标题弱一档：它是这个面板里的次要动作。 - 翻月箭头在没有上/下一月可翻时是 visibility: hidden 而非摘掉，位置仍然占着，所以这颗按钮追加在表头末尾也不会跳来跳去。 */ .litepicker .container__months .month-item-header .reset-button { margin-left: 0.5rem; padding: 0; border: 0; background: none; font-size: 0.75rem; line-height: 1; white-space: nowrap; color: var(--tblr-secondary, #6c757d); text-decoration: none; cursor: pointer !important; } /* 没有值可清时由控制器把 hidden 挂上。 */ .litepicker .container__months .month-item-header .reset-button[hidden] { display: none; } .litepicker .container__months .month-item-header .reset-button:hover { color: var(--tblr-body-color, #182433); text-decoration: none; } /* 「日期 + 时间」变体：日期半边就是上面那套 Tabler Date Picker，时间半边仍是原生 time 输入（分钟级、可键入、自带校验，这是时间语义唯一可靠的来源）。把浏览器自带的下拉指示器藏掉，换成同一套 Tabler 图标位，两半读起来才是一个控件。 */ .datetime-picker-time .form-control::-webkit-calendar-picker-indicator { display: none; } .datetime-picker-time .form-control { width: 100%; cursor: pointer; }