github.com/pachyderm/pachyderm@v1.13.4/doc/docs/1.11.x/assets/stylesheets/extra.css (about) 1 /* Float two columns side by side */ 2 .column { 3 float: left; 4 width: 33%; 5 padding: 0px 10px; 6 margin-bottom: 20px; 7 } 8 9 .column-2 { 10 float: left; 11 width: 50%; 12 padding: 0px 10px; 13 margin-bottom: 20px; 14 } 15 16 /* Remove extra left and right margins, due to padding in columns */ 17 .row { 18 margin: 0 -5px; 19 border-bottom: 20px; 20 } 21 22 23 /* Clear floats after the columns */ 24 .row:after { 25 content: ""; 26 display: table; 27 clear: both; 28 } 29 30 31 /* Responsive columns - one column layout (vertical) on small screens */ 32 @media screen and (max-width: 600px) { 33 .column { 34 width: 100%; 35 display: block; 36 margin-bottom: 20px; 37 } 38 } 39 40 @media screen and (max-width: 600px) { 41 .column-2 { 42 width: 100%; 43 display: block; 44 margin-bottom: 20px; 45 } 46 } 47 48 49 .card-square.mdl-card { 50 width: auto; 51 height: 260px; 52 font-family: 'Montserrat', sans-serif; 53 font-size: 16px; 54 line-height: 1.6; 55 } 56 .card-square > .mdl-card__title { 57 color: #fff; 58 background: #4B2A5C; 59 padding-left: 10px; 60 } 61 62 .mdl-card__actions { 63 line-height: 1.4; 64 } 65 66 .mdc-components { 67 box-sizing: border-box; 68 display: flex; 69 font-family: Roboto; 70 margin: 64px auto; 71 width: 1664px; 72 } 73 .mdc-components__section { 74 display: flex; 75 } 76 .mdc-components .flex { 77 flex: 1; 78 box-sizing: border-box; 79 } 80 .mdc-components p { 81 color: #616161; 82 font-size: 14px; 83 font-weight: bold; 84 } 85 86 .mdc-component > p { 87 color: #616161; 88 font-size: 14px; 89 font-weight: 400; 90 padding-bottom: 0; 91 } 92 .mdc-component__section { 93 align-items: center; 94 background-color: #EEEEEE; 95 display: flex; 96 flex-direction: column; 97 height: 400px; 98 position: relative; 99 overflow: hidden; 100 width: 400px; 101 } 102 .mdc-component__section--size-narrow { 103 height: 152px; 104 } 105 .mdc-component__section__content { 106 display: flex; 107 flex-direction: column; 108 height: 100%; 109 width: 100%; 110 padding: 30px; 111 } 112 .mdc-component__section__content__frame { 113 position: relative; 114 overflow: hidden; 115 height: 100%; 116 width: 100%; 117 } 118 .mdc-component__section--size-full { 119 height: 620px; 120 } 121 .mdc-component__containers { 122 align-items: flex-start; 123 display: flex; 124 height: 292px; 125 flex-direction: row; 126 } 127 .mdc-component__containers__primary__only p { 128 display: none; 129 } 130 .mdc-component__containers__primary, .mdc-component__containers__secondary { 131 display: flex; 132 align-items: center; 133 } 134 .mdc-component__containers__primary > p, .mdc-component__containers__secondary > p { 135 color: #616161; 136 font-size: 11px; 137 font-weight: bold; 138 } 139 .mdc-component__containers__primary__only { 140 margin-top: 40px; 141 } 142 .mdc-component__containers__secondary { 143 margin-left: 80px; 144 } 145 .mdc-component__containers__primary, .mdc-component__containers__secondary { 146 flex-direction: column; 147 } 148 .mdc-component__containers__primary > p, .mdc-component__containers__secondary > p { 149 margin: 25px 0 15px; 150 } 151 .mdc-component__containers__primary > *[class^="mdc-"]:not(:nth-child(2)), .mdc-component__containers__secondary > *[class^="mdc-"]:not(:nth-child(2)) { 152 margin-top: 40px; 153 } 154 .mdc-component__containers[dir-horizontal] { 155 align-items: center; 156 justify-content: center; 157 flex-direction: column; 158 } 159 .mdc-component__containers[dir-horizontal] .mdc-component__containers__primary__only { 160 margin-top: 0; 161 } 162 .mdc-component__containers[dir-horizontal] .mdc-component__containers__secondary { 163 margin-left: 0; 164 margin-top: 12px; 165 } 166 .mdc-component__containers[dir-horizontal] .mdc-component__containers__primary, .mdc-component__containers[dir-horizontal] .mdc-component__containers__secondary { 167 flex-direction: row; 168 } 169 .mdc-component__containers[dir-horizontal] .mdc-component__containers__primary > p, .mdc-component__containers[dir-horizontal] .mdc-component__containers__secondary > p { 170 margin: 0 16px 0 0; 171 text-align: right; 172 width: 60px; 173 } 174 .mdc-component__containers[dir-horizontal] .mdc-component__containers__primary > *[class^="mdc-"], .mdc-component__containers[dir-horizontal] .mdc-component__containers__secondary > *[class^="mdc-"] { 175 margin-top: 0; 176 margin-right: 60px; 177 } 178 *, :after, :before { 179 box-sizing: inherit; 180 } 181 @media all and (max-width: 1712px) { 182 .mdc-components { 183 margin: 32px auto; 184 width: 832px; 185 } 186 .mdc-components__section { 187 flex-direction: column; 188 } 189 .mdc-components__column { 190 margin-bottom: 64px; 191 } 192 } 193 @media all and (max-width: 880px) { 194 .mdc-components { 195 flex-direction: column; 196 width: 416px; 197 } 198 } 199 200 .mdc-component__buttons .mdc-component__containers__primary .mdc-button, 201 .mdc-component__buttons .mdc-component__containers__primary .mdc-fab { 202 background-color: #4B2A5C; 203 color: #ffffff; 204 } 205 206 .mdc-component__buttons .mdc-component__containers__primary .mdc-button--plain, 207 .mdc-component__buttons .mdc-component__containers__primary .mdc-fab--plain { 208 background-color: transparent; 209 color: #4B2A5C; 210 } 211 212 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button, 213 .mdc-component__buttons .mdc-component__containers__secondary .mdc-fab { 214 background-color: #CC6769; 215 color: #000000; 216 } 217 218 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button--plain, 219 .mdc-component__buttons .mdc-component__containers__secondary .mdc-fab--plain { 220 background-color: transparent; 221 color: #CC6769; 222 } 223 224 .mdc-component__buttons .mdc-component__containers__primary .mdc-button--raised.mdc-ripple-upgraded::before, 225 .mdc-component__buttons .mdc-component__containers__primary .mdc-button--raised.mdc-ripple-upgraded::after { 226 background-color: rgba(255, 255, 255, 0.06); 227 } 228 229 .mdc-component__buttons .mdc-component__containers__primary .mdc-button--plain.mdc-ripple-upgraded::before, 230 .mdc-component__buttons .mdc-component__containers__primary .mdc-button--plain.mdc-ripple-upgraded::after { 231 background-color: rgba(75, 42, 92, 0.06); 232 } 233 234 .mdc-component__buttons .mdc-component__containers__primary .mdc-fab.mdc-ripple-upgraded::after { 235 background-color: rgba(255, 255, 255, 0.16); 236 } 237 238 .mdc-component__buttons .mdc-component__containers__primary .mdc-fab--plain.mdc-ripple-upgraded::after { 239 background-color: rgba(75, 42, 92, 0.16); 240 } 241 242 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button--raised.mdc-ripple-upgraded::before, 243 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button--raised.mdc-ripple-upgraded::after { 244 background-color: rgba(0, 0, 0, 0.06); 245 } 246 247 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button--plain.mdc-ripple-upgraded::before, 248 .mdc-component__buttons .mdc-component__containers__secondary .mdc-button--plain.mdc-ripple-upgraded::after { 249 background-color: rgba(204, 103, 105, 0.06); 250 } 251 252 .mdc-component__buttons .mdc-component__containers__secondary .mdc-fab.mdc-ripple-upgraded::after { 253 background-color: rgba(0, 0, 0, 0.16); 254 } 255 256 .mdc-component__buttons .mdc-component__containers__secondary .mdc-fab--plain.mdc-ripple-upgraded::after { 257 background-color: rgba(204, 103, 105, 0.16); 258 } 259 260 .mdc-component__selection .mdc-component__containers__primary__only .mdc-snackbar { 261 transform: translate(-50%,-100%); 262 } 263 264 .mdc-component__selection .mdc-snackbar { 265 left: auto !important; 266 transform: translate(-28%,-164%); 267 position: absolute; 268 min-width: 240px; 269 margin-left: -16px; 270 width: 240px; 271 } 272 273 .mdc-component__selection .mdc-snackbar__secondary { 274 transform: translate(-28%,-40%); 275 } 276 277 .mdc-component__selection .mdc-snackbar__text, 278 .mdc-component__selection .mdc-snackbar__action-button { 279 opacity: 1; 280 font-size: 12px; 281 } 282 283 .mdc-component__switches .mdc-component__containers__primary .mdc-checkbox__native-control:checked:not(:disabled) ~ .mdc-checkbox__background, 284 .mdc-component__switches .mdc-component__containers__primary .mdc-checkbox__native-control:indeterminate:not(:disabled) ~ .mdc-checkbox__background, 285 .mdc-component__switches .mdc-component__containers__primary .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle { 286 background-color: #4B2A5C; 287 border-color: #4B2A5C; 288 } 289 290 .mdc-component__switches .mdc-component__containers__primary .mdc-switch__native-control:checked~.mdc-switch__background::before, 291 .mdc-component__switches .mdc-component__containers__primary .mdc-switch__native-control:checked~.mdc-switch__background .mdc-switch__knob::before, 292 .mdc-component__switches .mdc-component__containers__primary .mdc-switch__native-control:checked~.mdc-switch__background .mdc-switch__knob { 293 background-color: #4B2A5C; 294 } 295 296 .mdc-component__switches .mdc-component__containers__primary .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle { 297 border-color: #4B2A5C; 298 } 299 300 .mdc-component__switches .mdc-component__containers__primary .mdc-checkbox__background::before, 301 .mdc-component__switches .mdc-component__containers__primary .mdc-radio__background::before { 302 background-color: #4B2A5C; 303 } 304 305 .mdc-component__switches .mdc-component__containers__secondary .mdc-checkbox__native-control:checked:not(:disabled) ~ .mdc-checkbox__background, 306 .mdc-component__switches .mdc-component__containers__secondary .mdc-checkbox__native-control:indeterminate:not(:disabled) ~ .mdc-checkbox__background, 307 .mdc-component__switches .mdc-component__containers__secondary .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle { 308 background-color: #CC6769; 309 border-color: #CC6769; 310 } 311 312 .mdc-component__switches .mdc-component__containers__secondary .mdc-switch__native-control:checked~.mdc-switch__background::before, 313 .mdc-component__switches .mdc-component__containers__secondary .mdc-switch__native-control:checked~.mdc-switch__background .mdc-switch__knob::before, 314 .mdc-component__switches .mdc-component__containers__secondary .mdc-switch__native-control:checked~.mdc-switch__background .mdc-switch__knob { 315 background-color: #CC6769; 316 } 317 318 .mdc-component__switches .mdc-component__containers__secondary .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle { 319 border-color: #CC6769; 320 } 321 322 .mdc-component__switches .mdc-component__containers__secondary .mdc-checkbox__background::before, 323 .mdc-component__switches .mdc-component__containers__secondary .mdc-radio__background::before { 324 background-color: #CC6769; 325 } 326 327 .mdc-component__switches .mdc-component__containers__primary .mdc-checkbox.mdc-ripple-upgraded--unbounded::before, 328 .mdc-component__switches .mdc-component__containers__primary .mdc-checkbox.mdc-ripple-upgraded--unbounded::after, 329 .mdc-component__switches .mdc-component__containers__primary .mdc-radio.mdc-ripple-upgraded--unbounded::before, 330 .mdc-component__switches .mdc-component__containers__primary .mdc-radio.mdc-ripple-upgraded--unbounded::after { 331 background-color: rgba(75, 42, 92, 0.14); 332 } 333 334 .mdc-component__switches .mdc-component__containers__secondary .mdc-checkbox.mdc-ripple-upgraded--unbounded::before, 335 .mdc-component__switches .mdc-component__containers__secondary .mdc-checkbox.mdc-ripple-upgraded--unbounded::after, 336 .mdc-component__switches .mdc-component__containers__secondary .mdc-radio.mdc-ripple-upgraded--unbounded::before, 337 .mdc-component__switches .mdc-component__containers__secondary .mdc-radio.mdc-ripple-upgraded--unbounded::after { 338 background-color: rgba(204, 103, 105, 0.14); 339 } 340 341 .mdc-component__cards .mdc-card { 342 background-color: #ffffff; 343 height: 316px; 344 width: 262px; 345 } 346 347 .mdc-component__cards .mdc-card__title, 348 .mdc-component__cards .mdc-card__subtitle { 349 font-size: 11px; 350 line-height: 17px; 351 } 352 353 .mdc-component__cards .mdc-card__subtitle { 354 color: #707070; 355 } 356 357 .mdc-component__cards .mdc-card__header { 358 align-items: center; 359 display: flex; 360 height: 40px; 361 padding: 0 16px 20px; 362 } 363 364 .mdc-component__cards .demo-card__avatar { 365 background: #bdbdbd; 366 height: 40px; 367 width: 40px; 368 margin-right: 12px; 369 border-radius: 50%; 370 } 371 372 .mdc-component__cards .mdc-card__supporting-text { 373 font-size: 10px; 374 } 375 376 .mdc-component__cards .demo-card--with-avatar .mdc-card__title, 377 .mdc-component__cards .demo-card--with-avatar .mdc-card__subtitle { 378 margin-left: 56px; 379 } 380 381 .mdc-component__cards .mdc-card__actions { 382 display: flex; 383 justify-content: flex-end; 384 padding: 0 16px 16px 16px; 385 } 386 387 .mdc-component__cards .mdc-card__media { 388 height: 140px; 389 overflow: hidden; 390 padding: 0 391 } 392 393 .mdc-component__cards .mdc-card__media .material-image { 394 top: 64px; 395 position: relative; 396 } 397 398 .mdc-component__cards .mdc--theme-primary { 399 background-color: #4B2A5C; 400 color: #ffffff; 401 } 402 403 .mdc-component__cards .mdc--theme-secondary { 404 background-color: #CC6769; 405 color: #000000; 406 } 407 408 .mdc-component__cards .material-image .material-image__background { 409 fill: #210232; 410 } 411 412 .mdc-component__cards .material-image .material-image--shape-circle, 413 .mdc-component__cards .material-image .material-image--shape-triangle { 414 fill: #4B2A5C; 415 } 416 417 .mdc-component__cards .material-image .material-image--shape-intersection { 418 fill: #210232; 419 } 420 421 .mdc-component__cards .mdc-button--raised.mdc--theme-primary.mdc-ripple-upgraded::after { 422 background-color: rgba(255, 255, 255, 0.06); 423 } 424 425 .mdc-component__cards .mdc-button--raised.mdc--theme-secondary.mdc-ripple-upgraded::after { 426 background-color: rgba(0, 0, 0, 0.06); 427 } 428 429 .mdc-component__menu .mdc-toolbar { 430 background-color: #CC6769; 431 z-index: 1; 432 } 433 434 .mdc-component__menu .mdc-toolbar { 435 height: 56px; 436 padding: 16px; 437 } 438 439 .mdc-component__menu .mdc-permanent-drawer { 440 border-right: none; 441 left: 0; 442 position: absolute; 443 top: 0; 444 z-index: 3; 445 } 446 447 .mdc-component__menu .mdc-backdrop { 448 background-color: rgba(0, 0, 0, .50); 449 height: 100%; 450 width: 100%; 451 position: absolute; 452 z-index: 2; 453 top: 0; 454 left: 0; 455 } 456 457 .mdc-component__menu .nav-header { 458 height: 140px; 459 position: relative; 460 overflow: hidden; 461 } 462 463 .mdc-component__menu .nav-header .material-image { 464 position: relative; 465 top: -50px; 466 } 467 468 .mdc-component__menu .mdc-permanent-drawer { 469 box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); 470 } 471 472 .mdc-component__menu .mdc-list-item { 473 font-weight: 400; 474 } 475 476 .mdc-component__menu .mdc-list-item.mdc-ripple-upgraded { 477 left: 0; 478 } 479 480 .mdc-component__menu .mdc-list-item.mdc-ripple-upgraded::before, 481 .mdc-component__menu .mdc-list-item.mdc-ripple-upgraded::after { 482 background-color: rgba(75, 42, 92, 0.06); 483 } 484 485 .mdc-component__menu .mdc-permanent-drawer .mdc-permanent-drawer--selected::before, 486 .mdc-component__menu .mdc-permanent-drawer .mdc-list-item:active::before { 487 background-color: #4B2A5C; 488 opacity: .16; 489 } 490 491 .mdc-component__menu .mdc-permanent-drawer--selected.mdc-list-item .mdc-list-item__start-detail, 492 .mdc-component__menu .mdc-permanent-drawer .mdc-permanent-drawer--selected { 493 color: inherit; 494 } 495 496 .mdc-component__menu .material-image__background { 497 fill: #210232; 498 } 499 500 .mdc-component__menu .material-image--shape-circle, 501 .mdc-component__menu .material-image--shape-triangle { 502 fill: #4B2A5C; 503 } 504 505 .mdc-component__menu .material-image--shape-intersection { 506 fill: #210232; 507 } 508 509 .mdc-component__textfield .mdc-component__containers { 510 margin-top: 40px; 511 } 512 513 .mdc-component__textfield .mdc-component__containers__secondary { 514 padding: 17px 0; 515 } 516 517 .mdc-component__textfield .mdc-component__containers p { 518 padding-bottom: 20px; 519 } 520 521 .mdc-component__textfield .mdc-textfield { 522 margin-right: 14px !important; 523 } 524 525 .mdc-component__textfield .mdc-textfield__input { 526 width: 264px; 527 } 528 529 .mdc-component__textfield .mdc-textfield__label { 530 bottom: 12px; 531 } 532 533 .mdc-component__textfield .mdc-textfield--theme-primary .mdc-textfield__label { 534 color: #4B2A5C; 535 } 536 537 .mdc-component__textfield .mdc-textfield--theme-primary .mdc-textfield:not(.mdc-textfield--upgraded) .mdc-textfield__input:focus { 538 border-color: #4B2A5C; 539 } 540 541 .mdc-component__textfield .mdc-textfield--theme-secondary .mdc-textfield__label { 542 color: #CC6769; 543 } 544 545 .mdc-component__textfield .mdc-textfield--theme-secondary .mdc-textfield:not(.mdc-textfield--upgraded) .mdc-textfield__input:focus { 546 border-color: #CC6769; 547 } 548 549 .mdc-component__toolbar .app-bar { 550 background-color: #210232; 551 display: block; 552 height: 20px; 553 width: 100%; 554 } 555 556 .mdc-component__toolbar .mdc-toolbar { 557 height: 56px; 558 padding: 16px; 559 flex-direction: row; 560 align-items: center; 561 } 562 563 .mdc-component__toolbar .mdc-toolbar__section { 564 align-items: center; 565 } 566 567 .mdc-component__toolbar .mdc-toolbar__title { 568 padding-left: 8px; 569 } 570 571 .mdc-component__toolbar .material-icons { 572 color: #ffffff; 573 } 574 575 .mdc-component__toolbar .material-image { 576 position: relative; 577 top: -64px; 578 } 579 580 .mdc-component__toolbar main { 581 background-color: white; 582 height: calc(100% - 48px); 583 } 584 585 .mdc-component__toolbar .cover-image__frame { 586 display: block; 587 height: 220px; 588 position: relative; 589 width: 100%; 590 } 591 592 .mdc-component__toolbar .cover-image { 593 display: block; 594 height: 100%; 595 width: 100%; 596 overflow: hidden; 597 } 598 599 .mdc-component__toolbar .mdc-fab { 600 position: absolute; 601 bottom: -25px; 602 right: 28px; 603 } 604 605 .mdc-component__toolbar .content { 606 font-size: 13px; 607 line-height: 20px; 608 padding: 50px 35px; 609 } 610 611 .mdc-component__toolbar .mdc-component__section__content__frame::before { 612 bottom: 0; 613 content: ""; 614 background-image: url(//storage.googleapis.com/demos-in-spec/images/android-bottom.png); 615 background-repeat: no-repeat; 616 height: 48px; 617 position: absolute; 618 width: 100%; 619 z-index: 9999999; 620 } 621 622 .mdc-component__toolbar .mdc--theme-primary { 623 background-color: #4B2A5C; 624 color: #ffffff; 625 } 626 627 .mdc-component__toolbar .mdc--theme-secondary { 628 background-color: #CC6769; 629 color: #000000; 630 } 631 632 .mdc-component__toolbar .material-image .material-image__background { 633 fill: #97393e; 634 } 635 636 .mdc-component__toolbar .material-image .material-image--shape-circle, 637 .mdc-component__toolbar .material-image .material-image--shape-triangle { 638 fill: #ff9797; 639 } 640 641 .mdc-component__toolbar .material-image .material-image--shape-intersection { 642 fill: #97393e; 643 } 644 645 .mdc-component__toolbar .mdc-icon-toggle::before, 646 .mdc-component__toolbar .mdc-icon-toggle::after { 647 background-color: rgba(255, 255, 255, 0.06); 648 } 649 650 .mdc-component__toolbar .mdc-fab.mdc--theme-primary.mdc-ripple-upgraded::after { 651 background-color: rgba(255, 255, 255, 0.16); 652 } 653 654 .mdc-component__toolbar .mdc-fab.mdc--theme-secondary.mdc-ripple-upgraded::after { 655 background-color: rgba(0, 0, 0, 0.16); 656 } 657 658 659 details { 660 display: block; 661 } 662 663 details[open] > summary::before { 664 content: "\25BC"; 665 } 666 667 details summary { 668 display: block; 669 cursor: pointer; 670 } 671 672 details summary:focus { 673 outline: none; 674 } 675 676 details summary::before { 677 content: "\25B6"; 678 padding-right: 0.5em; 679 } 680 681 details summary::-webkit-details-marker { 682 display: none; 683 } 684 685 /* Attach the "no-details" class to details tags 686 in browsers that do not support them to get 687 open/show functionality. */ 688 details.no-details:not([open]) > * { 689 display: none; 690 } 691 692 details.no-details:not([open]) summary { 693 display: block; 694 }