{#if rendering}
-
Rendering...
+
+ Rendering...{(renderProgress * 100).toFixed(2)}%
+
{/if}
@@ -175,7 +195,6 @@
"hdr log log log prv prv"
"hdr cmd cmd cmd prv prv"
"flt gra gra gra gra edt";
- /* grid-template-rows: 16% 17% 77%; */
grid-template-rows: 15% 15% calc(70% - 40px);
padding: 10px;
grid-gap: 20px;
@@ -214,6 +233,7 @@
.preview video {
width: 100%;
+ background-color: #000;
/* object-fit: contain; */
flex: 1;
}
@@ -247,6 +267,14 @@
display: flex;
}
+ .section-head {
+ display: flex;
+ justify-content: stretch;
+ }
+ .section-head h3 {
+ flex: 1;
+ }
+
.filter-picker {
/* max-height: 500px; */
/* width: 400px; */
@@ -284,33 +312,42 @@
-moz-box-shadow: none;
box-shadow: none;
resize: none;
+ height: auto;
}
.actual-command {
border: none;
- margin-right: 10px;
flex: 1;
font: inherit;
padding: 5px;
height: 100%;
}
.the-log {
+ color: red;
border: none;
resize: none;
padding: 5px;
flex: 1;
}
+ .render-progress {
+ transition: 0.1s all;
+ width: 0%;
+ height: 7px;
+ background-color: var(--b1);
+ }
.rendering-video {
position: absolute;
width: 100%;
height: 100%;
+ opacity: 0.97;
+ background-color: var(--b2);
z-index: 2;
- background-color: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
display: grid;
align-items: center;
justify-content: center;
+ align-content: center;
}
.help {
diff --git a/src/ButtonEdge.svelte b/src/ButtonEdge.svelte
index 8c25e63..69af0e5 100644
--- a/src/ButtonEdge.svelte
+++ b/src/ButtonEdge.svelte
@@ -56,8 +56,11 @@
line-height: 1;
box-shadow: none;
}
-
- /* .edgebutton:hover { */
- /* box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); */
- /* } */
+ .edgebutton:active {
+ top: -3px;
+ left: 0px;
+ }
+ .edgebutton:hover {
+ box-shadow: 0px 0px 1px #000;
+ }
diff --git a/src/app.css b/src/app.css
index 6e78712..2a620b8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,7 +5,7 @@
/* --b1: #004dff; */
/* --b2: #f19696b3; */
--b1: #004dff;
- --b2: #ffdadab3;
+ --b2: #ffe5e5;
/* --b1: #ff0000; */
/* --b2: #b6e3f2b3; */
}
@@ -46,8 +46,8 @@ select {
}
button:active {
position: relative;
- top: 2px;
- left: 2px;
+ top: 1px;
+ left: 1px;
box-shadow: none;
}