Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Building

App Files Community
1
ciyidogan commited on
Commit
12835a8
·
verified ·
1 Parent(s): 69e43ed

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 +104 -60
flare-ui/src/app/components/environment/environment.component.scss CHANGED
@@ -1,28 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
  }
@@ -33,6 +64,10 @@
33
 
34
  mat-form-field {
35
  margin-bottom: 16px;
 
 
 
 
36
  }
37
 
38
  mat-divider {
@@ -40,64 +75,67 @@ mat-divider {
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 {
@@ -106,19 +144,25 @@ mat-card-actions {
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
  }
124
  }
 
1
+ :host {
2
+ display: block;
3
+ padding: 24px;
4
+ max-width: 1200px;
5
+ margin: 0 auto;
6
+ }
7
+
8
+ mat-card {
9
+ mat-card-header {
10
+ margin-bottom: 24px;
11
+
12
+ mat-card-title {
13
+ display: flex;
14
+ align-items: center;
15
+ gap: 8px;
16
+ font-size: 24px;
17
+
18
+ mat-icon {
19
+ font-size: 28px;
20
+ width: 28px;
21
+ height: 28px;
22
+ }
23
+ }
24
+ }
25
+ }
26
+
27
  .loading-container {
28
  display: flex;
29
  flex-direction: column;
30
  align-items: center;
31
  justify-content: center;
32
  padding: 48px;
33
+ gap: 16px;
34
 
35
  p {
 
36
  color: rgba(0, 0, 0, 0.6);
37
+ margin: 0;
38
  }
39
  }
40
 
41
  .provider-section {
42
+ margin-bottom: 32px;
43
 
44
  h3 {
45
  display: flex;
46
  align-items: center;
47
  gap: 8px;
 
48
  color: rgba(0, 0, 0, 0.87);
49
+ margin-bottom: 16px;
50
+ font-size: 18px;
51
+ font-weight: 500;
52
 
53
  mat-icon {
54
+ font-size: 24px;
55
+ width: 24px;
56
+ height: 24px;
57
  }
58
  }
59
  }
 
64
 
65
  mat-form-field {
66
  margin-bottom: 16px;
67
+
68
+ &.full-width {
69
+ width: 100%;
70
+ }
71
  }
72
 
73
  mat-divider {
 
75
  }
76
 
77
  .settings-panel {
78
+ margin-top: 16px;
79
+ background: #f5f5f5;
80
 
81
+ mat-expansion-panel-header {
82
+ mat-panel-title {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 8px;
86
+
87
+ mat-icon {
88
+ font-size: 20px;
89
+ width: 20px;
90
+ height: 20px;
91
+ }
92
+ }
93
  }
94
 
95
+ .panel-content {
96
+ padding: 16px;
97
+
98
+ .hint-text {
99
+ color: rgba(0, 0, 0, 0.6);
100
+ font-size: 14px;
101
+ margin-bottom: 16px;
102
+ }
103
  }
104
  }
105
 
106
+ mat-slide-toggle {
107
+ display: block;
108
+ margin-bottom: 16px;
109
+ }
110
+
111
+ .config-item {
112
+ margin: 24px 0;
113
 
114
+ label {
115
+ display: block;
116
+ color: rgba(0, 0, 0, 0.87);
117
+ font-weight: 500;
118
+ margin-bottom: 8px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  }
120
 
121
+ mat-slider {
122
+ width: calc(100% - 60px);
123
+ display: inline-block;
124
  }
125
+
126
+ .slider-value {
127
+ display: inline-block;
128
+ width: 50px;
129
+ text-align: right;
130
+ color: rgba(0, 0, 0, 0.6);
131
+ font-weight: 500;
132
  }
133
  }
134
 
 
135
  mat-card-actions {
136
+ padding: 16px 24px;
137
+ margin: 0 -24px -24px;
138
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
139
 
140
  button {
141
  mat-icon {
 
144
  }
145
  }
146
 
147
+ // Icon styling in select options
148
+ mat-option {
149
+ mat-icon {
150
+ margin-right: 8px;
151
+ vertical-align: middle;
152
+ }
153
+ }
154
+
155
  // Responsive adjustments
156
  @media (max-width: 768px) {
157
+ :host {
158
+ padding: 16px;
159
+ }
160
+
161
+ .provider-section {
162
+ margin-bottom: 24px;
163
+ }
164
+
165
+ mat-divider {
166
+ margin: 24px 0;
 
 
167
  }
168
  }