source: js/standard_expdef_demo/static/styles.css @ 1326

Last change on this file since 1326 was 1326, checked in by Maciej Komosinski, 3 months ago

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 size: 1.8 KB
RevLine 
[1326]1.geno {
[880]2  font-size: 40px;
3  font-weight: 500;
4  font-family: "Helvetica", "Arial", "Verdana", serif;
5  text-align: center;
[1326]6  /* white outline to help when displayed on darker background: */
7  /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white */
[880]8}
9
10.fitness {
11  font-size: 42px;
12  font-weight: 700;
13  font-family: "Helvetica", "Arial", "Verdana", serif;
14  text-align: center;
15}
16
17.info {
18  font-size: 48px;
19  font-weight: 700;
20  font-family: "Helvetica", "Arial", "Verdana", serif;
21  text-align: left;
22  width: 8em;
23}
[1326]24
25.neuro-viewer-container{
26        background-color: black;
27        border-radius: 0px 30px 0px 0px;
28        border-color: white;
29        border-style: double double none none;
30        border-width: 5px;
31        pointer-events: none;
32}
33
34#neuro-viewer-2d{
35        position: absolute;
36        bottom: 0;
37        left: 0;
38        width: 25%;
39        height: 25%;
40}
41
42#neuro-viewer-3d{
43        background-color: black;
44        border-radius: 30px 30px 30px 30px;
45        border-color: white;
46        border-style: double double double double;
47        border-width: 5px;
48        pointer-events: none;
49}
50
51#neuro-viewer-canvas{
52        width: 100%;
53        height: 100%;   
54}
55
56.controls {
57        position: absolute;
58        bottom: 0;
59        right: 0;
60        background-color: gainsboro;
61        border-radius: 30px 0px 0px 0px;
62        border-color: gray;
63        border-style: double none none double;
64        border-width: 5px;
65        font-family: "Sans-serif", Verdana, Geneva, Tahoma, sans-serif;
66
67        display: flex;
68        justify-content: center;
69        align-items: safe center;
70}
71
72.column {
73        display: flex;
74        flex-direction: column;
75}
76
77.row {
78        display: flex;
79        flex-direction: row;
80}
81
82.slider-value{
83        margin-left: 5%;
84}
85
86.slider{
87        margin-left: 2%;
88        margin-right: 2%;
89}
90
91.control-container{
92        margin-top: 2%;
93        width: 70%;
94}
95
96.rater-button{
97        padding: 0;
98        border: none;
99        background: none;
100        font-size: 30px;
101        margin-left: 2%;
102}
103
104button.inactive{
105        opacity: 0.33;
106}
107
108button:active{
109        transform: translateY(4px);
110}
111
112button.inactive:active{
113        transform: translateY(0px);
114}
Note: See TracBrowser for help on using the repository browser.