├── .gitignore ├── LICENSE ├── README.md ├── licenses ├── LICENSE.APACHE.txt ├── LICENSE.LUCIDE.txt ├── LICENSE.MIT.ProFont.txt ├── LICENSE.OFL.txt └── LICENSE.Vigilante Typeface Corporation.txt ├── metabind └── fate-combat-tracker │ ├── Combat tracker.md │ ├── README.md │ ├── Template - NPC tracking.md │ ├── fate-combat-tracker.css │ └── screenshots │ ├── 2npcs.png │ ├── empty.png │ ├── file-explorer.jpg │ ├── injured.jpg │ ├── overview.png │ └── taken-out.png └── snippets ├── accessibility ├── accessibility-w-style-settings.css ├── accessibility.css └── accessibility.md ├── ascii-art ├── ascii-art-w-style-settings.css ├── ascii-art.css └── ascii-art.md ├── callouts ├── README.md ├── assets license │ ├── fonts.md │ ├── icons.md │ └── images.md ├── callout-autopsy.css ├── callout-blank.css ├── callout-caption.css ├── callout-cards-deck.css ├── callout-cite.css ├── callout-clue.css ├── callout-color │ ├── callout-color.css │ ├── callout-colors.scss │ └── color.md ├── callout-comic.css ├── callout-conversation.css ├── callout-email.css ├── callout-ext-color │ ├── ext-color.md │ ├── ext-colors.css │ └── ext-colors.scss ├── callout-film-strip.css ├── callout-full-width-image.css ├── callout-grid.css ├── callout-letter.css ├── callout-masonry.css ├── callout-paper-fold.css ├── callout-pinned.css ├── callout-poem.css ├── callout-polaroid.css ├── callout-popup.css ├── callout-profile.css ├── callout-screen.css ├── callout-table-cards.css ├── callout-timeline-variant.css ├── callout-timeline.css ├── callout-tooltip.css ├── callouts-metadata.css ├── flashcard │ ├── flashcard-w-style-settings.css │ ├── flashcard.css │ └── flashcard.md ├── font-style │ ├── font-style.css │ ├── font-style.md │ └── font-style.scss ├── font-weight │ ├── font-weight.css │ ├── font-weight.md │ └── font-weight.scss ├── horizontal-alignment │ ├── horiz-align.css │ ├── horiz-align.scss │ └── horizontal.md ├── list-styling │ ├── list-styling.css │ ├── list-styling.md │ └── list-styling.scss ├── popup │ ├── popup-w-style-settings.css │ ├── popup.css │ └── popup.md ├── rm │ ├── rm-icon.css │ ├── rm-title.css │ └── rm.md ├── screenshots │ ├── autopsy-closed.png │ ├── autopsy-empty.png │ ├── autopsy-layout.png │ ├── autopsy-lunairee.png │ ├── autopsy-open.png │ ├── callouts-banner.png │ ├── card-decks-images.gif │ ├── clue-a.png │ ├── clue-b.png │ ├── clue-c.png │ ├── clue-d.png │ ├── comic-layout.png │ ├── comic.png │ ├── email.png │ ├── film-strip.png │ ├── grid.png │ ├── letter.png │ ├── pinned.png │ ├── profile.png │ ├── screen.png │ ├── timeline-horizontal.png │ ├── timeline-variant.png │ └── timeline-vertical.png ├── text-decoration │ ├── text-decoration.css │ ├── text-decoration.md │ └── text-decoration.scss ├── text-transform │ ├── text-transform.css │ ├── text-transform.scss │ └── transform.md ├── title-heading │ ├── title-heading.css │ ├── title-heading.md │ └── title-heading.scss ├── vertical-alignment │ ├── tategaki.css │ ├── vertical-ltr.css │ └── vertical.md └── writing-mode │ ├── writing-mode.css │ └── writing-mode.md ├── dataviewjs-cards-deck ├── README.md ├── dataviewjs-cards-deck.css └── screenshots │ ├── card-decks-embeds.gif │ └── card-decks-images.webp ├── family-tree ├── README.md └── family-tree.css ├── file-explorer-separators ├── README.md ├── file-explorer-separators.css └── screenshots │ ├── centered red number.png │ ├── dashed centered.png │ ├── default.png │ └── dotted right gold.png ├── gradient-text ├── gradient-text.css └── gradient-text.scss ├── list-styling ├── README.md ├── list-styling.css └── screenshots │ ├── active-line.jpg │ ├── banner.png │ ├── custom-font.jpg │ ├── custom-style.jpg │ ├── default-style.jpg │ ├── emojis.jpg │ ├── glow.jpg │ └── lucide-icons.jpg ├── newspaper ├── README.MD ├── newspaper-all-in-one.css ├── newspaper.css └── screenshots │ └── showcase.png ├── note-accent-colors ├── README.md ├── note-accent-colors.css └── screenshots │ ├── banner.png │ ├── note-accent-1.jpg │ ├── note-accent-2.jpg │ ├── note-accent-3.jpg │ ├── note-accent-4.jpg │ ├── note-accent-5.jpg │ ├── note-accent-6.jpg │ └── note-accent-style-settings.jpg ├── tree-view ├── README.md └── tree-view.css ├── tweak-css-variables ├── README.md ├── screenshots │ ├── base_colors.png │ ├── callouts.png │ ├── code.png │ ├── list_1.png │ ├── list_2.png │ ├── settings.png │ └── text_formatting.png ├── tweak-css-variables-style.css └── tweak-css-variables.css └── vim-mode-status ├── vim-mode-status-w-style-settings.css ├── vim-mode-status.css └── vim-mode.md /.gitignore: -------------------------------------------------------------------------------- 1 | scripts.bat 2 | snippets/callouts/callout-fas-infobox.css 3 | snippets/callouts/callout-style.css 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Since I started to spend some time on the Obsidian Discord server, I saw a lot of very cool ideas of customization that are often resolved with css snippets. I try as much as I can to help to make these ideas work, and sometimes I end up with a nice working codes. When I think these snippets/templates could be of use for other people, might be updated frequently, or are worth keeping because they contain tricky targets/rules, I choose to store them here. 2 | 3 | - [Installation](#installation) 4 | - [Updates](#updates) 5 | - [Contact](#contact) 6 | - [Available Snippets](#available-snippets) 7 | * [List styling](#list-styling) 8 | * [Note accent colors](#note-accent-colors) 9 | * [Tweak CSS Variables](#tweak-css-variables) 10 | * [Newspaper](#newspaper) 11 | * [Callouts](#callouts) 12 | * [File Explorer Separators](#file-explorer-separators) 13 | - [Other Stuff](#other-stuff) 14 | * [Fate Core RPG: Combat Tracker](#fate-core-rpg-combat-tracker) 15 | 16 | > [!WARNING] 17 | > I do not promise they will be all working perfectly. We are often only two people trying it, so it's not the best beta test ever made. But I'm staying as much available as I can to fix things if there is any issue. 18 | 19 | # Installation 20 | 21 | Download the `.css` file in the desired folder and add it to your snippets. 22 | Please reffer to the [Obsidian documentation](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) to see how to install a css snippet. 23 | 24 | # Updates 25 | 26 | I usually don't have any road map for these snippet. They are made quickly to help someone and then upgraded a little bit for fun, but I don't necessarily plan on doing more stuff on them, until someone thinks of another nice feature to add. If you like the idea of one of this snippet but you see that it lacks a feature you would love, feel free to contact me. 27 | 28 | If you would like to be contacted in case I update a snippet, so you can download it again, please tell me. I will do my best to not forget. 29 | 30 | # Contact 31 | 32 | > [!NOTE] 33 | > :fr: I am french, so English is not my first language. I apologize for the mistakes I make and I hope I stay understandable. If you would like to offer a better translation, do not hesitate. 34 | 35 | Open an issue in the repo. Please, specify the snippet you want to ask something about. 36 | 37 | Tag me with `@Kapirklaa` in the official Obsidian Discord server. 38 | 39 | 40 | # Available Snippets 41 | 42 | ## [List styling](snippets/list-styling/) 43 | 44 | ![list-styling](snippets/list-styling/screenshots/banner.png) 45 | 46 | ## [Note accent colors](snippets/note-accent-colors/) 47 | 48 | ![note-accent-colors](snippets/note-accent-colors/screenshots/banner.png) 49 | 50 | ## [Tweak CSS Variables](snippets/tweak-css-variables/) 51 | 52 | Expose more than 500 CSS variables through the Style Setting Plugin. 53 | 54 | ![tweak-css-variables](snippets/tweak-css-variables/screenshots/base_colors.png) 55 | 56 | ## [Newspaper](snippets/newspaper/) 57 | 58 | Add a vintage newspaper style to your notes! 59 | 60 | ![showcase](snippets/newspaper/screenshots/showcase.png) 61 | 62 | ## [Callouts](snippets/callouts/) 63 | 64 | Add several new callouts layouts. 65 | (text in the autopsy report is blurred because it can be sensitive content, it's not part of the snippet) 66 | 67 | ![callouts](snippets/callouts/screenshots/callouts-banner.png) 68 | 69 | ## [File explorer separators](snippets/file-explorer-separators/) 70 | 71 | Add separators in your file explorer 72 | 73 | ![file-explorer-separator](snippets/file-explorer-separators/screenshots/default.png) 74 | 75 | # Other Stuff 76 | 77 | ## [Fate Core RPG: Combat Tracker](metabind/fate-combat-tracker/) 78 | 79 | Keep track of NPCs aspects, status and health during a combat with the Fate Core System. 80 | 81 | ![fate-combat-tracker](metabind/fate-combat-tracker/screenshots/overview.png) 82 | 83 | # License 84 | 85 | Collection of CSS snippets for Obsidian 86 | Copyright (C) 2024 Kapirklaa 87 | 88 | This program is free software: you can redistribute it and/or modify 89 | it under the terms of the GNU General Public License as published by 90 | the Free Software Foundation, either version 3 of the License, or 91 | (at your option) any later version. 92 | 93 | This program is distributed in the hope that it will be useful, 94 | but WITHOUT ANY WARRANTY; without even the implied warranty of 95 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 96 | GNU General Public License for more details. 97 | 98 | You should have received a copy of the GNU General Public License 99 | along with this program. If not, see . 100 | -------------------------------------------------------------------------------- /licenses/LICENSE.LUCIDE.txt: -------------------------------------------------------------------------------- 1 | Lucide License 2 | 3 | ISC License 4 | 5 | Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022. 6 | 7 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. -------------------------------------------------------------------------------- /licenses/LICENSE.MIT.ProFont.txt: -------------------------------------------------------------------------------- 1 | ProFont 2 | MIT License 3 | 4 | Copyright (c) 2014 Carl Osterwald, Stephen C. Gilardi, Andrew Welch 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /licenses/LICENSE.OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010, Toshi Omagari (tosche@mac.com) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | https://openfontlicense.org 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /licenses/LICENSE.Vigilante Typeface Corporation.txt: -------------------------------------------------------------------------------- 1 | This typeface is what I like to call Distro-Ware. 2 | Which means you can do whatever ya want with the type- 3 | face with the sole exception or re-selling it. 4 | Use however ya wish on as many computers as ya wish 5 | and give it to as many people as ya wish =) 6 | If you would like to include this font on your website 7 | as a give-away feel free, as long as this documentation 8 | reamains with the font! A Link back to my website listed 9 | below would be nice also =) thanks! 10 | 11 | regards, 12 | WolfBainX 13 | V.T.C. 14 | Vigilante Typeface Corporation 15 | http://members.xoom.com/wolfbainx 16 | email- Wolfbainx@aol.com 17 | All comments,suggestions, flames enthusiastically welcomed! -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/README.md: -------------------------------------------------------------------------------- 1 | - [How to install](#how-to-install) 2 | - [How to use](#how-to-use) 3 | - [Known issues](#known-issues) 4 | - [Future features](#future-features) 5 | 6 | I recently started to DM on the [Fate Core](https://fate-srd.com/fate-core) system, and at some point we had our first fight. I'm terrible at DMing combat scenes, even more keeping track of everything that is going on. 7 | 8 | So I decided to create a tool with Obsidian, [Meta Bind](https://github.com/mProjectsCode/obsidian-meta-bind-plugin) and the [JS Engine](https://github.com/mProjectsCode/obsidian-js-engine-plugin). 9 | 10 | ## How to install 11 | 12 | Copy the `Combat tracker.md` in your Vault, wherever you want it. 13 | > [!IMPORTANT] 14 | > Do not remove the properties `sheetsPrevFolder` and `sheetsPrevPrefix`. They are used to prevent the reset of the Meta Bind block that seems to be randomly triggered, I still don't know why. So for now, they are needed for a fix. 15 | 16 | Optionally, you can also copy the file `Template - NPC tracking.md` to create every property in one go, but if you don't they should be created when you modify them. 17 | 18 | Also, you can add the file `fate-combat-tracker.css` to your [snippets](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) to give it a more Fade vibe, as seen in the screnshots. 19 | I'm using the [official logo](https://fate-srd.com/official-licensing-fate) in the background. If you don't want it (it's an online link), remove the begining of the snippet between the corresponding comments. 20 | > Fate™ is a trademark of Evil Hat Productions, LLC. The Powered by Fate logo is © Evil Hat Productions, LLC and is used with permission. 21 | 22 | ## How to use 23 | 24 | - `nNPCs` is the number of tracking sheets to show. Best is to change it with the buttons, so the corresponding sheets are created. 25 | - `sheetsFolder` is where your NPCs tracking sheets will be created. Be careful about lower/uppercase, see below in [Known issues](#known-issues). 26 | - `sheetsPrefix` is the prefix for the notes that will be created, suffixed by 1, 2, 3, etc. 27 | 28 | ![empty](screenshots/empty.png) 29 | 30 | Once you are all set up, you can start adding NPCs. Files are automatically created, but never deleted. This way, you can keep track of the combat even after starting a new one, by going back to the tracking sheets and see who was injured, who learned something, etc. 31 | If you want to stop a file from being used by the tracker to "save" the state of the tracking sheet, just rename the file so it doesn't match anymore the pattern "` n`". 32 | 33 | ![2npcs](screenshots/2npcs.png) 34 | 35 | 36 | You can now fill up any information that happens during a fight. 37 | 38 | When a NPC doesn't have anymore Stress or Consequence box to check, the block turns red. 39 | 40 | ![injured](screenshots/injured.jpg) 41 | 42 | Corresponding frontmatter is updated 43 | ```md 44 | --- 45 | consequence2: true 46 | stress1: true 47 | stress2: true 48 | stress3: true 49 | consequence4: true 50 | consequence6: true 51 | name: John Doe 52 | concept: Most famous anonymous 53 | aspect1: A man of many tweens 54 | trouble: Who am I? 55 | aspect2: No fingerprints 56 | otherAspects: 57 | - type: Character 58 | name: I know the PCs 59 | value: 2 60 | - type: Consequence 61 | value: 2 62 | namefreeInvocation: 1 63 | name: Paper cut between fingers 64 | - type: Consequence 65 | value: 4 66 | name: Broken arm 67 | - value: 2 68 | type: Situation 69 | name: Soap on the floor 70 | - type: Boost 71 | name: PC 1 stunned 72 | namefreeInvocation: 1 73 | - type: Consequence 74 | value: 6 75 | name: Gouged out eye 76 | takenOut: false 77 | --- 78 | ``` 79 | 80 | And if you want to take an NPC out from the fight, click the "Taken out" button. This will grey out the block as well as removing the whole content so you have more space for the remaining characters still fighting. 81 | 82 | ![taken-out](screenshots/taken-out.png) 83 | 84 | ## Known issues 85 | 86 | - Obsidian API find files and folders search is case sensitive search, but the creation is not. Which means that when working with the folder "Final Boss" when the folder "Final boss" exists won't work. So be careful about the case of your properties and don't use a case-variation of something already existing. 87 | - Meta Bind blocks are reactive, which means they update when the properties are changed. However, I detected updates even when properties didn't change, or at least not in the file (I suspect an update in the cache). This would trigger a reset of the number of shown enemies. As a workaround, I created two properties `sheetsPrevFolder` and `sheetsPrevPrefix` to compare with the previous value before triggerring the refresh of the block. This values are hidden if you use the provided snippet. 88 | - When deleting/moving files that are currently shown in the tracker, binding will be broken and errors will appear. Make sure to refresh when this happens. 89 | 90 | ## Future features 91 | 92 | - **Collapsible sections**: For now, I haven't found how to create collapsible callouts with the JS Engine. But I'm hoping to be able to do that at some point. The "Taken out" checkbox can be used as such but that's not is primary purpose. 93 | - **Customizable Meta Bind template**: The specific sub-code that is used to create the Metabind elements is currently hidden in all the rest of the JS Engine code. My goal is to extract this part in another place and inject it in the final code. This way, it will be easier for anyone to modify the layout and the inputs, and adapt the tracker to other needs/systems. 94 | - **Reset tracking sheet**: Add a button to reset all values to their default. 95 | -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/Template - NPC tracking.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "" 3 | concept: "" 4 | trouble: "" 5 | aspect1: "" 6 | aspect2: "" 7 | aspect3: "" 8 | stress1: false 9 | stress2: false 10 | stress3: false 11 | consequence2: false 12 | consequence4: false 13 | consequence6: false 14 | otherAspects: [] 15 | takenOut: false 16 | --- 17 | -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/2npcs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/2npcs.png -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/empty.png -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/file-explorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/file-explorer.jpg -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/injured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/injured.jpg -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/overview.png -------------------------------------------------------------------------------- /metabind/fate-combat-tracker/screenshots/taken-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/metabind/fate-combat-tracker/screenshots/taken-out.png -------------------------------------------------------------------------------- /snippets/accessibility/accessibility-w-style-settings.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Accessibility 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | /* @settings 7 | name: Flexcyon Snippets - Accessibility 8 | id: flexcyon-snippets-5 9 | settings: 10 | - title: Accessibility 11 | type: heading 12 | description: Toggle accessibility options 13 | level: 5 14 | - title: Global brightness ratio 15 | type: variable-number 16 | id: flexcyon-brightness-ratio 17 | default: 1 18 | - title: Global contrast ratio 19 | type: variable-number 20 | id: flexcyon-contrast-ratio 21 | default: 1 22 | - title: Global saturation ratio 23 | type: variable-number 24 | id: flexcyon-saturation-ratio 25 | default: 1 26 | */ 27 | 28 | body { 29 | --flexcyon-contrast-ratio: 1; 30 | --flexcyon-brightness-ratio: 1; 31 | --flexcyon-saturation-ratio: 1; 32 | } 33 | 34 | body { 35 | filter: contrast(var(--flexcyon-contrast-ratio)) brightness(var(--flexcyon-brightness-ratio)) saturate(var(--flexcyon-saturation-ratio)); 36 | } -------------------------------------------------------------------------------- /snippets/accessibility/accessibility.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Accessibility 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-contrast-ratio: 1; 8 | --flexcyon-brightness-ratio: 1; 9 | --flexcyon-saturation-ratio: 1; 10 | } 11 | 12 | body { 13 | filter: contrast(var(--flexcyon-contrast-ratio)) brightness(var(--flexcyon-brightness-ratio)) saturate(var(--flexcyon-saturation-ratio)); 14 | } -------------------------------------------------------------------------------- /snippets/accessibility/accessibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_style_settings: true 6 | --- 7 | # Vim Mode Status 8 | 9 | ## With Style Settings support 10 | [View file here](./accessibility-w-style-settings.css) 11 | 12 | ## Without Style Settings support 13 | [View file here](./accessibility.css) 14 | 15 | -------------------------------------------------------------------------------- /snippets/ascii-art/ascii-art-w-style-settings.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - New Tab ASCII Art with Style settings support 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | /* @settings 7 | name: Flexcyon Snippets - ASCII Art 8 | id: flexcyon-snippets-1 9 | settings: 10 | - title: Enable ASCII Art 11 | type: class-toggle 12 | id: flexcyon-ascii-enable 13 | default: true 14 | - title: ASCII Art 15 | id: flexcyon-ascii-art 16 | description: ASCII art to display in new tab 17 | type: variable-text 18 | default: " \a\ 19 | _______________ \a\ 20 | ___ ____/__ /________ ____________ ______________ \a\ 21 | __ /_ __ /_ _ \\_ |/_/ ___/_ / / / __ \\_ __ \\ \a\ 22 | _ __/ _ / / __/_> < / /__ _ /_/ // /_/ / / / / \a\ 23 | /_/ /_/ \\___//_/|_| \\___/ _\\__, / \\____//_/ /_/ \a\ 24 | /____/ \a\a\a " 25 | quotes: true 26 | - title: ASCII art font size limit 27 | description: The maximum size of the ASCII art 28 | id: flexcyon-ascii-max-font-size 29 | type: variable-number 30 | default: 14 31 | format: px 32 | - title: ASCII art line height 33 | description: The line height of the ASCII art and quotes. 34 | id: flexcyon-ascii-line-height 35 | type: variable-number 36 | default: 1 37 | */ 38 | 39 | body { 40 | --flexcyon-ascii-max-font-size: 14px; 41 | --flexcyon-ascii-line-height: 1; 42 | --flexcyon-ascii-art: " \a\ 43 | _______________ \a\ 44 | ___ ____/__ /________ ____________ ______________ \a\ 45 | __ /_ __ /_ _ \\_ |/_/ ___/_ / / / __ \\_ __ \\ \a\ 46 | _ __/ _ / / __/_> < / /__ _ /_/ // /_/ / / / / \a\ 47 | /_/ /_/ \\___//_/|_| \\___/ _\\__, / \\____//_/ /_/ \a\ 48 | /____/ \a\a\a "; 49 | --flexcyon-new-tab-bg-wrapper: linear-gradient(to right, var(--text-accent), var(--color-blue), var(--color-cyan)); 50 | 51 | div.empty-state-action { 52 | font-size: 1.05rem; 53 | color: var(--text-accent); 54 | opacity: 0.95; 55 | } 56 | div.empty-state-title { 57 | font-size: 1.25rem; 58 | } 59 | 60 | } 61 | 62 | body.flexcyon-ascii-enable { 63 | div.empty-state-title { 64 | display: unset; 65 | } 66 | 67 | div.empty-state-container::before { 68 | font-family: monospace; 69 | content: var(--flexcyon-ascii-art); 70 | font-weight: bold; 71 | background: var(--flexcyon-new-tab-bg-wrapper); 72 | background-clip: text; 73 | -webkit-text-fill-color: transparent; 74 | line-height: var(--flexcyon-ascii-line-height); 75 | white-space: pre; 76 | margin-bottom: 2rem; 77 | text-align: center; 78 | display: inline; 79 | font-size: min(calc(3vw - 3.25px), var(--flexcyon-ascii-max-font-size)); 80 | } 81 | 82 | div.empty-state-container { 83 | transform: translateY(-115px); 84 | } 85 | } -------------------------------------------------------------------------------- /snippets/ascii-art/ascii-art.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - New Tab ASCII Art 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-ascii-max-font-size: 14px; 8 | --flexcyon-ascii-line-height: 1; 9 | --flexcyon-ascii-art: " \a\ 10 | _______________ \a\ 11 | ___ ____/__ /________ ____________ ______________ \a\ 12 | __ /_ __ /_ _ \\_ |/_/ ___/_ / / / __ \\_ __ \\ \a\ 13 | _ __/ _ / / __/_> < / /__ _ /_/ // /_/ / / / / \a\ 14 | /_/ /_/ \\___//_/|_| \\___/ _\\__, / \\____//_/ /_/ \a\ 15 | /____/ \a\a\a "; 16 | --flexcyon-new-tab-bg-wrapper: linear-gradient(to right, var(--text-accent), var(--color-blue), var(--color-cyan)); 17 | 18 | div.empty-state-action { 19 | font-size: 1.05rem; 20 | color: var(--text-accent); 21 | opacity: 0.95; 22 | } 23 | div.empty-state-title { 24 | font-size: 1.25rem; 25 | } 26 | 27 | } 28 | 29 | body { 30 | div.empty-state-title { 31 | display: unset; 32 | } 33 | 34 | div.empty-state-container::before { 35 | font-family: monospace; 36 | content: var(--flexcyon-ascii-art); 37 | font-weight: bold; 38 | background: var(--flexcyon-new-tab-bg-wrapper); 39 | background-clip: text; 40 | -webkit-text-fill-color: transparent; 41 | line-height: var(--flexcyon-ascii-line-height); 42 | white-space: pre; 43 | margin-bottom: 2rem; 44 | text-align: center; 45 | display: inline; 46 | font-size: min(calc(3vw - 3.25px), var(--flexcyon-ascii-max-font-size)); 47 | } 48 | 49 | div.empty-state-container { 50 | transform: translateY(-115px); 51 | } 52 | } -------------------------------------------------------------------------------- /snippets/ascii-art/ascii-art.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - license: GPLv3 4 | - source: https://github.com/bladeacer/flexcyon 5 | --- 6 | # ASCII Art in New Tab 7 | 8 | ## With Style Settings support 9 | 10 | [View this file](./ascii-art-w-style-settings.css) 11 | 12 | ## Without Style Settings support 13 | 14 | [View this file](./ascii-art.css) 15 | 16 | ```css 17 | ``` 18 | -------------------------------------------------------------------------------- /snippets/callouts/README.md: -------------------------------------------------------------------------------- 1 | You will find in this folder several snippets to add new stylized callouts to your notes. 2 | 3 | # Usage 4 | 5 | Choose the snippets you want and include them in your `.obsidian/snippets/` folder. Since all of those callouts are now part of the theme, the documentation has moved to the theme documentation: https://elsatam.github.io/obsidian-fancy-a-story/docs/callouts/callouts.html 6 | You can see all available callouts in the following gallery: https://elsatam.github.io/obsidian-fancy-a-story/docs/callouts/callouts-gallery.html (wait a few seconds for it to load properly). The result without the theme might be a little bit different but should work just fine. 7 | 8 | # Assets 9 | 10 | For styling effects, several of these snippets use images and specific fonts. As much as I can, I tried to embed them directly when I found free to use assets. You can find any source and licenses in the folder [assets license/](assets%20license/). 11 | 12 | If any, the assets are always embed at the bottom of any css file. Sometimes, callouts come in different variants to pick one image among several. When this is the case, snippets can become heavy because they embed several images (see the `clue` callout for example). I tried as much as I could to reduce them using webp format, but still it can slow down the styling. Feel free to choose only one and remove the others if you know you won't use them. 13 | 14 | # Compatibility issues 15 | 16 | Some theme applies custom style to callouts. I can't test them all. So if you see any breaking when using a snippet, please open an issue or contact me on Discord and I will make the needed changes. 17 | 18 | An other possible conflict is if other themes are using the same keywords than my snippets. Then things will get messy. You can change the used name in the css snippet. They are all using nested CSS code, so it should be easy to find the keyword to change, look for anything like `.callout[data-callout="keyword"]`. -------------------------------------------------------------------------------- /snippets/callouts/assets license/fonts.md: -------------------------------------------------------------------------------- 1 | Homemade Apple 2 | -------------- 3 | 4 | **Source**: https://fonts.google.com/specimen/Homemade+Apple 5 | **License**: Licensed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0). 6 | **Used in**: 7 | - callout-letter.css 8 | 9 | ProFont 10 | ------- 11 | 12 | **Source**: https://tobiasjung.name/profont/index.php 13 | **License**: ProFont is published using the [MIT license](https://opensource.org/license/mit) (since 2014), allowing you to copy and modify ProFont without limitation (see included LICENSE file for more information). 14 | **Used in**: 15 | - callout-screen.css 16 | 17 | Secret Typewriter 18 | ----------------- 19 | 20 | **Source**: https://www.fontsquirrel.com/fonts/Secret-Typewriter 21 | **License**: "Free to use personal and commercial works to. But you can't sell them direktly. Please don't make illegal copies of the fonts. Thankx and regards: Koczman Bálint (Cpr.Sparhelt)" 22 | **Used in** 23 | - callout-pinned.css 24 | 25 | Tangerine 26 | --------- 27 | 28 | **Source**: https://fonts.google.com/specimen/Tangerine 29 | **License**: Licensed under the [Open Font License](https://openfontlicense.org/). 30 | **Used in** 31 | - callout-letter.css 32 | 33 | TT2020StyleE 34 | ------------ 35 | 36 | **Source**: https://copypaste.wtf/TT2020/docs/download.html 37 | **License**: The font is licensed under the [SIL Open Font License](https://openfontlicense.org/#5667e9e4), version 1.1. 38 | **Used in** 39 | - callout-pinned.css 40 | 41 | VTC Letterer Pro 42 | ---------------- 43 | 44 | **Source**: https://www.fontsquirrel.com/fonts/VTC-Letterer-Pro 45 | **License (copy)**: "This typeface is what I like to call Distro-Ware. 46 | Which means you can do whatever ya want with the type- 47 | face with the sole exception or re-selling it." 48 | **Used in**: 49 | - callout-comic.css -------------------------------------------------------------------------------- /snippets/callouts/assets license/icons.md: -------------------------------------------------------------------------------- 1 | Lucide Icons 2 | ------------ 3 | 4 | **Source**: https://lucide.dev/ 5 | **License**: https://lucide.dev/license 6 | **Used in**: 7 | - callout-letter.css 8 | - `mail-open` 9 | - `mail` (modified) 10 | 11 | Feather Icons 12 | ------------- 13 | 14 | **Source**: https://commons.wikimedia.org/wiki/File:Feather_writing.svg 15 | **License**: This file is from the [Open Clip Art Library](https://openclipart.org/), which released it explicitly into the public domain ([see here](https://openclipart.org/share)). 16 | **Used in** 17 | - callout-letter.css (modified) 18 | 19 | Pushpin 20 | ------- 21 | 22 | **Source**: https://openclipart.org/detail/33601/pushpin-2 23 | **License**: This file is from the [Open Clip Art Library](https://openclipart.org/), which released it explicitly into the public domain ([see here](https://openclipart.org/share)). 24 | **Used in**: 25 | - callout-pinned.css (modified) -------------------------------------------------------------------------------- /snippets/callouts/assets license/images.md: -------------------------------------------------------------------------------- 1 | Clue paper backgrounds 2 | ---------------------- 3 | 4 | **Source**: https://www.tilingtextures.com/tt_blog/24-free-seamless-paper-texture-in-high-resolution/ 5 | **License**: All textures in this article are free for commercial and non-commercial use, but what you are not allowed is to provide the texture as it is on any website, application in a complete or archived downloadable format, and to sell or distribute original or slightly modified images alone or in packs. 6 | **Used in**: 7 | - callout-clue.css 8 | 9 | Clue tape backgrounds 10 | --------------------- 11 | 12 | **Source**: https://www.freeject.net/2020/06/free-download-8-paper-tape-transparent.html 13 | **License**: All project in freejct (included DEMO) are free to use for personal or commercial. Attribution is not required. May not redistribute or sell to other stock websites. Edit first before publication. If any changes will be updated on [the license page](https://www.freeject.net/p/lisen.html). 14 | **Used in**: 15 | - callout-clue.css 16 | 17 | Letter background 18 | ----------------- 19 | 20 | **Source**: https://www.freepik.com/free-photo/white-recycle-paper-texture_1035101.htm 21 | **License**: https://www.freepik.com/legal/terms-of-use 22 | **Used in**: 23 | - callout-letter.css (modified, secondary element) 24 | 25 | Anatomy body schema 26 | ------------------- 27 | 28 | **Source**: https://commons.wikimedia.org/wiki/File:Human_body_with_blank_labels.svg 29 | **License**: This file is made available under the Creative Commons [CC0 1.0 Universal Public Domain Dedication](https://creativecommons.org/publicdomain/zero/1.0/deed.en). 30 | **Use in**: 31 | - callout-autopsy.css (modified) 32 | -------------------------------------------------------------------------------- /snippets/callouts/callout-blank.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Blank 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | .callout[data-callout=blank] { 6 | margin: 0; 7 | padding: 0; 8 | border: none; 9 | background: none; 10 | } 11 | .callout[data-callout=blank] > .callout-content { 12 | padding: 0; 13 | background: none; 14 | border: none; 15 | } 16 | .callout[data-callout=blank] > .callout-title { 17 | display: none; 18 | } 19 | -------------------------------------------------------------------------------- /snippets/callouts/callout-caption.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Caption 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --workleaves-background: var(--background-primary); 7 | --workleaves-foreground: var(--text-normal); 8 | } 9 | 10 | .callout[data-callout=caption] { 11 | border: none; 12 | background: none; 13 | --p-spacing: 0; 14 | display: flex; 15 | flex-direction: column-reverse; 16 | } 17 | .callout[data-callout=caption] .callout-title { 18 | font-size: 0.8em; 19 | display: block; 20 | width: fit-content; 21 | margin-inline-end: auto; 22 | font-style: italic; 23 | border-bottom: 1px dashed rgb(var(--callout-color)); 24 | background-color: color-mix(in srgb, var(--workleaves-background), rgb(var(--callout-color)) 20%); 25 | inset-block-start: calc(-1 * var(--image-shadow-offset, 0px)); 26 | padding-inline-start: 0.4em; 27 | padding-inline-end: 1.5em; 28 | padding-block: 0.2em; 29 | margin-top: 0; 30 | position: relative; 31 | z-index: 2; 32 | border-left: 1px solid rgb(var(--callout-color)); 33 | } 34 | .callout[data-callout=caption] .callout-icon { 35 | display: none; 36 | } 37 | .callout[data-callout=caption] .callout-content { 38 | padding: 0; 39 | border: none; 40 | border-left: 1px solid rgb(var(--callout-color)); 41 | } 42 | 43 | .callout[data-callout=caption][data-callout-metadata~=accent] .callout-title { 44 | border-bottom: 1px dashed var(--color-accent); 45 | background-color: color-mix(in srgb, var(--workleaves-background), var(--color-accent) 20%); 46 | border-left: 1px solid var(--color-accent); 47 | } 48 | .callout[data-callout=caption][data-callout-metadata~=accent] .callout-content { 49 | border-left: 1px solid var(--color-accent); 50 | } 51 | 52 | .callout[data-callout=caption] p { 53 | font-size: 0; 54 | } 55 | -------------------------------------------------------------------------------- /snippets/callouts/callout-cards-deck.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Cards deck 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | .callout[data-callout=cards-deck] { 6 | --callout-icon: lucide-layers; 7 | --deck-border-width: 1px; 8 | --callout-border-width: var(--deck-border-width); 9 | --border-color-hover: rgb(var(--callout-color)); 10 | --p-spacing: 0; 11 | --card-gap: 30px; 12 | --card-width: 70px; 13 | --card-height: 100px; 14 | } 15 | 16 | .callout[data-callout=cards-deck] .callout-content { 17 | overflow: visible; 18 | } 19 | 20 | .callout[data-callout=cards-deck] .callout-content > p { 21 | padding-bottom: var(--padding-bottom); 22 | padding-top: var(--padding-top); 23 | padding-left: var(--padding-left); 24 | padding-right: var(--padding-right); 25 | --border-color: currentColor; 26 | --card-radius: var(--radius-l); 27 | --card-scale-hover: 1.1; 28 | --card-shadow-offset-y: 2px; 29 | --card-shadow-offset-x: -2px; 30 | --card-shadow-blur: 3px; 31 | --card-shadow-opacity: 0.2; 32 | --card-base-translation: calc(-0.5 * (var(--card-width) - var(--card-gap))); 33 | --deck-scrollbar-width: 10px; 34 | --padding-scale-factor: (var(--card-scale-hover) - 1) * var(--card-height); 35 | color: var(--text-muted); 36 | height: calc((var(--card-height) + var(--card-shadow-offset-y) * 2 + var(--card-shadow-blur) * 2) * var(--card-scale-hover) + var(--padding-bottom) + 2 * var(--deck-border-width)); 37 | display: flex; 38 | align-items: center; 39 | justify-content: left; 40 | overflow-x: auto; 41 | --padding-bottom: max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-y) + var(--padding-scale-factor)); 42 | --padding-top: max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-y) + var(--padding-scale-factor)); 43 | --padding-left: calc(-1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-x))); 44 | --padding-right: calc(-1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-x))); 45 | } 46 | .callout[data-callout=cards-deck] .callout-content > p > * { 47 | width: var(--card-gap); 48 | transition: transform 0.5s ease-in-out; 49 | transform: translateX(var(--card-base-translation)); 50 | transform-origin: right; 51 | } 52 | .callout[data-callout=cards-deck] .callout-content > p > :hover { 53 | transform: translateX(var(--card-base-translation)) scale(var(--card-scale-hover)); 54 | } 55 | .callout[data-callout=cards-deck] .callout-content > p > :hover ~ * { 56 | transform: translateX(var(--card-base-translation)) translateX(calc(var(--card-width) - var(--card-gap))); 57 | } 58 | .callout[data-callout=cards-deck] .callout-content > p a { 59 | font-size: 0; 60 | } 61 | .callout[data-callout=cards-deck] .callout-content > p > span, 62 | .callout[data-callout=cards-deck] .callout-content > p > a > span { 63 | transition: transform 0.5s ease-in-out, filter 0.2s linear; 64 | height: var(--card-height); 65 | vertical-align: middle; 66 | } 67 | .callout[data-callout=cards-deck] .callout-content > p img { 68 | border-radius: var(--card-radius); 69 | border: 1px solid var(--border-color); 70 | box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity)); 71 | max-width: var(--card-width); 72 | height: var(--card-height); 73 | object-fit: cover; 74 | object-position: center center; 75 | } 76 | 77 | body:not(.is-ios) .callout[data-callout=cards-deck] .callout-content > p::-webkit-scrollbar { 78 | width: var(--deck-scrollbar-width); 79 | height: var(--deck-scrollbar-width); 80 | } 81 | 82 | /* Remove code bellow in case of performance issues */ 83 | .callout[data-callout=cards-deck] .callout-content > p > span > img:hover, 84 | .callout[data-callout=cards-deck] .callout-content > p > a > span > img:hover { 85 | --border-color: var(--border-color-hover); 86 | } 87 | .callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover) { 88 | filter: saturate(0.2); 89 | } 90 | .callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover), .callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover) .markdown-preview-view { 91 | color: var(--text-faint); 92 | } 93 | .callout[data-callout=cards-deck] .callout-content > p > :hover ~ * { 94 | z-index: 0; 95 | } 96 | .callout[data-callout=cards-deck] .callout-content > p:hover { 97 | z-index: 1; 98 | } 99 | 100 | /* Fixes for themes */ 101 | /* Minimal */ /* 102 | .callout[data-callout=cards-deck] { 103 | --image-muted: 1; 104 | } 105 | .markdown-preview-view.is-readable-line-width .markdown-preview-sizer .callout[data-callout=cards-deck] img, 106 | .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .callout[data-callout=cards-deck] img { 107 | max-width: unset; 108 | }/**/ 109 | -------------------------------------------------------------------------------- /snippets/callouts/callout-cite.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* GPLv3 license 3 | FAS - Callout Cite 4 | Author: ElsaTam (Kapirklaa in Discord) 5 | */ 6 | body { 7 | --cite-decoration-width: 50px; 8 | } 9 | 10 | .is-mobile { 11 | --cite-decoration-width: 30px; 12 | } 13 | 14 | .callout[data-callout~=cite], 15 | .callout[data-callout~=quote] { 16 | font-style: italic; 17 | position: relative; 18 | padding-inline-start: calc(var(--cite-decoration-width) + 5px); 19 | background: none; 20 | border: none; 21 | border-inline-start: var(--blockquote-border-thickness) solid var(--blockquote-border-color); 22 | } 23 | .callout[data-callout~=cite] .callout-title, 24 | .callout[data-callout~=quote] .callout-title { 25 | display: none; 26 | } 27 | .callout[data-callout~=cite] .callout-content, 28 | .callout[data-callout~=quote] .callout-content { 29 | border: none; 30 | padding: 0; 31 | } 32 | .callout[data-callout~=cite] .callout-content > :first-child, 33 | .callout[data-callout~=quote] .callout-content > :first-child { 34 | margin-top: 0; 35 | } 36 | .callout[data-callout~=cite] .callout-content > :plast-child, 37 | .callout[data-callout~=quote] .callout-content > :plast-child { 38 | margin-bottom: 0; 39 | } 40 | .callout[data-callout~=cite] cite::after, 41 | .callout[data-callout~=quote] cite::after { 42 | content: "“"; 43 | position: absolute; 44 | font-style: italic; 45 | text-align: left; 46 | font-size: calc(var(--cite-decoration-width) * 2); 47 | line-height: 1; 48 | top: 0; 49 | bottom: 0; 50 | left: 0; 51 | width: var(--cite-decoration-width); 52 | color: var(--color-accent); 53 | font-family: Arial, Helvetica, sans-serif; 54 | background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1); 55 | } 56 | .callout[data-callout~=cite] cite, 57 | .callout[data-callout~=quote] cite { 58 | display: block; 59 | margin-top: 10px; 60 | font-style: normal; 61 | color: var(--text-muted); 62 | text-align: right; 63 | } 64 | -------------------------------------------------------------------------------- /snippets/callouts/callout-color/callout-color.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Callout Colors 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | body { 6 | --flexcyon-callout-bg-opacity: 20%; 7 | } 8 | 9 | div.callout[data-callout-metadata*=all-yellow], 10 | div.callout[data-callout-metadata*=bg-yellow] { 11 | background-color: rgba(var(--color-yellow-rgb), var(--flexcyon-callout-bg-opacity)); 12 | } 13 | 14 | div.callout[data-callout-metadata*=all-yellow] .callout-title, 15 | div.callout[data-callout-metadata*=all-yellow] .callout-icon .svg-icon, 16 | div.callout[data-callout-metadata*=title-yellow] .callout-title, 17 | div.callout[data-callout-metadata*=title-yellow] .callout-icon .svg-icon { 18 | color: var(--color-yellow); 19 | } 20 | 21 | div.callout[data-callout-metadata*=all-blue], 22 | div.callout[data-callout-metadata*=bg-blue] { 23 | background-color: rgba(var(--color-blue-rgb), var(--flexcyon-callout-bg-opacity)); 24 | } 25 | 26 | div.callout[data-callout-metadata*=all-blue] .callout-title, 27 | div.callout[data-callout-metadata*=all-blue] .callout-icon .svg-icon, 28 | div.callout[data-callout-metadata*=title-blue] .callout-title, 29 | div.callout[data-callout-metadata*=title-blue] .callout-icon .svg-icon { 30 | color: var(--color-blue); 31 | } 32 | 33 | div.callout[data-callout-metadata*=all-purple], 34 | div.callout[data-callout-metadata*=bg-purple] { 35 | background-color: rgba(var(--color-purple-rgb), var(--flexcyon-callout-bg-opacity)); 36 | } 37 | 38 | div.callout[data-callout-metadata*=all-purple] .callout-title, 39 | div.callout[data-callout-metadata*=all-purple] .callout-icon .svg-icon, 40 | div.callout[data-callout-metadata*=title-purple] .callout-title, 41 | div.callout[data-callout-metadata*=title-purple] .callout-icon .svg-icon { 42 | color: var(--color-purple); 43 | } 44 | 45 | div.callout[data-callout-metadata*=all-red], 46 | div.callout[data-callout-metadata*=bg-red] { 47 | background-color: rgba(var(--color-red-rgb), var(--flexcyon-callout-bg-opacity)); 48 | } 49 | 50 | div.callout[data-callout-metadata*=all-red] .callout-title, 51 | div.callout[data-callout-metadata*=all-red] .callout-icon .svg-icon, 52 | div.callout[data-callout-metadata*=title-red] .callout-title, 53 | div.callout[data-callout-metadata*=title-red] .callout-icon .svg-icon { 54 | color: var(--color-red); 55 | } 56 | 57 | div.callout[data-callout-metadata*=all-cyan], 58 | div.callout[data-callout-metadata*=bg-cyan] { 59 | background-color: rgba(var(--color-cyan-rgb), var(--flexcyon-callout-bg-opacity)); 60 | } 61 | 62 | div.callout[data-callout-metadata*=all-cyan] .callout-title, 63 | div.callout[data-callout-metadata*=all-cyan] .callout-icon .svg-icon, 64 | div.callout[data-callout-metadata*=title-cyan] .callout-title, 65 | div.callout[data-callout-metadata*=title-cyan] .callout-icon .svg-icon { 66 | color: var(--color-cyan); 67 | } 68 | 69 | div.callout[data-callout-metadata*=all-pink], 70 | div.callout[data-callout-metadata*=bg-pink] { 71 | background-color: rgba(var(--color-pink-rgb), var(--flexcyon-callout-bg-opacity)); 72 | } 73 | 74 | div.callout[data-callout-metadata*=all-pink] .callout-title, 75 | div.callout[data-callout-metadata*=all-pink] .callout-icon .svg-icon, 76 | div.callout[data-callout-metadata*=title-pink] .callout-title, 77 | div.callout[data-callout-metadata*=title-pink] .callout-icon .svg-icon { 78 | color: var(--color-pink); 79 | } 80 | 81 | div.callout[data-callout-metadata*=all-green], 82 | div.callout[data-callout-metadata*=bg-green] { 83 | background-color: rgba(var(--color-green-rgb), var(--flexcyon-callout-bg-opacity)); 84 | } 85 | 86 | div.callout[data-callout-metadata*=all-green] .callout-title, 87 | div.callout[data-callout-metadata*=all-green] .callout-icon .svg-icon, 88 | div.callout[data-callout-metadata*=title-green] .callout-title, 89 | div.callout[data-callout-metadata*=title-green] .callout-icon .svg-icon { 90 | color: var(--color-green); 91 | } 92 | 93 | div.callout[data-callout-metadata*=all-orange], 94 | div.callout[data-callout-metadata*=bg-orange] { 95 | background-color: rgba(var(--color-orange-rgb), var(--flexcyon-callout-bg-opacity)); 96 | } 97 | 98 | div.callout[data-callout-metadata*=all-orange] .callout-title, 99 | div.callout[data-callout-metadata*=all-orange] .callout-icon .svg-icon, 100 | div.callout[data-callout-metadata*=title-orange] .callout-title, 101 | div.callout[data-callout-metadata*=title-orange] .callout-icon .svg-icon { 102 | color: var(--color-orange); 103 | } 104 | -------------------------------------------------------------------------------- /snippets/callouts/callout-color/callout-colors.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Callout Colors 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-callout-bg-opacity: 20%; 8 | } 9 | 10 | @mixin callout-color($color-name, $color-var) { 11 | 12 | div.callout[data-callout-metadata*="all-#{$color-name}"], 13 | div.callout[data-callout-metadata*="bg-#{$color-name}"] { 14 | background-color: rgba(var(--#{$color-var}-rgb), var(--flexcyon-callout-bg-opacity)); 15 | } 16 | 17 | div.callout[data-callout-metadata*="all-#{$color-name}"], 18 | div.callout[data-callout-metadata*="title-#{$color-name}"] { 19 | 20 | .callout-title, 21 | .callout-icon .svg-icon { 22 | color: var(--#{$color-var}); 23 | } 24 | } 25 | } 26 | 27 | @include callout-color("yellow", "color-yellow"); 28 | @include callout-color("blue", "color-blue"); 29 | @include callout-color("purple", "color-purple"); 30 | @include callout-color("red", "color-red"); 31 | @include callout-color("cyan", "color-cyan"); 32 | @include callout-color("pink", "color-pink"); 33 | @include callout-color("green", "color-green"); 34 | @include callout-color("orange", "color-orange"); -------------------------------------------------------------------------------- /snippets/callouts/callout-color/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - license: GPLv3 4 | - source: https://github.com/bladeacer/flexcyon 5 | --- 6 | 7 | # Callout Colors 8 | ## CSS code 9 | [View file here](./callout-colors.css) 10 | 11 | ## SCSS code 12 | [View file here](./callout-colors.scss) -------------------------------------------------------------------------------- /snippets/callouts/callout-conversation.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Conversation 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --workleaves-background: var(--background-primary); 7 | --workleaves-foreground: var(--text-normal); 8 | } 9 | 10 | .callout[data-callout=conversation-minimalist], 11 | .callout[data-callout=conversation], 12 | .callout[data-callout=conversation-outline] { 13 | --p-spacing: 0; 14 | --conversation-color: var(--callout-color); 15 | --callout-icon: lucide-messages-square; 16 | --callout-content-padding: var(--size-4-3); 17 | --line-color-odd: hsl(from rgb(var(--conversation-color)) calc(h + 15) s l); 18 | --line-color-even: hsl(from rgb(var(--conversation-color)) calc(h - 15) s l); 19 | background: none; 20 | } 21 | .callout[data-callout=conversation-minimalist] > .callout-content > *:nth-child(odd), 22 | .callout[data-callout=conversation] > .callout-content > *:nth-child(odd), 23 | .callout[data-callout=conversation-outline] > .callout-content > *:nth-child(odd) { 24 | margin-right: auto; 25 | --line-color: var(--line-color-odd); 26 | } 27 | .callout[data-callout=conversation-minimalist] > .callout-content > *:nth-child(even), 28 | .callout[data-callout=conversation] > .callout-content > *:nth-child(even), 29 | .callout[data-callout=conversation-outline] > .callout-content > *:nth-child(even) { 30 | margin-left: auto; 31 | --line-color: var(--line-color-even); 32 | } 33 | .callout[data-callout=conversation-minimalist] > .callout-content > *, 34 | .callout[data-callout=conversation] > .callout-content > *, 35 | .callout[data-callout=conversation-outline] > .callout-content > * { 36 | --bold-color: var(--line-color); 37 | padding: 12px; 38 | } 39 | 40 | .callout[data-callout=conversation] > .callout-content > * { 41 | width: fit-content; 42 | max-width: 80%; 43 | background: rgb(from var(--line-color) r g b/0.2); 44 | border-radius: var(--radius-l); 45 | margin-block: var(--size-4-3); 46 | } 47 | 48 | .callout[data-callout=conversation-outline] > .callout-content > * { 49 | position: relative; 50 | width: 80%; 51 | margin-bottom: 2px; 52 | margin-top: -1px; 53 | background: var(--workleaves-background); 54 | border-radius: calc(var(--radius-l) - 1px); 55 | } 56 | .callout[data-callout=conversation-outline] > .callout-content > *::before { 57 | content: ""; 58 | position: absolute; 59 | top: -1px; 60 | bottom: -1px; 61 | width: calc(37.5% + 1px); 62 | z-index: -1; 63 | background-size: 100% 50%, 100% 50%; 64 | background-position: center top, center bottom; 65 | background-repeat: no-repeat; 66 | opacity: 0.5; 67 | } 68 | .callout[data-callout=conversation-outline] > .callout-content > *:nth-child(odd)::before { 69 | right: -1px; 70 | border-left: 0; 71 | border-top-right-radius: var(--radius-l); 72 | border-bottom-right-radius: var(--radius-l); 73 | background-image: linear-gradient(to right, var(--line-color-even), var(--line-color-odd)), linear-gradient(to left, var(--line-color-odd), var(--line-color-odd)); 74 | } 75 | .callout[data-callout=conversation-outline] > .callout-content > *:nth-child(even)::before { 76 | left: -1px; 77 | border-right: 0; 78 | border-top-left-radius: var(--radius-l); 79 | border-bottom-left-radius: var(--radius-l); 80 | background-image: linear-gradient(to left, var(--line-color-odd), var(--line-color-even)), linear-gradient(to right, var(--line-color-even), var(--line-color-even)); 81 | } 82 | .callout[data-callout=conversation-outline] > .callout-content > *:first-child, 83 | .callout[data-callout=conversation-outline] > .callout-content > *:first-child::before { 84 | border-top-left-radius: 0; 85 | border-top-right-radius: 0; 86 | } 87 | .callout[data-callout=conversation-outline] > .callout-content > *:first-child::before { 88 | background-position: center 1px, center bottom; 89 | } 90 | .callout[data-callout=conversation-outline] > .callout-content > *:last-child, 91 | .callout[data-callout=conversation-outline] > .callout-content > *:last-child::before { 92 | border-bottom-left-radius: 0; 93 | border-bottom-right-radius: 0; 94 | } 95 | .callout[data-callout=conversation-outline] > .callout-content > *:last-child::before { 96 | background-position: center top, center calc(100% - 1px); 97 | } 98 | 99 | @media print { 100 | .print .callout[data-callout=conversation-outline] > .callout-content > *::before { 101 | width: calc(40% - var(--callout-content-padding)); 102 | } 103 | } 104 | .callout[data-callout=conversation-minimalist] { 105 | --callout-border-width: 0; 106 | --callout-content-padding: 0; 107 | } 108 | .callout[data-callout=conversation-minimalist] > .callout-title { 109 | display: none; 110 | } 111 | .callout[data-callout=conversation-minimalist] > .callout-content > * { 112 | width: fit-content; 113 | max-width: 50%; 114 | border-radius: var(--radius-l); 115 | margin-block: var(--size-4-3); 116 | padding: 0; 117 | } 118 | -------------------------------------------------------------------------------- /snippets/callouts/callout-email.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Email 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --workleaves-background: var(--background-primary); 7 | --workleaves-foreground: var(--text-normal); 8 | } 9 | 10 | .callout[data-callout=email] { 11 | --callout-icon: lucide-send-horizontal; 12 | --callout-blend-mode: normal; 13 | --callout-border-width: 1px; 14 | --callout-email-color: var(--mono-rgb-100); 15 | --callout-color: var(--callout-email-color); 16 | font-family: "Courier New", Courier, monospace; 17 | } 18 | .callout[data-callout=email] > .callout-title { 19 | gap: 10px; 20 | } 21 | .callout[data-callout=email] .callout { 22 | --callout-radius: 0; 23 | --callout-border-width: 2px; 24 | --callout-border-opacity: 0.3; 25 | --callout-padding: var(--size-4-1) 0; 26 | --callout-title-padding: 0; 27 | --callout-content-padding: 0 var(--size-4-1); 28 | --callout-color: var(--callout-email-color); 29 | --p-spacing: 0; 30 | margin: 0; 31 | background: none; 32 | border: none; 33 | display: flex; 34 | gap: var(--size-4-3); 35 | } 36 | .callout[data-callout=email] .callout > .callout-title { 37 | flex-basis: 15ex; 38 | line-height: var(--line-height-normal); 39 | align-items: center; 40 | justify-content: end; 41 | background: none; 42 | } 43 | .callout[data-callout=email] .callout > .callout-title .callout-title-inner { 44 | text-wrap: nowrap; 45 | } 46 | .callout[data-callout=email] .callout > .callout-title .callout-icon { 47 | display: none; 48 | } 49 | .callout[data-callout=email] .callout > .callout-content { 50 | flex-grow: 1; 51 | border: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity)); 52 | background-color: var(--workleaves-background); 53 | color: var(--text-normal); 54 | } 55 | .callout[data-callout=email] .callout a[aria-label^="mailto:"] { 56 | text-decoration: none; 57 | color: unset; 58 | background-image: none; 59 | padding-inline-end: 0; 60 | } 61 | .callout[data-callout=email] .callout[data-callout-metadata~=sep] { 62 | padding-bottom: var(--size-4-6); 63 | border-bottom: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity)); 64 | } 65 | -------------------------------------------------------------------------------- /snippets/callouts/callout-ext-color/ext-color.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # Callout Colors 9 | ## CSS code 10 | [View file here](./ext-colors.css) 11 | 12 | ## SCSS code 13 | [View file here](./ext-colors.scss) -------------------------------------------------------------------------------- /snippets/callouts/callout-ext-color/ext-colors.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Extended color palette 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | @mixin callout-ext-color($color-name, $color-var) { 7 | 8 | div.callout[data-callout-metadata*="all-#{$color-name}"], 9 | div.callout[data-callout-metadata*="bg-#{$color-name}"] { 10 | background-color: var(--#{$color-var}-bg); 11 | } 12 | 13 | div.callout[data-callout-metadata*="all-#{$color-name}"], 14 | div.callout[data-callout-metadata*="title-#{$color-name}"] { 15 | 16 | .callout-title, 17 | .callout-icon .svg-icon { 18 | color: var(--#{$color-var}); 19 | } 20 | } 21 | } 22 | 23 | @include callout-ext-color("red-blue", "color-red-blue-mix"); 24 | @include callout-ext-color("blue-red", "color-red-blue-mix"); 25 | 26 | @include callout-ext-color("red-orange", "color-red-orange-mix"); 27 | @include callout-ext-color("orange-red", "color-red-orange-mix"); 28 | 29 | @include callout-ext-color("red-yellow", "color-red-yellow-mix"); 30 | @include callout-ext-color("yellow-red", "color-red-yellow-mix"); 31 | 32 | @include callout-ext-color("red-green", "color-red-green-mix"); 33 | @include callout-ext-color("green-red", "color-red-green-mix"); 34 | 35 | @include callout-ext-color("red-cyan", "color-red-cyan-mix"); 36 | @include callout-ext-color("cyan-red", "color-red-cyan-mix"); 37 | 38 | @include callout-ext-color("red-purple", "color-red-purple-mix"); 39 | @include callout-ext-color("purple-red", "color-red-purple-mix"); 40 | 41 | @include callout-ext-color("red-pink", "color-red-pink-mix"); 42 | @include callout-ext-color("pink-red", "color-red-pink-mix"); 43 | 44 | @include callout-ext-color("orange-yellow", "color-orange-yellow-mix"); 45 | @include callout-ext-color("yellow-orange", "color-orange-yellow-mix"); 46 | 47 | @include callout-ext-color("orange-green", "color-orange-green-mix"); 48 | @include callout-ext-color("green-orange", "color-orange-green-mix"); 49 | 50 | @include callout-ext-color("orange-cyan", "color-orange-cyan-mix"); 51 | @include callout-ext-color("cyan-orange", "color-orange-cyan-mix"); 52 | 53 | @include callout-ext-color("orange-blue", "color-orange-blue-mix"); 54 | @include callout-ext-color("blue-orange", "color-orange-blue-mix"); 55 | 56 | @include callout-ext-color("orange-purple", "color-orange-purple-mix"); 57 | @include callout-ext-color("purple-orange", "color-orange-purple-mix"); 58 | 59 | @include callout-ext-color("orange-pink", "color-orange-pink-mix"); 60 | @include callout-ext-color("pink-orange", "color-orange-pink-mix"); 61 | 62 | @include callout-ext-color("yellow-green", "color-yellow-green-mix"); 63 | @include callout-ext-color("green-yellow", "color-yellow-green-mix"); 64 | 65 | @include callout-ext-color("yellow-cyan", "color-yellow-cyan-mix"); 66 | @include callout-ext-color("cyan-yellow", "color-yellow-cyan-mix"); 67 | 68 | @include callout-ext-color("yellow-blue", "color-yellow-blue-mix"); 69 | @include callout-ext-color("blue-yellow", "color-yellow-blue-mix"); 70 | 71 | @include callout-ext-color("yellow-purple", "color-yellow-purple-mix"); 72 | @include callout-ext-color("purple-yellow", "color-yellow-purple-mix"); 73 | 74 | @include callout-ext-color("yellow-pink", "color-yellow-pink-mix"); 75 | @include callout-ext-color("pink-yellow", "color-yellow-pink-mix"); 76 | 77 | @include callout-ext-color("green-cyan", "color-green-cyan-mix"); 78 | @include callout-ext-color("cyan-green", "color-green-cyan-mix"); 79 | 80 | @include callout-ext-color("green-blue", "color-green-blue-mix"); 81 | @include callout-ext-color("blue-green", "color-green-blue-mix"); 82 | 83 | @include callout-ext-color("green-purple", "color-green-purple-mix"); 84 | @include callout-ext-color("purple-green", "color-green-purple-mix"); 85 | 86 | @include callout-ext-color("green-pink", "color-green-pink-mix"); 87 | @include callout-ext-color("pink-green", "color-green-pink-mix"); 88 | 89 | @include callout-ext-color("cyan-blue", "color-cyan-blue-mix"); 90 | @include callout-ext-color("blue-cyan", "color-cyan-blue-mix"); 91 | 92 | @include callout-ext-color("cyan-purple", "color-cyan-purple-mix"); 93 | @include callout-ext-color("purple-cyan", "color-cyan-purple-mix"); 94 | 95 | @include callout-ext-color("cyan-pink", "color-cyan-pink-mix"); 96 | @include callout-ext-color("pink-cyan", "color-cyan-pink-mix"); 97 | 98 | @include callout-ext-color("blue-purple", "color-blue-purple-mix"); 99 | @include callout-ext-color("purple-blue", "color-blue-purple-mix"); 100 | 101 | @include callout-ext-color("blue-pink", "color-blue-pink-mix"); 102 | @include callout-ext-color("pink-blue", "color-blue-pink-mix"); 103 | 104 | @include callout-ext-color("purple-pink", "color-purple-pink-mix"); 105 | @include callout-ext-color("pink-purple", "color-purple-pink-mix"); -------------------------------------------------------------------------------- /snippets/callouts/callout-film-strip.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* GPLv3 license 3 | FAS - Callout Film strip 4 | Author: ElsaTam (Kapirklaa in Discord) 5 | */ 6 | .callout[data-callout=film-strip] { 7 | --callout-icon: lucide-film; 8 | --callout-padding: 0; 9 | --callout-content-padding: 0; 10 | --callout-color: var(--mono-rgb-100); 11 | --image-shadow-offset: 0; 12 | --frame-height: 140px; 13 | --n-holes: 8; 14 | --hole-width: 15px; 15 | --hole-height: 10px; 16 | --gap: 5px; 17 | --img-fading: 2px; 18 | --hole-fading: 1px; 19 | --frame-width: calc(var(--n-holes) * var(--hole-width) + (var(--n-holes) - 1) * var(--gap)); 20 | --padding-y: calc(var(--hole-height) + 3 * var(--gap)); 21 | --padding-x: calc(var(--gap) * 0.5); 22 | background: none; 23 | } 24 | .callout[data-callout=film-strip] .callout-content > p { 25 | counter-reset: frames; 26 | display: flex; 27 | flex-wrap: nowrap; 28 | font-size: 0; 29 | margin: 0; 30 | } 31 | .callout[data-callout=film-strip] .callout-content > p > br { 32 | display: none; 33 | } 34 | .callout[data-callout=film-strip] .callout-content > p > span { 35 | margin-inline: -0.5px; 36 | position: relative; 37 | height: calc(var(--frame-height) + var(--padding-y) * 2); 38 | width: calc(var(--frame-width) + var(--padding-x) * 2); 39 | counter-increment: frames; 40 | min-width: calc(var(--frame-width) + var(--padding-x) * 2); 41 | background-color: rgb(var(--mono-rgb-100)); 42 | padding: var(--padding-y) var(--padding-x); 43 | -webkit-mask-image: linear-gradient(to right, transparent 0px, transparent calc(var(--hole-width) * 0.5 - var(--hole-fading) * 0.5), black calc(var(--hole-width) * 0.5 + var(--hole-fading) * 0.5), black calc(var(--hole-width) * 0.5 + var(--gap) - var(--hole-fading) * 0.5), transparent calc(var(--hole-width) * 0.5 + var(--gap) + var(--hole-fading) * 0.5), transparent calc(var(--hole-width) + var(--gap))), linear-gradient(to bottom, black, black calc(2 * var(--gap) - var(--hole-fading) * 0.5), transparent calc(2 * var(--gap) + var(--hole-fading) * 0.5), transparent calc(2 * var(--gap) + var(--hole-height) - var(--hole-fading) * 0.5), black calc(2 * var(--gap) + var(--hole-height) + var(--hole-fading) * 0.5), black calc(var(--padding-y) + var(--frame-height) + var(--gap) - var(--hole-fading) * 0.5), transparent calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-fading) * 0.5), transparent calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-height) - var(--hole-fading) * 0.5), black calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-height) + var(--hole-fading) * 0.5), black 100%); 44 | -webkit-mask-size: calc(var(--hole-width) + var(--gap)) 100%, 100%; 45 | -webkit-mask-position: left, center; 46 | -webkit-mask-repeat: repeat-x, no-repeat; 47 | } 48 | .callout[data-callout=film-strip] img { 49 | width: 1000%; 50 | height: 100%; 51 | object-fit: cover; 52 | filter: sepia(0.5); 53 | -webkit-mask-image: linear-gradient(to right, transparent 0px, black var(--img-fading), black calc(100% - var(--img-fading)), transparent 100%), linear-gradient(to bottom, transparent 0px, black var(--img-fading), black calc(100% - var(--img-fading)), transparent 100%); 54 | -webkit-mask-size: 100%; 55 | -webkit-mask-position: center; 56 | mask-composite: intersect; 57 | } 58 | .callout[data-callout=film-strip] .callout-content > p > span::after { 59 | content: "← " counter(frames) " →"; 60 | font-size: calc(var(--gap) * 2 - 2px); 61 | line-height: 1; 62 | color: rgb(var(--mono-rgb-0)); 63 | opacity: 0.7; 64 | position: absolute; 65 | left: 0; 66 | right: 0; 67 | bottom: 1px; 68 | text-align: center; 69 | z-index: 1; 70 | } 71 | .callout[data-callout=film-strip] .callout-content > p > span:first-of-type::after { 72 | content: counter(frames) " →"; 73 | } 74 | .callout[data-callout=film-strip] .callout-content > p > span:last-of-type::after { 75 | content: "← " counter(frames); 76 | } 77 | 78 | /* Fix for Minimal theme and img-grid cssclass */ 79 | .callout[data-callout=film-strip] .callout-content > p { 80 | display: flex !important; 81 | gap: 0; 82 | } 83 | -------------------------------------------------------------------------------- /snippets/callouts/callout-full-width-image.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Film strip 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --callout-fwi-height: 70px; 7 | --callout-fwi-title-shadow: 0px 0px 0.1em rgb(var(--mono-rgb-0)), 0px 0px 0.2em rgb(var(--mono-rgb-0)), 0px 0px 0.5em rgb(var(--mono-rgb-0)); 8 | --callout-fwi-title-blur: 5px; 9 | --fwi-height: var(--callout-fwi-height); 10 | --fwi-title-shadow: var(--callout-fwi-title-shadow); 11 | --fwi-title-blur: var(--callout-fwi-title-blur); 12 | } 13 | 14 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol]) { 15 | --callout-padding: 0; 16 | --callout-content-padding: 0; 17 | --callout-border-width: 0; 18 | --callout-blend-mode: normal; 19 | --image-shadow-offset: 0; 20 | --p-spacing: 0; 21 | position: relative; 22 | } 23 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol]) .callout-content { 24 | font-size: 0; 25 | } 26 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol]) img { 27 | height: var(--fwi-height); 28 | width: 100%; 29 | object-fit: cover; 30 | } 31 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol]) .callout-icon { 32 | display: none; 33 | } 34 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol]) .callout-title { 35 | background: none; 36 | position: absolute; 37 | justify-content: center; 38 | top: 50%; 39 | left: 0; 40 | right: 0; 41 | transform: translateY(-50%); 42 | text-shadow: var(--fwi-title-shadow); 43 | z-index: 1; 44 | } 45 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol])[data-callout-metadata~=blur] .callout-content { 46 | filter: blur(var(--fwi-title-blur)); 47 | } 48 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol])[data-callout-metadata~=grayscale] img { 49 | filter: grayscale(1); 50 | } 51 | 52 | .callout:is([data-callout=full-width-image], [data-callout=full-w-img], [data-callout=fwi], [data-callout="full-width-panoramic-image-:jack_o_lantern:"], [data-callout=fwpi-jol])[data-callout-metadata~=no-title] .callout-title { 53 | display: none; 54 | } 55 | -------------------------------------------------------------------------------- /snippets/callouts/callout-grid.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Grid 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | /* Compatibility with ITS theme/snippets */ 6 | .markdown-source-view > div, .markdown-preview-view { 7 | container: markdown-view/inline-size; 8 | } 9 | 10 | .callout[data-callout=grid] { 11 | background: none; 12 | border: none; 13 | padding: 0; 14 | } 15 | .callout[data-callout=grid] > .callout-title { 16 | display: none; 17 | } 18 | .callout[data-callout=grid] > .callout-content { 19 | border: none; 20 | display: grid; 21 | align-items: flex-start; 22 | gap: 10px; 23 | padding: 0; 24 | } 25 | .callout[data-callout=grid] > .callout-content.callout-content > * { 26 | margin: 0; 27 | } 28 | .callout[data-callout=grid][data-callout-metadata~=col-2] > .callout-content { 29 | grid-template-columns: repeat(2, 1fr); 30 | } 31 | .callout[data-callout=grid][data-callout-metadata~=col-3] > .callout-content { 32 | grid-template-columns: repeat(3, 1fr); 33 | } 34 | .callout[data-callout=grid][data-callout-metadata~=col-4] > .callout-content { 35 | grid-template-columns: repeat(4, 1fr); 36 | } 37 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content { 38 | grid-template-columns: repeat(5, 1fr); 39 | } 40 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 41 | grid-template-columns: repeat(6, 1fr); 42 | } 43 | 44 | @container markdown-view (700px < width < 850px) { 45 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 46 | grid-template-columns: repeat(5, 1fr); 47 | } 48 | } 49 | @container markdown-view (550px < width < 700px) { 50 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 51 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 52 | grid-template-columns: repeat(4, 1fr); 53 | } 54 | } 55 | @container markdown-view (400px < width < 550px) { 56 | .callout[data-callout=grid][data-callout-metadata~=col-4] > .callout-content, 57 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 58 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 59 | grid-template-columns: repeat(3, 1fr); 60 | } 61 | } 62 | @container markdown-view (width < 400px) { 63 | .callout[data-callout=grid][data-callout-metadata~=col-3] > .callout-content, 64 | .callout[data-callout=grid][data-callout-metadata~=col-4] > .callout-content, 65 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 66 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 67 | grid-template-columns: repeat(2, 1fr); 68 | } 69 | } 70 | @media print { 71 | .print .markdown-preview-view [data-callout=grid] > .callout-content { 72 | display: grid !important; 73 | } 74 | } 75 | @media print and (700px < width < 850px) { 76 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 77 | grid-template-columns: repeat(5, 1fr); 78 | } 79 | } 80 | @media print and (550px < width < 700px) { 81 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 82 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 83 | grid-template-columns: repeat(4, 1fr); 84 | } 85 | } 86 | @media print and (400px < width < 550px) { 87 | .callout[data-callout=grid][data-callout-metadata~=col-4] > .callout-content, 88 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 89 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 90 | grid-template-columns: repeat(3, 1fr); 91 | } 92 | } 93 | @media print and (width < 400px) { 94 | .callout[data-callout=grid][data-callout-metadata~=col-3] > .callout-content, 95 | .callout[data-callout=grid][data-callout-metadata~=col-4] > .callout-content, 96 | .callout[data-callout=grid][data-callout-metadata~=col-5] > .callout-content, 97 | .callout[data-callout=grid][data-callout-metadata~=col-6] > .callout-content { 98 | grid-template-columns: repeat(2, 1fr); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /snippets/callouts/callout-masonry.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Masonry 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --masonry-column-count: 4; 7 | --masonry-row-height: 8rem; 8 | --masonry-gap: 0.5rem; 9 | } 10 | 11 | .callout[data-callout=masonry] { 12 | --callout-padding: 0; 13 | --callout-content-padding: 0; 14 | --callout-border-width: 0; 15 | --callout-blend-mode: normal; 16 | --image-shadow-offset: 0; 17 | --link-decoration: none; 18 | --link-unresolved-opacity: 1; 19 | --link-unresolved-filter: saturate(30%); 20 | background: none; 21 | } 22 | .callout[data-callout=masonry] > .callout-content > p { 23 | column-count: var(--masonry-column-count); 24 | column-gap: var(--masonry-gap); 25 | } 26 | .callout[data-callout=masonry] > .callout-title { 27 | display: none; 28 | } 29 | .callout[data-callout=masonry] img { 30 | border-radius: var(--radius-m); 31 | } 32 | .callout[data-callout=masonry] a { 33 | font-size: 0; 34 | } 35 | 36 | .callout[data-callout=masonry][data-callout-metadata~=col-2] { 37 | --masonry-column-count: 2; 38 | } 39 | 40 | .callout[data-callout=masonry][data-callout-metadata~=col-3] { 41 | --masonry-column-count: 3; 42 | } 43 | 44 | .callout[data-callout=masonry][data-callout-metadata~=col-4] { 45 | --masonry-column-count: 4; 46 | } 47 | 48 | .callout[data-callout=masonry][data-callout-metadata~=col-5] { 49 | --masonry-column-count: 5; 50 | } 51 | 52 | .callout[data-callout=masonry][data-callout-metadata~=col-6] { 53 | --masonry-column-count: 6; 54 | } 55 | 56 | .callout[data-callout=masonry][data-callout-metadata~=col-7] { 57 | --masonry-column-count: 7; 58 | } 59 | 60 | .callout[data-callout=masonry][data-callout-metadata~=col-8] { 61 | --masonry-column-count: 8; 62 | } 63 | 64 | .callout[data-callout=masonry][data-callout-metadata~=col-9] { 65 | --masonry-column-count: 9; 66 | } 67 | 68 | .callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p { 69 | column-count: unset; 70 | display: flex; 71 | flex-direction: row; 72 | flex-wrap: wrap; 73 | gap: var(--masonry-gap); 74 | } 75 | .callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p > * { 76 | flex-grow: 1; 77 | } 78 | .callout[data-callout=masonry][data-callout-metadata=horizontal] img { 79 | height: var(--masonry-row-height); 80 | width: 100%; 81 | object-fit: cover; 82 | } 83 | .callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p > *:last-child { 84 | flex-grow: unset; 85 | } 86 | .callout[data-callout=masonry][data-callout-metadata=horizontal] br { 87 | display: none; 88 | } 89 | 90 | /* Fix for Minimal theme and img-grid cssclass */ 91 | .callout[data-callout=masonry]:not([data-callout-metadata=horizontal]) > .callout-content > p { 92 | display: block !important; 93 | column-gap: 0.5rem; 94 | } 95 | 96 | .callout[data-callout=masonry] .image-embed { 97 | display: initial; 98 | } 99 | -------------------------------------------------------------------------------- /snippets/callouts/callout-popup.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Callout Popup. Adopted it from Ukiyo theme 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-callout-pop-animation-duration: 0.2s; 8 | } 9 | 10 | .markdown-reading-view { 11 | .callout[data-callout-metadata*="$pop"] { 12 | display: block; 13 | position: absolute; 14 | margin-left: min(-3vw, -40px); 15 | transform: translateY(-70px); 16 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 17 | width: calc(var(--file-line-width)/2 + min(3vw, 40px)); 18 | backdrop-filter: blur(20px); 19 | z-index: 999; 20 | 21 | .callout-title { 22 | margin-top: 3px; 23 | margin-left: 22px; 24 | } 25 | } 26 | 27 | .callout[data-callout-metadata*="$pop"]:hover::before { 28 | display: block; 29 | border: none; 30 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 31 | } 32 | 33 | .callout[data-callout-metadata*="$pop"]::before { 34 | visibility: visible; 35 | content: ">"; 36 | display: block; 37 | position: absolute; 38 | padding: 2px; 39 | color: rgb(var(--callout-color)); 40 | z-index: 1; 41 | } 42 | 43 | .callout[data-callout-metadata*="$pop"]:not(:hover) { 44 | visibility: hidden; 45 | } 46 | } -------------------------------------------------------------------------------- /snippets/callouts/callout-profile.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Profile 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --font-typewriter: "TT2020StyleE", "Courier", monospace; 7 | } 8 | 9 | .callout[data-callout=profile] { 10 | --callout-color: var(--color-gray-rgb); 11 | --callout-icon: lucide-user; 12 | --callout-title-size: 1.5em; 13 | --callout-border-width: 1px; 14 | --line-height-tight: 1; 15 | --icon-stroke: 3px; 16 | } 17 | .callout[data-callout=profile] .callout-title { 18 | font-family: var(--font-typewriter); 19 | } 20 | .callout[data-callout=profile] .callout-icon { 21 | align-items: flex-start; 22 | } 23 | .callout[data-callout=profile] .callout-content > p:first-child .image-embed { 24 | float: right; 25 | margin-left: var(--size-4-3); 26 | } 27 | .callout[data-callout=profile] :is(ul, ol) { 28 | display: flow-root; 29 | } 30 | .callout[data-callout=profile] .callout-content > p:first-child img { 31 | max-width: 150px; 32 | position: relative; 33 | border: var(--callout-border-width) solid rgba(var(--callout-color), 0.5); 34 | box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5); 35 | } 36 | 37 | .theme-light .callout[data-callout=profile] { 38 | --color-gray: #4d4d4d; 39 | --color-gray-rgb: 77, 77, 77; 40 | } 41 | 42 | .theme-dark .callout[data-callout=profile] { 43 | --color-gray: #bdbdbd; 44 | --color-gray-rgb: 189, 189, 189; 45 | } 46 | -------------------------------------------------------------------------------- /snippets/callouts/callout-table-cards.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Grid 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | .callout[data-callout=table-cards] { 6 | --table-background: rgba(var(--mono-rgb-0), 0.2); 7 | --table-row-alt-background: rgba(var(--mono-rgb-0), 0.2); 8 | --callout-blend-mode: normal; 9 | --card-width: 14em; 10 | padding: 0; 11 | background: none; 12 | border: none; 13 | } 14 | .callout[data-callout=table-cards] .callout-title { 15 | display: none; 16 | } 17 | .callout[data-callout=table-cards] .callout-content { 18 | border: none; 19 | padding: 0; 20 | } 21 | .callout[data-callout=table-cards] table { 22 | width: 100%; 23 | } 24 | .callout[data-callout=table-cards] thead { 25 | display: none; 26 | } 27 | .callout[data-callout=table-cards] tbody { 28 | display: grid; 29 | gap: 0.6em; 30 | grid-template-columns: repeat(auto-fill, var(--card-width)); 31 | justify-content: center; 32 | } 33 | .callout[data-callout=table-cards] tr { 34 | display: flex; 35 | flex-direction: column; 36 | margin-block: 0; 37 | border: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity)); 38 | } 39 | .callout[data-callout=table-cards] td { 40 | border: 0; 41 | } 42 | .callout[data-callout=table-cards] td:first-child { 43 | --link-decoration: none; 44 | border-bottom: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity)); 45 | text-overflow: ellipsis; 46 | white-space: nowrap; 47 | } 48 | .callout[data-callout=table-cards] td:nth-child(n+2) { 49 | background-color: rgba(var(--mono-rgb-0), 0.2); 50 | } 51 | .callout[data-callout=table-cards] td:last-child { 52 | flex-grow: 1; 53 | } 54 | 55 | .callout[data-callout=table-cards][data-callout-metadata~=accent] tr { 56 | border-color: rgb(from var(--color-accent) r g b/var(--callout-border-opacity)); 57 | } 58 | .callout[data-callout=table-cards][data-callout-metadata~=accent] td:first-child { 59 | border-bottom-color: rgb(from var(--color-accent) r g b/var(--callout-border-opacity)); 60 | } 61 | 62 | /* Minimal */ /* 63 | .callout[data-callout=table-cards] { 64 | --table-width: 100%; 65 | } 66 | /**/ 67 | -------------------------------------------------------------------------------- /snippets/callouts/callout-tooltip.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callout Tooltip 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | .callout[data-callout=tooltip] { 6 | border: none; 7 | background: none; 8 | width: fit-content; 9 | height: fit-content; 10 | } 11 | .callout[data-callout=tooltip] .callout-title { 12 | position: absolute; 13 | right: calc(var(--size-4-2) + var(--image-shadow-offset, 0px)); 14 | top: var(--size-4-2); 15 | border: none; 16 | box-shadow: 0 2px 8px var(--background-modifier-box-shadow); 17 | background-color: var(--background-modifier-message); 18 | border-radius: var(--radius-s); 19 | color: #FAFAFA; 20 | font-size: var(--font-ui-smaller); 21 | font-weight: var(--font-medium); 22 | line-height: var(--line-height-tight); 23 | max-width: 300px; 24 | padding: 4px 8px; 25 | text-align: center; 26 | z-index: var(--layer-tooltip); 27 | pointer-events: none; 28 | display: none; 29 | } 30 | .callout[data-callout=tooltip]:hover .callout-title { 31 | display: flex; 32 | } 33 | .callout[data-callout=tooltip] .callout-icon { 34 | display: none; 35 | } 36 | .callout[data-callout=tooltip] .callout-content { 37 | padding: 0; 38 | border: none; 39 | } 40 | .callout[data-callout=tooltip] .callout-content > :first-child { 41 | margin-top: 0; 42 | } 43 | .callout[data-callout=tooltip] .callout-content > :plast-child { 44 | margin-bottom: 0; 45 | } 46 | 47 | .callout[data-callout=tooltip] { 48 | --callout-padding: 0; 49 | --callout-radius: 0; 50 | position: relative; 51 | } 52 | -------------------------------------------------------------------------------- /snippets/callouts/callouts-metadata.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Callouts Metadata 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | /* Compatibility with ITS theme/snippets */ 6 | .markdown-source-view > div, .markdown-preview-view { 7 | container: markdown-view/inline-size; 8 | } 9 | 10 | :where(.markdown-rendered :is(ul, ol)) { 11 | display: flow-root; 12 | } 13 | 14 | body { 15 | --file-margins-block: var(--size-4-8); 16 | --file-margins-inline: var(--size-4-8); 17 | --file-margins: var(--file-margins-block) var(--file-margins-inline); 18 | } 19 | 20 | .is-mobile { 21 | --file-margins-block: var(--size-4-2); 22 | --file-margins-inline: var(--size-4-6); 23 | } 24 | 25 | .callout[data-callout-metadata~=gray] { 26 | --callout-color: var(--color-gray-rgb); 27 | } 28 | 29 | .callout[data-callout-metadata~=brown] { 30 | --callout-color: var(--color-brown-rgb); 31 | } 32 | 33 | .callout[data-callout-metadata~=red] { 34 | --callout-color: var(--color-red-rgb); 35 | } 36 | 37 | .callout[data-callout-metadata~=orange] { 38 | --callout-color: var(--color-orange-rgb); 39 | } 40 | 41 | .callout[data-callout-metadata~=yellow] { 42 | --callout-color: var(--color-yellow-rgb); 43 | } 44 | 45 | .callout[data-callout-metadata~=green] { 46 | --callout-color: var(--color-green-rgb); 47 | } 48 | 49 | .callout[data-callout-metadata~=cyan] { 50 | --callout-color: var(--color-cyan-rgb); 51 | } 52 | 53 | .callout[data-callout-metadata~=blue] { 54 | --callout-color: var(--color-blue-rgb); 55 | } 56 | 57 | .callout[data-callout-metadata~=purple] { 58 | --callout-color: var(--color-purple-rgb); 59 | } 60 | 61 | .callout[data-callout-metadata~=pink] { 62 | --callout-color: var(--color-pink-rgb); 63 | } 64 | 65 | .callout[data-callout-metadata~=black] { 66 | --callout-color: 0, 0, 0; 67 | } 68 | 69 | .callout[data-callout-metadata~=white] { 70 | --callout-color: 255, 255, 255; 71 | } 72 | 73 | [data-callout-metadata~=accent] { 74 | border-color: rgb(from var(--color-accent) r g b/var(--callout-border-opacity)); 75 | background-color: rgb(from var(--color-accent) r g b/0.1); 76 | } 77 | [data-callout-metadata~=accent] > .callout-title { 78 | color: var(--color-accent); 79 | } 80 | [data-callout-metadata~=accent] > .callout-title .svg-icon { 81 | color: var(--color-accent); 82 | } 83 | 84 | .callout[data-callout-metadata~=no-bg], .callout[data-callout-metadata~=no-bg] > .callout-content, .callout[data-callout-metadata~=no-bg] > .callout-title, .callout[data-callout-metadata~=no-background], .callout[data-callout-metadata~=no-background] > .callout-content, .callout[data-callout-metadata~=no-background] > .callout-title { 85 | background: none; 86 | } 87 | 88 | .callout[data-callout-metadata~=black-and-white] img, 89 | .callout[data-callout-metadata~=b-w] img { 90 | filter: grayscale(100); 91 | } 92 | 93 | .callout[data-callout-metadata~=no-icon] > .callout-title > .callout-icon { 94 | display: none; 95 | } 96 | 97 | .callout[data-callout-metadata~=no-title] > .callout-title { 98 | display: none; 99 | } 100 | 101 | .callout[data-callout-metadata~=no-title] > .callout-content { 102 | border: none; 103 | } 104 | 105 | .callout[data-callout-metadata~=blank] { 106 | margin: 0; 107 | } 108 | .callout[data-callout-metadata~=blank], .callout[data-callout-metadata~=blank] > .callout-content { 109 | border: none; 110 | background: none; 111 | padding: 0; 112 | } 113 | .callout[data-callout-metadata~=blank] > .callout-title { 114 | display: none; 115 | } 116 | 117 | .markdown-preview-view .callout[data-callout-metadata~=wide] { 118 | position: relative; 119 | --w: calc(0.95 * (100cqw + 2 * var(--file-margins-inline))); 120 | width: var(--w); 121 | left: calc(50% - var(--w) * 0.5); 122 | } 123 | .markdown-preview-view .callout[data-callout-metadata~=wide] .callout-title { 124 | justify-content: center; 125 | } 126 | 127 | .markdown-preview-view .callout:is([data-callout-metadata~=right], [data-callout-metadata~=float-right]) { 128 | float: right; 129 | clear: right; 130 | margin: var(--fas-float-inline-margin, 12px) 0 var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px); 131 | } 132 | 133 | .markdown-preview-view .callout:is([data-callout-metadata~=left], [data-callout-metadata~=float-left]) { 134 | float: left; 135 | clear: left; 136 | margin: var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px) 0; 137 | } 138 | 139 | .callout[data-callout-metadata~=no-blending] { 140 | --callout-blend-mode: normal; 141 | } 142 | 143 | .callout[data-callout-metadata~=center-title] .callout-title-inner { 144 | flex-grow: 1; 145 | text-align: center; 146 | } 147 | -------------------------------------------------------------------------------- /snippets/callouts/flashcard/flashcard-w-style-settings.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Flashcard callout 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | /* @settings 7 | name: Flexcyon Snippets - Flashcard Callout 8 | id: flexcyon-snippets-3 9 | settings: 10 | - title: Flashcard callout width 11 | id: flexcyon-callouts-flashcard-width 12 | description: Configures the width of flashcard callouts 13 | type: variable-number 14 | default: 250 15 | format: px 16 | - title: Flashcard callout height 17 | id: flexcyon-callouts-flashcard-height 18 | description: Configures the height of flashcard callouts 19 | type: variable-number 20 | default: 250 21 | format: px 22 | */ 23 | 24 | div.callout[data-callout-metadata*="flashcard"] { 25 | width: var(--flexcyon-callouts-flashcard-width); 26 | height: var(--flexcyon-callouts-flashcard-height); 27 | perspective: 1000px; 28 | transform-style: preserve-3d; 29 | transition: all 0.5s ease-in-out; 30 | 31 | .callout-content { 32 | transform: rotateY(180deg); 33 | opacity: 0; 34 | } 35 | 36 | .callout-title { 37 | position: absolute; 38 | top: 25%; 39 | display: flex; 40 | flex-direction: column; 41 | /* For stacking content if needed */ 42 | align-items: center; 43 | justify-content: center; 44 | } 45 | 46 | &:hover { 47 | transform: rotateY(180deg); 48 | 49 | .callout-title { 50 | opacity: 0; 51 | } 52 | 53 | .callout-content { 54 | opacity: 1; 55 | } 56 | } 57 | 58 | } -------------------------------------------------------------------------------- /snippets/callouts/flashcard/flashcard.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Flashcard callout 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | div.callout[data-callout-metadata*="flashcard"] { 6 | width: var(--flexcyon-callouts-flashcard-width); 7 | height: var(--flexcyon-callouts-flashcard-height); 8 | perspective: 1000px; 9 | transform-style: preserve-3d; 10 | transition: all 0.5s ease-in-out; 11 | 12 | .callout-content { 13 | transform: rotateY(180deg); 14 | opacity: 0; 15 | } 16 | 17 | .callout-title { 18 | position: absolute; 19 | top: 25%; 20 | display: flex; 21 | flex-direction: column; 22 | /* For stacking content if needed */ 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | 27 | &:hover { 28 | transform: rotateY(180deg); 29 | 30 | .callout-title { 31 | opacity: 0; 32 | } 33 | 34 | .callout-content { 35 | opacity: 1; 36 | } 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /snippets/callouts/flashcard/flashcard.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_style_settings: true 6 | --- 7 | 8 | # Flashcard 9 | ## With Style Settings support 10 | [View this file](./flashcard-w-style-settings.css) 11 | 12 | ## Without Style Settings support 13 | 14 | [View this file](./flashcard.css) -------------------------------------------------------------------------------- /snippets/callouts/font-style/font-style.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Font Style 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*=tilt-all] .callout-title, 7 | div.callout[data-callout-metadata*=tilt-title] .callout-title { 8 | transform: skewX(-7.5deg); 9 | } 10 | 11 | div.callout[data-callout-metadata*=tilt-all] .callout-content, 12 | div.callout[data-callout-metadata*=tilt-content] .callout-content { 13 | transform: skewX(-7.5deg); 14 | } 15 | 16 | div.callout[data-callout-metadata*=italic-all] .callout-title, 17 | div.callout[data-callout-metadata*=italic-title] .callout-title { 18 | font-style: italic; 19 | } 20 | 21 | div.callout[data-callout-metadata*=italic-all] .callout-content, 22 | div.callout[data-callout-metadata*=italic-content] .callout-content { 23 | font-style: italic; 24 | } 25 | 26 | div.callout[data-callout-metadata*=oblique-all] .callout-title, 27 | div.callout[data-callout-metadata*=oblique-title] .callout-title { 28 | font-style: oblique; 29 | } 30 | 31 | div.callout[data-callout-metadata*=oblique-all] .callout-content, 32 | div.callout[data-callout-metadata*=oblique-content] .callout-content { 33 | font-style: oblique; 34 | } 35 | -------------------------------------------------------------------------------- /snippets/callouts/font-style/font-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # Font Style 9 | ## CSS Code 10 | [View file here](./font-style.css) 11 | 12 | ## SCSS Code 13 | [View file here](./font-style.scss) -------------------------------------------------------------------------------- /snippets/callouts/font-style/font-style.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Font Style 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*="tilt-all"], 7 | div.callout[data-callout-metadata*="tilt-title"] { 8 | .callout-title { 9 | transform: skewX(-7.5deg); 10 | } 11 | } 12 | 13 | div.callout[data-callout-metadata*="tilt-all"], 14 | div.callout[data-callout-metadata*="tilt-content"] { 15 | .callout-content { 16 | transform: skewX(-7.5deg); 17 | } 18 | } 19 | 20 | 21 | @mixin callout-font-style($style) { 22 | 23 | div.callout[data-callout-metadata*="#{$style}-all"], 24 | div.callout[data-callout-metadata*="#{$style}-title"] { 25 | .callout-title { 26 | font-style: $style; 27 | } 28 | } 29 | 30 | div.callout[data-callout-metadata*="#{$style}-all"], 31 | div.callout[data-callout-metadata*="#{$style}-content"] { 32 | .callout-content { 33 | font-style: $style; 34 | } 35 | } 36 | } 37 | 38 | @include callout-font-style(italic); 39 | @include callout-font-style(oblique); -------------------------------------------------------------------------------- /snippets/callouts/font-weight/font-weight.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Font Weight 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*=w-100-all] .callout-title, 7 | div.callout[data-callout-metadata*=w-100-title] .callout-title { 8 | font-weight: 100; 9 | } 10 | 11 | div.callout[data-callout-metadata*=w-100-all] .callout-content, 12 | div.callout[data-callout-metadata*=w-100-content] .callout-content { 13 | font-weight: 100; 14 | } 15 | 16 | div.callout[data-callout-metadata*=w-200-all] .callout-title, 17 | div.callout[data-callout-metadata*=w-200-title] .callout-title { 18 | font-weight: 200; 19 | } 20 | 21 | div.callout[data-callout-metadata*=w-200-all] .callout-content, 22 | div.callout[data-callout-metadata*=w-200-content] .callout-content { 23 | font-weight: 200; 24 | } 25 | 26 | div.callout[data-callout-metadata*=w-300-all] .callout-title, 27 | div.callout[data-callout-metadata*=w-300-title] .callout-title { 28 | font-weight: 300; 29 | } 30 | 31 | div.callout[data-callout-metadata*=w-300-all] .callout-content, 32 | div.callout[data-callout-metadata*=w-300-content] .callout-content { 33 | font-weight: 300; 34 | } 35 | 36 | div.callout[data-callout-metadata*=w-400-all] .callout-title, 37 | div.callout[data-callout-metadata*=w-400-title] .callout-title { 38 | font-weight: 400; 39 | } 40 | 41 | div.callout[data-callout-metadata*=w-400-all] .callout-content, 42 | div.callout[data-callout-metadata*=w-400-content] .callout-content { 43 | font-weight: 400; 44 | } 45 | 46 | div.callout[data-callout-metadata*=w-500-all] .callout-title, 47 | div.callout[data-callout-metadata*=w-500-title] .callout-title { 48 | font-weight: 500; 49 | } 50 | 51 | div.callout[data-callout-metadata*=w-500-all] .callout-content, 52 | div.callout[data-callout-metadata*=w-500-content] .callout-content { 53 | font-weight: 500; 54 | } 55 | 56 | div.callout[data-callout-metadata*=w-600-all] .callout-title, 57 | div.callout[data-callout-metadata*=w-600-title] .callout-title { 58 | font-weight: 600; 59 | } 60 | 61 | div.callout[data-callout-metadata*=w-600-all] .callout-content, 62 | div.callout[data-callout-metadata*=w-600-content] .callout-content { 63 | font-weight: 600; 64 | } 65 | 66 | div.callout[data-callout-metadata*=w-700-all] .callout-title, 67 | div.callout[data-callout-metadata*=w-700-title] .callout-title { 68 | font-weight: 700; 69 | } 70 | 71 | div.callout[data-callout-metadata*=w-700-all] .callout-content, 72 | div.callout[data-callout-metadata*=w-700-content] .callout-content { 73 | font-weight: 700; 74 | } 75 | 76 | div.callout[data-callout-metadata*=w-800-all] .callout-title, 77 | div.callout[data-callout-metadata*=w-800-title] .callout-title { 78 | font-weight: 800; 79 | } 80 | 81 | div.callout[data-callout-metadata*=w-800-all] .callout-content, 82 | div.callout[data-callout-metadata*=w-800-content] .callout-content { 83 | font-weight: 800; 84 | } 85 | 86 | div.callout[data-callout-metadata*=w-900-all] .callout-title, 87 | div.callout[data-callout-metadata*=w-900-title] .callout-title { 88 | font-weight: 900; 89 | } 90 | 91 | div.callout[data-callout-metadata*=w-900-all] .callout-content, 92 | div.callout[data-callout-metadata*=w-900-content] .callout-content { 93 | font-weight: 900; 94 | } 95 | 96 | div.callout[data-callout-metadata*=w-bold-all] .callout-title, 97 | div.callout[data-callout-metadata*=w-bold-title] .callout-title { 98 | font-weight: bold; 99 | } 100 | 101 | div.callout[data-callout-metadata*=w-bold-all] .callout-content, 102 | div.callout[data-callout-metadata*=w-bold-content] .callout-content { 103 | font-weight: bold; 104 | } 105 | 106 | div.callout[data-callout-metadata*=w-bolder-all] .callout-title, 107 | div.callout[data-callout-metadata*=w-bolder-title] .callout-title { 108 | font-weight: bolder; 109 | } 110 | 111 | div.callout[data-callout-metadata*=w-bolder-all] .callout-content, 112 | div.callout[data-callout-metadata*=w-bolder-content] .callout-content { 113 | font-weight: bolder; 114 | } 115 | 116 | div.callout[data-callout-metadata*=w-lighter-all] .callout-title, 117 | div.callout[data-callout-metadata*=w-lighter-title] .callout-title { 118 | font-weight: lighter; 119 | } 120 | 121 | div.callout[data-callout-metadata*=w-lighter-all] .callout-content, 122 | div.callout[data-callout-metadata*=w-lighter-content] .callout-content { 123 | font-weight: lighter; 124 | } 125 | -------------------------------------------------------------------------------- /snippets/callouts/font-weight/font-weight.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # Font Weight 9 | ## CSS Code 10 | [View file here](./font-weight.css) 11 | 12 | ## SCSS Code 13 | [View file here](./font-weight.scss) -------------------------------------------------------------------------------- /snippets/callouts/font-weight/font-weight.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Font Weight 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | @mixin callout-text-font-weight($font-weight) { 7 | 8 | div.callout[data-callout-metadata*="w-#{$font-weight}-all"], 9 | div.callout[data-callout-metadata*="w-#{$font-weight}-title"] { 10 | .callout-title { 11 | font-weight: $font-weight; 12 | } 13 | } 14 | 15 | div.callout[data-callout-metadata*="w-#{$font-weight}-all"], 16 | div.callout[data-callout-metadata*="w-#{$font-weight}-content"] { 17 | .callout-content { 18 | font-weight: $font-weight; 19 | } 20 | } 21 | } 22 | 23 | @include callout-text-font-weight(100); 24 | @include callout-text-font-weight(200); 25 | @include callout-text-font-weight(300); 26 | @include callout-text-font-weight(400); 27 | @include callout-text-font-weight(500); 28 | @include callout-text-font-weight(600); 29 | @include callout-text-font-weight(700); 30 | @include callout-text-font-weight(800); 31 | @include callout-text-font-weight(900); 32 | @include callout-text-font-weight(bold); 33 | @include callout-text-font-weight(bolder); 34 | @include callout-text-font-weight(lighter); -------------------------------------------------------------------------------- /snippets/callouts/horizontal-alignment/horiz-align.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Horizontal Alignment 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*=center-all] div.callout-title, 7 | div.callout[data-callout-metadata*=center-title] div.callout-title { 8 | justify-content: center; 9 | } 10 | 11 | div.callout[data-callout-metadata*=center-all] div.callout-content, 12 | div.callout[data-callout-metadata*=center-content] div.callout-content { 13 | text-align: center; 14 | } 15 | 16 | div.callout[data-callout-metadata*=rtl-all] div.callout-title *, 17 | div.callout[data-callout-metadata*=rtl-all] div.callout-title, 18 | div.callout[data-callout-metadata*=rtl-title] div.callout-title *, 19 | div.callout[data-callout-metadata*=rtl-title] div.callout-title { 20 | direction: rtl !important; 21 | unicode-bidi: bidi-override; 22 | } 23 | 24 | div.callout[data-callout-metadata*=rtl-all] div.callout-content *, 25 | div.callout[data-callout-metadata*=rtl-content] div.callout-content * { 26 | direction: rtl !important; 27 | unicode-bidi: bidi-override; 28 | } 29 | div.callout[data-callout-metadata*=rtl-all] div.callout-content code[class*=language-], 30 | div.callout[data-callout-metadata*=rtl-all] div.callout-content pre[class*=language-], 31 | div.callout[data-callout-metadata*=rtl-content] div.callout-content code[class*=language-], 32 | div.callout[data-callout-metadata*=rtl-content] div.callout-content pre[class*=language-] { 33 | text-align: right; 34 | } 35 | 36 | div.callout[data-callout-metadata*=ltr-all] div.callout-title *, 37 | div.callout[data-callout-metadata*=ltr-all] div.callout-title, 38 | div.callout[data-callout-metadata*=ltr-title] div.callout-title *, 39 | div.callout[data-callout-metadata*=ltr-title] div.callout-title { 40 | direction: ltr !important; 41 | unicode-bidi: bidi-override; 42 | } 43 | 44 | div.callout[data-callout-metadata*=ltr-all] div.callout-content *, 45 | div.callout[data-callout-metadata*=ltr-content] div.callout-content * { 46 | direction: ltr !important; 47 | unicode-bidi: bidi-override; 48 | } 49 | div.callout[data-callout-metadata*=ltr-all] div.callout-content code[class*=language-], 50 | div.callout[data-callout-metadata*=ltr-all] div.callout-content pre[class*=language-], 51 | div.callout[data-callout-metadata*=ltr-content] div.callout-content code[class*=language-], 52 | div.callout[data-callout-metadata*=ltr-content] div.callout-content pre[class*=language-] { 53 | text-align: left; 54 | } 55 | -------------------------------------------------------------------------------- /snippets/callouts/horizontal-alignment/horiz-align.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Horizontal Alignment 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*="center-all"], 7 | div.callout[data-callout-metadata*="center-title"] { 8 | div.callout-title { 9 | justify-content: center; 10 | } 11 | } 12 | 13 | div.callout[data-callout-metadata*="center-all"], 14 | div.callout[data-callout-metadata*="center-content"] { 15 | div.callout-content { 16 | text-align: center; 17 | 18 | } 19 | } 20 | 21 | @mixin callout-dir($dir) { 22 | 23 | div.callout[data-callout-metadata*="#{$dir}-all"], 24 | div.callout[data-callout-metadata*="#{$dir}-title"] { 25 | 26 | div.callout-title *, 27 | div.callout-title { 28 | direction: $dir !important; 29 | unicode-bidi: bidi-override; 30 | } 31 | } 32 | 33 | div.callout[data-callout-metadata*="#{$dir}-all"], 34 | div.callout[data-callout-metadata*="#{$dir}-content"] { 35 | div.callout-content { 36 | * { 37 | direction: $dir !important; 38 | unicode-bidi: bidi-override; 39 | } 40 | 41 | code[class*="language-"], 42 | pre[class*="language-"] { 43 | @if $dir =="rtl" { 44 | text-align: right; 45 | } 46 | 47 | @else { 48 | text-align: left; 49 | } 50 | } 51 | 52 | } 53 | } 54 | } 55 | 56 | @include callout-dir(rtl); 57 | @include callout-dir(ltr); -------------------------------------------------------------------------------- /snippets/callouts/horizontal-alignment/horizontal.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - license: GPLv3 4 | - source: https://github.com/bladeacer/flexcyon 5 | --- 6 | 7 | # Horizontal Alignment 8 | 9 | ## CSS source 10 | [View file here](./horiz-align.css) 11 | 12 | ## SCSS source 13 | [View file here](./horiz-align.scss) -------------------------------------------------------------------------------- /snippets/callouts/list-styling/list-styling.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # List Styling 9 | ## CSS Code 10 | [View file here](./list-styling.css) 11 | 12 | ## SCSS Code 13 | [View file here](./list-styling.scss) -------------------------------------------------------------------------------- /snippets/callouts/list-styling/list-styling.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - List Styling 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | @mixin callout-list($style-type) { 7 | div.callout[data-callout-metadata*="li-#{$style-type}"], 8 | div.callout[data-callout-metadata*="ol-#{$style-type}"] { 9 | ol { 10 | list-style-type: $style-type; 11 | list-style-position: inside; 12 | } 13 | } 14 | div.callout[data-callout-metadata*="li-#{$style-type}"], 15 | div.callout[data-callout-metadata*="ul-#{$style-type}"] { 16 | ul { 17 | list-style-type: $style-type; 18 | list-style-position: inside; 19 | } 20 | } 21 | } 22 | 23 | @include callout-list(none); 24 | @include callout-list(disc); 25 | @include callout-list(circle); 26 | @include callout-list(square); 27 | @include callout-list(decimal); 28 | @include callout-list(cjk-decimal); 29 | @include callout-list(decimal-leading-zero); 30 | @include callout-list(lower-roman); 31 | @include callout-list(upper-roman); 32 | @include callout-list(lower-greek); 33 | @include callout-list(lower-alpha); 34 | @include callout-list(lower-latin); 35 | @include callout-list(upper-alpha); 36 | @include callout-list(upper-latin); 37 | @include callout-list(arabic-indic); 38 | @include callout-list(armenian); 39 | @include callout-list(bengali); 40 | @include callout-list(cambodian); 41 | @include callout-list(khmer); 42 | @include callout-list(cjk-earthly-branch); 43 | @include callout-list(cjk-heavenly-branch); 44 | @include callout-list(cjk-ideographic); 45 | @include callout-list(devanagari); 46 | @include callout-list(ethiopic-numeric); 47 | @include callout-list(georgian); 48 | @include callout-list(gujarati); 49 | @include callout-list(gurmukhi); 50 | @include callout-list(hebrew); 51 | @include callout-list(hiragana); 52 | @include callout-list(hiragana-iroha); 53 | @include callout-list(japanese-formal); 54 | @include callout-list(japanese-informal); 55 | @include callout-list(kannada); 56 | @include callout-list(kannada-iroha); 57 | @include callout-list(katakana); 58 | @include callout-list(katakana-iroha); 59 | @include callout-list(korean-hangul-formal); 60 | @include callout-list(korean-hanja-formal); 61 | @include callout-list(korean-hanja-informal); 62 | @include callout-list(lao); 63 | @include callout-list(lower-armenian); 64 | @include callout-list(malayalam); 65 | @include callout-list(mongolian); 66 | @include callout-list(myanmar); 67 | @include callout-list(oriya); 68 | @include callout-list(persian); 69 | @include callout-list(simp-chinese-formal); 70 | @include callout-list(simp-chinese-informal); 71 | @include callout-list(tamil); 72 | @include callout-list(telugu); 73 | @include callout-list(thai); 74 | @include callout-list(tibetan); 75 | @include callout-list(trad-chinese-formal); 76 | @include callout-list(trad-chinese-informal); 77 | @include callout-list(upper-armenian); 78 | @include callout-list(disclosure-open); 79 | @include callout-list(disclosure-open); -------------------------------------------------------------------------------- /snippets/callouts/popup/popup-w-style-settings.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Popup Callout 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | /* @settings 7 | name: Flexcyon Snippets - Pop Callout 8 | id: flexcyon-snippets-4 9 | settings: 10 | - title: Popup callout animation duration 11 | id: flexcyon-callout-pop-animation-duration 12 | description: Configures the animation duration of popup callouts 13 | type: variable-number 14 | default: 0.2 15 | format: s 16 | */ 17 | 18 | body { 19 | --flexcyon-callout-pop-animation-duration: 0.2s; 20 | } 21 | 22 | .markdown-reading-view { 23 | .callout[data-callout-metadata*="$pop"] { 24 | display: block; 25 | position: absolute; 26 | margin-left: min(-3vw, -40px); 27 | transform: translateY(-70px); 28 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 29 | width: calc(var(--file-line-width)/2 + min(3vw, 40px)); 30 | backdrop-filter: blur(20px); 31 | z-index: 999; 32 | 33 | .callout-title { 34 | margin-top: 3px; 35 | margin-left: 22px; 36 | } 37 | } 38 | 39 | .callout[data-callout-metadata*="$pop"]:hover::before { 40 | display: block; 41 | border: none; 42 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 43 | } 44 | 45 | .callout[data-callout-metadata*="$pop"]::before { 46 | visibility: visible; 47 | content: ">"; 48 | display: block; 49 | position: absolute; 50 | padding: 2px; 51 | color: rgb(var(--callout-color)); 52 | z-index: 1; 53 | } 54 | 55 | .callout[data-callout-metadata*="$pop"]:not(:hover) { 56 | visibility: hidden; 57 | } 58 | } -------------------------------------------------------------------------------- /snippets/callouts/popup/popup.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Popup Callout 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-callout-pop-animation-duration: 0.2s; 8 | } 9 | 10 | .markdown-reading-view { 11 | .callout[data-callout-metadata*="$pop"] { 12 | display: block; 13 | position: absolute; 14 | margin-left: min(-3vw, -40px); 15 | transform: translateY(-70px); 16 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 17 | width: calc(var(--file-line-width)/2 + min(3vw, 40px)); 18 | backdrop-filter: blur(20px); 19 | z-index: 999; 20 | 21 | .callout-title { 22 | margin-top: 3px; 23 | margin-left: 22px; 24 | } 25 | } 26 | 27 | .callout[data-callout-metadata*="$pop"]:hover::before { 28 | display: block; 29 | border: none; 30 | transition: all var(--flexcyon-callout-pop-animation-duration) ease; 31 | } 32 | 33 | .callout[data-callout-metadata*="$pop"]::before { 34 | visibility: visible; 35 | content: ">"; 36 | display: block; 37 | position: absolute; 38 | padding: 2px; 39 | color: rgb(var(--callout-color)); 40 | z-index: 1; 41 | } 42 | 43 | .callout[data-callout-metadata*="$pop"]:not(:hover) { 44 | visibility: hidden; 45 | } 46 | } -------------------------------------------------------------------------------- /snippets/callouts/popup/popup.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_style_settings: true 6 | --- 7 | 8 | # Popup 9 | ## With Style Settings support 10 | [View this file](./popup-w-style-settings.css) 11 | 12 | ## Without Style Settings support 13 | 14 | [View this file](./popup.css) -------------------------------------------------------------------------------- /snippets/callouts/rm/rm-icon.css: -------------------------------------------------------------------------------- 1 | div.callout[data-callout-metadata*="no-icon"] { 2 | .callout-icon { 3 | display: none; 4 | } 5 | } -------------------------------------------------------------------------------- /snippets/callouts/rm/rm-title.css: -------------------------------------------------------------------------------- 1 | div.callout[data-callout-metadata*="no-title"] { 2 | .callout-title-inner { 3 | display: none; 4 | } 5 | } -------------------------------------------------------------------------------- /snippets/callouts/rm/rm.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | --- 5 | 6 | # Remove callout icon/title 7 | ## Remove callout icon 8 | [View file here](./rm-icon.css) 9 | 10 | ## Remove callout title here 11 | [View file here](./rm-title.css) 12 | 13 | > These snippets are too trivial for me to license -------------------------------------------------------------------------------- /snippets/callouts/screenshots/autopsy-closed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/autopsy-closed.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/autopsy-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/autopsy-empty.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/autopsy-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/autopsy-layout.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/autopsy-lunairee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/autopsy-lunairee.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/autopsy-open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/autopsy-open.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/callouts-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/callouts-banner.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/card-decks-images.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/card-decks-images.gif -------------------------------------------------------------------------------- /snippets/callouts/screenshots/clue-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/clue-a.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/clue-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/clue-b.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/clue-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/clue-c.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/clue-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/clue-d.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/comic-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/comic-layout.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/comic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/comic.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/email.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/film-strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/film-strip.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/grid.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/letter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/letter.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/pinned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/pinned.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/profile.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/screen.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/timeline-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/timeline-horizontal.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/timeline-variant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/timeline-variant.png -------------------------------------------------------------------------------- /snippets/callouts/screenshots/timeline-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/callouts/screenshots/timeline-vertical.png -------------------------------------------------------------------------------- /snippets/callouts/text-decoration/text-decoration.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Text Decoration 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*=dashed-all] .callout-content, 7 | div.callout[data-callout-metadata*=dashed-content] .callout-content { 8 | text-decoration: dashed; 9 | } 10 | 11 | div.callout[data-callout-metadata*=dashed-all] .callout-title, 12 | div.callout[data-callout-metadata*=dashed-title] .callout-title { 13 | text-decoration: dashed; 14 | } 15 | 16 | div.callout[data-callout-metadata*=dotted-all] .callout-content, 17 | div.callout[data-callout-metadata*=dotted-content] .callout-content { 18 | text-decoration: dotted; 19 | } 20 | 21 | div.callout[data-callout-metadata*=dotted-all] .callout-title, 22 | div.callout[data-callout-metadata*=dotted-title] .callout-title { 23 | text-decoration: dotted; 24 | } 25 | 26 | div.callout[data-callout-metadata*=double-all] .callout-content, 27 | div.callout[data-callout-metadata*=double-content] .callout-content { 28 | text-decoration: double; 29 | } 30 | 31 | div.callout[data-callout-metadata*=double-all] .callout-title, 32 | div.callout[data-callout-metadata*=double-title] .callout-title { 33 | text-decoration: double; 34 | } 35 | 36 | div.callout[data-callout-metadata*=overline-all] .callout-content, 37 | div.callout[data-callout-metadata*=overline-content] .callout-content { 38 | text-decoration: overline; 39 | } 40 | 41 | div.callout[data-callout-metadata*=overline-all] .callout-title, 42 | div.callout[data-callout-metadata*=overline-title] .callout-title { 43 | text-decoration: overline; 44 | } 45 | 46 | div.callout[data-callout-metadata*=underline-all] .callout-content, 47 | div.callout[data-callout-metadata*=underline-content] .callout-content { 48 | text-decoration: underline; 49 | } 50 | 51 | div.callout[data-callout-metadata*=underline-all] .callout-title, 52 | div.callout[data-callout-metadata*=underline-title] .callout-title { 53 | text-decoration: underline; 54 | } 55 | 56 | div.callout[data-callout-metadata*=line-through-all] .callout-content, 57 | div.callout[data-callout-metadata*=line-through-content] .callout-content { 58 | text-decoration: line-through; 59 | } 60 | 61 | div.callout[data-callout-metadata*=line-through-all] .callout-title, 62 | div.callout[data-callout-metadata*=line-through-title] .callout-title { 63 | text-decoration: line-through; 64 | } 65 | -------------------------------------------------------------------------------- /snippets/callouts/text-decoration/text-decoration.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # Text Decoration 9 | ## CSS Code 10 | [View file here](./text-decoration.css) 11 | 12 | ## SCSS Code 13 | [View file here](./text-decoration.scss) -------------------------------------------------------------------------------- /snippets/callouts/text-decoration/text-decoration.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Text Decoration 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | @mixin callout-text-decor($callout-name) { 7 | 8 | div.callout[data-callout-metadata*="#{$callout-name}-all"], 9 | div.callout[data-callout-metadata*="#{$callout-name}-content"] { 10 | .callout-content { 11 | text-decoration: #{$callout-name}; 12 | } 13 | } 14 | 15 | div.callout[data-callout-metadata*="#{$callout-name}-all"], 16 | div.callout[data-callout-metadata*="#{$callout-name}-title"] { 17 | .callout-title { 18 | text-decoration: #{$callout-name}; 19 | } 20 | } 21 | } 22 | 23 | @include callout-text-decor(dashed); 24 | @include callout-text-decor(dotted); 25 | @include callout-text-decor(double); 26 | @include callout-text-decor(overline); 27 | @include callout-text-decor(underline); 28 | @include callout-text-decor(line-through); -------------------------------------------------------------------------------- /snippets/callouts/text-transform/text-transform.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Text Transform 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | div.callout[data-callout-metadata*=uppercase-all] div.callout-title .callout-title-inner, 6 | div.callout[data-callout-metadata*=uppercase-title] div.callout-title .callout-title-inner { 7 | text-transform: uppercase; 8 | } 9 | 10 | div.callout[data-callout-metadata*=uppercase-all] div.callout-content *, 11 | div.callout[data-callout-metadata*=uppercase-content] div.callout-content * { 12 | text-transform: uppercase; 13 | } 14 | div.callout[data-callout-metadata*=uppercase-all] div.callout-content * *, 15 | div.callout[data-callout-metadata*=uppercase-content] div.callout-content * * { 16 | text-transform: uppercase; 17 | } 18 | div.callout[data-callout-metadata*=uppercase-all] div.callout-content * code[class*=language-], 19 | div.callout[data-callout-metadata*=uppercase-all] div.callout-content * pre[class*=language-], 20 | div.callout[data-callout-metadata*=uppercase-content] div.callout-content * code[class*=language-], 21 | div.callout[data-callout-metadata*=uppercase-content] div.callout-content * pre[class*=language-] { 22 | text-transform: uppercase; 23 | } 24 | 25 | div.callout[data-callout-metadata*=lowercase-all] div.callout-title .callout-title-inner, 26 | div.callout[data-callout-metadata*=lowercase-title] div.callout-title .callout-title-inner { 27 | text-transform: lowercase; 28 | } 29 | 30 | div.callout[data-callout-metadata*=lowercase-all] div.callout-content *, 31 | div.callout[data-callout-metadata*=lowercase-content] div.callout-content * { 32 | text-transform: lowercase; 33 | } 34 | div.callout[data-callout-metadata*=lowercase-all] div.callout-content * *, 35 | div.callout[data-callout-metadata*=lowercase-content] div.callout-content * * { 36 | text-transform: lowercase; 37 | } 38 | div.callout[data-callout-metadata*=lowercase-all] div.callout-content * code[class*=language-], 39 | div.callout[data-callout-metadata*=lowercase-all] div.callout-content * pre[class*=language-], 40 | div.callout[data-callout-metadata*=lowercase-content] div.callout-content * code[class*=language-], 41 | div.callout[data-callout-metadata*=lowercase-content] div.callout-content * pre[class*=language-] { 42 | text-transform: lowercase; 43 | } 44 | 45 | div.callout[data-callout-metadata*=caps-all] div.callout-title .callout-title-inner, 46 | div.callout[data-callout-metadata*=caps-title] div.callout-title .callout-title-inner { 47 | text-transform: capitalize; 48 | } 49 | 50 | div.callout[data-callout-metadata*=caps-all] div.callout-content *, 51 | div.callout[data-callout-metadata*=caps-content] div.callout-content * { 52 | text-transform: capitalize; 53 | } 54 | div.callout[data-callout-metadata*=caps-all] div.callout-content * *, 55 | div.callout[data-callout-metadata*=caps-content] div.callout-content * * { 56 | text-transform: capitalize; 57 | } 58 | div.callout[data-callout-metadata*=caps-all] div.callout-content * code[class*=language-], 59 | div.callout[data-callout-metadata*=caps-all] div.callout-content * pre[class*=language-], 60 | div.callout[data-callout-metadata*=caps-content] div.callout-content * code[class*=language-], 61 | div.callout[data-callout-metadata*=caps-content] div.callout-content * pre[class*=language-] { 62 | text-transform: capitalize; 63 | } 64 | -------------------------------------------------------------------------------- /snippets/callouts/text-transform/text-transform.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Text Transform 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | @mixin callout-text-transform($transform) { 6 | 7 | div.callout[data-callout-metadata*="#{$transform}-all"], 8 | div.callout[data-callout-metadata*="#{$transform}-title"] { 9 | div.callout-title .callout-title-inner { 10 | @if $transform =="caps" { 11 | text-transform: capitalize; 12 | } 13 | 14 | @else { 15 | text-transform: $transform; 16 | } 17 | } 18 | } 19 | 20 | div.callout[data-callout-metadata*="#{$transform}-all"], 21 | div.callout[data-callout-metadata*="#{$transform}-content"] { 22 | div.callout-content * { 23 | @if $transform =="caps" { 24 | text-transform: capitalize; 25 | } 26 | 27 | @else { 28 | text-transform: $transform; 29 | } 30 | 31 | * { 32 | @if $transform =="caps" { 33 | text-transform: capitalize; 34 | } 35 | 36 | @else { 37 | text-transform: $transform; 38 | } 39 | } 40 | 41 | code[class*="language-"], 42 | pre[class*="language-"] { 43 | @if $transform =="caps" { 44 | text-transform: capitalize; 45 | } 46 | 47 | @else { 48 | text-transform: $transform; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | 55 | @include callout-text-transform(uppercase); 56 | @include callout-text-transform(lowercase); 57 | @include callout-text-transform(caps); -------------------------------------------------------------------------------- /snippets/callouts/text-transform/transform.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - license: GPLv3 4 | - source: https://github.com/bladeacer/flexcyon 5 | --- 6 | 7 | # Horizontal Alignment 8 | 9 | ## CSS source 10 | [View file here](./text-transform.css) 11 | 12 | ## SCSS source 13 | [View file here](./text-transform.scss) -------------------------------------------------------------------------------- /snippets/callouts/title-heading/title-heading.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Title Heading 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | div.callout[data-callout-metadata*=h1-title] .callout-title { 7 | font-size: var(--h1-size); 8 | color: var(--h1-color); 9 | } 10 | div.callout[data-callout-metadata*=h1-title] .callout-icon svg { 11 | color: var(--h1-color); 12 | } 13 | 14 | div.callout[data-callout-metadata*=h2-title] .callout-title { 15 | font-size: var(--h2-size); 16 | color: var(--h2-color); 17 | } 18 | div.callout[data-callout-metadata*=h2-title] .callout-icon svg { 19 | color: var(--h2-color); 20 | } 21 | 22 | div.callout[data-callout-metadata*=h3-title] .callout-title { 23 | font-size: var(--h3-size); 24 | color: var(--h3-color); 25 | } 26 | div.callout[data-callout-metadata*=h3-title] .callout-icon svg { 27 | color: var(--h3-color); 28 | } 29 | 30 | div.callout[data-callout-metadata*=h4-title] .callout-title { 31 | font-size: var(--h4-size); 32 | color: var(--h4-color); 33 | } 34 | div.callout[data-callout-metadata*=h4-title] .callout-icon svg { 35 | color: var(--h4-color); 36 | } 37 | 38 | div.callout[data-callout-metadata*=h5-title] .callout-title { 39 | font-size: var(--h5-size); 40 | color: var(--h5-color); 41 | } 42 | div.callout[data-callout-metadata*=h5-title] .callout-icon svg { 43 | color: var(--h5-color); 44 | } 45 | 46 | div.callout[data-callout-metadata*=h6-title] .callout-title { 47 | font-size: var(--h6-size); 48 | color: var(--h6-color); 49 | } 50 | div.callout[data-callout-metadata*=h6-title] .callout-icon svg { 51 | color: var(--h6-color); 52 | } 53 | -------------------------------------------------------------------------------- /snippets/callouts/title-heading/title-heading.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_scss: true 6 | --- 7 | 8 | # Style Title as heading 9 | ## CSS Code 10 | [View file here](./title-heading.css) 11 | 12 | ## SCSS Code 13 | [View file here](./title-heading.scss) -------------------------------------------------------------------------------- /snippets/callouts/title-heading/title-heading.scss: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Title Heading 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | @mixin callout-title-heading($heading_no) { 7 | div.callout[data-callout-metadata*="#{$heading_no}-title"] { 8 | .callout-title { 9 | font-size: var(--#{$heading_no}-size); 10 | color: var(--#{$heading_no}-color); 11 | } 12 | 13 | .callout-icon svg { 14 | color: var(--#{$heading_no}-color); 15 | } 16 | } 17 | } 18 | 19 | @include callout-title-heading(h1); 20 | @include callout-title-heading(h2); 21 | @include callout-title-heading(h3); 22 | @include callout-title-heading(h4); 23 | @include callout-title-heading(h5); 24 | @include callout-title-heading(h6); -------------------------------------------------------------------------------- /snippets/callouts/vertical-alignment/tategaki.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Tategaki 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | div.callout[data-callout-metadata*="tategaki"] { 6 | div.callout-content { 7 | writing-mode: vertical-rl; 8 | overflow: scroll; 9 | max-width: 95%; 10 | padding-top: 2vh; 11 | padding-bottom: 0px !important; 12 | line-height: 1.667; 13 | margin: auto; 14 | min-height: 0 !important; 15 | max-height: 85vh; 16 | text-indent: 1rem; 17 | 18 | :is(h1, h2, h3, h4, h5, h6) { 19 | margin-top: 0; 20 | line-height: 1.667; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /snippets/callouts/vertical-alignment/vertical-ltr.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Vertical LTR 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | div.callout[data-callout-metadata*="vertical-ltr"] { 6 | div.callout-content { 7 | writing-mode: vertical-lr; 8 | overflow: scroll; 9 | max-width: 95%; 10 | padding-top: 2vh; 11 | padding-bottom: 0px !important; 12 | line-height: 1.667; 13 | margin: auto; 14 | min-height: 0 !important; 15 | max-height: 85vh; 16 | text-indent: 1rem; 17 | 18 | :is(h1, h2, h3, h4, h5, h6) { 19 | margin-top: 0; 20 | line-height: 1.667; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /snippets/callouts/vertical-alignment/vertical.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - license: GPLv3 4 | - source: https://github.com/bladeacer/flexcyon 5 | --- 6 | 7 | # Vertical Alignment 8 | 9 | ## Tategaki (Vertical RTL) 10 | [View file here](./tategaki.css) 11 | 12 | ## Vertical LTR 13 | [View file here](./vertical-ltr.css) -------------------------------------------------------------------------------- /snippets/callouts/writing-mode/writing-mode.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Writing Mode 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | .editor-writing .cm-line, 7 | div.callout[data-callout-metadata*="writing"] .callout-content p { 8 | text-indent: 16px; 9 | white-space: initial; 10 | word-wrap: break-word; 11 | margin-block-end: calc(1.25 * var(--p-spacing)); 12 | } -------------------------------------------------------------------------------- /snippets/callouts/writing-mode/writing-mode.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | --- 6 | 7 | # Writing Mode 8 | [View this file](./writing-mode.css) 9 | -------------------------------------------------------------------------------- /snippets/dataviewjs-cards-deck/README.md: -------------------------------------------------------------------------------- 1 | > [!NOTE] 2 | > For a callout syntax with no dataview code, see https://github.com/ElsaTam/Obsidian-Stuff/blob/main/snippets/callouts/README.md#cards-deck. 3 | 4 | You can embed notes in a list with [dataviewjs](https://github.com/blacksmithgu/obsidian-dataview) and add to the containing element the class `dataview-cards-deck` in order to the snippet to take effect. 5 | 6 | ![cards-decks-embeds](screenshots/card-decks-embeds.gif) 7 | 8 | ````md 9 | ```dataviewjs 10 | let result = await dv.query(`LIST FROM "Path/To/Folder" SORT file.name`) 11 | let values = result.value.values 12 | let embeds = values.map(v => "[" + dv.fileLink(v.path, true) + "](<" + v.path + ">)") 13 | dv.el("p", embeds, { cls: "dataview-cards-deck dataview-wide" }) 14 | ``` 15 | ```` 16 | 17 | In case you have a lot of notes, you can add the class `dataview-wide` and the card decks will take the full length, without changing the readable line length of your editor. 18 | 19 | ``` 20 | | Lorem ipsum dolor sit amet. Nam vel | 21 | | sed felis egestas. Nulla lacinia in | 22 | | nisl vel ornare. | 23 | +----------------------------------------------------+ 24 | | .dataview-cards-deck.dataview-wide | 25 | +----------------------------------------------------+ 26 | | Interdum et malesuada fames ac ante. | 27 | | Maecenas dictum tortor aliquet. Cras | 28 | | eu facilisis justo. Quisque turpis | 29 | | ipsum, finibus | 30 | | +------------------------------------+ | 31 | | | .dataview-cards-deck | | 32 | | +------------------------------------+ | 33 | | In est risus, posuere porta luctus. | 34 | | Aenean tincidunt porttitor varius. Sed | 35 | | nec lectus vel eros molestie. | 36 | ``` 37 | 38 | You can also query images from the files properties and embed them inside a link. In the following example, links to images (`[[image.png]]`) are stored under the property `image`. 39 | 40 | ![cards-decks-images](screenshots/card-decks-images.webp) 41 | 42 | ````md 43 | ```dataviewjs 44 | let result = await dv.query(`TABLE image FROM "Path/To/Folder" WHERE image`); 45 | let values = result.value.values; 46 | let embeds = values.map(v => "[" + dv.fileLink(v[1].path, true) + "](<" + v[0].path + ">)"); 47 | dv.el("p", embeds, { cls: "dataview-cards-deck" }); 48 | ``` 49 | ```` 50 | 51 | **Note on performances** 52 | The rendered cards are only meant to be note preview. In order to improve performance, the snippet uses `content` and `content-visibility` properties. The style of your note might therefore be affected if they are using any cascading properties, but I think this is a good trade-off for small note previews. 53 | 54 | The translation and scaling are only done using `transform` properties, which are trigerring only composite operations. 55 | 56 | In case the snippet is still slow, you can remove the rules found at the end of the code. They add style to the hovering effect (like color change, etc), but are not mandatory to keep the snippet working. So it is safe to remove, it wil decrease the number of layout/paint operations. 57 | 58 | **Note on the code** 59 | If you use a different dataviewjs code to embed your cards, the snippet might not work properly. I'm still beginner when it comes to dataviewjs, so maybe there are other ways to fetch all notes. If you use an other code and the snippet breaks, please contact me and provide the code. I will try to adapt the snippet to make it works for your code. 60 | 61 | **Note for Metabind users** 62 | Metabind makes everything reload everytime you will hover a card containing Metabind elements, and cause lags. The only workaround I have found so far is to disable the hover event that triggers the Metabind feature *after* the embed notes are loaded. For that, I added a second piece of code to add a button that can be clicked after the loading has been done. 63 | ````md 64 | ```dataviewjs 65 | dv.el("button", "Stop popover", { attr: { onclick: ` 66 | let decks = document.querySelectorAll(".dataview-cards-deck"); 67 | for (deck of decks) { 68 | console.log(deck); 69 | let links = deck.querySelectorAll("a.internal-link"); 70 | for (link of links) { 71 | link.addEventListener("mouseover", (e) => { 72 | e.stopImmediatePropagation(); 73 | }) 74 | } 75 | }` }}); 76 | ``` 77 | ```` -------------------------------------------------------------------------------- /snippets/dataviewjs-cards-deck/dataviewjs-cards-deck.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | FAS - Dataview Cards Deck 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | body { 6 | --workleaves-background: var(--background-primary); 7 | --workleaves-foreground: var(--text-normal); 8 | } 9 | 10 | @scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) { 11 | :scope { 12 | --card-gap: 50px; 13 | --card-width: 150px; 14 | --card-height: 300px; 15 | --deck-border-width: 0; 16 | } 17 | ul.dataview-result-list-root-ul { 18 | --border-color-hover: var(--color-accent); 19 | --list-indent: 0; 20 | --list-spacing: 0; 21 | --link-decoration: none; 22 | --link-decoration-hover: none; 23 | --image-shadow-offset: 0; 24 | list-style-type: none; 25 | border: var(--deck-border-width) solid var(--background-secondary); 26 | padding-bottom: var(--padding-bottom) !important; 27 | padding-top: var(--padding-top) !important; 28 | padding-left: var(--padding-left) !important; 29 | padding-right: var(--padding-right) !important; 30 | --border-color: currentColor; 31 | --card-radius: var(--radius-l); 32 | --card-scale-hover: 1.1; 33 | --card-shadow-offset-y: 2px; 34 | --card-shadow-offset-x: -2px; 35 | --card-shadow-blur: 3px; 36 | --card-shadow-opacity: 0.2; 37 | --card-base-translation: calc(-0.5 * (var(--card-width) - var(--card-gap))); 38 | --deck-scrollbar-width: 10px; 39 | --padding-scale-factor: (var(--card-scale-hover) - 1) * var(--card-height); 40 | color: var(--text-muted); 41 | height: calc((var(--card-height) + var(--card-shadow-offset-y) * 2 + var(--card-shadow-blur) * 2) * var(--card-scale-hover) + var(--padding-bottom) + 2 * var(--deck-border-width)); 42 | display: flex; 43 | align-items: center; 44 | justify-content: left; 45 | overflow-x: auto; 46 | --padding-bottom: max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-y) + var(--padding-scale-factor)); 47 | --padding-top: max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-y) + var(--padding-scale-factor)); 48 | --padding-left: calc(-1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-x))); 49 | --padding-right: calc(-1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-x))); 50 | } 51 | ul.dataview-result-list-root-ul > * { 52 | width: var(--card-gap); 53 | transition: transform 0.5s ease-in-out; 54 | transform: translateX(var(--card-base-translation)); 55 | transform-origin: right; 56 | } 57 | ul.dataview-result-list-root-ul > :hover { 58 | transform: translateX(var(--card-base-translation)) scale(var(--card-scale-hover)); 59 | } 60 | ul.dataview-result-list-root-ul > :hover ~ * { 61 | transform: translateX(var(--card-base-translation)) translateX(calc(var(--card-width) - var(--card-gap))); 62 | } 63 | .dataview-result-list-li { 64 | transition: transform 0.5s ease-in-out, filter 0.2s linear; 65 | height: var(--card-height); 66 | vertical-align: middle; 67 | } 68 | .dataview-result-list-li:hover { 69 | --border-color: var(--border-color-hover); 70 | } 71 | .markdown-embed { 72 | --embed-border-start: 0px; 73 | --embed-border-end: 0px; 74 | --embed-max-height: var(--card-height); 75 | --embed-padding: 0px; 76 | } 77 | .markdown-embed-title { 78 | border-top-left-radius: var(--card-radius); 79 | position: absolute; 80 | z-index: 1; 81 | writing-mode: vertical-rl; 82 | background-color: var(--workleaves-background); 83 | padding: var(--size-4-2) 0; 84 | top: 1px; 85 | left: 1px; 86 | box-shadow: 1px 1px 5px black; 87 | } 88 | .dataview-result-list-li:hover .markdown-embed-title { 89 | opacity: 0; 90 | } 91 | :scope .markdown-embed .markdown-preview-view, 92 | .markdown-embed-content { 93 | box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity)); 94 | border-radius: var(--card-radius); 95 | border: 1px solid var(--border-color); 96 | outline: 4px solid var(--workleaves-background); 97 | --font-text-size: xx-small; 98 | width: var(--card-width); 99 | background: var(--workleaves-background); 100 | contain: strict; 101 | content-visibility: auto; 102 | overflow: hidden; 103 | padding: var(--size-2-2); 104 | height: var(--embed-max-height); 105 | } 106 | .dataview-result-list-li > span > a > .image-embed, 107 | .dataview-result-list-li > span > .image-embed { 108 | box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity)); 109 | border-radius: var(--card-radius); 110 | border: 1px solid var(--border-color); 111 | outline: 4px solid var(--workleaves-background); 112 | width: var(--card-width); 113 | height: var(--card-height); 114 | display: block; 115 | } 116 | .dataview-result-list-li > span > a > .image-embed > img, 117 | .dataview-result-list-li > span > .image-embed > img { 118 | border-radius: var(--card-radius); 119 | height: 100%; 120 | width: 100%; 121 | object-fit: cover; 122 | object-position: center; 123 | } 124 | .markdown-embed-content > .markdown-preview-view { 125 | overflow: hidden; 126 | } 127 | .markdown-embed-link { 128 | right: calc(var(--card-gap) - var(--card-width) + 4px); 129 | width: fit-content; 130 | } 131 | .markdown-embed img { 132 | max-height: 150px; 133 | max-width: 100%; 134 | object-fit: cover; 135 | object-position: center; 136 | } 137 | } 138 | @scope (body:not(.is-ios) .dataview-cards-deck) to (.markdown-embed .markdown-embed) { 139 | .ul.dataview-result-list-root-ul::-webkit-scrollbar { 140 | width: var(--deck-scrollbar-width); 141 | height: var(--deck-scrollbar-width); 142 | } 143 | } 144 | /* Remove code bellow in case of performance issues */ 145 | @scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) { 146 | .dataview-result-list-root-ul .markdown-preview-view:hover, 147 | .dataview-result-list-root-ul .markdown-embed-content:hover { 148 | outline: none; 149 | } 150 | .dataview-result-list-root-ul:hover > :not(:hover) { 151 | filter: saturate(0.2); 152 | } 153 | .dataview-result-list-root-ul:hover > :not(:hover), .dataview-result-list-root-ul:hover > :not(:hover) .markdown-preview-view { 154 | color: var(--text-faint); 155 | } 156 | .dataview-result-list-root-ul > :hover ~ * { 157 | z-index: 0; 158 | } 159 | .dataview-result-list-root-ul:hover { 160 | z-index: 1; 161 | } 162 | } 163 | /* Fixes for themes */ 164 | /* Minimal */ /* 165 | @scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) { 166 | ul.dataview-result-list-root-ul .markdown-embed { 167 | padding: 0; 168 | } 169 | }/**/ 170 | -------------------------------------------------------------------------------- /snippets/dataviewjs-cards-deck/screenshots/card-decks-embeds.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/dataviewjs-cards-deck/screenshots/card-decks-embeds.gif -------------------------------------------------------------------------------- /snippets/dataviewjs-cards-deck/screenshots/card-decks-images.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/dataviewjs-cards-deck/screenshots/card-decks-images.webp -------------------------------------------------------------------------------- /snippets/family-tree/README.md: -------------------------------------------------------------------------------- 1 | See documentation here: https://elsatam.github.io/obsidian-fancy-a-story/docs/lists/family-tree.html 2 | 3 | ![family-tree](https://elsatam.github.io/obsidian-fancy-a-story/images/lists/family-tree.webp) -------------------------------------------------------------------------------- /snippets/family-tree/family-tree.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Family Tree 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | ul:has(> li > .tag[href='#family-tree']) { 7 | --list-spacing: 0; 8 | --list-indent: 0; 9 | --connectors-color: var(--background-secondary); 10 | 11 | overflow-x: scroll; 12 | 13 | li:has(> .tag[href='#family-tree']) { 14 | display: none; 15 | } 16 | 17 | .list-bullet { 18 | display: none; 19 | } 20 | 21 | /* Collapse-indicator */ 22 | .list-collapse-indicator { 23 | position: absolute; 24 | opacity: 1; 25 | top: 10px; 26 | left: 50%; 27 | margin: 0; 28 | padding: 0; 29 | transform: translateX(-50%); 30 | display: block; 31 | width: 10px; 32 | height: 10px; 33 | border-radius: 50%; 34 | background: var(--background-primary); 35 | border: 1px solid var(--color-accent); 36 | z-index: 1; 37 | } 38 | .list-collapse-indicator.is-collapsed { 39 | background: var(--color-accent); 40 | } 41 | .list-collapse-indicator:hover { 42 | background: color-mix(in srgb, var(--color-accent), var(--background-primary) 70%); 43 | } 44 | .list-collapse-indicator.is-collapsed:hover { 45 | background: color-mix(in srgb, var(--color-accent), var(--background-primary) 30%); 46 | } 47 | .list-collapse-indicator svg { 48 | display: none; 49 | } 50 | 51 | /* When collapsed */ 52 | li.is-collapsed { 53 | text-wrap: nowrap; 54 | } 55 | li.is-collapsed > ul > * { 56 | display: none; 57 | } 58 | 59 | /* Spouse info tooltip */ 60 | .tag[href='#wed'] { display: none; } 61 | li:has(> .tag[href='#wed']) { 62 | display: none; 63 | position: absolute; 64 | left: 50%; 65 | transform: translateX(-50%); 66 | box-shadow: 0 2px 8px var(--background-modifier-box-shadow); 67 | background-color: rgba(0, 0, 0, 0.9); 68 | color: #ccc; 69 | font-size: var(--font-ui-small); 70 | padding: 5px 12px; 71 | text-align: center; 72 | z-index: var(--layer-tooltip); 73 | top: 0; 74 | } 75 | li:has(> .tag[href='#wed'])::before { 76 | content: "Wed to "; 77 | display: unset; 78 | position: unset; 79 | color: #727272; 80 | } 81 | 82 | /* Spouse ring icon */ 83 | li:has(> ul > li > .tag[href='#wed']) > .list-bullet { 84 | display: inline-block; 85 | float: none; 86 | margin-inline-start: 0; 87 | margin-inline-end: 0.1em; 88 | transform: translateY(-0.2em); 89 | } 90 | li:has(> ul > li > .tag[href='#wed']) > .list-bullet::after { 91 | content: "💍"; 92 | position: static; 93 | margin: 0; 94 | padding: 0; 95 | font-size: 10px; 96 | mask-image: none; 97 | background: none; 98 | box-shadow: none; 99 | } 100 | li:has(> ul > li > .tag[href='#wed']):has(> .list-bullet:hover) > ul > li:has(> .tag[href='#wed']) { 101 | display: block; 102 | } 103 | 104 | /* element with no child, or only a spouse (#wed) */ 105 | li:not(:has(ul)), 106 | li:has(> ul > li:only-child > .tag[href='#wed']) { 107 | text-wrap: nowrap; 108 | .list-collapse-indicator { display: none; } 109 | } 110 | 111 | ul:not(:has(ul))::before, 112 | ul:has(> li:only-child > .tag[href='#wed'])::before { 113 | height: 30px; 114 | } 115 | 116 | li:not(:has(ul))::after, 117 | li:has(> ul > li:only-child > .tag[href='#wed'])::after { 118 | height: 20px; 119 | } 120 | 121 | &, ul { 122 | display: flex; 123 | padding-top: 10px; 124 | margin-top: 0px; 125 | position: relative; 126 | background-color: var(--background-primary); 127 | } 128 | 129 | li { 130 | float: left; 131 | text-align: center; 132 | list-style-type: none; 133 | position: relative; 134 | padding: 20px 5px 0 5px; 135 | margin-inline: auto; 136 | } 137 | 138 | li::before, 139 | li::after { 140 | content: ""; 141 | position: absolute; 142 | top: 0; 143 | right: 50%; 144 | border-top: 1px solid var(--connectors-color); 145 | width: 50%; 146 | height: 10px; 147 | } 148 | 149 | li:has(> .tag[href='#wed'])::after { 150 | content: none; 151 | } 152 | 153 | li::after { 154 | right: auto; 155 | left: 50%; 156 | border-left: 1px solid var(--connectors-color); 157 | } 158 | 159 | /* Remove left-right connectors from elements without any siblings */ 160 | li:only-child::after, 161 | li:only-child::before { 162 | display: none; 163 | } 164 | 165 | /* Remove left connector from first child and connector from last child */ 166 | li:first-child:has(> .tag[href='#wed']) + li::before, 167 | li:first-child:has(> .tag[href='#family-tree']) + li::before, 168 | li:has(+ li:last-child > .tag[href='#wed'])::after, 169 | li:has(+ li:last-child > .tag[href='#family-tree'])::after, 170 | li:first-child::before, 171 | li:last-child::after { 172 | border-top: none; 173 | } 174 | 175 | /* Add downward connectors from parents */ 176 | ul::before { 177 | content: ""; 178 | position: absolute; 179 | top: 0; 180 | right: 50%; 181 | border-left: 1px solid var(--connectors-color); 182 | width: 0px; 183 | height: 20px; 184 | 185 | inset-inline-start: unset; 186 | bottom: unset; 187 | border-inline-end: unset; 188 | } 189 | 190 | /* Reduce heights for downward connectors if multiple childs */ 191 | ul:has(> li:first-child > .tag[href='#wed']):has(> li:nth-child(2):not(:last-child))::before, 192 | ul:not(:has(> li:first-child > .tag[href='#wed'])):has(> li:first-child:not(:last-child))::before { 193 | height: 10px; 194 | } 195 | 196 | /* Remove downward connectors if no child */ 197 | ul:not(:has(> li))::before, 198 | ul:has(> li:first-child:last-child > .tag[href='#wed'])::before { 199 | content: none; 200 | } 201 | 202 | /* Remove upwards connectors if only child, but keep the 10px space for the collapse icon */ 203 | li:not(:has(> .tag[href='#wed'])):first-child:last-child, 204 | li:has(> .tag[href='#wed']) + li:last-child { 205 | 206 | &::after { 207 | content: none; 208 | } 209 | } 210 | } 211 | 212 | @media print { 213 | ul:has(> li > .tag[href='#family-tree']) { 214 | --connectors-color: var(--text-normal); 215 | } 216 | } -------------------------------------------------------------------------------- /snippets/file-explorer-separators/README.md: -------------------------------------------------------------------------------- 1 | This snippet let you add separators in you file explorer. 2 | 3 | Original idea is from Saltmaker. A lot of other people have added nice improvements. I tried to bundle everything in one snippet so you can tweak it easily to achieve the desired result. 4 | 5 | Please refer to the comments in the code to see how you can change the overall styling. 6 | 7 | If you don't want any line, you can find an already existing snippet in [r-u-s-h-i-k-e-s-h collection](https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/File%20explorer%20styling%20-%20Folder%20headers.md) that provide an "only text". 8 | 9 | ![default](screenshots/default.png) ![dashed centered](screenshots/dashed%20centered.png) ![dotted right gold](screenshots/dotted%20right%20gold.png) ![centered red number](screenshots/centered%20red%20number.png) 10 | -------------------------------------------------------------------------------- /snippets/file-explorer-separators/file-explorer-separators.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | File Explorer Separators 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | .nav-folder:has(> :is( 7 | [data-path="01 - Ressources"], 8 | [data-path="03 - Scénarios"], 9 | [data-path="50 - A classer"], 10 | [data-path="99 - Meta"] 11 | /* HERE, change and add first folders that are after a separator */ 12 | )) { 13 | position: relative; 14 | z-index: 1; 15 | 16 | --sep-vertical-spacing: 10px; /* set to 0 for normal spacing */ 17 | --sep-text-color: currentColor; /* color of the separator text */ 18 | --sep-line-color: currentColor; /* color of the separator line */ 19 | --sep-line-thickness: 1px; /* thickness of the separator line */ 20 | --sep-line-style: solid; /* style of the separator line */ 21 | 22 | 23 | &::before { 24 | content: ""; 25 | --padding-x: 10px; 26 | margin-inline-start: calc(24px - var(--padding-x)); 27 | padding: 0 var(--padding-x); 28 | background-color: var(--background-secondary); /* if needed change it to match the file explorer background */ 29 | display: block; 30 | width: fit-content; 31 | color: var(--sep-text-color); 32 | 33 | margin-top: var(--sep-vertical-spacing); 34 | margin-bottom: var(--sep-vertical-spacing); 35 | 36 | /* Optional horizontal margin */ 37 | /* margin-right: auto; margin-left: auto; /* Uncomment for centering */ 38 | /* margin-left: auto; /* Uncomment for righ alignment */ 39 | } 40 | 41 | &::after { 42 | content: ""; 43 | display: block; 44 | position: absolute; 45 | top: calc(0.5em * var(--line-height-tight)); 46 | width: 100%; /* change for something smaller if you don't want the divider to span full length */ 47 | height: 0; 48 | border-top: var(--sep-line-thickness) var(--sep-line-style) var(--sep-line-color); 49 | z-index: -1; 50 | 51 | /* Remove the -webkit-mask-image for no gradient */ 52 | -webkit-mask-image: linear-gradient(to right, 53 | transparent, 54 | black 100px, 55 | black calc(100% - 100px), 56 | transparent 57 | ); 58 | } 59 | } 60 | 61 | 62 | /* HERE, write for each folder the content (text, unicode characters or svg) of the separator */ 63 | .nav-folder:has(> [data-path="01 - Ressources"])::before { content: "HRP"; } 64 | .nav-folder:has(> [data-path="03 - Scénarios"])::before { content: "🎲 RP 🎲"; } 65 | .nav-folder:has(> [data-path="50 - A classer"])::before { content: "ᛩ Workflow ᚹ"; } 66 | .nav-folder:has(> [data-path="99 - Meta"])::before { content: "✶ Other ✶"; } 67 | -------------------------------------------------------------------------------- /snippets/file-explorer-separators/screenshots/centered red number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/file-explorer-separators/screenshots/centered red number.png -------------------------------------------------------------------------------- /snippets/file-explorer-separators/screenshots/dashed centered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/file-explorer-separators/screenshots/dashed centered.png -------------------------------------------------------------------------------- /snippets/file-explorer-separators/screenshots/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/file-explorer-separators/screenshots/default.png -------------------------------------------------------------------------------- /snippets/file-explorer-separators/screenshots/dotted right gold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/file-explorer-separators/screenshots/dotted right gold.png -------------------------------------------------------------------------------- /snippets/gradient-text/gradient-text.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | $gradient-text-colors: ( 4 | "gray": ("light": #6d6d6d, "dark": #808080), 5 | "brown": ("light": #551b04, "dark": #8d6540), 6 | "red": ("light": #960303, "dark": #ff6d6d), 7 | "orange": ("light": #b46300, "dark": #fca533), 8 | "yellow": ("light": #a7900e, "dark": #ffff4d), 9 | "green": ("light": #046404, "dark": #7dff7d), 10 | "cyan": ("light": #2d7577, "dark": #94ffff), 11 | "blue": ("light": #0a0a92, "dark": #86acff), 12 | "purple": ("light": #550e6b, "dark": #c57eff), 13 | "pink": ("light": #c01e98, "dark": #ffc0f4) 14 | ); 15 | $normal-text-colors: ( 16 | "light": #000, "dark": #fff 17 | ); 18 | 19 | 20 | /* @settings 21 | 22 | name: Gradient Text 23 | id: gradient-text 24 | settings: 25 | - 26 | id: gradient-text-color-1 27 | title: Color 1 28 | type: variable-select 29 | allowEmpty: false 30 | default: purple 31 | options: 32 | - gray 33 | - brown 34 | - red 35 | - orange 36 | - yellow 37 | - green 38 | - cyan 39 | - blue 40 | - purple 41 | - pink 42 | - 43 | id: gradient-text-color-2 44 | title: Color 2 45 | type: variable-select 46 | allowEmpty: false 47 | default: blue 48 | options: 49 | - gray 50 | - brown 51 | - red 52 | - orange 53 | - yellow 54 | - green 55 | - cyan 56 | - blue 57 | - purple 58 | - pink 59 | */ 60 | 61 | body { 62 | --gradient-text-color-1: purple; 63 | --gradient-text-color-2: blue; 64 | } 65 | 66 | .markdown-rendered:not([class*="columns-"]) { 67 | p:not(:has(img)) { 68 | background-image: var(--gradient-text-top), var(--gradient-text-bottom); 69 | background-size: 100% calc(4em * var(--line-height-normal)); 70 | background-position: left top, left calc(var(--gradient-text-lines) * 1em * var(--line-height-normal)); 71 | background-clip: text; 72 | color: transparent; 73 | } 74 | } 75 | 76 | @function str-replace($string, $search, $replace: '') { 77 | $index: str-index($string, $search); 78 | 79 | @if $index { 80 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 81 | } 82 | 83 | @return $string; 84 | } 85 | 86 | @each $key, $tones in $gradient-text-colors { 87 | @container style(--gradient-text-color-1: #{$key}) { 88 | @each $tone, $c in $tones { 89 | $c_: str-replace(#{$c}, "#"); 90 | $t_: str-replace(#{map.get($normal-text-colors, $tone)}, "#"); 91 | .theme-#{$tone} .app-container { 92 | --gradient-text-top: url(#{"\"data:image/svg+xml,%3Csvg width='200' height='40' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='LG1'%3E%3Cstop style='stop-color:%23" + $t_ + ";' offset='0' /%3E%3Cstop style='stop-color:%23" + $c_ + ";' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient id='LG2'%3E%3Cstop style='stop-color:%23" + $c_ + ";' offset='0' /%3E%3Cstop style='stop-color:%23" + $t_ + ";' offset='1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect style='fill:url(%23LG1);' width='200' height='10' x='0' y='0' /%3E%3Crect style='fill:url(%23LG2);' width='200' height='10' x='0' y='10' /%3E%3C/svg%3E%0A\""}); 93 | } 94 | } 95 | } 96 | @container style(--gradient-text-color-2: #{$key}) { 97 | @each $tone, $c in $tones { 98 | $c_: str-replace(#{$c}, "#"); 99 | $t_: str-replace(#{map.get($normal-text-colors, $tone)}, "#"); 100 | .theme-#{$tone} .app-container { 101 | --gradient-text-bottom: url(#{"\"data:image/svg+xml,%3Csvg width='200' height='40' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='LG3'%3E%3Cstop style='stop-color:%23" + $t_ + ";' offset='0' /%3E%3Cstop style='stop-color:%23" + $c_ + ";' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient id='LG4'%3E%3Cstop style='stop-color:%23" + $c_ + ";' offset='0' /%3E%3Cstop style='stop-color:%23" + $t_ + ";' offset='1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect style='fill:url(%23LG3);' width='200' height='10' x='0' y='20' /%3E%3Crect style='fill:url(%23LG4);' width='200' height='10' x='0' y='30' /%3E%3C/svg%3E%0A\""}); 102 | } 103 | } 104 | } 105 | } -------------------------------------------------------------------------------- /snippets/list-styling/README.md: -------------------------------------------------------------------------------- 1 | This snippet let you customize list styling in live preview and preview modes, for both ordered and unordered lists, up to 6 depth-levels. No more all-the-same numberings and bullets. You can now change the way your list items are marked and use counters such as (*a, b, c, d, e, f*), or (*I, II, III, IV, V, VI*). 2 | 3 | > [!TIP] 4 | > It is recommended to use this plugin with the Style settings plugin (see below). 5 | 6 | # Usage 7 | 8 | Just write your list as always, the underlying markdown does not change. 9 | 10 | > [!NOTE] 11 | > This snippet doesn't affect source view on purpose. If it did, it would hide the real markdown source. 12 | 13 | By default, the snippet creates this list styles, repeating three different styling: 14 | ![default style](screenshots/default-style.jpg) 15 | 16 | # Style settings 17 | 18 | The snippet is best used with [Style Setting plugin](https://github.com/mgmeyers/obsidian-style-settings) in order to create your own list styles. 19 | 20 | Following features are available: 21 | - [x] Color the numberings, bullets, and indentation guide; 22 | - [x] Choose your own set of 6 numberings styles for ordered list; 23 | - [x] Choose your own set of 6 bullet characters for unordered list; 24 | - [x] Choose only one unique bullet for all unordered list depths; 25 | - [x] Choose the color of the numbering/bullets (including normal text color); 26 | - [x] Make the numberings and bullets bold; 27 | - [x] Make the numberings and bullets glow; 28 | - [x] Choose a specific font for the bullets (unordered list) in case your text font-family scales the unicode characters in an undesired way; 29 | - [x] Enable or disable the styling on the active line on live preview mode; 30 | - [x] Control indentations. 31 | 32 | ## Showcase 33 | 34 | ### Custom style 35 | 36 | In the screenshot below, following settings were used: 37 | - "Use custom color" set to `true` 38 | - Custom color set to `#e519d4` 39 | - "Bold numbering and bullets" set to `true` 40 | - Style depths for ordered lists (from 1 to 6) 41 | 1. upper-alpha 42 | 2. lower-alpha 43 | 3. upper-roman 44 | 4. lower-roman 45 | 5. decimal 46 | 6. lower-greek 47 | - Style depths for unordered lists (from 1 to 6) 48 | 1. ◈ 49 | 2. ◉ 50 | 3. ▣ 51 | 4. ◐ 52 | 5. ◑ 53 | 6. ◱ 54 | 55 | ![custom style](screenshots/custom-style.jpg) 56 | 57 | ### Active line disabled 58 | 59 | By default, the active line is not affected by the change of numbering/bullet. This let you see the underlying markdown without having to switch to source mode, and ease the access to the markdown list marker (`- `, `1. `, `2. `, etc.) 60 | 61 | ![active line disabled](screenshots/active-line.jpg) 62 | 63 | This behavior can be changed and the styling can be enabled on active line from the style settings. 64 | 65 | ### Glow 66 | 67 | You can enable a soft glow for your numbering and bullets. 68 | 69 | ![glow](screenshots/glow.jpg) 70 | 71 | ### Bullet font 72 | 73 | While working on this snippet with someone else, we found out that some fonts change the scales of the unicode characters and make the bullets look odd. The option to use a specific font for the bullets can fix this. 74 | 75 | ![custom font](screenshots/custom-font.jpg) 76 | 77 | ### Emoji list (unordered lists) 78 | 79 | Because the bullets for the unordered lists are essentialy just characters, you can use any Unicode Character supported by your font, such as emojis. You can either use the unicode css code such as `\1f355` (🍕) (first style settings example), or directly copy paste the character (second style settings example). 80 | 81 | ![emojis](screenshots/emojis.jpg) 82 | 83 | ### Icon list (unordered lists) 84 | 85 | Some fonts take advantage of the Unicode [Private Usage Area](https://en.wikipedia.org/wiki/Private_Use_Areas) to define their own icons directly as unicode character in the font. This is for example the case for [Lucide](https://lucide.dev/), [Font Awesome](https://fontawesome.com/), etc. As long as Obsidian have access to such a font, you can use their icons by enabling the custom font for the bullets. 86 | 87 | There are several ways to access such font: 88 | - Add a css-snippet with a `@font-face` linking to the web hosted font file. **Only works online**. 89 | ```css 90 | /* Enable Lucide Icons using the font "LucideIcons" */ 91 | @font-face { 92 | font-family: 'lucide'; 93 | src: url(https://unpkg.com/lucide-static@latest/font/lucide.ttf) format('truetype'); 94 | } 95 | ``` 96 | - Add a css-snippet with the font in a base64 encoding. You could use the [Custom Font Plugin](https://github.com/pourmand1376/obsidian-custom-font) plugin, or do it manualy following the [Obsidian documentation](https://docs.obsidian.md/Themes/App+themes/Embed+fonts+and+images+in+your+theme). **Works offline**. 97 | - Install the font locally on your machine. **Works offline but only on machine where the font has been installed**. 98 | 99 | To know which icon is using which character if the official website doesn't provide this information, you can use a third party tool to show the glyphs (icons) and their codes. Offline and online solution exists, such as [Torinak](https://torinak.com/font/lsfont.html) (I have no connection with them, it's just my favorites of the ones I've tried). 100 | 101 | ![lucide icons](screenshots/lucide-icons.jpg) -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/active-line.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/active-line.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/banner.png -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/custom-font.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/custom-font.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/custom-style.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/custom-style.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/default-style.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/default-style.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/emojis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/emojis.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/glow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/glow.jpg -------------------------------------------------------------------------------- /snippets/list-styling/screenshots/lucide-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/list-styling/screenshots/lucide-icons.jpg -------------------------------------------------------------------------------- /snippets/newspaper/README.MD: -------------------------------------------------------------------------------- 1 | Add a vintage newspaper style to your notes! 2 | 3 | ![showcase](screenshots/showcase.png) 4 | 5 | # Usage 6 | 7 | > [!IMPORTANT] 8 | > Use ***only one snippet at a time*** in your vault. 9 | 10 | The snippet comes in two versions: 11 | - [`newspaper.css`](newspaper.css): add multiple cssclass to choose only the ones you need 12 | - `newspaper`: mainly changes fonts, and add the horizontal borders. 13 | - `columns-2`, `columns-3` and `columns-4`: create a multiple columns layout (2, 3 or 4 columns) **in reading view**. Header of level 1 are used to stop the column and restart again, as well as any element with the attribute `alt="span"`, so you can use images that span over all columns by writing `![[image.png|span]]`. If you wish to add other headers level to also break the column layout, add them in line 100 (example: `:is(h1, h2, h3)`). 14 | - `wide-page`: makes the page of non readable length so it expends full width. 15 | - `black-and-white`: turns the page in black and white. 16 | - [`newspaper-all-in-one.css`](newspaper-all-in-one.css): add only one cssclass `newspaper` which is a combination of `newspaper` + `columns-3` + `wide-page` + `black-and-white` from the aforementioned snippet, so you don't need to specify all of them everytime. 17 | 18 | # Fonts 19 | 20 | Used fonts are: 21 | - [*Playfair Display*](https://fonts.google.com/specimen/Playfair+Display) for the inline title and small headings (from Google Fonts) 22 | - *Times New Roman* The H1 headings 23 | - [*Spectral*](https://fonts.google.com/specimen/Spectral) for the body (from Google Fonts) 24 | 25 | Google Fonts are imported directly from the website, which means that the fonts are downloaded and you need to be online to use them. If you want to use them offline, download them and either install them on your computer, or [embed them in a css file](https://docs.obsidian.md/Themes/App+themes/Embed+fonts+and+images+in+your+theme). 26 | 27 | # Background image 28 | 29 | In the screenshot, I'm using a transparent background to add a paper effect. This is not included in the snippets. However, I added the code to add your own background easily from an online url. 30 | 31 | Both `newspaper` and `black-and-white` cssclasses are ready to welcome a background image (however if you use both at the same time, only the newspaper one will be applied). 32 | 33 | # Future theme 34 | 35 | This snippet will be part of the theme I'm currently working on (still as cssclasses, not as a default note) if I end up finishing it one day. The snippet will stay available here as a standalone. So no worries. -------------------------------------------------------------------------------- /snippets/newspaper/newspaper-all-in-one.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Newspaper All In One 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | @import url('https://fonts.googleapis.com/css2?&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); 7 | 8 | 9 | .view-content:has(.newspaper) { 10 | background-image: url(''); /* Use the background url of your liking. https://www.transparenttextures.com/ has great choices */ 11 | filter: saturate(0); 12 | } 13 | .newspaper { 14 | --file-line-width: 100%; 15 | --metadata-display-reading: block; 16 | --inline-title-font: "Playfair Display"; 17 | --inline-title-padding-top: var(--inline-title-margin-bottom); 18 | --bold-modifier: 500; 19 | --font-text: Spectral, serif; 20 | --h1-font: "Times New Roman"; 21 | --h1-color: var(--text-normal); 22 | --h1-background: transparent; 23 | --h1-style: italic; 24 | --h1-weight: var(--font-semibold); 25 | --h1-variant: small-caps; 26 | container: newspaper-view / size; 27 | } 28 | .newspaper .inline-title { 29 | text-align: center; 30 | } 31 | .newspaper .inline-title::after { 32 | content: ""; 33 | display: block; 34 | padding-top: var(--inline-title-padding-top); 35 | border-bottom: 2px solid var(--text-normal); 36 | width: calc(100cqw + 2 * var(--file-margins)); 37 | margin-left: calc(50% - 50cqw - var(--file-margins)); 38 | } 39 | @container newspaper-view style(--metadata-display-reading: block) { 40 | .markdown-preview-view .mod-header::after { 41 | content: ""; 42 | display: block; 43 | border-bottom: 2px solid var(--text-normal); 44 | width: calc(100cqw + 2 * var(--file-margins)); 45 | margin-left: calc(50% - 50cqw - var(--file-margins)); 46 | } 47 | } 48 | @container newspaper-view style(--metadata-display-editing: block) { 49 | .markdown-source-view .cm-contentContainer::before { 50 | content: ""; 51 | position: absolute; 52 | border-bottom: 2px solid var(--text-normal); 53 | left: 0; 54 | right: 0; 55 | } 56 | } 57 | .newspaper div:has(> .frontmatter) + div ~ div > h1, 58 | .newspaper .cm-content > .cm-line ~ .HyperMD-header-1 { 59 | border-top: 1px solid var(--text-normal); 60 | } 61 | .newspaper.markdown-preview-view h1 { 62 | width: fit-content; 63 | min-width: 300px; 64 | margin-left: auto; 65 | margin-right: auto; 66 | padding-left: 50px; 67 | padding-right: 50px; 68 | } 69 | .newspaper img { 70 | display: block; 71 | margin-left: auto; 72 | margin-right: auto; 73 | max-width: 100%; 74 | } 75 | .newspaper p { 76 | text-align: justify; 77 | } 78 | 79 | .newspaper.markdown-preview-view .markdown-preview-section { 80 | column-count: 3; 81 | column-rule: 1px solid var(--color-base-50); 82 | column-gap: 50px; 83 | } 84 | .newspaper.markdown-preview-view .markdown-preview-section .markdown-preview-pusher, 85 | .newspaper.markdown-preview-view .markdown-preview-section .mod-header, 86 | .newspaper.markdown-preview-view .markdown-preview-section div:has(.frontmatter), 87 | .newspaper.markdown-preview-view .markdown-preview-section :is(h1), 88 | .newspaper.markdown-preview-view .markdown-preview-section *:has(> [alt~="span"]) { 89 | column-span: all; 90 | } -------------------------------------------------------------------------------- /snippets/newspaper/newspaper.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Newspaper 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | @import url('https://fonts.googleapis.com/css2?&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); 7 | 8 | /* Black and white */ 9 | .view-content:has(.black-and-white) { 10 | background-image: url(''); /* Use the background url of your liking. https://www.transparenttextures.com/ has great choices */ 11 | filter: saturate(0); 12 | } 13 | 14 | /* Newspaper */ 15 | .view-content:has(.newspaper) { 16 | background-image: url(''); /* Use the background url of your liking. https://www.transparenttextures.com/ has great choices */ 17 | } 18 | .newspaper { 19 | --metadata-display-reading: block; 20 | --inline-title-font: "Playfair Display"; 21 | --inline-title-padding-top: var(--inline-title-margin-bottom); 22 | --bold-modifier: 500; 23 | --font-text: Spectral, serif; 24 | --h1-font: "Times New Roman"; 25 | --h1-color: var(--text-normal); 26 | --h1-background: transparent; 27 | --h1-style: italic; 28 | --h1-weight: var(--font-semibold); 29 | --h1-variant: small-caps; 30 | container: newspaper-view / size; 31 | } 32 | .newspaper .inline-title { 33 | text-align: center; 34 | } 35 | .newspaper .inline-title::after { 36 | content: ""; 37 | display: block; 38 | padding-top: var(--inline-title-padding-top); 39 | border-bottom: 2px solid var(--text-normal); 40 | width: calc(100cqw + 2 * var(--file-margins)); 41 | margin-left: calc(50% - 50cqw - var(--file-margins)); 42 | } 43 | @container newspaper-view style(--metadata-display-reading: block) { 44 | .markdown-preview-view .mod-header::after { 45 | content: ""; 46 | display: block; 47 | border-bottom: 2px solid var(--text-normal); 48 | width: calc(100cqw + 2 * var(--file-margins)); 49 | margin-left: calc(50% - 50cqw - var(--file-margins)); 50 | } 51 | } 52 | @container newspaper-view style(--metadata-display-editing: block) { 53 | .markdown-source-view .cm-contentContainer::before { 54 | content: ""; 55 | position: absolute; 56 | border-bottom: 2px solid var(--text-normal); 57 | left: 0; 58 | right: 0; 59 | } 60 | } 61 | .newspaper div:has(> .frontmatter) + div ~ div > h1, 62 | .newspaper .cm-content > .cm-line ~ .HyperMD-header-1 { 63 | border-top: 1px solid var(--text-normal); 64 | } 65 | .newspaper.markdown-preview-view h1 { 66 | width: fit-content; 67 | min-width: 300px; 68 | margin-left: auto; 69 | margin-right: auto; 70 | padding-left: 50px; 71 | padding-right: 50px; 72 | } 73 | .newspaper img { 74 | display: block; 75 | margin-left: auto; 76 | margin-right: auto; 77 | max-width: 100%; 78 | } 79 | .newspaper p { 80 | text-align: justify; 81 | } 82 | 83 | /* Wide page*/ 84 | .wide-page { 85 | --file-line-width: 100%; 86 | } 87 | 88 | /* Columns */ 89 | .columns-2.markdown-preview-view .markdown-preview-section { 90 | column-count: 2; 91 | } 92 | .columns-3.markdown-preview-view .markdown-preview-section { 93 | column-count: 3; 94 | } 95 | .columns-4.markdown-preview-view .markdown-preview-section { 96 | column-count: 4; 97 | } 98 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section { 99 | column-rule: 1px solid var(--color-base-50); 100 | column-gap: 50px; 101 | } 102 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section .markdown-preview-pusher, 103 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section .mod-header, 104 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section div:has(.frontmatter), 105 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section :is(h1), 106 | :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section *:has(> [alt~="span"]) { 107 | column-span: all; 108 | } -------------------------------------------------------------------------------- /snippets/newspaper/screenshots/showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/newspaper/screenshots/showcase.png -------------------------------------------------------------------------------- /snippets/note-accent-colors/README.md: -------------------------------------------------------------------------------- 1 | This snippet provides 6 css classes to add a custom accent color on specific notes. 2 | 3 | # Usage 4 | 5 | Add one of the following css class to the property of a note: 6 | - note-acent-1 7 | - note-acent-2 8 | - note-acent-3 9 | - note-acent-4 10 | - note-acent-5 11 | - note-acent-6 12 | 13 | # Screenshots with default colors (default obisidian theme) 14 | 15 | ![note-accent-1](screenshots/note-accent-1.jpg) 16 | ![note-accent-2](screenshots/note-accent-2.jpg) 17 | ![note-accent-3](screenshots/note-accent-3.jpg) 18 | ![note-accent-4](screenshots/note-accent-4.jpg) 19 | ![note-accent-5](screenshots/note-accent-5.jpg) 20 | ![note-accent-6](screenshots/note-accent-6.jpg) 21 | 22 | # Style settings 23 | 24 | The snippet offers settings that can be tweaked with [Style Setting plugin](https://github.com/mgmeyers/obsidian-style-settings) in case you want to change the 6 default colors. 25 | 26 | ![style settings](screenshots/note-accent-style-settings.jpg) 27 | 28 | # Conflict with other themes and styling 29 | 30 | The goal of this plugin is to override the vault accent color on specific notes. So it should also override the colors of the theme if the redefine the accent color. 31 | 32 | However, some themes use the accent color to style other elements, such as bold or italic texts. If those elements are not using the accent color in the Obsidian default theme, this snippet will probably not apply the new note accent color on them. The reason behind this is that the note-accent-colors are computed at the level of the markdown view in the DOM, and any color using the accent color need to be recomputed at the same level (or deeper) to take into account the changes. I tried to cover all the cases in the Obsidian default theme but I didn't try to cover the cases in other themes because they are so many. However, if you would want this snippet to support a specific theme, feel free to ask and I will do my best to provide an extended snippet. -------------------------------------------------------------------------------- /snippets/note-accent-colors/note-accent-colors.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Note Accent Colors 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | /* @settings 7 | 8 | name: Note accent color 9 | id: note-accent-color 10 | settings: 11 | - 12 | id: note-accent-1 13 | title: Note accent Color 1 14 | type: variable-themed-color 15 | opacity: false 16 | format: hsl-split 17 | default-light: '#ef476f' 18 | default-dark: '#ce3f61' 19 | - 20 | id: note-accent-2 21 | title: Note accent Color 2 22 | type: variable-themed-color 23 | opacity: false 24 | format: hsl-split 25 | default-light: '#f78c6b' 26 | default-dark: '#d57a5e' 27 | - 28 | id: note-accent-3 29 | title: Note accent Color 3 30 | type: variable-themed-color 31 | opacity: false 32 | format: hsl-split 33 | default-light: '#ffba1a' 34 | default-dark: '#dca119' 35 | - 36 | id: note-accent-4 37 | title: Note accent Color 4 38 | type: variable-themed-color 39 | opacity: false 40 | format: hsl-split 41 | default-light: '#0a916e' 42 | default-dark: '#07a47b' 43 | - 44 | id: note-accent-5 45 | title: Note accent Color 5 46 | type: variable-themed-color 47 | opacity: false 48 | format: hsl-split 49 | default-light: '#118ab2' 50 | default-dark: '#0d76a3' 51 | - 52 | id: note-accent-6 53 | title: Note accent Color 6 54 | type: variable-themed-color 55 | opacity: false 56 | format: hsl-split 57 | default-light: '#073b4c' 58 | default-dark: '#1f5e6e' 59 | 60 | */ 61 | 62 | body.theme-light { 63 | --note-accent-1-h: 345.7; 64 | --note-accent-1-s: 84%; 65 | --note-accent-1-l: 60.8%; 66 | 67 | --note-accent-2-h: 14.1; 68 | --note-accent-2-s: 89.7%; 69 | --note-accent-2-l: 69.4%; 70 | 71 | --note-accent-3-h: 42; 72 | --note-accent-3-s: 82%; 73 | --note-accent-3-l: 48%; 74 | 75 | --note-accent-4-h: 164; 76 | --note-accent-4-s: 87%; 77 | --note-accent-4-l: 30%; 78 | 79 | --note-accent-5-h: 194.9; 80 | --note-accent-5-s: 82.6%; 81 | --note-accent-5-l: 38.2%; 82 | 83 | --note-accent-6-h: 194.8; 84 | --note-accent-6-s: 83.1%; 85 | --note-accent-6-l: 16.3%; 86 | } 87 | 88 | body.theme-dark { 89 | --note-accent-1-h: 346; 90 | --note-accent-1-s: 59%; 91 | --note-accent-1-l: 53%; 92 | 93 | --note-accent-2-h: 14; 94 | --note-accent-2-s: 59%; 95 | --note-accent-2-l: 60%; 96 | 97 | --note-accent-3-h: 42; 98 | --note-accent-3-s: 80%; 99 | --note-accent-3-l: 48%; 100 | 101 | --note-accent-4-h: 164; 102 | --note-accent-4-s: 92%; 103 | --note-accent-4-l: 34%; 104 | 105 | --note-accent-5-h: 198; 106 | --note-accent-5-s: 85%; 107 | --note-accent-5-l: 35%; 108 | 109 | --note-accent-6-h: 192; 110 | --note-accent-6-s: 56%; 111 | --note-accent-6-l: 28%; 112 | } 113 | 114 | .note-accent-1 { 115 | --accent-h: var(--note-accent-1-h); 116 | --accent-s: var(--note-accent-1-s); 117 | --accent-l: var(--note-accent-1-l); 118 | } 119 | .note-accent-2 { 120 | --accent-h: var(--note-accent-2-h); 121 | --accent-s: var(--note-accent-2-s); 122 | --accent-l: var(--note-accent-2-l); 123 | } 124 | .note-accent-3 { 125 | --accent-h: var(--note-accent-3-h); 126 | --accent-s: var(--note-accent-3-s); 127 | --accent-l: var(--note-accent-3-l); 128 | } 129 | .note-accent-4 { 130 | --accent-h: var(--note-accent-4-h); 131 | --accent-s: var(--note-accent-4-s); 132 | --accent-l: var(--note-accent-4-l); 133 | } 134 | .note-accent-5 { 135 | --accent-h: var(--note-accent-5-h); 136 | --accent-s: var(--note-accent-5-s); 137 | --accent-l: var(--note-accent-5-l); 138 | } 139 | .note-accent-6 { 140 | --accent-h: var(--note-accent-6-h); 141 | --accent-s: var(--note-accent-6-s); 142 | --accent-l: var(--note-accent-6-l); 143 | } 144 | 145 | /* Recomputation at the note level */ 146 | .markdown-source-view, 147 | .markdown-preview-view { 148 | /* Recompute the --color-accent variables */ 149 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 150 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 151 | --color-accent-1: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15)); 152 | --color-accent-2: hsl(calc(var(--accent-h) - 5), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29)); 153 | 154 | /* Recompute all variables directly depending on --color-accent variables */ 155 | --interactive-accent-hsl: var(--color-accent-hsl); 156 | --interactive-accent: var(--color-accent); 157 | --interactive-accent-hover: var(--color-accent-1); 158 | --text-accent: var(--color-accent-1); 159 | --text-accent-hover: var(--color-accent-2); 160 | 161 | /* Recompute everything else */ 162 | 163 | /* Links */ 164 | --link-color: var(--text-accent); 165 | --link-color-hover: var(--text-accent-hover); 166 | --link-external-color: var(--text-accent); 167 | --link-external-color-hover: var(--text-accent-hover); 168 | --link-unresolved-color: var(--text-accent); 169 | --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); 170 | --list-marker-color-collapsed: var(--text-accent); 171 | 172 | /* Blockquotes */ 173 | --blockquote-border-color: var(--interactive-accent); 174 | 175 | /* Checkboxes */ 176 | --checkbox-color: var(--interactive-accent); 177 | --checkbox-color-hover: var(--interactive-accent-hover); 178 | 179 | /* Tables */ 180 | --table-selection: hsla(var(--color-accent-hsl), 0.1); 181 | --table-selection-border-color: var(--interactive-accent); 182 | --table-drag-handle-color-active: var(--text-on-accent); 183 | 184 | /* Tags */ 185 | --tag-color: var(--text-accent); 186 | --tag-color-hover: var(--text-accent); 187 | --tag-background: hsla(var(--interactive-accent-hsl), 0.1); 188 | --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); 189 | --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); 190 | --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); 191 | 192 | /* Other */ 193 | --text-selection: hsla(var(--interactive-accent-hsl), 0.25); 194 | --icon-color-active: var(--text-accent); 195 | --collapse-icon-color-collapsed: var(--text-accent); 196 | --divider-color-hover: var(--interactive-accent); 197 | --embed-border-start: 2px solid var(--interactive-accent); 198 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 199 | } -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/banner.png -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-1.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-2.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-3.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-4.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-5.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-6.jpg -------------------------------------------------------------------------------- /snippets/note-accent-colors/screenshots/note-accent-style-settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/note-accent-colors/screenshots/note-accent-style-settings.jpg -------------------------------------------------------------------------------- /snippets/tree-view/README.md: -------------------------------------------------------------------------------- 1 | See documentation here: https://elsatam.github.io/obsidian-fancy-a-story/docs/lists/tree-view.html 2 | 3 | ![tree-view](https://elsatam.github.io/obsidian-fancy-a-story/images/lists/tree-view.webp) -------------------------------------------------------------------------------- /snippets/tree-view/tree-view.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Tree View 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | .markdown-rendered ul:not(:is(ul ul)) { 7 | --indentation-guide-reading-indent: -0.8em; 8 | --indentation-guide-width: 2px; 9 | --indentation-guide-color: var(--background-secondary); 10 | --list-bullet-size: 0.8em; 11 | 12 | position: relative; 13 | 14 | li::after { 15 | content: ''; 16 | display: block; 17 | position: absolute; 18 | top: calc(-0.5em * var(--line-height-normal) - var(--indentation-guide-width) * 0.5); 19 | left: calc(-1 * var(--list-indent) + var(--indentation-guide-reading-indent)); 20 | width: calc(var(--list-indent) + 2px); 21 | height: calc(1em * var(--line-height-normal)); 22 | border: solid var(--indentation-guide-color); 23 | border-width: 0 0 var(--indentation-guide-width) var(--indentation-guide-width); 24 | border-bottom-left-radius: var(--radius-m); 25 | pointer-events: none; 26 | } 27 | 28 | &::before, 29 | ul::before { 30 | content: "\200B"; 31 | position: absolute; 32 | display: block; 33 | inset-inline-start: var(--indentation-guide-reading-indent); 34 | border-inline-end: var(--indentation-guide-width) solid var(--indentation-guide-color); 35 | bottom: calc(0.5em * var(--line-height-normal) + 2px + var(--radius-m)); 36 | top: calc(-0.5em * var(--line-height-normal) - var(--indentation-guide-width) * 0.5); 37 | z-index: 1; 38 | } 39 | 40 | .list-bullet { 41 | display: none; 42 | } 43 | 44 | .list-collapse-indicator { 45 | position: absolute; 46 | opacity: 1; 47 | top: calc(0.5em * var(--line-height-normal) - var(--list-bullet-size) * 0.5 + var(--list-spacing)); 48 | left: calc(var(--indentation-guide-reading-indent) - var(--list-bullet-size) * 0.5 + var(--indentation-guide-width) * 0.5); 49 | margin: 0; 50 | padding: 0; 51 | display: block; 52 | width: var(--list-bullet-size); 53 | height: var(--list-bullet-size); 54 | border-radius: 50%; 55 | background: var(--background-primary); 56 | border: 1px solid var(--color-accent); 57 | z-index: 2; 58 | } 59 | .list-collapse-indicator.is-collapsed { 60 | background: var(--color-accent); 61 | } 62 | .list-collapse-indicator:hover { 63 | background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 70%); 64 | } 65 | .list-collapse-indicator.is-collapsed:hover { 66 | background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 30%); 67 | } 68 | .list-collapse-indicator svg { 69 | display: none; 70 | } 71 | 72 | 73 | li:has(li:hover > .list-bullet:last-child), 74 | li:has(.list-bullet:last-child):hover { 75 | &::after { 76 | border-color: var(--color-accent); 77 | } 78 | > ul::before { 79 | border-color: var(--color-accent); 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /snippets/tweak-css-variables/README.md: -------------------------------------------------------------------------------- 1 | > [!CAUTION] 2 | > Work in progress. Still debugging. 3 | 4 | I created this snippet while learning about all the CSS variables that Obsidian gives us control over. [The documentation](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables), while very useful, doesn't show how the variables are connected. So I looked at the Obsidian base css code and created the snippet along the road so I could change and see how the variables impact the final theme. 5 | 6 | > [!IMPORTANT] 7 | > **I do not recommend this snippet for a permanent styling of your vault**. 8 | > - It will broke several chains of referencing variables. 9 | > - There is a high risk of conflict with any other theme or snippet. 10 | > - Values are all hard coded, maintenance will suffer from that. 11 | 12 | That being said, I believe this snippet could help to understand how variables are used in the style of Obsidian and trying things without the need to change any css snippet. I did my best to write down every connexion between the variables, so you can see when a CSS variable is based on another. 13 | 14 | Once you are happy with a result, I would strongly recommend to save the changes in a separate css snippet and not rely on this tool anymore. 15 | 16 | # Usage 17 | 18 | > [!IMPORTANT] 19 | > **Required**: [Style Setting plugin](https://github.com/mgmeyers/obsidian-style-settings) 20 | 21 | - Download [tweak-css-variables](tweak-css-variables.css) css snippet and add it to your Vault's snippets. 22 | - Go in the options of the Style Setting plugin and open the "Tweak CSS variables" section. 23 | - Start exploring and playing with more than 500 different variables and see the changes live! 24 | 25 | I recommend to open the settings in a new window so you can change them and still see the result in your Vault without the need to close the setting pane every time. 26 | 27 | > [!TIP] 28 | > Start with the Foundations sub-section, this is where the base variables are (like `--color-red` or `--background-primary`) and you will see the more global changes. 29 | 30 | # How it works 31 | 32 | I grouped CSS variables by theme, following the same outline as the official documentation. The snippet first modify variables prefixed with `kpr-`, and they are affected to Obsidian's variables only when their group is active. For example, the Obsidian variable `--text-normal` will be set to `--kpr-text-normal` only once "*styling for Text colors*" is enabled. 33 | 34 | I tried to give control over as many variables as possible. I missed a few intentionnaly because they would have been too complex to add. I also computed automatically some `xxx-hover` colors associated to a property, but when I did so it is written in the setting description. 35 | 36 | > [!WARNING] 37 | > - Only thought for PC, not mobile, not print. 38 | > - Default values are hardcoded base on the Obsidian default theme. 39 | 40 | # Outline 41 | 42 |
43 | 44 | Outline with number of variables in each section 45 | 46 | Each checkbox `☑` corresponds to a group of variables that are all enabled together. 47 | 48 | ```css 49 | Tweak CSS variables (593) 50 | ├─ Components (139) 51 | │ ├─ ☑ Button (1) 52 | │ ├─ ☑ Checkbox (8) 53 | │ ├─ ☑ Dialog (3) 54 | │ ├─ ☑ Dragging (2) 55 | │ ├─ ☑ Dropdown (5) 56 | │ ├─ ☑ Indentation guides (7) 57 | │ ├─ ☑ Modal (10) 58 | │ ├─ ☑ Multi-select (15) 59 | │ ├─ ☑ Navigation (27) 60 | │ │ ├─ Items (17) 61 | │ │ ├─ Indentation guides and collapse icons (4) 62 | │ │ ├─ Headings (6) 63 | │ ├─ ☑ Popover (6) 64 | │ ├─ ☑ Prompt (6) 65 | │ ├─ ☑ Slider (8) 66 | │ ├─ ☑ Tabs (18) 67 | │ ├─ ☑ Tab stacks (8) 68 | │ ├─ ☑ Text input (4) 69 | │ ├─ ☑ Toggle (11) 70 | │ │ ├─ Small toggle (4) 71 | ├─ Editor (241) 72 | │ ├─ ☑ Blockquote (5) 73 | │ ├─ ☑ Callout (26) 74 | │ │ ├─ Type colors (14) 75 | │ ├─ ☑ Code (15) 76 | │ │ ├─ Syntax highlighting (11) 77 | │ ├─ ☑ Collapse icon (2) 78 | │ ├─ ☑ Embed (9) 79 | │ ├─ ☑ File (9) 80 | │ ├─ ☑ Headings (43) 81 | │ │ ├─ H1 (7) 82 | │ │ ├─ H2 (7) 83 | │ │ ├─ H3 (7) 84 | │ │ ├─ H4 (7) 85 | │ │ ├─ H5 (7) 86 | │ │ ├─ H6 (7) 87 | │ ├─ ☑ Horizontal rules (2) 88 | │ ├─ ☑ Inline title (8) 89 | │ ├─ ☑ Link (14) 90 | │ ├─ ☑ List (15) 91 | │ ├─ ☑ PDF View (6) 92 | │ ├─ ☑ Properties (35) 93 | │ │ ├─ Properties container (9) 94 | │ │ ├─ Individual properties (26) 95 | │ │ │ ├─ Divider (4) 96 | │ │ │ ├─ Property (7) 97 | │ │ │ ├─ Labels (8) 98 | │ │ │ ├─ Inputs (7) 99 | │ ├─ ☑ Table (38) 100 | │ │ ├─ Table header (8) 101 | │ │ ├─ Table text (3) 102 | │ │ ├─ Table column (5) 103 | │ │ ├─ Table row (4) 104 | │ │ ├─ Table selection (6) 105 | │ │ ├─ Table drag handle (4) 106 | │ │ ├─ Table "add" button (3) 107 | │ ├─ ☑ Tag (14) 108 | ├─ Foundations (146) 109 | │ ├─ ☑ Borders (1) 110 | │ ├─ ☑ Base colors (12) 111 | │ ├─ ☑ Extended colors (8) 112 | │ ├─ ☑ Black and white (2) 113 | │ ├─ ☑ Semantic colors (34) 114 | │ │ ├─ Surface colors (16) 115 | │ │ ├─ Interactive colors (5) 116 | │ │ ├─ Text colors (13) 117 | │ │ │ ├─ Text foreground colors (10) 118 | │ │ │ ├─ Text background colors (2) 119 | │ │ │ ├─ Caret color (1) 120 | │ ├─ ☑ Icons (17) 121 | │ │ ├─ Icon sizes (10) 122 | │ ├─ ☑ Layers (10) 123 | │ ├─ ☑ Radiuses (4) 124 | │ ├─ ☑ Shadow (8) 125 | │ ├─ ☑ Spacing (16) 126 | │ ├─ Typography (34) 127 | │ │ ├─ ☑ Font (5) 128 | │ │ ├─ ☑ Font size (9) 129 | │ │ ├─ ☑ Font weight (9) 130 | │ │ ├─ ☑ Text formatting (6) 131 | │ │ ├─ ☑ Line height (2) 132 | │ │ ├─ ☑ Paragraph spacing (3) 133 | ├─ Plugins (34) 134 | │ ├─ ☑ Canvas (9) 135 | │ │ ├─ Palette (6) 136 | │ ├─ ☑ File explorer (3) 137 | │ ├─ ☑ Graph (8) 138 | │ ├─ ☑ Search (5) 139 | │ ├─ ☑ Sync (9) 140 | ├─ Window (33) 141 | │ ├─ ☑ Divider (4) 142 | │ ├─ ☑ Ribbon (4) 143 | │ ├─ ☑ Scrollbar (3) 144 | │ ├─ ☑ Sidebar (2) 145 | │ ├─ ☑ Status bar (7) 146 | │ ├─ ☑ Vault profile (4) 147 | │ ├─ ☑ Window frame (8) 148 | │ ├─ ☑ Workspace (1) 149 | ``` 150 | 151 |
152 | 153 | # Bugs, errors and typos 154 | 155 | I spent several hours doing copy/pasting and repetitive actions. There is a high risk that I did some errors. As there are almost 600 variables that this snippet can override, I couldn't try them all. Yet. Eventually, I hope having the patience to try them all. Meanwhile, be warned that bugs can happend. If you see one, please contact me so I can fix it as quick as possible :smiley: 156 | 157 | # Separate snippet for the settings pannel 158 | 159 | Because this snippet can result in a very long section in the Style Settings plugin's parameters, I decided to write another css snippet to change the visual appearance of the settings pane just for the *Tweak CSS variables* group and reduce its size. You can download the file [tweak-css-variables-style](tweak-css-variables-style.css) if you want the same result (minus your own theme). 160 | 161 | # Screenshots 162 | 163 | All the screenshots uses the tweak-css-variables-style snippet. 164 | 165 | ## Base colors 166 | 167 | ![base_colors](screenshots/base_colors.png) 168 | 169 | ## Code 170 | 171 | ![code](screenshots/code.png) 172 | 173 | ## Callout 174 | 175 | ![callouts](screenshots/callouts.png) 176 | 177 | ## List 178 | 179 | ### Example 1 180 | 181 | - **Components > Indentation guides** 182 | - Border width: `3px` 183 | - Border color: `#ECFF001F` 184 | - Width of the indent in read mode: `-1.2em` 185 | - **Editor > List** 186 | - Indentation width for nested items: `4em` 187 | - Marker color: `#E3ED70` 188 | - Bullet border width: `2px` 189 | - Bullet border style: `solid` 190 | - Bullet border color: `#E45811` 191 | - Bullet width/height: `0.8em` 192 | - Bullet transform property: `translateX(-5px)` 193 | - list-style-type for numbered list: `upper-roman` 194 | 195 | ![list 1](screenshots/list_1.png) 196 | 197 | ### Example 2 198 | 199 | - **Editor > Collapse icon** 200 | - Icon color (collapsed): `#E45811` 201 | 202 | - **Editor > List** 203 | - Vertical spacing between lines: `0em` 204 | - Marker for collapsed items: `#E45811` 205 | - Bullet radius: `0%` 206 | - Bullet transform property: `rotate(45deg)` 207 | 208 | ![list 2](screenshots/list_2.png) 209 | 210 | ## Text formatting 211 | 212 | - **Foundations > Typography > Text formatting** 213 | - Added weight for bolded text: `400` 214 | - Bold text color: `#93EB9C` 215 | - Italic text color: `#75E8D6` 216 | 217 | ![text formatting](screenshots/text_formatting.png) -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/base_colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/base_colors.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/callouts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/callouts.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/code.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/list_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/list_1.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/list_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/list_2.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/settings.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/screenshots/text_formatting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElsaTam/Obsidian-Stuff/2ef9a2072fd439d25531b5622f79985767031934/snippets/tweak-css-variables/screenshots/text_formatting.png -------------------------------------------------------------------------------- /snippets/tweak-css-variables/tweak-css-variables-style.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Tweak CSS Variables, settings styling 3 | Author: ElsaTam (Kapirklaa in Discord) 4 | */ 5 | 6 | /* Add a CSS icon */ 7 | .setting-item-heading[data-id="tweak-css-variables"] .setting-item-name .style-settings-filter-result-count::before { 8 | content: ''; 9 | background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg'); 10 | background-repeat: no-repeat; 11 | background-position: bottom center; 12 | background-size: contain; 13 | display: inline-block; 14 | height: 1em; 15 | width: 1em; 16 | margin-inline-end: var(--size-4-2); 17 | margin-bottom: -2px; 18 | } 19 | 20 | 21 | .setting-item-heading[data-id="tweak-css-variables"]:not(.is-collapsed) + .style-settings-container { 22 | 23 | 24 | /* Color the headers */ 25 | --h1-color: var(--color-blue); 26 | & { 27 | --current-h1-color: hsl(from var(--h1-color) h calc(s * 1) l); 28 | } 29 | & > .style-settings-container { 30 | --current-h1-color: hsl(from var(--h1-color) h calc(s * 0.5) l); 31 | } 32 | & > .style-settings-container > .style-settings-container { 33 | --current-h1-color: hsl(from var(--h1-color) h calc(s * 0.3) l); 34 | } 35 | & .style-settings-heading .setting-item-name { 36 | color: var(--current-h1-color); 37 | } 38 | 39 | /* Layout to see the hiearchical structure */ 40 | & .style-settings-container { 41 | margin-left: 0; 42 | padding: var(--size-4-1) var(--size-2-3) 0 var(--size-4-6); 43 | border-left: 1px solid var(--current-h1-color); 44 | } 45 | 46 | /* Add icons */ 47 | & > .setting-item-heading .setting-item-name .style-settings-collapse-indicator::after { 48 | content:""; 49 | -webkit-mask-repeat: no-repeat; 50 | -webkit-mask-size: contain; 51 | background-color: var(--current-h1-color); 52 | display: inline-flex; 53 | height: 1em; 54 | width: 1em; 55 | vertical-align: middle; 56 | margin-left: 8px; 57 | } 58 | & .setting-item-heading[data-id="header-components"] .setting-item-name .style-settings-collapse-indicator::after { 59 | -webkit-mask-image: url('data:image/svg+xml, '); 60 | } 61 | & .setting-item-heading[data-id="header-editor"] .setting-item-name .style-settings-collapse-indicator::after { 62 | -webkit-mask-image: url('data:image/svg+xml, '); 63 | } 64 | & .setting-item-heading[data-id="header-foundations"] .setting-item-name .style-settings-collapse-indicator::after { 65 | -webkit-mask-image: url('data:image/svg+xml, '); 66 | } 67 | & .setting-item-heading[data-id="header-plugins"] .setting-item-name .style-settings-collapse-indicator::after { 68 | -webkit-mask-image: url('data:image/svg+xml, '); 69 | } 70 | & .setting-item-heading[data-id="header-window"] .setting-item-name .style-settings-collapse-indicator::after { 71 | -webkit-mask-image: url('data:image/svg+xml, '); 72 | } 73 | 74 | 75 | /* Disable the settings when not used */ 76 | & .setting-item.mod-toggle:has(.checkbox-container:not(.is-enabled)) ~ :is(.setting-item, .style-settings-container) { 77 | .setting-item-info, 78 | input, 79 | .pickr, 80 | .pickr-reset, 81 | .clickable-icon, 82 | .slider, 83 | select { 84 | opacity: 0.5; 85 | pointer-events: none; 86 | } 87 | } 88 | 89 | /* Change the color of the "Enable styling" text */ 90 | & .setting-item.mod-toggle { 91 | &:has(.checkbox-container:not(.is-enabled)) .setting-item-name { 92 | color: var(--color-orange); 93 | } 94 | &:has(.checkbox-container.is-enabled) .setting-item-name { 95 | color: var(--color-green); 96 | } 97 | & .setting-item-name { 98 | font-weight: var(--font-bold); 99 | } 100 | } 101 | 102 | 103 | /* More compact color pickers */ 104 | --pickr-size: 1em; 105 | & .pickr button { 106 | width: var(--pickr-size); 107 | height: var(--pickr-size); 108 | &::after, 109 | &::before { 110 | border-radius: 50%; 111 | } 112 | } 113 | & .pickr-reset button { 114 | padding: 4px; 115 | margin-left: 8px; 116 | height: fit-content; 117 | & svg { 118 | width: var(--pickr-size); 119 | height: var(--pickr-size); 120 | } 121 | } 122 | & .themed-color-wrapper { 123 | display: flex; 124 | gap: 8px; 125 | & > div { 126 | margin: 0; 127 | padding: calc(var(--pickr-size) * 0.3); 128 | background: var(--color-base-00); 129 | } 130 | } 131 | 132 | 133 | /* Default values info as a tooltip */ 134 | & .setting-item { 135 | & .setting-item-info { 136 | position: relative; 137 | & .setting-item-description div { 138 | display: none; 139 | position: absolute; 140 | top: 50%; 141 | transform: translateY(-50%); 142 | right: 0; 143 | max-width: 70%; 144 | background: var(--background-primary-alt); 145 | padding: 5px; 146 | border-radius: var(--radius-s); 147 | box-shadow: var(--shadow-s); 148 | } 149 | } 150 | & .setting-item-control { 151 | flex: none; 152 | } 153 | &:has(.clickable-icon[aria-label*="Restore"]:hover, .pickr-reset button:hover) .setting-item-description div { 154 | display: block; 155 | } 156 | } 157 | 158 | /* Title and description on the same line */ 159 | & .setting-item:not(.style-settings-info-text) .setting-item-info:has(.setting-item-description:not(:empty)) { 160 | & > div { 161 | display: inline; 162 | } 163 | & .setting-item-name { 164 | 165 | &::after { 166 | content: ""; 167 | border-right: 1px solid var(--color-base-30); 168 | margin: 0 5px; 169 | vertical-align: middle; 170 | } 171 | } 172 | } 173 | 174 | /* Monospace description */ 175 | & .setting-item:not(.style-settings-info-text) .setting-item-info .setting-item-description { 176 | font-family: var(--font-monospace); 177 | font-size: 10px; 178 | } 179 | } -------------------------------------------------------------------------------- /snippets/vim-mode-status/vim-mode-status-w-style-settings.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Vim Mode Status 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | /* @settings 7 | name: Flexcyon Style Settings 8 | id: flexcyon-snippets-2 9 | settings: 10 | - title: Vim Mode Text 11 | description: Text to display modes when using built-in vim bindings, inherits style and color from status bar style 12 | type: heading 13 | level: 5 14 | collapsed: true 15 | - title: Enable Vim Mode Text 16 | id: flexcyon-vim-mode-text-enable 17 | description: Enable text for displaying current vim mode 18 | type: class-toggle 19 | default: true 20 | - title: Vim mode text left positioning 21 | id: flexcyon-vim-left-positioning 22 | type: variable-number 23 | description: How far from the left of the screen the current vim mode text is (as the number gets greater, the text moves to the right of the screen) 24 | default: 6 25 | format: px 26 | - title: Vim mode text bottom positioning 27 | id: flexcyon-vim-bottom-positioning 28 | type: variable-number 29 | description: How far from the bottom of the screen the current vim mode text is (as the number gets greater, the text moves higher up the screen) 30 | default: -4 31 | format: px 32 | - title: Insert Mode Text 33 | description: Text to display when in insert mode 34 | id: flexcyon-vim-insert-text 35 | type: variable-text 36 | default: "INSERT" 37 | quotes: true 38 | - title: Normal Mode Text 39 | description: Text to display when in normal mode 40 | id: flexcyon-vim-normal-text 41 | type: variable-text 42 | default: "NORMAL" 43 | quotes: true 44 | - title: Command Mode Text 45 | description: Text to display when in command mode 46 | id: flexcyon-vim-command-text 47 | type: variable-text 48 | default: "COMMAND" 49 | quotes: true 50 | */ 51 | 52 | body { 53 | --flexcyon-vim-insert-text: "INSERT"; 54 | --flexcyon-vim-normal-text: "NORMAL"; 55 | --flexcyon-vim-command-text: "COMMAND"; 56 | --flexcyon-vim-bottom-positioning: -4px; 57 | --flexcyon-vim-left-positioning: 6px; 58 | } 59 | 60 | body.flexcyon-vim-mode-text-enable { 61 | .markdown-source-view.mod-cm6 .cm-panels.cm-panels-bottom { 62 | border-top: unset; 63 | padding-top: 6px; 64 | } 65 | 66 | .cm-editor .cm-scroller:not(.cm-vimMode) .cm-sizer:has(+ .cm-vimCursorLayer)::before { 67 | content: var(--flexcyon-vim-insert-text); 68 | bottom: var(--flexcyon-vim-bottom-positioning); 69 | left: var(--flexcyon-vim-left-positioning); 70 | position: fixed; 71 | background-color: var(--color-base-05); 72 | color: var(--text-muted); 73 | height: 30px; 74 | padding: 0px 8px; 75 | } 76 | 77 | .cm-editor .cm-scroller.cm-vimMode:not(:has(+ .cm-panels)) .cm-sizer:has(+ .cm-vimCursorLayer)::before { 78 | content: var(--flexcyon-vim-normal-text); 79 | position: fixed; 80 | background-color: var(--color-base-05); 81 | bottom: var(--flexcyon-vim-bottom-positioning); 82 | left: var(--flexcyon-vim-left-positioning); 83 | height: 30px; 84 | color: var(--text-muted); 85 | padding: 0px 8px; 86 | } 87 | 88 | .cm-panels .cm-panel div div:not(.cm-vim-message) span:first-child { 89 | bottom: var(--flexcyon-vim-bottom-positioning); 90 | left: 75px; 91 | } 92 | 93 | .cm-panels .cm-panel { 94 | background-color: var(--color-base-00); 95 | padding-top: 5px; 96 | font-weight: 500; 97 | } 98 | 99 | .cm-panels input { 100 | transform: translateY(-4px); 101 | font-size: 0.9rem; 102 | z-index: 16; 103 | } 104 | 105 | 106 | .cm-editor>.cm-scroller+.cm-panels .cm-panel div div:not(.cm-vim-message)::before { 107 | content: var(--flexcyon-vim-command-text); 108 | bottom: var(--flexcyon-vim-bottom-positioning); 109 | padding-right: 4px; 110 | } 111 | 112 | .cm-editor>.cm-scroller+.cm-panels .cm-panel div { 113 | color: var(--text-muted); 114 | } 115 | 116 | div.cm-vim-message { 117 | color: var(--color-red) !important; 118 | font-weight: bold; 119 | } 120 | } -------------------------------------------------------------------------------- /snippets/vim-mode-status/vim-mode-status.css: -------------------------------------------------------------------------------- 1 | /* GPLv3 license 2 | Flexcyon - Vim Mode Status 3 | Author: bladeacer (@data_in_void in Discord) 4 | */ 5 | 6 | body { 7 | --flexcyon-vim-insert-text: "INSERT"; 8 | --flexcyon-vim-normal-text: "NORMAL"; 9 | --flexcyon-vim-command-text: "COMMAND"; 10 | --flexcyon-vim-bottom-positioning: -4px; 11 | --flexcyon-vim-left-positioning: 6px; 12 | } 13 | 14 | body { 15 | .markdown-source-view.mod-cm6 .cm-panels.cm-panels-bottom { 16 | border-top: unset; 17 | padding-top: 6px; 18 | } 19 | 20 | .cm-editor .cm-scroller:not(.cm-vimMode) .cm-sizer:has(+ .cm-vimCursorLayer)::before { 21 | content: var(--flexcyon-vim-insert-text); 22 | bottom: var(--flexcyon-vim-bottom-positioning); 23 | left: var(--flexcyon-vim-left-positioning); 24 | position: fixed; 25 | background-color: var(--color-base-05); 26 | color: var(--text-muted); 27 | height: 30px; 28 | padding: 0px 8px; 29 | } 30 | 31 | .cm-editor .cm-scroller.cm-vimMode:not(:has(+ .cm-panels)) .cm-sizer:has(+ .cm-vimCursorLayer)::before { 32 | content: var(--flexcyon-vim-normal-text); 33 | position: fixed; 34 | background-color: var(--color-base-05); 35 | bottom: var(--flexcyon-vim-bottom-positioning); 36 | left: var(--flexcyon-vim-left-positioning); 37 | height: 30px; 38 | color: var(--text-muted); 39 | padding: 0px 8px; 40 | } 41 | 42 | .cm-panels .cm-panel div div:not(.cm-vim-message) span:first-child { 43 | bottom: var(--flexcyon-vim-bottom-positioning); 44 | left: 75px; 45 | } 46 | 47 | .cm-panels .cm-panel { 48 | background-color: var(--color-base-00); 49 | padding-top: 5px; 50 | font-weight: 500; 51 | } 52 | 53 | .cm-panels input { 54 | transform: translateY(-4px); 55 | font-size: 0.9rem; 56 | z-index: 16; 57 | } 58 | 59 | 60 | .cm-editor>.cm-scroller+.cm-panels .cm-panel div div:not(.cm-vim-message)::before { 61 | content: var(--flexcyon-vim-command-text); 62 | bottom: var(--flexcyon-vim-bottom-positioning); 63 | padding-right: 4px; 64 | } 65 | 66 | .cm-editor>.cm-scroller+.cm-panels .cm-panel div { 67 | color: var(--text-muted); 68 | } 69 | 70 | div.cm-vim-message { 71 | color: var(--color-red) !important; 72 | font-weight: bold; 73 | } 74 | } -------------------------------------------------------------------------------- /snippets/vim-mode-status/vim-mode.md: -------------------------------------------------------------------------------- 1 | --- 2 | - author: bladeacer 3 | - source: https://github.com/bladeacer/flexcyon 4 | - license: GPLv3 5 | - includes_style_settings: true 6 | --- 7 | # Vim Mode Status 8 | 9 | ## With Style Settings support 10 | [View file here](./vim-mode-status-w-style-settings.css) 11 | 12 | ## Without Style Settings support 13 | [View file here](./vim-mode-status.css) 14 | --------------------------------------------------------------------------------