@opentiny/vue-theme/month-table/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-month-table{--tv-MonthTable-font-size:var(--tv-font-size-default, 14px);--tv-MonthTable-line-height:var(--tv-line-height-number, 1.5);--tv-MonthTable-text-color:var(--tv-color-text, #191919);--tv-MonthTable-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-MonthTable-td-height:var(--tv-size-height-sm, 28px);--tv-MonthTable-td-padding:calc((var(--tv-MonthTable-td-height) - var(--tv-MonthTable-line-height) * var(--tv-MonthTable-font-size)) / 2) 0;--tv-MonthTable-cell-border-radius:var(--tv-border-radius-brand, 999px);--tv-MonthTable-cell-border-radius-start:var(--tv-border-radius-brand, 999px) 0 0 var(--tv-border-radius-brand, 999px);--tv-MonthTable-cell-border-radius-end:0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0;--tv-MonthTable-cell-border-radius-first:var(--tv-border-radius-brand, 999px) 0 0 var(--tv-border-radius-brand, 999px);--tv-MonthTable-cell-border-radius-last:0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0;--tv-MonthTable-cell-border-color-today:var(--tv-color-border-active, #191919);--tv-MonthTable-td-text-color-emphasize:var(--tv-color-text-inverse-active, #ffffff);--tv-MonthTable-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-MonthTable-cell-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-MonthTable-bg-color-hover:var(--tv-color-bg-hover-3, #deecff);--tv-MonthTable-bg-color-emphasize:var(--tv-color-bg-active-control, #1476ff);--tv-DateTable-text-color:var(--tv-color-text, #191919);--tv-DateTable-font-size:var(--tv-font-size-default, 14px);--tv-DateTable-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-DateTable-td-padding:var(--tv-space-sm, 4px) 0;--tv-DateTable-td-width:36px;--tv-DateTable-td-height:34px;--tv-DateTable-td-span-width:28px;--tv-DateTable-td-span-height:28px;--tv-DateTable-th-text-color:var(--tv-color-text-weaken, #808080);--tv-DateTable-td-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-border-radius-current-select:var(--tv-border-radius-brand, 999px);--tv-DateTable-td-pre-month-text-color:var(--tv-color-text-weaken, #808080);--tv-DateTable-td-normal-text-color:var(--tv-color-text-inverse, #ffffff);--tv-DateTable-td-bg-color-range-selected:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-week-bg-color-current-select:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-week-bg-color-current-hover:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-hover-bg-color:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-DateTable-range-bg-color:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-range-hover-bg-color:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-bg-color-current-select:var(--tv-color-bg-active-control, #1476ff);--tv-DateTable-td-today-width:var(--tv-size-height-sm, 28px);--tv-DateTable-td-today-height:var(--tv-size-height-sm, 28px);--tv-DateTable-td-today-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-td-today-circle-border-color:var(--tv-color-border-active, #191919);--tv-DateTable-td-div-height:var(--tv-size-height-sm, 28px);--tv-DateTable-td-div-width:28px;--tv-DateTable-td-span-top:4px;--tv-DateTable-start-date-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-cell-border-radius-selected:var(--tv-border-radius-brand, 999px);--tv-DateTable-tr-line-height:var(--tv-line-height-number, 1.5);--tv-DateTable-td-border-radius-disabled:var(--tv-border-radius-brand, 999px);--tv-DateTable-week-height:var(--tv-size-height-md, 32px);width:100%;font-size:var(--tv-MonthTable-font-size);margin:-1px;border-collapse:collapse}.tiny-month-table td,.tiny-month-table tr{text-align:center;padding:16px 0;cursor:pointer}.tiny-month-table td.current,.tiny-month-table tr.current{padding-left:3px;padding-right:3px}.tiny-month-table td div,.tiny-month-table tr div{height:var(--tv-MonthTable-td-height);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 4px}.tiny-month-table td.today .cell,.tiny-month-table tr.today .cell{color:var(--tv-MonthTable-text-color);-webkit-box-shadow:0 0 1px 1px var(--tv-MonthTable-cell-border-color-today);box-shadow:0 0 1px 1px var(--tv-MonthTable-cell-border-color-today)}.tiny-month-table td.today.end-date .cell,.tiny-month-table td.today.start-date .cell,.tiny-month-table tr.today.end-date .cell,.tiny-month-table tr.today.start-date .cell{color:var(--tv-MonthTable-td-text-color-emphasize);-webkit-box-shadow:none;box-shadow:none}.tiny-month-table td.disabled .cell,.tiny-month-table tr.disabled .cell{background-color:var(--tv-MonthTable-bg-color-disabled);cursor:not-allowed;color:var(--tv-MonthTable-cell-color-disabled)}.tiny-month-table td.disabled .cell:hover,.tiny-month-table tr.disabled .cell:hover{cursor:not-allowed;background-color:var(--tv-MonthTable-bg-color-disabled)}.tiny-month-table td .cell,.tiny-month-table tr .cell{width:100%;height:var(--tv-MonthTable-td-height);padding:var(--tv-MonthTable-td-padding);line-height:var(--tv-MonthTable-line-height);display:block;color:var(--tv-MonthTable-text-color)}.tiny-month-table td .cell:hover,.tiny-month-table tr .cell:hover{background:var(--tv-MonthTable-bg-color-hover);-webkit-box-shadow:none;box-shadow:none}.tiny-month-table td.in-range div,.tiny-month-table td.in-range div:hover,.tiny-month-table tr.in-range div,.tiny-month-table tr.in-range div:hover{background-color:var(--tv-MonthTable-bg-color-hover)}.tiny-month-table td.in-range:first-of-type div,.tiny-month-table tr.in-range:first-of-type div{border-radius:var(--tv-MonthTable-cell-border-radius-first)}.tiny-month-table td.in-range:first-of-type.end-date div,.tiny-month-table tr.in-range:first-of-type.end-date div{border-radius:var(--tv-MonthTable-cell-border-radius);padding-left:0}.tiny-month-table td.in-range:last-of-type div,.tiny-month-table tr.in-range:last-of-type div{border-radius:var(--tv-MonthTable-cell-border-radius-last)}.tiny-month-table td.end-date div,.tiny-month-table td.start-date div,.tiny-month-table tr.end-date div,.tiny-month-table tr.start-date div{color:var(--tv-MonthTable-td-text-color-emphasize)}.tiny-month-table td.end-date.start-date div,.tiny-month-table td.start-date.start-date div,.tiny-month-table tr.end-date.start-date div,.tiny-month-table tr.start-date.start-date div{border-radius:var(--tv-MonthTable-cell-border-radius-start);padding-left:0}.tiny-month-table td.end-date.end-date div,.tiny-month-table td.start-date.end-date div,.tiny-month-table tr.end-date.end-date div,.tiny-month-table tr.start-date.end-date div{border-radius:var(--tv-MonthTable-cell-border-radius-end);padding-right:0}.tiny-month-table td.end-date .cell,.tiny-month-table td.start-date .cell,.tiny-month-table tr.end-date .cell,.tiny-month-table tr.start-date .cell{color:var(--tv-MonthTable-td-text-color-emphasize);background-color:var(--tv-MonthTable-bg-color-emphasize)}.tiny-month-table td:not(.in-range) .cell,.tiny-month-table tr:not(.in-range) .cell{-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;border-radius:var(--tv-MonthTable-cell-border-radius)}.tiny-month-table td.current:not(.disabled) .cell,.tiny-month-table td.current:not(.disabled) .cell:hover,.tiny-month-table tr.current:not(.disabled) .cell,.tiny-month-table tr.current:not(.disabled) .cell:hover{color:var(--tv-DateTable-td-normal-text-color);background:var(--tv-MonthTable-bg-color-emphasize);-webkit-box-shadow:none;box-shadow:none}