index.css

   1
   2 body {
   3   font-family: "Arial", sans-serif;
   4   margin: 0px;
   5 }
   6
   7 #buildstatus a {
   8   color: inherit;
   9 }
  10
  11 #models-autocomplete {
  12   width: 20em;
  13   display: inline-block;
  14 }
  15
  16 .autocomplete {
  17   position: relative;
  18 }
  19
  20 .autocomplete > input {
  21   border: 1px solid transparent;
  22   background-color: #f1f1f1;
  23   padding: 10px;
  24   width: 100%;
  25   border-radius: 4px;
  26 }
  27
  28 .autocomplete-items {
  29   position: absolute;
  30   border: 1px solid #d4d4d4;
  31   border-bottom: none;
  32   border-top: none;
  33   z-index: 99;
  34   /*position the autocomplete items to be the same width as the container:*/
  35   top: 100%;
  36   left: 0;
  37   right: 0;
  38 }
  39
  40 .autocomplete-items div {
  41   padding: 10px;
  42   cursor: pointer;
  43   background-color: #fff;
  44   border-bottom: 1px solid #d4d4d4;
  45 }
  46
  47 /*when hovering an item:*/
  48 .autocomplete-items div:hover {
  49   background-color: #e9e9e9;
  50 }
  51
  52 /*when navigating through the items using the arrow keys:*/
  53 .autocomplete-active {
  54   background-color: DodgerBlue !important;
  55   color: #ffffff;
  56 }
  57
  58 header {
  59   font-weight: 500;
  60   width: 100%;
  61   z-index: 1100;
  62   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
  63   background-color: #00A3E1;
  64 }
  65
  66 h6 {
  67   margin: 0;
  68   font-size: 1.25rem;
  69   font-weight: 500;
  70   line-height: 1.6;
  71   letter-spacing: 0.0075em;
  72 }
  73
  74 header > div {
  75   padding-left: 24px;
  76   padding-right: 24px;
  77   min-height: 64px;
  78
  79   display: flex;
  80   position: relative;
  81   align-items: center;
  82   color: #fff;
  83 }
  84
  85 .container {
  86   max-width: 1280px;
  87   padding-left: 32px;
  88   padding-right: 32px;
  89   width: 100%;
  90   box-sizing: border-box;
  91   margin-top: 30px;
  92   margin-right: auto;
  93   margin-left: auto;
  94   margin-bottom: 100px;
  95 }
  96
  97 .container > div {
  98   padding: 10px 20px;
  99   text-align: left;
 100   box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
 101   border-radius: 4px;
 102   color: rgba(0, 0, 0, 0.87);
 103   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 104   background-color: #fff;
 105 }
 106
 107 #versions {
 108   border: 1px solid transparent;
 109   background-color: #f1f1f1;
 110   padding: 10px;
 111   width: 10em;
 112   border-radius: 4px;
 113 }
 114
 115 #language-selection {
 116   color: #fff;
 117   background-color: #1084b2;
 118   box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px
 119   rgba(0,0,0,0.12);
 120   padding: 6px 16px;
 121   border-radius: 4px;
 122   border: 0;
 123
 124   /* hide arrow */
 125   -webkit-appearance: none;
 126   -moz-appearance: none;
 127   text-indent: 1px;
 128   text-overflow: '';
 129 }
 130
 131 .download-link {
 132   text-decoration: none;
 133   border-radius: 4px;
 134   padding: 12px 16px;
 135   margin: 5px;
 136   font-size: 16px;
 137   cursor: pointer;
 138   letter-spacing: 0.05em;
 139   display: inline-flex;
 140   align-items: center;
 141   box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12);
 142   color: #fff;
 143   background-color: #00A3E1;
 144 }
 145
 146 .download-link:hover {
 147   background-color: #038fc6
 148 }
 149
 150 .download-link :first-child {
 151   width: 30px;
 152   margin-right: 15px;
 153   margin-top: -2px;
 154   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z' fill='%23fff'%3E%3C/path%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
 155 }
 156
 157 #images .column {
 158   width: 5em;
 159   display: inline-block;
 160   line-height: 1.5;
 161 }
 162
 163 #images {
 164   display: none;
 165 }
 166
 167 #images > div {
 168   padding-top: 20px;
 169 }
 170
 171 #image-model {
 172   font-weight: bold;
 173 }
 174
 175 #custom {
 176   display: none;
 177 }
 178
 179 #custom textarea {
 180   width: 500px;
 181   height: 120px;
 182   font-size: 16px;
 183   display: block;
 184 }
 185
 186 #custom a :first-child {
 187   width: 30px;
 188   margin-right: 10px;
 189   margin-top: 0px;
 190   font-size: 36px;
 191 }
 192
 193 #custom a {
 194   text-decoration: none;
 195   border-radius: 4px;
 196   padding: 2px 10px;
 197   margin: 5px;
 198   font-size: 16px;
 199   cursor: pointer;
 200   letter-spacing: 0.05em;
 201   display: inline-flex;
 202   align-items: center;
 203   box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12);
 204   color: #fff;
 205   background-color: #00A3E1;
 206 }
 207
 208 .download-help {
 209   display: none;
 210 }
 211
 212 #buildspinner {
 213   float: left;
 214   height: 40px;
 215   padding-right: 12px;
 216   display: none;
 217 }
 218
 219 #buildstatus {
 220   padding: 10px 0;
 221   display: none;
 222 }
 223
 224 #footer {
 225   font-size: 0.8em;
 226   text-align: right;
 227 }
 228
 229 #footer a {
 230   text-decoration: none;
 231 }