mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-05-19 17:09:05 +00:00
feat: theme css ~full coverage
- fonts - interface bgs/borders - dim bg variants for callouts and board groups - manually-overriding code bg/fg - datepicker
This commit is contained in:
parent
ee69d44796
commit
2719751e2b
GPG Key ID:
7998D08F7D7BD7A8
@ -13,27 +13,52 @@
|
||||
// the css body below should be passed through https://css.github.io/csso/csso.html
|
||||
// and then saved to core/theme.css. repeat this process for both light and dark modes
|
||||
|
||||
// not yet themed: notion's new svg icons
|
||||
|
||||
// future application once cleaned up and improved:
|
||||
// generate theme at runtime rather than manually building styles
|
||||
|
||||
const darkMode = document.body.classList.contains("dark"),
|
||||
modeSelector = darkMode ? ".dark" : ":not(.dark)";
|
||||
let cssRoot = "",
|
||||
cssBody = "";
|
||||
|
||||
const generateQuerySelector = (el) => {
|
||||
if (el.tagName === "HTML") return "html";
|
||||
const parentSelector = generateQuerySelector(el.parentElement);
|
||||
if (el.id) return `${parentSelector} > #${el.id}`;
|
||||
const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
|
||||
style = el.getAttribute("style")
|
||||
? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
|
||||
: "",
|
||||
index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
|
||||
return `${parentSelector} > ${classes || style || index}`;
|
||||
},
|
||||
getComputedPropertyValue = (el, prop) => {
|
||||
const styles = window.getComputedStyle(el),
|
||||
value = styles.getPropertyValue(prop);
|
||||
return value;
|
||||
};
|
||||
const getComputedPropertyValue = (el, prop) => {
|
||||
const styles = window.getComputedStyle(el),
|
||||
value = styles.getPropertyValue(prop);
|
||||
return value;
|
||||
};
|
||||
|
||||
const generateFontStyles = () => {
|
||||
const fontSans = `ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, "Apple Color Emoji", Arial,
|
||||
sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"`,
|
||||
fontSerif = `Lyon-Text, Georgia, YuMincho, "Yu Mincho",
|
||||
"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC",
|
||||
"Songti SC", SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif`,
|
||||
fontMono = `iawriter-mono, Nitti, Menlo, Courier, monospace`,
|
||||
fontCode = `SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace`;
|
||||
cssRoot += `
|
||||
--theme--font-sans: ${fontSans};
|
||||
--theme--font-serif: ${fontSerif};
|
||||
--theme--font-mono: ${fontMono};
|
||||
--theme--font-code: ${fontCode};`;
|
||||
cssBody += `
|
||||
[style*='Segoe UI'] {
|
||||
font-family: var(--theme--font-sans, ${fontSans.split(',')[0]}), ${fontSans} !important;
|
||||
}
|
||||
[style*='Georgia'] {
|
||||
font-family: var(--theme--font-serif, ${fontSerif.split(',')[0]}), ${fontSerif} !important;
|
||||
}
|
||||
[style*='iawriter-mono'] {
|
||||
font-family: var(--theme--font-mono, ${fontMono.split(',')[0]}), ${fontMono} !important;
|
||||
}
|
||||
[style*='SFMono-Regular'] {
|
||||
font-family: var(--theme--font-code, ${fontCode.split(',')[0]}), ${fontCode} !important;
|
||||
}
|
||||
`;
|
||||
};
|
||||
generateFontStyles();
|
||||
|
||||
const generateForegroundStyles = () => {
|
||||
const rgbPrimary = darkMode ? "rgb(255, 255, 255)" : "rgb(55, 53, 47)",
|
||||
@ -41,8 +66,14 @@ const generateForegroundStyles = () => {
|
||||
defaultSecondary = darkMode
|
||||
? "rgb(155, 155, 155)"
|
||||
: "rgba(25, 23, 17, 0.6)",
|
||||
fgPrimary = new Set([rgbPrimary]),
|
||||
fgSecondary = new Set([defaultSecondary]);
|
||||
fgPrimary = new Set([
|
||||
rgbPrimary,
|
||||
darkMode ? "rgb(211, 211, 211)" : "rgba(255, 255, 255, 0.9)",
|
||||
]),
|
||||
fgSecondary = new Set([
|
||||
defaultSecondary,
|
||||
darkMode ? "rgb(127, 127, 127)" : "rgba(206, 205, 202, 0.6)",
|
||||
]);
|
||||
for (const el of document.querySelectorAll(
|
||||
'[style^="color"], [style*=" color"], [style*=";color"], [style*="fill"]'
|
||||
)) {
|
||||
@ -95,18 +126,118 @@ const generateForegroundStyles = () => {
|
||||
.notion-body${modeSelector} [style*="fill:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="fill: ${colorVal}"]`;
|
||||
cssBody += `
|
||||
${[...fgPrimary].map(mapFgToSelectors).join(", ")} {
|
||||
${[...fgPrimary].map(mapFgToSelectors).join(", ")} {
|
||||
color: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
caret-color: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
-webkit-text-fill-color: currentColor !important;
|
||||
text-decoration-color: currentColor !important;
|
||||
fill: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} .rdp-nav_icon,
|
||||
.notion-body${modeSelector} .rdp-head_cell,
|
||||
.notion-body${modeSelector} .rdp-day.rdp-day_outside,
|
||||
.notion-body${modeSelector} ::placeholder,
|
||||
${[...fgSecondary].map(mapFgToSelectors).join(", ")} {
|
||||
color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
caret-color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
-webkit-text-fill-color: currentColor !important;
|
||||
text-decoration-color: currentColor !important;
|
||||
fill: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
}
|
||||
${[...fgPrimary]
|
||||
.map(
|
||||
(colorVal) =>
|
||||
`.notion-body${modeSelector} :is(
|
||||
[style*="caret-color:${colorVal}"], [style*="caret-color: ${colorVal}"])`
|
||||
)
|
||||
.join(", ")} {
|
||||
caret-color: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} ::placeholder,
|
||||
${[...fgSecondary]
|
||||
.map(
|
||||
(colorVal) =>
|
||||
`.notion-body${modeSelector} :is(
|
||||
[style*="caret-color:${colorVal}"], [style*="caret-color: ${colorVal}"])`
|
||||
)
|
||||
.join(", ")} {
|
||||
caret-color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} [style*="-webkit-text-fill-color:"] {
|
||||
-webkit-text-fill-color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// borders
|
||||
const defaultBorder = darkMode ? "rgb(47, 47, 47)" : "rgb(233, 233, 231)",
|
||||
possibleBorders = darkMode
|
||||
? [defaultBorder.slice(4, -1), "255, 255, 255"]
|
||||
: [defaultBorder.slice(4, -1), "55, 53, 47"],
|
||||
borderColors = new Set([
|
||||
darkMode ? "rgb(37, 37, 37)" : "rgb(238, 238, 237)",
|
||||
]),
|
||||
boxShadows = new Set(
|
||||
darkMode
|
||||
? [
|
||||
"box-shadow: rgba(255, 255, 255, 0.094) 0px -1px 0px;",
|
||||
"box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;",
|
||||
"box-shadow: rgb(25, 25, 25) -3px 0px 0px, rgb(47, 47, 47) 0px 1px 0px;",
|
||||
]
|
||||
: [
|
||||
"box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;",
|
||||
"box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;",
|
||||
"box-shadow: white -3px 0px 0px, rgb(233, 233, 231) 0px 1px 0px;",
|
||||
]
|
||||
);
|
||||
for (const el of document.querySelectorAll(
|
||||
`[style*="border:"], [style*="border-right:"], [style*="border-left:"],
|
||||
[style*="border-top:"], [style*="border-bottom:"], [style*="box-shadow:"]`
|
||||
)) {
|
||||
const borderColor = el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))border(?:-\w+)?:\s*([^;]+);?/)?.[1];
|
||||
if (
|
||||
borderColor &&
|
||||
possibleBorders.some((border) => borderColor.includes(border))
|
||||
) {
|
||||
borderColors.add(borderColor);
|
||||
}
|
||||
const boxShadowStyle = el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))box-shadow:\s*([^;]+);?/)?.[0];
|
||||
if (
|
||||
boxShadowStyle &&
|
||||
possibleBorders.some((border) => boxShadowStyle.includes(border))
|
||||
) {
|
||||
boxShadows.add(boxShadowStyle);
|
||||
}
|
||||
}
|
||||
cssRoot += `--theme--fg-border: ${defaultBorder};`;
|
||||
cssBody += `
|
||||
.notion-body${modeSelector} ${[...borderColors]
|
||||
.map(
|
||||
(border) =>
|
||||
`[style*="${border}"]:is([style*="border:"],
|
||||
[style*="border-top:"], [style*="border-left:"],
|
||||
[style*="border-bottom:"], [style*="border-right:"])`
|
||||
)
|
||||
.join(", ")} {
|
||||
border-color: var(--theme--fg-border, ${defaultBorder}) !important;
|
||||
}
|
||||
${[...boxShadows]
|
||||
.map(
|
||||
(shadow) =>
|
||||
`.notion-body${modeSelector} [style*="${shadow}"] {
|
||||
${shadow
|
||||
.replace(
|
||||
/rgba?\([^\)]+\)/g,
|
||||
`var(--theme--fg-border, ${defaultBorder})`
|
||||
)
|
||||
.slice(0, -1)} !important;
|
||||
}`
|
||||
)
|
||||
.join("")}
|
||||
.notion-body${modeSelector} [style*="height: 1px;"][style*="background"] {
|
||||
background: var(--theme--fg-border, ${defaultBorder}) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const refs = {};
|
||||
@ -115,13 +246,17 @@ const generateForegroundStyles = () => {
|
||||
'.notion-selectable .notion-enable-hover[style*="color:"][style*="fill:"]'
|
||||
)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
if (el.getAttribute("style").includes("mono")) continue;
|
||||
const cssVar = `--theme--fg-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "color"),
|
||||
styleAttr = el.getAttribute("style");
|
||||
styleAttr = el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)[1];
|
||||
cssRoot += `${cssVar}: ${colorVal};`;
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} .notion-enable-hover[style*="${styleAttr}"]`
|
||||
`.notion-body${modeSelector} .notion-enable-hover[style*="${styleAttr}"],
|
||||
.notion-body${modeSelector} .notion-code-block span.token[style*="${styleAttr}"]`
|
||||
);
|
||||
}
|
||||
// block text color
|
||||
@ -140,20 +275,20 @@ const generateForegroundStyles = () => {
|
||||
);
|
||||
}
|
||||
// board text
|
||||
for (const parent of document.querySelectorAll(
|
||||
for (const group of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
// get color name from card
|
||||
const card = parent.querySelector('a[style*="background"]'),
|
||||
const card = group.querySelector('a[style*="background"]'),
|
||||
innerText = card.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || innerText.includes(" ")) continue;
|
||||
const el = parent.querySelector('[style*="height: 32px"]'),
|
||||
const el = group.querySelector('[style*="height: 32px"]'),
|
||||
colorVal = getComputedPropertyValue(el, "color"),
|
||||
cssVar = `--theme--fg-${
|
||||
// --fg-light_gray doesn't exist
|
||||
innerText === "light_gray" ? "secondary" : innerText
|
||||
}`,
|
||||
styleAttr = parent
|
||||
styleAttr = group
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
@ -175,6 +310,90 @@ const generateForegroundStyles = () => {
|
||||
generateForegroundStyles();
|
||||
|
||||
const generateBackgroundStyles = () => {
|
||||
const defaultPrimary = darkMode ? "rgb(25, 25, 25)" : "rgb(255, 255, 255)",
|
||||
defaultSecondary = darkMode ? "rgb(32, 32, 32)" : "rgb(251, 251, 250)",
|
||||
bgPrimary = new Set([
|
||||
defaultPrimary,
|
||||
...(darkMode
|
||||
? ["rgb(37, 37, 37)", "rgba(255, 255, 255, 0.13)"]
|
||||
: ["white", "rgb(247, 247, 247)"]),
|
||||
]),
|
||||
bgSecondary = new Set([
|
||||
defaultSecondary,
|
||||
...(darkMode
|
||||
? ["rgba(255, 255, 255, 0.0", "rgb(47, 47, 47)"]
|
||||
: ["rgb(253, 253, 253)", "rgb(15, 15, 15)"]),
|
||||
]);
|
||||
for (const el of document.querySelectorAll(
|
||||
'[style*="background:"], [style*="background-color:"]'
|
||||
)) {
|
||||
const colorVal = el
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)?.[1];
|
||||
if (colorVal.startsWith(`rgba(${defaultPrimary.slice(4, -1)}`)) {
|
||||
const alpha = +colorVal.slice(5, -1).split(", ")[3];
|
||||
if (alpha > 0.8) {
|
||||
bgPrimary.add(colorVal);
|
||||
} else bgSecondary.add(colorVal);
|
||||
}
|
||||
}
|
||||
cssRoot += `
|
||||
--theme--bg-primary: ${defaultPrimary};
|
||||
--theme--bg-secondary: ${defaultSecondary};
|
||||
`;
|
||||
const mapBgToSelectors = (colorVal) =>
|
||||
`.notion-body${modeSelector} [style*="background:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="background: ${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="background-color:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="background-color: ${colorVal}"]`;
|
||||
cssBody += `
|
||||
${[...bgPrimary].map(mapBgToSelectors).join(", ")} {
|
||||
background: var(--theme--bg-primary, ${defaultPrimary}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} .notion-focusable-within [style*="background"],
|
||||
${[...bgSecondary].map(mapBgToSelectors).join(", ")} {
|
||||
background: var(--theme--bg-secondary, ${defaultSecondary}) !important;
|
||||
}
|
||||
[style*="linear-gradient(to left, ${
|
||||
defaultPrimary === "rgb(255, 255, 255)" ? "white" : defaultPrimary
|
||||
} 20%, rgba(${defaultPrimary.slice(4, -1)}, 0) 100%)"] {
|
||||
background-image: linear-gradient(to left,
|
||||
var(--theme--bg-primary, ${defaultPrimary}) 20%, transparent 100%) !important;
|
||||
}
|
||||
[style*="linear-gradient(to right, ${
|
||||
defaultPrimary === "rgb(255, 255, 255)" ? "white" : defaultPrimary
|
||||
} 20%, rgba(${defaultPrimary.slice(4, -1)}, 0) 100%)"] {
|
||||
background-image: linear-gradient(to right,
|
||||
var(--theme--bg-primary, ${defaultPrimary}) 20%, transparent 100%) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// hovered elements, inputs and unchecked toggle backgrounds
|
||||
const bgHover = darkMode
|
||||
? ["rgba(255, 255, 255, 0.055)", "rgb(47, 47, 47)"]
|
||||
: [
|
||||
"rgba(55, 53, 47, 0.08)",
|
||||
"rgba(242, 241, 238, 0.6)",
|
||||
"rgb(225, 225, 225)",
|
||||
"rgb(239, 239, 238)",
|
||||
];
|
||||
cssRoot += `--theme--bg-hover: ${bgHover[0]};`;
|
||||
cssBody += `${bgHover
|
||||
.map(
|
||||
(hover) => `.notion-body${modeSelector} :is(
|
||||
[style*="background: ${hover}"], [style*="background-color: ${hover}"]
|
||||
)${
|
||||
hover === "rgb(47, 47, 47)"
|
||||
? '[style*="transition: background"]:hover'
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.join(", ")},
|
||||
.notion-body${modeSelector} [style*="height: 14px; width: 26px; border-radius: 44px;"][style*="rgba"] {
|
||||
background: var(--theme--bg-hover, ${bgHover[0]}) !important;
|
||||
}`;
|
||||
|
||||
// get bg variable values from tags
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-collection_view-block [style*="height: 20px; border-radius: 3px; padding-left: 6px;"]'
|
||||
)) {
|
||||
@ -186,11 +405,9 @@ const generateBackgroundStyles = () => {
|
||||
const refs = {};
|
||||
for (const targetSelector of [
|
||||
// inline highlight
|
||||
'.notion-selectable .notion-enable-hover[style^="background:"]',
|
||||
'.notion-selectable .notion-enable-hover[style*="background:"]',
|
||||
// block highlight
|
||||
'.notion-text-block > [style*="background:"]',
|
||||
// callout block
|
||||
'.notion-callout-block > div > [style*="background:"]',
|
||||
// database tag
|
||||
'[style*="height: 20px; border-radius: 3px; padding-left: 6px;"][style*="background:"]',
|
||||
'.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"]',
|
||||
@ -209,25 +426,67 @@ const generateBackgroundStyles = () => {
|
||||
);
|
||||
}
|
||||
}
|
||||
// board card: in light mode all have bg "white" by default,
|
||||
// must be styled based on parent
|
||||
for (const parent of document.querySelectorAll(
|
||||
// board cards
|
||||
for (const group of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
const el = parent.querySelector('a[style*="background"]'),
|
||||
innerText = el.innerText.replace("Drag image to reposition\n", "");
|
||||
const page = group.querySelector('a[style*="background"]'),
|
||||
innerText = page.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--bg-${innerText}`,
|
||||
const pageVar = `--theme--bg-${innerText}`,
|
||||
pageColor = getComputedPropertyValue(page, "background-color"),
|
||||
groupVar = `--theme--bg_dim-${innerText}`,
|
||||
groupColor = group
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
// get bg_dim variable values
|
||||
cssRoot += `${groupVar}: ${groupColor};`;
|
||||
// in light mode pages in board views all have bg "white"
|
||||
// by default, must be styled based on parent
|
||||
refs[`${pageVar}, ${pageColor}`] ??= [];
|
||||
refs[`${pageVar}, ${pageColor}`].push(
|
||||
`.notion-body${modeSelector} .notion-board-view
|
||||
.notion-board-group[style*="${groupColor}"] a[style*="background"]`
|
||||
);
|
||||
refs[`${groupVar}, ${groupColor}`] ??= [];
|
||||
refs[`${groupVar}, ${groupColor}`].push(
|
||||
`.notion-body${modeSelector} .notion-board-view
|
||||
[style*="${groupColor}"]:is(.notion-board-group, [style*="border-top-left-radius: 5px;"])`
|
||||
);
|
||||
}
|
||||
// use bg-yellow for notification highlights
|
||||
refs[`--theme--bg-yellow, rgba(255, 212, 0, 0.14)`] ??= [];
|
||||
refs[`--theme--bg-yellow, rgba(255, 212, 0, 0.14)`].push(
|
||||
`.notion-body${modeSelector} [style*="background: rgba(255, 212, 0, 0.14)"]`
|
||||
);
|
||||
// use bg_dim for callout blocks
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-callout-block > div > [style*="background:"]'
|
||||
)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--bg_dim-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "background-color"),
|
||||
styleAttr = parent
|
||||
styleAttr = el
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} .notion-board-view
|
||||
.notion-board-group[style*="${styleAttr}"] a[style*="background"]`
|
||||
`.notion-body${modeSelector} .notion-callout-block > div
|
||||
> [style*="background:"][style*="${styleAttr}"]`
|
||||
);
|
||||
}
|
||||
// use light_gray for taglike elements e.g. file property values
|
||||
const taglikeEl = document.querySelector(
|
||||
'[style*="height: 18px; border-radius: 3px; background"]'
|
||||
),
|
||||
taglikeBg = taglikeEl
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`--theme--bg-light_gray, ${taglikeBg}`] ??= [];
|
||||
refs[`--theme--bg-light_gray, ${taglikeBg}`].push(
|
||||
`[style*="height: 18px; border-radius: 3px; background"][style*="${taglikeBg}"]`
|
||||
);
|
||||
// group selectors with same bg together
|
||||
for (const varRef in refs) {
|
||||
cssBody += `${refs[varRef].join(",")} {
|
||||
background: var(${varRef}) !important;
|
||||
@ -242,19 +501,33 @@ const generateAccentStyles = () => {
|
||||
const accentPrimary = "rgb(35, 131, 226)",
|
||||
accentPrimaryHover = "rgb(0, 117, 211)",
|
||||
accentPrimaryContrast = "rgb(255, 255, 255)",
|
||||
accentPrimaryTransparent = "rgba(35, 131, 226, 0.14)",
|
||||
accentPrimaryTransparent = [
|
||||
"rgba(35, 131, 226, 0.14)",
|
||||
"rgba(35, 131, 226, 0.",
|
||||
],
|
||||
accentPrimaryBoxShadows = [
|
||||
"box-shadow: rgb(35, 131, 226) 0px 0px 0px 2px inset",
|
||||
],
|
||||
accentSecondary = [
|
||||
"rgb(235, 87, 87)",
|
||||
"rgb(180, 65, 60)",
|
||||
"rgb(211, 79, 67)",
|
||||
"rgb(205, 73, 69)",
|
||||
],
|
||||
accentSecondaryContrast = "rgb(255, 255, 255)",
|
||||
accentSecondaryTransparent = "rgba(235, 87, 87, 0.1)",
|
||||
accentSecondaryBorder = "1px solid rgb(110, 54, 48)";
|
||||
accentSecondaryBorder = [
|
||||
"border: 1px solid rgb(110, 54, 48)",
|
||||
"border: 1px solid rgba(235, 87, 87, 0.5)",
|
||||
"border: 2px solid rgb(110, 54, 48)",
|
||||
"border: 2px solid rgb(227, 134, 118)",
|
||||
"border-right: 1px solid rgb(180, 65, 60)",
|
||||
"border-right: 1px solid rgb(211, 79, 67)",
|
||||
];
|
||||
cssRoot += `--theme--accent-primary: ${accentPrimary};
|
||||
--theme--accent-primary_hover: ${accentPrimaryHover};
|
||||
--theme--accent-primary_contrast: ${accentPrimaryContrast};
|
||||
--theme--accent-primary_transparent: ${accentPrimaryTransparent};
|
||||
--theme--accent-primary_transparent: ${accentPrimaryTransparent[0]};
|
||||
--theme--accent-secondary: ${accentSecondary[0]};
|
||||
--theme--accent-secondary_contrast: ${accentSecondaryContrast};
|
||||
--theme--accent-secondary_transparent: ${accentSecondaryTransparent};`;
|
||||
@ -285,29 +558,75 @@ const generateAccentStyles = () => {
|
||||
.notion-table-selection-overlay [style*='border: 2px solid'] {
|
||||
border-color: var(--theme--accent-primary, ${accentPrimary}) !important;
|
||||
}
|
||||
.notion-focusable-within:focus-within {
|
||||
box-shadow: var(--theme--accent-primary, ${accentPrimary}) 0px 0px 0px 1px inset,
|
||||
var(--theme--accent-primary, ${accentPrimary}) 0px 0px 0px 2px !important;
|
||||
}
|
||||
.notion-focusable:focus-visible {
|
||||
box-shadow: var(--theme--accent-primary, ${accentPrimary}) 0px 0px 0px 1px inset,
|
||||
var(--theme--accent-primary, ${accentPrimary}) 0px 0px 0px 2px !important;
|
||||
}
|
||||
${[...accentPrimaryBoxShadows]
|
||||
.map(
|
||||
(shadow) =>
|
||||
`[style*="${shadow}"] {
|
||||
${shadow.replace(
|
||||
/rgba?\([^\)]+\)/g,
|
||||
`var(--theme--accent-primary, ${accentPrimary})`
|
||||
)} !important;
|
||||
}`
|
||||
)
|
||||
.join("")}
|
||||
*::selection,
|
||||
.notion-selectable-halo,
|
||||
[style*="background: ${accentPrimaryTransparent}"],
|
||||
[style*="background-color: ${accentPrimaryTransparent}"] {
|
||||
background: var(--theme--accent-primary_transparent, ${accentPrimaryTransparent}) !important;
|
||||
#notion-app .rdp-day:not(.rdp-day_disabled):not(.rdp-day_selected):not(.rdp-day_value):not(.rdp-day_start):not(.rdp-day_end):hover,
|
||||
[style*="background: ${accentPrimaryTransparent[1]}"],
|
||||
[style*="background-color: ${accentPrimaryTransparent[1]}"] {
|
||||
background: var(--theme--accent-primary_transparent, ${
|
||||
accentPrimaryTransparent[0]
|
||||
}) !important;
|
||||
}
|
||||
[style*="color: ${accentSecondary[0]}"],
|
||||
[style*="color: ${accentSecondary[1]}"],
|
||||
[style*="fill: ${accentSecondary[0]}"],
|
||||
[style*="fill: ${accentSecondary[1]}"] {
|
||||
color: var(--theme--accent-secondary, ${accentSecondary}) !important;
|
||||
${accentSecondary
|
||||
.map(
|
||||
(accent) =>
|
||||
`[style*="color: ${accent}"],
|
||||
[style*="fill: ${accent}"]`
|
||||
)
|
||||
.join(", ")} {
|
||||
color: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
fill: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
}
|
||||
[style*="background: ${accentSecondary[0]}"],
|
||||
[style*="background: ${accentSecondary[1]}"],
|
||||
[style*="background: ${accentSecondary[2]}"],
|
||||
[style*="background-color: ${accentSecondary[0]}"],
|
||||
[style*="background-color: ${accentSecondary[1]}"],
|
||||
[style*="background-color: ${accentSecondary[2]}"] {
|
||||
background: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
#notion-app .rdp-day_today:not(.rdp-day_selected):not(.rdp-day_value):not(.rdp-day_start):not(.rdp-day_end)::after,
|
||||
${accentSecondary
|
||||
.map(
|
||||
(accent) =>
|
||||
`[style*="background: ${accent}"],
|
||||
[style*="background-color: ${accent}"]`
|
||||
)
|
||||
.join(", ")} {
|
||||
background: var(--theme--accent-secondary, ${
|
||||
accentSecondary[0]
|
||||
}) !important;
|
||||
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
}
|
||||
[style*="background: ${accentSecondary[1]}"] + [style*="color: white;"] {
|
||||
#notion-app .rdp-day_today:not(.rdp-day_selected):not(.rdp-day_value):not(.rdp-day_start):not(.rdp-day_end),
|
||||
:is(${accentSecondary
|
||||
.map(
|
||||
(accent) =>
|
||||
`[style*="background: ${accent}"],
|
||||
[style*="background-color: ${accent}"]`
|
||||
)
|
||||
.join(", ")})
|
||||
+ :is([style*="fill: white;"], [style*="color: white;"]),
|
||||
:is(${accentSecondary
|
||||
.map(
|
||||
(accent) =>
|
||||
`[style*="background: ${accent}"],
|
||||
[style*="background-color: ${accent}"]`
|
||||
)
|
||||
.join(", ")})
|
||||
:is([style*="fill: white;"], [style*="color: white;"]) {
|
||||
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
}
|
||||
@ -315,10 +634,13 @@ const generateAccentStyles = () => {
|
||||
[style*="background-color: ${accentSecondaryTransparent}"] {
|
||||
background: var(--theme--accent-secondary_transparent, ${accentSecondaryTransparent}) !important;
|
||||
}
|
||||
[style*="border: ${accentSecondaryBorder}"] {
|
||||
border-color: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
}
|
||||
`;
|
||||
${accentSecondaryBorder
|
||||
.map((border) => `[style*="${border}"]`)
|
||||
.join(", ")} {
|
||||
border-color: var(--theme--accent-secondary, ${
|
||||
accentSecondary[0]
|
||||
}) !important;
|
||||
}`;
|
||||
};
|
||||
generateAccentStyles();
|
||||
|
||||
|
||||
@ -77,3 +77,12 @@
|
||||
transform: scale(1);
|
||||
transition: transform 80ms ease-in;
|
||||
}
|
||||
|
||||
/* patch: remove backgrounds from prism tokens */
|
||||
.notion-light-theme .token.operator,
|
||||
.notion-light-theme .token.entity,
|
||||
.notion-light-theme .token.url,
|
||||
.notion-light-theme .language-css .token.string,
|
||||
.notion-light-theme .style .token.string {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,545 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
// a development tool used for generating color variables
|
||||
// and the contents of colors.css
|
||||
|
||||
// included for posterity/updates
|
||||
// -- not executed by the enhancer at runtime
|
||||
|
||||
const lightGray = {
|
||||
'light': {
|
||||
'tag': 'rgba(227, 226, 224, 0.5)',
|
||||
'tag-text': 'rgb(50, 48, 44)',
|
||||
'board': 'rgba(249, 249, 245, 0.5)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgba(145, 145, 142, 0.5)',
|
||||
},
|
||||
'dark': {
|
||||
'tag': 'rgba(71, 76, 80, 0.7)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgba(51, 55, 59, 0.7)',
|
||||
'board-card': 'rgba(60, 65, 68, 0.7)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgba(107, 112, 116, 0.7)',
|
||||
},
|
||||
};
|
||||
|
||||
const colors = {
|
||||
'gray': {
|
||||
'light': {
|
||||
'text': 'rgba(120, 119, 116, 1)',
|
||||
'highlight': 'rgba(241, 241, 239, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(241, 241, 239)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(227, 226, 224)',
|
||||
'tag-text': 'rgb(50, 48, 44)',
|
||||
'board': 'rgba(247, 247, 245, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(145, 145, 142)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(159, 164, 169, 1)',
|
||||
'highlight': 'rgba(60, 65, 68, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(60, 65, 68)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(71, 76, 80)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(51, 55, 59)',
|
||||
'board-card': 'rgb(60, 65, 68)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(107, 112, 116)',
|
||||
},
|
||||
},
|
||||
'brown': {
|
||||
'light': {
|
||||
'text': 'rgba(159, 107, 83, 1)',
|
||||
'highlight': 'rgba(244, 238, 238, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(244, 238, 238)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(238, 224, 218)',
|
||||
'tag-text': 'rgb(68, 42, 30)',
|
||||
'board': 'rgba(250, 246, 245, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(187, 132, 108)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(212, 150, 117, 1)',
|
||||
'highlight': 'rgba(76, 61, 53, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(76, 61, 53)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(92, 71, 61)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(59, 54, 51)',
|
||||
'board-card': 'rgb(76, 61, 53)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(155, 98, 69)',
|
||||
},
|
||||
},
|
||||
'orange': {
|
||||
'light': {
|
||||
'text': 'rgba(217, 115, 13, 1)',
|
||||
'highlight': 'rgba(251, 236, 221, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(251, 236, 221)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(250, 222, 201)',
|
||||
'tag-text': 'rgb(73, 41, 14)',
|
||||
'board': 'rgba(252, 245, 242, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(215, 129, 58)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(217, 133, 56, 1)',
|
||||
'highlight': 'rgba(85, 59, 41, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(85, 59, 41)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(136, 84, 44)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(61, 54, 49)',
|
||||
'board-card': 'rgb(85, 59, 41)',
|
||||
'board-text': 'rgb(168, 92, 30)',
|
||||
},
|
||||
},
|
||||
'yellow': {
|
||||
'light': {
|
||||
'text': 'rgba(203, 145, 47, 1)',
|
||||
'highlight': 'rgba(251, 243, 219, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(251, 243, 219)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(253, 236, 200)',
|
||||
'tag-text': 'rgb(64, 44, 27)',
|
||||
'board': 'rgba(250, 247, 237, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(203, 148, 51)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(201, 145, 38, 1)',
|
||||
'highlight': 'rgba(79, 64, 41, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(79, 64, 41)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(146, 118, 63)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(56, 55, 49)',
|
||||
'board-card': 'rgb(79, 64, 41)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(137, 107, 42)',
|
||||
},
|
||||
},
|
||||
'green': {
|
||||
'light': {
|
||||
'text': 'rgba(68, 131, 97, 1)',
|
||||
'highlight': 'rgba(237, 243, 236, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(237, 243, 236)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(219, 237, 219)',
|
||||
'tag-text': 'rgb(28, 56, 41)',
|
||||
'board': 'rgba(244, 248, 243, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(108, 155, 125)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(113, 178, 131, 1)',
|
||||
'highlight': 'rgba(46, 68, 58, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(46, 68, 58)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(50, 82, 65)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(49, 57, 53)',
|
||||
'board-card': 'rgb(46, 68, 58)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(61, 124, 86)',
|
||||
},
|
||||
},
|
||||
'blue': {
|
||||
'light': {
|
||||
'text': 'rgba(51, 126, 169, 1)',
|
||||
'highlight': 'rgba(231, 243, 248, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(231, 243, 248)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(211, 229, 239)',
|
||||
'tag-text': 'rgb(24, 51, 71)',
|
||||
'board': 'rgba(241, 248, 251, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(91, 151, 189)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(102, 170, 218, 1)',
|
||||
'highlight': 'rgba(45, 66, 86, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(45, 66, 86)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(42, 78, 107)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(49, 56, 64)',
|
||||
'board-card': 'rgb(45, 66, 86)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(46, 117, 164)',
|
||||
},
|
||||
},
|
||||
'purple': {
|
||||
'light': {
|
||||
'text': 'rgba(144, 101, 176, 1)',
|
||||
'highlight': 'rgba(244, 240, 247, 0.8)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgba(244, 240, 247, 0.8)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(232, 222, 238)',
|
||||
'tag-text': 'rgb(65, 36, 84)',
|
||||
'board': 'rgba(249, 246, 252, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(167, 130, 195)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(176, 152, 217, 1)',
|
||||
'highlight': 'rgba(69, 58, 91, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(69, 58, 91)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(83, 68, 116)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(57, 53, 65)',
|
||||
'board-card': 'rgb(69, 58, 91)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(123, 96, 180)',
|
||||
},
|
||||
},
|
||||
'pink': {
|
||||
'light': {
|
||||
'text': 'rgba(193, 76, 138, 1)',
|
||||
'highlight': 'rgba(249, 238, 243, 0.8)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgba(249, 238, 243, 0.8)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(245, 224, 233)',
|
||||
'tag-text': 'rgb(76, 35, 55)',
|
||||
'board': 'rgba(251, 245, 251, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(205, 116, 159)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(223, 132, 209, 1)',
|
||||
'highlight': 'rgba(81, 56, 77, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(81, 56, 77)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(106, 59, 99)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(60, 53, 58)',
|
||||
'board-card': 'rgb(81, 56, 77)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(169, 76, 157)',
|
||||
},
|
||||
},
|
||||
'red': {
|
||||
'light': {
|
||||
'text': 'rgba(212, 76, 71, 1)',
|
||||
'highlight': 'rgba(253, 235, 236, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(253, 235, 236)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(255, 226, 221)',
|
||||
'tag-text': 'rgb(93, 23, 21)',
|
||||
'board': 'rgba(253, 245, 243, 0.7)',
|
||||
'board-card': 'white',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(225, 111, 100)',
|
||||
},
|
||||
'dark': {
|
||||
'text': 'rgba(234, 135, 140, 1)',
|
||||
'highlight': 'rgba(94, 52, 54, 1)',
|
||||
'highlight-text': 'currentColor',
|
||||
'callout': 'rgb(94, 52, 54)',
|
||||
'callout-text': 'currentColor',
|
||||
'tag': 'rgb(122, 54, 59)',
|
||||
'tag-text': 'rgba(255, 255, 255, 0.88)',
|
||||
'board': 'rgb(66, 51, 51)',
|
||||
'board-card': 'rgb(94, 52, 54)',
|
||||
'board-card_text': 'inherit',
|
||||
'board-text': 'rgb(194, 65, 82)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function css() {
|
||||
const rgb = (color) =>
|
||||
color.startsWith('rgba') && color.endsWith(', 1)')
|
||||
? `rgb(${color.slice(5, -4)})`
|
||||
: color,
|
||||
notCallout = ":not([style*='border-radius'])",
|
||||
notBoardCard = ":not([style*='box-shadow'])",
|
||||
isTag =
|
||||
"[style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;']",
|
||||
isTagPalette = "[style*='border-radius: 3px;'][style*='width: 18px; height: 18px;']",
|
||||
isHighlightPalette =
|
||||
"[style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;']";
|
||||
let css = '';
|
||||
|
||||
// generate light gray separately
|
||||
css += `
|
||||
|
||||
/* light gray */
|
||||
|
||||
.notion-body:not(.dark) [style*='background: ${lightGray.light['tag']}']${isTag},
|
||||
.notion-body.dark [style*='background: ${lightGray.dark['tag']}']${isTag} {
|
||||
background: var(--theme--tag_light_gray) !important;
|
||||
color: var(--theme--tag_light_gray-text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='background: ${
|
||||
lightGray.light['tag']
|
||||
}']${isTagPalette},
|
||||
.notion-body.dark [style*='background: ${
|
||||
lightGray.dark['board-text']
|
||||
}']${isTagPalette} {
|
||||
background: var(--theme--tag_light_gray) !important;
|
||||
color: var(--theme--tag_light_gray-text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${lightGray.light['board']}'],
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${lightGray.dark['board']}'],
|
||||
.notion-body:not(.dark) .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
|
||||
[style*='background-color: ${lightGray.light['board']}'],
|
||||
.notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
|
||||
[style*='background-color: ${lightGray.dark['board']}'] {
|
||||
background: var(--theme--board_light_gray) !important;
|
||||
color: var(--theme--board_light_gray-text) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${lightGray.light['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'],
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] {
|
||||
background: var(--theme--board_light_gray-card) !important;
|
||||
color: var(--theme--board_light_gray-card_text) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] [placeholder="Untitled"] {
|
||||
-webkit-text-fill-color: var(--theme--board_light_gray-card_text, var(--theme--board_light_gray-text)) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${lightGray.light['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.notion-body:not(.dark) .notion-board-view
|
||||
[style*='color: ${lightGray.light['board-text']}'],
|
||||
.notion-body.dark .notion-board-view [style*='color: ${lightGray.dark['board-text']}'],
|
||||
.notion-body:not(.dark) .notion-board-view
|
||||
[style*='fill: ${lightGray.light['board-text']}'],
|
||||
.notion-body.dark .notion-board-view [style*='fill: ${lightGray.dark['board-text']}'] {
|
||||
color: var(--theme--board_light_gray-text) !important;
|
||||
fill: var(--theme--board_light_gray-text) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// generate the rest of the colours
|
||||
for (const c in colors) {
|
||||
css += `
|
||||
|
||||
/* ${c} */
|
||||
|
||||
.notion-body:not(.dark) [style*='color: ${rgb(colors[c].light['text'])}'],
|
||||
.notion-body:not(.dark) [style*='color:${colors[c].light['text']}'],
|
||||
.notion-body.dark [style*='color: ${rgb(colors[c].dark['text'])}'],
|
||||
.notion-body.dark [style*='color:${colors[c].dark['text']}'] {
|
||||
color: var(--theme--text_${c}) !important;
|
||||
fill: var(--theme--text_${c}) !important;
|
||||
}
|
||||
|
||||
|
||||
.notion-body:not(.dark) [style*='background: ${
|
||||
colors[c].light['highlight']
|
||||
}']${notCallout}${notBoardCard},
|
||||
.notion-body:not(.dark) [style*='background:${
|
||||
colors[c].light['highlight']
|
||||
}']${notCallout}${notBoardCard},
|
||||
.notion-body:not(.dark) [style*='background: ${rgb(
|
||||
colors[c].light['highlight']
|
||||
)}']${notCallout}${notBoardCard},
|
||||
.notion-body:not(.dark) [style*='background:${rgb(
|
||||
colors[c].light['highlight']
|
||||
)}']${notCallout}${notBoardCard},
|
||||
.notion-body:not(.dark) [style*='background-color: ${
|
||||
colors[c].light['highlight']
|
||||
}']${notCallout}${notBoardCard},
|
||||
.notion-body.dark [style*='background: ${
|
||||
colors[c].dark['highlight']
|
||||
}']${notCallout}${notBoardCard},
|
||||
.notion-body.dark [style*='background:${
|
||||
colors[c].dark['highlight']
|
||||
}']${notCallout}${notBoardCard},
|
||||
.notion-body.dark [style*='background: ${rgb(
|
||||
colors[c].dark['highlight']
|
||||
)}']${notCallout}${notBoardCard},
|
||||
.notion-body.dark [style*='background:${rgb(
|
||||
colors[c].dark['highlight']
|
||||
)}']${notCallout}${notBoardCard},
|
||||
.notion-body.dark [style*='background-color: ${
|
||||
colors[c].dark['highlight']
|
||||
}']${notCallout}${notBoardCard} {
|
||||
background: var(--theme--highlight_${c}) !important;
|
||||
color: var(--theme--highlight_${c}-text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) .notion-callout-block > div
|
||||
> [style*='background: ${colors[c].light['callout']}'],
|
||||
.notion-body.dark .notion-callout-block > div
|
||||
> [style*='background: ${colors[c].dark['callout']}'] {
|
||||
background: var(--theme--callout_${c}) !important;
|
||||
color: var(--theme--callout_${c}-text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: ${colors[c].light['tag']}']${isTag},
|
||||
.notion-body.dark [style*='background: ${colors[c].dark['tag']}']${isTag} {
|
||||
background: var(--theme--tag_${c}) !important;
|
||||
color: var(--theme--tag_${c}-text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='background: ${
|
||||
colors[c].light['callout']
|
||||
}']${isHighlightPalette},
|
||||
.notion-body.dark [style*='background: ${
|
||||
colors[c].dark['callout']
|
||||
}']${isHighlightPalette} {
|
||||
background: var(--theme--highlight_${c}) !important;
|
||||
color: var(--theme--highlight_${c}-text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: ${
|
||||
colors[c].light['tag']
|
||||
}']${isTagPalette},
|
||||
.notion-body.dark [style*='background: ${
|
||||
colors[c].dark['board-text']
|
||||
}']${isTagPalette} {
|
||||
background: var(--theme--tag_${c}) !important;
|
||||
color: var(--theme--tag_${c}-text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${colors[c].light['board']}'],
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${colors[c].dark['board']}'],
|
||||
.notion-body:not(.dark) .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
|
||||
[style*='background-color: ${colors[c].light['board']}'],
|
||||
.notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
|
||||
[style*='background-color: ${colors[c].dark['board']}'] {
|
||||
background: var(--theme--board_${c}) !important;
|
||||
color: var(--theme--board_${c}-text) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${colors[c].light['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'],
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${colors[c].dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] {
|
||||
background: var(--theme--board_${c}-card) !important;
|
||||
color: var(--theme--board_${c}-card_text) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${colors[c].dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] [placeholder="Untitled"] {
|
||||
-webkit-text-fill-color: var(--theme--board_${c}-card_text, var(--theme--board_${c}-text)) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-board-group[style*='background-color: ${colors[c].light['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-board-group[style*='background-color: ${colors[c].dark['board']}']
|
||||
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.notion-body:not(.dark) .notion-board-view
|
||||
[style*='color: ${colors[c].light['board-text']}'],
|
||||
.notion-body.dark .notion-board-view [style*='color: ${
|
||||
colors[c].dark['board-text']
|
||||
}'],
|
||||
.notion-body:not(.dark) .notion-board-view
|
||||
[style*='fill: ${colors[c].light['board-text']}'],
|
||||
.notion-body.dark .notion-board-view [style*='fill: ${
|
||||
colors[c].dark['board-text']
|
||||
}'] {
|
||||
color: var(--theme--board_${c}-text) !important;
|
||||
fill: var(--theme--board_${c}-text) !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
return css;
|
||||
}
|
||||
|
||||
// 'light' or 'dark'
|
||||
function vars(mode) {
|
||||
// order in which variables will appear
|
||||
const sets = {
|
||||
'text': '',
|
||||
'highlight': '',
|
||||
'callout': '',
|
||||
// tag_default has the same color in light and dark
|
||||
'tag': '--theme--tag_default: rgba(206, 205, 202, 0.5);\n--theme--tag_default-text: var(--theme--text);\n',
|
||||
'board': ''
|
||||
};
|
||||
|
||||
// light gray separately
|
||||
for (let key in lightGray[mode]) {
|
||||
const prefix = key.split('-')[0],
|
||||
value = lightGray[mode][key];
|
||||
if (!sets[prefix]) sets[prefix] = '';
|
||||
key = [`--theme--${prefix}_light_gray`, ...key.split('-').slice(1)].join('-');
|
||||
sets[prefix] += `${key}: ${value};\n`;
|
||||
}
|
||||
|
||||
// other colors
|
||||
for (const color in colors) {
|
||||
for (let key in colors[color][mode]) {
|
||||
const prefix = key.split('-')[0],
|
||||
value = colors[color][mode][key];
|
||||
if (!sets[prefix]) sets[prefix] = '';
|
||||
key = [`--theme--${prefix}_${color}`, ...key.split('-').slice(1)].join('-');
|
||||
sets[prefix] += `${key}: ${value};\n`;
|
||||
}
|
||||
}
|
||||
let vars = '';
|
||||
for (const set in sets) {
|
||||
vars += `\n${sets[set]}`;
|
||||
}
|
||||
return vars;
|
||||
}
|
||||
|
||||
if (process.argv.includes('css')) {
|
||||
console.log(css());
|
||||
} else if (process.argv.includes('light')) {
|
||||
console.log(vars('light'));
|
||||
} else if (process.argv.includes('dark')) {
|
||||
console.log(vars('dark'));
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
export default async function ({ web, registry, storage, electron }, db) {
|
||||
const enabledThemes = await registry.list(
|
||||
async (m) => (await registry.enabled(m.id)) && m.tags.includes('theme')
|
||||
);
|
||||
if (enabledThemes.length || (await db.get(['force_load']))) {
|
||||
// only override colors if theme is enable for perf
|
||||
web.loadStylesheet('repo/theming/theme.css');
|
||||
web.loadStylesheet('repo/theming/colors.css');
|
||||
}
|
||||
|
||||
const updateTheme = async () => {
|
||||
if (document.visibilityState !== 'visible' && !document.hasFocus()) return;
|
||||
const isDark =
|
||||
document.querySelector('.notion-dark-theme') ||
|
||||
document.querySelector('.notion-body.dark'),
|
||||
isLight = document.querySelector('.notion-light-theme'),
|
||||
mode = isDark ? 'dark' : isLight ? 'light' : '';
|
||||
if (!mode) return;
|
||||
await storage.set(['theme'], mode);
|
||||
document.documentElement.classList.add(mode);
|
||||
document.documentElement.classList.remove(mode === 'light' ? 'dark' : 'light');
|
||||
electron.sendMessage('update-theme');
|
||||
const searchThemeVars = [
|
||||
'bg',
|
||||
'text',
|
||||
'icon',
|
||||
'icon_secondary',
|
||||
'accent_blue',
|
||||
'accent_blue-text',
|
||||
'accent_blue-hover',
|
||||
'accent_blue-active',
|
||||
'ui_shadow',
|
||||
'ui_divider',
|
||||
'ui_input',
|
||||
'ui_interactive-hover',
|
||||
'ui_interactive-active',
|
||||
].map((key) => [
|
||||
key,
|
||||
window.getComputedStyle(document.documentElement).getPropertyValue(`--theme--${key}`),
|
||||
]);
|
||||
electron.sendMessage('set-search-theme', searchThemeVars);
|
||||
};
|
||||
web.addDocumentObserver((mutation) => {
|
||||
const potentialThemeChange = mutation.target.matches?.('html, body, .notion-app-inner');
|
||||
if (potentialThemeChange && document.hasFocus()) updateTheme();
|
||||
});
|
||||
updateTheme();
|
||||
document.addEventListener('visibilitychange', updateTheme);
|
||||
document.addEventListener('focus', updateTheme);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,61 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
#container {
|
||||
background: var(--theme--bg) !important;
|
||||
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
|
||||
}
|
||||
|
||||
#container #results {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
#container #prev,
|
||||
#container #next {
|
||||
border-color: var(--theme--ui_divider) !important;
|
||||
}
|
||||
#container .enabled:focus,
|
||||
#container .enabled:hover {
|
||||
background: var(--theme--ui_interactive-hover) !important;
|
||||
}
|
||||
#container .enabled:active {
|
||||
background: var(--theme--ui_interactive-active) !important;
|
||||
}
|
||||
#container #prev svg,
|
||||
#container #next svg {
|
||||
fill: var(--theme--icon_secondary) !important;
|
||||
}
|
||||
#container #button-separator {
|
||||
background: var(--theme--ui_divider) !important;
|
||||
}
|
||||
|
||||
#container #search-icon svg,
|
||||
#container #clear-icon svg {
|
||||
fill: var(--theme--icon) !important;
|
||||
}
|
||||
#container #input-wrap #search {
|
||||
background: var(--theme--ui_input) !important;
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
#container #done {
|
||||
background: var(--theme--accent_blue) !important;
|
||||
color: var(--theme--accent_blue-text) !important;
|
||||
}
|
||||
#container #done:focus,
|
||||
#container #done:hover {
|
||||
background: var(--theme--accent_blue-hover) !important;
|
||||
}
|
||||
#container #done:active {
|
||||
background: var(--theme--accent_blue-active) !important;
|
||||
}
|
||||
|
||||
#container .enabled::after,
|
||||
#container #done::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
export default async function ({ web, storage, electron }, db) {
|
||||
await web.whenReady();
|
||||
|
||||
const updateTheme = async () => {
|
||||
const mode = await storage.get(['theme'], 'light');
|
||||
document.documentElement.classList.add(mode);
|
||||
document.documentElement.classList.remove(mode === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
electron.onMessage('update-theme', updateTheme);
|
||||
updateTheme();
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = async function ({}, db, __exports, __eval) {
|
||||
const electron = require('electron');
|
||||
electron.ipcMain.on('notion-enhancer:update-theme', () => {
|
||||
electron.webContents
|
||||
.getAllWebContents()
|
||||
.forEach((webContents) => webContents.send('notion-enhancer:update-theme'));
|
||||
});
|
||||
electron.ipcMain.on('notion-enhancer:set-search-theme', (event, theme) => {
|
||||
electron.webContents
|
||||
.getAllWebContents()
|
||||
.forEach((webContents) => webContents.send('notion-enhancer:set-search-theme', theme));
|
||||
});
|
||||
};
|
||||
@ -1,26 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
export default async function ({ web, registry, storage, electron }, db) {
|
||||
await web.whenReady();
|
||||
|
||||
const updateTheme = async () => {
|
||||
const mode = await storage.get(['theme'], 'light');
|
||||
document.documentElement.classList.add(mode);
|
||||
document.documentElement.classList.remove(mode === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
document.addEventListener('visibilitychange', updateTheme);
|
||||
electron.onMessage('update-theme', updateTheme);
|
||||
updateTheme();
|
||||
|
||||
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
|
||||
for (const sheet of mod.css?.menu || []) {
|
||||
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
{
|
||||
"name": "theming",
|
||||
"id": "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
|
||||
"version": "0.11.0",
|
||||
"description": "the default theme variables, required by other themes & extensions.",
|
||||
"tags": ["core"],
|
||||
"authors": [
|
||||
{
|
||||
"name": "dragonwocky",
|
||||
"email": "thedragonring.bod@gmail.com",
|
||||
"homepage": "https://dragonwocky.me/",
|
||||
"avatar": "https://dragonwocky.me/avatar.jpg"
|
||||
}
|
||||
],
|
||||
"css": {
|
||||
"frame": ["variables.css"],
|
||||
"client": ["variables.css", "prism.css", "patches.css"],
|
||||
"menu": ["variables.css"]
|
||||
},
|
||||
"js": {
|
||||
"frame": ["frame.mjs"],
|
||||
"client": ["client.mjs"],
|
||||
"menu": ["menu.mjs"],
|
||||
"electron": [
|
||||
{ "source": "main.cjs", "target": "main/main.js" },
|
||||
{ "source": "rendererSearch.cjs", "target": "renderer/search.js" }
|
||||
]
|
||||
},
|
||||
"options": [
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "force_load",
|
||||
"label": "force load overrides",
|
||||
"tooltip": "**override notion's colours even if no themes are enabled**",
|
||||
"value": false
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,156 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
.token.property {
|
||||
color: var(--theme--code_property) !important;
|
||||
}
|
||||
.token.tag {
|
||||
color: var(--theme--code_tag) !important;
|
||||
}
|
||||
.token.boolean {
|
||||
color: var(--theme--code_boolean) !important;
|
||||
}
|
||||
.token.number {
|
||||
color: var(--theme--code_number) !important;
|
||||
}
|
||||
.token.constant {
|
||||
color: var(--theme--code_constant) !important;
|
||||
}
|
||||
.token.symbol {
|
||||
color: var(--theme--code_symbol) !important;
|
||||
}
|
||||
.token.deleted {
|
||||
color: var(--theme--code_deleted) !important;
|
||||
}
|
||||
.token.selector {
|
||||
color: var(--theme--code_selector) !important;
|
||||
}
|
||||
.token.attr-name {
|
||||
color: var(--theme--code_attr-name) !important;
|
||||
}
|
||||
.token.string {
|
||||
color: var(--theme--code_string) !important;
|
||||
}
|
||||
.token.char {
|
||||
color: var(--theme--code_char) !important;
|
||||
}
|
||||
.token.builtin {
|
||||
color: var(--theme--code_builtin) !important;
|
||||
}
|
||||
.token.inserted {
|
||||
color: var(--theme--code_inserted) !important;
|
||||
}
|
||||
.token.operator {
|
||||
color: var(--theme--code_operator) !important;
|
||||
}
|
||||
.token.entity {
|
||||
color: var(--theme--code_entity) !important;
|
||||
}
|
||||
.token.url {
|
||||
color: var(--theme--code_url) !important;
|
||||
}
|
||||
.token.variable {
|
||||
color: var(--theme--code_variable) !important;
|
||||
}
|
||||
.token.comment {
|
||||
color: var(--theme--code_comment) !important;
|
||||
}
|
||||
.token.cdata {
|
||||
color: var(--theme--code_cdata) !important;
|
||||
}
|
||||
.token.prolog {
|
||||
color: var(--theme--code_prolog) !important;
|
||||
}
|
||||
.token.doctype {
|
||||
color: var(--theme--code_doctype) !important;
|
||||
}
|
||||
.token.atrule {
|
||||
color: var(--theme--code_atrule) !important;
|
||||
}
|
||||
.token.attr-value {
|
||||
color: var(--theme--code_attr-value) !important;
|
||||
}
|
||||
.token.keyword {
|
||||
color: var(--theme--code_keyword) !important;
|
||||
}
|
||||
.token.regex {
|
||||
color: var(--theme--code_regex) !important;
|
||||
}
|
||||
.token.important {
|
||||
color: var(--theme--code_important) !important;
|
||||
}
|
||||
.token.function {
|
||||
color: var(--theme--code_function) !important;
|
||||
}
|
||||
.token.class-name {
|
||||
color: var(--theme--code_class-name) !important;
|
||||
}
|
||||
.token.parameter {
|
||||
color: var(--theme--code_parameter) !important;
|
||||
}
|
||||
.token.decorator {
|
||||
color: var(--theme--code_decorator) !important;
|
||||
}
|
||||
.token.id {
|
||||
color: var(--theme--code_id) !important;
|
||||
}
|
||||
.token.class {
|
||||
color: var(--theme--code_class) !important;
|
||||
}
|
||||
.token.pseudo-element {
|
||||
color: var(--theme--code_pseudo-element) !important;
|
||||
}
|
||||
.token.pseudo-class {
|
||||
color: var(--theme--code_pseudo-class) !important;
|
||||
}
|
||||
.token.attribute {
|
||||
color: var(--theme--code_attribute) !important;
|
||||
}
|
||||
.token.value {
|
||||
color: var(--theme--code_value) !important;
|
||||
}
|
||||
.token.unit {
|
||||
color: var(--theme--code_unit) !important;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: var(--theme--code_punctuation) !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
.token.annotation {
|
||||
color: var(--theme--code_annotation) !important;
|
||||
}
|
||||
|
||||
.token.operator {
|
||||
background: transparent !important;
|
||||
}
|
||||
.token.namespace {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help !important;
|
||||
}
|
||||
.token a {
|
||||
color: inherit !important;
|
||||
}
|
||||
.token.punctuation.brace-hover,
|
||||
.token.punctuation.brace-selected {
|
||||
outline: solid 1px !important;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
background: none !important;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = async function ({ web, electron }, db, __exports, __eval) {
|
||||
await web.whenReady();
|
||||
web.loadStylesheet('repo/theming/electronSearch.css');
|
||||
|
||||
electron.onMessage('set-search-theme', (event, theme) => {
|
||||
for (const [key, value] of theme) {
|
||||
document.documentElement.style.setProperty(`--theme--${key}`, value);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -1,773 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
/* backgrounds */
|
||||
|
||||
.OnboardingHighlight + div > [style*='background-color'] {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
body,
|
||||
.notion-cursor-listener,
|
||||
.notion-frame,
|
||||
.notion-timeline-view,
|
||||
.notion-workspace-plan-choose,
|
||||
.notion-onboarding-popup,
|
||||
.notion-workspace-create,
|
||||
.notion-workspace-invite,
|
||||
.notion-scroller.vertical
|
||||
> [style*='display: flex; justify-content: center; z-index: 3; flex-shrink: 0;'][style*='background: '],
|
||||
.notion-cursor-listener > div > :first-child[style*='z-index: 100;'],
|
||||
.notion-space-settings > div > div > div:nth-child(2) > div[style*='background'],
|
||||
.notion-body.dark .notion-collection_view_page-block > [style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body.dark .notion-collection_view_page-block[style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body:not(.dark) .notion-collection_view_page-block > [style*='background: white'],
|
||||
.notion-body:not(.dark) .notion-collection_view_page-block[style*='background: white'],
|
||||
.notion-body.dark .notion-collection_view-block > [style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body.dark .notion-collection_view-block[style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body:not(.dark) .notion-collection_view-block > [style*='background: white'],
|
||||
.notion-body:not(.dark) .notion-collection_view-block[style*='background: white'],
|
||||
.notion-body.dark .notion-timeline-view [style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-timeline-view
|
||||
[style*='background: white']:not(.notion-timeline-item),
|
||||
.notion-body:not(.dark) .notion-timeline-view [style*='background: rgb(253, 253, 253);'],
|
||||
.notion-updates-menu footer > div[style*='background'],
|
||||
:not(.notion-sidebar-container) > div > div > .notion-sidebar > :nth-child(2),
|
||||
:not(.notion-sidebar-container) > div > div > .notion-sidebar > :nth-child(3),
|
||||
:not(.notion-sidebar-container) > div > div > .notion-sidebar > :nth-child(3) > :nth-child(2),
|
||||
.notion-peek-renderer > div[style*='background'],
|
||||
.notion-peek-renderer > div[style*='background'] > :first-child,
|
||||
.notion-peek-renderer > div[style*='background'] > :first-child > div > :nth-child(3),
|
||||
.notion-page-template-modal,
|
||||
.notion-update-sidebar-tab-updates-header,
|
||||
.notion-update-sidebar-tab-updates-header + .notion-scroller,
|
||||
.notion-update-sidebar-tab-comments-header,
|
||||
.notion-update-sidebar-tab-comments-header + div,
|
||||
.notion-code-block > div > div > [style*='background: '][style$='padding-right: 105px;'],
|
||||
[style*='z-index: 84'] {
|
||||
background: var(--theme--bg) !important;
|
||||
}
|
||||
.notion-timeline-item-row + div > div > div,
|
||||
.notion-timeline-view > :nth-child(2) > :first-child > div > div {
|
||||
border: 1px solid var(--theme--bg) !important;
|
||||
background: var(--theme--ui_toggle-off) !important;
|
||||
}
|
||||
.notion-timeline-item-row + div > div > div svg,
|
||||
.notion-timeline-view > :nth-child(2) > :first-child > div > div svg {
|
||||
fill: var(--theme--bg) !important;
|
||||
}
|
||||
|
||||
.notion-sidebar-container,
|
||||
.notion-sidebar > [style*='border-top-right-radius'],
|
||||
.notion-space-settings > div > div > div:first-child[style*='background'],
|
||||
.notion-body.dark .notion-collection_view_page-block [style*='background: rgb(55, 60, 63)'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-collection_view_page-block
|
||||
[style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body.dark .notion-collection_view-block [style*='background: rgb(55, 60, 63)'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-collection_view-block
|
||||
[style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body.dark .notion-timeline-view [style*='background: rgb(55, 60, 63)'],
|
||||
.notion-body:not(.dark) .notion-timeline-view [style*='background: rgb(247, 246, 243)'],
|
||||
.notion-space-settings
|
||||
> div
|
||||
> div
|
||||
> div:nth-child(2)
|
||||
table
|
||||
td[style*='background:']:not([style*='background: transparent']),
|
||||
.notion-timeline-view > :first-child > div,
|
||||
.notion-body:not(.dark)
|
||||
.notion-timeline-view
|
||||
> div
|
||||
> div
|
||||
> [style*='background: rgb(247, 247, 247); border-radius: 11px;'],
|
||||
.notion-page-template-modal > :last-child,
|
||||
.notion-page-template-modal > :last-child > div > :last-child,
|
||||
.notion-embed-block .pseudoSelection,
|
||||
.notion-video-block .pseudoSelection,
|
||||
.notion-image-block .pseudoSelection,
|
||||
.notion-file-block .pseudoSelection,
|
||||
.notion-pdf-block .pseudoSelection,
|
||||
.notion-bookmark-block .pseudoSelection,
|
||||
.notion-miro-block .pseudoSelection,
|
||||
.notion-codepen-block .pseudoSelection,
|
||||
.notion-framer-block .pseudoSelection,
|
||||
.notion-figma-block .pseudoSelection,
|
||||
.notion-drive-block .pseudoSelection,
|
||||
.notion-gist-block .pseudoSelection,
|
||||
.notion-tweet-block .pseudoSelection,
|
||||
.notion-maps-block .pseudoSelection,
|
||||
.notion-replit-block .pseudoSelection,
|
||||
.notion-typeform-block .pseudoSelection,
|
||||
.notion-abstract-block .pseudoSelection,
|
||||
.notion-invision-block .pseudoSelection,
|
||||
.notion-loom-block .pseudoSelection,
|
||||
.notion-excalidraw-block .pseudoSelection,
|
||||
.notion-sketch-block .pseudoSelection,
|
||||
.notion-whimsical-block .pseudoSelection,
|
||||
.notion-equation-block > div > div,
|
||||
.notion-factory-block > div > div > div > div > [style*='background'][style*='margin-top'] {
|
||||
background: var(--theme--bg_secondary) !important;
|
||||
}
|
||||
|
||||
.notion-default-overlay-container
|
||||
[style*='position: absolute; inset: 0px; background: rgba(15, 15, 15, 0.6);']:empty {
|
||||
background: var(--theme--ui_shadow) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'],
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'],
|
||||
[data-overlay]
|
||||
> div
|
||||
> [style*='position: relative; z-index: 1; box-shadow:'][style*='border-radius: 3px;'][style*='margin-bottom: 0px; top: 90px; overflow: hidden; width: 75%; max-width: 600px; min-height: 50px; max-height: 80vh;']:nth-child(2),
|
||||
.notion-overlay-container.notion-default-overlay-container
|
||||
[style*='display: flex']
|
||||
> [style*='position: relative; max-width:'][style*='overflow: hidden']
|
||||
footer
|
||||
> [style*='background-color:'],
|
||||
.notion-updates-menu > :first-child > div[style*='background'],
|
||||
#notion-app
|
||||
> div
|
||||
> div.notion-overlay-container.notion-default-overlay-container
|
||||
> div:nth-child(2)
|
||||
> div
|
||||
> div:nth-child(2)[style*='margin-bottom: 0px; top: 90px; overflow: hidden; width: 75%;'],
|
||||
.notion-default-overlay-container
|
||||
> div
|
||||
> div:not(.notion-peek-renderer)
|
||||
> [style*='box-shadow'],
|
||||
[style*='z-index:'][style*='box-shadow: '][style*='font-size: 12px;'][style*='min-height: 24px; overflow: hidden; pointer-events:'],
|
||||
:not(.notion-login)
|
||||
> .notion-focusable[role='button'][tabindex='0'][style*='box-shadow:'][style*='background:'][style*='transition: background 20ms ease-in 0s; cursor: pointer;']:not([style*='rgb(46, 170, 220);']):not([style*='rgb(6, 156, 205);']):not([style*='rgb(0, 141, 190);']):not([style*='flex: 1 1 0%; white-space: nowrap; height: 26px; border-radius: 3px 0px 0px 3px;']):not([style*='rgb(225, 98, 89)']),
|
||||
.notion-text-action-menu > div > div,
|
||||
.notion-default-overlay-container
|
||||
[style*='min-width: 300px;']
|
||||
[style*='width: 240px']
|
||||
> .notion-focusable:not(:hover),
|
||||
.notion-transclusion_reference-block > div > div > :nth-child(3),
|
||||
.notion-transclusion_container-block > div > div > :nth-child(3),
|
||||
.notion-page-block > div > div > div > .notion-focusable:not(:hover),
|
||||
.notion-workspace-create
|
||||
[style*='font-size: 12px;']
|
||||
+ .notion-focusable[role='button']:not(:hover) {
|
||||
background: var(--theme--bg_card) !important;
|
||||
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
|
||||
}
|
||||
[style*='z-index:'][style*='box-shadow: '][style*='font-size: 12px;'][style*='min-height: 24px; overflow: hidden; pointer-events:']
|
||||
> .notion-focusable {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
.notion-calendar-view
|
||||
.notion-selectable.notion-page-block.notion-collection-item
|
||||
> a[style*='background:'] {
|
||||
background: var(--theme--bg_card) !important;
|
||||
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 2px 4px !important;
|
||||
}
|
||||
|
||||
.notion-media-menu > div > div > div[style*='background'],
|
||||
.notion-media-menu > div > div > div > div[style*='background']:not(.notion-focusable),
|
||||
.notion-body.dark
|
||||
.notion-default-overlay-container
|
||||
[style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];'],
|
||||
.notion-focusable[style*='background: rgb(80, 85, 88);']:not(.notion-help-button):not(.onboarding-checklist-button),
|
||||
.notion-body:not(.dark)
|
||||
.notion-default-overlay-container
|
||||
[style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']
|
||||
.notion-focusable[style*='background: white;'],
|
||||
.notion-timeline-item,
|
||||
.notion-collection-item > a {
|
||||
background: var(--theme--bg_card) !important;
|
||||
}
|
||||
|
||||
.notion-timeline-view
|
||||
> div
|
||||
> div
|
||||
> [style*='height: 100%; background-image: linear-gradient(to right, '] {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--theme--bg) 20%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
}
|
||||
.notion-timeline-view
|
||||
> div
|
||||
> div
|
||||
> [style*='height: 100%; background-image: linear-gradient(to left, '] {
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--theme--bg) 20%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
/** ui **/
|
||||
|
||||
.notion-page-mention-token.notion-enable-hover:hover {
|
||||
box-shadow: 0 0 0 3px var(--theme--ui_interactive-hover) !important;
|
||||
background: var(--theme--ui_interactive-hover) !important;
|
||||
}
|
||||
|
||||
.notion-to_do-block [style*='background: rgb(46, 170, 220);'],
|
||||
.notion-focusable
|
||||
> [style*='width: 16px; height: 16px;'][style*='background: rgb(46, 170, 220);'],
|
||||
.notion-focusable > [style*='border-radius: 44px;'][style*='background: rgb(46, 170, 220);'] {
|
||||
background: var(--theme--ui_toggle-on) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-focusable
|
||||
> [style*='border-radius: 44px;'][style*='background: rgba(202, 204, 206, 0.3);'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-focusable
|
||||
> [style*='border-radius: 44px;'][style*='background: rgba(135, 131, 120, 0.3);'] {
|
||||
background: var(--theme--ui_toggle-off) !important;
|
||||
}
|
||||
|
||||
.notion-focusable
|
||||
> [style*='width: 16px; height: 16px;'][style*='background: rgb(46, 170, 220);']
|
||||
.check,
|
||||
.notion-to_do-block .check {
|
||||
fill: var(--theme--ui_toggle-feature) !important;
|
||||
}
|
||||
.notion-focusable > [style*='border-radius: 44px;'] > div:empty {
|
||||
background: var(--theme--ui_toggle-feature) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='background: rgba(255, 255, 255, 0.1)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(55, 53, 47, 0.08)'],
|
||||
.notion-focusable[style*='z-index:'][style*='box-shadow: '][style*='font-size: 12px;'][style*='min-height: 24px; overflow: hidden; pointer-events:']:hover,
|
||||
:not(.notion-login)
|
||||
> .notion-focusable[role='button'][tabindex='0'][style*='box-shadow:'][style*='background:'][style*='transition: background 20ms ease-in 0s; cursor: pointer;']:not([style*='rgb(46, 170, 220);']):not([style*='rgb(6, 156, 205);']):not([style*='rgb(0, 141, 190);']):not([style*='flex: 1 1 0%; white-space: nowrap; height: 26px; border-radius: 3px 0px 0px 3px;']):not([style*='rgb(225, 98, 89)']):hover,
|
||||
[style*='z-index:'][style*='box-shadow: '][style*='font-size: 12px;'][style*='min-height: 24px; overflow: hidden; pointer-events:']
|
||||
> .notion-focusable[style*='background']:hover,
|
||||
.notion-body:not(.dark)
|
||||
.notion-default-overlay-container
|
||||
[style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']
|
||||
.notion-focusable[style*='background: rgb(239, 239, 238);'],
|
||||
.line-numbers.notion-code-block + div .notion-focusable:hover {
|
||||
background: var(--theme--ui_interactive-hover) !important;
|
||||
color: var(--theme--text) !important;
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(55, 53, 47, 0.16)'],
|
||||
.notion-body.dark .notion-focusable[role='button'][style*='background: rgb(63, 68, 71);'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-focusable[role='button'][style*='background: rgba(55, 53, 47, 0.16)'],
|
||||
[style*='z-index:'][style*='box-shadow: '][style*='font-size: 12px;'][style*='min-height: 24px; overflow: hidden; pointer-events:']
|
||||
> .notion-focusable[style*='background']:active,
|
||||
.notion-body:not(.dark)
|
||||
.notion-default-overlay-container
|
||||
[style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']
|
||||
.notion-focusable[style*='background: rgb(233, 233, 231);'] {
|
||||
background: var(--theme--ui_interactive-active) !important;
|
||||
color: var(--theme--text) !important;
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(55, 53, 47, 0.16)'] svg,
|
||||
.notion-body.dark .notion-focusable[role='button'][style*='background: rgb(63, 68, 71);'] svg {
|
||||
color: var(--theme--text) !important;
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
.notion-focusable-within,
|
||||
.notion-share-menu
|
||||
.notion-block-permission-settings-public-access
|
||||
+ div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> .notion-focusable:first-child[role='button'][tabindex='0'][style*='user-select: none;'],
|
||||
.notion-overlay-container
|
||||
> div:nth-child(2)
|
||||
> div
|
||||
> div:nth-child(2)
|
||||
> div:nth-child(2)
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div:nth-child(1)[style*='display: flex; width: 100%; position: relative; z-index: 2; padding: 6px 10px; font-size: 14px; background:'],
|
||||
.notion-overlay-container
|
||||
> div:nth-child(3)
|
||||
> div
|
||||
> div:nth-child(2)
|
||||
> div:nth-child(2)
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div:nth-child(1)[style*='display: flex; width: 100%; position: relative; z-index: 2; padding: 6px 10px; font-size: 14px; background:'],
|
||||
#notion-app
|
||||
> div
|
||||
> div.notion-overlay-container.notion-default-overlay-container
|
||||
> [data-overlay='true']
|
||||
> div
|
||||
> div:nth-child(2)
|
||||
> div:nth-child(2)
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div:nth-child(1)
|
||||
> div[style*='background'] {
|
||||
background: var(--theme--ui_input) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark
|
||||
[style*='border-radius: 20px; box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 2px inset;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='border-radius: 20px; box-shadow: rgba(55, 53, 47, 0.09) 0px 0px 0px 2px inset;'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px 0px 0px 2px inset !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 1px inset; border-radius: 3px;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 0px 0px 1px inset; border-radius: 3px;'],
|
||||
.notion-gallery-view
|
||||
.notion-focusable[role='button'][style*='font-size: 14px; border-radius: 3px; box-shadow:']:last-child {
|
||||
box-shadow: var(--theme--ui_divider) 0px 0px 0px 1px inset !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='border-radius: 3px; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='border-radius: 3px; box-shadow: rgba(55, 53, 47, 0.1) 0px 0px 0px 1px;'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px 0px 0px 1px !important;
|
||||
}
|
||||
|
||||
#notion-app
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
|
||||
color: var(--theme--accent_red-text) !important;
|
||||
}
|
||||
#notion-app
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
|
||||
.notion-timeline-view [style*='background: rgb(211, 79, 67); width: 22px;'],
|
||||
.notion-timeline-view
|
||||
[style*='width: 7px; height: 7px; background: rgb(211, 79, 67); border-radius: 100%;'] {
|
||||
background: var(--theme--accent_red) !important;
|
||||
}
|
||||
#notion-app .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
|
||||
#notion-app .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
|
||||
background-color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
#notion-app .DayPicker-Day.DayPicker-Day--range:hover {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.notion-calendar-view-day[style*='background'] {
|
||||
background-color: var(--theme--accent_red) !important;
|
||||
color: var(--theme--accent_red-text) !important;
|
||||
}
|
||||
.DayPicker-Day--outside,
|
||||
.DayPicker-Weekday {
|
||||
color: var(--theme--text_secondary) !important;
|
||||
}
|
||||
.notion-timeline-view [style*='height: 100%; border-right: 1px solid rgb(211, 79, 67);'] {
|
||||
border-right: 1px solid var(--theme--accent_red) !important;
|
||||
}
|
||||
|
||||
/* link underline */
|
||||
|
||||
.notion-body.dark
|
||||
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);'] {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--theme--ui_divider) 0%,
|
||||
var(--theme--ui_divider) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
/** dividers **/
|
||||
|
||||
.notion-body.dark
|
||||
.notion-page-content
|
||||
.notranslate[style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-page-content
|
||||
.notranslate[style*='border-bottom: 1px solid rgba(55, 53, 47, 0.16);'] {
|
||||
border-bottom: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='border-top: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border-top: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border-top: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border-top: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border-top: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47, 0.16)'] {
|
||||
border-top: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47, 0.16)'] {
|
||||
border-bottom: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-right: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border-right: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border-right: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border-right: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border-right: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47, 0.16)'] {
|
||||
border-right: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-left: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border-left: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border-left: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border-left: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border-left: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47, 0.16)'] {
|
||||
border-left: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border: 1px solid rgba(55, 53, 47, 0.16)'] {
|
||||
border: 1px solid var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-color: 1px solid rgb(77, 81, 83)'],
|
||||
.notion-body.dark [style*='border-color: 1px solid rgb(63, 66, 69)'],
|
||||
.notion-body.dark [style*='border-color: 1px solid rgb(63, 66, 67)'],
|
||||
.notion-body.dark [style*='border-color: 1px solid rgb(60, 63, 67)'],
|
||||
.notion-body.dark [style*='border-color: 1px solid rgba(255, 255, 255, 0.14);'],
|
||||
.notion-body.dark [style*='border-color: 1px solid rgba(255, 255, 255, 0.07)'],
|
||||
.notion-body:not(.dark) [style*='border-color: 1px solid rgb(233, 233, 231)'],
|
||||
.notion-body:not(.dark) [style*='border-color: 1px solid rgb(237, 237, 236)'],
|
||||
.notion-body:not(.dark) [style*='border-color: 1px solid rgb(238, 238, 237)'],
|
||||
.notion-body:not(.dark) [style*='border-color: 1px solid rgba(55, 53, 47, 0.09)'],
|
||||
.notion-body:not(.dark) [style*='border-color: 1px solid rgba(55, 53, 47, 0.16)'],
|
||||
.notion-callout-block > div > :not([style*='border-color: transparent']) {
|
||||
border-color: var(--theme--ui_divider) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='box-shadow: rgb(77, 81, 83) -1px 0px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) -1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(233, 233, 231) -1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgb(63, 66, 69) -1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(237, 237, 236) -1px 0px 0px'] {
|
||||
box-shadow: var(--theme--ui_divider) -1px 0px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='box-shadow: rgb(77, 81, 83) 1px 0px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(233, 233, 231) 1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgba(55, 53, 47, 0.09) 1px 0px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgb(63, 66, 69) 1px 0px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(237, 237, 236) 1px 0px 0px'] {
|
||||
box-shadow: var(--theme--ui_divider) 1px 0px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='box-shadow: rgb(77, 81, 83) 0px -1px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(233, 233, 231) 0px -1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgb(63, 66, 69) 0px -1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(237, 237, 236) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px -1px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(233, 233, 231) 0px 1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgb(63, 66, 69) 0px 1px 0px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: rgb(237, 237, 236) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px 1px 0px !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='height: 1px;'][style*='background: rgba(255, 255, 255, 0.07);'],
|
||||
.notion-body:not(.dark) [style*='height: 1px;'][style*='background: rgba(55, 53, 47, 0.09);'] {
|
||||
background: var(--theme--ui_divider) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgb(63, 66, 69) 0px 1px 0px;'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: white -3px 0px 0px, rgb(233, 233, 231) 0px 1px 0px;'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px 1px 0px !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-collection_view_page-block
|
||||
> [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px;'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-collection_view_page-block
|
||||
> [style*='box-shadow: white -3px 0px 0px;'],
|
||||
.notion-body.dark
|
||||
.notion-collection_view-block
|
||||
> [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px;'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-collection_view-block
|
||||
> [style*='box-shadow: white -3px 0px 0px;'] {
|
||||
box-shadow: transparent -3px 0px 0px !important;
|
||||
}
|
||||
.notion-focusable[role='button'][style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;'] {
|
||||
box-shadow: var(--theme--ui_divider) 0px 0px 0px 1px !important;
|
||||
}
|
||||
|
||||
.notion-sidebar-container[style*='box-shadow:'] {
|
||||
box-shadow: var(--theme--ui_divider) -2px 0px 0px 0px inset !important;
|
||||
}
|
||||
|
||||
/** colours **/
|
||||
|
||||
[style*='background: rgb(46, 170, 220)'] {
|
||||
background: var(--theme--accent_blue) !important;
|
||||
color: var(--theme--accent_blue-text) !important;
|
||||
}
|
||||
[style*='background: rgb(6, 156, 205);'] {
|
||||
background: var(--theme--accent_blue-hover) !important;
|
||||
color: var(--theme--accent_blue-text) !important;
|
||||
}
|
||||
[style*='background: rgb(0, 141, 190);'] {
|
||||
background: var(--theme--accent_blue-active) !important;
|
||||
color: var(--theme--accent_blue-text) !important;
|
||||
}
|
||||
[style*='background: rgb(46, 170, 220)'] .chevronDown,
|
||||
[style*='background: rgb(6, 156, 205);'] .chevronDown,
|
||||
[style*='background: rgb(0, 141, 190);'] .chevronDown {
|
||||
fill: var(--theme--accent_blue-text) !important;
|
||||
}
|
||||
[style*='fill: rgb(46, 170, 220)'] {
|
||||
fill: var(--theme--accent_blue) !important;
|
||||
}
|
||||
[style*=' color: rgb(46, 170, 220)'],
|
||||
[style^='color: rgb(46, 170, 220)'] {
|
||||
color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
[style*='background: rgba(46, 170, 220, 0.'],
|
||||
[style*='background-color: rgba(46, 170, 220, 0.'] {
|
||||
background-color: var(--theme--accent_blue-selection) !important;
|
||||
}
|
||||
*::selection {
|
||||
background: var(--theme--accent_blue-selection, rgba(26, 170, 220, 0.3)) !important;
|
||||
}
|
||||
.notion-page-mention-token::selection,
|
||||
.notion-selectable-halo {
|
||||
background: var(--theme--accent_blue-selection, rgba(26, 170, 220, 0.2)) !important;
|
||||
}
|
||||
.notion-focusable-within:focus-within,
|
||||
.notion-focusable:focus-visible {
|
||||
box-shadow: var(--theme--accent_blue-active, rgba(26, 170, 220, 0.7)) 0px 0px 0px 1px inset,
|
||||
var(--theme--accent_blue-active, rgba(26, 170, 220, 0.4)) 0px 0px 0px 2px !important;
|
||||
}
|
||||
.notion-sidebar-switcher:focus-visible {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.notion-onboarding-plan-type-team[style*='box-shadow: rgb(46, 170, 220)'],
|
||||
.notion-onboarding-plan-type-personal[style*='box-shadow: rgb(46, 170, 220)'] {
|
||||
box-shadow: var(--theme--accent_blue) 0px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
@keyframes pulsing-button-border {
|
||||
0% {
|
||||
border-color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
100% {
|
||||
border-color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
}
|
||||
|
||||
[style*='background-color: rgb(235, 87, 87); height: 28px; width: 28px;'],
|
||||
.notion-login [style*='background: rgb(225, 98, 89)'],
|
||||
.notion-login [style*='background: rgb(207, 83, 74)'],
|
||||
.notion-login [style*='background: rgb(191, 77, 69)'] {
|
||||
background: var(--theme--accent_red) !important;
|
||||
border-color: var(--theme--accent_red) !important;
|
||||
}
|
||||
[style*='background: rgb(235, 87, 87); color: white; border-radius: 3px;']:not([role='button']) {
|
||||
background: var(--theme--accent_red) !important;
|
||||
color: var(--theme--accent_red-text) !important;
|
||||
}
|
||||
[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'][role='button'] {
|
||||
color: var(--theme--accent_red) !important;
|
||||
border: 1px solid var(--theme--accent_red) !important;
|
||||
}
|
||||
.notion-focusable[style*='border-radius: 3px;'][style*='color: rgb(235, 87, 87);'][role='button'],
|
||||
[style*='font-size: 12px; font-weight: 600; color: rgb(235, 87, 87);'],
|
||||
[style*='flex-shrink: 0; margin-top: -1px; margin-right: 4px; fill: rgb(235, 87, 87);'],
|
||||
[style*='font-size: 12px;'] > [style*='pointer-events: none; color: rgb(235, 87, 87);'] {
|
||||
color: var(--theme--accent_red) !important;
|
||||
fill: var(--theme--accent_red) !important;
|
||||
}
|
||||
.notion-focusable[style*='border-radius: 3px;'][style*='background: rgba(235, 87, 87, 0.1);'][role='button']:hover {
|
||||
background: var(--theme--accent_red-button) !important;
|
||||
}
|
||||
|
||||
.notion-transclusion_container-block > div > div > div[style*='border: 2px'],
|
||||
.notion-transclusion_reference-block > div > div > div[style*='border: 2px'] {
|
||||
border-color: var(--theme--accent_red, #e38676) !important;
|
||||
}
|
||||
|
||||
.notion-text-mention-token[style*='color:#2EAADC;'] {
|
||||
color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
.notion-text-mention-token[style*='color:#EB5757;'],
|
||||
.notion-link:hover {
|
||||
color: var(--theme--accent_red) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='fill: rgb(202, 204, 206)'],
|
||||
.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] {
|
||||
fill: var(--theme--icon) !important;
|
||||
}
|
||||
.notion-body.dark [style*='fill: rgba(202, 204, 206, 0.'],
|
||||
.notion-body.dark [style*='fill: rgba(255, 255, 255, 0.'],
|
||||
.notion-body:not(.dark) [style*='fill: rgba(25, 23, 17, 0.'],
|
||||
.notion-body:not(.dark) [style*='fill: rgb(55, 53, 47)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='fill: rgba(55, 53, 47, 0.']:not([style*='fill: rgba(55, 53, 47, 0.8)']) {
|
||||
fill: var(--theme--icon_secondary) !important;
|
||||
}
|
||||
.alarmClock,
|
||||
.notion-to_do-block .checkboxSquare[style*='fill: inherit'] {
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.notion-app-inner,
|
||||
.notion-page-content,
|
||||
.notion-selectable.notion-page-block .notion-focusable > [style*=';color:'],
|
||||
.notion-record-icon.notranslate.notion-focusable,
|
||||
.notion-topbar-share-menu.notion-focusable,
|
||||
.notion-collection-view-select.notion-focusable,
|
||||
.notion-body.dark [style*=' color: rgba(255, 255, 255, 0.9);'],
|
||||
.notion-body.dark [style^='color: rgba(255, 255, 255, 0.9);'],
|
||||
.notion-body:not(.dark) [style*=' color: rgb(55, 53, 47)'],
|
||||
.notion-body:not(.dark) [style^='color: rgb(55, 53, 47)'] {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-bottom: 2px solid rgba(255, 255, 255, 0.9);'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 2px solid rgb(55, 53, 47);'] {
|
||||
border-bottom: 2px solid var(--theme--text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='caret-color: rgba(255, 255, 255, 0.9)'],
|
||||
.notion-body:not(.dark) [style*='caret-color: rgb(55, 53, 47)'] {
|
||||
caret-color: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body.dark [style*=' color: rgba(255, 255, 255, 0.6)'],
|
||||
.notion-body.dark [style^='color: rgba(255, 255, 255, 0.6)'],
|
||||
.notion-body.dark [style^='color:rgba(255, 255, 255, 0.6)'],
|
||||
.notion-body:not(.dark) [style*=' color: rgba(55, 53, 47, 0.6)'],
|
||||
.notion-body:not(.dark) [style^='color: rgba(55, 53, 47, 0.6)'],
|
||||
.notion-body:not(.dark) [style^='color:rgba(55, 53, 47, 0.6)'],
|
||||
.notion-sidebar-container > [style*='color'],
|
||||
.notion-gallery-view
|
||||
.notion-focusable[role='button'][style*='font-size: 14px; border-radius: 3px; box-shadow:']:last-child
|
||||
svg
|
||||
+ div,
|
||||
.notion-body.dark [style*=' color: rgba(255, 255, 255, 0.4)'],
|
||||
.notion-body.dark [style^='color: rgba(255, 255, 255, 0.4)'],
|
||||
.notion-body:not(.dark) [style*=' color: rgba(55, 53, 47, 0.4)'],
|
||||
.notion-body:not(.dark) [style^='color: rgba(55, 53, 47, 0.4)'],
|
||||
.notion-page-controls,
|
||||
.notion-page-details-controls,
|
||||
.notion-calendar-view-day {
|
||||
color: var(--theme--text_secondary) !important;
|
||||
}
|
||||
|
||||
.notion-page-mention-token__title {
|
||||
border-bottom: 0.05em solid var(--theme--text_secondary) !important;
|
||||
}
|
||||
.notion-to_do-block [placeholder='To-do'][style*='text-decoration: line-through'] {
|
||||
text-decoration: line-through var(--theme--text_secondary) !important;
|
||||
}
|
||||
.notion-body.dark [style*='-webkit-text-fill-color: rgba(255, 255, 255, 0.4)'],
|
||||
.notion-body:not(.dark) [style*='-webkit-text-fill-color: rgba(55, 53, 47, 0.4)'] {
|
||||
-webkit-text-fill-color: var(--theme--text_secondary) !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-color:rgba(255,255,255,0.4)'],
|
||||
.notion-body:not(.dark) [style*='border-color:rgba(55,53,47,0.4)'] {
|
||||
border-color: var(--theme--text_secondary) !important;
|
||||
}
|
||||
|
||||
/* make sure to change in _mapColors.js as well if colors ever change */
|
||||
.notion-body.dark [style*='background: rgb(80, 85, 88)']:not([role='button']),
|
||||
.notion-body.dark [style*='background-color: rgb(80, 85, 88)']:not([role='button']),
|
||||
.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)']:not([role='button']),
|
||||
.notion-body:not(.dark)
|
||||
[style*='background-color: rgba(206, 205, 202, 0.5)']:not([role='button']),
|
||||
.notion-sidebar-container
|
||||
.notion-sidebar
|
||||
[style*='margin-top']
|
||||
> .notion-focusable[style*='border-radius'] {
|
||||
background: var(--theme--tag_default) !important;
|
||||
color: var(--theme--tag_default-text) !important;
|
||||
}
|
||||
|
||||
/** code **/
|
||||
|
||||
.notion-page-content [style*='color:#EB5757']:not(.notion-text-mention-token) {
|
||||
color: var(--theme--code_inline-text) !important;
|
||||
background: var(--theme--code_inline) !important;
|
||||
}
|
||||
|
||||
.notion-code-block > div > div {
|
||||
background: var(--theme--code) !important;
|
||||
}
|
||||
.notion-code-block > div {
|
||||
color: var(--theme--code_plain) !important;
|
||||
}
|
||||
|
||||
/** simple tables **/
|
||||
|
||||
.notion-table-selection-overlay [style*='border: 2px solid rgb(116, 182, 219);'] {
|
||||
border: 2px solid var(--theme--accent_blue) !important;
|
||||
}
|
||||
.notion-table-row-selector,
|
||||
.notion-table-column-selector,
|
||||
.notion-table-block .notion-focusable [style*='background: rgba(55, 53, 47, 0.06);'] {
|
||||
background: var(--theme--ui_interactive-hover) !important;
|
||||
}
|
||||
.notion-table-row [style*='background: rgb(116, 182, 219);'],
|
||||
.notion-table-row-selector[style*='background: rgb(116, 182, 219);'],
|
||||
.notion-table-column-selector[style*='background: rgb(116, 182, 219);'],
|
||||
.notion-table-block .notion-focusable [style*='background: rgb(116, 182, 219);'] {
|
||||
background: var(--theme--accent_blue) !important;
|
||||
}
|
||||
.notion-table-row td[style*='background:'] {
|
||||
background: var(--theme--bg_secondary) !important;
|
||||
}
|
||||
@ -1,407 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: theming
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--theme--page-padding: calc(96px + env(safe-area-inset-left));
|
||||
--theme--page-width: 900px;
|
||||
--theme--page-width_full: 100%;
|
||||
--theme--page_banner-height: 30vh;
|
||||
--theme--page_preview-padding: 8rem;
|
||||
--theme--page_preview-width: 977px;
|
||||
--theme--page_preview_banner-height: 20vh;
|
||||
|
||||
--theme--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
|
||||
'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--theme--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN',
|
||||
'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', SimSun, 'Nanum Myeongjo', NanumMyeongjo,
|
||||
Batang, serif;
|
||||
--theme--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
--theme--accent_blue: rgb(46, 170, 220);
|
||||
--theme--accent_blue-selection: rgb(46, 170, 220, 0.25);
|
||||
--theme--accent_blue-hover: rgb(6, 156, 205);
|
||||
--theme--accent_blue-active: rgb(0, 141, 190);
|
||||
--theme--accent_blue-text: #fff;
|
||||
--theme--accent_red: #eb5757;
|
||||
--theme--accent_red-button: rgba(235, 87, 87, 0.1);
|
||||
--theme--accent_red-text: #fff;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--theme--bg: #fff;
|
||||
--theme--bg_secondary: rgb(247, 246, 243);
|
||||
--theme--bg_card: #fff;
|
||||
|
||||
--theme--scrollbar_track: #edece9;
|
||||
--theme--scrollbar_thumb: #d3d1cb;
|
||||
--theme--scrollbar_thumb-hover: #aeaca6;
|
||||
|
||||
--theme--ui_shadow: rgba(15, 15, 15, 0.05);
|
||||
--theme--ui_divider: rgb(237, 237, 236);
|
||||
--theme--ui_interactive-hover: rgba(55, 53, 47, 0.08);
|
||||
--theme--ui_interactive-active: rgba(55, 53, 47, 0.16);
|
||||
--theme--ui_toggle-on: var(--theme--accent_blue);
|
||||
--theme--ui_toggle-off: rgba(135, 131, 120, 0.3);
|
||||
--theme--ui_toggle-feature: #fff;
|
||||
--theme--ui_input: rgba(242, 241, 238, 0.6);
|
||||
--theme--ui_tooltip: rgb(15, 15, 15);
|
||||
--theme--ui_tooltip-title: rgba(255, 255, 255, 0.9);
|
||||
--theme--ui_tooltip-description: rgba(206, 205, 202, 0.6);
|
||||
--theme--ui_corner_action: white;
|
||||
--theme--ui_corner_action-hover: rgb(239, 239, 238);
|
||||
--theme--ui_corner_action-active: rgb(223, 223, 222);
|
||||
|
||||
--theme--icon: rgba(55, 53, 47, 0.8);
|
||||
--theme--icon_secondary: rgba(55, 53, 47, 0.4);
|
||||
|
||||
--theme--text: rgb(55, 43, 47);
|
||||
--theme--text_secondary: rgba(55, 43, 47, 0.6);
|
||||
|
||||
--theme--text_gray: rgba(120, 119, 116, 1);
|
||||
--theme--text_brown: rgba(159, 107, 83, 1);
|
||||
--theme--text_orange: rgba(217, 115, 13, 1);
|
||||
--theme--text_yellow: rgba(203, 145, 47, 1);
|
||||
--theme--text_green: rgba(68, 131, 97, 1);
|
||||
--theme--text_blue: rgba(51, 126, 169, 1);
|
||||
--theme--text_purple: rgba(144, 101, 176, 1);
|
||||
--theme--text_pink: rgba(193, 76, 138, 1);
|
||||
--theme--text_red: rgba(212, 76, 71, 1);
|
||||
|
||||
--theme--highlight_gray: rgba(241, 241, 239, 1);
|
||||
--theme--highlight_gray-text: currentColor;
|
||||
--theme--highlight_brown: rgba(244, 238, 238, 1);
|
||||
--theme--highlight_brown-text: currentColor;
|
||||
--theme--highlight_orange: rgba(251, 236, 221, 1);
|
||||
--theme--highlight_orange-text: currentColor;
|
||||
--theme--highlight_yellow: rgba(251, 243, 219, 1);
|
||||
--theme--highlight_yellow-text: currentColor;
|
||||
--theme--highlight_green: rgba(237, 243, 236, 1);
|
||||
--theme--highlight_green-text: currentColor;
|
||||
--theme--highlight_blue: rgba(231, 243, 248, 1);
|
||||
--theme--highlight_blue-text: currentColor;
|
||||
--theme--highlight_purple: rgba(244, 240, 247, 0.8);
|
||||
--theme--highlight_purple-text: currentColor;
|
||||
--theme--highlight_pink: rgba(249, 238, 243, 0.8);
|
||||
--theme--highlight_pink-text: currentColor;
|
||||
--theme--highlight_red: rgba(253, 235, 236, 1);
|
||||
--theme--highlight_red-text: currentColor;
|
||||
|
||||
--theme--callout_gray: rgb(241, 241, 239);
|
||||
--theme--callout_gray-text: currentColor;
|
||||
--theme--callout_brown: rgb(244, 238, 238);
|
||||
--theme--callout_brown-text: currentColor;
|
||||
--theme--callout_orange: rgb(251, 236, 221);
|
||||
--theme--callout_orange-text: currentColor;
|
||||
--theme--callout_yellow: rgb(251, 243, 219);
|
||||
--theme--callout_yellow-text: currentColor;
|
||||
--theme--callout_green: rgb(237, 243, 236);
|
||||
--theme--callout_green-text: currentColor;
|
||||
--theme--callout_blue: rgb(231, 243, 248);
|
||||
--theme--callout_blue-text: currentColor;
|
||||
--theme--callout_purple: rgba(244, 240, 247, 0.8);
|
||||
--theme--callout_purple-text: currentColor;
|
||||
--theme--callout_pink: rgba(249, 238, 243, 0.8);
|
||||
--theme--callout_pink-text: currentColor;
|
||||
--theme--callout_red: rgb(253, 235, 236);
|
||||
--theme--callout_red-text: currentColor;
|
||||
|
||||
--theme--tag_default: rgba(206, 205, 202, 0.5);
|
||||
--theme--tag_default-text: var(--theme--text);
|
||||
--theme--tag_light_gray: rgba(227, 226, 224, 0.5);
|
||||
--theme--tag_light_gray-text: rgb(50, 48, 44);
|
||||
--theme--tag_gray: rgb(227, 226, 224);
|
||||
--theme--tag_gray-text: rgb(50, 48, 44);
|
||||
--theme--tag_brown: rgb(238, 224, 218);
|
||||
--theme--tag_brown-text: rgb(68, 42, 30);
|
||||
--theme--tag_orange: rgb(250, 222, 201);
|
||||
--theme--tag_orange-text: rgb(73, 41, 14);
|
||||
--theme--tag_yellow: rgb(253, 236, 200);
|
||||
--theme--tag_yellow-text: rgb(64, 44, 27);
|
||||
--theme--tag_green: rgb(219, 237, 219);
|
||||
--theme--tag_green-text: rgb(28, 56, 41);
|
||||
--theme--tag_blue: rgb(211, 229, 239);
|
||||
--theme--tag_blue-text: rgb(24, 51, 71);
|
||||
--theme--tag_purple: rgb(232, 222, 238);
|
||||
--theme--tag_purple-text: rgb(65, 36, 84);
|
||||
--theme--tag_pink: rgb(245, 224, 233);
|
||||
--theme--tag_pink-text: rgb(76, 35, 55);
|
||||
--theme--tag_red: rgb(255, 226, 221);
|
||||
--theme--tag_red-text: rgb(93, 23, 21);
|
||||
|
||||
--theme--board_light_gray: rgba(249, 249, 245, 0.5);
|
||||
--theme--board_light_gray-card: white;
|
||||
--theme--board_light_gray-card_text: inherit;
|
||||
--theme--board_light_gray-text: rgba(145, 145, 142, 0.5);
|
||||
--theme--board_gray: rgba(247, 247, 245, 0.7);
|
||||
--theme--board_gray-card: white;
|
||||
--theme--board_gray-card_text: inherit;
|
||||
--theme--board_gray-text: rgb(145, 145, 142);
|
||||
--theme--board_brown: rgba(250, 246, 245, 0.7);
|
||||
--theme--board_brown-card: white;
|
||||
--theme--board_brown-card_text: inherit;
|
||||
--theme--board_brown-text: rgb(187, 132, 108);
|
||||
--theme--board_orange: rgba(252, 245, 242, 0.7);
|
||||
--theme--board_orange-card: white;
|
||||
--theme--board_orange-card_text: inherit;
|
||||
--theme--board_orange-text: rgb(215, 129, 58);
|
||||
--theme--board_yellow: rgba(250, 247, 237, 0.7);
|
||||
--theme--board_yellow-card: white;
|
||||
--theme--board_yellow-card_text: inherit;
|
||||
--theme--board_yellow-text: rgb(203, 148, 51);
|
||||
--theme--board_green: rgba(244, 248, 243, 0.7);
|
||||
--theme--board_green-card: white;
|
||||
--theme--board_green-card_text: inherit;
|
||||
--theme--board_green-text: rgb(108, 155, 125);
|
||||
--theme--board_blue: rgba(241, 248, 251, 0.7);
|
||||
--theme--board_blue-card: white;
|
||||
--theme--board_blue-card_text: inherit;
|
||||
--theme--board_blue-text: rgb(91, 151, 189);
|
||||
--theme--board_purple: rgba(249, 246, 252, 0.7);
|
||||
--theme--board_purple-card: white;
|
||||
--theme--board_purple-card_text: inherit;
|
||||
--theme--board_purple-text: rgb(167, 130, 195);
|
||||
--theme--board_pink: rgba(251, 245, 251, 0.7);
|
||||
--theme--board_pink-card: white;
|
||||
--theme--board_pink-card_text: inherit;
|
||||
--theme--board_pink-text: rgb(205, 116, 159);
|
||||
--theme--board_red: rgba(253, 245, 243, 0.7);
|
||||
--theme--board_red-card: white;
|
||||
--theme--board_red-card_text: inherit;
|
||||
--theme--board_red-text: rgb(225, 111, 100);
|
||||
|
||||
--theme--code_inline: rgba(135, 131, 120, 0.15);
|
||||
--theme--code_inline-text: #eb5757;
|
||||
|
||||
--theme--code: #f7f6f3;
|
||||
--theme--code_plain: var(--theme--text);
|
||||
--theme--code_property: #905;
|
||||
--theme--code_tag: var(--theme--code_property);
|
||||
--theme--code_boolean: var(--theme--code_property);
|
||||
--theme--code_number: var(--theme--code_property);
|
||||
--theme--code_constant: var(--theme--code_property);
|
||||
--theme--code_symbol: var(--theme--code_property);
|
||||
--theme--code_deleted: var(--theme--code_property);
|
||||
--theme--code_selector: #690;
|
||||
--theme--code_attr-name: var(--theme--code_selector);
|
||||
--theme--code_string: var(--theme--code_selector);
|
||||
--theme--code_char: var(--theme--code_selector);
|
||||
--theme--code_builtin: var(--theme--code_selector);
|
||||
--theme--code_inserted: var(--theme--code_selector);
|
||||
--theme--code_operator: #9a6e3a;
|
||||
--theme--code_entity: var(--theme--code_operator);
|
||||
--theme--code_url: var(--theme--code_operator);
|
||||
--theme--code_variable: var(--theme--code_regex);
|
||||
--theme--code_comment: slategray;
|
||||
--theme--code_cdata: var(--theme--code_comment);
|
||||
--theme--code_prolog: var(--theme--code_comment);
|
||||
--theme--code_doctype: var(--theme--code_comment);
|
||||
--theme--code_atrule: #07a;
|
||||
--theme--code_attr-value: var(--theme--code_atrule);
|
||||
--theme--code_keyword: var(--theme--code_atrule);
|
||||
--theme--code_regex: #e90;
|
||||
--theme--code_important: var(--theme--code_regex);
|
||||
--theme--code_function: #dd4a68;
|
||||
--theme--code_class-name: var(--theme--code_function);
|
||||
--theme--code_parameter: var(--theme--code_plain);
|
||||
--theme--code_decorator: var(--theme--code_plain);
|
||||
--theme--code_id: var(--theme--code_plain);
|
||||
--theme--code_class: var(--theme--code_plain);
|
||||
--theme--code_pseudo-element: var(--theme--code_plain);
|
||||
--theme--code_pseudo-class: var(--theme--code_plain);
|
||||
--theme--code_attribute: var(--theme--code_plain);
|
||||
--theme--code_value: var(--theme--code_plain);
|
||||
--theme--code_unit: var(--theme--code_plain);
|
||||
--theme--code_punctuation: #999;
|
||||
--theme--code_annotation: var(--theme--code_plain);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--theme--bg: rgb(47, 52, 55);
|
||||
--theme--bg_secondary: rgb(55, 60, 63);
|
||||
--theme--bg_card: rgb(63, 68, 71);
|
||||
|
||||
--theme--scrollbar_track: rgba(202, 204, 206, 0.04);
|
||||
--theme--scrollbar_thumb: #474c50;
|
||||
--theme--scrollbar_thumb-hover: rgba(202, 204, 206, 0.3);
|
||||
|
||||
--theme--ui_shadow: rgba(15, 15, 15, 0.15);
|
||||
--theme--ui_divider: rgb(255, 255, 255, 0.07);
|
||||
--theme--ui_interactive-hover: rgba(255, 255, 255, 0.1);
|
||||
--theme--ui_interactive-active: rgb(63, 68, 71);
|
||||
--theme--ui_toggle-on: var(--theme--accent_blue);
|
||||
--theme--ui_toggle-off: rgba(202, 204, 206, 0.3);
|
||||
--theme--ui_toggle-feature: #fff;
|
||||
--theme--ui_input: rgba(15, 15, 15, 0.3);
|
||||
--theme--ui_tooltip: rgb(202, 204, 206);
|
||||
--theme--ui_tooltip-title: rgb(15, 15, 15);
|
||||
--theme--ui_tooltip-description: rgba(47, 52, 55, 0.6);
|
||||
--theme--ui_corner_action: rgb(80, 85, 88);
|
||||
--theme--ui_corner_action-hover: rgb(98, 102, 104);
|
||||
--theme--ui_corner_action-active: rgb(120, 123, 123);
|
||||
|
||||
--theme--icon: rgba(202, 204, 206);
|
||||
--theme--icon_secondary: rgb(202, 204, 206, 0.6);
|
||||
|
||||
--theme--text: rgba(255, 255, 255, 0.9);
|
||||
--theme--text_secondary: rgba(255, 255, 255, 0.6);
|
||||
|
||||
--theme--text_gray: rgba(159, 164, 169, 1);
|
||||
--theme--text_brown: rgba(212, 150, 117, 1);
|
||||
--theme--text_orange: rgba(217, 133, 56, 1);
|
||||
--theme--text_yellow: rgba(201, 145, 38, 1);
|
||||
--theme--text_green: rgba(113, 178, 131, 1);
|
||||
--theme--text_blue: rgba(102, 170, 218, 1);
|
||||
--theme--text_purple: rgba(176, 152, 217, 1);
|
||||
--theme--text_pink: rgba(223, 132, 209, 1);
|
||||
--theme--text_red: rgba(234, 135, 140, 1);
|
||||
|
||||
--theme--highlight_gray: rgba(60, 65, 68, 1);
|
||||
--theme--highlight_gray-text: currentColor;
|
||||
--theme--highlight_brown: rgba(76, 61, 53, 1);
|
||||
--theme--highlight_brown-text: currentColor;
|
||||
--theme--highlight_orange: rgba(85, 59, 41, 1);
|
||||
--theme--highlight_orange-text: currentColor;
|
||||
--theme--highlight_yellow: rgba(79, 64, 41, 1);
|
||||
--theme--highlight_yellow-text: currentColor;
|
||||
--theme--highlight_green: rgba(46, 68, 58, 1);
|
||||
--theme--highlight_green-text: currentColor;
|
||||
--theme--highlight_blue: rgba(45, 66, 86, 1);
|
||||
--theme--highlight_blue-text: currentColor;
|
||||
--theme--highlight_purple: rgba(69, 58, 91, 1);
|
||||
--theme--highlight_purple-text: currentColor;
|
||||
--theme--highlight_pink: rgba(81, 56, 77, 1);
|
||||
--theme--highlight_pink-text: currentColor;
|
||||
--theme--highlight_red: rgba(94, 52, 54, 1);
|
||||
--theme--highlight_red-text: currentColor;
|
||||
|
||||
--theme--callout_gray: rgb(60, 65, 68);
|
||||
--theme--callout_gray-text: currentColor;
|
||||
--theme--callout_brown: rgb(76, 61, 53);
|
||||
--theme--callout_brown-text: currentColor;
|
||||
--theme--callout_orange: rgb(85, 59, 41);
|
||||
--theme--callout_orange-text: currentColor;
|
||||
--theme--callout_yellow: rgb(79, 64, 41);
|
||||
--theme--callout_yellow-text: currentColor;
|
||||
--theme--callout_green: rgb(46, 68, 58);
|
||||
--theme--callout_green-text: currentColor;
|
||||
--theme--callout_blue: rgb(45, 66, 86);
|
||||
--theme--callout_blue-text: currentColor;
|
||||
--theme--callout_purple: rgb(69, 58, 91);
|
||||
--theme--callout_purple-text: currentColor;
|
||||
--theme--callout_pink: rgb(81, 56, 77);
|
||||
--theme--callout_pink-text: currentColor;
|
||||
--theme--callout_red: rgb(94, 52, 54);
|
||||
--theme--callout_red-text: currentColor;
|
||||
|
||||
--theme--tag_default: rgba(206, 205, 202, 0.5);
|
||||
--theme--tag_default-text: var(--theme--text);
|
||||
--theme--tag_light_gray: rgba(71, 76, 80, 0.7);
|
||||
--theme--tag_light_gray-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_gray: rgb(71, 76, 80);
|
||||
--theme--tag_gray-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_brown: rgb(92, 71, 61);
|
||||
--theme--tag_brown-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_orange: rgb(136, 84, 44);
|
||||
--theme--tag_orange-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_yellow: rgb(146, 118, 63);
|
||||
--theme--tag_yellow-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_green: rgb(50, 82, 65);
|
||||
--theme--tag_green-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_blue: rgb(42, 78, 107);
|
||||
--theme--tag_blue-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_purple: rgb(83, 68, 116);
|
||||
--theme--tag_purple-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_pink: rgb(106, 59, 99);
|
||||
--theme--tag_pink-text: rgba(255, 255, 255, 0.88);
|
||||
--theme--tag_red: rgb(122, 54, 59);
|
||||
--theme--tag_red-text: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--theme--board_light_gray: rgba(51, 55, 59, 0.7);
|
||||
--theme--board_light_gray-card: rgba(60, 65, 68, 0.7);
|
||||
--theme--board_light_gray-card_text: inherit;
|
||||
--theme--board_light_gray-text: rgba(107, 112, 116, 0.7);
|
||||
--theme--board_gray: rgb(51, 55, 59);
|
||||
--theme--board_gray-card: rgb(60, 65, 68);
|
||||
--theme--board_gray-card_text: inherit;
|
||||
--theme--board_gray-text: rgb(107, 112, 116);
|
||||
--theme--board_brown: rgb(59, 54, 51);
|
||||
--theme--board_brown-card: rgb(76, 61, 53);
|
||||
--theme--board_brown-card_text: inherit;
|
||||
--theme--board_brown-text: rgb(155, 98, 69);
|
||||
--theme--board_orange: rgb(61, 54, 49);
|
||||
--theme--board_orange-card: rgb(85, 59, 41);
|
||||
--theme--board_orange-text: rgb(168, 92, 30);
|
||||
--theme--board_yellow: rgb(56, 55, 49);
|
||||
--theme--board_yellow-card: rgb(79, 64, 41);
|
||||
--theme--board_yellow-card_text: inherit;
|
||||
--theme--board_yellow-text: rgb(137, 107, 42);
|
||||
--theme--board_green: rgb(49, 57, 53);
|
||||
--theme--board_green-card: rgb(46, 68, 58);
|
||||
--theme--board_green-card_text: inherit;
|
||||
--theme--board_green-text: rgb(61, 124, 86);
|
||||
--theme--board_blue: rgb(49, 56, 64);
|
||||
--theme--board_blue-card: rgb(45, 66, 86);
|
||||
--theme--board_blue-card_text: inherit;
|
||||
--theme--board_blue-text: rgb(46, 117, 164);
|
||||
--theme--board_purple: rgb(57, 53, 65);
|
||||
--theme--board_purple-card: rgb(69, 58, 91);
|
||||
--theme--board_purple-card_text: inherit;
|
||||
--theme--board_purple-text: rgb(123, 96, 180);
|
||||
--theme--board_pink: rgb(60, 53, 58);
|
||||
--theme--board_pink-card: rgb(81, 56, 77);
|
||||
--theme--board_pink-card_text: inherit;
|
||||
--theme--board_pink-text: rgb(169, 76, 157);
|
||||
--theme--board_red: rgb(66, 51, 51);
|
||||
--theme--board_red-card: rgb(94, 52, 54);
|
||||
--theme--board_red-card_text: inherit;
|
||||
--theme--board_red-text: rgb(194, 65, 82);
|
||||
|
||||
--theme--code_inline: rgba(135, 131, 120, 0.15);
|
||||
--theme--code_inline-text: #eb5757;
|
||||
|
||||
--theme--code: rgb(63, 68, 71);
|
||||
--theme--code_plain: var(--theme--text);
|
||||
--theme--code_property: hsl(350, 40%, 70%);
|
||||
--theme--code_tag: var(--theme--code_property);
|
||||
--theme--code_boolean: var(--theme--code_property);
|
||||
--theme--code_number: var(--theme--code_property);
|
||||
--theme--code_constant: var(--theme--code_property);
|
||||
--theme--code_symbol: var(--theme--code_property);
|
||||
--theme--code_deleted: #f00;
|
||||
--theme--code_selector: hsl(75, 70%, 60%);
|
||||
--theme--code_attr-name: var(--theme--code_selector);
|
||||
--theme--code_string: var(--theme--code_selector);
|
||||
--theme--code_char: var(--theme--code_selector);
|
||||
--theme--code_builtin: var(--theme--code_selector);
|
||||
--theme--code_inserted: var(--theme--code_selector);
|
||||
--theme--code_operator: hsl(40, 90%, 60%);
|
||||
--theme--code_entity: var(--theme--code_operator);
|
||||
--theme--code_url: var(--theme--code_operator);
|
||||
--theme--code_variable: var(--theme--code_operator);
|
||||
--theme--code_comment: hsl(30, 20%, 50%);
|
||||
--theme--code_cdata: var(--theme--code_comment);
|
||||
--theme--code_prolog: var(--theme--code_comment);
|
||||
--theme--code_doctype: var(--theme--code_comment);
|
||||
--theme--code_atrule: hsl(350, 40%, 70%);
|
||||
--theme--code_attr-value: var(--theme--code_atrule);
|
||||
--theme--code_keyword: var(--theme--code_atrule);
|
||||
--theme--code_regex: #e90;
|
||||
--theme--code_important: var(--theme--code_regex);
|
||||
--theme--code_function: var(--theme--code_plain);
|
||||
--theme--code_class-name: var(--theme--code_function);
|
||||
--theme--code_parameter: var(--theme--code_plain);
|
||||
--theme--code_decorator: var(--theme--code_plain);
|
||||
--theme--code_id: var(--theme--code_plain);
|
||||
--theme--code_class: var(--theme--code_plain);
|
||||
--theme--code_pseudo-element: var(--theme--code_plain);
|
||||
--theme--code_pseudo-class: var(--theme--code_plain);
|
||||
--theme--code_attribute: var(--theme--code_plain);
|
||||
--theme--code_value: var(--theme--code_plain);
|
||||
--theme--code_unit: var(--theme--code_plain);
|
||||
--theme--code_punctuation: var(--theme--code_plain);
|
||||
--theme--code_annotation: var(--theme--code_plain);
|
||||
}
|
||||
@ -5,8 +5,18 @@
|
||||
*/
|
||||
|
||||
body.dark {
|
||||
--theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--theme--font-serif: Lyon-Text, Georgia, YuMincho, "Yu Mincho",
|
||||
"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC",
|
||||
SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif;
|
||||
--theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo,
|
||||
Courier, monospace;
|
||||
--theme--fg-primary: rgba(255, 255, 255, 0.81);
|
||||
--theme--fg-secondary: rgb(155, 155, 155);
|
||||
--theme--fg-border: rgb(47, 47, 47);
|
||||
--theme--fg-gray: rgb(155, 155, 155);
|
||||
--theme--fg-brown: rgb(186, 133, 111);
|
||||
--theme--fg-orange: rgb(199, 125, 72);
|
||||
@ -16,6 +26,9 @@ body.dark {
|
||||
--theme--fg-purple: rgb(157, 104, 211);
|
||||
--theme--fg-pink: rgb(209, 87, 150);
|
||||
--theme--fg-red: rgb(223, 84, 82);
|
||||
--theme--bg-primary: rgb(25, 25, 25);
|
||||
--theme--bg-secondary: rgb(32, 32, 32);
|
||||
--theme--bg-hover: rgba(255, 255, 255, 0.055);
|
||||
--theme--bg-light_gray: rgb(55, 55, 55);
|
||||
--theme--bg-gray: rgb(90, 90, 90);
|
||||
--theme--bg-brown: rgb(96, 59, 44);
|
||||
@ -24,8 +37,18 @@ body.dark {
|
||||
--theme--bg-green: rgb(43, 89, 63);
|
||||
--theme--bg-blue: rgb(40, 69, 108);
|
||||
--theme--bg-purple: rgb(73, 47, 100);
|
||||
--theme--bg-red: rgb(110, 54, 48);
|
||||
--theme--bg-pink: rgb(105, 49, 76);
|
||||
--theme--bg-red: rgb(110, 54, 48);
|
||||
--theme--bg_dim-light_gray: rgb(28, 28, 28);
|
||||
--theme--bg_dim-gray: rgb(32, 32, 32);
|
||||
--theme--bg_dim-brown: rgb(35, 30, 28);
|
||||
--theme--bg_dim-orange: rgb(37, 31, 27);
|
||||
--theme--bg_dim-yellow: rgb(35, 31, 26);
|
||||
--theme--bg_dim-green: rgb(29, 34, 32);
|
||||
--theme--bg_dim-blue: rgb(27, 31, 34);
|
||||
--theme--bg_dim-purple: rgb(31, 29, 33);
|
||||
--theme--bg_dim-pink: rgb(35, 28, 31);
|
||||
--theme--bg_dim-red: rgb(36, 30, 29);
|
||||
--theme--accent-primary: rgb(35, 131, 226);
|
||||
--theme--accent-primary_hover: rgb(0, 117, 211);
|
||||
--theme--accent-primary_contrast: rgb(255, 255, 255);
|
||||
@ -36,7 +59,7 @@ body.dark {
|
||||
--theme--scrollbar-track: rgba(202, 204, 206, 0.04);
|
||||
--theme--scrollbar-thumb: #474c50;
|
||||
--theme--scrollbar-thumb_hover: rgba(202, 204, 206, 0.3);
|
||||
--theme--code-inli: #eb5757;
|
||||
--theme--code-inline_fg: #eb5757;
|
||||
--theme--code-inline_bg: rgba(135, 131, 120, 0.15);
|
||||
--theme--code-block_fg: rgba(255, 255, 255, 0.81);
|
||||
--theme--code-block_bg: rgba(255, 255, 255, 0.03);
|
||||
@ -73,8 +96,18 @@ body.dark {
|
||||
}
|
||||
|
||||
body:not(.dark) {
|
||||
--theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--theme--font-serif: Lyon-Text, Georgia, YuMincho, "Yu Mincho",
|
||||
"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC",
|
||||
SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif;
|
||||
--theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo,
|
||||
Courier, monospace;
|
||||
--theme--fg-primary: rgb(55, 53, 47);
|
||||
--theme--fg-secondary: rgba(25, 23, 17, 0.6);
|
||||
--theme--fg-border: rgb(233, 233, 231);
|
||||
--theme--fg-gray: rgb(120, 119, 116);
|
||||
--theme--fg-brown: rgb(159, 107, 83);
|
||||
--theme--fg-orange: rgb(217, 115, 13);
|
||||
@ -84,6 +117,9 @@ body:not(.dark) {
|
||||
--theme--fg-purple: rgb(144, 101, 176);
|
||||
--theme--fg-pink: rgb(193, 76, 138);
|
||||
--theme--fg-red: rgb(212, 76, 71);
|
||||
--theme--bg-primary: rgb(255, 255, 255);
|
||||
--theme--bg-secondary: rgb(251, 251, 250);
|
||||
--theme--bg-hover: rgba(55, 53, 47, 0.08);
|
||||
--theme--bg-light_gray: rgba(227, 226, 224, 0.5);
|
||||
--theme--bg-gray: rgb(227, 226, 224);
|
||||
--theme--bg-brown: rgb(238, 224, 218);
|
||||
@ -92,8 +128,18 @@ body:not(.dark) {
|
||||
--theme--bg-green: rgb(219, 237, 219);
|
||||
--theme--bg-blue: rgb(211, 229, 239);
|
||||
--theme--bg-purple: rgb(232, 222, 238);
|
||||
--theme--bg-red: rgb(255, 226, 221);
|
||||
--theme--bg-pink: rgb(245, 224, 233);
|
||||
--theme--bg-red: rgb(255, 226, 221);
|
||||
--theme--bg_dim-light_gray: rgba(249, 249, 245, 0.5);
|
||||
--theme--bg_dim-gray: rgba(247, 247, 245, 0.7);
|
||||
--theme--bg_dim-brown: rgba(250, 246, 245, 0.7);
|
||||
--theme--bg_dim-orange: rgba(252, 245, 242, 0.7);
|
||||
--theme--bg_dim-yellow: rgba(250, 247, 237, 0.7);
|
||||
--theme--bg_dim-green: rgba(244, 248, 243, 0.7);
|
||||
--theme--bg_dim-blue: rgba(241, 248, 251, 0.7);
|
||||
--theme--bg_dim-purple: rgba(249, 246, 252, 0.7);
|
||||
--theme--bg_dim-pink: rgba(251, 245, 251, 0.7);
|
||||
--theme--bg_dim-red: rgba(253, 245, 243, 0.7);
|
||||
--theme--accent-primary: rgb(35, 131, 226);
|
||||
--theme--accent-primary_hover: rgb(0, 117, 211);
|
||||
--theme--accent-primary_contrast: rgb(255, 255, 255);
|
||||
@ -104,7 +150,7 @@ body:not(.dark) {
|
||||
--theme--scrollbar-track: #edece9;
|
||||
--theme--scrollbar-thumb: #d3d1cb;
|
||||
--theme--scrollbar-thumb_hover: #aeaca6;
|
||||
--theme--code-inli: #eb5757;
|
||||
--theme--code-inline_fg: #eb5757;
|
||||
--theme--code-inline_bg: rgba(135, 131, 120, 0.15);
|
||||
--theme--code-block_fg: rgb(55, 53, 47);
|
||||
--theme--code-block_bg: rgb(247, 246, 243);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user