custom.css•8.92 kB
/**
* 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 Open Color for standard color definitions. */
@import 'open-color/open-color.css';
/* You can override the default Infima variables here. */
:root {
--ifm-font-size-base: 16px;
--ifm-code-font-size: 95%;
--ifm-font-family-base: 'Poppins', sans-serif;
--ifm-color-primary: var(--oc-grape-8);
--ifm-color-primary-dark: var(--oc-grape-8);
--ifm-color-primary-darker: var(--oc-grape-9);
--ifm-color-primary-darkest: var(--oc-grape-9);
--ifm-color-primary-light: var(--oc-grape-2);
--ifm-color-primary-lighter: var(--oc-grape-1);
--ifm-color-primary-lightest: var(--oc-grape-0);
--ifm-heading-color: #000000;
--code-block-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px;
--img-block-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px;
--docusaurus-highlighted-code-line-bg: rgba(72, 77, 91, 0.2);
--ifm-footer-background-color: black;
--ifm-footer-color: var(--oc-gray-5);
--ifm-footer-title-color: var(--oc-gray-5);
--ifm-footer-link-color: var(--oc-gray-0);
--ifm-footer-link-hover-color: var(--oc-grape-6);
--ifm-footer-padding-vertical: 80px;
}
[data-theme='dark'] {
--ifm-color-primary: var(--oc-grape-5);
--ifm-color-primary-dark: #6646af;
--ifm-color-primary-darker: #402c6e;
--ifm-color-primary-darkest: #19122c;
--ifm-color-primary-light: #ba9ff9;
--ifm-color-primary-lighter: #ba9ff9;
--ifm-color-primary-lightest: #ded1fc;
--ifm-heading-color: #ffffff;
--code-block-shadow: rgba(0, 0, 0, 0.35) 0 2px 4px;
--img-block-shadow: rgba(0, 0, 0, 0.95) 0 2px 4px;
--docusaurus-highlighted-code-line-bg: rgb(100 100 100);
}
.alert--primary {
--ifm-alert-background-color: var(--oc-gray-0);
--ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
--ifm-alert-foreground-color: var(--oc-gray-8);
--ifm-alert-border-color: var(--oc-gray-5);
}
[data-theme='dark'] .alert--primary {
--ifm-alert-background-color: var(--oc-gray-8);
--ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
--ifm-alert-foreground-color: var(--oc-gray-1);
--ifm-alert-border-color: var(--oc-gray-5);
}
.alert--secondary {
--ifm-alert-background-color: var(--oc-gray-0);
--ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
--ifm-alert-foreground-color: var(--oc-gray-8);
--ifm-alert-border-color: var(--oc-gray-5);
}
[data-theme='dark'] .alert--secondary {
--ifm-alert-background-color: var(--oc-gray-8);
--ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
--ifm-alert-foreground-color: var(--oc-gray-1);
--ifm-alert-border-color: var(--oc-gray-5);
}
.alert--success {
--ifm-alert-background-color: var(--oc-green-0);
--ifm-alert-background-color-highlight: rgba(55, 178, 77, 0.15);
--ifm-alert-foreground-color: var(--oc-green-9);
--ifm-alert-border-color: var(--oc-green-5);
}
[data-theme='dark'] .alert--success {
--ifm-alert-background-color: var(--oc-green-9);
--ifm-alert-background-color-highlight: rgba(55, 178, 77, 0.15);
--ifm-alert-foreground-color: var(--oc-green-0);
--ifm-alert-border-color: var(--oc-green-5);
}
.alert--info {
--ifm-alert-background-color: var(--oc-blue-0);
--ifm-alert-background-color-highlight: rgba(28, 126, 214, 0.15);
--ifm-alert-foreground-color: var(--oc-blue-9);
--ifm-alert-border-color: var(--oc-blue-5);
}
[data-theme='dark'] .alert--info {
--ifm-alert-background-color: var(--oc-blue-9);
--ifm-alert-background-color-highlight: rgba(28, 126, 214, 0.15);
--ifm-alert-foreground-color: var(--oc-blue-0);
--ifm-alert-border-color: var(--oc-blue-5);
}
.alert--warning {
--ifm-alert-background-color: var(--oc-orange-0);
--ifm-alert-background-color-highlight: rgba(247, 103, 7, 0.15);
--ifm-alert-foreground-color: var(--oc-orange-9);
--ifm-alert-border-color: var(--oc-orange-5);
}
[data-theme='dark'] .alert--warning {
--ifm-alert-background-color: var(--oc-orange-9);
--ifm-alert-background-color-highlight: rgba(247, 103, 7, 0.15);
--ifm-alert-foreground-color: var(--oc-orange-0);
--ifm-alert-border-color: var(--oc-orange-5);
}
.alert--danger {
--ifm-alert-background-color: var(--oc-red-0);
--ifm-alert-background-color-highlight: rgba(240, 62, 62, 0.15);
--ifm-alert-foreground-color: var(--oc-red-9);
--ifm-alert-border-color: var(--oc-red-5);
}
[data-theme='dark'] .alert--danger {
--ifm-alert-background-color: var(--oc-red-9);
--ifm-alert-background-color-highlight: rgba(240, 62, 62, 0.15);
--ifm-alert-foreground-color: var(--oc-red-0);
--ifm-alert-border-color: var(--oc-red-5);
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
src: url(/fonts/Poppins-Italic-400.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 200;
src: url(/fonts/Poppins-200.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url(/fonts/Poppins-300.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(/fonts/Poppins-400.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: url(/fonts/Poppins-500.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: url(/fonts/Poppins-600.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url(/fonts/Poppins-700.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
src: url(/fonts/Poppins-800.woff2) format('woff2');
}
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
.page .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: transparent;
box-shadow: none;
transition: all 200ms ease;
}
.page .navbar.onScroll {
background-color: var(--ifm-navbar-background-color);
box-shadow: var(--ifm-navbar-shadow);
}
.page .navbar .DocSearch-Button {
background-color: transparent !important;
transition: all 200ms ease;
}
.page .navbar.onScroll .DocSearch-Button {
background-color: var(--docsearch-searchbox-background) !important;
}
h1 {
font-style: normal;
font-weight: 600;
font-size: 44px;
line-height: 130%;
}
/* Styles for the grid of cards on the docs homepage*/
.homepage-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
margin-block-end: 4rem;
}
@media screen and (max-width: 966px) {
.homepage-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.prism-code {
box-shadow: var(--code-block-shadow);
}
div.theme-code-block {
margin-bottom: 5ch;
}
/* Sidebar styles */
.theme-doc-sidebar-item-category-level-1 {
font-size: 1rem;
}
.theme-doc-sidebar-item-link-level-1 {
font-size: 1rem;
}
.theme-doc-sidebar-item-category-level-2 {
font-size: 0.9rem;
}
.theme-doc-sidebar-item-link-level-2 {
font-size: 0.9rem;
}
.theme-doc-sidebar-item-link-level-3 {
font-size: 0.8rem;
}
.sidebar-title {
font-size: 1rem;
margin-top: 1rem;
}
li.theme-doc-sidebar-item-link:not(:first-child) strong {
margin-top: 0.75rem;
}
/* Footer styles */
.medplum-soc-compliance-image {
width: 45px;
height: 45px;
margin: 4px;
}
.medplum-hipaa-compliance-image {
width: 100px;
height: 45px;
margin: 4px;
}
/* Mobile Styles */
/** In mobile view, reduce the padding */
@media screen and (max-width: 996px) {
.markdown h1:first-child {
font-size: var(--ifm-h1-font-size);
}
.docs-wrapper {
--ifm-font-size-base: 14px;
--ifm-table-cell-padding: 0.25rem;
}
.docs-wrapper td {
--ifm-table-font-size: 12px;
font-size: var(--ifm-table-font-size);
}
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
word-break: normal;
}
/* Use Docusaurus font in Algolia search box */
span.DocSearch-Button-Placeholder {
font-family: var(--ifm-font-family-base);
font-size: 11pt;
}
/* Hide Algolia keyboard shortcut icon */
span.DocSearch-Button-Keys {
display: none;
}
.responsive-iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
}
.responsive-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}