dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-11-05 00:28:07 +11:00
Code Issues Packages Projects Releases Wiki Activity

style(tweaks): update typography + page tweaks, add compact code blocks

Browse Source
This commit is contained in:
dragonwocky 2024-05-30 00:07:22 +10:00
parent daee8c70f5
commit 43c3b1bbca
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
5 changed files with 89 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/generate-theme-css.mjs
View File

@ -885,6 +885,7 @@ styleTooltips();
styleAccents();
styleScrollbars();
styleCode();
cssBody += `.notion-emoji{display:inline-block!important}`;
console.log(
`body${modeSelector} { ${cssRoot} } ${Object.entries(cssRefs)

2
src/core/theme.css
View File

File diff suppressed because one or more lines are too long

150
src/extensions/tweaks/client.css
View File

@ -27,8 +27,7 @@ body[data-tweaks*=",hidePlaceholders,"] [contenteditable]:empty:after {
}
body[data-tweaks*=",hideDefaultIcons,"]
div
:has(> .notion-record-icon svg.page) {
:is(.notion-record-icon, [style*="width: 24px;"]):has(svg.page) {
display: none !important;
}
@ -39,6 +38,11 @@ body[data-tweaks*=",snappyTransitions,"] * {
/* pages */
body[data-tweaks*=",fullWidthPages,"]
.layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
--content-width: 100% !important;
}
body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
.notion-collection_view-block {
width: 100% !important;
@ -55,8 +59,6 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
}
}
/* typography */
.enhancer--tweak-responsive_breakpoint
.notion-column_list-block
[style="display: flex;"]
@ -74,99 +76,97 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
--theme--page-padding: calc(48px + env(safe-area-inset-left));
}
.enhancer--tweak-hide_default_page_icons
.notion-sidebar
a
> div
> div:has(.notion-record-icon svg.page),
.enhancer--tweak-hide_default_page_icons
.layout
a
> div
> div
> div
> div:has(.notion-record-icon svg.page) {
display: none !important;
body[data-tweaks*=",hidePageDiscussions,"]
.layout-content:has(.notion-page-view-discussion) {
display: none;
}
.enhancer--tweak-thicker_bold
.notion-page-content
span[style*="font-weight:600"] {
font-weight: 700 !important;
}
/* typography */
.enhancer--tweak-spaced_lines
body[data-tweaks*=",increasedLineSpacing,"]
.notion-page-content
.notion-selectable.notion-text-block {
line-height: 1.65 !important;
margin-top: 0.75em !important;
}
.enhancer--tweak-condensed_bullets
.notion-selectable.notion-bulleted_list-block {
body[data-tweaks*=",condensedLists,"]
:is(.notion-numbered_list-block, .notion-bulleted_list-block) {
margin-top: -1.5px !important;
margin-bottom: -1.5px !important;
}
.enhancer--tweak-bracketed_links .notion-link-token span {
border-bottom: none !important;
}
.enhancer--tweak-bracketed_links .notion-link-token:before {
content: "[[";
opacity: 0.7;
transition: opacity 100ms ease-in;
}
.enhancer--tweak-bracketed_links .notion-link-token:after {
content: "]]";
opacity: 0.7;
transition: opacity 100ms ease-in;
}
.enhancer--tweak-bracketed_links .notion-link-token:hover::before,
.enhancer--tweak-bracketed_links .notion-link-token:hover::after {
opacity: 1;
body[data-tweaks*=",thickerBoldText,"]
.notion-page-content
span[style*="font-weight:600"] {
font-weight: 700 !important;
}
.enhancer--tweak-accented_links .notion-link-token {
color: var(--theme--accent_blue) !important;
body[data-tweaks*=",bracketedLinks,"] {
.notion-link-token {
span {
border-bottom: none !important;
}
&::before {
content: "[[";
opacity: 0.7;
transition: opacity 100ms ease-in;
}
&::after {
content: "]]";
opacity: 0.7;
transition: opacity 100ms ease-in;
}
&:hover::before,
&:hover::after {
opacity: 1;
}
}
}
.enhancer--tweak-accented_links
.notion-link-token
body[data-tweaks*=",accentedLinks,"] .notion-link-token {
color: var(--theme--accent-primary) !important;
span[style*="border-bottom:0.05em"] {
opacity: 1 !important;
border-color: var(--theme--accent_blue) !important;
opacity: 1 !important;
border-color: var(--theme--accent-primary) !important;
}
}
.enhancer--tweak-quotation_marks
.notion-quote-block
body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
[style*="border-left: 3px solid currentcolor;"] {
position: relative;
padding-left: 24px !important;
padding-right: 18px !important;
position: relative;
padding-left: 24px !important;
padding-right: 18px !important;
}
[placeholder="Empty quote"] {
&::before,
&::after {
font-family: var(--font--serif);
font-size: 24px;
font-weight: bold;
position: absolute;
}
&::before {
content: "\201C";
left: 8px;
top: -2px;
}
&::after {
content: "\201D";
right: 2px;
bottom: -2px;
}
}
}
.enhancer--tweak-quotation_marks
.notion-quote-block
[placeholder="Empty quote"]::before,
.enhancer--tweak-quotation_marks
.notion-quote-block
[placeholder="Empty quote"]::after {
font-family: Georgia, serif;
font-size: 24px;
font-weight: bold;
position: absolute;
body[data-tweaks*=",compactCodeBlocks,"]
.notion-code-block.line-numbers
> [data-content-editable-leaf] {
padding: 28px 22px 22px 22px !important;
}
.enhancer--tweak-quotation_marks
.notion-quote-block
[placeholder="Empty quote"]::before {
content: "\201C";
left: 8px;
top: -2px;
}
.enhancer--tweak-quotation_marks
.notion-quote-block
[placeholder="Empty quote"]::after {
content: "\201D";
right: 2px;
bottom: -2px;
body[data-tweaks*=",defaultImageAlignment,"] {
/**/
}
.enhancer--tweak-img_alignment-left .notion-image-block {

6
src/extensions/tweaks/client.mjs
View File

@ -8,9 +8,11 @@ const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
export default async (api, db) => {
const { getMods, addKeyListener } = api,
[{ options }] = await getMods((mod) => mod.id === tweaksId),
tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
tweaks = options
.filter((opt) => opt.type === "toggle")
.map((opt) => opt.key),
enabled = {};
for (const tweak of tweaks) if (await db.get(tweak)) enabled[tweak] = true;
for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
// inc. leading & trailing comma for selectors (see client.css)
document.body.dataset.tweaks =

16
src/extensions/tweaks/mod.json
View File

@ -56,6 +56,12 @@
"description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
"value": true
},
{
"type": "toggle",
"key": "hidePageDiscussions",
"description": "Hide the comments section at the top of pages within databases.",
"value": false
},
{
"type": "number",
"key": "responsiveColumnsBreakpoint",
@ -68,12 +74,6 @@
"description": "The unit to measure the above width in, e.g. you may wish the button to appear when the window occupies <= 20% of the screen or is less than a certain number of pixels wide.",
"values": ["Pixels", "Percent"]
},
{
"type": "toggle",
"key": "hidePageDiscussions",
"description": "Hide the comments section at the top of pages within databases.",
"value": false
},
{ "type": "heading", "label": "Typography" },
{
"type": "toggle",
@ -83,8 +83,8 @@
},
{
"type": "toggle",
"key": "condensedBulletedLists",
"description": "Tightened line spacing between bulleted list items.",
"key": "condensedLists",
"description": "Tightened line spacing between bulleted and numbered list items.",
"value": false
},
{