Home Explore Help
Sign In
star_oraculo
/
frontend
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

mudança no style.css

leonardo 2 months ago
parent
04bc9d7329
commit
1ffa787e1a
8 changed files with 325 additions and 559 deletions
Unified View Show Diff Stats
  1. 2 2
      dist/index.html
  2. 2 49
      src/components/BotaoAlterarTema.vue
  3. 41 0
      src/composables/useTheme.js
  4. 2 1
      src/main.js
  5. 20 0
      src/styles/highlight-theme.css
  6. 0 507
      src/styles/style.css
  7. 193 0
      src/styles/tailwind.css
  8. 65 0
      src/styles/toast-theme.css

+ 2 - 2
dist/index.html
View File 

@@ -6,8 +6,8 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
     <title>ORÁCULO</title>
 
     <title>ORÁCULO</title>
 
-    <script type="module" crossorigin src="/assets/index-YT22NH87.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/assets/index-BkzxuOwG.css">
 
+    <script type="module" crossorigin src="/assets/index-BhVpz5hS.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/assets/index-BEdQmvVX.css">
 
   </head>
 
   </head>
 
   <body class="bg-background">
 
   <body class="bg-background">
 
     <noscript>
 
     <noscript>

+ 2 - 49
src/components/BotaoAlterarTema.vue
View File 

@@ -1,54 +1,7 @@
 
 <script setup>
 
 <script setup>
 
-import { computed, onMounted, ref } from "vue";
 
+import { useTheme } from "../composables/useTheme.js";
 
 
 
-const TEMAS_VALIDOS = ["light", "dark"];
 
-const CHAVE_STORAGE = "theme";
 
-
 
-const darkModeInterno = ref(false);
 
-
 
-const darkMode = computed({
 
-  get: () => darkModeInterno.value,
 
-  set: (valor) => alternarTema(valor)
 
-});
 
-
 
-function alternarTema(forcarEscuro) {
 
-  const escuro = forcarEscuro !== undefined ? forcarEscuro : !darkMode.value;
 
-  const tema = escuro ? "dark" : "light";
 
-
 
-  if (!TEMAS_VALIDOS.includes(tema)) {
 
-    try {
 
-      localStorage.removeItem(CHAVE_STORAGE);
 
-    } catch {}
 
-    return;
 
-  }
 
-
 
-  try {
 
-    localStorage.setItem(CHAVE_STORAGE, tema);
 
-  } catch {}
 
-  aplicarTema(escuro);
 
-}
 
-
 
-function aplicarTema(escuro) {
 
-  document.documentElement.classList.toggle("dark", escuro);
 
-  darkModeInterno.value = escuro;
 
-}
 
-
 
-function obterPreferenciaInicial() {
 
-  let salvo = null;
 
-  try {
 
-    salvo = localStorage.getItem(CHAVE_STORAGE);
 
-  } catch {
 
-    salvo = null;
 
-  }
 
-  if (salvo === "dark") return true;
 
-  if (salvo === "light") return false;
 
-  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false;
 
-}
 
-
 
-onMounted(() => {
 
-  const preferencia = obterPreferenciaInicial();
 
-  aplicarTema(preferencia);
 
-});
 
+const { darkMode } = useTheme();
 
 </script>
 
 </script>
 
 
 
 <template>
 
 <template>

+ 41 - 0
src/composables/useTheme.js
View File 

@@ -0,0 +1,41 @@
 
+import { computed, ref } from "vue";
 
+
 
+const CHAVE_STORAGE = "theme";
 
+
 
+let singleton;
 
+
 
+function obterPreferenciaInicial() {
 
+  let salvo = null;
 
+  try {
 
+    salvo = localStorage.getItem(CHAVE_STORAGE);
 
+  } catch {
 
+    salvo = null;
 
+  }
 
+  if (salvo === "dark") return true;
 
+  if (salvo === "light") return false;
 
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false;
 
+}
 
+
 
+export function useTheme() {
 
+  if (singleton) return singleton;
 
+
 
+  const darkModeInterno = ref(obterPreferenciaInicial());
 
+
 
+  function aplicarTema(escuro) {
 
+    document.documentElement.classList.toggle("dark", escuro);
 
+    try {
 
+      localStorage.setItem(CHAVE_STORAGE, escuro ? "dark" : "light");
 
+    } catch {}
 
+    darkModeInterno.value = escuro;
 
+  }
 
+
 
+  aplicarTema(darkModeInterno.value);
 
+
 
+  const darkMode = computed({
 
+    get: () => darkModeInterno.value,
 
+    set: (valor) => aplicarTema(valor),
 
+  });
 
+
 
+  singleton = { darkMode };
 
+  return singleton;
 
+}

+ 2 - 1
src/main.js
View File 

@@ -1,7 +1,8 @@
 
 import { createApp } from "vue";
 
 import { createApp } from "vue";
 
 import App from "./App.vue";
 
 import App from "./App.vue";
 
 import "@/styles/tailwind.css";
 
 import "@/styles/tailwind.css";
 
-import "@/styles/style.css";
 
+import "@/styles/highlight-theme.css";
 
+import "@/styles/toast-theme.css";
 
 import Toast from "vue-toastification";
 
 import Toast from "vue-toastification";
 
 import "vue-toastification/dist/index.css";
 
 import "vue-toastification/dist/index.css";
 
 import { router } from "./router/index.js";
 
 import { router } from "./router/index.js";

+ 20 - 0
src/styles/highlight-theme.css
View File 

@@ -0,0 +1,20 @@
 
+@layer overrides {
 
+
 
+  .hljs { color: var(--foreground); }
 
+  .hljs-comment, .hljs-punctuation, .hljs-meta { color: var(--muted-foreground); }
 
+  .hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--destructive); font-weight: 600; }
 
+  .hljs-string, .hljs-attr { color: var(--chart-2); }
 
+  .hljs-number, .hljs-literal, .hljs-type, .hljs-class,
 
+  .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--chart-2); }
 
+  .hljs-title, .hljs-function, .hljs-attribute { color: var(--chart-3); font-weight: 600; }
 
+  .hljs-variable, .hljs-template-variable { color: var(--chart-4); }
 
+  .hljs-tag, .hljs-name { color: var(--chart-1); font-weight: 600; }
 
+  .hljs-deletion {
 
+    color: var(--destructive);
 
+    background-color: color-mix(in oklab, var(--destructive) 12%, transparent);
 
+  }
 
+  .hljs-addition {
 
+    color: var(--chart-1);
 
+    background-color: color-mix(in oklab, var(--chart-1) 12%, transparent);
 
+  }
 
+}

+ 0 - 507
src/styles/style.css
View File 

@@ -1,507 +0,0 @@
 
-:root {
 
-  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji",
 
-    "Segoe UI Emoji";
 
-  color-scheme: light;
 
-  --bg: #f6f8ff;
 
-  --surface: rgba(255, 255, 255, 0.72);
 
-  --surface-2: rgba(255, 255, 255, 0.6);
 
-  --border: rgba(15, 23, 42, 0.24);
 
-  --text: #0b1224;
 
-  --muted: rgba(11, 18, 36, 0.65);
 
-  --shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
 
-  --ring: rgba(37, 99, 235, 0.45);
 
-  --btn-border: rgba(37, 99, 235, 0.3);
 
-  --btn-bg-1: rgba(37, 99, 235, 0.12);
 
-  --chat-bg: rgba(255, 255, 255, 0.55);
 
-  --bubble-user-bg: rgba(37, 99, 235, 0.12);
 
-  --bubble-user-border: rgba(37, 99, 235, 0.25);
 
-  --bubble-assistant-bg: rgba(255, 255, 255, 0.7);
 
-  --bubble-assistant-border: rgba(15, 23, 42, 0.14);
 
-}
 
-
 
-html.dark {
 
-  color-scheme: dark;
 
-  --bg: #070b16;
 
-  --surface: rgba(16, 24, 44, 0.72);
 
-  --surface-2: rgba(10, 16, 30, 0.7);
 
-  --border: rgba(255, 255, 255, 0.20);
 
-  --text: #e7ecf6;
 
-  --muted: rgba(231, 236, 246, 0.68);
 
-  --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
 
-  --ring: rgba(91, 140, 255, 0.55);
 
-  --btn-border: rgba(91, 140, 255, 0.28);
 
-  --btn-bg-1: rgba(91, 140, 255, 0.18);
 
-  --chat-bg: rgba(7, 11, 22, 0.6);
 
-  --bubble-user-bg: rgba(27, 42, 78, 0.92);
 
-  --bubble-user-border: rgba(42, 58, 99, 0.9);
 
-  --bubble-assistant-bg: rgba(15, 26, 48, 0.9);
 
-  --bubble-assistant-border: rgba(34, 48, 82, 0.9);
 
-}
 
-
 
-body {
 
-  margin: 0;
 
-  background: radial-gradient(1200px 700px at 15% 15%, rgba(91, 140, 255, 0.16), transparent 60%),
 
-    radial-gradient(900px 700px at 85% 30%, rgba(162, 102, 255, 0.14), transparent 55%),
 
-    radial-gradient(900px 700px at 60% 85%, rgba(0, 198, 255, 0.08), transparent 60%), var(--bg);
 
-  color: var(--text);
 
-}
 
-
 
-* {
 
-  box-sizing: border-box;
 
-}
 
-
 
-.app {
 
-  height: 100vh;
 
-  overflow: hidden;
 
-}
 
-
 
-.panel {
 
-  background: var(--surface);
 
-  border: 1px solid var(--border);
 
-  border-radius: 12px;
 
-  padding: 16px;
 
-  box-shadow: var(--shadow);
 
-  backdrop-filter: blur(10px);
 
-}
 
-
 
-.title {
 
-  font-size: 18px;
 
-  font-weight: 650;
 
-  margin: 0 0 10px 0;
 
-}
 
-
 
-.muted {
 
-  color: var(--muted);
 
-  font-size: 12px;
 
-}
 
-
 
-@layer base {
 
-  button {
 
-    border: 1px solid var(--btn-border);
 
-    background: var(--btn-bg-1);
 
-    color: var(--text);
 
-    padding: 10px 12px;
 
-    border-radius: 10px;
 
-    cursor: pointer;
 
-    transition: transform 120ms ease, border-color 120ms ease;
 
-  }
 
-
 
-  button:hover:not(:disabled) {
 
-    transform: translateY(-1px);
 
-    border-color: var(--ring);
 
-  }
 
-
 
-  button:disabled {
 
-    opacity: 0.5;
 
-    cursor: not-allowed;
 
-  }
 
-}
 
-
 
-input,
 
-textarea {
 
-  width: 100%;
 
-  border: 1px solid var(--border);
 
-  background: var(--surface-2);
 
-  color: var(--text);
 
-  padding: 10px 12px;
 
-  border-radius: 10px;
 
-  outline: none;
 
-}
 
-
 
-select {
 
-  width: 100%;
 
-  border: 1px solid var(--border);
 
-  background: var(--surface-2);
 
-  color: var(--text);
 
-  padding: 10px 12px;
 
-  border-radius: 10px;
 
-  outline: none;
 
-  appearance: none;
 
-}
 
-
 
-textarea {
 
-  resize: vertical;
 
-}
 
-
 
-input:focus,
 
-textarea:focus,
 
-select:focus {
 
-  border-color: var(--ring);
 
-  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.18);
 
-}
 
-
 
-.themeToggle {
 
-  position: fixed;
 
-  top: 14px;
 
-  right: 14px;
 
-  z-index: 1000;
 
-}
 
-
 
-
 
-
 
-.appShell {
 
-  height: 100%;
 
-  overflow: hidden;
 
-  display: grid;
 
-  grid-template-columns: 340px 1fr;
 
-}
 
-
 
-.sidebar {
 
-  border-right: 1px solid var(--border);
 
-  background: var(--surface);
 
-  box-shadow: var(--shadow);
 
-  backdrop-filter: blur(10px);
 
-  display: grid;
 
-  grid-template-rows: auto 1fr auto;
 
-  min-height: 0;
 
-  gap: 14px;
 
-  overflow: hidden;
 
-  padding: 18px;
 
-}
 
-
 
-.sidebarHeader {
 
-  padding-right: 34px;
 
-}
 
-
 
-.sidebarScroll {
 
-  overflow: auto;
 
-  display: grid;
 
-  gap: 14px;
 
-  min-height: 0;
 
-  padding-right: 2px;
 
-}
 
-
 
-.sidebarFooter {
 
-  font-size: 11px;
 
-  line-height: 1.35;
 
-  padding-right: 34px;
 
-}
 
-
 
-.main {
 
-  padding: 22px;
 
-  display: grid;
 
-  align-items: stretch;
 
-  min-height: 0;
 
-  overflow: auto;
 
-}
 
-
 
-.landingActions {
 
-  display: flex;
 
-  justify-content: flex-end;
 
-  margin-top: 10px;
 
-}
 
-
 
-.topbar {
 
-  display: flex;
 
-  justify-content: space-between;
 
-  align-items: flex-end;
 
-  gap: 16px;
 
-  margin-bottom: 16px;
 
-}
 
-
 
-.brandTitle {
 
-  letter-spacing: 0.14em;
 
-  font-weight: 760;
 
-  font-size: 16px;
 
-}
 
-
 
-.brandSub {
 
-  margin-top: 6px;
 
-  color: var(--muted);
 
-  font-size: 12px;
 
-}
 
-
 
-.layout {
 
-  display: grid;
 
-  grid-template-columns: 1.35fr 0.65fr;
 
-  gap: 16px;
 
-}
 
-
 
-.stack {
 
-  display: grid;
 
-  gap: 16px;
 
-}
 
-
 
-.footer {
 
-  margin-top: 14px;
 
-}
 
-
 
-@media (max-width: 980px) {
 
-  .appShell {
 
-    grid-template-columns: 1fr;
 
-  }
 
-  .sidebar {
 
-    border-right: 0;
 
-    border-bottom: 1px solid var(--border);
 
-  }
 
-  .main {
 
-    padding: 16px;
 
-  }
 
-  .topbar {
 
-    align-items: stretch;
 
-    flex-direction: column;
 
-  }
 
-  .layout {
 
-    grid-template-columns: 1fr;
 
-  }
 
-}
 
-
 
-/* ─── Prose: estilos para Markdown renderizado no chat ─── */
 
-.prose-content {
 
-  font-size: 0.875rem;
 
-  line-height: 1.65;
 
-  color: inherit;
 
-}
 
-
 
-.prose-content p {
 
-  margin: 0 0 0.6em;
 
-}
 
-.prose-content p:last-child {
 
-  margin-bottom: 0;
 
-}
 
-
 
-.prose-content ul,
 
-.prose-content ol {
 
-  margin: 0.4em 0 0.6em;
 
-  padding-left: 1.4em;
 
-}
 
-.prose-content li {
 
-  margin: 0.2em 0;
 
-}
 
-
 
-.prose-content h1, .prose-content h2, .prose-content h3,
 
-.prose-content h4, .prose-content h5, .prose-content h6 {
 
-  font-weight: 650;
 
-  line-height: 1.3;
 
-  margin: 0.8em 0 0.3em;
 
-}
 
-.prose-content h1 { font-size: 1.15em; }
 
-.prose-content h2 { font-size: 1.05em; }
 
-.prose-content h3 { font-size: 0.95em; }
 
-.prose-content h4, .prose-content h5, .prose-content h6 { font-size: 0.875em; }
 
-
 
-.prose-content strong { font-weight: 650; }
 
-.prose-content em { font-style: italic; }
 
-
 
-.prose-content a {
 
-  color: var(--ring);
 
-  text-decoration: underline;
 
-  text-underline-offset: 2px;
 
-}
 
-
 
-.prose-content blockquote {
 
-  margin: 0.5em 0;
 
-  padding-left: 0.75em;
 
-  border-left: 3px solid var(--border);
 
-  color: var(--muted);
 
-  font-style: italic;
 
-}
 
-
 
-.prose-content hr {
 
-  border: none;
 
-  border-top: 1px solid var(--border);
 
-  margin: 0.8em 0;
 
-}
 
-
 
-/* Código inline */
 
-.prose-content code:not(pre code) {
 
-  background: rgba(91, 140, 255, 0.1);
 
-  border: 1px solid rgba(91, 140, 255, 0.2);
 
-  border-radius: 4px;
 
-  padding: 0.1em 0.35em;
 
-  font-family: "JetBrains Mono", "Fira Mono", monospace;
 
-  font-size: 0.82em;
 
-}
 
-html.dark .prose-content code:not(pre code) {
 
-  background: rgba(91, 140, 255, 0.15);
 
-  border-color: rgba(91, 140, 255, 0.25);
 
-}
 
-
 
-/* Blocos de código */
 
-.code-block-wrapper {
 
-  margin: 0.5em 0;
 
-  border-radius: 10px;
 
-  overflow: hidden;
 
-  border: 1px solid var(--border);
 
-  font-size: 0.8em;
 
-}
 
-
 
-.code-block-header {
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: space-between;
 
-  padding: 4px 10px;
 
-  background: rgba(15, 23, 42, 0.06);
 
-  border-bottom: 1px solid var(--border);
 
-}
 
-html.dark .code-block-header {
 
-  background: rgba(255, 255, 255, 0.05);
 
-}
 
-
 
-.code-lang {
 
-  font-family: "JetBrains Mono", monospace;
 
-  font-size: 0.78em;
 
-  color: var(--muted);
 
-  text-transform: lowercase;
 
-}
 
-
 
-.code-copy-btn {
 
-  display: inline-flex;
 
-  align-items: center;
 
-  gap: 4px;
 
-  border: 1px solid var(--border);
 
-  background: transparent;
 
-  color: var(--muted);
 
-  padding: 2px 8px;
 
-  border-radius: 5px;
 
-  cursor: pointer;
 
-  font-size: 0.75em;
 
-  font-family: ui-sans-serif, system-ui, sans-serif;
 
-  transition: color 120ms, border-color 120ms;
 
-  transform: none;
 
-}
 
-.code-copy-btn:hover {
 
-  color: var(--text);
 
-  border-color: var(--ring);
 
-  transform: none;
 
-}
 
-.code-copy-btn.copied {
 
-  color: #22c55e;
 
-  border-color: #22c55e44;
 
-}
 
-.code-copy-btn svg {
 
-  width: 11px;
 
-  height: 11px;
 
-}
 
-
 
-.code-block-wrapper pre {
 
-  margin: 0;
 
-  padding: 12px 14px;
 
-  overflow-x: auto;
 
-  background: rgba(15, 23, 42, 0.04);
 
-}
 
-html.dark .code-block-wrapper pre {
 
-  background: rgba(0, 0, 0, 0.3);
 
-}
 
-.code-block-wrapper pre code {
 
-  font-family: "JetBrains Mono", "Fira Mono", monospace;
 
-  font-size: 1em;
 
-  line-height: 1.6;
 
-  border: none;
 
-  background: none;
 
-  padding: 0;
 
-  border-radius: 0;
 
-}
 
-
 
-/* ─── Highlight.js tema (light/dark) ─── */
 
-.hljs { color: #24292e; }
 
-.hljs-comment, .hljs-punctuation { color: #6a737d; }
 
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #d73a49; font-weight: 600; }
 
-.hljs-string, .hljs-attr { color: #032f62; }
 
-.hljs-number, .hljs-literal { color: #005cc5; }
 
-.hljs-title, .hljs-function { color: #6f42c1; font-weight: 600; }
 
-.hljs-variable, .hljs-template-variable { color: #e36209; }
 
-.hljs-type, .hljs-class { color: #005cc5; font-weight: 600; }
 
-.hljs-meta { color: #6a737d; }
 
-.hljs-tag { color: #22863a; }
 
-.hljs-name { color: #22863a; font-weight: 600; }
 
-.hljs-attribute { color: #6f42c1; }
 
-.hljs-symbol, .hljs-bullet, .hljs-link { color: #005cc5; }
 
-.hljs-deletion { color: #b31d28; background-color: #ffeef0; }
 
-.hljs-addition { color: #22863a; background-color: #f0fff4; }
 
-
 
-html.dark .hljs { color: #cdd9e5; }
 
-html.dark .hljs-comment, html.dark .hljs-punctuation { color: #768390; }
 
-html.dark .hljs-keyword, html.dark .hljs-selector-tag, html.dark .hljs-built_in { color: #f47067; font-weight: 600; }
 
-html.dark .hljs-string, html.dark .hljs-attr { color: #96d0ff; }
 
-html.dark .hljs-number, html.dark .hljs-literal { color: #6cb6ff; }
 
-html.dark .hljs-title, html.dark .hljs-function { color: #dcbdfb; font-weight: 600; }
 
-html.dark .hljs-variable, html.dark .hljs-template-variable { color: #f69d50; }
 
-html.dark .hljs-type, html.dark .hljs-class { color: #6cb6ff; font-weight: 600; }
 
-html.dark .hljs-meta { color: #768390; }
 
-html.dark .hljs-tag { color: #8ddb8c; }
 
-html.dark .hljs-name { color: #8ddb8c; font-weight: 600; }
 
-html.dark .hljs-attribute { color: #dcbdfb; }
 
-html.dark .hljs-symbol, html.dark .hljs-bullet, html.dark .hljs-link { color: #6cb6ff; }
 
-html.dark .hljs-deletion { color: #ff938a; background-color: rgba(255, 80, 60, 0.12); }
 
-html.dark .hljs-addition { color: #8ddb8c; background-color: rgba(70, 200, 100, 0.1); }
 
-
 
-/* ─── Vue-Toastification overrides ─── */
 
-:root {
 
-  --toastify-toast-min-height: 48px;
 
-  --toastify-toast-max-height: 200px;
 
-  --toastify-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 
-  --toastify-z-index: 99999;
 
-}
 
-
 
-.Vue-Toastification__toast {
 
-  border-radius: 12px !important;
 
-  font-size: 0.875rem !important;
 
-  font-weight: 500 !important;
 
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
 
-  padding: 12px 16px !important;
 
-  min-height: 48px !important;
 
-}
 
-
 
-.Vue-Toastification__toast--success {
 
-  background-color: #f0fdf4 !important;
 
-  color: #15803d !important;
 
-  border: 1px solid #bbf7d0 !important;
 
-}
 
-
 
-.Vue-Toastification__toast--error {
 
-  background-color: #fef2f2 !important;
 
-  color: #b91c1c !important;
 
-  border: 1px solid #fecaca !important;
 
-}
 
-
 
-.Vue-Toastification__toast--info {
 
-  background-color: #eff6ff !important;
 
-  color: #1d4ed8 !important;
 
-  border: 1px solid #bfdbfe !important;
 
-}
 
-
 
-.Vue-Toastification__toast--warning {
 
-  background-color: #fffbeb !important;
 
-  color: #b45309 !important;
 
-  border: 1px solid #fde68a !important;
 
-}
 
-
 
-html.dark .Vue-Toastification__toast--success {
 
-  background-color: rgba(20, 83, 45, 0.9) !important;
 
-  color: #86efac !important;
 
-  border-color: rgba(74, 222, 128, 0.25) !important;
 
-  backdrop-filter: blur(10px);
 
-}
 
-
 
-html.dark .Vue-Toastification__toast--error {
 
-  background-color: rgba(127, 29, 29, 0.9) !important;
 
-  color: #fca5a5 !important;
 
-  border-color: rgba(252, 165, 165, 0.25) !important;
 
-  backdrop-filter: blur(10px);
 
-}
 
-
 
-html.dark .Vue-Toastification__toast--info {
 
-  background-color: rgba(30, 58, 138, 0.9) !important;
 
-  color: #93c5fd !important;
 
-  border-color: rgba(147, 197, 253, 0.25) !important;
 
-  backdrop-filter: blur(10px);
 
-}
 
-
 
-html.dark .Vue-Toastification__toast--warning {
 
-  background-color: rgba(120, 53, 15, 0.9) !important;
 
-  color: #fcd34d !important;
 
-  border-color: rgba(252, 211, 77, 0.25) !important;
 
-  backdrop-filter: blur(10px);
 
-}
 
-
 
-.Vue-Toastification__progress-bar {
 
-  opacity: 0.35 !important;
 
-}
 
-
 
-.Vue-Toastification__close-button {
 
-  opacity: 0.5 !important;
 
-}
 
-.Vue-Toastification__close-button:hover {
 
-  opacity: 1 !important;
 
-}

+ 193 - 0
src/styles/tailwind.css
View File 

@@ -1,6 +1,8 @@
 
 @import "tailwindcss";
 
 @import "tailwindcss";
 
 @import "tailwindcss-primeui";
 
 @import "tailwindcss-primeui";
 
 
 
+@layer theme, base, components, utilities, overrides;
 
+
 
 @custom-variant dark (&:is(.dark *));
 
 @custom-variant dark (&:is(.dark *));
 
 
 
 @utility container {
 
 @utility container {
 
@@ -244,4 +246,195 @@ body {
 
     @apply bg-background text-foreground;
 
     @apply bg-background text-foreground;
 
     letter-spacing: var(--tracking-normal);
 
     letter-spacing: var(--tracking-normal);
 
   }
 
   }
 
+
 
+  button {
 
+    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
 
+    background: color-mix(in oklab, var(--primary) 12%, transparent);
 
+    color: var(--foreground);
 
+    padding: 10px 12px;
 
+    border-radius: 10px;
 
+    cursor: pointer;
 
+    transition: border-color 120ms ease;
 
+  }
 
+
 
+  button:disabled {
 
+    opacity: 0.5;
 
+    cursor: not-allowed;
 
+  }
 
+
 
+  input,
 
+  textarea,
 
+  select {
 
+    width: 100%;
 
+    border: 1px solid var(--border);
 
+    background: var(--input);
 
+    color: var(--foreground);
 
+    padding: 10px 12px;
 
+    border-radius: 10px;
 
+    outline: none;
 
+  }
 
+
 
+  textarea {
 
+    resize: vertical;
 
+  }
 
+
 
+  select {
 
+    appearance: none;
 
+  }
 
+
 
+  input:focus,
 
+  textarea:focus,
 
+  select:focus {
 
+    border-color: var(--ring);
 
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
 
+  }
 
+}
 
+
 
+@layer components {
 
+  
+  .prose-content {
 
+    font-size: 0.875rem;
 
+    line-height: 1.65;
 
+    color: inherit;
 
+  }
 
+
 
+  .prose-content p {
 
+    margin: 0 0 0.6em;
 
+  }
 
+  .prose-content p:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+
 
+  .prose-content ul,
 
+  .prose-content ol {
 
+    margin: 0.4em 0 0.6em;
 
+    padding-left: 1.4em;
 
+  }
 
+  .prose-content li {
 
+    margin: 0.2em 0;
 
+  }
 
+
 
+  .prose-content h1, .prose-content h2, .prose-content h3,
 
+  .prose-content h4, .prose-content h5, .prose-content h6 {
 
+    font-weight: 650;
 
+    line-height: 1.3;
 
+    margin: 0.8em 0 0.3em;
 
+  }
 
+  .prose-content h1 { font-size: 1.15em; }
 
+  .prose-content h2 { font-size: 1.05em; }
 
+  .prose-content h3 { font-size: 0.95em; }
 
+  .prose-content h4, .prose-content h5, .prose-content h6 { font-size: 0.875em; }
 
+
 
+  .prose-content strong { font-weight: 650; }
 
+  .prose-content em { font-style: italic; }
 
+
 
+  .prose-content a {
 
+    color: var(--ring);
 
+    text-decoration: underline;
 
+    text-underline-offset: 2px;
 
+  }
 
+
 
+  .prose-content blockquote {
 
+    margin: 0.5em 0;
 
+    padding-left: 0.75em;
 
+    border-left: 3px solid var(--border);
 
+    color: var(--muted-foreground);
 
+    font-style: italic;
 
+  }
 
+
 
+  .prose-content hr {
 
+    border: none;
 
+    border-top: 1px solid var(--border);
 
+    margin: 0.8em 0;
 
+  }
 
+
 
+  
+  .prose-content code:not(pre code) {
 
+    background: rgba(91, 140, 255, 0.1);
 
+    border: 1px solid rgba(91, 140, 255, 0.2);
 
+    border-radius: 4px;
 
+    padding: 0.1em 0.35em;
 
+    font-family: "JetBrains Mono", "Fira Mono", monospace;
 
+    font-size: 0.82em;
 
+  }
 
+  .dark .prose-content code:not(pre code) {
 
+    background: rgba(91, 140, 255, 0.15);
 
+    border-color: rgba(91, 140, 255, 0.25);
 
+  }
 
+
 
+ 
+  .code-block-wrapper {
 
+    margin: 0.5em 0;
 
+    border-radius: 10px;
 
+    overflow: hidden;
 
+    border: 1px solid var(--border);
 
+    font-size: 0.8em;
 
+  }
 
+
 
+  .code-block-header {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    padding: 4px 10px;
 
+    background: rgba(15, 23, 42, 0.06);
 
+    border-bottom: 1px solid var(--border);
 
+  }
 
+  .dark .code-block-header {
 
+    background: rgba(255, 255, 255, 0.05);
 
+  }
 
+
 
+  .code-lang {
 
+    font-family: "JetBrains Mono", monospace;
 
+    font-size: 0.78em;
 
+    color: var(--muted-foreground);
 
+    text-transform: lowercase;
 
+  }
 
+
 
+  .code-copy-btn {
 
+    display: inline-flex;
 
+    align-items: center;
 
+    gap: 4px;
 
+    border: 1px solid var(--border);
 
+    background: transparent;
 
+    color: var(--muted-foreground);
 
+    padding: 2px 8px;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+    font-size: 0.75em;
 
+    font-family: ui-sans-serif, system-ui, sans-serif;
 
+    transition: color 120ms, border-color 120ms;
 
+    transform: none;
 
+  }
 
+  .code-copy-btn:hover {
 
+    color: var(--foreground);
 
+    border-color: var(--ring);
 
+    transform: none;
 
+  }
 
+  .code-copy-btn.copied {
 
+    color: #22c55e;
 
+    border-color: #22c55e44;
 
+  }
 
+  .code-copy-btn svg {
 
+    width: 11px;
 
+    height: 11px;
 
+  }
 
+
 
+  .code-block-wrapper pre {
 
+    margin: 0;
 
+    padding: 12px 14px;
 
+    overflow-x: auto;
 
+    background: rgba(15, 23, 42, 0.04);
 
+  }
 
+  .dark .code-block-wrapper pre {
 
+    background: rgba(0, 0, 0, 0.3);
 
+  }
 
+  .code-block-wrapper pre code {
 
+    font-family: "JetBrains Mono", "Fira Mono", monospace;
 
+    font-size: 1em;
 
+    line-height: 1.6;
 
+    border: none;
 
+    background: none;
 
+    padding: 0;
 
+    border-radius: 0;
 
+  }
 
 }
 
 }

+ 65 - 0
src/styles/toast-theme.css
View File 

@@ -0,0 +1,65 @@
 
+@layer overrides {
 
+  
+  :root {
 
+    --toastify-toast-min-height: 48px;
 
+    --toastify-toast-max-height: 200px;
 
+    --toastify-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 
+    --toastify-z-index: 99999;
 
+  }
 
+
 
+  .Vue-Toastification__toast {
 
+    border-radius: 12px !important;
 
+    font-size: 0.875rem !important;
 
+    font-weight: 500 !important;
 
+    box-shadow: var(--shadow-lg) !important;
 
+    padding: 12px 16px !important;
 
+    min-height: 48px !important;
 
+  }
 
+
 
+  .Vue-Toastification__toast--success {
 
+    background-color: color-mix(in oklab, var(--chart-1) 10%, var(--background)) !important;
 
+    color: var(--chart-1) !important;
 
+    border: 1px solid color-mix(in oklab, var(--chart-1) 30%, transparent) !important;
 
+  }
 
+
 
+  .Vue-Toastification__toast--error {
 
+    background-color: color-mix(in oklab, var(--destructive) 10%, var(--background)) !important;
 
+    color: var(--destructive) !important;
 
+    border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent) !important;
 
+  }
 
+
 
+  .Vue-Toastification__toast--info {
 
+    background-color: color-mix(in oklab, var(--chart-2) 10%, var(--background)) !important;
 
+    color: var(--chart-2) !important;
 
+    border: 1px solid color-mix(in oklab, var(--chart-2) 30%, transparent) !important;
 
+  }
 
+
 
+  .Vue-Toastification__toast--warning {
 
+    background-color: color-mix(in oklab, var(--chart-4) 10%, var(--background)) !important;
 
+    color: var(--chart-4) !important;
 
+    border: 1px solid color-mix(in oklab, var(--chart-4) 30%, transparent) !important;
 
+  }
 
+
 
+  .dark .Vue-Toastification__toast--success,
 
+  .dark .Vue-Toastification__toast--error,
 
+  .dark .Vue-Toastification__toast--info,
 
+  .dark .Vue-Toastification__toast--warning {
 
+    backdrop-filter: blur(10px);
 
+  }
 
+
 
+  
+  .dark .Vue-Toastification__toast--error {
 
+    color: color-mix(in oklab, var(--destructive) 55%, white) !important;
 
+  }
 
+
 
+  .Vue-Toastification__progress-bar {
 
+    opacity: 0.35 !important;
 
+  }
 
+
 
+  .Vue-Toastification__close-button {
 
+    opacity: 0.5 !important;
 
+  }
 
+  .Vue-Toastification__close-button:hover {
 
+    opacity: 1 !important;
 
+  }
 
+}