Warning, /eic.github.io/css/custom.css is written in an unsupported language. File is not indexed.
0001 /* ---------------------------- */
0002 :root {
0003 --site-navbar-gray: #343A40;
0004 }
0005
0006 /* ---------------------------- */
0007 .site-shell {
0008 width: 100%;
0009 max-width: 1400px;
0010 padding-right: 1.5rem;
0011 padding-left: 1.5rem;
0012 }
0013
0014 .site-navbar-inner {
0015 width: 100%;
0016 padding-right: 0;
0017 padding-left: 0;
0018 }
0019
0020 .portal-btn {
0021 background-color: var(--site-navbar-gray);
0022 border-color: var(--site-navbar-gray);
0023 color: white;
0024 font-size: 1.75rem;
0025 padding: 1.5rem 0;
0026 transition: background-color 0.2s ease;
0027 }
0028
0029 .portal-btn:hover,
0030 .portal-btn:focus {
0031 background-color: #c5c7c9;
0032 }
0033
0034 .useful-links {
0035 margin: 2.5rem 0;
0036 }
0037
0038 .useful-links-panel {
0039 padding: clamp(1.25rem, 2vw, 2rem);
0040 border: 1px solid rgba(52, 58, 64, 0.12);
0041 border-radius: 1.25rem;
0042 background: linear-gradient(135deg, #f8f9fa 0%, #eef2f4 100%);
0043 box-shadow: 0 1rem 2.5rem rgba(31, 45, 61, 0.06);
0044 }
0045
0046 .useful-links-grid {
0047 display: grid;
0048 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
0049 gap: 1rem;
0050 }
0051
0052 .useful-link-button {
0053 display: flex;
0054 align-items: center;
0055 gap: 0.9rem;
0056 min-height: 5rem;
0057 padding: 1rem 1.1rem;
0058 border: 1px solid rgba(52, 58, 64, 0.12);
0059 border-radius: 1rem;
0060 background: rgba(255, 255, 255, 0.92);
0061 box-shadow: 0 0.8rem 1.8rem rgba(31, 45, 61, 0.08);
0062 color: #212529;
0063 text-decoration: none;
0064 transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
0065 }
0066
0067 .useful-link-button:hover,
0068 .useful-link-button:focus {
0069 transform: translateY(-3px);
0070 border-color: rgba(52, 58, 64, 0.24);
0071 box-shadow: 0 1rem 2rem rgba(31, 45, 61, 0.14);
0072 color: #212529;
0073 text-decoration: none;
0074 }
0075
0076 .useful-link-badge {
0077 display: inline-flex;
0078 align-items: center;
0079 justify-content: center;
0080 flex-shrink: 0;
0081 width: 3rem;
0082 height: 3rem;
0083 border-radius: 0.85rem;
0084 font-size: 0.95rem;
0085 font-weight: 800;
0086 letter-spacing: 0.02em;
0087 }
0088
0089 .useful-link-badge--image {
0090 padding: 0.35rem;
0091 background: #fff;
0092 box-shadow: inset 0 0 0 1px rgba(52, 58, 64, 0.08);
0093 }
0094
0095 .useful-link-badge--wiki {
0096 background: #fff4e6;
0097 color: #c25100;
0098 }
0099
0100 .useful-link-badge--phonebook {
0101 background: #e6fcf5;
0102 color: #0f766e;
0103 }
0104
0105 .useful-link-logo {
0106 display: block;
0107 width: 100%;
0108 height: 100%;
0109 object-fit: contain;
0110 }
0111
0112 .useful-link-text {
0113 display: flex;
0114 flex: 1;
0115 flex-direction: column;
0116 gap: 0.15rem;
0117 min-width: 0;
0118 }
0119
0120 .useful-link-label {
0121 color: #212529;
0122 font-size: 1rem;
0123 font-weight: 700;
0124 line-height: 1.2;
0125 }
0126
0127 .useful-link-meta {
0128 color: #6c757d;
0129 font-size: 0.9rem;
0130 line-height: 1.2;
0131 }
0132
0133 /* ---------------------------- */
0134 /* BLOCKQUOTES */
0135 blockquote {
0136 padding: .5em .5em .5em .75em;
0137 color: #000;
0138 background-color: #EEEEEE;
0139 /* background: #FFEBCD; color: #8B4513; */
0140 word-wrap: normal;
0141 border-left: 0.5em solid #AAA;
0142 border-right: 0.5em solid #AAA;
0143 border-radius: 6px;
0144 }
0145
0146 /*
0147 blockquote::before {
0148 display: block;
0149 height: 0;
0150 content: "“";
0151 margin-left: -.95em;
0152 font: italic 400%/1 Open Serif,Georgia,"Times New Roman", serif;
0153 color: #999;
0154 }
0155 */
0156
0157 /* for nested paragraphs in block quotes */
0158 blockquote p {
0159 display: inline;
0160 }
0161
0162 /* OTHER STUFF */
0163 .bd-placeholder-img {
0164 font-size: 1.125rem;
0165 text-anchor: middle;
0166 -webkit-user-select: none;
0167 -moz-user-select: none;
0168 -ms-user-select: none;
0169 user-select: none;
0170 }
0171
0172
0173 /* ---------------------------- */
0174 /* TABLE */
0175 th {
0176 text-align: center;
0177 color: #fff;
0178 background-color: var(--site-navbar-gray);
0179 }
0180
0181 td {
0182 text-align: left;
0183 vertical-align: top;
0184 padding: 8px;
0185 }
0186
0187 tr:nth-child(even) {
0188 background-color: #f2f2f2;
0189 }
0190
0191 /* ---------------------------- */
0192 .site-navbar {
0193 background-color: var(--site-navbar-gray);
0194 }
0195
0196 .site-navbar .dropdown-menu {
0197 border-color: var(--site-navbar-gray);
0198 min-width: 16rem;
0199 max-width: min(90vw, 28rem);
0200 }
0201
0202 .site-navbar .dropdown-item {
0203 white-space: normal;
0204 }
0205
0206 .site-nav-section-label {
0207 color: #fff;
0208 background-color: var(--site-navbar-gray);
0209 }
0210
0211 .site-navbar-actions {
0212 flex-shrink: 0;
0213 }
0214
0215 .site-github-link {
0216 display: inline-flex;
0217 align-items: center;
0218 justify-content: center;
0219 padding-top: 0;
0220 padding-bottom: 0;
0221 line-height: 1;
0222 color: #fff;
0223 }
0224
0225 .site-github-link:hover,
0226 .site-github-link:focus {
0227 color: rgba(255, 255, 255, 0.82);
0228 }
0229
0230 .site-github-icon {
0231 display: block;
0232 width: 2rem;
0233 height: 2rem;
0234 fill: currentColor;
0235 }
0236
0237 .site-search-nav {
0238 position: relative;
0239 width: min(22rem, 42vw);
0240 }
0241
0242 .site-search-input-wrap {
0243 position: relative;
0244 }
0245
0246 .site-search-input {
0247 min-height: 2.5rem;
0248 padding-right: 5.5rem;
0249 border: 1px solid rgba(255, 255, 255, 0.25);
0250 border-radius: 999px;
0251 background-color: #fff;
0252 color: #212529;
0253 box-shadow: none;
0254 }
0255
0256 .site-search-input::placeholder {
0257 color: #6c757d;
0258 }
0259
0260 .site-search-input:focus,
0261 .site-search-input:not(:placeholder-shown) {
0262 background-color: #fff;
0263 color: #212529;
0264 caret-color: #212529;
0265 border-color: rgba(255, 255, 255, 0.55);
0266 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);
0267 }
0268
0269 .site-search-input:focus::placeholder,
0270 .site-search-input:not(:placeholder-shown)::placeholder {
0271 color: #6c757d;
0272 }
0273
0274 .site-search-input:focus + .site-search-shortcut,
0275 .site-search-input:not(:placeholder-shown) + .site-search-shortcut {
0276 border-color: rgba(33, 37, 41, 0.14);
0277 background-color: #f8f9fa;
0278 color: #6c757d;
0279 }
0280
0281 .site-search-shortcut {
0282 position: absolute;
0283 top: 50%;
0284 right: 0.75rem;
0285 transform: translateY(-50%);
0286 padding: 0.15rem 0.4rem;
0287 border: 1px solid rgba(33, 37, 41, 0.14);
0288 border-radius: 999px;
0289 background-color: #f8f9fa;
0290 color: #6c757d;
0291 font-size: 0.75rem;
0292 line-height: 1;
0293 pointer-events: none;
0294 }
0295
0296 .site-search-panel {
0297 position: absolute;
0298 top: calc(100% + 0.5rem);
0299 right: 0;
0300 width: min(36rem, calc(100vw - 2rem));
0301 background-color: #fff;
0302 border: 1px solid rgba(33, 37, 41, 0.12);
0303 border-radius: 0.85rem;
0304 box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
0305 overflow: hidden;
0306 z-index: 1080;
0307 }
0308
0309 .site-search-status {
0310 padding: 0.85rem 1rem;
0311 color: #6c757d;
0312 background-color: #fff;
0313 }
0314
0315 .site-search-results {
0316 max-height: min(60vh, 30rem);
0317 overflow-y: auto;
0318 background-color: #fff;
0319 }
0320
0321 .site-search-result {
0322 padding-top: 1rem;
0323 padding-bottom: 1rem;
0324 color: inherit;
0325 background-color: #fff;
0326 }
0327
0328 .site-search-result-title {
0329 margin: 0 0 0.35rem;
0330 color: #212529;
0331 font-size: 1.05rem;
0332 }
0333
0334 .site-search-result-preview {
0335 color: #495057;
0336 }
0337
0338 .site-search-result-meta {
0339 display: flex;
0340 flex-wrap: wrap;
0341 gap: 0.75rem;
0342 color: #6c757d;
0343 font-size: 0.875rem;
0344 }
0345
0346 .site-search-result-collection {
0347 text-transform: capitalize;
0348 font-weight: 600;
0349 }
0350
0351 .site-search-result-url {
0352 word-break: break-word;
0353 }
0354
0355 .site-search-result mark {
0356 padding: 0 0.15em;
0357 background-color: #fff3bf;
0358 }
0359
0360 .mermaid {
0361 overflow-x: auto;
0362 padding: 1rem 0;
0363 }
0364
0365 .getstarted-stack {
0366 margin-top: 1.75rem;
0367 }
0368
0369 .getstarted-stack-intro,
0370 .getstarted-stack-caption {
0371 color: #495057;
0372 }
0373
0374 .getstarted-stack-intro {
0375 margin-bottom: 0.75rem;
0376 }
0377
0378 .getstarted-stack-scroll {
0379 overflow-x: auto;
0380 padding-bottom: 0.25rem;
0381 }
0382
0383 .getstarted-stack-frame {
0384 position: relative;
0385 width: 100%;
0386 min-width: 980px;
0387 aspect-ratio: 453.543 / 232;
0388 margin: 0;
0389 }
0390
0391 .getstarted-stack-image {
0392 display: block;
0393 width: 100%;
0394 height: 100%;
0395 }
0396
0397 .getstarted-stack-hotspot {
0398 position: absolute;
0399 display: block;
0400 border-radius: 0.45rem;
0401 transition: background-color 0.18s ease, box-shadow 0.18s ease;
0402 }
0403
0404 .getstarted-stack-hotspot:hover,
0405 .getstarted-stack-hotspot:focus {
0406 background-color: rgba(255, 255, 255, 0.08);
0407 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(52, 58, 64, 0.2);
0408 outline: none;
0409 }
0410
0411 .getstarted-stack-hotspot:focus-visible {
0412 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 3px rgba(13, 110, 253, 0.35);
0413 }
0414
0415 .getstarted-stack-caption {
0416 margin-top: 0.75rem;
0417 font-size: 0.95rem;
0418 }
0419
0420 /* ---------------------------- */
0421 @media (min-width: 768px) {
0422 .bd-placeholder-img-lg {
0423 font-size: 3.5rem;
0424 }
0425 }
0426
0427 @media (max-width: 1199.98px) {
0428 .site-shell {
0429 padding-right: 1rem;
0430 padding-left: 1rem;
0431 }
0432
0433 .site-navbar-inner {
0434 padding-right: 0.5rem;
0435 padding-left: 0.5rem;
0436 }
0437 }
0438
0439 @media (max-width: 991.98px) {
0440 .site-navbar .navbar-collapse {
0441 padding-top: 0.75rem;
0442 }
0443
0444 .site-navbar .navbar-nav {
0445 width: 100%;
0446 }
0447
0448 .site-navbar .nav-item {
0449 width: 100%;
0450 }
0451
0452 .site-navbar .dropdown-menu {
0453 position: static;
0454 float: none;
0455 width: 100%;
0456 margin-top: 0.25rem;
0457 transform: none !important;
0458 }
0459
0460 .site-navbar-actions {
0461 gap: 0.5rem;
0462 }
0463
0464 .site-search-nav {
0465 width: min(15rem, calc(100vw - 9rem));
0466 }
0467
0468 /* Anchor the dropdown to the viewport on mobile — the search nav itself
0469 * is a narrow column on the right, so absolute positioning relative to it
0470 * pushes the panel's left edge off-screen. */
0471 .site-search-panel {
0472 position: fixed;
0473 top: 3.75rem;
0474 left: 0.5rem;
0475 right: 0.5rem;
0476 width: auto;
0477 max-height: min(calc(100vh - 4.5rem), 40rem);
0478 }
0479 }
0480
0481 @media (max-width: 575.98px) {
0482 .site-search-nav {
0483 width: min(11rem, calc(100vw - 7.75rem));
0484 }
0485
0486 .site-search-shortcut {
0487 display: none;
0488 }
0489 }
0490
0491 .dropdown-submenu {
0492 position: relative;
0493 }
0494
0495 .dropdown-submenu>.dropdown-menu {
0496 top: 0;
0497 left: 100%;
0498 margin-top: -6px;
0499 margin-left: -1px;
0500 -webkit-border-radius: 0 6px 6px 6px;
0501 -moz-border-radius: 0 6px 6px;
0502 border-radius: 0 6px 6px 6px;
0503 }
0504
0505 .dropdown-submenu:hover>.dropdown-menu {
0506 display: block;
0507 }
0508
0509 .dropdown-submenu>a:after {
0510 display: block;
0511 content: " ";
0512 float: right;
0513 width: 0;
0514 height: 0;
0515 border-color: transparent;
0516 border-style: solid;
0517 border-width: 5px 0 5px 5px;
0518 border-left-color: #ccc;
0519 margin-top: 5px;
0520 margin-right: -10px;
0521 }
0522
0523 .dropdown-submenu:hover>a:after {
0524 border-left-color: #fff;
0525 }
0526
0527 .dropdown-submenu.pull-left {
0528 float: none;
0529 }
0530
0531 .dropdown-submenu.pull-left>.dropdown-menu {
0532 left: -100%;
0533 margin-left: 10px;
0534 -webkit-border-radius: 6px 0 6px 6px;
0535 -moz-border-radius: 6px 0 6px 6px;
0536 border-radius: 6px 0 6px 6px;
0537 }
0538
0539 /* ---------------------------- */
0540 /* TUTORIALS */
0541 .tutorials-landing {
0542 margin-bottom: 2.5rem;
0543 }
0544
0545 .tutorials-hero {
0546 margin: 1.5rem 0 2rem;
0547 padding: clamp(1.25rem, 2vw, 2rem);
0548 border: 1px solid rgba(52, 58, 64, 0.12);
0549 border-radius: 1.25rem;
0550 background: linear-gradient(135deg, #f8f9fa 0%, #eef2f4 100%);
0551 }
0552
0553 .tutorials-eyebrow {
0554 margin: 0 0 0.5rem;
0555 color: #495057;
0556 font-size: 0.8rem;
0557 font-weight: 700;
0558 letter-spacing: 0.14em;
0559 text-transform: uppercase;
0560 }
0561
0562 .tutorials-hero-title {
0563 margin: 0 0 0.75rem;
0564 color: #212529;
0565 font-size: clamp(1.6rem, 3vw, 2.25rem);
0566 }
0567
0568 .tutorials-hero-copy {
0569 max-width: 52rem;
0570 margin: 0;
0571 color: #495057;
0572 font-size: 1.05rem;
0573 }
0574
0575 .tutorials-grid {
0576 display: grid;
0577 grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
0578 gap: 1.5rem;
0579 }
0580
0581 .tutorial-card {
0582 display: flex;
0583 flex-direction: column;
0584 height: 100%;
0585 overflow: hidden;
0586 border: 1px solid rgba(52, 58, 64, 0.12);
0587 border-radius: 1.25rem;
0588 background: #fff;
0589 box-shadow: 0 0.9rem 2.2rem rgba(31, 45, 61, 0.08);
0590 transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
0591 }
0592
0593 .tutorial-card:hover {
0594 transform: translateY(-4px);
0595 border-color: rgba(52, 58, 64, 0.22);
0596 box-shadow: 0 1.1rem 2.6rem rgba(31, 45, 61, 0.14);
0597 }
0598
0599 .tutorial-card-media {
0600 display: flex;
0601 align-items: center;
0602 justify-content: center;
0603 height: 13rem;
0604 padding: 1rem;
0605 border-bottom: 1px solid rgba(52, 58, 64, 0.08);
0606 background: radial-gradient(circle at top left, #ffffff 0%, #f1f3f5 58%, #e9ecef 100%);
0607 text-decoration: none;
0608 }
0609
0610 .tutorial-card-media img {
0611 max-width: 100%;
0612 max-height: 100%;
0613 width: auto;
0614 height: auto;
0615 border-radius: 0.8rem;
0616 box-shadow: 0 0.75rem 1.75rem rgba(31, 45, 61, 0.15);
0617 }
0618
0619 .tutorial-card-body {
0620 display: flex;
0621 flex: 1;
0622 flex-direction: column;
0623 gap: 0.9rem;
0624 padding: 1.25rem;
0625 }
0626
0627 .tutorial-card-title {
0628 margin: 0;
0629 color: #212529;
0630 font-size: 1.3rem;
0631 line-height: 1.3;
0632 }
0633
0634 .tutorial-card-title a {
0635 color: inherit;
0636 text-decoration: none;
0637 }
0638
0639 .tutorial-card-title a:hover,
0640 .tutorial-card-title a:focus {
0641 color: #b02a37;
0642 }
0643
0644 .tutorial-card-summary {
0645 flex: 1;
0646 margin: 0;
0647 color: #495057;
0648 }
0649
0650 .tutorial-card-links {
0651 margin-top: auto;
0652 padding-top: 0.15rem;
0653 }
0654
0655 .tutorial-open-link {
0656 display: inline-flex;
0657 align-items: center;
0658 justify-content: center;
0659 padding: 0.6rem 1rem;
0660 border-radius: 999px;
0661 background: #343a40;
0662 color: #fff;
0663 font-weight: 700;
0664 text-decoration: none;
0665 transition: background-color 0.18s ease;
0666 }
0667
0668 .tutorial-open-link:hover,
0669 .tutorial-open-link:focus {
0670 background: #212529;
0671 color: #fff;
0672 }
0673
0674 .tutorial-resource-list {
0675 display: flex;
0676 flex-wrap: wrap;
0677 gap: 0.75rem;
0678 padding-top: 0.15rem;
0679 }
0680
0681 .tutorial-resource-item {
0682 display: flex;
0683 flex-direction: column;
0684 gap: 0.35rem;
0685 }
0686
0687 .tutorial-resource-link {
0688 display: inline-flex;
0689 align-items: center;
0690 gap: 0.45rem;
0691 padding: 0.5rem 0.8rem;
0692 border: 1px solid transparent;
0693 border-radius: 999px;
0694 font-weight: 700;
0695 text-decoration: none;
0696 }
0697
0698 .tutorial-resource-link svg {
0699 width: 1rem;
0700 height: 1rem;
0701 fill: currentColor;
0702 flex-shrink: 0;
0703 }
0704
0705 .tutorial-resource-link--youtube {
0706 background: #fff5f5;
0707 border-color: rgba(220, 53, 69, 0.18);
0708 color: #b42318;
0709 }
0710
0711 .tutorial-resource-link--youtube:hover,
0712 .tutorial-resource-link--youtube:focus {
0713 background: #ffe3e3;
0714 color: #8f1d1d;
0715 }
0716
0717 .tutorial-resource-link--recording {
0718 background: #f1f3f5;
0719 border-color: rgba(73, 80, 87, 0.14);
0720 color: #343a40;
0721 }
0722
0723 .tutorial-resource-link--recording:hover,
0724 .tutorial-resource-link--recording:focus {
0725 background: #e9ecef;
0726 color: #212529;
0727 }
0728
0729 .tutorial-resource-link--link {
0730 background: #eef6ff;
0731 border-color: rgba(13, 110, 253, 0.18);
0732 color: #0b5ed7;
0733 }
0734
0735 .tutorial-resource-link--link:hover,
0736 .tutorial-resource-link--link:focus {
0737 background: #dceafe;
0738 color: #0a58ca;
0739 }
0740
0741 .tutorials-note {
0742 margin-top: 2rem;
0743 padding: 1rem 1.25rem;
0744 border-left: 0.35rem solid #343a40;
0745 border-radius: 0.75rem;
0746 background: #f8f9fa;
0747 }
0748
0749 .tutorials-note a {
0750 font-weight: 700;
0751 }
0752
0753 @media (max-width: 575.98px) {
0754 .tutorial-card-media {
0755 height: 11rem;
0756 }
0757
0758 .tutorial-card-body {
0759 padding: 1rem;
0760 }
0761
0762 .tutorials-hero-copy {
0763 font-size: 1rem;
0764 }
0765 }
