Hugging Face's logo

Spaces:
UntilDot
/
Flask
Running

App Files Community
UntilDot commited on
Commit
6d67922
·
verified ·
1 Parent(s): 0b2a081

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +142 -163
static/style.css CHANGED
@@ -1,193 +1,172 @@
1
  /* Gruvbox Material Theme: Light & Dark */
2
  :root {
3
- --bg0: #f2e5bc;
4
- --bg1: #eddeb5;
5
- --bg-statusline1: #ebdbb2;
6
- --bg-statusline2: #ebdbb2;
7
- --fg0: #654735;
8
- --fg1: #4f3829;
9
- --blue: #45707a;
10
- --green: #6c782e;
11
- --purple: #945e80;
12
- --visual_green: #d7d9ae;
13
- --aqua: #689d6a;
14
- }
15
-
16
  .dark {
17
- --bg0: #32302f;
18
- --bg1: #3c3836;
19
- --bg-statusline1: #3c3836;
20
- --bg-statusline2: #46413e;
21
- --fg0: #d4be98;
22
- --fg1: #ddc7a1;
23
- --blue: #7daea3;
24
- --green: #a9b665;
25
- --purple: #d3869b;
26
- --visual_green: #a9b665;
27
- --aqua: #8ec07c;
28
- }
29
-
30
- /* Base Styling */
31
  body {
32
- background-color: var(--bg0);
33
- color: var(--fg0);
34
  }
35
-
36
- input,
37
- button,
38
- #chatContainer {
39
- background-color: var(--bg1);
40
- color: var(--fg0);
41
  }
42
-
43
  input::placeholder {
44
- color: var(--fg1);
45
  }
46
-
47
  button {
48
- background-color: var(--blue) !important;
49
- color: var(--fg1) !important;
50
- font-weight: 700;
51
- font-size: 1rem;
52
- letter-spacing: 0.25px;
53
- transition: background-color 0.3s;
54
- border: none;
55
- }
56
-
57
  button:hover {
58
- background-color: var(--purple) !important;
59
- color: var(--fg0) !important;
60
  }
61
-
62
- /* === Config Panel Behavior === */
63
- #configPanel {
64
- max-height: 1000px;
65
- overflow: visible;
66
- transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
67
- display: flex;
68
- flex-direction: column;
69
- gap: 1rem;
70
- }
71
-
72
- #configPanel.minimal .model-label,
73
- #configPanel.minimal .dropdown,
74
- #configPanel.minimal .options {
75
- display: none !important;
76
  }
77
-
78
- #configPanel.minimal .model-name {
79
- display: block;
80
- font-weight: bold;
81
- margin-top: 0.25rem;
82
- text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
-
85
- #configPanel.minimal .loader {
86
- display: none;
87
- }
88
-
89
- #configPanel.minimal .model-zone.loading .loader {
90
- display: flex;
91
- justify-content: center;
92
- margin-top: 0.5rem;
93
- }
94
-
95
- /* Expanded mode: show everything */
96
- #configPanel.expanded .model-label,
97
- #configPanel.expanded .dropdown,
98
- #configPanel.expanded .model-name {
99
- display: block;
100
- }
101
-
102
- #configPanel.expanded .loader {
103
- display: none;
104
  }
105
-
106
- #configPanel.expanded .model-zone.loading .loader {
107
- display: flex;
108
- justify-content: center;
109
- margin-top: 0.5rem;
110
  }
111
-
112
- /* Model zone layout */
113
- .model-zone {
114
- display: flex;
115
- flex-direction: column;
116
- align-items: center;
117
- text-align: center;
118
  }
119
-
120
- /* Dropdown */
121
- .model-dropdown {
122
- width: 100%;
123
  }
124
-
125
- .options {
126
- background-color: var(--bg-statusline1);
127
- color: var(--fg0);
128
- box-shadow: 0 4px 8px rgba(0,0,0,0.25);
129
- border-radius: 0.5rem;
130
- max-height: 200px;
131
- overflow-y: auto;
132
- position: absolute;
133
- z-index: 9999;
134
- margin-top: 0.5rem;
135
- }
136
-
137
- .options div {
138
- padding: 0.5rem;
139
- cursor: pointer;
140
  }
141
-
142
- .options div:hover {
143
- background-color: var(--blue);
144
- color: var(--fg1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  }
146
-
147
- /* Loader dots */
 
 
 
148
  .loader {
149
- display: flex;
150
- justify-content: center;
151
- align-items: center;
152
- flex-direction: row;
153
- gap: 0.5rem;
154
  }
155
-
156
- @keyframes bounce {
157
- 0%, 80%, 100% {
158
- transform: scale(0);
159
- }
160
- 40% {
161
- transform: scale(1);
162
- }
163
- }
164
-
165
  .dot {
166
- width: 8px;
167
- height: 8px;
168
- background-color: var(--aqua);
169
- border-radius: 50%;
170
- animation: bounce 1.4s infinite ease-in-out both;
 
 
 
171
  }
172
-
173
- .animation-delay-150 {
174
- animation-delay: 0.15s;
175
  }
176
-
177
- .animation-delay-300 {
178
- animation-delay: 0.3s;
 
 
 
 
 
 
179
  }
180
-
181
  /* Footer */
182
  footer {
183
- margin-top: 1rem;
184
- font-size: 0.875rem;
185
- color: var(--fg1);
186
- opacity: 0.7;
 
187
  }
188
-
189
- /* Chat container */
190
  #chatContainer {
191
- position: relative;
192
- z-index: 0;
193
  }
 
1
  /* Gruvbox Material Theme: Light & Dark */
2
  :root {
3
+ --bg0: #f2e5bc;
4
+ --bg1: #eddeb5;
5
+ --bg-statusline1: #ebdbb2;
6
+ --bg-statusline2: #ebdbb2;
7
+ --fg0: #654735;
8
+ --fg1: #4f3829;
9
+ --blue: #45707a;
10
+ --green: #6c782e;
11
+ --purple: #945e80;
12
+ --visual_green: #d7d9ae;
13
+ --aqua: #689d6a;
14
+ }
 
15
  .dark {
16
+ --bg0: #32302f;
17
+ --bg1: #3c3836;
18
+ --bg-statusline1: #3c3836;
19
+ --bg-statusline2: #46413e;
20
+ --fg0: #d4be98;
21
+ --fg1: #ddc7a1;
22
+ --blue: #7daea3;
23
+ --green: #a9b665;
24
+ --purple: #d3869b;
25
+ --visual_green: #a9b665;
26
+ --aqua: #8ec07c;
27
+ }
 
 
28
  body {
29
+ background-color: var(--bg0);
30
+ color: var(--fg0);
31
  }
32
+ input, button, #chatContainer {
33
+ background-color: var(--bg1);
34
+ color: var(--fg0);
 
 
 
35
  }
 
36
  input::placeholder {
37
+ color: var(--fg1);
38
  }
 
39
  button {
40
+ background-color: var(--blue) !important;
41
+ color: var(--fg1) !important;
42
+ font-weight: 700;
43
+ font-size: 1rem;
44
+ letter-spacing: 0.25px;
45
+ transition: background-color 0.3s;
46
+ border: none;
47
+ }
 
48
  button:hover {
49
+ background-color: var(--purple) !important;
50
+ color: var(--fg0) !important;
51
  }
52
+ /* Dropdown */
53
+ .dropdown {
54
+ position: relative;
55
+ overflow: visible;
56
+ text-align: center;
 
 
 
 
 
 
 
 
 
 
57
  }
58
+ .options {
59
+ position: absolute;
60
+ top: 100%;
61
+ left: 50%;
62
+ transform: translateX(-50%);
63
+ width: 240px;
64
+ z-index: 9999;
65
+ background-color: var(--bg-statusline1);
66
+ color: var(--fg0);
67
+ box-shadow: 0 4px 8px rgba(0,0,0,0.25);
68
+ border-radius: 0.5rem;
69
+ max-height: 15rem;
70
+ overflow-y: auto;
71
+ scrollbar-width: thin;
72
+ scrollbar-color: #665c54 var(--bg-statusline1);
73
+ display: none;
74
+ }
75
+ .options.show {
76
+ display: block;
77
  }
78
+ .options div {
79
+ padding: 0.5rem 0.75rem;
80
+ text-align: center;
81
+ cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  }
83
+ .options div:hover {
84
+ background-color: var(--blue);
85
+ color: var(--fg1);
86
+ font-weight: 600;
 
87
  }
88
+ .options::-webkit-scrollbar {
89
+ width: 8px;
 
 
 
 
 
90
  }
91
+ .options::-webkit-scrollbar-track {
92
+ background-color: var(--bg-statusline1);
93
+ border-radius: 0.25rem;
 
94
  }
95
+ .options::-webkit-scrollbar-thumb {
96
+ background-color: #665c54;
97
+ border-radius: 4px;
98
+ border: 2px solid var(--bg-statusline1);
 
 
 
 
 
 
 
 
 
 
 
 
99
  }
100
+ .options::-webkit-scrollbar-thumb:hover {
101
+ background-color: #7c6f64;
102
+ }
103
+ /* Config Panel */
104
+ #configPanel {
105
+ max-height: 1000px;
106
+ overflow: visible;
107
+ transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
108
+ display: flex;
109
+ flex-direction: column;
110
+ gap: 1rem;
111
+ }
112
+ #configPanel.minimal .model-grid {
113
+ display: grid;
114
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
115
+ gap: 1rem;
116
+ }
117
+ #configPanel.minimal .dropdown,
118
+ #configPanel.minimal label {
119
+ display: none;
120
+ }
121
+ #configPanel.minimal .model-name,
122
+ #configPanel.minimal .loader {
123
+ display: block;
124
  }
125
+ #configPanel.expanded .model-name,
126
+ #configPanel.expanded .loader {
127
+ display: none;
128
+ }
129
+ /* Align loading animation */
130
  .loader {
131
+ display: flex;
132
+ justify-content: center;
133
+ align-items: center;
134
+ gap: 4px;
135
+ margin-top: 4px;
136
  }
 
 
 
 
 
 
 
 
 
 
137
  .dot {
138
+ width: 8px;
139
+ height: 8px;
140
+ background-color: var(--aqua);
141
+ border-radius: 50%;
142
+ animation: bounce 1.4s infinite ease-in-out both;
143
+ }
144
+ .dot:nth-child(2) {
145
+ animation-delay: 0.15s;
146
  }
147
+ .dot:nth-child(3) {
148
+ animation-delay: 0.3s;
 
149
  }
150
+ @keyframes bounce {
151
+ 0%, 80%, 100% { transform: scale(0); }
152
+ 40% { transform: scale(1); }
153
+ }
154
+ .model-zone {
155
+ display: flex;
156
+ flex-direction: column;
157
+ align-items: center;
158
+ text-align: center;
159
  }
 
160
  /* Footer */
161
  footer {
162
+ margin-top: 1rem;
163
+ padding-top: 1rem;
164
+ font-size: 0.875rem;
165
+ color: var(--fg1);
166
+ opacity: 0.7;
167
  }
168
+ /* Chat layering fix */
 
169
  #chatContainer {
170
+ position: relative;
171
+ z-index: 0;
172
  }