tee342 commited on
Commit
19727ea
·
verified ·
1 Parent(s): a72447c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +31 -20
style.css CHANGED
@@ -1,12 +1,12 @@
1
  /* === Base Styles === */
2
  body {
 
3
  background-color: #1f2937;
4
  color: white;
5
- font-family: 'Segoe UI', sans-serif;
6
  padding: 20px;
7
  }
8
 
9
- /* === Logo & Header === */
10
  .studio-header {
11
  text-align: center;
12
  margin-bottom: 30px;
@@ -25,15 +25,30 @@ body {
25
  50% { transform: translateY(-10px); }
26
  }
27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  /* === Buttons === */
29
  .gr-button {
30
  background-color: #2563eb !important;
31
  color: white !important;
32
- border-radius: 8px;
33
  padding: 10px 20px;
34
  font-weight: bold;
35
- box-shadow: 0 0 10px #2563eb88;
36
- transition: all 0.3s ease;
 
37
  }
38
 
39
  .gr-button:hover {
@@ -57,12 +72,13 @@ body {
57
  box-shadow: 0 0 10px #3b82f6aa;
58
  }
59
 
60
- /* === Inputs / Dropdowns === */
61
  input[type="text"], input[type="number"], select, textarea {
62
  background-color: #334155 !important;
63
  color: white !important;
64
  border: 1px solid #475569 !important;
65
  border-radius: 6px;
 
66
  padding: 10px;
67
  }
68
 
@@ -90,20 +106,15 @@ input[type="text"], input[type="number"], select, textarea {
90
 
91
  .gr-gallery__items > div:hover {
92
  transform: scale(1.02);
93
- box-shadow: 0 0 12px #3b82f644;
94
  }
95
 
96
- /* === Responsive Layout === */
97
- @media (max-width: 768px) {
98
- .studio-header img {
99
- width: 90%;
100
- }
101
-
102
- .gr-column {
103
- min-width: 100%;
104
- }
105
-
106
- .gr-button {
107
- width: 100%;
108
- }
109
  }
 
1
  /* === Base Styles === */
2
  body {
3
+ font-family: 'Segoe UI', sans-serif;
4
  background-color: #1f2937;
5
  color: white;
 
6
  padding: 20px;
7
  }
8
 
9
+ /* === Logo Animation === */
10
  .studio-header {
11
  text-align: center;
12
  margin-bottom: 30px;
 
25
  50% { transform: translateY(-10px); }
26
  }
27
 
28
+ /* === Interface Boxes & Cards === */
29
+ .gr-box, .gr-interface {
30
+ background-color: #161b22 !important;
31
+ border-radius: 12px;
32
+ padding: 15px;
33
+ box-shadow: 0 0 10px #1f7bbd44;
34
+ border: none;
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .gr-box:hover, .gr-interface:hover {
39
+ box-shadow: 0 0 15px #1f7bbd88;
40
+ }
41
+
42
  /* === Buttons === */
43
  .gr-button {
44
  background-color: #2563eb !important;
45
  color: white !important;
46
+ border-radius: 10px;
47
  padding: 10px 20px;
48
  font-weight: bold;
49
+ box-shadow: 0 0 10px #2563eb44;
50
+ border: none;
51
+ font-size: 16px;
52
  }
53
 
54
  .gr-button:hover {
 
72
  box-shadow: 0 0 10px #3b82f6aa;
73
  }
74
 
75
+ /* === Inputs & Dropdowns === */
76
  input[type="text"], input[type="number"], select, textarea {
77
  background-color: #334155 !important;
78
  color: white !important;
79
  border: 1px solid #475569 !important;
80
  border-radius: 6px;
81
+ width: 100%;
82
  padding: 10px;
83
  }
84
 
 
106
 
107
  .gr-gallery__items > div:hover {
108
  transform: scale(1.02);
109
+ box-shadow: 0 0 12px #2563eb44;
110
  }
111
 
112
+ .gr-gallery__item-label {
113
+ background: rgba(0, 0, 0, 0.7);
114
+ backdrop-filter: blur(3px);
115
+ border-radius: 0 0 12px 12px;
116
+ padding: 10px;
117
+ font-size: 14px;
118
+ font-weight: bold;
119
+ text-align: center;
 
 
 
 
 
120
  }