| @@ -171,8 +171,18 @@ | ||
| 171 | 171 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| 172 | 172 | border: 1px solid var(--basalam-gray-200); |
| 173 | 173 | } |
| 174 | 174 | |
| 175 | +#sync-basalam-onboarding-status { | |
| 176 | + width: 90%; | |
| 177 | + box-sizing: border-box; | |
| 178 | +} | |
| 179 | + | |
| 180 | +#sync-basalam-onboarding-status .basalam-sync-status { | |
| 181 | + width: 100%; | |
| 182 | + box-sizing: border-box; | |
| 183 | +} | |
| 184 | + | |
| 175 | 185 | .basalam-status-header { |
| 176 | 186 | display: flex; |
| 177 | 187 | align-items: center; |
| 178 | 188 | justify-content: space-between; |
| @@ -197,8 +207,16 @@ | ||
| 197 | 207 | border-radius: 4px; |
| 198 | 208 | padding: 6px; |
| 199 | 209 | } |
| 200 | 210 | |
| 211 | +.basalam-badge-danger { | |
| 212 | + background: #f8d7da; | |
| 213 | + color: #842029; | |
| 214 | + font-size: 14px; | |
| 215 | + border-radius: 4px; | |
| 216 | + padding: 6px; | |
| 217 | +} | |
| 218 | + | |
| 201 | 219 | .basalam-action-cards { |
| 202 | 220 | display: grid; |
| 203 | 221 | grid-template-columns: repeat(3, 1fr); |
| 204 | 222 | gap: 24px; |
| @@ -2171,8 +2189,56 @@ | ||
| 2171 | 2189 | gap: 10px; |
| 2172 | 2190 | flex-wrap: wrap; |
| 2173 | 2191 | justify-content: center; |
| 2174 | 2192 | flex: 1; |
| 2193 | +} | |
| 2194 | + | |
| 2195 | +#sync-basalam-onboarding-status .basalam-status-header > .basalam-h { | |
| 2196 | + grid-area: title; | |
| 2197 | + direction: rtl; | |
| 2198 | + justify-self: end; | |
| 2199 | +} | |
| 2200 | + | |
| 2201 | +#sync-basalam-onboarding-status .basalam-status-header > .basalam_status_data_container { | |
| 2202 | + grid-area: data; | |
| 2203 | + direction: rtl; | |
| 2204 | + justify-self: center; | |
| 2205 | +} | |
| 2206 | + | |
| 2207 | +#sync-basalam-onboarding-status .basalam-status-header > .basalam-badge { | |
| 2208 | + grid-area: badge; | |
| 2209 | + direction: rtl; | |
| 2210 | + justify-self: start; | |
| 2211 | + white-space: nowrap; | |
| 2212 | +} | |
| 2213 | + | |
| 2214 | +@media screen and (min-width: 1201px) { | |
| 2215 | + #sync-basalam-onboarding-status .basalam-status-header { | |
| 2216 | + display: grid; | |
| 2217 | + grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) minmax(220px, 1fr); | |
| 2218 | + grid-template-areas: "badge data title"; | |
| 2219 | + direction: ltr; | |
| 2220 | + } | |
| 2221 | + | |
| 2222 | + #sync-basalam-onboarding-status .basalam-status-header > .basalam_status_data_container { | |
| 2223 | + width: 100%; | |
| 2224 | + flex-wrap: nowrap; | |
| 2225 | + } | |
| 2226 | +} | |
| 2227 | + | |
| 2228 | +@media screen and (min-width: 901px) and (max-width: 1200px) { | |
| 2229 | + #sync-basalam-onboarding-status .basalam-status-header { | |
| 2230 | + display: grid; | |
| 2231 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 2232 | + grid-template-areas: | |
| 2233 | + "badge title" | |
| 2234 | + "data data"; | |
| 2235 | + direction: ltr; | |
| 2236 | + } | |
| 2237 | + | |
| 2238 | + #sync-basalam-onboarding-status .basalam-status-header > .basalam_status_data_container { | |
| 2239 | + width: 100%; | |
| 2240 | + } | |
| 2175 | 2241 | } |
| 2176 | 2242 | |
| 2177 | 2243 | .basalam_settings_options { |
| 2178 | 2244 | font-family: "PelakFA" !important; |
