mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-19 02:59:02 +00:00
Merge remote-tracking branch 'upstream/master' into master
This commit is contained in:
Cory Zibell
commit
d7386e198b
44
CHANGELOG.md
44
CHANGELOG.md
@ -5,12 +5,52 @@
|
||||
- [groupy-like tabbing](https://www.npmjs.com/package/electron-tabs)
|
||||
- [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
|
||||
- [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
|
||||
- [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension)
|
||||
|
||||
### v0.8.5 (wip)
|
||||
### v0.9.0 (wip)
|
||||
|
||||
a feature and cleanup update.
|
||||
|
||||
- improved: halved the number of css rules used -> much better performance.
|
||||
- improved: font imports must be define in the `mod.js` so that they can also be used in
|
||||
the enhancements menu.
|
||||
- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
|
||||
- improved: extensions menu search is now case insensitive and includes options, inputs and versions.
|
||||
the search box can also for focused with `CMD/CTRL+F`.
|
||||
- improved: extensions menu filters shown either a ✓ or × to help understand the current state.
|
||||
- bugfix: enhancer settings should no longer reset on update (though this will not have
|
||||
effect until the release after this one).
|
||||
- bugfix: blue select tags are no longer purple.
|
||||
- bugfix: page titles now respond to small-text mode.
|
||||
- bugfix: weekly calendar view height is now sized correctly according to its contents.
|
||||
- bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`.
|
||||
to remove conflict with the inline code highlight shortcut.
|
||||
- bugfix: update property-layout to match notion changes again.
|
||||
- bugfix: updated some of the tweak styling to match notion changes.
|
||||
- bugfix: block-level text colours are now changed properly.
|
||||
- themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
|
||||
- extension: "font chooser" = 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.
|
||||
- extension: "always on top" = add an arrow/button to show the notion window on top of other windows
|
||||
even if it's not focused.
|
||||
- extension: "calendar scroll" = add a button to scroll down to the current week for you.
|
||||
|
||||
// todo
|
||||
|
||||
- improved: added individual text-colour rules for different background colours.
|
||||
- improved: added variables for callout colouring.
|
||||
- bugfix: switch to a different right-to-left extension because it wasn't working right
|
||||
with bullet points and stuff.
|
||||
|
||||
notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
|
||||
|
||||
### v0.8.5 (2020-08-29)
|
||||
|
||||
- bugfix: separate text highlight and select tag variables.
|
||||
- bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms?
|
||||
|
||||
> 📥 `npm i -g notion-enhancer@0.8.5`
|
||||
|
||||
### v0.8.4 (2020-08-29)
|
||||
|
||||
- bugfix: property-layout now works consistently with or without a banner.
|
||||
@ -35,7 +75,7 @@ to use `./bin.js` instead of `notion-enhancer`
|
||||
|
||||
a clarity and stability update.
|
||||
|
||||
- improved: more informative error messages.
|
||||
- improved: more informative cli error messages (original ones can be accessed with the `-d/--dev` flag).
|
||||
- bugfix: gallery variable didn't apply on fullpage.
|
||||
- bugfix: date picker hid current date number.
|
||||
- bugfix: small-text pages should now work as expected.
|
||||
|
||||
@ -54,6 +54,7 @@ module.exports = {
|
||||
type: String in ['toggle', 'select', 'input', 'file'],
|
||||
value: Boolean or Array<String> or String or Number or null
|
||||
}>,
|
||||
fonts: Array<String> of font_urls,
|
||||
hacks?: {
|
||||
[k: 'insert-point' (e.g. 'main/createWindow.js')]: function (
|
||||
store, // used for configuration and persisting of data (explanation below).
|
||||
@ -63,16 +64,17 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
| key | value | type |
|
||||
| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- |
|
||||
| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ |
|
||||
| name | **required:** short name (e.g. `'ocean theme'`) | _string_ |
|
||||
| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\<string\>_ |
|
||||
| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ |
|
||||
| version | **required:** semver (e.g. `'0.3.7'`) | _string_ |
|
||||
| author | **required:** see below: original extension creator | _string_ or \<object\> |
|
||||
| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_ |
|
||||
| hacks | **optional:** see below: code inserted at various points | _object_ |
|
||||
| key | value | type |
|
||||
| ------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------- |
|
||||
| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ |
|
||||
| name | **required:** short name (e.g. `'ocean theme'`) | _string_ |
|
||||
| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\<string\>_ |
|
||||
| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ |
|
||||
| version | **required:** semver (e.g. `'0.3.7'`) | _string_ |
|
||||
| author | **required:** see below: original extension creator | _string_ or \<object\> |
|
||||
| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_ |
|
||||
| fonts | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _array\<string\>_ |
|
||||
| hacks | **optional:** see below: code inserted at various points | _object_ |
|
||||
|
||||
> a module that with the primary function of being a hack should be tagged as an extension,
|
||||
> while a module that has the primary function of adding styles should be tagged as a theme.
|
||||
@ -174,6 +176,9 @@ the full/up-to-date list of variables and their default values can be found in t
|
||||
these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,
|
||||
consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily.
|
||||
|
||||
**want to import an external font or import an included font file? do that in the `mod.js` file, otherwise it**
|
||||
**won't be used for the enhancements menu.**
|
||||
|
||||
### using variables
|
||||
|
||||
variables should be used without specifying which mode they are relevant to. for example:
|
||||
|
||||
@ -17,7 +17,6 @@ for support, join the [discord server](https://discord.gg/sFWPXtA).
|
||||
- the [official windows/mac releases](https://notion.so/desktop).
|
||||
- the arch linux AUR [notion-app](https://aur.archlinux.org/packages/notion-app/) package.
|
||||
- the linux [notion-app](https://github.com/jaredallard/notion-app) installer.
|
||||
- the debian [notion-deb-builder](https://github.com/davidbailey00/notion-deb-builder/).
|
||||
|
||||
(it can also be run from the wsl to apply enhancements to the windows app.)
|
||||
|
||||
@ -30,7 +29,7 @@ a chrome extension may be coming soon for web client support.
|
||||
|
||||
## installation
|
||||
|
||||
> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)\*\*
|
||||
> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)
|
||||
> before following these instructions.
|
||||
|
||||
during installation/removal, make sure no notion processes are running! (check your task manager.)
|
||||
@ -96,7 +95,7 @@ team to take to heart for future improvements."
|
||||
## features
|
||||
|
||||
once applied, modules can be configured via the graphical menu, which is opened from
|
||||
the tray/menubar icon or with `CMD/CTRL+E`.
|
||||
the tray/menubar icon or with `ALT+E`.
|
||||
|
||||
|
||||
|
||||
|
||||
17
TWEAKS.md
17
TWEAKS.md
@ -33,6 +33,7 @@ if you are attempting to customise the web client, the css previously used for t
|
||||
### hide discussions (the comment threads at the top of each page)
|
||||
|
||||
```css
|
||||
[style*='env(safe-area-inset-left)'] [style*='width: 100%; height: 1px;'],
|
||||
.notion-page-view-discussion {
|
||||
display: none !important;
|
||||
}
|
||||
@ -40,11 +41,27 @@ if you are attempting to customise the web client, the css previously used for t
|
||||
|
||||
<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-hidden.jpg?raw=true" width="45%"></img>
|
||||
|
||||
### hide backlinks
|
||||
|
||||
note: this only hides the trigger. if you've already got backlinks shown,
|
||||
then use the 3 dots up in the top-right corner to remove them.
|
||||
|
||||
```css
|
||||
.notion-page-details-controls {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/16874139/92044159-f3eb2880-edc0-11ea-9cc9-7adcec540905.png" width="45%"> <img src="https://user-images.githubusercontent.com/16874139/92044290-42002c00-edc1-11ea-96fa-147d84eb0555.png" width="45%">
|
||||
|
||||
### hide the '+ new' gallery button
|
||||
|
||||
```css
|
||||
.notion-gallery-view
|
||||
.notion-selectable.notion-collection_view-block
|
||||
> [role='button'],
|
||||
.notion-gallery-view
|
||||
.notion-selectable.notion-collection_view_page-block
|
||||
> [role='button'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ page and the [css theming documentation](DOCUMENTATION.md#variable-theming).
|
||||
"how can I set a custom window visibility toggle hotkey?"
|
||||
|
||||
these options and more have been moved to the graphical menu, which can be opened from the
|
||||
tray or with `CMD/CTRL+E` (while the notion app is focused).
|
||||
tray or with `ALT+E` (while the notion app is focused).
|
||||
|
||||
## installing
|
||||
|
||||
|
||||
3
bin.js
3
bin.js
@ -67,4 +67,5 @@ cli.showVersionOnExit = true;
|
||||
|
||||
cli.parse();
|
||||
|
||||
if (!cli.matchedCommand && !helpCalled) cli.outputHelp();
|
||||
if (!cli.matchedCommand && !helpCalled && !cli.options.version)
|
||||
cli.outputHelp();
|
||||
|
||||
20
mods/alwaysontop/mod.js
Normal file
20
mods/alwaysontop/mod.js
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
* always on top
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// this is actually just a pseudo mod to "separate" the button
|
||||
// from the core module, but 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',
|
||||
};
|
||||
79
mods/calendar-scroll/mod.js
Normal file
79
mods/calendar-scroll/mod.js
Normal file
@ -0,0 +1,79 @@
|
||||
/*
|
||||
* calendar scroll
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const helpers = 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 of a calendar for you.',
|
||||
version: '0.1.0',
|
||||
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 = helpers.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
|
||||
);
|
||||
});
|
||||
|
||||
process();
|
||||
const observer = new MutationObserver(process);
|
||||
observer.observe(notion_elem, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function process(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
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
20
mods/calendar-scroll/styles.css
Normal file
20
mods/calendar-scroll/styles.css
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
#calendar-scroll-to-week:hover {
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme--interactive_hover);
|
||||
}
|
||||
@ -7,16 +7,19 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = (store) => {
|
||||
const electron = require('electron'),
|
||||
const helpers = require('../../pkg/helpers.js'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra'),
|
||||
browser = require('electron').remote.getCurrentWindow(),
|
||||
is_mac = process.platform === 'darwin',
|
||||
buttons = {
|
||||
element: document.createElement('div'),
|
||||
element: helpers.createElement('<div class="window-buttons-area"></div>'),
|
||||
insert: [
|
||||
'alwaysontop',
|
||||
...(store().frameless && !is_mac
|
||||
...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
|
||||
.enabled
|
||||
? ['alwaysontop']
|
||||
: []),
|
||||
...(store().frameless && !store().tiling_mode && !is_mac
|
||||
? ['minimize', 'maximize', 'close']
|
||||
: []),
|
||||
],
|
||||
@ -77,7 +80,6 @@ module.exports = (store) => {
|
||||
};
|
||||
|
||||
(async () => {
|
||||
buttons.element.className = 'window-buttons-area';
|
||||
for (let btn of buttons.insert) {
|
||||
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
|
||||
btn
|
||||
@ -87,7 +89,7 @@ module.exports = (store) => {
|
||||
document.querySelector(`.window-button#btn-${btn}`).onclick =
|
||||
buttons.actions[btn];
|
||||
}
|
||||
if (store().frameless && !is_mac) {
|
||||
if (store().frameless && !store().tiling_mode && !is_mac) {
|
||||
window.addEventListener('resize', (event) => {
|
||||
Promise.resolve(buttons.icons.maximize()).then((icon) => {
|
||||
icon = icon.toString();
|
||||
|
||||
@ -19,8 +19,6 @@ module.exports = (store, __exports) => {
|
||||
// additional hotkeys
|
||||
document.defaultView.addEventListener('keyup', (event) => {
|
||||
if (event.code === 'F5') location.reload();
|
||||
if (event.key === 'e' && (event.ctrlKey || event.metaKey))
|
||||
electron.ipcRenderer.send('enhancer:open-extension-menu');
|
||||
});
|
||||
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
@ -33,28 +31,16 @@ module.exports = (store, __exports) => {
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
// scrollbars
|
||||
if (store().smooth_scrollbars) {
|
||||
if (store().smooth_scrollbars)
|
||||
document.body.classList.add('smooth-scrollbars');
|
||||
// interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
|
||||
// function patchScrollbars() {
|
||||
// const sidebar = document.querySelector(
|
||||
// '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
|
||||
// );
|
||||
// if (!sidebar) return;
|
||||
// clearInterval(interval_attempts.patchScrollbars);
|
||||
// sidebar.style.overflow = '';
|
||||
// setTimeout(() => {
|
||||
// sidebar.style.overflow = 'hidden auto';
|
||||
// }, 10);
|
||||
// }
|
||||
}
|
||||
|
||||
// frameless
|
||||
if (store().frameless) {
|
||||
if (store().frameless && !store().tiling_mode) {
|
||||
document.body.classList.add('frameless');
|
||||
// draggable area
|
||||
const dragarea = document.createElement('div');
|
||||
dragarea.className = 'window-dragarea';
|
||||
const dragarea = helpers.createElement(
|
||||
'<div class="window-dragarea"></div>'
|
||||
);
|
||||
document.querySelector('.notion-topbar').prepend(dragarea);
|
||||
document.documentElement.style.setProperty(
|
||||
'--configured--dragarea_height',
|
||||
@ -83,7 +69,7 @@ module.exports = (store, __exports) => {
|
||||
|
||||
// ctrl+f theming
|
||||
document.defaultView.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
|
||||
notionIpc.sendNotionToIndex('search:set-theme', {
|
||||
'mode': document.querySelector('.notion-dark-theme')
|
||||
? 'dark'
|
||||
@ -111,25 +97,64 @@ module.exports = (store, __exports) => {
|
||||
});
|
||||
|
||||
// enhancer menu
|
||||
function setMenuTheme() {
|
||||
electron.ipcRenderer.send('enhancer:set-menu-theme', {
|
||||
mode: document.querySelector('.notion-dark-theme') ? 'dark' : 'light',
|
||||
rules: require('./css/variables.json').map((rule) => [
|
||||
rule,
|
||||
getStyle(rule),
|
||||
]),
|
||||
});
|
||||
function setThemeVars() {
|
||||
electron.ipcRenderer.send(
|
||||
'enhancer:set-theme-vars',
|
||||
[
|
||||
'--theme--main',
|
||||
'--theme--sidebar',
|
||||
'--theme--overlay',
|
||||
'--theme--dragarea',
|
||||
'--theme--font_sans',
|
||||
'--theme--font_code',
|
||||
'--theme--scrollbar',
|
||||
'--theme--scrollbar-border',
|
||||
'--theme--scrollbar_hover',
|
||||
'--theme--card',
|
||||
'--theme--table-border',
|
||||
'--theme--interactive_hover',
|
||||
'--theme--interactive_hover-border',
|
||||
'--theme--button_close',
|
||||
'--theme--button_close-fill',
|
||||
'--theme--primary',
|
||||
'--theme--primary_click',
|
||||
'--theme--option-color',
|
||||
'--theme--option-background',
|
||||
'--theme--option_active-background',
|
||||
'--theme--option_active-color',
|
||||
'--theme--option_hover-color',
|
||||
'--theme--option_hover-background',
|
||||
'--theme--text',
|
||||
'--theme--text_ui',
|
||||
'--theme--text_ui_info',
|
||||
'--theme--select_yellow',
|
||||
'--theme--select_green',
|
||||
'--theme--select_blue',
|
||||
'--theme--select_red',
|
||||
'--theme--line_text',
|
||||
'--theme--line_yellow',
|
||||
'--theme--line_green',
|
||||
'--theme--line_blue',
|
||||
'--theme--line_red',
|
||||
'--theme--code_inline-text',
|
||||
'--theme--code_inline-background',
|
||||
].map((rule) => [rule, getStyle(rule)])
|
||||
);
|
||||
}
|
||||
setMenuTheme();
|
||||
electron.ipcRenderer.on('enhancer:get-menu-theme', setMenuTheme);
|
||||
setThemeVars();
|
||||
const theme_observer = new MutationObserver(setThemeVars);
|
||||
theme_observer.observe(document.querySelector('.notion-app-inner'), {
|
||||
attributes: true,
|
||||
});
|
||||
electron.ipcRenderer.on('enhancer:get-theme-vars', setThemeVars);
|
||||
|
||||
const observer = new MutationObserver(setSidebarWidth);
|
||||
observer.observe(document.querySelector('.notion-sidebar'), {
|
||||
const sidebar_observer = new MutationObserver(setSidebarWidth);
|
||||
sidebar_observer.observe(document.querySelector('.notion-sidebar'), {
|
||||
attributes: true,
|
||||
});
|
||||
let sidebar_width;
|
||||
function setSidebarWidth(list, observer) {
|
||||
if (!store().frameless) return;
|
||||
function setSidebarWidth(list) {
|
||||
if (!store().frameless && store().tiling_mode) return;
|
||||
const new_sidebar_width =
|
||||
list[0].target.style.height === 'auto'
|
||||
? '0px'
|
||||
|
||||
@ -1,345 +0,0 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/** general ui **/
|
||||
|
||||
.dark [style*='background: rgb(55, 60, 63)'],
|
||||
.dark [style*='background: rgba(69, 75, 78, 0.3)'],
|
||||
.dark [style*='background: rgb(120, 123, 123)'] {
|
||||
background: var(--theme--sidebar) !important;
|
||||
}
|
||||
.notion-body.dark,
|
||||
.dark [style*='background: rgb(47, 52, 55)'],
|
||||
.dark [style*='background-color: rgb(47, 52, 55)'] {
|
||||
background: var(--theme--main) !important;
|
||||
}
|
||||
|
||||
.dark
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
|
||||
.dark
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
|
||||
img {
|
||||
height: var(--theme--preview_banner-height) !important;
|
||||
}
|
||||
.dark
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
|
||||
.dark
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
|
||||
img {
|
||||
height: var(--theme--page_banner-height) !important;
|
||||
}
|
||||
|
||||
/** databases **/
|
||||
|
||||
.dark [style*='background: rgb(63, 68, 71)'],
|
||||
.dark [style*='background-color: rgb(64, 68, 71);'] {
|
||||
background: var(--theme--card) !important;
|
||||
}
|
||||
.dark
|
||||
.notion-page-block.notion-collection-item
|
||||
[style*='background: rgba(255, 255, 255, 0.05)'] {
|
||||
background: var(--theme--gallery) !important;
|
||||
}
|
||||
|
||||
.dark
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'] {
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
|
||||
}
|
||||
|
||||
.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px !important;
|
||||
}
|
||||
.dark
|
||||
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px,
|
||||
var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
|
||||
.dark [style*='border-top: 1px solid rgba(255, 255, 255,'] {
|
||||
border-top: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
|
||||
box-shadow: var(--theme--table-border) -1px 0px 0px !important;
|
||||
}
|
||||
.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'] {
|
||||
border-bottom: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
.dark [style*='border-right: 1px solid rgba(255, 255, 255,'] {
|
||||
border-right: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
|
||||
.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px -1px 0px !important;
|
||||
}
|
||||
.dark [style*='border-left: 1px solid rgba(255, 255, 255,'],
|
||||
.dark
|
||||
.notion-block-permission-settings-public-access
|
||||
[role='button'][style*='border-left: none'] {
|
||||
border-left: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
|
||||
}
|
||||
|
||||
.dark
|
||||
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'] {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--theme--bg_gray) 0%,
|
||||
var(--theme--bg_gray) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.dark [style*='background: rgb(71, 76, 80)'],
|
||||
.dark [style*='background: rgb(80, 85, 88)'],
|
||||
.dark [style*='background: rgb(98, 102, 104)'] {
|
||||
background: var(--theme--interactive_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/** ui colours **/
|
||||
|
||||
.dark ::selection,
|
||||
.dark
|
||||
[style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
|
||||
.dark
|
||||
[style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
|
||||
background: var(--theme--selected) !important;
|
||||
}
|
||||
|
||||
.dark [style*=' color: rgb(46, 170, 220)'] {
|
||||
color: var(--theme--primary) !important;
|
||||
}
|
||||
.dark [style*='fill: rgb(46, 170, 220)'] {
|
||||
fill: var(--theme--primary) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(46, 170, 220)'],
|
||||
.dark [style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme--primary) !important;
|
||||
}
|
||||
.dark [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
|
||||
box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
|
||||
}
|
||||
.dark [style*='background: rgb(6, 156, 205)'] {
|
||||
background: var(--theme--primary_hover) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(0, 141, 190)'] {
|
||||
background: var(--theme--primary_click) !important;
|
||||
}
|
||||
.dark
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
|
||||
.dark [style*='background: rgb(235, 87, 87)'] {
|
||||
background: var(--theme--primary_indicator) !important;
|
||||
}
|
||||
|
||||
.dark
|
||||
[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
|
||||
color: var(--theme--danger_text) !important;
|
||||
border: 1px solid var(--theme--danger_border) !important;
|
||||
}
|
||||
|
||||
/* content colours */
|
||||
|
||||
.dark,
|
||||
.dark .notion-page-content [style*='color: inherit;'],
|
||||
.dark .notion-frame .notion-page-block,
|
||||
.dark [style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark [style*='color: rgba(255, 255, 255, 0.7)'] {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
.dark [style*='color: rgba(255, 255, 255, 0.6)'] {
|
||||
color: var(--theme--text_ui) !important;
|
||||
}
|
||||
.dark [style*='color: rgba(255, 255, 255, 0.4)'] {
|
||||
color: var(--theme--text_ui_info) !important;
|
||||
}
|
||||
.dark [style*='fill: rgb(202, 204, 206)'] {
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
.dark [style*='fill: rgba(202, 204, 206,'] {
|
||||
fill: var(--theme--text_ui) !important;
|
||||
}
|
||||
.dark [style*='caret-color: rgba(255, 255, 255, 0.9)'] {
|
||||
caret-color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
.dark [style*='color:rgba(151,154,155,0.95)'] {
|
||||
color: var(--theme--text_gray) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(151, 154, 155, 0.5)'] {
|
||||
background: var(--theme--select_gray) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(69,75,78)'] {
|
||||
background: var(--theme--bg_gray) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(69, 75, 78)'] {
|
||||
background: var(--theme--line_gray) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(147,114,100)'] {
|
||||
color: var(--theme--text_brown) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(147, 114, 100, 0.5)'] {
|
||||
background: var(--theme--select_brown) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(67,64,64)'] {
|
||||
background: var(--theme--bg_brown) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(67, 64, 64)'] {
|
||||
background: var(--theme--line_brown) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(255,163,68)'] {
|
||||
color: var(--theme--text_orange) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(255, 163, 68, 0.5)'] {
|
||||
background: var(--theme--select_orange) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(89,74,58)'] {
|
||||
background: var(--theme--bg_orange) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(89, 74, 58)'] {
|
||||
background: var(--theme--line_orange) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(255,220,73)'] {
|
||||
color: var(--theme--text_yellow) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(255, 220, 73, 0.5)'] {
|
||||
background: var(--theme--select_yellow) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(89,86,59)'] {
|
||||
background: var(--theme--bg_yellow) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(89, 86, 59)'] {
|
||||
background: var(--theme--line_yellow) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(77,171,154)'] {
|
||||
color: var(--theme--text_green) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(77, 171, 154, 0.5)'] {
|
||||
background: var(--theme--select_green) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(53,76,75)'] {
|
||||
background: var(--theme--bg_green) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(53, 76, 75)'] {
|
||||
background: var(--theme--line_green) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(82,156,202)'] {
|
||||
color: var(--theme--text_blue) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(82, 156, 202, 0.5)'] {
|
||||
background: var(--theme--select_purple) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(54,73,84)'] {
|
||||
background: var(--theme--bg_blue) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(54, 73, 84)'] {
|
||||
background: var(--theme--line_blue) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(154,109,215)'] {
|
||||
color: var(--theme--text_purple) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(154, 109, 215, 0.5)'] {
|
||||
background: var(--theme--select_purple) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(68,63,87)'] {
|
||||
background: var(--theme--bg_purple) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(68, 63, 87)'] {
|
||||
background: var(--theme--line_purple) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(226,85,161)'] {
|
||||
color: var(--theme--text_pink) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(226, 85, 161, 0.5)'] {
|
||||
background: var(--theme--select_pink) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(83,59,76)'] {
|
||||
background: var(--theme--bg_pink) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(83, 59, 76)'] {
|
||||
background: var(--theme--line_pink) !important;
|
||||
}
|
||||
.dark [style*='color:rgb(255,115,105)'] {
|
||||
color: var(--theme--text_red) !important;
|
||||
}
|
||||
.dark [style*='background: rgba(255, 115, 105, 0.5);'] {
|
||||
background: var(--theme--select_red) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(89,65,65)'] {
|
||||
background: var(--theme--bg_red) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.dark [style*='background: rgb(89, 65, 65)'] {
|
||||
background: var(--theme--line_red) !important;
|
||||
}
|
||||
|
||||
.dark
|
||||
[style*='background: rgb(69, 75, 78)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(67, 64, 64)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(89, 74, 58)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(89, 86, 59)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(53, 76, 75)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(54, 73, 84)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(68, 63, 87)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(83, 59, 76)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.dark
|
||||
[style*='background: rgb(89, 65, 65)']
|
||||
[style*=' color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
}
|
||||
|
||||
/* code */
|
||||
|
||||
.dark [style*='color:#EB5757'] {
|
||||
color: var(--theme--code_inline-text) !important;
|
||||
background: var(--theme--code_inline-background) !important;
|
||||
}
|
||||
@ -1,366 +0,0 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/** general ui **/
|
||||
|
||||
.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] {
|
||||
background: var(--theme--sidebar) !important;
|
||||
}
|
||||
.notion-body:not(.dark),
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
|
||||
.notion-body:not(.dark) [style*='background-color: white'] {
|
||||
background: var(--theme--main) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='background: rgba(15, 15, 15, 0.6)'] {
|
||||
background: var(--theme--overlay) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
|
||||
img {
|
||||
height: var(--theme--preview_banner-height) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
|
||||
.notion-body:not(.dark)
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
|
||||
img {
|
||||
height: var(--theme--page_banner-height) !important;
|
||||
}
|
||||
|
||||
/** databases **/
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-scroller.horizontal.vertical
|
||||
.notion-selectable
|
||||
> a[style*='background: white'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
|
||||
background: var(--theme--card) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.notion-page-block.notion-collection-item
|
||||
[style*='background: rgba(55, 53, 47, 0.024)'] {
|
||||
background: var(--theme--gallery) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px,
|
||||
var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] {
|
||||
border-top: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] {
|
||||
box-shadow: -1px -1px 0 var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
|
||||
box-shadow: 0px 1px 0 var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
|
||||
border-bottom: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] {
|
||||
border-right: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px -1px 0px !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] {
|
||||
border-left: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
[style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--theme--bg_gray) 0%,
|
||||
var(--theme--bg_gray) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
|
||||
background: var(--theme--interactive_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/** ui colours **/
|
||||
|
||||
.notion-body:not(.dark) ::selection,
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
|
||||
.notion-body:not(.dark)
|
||||
[style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
|
||||
background: var(--theme--selected) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*=' color: rgb(46, 170, 220)'] {
|
||||
color: var(--theme--primary) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='fill: rgb(46, 170, 220)'] {
|
||||
fill: var(--theme--primary) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'],
|
||||
.notion-body:not(.dark) [style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme--primary) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
|
||||
box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] {
|
||||
background: var(--theme--primary_hover) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(0, 141, 190)'] {
|
||||
background: var(--theme--primary_click) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
|
||||
.notion-body:not(.dark) [style*='background: rgb(235, 87, 87)'] {
|
||||
background: var(--theme--primary_indicator) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) .notion-to_do-block .checkboxSquare {
|
||||
background: var(--theme--option-background) !important;
|
||||
}
|
||||
.notion-body:not(.dark) .notion-to_do-block .checkboxSquare path {
|
||||
fill: var(--theme--option-color) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
|
||||
color: var(--theme--danger_text) !important;
|
||||
border: 1px solid var(--theme--danger_border) !important;
|
||||
}
|
||||
|
||||
/* content colours */
|
||||
|
||||
.notion-body:not(.dark),
|
||||
.notion-body:not(.dark) .notion-page-content [style*='color: inherit;'],
|
||||
.notion-body:not(.dark) .notion-frame .notion-page-block,
|
||||
.notion-body:not(.dark) [style*=' color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'],
|
||||
.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] {
|
||||
color: var(--theme--text_ui) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] {
|
||||
color: var(--theme--text_ui_info) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] {
|
||||
fill: var(--theme--text_ui) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] {
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='caret-color: rgb(55, 53, 47)'] {
|
||||
caret-color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] {
|
||||
color: var(--theme--text_gray) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
|
||||
background: var(--theme--select_gray) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
|
||||
background: var(--theme--bg_gray) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] {
|
||||
background: var(--theme--line_gray) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] {
|
||||
color: var(--theme--text_brown) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
|
||||
background: var(--theme--select_brown) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
|
||||
background: var(--theme--bg_brown) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] {
|
||||
background: var(--theme--line_brown) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] {
|
||||
color: var(--theme--text_orange) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
|
||||
background: var(--theme--select_orange) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
|
||||
background: var(--theme--bg_orange) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] {
|
||||
background: var(--theme--line_orange) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] {
|
||||
color: var(--theme--text_yellow) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
|
||||
background: var(--theme--select_yellow) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
|
||||
background: var(--theme--bg_yellow) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] {
|
||||
background: var(--theme--line_yellow) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] {
|
||||
color: var(--theme--text_green) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
|
||||
background: var(--theme--select_green) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
|
||||
background: var(--theme--bg_green) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] {
|
||||
background: var(--theme--line_green) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] {
|
||||
color: var(--theme--text_blue) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
|
||||
background: var(--theme--select_purple) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
|
||||
background: var(--theme--bg_blue) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] {
|
||||
background: var(--theme--line_blue) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] {
|
||||
color: var(--theme--text_purple) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
|
||||
background: var(--theme--select_purple) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
|
||||
background: var(--theme--bg_purple) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] {
|
||||
background: var(--theme--line_purple) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] {
|
||||
color: var(--theme--text_pink) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
|
||||
background: var(--theme--select_pink) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
|
||||
background: var(--theme--bg_pink) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] {
|
||||
background: var(--theme--line_pink) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] {
|
||||
color: var(--theme--text_red) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
|
||||
background: var(--theme--select_red) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
|
||||
background: var(--theme--bg_red) !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] {
|
||||
background: var(--theme--line_red) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(235, 236, 237)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(233, 229, 227)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(250, 235, 221)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(251, 243, 219)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(221, 237, 234)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(221, 235, 241)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(234, 228, 242)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(244, 223, 235)']
|
||||
[style*=' color: rgb(55, 53, 47);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(251, 228, 228)']
|
||||
[style*=' color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
}
|
||||
|
||||
/* code */
|
||||
|
||||
.notion-body:not(.dark) [style*='color:#EB5757'] {
|
||||
color: var(--theme--code_inline-text) !important;
|
||||
background: var(--theme--code_inline-background) !important;
|
||||
}
|
||||
@ -1,229 +0,0 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import './variables.css';
|
||||
|
||||
.notion-dark-theme {
|
||||
--theme--main: var(--theme_dark--main);
|
||||
--theme--sidebar: var(--theme_dark--sidebar);
|
||||
--theme--overlay: var(--theme_dark--overlay);
|
||||
--theme--dragarea: var(--theme_dark--dragarea);
|
||||
--theme--preview-width: var(--theme_dark--preview-width);
|
||||
--theme--preview-padding: var(--theme_dark--preview-padding);
|
||||
--theme--preview_banner-height: var(--theme_dark--preview_banner-height);
|
||||
--theme--page_banner-height: var(--theme_dark--page_banner-height);
|
||||
--theme--font_sans: var(--theme_dark--font_sans);
|
||||
--theme--font_serif: var(--theme_dark--font_serif);
|
||||
--theme--font_mono: var(--theme_dark--font_mono);
|
||||
--theme--font_code: var(--theme_dark--font_code);
|
||||
--theme--font_title-size: var(--theme_dark--font_title-size);
|
||||
--theme--font_heading1-size: var(--theme_dark--font_heading1-size);
|
||||
--theme--font_heading2-size: var(--theme_dark--font_heading2-size);
|
||||
--theme--font_heading3-size: var(--theme_dark--font_heading3-size);
|
||||
--theme--font_label-size: var(--theme_dark--font_label-size);
|
||||
--theme--font_body-size: var(--theme_dark--font_body-size);
|
||||
--theme--font_body-size_small: var(--theme_dark--font_body-size_small);
|
||||
--theme--font_code-size: var(--theme_dark--font_code-size);
|
||||
--theme--font_sidebar-size: var(--theme_dark--font_sidebar-size);
|
||||
--theme--scrollbar: var(--theme_dark--scrollbar);
|
||||
--theme--scrollbar-border: var(--theme_dark--scrollbar-border);
|
||||
--theme--scrollbar_hover: var(--theme_dark--scrollbar_hover);
|
||||
--theme--card: var(--theme_dark--card);
|
||||
--theme--gallery: var(--theme_dark--gallery);
|
||||
--theme--table-border: var(--theme_dark--table-border);
|
||||
--theme--interactive_hover: var(--theme_dark--interactive_hover);
|
||||
--theme--interactive_hover-border: var(
|
||||
--theme_dark--interactive_hover-border
|
||||
);
|
||||
--theme--button_close: var(--theme_dark--button_close);
|
||||
--theme--button_close-fill: var(--theme_dark--button_close-fill);
|
||||
--theme--selected: var(--theme_dark--selected);
|
||||
--theme--primary: var(--theme_dark--primary);
|
||||
--theme--primary_hover: var(--theme_dark--primary_hover);
|
||||
--theme--primary_click: var(--theme_dark--primary_click);
|
||||
--theme--primary_indicator: var(--theme_dark--primary_indicator);
|
||||
--theme--option-color: var(--theme_dark--option-color);
|
||||
--theme--option-background: var(--theme_dark--option-background);
|
||||
--theme--option_active-color: var(--theme_dark--option_active-color);
|
||||
--theme--option_active-background: var(
|
||||
--theme_dark--option_active-background
|
||||
);
|
||||
--theme--option_hover-color: var(--theme_dark--option_hover-color);
|
||||
--theme--option_hover-background: var(--theme_dark--option_hover-background);
|
||||
--theme--danger_text: var(--theme_dark--danger_text);
|
||||
--theme--danger_border: var(--theme_dark--danger_border);
|
||||
--theme--text: var(--theme_dark--text);
|
||||
--theme--text_ui: var(--theme_dark--text_ui);
|
||||
--theme--text_ui_info: var(--theme_dark--text_ui_info);
|
||||
--theme--text_gray: var(--theme_dark--text_gray);
|
||||
--theme--text_brown: var(--theme_dark--text_brown);
|
||||
--theme--text_orange: var(--theme_dark--text_orange);
|
||||
--theme--text_yellow: var(--theme_dark--text_yellow);
|
||||
--theme--text_green: var(--theme_dark--text_green);
|
||||
--theme--text_blue: var(--theme_dark--text_blue);
|
||||
--theme--text_purple: var(--theme_dark--text_purple);
|
||||
--theme--text_pink: var(--theme_dark--text_pink);
|
||||
--theme--text_red: var(--theme_dark--text_red);
|
||||
--theme--select_text: var(--theme_dark--select_text);
|
||||
--theme--select_gray: var(--theme_dark--select_gray);
|
||||
--theme--select_brown: var(--theme_dark--select_brown);
|
||||
--theme--select_orange: var(--theme_dark--select_orange);
|
||||
--theme--select_yellow: var(--theme_dark--select_yellow);
|
||||
--theme--select_green: var(--theme_dark--select_green);
|
||||
--theme--select_blue: var(--theme_dark--select_blue);
|
||||
--theme--select_purple: var(--theme_dark--select_purple);
|
||||
--theme--select_pink: var(--theme_dark--select_pink);
|
||||
--theme--select_red: var(--theme_dark--select_red);
|
||||
--theme--bg_text: var(--theme_dark--bg_text);
|
||||
--theme--bg_gray: var(--theme_dark--bg_gray);
|
||||
--theme--bg_brown: var(--theme_dark--bg_brown);
|
||||
--theme--bg_orange: var(--theme_dark--bg_orange);
|
||||
--theme--bg_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme--bg_green: var(--theme_dark--bg_green);
|
||||
--theme--bg_blue: var(--theme_dark--bg_blue);
|
||||
--theme--bg_purple: var(--theme_dark--bg_purple);
|
||||
--theme--bg_pink: var(--theme_dark--bg_pink);
|
||||
--theme--bg_red: var(--theme_dark--bg_red);
|
||||
--theme--line_text: var(--theme_dark--line_text);
|
||||
--theme--line_gray: var(--theme_dark--line_gray);
|
||||
--theme--line_brown: var(--theme_dark--line_brown);
|
||||
--theme--line_orange: var(--theme_dark--line_orange);
|
||||
--theme--line_yellow: var(--theme_dark--line_yellow);
|
||||
--theme--line_green: var(--theme_dark--line_green);
|
||||
--theme--line_blue: var(--theme_dark--line_blue);
|
||||
--theme--line_purple: var(--theme_dark--line_purple);
|
||||
--theme--line_pink: var(--theme_dark--line_pink);
|
||||
--theme--line_red: var(--theme_dark--line_red);
|
||||
--theme--code_inline-text: var(--theme_dark--code_inline-text);
|
||||
--theme--code_inline-background: var(--theme_dark--code_inline-background);
|
||||
--theme--code_text: var(--theme_dark--code_text);
|
||||
--theme--code-background: var(--theme_dark--code-background);
|
||||
--theme--code_function: var(--theme_dark--code_function);
|
||||
--theme--code_keyword: var(--theme_dark--code_keyword);
|
||||
--theme--code_tag: var(--theme_dark--code_tag);
|
||||
--theme--code_operator: var(--theme_dark--code_operator);
|
||||
--theme--code_important: var(--theme_dark--code_important);
|
||||
--theme--code_property: var(--theme_dark--code_property);
|
||||
--theme--code_builtin: var(--theme_dark--code_builtin);
|
||||
--theme--code_attr-name: var(--theme_dark--code_attr-name);
|
||||
--theme--code_comment: var(--theme_dark--code_comment);
|
||||
--theme--code_punctuation: var(--theme_dark--code_punctuation);
|
||||
--theme--code_doctype: var(--theme_dark--code_doctype);
|
||||
--theme--code_number: var(--theme_dark--code_number);
|
||||
--theme--code_string: var(--theme_dark--code_string);
|
||||
--theme--code_attr-value: var(--theme_dark--code_attr-value);
|
||||
}
|
||||
|
||||
.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--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--page_banner-height: var(--theme_light--page_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_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--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--table-border: var(--theme_light--table-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--select_gray: var(--theme_light--select_gray);
|
||||
--theme--select_brown: var(--theme_light--select_brown);
|
||||
--theme--select_orange: var(--theme_light--select_orange);
|
||||
--theme--select_yellow: var(--theme_light--select_yellow);
|
||||
--theme--select_green: var(--theme_light--select_green);
|
||||
--theme--select_blue: var(--theme_light--select_blue);
|
||||
--theme--select_purple: var(--theme_light--select_purple);
|
||||
--theme--select_pink: var(--theme_light--select_pink);
|
||||
--theme--select_red: var(--theme_light--select_red);
|
||||
--theme--bg_text: var(--theme_light--bg_text);
|
||||
--theme--bg_gray: var(--theme_light--bg_gray);
|
||||
--theme--bg_brown: var(--theme_light--bg_brown);
|
||||
--theme--bg_orange: var(--theme_light--bg_orange);
|
||||
--theme--bg_yellow: var(--theme_light--bg_yellow);
|
||||
--theme--bg_green: var(--theme_light--bg_green);
|
||||
--theme--bg_blue: var(--theme_light--bg_blue);
|
||||
--theme--bg_purple: var(--theme_light--bg_purple);
|
||||
--theme--bg_pink: var(--theme_light--bg_pink);
|
||||
--theme--bg_red: var(--theme_light--bg_red);
|
||||
--theme--line_text: var(--theme_light--line_text);
|
||||
--theme--line_gray: var(--theme_light--line_gray);
|
||||
--theme--line_brown: var(--theme_light--line_brown);
|
||||
--theme--line_orange: var(--theme_light--line_orange);
|
||||
--theme--line_yellow: var(--theme_light--line_yellow);
|
||||
--theme--line_green: var(--theme_light--line_green);
|
||||
--theme--line_blue: var(--theme_light--line_blue);
|
||||
--theme--line_purple: var(--theme_light--line_purple);
|
||||
--theme--line_pink: var(--theme_light--line_pink);
|
||||
--theme--line_red: var(--theme_light--line_red);
|
||||
--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);
|
||||
}
|
||||
@ -105,25 +105,28 @@ s {
|
||||
|
||||
#menu-titlebar {
|
||||
display: flex;
|
||||
padding: 0.4em;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
#menu-titlebar button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
#menu-titlebar :first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
#menu-titlebar {
|
||||
background: var(--theme--dragarea);
|
||||
}
|
||||
#menu-titlebar > .window-buttons-area {
|
||||
margin: 0.4em 0.4em 0.4em auto;
|
||||
}
|
||||
#menu-titlebar > .window-buttons-area:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* alerts */
|
||||
|
||||
#alerts [role='alert'] {
|
||||
display: flex;
|
||||
padding: 0.75em;
|
||||
/* border: 1px solid var(--theme--text_ui_info); */
|
||||
background: var(--theme--interactive_hover);
|
||||
border: 1px solid var(--theme--interactive_hover-border);
|
||||
}
|
||||
#alerts [role='alert']::before {
|
||||
content: '!';
|
||||
@ -132,30 +135,43 @@ s {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
padding-right: 0.5rem;
|
||||
color: var(--theme--bg_text);
|
||||
color: var(--theme--interactive_hover-border);
|
||||
}
|
||||
#alerts [role='alert'] p {
|
||||
font-size: 1rem;
|
||||
margin: auto 0;
|
||||
padding-left: 0.5em;
|
||||
color: var(--theme--bg_text);
|
||||
color: var(--theme--line_text);
|
||||
}
|
||||
|
||||
#alerts .error::before {
|
||||
color: var(--theme--select_red);
|
||||
}
|
||||
#alerts .error {
|
||||
background: var(--theme--bg_red);
|
||||
background: var(--theme--line_red);
|
||||
border-color: var(--theme--select_red);
|
||||
}
|
||||
#alerts .warning::before {
|
||||
color: var(--theme--select_yellow);
|
||||
}
|
||||
#alerts .warning {
|
||||
background: var(--theme--bg_yellow);
|
||||
background: var(--theme--line_yellow);
|
||||
border-color: var(--theme--select_yellow);
|
||||
}
|
||||
#alerts .info::before {
|
||||
color: var(--theme--select_blue);
|
||||
}
|
||||
#alerts .info {
|
||||
background: var(--theme--bg_blue);
|
||||
background: var(--theme--line_blue);
|
||||
border-color: var(--theme--select_blue);
|
||||
}
|
||||
|
||||
#alerts .success::before {
|
||||
content: '✓';
|
||||
color: var(--theme--select_green);
|
||||
}
|
||||
#alerts .success {
|
||||
background: var(--theme--bg_green);
|
||||
background: var(--theme--line_green);
|
||||
border-color: var(--theme--select_green);
|
||||
}
|
||||
|
||||
#alerts code {
|
||||
@ -188,7 +204,7 @@ s {
|
||||
#search > input {
|
||||
width: 100%;
|
||||
padding: 1em 1.4em 1em 2.8em;
|
||||
font: 1em var(--font);
|
||||
font: 1em var(--theme--font_sans);
|
||||
background: var(--theme--card);
|
||||
border: 1px solid var(--theme--table-border);
|
||||
color: var(--theme--text);
|
||||
@ -225,10 +241,16 @@ s {
|
||||
background: var(--theme--option_hover-background);
|
||||
color: var(--theme--option_hover-color);
|
||||
}
|
||||
#search #tags > span::before {
|
||||
content: '× ';
|
||||
}
|
||||
#search #tags > .selected {
|
||||
background: var(--tag_color, var(--theme--option_active-background));
|
||||
color: var(--theme--option_active-color);
|
||||
}
|
||||
#search #tags > .selected::before {
|
||||
content: '✓ ';
|
||||
}
|
||||
|
||||
/* module meta */
|
||||
|
||||
@ -249,21 +271,6 @@ s {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* #modules section .meta .toggle input + label .switch::before {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--theme--text_green),
|
||||
var(--theme--bg_green)
|
||||
);
|
||||
}
|
||||
#modules section .meta .toggle input + label .switch {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--theme--text_red),
|
||||
var(--theme--bg_red)
|
||||
);
|
||||
} */
|
||||
|
||||
#modules section .desc {
|
||||
margin: 0.3em 0 0.4em 0;
|
||||
font-size: 0.9em;
|
||||
@ -439,7 +446,7 @@ s {
|
||||
transform: translateX(var(--menu--toggle_offset, 0));
|
||||
transition: transform 350ms, box-shadow 350ms;
|
||||
background: var(--theme--option_active-color);
|
||||
box-shadow: 2px 1px 4px var(--theme--table-border);
|
||||
/* box-shadow: 2px 1px 4px var(--theme--table-border); */
|
||||
}
|
||||
.toggle input[type='checkbox']:checked:focus + label .switch {
|
||||
background: none !important;
|
||||
|
||||
@ -1,247 +0,0 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import './localised.css';
|
||||
|
||||
/* inputs */
|
||||
.notion-focusable:focus-within {
|
||||
/* var(--theme--primary) 0px 0px 0px 1px inset, */
|
||||
box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
/* colour help button - one of the few specific classes notion does give us */
|
||||
.notion-help-button {
|
||||
background: var(--theme--interactive_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* prevent block hover options overlaying topbar */
|
||||
*:not([style*='z-index']) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* fix highlight padding: this isn't a typo */
|
||||
[style*='background:rgb('] {
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
|
||||
/* smooth transitions */
|
||||
.notion-calendar-view-day,
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end),
|
||||
.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
|
||||
.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover,
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
|
||||
transition: all 200ms ease !important;
|
||||
}
|
||||
.notion-token-remove-button {
|
||||
transition: opacity 200ms ease !important;
|
||||
}
|
||||
.notion-to_do-block > div > div > div[style*='background:'] {
|
||||
transition: background 200ms ease !important;
|
||||
}
|
||||
|
||||
/* normalise inline-table size */
|
||||
.notion-page-content .notion-collection_view-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 50px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 96px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 126px'] {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 50px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 96px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 126px'] {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='min-width: calc(100% - 192px);'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='min-width: 708px;'] {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
.notion-page-content .notion-collection_view-block > div {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
/* fix button resizing */
|
||||
.notion-collection_view-block [role='button'],
|
||||
.notion-collection_view_page-block [role='button'] {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
/* page preview sizing */
|
||||
.notion-peek-renderer > div:nth-child(2) {
|
||||
max-width: var(--theme--preview-width) !important;
|
||||
}
|
||||
.notion-peek-renderer .notion-page-content [style*='max-width: 943px;'] {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
|
||||
padding-left: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='padding-right: calc(126px + env(safe-area-inset-right));'] {
|
||||
padding-right: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='margin-left: calc(126px + env(safe-area-inset-left));'] {
|
||||
margin-left: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='margin-right: calc(126px + env(safe-area-inset-right));'] {
|
||||
margin-right: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer .notion-page-content {
|
||||
padding-left: var(--theme--preview-padding) !important;
|
||||
padding-right: var(--theme--preview-padding) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* prevent block hover options overlaying topbar */
|
||||
.notion-topbar {
|
||||
background: var(--theme--main);
|
||||
}
|
||||
|
||||
/* checkboxes */
|
||||
.notion-to_do-block > div [role='button']:hover,
|
||||
.notion-to_do-block > div [role='button']:hover .checkboxSquare,
|
||||
.notion-to_do-block > div [role='button']:hover .check {
|
||||
background: var(--theme--option_hover-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:hover .checkboxSquare path,
|
||||
.notion-to_do-block > div [role='button']:hover .check polygon {
|
||||
fill: var(--theme--option_hover-color) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check {
|
||||
background: var(--theme--option_active-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
|
||||
fill: var(--theme--option_active-color) !important;
|
||||
}
|
||||
|
||||
/* fonts */
|
||||
[style*='Segoe UI'] {
|
||||
font-family: var(--theme--font_sans) !important;
|
||||
}
|
||||
[style*='Georgia'] {
|
||||
font-family: var(--theme--font_serif) !important;
|
||||
}
|
||||
[style*='iawriter-mono'] {
|
||||
font-family: var(--theme--font_mono) !important;
|
||||
}
|
||||
[style*='SFMono-Regular'] {
|
||||
font-family: var(--theme--font_code) !important;
|
||||
}
|
||||
.notion-frame .notion-page-block div[placeholder='Untitled'] {
|
||||
font-size: var(--theme--font_title-size) !important;
|
||||
}
|
||||
[placeholder='Heading 1'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
[placeholder='Heading 2'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading2-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
[placeholder='Heading 3'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading3-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_label-size) !important;
|
||||
}
|
||||
.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
|
||||
font-size: var(--theme--font_body-size) !important;
|
||||
}
|
||||
.notion-frame
|
||||
.notion-scroller.vertical.horizontal
|
||||
.notion-page-content[style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_body-size_small) !important;
|
||||
}
|
||||
.notion-code-block [placeholder=' '] {
|
||||
font-size: var(--theme--font_code-size) !important;
|
||||
}
|
||||
.notion-sidebar [style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_sidebar-size) !important;
|
||||
}
|
||||
|
||||
/* code */
|
||||
.notion-page-content .notion-code-block {
|
||||
background: var(--theme--code-background) !important;
|
||||
}
|
||||
.notion-code-block > div {
|
||||
color: var(--theme--code_text) !important;
|
||||
}
|
||||
.notion-code-block .token.function {
|
||||
color: var(--theme--code_function) !important;
|
||||
}
|
||||
.notion-code-block .token.keyword {
|
||||
color: var(--theme--code_keyword) !important;
|
||||
}
|
||||
.notion-code-block .token.tag {
|
||||
color: var(--theme--code_tag) !important;
|
||||
}
|
||||
.notion-code-block .token.operator {
|
||||
color: var(--theme--code_operator) !important;
|
||||
}
|
||||
.notion-code-block .token.important {
|
||||
color: var(--theme--code_important) !important;
|
||||
}
|
||||
.notion-code-block .token.property {
|
||||
color: var(--theme--code_property) !important;
|
||||
}
|
||||
.notion-code-block .token.builtin {
|
||||
color: var(--theme--code_builtin) !important;
|
||||
}
|
||||
.notion-code-block .token.attr-name {
|
||||
color: var(--theme--code_attr-name) !important;
|
||||
}
|
||||
.notion-code-block .token.attr-value {
|
||||
color: var(--theme--code_attr-value) !important;
|
||||
}
|
||||
.notion-code-block .token.comment {
|
||||
color: var(--theme--code_comment) !important;
|
||||
}
|
||||
.notion-code-block .token.punctuation {
|
||||
color: var(--theme--code_punctuation) !important;
|
||||
}
|
||||
.notion-code-block .token.doctype {
|
||||
color: var(--theme--code_doctype) !important;
|
||||
}
|
||||
.notion-code-block .token.number {
|
||||
color: var(--theme--code_number) !important;
|
||||
}
|
||||
.notion-code-block .token.string {
|
||||
color: var(--theme--code_string) !important;
|
||||
}
|
||||
682
mods/core/css/theme.css
Normal file
682
mods/core/css/theme.css
Normal file
@ -0,0 +1,682 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/** app **/
|
||||
|
||||
.notion-body.dark [style*='background: rgb(55, 60, 63)'],
|
||||
.notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'],
|
||||
.notion-body.dark [style*='background: rgb(120, 123, 123)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] {
|
||||
background: var(--theme--sidebar) !important;
|
||||
}
|
||||
.notion-body,
|
||||
.notion-body.dark [style*='background: rgb(47, 52, 55)'],
|
||||
.notion-body.dark [style*='background-color: rgb(47, 52, 55)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
|
||||
.notion-body:not(.dark) [style*='background-color: white'] {
|
||||
background: var(--theme--main) !important;
|
||||
}
|
||||
[style*='background: rgba(15, 15, 15, 0.6)'] {
|
||||
background: var(--theme--overlay) !important;
|
||||
}
|
||||
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
|
||||
img {
|
||||
height: var(--theme--preview_banner-height) !important;
|
||||
}
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
|
||||
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
|
||||
img {
|
||||
height: var(--theme--page_banner-height) !important;
|
||||
}
|
||||
|
||||
/* prevent block hover options overlaying topbar */
|
||||
.notion-topbar {
|
||||
background: var(--theme--main);
|
||||
}
|
||||
*:not([style*='z-index']) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* colour help button - one of the few specific classes notion does give us */
|
||||
.notion-help-button {
|
||||
background: var(--theme--interactive_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* page preview sizing */
|
||||
.notion-peek-renderer > div:nth-child(2) {
|
||||
max-width: var(--theme--preview-width) !important;
|
||||
}
|
||||
.notion-peek-renderer .notion-page-content [style*='max-width: 943px;'] {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
|
||||
padding-left: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='padding-right: calc(126px + env(safe-area-inset-right));'] {
|
||||
padding-right: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='margin-left: calc(126px + env(safe-area-inset-left));'] {
|
||||
margin-left: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer
|
||||
.notion-scroller.vertical
|
||||
[style*='margin-right: calc(126px + env(safe-area-inset-right));'] {
|
||||
margin-right: var(--theme--preview-padding) !important;
|
||||
}
|
||||
.notion-peek-renderer .notion-page-content {
|
||||
padding-left: var(--theme--preview-padding) !important;
|
||||
padding-right: var(--theme--preview-padding) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** fonts **/
|
||||
|
||||
[style*='Segoe UI'] {
|
||||
font-family: var(--theme--font_sans) !important;
|
||||
}
|
||||
[style*='Georgia'] {
|
||||
font-family: var(--theme--font_serif) !important;
|
||||
}
|
||||
[style*='iawriter-mono'] {
|
||||
font-family: var(--theme--font_mono) !important;
|
||||
}
|
||||
[style*='SFMono-Regular'] {
|
||||
font-family: var(--theme--font_code) !important;
|
||||
}
|
||||
.notion-frame .notion-page-block div[placeholder='Untitled'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
[placeholder='Heading 1'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
[placeholder='Heading 2'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading2-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
[placeholder='Heading 3'] {
|
||||
font-size: calc(
|
||||
var(--theme--font_body-size) * (var(--theme--font_heading3-size) / 1em)
|
||||
) !important;
|
||||
}
|
||||
.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_label-size) !important;
|
||||
}
|
||||
.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
|
||||
font-size: var(--theme--font_body-size) !important;
|
||||
}
|
||||
.notion-frame
|
||||
.notion-scroller.vertical.horizontal
|
||||
.notion-page-content[style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_body-size_small) !important;
|
||||
}
|
||||
.notion-code-block [placeholder=' '] {
|
||||
font-size: var(--theme--font_code-size) !important;
|
||||
}
|
||||
.notion-sidebar [style*='font-size: 14px'] {
|
||||
font-size: var(--theme--font_sidebar-size) !important;
|
||||
}
|
||||
|
||||
/** databases **/
|
||||
|
||||
.notion-body.dark [style*='background: rgb(63, 68, 71)'],
|
||||
.notion-body.dark [style*='background-color: rgb(64, 68, 71);'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-scroller.horizontal.vertical
|
||||
.notion-selectable
|
||||
> a[style*='background: white'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
|
||||
background: var(--theme--card) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
.notion-page-block.notion-collection-item
|
||||
[style*='background: rgba(255, 255, 255, 0.05)'],
|
||||
.notion-body:not(.dark)
|
||||
.notion-page-block.notion-collection-item
|
||||
[style*='background: rgba(55, 53, 47, 0.024)'] {
|
||||
background: var(--theme--gallery) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'],
|
||||
.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] {
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--main) -3px 0px 0px,
|
||||
var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='border-top: 1px solid rgba(255, 255, 255,'],
|
||||
.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] {
|
||||
border-top: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
|
||||
box-shadow: var(--theme--table-border) -1px 0px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'],
|
||||
.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
|
||||
border-bottom: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-right: 1px solid rgba(255, 255, 255,'],
|
||||
.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] {
|
||||
border-right: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
|
||||
.notion-body.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme--table-border) 0px -1px 0px !important;
|
||||
}
|
||||
.notion-body.dark [style*='border-left: 1px solid rgba(255, 255, 255,'],
|
||||
.notion-body.dark
|
||||
.notion-block-permission-settings-public-access
|
||||
[role='button'][style*='border-left: none'],
|
||||
.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] {
|
||||
border-left: 1px solid var(--theme--table-border) !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
|
||||
}
|
||||
.notion-body.dark
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
|
||||
box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] {
|
||||
box-shadow: -1px -1px 0 var(--theme--table-border) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark
|
||||
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--theme--bg_gray) 0%,
|
||||
var(--theme--bg_gray) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='background: rgb(71, 76, 80)'],
|
||||
.notion-body.dark [style*='background: rgb(80, 85, 88)'],
|
||||
.notion-body.dark [style*='background: rgb(98, 102, 104)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
|
||||
background: var(--theme--interactive_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* normalise inline-table size */
|
||||
.notion-page-content .notion-collection_view-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 50px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 96px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-left: 126px'] {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 50px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 96px'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='padding-right: 126px'] {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='min-width: calc(100% - 192px);'],
|
||||
.notion-page-content
|
||||
.notion-collection_view-block
|
||||
[style*='min-width: 708px;'] {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
.notion-page-content .notion-collection_view-block > div {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
/* smooth transitions */
|
||||
.notion-calendar-view-day,
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end),
|
||||
.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
|
||||
.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover,
|
||||
.DayPicker:not(.DayPicker--interactionDisabled)
|
||||
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
|
||||
transition: all 200ms ease !important;
|
||||
}
|
||||
.notion-token-remove-button {
|
||||
transition: opacity 200ms ease !important;
|
||||
}
|
||||
.notion-to_do-block > div > div > div[style*='background:'] {
|
||||
transition: background 200ms ease !important;
|
||||
}
|
||||
|
||||
/* fix button resizing */
|
||||
.notion-collection_view-block [role='button'],
|
||||
.notion-collection_view_page-block [role='button'] {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
/** general ui **/
|
||||
|
||||
::selection,
|
||||
[style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
|
||||
[style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
|
||||
background: var(--theme--selected) !important;
|
||||
}
|
||||
|
||||
[style*=' color: rgb(46, 170, 220)'] {
|
||||
color: var(--theme--primary) !important;
|
||||
}
|
||||
[style*='fill: rgb(46, 170, 220)'] {
|
||||
fill: var(--theme--primary) !important;
|
||||
}
|
||||
[style*='background: rgb(46, 170, 220)'],
|
||||
[style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme--primary) !important;
|
||||
}
|
||||
[style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
|
||||
box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
|
||||
}
|
||||
[style*='background: rgb(6, 156, 205)'] {
|
||||
background: var(--theme--primary_hover) !important;
|
||||
}
|
||||
[style*='background: rgb(0, 141, 190)'] {
|
||||
background: var(--theme--primary_click) !important;
|
||||
}
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
|
||||
[style*='background: rgb(235, 87, 87)'] {
|
||||
background: var(--theme--primary_indicator) !important;
|
||||
}
|
||||
|
||||
.notion-to_do-block > div [role='button']:hover,
|
||||
.notion-to_do-block > div [role='button']:hover .checkboxSquare,
|
||||
.notion-to_do-block > div [role='button']:hover .check {
|
||||
background: var(--theme--option_hover-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:hover .checkboxSquare path,
|
||||
.notion-to_do-block > div [role='button']:hover .check polygon {
|
||||
fill: var(--theme--option_hover-color) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check {
|
||||
background: var(--theme--option_active-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
|
||||
fill: var(--theme--option_active-color) !important;
|
||||
}
|
||||
|
||||
.notion-to_do-block .checkboxSquare {
|
||||
background: var(--theme--option-background) !important;
|
||||
}
|
||||
.notion-to_do-block .checkboxSquare path {
|
||||
fill: var(--theme--option-color) !important;
|
||||
}
|
||||
|
||||
[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
|
||||
color: var(--theme--danger_text) !important;
|
||||
border: 1px solid var(--theme--danger_border) !important;
|
||||
}
|
||||
/* inputs */
|
||||
.notion-focusable:focus-within {
|
||||
box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
/** content colours **/
|
||||
|
||||
.notion-body,
|
||||
.notion-page-content [style*='color: inherit;'],
|
||||
.notion-frame .notion-page-block,
|
||||
.notion-body.dark [style*=' color: rgba(255, 255, 255, 0.9)'],
|
||||
.notion-body.dark [style*='color: rgba(255, 255, 255, 0.7)'],
|
||||
.notion-body:not(.dark) [style*=' color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color: rgba(255, 255, 255, 0.6)'],
|
||||
.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'],
|
||||
.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] {
|
||||
color: var(--theme--text_ui) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color: rgba(255, 255, 255, 0.4)'],
|
||||
.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] {
|
||||
color: var(--theme--text_ui_info) !important;
|
||||
}
|
||||
.notion-body.dark [style*='fill: rgb(202, 204, 206)'] {
|
||||
fill: var(--theme--text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='fill: rgba(202, 204, 206,'],
|
||||
.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'],
|
||||
.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] {
|
||||
fill: var(--theme--text_ui) !important;
|
||||
}
|
||||
.notion-body.dark [style*='caret-color: rgba(255, 255, 255, 0.9)'],
|
||||
.notion-body:not(.dark) [style*='caret-color: rgb(55, 53, 47)'] {
|
||||
caret-color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
.notion-body.dark [style*='color:rgba(151,154,155,0.95)'],
|
||||
.notion-body.dark
|
||||
[style*='color: rgba(255, 255, 255, 0.6); fill: rgba(255, 255, 255, 0.6);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(155,154,151)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgba(55, 53, 47, 0.6); fill: rgba(55, 53, 47, 0.6);'] {
|
||||
color: var(--theme--text_gray) !important;
|
||||
fill: var(--theme--text_gray) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
|
||||
background: var(--theme--select_gray) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(69,75,78)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
|
||||
background: var(--theme--bg_gray) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(69, 75, 78)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_gray) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(147,114,100)'],
|
||||
.notion-body.dark
|
||||
[style*='color: rgb(147, 114, 100); fill: rgb(147, 114, 100);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(100,71,58)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] {
|
||||
color: var(--theme--text_brown) !important;
|
||||
fill: var(--theme--text_brown) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
|
||||
background: var(--theme--select_brown) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(67,64,64)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
|
||||
background: var(--theme--bg_brown) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(67, 64, 64)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_brown) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(255,163,68)'],
|
||||
.notion-body.dark [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(217,115,13)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(217, 115, 13); fill: rgb(217, 115, 13);'] {
|
||||
color: var(--theme--text_orange) !important;
|
||||
fill: var(--theme--text_orange) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
|
||||
background: var(--theme--select_orange) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(89,74,58)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
|
||||
background: var(--theme--bg_orange) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(89, 74, 58)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_orange) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(255,220,73)'],
|
||||
.notion-body.dark [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(223,171,1)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(223, 171, 1); fill: rgb(223, 171, 1);'] {
|
||||
color: var(--theme--text_yellow) !important;
|
||||
fill: var(--theme--text_yellow) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
|
||||
background: var(--theme--select_yellow) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(89,86,59)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
|
||||
background: var(--theme--bg_yellow) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(89, 86, 59)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_yellow) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(77,171,154)'],
|
||||
.notion-body.dark [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(15,123,108)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(15, 123, 108); fill: rgb(15, 123, 108);'] {
|
||||
color: var(--theme--text_green) !important;
|
||||
fill: var(--theme--text_green) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
|
||||
background: var(--theme--select_green) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(53,76,75)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
|
||||
background: var(--theme--bg_green) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(53, 76, 75)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_green) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(82,156,202)'],
|
||||
.notion-body.dark [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(11,110,153)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(11, 110, 153); fill: rgb(11, 110, 153);'] {
|
||||
color: var(--theme--text_blue) !important;
|
||||
fill: var(--theme--text_blue) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
|
||||
background: var(--theme--select_blue) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(54,73,84)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
|
||||
background: var(--theme--bg_blue) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(54, 73, 84)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_blue) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(154,109,215)'],
|
||||
.notion-body.dark
|
||||
[style*='color: rgb(154, 109, 215); fill: rgb(154, 109, 215);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(105,64,165)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(105, 64, 165); fill: rgb(105, 64, 165);'] {
|
||||
color: var(--theme--text_purple) !important;
|
||||
fill: var(--theme--text_purple) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
|
||||
background: var(--theme--select_purple) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(68,63,87)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
|
||||
background: var(--theme--bg_purple) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(68, 63, 87)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_purple) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(226,85,161)'],
|
||||
.notion-body.dark [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(173,26,114)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(173, 26, 114); fill: rgb(173, 26, 114);'] {
|
||||
color: var(--theme--text_pink) !important;
|
||||
fill: var(--theme--text_pink) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
|
||||
background: var(--theme--select_pink) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(83,59,76)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
|
||||
background: var(--theme--bg_pink) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(83, 59, 76)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_pink) !important;
|
||||
}
|
||||
.notion-body.dark [style*='color:rgb(255,115,105)'],
|
||||
.notion-body.dark
|
||||
[style*='color: rgb(255, 115, 105); fill: rgb(255, 115, 105);'],
|
||||
.notion-body:not(.dark) [style*='color:rgb(224,62,62)'],
|
||||
.notion-body:not(.dark)
|
||||
[style*='color: rgb(224, 62, 62); fill: rgb(224, 62, 62);'] {
|
||||
color: var(--theme--text_red) !important;
|
||||
fill: var(--theme--text_red) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'],
|
||||
.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
|
||||
background: var(--theme--select_red) !important;
|
||||
color: var(--theme--select_text) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background:rgb(89,65,65)'],
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
|
||||
background: var(--theme--bg_red) !important;
|
||||
}
|
||||
.notion-body.dark [style*='background: rgb(89, 65, 65)'],
|
||||
.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] {
|
||||
color: var(--theme--line_text) !important;
|
||||
background: var(--theme--line_red) !important;
|
||||
}
|
||||
|
||||
/* fix highlight padding: this isn't a typo */
|
||||
[style*='background:rgb('] {
|
||||
padding-bottom: 3px !important;
|
||||
color: var(--theme--bg_text) !important;
|
||||
}
|
||||
|
||||
/** code **/
|
||||
|
||||
[style*='color:#EB5757'] {
|
||||
color: var(--theme--code_inline-text) !important;
|
||||
background: var(--theme--code_inline-background) !important;
|
||||
}
|
||||
|
||||
.notion-page-content .notion-code-block {
|
||||
background: var(--theme--code-background) !important;
|
||||
}
|
||||
.notion-code-block > div {
|
||||
color: var(--theme--code_text) !important;
|
||||
}
|
||||
.notion-code-block .token.function {
|
||||
color: var(--theme--code_function) !important;
|
||||
}
|
||||
.notion-code-block .token.keyword {
|
||||
color: var(--theme--code_keyword) !important;
|
||||
}
|
||||
.notion-code-block .token.tag {
|
||||
color: var(--theme--code_tag) !important;
|
||||
}
|
||||
.notion-code-block .token.operator {
|
||||
color: var(--theme--code_operator) !important;
|
||||
}
|
||||
.notion-code-block .token.important {
|
||||
color: var(--theme--code_important) !important;
|
||||
}
|
||||
.notion-code-block .token.property {
|
||||
color: var(--theme--code_property) !important;
|
||||
}
|
||||
.notion-code-block .token.builtin {
|
||||
color: var(--theme--code_builtin) !important;
|
||||
}
|
||||
.notion-code-block .token.attr-name {
|
||||
color: var(--theme--code_attr-name) !important;
|
||||
}
|
||||
.notion-code-block .token.attr-value {
|
||||
color: var(--theme--code_attr-value) !important;
|
||||
}
|
||||
.notion-code-block .token.comment {
|
||||
color: var(--theme--code_comment) !important;
|
||||
}
|
||||
.notion-code-block .token.punctuation {
|
||||
color: var(--theme--code_punctuation) !important;
|
||||
}
|
||||
.notion-code-block .token.doctype {
|
||||
color: var(--theme--code_doctype) !important;
|
||||
}
|
||||
.notion-code-block .token.number {
|
||||
color: var(--theme--code_number) !important;
|
||||
}
|
||||
.notion-code-block .token.string {
|
||||
color: var(--theme--code_string) !important;
|
||||
}
|
||||
@ -258,3 +258,225 @@
|
||||
--theme_light--code_string: #690;
|
||||
--theme_light--code_attr-value: #07a;
|
||||
}
|
||||
|
||||
.notion-dark-theme {
|
||||
--theme--main: var(--theme_dark--main);
|
||||
--theme--sidebar: var(--theme_dark--sidebar);
|
||||
--theme--overlay: var(--theme_dark--overlay);
|
||||
--theme--dragarea: var(--theme_dark--dragarea);
|
||||
--theme--preview-width: var(--theme_dark--preview-width);
|
||||
--theme--preview-padding: var(--theme_dark--preview-padding);
|
||||
--theme--preview_banner-height: var(--theme_dark--preview_banner-height);
|
||||
--theme--page_banner-height: var(--theme_dark--page_banner-height);
|
||||
--theme--font_sans: var(--theme_dark--font_sans);
|
||||
--theme--font_serif: var(--theme_dark--font_serif);
|
||||
--theme--font_mono: var(--theme_dark--font_mono);
|
||||
--theme--font_code: var(--theme_dark--font_code);
|
||||
--theme--font_title-size: var(--theme_dark--font_title-size);
|
||||
--theme--font_heading1-size: var(--theme_dark--font_heading1-size);
|
||||
--theme--font_heading2-size: var(--theme_dark--font_heading2-size);
|
||||
--theme--font_heading3-size: var(--theme_dark--font_heading3-size);
|
||||
--theme--font_label-size: var(--theme_dark--font_label-size);
|
||||
--theme--font_body-size: var(--theme_dark--font_body-size);
|
||||
--theme--font_body-size_small: var(--theme_dark--font_body-size_small);
|
||||
--theme--font_code-size: var(--theme_dark--font_code-size);
|
||||
--theme--font_sidebar-size: var(--theme_dark--font_sidebar-size);
|
||||
--theme--scrollbar: var(--theme_dark--scrollbar);
|
||||
--theme--scrollbar-border: var(--theme_dark--scrollbar-border);
|
||||
--theme--scrollbar_hover: var(--theme_dark--scrollbar_hover);
|
||||
--theme--card: var(--theme_dark--card);
|
||||
--theme--gallery: var(--theme_dark--gallery);
|
||||
--theme--table-border: var(--theme_dark--table-border);
|
||||
--theme--interactive_hover: var(--theme_dark--interactive_hover);
|
||||
--theme--interactive_hover-border: var(
|
||||
--theme_dark--interactive_hover-border
|
||||
);
|
||||
--theme--button_close: var(--theme_dark--button_close);
|
||||
--theme--button_close-fill: var(--theme_dark--button_close-fill);
|
||||
--theme--selected: var(--theme_dark--selected);
|
||||
--theme--primary: var(--theme_dark--primary);
|
||||
--theme--primary_hover: var(--theme_dark--primary_hover);
|
||||
--theme--primary_click: var(--theme_dark--primary_click);
|
||||
--theme--primary_indicator: var(--theme_dark--primary_indicator);
|
||||
--theme--option-color: var(--theme_dark--option-color);
|
||||
--theme--option-background: var(--theme_dark--option-background);
|
||||
--theme--option_active-color: var(--theme_dark--option_active-color);
|
||||
--theme--option_active-background: var(
|
||||
--theme_dark--option_active-background
|
||||
);
|
||||
--theme--option_hover-color: var(--theme_dark--option_hover-color);
|
||||
--theme--option_hover-background: var(--theme_dark--option_hover-background);
|
||||
--theme--danger_text: var(--theme_dark--danger_text);
|
||||
--theme--danger_border: var(--theme_dark--danger_border);
|
||||
--theme--text: var(--theme_dark--text);
|
||||
--theme--text_ui: var(--theme_dark--text_ui);
|
||||
--theme--text_ui_info: var(--theme_dark--text_ui_info);
|
||||
--theme--text_gray: var(--theme_dark--text_gray);
|
||||
--theme--text_brown: var(--theme_dark--text_brown);
|
||||
--theme--text_orange: var(--theme_dark--text_orange);
|
||||
--theme--text_yellow: var(--theme_dark--text_yellow);
|
||||
--theme--text_green: var(--theme_dark--text_green);
|
||||
--theme--text_blue: var(--theme_dark--text_blue);
|
||||
--theme--text_purple: var(--theme_dark--text_purple);
|
||||
--theme--text_pink: var(--theme_dark--text_pink);
|
||||
--theme--text_red: var(--theme_dark--text_red);
|
||||
--theme--select_text: var(--theme_dark--select_text);
|
||||
--theme--select_gray: var(--theme_dark--select_gray);
|
||||
--theme--select_brown: var(--theme_dark--select_brown);
|
||||
--theme--select_orange: var(--theme_dark--select_orange);
|
||||
--theme--select_yellow: var(--theme_dark--select_yellow);
|
||||
--theme--select_green: var(--theme_dark--select_green);
|
||||
--theme--select_blue: var(--theme_dark--select_blue);
|
||||
--theme--select_purple: var(--theme_dark--select_purple);
|
||||
--theme--select_pink: var(--theme_dark--select_pink);
|
||||
--theme--select_red: var(--theme_dark--select_red);
|
||||
--theme--bg_text: var(--theme_dark--bg_text);
|
||||
--theme--bg_gray: var(--theme_dark--bg_gray);
|
||||
--theme--bg_brown: var(--theme_dark--bg_brown);
|
||||
--theme--bg_orange: var(--theme_dark--bg_orange);
|
||||
--theme--bg_yellow: var(--theme_dark--bg_yellow);
|
||||
--theme--bg_green: var(--theme_dark--bg_green);
|
||||
--theme--bg_blue: var(--theme_dark--bg_blue);
|
||||
--theme--bg_purple: var(--theme_dark--bg_purple);
|
||||
--theme--bg_pink: var(--theme_dark--bg_pink);
|
||||
--theme--bg_red: var(--theme_dark--bg_red);
|
||||
--theme--line_text: var(--theme_dark--line_text);
|
||||
--theme--line_gray: var(--theme_dark--line_gray);
|
||||
--theme--line_brown: var(--theme_dark--line_brown);
|
||||
--theme--line_orange: var(--theme_dark--line_orange);
|
||||
--theme--line_yellow: var(--theme_dark--line_yellow);
|
||||
--theme--line_green: var(--theme_dark--line_green);
|
||||
--theme--line_blue: var(--theme_dark--line_blue);
|
||||
--theme--line_purple: var(--theme_dark--line_purple);
|
||||
--theme--line_pink: var(--theme_dark--line_pink);
|
||||
--theme--line_red: var(--theme_dark--line_red);
|
||||
--theme--code_inline-text: var(--theme_dark--code_inline-text);
|
||||
--theme--code_inline-background: var(--theme_dark--code_inline-background);
|
||||
--theme--code_text: var(--theme_dark--code_text);
|
||||
--theme--code-background: var(--theme_dark--code-background);
|
||||
--theme--code_function: var(--theme_dark--code_function);
|
||||
--theme--code_keyword: var(--theme_dark--code_keyword);
|
||||
--theme--code_tag: var(--theme_dark--code_tag);
|
||||
--theme--code_operator: var(--theme_dark--code_operator);
|
||||
--theme--code_important: var(--theme_dark--code_important);
|
||||
--theme--code_property: var(--theme_dark--code_property);
|
||||
--theme--code_builtin: var(--theme_dark--code_builtin);
|
||||
--theme--code_attr-name: var(--theme_dark--code_attr-name);
|
||||
--theme--code_comment: var(--theme_dark--code_comment);
|
||||
--theme--code_punctuation: var(--theme_dark--code_punctuation);
|
||||
--theme--code_doctype: var(--theme_dark--code_doctype);
|
||||
--theme--code_number: var(--theme_dark--code_number);
|
||||
--theme--code_string: var(--theme_dark--code_string);
|
||||
--theme--code_attr-value: var(--theme_dark--code_attr-value);
|
||||
}
|
||||
|
||||
.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--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--page_banner-height: var(--theme_light--page_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_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--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--table-border: var(--theme_light--table-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--select_gray: var(--theme_light--select_gray);
|
||||
--theme--select_brown: var(--theme_light--select_brown);
|
||||
--theme--select_orange: var(--theme_light--select_orange);
|
||||
--theme--select_yellow: var(--theme_light--select_yellow);
|
||||
--theme--select_green: var(--theme_light--select_green);
|
||||
--theme--select_blue: var(--theme_light--select_blue);
|
||||
--theme--select_purple: var(--theme_light--select_purple);
|
||||
--theme--select_pink: var(--theme_light--select_pink);
|
||||
--theme--select_red: var(--theme_light--select_red);
|
||||
--theme--bg_text: var(--theme_light--bg_text);
|
||||
--theme--bg_gray: var(--theme_light--bg_gray);
|
||||
--theme--bg_brown: var(--theme_light--bg_brown);
|
||||
--theme--bg_orange: var(--theme_light--bg_orange);
|
||||
--theme--bg_yellow: var(--theme_light--bg_yellow);
|
||||
--theme--bg_green: var(--theme_light--bg_green);
|
||||
--theme--bg_blue: var(--theme_light--bg_blue);
|
||||
--theme--bg_purple: var(--theme_light--bg_purple);
|
||||
--theme--bg_pink: var(--theme_light--bg_pink);
|
||||
--theme--bg_red: var(--theme_light--bg_red);
|
||||
--theme--line_text: var(--theme_light--line_text);
|
||||
--theme--line_gray: var(--theme_light--line_gray);
|
||||
--theme--line_brown: var(--theme_light--line_brown);
|
||||
--theme--line_orange: var(--theme_light--line_orange);
|
||||
--theme--line_yellow: var(--theme_light--line_yellow);
|
||||
--theme--line_green: var(--theme_light--line_green);
|
||||
--theme--line_blue: var(--theme_light--line_blue);
|
||||
--theme--line_purple: var(--theme_light--line_purple);
|
||||
--theme--line_pink: var(--theme_light--line_pink);
|
||||
--theme--line_red: var(--theme_light--line_red);
|
||||
--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);
|
||||
}
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
[
|
||||
"--theme--main",
|
||||
"--theme--sidebar",
|
||||
"--theme--overlay",
|
||||
"--theme--dragarea",
|
||||
"--theme--preview-width",
|
||||
"--theme--preview-padding",
|
||||
"--theme--preview_banner-height",
|
||||
"--theme--page_banner-height",
|
||||
"--theme--font_sans",
|
||||
"--theme--font_serif",
|
||||
"--theme--font_mono",
|
||||
"--theme--font_code",
|
||||
"--theme--font_title-size",
|
||||
"--theme--font_heading1-size",
|
||||
"--theme--font_heading2-size",
|
||||
"--theme--font_heading3-size",
|
||||
"--theme--font_label-size",
|
||||
"--theme--font_body-size",
|
||||
"--theme--font__small",
|
||||
"--theme--font_code-size",
|
||||
"--theme--font_sidebar-size",
|
||||
"--theme--scrollbar",
|
||||
"--theme--scrollbar-border",
|
||||
"--theme--scrollbar_hover",
|
||||
"--theme--card",
|
||||
"--theme--gallery",
|
||||
"--theme--table-border",
|
||||
"--theme--interactive_hover",
|
||||
"--theme--interactive_hover-border",
|
||||
"--theme--button_close",
|
||||
"--theme--button_close-fill",
|
||||
"--theme--selected",
|
||||
"--theme--primary",
|
||||
"--theme--primary_hover",
|
||||
"--theme--primary_click",
|
||||
"--theme--primary_indicator",
|
||||
"--theme--option-color",
|
||||
"--theme--option-background",
|
||||
"--theme--option_active-color",
|
||||
"--theme--option_active-background",
|
||||
"--theme--option_hover-color",
|
||||
"--theme--option_hover-background",
|
||||
"--theme--danger_text",
|
||||
"--theme--danger_border",
|
||||
"--theme--text",
|
||||
"--theme--text_ui",
|
||||
"--theme--text_ui_info",
|
||||
"--theme--text_gray",
|
||||
"--theme--text_brown",
|
||||
"--theme--text_orange",
|
||||
"--theme--text_yellow",
|
||||
"--theme--text_green",
|
||||
"--theme--text_blue",
|
||||
"--theme--text_purple",
|
||||
"--theme--text_pink",
|
||||
"--theme--text_red",
|
||||
"--theme--bg_text",
|
||||
"--theme--bg_gray",
|
||||
"--theme--bg_brown",
|
||||
"--theme--bg_orange",
|
||||
"--theme--bg_yellow",
|
||||
"--theme--bg_green",
|
||||
"--theme--bg_blue",
|
||||
"--theme--bg_purple",
|
||||
"--theme--bg_pink",
|
||||
"--theme--bg_red",
|
||||
"--theme--line_text",
|
||||
"--theme--line_gray",
|
||||
"--theme--line_brown",
|
||||
"--theme--line_orange",
|
||||
"--theme--line_yellow",
|
||||
"--theme--line_green",
|
||||
"--theme--line_blue",
|
||||
"--theme--line_purple",
|
||||
"--theme--line_pink",
|
||||
"--theme--line_red",
|
||||
"--theme--code_inline-text",
|
||||
"--theme--code_inline-background",
|
||||
"--theme--code_text",
|
||||
"--theme--code-background",
|
||||
"--theme--code_function",
|
||||
"--theme--code_keyword",
|
||||
"--theme--code_tag",
|
||||
"--theme--code_operator",
|
||||
"--theme--code_important",
|
||||
"--theme--code_property",
|
||||
"--theme--code_builtin",
|
||||
"--theme--code_attr-name",
|
||||
"--theme--code_comment",
|
||||
"--theme--code_punctuation",
|
||||
"--theme--code_doctype",
|
||||
"--theme--code_number",
|
||||
"--theme--code_string",
|
||||
"--theme--code_attr-value"
|
||||
]
|
||||
@ -7,6 +7,7 @@
|
||||
'use strict';
|
||||
|
||||
const store = require('../../pkg/store.js'),
|
||||
{ id } = require('./mod.js'),
|
||||
helpers = require('../../pkg/helpers.js'),
|
||||
fs = require('fs-extra'),
|
||||
path = require('path'),
|
||||
@ -14,49 +15,57 @@ const store = require('../../pkg/store.js'),
|
||||
browser = electron.remote.getCurrentWindow();
|
||||
|
||||
window['__start'] = async () => {
|
||||
const buttons = require('./buttons.js')(() => ({ frameless: true }));
|
||||
const buttons = require('./buttons.js')(() => ({
|
||||
'72886371-dada-49a7-9afc-9f275ecf29d3': {
|
||||
enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
|
||||
.enabled,
|
||||
},
|
||||
tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').tiling_mode,
|
||||
frameless: true,
|
||||
}));
|
||||
document.querySelector('#menu-titlebar').appendChild(buttons.element);
|
||||
|
||||
document.defaultView.addEventListener('keyup', (event) => {
|
||||
if (event.code === 'F5') location.reload();
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close();
|
||||
if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
|
||||
const meta =
|
||||
!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
|
||||
if (
|
||||
meta &&
|
||||
document.activeElement.parentElement.id === 'tags' &&
|
||||
event.key === 'Enter'
|
||||
)
|
||||
document.activeElement.click();
|
||||
if (document.activeElement.tagName.toLowerCase() === 'input') {
|
||||
if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
|
||||
document.activeElement.checked = !document.activeElement.checked;
|
||||
if (
|
||||
document.activeElement.parentElement.id === 'tags' &&
|
||||
event.key === 'Enter'
|
||||
['Escape', 'Enter'].includes(event.key) &&
|
||||
document.activeElement.type !== 'checkbox' &&
|
||||
(document.activeElement.parentElement.id !== 'search' ||
|
||||
event.key === 'Escape')
|
||||
)
|
||||
document.activeElement.click();
|
||||
if (document.activeElement.tagName.toLowerCase() === 'input') {
|
||||
if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
|
||||
document.activeElement.checked = !document.activeElement.checked;
|
||||
if (
|
||||
['Escape', 'Enter'].includes(event.key) &&
|
||||
document.activeElement.type !== 'checkbox' &&
|
||||
(document.activeElement.parentElement.id !== 'search' ||
|
||||
event.key === 'Escape')
|
||||
)
|
||||
document.activeElement.blur();
|
||||
} else if (event.key === '/')
|
||||
document.querySelector('#search > input').focus();
|
||||
}
|
||||
document.activeElement.blur();
|
||||
} else if (meta && event.key === '/')
|
||||
document.querySelector('#search > input').focus();
|
||||
if (
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
event.key === 'f' &&
|
||||
!event.altKey &&
|
||||
!event.shiftKey
|
||||
)
|
||||
document.querySelector('#search > input').focus();
|
||||
});
|
||||
|
||||
electron.ipcRenderer.send('enhancer:get-menu-theme');
|
||||
electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
|
||||
document.body.className = `notion-${theme.mode}-theme`;
|
||||
for (const style of theme.rules)
|
||||
electron.ipcRenderer.send('enhancer:get-theme-vars');
|
||||
electron.ipcRenderer.on('enhancer:set-theme-vars', (event, theme) => {
|
||||
for (const style of theme)
|
||||
document.body.style.setProperty(style[0], style[1]);
|
||||
});
|
||||
|
||||
function createElement(html) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstElementChild;
|
||||
}
|
||||
function createAlert(type, message) {
|
||||
if (!type)
|
||||
throw Error('<notion-enhancer> @ createAlert: no alert type specified');
|
||||
const el = createElement(`
|
||||
const el = helpers.createElement(`
|
||||
<section class="${type}" role="alert">
|
||||
<p>${message}</p>
|
||||
</section>
|
||||
@ -153,7 +162,9 @@ window['__start'] = async () => {
|
||||
|
||||
document
|
||||
.querySelector('#colorpicker')
|
||||
.appendChild(createElement('<button class="close-modal"></button>'));
|
||||
.appendChild(
|
||||
helpers.createElement('<button class="close-modal"></button>')
|
||||
);
|
||||
document.querySelectorAll('#popup .close-modal').forEach((el) =>
|
||||
el.addEventListener('click', (event) => {
|
||||
$popup.classList.remove('visible');
|
||||
@ -161,7 +172,7 @@ window['__start'] = async () => {
|
||||
);
|
||||
|
||||
// search
|
||||
const search_query = {
|
||||
const search_filters = {
|
||||
enabled: true,
|
||||
disabled: true,
|
||||
tags: new Set(
|
||||
@ -171,19 +182,28 @@ window['__start'] = async () => {
|
||||
.sort()
|
||||
),
|
||||
};
|
||||
function innerText(elem) {
|
||||
let text = '';
|
||||
for (let node of elem.childNodes) {
|
||||
if (node.nodeType === 3) text += node.textContent;
|
||||
if (node.nodeType === 1)
|
||||
text += ['text', 'number'].includes(node.type)
|
||||
? node.value
|
||||
: innerText(node);
|
||||
}
|
||||
return text;
|
||||
}
|
||||
function search() {
|
||||
modules.loaded.forEach((mod) => {
|
||||
const $search_input = document.querySelector('#search > input');
|
||||
if (
|
||||
(mod.elem.classList.contains('enabled') && !search_query.enabled) ||
|
||||
(mod.elem.classList.contains('disabled') && !search_query.disabled) ||
|
||||
!mod.tags.some((tag) => search_query.tags.has(tag)) ||
|
||||
(mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
|
||||
(mod.elem.classList.contains('disabled') && !search_filters.disabled) ||
|
||||
!mod.tags.some((tag) => search_filters.tags.has(tag)) ||
|
||||
($search_input.value &&
|
||||
!(
|
||||
mod.name +
|
||||
mod.tags.map((tag) => `#${tag}`).join(' ') +
|
||||
mod.desc
|
||||
).includes($search_input.value))
|
||||
!innerText(mod.elem)
|
||||
.toLowerCase()
|
||||
.includes($search_input.value.toLowerCase()))
|
||||
)
|
||||
return (mod.elem.style.display = 'none');
|
||||
mod.elem.style.display = 'block';
|
||||
@ -196,7 +216,7 @@ window['__start'] = async () => {
|
||||
throw Error('<notion-enhancer> @ createTag: no tagname specified');
|
||||
if (!onclick)
|
||||
throw Error('<notion-enhancer> @ createTag: no action specified');
|
||||
const el = createElement(
|
||||
const el = helpers.createElement(
|
||||
`<span class="selected" ${
|
||||
color ? `style="--tag_color: ${color}" ` : ''
|
||||
}tabindex="0">${tagname}</span>`
|
||||
@ -210,17 +230,17 @@ window['__start'] = async () => {
|
||||
}
|
||||
createTag(
|
||||
'enabled',
|
||||
(state) => [(search_query.enabled = state), search()]
|
||||
(state) => [(search_filters.enabled = state), search()]
|
||||
// 'var(--theme--bg_green)'
|
||||
);
|
||||
createTag(
|
||||
'disabled',
|
||||
(state) => [(search_query.disabled = state), search()]
|
||||
(state) => [(search_filters.disabled = state), search()]
|
||||
// 'var(--theme--bg_red)'
|
||||
);
|
||||
for (let tag of search_query.tags)
|
||||
for (let tag of search_filters.tags)
|
||||
createTag(`#${tag}`, (state) => [
|
||||
state ? search_query.tags.add(tag) : search_query.tags.delete(tag),
|
||||
state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag),
|
||||
search(),
|
||||
]);
|
||||
|
||||
@ -346,7 +366,7 @@ window['__start'] = async () => {
|
||||
</label>
|
||||
`;
|
||||
}
|
||||
$opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
|
||||
$opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
|
||||
if (opt.type === 'color') {
|
||||
$opt
|
||||
.querySelector(`#${opt.type}_${id}--${opt.key}`)
|
||||
@ -378,6 +398,14 @@ window['__start'] = async () => {
|
||||
? 1
|
||||
: a.name.localeCompare(b.name)
|
||||
)) {
|
||||
for (let fonts of mod.fonts || []) {
|
||||
document
|
||||
.querySelector('head')
|
||||
.appendChild(
|
||||
helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
|
||||
);
|
||||
}
|
||||
|
||||
const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
|
||||
.enabled,
|
||||
author =
|
||||
@ -388,7 +416,7 @@ window['__start'] = async () => {
|
||||
link: `https://github.com/${mod.author}`,
|
||||
avatar: `https://github.com/${mod.author}.png`,
|
||||
};
|
||||
mod.elem = createElement(`
|
||||
mod.elem = helpers.createElement(`
|
||||
<section class="${
|
||||
mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
|
||||
}" id="${mod.id}">
|
||||
@ -454,6 +482,7 @@ window['__start'] = async () => {
|
||||
$opt
|
||||
.querySelector(`#${opt.type}_${mod.id}--${opt.key}`)
|
||||
.addEventListener('change', (event) => {
|
||||
modified();
|
||||
if (opt.type === 'toggle') {
|
||||
store(mod.id)[opt.key] = event.target.checked;
|
||||
} else if (opt.type === 'file') {
|
||||
@ -465,9 +494,8 @@ window['__start'] = async () => {
|
||||
} else
|
||||
store(mod.id)[opt.key] =
|
||||
typeof opt.value === 'number'
|
||||
? Number(event.target.value)
|
||||
? +event.target.value
|
||||
: event.target.value;
|
||||
modified();
|
||||
});
|
||||
}
|
||||
$options.appendChild($opt);
|
||||
|
||||
@ -44,6 +44,12 @@ module.exports = {
|
||||
type: 'input',
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
key: 'tiling_mode',
|
||||
label: 'tiling window manager mode',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
key: 'smooth_scrollbars',
|
||||
label: 'integrated scrollbars',
|
||||
@ -56,6 +62,12 @@ module.exports = {
|
||||
type: 'input',
|
||||
value: 'CommandOrControl+Shift+A',
|
||||
},
|
||||
{
|
||||
key: 'menu_toggle',
|
||||
label: 'open enhancements menu hotkey:',
|
||||
type: 'input',
|
||||
value: 'Alt+E',
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'main/main.js': require('./tray.js'),
|
||||
|
||||
@ -16,16 +16,20 @@ module.exports = (store, __exports) => {
|
||||
),
|
||||
default_styles = dragarea.getAttribute('style');
|
||||
|
||||
document
|
||||
.getElementById('notion')
|
||||
.addEventListener('ipc-message', (event) => {
|
||||
if (event.channel !== 'enhancer:sidebar-width') return;
|
||||
dragarea.setAttribute(
|
||||
'style',
|
||||
`${default_styles} top: 2px; height: ${
|
||||
store().dragarea_height
|
||||
}px; left: ${event.args[0]};`
|
||||
);
|
||||
});
|
||||
if (store().tiling_mode) {
|
||||
dragarea.style.display = 'none';
|
||||
} else {
|
||||
document
|
||||
.getElementById('notion')
|
||||
.addEventListener('ipc-message', (event) => {
|
||||
if (event.channel !== 'enhancer:sidebar-width') return;
|
||||
dragarea.setAttribute(
|
||||
'style',
|
||||
`${default_styles} top: 2px; height: ${
|
||||
store().dragarea_height
|
||||
}px; left: ${event.args[0]};`
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@ -4,9 +4,7 @@
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import './css/localised.css';
|
||||
@import './css/dark.css';
|
||||
@import './css/light.css';
|
||||
@import './css/shared.css';
|
||||
@import './css/theme.css';
|
||||
@import './css/variables.css';
|
||||
@import './css/scrollbars.css';
|
||||
@import './css/titlebar.css';
|
||||
|
||||
@ -29,16 +29,17 @@ module.exports = (store, __exports) => {
|
||||
})
|
||||
);
|
||||
|
||||
electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
|
||||
electron.ipcMain.on('enhancer:set-theme-vars', (event, arg) => {
|
||||
if (!enhancer_menu) return;
|
||||
enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
|
||||
enhancer_menu.webContents.send('enhancer:set-theme-vars', arg);
|
||||
});
|
||||
electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
|
||||
electron.ipcMain.on('enhancer:get-theme-vars', (event, arg) => {
|
||||
electron.webContents
|
||||
.getAllWebContents()
|
||||
.forEach((webContents) => webContents.send('enhancer:get-menu-theme'));
|
||||
.forEach((webContents) =>
|
||||
webContents.send('enhancer:get-theme-vars', arg)
|
||||
);
|
||||
});
|
||||
electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
|
||||
|
||||
function calculateWindowPos(width, height) {
|
||||
const screen = electron.screen.getDisplayNearestPoint({
|
||||
@ -155,7 +156,7 @@ module.exports = (store, __exports) => {
|
||||
{
|
||||
type: 'normal',
|
||||
label: 'Enhancements',
|
||||
accelerator: 'CommandOrControl+E',
|
||||
accelerator: store().menu_toggle,
|
||||
click: openExtensionMenu,
|
||||
},
|
||||
{
|
||||
@ -191,6 +192,17 @@ module.exports = (store, __exports) => {
|
||||
tray.setContextMenu(contextMenu);
|
||||
tray.setToolTip('Notion');
|
||||
|
||||
electron.globalShortcut.register(store().menu_toggle, () => {
|
||||
if (
|
||||
electron.BrowserWindow.getAllWindows()
|
||||
.filter((win) => win.getTitle() !== 'notion-enhancer menu')
|
||||
.some((win) => win.isFocused())
|
||||
) {
|
||||
openExtensionMenu();
|
||||
} else if (enhancer_menu && enhancer_menu.isFocused())
|
||||
enhancer_menu.close();
|
||||
});
|
||||
|
||||
function showWindows() {
|
||||
const windows = electron.BrowserWindow.getAllWindows();
|
||||
if (is_mac) electron.app.show();
|
||||
|
||||
@ -6,12 +6,14 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const helpers = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
|
||||
tags: ['extension'],
|
||||
name: 'custom inserts',
|
||||
desc: 'link files for small client-side tweaks.',
|
||||
version: '0.1.1',
|
||||
version: '0.1.2',
|
||||
author: 'dragonwocky',
|
||||
options: [
|
||||
{
|
||||
@ -34,10 +36,15 @@ module.exports = {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
if (store().css) {
|
||||
try {
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = fs.readFileSync(store().css);
|
||||
document.querySelector('head').appendChild(style);
|
||||
document
|
||||
.querySelector('head')
|
||||
.appendChild(
|
||||
helpers.createElement(
|
||||
`<style type="text/css">${fs.readFileSync(
|
||||
store().css
|
||||
)}</style>`
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
console.warn('<custom-inserts> invalid css file... unsetting.');
|
||||
store().css = '';
|
||||
|
||||
@ -1,95 +1,59 @@
|
||||
/*
|
||||
* font chooser
|
||||
* (c) 2020 torchatlas (https://bit.ly/torchatlas)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* 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.',
|
||||
version: '0.1.0',
|
||||
author: 'torchatlas',
|
||||
options: [
|
||||
{
|
||||
key: 'sansSerif',
|
||||
label: 'Sans Serif and 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: ''
|
||||
}
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
|
||||
if (document.readyState !== 'complete') return false;
|
||||
|
||||
if (store().sansSerif != '') {
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--font_sans',
|
||||
store().sansSerif
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_light--font_sans',
|
||||
store().sansSerif
|
||||
);
|
||||
}
|
||||
|
||||
if (store().serif != '') {
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--font_serif',
|
||||
store().serif
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_light--font_serif',
|
||||
store().serif
|
||||
);
|
||||
}
|
||||
|
||||
if (store().mono != '') {
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--font_mono',
|
||||
store().mono
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_light--font_mono',
|
||||
store().mono
|
||||
);
|
||||
}
|
||||
|
||||
if (store().code != '') {
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_dark--font_code',
|
||||
store().code
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
'--theme_light--font_code',
|
||||
store().code
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
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.',
|
||||
version: '0.1.1',
|
||||
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: '',
|
||||
},
|
||||
],
|
||||
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']) {
|
||||
if (!store()[style]) return;
|
||||
document
|
||||
.querySelector('.notion-app-inner')
|
||||
.style.setProperty(`--theme--font_${style}`, store()[style]);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -12,11 +12,14 @@ module.exports = {
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'gameish',
|
||||
desc: 'a purple, "gamer-styled" theme with a blocky-font.',
|
||||
version: '0.1.2',
|
||||
version: '0.1.3',
|
||||
author: {
|
||||
name: 'LVL100ShrekCultist',
|
||||
link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
|
||||
},
|
||||
fonts: [
|
||||
'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',
|
||||
],
|
||||
};
|
||||
|
||||
@ -5,8 +5,6 @@
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import url('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;
|
||||
|
||||
23
mods/littilepig-dark/mod.js
Normal file
23
mods/littilepig-dark/mod.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* 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.1',
|
||||
author: {
|
||||
name: 'Lizishan',
|
||||
link: 'https://www.reddit.com/user/Lizishan/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
|
||||
},
|
||||
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
|
||||
};
|
||||
625
mods/littilepig-dark/styles.css
Normal file
625
mods/littilepig-dark/styles.css
Normal file
@ -0,0 +1,625 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #1e1c26;
|
||||
--theme_dark--sidebar: #24222c;
|
||||
--theme_dark--dragarea: #19181f;
|
||||
|
||||
--theme_dark--font_sans: 'JetBrains Mono';
|
||||
--theme_dark--font_mono: 'JetBrains Mono', iawriter-mono, Nitti, Menlo,
|
||||
Courier, monospace;
|
||||
--theme_dark--font_code: 'JetBrains Mono', SFMono-Regular, Consolas,
|
||||
'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
--theme_dark--scrollbar: #221f29;
|
||||
/* --theme_dark--scrollbar-border: transparent; */
|
||||
--theme_dark--scrollbar_hover: #312d3c;
|
||||
|
||||
--theme_dark--font_title-size: 40px;
|
||||
--theme_dark--font_heading1-size: 30px;
|
||||
--theme_dark--font_heading2-size: 24px;
|
||||
--theme_dark--font_heading3-size: 20px;
|
||||
--theme_dark--font_label-size: 14px;
|
||||
--theme_dark--font_body-size: 17px;
|
||||
--theme_dark--font_code-size: 16px;
|
||||
--theme_dark--font_sidebar-size: 14px;
|
||||
|
||||
/* --theme_dark--card: rgb(53, 51, 58); */
|
||||
--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--interactive_hover-border: transparent;
|
||||
--theme_dark--button_close: #e81123;
|
||||
--theme_dark--button_close-fill: white; */
|
||||
|
||||
--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--danger_text: rgb(235, 87, 87);
|
||||
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark--text: rgba(200, 200, 200, 0.8);
|
||||
--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(177, 144, 131);
|
||||
--theme_dark--text_orange: rgb(255, 163, 68);
|
||||
--theme_dark--text_yellow: rgb(255, 220, 73);
|
||||
--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_pink: rgb(226, 85, 161);
|
||||
--theme_dark--text_red: rgb(240, 52, 38);
|
||||
|
||||
/* 文本背景色 */
|
||||
--theme_dark--bg_gray: rgb(234, 234, 234);
|
||||
--theme_dark--bg_gray_text: rgb(17, 17, 17);
|
||||
|
||||
--theme_dark--bg_brown: rgb(130, 118, 111);
|
||||
--theme_dark--bg_brown_text: rgb(85, 35, 1);
|
||||
|
||||
--theme_dark--bg_orange: rgb(254, 214, 155);
|
||||
--theme_dark--bg_yellow_text: rgb(199, 110, 0);
|
||||
|
||||
--theme_dark--bg_yellow: rgb(235, 227, 178);
|
||||
--theme_dark--bg_yellow_text: rgb(138, 118, 2);
|
||||
|
||||
--theme_dark--bg_green: rgb(212, 237, 218);
|
||||
--theme_dark--bg_green_text: rgb(21, 87, 36);
|
||||
|
||||
--theme_dark--bg_blue: rgb(204, 229, 255);
|
||||
--theme_dark--bg_blue_text: rgb(0, 64, 133);
|
||||
|
||||
--theme_dark--bg_purple: rgb(199, 178, 230);
|
||||
--theme_dark--bg_purple_text: rgb(90, 49, 148);
|
||||
|
||||
--theme_dark--bg_pink: rgb(255, 206, 228);
|
||||
--theme_dark--bg_pink_text: rgb(255, 0, 127);
|
||||
|
||||
--theme_dark--bg_red: rgb(248, 215, 218);
|
||||
--theme_dark--bg_red_text: rgb(138, 0, 10);
|
||||
|
||||
--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--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);
|
||||
|
||||
--theme_dark--code_inline-text: #d9cbec;
|
||||
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
|
||||
--theme_dark--code_text: var(--theme_dark--text);
|
||||
--theme_dark--code-background: rgb(63, 68, 71);
|
||||
--theme_dark--code_function: rgb(179, 146, 240);
|
||||
--theme_dark--code_keyword: hsl(350, 100%, 69%);
|
||||
--theme_dark--code_tag: hsl(350, 40%, 70%);
|
||||
--theme_dark--code_operator: hsl(40, 90%, 60%);
|
||||
--theme_dark--code_important: #e90;
|
||||
--theme_dark--code_property: hsl(350, 40%, 70%);
|
||||
--theme_dark--code_builtin: hsl(75, 70%, 60%);
|
||||
--theme_dark--code_attr-name: hsl(75, 70%, 60%);
|
||||
--theme_dark--code_comment: hsl(30, 20%, 50%);
|
||||
--theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark--code_doctype: hsl(30, 20%, 50%);
|
||||
--theme_dark--code_number: hsl(159, 69%, 39%);
|
||||
--theme_dark--code_string: hsl(75, 95%, 48%);
|
||||
--theme_dark--code_attr-value: hsl(350, 40%, 70%);
|
||||
|
||||
/* 标题色 */
|
||||
--theme_dark--h1_text: #c264fe;
|
||||
--theme_dark--h2_text: #e2bafe;
|
||||
--theme_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--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);
|
||||
|
||||
/* callout 颜色 */
|
||||
|
||||
--theme_dark--callout_bg_gray: #e2e3e5;
|
||||
--theme_dark--callout_text_gray: #383d41;
|
||||
|
||||
--theme_dark--callout_bg_brown: rgb(130, 118, 111);
|
||||
--theme_dark--callout_text_brown: rgb(85, 35, 1);
|
||||
|
||||
--theme_dark--callout_bg_orange: rgb(254, 214, 155);
|
||||
--theme_dark--callout_text_orange: rgb(255, 140, 0);
|
||||
|
||||
--theme_dark--callout_bg_yellow: #fcffd8;
|
||||
--theme_dark--callout_text_yellow: #c76e00;
|
||||
|
||||
--theme_dark--callout_bg_green: #d4edda;
|
||||
--theme_dark--callout_text_green: #155724;
|
||||
|
||||
--theme_dark--callout_bg_blue: #cce5ff;
|
||||
--theme_dark--callout_text_blue: #004085;
|
||||
|
||||
--theme_dark--callout_bg_purple: rgb(199, 178, 230);
|
||||
--theme_dark--callout_text_purple: rgb(90, 49, 148);
|
||||
|
||||
--theme_dark--callout_bg_pink: rgb(255, 206, 228);
|
||||
--theme_dark--callout_text_pink: rgb(255, 0, 127);
|
||||
|
||||
--theme_dark--callout_bg_red: #f8d7da;
|
||||
--theme_dark--callout_text_red: #721c24;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-scroller.vertical.horizontal
|
||||
.notion-table-view
|
||||
.notion-selectable.notion-collection_view-block
|
||||
> :first-child {
|
||||
background: var(--theme--card) !important;
|
||||
}
|
||||
|
||||
/* todo 颜色 */
|
||||
.dark [style*='background: rgb(46, 170, 220)'],
|
||||
.dark [style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark--option_active-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check {
|
||||
background: var(--theme_dark--option_active-background) !important;
|
||||
}
|
||||
|
||||
.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
|
||||
fill: var(--theme_dark--option_active-color) !important;
|
||||
}
|
||||
|
||||
/*================================= 标签颜色 + 文本背景色 ===============================**/
|
||||
|
||||
/* 灰色 */
|
||||
.dark [style*='background: rgba(151, 154, 155, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_gray) !important;
|
||||
color: var(--theme_dark--bg_gray_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(69,75,78)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_gray) !important;
|
||||
color: var(--theme_dark--bg_gray_text) !important;
|
||||
}
|
||||
|
||||
/* 棕色 */
|
||||
.dark [style*='background: rgba(147, 114, 100, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_brown) !important;
|
||||
color: var(--theme_dark--bg_brown_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(67,64,64)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_brown) !important;
|
||||
color: var(--theme_dark--bg_brown_text) !important;
|
||||
}
|
||||
|
||||
/* 橘黄色 */
|
||||
.dark [style*='background: rgba(255, 163, 68, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_orange) !important;
|
||||
color: var(--theme_dark--bg_orange_text) !important;
|
||||
}
|
||||
|
||||
.dark [style*='background:rgb(89,74,58)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_orange) !important;
|
||||
color: var(--theme_dark--bg_orange_text) !important;
|
||||
}
|
||||
|
||||
/* 黄色 */
|
||||
.dark [style*='background: rgba(255, 220, 73, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_yellow) !important;
|
||||
color: var(--theme_dark--bg_yellow_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(89,86,59)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_yellow) !important;
|
||||
color: var(--theme_dark--bg_yellow_text) !important;
|
||||
}
|
||||
|
||||
/* 绿色 */
|
||||
.dark [style*='background: rgba(77, 171, 154, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_green) !important;
|
||||
color: var(--theme_dark--bg_green_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(53,76,75)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_green) !important;
|
||||
color: var(--theme_dark--bg_green_text) !important;
|
||||
}
|
||||
|
||||
/* 蓝色 */
|
||||
.dark [style*='background: rgba(82, 156, 202, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_blue) !important;
|
||||
color: var(--theme_dark--bg_blue_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(54,73,84)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_blue) !important;
|
||||
color: var(--theme_dark--bg_blue_text) !important;
|
||||
}
|
||||
|
||||
/* 紫色 */
|
||||
.dark [style*='background: rgba(154, 109, 215, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_purple) !important;
|
||||
color: var(--theme_dark--bg_purple_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(68,63,87)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_purple) !important;
|
||||
color: var(--theme_dark--bg_purple_text) !important;
|
||||
}
|
||||
|
||||
/* 粉红色 */
|
||||
.dark [style*='background: rgba(226, 85, 161, 0.5)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_pink) !important;
|
||||
color: var(--theme_dark--bg_pink_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(83,59,76)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_pink) !important;
|
||||
color: var(--theme_dark--bg_pink_text) !important;
|
||||
}
|
||||
|
||||
/* 红色 */
|
||||
.dark [style*='background: rgba(255, 115, 105, 0.5);'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_red) !important;
|
||||
color: var(--theme_dark--bg_red_text) !important;
|
||||
}
|
||||
.dark [style*='background:rgb(89,65,65)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_dark--bg_red) !important;
|
||||
color: var(--theme_dark--bg_red_text) !important;
|
||||
}
|
||||
|
||||
/* -----------------------------callout 样式 start------------------------ */
|
||||
|
||||
/* notion-callout-block gray */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(69, 75, 78, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_gray) !important; */
|
||||
background: var(--theme_dark--callout_bg_gray) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(69, 75, 78, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_gray) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block brown */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(67, 64, 64, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_brown) !important; */
|
||||
background: var(--theme_dark--callout_bg_brown) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(67, 64, 64, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_brown) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block orange */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 74, 58, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_orange) !important; */
|
||||
background: var(--theme_dark--callout_bg_orange) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 74, 58, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_orange) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block yellow */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 86, 59, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_yellow) !important; */
|
||||
background: var(--theme_dark--callout_bg_yellow) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 86, 59, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_yellow) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block green */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(53, 76, 75, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_green) !important; */
|
||||
background: var(--theme_dark--callout_bg_green) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(53, 76, 75, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_green) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block blue */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(54, 73, 84, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_blue) !important; */
|
||||
background: var(--theme_dark--callout_bg_blue) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(54, 73, 84, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_blue) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block purple */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(68, 63, 87, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_purple) !important; */
|
||||
background: var(--theme_dark--callout_bg_purple) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(68, 63, 87, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_purple) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block pink */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(83, 59, 76, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_pink) !important; */
|
||||
background: var(--theme_dark--callout_bg_pink) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(83, 59, 76, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_pink) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block red */
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 65, 65, 0.3)'] {
|
||||
/* color: var(--theme_dark--callout_text_red) !important; */
|
||||
background: var(--theme_dark--callout_bg_red) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(89, 65, 65, 0.3)']
|
||||
[style*='color: rgba(255, 255, 255, 0.9)'] {
|
||||
color: var(--theme_dark--callout_text_red) !important;
|
||||
}
|
||||
|
||||
/* -----------------------------callout 样式 end---------------------------- */
|
||||
|
||||
/* ===================== header =========================== */
|
||||
.notion-dark-theme [placeholder*='Heading 1'] {
|
||||
color: var(--theme_dark--h1_text) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [placeholder*='Heading 2'] {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 4px solid var(--theme_dark--h2_text);
|
||||
display: inline-block;
|
||||
color: var(--theme_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(--theme_dark--h3_text);
|
||||
color: var(--theme_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: #9494942e;
|
||||
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;
|
||||
}
|
||||
|
||||
/* code */
|
||||
.dark [style*='color:#EB5757'] {
|
||||
color: var(--theme_dark--code_inline-text) !important;
|
||||
background: var(--theme_dark--code_inline-background) !important;
|
||||
}
|
||||
23
mods/littlepig-light/mod.js
Normal file
23
mods/littlepig-light/mod.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* 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',
|
||||
},
|
||||
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
|
||||
};
|
||||
605
mods/littlepig-light/styles.css
Normal file
605
mods/littlepig-light/styles.css
Normal file
@ -0,0 +1,605 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
--theme_light--font_sans: 'JetBrains Mono';
|
||||
--theme_light--font_mono: 'JetBrains Mono';
|
||||
--theme_light--font_code: 'JetBrains Mono';
|
||||
|
||||
--theme_light--main: white;
|
||||
--theme_light--sidebar: rgb(247, 246, 243);
|
||||
--theme_light--overlay: rgba(15, 15, 15, 0.6);
|
||||
--theme_light--dragarea: rgba(55, 53, 47, 0.04);
|
||||
--theme_light--preview-width: 977px;
|
||||
--theme_light--preview-padding: 8rem;
|
||||
--theme_light--preview_banner-height: 20vh;
|
||||
--theme_light--page_banner-height: 30vh;
|
||||
|
||||
--theme_light--font_title-size: 40px;
|
||||
--theme_light--font_heading1-size: 30px;
|
||||
--theme_light--font_heading2-size: 24px;
|
||||
--theme_light--font_heading3-size: 20px;
|
||||
--theme_light--font_label-size: 14px;
|
||||
--theme_light--font_body-size: 17px;
|
||||
--theme_light--font_code-size: 16px;
|
||||
--theme_light--font_sidebar-size: 14px;
|
||||
|
||||
--theme_light--scrollbar: #d9d8d6;
|
||||
--theme_light--scrollbar-border: #cacac8;
|
||||
--theme_light--scrollbar_hover: #cacac8;
|
||||
|
||||
--theme_light--card: rgb(247, 247, 247);
|
||||
--theme_light--gallery: rgba(55, 53, 47, 0.024);
|
||||
--theme_light--table-border: rgba(55, 53, 47, 0.16);
|
||||
--theme_light--interactive_hover: rgba(55, 53, 47, 0.08);
|
||||
--theme_light--interactive_hover-border: transparent;
|
||||
--theme_light--button_close: #e81123;
|
||||
--theme_light--button_close-fill: white;
|
||||
|
||||
--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--option-color: black;
|
||||
--theme_light--option-background: transparent;
|
||||
--theme_light--option_hover-color: black;
|
||||
--theme_light--option_hover-background: rgba(55, 53, 47, 0.08);
|
||||
|
||||
--theme_light--danger_text: rgb(235, 87, 87);
|
||||
--theme_light--danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_light--text: rgb(55, 53, 47);
|
||||
--theme_light--text_ui: rgba(55, 53, 47, 0.6);
|
||||
--theme_light--text_ui_info: rgba(55, 53, 47, 0.4);
|
||||
|
||||
/* 文本颜色 */
|
||||
--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: var(--theme_light--bg_gray);
|
||||
--theme_light--select_brown: var(--theme_light--bg_brown);
|
||||
--theme_light--select_orange: var(--theme_light--bg_orange);
|
||||
--theme_light--select_yellow: var(--theme_light--bg_yellow);
|
||||
--theme_light--select_green: var(--theme_light--bg_green);
|
||||
--theme_light--select_blue: var(--theme_light--bg_blue);
|
||||
--theme_light--select_purple: var(--theme_light--bg_purple);
|
||||
--theme_light--select_pink: var(--theme_light--bg_pink);
|
||||
--theme_light--select_red: var(--theme_light--bg_red);
|
||||
|
||||
/* inline code */
|
||||
--theme_light--code_inline-text: #ffffff;
|
||||
--theme_light--code_inline-background: rgb(179, 39, 39);
|
||||
|
||||
--theme_light--code_text: var(--theme_light--text);
|
||||
--theme_light--code-background: rgb(247, 246, 243);
|
||||
--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;
|
||||
|
||||
/* 标题色 */
|
||||
--theme_light--h1_text: #008800;
|
||||
--theme_light--h2_text: #006a00;
|
||||
--theme_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_bg_gray: #e2e3e5;
|
||||
--theme_light--callout_text_gray: #383d41;
|
||||
|
||||
--theme_light--callout_bg_brown: rgb(130, 118, 111);
|
||||
--theme_light--callout_text_brown: rgb(85, 35, 1);
|
||||
|
||||
--theme_light--callout_bg_orange: rgb(254, 214, 155);
|
||||
--theme_light--callout_text_orange: rgb(255, 140, 0);
|
||||
|
||||
--theme_light--callout_bg_yellow: #fcffd8;
|
||||
--theme_light--callout_text_yellow: #c76e00;
|
||||
|
||||
--theme_light--callout_bg_green: #d4edda;
|
||||
--theme_light--callout_text_green: #155724;
|
||||
|
||||
--theme_light--callout_bg_blue: #cce5ff;
|
||||
--theme_light--callout_text_blue: #004085;
|
||||
|
||||
--theme_light--callout_bg_purple: rgb(199, 178, 230);
|
||||
--theme_light--callout_text_purple: rgb(90, 49, 148);
|
||||
|
||||
--theme_light--callout_bg_pink: rgb(255, 206, 228);
|
||||
--theme_light--callout_text_pink: rgb(255, 0, 127);
|
||||
|
||||
--theme_light--callout_bg_red: #f8d7da;
|
||||
--theme_light--callout_text_red: #721c24;
|
||||
}
|
||||
|
||||
/* todo 颜色 */
|
||||
.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_light--option_active-background) !important;
|
||||
}
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(46, 170, 220)'][role='button'] {
|
||||
background: var(--theme_light--primary) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
[style*='background: rgb(46, 170, 220);'][style*='width: 26px'] {
|
||||
background: var(--theme_light--primary) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-to_do-block
|
||||
> div
|
||||
[role='button']:not(:hover)
|
||||
.check {
|
||||
background: var(--theme_light--option_active-background) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-to_do-block
|
||||
> div
|
||||
[role='button']:not(:hover)
|
||||
.check
|
||||
polygon {
|
||||
fill: var(--theme_light--option_active-color) !important;
|
||||
}
|
||||
|
||||
/*================================= 标签颜色 + 文本背景色 ===============================**/
|
||||
|
||||
/* 灰色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(155, 154, 151, 0.4)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_gray) !important;
|
||||
color: var(--theme_light--bg_gray_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_gray) !important;
|
||||
color: var(--theme_light--bg_gray_text) !important;
|
||||
}
|
||||
|
||||
/* 棕色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_brown) !important;
|
||||
color: var(--theme_light--bg_brown_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_brown) !important;
|
||||
color: var(--theme_light--bg_brown_text) !important;
|
||||
}
|
||||
|
||||
/* 橘黄色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_orange) !important;
|
||||
color: var(--theme_light--bg_orange_text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_orange) !important;
|
||||
color: var(--theme_light--bg_orange_text) !important;
|
||||
}
|
||||
|
||||
/* 黄色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_yellow) !important;
|
||||
color: var(--theme_light--bg_yellow_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_yellow) !important;
|
||||
color: var(--theme_light--bg_yellow_text) !important;
|
||||
}
|
||||
|
||||
/* 绿色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_green) !important;
|
||||
color: var(--theme_light--bg_green_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_green) !important;
|
||||
color: var(--theme_light--bg_green_text) !important;
|
||||
}
|
||||
|
||||
/* 蓝色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_blue) !important;
|
||||
color: var(--theme_light--bg_blue_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_blue) !important;
|
||||
color: var(--theme_light--bg_blue_text) !important;
|
||||
}
|
||||
|
||||
/* 紫色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_purple) !important;
|
||||
color: var(--theme_light--bg_purple_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_purple) !important;
|
||||
color: var(--theme_light--bg_purple_text) !important;
|
||||
}
|
||||
|
||||
/* 粉红色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_pink) !important;
|
||||
color: var(--theme_light--bg_pink_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_pink) !important;
|
||||
color: var(--theme_light--bg_pink_text) !important;
|
||||
}
|
||||
|
||||
/* 红色 */
|
||||
.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 0.4em !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_red) !important;
|
||||
color: var(--theme_light--bg_red_text) !important;
|
||||
}
|
||||
.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
|
||||
display: inline-block;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 0.4em !important;
|
||||
margin: 2px 0 !important;
|
||||
font-weight: 500 !important;
|
||||
background: var(--theme_light--bg_red) !important;
|
||||
color: var(--theme_light--bg_red_text) !important;
|
||||
}
|
||||
|
||||
/* -----------------------------callout 样式 start------------------------ */
|
||||
|
||||
/* notion-callout-block gray */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(235, 236, 237, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_gray) !important; */
|
||||
background: var(--theme_light--callout_bg_gray) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(235, 236, 237, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_gray) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block brown */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(233, 229, 227, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_brown) !important; */
|
||||
background: var(--theme_light--callout_bg_brown) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(233, 229, 227, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_brown) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block orange */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(250, 235, 221, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_orange) !important; */
|
||||
background: var(--theme_light--callout_bg_orange) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(250, 235, 221, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_orange) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block yellow */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(251, 243, 219, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_yellow) !important; */
|
||||
background: var(--theme_light--callout_bg_yellow) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(251, 243, 219, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_yellow) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block green */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(221, 237, 234, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_green) !important; */
|
||||
background: var(--theme_light--callout_bg_green) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(221, 237, 234, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_green) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block blue */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(221, 235, 241, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_blue) !important; */
|
||||
background: var(--theme_light--callout_bg_blue) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(221, 235, 241, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_blue) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block purple */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(234, 228, 242, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_purple) !important; */
|
||||
background: var(--theme_light--callout_bg_purple) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(234, 228, 242, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_purple) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block pink */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(244, 223, 235, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_pink) !important; */
|
||||
background: var(--theme_light--callout_bg_pink) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(244, 223, 235, 0.3);'][style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_pink) !important;
|
||||
}
|
||||
|
||||
/* notion-callout-block red */
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(251, 228, 228, 0.3);'] {
|
||||
/* color: var(--theme_light--callout_text_red) !important; */
|
||||
background: var(--theme_light--callout_bg_red) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark)
|
||||
.notion-callout-block
|
||||
[style*='background: rgba(251, 228, 228, 0.3);']
|
||||
[style*='color: rgb(55, 53, 47);'] {
|
||||
color: var(--theme_light--callout_text_red) !important;
|
||||
}
|
||||
|
||||
/* -----------------------------callout 样式 end---------------------------- */
|
||||
|
||||
/* ===================== header =========================== */
|
||||
.notion-body:not(.dark) [placeholder*='Heading 1'] {
|
||||
color: var(--theme_light--h1_text) !important;
|
||||
}
|
||||
|
||||
.notion-body:not(.dark) [placeholder*='Heading 2'] {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 4px solid var(--theme_light--h2_text);
|
||||
display: inline-block;
|
||||
color: var(--theme_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(--theme_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: #9494942e;
|
||||
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;
|
||||
}
|
||||
|
||||
/* code */
|
||||
.dark [style*='color:#EB5757'] {
|
||||
color: var(--theme_light--code_inline-text) !important;
|
||||
background: var(--theme_light--code_inline-background) !important;
|
||||
}
|
||||
@ -12,6 +12,10 @@ module.exports = {
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'neutral',
|
||||
desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
|
||||
version: '0.1.1',
|
||||
version: '0.1.2',
|
||||
author: 'arecsu',
|
||||
fonts: [
|
||||
'https://rsms.me/inter/inter.css',
|
||||
'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap',
|
||||
],
|
||||
};
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import url('https://rsms.me/inter/inter.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
|
||||
|
||||
:root {
|
||||
/** dark **/
|
||||
|
||||
|
||||
@ -12,11 +12,12 @@ module.exports = {
|
||||
tags: ['theme', 'dark'],
|
||||
name: 'pastel dark',
|
||||
desc: 'a smooth-transition true dark theme with a hint of pastel.',
|
||||
version: '0.1.1',
|
||||
version: '0.1.2',
|
||||
author: {
|
||||
name: 'zenith_illinois',
|
||||
link: 'https://www.reddit.com/user/zenith_illinois/',
|
||||
avatar:
|
||||
'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128',
|
||||
},
|
||||
fonts: ['https://rsms.me/inter/inter.css'],
|
||||
};
|
||||
|
||||
@ -5,8 +5,6 @@
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import url('https://rsms.me/inter/inter.css');
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #0b0b0b;
|
||||
--theme_dark--sidebar: #0f0f0f;
|
||||
|
||||
@ -7,12 +7,14 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const helpers = 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.3',
|
||||
version: '0.2.4',
|
||||
author: 'alexander-kazakov',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
@ -30,7 +32,7 @@ module.exports = {
|
||||
function process(list) {
|
||||
queue = [];
|
||||
let properties = document.querySelector(
|
||||
'.notion-scroller.vertical > :first-child [style="width: 100%; font-size: 14px;"]'
|
||||
'.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]'
|
||||
);
|
||||
if (
|
||||
properties &&
|
||||
@ -40,19 +42,17 @@ module.exports = {
|
||||
'propertylayout-enhanced',
|
||||
'propertylayout-hidden'
|
||||
);
|
||||
const toggle = document.createElement('button');
|
||||
toggle.classList.add('propertylayout-toggle');
|
||||
toggle.setAttribute('data-action', 'show');
|
||||
toggle.innerText = '→ show properties';
|
||||
const toggle = helpers.createElement(
|
||||
'<button class="propertylayout-toggle" data-action="show">properties</button>'
|
||||
);
|
||||
toggle.addEventListener('click', (event) => {
|
||||
properties.classList.toggle('propertylayout-hidden');
|
||||
const action = properties.classList.contains(
|
||||
'propertylayout-hidden'
|
||||
)
|
||||
? 'show'
|
||||
: 'hide';
|
||||
toggle.innerText = `→ ${action} properties`;
|
||||
toggle.setAttribute('data-action', action);
|
||||
toggle.setAttribute(
|
||||
'data-action',
|
||||
properties.classList.contains('propertylayout-hidden')
|
||||
? 'show'
|
||||
: 'hide'
|
||||
);
|
||||
});
|
||||
if (properties.previousElementSibling) {
|
||||
properties.previousElementSibling.append(toggle);
|
||||
|
||||
@ -26,6 +26,9 @@
|
||||
.propertylayout-toggle[data-action='show'] {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.propertylayout-toggle::before {
|
||||
content: '→ ' attr(data-action) ' ';
|
||||
}
|
||||
.propertylayout-toggle:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ module.exports = {
|
||||
tags: ['extension'],
|
||||
name: 'weekly view',
|
||||
desc: 'calendar views named "weekly" will show only the 7 days of this week.',
|
||||
version: '0.5.0',
|
||||
version: '0.5.1',
|
||||
author: 'adihd',
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
@ -36,15 +36,17 @@ module.exports = {
|
||||
if (!collection_view || collection_view.innerText != 'weekly')
|
||||
return;
|
||||
const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
|
||||
'notion-calendar-view-day'
|
||||
);
|
||||
'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 (days.length) {
|
||||
const today = [...days].find((day) => day.style.background);
|
||||
if (today)
|
||||
today.parentElement.parentElement.style.height = '124px';
|
||||
}
|
||||
if (today) today.parentElement.parentElement.style.height = height;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "notion-enhancer",
|
||||
"version": "0.8.5",
|
||||
"version": "0.9.0-wip",
|
||||
"description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
@ -9,7 +9,7 @@
|
||||
"scripts": {
|
||||
"test": "echo \"no test specified\"",
|
||||
"postinstall": "node bin.js apply -y",
|
||||
"preuninstall": "node bin.js remove -y"
|
||||
"preuninstall": "node bin.js remove"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -30,10 +30,10 @@ module.exports = async function ({ overwrite_version, friendly_errors } = {}) {
|
||||
const check_app = await require('./check.js')();
|
||||
switch (check_app.code) {
|
||||
case 1:
|
||||
console.log(`~~ notion-enhancer v${version} already applied.`);
|
||||
console.info(`~~ notion-enhancer v${version} already applied.`);
|
||||
return true;
|
||||
case 2:
|
||||
console.log(` * ${check_app.msg}`);
|
||||
console.warn(` * ${check_app.msg}`);
|
||||
do {
|
||||
process.stdout.write(' > overwrite? [Y/n]: ');
|
||||
overwrite_version = await helpers.readline();
|
||||
|
||||
@ -9,8 +9,7 @@
|
||||
const os = require('os'),
|
||||
path = require('path'),
|
||||
fs = require('fs-extra'),
|
||||
{ exec, execSync } = require('child_process'),
|
||||
{ promisify } = require('util');
|
||||
{ execSync } = require('child_process');
|
||||
|
||||
// used to differentiate between "enhancer failed" and "code broken" errors.
|
||||
class EnhancerError extends Error {
|
||||
@ -128,6 +127,7 @@ function getEnhancements() {
|
||||
!mod.name ||
|
||||
!mod.version ||
|
||||
!mod.author ||
|
||||
(mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
|
||||
(mod.options &&
|
||||
!mod.options.every((opt) =>
|
||||
['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
|
||||
@ -169,6 +169,13 @@ function readline() {
|
||||
});
|
||||
}
|
||||
|
||||
// construct a HTMLElement from a string
|
||||
function createElement(html) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstElementChild;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
EnhancerError,
|
||||
is_wsl,
|
||||
@ -178,4 +185,5 @@ module.exports = {
|
||||
getEnhancements,
|
||||
getJSON,
|
||||
readline,
|
||||
createElement,
|
||||
};
|
||||
|
||||
@ -120,3 +120,15 @@ if (overwrite) {
|
||||
// do stuff
|
||||
} else console.info(' -- keeping file: skipping step.');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```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.
|
||||
|
||||
@ -69,10 +69,16 @@ module.exports = function (__file, __exports) {
|
||||
) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
const style = document.createElement('link');
|
||||
style.rel = 'stylesheet';
|
||||
style.href = `enhancement://${mod.dir}/styles.css`;
|
||||
document.querySelector('head').appendChild(style);
|
||||
for (let rules of [
|
||||
`enhancement://${mod.dir}/styles.css`,
|
||||
...(mod.fonts || []),
|
||||
]) {
|
||||
document
|
||||
.querySelector('head')
|
||||
.appendChild(
|
||||
helpers.createElement(`<link rel="stylesheet" href="${rules}">`)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (mod.hacks && mod.hacks[__file]) {
|
||||
|
||||
@ -68,7 +68,7 @@ module.exports = async function ({
|
||||
|
||||
// cleaning data folder: ~/.notion-enhancer
|
||||
if (await fs.pathExists(helpers.data_folder)) {
|
||||
console.log(` ...data folder ${helpers.data_folder} found.`);
|
||||
console.info(` ...data folder ${helpers.data_folder} found.`);
|
||||
if (delete_data === undefined) {
|
||||
do {
|
||||
process.stdout.write(' > delete? [Y/n]: ');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user