head.tmpl 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en" class="dark">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Obsidian Admin Interface</title>
  7. <script src="https://cdn.tailwindcss.com"></script>
  8. <link rel="icon" type="image/webp" href="/favicon.webp">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
  10. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  12. <style>
  13. body { font-family: 'Inter', sans-serif; }
  14. /* 1. Fundalul scrollbar-ului rămâne mereu transparent */
  15. .custom-scrollbar::-webkit-scrollbar {
  16. width: 4px; /* Am mărit puțin la 4px pentru a fi utilizabil, dar discret */
  17. }
  18. /* 2. Thumb-ul este invizibil implicit (sau foarte transparent) */
  19. .custom-scrollbar::-webkit-scrollbar-thumb {
  20. background: transparent;
  21. border-radius: 10px;
  22. transition: background 0.3s ease;
  23. }
  24. /* 3. Thumb-ul devine vizibil doar când facem HOVER pe containerul părinte */
  25. .custom-scrollbar:hover::-webkit-scrollbar-thumb {
  26. background: #52525b; /* O nuanță de zinc/gri medie */
  27. }
  28. /* 4. Opțional: Culoare mai intensă când se dă click pe scrollbar */
  29. .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  30. background: #71717a;
  31. }
  32. .tag {
  33. color: #818cf8;
  34. text-decoration: none;
  35. background: rgba(129, 140, 248, 0.1);
  36. padding: 1px 6px;
  37. border-radius: 4px;
  38. border: 1px solid rgba(129, 140, 248, 0.3);
  39. font-size: 0.85em;
  40. }
  41. .tag:hover {
  42. background: rgba(129, 140, 248, 0.2);
  43. }
  44. </style>
  45. </head>