@seafile/seafile-calendar 1.0.15 → 1.0.17

package/assets/index.css

@@ -19,7 +19,7 @@
   position: absolute;
   width: 100%;
   top: 34px;
-  background-color: white;
+  background-color: var(--rc-calendar-popover-bg, #fff);
   height: 217px;
 }
 .rc-calendar-time-picker-panel {
@@ -60,7 +60,7 @@
 .rc-calendar-input {
   border: 1px solid transparent;
   width: 100%;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   cursor: text;
   line-height: 1.5;
   outline: 0;
@@ -93,10 +93,10 @@
       align-items: center;
 }
 .rc-calendar-clear-btn svg {
-  color: #666;
+  color: var(--rc-calendar-icon-color, #666);
 }
 .rc-calendar-clear-btn:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
   border-radius: 4px;
 }
 .rc-calendar-picker {
@@ -108,6 +108,67 @@
 .rc-calendar-picker-hidden {
   display: none;
 }
+.rc-calendar {
+  --rc-calendar-sf-orange: #FF8000;
+  --rc-calendar-sf-orange-2: #ED7109;
+  --rc-calendar-popover-bg: #fff;
+  --rc-calendar-body-color: #212529;
+  --rc-calendar-icon-color: #666;
+  --rc-calendar-icon-secondary-color: #999;
+  --rc-calendar-icon-btn-hover-bg-color: rgba(0, 0, 0, 0.04);
+  --rc-calendar-input-border-color: rgba(0, 40, 100, 0.12);
+  --rc-calendar-input-focus-border-color: #3e84f7;
+  --rc-calendar-divider-color: #eee;
+  --rc-calendar-disabled-bg: rgba(0, 0, 0, 0.05);
+  --rc-calendar-disabled-color: #c2c2c2;
+  --rc-calendar-out-range-color: #c2c2c2;
+}
+@media (prefers-color-scheme: dark) {
+  .rc-calendar {
+    --rc-calendar-popover-bg: #1c1d1f;
+    --rc-calendar-body-color: rgba(255, 255, 255, 0.9);
+    --rc-calendar-icon-color: rgba(255, 255, 255, 0.7);
+    --rc-calendar-icon-secondary-color: rgba(255, 255, 255, 0.5);
+    --rc-calendar-icon-btn-hover-bg-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-input-border-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-input-focus-border-color: #3e84f7;
+    --rc-calendar-divider-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-disabled-bg: rgba(255, 255, 255, 0.08);
+    --rc-calendar-disabled-color: rgba(255, 255, 255, 0.2);
+    --rc-calendar-out-range-color: rgba(255, 255, 255, 0.2);
+  }
+}
+/* Explicit theme values take precedence over the system preference. */
+[data-bs-theme='light'] .rc-calendar,
+.rc-calendar[data-bs-theme='light'] {
+  --rc-calendar-sf-orange: #FF8000;
+  --rc-calendar-sf-orange-2: #ED7109;
+  --rc-calendar-popover-bg: #fff;
+  --rc-calendar-body-color: #212529;
+  --rc-calendar-icon-color: #666;
+  --rc-calendar-icon-secondary-color: #999;
+  --rc-calendar-icon-btn-hover-bg-color: rgba(0, 0, 0, 0.04);
+  --rc-calendar-input-border-color: rgba(0, 40, 100, 0.12);
+  --rc-calendar-input-focus-border-color: #3e84f7;
+  --rc-calendar-divider-color: #eee;
+  --rc-calendar-disabled-bg: rgba(0, 0, 0, 0.05);
+  --rc-calendar-disabled-color: #c2c2c2;
+  --rc-calendar-out-range-color: #c2c2c2;
+}
+[data-bs-theme='dark'] .rc-calendar,
+.rc-calendar[data-bs-theme='dark'] {
+  --rc-calendar-popover-bg: #1c1d1f;
+  --rc-calendar-body-color: rgba(255, 255, 255, 0.9);
+  --rc-calendar-icon-color: rgba(255, 255, 255, 0.7);
+  --rc-calendar-icon-secondary-color: rgba(255, 255, 255, 0.5);
+  --rc-calendar-icon-btn-hover-bg-color: rgba(255, 255, 255, 0.1);
+  --rc-calendar-input-border-color: rgba(255, 255, 255, 0.1);
+  --rc-calendar-input-focus-border-color: #3e84f7;
+  --rc-calendar-divider-color: rgba(255, 255, 255, 0.1);
+  --rc-calendar-disabled-bg: rgba(255, 255, 255, 0.08);
+  --rc-calendar-disabled-color: rgba(255, 255, 255, 0.2);
+  --rc-calendar-out-range-color: rgba(255, 255, 255, 0.2);
+}
 .rc-calendar-picker-slide-up-enter {
   animation-duration: .3s;
   animation-fill-mode: both;
@@ -214,7 +275,7 @@
   list-style: none;
   font-size: 14px;
   text-align: left;
-  background-color: #fff;
+  background-color: var(--rc-calendar-popover-bg, #fff);
   border-radius: 8px;
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
@@ -256,7 +317,7 @@
 }
 .rc-calendar-time-input-col {
   width: 89px;
-  border-left: 1px solid #eee;
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-date-input,
 .rc-calendar-time-input {
@@ -273,19 +334,20 @@
   height: 32px;
   line-height: 32px;
   width: 100%;
-  border: 1px solid #eee;
+  border: 1px solid var(--rc-calendar-input-border-color);
+  box-shadow: none;
   border-radius: 4px;
 }
 .rc-calendar-date-input input {
-  padding: 4px 16px;
+  padding: 0px 12px;
 }
 .rc-calendar-time-input input {
-  padding: 4px 6px;
+  padding: 0px 12px;
 }
 .rc-calendar-date-input input:focus,
 .rc-calendar-time-input input:focus {
-  border-color: #1991eb;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+  border-color: var(--rc-calendar-input-focus-border-color, #3e84f7);
+  box-shadow: none;
   outline: none;
 }
 .rc-calendar-header {
@@ -318,7 +380,7 @@
 }
 .rc-calendar-header > a:hover {
   cursor: pointer;
-  color: #ed7109;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-prev-month-btn {
   position: absolute;
@@ -334,7 +396,7 @@
   display: inline-block;
   font-size: 14px;
   font-weight: 600;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   padding: 0 8px;
   line-height: 48px;
 }
@@ -342,13 +404,13 @@
 .rc-calendar-month-select:hover,
 .rc-calendar-day-select:hover {
   cursor: pointer;
-  color: #ff9800;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-year-select.rc-calendar-time-status:hover,
 .rc-calendar-month-select.rc-calendar-time-status:hover,
 .rc-calendar-day-select.rc-calendar-time-status:hover {
   cursor: pointer;
-  color: #666;
+  color: var(--rc-calendar-icon-color, #666);
 }
 .rc-calendar-prev-month-btn,
 .rc-calendar-next-month-btn,
@@ -360,7 +422,7 @@
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
-  color: #999;
+  color: var(--rc-calendar-icon-secondary-color, #999);
   font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
   font-size: 16px;
   display: -ms-flexbox;
@@ -376,8 +438,8 @@
 .rc-calendar-next-month-btn:hover,
 .rc-calendar-prev-year-btn:hover,
 .rc-calendar-next-year-btn:hover {
-  color: #999;
-  background-color: rgba(0, 0, 0, 0.04);
+  color: var(--rc-calendar-icon-secondary-color, #999);
+  background-color: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
 }
 .rc-calendar-next-year-btn {
   right: 0;
@@ -390,6 +452,7 @@
   height: 260px;
 }
 .rc-calendar table {
+  table-layout: auto;
   border-collapse: collapse;
   max-width: 100%;
   background-color: transparent;
@@ -398,6 +461,9 @@
 .rc-calendar table td {
   padding: 0;
 }
+.rc-calendar table tr {
+  height: 1.75rem !important;
+}
 .rc-calendar table,
 .rc-calendar td,
 .rc-calendar th,
@@ -417,7 +483,7 @@
 .rc-calendar-column-header-inner {
   display: block;
   font-weight: normal;
-  color: #999;
+  color: var(--rc-calendar-icon-secondary-color, #999);
 }
 .rc-calendar-week-number-header .rc-calendar-column-header-inner {
   display: none;
@@ -428,7 +494,7 @@
 }
 .rc-calendar-date {
   display: block;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   border-radius: 4px;
   width: 32px;
   height: 32px;
@@ -439,25 +505,26 @@
   margin: 2px;
 }
 .rc-calendar-date:hover {
-  background: #f5f5f5;
+  background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
   border-radius: 50%;
   cursor: pointer;
 }
 .rc-calendar-selected-date .rc-calendar-date {
-  background: #ff9800;
+  background: var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 50%;
   color: #fff;
 }
 .rc-calendar-selected-date .rc-calendar-date:hover {
-  background: #ff9800;
+  background: var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 50%;
 }
 .rc-calendar-disabled-cell .rc-calendar-date {
   cursor: not-allowed;
-  background: #f3f3f3;
+  background: var(--rc-calendar-disabled-bg);
   border-radius: 0;
-  color: #bcbcbc;
+  color: var(--rc-calendar-disabled-color);
   width: auto;
+  margin: 2px 0;
 }
 .rc-calendar-disabled-cell-first-of-row .rc-calendar-date {
   border-bottom-left-radius: 4px;
@@ -469,15 +536,15 @@
 }
 .rc-calendar-last-month-cell .rc-calendar-date,
 .rc-calendar-next-month-btn-day .rc-calendar-date {
-  color: #bbb;
+  color: var(--rc-calendar-out-range-color);
 }
 .rc-calendar-today .rc-calendar-date {
-  border: 1px solid #ff9800;
+  border: 1px solid var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 50%;
 }
 .rc-calendar-right-panel {
   height: inherit;
-  border-left: 1px solid #eee;
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-right-panel-header {
   display: -ms-flexbox;
@@ -486,7 +553,7 @@
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   font-weight: 600;
 }
 .rc-calendar-right-panel-body {
@@ -516,17 +583,17 @@
   display: inline-block;
   text-align: center;
   line-height: 24px;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   font-weight: 400;
   border-radius: 4px;
 }
 .rc-calendar-right-panel-item-text:hover {
-  background: #f5f5f5;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
+  background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
 }
 .rc-calendar-right-panel-item-selected,
 .rc-calendar-right-panel-item-selected:hover {
-  background: #ff9800;
+  background: var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 4px;
   color: #fff;
 }
@@ -535,11 +602,11 @@
   height: 0;
 }
 .rc-calendar-right-panel-item-current {
-  border: 1px solid #ff9800;
+  border: 1px solid var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 4px;
 }
 .rc-calendar-footer {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--rc-calendar-divider-color, #eee);
   padding: 8px 0;
   text-align: center;
   position: relative;
@@ -562,18 +629,18 @@
 .rc-calendar-time-picker-btn {
   display: inline-block;
   text-align: center;
-  color: #ed7109;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-today-btn:hover,
 .rc-calendar-ok-btn:hover,
 .rc-calendar-time-picker-btn:hover {
   cursor: pointer;
-  color: #ff9800;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-today-btn-disabled,
 .rc-calendar-ok-btn-disabled,
 .rc-calendar-time-picker-btn-disabled {
-  color: #bbb;
+  color: var(--rc-calendar-disabled-color);
 }
 .rc-calendar-today-btn {
   padding-left: 0;
@@ -584,7 +651,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  background: #ffffff;
+  background: var(--rc-calendar-popover-bg, #fff);
   z-index: 10;
   position: absolute;
   outline: none;
@@ -599,7 +666,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-time-panel-body {
   padding: 9px 10px 10px;
@@ -637,11 +704,11 @@
   cursor: pointer;
 }
 .rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time {
-  background: #f09f3f;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time:hover {
-  background: #f09f3f;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-month-panel {
@@ -650,7 +717,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
-  background: #ffffff;
+  background: var(--rc-calendar-popover-bg, #fff);
   z-index: 10;
   position: absolute;
   outline: none;
@@ -680,7 +747,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-month-panel-header > a {
   display: -ms-inline-flexbox;
@@ -692,22 +759,22 @@
   cursor: pointer;
 }
 .rc-calendar-month-panel-year-select:hover {
-  color: #ff9800;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-month-panel-prev-year-btn,
 .rc-calendar-month-panel-next-year-btn {
   width: 24px;
   height: 24px;
   border-radius: 4px;
-  color: #999;
+  color: var(--rc-calendar-icon-secondary-color, #999);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 .rc-calendar-month-panel-prev-year-btn:hover,
 .rc-calendar-month-panel-next-year-btn:hover {
-  color: #999;
-  background-color: #f5f5f5;
+  color: var(--rc-calendar-icon-secondary-color, #999);
+  background-color: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
 }
 .rc-calendar-month-panel-next-year-btn {
   right: 16px;
@@ -737,7 +804,7 @@
   padding: 9px 10px 10px;
 }
 .rc-calendar-month-panel-footer {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--rc-calendar-divider-color, #eee);
   line-height: 38px;
 }
 .rc-calendar-month-panel-table {
@@ -753,7 +820,7 @@
   display: block;
   width: 64px;
   margin: 0 auto;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   border-radius: 4px;
   height: 36px;
   padding: 0;
@@ -762,22 +829,22 @@
   text-align: center;
 }
 .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
-  background: #f5f5f5;
+  background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
   cursor: pointer;
 }
 .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month {
-  color: #bbb;
+  color: var(--rc-calendar-disabled-color);
 }
 .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month:hover {
-  background: white;
+  background: var(--rc-calendar-disabled-bg);
   cursor: not-allowed;
 }
 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month:hover {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-month-header-wrap {
@@ -790,7 +857,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
-  background: #ffffff;
+  background: var(--rc-calendar-popover-bg, #fff);
   z-index: 10;
   position: absolute;
   outline: none;
@@ -819,7 +886,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-year-panel-header > a {
   display: -ms-inline-flexbox;
@@ -832,7 +899,7 @@
   cursor: pointer;
 }
 .rc-calendar-year-panel-decade-select:hover {
-  color: #ff9800;
+  color: var(--rc-calendar-sf-orange-2, #ed7109);
 }
 .rc-calendar-year-panel-prev-decade-btn,
 .rc-calendar-year-panel-next-decade-btn {
@@ -842,7 +909,7 @@
   top: 50%;
   transform: translateY(-50%);
   border-radius: 4px;
-  color: #999;
+  color: var(--rc-calendar-icon-secondary-color, #999);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -850,8 +917,8 @@
 }
 .rc-calendar-year-panel-prev-decade-btn:hover,
 .rc-calendar-year-panel-next-decade-btn:hover {
-  color: #999;
-  background-color: #f5f5f5;
+  color: var(--rc-calendar-icon-secondary-color, #999);
+  background-color: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
 }
 .rc-calendar-year-panel-next-decade-btn {
   right: 16px;
@@ -878,7 +945,7 @@
   padding: 9px 10px 10px;
 }
 .rc-calendar-year-panel-footer {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--rc-calendar-divider-color);
   line-height: 38px;
 }
 .rc-calendar-year-panel-table {
@@ -894,7 +961,7 @@
   display: block;
   width: 64px;
   margin: 0 auto;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   border-radius: 4px;
   height: 36px;
   padding: 0;
@@ -903,16 +970,16 @@
   text-align: center;
 }
 .rc-calendar-year-panel-year:hover {
-  color: #212529;
-  background: #f5f5f5;
+  color: var(--rc-calendar-body-color, #212529);
+  background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
   cursor: pointer;
 }
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year:hover {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-decade-panel {
@@ -921,7 +988,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
-  background: #ffffff;
+  background: var(--rc-calendar-popover-bg, #fff);
   z-index: 10;
   position: absolute;
   outline: none;
@@ -948,7 +1015,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-decade-panel-header > a {
   display: -ms-inline-flexbox;
@@ -960,22 +1027,22 @@
   cursor: pointer;
 }
 .rc-calendar-decade-panel-century {
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
 }
 .rc-calendar-decade-panel-prev-century-btn,
 .rc-calendar-decade-panel-next-century-btn {
   width: 24px;
   height: 24px;
   border-radius: 4px;
-  color: #999;
+  color: var(--rc-calendar-icon-secondary-color, #999);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 .rc-calendar-decade-panel-prev-century-btn:hover,
 .rc-calendar-decade-panel-next-century-btn:hover {
-  color: #999;
-  background-color: #f5f5f5;
+  color: var(--rc-calendar-icon-secondary-color, #999);
+  background-color: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
 }
 .rc-calendar-decade-panel-next-century-btn {
   right: 16px;
@@ -989,7 +1056,7 @@
   padding: 9px 10px 10px;
 }
 .rc-calendar-decade-panel-footer {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--rc-calendar-divider-color, #eee);
   line-height: 38px;
 }
 .rc-calendar-decade-panel-table {
@@ -1000,7 +1067,7 @@
 }
 .rc-calendar-decade-panel-cell {
   text-align: center;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
 }
 .rc-calendar-decade-panel-cell a:hover {
   color: inherit;
@@ -1008,7 +1075,7 @@
 .rc-calendar-decade-panel-decade {
   display: block;
   margin: 0 auto;
-  color: #212529;
+  color: var(--rc-calendar-body-color, #212529);
   border-radius: 4px;
   height: 36px;
   padding: 0;
@@ -1018,15 +1085,15 @@
   width: 105px;
 }
 .rc-calendar-decade-panel-decade:hover {
-  background: #f5f5f5;
+  background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
   cursor: pointer;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade:hover {
-  background: #ff8000;
+  background: var(--rc-calendar-sf-orange, #FF8000);
   color: #fff;
 }
 .rc-calendar-decade-panel-last-century-cell .rc-calendar-decade-panel-decade,
@@ -1035,7 +1102,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--rc-calendar-out-range-color);
 }
 .rc-calendar-range {
   width: 502px;
@@ -1055,7 +1122,7 @@
   float: left;
 }
 .rc-calendar-range-left .rc-calendar-time-picker-panel-select:last-child {
-  border-right: 1px solid #e9e9e9;
+  border-right: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-range-right {
   float: right;
@@ -1064,7 +1131,7 @@
   left: 21px;
 }
 .rc-calendar-range-right .rc-calendar-time-picker-panel-select:first-child {
-  border-left: 1px solid #e9e9e9;
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-range-middle {
   position: absolute;
@@ -1092,7 +1159,7 @@
 .rc-calendar-range .rc-calendar-decade-panel-body,
 .rc-calendar-range .rc-calendar-year-panel-body,
 .rc-calendar-range .rc-calendar-month-panel-body {
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-range.rc-calendar-week-number {
   width: 574px;
@@ -1152,7 +1219,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
   overflow: hidden;
 }
 .rc-calendar-full-header-month-select,
@@ -1178,9 +1245,9 @@
   float: left;
   height: 28px;
   line-height: 24px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--rc-calendar-input-border-color);
   padding: 0 10px;
-  color: #666;
+  color: var(--rc-calendar-icon-color, #666);
 }
 .rc-calendar-full-header-switcher > span:first-child {
   border-top-left-radius: 4px;
@@ -1213,14 +1280,14 @@
   border-radius: 0;
   margin: 0 4px;
   border: none;
-  border-top: 2px solid #eee;
+  border-top: 2px solid var(--rc-calendar-divider-color);
   text-align: right;
   padding-right: 8px;
 }
 .rc-calendar-fullscreen .rc-calendar-selected-day .rc-calendar-date,
 .rc-calendar-fullscreen .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
   background-color: #fcecd9;
-  color: #666;
+  color: var(--rc-calendar-icon-color, #666);
 }
 .rc-calendar-fullscreen .rc-calendar-today .rc-calendar-date,
 .rc-calendar-fullscreen .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "React Calendar",
   "keywords": [
     "react",