X-Git-Url: https://git.josue.xyz/?a=blobdiff_plain;f=styles%2Fmain.css;h=98ab5ee9d483cef1162c24960b625d8ec2c62525;hb=4ff4cfab60fd88f431c88603d57612fc489dc62f;hp=a787ce694ac6a84268c00206894039a88debd9a9;hpb=7ae694bf761b1d0b6b8e0be6bfe36d483bc51c3d;p=VSoRC%2F.git

diff --git a/styles/main.css b/styles/main.css
index a787ce6..98ab5ee 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -6,8 +6,7 @@ faltan los textbox y selects
 
 
 
-
-body {
+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%),
@@ -17,8 +16,20 @@ body {
     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;
+    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;
@@ -75,75 +86,89 @@ flex-grow: 1;
   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;
+ }
 }
 
-.CPU {
+.navbar{
+  width: auto;
+}
+
+
+#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{
-  flex-shrink:1;
+
+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;
-}
-#ram, #cpu, #trafico{
-
-}
-.navbar{
-  width: auto;
-}
-
-
-#main{
-  padding: 0em 10vw;
-}
-/* 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;
-  border: 0;
-}
-
-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;
-}