├── README.md ├── assets ├── concept.svg ├── descriptor.svg ├── list.svg ├── multiline.svg ├── plain.svg ├── question.svg ├── set.svg └── slot.svg ├── card-type.css ├── config.css ├── custom_style.png ├── default_style.png ├── demo.rems ├── everything.css ├── manifest.json ├── notes.md ├── practice-direction-question.css ├── practice-direction.css ├── rem-type-simple.css ├── rem-type.css ├── remnote-css-card-rems-social.png └── text-style.css /README.md: -------------------------------------------------------------------------------- 1 | # RemNote Card Type Styles 2 | 3 | A Custom CSS for [RemNote](https://www.remnote.io/) to change how flashcard generating rems look. 4 | 5 | **Quickstart:** 6 | 7 | ```css 8 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/everything.css"); 9 | ``` 10 | 11 | ![default_style](./default_style.png) ![custom_style](./custom_style.png) 12 | 13 | **Features:** 14 | 15 | Visual indications for: 16 | 17 | - practice direction 18 | - rem types (plain, multi-line, list, set) 19 | - card types (concept, descriptor, question [and slot]). 20 | 21 | Allow custom text styling by resetting format for concept (bold) and descriptor (italic). 22 | 23 | **Note:** There are still some glitches as the RemNotes markup is not easy to handle. 24 | 25 | ## Installation 26 | 27 | The style consists of multiple modules of which you can chose the parts you want to enable: 28 | 29 | - `practice-direction.css`: arrows (⇔, ⇏) instead of `::` 30 | - `rem-type*.css`: Icons for Concept, Descriptor, Question and Slot. There are 2 variants of which you can chose one: 31 | - `rem-type.css`: Using RemNotes SVG icons. 32 | - `rem-type-simple.css`: Use ``, ``, `` and ``. 33 | - `card-type.css`: Icons for Multiline, List, Set. 34 | - `text-style.css`: Disable bold/italic formatting for concept, question and descriptor. 35 | 36 | - Open the `Custom CSS` page in RemNote. 37 | - Create a new blank template block. 38 | - Paste the layout 39 | 1. **Recommended:** Include everything with default settings. This way you get all future updates. 40 | ```css 41 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/everything.css"); 42 | ``` 43 | 2. **Custom:** Only include the features you like. 44 | ```css 45 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/practice-direction.css"); 46 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/rem-type.css"); 47 | /* OR: @import URL("https://hannesfrank.github.io/remnote-css-rem-types/rem-type-simple.css"); */ 48 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/card-type.css"); 49 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/text-style.css"); 50 | ``` 51 | 3. **Expert:** You know CSS and want to tweak specific parts? Copy the code directly from the files above. 52 | 53 | **Note:** If you do not want to get bothered by future updates or want to install a develop version from another branch, you can import a specific version with jsdelivr 54 | 55 | ```css 56 | @import URL("https://cdn.jsdelivr.net/gh/hannesfrank/remnote-css-rem-types@8fe69d0/card-types.css"); 57 | ``` 58 | 59 | ## TODO 60 | 61 | - [ ] Prepare for offline usage. You have to this style with `@import` because it requires extra SVG 62 | icons. These should be embedded directly in the CSS. 63 | 64 | See also my [development notes](./notes.md). 65 | 66 | ## Contributing 67 | 68 | I am not a designer. This is just a proof of concept. 69 | If you have a good design, feel free to open an Issue to discuss. 70 | 71 | If you can improve something a Pull Request is very welcome! 72 | 73 | ### Developing with Live Reload 74 | 75 | Setup a workspace in Chrome DevTools. See e.g. [StackOverflow: How to save CSS changes of Styles panel](https://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools). 76 | 77 | - Serve the project folder on e.g. `localhost:5500`. I don't know yet if this has to be a live server, but probably not as Chrome accesses the file system directly. 78 | - Add the styles in development to RemNote like this: 79 | 80 | ``` 81 | @import URL("http://127.0.0.1:5500/practice-direction.css"); 82 | @import URL("http://127.0.0.1:5500/rem-type.css"); 83 | @import URL("http://127.0.0.1:5500/card-type.css"); 84 | @import URL("http://127.0.0.1:5500/text-style.css"); 85 | ``` 86 | 87 | - Open DevTools > Sources > Filesystem and add the project folder as a workspace using the little `+`. The icon of the corresponding `.css` files should have a little green circle now and hovering over the icon shows how they are linked. 88 | - You can edit now both in your editor and in DevTools. I recommend enabling autosave in your text editor. 89 | -------------------------------------------------------------------------------- /assets/concept.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/descriptor.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /assets/list.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/multiline.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/plain.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/question.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/set.svg: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /assets/slot.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /card-type.css: -------------------------------------------------------------------------------- 1 | /** Card Types 2 | * 3 | * Display an icon for multiline, list an set. 4 | * 5 | * There are 2 rules to select on hover, edit and on normal 6 | * 7 | * NOTE: This competes with the rem type icon for a space to place the ::before. 8 | * 9 | */ 10 | .rem-container--multiline-card-type /* hover */ 11 | .rem-text 12 | .EditorContainer 13 | > div 14 | > span:first-child::before, 15 | .rem-container--multiline-card-type /* normal */ 16 | .rem-text 17 | .EditorContainer 18 | > span:first-child::before { 19 | /* content: url("assets/multiline.svg"); */ 20 | content: " ☰ "; 21 | color: plum; 22 | } 23 | .rem-container--list-card-type /* hover */ 24 | .rem-text 25 | .EditorContainer 26 | > div 27 | > span:first-child::before, 28 | .rem-container--list-card-type /* normal */ 29 | .rem-text 30 | .EditorContainer 31 | > span:first-child::before { 32 | /* content: "［...］"; */ 33 | /* content: "[ … ] "; */ 34 | /* contest: url("assets/list.svg"); */ 35 | content: "[⋯] "; 36 | color: mediumseagreen; 37 | } 38 | 39 | .rem-container--set-card-type /* hover */ 40 | .rem-text 41 | .EditorContainer 42 | > div 43 | > span:first-child::before, 44 | .rem-container--set-card-type /* normal */ 45 | .rem-text 46 | .EditorContainer 47 | > span:first-child::before { 48 | /* content: "［...］"; */ 49 | /* content: "[ … ] "; */ 50 | /* contest: url("assets/set.svg"); */ 51 | content: "{⋯} "; 52 | color: coral; 53 | } 54 | 55 | /* Default Text Type */ 56 | /* 57 | .rem-container--text-card-type .rem-text .concept_rem_type::before, 58 | .rem-container--text-card-type .rem-text .descriptor_rem_type::before, 59 | .rem-container--text-card-type .rem-text .slot_rem_type::before, 60 | .rem-container--text-card-type .rem-text .question_rem_type::before { 61 | content: "T"; 62 | color: green; 63 | } 64 | */ 65 | -------------------------------------------------------------------------------- /config.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Practice direction */ 3 | --both-practice-icon: "⇔"; 4 | --both-practice-color: goldenrod; 5 | --forward-practice-icon: "⇒"; 6 | --forward-practice-color: green; 7 | --backward-practice-icon: "⇐"; 8 | --backward-practice-color: blue; 9 | --disabled-practice-icon: "⇏"; 10 | --disabled-practice-color: tomato; 11 | 12 | /* Special icons for questions. 13 | 14 | Normally it would not make much sense to find the question given the answer, like "??? ?:: 42" 15 | so you can enable showing a warning when this is the case. 16 | If you use question cards to work around the CD-Framework and store arbitrary associative pairs 17 | then you can disable this extra style in the Code section. 18 | */ 19 | --question-backward-practice-icon: "!⇐!"; 20 | --question-backward-practice-color: red; 21 | --question-both-practice-icon: "!⇔!"; 22 | --question-both-practice-color: red; 23 | 24 | /* Card type icons */ 25 | --concept-icon-color: green; 26 | --descriptor-icon-color: royalblue; 27 | --question-icon-color: mediumpurple; 28 | --slot-icon-color: grey; 29 | 30 | /* If you are using the ASCII Icons (enable in the Code section) 31 | you can configure the content here. Unicode symbols should also work. 32 | */ 33 | --concept-icon: "〈C〉"; 34 | --descriptor-icon: "〈D〉"; 35 | --question-icon: "〈?〉"; 36 | --slot-icon: "〈S〉"; 37 | --rem-icon-font-weight: bold; 38 | } 39 | -------------------------------------------------------------------------------- /custom_style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hannesfrank/remnote-css-rem-types/5706bfc4c2d51fa1daa2ad0d1a1706f51d003c50/custom_style.png -------------------------------------------------------------------------------- /default_style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hannesfrank/remnote-css-rem-types/5706bfc4c2d51fa1daa2ad0d1a1706f51d003c50/default_style.png -------------------------------------------------------------------------------- /demo.rems: -------------------------------------------------------------------------------- 1 | - Concept:: Definition 2 | - descriptor:: value 3 | - Question?:: Answer 4 | - Multiline::: 5 | - List::1. 6 | - Set::*. -------------------------------------------------------------------------------- /everything.css: -------------------------------------------------------------------------------- 1 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/practice-direction.css"); 2 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/rem-type.css"); 3 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/card-type.css"); 4 | @import URL("https://hannesfrank.github.io/remnote-css-rem-types/text-style.css"); 5 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Rem Type and Practice Direction", 3 | "id": "com.github.hannesfrank.remnote-css-rem-types", 4 | "version": "1.2.2", 5 | "description": "Add icons for flashcard/rem types and practice directions.", 6 | "author": "Hannes Frank ", 7 | "homepage": "https://github.com/hannesfrank/remnote-css-rem-types", 8 | "shelf": "Custom CSS", 9 | "categories": ["flashcard", "icon"], 10 | "config": { 11 | "demo": "demo.rems", 12 | "customization": { "file": "config.css" } 13 | }, 14 | "thumb": "remnote-css-card-rems-social.png", 15 | "preview": "custom_style.png", 16 | "install": { 17 | "method": "copy", 18 | "content": [ 19 | { 20 | "description": "Practice Direction Arrows", 21 | "content": [ 22 | "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/practice-direction.css\");", 23 | { 24 | "description": "Warn on question back direction", 25 | "css": "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/practice-direction-question.css\");", 26 | "enabled": true 27 | } 28 | ] 29 | }, 30 | { 31 | "description": "**Choose one:** Concept, Descriptor, Question Icons", 32 | "content": [ 33 | { 34 | "description": "SVG Icons", 35 | "css": "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/rem-type.css\");", 36 | "enabled": true 37 | }, 38 | { 39 | "description": "Text Icons", 40 | "css": "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/rem-type-simple.css\");", 41 | "enabled": false 42 | } 43 | ] 44 | }, 45 | { 46 | "description": "Multiline, List, Set Icons", 47 | "css": "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/card-type.css\");" 48 | }, 49 | { 50 | "description": "Reset Text Styling (concept bold etc.)", 51 | "css": "@import URL(\"https://hannesfrank.github.io/remnote-css-rem-types/text-style.css\");" 52 | } 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /notes.md: -------------------------------------------------------------------------------- 1 | # Development Notes 2 | 3 | ## LiveReload Approaches 4 | 5 | I brainstormed multiple things that could work. So far Option 3 works and is documented above. 6 | 7 | - Option 1: Edit styles manually in RemNote 8 | - Problem: Have to copy styles to editor afterwards 9 | - Problem: Scroll to view code and elements 10 | - Problem: Bad editing experience 11 | - Option 2: LiveServer 12 | - How can I do this? 13 | - Use this `@import URL('http://127.0.0.1:5500/test.css');` in RemNote. 14 | - It does not reload automatically, only when the checkmark is toggeled or the code is edited. 15 | - I could write an extension which toggles the checkbox with `setInterval`. 16 | - Try adding a LiveReload script manually as a script tag. 17 | - Use a live-reload browser extension. 18 | - Option 3: Persist DevTools edits [StackOverflow: How to save CSS changes of Styles panel](https://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools) 19 | - Workspaces 20 | - Overrides 21 | - Option 4: Stylus with live editing? 22 | - Option 5: Inject the CSS manually and somehow reload it periodically. 23 | 24 | ## Icon display 25 | 26 | - Option 1: `background` [coloring with data url](https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image) 27 | 28 | ``` 29 | content: ""; 30 | background: transparent url(../assets/toolbar/concept.svg) no-repeat; 31 | height: 12px; 32 | width: 12px; 33 | background-size: contain; 34 | display: inline-block; 35 | filter: brightness(1.5); 36 | ``` 37 | 38 | - Option 2: [masks](https://developer.mozilla.org/de/docs/Web/CSS/mask) (supports coloring, care prefixing) 39 | 40 | ``` 41 | content: ""; 42 | background: green; 43 | display: inline-block; 44 | width: 12px; 45 | height: 12px; 46 | -webkit-mask-image: url(../assets/toolbar/concept.svg); 47 | -webkit-mask-repeat: no-repeat; 48 | -webkit-mask-size: contain; 49 | ``` 50 | 51 | - Option 3: Download, color/resize and host myself or use data url. 52 | 53 | ## Current RemNote Markup Problems 54 | 55 | Right now the styling is not stable. The RemNote's markup is pretty dynamic due to heavy optimization. There are elements created and deleted whenever you hover over a Rem or focus to edit. I might have missed some cases. 56 | 57 | There are also some difficulties with the current markup which might get fixed later: 58 | 59 | - **Dynamic markup!** I tried to work around a bit, but for example if you hover over rems fast sometimes the hover markup sticks and there are duplicated icons. 60 | - Concepts, descriptors and Questions have an extra tag `span.*_rem_type` with a zero-width-non-breakable space (``) between name and `..`. This might be a bug though. Currently it generates extra icons. 61 | - Btw: Slots don't. 62 | - Card types are handled differently: For Multiline, Set and List the `:::` is virtual - you can't select it. 63 | - Slots are handled differently than Concept, descriptor and Question. With slots the `::` marker is just text, with the other types, it has its own tag. 64 | - Some things break if you make part of the name of a concept bold. 65 | - Note to self: This splits the name into multiple tags. This might be the cause why some names in my backup are lists of strings. 66 | - Those things still get the `.bold` tag which was fixed in [Remnote#58](https://github.com/remnoteio/remnote-issues/issues/58). 67 | - Styling works when not hovered. When hovered, it is removed. 68 | - Concept etc. get removed when selecting plain, slots don't. I think plain should not remove the card status and just reset List, Set, Multiline. 69 | 70 | ### WIP: Wishlist for RemNote Team 71 | 72 | - [ ] Make `#hierarchy-editor-references` a class, not an id. 73 | - [ ] Remove `` tag. 74 | - [ ] Add class to indicate hover, unfocused. 75 | - There is `.rem-container-focused` for edit 76 | - E.g. to remove styling when hovered to make `::` editable. 77 | - Design decision: How to handle `::` marker. Is this visual only and changable in menu or with shortcut or should it be editable as text. 78 | 79 | - [ ] Fix Slot handling. 80 | - [ ] Fix plain. 81 | 82 | - [ ] Add a setting to disable Uppercase/lowercase convention for Concept/descriptor and `?` for Question and rely on shortcut/menu to change type. 83 | -------------------------------------------------------------------------------- /practice-direction-question.css: -------------------------------------------------------------------------------- 1 | /* warn on back questions */ 2 | .rem-container--question-rem-type.rem-container--forwards-practice-disabled.rem-container--backwards-practice-enabled 3 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after, 4 | .rem-container--question-rem-type.rem-container--forwards-practice-disabled.rem-container--backwards-practice-enabled 5 | .MultiLineCardIndicator::after { 6 | content: var(--question-backward-practice-icon, "!⇐!"); 7 | font-size: 15px; 8 | color: var(--question-backward-practice-color, red); 9 | margin-left: 3px; 10 | } 11 | 12 | .rem-container--question-rem-type.rem-container--forwards-practice-enabled.rem-container--backwards-practice-enabled 13 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after, 14 | .rem-container--question-rem-type.rem-container--forwards-practice-enabled.rem-container--backwards-practice-enabled 15 | .MultiLineCardIndicator::after { 16 | content: var(--question-both-practice-icon, "!⇔!"); 17 | font-size: 15px; 18 | color: var(--question-both-practice-color, red); 19 | margin-left: 3px; 20 | } 21 | -------------------------------------------------------------------------------- /practice-direction.css: -------------------------------------------------------------------------------- 1 | /* Disable current indicators */ 2 | .rem-container:not(.rem-container--focused) .separator-symbol, 3 | .rem-container:not(.rem-container--focused) .MultiLineCardIndicator { 4 | /* Hiding via font-size makes it easier to display ::before and ::after elements */ 5 | font-size: 0; 6 | } 7 | 8 | /* Bidirectional, forward and backward cards. */ 9 | .rem-container--forwards-practice-enabled.rem-container--backwards-practice-enabled 10 | /* This :not(...) chain works around a SlateJS peculiarity of inserting zero width spaces into the tree 11 | * e.g. span.descriptor_rem_type.separator-symbol > span{} 12 | */ 13 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after, 14 | .rem-container--forwards-practice-enabled.rem-container--backwards-practice-enabled 15 | .MultiLineCardIndicator::after { 16 | content: var(--both-practice-icon, "⇔"); 17 | font-size: 15px; 18 | color: var(--both-practice-color, goldenrod); 19 | margin-left: 3px; 20 | } 21 | 22 | .rem-container--forwards-practice-enabled.rem-container--backwards-practice-disabled 23 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after, 24 | .rem-container--forwards-practice-enabled.rem-container--backwards-practice-disabled 25 | .MultiLineCardIndicator::after { 26 | content: var(--forward-practice-icon, "⇒"); 27 | font-size: 15px; 28 | color: var(--forward-practice-color, green); 29 | margin-left: 3px; 30 | } 31 | 32 | .rem-container--forwards-practice-disabled.rem-container--backwards-practice-enabled 33 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after, 34 | .rem-container--forwards-practice-disabled.rem-container--backwards-practice-enabled 35 | .MultiLineCardIndicator::after { 36 | content: var(--backward-practice-icon, "⇐"); 37 | font-size: 15px; 38 | color: var(--backward-practice-color, blue); 39 | margin-left: 3px; 40 | } 41 | 42 | /* Disabled cards */ 43 | /* Move the strike background one level down so that it is not displayed over the ::after */ 44 | .strikediag { 45 | background: none; 46 | } 47 | .strikediag span { 48 | background: linear-gradient( 49 | to left top, 50 | transparent 47.75%, 51 | #000 49.5%, 52 | #000 50.5%, 53 | transparent 52.25% 54 | ); 55 | } 56 | 57 | .rem-container.rem-container--forwards-practice-disabled.rem-container--backwards-practice-disabled 58 | .separator-symbol:not(.concept_rem_type):not(.descriptor_rem_type):not(.question_rem_type)::after { 59 | content: var(--disabled-practice-icon, "⇏"); 60 | font-size: 15px; 61 | color: var(--disabled-practice-color, tomato); 62 | margin-left: 3px; 63 | } 64 | -------------------------------------------------------------------------------- /rem-type-simple.css: -------------------------------------------------------------------------------- 1 | .rem-container--concept-rem-type /* hover */ 2 | > .rem-text 3 | > .rich-text-editor 4 | > .EditorContainer 5 | > div::before, 6 | .rem-container--concept-rem-type /* normal */ 7 | > .rem-text 8 | > .EditorContainer:not(.rem-bullet__number):before { 9 | /* content: "｢C｣ "; */ 10 | content: var(--concept-icon, "〈C〉 "); 11 | color: var(--concept-icon-color, green); 12 | font-weight: var(--rem-icon-font-weight, bold); 13 | } 14 | .rem-container--descriptor-rem-type /* hover */ 15 | > .rem-text 16 | > .rich-text-editor 17 | > .EditorContainer 18 | > div::before, 19 | .rem-container--descriptor-rem-type /* normal */ 20 | > .rem-text 21 | > .EditorContainer:not(.rem-bullet__number):before { 22 | content: var(--descriptor-icon, "〈D〉 "); 23 | color: var(--descriptor-icon-color, royalblue); 24 | font-weight: var(--rem-icon-font-weight, bold); 25 | } 26 | .rem-container--question-rem-type /* hover */ 27 | > .rem-text 28 | > .rich-text-editor 29 | > .EditorContainer 30 | > div::before, 31 | .rem-container--question-rem-type /* normal */ 32 | > .rem-text 33 | > .EditorContainer:not(.rem-bullet__number):before { 34 | content: var(--question-icon, "〈?〉 "); 35 | color: var(--question-icon-color, mediumpurple); 36 | font-weight: var(--rem-icon-font-weight, bold); 37 | } 38 | .rem-container--slot-rem-type /* hover */ 39 | > .rem-text 40 | > .rich-text-editor 41 | > .EditorContainer 42 | > div::before, 43 | .rem-container--slot-rem-type /* normal */ 44 | > .rem-text 45 | > .EditorContainer:not(.rem-bullet__number):before { 46 | /* content: "〈📥〉 "; */ 47 | content: var(--slot-icon, "〈S〉 "); 48 | color: var(--slot-icon-color, grey); 49 | font-weight: var(--rem-icon-font-weight, bold); 50 | } 51 | 52 | /* no_content-rem-type are code blocks for example. */ 53 | /*.rem-container--no_content-rem-type:not(.rem-container--focused) > div > div:not(.rich-text-editor).EditorContainer::before { 54 | content: "🖹 "; 55 | font-weight: bold; 56 | color: blue; 57 | } 58 | */ 59 | -------------------------------------------------------------------------------- /rem-type.css: -------------------------------------------------------------------------------- 1 | /** Rem type 2 | * 3 | * NOTE: This competes with the card type icon for a space to place the ::before. 4 | * 5 | * The icons are a bit harder to handle because they need to be displayed as 6 | * block, not as inline like in rem-type-simple. 7 | */ 8 | 9 | /** This is required to disable line breaks after the icon on hovering. 10 | * TODO: I don't think I need this anymore after using the new selectors. 11 | * TODO: Does this break something? 12 | */ 13 | /* .rem-container--concept-rem-type > .rem-text > div:first-child :first-child, 14 | .rem-container--descriptor-rem-type > .rem-text > div:first-child :first-child, 15 | .rem-container--question-rem-type > .rem-text > div:first-child :first-child, 16 | .rem-container--slot-rem-type > .rem-text > div:first-child :first-child { 17 | display: inline-block; 18 | } */ 19 | 20 | /* .rem-container--concept-rem-type > div > div:first-child::before { */ 21 | .rem-container--concept-rem-type /* hover */ 22 | > .rem-text 23 | > .rich-text-editor 24 | > .EditorContainer 25 | > div::before, 26 | .rem-container--concept-rem-type /* normal */ 27 | > .rem-text 28 | > .EditorContainer:not(.rem-bullet__number):before { 29 | /* Original size: 15x19 */ 30 | content: ""; 31 | background: var(--concept-icon-color, green); 32 | display: inline-block; 33 | width: 15px; 34 | height: 13px; 35 | position: relative; 36 | top: 1px; 37 | /* left: -1px; */ 38 | -webkit-mask-image: url("assets/concept.svg"); 39 | -webkit-mask-repeat: no-repeat; 40 | -webkit-mask-size: contain; 41 | mask-image: url("assets/concept.svg"); 42 | mask-repeat: no-repeat; 43 | mask-size: contain; 44 | } 45 | 46 | .rem-container--descriptor-rem-type /* hover */ 47 | > .rem-text 48 | > .rich-text-editor 49 | > .EditorContainer 50 | > div::before, 51 | .rem-container--descriptor-rem-type /* normal */ 52 | > .rem-text 53 | > .EditorContainer:not(.rem-bullet__number):before { 54 | /* Original size: 20x17 */ 55 | content: ""; 56 | background: var(--descriptor-icon-color, royalblue); 57 | display: inline-block; 58 | width: 16px; 59 | height: 12px; 60 | position: relative; 61 | top: 1px; 62 | left: -1px; 63 | -webkit-mask-image: url("assets/descriptor.svg"); 64 | -webkit-mask-repeat: no-repeat; 65 | -webkit-mask-size: contain; 66 | mask-image: url("assets/descriptor.svg"); 67 | mask-repeat: no-repeat; 68 | mask-size: contain; 69 | } 70 | 71 | .rem-container--question-rem-type /* hover */ 72 | > .rem-text 73 | > .rich-text-editor 74 | > .EditorContainer 75 | > div::before, 76 | .rem-container--question-rem-type /* normal */ 77 | > .rem-text 78 | > .EditorContainer:not(.rem-bullet__number):before { 79 | /* Original size: 24x24 */ 80 | content: ""; 81 | background: var(--question-icon-color, mediumpurple); 82 | display: inline-block; 83 | width: 15px; 84 | height: 13px; 85 | position: relative; 86 | top: 1px; 87 | left: -2px; 88 | -webkit-mask-image: url("assets/question.svg"); 89 | -webkit-mask-repeat: no-repeat; 90 | -webkit-mask-size: contain; 91 | mask-image: url("assets/question.svg"); 92 | mask-repeat: no-repeat; 93 | mask-size: contain; 94 | } 95 | 96 | .rem-container--slot-rem-type /* hover */ 97 | > .rem-text 98 | > .rich-text-editor 99 | > .EditorContainer 100 | > div::before, 101 | .rem-container--slot-rem-type /* normal */ 102 | > .rem-text 103 | > .EditorContainer:not(.rem-bullet__number):before { 104 | /* Original size: 24x24 */ 105 | content: ""; 106 | background: var(--slot-icon-color, grey); 107 | display: inline-block; 108 | width: 15px; 109 | height: 13px; 110 | overflow: visible; 111 | position: relative; 112 | top: 1px; 113 | left: -2px; 114 | -webkit-mask-image: url("assets/slot.svg"); 115 | -webkit-mask-repeat: no-repeat; 116 | -webkit-mask-size: contain; 117 | mask-image: url("assets/slot.svg"); 118 | mask-repeat: no-repeat; 119 | mask-size: contain; 120 | } 121 | 122 | /* no_content-rem-type are code blocks for example. */ 123 | /*.rem-container--no_content-rem-type > div > div:first-child::before { 124 | content: "🖹 "; 125 | font-weight: bold; 126 | color: blue; 127 | } 128 | */ 129 | -------------------------------------------------------------------------------- /remnote-css-card-rems-social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hannesfrank/remnote-css-rem-types/5706bfc4c2d51fa1daa2ad0d1a1706f51d003c50/remnote-css-card-rems-social.png -------------------------------------------------------------------------------- /text-style.css: -------------------------------------------------------------------------------- 1 | /* As we have visual indication through icons, we don't need text styling anymore. */ 2 | .concept_rem_type, 3 | .question_rem_type { 4 | font-weight: initial; 5 | } 6 | 7 | .descriptor_rem_type { 8 | font-style: initial; 9 | } 10 | 11 | /* User defined bold formatting has to be reenabled again. */ 12 | .concept_rem_type.bold, 13 | .question_rem_type.bold { 14 | font-weight: bold; 15 | } 16 | .descriptor_rem_type.italic, 17 | .question_rem_type.bold { 18 | font-style: italic; 19 | } 20 | --------------------------------------------------------------------------------