Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Running

App Files Community
1
ciyidogan commited on
Commit
76353dd
·
verified ·
1 Parent(s): 8cc837e

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 +141 -142
flare-ui/src/app/components/environment/environment.component.scss CHANGED
@@ -1,166 +1,165 @@
1
- .environment-container {
2
- max-width: 800px;
3
- margin: 0 auto;
4
- }
5
 
6
- mat-card-header {
7
- margin-bottom: 24px;
8
 
9
- mat-card-title {
10
- display: flex;
11
- align-items: center;
12
- gap: 8px;
13
- font-size: 24px;
14
 
15
- mat-icon {
16
- font-size: 28px;
17
- width: 28px;
18
- height: 28px;
19
- }
20
- }
21
  }
 
 
22
 
23
- .info-card {
24
- margin-bottom: 20px;
25
- background-color: #e3f2fd;
26
-
27
- mat-card-content {
28
- display: flex;
29
- gap: 16px;
30
- align-items: flex-start;
31
-
32
- mat-icon {
33
- color: #1976d2;
34
- margin-top: 4px;
35
- }
36
-
37
- p {
38
- margin: 4px 0;
39
- font-size: 14px;
40
- }
41
- }
42
  }
43
-
44
- .full-width {
45
- width: 100%;
46
- margin-bottom: 20px;
47
  }
 
 
48
 
49
- .engine-row {
50
- display: flex;
51
- gap: 16px;
52
- align-items: flex-start;
53
- margin-bottom: 20px;
54
 
55
- .engine-field {
56
- flex: 1;
57
- }
 
 
58
 
59
- .api-key-field {
60
- flex: 1.5;
61
- }
62
- }
 
 
 
 
63
 
64
- .prompt-panel {
65
- margin-bottom: 20px;
 
 
 
 
 
 
66
 
67
- mat-expansion-panel-header {
68
- mat-panel-title {
69
- display: flex;
70
- align-items: center;
71
- gap: 8px;
72
-
73
- mat-icon {
74
- color: #666;
75
- }
76
- }
77
  }
78
  }
 
 
79
 
80
- .form-actions {
 
 
 
 
 
81
  display: flex;
82
- gap: 16px;
83
- margin-top: 24px;
84
- padding-top: 24px;
85
- border-top: 1px solid #e0e0e0;
86
-
87
- button {
88
-
89
- mat-spinner {
90
- margin-right: 8px;
91
- vertical-align: middle; // Spinner'ı hizalamak için ekleyin
92
- }
93
-
94
- mat-icon {
95
- vertical-align: middle; // Icon'u hizalamak için ekleyin
96
- margin-right: 4px; // Icon ile text arasına boşluk
97
- }
98
- }
99
- }
100
-
101
- .stt-settings-panel {
102
- margin-bottom: 20px;
103
- margin-top: 10px;
104
 
105
- mat-expansion-panel-header {
106
- mat-panel-title {
107
- display: flex;
108
- align-items: center;
109
- gap: 8px;
110
-
111
- mat-icon {
112
- color: #666;
113
- }
114
- }
115
  }
116
  }
117
-
118
- .stt-settings-content {
119
- padding-top: 16px;
120
- }
121
-
122
- .slider-field {
123
- margin-bottom: 24px;
124
-
125
- label {
126
- display: block;
127
- margin-bottom: 8px;
128
- color: rgba(0, 0, 0, 0.87);
129
- font-size: 14px;
130
- }
131
-
132
- mat-slider {
133
- width: 100%;
134
- }
135
-
136
- mat-hint {
137
- font-size: 12px;
138
- color: rgba(0, 0, 0, 0.6);
139
- margin-top: 4px;
140
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  }
142
 
143
- .checkbox-group {
144
- display: flex;
145
- flex-direction: column;
146
- gap: 12px;
147
- margin-top: 16px;
148
-
149
- mat-checkbox {
150
- margin-bottom: 0;
151
- }
152
  }
 
 
153
 
154
- ::ng-deep {
155
- .mat-mdc-form-field-icon-prefix {
156
- padding-right: 12px;
157
- }
158
 
159
- .mat-mdc-progress-spinner {
160
- --mdc-circular-progress-active-indicator-color: white;
161
- }
162
-
163
- .mat-expansion-panel-body {
164
- padding: 16px 0 !important;
165
- }
166
- }
 
1
+ .environment-container {
2
+ max-width: 800px;
3
+ margin: 0 auto;
4
+ }
5
 
6
+ mat-card-header {
7
+ margin-bottom: 24px;
8
 
9
+ mat-card-title {
10
+ display: flex;
11
+ align-items: center;
12
+ gap: 8px;
13
+ font-size: 24px;
14
 
15
+ mat-icon {
16
+ font-size: 28px;
17
+ width: 28px;
18
+ height: 28px;
 
 
19
  }
20
+ }
21
+ }
22
 
23
+ .info-card {
24
+ margin-bottom: 20px;
25
+ background-color: #e3f2fd;
26
+
27
+ mat-card-content {
28
+ display: flex;
29
+ gap: 16px;
30
+ align-items: flex-start;
31
+
32
+ mat-icon {
33
+ color: #1976d2;
34
+ margin-top: 4px;
 
 
 
 
 
 
 
35
  }
36
+
37
+ p {
38
+ margin: 4px 0;
39
+ font-size: 14px;
40
  }
41
+ }
42
+ }
43
 
44
+ .full-width {
45
+ width: 100%;
46
+ margin-bottom: 20px;
47
+ }
 
48
 
49
+ .engine-row {
50
+ display: flex;
51
+ gap: 16px;
52
+ align-items: flex-start;
53
+ margin-bottom: 20px;
54
 
55
+ .engine-field {
56
+ flex: 1;
57
+ }
58
+
59
+ .api-key-field {
60
+ flex: 1.5;
61
+ }
62
+ }
63
 
64
+ .prompt-panel {
65
+ margin-bottom: 20px;
66
+
67
+ mat-expansion-panel-header {
68
+ mat-panel-title {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 8px;
72
 
73
+ mat-icon {
74
+ color: #666;
 
 
 
 
 
 
 
 
75
  }
76
  }
77
+ }
78
+ }
79
 
80
+ .stt-settings-panel {
81
+ margin-bottom: 20px;
82
+ margin-top: 10px;
83
+
84
+ mat-expansion-panel-header {
85
+ mat-panel-title {
86
  display: flex;
87
+ align-items: center;
88
+ gap: 8px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
 
90
+ mat-icon {
91
+ color: #666;
 
 
 
 
 
 
 
 
92
  }
93
  }
94
+ }
95
+ }
96
+
97
+ .stt-settings-content {
98
+ padding-top: 16px;
99
+ }
100
+
101
+ .slider-field {
102
+ margin-bottom: 24px;
103
+
104
+ label {
105
+ display: block;
106
+ margin-bottom: 8px;
107
+ color: rgba(0, 0, 0, 0.87);
108
+ font-size: 14px;
109
+ }
110
+
111
+ mat-slider {
112
+ width: 100%;
113
+ }
114
+
115
+ mat-hint {
116
+ font-size: 12px;
117
+ color: rgba(0, 0, 0, 0.6);
118
+ margin-top: 4px;
119
+ }
120
+ }
121
+
122
+ .checkbox-group {
123
+ display: flex;
124
+ flex-direction: column;
125
+ gap: 12px;
126
+ margin-top: 16px;
127
+
128
+ mat-checkbox {
129
+ margin-bottom: 0;
130
+ }
131
+ }
132
+
133
+ .form-actions {
134
+ display: flex;
135
+ gap: 16px;
136
+ margin-top: 24px;
137
+ padding-top: 24px;
138
+ border-top: 1px solid #e0e0e0;
139
+
140
+ button {
141
+ mat-spinner {
142
+ margin-right: 8px;
143
+ vertical-align: middle;
144
  }
145
 
146
+ mat-icon {
147
+ vertical-align: middle;
148
+ margin-right: 4px;
 
 
 
 
 
 
149
  }
150
+ }
151
+ }
152
 
153
+ ::ng-deep {
154
+ .mat-mdc-form-field-icon-prefix {
155
+ padding-right: 12px;
156
+ }
157
 
158
+ .mat-mdc-progress-spinner {
159
+ --mdc-circular-progress-active-indicator-color: white;
160
+ }
161
+
162
+ .mat-expansion-panel-body {
163
+ padding: 16px 0 !important;
164
+ }
165
+ }