Hugging Face's logo

Spaces:
GamerC0der
/
bolt.new
Sleeping

App Files Community
bolt.new
File size: 2,181 Bytes 
bf8b26e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
@use 'variables.scss';
@use 'z-index.scss';
@use 'animations.scss';
@use 'components/terminal.scss';
@use 'components/resize-handle.scss';
@use 'components/code.scss';
@use 'components/editor.scss';
@use 'components/toast.scss';

html,
body {
  height: 100%;
  width: 100%;
}

:root {
  --gradient-opacity: 0.8;
  --primary-color: rgba(158, 117, 240, var(--gradient-opacity));
  --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
  --accent-color: rgba(128, 59, 239, var(--gradient-opacity));
  // --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
  // --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
  // --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
}

.modern-scrollbar {
  overflow: auto;

  // WebKit scrollbar styling
  &::-webkit-scrollbar {
    width: 2px;
    height: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    // Use CSS variables for colors
    background-color: var(--modern-scrollbar-thumb-background);
    border-radius: 9999px; // pill shape
    border: 2px solid transparent; // for padding-like effect
    background-clip: content-box;
    transition: background-color 0.2s ease-in-out; // Add transition
  }

  &::-webkit-scrollbar-thumb:hover {
    // Use CSS variable for hover color
    background-color: var(--modern-scrollbar-thumb-backgroundHover);
  }

  // Firefox support
  scrollbar-width: thin;
  // Use CSS variables for Firefox colors
  scrollbar-color: var(--modern-scrollbar-thumb-backgroundHover) transparent; // Use hover color for thumb for consistency
}

.modern-scrollbar-invert {
  &::-webkit-scrollbar-thumb {
    // Override with a contrasting color, e.g., primary text color with transparency
    background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
  }

  &::-webkit-scrollbar-thumb:hover {
    // Darker/more opaque version on hover
    background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
  }

  // Firefox support for inverted colors
  scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
}