Archivo CSS

estilos_visualizacion.css

+html {
+    height: 100vh;
+    }
+
+body {
+    height: 100%;
+    }
+
+h1 {
+    text-align: center;
+    font-family: "Segoe UI";
+    }
+
+label {
+    display: block;
+    }
+
+.mainLabel {
+    font-family: "Segoe UI";
+    }
+
+input[type=date] {
+    margin-top: 4%;
+    }
+
+input[type=button] {
+    border-radius: 0.3em;
+    padding: 0.5em;
+    background-color:dodgerblue; 
+    color:white;
+    font-family: "Segoe UI";
+    }
+
+/* Cambia el color del botón al pasar el ratón sobre él */
+input[type=button]:hover {
+    background-color: royalblue;
+    }
+
+/* Esta clase corresponde a los cuatro div que se sitúan debajo del encabezado */
+.inputElement {
+    float: left;
+    height: 15%;
+    margin-left: 1%;
+    margin-right: 4%;
+    }
+
+/* Esta clase identifica al div que contiene las opciones de materias primas */
+.options {
+    border: 1px solid grey;
+    height: 70%;
+    margin-top: 4%;
+    overflow-y: scroll;
+    }
+
+.axis text {
+    fill: black;
+    }
+
+.axis line{
+    stroke: black;
+    }
+
+.axis path {
+    stroke: black;
+}
+
+.dataPath {
+    fill: none;
+    stroke-width: 2;
+    }
+
+#NATURAL\.GAS {
+    stroke: #73b647;
+    }
+
+#GOLD {
+    stroke: #c79a4d;
+    }
+
+#BRENT\.CRUDE {
+    stroke: #5e8dbb;
+    }
+
+#COPPER {
+    stroke: #d35133;
+    }
+
+#SILVER {
+    stroke: #a541c7;
+    }
+
+#LOW\.SULPHUR\.GAS\.OIL {
+    stroke: #d0457b;
+    }
+
+#LIVE\.CATTLE {
+    stroke: #605bc1;
+    }
+
+#ALUMINIUM {
+    stroke: #60b093;
+    }
+
+#ZINC {
+    stroke: #506630;
+    }
+
+#NICKEL {
+    stroke: #c989bb;
+    }
+
+#WHEAT {
+    stroke: #8f4c3d;
+    }
+
+#GASOLINE {
+    stroke: #653466;
+    }
+
+/* Recuadro que aparece al pasar el ratón sobre una línea del gráfico */
+#tooltip {
+    position: absolute;
+    background-color: white;
+    border: solid;
+    padding: 0.1em;
+    }
\ No newline at end of file