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)); */
  32   display: flex;
  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   width: 100%;
  90   display: flex;
  91   flex-flow: row wrap
  92 }
  93 .RAM{
  94   flex-basis: 60%
  95 }
  96 .CPU{
  97   flex-basis: 30%;
  98   flex-grow: 1;
  99 }
 100 .TRAFFIC{
 101   flex-basis: 100%
 102 }
 103 .TEMP{
 104 flex-basis: 100%;
 105 }
 106 #temperatura{
 107 width: 100%;
 108 align-self: center;
 109 background-color: transparent;
 110 color: white;
 111 font-size: 1.6vw;
 112 font-weight: 900;
 113 }
 114 @media (max-width: 800px){
 115  #temperatura{
 116   font-size:16px;
 117  }
 118 }
 119
 120 .navbar{
 121   width: auto;
 122 }
 123
 124
 125 #main{
 126   padding: 0em 10vw;
 127   padding-left: 20px;
 128 }
 129 /* H1 to H6 */
 130 h1, h2, h3, h4, h5, h6, p, label, span{
 131 color: white;
 132 font-weight: bold;
 133 line-height: 1.5;
 134 }
 135 /* formularios */
 136 .form{
 137   width: 100%;
 138 }
 139 fieldset{
 140   width: 100%;
 141   display: flex;
 142   flex-flow: column wrap;
 143   justify-content: flex-start;
 144   align-items: stretch;
 145   border: 0;
 146 }
 147
 148 select{
 149 background-color: rgba(200,200,200,0.5);
 150 border: 0;
 151 border-bottom: 2px black solid;
 152 overflow: hidden;
 153 width: 15em;
 154 }
 155 /* some hacky shit for hidind the arrow */
 156 select {
 157   /* for Firefox */
 158   -moz-appearance: none;
 159   /* for Chrome */
 160   -webkit-appearance: none;
 161 }
 162
 163 /* For IE10 */
 164 select::-ms-expand {
 165   display: none;
 166 }
 167
 168 input[type=text]{
 169 border-radius: 0;
 170 border: 0;
 171 }
 172 #imgtoporouting{
 173   width: 500px;
 174 }