web UI

VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css

@@ -0,0 +1,293 @@
+/* Preview Window */
+.preview-window {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 5px solid transparent;
+    box-sizing: border-box;
+}
+
+.preview-window.preview-error {
+    border-color: #f44336;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.preview-placeholder {
+    color: #666;
+    font-size: 1.2rem;
+}
+
+/* Stats Panel */
+.stats-panel {
+    padding: 4px 8px;
+    font-family: 'Verdana', sans-serif;
+    font-size: 0.75rem;
+}
+
+.stats-field {
+    margin-bottom: 2px;
+}
+
+.stats-field-label {
+    font-weight: 700;
+    display: block;
+    margin-top: 6px;
+}
+
+.stats-field-value {
+    display: block;
+}
+
+.stats-bold {
+    font-weight: 700;
+}
+
+.stats-details-text {
+    margin: 0;
+    white-space: pre-wrap;
+    font-size: 0.7rem;
+}
+
+/* Error Preview Panel */
+.error-preview-panel {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px;
+    overflow-y: auto;
+    height: 100%;
+    align-content: flex-start;
+}
+
+.error-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    padding: 2px;
+    transition: background-color 0.2s;
+    width: 180px;
+}
+
+.error-card:hover {
+    background-color: #f0f0f0;
+}
+
+.error-thumbnail {
+    width: 170px;
+    height: 130px;
+    object-fit: cover;
+}
+
+.error-title {
+    font-size: 0.7rem;
+    text-align: center;
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+/* Single Camera Control */
+.single-camera-control {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #fff;
+}
+
+/* Header row */
+.camera-header {
+    display: flex;
+    height: 28px;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.camera-header-preview {
+    flex: 45;
+    text-align: center;
+}
+
+.camera-header-errors {
+    flex: 25;
+    text-align: center;
+}
+
+.camera-header-stats {
+    flex: 14;
+}
+
+.camera-header-buttons {
+    flex: 14;
+}
+
+.camera-label {
+    font-weight: 700;
+    font-size: 1rem;
+}
+
+.errors-label {
+    font-size: 1rem;
+}
+
+/* Body row */
+.camera-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+
+.camera-preview-area {
+    flex: 45;
+    min-width: 0;
+    min-height: 0;
+}
+
+.camera-divider {
+    width: 1px;
+    background-color: #37474f;
+    flex-shrink: 0;
+}
+
+.camera-errors-area {
+    flex: 25;
+    min-width: 0;
+    overflow-y: auto;
+}
+
+.camera-stats-area {
+    flex: 14;
+    overflow-y: auto;
+    border-left: none;
+}
+
+.camera-buttons-area {
+    flex: 14;
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+}
+
+.camera-buttons-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.camera-btn {
+    height: 64px !important;
+    font-weight: 700 !important;
+    font-size: 0.85rem !important;
+}
+
+/* Recipe Selection Dialog */
+.recipe-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 8px;
+}
+
+.recipe-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    transition: border-color 0.2s;
+    width: 150px;
+}
+
+.recipe-item:hover {
+    border-color: #90caf9;
+}
+
+.recipe-item.recipe-selected {
+    border-color: #1976d2;
+    background-color: #e3f2fd;
+}
+
+.recipe-thumbnail {
+    width: 130px;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.recipe-no-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    color: #999;
+    font-size: 0.8rem;
+}
+
+.recipe-name {
+    margin-top: 6px;
+    font-size: 0.85rem;
+    text-align: center;
+    word-break: break-word;
+}
+
+/* Image Preview Dialog */
+.image-preview-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.image-preview-img {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+}
+
+.image-preview-info {
+    text-align: center;
+}
+
+.image-preview-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* Settings Dialog */
+.settings-layout {
+    display: flex;
+    gap: 16px;
+    min-height: 400px;
+}
+
+.settings-tree {
+    min-width: 200px;
+    border-right: 1px solid #e0e0e0;
+    padding-right: 8px;
+    overflow-y: auto;
+}
+
+.settings-content {
+    flex: 1;
+    padding: 0 8px;
+    overflow-y: auto;
+}
+
+.settings-field {
+    margin-bottom: 12px;
+}