Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Running

App Files Community
1
ciyidogan commited on
Commit
650ca33
·
verified ·
1 Parent(s): 5cd3639

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 +166 -0
flare-ui/src/app/components/environment/environment.component.scss CHANGED
@@ -0,0 +1,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
+ .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
+ }