dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-19 19:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/dev' into dev

Browse Source
This commit is contained in:
mugiwarafx 2020-12-13 17:10:51 +01:00
commit 804524dae2
14 changed files with 901 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
mods/admiraldus-global-linking-blocks/app.css Normal file
View File

@ -0,0 +1,101 @@
/*
* global linking blocks
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
/* ========== THE PAGE BUTTON ========== */
.admiraldus-glb-page-button
{
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-radius: 3px;
height: 28px;
min-width: 0px;
padding-right: 8px;
padding-left: 6px;
white-space: nowrap;
font-size: 14px;
line-height: 1.2;
color: var(--theme--text);
cursor: pointer;
transition: background 20ms ease-in 0s;
user-select: none;
}
.admiraldus-glb-page-button:hover
{
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.admiraldus-glb-page-button > svg
{
backface-visibility: hidden;
display: block;
flex-shrink: 0;
margin-right: 6px;
height: 14px;
width: 14px;
fill: var(--theme--text);
}
.admiraldus-glb-page-button > span {
opacity: 1;
transition: opacity .4s ease;
}
.admiraldus-glb-span-hide {
position: absolute;
top: -9999px;
opacity: 0 !important;
}
/* ========== THE BLOCK BUTTON ========== */
.admiraldus-glb-block-button {
display: flex;
align-items: center;
min-height: 28px;
width: 100%;
font-size: var(--theme--font_label-size);
line-height: 120%;
cursor: pointer;
transition: background 20ms ease-in 0s;
user-select: none;
}
.admiraldus-glb-block-button:hover
{
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.admiraldus-glb-block-button > svg {
backface-visibility: hidden;
display: flex;
display: block;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-left: 14px;
height: 17px;
width: 17px;
fill: inherit;
}
.admiraldus-glb-block-button > span {
margin-right: 14px;
margin-left: 8px;
min-width: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
/* ========== THE MENU ========== */
.--on-hover div[role="button"]:not(.admiraldus-glb-block-button) {
background: transparent !important;
box-shadow: none !important;
}

82
mods/admiraldus-global-linking-blocks/helper.js Normal file
View File

@ -0,0 +1,82 @@
/*
* helper.js from admiraldus
* (c) 2020 admiraldus (https://github.com/admiraldus)
* use for your own modules but you have to attribute to me.
* under the MIT license
*/
'use strict';
const PATH = require('path');
const FS = require('fs-extra');
var x$ = {
sel: function(els, mode = false, base = null) {
base = base === null ? document : base;
return mode ? base.querySelectorAll(els) : base.querySelector(els);
},
cls: {
r: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
mode ? x$.sel(els, true).forEach((el) =>
el.classList.remove(cls)) : els.classList.remove(cls);
},
a: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
mode ? x$.sel(els, true).forEach((el) =>
el.classList.add(cls)) : els.classList.add(cls);
},
c: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
return mode ? x$.sel(els, true).forEach((el) =>
el.classList.contains(cls)) : els.classList.contains(cls);
},
},
svg: function(path) {
return FS.readFile(PATH.resolve(__dirname + path));
},
on: function(base, event, fn, flag = false) {
base.addEventListener(event, fn, flag);
},
sim: function(events, els) {
events.forEach((event) => els.dispatchEvent(
new MouseEvent(event, {
view: window,
bubbles: true,
cancelable: true,
buttons: 1,
})));
},
obs: function(fn, els, config) {
const observer = new MutationObserver(fn);
observer.observe(els, config);
},
clp: function(mode = true, value) {
switch (mode) {
case false:
navigator.clipboard.writeText(value);
break;
case true:
return navigator.clipboard.readText();
break;
}
},
el: function(html) {
const temp = document.createElement('template');
temp.innerHTML = html.trim();
return temp.content.firstElementChild;
},
};
module.exports = {
x$,
};

58
mods/admiraldus-global-linking-blocks/icons/link.svg Normal file
View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.516,0,0,114.497,0,256c0,141.483,114.497,256,256,256c141.484,0,256-114.497,256-256
C512,114.517,397.503,0,256,0z M179.672,43.154c-18.976,24.15-32.411,54.72-41.322,84.252
c-14.826-9.037-28.655-19.814-41.172-32.171C120.97,71.723,149.058,54.11,179.672,43.154z M30,256
c0-50.725,16.604-98.895,47.232-138.315c16.079,15.678,34.043,29.063,53.365,39.92C123.981,188.356,120.5,221.677,120.5,256
s3.481,67.644,10.097,98.395c-19.322,10.857-37.286,24.242-53.365,39.92C46.604,354.895,30,306.725,30,256z M97.177,416.765
c12.517-12.357,26.346-23.134,41.172-32.171c8.908,29.518,22.341,60.094,41.322,84.252
C149.057,457.891,120.969,440.278,97.177,416.765z M241,479.476c-39.328-13.125-64.166-68.866-75.544-108.983
c23.765-10.401,49.312-16.72,75.544-18.472V479.476z M241,256v65.957c-28.585,1.685-56.481,8.155-82.582,18.927
c-5.195-26.628-7.918-55.305-7.918-84.884s2.723-58.256,7.918-84.884c26.1,10.772,53.996,17.242,82.582,18.927V256z M241,159.979
c-26.232-1.753-51.779-8.071-75.544-18.472c11.347-40.006,36.17-95.843,75.544-108.983V159.979z M414.823,95.235
c-12.517,12.357-26.346,23.134-41.172,32.171c-8.908-29.517-22.341-60.094-41.322-84.252
C362.943,54.109,391.031,71.722,414.823,95.235z M271,32.524c39.328,13.125,64.166,68.866,75.544,108.983
c-23.765,10.401-49.312,16.72-75.544,18.472V32.524z M271,256v-65.957c28.585-1.685,56.481-8.155,82.582-18.927
c5.195,26.628,7.918,55.305,7.918,84.884s-2.723,58.256-7.918,84.884c-26.1-10.772-53.996-17.242-82.582-18.927V256z M271,479.476
V352.021c26.232,1.753,51.779,8.071,75.544,18.472C335.197,410.499,310.374,466.336,271,479.476z M332.329,468.846
c18.974-24.15,32.41-54.72,41.322-84.252c14.826,9.037,28.656,19.814,41.172,32.171
C391.031,440.278,362.943,457.891,332.329,468.846z M434.769,394.314c-16.079-15.678-34.043-29.063-53.366-39.92
c6.616-30.75,10.097-64.071,10.097-98.395c0-34.324-3.481-67.644-10.097-98.395c19.322-10.856,37.286-24.241,53.366-39.92
C465.396,157.105,482,205.275,482,256C482,306.725,465.396,354.895,434.769,394.314z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

213
mods/admiraldus-global-linking-blocks/mod.js Normal file
View File

@ -0,0 +1,213 @@
/*
* global linking blocks
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
'use strict';
const {x$} = require('./helper.js');
module.exports = {
id: '74856af4-6970-455d-bd86-0a385a402dd1',
name: 'global linking blocks',
tags: ['extension'],
desc: 'easily copy the global link of the page or the desired block.',
version: '0.1.0',
author: {
name: 'admiraldus',
link: 'https://github.com/admiraldus',
avatar: 'https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif',
},
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', () => {
if (document.readyState !== 'complete') return false;
/**
* Prevent selectors from failing.
*
* @return {Function} Returns "wait()" until "main()" returns.
*/
const wait = !function wait() {
const els = [x$.sel('.notion-frame'), x$.sel('.notion-topbar')];
if (els.some((el) => el !== null)) return main();
setTimeout(() => wait(), 500);
}();
/**
* Everything happens here. ¯\_(ツ)_/¯
*/
async function main() {
const icon = await x$.svg('/icons/link.svg');
const pageClass = 'admiraldus-glb-page-button';
const blockClass = 'admiraldus-glb-block-button';
const spanClass = 'admiraldus-glb-span-hide';
/**
* Create the page link button and append it to the topbar.
*
* @return {create} Returns "create()" if not appended.
*/
const pageButton = !function create() {
const target = x$.sel('.notion-topbar-share-menu');
const attr = [
`class="${pageClass}" role="button" tabindex="0"`,
`class="${spanClass}"`,
];
const html = x$.el(
`<div ${attr[0]}>
${icon}
<span>Global Link</span>
<span ${attr[1]}>Link copied!</span
</div>`);
target.before(html);
if (html === null) return create();
}();
/**
* Create the block link button and append it to the block menu.
*
* @param {HTMLDivElement} el The copy link button.
*
* @return {create} Returns "create()" if not appended.
*/
const blockButton = function create(el) {
const target = el;
const attr = `class="${blockClass}" role="button" tabindex="0"`;
const html = x$.el(
`<div ${attr}>
${icon}
<span>Global link</span>
</div>`);
target.before(html);
if (html === null) return create();
};
let buttonDelay;
let link;
/**
* Copy the link to the clipboard.
*
* @param {boolean} page If the link is the link of the page.
*/
function copyLink(page) {
/**
* Change the button text to provide the copied feedback.
*/
const changeButtonText = function create() {
const span = x$.sel('span', true, x$.sel(`.${pageClass}`));
/**
* Set the classes of the button's div elements.
*
* @param {number} first A specific array items.
* @param {number} second A specific array items.
*/
function setClasses(first, second) {
x$.cls.a(span[first], spanClass);
x$.cls.r(span[second], spanClass);
}
clearTimeout(buttonDelay);
setClasses(0, 1);
buttonDelay = setTimeout(() => {
setClasses(1, 0);
}, 700);
};
switch (page) {
case true:
link = `https://${window.location.href}/`.replace(/notion:\/\//, '');
changeButtonText();
x$.clp(false, link);
break;
case false:
const events = ['mousedown', 'mouseup', 'click'];
x$.sim(events, x$.sel(`.${blockClass}`).nextSibling);
x$.clp().then((text) => {
x$.clp(false, `${text.replace(/(?<=so[\/]).*#/, '')}/`);
});
break;
}
}
/**
* Observer for the overlay container.
*/
x$.obs(() => {
/**
* Get the copy link button.
*
* @return {HTMLDivElement} Returns the copy link button.
*/
function getLinkButton() {
const lang = ['Copy link', '링크 복사'];
const overlay = x$.sel('.notion-overlay-container');
const record = x$.sel(
'[style*="text-overflow: ellipsis;"]', true, overlay);
return Array.from(record).find(
(div) => lang.some((text) => div.textContent === text));
}
if (x$.sel(`.${blockClass}`) !== null ||
getLinkButton() === undefined) return;
blockButton(getLinkButton().closest('[role="button"]'));
}, x$.sel('.notion-overlay-container'), {
subtree: true, childList: true,
});
/**
* Listen for click events to call "copyLink()"".
*
* @type {HTMLElement}
* @listens document.body#click
*/
x$.on(document.body, 'click', (event) => {
const target = event.target;
if (x$.cls.c(target, pageClass) ||
target.closest(`.${pageClass}`)) {
copyLink(/* page= */ true);
} else if (x$.cls.c(target, blockClass) ||
target.closest(`.${blockClass}`)) {
copyLink(/* page= */ false);
}
});
/**
* Listen for mouseenter events to add class.
*
* @type {HTMLElement}
* @listens document.body#mouseenter
*/
x$.on(document.body, 'mouseenter', (event) => {
const target = event.target;
if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
const menu = target.closest('.notion-scroller.vertical');
x$.cls.a(menu, '--on-hover');
}
}, true);
/**
* Listen for mouseleave events to remove class.
*
* @type {HTMLElement}
* @listens document.body#mouseleave
*/
x$.on(document.body, 'mouseleave', (event) => {
const target = event.target;
if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
const menu = target.closest('.notion-scroller.vertical');
x$.cls.r(menu, '--on-hover');
}
}, true);
}
});
},
},
};

9
mods/code-line-numbers/app.css
View File

@ -13,12 +13,15 @@
padding-left: 48px !important; padding-left: 48px !important;
} }
#code-line-numbers { #code-line-numbers {
font-size: var(--theme--font_code-size) !important; font-size: var(--theme--font_code-size);
font-family: var(--theme--font_code) !important; font-family: var(--theme--font_code);
color: var(--theme--text_ui_info); color: var(--theme--text_ui_info);
background: var(--theme--code-background);
text-align: right; text-align: right;
position: absolute; position: absolute;
right: calc(100% - 30px); left: 0;
right: calc(100% - 48px);
padding-right: 18px;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
} }

2
mods/code-line-numbers/mod.js
View File

@ -14,7 +14,7 @@ module.exports = {
tags: ['extension'], tags: ['extension'],
name: 'code line numbers', name: 'code line numbers',
desc: 'adds line numbers to code blocks.', desc: 'adds line numbers to code blocks.',
version: '1.1.0', version: '1.1.1',
author: 'CloudHill', author: 'CloudHill',
options: [ options: [
{ {

135
mods/core/css/theme.css
View File

@ -249,11 +249,9 @@
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important; box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
} }
.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { .notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px;'],
box-shadow: var(--theme--main) -3px 0px 0px !important;
}
.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px;'] { .notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px;'] {
box-shadow: none !important; box-shadow: var(--theme--main) -3px 0px 0px !important;
} }
.notion-body.dark .notion-body.dark
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'], [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'],
@ -312,10 +310,66 @@
box-shadow: -1px -1px 0 var(--theme--table-border) !important; box-shadow: -1px -1px 0 var(--theme--table-border) !important;
} }
.notion-body.dark
[style*='border-top: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-top: 1px solid rgb(223, 223, 222)'] {
border-top: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-bottom: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-bottom: 1px solid rgb(223, 223, 222)'] {
border-bottom: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-right: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-right: 1px solid rgb(223, 223, 222)'] {
border-right: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-right: 1px solid rgb(63, 66, 69)'],
.notion-body:not(.dark)
[style*='border-right: 1px solid rgb(237, 237, 236)'] {
border-right: 1px solid var(--theme--table-border_column) !important;
}
.notion-body.dark
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgb(77, 81, 83) 0px 1px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: white -3px 0px 0px, rgb(223, 223, 222) 0px 1px 0px'] {
box-shadow: var(--theme--main) -3px 0px 0px,
var(--theme--table-border_row) 0px 1px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) -1px 0px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) -1px 0px 0px'] {
box-shadow: var(--theme--table-border_row) -1px 0px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px'] {
box-shadow: var(--theme--table-border_row) 0 1px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px inset'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px inset'] {
box-shadow: var(--theme--table-border_row) 0 1px 0px inset !important;
}
[style*='border: 1px solid rgba(46, 170, 220, 0.6)'] {
border: 1px solid var(--theme--table-border_selected) !important;
}
.notion-body.dark .notion-body.dark
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'], [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) .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%)'] { [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( background-image: linear-gradient(
to right, to right,
var(--theme--bg_gray) 0%, var(--theme--bg_gray) 0%,
@ -423,10 +477,28 @@
[style*='background: rgb(0, 141, 190)'] { [style*='background: rgb(0, 141, 190)'] {
background: var(--theme--primary_click) !important; background: var(--theme--primary_click) !important;
} }
[style*='background: rgb(46, 170, 220)'][style*='color: white'],
[style*='background-color: rgb(46, 170, 220)'][style*='color: white'],
[style*='background: rgb(6, 156, 205)'][style*='color: white'],
[style*='background: rgb(0, 141, 190)'][style*='color: white'] {
color: var(--theme--primary_text) !important;
}
[style*='background: rgb(46, 170, 220)'] [style*='fill: white'],
[style*='background-color: rgb(46, 170, 220)'] [style*='fill: white'],
[style*='background: rgb(6, 156, 205)'] [style*='fill: white'],
[style*='background: rgb(0, 141, 190)'] [style*='fill: white'] {
fill: var(--theme--primary_text) !important;
}
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
[style*='background: rgb(235, 87, 87)'] { [style*='background: rgb(235, 87, 87)'] {
background: var(--theme--primary_indicator) !important; background: var(--theme--primary_indicator) !important;
} }
[style*='background: rgb(235, 87, 87)'][style*='color: white'] {
color: var(--theme--primary_indicator_text) !important;
}
#notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, #notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end):hover {
background: var(--theme--primary_indicator_hover) !important;
}
.notion-body.dark .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'], [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'],
@ -468,6 +540,14 @@
color: var(--theme--danger_text) !important; color: var(--theme--danger_text) !important;
border: 1px solid var(--theme--danger_border) !important; border: 1px solid var(--theme--danger_border) !important;
} }
/* divider */
.notion-body.dark .notion-divider-block [style*='border-bottom: 1px solid rgba(255, 255, 255,'],
.notion-body:not(.dark) .notion-divider-block [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
border-bottom: 1px solid var(--theme--divider) !important;
}
/* inputs */ /* inputs */
.notion-focusable:focus-within { .notion-focusable:focus-within {
box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important; box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
@ -957,9 +1037,15 @@
.notion-code-block .token.function { .notion-code-block .token.function {
color: var(--theme--code_function) !important; color: var(--theme--code_function) !important;
} }
.notion-code-block .token.parameter {
color: var(--theme--code_parameter) !important;
}
.notion-code-block .token.keyword { .notion-code-block .token.keyword {
color: var(--theme--code_keyword) !important; color: var(--theme--code_keyword) !important;
} }
.notion-code-block .token.constant {
color: var(--theme--code_constant) !important;
}
.notion-code-block .token.tag { .notion-code-block .token.tag {
color: var(--theme--code_tag) !important; color: var(--theme--code_tag) !important;
} }
@ -969,24 +1055,60 @@
.notion-code-block .token.important { .notion-code-block .token.important {
color: var(--theme--code_important) !important; color: var(--theme--code_important) !important;
} }
.notion-code-block .token.regex {
color: var(--theme--code_regex) !important;
}
.notion-code-block .token.property { .notion-code-block .token.property {
color: var(--theme--code_property) !important; color: var(--theme--code_property) !important;
} }
.notion-code-block .token.builtin { .notion-code-block .token.builtin {
color: var(--theme--code_builtin) !important; color: var(--theme--code_builtin) !important;
} }
.notion-code-block .token.class-name {
color: var(--theme--code_class-name) !important;
}
.notion-code-block .token.attr-name { .notion-code-block .token.attr-name {
color: var(--theme--code_attr-name) !important; color: var(--theme--code_attr-name) !important;
} }
.notion-code-block .token.attr-value { .notion-code-block .token.attr-value {
color: var(--theme--code_attr-value) !important; color: var(--theme--code_attr-value) !important;
} }
.notion-code-block .token.selector {
color: var(--theme--code_selector) !important;
}
.notion-code-block .token.id {
color: var(--theme--code_id) !important;
}
.notion-code-block .token.class {
color: var(--theme--code_class) !important;
}
.notion-code-block .token.pseudo-element {
color: var(--theme--code_pseudo-element) !important;
}
.notion-code-block .token.pseudo-class {
color: var(--theme--code_pseudo-class) !important;
}
.notion-code-block .token.attribute {
color: var(--theme--code_attribute) !important;
}
.notion-code-block .token.value {
color: var(--theme--code_value) !important;
}
.notion-code-block .token.unit {
color: var(--theme--code_unit) !important;
}
.notion-code-block .token.comment { .notion-code-block .token.comment {
color: var(--theme--code_comment) !important; color: var(--theme--code_comment) !important;
} }
.notion-code-block .token.punctuation { .notion-code-block .token.punctuation {
color: var(--theme--code_punctuation) !important; color: var(--theme--code_punctuation) !important;
} }
.notion-code-block .token.annotation {
color: var(--theme--code_annotation) !important;
}
.notion-code-block .token.decorator {
color: var(--theme--code_decorator) !important;
}
.notion-code-block .token.doctype { .notion-code-block .token.doctype {
color: var(--theme--code_doctype) !important; color: var(--theme--code_doctype) !important;
} }
@ -996,3 +1118,6 @@
.notion-code-block .token.string { .notion-code-block .token.string {
color: var(--theme--code_string) !important; color: var(--theme--code_string) !important;
} }
.notion-code-block .token.boolean {
color: var(--theme--code_boolean) !important;
}

102
mods/core/variables.css
View File

@ -60,6 +60,9 @@
--theme_dark--gallery: rgba(255, 255, 255, 0.05); --theme_dark--gallery: rgba(255, 255, 255, 0.05);
--theme_dark--select_input: rgb(55, 60, 63); --theme_dark--select_input: rgb(55, 60, 63);
--theme_dark--table-border: rgba(255, 255, 255, 0.1); --theme_dark--table-border: rgba(255, 255, 255, 0.1);
--theme_dark--table-border_row: rgb(77, 81, 83);
--theme_dark--table-border_column: rgb(63, 66, 69);
--theme_dark--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_dark--ui-border: rgba(255, 255, 255, 0.07); --theme_dark--ui-border: rgba(255, 255, 255, 0.07);
--theme_dark--interactive_hover: rgb(71, 76, 80); --theme_dark--interactive_hover: rgb(71, 76, 80);
--theme_dark--interactive_hover-border: transparent; --theme_dark--interactive_hover-border: transparent;
@ -68,9 +71,12 @@
--theme_dark--selected: rgba(46, 170, 220, 0.2); --theme_dark--selected: rgba(46, 170, 220, 0.2);
--theme_dark--primary: rgb(46, 170, 220); --theme_dark--primary: rgb(46, 170, 220);
--theme_dark--primary_text: white;
--theme_dark--primary_hover: rgb(6, 156, 205); --theme_dark--primary_hover: rgb(6, 156, 205);
--theme_dark--primary_click: rgb(0, 141, 190); --theme_dark--primary_click: rgb(0, 141, 190);
--theme_dark--primary_indicator: rgb(235, 87, 87); --theme_dark--primary_indicator: rgb(235, 87, 87);
--theme_dark--primary_indicator_text: var(--theme_dark--primary_text);
--theme_dark--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_dark--option-color: white; --theme_dark--option-color: white;
--theme_dark--option-background: transparent; --theme_dark--option-background: transparent;
@ -82,6 +88,8 @@
--theme_dark--danger_text: rgb(235, 87, 87); --theme_dark--danger_text: rgb(235, 87, 87);
--theme_dark--danger_border: rgba(235, 87, 87, 0.5); --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--divider: var(--theme_dark--table-border);
--theme_dark--text: rgba(255, 255, 255, 0.9); --theme_dark--text: rgba(255, 255, 255, 0.9);
--theme_dark--text_ui: rgba(255, 255, 255, 0.6); --theme_dark--text_ui: rgba(255, 255, 255, 0.6);
--theme_dark--text_ui_info: rgba(255, 255, 255, 0.4); --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
@ -180,20 +188,35 @@
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15); --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
--theme_dark--code-text: var(--theme_dark--text); --theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--theme_dark--card); --theme_dark--code-background: var(--theme_dark--card);
--theme_dark--code_function: rgba(255, 255, 255, 0.9); --theme_dark--code_function: var(--theme_dark--code-text);
--theme_dark--code_parameter: var(--theme_dark--code-text);
--theme_dark--code_keyword: hsl(350, 40%, 70%); --theme_dark--code_keyword: hsl(350, 40%, 70%);
--theme_dark--code_constant: hsl(350, 40%, 70%);
--theme_dark--code_tag: hsl(350, 40%, 70%); --theme_dark--code_tag: hsl(350, 40%, 70%);
--theme_dark--code_operator: hsl(40, 90%, 60%); --theme_dark--code_operator: hsl(40, 90%, 60%);
--theme_dark--code_important: #e90; --theme_dark--code_important: #e90;
--theme_dark--code_regex: #e90;
--theme_dark--code_property: hsl(350, 40%, 70%); --theme_dark--code_property: hsl(350, 40%, 70%);
--theme_dark--code_builtin: hsl(75, 70%, 60%); --theme_dark--code_builtin: hsl(75, 70%, 60%);
--theme_dark--code_class-name: var(--theme_dark--code-text);
--theme_dark--code_attr-name: hsl(75, 70%, 60%); --theme_dark--code_attr-name: hsl(75, 70%, 60%);
--theme_dark--code_attr-value: hsl(350, 40%, 70%);
--theme_dark--code_selector: hsl(75, 70%, 60%);
--theme_dark--code_id: var(--theme_dark--code-text);
--theme_dark--code_class: var(--theme_dark--code-text);
--theme_dark--code_pseudo-element: var(--theme_dark--code-text);
--theme_dark--code_pseudo-class: var(--theme_dark--code-text);
--theme_dark--code_attribute: var(--theme_dark--code-text);
--theme_dark--code_value: var(--theme_dark--code-text);
--theme_dark--code_unit: var(--theme_dark--code-text);
--theme_dark--code_comment: hsl(30, 20%, 50%); --theme_dark--code_comment: hsl(30, 20%, 50%);
--theme_dark--code_punctuation: rgba(255, 255, 255, 0.9); --theme_dark--code_punctuation: var(--theme_dark--code-text);
--theme_dark--code_annotation: var(--theme_dark--code_punctuation);
--theme_dark--code_decorator: var(--theme_dark--code_punctuation);
--theme_dark--code_doctype: hsl(30, 20%, 50%); --theme_dark--code_doctype: hsl(30, 20%, 50%);
--theme_dark--code_number: hsl(350, 40%, 70%); --theme_dark--code_number: hsl(350, 40%, 70%);
--theme_dark--code_string: hsl(75, 70%, 60%); --theme_dark--code_string: hsl(75, 70%, 60%);
--theme_dark--code_attr-value: hsl(350, 40%, 70%); --theme_dark--code_boolean: hsl(350, 40%, 70%);
/** light **/ /** light **/
@ -246,6 +269,9 @@
--theme_light--gallery: rgba(55, 53, 47, 0.024); --theme_light--gallery: rgba(55, 53, 47, 0.024);
--theme_light--select_input: rgba(242, 241, 238, 0.6); --theme_light--select_input: rgba(242, 241, 238, 0.6);
--theme_light--table-border: rgba(55, 53, 47, 0.16); --theme_light--table-border: rgba(55, 53, 47, 0.16);
--theme_light--table-border_row: rgb(223, 223, 222);
--theme_light--table-border_column: rgb(237, 237, 236);
--theme_light--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_light--ui-border: rgba(55, 53, 47, 0.09); --theme_light--ui-border: rgba(55, 53, 47, 0.09);
--theme_light--interactive_hover: rgb(239, 239, 239); --theme_light--interactive_hover: rgb(239, 239, 239);
--theme_light--interactive_hover-border: transparent; --theme_light--interactive_hover-border: transparent;
@ -254,9 +280,12 @@
--theme_light--selected: rgba(46, 170, 220, 0.2); --theme_light--selected: rgba(46, 170, 220, 0.2);
--theme_light--primary: rgb(46, 170, 220); --theme_light--primary: rgb(46, 170, 220);
--theme_light--primary_text: white;
--theme_light--primary_hover: rgb(6, 156, 205); --theme_light--primary_hover: rgb(6, 156, 205);
--theme_light--primary_click: rgb(0, 141, 190); --theme_light--primary_click: rgb(0, 141, 190);
--theme_light--primary_indicator: rgb(235, 87, 87); --theme_light--primary_indicator: rgb(235, 87, 87);
--theme_light--primary_indicator_text: var(--theme_light--primary_text);
--theme_light--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_light--option-color: black; --theme_light--option-color: black;
--theme_light--option-background: transparent; --theme_light--option-background: transparent;
@ -268,6 +297,8 @@
--theme_light--danger_text: rgb(235, 87, 87); --theme_light--danger_text: rgb(235, 87, 87);
--theme_light--danger_border: rgba(235, 87, 87, 0.5); --theme_light--danger_border: rgba(235, 87, 87, 0.5);
--theme_light--divider: var(--theme_light--table-border);
--theme_light--text: rgb(55, 53, 47); --theme_light--text: rgb(55, 53, 47);
--theme_light--text_ui: rgba(55, 53, 47, 0.6); --theme_light--text_ui: rgba(55, 53, 47, 0.6);
--theme_light--text_ui: rgba(55, 53, 47, 0.6); --theme_light--text_ui: rgba(55, 53, 47, 0.6);
@ -368,19 +399,34 @@
--theme_light--code-text: var(--theme_light--text); --theme_light--code-text: var(--theme_light--text);
--theme_light--code-background: var(--theme_light--card); --theme_light--code-background: var(--theme_light--card);
--theme_light--code_function: #dd4a68; --theme_light--code_function: #dd4a68;
--theme_light--code_parameter: var(--theme_light--code-text);
--theme_light--code_keyword: #07a; --theme_light--code_keyword: #07a;
--theme_light--code_constant: #905;
--theme_light--code_tag: #905; --theme_light--code_tag: #905;
--theme_light--code_operator: #9a6e3a; --theme_light--code_operator: #9a6e3a;
--theme_light--code_important: #e90; --theme_light--code_important: #e90;
--theme_light--code_regex: #e90;
--theme_light--code_property: #905; --theme_light--code_property: #905;
--theme_light--code_builtin: #690; --theme_light--code_builtin: #690;
--theme_light--code_class-name: #dd4a68;
--theme_light--code_attr-name: #690; --theme_light--code_attr-name: #690;
--theme_light--code_attr-value: #07a;
--theme_light--code_selector: #690;
--theme_light--code_id: var(--theme_light--code-text);
--theme_light--code_class: var(--theme_light--code-text);
--theme_light--code_pseudo-element: var(--theme_light--code-text);
--theme_light--code_pseudo-class: var(--theme_light--code-text);
--theme_light--code_attribute: var(--theme_light--code-text);
--theme_light--code_value: var(--theme_light--code-text);
--theme_light--code_unit: var(--theme_light--code-text);
--theme_light--code_comment: slategray; --theme_light--code_comment: slategray;
--theme_light--code_punctuation: #999; --theme_light--code_punctuation: #999;
--theme_light--code_annotation: var(--theme_light--code_punctuation);
--theme_light--code_decorator: var(--theme_light--code_punctuation);
--theme_light--code_doctype: slategray; --theme_light--code_doctype: slategray;
--theme_light--code_number: #905; --theme_light--code_number: #905;
--theme_light--code_string: #690; --theme_light--code_string: #690;
--theme_light--code_attr-value: #07a; --theme_light--code_boolean: #905;
} }
.notion-dark-theme { .notion-dark-theme {
@ -421,6 +467,9 @@
--theme--gallery: var(--theme_dark--gallery); --theme--gallery: var(--theme_dark--gallery);
--theme--select_input: var(--theme_dark--select_input); --theme--select_input: var(--theme_dark--select_input);
--theme--table-border: var(--theme_dark--table-border); --theme--table-border: var(--theme_dark--table-border);
--theme--table-border_row: var(--theme_dark--table-border_row);
--theme--table-border_column: var(--theme_dark--table-border_column);
--theme--table-border_selected: var(--theme_dark--table-border_selected);
--theme--ui-border: var(--theme_dark--ui-border); --theme--ui-border: var(--theme_dark--ui-border);
--theme--interactive_hover: var(--theme_dark--interactive_hover); --theme--interactive_hover: var(--theme_dark--interactive_hover);
--theme--interactive_hover-border: var( --theme--interactive_hover-border: var(
@ -430,9 +479,12 @@
--theme--button_close-fill: var(--theme_dark--button_close-fill); --theme--button_close-fill: var(--theme_dark--button_close-fill);
--theme--selected: var(--theme_dark--selected); --theme--selected: var(--theme_dark--selected);
--theme--primary: var(--theme_dark--primary); --theme--primary: var(--theme_dark--primary);
--theme--primary_text: var(--theme_dark--primary_text);
--theme--primary_hover: var(--theme_dark--primary_hover); --theme--primary_hover: var(--theme_dark--primary_hover);
--theme--primary_click: var(--theme_dark--primary_click); --theme--primary_click: var(--theme_dark--primary_click);
--theme--primary_indicator: var(--theme_dark--primary_indicator); --theme--primary_indicator: var(--theme_dark--primary_indicator);
--theme--primary_indicator_text: var(--theme_dark--primary_indicator_text);
--theme--primary_indicator_hover: var(--theme_dark--primary_indicator_hover);
--theme--option-color: var(--theme_dark--option-color); --theme--option-color: var(--theme_dark--option-color);
--theme--option-background: var(--theme_dark--option-background); --theme--option-background: var(--theme_dark--option-background);
--theme--option_active-color: var(--theme_dark--option_active-color); --theme--option_active-color: var(--theme_dark--option_active-color);
@ -443,6 +495,7 @@
--theme--option_hover-background: var(--theme_dark--option_hover-background); --theme--option_hover-background: var(--theme_dark--option_hover-background);
--theme--danger_text: var(--theme_dark--danger_text); --theme--danger_text: var(--theme_dark--danger_text);
--theme--danger_border: var(--theme_dark--danger_border); --theme--danger_border: var(--theme_dark--danger_border);
--theme--divider: var(--theme_dark--divider);
--theme--text: var(--theme_dark--text); --theme--text: var(--theme_dark--text);
--theme--text_ui: var(--theme_dark--text_ui); --theme--text_ui: var(--theme_dark--text_ui);
--theme--text_ui_info: var(--theme_dark--text_ui_info); --theme--text_ui_info: var(--theme_dark--text_ui_info);
@ -536,19 +589,34 @@
--theme--code-text: var(--theme_dark--code-text); --theme--code-text: var(--theme_dark--code-text);
--theme--code-background: var(--theme_dark--code-background); --theme--code-background: var(--theme_dark--code-background);
--theme--code_function: var(--theme_dark--code_function); --theme--code_function: var(--theme_dark--code_function);
--theme--code_parameter: var(--theme_dark--code_parameter);
--theme--code_keyword: var(--theme_dark--code_keyword); --theme--code_keyword: var(--theme_dark--code_keyword);
--theme--code_constant: var(--theme_dark--code_constant);
--theme--code_tag: var(--theme_dark--code_tag); --theme--code_tag: var(--theme_dark--code_tag);
--theme--code_operator: var(--theme_dark--code_operator); --theme--code_operator: var(--theme_dark--code_operator);
--theme--code_important: var(--theme_dark--code_important); --theme--code_important: var(--theme_dark--code_important);
--theme--code_regex: var(--theme_dark--code_regex);
--theme--code_property: var(--theme_dark--code_property); --theme--code_property: var(--theme_dark--code_property);
--theme--code_builtin: var(--theme_dark--code_builtin); --theme--code_builtin: var(--theme_dark--code_builtin);
--theme--code_class-name: var(--theme_dark--code_class-name);
--theme--code_attr-name: var(--theme_dark--code_attr-name); --theme--code_attr-name: var(--theme_dark--code_attr-name);
--theme--code_attr-value: var(--theme_dark--code_attr-value);
--theme--code_selector: var(--theme_dark--code_selector);
--theme--code_id: var(--theme_dark--code_id);
--theme--code_class: var(--theme_dark--code_class);
--theme--code_pseudo-element: var(--theme_dark--code_pseudo-element);
--theme--code_pseudo-class: var(--theme_dark--code_pseudo-class);
--theme--code_attribute: var(--theme_dark--code_attribute);
--theme--code_value: var(--theme_dark--code_value);
--theme--code_unit: var(--theme_dark--code_unit);
--theme--code_comment: var(--theme_dark--code_comment); --theme--code_comment: var(--theme_dark--code_comment);
--theme--code_punctuation: var(--theme_dark--code_punctuation); --theme--code_punctuation: var(--theme_dark--code_punctuation);
--theme--code_annotation: var(--theme_dark--code_annotation);
--theme--code_decorator: var(--theme_dark--code_decorator);
--theme--code_doctype: var(--theme_dark--code_doctype); --theme--code_doctype: var(--theme_dark--code_doctype);
--theme--code_number: var(--theme_dark--code_number); --theme--code_number: var(--theme_dark--code_number);
--theme--code_string: var(--theme_dark--code_string); --theme--code_string: var(--theme_dark--code_string);
--theme--code_attr-value: var(--theme_dark--code_attr-value); --theme--code_boolean: var(--theme_dark--code_boolean);
} }
.notion-light-theme { .notion-light-theme {
@ -589,6 +657,9 @@
--theme--gallery: var(--theme_light--gallery); --theme--gallery: var(--theme_light--gallery);
--theme--select_input: var(--theme_light--select_input); --theme--select_input: var(--theme_light--select_input);
--theme--table-border: var(--theme_light--table-border); --theme--table-border: var(--theme_light--table-border);
--theme--table-border_row: var(--theme_light--table-border_row);
--theme--table-border_column: var(--theme_light--table-border_column);
--theme--table-border_selected: var(--theme_light--table-border_selected);
--theme--ui-border: var(--theme_light--ui-border); --theme--ui-border: var(--theme_light--ui-border);
--theme--interactive_hover: var(--theme_light--interactive_hover); --theme--interactive_hover: var(--theme_light--interactive_hover);
--theme--interactive_hover-border: var( --theme--interactive_hover-border: var(
@ -598,9 +669,12 @@
--theme--button_close-fill: var(--theme_light--button_close-fill); --theme--button_close-fill: var(--theme_light--button_close-fill);
--theme--selected: var(--theme_light--selected); --theme--selected: var(--theme_light--selected);
--theme--primary: var(--theme_light--primary); --theme--primary: var(--theme_light--primary);
--theme--primary_text: var(--theme_light--primary_text);
--theme--primary_hover: var(--theme_light--primary_hover); --theme--primary_hover: var(--theme_light--primary_hover);
--theme--primary_click: var(--theme_light--primary_click); --theme--primary_click: var(--theme_light--primary_click);
--theme--primary_indicator: var(--theme_light--primary_indicator); --theme--primary_indicator: var(--theme_light--primary_indicator);
--theme--primary_indicator_text: var(--theme_light--primary_indicator_text);
--theme--primary_indicator_hover: var(--theme_light--primary_indicator_hover);
--theme--option-color: var(--theme_light--option-color); --theme--option-color: var(--theme_light--option-color);
--theme--option-background: var(--theme_light--option-background); --theme--option-background: var(--theme_light--option-background);
--theme--option_hover-color: var(--theme_light--option_hover-color); --theme--option_hover-color: var(--theme_light--option_hover-color);
@ -611,6 +685,7 @@
); );
--theme--danger_text: var(--theme_light--danger_text); --theme--danger_text: var(--theme_light--danger_text);
--theme--danger_border: var(--theme_light--danger_border); --theme--danger_border: var(--theme_light--danger_border);
--theme--divider: var(--theme_light--divider);
--theme--text: var(--theme_light--text); --theme--text: var(--theme_light--text);
--theme--text_ui: var(--theme_light--text_ui); --theme--text_ui: var(--theme_light--text_ui);
--theme--text_ui_info: var(--theme_light--text_ui_info); --theme--text_ui_info: var(--theme_light--text_ui_info);
@ -704,17 +779,32 @@
--theme--code-text: var(--theme_light--code-text); --theme--code-text: var(--theme_light--code-text);
--theme--code-background: var(--theme_light--code-background); --theme--code-background: var(--theme_light--code-background);
--theme--code_function: var(--theme_light--code_function); --theme--code_function: var(--theme_light--code_function);
--theme--code_parameter: var(--theme_light--code_parameter);
--theme--code_keyword: var(--theme_light--code_keyword); --theme--code_keyword: var(--theme_light--code_keyword);
--theme--code_constant: var(--theme_light--code_constant);
--theme--code_tag: var(--theme_light--code_tag); --theme--code_tag: var(--theme_light--code_tag);
--theme--code_operator: var(--theme_light--code_operator); --theme--code_operator: var(--theme_light--code_operator);
--theme--code_important: var(--theme_light--code_important); --theme--code_important: var(--theme_light--code_important);
--theme--code_regex: var(--theme_light--code_regex);
--theme--code_property: var(--theme_light--code_property); --theme--code_property: var(--theme_light--code_property);
--theme--code_builtin: var(--theme_light--code_builtin); --theme--code_builtin: var(--theme_light--code_builtin);
--theme--code_class-name: var(--theme_light--code_class-name);
--theme--code_attr-name: var(--theme_light--code_attr-name); --theme--code_attr-name: var(--theme_light--code_attr-name);
--theme--code_attr-value: var(--theme_light--code_attr-value);
--theme--code_selector: var(--theme_light--code_selector);
--theme--code_id: var(--theme_light--code_id);
--theme--code_class: var(--theme_light--code_class);
--theme--code_pseudo-element: var(--theme_light--code_pseudo-element);
--theme--code_pseudo-class: var(--theme_light--code_pseudo-class);
--theme--code_attribute: var(--theme_light--code_attribute);
--theme--code_value: var(--theme_light--code_value);
--theme--code_unit: var(--theme_light--code_unit);
--theme--code_comment: var(--theme_light--code_comment); --theme--code_comment: var(--theme_light--code_comment);
--theme--code_punctuation: var(--theme_light--code_punctuation); --theme--code_punctuation: var(--theme_light--code_punctuation);
--theme--code_annotation: var(--theme_light--code_annotation);
--theme--code_decorator: var(--theme_light--code_decorator);
--theme--code_doctype: var(--theme_light--code_doctype); --theme--code_doctype: var(--theme_light--code_doctype);
--theme--code_number: var(--theme_light--code_number); --theme--code_number: var(--theme_light--code_number);
--theme--code_string: var(--theme_light--code_string); --theme--code_string: var(--theme_light--code_string);
--theme--code_attr-value: var(--theme_light--code_attr-value); --theme--code_boolean: var(--theme_light--code_boolean);
} }

20
mods/dracula/app.css
View File

@ -2,6 +2,7 @@
* dracula * dracula
* (c) 2020 @mimishahzad386#5651 * (c) 2020 @mimishahzad386#5651
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license * under the MIT license
*/ */
@ -75,3 +76,22 @@
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] { .notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important; box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
} }
.notion-dark-theme .notion-code-block .token.parameter,
.notion-dark-theme .notion-code-block .token.decorator,
.notion-dark-theme .notion-code-block .token.id,
.notion-dark-theme .notion-code-block .token.class,
.notion-dark-theme .notion-code-block .token.pseudo-element,
.notion-dark-theme .notion-code-block .token.pseudo-class,
.notion-dark-theme .notion-code-block .token.attribute {
font-style: italic;
}
.notion-dark-theme .notion-code-block .token.punctuation {
opacity: 1;
}
.notion-dark-theme [class^="notion-outliner"] [style*="background: rgb(71, 76, 80);"] .triangle[fill] {
fill: var(--theme--text)
}

2
mods/dracula/mod.js
View File

@ -13,6 +13,6 @@ module.exports = {
name: 'dracula', name: 'dracula',
desc: desc:
'a theme based on the popular dracula color palette originally by zeno rocha and friends. ', 'a theme based on the popular dracula color palette originally by zeno rocha and friends. ',
version: '0.1.0', version: '0.2.0',
author: 'dracula', author: 'dracula',
}; };

268
mods/dracula/variables.css
View File

@ -4,128 +4,192 @@
* (c) 2020 dracula * (c) 2020 dracula
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Alexa Baldon (https://github.com/runargs) * (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 CloudHill
* under the MIT license * under the MIT license
*/ */
:root { :root {
--theme_dark--main: #282a36;
--theme_dark--sidebar: #21232c; /* PALETTE */
--theme_dark--overlay: rgba(13, 13, 14, 0.5);
--theme_dark--dragarea: #20222b; --theme_dracula--bg: #282a36;
--theme_dracula--bg_lighter: #424450;
--theme_dracula--bg_light: #343746;
--theme_dracula--bg_dark: #21222c;
--theme_dracula--bg_darker: #191a21;
--theme_dracula--fg: #f8f8f2;
--theme_dracula--fg_dark: #babbba;
--theme_dracula--comment: #6272a4;
--theme_dracula--selection: #44475a;
--theme_dracula--line_highlight: #44475a75;
--theme_dracula--gray: var(--theme_dracula--fg_dark);
--theme_dracula--brown: #6272a4;
--theme_dracula--orange: #ffb86c;
--theme_dracula--yellow: #f1fa8c;
--theme_dracula--green: #50fa7b;
--theme_dracula--blue: #8be9fd;
--theme_dracula--purple: #bd93f9;
--theme_dracula--pink: #ff79c6;
--theme_dracula--red: #ff5555;
--theme_dracula--bg_gray: var(--theme_dracula--bg_light);
--theme_dracula--bg_brown: #465079;
--theme_dracula--bg_orange: #8a6345;
--theme_dracula--bg_yellow: #8e9656;
--theme_dracula--bg_green: #3f945f;
--theme_dracula--bg_blue: #498096;
--theme_dracula--bg_purple: #6a549b;
--theme_dracula--bg_pink: #8d4a7c;
--theme_dracula--bg_red: #943844;
/* MAIN */
--theme_dark--main: var(--theme_dracula--bg);
--theme_dark--sidebar: var(--theme_dracula--bg_dark);
--theme_dark--overlay: #0d0d0e80;
--theme_dark--dragarea: var(--theme_dracula--bg_dark);
--theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
'Segoe UI Symbol'; 'Segoe UI Symbol';
--theme_dark--scrollbar: #393c4d; --theme_dark--scrollbar: var(--theme_dracula--selection);
--theme_dark--scrollbar_hover: #576591; --theme_dark--scrollbar_hover: var(--theme_dracula--comment);
--theme_dark--card: var(--theme_dracula--bg_light);
--theme_dark--gallery: var(--theme_dracula--bg_dark);
--theme_dark--select_input: var(--theme_dracula--selection);
--theme_dark--table-border: var(--theme_dracula--bg_lighter);
--theme_dark--table-border_row: var(--theme_dark--table-border);
--theme_dark--table-border_column: var(--theme_dark--table-border);
--theme_dark--table-border_selected: var(--theme_dracula--purple);
--theme_dark--card: #3c3f50;
--theme_dark--gallery: #323546;
--theme_dark--select_input: #474a5c;
--theme_dark--table-border: #484b59;
--theme_dark--ui-border: var(--theme_dark--table-border); --theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover: rgba(64, 73, 105, 0.7); --theme_dark--interactive_hover: var(--theme_dracula--line_highlight);
--theme_dark--button_close: #ff5555; --theme_dark--button_close: var(--theme_dracula--red);
--theme_dark--selected: rgba(189, 147, 249, 0.3); --theme_dark--selected: #bb8dfd3d;
--theme_dark--primary: #bd93f9; --theme_dark--primary: var(--theme_dracula--purple);
--theme_dark--primary_hover: #8be9fd; --theme_dark--primary_hover: #b179ff;
--theme_dark--primary_click: #bd93f9; --theme_dark--primary_click: #9f5ff8;
--theme_dark--primary_indicator: #8be9fd; --theme_dark--primary_indicator: var(--theme_dracula--comment);
--theme_dark--primary_indicator_hover: var(--theme_dracula--bg_purple);
--theme_dark--option_active-background: var(--theme_dark--primary); --theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-background: var(--theme_dark--primary_hover); --theme_dark--option_hover-background: var(--theme_dark--bg_purple);
--theme_dark--danger_text: #ff5555; --theme_dark--danger_text: var(--theme_dracula--red);
--theme_dark--danger_border: #ffb86c; --theme_dark--danger_border: var(--theme_dracula--bg_red);
--theme_dark--text: #f8f8f2; /* TEXT */
--theme_dark--text_ui: #f8f8f2;
--theme_dark--text_ui_info: #f8f8f2;
--theme_dark--text_gray: #807e8d; --theme_dark--text: var(--theme_dracula--fg);
--theme_dark--text_brown: #6272a4; --theme_dark--text_ui: var(--theme_dracula--fg_dark);
--theme_dark--text_orange: #ffb86c; --theme_dark--text_ui_info: var(--theme_dracula--comment);
--theme_dark--text_yellow: #f1fa8c;
--theme_dark--text_green: #50fa7b;
--theme_dark--text_blue: #8be9fd;
--theme_dark--text_purple: #bd93f9;
--theme_dark--text_pink: #ff79c6;
--theme_dark--text_red: #ff5555;
--theme_dark--select-text: #000000; --theme_dark--text_gray: var(--theme_dracula--gray);
--theme_dark--select_gray: #454158; --theme_dark--text_brown: var(--theme_dracula--brown);
--theme_dark--select_gray-text: #f5f5f5; --theme_dark--text_orange: var(--theme_dracula--orange);
--theme_dark--select_brown: #6272a4; --theme_dark--text_yellow: var(--theme_dracula--yellow);
--theme_dark--select_brown-text: #f5f5f5; --theme_dark--text_green: var(--theme_dracula--green);
--theme_dark--select_orange: #ffb86c; --theme_dark--text_blue: var(--theme_dracula--blue);
--theme_dark--select_yellow: #f1fa8c; --theme_dark--text_purple: var(--theme_dracula--purple);
--theme_dark--select_green: #50fa7b; --theme_dark--text_pink: var(--theme_dracula--pink);
--theme_dark--select_blue: #8be9fd; --theme_dark--text_red: var(--theme_dracula--red);
--theme_dark--select_purple: #bd93f9;
--theme_dark--select_pink: #ff79c6;
--theme_dark--select_red: #ff5555;
--theme_dark--select_red-text: #f5f5f5;
--theme_dark--bg-text: var(--theme_dark--select-text); /* SELECT */
--theme_dark--bg_gray: var(--theme_dark--select_gray);
--theme_dark--bg_gray-text: #f5f5f5;
--theme_dark--bg_brown: var(--theme_dark--select_brown);
--theme_dark--bg_brown-text: #f5f5f5;
--theme_dark--bg_orange: var(--theme_dark--select_orange);
--theme_dark--bg_yellow: var(--theme_dark--select_yellow);
--theme_dark--bg_green: var(--theme_dark--select_green);
--theme_dark--bg_blue: var(--theme_dark--select_blue);
--theme_dark--bg_purple: var(--theme_dark--select_purple);
--theme_dark--bg_pink: var(--theme_dark--select_pink);
--theme_dark--bg_red: var(--theme_dark--select_red);
--theme_dark--bg_red-text: #f5f5f5;
--theme_dark--line-text: #000000; --theme_dark--select-text: var(--theme_dracula--bg);
--theme_dark--line_gray: #3c3f50; --theme_dark--select_gray: var(--theme_dracula--gray);
--theme_dark--line_gray-text: #f5f5f5; --theme_dark--select_brown: var(--theme_dracula--brown);
--theme_dark--line_brown: #6272a4; --theme_dark--select_brown-text: var(--theme_dracula--fg);
--theme_dark--line_brown-text: #f5f5f5; --theme_dark--select_orange: var(--theme_dracula--orange);
--theme_dark--line_orange: #ffb86c; --theme_dark--select_yellow: var(--theme_dracula--yellow);
--theme_dark--line_yellow: #f1fa8c; --theme_dark--select_green: var(--theme_dracula--green);
--theme_dark--line_green: #50fa7b; --theme_dark--select_blue: var(--theme_dracula--blue);
--theme_dark--line_blue: #8be9fd; --theme_dark--select_purple: var(--theme_dracula--purple);
--theme_dark--line_purple: #bd93f9; --theme_dark--select_pink: var(--theme_dracula--pink);
--theme_dark--line_pink: #ff79c6; --theme_dark--select_red: var(--theme_dracula--red);
--theme_dark--line_red: #ff5555; --theme_dark--select_red-text: var(--theme_dracula--fg);
--theme_dark--line_red-text: #f5f5f5;
--theme_dark--callout-text: var(--theme_dark--line-text); /* BG */
--theme_dark--callout_gray: var(--theme_dark--line_gray);
--theme_dark--callout_gray-text: #f5f5f5;
--theme_dark--callout_brown: var(--theme_dark--line_brown);
--theme_dark--callout_brown-text: #f5f5f5;
--theme_dark--callout_orange: var(--theme_dark--line_orange);
--theme_dark--callout_yellow: var(--theme_dark--line_yellow);
--theme_dark--callout_green: var(--theme_dark--line_green);
--theme_dark--callout_blue: var(--theme_dark--line_blue);
--theme_dark--callout_purple: var(--theme_dark--line_purple);
--theme_dark--callout_pink: var(--theme_dark--line_pink);
--theme_dark--callout_red: var(--theme_dark--line_red);
--theme_dark--callout_red-text: #f5f5f5;
--theme_dark--code_inline-text: #50fa7b; --theme_dark--bg-text: var(--theme_dracula--fg);
--theme_dark--code_inline-background: #3c3f50; --theme_dark--bg_gray: var(--theme_dracula--bg_gray);
--theme_dark--code-text: var(--theme_dark--text); --theme_dark--bg_brown: var(--theme_dracula--bg_brown);
--theme_dark--code-background: #3c3f50; --theme_dark--bg_orange: var(--theme_dracula--bg_orange);
--theme_dark--code_function: var(--theme_dark--text_blue); --theme_dark--bg_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--code_keyword: var(--theme_dark--text_pink); --theme_dark--bg_green: var(--theme_dracula--bg_green);
--theme_dark--code_tag: var(--theme_dark--text_pink); --theme_dark--bg_blue: var(--theme_dracula--bg_blue);
--theme_dark--code_operator: var(--theme_dark--text_yellow); --theme_dark--bg_purple: var(--theme_dracula--bg_purple);
--theme_dark--code_important: var(--theme_dark--text_yellow); --theme_dark--bg_pink: var(--theme_dracula--bg_pink);
--theme_dark--code_property: var(--theme_dark--text_pink); --theme_dark--bg_red: var(--theme_dracula--bg_red);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow); /* LINE */
--theme_dark--code_comment: var(--theme_dark--text_ui);
--theme_dark--code_punctuation: #d2d0dc; --theme_dark--line-text: var(--theme_dracula--fg);
--theme_dark--code_doctype: #d2d0dc; --theme_dark--line_gray: var(--theme_dracula--bg_gray);
--theme_dark--code_number: var(--theme_dark--text_purple); --theme_dark--line_brown: var(--theme_dracula--bg_brown);
--theme_dark--code_string: var(--theme_dark--text_orange); --theme_dark--line_orange: var(--theme_dracula--bg_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange); --theme_dark--line_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--line_green: var(--theme_dracula--bg_green);
--theme_dark--line_blue: var(--theme_dracula--bg_blue);
--theme_dark--line_purple: var(--theme_dracula--bg_purple);
--theme_dark--line_pink: var(--theme_dracula--bg_pink);
--theme_dark--line_red: var(--theme_dracula--bg_red);
/* CALLOUT */
--theme_dark--callout-text: var(--theme_dracula--fg);
--theme_dark--callout_gray: var(--theme_dracula--bg_gray);
--theme_dark--callout_brown: var(--theme_dracula--bg_brown);
--theme_dark--callout_orange: var(--theme_dracula--bg_orange);
--theme_dark--callout_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--callout_green: var(--theme_dracula--bg_green);
--theme_dark--callout_blue: var(--theme_dracula--bg_blue);
--theme_dark--callout_purple: var(--theme_dracula--bg_purple);
--theme_dark--callout_pink: var(--theme_dracula--bg_pink);
--theme_dark--callout_red: var(--theme_dracula--bg_red);
/* CODE */
--theme_dark--code_inline-text: var(--theme_dracula--green);
--theme_dark--code_inline-background: var(--theme_dracula--bg_light);
--theme_dark--code-text: var(--theme_dracula--fg);
--theme_dark--code-background: var(--theme_dracula--bg_light);
--theme_dark--code_function: var(--theme_dracula--green);
--theme_dark--code_parameter: var(--theme_dracula--orange);
--theme_dark--code_keyword: var(--theme_dracula--pink);
--theme_dark--code_constant: var(--theme_dracula--purple);
--theme_dark--code_tag: var(--theme_dracula--pink);
--theme_dark--code_operator: var(--theme_dracula--pink);
--theme_dark--code_important: var(--theme_dracula--pink);
--theme_dark--code_regex: var(--theme_dracula--red);
--theme_dark--code_property: var(--theme_dracula--blue);
--theme_dark--code_builtin: var(--theme_dracula--blue);
--theme_dark--code_class-name: var(--theme_dracula--blue);
--theme_dark--code_attr-name: var(--theme_dracula--green);
--theme_dark--code_attr-value: var(--theme_dracula--yellow);
--theme_dark--code_selector: var(--theme_dracula--pink);
--theme_dark--code_id: var(--theme_dracula--green);
--theme_dark--code_class: var(--theme_dracula--green);
--theme_dark--code_pseudo-element: var(--theme_dracula--green);
--theme_dark--code_pseudo-class: var(--theme_dracula--green);
--theme_dark--code_attribute: var(--theme_dracula--green);
--theme_dark--code_value: var(--theme_dracula--yellow);
--theme_dark--code_unit: var(--theme_dracula--pink);
--theme_dark--code_comment: var(--theme_dracula--comment);
--theme_dark--code_punctuation: var(--theme_dracula--text);
--theme_dark--code_annotation: var(--theme_dark--code_punctuation);
--theme_dark--code_decorator: var(--theme_dracula--green);
--theme_dark--code_doctype: var(--theme_dracula--fg_dark);
--theme_dark--code_number: var(--theme_dracula--purple);
--theme_dark--code_string: var(--theme_dracula--yellow);
--theme_dark--code_boolean: var(--theme_dracula--purple);
} }

4
mods/outliner/mod.js
View File

@ -14,7 +14,7 @@ module.exports = {
tags: ['extension', 'panel'], tags: ['extension', 'panel'],
name: 'outliner', name: 'outliner',
desc: 'table of contents.', desc: 'table of contents.',
version: '1.2.0', version: '1.2.1',
author: 'CloudHill', author: 'CloudHill',
options: [ options: [
{ {
@ -35,6 +35,6 @@ module.exports = {
name: "Outline", name: "Outline",
icon: "icon.svg", icon: "icon.svg",
js: "panel.js", js: "panel.js",
fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight,
} }
}; };

34
mods/outliner/panel.js
View File

@ -82,15 +82,15 @@ module.exports = (store, __exports) => {
const outline = document.querySelector('.outliner'); const outline = document.querySelector('.outliner');
if (!outline) return; if (!outline) return;
outline.textContent = ''; outline.textContent = '';
if (store().lined) outline.setAttribute('lined', '');
const pageContent = document.querySelector('.notion-page-content'); const pageContent = document.querySelector('.notion-page-content'),
const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'); headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
fragment = new DocumentFragment();
headerBlocks.forEach(header => { headerBlocks.forEach(header => {
const blockId = header.dataset.blockId.replace(/-/g, ''); const blockId = header.dataset.blockId.replace(/-/g, ''),
const headerEl = header.querySelector('[placeholder]'); headerEl = header.querySelector('[placeholder]'),
const placeholder = headerEl.getAttribute('placeholder'); placeholder = headerEl.getAttribute('placeholder');
const outlineHeader = createElement(` const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}"> <div class="outline-header" header-level="${placeholder.slice(-1)}">
@ -100,23 +100,25 @@ module.exports = (store, __exports) => {
`); `);
header.outline = outlineHeader; header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML; outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
outline.append(outlineHeader);
fragment.appendChild(outlineHeader);
}) })
outline.appendChild(fragment);
} }
function updateOutlineHeader(header) { function updateOutlineHeader(header) {
const headerEl = header.querySelector('[placeholder]') || header; const headerEl = header.querySelector('[placeholder]');
if (!( if (!(
headerEl && headerEl &&
header.outline && header.outline?.parentElement
header.outline.parentElement
)) return findHeaders(); )) return findHeaders();
const outlineHeader = header.outline; const outlineHeader = header.outline;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML; outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
updateOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1)); setOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
} }
function updateOutlineLevel(outlineHeader, level) { function setOutlineLevel(outlineHeader, level) {
outlineHeader.setAttribute('header-level', level); outlineHeader.setAttribute('header-level', level);
outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`) outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
} }
@ -137,6 +139,11 @@ module.exports = (store, __exports) => {
return { return {
onLoad() { onLoad() {
if (store().lined) {
const outline = document.querySelector('.outliner');
outline?.setAttribute('lined', '');
}
// Find headers when switching panels // Find headers when switching panels
if (document.querySelector('.notion-page-content')) { if (document.querySelector('.notion-page-content')) {
startContentObserver(); startContentObserver();
@ -152,6 +159,3 @@ module.exports = (store, __exports) => {
} }
} }
} }

6
mods/tweaks/app.css
View File

@ -54,11 +54,9 @@
margin-bottom: -1.5px !important; margin-bottom: -1.5px !important;
} }
[data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"], [data-tweaks*='[scroll_db_toolbars]'] .notion-collection_view-block > [style*=" height: 42px"] {
[data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child {
overflow-x: auto !important; overflow-x: auto !important;
} }
[data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"]::-webkit-scrollbar, [data-tweaks*='[scroll_db_toolbars]'] .notion-collection_view-block > [style*=" height: 42px"]::-webkit-scrollbar {
[data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child::-webkit-scrollbar {
display: none; display: none;
} }