opacacms 0.1.11 → 0.1.13

package/src/admin/ui/styles/asset-manager.scss

@@ -1,547 +0,0 @@
-.asset-manager-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding: 1rem;
-}
-
-.asset-manager-container {
-  background-color: var(--opaca-card-bg);
-  border-radius: var(--opaca-radius);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  width: 100%;
-  border: 1px solid var(--opaca-border);
-  max-width: 56rem; // 4xl
-  height: 600px;
-  display: flex;
-  flex-direction: column;
-  color: var(--opaca-text);
-  overflow: hidden;
-}
-
-.asset-manager-header {
-  padding: 1.25rem 1.75rem;
-  border-bottom: 1px solid var(--opaca-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--opaca-card-bg);
-
-  h2 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  .asset-manager-breadcrumbs {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
-    font-size: 0.8125rem;
-    color: var(--opaca-text-dim);
-
-    button {
-      background: none;
-      border: none;
-      padding: 0;
-      color: inherit;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--opaca-accent);
-        text-decoration: underline;
-      }
-    }
-
-    .breadcrumb-separator {
-      opacity: 0.5;
-    }
-  }
-
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-
-    .bucket-selector {
-      min-width: 140px;
-      height: 36px;
-    }
-  }
-
-  .close-button {
-    color: var(--opaca-text-dim);
-    background: transparent;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all var(--opaca-transition);
-    padding: 0.25rem;
-    border-radius: 6px;
-
-    &:hover {
-      background-color: var(--opaca-surface);
-      color: var(--opaca-text);
-    }
-  }
-}
-
-.asset-manager-upload-zone {
-  padding: 2rem;
-  border-bottom: 2px dashed var(--opaca-border);
-  background-color: rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  text-align: center;
-  position: relative;
-  transition: all 0.2s;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  &.uploading {
-    pointer-events: none;
-    opacity: 0.7;
-  }
-
-  .upload-icon {
-    margin-bottom: 0.75rem;
-    color: var(--opaca-text-dim);
-  }
-
-  .upload-prompt {
-    color: var(--opaca-text-dim);
-    margin: 0;
-    font-size: 0.875rem;
-
-    span {
-      color: var(--opaca-accent);
-      font-weight: 600;
-    }
-  }
-
-  .uploading-status {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-
-    .status-text {
-      color: var(--opaca-accent);
-      font-weight: 600;
-      font-size: 0.875rem;
-    }
-  }
-}
-
-.asset-manager-grid-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  background-color: rgba(0, 0, 0, 0.1);
-
-  .loading-assets,
-  .no-assets {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    color: #9ca3af;
-  }
-}
-
-.asset-manager-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 1.25rem;
-}
-
-.asset-manager-card {
-  position: relative;
-  background-color: var(--opaca-surface);
-  border-radius: 12px;
-  border: 1px solid var(--opaca-border);
-  overflow: hidden;
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-  display: flex;
-  flex-direction: column;
-
-  &:hover {
-    border-color: var(--opaca-accent);
-    transform: translateY(-2px);
-    box-shadow: var(--opaca-shadow-lg);
-
-    .selection-overlay {
-      opacity: 1;
-    }
-  }
-
-  .asset-thumb {
-    aspect-ratio: 16 / 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--opaca-bg-alt);
-    overflow: hidden;
-    position: relative;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .folder-icon {
-      color: #eab308;
-    }
-  }
-
-  .asset-info {
-    padding: 0.75rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    background-color: var(--opaca-card-bg);
-    flex: 1;
-
-    .filename {
-      font-size: 0.8125rem;
-      font-weight: 500;
-      color: var(--opaca-text);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .file-meta {
-      font-size: 0.6875rem;
-      color: var(--opaca-text-dim);
-    }
-  }
-
-  .selection-overlay {
-    position: absolute;
-    inset: 0;
-    background-color: rgba(var(--opaca-accent-rgb), 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity var(--opaca-transition);
-    pointer-events: none;
-
-    .select-badge {
-      background-color: var(--opaca-accent);
-      color: white;
-      font-size: 0.75rem;
-      font-weight: 600;
-      padding: 0.375rem 0.75rem;
-      border-radius: 9999px;
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  &.folder-card {
-    .asset-thumb {
-      background-color: rgba(234, 179, 8, 0.05);
-    }
-  }
-}
-
-/* FileField Styles */
-
-.file-field-container {
-  margin-bottom: 2rem;
-  background-color: transparent; // Let the row handle background if needed
-  padding: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.file-field-label-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-
-  label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--opaca-text);
-    text-transform: capitalize;
-  }
-
-  .upload-error {
-    font-size: 0.75rem;
-    color: #ef4444;
-    font-weight: 500;
-  }
-}
-
-.file-field-optimistic-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
-  border: 1px solid var(--opaca-primary);
-  border-radius: var(--opaca-radius);
-  background-color: rgba(var(--opaca-primary-rgb), 0.1);
-
-  .optimistic-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    opacity: 0.7;
-
-    img {
-      width: 4rem;
-      height: 4rem;
-      object-fit: cover;
-      border-radius: 0.25rem;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    }
-
-    .file-icon-placeholder {
-      width: 4rem;
-      height: 4rem;
-      background-color: #e5e7eb;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      span {
-        font-size: 0.75rem;
-        font-family: monospace;
-      }
-    }
-
-    .optimistic-details {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-
-      .filename {
-        font-size: 0.875rem;
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .progress-text {
-        font-size: 0.75rem;
-        color: #2563eb;
-        margin-bottom: 0.25rem;
-        font-weight: 600;
-      }
-
-      .progress-bar-bg {
-        width: 100%;
-        background-color: #bfdbfe;
-        border-radius: 9999px;
-        height: 0.375rem;
-
-        .progress-bar-fill {
-          background-color: #2563eb;
-          height: 100%;
-          border-radius: 9999px;
-          transition: width 0.3s;
-        }
-      }
-    }
-  }
-}
-
-.file-field-asset-card {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.file-field-asset-info {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  background-color: var(--opaca-card-bg);
-  justify-content: space-between;
-
-  .asset-preview {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-
-    img {
-      width: 4rem;
-      height: 4rem;
-      object-fit: cover;
-      border-radius: 0.25rem;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-      border: 1px solid #e5e7eb;
-    }
-
-    .file-icon-placeholder {
-      width: 4rem;
-      height: 4rem;
-      background-color: var(--opaca-border);
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid var(--opaca-border);
-
-      span {
-        font-size: 0.75rem;
-        font-family: monospace;
-        color: var(--opaca-subtitle);
-      }
-    }
-
-    .asset-details {
-      display: flex;
-      flex-direction: column;
-
-      .filename {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--opaca-text);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 200px;
-      }
-
-      .filesize {
-        font-size: 0.75rem;
-        color: var(--opaca-subtitle);
-        font-family: monospace;
-        margin-top: 0.125rem;
-      }
-    }
-  }
-
-  .asset-actions {
-    display: flex;
-    gap: 0.75rem;
-
-    button {
-      font-size: 0.875rem;
-      font-weight: 500;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      transition: color 0.2s;
-
-      &.replace-button {
-        color: var(--opaca-primary);
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-
-      &.remove-button {
-        color: var(--opaca-error);
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-}
-
-.file-field-metadata {
-  padding-left: 1rem;
-  border-left: 2px solid #bfdbfe;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding-top: 0.5rem;
-
-  h4 {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #6b7280;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-  }
-
-  .metadata-field {
-    label {
-      display: block;
-      font-size: 0.75rem;
-      font-weight: 500;
-      color: var(--opaca-subtitle);
-      margin-bottom: 0.25rem;
-      text-transform: capitalize;
-
-      .required {
-        color: #ef4444;
-      }
-    }
-
-    input,
-    textarea {
-      width: 100%;
-      font-size: 0.875rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-      padding: 0.5rem 0.75rem;
-      outline: none;
-      transition: all 0.2s;
-
-      &:focus {
-        border-color: #3b82f6;
-        outline: 1px solid #3b82f6;
-      }
-    }
-  }
-}
-
-.file-field-empty-button {
-  width: 100%;
-  padding: 3.5rem 0;
-  border: 2px dashed var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  color: var(--opaca-text-dim);
-  background-color: var(--opaca-surface);
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-
-  &:hover {
-    border-color: var(--opaca-primary);
-    color: var(--opaca-accent);
-    background-color: rgba(124, 58, 237, 0.05);
-  }
-
-  svg {
-    width: 2rem;
-    height: 2rem;
-    color: #9ca3af;
-  }
-
-  span {
-    font-weight: 500;
-    font-size: 0.875rem;
-  }
-}

package/src/admin/ui/styles/badge.scss

@@ -1,13 +0,0 @@
-@use './variables';
-
-.opaca-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  border-radius: var(--opaca-radius);
-  background-color: var(--opaca-primary-glow);
-  color: var(--opaca-accent);
-  letter-spacing: 0.02em;
-}

package/src/admin/ui/styles/base.scss

@@ -1,22 +0,0 @@
-@use './variables';
-
-.opaca-admin *,
-.opaca-admin *::before,
-.opaca-admin *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-.opaca-admin {
-  background-color: var(--opaca-bg);
-  color: var(--opaca-text);
-  font-family: var(--opaca-font);
-  height: 100vh;
-  display: flex;
-  font-size: 14px;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
-}