www/index.css

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