opus-react 0.2.33 → 0.2.34

package/dist/index.css

@@ -14129,9 +14129,7 @@
 
 /* components/Sidebar/Sidebar.module.css */
 .opus_4Pogux_layout {
-  border: 1px solid var(--opus-border);
-  border-radius: var(--opus-input-radius-large);
-  background: color-mix(in srgb, var(--opus-panel) 88%, transparent);
+  background: none;
   width: 100%;
   min-height: 280px;
   display: grid;
@@ -14139,11 +14137,11 @@
 }
 
 .opus_4Pogux_layout[data-side="left"] {
-  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
 }
 
 .opus_4Pogux_layout[data-side="right"] {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
 }
 
 .opus_4Pogux_layout[data-collapsed="true"][data-side="left"] {
@@ -14155,16 +14153,18 @@
 }
 
 .opus_4Pogux_sidebar {
-  border-inline-end: 1px solid var(--opus-border);
-  background: color-mix(in srgb, var(--opus-panel) 94%, transparent);
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  --sidebar-pad: 14px;
+  --sidebar-gap: 4px;
+  --sidebar-row-pad-block: 8px;
+  --sidebar-row-pad-inline: 10px;
+  background: color-mix(in srgb, var(--opus-panel) 90%, transparent);
+  min-width: 0;
   min-height: 0;
-  display: grid;
-}
-
-.opus_4Pogux_layout[data-side="right"] .opus_4Pogux_sidebar {
-  border-inline-end: 0;
-  border-inline-start: 1px solid var(--opus-border);
+  color: var(--opus-text);
+  flex-direction: column;
+  transition: background .22s, color .22s;
+  display: flex;
+  overflow: hidden;
 }
 
 .opus_4Pogux_sidebar[data-collapsed="true"] {
@@ -14178,32 +14178,20 @@
   --sidebar-row-pad-inline: 8px;
 }
 
-.opus_4Pogux_sidebar[data-density="comfortable"] {
-  --sidebar-pad: 14px;
-  --sidebar-gap: 4px;
-  --sidebar-row-pad-block: 8px;
-  --sidebar-row-pad-inline: 10px;
-}
-
 .opus_4Pogux_header, .opus_4Pogux_footer, .opus_4Pogux_body {
   min-width: 0;
 }
 
-.opus_4Pogux_header, .opus_4Pogux_footer {
-  padding: var(--sidebar-pad);
-}
-
 .opus_4Pogux_header {
-  border-bottom: 1px solid var(--opus-border);
+  padding: 18px var(--sidebar-pad) 12px;
+  background: color-mix(in srgb, var(--opus-panel) 90%, transparent);
+  flex-shrink: 0;
 }
 
 .opus_4Pogux_footer {
-  border-top: 1px solid var(--opus-border);
-  padding: var(--sidebar-pad)
-    var(--sidebar-pad)
-    var(--sidebar-pad)
-    calc(var(--sidebar-pad) + var(--sidebar-row-pad-inline));
+  padding: 12px var(--sidebar-pad) 18px;
   color: var(--opus-muted);
+  flex-shrink: 0;
   font-size: .78rem;
   line-height: 1.4;
 }
@@ -14216,25 +14204,26 @@
 }
 
 .opus_4Pogux_headerTitle {
-  padding-inline: var(--sidebar-row-pad-inline);
-  color: var(--opus-text);
-  letter-spacing: .04em;
+  color: var(--opus-accent);
+  letter-spacing: .12em;
   text-transform: uppercase;
   margin: 0;
-  font-size: .82rem;
-  font-weight: 800;
+  font-size: .78rem;
+  font-weight: 700;
+  line-height: 1;
 }
 
 .opus_4Pogux_body {
-  padding: var(--sidebar-pad);
-  overflow: auto;
+  min-height: 0;
+  padding: 12px var(--sidebar-pad) 18px;
+  flex: 1;
+  overflow: hidden auto;
 }
 
 .opus_4Pogux_main {
   min-width: 0;
   color: var(--opus-muted);
-  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--opus-accent) 10%, transparent), transparent 40%),
-    color-mix(in srgb, var(--opus-panel) 82%, transparent);
+  background: none;
   place-items: center;
   padding: 24px;
   font-size: .88rem;
@@ -14242,7 +14231,9 @@
 }
 
 .opus_4Pogux_nav {
+  align-content: start;
   gap: var(--sidebar-gap);
+  min-height: 0;
   display: grid;
 }
 
@@ -14251,31 +14242,52 @@
   padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
   border-radius: var(--opus-input-radius);
   color: var(--opus-muted);
+  font: inherit;
   text-align: left;
   cursor: pointer;
   background: none;
-  border: 0;
-  font-size: .86rem;
+  border: 1px solid #0000;
+  align-items: center;
+  gap: 8px;
+  font-size: .84rem;
   font-weight: 600;
   line-height: 1.3;
   text-decoration: none;
-  transition: background .16s, color .16s;
-  display: block;
+  transition: background .16s, border-color .16s, color .16s;
+  display: inline-flex;
 }
 
 .opus_4Pogux_sidebar[data-collapsed="true"] .opus_4Pogux_link {
-  text-align: center;
+  justify-content: center;
   padding-inline: 8px;
 }
 
 .opus_4Pogux_link:hover {
-  background: color-mix(in srgb, var(--opus-accent) 10%, transparent);
+  border-color: var(--opus-border);
+  background: color-mix(in srgb, var(--opus-accent-soft) 70%, transparent);
   color: var(--opus-text);
 }
 
 .opus_4Pogux_linkActive {
-  background: color-mix(in srgb, var(--opus-accent) 16%, transparent);
-  color: var(--opus-text);
+  border-color: color-mix(in srgb, var(--opus-accent) 45%, transparent);
+  background: var(--opus-accent-soft);
+  color: var(--opus-accent);
+}
+
+.opus_4Pogux_icon {
+  width: 14px;
+  color: inherit;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.opus_4Pogux_icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
 }
 
 .opus_4Pogux_group {
@@ -14284,36 +14296,55 @@
 }
 
 .opus_4Pogux_groupHeader {
-  padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
-  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   display: flex;
 }
 
 .opus_4Pogux_groupLabel {
-  color: var(--opus-text);
-  font-size: .82rem;
-  font-weight: 750;
+  min-width: 0;
+  padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
+  border-radius: var(--opus-input-radius);
+  color: var(--opus-accent);
+  letter-spacing: .04em;
+  border: 1px solid #0000;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  font-size: .84rem;
+  font-weight: 700;
+  line-height: 1.3;
+  display: inline-flex;
 }
 
 .opus_4Pogux_groupToggle {
-  border-radius: var(--opus-input-radius-small);
+  border-radius: var(--opus-input-radius);
+  width: 32px;
+  height: 32px;
+  color: var(--opus-muted);
   cursor: pointer;
   background: none;
-  border: 0;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  border: 1px solid #0000;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
   padding: 0;
-  display: grid;
+  transition: background .16s, border-color .16s;
+  display: inline-flex;
+}
+
+.opus_4Pogux_groupToggle:hover {
+  border-color: var(--opus-border);
+  background: color-mix(in srgb, var(--opus-accent-soft) 50%, transparent);
 }
 
 .opus_4Pogux_groupChevron, .opus_4Pogux_groupChevronOpen {
-  border-right: 1.5px solid var(--opus-muted);
-  border-bottom: 1.5px solid var(--opus-muted);
+  border-bottom: 1.5px solid;
+  border-right: 1.5px solid;
+  flex-shrink: 0;
   width: 7px;
   height: 7px;
+  margin-top: 1px;
   transition: transform .16s;
   transform: rotate(-45deg);
 }
@@ -14324,7 +14355,7 @@
 
 .opus_4Pogux_groupItemsWrap {
   grid-template-rows: 0fr;
-  transition: grid-template-rows .2s;
+  transition: grid-template-rows .24s;
   display: grid;
 }
 
@@ -14333,13 +14364,13 @@
 }
 
 .opus_4Pogux_groupItems {
-  gap: var(--sidebar-gap);
-  min-height: 0;
-  margin-left: var(--sidebar-row-pad-inline);
-  padding-left: calc(var(--sidebar-row-pad-inline) + 6px);
   opacity: 0;
   border-left: 1px solid #0000;
-  transition: opacity .18s, border-color .2s;
+  gap: 2px;
+  min-height: 0;
+  margin-left: 10px;
+  padding-left: 10px;
+  transition: opacity .2s, border-color .24s;
   display: grid;
   overflow: hidden;
 }
@@ -14366,13 +14397,16 @@
 }
 
 @media (width <= 640px) {
-  .opus_4Pogux_layout {
+  .opus_4Pogux_layout, .opus_4Pogux_layout[data-side="left"], .opus_4Pogux_layout[data-side="right"] {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .opus_4Pogux_layout[data-side="right"] .opus_4Pogux_sidebar {
+    grid-row: 1;
+  }
+
   .opus_4Pogux_sidebar {
-    border-inline: 0;
-    border-bottom: 1px solid var(--opus-border);
+    max-height: 42vh;
   }
 }