555 lines
12 KiB
SCSS
555 lines
12 KiB
SCSS
@use "sass:meta";
|
|
|
|
/* 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.
|
|
*/
|
|
|
|
/* You can override the default Infima variables here. */
|
|
:root {
|
|
--ifm-background-color: var(--ifm-color-primary-light);
|
|
--ifm-code-background: var(--ifm-color-primary-dark);
|
|
--ifm-code-font-size: 100%;
|
|
--ifm-code-border-radius: 2rem;
|
|
--ifm-code-color: var(--ifm-color-primary-light);
|
|
--ifm-code-padding-vertical: 0;
|
|
--ifm-code-padding-horizontal: 0.2rem;
|
|
--ifm-color-primary: #0e2b3d;
|
|
--ifm-color-primary-dark: #131226;
|
|
--ifm-color-primary-darker: #0d0c1b;
|
|
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
|
--ifm-color-primary-light: #fffef6;
|
|
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
|
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
|
--ifm-color-secondary: #fefad8;
|
|
--ifm-color-success: #fcc009;
|
|
--ifm-color-info: #40b9bc;
|
|
--ifm-color-warning: #ef7b1a;
|
|
--ifm-color-danger: #be1d43;
|
|
--ifm-container-width-xl: 100%;
|
|
--ifm-font-color-base: var(--ifm-color-primary-dark);
|
|
--ifm-font-family-base: "Karla", sans-serif;
|
|
--ifm-font-family-monospace: "Courier new", sans-serif;
|
|
--ifm-h2-font-size: 2rem;
|
|
--ifm-leading-desktop: 1;
|
|
--ifm-link-color: var(--ifm-color-primary-dark);
|
|
--ifm-link-hover-color: var(--ifm-color-primary);
|
|
--ifm-menu-color: var(--ifm-color-primary-dark);
|
|
--ifm-menu-color-active: var(--ifm-color-primary-dark);
|
|
--ifm-menu-color-background-hover: #fdf9d7;
|
|
--ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
|
|
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.318 9.128a24.776 24.776 0 004.224-3.993.842.842 0 011.32.026c1.227 1.618 2.107 3.387 3.831 4.556.889.6-.159 1.9-1.044 1.3A14.369 14.369 0 018.14 7a30.457 30.457 0 01-3.829 3.463c-.845.671-1.834-.67-.993-1.335z" fill="%23131226" /></svg>');
|
|
--ifm-navbar-height: 6rem;
|
|
--ifm-navbar-background-color: var(--ifm-color-primary-dark);
|
|
--ifm-pagination-nav-border-radius: 0;
|
|
--ifm-pre-padding: 2rem;
|
|
--ifm-toc-border-color: transparent;
|
|
--ifm-toc-link-color: var(--ifm-color-primary-dark);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--ifm-background-color: var(--ifm-color-primary-dark);
|
|
--ifm-navbar-background-color: var(--ifm-color-primary-darker);
|
|
--ifm-menu-color-active: var(--ifm-color-primary-light);
|
|
--ifm-menu-color-background-active: var(--ifm-color-primary);
|
|
--ifm-link-color: var(--ifm-color-primary-light);
|
|
--ifm-link-hover-color: var(--ifm-color-primary-light);
|
|
--ifm-toc-link-color: var(--ifm-color-primary-light);
|
|
--ifm-pagination-nav-color-hover: var(--ifm-color-primary-light);
|
|
--ifm-tabs-color-active: var(--ifm-color-primary-light);
|
|
--ifm-table-stripe-background: #2e526a;
|
|
--ifm-code-background: var(--ifm-color-primary-dark);
|
|
--ifm-heading-color: var(--ifm-color-primary-light);
|
|
--ifm-blockquote-color: var(--ifm-menu-color-background-hover);
|
|
--ifm-color-emphasis-300: var(--ifm-menu-color-background-hover);
|
|
}
|
|
|
|
/* global */
|
|
|
|
h1,
|
|
h2 {
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
}
|
|
|
|
code {
|
|
margin: 0 1px;
|
|
color: var(--ifm-code-color);
|
|
}
|
|
|
|
.markdown {
|
|
& > h2 {
|
|
--ifm-h2-font-size: 1.5rem;
|
|
--ifm-h2-vertical-rhythm-top: 4;
|
|
}
|
|
|
|
& > h3 {
|
|
--ifm-h3-font-size: 1.1875rem;
|
|
--ifm-h3-vertical-rhythm-top: 3;
|
|
}
|
|
|
|
& > h2 + h3 {
|
|
--ifm-h3-vertical-rhythm-top: 2;
|
|
}
|
|
|
|
a {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
color: var(--ifm-color-primary-dark);
|
|
|
|
html[data-theme="dark"] & {
|
|
color: var(--ifm-color-primary-light);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--ifm-color-primary);
|
|
html[data-theme="dark"] & {
|
|
color: var(--ifm-color-secondary);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
color: var(--ifm-color-info);
|
|
html[data-theme="dark"] & {
|
|
color: var(--ifm-color-info);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
a.menu__link[target="_blank"] {
|
|
svg {
|
|
display: none;
|
|
}
|
|
&:after {
|
|
background: var(--ifm-color-primary-darker);
|
|
mask: url("/img/Dagger_Icons_External-link.svg") no-repeat;
|
|
position: absolute;
|
|
content: "";
|
|
right: var(--ifm-menu-link-padding-horizontal);
|
|
top: var(--ifm-menu-link-padding-vertical);
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
html[data-theme="dark"] &:after {
|
|
background: var(--ifm-color-primary-light);
|
|
}
|
|
}
|
|
|
|
h1[class^="h1Heading"] {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.edit-this-page {
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 2rem 0 5rem;
|
|
|
|
html[data-theme="dark"] & svg path {
|
|
fill: var(--ifm-color-primary-light);
|
|
}
|
|
}
|
|
|
|
#__docusaurus {
|
|
background-color: var(--ifm-color-primary-light);
|
|
// padding-bottom: 3rem;
|
|
|
|
html[data-theme="dark"] & {
|
|
background: var(--ifm-color-primary-darker);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.button {
|
|
background: var(--ifm-color-secondary);
|
|
font-family: "Poppins", sans-serif;
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
padding: 1rem;
|
|
border: 0;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active {
|
|
background: #131226;
|
|
color: var(--ifm-color-secondary);
|
|
}
|
|
}
|
|
|
|
/* navbar */
|
|
.navbar__brand {
|
|
height: 4rem;
|
|
}
|
|
|
|
.navbar {
|
|
align-self: center;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.navbar__item {
|
|
margin: 0 0.75rem;
|
|
}
|
|
.navbar__items--right > :last-child {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.react-toggle {
|
|
margin: 0 0.75rem;
|
|
}
|
|
|
|
.header-discord-link,
|
|
.header-github-link {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.header-github-link {
|
|
background: url("/img/github-icon.svg");
|
|
}
|
|
|
|
.header-discord-link {
|
|
background: url("/img/discord-icon.svg");
|
|
}
|
|
|
|
.navbar .button svg {
|
|
display: none;
|
|
}
|
|
|
|
/* sidebar */
|
|
@media (min-width: 997px) {
|
|
aside[class^="docSidebarContainer"] {
|
|
width: 340px;
|
|
|
|
div[class^="sidebar"] {
|
|
width: 340px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* main */
|
|
.main-wrapper {
|
|
align-self: center;
|
|
width: 100%;
|
|
}
|
|
|
|
main[class^="docMainContainer"] {
|
|
background: #ffffff;
|
|
padding: 2rem;
|
|
|
|
html[data-theme="dark"] & {
|
|
background: var(--ifm-color-primary-dark);
|
|
color: var(--ifm-color-primary-light);
|
|
}
|
|
|
|
.docItemContainer_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocItem-styles-module {
|
|
max-width: 940px !important;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
/* table-of-contents */
|
|
.table-of-contents {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.table-of-contents__link--active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
html[data-theme="dark"] .table-of-contents__link {
|
|
&--active,
|
|
&:hover {
|
|
color: var(--ifm-color-primary-light);
|
|
}
|
|
}
|
|
|
|
// tabs
|
|
|
|
/* codeBlock */
|
|
div[class^="codeBlockContainer"] {
|
|
border-radius: var(--ifm-code-border-radius);
|
|
margin-bottom: 2.5rem;
|
|
|
|
div[class^="codeBlockTitle"] {
|
|
background-color: var(--ifm-color-primary-dark) !important;
|
|
border-bottom: 1px solid #606770;
|
|
font-family: var(--ifm-font-family-monospace);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
pre {
|
|
border-radius: var(--ifm-global-radius);
|
|
}
|
|
}
|
|
|
|
code[class^="codeBlockLines"] {
|
|
background-color: var(--ifm-color-primary-dark) !important;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
.token-line {
|
|
color: var(--ifm-color-primary-light) !important;
|
|
}
|
|
}
|
|
|
|
button[class^="copyButton"] {
|
|
background-color: var(--ifm-color-primary-light);
|
|
color: var(--ifm-color-primary-dark);
|
|
}
|
|
|
|
/* badge */
|
|
.badge--secondary {
|
|
color: var(--ifm-color-primary-dark);
|
|
}
|
|
|
|
/* hash-link */
|
|
.hash-link {
|
|
svg path + path {
|
|
fill: #40b8bb;
|
|
}
|
|
|
|
&:hover svg path + path {
|
|
fill: #175761;
|
|
}
|
|
|
|
&:focus svg path + path {
|
|
fill: var(--ifm-color-primary-dark);
|
|
}
|
|
}
|
|
|
|
/* menu */
|
|
.menu {
|
|
padding: 0 !important;
|
|
|
|
& > ul > li:nth-child(1) > a:nth-child(1) {
|
|
padding-top: 2rem;
|
|
border-top: 0;
|
|
}
|
|
|
|
& > ul > li > a:nth-child(1) {
|
|
background-color: var(--ifm-color-primary-light);
|
|
border-top: 1px solid;
|
|
border-bottom: 1px solid;
|
|
border-color: #f0efe7;
|
|
|
|
html[data-theme="dark"] & {
|
|
background-color: var(--ifm-color-primary);
|
|
border-color: #65627b;
|
|
}
|
|
}
|
|
|
|
& > ul > li + li > a:nth-child(1) {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.menu__list {
|
|
background-color: var(--ifm-color-secondary);
|
|
|
|
& > .menu__list-item > & {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.menu__list-item {
|
|
margin-top: 0;
|
|
}
|
|
html[data-theme="dark"] & {
|
|
background-color: var(--ifm-color-primary-dark);
|
|
}
|
|
}
|
|
|
|
.menu__link {
|
|
border-radius: 0;
|
|
padding: 1rem;
|
|
|
|
& + .menu__list & {
|
|
padding-left: 2rem;
|
|
width: calc(100% - 1rem);
|
|
|
|
&:hover,
|
|
&.active {
|
|
background-color: var(--ifm-color-primary-dark);
|
|
color: var(--ifm-color-primary-light);
|
|
font-weight: bold;
|
|
}
|
|
|
|
html[data-theme="dark"] &:hover,
|
|
html[data-theme="dark"] &.active {
|
|
background-color: var(--ifm-color-secondary);
|
|
color: var(--ifm-color-primary-dark);
|
|
}
|
|
|
|
&.menu__link--sublist:hover::after {
|
|
filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg)
|
|
brightness(104%) contrast(98%);
|
|
}
|
|
}
|
|
|
|
&--active:not(.menu__link--sublist) {
|
|
background-color: var(--ifm-color-primary);
|
|
color: var(--ifm-color-primary-light);
|
|
|
|
html[data-theme="dark"] & {
|
|
background-color: var(--ifm-menu-color-background-hover);
|
|
color: var(--ifm-color-primary);
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] &,
|
|
html[data-theme="dark"] &:not([href]),
|
|
html[data-theme="dark"] &:focus {
|
|
color: var(--ifm-color-primary-light);
|
|
}
|
|
|
|
html[data-theme="dark"] &:not(.menu__link--active):hover {
|
|
background-color: var(--ifm-color-primary);
|
|
}
|
|
|
|
html[data-theme="dark"] &:not(.menu__link--active):active {
|
|
background-color: var(--ifm-color-primary-light);
|
|
color: var(--ifm-color-primary);
|
|
}
|
|
|
|
&.menu__link--sublist {
|
|
color: var(--ifm-color-primary-dark);
|
|
padding-right: 2rem;
|
|
|
|
&:hover {
|
|
background-color: var(--ifm-color-primary-light);
|
|
}
|
|
|
|
html[data-theme="dark"] & {
|
|
color: var(--ifm-color-primary-light);
|
|
}
|
|
html[data-theme="dark"] &:active,
|
|
html[data-theme="dark"] &:focus,
|
|
html[data-theme="dark"] &:hover {
|
|
color: var(--ifm-color-primary-light);
|
|
background-color: var(--ifm-color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* docsearch */
|
|
.DocSearch-Button-Container {
|
|
.DocSearch-Search-Icon {
|
|
display: none;
|
|
}
|
|
&:before {
|
|
content: "";
|
|
background-color: black;
|
|
mask: url("/img/Dagger_Icons_Search.svg");
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
html[data-theme="dark"] & {
|
|
background-color: var(--ifm-color-primary-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.DocSearch-Button {
|
|
margin-right: 2rem !important;
|
|
@media (min-width: 997px) {
|
|
width: 200px;
|
|
}
|
|
@media (min-width: 1160px) {
|
|
width: 350px;
|
|
}
|
|
html[data-theme="dark"] & {
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
/* pagination */
|
|
.pagination-nav__label svg {
|
|
vertical-align: middle;
|
|
|
|
html[data-theme="dark"] & path {
|
|
fill: var(--ifm-color-primary-light);
|
|
}
|
|
}
|
|
|
|
/* admonition */
|
|
|
|
div[class*="admonition-"] .admonition-icon svg {
|
|
display: none;
|
|
}
|
|
|
|
img[alt="github-contribute"] {
|
|
display: block;
|
|
width: 180px;
|
|
}
|
|
|
|
@mixin admonitionIcon($args...) {
|
|
@each $name, $path in meta.keywords($args) {
|
|
$bgColor: if(
|
|
$name==danger,
|
|
var(--ifm-color-primary-light),
|
|
var(--ifm-color-primary-dark)
|
|
);
|
|
.admonition-#{$name} .admonition-icon::before {
|
|
mask: url($path);
|
|
content: "";
|
|
background-color: var(--ifm-color-primary-dark);
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include admonitionIcon(
|
|
$note: "/img/Dagger_Icons_Note.svg",
|
|
$tip: "/img/Dagger_Icons_Tip.svg",
|
|
$info: "/img/Dagger_Icons_Info.svg",
|
|
$caution: "/img/Dagger_Icons_Caution.svg",
|
|
$danger: "/img/Dagger_Icons_Danger.svg"
|
|
);
|
|
|
|
$alert: secondary, success, info, warning, danger;
|
|
|
|
@each $name in $alert {
|
|
$color: if(
|
|
$name==danger,
|
|
var(--ifm-color-primary-light),
|
|
var(--ifm-color-primary-dark)
|
|
);
|
|
|
|
.admonition.alert--#{$name} {
|
|
color: $color;
|
|
}
|
|
}
|