mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
halved selectors for better perf., added wip littlepig themes
This commit is contained in:
parent
23d79c5abc
commit
6c7e1cec9d
GPG Key ID:
C7A48B7846AA706D
33
CHANGELOG.md
33
CHANGELOG.md
@ -6,7 +6,36 @@
|
||||
- [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)
|
||||
|
||||
### v0.8.5 (wip)
|
||||
### v0.9.0 (wip)
|
||||
|
||||
a feature and cleanup update.
|
||||
|
||||
- improved: halved the number of css rules used -> much better performance.
|
||||
- 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.
|
||||
- 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.
|
||||
|
||||
// todo
|
||||
|
||||
<!-- - improved: extension menu will now receive style rules from extensions (prev. only got css vars) = necessary for
|
||||
custom fonts. javascript is still not executable in the menu. (e.g. the "font chooser" will work, but only
|
||||
because all it thing it does is change variables - if it were to try dynamically adding new font import rules
|
||||
things things would break). -->
|
||||
|
||||
- improved: added individual text-colour rules for different background colours.
|
||||
- improved: added variables for callout backgrounds.
|
||||
- bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
|
||||
to remove conflict with the inline code highlight shortcut.
|
||||
- bugfix: block-level text colours are now changed properly.
|
||||
- bugfix: page titles now respond to small-text mode.
|
||||
- bugfix: update property-layout to match notion changes again.
|
||||
|
||||
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?
|
||||
@ -35,7 +64,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.
|
||||
|
||||
@ -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.)
|
||||
|
||||
@ -33,21 +33,8 @@ 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) {
|
||||
@ -83,7 +70,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,24 +98,63 @@ 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) {
|
||||
function setSidebarWidth(list) {
|
||||
if (!store().frameless) return;
|
||||
const new_sidebar_width =
|
||||
list[0].target.style.height === 'auto'
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -123,7 +123,8 @@ s {
|
||||
#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 +133,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 +202,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);
|
||||
@ -249,21 +263,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 +438,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;
|
||||
}
|
||||
640
mods/core/css/theme.css
Normal file
640
mods/core/css/theme.css
Normal file
@ -0,0 +1,640 @@
|
||||
/*
|
||||
* 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: 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;
|
||||
}
|
||||
|
||||
/** 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:not(.dark) [style*='color:rgb(155,154,151)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(100,71,58)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(217,115,13)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(223,171,1)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(15,123,108)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(11,110,153)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(105,64,165)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(173,26,114)'] {
|
||||
color: 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:not(.dark) [style*='color:rgb(224,62,62)'] {
|
||||
color: 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"
|
||||
]
|
||||
@ -41,10 +41,9 @@ window['__start'] = async () => {
|
||||
}
|
||||
});
|
||||
|
||||
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]);
|
||||
});
|
||||
|
||||
@ -378,6 +377,19 @@ window['__start'] = async () => {
|
||||
? 1
|
||||
: a.name.localeCompare(b.name)
|
||||
)) {
|
||||
// mod styling - necessary for fonts
|
||||
// if (
|
||||
// fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
|
||||
// ) {
|
||||
// document
|
||||
// .querySelector('head')
|
||||
// .appendChild(
|
||||
// createElement(
|
||||
// `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
|
||||
// )
|
||||
// );
|
||||
// }
|
||||
|
||||
const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
|
||||
.enabled,
|
||||
author =
|
||||
|
||||
@ -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,14 +29,16 @@ 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);
|
||||
|
||||
|
||||
22
mods/littilepig-dark/mod.js
Normal file
22
mods/littilepig-dark/mod.js
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* 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.0',
|
||||
author: {
|
||||
name: 'Lizishan',
|
||||
link: 'https://www.reddit.com/user/Lizishan/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
|
||||
},
|
||||
};
|
||||
627
mods/littilepig-dark/styles.css
Normal file
627
mods/littilepig-dark/styles.css
Normal file
@ -0,0 +1,627 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
|
||||
|
||||
:root {
|
||||
--theme_dark--main: #1e1c26;
|
||||
--theme_dark--sidebar: #24222c;
|
||||
--theme_dark--dragarea: #19181f;
|
||||
|
||||
--theme_dark--font_sans: 'JetBrains Mono';
|
||||
--theme_dark--font_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;
|
||||
}
|
||||
22
mods/littlepig-light/mod.js
Normal file
22
mods/littlepig-light/mod.js
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* 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.0',
|
||||
author: {
|
||||
name: 'Lizishan',
|
||||
link: 'https://www.reddit.com/user/Lizishan/',
|
||||
avatar:
|
||||
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
|
||||
},
|
||||
};
|
||||
607
mods/littlepig-light/styles.css
Normal file
607
mods/littlepig-light/styles.css
Normal file
@ -0,0 +1,607 @@
|
||||
/*
|
||||
* littlepig
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Lizishan
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
|
||||
|
||||
: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;
|
||||
}
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user