docs: 💄 apply dagger style
Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
This commit is contained in:
slumbering
@@ -11,63 +11,48 @@
|
||||
--ifm-color-primary-dark: #131226;
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: #fffef3;
|
||||
--ifm-color-primary-light: #fffef6;
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-color-secondary: #66ac9f50;
|
||||
--ifm-navbar-height: 5rem;
|
||||
--ifm-background-color: var(--ifm-color-primary-light);
|
||||
--ifm-navbar-background-color: var(--ifm-color-primary-light);
|
||||
--ifm-menu-color: var(--ifm-color-primary-dark);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-dark);
|
||||
--ifm-menu-color-background-hover: #fdf9d7;
|
||||
--ifm-font-family-base: "Karla", sans-serif;
|
||||
/* --ifm-font-family-monospace: "Karla", sans-serif; */
|
||||
--ifm-font-family-monospace: "Courier new", sans-serif;
|
||||
--ifm-code-background: var(--ifm-color-primary);
|
||||
--ifm-code-font-size: 100%;
|
||||
--ifm-code-border-radius: 2rem;
|
||||
--ifm-code-color: var(--ifm-color-primary-light);
|
||||
--ifm-code-padding-vertical: 0.3rem;
|
||||
--ifm-code-padding-horizontal: 0.5rem;
|
||||
--ifm-h2-font-size: 2rem;
|
||||
--ifm-menu-color-background-active: var(--ifm-color-primary);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-light);
|
||||
--ifm-leading-desktop: 2;
|
||||
--ifm-toc-border-color: transparent;
|
||||
--ifm-toc-link-color: var(--ifm-color-primary-dark);
|
||||
--ifm-font-color-base: var(--ifm-color-primary-dark);
|
||||
--ifm-link-color: var(--ifm-color-primary-dark);
|
||||
--ifm-link-hover-color: var(--ifm-color-primary);
|
||||
--ifm-pre-padding: 2rem;
|
||||
--ifm-pagination-nav-border-radius: 2rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-background-color: var(--ifm-color-primary-dark);
|
||||
--ifm-navbar-background-color: transparent;
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-light);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-light);
|
||||
--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);
|
||||
}
|
||||
|
||||
#__docusaurus {
|
||||
background-color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #__docusaurus {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--ifm-color-primary-dark),
|
||||
var(--ifm-color-primary)
|
||||
);
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
height: var(--ifm-navbar-height);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
max-width: var(--ifm-container-width-xl);
|
||||
align-self: center;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
max-width: var(--ifm-container-width-xl);
|
||||
align-self: center;
|
||||
}
|
||||
/* global */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
@@ -90,6 +75,58 @@ p {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#__docusaurus {
|
||||
background-color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #__docusaurus {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--ifm-color-primary-dark),
|
||||
var(--ifm-color-primary)
|
||||
);
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
.navbar__brand {
|
||||
height: var(--ifm-navbar-height);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
max-width: var(--ifm-container-width-xl);
|
||||
align-self: center;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* main */
|
||||
.main-wrapper {
|
||||
max-width: var(--ifm-container-width-xl);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
main[class^="docMainContainer"] {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 16px 4px #13122610;
|
||||
border-radius: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] main[class^="docMainContainer"] {
|
||||
background: var(--ifm-color-primary);
|
||||
box-shadow: 0px 4px 16px 4px #13122610;
|
||||
border-radius: 2rem;
|
||||
margin-top: 1rem;
|
||||
color: #fffef6;
|
||||
}
|
||||
|
||||
/* table-of-contents */
|
||||
.table-of-contents {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -101,3 +138,72 @@ html[data-theme="dark"] .table-of-contents__link--active,
|
||||
html[data-theme="dark"] .table-of-contents__link:hover {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
/* codeBlock */
|
||||
div[class^="codeBlock"] {
|
||||
border-radius: var(--ifm-code-border-radius);
|
||||
background-color: var(--ifm-color-primary) !important;
|
||||
}
|
||||
html[data-theme="dark"] div[class^="codeBlock"] {
|
||||
background-color: var(--ifm-color-primary-light) !important;
|
||||
}
|
||||
|
||||
div[class^="codeBlockLines"] .token-line {
|
||||
color: var(--ifm-color-primary-light) !important;
|
||||
}
|
||||
html[data-theme="dark"] div[class^="codeBlockLines"] .token-line {
|
||||
color: var(--ifm-color-primary) !important;
|
||||
}
|
||||
/* badge */
|
||||
.badge--secondary {
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
/* hash-link */
|
||||
.hash-link {
|
||||
color: #40b8bb;
|
||||
}
|
||||
|
||||
.hash-link:hover {
|
||||
color: #175761;
|
||||
}
|
||||
|
||||
.hash-link:focus {
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
/* link */
|
||||
.menu__link {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.menu__link:focus {
|
||||
background-color: var(--ifm-color-primary-dark);
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
.menu__link:active {
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .menu__link {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .menu__link:hover {
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
html[data-theme="dark"] .menu__link[href=""]:hover,
|
||||
html[data-theme="dark"] .menu__link[href="#"]:hover {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .menu__link:focus {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .menu__link:active {
|
||||
background-color: var(--ifm-color-primary-light);
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
97
tools/daggosaurus/src/theme/Toggle/index.js
Normal file
97
tools/daggosaurus/src/theme/Toggle/index.js
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
import React, { useState, useRef, memo } from 'react';
|
||||
import { useThemeConfig } from '@docusaurus/theme-common';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import DarkIcon from "../../../static/img/Icon_Night-mode.svg"
|
||||
import LightIcon from "../../../static/img/Icon_Day-mode.svg"
|
||||
|
||||
const Dark = ({ icon, style }) => (
|
||||
<span className={clsx(styles.toggle, styles.dark)} style={style}>
|
||||
<DarkIcon />
|
||||
</span>
|
||||
);
|
||||
|
||||
const Light = ({ icon, style }) => (
|
||||
<span className={clsx(styles.toggle, styles.light)} style={style}>
|
||||
<LightIcon />
|
||||
</span>
|
||||
); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
|
||||
|
||||
const Toggle = memo(
|
||||
({ className, icons, checked: defaultChecked, disabled, onChange }) => {
|
||||
const [checked, setChecked] = useState(defaultChecked);
|
||||
const [focused, setFocused] = useState(false);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const handleToggle = (e) => {
|
||||
const checkbox = inputRef.current;
|
||||
|
||||
if (!checkbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.target !== checkbox) {
|
||||
e.preventDefault();
|
||||
checkbox.focus();
|
||||
checkbox.click();
|
||||
return;
|
||||
}
|
||||
|
||||
setChecked(checkbox?.checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx('react-toggle', className, {
|
||||
'react-toggle--checked': checked,
|
||||
'react-toggle--focus': focused,
|
||||
'react-toggle--disabled': disabled,
|
||||
})}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
onClick={handleToggle}>
|
||||
<div className="react-toggle-track">
|
||||
<div className="react-toggle-track-check">{icons.checked}</div>
|
||||
<div className="react-toggle-track-x">{icons.unchecked}</div>
|
||||
</div>
|
||||
<div className="react-toggle-thumb" />
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
checked={checked}
|
||||
type="checkbox"
|
||||
className="react-toggle-screenreader-only"
|
||||
aria-label="Switch between dark and light mode"
|
||||
onChange={onChange}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default function (props) {
|
||||
const {
|
||||
colorMode: {
|
||||
switchConfig: { darkIcon, darkIconStyle, lightIcon, lightIconStyle },
|
||||
},
|
||||
} = useThemeConfig();
|
||||
const { isClient } = useDocusaurusContext();
|
||||
return (
|
||||
<Toggle
|
||||
disabled={!isClient}
|
||||
icons={{
|
||||
checked: <Dark icon={darkIcon} style={darkIconStyle} />,
|
||||
unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
105
tools/daggosaurus/src/theme/Toggle/styles.module.css
Normal file
105
tools/daggosaurus/src/theme/Toggle/styles.module.css
Normal file
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
}
|
||||
.toggle::before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/**
|
||||
* styles for React Toggle
|
||||
* copied over because we want to allow user to swizzle it and modify the css
|
||||
* and also to make sure its compatible with our dark mode
|
||||
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
|
||||
*/
|
||||
:global(.react-toggle) {
|
||||
touch-action: pan-x;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:global(.react-toggle-screenreader-only) {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
:global(.react-toggle--disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track) {
|
||||
width: 55px;
|
||||
height: 24px;
|
||||
border-radius: 30px;
|
||||
background-color: #40b8bb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-check) {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"] .react-toggle .react-toggle-track-check),
|
||||
:global(.react-toggle--checked .react-toggle-track-check) {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-x) {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
right: 6px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"] .react-toggle .react-toggle-track-x),
|
||||
:global(.react-toggle--checked .react-toggle-track-x) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global(.react-toggle-thumb) {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 3px solid var(--ifm-color-primary-dark);
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"] .react-toggle .react-toggle-thumb),
|
||||
:global(.react-toggle--checked .react-toggle-thumb) {
|
||||
left: 31px;
|
||||
}
|
||||
Reference in New Issue
Block a user