styles/main.css

   1 /* TO DO LIST */
   2 /* faltan las sombras
   3 faltan los textbox y selects
   4  */
   5
   6
   7
   8
   9 html{
  10   background:
  11     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%),
  12     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%),
  13     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%),
  14     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%),
  15     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%),
  16     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%),
  17     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%),
  18     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%),
  19     linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123));
  20 }
  21 body {
  22   /* background:
  23     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%),
  24     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%),
  25     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%),
  26     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%),
  27     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%),
  28     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%),
  29     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%),
  30     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%),
  31     linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123)); */\r
  32   display: flex;\r
  33   flex-direction: column;
  34   font-family: helvetica;
  35   padding-top: 10vh;
  36 }
  37 header{
  38   position: absolute;
  39   width:100%;
  40   left:0;
  41   top:0;
  42 }
  43 .navbar{
  44 background-color: #343a40;
  45 width: auto;
  46 position: relative;
  47 display: flex;
  48 flex-wrap: wrap;
  49 align-items: center;
  50 justify-content: space-between;
  51 padding: 0.5rem 1rem;
  52 box-sizing: border-box;
  53 margin: 0;
  54 top: 0;
  55 left: 0;
  56 flex-grow: 1;
  57 }
  58 .btn-outline-success{
  59   padding: 0;
  60   border-style: none;
  61   cursor: pointer;
  62   border: 1px solid;
  63   color: #28A745;
  64   border-color: #28A745;
  65   display: inline-block;
  66   font-weight: 400;
  67   text-align: center;
  68   vertical-align: middle;
  69   user-select: none;
  70   background-color: transparent;
  71   padding: 0.375rem 0.75rem;
  72   font-size: 1rem;
  73   line-height: 1.5;
  74   border-radius: 0.25rem;
  75   transition: color .15s ease-in-out,background-color .15s ease-in-out;
  76 }
  77 .btn-outline-success:hover{
  78   color: white;
  79   background-color: #28A745;
  80 }
  81 .realtime {
  82   /* width: 100vw;
  83   height: auto;
  84   display: flex;
  85   flex-flow: column wrap;
  86   justify-content: space-around;
  87   align-items: stretch;
  88   align-content: stretch; */
  89 }
  90
  91 .CPU {
  92   display: flex;
  93   align-items: stretch;
  94   align-content: stretch;
  95   justify-content: space-around;
  96 }
  97 .CPU div{\r
  98   flex-shrink:1;\r
  99 }
 100 .iframea {
 101   display: flex;
 102   width: 100%;
 103   height: 40em;
 104   overflow: auto;
 105   border-radius: 20px;
 106 }\r
 107 #ram, #cpu, #trafico{\r
 108 \r
 109 }\r
 110 .navbar{\r
 111   width: auto;\r
 112 }\r
 113 \r
 114 \r
 115 #main{\r
 116   padding: 0em 10vw;\r
 117 }\r
 118 /* H1 to H6 */\r
 119 h1, h2, h3, h4, h5, h6, p, label, span{\r
 120 color: white;\r
 121 font-weight: bold;\r
 122 line-height: 1.5;\r
 123 }\r
 124 /* formularios */\r
 125 .form{\r
 126   width: 100%;\r
 127 }\r
 128 fieldset{\r
 129   width: 100%;\r
 130   display: flex;\r
 131   flex-flow: column wrap;\r
 132   justify-content: flex-start;\r
 133   align-items: stretch;\r
 134   border: 0;\r
 135 }\r
 136 \r
 137 select{\r
 138 background-color: rgba(200,200,200,0.5);\r
 139 border: 0;\r
 140 border-bottom: 2px black solid;\r
 141 overflow: hidden;\r
 142 width: 15em;\r
 143 }\r
 144 /* some hacky shit for hidind the arrow */\r
 145 select {\r
 146   /* for Firefox */\r
 147   -moz-appearance: none;\r
 148   /* for Chrome */\r
 149   -webkit-appearance: none;\r
 150 }\r
 151 \r
 152 /* For IE10 */\r
 153 select::-ms-expand {\r
 154   display: none;\r
 155 }\r
 156 \r
 157 input[type=text]{\r
 158 border-radius: 0;\r
 159 border: 0;\r
 160 }\r