├── LICENSE ├── README.md ├── assets ├── code.svg ├── dashboard.svg ├── file-text.svg ├── file.svg ├── headphones.svg ├── photo.svg ├── projector.svg ├── screenshot-preview.png ├── table-rows.svg ├── video.svg └── zip-file.svg ├── obsidian-filelink.css ├── obsidian-filelink.css.map └── obsidian-filelink.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Felix 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian-FileLink-Styling 2 | Improves the way linked files are displayed in Obsidian (reading view), making them beautifully distinct from notes. 3 | 4 | ## Features 5 | * Beautiful simple button-style links for files 6 | * Inline SVG-Icons 7 | * Easily expandable through SCSS 8 | * Follows your theme 9 | * Multi-Icon support 10 | 11 | ## Screenshot 12 | ![Feature Preview](/assets/screenshot-preview.png) 13 | 14 | ## Usage 15 | 1. Download the css-file or compile your own version using scss/sass compiler. 16 | 2. Open Obsidian settings > appearance > CSS Snippets and move the file to the snippet folder. 17 | 3. Activate the snippet in the Obsidian settings. 18 | Read more here: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) 19 | 4. Open your notes in reading view. 20 | 21 | ## Supported filetypes 22 | _As of now. Ask for more with GitHub's issue feature._ 23 | Due to limitations in writing selectors for anchors based on their href property, filetypes have to be set specifially. 24 | 25 | - **Code Files** 26 | - Extensions: `html`, `css`, `js`, `php`, `py`, `java`, `cpp`, `c`, `cs`, `rb`, `go`, `lua`, `swift`, `ts`, `json`, `xml`, `scss`, `sass`, `sh`, `asm`, `sql`, `r`, `pl`, `h`, `hpp` 27 | - [Icon Source](https://iconic.app/code/) 28 | 29 | - **PDF Files** 30 | - Extensions: `pdf` 31 | - [Icon Source](https://iconic.app/file/) 32 | 33 | - **Video Files** 34 | - Extensions: `mp4`, `avi`, `mov`, `wmv`, `mkv`, `flv`, `mpeg`, `mpg`, `webm`, `vob`, `m4v`, `3gp`, `3g2`, `f4v` 35 | - [Icon Source](https://iconic.app/video/) 36 | 37 | - **Audio Files** 38 | - Extensions: `mp3`, `wav`, `aac`, `ogg`, `flac`, `alac`, `wma`, `m4a`, `ape`, `mid`, `midi`, `mpa`, `ogg`, `aif` 39 | - [Icon Source](https://iconic.app/headphones/) 40 | 41 | - **Image Files** 42 | - Extensions: `jpg`, `jpeg`, `png`, `gif`, `bmp`, `tiff`, `svg`, `psd`, `webp`, `ico`, `heic`, `raw`, `arw`, `svgz`, `nef`, `orf` 43 | - [Icon Source](https://iconic.app/photo/) 44 | 45 | - **Archive Files** 46 | - Extensions: `zip`, `rar`, `7z`, `tar`, `gz`, `bz2`, `xz`, `tar.gz`, `jar`, `iso`, `cab`, `rar5`, `dmg` 47 | - [Icon Source](https://iconic.app/zip-file/) 48 | 49 | - **Word Files** 50 | - Extensions: `txt`, `doc`, `docx`, `odt`, `rtf`, `docm`, `wps` 51 | - [Icon Source](https://iconic.app/file-text/) 52 | 53 | - **Spreadsheet Files** 54 | - Extensions: `xls`, `xlsx`, `ods`, `csv`, `xlsm`, `xlt`, `xlm` 55 | - [Icon Source](https://iconic.app/table-rows/) 56 | 57 | - **Slide Files** 58 | - Extensions: `ppt`, `pptx`, `odp`, `pps`, `pptm` 59 | - [Icon Source](https://iconic.app/projector/) 60 | 61 | - **Design Files** 62 | - Extensions: `psd`, `ai`, `sketch`, `eps`, `indd`, `xcf`, `dwg`, `svg`, `fig`, `cdr`, `afdesign`, `stp`, `3ds`, `iges`, `max` 63 | - [Icon Source](https://iconic.app/dashboard/) 64 | 65 | - **Torrent Files** 66 | - Extensions: `torrent` 67 | - [Pro Icon Source](https://iconic.app/file-share/) 68 | 69 | - **External (Local Filesystem) Files** 70 | - Extensions: * 71 | - [Pro Icon Source](https://iconic.app/folder-share/) 72 | 73 | ## Thank you 74 | [@sailKiteV](https://github.com/sailKiteV) in Obsidian Discord (https://discord.gg/obsidianmd) for helping me out and providing a first SCSS draft of my initial CSS version. 75 | -------------------------------------------------------------------------------- /assets/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/file-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/headphones.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/projector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/screenshot-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/felixqueisler/Obsidian-FileLink-Styling/fccaf7f3eac1430d9a7436b0d8a025750ced1cf4/assets/screenshot-preview.png -------------------------------------------------------------------------------- /assets/table-rows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/zip-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /obsidian-filelink.css: -------------------------------------------------------------------------------- 1 | /* Obsidian-Filelink-Styling 2 | GitHub: https://github.com/felixqueisler/Obsidian-FileLink-Styling 3 | Icons: https://iconic.app 4 | */ 5 | a.internal-link:is([href$=".html"], [href$=".css"], [href$=".js"], [href$=".php"], [href$=".py"], [href$=".java"], [href$=".cpp"], [href$=".c"], [href$=".cs"], [href$=".rb"], [href$=".go"], [href$=".lua"], [href$=".swift"], [href$=".ts"], [href$=".json"], [href$=".xml"], [href$=".scss"], [href$=".sass"], [href$=".sh"], [href$=".asm"], [href$=".sql"], [href$=".r"], [href$=".pl"], [href$=".h"], [href$=".hpp"]):before { 6 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect width='14.5' height='14.5' x='4.75' y='4.75' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' rx='2'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 10.75L11.25 13L8.75 15.25'/%3E%3C/svg%3E"); 7 | } 8 | 9 | a.internal-link:is([href$=".pdf"]):before { 10 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 9.25H13.75V5'/%3E%3C/svg%3E"); 11 | } 12 | 13 | a.internal-link:is([href$=".mp4"], [href$=".avi"], [href$=".mov"], [href$=".wmv"], [href$=".mkv"], [href$=".flv"], [href$=".mpeg"], [href$=".mpg"], [href$=".webm"], [href$=".vob"], [href$=".m4v"], [href$=".3gp"], [href$=".3g2"], [href$=".f4v"]):before { 14 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.25 12L9.75 8.75V15.25L15.25 12Z'/%3E%3C/svg%3E"); 15 | } 16 | 17 | a.internal-link:is([href$=".mp3"], [href$=".wav"], [href$=".aac"], [href$=".ogg"], [href$=".flac"], [href$=".alac"], [href$=".wma"], [href$=".m4a"], [href$=".ape"], [href$=".mid"], [href$=".midi"], [href$=".mpa"], [href$=".ogg"], [href$=".aif"]):before { 18 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 16V12.25C19.25 8.24594 16.0041 5 12 5V5C7.99594 5 4.75 8.24594 4.75 12.25V16'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 15.45C4.75 13.9588 5.95883 12.75 7.45 12.75V12.75C8.44411 12.75 9.25 13.5559 9.25 14.55V17.45C9.25 18.4441 8.44411 19.25 7.45 19.25V19.25C5.95883 19.25 4.75 18.0412 4.75 16.55V15.45Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.75 14.55C14.75 13.5559 15.5559 12.75 16.55 12.75V12.75C18.0412 12.75 19.25 13.9588 19.25 15.45V16.55C19.25 18.0412 18.0412 19.25 16.55 19.25V19.25C15.5559 19.25 14.75 18.4441 14.75 17.45V14.55Z'%3E%3C/path%3E%3C/svg%3E%0A"); 19 | } 20 | 21 | a.internal-link:is([href$=".jpg"], [href$=".jpeg"], [href$=".png"], [href$=".gif"], [href$=".bmp"], [href$=".tiff"], [href$=".svg"], [href$=".psd"], [href$=".webp"], [href$=".ico"], [href$=".heic"], [href$=".raw"], [href$=".arw"], [href$=".svgz"], [href$=".nef"], [href$=".orf"]):before { 22 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 16L7.49619 12.5067C8.2749 11.5161 9.76453 11.4837 10.5856 12.4395L13 15.25M10.915 12.823C11.9522 11.5037 13.3973 9.63455 13.4914 9.51294C13.4947 9.50859 13.4979 9.50448 13.5013 9.50017C14.2815 8.51598 15.7663 8.48581 16.5856 9.43947L19 12.25M6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25Z'/%3E%3C/svg%3E"); 23 | } 24 | 25 | a.internal-link:is([href$=".zip"], [href$=".rar"], [href$=".7z"], [href$=".tar"], [href$=".gz"], [href$=".bz2"], [href$=".xz"], [href$=".tar.gz"], [href$=".jar"], [href$=".iso"], [href$=".cab"], [href$=".rar5"], [href$=".dmg"]):before { 26 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 15.25V13.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11.25V10.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8.25V7.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5.25V4.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 27 | } 28 | 29 | a.internal-link:is([href$=".txt"], [href$=".doc"], [href$=".docx"], [href$=".odt"], [href$=".rtf"], [href$=".docm"], [href$=".wps"], [href$=".pages"]):before { 30 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 9.25H13.75V5'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 15.25H14.25'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 12.25H14.25'/%3E%3C/svg%3E"); 31 | } 32 | 33 | a.internal-link:is([href$=".xls"], [href$=".xlsx"], [href$=".ods"], [href$=".csv"], [href$=".xlsm"], [href$=".xlt"], [href$=".xlm"], [href$=".numbers"]):before { 34 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.75 19.2502H18.25C18.8023 19.2502 19.25 18.8025 19.25 18.2502V5.75C19.25 5.19772 18.8023 4.75 18.25 4.75H5.75C5.19772 4.75 4.75 5.19772 4.75 5.75V18.2502C4.75 18.8025 5.19772 19.2502 5.75 19.2502Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 9.25L5.25 9.25'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 14.75L5.25 14.75'/%3E%3C/svg%3E"); 35 | } 36 | 37 | a.internal-link:is([href$=".ppt"], [href$=".pptx"], [href$=".odp"], [href$=".pps"], [href$=".pptm"], [href$=".key"]):before { 38 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.25 7.75H5.75V15.25C5.75 16.3546 6.64543 17.25 7.75 17.25H16.25C17.3546 17.25 18.25 16.3546 18.25 15.25V7.75Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.25 4.75H5.75C5.19772 4.75 4.75 5.19772 4.75 5.75V6.75C4.75 7.30228 5.19772 7.75 5.75 7.75H18.25C18.8023 7.75 19.25 7.30228 19.25 6.75V5.75C19.25 5.19772 18.8023 4.75 18.25 4.75Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 17.5V19.25'%3E%3C/path%3E%3C/svg%3E%0A"); 39 | } 40 | 41 | a.internal-link:is([href$=".psd"], [href$=".ai"], [href$=".sketch"], [href$=".eps"], [href$=".indd"], [href$=".xcf"], [href$=".dwg"], [href$=".svg"], [href$=".fig"], [href$=".cdr"], [href$=".stp"], [href$=".3ds"], [href$=".iges"], [href$=".max"], [href$=".afphoto"], [href$=".afdesign"], [href$=".afpub"], [href$=".figma"]):before { 42 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 8.75V19'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 8.25H19'/%3E%3C/svg%3E"); 43 | } 44 | 45 | a.internal-link:is([href$=".torrent"]):before { 46 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4.75L8.58047 4.27507C8.43802 4.10097 8.22495 4 8 4V4.75ZM10.25 7.5H11C11 7.32687 10.9401 7.15907 10.8305 7.02507L10.25 7.5ZM17 11.75L17.5805 11.2751C17.438 11.101 17.2249 11 17 11V11.75ZM19.25 14.5H20C20 14.3269 19.9401 14.1591 19.8305 14.0251L19.25 14.5ZM5.5 14.75C5.5 14.3358 5.16421 14 4.75 14C4.33579 14 4 14.3358 4 14.75H5.5ZM11.25 17L11.7517 17.5575C11.9098 17.4152 12 17.2126 12 17C12 16.7874 11.9098 16.5848 11.7517 16.4425L11.25 17ZM9.25172 14.1925C8.94384 13.9154 8.46962 13.9404 8.19253 14.2483C7.91544 14.5562 7.94039 15.0304 8.24828 15.3075L9.25172 14.1925ZM8.24828 18.6925C7.94039 18.9696 7.91544 19.4438 8.19253 19.7517C8.46962 20.0596 8.94384 20.0846 9.25172 19.8075L8.24828 18.6925ZM18.5 9.25C18.5 9.66421 18.8358 10 19.25 10C19.6642 10 20 9.66421 20 9.25H18.5ZM12.75 7L12.2483 6.44253C12.0902 6.58476 12 6.78739 12 7C12 7.21261 12.0902 7.41524 12.2483 7.55747L12.75 7ZM14.7483 9.80747C15.0562 10.0846 15.5304 10.0596 15.8075 9.75172C16.0846 9.44384 16.0596 8.96962 15.7517 8.69253L14.7483 9.80747ZM15.7517 5.30747C16.0596 5.03038 16.0846 4.55616 15.8075 4.24828C15.5304 3.94039 15.0562 3.91544 14.7483 4.19253L15.7517 5.30747ZM9.25 11.5H5.75V13H9.25V11.5ZM5.5 11.25V5.75H4V11.25H5.5ZM5.75 5.5H8V4H5.75V5.5ZM7.41953 5.22493L9.66953 7.97493L10.8305 7.02507L8.58047 4.27507L7.41953 5.22493ZM9.5 7.5V11.25H11V7.5H9.5ZM18.25 18.5H14.75V20H18.25V18.5ZM14.5 18.25V12.75H13V18.25H14.5ZM14.75 12.5H17V11H14.75V12.5ZM16.4195 12.2249L18.6695 14.9749L19.8305 14.0251L17.5805 11.2751L16.4195 12.2249ZM18.5 14.5V18.25H20V14.5H18.5ZM4 14.75V16H5.5V14.75H4ZM5.75 17.75H11.25V16.25H5.75V17.75ZM11.7517 16.4425L9.25172 14.1925L8.24828 15.3075L10.7483 17.5575L11.7517 16.4425ZM10.7483 16.4425L8.24828 18.6925L9.25172 19.8075L11.7517 17.5575L10.7483 16.4425ZM20 9.25V8H18.5V9.25H20ZM18.25 6.25H12.75V7.75H18.25V6.25ZM12.2483 7.55747L14.7483 9.80747L15.7517 8.69253L13.2517 6.44253L12.2483 7.55747ZM13.2517 7.55747L15.7517 5.30747L14.7483 4.19253L12.2483 6.44253L13.2517 7.55747ZM20 8C20 7.0335 19.2165 6.25 18.25 6.25V7.75C18.3881 7.75 18.5 7.86193 18.5 8H20ZM4 16C4 16.9665 4.7835 17.75 5.75 17.75V16.25C5.61193 16.25 5.5 16.1381 5.5 16H4ZM18.25 20C19.2165 20 20 19.2165 20 18.25H18.5C18.5 18.3881 18.3881 18.5 18.25 18.5V20ZM14.5 12.75C14.5 12.6119 14.6119 12.5 14.75 12.5V11C13.7835 11 13 11.7835 13 12.75H14.5ZM14.75 18.5C14.6119 18.5 14.5 18.3881 14.5 18.25H13C13 19.2165 13.7835 20 14.75 20V18.5ZM9.25 13C10.2165 13 11 12.2165 11 11.25H9.5C9.5 11.3881 9.38807 11.5 9.25 11.5V13ZM5.5 5.75C5.5 5.61193 5.61193 5.5 5.75 5.5V4C4.7835 4 4 4.7835 4 5.75H5.5ZM5.75 11.5C5.61193 11.5 5.5 11.3881 5.5 11.25H4C4 12.2165 4.7835 13 5.75 13V11.5Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A"); 47 | } 48 | 49 | a.internal-link:is([href$=".html"], [href$=".css"], [href$=".js"], [href$=".php"], [href$=".py"], [href$=".java"], [href$=".cpp"], [href$=".c"], [href$=".cs"], [href$=".rb"], [href$=".go"], [href$=".lua"], [href$=".swift"], [href$=".ts"], [href$=".json"], [href$=".xml"], [href$=".scss"], [href$=".sass"], [href$=".sh"], [href$=".asm"], [href$=".sql"], [href$=".r"], [href$=".pl"], [href$=".h"], [href$=".hpp"], [href$=".pdf"], [href$=".mp4"], [href$=".avi"], [href$=".mov"], [href$=".wmv"], [href$=".mkv"], [href$=".flv"], [href$=".mpeg"], [href$=".mpg"], [href$=".webm"], [href$=".vob"], [href$=".m4v"], [href$=".3gp"], [href$=".3g2"], [href$=".f4v"], [href$=".mp3"], [href$=".wav"], [href$=".aac"], [href$=".ogg"], [href$=".flac"], [href$=".alac"], [href$=".wma"], [href$=".m4a"], [href$=".ape"], [href$=".mid"], [href$=".midi"], [href$=".mpa"], [href$=".ogg"], [href$=".aif"], [href$=".jpg"], [href$=".jpeg"], [href$=".png"], [href$=".gif"], [href$=".bmp"], [href$=".tiff"], [href$=".svg"], [href$=".psd"], [href$=".webp"], [href$=".ico"], [href$=".heic"], [href$=".raw"], [href$=".arw"], [href$=".svgz"], [href$=".nef"], [href$=".orf"], [href$=".zip"], [href$=".rar"], [href$=".7z"], [href$=".tar"], [href$=".gz"], [href$=".bz2"], [href$=".xz"], [href$=".tar.gz"], [href$=".jar"], [href$=".iso"], [href$=".cab"], [href$=".rar5"], [href$=".dmg"], [href$=".txt"], [href$=".doc"], [href$=".docx"], [href$=".odt"], [href$=".rtf"], [href$=".docm"], [href$=".wps"], [href$=".pages"], [href$=".xls"], [href$=".xlsx"], [href$=".ods"], [href$=".csv"], [href$=".xlsm"], [href$=".xlt"], [href$=".xlm"], [href$=".numbers"], [href$=".ppt"], [href$=".pptx"], [href$=".odp"], [href$=".pps"], [href$=".pptm"], [href$=".key"], [href$=".psd"], [href$=".ai"], [href$=".sketch"], [href$=".eps"], [href$=".indd"], [href$=".xcf"], [href$=".dwg"], [href$=".svg"], [href$=".fig"], [href$=".cdr"], [href$=".stp"], [href$=".3ds"], [href$=".iges"], [href$=".max"], [href$=".afphoto"], [href$=".afdesign"], [href$=".afpub"], [href$=".figma"], [href$=".torrent"]), 50 | a.external-link[href^="file:///"] { 51 | display: inline-flex; 52 | align-items: center; 53 | justify-content: center; 54 | padding: 5px; 55 | padding-left: 7px; 56 | padding-right: 11px; 57 | margin-top: var(--size-2-3); 58 | margin-right: var(--size-2-3); 59 | border-radius: var(--radius-s); 60 | transition: background-color 0.1s ease, color 0.1s ease; 61 | text-decoration: none; 62 | background-color: var(--background-primary-alt); 63 | } 64 | a.internal-link:is([href$=".html"], [href$=".css"], [href$=".js"], [href$=".php"], [href$=".py"], [href$=".java"], [href$=".cpp"], [href$=".c"], [href$=".cs"], [href$=".rb"], [href$=".go"], [href$=".lua"], [href$=".swift"], [href$=".ts"], [href$=".json"], [href$=".xml"], [href$=".scss"], [href$=".sass"], [href$=".sh"], [href$=".asm"], [href$=".sql"], [href$=".r"], [href$=".pl"], [href$=".h"], [href$=".hpp"], [href$=".pdf"], [href$=".mp4"], [href$=".avi"], [href$=".mov"], [href$=".wmv"], [href$=".mkv"], [href$=".flv"], [href$=".mpeg"], [href$=".mpg"], [href$=".webm"], [href$=".vob"], [href$=".m4v"], [href$=".3gp"], [href$=".3g2"], [href$=".f4v"], [href$=".mp3"], [href$=".wav"], [href$=".aac"], [href$=".ogg"], [href$=".flac"], [href$=".alac"], [href$=".wma"], [href$=".m4a"], [href$=".ape"], [href$=".mid"], [href$=".midi"], [href$=".mpa"], [href$=".ogg"], [href$=".aif"], [href$=".jpg"], [href$=".jpeg"], [href$=".png"], [href$=".gif"], [href$=".bmp"], [href$=".tiff"], [href$=".svg"], [href$=".psd"], [href$=".webp"], [href$=".ico"], [href$=".heic"], [href$=".raw"], [href$=".arw"], [href$=".svgz"], [href$=".nef"], [href$=".orf"], [href$=".zip"], [href$=".rar"], [href$=".7z"], [href$=".tar"], [href$=".gz"], [href$=".bz2"], [href$=".xz"], [href$=".tar.gz"], [href$=".jar"], [href$=".iso"], [href$=".cab"], [href$=".rar5"], [href$=".dmg"], [href$=".txt"], [href$=".doc"], [href$=".docx"], [href$=".odt"], [href$=".rtf"], [href$=".docm"], [href$=".wps"], [href$=".pages"], [href$=".xls"], [href$=".xlsx"], [href$=".ods"], [href$=".csv"], [href$=".xlsm"], [href$=".xlt"], [href$=".xlm"], [href$=".numbers"], [href$=".ppt"], [href$=".pptx"], [href$=".odp"], [href$=".pps"], [href$=".pptm"], [href$=".key"], [href$=".psd"], [href$=".ai"], [href$=".sketch"], [href$=".eps"], [href$=".indd"], [href$=".xcf"], [href$=".dwg"], [href$=".svg"], [href$=".fig"], [href$=".cdr"], [href$=".stp"], [href$=".3ds"], [href$=".iges"], [href$=".max"], [href$=".afphoto"], [href$=".afdesign"], [href$=".afpub"], [href$=".figma"], [href$=".torrent"]):hover, 65 | a.external-link[href^="file:///"]:hover { 66 | text-decoration: none; 67 | background-color: var(--background-modifier-hover); 68 | } 69 | a.internal-link:is([href$=".html"], [href$=".css"], [href$=".js"], [href$=".php"], [href$=".py"], [href$=".java"], [href$=".cpp"], [href$=".c"], [href$=".cs"], [href$=".rb"], [href$=".go"], [href$=".lua"], [href$=".swift"], [href$=".ts"], [href$=".json"], [href$=".xml"], [href$=".scss"], [href$=".sass"], [href$=".sh"], [href$=".asm"], [href$=".sql"], [href$=".r"], [href$=".pl"], [href$=".h"], [href$=".hpp"], [href$=".pdf"], [href$=".mp4"], [href$=".avi"], [href$=".mov"], [href$=".wmv"], [href$=".mkv"], [href$=".flv"], [href$=".mpeg"], [href$=".mpg"], [href$=".webm"], [href$=".vob"], [href$=".m4v"], [href$=".3gp"], [href$=".3g2"], [href$=".f4v"], [href$=".mp3"], [href$=".wav"], [href$=".aac"], [href$=".ogg"], [href$=".flac"], [href$=".alac"], [href$=".wma"], [href$=".m4a"], [href$=".ape"], [href$=".mid"], [href$=".midi"], [href$=".mpa"], [href$=".ogg"], [href$=".aif"], [href$=".jpg"], [href$=".jpeg"], [href$=".png"], [href$=".gif"], [href$=".bmp"], [href$=".tiff"], [href$=".svg"], [href$=".psd"], [href$=".webp"], [href$=".ico"], [href$=".heic"], [href$=".raw"], [href$=".arw"], [href$=".svgz"], [href$=".nef"], [href$=".orf"], [href$=".zip"], [href$=".rar"], [href$=".7z"], [href$=".tar"], [href$=".gz"], [href$=".bz2"], [href$=".xz"], [href$=".tar.gz"], [href$=".jar"], [href$=".iso"], [href$=".cab"], [href$=".rar5"], [href$=".dmg"], [href$=".txt"], [href$=".doc"], [href$=".docx"], [href$=".odt"], [href$=".rtf"], [href$=".docm"], [href$=".wps"], [href$=".pages"], [href$=".xls"], [href$=".xlsx"], [href$=".ods"], [href$=".csv"], [href$=".xlsm"], [href$=".xlt"], [href$=".xlm"], [href$=".numbers"], [href$=".ppt"], [href$=".pptx"], [href$=".odp"], [href$=".pps"], [href$=".pptm"], [href$=".key"], [href$=".psd"], [href$=".ai"], [href$=".sketch"], [href$=".eps"], [href$=".indd"], [href$=".xcf"], [href$=".dwg"], [href$=".svg"], [href$=".fig"], [href$=".cdr"], [href$=".stp"], [href$=".3ds"], [href$=".iges"], [href$=".max"], [href$=".afphoto"], [href$=".afdesign"], [href$=".afpub"], [href$=".figma"], [href$=".torrent"]):before, 70 | a.external-link[href^="file:///"]:before { 71 | --iconic-size: 24px; 72 | content: ""; 73 | color: inherit; 74 | background-color: currentColor; 75 | -webkit-mask-position: center; 76 | -webkit-mask-size: var(--iconic-size); 77 | -webkit-mask-repeat: no-repeat; 78 | display: inline-block; 79 | width: var(--iconic-size); 80 | height: var(--iconic-size); 81 | margin-right: var(--size-4-1); 82 | } 83 | 84 | a.external-link[href^="file:///"] { 85 | color: var(--text-accent); 86 | background-image: none; 87 | filter: hue-rotate(30deg) saturate(90%); 88 | padding-right: 7px; 89 | padding-left: 11px; 90 | } 91 | a.external-link[href^="file:///"]:hover { 92 | color: var(--text-accent-hover); 93 | } 94 | a.external-link[href^="file:///"]:before { 95 | content: none; 96 | } 97 | a.external-link[href^="file:///"]:after { 98 | --iconic-size: 24px; 99 | content: ""; 100 | color: inherit; 101 | background-color: currentColor; 102 | mask-position: center; 103 | -webkit-mask-position: center; 104 | -webkit-mask-size: var(--iconic-size); 105 | -webkit-mask-repeat: no-repeat; 106 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 7.75h12.5a2 2 0 0 1 2 2v7.5a2 2 0 0 1-2 2h-3.5m-.25-11.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2v3.5m0 9 5.5-5.5m0 0h-3.5m3.5 0v3.5'%3E%3C/path%3E%3C/svg%3E%0A"); 107 | /* Pro Source: https://iconic.app/folder-share/ */ 108 | display: inline-block; 109 | width: var(--iconic-size); 110 | height: var(--iconic-size); 111 | margin-left: var(--size-4-1); 112 | } 113 | 114 | /* Copyright (C) Iconic 115 | Iconic Pro Icons 116 | https://iconic.app 117 | Iconic Pro icons are copyrighted. Redistribution is not permitted. Use in source and binary forms, with or without modification, is allowed if you own an Iconic Pro license. */ 118 | 119 | /*# sourceMappingURL=obsidian-filelink.css.map */ 120 | -------------------------------------------------------------------------------- /obsidian-filelink.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["obsidian-filelink.scss"],"names":[],"mappings":"AAGA;AAAA;AAAA;AAAA;AAyEC;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAOF;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAID;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAAA","file":"obsidian-filelink.css"} -------------------------------------------------------------------------------- /obsidian-filelink.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:string"; 3 | 4 | /* Obsidian-Filelink-Styling 5 | GitHub: https://github.com/felixqueisler/Obsidian-FileLink-Styling 6 | Icons: https://iconic.app 7 | */ 8 | 9 | // Define a map of filetype groups 10 | // Icons inline-encoded with https://yoksel.github.io/url-encoder/ 11 | $file-type-groups: ( 12 | "code-files": ("extensions": ("html", "css", "js", "php", "py", "java", "cpp", "c", "cs", "rb", "go", "lua", "swift", "ts", "json", "xml", "scss", "sass", "sh", "asm", "sql", "r", "pl", "h", "hpp"), 13 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect width='14.5' height='14.5' x='4.75' y='4.75' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' rx='2'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 10.75L11.25 13L8.75 15.25'/%3E%3C/svg%3E" 14 | /* Source: https://iconic.app/code/ */ 15 | ), 16 | "pdf-files": ("extensions": ("pdf"), 17 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 9.25H13.75V5'/%3E%3C/svg%3E" 18 | /* Source: https://iconic.app/file/ */ 19 | ), 20 | "video-files": ("extensions": ("mp4", "avi", "mov", "wmv", "mkv", "flv", "mpeg", "mpg", "webm", "vob", "m4v", "3gp", "3g2", "f4v"), 21 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.25 12L9.75 8.75V15.25L15.25 12Z'/%3E%3C/svg%3E" 22 | /* Source: https://iconic.app/video/ */ 23 | ), 24 | "audio-files": ("extensions": ("mp3", "wav", "aac", "ogg", "flac", "alac", "wma", "m4a", "ape", "mid", "midi", "mpa", "ogg", "aif"), 25 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 16V12.25C19.25 8.24594 16.0041 5 12 5V5C7.99594 5 4.75 8.24594 4.75 12.25V16'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 15.45C4.75 13.9588 5.95883 12.75 7.45 12.75V12.75C8.44411 12.75 9.25 13.5559 9.25 14.55V17.45C9.25 18.4441 8.44411 19.25 7.45 19.25V19.25C5.95883 19.25 4.75 18.0412 4.75 16.55V15.45Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.75 14.55C14.75 13.5559 15.5559 12.75 16.55 12.75V12.75C18.0412 12.75 19.25 13.9588 19.25 15.45V16.55C19.25 18.0412 18.0412 19.25 16.55 19.25V19.25C15.5559 19.25 14.75 18.4441 14.75 17.45V14.55Z'%3E%3C/path%3E%3C/svg%3E%0A" 26 | /* Source: https://iconic.app/headphones/ */ 27 | ), 28 | "image-files": ("extensions": ("jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg", "psd", "webp", "ico", "heic", "raw", "arw", "svgz", "nef", "orf"), 29 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 16L7.49619 12.5067C8.2749 11.5161 9.76453 11.4837 10.5856 12.4395L13 15.25M10.915 12.823C11.9522 11.5037 13.3973 9.63455 13.4914 9.51294C13.4947 9.50859 13.4979 9.50448 13.5013 9.50017C14.2815 8.51598 15.7663 8.48581 16.5856 9.43947L19 12.25M6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25Z'/%3E%3C/svg%3E" 30 | /* Source: https://iconic.app/photo/ */ 31 | ), 32 | "archive-files": ("extensions": ("zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tar.gz", "jar", "iso", "cab", "rar5", "dmg"), 33 | "icon": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 15.25V13.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11.25V10.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8.25V7.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5.25V4.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" 34 | /* Source: https://iconic.app/zip-file/ */ 35 | ), 36 | "word-files": ("extensions": ("txt", "doc", "docx", "odt", "rtf", "docm", "wps", "pages"), 37 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 9.25H13.75V5'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 15.25H14.25'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 12.25H14.25'/%3E%3C/svg%3E" 38 | /* Source: https://iconic.app/file-text/ */ 39 | ), 40 | "spreadsheet-files": ("extensions": ("xls", "xlsx", "ods", "csv", "xlsm", "xlt", "xlm", "numbers"), 41 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.75 19.2502H18.25C18.8023 19.2502 19.25 18.8025 19.25 18.2502V5.75C19.25 5.19772 18.8023 4.75 18.25 4.75H5.75C5.19772 4.75 4.75 5.19772 4.75 5.75V18.2502C4.75 18.8025 5.19772 19.2502 5.75 19.2502Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 9.25L5.25 9.25'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 14.75L5.25 14.75'/%3E%3C/svg%3E" 42 | /* Source: https://iconic.app/table-rows/ */ 43 | ), 44 | "slide-files": ("extensions": ("ppt", "pptx", "odp", "pps", "pptm", "key"), 45 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.25 7.75H5.75V15.25C5.75 16.3546 6.64543 17.25 7.75 17.25H16.25C17.3546 17.25 18.25 16.3546 18.25 15.25V7.75Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.25 4.75H5.75C5.19772 4.75 4.75 5.19772 4.75 5.75V6.75C4.75 7.30228 5.19772 7.75 5.75 7.75H18.25C18.8023 7.75 19.25 7.30228 19.25 6.75V5.75C19.25 5.19772 18.8023 4.75 18.25 4.75Z'%3E%3C/path%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 17.5V19.25'%3E%3C/path%3E%3C/svg%3E%0A" 46 | /* Source: https://iconic.app/projector/ */ 47 | ), 48 | "design-files": ("extensions": ("psd", "ai", "sketch", "eps", "indd", "xcf", "dwg", "svg", "fig", "cdr", "stp", "3ds", "iges", "max", "afphoto", "afdesign", "afpub", "figma"), 49 | "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 8.75V19'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 8.25H19'/%3E%3C/svg%3E" 50 | /* Source: https://iconic.app/dashboard/ */ 51 | ), 52 | "torrent-files": ("extensions": ("torrent"), 53 | "icon": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4.75L8.58047 4.27507C8.43802 4.10097 8.22495 4 8 4V4.75ZM10.25 7.5H11C11 7.32687 10.9401 7.15907 10.8305 7.02507L10.25 7.5ZM17 11.75L17.5805 11.2751C17.438 11.101 17.2249 11 17 11V11.75ZM19.25 14.5H20C20 14.3269 19.9401 14.1591 19.8305 14.0251L19.25 14.5ZM5.5 14.75C5.5 14.3358 5.16421 14 4.75 14C4.33579 14 4 14.3358 4 14.75H5.5ZM11.25 17L11.7517 17.5575C11.9098 17.4152 12 17.2126 12 17C12 16.7874 11.9098 16.5848 11.7517 16.4425L11.25 17ZM9.25172 14.1925C8.94384 13.9154 8.46962 13.9404 8.19253 14.2483C7.91544 14.5562 7.94039 15.0304 8.24828 15.3075L9.25172 14.1925ZM8.24828 18.6925C7.94039 18.9696 7.91544 19.4438 8.19253 19.7517C8.46962 20.0596 8.94384 20.0846 9.25172 19.8075L8.24828 18.6925ZM18.5 9.25C18.5 9.66421 18.8358 10 19.25 10C19.6642 10 20 9.66421 20 9.25H18.5ZM12.75 7L12.2483 6.44253C12.0902 6.58476 12 6.78739 12 7C12 7.21261 12.0902 7.41524 12.2483 7.55747L12.75 7ZM14.7483 9.80747C15.0562 10.0846 15.5304 10.0596 15.8075 9.75172C16.0846 9.44384 16.0596 8.96962 15.7517 8.69253L14.7483 9.80747ZM15.7517 5.30747C16.0596 5.03038 16.0846 4.55616 15.8075 4.24828C15.5304 3.94039 15.0562 3.91544 14.7483 4.19253L15.7517 5.30747ZM9.25 11.5H5.75V13H9.25V11.5ZM5.5 11.25V5.75H4V11.25H5.5ZM5.75 5.5H8V4H5.75V5.5ZM7.41953 5.22493L9.66953 7.97493L10.8305 7.02507L8.58047 4.27507L7.41953 5.22493ZM9.5 7.5V11.25H11V7.5H9.5ZM18.25 18.5H14.75V20H18.25V18.5ZM14.5 18.25V12.75H13V18.25H14.5ZM14.75 12.5H17V11H14.75V12.5ZM16.4195 12.2249L18.6695 14.9749L19.8305 14.0251L17.5805 11.2751L16.4195 12.2249ZM18.5 14.5V18.25H20V14.5H18.5ZM4 14.75V16H5.5V14.75H4ZM5.75 17.75H11.25V16.25H5.75V17.75ZM11.7517 16.4425L9.25172 14.1925L8.24828 15.3075L10.7483 17.5575L11.7517 16.4425ZM10.7483 16.4425L8.24828 18.6925L9.25172 19.8075L11.7517 17.5575L10.7483 16.4425ZM20 9.25V8H18.5V9.25H20ZM18.25 6.25H12.75V7.75H18.25V6.25ZM12.2483 7.55747L14.7483 9.80747L15.7517 8.69253L13.2517 6.44253L12.2483 7.55747ZM13.2517 7.55747L15.7517 5.30747L14.7483 4.19253L12.2483 6.44253L13.2517 7.55747ZM20 8C20 7.0335 19.2165 6.25 18.25 6.25V7.75C18.3881 7.75 18.5 7.86193 18.5 8H20ZM4 16C4 16.9665 4.7835 17.75 5.75 17.75V16.25C5.61193 16.25 5.5 16.1381 5.5 16H4ZM18.25 20C19.2165 20 20 19.2165 20 18.25H18.5C18.5 18.3881 18.3881 18.5 18.25 18.5V20ZM14.5 12.75C14.5 12.6119 14.6119 12.5 14.75 12.5V11C13.7835 11 13 11.7835 13 12.75H14.5ZM14.75 18.5C14.6119 18.5 14.5 18.3881 14.5 18.25H13C13 19.2165 13.7835 20 14.75 20V18.5ZM9.25 13C10.2165 13 11 12.2165 11 11.25H9.5C9.5 11.3881 9.38807 11.5 9.25 11.5V13ZM5.5 5.75C5.5 5.61193 5.61193 5.5 5.75 5.5V4C4.7835 4 4 4.7835 4 5.75H5.5ZM5.75 11.5C5.61193 11.5 5.5 11.3881 5.5 11.25H4C4 12.2165 4.7835 13 5.75 13V11.5Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A" 54 | /* Pro Source: https://iconic.app/file-share/ */ 55 | ) 56 | ); 57 | 58 | // Combine selectors for filetypes 59 | $all-filetype-selectors: ""; 60 | 61 | @each $group, $data in $file-type-groups { 62 | $extensions: map.get($data, "extensions"); 63 | $icon-data: map.get($data, "icon"); 64 | $group-filetype-selectors: ""; 65 | 66 | @each $ext in $extensions { 67 | // Make selector for all filetypes for shared styles 68 | $all-filetype-selectors: "#{$all-filetype-selectors}[href$='.#{$ext}'], "; 69 | // Make selector for group filetypes for group icon 70 | $group-filetype-selectors: "#{$group-filetype-selectors}[href$='.#{$ext}'], "; 71 | } 72 | 73 | // Specific icon styles for each filetype group 74 | $group-filetype-selectors: string.unquote(string.slice($group-filetype-selectors, 1, -3)); 75 | 76 | // Specifies the svgs to the filetype group selectors 77 | a.internal-link:is(#{$group-filetype-selectors}):before { 78 | -webkit-mask-image: url("#{$icon-data}"); 79 | } 80 | } 81 | 82 | // Apply shared styles to all filetypes 83 | $all-filetype-selectors: string.unquote(string.slice($all-filetype-selectors, 1, -3)); 84 | 85 | a.internal-link:is(#{$all-filetype-selectors}), 86 | a.external-link[href^="file:///"] { 87 | // Make anchor look like a button 88 | display: inline-flex; 89 | align-items: center; 90 | justify-content: center; 91 | padding: 5px; 92 | padding-left: 7px; 93 | padding-right: 11px; 94 | margin-top: var(--size-2-3); 95 | margin-right: var(--size-2-3); 96 | border-radius: var(--radius-s); 97 | transition: background-color 0.1s ease, color 0.1s ease; 98 | text-decoration: none; 99 | background-color: var(--background-primary-alt); 100 | 101 | &:hover { 102 | text-decoration: none; 103 | background-color: var(--background-modifier-hover); 104 | } 105 | 106 | // Display icon 107 | &:before { 108 | --iconic-size: 24px; 109 | content: ''; 110 | color: inherit; 111 | background-color: currentColor; 112 | -webkit-mask-position: center; 113 | -webkit-mask-size: var(--iconic-size); 114 | -webkit-mask-repeat: no-repeat; 115 | display: inline-block; 116 | width: var(--iconic-size); 117 | height: var(--iconic-size); 118 | margin-right: var(--size-4-1); 119 | } 120 | } 121 | 122 | a.external-link[href^="file:///"] { 123 | color: var(--text-accent); 124 | background-image: none; // Removes default external icon 125 | filter: hue-rotate(30deg) saturate(90%); // Shifts colors to look different from internal link 126 | padding-right: 7px; // Reverse padding for icon on the right 127 | padding-left: 11px; // ... 128 | 129 | &:hover { 130 | color: var(--text-accent-hover); 131 | } 132 | 133 | // Removes icon on the left 134 | &:before { 135 | content: none; 136 | } 137 | 138 | // Icon on the right for external links 139 | &:after { 140 | --iconic-size: 24px; 141 | content: ""; 142 | color: inherit; 143 | background-color: currentColor; 144 | mask-position: center; 145 | -webkit-mask-position: center; 146 | -webkit-mask-size: var(--iconic-size); 147 | -webkit-mask-repeat: no-repeat; 148 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 7.75h12.5a2 2 0 0 1 2 2v7.5a2 2 0 0 1-2 2h-3.5m-.25-11.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2v3.5m0 9 5.5-5.5m0 0h-3.5m3.5 0v3.5'%3E%3C/path%3E%3C/svg%3E%0A"); 149 | /* Pro Source: https://iconic.app/folder-share/ */ 150 | display: inline-block; 151 | width: var(--iconic-size); 152 | height: var(--iconic-size); 153 | margin-left: var(--size-4-1); 154 | } 155 | } 156 | 157 | /* Copyright (C) Iconic 158 | Iconic Pro Icons 159 | https://iconic.app 160 | Iconic Pro icons are copyrighted. Redistribution is not permitted. Use in source and binary forms, with or without modification, is allowed if you own an Iconic Pro license. */ --------------------------------------------------------------------------------