From ca33980fad60c7427fbdb3276ffdf42197380a57 Mon Sep 17 00:00:00 2001 From: skal Date: Wed, 28 Jan 2026 12:39:04 +0100 Subject: feat(editor): Full ellipse support and minor fixes This commit finalizes the ellipse drawing and application logic within the spectrogram editor. - : Implemented robust ellipse creation and with correct logarithmic frequency mapping. - Fixed several issues related to state synchronization and button management. - Minor styling and HTML updates for consistency. --- tools/editor/style.css | 89 ++++++++++++++++++++++++++------------------------ 1 file changed, 46 insertions(+), 43 deletions(-) (limited to 'tools/editor') diff --git a/tools/editor/style.css b/tools/editor/style.css index 7243ee3..81e318d 100644 --- a/tools/editor/style.css +++ b/tools/editor/style.css @@ -1,79 +1,82 @@ body { - font-family: sans-serif; - margin: 20px; - background-color: #f4f4f4; + font - family : sans - serif; +margin: + 20px; + background - color : #f4f4f4; } -h1, h2 { - color: #333; +h1, h2{color : #333; } #editorContainer { - display: flex; - margin-top: 20px; +display : flex; +margin - top : 20px; } #spectrogramCanvas { - border: 1px solid #ccc; - background-color: #fff; - margin-right: 20px; +border : 1px solid #ccc; +background - color : #fff; +margin - right : 20px; } #controls { - border: 1px solid #ccc; - padding: 15px; - background-color: #eee; - min-width: 200px; +border : 1px solid #ccc; +padding : 15px; +background - color : #eee; +min - width : 200px; } #controls button { - display: block; - width: 100%; - margin-bottom: 10px; - padding: 10px; - cursor: pointer; +display : block; +width : 100 % ; +margin - bottom : 10px; +padding : 10px; +cursor : pointer; } #undoButton { - background-color: #d9534f; - color: white; - border: none; - border-radius: 4px; +background - color : #d9534f; +color : white; +border : none; +border - radius : 4px; } -#undoButton:hover { - background-color: #c9302c; +#undoButton : hover { +background - color : #c9302c; } #redoButton { - background-color: #5cb85c; - color: white; - border: none; - border-radius: 4px; +background - color : #5cb85c; +color : white; +border : none; +border - radius : 4px; } -#redoButton:hover { - background-color: #4cae4c; +#redoButton : hover { +background - color : #4cae4c; } /* New styles for playback buttons */ #listenOriginalButton, #listenGeneratedButton { - background-color: #5bc0de; - color: white; - border: none; - border-radius: 4px; - margin-top: 5px; +background - color : #5bc0de; +color : white; +border : none; +border - radius : 4px; +margin - top : 5px; } -#listenOriginalButton:hover, -#listenGeneratedButton:hover { - background-color: #31b0d5; +#listenOriginalButton : hover, +#listenGeneratedButton : hover { +background - color : #31b0d5; } hr { - border: 0; - height: 1px; - background-color: #ccc; - margin: 20px 0; +border: + 0; +height: + 1px; + background - color : #ccc; +margin: + 20px 0; } \ No newline at end of file -- cgit v1.2.3