obsidian-plugin/rveciana_obsidian-cooklang
1
0
Fork 0
mirror of https://github.com/rveciana/obsidian-cooklang.git synced 2026-07-22 05:04:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

upgrade to svelte 5

Browse source
This commit is contained in:
Roger Veciana Rovira 2025-06-03 23:06:21 +02:00
parent f0a1af420f
commit dc97fc2660
16 changed files with 2827 additions and 1668 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore
View file

@ -1,2 +0,0 @@
npm node_modules
build

1
.gitignore vendored
View file

@ -8,6 +8,7 @@ node_modules
# Don't include the compiled main.js file in the repo.
# They should be uploaded to GitHub releases instead.
main.js
styles.css
# Exclude sourcemaps
*.map

2
LICENSE
View file

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2024 Roger Veciana i Rovira
Copyright (c) 2025 Roger Veciana i Rovira
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

9
README.md
View file

@ -16,6 +16,15 @@ This plugin allows you to edit and view recipes written in the Cooklang format.
- Multi language: The titles for the sections (i.e. *ingredients*, *cookware* and so on) will be translated into the recipe language or the one configured in the Obsidian settings
## Searching
Obsidian won't search files that aren't of the extension *.md by default. Since cooklang has the .cook extension, any search will gnore the files, which is really impractical. Fortuntely, there's a workaround:
- Install the `omnisearch` plugin
- Open its settings
- Add the word `cook` at the section `Additional TEXT files to index`
The search has to be done from the sidebar search icon, but it works perfectly.
## Changelog

58
eslint.config.ts Normal file
View file

@ -0,0 +1,58 @@
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import svelteParser from 'svelte-eslint-parser';
import type { Linter } from 'eslint';
import tsParser from '@typescript-eslint/parser';
const svelteRecommendedWithRules = svelte.configs.recommended.find(
(config) => 'rules' in config
);
const svelteRules = (svelteRecommendedWithRules?.rules ?? {}) as Linter.RulesRecord;
export default [
// ⛔ Ignore files/folders
{
ignores: ['node_modules', 'build', 'main.js', 'vite.config.mjs', 'version-bump.mjs'],
},
// Base JS rules
js.configs.recommended,
// TypeScript rules
...tseslint.configs.recommended,
// Svelte-specific configuration
{
files: ['**/*.svelte'],
plugins: {
svelte,
},
languageOptions: {
globals: { document: 'readonly',console: 'readonly',
window: 'readonly', },
parser: svelteParser,
parserOptions: {
parser: tsParser,
ecmaVersion: 2020,
sourceType: 'module',
extraFileExtensions: ['.svelte'],
},
},
rules: {
...svelteRules
},
},
// Global rules for all file
{
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
'@typescript-eslint/ban-ts-comment': 'off',
'no-prototype-builtins': 'off',
'@typescript-eslint/no-empty-function': 'off',
},
},
];

3348
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

40
package.json
View file

@ -1,8 +1,10 @@
{
"name": "obsidian-svelte-starter",
"name": "cooklang-viewer-and-editor",
"version": "0.0.12",
"description": "A plugin development template for devs who want to use svelte in Obsidian.",
"main": "main.js",
"type": "module",
"scripts": {
"lint": "eslint . --ext .ts",
"dev": "npm run lint && vite build --watch",
@ -19,24 +21,26 @@
"author": "Roger Veciana i Rovira",
"devDependencies": {
"@cooklang/cooklang-ts": "^1.2.7",
"@svelte-plugins/tooltips": "^3.0.1",
"@sveltejs/vite-plugin-svelte": "^1.4.0",
"@tsconfig/svelte": "^3.0.0",
"@types/node": "^16.18.112",
"@typescript-eslint/eslint-plugin": "6.19.0",
"@typescript-eslint/parser": "6.19.0",
"builtin-modules": "3.3.0",
"eslint": "^8.57.1",
"eslint-plugin-svelte": "^2.44.1",
"@svelte-plugins/tooltips": "^3.0.3",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tsconfig/svelte": "^5.0.4",
"@typescript-eslint/parser": "^8.33.1",
"builtin-modules": "^5.0.0",
"esbuild-svelte": "^0.9.3",
"eslint": "^9.28.0",
"eslint-plugin-svelte": "^3.9.0",
"franc": "^6.2.0",
"husky": "^9.1.6",
"obsidian": "0.15.9",
"svelte": "^3.59.2",
"svelte-check": "^2.10.3",
"husky": "^9.1.7",
"jiti": "^2.4.2",
"obsidian": "^1.8.7",
"svelte": "^5.33.10",
"svelte-check": "^4.1.6",
"svelte-i18next": "^2.2.2",
"svelte-preprocess": "^5.1.4",
"tslib": "2.4.0",
"typescript": "5.3.3",
"vite": "^3.2.11"
"svelte-preprocess": "^6.0.3",
"tslib": "^2.8.1",
"typescript": "~5.8.3",
"typescript-eslint": "^8.33.0",
"vite": "^6.3.5",
"vite-plugin-static-copy": "^3.0.0"
}
}

2
src/lang/i18n.ts
View file

@ -1,5 +1,5 @@
import i18next from "i18next";
import { createI18nStore } from "svelte-i18next";
import { createI18nStore } from "svelte-i18next/i18n.js";
export const i18n = createI18nStore(i18next);

70
src/starterIndex.ts → src/starterIndex.svelte.ts
View file

@ -2,17 +2,20 @@ import {
Plugin,
TFile,
TextFileView,
WorkspaceLeaf,
type WorkspaceLeaf,
setIcon
} from "obsidian";
import i18next from "i18next";
import { resources } from "./lang/resources";
import { resources } from "./lang/resources.js";
import Edit from "./ui/Edit.svelte";
import View from "./ui/View.svelte";
import { DEFAULT_SETTINGS, Settings, type CookLangSettings } from "./ui/Settings";
import { getI18n, isTFile } from "./ui/utils";
import { DEFAULT_SETTINGS, Settings, type CookLangSettings } from "./ui/Settings.js";
import { getI18n, isTFile } from "./ui/utils.js";
import { mount, unmount } from "svelte";
const VIEW_TYPE = "svelte-cooklang";
@ -31,16 +34,19 @@ i18next.init({
const DEFAULT_DATA = "";
class CooklangSvelteView extends TextFileView {
view: View | Edit;
view!: View | Edit;
mode: "source" | "preview" = "preview";
changeModeButton: HTMLElement;
changeModeButton!: HTMLElement;
data: string = DEFAULT_DATA;
images: Record<string, string> = {};
settings: CookLangSettings;
props = $state({data:DEFAULT_DATA, images:{}, settings: DEFAULT_SETTINGS});
constructor(leaf: WorkspaceLeaf, settings: CookLangSettings) {
super(leaf);
this.settings = settings;
}
getViewType(): string {
@ -62,32 +68,31 @@ class CooklangSvelteView extends TextFileView {
this.changeModeButton = this.addAction(
"pencil",
"Preview (Ctrl+Click to open in new pane)",
(e) => { this.switchMode(e.metaKey || e.ctrlKey);},
17
(e) => { this.switchMode(e.metaKey || e.ctrlKey);}
);
}
renderPreview(newTab=false){
const container = this.contentEl.createEl("div");
const newElement = this.mode === "preview"
? new View({
target: container,
props: { data: this.data, images: this.images, settings: this.settings },
})
: new Edit({
target: container,
props: {
data: this.data,
onChange: (newData:string) => (this.data = newData),
},
});
if(newTab){
const newElement = this.mode === "preview"?
mount(View , {target: container, props: this.props})
:
mount(Edit, {target: container,
props: {data: this.props.data,
onChange: (newData:string) => (this.props.data = newData)}})
if(newTab && this.file){
const newTab = this.app.workspace.getLeaf(true);
newTab.openFile(this.file);
} else {
if (this.view) {
this.view.$destroy();
unmount(this.view);
}
this.view = newElement;
}
@ -97,13 +102,14 @@ class CooklangSvelteView extends TextFileView {
getViewData(): string {
return this.data;
}
setViewData(data: string): void {
const images = (
this.file.parent.children.filter(isTFile).filter(
(f) => (f.basename === this.file.basename ||
f.basename.startsWith(this.file.basename + ".")) &&
f.name != this.file.name &&
this.file?.parent?.children.filter(isTFile).filter(
(f) => (f.basename === this.file?.basename ||
f.basename.startsWith(this.file?.basename + ".")) &&
f.name != this.file?.name &&
["png", "jpg", "jpeg", "gif","webp"].includes(f.extension)
) as TFile[]
).reduce((acc, f) => {
@ -125,7 +131,10 @@ class CooklangSvelteView extends TextFileView {
this.data = data;
this.view.$set({ data, images });
this.props.data = data;
this.props.images = images;
this.renderPreview(false)
}
clear(): void {
@ -144,8 +153,7 @@ class CooklangSvelteView extends TextFileView {
}
export default class CooklangPlugin extends Plugin {
private view: CooklangSvelteView;
settings: CookLangSettings;
settings: CookLangSettings = DEFAULT_SETTINGS;
async onload() {
@ -154,7 +162,7 @@ export default class CooklangPlugin extends Plugin {
this.registerView(
VIEW_TYPE,
(leaf: WorkspaceLeaf) =>
(this.view = new CooklangSvelteView(leaf, this.settings))
(new CooklangSvelteView(leaf, this.settings))
);
this.app.workspace.onLayoutReady(this.onLayoutReady.bind(this));
@ -210,7 +218,7 @@ export default class CooklangPlugin extends Plugin {
if (this.app.workspace.getLeavesOfType(VIEW_TYPE).length) {
return;
}
this.app.workspace.getRightLeaf(false).setViewState({
this.app.workspace.getRightLeaf(false)?.setViewState({
type: VIEW_TYPE,
});
}

15
src/ui/Edit.svelte
View file

@ -1,15 +1,22 @@
<script lang="ts">
export let data: string;
export let onChange: (newData: string) => void;
$: onChange(data);
let { data, onChange }: { data: string; onChange: (newData: string) => void } = $props();
$effect(() => {
if (data !== undefined) {
onChange(data);
}
});
</script>
<div>
<div
class="content"
contenteditable="true"
role="textbox"
tabindex="0"
aria-multiline="true"
bind:textContent={data}
on:keydown={(e) => {
onkeydown={(e) => {
if (e.key === 'Enter') {
document.execCommand('insertLineBreak');
e.preventDefault();

4
src/ui/Settings.ts
View file

@ -1,5 +1,5 @@
import { App, PluginSettingTab, Setting } from "obsidian";
import type CooklangPlugin from "src/starterIndex";
import { type App, PluginSettingTab, Setting } from "obsidian";
import type CooklangPlugin from "src/starterIndex.svelte";
export class Settings extends PluginSettingTab {
plugin: CooklangPlugin;

18
src/ui/View.svelte
View file

@ -1,22 +1,22 @@
<script lang="ts">
import { Parser, type ParseResult } from '@cooklang/cooklang-ts';
import { tooltip } from '@svelte-plugins/tooltips';
import i18n from '../lang/i18n';
import { DEFAULT_SETTINGS, type CookLangSettings } from './Settings';
import { formatNumber } from './utils';
import i18n from '../lang/i18n.js';
import { DEFAULT_SETTINGS, type CookLangSettings } from './Settings.js';
import { formatNumber } from './utils.js';
export let data: string;
export let images: Record<string, string> = {};
export let settings: CookLangSettings = DEFAULT_SETTINGS;
let {
data,
images = {},
settings = DEFAULT_SETTINGS
}: { data: string; images: Record<string, string>; settings: CookLangSettings } = $props();
const translateIngredientsQuantity = (quantity: string | number) =>
quantity === 'some'
? $i18n.t('some')
: formatNumber(quantity, settings.showFractionsInQuantities);
let recipe: ParseResult;
$: recipe = new Parser().parse(data);
const recipe: ParseResult = new Parser().parse(data);
</script>
<div>

4
src/ui/utils.ts
View file

@ -1,7 +1,7 @@
import type { Ingredient, Cookware, Timer, Text } from "@cooklang/cooklang-ts";
import { franc } from "franc";
import { iso6393To1 } from "./langCodes";
import { TAbstractFile, TFile } from "obsidian";
import { iso6393To1 } from "./langCodes.js";
import { type TAbstractFile, TFile } from "obsidian";
export const isText = (
step: Ingredient | Cookware | Timer | Text

831
styles.css
View file

@ -1,193 +1,878 @@
.content.svelte-1bdsa1h:empty:not(:focus):before{content:'Type the recipe here';opacity:0.6}.content.svelte-1bdsa1h{white-space:pre-line}:root{--tooltip-arrow-size:10px;--tooltip-background-color:rgba(0, 0, 0, 0.9);--tooltip-border-radius:4px;--tooltip-box-shadow:0 1px 20px rgba(0, 0, 0, 0.25);--tooltip-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;--tooltip-font-size:14px;--tooltip-font-weight:500;--tooltip-line-height:1.25rem;--tooltip-color:#fff;--tooltip-offset-x:0px;--tooltip-offset-y:0px;--tooltip-padding:12px;--tooltip-pointer-events:none;--tooltip-white-space-hidden:nowrap;--tooltip-white-space-shown:normal;--tooltip-z-index:100}.tooltip.svelte-1xktviv{background-color:var(--tooltip-background-color);box-shadow:var(--tooltip-box-shadow);border-radius:var(--tooltip-border-radius);color:var(--tooltip-color);opacity:0;font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);font-style:normal;font-weight:var(--tooltip-font-weight);line-height:var(--tooltip-line-height);padding:var(--tooltip-padding);pointer-events:var(--tooltip-pointer-events);position:absolute;text-align:left;visibility:hidden;white-space:var(--tooltip-white-space-hidden);z-index:var(--tooltip-z-index)}.tooltip.show.svelte-1xktviv{opacity:1;visibility:visible;white-space:var(--tooltip-white-space-shown)}.tooltip.bottom.svelte-1xktviv:after,.tooltip.left.svelte-1xktviv:after,.tooltip.right.svelte-1xktviv:after,.tooltip.top.svelte-1xktviv:after{border:var(--tooltip-arrow-size) solid var(--tooltip-background-color);content:' ';position:absolute}.tooltip.arrowless.svelte-1xktviv:after{border:0 !important}.tooltip.bottom.svelte-1xktviv,.tooltip.top.svelte-1xktviv{--tooltip-offset-x:0px;--tooltip-offset-y:12px}.tooltip.left.svelte-1xktviv,.tooltip.right.svelte-1xktviv{--tooltip-offset-x:12px;--tooltip-offset-y:0px}.tooltip.bottom.svelte-1xktviv{bottom:0;left:50%;transform:translate(
.content.svelte-1bdsa1h:empty:not(:focus):before {
content: 'Type the recipe here';
opacity: 0.6;
}
.content.svelte-1bdsa1h {
white-space: pre-line;
}
/*--------------------------*
* Theme Variables
*--------------------------*/
:root {
--tooltip-arrow-size: 10px;
--tooltip-background-color: rgba(0, 0, 0, 0.9);
--tooltip-border-radius: 4px;
--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
--tooltip-font-size: 14px;
--tooltip-font-weight: 500;
--tooltip-line-height: 1.25rem;
--tooltip-color: #fff;
--tooltip-offset-x: 0px;
--tooltip-offset-y: 0px;
--tooltip-padding: 12px;
--tooltip-pointer-events: none;
--tooltip-white-space-hidden: nowrap;
--tooltip-white-space-shown: normal;
--tooltip-z-index: 100;
}
/*--------------------------*
* Tooltip Styling
*--------------------------*/
.tooltip.svelte-1xktviv {
background-color: var(--tooltip-background-color);
box-shadow: var(--tooltip-box-shadow);
border-radius: var(--tooltip-border-radius);
color: var(--tooltip-color);
opacity: 0;
font-family: var(--tooltip-font-family);
font-size: var(--tooltip-font-size);
font-style: normal;
font-weight: var(--tooltip-font-weight);
line-height: var(--tooltip-line-height);
padding: var(--tooltip-padding);
pointer-events: var(--tooltip-pointer-events);
position: absolute;
text-align: left;
visibility: hidden;
white-space: var(--tooltip-white-space-hidden);
z-index: var(--tooltip-z-index);
}
.tooltip.show.svelte-1xktviv {
opacity: 1;
visibility: visible;
white-space: var(--tooltip-white-space-shown);
}
.tooltip.bottom.svelte-1xktviv:after,
.tooltip.left.svelte-1xktviv:after,
.tooltip.right.svelte-1xktviv:after,
.tooltip.top.svelte-1xktviv:after {
border: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
content: ' ';
position: absolute;
}
.tooltip.arrowless.svelte-1xktviv:after {
border: 0 !important;
}
.tooltip.bottom.svelte-1xktviv,
.tooltip.top.svelte-1xktviv {
--tooltip-offset-x: 0px;
--tooltip-offset-y: 12px;
}
.tooltip.left.svelte-1xktviv,
.tooltip.right.svelte-1xktviv {
--tooltip-offset-x: 12px;
--tooltip-offset-y: 0px;
}
.tooltip.bottom.svelte-1xktviv {
bottom: 0;
left: 50%;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)}.tooltip.bottom.svelte-1xktviv:after{border-color:transparent transparent var(--tooltip-background-color);left:50%;top:0;transform:translate(-50%, -99%)}.tooltip.top.svelte-1xktviv{left:50%;top:0;transform:translate(
);
}
.tooltip.bottom.svelte-1xktviv:after {
border-color: transparent transparent var(--tooltip-background-color);
left: 50%;
top: 0;
transform: translate(-50%, -99%);
}
.tooltip.top.svelte-1xktviv {
left: 50%;
top: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)}.tooltip.top.svelte-1xktviv:after{border-color:var(--tooltip-background-color) transparent transparent
transparent;bottom:0;left:50%;transform:translate(-50%, 99%)}.tooltip.left.svelte-1xktviv{left:0;top:50%;transform:translate(
);
}
.tooltip.top.svelte-1xktviv:after {
border-color: var(--tooltip-background-color) transparent transparent
transparent;
bottom: 0;
left: 50%;
transform: translate(-50%, 99%);
}
.tooltip.left.svelte-1xktviv {
left: 0;
top: 50%;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)}.tooltip.left.svelte-1xktviv:after{border-color:transparent transparent transparent
var(--tooltip-background-color);right:0;top:50%;transform:translate(99%, -50%)}.tooltip.right.svelte-1xktviv{right:0;top:50%;transform:translate(
);
}
.tooltip.left.svelte-1xktviv:after {
border-color: transparent transparent transparent
var(--tooltip-background-color);
right: 0;
top: 50%;
transform: translate(99%, -50%);
}
.tooltip.right.svelte-1xktviv {
right: 0;
top: 50%;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)}.tooltip.right.svelte-1xktviv:after{border-color:transparent var(--tooltip-background-color) transparent
transparent;left:0;top:50%;transform:translate(-99%, -50%)}.tooltip.animation-fade.svelte-1xktviv{opacity:0;transition:opacity 0.25s ease-in-out}.tooltip.animation-fade.show.svelte-1xktviv{opacity:1}.tooltip.top.animation-slide.svelte-1xktviv{margin-top:10px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.top.animation-slide.show.svelte-1xktviv{margin-top:0;opacity:1}.tooltip.bottom.animation-slide.svelte-1xktviv{margin-bottom:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.bottom.animation-slide.show.svelte-1xktviv{margin-bottom:0;opacity:1}.tooltip.right.animation-slide.svelte-1xktviv{margin-right:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.right.animation-slide.show.svelte-1xktviv{margin-right:0;opacity:1}.tooltip.left.animation-slide.svelte-1xktviv{margin-left:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.left.animation-slide.show.svelte-1xktviv{margin-left:0;opacity:1}.tooltip.left.animation-puff.svelte-1xktviv{filter:blur(2px);opacity:0;transform:translate(
);
}
.tooltip.right.svelte-1xktviv:after {
border-color: transparent var(--tooltip-background-color) transparent
transparent;
left: 0;
top: 50%;
transform: translate(-99%, -50%);
}
/*--------------------------*
* CSS Animations
*--------------------------*/
/* Fade */
.tooltip.animation-fade.svelte-1xktviv {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.tooltip.animation-fade.show.svelte-1xktviv {
opacity: 1;
}
/* Slide */
.tooltip.top.animation-slide.svelte-1xktviv {
margin-top: 10px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.top.animation-slide.show.svelte-1xktviv {
margin-top: 0;
opacity: 1;
}
.tooltip.bottom.animation-slide.svelte-1xktviv {
margin-bottom: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.bottom.animation-slide.show.svelte-1xktviv {
margin-bottom: 0;
opacity: 1;
}
.tooltip.right.animation-slide.svelte-1xktviv {
margin-right: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.right.animation-slide.show.svelte-1xktviv {
margin-right: 0;
opacity: 1;
}
.tooltip.left.animation-slide.svelte-1xktviv {
margin-left: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.left.animation-slide.show.svelte-1xktviv {
margin-left: 0;
opacity: 1;
}
/* Puff */
.tooltip.left.animation-puff.svelte-1xktviv {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.left.animation-puff.show.svelte-1xktviv{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.left.animation-puff.show.svelte-1xktviv {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.right.animation-puff.svelte-1xktviv{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.right.animation-puff.svelte-1xktviv {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.right.animation-puff.show.svelte-1xktviv{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.right.animation-puff.show.svelte-1xktviv {
filter: blur(0);
opacity: 1;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.top.animation-puff.svelte-1xktviv{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.top.animation-puff.svelte-1xktviv {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.top.animation-puff.show.svelte-1xktviv{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.top.animation-puff.show.svelte-1xktviv {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.bottom.animation-puff.svelte-1xktviv{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.bottom.animation-puff.svelte-1xktviv {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.bottom.animation-puff.show.svelte-1xktviv{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.bottom.animation-puff.show.svelte-1xktviv {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.left.animation-bounce.svelte-1xktviv{opacity:0;transform:translate(
scale(1, 1);
}
/* Bounce */
.tooltip.left.animation-bounce.svelte-1xktviv {
opacity: 0;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.left.animation-bounce.show.svelte-1xktviv{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.left.animation-bounce.show.svelte-1xktviv {
opacity: 1;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.right.animation-bounce.svelte-1xktviv{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.right.animation-bounce.svelte-1xktviv {
opacity: 0;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.right.animation-bounce.show.svelte-1xktviv{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.right.animation-bounce.show.svelte-1xktviv {
opacity: 1;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.top.animation-bounce.svelte-1xktviv{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.top.animation-bounce.svelte-1xktviv {
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.top.animation-bounce.show.svelte-1xktviv{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.top.animation-bounce.show.svelte-1xktviv {
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.bottom.animation-bounce.svelte-1xktviv{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.bottom.animation-bounce.svelte-1xktviv {
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.bottom.animation-bounce.show.svelte-1xktviv{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.bottom.animation-bounce.show.svelte-1xktviv {
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1, 1)}:root{--tooltip-arrow-size:10px;--tooltip-background-color:rgba(0, 0, 0, 0.9);--tooltip-border-radius:4px;--tooltip-box-shadow:0 1px 20px rgba(0, 0, 0, 0.25);--tooltip-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;--tooltip-font-size:14px;--tooltip-font-weight:500;--tooltip-line-height:1.25rem;--tooltip-color:#fff;--tooltip-offset-x:12px;--tooltip-offset-y:12px;--tooltip-padding:12px;--tooltip-pointer-events:none;--tooltip-white-space-hidden:nowrap;--tooltip-white-space-shown:normal;--tooltip-z-index:100}.tooltip.svelte-16lxf1i{background-color:var(--tooltip-background-color);box-shadow:var(--tooltip-box-shadow);border-radius:var(--tooltip-border-radius);color:var(--tooltip-color);opacity:0;font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);font-style:normal;font-weight:var(--tooltip-font-weight);line-height:var(--tooltip-line-height);padding:var(--tooltip-padding);pointer-events:var(---tooltip-pointer-events);position:absolute;text-align:left;visibility:hidden;white-space:var(--tooltip-white-space-hidden);z-index:var(--tooltip-z-index)}.tooltip.show.svelte-16lxf1i{opacity:1;visibility:visible;white-space:var(--tooltip-white-space-shown)}.tooltip.bottom.svelte-16lxf1i:after,.tooltip.left.svelte-16lxf1i:after,.tooltip.right.svelte-16lxf1i:after,.tooltip.top.svelte-16lxf1i:after{border:var(--tooltip-arrow-size) solid var(--tooltip-background-color);content:' ';position:absolute}.tooltip.arrowless.svelte-16lxf1i:after{border:0 !important}.tooltip.bottom.svelte-16lxf1i,.tooltip.top.svelte-16lxf1i{--tooltip-offset-x:0px;--tooltip-offset-y:12px}.tooltip.left.svelte-16lxf1i,.tooltip.right.svelte-16lxf1i{--tooltip-offset-x:12px;--tooltip-offset-y:0px}.tooltip.bottom.svelte-16lxf1i{bottom:0;left:50%;transform:translate(
scale(1, 1);
}
/*--------------------------*
* Theme Variables
*--------------------------*/
:root {
--tooltip-arrow-size: 10px;
--tooltip-background-color: rgba(0, 0, 0, 0.9);
--tooltip-border-radius: 4px;
--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
--tooltip-font-size: 14px;
--tooltip-font-weight: 500;
--tooltip-line-height: 1.25rem;
--tooltip-color: #fff;
--tooltip-offset-x: 12px;
--tooltip-offset-y: 12px;
--tooltip-padding: 12px;
--tooltip-pointer-events: none;
--tooltip-white-space-hidden: nowrap;
--tooltip-white-space-shown: normal;
--tooltip-z-index: 100;
}
/*--------------------------*
* Tooltip Styling
*--------------------------*/
.tooltip.svelte-16lxf1i {
background-color: var(--tooltip-background-color);
box-shadow: var(--tooltip-box-shadow);
border-radius: var(--tooltip-border-radius);
color: var(--tooltip-color);
opacity: 0;
font-family: var(--tooltip-font-family);
font-size: var(--tooltip-font-size);
font-style: normal;
font-weight: var(--tooltip-font-weight);
line-height: var(--tooltip-line-height);
padding: var(--tooltip-padding);
pointer-events: var(---tooltip-pointer-events);
position: absolute;
text-align: left;
visibility: hidden;
white-space: var(--tooltip-white-space-hidden);
z-index: var(--tooltip-z-index);
}
.tooltip.show.svelte-16lxf1i {
opacity: 1;
visibility: visible;
white-space: var(--tooltip-white-space-shown);
}
.tooltip.bottom.svelte-16lxf1i:after,
.tooltip.left.svelte-16lxf1i:after,
.tooltip.right.svelte-16lxf1i:after,
.tooltip.top.svelte-16lxf1i:after {
border: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
content: ' ';
position: absolute;
}
.tooltip.arrowless.svelte-16lxf1i:after {
border: 0 !important;
}
.tooltip.bottom.svelte-16lxf1i,
.tooltip.top.svelte-16lxf1i {
--tooltip-offset-x: 0px;
--tooltip-offset-y: 12px;
}
.tooltip.left.svelte-16lxf1i,
.tooltip.right.svelte-16lxf1i {
--tooltip-offset-x: 12px;
--tooltip-offset-y: 0px;
}
.tooltip.bottom.svelte-16lxf1i {
bottom: 0;
left: 50%;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)}.tooltip.bottom.svelte-16lxf1i:after{border-color:transparent transparent var(--tooltip-background-color);left:50%;top:0;transform:translate(-50%, -99%)}.tooltip.top.svelte-16lxf1i{left:50%;top:0;transform:translate(
);
}
.tooltip.bottom.svelte-16lxf1i:after {
border-color: transparent transparent var(--tooltip-background-color);
left: 50%;
top: 0;
transform: translate(-50%, -99%);
}
.tooltip.top.svelte-16lxf1i {
left: 50%;
top: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)}.tooltip.top.svelte-16lxf1i:after{border-color:var(--tooltip-background-color) transparent transparent
transparent;bottom:0;left:50%;transform:translate(-50%, 99%)}.tooltip.left.svelte-16lxf1i{left:0;top:50%;transform:translate(
);
}
.tooltip.top.svelte-16lxf1i:after {
border-color: var(--tooltip-background-color) transparent transparent
transparent;
bottom: 0;
left: 50%;
transform: translate(-50%, 99%);
}
.tooltip.left.svelte-16lxf1i {
left: 0;
top: 50%;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)}.tooltip.left.svelte-16lxf1i:after{border-color:transparent transparent transparent
var(--tooltip-background-color);right:0;top:50%;transform:translate(99%, -50%)}.tooltip.right.svelte-16lxf1i{right:0;top:50%;transform:translate(
);
}
.tooltip.left.svelte-16lxf1i:after {
border-color: transparent transparent transparent
var(--tooltip-background-color);
right: 0;
top: 50%;
transform: translate(99%, -50%);
}
.tooltip.right.svelte-16lxf1i {
right: 0;
top: 50%;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)}.tooltip.right.svelte-16lxf1i:after{border-color:transparent var(--tooltip-background-color) transparent
transparent;left:0;top:50%;transform:translate(-99%, -50%)}.tooltip.animation-fade.svelte-16lxf1i{opacity:0;transition:opacity 0.25s ease-in-out}.tooltip.animation-fade.show.svelte-16lxf1i{opacity:1}.tooltip.top.animation-slide.svelte-16lxf1i{margin-top:10px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.top.animation-slide.show.svelte-16lxf1i{margin-top:0;opacity:1}.tooltip.bottom.animation-slide.svelte-16lxf1i{margin-bottom:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.bottom.animation-slide.show.svelte-16lxf1i{margin-bottom:0;opacity:1}.tooltip.right.animation-slide.svelte-16lxf1i{margin-right:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.right.animation-slide.show.svelte-16lxf1i{margin-right:0;opacity:1}.tooltip.left.animation-slide.svelte-16lxf1i{margin-left:20px;opacity:0;transition:opacity 0.25s ease-in-out,
margin 0.25s ease-in-out}.tooltip.left.animation-slide.show.svelte-16lxf1i{margin-left:0;opacity:1}.tooltip.left.animation-puff.svelte-16lxf1i{filter:blur(2px);opacity:0;transform:translate(
);
}
.tooltip.right.svelte-16lxf1i:after {
border-color: transparent var(--tooltip-background-color) transparent
transparent;
left: 0;
top: 50%;
transform: translate(-99%, -50%);
}
/*--------------------------*
* CSS Animations
*--------------------------*/
/* Fade */
.tooltip.animation-fade.svelte-16lxf1i {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.tooltip.animation-fade.show.svelte-16lxf1i {
opacity: 1;
}
/* Slide */
.tooltip.top.animation-slide.svelte-16lxf1i {
margin-top: 10px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.top.animation-slide.show.svelte-16lxf1i {
margin-top: 0;
opacity: 1;
}
.tooltip.bottom.animation-slide.svelte-16lxf1i {
margin-bottom: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.bottom.animation-slide.show.svelte-16lxf1i {
margin-bottom: 0;
opacity: 1;
}
.tooltip.right.animation-slide.svelte-16lxf1i {
margin-right: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.right.animation-slide.show.svelte-16lxf1i {
margin-right: 0;
opacity: 1;
}
.tooltip.left.animation-slide.svelte-16lxf1i {
margin-left: 20px;
opacity: 0;
transition:
opacity 0.25s ease-in-out,
margin 0.25s ease-in-out;
}
.tooltip.left.animation-slide.show.svelte-16lxf1i {
margin-left: 0;
opacity: 1;
}
/* Puff */
.tooltip.left.animation-puff.svelte-16lxf1i {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.left.animation-puff.show.svelte-16lxf1i{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.left.animation-puff.show.svelte-16lxf1i {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.right.animation-puff.svelte-16lxf1i{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.right.animation-puff.svelte-16lxf1i {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.right.animation-puff.show.svelte-16lxf1i{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.right.animation-puff.show.svelte-16lxf1i {
filter: blur(0);
opacity: 1;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.top.animation-puff.svelte-16lxf1i{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.top.animation-puff.svelte-16lxf1i {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.top.animation-puff.show.svelte-16lxf1i{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.top.animation-puff.show.svelte-16lxf1i {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.bottom.animation-puff.svelte-16lxf1i{filter:blur(2px);opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.bottom.animation-puff.svelte-16lxf1i {
filter: blur(2px);
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
scale(2, 2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
filter 0.25s ease-in-out,
transform 0.25s ease-in-out}.tooltip.bottom.animation-puff.show.svelte-16lxf1i{filter:blur(0);opacity:1;transform:translate(
transform 0.25s ease-in-out;
}
.tooltip.bottom.animation-puff.show.svelte-16lxf1i {
filter: blur(0);
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.left.animation-bounce.svelte-16lxf1i{opacity:0;transform:translate(
scale(1, 1);
}
/* Bounce */
.tooltip.left.animation-bounce.svelte-16lxf1i {
opacity: 0;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.left.animation-bounce.show.svelte-16lxf1i{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.left.animation-bounce.show.svelte-16lxf1i {
opacity: 1;
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.right.animation-bounce.svelte-16lxf1i{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.right.animation-bounce.svelte-16lxf1i {
opacity: 0;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.right.animation-bounce.show.svelte-16lxf1i{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.right.animation-bounce.show.svelte-16lxf1i {
opacity: 1;
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.top.animation-bounce.svelte-16lxf1i{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.top.animation-bounce.svelte-16lxf1i {
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.top.animation-bounce.show.svelte-16lxf1i{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.top.animation-bounce.show.svelte-16lxf1i {
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
)
scale(1, 1)}.tooltip.bottom.animation-bounce.svelte-16lxf1i{opacity:0;transform:translate(
scale(1, 1);
}
.tooltip.bottom.animation-bounce.svelte-16lxf1i {
opacity: 0;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.bottom.animation-bounce.show.svelte-16lxf1i{opacity:1;transform:translate(
scale(1.2, 1.2);
transform-origin: 50% 50%;
transition:
opacity 0.25s ease-in-out,
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.bottom.animation-bounce.show.svelte-16lxf1i {
opacity: 1;
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
)
scale(1, 1)}.image-main.svelte-13gknjv{width:100%}section.svelte-13gknjv{border:1px solid #ccc;border-radius:0.25rem;padding:10px;margin-top:10px;position:relative}.section-title.svelte-13gknjv{display:inline-block;left:5px;top:-1.5rem;position:absolute;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding-left:0.75rem;padding-right:0.75rem;--tw-bg-opacity:1;background-color:var(--background-primary)}.servings.svelte-13gknjv{width:fit-content}ul.ingredients.svelte-13gknjv{column-count:2}ul.cookware.svelte-13gknjv{column-count:2}span.cookware.svelte-13gknjv{font-weight:600}span.ingredient.svelte-13gknjv{font-weight:600}span.timer.svelte-13gknjv{font-weight:600}.theme-light .tooltip{--tooltip-background-color:rgb(235, 232, 233);--tooltip-color:black;--tooltip-box-shadow:0 1px 8px rgb(125, 123, 123)}
scale(1, 1);
}
.image-main.svelte-13gknjv {
width: 100%;
}
section.svelte-13gknjv {
border: 1px solid #ccc;
border-radius: 0.25rem;
padding: 10px;
margin-top: 10px;
position: relative;
}
.section-title.svelte-13gknjv {
display: inline-block;
left: 5px;
top: -1.5rem;
position: absolute;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
padding-left: 0.75rem;
padding-right: 0.75rem;
--tw-bg-opacity: 1;
background-color: var(--background-primary);
}
.servings.svelte-13gknjv {
width: fit-content;
}
ul.ingredients.svelte-13gknjv {
column-count: 2;
}
ul.cookware.svelte-13gknjv {
column-count: 2;
}
span.cookware.svelte-13gknjv {
font-weight: 600;
}
span.ingredient.svelte-13gknjv {
font-weight: 600;
}
span.timer.svelte-13gknjv {
font-weight: 600;
}
.theme-light .tooltip {
--tooltip-background-color: rgb(235, 232, 233);
--tooltip-color: black;
--tooltip-box-shadow: 0 1px 8px rgb(125, 123, 123);
}

15
tsconfig.json
View file

@ -1,12 +1,18 @@
{
"compilerOptions": {
"verbatimModuleSyntax": true,
"types": ["svelte"],
"skipLibCheck": true,
"baseUrl": ".",
"inlineSources": true,
"module": "ESNext",
"target": "ES6",
"allowJs": true,
"noImplicitAny": true,
"moduleResolution": "node",
"moduleResolution": "node16",
"module": "node16",
"target": "ES2022",
"esModuleInterop": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"importHelpers": true,
"isolatedModules": true,
"strictNullChecks": true,
@ -15,7 +21,8 @@
"ES5",
"ES6",
"ES7"
]
],
},
"extends": "@tsconfig/svelte/tsconfig.json",
"include": [

34
vite.config.js → vite.config.mjs
View file

@ -1,8 +1,12 @@
import path from 'path';
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import autoPreprocess from 'svelte-preprocess';
import esbuildSvelte from 'esbuild-svelte';
import sveltePreprocess from 'svelte-preprocess';
import builtins from 'builtin-modules';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { svelte } from '@sveltejs/vite-plugin-svelte';
const prod = (process.argv[2] === 'production');
@ -10,8 +14,25 @@ export default defineConfig(() => {
return {
plugins: [
svelte({
preprocess: autoPreprocess()
})
preprocess: sveltePreprocess({ typescript: true,
}),
}),
esbuildSvelte({
compilerOptions: { css: 'injected' },
}),
viteStaticCopy({
targets: [
{
src: 'build/main.js',
dest: '..',
},
{
src: 'build/styles.css',
dest: '..',
}
],
watch: false,
}),
],
watch: !prod,
build: {
@ -22,7 +43,7 @@ export default defineConfig(() => {
ignoreTryCatch: false,
},
lib: {
entry: path.resolve(__dirname, './src/starterIndex.ts'),
entry: path.resolve(__dirname, './src/starterIndex.svelte.ts'),
formats: ['cjs'],
},
css: {},
@ -32,6 +53,7 @@ export default defineConfig(() => {
entryFileNames: 'main.js',
assetFileNames: 'styles.css',
},
external: ['obsidian',
'electron',
"codemirror",
@ -63,8 +85,8 @@ export default defineConfig(() => {
],
},
// Use root as the output dir
outDir: './build',
emptyOutDir: false,
outDir: '.',
},
}
});