style 화이트로 디자인 수정 변경

main
jschoi 7 months ago
parent 349c54ac19
commit 095288e44d

@ -484,7 +484,7 @@ watch(
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -192,11 +192,7 @@ watch(
</v-card-item>
</v-card>
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card-text class="px-6 pb-6 pt-4">
<v-row align="center" class="py-2">
<v-col cols="3" class="text-h6 font-weight-bold"

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet>
<!-- Table -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -424,7 +424,7 @@ const getSelectedAllData = () => {
</v-sheet>
</v-sheet>
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -682,7 +682,6 @@ watch(showKubeflowDetails, async () => {
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div
@ -769,7 +768,6 @@ watch(showKubeflowDetails, async () => {
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div
@ -831,7 +829,6 @@ watch(showKubeflowDetails, async () => {
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div style="padding: 16px">
@ -981,7 +978,6 @@ watch(showKubeflowDetails, async () => {
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div style="padding: 16px">

@ -588,7 +588,7 @@ onMounted(async () => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -261,7 +261,7 @@ onMounted(() => {
class="bg-shades-transparent d-flex flex-column justify-center w-100"
>
<!-- 1) Workflow Information -->
<v-card flat class="bg-shades-transparent w-100" color="grey-lighten-3">
<v-card flat class="bg-shades-transparent w-100">
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
<div class="d-flex flex-row justify-start align-center">
<div>Compare Executions</div>

@ -632,7 +632,7 @@ onMounted(() => {
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -851,11 +851,7 @@ const artifactsLoading = ref(false);
<v-window v-model="mainTab">
<!-- ========= Details ========= -->
<v-window-item value="details">
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Execution Information</span>
</v-card-title>
@ -971,7 +967,7 @@ const artifactsLoading = ref(false);
<!-- ========= Visualizations ========= -->
<v-window-item value="viz">
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card class="rounded-lg pa-8 w-100">
<v-window v-model="vizTab">
<v-window-item value="metrics">
<v-card-text>
@ -1035,7 +1031,7 @@ const artifactsLoading = ref(false);
<!-- Selected Run -->
<!-- Selected Run -->
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card flat class="mb-6">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>
@ -1162,7 +1158,7 @@ const artifactsLoading = ref(false);
</v-card>
<!-- Model Metrics table -->
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card flat class="mb-6">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>Model Metrics (selected run)</v-card-title
@ -1192,7 +1188,7 @@ const artifactsLoading = ref(false);
</v-card>
<!-- Bar chart -->
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card flat class="mb-6">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>Metrics (bar chart)</v-card-title
@ -1230,7 +1226,7 @@ const artifactsLoading = ref(false);
<!-- ========= Artifacts (Two-step, Flat) ========= -->
<v-window-item value="artifacts">
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card class="rounded-lg pa-8 w-100">
<v-card-text>
<v-row class="mb-4" align="center">
<v-col
@ -1324,7 +1320,7 @@ const artifactsLoading = ref(false);
</v-alert>
<!-- 바깥 카드도 flat, 타이틀 통일 -->
<v-card flat color="grey-lighten-3" class="mb-2">
<v-card flat class="mb-2">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>

@ -390,7 +390,7 @@ onMounted(() => {
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -194,7 +194,6 @@ watch(
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8 position-relative"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Experiment Information</span>
@ -248,7 +247,7 @@ watch(
</v-card>
<!-- Runs -->
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card class="rounded-lg pa-8 w-100">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Runs</span>
</v-card-title>

@ -407,7 +407,7 @@ onMounted(() => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -463,7 +463,7 @@ watch(
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -115,11 +115,7 @@ onBeforeUnmount(() => {
</v-card-item>
</v-card>
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Information</span>
</v-card-title>
@ -164,11 +160,7 @@ onBeforeUnmount(() => {
</v-card>
<!-- 미리보기 -->
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Preview</span>
</v-card-title>

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet>
<!-- Table -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -484,7 +484,7 @@ onMounted(async () => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -432,7 +432,7 @@ onMounted(() => {
</v-sheet>
</v-sheet>
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-card class="rounded-lg pa-8">
<v-col cols="12">
<v-sheet>
<v-table

@ -222,10 +222,7 @@ const steps = ref<
<!-- Details -->
<template v-if="activeTab === 'details'">
<v-card
class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card"
color="grey-lighten-3"
>
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Workflow Information</span>
</v-card-title>

@ -1,19 +1,23 @@
// plugins/vuetify.ts
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import { createVuetify } from "vuetify";
export default createVuetify({
theme: {
defaultTheme: "light",
defaultTheme: "tealOrangeLight",
themes: {
light: {
tealOrangeLight: {
dark: false,
colors: {
background: "#ffffff",
surface: "#ffffff",
card: "#f7f8fa",
border: "#e7e9ee",
text: "#2b2f33",
muted: "#6b7280",
primary: "#3B82F6",
secondary: "#22C55E",
success: "#22C55E",
info: "#3B82F6",
warning: "#F59E0B",
error: "#F43F5E",
surface: "#FAFAFA",
background: "#F3F4F6",
},
},
},

Loading…
Cancel
Save