Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Building

App Files Community
1
ciyidogan commited on
Commit
f7b10e8
·
verified ·
1 Parent(s): 0d34e18

Update flare-ui/src/app/components/environment/environment.component.scss

Browse files
Files changed (1) hide show
  1. flare-ui/src/app/components/environment/environment.component.scss +77 -132
flare-ui/src/app/components/environment/environment.component.scss CHANGED
@@ -1,45 +1,29 @@
1
- .environment-container {
2
- padding: 20px;
3
- max-width: 1200px;
4
- margin: 0 auto;
5
- }
6
-
7
- .main-card {
8
- mat-card-header {
9
- margin-bottom: 20px;
10
-
11
- mat-card-title {
12
- display: flex;
13
- align-items: center;
14
- gap: 10px;
15
- font-size: 24px;
16
-
17
- mat-icon {
18
- font-size: 28px;
19
- height: 28px;
20
- width: 28px;
21
- }
22
- }
23
- }
24
- }
25
-
26
- .section {
27
- padding: 20px 0;
28
 
29
- &:first-child {
30
- padding-top: 0;
 
31
  }
32
  }
33
 
34
- .section-title {
35
- display: flex;
36
- align-items: center;
37
- gap: 10px;
38
- margin-bottom: 20px;
39
- color: #333;
40
 
41
- mat-icon {
42
- color: #1976d2;
 
 
 
 
 
 
 
 
43
  }
44
  }
45
 
@@ -47,132 +31,93 @@
47
  width: 100%;
48
  }
49
 
50
- .small-field {
51
- width: 200px;
52
  }
53
 
54
- .endpoint-row {
55
- display: flex;
56
- gap: 10px;
57
- align-items: flex-start;
 
 
58
 
59
- .endpoint-field {
60
- flex: 1;
61
  }
62
 
63
- .test-button {
64
- margin-top: 8px;
65
- height: 40px;
 
66
  }
67
  }
68
 
69
- .settings-panel {
70
- margin: 20px 0;
 
 
 
71
 
72
- mat-panel-title {
73
  display: flex;
74
  align-items: center;
75
- gap: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
77
- }
78
-
79
- .parameter-config {
80
- display: flex;
81
- flex-direction: column;
82
- gap: 20px;
83
- padding: 10px 0;
84
 
85
- mat-checkbox {
86
- margin: 10px 0;
87
  }
88
  }
89
 
90
- .stt-settings {
91
- padding: 10px 0;
92
- }
93
-
94
- .settings-row {
95
- display: flex;
96
- gap: 20px;
97
- margin-bottom: 20px;
98
- flex-wrap: wrap;
99
-
100
- mat-checkbox {
101
- margin-top: 10px;
102
  }
103
  }
104
 
105
- .actions {
106
- display: flex;
107
- gap: 10px;
108
- margin-top: 30px;
109
- padding-top: 20px;
110
- border-top: 1px solid #e0e0e0;
111
 
112
  button {
113
  mat-icon {
114
- margin-right: 5px;
115
- }
116
- }
117
- }
118
-
119
- mat-divider {
120
- margin: 30px 0;
121
- }
122
-
123
- // Material overrides
124
- ::ng-deep {
125
- .mat-mdc-form-field {
126
- .mat-mdc-text-field-wrapper {
127
- background-color: #f5f5f5;
128
- }
129
-
130
- &.mat-focused {
131
- .mat-mdc-text-field-wrapper {
132
- background-color: #fff;
133
- }
134
- }
135
- }
136
-
137
- .mat-expansion-panel {
138
- box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
139
- border-radius: 8px !important;
140
-
141
- &:not(.mat-expanded) {
142
- &:hover {
143
- background-color: #f5f5f5;
144
- }
145
  }
146
  }
147
  }
148
 
149
- .loading-overlay {
150
- position: fixed;
151
- top: 0;
152
- left: 0;
153
- right: 0;
154
- bottom: 0;
155
- background: rgba(255, 255, 255, 0.8);
156
- display: flex;
157
- align-items: center;
158
- justify-content: center;
159
- z-index: 1000;
160
- }
161
-
162
- // Responsive
163
  @media (max-width: 768px) {
164
- .endpoint-row {
165
  flex-direction: column;
 
166
 
167
- .test-button {
168
- width: 100%;
 
169
  }
170
- }
171
-
172
- .settings-row {
173
- flex-direction: column;
174
 
175
- .small-field {
176
  width: 100%;
177
  }
178
  }
 
1
+ .loading-container {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+ justify-content: center;
6
+ padding: 48px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
 
8
+ p {
9
+ margin-top: 16px;
10
+ color: rgba(0, 0, 0, 0.6);
11
  }
12
  }
13
 
14
+ .provider-section {
15
+ margin: 24px 0;
 
 
 
 
16
 
17
+ h3 {
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 8px;
21
+ margin-bottom: 16px;
22
+ color: rgba(0, 0, 0, 0.87);
23
+
24
+ mat-icon {
25
+ color: #1976d2;
26
+ }
27
  }
28
  }
29
 
 
31
  width: 100%;
32
  }
33
 
34
+ mat-form-field {
35
+ margin-bottom: 16px;
36
  }
37
 
38
+ mat-divider {
39
+ margin: 32px 0;
40
+ }
41
+
42
+ .settings-panel {
43
+ margin: 16px 0;
44
 
45
+ .panel-content {
46
+ padding: 16px;
47
  }
48
 
49
+ .hint-text {
50
+ color: rgba(0, 0, 0, 0.6);
51
+ font-size: 14px;
52
+ margin-bottom: 16px;
53
  }
54
  }
55
 
56
+ .config-grid {
57
+ display: flex;
58
+ flex-direction: column;
59
+ gap: 16px;
60
+ margin-top: 16px;
61
 
62
+ .config-item {
63
  display: flex;
64
  align-items: center;
65
+ gap: 16px;
66
+
67
+ label {
68
+ flex: 0 0 200px;
69
+ font-weight: 500;
70
+ }
71
+
72
+ mat-slider {
73
+ flex: 1;
74
+ }
75
+
76
+ .slider-value {
77
+ flex: 0 0 50px;
78
+ text-align: right;
79
+ font-weight: 500;
80
+ color: #1976d2;
81
+ }
82
  }
 
 
 
 
 
 
 
83
 
84
+ mat-slide-toggle {
85
+ margin: 8px 0;
86
  }
87
  }
88
 
89
+ // Icon in select options
90
+ mat-option {
91
+ mat-icon {
92
+ margin-right: 8px;
93
+ vertical-align: middle;
 
 
 
 
 
 
 
94
  }
95
  }
96
 
97
+ // Button styling
98
+ mat-card-actions {
99
+ padding: 16px;
100
+ margin: 0;
 
 
101
 
102
  button {
103
  mat-icon {
104
+ margin-right: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  }
106
  }
107
  }
108
 
109
+ // Responsive adjustments
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  @media (max-width: 768px) {
111
+ .config-item {
112
  flex-direction: column;
113
+ align-items: flex-start !important;
114
 
115
+ label {
116
+ flex: none;
117
+ margin-bottom: 8px;
118
  }
 
 
 
 
119
 
120
+ mat-slider {
121
  width: 100%;
122
  }
123
  }