From bc8313d408285ce5dc4945810b998ff3b91ee55b Mon Sep 17 00:00:00 2001 From: JotaChina Date: Sun, 23 Nov 2025 16:06:40 -0300 Subject: [PATCH] plugin v1.0.1 --- assets/css/creator.css | 344 +++++++++++++++++ assets/css/style.css | 819 ++++++----------------------------------- creation.html | 2 +- 3 files changed, 461 insertions(+), 704 deletions(-) create mode 100644 assets/css/creator.css diff --git a/assets/css/creator.css b/assets/css/creator.css new file mode 100644 index 00000000..72cf3c00 --- /dev/null +++ b/assets/css/creator.css @@ -0,0 +1,344 @@ +/* ========================================================================== + CREATOR.CSS + Estilos exclusivos para o editor MMPCreator (creations.html). + Contém: Timeline, Piano Roll, Step Sequencer, Sample Browser, etc. + ========================================================================== */ + +:root { + --bg-body: #2d3035; + --bg-toolbar: #3b3f45; + --bg-editor: #33373d; + --border-color: #232529; + --text-light: #c0c0c0; + --text-dark: #888; + --accent-green: #2ecc71; + --accent-red: #d9534f; + --background-light: #4a4f57; + --background-lighter: #5c626b; + --border-color-dark: #1a1c1e; + --accent-blue: #3498db; +} + +/* =============================================== */ +/* LAYOUT DE APLICAÇÃO (EDITOR) +/* =============================================== */ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: var(--bg-body); + color: var(--text-light); + height: 100vh; /* Trava a altura para app */ + overflow: hidden; /* Esconde barra de rolagem da janela */ + display: flex; /* Layout flex para App */ +} + +body.knob-dragging { cursor: ns-resize; } +body.slice-tool-active .timeline-container { cursor: crosshair; } + +.app-container { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + position: relative; +} + +/* =============================================== */ +/* MODO EMBED (IFRAME/VISUALIZAÇÃO) +/* =============================================== */ +body.embed-mode .sample-browser, +body.embed-mode .global-toolbar, +body.embed-mode #sidebar-toggle { + display: none !important; +} + +body.embed-mode .app-container { + padding-left: 0; + transform: scale(0.15); + transform-origin: top left; + position: absolute; + top: 0; left: 0; + width: calc(100vw / 0.15); + height: calc(100vh / 0.15); + display: flex; + flex-direction: column; + overflow: hidden; +} + +body.embed-mode .main-content { + flex-grow: 1; height: auto; width: auto; overflow: hidden; +} + +body.embed-mode { margin: 0; padding: 0; width: 100%; height: 100%; } + +/* =============================================== */ +/* PIANO ROLL EDITOR +/* =============================================== */ +.piano-roll-editor { + position: absolute; + top: 60px; left: 0; right: 0; bottom: 0; + background-color: #2b2e33; + z-index: 50; + display: flex; flex-direction: column; + border-top: 1px solid var(--border-color, #444); +} +.piano-roll-toolbar { + height: 40px; background-color: #363a40; border-bottom: 1px solid #444; + display: flex; align-items: center; padding: 0 10px; gap: 15px; color: #ccc; +} +.piano-roll-workspace { flex: 1; display: flex; overflow: hidden; position: relative; background-color: #222; } +.piano-keys-container { width: 60px; background-color: #1e1e1e; border-right: 1px solid #444; overflow: hidden; position: relative; z-index: 2; } +.piano-grid-container { flex: 1; overflow: auto; position: relative; background-color: #252525; cursor: crosshair; } +.piano-key-white { fill: #fff; } +.piano-key-black { fill: #000; } + +/* Mini Piano Roll (Visualização na Track) */ +.track-mini-piano-roll { + position: relative; width: 100%; height: 100%; background-color: #222; + border-radius: 4px; cursor: pointer; overflow: hidden; border: 1px solid #444; +} +.track-mini-piano-roll:hover { border-color: #666; background-color: #2a2a2a; } +.mini-note { + position: absolute; background-color: #ffbb00; height: 4px; border-radius: 1px; opacity: 0.9; box-shadow: 0 0 2px rgba(0,0,0,0.5); + pointer-events: none; min-width: 2px; +} +.step-sequencer.mode-piano { + display: block !important; gap: 0 !important; width: 100%; height: 54px; + position: relative; background-color: #1e1e1e; border-radius: 4px; + border: 1px solid var(--border-color); overflow: hidden; margin-top: 4px; +} +.step-sequencer.mode-piano:hover { border-color: #666; background-color: #262626; } +.step-sequencer.mode-piano .track-mini-piano-roll { + background: linear-gradient(to right, #222 0%, #222 50%, #252525 50%, #252525 100%); + background-size: 25% 100%; +} + +/* =============================================== */ +/* SAMPLE BROWSER (BARRA LATERAL) +/* =============================================== */ +.sample-browser { + width: 300px; background-color: var(--bg-toolbar); border-right: 2px solid var(--border-color); + z-index: 10; display: flex; flex-direction: column; transition: min-width 0.3s ease, width 0.3s ease; flex-shrink: 0; +} +body.sidebar-hidden .sample-browser { width: 0; min-width: 0; border-right: none; overflow: hidden; } +.browser-header { padding: 15px; background-color: #2a2c30; border-bottom: 2px solid var(--border-color); text-align: center; font-weight: bold; white-space: nowrap; } +.browser-content { flex-grow: 1; overflow-y: auto; padding: 10px; } +.browser-content ul { padding-left: 15px; list-style: none; } +.folder-item > .file-list { display: none; padding-left: 20px; } +.folder-item.open > .file-list { display: block; } +.folder-name { cursor: pointer; display: flex; align-items: center; padding: 5px; border-radius: 3px; user-select: none; } +.folder-name:hover { background-color: var(--bg-editor); } +.folder-icon { margin-right: 8px; color: var(--text-dark); transition: transform 0.2s ease-in-out; } +.folder-name::before { + content: '\f0da'; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; font-size: 0.9em; transition: transform 0.2s ease-in-out; +} +.folder-item.open > .folder-name::before { transform: rotate(90deg); } +.folder-item.open > .folder-name > .folder-icon::before { content: '\f07c'; } +.browser-content li.file-item { padding: 5px; cursor: pointer; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } + +#sidebar-toggle { + position: absolute; top: 60px; left: 5px; z-index: 1400; + background-color: var(--bg-toolbar); border: 1px solid var(--border-color); + color: var(--text-light); width: 25px; height: 40px; cursor: pointer; + border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: center; +} + +/* =============================================== */ +/* ÁREA DE CONTEÚDO E FERRAMENTAS +/* =============================================== */ +.global-toolbar { display: flex; align-items: center; gap: 20px; padding: 8px 15px; background-color: var(--bg-toolbar); border-bottom: 2px solid var(--border-color); height: 50px; box-sizing: border-box; flex-shrink: 0; } +.main-content { flex-grow: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; } + +/* Botões e Inputs de Controle */ +.control-group { display: flex; align-items: center; gap: 15px; padding: 0 10px; } +.control-group i { font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: color .2s; } +.control-group i:hover { color: #fff; } +.fa-play, .fa-pause { color: var(--accent-green) !important; } +.divider { width: 1px; height: 25px; background-color: var(--border-color); } +.spacer { flex-grow: 1; } + +.info-display-group { display: flex; align-items: center; gap: 5px; } +.info-display { background-color: #1a1c1e; padding: 5px 8px; border-radius: 3px; text-align: center; } +.info-display .label { color: var(--text-dark); font-size: .6rem; text-transform: uppercase; } +.value-input { background: 0 0; border: 0; outline: 0; color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; text-align: center; padding: 0; width: 55px; } +.compasso-input { width: 25px; } +.compasso-separator { color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; margin: 0 2px; } +.value-input::-webkit-outer-spin-button, .value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } +.value-input[type=number] { -moz-appearance: textfield; } +.adjust-btn { background: 0 0; border: 0; color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 5px; transition: color .2s; line-height: 1; } +.adjust-btn:hover { color: #fff; } + +#metronome-btn { background: 0 0; border: 1px solid var(--text-dark); color: var(--accent-green); font-family: inherit; font-weight: 700; font-size: .8rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: all .2s; } +#metronome-btn:hover { border-color: var(--text-light); background-color: var(--bg-editor); } +#metronome-btn.active { background-color: var(--accent-green); color: var(--bg-body); border-color: var(--accent-green); } + +/* Botão de Gravação */ +#record-btn.active.recording { color: var(--accent-red); animation: pulse-red 1.5s infinite; } +@keyframes pulse-red { + 0% { opacity: 1; text-shadow: 0 0 3px var(--accent-red); } + 50% { opacity: 0.7; text-shadow: 0 0 10px var(--accent-red); } + 100% { opacity: 1; text-shadow: 0 0 3px var(--accent-red); } +} + +#create-room-btn { width: auto; padding-left: 12px; padding-right: 16px; color: var(--text-light); } +#create-room-btn:hover { background-color: var(--accent-color); color: var(--text-dark); } + +/* =============================================== */ +/* BEAT EDITOR / STEP SEQUENCER +/* =============================================== */ +.beat-editor { + flex: 1; background-color: var(--bg-editor); border: 1px solid var(--border-color); + border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, .3); overflow: hidden; + display: flex; flex-direction: column; +} +.editor-header { background-color: var(--bg-toolbar); padding: 4px 10px; font-size: .8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } +.editor-toolbar { background-color: var(--bg-toolbar); padding: 5px 10px; border-bottom: 2px solid var(--border-color); flex-shrink: 0; display: flex; align-items: center; gap: 15px; } + +#track-container { overflow-y: auto; overflow-x: hidden; flex-grow: 1; } +.track-lane { display: flex; align-items: stretch; background-color: var(--bg-editor); border-bottom: 1px solid var(--bg-toolbar); min-height: 72px; box-sizing: border-box; } +.track-lane.active-track { background-color: #40454d; } +.track-lane.drag-over { border: 2px dashed var(--accent-green); } + +.track-lane .track-info { display: flex; align-items: center; gap: 8px; width: 180px; flex-shrink: 0; padding: 0 10px; border-right: 1px solid var(--bg-toolbar); } +.track-mute { width: 25px; height: 12px; background-color: var(--accent-green); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); box-shadow: inset 0 0 2px #000; transition: background-color 0.2s, opacity 0.2s; } +.track-mute:hover { opacity: 0.8; } +.track-mute.active { background-color: var(--text-dark); opacity: 0.7; } +.track-lane .track-controls { display: flex; gap: 5px; margin: 0 10px; padding-left: 10px; border-left: 1px solid var(--bg-toolbar); flex-shrink: 0; } + +/* Step Sequencer */ +.step-sequencer-wrapper { flex-grow: 1; overflow-y: hidden; padding-bottom: 8px; display: flex; align-items: center; padding-right: 10px; } +.step-sequencer { display: flex; gap: 2px; width: 100%; } +.step-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; } +.step-marker { position: absolute; top: -16px; left: 0; width: 100%; text-align: center; font-size: .6rem; color: var(--text-dark); user-select: none; } +.step { width: 100%; height: 28px; background-color: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 2px; cursor: pointer; transition: background-color .1s, transform 0.1s; box-sizing: border-box; } +.step-dark { background-color: #1e1e1e; } +.step:hover { background-color: #555; border-color: #888; } +.step.active { background-color: var(--accent-green); border: 1px solid #fff; box-shadow: 0 0 8px var(--accent-green); } +.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); } + +/* =============================================== */ +/* EDITOR DE ÁUDIO & TIMELINE +/* =============================================== */ +.audio-editor { + flex: 1; background-color: var(--bg-editor); border: 1px solid var(--border-color); + border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, .3); overflow: hidden; + display: flex; flex-direction: column; --track-info-width: 255px; +} +#audio-track-container { flex-grow: 1; overflow: auto; } +.audio-track-lane { display: flex; flex-direction: row; align-items: stretch; background-color: var(--bg-editor); border-bottom: 1px solid var(--bg-toolbar); min-height: 90px; box-sizing: border-box; } +.audio-track-lane.drag-over { background-color: #40454d; } +.audio-track-lane .track-info { width: var(--track-info-width); flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; background-color: #383c42; border-right: 2px solid var(--border-color); } +.track-info-header { display: flex; align-items: center; gap: 8px; width: 100%; } +.track-name { color: var(--accent-red); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.audio-track-lane .track-controls { display: flex; justify-content: flex-start; gap: 15px; border-left: none; padding-left: 0; margin: 0; } + +.timeline-container { flex-grow: 1; position: relative; overflow-x: hidden; overflow-y: hidden; } +.spectrogram-view-grid { + height: 100%; position: relative; display: block; + --step-width: 32px; --beat-width: 128px; --bar-width: 512px; + background-size: var(--bar-width) 100%, var(--beat-width) 100%, var(--step-width) 100%; + background-image: + repeating-linear-gradient(to right, #666 0, #666 1px, transparent 1px, transparent 100%), + repeating-linear-gradient(to right, #444 0, #444 1px, transparent 1px, transparent 100%), + repeating-linear-gradient(to right, #3a3e44 0, #3a3e44 1px, transparent 1px, transparent 100%); +} + +/* Régua */ +.ruler-wrapper { display: flex; flex-shrink: 0; background-color: #383c42; border-bottom: 1px solid var(--border-color); } +.ruler-spacer { width: var(--track-info-width); flex-shrink: 0; border-right: 2px solid var(--border-color); } +.timeline-ruler { position: relative; height: 25px; flex-grow: 1; overflow: hidden; background-color: #2a2c30; } +.ruler-marker { position: absolute; top: 0; height: 100%; color: var(--text-dark); font-size: 0.75rem; padding-left: 5px; border-left: 1px solid #555; user-select: none; display: flex; align-items: center; box-sizing: border-box; } +#ruler-context-menu { display: none; position: fixed; z-index: 10000; background-color: var(--background-dark); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); font-size: 0.8rem; padding: 5px 0; min-width: 150px; } +#ruler-context-menu > div { padding: 6px 15px; cursor: pointer; color: var(--text-light); } +#ruler-context-menu > div:hover { background-color: var(--accent-blue); color: #fff; } + +/* Clips & Waveforms */ +.timeline-clip { + position: absolute; top: 50%; transform: translateY(-50%); height: 55px; + background: linear-gradient(to bottom, #5c626b, #4a4f57); border: 1px solid var(--border-color-dark); + border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,0.5); display: flex; align-items: center; + padding: 0; overflow: hidden; cursor: grab; user-select: none; color: var(--text-light); +} +.timeline-clip:active, .timeline-clip.dragging { cursor: grabbing; z-index: 1000; border-color: var(--accent-blue); opacity: 0.9; } +.timeline-clip.cut { opacity: 0.5; border-style: dashed; } +.clip-name { position: absolute; top: 4px; left: 8px; font-size: 0.75rem; font-weight: bold; background-color: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 3px; pointer-events: none; } +.waveform-canvas-clip { width: 100%; height: 100%; display: block; } +#live-waveform-canvas { width: 100%; height: 40px; background-color: var(--background-dark); border-radius: 4px; margin-top: 8px; border: 1px solid var(--border-color-light); } + +/* Handles & Tools */ +.clip-resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 10; } +.clip-resize-handle.left { left: 0; } +.clip-resize-handle.right { right: 0; } +.playhead { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: var(--accent-red); z-index: 50; pointer-events: none; } +#loop-region { display: none; position: absolute; top: 0; height: 100%; background-color: rgba(52, 152, 219, 0.2); border-left: 1px solid var(--accent-blue); border-right: 1px solid var(--accent-blue); z-index: 15; min-width: 16px; cursor: grab; } +#loop-region.visible { display: block; } +#loop-region:active { cursor: grabbing; } +.loop-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; } +.loop-handle.left { left: -5px; } +.loop-handle.right { right: -5px; } +#slice-tool-btn.active, #resize-tool-trim.active, #resize-tool-stretch.active { color: var(--accent-blue); background-color: var(--bg-editor); border-radius: 3px; } +#audio-editor-loop-btn.active { color: var(--accent-green); } + +/* =============================================== */ +/* COMPONENTES DE UI (KNOBS, ETC) +/* =============================================== */ +.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); } +.knob { width: 28px; height: 28px; background-color: var(--bg-toolbar); border-radius: 50%; border: 1px solid var(--border-color); margin-bottom: 2px; cursor: grab; box-shadow: inset 0 0 4px #222; position: relative; } +.knob:active { cursor: grabbing; } +.knob-indicator { width: 2px; height: 8px; background-color: var(--text-light); position: absolute; top: 2px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); border-radius: 1px; } + +/* Menus de Contexto */ +#timeline-context-menu { position: fixed; display: none; background-color: var(--bg-toolbar); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 5px 0; z-index: 2000; font-size: 0.9rem; } +#timeline-context-menu div { padding: 8px 15px; cursor: pointer; white-space: nowrap; } +#timeline-context-menu div:hover { background-color: var(--accent-blue); color: white; } + +/* Scrollbars */ +::-webkit-scrollbar { height: 10px; width: 10px; } +::-webkit-scrollbar-track { background: var(--border-color); } +::-webkit-scrollbar-thumb { background: var(--bg-toolbar); border-radius: 5px; } +::-webkit-scrollbar-thumb:hover { background: #555; } + +/* =============================================== */ +/* MODAIS (Necessários para Salvar/Carregar no Editor) +/* =============================================== */ +.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s; } +.modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; } +.modal-content { background-color: var(--bg-body); padding: 1.5rem 2rem; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 1.5rem; max-height: 90vh; } +.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; border: none; background: none; } +.modal-close:hover { color: var(--text-light); } +.modal-title { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-toolbar); color: var(--text-light); text-align: center; flex-shrink: 0; } +.modal-section h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-light); } +.modal-button { background-color: var(--bg-toolbar); color: var(--text-light); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; width: 100%; text-align: center; } +.modal-button:hover { background-color: #4a4f57; border-color: #333; } + +/* Estilos de Lista de Projetos (se visível no editor) */ +#server-projects-list { max-height: 250px; overflow-y: auto; background-color: var(--bg-toolbar); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; min-height: 50px; } +#server-projects-list .project-item { background-color: var(--bg-editor); padding: 10px 15px; border-radius: 4px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; } +#server-projects-list .project-item:last-child { margin-bottom: 0; } +#server-projects-list .project-item:hover { background-color: var(--bg-body); color: #fff; border-color: var(--accent-green); } + +/* =============================================== */ +/* RESPONSIVIDADE +/* =============================================== */ +@media (max-width: 1200px) { + .info-display-group { gap: 2px; } + .info-display { padding: 4px 6px; } + .value-input { font-size: 1.2rem; width: 45px; } + .compasso-input { width: 20px; } +} +@media (max-width: 992px) { + .global-toolbar { gap: 10px; flex-wrap: wrap; height: auto; padding-bottom: 10px; } + .main-content { padding-top: 100px; } + .info-display-group { order: 3; width: 100%; justify-content: space-around; } + .spacer { display: none; } +} +@media (max-width: 768px) { + .sample-browser { transform: translateX(-100%); position: fixed; width: 280px; } + body:not(.sidebar-hidden) .sample-browser { transform: translateX(0); } + #sidebar-toggle { left: 5px; transform: translateX(0); position: fixed; } + .global-toolbar { padding-left: 45px; } + .main-content { padding: 10px; } + .track-lane, .audio-track-lane { flex-direction: column; align-items: stretch; gap: 15px; padding: 15px; } + .track-lane .track-info, .audio-track-lane .track-info, .track-lane .track-controls, .audio-track-lane .track-controls { width: 100%; border: none; padding: 0; } + .track-lane .track-controls, .audio-track-lane .track-controls { justify-content: space-around; } +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 66822d8d..b3cd1313 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,4 +1,9 @@ -/* MMPCreator - Folha de Estilos Principal */ +/* ========================================================================== + STYLE.CSS + Estilos gerais para o dashboard e listagem de projetos (projetos.html). + Não contém lógica de edição (timeline, piano roll, etc). + ========================================================================== */ + :root { --bg-body: #2d3035; --bg-toolbar: #3b3f45; @@ -14,54 +19,8 @@ --accent-blue: #3498db; } -/* Esconde elementos não essenciais quando em modo embed */ - body.embed-mode .sample-browser, /* Navegador de Samples */ - body.embed-mode .global-toolbar, /* Barra de ferramentas principal */ - body.embed-mode #sidebar-toggle { /* Botão de toggle da sidebar */ - display: none !important; - } - - /* AJUSTE PARA O ZOOM DE 65% */ - /* 1. Aplica o zoom na div principal do aplicativo */ - body.embed-mode .app-container { - padding-left: 0; - - /* Configura o zoom */ - transform: scale(0.15); - transform-origin: top left; /* Garante que o zoom comece do canto superior esquerdo */ - - /* POSICIONAMENTO CRUCIAL: Fixa no canto 0,0 do body */ - position: absolute; - top: 0; - left: 0; - - /* Compensação de tamanho para o container do iframe */ - width: calc(100vw / 0.15); - height: calc(100vh / 0.15); - - display: flex; - flex-direction: column; - overflow: hidden; - } - - /* Ajusta o layout principal para ocupar toda a área visível */ - body.embed-mode .main-content { - flex-grow: 1; - height: auto; - width: auto; - overflow: hidden; - } - - /* Garante que o body não tenha margens */ - body.embed-mode { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - } - /* =============================================== */ -/* LAYOUT E ESTRUTURA GLOBAL +/* LAYOUT GERAL /* =============================================== */ body { margin: 0; @@ -69,665 +28,119 @@ body { background-color: var(--bg-body); color: var(--text-light); height: 100vh; - overflow: hidden; - display: flex; -} - -body.knob-dragging { cursor: ns-resize; } -body.slice-tool-active .timeline-container { cursor: crosshair; } - -.app-container { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - position: relative; -} - -/* Estilos do Piano Roll */ -.piano-roll-editor { - position: absolute; - top: 60px; /* Abaixo do header global */ - left: 0; - right: 0; - bottom: 0; - background-color: #2b2e33; - z-index: 50; /* Fica acima dos outros editores */ - display: flex; - flex-direction: column; - border-top: 1px solid var(--border-color, #444); -} - -.piano-roll-toolbar { - height: 40px; - background-color: #363a40; - border-bottom: 1px solid #444; - display: flex; - align-items: center; - padding: 0 10px; - gap: 15px; - color: #ccc; -} - -.piano-roll-workspace { - flex: 1; - display: flex; - overflow: hidden; - position: relative; - background-color: #222; -} - -.piano-keys-container { - width: 60px; - background-color: #1e1e1e; - border-right: 1px solid #444; - overflow: hidden; /* O scroll será controlado via JS para sincronia */ - position: relative; - z-index: 2; -} - -.piano-grid-container { - flex: 1; - overflow: auto; /* Aqui acontece o scroll real */ - position: relative; - background-color: #252525; - cursor: crosshair; -} - -/* Cores para as notas no canvas */ -.piano-key-white { fill: #fff; } -.piano-key-black { fill: #000; } - -/* Container da visualização melódica na lista de trilhas */ -.track-mini-piano-roll { - position: relative; - width: 100%; - height: 100%; - background-color: #222; - border-radius: 4px; - cursor: pointer; - overflow: hidden; - border: 1px solid #444; -} - -.track-mini-piano-roll:hover { - border-color: #666; - background-color: #2a2a2a; -} - -/* As notinhas dentro da miniatura */ -.mini-note { - position: absolute; - background-color: #ffbb00; /* Cor laranja padrão LMMS */ - height: 4px; /* Notas finas */ - border-radius: 1px; - opacity: 0.9; - box-shadow: 0 0 2px rgba(0,0,0,0.5); -} - -/* =============================================== */ -/* CORREÇÃO VISUAL DO PIANO ROLL NA LISTA -/* =============================================== */ - -/* Quando o container .step-sequencer tiver esta classe, ele muda de comportamento */ -.step-sequencer.mode-piano { - display: block !important; /* Sobrescreve o display: flex original */ - gap: 0 !important; /* Remove o espaçamento de botões */ - width: 100%; /* Ocupa toda a largura disponível */ - height: 54px; /* Altura fixa para garantir visualização */ - position: relative; - background-color: #1e1e1e; - border-radius: 4px; - border: 1px solid var(--border-color); - overflow: hidden; /* Corta notas que passem da borda */ - margin-top: 4px; /* Centraliza verticalmente na track */ -} - -/* Ajuste fino para a miniatura interna */ -.track-mini-piano-roll { - width: 100%; - height: 100%; - position: relative; - background: linear-gradient(to right, #222 0%, #222 50%, #252525 50%, #252525 100%); - background-size: 25% 100%; /* Cria linhas verticais sutis de compasso */ -} - -/* Garante que as notas apareçam */ -.mini-note { - position: absolute; - background-color: #ffbb00; - height: 4px; - border-radius: 2px; - box-shadow: 0 1px 3px rgba(0,0,0,0.8); - pointer-events: none; /* Deixa o clique passar para o container pai */ - min-width: 2px; /* Garante que notas muito curtas sejam visíveis */ -} - -/* Efeito hover para indicar interatividade */ -.step-sequencer.mode-piano:hover { - border-color: #666; - background-color: #262626; -} - -/* =============================================== */ -/* BARRA LATERAL (SAMPLE BROWSER) -/* =============================================== */ -.sample-browser { - width: 300px; - background-color: var(--bg-toolbar); - border-right: 2px solid var(--border-color); - z-index: 10; - display: flex; - flex-direction: column; - transition: min-width 0.3s ease, width 0.3s ease; - flex-shrink: 0; -} -body.sidebar-hidden .sample-browser { - width: 0; - min-width: 0; - border-right: none; - overflow: hidden; -} -.browser-header { - padding: 15px; - background-color: #2a2c30; - border-bottom: 2px solid var(--border-color); - text-align: center; - font-weight: bold; - white-space: nowrap; -} -.browser-content { - flex-grow: 1; - overflow-y: auto; - padding: 10px; -} -.browser-content ul { - padding-left: 15px; - list-style: none; -} -.folder-item > .file-list { - display: none; - padding-left: 20px; -} -.folder-item.open > .file-list { - display: block; -} -.folder-name { - cursor: pointer; - display: flex; - align-items: center; - padding: 5px; - border-radius: 3px; - user-select: none; -} -.folder-name:hover { - background-color: var(--bg-editor); -} -.folder-icon { - margin-right: 8px; - color: var(--text-dark); - transition: transform 0.2s ease-in-out; -} -.folder-name::before { - content: '\f0da'; - font-family: "Font Awesome 6 Free"; - font-weight: 900; - margin-right: 8px; - font-size: 0.9em; - transition: transform 0.2s ease-in-out; -} -.folder-item.open > .folder-name::before { - transform: rotate(90deg); -} -.folder-item.open > .folder-name > .folder-icon::before { - content: '\f07c'; -} -.browser-content li.file-item { - padding: 5px; - cursor: pointer; - border-radius: 3px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - user-select: none; -} -#sidebar-toggle { - position: absolute; - top: 60px; - left: 5px; - z-index: 1400; - background-color: var(--bg-toolbar); - border: 1px solid var(--border-color); - color: var(--text-light); - width: 25px; - height: 40px; - cursor: pointer; - border-radius: 0 4px 4px 0; - display: flex; - align-items: center; - justify-content: center; -} - -/* =============================================== */ -/* ÁREA DE CONTEÚDO E TOOLBARS -/* =============================================== */ -.global-toolbar { display: flex; align-items: center; gap: 20px; padding: 8px 15px; background-color: var(--bg-toolbar); border-bottom: 2px solid var(--border-color); height: 50px; box-sizing: border-box; flex-shrink: 0; } -.main-content { flex-grow: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; } -.beat-editor { - flex: 1; - background-color: var(--bg-editor); - border: 1px solid var(--border-color); - border-radius: 8px; - box-shadow: 0 5px 15px rgba(0, 0, 0, .3); - overflow: hidden; + /* Removemos overflow hidden para permitir scroll na página de projetos se necessário, + ou mantemos se o design for fixed */ + overflow-y: auto; display: flex; flex-direction: column; } -.editor-header { background-color: var(--bg-toolbar); padding: 4px 10px; font-size: .8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } -.editor-toolbar { background-color: var(--bg-toolbar); padding: 5px 10px; border-bottom: 2px solid var(--border-color); flex-shrink: 0; display: flex; align-items: center; gap: 15px; } -/* Estilo para o botão de gravação */ -#record-btn.active.recording { - color: var(--accent-red); - animation: pulse-red 1.5s infinite; -} - -/* Animação de "pulsar" */ -@keyframes pulse-red { - 0% { - opacity: 1; - text-shadow: 0 0 3px var(--accent-red); - } - 50% { - opacity: 0.7; - text-shadow: 0 0 10px var(--accent-red); - } - 100% { - opacity: 1; - text-shadow: 0 0 3px var(--accent-red); - } -} - -#live-waveform-canvas { - width: 100%; /* Faz ocupar a largura do painel .track-info */ - height: 40px; /* Altura que definimos em JS */ - background-color: var(--background-dark); - border-radius: 4px; - margin-top: 8px; /* Um pequeno espaçamento */ - border: 1px solid var(--border-color-light); -} - -/* Estilo para o novo menu de contexto da régua */ -#ruler-context-menu { - display: none; - position: fixed; - z-index: 10000; - background-color: var(--background-dark); - border: 1px solid var(--border-color-dark); - border-radius: 4px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); - font-size: 0.8rem; - padding: 5px 0; - min-width: 150px; -} - -#ruler-context-menu > div { - padding: 6px 15px; - cursor: pointer; - color: var(--text-light); -} - -#ruler-context-menu > div:hover { - background-color: var(--accent-blue); - color: #fff; -} - -/* Estilo para clipes "recortados" (cut) */ -.timeline-clip.cut { - opacity: 0.5; - border-style: dashed; -} - -/* =============================================== */ -/* SALA COMPARTILHADA -/* =============================================== */ -#create-room-btn { - width: auto; /* Permite que o botão se ajuste ao texto */ - padding-left: 12px; - padding-right: 16px; - color: var(--text-light); /* Ou a cor que preferir */ -} - -#create-room-btn:hover { - background-color: var(--accent-color); /* Destaque ao passar o mouse */ - color: var(--text-dark); -} - -/* =============================================== */ -/* EDITOR DE BASES (BEAT EDITOR / STEP SEQUENCER) -/* =============================================== */ -#track-container { - overflow-y: auto; - overflow-x: hidden; - flex-grow: 1; -} -.track-lane { - display: flex; - align-items: stretch; - background-color: var(--bg-editor); - border-bottom: 1px solid var(--bg-toolbar); - min-height: 72px; - box-sizing: border-box; -} -.track-lane.active-track { background-color: #40454d; } -.track-lane.drag-over { border: 2px dashed var(--accent-green); } - -.track-lane .track-info { - display: flex; - align-items: center; - gap: 8px; - width: 180px; - flex-shrink: 0; - padding: 0 10px; - border-right: 1px solid var(--bg-toolbar); -} -.track-mute { width: 25px; height: 12px; background-color: var(--accent-green); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); box-shadow: inset 0 0 2px #000; transition: background-color 0.2s, opacity 0.2s; } -.track-mute:hover { opacity: 0.8; } -.track-mute.active { background-color: var(--text-dark); opacity: 0.7; } - -.track-lane .track-controls { display: flex; gap: 5px; margin: 0 10px; padding-left: 10px; border-left: 1px solid var(--bg-toolbar); flex-shrink: 0; } - -/* --- CORREÇÃO DE LARGURA DOS STEPS --- */ -.step-sequencer-wrapper { - flex-grow: 1; - /* Remove overflow-x para forçar os steps a caberem na tela, ou mantem se quiser scroll horizontal em telas pequenas */ - /* overflow-x: auto; <-- Comentei para testar o alinhamento perfeito */ - overflow-y: hidden; - padding-bottom: 8px; - display: flex; - align-items: center; - padding-right: 10px; /* Espaçamento na direita pra não colar na borda */ -} - -.step-sequencer { - display: flex; - gap: 2px; /* Reduzi o gap para ficar mais compacto e fluido */ - width: 100%; /* Ocupa toda a largura disponível da trilha */ -} - -.step-wrapper { - position: relative; - flex: 1; /* MÁGICA: Faz cada step crescer igualmente para preencher o espaço */ - display: flex; - flex-direction: column; -} - -.step-marker { - position: absolute; - top: -16px; - left: 0; - width: 100%; - text-align: center; /* Centraliza o número do compasso */ - font-size: .6rem; - color: var(--text-dark); - user-select: none; -} - -.step { - width: 100%; /* Ocupa 100% do wrapper (que é flexível agora) */ - height: 28px; - background-color: #2a2a2a; - border: 1px solid #4a4a4a; - border-radius: 2px; - cursor: pointer; - transition: background-color .1s, transform 0.1s; - box-sizing: border-box; /* Garante que a borda não aumente o tamanho total */ -} -/* --------------------------------------- */ - -.step-dark { background-color: #1e1e1e; } -.step:hover { background-color: #555; border-color: #888; } -.step.active { background-color: var(--accent-green); border: 1px solid #fff; box-shadow: 0 0 8px var(--accent-green); } -.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); } - -/* =================================================================== */ -/* EDITOR DE ÁUDIO - LAYOUT PRINCIPAL -/* =================================================================== */ -.audio-editor { - flex: 1; - background-color: var(--bg-editor); - border: 1px solid var(--border-color); - border-radius: 8px; - box-shadow: 0 5px 15px rgba(0, 0, 0, .3); - overflow: hidden; - display: flex; - flex-direction: column; - --track-info-width: 255px; -} -#audio-track-container { - flex-grow: 1; /* Ocupa o espaço restante */ - overflow: auto; /* Habilita a rolagem horizontal e vertical */ -} -.audio-track-lane { - display: flex; - flex-direction: row; - align-items: stretch; - background-color: var(--bg-editor); - border-bottom: 1px solid var(--bg-toolbar); - min-height: 90px; - box-sizing: border-box; -} -.audio-track-lane.drag-over { background-color: #40454d; } -.audio-track-lane .track-info { - width: var(--track-info-width); - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: #383c42; - border-right: 2px solid var(--border-color); -} -.track-info-header { display: flex; align-items: center; gap: 8px; width: 100%; } -.track-name { color: var(--accent-red); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.timeline-container { - flex-grow: 1; - position: relative; - overflow-x: hidden; /* A rolagem agora é controlada pelo #audio-track-container */ - overflow-y: hidden; -} -.spectrogram-view-grid { - height: 100%; - position: relative; - display: block; - /* Estas variáveis são agora definidas dinamicamente por audio_ui.js */ - --step-width: 32px; - --beat-width: 128px; - --bar-width: 512px; - background-size: var(--bar-width) 100%, var(--beat-width) 100%, var(--step-width) 100%; - background-image: - repeating-linear-gradient(to right, #666 0, #666 1px, transparent 1px, transparent 100%), - repeating-linear-gradient(to right, #444 0, #444 1px, transparent 1px, transparent 100%), - repeating-linear-gradient(to right, #3a3e44 0, #3a3e44 1px, transparent 1px, transparent 100%); -} - -/* =============================================== */ -/* EDITOR DE ÁUDIO - RÉGUA E LAYOUT CORRIGIDO -/* =============================================== */ -.ruler-wrapper { - display: flex; - flex-shrink: 0; - background-color: #383c42; - border-bottom: 1px solid var(--border-color); -} -.ruler-spacer { - width: var(--track-info-width); - flex-shrink: 0; - border-right: 2px solid var(--border-color); -} -.timeline-ruler { - position: relative; - height: 25px; - flex-grow: 1; - overflow: hidden; - background-color: #2a2c30; -} -.ruler-marker { - position: absolute; - top: 0; - height: 100%; - color: var(--text-dark); - font-size: 0.75rem; - padding-left: 5px; - border-left: 1px solid #555; - user-select: none; - display: flex; - align-items: center; - box-sizing: border-box; -} - -/* =============================================== */ -/* EDITOR DE ÁUDIO - CLIPS E CONTROLES -/* =============================================== */ -.timeline-clip { - position: absolute; - top: 50%; - transform: translateY(-50%); - height: 55px; - background: linear-gradient(to bottom, #5c626b, #4a4f57); - border: 1px solid var(--border-color-dark); - border-radius: 4px; - box-shadow: 0 3px 8px rgba(0,0,0,0.5); - display: flex; - align-items: center; - /* --- CORREÇÃO: Remove o padding horizontal --- */ - padding: 0; - overflow: hidden; - cursor: grab; - user-select: none; - color: var(--text-light); -} -.timeline-clip:active, .timeline-clip.dragging { cursor: grabbing; z-index: 1000; border-color: var(--accent-blue); opacity: 0.9; } -.clip-name { position: absolute; top: 4px; left: 8px; font-size: 0.75rem; font-weight: bold; background-color: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 3px; pointer-events: none; } -.waveform-canvas-clip { width: 100%; height: 100%; display: block; } -.audio-track-lane .track-controls { display: flex; justify-content: flex-start; gap: 15px; border-left: none; padding-left: 0; margin: 0; } -.clip-resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 10; } -.clip-resize-handle.left { left: 0; } -.clip-resize-handle.right { right: 0; } -.playhead { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: var(--accent-red); z-index: 50; pointer-events: none; } -#loop-region { - display: none; /* Começa escondido por padrão */ - position: absolute; - top: 0; - height: 100%; - background-color: rgba(52, 152, 219, 0.2); - border-left: 1px solid var(--accent-blue); - border-right: 1px solid var(--accent-blue); - z-index: 15; - min-width: 16px; - cursor: grab; -} -#loop-region.visible { - display: block; /* ou 'flex', 'absolute', etc. */ -} - -/* Esta regra está correta, mas também deve usar o ID */ -#loop-region:active { - cursor: grabbing; -} -.loop-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; } -.loop-handle.left { left: -5px; } -.loop-handle.right { right: -5px; } - -/* --- ESTILOS ADICIONADOS --- */ -#slice-tool-btn.active, -#resize-tool-trim.active, -#resize-tool-stretch.active { - color: var(--accent-blue); - background-color: var(--bg-editor); - border-radius: 3px; -} -#audio-editor-loop-btn.active { color: var(--accent-green); } - -/* =============================================== */ -/* COMPONENTES GERAIS (KNOBS, BOTÕES, INPUTS) -/* =============================================== */ -.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); } -.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); } -.knob { width: 28px; height: 28px; background-color: var(--bg-toolbar); border-radius: 50%; border: 1px solid var(--border-color); margin-bottom: 2px; cursor: grab; box-shadow: inset 0 0 4px #222; position: relative; } -.knob:active { cursor: grabbing; } -.knob-indicator { width: 2px; height: 8px; background-color: var(--text-light); position: absolute; top: 2px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); border-radius: 1px; } -.interactive-input-container { display: flex; align-items: center; justify-content: center; gap: 4px; } -.compasso-group { display: flex; align-items: center; gap: 4px; } -.value-input { background: 0 0; border: 0; outline: 0; color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; text-align: center; padding: 0; width: 55px; } -.compasso-input { width: 25px; } -.compasso-separator { color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; margin: 0 2px; } -.value-input::-webkit-outer-spin-button, .value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -.value-input[type=number] { -moz-appearance: textfield; } -.adjust-btn { background: 0 0; border: 0; color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 5px; transition: color .2s; line-height: 1; } -.adjust-btn:hover { color: #fff; } -.control-group { display: flex; align-items: center; gap: 15px; padding: 0 10px; } -.control-group i { font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: color .2s; } -.control-group i:hover { color: #fff; } -.fa-play, .fa-pause { color: var(--accent-green) !important; } -.divider { width: 1px; height: 25px; background-color: var(--border-color); } -.info-display-group { display: flex; align-items: center; gap: 5px; } -.info-display { background-color: #1a1c1e; padding: 5px 8px; border-radius: 3px; text-align: center; } -.info-display .label { color: var(--text-dark); font-size: .6rem; text-transform: uppercase; } -.spacer { flex-grow: 1; } -#metronome-btn { background: 0 0; border: 1px solid var(--text-dark); color: var(--accent-green); font-family: inherit; font-weight: 700; font-size: .8rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: all .2s; } -#metronome-btn:hover { border-color: var(--text-light); background-color: var(--bg-editor); } -#metronome-btn.active { background-color: var(--accent-green); color: var(--bg-body); border-color: var(--accent-green); } - -/* =============================================== */ -/* MODAL E MENUS -/* =============================================== */ -.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s; } -.modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; } -.modal-content { background-color: var(--bg-body); padding: 1.5rem 2rem; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 1.5rem; max-height: 90vh; } -.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; border: none; background: none; } -.modal-close:hover { color: var(--text-light); } -.modal-title { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-toolbar); color: var(--text-light); text-align: center; flex-shrink: 0; } -.modal-section h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-light); } -#server-projects-list { max-height: 250px; overflow-y: auto; background-color: var(--bg-toolbar); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; min-height: 50px; } -#server-projects-list .project-item { background-color: var(--bg-editor); padding: 10px 15px; border-radius: 4px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; } -#server-projects-list .project-item:last-child { margin-bottom: 0; } -#server-projects-list .project-item:hover { background-color: var(--bg-body); color: #fff; border-color: var(--accent-green); } -.modal-button { background-color: var(--bg-toolbar); color: var(--text-light); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; width: 100%; text-align: center; } -.modal-button:hover { background-color: #4a4f57; border-color: #333; } -#timeline-context-menu { position: fixed; display: none; background-color: var(--bg-toolbar); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 5px 0; z-index: 2000; font-size: 0.9rem; } -#timeline-context-menu div { padding: 8px 15px; cursor: pointer; white-space: nowrap; } -#timeline-context-menu div:hover { background-color: var(--accent-blue); color: white; } - -/* =============================================== */ -/* ESTILOS RESPONSIVOS -/* =============================================== */ -@media (max-width: 1200px) { - .info-display-group { gap: 2px; } - .info-display { padding: 4px 6px; } - .value-input { font-size: 1.2rem; width: 45px; } - .compasso-input { width: 20px; } -} -@media (max-width: 992px) { - .global-toolbar { gap: 10px; flex-wrap: wrap; height: auto; padding-bottom: 10px; } - .main-content { padding-top: 100px; } - .info-display-group { order: 3; width: 100%; justify-content: space-around; } - .spacer { display: none; } -} -@media (max-width: 768px) { - .sample-browser { transform: translateX(-100%); position: fixed; width: 280px; } - body:not(.sidebar-hidden) .sample-browser { transform: translateX(0); } - #sidebar-toggle { left: 5px; transform: translateX(0); position: fixed; } - .global-toolbar { padding-left: 45px; } - .main-content { padding: 10px; } - .track-lane, .audio-track-lane { flex-direction: column; align-items: stretch; gap: 15px; padding: 15px; } - .track-lane .track-info, .audio-track-lane .track-info, .track-lane .track-controls, .audio-track-lane .track-controls { width: 100%; border: none; padding: 0; } - .track-lane .track-controls, .audio-track-lane .track-controls { justify-content: space-around; } -} - -/* =============================================== */ -/* SCROLLBARS -/* =============================================== */ +/* Scrollbars Padrão */ ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-track { background: var(--border-color); } ::-webkit-scrollbar-thumb { background: var(--bg-toolbar); border-radius: 5px; } -::-webkit-scrollbar-thumb:hover { background: #555; } \ No newline at end of file +::-webkit-scrollbar-thumb:hover { background: #555; } + +/* =============================================== */ +/* LISTAGEM DE PROJETOS E DASHBOARD +/* =============================================== */ + +/* Container para a lista de projetos do servidor */ +#server-projects-list { + max-height: 250px; + overflow-y: auto; + background-color: var(--bg-toolbar); + border: 1px solid var(--border-color); + border-radius: 4px; + padding: 0.5rem; + min-height: 50px; +} + +/* Item individual do projeto */ +#server-projects-list .project-item { + background-color: var(--bg-editor); + padding: 10px 15px; + border-radius: 4px; + margin-bottom: 8px; + cursor: pointer; + transition: background-color 0.2s, color 0.2s; + border: 1px solid transparent; + display: flex; + justify-content: space-between; + align-items: center; +} + +#server-projects-list .project-item:last-child { margin-bottom: 0; } + +#server-projects-list .project-item:hover { + background-color: var(--bg-body); + color: #fff; + border-color: var(--accent-green); +} + +/* Botão de criar/carregar genérico */ +.modal-button { + background-color: var(--bg-toolbar); + color: var(--text-light); + border: 1px solid var(--border-color); + padding: 0.8rem 1.5rem; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.2s, border-color 0.2s; + width: 100%; + text-align: center; +} + +.modal-button:hover { + background-color: #4a4f57; + border-color: #333; +} + +/* =============================================== */ +/* MODAIS (Estrutura compartilhada) +/* =============================================== */ +.modal-overlay { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background-color: rgba(0, 0, 0, 0.7); z-index: 2000; + display: flex; justify-content: center; align-items: center; + padding: 1rem; + visibility: hidden; opacity: 0; + transition: visibility 0s 0.3s, opacity 0.3s; +} + +.modal-overlay.visible { + visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; +} + +.modal-content { + background-color: var(--bg-body); + padding: 1.5rem 2rem; + border-radius: 6px; + border: 1px solid var(--border-color); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + width: 100%; max-width: 500px; + position: relative; + display: flex; flex-direction: column; gap: 1.5rem; + max-height: 90vh; +} + +.modal-close { + position: absolute; top: 10px; right: 15px; + font-size: 1.5rem; color: var(--text-dark); + cursor: pointer; border: none; background: none; +} + +.modal-close:hover { color: var(--text-light); } + +.modal-title { + margin: 0; padding-bottom: 0.5rem; + border-bottom: 1px solid var(--bg-toolbar); + color: var(--text-light); text-align: center; + flex-shrink: 0; +} + +.modal-section h3 { + margin-top: 0; margin-bottom: 0.8rem; + font-size: 1rem; color: var(--text-light); +} \ No newline at end of file diff --git a/creation.html b/creation.html index f7d08e55..6111439d 100644 --- a/creation.html +++ b/creation.html @@ -9,7 +9,7 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /> - +