infima
Version:
A UI framework for content-centric websites.
2,053 lines (1,991 loc) • 46.1 kB
CSS
* {
box-sizing: border-box;
}
html {
background-color: #18191a;
box-sizing: border-box;
color: #f5f6f7;
line-height: 1.65;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
text-rendering: optimizelegibility;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
word-wrap: break-word;
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 1140px;
padding-left: 1rem;
padding-right: 1rem;
width: 100%
}
.container.container--fluid {
max-width: inherit;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: calc(1rem * -1);
margin-right: calc(1rem * -1)
}
.row.row--no-gutters {
margin-left: 0;
margin-right: 0
}
.row.row--no-gutters > .col {
padding-left: 0;
padding-right: 0;
}
.row.row--align-top {
align-items: flex-start;
}
.row.row--align-bottom {
align-items: flex-end;
}
.row.row--align-center {
align-items: center;
}
.row.row--align-stretch {
align-items: stretch;
}
.row.row--align-baseline {
align-items: baseline;
}
.row .col {
display: block;
flex: 1 0;
margin-left: 0;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem;
width: 100%
}
.row .col[class*='col--'] {
flex: undefined;
max-width: undefined;
}
@media (max-width: 996px) {
.row .col.col.col {
flex-basis: 100%;
margin-left: 0;
max-width: 100%;
}
@media (max-width: 996px) {
.row .col.col.col {
max-width: 100%;
}
}
@media (max-width: 996px) {
.row .col.col.col {
flex-basis: 100%;
}
}
}
.row .col.col--1 {
flex: 0 0 calc(1 / 12 * 100%);
max-width: calc(1 / 12 * 100%);
}
.row .col.col--offset-1 {
margin-left: calc(1 / 12 * 100%);
}
.row .col.col--2 {
flex: 0 0 calc(2 / 12 * 100%);
max-width: calc(2 / 12 * 100%);
}
.row .col.col--offset-2 {
margin-left: calc(2 / 12 * 100%);
}
.row .col.col--3 {
flex: 0 0 calc(3 / 12 * 100%);
max-width: calc(3 / 12 * 100%);
}
.row .col.col--offset-3 {
margin-left: calc(3 / 12 * 100%);
}
.row .col.col--4 {
flex: 0 0 calc(4 / 12 * 100%);
max-width: calc(4 / 12 * 100%);
}
.row .col.col--offset-4 {
margin-left: calc(4 / 12 * 100%);
}
.row .col.col--5 {
flex: 0 0 calc(5 / 12 * 100%);
max-width: calc(5 / 12 * 100%);
}
.row .col.col--offset-5 {
margin-left: calc(5 / 12 * 100%);
}
.row .col.col--6 {
flex: 0 0 calc(6 / 12 * 100%);
max-width: calc(6 / 12 * 100%);
}
.row .col.col--offset-6 {
margin-left: calc(6 / 12 * 100%);
}
.row .col.col--7 {
flex: 0 0 calc(7 / 12 * 100%);
max-width: calc(7 / 12 * 100%);
}
.row .col.col--offset-7 {
margin-left: calc(7 / 12 * 100%);
}
.row .col.col--8 {
flex: 0 0 calc(8 / 12 * 100%);
max-width: calc(8 / 12 * 100%);
}
.row .col.col--offset-8 {
margin-left: calc(8 / 12 * 100%);
}
.row .col.col--9 {
flex: 0 0 calc(9 / 12 * 100%);
max-width: calc(9 / 12 * 100%);
}
.row .col.col--offset-9 {
margin-left: calc(9 / 12 * 100%);
}
.row .col.col--10 {
flex: 0 0 calc(10 / 12 * 100%);
max-width: calc(10 / 12 * 100%);
}
.row .col.col--offset-10 {
margin-left: calc(10 / 12 * 100%);
}
.row .col.col--11 {
flex: 0 0 calc(11 / 12 * 100%);
max-width: calc(11 / 12 * 100%);
}
.row .col.col--offset-11 {
margin-left: calc(11 / 12 * 100%);
}
.row .col.col--12 {
flex: 0 0 calc(12 / 12 * 100%);
max-width: calc(12 / 12 * 100%);
}
.row .col.col--offset-12 {
margin-left: calc(12 / 12 * 100%);
}
.margin--none {
margin: 0 ;
}
.margin-top--none {
margin-top: 0 ;
}
.margin-left--none {
margin-left: 0 ;
}
.margin-bottom--none {
margin-bottom: 0 ;
}
.margin-right--none {
margin-right: 0 ;
}
.margin-vert--none {
margin-bottom: 0 ;
margin-top: 0 ;
}
.margin-horiz--none {
margin-left: 0 ;
margin-right: 0 ;
}
.margin--xs {
margin: 0.25rem ;
}
.margin-top--xs {
margin-top: 0.25rem ;
}
.margin-left--xs {
margin-left: 0.25rem ;
}
.margin-bottom--xs {
margin-bottom: 0.25rem ;
}
.margin-right--xs {
margin-right: 0.25rem ;
}
.margin-vert--xs {
margin-bottom: 0.25rem ;
margin-top: 0.25rem ;
}
.margin-horiz--xs {
margin-left: 0.25rem ;
margin-right: 0.25rem ;
}
.margin--sm {
margin: 0.5rem ;
}
.margin-top--sm {
margin-top: 0.5rem ;
}
.margin-left--sm {
margin-left: 0.5rem ;
}
.margin-bottom--sm {
margin-bottom: 0.5rem ;
}
.margin-right--sm {
margin-right: 0.5rem ;
}
.margin-vert--sm {
margin-bottom: 0.5rem ;
margin-top: 0.5rem ;
}
.margin-horiz--sm {
margin-left: 0.5rem ;
margin-right: 0.5rem ;
}
.margin--md {
margin: 1rem ;
}
.margin-top--md {
margin-top: 1rem ;
}
.margin-left--md {
margin-left: 1rem ;
}
.margin-bottom--md {
margin-bottom: 1rem ;
}
.margin-right--md {
margin-right: 1rem ;
}
.margin-vert--md {
margin-bottom: 1rem ;
margin-top: 1rem ;
}
.margin-horiz--md {
margin-left: 1rem ;
margin-right: 1rem ;
}
.margin--lg {
margin: 2rem ;
}
.margin-top--lg {
margin-top: 2rem ;
}
.margin-left--lg {
margin-left: 2rem ;
}
.margin-bottom--lg {
margin-bottom: 2rem ;
}
.margin-right--lg {
margin-right: 2rem ;
}
.margin-vert--lg {
margin-bottom: 2rem ;
margin-top: 2rem ;
}
.margin-horiz--lg {
margin-left: 2rem ;
margin-right: 2rem ;
}
.margin--xl {
margin: 5rem ;
}
.margin-top--xl {
margin-top: 5rem ;
}
.margin-left--xl {
margin-left: 5rem ;
}
.margin-bottom--xl {
margin-bottom: 5rem ;
}
.margin-right--xl {
margin-right: 5rem ;
}
.margin-vert--xl {
margin-bottom: 5rem ;
margin-top: 5rem ;
}
.margin-horiz--xl {
margin-left: 5rem ;
margin-right: 5rem ;
}
.padding--none {
padding: 0 ;
}
.padding-top--none {
padding-top: 0 ;
}
.padding-left--none {
padding-left: 0 ;
}
.padding-bottom--none {
padding-bottom: 0 ;
}
.padding-right--none {
padding-right: 0 ;
}
.padding-vert--none {
padding-bottom: 0 ;
padding-top: 0 ;
}
.padding-horiz--none {
padding-left: 0 ;
padding-right: 0 ;
}
.padding--xs {
padding: 0.25rem ;
}
.padding-top--xs {
padding-top: 0.25rem ;
}
.padding-left--xs {
padding-left: 0.25rem ;
}
.padding-bottom--xs {
padding-bottom: 0.25rem ;
}
.padding-right--xs {
padding-right: 0.25rem ;
}
.padding-vert--xs {
padding-bottom: 0.25rem ;
padding-top: 0.25rem ;
}
.padding-horiz--xs {
padding-left: 0.25rem ;
padding-right: 0.25rem ;
}
.padding--sm {
padding: 0.5rem ;
}
.padding-top--sm {
padding-top: 0.5rem ;
}
.padding-left--sm {
padding-left: 0.5rem ;
}
.padding-bottom--sm {
padding-bottom: 0.5rem ;
}
.padding-right--sm {
padding-right: 0.5rem ;
}
.padding-vert--sm {
padding-bottom: 0.5rem ;
padding-top: 0.5rem ;
}
.padding-horiz--sm {
padding-left: 0.5rem ;
padding-right: 0.5rem ;
}
.padding--md {
padding: 1rem ;
}
.padding-top--md {
padding-top: 1rem ;
}
.padding-left--md {
padding-left: 1rem ;
}
.padding-bottom--md {
padding-bottom: 1rem ;
}
.padding-right--md {
padding-right: 1rem ;
}
.padding-vert--md {
padding-bottom: 1rem ;
padding-top: 1rem ;
}
.padding-horiz--md {
padding-left: 1rem ;
padding-right: 1rem ;
}
.padding--lg {
padding: 2rem ;
}
.padding-top--lg {
padding-top: 2rem ;
}
.padding-left--lg {
padding-left: 2rem ;
}
.padding-bottom--lg {
padding-bottom: 2rem ;
}
.padding-right--lg {
padding-right: 2rem ;
}
.padding-vert--lg {
padding-bottom: 2rem ;
padding-top: 2rem ;
}
.padding-horiz--lg {
padding-left: 2rem ;
padding-right: 2rem ;
}
.padding--xl {
padding: 5rem ;
}
.padding-top--xl {
padding-top: 5rem ;
}
.padding-left--xl {
padding-left: 5rem ;
}
.padding-bottom--xl {
padding-bottom: 5rem ;
}
.padding-right--xl {
padding-right: 5rem ;
}
.padding-vert--xl {
padding-bottom: 5rem ;
padding-top: 5rem ;
}
.padding-horiz--xl {
padding-left: 5rem ;
padding-right: 5rem ;
}
code {
background-color: #1c1e21;
border-radius: 0.4rem;
color: #f5f6f7;
font-family: SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
font-size: 90%;
margin: 0;
padding: 0.2rem 0.4rem;
}
pre {
background-color: #1c1e21;
border-radius: 0.4rem;
color: inherit;
font-family: SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
font-size: 90%;
line-height: 1.45;
margin-bottom: 1rem;
margin-top: 0;
overflow: auto;
padding: 1rem;
word-wrap: normal
}
pre code {
background-color: transparent;
border: 0;
display: inline;
font-size: 100%;
line-height: inherit;
margin: 0;
max-width: auto;
overflow: visible;
padding: 0;
white-space: pre;
word-break: normal;
word-wrap: normal;
}
a code {
color: inherit;
}
h1 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h2 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h3 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h4 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h5 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h6 {
color: inherit;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 0;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.875rem;
}
h6 {
font-size: 0.85rem;
}
img {
border-style: none;
box-sizing: content-box;
max-width: 100%;
}
img[align='right'] {
padding-left: undefined;
}
img[align='left'] {
padding-right: undefined;
}
.markdown:before {
content: '';
display: table;
}
.markdown:after {
clear: both;
content: '';
display: table;
}
.markdown > *:first-child {
margin-top: 0 ;
}
.markdown > *:last-child {
margin-bottom: 0 ;
}
.markdown > h1 {
margin-bottom: calc(
1.25 * calc(1.25 * 1rem)
);
margin-top: calc(3 * calc(1.25 * 1rem));
}
.markdown > h2 {
margin-bottom: calc(
1 * calc(1.25 * 1rem)
);
margin-top: calc(2 * calc(1.25 * 1rem));
}
.markdown > h3 {
margin-bottom: calc(
1 * calc(1.25 * 1rem)
);
margin-top: calc(1.5 * calc(1.25 * 1rem));
}
.markdown > h4 {
margin-bottom: calc(
1 * calc(1.25 * 1rem)
);
margin-top: calc(
1.25 * calc(1.25 * 1rem)
);
}
.markdown > h5 {
margin-bottom: calc(
1 * calc(1.25 * 1rem)
);
margin-top: calc(
1.25 * calc(1.25 * 1rem)
);
}
.markdown > h6 {
margin-bottom: calc(
1 * calc(1.25 * 1rem)
);
margin-top: calc(
1.25 * calc(1.25 * 1rem)
);
}
.markdown > pre {
margin-bottom: calc(1.25 * 1rem);
}
.markdown > ul {
margin-bottom: calc(1.25 * 1rem);
}
.markdown > p {
margin-bottom: calc(1.25 * 1rem);
}
.markdown li {
word-wrap: break-all
}
.markdown li > p {
margin-top: 1rem;
}
.markdown li + li {
margin-top: 0.25rem;
}
ul {
margin-bottom: 1rem;
margin-top: 0;
padding-left: 2rem;
}
ol {
margin-bottom: 1rem;
margin-top: 0;
padding-left: 2rem;
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
margin-top: 0;
}
ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
table {
border-collapse: collapse;
border-spacing: 0;
display: block;
margin-bottom: 1rem;
margin-top: 0;
overflow: auto;
width: 100%
}
table tr {
background-color: transparent;
border-top: 1px solid
#606770;
}
table tr:nth-child(2n) {
background-color: #1c1e21;
}
table th {
border: 1px solid #606770;
padding: 0.75rem;
}
table td {
border: 1px solid #606770;
padding: 0.75rem;
}
table th {
background-color: inherit;
color: inherit;
font-weight: 700;
}
table td {
color: inherit;
}
strong {
font-weight: 700;
}
a {
color: #3578e5;
-webkit-text-decoration: none;
text-decoration: none
}
a:hover {
color: #3578e5;
-webkit-text-decoration: underline;
text-decoration: underline;
}
a:active,
a:hover {
outline-width: 0;
}
a:not([href]) {
color: inherit;
text-decoration: none;
}
p {
margin-top: 0;
margin-bottom: calc(1.25 * 1rem);
}
blockquote {
border-left: 6px solid #dadde1;
color: #6a737d;
font-size: 16px;
margin: 0;
margin-bottom: 1rem;
padding: 1rem
1rem
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
hr {
border-color: #bec3c9;
border-style: solid;
border-width: 1px;
box-sizing: content-box;
margin: 1.5rem 0;
overflow: hidden;
padding: 0
}
hr:before {
content: '';
display: table;
}
hr:after {
clear: both;
content: '';
display: table;
}
.alert {
background-color: inherit;
border-color: #fa383e;
border-style: solid;
border-width: 1px;
border-radius: 0.4rem;
box-sizing: border-box;
color: #000;
padding: 1rem 1rem
}
.alert.alert--primary {
color: #000;
background-color: #3578e5;
border-color: #3578e5;
}
.alert.alert--secondary {
color: --ifm-color-gray-900;
background-color: #ebedf0;
border-color: #ebedf0;
}
.alert.alert--success {
color: #000;
background-color: #00a400;
border-color: #00a400;
}
.alert.alert--info {
color: #000;
background-color: #54c7ec;
border-color: #54c7ec;
}
.alert.alert--warning {
color: #000;
background-color: #ffba00;
border-color: #ffba00;
}
.alert.alert--danger {
color: #000;
background-color: #fa383e;
border-color: #fa383e;
}
.alert a {
color: #000;
text-decoration: underline;
}
.alert.alert--secondary {
color: #1c1e21
}
.alert.alert--secondary a {
color: #1c1e21;
}
.alert .close {
margin-right: calc(1rem * -1);
margin-top: calc(1rem * -1);
}
.avatar {
display: flex
}
.avatar .avatar__photo-link {
display: block;
}
.avatar .avatar__photo {
overflow: hidden;
border-radius: 50%;
height: 3rem;
width: 3rem
}
.avatar .avatar__photo.avatar__photo--sm {
height: 2rem;
width: 2rem;
}
.avatar .avatar__photo.avatar__photo--lg {
height: 4rem;
width: 4rem;
}
.avatar .avatar__photo.avatar__photo--xl {
height: 6rem;
width: 6rem;
}
.avatar .avatar__photo + .avatar__intro {
margin-left: 1rem;
}
.avatar .avatar__intro {
display: flex;
flex: 1 1;
flex-direction: column;
justify-content: center;
text-align: inherit;
}
.avatar .avatar__name {
margin: 0;
}
.avatar .avatar__subtitle {
margin-top: 0.25rem;
}
.avatar.avatar--vertical {
align-items: center;
flex-direction: column
}
.avatar.avatar--vertical .avatar__intro {
margin-left: 0; /* Reset the margin added in the horizontal layout. */
margin-top: 0.5rem;
text-align: center;
}
.badge {
background-color: inherit;
border-color: #fa383e;
border-style: solid;
border-width: 1px;
border-radius: 0.4rem;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
padding: calc(1rem * 0.25) calc(1rem * 0.5);
vertical-align: baseline
}
.badge.badge--primary {
background-color: #3578e5;
border-color: #3578e5;
}
.badge.badge--secondary {
background-color: #ebedf0;
border-color: #ebedf0;
}
.badge.badge--success {
background-color: #00a400;
border-color: #00a400;
}
.badge.badge--info {
background-color: #54c7ec;
border-color: #54c7ec;
}
.badge.badge--warning {
background-color: #ffba00;
border-color: #ffba00;
}
.badge.badge--danger {
background-color: #fa383e;
border-color: #fa383e;
}
.badge.badge--secondary {
color: #000;
}
.breadcrumbs {
margin-bottom: 0;
padding-left: 0
}
.breadcrumbs > .breadcrumb__item {
display: inline-block;
list-style-type: none
}
.breadcrumbs > .breadcrumb__item:not(:first-child) {
margin-left: 0.0625rem;
}
.breadcrumbs > .breadcrumb__item:not(:last-child) {
margin-right: 0.0625rem
}
.breadcrumbs > .breadcrumb__item:not(:last-child):after {
background-image: url('data:image/svg+xml;utf8,<svg alt="Chevron Right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
background-position: center;
content: ' ';
display: inline-block;
height: calc(
0.5rem *
1 *
1.25
);
margin: 0 0.5rem;
opacity: 0.5;
width: calc(
0.5rem *
1 *
1.25
);
}
.breadcrumbs > .breadcrumb__item .breadcrumb__link {
border-radius: 1.5rem;
color: #f5f6f7;
display: inline-block;
font-size: calc(1rem * 1);
padding: calc(
0.5rem *
1
)
calc(
1rem *
1
);
text-decoration: none;
}
.breadcrumbs > .breadcrumb__item.breadcrumb__item--active .breadcrumb__link {
background: rgba(255, 255, 255, 0.05);
color: #3578e5;
}
.breadcrumbs > .breadcrumb__item:not(.breadcrumb__item--active):hover .breadcrumb__link {
background: rgba(255, 255, 255, 0.05);
transition: background 200ms
cubic-bezier(0.08, 0.52, 0.52, 1);
}
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: inherit;
border-color: inherit;
border-style: solid;
border-width: 1px;
border-radius: calc(
0.4rem * 1.35
);
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: calc(0.875rem * 1);
font-weight: 700;
line-height: 1.5;
outline: 0;
padding: calc(
0.375rem * 1
)
calc(
1.5rem * 1
);
text-align: center;
text-decoration: none;
transition: color 200ms
cubic-bezier(0.08, 0.52, 0.52, 1),
background 200ms
cubic-bezier(0.08, 0.52, 0.52, 1),
border-color 200ms
cubic-bezier(0.08, 0.52, 0.52, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.button:hover {
color: #fff;
outline: 0;
text-decoration: none;
}
.button:focus {
outline: 0;
}
.button.button--link {
color: #3578e5;
-webkit-text-decoration: none;
text-decoration: none
}
.button.button--link:hover {
color: #3578e5;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.button.button--link:active {
color: #3578e5;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.button.button--link.button--active {
color: #3578e5;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.button.disabled,
.button:disabled,
.button[disabled] {
opacity: 0.65;
pointer-events: none;
}
.button.button--block {
display: block;
width: 100%;
}
.button.button--secondary {
color: #1c1e21
}
.button.button--secondary.button--outline:not(.button--active):not(:hover) {
color: #f5f6f7;
}
.button.button.button--primary:active {
background-color: rgb(45, 102, 195);
border-color: rgb(45, 102, 195);
}
.button.button.button--primary.button--active {
background-color: rgb(45, 102, 195);
border-color: rgb(45, 102, 195);
}
.button.button.button--secondary:active {
background-color: rgb(200, 201, 204);
border-color: rgb(200, 201, 204);
}
.button.button.button--secondary.button--active {
background-color: rgb(200, 201, 204);
border-color: rgb(200, 201, 204);
}
.button.button.button--success:active {
background-color: rgb(0, 139, 0);
border-color: rgb(0, 139, 0);
}
.button.button.button--success.button--active {
background-color: rgb(0, 139, 0);
border-color: rgb(0, 139, 0);
}
.button.button.button--info:active {
background-color: rgb(71, 169, 201);
border-color: rgb(71, 169, 201);
}
.button.button.button--info.button--active {
background-color: rgb(71, 169, 201);
border-color: rgb(71, 169, 201);
}
.button.button.button--warning:active {
background-color: rgb(217, 158, 0);
border-color: rgb(217, 158, 0);
}
.button.button.button--warning.button--active {
background-color: rgb(217, 158, 0);
border-color: rgb(217, 158, 0);
}
.button.button.button--danger:active {
background-color: rgb(213, 48, 53);
border-color: rgb(213, 48, 53);
}
.button.button.button--danger.button--active {
background-color: rgb(213, 48, 53);
border-color: rgb(213, 48, 53);
}
.button-group {
display: inline-flex
}
.button-group > .button:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: 2px;
}
.button-group > .button:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.button-group > .button--active {
z-index: 1;
}
.button-group.button-group--block {
display: flex;
justify-content: stretch
}
.button-group.button-group--block > .button {
flex-grow: 1;
}
.card {
background-color: #242526;
border-radius: calc(0.4rem * 2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column
}
.card.card--full-height {
height: 100%;
}
.card .card__image {
padding-top: 1rem
}
.card .card__image:first-child {
padding-top: 0;
}
.card .card__header {
padding: 1rem 1rem
}
.card .card__body {
padding: 1rem 1rem
}
.card .card__footer {
padding: 1rem 1rem
}
.card .card__header:not(:last-child), .card .card__body:not(:last-child), .card .card__footer:not(:last-child) {
padding-bottom: 0;
}
.card .card__header > :last-child, .card .card__body > :last-child, .card .card__footer > :last-child {
margin-bottom: 0;
}
.card .card__footer {
margin-top: auto;
}
.contents {
font-size: 0.8rem;
margin-bottom: 0;
padding-bottom: 0.5rem;
padding-top: 0.5rem
}
.contents {
list-style-type: none;
padding-left: 0.5rem;
}
.contents ul {
list-style-type: none;
padding-left: 0.5rem;
}
.contents li {
margin: 0.5rem;
}
.contents.contents__left-border {
border-left-color: #606770;
border-left-style: solid;
border-left-width: 1px;
}
.contents .contents__link {
color: rgba(255, 255, 255, 1)
}
.contents .contents__link:hover {
color: #3578e5;
text-decoration: none;
}
.contents .contents__link:hover code {
color: #3578e5;
text-decoration: none;
}
.contents .contents__link.contents__link--active {
color: #3578e5;
text-decoration: none;
}
.contents .contents__link.contents__link--active code {
color: #3578e5;
text-decoration: none;
}
.close {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
color: #000;
cursor: pointer;
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
opacity: 0.5;
outline: 0;
padding: 1rem
}
.close:hover {
opacity: 0.7;
}
.close:focus {
opacity: 0.8;
}
.dropdown {
display: inline-flex;
font-weight: 500;
position: relative;
vertical-align: top
}
.dropdown.dropdown--hoverable:hover .dropdown__menu, .dropdown.dropdown--show .dropdown__menu {
display: block;
}
.dropdown.dropdown--right .dropdown__menu {
right: 0;
}
.dropdown .dropdown__menu {
background-color: #242526;
border-radius: 0.4rem;
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2);
display: none;
min-width: 10rem;
list-style: none;
padding: 0.5rem;
position: absolute;
top: 100%;
z-index: 100
}
.dropdown .dropdown__menu .dropdown__link {
border-radius: 0.375rem;
color: #f5f6f7;
display: block;
font-size: 0.875rem;
padding: 0.375rem 0.5rem;
white-space: nowrap
}
.dropdown .dropdown__menu .dropdown__link:hover {
background-color: rgba(255, 255, 255, 0.05);
text-decoration: none;
}
.dropdown .navbar__link:after {
border-color: currentColor;
border-top: 0.4em solid;
border-right: 0.4em solid transparent;
border-bottom: 0;
border-left: 0.4em solid transparent;
content: '';
display: inline-block;
margin-left: 0.3em;
vertical-align: 0.15em;
}
.dropdown.dropdown--nocaret .navbar__link:after {
content: none;
}
.footer {
background-color: #1c1e21;
color: inherit;
padding: calc(1rem * 2)
calc(1rem * 2);
width: 100%
}
@media (max-width: 996px) {
.footer {
padding: calc(1rem * 2)
0;
}
}
@media (max-width: 996px) {
.footer {
padding: calc(1rem * 2)
0;
}
}
.footer.footer--dark {
background-color: #303846;
color: #ebedf0
}
.footer.footer--dark .footer__link-item {
color: #ebedf0;
}
.footer.footer--dark .footer__title {
color: #fff;
}
.footer .footer__links {
margin-bottom: 1rem;
}
.footer .footer__link-item {
color: #dadde1;
line-height: 2
}
.footer .footer__link-item:hover {
color: #3578e5;
}
.footer .footer__link-separator {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.footer .footer__logo {
margin-top: 1rem;
max-width: 10rem;
}
.footer .footer__title {
color: inherit;
}
.footer .footer__item {
margin-top: 0;
}
.footer .footer__items {
list-style-type: none;
margin-bottom: 0;
padding-left: 0;
}
@media (max-width: 996px) {
.footer {
padding: calc(1rem * 2)
0
}
@media (max-width: 996px) {
.footer {
padding: calc(1rem * 2)
0;
}
}
@media (max-width: 996px) {
.footer {
padding: calc(1rem * 2)
0;
}
}
.footer .footer__link-separator {
display: none;
}
.footer .footer__col {
margin-bottom: calc(1rem * 3);
}
.footer .footer__link-item {
display: block;
}
}
[type='checkbox'] {
padding: 0;
}
.hero {
align-items: center;
background-color: #242526;
color: #444950;
display: flex;
padding: 4rem 2rem
}
.hero.hero--primary {
background-color: #3578e5;
color: #fff;
}
.hero.hero--dark {
background-color: #303846;
color: #fff;
}
.hero .hero__title {
font-size: 3rem;
}
.hero .hero__subtitle {
font-size: 1.5rem;
}
@media (max-width: 996px) {
.hero {
padding-left: 0;
padding-right: 0
}
}
.menu {
font-weight: 500;
overflow-x: hidden
}
.menu .menu__list {
margin: 0;
list-style-type: none;
padding-left: 0;
transition: height 200ms
cubic-bezier(0.08, 0.52, 0.52, 1)
}
.menu .menu__list .menu__list {
margin-left: 1rem;
}
.menu .menu__list-item {
margin-bottom: 0.25rem;
margin-top: 0.25rem
}
.menu .menu__list-item.menu__list-item--collapsed .menu__list {
height: 0;
overflow: hidden;
}
.menu .menu__list-item.menu__list-item--collapsed .menu__link--sublist:after {
transform: rotateZ(90deg);
}
.menu .menu__link {
border-radius: 0.25rem;
color: #dadde1;
cursor: pointer;
display: flex;
line-height: 20px;
justify-content: space-between;
text-decoration: none;
margin: 0;
padding: 0.375rem
1rem
}
.menu .menu__link.menu__link--sublist:after {
background-image: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
background-size: 2rem 2rem;
background-position: center;
content: ' ';
display: inline-block;
height: 1.25rem;
width: 1.25rem;
transition: transform 200ms linear;
transform: rotate(180deg);
}
.menu .menu__link:hover {
background: rgba(255, 255, 255, 0.05);
}
.menu .menu__link.menu__link--active:not(.menu__link--sublist) {
background: rgba(255, 255, 255, 0.05);
}
.menu .menu__link.menu__link--active {
color: #3578e5;
}
.menu.menu--responsive .menu__button {
bottom: 2rem;
display: none;
position: fixed;
right: 1rem;
z-index: 200
}
@media (max-width: 996px) {
.menu.menu--responsive .menu__button {
display: inherit
}
}
@media (max-width: 996px) {
.menu.menu--responsive .menu__list {
display: none;
opacity: 0;
}
}
.menu.menu--show {
-ms-scroll-chaining: none;
background: #000;
bottom: 0;
left: 0;
overscroll-behavior: contain;
padding: 1rem;
position: fixed;
right: 0;
top: 0;
z-index: 400
}
.menu.menu--show .menu__list {
display: inherit;
opacity: 100;
transition: opacity 200ms linear;
}
.navbar {
background-color: #242526;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
display: flex;
height: 3.75rem;
padding: calc(1rem * 0.5)
1rem;
width: 100%
}
.navbar > .container,
.navbar > .container-fluid {
display: flex
}
@media (max-width: 996px) {
.navbar > .container,
.navbar > .container-fluid {
padding: 0
}
}
.navbar.navbar--fixed-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 200;
}
.navbar .navbar__inner {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.navbar .navbar__brand {
align-items: center;
color: #f5f6f7;
display: flex;
font-weight: bold;
height: 2rem;
margin-right: 1rem;
text-decoration: none;
}
.navbar .navbar__title {
flex-shrink: 0;
max-width: 100%;
}
.navbar .navbar__toggle {
cursor: pointer;
display: none;
margin-right: 0.5rem
}
@media (max-width: 996px) {
.navbar .navbar__toggle {
display: inherit
}
}
.navbar .navbar__logo {
height: 100%;
margin-right: 0.5rem;
}
.navbar .navbar__items {
align-items: center;
display: flex;
flex: 1 1 auto
}
.navbar .navbar__items.navbar__items--center {
flex: 0 0 auto
}
.navbar .navbar__items.navbar__items--center .navbar__brand {
margin: 0;
}
.navbar .navbar__items.navbar__items--right {
justify-content: flex-end;
}
.navbar .navbar__item {
display: inline-block;
padding: 0.25rem
1rem
}
.navbar .navbar__item.dropdown {
padding: 0
}
.navbar .navbar__item.dropdown .navbar__link {
pointer-events: none;
}
@media (max-width: 996px) {
.navbar .navbar__item {
display: none
}
}
.navbar .navbar__link {
color: #f5f6f7;
cursor: pointer;
font-weight: 500;
padding: 0.25rem
1rem;
text-decoration: none
}
.navbar .navbar__link:hover {
color: #3578e5;
}
.navbar .navbar__link.navbar__link--active {
color: #3578e5;
}
.navbar.navbar--dark {
background-color: #303846
}
.navbar.navbar--dark .navbar__brand {
color: #fff;
}
.navbar.navbar--dark .navbar__link {
color: #fff
}
.navbar.navbar--dark .navbar__link:hover {
color: #3578e5;
}
.navbar.navbar--dark .navbar__search .navbar__search-input {
background-color: rgba(255, 255, 255, 0.1);
background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
color: #fff
}
.navbar.navbar--dark .navbar__search .navbar__search-input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--dark .navbar__search .navbar__search-input::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--dark .navbar__search .navbar__search-input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--dark .navbar__search .navbar__search-input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--dark .navbar__search .navbar__search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--primary {
background-color: #3578e5
}
.navbar.navbar--primary .navbar__link:hover {
color: #fff;
}
.navbar.navbar--primary .navbar__search .navbar__search-input {
background-color: rgba(255, 255, 255, 0.1);
background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
color: #bec3c9
}
.navbar.navbar--primary .navbar__search .navbar__search-input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--primary .navbar__search .navbar__search-input::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--primary .navbar__search .navbar__search-input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--primary .navbar__search .navbar__search-input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar.navbar--primary .navbar__search .navbar__search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.navbar .navbar__search {
padding-left: 1rem
}
.navbar .navbar__search .navbar__search-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #444950;
background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
background-position-x: 0.75rem;
background-position-y: center;
background-repeat: no-repeat;
background-size: 1rem 1rem;
border-radius: 2rem;
border-width: 0;
cursor: text;
color: #444950;
display: inline-block;
font-size: 0.9rem;
line-height: 2rem;
outline: none;
padding: 0 0.5rem 0 2.25rem;
width: 12.5rem
}
.navbar .navbar__search .navbar__search-input::-webkit-input-placeholder {
color: #bec3c9;
}
.navbar .navbar__search .navbar__search-input::-moz-placeholder {
color: #bec3c9;
}
.navbar .navbar__search .navbar__search-input:-ms-input-placeholder {
color: #bec3c9;
}
.navbar .navbar__search .navbar__search-input::-ms-input-placeholder {
color: #bec3c9;
}
.navbar .navbar__search .navbar__search-input::placeholder {
color: #bec3c9;
}
@media (max-width: 996px) {
.navbar .navbar__search .navbar__search-input {
width: 9rem
}
}
.navbar .navbar-sidebar {
background-color: #242526;
bottom: 0;
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
position: fixed;
top: 0;
transform: translateX(-100%);
transition: transform 200ms ease;
width: 80vw;
overflow: auto
}
@media (max-width: 996px) {
.navbar .navbar-sidebar {
display: block
}
}
.navbar.navbar-sidebar--show .navbar-sidebar {
transform: translateX(0);
}
.navbar.navbar-sidebar--show .navbar-sidebar__backdrop {
display: block;
}
.navbar .navbar-sidebar__backdrop {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
display: none;
left: 0;
right: 0;
position: fixed;
top: 0;
}
.navbar .navbar-sidebar__brand {
align-items: center;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
display: flex;
height: 3.75rem;
padding: calc(1rem * 0.5)
1rem;
}
.navbar .navbar-sidebar__items {
padding: 0.5rem;
}
.pagination {
font-size: 1rem;
padding-left: 0
}
.pagination > .page-item {
display: inline-block;
list-style-type: none
}
.pagination > .page-item:not(:first-child) {
margin-left: 0.0625rem;
}
.pagination > .page-item:not(:last-child) {
margin-right: 0.0625rem;
}
.pagination > .page-item > span {
padding: calc(1rem * 0.25);
}
.pagination > .page-item .page-link {
border-radius: calc(
0.4rem * 1
);
color: #f5f6f7;
display: inline-block;
padding: calc(1rem * 0.25)
calc(1rem * 1);
text-decoration: none;
}
.pagination > .page-item.page-item--active .page-link {
background: rgba(255, 255, 255, 0.05);
color: #3578e5;
}
.pagination > .page-item:not(.page-item--active):hover .page-link {
background: rgba(255, 255, 255, 0.05);
transition: background 200ms
cubic-bezier(0.08, 0.52, 0.52, 1);
}
.pagination > .page-item.disabled,
.pagination > .page-item:disabled,
.pagination > .page-item[disabled] {
opacity: 0.25;
pointer-events: none;
}
.pagination.pagination--sm {
font-size: 0.8rem
}
.pagination.pagination--sm > .page-item .page-link {
padding: 0.2rem
0.8rem;
}
.pagination.pagination--lg {
font-size: 1.2rem
}
.pagination.pagination--lg > .page-item .page-link {
padding: 0.3rem
1.2rem;
}
.pagination-nav {
display: flex
}
.pagination-nav .pagination-nav__item {
display: flex;
flex-basis: 50%;
flex-grow: 1;
max-width: 50%;
}
.pagination-nav .pagination-nav__item--next {
text-align: right;
}
.pagination-nav .pagination-nav__item + .pagination-nav__item {
margin-left: 1rem;
}
.pagination-nav .pagination-nav__link {
border-color: #dadde1;
border-radius: 0.4rem;
border-style: solid;
border-width: 1px;
display: block;
flex-grow: 1;
padding: 1rem;
text-decoration: none
}
.pagination-nav .pagination-nav__link:hover {
border-color: #3578e5;
}
.pagination-nav .pagination-nav__link--label {
font-size: 1rem;
line-height: 1.25;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
word-break: break-word;
}
.pagination-nav .pagination-nav__link--sublabel {
font-size: 0.875rem;
line-height: 1.25;
color: #606770;
font-weight: 500;
margin-bottom: 0.25rem;
}
.pills {
font-weight: 700;
padding-left: 0
}
.pills > .pill-item {
border-radius: 0.5rem;
cursor: pointer;
display: inline-block;
list-style-type: none;
padding: 0.25rem 1rem
}
.pills > .pill-item.pill-item--active {
background: rgba(255, 255, 255, 0.05);
color: #3578e5;
}
.pills > .pill-item:not(.pill-item--active):hover {
background-color: rgba(255, 255, 255, 0.05);
transition: background 200ms
cubic-bezier(0.08, 0.52, 0.52, 1);
}
.pills > .pill-item:not(:first-child) {
margin-left: 0.0625rem;
}
.pills > .pill-item:not(:last-child) {
margin-right: 0.0625rem;
}
.pills > .pill-item + .pill-item {
margin-top: 0;
}
.pills.pills--block {
display: flex;
justify-content: stretch
}
@media (max-width: 996px) {
.pills.pills--block {
flex-direction: column
}
}
.pills.pills--block > .pill-item {
flex-grow: 1;
text-align: center
}
@media (max-width: 996px) {
.pills.pills--block > .pill-item:not(:first-child) {
margin-top: 0.0625rem;
}
.pills.pills--block > .pill-item:not(:last-child) {
margin-bottom: 0.0625rem;
}
}
.tabs {
display: flex;
overflow-x: auto;
color: rgba(255, 255, 255, 1);
font-weight: 700;
margin-bottom: 0;
padding-left: 0
}
.tabs > .tab-item {
box-sizing: content-box;
border-bottom: 3px solid transparent;
border-radius: 0.4rem;
cursor: pointer;
display: inline-flex;
list-style-type: none;
padding: 1rem 1rem;
margin: 0
}
.tabs > .tab-item.tab-item--active {
border-bottom-color: #3578e5;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: #3578e5;
}
.tabs > .tab-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.tabs.tabs--block {
justify-content: stretch
}
@media (max-width: 996px) {
.tabs.tabs--block {
flex-direction: column
}
}
.tabs.tabs--block > .tab-item {
flex-grow: 1;
justify-content: center
}
@media (max-width: 996px) {
.tabs.tabs--block > .tab-item:not(:first-child) {
margin-top: 0.0625rem;
}
.tabs.tabs--block > .tab-item:not(:last-child) {
margin-bottom: 0.0625rem;
}
}
.shadow--lw {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) ;
}
.shadow--md {
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2) ;
}
.shadow--tl {
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
0 2px 4px 0 rgba(0, 0, 0, 0.1) ;
}
.text--primary {
color: #3578e5;
}
.text--secondary {
color: #ebedf0;
}
.text--success {
color: #00a400;
}
.text--info {
color: #54c7ec;
}
.text--warning {
color: #ffba00;
}
.text--danger {
color: #fa383e;
}
.text--center {
text-align: center;
}
.text--left {
text-align: left;
}
.text--justify {
text-align: justify;
}
.text--right {
text-align: right;
}
.text--capitalize {
text-transform: capitalize;
}
.text--lowercase {
text-transform: lowercase;
}
.text--uppercase {
text-transform: uppercase;
}
.text--light {
font-weight: 300;
}
.text--normal {
font-weight: 400;
}
.text--semibold {
font-weight: 500;
}
.text--bold {
font-weight: 700;
}
.text--italic {
font-style: italic;
}
.text--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text--break {
word-break: break-word ;
word-wrap: break-word ;
}
.text--no-decoration,
.text--no-decoration:hover {
text-decoration: none;
}