feat: update for doks 0.3.4
This commit is contained in:
Henk Verlinde
@ -4,7 +4,11 @@
|
||||
|
||||
$body-bg-dark: $gray-900;
|
||||
$body-overlay-dark: darken($body-bg-dark, 2.5%);
|
||||
|
||||
/*
|
||||
$border-dark: darken($body-bg-dark, 2.5%);
|
||||
*/
|
||||
$border-dark: $gray-800;
|
||||
$body-color-dark: $gray-300;
|
||||
$dots-dark: darken($body-color-dark, 50%);
|
||||
|
||||
@ -18,118 +22,163 @@ $navbar-dark-active-color: $link-color-dark;
|
||||
|
||||
/** Theme styles */
|
||||
|
||||
body.dark {
|
||||
[data-dark-mode] body {
|
||||
background: $body-bg-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark a {
|
||||
[data-dark-mode] body a {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark a.text-body {
|
||||
[data-dark-mode] body a.text-body {
|
||||
color: $body-color-dark !important;
|
||||
}
|
||||
|
||||
body.dark .btn-primary {
|
||||
[data-dark-mode] body .btn-primary {
|
||||
@include button-variant($button-color-dark, $button-color-dark);
|
||||
|
||||
color: $body-bg-dark !important;
|
||||
}
|
||||
|
||||
body.dark .btn-outline-primary {
|
||||
[data-dark-mode] body .btn-outline-primary {
|
||||
@include button-outline-variant($button-color-dark, $button-color-dark);
|
||||
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-outline-primary:hover {
|
||||
[data-dark-mode] body .btn-outline-primary:hover {
|
||||
color: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .navbar {
|
||||
background: $body-bg-dark;
|
||||
opacity: 0.975;
|
||||
[data-dark-mode] body .btn-doks-light {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .show > .btn-doks-light,
|
||||
[data-dark-mode] body .btn-doks-light:hover,
|
||||
[data-dark-mode] body .btn-doks-light:active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .btn-menu svg {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .doks-sidebar-toggle {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .btn-menu:hover,
|
||||
[data-dark-mode] body .btn-doks-light:hover,
|
||||
[data-dark-mode] body .doks-sidebar-toggle:hover {
|
||||
background: $body-overlay-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .dropdown-menu {
|
||||
@extend .dropdown-menu-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .navbar,
|
||||
[data-dark-mode] body .doks-subnavbar {
|
||||
background-color: rgba(33, 37, 41, 0.95);
|
||||
border-bottom: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark.home .navbar {
|
||||
[data-dark-mode] body.home .navbar {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-brand {
|
||||
[data-dark-mode] body .offcanvas-header {
|
||||
border-bottom: 1px solid $gray-800;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .offcanvas .nav-link {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .offcanvas .nav-link:hover,
|
||||
[data-dark-mode] body .offcanvas .nav-link:focus {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .offcanvas .nav-link.active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .navbar-light .navbar-brand {
|
||||
color: $navbar-dark-color !important;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-nav .nav-link {
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-nav .nav-link:hover,
|
||||
body.dark .navbar-light .navbar-nav .nav-link:focus {
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover,
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-nav .nav-link.disabled {
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-nav .show > .nav-link,
|
||||
body.dark .navbar-light .navbar-nav .active > .nav-link,
|
||||
body.dark .navbar-light .navbar-nav .nav-link.show,
|
||||
body.dark .navbar-light .navbar-nav .nav-link.active {
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link,
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link,
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show,
|
||||
[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-text {
|
||||
[data-dark-mode] body .navbar-light .navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .alert-primary a {
|
||||
[data-dark-mode] body .alert-primary a {
|
||||
color: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .alert-warning {
|
||||
[data-dark-mode] body .alert-warning {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .page-links a {
|
||||
[data-dark-mode] body .page-links a {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle-nav a {
|
||||
[data-dark-mode] body .btn-toggle-nav a {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .showcase-meta a {
|
||||
[data-dark-mode] body .showcase-meta a {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .showcase-meta a:hover,
|
||||
body.dark .showcase-meta a:focus {
|
||||
[data-dark-mode] body .showcase-meta a:hover,
|
||||
[data-dark-mode] body .showcase-meta a:focus {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-link:hover,
|
||||
body.dark .docs-link.active,
|
||||
body.dark .page-links a:hover {
|
||||
[data-dark-mode] body .docs-link:hover,
|
||||
[data-dark-mode] body .docs-link.active,
|
||||
[data-dark-mode] body .page-links a:hover {
|
||||
text-decoration: none;
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle {
|
||||
[data-dark-mode] body .btn-toggle {
|
||||
color: $body-color-dark;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle:hover,
|
||||
body.dark .btn-toggle:focus {
|
||||
[data-dark-mode] body .btn-toggle:hover,
|
||||
[data-dark-mode] body .btn-toggle:focus {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle::before {
|
||||
[data-dark-mode] body .btn-toggle::before {
|
||||
width: 1.25em;
|
||||
line-height: 0;
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
@ -138,59 +187,61 @@ body.dark .btn-toggle::before {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle[aria-expanded="true"] {
|
||||
[data-dark-mode] body .btn-toggle[aria-expanded="true"] {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle[aria-expanded="true"]::before {
|
||||
[data-dark-mode] body .btn-toggle[aria-expanded="true"]::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
body.dark .btn-toggle-nav a:hover,
|
||||
body.dark .btn-toggle-nav a:focus {
|
||||
[data-dark-mode] body .btn-toggle-nav a:hover,
|
||||
[data-dark-mode] body .btn-toggle-nav a:focus {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .btn-toggle-nav a.active {
|
||||
[data-dark-mode] body .btn-toggle-nav a.active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-text a {
|
||||
[data-dark-mode] body .navbar-light .navbar-text a {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
body.dark .docs-links h3.sidebar-link a,
|
||||
body.dark .page-links h3.sidebar-link a {
|
||||
[data-dark-mode] body .docs-links h3.sidebar-link a,
|
||||
[data-dark-mode] body .page-links h3.sidebar-link a {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-text a:hover,
|
||||
body.dark .navbar-light .navbar-text a:focus {
|
||||
[data-dark-mode] body .navbar-light .navbar-text a:hover,
|
||||
[data-dark-mode] body .navbar-light .navbar-text a:focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
body.dark .navbar .btn-link {
|
||||
[data-dark-mode] body .navbar .btn-link {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .content .btn-link {
|
||||
[data-dark-mode] body .content .btn-link {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .content .btn-link:hover {
|
||||
[data-dark-mode] body .content .btn-link:hover {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .navbar .btn-link:hover {
|
||||
[data-dark-mode] body .navbar .btn-link:hover {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
body.dark .navbar .btn-link:active {
|
||||
[data-dark-mode] body .navbar .btn-link:active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
body.dark .form-control.is-search {
|
||||
[data-dark-mode] body .form-control.is-search {
|
||||
background: $body-overlay-dark;
|
||||
border: 1px solid transparent;
|
||||
color: $gray-300;
|
||||
|
||||
/*
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
@ -200,180 +251,232 @@ body.dark .form-control.is-search {
|
||||
*/
|
||||
}
|
||||
|
||||
body.dark .navbar-form::after {
|
||||
[data-dark-mode] body .form-control.is-search:focus {
|
||||
border: 1px solid $link-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .doks-search::after {
|
||||
color: $gray-300;
|
||||
border: 1px solid $gray-700;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .text-dark {
|
||||
color: $body-color-dark !important;
|
||||
}
|
||||
|
||||
/*
|
||||
[data-dark-mode] body .navbar-form::after {
|
||||
color: $gray-600;
|
||||
border: 1px solid $gray-800;
|
||||
}
|
||||
*/
|
||||
|
||||
body.dark .form-control {
|
||||
color: $gray-500;
|
||||
[data-dark-mode] body .form-control {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
body.dark .form-control:focus {
|
||||
box-shadow: 0 0 0 0.2rem $focus-color-dark;
|
||||
[data-dark-mode] body .form-control::placeholder {
|
||||
color: $gray-400;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.dark .border-top {
|
||||
[data-dark-mode] body .border-top {
|
||||
border-top: 1px solid $border-dark !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
body.dark .docs-sidebar {
|
||||
[data-dark-mode] body .docs-sidebar {
|
||||
order: 0;
|
||||
border-right: 1px solid $border-dark;
|
||||
}
|
||||
}
|
||||
|
||||
body.dark .docs-navigation {
|
||||
[data-dark-mode] body .docs-navigation {
|
||||
border-top: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark pre code::-webkit-scrollbar-thumb {
|
||||
[data-dark-mode] body pre code::-webkit-scrollbar-thumb {
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
body.dark pre code:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border-dark transparent;
|
||||
}
|
||||
|
||||
body.dark pre code::-webkit-scrollbar-thumb:hover {
|
||||
background: $gray-500;
|
||||
}
|
||||
|
||||
body.dark code:not(.hljs):not(.language-mermaid) {
|
||||
[data-dark-mode] body code:not(.hljs) {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .mermaid,
|
||||
body.dark pre code.language-mermaid {
|
||||
background: $white;
|
||||
[data-dark-mode] body pre code:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border-dark transparent;
|
||||
}
|
||||
|
||||
body.dark blockquote {
|
||||
[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover {
|
||||
background: $gray-500;
|
||||
}
|
||||
|
||||
[data-dark-mode] body blockquote {
|
||||
border-left: 3px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark .footer {
|
||||
[data-dark-mode] body .footer {
|
||||
border-top: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links,
|
||||
body.dark .docs-toc {
|
||||
[data-dark-mode] body .docs-links,
|
||||
[data-dark-mode] body .docs-toc {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $body-bg-dark $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links::-webkit-scrollbar,
|
||||
body.dark .docs-toc::-webkit-scrollbar {
|
||||
[data-dark-mode] body .docs-links::-webkit-scrollbar,
|
||||
[data-dark-mode] body .docs-toc::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
body.dark .docs-links::-webkit-scrollbar-track,
|
||||
body.dark .docs-toc::-webkit-scrollbar-track {
|
||||
[data-dark-mode] body .docs-links::-webkit-scrollbar-track,
|
||||
[data-dark-mode] body .docs-toc::-webkit-scrollbar-track {
|
||||
background: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links::-webkit-scrollbar-thumb,
|
||||
body.dark .docs-toc::-webkit-scrollbar-thumb {
|
||||
[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb,
|
||||
[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb {
|
||||
background: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links:hover,
|
||||
body.dark .docs-toc:hover {
|
||||
[data-dark-mode] body .docs-links:hover,
|
||||
[data-dark-mode] body .docs-toc:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border-dark $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links:hover::-webkit-scrollbar-thumb,
|
||||
body.dark .docs-toc:hover::-webkit-scrollbar-thumb {
|
||||
[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb,
|
||||
[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb {
|
||||
background: $border-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links::-webkit-scrollbar-thumb:hover,
|
||||
body.dark .docs-toc::-webkit-scrollbar-thumb:hover {
|
||||
[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover,
|
||||
[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover {
|
||||
background: $border-dark;
|
||||
}
|
||||
|
||||
body.dark .docs-links h3:not(:first-child) {
|
||||
[data-dark-mode] body .docs-links h3:not(:first-child) {
|
||||
border-top: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark a.docs-link {
|
||||
[data-dark-mode] body a.docs-link {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .page-links li:not(:first-child) {
|
||||
[data-dark-mode] body .page-links li:not(:first-child) {
|
||||
border-top: 1px dashed $border-dark;
|
||||
}
|
||||
|
||||
body.dark .card {
|
||||
[data-dark-mode] body .card {
|
||||
background: $body-bg-dark;
|
||||
border: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark .card.bg-light {
|
||||
[data-dark-mode] body .card.bg-light {
|
||||
background: $body-overlay-dark !important;
|
||||
}
|
||||
|
||||
body.dark .navbar .menu-icon .navicon {
|
||||
[data-dark-mode] body .navbar .menu-icon .navicon {
|
||||
background: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .navbar .menu-icon .navicon::before,
|
||||
body.dark .navbar .menu-icon .navicon::after {
|
||||
[data-dark-mode] body .navbar .menu-icon .navicon::before,
|
||||
[data-dark-mode] body .navbar .menu-icon .navicon::after {
|
||||
background: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .logo-light {
|
||||
[data-dark-mode] body .logo-light {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dark .logo-dark {
|
||||
[data-dark-mode] body .logo-dark {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
body.dark .bg-light {
|
||||
[data-dark-mode] body .bg-light {
|
||||
background: darken($body-bg-dark, 1.5%) !important;
|
||||
}
|
||||
|
||||
body.dark .bg-dots {
|
||||
[data-dark-mode] body .bg-dots {
|
||||
background-image: radial-gradient($dots-dark 15%, transparent 15%);
|
||||
}
|
||||
|
||||
body.dark .text-muted {
|
||||
[data-dark-mode] body .text-muted {
|
||||
color: darken($body-color-dark, 7.5%) !important;
|
||||
}
|
||||
|
||||
body.dark .alert-primary {
|
||||
[data-dark-mode] body .alert-primary {
|
||||
background: $link-color-dark;
|
||||
color: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .figure-caption {
|
||||
[data-dark-mode] body .figure-caption {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark table {
|
||||
[data-dark-mode] body table {
|
||||
@extend .table-dark;
|
||||
}
|
||||
|
||||
body.dark .copy-status::after {
|
||||
[data-dark-mode] body .copy-status::after {
|
||||
content: "Copy";
|
||||
display: block;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .copy-status:hover::after {
|
||||
[data-dark-mode] body .copy-status:hover::after {
|
||||
content: "Copy";
|
||||
display: block;
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark .copy-status:focus::after,
|
||||
body.dark .copy-status:active::after {
|
||||
[data-dark-mode] body .copy-status:focus::after,
|
||||
[data-dark-mode] body .copy-status:active::after {
|
||||
content: "Copied";
|
||||
display: block;
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
/*
|
||||
[data-dark-mode] body .dropdown-toggle:focus,
|
||||
[data-dark-mode] body .doks-sidebar-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem $focus-color-dark;
|
||||
}
|
||||
*/
|
||||
|
||||
[data-dark-mode] body .offcanvas {
|
||||
background-color: $body-bg-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .btn-close {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+");
|
||||
background-size: 1.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
[data-dark-mode] body .alert-dismissible .btn-close {
|
||||
background-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
[data-dark-mode] body .btn-close:focus {
|
||||
box-shadow: 0 0 0 0.2rem $focus-color-dark;
|
||||
}
|
||||
*/
|
||||
|
||||
[data-dark-mode] body hr.text-black-50 {
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .email-form .form-control {
|
||||
background: $body-overlay-dark;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .email-form .form-control:focus {
|
||||
border: 1px solid $link-color-dark;
|
||||
}
|
||||
|
||||
@ -24,10 +24,27 @@ h6,
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
padding-top: 1.0625rem;
|
||||
padding-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h5.offcanvas-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.docs {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
body {
|
||||
font-size: $font-size-md;
|
||||
|
||||
/*
|
||||
padding-top: 4rem !important;
|
||||
*/
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -85,9 +102,11 @@ a.btn:focus {
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
body {
|
||||
padding-top: 3.5625rem;
|
||||
}
|
||||
*/
|
||||
|
||||
.docs-sidebar {
|
||||
order: 2;
|
||||
@ -227,3 +246,23 @@ body {
|
||||
.katex {
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
border-top: 4px solid;
|
||||
border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.modal-backdrop.show {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ $purple: #5d2f86;
|
||||
$brown: #aa9c84;
|
||||
|
||||
$blue-300: #8ed6fb;
|
||||
$pink-100: #fcfaff;
|
||||
$pink-500: #d32e9d;
|
||||
|
||||
$primary: $purple;
|
||||
@ -115,7 +116,7 @@ $font-size-lg: $font-size-base * 1.25;
|
||||
$font-size-md: $font-size-base * 1.125;
|
||||
$font-size-sm: $font-size-base * 0.875;
|
||||
|
||||
$line-height-base: 1.5;
|
||||
// $line-height-base: 1.5;
|
||||
|
||||
$headings-font-family: null;
|
||||
$headings-font-weight: 700;
|
||||
@ -159,3 +160,30 @@ $alert-border-width: 0;
|
||||
$alert-bg-scale: 0;
|
||||
$alert-border-scale: 0;
|
||||
$alert-color-scale: 0;
|
||||
|
||||
// docsearch
|
||||
$dropdown-config: (
|
||||
main-color: $purple,
|
||||
layout-type: normal,
|
||||
layout-width: normal,
|
||||
layout-alignment: align,
|
||||
background-color: $white,
|
||||
border-radius: 4,
|
||||
border-width: 1,
|
||||
border-color: $gray-200,
|
||||
box-shadow: none,
|
||||
branding-position: bottom,
|
||||
spacing: normal,
|
||||
include-desc: yes,
|
||||
background-category-header: $white,
|
||||
font-size: normal,
|
||||
header-color: $black,
|
||||
title-color: $black,
|
||||
subtitle-color: $black,
|
||||
text-color: $black,
|
||||
highlight-color: $purple,
|
||||
highlight-opacity: 0.1,
|
||||
highlight-type: underline
|
||||
);
|
||||
|
||||
$input-btn-focus-width: 0;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.docs .alert {
|
||||
.docs main .alert {
|
||||
margin: 2rem -1.5rem;
|
||||
}
|
||||
|
||||
@ -62,6 +62,28 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.alert-dismissible .btn-close {
|
||||
position: absolute;
|
||||
|
||||
/*
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
*/
|
||||
top: 0.75rem;
|
||||
right: 1rem;
|
||||
z-index: 2;
|
||||
padding: 0.625rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-size: 1.5rem;
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.alert-dismissible .btn-close {
|
||||
background-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert code {
|
||||
background: darken($beige, 5%);
|
||||
color: $black;
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
}
|
||||
|
||||
#mode {
|
||||
margin-right: 1.25rem;
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.btn-link:focus {
|
||||
@ -18,7 +20,8 @@
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
#mode {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 1.125rem;
|
||||
margin-right: -0.375rem;
|
||||
}
|
||||
|
||||
.navbar .btn-link {
|
||||
@ -42,11 +45,11 @@ body .toggle-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.dark .toggle-light {
|
||||
[data-dark-mode] body .toggle-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.dark .toggle-dark {
|
||||
[data-dark-mode] body .toggle-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -183,3 +186,26 @@ pre {
|
||||
.btn-toggle-nav a.active {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
.doks-navbar .dropdown-menu,
|
||||
.doks-subnavbar .dropdown-menu {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.doks-navbar .dropdown-item.current,
|
||||
.doks-subnavbar .dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem top 0.6rem;
|
||||
background-size: 0.75rem 0.75rem;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-size: 1.5rem;
|
||||
}
|
||||
|
||||
.offcanvas-header .btn-close {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
|
||||
#suggestions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: calc(100vw - 3rem);
|
||||
z-index: $zindex-dropdown;
|
||||
}
|
||||
|
||||
#suggestions a {
|
||||
@ -53,7 +54,7 @@
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
#suggestions {
|
||||
width: 30rem;
|
||||
width: 31.125rem;
|
||||
}
|
||||
|
||||
#suggestions a {
|
||||
|
||||
@ -44,19 +44,19 @@ Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body.dark .hljs {
|
||||
[data-dark-mode] body .hljs {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .hljs-string,
|
||||
body.dark .hljs-variable,
|
||||
body.dark .hljs-template-variable,
|
||||
body.dark .hljs-symbol,
|
||||
body.dark .hljs-bullet,
|
||||
body.dark .hljs-section,
|
||||
body.dark .hljs-addition,
|
||||
body.dark .hljs-attribute,
|
||||
body.dark .hljs-link {
|
||||
[data-dark-mode] body .hljs-string,
|
||||
[data-dark-mode] body .hljs-variable,
|
||||
[data-dark-mode] body .hljs-template-variable,
|
||||
[data-dark-mode] body .hljs-symbol,
|
||||
[data-dark-mode] body .hljs-bullet,
|
||||
[data-dark-mode] body .hljs-section,
|
||||
[data-dark-mode] body .hljs-addition,
|
||||
[data-dark-mode] body .hljs-attribute,
|
||||
[data-dark-mode] body .hljs-link {
|
||||
color: $blue-300;
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
/*
|
||||
.navbar-light .navbar-brand,
|
||||
.navbar-light .navbar-brand:hover,
|
||||
.navbar-light .navbar-brand:active {
|
||||
@ -23,6 +24,23 @@
|
||||
.navbar-light .navbar-nav .active .nav-link {
|
||||
color: $primary;
|
||||
}
|
||||
*/
|
||||
|
||||
.navbar {
|
||||
z-index: 1000;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
/*
|
||||
margin-top: 4px;
|
||||
*/
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar {
|
||||
z-index: 1025;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-brand {
|
||||
@ -39,7 +57,7 @@
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-left: 1.25rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@ -48,11 +66,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.navbar .container {
|
||||
@ -66,11 +86,49 @@
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button#doks-languages {
|
||||
margin-right: -0.5625rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
button#doks-versions {
|
||||
margin-right: -0.5625rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.offcanvas .nav-link {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.doks-subnavbar {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.doks-subnavbar .nav-link {
|
||||
padding: 0.5rem 1.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.doks-subnavbar .nav-link:first-child {
|
||||
padding: 0.5rem 1.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.offcanvas .nav-link:hover,
|
||||
.offcanvas .nav-link:focus {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
.offcanvas .nav-link.active {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
/*
|
||||
.navbar {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-bottom: 1px solid $gray-200;
|
||||
margin-top: 4px;
|
||||
}
|
||||
*/
|
||||
|
||||
.header-bar {
|
||||
border-top: 4px solid;
|
||||
@ -78,18 +136,24 @@
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.offcanvas .header-bar {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.home .navbar {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.navbar-form {
|
||||
position: relative;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
*/
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-brand {
|
||||
margin-right: 1rem !important;
|
||||
margin-right: 0.75rem !important;
|
||||
}
|
||||
|
||||
.main-nav .nav-item:first-child .nav-link,
|
||||
@ -102,13 +166,49 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.doks-search {
|
||||
max-width: 20rem;
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.navbar-form {
|
||||
margin-top: 0;
|
||||
margin-left: 6rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.form-control.is-search {
|
||||
padding-right: 4rem;
|
||||
border: 1px solid transparent;
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
.form-control.is-search:focus {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
.doks-search::after {
|
||||
position: absolute;
|
||||
top: 0.4625rem;
|
||||
right: 0.5375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.5rem;
|
||||
padding-right: 0.3125rem;
|
||||
padding-left: 0.3125rem;
|
||||
font-size: $font-size-base * 0.75;
|
||||
color: $gray-700;
|
||||
content: "Ctrl + /";
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-form {
|
||||
margin-left: 15rem;
|
||||
@ -120,23 +220,34 @@
|
||||
margin-left: 30rem;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.form-control.is-search {
|
||||
/*
|
||||
*/
|
||||
|
||||
/*
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
*/
|
||||
|
||||
/*
|
||||
padding-right: 2.5rem;
|
||||
background: $gray-100;
|
||||
border: 0;
|
||||
*/
|
||||
|
||||
/*
|
||||
/*
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
*/
|
||||
}
|
||||
|
||||
/*
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.navbar-form::after {
|
||||
position: absolute;
|
||||
top: 0.4625rem;
|
||||
@ -153,6 +264,7 @@
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
*/
|
||||
|
||||
/*! purgecss start ignore */
|
||||
.algolia-autocomplete {
|
||||
@ -170,12 +282,20 @@
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after {
|
||||
content: "|";
|
||||
content: "/";
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -266,3 +386,48 @@
|
||||
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.btn-menu,
|
||||
.doks-sidebar-toggle {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.btn-menu:hover,
|
||||
.btn-doks-light:hover,
|
||||
.doks-sidebar-toggle:hover {
|
||||
background: $pink-100;
|
||||
}
|
||||
|
||||
.btn-menu:focus,
|
||||
.doks-sidebar-toggle:focus,
|
||||
.doks-mode-toggle:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.doks-sidebar-toggle .doks-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doks-sidebar-toggle:not(.collapsed) .doks-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand,
|
||||
.navbar-light .navbar-brand:hover,
|
||||
.navbar-light .navbar-brand:active {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .active .nav-link {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user