/* 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; } .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; } /* 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; }