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>
112 lines
2.4 KiB
SCSS
112 lines
2.4 KiB
SCSS
// Vagabond RPG - Tab Styles
|
|
// ==========================
|
|
|
|
.vagabond {
|
|
// Tab navigation
|
|
.sheet-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-bottom: 2px solid var(--color-border);
|
|
background-color: var(--color-bg-secondary);
|
|
|
|
.item {
|
|
margin: 0;
|
|
padding: $spacing-2 $spacing-4;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-secondary);
|
|
background-color: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
border-bottom-color: var(--color-accent-primary);
|
|
}
|
|
|
|
@include focus-visible;
|
|
|
|
i {
|
|
margin-right: $spacing-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tab content area
|
|
.sheet-body {
|
|
@include custom-scrollbar;
|
|
overflow-y: auto;
|
|
padding: $spacing-4;
|
|
|
|
.tab {
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertical tabs variant
|
|
.sheet-tabs.vertical {
|
|
flex-direction: column;
|
|
border-bottom: none;
|
|
border-right: 2px solid var(--color-border);
|
|
|
|
.item {
|
|
border-bottom: none;
|
|
border-right: 2px solid transparent;
|
|
margin-bottom: 0;
|
|
margin-right: -2px;
|
|
|
|
&.active {
|
|
border-right-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sub-tabs (within a tab)
|
|
.sub-tabs {
|
|
display: flex;
|
|
gap: $spacing-2;
|
|
margin-bottom: $spacing-4;
|
|
padding-bottom: $spacing-2;
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
|
|
.sub-tab {
|
|
padding: $spacing-1 $spacing-3;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-muted);
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: $radius-md;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-border);
|
|
}
|
|
}
|
|
}
|
|
}
|