mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
theme: dracula
improve tweaks table width normalisation
This commit is contained in:
parent
7418e33d1e
commit
7aa3f04f8b
94
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css
Normal file
94
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/app.css
Normal file
@ -0,0 +1,94 @@
|
||||
/*
|
||||
* notion-enhancer: dracula
|
||||
* (c) 2016 Dracula Theme
|
||||
* (c) 2020 CloudHill
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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);
|
||||
}
|
22
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json
Normal file
22
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/mod.json
Normal file
@ -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": []
|
||||
}
|
164
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css
Normal file
164
repo/dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086/variables.css
Normal file
@ -0,0 +1,164 @@
|
||||
/*
|
||||
* notion-enhancer: dracula
|
||||
* (c) 2016 Dracula Theme
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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);
|
||||
}
|
@ -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"
|
||||
]
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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`<style id="enhancer--tweak-${cssInsert.filename}">${cssInsert.content}</style>`
|
||||
);
|
||||
if (cssInsert?.filename) {
|
||||
document.head.append(
|
||||
web.html`<style id="enhancer--tweak-${cssInsert.filename}">${cssInsert.content}</style>`
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBreakpoint = await db.get(['tweak.responsive_breakpoint']),
|
||||
addResponsiveBreakpoint = () => {
|
||||
|
@ -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": [
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user