mirror of
https://github.com/butterski/obsidian-rpg-dice-roller.git
synced 2026-07-22 06:57:00 +00:00
1.1.4 changes
This commit is contained in:
mkuch
parent
a6798cd2a5
commit
6f40e8b95f
5 changed files with 202 additions and 137 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "rpg-dice-roller",
|
||||
"name": "RPG Dice Roller",
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.4",
|
||||
"minAppVersion": "1.7.2",
|
||||
"description": "Build RPG dice roll commands with d20 syntax for Discord and Roll20. Create formulas visually with advantage/disadvantage support.",
|
||||
"author": "Miłosz Kucharski",
|
||||
|
|
|
|||
11
src/command-format.ts
Normal file
11
src/command-format.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { DiceRollerSettings } from './types';
|
||||
|
||||
export function getCommandPrefix(settings: DiceRollerSettings): string {
|
||||
return settings.defaultPlatform === 'discord'
|
||||
? settings.discordPrefix
|
||||
: settings.roll20Prefix;
|
||||
}
|
||||
|
||||
export function buildDiceCommand(settings: DiceRollerSettings, formula: string): string {
|
||||
return `${getCommandPrefix(settings)} ${formula}`;
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import { MarkdownPostProcessorContext, Notice } from 'obsidian';
|
|||
import { DiceParser } from './parser';
|
||||
import DiceRollerPlugin from '../main';
|
||||
import { DiceBuilderView } from './view';
|
||||
import { buildDiceCommand } from './command-format';
|
||||
|
||||
export function registerRollSyntaxProcessor(plugin: DiceRollerPlugin) {
|
||||
plugin.registerMarkdownPostProcessor((element: HTMLElement, context: MarkdownPostProcessorContext) => {
|
||||
|
|
@ -26,6 +27,7 @@ export function registerRollSyntaxProcessor(plugin: DiceRollerPlugin) {
|
|||
|
||||
// Make it clickable
|
||||
codeEl.addClass('dice-roll-clickable');
|
||||
codeEl.setAttribute('title', 'Click to load in dice builder. Ctrl-click to copy command.');
|
||||
|
||||
// Add click handler
|
||||
codeEl.addEventListener('click', (e) => {
|
||||
|
|
@ -36,6 +38,13 @@ export function registerRollSyntaxProcessor(plugin: DiceRollerPlugin) {
|
|||
|
||||
if (parsed) {
|
||||
void (async () => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
const command = buildDiceCommand(plugin.settings, formula);
|
||||
await navigator.clipboard.writeText(command);
|
||||
new Notice(`Copied command: ${command}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the dice view and load the formula
|
||||
const leaves = plugin.app.workspace.getLeavesOfType('dice-builder-view');
|
||||
|
||||
|
|
|
|||
27
src/view.ts
27
src/view.ts
|
|
@ -3,6 +3,7 @@
|
|||
import { ItemView, WorkspaceLeaf, MarkdownView, Notice } from 'obsidian';
|
||||
import { DiceFormula, DicePart } from './types';
|
||||
import { DiceParser } from './parser';
|
||||
import { buildDiceCommand } from './command-format';
|
||||
import DiceRollerPlugin from '../main';
|
||||
|
||||
export const DICE_BUILDER_VIEW_TYPE = 'dice-builder-view';
|
||||
|
|
@ -55,7 +56,7 @@ export class DiceBuilderView extends ItemView {
|
|||
const container = this.builderContainer;
|
||||
|
||||
// Title
|
||||
const titleEl = container.createEl('h4', { text: 'Dice Formula Builder' });
|
||||
const titleEl = container.createEl('h4', { text: 'Dice formula builder' });
|
||||
titleEl.addClass('dice-builder-title');
|
||||
|
||||
// Formula display
|
||||
|
|
@ -76,7 +77,7 @@ export class DiceBuilderView extends ItemView {
|
|||
|
||||
// Dice buttons section
|
||||
const diceSection = container.createDiv({ cls: 'dice-buttons-section' });
|
||||
diceSection.createEl('h5', { text: 'Add Dice' });
|
||||
diceSection.createEl('h5', { text: 'Add dice' });
|
||||
|
||||
const diceTypes = [
|
||||
{ sides: 4, label: 'd4' },
|
||||
|
|
@ -121,7 +122,7 @@ export class DiceBuilderView extends ItemView {
|
|||
|
||||
// Modifier section
|
||||
const modifierSection = container.createDiv({ cls: 'dice-modifier-section' });
|
||||
modifierSection.createEl('h5', { text: 'Add Modifier' });
|
||||
modifierSection.createEl('h5', { text: 'Add modifier' });
|
||||
|
||||
const modifierRow = modifierSection.createDiv({ cls: 'dice-row' });
|
||||
const modifierInput = modifierRow.createEl('input', {
|
||||
|
|
@ -161,7 +162,7 @@ export class DiceBuilderView extends ItemView {
|
|||
|
||||
// Advantage/Disadvantage section
|
||||
const advDisSection = container.createDiv({ cls: 'dice-advdis-section' });
|
||||
advDisSection.createEl('h5', { text: 'Roll Type' });
|
||||
advDisSection.createEl('h5', { text: 'Roll type' });
|
||||
|
||||
const advDisRow = advDisSection.createDiv({ cls: 'dice-row' });
|
||||
|
||||
|
|
@ -194,15 +195,15 @@ export class DiceBuilderView extends ItemView {
|
|||
// Action buttons
|
||||
const actionSection = container.createDiv({ cls: 'dice-action-section' });
|
||||
|
||||
const copyBtn = actionSection.createEl('button', { text: 'Copy Command' });
|
||||
const copyBtn = actionSection.createEl('button', { text: 'Copy command' });
|
||||
copyBtn.addClass('dice-action-button');
|
||||
copyBtn.onclick = () => this.copyCommand();
|
||||
|
||||
const insertBtn = actionSection.createEl('button', { text: 'Insert to Note' });
|
||||
const insertBtn = actionSection.createEl('button', { text: 'Insert to note' });
|
||||
insertBtn.addClass('dice-action-button');
|
||||
insertBtn.onclick = () => this.insertToNote();
|
||||
|
||||
const rollSyntaxBtn = actionSection.createEl('button', { text: 'Create ROLL[...] Syntax' });
|
||||
const rollSyntaxBtn = actionSection.createEl('button', { text: 'Copy ROLL syntax' });
|
||||
rollSyntaxBtn.addClass('dice-action-button');
|
||||
rollSyntaxBtn.onclick = () => this.createRollSyntax();
|
||||
}
|
||||
|
|
@ -228,12 +229,6 @@ export class DiceBuilderView extends ItemView {
|
|||
this.renderBuilder();
|
||||
}
|
||||
|
||||
private getCommandPrefix(): string {
|
||||
const platform = this.plugin.settings.defaultPlatform;
|
||||
return platform === 'discord'
|
||||
? this.plugin.settings.discordPrefix
|
||||
: this.plugin.settings.roll20Prefix;
|
||||
}
|
||||
|
||||
private async copyCommand(): Promise<void> {
|
||||
const formula = DiceParser.toString(this.currentFormula);
|
||||
|
|
@ -242,7 +237,7 @@ export class DiceBuilderView extends ItemView {
|
|||
return;
|
||||
}
|
||||
|
||||
const command = `${this.getCommandPrefix()} ${formula}`;
|
||||
const command = buildDiceCommand(this.plugin.settings, formula);
|
||||
await navigator.clipboard.writeText(command);
|
||||
new Notice('Command copied to clipboard!');
|
||||
}
|
||||
|
|
@ -260,7 +255,7 @@ export class DiceBuilderView extends ItemView {
|
|||
return;
|
||||
}
|
||||
|
||||
const command = `${this.getCommandPrefix()} ${formula}`;
|
||||
const command = buildDiceCommand(this.plugin.settings, formula);
|
||||
const editor = view.editor;
|
||||
editor.replaceSelection(command);
|
||||
new Notice('Command inserted!');
|
||||
|
|
@ -282,7 +277,7 @@ export class DiceBuilderView extends ItemView {
|
|||
const container = this.suggestionsContainer;
|
||||
container.empty();
|
||||
|
||||
container.createEl('h5', { text: 'Suggestions from Open Notes' });
|
||||
container.createEl('h5', { text: 'Suggestions from open notes' });
|
||||
|
||||
// Get all open markdown views
|
||||
const markdownLeaves = this.app.workspace.getLeavesOfType('markdown');
|
||||
|
|
|
|||
290
styles.css
290
styles.css
|
|
@ -1,48 +1,65 @@
|
|||
/* RPG Dice Roller Plugin Styles */
|
||||
|
||||
.dice-builder-container {
|
||||
padding: 16px;
|
||||
--dice-control-height: 28px;
|
||||
--dice-radius: 5px;
|
||||
--dice-border: var(--background-modifier-border);
|
||||
--dice-surface: var(--background-secondary);
|
||||
--dice-surface-hover: var(--background-modifier-hover);
|
||||
--dice-accent: var(--interactive-accent);
|
||||
--dice-accent-hover: var(--interactive-accent-hover);
|
||||
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dice-builder-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* Formula Display */
|
||||
.dice-formula-display {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--dice-surface);
|
||||
border: 1px solid var(--dice-border);
|
||||
border-left: 3px solid var(--dice-accent);
|
||||
border-radius: var(--dice-radius);
|
||||
padding: 6px 6px 6px 8px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dice-formula-text {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 1.1em;
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
color: var(--text-normal);
|
||||
flex: 1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.dice-clear-button {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
min-height: 26px;
|
||||
background-color: var(--background-secondary-alt);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.85em;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.dice-clear-button:hover {
|
||||
background-color: var(--interactive-accent-hover);
|
||||
background-color: var(--dice-surface-hover);
|
||||
color: var(--text-normal);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
|
|
@ -51,7 +68,7 @@
|
|||
.dice-advdis-section,
|
||||
.dice-action-section,
|
||||
.dice-suggestions-section {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dice-buttons-section h5,
|
||||
|
|
@ -59,28 +76,39 @@
|
|||
.dice-advdis-section h5,
|
||||
.dice-suggestions-section h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.82em;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Dice Rows */
|
||||
.dice-row {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 50px minmax(42px, 1fr) 34px 34px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
gap: 6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dice-modifier-section .dice-row {
|
||||
grid-template-columns: minmax(50px, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.dice-advdis-section .dice-row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.dice-quantity-input,
|
||||
.dice-modifier-input {
|
||||
width: 50px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--dice-control-height);
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
font-size: 0.9em;
|
||||
|
|
@ -88,49 +116,52 @@
|
|||
|
||||
.dice-label {
|
||||
font-weight: 600;
|
||||
min-width: 50px;
|
||||
min-width: 0;
|
||||
color: var(--text-normal);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.dice-add-button,
|
||||
.dice-subtract-button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
height: var(--dice-control-height);
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.95em;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9em;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.dice-add-button {
|
||||
background-color: var(--interactive-success);
|
||||
color: white;
|
||||
border-color: var(--interactive-success);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
.dice-add-button:hover {
|
||||
background-color: var(--interactive-success-hover);
|
||||
transform: translateY(-1px);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent-hover);
|
||||
}
|
||||
|
||||
.dice-subtract-button {
|
||||
background-color: var(--background-secondary);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.dice-subtract-button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
transform: translateY(-1px);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
/* Common Modifiers */
|
||||
.common-modifiers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.common-label {
|
||||
|
|
@ -139,75 +170,80 @@
|
|||
}
|
||||
|
||||
.common-modifier-button {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
background-color: var(--background-secondary);
|
||||
min-height: 26px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
transition: all 0.2s;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.common-modifier-button:hover {
|
||||
background-color: var(--interactive-hover);
|
||||
transform: translateY(-1px);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
/* Toggle Buttons */
|
||||
.dice-toggle-button {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 2px solid var(--background-modifier-border);
|
||||
border-radius: 6px;
|
||||
background-color: var(--background-secondary);
|
||||
min-height: 30px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9em;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.dice-toggle-button:hover {
|
||||
border-color: var(--interactive-accent);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
.dice-toggle-button.active {
|
||||
background-color: var(--interactive-accent);
|
||||
background-color: var(--dice-accent);
|
||||
color: var(--text-on-accent);
|
||||
border-color: var(--interactive-accent);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.dice-action-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
padding-top: 16px;
|
||||
gap: 6px;
|
||||
border-top: 1px solid var(--dice-border);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.dice-action-button {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-left: 3px solid var(--dice-accent);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.95em;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9em;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.dice-action-button:hover {
|
||||
background-color: var(--interactive-accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
/* Suggestions */
|
||||
.dice-suggestions-section {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--dice-border);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.dice-no-suggestions {
|
||||
|
|
@ -219,25 +255,25 @@
|
|||
.dice-suggestions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.dice-suggestion-item {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
background-color: var(--background-secondary);
|
||||
padding: 6px;
|
||||
border: 1px solid var(--dice-border);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--dice-surface);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dice-suggestion-item:hover {
|
||||
background-color: var(--interactive-hover);
|
||||
border-color: var(--interactive-accent);
|
||||
background-color: var(--dice-surface-hover);
|
||||
border-color: var(--dice-accent);
|
||||
}
|
||||
|
||||
.dice-suggestion-left {
|
||||
|
|
@ -245,57 +281,56 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dice-suggestion-left:hover {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.dice-suggestion-formula {
|
||||
font-family: var(--font-monospace);
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.dice-suggestion-source {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
margin-left: 8px;
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dice-suggestion-add-btn {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--interactive-accent);
|
||||
border-radius: 4px;
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
min-height: 28px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid var(--dice-accent);
|
||||
border-radius: var(--dice-radius);
|
||||
background-color: var(--dice-surface);
|
||||
color: var(--text-normal);
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dice-suggestion-add-btn:hover {
|
||||
background-color: var(--interactive-accent-hover);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--dice-accent);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.dice-suggestion-add-btn:active {
|
||||
transform: scale(0.98);
|
||||
background-color: var(--dice-accent-hover);
|
||||
}
|
||||
|
||||
/* About Section in Settings */
|
||||
.dice-roller-about {
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
background-color: var(--background-secondary);
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 5px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.dice-roller-about p {
|
||||
|
|
@ -315,11 +350,11 @@
|
|||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.dice-builder-container {
|
||||
padding: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.dice-row {
|
||||
gap: 6px;
|
||||
grid-template-columns: 48px minmax(40px, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.dice-action-section {
|
||||
|
|
@ -330,45 +365,60 @@
|
|||
/* Make ROLL syntax stand out with custom class */
|
||||
.markdown-preview-view code.dice-roll-syntax,
|
||||
.markdown-rendered code.dice-roll-syntax {
|
||||
background: linear-gradient(135deg, var(--interactive-accent) 0%, var(--interactive-accent-hover) 100%);
|
||||
color: var(--text-on-accent);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--text-normal);
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
padding: 1px 6px 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--interactive-accent);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s;
|
||||
border-left-width: 3px;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.markdown-preview-view code.dice-roll-syntax:hover,
|
||||
.markdown-rendered code.dice-roll-syntax:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
filter: brightness(1.1);
|
||||
background-color: var(--background-modifier-hover);
|
||||
border-color: var(--interactive-accent-hover);
|
||||
}
|
||||
|
||||
.markdown-preview-view code.dice-roll-syntax::before,
|
||||
.markdown-rendered code.dice-roll-syntax::before {
|
||||
content: "🎲 ";
|
||||
font-size: 1rem;
|
||||
content: "ROLL";
|
||||
margin-right: 5px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-family: var(--font-interface);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
vertical-align: 0.04em;
|
||||
}
|
||||
|
||||
.markdown-preview-view code.dice-roll-syntax::after,
|
||||
.markdown-rendered code.dice-roll-syntax::after {
|
||||
content: attr(data-formula);
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
||||
.dice-roll-clickable {
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.dice-roll-clickable:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
@supports (background: color-mix(in srgb, red, white)) {
|
||||
.markdown-preview-view code.dice-roll-syntax,
|
||||
.markdown-rendered code.dice-roll-syntax {
|
||||
background-color: color-mix(in srgb, var(--interactive-accent) 14%, var(--background-secondary));
|
||||
border-color: color-mix(in srgb, var(--interactive-accent) 70%, var(--background-modifier-border));
|
||||
}
|
||||
|
||||
.markdown-preview-view code.dice-roll-syntax:hover,
|
||||
.markdown-rendered code.dice-roll-syntax:hover {
|
||||
background-color: color-mix(in srgb, var(--interactive-accent) 20%, var(--background-secondary));
|
||||
border-color: var(--interactive-accent-hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue