scripts/generate-theme-css.mjs

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

src/api/interface.mjs

@@ -267,11 +267,9 @@ const iconPattern = /^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/,
 let _renderedTokens = -1;
 const _tokens = new Set(),
   _stylesheet = html`<style id="__unocss"></style>`,
-  preflight = `[un-cloak]{display:none!important}
-  .notion-emoji{display:inline-block!important}`,
   uno = createGenerator({
     presets: [presetUno()],
-    preflights: [{ getCSS: () => preflight }],
+    preflights: [{ getCSS: () => `[un-cloak]{display:none!important}` }],
     rules: [[iconPattern, presetIcons, { layer: "icons" }]],
     layers: { preflights: -2, icons: -1, default: 1 },
   }),

src/extensions/tweaks/client.css

@@ -31,44 +31,13 @@ body[data-tweaks*=",hideDefaultIcons,"]
   display: none !important;
 }
 
-body[data-tweaks*=",disableSidebarResizing,"]
-  .notion-sidebar
-  [style*="cursor: col-resize;"] {
-  pointer-events: none !important;
-}
-
 body[data-tweaks*=",snappyTransitions,"] * {
   animation-duration: 0s !important;
   transition-duration: 0s !important;
 }
 
-body[data-tweaks*=",tabStyle=Rounded,"] > #root .hide-scrollbar {
-  padding-top: 4px;
-  > [draggable] {
-    overflow: hidden;
-    border-top-right-radius: 8px;
-    border-top-left-radius: 8px;
-    [style*="height: 36px"] {
-      top: -2px !important;
-    }
-  }
-}
-
-body[data-tweaks*=",tabStyle=Bubble,"] > #root .hide-scrollbar {
-  padding-top: 3px;
-  height: 30px !important;
-  > [draggable] {
-    overflow: hidden;
-    border-radius: 5px;
-    [style*="height: 36px"] {
-      top: -4px !important;
-    }
-  }
-}
-
 /* pages */
 
-body[data-break-columns],
 body[data-tweaks*=",fullWidthPages,"]
   .layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
   --content-width: 100% !important;
@@ -90,15 +59,21 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   }
 }
 
-body[data-break-columns]
+.enhancer--tweak-responsive_breakpoint
   .notion-column_list-block
-  [style*="display: flex;"]:has(.notion-block-resizer) {
+  [style="display: flex;"]
-  flex-direction: column !important;
   > div {
-    width: 100% !important;
+  width: 100% !important;
-    padding-top: 0 !important;
+}
-    padding-bottom: 0 !important;
+.enhancer--tweak-responsive_breakpoint
-  }
+  .notion-column_list-block
+  [style="display: flex;"] {
+  flex-direction: column !important;
+}
+.enhancer--tweak-responsive_breakpoint .notion-app-inner,
+.enhancer--tweak-full_width_pages .notion-app-inner {
+  --theme--page-width: 100%;
+  --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
 body[data-tweaks*=",hidePageDiscussions,"]
@@ -184,19 +159,19 @@ body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
   }
 }
 
-body[data-tweaks*=",compactCodeBlocks,"] .notion-code-block.line-numbers {
+body[data-tweaks*=",compactCodeBlocks,"]
-  .notion-enhancer--line-numbers {
+  .notion-code-block.line-numbers
-    margin-top: 28px !important;
-  }
   > [data-content-editable-leaf] {
-    padding: 28px 22px 22px 22px !important;
+  padding: 28px 22px 22px 22px !important;
-  }
 }
-body[data-tweaks*=",defaultImageAlignment=Left,"]
+
-  .notion-image-block[style*="align-self: center"] {
+body[data-tweaks*=",defaultImageAlignment,"] {
+  /**/
+}
+
+.enhancer--tweak-img_alignment-left .notion-image-block {
   align-self: start !important;
 }
-body[data-tweaks*=",defaultImageAlignment=Right,"]
+.enhancer--tweak-img_alignment-right .notion-image-block {
-  .notion-image-block[style*="align-self: center"] {
   align-self: end !important;
 }

src/extensions/tweaks/client.mjs

@@ -8,38 +8,16 @@ 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
-    values = {};
+      .filter((opt) => opt.type === "toggle")
-  for (const tweak of tweaks) values[tweak] = await db.get(tweak);
+      .map((opt) => opt.key),
+    enabled = {};
+  for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
 
   // inc. leading & trailing comma for selectors (see client.css)
   document.body.dataset.tweaks =
-    "," +
+    "," + tweaks.filter((tweak) => enabled[tweak]).join(",") + ",";
-    tweaks
-      .filter((tweak) => values[tweak])
-      .map((tweak) => {
-        if (typeof values[tweak] === "boolean") return tweak;
-        return tweak + "=" + values[tweak];
-      })
-      .join(",") +
-    ",";
 
-  if (values["hideSlashMenu"]) {
+  if (enabled["hideSlashMenu"])
     addKeyListener("/", () => document.body.click(), true);
-  }
-
-  if (values["responsiveColumnsBreakpoint"] > 0) {
-    const addResponsiveBreakpoint = () => {
-      let breakpoint = values["responsiveColumnsBreakpoint"];
-      if (values["responsiveColumnsUnit"] === "Percent") {
-        breakpoint /= 100;
-        breakpoint *= screen.availWidth;
-      }
-      if (window.innerWidth <= breakpoint) {
-        document.body.setAttribute("data-break-columns", true);
-      } else document.body.removeAttribute("data-break-columns");
-    };
-    window.addEventListener("resize", addResponsiveBreakpoint);
-    addResponsiveBreakpoint();
-  }
 };

src/extensions/tweaks/mod.json

@@ -37,25 +37,12 @@
       "description": "Hide the default <i class='i-file -mb-px'></i> page icons.",
       "value": false
     },
-    {
-      "type": "toggle",
-      "key": "disableSidebarResizing",
-      "description": "Prevents interaction with the left sidebar's drag handle, effectively freezing it at it's current size.",
-      "value": false
-    },
     {
       "type": "toggle",
       "key": "snappyTransitions",
       "description": "Disables style animations for a snappier experience across the board. This will not affect JavaScript-powered animations, e.g. the left sidebar popping out.",
       "value": false
     },
-    {
-      "type": "select",
-      "key": "tabStyle",
-      "description": "Changes the shape of open tab controls to look like Chrome or Firefox's rounded tabs.",
-      "platforms": ["linux", "win32", "darwin"],
-      "values": ["Rectangular", "Rounded", "Bubble"]
-    },
     { "type": "heading", "label": "Pages" },
     {
       "type": "toggle",
@@ -138,6 +125,5 @@
     }
   ],
   "clientStyles": ["client.css"],
-  "clientScripts": ["client.mjs"],
+  "clientScripts": ["client.mjs"]
-  "electronScripts": [[".webpack/renderer/tabs/preload.js", "tabs.cjs"]]
 }

src/extensions/tweaks/tabs.cjs

@@ -1,12 +0,0 @@
-/**
- * notion-enhancer: tweaks
- * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-"use strict";
-
-module.exports = async (api, db) => {
-  const tabStyle = await db.get("tabStyle");
-  document.body.dataset.tweaks = ",tabStyle=" + tabStyle + ",";
-};