/* You can choose the color theme (green or amber) and the positioning of the transformation panel (left or right) */ :root { /* Color scheme variables */ --terminal-color: #33ff33; --terminal-dim-color: #1a4d1a; --terminal-amber: #ffb000; --terminal-dim-amber: #804d00; --terminal-background: #000000; --terminal-font-primary: 'VT323', 'Consolas', 'Courier New', 'Monaco', monospace; --terminal-glow: 0 0 10px; --radio-container-height: 200px; } /* Theme control */ body.amber-theme { --terminal-color: var(--terminal-amber); --terminal-dim-color: var(--terminal-dim-amber); } /* Position control */ body.position_right #image_transformations { left: unset; right: 0; } body.position_right #image_transformations.hidden { transform: translateX(100%); } body.position_right #toggle_button { left: unset; right: 10px; } /* Default (left) positioning */ body.position_left #image_transformations, #image_transformations { /* Default left position */ left: 0; right: unset; } body.position_left #image_transformations.hidden, #image_transformations.hidden { /* Default left position */ transform: translateX(-100%); } body.position_left #toggle_button, #toggle_button { /* Default left position */ left: 10px; right: unset; } @media (min-aspect-ratio: 1/1) { #image_transformations { width: 330px; max-height: 80vh; height: auto; top: 0; transform: translateX(0); } #image_transformations:not(.hidden) { transform: translateX(0); opacity: 1; } } body, html { height: 100%; margin: 0; overflow: hidden; font-family: var(--terminal-font-primary) !important; background-color: var(--terminal-background); } p { font-family: var(--terminal-font-primary) !important; } #main_container { width: 100%; height: 100%; background-color: var(--terminal-background); color: var(--terminal-color); display: flex; flex-direction: column; align-items: center; overflow: hidden; position: relative; min-height: 100vh; /* Asegura que ocupe toda la altura de la ventana */ } .symbol-color { color: var(--terminal-color); } #source_and_target_canvas_container { width: 100%; height: 100%; display: flex; position: relative; } .source_canvas_container_full_width, .SOURCE_CANVAS_CONTAINER_SIDE_BY_SIDE, .TARGET_CANVAS_CONTAINER_SIDE_BY_SIDE { width: 100%; height: 100%; border: solid 1px var(--terminal-dim-color); display: flex; } .SOURCE_CANVAS_CONTAINER_SIDE_BY_SIDE, .TARGET_CANVAS_CONTAINER_SIDE_BY_SIDE { width: 50%; } #SOURCE_CANVAS_CONTAINER canvas, #TARGET_CANVAS_CONTAINER canvas { width: 100%; height: 100%; object-fit: contain; } #image_transformations { background-color: rgba(0, 0, 0, 0.85); border: 1px solid var(--terminal-dim-color); box-shadow: 0 0 10px var(--terminal-dim-color); transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out; position: absolute; opacity: 0; z-index: 10; padding: 20px; box-sizing: border-box; overflow-y: auto; } .hidden { opacity: 0; transform: translateX(100%) !important; } @media (min-aspect-ratio: 1/1) { #image_transformations { width: 330px; max-height: 80vh; height: auto; left: 0; /* "right to left" -> right: 0 */ top: 0; transform: translateX(0); } #image_transformations:not(.hidden) { transform: translateX(0); opacity: 1; } #image_transformations.hidden { transform: translateX(-100%); /* "right to left" -> transform: translateX(100%); */ } } /* Middle to bottom */ /* @media (max-aspect-ratio: 1/1) { #image_transformations { width: 100vw; height: auto; top: 52%; bottom: 0; transform: translateY(0); } #image_transformations.hidden { transform: translateY(100%); } #image_transformations:not(.hidden) { transform: translateY(0); opacity: 1; } } */ /* Top to middle */ @media (max-aspect-ratio: 1/1) { #image_transformations { width: 100vw; height: 70vh; /* Define hasta dónde llegará desde arriba */ top: 0; /* Comienza desde arriba */ bottom: auto; /* Elimina la restricción del bottom */ transform: translateY(0); } #image_transformations.hidden { transform: translateY(-100%); /* Ahora se oculta hacia arriba */ } #image_transformations:not(.hidden) { transform: translateY(0); opacity: 1; } } /* Update toggle button position to match */ #toggle_button { position: absolute; top: 10px; left: 10px; /* "right to left" right: 10px */ background-color: var(--terminal-background); color: var(--terminal-color); border: 1px solid var(--terminal-color); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 20; transition: all 0.3s ease; } #toggle_button:hover { background-color: var(--terminal-dim-color); box-shadow: 0 0 10px var(--terminal-color); } .toggle-button-icon { color: var(--terminal-color); /* Use the terminal color for the icon */ } .image-input-container { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .image-url-input-container { flex-grow: 1; margin-right: 8px; } .load-image-button-container { flex-shrink: 0; } .slider_and_value_container p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 5px var(--terminal-color); } .UI_PIXELATION_SCREEN_SIZE_LEVEL_CLASS, .UI_PALETTE_BITS_BY_TINTS_DEFAULT_DATA_CLASS { display: inline-block; max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .custom-range { width: 100%; height: 4px; background-color: var(--terminal-dim-color); border-radius: 2px; cursor: pointer; margin: 10px 0; } .custom-range::-webkit-slider-thumb { width: 20px; height: 20px; background-color: var(--terminal-color); border: 2px solid var(--terminal-dim-color); border-radius: 50%; cursor: pointer; -webkit-appearance: none; appearance: none; transition: all 0.2s ease; } .custom-range::-moz-range-thumb { width: 20px; height: 20px; background-color: var(--terminal-color); border: 2px solid var(--terminal-dim-color); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .custom-range::-ms-thumb { width: 20px; height: 20px; background-color: var(--terminal-color); border: 2px solid var(--terminal-dim-color); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } /* Hover effects for interactive elements */ .custom-range::-webkit-slider-thumb:hover { box-shadow: 0 0 10px var(--terminal-color); } .custom-range::-moz-range-thumb:hover { box-shadow: 0 0 10px var(--terminal-color); } .custom-range::-ms-thumb:hover { box-shadow: 0 0 10px var(--terminal-color); } /* Input styling */ input[type="text"], input[type="number"] { background-color: var(--terminal-background); color: var(--terminal-color); border: 1px solid var(--terminal-dim-color); padding: 5px 10px; font-family: var(--terminal-font-primary); font-size: 1em; } input[type="text"]:focus, input[type="number"]:focus { outline: none; border-color: var(--terminal-color); box-shadow: 0 0 5px var(--terminal-color); } /* Bootstrap Overrides */ /* Button styles */ .btn { font-family: var(--terminal-font-primary); font-size: 1.1em; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px; } .btn-primary { background-color: var(--terminal-background); color: var(--terminal-color); border: 1px solid var(--terminal-color); padding: 0.5rem 1rem; position: relative; overflow: hidden; } .btn-primary:hover { background-color: var(--terminal-dim-color); border-color: var(--terminal-color); color: var(--terminal-color); box-shadow: var(--terminal-glow) var(--terminal-color); } .btn-primary:active, .btn-primary:focus { background-color: var(--terminal-dim-color) !important; border-color: var(--terminal-color) !important; color: var(--terminal-color) !important; box-shadow: var(--terminal-glow) var(--terminal-color) !important; } /* Range slider styles */ .custom-range { -webkit-appearance: none; width: 100%; height: 4px; background-color: var(--terminal-dim-color); border-radius: 2px; margin: 1rem 0; } .custom-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background-color: var(--terminal-background); border: 2px solid var(--terminal-color); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .custom-range::-moz-range-thumb { width: 20px; height: 20px; background-color: var(--terminal-background); border: 2px solid var(--terminal-color); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .custom-range:focus { outline: none; } .custom-range::-webkit-slider-thumb:hover, .custom-range::-moz-range-thumb:hover { background-color: var(--terminal-dim-color); box-shadow: var(--terminal-glow) var(--terminal-color); } /* Form control styles */ .form-control { background-color: var(--terminal-background); color: var(--terminal-color); border: 1px solid var(--terminal-dim-color); font-family: var(--terminal-font-primary); font-size: 1.1em; padding: 0.5rem; transition: all 0.2s ease; } .form-control:focus { background-color: var(--terminal-background); color: var(--terminal-color); border-color: var(--terminal-color); box-shadow: var(--terminal-glow) var(--terminal-color); outline: none; } .form-control::placeholder { color: var(--terminal-dim-color); opacity: 0.7; } /* Radio button styles */ .form-check { padding-left: 2em; margin-bottom: 1rem; } .form-check-input { width: 1.2em; height: 1.2em; margin-left: -2em; background-color: var(--terminal-background); border: 2px solid var(--terminal-dim-color); transition: all 0.2s ease; } .form-check-input:checked { background-color: var(--terminal-color); border-color: var(--terminal-color); } .form-check-input:focus { border-color: var(--terminal-color); box-shadow: var(--terminal-glow) var(--terminal-color); } .form-check-label { font-family: var(--terminal-font-primary); color: var(--terminal-color); padding-left: 0.5em; cursor: pointer; } /* Add a subtle glow effect when hovering over radio container */ .form-check:hover .form-check-input { border-color: var(--terminal-color); } /* Disabled states */ .btn-primary:disabled, .form-control:disabled, .form-check-input:disabled, .form-check-input:disabled ~ .form-check-label { opacity: 0.5; cursor: not-allowed; } /* Focus visible styles for accessibility */ .btn-primary:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible { outline: 2px solid var(--terminal-color); outline-offset: 2px; } /* Ensure text remains visible during loading for dark background */ @media (prefers-color-scheme: dark) { .btn-primary, .form-control { color-scheme: dark; } } /* Button styles with complete Bootstrap override */ .btn-primary { background-color: var(--terminal-background) !important; color: var(--terminal-color) !important; border: 1px solid var(--terminal-color) !important; padding: 0.5rem 1rem; position: relative; overflow: hidden; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--terminal-dim-color) !important; border-color: var(--terminal-color) !important; color: var(--terminal-color) !important; box-shadow: var(--terminal-glow) var(--terminal-color) !important; outline: none !important; } /* Optional: Add a subtle pulse animation for extra retro feel */ .btn-primary:hover { animation: buttonPulse 2s infinite; } @keyframes buttonPulse { 0% { box-shadow: 0 0 5px var(--terminal-color); } 50% { box-shadow: 0 0 15px var(--terminal-color); } 100% { box-shadow: 0 0 5px var(--terminal-color); } } /* Disabled state */ .btn-primary:disabled, .btn-primary.disabled { background-color: var(--terminal-background) !important; border-color: var(--terminal-dim-color) !important; color: var(--terminal-dim-color) !important; opacity: 0.6; } /* Style the hr elements with the terminal dim green color */ hr { /* border: none; height: 1px; background-color: var(--terminal-color); */ border-top: 1px solid var(--terminal-dim-color) !important; } .full-image-input-container { display: flex; width: 100%; } #load_image_methods_container { display: flex; width: 100%; } #IMAGE_FILE_INPUT_CONTAINER, #IMAGE_INPUT_CONTAINER { width: 50%; display: flex; align-items: center; } #IMAGE_INPUT_CONTAINER { justify-content: flex-end; } #IMAGE_URL_INPUT_CONTAINER { width: 70%; /* Make this narrower */ margin-right: 8px; } #LOAD_IMAGE_BUTTON_CONTAINER { width: 30%; flex-shrink: 0; } /* load image vertically aligned */ #IMAGE_INPUT_CONTAINER { width: 50%; display: flex; align-items: center; justify-content: flex-end; } #IMAGE_URL_INPUT_CONTAINER, #LOAD_IMAGE_BUTTON_CONTAINER { display: flex; align-items: center; } #IMAGE_INPUT_CONTAINER > div { display: flex; align-items: center; } #load_image_methods_container { display: flex; width: 100%; align-items: center; gap: 20px; } /* Video controls */ #VIDEO_CONTROLS_CONTAINER { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; /* Adjust this value as needed */ background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */ color: #fff; /* White text color */ padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; z-index: 9998; /* Slightly lower than #image_transformations */ border-top: 1px solid #333; /* Optional: add a border for visual separation */ } #VIDEO_CONTROLS_CONTAINER button, #VIDEO_CONTROLS_CONTAINER input[type="range"] { margin: 0 5px; /* Adjust spacing between controls */ } #image_transformations { z-index: 9999; /* Ensure it's on top of everything, including #VIDEO_CONTROLS_CONTAINER */ } #toggle_button { position: absolute; /* Ensure it respects the z-index */ z-index: 10000; /* Higher than #image_transformations and #VIDEO_CONTROLS_CONTAINER */ } /* Updated loading spinner with perfect centering */ #LOAD_SPINNER { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 100000; color: var(--terminal-color); font-family: var(--terminal-font-primary); font-size: 2em; text-shadow: var(--terminal-glow) var(--terminal-color); text-align: center; animation: pulse 2s infinite; /* Add this line */ } #LOAD_SPINNER div { text-align: center; width: 100%; } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } /* Container for all image loading options */ .full-image-input-container { display: flex; flex-direction: column; width: 100%; gap: 20px; } /* Container for webcam and file input */ /* #load_webcam_or_file_container { display: flex; width: 100%; gap: 20px; align-items: center; } #IMAGE_FILE_INPUT_CONTAINER, #CAMERA_BUTTON_CONTAINER { flex: 1; display: flex; align-items: center; } */ /* Container for URL input */ #load_file_by_url_container { display: flex; width: 100%; } #IMAGE_INPUT_CONTAINER { width: 100%; display: flex; align-items: center; gap: 20px; } #IMAGE_URL_INPUT_CONTAINER { flex: 3; } #LOAD_IMAGE_BUTTON_CONTAINER { flex: 1; } /* Remove old unused styles */ #load_image_methods_container { display: none; } /* Radio buttons container; comprimidos */ #PIXEL_CONSOLES_RADIOS_CONTAINER { display: flex; flex-direction: column; gap: 4px; max-height: var(--radio-container-height); /* Puedes ajustar este valor según necesites */ overflow-y: auto; padding-right: 10px; /* Espacio para el scrollbar */ } #PIXEL_CONSOLES_RADIOS_CONTAINER .form-check { margin: 0; padding: 0; } #PIXEL_CONSOLES_RADIOS_CONTAINER .form-check-input { margin-right: 8px; } /* Vertical scroll - optional */ #PIXEL_CONSOLES_RADIOS_CONTAINER::-webkit-scrollbar { width: 8px; } #PIXEL_CONSOLES_RADIOS_CONTAINER::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } #PIXEL_CONSOLES_RADIOS_CONTAINER::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } #PIXEL_CONSOLES_RADIOS_CONTAINER::-webkit-scrollbar-thumb:hover { background: #555; } /* Console info div */ #console_info { position: fixed; bottom: 20px; /* Espacio desde el borde inferior */ left: 50%; transform: translateX(-50%); text-align: center; background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */ padding: 15px; border-radius: 8px; z-index: 998; /* Por debajo del spinner pero por encima del resto */ max-width: 98%; /* Para evitar que se salga en pantallas pequeñas */ transition: opacity 0.3s ease-in-out; } #console_info p, #consoles_info_side p { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } #console_info.hidden { opacity: 0; pointer-events: none; } /* Nueva ubicacion de download y reset buttons */ #load_webcam_or_file_container { display: flex; gap: 20px; align-items: center; } #IMAGE_FILE_INPUT_CONTAINER, #CAMERA_BUTTON_CONTAINER { flex: 1; } #DOWNLOAD_IMAGE_BUTTON_CONTAINER { flex: 0 0 auto; } .title-container { display: flex; align-items: center; justify-content: space-between; margin-top: 3em; } .title-container h3 { margin: 0; } /* Hacer los botones más compactos */ #DOWNLOAD_IMAGE_BUTTON_CONTAINER .btn { padding: 0.25rem 0.5rem; /* font-size: 0.875rem; */ } .enabled { background-color: var(--terminal-background) !important; color: var(--terminal-color) !important; border: 1px solid var(--terminal-color) !important; opacity: 1 !important; cursor: pointer !important; } .enabled:hover { background-color: var(--terminal-dim-color) !important; box-shadow: var(--terminal-glow) var(--terminal-color) !important; } #AUDIO_QUALITY_TOGGLE_CONTAINER button { /* width: 50px; */ height: 30px; font-size: 10px; padding: 5px; } #t-app-content { padding: 0rem; } /* Fullscreen */ /* html, body { height: 100vh; margin: 0; padding: 0; overflow: hidden; } #main_container { width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden; position: relative; } #source_and_target_canvas_container { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; position: relative; } .source_canvas_container_full_width { width: 100%; height: 100%; margin: 0; padding: 0; } #SOURCE_CANVAS_CONTAINER canvas { width: 100%; height: 100%; object-fit: contain; margin: 0; padding: 0; } */