Silhouette-Agency-OS-OpenSource/index.css at main · haroldfabla2-hue/Silhouette-Agency-OS-OpenSource · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    background-color: #020617; /* slate-950 */
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
    /* Subtle background glow effect globally */
    background-image: radial-gradient(circle at top right, rgba(6, 182, 212, 0.05), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.05), transparent 40%);
    background-attachment: fixed;
  }

  /* Custom Selection styling */
  ::selection {
    background-color: rgba(34, 211, 238, 0.3); /* cyan-400 at 30% */
    color: #ffffff;
  }
}

@layer components {
  /* Enhanced Glassmorphism Panel */
  .glass-panel {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(2, 6, 23, 0.8) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-panel:hover {
    border-color: rgba(34, 211, 238, 0.15); /* cyan hover subtle */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  }

  /* Enhanced interactive buttons */
  .glass-button {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease-out;
  }

  .glass-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.15);
  }

  /* Smooth custom animations */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-glow {
    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@layer utilities {
  /* Hide scrollbar for clean internal panels while retaining scroll */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Beautiful custom smooth scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.6);
  border-radius: 4px;
  background-clip: padding-box;
  border: 1px solid transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.8);
  border: none;
}
.custom-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Global document scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Keyframes */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
  50% {
    opacity: .8;
    box-shadow: 0 0 15px 2px rgba(34, 211, 238, 0.3);
  }
}