/* Global styles for the Tolkien‑themed writing and worldbuilding application. We use CSS custom properties to define a light and dark theme inspired by Middle‑earth. The light theme draws on soft greens and warm golds like Rivendell, while the dark theme uses deep greys and fiery oranges evocative of Mordor. A data attribute on the element (data-theme="dark") toggles between the two palettes. All colours reference these variables so the theme can be switched with a single class change. The UI aims for a clean, modern look with generous spacing and simple typography. The body copy uses a sans‑serif stack for legibility during long writing sessions, while headings use a serif stack to hint at the classical feel of Tolkien’s world. No cursive or ornate fonts are used. Layout is handled with flexbox. A collapsible sidebar on the left lists the major modules (Projects, Manuscript, Timeline, Characters, Locations, Items, etc.). The main content area occupies the remaining space. On narrow viewports (e.g. phones), the sidebar collapses into a top bar. This file should be included after the fontawesome CSS in your HTML. */ /* Theme definitions */ :root { --color-bg: #fefdf9; --color-bg-alt: #f7f7f3; --color-primary: #2c5d3f; /* deep evergreen */ --color-secondary: #b38f59; /* warm gold */ --color-accent: #8ea88e; /* sage green */ --color-text: #2e2e2e; --color-text-muted: #555; --color-border: #ddd; --color-card-bg: #ffffff; --color-card-border: #e6e6e6; --color-link: #2c5d3f; --color-link-hover: #b38f59; } [data-theme="dark"] { --color-bg: #131313; --color-bg-alt: #1b1b1b; --color-primary: #b13922; /* ember red */ --color-secondary: #f28f3b; /* molten orange */ --color-accent: #6b392b; /* dark brick */ --color-text: #e5e5e5; --color-text-muted: #aaa; --color-border: #333; --color-card-bg: #1f1f1f; --color-card-border: #2a2a2a; --color-link: #f28f3b; --color-link-hover: #b13922; } /* Global resets and typography */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background-color: var(--color-bg); color: var(--color-text); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", serif; margin: 0 0 0.5rem 0; line-height: 1.25; color: var(--color-primary); } p { margin: 0 0 1rem 0; } a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-link-hover); } /* Layout: container, sidebar and content */ .app-wrapper { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 240px; background-color: var(--color-bg-alt); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; transition: width 0.3s ease; /* Always allow vertical scrolling so that the bottom navigation links (e.g. Relationships, Settings) remain reachable on shorter viewports. Without this the sidebar height can exceed the viewport and the last items become inaccessible. */ overflow-y: auto; } .sidebar.collapsed { width: 64px; } /* When sidebar is collapsed, hide the header text and user info to avoid overcrowding. Only the collapse/expand arrow remains. We also hide the labels on the navigation links by shrinking the font size of the anchor while preserving the icon size explicitly. */ .sidebar.collapsed .sidebar-header h2 { display: none; } .sidebar.collapsed .user-info span { display: none; } .sidebar.collapsed .nav-list a { justify-content: center; font-size: 0; /* hide text */ padding: 0.75rem 0; } .sidebar.collapsed .nav-list a i { margin-right: 0; font-size: 1rem; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--color-border); } .sidebar-header h2 { font-size: 1.1rem; margin: 0; } .nav-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; } .nav-list li { margin: 0; } .nav-list a { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); font-size: 0.9rem; } .nav-list a:hover, .nav-list a.active { background-color: var(--color-card-bg); color: var(--color-primary); } .nav-list i { margin-right: 0.75rem; font-size: 1rem; } /* Content area */ .content { flex-grow: 1; overflow-y: auto; padding: 1.5rem; background-color: var(--color-bg); } /* Cards */ .card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .card h3 { margin-top: 0; margin-bottom: 0.5rem; } /* Relationships module The relationships section displays a simple list of connections between characters. Each row is colour‑coded according to the relation type (enemy, friend or romantic) using a small coloured chip on the left and a subtle tint for the row background. A compact legend at the top of the section explains the colour coding. Minimal additional markup is used to keep this styling lightweight and consistent with other lists in the app. Class naming follows a BEM‑like pattern for clarity: .rel-legend — container for the colour legend .rel-chip — small circular indicator for each relation type .rel-row — wrapper for an individual relationship row .rel-row--enemy — modifier class for enemy relations .rel-row--friend — modifier class for friend relations .rel-row--romantic — modifier class for romantic relations .rel-tooltip — optional custom tooltip shown on hover (fallback to the browser title attribute when JS is disabled) */ /* Legend container: horizontally lays out colour indicators with labels. On narrow viewports it wraps gracefully to avoid overflowing. */ .rel-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; font-size: 0.8rem; align-items: center; } /* Each legend item consists of a chip followed by text. */ .rel-legend span { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; } /* Base chip style: a small circular indicator. Modifier classes below provide specific colours. */ .rel-chip { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; } /* Relation type colours for chips */ .rel-chip--enemy { background-color: #e53935; /* red */ } .rel-chip--friend { background-color: #4caf50; /* green */ } .rel-chip--romantic { background-color: #e91e63; /* pink */ } /* Base relationship row styling. Extend the existing list‑item styles by adding relative positioning so custom tooltips can anchor within the row if desired. */ .rel-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-left: 0.75rem; } /* Tint backgrounds subtly according to relation type. Colours mirror the chips but with low opacity to avoid overpowering the rest of the UI. The alpha values are chosen to work in both light and dark themes. */ .rel-row--enemy { background-color: rgba(229, 57, 53, 0.1); } .rel-row--friend { background-color: rgba(76, 175, 80, 0.1); } .rel-row--romantic { background-color: rgba(233, 30, 99, 0.1); } /* Family relation type styles. Yellow is chosen for family connections to complement the existing red, green and pink categories. The tint uses a very low alpha to remain subtle in both light and dark themes. */ .rel-row--family { background-color: rgba(255, 215, 0, 0.08); } /* Colour for the family relation chip. A vibrant gold/yellow to match classic heraldic family colours. */ .rel-chip--family { background-color: #ffd700; } /* Toggle container for switching between list and web (graph) views in the Relationships section. Displays horizontally with small spacing and allows wrapping on narrow screens. */ .rel-view-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center; } /* Buttons for the list/web toggle. Styled like pill buttons with a subtle border and rounded corners. */ .rel-view-btn { padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.25rem; background-color: var(--color-card-bg); color: var(--color-text); font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } /* Hover state for view toggle buttons */ .rel-view-btn:hover { background-color: var(--color-bg-alt); color: var(--color-primary); } /* Active state for the currently selected view button. Uses the primary colour as the background to stand out against the other options. */ .rel-view-btn.active { background-color: var(--color-primary); color: var(--color-card-bg); border-color: var(--color-primary); } /* Container for the relationships graph. A set height ensures the force‑directed graph has enough space to render without collapsing. A border and rounded corners keep it consistent with card styling. */ .rel-graph-container { width: 100%; height: 450px; border: 1px solid var(--color-border); border-radius: 0.5rem; overflow: hidden; margin-top: 1rem; } /* Optional custom tooltip. JavaScript toggles its visibility and positions it near the cursor. When JavaScript is disabled the browser’s native title attribute is used instead. */ .rel-tooltip { position: fixed; z-index: 3000; background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); pointer-events: none; white-space: nowrap; display: none; } /* Form styles */ form { display: flex; flex-direction: column; } label { font-weight: bold; margin-bottom: 0.25rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.5rem; margin-bottom: 1rem; background-color: var(--color-card-bg); color: var(--color-text); } textarea { resize: vertical; min-height: 100px; } button { background-color: var(--color-primary); color: #fff; border: none; border-radius: 0.25rem; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s ease; } button:hover { background-color: var(--color-secondary); } button.secondary { background-color: var(--color-accent); } button.secondary:hover { background-color: var(--color-secondary); } /* Style for file upload controls Many of the forms in the application allow users to upload images or transcripts. The default browser styling for file inputs is plain and dated. We customise the "choose file" button via the ::file-selector-button pseudo‑element so that it matches the rest of the UI. The button uses the primary accent colours for the active theme and inherits the rounded corners from our button component. On hover the background transitions to the secondary colour. The input itself retains the selected file name text colour to ensure legibility on both light and dark backgrounds. */ input[type="file"] { color: var(--color-text); margin-bottom: 1rem; } /* Trait list editing styles */ .trait-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } .trait-row input[type="text"] { flex: 1; border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.4rem; background-color: var(--color-card-bg); color: var(--color-text); } .trait-row button.remove-trait { background-color: var(--color-secondary); color: #fff; border: none; border-radius: 0.25rem; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.85rem; } .add-trait-btn { margin-top: 0.5rem; } /* Timeline styles */ .timeline-container { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 1rem 0; gap: 1rem; } .timeline-item { flex: 0 0 200px; background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 0.5rem; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .timeline-item img { width: 100%; height: 120px; object-fit: cover; display: block; } .timeline-item .timeline-info { padding: 0.5rem; } .timeline-item .timeline-info h4 { margin: 0 0 0.25rem 0; font-size: 1rem; color: var(--color-primary); } .timeline-item .timeline-info p { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); } /* Avatar and initial placeholders for cards */ .card-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .avatar-initial { width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1rem; } /* Small edit button inside project cards */ .edit-project-btn { color: var(--color-text-muted); font-size: 1rem; } .edit-project-btn:hover { color: var(--color-primary); } /* Background blur for character detail pages */ .char-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; filter: blur(12px); opacity: 0.3; z-index: -1; } /* Larger avatar used on the character detail page */ .detail-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; } /* The closing brace above intentionally ends the `.detail-avatar` rule. The stray extra `}` that previously followed caused the subsequent file input styling to be wrapped inside an invalid CSS block, preventing our custom file selector styling from being applied. Removing the extra brace restores proper rule nesting and ensures the upload buttons are styled consistently across the application. */ input[type="file"]::file-selector-button { background-color: var(--color-primary); color: #fff; border: none; border-radius: 0.25rem; padding: 0.4rem 0.75rem; margin-right: 0.75rem; cursor: pointer; font-size: 0.85rem; transition: background-color 0.2s ease; } input[type="file"]::file-selector-button:hover { background-color: var(--color-secondary); } /* Progress bar */ .progress-container { background-color: var(--color-card-border); border-radius: 0.5rem; overflow: hidden; height: 1rem; margin-bottom: 1rem; } .progress-bar { height: 100%; background-color: var(--color-primary); width: 0%; transition: width 0.3s ease; } /* Header (top bar) for smaller screens */ .topbar { display: none; background-color: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: 0.75rem 1rem; align-items: center; justify-content: space-between; } .topbar button { background: none; border: none; color: var(--color-primary); font-size: 1.25rem; } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar { position: fixed; z-index: 1000; left: -240px; top: 0; height: 100%; transition: left 0.3s ease; } .sidebar.open { left: 0; } .content { padding: 1rem; } .topbar { display: flex; } .app-wrapper { flex-direction: column; } } /* Utility classes */ .hidden { display: none !important; } .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .mb-1 { margin-bottom: 1rem; } .mt-1 { margin-top: 1rem; } .text-center { text-align: center; } .space-y-1 > * + * { margin-top: 1rem; } /* Responsive layout adjustments */ /* Projects grid: arrange cards in responsive columns on larger screens. On small screens, collapse to a single column for readability. */ #projectList { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 768px) { #projectList { grid-template-columns: 1fr; } } /* List items (characters, locations, items, etc.) should wrap their contents on mobile to avoid overflowing horizontally. Using flex-wrap allows the avatar, text and actions to stack on small screens. */ .list-item { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; } @media (max-width: 768px) { .list-item { flex-wrap: wrap; } .list-item > * { margin-bottom: 0.5rem; } .list-item > *:last-child { margin-left: auto; margin-bottom: 0; } } /* Constrain modal sizes for large screens and expand on small devices. */ .modal-content { max-width: 600px; width: 100%; } @media (max-width: 768px) { .modal-content { width: 90%; height: 90vh; max-width: none; overflow-y: auto; } } /* Forms: allow two-column layout on wider screens and collapse to a single column on small screens. Many forms already use flexbox; switching to grid improves responsiveness. */ @media (min-width: 769px) { form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } form button { grid-column: 1 / -1; width: fit-content; justify-self: end; } } @media (max-width: 768px) { form { display: block; } } /* Increase tap targets for buttons on touch devices. */ button { min-height: 36px; min-width: 36px; } /* Make the project filter bar wrap gracefully on small viewports. */ #projectFilterBar { flex-wrap: wrap; } /* Wrap tables for horizontal scrolling on small devices. */ .table-wrap { overflow-x: auto; } /* Adjust typography on very small screens. */ @media (max-width: 420px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } } /* ------------------------------------------------------------------ */ /* Dashboard‑specific styling tweaks */ /* These rules only affect the projects dashboard and ensure that the */ /* filter bar, status row and cards align nicely without impacting */ /* other sections of the app. */ /* Filter bar: flex layout with wrapping and spacing */ #projectFilterBar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; align-items: center; } /* Filter buttons: slightly larger font and padding with clear active state */ .project-filter-btn { padding: 0.35rem 0.75rem; font-size: 0.9rem; border: none; border-radius: 0.25rem; background: transparent; color: var(--color-primary); cursor: pointer; transition: background-color 0.2s ease; } .project-filter-btn:hover { background-color: var(--color-bg-alt); } .project-filter-btn.active-filter { background-color: var(--color-primary); color: var(--color-card-bg); font-weight: 600; border: 1px solid var(--color-primary); } /* Status row alignment on project cards */ .proj-status-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; } /* Project cards: ensure vertical stacking of contents */ #projectList .list-item { padding: 0.9rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } #projectList .list-item > * { width: 100%; } /* Progress bar tweaks specifically for project cards */ #projectList .progress-container { background-color: var(--color-bg-alt); border: 1px solid var(--color-card-border); border-radius: 0.5rem; height: 0.6rem; width: 100%; overflow: hidden; margin-bottom: 0.5rem; } #projectList .progress-bar { height: 100%; background-color: var(--color-primary); border-radius: 0.5rem; transition: width 0.25s ease; }