Hugging Face's logo

Spaces:
Shinhati2023
/
Web2k
Sleeping

App Files Community
Shinhati2023 commited on
Commit
a1270ce
·
verified ·
1 Parent(s): be4b09c

Update client/src/index.css

Browse files
Files changed (1) hide show
  1. client/src/index.css +78 -25
client/src/index.css CHANGED
@@ -1,39 +1,92 @@
 
1
  :root {
2
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
5
- color-scheme: dark;
6
- color: rgba(255, 255, 255, 0.87);
7
- background-color: #242424;
 
 
8
  }
9
 
10
  body {
11
  margin: 0;
12
- display: flex;
13
- place-items: center;
14
- min-width: 320px;
15
- min-height: 100vh;
 
16
  }
17
 
18
- #root {
19
- max-width: 1280px;
20
- margin: 0 auto;
21
- padding: 2rem;
22
- text-align: center;
 
 
23
  }
24
 
 
 
 
 
 
 
 
 
25
  button {
26
- border-radius: 8px;
27
- border: 1px solid transparent;
28
- padding: 0.6em 1.2em;
29
- font-size: 1em;
30
- font-weight: 500;
31
- font-family: inherit;
32
- background-color: #1a1a1a;
 
 
 
33
  cursor: pointer;
34
- transition: border-color 0.25s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
- button:hover {
38
- border-color: #646cff;
 
39
  }
 
1
+ /* RESET & FONTS */
2
  :root {
3
+ --mc-dark: #121212; /* Obsidian */
4
+ --mc-gray: #2e2e2e; /* Stone */
5
+ --mc-green: #55ff55; /* Neon Creeper */
6
+ --mc-purple: #aa00ff; /* Neon Enderman */
7
+ --glass-bg: rgba(255, 255, 255, 0.05);
8
+ --glass-border: rgba(255, 255, 255, 0.1);
9
+ --glass-blur: 16px;
10
+ --font-pixel: 'Courier New', Courier, monospace; /* Fallback pixel-ish font */
11
  }
12
 
13
  body {
14
  margin: 0;
15
+ background-color: var(--mc-dark);
16
+ color: white;
17
+ font-family: var(--font-pixel);
18
+ overflow-x: hidden;
19
+ -webkit-font-smoothing: none; /* Crisper pixels */
20
  }
21
 
22
+ /* THE LIQUID GLASS CONTAINER */
23
+ .glass-panel {
24
+ background: var(--glass-bg);
25
+ backdrop-filter: blur(var(--glass-blur));
26
+ -webkit-backdrop-filter: blur(var(--glass-blur));
27
+ border: 1px solid var(--glass-border);
28
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
29
  }
30
 
31
+ /* NEON PIXEL TEXT */
32
+ h1 {
33
+ text-transform: uppercase;
34
+ letter-spacing: 4px;
35
+ text-shadow: 4px 4px 0px var(--mc-purple); /* Blocky shadow */
36
+ }
37
+
38
+ /* BUTTONS: Circular Edged (Pill) Glass */
39
  button {
40
+ font-family: var(--font-pixel);
41
+ text-transform: uppercase;
42
+ font-weight: bold;
43
+ letter-spacing: 1px;
44
+ border-radius: 9999px; /* Maximum roundness */
45
+ border: 1px solid rgba(255,255,255,0.2);
46
+ background: rgba(255,255,255,0.05);
47
+ backdrop-filter: blur(10px);
48
+ color: var(--mc-green);
49
+ transition: all 0.3s ease;
50
  cursor: pointer;
51
+ position: relative;
52
+ overflow: hidden;
53
+ }
54
+
55
+ button:hover:not(:disabled) {
56
+ background: var(--mc-green);
57
+ color: black;
58
+ box-shadow: 0 0 15px var(--mc-green); /* Neon Glow */
59
+ }
60
+
61
+ button:disabled {
62
+ opacity: 0.5;
63
+ cursor: not-allowed;
64
+ }
65
+
66
+ /* INPUTS: Sleek Mobile Bar */
67
+ textarea, select {
68
+ font-family: var(--font-pixel);
69
+ background: rgba(0, 0, 0, 0.3);
70
+ border: 1px solid var(--mc-gray);
71
+ color: white;
72
+ border-radius: 20px;
73
+ backdrop-filter: blur(5px);
74
+ }
75
+
76
+ textarea:focus, select:focus {
77
+ outline: none;
78
+ border-color: var(--mc-green);
79
+ box-shadow: 0 0 10px rgba(85, 255, 85, 0.2);
80
+ }
81
+
82
+ /* PIXEL ART PLACEHOLDER ANIMATION */
83
+ @keyframes float {
84
+ 0% { transform: translateY(0px); }
85
+ 50% { transform: translateY(-10px); }
86
+ 100% { transform: translateY(0px); }
87
  }
88
 
89
+ .pixel-avatar {
90
+ image-rendering: pixelated;
91
+ animation: float 3s ease-in-out infinite;
92
  }