-body {
+/* TO DO LIST */
+/* faltan las sombras
+faltan los textbox y selects
+ */
+
+
+
+
+html{
background:
linear-gradient(238deg, rgba(70, 70, 70, 0.09) 0%, rgba(70, 70, 70, 0.09) 50%, rgba(214, 214, 214, 0.09) 50%, rgba(214, 214, 214, 0.09) 100%),
linear-gradient(126deg, rgba(223, 223, 223, 0.05) 0%, rgba(223, 223, 223, 0.05) 50%, rgba(217, 217, 217, 0.05) 50%, rgba(217, 217, 217, 0.05) 100%),
linear-gradient(100deg, rgba(220, 220, 220, 0.07) 0%, rgba(220, 220, 220, 0.07) 50%, rgba(65, 65, 65, 0.07) 50%, rgba(65, 65, 65, 0.07) 100%),
linear-gradient(190deg, rgba(194, 194, 194, 0.03) 0%, rgba(194, 194, 194, 0.03) 50%, rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 100%),
linear-gradient(320deg, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0.08) 50%, rgba(231, 231, 231, 0.08) 50%, rgba(231, 231, 231, 0.08) 100%),
- linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123));\r
- display: flex;\r
+ linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123));
+}
+body {
+ /* background:
+ linear-gradient(238deg, rgba(70, 70, 70, 0.09) 0%, rgba(70, 70, 70, 0.09) 50%, rgba(214, 214, 214, 0.09) 50%, rgba(214, 214, 214, 0.09) 100%),
+ linear-gradient(126deg, rgba(223, 223, 223, 0.05) 0%, rgba(223, 223, 223, 0.05) 50%, rgba(217, 217, 217, 0.05) 50%, rgba(217, 217, 217, 0.05) 100%),
+ linear-gradient(152deg, rgba(116, 116, 116, 0.08) 0%, rgba(116, 116, 116, 0.08) 50%, rgba(248, 248, 248, 0.08) 50%, rgba(248, 248, 248, 0.08) 100%),
+ linear-gradient(225deg, rgba(1, 1, 1, 0.07) 0%, rgba(1, 1, 1, 0.07) 50%, rgba(5, 5, 5, 0.07) 50%, rgba(5, 5, 5, 0.07) 100%),
+ linear-gradient(194deg, rgba(14, 14, 14, 0.09) 0%, rgba(14, 14, 14, 0.09) 50%, rgba(206, 206, 206, 0.09) 50%, rgba(206, 206, 206, 0.09) 100%),
+ linear-gradient(100deg, rgba(220, 220, 220, 0.07) 0%, rgba(220, 220, 220, 0.07) 50%, rgba(65, 65, 65, 0.07) 50%, rgba(65, 65, 65, 0.07) 100%),
+ linear-gradient(190deg, rgba(194, 194, 194, 0.03) 0%, rgba(194, 194, 194, 0.03) 50%, rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 100%),
+ linear-gradient(320deg, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0.08) 50%, rgba(231, 231, 231, 0.08) 50%, rgba(231, 231, 231, 0.08) 100%),
+ linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123)); */
+ display: flex;
flex-direction: column;
+ font-family: helvetica;
+ padding-top: 10vh;
+}
+header{
+ position: absolute;
+ width:100%;
+ left:0;
+ top:0;
+}
+.navbar{
+background-color: #343a40;
+width: auto;
+position: relative;
+display: flex;
+flex-wrap: wrap;
+align-items: center;
+justify-content: space-between;
+padding: 0.5rem 1rem;
+box-sizing: border-box;
+margin: 0;
+top: 0;
+left: 0;
+flex-grow: 1;
+}
+.btn-outline-success{
+ padding: 0;
+ border-style: none;
+ cursor: pointer;
+ border: 1px solid;
+ color: #28A745;
+ border-color: #28A745;
+ display: inline-block;
+ font-weight: 400;
+ text-align: center;
+ vertical-align: middle;
+ user-select: none;
+ background-color: transparent;
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ border-radius: 0.25rem;
+ transition: color .15s ease-in-out,background-color .15s ease-in-out;
+}
+.btn-outline-success:hover{
+ color: white;
+ background-color: #28A745;
}
-
.realtime {
/* width: 100vw;
height: auto;
justify-content: space-around;
align-items: stretch;
align-content: stretch; */
+ width: 100%;
+ display: flex;
+ flex-flow: row wrap
+}
+.RAM{
+ flex-basis: 60%
}
+.CPU{
+ flex-basis: 30%;
+ flex-grow: 1;
+}
+.TRAFFIC{
+ flex-basis: 100%
+}
+.TEMP{
+flex-basis: 100%;
+}
+#temperatura{
+width: 100%;
+align-self: center;
+background-color: transparent;
+color: white;
+font-size: 1.6vw;
+font-weight: 900;
+}
+@media (max-width: 800px){
+ #temperatura{
+ font-size:16px;
+ }
+}
+
+.navbar{
+ width: auto;
+}
+
-.CPU {
+#main{
+ padding: 0em 10vw;
+ padding-left: 20px;
+}
+/* H1 to H6 */
+h1, h2, h3, h4, h5, h6, p, label, span{
+color: white;
+font-weight: bold;
+line-height: 1.5;
+}
+/* formularios */
+.form{
+ width: 100%;
+}
+fieldset{
+ width: 100%;
display: flex;
+ flex-flow: column wrap;
+ justify-content: flex-start;
align-items: stretch;
- align-content: stretch;
- justify-content: space-around;
+ border: 0;
}
-.CPU div{\r
- flex-shrink:1;\r
+
+select{
+background-color: rgba(200,200,200,0.5);
+border: 0;
+border-bottom: 2px black solid;
+overflow: hidden;
+width: 15em;
+}
+/* some hacky shit for hidind the arrow */
+select {
+ /* for Firefox */
+ -moz-appearance: none;
+ /* for Chrome */
+ -webkit-appearance: none;
+}
+
+/* For IE10 */
+select::-ms-expand {
+ display: none;
+}
+
+input[type=text]{
+border-radius: 0;
+border: 0;
+}
+#imgtoporouting{
+ width: 500px;
}
-.iframea {
- display: flex;
- width: 100%;
- height: 40em;
- overflow: auto;
- border-radius: 20px;
-}\r
-#ram, #cpu, #trafico{\r
-\r
-}\r
-.navbar{\r
- width: auto;\r
-}\r
projects / VSoRC / .git / blobdiff