mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
upload wip rework: installer + themer
This commit is contained in:
parent
35d9c915b1
commit
5aa36fef41
GPG Key ID:
C7A48B7846AA706D
3
.prettierrc
Normal file
3
.prettierrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"singleQuote": true
|
||||
}
|
||||
184
bin.js
184
bin.js
@ -1,74 +1,126 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const cli = require('cac')('notion-enhancer'),
|
||||
{ EnhancerError } = require('./pkg/helpers.js');
|
||||
import os from 'os';
|
||||
import { line, cli, files, locations } from './pkg/helpers.js';
|
||||
import check from './pkg/check.js';
|
||||
import apply from './pkg/apply.js';
|
||||
import remove from './pkg/remove.js';
|
||||
|
||||
// === title ===
|
||||
// ...information
|
||||
// * warning
|
||||
// > prompt
|
||||
// -- response
|
||||
// ~~ exit
|
||||
// ### error ###
|
||||
const options = cli.options({
|
||||
y: 'yes',
|
||||
n: 'no',
|
||||
d: 'dev',
|
||||
h: 'help',
|
||||
v: 'version',
|
||||
}),
|
||||
promptResponse = options.get('yes')
|
||||
? 'y'
|
||||
: options.get('no')
|
||||
? 'n'
|
||||
: undefined;
|
||||
|
||||
cli.option('-y, --yes', ': skip prompts (may overwrite data)');
|
||||
cli.option('-n, --no', ': skip prompts (may cause failures)');
|
||||
cli.option('-d, --dev', ': show detailed error messages (for debug purposes)');
|
||||
function displayHelp() {
|
||||
const pkg = files.pkgJSON();
|
||||
console.info(
|
||||
cli.help({
|
||||
name: pkg.name,
|
||||
version: pkg.version,
|
||||
link: pkg.homepage,
|
||||
commands: [
|
||||
['apply', 'add enhancements to the notion app'],
|
||||
['remove', 'return notion to its pre-enhanced/pre-modded state'],
|
||||
['check, status', 'check the current state of the notion app'],
|
||||
],
|
||||
options: [
|
||||
['-y, --yes', 'skip prompts'],
|
||||
['-n, --no', 'skip prompts'],
|
||||
['-d, --dev', 'show detailed error messages (for debug purposes)'],
|
||||
[
|
||||
'--path=</path/to/notion/resources>',
|
||||
'provide a file location to enhance (otherwise auto-picked)',
|
||||
],
|
||||
['-h, --help', 'display usage information'],
|
||||
['-v, --version', 'display version number'],
|
||||
],
|
||||
})
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
if (options.get('help')) displayHelp();
|
||||
|
||||
cli
|
||||
.command('apply', ': add the enhancer to the notion app')
|
||||
.action(async (options) => {
|
||||
console.info('=== NOTION ENHANCEMENT LOG ===');
|
||||
await require('./pkg/apply.js')({
|
||||
overwrite_version: options.yes ? 'y' : options.no ? 'n' : undefined,
|
||||
friendly_errors: !options.dev,
|
||||
});
|
||||
console.info('=== END OF LOG ===');
|
||||
});
|
||||
cli
|
||||
.command('remove', ': return notion to its pre-enhanced/pre-modded state')
|
||||
.action(async (options) => {
|
||||
console.info('=== NOTION RESTORATION LOG ===');
|
||||
await require('./pkg/remove.js')({
|
||||
delete_data: options.yes ? 'y' : options.no ? 'n' : undefined,
|
||||
friendly_errors: !options.dev,
|
||||
});
|
||||
console.info('=== END OF LOG ===');
|
||||
});
|
||||
cli
|
||||
.command('check', ': check the current state of the notion app')
|
||||
.action(async (options) => {
|
||||
try {
|
||||
const status = await require('./pkg/check.js')();
|
||||
console.info(options.dev ? status : status.msg);
|
||||
} catch (err) {
|
||||
console.error(
|
||||
err instanceof EnhancerError && !options.dev ? err.message : err
|
||||
function displayVersion() {
|
||||
const pkg = files.pkgJSON();
|
||||
console.info(
|
||||
`${pkg.name}/${pkg.version} ${
|
||||
process.platform
|
||||
}-${os.arch()}/${os.release()} node/${process.version}`
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
if (options.get('version')) displayVersion();
|
||||
|
||||
function handleError(err) {
|
||||
if (options.get('dev')) {
|
||||
console.error(
|
||||
err.stack
|
||||
.split('\n')
|
||||
.map((text, i) => {
|
||||
text = text.replace(/^ /, ' ');
|
||||
if (i > 1) return line.chalk.grey(text);
|
||||
if (i > 0) return text;
|
||||
const [type, msg] = text.split(/:((.+)|$)/);
|
||||
return line.chalk.bold.red(`${type}:`) + msg;
|
||||
})
|
||||
.join('\n')
|
||||
);
|
||||
} else
|
||||
console.error(
|
||||
line.chalk`{bold.red ERROR:} ${err.message} {grey (run with -d for more information)}`
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
switch (cli.args()[0]) {
|
||||
case 'apply':
|
||||
console.info(line.style.title('[NOTION-ENHANCER] APPLY'));
|
||||
console.info(
|
||||
(await apply({
|
||||
overwriteOld: promptResponse,
|
||||
__notion: options.get('path') || locations.notion(),
|
||||
}))
|
||||
? `${line.style.title('SUCCESS')} ${line.chalk.green('✔')}`
|
||||
: `${line.style.title('CANCELLED')} ${line.chalk.red('✘')}`
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
let helpCalled = false;
|
||||
cli.globalCommand.option('-h, --help', ': display usage information');
|
||||
cli.globalCommand.helpCallback = (sections) => {
|
||||
sections[0].body += '\nhttps://github.com/notion-enhancer/notion-enhancer';
|
||||
helpCalled = true;
|
||||
};
|
||||
cli.showHelpOnExit = true;
|
||||
|
||||
cli.globalCommand.option('-v, --version', ': display version number');
|
||||
cli.globalCommand.versionNumber = require('./package.json').version;
|
||||
cli.showVersionOnExit = true;
|
||||
|
||||
cli.parse();
|
||||
|
||||
if (!cli.matchedCommand && !helpCalled && !cli.options.version)
|
||||
cli.outputHelp();
|
||||
break;
|
||||
case 'remove':
|
||||
console.info(line.style.title('[NOTION-ENHANCER] REMOVE'));
|
||||
await remove({
|
||||
deleteConfig: promptResponse,
|
||||
deleteCache: promptResponse,
|
||||
__notion: options.get('path') || locations.notion(),
|
||||
});
|
||||
console.info(`${line.style.title('SUCCESS')} ${line.chalk.green('✔')}`);
|
||||
break;
|
||||
case 'check':
|
||||
case 'status':
|
||||
console.info(line.style.title('[NOTION-ENHANCER] CHECK'));
|
||||
const status = check({
|
||||
__notion: options.get('path') || locations.notion(),
|
||||
});
|
||||
line.prev();
|
||||
if (options.get('dev')) {
|
||||
line.forward(24);
|
||||
console.info(status);
|
||||
} else {
|
||||
line.forward(23);
|
||||
line.write(': ' + status.msg + '\r\n');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
displayHelp();
|
||||
}
|
||||
} catch (err) {
|
||||
handleError(err);
|
||||
}
|
||||
|
||||
156
insert/helpers.js
Normal file
156
insert/helpers.js
Normal file
@ -0,0 +1,156 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
const os = require('os'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra'),
|
||||
store = require('./store.js'),
|
||||
helperCache = {};
|
||||
|
||||
const enhancements = {};
|
||||
enhancements.validate = (mod, others = []) => {
|
||||
if (!mod.tags) mod.tags = [];
|
||||
if (!mod.options) mod.options = [];
|
||||
if (
|
||||
[
|
||||
typeof mod.id === 'string',
|
||||
!others.find((m) => m.id === mod.id),
|
||||
typeof mod.name === 'string',
|
||||
typeof mod.version === 'string',
|
||||
Array.isArray(mod.authors),
|
||||
mod.authors.every(
|
||||
(author) =>
|
||||
typeof author === 'string' ||
|
||||
(typeof author.name === 'string' &&
|
||||
typeof author.link === 'string' &&
|
||||
typeof author.avatar === 'string')
|
||||
),
|
||||
Array.isArray(mod.tags),
|
||||
mod.tags.every((tag) => typeof tag === 'string'),
|
||||
Array.isArray(mod.options),
|
||||
mod.options.every((opt) =>
|
||||
['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
|
||||
),
|
||||
].every((rule) => rule)
|
||||
)
|
||||
return true;
|
||||
return false;
|
||||
};
|
||||
enhancements.defaults = (options) => {
|
||||
const defaults = {};
|
||||
for (let opt of options)
|
||||
defaults[opt.key] = Object.keys(opt.platformOverwrite || {}).some(
|
||||
(platform) => process.platform === platform
|
||||
)
|
||||
? opt.platformOverwrite[process.platform]
|
||||
: Array.isArray(opt.value)
|
||||
? opt.value[0]
|
||||
: opt.value;
|
||||
return defaults;
|
||||
};
|
||||
enhancements.list = () => {
|
||||
if (helperCache.enhancements) return helperCache.enhancements;
|
||||
const get = (repository) => {
|
||||
if (!fs.existsSync(repository)) return [];
|
||||
const modules = [];
|
||||
for (let dir of fs
|
||||
.readdirSync(repository)
|
||||
.filter(
|
||||
(dir) =>
|
||||
!dir.startsWith('.') &&
|
||||
fs.lstatSync(path.join(repository, dir)).isDirectory()
|
||||
)) {
|
||||
try {
|
||||
const mod = require(path.resolve(`${repository}/${dir}/mod.js`));
|
||||
if (!enhancements.validate(mod, modules)) throw Error;
|
||||
mod.defaults = enhancements.defaults(mod.options);
|
||||
modules.push({
|
||||
...mod,
|
||||
error: false,
|
||||
source: path.resolve(`${repository}/${dir}`),
|
||||
});
|
||||
} catch (err) {
|
||||
modules.push({ error: true, name: dir });
|
||||
}
|
||||
}
|
||||
return modules.sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
const order = store('mods', '', { order: [] }).get('order'),
|
||||
modCache = get(`${os.homedir()}/.notion-enhancer/cache`).map((m) => {
|
||||
m.forced = false;
|
||||
m.hidden = false;
|
||||
return m;
|
||||
});
|
||||
helperCache.enhancements = {
|
||||
core: get(__dirname),
|
||||
cache: [
|
||||
...modCache.filter((m) => !order.includes(m.id)),
|
||||
...order.map((id) => modCache.find((m) => m.id === id)).filter((m) => m),
|
||||
],
|
||||
};
|
||||
return helperCache.enhancements;
|
||||
};
|
||||
enhancements.get = (id) => {
|
||||
const all = [...enhancements.list().core, ...enhancements.list().cache];
|
||||
return all.find((m) => m.id === id);
|
||||
};
|
||||
enhancements.styles = (id) => {
|
||||
if (helperCache.styles[id]) return helperCache.styles[id];
|
||||
const mod = enhancements.get(id);
|
||||
helperCache.styles[id] = {};
|
||||
if (mod && !mod.error)
|
||||
for (let sheet of ['global', 'app', 'tabs', 'menu'])
|
||||
if (fs.pathExistsSync(path.resolve(`${mod.source}/${sheet}.css`)))
|
||||
helperCache.styles[id][sheet] = `${mod.source}/${sheet}.css`;
|
||||
return helperCache.styles[id];
|
||||
};
|
||||
enhancements.enabled = (id) => {
|
||||
const mod = enhancements.get(id);
|
||||
if (!mod || mod.error) return false;
|
||||
return mod.forced || store('mods', 'enabled', { [id]: false }).get(id);
|
||||
};
|
||||
|
||||
const web = {};
|
||||
web.whenReady = (func = () => {}) => {
|
||||
return new Promise((res, rej) => {
|
||||
if (document.readyState !== 'complete') {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState === 'complete') {
|
||||
func();
|
||||
res(true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
func();
|
||||
res(true);
|
||||
}
|
||||
});
|
||||
};
|
||||
web.createElement = (html) => {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstElementChild;
|
||||
};
|
||||
web.loadStyleset = (sheet) => {
|
||||
for (let mod of [
|
||||
...enhancements.list().core,
|
||||
...enhancements.list().cache.reverse(),
|
||||
])
|
||||
if (enhancements.enabled(mod.id))
|
||||
if (enhancements.styles(mod.id)[sheet])
|
||||
document.head.appendChild(
|
||||
web.createElement(
|
||||
`<link rel="stylesheet" href="notion://enhancer/${mod.id}/${sheet}.css">`
|
||||
)
|
||||
);
|
||||
return true;
|
||||
};
|
||||
|
||||
function notionRequire(path) {
|
||||
return require(`../../${path}`);
|
||||
}
|
||||
|
||||
module.exports = { enhancements, web, notionRequire };
|
||||
23
insert/loader.js
Normal file
23
insert/loader.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const helpers = require('./helpers.js'),
|
||||
store = require('./store.js');
|
||||
|
||||
module.exports = function (target, __exports) {
|
||||
for (let mod of [
|
||||
...helpers.enhancements.list().core,
|
||||
...helpers.enhancements.list().cache.reverse(),
|
||||
])
|
||||
if (helpers.enhancements.enabled(mod.id) && mod.hacks && mod.hacks[target])
|
||||
mod.hacks[target](
|
||||
__exports,
|
||||
(defaults = {}) => store('config', mod.id, defaults),
|
||||
{ ...helpers, directStore: store }
|
||||
);
|
||||
};
|
||||
43
insert/store.js
Normal file
43
insert/store.js
Normal file
@ -0,0 +1,43 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const os = require('os'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra');
|
||||
|
||||
const location = path.resolve(`${os.homedir()}/.notion-enhancer/config`);
|
||||
|
||||
// a wrapper for accessing data stored in a JSON file.
|
||||
module.exports = (file, namespace = '', defaults = {}) => {
|
||||
fs.ensureDirSync(location);
|
||||
file = path.resolve(`${location}/${file}.json`);
|
||||
if (namespace && !namespace.endsWith('.')) namespace += '.';
|
||||
defaults = Object.fromEntries(
|
||||
Object.keys(defaults).map((key) => [namespace + key, defaults[key]])
|
||||
);
|
||||
|
||||
const getData = () => {
|
||||
try {
|
||||
return fs.readJsonSync(file);
|
||||
} catch (err) {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
saveData = (data) => fs.writeJsonSync(file, data);
|
||||
return {
|
||||
get(key) {
|
||||
return { ...defaults, ...getData() }[namespace + key];
|
||||
},
|
||||
set(key, val) {
|
||||
const data = { ...defaults, ...getData() };
|
||||
data[namespace + key] = val;
|
||||
saveData(data);
|
||||
return true;
|
||||
},
|
||||
};
|
||||
};
|
||||
1748
insert/theming/app.css
Normal file
1748
insert/theming/app.css
Normal file
File diff suppressed because it is too large
Load Diff
1017
insert/theming/global.css
Normal file
1017
insert/theming/global.css
Normal file
File diff suppressed because it is too large
Load Diff
36
insert/theming/mod.js
Normal file
36
insert/theming/mod.js
Normal file
@ -0,0 +1,36 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
forced: true,
|
||||
hidden: true,
|
||||
id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
|
||||
name: 'theming',
|
||||
tags: ['core', 'theme'],
|
||||
desc: 'loads & applies the theming variables and other css inserts.',
|
||||
version: require('../package.json').version,
|
||||
authors: [
|
||||
{
|
||||
name: 'dragonwocky',
|
||||
link: 'https://dragonwocky.me/',
|
||||
avatar: 'https://dragonwocky.me/avatar.jpg',
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js': (
|
||||
__exports,
|
||||
store,
|
||||
{ web: { whenReady, loadStyleset } }
|
||||
) => {
|
||||
whenReady(() => {
|
||||
loadStyleset('global');
|
||||
loadStyleset('app');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
/*
|
||||
* always on top
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// this is just a pseudo mod to "separate" the button
|
||||
// from the core module - the core still handles actually
|
||||
// making it work.
|
||||
module.exports = {
|
||||
id: '72886371-dada-49a7-9afc-9f275ecf29d3',
|
||||
tags: ['extension'],
|
||||
name: 'always on top',
|
||||
desc:
|
||||
"add an arrow/button to show the notion window on top of other windows even if it's not focused.",
|
||||
version: '0.1.1',
|
||||
author: 'dragonwocky',
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
/*
|
||||
* bracketed links
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-link-token span {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.notion-link-token:before {
|
||||
content: '[[';
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
.notion-link-token:after {
|
||||
content: ']]';
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
.notion-link-token:hover::before,
|
||||
.notion-link-token:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* bracketed links
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '60e14feb-a81d-4ffb-9b12-7585d346bad8',
|
||||
tags: ['extension'],
|
||||
name: 'bracketed links',
|
||||
desc: 'render links surrounded with [[brackets]] instead of __underlined__.',
|
||||
version: '0.1.0',
|
||||
author: 'arecsu',
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
/*
|
||||
* bypass preview
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-peek-renderer {
|
||||
display: none;
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
/*
|
||||
* bypass preview
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'cb6fd684-f113-4a7a-9423-8f0f0cff069f',
|
||||
tags: ['extension'],
|
||||
name: 'bypass preview',
|
||||
desc: 'go straight to the normal full view when opening a page.',
|
||||
version: '0.1.2',
|
||||
author: 'dragonwocky',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [];
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestIdleCallback(() => handle(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
});
|
||||
|
||||
let lastPageID;
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
const pageID = (location.search
|
||||
.slice(1)
|
||||
.split('&')
|
||||
.map((opt) => opt.split('='))
|
||||
.find((opt) => opt[0] === 'p') || [
|
||||
'',
|
||||
...location.pathname.split(/(-|\/)/g).reverse(),
|
||||
])[1],
|
||||
preview = document.querySelector(
|
||||
'.notion-peek-renderer [style*="height: 45px;"] a'
|
||||
);
|
||||
if (!pageID) return;
|
||||
if (preview) {
|
||||
if (pageID === lastPageID) {
|
||||
history.back();
|
||||
} else preview.click();
|
||||
} else lastPageID = pageID;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
/*
|
||||
* calendar scroll
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
#calendar-scroll-to-week {
|
||||
background: var(--theme--interactive_hover);
|
||||
border: 1px solid transparent;
|
||||
font-size: var(--theme--font_label-size);
|
||||
color: var(--theme--text);
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
line-height: 1.2;
|
||||
padding: 0 0.5em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#calendar-scroll-to-week:hover {
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme--interactive_hover);
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
/*
|
||||
* calendar scroll
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a',
|
||||
tags: ['extension'],
|
||||
name: 'calendar scroll',
|
||||
desc:
|
||||
'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.',
|
||||
version: '0.1.1',
|
||||
author: 'dragonwocky',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
const notion_elem = document.querySelector('.notion-frame');
|
||||
if (!notion_elem) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
const button = createElement(
|
||||
'<button id="calendar-scroll-to-week">Scroll</button>'
|
||||
);
|
||||
button.addEventListener('click', (event) => {
|
||||
const collection_view = document.querySelector(
|
||||
'.notion-collection-view-select'
|
||||
);
|
||||
if (!collection_view) return;
|
||||
const day = [
|
||||
...collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
|
||||
'notion-calendar-view-day'
|
||||
),
|
||||
].find((day) => day.style.background);
|
||||
if (!day) return;
|
||||
const scroller = document.querySelector(
|
||||
'.notion-frame .notion-scroller'
|
||||
);
|
||||
scroller.scroll({
|
||||
top: day.offsetParent.offsetParent.offsetTop + 70,
|
||||
});
|
||||
setTimeout(
|
||||
() =>
|
||||
scroller.scroll({
|
||||
top: day.offsetParent.offsetParent.offsetTop + 70,
|
||||
}),
|
||||
100
|
||||
);
|
||||
});
|
||||
|
||||
handle();
|
||||
const observer = new MutationObserver(handle);
|
||||
observer.observe(notion_elem, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list, observer) {
|
||||
if (document.querySelector('#calendar-scroll-to-week')) return;
|
||||
const arrow = document.querySelector(
|
||||
'.notion-selectable.notion-collection_view_page-block .chevronLeft'
|
||||
);
|
||||
if (arrow)
|
||||
arrow.parentElement.parentElement.insertBefore(
|
||||
button,
|
||||
arrow.parentElement
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
/*
|
||||
* cherry cola
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* quotations as serif */
|
||||
.notion-dark-theme .notion-quote-block {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
background-color: var(--cola-sec);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* cherry cola
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'ec5c4640-68d4-4d25-aefd-62c7e9737cfb',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'cherry cola',
|
||||
desc: 'a delightfully plummy, cherry cola flavored theme.',
|
||||
version: '0.1.0',
|
||||
author: 'runargs',
|
||||
};
|
||||
@ -1,144 +0,0 @@
|
||||
/*
|
||||
* cherry cola
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--cola-main: #180915;
|
||||
--cola-sec: #1d0919;
|
||||
--cola-tet: #492341;
|
||||
--cola-info: #9b6890;
|
||||
--cola-accent: #bf799b;
|
||||
--cola-gray: #8a8a8a;
|
||||
--cola-brown: #755241;
|
||||
--cola-orange: #e6846b;
|
||||
--cola-yellow: #d7b56e;
|
||||
--cola-green: #8f9b4f;
|
||||
--cola-blue: #6ebdb7;
|
||||
--cola-purple: #813d63;
|
||||
--cola-pink: #d86f71;
|
||||
--cola-red: #a33232;
|
||||
|
||||
/* main */
|
||||
--theme_dark--main: var(--cola-main);
|
||||
--theme_dark--sidebar: var(--cola-sec);
|
||||
--theme_dark--overlay: rgba(29, 9, 25, 0.5);
|
||||
--theme_dark--dragarea: #210a1c;
|
||||
--theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
|
||||
rgba(20, 0, 16, 0.2) 0px 2px 4px;
|
||||
--theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
|
||||
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
|
||||
|
||||
/* scrollbar */
|
||||
--theme_dark--scrollbar: var(--cola-sec);
|
||||
--theme_dark--scrollbar_hover: var(--cola-accent);
|
||||
|
||||
/* database */
|
||||
--theme_dark--card: var(--cola-sec);
|
||||
--theme_dark--gallery: var(--cola-sec);
|
||||
--theme_dark--select_input: var(--cola-tet);
|
||||
--theme_dark--table-border: var(--cola-tet);
|
||||
--theme_dark--ui-border: rgba(73, 35, 65, 0.7);
|
||||
--theme_dark--interactive_hover: var(--cola-tet);
|
||||
--theme_dark--button_close: var(--cola-accent);
|
||||
|
||||
/* select/hover/click */
|
||||
--theme_dark--selected: rgba(78, 32, 69, 0.5);
|
||||
--theme_dark--primary: var(--cola-accent);
|
||||
--theme_dark--primary_hover: var(--cola-accent);
|
||||
--theme_dark--primary_click: var(--cola-sec);
|
||||
--theme_dark--primary_indicator: var(--cola-accent);
|
||||
|
||||
--theme_dark--option_active-background: var(--theme_dark--primary);
|
||||
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
|
||||
|
||||
/* danger */
|
||||
--theme_dark--danger_text: #eb5757;
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
/* default text colors */
|
||||
--theme_dark--text: #ffffff;
|
||||
--theme_dark--text_ui: var(--cola-info);
|
||||
--theme_dark--text_ui_info: var(--cola-info);
|
||||
|
||||
/* text color options */
|
||||
--theme_dark--text_gray: var(--cola-gray);
|
||||
--theme_dark--text_brown: var(--cola-brown);
|
||||
--theme_dark--text_orange: var(--cola-orange);
|
||||
--theme_dark--text_yellow: var(--cola-yellow);
|
||||
--theme_dark--text_green: var(--cola-green);
|
||||
--theme_dark--text_blue: var(--cola-blue);
|
||||
--theme_dark--text_purple: var(--cola-purple);
|
||||
--theme_dark--text_pink: var(--cola-pink);
|
||||
--theme_dark--text_red: var(--cola-red);
|
||||
|
||||
--theme_dark--select-text: var(--cola-main);
|
||||
--theme_dark--select_gray: var(--cola-gray);
|
||||
--theme_dark--select_brown: var(--cola-brown);
|
||||
--theme_dark--select_brown-text: #ffffff;
|
||||
--theme_dark--select_orange: var(--cola-orange);
|
||||
--theme_dark--select_yellow: var(--cola-yellow);
|
||||
--theme_dark--select_green: var(--cola-green);
|
||||
--theme_dark--select_blue: var(--cola-blue);
|
||||
--theme_dark--select_purple: var(--cola-purple);
|
||||
--theme_dark--select_purple-text: #ffffff;
|
||||
--theme_dark--select_pink: var(--cola-pink);
|
||||
--theme_dark--select_red: var(--cola-red);
|
||||
--theme_dark--select_red-text: #ffffff;
|
||||
|
||||
--theme_dark--line-text: var(--cola-main);
|
||||
--theme_dark--line_gray: var(--cola-gray);
|
||||
--theme_dark--line_brown: var(--cola-brown);
|
||||
--theme_dark--line_orange: var(--cola-orange);
|
||||
--theme_dark--line_yellow: var(--cola-yellow);
|
||||
--theme_dark--line_green: var(--cola-green);
|
||||
--theme_dark--line_blue: var(--cola-blue);
|
||||
--theme_dark--line_purple: var(--cola-purple);
|
||||
--theme_dark--line_pink: var(--cola-pink);
|
||||
--theme_dark--line_red: var(--cola-red);
|
||||
|
||||
--theme_dark--bg-text: var(--theme_dark--select-text);
|
||||
--theme_dark--bg_gray: var(--theme_dark--select_gray);
|
||||
--theme_dark--bg_brown: var(--theme_dark--select_brown);
|
||||
--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);
|
||||
|
||||
/* callout blocks */
|
||||
--theme_dark--callout-text: var(--theme_dark--line-text);
|
||||
--theme_dark--callout_gray: var(--theme_dark--line_gray);
|
||||
--theme_dark--callout_brown: var(--theme_dark--line_brown);
|
||||
--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);
|
||||
|
||||
/* incline/code text */
|
||||
--theme_dark--code_inline-text: var(--cola-accent);
|
||||
--theme_dark--code_inline-background: var(--cola-main);
|
||||
--theme_dark--code-text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: var(--cola-sec);
|
||||
--theme_dark--code_function: var(--theme_dark--text_blue);
|
||||
--theme_dark--code_keyword: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_tag: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_operator: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_important: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_property: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_comment: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_doctype: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
/*
|
||||
* code line numbers
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-code-block.line-numbers > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-numbered {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
#code-line-numbers {
|
||||
font-size: var(--theme--font_code-size);
|
||||
font-family: var(--theme--font_code);
|
||||
color: var(--theme--text_ui_info);
|
||||
background: var(--theme--code-background);
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: calc(100% - 48px);
|
||||
padding-right: 18px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1,121 +0,0 @@
|
||||
/*
|
||||
* code line numbers
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: 'd61dc8a7-b195-465b-935f-53eea9efe74e',
|
||||
tags: ['extension'],
|
||||
name: 'code line numbers',
|
||||
desc: 'adds line numbers to code blocks.',
|
||||
version: '1.1.1',
|
||||
author: 'CloudHill',
|
||||
options: [
|
||||
{
|
||||
key: 'single_lined',
|
||||
label: 'show line numbers on single-lined code blocks',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [];
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => handle(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
const resizeObserver = new ResizeObserver(
|
||||
(list, observer) => number(list[0].target)
|
||||
);
|
||||
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
(
|
||||
addedNodes[0].className === 'notion-page-content' ||
|
||||
(
|
||||
addedNodes[0].querySelector &&
|
||||
addedNodes[0].querySelector('.notion-code-block.line-numbers')
|
||||
)
|
||||
)
|
||||
) {
|
||||
resizeObserver.disconnect();
|
||||
const codeBlocks = document.querySelectorAll('.notion-code-block.line-numbers');
|
||||
codeBlocks.forEach(block => {
|
||||
number(block);
|
||||
resizeObserver.observe(block);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function number(block) {
|
||||
let codeLineNumbers = '';
|
||||
|
||||
let numbers = block.querySelector('#code-line-numbers');
|
||||
if (!numbers) {
|
||||
numbers = createElement(
|
||||
'<span id="code-line-numbers"></span>'
|
||||
);
|
||||
|
||||
const blockStyle = window.getComputedStyle(block.children[0]);
|
||||
numbers.style.top = blockStyle.paddingTop;
|
||||
numbers.style.bottom = blockStyle.paddingBottom;
|
||||
|
||||
block.append(numbers);
|
||||
|
||||
const temp = createElement('<span>A</span>');
|
||||
block.firstChild.append(temp);
|
||||
block.lineHeight = temp.getBoundingClientRect().height;
|
||||
temp.remove();
|
||||
}
|
||||
|
||||
const lines = block.firstChild.innerText.split(/\r\n|\r|\n/);
|
||||
if (lines[lines.length - 1] === '') lines.pop();
|
||||
let lineCounter = 0;
|
||||
const wordWrap = block.firstChild.style.wordBreak === 'break-all';
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
lineCounter++;
|
||||
codeLineNumbers += `${lineCounter}\n`;
|
||||
|
||||
if (wordWrap) {
|
||||
const temp = document.createElement('span');
|
||||
temp.innerText = lines[i];
|
||||
block.firstChild.append(temp);
|
||||
const lineHeight = temp.getBoundingClientRect().height;
|
||||
temp.remove();
|
||||
|
||||
for (let j = 1; j < (lineHeight / block.lineHeight - 1); j++)
|
||||
codeLineNumbers += '\n';
|
||||
}
|
||||
}
|
||||
|
||||
if (store().single_lined || codeLineNumbers.length > 2) {
|
||||
block.firstChild.classList.add('code-numbered');
|
||||
numbers.innerText = codeLineNumbers;
|
||||
} else {
|
||||
block.firstChild.classList.remove('code-numbered');
|
||||
numbers.innerText = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,86 +0,0 @@
|
||||
/*
|
||||
* collapsible headers
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-page-content .notion-selectable[collapsed] {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.notion-page-content .notion-selectable[collapsed] .notion-selectable {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.collapse-header {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
margin: 0 6px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transition: 200ms ease-in;
|
||||
}
|
||||
.collapse-header:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
/* position: left */
|
||||
.collapse-header:first-child {
|
||||
margin-left: 2px;
|
||||
}
|
||||
/* position: right / inline */
|
||||
.collapse-header:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* show toggle on: collapsed, hover, focus */
|
||||
[data-collapsed="true"] .collapse-header:last-child,
|
||||
[data-collapsed]:hover .collapse-header:last-child,
|
||||
[data-collapsed] :focus + .collapse-header:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapse-header svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 200ms ease-out 0s;
|
||||
}
|
||||
/* position: left */
|
||||
.collapse-header:first-child svg {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
/* position: right / inline */
|
||||
.collapse-header:last-child svg {
|
||||
transform: rotateZ(270deg);
|
||||
}
|
||||
|
||||
[data-collapsed="false"] .collapse-header svg {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
/* position: inline */
|
||||
[inline-toggle] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
[inline-toggle] [placeholder] {
|
||||
width: auto !important;
|
||||
}
|
||||
[inline-toggle] [placeholder]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: text;
|
||||
}
|
||||
@ -1,475 +0,0 @@
|
||||
/*
|
||||
* collapsible headers
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: '548fe2d7-174a-44dd-88d8-35c7f9a093a7',
|
||||
tags: ['extension'],
|
||||
name: 'collapsible headers',
|
||||
desc: 'adds toggles to collapse header sections.',
|
||||
version: '1.0.0',
|
||||
author: 'CloudHill',
|
||||
options: [
|
||||
{
|
||||
key: 'toggle',
|
||||
label: 'toggle position',
|
||||
type: 'select',
|
||||
value: ['left', 'right', 'inline'],
|
||||
},
|
||||
{
|
||||
key: 'animate',
|
||||
label: 'enable animation',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'divBreak',
|
||||
label: 'use divider blocks to break header sections',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
if (!document.querySelector('.notion-frame')) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
if (!store().collapsed_ids) store().collapsed_ids = [];
|
||||
|
||||
window.addEventListener('hashchange', showSelectedHeader);
|
||||
|
||||
// add toggles to headers whenever blocks are added/removed
|
||||
const contentObserver = new MutationObserver((list, observer) => {
|
||||
list.forEach(m => {
|
||||
let node = m.addedNodes[0] || m.removedNodes[0];
|
||||
if (
|
||||
(
|
||||
node?.nodeType === Node.ELEMENT_NODE &&
|
||||
(
|
||||
node.className !== 'notion-selectable-halo' &&
|
||||
!node.style.cssText.includes('z-index: 88;')
|
||||
)
|
||||
) &&
|
||||
(
|
||||
m.target.className === 'notion-page-content' ||
|
||||
m.target.className.includes('notion-selectable')
|
||||
)
|
||||
) {
|
||||
// if a collapsed header is removed
|
||||
if (
|
||||
node.dataset?.collapsed === 'true' &&
|
||||
!node.nextElementSibling
|
||||
) showHeaderContent(node);
|
||||
|
||||
initHeaderToggles();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// observe for page changes
|
||||
let queue = [];
|
||||
const pageObserver = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => process(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
pageObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function process(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].className === 'notion-page-content'
|
||||
) {
|
||||
showSelectedHeader();
|
||||
initHeaderToggles();
|
||||
contentObserver.disconnect();
|
||||
contentObserver.observe(addedNodes[0], {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bind to ctrl + enter
|
||||
document.addEventListener('keyup', e => {
|
||||
const hotkey = {
|
||||
key: 'Enter',
|
||||
ctrlKey: true,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: false,
|
||||
};
|
||||
for (let prop in hotkey)
|
||||
if (hotkey[prop] !== e[prop]) return;
|
||||
// toggle active/selected headers
|
||||
const active = document.activeElement;
|
||||
let toggle;
|
||||
if (
|
||||
(toggle = active.nextElementSibling || active.previousElementSibling) &&
|
||||
toggle.className === 'collapse-header'
|
||||
) {
|
||||
toggle.click();
|
||||
} else {
|
||||
toggleHeaders( getSelectedHeaders() );
|
||||
}
|
||||
});
|
||||
|
||||
function initHeaderToggles() {
|
||||
const headerBlocks = document
|
||||
.querySelectorAll('.notion-page-content [class*="header-block"]');
|
||||
|
||||
headerBlocks.forEach(header => {
|
||||
const nextBlock = header.nextElementSibling;
|
||||
|
||||
// if header is moved
|
||||
if (
|
||||
header.dataset.collapsed &&
|
||||
header.collapsedBlocks &&
|
||||
header.collapsedBlocks[0] !== nextBlock
|
||||
) {
|
||||
showHeaderContent(header);
|
||||
}
|
||||
|
||||
// if header has no content
|
||||
if (
|
||||
!nextBlock ||
|
||||
getHeaderLevel(nextBlock) <= getHeaderLevel(header) ||
|
||||
(
|
||||
store().divBreak &&
|
||||
nextBlock.classList &&
|
||||
nextBlock.classList.contains('notion-divider-block')
|
||||
)
|
||||
) {
|
||||
if (header.dataset.collapsed) {
|
||||
delete header.dataset.collapsed;
|
||||
const toggle = header.querySelector('.collapse-header');
|
||||
if (toggle) toggle.remove();
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
// if header already has a toggle
|
||||
if (header.querySelector('.collapse-header')) return;
|
||||
|
||||
// add toggle to headers
|
||||
const toggle = createElement(`
|
||||
<div class="collapse-header">
|
||||
<svg viewBox="0 0 100 100" class="triangle">
|
||||
<polygon points="5.9,88.2 50,11.8 94.1,88.2" />
|
||||
</svg>
|
||||
</div>
|
||||
`)
|
||||
|
||||
if (store().toggle === 'left') header.firstChild.prepend(toggle);
|
||||
else header.firstChild.appendChild(toggle);
|
||||
|
||||
if (store().toggle === 'inline')
|
||||
header.firstChild.setAttribute('inline-toggle', '');
|
||||
|
||||
toggle.header = header;
|
||||
toggle.addEventListener('click', toggleHeaderContent);
|
||||
|
||||
// check store for header
|
||||
header.dataset.collapsed = false;
|
||||
if (store().collapsed_ids.includes(header.dataset.blockId))
|
||||
collapseHeaderContent(header, false);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleHeaderContent(e) {
|
||||
e.stopPropagation();
|
||||
const toggle = e.currentTarget;
|
||||
const header = toggle.header;
|
||||
|
||||
const selected = getSelectedHeaders();
|
||||
if (selected && selected.includes(header)) return toggleHeaders(selected);
|
||||
|
||||
if (header.dataset.collapsed === 'true') showHeaderContent(header);
|
||||
else collapseHeaderContent(header);
|
||||
}
|
||||
|
||||
function collapseHeaderContent(header, animate = true) {
|
||||
if (
|
||||
!header.className.includes('header-block') ||
|
||||
header.dataset.collapsed === 'true'
|
||||
) return;
|
||||
header.dataset.collapsed = true;
|
||||
|
||||
// store collapsed headers
|
||||
if (!store().collapsed_ids.includes(header.dataset.blockId)) {
|
||||
store().collapsed_ids.push(header.dataset.blockId);
|
||||
}
|
||||
|
||||
const headerLevel = getHeaderLevel(header);
|
||||
const toggle = header.querySelector('.collapse-header');
|
||||
|
||||
header.collapsedBlocks = getHeaderContent(header);
|
||||
header.collapsedBlocks.forEach(block => {
|
||||
// don't collapse already collapsed blocks
|
||||
if (block.hasAttribute('collapsed')) {
|
||||
if (+(block.getAttribute('collapsed')) < headerLevel) {
|
||||
block.setAttribute('collapsed', headerLevel);
|
||||
if (block.storeAttributes) block.storeAttributes.header = header;
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
block.storeAttributes = {
|
||||
marginTop: block.style.marginTop,
|
||||
marginBottom: block.style.marginBottom,
|
||||
header: header,
|
||||
}
|
||||
block.style.marginTop = 0;
|
||||
block.style.marginBottom = 0;
|
||||
|
||||
if (!store().animate) {
|
||||
block.setAttribute('collapsed', headerLevel);
|
||||
toggleInnerBlocks(block, true);
|
||||
} else {
|
||||
const height = block.offsetHeight;
|
||||
block.storeAttributes.height = height + 'px';
|
||||
block.setAttribute('collapsed', headerLevel);
|
||||
|
||||
if (!animate) toggleInnerBlocks(block, true);
|
||||
else {
|
||||
if (toggle) toggle.removeEventListener('click', toggleHeaderContent);
|
||||
block.animate(
|
||||
[
|
||||
{
|
||||
maxHeight: height + 'px',
|
||||
opacity: 1,
|
||||
marginTop: block.storeAttributes.marginTop,
|
||||
marginBottom: block.storeAttributes.marginBottom,
|
||||
},
|
||||
{
|
||||
maxHeight: (height - 100 > 0 ? height - 100 : 0) + 'px',
|
||||
opacity: 0, marginTop: 0, marginBottom: 0,
|
||||
},
|
||||
{
|
||||
maxHeight: 0, opacity: 0, marginTop: 0, marginBottom: 0,
|
||||
}
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-out'
|
||||
}
|
||||
).onfinish = () => {
|
||||
if (toggle) toggle.addEventListener('click', toggleHeaderContent);
|
||||
toggleInnerBlocks(block, true);
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showHeaderContent(header, animate = true) {
|
||||
if (
|
||||
!header.className.includes('header-block') ||
|
||||
header.dataset.collapsed === 'false'
|
||||
) return;
|
||||
header.dataset.collapsed = false;
|
||||
|
||||
// remove header from store
|
||||
const collapsed_ids = store().collapsed_ids;
|
||||
if (collapsed_ids.includes(header.dataset.blockId)) {
|
||||
store().collapsed_ids = collapsed_ids.filter(id => id !== header.dataset.blockId);
|
||||
}
|
||||
|
||||
if (!header.collapsedBlocks) return;
|
||||
const toggle = header.querySelector('.collapse-header');
|
||||
|
||||
showBlockHeader(header);
|
||||
|
||||
header.collapsedBlocks.forEach(block => {
|
||||
// don't toggle blocks collapsed under other headers
|
||||
if (
|
||||
+(block.getAttribute('collapsed')) > getHeaderLevel(header) ||
|
||||
!block.storeAttributes
|
||||
) return;
|
||||
|
||||
block.style.marginTop = block.storeAttributes.marginTop;
|
||||
block.style.marginBottom = block.storeAttributes.marginBottom;
|
||||
|
||||
if (!store().animate) {
|
||||
block.removeAttribute('collapsed');
|
||||
toggleInnerBlocks(block, false);
|
||||
|
||||
} else if (block.storeAttributes) {
|
||||
toggleInnerBlocks(block, false);
|
||||
|
||||
if (!animate) block.removeAttribute('collapsed');
|
||||
else {
|
||||
const height = parseInt(block.storeAttributes.height);
|
||||
if (toggle) toggle.removeEventListener('click', toggleHeaderContent);
|
||||
block.animate(
|
||||
[
|
||||
{
|
||||
maxHeight: 0, opacity: 0, marginTop: 0, marginBottom: 0,
|
||||
},
|
||||
{
|
||||
maxHeight: (height - 100 > 0 ? height - 100 : 0) + 'px',
|
||||
opacity: 1,
|
||||
marginTop: block.storeAttributes.marginTop,
|
||||
marginBottom: block.storeAttributes.marginBottom,
|
||||
},
|
||||
{
|
||||
maxHeight: height + 'px',
|
||||
opacity: 1,
|
||||
marginTop: block.storeAttributes.marginTop,
|
||||
marginBottom: block.storeAttributes.marginBottom,
|
||||
}
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-out'
|
||||
}
|
||||
).onfinish = () => {
|
||||
if (toggle) toggle.addEventListener('click', toggleHeaderContent);
|
||||
block.removeAttribute('collapsed');
|
||||
};
|
||||
}
|
||||
}
|
||||
delete block.storeAttributes;
|
||||
});
|
||||
delete header.collapsedBlocks;
|
||||
}
|
||||
|
||||
// query for headers marked with the selection halo
|
||||
function getSelectedHeaders() {
|
||||
const selectedHeaders = Array.from(
|
||||
document.querySelectorAll('[class*="header-block"] .notion-selectable-halo')
|
||||
).map(halo => halo.parentElement);
|
||||
|
||||
if (selectedHeaders.length > 0) return selectedHeaders;
|
||||
return null;
|
||||
}
|
||||
|
||||
// toggle an array of headers
|
||||
function toggleHeaders(headers) {
|
||||
if (!headers) return;
|
||||
headers = headers
|
||||
.filter(h =>
|
||||
!( h.hasAttribute('collapsed') && h.dataset.collapsed === 'false' )
|
||||
);
|
||||
|
||||
if (headers && headers.length > 0) {
|
||||
const collapsed = headers
|
||||
.filter(h => h.dataset.collapsed === 'true').length;
|
||||
headers.forEach(h => {
|
||||
if (collapsed >= headers.length) showHeaderContent(h);
|
||||
else collapseHeaderContent(h);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// get subsequent blocks
|
||||
function getHeaderContent(header) {
|
||||
let blockList = [];
|
||||
let nextBlock = header.nextElementSibling;
|
||||
while (nextBlock) {
|
||||
if (
|
||||
getHeaderLevel(nextBlock) <= getHeaderLevel(header) ||
|
||||
(
|
||||
store().divBreak &&
|
||||
nextBlock.classList &&
|
||||
nextBlock.classList.contains('notion-divider-block')
|
||||
)
|
||||
) break;
|
||||
blockList.push(nextBlock);
|
||||
nextBlock = nextBlock.nextElementSibling;
|
||||
}
|
||||
return blockList;
|
||||
}
|
||||
|
||||
// toggles a header from one of its collapsed blocks
|
||||
function showBlockHeader(block) {
|
||||
if (
|
||||
block?.hasAttribute('collapsed') &&
|
||||
block.storeAttributes?.header
|
||||
) {
|
||||
showHeaderContent(block.storeAttributes.header);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getHeaderLevel(header) {
|
||||
if (!header.className || !header.className.includes('header-block')) return 9;
|
||||
const subCount = header.classList[1].match(/sub/gi) || '';
|
||||
let headerLevel = 1 + subCount.length;
|
||||
return headerLevel;
|
||||
}
|
||||
|
||||
// ensures that any columns and indented blocks are also hidden
|
||||
// true => collapse, false => show
|
||||
function toggleInnerBlocks(block, collapse) {
|
||||
const header = block.storeAttributes?.header;
|
||||
Array.from(
|
||||
block.querySelectorAll('.notion-selectable')
|
||||
).forEach(b => {
|
||||
if (!b.getAttribute('collapsed')) {
|
||||
if (collapse) {
|
||||
if (!b.storeAttributes) {
|
||||
b.storeAttributes = {
|
||||
height: b.offsetHeight,
|
||||
marginTop: b.style.marginTop,
|
||||
marginBottom: b.style.marginBottom,
|
||||
header: header,
|
||||
};
|
||||
}
|
||||
b.setAttribute('collapsed', '')
|
||||
}
|
||||
else {
|
||||
b.removeAttribute('collapsed');
|
||||
delete b.storeAttributes;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showSelectedHeader() {
|
||||
setTimeout(() => {
|
||||
const halo = document.querySelector('.notion-selectable-halo');
|
||||
const header = halo?.parentElement;
|
||||
|
||||
if (!header?.className?.includes('header-block')) return;
|
||||
|
||||
// clear hash so that the same header can be toggled again
|
||||
location.hash = '';
|
||||
|
||||
if (showBlockHeader(header)) {
|
||||
setTimeout(
|
||||
() => {
|
||||
// is header in view?
|
||||
var rect = header.getBoundingClientRect();
|
||||
if (
|
||||
(rect.top >= 0) &&
|
||||
(rect.bottom <= window.innerHeight)
|
||||
) return;
|
||||
// if not, scroll to header
|
||||
header.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 400
|
||||
)
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
/*
|
||||
* dark+
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'c86cfe98-e645-4822-aa6b-e2de1e08bafa',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'dark+',
|
||||
desc: 'a vivid-colour near-black theme.',
|
||||
version: '0.1.6',
|
||||
author: 'dragonwocky',
|
||||
options: [
|
||||
{
|
||||
key: 'primary',
|
||||
label: 'primary colour',
|
||||
type: 'color',
|
||||
value: 'rgb(177, 24, 24)',
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
const color = require('./one-color.js')(store().primary);
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--selected',
|
||||
color.lightness(0.35).alpha(0.2).cssa()
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--primary',
|
||||
color.hex()
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--primary_hover',
|
||||
color.lightness(0.5).hex()
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--primary_click',
|
||||
color.lightness(0.6).hex()
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--primary_indicator',
|
||||
color.lightness(0.4).hex()
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -1,98 +0,0 @@
|
||||
/*
|
||||
* dark+
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--theme_dark--main: rgb(5, 5, 5);
|
||||
--theme_dark--sidebar: rgb(1, 1, 1);
|
||||
--theme_dark--dragarea: #000;
|
||||
--theme_dark--box-shadow_strong: none;
|
||||
|
||||
--theme_dark--scrollbar: #23242599;
|
||||
--theme_dark--scrollbar-border: transparent;
|
||||
--theme_dark--scrollbar_hover: #37383899;
|
||||
|
||||
--theme_dark--card: rgb(8, 8, 8);
|
||||
--theme_dark--gallery: rgba(26, 26, 26, 0.3);
|
||||
--theme_dark--select_input: rgb(12, 12, 12);
|
||||
--theme_dark--table-border: rgba(46, 46, 46, 0.7);
|
||||
--theme_dark--ui-border: var(--theme_dark--table-border);
|
||||
--theme_dark--interactive_hover:rgba(55, 56, 56, 0.3);
|
||||
|
||||
--theme_dark--option_hover-background: rgb(32, 32, 32);
|
||||
|
||||
--theme_dark--text: rgb(228, 228, 228);
|
||||
--theme_dark--text_ui: rgba(211, 211, 211, 0.637);
|
||||
--theme_dark--text_ui_info: rgba(211, 211, 211, 0.466);
|
||||
|
||||
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_dark--text_brown: rgb(147, 114, 100);
|
||||
--theme_dark--text_orange: rgb(255, 163, 68);
|
||||
--theme_dark--text_yellow: rgb(255, 220, 73);
|
||||
--theme_dark--text_green: rgb(50, 169, 104);
|
||||
--theme_dark--text_blue: rgb(82, 156, 202);
|
||||
--theme_dark--text_purple: rgb(154, 109, 215);
|
||||
--theme_dark--text_pink: rgb(226, 85, 161);
|
||||
--theme_dark--text_red: rgb(218, 47, 35);
|
||||
|
||||
--theme_dark--select_gray: rgba(126, 128, 129, 0.5);
|
||||
--theme_dark--select_brown: #50331f;
|
||||
--theme_dark--select_orange: rgba(255, 155, 0, 0.58);
|
||||
--theme_dark--select_yellow: rgba(183, 155, 0, 1);
|
||||
--theme_dark--select_green: rgb(50, 129, 47);
|
||||
--theme_dark--select_blue: rgba(0, 90, 146, 0.71);
|
||||
--theme_dark--select_purple: rgba(91, 49, 148, 0.74);
|
||||
--theme_dark--select_pink: rgba(243, 61, 159, 0.5);
|
||||
--theme_dark--select_red: rgb(122, 20, 20);
|
||||
|
||||
--theme_dark--bg_gray: var(--theme_dark--select_gray);
|
||||
--theme_dark--bg_brown: var(--theme_dark--select_brown);
|
||||
--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--line_gray: rgba(126, 128, 129, 0.301);
|
||||
--theme_dark--line_brown: #50331fad;
|
||||
--theme_dark--line_orange: rgba(255, 153, 0, 0.315);
|
||||
--theme_dark--line_yellow: rgba(183, 156, 0, 0.445);
|
||||
--theme_dark--line_green: rgba(50, 129, 47, 0.39);
|
||||
--theme_dark--line_blue: rgba(0, 90, 146, 0.521);
|
||||
--theme_dark--line_purple: rgba(90, 49, 148, 0.349);
|
||||
--theme_dark--line_pink: rgba(243, 61, 158, 0.301);
|
||||
--theme_dark--line_red: rgba(122, 20, 20, 0.623);
|
||||
|
||||
--theme_dark--callout_gray: rgba(126, 128, 129, 0.089);
|
||||
--theme_dark--callout_brown: #50331f59;
|
||||
--theme_dark--callout_orange: rgba(255, 153, 0, 0.164);
|
||||
--theme_dark--callout_yellow: rgba(183, 156, 0, 0.274);
|
||||
--theme_dark--callout_green: rgba(50, 129, 47, 0.191);
|
||||
--theme_dark--callout_blue: rgba(0, 90, 146, 0.294);
|
||||
--theme_dark--callout_purple: rgba(90, 49, 148, 0.219);
|
||||
--theme_dark--callout_pink: rgba(243, 61, 158, 0.191);
|
||||
--theme_dark--callout_red: rgba(122, 20, 20, 0.376);
|
||||
|
||||
--theme_dark--code_inline-text: #7dc582;
|
||||
--theme_dark--code_inline-background: rgb(8, 8, 8);
|
||||
--theme_dark--code-background: rgb(8, 8, 8);
|
||||
--theme_dark--code_function: #c7e1ff;
|
||||
--theme_dark--code_keyword: #c397d8;
|
||||
--theme_dark--code_tag: #82aed8;
|
||||
--theme_dark--code_operator: rgb(166, 175, 201);
|
||||
--theme_dark--code_important: #da265f;
|
||||
--theme_dark--code_property: #82aed8;
|
||||
--theme_dark--code_builtin: #ff6294;
|
||||
--theme_dark--code_attr-name: #ff6294;
|
||||
--theme_dark--code_comment: rgb(166, 175, 201);
|
||||
--theme_dark--code_punctuation: rgb(166, 175, 201);
|
||||
--theme_dark--code_doctype: rgb(166, 175, 201);
|
||||
--theme_dark--code_number: #c397d8;
|
||||
--theme_dark--code_string: #7dc582;
|
||||
--theme_dark--code_attr-value: #7dc582;
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
/*
|
||||
* dracula
|
||||
* (c) 2020 @mimishahzad386#5651
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],
|
||||
.notion-dark-theme
|
||||
img[src*='/images/onboarding/team-features-illustration.png'] {
|
||||
filter: invert(1) !important;
|
||||
}
|
||||
.notion-dark-theme img[src*='/images/onboarding/checked.svg'] {
|
||||
filter: hue-rotate(45deg) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'],
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] {
|
||||
transition: filter 0.4s ease !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover,
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
[style*='font-family: Fira Code, Menlo, Courier, monospace;'] {
|
||||
filter: hue-rotate(170deg) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-token-remove-button[role*='button'][tabindex*='0']:hover,
|
||||
.notion-dark-theme .notion-record-icon {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-focusable:focus-within,
|
||||
.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'],
|
||||
.notion-dark-theme div[role='button'],
|
||||
[style*='height: 4px;']
|
||||
> .notion-selectable.notion-collection_view_page-block
|
||||
> *,
|
||||
.notion-dark-theme .notion-calendar-view-day[style*='background: #282a36;'],
|
||||
.DayPicker-Day--today,
|
||||
.notion-dark-theme
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day--outside:hover,
|
||||
.notion-dark-theme
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value)
|
||||
.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
|
||||
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
|
||||
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
|
||||
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='background: #282a36;'],
|
||||
.notion-dark-theme
|
||||
[style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
|
||||
.notion-dark-theme
|
||||
[style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'],
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'],
|
||||
.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'],
|
||||
.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
|
||||
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)
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
/*
|
||||
* dracula
|
||||
* (c) 2020 @mimishahzad386#5651
|
||||
* (c) 2020 dracula
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '033bff54-50ba-4cec-bdc0-b2ca7e307086',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'dracula',
|
||||
desc:
|
||||
'a theme based on the popular dracula color palette originally by zeno rocha and friends. ',
|
||||
version: '0.2.0',
|
||||
author: 'dracula',
|
||||
};
|
||||
@ -1,195 +0,0 @@
|
||||
/*
|
||||
* dracula
|
||||
* (c) 2020 @mimishahzad386#5651
|
||||
* (c) 2020 dracula
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
/* PALETTE */
|
||||
|
||||
--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',
|
||||
Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol';
|
||||
|
||||
--theme_dark--scrollbar: var(--theme_dracula--selection);
|
||||
--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--ui-border: var(--theme_dark--table-border);
|
||||
--theme_dark--interactive_hover: var(--theme_dracula--line_highlight);
|
||||
--theme_dark--button_close: var(--theme_dracula--red);
|
||||
|
||||
--theme_dark--selected: #bb8dfd3d;
|
||||
--theme_dark--primary: var(--theme_dracula--purple);
|
||||
--theme_dark--primary_hover: #b179ff;
|
||||
--theme_dark--primary_click: #9f5ff8;
|
||||
--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_hover-background: var(--theme_dark--bg_purple);
|
||||
|
||||
--theme_dark--danger_text: var(--theme_dracula--red);
|
||||
--theme_dark--danger_border: var(--theme_dracula--bg_red);
|
||||
|
||||
/* TEXT */
|
||||
|
||||
--theme_dark--text: var(--theme_dracula--fg);
|
||||
--theme_dark--text_ui: var(--theme_dracula--fg_dark);
|
||||
--theme_dark--text_ui_info: var(--theme_dracula--comment);
|
||||
|
||||
--theme_dark--text_gray: var(--theme_dracula--gray);
|
||||
--theme_dark--text_brown: var(--theme_dracula--brown);
|
||||
--theme_dark--text_orange: var(--theme_dracula--orange);
|
||||
--theme_dark--text_yellow: var(--theme_dracula--yellow);
|
||||
--theme_dark--text_green: var(--theme_dracula--green);
|
||||
--theme_dark--text_blue: var(--theme_dracula--blue);
|
||||
--theme_dark--text_purple: var(--theme_dracula--purple);
|
||||
--theme_dark--text_pink: var(--theme_dracula--pink);
|
||||
--theme_dark--text_red: var(--theme_dracula--red);
|
||||
|
||||
/* SELECT */
|
||||
|
||||
--theme_dark--select-text: var(--theme_dracula--bg);
|
||||
--theme_dark--select_gray: var(--theme_dracula--gray);
|
||||
--theme_dark--select_brown: var(--theme_dracula--brown);
|
||||
--theme_dark--select_brown-text: var(--theme_dracula--fg);
|
||||
--theme_dark--select_orange: var(--theme_dracula--orange);
|
||||
--theme_dark--select_yellow: var(--theme_dracula--yellow);
|
||||
--theme_dark--select_green: var(--theme_dracula--green);
|
||||
--theme_dark--select_blue: var(--theme_dracula--blue);
|
||||
--theme_dark--select_purple: var(--theme_dracula--purple);
|
||||
--theme_dark--select_pink: var(--theme_dracula--pink);
|
||||
--theme_dark--select_red: var(--theme_dracula--red);
|
||||
--theme_dark--select_red-text: var(--theme_dracula--fg);
|
||||
|
||||
/* BG */
|
||||
|
||||
--theme_dark--bg-text: var(--theme_dracula--fg);
|
||||
--theme_dark--bg_gray: var(--theme_dracula--bg_gray);
|
||||
--theme_dark--bg_brown: var(--theme_dracula--bg_brown);
|
||||
--theme_dark--bg_orange: var(--theme_dracula--bg_orange);
|
||||
--theme_dark--bg_yellow: var(--theme_dracula--bg_yellow);
|
||||
--theme_dark--bg_green: var(--theme_dracula--bg_green);
|
||||
--theme_dark--bg_blue: var(--theme_dracula--bg_blue);
|
||||
--theme_dark--bg_purple: var(--theme_dracula--bg_purple);
|
||||
--theme_dark--bg_pink: var(--theme_dracula--bg_pink);
|
||||
--theme_dark--bg_red: var(--theme_dracula--bg_red);
|
||||
|
||||
/* LINE */
|
||||
|
||||
--theme_dark--line-text: var(--theme_dracula--fg);
|
||||
--theme_dark--line_gray: var(--theme_dracula--bg_gray);
|
||||
--theme_dark--line_brown: var(--theme_dracula--bg_brown);
|
||||
--theme_dark--line_orange: var(--theme_dracula--bg_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);
|
||||
}
|
||||
@ -1,145 +0,0 @@
|
||||
/*
|
||||
* emoji sets
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'a2401ee1-93ba-4b8c-9781-7f570bf5d71e',
|
||||
tags: ['extension'],
|
||||
name: 'emoji sets',
|
||||
desc: 'pick from a variety of emoji styles to use.',
|
||||
version: '0.3.0',
|
||||
author: 'dragonwocky',
|
||||
options: [
|
||||
{
|
||||
key: 'style',
|
||||
label: '',
|
||||
type: 'select',
|
||||
value: [
|
||||
'twitter',
|
||||
'apple',
|
||||
'google',
|
||||
'microsoft',
|
||||
'samsung',
|
||||
'whatsapp',
|
||||
'facebook',
|
||||
'joypixels',
|
||||
'openmoji',
|
||||
'emojidex',
|
||||
'lg',
|
||||
'htc',
|
||||
'mozilla',
|
||||
],
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
let tweaked = false;
|
||||
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [];
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(handle);
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
function handle() {
|
||||
queue = [];
|
||||
const isMac = process.platform === 'darwin',
|
||||
native =
|
||||
(store().style === 'microsoft' && process.platform === 'win32') ||
|
||||
(store().style === 'apple' && isMac);
|
||||
if (store().style !== (isMac ? 'apple' : 'twitter') || tweaked) {
|
||||
if (isMac) {
|
||||
if (native) {
|
||||
document
|
||||
.querySelectorAll('span[role="image"][aria-label]')
|
||||
.forEach((el) => {
|
||||
el.style.background = '';
|
||||
el.style.color = 'currentColor';
|
||||
});
|
||||
} else {
|
||||
document
|
||||
.querySelectorAll('span[role="image"][aria-label]')
|
||||
.forEach((el) => {
|
||||
if (!el.style.background.includes(store().style)) {
|
||||
el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
|
||||
'aria-label'
|
||||
)}?style=${store().style})`;
|
||||
el.style.width = el.parentElement.style.fontSize;
|
||||
el.style.backgroundSize = 'contain';
|
||||
el.style.backgroundRepeat = 'no-repeat';
|
||||
el.style.color = 'transparent';
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
document
|
||||
.querySelectorAll(
|
||||
'[src*="notion-emojis.s3"]:not(.notion-emoji)'
|
||||
)
|
||||
.forEach((el) => el.remove());
|
||||
if (native) {
|
||||
document.querySelectorAll('.notion-emoji').forEach((el) => {
|
||||
if (
|
||||
el.parentElement.querySelectorAll(
|
||||
'span[role="image"][aria-label]'
|
||||
).length !==
|
||||
el.parentElement.querySelectorAll('.notion-emoji').length
|
||||
) {
|
||||
el.insertAdjacentHTML(
|
||||
'beforebegin',
|
||||
`<span
|
||||
role="image"
|
||||
aria-label="${el.getAttribute('alt')}"
|
||||
style='font-family: "Apple Color Emoji", "Segoe UI Emoji",
|
||||
NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol",
|
||||
"Android Emoji", EmojiSymbols; line-height: 1em;'
|
||||
>${el.getAttribute('alt')}</span>`
|
||||
);
|
||||
el.style.display = 'none';
|
||||
if (el.parentElement.getAttribute('contenteditable'))
|
||||
el.remove();
|
||||
} else if (
|
||||
el.previousElementSibling.matches(
|
||||
'span[role="image"][aria-label]'
|
||||
)
|
||||
) {
|
||||
el.previousElementSibling.innerText = el.getAttribute(
|
||||
'alt'
|
||||
);
|
||||
el.setAttribute('aria-label', el.getAttribute('alt'));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
document.querySelectorAll('.notion-emoji').forEach((el) => {
|
||||
el.parentElement
|
||||
.querySelectorAll('span[role="image"][aria-label]')
|
||||
.forEach((text) => text.remove());
|
||||
el.style.display = 'inline-block';
|
||||
if (!el.style.background.includes(store().style)) {
|
||||
el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
|
||||
'aria-label'
|
||||
)}?style=${store().style})`;
|
||||
el.style.backgroundSize = 'contain';
|
||||
el.style.backgroundRepeat = 'no-repeat';
|
||||
el.style.opacity = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
tweaked = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
/*
|
||||
* focus mode
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 200ms ease-in-out !important;
|
||||
}
|
||||
.notion-sidebar-container[style*='width: 0px;']
|
||||
+ .notion-frame
|
||||
.notion-topbar:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
/* add space at the bottom of the main frame when sidebar is hidden
|
||||
* -- matches space at top for titlebar */
|
||||
[data-focusmode='padded'] .notion-dark-theme .notion-frame {
|
||||
transition: height 100ms ease 0s;
|
||||
}
|
||||
[data-focusmode='padded']
|
||||
.notion-sidebar-container[style*='width: 0px;']
|
||||
+ .notion-frame {
|
||||
height: calc(
|
||||
100% - (var(--configured--dragarea_height, 10px) + 45px)
|
||||
) !important;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
/*
|
||||
* focus mode
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '5a08598d-bfac-4167-9ae8-2bd0e2ef141e',
|
||||
tags: ['extension'],
|
||||
name: 'focus mode',
|
||||
desc:
|
||||
'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).',
|
||||
version: '0.2.0',
|
||||
author: 'arecsu',
|
||||
options: [
|
||||
{
|
||||
key: 'padded',
|
||||
label: 'add padding to bottom of the page',
|
||||
desc: `will only take effect when the sidebar is hidden. aims to make the canvas\
|
||||
as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.`,
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js': (store, __exports) => {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
if (store().padded) document.body.dataset.focusmode = 'padded';
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,73 +0,0 @@
|
||||
/*
|
||||
* font chooser
|
||||
* (c) 2020 torchatlas (https://bit.ly/torchatlas)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 admiraldus (https://github.com/admiraldus)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
|
||||
tags: ['extension'],
|
||||
name: 'font chooser',
|
||||
desc:
|
||||
'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.<br/><br/>make sure the fonts you type are installed on your device.',
|
||||
version: '0.3.0',
|
||||
author: 'torchatlas',
|
||||
options: [
|
||||
{
|
||||
key: 'sans',
|
||||
label: 'sans-serif (inc. ui):',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
key: 'serif',
|
||||
label: 'serif:',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
key: 'mono',
|
||||
label: 'monospace:',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
key: 'code',
|
||||
label: 'code:',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
key: 'quote',
|
||||
label: 'quote:',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
key: 'headings',
|
||||
label: 'headings:',
|
||||
type: 'input',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
async function enhance() {
|
||||
if (!document.querySelector('.notion-app-inner')) return;
|
||||
clearInterval(attempt_interval);
|
||||
for (let style of ['sans', 'serif', 'mono', 'code', 'quote', 'headings']) {
|
||||
if (!store()[style]) continue;
|
||||
|
||||
document
|
||||
.querySelector('.notion-app-inner')
|
||||
.style.setProperty(`--theme--font_${style}`, store()[style]);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,14 +0,0 @@
|
||||
/*
|
||||
* gameish
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/LVL100ShrekCultist
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-scroller.vertical.horizontal
|
||||
.notion-table-view
|
||||
.notion-selectable.notion-collection_view-block
|
||||
> :first-child {
|
||||
background: var(--theme--card) !important;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/*
|
||||
* gameish
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/LVL100ShrekCultist
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'ad923617-e76e-408e-9f23-490738a3223f',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'gameish',
|
||||
desc: 'a purple, "gamer-styled" theme with a blocky-font.',
|
||||
version: '0.1.4',
|
||||
author: {
|
||||
name: 'LVL100ShrekCultist',
|
||||
link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
|
||||
},
|
||||
};
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* gameish
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/LVL100ShrekCultist
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import 'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap';
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #1e1c26;
|
||||
--theme_dark--sidebar: #24222c;
|
||||
--theme_dark--dragarea: #19181f;
|
||||
|
||||
--theme_dark--font_sans: 'Offside', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--theme_dark--font_mono: 'DM Mono', iawriter-mono, Nitti, Menlo, Courier,
|
||||
monospace;
|
||||
--theme_dark--font_code: 'DM Mono', SFMono-Regular, Consolas,
|
||||
'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
--theme_dark--scrollbar: #221f29;
|
||||
--theme_dark--scrollbar_hover: #312d3c;
|
||||
|
||||
--theme_dark--gallery: rgba(162, 162, 162, 0.01);
|
||||
--theme_dark--table-border: rgba(148, 148, 184, 0.5);
|
||||
--theme_dark--interactive_hover: #282632;
|
||||
|
||||
--theme_dark--selected: rgba(85, 68, 156, 0.3);
|
||||
--theme_dark--primary: rgb(106, 47, 200);
|
||||
--theme_dark--primary_hover: rgb(110, 48, 211);
|
||||
--theme_dark--primary_click: rgb(117, 65, 200);
|
||||
--theme_dark--primary_indicator: rgb(150, 84, 226);
|
||||
|
||||
--theme_dark--option_hover-background: rgb(20, 0, 51);
|
||||
|
||||
--theme_dark--danger_text: rgb(235, 87, 87);
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark--text: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark--text_ui: rgba(255, 255, 255, 0.6);
|
||||
--theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
|
||||
|
||||
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_dark--text_brown: rgb(112, 87, 77);
|
||||
--theme_dark--text_yellow: #ffe529;
|
||||
--theme_dark--text_green: #64d97b;
|
||||
--theme_dark--text_purple: #d43cc7;
|
||||
--theme_dark--text_red: #d93939;
|
||||
|
||||
--theme_dark--select_red: rgba(216, 57, 46, 0.5);
|
||||
|
||||
--theme_dark--bg_brown: rgb(78, 57, 48);
|
||||
--theme_dark--bg_orange: rgb(136, 80, 48);
|
||||
--theme_dark--bg_yellow: #fbe2287c;
|
||||
--theme_dark--bg_red: rgb(151, 62, 62);
|
||||
|
||||
--theme_dark--line_brown: var(--theme_dark--bg_brown);
|
||||
--theme_dark--line_orange: var(--theme_dark--bg_orange);
|
||||
--theme_dark--line_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme_dark--line_red: var(--theme_dark--bg_red);
|
||||
|
||||
--theme_dark--callout_brown: var(--theme_dark--bg_brown);
|
||||
--theme_dark--callout_orange: var(--theme_dark--bg_orange);
|
||||
--theme_dark--callout_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme_dark--callout_red: var(--theme_dark--bg_red);
|
||||
|
||||
--theme_dark--code_inline-text: #d9cbec;
|
||||
--theme_dark--code_inline-background: #24222c;
|
||||
}
|
||||
@ -1,101 +0,0 @@
|
||||
/*
|
||||
* 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: 16px;
|
||||
width: 16px;
|
||||
fill: var(--theme--text_ui);
|
||||
}
|
||||
|
||||
.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: var(--theme--text);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
/*
|
||||
* 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$,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
<svg viewBox="0 0 30 30">
|
||||
<path d="M2,12c0-3.309,2.691-6,6-6h8c3.309,0,6,2.691,6,6s-2.691,6-6,6h-6c0,0.736,0.223,1.41,0.574,2H16c4.418,0,8-3.582,8-8 c0-4.418-3.582-8-8-8H8c-4.418,0-8,3.582-8,8c0,2.98,1.634,5.575,4.051,6.951C4.021,18.638,4,18.321,4,18 c0-0.488,0.046-0.967,0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12 c0,0.489-0.047,0.965-0.117,1.434C27.176,14.536,28,16.172,28,18c0,3.309-2.691,6-6,6h-8c-3.309,0-6-2.691-6-6s2.691-6,6-6h6 c0-0.731-0.199-1.413-0.545-2H14c-4.418,0-8,3.582-8,8c0,4.418,3.582,8,8,8h8c4.418,0,8-3.582,8-8 C30,15.021,28.368,12.428,25.953,11.051z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 631 B |
@ -1,58 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 2.5 KiB |
@ -1,241 +0,0 @@
|
||||
/*
|
||||
* 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',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
key: 'hidePageButton',
|
||||
label: 'show the page link button',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
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 icons = {
|
||||
globe: await x$.svg('/icons/globe.svg'),
|
||||
chain: await x$.svg('/icons/chain.svg'),
|
||||
};
|
||||
const pageClass = 'admiraldus-glb-page-button';
|
||||
const blockClass = 'admiraldus-glb-block-button';
|
||||
const spanClass = 'admiraldus-glb-span-hide';
|
||||
|
||||
if (store().hidePageButton) {
|
||||
/**
|
||||
* 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');
|
||||
if (target === null) return;
|
||||
|
||||
const attr = [
|
||||
`class="${pageClass}" role="button" tabindex="0"`,
|
||||
`class="${spanClass}"`,
|
||||
];
|
||||
const html = x$.el(
|
||||
`<div ${attr[0]}>
|
||||
${icons.chain}
|
||||
<span>Copy link</span>
|
||||
<span ${attr[1]}>Link copied!</span
|
||||
</div>`);
|
||||
|
||||
target.before(html);
|
||||
if (html === null) return create();
|
||||
};
|
||||
pageButton();
|
||||
|
||||
/**
|
||||
* Observer for the topbar.
|
||||
*/
|
||||
x$.obs(() => {
|
||||
if (x$.sel(`.${pageClass}`) !== null) return;
|
||||
pageButton();
|
||||
}, x$.sel('.notion-topbar'), {
|
||||
subtree: true, childList: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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}>
|
||||
${icons.globe}
|
||||
<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 ||
|
||||
x$.sel('.notion-selectable-halo') === 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);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,105 +0,0 @@
|
||||
/*
|
||||
* indentation lines
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: '35815b3b-3916-4dc6-8769-c9c2448f8b57',
|
||||
tags: ['extension'],
|
||||
name: 'indentation lines',
|
||||
desc: 'adds vertical relationship lines to make list trees easier to follow.',
|
||||
version: '1.0.0',
|
||||
author: 'runargs',
|
||||
options: [
|
||||
{
|
||||
key: 'style',
|
||||
label: 'style',
|
||||
type: 'select',
|
||||
value: ['solid', 'dashed', 'dotted', 'soft'],
|
||||
},
|
||||
{
|
||||
key: 'bulleted_list',
|
||||
label: 'bulleted list',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'numbered_list',
|
||||
label: 'numbered list',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'to_do',
|
||||
label: 'to-do list',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'toggle',
|
||||
label: 'toggle list',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
|
||||
const selectors =
|
||||
['bulleted_list', 'numbered_list', 'to_do', 'toggle']
|
||||
.filter(l => store()[l])
|
||||
.map(l => `.notion-page-content .notion-${l}-block > div > div:last-child`);
|
||||
|
||||
let style = 'solid';
|
||||
let opacity = 1;
|
||||
switch(store().style) {
|
||||
case 'dashed':
|
||||
style = 'dashed';
|
||||
break;
|
||||
case 'dotted':
|
||||
style = 'dotted';
|
||||
break;
|
||||
case 'soft':
|
||||
opacity = 0.25;
|
||||
break;
|
||||
}
|
||||
|
||||
if (selectors.length > 0) {
|
||||
document
|
||||
.querySelector('head')
|
||||
.appendChild(
|
||||
createElement(`
|
||||
<style type="text/css">
|
||||
.notion-app-inner {
|
||||
--indentation-lines-style: ${style};
|
||||
--indentation-lines-opacity: ${opacity};
|
||||
}
|
||||
${selectors.join(',\n')} {
|
||||
position: relative;
|
||||
}
|
||||
${selectors.join('::before,\n')}::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: calc(100% - 2em);
|
||||
top: 2em;
|
||||
left: -14.48px;
|
||||
border-left: 1px var(--indentation-lines-style);
|
||||
opacity: var(--indentation-lines-opacity);
|
||||
}
|
||||
</style>
|
||||
`)
|
||||
)
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,88 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* todo 颜色 */
|
||||
.notion-body.dark .notion-dark-theme [style*='background: rgb(46, 170, 220)'],
|
||||
.notion-body.dark
|
||||
.notion-dark-theme
|
||||
[style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark--option_active-background) !important;
|
||||
}
|
||||
|
||||
/* ===================== header =========================== */
|
||||
.notion-dark-theme [placeholder*='Heading 1'] {
|
||||
color: var(--littlepig_dark--h1_text) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [placeholder*='Heading 2'] {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 4px solid var(--littlepig_dark--h2_text);
|
||||
display: inline-block;
|
||||
color: var(--littlepig_dark--h2_text) !important;
|
||||
width: auto !important;
|
||||
padding: 6px 12px 6px 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
.notion-dark-theme [placeholder*='Heading 2']::before {
|
||||
content: '🔥 ';
|
||||
}
|
||||
|
||||
.notion-dark-theme [placeholder*='Heading 3'] {
|
||||
width: fit-content !important;
|
||||
padding: 4px 10px !important;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--littlepig_dark--h3_text);
|
||||
color: var(--littlepig_dark--h3_text) !important;
|
||||
background-color: #fbf8e7;
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.notion-dark-theme [placeholder*='Heading 3']::before {
|
||||
content: '📌 ';
|
||||
}
|
||||
|
||||
/* list 样式 */
|
||||
.notion-dark-theme
|
||||
[style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
|
||||
color: #a830fd !important;
|
||||
}
|
||||
|
||||
/* quoteblock 样式 */
|
||||
.notion-dark-theme
|
||||
.notion-quote-block
|
||||
[style*='caret-color: rgba(255, 255, 255, 0.9);'] {
|
||||
font-size: 0.85em !important;
|
||||
border-left: none !important;
|
||||
padding: 0.5em 0.5em 0.5em 1.9em !important;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
background: var(--theme_dark--card);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.notion-dark-theme
|
||||
.notion-quote-block
|
||||
[style*='caret-color: rgba(255, 255, 255, 0.9);']::before {
|
||||
content: '\201C';
|
||||
font-family: Georgia, serif;
|
||||
font-size: 44px;
|
||||
font-weight: bold;
|
||||
color: #7b08fa;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
/* link style */
|
||||
.notion-dark-theme .notion-link-token span {
|
||||
border-bottom: 0.05em solid;
|
||||
border-color: rgb(233, 51, 38) !important;
|
||||
border-width: 3px !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.notion-dark-theme .notion-link-token span:hover {
|
||||
color: rgb(233, 51, 38) !important;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'ad923617-e76e-418e-9f23-490738a32299',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'littlepig dark',
|
||||
desc: 'a purple monospaced theme using emojis and colourful text.',
|
||||
version: '0.1.2',
|
||||
author: {
|
||||
name: 'Lizishan',
|
||||
link: 'https://www.reddit.com/user/Lizishan/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
|
||||
},
|
||||
};
|
||||
@ -1,125 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css';
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #1e1c26;
|
||||
--theme_dark--sidebar: #24222c;
|
||||
--theme_dark--dragarea: #19181f;
|
||||
|
||||
--theme_dark--font_sans: 'JetBrains Mono';
|
||||
--theme_dark--font_serif: 'JetBrains Mono';
|
||||
--theme_dark--font_mono: 'JetBrains Mono';
|
||||
--theme_dark--font_code: 'JetBrains Mono';
|
||||
|
||||
--theme_dark--scrollbar: #221f29;
|
||||
--theme_dark--scrollbar_hover: #312d3c;
|
||||
|
||||
--theme_dark--card: #24222c;
|
||||
--theme_dark--gallery: rgba(162, 162, 162, 0.01);
|
||||
--theme_dark--table-border: rgba(148, 148, 184, 0.5);
|
||||
--theme_dark--interactive_hover: #282632;
|
||||
|
||||
--theme_dark--selected: #9500ff6b;
|
||||
--theme_dark--primary: rgb(106, 47, 200);
|
||||
--theme_dark--primary_hover: rgb(110, 48, 211);
|
||||
--theme_dark--primary_click: rgb(117, 65, 200);
|
||||
--theme_dark--primary_indicator: rgb(150, 84, 226);
|
||||
|
||||
--theme_dark--option_hover-background: rgb(20, 0, 51);
|
||||
|
||||
--theme_dark--text: rgba(200, 200, 200, 0.8);
|
||||
|
||||
/* 文本颜色 */
|
||||
--theme_dark--text_brown: rgb(177, 144, 131);
|
||||
--theme_dark--text_green: rgb(66, 222, 137);
|
||||
--theme_dark--text_blue: rgb(0, 157, 255);
|
||||
--theme_dark--text_purple: rgb(162, 94, 255);
|
||||
--theme_dark--text_red: rgb(240, 52, 38);
|
||||
|
||||
/* 文本背景色 */
|
||||
--theme_dark--line_gray: rgb(69, 75, 78);
|
||||
--theme_dark--line_brown: rgb(78, 57, 48);
|
||||
--theme_dark--line_orange: rgb(136, 80, 48);
|
||||
--theme_dark--line_yellow: #fbe2287c;
|
||||
--theme_dark--line_red: rgb(151, 62, 62);
|
||||
|
||||
/* 标题色 */
|
||||
--littlepig_dark--h1_text: #c264fe;
|
||||
--littlepig_dark--h2_text: #e2bafe;
|
||||
--littlepig_dark--h3_text: #7b08fa;
|
||||
|
||||
/* todo */
|
||||
--theme_dark--option_active-color: #7b08fa;
|
||||
--theme_dark--option_active-background: #1d1c26;
|
||||
|
||||
/* inline code */
|
||||
--theme_dark--code_inline-text: #e0dfe2;
|
||||
--theme_dark--code_inline-background: rgb(179, 39, 39);
|
||||
--theme_dark--code_function: rgb(179, 146, 240);
|
||||
--theme_dark--code_number: hsl(159, 69%, 39%);
|
||||
|
||||
/* 标签颜色 + 文本背景色 */
|
||||
--theme_dark--bg_gray: rgb(234, 234, 234);
|
||||
--theme_dark--bg_gray-text: rgb(17, 17, 17);
|
||||
--theme_dark--bg_brown: rgb(206, 206, 206);
|
||||
--theme_dark--bg_brown-text: rgb(85, 35, 1);
|
||||
--theme_dark--bg_orange: rgb(254, 214, 155);
|
||||
--theme_dark--bg_orange-text: rgb(199, 110, 0);
|
||||
--theme_dark--bg_yellow: #fcffd8;
|
||||
--theme_dark--bg_yellow-text: #ff8c22;
|
||||
--theme_dark--bg_green: #d5fded;
|
||||
--theme_dark--bg_green-text: #006a00;
|
||||
--theme_dark--bg_blue: #e2f5ff;
|
||||
--theme_dark--bg_blue-text: #00b2ff;
|
||||
--theme_dark--bg_purple: #efe6ff;
|
||||
--theme_dark--bg_purple-text: #8334ff;
|
||||
--theme_dark--bg_pink: #ffe9f1;
|
||||
--theme_dark--bg_pink-text: rgb(255, 0, 127);
|
||||
--theme_dark--bg_red: rgb(251, 228, 228);
|
||||
--theme_dark--bg_red-text: rgb(138, 0, 10);
|
||||
|
||||
--theme_dark--select_gray: rgb(234, 234, 234);
|
||||
--theme_dark--select_gray-text: rgb(17, 17, 17);
|
||||
--theme_dark--select_brown: rgb(206, 206, 206);
|
||||
--theme_dark--select_brown-text: rgb(85, 35, 1);
|
||||
--theme_dark--select_orange: rgb(254, 214, 155);
|
||||
--theme_dark--select_orange-text: rgb(199, 110, 0);
|
||||
--theme_dark--select_yellow: #fcffd8;
|
||||
--theme_dark--select_yellow-text: #ff8c22;
|
||||
--theme_dark--select_green: #d5fded;
|
||||
--theme_dark--select_green-text: #006a00;
|
||||
--theme_dark--select_blue: #e2f5ff;
|
||||
--theme_dark--select_blue-text: #00b2ff;
|
||||
--theme_dark--select_purple: #efe6ff;
|
||||
--theme_dark--select_purple-text: #8334ff;
|
||||
--theme_dark--select_pink: #ffe9f1;
|
||||
--theme_dark--select_pink-text: rgb(255, 0, 127);
|
||||
--theme_dark--select_red: rgb(251, 228, 228);
|
||||
--theme_dark--select_red-text: rgb(138, 0, 10);
|
||||
|
||||
/* callout 颜色 */
|
||||
--theme_dark--callout_gray: #e2e3e5;
|
||||
--theme_dark--callout_gray-text: #383d41;
|
||||
--theme_dark--callout_brown: rgb(130, 118, 111);
|
||||
--theme_dark--callout_brown-text: rgb(85, 35, 1);
|
||||
--theme_dark--callout_orange: rgb(254, 214, 155);
|
||||
--theme_dark--callout_orange-text: rgb(255, 140, 0);
|
||||
--theme_dark--callout_yellow: #fcffd8;
|
||||
--theme_dark--callout_yellow-text: #c76e00;
|
||||
--theme_dark--callout_green: #d4edda;
|
||||
--theme_dark--callout_green-text: #155724;
|
||||
--theme_dark--callout_blue: #cce5ff;
|
||||
--theme_dark--callout_blue-text: #004085;
|
||||
--theme_dark--callout_purple: rgb(199, 178, 230);
|
||||
--theme_dark--callout_purple-text: rgb(90, 49, 148);
|
||||
--theme_dark--callout_pink: rgb(255, 206, 228);
|
||||
--theme_dark--callout_pink-text: rgb(255, 0, 127);
|
||||
--theme_dark--callout_red: #f8d7da;
|
||||
--theme_dark--callout_red-text: #721c24;
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* todo 颜色 */
|
||||
.notion-body:not(.dark)
|
||||
.notion-light-theme
|
||||
[style*='background: rgb(46, 170, 220)'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-light-theme
|
||||
[style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark--option_active-background) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'][role='button'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(46, 170, 220);'][style*='width: 26px'] {
|
||||
background: var(--theme_light--primary) !important;
|
||||
}
|
||||
|
||||
/* ===================== header =========================== */
|
||||
.notion-body:not(.dark) [placeholder*='Heading 1'] {
|
||||
color: var(--littlepig_light--h1_text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [placeholder*='Heading 2'] {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 4px solid var(--littlepig_light--h2_text);
|
||||
display: inline-block;
|
||||
color: var(--littlepig_light--h2_text) !important;
|
||||
width: auto !important;
|
||||
padding: 6px 12px 6px 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
.notion-body:not(.dark) [placeholder*='Heading 2']::before {
|
||||
content: '🔥 ';
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [placeholder*='Heading 3'] {
|
||||
width: fit-content !important;
|
||||
padding: 4px 10px !important;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #42b983;
|
||||
color: var(--littlepig_light--h3_text) !important;
|
||||
background-color: #fbf8e7;
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.notion-body:not(.dark) [placeholder*='Heading 3']::before {
|
||||
content: '📌 ';
|
||||
}
|
||||
|
||||
/* list 样式 */
|
||||
.notion-body:not(.dark)
|
||||
[style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
|
||||
color: #41b983 !important;
|
||||
}
|
||||
|
||||
/* quoteblock 样式 */
|
||||
.notion-body:not(.dark) .notion-quote-block [style*='rgb(55, 53, 47);'] {
|
||||
font-size: 0.85em !important;
|
||||
border-left: none !important;
|
||||
padding: 0.5em 0.5em 0.5em 1.9em !important;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
background: var(--theme_light--card);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-quote-block
|
||||
[style*='caret-color: rgb(55, 53, 47);']::before {
|
||||
content: '\201C';
|
||||
font-family: Georgia, serif;
|
||||
font-size: 44px;
|
||||
font-weight: bold;
|
||||
color: #42b983;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
/* link style */
|
||||
.notion-body:not(.dark) .notion-link-token span {
|
||||
border-bottom: 0.05em solid;
|
||||
border-color: rgb(233, 51, 38) !important;
|
||||
border-width: 3px !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.notion-body:not(.dark) .notion-link-token span:hover {
|
||||
color: rgb(233, 51, 38) !important;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'ad923617-e76e-408e-9f23-490738a32238',
|
||||
tags: ['theme', 'light'],
|
||||
name: 'littlepig light',
|
||||
desc: 'a bright monospaced theme using emojis and colourful text.',
|
||||
version: '0.1.1',
|
||||
author: {
|
||||
name: 'Lizishan',
|
||||
link: 'https://www.reddit.com/user/Lizishan/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
|
||||
},
|
||||
};
|
||||
@ -1,104 +0,0 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css';
|
||||
|
||||
:root {
|
||||
--theme_light--font_sans: 'JetBrains Mono';
|
||||
--theme_light--font_serif: 'JetBrains Mono';
|
||||
--theme_light--font_mono: 'JetBrains Mono';
|
||||
--theme_light--font_code: 'JetBrains Mono';
|
||||
|
||||
--theme_light--selected: rgba(177, 24, 24, 0.22);
|
||||
--theme_light--primary: rgb(177, 24, 24);
|
||||
--theme_light--primary_hover: rgb(202, 26, 26);
|
||||
--theme_light--primary_click: rgb(219, 41, 41);
|
||||
--theme_light--primary_indicator: rgb(202, 26, 26);
|
||||
|
||||
/* 文本颜色 */
|
||||
--theme_light--text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_light--text_brown: rgb(167, 126, 100);
|
||||
--theme_light--text_orange: rgb(255, 134, 0);
|
||||
--theme_light--text_yellow: rgb(255, 195, 0);
|
||||
--theme_light--text_green: rgb(0, 171, 0);
|
||||
--theme_light--text_blue: rgb(0, 121, 255);
|
||||
--theme_light--text_purple: rgb(126, 0, 255);
|
||||
--theme_light--text_pink: rgb(255, 0, 208);
|
||||
--theme_light--text_red: rgb(255, 0, 0);
|
||||
|
||||
/* 文本背景色 */
|
||||
--theme_light--bg_gray: rgb(234, 234, 234);
|
||||
--theme_light--bg_gray-text: rgb(17, 17, 17);
|
||||
--theme_light--bg_brown: rgb(206, 206, 206);
|
||||
--theme_light--bg_brown-text: rgb(85, 35, 1);
|
||||
--theme_light--bg_orange: rgb(254, 214, 155);
|
||||
--theme_light--bg_orange-text: rgb(199, 110, 0);
|
||||
--theme_light--bg_yellow: #fcffd8;
|
||||
--theme_light--bg_yellow-text: #ff8c22;
|
||||
--theme_light--bg_green: #d5fded;
|
||||
--theme_light--bg_green-text: #006a00;
|
||||
--theme_light--bg_blue: #e2f5ff;
|
||||
--theme_light--bg_blue-text: #00b2ff;
|
||||
--theme_light--bg_purple: #efe6ff;
|
||||
--theme_light--bg_purple-text: #8334ff;
|
||||
--theme_light--bg_pink: #ffe9f1;
|
||||
--theme_light--bg_pink-text: rgb(255, 0, 127);
|
||||
--theme_light--bg_red: rgb(248, 215, 218);
|
||||
--theme_light--bg_red-text: rgb(138, 0, 10);
|
||||
|
||||
--theme_light--select_gray: rgb(234, 234, 234);
|
||||
--theme_light--select_gray-text: rgb(17, 17, 17);
|
||||
--theme_light--select_brown: rgb(206, 206, 206);
|
||||
--theme_light--select_brown-text: rgb(85, 35, 1);
|
||||
--theme_light--select_orange: rgb(254, 214, 155);
|
||||
--theme_light--select_orange-text: rgb(199, 110, 0);
|
||||
--theme_light--select_yellow: #fcffd8;
|
||||
--theme_light--select_yellow-text: #ff8c22;
|
||||
--theme_light--select_green: #d5fded;
|
||||
--theme_light--select_green-text: #006a00;
|
||||
--theme_light--select_blue: #e2f5ff;
|
||||
--theme_light--select_blue-text: #00b2ff;
|
||||
--theme_light--select_purple: #efe6ff;
|
||||
--theme_light--select_purple-text: #8334ff;
|
||||
--theme_light--select_pink: #ffe9f1;
|
||||
--theme_light--select_pink-text: rgb(255, 0, 127);
|
||||
--theme_light--select_red: rgb(248, 215, 218);
|
||||
--theme_light--select_red-text: rgb(138, 0, 10);
|
||||
|
||||
/* 标题色 */
|
||||
--littlepig_light--h1_text: #008800;
|
||||
--littlepig_light--h2_text: #006a00;
|
||||
--littlepig_light--h3_text: #003e00;
|
||||
|
||||
/* todo */
|
||||
--theme_light--option_active-color: #008800;
|
||||
--theme_light--option_active-background: #ffffff;
|
||||
|
||||
/* inline code */
|
||||
--theme_light--code_inline-text: #e0dfe2;
|
||||
--theme_light--code_inline-background: rgb(179, 39, 39);
|
||||
|
||||
/* callout 颜色 */
|
||||
--theme_light--callout_gray: #e2e3e5;
|
||||
--theme_light--callout_gray-text: #383d41;
|
||||
--theme_light--callout_brown: rgb(130, 118, 111);
|
||||
--theme_light--callout_brown-text: rgb(85, 35, 1);
|
||||
--theme_light--callout_orange: rgb(254, 214, 155);
|
||||
--theme_light--callout_orange-text: rgb(255, 140, 0);
|
||||
--theme_light--callout_yellow: #fcffd8;
|
||||
--theme_light--callout_yellow-text: #c76e00;
|
||||
--theme_light--callout_green: #d4edda;
|
||||
--theme_light--callout_green-text: #155724;
|
||||
--theme_light--callout_blue: #cce5ff;
|
||||
--theme_light--callout_blue-text: #004085;
|
||||
--theme_light--callout_purple: rgb(199, 178, 230);
|
||||
--theme_light--callout_purple-text: rgb(90, 49, 148);
|
||||
--theme_light--callout_pink: rgb(255, 206, 228);
|
||||
--theme_light--callout_pink-text: rgb(255, 0, 127);
|
||||
--theme_light--callout_red: #f8d7da;
|
||||
--theme_light--callout_red-text: #721c24;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* material ocean
|
||||
* (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'material ocean',
|
||||
desc: 'an oceanic colour palette.',
|
||||
version: '0.1.0',
|
||||
author: 'blacksuan19',
|
||||
};
|
||||
@ -1,126 +0,0 @@
|
||||
/*
|
||||
* material ocean
|
||||
* (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ocean-main: #0f111a;
|
||||
--ocean-sec: #00010a;
|
||||
--ocean-tet: #000108;
|
||||
--ocean-accent: #ff4151;
|
||||
--ocean-gray: #e0e0e0;
|
||||
--ocean-brown: #d8b6a6;
|
||||
--ocean-orange: #fde3c0;
|
||||
--ocean-yellow: #ebcb8b;
|
||||
--ocean-green: #a3be8c;
|
||||
--ocean-blue: #81a1c1;
|
||||
--ocean-purple: #b48ead;
|
||||
--ocean-pink: #ffc0cb;
|
||||
--ocean-red: #bf616a;
|
||||
|
||||
--theme_dark--main: var(--ocean-main);
|
||||
--theme_dark--sidebar: var(--ocean-sec);
|
||||
--theme_dark--overlay: rgba(0, 1, 10, 0.5);
|
||||
--theme_dark--dragarea: var(--ocean-sec);
|
||||
|
||||
--theme_dark--scrollbar: var(--ocean-sec);
|
||||
--theme_dark--scrollbar_hover: var(--ocean-accent);
|
||||
|
||||
--theme_dark--card: var(--ocean-sec);
|
||||
--theme_dark--gallery: var(--ocean-sec);
|
||||
--theme_dark--select_input: var(--ocean-tet);
|
||||
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
|
||||
--theme_dark--ui-border: var(--theme_dark--table-border);
|
||||
--theme_dark--interactive_hover: var(--ocean-tet);
|
||||
--theme_dark--button_close: var(--ocean-accent);
|
||||
|
||||
--theme_dark--selected: rgba(255, 65, 81, 0.2);
|
||||
--theme_dark--primary: var(--ocean-accent);
|
||||
--theme_dark--primary_hover: var(--ocean-accent);
|
||||
--theme_dark--primary_click: var(--ocean-sec);
|
||||
--theme_dark--primary_indicator: var(--ocean-accent);
|
||||
|
||||
--theme_dark--option_active-background: var(--theme_dark--primary);
|
||||
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
|
||||
|
||||
--theme_dark--danger_text: #eb5757;
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark--text: #ffffff;
|
||||
--theme_dark--text_ui: var(--ocean-gray);
|
||||
--theme_dark--text_ui_info: var(--ocean-gray);
|
||||
|
||||
--theme_dark--text_gray: var(--ocean-gray);
|
||||
--theme_dark--text_brown: var(--ocean-brown);
|
||||
--theme_dark--text_orange: var(--ocean-orange);
|
||||
--theme_dark--text_yellow: var(--ocean-yellow);
|
||||
--theme_dark--text_green: var(--ocean-green);
|
||||
--theme_dark--text_blue: var(--ocean-blue);
|
||||
--theme_dark--text_purple: var(--ocean-purple);
|
||||
--theme_dark--text_pink: var(--ocean-pink);
|
||||
--theme_dark--text_red: var(--ocean-red);
|
||||
|
||||
--theme_dark--bg-text: var(--ocean-main);
|
||||
--theme_dark--bg_gray: var(--ocean-gray);
|
||||
--theme_dark--bg_brown: var(--ocean-brown);
|
||||
--theme_dark--bg_orange: var(--ocean-orange);
|
||||
--theme_dark--bg_yellow: var(--ocean-yellow);
|
||||
--theme_dark--bg_green: var(--ocean-green);
|
||||
--theme_dark--bg_blue: var(--ocean-blue);
|
||||
--theme_dark--bg_purple: var(--ocean-purple);
|
||||
--theme_dark--bg_pink: var(--ocean-pink);
|
||||
--theme_dark--bg_red: var(--ocean-red);
|
||||
|
||||
--theme_dark--line-text: var(--ocean-main);
|
||||
--theme_dark--line_gray: #e0e0e089;
|
||||
--theme_dark--line_brown: #d8b6a692;
|
||||
--theme_dark--line_orange: #fde3c09f;
|
||||
--theme_dark--line_yellow: #ffe6a6ad;
|
||||
--theme_dark--line_green: #a3be8ca3;
|
||||
--theme_dark--line_blue: #81a1c1a3;
|
||||
--theme_dark--line_purple: #b48eada8;
|
||||
--theme_dark--line_pink: #ffc0cbb1;
|
||||
--theme_dark--line_red: #bf616a9e;
|
||||
|
||||
--theme_dark--select-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--select_gray: var(--theme_dark--bg_gray);
|
||||
--theme_dark--select_brown: var(--theme_dark--bg_brown);
|
||||
--theme_dark--select_orange: var(--theme_dark--bg_orange);
|
||||
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme_dark--select_green: var(--theme_dark--bg_green);
|
||||
--theme_dark--select_blue: var(--theme_dark--bg_blue);
|
||||
--theme_dark--select_purple: var(--theme_dark--bg_purple);
|
||||
--theme_dark--select_pink: var(--theme_dark--bg_pink);
|
||||
--theme_dark--select_red: var(--theme_dark--bg_red);
|
||||
|
||||
--theme_dark--callout-text: var(--theme_dark--line-text);
|
||||
--theme_dark--callout_gray: var(--theme_dark--line_gray);
|
||||
--theme_dark--callout_brown: var(--theme_dark--line_brown);
|
||||
--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--code_inline-text: #b3f5c8;
|
||||
--theme_dark--code_inline-background: var(--ocean-sec);
|
||||
--theme_dark--code-text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: var(--ocean-sec);
|
||||
--theme_dark--code_function: var(--theme_dark--text_blue);
|
||||
--theme_dark--code_keyword: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_tag: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_operator: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_important: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_property: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_comment: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_doctype: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
/*
|
||||
* neutral
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-dark-theme [placeholder='Heading 1'],
|
||||
.notion-dark-theme [placeholder='Heading 2'],
|
||||
.notion-dark-theme [placeholder='Heading 3'] {
|
||||
padding: 3px 1px !important;
|
||||
}
|
||||
|
||||
/* hide sidebar "new page" button */
|
||||
.notion-dark-theme
|
||||
.notion-sidebar
|
||||
> [style*='flex: 0 0 auto; margin-top: auto;'] {
|
||||
display: none !important;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
* neutral
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'c4435543-4705-4d68-8cf7-d11c342f8089',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'neutral',
|
||||
desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
|
||||
version: '0.1.4',
|
||||
author: 'arecsu',
|
||||
};
|
||||
@ -1,134 +0,0 @@
|
||||
/*
|
||||
* neutral
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Arecsu
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import 'https://rsms.me/inter/inter.css';
|
||||
@import 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap';
|
||||
|
||||
:root {
|
||||
/** dark **/
|
||||
|
||||
--theme_dark--main: #131313;
|
||||
--theme_dark--sidebar: #161616;
|
||||
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
|
||||
--theme_dark--dragarea: #111111;
|
||||
--theme_dark--box-shadow: rgba(15, 15, 15, 0.5) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.5) 0px 2px 4px;
|
||||
|
||||
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--theme_dark--font_mono: 'Roboto Mono', iawriter-mono, Nitti, Menlo, Courier,
|
||||
monospace;
|
||||
--theme_dark--font_code: 'Roboto Mono', SFMono-Regular, Consolas,
|
||||
'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
/* 1.3 supreme ratio. https://www.modularscale.com/ */
|
||||
--theme_dark--font_title-size: 33px;
|
||||
--theme_dark--font_heading1-size: 2.2em;
|
||||
--theme_dark--font_heading2-size: 1.687em;
|
||||
--theme_dark--font_heading3-size: 1.3em;
|
||||
--theme_dark--font_label-size: 14px;
|
||||
--theme_dark--font_body-size: 15px;
|
||||
--theme_dark--font_body-size_small: 13.5px;
|
||||
--theme_dark--font_code-size: 0.9em;
|
||||
--theme_dark--font_sidebar-size: 14px;
|
||||
|
||||
--theme_dark--scrollbar: #232425;
|
||||
--theme_dark--scrollbar-border: transparent;
|
||||
--theme_dark--scrollbar_hover: #373838;
|
||||
|
||||
--theme_dark--card: #181818;
|
||||
--theme_dark--gallery: rgba(105, 105, 105, 0.05);
|
||||
--theme_dark--select_input: #1d1d1d;
|
||||
--theme_dark--table-border: rgba(78, 78, 78, 0.7);
|
||||
--theme_dark--ui-border: var(--theme_dark--table-border);
|
||||
--theme_dark--interactive_hover: rgb(29, 29, 29);
|
||||
|
||||
--theme_dark--selected: #52525244;
|
||||
--theme_dark--primary: #404040;
|
||||
--theme_dark--primary_hover: #6d6d6d;
|
||||
--theme_dark--primary_click: #cacaca;
|
||||
--theme_dark--primary_indicator: #6d6d6d;
|
||||
|
||||
--theme_dark--option_hover-background: #484848;
|
||||
|
||||
--theme_dark--danger_text: #ce535f;
|
||||
--theme_dark--danger_border: #8c3d3d;
|
||||
|
||||
--theme_dark--text: #dadada;
|
||||
--theme_dark--text_ui: #dadadad0;
|
||||
--theme_dark--text_ui_info: #dadadab4;
|
||||
|
||||
--theme_dark--text_gray: #858585;
|
||||
--theme_dark--text_brown: #484848;
|
||||
--theme_dark--text_orange: #ec9873;
|
||||
--theme_dark--text_yellow: #e2c06f;
|
||||
--theme_dark--text_green: #92b178;
|
||||
--theme_dark--text_blue: #719cca;
|
||||
--theme_dark--text_purple: #ab82bb;
|
||||
--theme_dark--text_pink: #d285aa;
|
||||
--theme_dark--text_red: #ce535f;
|
||||
|
||||
--theme_dark--bg_gray: #585858;
|
||||
--theme_dark--bg_brown: #333333;
|
||||
--theme_dark--bg_orange: #9a5a3f;
|
||||
--theme_dark--bg_yellow: #b58a46;
|
||||
--theme_dark--bg_green: #657953;
|
||||
--theme_dark--bg_blue: #355475;
|
||||
--theme_dark--bg_purple: #775186;
|
||||
--theme_dark--bg_pink: #8e4b63;
|
||||
--theme_dark--bg_red: #8c3d3d;
|
||||
|
||||
--theme_dark--line_gray: #585858;
|
||||
--theme_dark--line_brown: #333333;
|
||||
--theme_dark--line_orange: #9a5a3f;
|
||||
--theme_dark--line_yellow: #b58a46;
|
||||
--theme_dark--line_green: #657953;
|
||||
--theme_dark--line_blue: #355475;
|
||||
--theme_dark--line_purple: #775186;
|
||||
--theme_dark--line_pink: #8e4b63;
|
||||
--theme_dark--line_red: #8c3d3d;
|
||||
|
||||
--theme_dark--select_gray: var(--theme_dark--bg_gray);
|
||||
--theme_dark--select_brown: var(--theme_dark--bg_brown);
|
||||
--theme_dark--select_orange: var(--theme_dark--bg_orange);
|
||||
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme_dark--select_green: var(--theme_dark--bg_green);
|
||||
--theme_dark--select_blue: var(--theme_dark--bg_blue);
|
||||
--theme_dark--select_purple: var(--theme_dark--bg_purple);
|
||||
--theme_dark--select_pink: var(--theme_dark--bg_pink);
|
||||
--theme_dark--select_red: var(--theme_dark--bg_red);
|
||||
|
||||
--theme_dark--callout_gray: rgba(88, 88, 88, 0.175);
|
||||
--theme_dark--callout_brown: rgb(51, 51, 51, 0.175);
|
||||
--theme_dark--callout_orange: rgb(154, 90, 63, 0.175);
|
||||
--theme_dark--callout_yellow: rgb(181, 138, 70, 0.175);
|
||||
--theme_dark--callout_green: rgb(101, 121, 83, 0.175);
|
||||
--theme_dark--callout_blue: rgb(53, 84, 117, 0.175);
|
||||
--theme_dark--callout_purple: rgb(119, 81, 134, 0.175);
|
||||
--theme_dark--callout_pink: rgb(142, 75, 99, 0.175);
|
||||
--theme_dark--callout_red: rgb(140, 61, 61, 0.175);
|
||||
|
||||
--theme_dark--code_inline-text: var(--theme_dark--text);
|
||||
--theme_dark--code_inline-background: #333333;
|
||||
--theme_dark--code-text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: #0e0e0e;
|
||||
--theme_dark--code_function: var(--theme_dark--text_blue);
|
||||
--theme_dark--code_keyword: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_tag: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_operator: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_important: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_property: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_comment: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_doctype: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
/*
|
||||
* night shift
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '9a71bbff-e87d-4a0b-8a2c-a93473113c30',
|
||||
tags: ['extension', 'theme'],
|
||||
name: 'night shift',
|
||||
desc:
|
||||
'sync dark/light theme with the system (overrides normal theme setting).',
|
||||
version: '0.1.2',
|
||||
author: 'dragonwocky',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
const notion_elem = document.querySelector('.notion-app-inner');
|
||||
if (!notion_elem) return;
|
||||
clearInterval(attempt_interval);
|
||||
handle([{ target: notion_elem }]);
|
||||
const observer = new MutationObserver(handle);
|
||||
observer.observe(notion_elem, {
|
||||
attributes: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list, observer) {
|
||||
const mode = `notion-app-inner notion-${
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light'
|
||||
}-theme`;
|
||||
if (notion_elem.className !== mode) notion_elem.className = mode;
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', handle);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
/*
|
||||
* nord v0.1.0
|
||||
* (c) 2020 MANNEN
|
||||
* dunno what to do here
|
||||
* under the MIT license, probably?
|
||||
*/
|
||||
|
||||
/*
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
* nord v0.1.0
|
||||
* (c) 2020 MANNEN
|
||||
* dunno what to do here
|
||||
* under the MIT license, probably?
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'ff87ff66-4910-436f-a843-7598edde2a7f',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'nord',
|
||||
desc: 'An arctic, north-bluish color palette.',
|
||||
version: '0.1.0',
|
||||
author: 'MANNEN',
|
||||
};
|
||||
@ -1,186 +0,0 @@
|
||||
/*
|
||||
* nord v0.1.0
|
||||
* (c) 2020 MANNEN
|
||||
* dunno what to do here
|
||||
* under the MIT license, probably?
|
||||
*/
|
||||
|
||||
@import 'https://rsms.me/inter/inter.css';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
|
||||
|
||||
:root {
|
||||
/** dark **/
|
||||
|
||||
--nord0: #2e3440; /*dark1*/
|
||||
--nord1: #3b4252; /*dark2*/
|
||||
--nord2: #434c5e; /*dark3*/
|
||||
--nord3: #4c566a; /*dark4*/
|
||||
--nord4: #d8dee9; /*light1*/
|
||||
--nord5: #e5e9f0; /*light2*/
|
||||
--nord6: #eceff4; /*light3*/
|
||||
--nord7: #8fbcbb; /*frost1*/
|
||||
--nord8: #88c0d0; /*frost2*/
|
||||
--nord9: #81a1c1; /*frost3*/
|
||||
--nord10: #5e81ac; /*frost4*/
|
||||
--nord11: #bf616a; /*red*/
|
||||
--nord12: #d08770; /*orange*/
|
||||
--nord13: #ebcb8b; /*yellow*/
|
||||
--nord14: #a3be8c; /*green*/
|
||||
--nord15: #b48ead; /*purple*/
|
||||
|
||||
--theme_dark--main: var(--nord0);
|
||||
--theme_dark--sidebar: var(--nord1);
|
||||
--theme_dark--overlay: rgb(41 37 37 / 60%);
|
||||
--theme_dark--dragarea: var(--nord0);
|
||||
--theme_dark--box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.2) 0px 2px 4px;
|
||||
--theme_dark--box-shadow_strong: 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;
|
||||
|
||||
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--theme_dark--font_code: 'Fira Code', monospace;
|
||||
|
||||
--theme_dark--scrollbar: var(--nord2);
|
||||
--theme_dark--scrollbar-border: transparent;
|
||||
--theme_dark--scrollbar_hover: var(--nord3);
|
||||
|
||||
--theme_dark--card: var(--nord1);
|
||||
--theme_dark--gallery: var(--nord2);
|
||||
--theme_dark--select_input: rgb(55, 60, 63);
|
||||
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
|
||||
--theme_dark--ui-border: rgba(255, 255, 255, 0.07);
|
||||
--theme_dark--interactive_hover: var(--nord3);
|
||||
--theme_dark--interactive_hover-border: transparent;
|
||||
--theme_dark--button_close: var(--nord11);
|
||||
--theme_dark--button_close-fill: var(--nord6);
|
||||
|
||||
--theme_dark--selected: rgb(136 192 208 / 50%);
|
||||
--theme_dark--primary: var(--nord8);
|
||||
--theme_dark--primary_hover: var(--nord8);
|
||||
--theme_dark--primary_click: var(--nord8);
|
||||
--theme_dark--primary_indicator: var(--nord11);
|
||||
|
||||
--theme_dark--option-color: var(--nord4);
|
||||
--theme_dark--option-background: transparent;
|
||||
--theme_dark--option_active-color: var(--nord4);
|
||||
--theme_dark--option_active-background: var(--theme_dark--primary);
|
||||
--theme_dark--option_hover-color: var(--nord4);
|
||||
--theme_dark--option_hover-background: var(--nord4);
|
||||
|
||||
--theme_dark--danger_text: var(--nord11);
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark--text: var(--nord4);
|
||||
--theme_dark--text_ui: var(--nord4);
|
||||
--theme_dark--text_ui_info: var(--nord4);
|
||||
|
||||
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_dark--text_brown: rgb(147, 114, 100);
|
||||
--theme_dark--text_orange: var(--nord12);
|
||||
--theme_dark--text_yellow: var(--nord13);
|
||||
--theme_dark--text_green: var(--nord14);
|
||||
--theme_dark--text_blue: var(--nord9);
|
||||
--theme_dark--text_purple: var(--nord15);
|
||||
--theme_dark--text_pink: rgb(193 106 153);
|
||||
--theme_dark--text_red: var(--nord11);
|
||||
|
||||
--theme_dark--bg-text: var(--theme_dark--text);
|
||||
--theme_dark--bg_gray: rgb(69, 75, 78);
|
||||
--theme_dark--bg_gray-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_brown: rgb(67, 64, 64);
|
||||
--theme_dark--bg_brown-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_orange: var(--nord12);
|
||||
--theme_dark--bg_orange-text: var(--theme_light--bg-text);
|
||||
--theme_dark--bg_yellow: var(--nord13);
|
||||
--theme_dark--bg_yellow-text: var(--theme_light--bg-text);
|
||||
--theme_dark--bg_green: var(--nord14);
|
||||
--theme_dark--bg_green-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_blue: var(--nord9);
|
||||
--theme_dark--bg_blue-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_purple: var(--nord15);
|
||||
--theme_dark--bg_purple-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_pink: rgb(193 106 153);
|
||||
--theme_dark--bg_pink-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--bg_red: var(--nord11);
|
||||
--theme_dark--bg_red-text: var(--theme_dark--bg-text);
|
||||
|
||||
--theme_dark--line-text: var(--theme_dark--text);
|
||||
--theme_dark--line_gray: rgb(69, 75, 78);
|
||||
--theme_dark--line_gray-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_brown: rgb(67, 64, 64);
|
||||
--theme_dark--line_brown-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_orange: var(--nord12);
|
||||
--theme_dark--line_orange-text: var(--theme_light--line-text);
|
||||
--theme_dark--line_yellow: var(--nord13);
|
||||
--theme_dark--line_yellow-text: var(--theme_light--line-text);
|
||||
--theme_dark--line_green: var(--nord14);
|
||||
--theme_dark--line_green-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_blue: var(--nord9);
|
||||
--theme_dark--line_blue-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_purple: var(--nord15);
|
||||
--theme_dark--line_purple-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_pink: rgb(193 106 153);
|
||||
--theme_dark--line_pink-text: var(--theme_dark--line-text);
|
||||
--theme_dark--line_red: var(--nord11);
|
||||
--theme_dark--line_red-text: var(--theme_dark--line-text);
|
||||
|
||||
--theme_dark--select-text: var(--theme_dark--text);
|
||||
--theme_dark--select_gray: rgba(151, 154, 155, 0.5);
|
||||
--theme_dark--select_gray-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_brown: rgba(147, 114, 100, 0.5);
|
||||
--theme_dark--select_brown-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_orange: rgba(255, 163, 68, 0.5);
|
||||
--theme_dark--select_orange-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_yellow: rgba(255, 220, 73, 0.5);
|
||||
--theme_dark--select_yellow-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_green: rgba(77, 171, 154, 0.5);
|
||||
--theme_dark--select_green-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_blue: rgba(82, 156, 202, 0.5);
|
||||
--theme_dark--select_blue-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_purple: rgba(154, 109, 215, 0.5);
|
||||
--theme_dark--select_purple-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_pink: rgba(226, 85, 161, 0.5);
|
||||
--theme_dark--select_pink-text: var(--theme_dark--select-text);
|
||||
--theme_dark--select_red: rgba(255, 115, 105, 0.5);
|
||||
--theme_dark--select_red-text: var(--theme_dark--select-text);
|
||||
|
||||
--theme_dark--callout-text: var(--theme_dark--text);
|
||||
--theme_dark--callout_gray: rgba(69, 75, 78, 0.3);
|
||||
--theme_dark--callout_gray-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_brown: rgba(67, 64, 64, 0.3);
|
||||
--theme_dark--callout_brown-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_orange: rgba(89, 74, 58, 0.3);
|
||||
--theme_dark--callout_orange-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_yellow: rgba(89, 86, 59, 0.3);
|
||||
--theme_dark--callout_yellow-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_green: rgba(53, 76, 75, 0.3);
|
||||
--theme_dark--callout_green-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_blue: rgba(54, 73, 84, 0.3);
|
||||
--theme_dark--callout_blue-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_purple: rgba(68, 63, 87, 0.3);
|
||||
--theme_dark--callout_purple-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_pink: rgba(83, 59, 76, 0.3);
|
||||
--theme_dark--callout_pink-text: var(--theme_dark--callout-text);
|
||||
--theme_dark--callout_red: rgba(89, 65, 65, 0.3);
|
||||
--theme_dark--callout_red-text: var(--theme_dark--callout-text);
|
||||
|
||||
--theme_dark--code_inline-text: var(--nord11);
|
||||
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
|
||||
--theme_dark--code-text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: var(--theme_dark--card);
|
||||
--theme_dark--code_function: var(--theme_dark--text_blue);
|
||||
--theme_dark--code_keyword: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_tag: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_operator: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_important: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_property: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_comment: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_doctype: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
@ -1,411 +0,0 @@
|
||||
/*
|
||||
* notion-icons
|
||||
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* tab */
|
||||
|
||||
[hide-active-bar] > :nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notion-icons--tab,
|
||||
.notion-icons--tab > div {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
#notion-icons--active-bar {
|
||||
border-bottom: 2px solid var(--theme--text);
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.notion-icons--restore-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
/* interactive hover */
|
||||
|
||||
.notion-icons--tab > div:hover,
|
||||
.notion-icons--icon:hover,
|
||||
.notion-icons--toggle:hover,
|
||||
.notion-icons--restore-button:hover,
|
||||
.notion-icons--removed-set:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* container */
|
||||
|
||||
#notion-icons {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: var(--theme--card);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* search */
|
||||
|
||||
.notion-icons--search {
|
||||
flex-shrink: 0;
|
||||
height: 28px;
|
||||
min-width: 0px;
|
||||
margin: 9px 14px 10px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
background: var(--theme--select_input);
|
||||
box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;
|
||||
user-select: none;
|
||||
cursor: text;
|
||||
}
|
||||
.notion-dark-theme .notion-icons--search {
|
||||
background: rgba(15, 15, 15, 0.3);
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
|
||||
}
|
||||
|
||||
.notion-icons--search input {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
resize: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.notion-icons--search svg {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
fill: inherit;
|
||||
backface-visibility: hidden;
|
||||
margin-right: 6px;
|
||||
color: rgba(55, 53, 47, 0.8);
|
||||
}
|
||||
.notion-dark-theme .notion-icons--search svg {
|
||||
color: rgb(202, 204, 206);
|
||||
}
|
||||
|
||||
/* scroller */
|
||||
|
||||
.notion-icons--scroller {
|
||||
padding: 8px 12px;
|
||||
overflow: hidden auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* divider */
|
||||
|
||||
.notion-icons--divider {
|
||||
height: 1px;
|
||||
margin-bottom: 9px;
|
||||
border-bottom: 1px solid var(--theme--table-border);
|
||||
}
|
||||
|
||||
/* icon set */
|
||||
|
||||
.notion-icons--icon-set {
|
||||
margin-bottom: 8px;
|
||||
color: var(--theme--text);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notion-icons--icon-set.error {
|
||||
color: var(--theme--text_red);
|
||||
background: var(--theme--line_red);
|
||||
border: 1px solid var(--theme--select_red);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.notion-icons--icon-set.error::after {
|
||||
content: '!';
|
||||
display: block;
|
||||
font-size: 1.6em;
|
||||
line-height: 0.9;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* icon set header/toggle */
|
||||
|
||||
.notion-icons--toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 200ms, margin-bottom 200ms ease-in;
|
||||
}
|
||||
.notion-icons--icon-set.alert .notion-icons--toggle {
|
||||
color: var(--theme--line_yellow-text);
|
||||
background: var(--theme--line_yellow);
|
||||
border: 1px solid var(--theme--select_yellow);
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.notion-icons--icon-set.alert .notion-icons--toggle:hover {
|
||||
background: var(--theme--select_yellow);
|
||||
}
|
||||
|
||||
.notion-icons--toggle .triangle {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 0.9em;
|
||||
height: 1em;
|
||||
margin: 0 0.75em 0 0.5em;
|
||||
transition: transform 200ms ease-out 0s;
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.notion-icons--author {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.notion-icons--author span,
|
||||
.notion-icons--author a {
|
||||
color: var(--theme--text_ui_info);
|
||||
transition: color 20ms ease-in;
|
||||
}
|
||||
.notion-icons--toggle a:hover {
|
||||
color: var(--theme--primary);
|
||||
}
|
||||
|
||||
/* icon set body */
|
||||
|
||||
.notion-icons--body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
margin-left: 1.2em;
|
||||
overflow: hidden;
|
||||
transition: height 200ms ease-in, opacity 200ms ease-in;
|
||||
}
|
||||
|
||||
/* hidden icon set */
|
||||
|
||||
.notion-icons--icon-set[hidden-set] {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--toggle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .triangle {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
|
||||
.notion-icons--icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 20ms ease-in;
|
||||
}
|
||||
|
||||
.notion-icons--icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* spritesheet */
|
||||
.notion-icons--icon div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notion-icons--icon.error {
|
||||
font-size: 20px;
|
||||
background: var(--theme--line_yellow);
|
||||
border: 1px solid var(--theme--select_yellow);
|
||||
color: var(--theme--text_yellow);
|
||||
}
|
||||
.notion-icons--icon.error:hover {
|
||||
background: var(--theme--select_yellow);
|
||||
}
|
||||
|
||||
/* tooltip */
|
||||
|
||||
.notion-icons--tooltip {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.notion-icons--tooltip > div {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notion-icons--tooltip-text {
|
||||
bottom: calc(100% + 6px);
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
max-width: calc(100vw - 24px);
|
||||
background: rgb(15, 15, 15);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-icons--tooltip-text {
|
||||
background: rgb(202, 204, 206);
|
||||
color: rgb(15, 15, 15);
|
||||
}
|
||||
|
||||
/* actions */
|
||||
|
||||
.notion-icons--actions {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* spinner */
|
||||
|
||||
.notion-icons--spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.notion-icons--spinner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotation 1.3s infinite linear;
|
||||
}
|
||||
|
||||
/* remove button */
|
||||
|
||||
.notion-icons--remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.notion-icons--remove-button::before {
|
||||
content: 'Hide icon set';
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
padding: 4px 22px 4px 6px;
|
||||
background: var(--theme--main);
|
||||
box-shadow: var(--theme--box-shadow);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 50ms ease-in;
|
||||
}
|
||||
.notion-icons--remove-button:hover::before {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.notion-icons--remove-button svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--theme--text_ui_info);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* restore icon sets modal */
|
||||
|
||||
.notion-icons--overlay-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notion-icons--restore {
|
||||
max-width: 320px;
|
||||
max-height: 320px;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
padding: 8px 0;
|
||||
box-shadow: var(--theme--box-shadow_strong);
|
||||
background: var(--theme--card);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.notion-icons--removed-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
|
||||
/* animation */
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<polygon class="cls-1" points="18.72 16.6 14.12 12 18.72 7.4 16.6 5.28 12 9.88 7.4 5.28 5.28 7.4 9.88 12 5.28 16.6 7.4 18.72 12 14.12 16.6 18.72 18.72 16.6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 251 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<polygon class="cls-1" points="20 10.5 13.5 10.5 13.5 4 10.5 4 10.5 10.5 4 10.5 4 13.5 10.5 13.5 10.5 20 13.5 20 13.5 13.5 20 13.5 20 10.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 234 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
|
||||
<path d="M6.78027 13.6729C8.24805 13.6729 9.60156 13.1982 10.709 12.4072L14.875 16.5732C15.0684 16.7666 15.3232 16.8633 15.5957 16.8633C16.167 16.8633 16.5713 16.4238 16.5713 15.8613C16.5713 15.5977 16.4834 15.3516 16.29 15.1582L12.1504 11.0098C13.0205 9.86719 13.5391 8.45215 13.5391 6.91406C13.5391 3.19629 10.498 0.155273 6.78027 0.155273C3.0625 0.155273 0.0214844 3.19629 0.0214844 6.91406C0.0214844 10.6318 3.0625 13.6729 6.78027 13.6729ZM6.78027 12.2139C3.87988 12.2139 1.48047 9.81445 1.48047 6.91406C1.48047 4.01367 3.87988 1.61426 6.78027 1.61426C9.68066 1.61426 12.0801 4.01367 12.0801 6.91406C12.0801 9.81445 9.68066 12.2139 6.78027 12.2139Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 749 B |
@ -1 +0,0 @@
|
||||
<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2" /></svg>
|
||||
|
Before Width: | Height: | Size: 97 B |
@ -1,653 +0,0 @@
|
||||
/*
|
||||
* notion-icons
|
||||
* (c) 2020 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js'),
|
||||
fs = require('fs-extra'),
|
||||
path = require('path'),
|
||||
notionIconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
|
||||
|
||||
module.exports = {
|
||||
id: '2d1f4809-9581-40dd-9bf3-4239db406483',
|
||||
tags: ['extension'],
|
||||
name: 'notion icons',
|
||||
desc:
|
||||
'use custom icon sets directly in notion.',
|
||||
version: '1.2.0',
|
||||
author: 'jayhxmo',
|
||||
options: [
|
||||
{
|
||||
key: 'hide',
|
||||
label: 'hide icon sets by default.',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
key: 'json',
|
||||
label: 'insert custom json',
|
||||
type: 'file',
|
||||
extensions: ['json'],
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
let garbageCollector = [],
|
||||
filterMap = new WeakMap();
|
||||
|
||||
function getAsync(urlString, callback) {
|
||||
let httpReq = new XMLHttpRequest();
|
||||
httpReq.onreadystatechange = function() {
|
||||
if (httpReq.readyState == 4 && httpReq.status == 200) callback(httpReq.responseText);
|
||||
};
|
||||
httpReq.open('GET', urlString, true);
|
||||
httpReq.send(null);
|
||||
}
|
||||
|
||||
const menuIcons = {};
|
||||
(async () => {
|
||||
menuIcons.triangle = await fs.readFile( path.resolve(__dirname, 'icons/triangle.svg') );
|
||||
menuIcons.remove = await fs.readFile( path.resolve(__dirname, 'icons/remove.svg' ) );
|
||||
menuIcons.restore = await fs.readFile( path.resolve(__dirname, 'icons/restore.svg' ) );
|
||||
menuIcons.search = await fs.readFile( path.resolve(__dirname, 'icons/search.svg' ) );
|
||||
})();
|
||||
|
||||
// source => icon data
|
||||
const enhancerIconSets = new Map();
|
||||
getAsync(notionIconsUrl + 'icons.json', iconsData => {
|
||||
const data = JSON.parse(iconsData);
|
||||
(data.icons || data).forEach(set => {
|
||||
enhancerIconSets.set(set.source, set);
|
||||
})
|
||||
});
|
||||
|
||||
// array
|
||||
let customIconSets;
|
||||
if (store().json) {
|
||||
const customData = JSON.parse(
|
||||
fs.readFileSync(store().json)
|
||||
)
|
||||
customIconSets = customData.icons || customData;
|
||||
}
|
||||
|
||||
// notion icons overlay
|
||||
|
||||
function addIconsTab() {
|
||||
// prevent icons tab duplication
|
||||
if (getTab(5))
|
||||
return removeIconsOverlay();
|
||||
|
||||
// change 'Upload an image' to 'Upload'
|
||||
getTab(2, true).innerText = 'Upload';
|
||||
|
||||
// initialize icons tab
|
||||
const iconsTab = getTab(3).cloneNode(true);
|
||||
iconsTab.className = 'notion-icons--tab';
|
||||
iconsTab.firstChild.innerText = 'Icons';
|
||||
iconsTab.firstChild.addEventListener('click', renderIconsOverlay);
|
||||
|
||||
// insert icons tab
|
||||
const tabStrip = getTab(1).parentElement;
|
||||
tabStrip.insertBefore(iconsTab, tabStrip.lastChild);
|
||||
|
||||
initCloseTriggers();
|
||||
}
|
||||
|
||||
function renderIconsOverlay() {
|
||||
if (!isCurrentTab(4)) {
|
||||
// switch to 3rd tab so that the link can be input in the underlay
|
||||
if (!isCurrentTab(3)) getTab(3, true).click();
|
||||
|
||||
if (
|
||||
store().removedSets?.length > 0 &&
|
||||
enhancerIconSets.size > 0
|
||||
)
|
||||
addRestoreButton();
|
||||
|
||||
// set active bar on icons tab
|
||||
const iconsTab = getTab(4),
|
||||
activeBar = createElement(
|
||||
`<div id="notion-icons--active-bar"></div>`
|
||||
);
|
||||
iconsTab.style.position = 'relative';
|
||||
iconsTab.appendChild(activeBar);
|
||||
getTab(3).setAttribute('hide-active-bar', '');
|
||||
|
||||
// create icons overlay
|
||||
const notionIcons = createElement(
|
||||
'<div id="notion-icons"></div>'
|
||||
);
|
||||
|
||||
// render search bar
|
||||
const search = createElement(`
|
||||
<div class="notion-icons--search notion-focusable">
|
||||
${menuIcons.search}
|
||||
<input placeholder="Filter…" type="text">
|
||||
</div>
|
||||
`),
|
||||
searchInput = search.lastElementChild;
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
filterIcons(searchInput.value);
|
||||
});
|
||||
|
||||
// render scroller and icon sets
|
||||
const scroller = createElement(`
|
||||
<div class="notion-icons--scroller"></div>
|
||||
`);
|
||||
scroller.appendChild( loadIconSets() );
|
||||
|
||||
notionIcons.append(search, scroller);
|
||||
|
||||
// insert icons overlay
|
||||
document.querySelector('.notion-media-menu > .notion-scroller')
|
||||
.appendChild(notionIcons);
|
||||
|
||||
// focus on search bar
|
||||
requestAnimationFrame(() => {
|
||||
searchInput.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// convert icons data into renderable
|
||||
function loadIconSets() {
|
||||
const iconSets = new DocumentFragment();
|
||||
|
||||
if (customIconSets) {
|
||||
customIconSets.forEach(i => {
|
||||
iconSets.appendChild( renderIconSet(i) );
|
||||
});
|
||||
|
||||
// divider
|
||||
iconSets.appendChild(
|
||||
createElement('<div class="notion-icons--divider"></div>')
|
||||
);
|
||||
}
|
||||
|
||||
if (enhancerIconSets.size > 0) {
|
||||
enhancerIconSets.forEach((i, source) => {
|
||||
// ignore removed icon sets
|
||||
if ( store().removedSets?.includes(source) ) return;
|
||||
|
||||
i.sourceUrl = i.sourceUrl || (notionIconsUrl + source);
|
||||
iconSets.appendChild( renderIconSet(i, true) );
|
||||
});
|
||||
}
|
||||
|
||||
return iconSets;
|
||||
}
|
||||
|
||||
// returns icon set element
|
||||
function renderIconSet(iconData, enhancerSet = false) {
|
||||
const iconSet = createElement(
|
||||
'<div class="notion-icons--icon-set"></div>'
|
||||
);
|
||||
|
||||
try {
|
||||
const author = iconData.author
|
||||
? iconData.authorUrl
|
||||
? ` by <a target="_blank" href="${iconData.authorUrl}">${iconData.author}</a>`
|
||||
: ` by <span>${iconData.author}</span>`
|
||||
: '';
|
||||
|
||||
const toggle = createElement(`
|
||||
<div class="notion-icons--toggle">
|
||||
${menuIcons.triangle}
|
||||
<div class="notion-icons--author">${iconData.name}${author}</div>
|
||||
<div class="notion-icons--actions">
|
||||
<div class="notion-icons--spinner">
|
||||
<img src="/images/loading-spinner.4dc19970.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const iconSetBody = createElement(
|
||||
'<div class="notion-icons--body"></div>'
|
||||
);
|
||||
|
||||
iconSet.append(toggle, iconSetBody);
|
||||
|
||||
const promiseArray = [];
|
||||
// render icons
|
||||
for (let i = 0; i < (iconData.count || iconData.source.length); i++) {
|
||||
|
||||
const iconUrl = iconData.sourceUrl
|
||||
? Array.isArray(iconData.source)
|
||||
? `${iconData.sourceUrl}/${iconData.source[i]}.${iconData.extension}`
|
||||
: `${iconData.sourceUrl}/${iconData.source}_${i}.${iconData.extension}`
|
||||
: iconData.source[i];
|
||||
|
||||
const icon = createElement(`<div class="notion-icons--icon"></div>`);
|
||||
icon.innerHTML = enhancerSet
|
||||
// load sprite sheet
|
||||
? `<div style="background-image: url(${notionIconsUrl}${iconData.source}/sprite.png); background-position: 0 -${i * 32}px;"></div>`
|
||||
: `<img src="${iconUrl}" />`;
|
||||
|
||||
// add filters to filterMap
|
||||
const filters = [];
|
||||
|
||||
if (iconData.filter) {
|
||||
if (iconData.filter === 'source') {
|
||||
const filename = iconUrl.match(/.*\/(.+?)\./);
|
||||
if (filename?.length > 1) {
|
||||
filters.push(...filename[1].split(/[ \-_]/));
|
||||
}
|
||||
}
|
||||
else if (Array.isArray(iconData.filter)) {
|
||||
filters.push(...iconData.filter[i]);
|
||||
}
|
||||
icon.setAttribute('filter', filters.join(' '));
|
||||
}
|
||||
|
||||
// add set name and author to filters
|
||||
filters.push(...iconData.name.toLowerCase().split(' '));
|
||||
if (iconData.author) filters.push(...iconData.author.toLowerCase().split(' '));
|
||||
|
||||
filterMap.set(icon, filters);
|
||||
|
||||
// make sure icons load
|
||||
if (!enhancerSet) {
|
||||
promiseArray.push(
|
||||
new Promise((resolve, reject) => {
|
||||
icon.firstChild.onload = resolve;
|
||||
icon.firstChild.onerror = () => {
|
||||
reject();
|
||||
icon.classList.add('error');
|
||||
icon.innerHTML = '!';
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
garbageCollector.push(icon);
|
||||
icon.addEventListener('click', () => setPageIcon(iconUrl));
|
||||
iconSetBody.appendChild(icon);
|
||||
}
|
||||
|
||||
// hide spinner after all icons finish loading
|
||||
(async () => {
|
||||
const spinner = toggle.querySelector('.notion-icons--spinner'),
|
||||
loadPromise = Promise.all(promiseArray);
|
||||
loadPromise.then(
|
||||
() => spinner.remove(),
|
||||
() => {
|
||||
iconSet.classList.add('alert')
|
||||
spinner.remove();
|
||||
}
|
||||
);
|
||||
})();
|
||||
|
||||
// add remove icon set button
|
||||
if (enhancerSet) {
|
||||
const removeButton = createElement(
|
||||
`<div class="notion-icons--remove-button">${menuIcons.remove}</div>`
|
||||
);
|
||||
removeButton.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
removeIconSet(iconData);
|
||||
});
|
||||
iconSet.querySelector('.notion-icons--actions')
|
||||
.appendChild(removeButton);
|
||||
}
|
||||
|
||||
// set up toggle
|
||||
toggle.addEventListener('click', e => {
|
||||
if (e.target.nodeName === 'A') return;
|
||||
toggleIconSet(iconSet);
|
||||
});
|
||||
|
||||
// hide by default?
|
||||
if (store().hide)
|
||||
requestAnimationFrame(() => toggleIconSet(iconSet))
|
||||
|
||||
// tooltip
|
||||
let timeout;
|
||||
iconSetBody.addEventListener('mouseover', e => {
|
||||
const el = e.target;
|
||||
if (!el.hasAttribute('filter')) return;
|
||||
|
||||
document.querySelector('.notion-icons--tooltip')?.remove();
|
||||
timeout = setTimeout(() => {
|
||||
renderTooltip(el, el.getAttribute('filter'))
|
||||
}, 300);
|
||||
})
|
||||
iconSetBody.addEventListener('mouseout', e => {
|
||||
const el = e.target;
|
||||
if (!el.hasAttribute('filter')) return;
|
||||
|
||||
document.querySelector('.notion-icons--tooltip')?.remove();
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
iconSet.classList.add('error');
|
||||
iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`;
|
||||
}
|
||||
|
||||
return iconSet;
|
||||
}
|
||||
|
||||
function removeIconsOverlay() {
|
||||
const elements = [
|
||||
document.getElementById('notion-icons'),
|
||||
document.getElementById('notion-icons--active-bar'),
|
||||
document.querySelector('.notion-icons--restore-button'),
|
||||
document.querySelector('.notion-icons--tooltip'),
|
||||
]
|
||||
elements.forEach(el => {
|
||||
if (el) el.remove();
|
||||
})
|
||||
|
||||
getTab(4).style.position = '';
|
||||
|
||||
if (getTab(3))
|
||||
getTab(3).removeAttribute('hide-active-bar');
|
||||
|
||||
if (
|
||||
document.querySelector('.notion-icons--overlay-container')
|
||||
) closeRestoreOverlay();
|
||||
|
||||
if (garbageCollector.length) {
|
||||
for (let i = 0; i < garbageCollector.length; i++) {
|
||||
garbageCollector[i] = null;
|
||||
}
|
||||
garbageCollector = [];
|
||||
}
|
||||
}
|
||||
|
||||
function initCloseTriggers() {
|
||||
// remove the icons overlay when clicking...
|
||||
const triggers = [
|
||||
// the fog layer
|
||||
document.querySelector('.notion-overlay-container [style*="width: 100vw; height: 100vh;"]'),
|
||||
// the first three buttons
|
||||
...[1, 2, 3].map( n => getTab(n, true) ),
|
||||
// the remove button
|
||||
(getTab(5) || getTab(4)).lastElementChild,
|
||||
];
|
||||
|
||||
triggers.forEach(t => {
|
||||
t.addEventListener('click', removeIconsOverlay);
|
||||
garbageCollector.push(t);
|
||||
})
|
||||
|
||||
// remove the icons overlay when pressing the Escape key
|
||||
document.querySelector('.notion-media-menu')
|
||||
.addEventListener('keydown', e => {
|
||||
if (e.keyCode === 27) removeIconsOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// restore overlay
|
||||
|
||||
function addRestoreButton() {
|
||||
const buttons = getTab(1).parentElement.lastElementChild;
|
||||
|
||||
const restoreButton = buttons.lastElementChild.cloneNode(true);
|
||||
restoreButton.className = 'notion-icons--restore-button';
|
||||
restoreButton.innerHTML = menuIcons.restore;
|
||||
restoreButton.addEventListener('click', renderRestoreOverlay);
|
||||
|
||||
buttons.prepend(restoreButton);
|
||||
}
|
||||
|
||||
function renderRestoreOverlay() {
|
||||
if (!store().removedSets) return;
|
||||
store().removedSets.sort();
|
||||
|
||||
const overlayContainer = createElement(`
|
||||
<div class="notion-icons--overlay-container"></div>
|
||||
`);
|
||||
overlayContainer.addEventListener('click', closeRestoreOverlay);
|
||||
document.querySelector('.notion-app-inner').appendChild(overlayContainer);
|
||||
|
||||
const rect = document.querySelector('.notion-icons--restore-button')
|
||||
.getBoundingClientRect();
|
||||
const div = createElement(`
|
||||
<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; height: ${rect.height}px;">
|
||||
<div style="position: relative; top: 100%; pointer-events: auto;"></div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const restoreOverlay = createElement(`
|
||||
<div class="notion-icons--restore"></div>
|
||||
`)
|
||||
|
||||
store().removedSets.forEach(source => {
|
||||
restoreOverlay.appendChild( renderRestoreItem(source) );
|
||||
})
|
||||
|
||||
overlayContainer.appendChild(div);
|
||||
div.firstElementChild.appendChild(restoreOverlay);
|
||||
|
||||
// fade in
|
||||
restoreOverlay.animate(
|
||||
[ {opacity: 0}, {opacity: 1} ],
|
||||
{ duration: 200 }
|
||||
);
|
||||
}
|
||||
|
||||
function renderRestoreItem(source) {
|
||||
const iconData = enhancerIconSets.get(source);
|
||||
const iconUrl = `
|
||||
${iconData.sourceUrl || (notionIconsUrl + source)}/${source}_${0}.${iconData.extension}
|
||||
`;
|
||||
const restoreItem = createElement(`
|
||||
<div class="notion-icons--removed-set">
|
||||
<div style="flex-grow: 0; flex-shrink: 0; width: 32px; height: 32px;">
|
||||
<img style="width: 100%; height: 100%" src="${iconUrl}" />
|
||||
</div>
|
||||
<span style="margin: 0 8px;">${iconData.name}</span>
|
||||
</div>
|
||||
`)
|
||||
restoreItem.addEventListener('click', () => restoreIconSet(iconData));
|
||||
return restoreItem;
|
||||
}
|
||||
|
||||
function closeRestoreOverlay() {
|
||||
const overlayContainer = document.querySelector('.notion-icons--overlay-container');
|
||||
overlayContainer.removeEventListener('click', closeRestoreOverlay);
|
||||
// fade out
|
||||
document.querySelector('.notion-icons--restore').animate(
|
||||
[ {opacity: 1}, {opacity: 0} ],
|
||||
{ duration: 200 }
|
||||
).onfinish = () => overlayContainer.remove();
|
||||
}
|
||||
|
||||
// icon set actions
|
||||
|
||||
function toggleIconSet(iconSet, hide) {
|
||||
const isHidden = iconSet.hasAttribute('hidden-set');
|
||||
if (hide == null) hide = !isHidden;
|
||||
|
||||
const body = iconSet.lastChild;
|
||||
if (hide && !isHidden) {
|
||||
iconSet.setAttribute('hidden-set', '');
|
||||
body.style.height = body.offsetHeight + 'px';
|
||||
requestAnimationFrame(
|
||||
() => body.style.height = 0
|
||||
);
|
||||
}
|
||||
else if (!hide && isHidden) {
|
||||
iconSet.removeAttribute('hidden-set');
|
||||
// get height
|
||||
body.style.height = '';
|
||||
const height = body.offsetHeight;
|
||||
body.style.height = 0;
|
||||
|
||||
requestAnimationFrame(
|
||||
() => body.style.height = height + 'px'
|
||||
);
|
||||
setTimeout(
|
||||
() => body.style.height = '', 200
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function removeIconSet(iconData) {
|
||||
if (!store().removedSets) store().removedSets = [];
|
||||
if (!store().removedSets.includes(iconData.source))
|
||||
store().removedSets.push(iconData.source);
|
||||
removeIconsOverlay();
|
||||
renderIconsOverlay();
|
||||
}
|
||||
|
||||
function restoreIconSet(iconData) {
|
||||
if (!store().removedSets) return;
|
||||
store().removedSets = store().removedSets
|
||||
.filter(source => source !== iconData.source);
|
||||
removeIconsOverlay();
|
||||
renderIconsOverlay();
|
||||
}
|
||||
|
||||
// other actions
|
||||
|
||||
// submit the icon's url as an image link
|
||||
function setPageIcon(iconUrl) {
|
||||
const input = document.querySelector('.notion-media-menu input[type=url]');
|
||||
|
||||
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype, 'value'
|
||||
).set;
|
||||
nativeInputValueSetter.call(input, iconUrl);
|
||||
|
||||
input.dispatchEvent(
|
||||
new Event('input', { bubbles: true })
|
||||
);
|
||||
|
||||
input.dispatchEvent(
|
||||
new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 })
|
||||
);
|
||||
|
||||
removeIconsOverlay();
|
||||
}
|
||||
|
||||
function filterIcons(input) {
|
||||
const iconSets = document.querySelectorAll('.notion-icons--icon-set');
|
||||
if (!iconSets) return;
|
||||
|
||||
// show all sets and icons
|
||||
if (!input) return iconSets.forEach(set => {
|
||||
set.style.display = '';
|
||||
set.querySelectorAll('.notion-icons--icon')
|
||||
.forEach(i => i.style.display = '');
|
||||
});
|
||||
// split input into an array
|
||||
else input = input.toLowerCase().trim().split(' ');
|
||||
|
||||
const findMatch = icon => {
|
||||
const iconFilters = filterMap.get(icon).slice();
|
||||
|
||||
// match whole words for the first terms
|
||||
if (input.length > 1) {
|
||||
let index;
|
||||
for (let i of input.slice(0, -1)) {
|
||||
if (
|
||||
( index = iconFilters.indexOf(i) ) >= 0
|
||||
) {
|
||||
iconFilters.splice(index, 1);
|
||||
continue;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// match partially for the last term
|
||||
for (let iconFilter of iconFilters) {
|
||||
if (iconFilter.includes(input[input.length - 1])) {
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
iconSets.forEach(set => {
|
||||
let found = false;
|
||||
|
||||
set.querySelectorAll('.notion-icons--icon')
|
||||
.forEach(i => {
|
||||
// hide icon set
|
||||
if (!filterMap.has(i)) return;
|
||||
|
||||
if (findMatch(i)) {
|
||||
i.style.display = '';
|
||||
found = true;
|
||||
} else i.style.display = 'none';
|
||||
});
|
||||
|
||||
if (!found) set.style.display = 'none';
|
||||
else {
|
||||
set.style.display = '';
|
||||
toggleIconSet(set, false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function renderTooltip(el, text) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const overlayContainer = document.querySelector('.notion-overlay-container')
|
||||
|
||||
const tooltip = createElement(`
|
||||
<div class="notion-icons--tooltip" style="left: ${rect.left}px; top: ${rect.top}px;">
|
||||
<div></div>
|
||||
</div>
|
||||
`), tooltipText = createElement(
|
||||
`<div class="notion-icons--tooltip-text">${text}</div>`
|
||||
);
|
||||
|
||||
tooltip.firstElementChild.appendChild(tooltipText);
|
||||
overlayContainer.appendChild(tooltip);
|
||||
|
||||
// prevent tooltip from rendering outside the window
|
||||
const left = (tooltipText.offsetWidth / 2) - (rect.width / 2) - rect.left + 4;
|
||||
if (left > 0) tooltipText.style.left = left + 'px';
|
||||
}
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
const overlay = document.querySelector('.notion-overlay-container');
|
||||
if (!overlay) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
for ( let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0]?.querySelector?.('.notion-media-menu') &&
|
||||
/^pointer-events: auto; position: relative; z-index: \d;$/
|
||||
.test(addedNodes[0].style.cssText)
|
||||
) {
|
||||
addIconsTab();
|
||||
}
|
||||
}
|
||||
});
|
||||
observer.observe(overlay, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// helpers
|
||||
|
||||
function getTab(n, button = false) {
|
||||
return document.querySelector(
|
||||
`.notion-media-menu > :first-child > :first-child > :nth-child(${n}) ${button ? 'div' : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
function isCurrentTab(n) {
|
||||
return getTab(n).childNodes.length > 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
/*
|
||||
* outliner
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.outliner {
|
||||
max-height: 100%;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.outline-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.2em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in;
|
||||
}
|
||||
.outline-header:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.outline-header .outline-link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 14px;
|
||||
line-height: 2.2;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.outline-header .outline-link:empty:before {
|
||||
color: var(--theme--text_ui_info);
|
||||
content: attr(outline-placeholder);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.outline-header[header-level="2"] .outline-link {
|
||||
text-indent: 18px;
|
||||
}
|
||||
.outline-header[header-level="3"] .outline-link {
|
||||
text-indent: 36px;
|
||||
}
|
||||
|
||||
.outliner[lined] .outline-header:not([header-level="1"])::before {
|
||||
content: "";
|
||||
border-left: solid 1px var(--theme--text_ui_info);
|
||||
height: 2.2em;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.outliner[lined] .outline-header[header-level="3"]::before {
|
||||
border-right: solid 1px var(--theme--text_ui_info);
|
||||
width: 18px;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<circle cx="5" cy="7" r="2.8"/>
|
||||
<circle cx="5" cy="17" r="2.79"/>
|
||||
<path d="M21,5.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,5.5,21.55,5.95,21,5.95z"/>
|
||||
<path d="M17,10.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,9.6,17.55,10.05,17,10.05z"/>
|
||||
<path d="M21,15.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,15.5,21.55,15.95,21,15.95z" />
|
||||
<path d="M17,20.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,19.6,17.55,20.05,17,20.05z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 633 B |
@ -1,40 +0,0 @@
|
||||
/*
|
||||
* outliner
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const store = require("../../pkg/store");
|
||||
|
||||
module.exports = {
|
||||
id: '87e077cc-5402-451c-ac70-27cc4ae65546',
|
||||
tags: ['extension', 'panel'],
|
||||
name: 'outliner',
|
||||
desc: 'table of contents.',
|
||||
version: '1.2.1',
|
||||
author: 'CloudHill',
|
||||
options: [
|
||||
{
|
||||
key: 'lined',
|
||||
label: 'indentation lines',
|
||||
type: 'toggle',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
key: 'fullHeight',
|
||||
label: 'full height',
|
||||
type: 'toggle',
|
||||
value: false
|
||||
}
|
||||
],
|
||||
panel: {
|
||||
html: "panel.html",
|
||||
name: "Outline",
|
||||
icon: "icon.svg",
|
||||
js: "panel.js",
|
||||
fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight,
|
||||
}
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
<div class="outliner"></div>
|
||||
@ -1,161 +0,0 @@
|
||||
/*
|
||||
* outliner
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require("../../pkg/helpers");
|
||||
|
||||
module.exports = (store, __exports) => {
|
||||
let lastSearch;
|
||||
|
||||
// Observe for page changes
|
||||
const pageObserver = new MutationObserver((list, observer) => {
|
||||
for ( let { addedNodes } of list) {
|
||||
if (addedNodes[0]) {
|
||||
if (addedNodes[0].className === 'notion-page-content') {
|
||||
startContentObserver();
|
||||
}
|
||||
// Clear outline on database pages
|
||||
else if (addedNodes[0].className === 'notion-scroller') {
|
||||
contentObserver.disconnect();
|
||||
const outline = document.querySelector('.outliner');
|
||||
if (outline) outline.textContent = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Observe for header changes
|
||||
const contentObserver = new MutationObserver((list, observer) => {
|
||||
list.forEach(m => {
|
||||
let header;
|
||||
if (
|
||||
(
|
||||
m.type === 'childList' &&
|
||||
(
|
||||
m.target.hasAttribute('placeholder') ||
|
||||
m.target.className?.includes('header-block')
|
||||
) &&
|
||||
(
|
||||
(header = getHeaderBlock(m.target)) ||
|
||||
(header = getHeaderBlock(m.addedNodes[0]))
|
||||
)
|
||||
) ||
|
||||
(
|
||||
m.type === 'characterData' &&
|
||||
(header = getHeaderBlock(m.target.parentElement))
|
||||
)
|
||||
) updateOutlineHeader(header);
|
||||
|
||||
else if (
|
||||
m.type === 'childList' && m.removedNodes[0] &&
|
||||
(
|
||||
isHeaderElement(m.removedNodes[0]) ||
|
||||
m.removedNodes[0].querySelector?.('[class*="header-block"]')
|
||||
)
|
||||
) findHeaders();
|
||||
})
|
||||
});
|
||||
|
||||
function startContentObserver() {
|
||||
findHeaders();
|
||||
contentObserver.disconnect();
|
||||
contentObserver.observe(
|
||||
document.querySelector('.notion-page-content'),
|
||||
{
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function findHeaders() {
|
||||
// Add cooldown to prevent the function being run twice at the 'same' time
|
||||
if (lastSearch >= (Date.now() - 10)) return;
|
||||
lastSearch = Date.now();
|
||||
|
||||
const outline = document.querySelector('.outliner');
|
||||
if (!outline) return;
|
||||
outline.textContent = '';
|
||||
|
||||
const pageContent = document.querySelector('.notion-page-content'),
|
||||
headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
|
||||
fragment = new DocumentFragment();
|
||||
|
||||
headerBlocks.forEach(header => {
|
||||
const blockId = header.dataset.blockId.replace(/-/g, ''),
|
||||
headerEl = header.querySelector('[placeholder]'),
|
||||
placeholder = headerEl.getAttribute('placeholder');
|
||||
|
||||
const outlineHeader = createElement(`
|
||||
<div class="outline-header" header-level="${placeholder.slice(-1)}">
|
||||
<a href="${window.location.pathname}#${blockId}" class="outline-link"
|
||||
outline-placeholder="${placeholder}"></a>
|
||||
</div>
|
||||
`);
|
||||
header.outline = outlineHeader;
|
||||
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
|
||||
|
||||
fragment.appendChild(outlineHeader);
|
||||
})
|
||||
|
||||
outline.appendChild(fragment);
|
||||
}
|
||||
|
||||
function updateOutlineHeader(header) {
|
||||
const headerEl = header.querySelector('[placeholder]');
|
||||
if (!(
|
||||
headerEl &&
|
||||
header.outline?.parentElement
|
||||
)) return findHeaders();
|
||||
const outlineHeader = header.outline;
|
||||
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
|
||||
setOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
|
||||
}
|
||||
|
||||
function setOutlineLevel(outlineHeader, level) {
|
||||
outlineHeader.setAttribute('header-level', level);
|
||||
outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
|
||||
}
|
||||
|
||||
function getHeaderBlock(el) {
|
||||
return el?.closest?.('[class*="header-block"]');
|
||||
}
|
||||
|
||||
function isHeaderElement(el) {
|
||||
let placeholder;
|
||||
if (el) {
|
||||
placeholder = el.getAttribute?.('placeholder') ||
|
||||
el.querySelector?.('[placeholder]')?.getAttribute('placeholder');
|
||||
}
|
||||
if (!placeholder) placeholder = '';
|
||||
return placeholder.includes('Heading');
|
||||
}
|
||||
|
||||
return {
|
||||
onLoad() {
|
||||
if (store().lined) {
|
||||
const outline = document.querySelector('.outliner');
|
||||
outline?.setAttribute('lined', '');
|
||||
}
|
||||
|
||||
// Find headers when switching panels
|
||||
if (document.querySelector('.notion-page-content')) {
|
||||
startContentObserver();
|
||||
};
|
||||
pageObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
},
|
||||
onSwitch() {
|
||||
pageObserver.disconnect();
|
||||
contentObserver.disconnect();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
/*
|
||||
* pastel dark
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],
|
||||
.notion-dark-theme
|
||||
img[src*='/images/onboarding/team-features-illustration.png'] {
|
||||
filter: invert(1) !important;
|
||||
}
|
||||
.notion-dark-theme img[src*='/images/onboarding/checked.svg'] {
|
||||
filter: hue-rotate(45deg) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'],
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] {
|
||||
transition: filter 0.4s ease !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover,
|
||||
.notion-dark-theme
|
||||
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
[style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] {
|
||||
filter: hue-rotate(170deg) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-token-remove-button[role*='button'][tabindex*='0']:hover,
|
||||
.notion-dark-theme .notion-record-icon {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-focusable:focus-within,
|
||||
.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'],
|
||||
.notion-dark-theme div[role='button'],
|
||||
[style*='height: 4px;']
|
||||
> .notion-selectable.notion-collection_view_page-block
|
||||
> *,
|
||||
.notion-dark-theme
|
||||
.notion-calendar-view-day[style*='background: rgb(235, 87, 87);'],
|
||||
.DayPicker-Day--today,
|
||||
.notion-dark-theme
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day--outside:hover,
|
||||
.notion-dark-theme
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value)
|
||||
.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
|
||||
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
|
||||
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
|
||||
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(63, 68, 71);'],
|
||||
.notion-dark-theme
|
||||
[style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
|
||||
.notion-dark-theme
|
||||
[style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'],
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'],
|
||||
.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'],
|
||||
.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
|
||||
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
/*
|
||||
* pastel dark
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '033bff54-50ba-4cec-bdc0-b2ca7e307085',
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'pastel dark',
|
||||
desc: 'a smooth-transition true dark theme with a hint of pastel.',
|
||||
version: '0.1.4',
|
||||
author: {
|
||||
name: 'zenith_illinois',
|
||||
link: 'https://www.reddit.com/user/zenith_illinois/',
|
||||
avatar: 'https://www.redditstatic.com/avatars/avatar_default_18_46A508.png',
|
||||
},
|
||||
};
|
||||
@ -1,119 +0,0 @@
|
||||
/*
|
||||
* pastel dark
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import 'https://rsms.me/inter/inter.css';
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #0b0b0b;
|
||||
--theme_dark--sidebar: #0f0f0f;
|
||||
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
|
||||
--theme_dark--dragarea: #0d0d0d;
|
||||
|
||||
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
|
||||
--theme_dark--scrollbar: #141414;
|
||||
--theme_dark--scrollbar_hover: #1b1b1b;
|
||||
|
||||
--theme_dark--card: #0f0f0f;
|
||||
--theme_dark--gallery: rgba(8, 8, 8, 0.05);
|
||||
--theme_dark--select_input: #0d0d0d;
|
||||
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
|
||||
--theme_dark--ui-border: var(--theme_dark--table-border);
|
||||
--theme_dark--interactive_hover: #1e1e1e5c;
|
||||
--theme_dark--button_close: #eb5757;
|
||||
|
||||
--theme_dark--selected: rgba(184, 135, 247, 0.3);
|
||||
--theme_dark--primary: #b887f7;
|
||||
--theme_dark--primary_hover: #08d7c2;
|
||||
--theme_dark--primary_click: #b887f7;
|
||||
--theme_dark--primary_indicator: #08d7c2;
|
||||
|
||||
--theme_dark--option_active-background: var(--theme_dark--primary);
|
||||
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
|
||||
|
||||
--theme_dark--danger_text: #eb5757;
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark--text: #ffffff;
|
||||
--theme_dark--text_ui: #909090;
|
||||
--theme_dark--text_ui_info: #464646;
|
||||
|
||||
--theme_dark--text_gray: #b1aeab;
|
||||
--theme_dark--text_brown: #d8b6a6;
|
||||
--theme_dark--text_orange: #fde3c0;
|
||||
--theme_dark--text_yellow: #fcde93;
|
||||
--theme_dark--text_green: #b3f5c8;
|
||||
--theme_dark--text_blue: #bfe0fd;
|
||||
--theme_dark--text_purple: #dac7fa;
|
||||
--theme_dark--text_pink: #f7b8dc;
|
||||
--theme_dark--text_red: #f8acb4;
|
||||
|
||||
--theme_dark--bg-text: rgb(55, 53, 47);
|
||||
--theme_dark--bg_gray: #b1aeab;
|
||||
--theme_dark--bg_brown: #d8b6a6;
|
||||
--theme_dark--bg_orange: #fde3c0;
|
||||
--theme_dark--bg_yellow: #fcde93;
|
||||
--theme_dark--bg_green: #b3f5c8;
|
||||
--theme_dark--bg_blue: #bfe0fd;
|
||||
--theme_dark--bg_purple: #dac7fa;
|
||||
--theme_dark--bg_pink: #f7b8dc;
|
||||
--theme_dark--bg_red: #f8acb4;
|
||||
|
||||
--theme_dark--line-text: rgb(34, 34, 34);
|
||||
--theme_dark--line_gray: #c2c1c089;
|
||||
--theme_dark--line_brown: #dacec992;
|
||||
--theme_dark--line_orange: #fff0dc9f;
|
||||
--theme_dark--line_yellow: #ffe6a6ad;
|
||||
--theme_dark--line_green: #c8fdd9a3;
|
||||
--theme_dark--line_blue: #d1e9ffa3;
|
||||
--theme_dark--line_purple: #e3d3ffa8;
|
||||
--theme_dark--line_pink: #fdcce8b1;
|
||||
--theme_dark--line_red: #ffc8ce9e;
|
||||
|
||||
--theme_dark--select-text: var(--theme_dark--bg-text);
|
||||
--theme_dark--select_gray: var(--theme_dark--bg_gray);
|
||||
--theme_dark--select_brown: var(--theme_dark--bg_brown);
|
||||
--theme_dark--select_orange: var(--theme_dark--bg_orange);
|
||||
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme_dark--select_green: var(--theme_dark--bg_green);
|
||||
--theme_dark--select_blue: var(--theme_dark--bg_blue);
|
||||
--theme_dark--select_purple: var(--theme_dark--bg_purple);
|
||||
--theme_dark--select_pink: var(--theme_dark--bg_pink);
|
||||
--theme_dark--select_red: var(--theme_dark--bg_red);
|
||||
|
||||
--theme_dark--callout-text: var(--theme_dark--line-text);
|
||||
--theme_dark--callout_gray: var(--theme_dark--line_gray);
|
||||
--theme_dark--callout_brown: var(--theme_dark--line_brown);
|
||||
--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--code_inline-text: #b3f5c8;
|
||||
--theme_dark--code_inline-background: rgb(8, 8, 8);
|
||||
--theme_dark--code-text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: #0f0f0f;
|
||||
--theme_dark--code_function: var(--theme_dark--text_blue);
|
||||
--theme_dark--code_keyword: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_tag: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_operator: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_important: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_property: var(--theme_dark--text_pink);
|
||||
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
|
||||
--theme_dark--code_comment: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_doctype: var(--theme_dark--text_gray);
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* Pinky Booooom Theme!
|
||||
* (c) 2020 mugiwarafx (https://github.com/mugiwarafx)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: "fbef391c-58ff-4938-bd45-b85ae0435e4e",
|
||||
name: "pinky boom theme",
|
||||
tags: ['theme', 'light', 'pink'],
|
||||
desc: "pinkify your light theme",
|
||||
version: "1.0.0",
|
||||
author: "mugiwarafx",
|
||||
};
|
||||
@ -1,384 +0,0 @@
|
||||
/*
|
||||
* Pinky Booooom Theme!
|
||||
* (c) 2020 mugiwarafx (https://github.com/mugiwarafx)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
/** light **/
|
||||
|
||||
--light_pinky-deep-pink: deeppink;
|
||||
|
||||
--light_pinky-lighten-1: #fce4ec;
|
||||
--light_pinky-lighten-2: #f8bbd0;
|
||||
--light_pinky-lighten-3: #f48fb1;
|
||||
--light_pinky-lighten-4: #ff80ab;
|
||||
|
||||
--light_pinky-darken: #880e4f;
|
||||
|
||||
--light_pinky-alt-colors-white: #fefafa;
|
||||
--light_pinky-alt-colors-transparent: transparent;
|
||||
|
||||
--light_pinky-deep-purple: #1e114e;
|
||||
|
||||
--light_pinky-trans-purple-1: #37352f06;
|
||||
--light_pinky-trans-purple-2: #8868ff1a;
|
||||
--light_pinky-trans-purple-3: #880e4f38;
|
||||
--light_pinky-trans-purple-4: #8968ff42;
|
||||
|
||||
--light_pinky-trans-1: #ffc0cb61;
|
||||
--light_pinky-trans-2: #ffc0cb96;
|
||||
--light_pinky-trans-3: #ffc0cbb8;
|
||||
--light_pinky-trans-4: #ffc0cbda;
|
||||
--light_pinky-trans-5: #ffb6c175;
|
||||
--light_pinky-trans-6: #ffc0cb99;
|
||||
|
||||
--light_pinky-brown: #a52a2a80;
|
||||
--light_pinky-orange: #ffa60080;
|
||||
--light_pinky-yellow: #ffff0080;
|
||||
--light_pinky-green: #00ff0080;
|
||||
--light_pinky-blue: #00ffff80;
|
||||
--light_pinky-purple: #9b00ff80;
|
||||
--light_pinky-pink: #ff149180;
|
||||
--light_pinky-red: #ff000080;
|
||||
--light_pinky-black: black;
|
||||
--light_pinky-white: white;
|
||||
|
||||
--theme_light--main: var(--light_pinky-alt-colors-white);
|
||||
--theme_light--sidebar: var(--light_pinky-alt-colors-transparent);
|
||||
--theme_light--overlay: var(--light_pinky-trans-6);
|
||||
--theme_light--dragarea: var(--light_pinky-lighten-1);
|
||||
--theme_light--box-shadow: var(--light_pinky-trans-1) 0px 0px 0px 1px, var(--light_pinky-trans-1) 0px 2px 4px;
|
||||
--theme_light--box-shadow_strong: var(--light_pinky-trans-4) 0px 0px 0px 1px, var(--light_pinky-trans-2) 0px 3px 6px, var(--light_pinky-trans-3) 0px 9px 24px;
|
||||
|
||||
--theme_light--page_normal-width: 900px;
|
||||
--theme_light--page_full-width: 100%;
|
||||
--theme_light--page-padding: calc(96px + env(safe-area-inset-left));
|
||||
--theme_light--page_banner-height: 30vh;
|
||||
--theme_light--preview-width: 977px;
|
||||
--theme_light--preview-padding: 8rem;
|
||||
--theme_light--preview_banner-height: 20vh;
|
||||
|
||||
--theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--theme_light--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_light--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--theme_light--font_quote: var(--theme_light--font_sans);
|
||||
--theme_light--font_headings: var(--theme_light--font_sans);
|
||||
--theme_light--font_title-size: 40px;
|
||||
--theme_light--font_heading1-size: 1.875em;
|
||||
--theme_light--font_heading2-size: 1.5em;
|
||||
--theme_light--font_heading3-size: 1.25em;
|
||||
--theme_light--font_label-size: 14px;
|
||||
--theme_light--font_body-size: 16px;
|
||||
--theme_light--font_body-size_small: 14px;
|
||||
--theme_light--font_code-size: 0.796875em;
|
||||
--theme_light--font_sidebar-size: 14px;
|
||||
--theme_light--text-block_line-height: 1.5;
|
||||
--theme_light--text-block_margin-top: 1px;
|
||||
|
||||
--theme_light--scrollbar: var(--light_pinky-lighten-3);
|
||||
--theme_light--scrollbar-border: var(--theme_pinky--helpers-transparent);
|
||||
--theme_light--scrollbar_hover: var(--light_pinky-lighten-2);
|
||||
--theme_light--card: var(--light_pinky-lighten-1);
|
||||
--theme_light--gallery: var(--light_pinky-trans-purple-1);
|
||||
--theme_light--select_input: var(--light_pinky-trans-purple-2);
|
||||
--theme_light--table-border: var(--light_pinky-trans-purple-2);
|
||||
--theme_light--ui-border: var(--light_pinky-trans-purple-2);
|
||||
--theme_light--interactive_hover: var(--light_pinky-trans-purple-4);
|
||||
--theme_light--interactive_hover-border: var(--light_pinky-alt-colors-transparent);
|
||||
--theme_light--button_close: #e81123;
|
||||
--theme_light--button_close-fill: var(--light_pinky-white);
|
||||
--theme_light--selected: var(--light_pinky-trans-purple-4);
|
||||
--theme_light--primary: var(--light_pinky-deep-pink);
|
||||
--theme_light--primary_hover: var(--light_pinky-lighten-4);
|
||||
--theme_light--primary_click: var(--light_pinky-lighten-4);
|
||||
--theme_light--primary_indicator: rgb(235, 87, 87);
|
||||
--theme_light--option-color: var(--light_pinky-darken);
|
||||
--theme_light--option-background: var(--light_pinky-alt-colors-transparent);
|
||||
--theme_light--option_hover-color: var(--light_pinky-darken);
|
||||
--theme_light--option_hover-background: var(--light_pinky-trans-purple-3);
|
||||
--theme_light--option_active-color: var(--light_pinky-white);
|
||||
--theme_light--option_active-background: var(--theme_light--primary);
|
||||
--theme_light--danger_text: rgb(235, 87, 87);
|
||||
--theme_light--danger_border: rgba(235, 87, 87, 0.5);
|
||||
--theme_light--text: var(--theme_light--text);
|
||||
--theme_light--text_ui: var(--light_pinky-deep-purple);
|
||||
--theme_light--text_ui_info: var(--light_pinky-deep-pink);
|
||||
|
||||
--theme_light--text_gray: rgb(155, 154, 151);
|
||||
--theme_light--text_brown: rgb(100, 71, 58);
|
||||
--theme_light--text_orange: rgb(217, 115, 13);
|
||||
--theme_light--text_yellow: rgb(223, 171, 1);
|
||||
--theme_light--text_green: rgb(15, 123, 108);
|
||||
--theme_light--text_blue: rgb(11, 110, 153);
|
||||
--theme_light--text_purple: var(--light_pinky-purple);
|
||||
--theme_light--text_pink: var(--light_pinky-deep-pink);
|
||||
--theme_light--text_red: rgb(224, 62, 62);
|
||||
|
||||
--theme_light--bg-text: var(--theme_light--text);
|
||||
--theme_light--bg_gray: rgba(128, 128, 128, 0.25);
|
||||
--theme_light--bg_gray-text: var(--theme_light--bg-text);
|
||||
--theme_light--bg_brown: var(--light_pinky-brown);
|
||||
--theme_light--bg_brown-text: var(--theme_light--bg-text);
|
||||
--theme_light--bg_orange: var(--light_pinky-orange);
|
||||
--theme_light--bg_orange-text: var(--light_pinky-black);
|
||||
--theme_light--bg_yellow: var(--light_pinky-yellow);
|
||||
--theme_light--bg_yellow-text: var(--light_pinky-black);
|
||||
--theme_light--bg_green: var(--light_pinky-green);
|
||||
--theme_light--bg_green-text: var(--light_pinky-black);
|
||||
--theme_light--bg_blue: var(--light_pinky-blue);
|
||||
--theme_light--bg_blue-text: var(--light_pinky-black);
|
||||
--theme_light--bg_purple: var(--light_pinky-purple);
|
||||
--theme_light--bg_purple-text: var(--light_pinky-white);
|
||||
--theme_light--bg_pink: var(--light_pinky-pink);
|
||||
--theme_light--bg_pink-text: var(--light_pinky-white);
|
||||
--theme_light--bg_red: var(--light_pinky-red);
|
||||
--theme_light--bg_red-text: var(--theme_light--bg-text);
|
||||
|
||||
--theme_light--line-text: var(--theme_light--text);
|
||||
--theme_light--line_gray: rgba(128, 128, 128, 0.5);
|
||||
--theme_light--line_gray-text: var(--theme_light--line-text);
|
||||
--theme_light--line_brown: var(--light_pinky-brown);
|
||||
--theme_light--line_brown-text: var(--theme_light--line-text);
|
||||
--theme_light--line_orange: var(--light_pinky-orange);
|
||||
--theme_light--line_orange-text: var(--theme_light--line-text);
|
||||
--theme_light--line_yellow: var(--light_pinky-yellow);
|
||||
--theme_light--line_yellow-text: var(--theme_light--line-text);
|
||||
--theme_light--line_green: var(--light_pinky-green);
|
||||
--theme_light--line_green-text: var(--theme_light--line-text);
|
||||
--theme_light--line_blue: var(--light_pinky-blue);
|
||||
--theme_light--line_blue-text: var(--theme_light--line-text);
|
||||
--theme_light--line_purple: var(--light_pinky-purple);
|
||||
--theme_light--line_purple-text: var(--theme_light--line-text);
|
||||
--theme_light--line_pink: var(--light_pinky-pink);
|
||||
--theme_light--line_pink-text: var(--theme_light--line-text);
|
||||
--theme_light--line_red: var(--light_pinky-red);
|
||||
--theme_light--line_red-text: var(--theme_light--line-text);
|
||||
|
||||
--theme_light--select-text: var(--theme_light--text);
|
||||
--theme_light--select_gray: rgba(128, 128, 128, 0.25);
|
||||
--theme_light--select_gray-text: var(--light_pinky-white);
|
||||
--theme_light--select_brown: var(--light_pinky-brown);
|
||||
--theme_light--select_brown-text: var(--light_pinky-white);
|
||||
--theme_light--select_orange: var(--light_pinky-orange);
|
||||
--theme_light--select_orange-text: var(--light_pinky-black);
|
||||
--theme_light--select_yellow: var(--light_pinky-yellow);
|
||||
--theme_light--select_yellow-text: var(--light_pinky-black);
|
||||
--theme_light--select_green: var(--light_pinky-green);
|
||||
--theme_light--select_green-text: var(--light_pinky-black);
|
||||
--theme_light--select_blue: var(--light_pinky-blue);
|
||||
--theme_light--select_blue-text: var(--light_pinky-black);
|
||||
--theme_light--select_purple: var(--light_pinky-purple);
|
||||
--theme_light--select_purple-text: var(--light_pinky-white);
|
||||
--theme_light--select_pink: var(--light_pinky-pink);
|
||||
--theme_light--select_pink-text: var(--light_pinky-white);
|
||||
--theme_light--select_red: var(--light_pinky-red);
|
||||
--theme_light--select_red-text: var(--light_pinky-white);
|
||||
|
||||
--theme_light--callout-text: var(--theme_light--text);
|
||||
--theme_light--callout_gray: rgba(128, 128, 128, 0.25);
|
||||
--theme_light--callout_gray-text: var(--light_pinky-black);
|
||||
--theme_light--callout_brown: var(--light_pinky-brown);
|
||||
--theme_light--callout_brown-text: var(--light_pinky-white);
|
||||
--theme_light--callout_orange: var(--light_pinky-orange);
|
||||
--theme_light--callout_orange-text: var(--light_pinky-black);
|
||||
--theme_light--callout_yellow: var(--light_pinky-yellow);
|
||||
--theme_light--callout_yellow-text: var(--light_pinky-black);
|
||||
--theme_light--callout_green: var(--light_pinky-green);
|
||||
--theme_light--callout_green-text: var(--light_pinky-black);
|
||||
--theme_light--callout_blue: var(--light_pinky-blue);
|
||||
--theme_light--callout_blue-text: var(--light_pinky-black);
|
||||
--theme_light--callout_purple: var(--light_pinky-purple);
|
||||
--theme_light--callout_purple-text: var(--light_pinky-white);
|
||||
--theme_light--callout_pink: var(--light_pinky-pink);
|
||||
--theme_light--callout_pink-text: var(--light_pinky-white);
|
||||
--theme_light--callout_red: var(--light_pinky-red);
|
||||
--theme_light--callout_red-text: var(--light_pinky-white);
|
||||
|
||||
--theme_light--code_inline-text: #eb5757;
|
||||
--theme_light--code_inline-background: rgba(135, 131, 120, 0.15);
|
||||
--theme_light--code-text: var(--theme_light--text);
|
||||
--theme_light--code-background: #8868ff1f;
|
||||
--theme_light--code_function: #dd4a68;
|
||||
--theme_light--code_keyword: #07a;
|
||||
--theme_light--code_tag: #905;
|
||||
--theme_light--code_operator: #9a6e3a;
|
||||
--theme_light--code_important: #e90;
|
||||
--theme_light--code_property: #905;
|
||||
--theme_light--code_builtin: #690;
|
||||
--theme_light--code_attr-name: #690;
|
||||
--theme_light--code_comment: slategray;
|
||||
--theme_light--code_punctuation: #999;
|
||||
--theme_light--code_doctype: slategray;
|
||||
--theme_light--code_number: #905;
|
||||
--theme_light--code_string: #690;
|
||||
--theme_light--code_attr-value: #07a;
|
||||
}
|
||||
|
||||
.notion-light-theme {
|
||||
--theme--main: var(--theme_light--main);
|
||||
--theme--sidebar: var(--theme_light--sidebar);
|
||||
--theme--overlay: var(--theme_light--overlay);
|
||||
--theme--dragarea: var(--theme_light--dragarea);
|
||||
--theme--box-shadow: var(--theme_light--box-shadow);
|
||||
--theme--box-shadow_strong: var(--theme_light--box-shadow_strong);
|
||||
--theme--page_normal-width: var(--theme_light--page_normal-width);
|
||||
--theme--page_full-width: var(--theme_light--page_full-width);
|
||||
--theme--page-padding: var(--theme_light--page-padding);
|
||||
--theme--page_banner-height: var(--theme_light--page_banner-height);
|
||||
--theme--preview-width: var(--theme_light--preview-width);
|
||||
--theme--preview-padding: var(--theme_light--preview-padding);
|
||||
--theme--preview_banner-height: var(--theme_light--preview_banner-height);
|
||||
--theme--font_sans: var(--theme_light--font_sans);
|
||||
--theme--font_serif: var(--theme_light--font_serif);
|
||||
--theme--font_mono: var(--theme_light--font_mono);
|
||||
--theme--font_code: var(--theme_light--font_code);
|
||||
--theme--font_quote: var(--theme_light--font_quote);
|
||||
--theme--font_headings: var(--theme_light--font_headings);
|
||||
--theme--font_title-size: var(--theme_light--font_title-size);
|
||||
--theme--font_heading1-size: var(--theme_light--font_heading1-size);
|
||||
--theme--font_heading2-size: var(--theme_light--font_heading2-size);
|
||||
--theme--font_heading3-size: var(--theme_light--font_heading3-size);
|
||||
--theme--font_label-size: var(--theme_light--font_label-size);
|
||||
--theme--font_body-size: var(--theme_light--font_body-size);
|
||||
--theme--font_body-size_small: var(--theme_light--font_body-size_small);
|
||||
--theme--font_code-size: var(--theme_light--font_code-size);
|
||||
--theme--font_sidebar-size: var(--theme_light--font_sidebar-size);
|
||||
--theme--text-block_line-height: var(--theme_light--text-block_line-height);
|
||||
--theme--text-block_margin-top: var(--theme_light--text-block_margin-top);
|
||||
--theme--scrollbar: var(--theme_light--scrollbar);
|
||||
--theme--scrollbar-border: var(--theme_light--scrollbar-border);
|
||||
--theme--scrollbar_hover: var(--theme_light--scrollbar_hover);
|
||||
--theme--card: var(--theme_light--card);
|
||||
--theme--gallery: var(--theme_light--gallery);
|
||||
--theme--select_input: var(--theme_light--select_input);
|
||||
--theme--table-border: var(--theme_light--table-border);
|
||||
--theme--ui-border: var(--theme_light--ui-border);
|
||||
--theme--interactive_hover: var(--theme_light--interactive_hover);
|
||||
--theme--interactive_hover-border: var(--theme_light--interactive_hover-border);
|
||||
--theme--button_close: var(--theme_light--button_close);
|
||||
--theme--button_close-fill: var(--theme_light--button_close-fill);
|
||||
--theme--selected: var(--theme_light--selected);
|
||||
--theme--primary: var(--theme_light--primary);
|
||||
--theme--primary_hover: var(--theme_light--primary_hover);
|
||||
--theme--primary_click: var(--theme_light--primary_click);
|
||||
--theme--primary_indicator: var(--theme_light--primary_indicator);
|
||||
--theme--option-color: var(--theme_light--option-color);
|
||||
--theme--option-background: var(--theme_light--option-background);
|
||||
--theme--option_hover-color: var(--theme_light--option_hover-color);
|
||||
--theme--option_hover-background: var(--theme_light--option_hover-background);
|
||||
--theme--option_active-color: var(--theme_light--option_active-color);
|
||||
--theme--option_active-background: var(--theme_light--option_active-background);
|
||||
--theme--danger_text: var(--theme_light--danger_text);
|
||||
--theme--danger_border: var(--theme_light--danger_border);
|
||||
--theme--text: var(--theme_light--text);
|
||||
--theme--text_ui: var(--theme_light--text_ui);
|
||||
--theme--text_ui_info: var(--theme_light--text_ui_info);
|
||||
--theme--text_gray: var(--theme_light--text_gray);
|
||||
--theme--text_brown: var(--theme_light--text_brown);
|
||||
--theme--text_orange: var(--theme_light--text_orange);
|
||||
--theme--text_yellow: var(--theme_light--text_yellow);
|
||||
--theme--text_green: var(--theme_light--text_green);
|
||||
--theme--text_blue: var(--theme_light--text_blue);
|
||||
--theme--text_purple: var(--theme_light--text_purple);
|
||||
--theme--text_pink: var(--theme_light--text_pink);
|
||||
--theme--text_red: var(--theme_light--text_red);
|
||||
--theme--select-text: var(--theme_light--select-text);
|
||||
--theme--bg-text: var(--theme_light--bg-text);
|
||||
--theme--bg_gray: var(--theme_light--bg_gray);
|
||||
--theme--bg_gray-text: var(--theme_light--bg_gray-text);
|
||||
--theme--bg_brown: var(--theme_light--bg_brown);
|
||||
--theme--bg_brown-text: var(--theme_light--bg_brown-text);
|
||||
--theme--bg_orange: var(--theme_light--bg_orange);
|
||||
--theme--bg_orange-text: var(--theme_light--bg_orange-text);
|
||||
--theme--bg_yellow: var(--theme_light--bg_yellow);
|
||||
--theme--bg_yellow-text: var(--theme_light--bg_yellow-text);
|
||||
--theme--bg_green: var(--theme_light--bg_green);
|
||||
--theme--bg_green-text: var(--theme_light--bg_green-text);
|
||||
--theme--bg_blue: var(--theme_light--bg_blue);
|
||||
--theme--bg_blue-text: var(--theme_light--bg_blue-text);
|
||||
--theme--bg_purple: var(--theme_light--bg_purple);
|
||||
--theme--bg_purple-text: var(--theme_light--bg_purple-text);
|
||||
--theme--bg_pink: var(--theme_light--bg_pink);
|
||||
--theme--bg_pink-text: var(--theme_light--bg_pink-text);
|
||||
--theme--bg_red: var(--theme_light--bg_red);
|
||||
--theme--bg_red-text: var(--theme_light--bg_red-text);
|
||||
--theme--line-text: var(--theme_light--line-text);
|
||||
--theme--line_gray: var(--theme_light--line_gray);
|
||||
--theme--line_gray-text: var(--theme_light--line_gray-text);
|
||||
--theme--line_brown: var(--theme_light--line_brown);
|
||||
--theme--line_brown-text: var(--theme_light--line_brown-text);
|
||||
--theme--line_orange: var(--theme_light--line_orange);
|
||||
--theme--line_orange-text: var(--theme_light--line_orange-text);
|
||||
--theme--line_yellow: var(--theme_light--line_yellow);
|
||||
--theme--line_yellow-text: var(--theme_light--line_yellow-text);
|
||||
--theme--line_green: var(--theme_light--line_green);
|
||||
--theme--line_green-text: var(--theme_light--line_green-text);
|
||||
--theme--line_blue: var(--theme_light--line_blue);
|
||||
--theme--line_blue-text: var(--theme_light--line_blue-text);
|
||||
--theme--line_purple: var(--theme_light--line_purple);
|
||||
--theme--line_purple-text: var(--theme_light--line_purple-text);
|
||||
--theme--line_pink: var(--theme_light--line_pink);
|
||||
--theme--line_pink-text: var(--theme_light--line_pink-text);
|
||||
--theme--line_red: var(--theme_light--line_red);
|
||||
--theme--line_red-text: var(--theme_light--line_red-text);
|
||||
--theme--select_gray: var(--theme_light--select_gray);
|
||||
--theme--select_gray-text: var(--theme_light--select_gray-text);
|
||||
--theme--select_brown: var(--theme_light--select_brown);
|
||||
--theme--select_brown-text: var(--theme_light--select_brown-text);
|
||||
--theme--select_orange: var(--theme_light--select_orange);
|
||||
--theme--select_orange-text: var(--theme_light--select_orange-text);
|
||||
--theme--select_yellow: var(--theme_light--select_yellow);
|
||||
--theme--select_yellow-text: var(--theme_light--select_yellow-text);
|
||||
--theme--select_green: var(--theme_light--select_green);
|
||||
--theme--select_green-text: var(--theme_light--select_green-text);
|
||||
--theme--select_blue: var(--theme_light--select_blue);
|
||||
--theme--select_blue-text: var(--theme_light--select_blue-text);
|
||||
--theme--select_purple: var(--theme_light--select_purple);
|
||||
--theme--select_purple-text: var(--theme_light--select_purple-text);
|
||||
--theme--select_pink: var(--theme_light--select_pink);
|
||||
--theme--select_pink-text: var(--theme_light--select_pink-text);
|
||||
--theme--select_red: var(--theme_light--select_red);
|
||||
--theme--select_red-text: var(--theme_light--select_red-text);
|
||||
--theme--callout-text: var(--theme_light--callout-text);
|
||||
--theme--callout_gray: var(--theme_light--callout_gray);
|
||||
--theme--callout_gray-text: var(--theme_light--callout_gray-text);
|
||||
--theme--callout_brown: var(--theme_light--callout_brown);
|
||||
--theme--callout_brown-text: var(--theme_light--callout_brown-text);
|
||||
--theme--callout_orange: var(--theme_light--callout_orange);
|
||||
--theme--callout_orange-text: var(--theme_light--callout_orange-text);
|
||||
--theme--callout_yellow: var(--theme_light--callout_yellow);
|
||||
--theme--callout_yellow-text: var(--theme_light--callout_yellow-text);
|
||||
--theme--callout_green: var(--theme_light--callout_green);
|
||||
--theme--callout_green-text: var(--theme_light--callout_green-text);
|
||||
--theme--callout_blue: var(--theme_light--callout_blue);
|
||||
--theme--callout_blue-text: var(--theme_light--callout_blue-text);
|
||||
--theme--callout_purple: var(--theme_light--callout_purple);
|
||||
--theme--callout_purple-text: var(--theme_light--callout_purple-text);
|
||||
--theme--callout_pink: var(--theme_light--callout_pink);
|
||||
--theme--callout_pink-text: var(--theme_light--callout_pink-text);
|
||||
--theme--callout_red: var(--theme_light--callout_red);
|
||||
--theme--callout_red-text: var(--theme_light--callout_red-text);
|
||||
--theme--code_inline-text: var(--theme_light--code_inline-text);
|
||||
--theme--code_inline-background: var(--theme_light--code_inline-background);
|
||||
--theme--code-text: var(--theme_light--code-text);
|
||||
--theme--code-background: var(--theme_light--code-background);
|
||||
--theme--code_function: var(--theme_light--code_function);
|
||||
--theme--code_keyword: var(--theme_light--code_keyword);
|
||||
--theme--code_tag: var(--theme_light--code_tag);
|
||||
--theme--code_operator: var(--theme_light--code_operator);
|
||||
--theme--code_important: var(--theme_light--code_important);
|
||||
--theme--code_property: var(--theme_light--code_property);
|
||||
--theme--code_builtin: var(--theme_light--code_builtin);
|
||||
--theme--code_attr-name: var(--theme_light--code_attr-name);
|
||||
--theme--code_comment: var(--theme_light--code_comment);
|
||||
--theme--code_punctuation: var(--theme_light--code_punctuation);
|
||||
--theme--code_doctype: var(--theme_light--code_doctype);
|
||||
--theme--code_number: var(--theme_light--code_number);
|
||||
--theme--code_string: var(--theme_light--code_string);
|
||||
--theme--code_attr-value: var(--theme_light--code_attr-value);
|
||||
}
|
||||
|
||||
.notion-sidebar{background-color: pink;}
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
* property layout
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 alexander-kazakov
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.propertylayout-enhanced {
|
||||
overflow: hidden;
|
||||
transition: max-height 200ms ease-in, opacity 200ms ease-in;
|
||||
}
|
||||
.propertylayout-hidden {
|
||||
max-height: 0 !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.propertylayout-toggle {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
padding: 0.25em;
|
||||
background: transparent;
|
||||
color: var(--theme--text_ui);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
transition: background 200ms, margin-bottom 200ms ease-in;
|
||||
}
|
||||
.notion-scroller.vertical > div > :first-child .propertylayout-toggle {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.propertylayout-toggle[data-action='show'] {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.propertylayout-toggle:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.propertylayout-toggle .triangle {
|
||||
width: 0.6875em;
|
||||
height: 0.6875em;
|
||||
margin: 0 0.75em 0 0.5em;
|
||||
transition: transform 200ms ease-out 0s;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.propertylayout-toggle[data-action="hide"] .triangle {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
/*
|
||||
* property layout
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 alexander-kazakov
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
|
||||
tags: ['extension'],
|
||||
name: 'property layout',
|
||||
desc: 'auto-collapse page properties that usually push down page content.',
|
||||
version: '0.2.4',
|
||||
author: 'alexander-kazakov',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [];
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => handle(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
let properties = document.querySelector(
|
||||
'.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]'
|
||||
);
|
||||
if (
|
||||
properties &&
|
||||
!properties.classList.contains('propertylayout-enhanced')
|
||||
) {
|
||||
properties.classList.add(
|
||||
'propertylayout-enhanced',
|
||||
'propertylayout-hidden'
|
||||
);
|
||||
const toggle = createElement(
|
||||
'<button class="propertylayout-toggle" data-action="show">Properties</button>'
|
||||
);
|
||||
toggle.prepend(
|
||||
createElement('<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2 "></polygon></svg>')
|
||||
);
|
||||
toggle.addEventListener('click', (event) => {
|
||||
properties.style.maxHeight = properties.children[0].offsetHeight + 'px';
|
||||
setTimeout(() => {
|
||||
properties.classList.toggle('propertylayout-hidden');
|
||||
toggle.setAttribute(
|
||||
'data-action',
|
||||
properties.classList.contains('propertylayout-hidden')
|
||||
? 'show'
|
||||
: 'hide'
|
||||
);
|
||||
}, 0);
|
||||
});
|
||||
const propObserver = new MutationObserver(() => {
|
||||
properties.style.maxHeight = '';
|
||||
});
|
||||
propObserver.observe(properties, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
if (properties.previousElementSibling) {
|
||||
properties.previousElementSibling.append(toggle);
|
||||
} else properties.parentElement.prepend(toggle);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,67 +0,0 @@
|
||||
/*
|
||||
* right-to-left
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 Omar Bahareth
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: 'b28ee2b9-4d34-4e36-be8a-ab5be3d79f51',
|
||||
tags: ['extension'],
|
||||
name: 'right-to-left',
|
||||
desc: 'enables auto rtl/ltr text direction detection.',
|
||||
version: '1.4.1',
|
||||
author: 'obahareth',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [];
|
||||
const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestIdleCallback(() => handle(queue));
|
||||
queue.push(...list);
|
||||
}),
|
||||
PAGE_OBSERVER = new MutationObserver(autoAlignPageContent);
|
||||
DOCUMENT_OBSERVER.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].className === 'notion-page-content'
|
||||
) {
|
||||
autoAlignPageContent();
|
||||
|
||||
PAGE_OBSERVER.disconnect();
|
||||
PAGE_OBSERVER.observe(addedNodes[0], {
|
||||
childList: true,
|
||||
subtree: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
function autoAlignPageContent() {
|
||||
document
|
||||
.querySelectorAll(
|
||||
`.notion-page-content > div[data-block-id]:not([dir]):not(.notion-column_list-block),
|
||||
[placeholder="Untitled"]:not([dir]),
|
||||
.notion-column-block > div[data-block-id]:not([dir])`
|
||||
)
|
||||
.forEach((block) => block.setAttribute('dir', 'auto'));
|
||||
document
|
||||
.querySelectorAll(
|
||||
"div[placeholder='List'], div[placeholder='To-do']"
|
||||
)
|
||||
.forEach((item) => {
|
||||
item.style['text-align'] = '-webkit-auto';
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,60 +0,0 @@
|
||||
/*
|
||||
* scroll-to-top
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.bottom-right-buttons {
|
||||
position: absolute;
|
||||
bottom: 33px;
|
||||
right: 33px;
|
||||
z-index: 101;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bottom-right-buttons > div {
|
||||
margin-top: 8px;
|
||||
pointer-events: auto;
|
||||
|
||||
user-select: none;
|
||||
transition: opacity 700ms ease 0s, color 700ms ease 0s,
|
||||
transform 700ms ease 0s;
|
||||
cursor: pointer;
|
||||
|
||||
position: static !important;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-radius: 100%;
|
||||
font-size: 20px;
|
||||
|
||||
background: var(--theme--interactive_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
|
||||
}
|
||||
|
||||
.notion-scroll-button {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.notion-scroll-button.hidden {
|
||||
pointer-events: none;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
|
||||
transition-property: opacity, transform, visibility;
|
||||
transition-delay: 0, 0, 700ms;
|
||||
}
|
||||
|
||||
.notion-scroll-button > svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path fill="currentColor" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 231 B |
@ -1,137 +0,0 @@
|
||||
/*
|
||||
* scroll-to-top
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra');
|
||||
|
||||
module.exports = {
|
||||
id: '0a958f5a-17c5-48b5-8713-16190cae1959',
|
||||
tags: ['extension'],
|
||||
name: 'scroll to top',
|
||||
desc:
|
||||
'add an arrow above the help button to scroll back to the top of a page.',
|
||||
version: '1.0.0',
|
||||
author: 'CloudHill',
|
||||
options: [
|
||||
{
|
||||
key: 'smooth',
|
||||
label: 'smooth scrolling',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'top',
|
||||
label: 'distance scrolled until button is shown:',
|
||||
type: 'input',
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
key: 'unit',
|
||||
label: 'unit to measure distance with:',
|
||||
type: 'select',
|
||||
value: ['percent', 'pixels'],
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
if (!document.querySelector('.notion-frame')) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
const $container = document.createElement('div');
|
||||
const $help = document.querySelector('.notion-help-button');
|
||||
const $scroll = createElement(
|
||||
'<div class="notion-scroll-button" role="button"></div>'
|
||||
);
|
||||
|
||||
(async () => {
|
||||
$scroll.innerHTML = await fs.readFile(
|
||||
path.resolve(`${__dirname}/arrow.svg`) // 🠙;
|
||||
)
|
||||
})();
|
||||
|
||||
$container.className = 'bottom-right-buttons';
|
||||
$help.after($container);
|
||||
$container.append($scroll);
|
||||
$container.append($help);
|
||||
|
||||
if (store().top > 0) $scroll.classList.add('hidden');
|
||||
|
||||
$scroll.addEventListener('click', () => {
|
||||
document.querySelector('.notion-frame > .notion-scroller').scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: store().smooth ? 'smooth' : 'auto',
|
||||
});
|
||||
});
|
||||
|
||||
let queue = [];
|
||||
let $scroller = document.querySelector(
|
||||
'.notion-frame > .notion-scroller'
|
||||
);
|
||||
let top = store().top || 0;
|
||||
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => handle(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
setScrollDistance();
|
||||
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
(addedNodes[0].className === 'notion-page-content' ||
|
||||
addedNodes[0].className === 'notion-scroller') &&
|
||||
top > 0
|
||||
) {
|
||||
$scroll.classList.add('hidden');
|
||||
|
||||
$scroller = document.querySelector(
|
||||
'.notion-frame > .notion-scroller'
|
||||
);
|
||||
setScrollDistance();
|
||||
|
||||
$scroller.addEventListener('scroll', (event) => {
|
||||
if (
|
||||
Math.ceil(event.target.scrollTop) < $scroller.top_distance
|
||||
)
|
||||
$scroll.classList.add('hidden');
|
||||
else $scroll.classList.remove('hidden');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setScrollDistance() {
|
||||
$scroller.top_distance = top;
|
||||
if (top > 0 && store().unit === 'percent') {
|
||||
let content_height = Array.from($scroller.children).reduce(
|
||||
(h, c) => h + c.offsetHeight,
|
||||
0
|
||||
);
|
||||
$scroller.top_distance *=
|
||||
(content_height - $scroller.offsetHeight) / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,370 +0,0 @@
|
||||
/*
|
||||
* simpler databases
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.simpler-databases--config-button:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.simpler-databases--config-button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
.simpler-databases--overlay-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.simpler-databases--config-menu {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
max-height: 70vh;
|
||||
padding: 8px 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--theme--box-shadow_strong);
|
||||
background: var(--theme--card);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.simpler-databases--config-item-toggle,
|
||||
.simpler-databases--config-item-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
font-size: var(--theme--font_label-size);
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
}
|
||||
.simpler-databases--config-item-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
.simpler-databases--config-item-toggle:hover,
|
||||
.simpler-databases--config-item-toggle:focus {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.simpler-databases--config-title {
|
||||
margin: 0 14px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.simpler-databases--config-toggle {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
height: 14px;
|
||||
width: 26px;
|
||||
margin-left: auto;
|
||||
margin-right: 14px;
|
||||
padding: 2px;
|
||||
border-radius: 44px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-sizing: content-box;
|
||||
background: rgba(202, 204, 206, 0.3);
|
||||
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
|
||||
}
|
||||
|
||||
.simpler-databases--config-toggle[data-toggled="true"] {
|
||||
background: var(--theme--primary);
|
||||
}
|
||||
|
||||
.simpler-databases--config-toggle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 44px;
|
||||
background: white;
|
||||
transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
|
||||
}
|
||||
.simpler-databases--config-toggle[data-toggled="true"]::before {
|
||||
transform: translateX(12px);
|
||||
}
|
||||
|
||||
.simpler-databases--config-item-input {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.simpler-databases--config-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
margin: 0 14px;
|
||||
padding: 3px 6px;
|
||||
background: var(--theme--select_input);
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.notion-dark-theme .simpler-databases--config-input {
|
||||
background: rgba(15, 15, 15, 0.3);
|
||||
box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;
|
||||
}
|
||||
|
||||
.simpler-databases--config-input input {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
resize: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.simpler-databases--config-divider {
|
||||
border-bottom: 1px solid var(--theme--ui-border);
|
||||
width: 100%;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.notion-collection_view-block[data-tweaks*="[config-open]"] [style*=" height: 42px;"] > :not(:first-child) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
/* TWEAKS */
|
||||
|
||||
/* Toggle */
|
||||
.simpler-databases--toggle {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background 20ms ease-in 0s;
|
||||
}
|
||||
.simpler-databases--toggle svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotateZ(180deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
}
|
||||
.simpler-databases--toggle:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"]
|
||||
.simpler-databases--toggle svg {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
|
||||
.notion-collection_view-block[data-tweaks*="[toggle]"] > .notion-scroller {
|
||||
transition: height 200ms ease-in, opacity 200ms ease-in;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"] > .notion-scroller {
|
||||
opacity: 0;
|
||||
height: 0 !important;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"]
|
||||
[data-hide-items] .notion-collection-item {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"])
|
||||
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] .notion-record-icon,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"])
|
||||
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] [placeholder] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Link Arrow - linked databases */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[link]"])
|
||||
[style*=" height: 42px;"] a :first-child[style*="margin-right: 6px"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Views */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[views]"])
|
||||
[style*=" height: 42px;"] > [role="button"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[toolbar]"])
|
||||
.simpler-databases--config-button ~ * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Header - table, calendar */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
|
||||
.notion-table-view > .notion-collection_view-block > :first-child,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
|
||||
.notion-table-view > .notion-collection_view-block > :first-child + div {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
|
||||
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div {
|
||||
border-top: 1px solid var(--theme--table-border_row);
|
||||
}
|
||||
|
||||
/* New Item - table, board, timeline, list, gallery */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-table-view-add-row,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-board-view .notion-board-group > [role="button"]:not(.notion-collection-item),
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-timeline-item-row:last-child,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-list-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item),
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-gallery-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item) {
|
||||
display: none !important;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
|
||||
.notion-timeline-view > [style*="padding-bottom: 34px;"] {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Calc Row - table, timeline */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"])
|
||||
.notion-table-view-add-row ~ div:not(.notion-selectable-halo):not([role="button"]),
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"])
|
||||
.notion-timeline-view > [style*="z-index: 4;"]:last-child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hidden Columns - board */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[hidden_column]"])
|
||||
.notion-board-view > .notion-collection_view-block [style*="width: 220px;"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Add Group - board */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[add_group]"])
|
||||
.notion-board-view > .notion-collection_view-block [style*="width: 180px;"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* New Column - table */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
|
||||
.notion-table-view-add-column,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
|
||||
.notion-table-view .notion-collection-item > [style*="width: 32px;"] {
|
||||
display: none !important;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
|
||||
.notion-table-view-add-row + [style*="padding-right: 32px;"] {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Full Width - table */
|
||||
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view > .notion-collection_view-block {
|
||||
max-width: fit-content;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection_view-block > [style*="min-width"] {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection-item {
|
||||
width: fit-content;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div,
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection_view-block > :first-child {
|
||||
border-left: 1px solid var(--theme--table-border_row);
|
||||
}
|
||||
|
||||
/* COMPOUND TWEAKS */
|
||||
|
||||
/* Title and Link disabled > Hide title container */
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"])
|
||||
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* New Row and Calc Row disabled > Add bottom border - table */
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"]):not([data-tweaks*="[new_item]"])
|
||||
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div {
|
||||
border-bottom: 1px solid var(--theme--table-border_row);
|
||||
}
|
||||
|
||||
/* New Column enabled with Full Width disabled > Add right border - table */
|
||||
.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div,
|
||||
.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"])
|
||||
.notion-table-view .notion-collection_view-block > :first-child {
|
||||
border-right: 1px solid var(--theme--table-border_row);
|
||||
}
|
||||
|
||||
/* REMOVE DATABASE HEADER < Title, Link, Toggle, Views, and Toolbar disabled */
|
||||
|
||||
/* Hide Header */
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
[style*="min-height: 42px"] {
|
||||
min-height: 0 !important;
|
||||
max-height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
[style*="height: 42px"] {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Config Button */
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
[style*=" height: 42px;"] > :last-child {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
.simpler-databases--config-button {
|
||||
background: var(--theme--main);
|
||||
box-shadow: var(--theme--box-shadow);
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
.simpler-databases--config-button:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
/* Hide Top Border */
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
:not(.notion-table-view) > .notion-collection_view-block > [style*="box-shadow"] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
:not(.notion-table-view) > .notion-collection_view-block[style*="border-top"],
|
||||
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
|
||||
:not(.notion-table-view) > .notion-collection_view-block > [style*="border-top"] {
|
||||
border-top: none !important;
|
||||
}
|
||||
@ -1,540 +0,0 @@
|
||||
/*
|
||||
* simpler databases
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: '752933b5-1258-44e3-b49a-61b4885f8bda',
|
||||
tags: ['extension'],
|
||||
name: 'simpler databases',
|
||||
desc: 'adds a menu to inline databases to toggle ui elements.',
|
||||
version: '1.0.0',
|
||||
author: 'CloudHill',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
if (!store().blocks) store().blocks = {};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: 'replace_title',
|
||||
name: 'Replace title...',
|
||||
type: 'input',
|
||||
linkedOnly: true,
|
||||
default: '',
|
||||
action: replaceTitle,
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
name: 'Title',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
key: 'toggle',
|
||||
name: 'Toggle',
|
||||
type: 'toggle',
|
||||
default: false,
|
||||
action: toggle,
|
||||
},
|
||||
{
|
||||
key: 'link',
|
||||
name: 'Link arrow',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
linkedOnly: true,
|
||||
},
|
||||
{
|
||||
key: 'views',
|
||||
name: 'Views',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
key: 'toolbar',
|
||||
name: 'Toolbar',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
key: 'divider',
|
||||
views: ['table', 'board', 'timeline', 'list', 'gallery'],
|
||||
},
|
||||
{
|
||||
key: 'header_row',
|
||||
name: 'Header row',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['table'],
|
||||
},
|
||||
{
|
||||
key: 'new_item',
|
||||
name: 'New row',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['table', 'timeline'],
|
||||
},
|
||||
{
|
||||
key: 'new_item',
|
||||
name: 'New item',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['board', 'list', 'gallery'],
|
||||
},
|
||||
{
|
||||
key: 'calc_row',
|
||||
name: 'Calculation row',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['table', 'timeline'],
|
||||
},
|
||||
{
|
||||
key: 'divider',
|
||||
views: ['table', 'board'],
|
||||
},
|
||||
{
|
||||
key: 'hidden_column',
|
||||
name: 'Hidden columns',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['board'],
|
||||
},
|
||||
{
|
||||
key: 'add_group',
|
||||
name: 'Add group',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['board'],
|
||||
},
|
||||
{
|
||||
key: 'new_column',
|
||||
name: 'New column',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['table'],
|
||||
},
|
||||
{
|
||||
key: 'full_width',
|
||||
name: 'Full width',
|
||||
type: 'toggle',
|
||||
default: true,
|
||||
views: ['table'],
|
||||
},
|
||||
]
|
||||
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
|
||||
// observe for new or moved collection blocks
|
||||
const contentObserver = new MutationObserver((list, observer) => {
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].querySelector &&
|
||||
addedNodes[0].querySelector('.notion-collection_view-block')
|
||||
)
|
||||
findInlineCollections();
|
||||
}
|
||||
});
|
||||
|
||||
// observe for page changes
|
||||
let queue = [];
|
||||
const pageObserver = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => process(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
pageObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function process(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].className === 'notion-page-content'
|
||||
) {
|
||||
findInlineCollections();
|
||||
contentObserver.disconnect();
|
||||
contentObserver.observe(addedNodes[0],
|
||||
{
|
||||
childList: true,
|
||||
subtree: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function findInlineCollections() {
|
||||
const collections = document.querySelectorAll('.notion-collection_view-block[style*="width"][style*="max-width"]');
|
||||
collections.forEach(collection => {
|
||||
if (collection.querySelector('.simpler-databases--config-button')) return;
|
||||
|
||||
const blockId = collection.dataset.blockId;
|
||||
|
||||
// config button
|
||||
const add = collection.querySelector('.notion-collection-view-item-add');
|
||||
if (!add) return;
|
||||
|
||||
const configButton = add.previousElementSibling.cloneNode();
|
||||
configButton.className = 'simpler-databases--config-button';
|
||||
configButton.innerHTML = `<svg viewBox="0 0 14 14"><path d="M14,7.77 L14,6.17 L12.06,5.53 L11.61,4.44 L12.49,2.6 L11.36,1.47 L9.55,2.38 L8.46,1.93 L7.77,0.01 L6.17,0.01 L5.54,1.95 L4.43,2.4 L2.59,1.52 L1.46,2.65 L2.37,4.46 L1.92,5.55 L0,6.23 L0,7.82 L1.94,8.46 L2.39,9.55 L1.51,11.39 L2.64,12.52 L4.45,11.61 L5.54,12.06 L6.23,13.98 L7.82,13.98 L8.45,12.04 L9.56,11.59 L11.4,12.47 L12.53,11.34 L11.61,9.53 L12.08,8.44 L14,7.75 L14,7.77 Z M7,10 C5.34,10 4,8.66 4,7 C4,5.34 5.34,4 7,4 C8.66,4 10,5.34 10,7 C10,8.66 8.66,10 7,10 Z" /></svg>`;
|
||||
configButton.collectionBlock = collection;
|
||||
configButton.addEventListener('click', renderConfig);
|
||||
|
||||
add.parentElement.prepend(configButton);
|
||||
|
||||
// initialize store variable
|
||||
if (!store().blocks[blockId]) store().blocks[blockId] = {};
|
||||
|
||||
// restore stored states
|
||||
menuItems.forEach(
|
||||
item => {
|
||||
if (item.key === 'divider') return;
|
||||
|
||||
let storedValue = store().blocks[blockId][item.key];
|
||||
if (storedValue == null) // set defaults
|
||||
storedValue = store().blocks[blockId][item.key] = item.default;
|
||||
|
||||
if (item.action) item.action(storedValue, collection);
|
||||
if (
|
||||
item.type !== 'input' &&
|
||||
!item.linkedOnly || isLinked(collection)
|
||||
) {
|
||||
toggleDataTweaks(collection, item.key, storedValue);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// config
|
||||
|
||||
function renderConfig(e) {
|
||||
if (document.querySelector('.simpler-databases--overlay-container')) return;
|
||||
const button = e.currentTarget;
|
||||
|
||||
const collection = button.collectionBlock;
|
||||
if (!collection) return;
|
||||
|
||||
const collectionView = getView(collection);
|
||||
if (!collectionView) return;
|
||||
|
||||
// layer to close config
|
||||
const overlayContainer = createElement(
|
||||
'<div class="simpler-databases--overlay-container"></div>'
|
||||
);
|
||||
overlayContainer.addEventListener('click', hideConfig)
|
||||
document
|
||||
.querySelector('.notion-app-inner')
|
||||
.appendChild(overlayContainer);
|
||||
|
||||
const div = createElement(`
|
||||
<div style="position: fixed;">
|
||||
<div style="position: relative; pointer-events: auto;"></div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// render config
|
||||
|
||||
toggleDataTweaks(collection, 'config-open', true);
|
||||
|
||||
const config = createElement(
|
||||
'<div class="simpler-databases--config-menu"></div>'
|
||||
);
|
||||
|
||||
// get menu items relevant to current view
|
||||
const viewMenu = menuItems.filter(
|
||||
item => (!item.views || item.views.includes(collectionView)) &&
|
||||
(!item.linkedOnly || isLinked(collection))
|
||||
);
|
||||
config.append(...viewMenu.map(
|
||||
item => renderConfigItem(item, collection)
|
||||
));
|
||||
|
||||
overlayContainer.appendChild(div);
|
||||
div.firstElementChild.appendChild(config);
|
||||
|
||||
focusConfigItem(config.firstElementChild);
|
||||
|
||||
// config positioning
|
||||
const rect = button.getBoundingClientRect();
|
||||
|
||||
div.style.left = Math.min(
|
||||
rect.left + rect.width / 2,
|
||||
window.innerWidth - (config.offsetWidth + 14)
|
||||
) + 'px';
|
||||
|
||||
div.style.top = Math.min(
|
||||
rect.top + rect.height / 2,
|
||||
window.innerHeight - (config.offsetHeight + 14)
|
||||
) + 'px';
|
||||
|
||||
// fade in
|
||||
config.animate(
|
||||
[ {opacity: 0}, {opacity: 1} ],
|
||||
{ duration: 200 }
|
||||
);
|
||||
|
||||
// key bindings
|
||||
document.addEventListener('keydown', configKeyEvent);
|
||||
}
|
||||
|
||||
function hideConfig() {
|
||||
const overlayContainer = document.querySelector('.simpler-databases--overlay-container');
|
||||
if (!overlayContainer) return;
|
||||
|
||||
overlayContainer.removeEventListener('click', hideConfig);
|
||||
document.removeEventListener('keydown', configKeyEvent);
|
||||
|
||||
toggleDataTweaks(
|
||||
document.querySelector('[data-tweaks*="config-open"]'),
|
||||
'config-open', false
|
||||
);
|
||||
|
||||
// fade out
|
||||
document.querySelector('.simpler-databases--config-menu').animate(
|
||||
[ {opacity: 1}, {opacity: 0} ],
|
||||
{ duration: 200 }
|
||||
).onfinish = () => overlayContainer.remove();
|
||||
}
|
||||
|
||||
function renderConfigItem(menuItem, collection) {
|
||||
if (menuItem.key === 'divider')
|
||||
return createElement('<div class="simpler-databases--config-divider"></div');
|
||||
|
||||
const blockId = collection.dataset.blockId;
|
||||
const item = createElement(`
|
||||
<div class="simpler-databases--config-item-${menuItem.type}">
|
||||
</div>
|
||||
`);
|
||||
|
||||
const storedValue = store().blocks[blockId][menuItem.key];
|
||||
switch (menuItem.type) {
|
||||
case 'toggle':
|
||||
const toggleLabel = createElement(`
|
||||
<div class="simpler-databases--config-title">${menuItem.name}</div>
|
||||
`)
|
||||
const toggle = createElement(`
|
||||
<div class="simpler-databases--config-toggle"
|
||||
data-toggled="${storedValue || false}">
|
||||
</div>
|
||||
`);
|
||||
item.append(toggleLabel, toggle)
|
||||
item.setAttribute('tabindex', 0);
|
||||
|
||||
item.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
|
||||
const newState = !(toggle.dataset.toggled === 'true');
|
||||
toggle.dataset.toggled = newState;
|
||||
|
||||
|
||||
store().blocks[blockId][menuItem.key] = newState;
|
||||
toggleDataTweaks(collection, menuItem.key, newState);
|
||||
if (menuItem.action) menuItem.action(newState, collection);
|
||||
});
|
||||
break;
|
||||
|
||||
case 'input':
|
||||
const input = createElement(`
|
||||
<div class="simpler-databases--config-input notion-focusable">
|
||||
<input placeholder="${menuItem.name}"
|
||||
type="text" value="${storedValue || ''}">
|
||||
</div>
|
||||
`);
|
||||
item.appendChild(input)
|
||||
item.addEventListener('click', e => e.stopPropagation());
|
||||
if (menuItem.action) {
|
||||
input.firstElementChild.addEventListener('input', e => {
|
||||
e.stopPropagation();
|
||||
const newValue = e.target.value;
|
||||
|
||||
store().blocks[blockId][menuItem.key] = newValue;
|
||||
menuItem.action(newValue, collection);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
function focusConfigItem(item) {
|
||||
(
|
||||
item.getElementsByTagName('input')[0] || item
|
||||
).focus();
|
||||
}
|
||||
|
||||
function configKeyEvent(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (e.key === 'Escape') return hideConfig();
|
||||
|
||||
let currentFocus = document.activeElement
|
||||
.closest('[class^="simpler-databases--config-item"]');
|
||||
|
||||
const parentEl = currentFocus.parentElement;
|
||||
if (
|
||||
[' ', 'Enter'].includes(e.key)
|
||||
) return currentFocus.click();
|
||||
|
||||
const focusNext = () => {
|
||||
let nextEl = currentFocus.nextElementSibling;
|
||||
if (nextEl) {
|
||||
if (nextEl.className.includes('divider'))
|
||||
nextEl = nextEl.nextElementSibling;
|
||||
focusConfigItem(nextEl);
|
||||
}
|
||||
else focusConfigItem(parentEl.firstElementChild);
|
||||
}
|
||||
const focusPrevious = () => {
|
||||
let prevEl = currentFocus.previousElementSibling;
|
||||
if (prevEl) {
|
||||
if (prevEl.className.includes('divider'))
|
||||
prevEl = prevEl.previousElementSibling;
|
||||
|
||||
if (prevEl.className.includes('input'))
|
||||
prevEl.getElementsByTagName('input')[0].focus();
|
||||
focusConfigItem(prevEl);
|
||||
}
|
||||
else focusConfigItem(parentEl.lastElementChild);
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowUp') focusPrevious();
|
||||
else if (e.key === 'ArrowDown') focusNext();
|
||||
else if (e.key === 'Tab') {
|
||||
if (e.shiftKey) {
|
||||
if (currentFocus === parentEl.firstElementChild) {
|
||||
focusConfigItem(parentEl.lastElementChild);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
else if (currentFocus === parentEl.lastElementChild) {
|
||||
focusConfigItem(parentEl.firstElementChild);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// get collection info
|
||||
|
||||
function isLinked(collection) {
|
||||
return collection.querySelector('[style*=" height: 42px;"] .alias');
|
||||
}
|
||||
|
||||
function getView(collection) {
|
||||
return collection.querySelector('.notion-scroller [class$="view"]')
|
||||
?.className.split('-')[1]
|
||||
}
|
||||
|
||||
// add/remove keys to data-tweaks
|
||||
function toggleDataTweaks(collection, key, state) {
|
||||
if (!collection.dataset.tweaks) collection.dataset.tweaks = '';
|
||||
|
||||
const isActive = collection.dataset.tweaks.includes(`[${key}]`);
|
||||
if (state == null) state = !isActive;
|
||||
|
||||
if (state && !isActive) {
|
||||
collection.dataset.tweaks += `[${key}]`;
|
||||
} else if (!state && isActive) {
|
||||
collection.dataset.tweaks = collection.dataset.tweaks
|
||||
.replace(`[${key}]`, '');
|
||||
}
|
||||
}
|
||||
|
||||
// menu actions
|
||||
|
||||
// replace and add observer to linked database titles
|
||||
function replaceTitle(value, collection) {
|
||||
const titleDiv = collection.querySelector('[style*="height: 42px;"] a [placeholder]');
|
||||
if (!titleDiv) return;
|
||||
if (!titleDiv.originalTitle && value) titleDiv.originalTitle = titleDiv.innerText;
|
||||
|
||||
if (!titleDiv.titleObserver) {
|
||||
if (!value) return;
|
||||
// store reference to observer to disconnect() in future calls
|
||||
titleDiv.titleObserver = new MutationObserver(() => {
|
||||
const title = store().blocks[collection.dataset.blockId]['replace_title'];
|
||||
if (title && titleDiv.innerText !== title) titleDiv.innerText = title;
|
||||
});
|
||||
} else {
|
||||
titleDiv.titleObserver.disconnect();
|
||||
}
|
||||
|
||||
if (value) { // observe
|
||||
titleDiv.innerText = value
|
||||
titleDiv.titleObserver.observe(titleDiv, {characterData: true, childList: true})
|
||||
} else { // reset
|
||||
titleDiv.titleObserver.disconnect();
|
||||
titleDiv.innerText = titleDiv.originalTitle;
|
||||
delete titleDiv.originalTitle;
|
||||
}
|
||||
}
|
||||
|
||||
// show or hide toggle
|
||||
function toggle(state, collection) {
|
||||
const header = collection.querySelector('[style*=" height: 42px"]');
|
||||
if (!header) return;
|
||||
|
||||
// define functions
|
||||
const collectionView = collection.querySelector('.notion-scroller');
|
||||
const hideCollection = () => {
|
||||
collectionView.style.height = collectionView.offsetHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
collection.dataset.toggledHidden = true;
|
||||
setTimeout(() => collectionView.dataset.hideItems = 'true', 200); // hide drag handles
|
||||
});
|
||||
}
|
||||
const showCollection = () => {
|
||||
// get height
|
||||
collection.dataset.toggledHidden = false;
|
||||
collectionView.style.height = '';
|
||||
collectionView.style.height = collectionView.offsetHeight + 'px';
|
||||
collection.dataset.toggledHidden = true;
|
||||
|
||||
delete collectionView.dataset.hideItems;
|
||||
requestAnimationFrame(() =>{
|
||||
collection.dataset.toggledHidden = false;
|
||||
setTimeout(() => collectionView.style.height = '', 200);
|
||||
});
|
||||
}
|
||||
|
||||
// restore previous state
|
||||
if (!collection.dataset.toggledHidden) {
|
||||
const storedState = store().blocks[collection.dataset.blockId].toggledHidden || false;
|
||||
if (storedState) hideCollection();
|
||||
}
|
||||
|
||||
let toggle = header.querySelector('.simpler-databases--toggle');
|
||||
if (toggle) {
|
||||
// return if toggle is already there
|
||||
if (!state) toggle.remove();
|
||||
return;
|
||||
} else if (state) {
|
||||
// add toggle
|
||||
toggle = createElement(`
|
||||
<div class="simpler-databases--toggle">
|
||||
<svg viewBox="0 0 100 100" class="triangle">
|
||||
<polygon points="5.9,88.2 50,11.8 94.1,88.2" />
|
||||
</svg>
|
||||
</div>
|
||||
`);
|
||||
toggle.addEventListener('click', () => {
|
||||
const hide = !(collection.dataset.toggledHidden === 'true');
|
||||
store().blocks[collection.dataset.blockId].toggledHidden = hide;
|
||||
if (hide) hideCollection();
|
||||
else showCollection();
|
||||
});
|
||||
header.prepend(toggle);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
/*
|
||||
* topbar icons
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-topbar-icon {
|
||||
width: 32px;
|
||||
padding: 0 7px !important;
|
||||
}
|
||||
|
||||
.notion-topbar-icon:not(.notion-topbar-share-menu) > *:not(div) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.notion-topbar-icon > div,
|
||||
.notion-topbar-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.notion-topbar-icon[style*="padding-left: 8px"] > div > :last-child {
|
||||
display: none;
|
||||
}
|
||||
.notion-topbar-icon[style*="padding-left: 6px"] > div > :first-child {
|
||||
display: none;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,6.8l1.3,2.6l0.6,1.2l1.3,0.2l2.8,0.4l-2,2l-1,0.9l0.2,1.3l0.5,2.8l-2.5-1.3L12,16.3l-1.2,0.6l-2.5,1.3l0.5-2.8L9,14.1 l-1-0.9l-2-2l2.8-0.4l1.3-0.2l0.6-1.2L12,6.8 M12,1.1L8.4,8.3L0.5,9.4L6.2,15l-1.4,7.9l7.1-3.7l7.1,3.7L17.7,15l5.8-5.6l-7.9-1.1 L12,1.1L12,1.1z"/></svg>
|
||||
|
Before Width: | Height: | Size: 359 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="12 1.1 15.6 8.3 23.5 9.4 17.8 15 19.1 22.9 12 19.2 4.9 22.9 6.2 15 .5 9.4 8.4 8.3"/></svg>
|
||||
|
Before Width: | Height: | Size: 190 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.5,15.1c-0.9,0-1.8,0.4-2.4,1l-7.3-3.6c0-0.2,0-0.3,0-0.5s0-0.4,0-0.5l7.3-3.6c0.6,0.6,1.4,1,2.4,1 c1.8,0,3.3-1.5,3.3-3.3s-1.5-3.3-3.3-3.3s-3.3,1.5-3.3,3.3c0,0.2,0,0.4,0,0.5L7.9,9.7c-0.6-0.6-1.4-1-2.4-1c-1.8,0-3.3,1.5-3.3,3.3 s1.5,3.3,3.3,3.3c0.9,0,1.8-0.4,2.4-1l7.3,3.6c0,0.2,0,0.3,0,0.5c0,1.8,1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3S20.3,15.1,18.5,15.1z"/></svg>
|
||||
|
Before Width: | Height: | Size: 454 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="20.6 6 18 3.4 12 9.4 6 3.4 3.4 6 9.4 12 3.4 18 6 20.6 12 14.6 18 20.6 20.6 18 14.6 12"/></svg>
|
||||
|
Before Width: | Height: | Size: 194 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="9.4 20.6 24 6 21.4 3.4 9.4 15.4 2.6 8.6 0 11.1"/></svg>
|
||||
|
Before Width: | Height: | Size: 155 B |
@ -1,126 +0,0 @@
|
||||
/*
|
||||
* topbar icons
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra');
|
||||
|
||||
module.exports = {
|
||||
id: 'e0700ce3-a9ae-45f5-92e5-610ded0e348d',
|
||||
tags: ['extension'],
|
||||
name: 'topbar icons',
|
||||
desc:
|
||||
'replaces the topbar buttons with icons.',
|
||||
options: [
|
||||
{
|
||||
key: 'share',
|
||||
label: 'share',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'updates',
|
||||
label: 'updates',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'favorite',
|
||||
label: 'favorite',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
version: '1.1.0',
|
||||
author: 'CloudHill',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
const icons = {
|
||||
selected: [
|
||||
...(store().updates ? ['updates'] : []),
|
||||
...(store().favorite ? ['favorite'] : []),
|
||||
],
|
||||
share: fs.readFile(path.resolve(`${__dirname}/icons/share.svg`)),
|
||||
updates: {
|
||||
on: fs.readFile(path.resolve(`${__dirname}/icons/updates_on.svg`)),
|
||||
off: fs.readFile(path.resolve(`${__dirname}/icons/updates_off.svg`)),
|
||||
},
|
||||
favorite: {
|
||||
on: fs.readFile(path.resolve(`${__dirname}/icons/favorite_on.svg`)),
|
||||
off: fs.readFile(path.resolve(`${__dirname}/icons/favorite_off.svg`)),
|
||||
},
|
||||
};
|
||||
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
if (!document.querySelector('.notion-topbar-actions')) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
setIcons(document.querySelector('.notion-topbar-actions'));
|
||||
|
||||
let queue = [];
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestAnimationFrame(() => handle(queue));
|
||||
queue.push(...list);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].className === 'notion-page-content' &&
|
||||
document.querySelector('.notion-peek-renderer')
|
||||
) {
|
||||
const $topbarButtons = document.querySelector(
|
||||
'.notion-peek-renderer .notion-topbar-share-menu'
|
||||
).parentElement;
|
||||
|
||||
if ($topbarButtons.className == 'notion-topbar-actions') return;
|
||||
$topbarButtons.className = 'notion-topbar-actions';
|
||||
setIcons($topbarButtons);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function setIcons(buttons) {
|
||||
const $shareButton = buttons.querySelector('.notion-topbar-share-menu');
|
||||
|
||||
if (store().share) {
|
||||
$shareButton.classList.add('notion-topbar-icon');
|
||||
$shareButton.innerHTML = await icons.share;
|
||||
}
|
||||
|
||||
const elements = {
|
||||
updates: $shareButton.nextElementSibling,
|
||||
favorite: $shareButton.nextElementSibling.nextElementSibling,
|
||||
};
|
||||
for (let btn of icons.selected) {
|
||||
elements[btn].classList.add('notion-topbar-icon')
|
||||
elements[btn].prepend(
|
||||
createElement(`
|
||||
<div>
|
||||
${(await icons[btn].off)}
|
||||
${(await icons[btn].on)}
|
||||
</div>
|
||||
`)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,42 +0,0 @@
|
||||
/*
|
||||
* truncated table titles
|
||||
* (c) 2020 admiraldus (https://github.com/admiraldus)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* target tooltip */
|
||||
.admiraldus-truncated-table-titles-tooltip {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.admiraldus-truncated-table-titles-tooltip > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
background: var(--theme--card);
|
||||
padding: 4px 8px;
|
||||
box-shadow: var(--theme--box-shadow);
|
||||
}
|
||||
|
||||
/* target tooltip icon */
|
||||
.admiraldus-truncated-table-titles-tooltip-svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admiraldus-truncated-table-titles-tooltip-svg > svg {
|
||||
margin-right: 0.25em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
fill: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
/* target tooltip text */
|
||||
.admiraldus-truncated-table-titles-tooltip-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--theme--text_ui);
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<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 296.639 296.639" style="enable-background:new 0 0 296.639 296.639;" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M293.357,138.957c-2.621-3.28-65.112-80.336-145.038-80.336c-79.927,0-142.417,77.056-145.038,80.336
|
||||
c-4.375,5.476-4.375,13.251,0,18.727c2.621,3.28,65.111,80.335,145.038,80.335c79.926,0,142.417-77.055,145.038-80.334
|
||||
C297.732,152.207,297.732,144.432,293.357,138.957z M148.319,208.018c-50.516,0-95.235-40.82-113.213-59.698
|
||||
c17.985-18.886,62.701-59.699,113.213-59.699c50.511,0,95.227,40.812,113.212,59.699
|
||||
C243.546,167.206,198.83,208.018,148.319,208.018z"/>
|
||||
<circle cx="146.955" cy="148.319" r="42.948"/>
|
||||
</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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,207 +0,0 @@
|
||||
/*
|
||||
* truncated table titles
|
||||
* (c) 2020 admiraldus (https://github.com/admiraldus)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const PATH = require('path');
|
||||
const FS = require('fs-extra');
|
||||
|
||||
module.exports = {
|
||||
id: '1794c0bd-7b96-46ad-aa0b-fc4bd76fc7fb',
|
||||
name: 'truncated table titles',
|
||||
tags: ['extension'],
|
||||
desc: 'see the full text of the truncated table titles on hover over.',
|
||||
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;
|
||||
|
||||
/**
|
||||
* Wait until frame exists to avoid "cannot read property" error.
|
||||
*/
|
||||
function wait() {
|
||||
const frame = document.querySelector('.notion-frame');
|
||||
|
||||
if (frame !== null) {
|
||||
(async () => {
|
||||
const notionOverlayContainer = document.querySelector('.notion-overlay-container');
|
||||
const createSvgContainer = document.createElement('div');
|
||||
const svgContainerHtml = await FS.readFile(PATH.resolve(`${__dirname}/icons/eye.svg`));
|
||||
|
||||
createSvgContainer.innerHTML = svgContainerHtml;
|
||||
createSvgContainer.setAttribute('style', 'display: none;');
|
||||
createSvgContainer.classList.add('admiraldus-truncated-table-titles-rendered-svg');
|
||||
notionOverlayContainer.append(createSvgContainer);
|
||||
})();
|
||||
} else {
|
||||
setTimeout(wait, 500);
|
||||
}
|
||||
}
|
||||
|
||||
wait();
|
||||
|
||||
/**
|
||||
* Set the offset values of the created tooltip.
|
||||
*
|
||||
* @param {HTMLDivElement} cell Target the table header cell.
|
||||
* @param {HTMLDivElement} tooltip Target the created tooltip.
|
||||
*
|
||||
* @return {string} Return the offset values.
|
||||
*/
|
||||
function setTooltipOffset(cell, tooltip) {
|
||||
const body = document.querySelector('body');
|
||||
const sidebar = document.querySelector('.notion-sidebar:not([style*="transform"])');
|
||||
Object.defineProperty(Object.prototype, 'offset', {
|
||||
get: function() {
|
||||
return {
|
||||
left: this.getBoundingClientRect().left + window.scrollX,
|
||||
top: this.getBoundingClientRect().top + window.scrollY,
|
||||
};
|
||||
},
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
if (body.offsetWidth < tooltip.offsetWidth + cell.offset.left) {
|
||||
if (body.offsetWidth > cell.offsetWidth + cell.offset.left) {
|
||||
const horizontalOffset = `right: ${body.offsetWidth - cell.offsetWidth - cell.offset.left}px;`;
|
||||
|
||||
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
|
||||
} else {
|
||||
const horizontalOffset = 'right: 8px;';
|
||||
|
||||
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
|
||||
}
|
||||
} else if (sidebar == null && cell.offset.left <= 0) {
|
||||
const horizontalOffset = 'left: 8px;';
|
||||
|
||||
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
|
||||
} else if (sidebar !== null && sidebar.offsetWidth >= cell.offset.left) {
|
||||
const horizontalOffset = `left: ${sidebar.offsetWidth + 8}px;`;
|
||||
|
||||
console.warn('4');
|
||||
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
|
||||
} else {
|
||||
const horizontalOffset = `left: ${cell.offset.left}px;`;
|
||||
|
||||
return `top: ${cell.offset.top + 40}px;${horizontalOffset}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and append tooltip HTML.
|
||||
*
|
||||
* @param {HTMLDivElement} cell Target the table header cell.
|
||||
* @param {string} text Get the title of the table header cell.
|
||||
* @param {string} icon Get the HTML of the rendered svg.
|
||||
*/
|
||||
function createTooltip(cell, text, icon) {
|
||||
const frame = document.querySelector('.notion-frame');
|
||||
const notionOverlayContainer = document.querySelector('.notion-overlay-container');
|
||||
const createTooltipContainer = document.createElement('div');
|
||||
const tooltipText = text.innerText;
|
||||
const tooltipIcon = icon;
|
||||
const tooltipContainerHtml =
|
||||
`<div>
|
||||
<div class="admiraldus-truncated-table-titles-tooltip-svg">
|
||||
${tooltipIcon}
|
||||
</div>
|
||||
|
||||
<div class="admiraldus-truncated-table-titles-tooltip-text">
|
||||
${tooltipText}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
createTooltipContainer.innerHTML = tooltipContainerHtml;
|
||||
createTooltipContainer.classList.add('admiraldus-truncated-table-titles-tooltip');
|
||||
createTooltipContainer.setAttribute('style', `max-width: ${cell.offsetWidth >= 450 ? cell.offsetWidth / 2 + 450 >= frame.offsetWidth ? frame.offsetWidth - 16 : cell.offsetWidth / 2 + 450 : 450}px;`);
|
||||
notionOverlayContainer.append(createTooltipContainer);
|
||||
|
||||
const tooltipOffset = setTooltipOffset(cell, document.querySelector('.admiraldus-truncated-table-titles-tooltip'));
|
||||
createTooltipContainer.setAttribute('style', createTooltipContainer.getAttribute('style') + tooltipOffset);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all tooltips from the DOM.
|
||||
*/
|
||||
function removeTooltip() {
|
||||
if (document.querySelector('.admiraldus-truncated-table-titles-tooltip')) {
|
||||
while (document.querySelectorAll('.admiraldus-truncated-table-titles-tooltip').length !== 0) {
|
||||
document.querySelectorAll('.admiraldus-truncated-table-titles-tooltip').forEach((tooltip) => tooltip.remove());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const BODY = document.querySelector('body');
|
||||
let tooltipDelay = null;
|
||||
|
||||
BODY.addEventListener('mousedown', () => {
|
||||
/**
|
||||
* When the drag is detected, set the global variable to true and remove all tooltips.
|
||||
*/
|
||||
const dragStart = function() {
|
||||
window.isCellDragging = true;
|
||||
|
||||
window.clearTimeout(tooltipDelay);
|
||||
removeTooltip();
|
||||
};
|
||||
|
||||
/**
|
||||
* When the drag is over, set the global variable to false and remove the relevant event listeners.
|
||||
*/
|
||||
const dragEnd = function() {
|
||||
window.isCellDragging = false;
|
||||
|
||||
window.removeEventListener('mousemove', dragStart);
|
||||
window.removeEventListener('mouseup', dragEnd);
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', dragStart);
|
||||
window.addEventListener('mouseup', dragEnd);
|
||||
});
|
||||
|
||||
BODY.addEventListener('mouseenter', (event) => {
|
||||
const el = event.target;
|
||||
|
||||
if (window.isCellDragging !== true) {
|
||||
if (el.classList.contains('notion-table-view-header-cell')) {
|
||||
if (el.querySelector('div[style*="text-overflow"]').scrollWidth > el.querySelector('div[style*="text-overflow"]').clientWidth) {
|
||||
tooltipDelay = window.setTimeout(function() {
|
||||
createTooltip(el, el.querySelector('div[style*="text-overflow"]'), document.querySelector('.admiraldus-truncated-table-titles-rendered-svg').innerHTML);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
BODY.addEventListener('mouseleave', (event) => {
|
||||
const el = event.target;
|
||||
|
||||
if (el.classList.contains('notion-table-view-header-cell')) {
|
||||
if (el.querySelector('div[style*="text-overflow"]').scrollWidth > el.querySelector('div[style*="text-overflow"]').clientWidth) {
|
||||
window.clearTimeout(tooltipDelay);
|
||||
removeTooltip();
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
console.info(
|
||||
'%cextension: ' +
|
||||
`%c${module.exports.name} ` +
|
||||
`%cfrom ${module.exports.author.name} ` +
|
||||
'%c(operational)', 'font-weight: bold;',
|
||||
'font-weight: normal',
|
||||
'font-style: italic;',
|
||||
'color: #a5d6a7;');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,53 +0,0 @@
|
||||
/*
|
||||
* weekly view
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 adihd
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '4c7acaea-6596-4590-85e5-8ac5a1455e8f',
|
||||
tags: ['extension'],
|
||||
name: 'weekly view',
|
||||
desc: 'calendar views named "weekly" will show only the 7 days of this week.',
|
||||
version: '0.5.1',
|
||||
author: 'adihd',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
const notion_elem = document.querySelector('.notion-frame');
|
||||
if (!notion_elem) return;
|
||||
clearInterval(attempt_interval);
|
||||
handle([{ target: notion_elem }]);
|
||||
const observer = new MutationObserver(handle);
|
||||
observer.observe(notion_elem, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list, observer) {
|
||||
document
|
||||
.querySelectorAll('.notion-collection-view-select')
|
||||
.forEach((collection_view) => {
|
||||
if (collection_view.innerText.toLowerCase() !== 'weekly') return;
|
||||
const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
|
||||
'notion-calendar-view-day'
|
||||
),
|
||||
today = [...days].find((day) => day.style.background),
|
||||
height = today
|
||||
? getComputedStyle(
|
||||
today.parentElement.parentElement
|
||||
).getPropertyValue('height')
|
||||
: 0;
|
||||
for (let day of days)
|
||||
day.parentElement.parentElement.style.height = 0;
|
||||
if (today)
|
||||
today.parentElement.parentElement.style.height = height;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
* word counter
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
#word-counter-details {
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
#word-counter-details > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -0.5em;
|
||||
}
|
||||
#word-counter-details > div > p {
|
||||
margin: 0.5em;
|
||||
cursor: pointer;
|
||||
font-size: var(--theme--font_label-size);
|
||||
color: var(--theme--text);
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--theme--interactive_hover);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
#word-counter-details > div > p:hover {
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
#word-counter-details > div > span {
|
||||
max-width: 10em;
|
||||
padding: 0.4rem 0.5rem 0.25rem 0.5rem;
|
||||
font-size: calc(var(--theme--font_label-size) * 0.8);
|
||||
color: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
#word-counter-details > div > p > svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0 0 -2px 0.3em;
|
||||
color: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
#word-counter-details-tooltip {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--theme--box-shadow_strong);
|
||||
border-right-width: 1px;
|
||||
font-size: calc(var(--theme--font_label-size) * 0.8);
|
||||
background: var(--theme--interactive_hover);
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease-in;
|
||||
}
|
||||
#word-counter-details-tooltip.active {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1,166 +0,0 @@
|
||||
/*
|
||||
* word counter
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 admiraldus (https://github.com/admiraldus)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: 'b99deb52-6955-43d2-a53b-a31540cd19a5',
|
||||
tags: ['extension'],
|
||||
name: 'word counter',
|
||||
desc:
|
||||
'add page details: word/character/sentence/block count & speaking/reading times.',
|
||||
version: '0.2.0',
|
||||
author: 'dragonwocky',
|
||||
options: [
|
||||
{
|
||||
key: 'hide_page_details_text',
|
||||
label: 'hide "page details" text',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
const copyToClipboard = (str) => {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = str;
|
||||
el.setAttribute('readonly', '');
|
||||
el.style.position = 'absolute';
|
||||
el.style.left = '-9999px';
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
},
|
||||
humanTime = (mins) => {
|
||||
let readable = '';
|
||||
if (1 <= mins) {
|
||||
readable += `${Math.floor(mins)} min`;
|
||||
if (2 <= mins) readable += 's';
|
||||
}
|
||||
const secs = Math.round((mins % 1) * 60);
|
||||
if (1 <= secs) {
|
||||
if (1 <= mins) readable += ' ';
|
||||
readable += `${secs} sec`;
|
||||
if (2 <= secs) readable += 's';
|
||||
}
|
||||
return readable;
|
||||
};
|
||||
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
let queue = [],
|
||||
$page = document.getElementsByClassName('notion-page-content')[0];
|
||||
const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => {
|
||||
if (!queue.length) requestIdleCallback(() => handle(queue));
|
||||
queue.push(...list);
|
||||
}),
|
||||
PAGE_OBSERVER = new MutationObserver(showPageWordDetails);
|
||||
DOCUMENT_OBSERVER.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function handle(list) {
|
||||
queue = [];
|
||||
for (let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].className === 'notion-page-content'
|
||||
) {
|
||||
$page = addedNodes[0];
|
||||
showPageWordDetails();
|
||||
|
||||
PAGE_OBSERVER.disconnect();
|
||||
PAGE_OBSERVER.observe($page, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const $container = createElement(
|
||||
`<div id="word-counter-details"><div></div></div>`
|
||||
),
|
||||
$tooltip = createElement(
|
||||
`<span id="word-counter-details-tooltip"></span>`
|
||||
);
|
||||
function showPageWordDetails() {
|
||||
const details = {
|
||||
words: $page.innerText.replace(/\s+/g, ' ').split(' ').length,
|
||||
characters: $page.innerText.length,
|
||||
sentences: $page.innerText.split('.').length,
|
||||
blocks: $page.querySelectorAll('[data-block-id]').length,
|
||||
};
|
||||
details['reading time'] = [
|
||||
humanTime(details.words / 275),
|
||||
'~275 wpm',
|
||||
];
|
||||
details['speaking time'] = [
|
||||
humanTime(details.words / 180),
|
||||
'~180 wpm',
|
||||
];
|
||||
|
||||
$container.children[0].innerHTML = `
|
||||
${store().hide_page_details_text ? '' : '<span><b>page details<br></b> (click to copy)</span>'}
|
||||
${Object.keys(details).reduce(
|
||||
(prev, key) =>
|
||||
prev +
|
||||
(Array.isArray(details[key])
|
||||
? `<p>
|
||||
<b>${details[key][0]}</b> ${key}
|
||||
<!-- from https://fontawesome.com/icons/question-circle?style=regular -->
|
||||
<svg data-tooltip="${details[key][1]}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003
|
||||
248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200
|
||||
0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200
|
||||
200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627
|
||||
0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579
|
||||
0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666
|
||||
2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112
|
||||
261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841
|
||||
42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
|
||||
></path>
|
||||
</svg>
|
||||
</p>`
|
||||
: `<p><b>${details[key]}</b> ${key}</p>`),
|
||||
''
|
||||
)}`;
|
||||
$page.previousElementSibling.children[0].appendChild($container);
|
||||
if (!$container.offsetParent) return;
|
||||
$container.offsetParent.appendChild($tooltip);
|
||||
$container
|
||||
.querySelectorAll('p')
|
||||
.forEach((p) =>
|
||||
p.addEventListener('click', (e) =>
|
||||
copyToClipboard(e.target.innerText)
|
||||
)
|
||||
);
|
||||
$container.querySelectorAll('[data-tooltip]').forEach((el) => {
|
||||
el.addEventListener('mouseenter', (e) => {
|
||||
$tooltip.innerText = el.getAttribute('data-tooltip');
|
||||
$tooltip.style.top = el.parentElement.offsetTop + 2.5 + 'px';
|
||||
$tooltip.style.left =
|
||||
el.parentElement.offsetLeft +
|
||||
el.parentElement.offsetWidth -
|
||||
5 +
|
||||
'px';
|
||||
$tooltip.classList.add('active');
|
||||
});
|
||||
el.addEventListener('mouseleave', (e) =>
|
||||
$tooltip.classList.remove('active')
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
20
package.json
20
package.json
@ -1,16 +1,23 @@
|
||||
{
|
||||
"name": "notion-enhancer",
|
||||
"version": "0.10.2",
|
||||
"version": "0.11.0-wip",
|
||||
"description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"notion-enhancer": "bin.js"
|
||||
},
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=12.20.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"no test specified\"",
|
||||
"postinstall": "node bin.js apply -y",
|
||||
"preuninstall": "node bin.js remove -n"
|
||||
},
|
||||
"dependencies": {
|
||||
"asar": "^3.0.3",
|
||||
"chalk": "^4.1.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/notion-enhancer/notion-enhancer.git"
|
||||
@ -31,12 +38,5 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/notion-enhancer/notion-enhancer/issues"
|
||||
},
|
||||
"homepage": "https://dragonwocky.me/notion-enhancer",
|
||||
"dependencies": {
|
||||
"asar": "^3.0.3",
|
||||
"cac": "^6.5.12",
|
||||
"fs-extra": "^9.0.1",
|
||||
"keyboardevent-from-electron-accelerator": "^2.0.0",
|
||||
"readdir-enhanced": "^6.0.3"
|
||||
}
|
||||
"homepage": "https://github.com/notion-enhancer/notion-enhancer"
|
||||
}
|
||||
|
||||
107
pkg/Info.plist
107
pkg/Info.plist
@ -1,107 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>AsarIntegrity</key>
|
||||
<string>{"checksums":{"app.asar":"ZpfV8GYpkh6txWRLY2kyhxy+u/IqxXQicxy6MJr5nNo+FpB7+OvoU+S+6vpgTFAriFyk1Vzdm3LL3r2YdtqkKQ==","electron.asar":"GSTmZZ4QxBFCHgDFXN5eV94sbMRBgM04kw+f9bM+XZB00NCsFz1+8yIOYHycj0X6OoxeOOi08sk4Epi5a2kCDQ=="}}</string>
|
||||
<key>BuildMachineOSBuild</key>
|
||||
<string>17D102</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>Notion</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>Notion</string>
|
||||
<key>CFBundleIconFile</key>
|
||||
<string>Notion.icns</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>notion.id</string>
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
<string>Notion</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>APPL</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>2.0.8</string>
|
||||
<key>CFBundleURLTypes</key>
|
||||
<array>
|
||||
<dict>
|
||||
<key>CFBundleTypeRole</key>
|
||||
<string>Editor</string>
|
||||
<key>CFBundleURLName</key>
|
||||
<string>notion</string>
|
||||
<key>CFBundleURLSchemes</key>
|
||||
<array>
|
||||
<string>notion</string>
|
||||
</array>
|
||||
</dict>
|
||||
</array>
|
||||
<key>CFBundleVersion</key>
|
||||
<string>2.0.8</string>
|
||||
<key>DTCompiler</key>
|
||||
<string>com.apple.compilers.llvm.clang.1_0</string>
|
||||
<key>DTSDKBuild</key>
|
||||
<string>10.13</string>
|
||||
<key>DTSDKName</key>
|
||||
<string>macosx10.13</string>
|
||||
<key>DTXcode</key>
|
||||
<string>0941</string>
|
||||
<key>DTXcodeBuild</key>
|
||||
<string>9F2000</string>
|
||||
<key>LSApplicationCategoryType</key>
|
||||
<string>public.app-category.productivity</string>
|
||||
<key>LSMinimumSystemVersion</key>
|
||||
<string>10.10.0</string>
|
||||
<key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSAllowsArbitraryLoads</key>
|
||||
<true/>
|
||||
<key>NSAllowsLocalNetworking</key>
|
||||
<true/>
|
||||
<key>NSExceptionDomains</key>
|
||||
<dict>
|
||||
<key>127.0.0.1</key>
|
||||
<dict>
|
||||
<key>NSIncludesSubdomains</key>
|
||||
<false/>
|
||||
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
|
||||
<true/>
|
||||
<key>NSTemporaryExceptionAllowsInsecureHTTPSLoads</key>
|
||||
<false/>
|
||||
<key>NSTemporaryExceptionMinimumTLSVersion</key>
|
||||
<string>1.0</string>
|
||||
<key>NSTemporaryExceptionRequiresForwardSecrecy</key>
|
||||
<false/>
|
||||
</dict>
|
||||
<key>localhost</key>
|
||||
<dict>
|
||||
<key>NSIncludesSubdomains</key>
|
||||
<false/>
|
||||
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
|
||||
<true/>
|
||||
<key>NSTemporaryExceptionAllowsInsecureHTTPSLoads</key>
|
||||
<false/>
|
||||
<key>NSTemporaryExceptionMinimumTLSVersion</key>
|
||||
<string>1.0</string>
|
||||
<key>NSTemporaryExceptionRequiresForwardSecrecy</key>
|
||||
<false/>
|
||||
</dict>
|
||||
</dict>
|
||||
</dict>
|
||||
<key>NSCameraUsageDescription</key>
|
||||
<string>This app needs access to the camera</string>
|
||||
<key>NSHighResolutionCapable</key>
|
||||
<true/>
|
||||
<key>NSHumanReadableCopyright</key>
|
||||
<string>Copyright © 2020 Notion Labs, Incorporated</string>
|
||||
<key>NSMainNibFile</key>
|
||||
<string>MainMenu</string>
|
||||
<key>NSMicrophoneUsageDescription</key>
|
||||
<string>This app needs access to the microphone</string>
|
||||
<key>NSPrincipalClass</key>
|
||||
<string>AtomApplication</string>
|
||||
<key>NSSupportsAutomaticGraphicsSwitching</key>
|
||||
<true/>
|
||||
<key>NSRequiresAquaSystemAppearance</key>
|
||||
<false/>
|
||||
</dict>
|
||||
</plist>
|
||||
296
pkg/apply.js
296
pkg/apply.js
@ -1,193 +1,133 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs-extra'),
|
||||
path = require('path'),
|
||||
{ readdirIterator } = require('readdir-enhanced'),
|
||||
{ extractAll } = require('asar'),
|
||||
{ readline, realpath, getNotionResources } = require('./helpers.js'),
|
||||
{ version } = require('../package.json');
|
||||
import fs from 'fs';
|
||||
import fsp from 'fs/promises';
|
||||
import path from 'path';
|
||||
import asar from 'asar';
|
||||
import check from './check.js';
|
||||
import remove from './remove.js';
|
||||
import { locations, line, files } from './helpers.js';
|
||||
|
||||
// === title ===
|
||||
// ...information
|
||||
// * warning
|
||||
// > prompt
|
||||
// -- response
|
||||
// ~~ exit
|
||||
// ### error ###
|
||||
|
||||
module.exports = async function ({ overwrite_version, friendly_errors } = {}) {
|
||||
const __notion = getNotionResources();
|
||||
try {
|
||||
// handle pre-existing installations: app.asar present? version set in data folder? overwrite?
|
||||
const check_app = await require('./check.js')();
|
||||
switch (check_app.code) {
|
||||
case 1:
|
||||
throw Error(check_app.msg);
|
||||
case 2:
|
||||
console.info(`~~ notion-enhancer v${version} already applied.`);
|
||||
return true;
|
||||
case 3:
|
||||
console.warn(` * ${check_app.msg}`);
|
||||
const valid = () =>
|
||||
typeof overwrite_version === 'string' &&
|
||||
['y', 'n', ''].includes(overwrite_version.toLowerCase());
|
||||
if (valid()) {
|
||||
console.info(
|
||||
` > overwrite? [Y/n]: ${overwrite_version.toLowerCase()}`
|
||||
);
|
||||
}
|
||||
while (!valid()) {
|
||||
process.stdout.write(' > overwrite? [Y/n]: ');
|
||||
overwrite_version = await readline();
|
||||
}
|
||||
if (overwrite_version.toLowerCase() === 'n') {
|
||||
console.info(' ~~ keeping previous version: exiting.');
|
||||
return false;
|
||||
}
|
||||
console.info(
|
||||
' -- removing previous enhancements before applying new version.'
|
||||
);
|
||||
if (
|
||||
!(await require('./remove.js')({
|
||||
delete_data: 'n',
|
||||
friendly_errors,
|
||||
}))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (check_app.executable.endsWith('app.asar')) {
|
||||
console.info(' ...unpacking app.asar.');
|
||||
const asar_bak = path.resolve(`${__notion}/app.asar.bak`);
|
||||
extractAll(check_app.executable, `${path.resolve(`${__notion}/app`)}`);
|
||||
if (await fs.pathExists(asar_bak)) fs.remove(asar_bak);
|
||||
await fs.move(check_app.executable, asar_bak);
|
||||
} else {
|
||||
console.info(' ...backing up default app.');
|
||||
await fs.copy(check_app.executable, check_app.executable + '.bak');
|
||||
}
|
||||
|
||||
// patching launch script target of custom wrappers
|
||||
if (
|
||||
[
|
||||
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
||||
'/opt/notion', // https://github.com/jaredallard/notion-app
|
||||
].includes(__notion)
|
||||
) {
|
||||
export default async function ({
|
||||
overwriteOld,
|
||||
__notion = locations.notion(),
|
||||
} = {}) {
|
||||
let status = check({ __notion }),
|
||||
spinner;
|
||||
switch (status.code) {
|
||||
case 1:
|
||||
throw Error(status.msg);
|
||||
case 2:
|
||||
console.info(
|
||||
' ...patching app launcher (notion-app linux wrappers only).'
|
||||
line.chalk` {grey * notion-enhancer v${status.version} already applied}`
|
||||
);
|
||||
for (let bin_path of [
|
||||
`/usr/bin/${__notion.split('/')[2]}`,
|
||||
`${__notion}/${__notion.split('/')[2]}`,
|
||||
]) {
|
||||
const bin_script = await fs.readFile(bin_path, 'utf8');
|
||||
if (bin_script.includes('app.asar')) {
|
||||
await fs.outputFile(
|
||||
bin_path,
|
||||
bin_script
|
||||
.replace('electron app.asar', 'electron app')
|
||||
.replace('electron6 app.asar', 'electron6 app')
|
||||
);
|
||||
}
|
||||
return true;
|
||||
case 3:
|
||||
console.warn(` * ${status.msg}`);
|
||||
const prompt = {
|
||||
prefix: line.chalk` {inverse > overwrite? [Y/n]:} `,
|
||||
responses: ['Y', 'y', 'N', 'n', ''],
|
||||
},
|
||||
action = prompt.responses.includes(overwriteOld)
|
||||
? overwriteOld
|
||||
: (await line.read(prompt.prefix, prompt.responses)).toLowerCase();
|
||||
if (action.toLowerCase() === 'n') {
|
||||
console.info(' * keeping previous version: exiting');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
await remove({ deleteConfig: 'n', deleteCache: 'n' });
|
||||
status = check();
|
||||
}
|
||||
if (status.executable.endsWith('app.asar')) {
|
||||
spinner = line.spinner(' * unpacking app files').loop();
|
||||
asar.extractAll(
|
||||
status.executable,
|
||||
status.executable.replace(/\.asar$/, '')
|
||||
);
|
||||
spinner.stop();
|
||||
spinner = line.spinner(' * backing up default app').loop();
|
||||
await fsp.rename(status.executable, status.executable + '.bak');
|
||||
status.executable = status.executable.replace(/\.asar$/, '');
|
||||
spinner.stop();
|
||||
} else {
|
||||
spinner = line.spinner(' * backing up default app').loop();
|
||||
await files.copyDir(status.executable, status.executable + '.bak');
|
||||
spinner.stop();
|
||||
}
|
||||
|
||||
// patching app properties so dark/light mode can be detected
|
||||
if (
|
||||
process.platform === 'darwin' &&
|
||||
(await fs.pathExists(path.resolve(`${__notion}/../Info.plist`)))
|
||||
) {
|
||||
fs.copy(
|
||||
path.resolve(`${__dirname}/Info.plist`),
|
||||
path.resolve(`${__notion}/../Info.plist`),
|
||||
{ overwrite: true }
|
||||
);
|
||||
}
|
||||
|
||||
for await (let insertion_target of readdirIterator(
|
||||
path.resolve(`${__notion}/app`),
|
||||
{
|
||||
deep: (stats) => stats.path.indexOf('node_modules') === -1,
|
||||
filter: (stats) => stats.isFile() && stats.path.endsWith('.js'),
|
||||
}
|
||||
)) {
|
||||
const insertion_file = path.resolve(
|
||||
`${__notion}/app/${insertion_target}`
|
||||
);
|
||||
if (insertion_target === 'main/main.js') {
|
||||
// https://github.com/notion-enhancer/notion-enhancer/issues/160
|
||||
// patch the notion:// url scheme/protocol to work on linux
|
||||
fs.readFile(insertion_file, 'utf8', (err, data) => {
|
||||
if (err) throw err;
|
||||
fs.writeFile(
|
||||
insertion_file,
|
||||
`${data
|
||||
.replace(
|
||||
/process.platform === "win32"/g,
|
||||
'process.platform === "win32" || process.platform === "linux"'
|
||||
)
|
||||
.replace(
|
||||
/else \{[\s\n]+const win = createWindow_1\.createWindow\(relativeUrl\);/g,
|
||||
'else if (relativeUrl) { const win = createWindow_1.createWindow(relativeUrl);'
|
||||
)}\n\n//notion-enhancer\nrequire('${realpath(
|
||||
__dirname
|
||||
)}/loader.js')(__filename, exports);`,
|
||||
'utf8',
|
||||
(err) => {
|
||||
if (err) throw err;
|
||||
}
|
||||
);
|
||||
});
|
||||
} else {
|
||||
fs.appendFile(
|
||||
insertion_file,
|
||||
`\n\n//notion-enhancer\nrequire('${realpath(
|
||||
__dirname
|
||||
)}/loader.js')(__filename, exports);`
|
||||
if (
|
||||
status.packed &&
|
||||
[
|
||||
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
||||
'/opt/notion', // https://github.com/jaredallard/notion-app
|
||||
].includes(__notion)
|
||||
) {
|
||||
spinner = line
|
||||
.spinner(
|
||||
line.chalk` * patching app launcher {grey (notion-app linux wrappers only)}`
|
||||
)
|
||||
.loop();
|
||||
for (let bin of [
|
||||
`/usr/bin/${__notion.split('/')[2]}`,
|
||||
`${__notion}/${__notion.split('/')[2]}`,
|
||||
]) {
|
||||
const script = await fsp.readFile(bin, 'utf8');
|
||||
if (script.includes('app.asar')) {
|
||||
await fsp.writeFile(
|
||||
bin,
|
||||
script.replace(/(electron\d*) app(.asar)+/g, '$1 app')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// not resolved, nothing else in apply process depends on it
|
||||
// so it's just a "let it do its thing"
|
||||
console.info(' ...recording enhancement version.');
|
||||
fs.outputFile(
|
||||
path.resolve(`${__notion}/app/ENHANCER_VERSION.txt`),
|
||||
version
|
||||
);
|
||||
|
||||
console.info(' ~~ success.');
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('### ERROR ###');
|
||||
if (err.code === 'EACCES' && friendly_errors) {
|
||||
console.error(
|
||||
`file access forbidden - ${
|
||||
process.platform === 'win32'
|
||||
? 'make sure your user has elevated permissions.'
|
||||
: `try running "sudo chmod -R a+wr ${err.path.replace(
|
||||
'Notion.app',
|
||||
'Notion'
|
||||
)}" ${
|
||||
err.dest
|
||||
? `and/or "sudo chmod -R a+wr ${err.dest.replace(
|
||||
'Notion.app',
|
||||
'Notion'
|
||||
)}"`
|
||||
: ''
|
||||
}`
|
||||
}, and make sure path(s) are not open.`
|
||||
);
|
||||
} else if (['EIO', 'EBUSY'].includes(err.code) && friendly_errors) {
|
||||
console.error("file access failed: make sure notion isn't running!");
|
||||
} else console.error(err);
|
||||
return false;
|
||||
spinner.stop();
|
||||
}
|
||||
};
|
||||
|
||||
// todo: patch app properties so dark/light mode can be detected
|
||||
// process.platform === 'darwin' && path.resolve(`${status.executable}/../../Info.plist`)
|
||||
|
||||
spinner = line
|
||||
.spinner(' * inserting enhancements + recording version')
|
||||
.loop();
|
||||
|
||||
for (let file of (await files.readDirDeep(status.executable))
|
||||
.map((file) => file.path)
|
||||
.filter((file) => file.endsWith('.js') && !file.includes('node_modules'))) {
|
||||
const target = file.slice(status.executable.length + 1);
|
||||
let replacer = path.resolve(
|
||||
`${files.__dirname(import.meta)}/replacers/${target}`
|
||||
);
|
||||
if (fs.existsSync(replacer)) {
|
||||
replacer = (await import(replacer)).default;
|
||||
await replacer(file);
|
||||
}
|
||||
await fsp.appendFile(
|
||||
file,
|
||||
`\n\n//notion-enhancer\nrequire('notion-enhancer')('${target}', exports);`
|
||||
);
|
||||
}
|
||||
|
||||
const node_modules = path.resolve(
|
||||
`${status.executable}/node_modules/notion-enhancer`
|
||||
);
|
||||
await files.copyDir(
|
||||
`${files.__dirname(import.meta)}/../insert`,
|
||||
node_modules
|
||||
);
|
||||
await fsp.writeFile(
|
||||
path.resolve(`${node_modules}/package.json`),
|
||||
`{
|
||||
"name": "notion-enhancer",
|
||||
"version": "${files.pkgJSON().version}",
|
||||
"main": "loader.js"
|
||||
}`
|
||||
);
|
||||
|
||||
spinner.stop();
|
||||
return true;
|
||||
}
|
||||
|
||||
89
pkg/check.js
89
pkg/check.js
@ -1,70 +1,75 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs-extra'),
|
||||
path = require('path'),
|
||||
{ getNotionResources } = require('./helpers.js'),
|
||||
{ version } = require('../package.json');
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { locations, files } from './helpers.js';
|
||||
|
||||
module.exports = async function () {
|
||||
const __notion = getNotionResources(),
|
||||
resolvePath = (filepath) => path.resolve(`${__notion}/${filepath}`),
|
||||
pathExists = (filepath) => fs.pathExists(resolvePath(filepath)),
|
||||
version_path = 'app/ENHANCER_VERSION.txt',
|
||||
packed = await pathExists('app.asar.bak');
|
||||
let backup = packed
|
||||
? (await pathExists('app.asar.bak'))
|
||||
? `app.asar.bak`
|
||||
export default function ({ __notion = locations.notion() }) {
|
||||
const resolvePath = (filepath) => path.resolve(`${__notion}/${filepath}`),
|
||||
pathExists = (filepath) => fs.existsSync(resolvePath(filepath)),
|
||||
enhancerVersion = files.pkgJSON().version;
|
||||
let notion = {
|
||||
packed: pathExists('app.asar.bak'),
|
||||
};
|
||||
notion.backup = notion.packed
|
||||
? pathExists('app.asar.bak')
|
||||
? 'app.asar.bak'
|
||||
: undefined
|
||||
: (await pathExists('app.bak'))
|
||||
: pathExists('app.bak')
|
||||
? 'app.bak'
|
||||
: undefined;
|
||||
if (!(await pathExists(version_path))) {
|
||||
let executable = (await pathExists('app'))
|
||||
if (!pathExists('app/node_modules/notion-enhancer')) {
|
||||
notion.executable = pathExists('app')
|
||||
? 'app'
|
||||
: (await pathExists('app.asar'))
|
||||
: pathExists('app.asar')
|
||||
? 'app.asar'
|
||||
: undefined;
|
||||
if (!executable && backup) {
|
||||
backup = resolvePath(backup);
|
||||
executable = backup.replace(/\.bak$/, '');
|
||||
await fs.move(backup, executable);
|
||||
} else executable = executable ? resolvePath(executable) : '';
|
||||
return executable
|
||||
if (!notion.executable && notion.backup) {
|
||||
notion.restored = true;
|
||||
notion.backup = resolvePath(notion.backup);
|
||||
notion.executable = notion.backup.replace(/\.bak$/, '');
|
||||
fs.renameSync(notion.backup, notion.executable);
|
||||
} else {
|
||||
notion.executable = notion.executable
|
||||
? resolvePath(notion.executable)
|
||||
: '';
|
||||
}
|
||||
return notion.executable
|
||||
? {
|
||||
code: 0,
|
||||
msg: `notion-enhancer has not been applied.`,
|
||||
executable,
|
||||
executable: notion.executable,
|
||||
restored: notion.restored || false,
|
||||
}
|
||||
: {
|
||||
code: 1,
|
||||
msg: `notion installation has been corrupted: no executable found.`,
|
||||
restored: notion.restored || false,
|
||||
};
|
||||
}
|
||||
const installed_version = await fs.readFile(
|
||||
resolvePath(version_path),
|
||||
'utf8'
|
||||
),
|
||||
meta = {
|
||||
version: installed_version,
|
||||
executable: resolvePath('app'),
|
||||
packed: resolvePath(packed),
|
||||
backup: resolvePath(backup),
|
||||
};
|
||||
return installed_version === version
|
||||
notion = {
|
||||
version: files.readJSON(
|
||||
resolvePath('app/node_modules/notion-enhancer/package.json')
|
||||
).version,
|
||||
executable: resolvePath('app'),
|
||||
packed: resolvePath(notion.packed),
|
||||
backup: resolvePath(notion.backup),
|
||||
};
|
||||
return notion.version === enhancerVersion
|
||||
? {
|
||||
code: 2,
|
||||
msg: `notion-enhancer v${version} applied.`,
|
||||
...meta,
|
||||
msg: `notion-enhancer v${enhancerVersion} applied.`,
|
||||
...notion,
|
||||
}
|
||||
: {
|
||||
code: 3,
|
||||
msg: `notion-enhancer v${installed_version} found applied != v${version} package.`,
|
||||
...meta,
|
||||
msg: `notion-enhancer v${notion.version} found applied != v${enhancerVersion} package.`,
|
||||
...notion,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
411
pkg/helpers.js
411
pkg/helpers.js
@ -6,190 +6,245 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const os = require('os'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra'),
|
||||
{ execSync } = require('child_process');
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
import fsp from 'fs/promises';
|
||||
import path from 'path';
|
||||
import chalk from 'chalk';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { execSync } from 'child_process';
|
||||
|
||||
// used to differentiate between "enhancer failed" and "code broken" errors.
|
||||
class EnhancerError extends Error {
|
||||
constructor(message) {
|
||||
super(message);
|
||||
this.name = 'EnhancerError';
|
||||
}
|
||||
}
|
||||
|
||||
// checks if being run on the windows subsystem for linux:
|
||||
// used to modify windows notion app.
|
||||
const is_wsl =
|
||||
const platform =
|
||||
process.platform === 'linux' &&
|
||||
os.release().toLowerCase().includes('microsoft'),
|
||||
// ~/.notion-enhancer absolute path.
|
||||
__data = path.resolve(
|
||||
`${
|
||||
is_wsl
|
||||
? (() => {
|
||||
const stdout = execSync('cmd.exe /c echo %systemdrive%%homepath%', {
|
||||
encoding: 'utf8',
|
||||
}),
|
||||
drive = stdout[0];
|
||||
return `/mnt/${drive.toLowerCase()}${stdout
|
||||
.replace(/\\/g, '/')
|
||||
.slice(2)
|
||||
.trim()}`;
|
||||
})()
|
||||
: os.homedir()
|
||||
}/.notion-enhancer`
|
||||
);
|
||||
os.release().toLowerCase().includes('microsoft')
|
||||
? 'wsl'
|
||||
: process.platform,
|
||||
locationCache = {};
|
||||
|
||||
// transform a wsl filepath to its relative windows filepath if necessary.
|
||||
function realpath(hack_path) {
|
||||
if (!is_wsl) return hack_path.replace(/\\/g, '/');
|
||||
hack_path = fs.realpathSync(hack_path);
|
||||
if (hack_path.startsWith('/mnt/')) {
|
||||
hack_path = `${hack_path[5].toUpperCase()}:${hack_path.slice(6)}`;
|
||||
} else hack_path = `//wsl$/${process.env.WSL_DISTRO_NAME}${hack_path}`;
|
||||
return hack_path;
|
||||
}
|
||||
|
||||
// gets possible system notion app filepaths.
|
||||
function getNotionResources() {
|
||||
let folder = '';
|
||||
switch (process.platform) {
|
||||
case 'darwin':
|
||||
folder = '/Applications/Notion.app/Contents/Resources';
|
||||
break;
|
||||
case 'win32':
|
||||
folder = process.env.LOCALAPPDATA + '\\Programs\\Notion\\resources';
|
||||
break;
|
||||
case 'linux':
|
||||
if (is_wsl) {
|
||||
const stdout = execSync('cmd.exe /c echo %localappdata%', {
|
||||
export const locations = {
|
||||
notion() {
|
||||
if (locationCache.notion) return locationCache.notion;
|
||||
switch (platform) {
|
||||
case 'darwin':
|
||||
locationCache.notion = '/Applications/Notion.app/Contents/Resources';
|
||||
break;
|
||||
case 'win32':
|
||||
locationCache.notion =
|
||||
process.env.LOCALAPPDATA + '\\Programs\\Notion\\resources';
|
||||
break;
|
||||
case 'wsl':
|
||||
const [drive, ...windowsPath] = execSync(
|
||||
'cmd.exe /c echo %localappdata%',
|
||||
{
|
||||
encoding: 'utf8',
|
||||
}),
|
||||
drive = stdout[0];
|
||||
folder = `/mnt/${drive.toLowerCase()}${stdout
|
||||
.replace(/\\/g, '/')
|
||||
.slice(2)
|
||||
.trim()}/Programs/Notion/resources`;
|
||||
} else {
|
||||
for (let loc of [
|
||||
stdio: 'pipe',
|
||||
}
|
||||
);
|
||||
locationCache.notion = `/mnt/${drive.toLowerCase()}${windowsPath
|
||||
.slice(1, -2)
|
||||
.join('')
|
||||
.replace(/\\/g, '/')}/Programs/Notion/resources`;
|
||||
break;
|
||||
case 'linux':
|
||||
for (let folder of [
|
||||
'/usr/lib/notion-desktop/resources', // https://github.com/davidbailey00/notion-deb-builder/
|
||||
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
||||
'/opt/notion', // https://github.com/jaredallard/notion-app
|
||||
]) {
|
||||
if (fs.pathExistsSync(loc)) folder = loc;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!folder)
|
||||
throw new EnhancerError('nothing found: platform not supported.');
|
||||
return folder;
|
||||
}
|
||||
|
||||
// lists/fetches all available extensions + themes
|
||||
function getEnhancements() {
|
||||
const modules = {
|
||||
loaded: [],
|
||||
invalid: [],
|
||||
dirs: fs
|
||||
.readdirSync(path.resolve(`${__dirname}/../mods`))
|
||||
.filter((dir) => !dir.startsWith('.')),
|
||||
IDs: [],
|
||||
};
|
||||
for (let dir of modules.dirs) {
|
||||
try {
|
||||
const mod = require(`../mods/${dir}/mod.js`);
|
||||
if (!mod.tags) mod.tags = [];
|
||||
if (
|
||||
!mod.id ||
|
||||
modules.IDs.includes(mod.id) ||
|
||||
!mod.name ||
|
||||
!mod.version ||
|
||||
!mod.author ||
|
||||
!mod.tags.every((tag) => typeof tag === 'string') ||
|
||||
(mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
|
||||
(mod.options &&
|
||||
!mod.options.every((opt) =>
|
||||
['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
|
||||
))
|
||||
)
|
||||
throw Error;
|
||||
mod.defaults = {};
|
||||
for (let opt of mod.options || []) {
|
||||
if (
|
||||
Object.keys(opt.platformOverwrite || {}).some(
|
||||
(platform) => process.platform === platform
|
||||
)
|
||||
) {
|
||||
mod.defaults[opt.key] = opt.platformOverwrite[process.platform];
|
||||
} else
|
||||
mod.defaults[opt.key] = Array.isArray(opt.value)
|
||||
? opt.value[0]
|
||||
: opt.value;
|
||||
}
|
||||
modules.IDs.push(mod.id);
|
||||
modules.loaded.push({
|
||||
...mod,
|
||||
dir,
|
||||
});
|
||||
if (!mod.tags.includes('core')) mod.alwaysActive = false;
|
||||
} catch (err) {
|
||||
// console.error(err);
|
||||
modules.invalid.push(dir);
|
||||
])
|
||||
if (fs.existsSync(folder)) locationCache.notion = folder;
|
||||
}
|
||||
}
|
||||
modules.loaded = modules.loaded.sort((a, b) => a.name.localeCompare(b.name));
|
||||
const priority = require('./store.js')('mods', { priority: [] }).priority;
|
||||
modules.loaded = [
|
||||
...modules.loaded.filter((m) => m.tags.includes('core')),
|
||||
...modules.loaded.filter(
|
||||
(m) => !m.tags.includes('core') && !priority.includes(m.id)
|
||||
),
|
||||
...priority
|
||||
.map((id) => modules.loaded.find((m) => m.id === id))
|
||||
.filter((m) => m),
|
||||
];
|
||||
return modules;
|
||||
}
|
||||
|
||||
// attempts to read a JSON file, falls back to empty object.
|
||||
function getJSON(from) {
|
||||
try {
|
||||
return fs.readJsonSync(from);
|
||||
} catch (err) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// wait for console input, returns keys when enter pressed.
|
||||
function readline() {
|
||||
return new Promise((res, rej) => {
|
||||
process.stdin.resume();
|
||||
process.stdin.setEncoding('utf8');
|
||||
process.stdin.on('data', (key) => {
|
||||
if (key === '\u0003') process.exit(); // CTRL+C
|
||||
process.stdin.pause();
|
||||
res(key.trim());
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// construct a HTMLElement from a string
|
||||
function createElement(html) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstElementChild;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
EnhancerError,
|
||||
is_wsl,
|
||||
__data,
|
||||
realpath,
|
||||
getNotionResources,
|
||||
getEnhancements,
|
||||
getJSON,
|
||||
readline,
|
||||
createElement,
|
||||
return locationCache.notion;
|
||||
},
|
||||
enhancer() {
|
||||
if (locationCache.enhancer) return locationCache.enhancer;
|
||||
let home = os.homedir();
|
||||
if (platform === 'wsl') {
|
||||
const [drive, ...windowsPath] = execSync(
|
||||
'cmd.exe /c echo %systemdrive%%homepath%',
|
||||
{
|
||||
encoding: 'utf8',
|
||||
stdio: 'pipe',
|
||||
}
|
||||
);
|
||||
home = `/mnt/${drive.toLowerCase()}${windowsPath
|
||||
.slice(1, -2)
|
||||
.join('')
|
||||
.replace(/\\/g, '/')}`;
|
||||
}
|
||||
locationCache.enhancer = path.resolve(`${home}/.notion-enhancer`);
|
||||
return locationCache.enhancer;
|
||||
},
|
||||
config() {
|
||||
return `${this.enhancer()}/config`;
|
||||
},
|
||||
cache() {
|
||||
return `${this.enhancer()}/cache`;
|
||||
},
|
||||
};
|
||||
|
||||
export const line = {
|
||||
chalk: chalk,
|
||||
style: {
|
||||
title: chalk.bold.rgb(245, 245, 245),
|
||||
},
|
||||
clear: () => process.stdout.write('\r\x1b[K'),
|
||||
write: (string) => process.stdout.write(string),
|
||||
prev: (n = 1) => process.stdout.write(`\x1b[${n}A`),
|
||||
next: (n = 1) => process.stdout.write(`\x1b[${n}B`),
|
||||
forward: (n = 1) => process.stdout.write(`\x1b[${n}C`),
|
||||
back: (n = 1) => process.stdout.write(`\x1b[${n}D`),
|
||||
new: () => process.stdout.write('\n'),
|
||||
async read(prompt = '', values = []) {
|
||||
let input = '';
|
||||
this.write(prompt);
|
||||
this.new();
|
||||
do {
|
||||
for (let i = 0; i < prompt.split('\n').length; i++) {
|
||||
this.prev();
|
||||
this.clear();
|
||||
}
|
||||
this.write(prompt);
|
||||
input = await new Promise((res, rej) => {
|
||||
process.stdin.resume();
|
||||
process.stdin.setEncoding('utf8');
|
||||
process.stdin.once('data', (key) => {
|
||||
process.stdin.pause();
|
||||
res(key.slice(0, -1));
|
||||
});
|
||||
});
|
||||
} while (values.length && !values.includes(input));
|
||||
return input;
|
||||
},
|
||||
spinner(
|
||||
message,
|
||||
frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
|
||||
complete = '→'
|
||||
) {
|
||||
const spinner = {
|
||||
message,
|
||||
frames,
|
||||
complete,
|
||||
interval: undefined,
|
||||
i: 0,
|
||||
};
|
||||
spinner.step = () => {
|
||||
spinner.i = (spinner.i + 1) % spinner.frames.length;
|
||||
this.clear();
|
||||
this.write(
|
||||
line.chalk`${spinner.message} {bold.yellow ${frames[spinner.i]}} `
|
||||
);
|
||||
return spinner;
|
||||
};
|
||||
spinner.loop = (ms = 80) => {
|
||||
if (!spinner.interval) spinner.interval = setInterval(spinner.step, ms);
|
||||
return spinner;
|
||||
};
|
||||
spinner.stop = () => {
|
||||
if (spinner.interval) clearInterval(spinner.interval);
|
||||
this.clear();
|
||||
this.write(line.chalk`${spinner.message} {bold.yellow ${complete}}\r\n`);
|
||||
return spinner;
|
||||
};
|
||||
spinner.step();
|
||||
return spinner;
|
||||
},
|
||||
};
|
||||
|
||||
export const cli = {
|
||||
args() {
|
||||
return process.argv.slice(2).filter((arg) => !arg.startsWith('-'));
|
||||
},
|
||||
options(aliases = {}) {
|
||||
return new Map(
|
||||
process.argv
|
||||
.slice(2)
|
||||
.filter((arg) => arg.startsWith('-'))
|
||||
.map((arg) => {
|
||||
let opt,
|
||||
val = true;
|
||||
if (arg.startsWith('--')) {
|
||||
if (arg.includes('=')) {
|
||||
[opt, val] = arg.slice(2).split(/=((.+)|$)/);
|
||||
} else opt = arg.slice(2);
|
||||
} else {
|
||||
opt = arg.slice(1);
|
||||
}
|
||||
if (parseInt(val).toString() === val) val = +val;
|
||||
if (aliases[opt]) opt = aliases[opt];
|
||||
return [opt, val];
|
||||
})
|
||||
);
|
||||
},
|
||||
help({
|
||||
name = process.argv[1].split('/').reverse()[0],
|
||||
usage = `${name} <command> [options]`,
|
||||
version = '',
|
||||
link = '',
|
||||
commands = [],
|
||||
options = [],
|
||||
}) {
|
||||
if (version) version = ' v' + version;
|
||||
if (link) link = '\n' + link;
|
||||
const cmdPad = Math.max(...commands.map((cmd) => cmd[0].length));
|
||||
commands = commands
|
||||
.map((cmd) => ` ${cmd[0].padEnd(cmdPad)} : ${cmd[1]}`)
|
||||
.join('\n');
|
||||
const optPad = Math.max(...options.map((opt) => opt[0].length));
|
||||
options = options
|
||||
.map((opt) => ` ${opt[0].padEnd(optPad)} : ${opt[1]}`)
|
||||
.join('\n');
|
||||
return `${line.style.title(name)}${line.style.title(version)}${link}
|
||||
\n${line.style.title('USAGE')}
|
||||
${line.chalk.yellow('$')} ${usage}
|
||||
\n${line.style.title('COMMANDS')}\n${commands}
|
||||
\n${line.style.title('OPTIONS')}\n${options}`;
|
||||
},
|
||||
};
|
||||
|
||||
export const files = {
|
||||
__dirname: (meta) => path.dirname(fileURLToPath(meta.url)),
|
||||
readJSON(file, defaults = {}) {
|
||||
try {
|
||||
return {
|
||||
...defaults,
|
||||
...JSON.parse(fs.readFileSync(path.resolve(file))),
|
||||
};
|
||||
} catch {
|
||||
return defaults;
|
||||
}
|
||||
},
|
||||
pkgJSON() {
|
||||
return this.readJSON(`${this.__dirname(import.meta)}/../package.json`);
|
||||
},
|
||||
async copyDir(src, dest) {
|
||||
src = path.resolve(src);
|
||||
dest = path.resolve(dest);
|
||||
if (!fs.existsSync(dest)) await fsp.mkdir(dest);
|
||||
for (let file of await fsp.readdir(src)) {
|
||||
const stat = await fsp.lstat(path.join(src, file));
|
||||
if (stat.isDirectory()) {
|
||||
await this.copyDir(path.join(src, file), path.join(dest, file));
|
||||
} else if (stat.isSymbolicLink()) {
|
||||
await fsp.symlink(
|
||||
await fsp.readlink(path.join(src, file)),
|
||||
path.join(dest, file)
|
||||
);
|
||||
} else await fsp.copyFile(path.join(src, file), path.join(dest, file));
|
||||
}
|
||||
return true;
|
||||
},
|
||||
async readDirDeep(dir) {
|
||||
dir = path.resolve(dir);
|
||||
let files = [];
|
||||
for (let file of await fsp.readdir(dir)) {
|
||||
file = path.join(dir, file);
|
||||
const stat = await fsp.lstat(file);
|
||||
if (stat.isDirectory()) {
|
||||
files = files.concat(await this.readDirDeep(file));
|
||||
} else if (stat.isSymbolicLink()) {
|
||||
files.push({ type: 'symbolic', path: file });
|
||||
} else files.push({ type: 'file', path: file });
|
||||
}
|
||||
return files;
|
||||
},
|
||||
};
|
||||
|
||||
142
pkg/helpers.md
142
pkg/helpers.md
@ -1,142 +0,0 @@
|
||||
# `helpers.js`
|
||||
|
||||
these shared variables/classes/functions (used for consistency of error handling and
|
||||
cross-platform functionality) were previously documented in the [module-creation docs](../DOCUMENTATION.md).
|
||||
however, to ensure things can be toggled on/off no non-core code is executed on enhancement.
|
||||
this does made certain modding more difficult, but with some clever code the same results can be achieved.
|
||||
|
||||
it is unlikely any of these will need to be used, so they were removed from the main docs in
|
||||
an attempt to keep things as simple as possible.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
class EnhancerError(message) {}
|
||||
```
|
||||
|
||||
use `throw new helpers.EnhancerError(message)` if ever something occurs that would cause enhancement to fail,
|
||||
but is not caused by faulty programming: e.g. if a file that is known to exist cannot be found.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
const is_wsl;
|
||||
```
|
||||
|
||||
use `helpers.is_wsl` to check if the enhancer was run from the windows subsystem for linux.
|
||||
|
||||
primarily used for internal handling of filepaths (e.g. in the `helpers.realpath` function).
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
const __data;
|
||||
```
|
||||
|
||||
use `helpers.__data` to get the absolute path of the directory configuration
|
||||
data is saved to by the enhancer.
|
||||
|
||||
if used immediately after being accessed, it should always work. however, if fetching its value during enhancement
|
||||
and then inserting it into something that will not be executed until the app is opened, it must be put through
|
||||
`helpers.realpath` before insertion.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function realpath(hack_path) {
|
||||
return runtime_path;
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.realpath(hack_path)` to transform a path valid at enhancement time into one valid when the app is opened.
|
||||
this is particularly useful for wsl compatibility, so every filepath that is fetched during enhancement
|
||||
and then inserted into something that will not be executed until the app is opened should be put through this.
|
||||
|
||||
primarily used for internal handling of filepaths (e.g. for the modloader).
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function getNotionResources() {
|
||||
return __notionResourcesFolder;
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.getNotionResources()` to get the absolute path of the notion app parent folder.
|
||||
|
||||
primarily used for internal modding of the app (e.g. to apply the modloader and patch launch scripts).
|
||||
|
||||
if used immediately after being accessed, it should always work. however, if fetching its value during enhancement
|
||||
and then inserting it into something that will not be executed until the app is opened, it must be put through
|
||||
`helpers.realpath` before insertion.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function getEnhancements() {
|
||||
return { loaded, invalid, dirs, IDs };
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.getEnhancements()` to list all available extensions/themes.
|
||||
|
||||
primarily used for internal moadloading/configuration of the app (e.g. in the menu).
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function getJSON(from) {
|
||||
return data;
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.getJSON(from)` to read/parse a JSON file. if the file has invalid contents or does not exist,
|
||||
an empty object will be returned.
|
||||
|
||||
primarily used for internal data management (e.g. in the module `store()`).
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function readline() {
|
||||
return Promise(input);
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.readline()` to receive user input from the terminal/shell/prompt during enhancement.
|
||||
|
||||
example usage:
|
||||
|
||||
```js
|
||||
console.warn(' * conflicting file found.');
|
||||
let overwrite;
|
||||
while (
|
||||
typeof overwrite !== 'string' ||
|
||||
!['y', 'n', ''].includes(overwrite.toLowerCase())
|
||||
) {
|
||||
// using stdout.write means that there is no newline
|
||||
// between prompt and input.
|
||||
process.stdout.write(' > delete? [Y/n]: ');
|
||||
// ask for a Y/n until a valid answer is received.
|
||||
// pressing enter without input is assumed to be a "yes".
|
||||
overwrite = await helpers.readline();
|
||||
}
|
||||
if (overwrite.toLowerCase() === 'n') {
|
||||
console.info(' -- keeping file: skipping step.');
|
||||
} else {
|
||||
// do stuff
|
||||
console.info(' -- overwriting file.');
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function createElement(html) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstElementChild;
|
||||
}
|
||||
```
|
||||
|
||||
use `helpers.createElement(html)` to turn a html-valid string into an element to add to the page.
|
||||
107
pkg/loader.js
107
pkg/loader.js
@ -1,107 +0,0 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs-extra'),
|
||||
path = require('path'),
|
||||
{
|
||||
getNotionResources,
|
||||
getEnhancements,
|
||||
createElement,
|
||||
} = require('./helpers.js'),
|
||||
store = require('./store.js');
|
||||
|
||||
module.exports = function (__file, __exports) {
|
||||
__file = __file
|
||||
.slice(path.resolve(`${getNotionResources()}/app`).length + 1)
|
||||
.replace(/\\/g, '/');
|
||||
|
||||
if (__file === 'main/security.js') {
|
||||
const electron = require('electron');
|
||||
electron.app.whenReady().then(() => {
|
||||
electron.session
|
||||
.fromPartition('persist:notion')
|
||||
.protocol.registerFileProtocol('enhancement', (req, callback) => {
|
||||
callback({
|
||||
path: path.resolve(
|
||||
`${__dirname}/../mods/${req.url.slice('enhancement://'.length)}`
|
||||
),
|
||||
});
|
||||
});
|
||||
});
|
||||
electron.protocol.registerSchemesAsPrivileged([
|
||||
{
|
||||
scheme: 'notion',
|
||||
privileges: {
|
||||
standard: true,
|
||||
secure: true,
|
||||
allowServiceWorkers: true,
|
||||
supportFetchAPI: true,
|
||||
corsEnabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
scheme: 'enhancement',
|
||||
privileges: {
|
||||
standard: true,
|
||||
secure: true,
|
||||
allowServiceWorkers: true,
|
||||
supportFetchAPI: true,
|
||||
corsEnabled: true,
|
||||
bypassCSP: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
let modules = getEnhancements();
|
||||
modules = [
|
||||
...modules.loaded.filter((m) => m.tags.includes('core')),
|
||||
...modules.loaded.filter((m) => !m.tags.includes('core')).reverse(),
|
||||
];
|
||||
if (__file === 'renderer/preload.js') {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
for (let mod of modules) {
|
||||
if (
|
||||
mod.alwaysActive ||
|
||||
store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
|
||||
) {
|
||||
const fileExists = (file) => fs.pathExistsSync(path.resolve(file));
|
||||
for (let sheet of ['app', 'variables']) {
|
||||
if (fileExists(`${__dirname}/../mods/${mod.dir}/${sheet}.css`)) {
|
||||
document.head.appendChild(
|
||||
createElement(
|
||||
`<link rel="stylesheet" href="enhancement://${mod.dir}/${sheet}.css">`
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
for (let mod of modules) {
|
||||
if (
|
||||
(mod.alwaysActive ||
|
||||
store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled) &&
|
||||
mod.hacks &&
|
||||
mod.hacks[__file]
|
||||
) {
|
||||
mod.hacks[__file]((...args) => {
|
||||
if (!args.length) return store(mod.id, mod.defaults);
|
||||
if (args.length === 1 && typeof args[0] === 'object')
|
||||
return store(mod.id, { ...mod.defaults, ...args[0] });
|
||||
const other_mod = modules.find((m) => m.id === args[0]);
|
||||
return store(args[0], {
|
||||
...(other_mod ? other_mod.defaults : {}),
|
||||
...(args[1] || {}),
|
||||
});
|
||||
}, __exports);
|
||||
}
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user