example: styling data-values via CSS

Author: Cube707

exampleVault/.obsidian/snippets/meta-bind-customization.css

@@ -6,4 +6,35 @@
 /* A snippet that turns a button green */
 .mb-button.green-button > button {
     background: var(--color-green);
-}
+}
+
+/* A snippets that adds icons after an inlineSelector */
+.mb-input .dnd5e-skill-prof {
+    &::after {
+        content: '';
+        display: inline-block;
+        margin-left: 0.2em;
+        width: 1.5em;
+        aspect-ratio: 1;
+        vertical-align: middle;
+        mask-size: contain;
+        mask-position: center;
+        mask-repeat: no-repeat;
+    }
+    &[data-internal-value~="0"]::after {
+        mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="2.5" fill="none" stroke="black" stroke-width="0.75"/></svg>');
+        background-color: var(--text-faint);
+    }
+    &[data-internal-value~="0.5"]::after {
+        mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="2.5" fill="none" stroke="black" stroke-width=".75"/><path transform="rotate(45,5,5)" d="m5 7.5s-2.5-1.1-2.5-2.5 2.2-2.5 2.2-2.5"/></svg>');
+        background-color: var(--text-normal);
+    }
+    &[data-internal-value~="1"]::after {
+        mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="2.5" stroke="black" stroke-width=".75"/></svg>');
+        background-color: var(--color-accent);
+    }
+    &[data-internal-value~="2"]::after {
+        mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="2.5"/><circle cx="5" cy="5" r="4" fill="none" stroke="black" stroke-width=".75"/></svg>');
+        background-color: var(--color-accent);
+    }
+}

exampleVault/Advanced Examples/DnD 5e Ability Scores and Modifiers.md

@@ -5,6 +5,11 @@ CON: 11
 INT: 12
 WIS: 14
 CHR: 11
+PROF_mod: 5
+proficiency:
+  acrobatics: 2
+  arcana: 1
+  deception: 0.5
 ---
 
 This example calculates a DnD character's ability modifiers from the ability scores and displays it all in a list.
@@ -39,3 +44,17 @@ VIEW[ floor(({CHR} - 10) / 2) ][math(hidden):memory^CHR_mod]
 - INT: `VIEW[**{INT}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^INT_mod}) ? '+' : '', string({memory^INT_mod})) ][math]`)
 - WIS: `VIEW[**{WIS}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^WIS_mod}) ? '+' : '', string({memory^WIS_mod})) ][math]`)
 - CHR: `VIEW[**{CHR}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^CHR_mod}) ? '+' : '', string({memory^CHR_mod})) ][math]`)
+
+## Skill modifiers
+
+If we want to calculate the skill modifiers for a character, while also taking into account it's proficiency, we can leverage the `inlineSelect` Input to map the proficiency types to numerical values while still having a nice, editable interface.
+We can additionally style the input depending on the currently selected value, to get helpful visual indicators.
+
+#### Here you can see an example of how it could work
+
+First we need to set the proficiency modifier: `INPUT[number:PROF_mod]`
+
+`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.acrobatics]` Acrobatics (DEX) `VIEW[floor({proficiency.acrobatics}*{PROF_mod})+{memory^DEX_mod}]`
+`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.arcana]` Arcana (INT) `VIEW[floor({proficiency.arcana}*{PROF_mod})+{memory^INT_mod}]`
+`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.deception]` Deception (CHR) `VIEW[floor({proficiency.deception}*{PROF_mod})+{memory^CHR_mod}]`
+`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.perception]` Perception (WIS) `VIEW[floor({proficiency.perception}*{PROF_mod})+{memory^WIS_mod}]`