@imjp/writenex-astro 0.1.0

package/src/client/components/ConfigPanel/ConfigPanel.css

@@ -0,0 +1,553 @@
+/**
+ * @fileoverview ConfigPanel modal styles
+ *
+ * Modal styling for configuration panel, matches Writenex Editor design.
+ */
+
+/* ============================================================================
+   MODAL OVERLAY
+   ============================================================================ */
+
+.wn-config-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  animation: fadeIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   MODAL CONTAINER
+   ============================================================================ */
+
+.wn-config-modal {
+  width: 100%;
+  max-width: var(--wn-modal-lg);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  box-shadow: var(--wn-shadow-lg);
+  animation: zoomIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================================================
+   MODAL HEADER
+   ============================================================================ */
+
+.wn-config-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-5) var(--wn-space-6);
+  border-bottom: 1px solid var(--wn-zinc-700);
+  flex-shrink: 0;
+}
+
+.wn-config-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+  margin: 0;
+}
+
+.wn-config-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-lg);
+  height: var(--wn-icon-btn-lg);
+  padding: 0;
+  border: none;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-config-close:hover {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+/* ============================================================================
+   MODAL CONTENT
+   ============================================================================ */
+
+.wn-config-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--wn-space-6);
+}
+
+/* ============================================================================
+   SECTIONS
+   ============================================================================ */
+
+.wn-config-section {
+  margin-bottom: var(--wn-space-7);
+}
+
+.wn-config-section:last-child {
+  margin-bottom: 0;
+}
+
+.wn-config-section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding-bottom: var(--wn-space-3);
+  margin-bottom: var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-zinc-700);
+  font-size: var(--wn-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--wn-zinc-400);
+}
+
+/* ============================================================================
+   CONFIG ITEMS
+   ============================================================================ */
+
+.wn-config-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-4);
+}
+
+.wn-config-item {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: var(--wn-space-3);
+  align-items: start;
+}
+
+.wn-config-item-label {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+}
+
+.wn-config-item-value {
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-50);
+}
+
+.wn-config-item-value--violet {
+  color: var(--wn-info-400);
+}
+
+.wn-config-item-value--emerald {
+  color: var(--wn-success-400);
+}
+
+.wn-config-item-value--amber {
+  color: var(--wn-warning-400);
+}
+
+.wn-config-item-value--muted {
+  color: var(--wn-zinc-500);
+}
+
+.wn-config-item-description {
+  margin-top: var(--wn-space-1);
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-600);
+}
+
+/* ============================================================================
+   COLLECTION CARDS
+   ============================================================================ */
+
+.wn-config-collections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-4);
+}
+
+.wn-config-collection {
+  padding: var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-950);
+}
+
+.wn-config-collection-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--wn-space-3);
+}
+
+.wn-config-collection-name {
+  font-weight: 500;
+  color: var(--wn-zinc-50);
+}
+
+.wn-config-collection-count {
+  padding: var(--wn-space-1) var(--wn-space-3);
+  border-radius: var(--wn-radius-sm);
+  background-color: var(--wn-zinc-800);
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-400);
+}
+
+.wn-config-collection-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+  font-size: var(--wn-font-xs);
+}
+
+.wn-config-collection-detail {
+  color: var(--wn-zinc-500);
+}
+
+.wn-config-collection-detail span {
+  color: var(--wn-zinc-600);
+}
+
+.wn-config-collection-detail--blue {
+  color: var(--wn-brand-400);
+}
+
+.wn-config-collection-detail--violet {
+  color: var(--wn-info-400);
+}
+
+/* ============================================================================
+   HELP SECTION
+   ============================================================================ */
+
+.wn-config-help {
+  padding: var(--wn-space-5);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-950);
+}
+
+.wn-config-help-title {
+  margin-bottom: var(--wn-space-3);
+  font-size: var(--wn-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--wn-zinc-400);
+}
+
+.wn-config-help-text {
+  margin-bottom: var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-400);
+}
+
+.wn-config-help-code {
+  padding: var(--wn-space-1) var(--wn-space-2);
+  border-radius: var(--wn-radius-sm);
+  background-color: var(--wn-zinc-800);
+  font-size: var(--wn-font-xs);
+  font-family: ui-monospace, monospace;
+  color: var(--wn-zinc-50);
+}
+
+.wn-config-help-pre {
+  margin: 0;
+  padding: var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  font-size: var(--wn-font-xs);
+  font-family: ui-monospace, monospace;
+  color: var(--wn-zinc-400);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* ============================================================================
+   EMPTY STATE
+   ============================================================================ */
+
+.wn-config-empty {
+  padding: var(--wn-space-5);
+  text-align: center;
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-500);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-config-overlay {
+  background-color: var(--wn-backdrop-light);
+}
+
+.wn-light .wn-config-modal {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-config-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-config-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-close:hover {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-section-title {
+  border-bottom-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-item-label {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-config-item-value {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-collection {
+  border-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+}
+
+.wn-light .wn-config-collection-name {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-collection-count {
+  background-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-collection-detail {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-collection-detail span {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-config-help {
+  border-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+}
+
+.wn-light .wn-config-help-title {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-help-text {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-help-code {
+  background-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-help-pre {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-config-empty {
+  color: var(--wn-zinc-500);
+}
+
+/* ============================================================================
+   CONFIG ACTIONS (Open in Editor buttons)
+   ============================================================================ */
+
+.wn-config-actions {
+  display: flex;
+  gap: var(--wn-space-3);
+  margin-top: var(--wn-space-4);
+}
+
+.wn-config-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wn-space-2);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  border: none;
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.wn-config-btn--primary {
+  background-color: var(--wn-brand-500);
+  color: #fff;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.wn-config-btn--primary:hover {
+  background-color: var(--wn-brand-600);
+}
+
+.wn-config-btn--secondary {
+  background-color: transparent;
+  border: 1px solid var(--wn-zinc-700);
+  color: var(--wn-zinc-300);
+}
+
+.wn-config-btn--secondary:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+.wn-config-btn--dropdown {
+  padding: var(--wn-space-2) var(--wn-space-2);
+  background-color: var(--wn-brand-500);
+  color: #fff;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid var(--wn-brand-400);
+}
+
+.wn-config-btn--dropdown:hover {
+  background-color: var(--wn-brand-600);
+}
+
+/* Editor select container */
+.wn-config-editor-select {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Dropdown menu */
+.wn-config-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--wn-space-1);
+  padding: var(--wn-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-800);
+  box-shadow: var(--wn-shadow-lg);
+  z-index: 10;
+}
+
+.wn-config-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--wn-space-2) var(--wn-space-3);
+  border: none;
+  border-radius: var(--wn-radius-sm);
+  background-color: transparent;
+  color: var(--wn-zinc-300);
+  font-size: var(--wn-font-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--wn-transition-fast);
+}
+
+.wn-config-dropdown-item:hover {
+  background-color: var(--wn-zinc-700);
+}
+
+.wn-config-dropdown-item--active {
+  background-color: var(--wn-brand-500);
+  color: #fff;
+}
+
+.wn-config-dropdown-item--active:hover {
+  background-color: var(--wn-brand-600);
+}
+
+/* ============================================================================
+   LIGHT MODE - CONFIG ACTIONS
+   ============================================================================ */
+
+.wn-light .wn-config-btn--secondary {
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-config-btn--secondary:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-dropdown {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-config-dropdown-item {
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-config-dropdown-item:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-config-dropdown-item--active {
+  background-color: var(--wn-brand-500);
+  color: #fff;
+}
+
+.wn-light .wn-config-dropdown-item--active:hover {
+  background-color: var(--wn-brand-600);
+  color: #fff;
+}
+
+.wn-light .wn-config-dropdown-item:hover {
+  background-color: var(--wn-zinc-100);
+}