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>
170 lines
3.0 KiB
SCSS
170 lines
3.0 KiB
SCSS
// Vagabond RPG - Base Styles
|
|
// ===========================
|
|
|
|
// Reset/normalize for Foundry context
|
|
.vagabond {
|
|
// Base typography
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-base;
|
|
line-height: $line-height-normal;
|
|
color: var(--color-text-primary);
|
|
|
|
// Box sizing
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: var(--color-accent-primary);
|
|
text-decoration: none;
|
|
transition: color $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-secondary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@include focus-visible;
|
|
}
|
|
|
|
// Headings
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: $font-family-header;
|
|
font-weight: $font-weight-bold;
|
|
line-height: $line-height-tight;
|
|
color: var(--color-text-primary);
|
|
margin: 0 0 $spacing-2 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: $font-size-4xl;
|
|
}
|
|
h2 {
|
|
font-size: $font-size-3xl;
|
|
}
|
|
h3 {
|
|
font-size: $font-size-2xl;
|
|
}
|
|
h4 {
|
|
font-size: $font-size-xl;
|
|
}
|
|
h5 {
|
|
font-size: $font-size-lg;
|
|
}
|
|
h6 {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
// Paragraphs
|
|
p {
|
|
margin: 0 0 $spacing-4 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Lists
|
|
ul,
|
|
ol {
|
|
margin: 0 0 $spacing-4 0;
|
|
padding-left: $spacing-6;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: $spacing-1;
|
|
}
|
|
|
|
// Images
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
// Tables
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: $spacing-4;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: $spacing-2 $spacing-3;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
th {
|
|
font-weight: $font-weight-semibold;
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
// Horizontal rule
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: $spacing-4 0;
|
|
}
|
|
|
|
// Code
|
|
code {
|
|
font-family: $font-family-mono;
|
|
font-size: $font-size-sm;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: var(--color-bg-secondary);
|
|
border-radius: $radius-sm;
|
|
}
|
|
|
|
// Blockquote
|
|
blockquote {
|
|
margin: 0 0 $spacing-4 0;
|
|
padding: $spacing-3 $spacing-4;
|
|
border-left: 3px solid var(--color-accent-primary);
|
|
background-color: var(--color-bg-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
// Selection
|
|
::selection {
|
|
background-color: var(--color-accent-highlight);
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
// Foundry sheet wrapper styles
|
|
.sheet.vagabond {
|
|
@include custom-scrollbar;
|
|
background: var(--color-bg-primary);
|
|
}
|
|
|
|
// Window header customization
|
|
.window-app.vagabond {
|
|
.window-header {
|
|
background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-tertiary));
|
|
border-bottom: 2px solid var(--color-border-dark);
|
|
|
|
.window-title {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.header-button {
|
|
color: var(--color-text-secondary);
|
|
|
|
&:hover {
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|