styles/main.css

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