www/index.css

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