From 0c716c1572bdc015b8e6d69a9316b00c6a20391d Mon Sep 17 00:00:00 2001 From: JotaChina Date: Tue, 19 Aug 2025 21:51:31 -0300 Subject: [PATCH] Enviar arquivos para "css" --- css/style.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4823a80 --- /dev/null +++ b/css/style.css @@ -0,0 +1,75 @@ +: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} +body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background-color:var(--bg-body);color:var(--text-light);padding-left:300px;transition:padding-left .3s ease} +body.sidebar-hidden{padding-left:0} + +/* (NOVO) Muda o cursor do mouse na página inteira enquanto arrasta um knob */ +body.knob-dragging { + cursor: ns-resize; /* Seta de redimensionamento Norte-Sul */ +} + +.sample-browser{position:fixed;top:0;left:0;width:300px;height:100vh;background-color:var(--bg-toolbar);border-right:2px solid var(--border-color);z-index:1500;display:flex;flex-direction:column;transform:translateX(0);transition:transform .3s ease} +body.sidebar-hidden .sample-browser{transform:translateX(-100%)} +.browser-header{padding:15px;background-color:#2a2c30;border-bottom:2px solid var(--border-color);text-align:center;font-weight:bold;color:var(--text-light);} +.browser-content{flex-grow:1;overflow-y:auto;padding:10px} +.browser-content ul{list-style:none;padding-left:15px} +.browser-content li{padding:5px;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none} +.browser-content li:hover{background-color:var(--bg-editor)} +.browser-content li i{margin-right:8px;width:12px;color:var(--text-dark);transition:transform .2s} +.browser-content li.directory > ul{display:none} +.browser-content li.directory.open > ul{display:block} +.browser-content li.directory.open > .fa-folder{transform:rotate(90deg)} +#sidebar-toggle{position:fixed;top:60px;left:305px;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-top-right-radius:4px;border-bottom-right-radius:4px;transition:left .3s ease;display:flex;align-items:center;justify-content:center} +body.sidebar-hidden #sidebar-toggle{left:5px} +.global-toolbar{padding-top:8px;padding-bottom:8px;padding-right:15px;position:fixed;top:0;width:100%;z-index:1000;display:flex;align-items:center;gap:20px;background-color:var(--bg-toolbar);border-bottom:2px solid var(--border-color)} +.main-content{padding:2rem} +.beat-editor{background-color:var(--bg-body);border:1px solid var(--border-color);width:100%;max-width:900px;margin:auto;box-shadow:0 5px 15px rgba(0,0,0,.3);border-radius:4px;overflow:hidden} +.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)} +.window-controls i{margin-left:12px;cursor:pointer} +.editor-toolbar{background-color:var(--bg-toolbar);padding:5px 10px;display:flex;align-items:center;gap:15px;border-bottom:2px solid var(--border-color)} +.editor-toolbar i{cursor:pointer;padding:5px;border-radius:3px} +.editor-toolbar i.enabled{background-color:var(--bg-body);box-shadow:inset 0 0 2px #000} +.pattern-selector{background-color:var(--bg-body);padding:5px 15px;border:1px solid var(--border-color);flex-grow:1;font-size:.9rem;border-radius:2px} +.track-lane{display:flex;align-items:center;padding:8px 10px;background-color:var(--bg-editor); border: 2px dashed transparent; transition: border-color 0.2s;} +.track-lane.drag-over { border-color: var(--accent-green); } +.track-info{display:flex;align-items:center;gap:8px;width:180px;flex-shrink:0} +.track-info .fa-gear{font-size:1.2rem;cursor:pointer} +.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} +.track-name{color:var(--accent-red);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.track-controls{display:flex;gap:5px;margin:0 10px;padding-left:10px;border-left:1px solid var(--bg-toolbar)} +.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;} +.step-sequencer{display:flex;flex-grow:1;gap:4px;overflow-x:auto;padding-bottom:8px} +.step-sequencer::-webkit-scrollbar{height:8px} +.step-sequencer::-webkit-scrollbar-track{background:var(--border-color);border-radius:4px} +.step-sequencer::-webkit-scrollbar-thumb{background:var(--bg-toolbar);border-radius:4px} +.step-sequencer::-webkit-scrollbar-thumb:hover{background:#555} +.step-wrapper{position:relative} +.step-marker{position:absolute;top:-16px;left:1px;font-size:.6rem;color:var(--text-dark)} +.step{width:28px;aspect-ratio:1 / 1;background-color:#2a2a2a;border:1px solid #4a4a4a;border-radius:2px;cursor:pointer;transition:background-color .1s, transform 0.1s} +.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); } +.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)} \ No newline at end of file