style(menu): round sidebar buttons, update heading styles

This commit is contained in:
dragonwocky 2023-03-19 19:50:16 +11:00
parent 38b056429e
commit 2ac684056a
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
5 changed files with 29 additions and 2557 deletions

View File

@ -407,6 +407,9 @@ const styleBackgrounds = () => {
? ["rgb(37, 37, 37)", "rgb(47, 47, 47)"] ? ["rgb(37, 37, 37)", "rgb(47, 47, 47)"]
: ["rgb(253, 253, 253)"], : ["rgb(253, 253, 253)"],
}); });
// patch: remove overlay from settings sidebar
// to match notion-enhancer menu sidebar colour
cssBody += `.notion-overlay-container .notion-space-settings > div > div > [style*="height: 100%; background: rgba(255, 255, 255, 0.03);"] { background: transparent !important }`;
// cards // cards
overrideStyle({ overrideStyle({

View File

@ -10,9 +10,9 @@ import { Description } from "../components/Description.mjs";
function SidebarHeading({}, ...children) { function SidebarHeading({}, ...children) {
const { html } = globalThis.__enhancerApi; const { html } = globalThis.__enhancerApi;
return html`<h2 return html`<h2
class="text-([11px] [color:var(--theme--fg-secondary)]) class="flex items-center font-semibold leading-none
py-[5px] px-[15px] mb-px mt-[18px] first:mt-[10px] text-([12px] [color:var(--theme--fg-secondary)])
uppercase font-medium tracking-[0.03em] leading-none" h-[24px] px-[12px] mb-px mt-[18px] first:mt-[10px]"
> >
${children} ${children}
</h2>`; </h2>`;
@ -22,8 +22,9 @@ function SidebarButton({ id, icon, ...props }, ...children) {
const { html, extendProps } = globalThis.__enhancerApi, const { html, extendProps } = globalThis.__enhancerApi,
$btn = html`<${props["href"] ? "a" : "button"} $btn = html`<${props["href"] ? "a" : "button"}
class="flex items-center select-none text-[14px] class="flex items-center select-none text-[14px]
py-[5px] px-[15px] last:mb-[12px] w-full transition min-h-[27px] px-[12px] my-px last:mb-[12px] w-full
hover:bg-[color:var(--theme--bg-hover)] disabled:hidden" transition hover:bg-[color:var(--theme--bg-hover)]
disabled:hidden rounded-[3px]"
...${props} ...${props}
> >
${icon ${icon
@ -59,8 +60,9 @@ function Sidebar({ items, categories }) {
policy and terms & conditions on the welcome page. policy and terms & conditions on the welcome page.
</span>`, </span>`,
$sidebar = html`<aside $sidebar = html`<aside
class="notion-enhancer--menu-sidebar flex-(& col) row-span-1 class="notion-enhancer--menu-sidebar h-full
h-full overflow-y-auto bg-[color:var(--theme--bg-secondary)]" px-[4px] overflow-y-auto flex-(& col) row-span-1
bg-[color:var(--theme--bg-secondary)]"
> >
${items.map((item) => { ${items.map((item) => {
if (Array.isArray(item)) { if (Array.isArray(item)) {

View File

@ -106,6 +106,12 @@ body > #skeleton .row-group .shimmer {
background-color: var(--theme--code-inline_bg); background-color: var(--theme--code-inline_bg);
color: var(--theme--code-inline_fg); color: var(--theme--code-inline_fg);
} }
.typography kbd {
padding: 2px 4px;
border-radius: 6px;
border: solid 1px var(--theme--fg-border);
box-shadow: inset 0 -1px 0 var(--theme--fg-border);
}
.typography a { .typography a {
text-decoration: underline; text-decoration: underline;
transition: 100ms ease-in; transition: 100ms ease-in;

View File

@ -51,9 +51,8 @@
}, },
{ {
"type": "toggle", "type": "toggle",
"key": "debugMode", "key": "developerMode",
"description": "Activates built-in debugging tools accessible through the application menu.", "description": "Activates built-in debugging tools accessible through the application menu in desktop environments and restores access to the DevTools console via the <kbd>Ctrl+Shift+I</kbd> hotkey.",
"platforms": ["darwin", "win32", "linux"],
"value": false "value": false
} }
], ],

File diff suppressed because one or more lines are too long