Hugging Face's logo

Spaces:
tee342
/
AudioMaster
Sleeping

App Files Community
tee342 commited on
Commit
3c2d581
·
verified ·
1 Parent(s): 87138af

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +93 -57
style.css CHANGED
@@ -1,83 +1,119 @@
 
1
  body {
2
- background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
3
- color: white;
4
- font-family: 'Segoe UI', sans-serif;
5
- padding: 20px;
6
  }
7
 
8
- .studio-header {
9
- text-align: center;
10
- margin-bottom: 30px;
11
- animation: float 3s ease-in-out infinite;
12
  }
13
 
14
- .studio-header h3 {
15
- font-size: 18px;
16
- color: #aaaaaa;
17
- margin-top: -5px;
18
- font-style: italic;
19
  }
20
 
21
- .gr-box, .gr-interface {
22
- border-radius: 12px;
23
- background-color: #1e1e1e;
24
- box-shadow: 0 0 10px #1db95488;
25
- padding: 15px;
26
- transition: transform 0.2s ease;
27
  }
28
 
29
- .gr-box:hover, .gr-interface:hover {
30
- transform: scale(1.01);
31
- box-shadow: 0 0 15px #1db954aa;
32
  }
33
 
34
- .gr-button {
35
- background-color: #1db954 !important;
36
- color: white !important;
37
- border-radius: 10px;
38
- padding: 10px 20px;
39
- font-weight: bold;
40
- box-shadow: 0 0 10px #1db954aa;
41
- border: none;
42
- font-size: 16px;
43
- transition: all 0.3s ease;
44
  }
45
 
46
- .gr-button:hover {
47
- background-color: #2ecc71 !important;
48
- box-shadow: 0 0 15px #2ecc71aa;
49
  }
50
 
 
51
  .gr-tabs button {
52
- font-size: 16px;
53
- padding: 10px 20px;
54
- border-radius: 8px;
55
- background: #1e1e1e;
56
- color: white;
57
- transition: all 0.3s ease;
58
  }
59
 
60
  .gr-tabs button:hover {
61
- background: #2ecc71;
62
- color: black;
63
- box-shadow: 0 0 10px #2ecc71aa;
64
  }
65
 
66
- @keyframes float {
67
- 0%, 100% { transform: translateY(0); }
68
- 50% { transform: translateY(-10px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  }
70
 
71
- @media (max-width: 768px) {
72
- .gr-column {
73
- min-width: 100%;
74
- }
 
 
 
 
 
 
 
 
 
 
 
75
 
76
- .gr-row {
77
- flex-direction: column;
78
- }
 
 
 
 
 
 
 
 
79
 
80
- .gr-button {
81
- width: 100%;
82
- }
83
  }
 
1
+ /* === Base Styles === */
2
  body {
3
+ font-family: 'Segoe UI', Arial, sans-serif;
 
 
 
4
  }
5
 
6
+ /* === Color Variables as Classes (for easy reuse) === */
7
+ .bg-background {
8
+ background-color: hsl(0 0% 3.9%);
 
9
  }
10
 
11
+ .text-foreground {
12
+ color: hsl(0 0% 98%);
 
 
 
13
  }
14
 
15
+ .card, .gr-interface {
16
+ background-color: hsl(0 0% 10%) !important;
17
+ border-radius: 0.5rem;
18
+ padding: 1rem;
19
+ box-shadow: 0 0 10px hsl(0 0% 14.9% / 0.2);
20
+ border: 1px solid hsl(0 0% 14.9%);
21
  }
22
 
23
+ .text-card-foreground {
24
+ color: hsl(0 0% 98%);
 
25
  }
26
 
27
+ .btn-primary {
28
+ background-color: hsl(0 0% 98%) !important;
29
+ color: hsl(0 0% 9%);
30
+ border-radius: 0.5rem;
31
+ padding: 0.75rem 1.5rem;
32
+ font-weight: bold;
33
+ border: none;
34
+ transition: all 0.3s ease;
 
 
35
  }
36
 
37
+ .btn-primary:hover {
38
+ background-color: hsl(0 0% 90%) !important;
39
+ box-shadow: 0 0 10px hsl(0 0% 60% / 0.3);
40
  }
41
 
42
+ /* === Tabs === */
43
  .gr-tabs button {
44
+ font-size: 16px;
45
+ padding: 10px 20px;
46
+ border-radius: 8px;
47
+ background: hsl(0 0% 10%);
48
+ color: white;
49
+ transition: all 0.3s ease;
50
  }
51
 
52
  .gr-tabs button:hover {
53
+ background: hsl(120 76% 61%);
54
+ color: black;
55
+ box-shadow: 0 0 10px hsl(120 76% 61% / 0.4);
56
  }
57
 
58
+ /* === Inputs & Text === */
59
+ input[type="text"], input[type="number"], select, textarea {
60
+ background-color: hsl(0 0% 14.9%);
61
+ color: white;
62
+ border: 1px solid hsl(0 0% 30%);
63
+ border-radius: 0.5rem;
64
+ padding: 0.75rem;
65
+ width: 100%;
66
+ }
67
+
68
+ .gr-checkboxgroup label {
69
+ background: hsl(0 0% 14.9%);
70
+ color: white;
71
+ border: 1px solid hsl(0 0% 30%);
72
+ border-radius: 0.5rem;
73
+ padding: 0.5rem 1rem;
74
+ transition: background 0.3s;
75
+ }
76
+
77
+ .gr-checkboxgroup label:hover {
78
+ background: hsl(0 0% 20%);
79
+ cursor: pointer;
80
+ }
81
+
82
+ /* === Gallery Cards – Preset Cards Tab === */
83
+ .gr-gallery__items > div {
84
+ border-radius: 0.75rem;
85
+ overflow: hidden;
86
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
87
  }
88
 
89
+ .gr-gallery__items > div:hover {
90
+ transform: scale(1.02);
91
+ box-shadow: 0 0 12px hsl(120 76% 61% / 0.4);
92
+ }
93
+
94
+ .gr-gallery__item-label {
95
+ background: rgba(0, 0, 0, 0.7);
96
+ backdrop-filter: blur(3px);
97
+ color: white;
98
+ font-size: 14px;
99
+ font-weight: bold;
100
+ text-align: center;
101
+ padding: 0.5rem;
102
+ border-radius: 0 0 0.5rem 0.5rem;
103
+ }
104
 
105
+ /* === Buttons & Links === */
106
+ .btn-destructive {
107
+ background-color: hsl(0 84.2% 60.2%) !important;
108
+ color: hsl(0 0% 98%);
109
+ }
110
+
111
+ /* === Floating Animation (Logo, etc.) === */
112
+ @keyframes float {
113
+ 0%, 100% { transform: translateY(0); }
114
+ 50% { transform: translateY(-10px); }
115
+ }
116
 
117
+ .float-animation {
118
+ animation: float 3s ease-in-out infinite;
 
119
  }