Changeset 1326 for js/standard_expdef_demo/static/styles.css

Timestamp:

08/25/24 01:56:48 (2 months ago)

Author:

Maciej Komosinski

Message:

Updated standard.expdef animated demo: uses the most recent Framsticks SDK, supports 6 genetic encodings, adjustable mutation and crossover probabilities, shows colored genotypes, allows user to manually increase/decrease fitness of the current individual, displays its neural network

File:

• js/standard_expdef_demo/static/styles.css (modified) (2 diffs)

js/standard_expdef_demo/static/styles.css

@@ -1 @@
-.genotype {
+.geno {
   font-size: 40px;
   font-weight: 500;
   font-family: "Helvetica", "Arial", "Verdana", serif;
   text-align: center;
+  /* white outline to help when displayed on darker background: */
+  /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white */
 }
 
@@ -20 +22 @@
   width: 8em;
 }
+
+.neuro-viewer-container{
+        background-color: black;
+        border-radius: 0px 30px 0px 0px;
+        border-color: white;
+        border-style: double double none none;
+        border-width: 5px;
+        pointer-events: none;
+}
+
+#neuro-viewer-2d{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 25%;
+        height: 25%;
+}
+
+#neuro-viewer-3d{
+        background-color: black;
+        border-radius: 30px 30px 30px 30px;
+        border-color: white;
+        border-style: double double double double;
+        border-width: 5px;
+        pointer-events: none;
+}
+
+#neuro-viewer-canvas{
+        width: 100%;
+        height: 100%;   
+}
+
+.controls {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: gainsboro;
+        border-radius: 30px 0px 0px 0px;
+        border-color: gray;
+        border-style: double none none double;
+        border-width: 5px;
+        font-family: "Sans-serif", Verdana, Geneva, Tahoma, sans-serif;
+
+        display: flex;
+        justify-content: center;
+        align-items: safe center;
+}
+
+.column {
+        display: flex;
+        flex-direction: column;
+}
+
+.row {
+        display: flex;
+        flex-direction: row;
+}
+
+.slider-value{
+        margin-left: 5%;
+}
+
+.slider{
+        margin-left: 2%;
+        margin-right: 2%;
+}
+
+.control-container{
+        margin-top: 2%;
+        width: 70%;
+}
+
+.rater-button{
+        padding: 0;
+        border: none;
+        background: none;
+        font-size: 30px;
+        margin-left: 2%;
+}
+
+button.inactive{
+        opacity: 0.33;
+}
+
+button:active{
+        transform: translateY(4px); 
+}
+
+button.inactive:active{
+        transform: translateY(0px); 
+}