mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
dark theme variables complete (?) + scrollbar fix + titlebar tweaks
This commit is contained in:
parent
830492e181
commit
2f74449189
24
repo/bracketed-links/styles.css
Normal file
24
repo/bracketed-links/styles.css
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 Arecsu
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
|
||||
.notion-link-token span {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.notion-link-token:before {
|
||||
content: '[';
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
.notion-link-token:after {
|
||||
content: ']';
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
.notion-link-token:hover::before,
|
||||
.notion-link-token:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -19,14 +19,29 @@ module.exports = (defaults) =>
|
||||
if (event.code === 'F5') window.reload();
|
||||
});
|
||||
|
||||
const attempt = setInterval(enhance, 500);
|
||||
const interval_attempts = {
|
||||
enhance: setInterval(enhance, 500),
|
||||
};
|
||||
async function enhance() {
|
||||
if (!document.querySelector('.notion-frame')) return;
|
||||
clearInterval(attempt);
|
||||
clearInterval(interval_attempts.enhance);
|
||||
|
||||
// scrollbars
|
||||
if (settings.smooth_scrollbars)
|
||||
if (settings.smooth_scrollbars) {
|
||||
document.body.classList.add('smooth-scrollbars');
|
||||
interval_attempts.patchScrollbars = setInterval(patchScrollbars, 50);
|
||||
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';
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// frameless
|
||||
if (settings.frameless) {
|
||||
@ -38,11 +53,14 @@ module.exports = (defaults) =>
|
||||
document.querySelector('.notion-topbar').prepend(dragarea);
|
||||
document.documentElement.style.setProperty(
|
||||
'--configured-dragarea_height',
|
||||
`${settings.dragarea_height}px`
|
||||
`${settings.dragarea_height + 2}px`
|
||||
);
|
||||
let sidebar_width;
|
||||
setInterval(() => {
|
||||
interval_attempts.patchDragarea = setInterval(patchDragarea, 50);
|
||||
function patchDragarea() {
|
||||
const sidebar = document.querySelector('.notion-sidebar');
|
||||
if (!sidebar) return;
|
||||
clearInterval(interval_attempts.patchDragarea);
|
||||
let new_width =
|
||||
sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
|
||||
if (sidebar_width !== new_width) {
|
||||
@ -51,7 +69,8 @@ module.exports = (defaults) =>
|
||||
`enhancer:sidebar-width-${sidebar_width}`
|
||||
);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
setInterval(() => {}, 100);
|
||||
}
|
||||
|
||||
// window buttons
|
||||
@ -22,8 +22,11 @@ module.exports = (defaults) =>
|
||||
if (event.channel.startsWith('enhancer:sidebar-width-'))
|
||||
dragarea.setAttribute(
|
||||
'style',
|
||||
`${default_styles} height: ${settings.dragarea_height}px; left: ${
|
||||
event.channel.slice('enhancer:sidebar-width-'.length)};`
|
||||
`${default_styles} top: 2px; height: ${
|
||||
settings.dragarea_height
|
||||
}px; left: ${event.channel.slice(
|
||||
'enhancer:sidebar-width-'.length
|
||||
)};`
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@ -9,7 +9,7 @@ const defaults = {
|
||||
maximized: false,
|
||||
close_to_tray: true,
|
||||
frameless: true,
|
||||
dragarea_height: 12.5,
|
||||
dragarea_height: 15,
|
||||
smooth_scrollbars: true,
|
||||
hotkey: 'CmdOrCtrl+Shift+A',
|
||||
};
|
||||
@ -29,6 +29,6 @@ module.exports = {
|
||||
'main/main.js': require('./tray.js')(defaults),
|
||||
'main/createWindow.js': require('./window.js')(defaults),
|
||||
'renderer/index.js': require('./dragarea.js')(defaults),
|
||||
'renderer/preload.js': require('./titlebar.js')(defaults),
|
||||
'renderer/preload.js': require('./client.js')(defaults),
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2020 u/zenith_illinois
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
/** light **/
|
||||
|
||||
--theme_light-main-height: 100%;
|
||||
|
||||
--theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol';
|
||||
@ -33,7 +33,6 @@
|
||||
/** dark **/
|
||||
|
||||
--theme_dark-main: rgb(47, 52, 55);
|
||||
--theme_dark-main-height: 100%;
|
||||
--theme_dark-sidebar: rgb(55, 60, 63);
|
||||
--theme_dark-dragarea: #272d2f;
|
||||
--theme_dark-preview-width: 977px;
|
||||
@ -62,13 +61,23 @@
|
||||
--theme_dark-button_close-fill: white;
|
||||
--theme_dark-button_hover-border: transparent;
|
||||
|
||||
--theme_dark-block-selected: rgba(139, 220, 46, 0.2);
|
||||
--theme_dark-selected: rgba(46, 170, 220, 0.2);
|
||||
--theme_dark-primary: rgb(46, 170, 220);
|
||||
--theme_dark-primary_hover: rgb(6, 156, 205);
|
||||
--theme_dark-primary_click: rgb(0, 141, 190);
|
||||
--theme_dark-primary_indicator: rgb(235, 87, 87);
|
||||
|
||||
--theme_dark-todo_empty-border: currentColor;
|
||||
--theme_dark-todo_ticked: currentColor;
|
||||
--theme_dark-todo_ticked-background: var(--theme_dark-primary);
|
||||
--theme_dark-todo_hover-background: rgb(71, 76, 80);
|
||||
|
||||
--theme_dark-danger_text: rgb(235, 87, 87);
|
||||
--theme_dark-danger_border: rgba(235, 87, 87, 0.5);
|
||||
|
||||
--theme_dark-text: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark-text_ui: rgba(255, 255, 255, 0.6);
|
||||
--theme_dark-text_ui_dark: rgba(255, 255, 255, 0.4);
|
||||
--theme_dark-text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_dark-text_brown: rgb(147, 114, 100);
|
||||
--theme_dark-text_orange: rgb(255, 163, 68);
|
||||
@ -97,7 +106,9 @@
|
||||
--theme_dark-line_pink: rgb(83, 59, 76);
|
||||
--theme_dark-line_red: rgb(89, 65, 65);
|
||||
|
||||
--theme_dark-text_code: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark-code_inline-text: #eb5757;
|
||||
--theme_dark-code_inline-background: rgba(135, 131, 120, 0.15);
|
||||
--theme_dark-code_text: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark-code-background: rgb(63, 68, 71);
|
||||
--theme_dark-code_function: rgba(255, 255, 255, 0.9);
|
||||
--theme_dark-code_keyword: hsl(350, 40%, 70%);
|
||||
@ -120,17 +131,11 @@
|
||||
background: var(--theme_dark-sidebar) !important;
|
||||
}
|
||||
.notion-body.dark,
|
||||
.notion-dark-theme [style*='background: rgb(47, 52, 55)'] {
|
||||
.notion-dark-theme [style*='background: rgb(47, 52, 55)'],
|
||||
.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] {
|
||||
background: var(--theme_dark-main) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-frame {
|
||||
height: var(--theme_dark-main-height) !important;
|
||||
}
|
||||
.notion-light-theme .notion-frame {
|
||||
height: var(--theme_light-main-height) !important;
|
||||
}
|
||||
|
||||
.notion-peek-renderer > div:nth-child(2) {
|
||||
max-width: var(--theme_dark-preview-width) !important;
|
||||
}
|
||||
@ -175,6 +180,14 @@
|
||||
font-family: var(--theme_light-font_code) !important;
|
||||
}
|
||||
|
||||
/* prevent block hover options overlaying topbar */
|
||||
*:not([style*='z-index']) {
|
||||
z-index: 1;
|
||||
}
|
||||
.notion-dark-theme .notion-topbar {
|
||||
background: var(--theme_dark-main);
|
||||
}
|
||||
|
||||
/** databases **/
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(63, 68, 71)'] {
|
||||
@ -184,41 +197,37 @@
|
||||
border: 0.5px solid var(--theme_dark-card-border);
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
|
||||
box-shadow: var(--theme_dark-main) -3px 0px 0px !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme_dark-main) -3px 0px 0px,
|
||||
var(--theme_dark-table-border) 0px 1px 0px !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] {
|
||||
border-top: 1px solid var(--theme_dark-table-border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
|
||||
box-shadow: var(--theme_dark-table-border) -1px 0px 0px !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme
|
||||
[style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] {
|
||||
border-bottom: 1px solid var(--theme_dark-table-border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme_dark-table-border) 0px 1px 0px !important;
|
||||
}
|
||||
.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme
|
||||
[style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] {
|
||||
border-right: 1px solid var(--theme_dark-table-border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme_dark-table-border) 0px -1px 0px !important;
|
||||
}
|
||||
.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] {
|
||||
border-left: 1px solid var(--theme_dark-table-border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
@ -233,7 +242,16 @@
|
||||
box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border);
|
||||
}
|
||||
|
||||
/* fix inline-tables in pages */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* fix inline-tables in pages (?) */
|
||||
.notion-page-content .notion-collection_view-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -256,29 +274,68 @@
|
||||
|
||||
/** colours **/
|
||||
|
||||
[style*='background: rgba(46, 170, 220, 0.2)'],
|
||||
[style*='background-color: rgba(46, 170, 220, 0.2)'] {
|
||||
background: var(--theme_dark-block-selected) !important;
|
||||
.notion-dark-theme ::selection,
|
||||
.notion-dark-theme [style*='background: rgba(46, 170, 220,'],
|
||||
.notion-dark-theme [style*='background-color: rgba(46, 170, 220,'] {
|
||||
background: var(--theme_dark-selected) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-page-content [style*='color: inherit;'],
|
||||
.notion-dark-theme .notion-frame .notion-page-block {
|
||||
color: var(--theme_dark-text) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(46, 170, 220)'] {
|
||||
.notion-dark-theme [style*='background: rgb(46, 170, 220)'],
|
||||
.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark-primary) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
|
||||
box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(6, 156, 205)'] {
|
||||
background: var(--theme_dark-primary_hover) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(0, 141, 190)'] {
|
||||
background: var(--theme_dark-primary_click) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
|
||||
.notion-dark-theme [style*='background: rgb(235, 87, 87)'] {
|
||||
background: var(--theme_dark-primary_indicator) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-to_do-block .checkboxSquare path {
|
||||
fill: var(--theme_dark-todo_empty-border) !important;
|
||||
}
|
||||
.notion-dark-theme .notion-to_do-block .check polygon {
|
||||
fill: var(--theme_dark-todo_ticked-fill) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
.notion-to_do-block
|
||||
[style*='background: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark-todo_ticked-background) !important;
|
||||
}
|
||||
.notion-to_do-block > div > div > div[style*='background:'] {
|
||||
transition: background 200ms ease !important;
|
||||
}
|
||||
.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] {
|
||||
background: var(--theme_dark-todo_hover-background) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
|
||||
color: var(--theme_dark-danger_text) !important;
|
||||
border: 1px solid var(--theme_dark-danger_border) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme,
|
||||
.notion-dark-theme .notion-page-content [style*='color: inherit;'],
|
||||
.notion-dark-theme .notion-frame .notion-page-block {
|
||||
color: var(--theme_dark-text) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] {
|
||||
color: var(--theme_dark-text_ui) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] {
|
||||
color: var(--theme_dark-text_ui_dark) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] {
|
||||
color: var(--theme_dark-text_gray) !important;
|
||||
}
|
||||
@ -370,14 +427,24 @@
|
||||
background: var(--theme_dark-line_red) !important;
|
||||
}
|
||||
|
||||
/* fix highlight padding: this isn't a typo */
|
||||
[style*='background:rgb('] {
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
|
||||
/* code */
|
||||
|
||||
.notion-dark-theme [style*='color:#EB5757'] {
|
||||
color: var(--theme_dark-code_inline-text) !important;
|
||||
background: var(--theme_dark-code_inline-background) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme
|
||||
[style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] {
|
||||
background: var(--theme_dark-code-background) !important;
|
||||
}
|
||||
.notion-dark-theme .notion-code-block > div {
|
||||
color: var(--theme_dark-text_code) !important;
|
||||
color: var(--theme_dark-code_text) !important;
|
||||
}
|
||||
.notion-dark-theme .notion-dark-theme .notion-code-block .token.function {
|
||||
color: var(--theme_dark-code_function) !important;
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (c) 2020 Arecsu
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -93,3 +94,19 @@
|
||||
background: var(--theme_light-button_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border);
|
||||
}
|
||||
|
||||
/* hide topbar when sidebar is hidden */
|
||||
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
|
||||
height: calc(
|
||||
100% - (var(--configured-dragarea_height, 10px) + 45px)
|
||||
) !important;
|
||||
}
|
||||
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 200ms ease-in-out !important;
|
||||
}
|
||||
.notion-sidebar-container[style*='width: 0px;']
|
||||
+ .notion-frame
|
||||
.notion-topbar:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user