mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
9e434a1002
## Summary - Replace hardcoded `text-white` class with theme-aware alternatives to fix invisible text on light themes - Update Load3D control backgrounds to use semantic tokens - Update dropdown menus to use `bg-interface-menu-surface` - Update overlay backgrounds to use `bg-backdrop` with opacity ## Changes | Component | Old | New | |-----------|-----|-----| | Text on primary bg | `text-white` | `text-base-foreground` | | Dropdown menus | `bg-black/50` | `bg-interface-menu-surface` | | Control panels | `bg-smoke-700/30` | `bg-backdrop/30` | | Loading overlays | `bg-black bg-opacity-50` | `bg-backdrop/50` | | Selected states | `bg-smoke-600` | `bg-button-active-surface` | ## Files Modified (14) - `src/components/TopMenuSection.vue` - `src/components/input/MultiSelect.vue` - `src/components/load3d/*.vue` (12 files) - `src/renderer/extensions/vueNodes/VideoPreview.vue` ## Test plan - [ ] Verify text visibility in light theme - [ ] Verify text visibility in dark theme - [ ] Test Load3D viewer controls functionality - [ ] Test MultiSelect dropdown checkbox visibility ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7908-fix-replace-text-white-with-theme-aware-color-tokens-2e26d73d36508107bb01d1d6e3b74f6a) by [Unito](https://www.unito.io)
43 lines
786 B
Vue
43 lines
786 B
Vue
<template>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="loading"
|
|
class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<div class="spinner" />
|
|
<div class="mt-4 text-lg text-base-foreground">
|
|
{{ loadingMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
loading: boolean
|
|
loadingMessage: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|