From 7aa3f04f8b18c127ffa728d6ec55d8f260b37532 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 7 Oct 2021 22:36:20 +1100 Subject: [PATCH] theme: dracula improve tweaks table width normalisation --- .../app.css | 94 ++++++++++ .../mod.json | 22 +++ .../variables.css | 164 ++++++++++++++++++ repo/registry.json | 3 +- .../theme.css | 6 +- .../client.css | 64 ++++--- .../client.mjs | 8 +- .../mod.json | 2 +- 8 files changed, 332 insertions(+), 31 deletions(-) create mode 100644 repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css create mode 100644 repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json create mode 100644 repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css diff --git a/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css new file mode 100644 index 0000000..4ae3d02 --- /dev/null +++ b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css @@ -0,0 +1,94 @@ +/* + * notion-enhancer: dracula + * (c) 2016 Dracula Theme + * (c) 2020 CloudHill + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'], +.notion-dark-theme img[src*='/images/onboarding/team-features-illustration.png'] { + filter: invert(1) !important; +} +.notion-dark-theme img[src*='/images/onboarding/checked.svg'] { + filter: hue-rotate(45deg) !important; +} +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'], +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] { + transition: filter 0.4s ease !important; +} +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover, +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover { + filter: brightness(1.2); +} + +.notion-dark-theme [style*='font-family: Fira Code, Menlo, Courier, monospace;'] { + filter: hue-rotate(170deg) !important; +} + +.notion-dark-theme .notion-token-remove-button[role*='button'][tabindex*='0']:hover, +.notion-dark-theme .notion-record-icon { + background: transparent !important; +} + +.notion-dark-theme .notion-focusable:focus-within, +.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'], +.notion-dark-theme div[role='button'], +[style*='height: 4px;'] > .notion-selectable.notion-collection_view_page-block > *, +.notion-dark-theme .notion-calendar-view-day[style*='background: #282a36;'], +.DayPicker-Day--today, +.notion-dark-theme + .DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day--outside:hover, +.notion-dark-theme + .DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value) + .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start, +.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end { + transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important; +} + +.notion-dark-theme [style*='background: #282a36;'], +.notion-dark-theme + [style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'], +.notion-dark-theme + [style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'], +.notion-dark-theme + [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'], +.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'], +.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] { + box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important; +} + +.notion-dark-theme .notion-code-block .token.parameter, +.notion-dark-theme .notion-code-block .token.decorator, +.notion-dark-theme .notion-code-block .token.id, +.notion-dark-theme .notion-code-block .token.class, +.notion-dark-theme .notion-code-block .token.pseudo-element, +.notion-dark-theme .notion-code-block .token.pseudo-class, +.notion-dark-theme .notion-code-block .token.attribute { + font-style: italic; +} + +.notion-dark-theme .notion-code-block .token.punctuation { + opacity: 1; +} + +.notion-dark-theme + [class^='notion-outliner'] + [style*='background: rgb(71, 76, 80);'] + .triangle[fill] { + fill: var(--theme--text); +} diff --git a/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json new file mode 100644 index 0000000..d508aa0 --- /dev/null +++ b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json @@ -0,0 +1,22 @@ +{ + "name": "dracula", + "id": "033bff54-50ba-4cec-bdc0-b2ca7e307086", + "version": "0.3.0", + "description": "a theme based on the popular dracula color palette originally by zeno rocha and friends.", + "tags": ["theme", "dark"], + "authors": [ + { + "name": "dracula", + "email": "zno.rocha@gmail.com", + "homepage": "https://draculatheme.com/", + "avatar": "https://draculatheme.com/static/icons/pack-1/045-dracula.svg" + } + ], + "css": { + "frame": ["variables.css"], + "client": ["variables.css", "app.css"], + "menu": ["variables.css"] + }, + "js": {}, + "options": [] +} diff --git a/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css new file mode 100644 index 0000000..b7ec650 --- /dev/null +++ b/repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css @@ -0,0 +1,164 @@ +/* + * notion-enhancer: dracula + * (c) 2016 Dracula Theme + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +:root.dark { + --dracula--bg: #282a36; + --dracula--bg_lighter: #424450; + --dracula--bg_light: #343746; + --dracula--bg_dark: #21222c; + --dracula--bg_darker: #191a21; + + --dracula--fg: #f8f8f2; + --dracula--fg_dark: #babbba; + + --dracula--comment: #6272a4; + --dracula--selection: #44475a; + --dracula--block_highlight: #44475a75; + + --dracula--gray: var(--dracula--fg_dark); + --dracula--brown: #6272a4; + --dracula--orange: #ffb86c; + --dracula--yellow: #f1fa8c; + --dracula--green: #50fa7b; + --dracula--blue: #8be9fd; + --dracula--purple: #bd93f9; + --dracula--pink: #ff79c6; + --dracula--red: #ff5555; + + --dracula--bg_gray: var(--dracula--bg_light); + --dracula--bg_brown: #465079; + --dracula--bg_orange: #8a6345; + --dracula--bg_yellow: #8e9656; + --dracula--bg_green: #3f945f; + --dracula--bg_blue: #498096; + --dracula--bg_purple: #6a549b; + --dracula--bg_pink: #8d4a7c; + --dracula--bg_red: #943844; + + --theme--accent_blue: var(--dracula--purple); + --theme--accent_blue-selection: #bb8dfd3d; + --theme--accent_blue-hover: #b179ff; + --theme--accent_blue-focus: #9f5ff8; + --theme--accent_red: var(--dracula--comment); + --theme--accent_red-hover: #6273a439; + + --theme--danger_text: var(--dracula--red); + --theme--danger_border: var(--dracula--bg_red); + + --theme--bg: var(--dracula--bg); + --theme--bg_secondary: var(--dracula--bg_dark); + --theme--bg_popup: var(--dracula--bg_light); + + --theme--scrollbar_track: transparent; + --theme--scrollbar_thumb: var(--dracula--selection); + --theme--scrollbar_thumb-hover: var(--dracula--comment); + + --theme--ui_divider: var(--dracula--bg_lighter); + --theme--ui_interactive-hover: var(--dracula--block_highlight); + --theme--ui_interactive-active: var(--dracula--bg_lighter); + --theme--ui_toggle-off: var(--dracula--block_highlight); + + --theme--icon: var(--dracula--comment); + --theme--icon_secondary: var(--dracula--comment); + + --theme--text: var(--dracula--fg); + --theme--text_secondary: var(--dracula--fg_dark); + --theme--text_gray: var(--dracula--gray); + --theme--text_brown: var(--dracula--brown); + --theme--text_orange: var(--dracula--orange); + --theme--text_yellow: var(--dracula--yellow); + --theme--text_green: var(--dracula--green); + --theme--text_blue: var(--dracula--blue); + --theme--text_purple: var(--dracula--purple); + --theme--text_pink: var(--dracula--pink); + --theme--text_red: var(--dracula--red); + + --theme--highlight-text: var(--dracula--bg); + --theme--highlight_gray: var(--dracula--gray); + --theme--highlight_brown: var(--dracula--brown); + --theme--highlight_brown-text: var(--dracula--fg); + --theme--highlight_orange: var(--dracula--orange); + --theme--highlight_yellow: var(--dracula--yellow); + --theme--highlight_green: var(--dracula--green); + --theme--highlight_blue: var(--dracula--blue); + --theme--highlight_purple: var(--dracula--purple); + --theme--highlight_pink: var(--dracula--pink); + --theme--highlight_red: var(--dracula--red); + --theme--highlight_red-text: var(--dracula--fg); + + --theme--block-text: var(--dracula--fg); + --theme--block_gray: var(--dracula--bg_gray); + --theme--block_brown: var(--dracula--bg_brown); + --theme--block_orange: var(--dracula--bg_orange); + --theme--block_yellow: var(--dracula--bg_yellow); + --theme--block_green: var(--dracula--bg_green); + --theme--block_blue: var(--dracula--bg_blue); + --theme--block_purple: var(--dracula--bg_purple); + --theme--block_pink: var(--dracula--bg_pink); + --theme--block_red: var(--dracula--bg_red); + + --theme--tag-text: var(--dracula--bg); + --theme--tag_default: var(--dracula--comment); + --theme--tag_default-text: var(--dracula--fg); + --theme--tag_gray: var(--dracula--gray); + --theme--tag_brown: var(--dracula--brown); + --theme--tag_brown-text: var(--dracula--fg); + --theme--tag_orange: var(--dracula--orange); + --theme--tag_yellow: var(--dracula--yellow); + --theme--tag_green: var(--dracula--green); + --theme--tag_blue: var(--dracula--blue); + --theme--tag_purple: var(--dracula--purple); + --theme--tag_pink: var(--dracula--pink); + --theme--tag_red: var(--dracula--red); + --theme--tag_red-text: var(--dracula--fg); + + --theme--callout-text: var(--dracula--fg); + --theme--callout_gray: var(--dracula--bg_gray); + --theme--callout_brown: var(--dracula--bg_brown); + --theme--callout_orange: var(--dracula--bg_orange); + --theme--callout_yellow: var(--dracula--bg_yellow); + --theme--callout_green: var(--dracula--bg_green); + --theme--callout_blue: var(--dracula--bg_blue); + --theme--callout_purple: var(--dracula--bg_purple); + --theme--callout_pink: var(--dracula--bg_pink); + --theme--callout_red: var(--dracula--bg_red); + + --theme--code_inline: var(--dracula--bg_light); + --theme--code_inline-text: var(--dracula--green); + + --theme--code: var(--dracula--bg_light); + --theme--code_plain: var(--dracula--fg); + --theme--code_function: var(--dracula--green); + --theme--code_parameter: var(--dracula--orange); + --theme--code_keyword: var(--dracula--pink); + --theme--code_constant: var(--dracula--purple); + --theme--code_tag: var(--dracula--pink); + --theme--code_operator: var(--dracula--pink); + --theme--code_important: var(--dracula--pink); + --theme--code_regex: var(--dracula--red); + --theme--code_property: var(--dracula--blue); + --theme--code_builtin: var(--dracula--blue); + --theme--code_class-name: var(--dracula--blue); + --theme--code_attr-name: var(--dracula--green); + --theme--code_attr-value: var(--dracula--yellow); + --theme--code_selector: var(--dracula--pink); + --theme--code_id: var(--dracula--green); + --theme--code_class: var(--dracula--green); + --theme--code_pseudo-element: var(--dracula--green); + --theme--code_pseudo-class: var(--dracula--green); + --theme--code_attribute: var(--dracula--green); + --theme--code_value: var(--dracula--yellow); + --theme--code_unit: var(--dracula--pink); + --theme--code_comment: var(--dracula--comment); + --theme--code_punctuation: var(--dracula--text); + --theme--code_annotation: var(--theme--code_punctuation); + --theme--code_decorator: var(--dracula--green); + --theme--code_doctype: var(--dracula--fg_dark); + --theme--code_number: var(--dracula--purple); + --theme--code_string: var(--dracula--yellow); + --theme--code_boolean: var(--dracula--purple); +} diff --git a/repo/registry.json b/repo/registry.json index a835355..ee01d2e 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -7,5 +7,6 @@ "calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a", "material-ocean@69e7ccb2-4aef-484c-876d-3de1b433d2b9", "cherry-cola@ec5c4640-68d4-4d25-aefd-62c7e9737cfb", - "dark+@c86cfe98-e645-4822-aa6b-e2de1e08bafa" + "dark+@c86cfe98-e645-4822-aa6b-e2de1e08bafa", + "dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086" ] diff --git a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css index 85afdaa..690c5aa 100644 --- a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css +++ b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css @@ -61,6 +61,7 @@ padding-right: var(--theme--page_preview-padding) !important; width: 100%; } + .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], @@ -270,7 +271,9 @@ body, > div > div > div:nth-child(2)[style*='position: absolute; display: inline-flex; min-width: 100%; height: 32px; z-index: 1; background:'], -.notion-frame .notion-scroller[style*='background:'] { +.notion-frame .notion-scroller[style*='background:'], +.notion-page-template-modal .notion-scroller[style*='background:'], +.notion-peek-renderer .notion-scroller[style*='background:'] { background: transparent !important; } @@ -453,6 +456,7 @@ body, .notion-help-button, .onboarding-checklist-button { + color: var(--theme--icon) !important; background: var(--theme--tag_default) !important; box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px, var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important; diff --git a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.css b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.css index 5713e49..cba5db3 100644 --- a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.css +++ b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.css @@ -20,57 +20,71 @@ } .enhancer--tweak-normalise_table_scroll + .notion-frame .notion-page-content - .notion-collection_view-block[style*=' width'], + .notion-collection_view-block, +.enhancer--tweak-normalise_table_scroll .notion-peek-renderer .notion-collection_view-block, .enhancer--tweak-normalise_table_scroll - .notion-page-content - .notion-collection_view-block[style^='width'] { + .notion-page-template-modal + .notion-collection_view-block { width: 100% !important; } .enhancer--tweak-normalise_table_scroll + .notion-frame .notion-page-content .notion-collection_view-block - [style*='padding-left: 50px'], + [style*='padding-left: 126px'], .enhancer--tweak-normalise_table_scroll + .notion-frame .notion-page-content .notion-collection_view-block [style*='padding-left: 96px'], .enhancer--tweak-normalise_table_scroll - .notion-page-content + .notion-peek-renderer .notion-collection_view-block - [style*='padding-left: 126px'] { + [style*='padding-left: 126px'], +.enhancer--tweak-normalise_table_scroll + .notion-peek-renderer + .notion-collection_view-block + [style*='padding-left: 96px'], +.enhancer--tweak-normalise_table_scroll + .notion-page-template-modal + .notion-collection_view-block + [style*='padding-left: 126px'], +.enhancer--tweak-normalise_table_scroll + .notion-page-template-modal + .notion-collection_view-block + [style*='padding-left: 96px'] { padding-left: 0 !important; } .enhancer--tweak-normalise_table_scroll + .notion-frame .notion-page-content .notion-collection_view-block - [style*='padding-right: 50px'], + [style*='padding-right: 126px'], .enhancer--tweak-normalise_table_scroll + .notion-frame .notion-page-content .notion-collection_view-block [style*='padding-right: 96px'], .enhancer--tweak-normalise_table_scroll - .notion-page-content + .notion-peek-renderer .notion-collection_view-block - [style*='padding-right: 126px'] { + [style*='padding-right: 126px'], +.enhancer--tweak-normalise_table_scroll + .notion-peek-renderer + .notion-collection_view-block + [style*='padding-right: 96px'], +.enhancer--tweak-normalise_table_scroll + .notion-page-template-modal + .notion-collection_view-block + [style*='padding-right: 126px'], +.enhancer--tweak-normalise_table_scroll + .notion-page-template-modal + .notion-collection_view-block + [style*='padding-right: 96px'] { padding-right: 0 !important; } -.enhancer--tweak-normalise_table_scroll - .notion-page-content - .notion-collection_view-block - [style*='min-width: calc(100% - 192px);'], -.enhancer--tweak-normalise_table_scroll - .notion-page-content - .notion-collection_view-block - [style*='min-width: 708px;'] { - min-width: 100% !important; -} -.enhancer--tweak-normalise_table_scroll - .notion-page-content - .notion-collection_view-block - > div { - padding: 0 1px; -} .enhancer--tweak-snappy_transitions * { animation-duration: 0s !important; diff --git a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.mjs b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.mjs index 4f490e2..f2dd4ff 100644 --- a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.mjs +++ b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/client.mjs @@ -10,9 +10,11 @@ export default async function (api, db) { const { web } = api; const cssInsert = await db.get(['insert.css']); - document.head.append( - web.html`` - ); + if (cssInsert?.filename) { + document.head.append( + web.html`` + ); + } const responsiveBreakpoint = await db.get(['tweak.responsive_breakpoint']), addResponsiveBreakpoint = () => { diff --git a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/mod.json b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/mod.json index 62d7c4e..0db0e0e 100644 --- a/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/mod.json +++ b/repo/tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2/mod.json @@ -2,7 +2,7 @@ "name": "tweaks", "id": "5174a483-c88d-4bf8-a95f-35cd330b76e2", "version": "0.2.0", - "description": "common style/layout changes and custom code insertion. check out the [tweaks page](https://github.com/notion-enhancer/tweaks) for more.", + "description": "common style/layout changes and custom code insertion. check out the [tweaks page](https://notion-enhancer.github.io/tweaks) for more.", "tags": ["extension", "customisation"], "authors": [ {