tinypine-docs/style.css at main · DigitalCoreHub/tinypine-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply antialiased;
    font-family: 'Fira Code', monospace;
  }
}

@layer components {
  /* Sidebar styles */
  .sidebar-link {
    @apply block px-4 py-2.5 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-pine-50 hover:to-pine-100/50 dark:hover:from-pine-900/30 dark:hover:to-pine-800/20 hover:shadow-sm hover:scale-[1.02] transition-all duration-300 relative overflow-hidden;
  }

  .sidebar-link::before {
    content: '';
    @apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-0 bg-gradient-to-b from-pine-500 to-pine-600 rounded-r-full transition-all duration-300;
  }

  .sidebar-link:hover::before {
    @apply h-3/4;
  }

  .sidebar-link.active {
    @apply bg-gradient-to-r from-pine-100 to-pine-50 dark:from-pine-900/60 dark:to-pine-800/30 text-pine-800 dark:text-pine-300 font-semibold shadow-md scale-[1.02];
  }

  .sidebar-link.active::before {
    @apply h-3/4;
  }

  /* Code block styles */
  pre {
    @apply rounded-2xl my-6 overflow-x-auto shadow-xl shadow-gray-900/10 dark:shadow-black/30 border border-gray-800/50 dark:border-gray-700/50 backdrop-blur-sm;
  }

  pre code {
    @apply text-sm leading-relaxed;
  }

  /* Inline code */
  :not(pre) > code {
    @apply px-2 py-0.5 rounded-md bg-pine-100/80 dark:bg-pine-900/40 text-pine-800 dark:text-pine-300 text-sm font-mono border border-pine-200/50 dark:border-pine-800/50;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-3 h-3;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100/50 dark:bg-gray-800/50 backdrop-blur-sm;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gradient-to-b from-pine-400 to-pine-600 dark:from-pine-600 dark:to-pine-800 rounded-full hover:from-pine-500 hover:to-pine-700 dark:hover:from-pine-500 dark:hover:to-pine-700 transition-colors shadow-lg;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply shadow-xl;
  }

  /* Prose enhancements */
  .prose h1 {
    @apply bg-gradient-to-r from-pine-600 to-pine-800 dark:from-pine-400 dark:to-pine-600 bg-clip-text text-transparent font-extrabold;
  }

  .prose h2 {
    @apply text-pine-700 dark:text-pine-300 font-bold border-b-2 border-pine-200 dark:border-pine-800 pb-2;
  }

  .prose h3 {
    @apply text-pine-600 dark:text-pine-400 font-semibold;
  }

  .prose a {
    @apply text-pine-600 dark:text-pine-400 hover:text-pine-700 dark:hover:text-pine-300 underline decoration-pine-300 dark:decoration-pine-700 decoration-2 underline-offset-2 hover:decoration-pine-500 dark:hover:decoration-pine-500 transition-all;
  }

  .prose blockquote {
    @apply border-l-4 border-pine-500 bg-pine-50/50 dark:bg-pine-900/20 backdrop-blur-sm rounded-r-xl;
  }

  .prose table {
    @apply rounded-xl overflow-hidden shadow-lg;
  }

  .prose thead {
    @apply bg-gradient-to-r from-pine-600 to-pine-700 text-white;
  }

  .prose tbody tr:nth-child(even) {
    @apply bg-gray-50/50 dark:bg-gray-800/30;
  }

  .prose img {
    @apply rounded-2xl shadow-2xl ring-1 ring-gray-200 dark:ring-gray-700;
  }

  /* Button enhancements in demos */
  button {
    @apply hover:shadow-lg active:scale-95 transition-all duration-200;
  }

  /* Input enhancements */
  input, textarea {
    @apply focus:shadow-lg focus:shadow-pine-500/20 transition-all duration-300;
  }
}