| .td-docs { |
| &.td-downloads { |
| .card-wrapper { |
| .btn { |
| font-size: 14px; |
| } |
| |
| .dropdown-menu { |
| min-width: 6rem; |
| width: auto; |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| |
| .dropdown-header { |
| color: #222; |
| font-size: 16px; |
| padding: 0.5rem 1.5rem 0; |
| |
| > span { |
| font-size: 12px; |
| color: #ccc; |
| } |
| } |
| } |
| |
| .container-full { |
| background: #F4F8FA; |
| margin-top: 2rem; |
| margin-bottom: 2rem; |
| padding-top: 1rem; |
| padding-bottom: 1rem; |
| |
| .images-wrapper { |
| .btn { |
| color: #1F1F20; |
| font-weight: 500; |
| } |
| } |
| |
| .card { |
| background-color: transparent; |
| } |
| } |
| |
| .container-archived { |
| padding: 0 1.25rem; |
| } |
| |
| .verify { |
| padding-left: 1.25rem; |
| padding-right: 1.25rem; |
| |
| h2 { |
| border-bottom: 0; |
| } |
| |
| .code-wrapper { |
| display: flex; |
| flex-wrap: wrap; |
| |
| > div { |
| width: 100%; |
| } |
| |
| } |
| } |
| } |
| |
| .SkyWalkingShowcase { |
| .dropdown-menu { |
| min-width: 10rem !important; |
| } |
| } |
| |
| #Ecosystem { |
| padding-bottom: 0.4rem; |
| } |
| |
| .icon-link { |
| margin-left: 8px; |
| } |
| |
| .sky-btn { |
| font-size: 14px; |
| padding: 5px 13px; |
| height: 30px; |
| line-height: 1; |
| } |
| |
| .link-type { |
| display: inline-block; |
| margin-top: 10px; |
| } |
| |
| .article-description { |
| max-width: 1000px; |
| margin: 0 auto; |
| text-align: center; |
| } |
| |
| .card-wrapper { |
| padding-bottom: 0; |
| padding-top: 1em; |
| |
| img:hover { |
| cursor: default; |
| } |
| |
| &:nth-of-type(1) { |
| padding-top: 1.5em; |
| } |
| |
| .item-wrapper { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-start; |
| } |
| |
| .card { |
| border: none; |
| border-right: 1px solid #DADDE0; |
| border-radius: 0; |
| } |
| |
| .item { |
| width: 33.33%; |
| margin: 0 0 24px; |
| |
| &:hover { |
| box-shadow: none; |
| } |
| |
| &.description-item { |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); |
| border-radius: 6px; |
| color: #fff; |
| background-color: #3987CD; |
| background-image: url("/images/project/heart.svg"); |
| background-repeat: no-repeat; |
| background-size: 24px 24px; |
| background-position: bottom 24px right 24px; |
| border: 0 !important; |
| |
| .card-body { |
| display: flex; |
| align-items: center; |
| } |
| |
| } |
| } |
| |
| .item.active { |
| position: relative; |
| box-shadow: 0px 0 8px #add5f3; |
| border: 1px solid #85beec !important; |
| border-radius: 3px; |
| left: 0px; |
| z-index: 1; |
| } |
| |
| .btn { |
| display: flex; |
| align-items: center; |
| background-color: #eee; |
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcfc), to(#eee)); |
| background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%); |
| background-repeat: no-repeat; |
| border: 1px solid #d5d5d5; |
| border-radius: 4px; |
| font-size: 16px; |
| height: 28px; |
| |
| &:hover { |
| text-decoration: none; |
| background-color: #ddd; |
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), to(#ddd)); |
| background-image: linear-gradient(to bottom, #eee 0, #ddd 100%); |
| border-color: #ccc; |
| } |
| |
| &.github-button { |
| color: #24292f; |
| font-size: 16px; |
| } |
| } |
| .icon-github { |
| font-size: 18px; |
| } |
| |
| .btn-group.show .dropdown-toggle { |
| box-shadow: none; |
| } |
| |
| .dropdown-toggle::after { |
| margin-bottom: -1px; |
| } |
| |
| .btn:not(:disabled):not(.disabled):active:focus, .btn.active:not(:disabled):not(.disabled):focus { |
| box-shadow: none; |
| } |
| |
| .btn:focus, .btn.focus { |
| outline: 0; |
| box-shadow: none; |
| } |
| |
| .card-body { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| padding-top: 0.6rem; |
| padding-bottom: 50px; |
| position: relative; |
| } |
| |
| .doc-box { |
| padding: 0 1.25rem; |
| display: flex; |
| width: 100%; |
| position: absolute; |
| bottom: 20px; |
| height: 30px; |
| left: 0; |
| justify-content: space-between; |
| |
| .gh-text { |
| font-size: 12px; |
| } |
| |
| .source-text { |
| background: #F8F9FA; |
| border-radius: 4px; |
| padding: 0 12px; |
| color: #909094; |
| line-height: 32px; |
| display: inline-block; |
| font-size: 14px; |
| } |
| } |
| |
| .dropdown-menu { |
| min-width: 6rem; |
| width: 100%; |
| max-height: 208px; |
| overflow-y: auto; |
| } |
| } |
| |
| .card-text { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| |
| .title-box { |
| display: flex; |
| align-items: center; |
| |
| &:hover a { |
| visibility: initial !important; |
| } |
| |
| .card-title { |
| margin: 0; |
| font-size: 18px; |
| font-weight: 600; |
| color: #000; |
| padding-top: 0; |
| line-height: 24px; |
| } |
| } |
| |
| .deco-title { |
| border-bottom: none; |
| padding: 1rem 1.25rem 0.5rem 1.25rem; |
| } |
| |
| .desc-text { |
| padding: 0.8rem 1.25rem; |
| margin-bottom: 0.3rem; |
| } |
| } |
| |
| @media (min-width: 1660px) { |
| .td-docs { |
| &.td-downloads { |
| .verify { |
| .code-wrapper { |
| > div { |
| width: 49% !important; |
| |
| &:first-child { |
| margin-right: 1% !important; |
| } |
| |
| &:last-child { |
| margin-left: 1% !important; |
| } |
| } |
| } |
| } |
| } |
| |
| .card-wrapper { |
| .item { |
| width: 25%; |
| margin-left: 0; |
| margin-right: 0; |
| |
| &:nth-of-type(4n) { |
| border-right: 0; |
| } |
| } |
| |
| &:last-child { |
| &:not(.images-wrapper) |
| .item { |
| border-right: 1px solid #DADDE0; |
| |
| &:nth-of-type(4n-1) { |
| border-right: 0; |
| } |
| } |
| |
| .description-item { |
| width: 49%; |
| margin-right: 1%; |
| } |
| } |
| } |
| } |
| } |
| |
| @media (min-width: 997px) and (max-width: 1439px) { |
| .td-docs { |
| .card-wrapper { |
| .item { |
| &:nth-of-type(3n) { |
| border-right: 0; |
| } |
| } |
| } |
| } |
| } |
| |
| @media (min-width: 769px) and (max-width: 996px) { |
| .td-docs { |
| .card-wrapper { |
| .item { |
| width: 48%; |
| |
| &:nth-of-type(2n) { |
| border-right: 0; |
| } |
| } |
| } |
| } |
| } |
| |
| @media (min-width: 769px) { |
| .td-docs { |
| .btn-wrapper { |
| position: sticky; |
| top: 54px; |
| z-index: 9; |
| } |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .td-docs { |
| &.td-downloads { |
| .verify { |
| padding-right: 0; |
| padding-left: 0; |
| } |
| } |
| |
| .card-wrapper { |
| .item { |
| width: 100%; |
| border-left: 1px solid #DADDE0; |
| } |
| } |
| } |
| } |