@decido/ui 0.0.0

package/src/css/components.css

@@ -0,0 +1,309 @@
+/* /css/components.css */
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+
+  /*  COMPONENTES VISUALES CLAVE (Efectos)  */
+  .glass-premium {
+    background: linear-gradient(135deg,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0.05) 100%);
+    backdrop-filter: blur(30px);
+    @apply border border-white/20 shadow-2xl shadow-black/50;
+  }
+
+  .glass-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
+    @apply border border-white/5 transition-all duration-300;
+  }
+
+  .glass-card:hover {
+    background: rgba(255, 255, 255, 0.05);
+    @apply border-white/10;
+  }
+
+  .gradient-text {
+    background: linear-gradient(135deg,
+        var(--primary) 0%,
+        var(--secondary) 50%,
+        var(--accent) 100%);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradient 8s ease infinite;
+  }
+
+  /* #region Botones y formularios  */
+  .btn-premium {
+    /* @apply relative bg-gradient-to-r from-primary to-secondary text-white font-semibold py-3 px-6 rounded-xl overflow-hidden transition-all duration-300 hover:transform hover:-translate-y-1 hover:shadow-2xl hover:shadow-primary/30; */
+    /* @apply relative bg-gradient-to-r from-primary to-secondary text-white font-semibold py-3 px-6 rounded-xl overflow-hidden transition-all duration-300; */
+  }
+
+  .btn-premium:hover {
+    /* @apply transform -translate-y-1 shadow-2xl shadow-primary/30; */
+  }
+
+  .btn-secondary {
+    /* @apply bg-white/10 hover:bg-white/20 text-white font-semibold py-2 px-5 rounded-xl transition-all duration-300; */
+  }
+
+  .form-input-premium {
+    /* @apply w-full bg-dark/50 border-2 border-white/10 rounded-lg p-3 text-white placeholder-gray-500 transition-all duration-300 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/30; */
+  }
+
+  /* #endregion */
+
+  /* #region Paneles y pestañas del editor  */
+  #pane-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .editor-pane {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 250px;
+    background-color: var(--bg-content);
+  }
+
+  .editor-pane.active {
+    outline: 1px solid var(--primary);
+  }
+
+  .tab-bar {
+    display: flex;
+    flex-shrink: 0;
+    background-color: var(--bg-surface);
+    min-height: 35px;
+  }
+
+  .tab-item {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    height: 35px;
+    border-right: 1px solid var(--bg-dark);
+    cursor: pointer;
+    user-select: none;
+    color: var(--text-secondary);
+    background: transparent;
+    gap: 8px;
+    border-bottom: 2px solid transparent;
+  }
+
+  .tab-item:hover {
+    background-color: var(--bg-content);
+  }
+
+  .tab-item.active {
+    background-color: var(--bg-content);
+    color: var(--text-primary);
+    border-bottom: 2px solid var(--primary);
+  }
+
+  .tab-item .close-tab-btn {
+    font-size: 12px;
+    padding: 4px;
+    border-radius: 50%;
+  }
+
+  .tab-item .close-tab-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .tab-content {
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1rem;
+  }
+
+  .tab-content-area {
+    height: calc(100% - 42px);
+    /* Ajustar altura según tu barra de tabs */
+    overflow-y: auto;
+    padding: var(--spacing-md);
+  }
+
+  /* #endregion */
+
+  /* #region Notificaciones  */
+  .notification-item {
+    @apply flex items-start p-4 rounded-lg text-white shadow-2xl shadow-black/50 border border-white/10;
+    /* @apply flex items-start p-4 rounded-lg shadow-2xl shadow-black/50; */
+  }
+
+  .notification-icon {
+    @apply text-xl mr-4 mt-1;
+    /* @apply text-xl mr-4 mt-1 text-inherit; Hereda el color del borde */
+  }
+
+  .notification-title {
+    @apply font-bold;
+    /* @apply font-bold text-white; */
+  }
+
+  .notification-message {
+    @apply text-sm text-white/80;
+  }
+
+  .notification-close-btn {
+    @apply ml-4 text-xl opacity-70 hover:opacity-100;
+  }
+
+  .animate-slide-in-right {
+    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  .notification-item.border-secondary {
+    --notification-color: var(--secondary);
+  }
+
+  .notification-item.border-success {
+    --notification-color: var(--success);
+  }
+
+  .notification-item.border-accent {
+    --notification-color: var(--accent);
+  }
+
+  .notification-item.border-danger {
+    --notification-color: var(--danger);
+  }
+
+  .notification-item .notification-icon {
+    color: var(--notification-color);
+  }
+
+  /* #endregion */
+
+  /* #region Paleta de comandos  */
+  .command-palette-item {
+    @apply p-3 rounded-lg cursor-pointer flex justify-between items-center;
+  }
+
+  .command-palette-item:hover {
+    @apply bg-white/5;
+  }
+
+  .command-palette-item.selected {
+    @apply bg-primary text-white;
+  }
+
+  .command-palette-item .category {
+    @apply text-xs bg-white/10 px-2 py-1 rounded-md;
+  }
+
+  /* #endregion */
+
+  /* #region Animaciones globales */
+  @keyframes gradient {
+
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  @keyframes slide-in-right {
+    0% {
+      transform: translateX(100px);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes bounce {
+
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+
+    50% {
+      transform: translateY(-10px) scale(1.1);
+    }
+  }
+
+  @keyframes breathe {
+    from {
+      transform: scale(1);
+    }
+
+    to {
+      transform: scale(1.5);
+    }
+  }
+
+  /* #endregion */
+
+  /* #region nav-tab */
+  .nav-tab {
+    @apply flex items-center gap-4 w-full text-left py-3 px-4 rounded-xl text-gray-400 font-medium transition-all duration-300;
+  }
+
+  .nav-tab:hover {
+    @apply bg-white/5 text-white;
+  }
+
+  .nav-tab.active {
+    background: linear-gradient(90deg,
+        theme("colors.primary / 20%") 0%,
+        theme("colors.secondary / 20%") 100%);
+    /* @apply text-white shadow-lg shadow-primary/10 border border-primary; */
+  }
+
+  .nav-tab .nav-icon {
+    @apply w-6 h-6 flex items-center justify-center text-lg;
+  }
+
+  /* #endregion */
+
+  /* #region Usuario*/
+  .user-menu-button {
+    @apply flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/10 transition-colors;
+  }
+
+  .user-avatar {
+    @apply w-7 h-7 rounded-full object-cover bg-darker;
+  }
+
+  .user-name {
+    @apply text-sm font-semibold text-gray-300;
+  }
+
+  .top-bar-dropdown {
+    @apply absolute top-full right-0 mt-2 w-56 bg-dark rounded-xl shadow-2xl border border-white/10 p-2 z-50;
+    /* Animación para aparecer */
+    transform-origin: top right;
+    animation: scale-in 0.1s ease-out;
+  }
+
+  .dropdown-item {
+    @apply flex items-center gap-3 w-full text-left px-3 py-2 rounded-md text-sm text-gray-300 hover:bg-primary hover:text-white;
+  }
+
+  .dropdown-separator {
+    @apply h-px bg-white/10 my-2;
+  }
+
+  .is-readonly {
+    pointer-events: none !important;
+    opacity: 0.7;
+    filter: grayscale(50%);
+  }
+
+  /* #endregion */
+}