mirror of
https://github.com/rancher/rancher-docs.git
synced 2026-04-15 10:55:37 +00:00
492 lines
10 KiB
CSS
492 lines
10 KiB
CSS
/* stylelint-disable docusaurus/copyright-header */
|
|
/**
|
|
* Any CSS included here will be global. The classic template
|
|
* bundles Infima by default. Infima is a CSS framework designed to
|
|
* work well for content-centric websites.
|
|
*/
|
|
|
|
/* Import fonts. */
|
|
|
|
/* poppins */
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local(''),
|
|
url('../fonts/poppins/poppins-regular.woff') format('woff2'), /* Super Modern Browsers */
|
|
url('../fonts/poppins/poppins-regular.woff2') format('woff'), /* Modern Browsers */
|
|
}
|
|
|
|
/* Roboto-Mono */
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local(''),
|
|
url('../fonts/roboto-mono/roboto-mono-regular.woff') format('woff2'), /* Super Modern Browsers */
|
|
url('../fonts/roboto-mono/roboto-mono-regular.woff2') format('woff'), /* Modern Browsers */
|
|
}
|
|
|
|
/* Lato */
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local(''),
|
|
url('../fonts/lato/lato-regular.woff') format('woff2'), /* Super Modern Browsers */
|
|
url('../fonts/lato/lato-regular.woff2') format('woff'), /* Modern Browsers */
|
|
}
|
|
|
|
@tailwind base;
|
|
|
|
@layer base {
|
|
:root {
|
|
--docs-color-primary-100: 26 144 255;
|
|
--docs-color-primary-200: 33 96 253;
|
|
|
|
--docs-color-secondary-700: 232 232 236;
|
|
--docs-color-secondary-800: 245 245 247;
|
|
--docs-color-secondary-900: 251 251 251;
|
|
--docs-color-secondary-1000: 255 255 255;
|
|
|
|
--docs-color-text-400: 71 71 71;
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--docs-color-text-400: 153 153 153;
|
|
|
|
--docs-color-secondary-700: 71 71 71;
|
|
--docs-color-secondary-800: 38 38 38;
|
|
--docs-color-secondary-900: 25 25 25;
|
|
--docs-color-secondary-1000: 0 0 0;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased;
|
|
}
|
|
|
|
table td:nth-child(1) {
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
td {
|
|
width: auto;
|
|
overflow-wrap: anywhere; /* For browser compatibility */
|
|
}
|
|
|
|
.homepage a {
|
|
--ifm-link-hover-color: currentColor;
|
|
}
|
|
|
|
.no-underline-links {
|
|
--ifm-link-hover-decoration: none;
|
|
}
|
|
|
|
a {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
@apply font-jakarta;
|
|
}
|
|
|
|
.homepage section,
|
|
.homepage section * {
|
|
@apply box-border;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--ifm-color-primary-lightest: #80bbe2;
|
|
--ifm-color-primary-lighter: #5eaadb;
|
|
--ifm-color-primary-light: #53a4d8;
|
|
--ifm-color-primary: #3d98d3;
|
|
--ifm-color-primary-dark: #2d8bc8;
|
|
--ifm-color-primary-darker: #2b83bc;
|
|
--ifm-color-primary-darkest: #236c9b;
|
|
--ifm-code-font-size: 95%;
|
|
|
|
--docs-color-border: #dadde1;
|
|
|
|
--docs-color-text: #000000;
|
|
--docs-color-text-100: #646464;
|
|
|
|
--docs-color-background: #ffffff;
|
|
--docs-color-background-100: #f8f8f8;
|
|
--docs-color-background-200: #efefef;
|
|
--docs-color-background-300: #dcdcdc;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#theme-main h1 {
|
|
font-size: 50px !important;
|
|
line-height: 3rem !important;
|
|
font-weight: 700
|
|
}
|
|
#theme-main .header-docs {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Lato', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
code {
|
|
font-family: 'Roboto Mono', monospace;
|
|
}
|
|
|
|
dd {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
dl p {
|
|
font-size: .9rem;
|
|
font-weight: lighter;
|
|
margin-inline-start: 40px; /*This is intended to match the margin spacing for the dd element*/
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
hr {
|
|
background-image: -webkit-linear-gradient(left,#f3f3f3,#adadb1,#f3f3f3);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.navbar__brand {
|
|
height: 40px;
|
|
}
|
|
|
|
.btn.navbar__github {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
color: #212529;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background-color: initial;
|
|
border: 2px solid transparent;
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.66;
|
|
border-radius: 3px;
|
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
}
|
|
|
|
a.btn.navbar__github {
|
|
border: 2px solid transparent;
|
|
padding: 8px 20px 7px 47px;
|
|
font-size: 1rem;
|
|
line-height: 1.66;
|
|
font-weight: 400;
|
|
position: relative;
|
|
}
|
|
|
|
a.btn.navbar__github {
|
|
font-family: poppins,sans-serif;
|
|
text-decoration: none;
|
|
align-items: center;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.btn-secondary.navbar__github:hover {
|
|
color: #fff;
|
|
background-color: #273230;
|
|
border-color: #222a29;
|
|
}
|
|
|
|
a.btn.navbar__github::before {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20.5 20%22%3E%3Cdefs/%3E%3Cpath fill=%22%23fff%22 d=%22M10.3.0C4.6.0.0 4.6.0 10.3c0 4.4 2.8 8.3 7 9.7.5.1.7-.2.7-.5v-1.9c-2.6.5-3.2-.6-3.4-1.2-.2-.6-.6-1.1-1-1.5-.4-.2-.9-.7.0-.7.7.1 1.3.5 1.6 1 .6 1.1 1.9 1.4 3 .8.0-.5.3-1 .7-1.4-2.3-.3-4.7-1.1-4.7-5.1.0-1 .4-2 1.1-2.8-.5-.6-.5-1.6-.1-2.5.0.0.9-.3 2.8 1.1 1.7-.5 3.4-.5 5.1.0 2-1.3 2.8-1.1 2.8-1.1.4.9.5 1.9.2 2.8.7.7 1.1 1.7 1.1 2.8.0 3.9-2.4 4.8-4.7 5.1.5.5.7 1.2.7 1.9v2.8c0 .3.2.6.7.5 5.4-1.8 8.3-7.6 6.5-13C18.6 2.8 14.7.0 10.3.0z%22/%3E%3C/svg%3E");
|
|
height: 20px;
|
|
width: 20px;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 10px;
|
|
}
|
|
|
|
|
|
.icon-github.navbar__github {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.btn-secondary.navbar__github {
|
|
color: #fff!important;
|
|
border-color: #384745;
|
|
background-color: #384745;
|
|
box-shadow: inset 0 1px rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
|
|
}
|
|
|
|
.docusaurus-highlight-code-line {
|
|
background-color: rgb(72, 77, 91);
|
|
display: block;
|
|
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
padding: 0 var(--ifm-pre-padding);
|
|
}
|
|
|
|
/* Navbar "More from SUSE" items. Thanks to Nunix. https://github.com/rancher/elemental-docs/pull/235 */
|
|
|
|
.navbar__icon {
|
|
font-family: poppins,sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.navbar__icon:before {
|
|
content: "";
|
|
display: inline-flex;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-right: 4px;
|
|
background-color: var(--ifm-navbar-link-color);
|
|
}
|
|
|
|
.navbar__rancher:before {
|
|
mask: url(/static/img/header/icon-rancher.png) no-repeat 100% 100%;
|
|
mask-size: contain;
|
|
width: 35px;
|
|
background-color: #2e68e9;
|
|
}
|
|
|
|
.navbar__elemental:before {
|
|
mask: url(/static/img/header/icon-elemental.png) no-repeat 100% 100%;
|
|
mask-size: cover;
|
|
width: 35px;
|
|
height: 22px;
|
|
padding-bottom: 7px;
|
|
background-color: #7100d4;
|
|
}
|
|
|
|
.navbar__fleet:before {
|
|
mask: url(/static/img/header/icon-fleet.png) no-repeat 100% 100%;
|
|
mask-size: cover;
|
|
width: 35px;
|
|
height: 22px;
|
|
padding-bottom: 7px;
|
|
background-color: #00b056;
|
|
}
|
|
|
|
.navbar__harvester:before {
|
|
mask: url(/static/img/header/icon-harvester.png) no-repeat 100% 100%;
|
|
mask-size: cover;
|
|
width: 35px;
|
|
height: 22px;
|
|
padding-bottom: 7px;
|
|
background-color: #00a580;
|
|
}
|
|
|
|
.navbar__rancher__desktop:before {
|
|
mask: url(/static/img/header/icon-rancher-desktop.png) no-repeat 100% 100%;
|
|
mask-size: cover;
|
|
width: 35px;
|
|
height: 22px;
|
|
padding-bottom: 7px;
|
|
background-color: #0081be;
|
|
}
|
|
|
|
.navbar__suse:before {
|
|
mask: url(/static/img/header/icon-suse.png) no-repeat 100% 100%;
|
|
mask-size: cover;
|
|
width: 35px;
|
|
height: 13px;
|
|
padding-bottom: 7px;
|
|
background-color: #30ba78;
|
|
}
|
|
|
|
|
|
/* These styles are authored by bravemaster619 https://dev.to/bravemaster619/simplest-way-to-embed-a-youtube-video-in-your-react-app-3bk2 */
|
|
.video-responsive {
|
|
overflow: hidden;
|
|
padding-bottom: 56.25%;
|
|
position: relative;
|
|
height: 0;
|
|
}
|
|
|
|
.video-responsive iframe {
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
img[src$='#terminal'] {
|
|
display: block;
|
|
max-width: 720px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.pad {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.center {
|
|
width: 100%;
|
|
max-width: 1080px;
|
|
margin: 1rem auto;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.homepage-content {
|
|
padding-bottom: 6rem;
|
|
}
|
|
|
|
#hero {
|
|
padding: 2rem 0 1.5rem 0;
|
|
margin-bottom: 4rem;
|
|
border-bottom: 1px solid var(--docs-color-border);
|
|
}
|
|
|
|
#hero h2 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
#hero p {
|
|
color: var(--docs-color-text-100);
|
|
}
|
|
|
|
.section-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.two-cols .section-content {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.has-sub-sections > h3 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.has-sub-sections > .section-content {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
.has-sub-sections > .section-content > .homepage-section {
|
|
margin-bottom: 1rem;
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.homepage-section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.homepage-section h3 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-description {
|
|
color: var(--docs-color-text-100);
|
|
margin: 0rem 0 1.25rem 0;
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
.has-sub-sections > .section-content .section-description {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.homepage-card {
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 0.75rem;
|
|
text-decoration: none;
|
|
color: var(--docs-color-text);
|
|
|
|
--ifm-link-hover-decoration: none;
|
|
--ifm-link-hover-color: inherit;
|
|
cursor: pointer;
|
|
@apply flex flex-row items-center;
|
|
@apply border-secondary-800 bg-secondary-900 hover:bg-secondary-800;
|
|
border-width: 1px;
|
|
transition-property: background-color, color;
|
|
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.homepage-card.row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.icon svg {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.homepage-card .icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
@apply mx-1;
|
|
/* background-color: #262626;
|
|
border-radius: 8px; */
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.card-content .title {
|
|
font-size: 16px;
|
|
letter-spacing: -0.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-content .description {
|
|
font-size: 14px;
|
|
color: var(--docs-color-text-100);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.homepage-card details {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--docs-color-text-100) !important;
|
|
background: var(--docs-color-background-100) !important;
|
|
border: solid 2px var(--docs-color-code-background) !important;
|
|
}
|
|
|
|
details code {
|
|
background-color: var(--docs-color-background);
|
|
}
|
|
|
|
details p {
|
|
font-weight: 300;
|
|
}
|
|
|
|
@media screen and (max-width: 1160px) {
|
|
/* Hide icons when header UI breaks */
|
|
.pseudo-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.section-content {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
.two-cols .section-content {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.cardTitle_node_modules-\@docusaurus-theme-classic-lib-theme-DocCard-styles-module {
|
|
font-size: 0.88rem !important;
|
|
}
|
|
|
|
.cardDescription_node_modules-\@docusaurus-theme-classic-lib-theme-DocCard-styles-module {
|
|
display: none;
|
|
} |