Hugging Face's logo

Spaces:
ghostai1
/
GhostPack
Running

App Files Community
1
ghostai1 commited on
Commit
a80b1bf
·
verified ·
1 Parent(s): 84573c4

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +51 -30
style.css CHANGED
@@ -1,71 +1,87 @@
1
- /* 👻 GhostPack Custom Styles 😈 */
2
  body {
3
- background-color: #0a0a0a;
4
- color: #e0e0e0;
5
  font-family: 'Roboto', sans-serif;
6
  overflow-x: hidden;
7
  }
8
 
9
  .navbar {
10
  background: linear-gradient(90deg, #1c2526, #2e3b3e) !important;
11
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
12
  }
13
 
14
  .navbar-brand {
15
- font-weight: bold;
16
- font-size: 1.8rem;
17
  color: #00ffcc !important;
18
- text-shadow: 0 0 10px #00ffcc;
19
  }
20
 
21
  .nav-link {
22
  color: #00ffcc !important;
23
- transition: color 0.3s;
 
24
  }
25
 
26
  .nav-link:hover {
27
  color: #00cc99 !important;
 
28
  }
29
 
30
  .hero-section {
31
- background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/hero-bg.jpg');
32
  background-size: cover;
33
  background-position: center;
34
  height: 100vh;
35
  display: flex;
36
  align-items: center;
37
  justify-content: center;
38
- text-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
39
  }
40
 
41
  .bg-dark {
42
- background: linear-gradient(180deg, #1c2526, #121212) !important;
43
  }
44
 
45
- .bg-ghost {
46
  background: #2e3b3e !important;
47
- border: 1px solid #00ffcc;
48
- box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
49
  transition: transform 0.3s, box-shadow 0.3s;
 
50
  }
51
 
52
- .bg-ghost:hover {
53
- transform: translateY(-5px);
54
- box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
56
 
57
  .btn-ghost {
58
  background: linear-gradient(45deg, #00ffcc, #00cc99);
59
  border: none;
60
- color: #0a0a0a;
61
- font-weight: bold;
62
  transition: transform 0.3s, box-shadow 0.3s;
63
  }
64
 
65
  .btn-ghost:hover {
66
- transform: scale(1.05);
67
- box-shadow: 0 0 15px #00ffcc;
68
- color: #0a0a0a;
69
  }
70
 
71
  .btn-outline-ghost {
@@ -76,24 +92,29 @@ body {
76
 
77
  .btn-outline-ghost:hover {
78
  background: #00ffcc;
79
- color: #0a0a0a;
80
  }
81
 
82
  pre {
83
- background: #1c2526;
84
- padding: 15px;
85
- border-radius: 8px;
86
- color: #00ffcc;
87
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 
 
 
 
 
88
  }
89
 
90
  .ghost-animation {
91
- animation: ghostFloat 3s ease-in-out infinite;
92
  }
93
 
94
  @keyframes ghostFloat {
95
  0%, 100% { transform: translateY(0); }
96
- 50% { transform: translateY(-10px); }
97
  }
98
 
99
  .bg-ghost-black {
 
1
+ /* 👻 GhostPack Spectral Styles 😈 */
2
  body {
3
+ background: #0a0a0a;
4
+ color: #ffffff;
5
  font-family: 'Roboto', sans-serif;
6
  overflow-x: hidden;
7
  }
8
 
9
  .navbar {
10
  background: linear-gradient(90deg, #1c2526, #2e3b3e) !important;
11
+ box-shadow: 0 3px 10px rgba(0, 255, 204, 0.2);
12
  }
13
 
14
  .navbar-brand {
15
+ font-weight: 900;
16
+ font-size: 2rem;
17
  color: #00ffcc !important;
18
+ text-shadow: 0 0 15px #00ffcc;
19
  }
20
 
21
  .nav-link {
22
  color: #00ffcc !important;
23
+ font-weight: 500;
24
+ transition: color 0.3s, text-shadow 0.3s;
25
  }
26
 
27
  .nav-link:hover {
28
  color: #00cc99 !important;
29
+ text-shadow: 0 0 10px #00cc99;
30
  }
31
 
32
  .hero-section {
33
+ background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/hero-bg.jpg');
34
  background-size: cover;
35
  background-position: center;
36
  height: 100vh;
37
  display: flex;
38
  align-items: center;
39
  justify-content: center;
40
+ text-shadow: 0 0 20px rgba(0, 255, 204, 0.6);
41
  }
42
 
43
  .bg-dark {
44
+ background: linear-gradient(180deg, #1c2526, #0a0a0a) !important;
45
  }
46
 
47
+ .bg-ghost-card {
48
  background: #2e3b3e !important;
49
+ border: 2px solid #00ffcc;
50
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
51
  transition: transform 0.3s, box-shadow 0.3s;
52
+ color: #ffffff;
53
  }
54
 
55
+ .bg-ghost-card:hover {
56
+ transform: translateY(-8px);
57
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.6);
58
+ }
59
+
60
+ .bg-ghost-light {
61
+ background: #e0e0e0 !important;
62
+ border: 2px solid #00ffcc;
63
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
64
+ transition: transform 0.3s, box-shadow 0.3s;
65
+ color: #000000;
66
+ }
67
+
68
+ .bg-ghost-light:hover {
69
+ transform: translateY(-8px);
70
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.6);
71
  }
72
 
73
  .btn-ghost {
74
  background: linear-gradient(45deg, #00ffcc, #00cc99);
75
  border: none;
76
+ color: #000000;
77
+ font-weight: 700;
78
  transition: transform 0.3s, box-shadow 0.3s;
79
  }
80
 
81
  .btn-ghost:hover {
82
+ transform: scale(1.08);
83
+ box-shadow: 0 0 20px #00ffcc;
84
+ color: #000000;
85
  }
86
 
87
  .btn-outline-ghost {
 
92
 
93
  .btn-outline-ghost:hover {
94
  background: #00ffcc;
95
+ color: #000000;
96
  }
97
 
98
  pre {
99
+ background: #e0e0e0 !important;
100
+ padding: 20px;
101
+ border-radius: 10px;
102
+ color: #000000;
103
+ box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
104
+ font-family: 'Courier New', monospace;
105
+ }
106
+
107
+ .code-block {
108
+ font-size: 0.95rem;
109
  }
110
 
111
  .ghost-animation {
112
+ animation: ghostFloat 4s ease-in-out infinite;
113
  }
114
 
115
  @keyframes ghostFloat {
116
  0%, 100% { transform: translateY(0); }
117
+ 50% { transform: translateY(-12px); }
118
  }
119
 
120
  .bg-ghost-black {