style

francoisschwarzentruber · Jul 31, 2024 · 6639588 · 6639588
1 parent fe1a1a1
commit 6639588
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -31,16 +31,21 @@
 
     <div id="toolbar">
         <span class="toolbarPart">
-            <button id="buttonDialogOpen">Load</button>
-            <button id="buttonSave">Save</button>
-            Export:
+            <button id="buttonDialogOpen" title="open a score">📂</button>
+            <button id="buttonSave" title="save the score">💾</button>
+            <button id="buttonPrint" title="print the score" onclick="window.print()">⎙</button>
+
+        </span>
+
+        <span class="toolbarPart">
             <button id="buttonExportMIDI">MIDI</button>
             <button id="buttonExportABC">ABC</button>
-            <button id="buttonPrint" onclick="window.print()">Print</button>
-
         </span>
+
         <div class="toolbarPart" id="toolbarInsert"></div>
 
+
+
         <span hidden="hidden" class="toolbarPart">
             <button title="shift one octave down" id="button8down">8↓</button>
             <button title="shift one octave up" id="button8up">8↑</button>

diff --git a/js/rhythmguess.js b/js/rhythmguess.js
@@ -387,7 +387,7 @@ function getPossibleDurations(element, ratio, signature) {
 function isEq(a, b) { return Math.abs(a - b) < 0.00001; }
 
 
-const solve = window.location.href.indexOf("github") >= 0 ? solveQuickAndDirty : solveWithLP//solveQuickAndDirty;
+const solve =  window.location.href.indexOf("github") >= 0 ? solveQuickAndDirty : solveWithLP//solveQuickAndDirty;
 /**
  * 
  * @param {*} dhats 

diff --git a/style.css b/style.css
@@ -38,11 +38,24 @@
             margin: 2px;
             padding: 4px;
             height: 32px;
-            background: rgba(0, 0, 0, 0.1);
+            background: none;
+        }
+
+        #help {
+            font-size: 18px;
+            background-color: none;
+            border-radius: 7px;
+            padding: 4px;
+            text-decoration: none;
+            right: 0px;
+            top: 4px;
+            position: absolute;
         }
 
-        button:hover {
-            background: rgba(0, 0, 0, 0.2);
+        button:hover,
+        #help:hover {
+            background: rgba(0, 0, 0, 0.1);
+            cursor: pointer;
         }
 
         button:active {
@@ -78,8 +91,7 @@
         #recordMidi:checked+label {
             border-radius: 8px;
             padding: 4px;
-            color: white;
-            background-color: red;
+            background-color: pink;
             animation: recordMidi 1s alternate infinite;
         }
 
@@ -89,7 +101,7 @@
             }
 
             to {
-                border: 4px solid red;
+                border: 4px solid pink;
             }
         }
 
@@ -107,35 +119,27 @@
         }
 
 
-        #help {
-            background-color: rgb(255, 255, 165);
-            border-radius: 8px;
-            padding: 8px;
-            text-decoration: none;
-            right: 0px;
-            position: absolute;
-        }
+
 
         #audio {
             position: absolute;
             left: 0px;
             right: 0px;
-            filter: invert(1);
+            filter: invert(1) brightness(1.2);
             border-top: 4px solid gray;
         }
 
 
 
         #toolbar {
-            border-radius: 16px;
-            background: #e4e4ff;
+            background: #efefff;
         }
 
         .toolbarPart {
             display: inline-block;
             padding: 2px;
             margin: 3px;
-            border-right: 1px solid;
+            border-right: 1px lightgray solid;
             padding-right: 8px;
         }