plugin v1.0.0
This commit is contained in:
JotaChina committed
1 parent
12c5b55bce
commit
44fce48bb5
12 files changed
+1316
-635
No files matched your search
+176
-5
@@ -84,6 +84,131 @@ body.slice-tool-active .timeline-container { cursor: crosshair; }
|
||||
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)
|
||||
/* =============================================== */
|
||||
@@ -296,6 +421,7 @@ body.sidebar-hidden .sample-browser {
|
||||
}
|
||||
.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;
|
||||
@@ -308,12 +434,57 @@ body.sidebar-hidden .sample-browser {
|
||||
.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-wrapper { flex-grow: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; display: flex; align-items: center; }
|
||||
.step-sequencer { display: flex; gap: 4px; }
|
||||
.step-wrapper { position: relative; }
|
||||
.step-marker { position: absolute; top: -16px; left: 1px; font-size: .6rem; color: var(--text-dark); user-select: none; }
|
||||
.step { width: 28px; height: 28px; background-color: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 2px; cursor: pointer; transition: background-color .1s, transform 0.1s; 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); }
|
||||
|
||||
Reference in new issue
Block a user