kfeditor : html & css cleanup

This commit is contained in:
STEINNI
2025-10-23 16:41:05 +00:00
parent 8276a77172
commit 6931a777a2
2 changed files with 23 additions and 13 deletions
+20 -13
View File
@@ -8,25 +8,32 @@
height: 100%;
margin: 0;
}
.kf-editor > article, .kf-editor > article header{ border-color: #473; }
.kf-editor article.agent-preview header { padding:0; }
.kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;}
.kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; }
.kf-editor article.agent-preview section{
.kf-editor article.left-pane section{
display: grid;
grid-template-rows: 2em auto;
overflow: visible;
}
.kf-editor article.agent-properties section{
display: grid;
grid-template-rows: 2em auto;
grid-template-rows: 2em 3em auto;
overflow: visible;
height:100%;
}
.kf-editor article.agent-preview section.selector{ padding: 0.5em .5em 1.5em .5em; }
.kf-editor article.agent-preview section.browser{ padding:0; }
.kf-editor article.agent-preview section.browser header { border-top: 1px solid #473; border-bottom: 1px solid #473;}
.kf-editor article.agent-preview section.browser header h1{ text-align: center; margin-top: .3em;}
.kf-editor article.left-pane > section, .kf-editor article.agent-properties > section { padding:0; }
.kf-editor article.left-pane > section header, .kf-editor article.agent-properties > section header {
margin: 0;
padding: 0;
border-top: 1px solid #473;
border-bottom: 1px solid #473;
background-color: #342;
}
.kf-editor article.left-pane > section header h1, .kf-editor article.agent-properties > section header h1{
text-align: center;
margin-top: .3em;
}
.kf-editor article.left-pane > section > bz-select{ margin: 0 0.5em 1em 0.5em; }
.kf-editor article.kfArena section{
padding: 0;
height: 100%;
@@ -39,6 +46,7 @@
box-shadow: 0px 0px 7px #0B69;
height: 2em;
padding: 0 5px 0 5px;
margin-top: .5em;
}
.kf-editor article.agent-properties section div.agent-actions button{
color: #DDD;
@@ -55,8 +63,6 @@
.kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
.kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
.kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }
.kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
.kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
.kf-editor div[data-output="agentId"] {
border: 1px solid #574;
border-radius: 5px;
@@ -69,9 +75,10 @@
}
</style>
<div class="kf-editor cols-3">
<article eiccard class="agent-preview">
<header><canvas data-output="agentSampleCanvas"></canvas></header>
<article eiccard class="left-pane">
<section class="selector">
<header><h1>Agent type browser</h1></header>
<canvas data-output="agentSampleCanvas"></canvas>
<bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
</section>
<section class="browser">
@@ -84,8 +91,8 @@
</section>
</article>
<article eiccard class="agent-properties">
<header><h1>Agent properties</h1></header>
<section>
<header><h1>Agent properties</h1></header>
<div class="agent-actions cols-2">
<button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
+3
View File
@@ -124,6 +124,9 @@ class KeyframeView extends WindozDomContent {
this.setupRefs()
}
onSaveKF(evt){
console.log('SAVE:',this.kfArena.agents)
}
}