theme: dracula

improve tweaks table width normalisation
This commit is contained in:
dragonwocky 2021-10-07 22:36:20 +11:00
parent 7418e33d1e
commit 7aa3f04f8b
8 changed files with 332 additions and 31 deletions

View 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);
}

View 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": []
}

View 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);
}

View File

@ -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"
]

View File

@ -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;

View File

@ -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;

View File

@ -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 = () => {

View File

@ -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": [
{