collabmd 0.1.32 → 0.1.34

package/src/client/styles/features/preview-markdown.css

@@ -190,9 +190,10 @@
 .preview-content .bases-shell {
   width: 100%;
   margin: 0 0 var(--space-5);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: color-mix(in oklab, var(--color-surface-offset) 65%, var(--color-surface));
+  border: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 2px);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-md);
   overflow: hidden;
 }
 
@@ -205,6 +206,8 @@
   gap: var(--space-3);
   padding: var(--space-4);
   border-bottom: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 1px) calc(var(--radius-lg) + 1px) 0 0;
+  background: var(--color-surface);
 }
 
 .preview-content .bases-toolbar-main,
@@ -218,19 +221,22 @@
 }
 
 .preview-content .bases-toolbar-main {
-  display: flex;
-  flex-wrap: wrap;
-  min-width: 0;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: var(--space-3);
+  min-width: 0;
 }
 
 .preview-content .bases-tabs {
+  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
+  padding: 3px;
+  border: 1px solid color-mix(in oklab, var(--color-divider) 82%, transparent);
+  border-radius: var(--radius-full);
+  background: color-mix(in oklab, var(--color-surface-offset) 78%, var(--color-surface));
   scrollbar-width: none;
 }
 
@@ -245,23 +251,294 @@
 
 .preview-content .bases-toolbar-actions {
   width: 100%;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.preview-content .bases-toolbar-edit-actions,
+.preview-content .bases-panel-title-row,
+.preview-content .bases-toggle-row,
+.preview-content .bases-filter-group-header,
+.preview-content .bases-filter-actions-row {
+  display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.preview-content .bases-toolbar-edit-actions {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-full);
+  background: color-mix(in oklab, var(--color-surface) 72%, var(--color-surface-offset));
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+}
+
+.preview-content .bases-panel-title-row,
+.preview-content .bases-filter-group-header {
+  justify-content: space-between;
+}
+
+.preview-content .bases-sort-row,
+.preview-content .bases-filter-row {
+  display: grid;
+  gap: var(--space-2);
+  width: 100%;
+  align-items: stretch;
+}
+
+.preview-content .bases-panel-section > .bases-sort-row {
+  grid-template-columns: minmax(180px, 1.35fr) minmax(140px, 1fr) auto;
+}
+
+.preview-content .bases-sort-list > .bases-sort-row {
+  grid-template-columns: minmax(180px, 1.35fr) minmax(140px, 1fr) repeat(3, auto);
+}
+
+.preview-content .bases-filter-row {
+  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(200px, 1.35fr) auto;
+}
+
+.preview-content .bases-sort-row > .ui-button,
+.preview-content .bases-filter-row > .ui-button,
+.preview-content .bases-filter-group-header > .ui-button,
+.preview-content .bases-filter-actions-row > .ui-button {
+  align-self: stretch;
+}
+
+.preview-content .bases-panels {
+  padding: var(--space-3) var(--space-4) var(--space-4);
+  background: var(--color-surface);
+}
+
+.preview-content .bases-panel-card {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 1px);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.preview-content .bases-panel-section {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.preview-content .bases-panel-section + .bases-panel-section {
+  padding-top: var(--space-3);
+  border-top: 1px solid color-mix(in oklab, var(--color-divider) 86%, transparent);
+}
+
+.preview-content .bases-panel-title,
+.preview-content .bases-readonly-note {
+  font-size: var(--text-ui-sm);
+  color: var(--color-text-muted);
+}
+
+.preview-content .bases-panel-title {
+  font-weight: 600;
+}
+
+.preview-content .bases-readonly-note {
+  line-height: 1.5;
+}
+
+.preview-content .bases-select,
+.preview-content .bases-filter-value,
+.preview-content .bases-properties-search-input,
+.preview-content .bases-filter-advanced {
+  width: 100%;
+  min-width: 0;
+}
+
+.preview-content .bases-select,
+.preview-content .bases-filter-value,
+.preview-content .bases-filter-value-combobox {
+  min-height: var(--control-h-md);
+}
+
+.preview-content .bases-select {
+  appearance: none;
+  padding-right: calc(var(--space-6) + var(--space-3));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23838ea4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right var(--space-3) center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.preview-content .bases-filter-value-combobox {
+  position: relative;
+  min-width: 0;
+}
+
+.preview-content .bases-filter-value {
+  padding-right: var(--space-3);
+}
+
+.preview-content .bases-filter-value--suggestions {
+  padding-right: calc(var(--space-6) + var(--space-3));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23838ea4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right var(--space-3) center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.preview-content .bases-filter-suggestion-list {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  right: 0;
+  z-index: 3;
+  display: grid;
+  gap: 2px;
+  max-height: 224px;
+  overflow: auto;
+  padding: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+}
+
+.preview-content .bases-filter-suggestion {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-2);
+  align-items: center;
+  width: 100%;
+  min-height: 36px;
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  border-radius: calc(var(--radius-md) - 2px);
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.preview-content .bases-filter-suggestion:hover,
+.preview-content .bases-filter-suggestion:focus-visible {
+  background: var(--surface-fill-subtle);
+  outline: none;
+}
+
+.preview-content .bases-filter-suggestion[aria-selected='true'] {
+  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
+  color: var(--color-primary);
+}
+
+.preview-content .bases-filter-suggestion-label,
+.preview-content .bases-filter-suggestion-meta {
+  min-width: 0;
+}
+
+.preview-content .bases-filter-suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-content .bases-filter-suggestion-meta {
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
+.preview-content .bases-filter-group {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid color-mix(in oklab, var(--color-divider) 88%, transparent);
+  border-radius: calc(var(--radius-lg) + 1px);
+  background: var(--color-surface);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+}
+
+.preview-content .bases-filter-children,
+.preview-content .bases-sort-list {
+  display: grid;
   gap: var(--space-3);
 }
 
+.preview-content .bases-properties-search,
+.preview-content .bases-filter-advanced-label {
+  display: block;
+  width: 100%;
+}
+
+.preview-content .bases-properties-list {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 320px;
+  overflow: auto;
+  padding: var(--space-1);
+  border: 1px solid color-mix(in oklab, var(--color-divider) 86%, transparent);
+  border-radius: var(--radius-lg);
+  background: color-mix(in oklab, var(--color-surface-offset) 54%, var(--color-surface));
+}
+
+.preview-content .bases-property-option {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  transition:
+    transform var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive),
+    background var(--transition-interactive);
+}
+
+.preview-content .bases-property-option:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, var(--color-divider) 55%, var(--color-primary) 45%);
+  background: var(--surface-fill-subtle);
+  box-shadow: var(--shadow-sm);
+}
+
+.preview-content .bases-property-option input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--color-primary);
+}
+
+.preview-content .bases-property-option-label {
+  min-width: 0;
+  font-weight: 500;
+}
+
+.preview-content .bases-property-option-meta {
+  font-size: var(--text-ui-sm);
+  color: var(--color-text-faint);
+  text-transform: capitalize;
+}
+
+.preview-content .bases-filter-advanced {
+  min-height: 180px;
+  padding: var(--space-3);
+  resize: vertical;
+  line-height: 1.5;
+}
+
 .preview-content .bases-search-shell {
   position: relative;
   display: flex;
   align-items: center;
   flex: 1 1 320px;
   width: 100%;
+  max-width: min(420px, 100%);
   min-width: min(320px, 100%);
+  margin-left: auto;
   border: 1px solid color-mix(in oklab, var(--color-border) 82%, var(--color-primary) 18%);
   border-radius: var(--radius-lg);
-  background:
-    linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, white 8%), var(--color-surface)),
-    var(--color-surface);
+  background: var(--color-surface);
   box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
   transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
 }
@@ -315,24 +592,34 @@
   align-items: center;
   min-height: 28px;
   padding: 0 var(--space-3);
+  border: 1px solid color-mix(in oklab, var(--color-divider) 84%, transparent);
   border-radius: var(--radius-full);
   background: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface));
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
   white-space: nowrap;
 }
 
 .preview-content .bases-summaries {
   padding: var(--space-3) var(--space-4);
+  border-top: 1px solid color-mix(in oklab, var(--color-divider) 78%, transparent);
   border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface);
 }
 
 .preview-content .bases-summary {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  min-height: 28px;
+  min-height: 30px;
   padding: 0 var(--space-3);
+  border: 1px solid color-mix(in oklab, var(--color-divider) 84%, transparent);
   border-radius: 999px;
   background: var(--color-surface);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+}
+
+.preview-content .bases-summary-value {
+  font-weight: 600;
 }
 
 .preview-content .bases-content {
@@ -358,21 +645,54 @@
 
 .preview-content .bases-table-shell {
   overflow-x: auto;
+  border: 1px solid color-mix(in oklab, var(--color-divider) 88%, transparent);
+  border-radius: calc(var(--radius-lg) + 1px);
+  background: var(--color-surface);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
 }
 
 .preview-content .bases-table {
   width: 100%;
-  border-collapse: collapse;
+  min-width: 620px;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 .preview-content .bases-table th,
 .preview-content .bases-table td {
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3);
   border-bottom: 1px solid var(--color-divider);
   text-align: left;
   vertical-align: top;
 }
 
+.preview-content .bases-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface));
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.preview-content .bases-table tbody tr {
+  transition: background var(--transition-interactive);
+}
+
+.preview-content .bases-table tbody tr:nth-child(even) {
+  background: color-mix(in oklab, var(--color-surface-offset) 24%, transparent);
+}
+
+.preview-content .bases-table tbody tr:hover {
+  background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface-offset));
+}
+
+.preview-content .bases-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
 .preview-content .bases-list,
 .preview-content .bases-cards {
   margin: 0;
@@ -382,27 +702,51 @@
 
 .preview-content .bases-list {
   list-style: none;
+  display: grid;
+  gap: var(--space-2);
 }
 
 .preview-content .bases-list-item {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
-  padding: var(--space-3) 0;
-  border-bottom: 1px solid var(--color-divider);
+  padding: var(--space-3);
+  border: 1px solid color-mix(in oklab, var(--color-divider) 88%, transparent);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+}
+
+.preview-content .bases-list-field {
+  display: grid;
+  gap: 2px;
+  min-width: min(220px, 100%);
 }
 
 .preview-content .bases-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: var(--space-3);
 }
 
 .preview-content .bases-card {
+  display: grid;
+  grid-template-rows: auto 1fr;
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  border-radius: calc(var(--radius-lg) + 2px);
   background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform var(--transition-interactive),
+    box-shadow var(--transition-interactive),
+    border-color var(--transition-interactive);
+}
+
+.preview-content .bases-card:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, var(--color-border) 58%, var(--color-primary) 42%);
+  box-shadow: var(--shadow-md);
 }
 
 .preview-content .bases-card-media {
@@ -418,17 +762,35 @@
 }
 
 .preview-content .bases-card-body {
-  padding: var(--space-3);
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-4);
 }
 
 .preview-content .bases-card-field + .bases-card-field {
-  margin-top: var(--space-3);
+  margin-top: 0;
+  padding-top: var(--space-3);
+  border-top: 1px solid color-mix(in oklab, var(--color-divider) 84%, transparent);
 }
 
 .preview-content .bases-link-button {
+  min-height: auto;
   padding: 0;
   border: 0;
+  border-radius: 0;
   background: transparent;
+  box-shadow: none;
+  color: var(--color-primary);
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+}
+
+.preview-content .bases-link-button:hover,
+.preview-content .bases-link-button:focus-visible {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
   color: var(--color-primary);
 }
 
@@ -439,7 +801,8 @@
   padding: 0 var(--space-3);
   border: 1px solid var(--color-border);
   border-radius: 999px;
-  background: var(--color-surface);
+  background: color-mix(in oklab, var(--color-surface-offset) 44%, var(--color-surface));
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
   font-size: var(--text-ui-sm);
 }
 
@@ -447,7 +810,9 @@
   display: block;
   max-width: 120px;
   max-height: 80px;
+  border: 1px solid color-mix(in oklab, var(--color-divider) 84%, transparent);
   border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
 }
 
 .preview-content .bases-unsupported {
@@ -455,6 +820,81 @@
   border: 1px dashed var(--color-border);
   border-radius: var(--radius-lg);
   color: var(--color-text-muted);
+  background: color-mix(in oklab, var(--color-surface-offset) 52%, var(--color-surface));
+}
+
+@media (max-width: 900px) {
+  .preview-content .bases-toolbar-actions {
+    justify-content: flex-start;
+  }
+
+  .preview-content .bases-search-shell {
+    margin-left: 0;
+    max-width: none;
+  }
+
+  .preview-content .bases-panel-section > .bases-sort-row,
+  .preview-content .bases-sort-list > .bases-sort-row,
+  .preview-content .bases-filter-row {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-content .bases-sort-row > .ui-button,
+  .preview-content .bases-filter-row > .ui-button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 640px) {
+  .preview-content .bases-toolbar,
+  .preview-content .bases-panels,
+  .preview-content .bases-summaries,
+  .preview-content .bases-content {
+    padding-inline: var(--space-3);
+  }
+
+  .preview-content .bases-toolbar-edit-actions,
+  .preview-content .bases-toggle-row,
+  .preview-content .bases-filter-actions-row {
+    width: 100%;
+  }
+
+  .preview-content .bases-toolbar-edit-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .preview-content .bases-toolbar-edit-actions > .ui-button,
+  .preview-content .bases-toggle-row > .ui-button,
+  .preview-content .bases-filter-actions-row > .ui-button {
+    flex: 1 1 140px;
+  }
+
+  .preview-content .bases-toolbar-edit-actions > .ui-button {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .preview-content .bases-toolbar-edit-actions > .ui-button:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+
+  .preview-content .bases-property-option {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .preview-content .bases-property-option-meta {
+    grid-column: 2;
+  }
+
+  .preview-content .bases-table {
+    min-width: 540px;
+  }
 }
 
 .preview-content a {
@@ -615,8 +1055,13 @@
 
 @media (max-width: 768px) {
   .preview-content .frontmatter-header {
-    align-items: flex-start;
-    flex-direction: column;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .preview-content .frontmatter-toggle {
+    margin-left: auto;
   }
 
   .preview-content .frontmatter-property {