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 ============LICENSE_END============================================ */
  21
  22 input[type=text],
  23 input[type=password],
  24 input[type=email],
  25 input[type=url],
  26 input[type=time],
  27 input[type=date],
  28 input[type=datetime-local],
  29 input[type=tel],
  30 input[type=number],
  31 input[type=search-md],
  32 input[type=search],
  33 textarea.md-textarea {
  34     font-family: 'Roboto';
  35     background-color: transparent;
  36     border: 1px solid;
  37     border-bottom: 1px solid;
  38     border-color: grey;
  39     border-radius: 5px;
  40     outline: none;
  41     height: 37px;
  42     width: 100%;
  43     font-size: 1rem;
  44     box-shadow: none;
  45     box-sizing: inherit;
  46     padding: 8px;
  47 }
  48
  49 select.form-control {
  50     border-radius: 5px;
  51     border: 1px solid;
  52     padding-left: 10px;
  53     border-color: grey;
  54     font-family: 'Roboto';
  55 }
  56
  57 input[type=text]:disabled {
  58     background: #e0dada;
  59     font-family: 'Roboto';
  60 }
  61
  62 body {
  63     background: white;
  64     font-family: 'Roboto';
  65 }
  66
  67 body {
  68     margin: 0;
  69 }
  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 .undoMarker {
 151     position: absolute;
 152     background: #272822;
 153     z-index: 30
 154 }
 155
 156 .noKeyedMarker {
 157     position: absolute;
 158     background: orange;
 159     z-index: 20
 160 }
 161
 162 .ace_editor .ace_marker-layer .ace_selection {
 163     background:blue !important;
 164 }
 165
 166 .defaultMarker {
 167     position: absolute;
 168     background: lightgreen;
 169     z-index: 20;
 170 }
 171 .ace_cursor{
 172     background-color: transparent;
 173
 174 }
 175 .ace-monokai{
 176     color: greenyellow;
 177
 178 }
 179
 180 .android-header {
 181     overflow: visible;
 182     background-color: white;
 183 }
 184
 185 .android-header .material-icons {
 186     color: #767777 !important;
 187 }
 188
 189 .android-header .mdl-layout__drawer-button {
 190     background: transparent;
 191     color: #767777;
 192 }
 193
 194 .android-header .mdl-navigation__link {
 195     color: #757575;
 196     font-weight: 700;
 197     font-size: 14px;
 198 }
 199
 200 .android-navigation-container {
 201     /* Simple hack to make the overflow happen to the left instead... */
 202     direction: rtl;
 203     -webkit-order: 1;
 204     -ms-flex-order: 1;
 205     order: 1;
 206     width: 500px;
 207     transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 208 }
 209
 210 .android-navigation {
 211     /* ... and now make sure the content is actually LTR */
 212     direction: ltr;
 213     -webkit-justify-content: flex-end;
 214     -ms-flex-pack: end;
 215     justify-content: flex-end;
 216     width: 800px;
 217 }
 218
 219 .android-search-box.is-focused+.android-navigation-container {
 220     opacity: 0;
 221     width: 100px;
 222 }
 223
 224 .android-navigation .mdl-navigation__link {
 225     display: inline-block;
 226     height: 60px;
 227     line-height: 68px;
 228     background-color: transparent !important;
 229     border-bottom: 4px solid transparent;
 230 }
 231
 232 .android-navigation .mdl-navigation__link:hover {
 233     border-bottom: 4px solid #6ab344;
 234 }
 235
 236 .android-search-box {
 237     -webkit-order: 2;
 238     -ms-flex-order: 2;
 239     order: 2;
 240     margin-left: 16px;
 241     margin-right: 16px;
 242 }
 243
 244 .android-more-button {
 245     -webkit-order: 3;
 246     -ms-flex-order: 3;
 247     order: 3;
 248 }
 249
 250 .android-drawer {
 251     border-right: none;
 252 }
 253
 254 .android-drawer-separator {
 255     height: 1px;
 256     background-color: #dcdcdc;
 257     margin: 8px 0;
 258 }
 259
 260 .android-drawer .mdl-navigation__link.mdl-navigation__link {
 261     font-size: 14px;
 262     color: #757575;
 263 }
 264
 265 .android-drawer span.mdl-navigation__link.mdl-navigation__link {
 266     color: #6ab344;
 267 }
 268
 269 .android-drawer .mdl-layout-title {
 270     position: relative;
 271     background: #6ab344;
 272     height: 160px;
 273 }
 274
 275 .android-drawer .android-logo-image {
 276     position: absolute;
 277     bottom: 16px;
 278 }
 279
 280 .logo-font {
 281     font-family: 'Roboto';
 282     line-height: 1;
 283     color: #767777;
 284     font-weight: 500;
 285 }
 286
 287 .android-slogan {
 288     font-size: 60px;
 289     padding-top: 160px;
 290 }
 291
 292 .android-sub-slogan {
 293     font-size: 21px;
 294     padding-top: 24px;
 295 }
 296
 297 .android-create-character {
 298     font-size: 21px;
 299     padding-top: 400px;
 300 }
 301
 302 .android-create-character a {
 303     text-decoration: none;
 304     color: #767777;
 305     font-weight: 300;
 306 }
 307
 308 .android-screen-section {
 309     position: relative;
 310     padding-top: 60px;
 311     padding-bottom: 80px;
 312 }
 313
 314 .android-screens {
 315     text-align: right;
 316     width: 100%;
 317     white-space: nowrap;
 318     overflow-x: auto;
 319 }
 320
 321 .android-screen {
 322     text-align: center;
 323 }
 324
 325 .android-screen .android-link {
 326     margin-top: 16px;
 327     display: block;
 328     z-index: 2;
 329 }
 330
 331 .android-image-link {
 332     text-decoration: none;
 333 }
 334
 335 .android-wear {
 336     display: inline-block;
 337     width: 160px;
 338     margin-right: 32px;
 339 }
 340
 341 .android-wear .android-screen-image {
 342     width: 40%;
 343     z-index: 1;
 344 }
 345
 346 .android-phone {
 347     display: inline-block;
 348     width: 64px;
 349     margin-right: 48px;
 350 }
 351
 352 .android-phone .android-screen-image {
 353     width: 100%;
 354     z-index: 1;
 355 }
 356
 357 .android-tablet {
 358     display: inline-block;
 359     width: 110px;
 360     margin-right: 64px;
 361 }
 362
 363 .android-tablet .android-screen-image {
 364     width: 100%;
 365     z-index: 1;
 366 }
 367
 368 .android-tablet .android-link {
 369     display: block;
 370     z-index: 2;
 371 }
 372
 373 .android-tv {
 374     display: inline-block;
 375     width: 300px;
 376     margin-right: 80px;
 377 }
 378
 379 .android-tv .android-screen-image {
 380     width: 100%;
 381     z-index: 1;
 382 }
 383
 384 .android-auto {
 385     display: inline-block;
 386     width: 300px;
 387     overflow: hidden;
 388 }
 389
 390 .android-auto .android-screen-image {
 391     display: block;
 392     height: 300px;
 393     z-index: 1;
 394 }
 395
 396 .android-wear-band-text p {
 397     padding-top: 8px;
 398 }
 399
 400 .android-link {
 401     text-decoration: none;
 402     color: #6ab344 !important;
 403 }
 404
 405 .android-link:hover {
 406     color: #6ab344 !important;
 407 }
 408
 409 .android-link .material-icons {
 410     position: relative;
 411     top: -1px;
 412     vertical-align: middle;
 413 }
 414
 415 .android-alt-link {
 416     text-decoration: none;
 417     color: #64ffda !important;
 418     font-size: 16px;
 419 }
 420
 421 .android-alt-link:hover {
 422     color: #00bfa5 !important;
 423 }
 424
 425 .android-alt-link .material-icons {
 426     position: relative;
 427     top: 6px;
 428 }
 429
 430 .android-customized-section {
 431     text-align: center;
 432 }
 433
 434 .android-customized-section-text {
 435     max-width: 500px;
 436     margin-left: auto;
 437     margin-right: auto;
 438     padding: 80px 16px 0 16px;
 439 }
 440
 441 .android-customized-section-text p {
 442     padding-top: 16px;
 443 }
 444
 445 .android-more-section {
 446     padding: 80px 0;
 447     max-width: 1044px;
 448     margin-left: auto;
 449     margin-right: auto;
 450 }
 451
 452 .android-more-section .android-section-title {
 453     margin-left: 12px;
 454     padding-bottom: 24px;
 455 }
 456
 457 .android-card-container .mdl-card__media {
 458     overflow: hidden;
 459     background: transparent;
 460 }
 461
 462 .android-card-container .mdl-card__media img {
 463     width: 100%;
 464 }
 465
 466 .android-card-container .mdl-card__title {
 467     background: transparent;
 468     height: auto;
 469 }
 470
 471 .android-card-container .mdl-card__title-text {
 472     color: black;
 473     height: auto;
 474 }
 475
 476 .android-card-container .mdl-card__supporting-text {
 477     height: auto;
 478     color: black;
 479     padding-bottom: 56px;
 480 }
 481
 482 .android-card-container .mdl-card__actions {
 483     position: absolute;
 484     bottom: 0;
 485 }
 486
 487 .android-card-container .mdl-card__actions a {
 488     border-top: none;
 489     font-size: 16px;
 490 }
 491
 492 .android-footer {
 493     background-color: #fafafa;
 494     position: relative;
 495 }
 496
 497 .android-footer a:hover {
 498     color: #8bc34a;
 499 }
 500
 501 .android-footer .mdl-mega-footer--top-section::after {
 502     border-bottom: none;
 503 }
 504
 505 .android-footer .mdl-mega-footer--middle-section::after {
 506     border-bottom: none;
 507 }
 508
 509 .android-footer .mdl-mega-footer--bottom-section {
 510     position: relative;
 511 }
 512
 513 .android-footer .mdl-mega-footer--bottom-section a {
 514     margin-right: 2em;
 515 }
 516
 517 .android-footer .mdl-mega-footer--right-section a .material-icons {
 518     position: relative;
 519     top: 6px;
 520 }
 521
 522 .android-link-menu:hover {
 523     cursor: pointer;
 524 }
 525
 526
 527 /**** Mobile layout ****/
 528
 529 @media (max-width: 900px) {
 530     .android-navigation-container {
 531         display: none;
 532     }
 533     .android-title {
 534         display: none !important;
 535     }
 536     .android-mobile-title {
 537         display: block !important;
 538         position: absolute;
 539         left: calc(50% - 70px);
 540         top: 12px;
 541         transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 542     }
 543     /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
 544      consecutive "+" operators in some cases. Therefore, we need to use both
 545      here to cover all the bases. */
 546     .android.android-search-box.is-focused~.android-mobile-title,
 547     .android-search-box.is-focused+.android-navigation-container+.android-mobile-title {
 548         opacity: 0;
 549     }
 550     .android-more-button {
 551         display: none;
 552     }
 553     .android-search-box.is-focused {
 554         width: calc(100% - 48px);
 555     }
 556     .android-search-box .mdl-textfield__expandable-holder {
 557         width: 100%;
 558     }
 559     .android-be-together-section {
 560         height: 350px;
 561     }
 562     .android-slogan {
 563         font-size: 26px;
 564         margin: 0 16px;
 565         padding-top: 24px;
 566     }
 567     .android-sub-slogan {
 568         font-size: 16px;
 569         margin: 0 16px;
 570         padding-top: 8px;
 571     }
 572     .android-create-character {
 573         padding-top: 200px;
 574         font-size: 16px;
 575     }
 576     .android-create-character img {
 577         height: 12px;
 578     }
 579     .android-fab {
 580         display: none;
 581     }
 582     .android-wear-band-text {
 583         margin-left: 0;
 584         padding: 16px;
 585     }
 586     .android-footer .mdl-mega-footer--bottom-section {
 587         display: none;
 588     }
 589 }
 590
 591 input[type=text]:read-only {
 592     background: #d8d4d4;
 593 }
 594
 595 .nav-tabs .nav-item .nav-link {
 596     color: #000000;
 597 }
 598
 599 #versionLog .modal-dialog {
 600     width: 100%;
 601     max-width: 800px;
 602 }
 603
 604 /* Overriding Ng2-Bs3-Modal css */
 605 .modal-header {
 606     flex-direction: row-reverse;
 607 }
 608
 609 /* Overriding ng2-bootstrap-modal css ( Confirmation Modal ) */
 610 dialog-wrapper .modal {
 611     background-color: rgba(0, 0, 0, 0.288);
 612 }
 613
 614 dialog-wrapper .modal-dialog .modal-content {
 615     box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
 616 }