From ee86bf123ed2e2058f9abcf6a48f442ca179057e Mon Sep 17 00:00:00 2001 From: MarkoSagadin Date: Wed, 12 Mar 2025 21:50:48 +0100 Subject: [PATCH] feat: introduce dual themes, make themes easier to apply Several CSS theme changes in these one: - frontend build system now generates dual (light/dark) themes that are easy to switch between in the Anki clients, by changing the theme preference settings. - The individual single color themes are still available for theme_builder purposes (theme inspection and development in the web browser). - Each theme now also contains the CSS code from themeless_main.css file. That way users can just copy-paste one of the CSS themes in themes folder and apply it directly in Anki. Previously, if someone did that, the theme would not get applied due to the missing themeless_main.cssj. - Selector :root.nightMode was changed to :root in all CSS files: the latter is the only one that works in both Anki and web browser. - Documentation was updated to reflect the updated state. Closes: #33 --- CHANGELOG.md | 3 + README.md | 20 ++++- frontend/esbuild_themes.js | 4 + .../Highlighting styles/catpuccin_latte.css | 81 +----------------- .../catpuccin_latte_and_macchiato_tokens.css | 84 +++++++++++++++++++ .../catpuccin_macchiato.css | 81 +----------------- .../Highlighting styles/rose_pine.css | 79 ----------------- .../rose_pine_and_dawn_tokens.css | 84 +++++++++++++++++++ .../Highlighting styles/rose_pine_dawn.css | 79 ----------------- .../UI Themes/catpuccin_macchiato.css | 6 +- .../style/CSS Themes/UI Themes/rose_pine.css | 4 +- .../full_themes/catpuccin_latte.css | 4 + .../catpuccin_latte_and_macchiato.css | 9 ++ .../full_themes/catpuccin_macchiato.css | 4 + .../CSS Themes/full_themes/rose_pine.css | 4 + .../full_themes/rose_pine_and_dawn.css | 9 ++ .../CSS Themes/full_themes/rose_pine_dawn.css | 4 + theme_builder/README.md | 33 ++++++++ themes/README.md | 37 ++++---- themes/catpuccin_latte.css | 9 +- themes/catpuccin_latte_and_macchiato.css | 24 ++++++ themes/catpuccin_macchiato.css | 7 +- themes/rose_pine.css | 7 +- themes/rose_pine_and_dawn.css | 24 ++++++ themes/rose_pine_dawn.css | 7 +- 25 files changed, 360 insertions(+), 347 deletions(-) create mode 100644 frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte_and_macchiato_tokens.css create mode 100644 frontend/src/style/CSS Themes/Highlighting styles/rose_pine_and_dawn_tokens.css create mode 100644 frontend/src/style/CSS Themes/full_themes/catpuccin_latte_and_macchiato.css create mode 100644 frontend/src/style/CSS Themes/full_themes/rose_pine_and_dawn.css create mode 100644 themes/catpuccin_latte_and_macchiato.css create mode 100644 themes/rose_pine_and_dawn.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 48280f2..faa163a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p the highlighted code blocks in generated Anki cards will be sideways scrollable. This option is by default disabled, to ensure that it's addition doesn't break existing users. (@MarkoSagadin) +- Added Dual themes to the `themes` folder. Dual themes contain both light and dark versions of the + same theme. Users can switch between the two versions by changing the theming preference in the +Anki clients. (@MarkoSagadin) ### Fixed - When reviewing card styles in Anki from its editor view, night mode now triggers the night-mode styles as expected. (@MarkoSagadin) diff --git a/README.md b/README.md index ede75ec..1e19722 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ PyPi - https://pypi.org/project/markdown2anki - **Write and format cards in Markdown**: create cards in Markdown syntax and then import them into Anki while retaining their structure. - **Custom Note types** that support split-screen, tabs, keyboard shortcuts, and mobile devices. - **No addons needed**: The resulting cards are pure HTML and the note-type is CSS and JS, which work with vanilla Anki. -- **Different themes**: themes for both day and night modes, which are easily customizable. You can [check them out here](https://github.com/Mochitto/Markdown2Anki/tree/master/themes)! +- **Different themes**: themes containing both day and night modes, which are easily customizable. You can [check them out here](https://github.com/Mochitto/Markdown2Anki/tree/master/themes)! - **Code highlighting** (using [pygments](https://pygments.org/)). - **Support for clozes** including those in code blocks. - **Support for images** with automatic importing: the program can find the images you mention in your obsidian notes and copy them to your Anki's media folder. @@ -304,15 +304,27 @@ my_list.{{C1::sort}}(True) ``` ### Changing Themes -The default theme is mochitto's Rosé Pine theme, but there is also a catpuccin theme. + +The default theme is mochitto's Rosé Pine and Dawn theme, but there are also other themes available. You can find all the themes in the [themes folder](https://github.com/Mochitto/Markdown2Anki/tree/master/themes). -To use another theme, you can just copy the CSS from the file in the themes folder and paste it in your Note types' styling field. -This can be found by accessing `Tools>Manage Note Types>(select your note type)>Cards(on the right)>Styling(on the left)`. The `Tools` menu is found in the top-left part of Anki's main menu. +#### How to change the theme + +To use another theme, you can just copy the CSS from the file in the themes folder and paste it in your Note types' styling field. +This can be found by accessing `Tools -> Manage Note Types -> (select your note type) -> Cards(on the right) -> Styling(on the left)`. The `Tools` menu is found in the top-left part of Anki's main menu. You can reference this: [Video Tutorial showing how to access a card's style](https://github.com/Mochitto/Markdown2Anki/blob/master/docs/How_to_find_styling.mp4) You can read more on how styling happens here: https://docs.ankiweb.net/templates/styling.html +#### Dual themes + +Some themes contain two variants in the same CSS file: a light and a dark one. +Themes [Rosé Pine and Dawn](themes/rose_pine_and_dawn.css), and [Catpuccin Latte and Macchiato](themes/catpuccin_latte_and_macchiato.css) are examples of this. + +To switch between light and dark theme in Anki: +* Desktop Anki - `Tools -> Preferences -> Appearance -> Theme` +* AnkiDroid - `Hamburger icon (top-left) -> Settings -> Appearance -> Theme` + ### Navigating the UI The custom User Interface of the note-type that comes with this project is focused on the concept of tabs. You can have side-by-side tabs and multiple tabs to toggle through. diff --git a/frontend/esbuild_themes.js b/frontend/esbuild_themes.js index 6efc424..aa82f46 100644 --- a/frontend/esbuild_themes.js +++ b/frontend/esbuild_themes.js @@ -4,6 +4,7 @@ // Themes between UI and Code highlighting. import esbuild from 'esbuild'; import path from "path"; +import { sassPlugin } from "esbuild-sass-plugin"; // Get the file path and filename from command line arguments const [themePath] = process.argv.slice(2); @@ -14,6 +15,9 @@ esbuild.build({ entryPoints: [themePath], bundle: true, minify: true, + plugins: [sassPlugin({ + type: "css", + })], outfile: path.join("..", "themes", fileName), }).then(() => console.log(`⚡ ${fileName} built! ⚡`)) .catch(() => process.exit(1)); diff --git a/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte.css b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte.css index 1bdd0bc..a3da6eb 100644 --- a/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte.css +++ b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte.css @@ -1,7 +1,7 @@ /*! This Highlight theme is based on: Catpuccin Theme Latte - https://github.com/catppuccin/catppuccin - + Custom highlight theme made by @Mochitto, 2023 */ :root, .card{ @@ -23,82 +23,3 @@ Custom highlight theme made by @Mochitto, 2023 --code-comment: #9ca0b0; --code-background: #eff1f5; } - -/* Guide to the tokens: https://pygments.org/docs/tokens/ */ -.highlight .hll { background-color: var(--peach) } - .highlight__code { background: var(--code-background); color: var(--code-text); } - .highlight .c { color: var(--code-comment) } /* Comment */ - .highlight .err { color: var(--red) } /* Error */ - .highlight .g { color: var(--code-text) } /* Generic */ - .highlight .k { color: var(--sky); font-weight: bold; } /* Keyword */ - .highlight .l { color: var(--code-text) } /* Literal */ - .highlight .n { color: var(--blue) } /* Name */ - .highlight .o { color: var(--sky); font-weight: bold; } /* Operator */ - .highlight .x { color: var(--code-text) } /* Other */ - .highlight .p { color: var(--red) } /* Punctuation */ - .highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ - .highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ - .highlight .cp { color: var(--peach) } /* Comment.Preproc */ - .highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ - .highlight .c1 { color: var(--code-comment) } /* Comment.Single */ - .highlight .cs { color: var(--code-comment) } /* Comment.Special */ - .highlight .gd { color: var(--red) } /* Generic.Deleted */ - .highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ - .highlight .gr { color: var(--code-text) } /* Generic.Error */ - .highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ - .highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ - .highlight .go { color: var(--code-text) } /* Generic.Output */ - .highlight .gp { color: var(--code-text) } /* Generic.Prompt */ - .highlight .gs { color: var(--code-text) } /* Generic.Strong */ - .highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ - .highlight .gt { color: var(--code-text) } /* Generic.Traceback */ - .highlight .kc { color: var(--teal) } /* Keyword.Constant */ - .highlight .kd { color: var(--red) } /* Keyword.Declaration */ - .highlight .kn { color: var(--red) } /* Keyword.Namespace */ - .highlight .kp { color: var(--red) } /* Keyword.Pseudo */ - .highlight .kr { color: var(--sky); font-weight: bold; } /* Keyword.Reserved */ - .highlight .kt { color: var(--mauve) } /* Keyword.Type */ - .highlight .ld { color: var(--code-text) } /* Literal.Date */ - .highlight .m { color: var(--mauve) } /* Literal.Number */ - .highlight .s { color: var(--green) } /* Literal.String */ - .highlight .na { color: var(--green) } /* Name.Attribute */ - .highlight .nb { color: var(--maroon); font-style: italic } /* Name.Builtin */ - .highlight .nc { color: var(--peach) } /* Name.Class */ - .highlight .no { color: var(--blue); font-style: italic } /* Name.Constant */ - .highlight .nd { color: var(--code-text) } /* Name.Decorator */ - .highlight .ni { color: var(--code-text) } /* Name.Entity */ - .highlight .ne { color: var(--red) } /* Name.Exception */ - .highlight .nf { color: var(--blue) } /* Name.Function */ - .highlight .nl { color: var(--teal); font-style: italic } /* Name.Label */ - .highlight .nn { color: var(--code-text) } /* Name.Namespace */ - .highlight .nx { color: var(--code-text) } /* Name.Other */ - .highlight .py { color: var(--blue) } /* Name.Property */ - .highlight .nt { color: var(--red) } /* Name.Tag */ - .highlight .nv { color: var(--teal); font-style: italic } /* Name.Variable */ - .highlight .ow { color: var(--mauve); font-weight: bold; } /* Operator.Word */ - .highlight .w { color: var(--code-text) } /* Text.Whitespace */ - .highlight .mb { color: var(--mauve) } /* Literal.Number.Bin */ - .highlight .mf { color: var(--mauve) } /* Literal.Number.Float */ - .highlight .mh { color: var(--mauve) } /* Literal.Number.Hex */ - .highlight .mi { color: var(--mauve) } /* Literal.Number.Integer */ - .highlight .mo { color: var(--mauve) } /* Literal.Number.Oct */ - .highlight .sa { color: var(--green) } /* Literal.String.Affix */ - .highlight .sb { color: var(--green) } /* Literal.String.Backtick */ - .highlight .sc { color: var(--green) } /* Literal.String.Char */ - .highlight .dl { color: var(--green) } /* Literal.String.Delimiter */ - .highlight .sd { color: var(--green) } /* Literal.String.Doc */ - .highlight .s2 { color: var(--green) } /* Literal.String.Double */ - .highlight .se { color: var(--green) } /* Literal.String.Escape */ - .highlight .sh { color: var(--green) } /* Literal.String.Heredoc */ - .highlight .si { color: var(--green) } /* Literal.String.Interpol */ - .highlight .sx { color: var(--green) } /* Literal.String.Other */ - .highlight .sr { color: var(--green) } /* Literal.String.Regex */ - .highlight .s1 { color: var(--green) } /* Literal.String.Single */ - .highlight .ss { color: var(--green) } /* Literal.String.Symbol */ - .highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ - .highlight .fm { color: var(--green) } /* Name.Function.Magic */ - .highlight .vc { color: var(--rosewater); font-style: italic } /* Name.Variable.Class */ - .highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ - .highlight .vi { color: var(--rosewater); font-style: italic } /* Name.Variable.Instance */ - .highlight .vm { color: var(--teal); font-style: italic } /* Name.Variable.Magic */ - .highlight .il { color: var(--mauve) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte_and_macchiato_tokens.css b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte_and_macchiato_tokens.css new file mode 100644 index 0000000..3fa2f1f --- /dev/null +++ b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_latte_and_macchiato_tokens.css @@ -0,0 +1,84 @@ +/*! +This Highlight tokens should be used with: +- Catpuccin Theme Latte +- Catpuccin Theme Macchiato + */ + +/* Guide to the tokens: https://pygments.org/docs/tokens/ */ +.highlight .hll { background-color: var(--peach) } +.highlight__code { background: var(--code-background); color: var(--code-text); } +.highlight .c { color: var(--code-comment) } /* Comment */ +.highlight .err { color: var(--red) } /* Error */ +.highlight .g { color: var(--code-text) } /* Generic */ +.highlight .k { color: var(--sky); font-weight: bold; } /* Keyword */ +.highlight .l { color: var(--code-text) } /* Literal */ +.highlight .n { color: var(--blue) } /* Name */ +.highlight .o { color: var(--sky); font-weight: bold; } /* Operator */ +.highlight .x { color: var(--code-text) } /* Other */ +.highlight .p { color: var(--red) } /* Punctuation */ +.highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ +.highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ +.highlight .cp { color: var(--peach) } /* Comment.Preproc */ +.highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ +.highlight .c1 { color: var(--code-comment) } /* Comment.Single */ +.highlight .cs { color: var(--code-comment) } /* Comment.Special */ +.highlight .gd { color: var(--red) } /* Generic.Deleted */ +.highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ +.highlight .gr { color: var(--code-text) } /* Generic.Error */ +.highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ +.highlight .go { color: var(--code-text) } /* Generic.Output */ +.highlight .gp { color: var(--code-text) } /* Generic.Prompt */ +.highlight .gs { color: var(--code-text) } /* Generic.Strong */ +.highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: var(--code-text) } /* Generic.Traceback */ +.highlight .kc { color: var(--teal) } /* Keyword.Constant */ +.highlight .kd { color: var(--red) } /* Keyword.Declaration */ +.highlight .kn { color: var(--red) } /* Keyword.Namespace */ +.highlight .kp { color: var(--red) } /* Keyword.Pseudo */ +.highlight .kr { color: var(--sky); font-weight: bold; } /* Keyword.Reserved */ +.highlight .kt { color: var(--mauve) } /* Keyword.Type */ +.highlight .ld { color: var(--code-text) } /* Literal.Date */ +.highlight .m { color: var(--mauve) } /* Literal.Number */ +.highlight .s { color: var(--green) } /* Literal.String */ +.highlight .na { color: var(--green) } /* Name.Attribute */ +.highlight .nb { color: var(--maroon); font-style: italic } /* Name.Builtin */ +.highlight .nc { color: var(--peach) } /* Name.Class */ +.highlight .no { color: var(--blue); font-style: italic } /* Name.Constant */ +.highlight .nd { color: var(--code-text) } /* Name.Decorator */ +.highlight .ni { color: var(--code-text) } /* Name.Entity */ +.highlight .ne { color: var(--red) } /* Name.Exception */ +.highlight .nf { color: var(--blue) } /* Name.Function */ +.highlight .nl { color: var(--teal); font-style: italic } /* Name.Label */ +.highlight .nn { color: var(--code-text) } /* Name.Namespace */ +.highlight .nx { color: var(--code-text) } /* Name.Other */ +.highlight .py { color: var(--blue) } /* Name.Property */ +.highlight .nt { color: var(--red) } /* Name.Tag */ +.highlight .nv { color: var(--teal); font-style: italic } /* Name.Variable */ +.highlight .ow { color: var(--mauve); font-weight: bold; } /* Operator.Word */ +.highlight .w { color: var(--code-text) } /* Text.Whitespace */ +.highlight .mb { color: var(--mauve) } /* Literal.Number.Bin */ +.highlight .mf { color: var(--mauve) } /* Literal.Number.Float */ +.highlight .mh { color: var(--mauve) } /* Literal.Number.Hex */ +.highlight .mi { color: var(--mauve) } /* Literal.Number.Integer */ +.highlight .mo { color: var(--mauve) } /* Literal.Number.Oct */ +.highlight .sa { color: var(--green) } /* Literal.String.Affix */ +.highlight .sb { color: var(--green) } /* Literal.String.Backtick */ +.highlight .sc { color: var(--green) } /* Literal.String.Char */ +.highlight .dl { color: var(--green) } /* Literal.String.Delimiter */ +.highlight .sd { color: var(--green) } /* Literal.String.Doc */ +.highlight .s2 { color: var(--green) } /* Literal.String.Double */ +.highlight .se { color: var(--green) } /* Literal.String.Escape */ +.highlight .sh { color: var(--green) } /* Literal.String.Heredoc */ +.highlight .si { color: var(--green) } /* Literal.String.Interpol */ +.highlight .sx { color: var(--green) } /* Literal.String.Other */ +.highlight .sr { color: var(--green) } /* Literal.String.Regex */ +.highlight .s1 { color: var(--green) } /* Literal.String.Single */ +.highlight .ss { color: var(--green) } /* Literal.String.Symbol */ +.highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ +.highlight .fm { color: var(--green) } /* Name.Function.Magic */ +.highlight .vc { color: var(--rosewater); font-style: italic } /* Name.Variable.Class */ +.highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ +.highlight .vi { color: var(--rosewater); font-style: italic } /* Name.Variable.Instance */ +.highlight .vm { color: var(--teal); font-style: italic } /* Name.Variable.Magic */ +.highlight .il { color: var(--mauve) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_macchiato.css b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_macchiato.css index 8df3488..3585e57 100644 --- a/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_macchiato.css +++ b/frontend/src/style/CSS Themes/Highlighting styles/catpuccin_macchiato.css @@ -4,7 +4,7 @@ Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin Custom highlight theme made by @Mochitto, 2023 */ -:root.nightMode, .card.nightMode{ +:root, .card.nightMode{ --rosewater: #f4dbd6; --flamingo: #f0c6c6; --pink: #f5bde6; @@ -23,82 +23,3 @@ Custom highlight theme made by @Mochitto, 2023 --code-comment: #b8c0e0; --code-background: #24273a; } - - /* Guide to the tokens: https://pygments.org/docs/tokens/ */ -.nightMode .highlight .hll { background-color: var(--peach) } -.nightMode .highlight__code { background: var(--code-background); color: var(--code-text); } -.nightMode .highlight .c { color: var(--code-comment) } /* Comment */ -.nightMode .highlight .err { color: var(--red) } /* Error */ -.nightMode .highlight .g { color: var(--code-text) } /* Generic */ -.nightMode .highlight .k { color: var(--sky); font-weight: bold; } /* Keyword */ -.nightMode .highlight .l { color: var(--code-text) } /* Literal */ -.nightMode .highlight .n { color: var(--blue) } /* Name */ -.nightMode .highlight .o { color: var(--sky); font-weight: bold; } /* Operator */ -.nightMode .highlight .x { color: var(--code-text) } /* Other */ -.nightMode .highlight .p { color: var(--red) } /* Punctuation */ -.nightMode .highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ -.nightMode .highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ -.nightMode .highlight .cp { color: var(--peach) } /* Comment.Preproc */ -.nightMode .highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ -.nightMode .highlight .c1 { color: var(--code-comment) } /* Comment.Single */ -.nightMode .highlight .cs { color: var(--code-comment) } /* Comment.Special */ -.nightMode .highlight .gd { color: var(--red) } /* Generic.Deleted */ -.nightMode .highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ -.nightMode .highlight .gr { color: var(--code-text) } /* Generic.Error */ -.nightMode .highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ -.nightMode .highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ -.nightMode .highlight .go { color: var(--code-text) } /* Generic.Output */ -.nightMode .highlight .gp { color: var(--code-text) } /* Generic.Prompt */ -.nightMode .highlight .gs { color: var(--code-text) } /* Generic.Strong */ -.nightMode .highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ -.nightMode .highlight .gt { color: var(--code-text) } /* Generic.Traceback */ -.nightMode .highlight .kc { color: var(--teal) } /* Keyword.Constant */ -.nightMode .highlight .kd { color: var(--red) } /* Keyword.Declaration */ -.nightMode .highlight .kn { color: var(--red) } /* Keyword.Namespace */ -.nightMode .highlight .kp { color: var(--red) } /* Keyword.Pseudo */ -.nightMode .highlight .kr { color: var(--sky); font-weight: bold; } /* Keyword.Reserved */ -.nightMode .highlight .kt { color: var(--mauve) } /* Keyword.Type */ -.nightMode .highlight .ld { color: var(--code-text) } /* Literal.Date */ -.nightMode .highlight .m { color: var(--mauve) } /* Literal.Number */ -.nightMode .highlight .s { color: var(--green) } /* Literal.String */ -.nightMode .highlight .na { color: var(--green) } /* Name.Attribute */ -.nightMode .highlight .nb { color: var(--maroon); font-style: italic } /* Name.Builtin */ -.nightMode .highlight .nc { color: var(--peach) } /* Name.Class */ -.nightMode .highlight .no { color: var(--blue); font-style: italic } /* Name.Constant */ -.nightMode .highlight .nd { color: var(--code-text) } /* Name.Decorator */ -.nightMode .highlight .ni { color: var(--code-text) } /* Name.Entity */ -.nightMode .highlight .ne { color: var(--red) } /* Name.Exception */ -.nightMode .highlight .nf { color: var(--blue) } /* Name.Function */ -.nightMode .highlight .nl { color: var(--teal); font-style: italic } /* Name.Label */ -.nightMode .highlight .nn { color: var(--code-text) } /* Name.Namespace */ -.nightMode .highlight .nx { color: var(--code-text) } /* Name.Other */ -.nightMode .highlight .py { color: var(--blue) } /* Name.Property */ -.nightMode .highlight .nt { color: var(--red) } /* Name.Tag */ -.nightMode .highlight .nv { color: var(--teal); font-style: italic } /* Name.Variable */ -.nightMode .highlight .ow { color: var(--mauve); font-weight: bold; } /* Operator.Word */ -.nightMode .highlight .w { color: var(--code-text) } /* Text.Whitespace */ -.nightMode .highlight .mb { color: var(--mauve) } /* Literal.Number.Bin */ -.nightMode .highlight .mf { color: var(--mauve) } /* Literal.Number.Float */ -.nightMode .highlight .mh { color: var(--mauve) } /* Literal.Number.Hex */ -.nightMode .highlight .mi { color: var(--mauve) } /* Literal.Number.Integer */ -.nightMode .highlight .mo { color: var(--mauve) } /* Literal.Number.Oct */ -.nightMode .highlight .sa { color: var(--green) } /* Literal.String.Affix */ -.nightMode .highlight .sb { color: var(--green) } /* Literal.String.Backtick */ -.nightMode .highlight .sc { color: var(--green) } /* Literal.String.Char */ -.nightMode .highlight .dl { color: var(--green) } /* Literal.String.Delimiter */ -.nightMode .highlight .sd { color: var(--green) } /* Literal.String.Doc */ -.nightMode .highlight .s2 { color: var(--green) } /* Literal.String.Double */ -.nightMode .highlight .se { color: var(--green) } /* Literal.String.Escape */ -.nightMode .highlight .sh { color: var(--green) } /* Literal.String.Heredoc */ -.nightMode .highlight .si { color: var(--green) } /* Literal.String.Interpol */ -.nightMode .highlight .sx { color: var(--green) } /* Literal.String.Other */ -.nightMode .highlight .sr { color: var(--green) } /* Literal.String.Regex */ -.nightMode .highlight .s1 { color: var(--green) } /* Literal.String.Single */ -.nightMode .highlight .ss { color: var(--green) } /* Literal.String.Symbol */ -.nightMode .highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ -.nightMode .highlight .fm { color: var(--green) } /* Name.Function.Magic */ -.nightMode .highlight .vc { color: var(--rosewater); font-style: italic } /* Name.Variable.Class */ -.nightMode .highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ -.nightMode .highlight .vi { color: var(--rosewater); font-style: italic } /* Name.Variable.Instance */ -.nightMode .highlight .vm { color: var(--teal); font-style: italic } /* Name.Variable.Magic */ -.nightMode .highlight .il { color: var(--mauve) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/rose_pine.css b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine.css index a7ef911..c0d3c4b 100644 --- a/frontend/src/style/CSS Themes/Highlighting styles/rose_pine.css +++ b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine.css @@ -16,82 +16,3 @@ Custom Ui theme made by @Mochitto, 2023 --code-comment: #908caa; } - -/* Guide to the tokens: https://pygments.org/docs/tokens/ */ -.highlight .hll { background-color: var(--pine) } - .highlight__code { background: var(--code-background); color: var(--code-text); } - .highlight .c { color: var(--code-comment) } /* Comment */ - .highlight .err { color: var(--love) } /* Error */ - .highlight .g { color: var(--code-text) } /* Generic */ - .highlight .k { color: var(--iris); font-weight: bold; } /* Keyword */ - .highlight .l { color: var(--code-text) } /* Literal */ - .highlight .n { color: var(--gold) } /* Name */ - .highlight .o { color: var(--iris); font-weight: bold; } /* Operator */ - .highlight .x { color: var(--code-text) } /* Other */ - .highlight .p { color: var(--code-comment) } /* Punctuation */ - .highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ - .highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ - .highlight .cp { color: var(--foam) } /* Comment.Preproc */ - .highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ - .highlight .c1 { color: var(--code-comment) } /* Comment.Single */ - .highlight .cs { color: var(--code-comment) } /* Comment.Special */ - .highlight .gd { color: var(--love) } /* Generic.Deleted */ - .highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ - .highlight .gr { color: var(--code-text) } /* Generic.Error */ - .highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ - .highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ - .highlight .go { color: var(--code-text) } /* Generic.Output */ - .highlight .gp { color: var(--code-text) } /* Generic.Prompt */ - .highlight .gs { color: var(--code-text) } /* Generic.Strong */ - .highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ - .highlight .gt { color: var(--code-text) } /* Generic.Traceback */ - .highlight .kc { color: var(--pine) } /* Keyword.Constant */ - .highlight .kd { color: var(--iris) } /* Keyword.Declaration */ - .highlight .kn { color: var(--iris) } /* Keyword.Namespace */ - .highlight .kp { color: var(--iris) } /* Keyword.Pseudo */ - .highlight .kr { color: var(--rose) } /* Keyword.Reserved */ - .highlight .kt { color: var(--gold) } /* Keyword.Type */ - .highlight .ld { color: var(--code-text) } /* Literal.Date */ - .highlight .m { color: var(--gold) } /* Literal.Number */ - .highlight .s { color: var(--gold) } /* Literal.String */ - .highlight .na { color: var(--gold) } /* Name.Attribute */ - .highlight .nb { color: var(--love); font-style: italic } /* Name.Builtin */ - .highlight .nc { color: var(--pine) } /* Name.Class */ - .highlight .no { color: var(--rose); font-style: italic } /* Name.Constant */ - .highlight .nd { color: var(--code-text) } /* Name.Decorator */ - .highlight .ni { color: var(--code-text) } /* Name.Entity */ - .highlight .ne { color: var(--foam); font-style: italic; } /* Name.Exception */ - .highlight .nf { color: var(--pine) } /* Name.Function */ - .highlight .nl { color: var(--pine); font-style: italic } /* Name.Label */ - .highlight .nn { color: var(--code-text) } /* Name.Namespace */ - .highlight .nx { color: var(--code-text) } /* Name.Other */ - .highlight .py { color: var(--love) } /* Name.Property */ - .highlight .nt { color: var(--love) } /* Name.Tag */ - .highlight .nv { color: var(--code-text); font-style: italic } /* Name.Variable */ - .highlight .ow { color: var(--code-comment); } /* Operator.Word */ - .highlight .w { color: var(--code-text) } /* Text.Whitespace */ - .highlight .mb { color: var(--gold) } /* Literal.Number.Bin */ - .highlight .mf { color: var(--gold) } /* Literal.Number.Float */ - .highlight .mh { color: var(--gold) } /* Literal.Number.Hex */ - .highlight .mi { color: var(--gold) } /* Literal.Number.Integer */ - .highlight .mo { color: var(--gold) } /* Literal.Number.Oct */ - .highlight .sa { color: var(--gold) } /* Literal.String.Affix */ - .highlight .sb { color: var(--gold) } /* Literal.String.Backtick */ - .highlight .sc { color: var(--gold) } /* Literal.String.Char */ - .highlight .dl { color: var(--gold) } /* Literal.String.Delimiter */ - .highlight .sd { color: var(--gold) } /* Literal.String.Doc */ - .highlight .s2 { color: var(--gold) } /* Literal.String.Double */ - .highlight .se { color: var(--gold) } /* Literal.String.Escape */ - .highlight .sh { color: var(--gold) } /* Literal.String.Heredoc */ - .highlight .si { color: var(--gold) } /* Literal.String.Interpol */ - .highlight .sx { color: var(--gold) } /* Literal.String.Other */ - .highlight .sr { color: var(--gold) } /* Literal.String.Regex */ - .highlight .s1 { color: var(--gold) } /* Literal.String.Single */ - .highlight .ss { color: var(--gold) } /* Literal.String.Symbol */ - .highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ - .highlight .fm { color: var(--gold) } /* Name.Function.Magic */ - .highlight .vc { color: var(--rose); font-style: italic } /* Name.Variable.Class */ - .highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ - .highlight .vi { color: var(--rose); font-style: italic } /* Name.Variable.Instance */ - .highlight .vm { color: var(--foam); font-style: italic } /* Name.Variable.Magic */ - .highlight .il { color: var(--gold) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_and_dawn_tokens.css b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_and_dawn_tokens.css new file mode 100644 index 0000000..ef50934 --- /dev/null +++ b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_and_dawn_tokens.css @@ -0,0 +1,84 @@ +/*! +This Highlight tokens should be used with: +- Rose Pine +- Rose Pine Dawn + */ + +/* Guide to the tokens: https://pygments.org/docs/tokens/ */ +.highlight .hll { background-color: var(--pine) } +.highlight__code { background: var(--code-background); color: var(--code-text); } +.highlight .c { color: var(--code-comment) } /* Comment */ +.highlight .err { color: var(--love) } /* Error */ +.highlight .g { color: var(--code-text) } /* Generic */ +.highlight .k { color: var(--iris); font-weight: bold; } /* Keyword */ +.highlight .l { color: var(--code-text) } /* Literal */ +.highlight .n { color: var(--gold) } /* Name */ +.highlight .o { color: var(--iris); font-weight: bold; } /* Operator */ +.highlight .x { color: var(--code-text) } /* Other */ +.highlight .p { color: var(--code-comment) } /* Punctuation */ +.highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ +.highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ +.highlight .cp { color: var(--foam) } /* Comment.Preproc */ +.highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ +.highlight .c1 { color: var(--code-comment) } /* Comment.Single */ +.highlight .cs { color: var(--code-comment) } /* Comment.Special */ +.highlight .gd { color: var(--love) } /* Generic.Deleted */ +.highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ +.highlight .gr { color: var(--code-text) } /* Generic.Error */ +.highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ +.highlight .go { color: var(--code-text) } /* Generic.Output */ +.highlight .gp { color: var(--code-text) } /* Generic.Prompt */ +.highlight .gs { color: var(--code-text) } /* Generic.Strong */ +.highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: var(--code-text) } /* Generic.Traceback */ +.highlight .kc { color: var(--pine) } /* Keyword.Constant */ +.highlight .kd { color: var(--iris) } /* Keyword.Declaration */ +.highlight .kn { color: var(--iris) } /* Keyword.Namespace */ +.highlight .kp { color: var(--iris) } /* Keyword.Pseudo */ +.highlight .kr { color: var(--rose) } /* Keyword.Reserved */ +.highlight .kt { color: var(--gold) } /* Keyword.Type */ +.highlight .ld { color: var(--code-text) } /* Literal.Date */ +.highlight .m { color: var(--gold) } /* Literal.Number */ +.highlight .s { color: var(--gold) } /* Literal.String */ +.highlight .na { color: var(--gold) } /* Name.Attribute */ +.highlight .nb { color: var(--love); font-style: italic } /* Name.Builtin */ +.highlight .nc { color: var(--pine) } /* Name.Class */ +.highlight .no { color: var(--rose); font-style: italic } /* Name.Constant */ +.highlight .nd { color: var(--code-text) } /* Name.Decorator */ +.highlight .ni { color: var(--code-text) } /* Name.Entity */ +.highlight .ne { color: var(--foam); font-style: italic; } /* Name.Exception */ +.highlight .nf { color: var(--pine) } /* Name.Function */ +.highlight .nl { color: var(--pine); font-style: italic } /* Name.Label */ +.highlight .nn { color: var(--code-text) } /* Name.Namespace */ +.highlight .nx { color: var(--code-text) } /* Name.Other */ +.highlight .py { color: var(--love) } /* Name.Property */ +.highlight .nt { color: var(--love) } /* Name.Tag */ +.highlight .nv { color: var(--code-text); font-style: italic } /* Name.Variable */ +.highlight .ow { color: var(--code-comment); } /* Operator.Word */ +.highlight .w { color: var(--code-text) } /* Text.Whitespace */ +.highlight .mb { color: var(--gold) } /* Literal.Number.Bin */ +.highlight .mf { color: var(--gold) } /* Literal.Number.Float */ +.highlight .mh { color: var(--gold) } /* Literal.Number.Hex */ +.highlight .mi { color: var(--gold) } /* Literal.Number.Integer */ +.highlight .mo { color: var(--gold) } /* Literal.Number.Oct */ +.highlight .sa { color: var(--gold) } /* Literal.String.Affix */ +.highlight .sb { color: var(--gold) } /* Literal.String.Backtick */ +.highlight .sc { color: var(--gold) } /* Literal.String.Char */ +.highlight .dl { color: var(--gold) } /* Literal.String.Delimiter */ +.highlight .sd { color: var(--gold) } /* Literal.String.Doc */ +.highlight .s2 { color: var(--gold) } /* Literal.String.Double */ +.highlight .se { color: var(--gold) } /* Literal.String.Escape */ +.highlight .sh { color: var(--gold) } /* Literal.String.Heredoc */ +.highlight .si { color: var(--gold) } /* Literal.String.Interpol */ +.highlight .sx { color: var(--gold) } /* Literal.String.Other */ +.highlight .sr { color: var(--gold) } /* Literal.String.Regex */ +.highlight .s1 { color: var(--gold) } /* Literal.String.Single */ +.highlight .ss { color: var(--gold) } /* Literal.String.Symbol */ +.highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ +.highlight .fm { color: var(--gold) } /* Name.Function.Magic */ +.highlight .vc { color: var(--rose); font-style: italic } /* Name.Variable.Class */ +.highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ +.highlight .vi { color: var(--rose); font-style: italic } /* Name.Variable.Instance */ +.highlight .vm { color: var(--foam); font-style: italic } /* Name.Variable.Magic */ +.highlight .il { color: var(--gold) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_dawn.css b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_dawn.css index ae529d7..faf7063 100644 --- a/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_dawn.css +++ b/frontend/src/style/CSS Themes/Highlighting styles/rose_pine_dawn.css @@ -16,82 +16,3 @@ Custom highlight theme made by @Mochitto, 2023 --code-comment: #797593; } - -/* Guide to the tokens: https://pygments.org/docs/tokens/ */ -.highlight .hll { background-color: var(--pine) } - .highlight__code { background: var(--code-background); color: var(--code-text); } - .highlight .c { color: var(--code-comment) } /* Comment */ - .highlight .err { color: var(--love) } /* Error */ - .highlight .g { color: var(--code-text) } /* Generic */ - .highlight .k { color: var(--iris); font-weight: bold; } /* Keyword */ - .highlight .l { color: var(--code-text) } /* Literal */ - .highlight .n { color: var(--gold) } /* Name */ - .highlight .o { color: var(--iris); font-weight: bold; } /* Operator */ - .highlight .x { color: var(--code-text) } /* Other */ - .highlight .p { color: var(--code-comment) } /* Punctuation */ - .highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ - .highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ - .highlight .cp { color: var(--foam) } /* Comment.Preproc */ - .highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ - .highlight .c1 { color: var(--code-comment) } /* Comment.Single */ - .highlight .cs { color: var(--code-comment) } /* Comment.Special */ - .highlight .gd { color: var(--love) } /* Generic.Deleted */ - .highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ - .highlight .gr { color: var(--code-text) } /* Generic.Error */ - .highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ - .highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ - .highlight .go { color: var(--code-text) } /* Generic.Output */ - .highlight .gp { color: var(--code-text) } /* Generic.Prompt */ - .highlight .gs { color: var(--code-text) } /* Generic.Strong */ - .highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ - .highlight .gt { color: var(--code-text) } /* Generic.Traceback */ - .highlight .kc { color: var(--pine) } /* Keyword.Constant */ - .highlight .kd { color: var(--iris) } /* Keyword.Declaration */ - .highlight .kn { color: var(--iris) } /* Keyword.Namespace */ - .highlight .kp { color: var(--iris) } /* Keyword.Pseudo */ - .highlight .kr { color: var(--rose) } /* Keyword.Reserved */ - .highlight .kt { color: var(--gold) } /* Keyword.Type */ - .highlight .ld { color: var(--code-text) } /* Literal.Date */ - .highlight .m { color: var(--gold) } /* Literal.Number */ - .highlight .s { color: var(--gold) } /* Literal.String */ - .highlight .na { color: var(--gold) } /* Name.Attribute */ - .highlight .nb { color: var(--love); font-style: italic } /* Name.Builtin */ - .highlight .nc { color: var(--pine) } /* Name.Class */ - .highlight .no { color: var(--rose); font-style: italic } /* Name.Constant */ - .highlight .nd { color: var(--code-text) } /* Name.Decorator */ - .highlight .ni { color: var(--code-text) } /* Name.Entity */ - .highlight .ne { color: var(--foam); font-style: italic; } /* Name.Exception */ - .highlight .nf { color: var(--pine) } /* Name.Function */ - .highlight .nl { color: var(--pine); font-style: italic } /* Name.Label */ - .highlight .nn { color: var(--code-text) } /* Name.Namespace */ - .highlight .nx { color: var(--code-text) } /* Name.Other */ - .highlight .py { color: var(--love) } /* Name.Property */ - .highlight .nt { color: var(--love) } /* Name.Tag */ - .highlight .nv { color: var(--code-text); font-style: italic } /* Name.Variable */ - .highlight .ow { color: var(--code-comment); } /* Operator.Word */ - .highlight .w { color: var(--code-text) } /* Text.Whitespace */ - .highlight .mb { color: var(--gold) } /* Literal.Number.Bin */ - .highlight .mf { color: var(--gold) } /* Literal.Number.Float */ - .highlight .mh { color: var(--gold) } /* Literal.Number.Hex */ - .highlight .mi { color: var(--gold) } /* Literal.Number.Integer */ - .highlight .mo { color: var(--gold) } /* Literal.Number.Oct */ - .highlight .sa { color: var(--gold) } /* Literal.String.Affix */ - .highlight .sb { color: var(--gold) } /* Literal.String.Backtick */ - .highlight .sc { color: var(--gold) } /* Literal.String.Char */ - .highlight .dl { color: var(--gold) } /* Literal.String.Delimiter */ - .highlight .sd { color: var(--gold) } /* Literal.String.Doc */ - .highlight .s2 { color: var(--gold) } /* Literal.String.Double */ - .highlight .se { color: var(--gold) } /* Literal.String.Escape */ - .highlight .sh { color: var(--gold) } /* Literal.String.Heredoc */ - .highlight .si { color: var(--gold) } /* Literal.String.Interpol */ - .highlight .sx { color: var(--gold) } /* Literal.String.Other */ - .highlight .sr { color: var(--gold) } /* Literal.String.Regex */ - .highlight .s1 { color: var(--gold) } /* Literal.String.Single */ - .highlight .ss { color: var(--gold) } /* Literal.String.Symbol */ - .highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ - .highlight .fm { color: var(--gold) } /* Name.Function.Magic */ - .highlight .vc { color: var(--rose); font-style: italic } /* Name.Variable.Class */ - .highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ - .highlight .vi { color: var(--rose); font-style: italic } /* Name.Variable.Instance */ - .highlight .vm { color: var(--foam); font-style: italic } /* Name.Variable.Magic */ - .highlight .il { color: var(--gold) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/UI Themes/catpuccin_macchiato.css b/frontend/src/style/CSS Themes/UI Themes/catpuccin_macchiato.css index 373188b..c633dc5 100644 --- a/frontend/src/style/CSS Themes/UI Themes/catpuccin_macchiato.css +++ b/frontend/src/style/CSS Themes/UI Themes/catpuccin_macchiato.css @@ -5,19 +5,19 @@ Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin Custom Ui theme made by @Mochitto, 2023 */ -:root.nightMode, .card.nightMode { +:root, .card.nightMode { --main-background: #24273a; /* This is used for the tabs' body */ --secondary-background: #1e2030; /* This is used for the tabs-bar background */ --tabs-label-background: #181926; /* This is used for inactive tabs */ --accent-background: #c6a0f6; - --cloze-background: #ed8796; + --cloze-background: #ed8796; --codeline-hover-background: rgba(76, 79, 105, 0.1); /* Usually you can use the text rgb with a=0.1 for this. */ --main-color: #cad3f5; --secondary-color: #a5adcb; --accent-color: #c6a0f6; - --cloze-color: #24273a; + --cloze-color: #24273a; --h1: #c6a0f6; --h2: #ed8796; diff --git a/frontend/src/style/CSS Themes/UI Themes/rose_pine.css b/frontend/src/style/CSS Themes/UI Themes/rose_pine.css index 54160c0..208a268 100644 --- a/frontend/src/style/CSS Themes/UI Themes/rose_pine.css +++ b/frontend/src/style/CSS Themes/UI Themes/rose_pine.css @@ -5,12 +5,12 @@ Rose' pine palette: https://rosepinetheme.com/palette Custom Ui theme made by @Mochitto, 2023 */ -:root.nightMode, .card.nightMode { +:root, .card.nightMode { --main-background: #191724; /* This is used for the tabs' body */ --secondary-background: #26233a; /* This is used for the tabs-bar background */ --tabs-label-background: #1f1d2e; /* This is used for inactive tabs */ --accent-background: #f6c177; - --cloze-background: #eb6f92; + --cloze-background: #eb6f92; --codeline-hover-background: rgba(224, 222, 244, 0.1); /* Usually you can use the text rgb with a=0.1 for this. */ diff --git a/frontend/src/style/CSS Themes/full_themes/catpuccin_latte.css b/frontend/src/style/CSS Themes/full_themes/catpuccin_latte.css index c5628b6..5e9a9ad 100644 --- a/frontend/src/style/CSS Themes/full_themes/catpuccin_latte.css +++ b/frontend/src/style/CSS Themes/full_themes/catpuccin_latte.css @@ -1,2 +1,6 @@ @import url("../UI\ Themes/catpuccin_latte.css"); @import url("../Highlighting styles/catpuccin_latte.css"); + +@import url("../Highlighting styles/catpuccin_latte_and_macchiato_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/catpuccin_latte_and_macchiato.css b/frontend/src/style/CSS Themes/full_themes/catpuccin_latte_and_macchiato.css new file mode 100644 index 0000000..607dc88 --- /dev/null +++ b/frontend/src/style/CSS Themes/full_themes/catpuccin_latte_and_macchiato.css @@ -0,0 +1,9 @@ +@import url("../UI\ Themes/catpuccin_latte.css"); +@import url("../Highlighting styles/catpuccin_latte.css"); + +@import url("../UI\ Themes/catpuccin_macchiato.css"); +@import url("../Highlighting styles/catpuccin_macchiato.css"); + +@import url("../Highlighting styles/catpuccin_latte_and_macchiato_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/catpuccin_macchiato.css b/frontend/src/style/CSS Themes/full_themes/catpuccin_macchiato.css index 970878a..d185c72 100644 --- a/frontend/src/style/CSS Themes/full_themes/catpuccin_macchiato.css +++ b/frontend/src/style/CSS Themes/full_themes/catpuccin_macchiato.css @@ -1,2 +1,6 @@ @import url("../UI\ Themes/catpuccin_macchiato.css"); @import url("../Highlighting styles/catpuccin_macchiato.css"); + +@import url("../Highlighting styles/catpuccin_latte_and_macchiato_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/rose_pine.css b/frontend/src/style/CSS Themes/full_themes/rose_pine.css index 611d7b9..cb92a7f 100644 --- a/frontend/src/style/CSS Themes/full_themes/rose_pine.css +++ b/frontend/src/style/CSS Themes/full_themes/rose_pine.css @@ -1,2 +1,6 @@ @import url("../UI\ Themes/rose_pine.css"); @import url("../Highlighting styles/rose_pine.css"); + +@import url("../Highlighting styles/rose_pine_and_dawn_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/rose_pine_and_dawn.css b/frontend/src/style/CSS Themes/full_themes/rose_pine_and_dawn.css new file mode 100644 index 0000000..df3e493 --- /dev/null +++ b/frontend/src/style/CSS Themes/full_themes/rose_pine_and_dawn.css @@ -0,0 +1,9 @@ +@import url("../UI\ Themes/rose_pine.css"); +@import url("../Highlighting styles/rose_pine.css"); + +@import url("../UI\ Themes/rose_pine_dawn.css"); +@import url("../Highlighting styles/rose_pine_dawn.css"); + +@import url("../Highlighting styles/rose_pine_and_dawn_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/rose_pine_dawn.css b/frontend/src/style/CSS Themes/full_themes/rose_pine_dawn.css index c3e4217..3e84cbf 100644 --- a/frontend/src/style/CSS Themes/full_themes/rose_pine_dawn.css +++ b/frontend/src/style/CSS Themes/full_themes/rose_pine_dawn.css @@ -1,2 +1,6 @@ @import url("../UI\ Themes/rose_pine_dawn.css"); @import url("../Highlighting styles/rose_pine_dawn.css"); + +@import url("../Highlighting styles/rose_pine_and_dawn_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/theme_builder/README.md b/theme_builder/README.md index f127775..19d37a6 100644 --- a/theme_builder/README.md +++ b/theme_builder/README.md @@ -51,9 +51,13 @@ This is an example of how the import statements file should look: /* The file should be named the same as your theme. */ @import url("../UI\ Themes/.css"); @import url("../Highlighting styles/.css"); + +@import url("../../themeless_main.sass"); ``` This is done so that we can later minify your theme and add it to the `themes` folder. +Notice: Always import the `themeless_main.sass` file, as it contains the basic styling for the cards. + ### Last step: Images and readme As last step, you should add a screen-shot of your theme in the `themes/docs` folder, and add the theme name and the images to the `themes/README.md` file. @@ -85,6 +89,35 @@ A list of the meaning of each token can be found here: https://pygments.org/docs !! Notice: How the text is highlighted might not reflect your colors. This could be because the lexer used by pygments (the library that takes care of code highlighting) could be using generic tokens instead of specific ones. +### Dual themes (Advanced) + +If you want to create a dual theme, the process is similar to the single theme, but now you also need to add two pairs of UI and Highlighting files (if highlighting is used) in the CSS file in the `full_themes` folder: one for the light mode and one for the dark mode. + +For example: + +```css +/* Import light theme files. */ +@import url("../UI\ Themes/.css"); +@import url("../Highlighting styles/.css"); + +/* Import dark theme files. */ +@import url("../UI\ Themes/.css"); +@import url("../Highlighting styles/.css"); + +/* Import common token file (if applicable. */ +@import url("../Highlighting styles/.css"); + +@import url("../../themeless_main.sass"); +``` + +The main differences are: +* the dark themes should have `.card.nightMode` selector instead of just `.card` selector. +* From organizational perspective is easiest if light and dark themes share the same color name variable and just change hex values. +* It is also the easiest to have a common token file which uses the same color name variables as +defined by both light and dark themes. + +For examples see the `catpuccin_latte_and_macchiato.css` and `rose_pine_and_dawn.css` themes + ### Checking your highlighting palette You can link to your `awesome_highlight_theme.css` in the `test.html` file to check the colors. If your preferred language is not Javascript and you'd like to see it on your favourite language, the best way to do it is to add the css directly to your Anki cards' CSS. diff --git a/themes/README.md b/themes/README.md index 95aa7f8..4906bf0 100644 --- a/themes/README.md +++ b/themes/README.md @@ -1,27 +1,34 @@ # Markdown2anki themes ## Table of contents -- Dark themes: - - [Rose Pine](#Rose-Pine) - - [Catpuccin Macchiato](#Catpuccin-Macchiato) -- Light themes: - - [Rose Pine Dawn](#Rose-Pine-Dawn) - - [Catpuccin Latte](#Catpuccin-Latte) ---- +**Dual themes** -## Rose Pine -Inspired by: https://rosepinetheme.com/ -![A demo image of the rose pine theme](./docs/rose-pine.webp) +- [Rose Pine and Dawn](#Rose-Pine-and-Dawn) +- [Catpuccin Latte and Macchiato](#Catpuccin-Latte-and-Macchiato) + +All dual themes are also available in individual Light and Dark versions. + +## Rose Pine and Dawn + +### Rose Pine Dawn -## Rose Pine Dawn Inspired by: https://rosepinetheme.com/ ![A demo image of the rose pine dawn theme](./docs/rose-pine-dawn.webp) -## Catpuccin Macchiato -Inspired by: https://github.com/catppuccin/catppuccin -![A demo image of the catpuccin macchiato theme](./docs/catpuccin-macchiato.webp) +### Rose Pine + +Inspired by: https://rosepinetheme.com/ +![A demo image of the rose pine theme](./docs/rose-pine.webp) + +## Catpuccin Latte and Macchiato + +### Catpuccin Latte -## Catpuccin Latte Inspired by: https://github.com/catppuccin/catppuccin ![A demo image of the catpuccin latte theme](./docs/catpuccin-latte.webp) + +### Catpuccin Macchiato + +Inspired by: https://github.com/catppuccin/catppuccin +![A demo image of the catpuccin macchiato theme](./docs/catpuccin-macchiato.webp) diff --git a/themes/catpuccin_latte.css b/themes/catpuccin_latte.css index 448c028..4b2f854 100644 --- a/themes/catpuccin_latte.css +++ b/themes/catpuccin_latte.css @@ -1,4 +1,4 @@ -:root,.card{--main-background: #eff1f5;--secondary-background: #e6e9ef;--tabs-label-background: #dce0e8;--accent-background: #8839ef;--cloze-background: #d20f39;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #4c4f69;--secondary-color: #9ca0b0;--accent-color: #8839ef;--cloze-color: #eff1f5;--h1: #8839ef;--h2: #d20f39;--h3: #fe640b;--h4: #df8e1d;--h5: #40a02b;--h6: #04a5e5}:root,.card{--rosewater: #dc8a78;--flamingo: #dd7878;--pink: #ea76cb;--mauve: #8839ef;--red: #d20f39;--maroon: #e64553;--peach: #fe640b;--yellow: #df8e1d;--green: #40a02b;--teal: #179299;--sky: #04a5e5;--sapphire: #209fb5;--blue: #1e66f5;--lavender: #7287fd;--code-text: #4c4f69;--code-comment: #9ca0b0;--code-background: #eff1f5}.highlight .hll{background-color:var(--peach)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--sky);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--blue)}.highlight .o{color:var(--sky);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--red)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--peach)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--teal)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--red)}.highlight .kr{color:var(--sky);font-weight:700}.highlight .kt{color:var(--mauve)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--mauve)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--maroon);font-style:italic}.highlight .nc{color:var(--peach)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--teal);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py{color:var(--blue)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--teal);font-style:italic}.highlight .ow{color:var(--mauve);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--mauve)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--green)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--rosewater);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rosewater);font-style:italic}.highlight .vm{color:var(--teal);font-style:italic}.highlight .il{color:var(--mauve)} +:root,.card{--main-background: #eff1f5;--secondary-background: #e6e9ef;--tabs-label-background: #dce0e8;--accent-background: #8839ef;--cloze-background: #d20f39;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #4c4f69;--secondary-color: #9ca0b0;--accent-color: #8839ef;--cloze-color: #eff1f5;--h1: #8839ef;--h2: #d20f39;--h3: #fe640b;--h4: #df8e1d;--h5: #40a02b;--h6: #04a5e5}:root,.card{--rosewater: #dc8a78;--flamingo: #dd7878;--pink: #ea76cb;--mauve: #8839ef;--red: #d20f39;--maroon: #e64553;--peach: #fe640b;--yellow: #df8e1d;--green: #40a02b;--teal: #179299;--sky: #04a5e5;--sapphire: #209fb5;--blue: #1e66f5;--lavender: #7287fd;--code-text: #4c4f69;--code-comment: #9ca0b0;--code-background: #eff1f5}.highlight .hll{background-color:var(--peach)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--sky);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--blue)}.highlight .o{color:var(--sky);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--red)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--peach)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--teal)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--red)}.highlight .kr{color:var(--sky);font-weight:700}.highlight .kt{color:var(--mauve)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--mauve)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--maroon);font-style:italic}.highlight .nc{color:var(--peach)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--teal);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py{color:var(--blue)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--teal);font-style:italic}.highlight .ow{color:var(--mauve);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--mauve)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--green)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--rosewater);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rosewater);font-style:italic}.highlight .vm{color:var(--teal);font-style:italic}.highlight .il{color:var(--mauve)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} /*! This UI theme is based on: Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin @@ -8,6 +8,11 @@ Custom Ui theme made by @Mochitto, 2023 /*! This Highlight theme is based on: Catpuccin Theme Latte - https://github.com/catppuccin/catppuccin - + Custom highlight theme made by @Mochitto, 2023 */ +/*! +This Highlight tokens should be used with: +- Catpuccin Theme Latte +- Catpuccin Theme Macchiato + */ diff --git a/themes/catpuccin_latte_and_macchiato.css b/themes/catpuccin_latte_and_macchiato.css new file mode 100644 index 0000000..014e883 --- /dev/null +++ b/themes/catpuccin_latte_and_macchiato.css @@ -0,0 +1,24 @@ +:root,.card{--main-background: #eff1f5;--secondary-background: #e6e9ef;--tabs-label-background: #dce0e8;--accent-background: #8839ef;--cloze-background: #d20f39;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #4c4f69;--secondary-color: #9ca0b0;--accent-color: #8839ef;--cloze-color: #eff1f5;--h1: #8839ef;--h2: #d20f39;--h3: #fe640b;--h4: #df8e1d;--h5: #40a02b;--h6: #04a5e5}:root,.card{--rosewater: #dc8a78;--flamingo: #dd7878;--pink: #ea76cb;--mauve: #8839ef;--red: #d20f39;--maroon: #e64553;--peach: #fe640b;--yellow: #df8e1d;--green: #40a02b;--teal: #179299;--sky: #04a5e5;--sapphire: #209fb5;--blue: #1e66f5;--lavender: #7287fd;--code-text: #4c4f69;--code-comment: #9ca0b0;--code-background: #eff1f5}:root,.card.nightMode{--main-background: #24273a;--secondary-background: #1e2030;--tabs-label-background: #181926;--accent-background: #c6a0f6;--cloze-background: #ed8796;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #cad3f5;--secondary-color: #a5adcb;--accent-color: #c6a0f6;--cloze-color: #24273a;--h1: #c6a0f6;--h2: #ed8796;--h3: #f5a97f;--h4: #eed49f;--h5: #a6da95;--h6: #91d7e3}:root,.card.nightMode{--rosewater: #f4dbd6;--flamingo: #f0c6c6;--pink: #f5bde6;--mauve: #c6a0f6;--red: #ed8796;--maroon: #ee99a0;--peach: #f5a97f;--yellow: #eed49f;--green: #a6da95;--teal: #8db5ca;--sky: #91d7e3;--sapphire: #7dc4e4;--blue: #8aadf4;--lavender: #b7bdf8;--code-text: #cad3f5;--code-comment: #b8c0e0;--code-background: #24273a}.highlight .hll{background-color:var(--peach)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--sky);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--blue)}.highlight .o{color:var(--sky);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--red)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--peach)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--teal)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--red)}.highlight .kr{color:var(--sky);font-weight:700}.highlight .kt{color:var(--mauve)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--mauve)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--maroon);font-style:italic}.highlight .nc{color:var(--peach)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--teal);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py{color:var(--blue)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--teal);font-style:italic}.highlight .ow{color:var(--mauve);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--mauve)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--green)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--rosewater);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rosewater);font-style:italic}.highlight .vm{color:var(--teal);font-style:italic}.highlight .il{color:var(--mauve)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} +/*! +This Highlight theme is based on: +Catpuccin Theme Latte - https://github.com/catppuccin/catppuccin + +Custom highlight theme made by @Mochitto, 2023 + */ +/*! +This UI theme is based on: +Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin + +Custom Ui theme made by @Mochitto, 2023 + */ +/*! +This Highlight theme is based on: +Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin + +Custom highlight theme made by @Mochitto, 2023 + */ +/*! +This Highlight tokens should be used with: +- Catpuccin Theme Latte +- Catpuccin Theme Macchiato + */ diff --git a/themes/catpuccin_macchiato.css b/themes/catpuccin_macchiato.css index 4427749..fa2e13d 100644 --- a/themes/catpuccin_macchiato.css +++ b/themes/catpuccin_macchiato.css @@ -1,4 +1,4 @@ -:root.nightMode,.card.nightMode{--main-background: #24273a;--secondary-background: #1e2030;--tabs-label-background: #181926;--accent-background: #c6a0f6;--cloze-background: #ed8796;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #cad3f5;--secondary-color: #a5adcb;--accent-color: #c6a0f6;--cloze-color: #24273a;--h1: #c6a0f6;--h2: #ed8796;--h3: #f5a97f;--h4: #eed49f;--h5: #a6da95;--h6: #91d7e3}:root.nightMode,.card.nightMode{--rosewater: #f4dbd6;--flamingo: #f0c6c6;--pink: #f5bde6;--mauve: #c6a0f6;--red: #ed8796;--maroon: #ee99a0;--peach: #f5a97f;--yellow: #eed49f;--green: #a6da95;--teal: #8db5ca;--sky: #91d7e3;--sapphire: #7dc4e4;--blue: #8aadf4;--lavender: #b7bdf8;--code-text: #cad3f5;--code-comment: #b8c0e0;--code-background: #24273a}.nightMode .highlight .hll{background-color:var(--peach)}.nightMode .highlight__code{background:var(--code-background);color:var(--code-text)}.nightMode .highlight .c{color:var(--code-comment)}.nightMode .highlight .err{color:var(--red)}.nightMode .highlight .g{color:var(--code-text)}.nightMode .highlight .k{color:var(--sky);font-weight:700}.nightMode .highlight .l{color:var(--code-text)}.nightMode .highlight .n{color:var(--blue)}.nightMode .highlight .o{color:var(--sky);font-weight:700}.nightMode .highlight .x{color:var(--code-text)}.nightMode .highlight .p{color:var(--red)}.nightMode .highlight .ch,.nightMode .highlight .cm{color:var(--code-comment)}.nightMode .highlight .cp{color:var(--peach)}.nightMode .highlight .cpf,.nightMode .highlight .c1,.nightMode .highlight .cs{color:var(--code-comment)}.nightMode .highlight .gd{color:var(--red)}.nightMode .highlight .ge{color:var(--code-text);text-decoration:underline}.nightMode .highlight .gr{color:var(--code-text)}.nightMode .highlight .gh,.nightMode .highlight .gi{color:var(--code-text);font-weight:700}.nightMode .highlight .go,.nightMode .highlight .gp,.nightMode .highlight .gs{color:var(--code-text)}.nightMode .highlight .gu{color:var(--code-text);font-weight:700}.nightMode .highlight .gt{color:var(--code-text)}.nightMode .highlight .kc{color:var(--teal)}.nightMode .highlight .kd,.nightMode .highlight .kn,.nightMode .highlight .kp{color:var(--red)}.nightMode .highlight .kr{color:var(--sky);font-weight:700}.nightMode .highlight .kt{color:var(--mauve)}.nightMode .highlight .ld{color:var(--code-text)}.nightMode .highlight .m{color:var(--mauve)}.nightMode .highlight .s,.nightMode .highlight .na{color:var(--green)}.nightMode .highlight .nb{color:var(--maroon);font-style:italic}.nightMode .highlight .nc{color:var(--peach)}.nightMode .highlight .no{color:var(--blue);font-style:italic}.nightMode .highlight .nd,.nightMode .highlight .ni{color:var(--code-text)}.nightMode .highlight .ne{color:var(--red)}.nightMode .highlight .nf{color:var(--blue)}.nightMode .highlight .nl{color:var(--teal);font-style:italic}.nightMode .highlight .nn,.nightMode .highlight .nx{color:var(--code-text)}.nightMode .highlight .py{color:var(--blue)}.nightMode .highlight .nt{color:var(--red)}.nightMode .highlight .nv{color:var(--teal);font-style:italic}.nightMode .highlight .ow{color:var(--mauve);font-weight:700}.nightMode .highlight .w{color:var(--code-text)}.nightMode .highlight .mb,.nightMode .highlight .mf,.nightMode .highlight .mh,.nightMode .highlight .mi,.nightMode .highlight .mo{color:var(--mauve)}.nightMode .highlight .sa,.nightMode .highlight .sb,.nightMode .highlight .sc,.nightMode .highlight .dl,.nightMode .highlight .sd,.nightMode .highlight .s2,.nightMode .highlight .se,.nightMode .highlight .sh,.nightMode .highlight .si,.nightMode .highlight .sx,.nightMode .highlight .sr,.nightMode .highlight .s1,.nightMode .highlight .ss{color:var(--green)}.nightMode .highlight .bp{color:var(--code-text);font-style:italic}.nightMode .highlight .fm{color:var(--green)}.nightMode .highlight .vc{color:var(--rosewater);font-style:italic}.nightMode .highlight .vg{color:var(--code-text);font-style:italic}.nightMode .highlight .vi{color:var(--rosewater);font-style:italic}.nightMode .highlight .vm{color:var(--teal);font-style:italic}.nightMode .highlight .il{color:var(--mauve)} +:root,.card.nightMode{--main-background: #24273a;--secondary-background: #1e2030;--tabs-label-background: #181926;--accent-background: #c6a0f6;--cloze-background: #ed8796;--codeline-hover-background: rgba(76, 79, 105, .1);--main-color: #cad3f5;--secondary-color: #a5adcb;--accent-color: #c6a0f6;--cloze-color: #24273a;--h1: #c6a0f6;--h2: #ed8796;--h3: #f5a97f;--h4: #eed49f;--h5: #a6da95;--h6: #91d7e3}:root,.card.nightMode{--rosewater: #f4dbd6;--flamingo: #f0c6c6;--pink: #f5bde6;--mauve: #c6a0f6;--red: #ed8796;--maroon: #ee99a0;--peach: #f5a97f;--yellow: #eed49f;--green: #a6da95;--teal: #8db5ca;--sky: #91d7e3;--sapphire: #7dc4e4;--blue: #8aadf4;--lavender: #b7bdf8;--code-text: #cad3f5;--code-comment: #b8c0e0;--code-background: #24273a}.highlight .hll{background-color:var(--peach)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--sky);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--blue)}.highlight .o{color:var(--sky);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--red)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--peach)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--teal)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--red)}.highlight .kr{color:var(--sky);font-weight:700}.highlight .kt{color:var(--mauve)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--mauve)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--maroon);font-style:italic}.highlight .nc{color:var(--peach)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--teal);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py{color:var(--blue)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--teal);font-style:italic}.highlight .ow{color:var(--mauve);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--mauve)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--green)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--rosewater);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rosewater);font-style:italic}.highlight .vm{color:var(--teal);font-style:italic}.highlight .il{color:var(--mauve)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} /*! This UI theme is based on: Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin @@ -11,3 +11,8 @@ Catpuccin Theme Macchiato - https://github.com/catppuccin/catppuccin Custom highlight theme made by @Mochitto, 2023 */ +/*! +This Highlight tokens should be used with: +- Catpuccin Theme Latte +- Catpuccin Theme Macchiato + */ diff --git a/themes/rose_pine.css b/themes/rose_pine.css index f48053d..fcf5b6e 100644 --- a/themes/rose_pine.css +++ b/themes/rose_pine.css @@ -1,4 +1,4 @@ -:root.nightMode,.card.nightMode{--main-background: #191724;--secondary-background: #26233a;--tabs-label-background: #1f1d2e;--accent-background: #f6c177;--cloze-background: #eb6f92;--codeline-hover-background: rgba(224, 222, 244, .1);--main-color: #e0def4;--secondary-color: #908caa;--accent-color: #f6c177;--cloze-color: #191724;--h1: #eb6f92;--h2: #f6c177;--h3: #9ccfd8;--h4: #c4a7e7;--h5: #31748f;--h6: #ebbcba}:root.nightMode,.card.nightMode{--love: #eb6f92;--gold: #f6c177;--rose: #ebbcba;--pine: #31748f;--foam: #9ccfd8;--iris: #c4a7e7;--code-background: #191724;--code-text: #e0def4;--code-comment: #908caa}.highlight .hll{background-color:var(--pine)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--love)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--iris);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--gold)}.highlight .o{color:var(--iris);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p,.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--foam)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--love)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--pine)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--iris)}.highlight .kr{color:var(--rose)}.highlight .kt{color:var(--gold)}.highlight .ld{color:var(--code-text)}.highlight .m,.highlight .s,.highlight .na{color:var(--gold)}.highlight .nb{color:var(--love);font-style:italic}.highlight .nc{color:var(--pine)}.highlight .no{color:var(--rose);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--foam);font-style:italic}.highlight .nf{color:var(--pine)}.highlight .nl{color:var(--pine);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py,.highlight .nt{color:var(--love)}.highlight .nv{color:var(--code-text);font-style:italic}.highlight .ow{color:var(--code-comment)}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--gold)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--gold)}.highlight .vc{color:var(--rose);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rose);font-style:italic}.highlight .vm{color:var(--foam);font-style:italic}.highlight .il{color:var(--gold)} +:root,.card.nightMode{--main-background: #191724;--secondary-background: #26233a;--tabs-label-background: #1f1d2e;--accent-background: #f6c177;--cloze-background: #eb6f92;--codeline-hover-background: rgba(224, 222, 244, .1);--main-color: #e0def4;--secondary-color: #908caa;--accent-color: #f6c177;--cloze-color: #191724;--h1: #eb6f92;--h2: #f6c177;--h3: #9ccfd8;--h4: #c4a7e7;--h5: #31748f;--h6: #ebbcba}:root.nightMode,.card.nightMode{--love: #eb6f92;--gold: #f6c177;--rose: #ebbcba;--pine: #31748f;--foam: #9ccfd8;--iris: #c4a7e7;--code-background: #191724;--code-text: #e0def4;--code-comment: #908caa}.highlight .hll{background-color:var(--pine)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--love)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--iris);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--gold)}.highlight .o{color:var(--iris);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p,.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--foam)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--love)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--pine)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--iris)}.highlight .kr{color:var(--rose)}.highlight .kt{color:var(--gold)}.highlight .ld{color:var(--code-text)}.highlight .m,.highlight .s,.highlight .na{color:var(--gold)}.highlight .nb{color:var(--love);font-style:italic}.highlight .nc{color:var(--pine)}.highlight .no{color:var(--rose);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--foam);font-style:italic}.highlight .nf{color:var(--pine)}.highlight .nl{color:var(--pine);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py,.highlight .nt{color:var(--love)}.highlight .nv{color:var(--code-text);font-style:italic}.highlight .ow{color:var(--code-comment)}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--gold)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--gold)}.highlight .vc{color:var(--rose);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rose);font-style:italic}.highlight .vm{color:var(--foam);font-style:italic}.highlight .il{color:var(--gold)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} /*! This UI theme is based on: Rose' pine palette: https://rosepinetheme.com/palette @@ -11,3 +11,8 @@ Rose' pine palette: https://rosepinetheme.com/palette Custom Ui theme made by @Mochitto, 2023 */ +/*! +This Highlight tokens should be used with: +- Rose Pine +- Rose Pine Dawn + */ diff --git a/themes/rose_pine_and_dawn.css b/themes/rose_pine_and_dawn.css new file mode 100644 index 0000000..8112883 --- /dev/null +++ b/themes/rose_pine_and_dawn.css @@ -0,0 +1,24 @@ +:root,.card.nightMode{--main-background: #191724;--secondary-background: #26233a;--tabs-label-background: #1f1d2e;--accent-background: #f6c177;--cloze-background: #eb6f92;--codeline-hover-background: rgba(224, 222, 244, .1);--main-color: #e0def4;--secondary-color: #908caa;--accent-color: #f6c177;--cloze-color: #191724;--h1: #eb6f92;--h2: #f6c177;--h3: #9ccfd8;--h4: #c4a7e7;--h5: #31748f;--h6: #ebbcba}:root.nightMode,.card.nightMode{--love: #eb6f92;--gold: #f6c177;--rose: #ebbcba;--pine: #31748f;--foam: #9ccfd8;--iris: #c4a7e7;--code-background: #191724;--code-text: #e0def4;--code-comment: #908caa}:root,.card{--main-background: #faf4ed;--secondary-background: #dfdad9;--tabs-label-background: #cecacd;--accent-background: #b4637a;--cloze-background: #286983;--codeline-hover-background: rgb(87, 82, 121, .1);--main-color: #575279;--secondary-color: #797593;--accent-color: #b4637a;--cloze-color: #faf4ed;--h1: #286983;--h2: #ea9d34;--h3: #56949f;--h4: #907aa9;--h5: #b4637a;--h6: #d7827e}:root,.card{--love: #b4637a;--gold: #ea9d34;--rose: #d7827e;--pine: #286983;--foam: #56949f;--iris: #907aa9;--code-background: #faf4ed;--code-text: #575279;--code-comment: #797593}.highlight .hll{background-color:var(--pine)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--love)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--iris);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--gold)}.highlight .o{color:var(--iris);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p,.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--foam)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--love)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--pine)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--iris)}.highlight .kr{color:var(--rose)}.highlight .kt{color:var(--gold)}.highlight .ld{color:var(--code-text)}.highlight .m,.highlight .s,.highlight .na{color:var(--gold)}.highlight .nb{color:var(--love);font-style:italic}.highlight .nc{color:var(--pine)}.highlight .no{color:var(--rose);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--foam);font-style:italic}.highlight .nf{color:var(--pine)}.highlight .nl{color:var(--pine);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py,.highlight .nt{color:var(--love)}.highlight .nv{color:var(--code-text);font-style:italic}.highlight .ow{color:var(--code-comment)}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--gold)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--gold)}.highlight .vc{color:var(--rose);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rose);font-style:italic}.highlight .vm{color:var(--foam);font-style:italic}.highlight .il{color:var(--gold)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} +/*! +This Highlight theme is based on: +Rose' pine palette: https://rosepinetheme.com/palette + +Custom Ui theme made by @Mochitto, 2023 + */ +/*! +This UI theme is based on: +Rose' pine palette: https://rosepinetheme.com/palette + +Custom Ui theme made by @Mochitto, 2023 + */ +/*! +This Highlight theme is based on: +Rose' pine palette: https://rosepinetheme.com/palette + +Custom highlight theme made by @Mochitto, 2023 + */ +/*! +This Highlight tokens should be used with: +- Rose Pine +- Rose Pine Dawn + */ diff --git a/themes/rose_pine_dawn.css b/themes/rose_pine_dawn.css index e8e2558..1068be4 100644 --- a/themes/rose_pine_dawn.css +++ b/themes/rose_pine_dawn.css @@ -1,4 +1,4 @@ -:root,.card{--main-background: #faf4ed;--secondary-background: #dfdad9;--tabs-label-background: #cecacd;--accent-background: #b4637a;--cloze-background: #286983;--codeline-hover-background: rgb(87, 82, 121, .1);--main-color: #575279;--secondary-color: #797593;--accent-color: #b4637a;--cloze-color: #faf4ed;--h1: #286983;--h2: #ea9d34;--h3: #56949f;--h4: #907aa9;--h5: #b4637a;--h6: #d7827e}:root,.card{--love: #b4637a;--gold: #ea9d34;--rose: #d7827e;--pine: #286983;--foam: #56949f;--iris: #907aa9;--code-background: #faf4ed;--code-text: #575279;--code-comment: #797593}.highlight .hll{background-color:var(--pine)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--love)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--iris);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--gold)}.highlight .o{color:var(--iris);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p,.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--foam)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--love)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--pine)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--iris)}.highlight .kr{color:var(--rose)}.highlight .kt{color:var(--gold)}.highlight .ld{color:var(--code-text)}.highlight .m,.highlight .s,.highlight .na{color:var(--gold)}.highlight .nb{color:var(--love);font-style:italic}.highlight .nc{color:var(--pine)}.highlight .no{color:var(--rose);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--foam);font-style:italic}.highlight .nf{color:var(--pine)}.highlight .nl{color:var(--pine);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py,.highlight .nt{color:var(--love)}.highlight .nv{color:var(--code-text);font-style:italic}.highlight .ow{color:var(--code-comment)}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--gold)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--gold)}.highlight .vc{color:var(--rose);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rose);font-style:italic}.highlight .vm{color:var(--foam);font-style:italic}.highlight .il{color:var(--gold)} +:root,.card{--main-background: #faf4ed;--secondary-background: #dfdad9;--tabs-label-background: #cecacd;--accent-background: #b4637a;--cloze-background: #286983;--codeline-hover-background: rgb(87, 82, 121, .1);--main-color: #575279;--secondary-color: #797593;--accent-color: #b4637a;--cloze-color: #faf4ed;--h1: #286983;--h2: #ea9d34;--h3: #56949f;--h4: #907aa9;--h5: #b4637a;--h6: #d7827e}:root,.card{--love: #b4637a;--gold: #ea9d34;--rose: #d7827e;--pine: #286983;--foam: #56949f;--iris: #907aa9;--code-background: #faf4ed;--code-text: #575279;--code-comment: #797593}.highlight .hll{background-color:var(--pine)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--love)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--iris);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--gold)}.highlight .o{color:var(--iris);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p,.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--foam)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--love)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--pine)}.highlight .kd,.highlight .kn,.highlight .kp{color:var(--iris)}.highlight .kr{color:var(--rose)}.highlight .kt{color:var(--gold)}.highlight .ld{color:var(--code-text)}.highlight .m,.highlight .s,.highlight .na{color:var(--gold)}.highlight .nb{color:var(--love);font-style:italic}.highlight .nc{color:var(--pine)}.highlight .no{color:var(--rose);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--foam);font-style:italic}.highlight .nf{color:var(--pine)}.highlight .nl{color:var(--pine);font-style:italic}.highlight .nn,.highlight .nx{color:var(--code-text)}.highlight .py,.highlight .nt{color:var(--love)}.highlight .nv{color:var(--code-text);font-style:italic}.highlight .ow{color:var(--code-comment)}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--gold)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--gold)}.highlight .vc{color:var(--rose);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--rose);font-style:italic}.highlight .vm{color:var(--foam);font-style:italic}.highlight .il{color:var(--gold)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} /*! This UI theme is based on: Rose' pine palette: https://rosepinetheme.com/palette @@ -11,3 +11,8 @@ Rose' pine palette: https://rosepinetheme.com/palette Custom highlight theme made by @Mochitto, 2023 */ +/*! +This Highlight tokens should be used with: +- Rose Pine +- Rose Pine Dawn + */