opus-react 0.6.5 → 0.6.7

package/dist/index.css

@@ -966,12 +966,26 @@
   width: 78px;
 }
 
+.opus_EdjT2u_hint {
+  color: var(--opus-muted);
+  letter-spacing: .02em;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 0;
+  font-size: .72rem;
+  font-weight: 600;
+}
+
 .opus_EdjT2u_weekdays, .opus_EdjT2u_grid {
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 2px;
   display: grid;
 }
 
+.opus_EdjT2u_rangeGrid {
+  gap: 4px 0;
+}
+
 .opus_EdjT2u_weekday {
   height: 24px;
   color: var(--opus-muted);
@@ -997,7 +1011,15 @@
   display: grid;
 }
 
-.opus_EdjT2u_day:hover:not(:disabled) {
+.opus_EdjT2u_dayLabel {
+  border-radius: inherit;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  display: grid;
+}
+
+.opus_EdjT2u_day:hover:not(:disabled):not(.opus_EdjT2u_selected):not(.opus_EdjT2u_inRange):not(.opus_EdjT2u_rangePreview) {
   background: color-mix(in srgb, var(--opus-accent) 10%, transparent);
 }
 
@@ -1017,17 +1039,38 @@
   font-weight: 500;
 }
 
-.opus_EdjT2u_today {
+.opus_EdjT2u_today:not(.opus_EdjT2u_selected):not(.opus_EdjT2u_inRange):not(.opus_EdjT2u_rangePreview) {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opus-accent) 45%, transparent);
 }
 
-.opus_EdjT2u_selected, .opus_EdjT2u_selected:hover:not(:disabled) {
+.opus_EdjT2u_selected, .opus_EdjT2u_selected:hover:not(:disabled), .opus_EdjT2u_inRange, .opus_EdjT2u_inRange:hover:not(:disabled), .opus_EdjT2u_rangePreview, .opus_EdjT2u_rangePreview:hover:not(:disabled) {
   background: color-mix(in srgb, var(--opus-accent) 82%, #111);
   color: #fff;
   box-shadow: none;
   border-color: #0000;
 }
 
+.opus_EdjT2u_inRange, .opus_EdjT2u_inRange:hover:not(:disabled), .opus_EdjT2u_rangePreview, .opus_EdjT2u_rangePreview:hover:not(:disabled) {
+  border-radius: 0;
+}
+
+.opus_EdjT2u_rangeEndpoint {
+  z-index: 1;
+  position: relative;
+}
+
+.opus_EdjT2u_rangeStart {
+  border-radius: 8px 0 0 8px;
+}
+
+.opus_EdjT2u_rangeEnd {
+  border-radius: 0 8px 8px 0;
+}
+
+.opus_EdjT2u_rangeStart.opus_EdjT2u_rangeEnd {
+  border-radius: 8px;
+}
+
 .opus_EdjT2u_footer {
   border-top: 1px solid color-mix(in srgb, var(--opus-border) 70%, transparent);
   justify-content: space-between;
@@ -20644,17 +20687,22 @@ button.opus_9Mof8o_block:focus-visible {
 
 /* components/MasonryGrid/MasonryGrid.module.css */
 .opus_Fxxd7-_grid {
+  column-fill: balance;
   width: 100%;
 }
 
 .opus_Fxxd7-_card {
   break-inside: avoid;
   page-break-inside: avoid;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 8%, transparent), transparent 48%),
-    color-mix(in srgb, var(--opus-panel) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--opus-border) 88%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 10%, transparent), transparent 52%),
+    color-mix(in srgb, var(--opus-panel) 96%, transparent);
+  border-radius: 14px;
+  align-content: start;
   gap: 8px;
   padding: 16px;
   display: grid;
+  box-shadow: 0 10px 24px #00000014;
 }
 
 button.opus_Fxxd7-_card {
@@ -20667,8 +20715,9 @@ button.opus_Fxxd7-_card {
 }
 
 button.opus_Fxxd7-_card:hover {
-  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 15%, transparent), transparent 58%),
-    color-mix(in srgb, var(--opus-panel) 94%, transparent);
+  border-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 16%, transparent), transparent 58%),
+    color-mix(in srgb, var(--opus-panel) 96%, transparent);
 }
 
 button.opus_Fxxd7-_card:focus-visible {
@@ -22046,17 +22095,16 @@ button.opus_Fxxd7-_card:focus-visible {
   z-index: 1000;
   border: 1px solid var(--opus-border-strong);
   background: color-mix(in srgb, var(--opus-panel) 97%, transparent);
-  width: min(320px, 86vw);
+  width: min(320px, 100vw - 32px);
   max-height: min(70vh, 520px);
   box-shadow: var(--opus-shadow), 0 18px 48px #00000052;
   backdrop-filter: blur(18px);
   border-radius: 12px;
   gap: 12px;
+  margin: 0;
   padding: 12px;
   display: grid;
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
+  position: fixed;
   overflow: auto;
 }