clean and rework main.scss

BioDT · Apr 19, 2024 · e9299fc · e9299fc
1 parent 4d9f533
commit e9299fc
Showing 1 changed file with 84 additions and 112 deletions.
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -1,45 +1,46 @@
-.bslib-page-fill{
+.bslib-page-fill {
   overflow: auto;
 }
 
-.btn-navbar{
+.btn-navbar {
   color: #414F2F;
   background-color: #fff;
   border-color: #fff;
 }
 
-.bslib-sidebar-layout>.sidebar{
+.bslib-sidebar-layout>.sidebar {
   background-color: #fff;
 }
 
-.index-info{
+.index-info {
   background-image: url("../img/forest2.png");
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: bottom;
   display: flex;
 }
 
-.info-text{
+.info-text {
   color: #bc6c25;
   background-color: #fff;
-  background-color: rgba(256,256,256,0.8);
+  background-color: rgba(256, 256, 256, 0.8);
   border-radius: 25px;
   padding-left: 10px;
   padding-right: 10px;
 }
 
 .marker-cluster-red {
-	background-color: rgb(160, 50, 85);
-	background-color: rgba(253, 60, 115, 0.5);
-	}
-.marker-cluster-red div {
-	background-color: rgb(170, 20, 60);
-	background-color: rgba(241, 40, 70, 0.6);
-	color: rgb(235,235,235)
-	}
-
-.waiter-fullscreen{
+  background-color: rgb(160, 50, 85);
+  background-color: rgba(253, 60, 115, 0.5);
+
+  div {
+    background-color: rgb(170, 20, 60);
+    background-color: rgba(241, 40, 70, 0.6);
+    color: rgb(235, 235, 235)
+  }
+}
+
+.waiter-fullscreen {
   background-image: url("../img/forest2.png");
   background-repeat: no-repeat;
   background-size: 100%;
@@ -60,113 +61,84 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.help-button span {
-  margin: -1rem -1rem;
-}
-/* END help button */
-
-/* Underline nav-item */
-
-.navbar .navbar-nav .nav-link {
-  color: #414f2f;
-  font-size: 1.1em;
-}
-.navbar .navbar-nav .nav-link:hover {
-  color: #414f2f;
-}
-.navbar .navbar-nav .nav-item {
-  position: relative;
-}
-.navbar .navbar-nav .nav-item::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  background-color: #414f2f;
-  width: 0%;
-  content: "";
-  height: 2px;
-  /*transition: all 0.5s;*/
-}
-
-.navbar .navbar-nav .nav-item:hover::after {
-  width: 100%;
-}
-
-/* 
-  NOTE: NOT WORKING BC DIFFERENT IDs!!
-  selection inputs on the same line
-*/
-#beehave-output_bees_plot .shiny-input-container {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-content: center;
-}
 
-#beehave-output_bees_plot .shiny-input-container > label {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
+  span {
+    margin: -1rem -1rem;
+  }
 }
 
-#beehave-output_bees_plot .shiny-input-container > div {
-    min-width: 250px;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-}
-
-#beehave-output_bees_plot .shiny-input-container > div > .selectize-control {
-    padding: 0;
-    width: 250px;
-    margin-left: 1rem;
-}
-
-#beehave-update_output {
-    margin-left: 3rem;
-    margin-right: 3rem;
-    max-width: 18rem;
-} /* for better look of "Show results" button */
-
-/* fix width of the row for on one line inputs - select */
-.form-group.shiny-input-container {
-  margin-bottom: 0rem;
-}
-
-.shiny-input-container:not(.shiny-input-container-inline) {
-    width: 100%;
-    max-width: 100%;
-}
+/* END help button */
 
+/* highlight nav-item */
+.navbar-nav {
+  .nav-link {
+    &:hover {
+      color: #414f2f;
+    }
+
+    color: #414f2f;
+    font-size: 1.1em;
+  }
+
+  .nav-item {
+    &:after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      background-color: #414f2f;
+      width: 0%;
+      content: "";
+      height: 2px;
+      transition: all 0.5s;
+    }
+
+    &:hover::after {
+      width: 100%;
+    }
+
+    position: relative;
+  }
+}
+
+/* END highlight nav-item */
+
+/* shadow effect for each card (bslib) element */
 .card-shadow {
-   box-shadow: 0 2px 2px #888888;
+  box-shadow: 0 2px 2px #888888;
 }
 
-/* slider inputs color fix */
-.irs .irs-bar, .irs-shadow {
-  background: #DDA15E;
-  border-color: #DDA15E;
-  color: #DDA15E;
-}
+/* slider inputs color fix (for awesome inputs which were removed) */
+.irs {
 
-.irs .irs-handle {
-  background: #DDA15E;
-  border-color: #DDA15E;
-  color: #DDA15E;
-}
+  .irs-bar,
+  .irs-shadow {
+    background: #DDA15E;
+    border-color: #DDA15E;
+    color: #DDA15E;
+  }
 
-.irs .irs-single {
-  background: #DDA15E;
-  border-color: #DDA15E;
+  .irs-handle {
+    background: #DDA15E;
+    border-color: #DDA15E;
+    color: #DDA15E;
+  }
+
+  .irs-single {
+    background: #DDA15E;
+    border-color: #DDA15E;
+  }
 }
 
-.irs--shiny .irs-handle.state_hover, .irs--shiny .irs-handle:hover {
+.irs--shiny .irs-handle.state_hover,
+.irs--shiny .irs-handle:hover {
   background: #DDA15E;
 }
+/* END slider inputs color fix (for awesome inputs which were removed) */
 
-
+/* shiny checkbox color fix */
+.shiny-input-checkbox {
+  background-color: #DDA15E !important;
+  border-color: #DDA15E !important;
+}