The CSS Update Part 2 - Animations!

why not?

src/website/css/keyboard.css

@@ -1,20 +1,30 @@
 
 #keyboard {
+    -webkit-user-select: none;
+    user-select: none;
+
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
     min-height: 7vw;
     background: black;
+    width: 100%;
+    transition: var(--music-mode-transition) transform;
 }
+
+#keyboard.out_animation{
+    transform: translateX(-100%);
+}
+
 #keyboard .key
 {
+    -webkit-user-select: none;
+    user-select: none;
+
     flex: 1;
     transition: transform 0.1s ease;
     border-radius: 0 0 0.4vmin 0.4vmin;
-    height: 100%;
     position: relative;
-    -webkit-user-select: none;
-    user-select: none;
     transform-origin: center top;
     --pressed-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0.0007,0,0,1,0,0,0,0,1);
     cursor: default;
@@ -28,7 +38,7 @@
 }
 
 #keyboard .flat_dark_key{
-    background: linear-gradient(262deg, #111, #000);
+    background: linear-gradient(100deg, #111, #000);
 }
 
 #keyboard .sharp_key{

src/website/css/music_mode_ui.css

@@ -3,9 +3,10 @@
     width: 100%;
     display: none;
     flex: 1;
-    height: 1px;
     align-items: center;
     justify-content: center;
+    transform: translateX(100%);
+    transition: var(--music-mode-transition) transform;
 }
 
 .player_info_wrapper{
@@ -27,5 +28,5 @@
 }
 
 .player_info_show{
-    display: flex !important;
+    transform: translateX(0%) !important;
 }

src/website/css/note_canvas.css

@@ -0,0 +1,18 @@
+#note_canvas
+{
+    width: 100%;
+    filter: saturate(1.23);
+    flex: 1;
+    background-size: cover;
+    min-height: 0;
+    z-index: 1;
+    transition: var(--music-mode-transition) transform;
+}
+
+#note_canvas.light_mode{
+    background: linear-gradient(45deg, var(--top-buttons-color-start), var(--top-buttons-color-end));
+}
+
+#note_canvas.out_animation{
+    transform: translateX(-100%);
+}

src/website/css/sequencer_ui.css

@@ -4,7 +4,7 @@
     position: relative;
     margin: auto auto 2px;
 
-    --progress-bar-height: 1.4em;
+    --progress-bar-height: 2rem;
 }
 
 #sequencer_controls #note_progress
@@ -25,11 +25,11 @@
 {
     position: relative;
     z-index: 5;
-    font-size: var(--progress-bar-height);
+    font-size: calc(var(--progress-bar-height) * 0.8);
     line-height: var(--progress-bar-height);
     text-align: center;
     color: var(--font-color);
-    margin: auto;
+    margin: 0.2rem;
     width: 100%;
 }
 

src/website/css/settings/buttons.css

@@ -30,7 +30,11 @@
     transition: all 0.3s ease;
     padding: 5px;
     align-content: center;
+    align-items: center;
+    justify-content: center;
     display: flex;
+    height: 2em;
+    width: 2em;
 }
 
 .settings_button:hover .gear{

src/website/css/settings/settings.css

@@ -11,9 +11,9 @@
     max-width: 100%;
     min-height: 100%;
     z-index: 256;
-    opacity: 0;
+    transform: scaleX(0);
     background: var(--top-color);
-    transition: opacity 100ms ease-in-out;
+    transition: transform 0.2s ease;
     scroll-behavior: smooth;
     overflow-y: auto;
     display: none;
@@ -27,6 +27,11 @@
     --shadow-color: #000;
 }
 
+.settings_menu_show{
+    display: block !important;
+    transform: scaleX(1) !important;
+}
+
 .settings_menu * {
     -webkit-user-select: none;
     user-select: none;
@@ -40,11 +45,6 @@
     --shadow-color: #fff;
 }
 
-.settings_menu_show{
-    display: block !important;
-    opacity: 1 !important;
-}
-
 .settings_menu select{
     background: transparent;
     border: solid 1px transparent; /*to keep the same size when adding one*/

src/website/css/settings/sliders.css

@@ -13,7 +13,7 @@
 }
 
 .settings_slider:hover{
-    filter: brightness(1.1);
+    filter: brightness(1.2);
 }
 
 .settings_slider:focus {
@@ -40,7 +40,7 @@
 .settings_slider::-moz-range-progress{
     background: var(--primary-color);
     border: 1px solid var(--border-color);
-    border-radius: var(--track-height);
+    border-radius: var(--track-height) 0 0 var(--track-height);
     height: var(--track-height);
 }
 
@@ -106,4 +106,9 @@
 
 .settings_slider:hover::-webkit-slider-thumb {
     border: 1px solid var(--primary-color);
+}
+
+.settings_slider + span {
+    min-width: 5em;
+    text-align: center;
 }

src/website/css/settings/switches.css

@@ -48,8 +48,7 @@
     top: 50%;
     transform: translateY(-50%);
     background-color: var(--track-color);
-    /*thanks for this bezier mozilla devtools*/
-    transition: 0.2s cubic-bezier(.18,.89,.32,1.28), border 0.1s;
+    transition: 0.2s var(--bouncy-transition), border 0.1s;
     border-radius: 50%;
     border: solid var(--track-border-color) 1px;
     box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);

src/website/css/style.css

@@ -5,25 +5,35 @@
 @import "synthesizer_ui/synthesizer_ui.css";
 @import "soundfont_mixer.css";
 @import "notification.css";
+@import "note_canvas.css";
+@import "top_part.css";
 
 * {
     /*global variables*/
     --top-buttons-color-start: #222;
     --top-buttons-color-end: #333;
     --top-buttons-color: linear-gradient(201deg, var(--top-buttons-color-start), var(--top-buttons-color-end));
 
+    --hide-top-duration: 0.2s;
+
     --font-color: #ccc;
     --top-index: 32767;
 
     --top-color-start: #101010;
     --top-color-end: #212121;
     --top-color: linear-gradient(31deg, var(--top-color-start), var(--top-color-end));
 
+    /*thanks for this bezier mozilla devtools*/
+    --bouncy-transition: cubic-bezier(.68,-0.55,.27,1.55);
+
+    --music-mode-transition: 0.5s ease;
+
     /*global styles*/
     font-family: "Noto Sans", "Open Sans", sans-serif;
     color: var(--font-color);
     text-align: center;
     margin: 0;
+    box-sizing: border-box;
 }
 
 html, body {
@@ -34,13 +44,14 @@ html, body {
 }
 
 body.load{
-    transition: background 0.4s;
+    transition: background 0.2s;
 }
 
 .spessasynth_main{
     display: flex;
     flex-direction: column;
-    height: 99%; /*i cant believe i have to do this crap*/
+    height: 100vh;
+    width: 100vw;
 }
 
 a{
@@ -58,140 +69,6 @@ a{
     border-radius: 50px;
 }
 
-
-/*Top*/
-.top_part
-{
-    position: relative;
-    background: var(--top-color);
-    border-radius: 0 0 15px 15px;
-    padding: 3px;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-around;
-    justify-content: space-around;
-    align-items: center;
-    z-index: 50;
-}
-
-.top_part.settings_shown {
-    border-radius: 0 0 0 15px;
-}
-
-input[type="file"] {
-    display: none;
-}
-
-#title
-{
-    position: relative;
-    z-index: 1;
-    margin: 0.2em auto;
-    display: block;
-    line-height: 100%;
-    font-weight: lighter;
-    font-size: 2.1em;
-    text-shadow: 0 0 5px var(--font-color);
-}
-
-#progress_bar
-{
-    background: #206;
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 2.1em;
-    border-radius: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0.4em;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    transition: width ease 0.5s;
-}
-
-.midi_and_sf_controller {
-    position: relative;
-    display: flex;
-    width: fit-content;
-    margin: auto auto 5px;
-    flex-wrap: wrap;
-    justify-content: space-around;
-}
-
-.midi_and_sf_controller label
-{
-    padding: 6px;
-    border-radius: 5px;
-    cursor: pointer;
-    background: var(--top-buttons-color);
-    font-weight: bolder;
-    margin: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-#sf_selector option
-{
-    background: #000;
-    text-align: center;
-}
-
-#sf_selector
-{
-    display: block;
-    border: none;
-    font-size: 15px;
-    background: var(--top-buttons-color);
-    text-align: center;
-    margin: 5px;
-    padding: 6px;
-    border-radius: 5px;
-    font-weight: bolder;
-}
-
-.show_top_button{
-    background: var(--top-buttons-color);
-    width: fit-content;
-    padding: 0.1em 2em;
-    border-radius: 0.5em;
-    margin: auto;
-    display: none;
-    position: absolute;
-    z-index: 100;
-    left: 0;
-    right: 0;
-}
-
-.show_top_button:hover{
-    cursor: pointer;
-}
-
-.show_top_button.shown{
-    display: flex !important;
-}
-
-/*Center*/
-#note_canvas
-{
-    width: 100%;
-    display: block;
-    filter: saturate(1.23);
-    flex: 1;
-    background-size: cover;
-    height: 1px; /*I have absolutely no idea how this works but whatever ¯\_(ツ)_/¯*/
-    z-index: 1;
-}
-
-#note_canvas.light_mode{
-    background: linear-gradient(45deg, var(--top-buttons-color-start), var(--top-buttons-color-end));
-}
-
 /*Bottom*/
 
 .bottom_part{