opacacms 0.1.11 → 0.1.13

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

@@ -1,469 +0,0 @@
-
-.opaca-lexical-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.opaca-lexical-modes {
-  display: inline-flex;
-  gap: 2px;
-  background-color: var(--opaca-surface);
-  padding: 3px;
-  border-radius: var(--opaca-radius-lg);
-  border: 1px solid var(--opaca-border);
-  align-self: flex-start;
-  margin-bottom: 0.25rem;
-
-  .opaca-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.75rem;
-    border-radius: var(--opaca-radius);
-    border: none;
-    background-color: transparent;
-    color: var(--opaca-text-muted);
-    font-weight: 500;
-    min-width: 80px;
-    transition: all var(--opaca-transition);
-
-    &:hover {
-      color: var(--opaca-text);
-      background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    &.opaca-btn-primary {
-      background-color: var(--opaca-primary);
-      color: white;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
-.opaca-lexical-container {
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius-lg);
-  background-color: var(--opaca-surface);
-  overflow: hidden;
-  transition: all var(--opaca-transition);
-  display: flex;
-  flex-direction: column;
-
-  &:focus-within {
-    border-color: var(--opaca-accent);
-    box-shadow: 0 0 0 2px var(--opaca-primary-glow);
-  }
-
-  &.mode-notion {
-    .opaca-lexical-content {
-      padding: 1.5rem 1rem;
-    }
-  }
-
-  &.is-readonly {
-    background-color: rgba(255, 255, 255, 0.02);
-    cursor: not-allowed;
-    .opaca-lexical-content {
-      padding: 0rem;
-    }
-  }
-}
-
-.opaca-lexical-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.125rem;
-  padding: 0.375rem;
-  border-bottom: 1px solid var(--opaca-border);
-  background-color: var(--opaca-card-bg);
-  align-items: center;
-}
-
-.opaca-lexical-bubble-menu {
-  background: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius-lg);
-  padding: 4px;
-  display: flex;
-  gap: 4px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8px);
-}
-
-.opaca-lexical-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--opaca-radius);
-  background: transparent;
-  border: none;
-  color: var(--opaca-text-muted);
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--opaca-text);
-  }
-
-  &.is-active {
-    background-color: var(--opaca-primary-glow);
-    color: var(--opaca-accent);
-  }
-}
-
-.opaca-lexical-divider {
-  width: 1px;
-  height: 18px;
-  background-color: var(--opaca-border);
-  margin: 0 0.25rem;
-}
-
-.opaca-lexical-placeholder {
-  color: var(--opaca-text-dim);
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  pointer-events: none;
-  font-style: normal;
-  font-size: 0.875rem;
-  opacity: 0.5;
-}
-
-.opaca-lexical-editor-inner {
-  position: relative;
-  flex: 1;
-}
-
-.opaca-lexical-content {
-  min-height: 160px;
-  padding: 1rem;
-  outline: none;
-  line-height: 1.6;
-  color: var(--opaca-text);
-  font-size: 0.9375rem;
-
-  & > *:first-child { margin-top: 0; }
-  & > *:last-child { margin-bottom: 0; }
-
-  p { margin: 0.75em 0; }
-
-  /* Heading Styles */
-  .editor-heading-h1 {
-    font-size: 2.25rem;
-    font-weight: 700;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    color: var(--opaca-text);
-  }
-
-  .editor-heading-h2 {
-    font-size: 1.875rem;
-    font-weight: 600;
-    margin-top: 1.25rem;
-    margin-bottom: 0.5rem;
-    color: var(--opaca-text);
-  }
-
-  /* Inline Formatting Styles */
-  .editor-text-bold {
-    font-weight: 700;
-  }
-
-  .editor-text-italic {
-    font-style: italic;
-  }
-
-  .editor-text-underline {
-    text-decoration: underline;
-  }
-
-  .editor-text-strikethrough {
-    text-decoration: line-through;
-  }
-
-  .editor-text-code {
-    background-color: rgba(255, 255, 255, 0.05);
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 0.9em;
-  }
-  
-  ul {
-    list-style-type: disc;
-    padding-left: 1.5rem;
-    margin: 0.5rem 0;
-  }
-  
-  ol {
-    list-style-type: decimal;
-    padding-left: 1.5rem;
-    margin: 0.5rem 0;
-  }
-  
-  .editor-listitem {
-    margin: 0.25rem 0;
-  }
-
-  /* List Extensions */
-  ul[data-type="taskList"] {
-    list-style: none;
-    padding: 0;
-    p { margin: 0; }
-    li {
-      display: flex;
-      margin-bottom: 0.25rem;
-      & > label {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
-        user-select: none;
-      }
-      & > div { flex: 1 1 auto; }
-      input[type="checkbox"] {
-        cursor: pointer;
-        width: 1rem;
-        height: 1rem;
-        margin-top: 0.2rem;
-        accent-color: var(--opaca-primary);
-      }
-      &[data-checked="true"] > div > p {
-        text-decoration: line-through;
-        color: var(--opaca-text-muted);
-      }
-    }
-  }
-
-  blockquote {
-    border-left: 3px solid var(--opaca-border);
-    padding-left: 1rem;
-    margin: 1em 0;
-    color: var(--opaca-text-dim);
-    font-style: italic;
-  }
-
-  .editor-image-wrapper {
-    position: relative;
-    display: inline-block;
-    cursor: default;
-    user-select: none;
-    line-height: 0;
-
-    &.is-selected {
-      outline: 3px solid var(--opaca-primary);
-      outline-offset: 2px;
-      border-radius: 4px;
-      box-shadow: 0 0 0 4px var(--opaca-primary-glow);
-    }
-
-    .editor-image-img {
-      max-width: 100%;
-      height: auto;
-      border-radius: var(--opaca-radius);
-    }
-
-    .editor-image-resizer {
-      position: absolute;
-      right: -6px;
-      bottom: -6px;
-      width: 14px;
-      height: 14px;
-      background-color: var(--opaca-primary);
-      border: 2px solid white;
-      cursor: nwse-resize;
-      z-index: 20;
-      border-radius: 50%;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-
-      &:hover {
-        background-color: var(--opaca-accent);
-        transform: scale(1.2);
-      }
-    }
-
-    .editor-image-delete {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      width: 24px;
-      height: 24px;
-      background-color: var(--opaca-error);
-      color: white;
-      border: 1px solid white;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      z-index: 10;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      padding: 0;
-      transition: transform 0.2s;
-
-      &:hover {
-        transform: scale(1.1);
-        background-color: #ff4d4d;
-      }
-    }
-  }
-
-  a {
-    color: var(--opaca-primary);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-
-  pre {
-    background-color: var(--opaca-bg);
-    color: var(--opaca-text);
-    padding: 1rem;
-    border-radius: var(--opaca-radius);
-    overflow-x: auto;
-    border: 1px solid var(--opaca-border);
-    margin: 1em 0;
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.85rem;
-    }
-  }
-
-  /* Placeholder Extension */
-  [contenteditable="true"] p.is-editor-empty:first-child::before,
-  [contenteditable="true"] h1.is-empty::before,
-  [contenteditable="true"] h2.is-empty::before,
-  [contenteditable="true"] h3.is-empty::before,
-  [contenteditable="true"] [data-placeholder]::before {
-    content: attr(data-placeholder);
-    float: left;
-    color: var(--opaca-text-muted);
-    pointer-events: none;
-    height: 0;
-    font-style: italic;
-    opacity: 0.6;
-  }
-}
-
-/* Floating & Bubble Menus */
-.opaca-lexical-bubble-menu {
-  display: flex;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  padding: 0.25rem;
-  gap: 0.125rem;
-}
-
-.opaca-lexical-floating-menu {
-  display: flex;
-  align-items: center;
-  margin-left: -32px;
-}
-
-.opaca-lexical-btn-plus {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--opaca-surface);
-  border: 1px solid var(--opaca-border);
-  color: var(--opaca-text-muted);
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-  font-size: 1rem;
-  margin-right: 0.5rem;
-
-  &:hover {
-    background-color: var(--opaca-primary-glow);
-    color: var(--opaca-primary);
-    border-color: var(--opaca-primary);
-  }
-}
-
-.opaca-lexical-floating-menu-items {
-  display: none;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  padding: 0.25rem;
-  gap: 0.125rem;
-  animation: opaca-fade-in 100ms ease-out;
-}
-
-.opaca-lexical-floating-menu:hover .opaca-lexical-floating-menu-items {
-  display: flex;
-}
-
-/* Slash Menu List */
-.opaca-slash-menu {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  padding: 0.5rem;
-  max-height: 300px;
-  overflow-y: auto;
-  min-width: 250px;
-}
-
-.opaca-slash-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.3rem;
-  border: none;
-  background: transparent;
-  color: var(--opaca-text);
-  border-radius: var(--opaca-radius);
-  cursor: pointer;
-  text-align: left;
-  transition: background-color var(--opaca-transition);
-
-  &:hover,
-  &.is-selected {
-    background-color: var(--opaca-surface);
-  }
-}
-
-.opaca-slash-menu-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background-color: var(--opaca-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  color: var(--opaca-text-muted);
-}
-
-.opaca-slash-menu-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.opaca-slash-menu-title {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--opaca-text);
-}
-
-.opaca-slash-menu-desc {
-  font-size: 0.7rem;
-  color: var(--opaca-text-muted);
-}
-
-.opaca-slash-menu-empty {
-  padding: 1rem;
-  color: var(--opaca-text-muted);
-  font-size: 0.8125rem;
-  text-align: center;
-}

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

@@ -1,102 +0,0 @@
-@use './variables';
-@use './animations';
-
-.opaca-loading-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100%;
-  background-color: var(--opaca-bg);
-  color: var(--opaca-text);
-  gap: 2rem;
-}
-
-.opaca-loading-logo-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.opaca-loading-logo-pulse {
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  background-color: var(--opaca-primary);
-  border-radius: var(--opaca-radius);
-  opacity: 0.2;
-  animation: opaca-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.opaca-loading-status {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.875rem;
-  color: var(--opaca-text-muted);
-  animation: opaca-fade-in 1s ease-out;
-}
-
-/* Login Container */
-.opaca-login-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  width: 100%;
-  background-color: var(--opaca-bg);
-  font-family: var(--opaca-font);
-  color: var(--opaca-text);
-  -webkit-font-smoothing: antialiased;
-}
-
-.opaca-login-card {
-  width: 100%;
-  max-width: 380px;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius-lg);
-  padding: 2rem;
-}
-
-.opaca-login-header {
-  text-align: center;
-  margin-bottom: 1.5rem;
-}
-
-.opaca-login-logo {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--opaca-primary);
-  border-radius: var(--opaca-radius);
-  margin: 0 auto 1rem;
-}
-
-.opaca-logo-circle {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--opaca-primary);
-  border-radius: var(--opaca-radius);
-  color: white;
-}
-
-.opaca-login-error {
-  padding: 0.625rem 0.75rem;
-  background-color: var(--opaca-error-bg);
-  border: 1px solid rgba(248, 113, 113, 0.2);
-  color: var(--opaca-error);
-  border-radius: var(--opaca-radius);
-  margin-bottom: 1.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-}