Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-27 17:52:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style dialog with dark theme and brand yellow button

Browse Source
This commit is contained in:
filtered
2025-09-14 00:01:46 +10:00
parent 03e92c5eb7
commit 69f5e65f7b
1 changed files with 60 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/DesktopDialogView.vue
View File

@@ -3,39 +3,48 @@
<div class="dialog-container"> <div class="dialog-container">
<div class="dialog-title">{{ title }}</div> <div class="dialog-title">{{ title }}</div>
<div class="dialog-message">{{ message }}</div> <div class="dialog-message">{{ message }}</div>
<div class="dialog-actions">
<button class="dialog-button">{{ t('common.close') }}</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const route = useRoute() const route = useRoute()
const { t } = useI18n()
// Get title and message from query parameters // Get title and message from query parameters
const title = computed(() => (route.query.title as string) || 'Dialog') const title = computed(() => (route.query.title as string) || 'Quick Setup')
const message = computed(() => (route.query.message as string) || '') const message = computed(() => (route.query.message as string) || '')
</script> </script>
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=ABC+ROM:ital@1&display=swap');
.desktop-dialog { .desktop-dialog {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1a1a1a;
} }
.dialog-container { .dialog-container {
background: rgba(255, 255, 255, 0.95); display: flex;
backdrop-filter: blur(10px); width: 448px;
border-radius: 12px; flex-direction: column;
padding: 32px; align-items: flex-start;
width: 90%; gap: 24px;
max-width: 440px; border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 24px;
background: #2d2d2d;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
animation: slideIn 0.3s ease-out; animation: slideIn 0.3s ease-out;
} }
@@ -51,15 +60,53 @@ const message = computed(() => (route.query.message as string) || '')
} }
.dialog-title { .dialog-title {
font-family:
'ABC ROM',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
font-style: italic;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 500;
color: #1a202c; color: #ffffff;
margin-bottom: 12px; margin: 0;
} }
.dialog-message { .dialog-message {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px; font-size: 14px;
color: #4a5568; color: #b0b0b0;
line-height: 1.6; line-height: 1.6;
margin: 0;
}
.dialog-actions {
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: 8px;
}
.dialog-button {
padding: 10px 24px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
cursor: pointer;
transition: all 0.2s ease;
background: #f0ff41;
color: #1a1a1a;
}
.dialog-button:hover {
background: #d9e639;
transform: translateY(-1px);
}
.dialog-button:active {
transform: translateY(0);
} }
</style> </style>