8b9daa1f36
Theme System:
- Add _theme-variables.scss with light (parchment) and dark color palettes
- Register theme options in system.json for Foundry v13 color scheme support
- Convert all SCSS color variables to CSS custom properties
- Update base, mixins, components, and sheet styles for theme support
- Add _applyThemeClass() to actor and item sheet classes
ProseMirror Editor Fix (v13 ApplicationV2):
- Replace {{editor}} helper with <prose-mirror> custom element
- Add TextEditor.enrichHTML() for rich text content preparation
- Update all 8 item templates (spell, weapon, armor, equipment, etc.)
- Fix toolbar hiding content by renaming wrapper to .editor-wrapper
- Style prose-mirror with sticky toolbar and proper flex layout
Roll Dialog & Chat Card Styling:
- Complete roll dialog styling with favor/hinder toggles, info panels
- Complete chat card styling with roll results, damage display, animations
- Mark tasks 5.7 and 5.8 complete in roadmap
- Add task 5.11 for deferred resizable editor feature
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
134 lines
2.6 KiB
SCSS
134 lines
2.6 KiB
SCSS
// Vagabond RPG - Button Styles
|
|
// =============================
|
|
|
|
.vagabond {
|
|
// Primary button
|
|
.btn-primary {
|
|
@include button-primary;
|
|
}
|
|
|
|
// Secondary button
|
|
.btn-secondary {
|
|
@include button-secondary;
|
|
}
|
|
|
|
// Small button variant
|
|
.btn-sm {
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-xs;
|
|
}
|
|
|
|
// Large button variant
|
|
.btn-lg {
|
|
padding: $spacing-3 $spacing-6;
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
// Icon button (square, for icons only)
|
|
.btn-icon {
|
|
@include button-base;
|
|
@include flex-center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: var(--color-text-primary);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-bg-secondary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
// Small icon button (for +/- resource buttons)
|
|
.btn-icon-sm {
|
|
@include button-base;
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-primary);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-accent-primary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Rollable button (for dice rolls)
|
|
.btn-roll {
|
|
@include button-base;
|
|
background-color: var(--color-bg-input);
|
|
color: var(--color-text-primary);
|
|
border-color: var(--color-border);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-accent-highlight);
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
margin-right: $spacing-2;
|
|
}
|
|
}
|
|
|
|
// Danger button
|
|
.btn-danger {
|
|
@include button-base;
|
|
background-color: var(--color-danger);
|
|
color: var(--color-text-inverse);
|
|
border-color: var(--color-danger);
|
|
|
|
&:hover:not(:disabled) {
|
|
filter: brightness(0.85);
|
|
}
|
|
}
|
|
|
|
// Success button
|
|
.btn-success {
|
|
@include button-base;
|
|
background-color: var(--color-success);
|
|
color: var(--color-text-inverse);
|
|
border-color: var(--color-success);
|
|
|
|
&:hover:not(:disabled) {
|
|
filter: brightness(0.85);
|
|
}
|
|
}
|
|
|
|
// Button group
|
|
.btn-group {
|
|
display: inline-flex;
|
|
|
|
.btn-primary,
|
|
.btn-secondary {
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-radius: $radius-md 0 0 $radius-md;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 $radius-md $radius-md 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|