src/styles.css

   1 /*
   2 ============LICENSE_START==========================================
   3 ===================================================================
   4 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   5 ===================================================================
   6
   7 Unless otherwise specified, all software contained herein is licensed
   8 under the Apache License, Version 2.0 (the License);
   9 you may not use this software except in compliance with the License.
  10 You may obtain a copy of the License at
  11
  12     http://www.apache.org/licenses/LICENSE-2.0
  13
  14 Unless required by applicable law or agreed to in writing, software
  15 distributed under the License is distributed on an "AS IS" BASIS,
  16 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17 See the License for the specific language governing permissions and
  18 limitations under the License.
  19
  20 ECOMP is a trademark and service mark of AT&T Intellectual Property.
  21 ============LICENSE_END============================================ */
  22
  23 input[type=text],
  24 input[type=password],
  25 input[type=email],
  26 input[type=url],
  27 input[type=time],
  28 input[type=date],
  29 input[type=datetime-local],
  30 input[type=tel],
  31 input[type=number],
  32 input[type=search-md],
  33 input[type=search],
  34 textarea.md-textarea {
  35     font-family: 'Roboto';
  36     background-color: transparent;
  37     border: 1px solid;
  38     border-bottom: 1px solid;
  39     border-color: grey;
  40     border-radius: 5px;
  41     outline: none;
  42     height: 37px;
  43     width: 100%;
  44     font-size: 1rem;
  45     box-shadow: none;
  46     box-sizing: inherit;
  47     padding: 8px;
  48 }
  49
  50 select.form-control {
  51     border-radius: 5px;
  52     border: 1px solid;
  53     padding-left: 10px;
  54     border-color: grey;
  55     font-family: 'Roboto';
  56 }
  57
  58 input[type=text]:disabled {
  59     background: #e0dada;
  60     font-family: 'Roboto';
  61 }
  62
  63 body {
  64     background: white;
  65     font-family: 'Roboto';
  66 }
  67
  68 body {
  69     margin: 0;
  70 }
  71
  72 /* Disable ugly boxes around images in IE10 */
  73
  74 a img {
  75     border: 0px;
  76 }
  77
  78 ::-moz-selection {
  79     background-color: #6ab344;
  80     color: #fff;
  81 }
  82
  83 ::selection {
  84     background-color: #6ab344;
  85     color: #fff;
  86 }
  87
  88 .android-search-box .mdl-textfield__input {
  89     color: rgba(0, 0, 0, 0.87);
  90 }
  91
  92 .android-header .mdl-menu__container {
  93     z-index: 50;
  94     margin: 0 !important;
  95 }
  96
  97 .mdl-textfield--expandable {
  98     width: auto;
  99 }
 100
 101 .android-fab {
 102     position: absolute;
 103     right: 20%;
 104     bottom: -26px;
 105     z-index: 3;
 106     background: #64ffda !important;
 107     color: black !important;
 108 }
 109
 110 .android-mobile-title {
 111     display: none !important;
 112 }
 113
 114 .android-logo-image {
 115     height: 28px;
 116     width: 140px;
 117 }
 118
 119 .warningMarker {
 120     position: absolute;
 121     background: orange;
 122     color: red;
 123     z-index: 20
 124 }
 125
 126 .col-lg-12-ln {
 127     margin-left: 41px;
 128     margin-top: 2px;
 129     position: centre;
 130 }
 131
 132 .col-lg-12-ln1 {
 133     margin-left: 30px;
 134     margin-top: 2px;
 135     position: centre;
 136 }
 137
 138 .col-lg-12-ln2 {
 139     margin-left: 370px;
 140     margin-top: 15px;
 141     position: centre;
 142 }
 143
 144 .keyedMarker {
 145     position: absolute;
 146     background: green;
 147     z-index: 20
 148 }
 149
 150 .noKeyedMarker {
 151     position: absolute;
 152     background: orange;
 153     z-index: 20
 154 }
 155
 156 .defaultMarker {
 157     position: absolute;
 158     background: lightgreen;
 159     z-index: 20;
 160 }
 161
 162 .android-header {
 163     overflow: visible;
 164     background-color: white;
 165 }
 166
 167 .android-header .material-icons {
 168     color: #767777 !important;
 169 }
 170
 171 .android-header .mdl-layout__drawer-button {
 172     background: transparent;
 173     color: #767777;
 174 }
 175
 176 .android-header .mdl-navigation__link {
 177     color: #757575;
 178     font-weight: 700;
 179     font-size: 14px;
 180 }
 181
 182 .android-navigation-container {
 183     /* Simple hack to make the overflow happen to the left instead... */
 184     direction: rtl;
 185     -webkit-order: 1;
 186     -ms-flex-order: 1;
 187     order: 1;
 188     width: 500px;
 189     transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 190 }
 191
 192 .android-navigation {
 193     /* ... and now make sure the content is actually LTR */
 194     direction: ltr;
 195     -webkit-justify-content: flex-end;
 196     -ms-flex-pack: end;
 197     justify-content: flex-end;
 198     width: 800px;
 199 }
 200
 201 .android-search-box.is-focused + .android-navigation-container {
 202     opacity: 0;
 203     width: 100px;
 204 }
 205
 206 .android-navigation .mdl-navigation__link {
 207     display: inline-block;
 208     height: 60px;
 209     line-height: 68px;
 210     background-color: transparent !important;
 211     border-bottom: 4px solid transparent;
 212 }
 213
 214 .android-navigation .mdl-navigation__link:hover {
 215     border-bottom: 4px solid #6ab344;
 216 }
 217
 218 .android-search-box {
 219     -webkit-order: 2;
 220     -ms-flex-order: 2;
 221     order: 2;
 222     margin-left: 16px;
 223     margin-right: 16px;
 224 }
 225
 226 .android-more-button {
 227     -webkit-order: 3;
 228     -ms-flex-order: 3;
 229     order: 3;
 230 }
 231
 232 .android-drawer {
 233     border-right: none;
 234 }
 235
 236 .android-drawer-separator {
 237     height: 1px;
 238     background-color: #dcdcdc;
 239     margin: 8px 0;
 240 }
 241
 242 .android-drawer .mdl-navigation__link.mdl-navigation__link {
 243     font-size: 14px;
 244     color: #757575;
 245 }
 246
 247 .android-drawer span.mdl-navigation__link.mdl-navigation__link {
 248     color: #6ab344;
 249 }
 250
 251 .android-drawer .mdl-layout-title {
 252     position: relative;
 253     background: #6ab344;
 254     height: 160px;
 255 }
 256
 257 .android-drawer .android-logo-image {
 258     position: absolute;
 259     bottom: 16px;
 260 }
 261
 262 .logo-font {
 263     font-family: 'Roboto';
 264     line-height: 1;
 265     color: #767777;
 266     font-weight: 500;
 267 }
 268
 269 .android-slogan {
 270     font-size: 60px;
 271     padding-top: 160px;
 272 }
 273
 274 .android-sub-slogan {
 275     font-size: 21px;
 276     padding-top: 24px;
 277 }
 278
 279 .android-create-character {
 280     font-size: 21px;
 281     padding-top: 400px;
 282 }
 283
 284 .android-create-character a {
 285     text-decoration: none;
 286     color: #767777;
 287     font-weight: 300;
 288 }
 289
 290 .android-screen-section {
 291     position: relative;
 292     padding-top: 60px;
 293     padding-bottom: 80px;
 294 }
 295
 296 .android-screens {
 297     text-align: right;
 298     width: 100%;
 299     white-space: nowrap;
 300     overflow-x: auto;
 301 }
 302
 303 .android-screen {
 304     text-align: center;
 305 }
 306
 307 .android-screen .android-link {
 308     margin-top: 16px;
 309     display: block;
 310     z-index: 2;
 311 }
 312
 313 .android-image-link {
 314     text-decoration: none;
 315 }
 316
 317 .android-wear {
 318     display: inline-block;
 319     width: 160px;
 320     margin-right: 32px;
 321 }
 322
 323 .android-wear .android-screen-image {
 324     width: 40%;
 325     z-index: 1;
 326 }
 327
 328 .android-phone {
 329     display: inline-block;
 330     width: 64px;
 331     margin-right: 48px;
 332 }
 333
 334 .android-phone .android-screen-image {
 335     width: 100%;
 336     z-index: 1;
 337 }
 338
 339 .android-tablet {
 340     display: inline-block;
 341     width: 110px;
 342     margin-right: 64px;
 343 }
 344
 345 .android-tablet .android-screen-image {
 346     width: 100%;
 347     z-index: 1;
 348 }
 349
 350 .android-tablet .android-link {
 351     display: block;
 352     z-index: 2;
 353 }
 354
 355 .android-tv {
 356     display: inline-block;
 357     width: 300px;
 358     margin-right: 80px;
 359 }
 360
 361 .android-tv .android-screen-image {
 362     width: 100%;
 363     z-index: 1;
 364 }
 365
 366 .android-auto {
 367     display: inline-block;
 368     width: 300px;
 369     overflow: hidden;
 370 }
 371
 372 .android-auto .android-screen-image {
 373     display: block;
 374     height: 300px;
 375     z-index: 1;
 376 }
 377
 378 .android-wear-band-text p {
 379     padding-top: 8px;
 380 }
 381
 382 .android-link {
 383     text-decoration: none;
 384     color: #6ab344 !important;
 385 }
 386
 387 .android-link:hover {
 388     color: #6ab344 !important;
 389 }
 390
 391 .android-link .material-icons {
 392     position: relative;
 393     top: -1px;
 394     vertical-align: middle;
 395 }
 396
 397 .android-alt-link {
 398     text-decoration: none;
 399     color: #64ffda !important;
 400     font-size: 16px;
 401 }
 402
 403 .android-alt-link:hover {
 404     color: #00bfa5 !important;
 405 }
 406
 407 .android-alt-link .material-icons {
 408     position: relative;
 409     top: 6px;
 410 }
 411
 412 .android-customized-section {
 413     text-align: center;
 414 }
 415
 416 .android-customized-section-text {
 417     max-width: 500px;
 418     margin-left: auto;
 419     margin-right: auto;
 420     padding: 80px 16px 0 16px;
 421 }
 422
 423 .android-customized-section-text p {
 424     padding-top: 16px;
 425 }
 426
 427 .android-more-section {
 428     padding: 80px 0;
 429     max-width: 1044px;
 430     margin-left: auto;
 431     margin-right: auto;
 432 }
 433
 434 .android-more-section .android-section-title {
 435     margin-left: 12px;
 436     padding-bottom: 24px;
 437 }
 438
 439 .android-card-container {
 440 }
 441
 442 .android-card-container .mdl-card__media {
 443     overflow: hidden;
 444     background: transparent;
 445 }
 446
 447 .android-card-container .mdl-card__media img {
 448     width: 100%;
 449 }
 450
 451 .android-card-container .mdl-card__title {
 452     background: transparent;
 453     height: auto;
 454 }
 455
 456 .android-card-container .mdl-card__title-text {
 457     color: black;
 458     height: auto;
 459 }
 460
 461 .android-card-container .mdl-card__supporting-text {
 462     height: auto;
 463     color: black;
 464     padding-bottom: 56px;
 465 }
 466
 467 .android-card-container .mdl-card__actions {
 468     position: absolute;
 469     bottom: 0;
 470 }
 471
 472 .android-card-container .mdl-card__actions a {
 473     border-top: none;
 474     font-size: 16px;
 475 }
 476
 477 .android-footer {
 478     background-color: #fafafa;
 479     position: relative;
 480 }
 481
 482 .android-footer a:hover {
 483     color: #8bc34a;
 484 }
 485
 486 .android-footer .mdl-mega-footer--top-section::after {
 487     border-bottom: none;
 488 }
 489
 490 .android-footer .mdl-mega-footer--middle-section::after {
 491     border-bottom: none;
 492 }
 493
 494 .android-footer .mdl-mega-footer--bottom-section {
 495     position: relative;
 496 }
 497
 498 .android-footer .mdl-mega-footer--bottom-section a {
 499     margin-right: 2em;
 500 }
 501
 502 .android-footer .mdl-mega-footer--right-section a .material-icons {
 503     position: relative;
 504     top: 6px;
 505 }
 506
 507 .android-link-menu:hover {
 508     cursor: pointer;
 509 }
 510
 511 /**** Mobile layout ****/
 512
 513 @media (max-width: 900px) {
 514     .android-navigation-container {
 515         display: none;
 516     }
 517
 518     .android-title {
 519         display: none !important;
 520     }
 521
 522     .android-mobile-title {
 523         display: block !important;
 524         position: absolute;
 525         left: calc(50% - 70px);
 526         top: 12px;
 527         transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 528     }
 529
 530     /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
 531      consecutive "+" operators in some cases. Therefore, we need to use both
 532      here to cover all the bases. */
 533     .android.android-search-box.is-focused ~ .android-mobile-title,
 534     .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
 535         opacity: 0;
 536     }
 537
 538     .android-more-button {
 539         display: none;
 540     }
 541
 542     .android-search-box.is-focused {
 543         width: calc(100% - 48px);
 544     }
 545
 546     .android-search-box .mdl-textfield__expandable-holder {
 547         width: 100%;
 548     }
 549
 550     .android-be-together-section {
 551         height: 350px;
 552     }
 553
 554     .android-slogan {
 555         font-size: 26px;
 556         margin: 0 16px;
 557         padding-top: 24px;
 558     }
 559
 560     .android-sub-slogan {
 561         font-size: 16px;
 562         margin: 0 16px;
 563         padding-top: 8px;
 564     }
 565
 566     .android-create-character {
 567         padding-top: 200px;
 568         font-size: 16px;
 569     }
 570
 571     .android-create-character img {
 572         height: 12px;
 573     }
 574
 575     .android-fab {
 576         display: none;
 577     }
 578
 579     .android-wear-band-text {
 580         margin-left: 0;
 581         padding: 16px;
 582     }
 583
 584     .android-footer .mdl-mega-footer--bottom-section {
 585         display: none;
 586     }
 587 }
 588
 589 input[type=text]:readonly {
 590     background: #e0dada;
 591 }