Layout

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -28,6 +28,7 @@ import nl.astraeus.css.properties.px
 import nl.astraeus.css.properties.rem
 import nl.astraeus.css.properties.vh
 import nl.astraeus.css.properties.vw
+import nl.astraeus.css.style.Style
 import nl.astraeus.css.style.cls
 import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
@@ -240,7 +241,7 @@ object MainView : Komponent(), CssName {
         }
       }
       div {
-        span(ButtonCss.name) {
+        span(ButtonBarCss.name) {
           +"Sine"
           if (VstChipWorklet.waveform == 0) {
             classes += SelectedCss.name
@@ -250,7 +251,7 @@ object MainView : Komponent(), CssName {
             requestUpdate()
           }
         }
-        span(ButtonCss.name) {
+        span(ButtonBarCss.name) {
           +"Square"
           if (VstChipWorklet.waveform == 1) {
             classes += SelectedCss.name
@@ -260,7 +261,7 @@ object MainView : Komponent(), CssName {
             requestUpdate()
           }
         }
-        span(ButtonCss.name) {
+        span(ButtonBarCss.name) {
           +"Triangle"
           if (VstChipWorklet.waveform == 2) {
             classes += SelectedCss.name
@@ -270,7 +271,7 @@ object MainView : Komponent(), CssName {
             requestUpdate()
           }
         }
-        span(ButtonCss.name) {
+        span(ButtonBarCss.name) {
           +"Sawtooth"
           if (VstChipWorklet.waveform == 3) {
             classes += SelectedCss.name
@@ -368,6 +369,7 @@ object MainView : Komponent(), CssName {
   object MainDivCss : CssName
   object ActiveCss : CssName
   object ButtonCss : CssName
+  object ButtonBarCss : CssName
   object SelectedCss : CssName
   object NoteBarCss : CssName
   object StartSplashCss : CssName
@@ -400,25 +402,18 @@ object MainView : Komponent(), CssName {
           //transition()
           noTextSelect()
         }
-        select("select", "input", "textarea") {
-          backgroundColor(Css.currentStyle.mainBackgroundColor)
+        select("input", "textarea") {
+          backgroundColor(Css.currentStyle.inputBackgroundColor)
           color(Css.currentStyle.mainFontColor)
+          border("none")
         }
         select(cls(ButtonCss)) {
-          display(Display.inlineBlock)
           margin(1.rem)
-          padding(1.rem)
-          backgroundColor(Css.currentStyle.buttonBackgroundColor)
-          borderColor(Css.currentStyle.buttonBorderColor)
-          borderWidth(Css.currentStyle.buttonBorderWidth)
-          color(Css.currentStyle.mainFontColor)
-
-          hover {
-            backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
-          }
-          and(SelectedCss.cls()) {
-            backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
-          }
+          commonButton()
+        }
+        select(cls(ButtonBarCss)) {
+          margin(1.rem, 0.px)
+          commonButton()
         }
         select(cls(ActiveCss)) {
           //backgroundColor(Css.currentStyle.selectedBackgroundColor)
@@ -438,7 +433,7 @@ object MainView : Komponent(), CssName {
           backgroundImage("url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg')")
           background("right 0.8em center/1.4em")
           backgroundColor(Css.currentStyle.inputBackgroundColor)
-          //color(Css.currentStyle.entryFontColor)
+          color(Css.currentStyle.mainFontColor)
           borderRadius(0.25.em)
         }
         select(cls(StartSplashCss)) {
@@ -448,7 +443,7 @@ object MainView : Komponent(), CssName {
           width(100.vw)
           height(100.vh)
           zIndex(100)
-          backgroundColor(hsla(32, 0, 50, 0.6))
+          backgroundColor(hsla(32, 0, 5, 0.65))
 
           select(cls(StartBoxCss)) {
             position(Position.relative)
@@ -456,7 +451,9 @@ object MainView : Komponent(), CssName {
             top(25.vh)
             width(50.vw)
             height(50.vh)
-            backgroundColor(hsla(0, 0, 50, 0.25))
+            backgroundColor(hsla(239, 50, 10, 1.0))
+            borderColor(Css.currentStyle.mainFontColor)
+            borderWidth(2.px)
 
             select(cls(StartButtonCss)) {
               position(Position.absolute)
@@ -481,5 +478,21 @@ object MainView : Komponent(), CssName {
       }
   }
 
+  private fun Style.commonButton() {
+    display(Display.inlineBlock)
+    padding(1.rem)
+    backgroundColor(Css.currentStyle.buttonBackgroundColor)
+    borderColor(Css.currentStyle.buttonBorderColor)
+    borderWidth(Css.currentStyle.buttonBorderWidth)
+    color(Css.currentStyle.mainFontColor)
+
+    hover {
+      backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
+    }
+    and(SelectedCss.cls()) {
+      backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
+    }
+  }
+
 
 }