@kyro-cms/admin 0.9.5 → 0.9.7

package/src/styles/main.css

@@ -94,6 +94,8 @@
   --kyro-input-border: #1e293b;
 
   --kyro-black: #ffffff;
+  --kyro-black-light: #f3f4f6;
+  --kyro-black-hover: #e5e7eb;
   --kyro-gray-50: #1a2332;
   --kyro-gray-100: #1e293b;
   --kyro-gray-200: #334155;
@@ -417,7 +419,7 @@
 
   .kyro-btn-danger:hover:not(:disabled) {
     background: var(--kyro-gray-900);
-    color: white;
+    color: var(--kyro-sidebar-text-active);
   }
 
   .kyro-btn-ghost {
@@ -431,14 +433,13 @@
   }
 
   .kyro-btn-success {
-    background: #10b981;
+    background: var(--kyro-success);
     color: white;
-    border-color: #10b981;
+    border-color: var(--kyro-success);
   }
 
   .kyro-btn-success:hover:not(:disabled) {
-    background: #059669;
-    border-color: #059669;
+    filter: brightness(0.85);
   }
 
   .kyro-btn-success:disabled {
@@ -448,14 +449,13 @@
   }
 
   .kyro-btn-warning {
-    background: #f59e0b;
+    background: var(--kyro-warning);
     color: white;
-    border-color: #f59e0b;
+    border-color: var(--kyro-warning);
   }
 
   .kyro-btn-warning:hover:not(:disabled) {
-    background: #d97706;
-    border-color: #d97706;
+    filter: brightness(0.85);
   }
 
   /* Cards & Tiles */
@@ -1393,14 +1393,14 @@
     color: var(--kyro-text-secondary);
   }
 
-  /* Toast — Subtle Modern */
+  /* Toast — Colored Flat */
   .kyro-toasts-container {
     position: fixed;
     bottom: 16px;
     right: 16px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     z-index: 9999;
     pointer-events: none;
   }
@@ -1408,34 +1408,25 @@
   .kyro-toast {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     min-width: 240px;
     max-width: 340px;
-    padding: 12px 14px;
-    border-radius: 12px;
+    padding: 8px 10px;
+    color: white;
+    border-radius: 8px;
     box-shadow:
-      0 4px 12px rgba(0, 0, 0, 0.06),
-      0 8px 24px rgba(0, 0, 0, 0.04);
+      0 2px 4px -1px rgba(0, 0, 0, 0.08),
+      0 8px 16px -4px rgba(0, 0, 0, 0.15),
+      0 16px 24px -8px rgba(0, 0, 0, 0.2);
     pointer-events: auto;
     position: relative;
-    overflow: hidden;
-    border: 1px solid var(--kyro-border);
-    background: var(--kyro-surface);
+    transition: box-shadow 0.2s ease;
   }
 
-  .kyro-toast::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-  }
-
-  .kyro-toast-success::before { background: var(--kyro-success); }
-  .kyro-toast-error::before { background: var(--kyro-danger); }
-  .kyro-toast-warning::before { background: var(--kyro-warning); }
-  .kyro-toast-info::before { background: #6366f1; }
+  .kyro-toast-success { background: #16a34a; }
+  .kyro-toast-error { background: #dc2626; }
+  .kyro-toast-warning { background: #d97706; }
+  .kyro-toast-info { background: #4f46e5; }
 
   .kyro-toast-icon-container {
     flex-shrink: 0;
@@ -1444,13 +1435,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    color: rgba(255, 255, 255, 0.85);
   }
 
-  .kyro-toast-success .kyro-toast-icon-container { color: var(--kyro-success); }
-  .kyro-toast-error .kyro-toast-icon-container { color: var(--kyro-danger); }
-  .kyro-toast-warning .kyro-toast-icon-container { color: var(--kyro-warning); }
-  .kyro-toast-info .kyro-toast-icon-container { color: #6366f1; }
-
   .kyro-toast-content {
     flex: 1;
     min-width: 0;
@@ -1460,25 +1447,25 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: -0.01em;
-    color: var(--kyro-text-primary);
+    color: rgba(255, 255, 255, 0.92);
     line-height: 1.3;
   }
 
   .kyro-toast-close {
     padding: 3px;
     border-radius: 4px;
-    color: var(--kyro-text-muted);
+    color: rgba(255, 255, 255, 0.35);
     transition: all 0.15s ease;
     flex-shrink: 0;
-    opacity: 0.4;
   }
 
   .kyro-toast-close:hover {
-    background: var(--kyro-surface-accent);
-    opacity: 1;
-    color: var(--kyro-text-primary);
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
   }
 
+  .kyro-toast-accent { display: none; }
+
   /* Spinner — Monochrome */
   .kyro-spinner {
     animation: spin 0.8s linear infinite;
@@ -2068,4 +2055,27 @@
 /* Ensure NodeViews render correctly within ProseMirror */
 .tiptap-editor-wrapper .ProseMirror .node--component {
   display: block;
+}
+
+/* Floating action button */
+#kyro-fab {
+  animation: fab-enter 0.3s ease-out;
+}
+
+#kyro-fab.fab-hidden {
+  opacity: 0;
+  transform: scale(0.8);
+  pointer-events: none;
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+@keyframes fab-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.5) translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }