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