upload wip rework: installer + themer
3
.prettierrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true
|
||||||
|
}
|
184
bin.js
@ -1,74 +1,126 @@
|
|||||||
#!/usr/bin/env node
|
#!/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';
|
'use strict';
|
||||||
|
|
||||||
const cli = require('cac')('notion-enhancer'),
|
import os from 'os';
|
||||||
{ EnhancerError } = require('./pkg/helpers.js');
|
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 ===
|
const options = cli.options({
|
||||||
// ...information
|
y: 'yes',
|
||||||
// * warning
|
n: 'no',
|
||||||
// > prompt
|
d: 'dev',
|
||||||
// -- response
|
h: 'help',
|
||||||
// ~~ exit
|
v: 'version',
|
||||||
// ### error ###
|
}),
|
||||||
|
promptResponse = options.get('yes')
|
||||||
|
? 'y'
|
||||||
|
: options.get('no')
|
||||||
|
? 'n'
|
||||||
|
: undefined;
|
||||||
|
|
||||||
cli.option('-y, --yes', ': skip prompts (may overwrite data)');
|
function displayHelp() {
|
||||||
cli.option('-n, --no', ': skip prompts (may cause failures)');
|
const pkg = files.pkgJSON();
|
||||||
cli.option('-d, --dev', ': show detailed error messages (for debug purposes)');
|
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
|
function displayVersion() {
|
||||||
.command('apply', ': add the enhancer to the notion app')
|
const pkg = files.pkgJSON();
|
||||||
.action(async (options) => {
|
console.info(
|
||||||
console.info('=== NOTION ENHANCEMENT LOG ===');
|
`${pkg.name}/${pkg.version} ${
|
||||||
await require('./pkg/apply.js')({
|
process.platform
|
||||||
overwrite_version: options.yes ? 'y' : options.no ? 'n' : undefined,
|
}-${os.arch()}/${os.release()} node/${process.version}`
|
||||||
friendly_errors: !options.dev,
|
);
|
||||||
});
|
process.exit(0);
|
||||||
console.info('=== END OF LOG ===');
|
}
|
||||||
});
|
if (options.get('version')) displayVersion();
|
||||||
cli
|
|
||||||
.command('remove', ': return notion to its pre-enhanced/pre-modded state')
|
function handleError(err) {
|
||||||
.action(async (options) => {
|
if (options.get('dev')) {
|
||||||
console.info('=== NOTION RESTORATION LOG ===');
|
console.error(
|
||||||
await require('./pkg/remove.js')({
|
err.stack
|
||||||
delete_data: options.yes ? 'y' : options.no ? 'n' : undefined,
|
.split('\n')
|
||||||
friendly_errors: !options.dev,
|
.map((text, i) => {
|
||||||
});
|
text = text.replace(/^ /, ' ');
|
||||||
console.info('=== END OF LOG ===');
|
if (i > 1) return line.chalk.grey(text);
|
||||||
});
|
if (i > 0) return text;
|
||||||
cli
|
const [type, msg] = text.split(/:((.+)|$)/);
|
||||||
.command('check', ': check the current state of the notion app')
|
return line.chalk.bold.red(`${type}:`) + msg;
|
||||||
.action(async (options) => {
|
})
|
||||||
try {
|
.join('\n')
|
||||||
const status = await require('./pkg/check.js')();
|
);
|
||||||
console.info(options.dev ? status : status.msg);
|
} else
|
||||||
} catch (err) {
|
console.error(
|
||||||
console.error(
|
line.chalk`{bold.red ERROR:} ${err.message} {grey (run with -d for more information)}`
|
||||||
err instanceof EnhancerError && !options.dev ? err.message : err
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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('✘')}`
|
||||||
);
|
);
|
||||||
}
|
break;
|
||||||
});
|
case 'remove':
|
||||||
|
console.info(line.style.title('[NOTION-ENHANCER] REMOVE'));
|
||||||
let helpCalled = false;
|
await remove({
|
||||||
cli.globalCommand.option('-h, --help', ': display usage information');
|
deleteConfig: promptResponse,
|
||||||
cli.globalCommand.helpCallback = (sections) => {
|
deleteCache: promptResponse,
|
||||||
sections[0].body += '\nhttps://github.com/notion-enhancer/notion-enhancer';
|
__notion: options.get('path') || locations.notion(),
|
||||||
helpCalled = true;
|
});
|
||||||
};
|
console.info(`${line.style.title('SUCCESS')} ${line.chalk.green('✔')}`);
|
||||||
cli.showHelpOnExit = true;
|
break;
|
||||||
|
case 'check':
|
||||||
cli.globalCommand.option('-v, --version', ': display version number');
|
case 'status':
|
||||||
cli.globalCommand.versionNumber = require('./package.json').version;
|
console.info(line.style.title('[NOTION-ENHANCER] CHECK'));
|
||||||
cli.showVersionOnExit = true;
|
const status = check({
|
||||||
|
__notion: options.get('path') || locations.notion(),
|
||||||
cli.parse();
|
});
|
||||||
|
line.prev();
|
||||||
if (!cli.matchedCommand && !helpCalled && !cli.options.version)
|
if (options.get('dev')) {
|
||||||
cli.outputHelp();
|
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
@ -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
@ -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
@ -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
1017
insert/theming/global.css
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()
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
@ -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
@ -1,16 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "notion-enhancer",
|
"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",
|
"description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
|
||||||
"main": "index.js",
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"notion-enhancer": "bin.js"
|
"notion-enhancer": "bin.js"
|
||||||
},
|
},
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.20.0"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"no test specified\"",
|
"test": "echo \"no test specified\"",
|
||||||
"postinstall": "node bin.js apply -y",
|
"postinstall": "node bin.js apply -y",
|
||||||
"preuninstall": "node bin.js remove -n"
|
"preuninstall": "node bin.js remove -n"
|
||||||
},
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"asar": "^3.0.3",
|
||||||
|
"chalk": "^4.1.0"
|
||||||
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/notion-enhancer/notion-enhancer.git"
|
"url": "git+https://github.com/notion-enhancer/notion-enhancer.git"
|
||||||
@ -31,12 +38,5 @@
|
|||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/notion-enhancer/notion-enhancer/issues"
|
"url": "https://github.com/notion-enhancer/notion-enhancer/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://dragonwocky.me/notion-enhancer",
|
"homepage": "https://github.com/notion-enhancer/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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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
@ -1,193 +1,133 @@
|
|||||||
/*
|
/*
|
||||||
* notion-enhancer
|
* notion-enhancer
|
||||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
* under the MIT license
|
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const fs = require('fs-extra'),
|
import fs from 'fs';
|
||||||
path = require('path'),
|
import fsp from 'fs/promises';
|
||||||
{ readdirIterator } = require('readdir-enhanced'),
|
import path from 'path';
|
||||||
{ extractAll } = require('asar'),
|
import asar from 'asar';
|
||||||
{ readline, realpath, getNotionResources } = require('./helpers.js'),
|
import check from './check.js';
|
||||||
{ version } = require('../package.json');
|
import remove from './remove.js';
|
||||||
|
import { locations, line, files } from './helpers.js';
|
||||||
|
|
||||||
// === title ===
|
export default async function ({
|
||||||
// ...information
|
overwriteOld,
|
||||||
// * warning
|
__notion = locations.notion(),
|
||||||
// > prompt
|
} = {}) {
|
||||||
// -- response
|
let status = check({ __notion }),
|
||||||
// ~~ exit
|
spinner;
|
||||||
// ### error ###
|
switch (status.code) {
|
||||||
|
case 1:
|
||||||
module.exports = async function ({ overwrite_version, friendly_errors } = {}) {
|
throw Error(status.msg);
|
||||||
const __notion = getNotionResources();
|
case 2:
|
||||||
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)
|
|
||||||
) {
|
|
||||||
console.info(
|
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 [
|
return true;
|
||||||
`/usr/bin/${__notion.split('/')[2]}`,
|
case 3:
|
||||||
`${__notion}/${__notion.split('/')[2]}`,
|
console.warn(` * ${status.msg}`);
|
||||||
]) {
|
const prompt = {
|
||||||
const bin_script = await fs.readFile(bin_path, 'utf8');
|
prefix: line.chalk` {inverse > overwrite? [Y/n]:} `,
|
||||||
if (bin_script.includes('app.asar')) {
|
responses: ['Y', 'y', 'N', 'n', ''],
|
||||||
await fs.outputFile(
|
},
|
||||||
bin_path,
|
action = prompt.responses.includes(overwriteOld)
|
||||||
bin_script
|
? overwriteOld
|
||||||
.replace('electron app.asar', 'electron app')
|
: (await line.read(prompt.prefix, prompt.responses)).toLowerCase();
|
||||||
.replace('electron6 app.asar', 'electron6 app')
|
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 (
|
||||||
if (
|
status.packed &&
|
||||||
process.platform === 'darwin' &&
|
[
|
||||||
(await fs.pathExists(path.resolve(`${__notion}/../Info.plist`)))
|
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
||||||
) {
|
'/opt/notion', // https://github.com/jaredallard/notion-app
|
||||||
fs.copy(
|
].includes(__notion)
|
||||||
path.resolve(`${__dirname}/Info.plist`),
|
) {
|
||||||
path.resolve(`${__notion}/../Info.plist`),
|
spinner = line
|
||||||
{ overwrite: true }
|
.spinner(
|
||||||
);
|
line.chalk` * patching app launcher {grey (notion-app linux wrappers only)}`
|
||||||
}
|
)
|
||||||
|
.loop();
|
||||||
for await (let insertion_target of readdirIterator(
|
for (let bin of [
|
||||||
path.resolve(`${__notion}/app`),
|
`/usr/bin/${__notion.split('/')[2]}`,
|
||||||
{
|
`${__notion}/${__notion.split('/')[2]}`,
|
||||||
deep: (stats) => stats.path.indexOf('node_modules') === -1,
|
]) {
|
||||||
filter: (stats) => stats.isFile() && stats.path.endsWith('.js'),
|
const script = await fsp.readFile(bin, 'utf8');
|
||||||
}
|
if (script.includes('app.asar')) {
|
||||||
)) {
|
await fsp.writeFile(
|
||||||
const insertion_file = path.resolve(
|
bin,
|
||||||
`${__notion}/app/${insertion_target}`
|
script.replace(/(electron\d*) app(.asar)+/g, '$1 app')
|
||||||
);
|
|
||||||
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);`
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
spinner.stop();
|
||||||
// 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;
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
// 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
@ -1,70 +1,75 @@
|
|||||||
/*
|
/*
|
||||||
* notion-enhancer
|
* notion-enhancer
|
||||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
* under the MIT license
|
* (https://dragonwocky.me/notion-enhancer) under the MIT license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const fs = require('fs-extra'),
|
import path from 'path';
|
||||||
path = require('path'),
|
import fs from 'fs';
|
||||||
{ getNotionResources } = require('./helpers.js'),
|
import { locations, files } from './helpers.js';
|
||||||
{ version } = require('../package.json');
|
|
||||||
|
|
||||||
module.exports = async function () {
|
export default function ({ __notion = locations.notion() }) {
|
||||||
const __notion = getNotionResources(),
|
const resolvePath = (filepath) => path.resolve(`${__notion}/${filepath}`),
|
||||||
resolvePath = (filepath) => path.resolve(`${__notion}/${filepath}`),
|
pathExists = (filepath) => fs.existsSync(resolvePath(filepath)),
|
||||||
pathExists = (filepath) => fs.pathExists(resolvePath(filepath)),
|
enhancerVersion = files.pkgJSON().version;
|
||||||
version_path = 'app/ENHANCER_VERSION.txt',
|
let notion = {
|
||||||
packed = await pathExists('app.asar.bak');
|
packed: pathExists('app.asar.bak'),
|
||||||
let backup = packed
|
};
|
||||||
? (await pathExists('app.asar.bak'))
|
notion.backup = notion.packed
|
||||||
? `app.asar.bak`
|
? pathExists('app.asar.bak')
|
||||||
|
? 'app.asar.bak'
|
||||||
: undefined
|
: undefined
|
||||||
: (await pathExists('app.bak'))
|
: pathExists('app.bak')
|
||||||
? 'app.bak'
|
? 'app.bak'
|
||||||
: undefined;
|
: undefined;
|
||||||
if (!(await pathExists(version_path))) {
|
if (!pathExists('app/node_modules/notion-enhancer')) {
|
||||||
let executable = (await pathExists('app'))
|
notion.executable = pathExists('app')
|
||||||
? 'app'
|
? 'app'
|
||||||
: (await pathExists('app.asar'))
|
: pathExists('app.asar')
|
||||||
? 'app.asar'
|
? 'app.asar'
|
||||||
: undefined;
|
: undefined;
|
||||||
if (!executable && backup) {
|
if (!notion.executable && notion.backup) {
|
||||||
backup = resolvePath(backup);
|
notion.restored = true;
|
||||||
executable = backup.replace(/\.bak$/, '');
|
notion.backup = resolvePath(notion.backup);
|
||||||
await fs.move(backup, executable);
|
notion.executable = notion.backup.replace(/\.bak$/, '');
|
||||||
} else executable = executable ? resolvePath(executable) : '';
|
fs.renameSync(notion.backup, notion.executable);
|
||||||
return executable
|
} else {
|
||||||
|
notion.executable = notion.executable
|
||||||
|
? resolvePath(notion.executable)
|
||||||
|
: '';
|
||||||
|
}
|
||||||
|
return notion.executable
|
||||||
? {
|
? {
|
||||||
code: 0,
|
code: 0,
|
||||||
msg: `notion-enhancer has not been applied.`,
|
msg: `notion-enhancer has not been applied.`,
|
||||||
executable,
|
executable: notion.executable,
|
||||||
|
restored: notion.restored || false,
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
code: 1,
|
code: 1,
|
||||||
msg: `notion installation has been corrupted: no executable found.`,
|
msg: `notion installation has been corrupted: no executable found.`,
|
||||||
|
restored: notion.restored || false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
const installed_version = await fs.readFile(
|
notion = {
|
||||||
resolvePath(version_path),
|
version: files.readJSON(
|
||||||
'utf8'
|
resolvePath('app/node_modules/notion-enhancer/package.json')
|
||||||
),
|
).version,
|
||||||
meta = {
|
executable: resolvePath('app'),
|
||||||
version: installed_version,
|
packed: resolvePath(notion.packed),
|
||||||
executable: resolvePath('app'),
|
backup: resolvePath(notion.backup),
|
||||||
packed: resolvePath(packed),
|
};
|
||||||
backup: resolvePath(backup),
|
return notion.version === enhancerVersion
|
||||||
};
|
|
||||||
return installed_version === version
|
|
||||||
? {
|
? {
|
||||||
code: 2,
|
code: 2,
|
||||||
msg: `notion-enhancer v${version} applied.`,
|
msg: `notion-enhancer v${enhancerVersion} applied.`,
|
||||||
...meta,
|
...notion,
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
code: 3,
|
code: 3,
|
||||||
msg: `notion-enhancer v${installed_version} found applied != v${version} package.`,
|
msg: `notion-enhancer v${notion.version} found applied != v${enhancerVersion} package.`,
|
||||||
...meta,
|
...notion,
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
411
pkg/helpers.js
@ -6,190 +6,245 @@
|
|||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const os = require('os'),
|
import os from 'os';
|
||||||
path = require('path'),
|
import fs from 'fs';
|
||||||
fs = require('fs-extra'),
|
import fsp from 'fs/promises';
|
||||||
{ execSync } = require('child_process');
|
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.
|
const platform =
|
||||||
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 =
|
|
||||||
process.platform === 'linux' &&
|
process.platform === 'linux' &&
|
||||||
os.release().toLowerCase().includes('microsoft'),
|
os.release().toLowerCase().includes('microsoft')
|
||||||
// ~/.notion-enhancer absolute path.
|
? 'wsl'
|
||||||
__data = path.resolve(
|
: process.platform,
|
||||||
`${
|
locationCache = {};
|
||||||
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`
|
|
||||||
);
|
|
||||||
|
|
||||||
// transform a wsl filepath to its relative windows filepath if necessary.
|
export const locations = {
|
||||||
function realpath(hack_path) {
|
notion() {
|
||||||
if (!is_wsl) return hack_path.replace(/\\/g, '/');
|
if (locationCache.notion) return locationCache.notion;
|
||||||
hack_path = fs.realpathSync(hack_path);
|
switch (platform) {
|
||||||
if (hack_path.startsWith('/mnt/')) {
|
case 'darwin':
|
||||||
hack_path = `${hack_path[5].toUpperCase()}:${hack_path.slice(6)}`;
|
locationCache.notion = '/Applications/Notion.app/Contents/Resources';
|
||||||
} else hack_path = `//wsl$/${process.env.WSL_DISTRO_NAME}${hack_path}`;
|
break;
|
||||||
return hack_path;
|
case 'win32':
|
||||||
}
|
locationCache.notion =
|
||||||
|
process.env.LOCALAPPDATA + '\\Programs\\Notion\\resources';
|
||||||
// gets possible system notion app filepaths.
|
break;
|
||||||
function getNotionResources() {
|
case 'wsl':
|
||||||
let folder = '';
|
const [drive, ...windowsPath] = execSync(
|
||||||
switch (process.platform) {
|
'cmd.exe /c echo %localappdata%',
|
||||||
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%', {
|
|
||||||
encoding: 'utf8',
|
encoding: 'utf8',
|
||||||
}),
|
stdio: 'pipe',
|
||||||
drive = stdout[0];
|
}
|
||||||
folder = `/mnt/${drive.toLowerCase()}${stdout
|
);
|
||||||
.replace(/\\/g, '/')
|
locationCache.notion = `/mnt/${drive.toLowerCase()}${windowsPath
|
||||||
.slice(2)
|
.slice(1, -2)
|
||||||
.trim()}/Programs/Notion/resources`;
|
.join('')
|
||||||
} else {
|
.replace(/\\/g, '/')}/Programs/Notion/resources`;
|
||||||
for (let loc of [
|
break;
|
||||||
|
case 'linux':
|
||||||
|
for (let folder of [
|
||||||
'/usr/lib/notion-desktop/resources', // https://github.com/davidbailey00/notion-deb-builder/
|
'/usr/lib/notion-desktop/resources', // https://github.com/davidbailey00/notion-deb-builder/
|
||||||
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
'/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
|
||||||
'/opt/notion', // https://github.com/jaredallard/notion-app
|
'/opt/notion', // https://github.com/jaredallard/notion-app
|
||||||
]) {
|
])
|
||||||
if (fs.pathExistsSync(loc)) folder = loc;
|
if (fs.existsSync(folder)) locationCache.notion = folder;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
return locationCache.notion;
|
||||||
modules.loaded = modules.loaded.sort((a, b) => a.name.localeCompare(b.name));
|
},
|
||||||
const priority = require('./store.js')('mods', { priority: [] }).priority;
|
enhancer() {
|
||||||
modules.loaded = [
|
if (locationCache.enhancer) return locationCache.enhancer;
|
||||||
...modules.loaded.filter((m) => m.tags.includes('core')),
|
let home = os.homedir();
|
||||||
...modules.loaded.filter(
|
if (platform === 'wsl') {
|
||||||
(m) => !m.tags.includes('core') && !priority.includes(m.id)
|
const [drive, ...windowsPath] = execSync(
|
||||||
),
|
'cmd.exe /c echo %systemdrive%%homepath%',
|
||||||
...priority
|
{
|
||||||
.map((id) => modules.loaded.find((m) => m.id === id))
|
encoding: 'utf8',
|
||||||
.filter((m) => m),
|
stdio: 'pipe',
|
||||||
];
|
}
|
||||||
return modules;
|
);
|
||||||
}
|
home = `/mnt/${drive.toLowerCase()}${windowsPath
|
||||||
|
.slice(1, -2)
|
||||||
// attempts to read a JSON file, falls back to empty object.
|
.join('')
|
||||||
function getJSON(from) {
|
.replace(/\\/g, '/')}`;
|
||||||
try {
|
}
|
||||||
return fs.readJsonSync(from);
|
locationCache.enhancer = path.resolve(`${home}/.notion-enhancer`);
|
||||||
} catch (err) {
|
return locationCache.enhancer;
|
||||||
return {};
|
},
|
||||||
}
|
config() {
|
||||||
}
|
return `${this.enhancer()}/config`;
|
||||||
|
},
|
||||||
// wait for console input, returns keys when enter pressed.
|
cache() {
|
||||||
function readline() {
|
return `${this.enhancer()}/cache`;
|
||||||
return new Promise((res, rej) => {
|
},
|
||||||
process.stdin.resume();
|
};
|
||||||
process.stdin.setEncoding('utf8');
|
|
||||||
process.stdin.on('data', (key) => {
|
export const line = {
|
||||||
if (key === '\u0003') process.exit(); // CTRL+C
|
chalk: chalk,
|
||||||
process.stdin.pause();
|
style: {
|
||||||
res(key.trim());
|
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`),
|
||||||
// construct a HTMLElement from a string
|
next: (n = 1) => process.stdout.write(`\x1b[${n}B`),
|
||||||
function createElement(html) {
|
forward: (n = 1) => process.stdout.write(`\x1b[${n}C`),
|
||||||
const template = document.createElement('template');
|
back: (n = 1) => process.stdout.write(`\x1b[${n}D`),
|
||||||
template.innerHTML = html.trim();
|
new: () => process.stdout.write('\n'),
|
||||||
return template.content.firstElementChild;
|
async read(prompt = '', values = []) {
|
||||||
}
|
let input = '';
|
||||||
|
this.write(prompt);
|
||||||
module.exports = {
|
this.new();
|
||||||
EnhancerError,
|
do {
|
||||||
is_wsl,
|
for (let i = 0; i < prompt.split('\n').length; i++) {
|
||||||
__data,
|
this.prev();
|
||||||
realpath,
|
this.clear();
|
||||||
getNotionResources,
|
}
|
||||||
getEnhancements,
|
this.write(prompt);
|
||||||
getJSON,
|
input = await new Promise((res, rej) => {
|
||||||
readline,
|
process.stdin.resume();
|
||||||
createElement,
|
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
@ -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
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|