/* rgb(from var(--background-50) r g b / 0.675) */ /* Handy symbols (by vibe) Steel/war: ⚔️ (crossed swords), 🗡️ (dagger), 🏹 (bow), 🛡️ (shield), 🪓 (axe), ⛏️ (pick), ⚒️ (hammer) Magic/arcana: ✨, ✦, ✧, ★, ☆, ✪, ✯, 🔮 (crystal ball), 🪄 (wand), ☄️ (comet), ☯️ Divine/holy: ✝️, ☥ (ankh), ✡️, ☀️, ☘️ (luck), ⚕️ (caduceus), ⛨ (black cross), 🕊️ Nature/woodland: 🌿, 🍃, 🌲, 🪵, 🦌 Dark/foes: ☠️ (skull & bones), 💀 (skull), 🩸 (blood drop), 🔥, 🕷️, 🧟, 🧛, ⚰️, ⚱️, 🪦 (headstone) Exploration/loot: 🗺️, 🏰, 🪙, 💎, 🧭, 🔱 */ .pageBottomMargin { margin-bottom: 100px !important; } .no-break { break-inside: avoid; } .dmTable_diceRoll { cursor: pointer; font-weight: 300 !important; text-decoration: underline dotted; color: var(--primary) !important; } .dmTable_diceRoll:hover { text-decoration-style: solid; } /* NPC GEN */ /* ---------------------------------------------------------------------------------------------- */ /* NPC Generator Shell */ .npcGen_wrap { background: var(--background); color: var(--text); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0.5rem; box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.35); } .npcGen_wrap .card-header { background: var(--background); border-bottom: 1px solid var(--primary); color: var(--primary); } .npcGen_wrap .card-header .small { color: var(--text); } .npcGen_wrap .card-body { background: var(--background); color: var(--text); } /* Icon tint */ .npcGen_icon { color: var(--primary); } /* CR controls */ .npcGen_crControl .btn { min-width: 2.25rem; } .npcGen_crControl input[type="number"] { max-width: 5rem; } .npcGen_crHelp { margin-top: 0.25rem; color: var(--text); } /* Output area */ .npcGen_output { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8rem; background: var(--background); color: var(--text); border-color: var(--primary); } /* Pretty statblock */ .npcGen_pretty { border: 1px solid var(--primary); border-radius: 0.35rem; padding: 0.75rem; background: var(--background); color: var(--text); font-size: 0.9rem; } .npcGen_titleLine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem; margin-bottom: 0.1rem; } .npcGen_titleName { font-size: 1rem; color: var(--primary); } .npcGen_titleMeta { font-size: 0.85rem; opacity: 0.9; } .npcGen_subLine { font-size: 0.8rem; opacity: 0.9; margin-bottom: 0.5rem; } .npcGen_subLine span + span::before { content: " "; } /* Basics row */ .npcGen_basics { margin-bottom: 0.5rem; font-size: 0.85rem; } /* Ability row */ .npcGen_abilityRow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.5rem; } .npcGen_ability { text-align: center; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0.25rem; padding: 0.15rem 0.25rem; background: var(--background); } .npcGen_abilityLabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; } .npcGen_abilityScore { font-size: 0.85rem; font-weight: 600; } /* Sections */ .npcGen_section { margin-top: 0.35rem; } .npcGen_sectionTitle { font-size: 0.8rem; font-weight: 600; color: var(--primary); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.15rem; } .npcGen_list { list-style: none; padding-left: 0; margin-bottom: 0.1rem; } .npcGen_list li { font-size: 0.8rem; margin-bottom: 0.1rem; } /* Notes */ .npcGen_notes { font-size: 0.8rem; opacity: 0.9; } /* Responsive tweaks */ @media (max-width: 767.98px) { .npcGen_wrap .card-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .npcGen_abilityRow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Ability grid: now shows Value / Mod / Save */ .npcGen_abilityRow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.5rem; } .npcGen_ability { text-align: center; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0.25rem; padding: 0.15rem 0.25rem; background: var(--background); } .npcGen_abilityLabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; } .npcGen_abilityValue { font-size: 0.95rem; font-weight: 700; } .npcGen_abilityMod, .npcGen_abilitySave { font-size: 0.7rem; } /* Trait/action names inside lists */ .npcGen_abilityName { color: var(--primary); font-weight: 600; } /* Sections (unchanged but included for context) */ .npcGen_section { margin-top: 0.35rem; } .npcGen_sectionTitle { font-size: 0.8rem; font-weight: 600; color: var(--primary); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.15rem; } .npcGen_list { list-style: none; padding-left: 0; margin-bottom: 0.1rem; } .npcGen_list li { font-size: 0.8rem; margin-bottom: 0.1rem; } /* Responsive tweak */ @media (max-width: 767.98px) { .npcGen_abilityRow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* NPC pretty block – 5e/2024-style */ .npcGen_block { background: var(--background); color: var(--text); border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15); border-radius: 0.5rem; padding: 1rem 1.25rem; font-size: 0.95rem; max-width: 800px; margin: 0 auto 0.75rem auto; } .npcGen_name { font-family: "Georgia", "Times New Roman", serif; font-size: 1.35rem; font-weight: 700; color: var(--primary); } .npcGen_subtitle { font-size: 0.9rem; margin-top: 0.15rem; color: rgba(0,0,0,0.7); } .npcGen_rule { border-bottom: 2px solid var(--primary); margin: 0.5rem 0; } .npcGen_ruleThin { border-bottom-width: 1px; border-bottom-color: rgba(0,0,0,0.2); } .npcGen_pairLine { font-size: 0.9rem; margin-bottom: 0.25rem; } .npcGen_inlineLabel { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; margin-right: 0.25rem; } /* Ability scores row */ .npcGen_abilityRow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; text-align: center; font-size: 0.85rem; } .npcGen_abilityCol { border: 1px solid rgba(0,0,0,0.15); border-radius: 0.35rem; padding: 0.25rem 0.1rem; background: rgba(0,0,0,0.03); } .npcGen_abilityLabel { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; } .npcGen_abilityScore { font-weight: 600; margin-top: 0.1rem; } .npcGen_abilitySave { font-size: 0.7rem; margin-top: 0.1rem; opacity: 0.85; } /* Secondary lines */ .npcGen_secondary p { margin: 0 0 0.2rem 0; font-size: 0.9rem; } /* Sections: Traits / Actions / etc */ .npcGen_section { margin-top: 0.5rem; font-size: 0.9rem; } .npcGen_sectionTitle { font-family: "Georgia", "Times New Roman", serif; font-size: 1rem; font-weight: 700; color: var(--primary); border-bottom: 1px solid rgba(0,0,0,0.2); margin-bottom: 0.25rem; } .npcGen_section p { margin: 0.15rem 0; } .npcGen_featureName { font-weight: 700; color: var(--primary); } /* Notes / DM text */ .npcGen_notesSection { margin-top: 0.75rem; } .npcGen_notes { font-size: 0.85rem; font-style: italic; opacity: 0.9; } /* Footer meta (alignment + CR/XP) */ .npcGen_footerMeta { max-width: 800px; margin: 0.25rem auto 0 auto; font-size: 0.85rem; color: rgba(0,0,0,0.7); text-align: right; } .npcGen_portrait img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 0.5rem auto; display: block; } .npcGen_crDisplay { color: var(--primary) !important; font-size: 1.25rem; font-weight: 300; } .npcGen_crIcon { font-size: 1.75rem; color: var(--primary); } .npcGen_crBtn { margin-top: 4px; } .npcGen_crBtn:hover, .npcGen_crBtn:active, .npcGen_crBtn:focus { outline: none; border: none; } /* REF HUB */ /* ---------------------------------------------------------------------------------------------- */ /* Container */ .refHub { padding: 1rem 0; } /* Header / toolbar */ .refHub_header .refHub_toolbar .dmTable_btn--ghost { background: transparent; } /* Category groups grid (now 100% width) */ .refHub_groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem 1.5rem; width: 100%; /* fill full width */ max-width: none; /* no 720px cap anymore */ margin: 0 0 1rem; /* no centering needed now */ } /* Category box */ .refHub_group { padding: 0; background: var(--background); /* <--- solid BG instead of transparent */ overflow: hidden; } /* Category title with RPG-Awesome icon */ .refHub_groupTitle { display: flex; align-items: center; font-size: 0.9rem; font-weight: 300; color: var(--primary); margin-bottom: 0.25rem; } .refHub_groupTitleIcon { margin-right: 0.35rem; font-size: 1rem; } /* List inside each category */ .refHub_groupList { list-style: none; margin: 0; padding: 0; } .refHub_menuItem { cursor: pointer; padding: 2px 4px; border-radius: 0.25rem; font-size: 0.85rem; } .refHub_menuItem:hover { background: rgba(0,0,0,0.05); } /* Tabs */ .refHub_tabs .nav-link { padding: 0.25rem 0.5rem; font-size: 0.85rem; display: flex; align-items: center; } .refHub_tabs .refHub_tabClose { border: none; background: none; padding: 0; margin-left: 4px; line-height: 1; cursor: pointer; opacity: 0.6; } .refHub_tabs .refHub_tabClose:hover { opacity: 1; } /* Content */ .refHub_content { min-height: 240px; background: var(--background, #111); color: var(--text, #f5f5f5); overflow: auto; } /* Category title as dropdown header */ .refHub_groupTitle { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.6rem; font-size: 0.9rem; font-weight: 300; color: var(--primary); cursor: pointer; } .refHub_groupTitleMain { display: flex; align-items: center; gap: 0.35rem; } .refHub_groupTitleIcon { font-size: 1rem; } .refHub_groupChevron { font-size: 0.9rem; opacity: 0.8; transition: transform 0.15s ease; } .refHub_groupList { list-style: none; margin: 0; padding: 0.25rem 0.6rem 0.5rem; } /* collapsed state */ .refHub_group.is-collapsed .refHub_groupList { display: none; } .refHub_group.is-collapsed .refHub_groupChevron { transform: rotate(-90deg); } /* DICE */ /* ---------------------------------------------------------------------------------------------- */ #dice-overlay{ position:fixed; inset:0; width:100vw; height:100vh; z-index:32767; display:none; background:transparent; } #dice-overlay.show{ display:block; } /* ensure the internal canvas occupies the overlay */ #dice-overlay canvas{ width:100% !important; height:100% !important; display:block; } .site-alert { } .site-alert .icon { display:inline-flex; align-items:center; justify-content:center; font-size: 32px; min-width: 1.75rem; } .site-alert .msg { line-height: 1.25rem; } /* Big result number that zooms & fades */ .dice-roll-result { position: fixed; inset: 0; /* fill the screen */ display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 3rem; /* starting size */ font-weight: 700; line-height: 1; color: #ffffff; /* adjust to match your theme */ text-shadow: 0 0 8px rgb(from var(--primary) r g b / .6), 0 0 16px rgb(from var(--primary) r g b / .8); animation: diceRollResultZoom 1.25s ease-out forwards; z-index: 999999; /* above dice & everything else */ } @keyframes diceRollResultZoom { 0% { font-size: 3rem; opacity: 0; } 15% { font-size: 5rem; opacity: 1; } 80% { /* ~ when it hits ~6rem */ font-size: 10rem; opacity: 1; } 100% { font-size: 12rem; /* final “size” */ opacity: 0; /* fully faded */ } } /* DMS TABLE */ /* ---------------------------------------------------------------------------------------------- */ /* ========================= DM's Table (theme-aware) Requires: --background, --text, --primary Z-layers: 10000 search results 9500 player popover 9000..n cards ========================= */ /* ---- Top bars ---- */ .dmTable_searchBar, .dmTable_playerBar { color: var(--text); } .dmTable_label { font-size: .85rem; opacity: .8; } /* Search Bar (sticky top) */ .dmTable_searchBar { position: sticky; top: 0; z-index: 9100; padding: .5rem 0; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--background) 50%, #000 50%); } .dmTable_searchGroup { position: relative; } .dmTable_btn { border: 1px solid color-mix(in srgb, var(--background) 40%, #000 60%); background: color-mix(in srgb, var(--background) 92%, #000 8%); color: var(--text); } .dmTable_btn:hover { background: color-mix(in srgb, var(--background) 86%, #000 14%); } /* Search results dropdown — TOP LAYER */ .dmTable_resultsList { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10000; max-height: 52vh; overflow: auto; background: color-mix(in srgb, var(--background) 95%, #000 5%); border: 1px solid color-mix(in srgb, var(--background) 35%, #000 65%); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5); padding: 6px; } .dmTable_resultItem { border-radius: 10px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; color: var(--text); } .dmTable_resultItem:hover { background: color-mix(in srgb, var(--background) 88%, #000 12%); } .dmTable_resultTitle { font-weight: 600; } .dmTable_resultMeta { font-size: .8rem; opacity: .7; } /* Player Bar (sticky under search) */ .dmTable_playerBar { position: sticky; top: 0; z-index: 9200; background: transparent; padding: .4rem 0 .6rem; border-bottom: 1px solid color-mix(in srgb, var(--background) 50%, #000 50%); } .dmTable_playersHeading { text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--primary); } .dmTable_btnSquare { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--background) 40%, #000 60%); background: color-mix(in srgb, var(--background) 92%, #000 8%); color: var(--text); } .dmTable_btnSquare:hover { background: color-mix(in srgb, var(--background) 86%, #000 14%); } .dmTable_playerTabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .dmTable_playerTab { border: 1px solid color-mix(in srgb, var(--background) 40%, #000 60%); background: color-mix(in srgb, var(--background) 94%, #000 6%); color: var(--text); border-radius: 10px; padding: 6px 12px; font-weight: 600; cursor: pointer; } .dmTable_playerTab:hover { background: color-mix(in srgb, var(--background) 88%, #000 12%); } .dmTable_playerTab.dmTable_isActive { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--background)); } /* ---- Stage: just provides scrollable height; no positioning constraints ---- */ .dmTable_stage { position: relative; min-height: 280vh; /* ~2.8 screens */ margin-top: 1rem; } /* ---- Player POPVER (appended to , absolute in PAGE space) ---- */ .dmTable_playerPopover { position: absolute; /* page coords; appended to body */ width: min(560px, 92vw); z-index: 9500; background: color-mix(in srgb, var(--background) 96%, #000 4%); color: var(--text); border: 1px solid color-mix(in srgb, var(--background) 35%, #000 65%); border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.55); overflow: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .dmTable_playerPopover.dmTable_isOpen { opacity: 1; transform: translateY(0); pointer-events: auto; } .dmTable_playerPanelHeader { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--background) 50%, #000 50%); background: color-mix(in srgb, var(--background) 92%, #000 8%); } .dmTable_playerPanelBody { padding: 12px; } /* WYSIWYG (notes) + Stats */ .dmTable_noteToolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .dmTable_tbSep { width: 1px; height: 1.5em; background: color-mix(in srgb, var(--background) 40%, #000 60%); margin: 0 2px; } .dmTable_tbBtn { border: 1px solid color-mix(in srgb, var(--background) 40%, #000 60%); background: color-mix(in srgb, var(--background) 94%, #000 6%); color: var(--text); border-radius: 8px; padding: 6px 8px; line-height: 1; } .dmTable_tbBtn:hover { background: color-mix(in srgb, var(--background) 88%, #000 12%); } .dmTable_notesArea { min-height: 140px; padding: 10px 12px; color: var(--text); border: 1px dashed color-mix(in srgb, var(--background) 35%, #000 65%); border-radius: 10px; background: transparent; outline: none; } .dmTable_notesArea:focus { border-style: solid; } .dmTable_stats { color: var(--text); } .dmTable_statLabel { font-size: .8rem; opacity: .75; } .dmTable_statInput { width: 80px; background: color-mix(in srgb, var(--background) 94%, #000 6%); color: var(--text); border: 1px solid color-mix(in srgb, var(--background) 40%, #000 60%); border-radius: 8px; text-align: center; padding: 2px 6px; } .dmTable_statInput[disabled] { opacity: .7; cursor: default; } .dmTable_btnDanger { border-color: color-mix(in srgb, #ff3b30 60%, var(--background)); color: #ff7b73; } .dmTable_btnDanger:hover { background: color-mix(in srgb, #ff3b30 14%, var(--background)); } .dmTable_btnDanger.dmTable_isArmed { border-color: #ff3b30; background: color-mix(in srgb, #ff3b30 22%, var(--background)); color: #fff; } .dmTable_btnDanger.dmTable_isArmed .dmTable_deleteLabel::after { content: " (again to confirm)"; font-weight: 600; margin-left: .25rem; } /* ---- Cards (appended to , absolute in PAGE space) ---- */ .dmTable_card { position: absolute; /* page coords; appended to body */ border: 1px solid color-mix(in srgb, var(--background) 35%, #000 65%); border-radius: 12px; background: color-mix(in srgb, var(--background) 96%, #000 4%); box-shadow: 0 6px 24px rgba(0,0,0,.5); color: var(--text); overflow: hidden; min-width: 240px; min-height: 160px; z-index: 9000; /* base; raised on focus */ } .dmTable_cardHeader { height: 40px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--background) 50%, #000 50%); background: color-mix(in srgb, var(--background) 92%, #000 8%); } .dmTable_dragHandle { display: grid; place-items: center; cursor: grab; opacity: .75; touch-action: none; } .dmTable_dragHandle:active { cursor: grabbing; } .dmTable_cardTitle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dmTable_cardBody { padding: 10px 12px; overflow: auto; max-height: calc(100% - 40px); } .dmTable_resizeHandle { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; display: grid; place-items: center; cursor: nwse-resize; opacity: .75; border-radius: 8px; touch-action: none; } /* Collapsed truly shrinks to header */ .dmTable_card.dmTable_isCollapsed { height: 40px !important; min-height: 40px !important; } .dmTable_card.dmTable_isCollapsed .dmTable_cardBody { display: none !important; } .dmTable_card.dmTable_isCollapsed .dmTable_resizeHandle { display: none !important; } .dmTable_kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px; margin-bottom: 6px; } .dmTable_kv > span { opacity: .75; } .dmTable_divider { height: 1px; background: color-mix(in srgb, var(--background) 50%, #000 50%); margin: 8px 0; } .dmTable_rich p { margin: 0 0 .5rem; } .dmTable_rich ul, .dmTable_rich ol { margin: 0 0 .5rem 1.2rem; } /* Mobile niceties */ @media (max-width: 768px) { .dmTable_kv { grid-template-columns: 90px 1fr; } } /* Solo Adventure Play */ /* ---------------------------------------------------------------------------------------------- */ /* Rarity Badges */ /* ---------------------------------------------------------------------------------------------- */ .rarity-icon-xs { width: 16px; height: 16px; vertical-align: -10px; } .rarity-icon-sm { width: 24px; height: 24px; vertical-align: -10px; } .rarity-icon { width: 32px; height: 32px; vertical-align: -10px; } .rarity-icon--lg { width: 48px; height: 48px; vertical-align: -10px; } .rarity-icon--xl { width: 64px; height: 64px; vertical-align: -10px; } /* Colors per your chart */ .rarity-common { color: #c8c8c8; } /* white/gray/brown */ .rarity-uncommon { color: #44d27b; } /* green */ .rarity-rare { color: #4aa3ff; } /* blue */ .rarity-veryrare { color: #a675ff; } /* purple */ .rarity-artifact { color: #ff5252; } /* red/gold */ .rarity-unique { color: #00d2d2; } /* cyan/teal pop; change if you want */ .rarity-legendary { color: #ffa742; } .rarity-icon { transform: scale(var(--rarity-scale, 1)); transform-origin: center center; } .rarity-common { --rarity-scale: 1.5; } .rarity-uncommon { --rarity-scale: 1.00; } .rarity-rare { --rarity-scale: 1.15; } .rarity-veryrare { --rarity-scale: 0.90; } .rarity-legendary { --rarity-scale: 0.90; } .rarity-artifact { --rarity-scale: 1.00; } .rarity-unique { --rarity-scale: 1.00; } .coinIMG { height: 16px; vertical-align: -2px; margin-right: 1px;} /* Poisons */ /* ---------------------------------------------------------------------------------------------- */ #poison_app{ color: var(--primary); background-color: var(--background); border-radius: 7px; } /* Badges */ .poison_badge{ color: var(--primary); font-weight: 300; font-size: 0.8rem; margin-right: 10px; } .poison_badge i{ font-size: 0.675rem; } /* Cards / controls */ #poison_app .poison_card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; } /* Inputs on dark theme */ #poison_app .form-control, #poison_app .form-select{ background: var(--soft); border-color: var(--border); color: var(--primary); } #poison_app .form-control:focus, #poison_app .form-select:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 24%, transparent); border-color: var(--primary); } /* Buttons */ #poison_app .btn.btn-primary{ background: var(--primary); border-color: var(--primary); color: var(--background) !important; } #poison_app .btn.btn-outline-primary{ color: var(--primary) !important; border-color: var(--primary); } #poison_app .btn.btn-outline-primary:hover{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } #poison_app .btn-check:checked + .btn-outline-primary, #poison_app .btn.btn-outline-primary.active, #poison_app .btn.btn-outline-primary:active{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } /* ---------- Filters Toolbar Grid ---------- */ #poison_app .poison_toolbar{ display:grid; gap:.75rem; align-items:end; } /* ≥992px: live | type | category | (round placeholder if you add it) */ @media (min-width: 992px){ #poison_app .poison_toolbar{ grid-template-columns: 1fr 220px 220px auto; grid-template-areas: "live type category round"; } } @media (min-width:768px) and (max-width:991.98px){ #poison_app .poison_toolbar{ grid-template-columns: 1fr 1fr; grid-template-areas: "live live" "type category" "round round"; } } @media (max-width:767.98px){ #poison_app .poison_toolbar{ grid-template-columns: 1fr; grid-template-areas: "live" "type" "category" "round"; } } #poison_app .poison_area_live{ grid-area: live; } #poison_app .poison_area_type{ grid-area: type; } #poison_app .poison_area_category{ grid-area: category; } #poison_app .poison_area_round{ grid-area: round; display:flex; justify-content:flex-end; } #poison_app .poison_input_group .btn{ white-space:nowrap; } /* ---------- Actions Row Grid ---------- */ #poison_app .poison_actions{ display:grid; gap:.75rem; align-items:center; } @media (min-width: 1200px){ #poison_app .poison_actions{ grid-template-columns: 1fr auto 360px; grid-template-areas: "left center right"; } } @media (min-width: 992px) and (max-width:1199.98px){ #poison_app .poison_actions{ grid-template-columns: 1fr auto 320px; grid-template-areas: "left center right"; } } @media (min-width:768px) and (max-width:991.98px){ #poison_app .poison_actions{ grid-template-columns: 1fr auto; grid-template-areas: "left center" "right right"; } } @media (max-width:767.98px){ #poison_app .poison_actions{ grid-template-columns: 1fr; grid-template-areas: "left" "center" "right"; } } #poison_app .poison_actions_left{ grid-area:left; display:flex; gap:.5rem; flex-wrap:wrap; } #poison_app .poison_actions_center{ grid-area:center; display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; } #poison_app .poison_actions_right{ grid-area:right; display:flex; justify-content:flex-end; gap:.75rem; align-items:end; flex-wrap:wrap; } #poison_app .poison_modebar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } @media (min-width:768px){ #poison_app .poison_modebar{ flex-wrap:nowrap; } } #poison_app #poison_random_inline .form-select{ width:auto; min-width:84px; } /* ---------- Summary, Sort & Pager ---------- */ #poison_app .poison_summary{ opacity:.85; } #poison_app .poison_pager{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } #poison_app .poison_pager .btn{ min-width:2.5rem; } #poison_app .poison_pageinfo{ opacity:.85; } #poison_app .poison_pagesize{ width:auto; } /* ---------- Results (cards & accordion) ---------- */ #poison_results .card{ border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); background-color: var(--background); color: var(--text-900); } #poison_results .card-title{ color: var(--primary); font-weight: 600; } #poison_results .poison_badge{ display:inline-block; padding:.15rem .45rem; border-radius:.5rem; background: rgb(from var(--btn_info) r g b / .2); border: 1px solid var(--btn_info-accent); font-size:.8rem; font-weight:500; color: var(--text-900); } /* Clickable rows & detail blocks */ #poison_app .poison-list-row{ cursor:pointer; } #poison_app .poison-detail{ background: var(--surface); border:1px solid var(--border); border-radius:.75rem; } /* Column headers and row grid */ #poison_results .poison_list_header, #poison_results .poison_head_row{ display:grid; grid-template-columns: 1fr 200px 200px 140px; /* Name | Type | Uses | Price */ gap:.5rem; align-items:center; } @media (max-width: 991.98px){ #poison_results .poison_list_header{ display:none; } #poison_results .poison_head_row{ grid-template-columns: 1fr; } } /* Accordion look */ #poison_results .accordion-item{ border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; --bs-accordion-btn-padding-y: .45rem; --bs-accordion-btn-padding-x: .75rem; --bs-accordion-btn-icon-width: .8rem; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--surface); --bs-accordion-border-color: var(--border); } #poison_results .accordion-item + .accordion-item{ margin-top: .5rem; } #poison_results .accordion-button{ background: var(--surface); color: var(--primary); padding:.35rem .75rem; font-size:.92rem; line-height:1.5; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35); } #poison_results .accordion-button:not(.collapsed){ background: color-mix(in srgb, var(--primary) 10%, var(--surface)); box-shadow:none !important; } #poison_results .accordion-button:focus{ box-shadow:none !important; } #poison_results .accordion-collapse{ border-top:0 !important; } .poison_detailItem{ font-size: 0.75rem !important; text-transform: capitalize; color: var(--text); } .poison_capitalize{ text-transform: capitalize; } .poison_longDesc{ color: var(--text); font-size: .75rem; } .poison_cardTitle{ font-size: 1rem; color: var(--primary); font-weight: 300; } /* Equal-columns actions (centered list/card toggle) */ #poison_app .poison_actions.equal-columns{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:.75rem; } .poison_badge{ /* Softer tint + clearer border */ background: rgb(from var(--primary) r g b / 0.35); border-color: rgb(from var(--primary) r g b / .675); /* Make the text readable on dark cards */ color: var(--text) !important; } .poison_badge .fa{ color: var(--text) !important; opacity: .9; } /* If you also render badges inside the accordion detail: */ #poison_results .accordion-body .poison_badge{ color: var(--text) !important; background: rgb(from var(--primary) r g b / 0.35); border-color: rgb(from var(--primary) r g b / .675); } #poison_app.poison-single .poison_card, #poison_app.poison-single .poison_toolbar, #poison_app.poison-single .poison_actions, #poison_app.poison-single .poison_summary, #poison_app.poison-single .poison_pager, #poison_app.poison-single #poison_pageinfo, #poison_app.poison-single #poison_pagelabel, #poison_app.poison-single #poison_pagesize, #poison_app.poison-single #poison_results{ display:none !important; } #poison_results img, #poison_single img{ max-height: 150px; object-fit: cover; object-position: center; } /* Poisons — media object layout with 150px max image height */ .poison_media { /* flex created in markup, keep rules minimal here */ } .poison_media .poison_img { max-height: 150px; width: auto; object-fit: cover; /* keeps a nice crop for wide images */ object-position: center; flex: 0 0 auto; /* don’t let image shrink/stretch */ } /* Ensure the text column uses available width */ .poison_media .poison_media_body { min-width: 0; /* allows text to wrap correctly in flex */ font-size: 0.95rem; line-height: 1.35; } /* On very small screens, stack image above description */ @media (max-width: 575.98px){ .poison_media { flex-direction: column; } .poison_media .poison_img { max-width: 100%; height: auto; } } .poison_media { align-items: center !important; } /* Keep image sizing (you already set 150px earlier) */ .poison_media .poison_img { max-height: 150px; width: auto; object-fit: cover; object-position: center; flex: 0 0 auto; } /* Mobile: stack cleanly */ @media (max-width: 575.98px){ .poison_media { flex-direction: column; } } #poison_results .card-body { background-color: var(--background-50); border-radius: 25px; border: none; } .poison-price { letter-spacing: .2px; } .poison-type i, .poison-uses i { opacity: .85; } .poisonCardHeaderLine { border-bottom: 1px dotted rgb(from var(--primary) r g b / .575); margin-bottom: 10px !important; } .poison-price { font-size: 1rem; color: var(--primary); } .poisonCardTitle { font-size: 1.1rem; color: var(--primary); font-weight: 300; } /* Search (index) */ /* ---------------------------------------------------------------------------------------------- */ /* Omnisearch Tray — uses your tokens only */ .omni-inner .btn, .omni-inner .form-control, .omni-inner .accordion-button, .omni-inner .list-group-item{ color: var(--text, #111); } /* Accordion header uses page background; chevron & text match --text */ .omni-inner .accordion-button{ background: var(--background, #fff); } .omni-inner .accordion-button:not(.collapsed){ box-shadow: inset 0 -1px 0 #e6e6e6; } /* List items blend with page; subtle separators */ .omni-inner .list-group-item{ background: var(--background, #fff); border-color: #eee; } .omni-tray{ position: relative; top: 0; z-index: 1060; background: rgb(from var(--background) r g b / 0.35); color: var(--text); border-bottom: 1px solid #ddd; padding: .5rem 0; } .omni-hit-title{ font-weight:400; border-bottom: 1px dotted var(--primary); margin-bottom: 5px; padding-bottom: 5px; } .omni-result-container { margin-left: 25px; margin-right: 25px; } .omni-hit-snippet { padding-top: 10px; opacity:.85; margin-left: 20px; margin-right: 20px; font-size: 0.85rem; } .omni-hit-meta{ font-size:.9rem; opacity:.9; margin-left: 10px; } .omni-empty{ opacity:.9; padding:.5rem 0; } .badge-primary{ background: rgb(from var(--primary) r g b / .575); color:#fff; font-weight: 400; margin-right: 5px; } .badge-muted{ background: #eee; color: var(--text); font-weight: 400; margin-right: 5px; } .omni-link{ color: var(--primary); text-decoration: none; font-weight: 400; } .omni-link:hover{ text-decoration: underline; color: var(--text); } /* Bragger */ /* ---------------------------------------------------------------------------------------------- */ /* === Bragger Stat Strip === */ #bragger_stat_strip .brg-wrap{ display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; padding:4px 0; scrollbar-width:thin; } #bragger_stat_strip .brg-tile{ color:var(--text); flex:0 0 auto; text-align:center; user-select:none; white-space:nowrap; } #bragger_stat_strip .brg-wrap{ justify-content: center; /* center tiles when there’s extra space */ align-items: center; } /* Stacked layout (icon above, count below) */ #bragger_stat_strip .brg-stacked .brg-tile{ width:88px; } #bragger_stat_strip .brg-stacked .brg-ico{ display:block; font-size:28px; line-height:1; } #bragger_stat_strip .brg-stacked .brg-count{ font-weight:800; font-size:1.05rem; line-height:1.1; color:var(--primary); margin-top:2px; } #bragger_stat_strip .brg-stacked .brg-label{ font-size:.72rem; opacity:.8; margin-top:1px; } /* Inline layout (icon left, count right) */ #bragger_stat_strip .brg-inline .brg-tile{ width:160px; display:flex; align-items:center; justify-content:flex-start; gap:8px; text-align:left; } #bragger_stat_strip .brg-inline .brg-ico{ font-size:22px; line-height:1; } #bragger_stat_strip .brg-inline .brg-right{ display:flex; align-items:baseline; gap:6px; } #bragger_stat_strip .brg-inline .brg-count{ font-weight:800; font-size:1.05rem; color:var(--primary); } #bragger_stat_strip .brg-inline .brg-label{ font-size:.8rem; opacity:.8; } /* Focus/hover (no backgrounds) */ #bragger_stat_strip .brg-tile:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; } #bragger_stat_strip .brg-tile:hover .brg-label{ opacity:1; } #bragger_stat_strip .brg-wrap{ overflow-x:auto; /* keep scrolling */ -ms-overflow-style:none; /* IE/Edge */ scrollbar-width:none; /* Firefox */ } #bragger_stat_strip .brg-wrap::-webkit-scrollbar{ display:none; } /* WebKit */ /* Push icon right ~15px without changing tile width */ #bragger_stat_strip .brg-ico{ /* transform: translateX(15px); */ } /* (Optional) If you prefer hard spacing instead of transform: */ /* #bragger_stat_strip .brg-ico{ margin-left:15px; } */ /* For stacked layout, ensure left alignment so the nudge is visible */ #bragger_stat_strip .brg-stacked .brg-tile{ text-align:left; } /* Center everything in stacked tiles */ #bragger_stat_strip .brg-stacked .brg-tile{ width:88px; display:flex; flex-direction:column; align-items:center; /* <-- centers under the icon */ justify-content:flex-start; text-align:center; /* label + count centered */ } /* Icon sits centered with a little breathing room */ #bragger_stat_strip .brg-stacked .brg-ico{ margin:0 auto 2px; transform:none; /* ensure no leftover nudge */ } /* Count + label centered (explicit) */ #bragger_stat_strip .brg-stacked .brg-count, #bragger_stat_strip .brg-stacked .brg-label{ text-align:center; } /* Icon (font) — already present */ #bragger_stat_strip .brg-ico{ font-size:28px; line-height:1; } /* Image version (SVG/PNG/WEBP) — drop-in replacement */ #bragger_stat_strip .brg-img { width: 100%; /* Image fills the container's width */ height: auto; /* Maintains aspect ratio */ display: block; object-fit: contain; image-rendering: auto; margin: 0 auto 2px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35)); } /* Inline layout: keep visuals aligned neatly */ #bragger_stat_strip .brg-inline .brg-img{ margin:0; } #bragger_stat_strip .brg-link{ display:block; text-decoration:none; color:inherit; } #bragger_stat_strip .brg-link:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:8px; } #bragger_stat_strip .brg-tile{ cursor:pointer; } #bragger_stat_strip .brg-stacked .brg-tile { width: clamp(25px, 5.25vw, 108px); /* scales with viewport */ } #bragger_stat_strip .brg-wrap { flex-wrap: wrap; justify-content: center; } @media (max-width: 800px) { .brg-label { display: none; } .brg-count { font-size: 0.65rem !important; } } /* Scrolls of Honor */ /* ---------------------------------------------------------------------------------------------- */ /* === Scrolls of Honor page === */ #honorPage .honor-card { min-height: 100vh; /* fill the viewport */ color: var(--text); } /* Left artwork (desktop) */ #honorPage .honor-art { background-image: url('../images/scrollOfHonor.png'); /* adjust path if needed */ background-repeat: no-repeat; background-position: left top; background-size: cover; min-height: 560px; /* ensures good presence if right column is short */ border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } /* Mobile: show as regular (the PHP already swaps to on small screens) */ @media (max-width: 767.98px) { #honorPage .honor-art { display: none; /* hide background pane on mobile */ } } /* Names list styling */ #honorPage #honorList .col > .d-flex { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 0.5rem; transition: transform .12s ease, background .12s ease, border-color .12s ease; } #honorPage #honorList .col > .d-flex:hover { transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } /* Title star next to H2 (if you’re using .supporter_star globally) */ .supporter_scroll { color: #ffbf00; font-size: 2.5rem; line-height: 1; } .supporter_scroll-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; /* similar baseline as FA */ fill: currentColor; /* inherit gold */ /* replicate the glow/shadow */ filter: drop-shadow(0 0 6px rgba(255,191,0,0.6)) drop-shadow(0 0 14px rgba(255,191,0,0.35)); } /* Optional: card section background used for “Honored Supporters” panel */ #honorPage .card[style*="--surface"], #honorPage .honor-panel { background: var(--surface, rgba(255,255,255,.03)); color: var(--text); } /* Subtle heading color */ #honorPage .card-title { color: var(--primary); } .scrolls_lead { font-size: 1rem; color: var(--text); text-indent: 10px; } .honorNamesList { color: var(--primary); } .scrollsHeader { color: var(--primary); } /* Supporter Page */ /* ---------------------------------------------------------------------------------------------- */ /* Page-scoped helpers (keep it minimal) */ #supporters_app .supporters-shell { background-color: rgb(from var(--background) r g b / .575) !important; border-radius: 5px; } .supporter_star { color: #ffbf00; font-size: 36px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75); } .supporter_unlockHeader { line-height:1.1; color: var(--primary) !important; padding-left: 20px; } .supporter_lead { color: var(--text); font-size: 1.1rem; padding-top: 15px; padding-bottom: 25px; border-bottom: 1px dotted var(--primary); } #supporters_app .supporters-inner { border-radius: 12px; border: 1px solid rgba(255,255,255,.08); } #supporters_app .supporters-list { padding-left: 0; list-style: none; } #supporters_app .supporters-list li { padding-bottom: 15px; margin-left: 15px; } #supporters_app .supporters-img { object-fit: cover; } @media (max-width: 767.98px){ #supporters_app .supporters-img { max-width: 480px; margin: 0 auto; display: block; } } .supporter_already { color: var(--text); margin-top: 15px; padding-top: 10px; border-top: 1px dotted var(--text); } /* Shell keeps the rounded look */ .supporters-shell { border-radius: 14px; overflow: hidden; /* lets the bg crop to the rounded corners */ } /* Left column background image pane */ .supporter-hero { height: 100%; /* match the column height */ min-height: 420px; /* sensible floor for short content */ background-image: url('images/supporterPost_tall.png'); background-position: left center; /* left-aligned as requested */ background-repeat: no-repeat; background-size: cover; /* fills the pane while preserving aspect */ border-right: 1px solid rgba(255,255,255,.08); } /* (Optional) on very small screens, reduce min-height a bit */ @media (max-width: 575.98px) { .supporter-hero { min-height: 360px; } } /* Donate bar below the content */ .supporter-donate-bar { gap: .75rem; } .supporter-donate-bar .btn { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); } /* Space & subtle top border to separate the donate bar */ .supporter-donate-wrap { border-top: 1px solid rgba(255,255,255,.08); } /* Page-scoped helpers (keep it minimal) */ #supporters_app .supporters-shell { border-radius: 14px; overflow: hidden; } #supporters_app .supporters-inner { border-radius: 12px; border: 1px solid rgba(255,255,255,.08); } #supporters_app .supporters-list { padding-left: 0; list-style: none; } #supporters_app .supporters-list li { margin: .25rem 0; } /* Left column as background image */ .supporter-hero { height: 100%; min-height: 420px; background-image: url('../images/supporterPost_tall.png'); background-position: left center; /* left aligned */ background-repeat: no-repeat; background-size: cover; /* fill the pane */ border-right: 1px solid rgba(255,255,255,.08); } /* Optional: left hard border (comment out if not desired) */ /* .supporter-hero { border-left: 4px solid #000; } */ @media (max-width: 575.98px) { .supporter-hero { min-height: 360px; } } /* Donate bar styling */ .supporter-donate-wrap { border-top: 1px solid rgba(255,255,255,.08); } .supporter-donate-bar { gap: .75rem; } .supporter-donate-bar .btn { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); } .supporter-donate-bar { gap: .75rem; justify-content: center; /* center the buttons row */ } .supporter-donate-wrap .small { text-align: center; } .supporter-donate-bar a[href*="buymeacoffee.com"]{ display: inline-flex; align-items: center; height: 36px; /* <- your desired height */ border-radius: 7px; } .supporter-donate-bar a[href*="buymeacoffee.com"] img{ height: 100%; width: auto; } .supporterButton { border-color: var(--primary); color: var(--primary); height: 38px; } .supporter_message { font-size: 0.925rem; margin-left: 15px; margin-right: 15px; margin-top: 25px; } .supporter_scrolls { color: var(--primary) !important; font-size: 1rem !important; font-weight: 600; } .scrolls_link, .scrolls_link:hover, .scrolls_link a { color: var(--primary); text-decoration: none; } .supporterCountBadge { width: 32px; margin-top: 5px; margin-bottom: 5px; margin-left: 25px; } .supporterCountBadgeText { margin-left: 10px; } .supporterCountBadgeTextEnd { margin-left: 40px; } /* User submissions */ /* ---------------------------------------------------------------------------------------------- */ /* Scope */ #userSubmit_app { color: var(--text); } /* Cards / containers */ .userSubmit_card { background: rgb(from var(--background) r g b / .675); border-radius: 12px; } /* Visibility helpers */ .userSubmit_hidden { display: none !important; } /* Small helper text */ .userSubmit_help { font-size: .85rem; color: var(--text); opacity: .8; } /* Required field marker uses primary per spec */ .userSubmit_req::after { content:" *"; color: var(--primary); margin-left: 2px; } /* Headings + labels = headers */ #userSubmit_app h1, #userSubmit_app h2, #userSubmit_app h3, #userSubmit_app .form-label { color: var(--primary); } /* Inputs/selects inside the page */ /* AFTER — leave checkboxes out of the generic styling */ #userSubmit_app .form-control, #userSubmit_app .form-select { color: var(--text); background: var(--background); border: 1px solid var(--primary); } /* Placeholder color for readability on dark bg */ #userSubmit_app .form-control::placeholder { color: var(--text); opacity: .55; } /* Focus ring aligned to primary */ #userSubmit_app .form-control:focus, #userSubmit_app .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary) 25%, transparent); outline: none; } /* Checkbox/radio accent (modern browsers) */ #userSubmit_app .form-check-input { accent-color: var(--primary); border-color: var(--primary); } /* Two-column utility grid */ .userSubmit_grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .userSubmit_grid2 { grid-template-columns: 1fr; } } /* CKEditor host (created by your EditorPool) */ .cfe-cke { min-height: 180px; color: var(--text); background: var(--background); border: 1px solid var(--primary); border-radius: 8px; padding: 6px; } /* "Your Submissions" panel */ #userSubmit_myWrap { background: rgb(from var(--background) r g b / .675); } #userSubmit_myHeader { color: var(--primary); border-bottom: 1px solid rgb(from var(--primary) r g b / .575); padding-bottom: 10px; } .userSubmit_statusBadge { display: inline-block; padding: .2rem .5rem; border: 1px solid var(--primary); color: var(--text); border-radius: 5px; height: 32px; font-size: .8rem; white-space: nowrap; } /* List items */ .userSubmit_listItem { padding: .5rem .75rem; text-indent: 15px; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.3); } .userSubmit_listItem + .userSubmit_listItem { margin-top: .5rem; } /* Group header (per type) */ .userSubmit_groupHdr { color: var(--primary); border-left: 3px solid var(--primary); padding-left: .5rem; margin: 1rem 0 .5rem; } #userSubmit_app textarea.cfe-desc { min-height: 320px; /* bigger default */ resize: vertical; /* allow drag to resize if CKEditor didn't mount */ } /* CKEditor 5: enlarge the editable area */ #userSubmit_app .ck-editor__editable[role="textbox"] { min-height: 320px; /* increase default height */ max-height: none; } /* CKEditor 5: enable vertical resize of the whole editor box */ #userSubmit_app .ck-editor { resize: vertical; /* drag handle in bottom-right */ overflow: auto; /* required for resize to show */ border-radius: 8px; /* match your style */ } /* Quill (fallback) still gets a roomy canvas */ #userSubmit_app .cfe-cke { min-height: 320px; } /* Make sure checkboxes + labels are actually clickable */ #userSubmit_form_spell .form-check-input, #userSubmit_form_spell .form-check-label { position: relative; z-index: 2; /* above any stray overlays */ pointer-events: auto !important; } /* CKEditor should not create a wide invisible overlay over the form */ #userSubmit_form_spell .ck-editor { position: relative; /* gives z-index context */ z-index: 0; /* keep it behind normal controls */ } /* If any editor area was stretching, constrain its stacking */ #userSubmit_form_spell .ck-editor__editable, #userSubmit_form_spell .ck-editor__top { position: relative; z-index: 1; } /* Just in case a layout container was swallowing events */ #userSubmit_form_spell { position: relative; } /* Click-guard to ensure controls are above any stray overlay */ #userSubmit_form_spell .userSubmit_clickGuard { position: relative; z-index: 100; /* above editor chrome */ } #userSubmit_form_spell .userSubmit_clickGuard .form-check-input, #userSubmit_form_spell .userSubmit_clickGuard .form-check-label { pointer-events: auto !important; } /* Keep CKEditor behind interactive controls */ #userSubmit_form_spell .ck-editor { position: relative; z-index: 1; /* below the click guards */ } /* Safety: the spell form itself defines stacking context */ #userSubmit_form_spell { position: relative; z-index: 0; } /* Checkboxes: keep Bootstrap’s checkmark visible */ #userSubmit_app .form-check-input { /* do NOT set a solid background here — let Bootstrap handle it */ border: 1px solid var(--primary); accent-color: var(--primary); /* modern browsers */ width: 1.1rem; height: 1.1rem; cursor: pointer; } /* Checked state: show filled primary box */ #userSubmit_app .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* Ensure the white check icon renders (Bootstrap uses a background-image) */ #userSubmit_app .form-check-input:checked[type="checkbox"] { background-image: var(--bs-form-check-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")); } /* Focus ring consistent with your tokens */ #userSubmit_app .form-check-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary) 25%, transparent); } #userSubmit_alertHost .alert { border: 1px solid var(--primary); } #userSubmit_deleteModal.modal { z-index: 200000 !important; /* > any editor ui */ } .modal-backdrop.show { z-index: 199990 !important; /* just under the modal */ } #userSubmit_mi_attuneText { min-height: 120px; } #userSubmit_mi_attuneCustom { height: calc(1.5em + .75rem + 2px); /* align with .form-control line-height */ resize: none; /* not resizable */ } /* Footer */ /* ---------------------------------------------------------------------------------------------- */ .supporter-star{ color: var(--primary); line-height: 0.85; font-size: 18px; } .site-footer{ background: rgb(from var(--background) r g b / 0.2); color: var(--text); border-top: 1px solid rgb(from var(--primary) r g b / .475); } .site-footer .container{ /* keep Bootstrap padding, just ensure spacing feels airy */ } .footer-menu-row{ row-gap: 1.25rem; } /* Each column */ .footer-menu-col{ /* ensures equal columns on md+ via Bootstrap grid */ } /* Category block inside a column */ .footer-cat-block + .footer-cat-block{ margin-top: 1rem; padding-top: .75rem; } /* Category title */ .footer-cat-title{ color: var(--primary); letter-spacing: .5px; font-weight: 600; margin-bottom: .5rem; text-transform: none; font-size: 1rem; border-bottom: 1px dotted rgb(from var(--text) r g b / 0.5); margin-bottom: 15px !important; padding-bottom: 5px !important; } /* Link list */ .footer-link-list{ list-style: none; padding: 0; margin: 0; /* border-left: 1px solid rgb(from var(--text) r g b / .2); */ } .footer-link-item + .footer-link-item{ margin-top: .35rem; } /* Links */ .footer-link{ display: inline-block; text-decoration: none; color: color-mix(in srgb, var(--text) 82%, transparent); transition: color .15s ease, transform .15s ease; will-change: color, transform; } .footer-link:hover{ color: var(--text); text-decoration: underline; } .footer-link:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } /* Bottom bar */ .footer-bottom{ background: var(--primary); color: var(--background); padding: .75rem 1rem; border-top: 1px solid rgba(0,0,0,.08); } .footer-brand-link{ color: #fff; text-decoration: underline; } .footer-brand-link:hover{ text-decoration: none; color: #fff; } /* --- Optional subtle animation on hover (desktop) --- */ @media (hover:hover){ .footer-link:hover{ transform: translateX(1px); } } /* --- Responsive tuning --- */ @media (max-width: 991.98px){ /* md and down stacks columns already via Bootstrap */ .footer-cat-block + .footer-cat-block{ margin-top: .75rem; padding-top: .5rem; } } /* Left-align category titles already set via markup; ensure list indent */ .indent-20 { padding-left: 15px; font-size: 0.7rem; } /* Single-line contact bar, centered with 50% primary overlay */ .footer-contact-bar{ background-color: color-mix(in srgb, var(--primary) 50%, transparent); color: var(--background); padding: .6rem 1rem; font-weight: 300; text-decoration: none; } .footer-contact-link{ color: #fff; text-decoration: underline; } .footer-contact-link:hover{ text-decoration: none; color: #fff; } .footer-metric{ padding:.35rem 1rem; opacity:.9; color: color-mix(in srgb, var(--text) 85%, transparent); } /* Buy me a coffee */ /* ---------------------------------------------------------------------------------------------- */ .bmacDiv { margin-top: 15px; text-align: center; font-size: 0.8rem; color: var(--primary); } .bmacBreak { border-bottom: 1px dotted var(--primary); width: 95%; text-align: center; margin: auto; margin-bottom: 20px; } .bmacMsg { margin-bottom: 15px; font-size: 0.8rem; color: var(--text); border: 1px solid rgb(from var(--primary) r g b / 0.5) } .bmacMsg p { margin: 15px; text-align: left; } .bmacQR { margin-top: 15px; width: 75%; margin-bottom: 15px; } /* Travel */ /* ---------------------------------------------------------------------------------------------- */ :root{ --ok: #16a34a; --warn:#f59e0b; --bad:#ef4444; --ring:#facc15; --grid: #0f172a; /* default grid color */ } #travel_app { .travel_shell{ background: var(--background); border:1px solid var(--primary); border-radius:12px; } .section_title{ width: 100%; color: var(--primary); border-bottom:1px dotted var(--primary); padding-bottom:.25rem; margin-bottom:1rem; } .form-label{ color: var(--text); } .form-select, .form-control{ background:#ffffff; color:var(--text); border-color:#cbd5e1; } .form-select:focus, .form-control:focus{ border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(202, 138, 4, .25); } .map_card{ background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; position: relative; overflow:hidden; } .map_toolbar{ gap:.5rem; } .map_toolbar .btn{ --bs-btn-padding-y:.25rem; --bs-btn-padding-x:.5rem; } .legend { gap:.5rem; } .statusline{ font-weight:300; font-size:1.05rem; } .status-locked{ color: var(--ok); } .status-unlocked{ color: var(--bad); } .timeline{ list-style:none; padding-left:0; margin:0; } .timeline-item{ position:relative; padding: .75rem 1rem .75rem 2.25rem; border-bottom:1px dashed rgba(15,23,42,.12); transition: background .15s ease; } .timeline-item:last-child{ border-bottom:0; } .timeline-item .dot{ position:absolute; left:.75rem; top:1rem; width:.6rem; height:.6rem; border-radius:50%; background:#b45309; box-shadow:0 0 0 4px rgba(180,83,9,.25); } .timeline-item .time{ font-weight:300; color: var(--primary); } .travelTimeline-segmentText { font-weight: 300 !important; color: var(--text) !important; margin-left: 10px !important; font-size: 0.9rem; } .timeline-item .badge{ border:1px solid rgba(15,23,42,.15); } .timeline-item.is-active{ background: rgba(14,165,164,.10); outline:1px solid rgba(14,165,164,.35); } .no-break{ break-inside: avoid; page-break-inside: avoid; } .hidden{ display:none !important; } /* Day accordion styling */ details.timeline-day{ margin:.25rem 0; } details.timeline-day > summary{ color:var(--text); border-left:4px solid #0ea5a4; background-color: #0ea5a415; } details.timeline-day > summary{ list-style:none; cursor:pointer; padding:.35rem .75rem; font-weight:700; } details.timeline-day > summary::-webkit-details-marker{ display:none; } details.timeline-day[open]{ box-shadow: inset 0 1px 0 rgba(0,0,0,.05); } /* Ensure body under day header is plain */ details.timeline-day .timeline-item{ background:transparent; } .travelTimelineBadge { font-weight: 300 !important; padding: 5px !important; padding-left: 10px !important; padding-right: 10px !important; width: 110px; font-size: 0.7rem; } .travel_badge_text { font-weight: 300 !important; padding: 5px !important; padding-left: 10px !important; padding-right: 10px !important; width: 80px; font-size: 0.7rem; } .input-group-text { color: var(--primary); border: none; } .form-label { color: var(--primary); } .calibration_header { color: var(--primary); text-transform: uppercase; font-weight: 300; } .calibration_header b { color: var(--text); text-transform: none; font-weight: 300; } .calibration_msg { font-weight: 300; color: var(--text); font-style: italic; } .travel_scaleReadout { color: var(--primary); } } #travel_canvas{ width:100%; height:auto; display:block; border:1px solid #e2e8f0; border-radius:10px; } #inspect_panel .banner{background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;padding:.35rem .6rem;margin:-.25rem -0.5rem .5rem -0.5rem;} /* Overlays */ #cal_overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:7;} #guide_overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:6;pointer-events:none;} #cal_overlay .panel,#guide_overlay .panel{background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:1rem 1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:260px;max-width:min(92%,520px)} #guide_overlay .panel{pointer-events:none;font-weight:600} #guide_overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:6; /* Keep overlay non-interactive so canvas clicks still work… */ pointer-events:none; } #guide_overlay .panel{ /* …but make just the panel interactive & draggable */ pointer-events:auto; background:#ffffff;border:1px solid #cbd5e1;border-radius:10px; padding:1rem 1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:260px;max-width:min(92%,520px); /* Start centered */ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); cursor:grab; user-select:none; } #guide_overlay .panel.dragging{ cursor:grabbing; } /* Dynamic weather filter chips */ .weather-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border:1px solid #cbd5e1; border-radius:999px; background:#fff; font-size:.9rem; margin:.2rem .35rem .2rem 0; } .weather-chip input{ margin:0; } /* Print */ #travel_app { @media print{ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .badge { color: #111 !important; } .badge.text-bg-danger { background-color: #dc3545 !important; color: #fff !important; } .badge.text-bg-info { background-color: #0dcaf0 !important; color: #111 !important; } .badge.text-bg-warning { background-color: #ffc107 !important; color: #111 !important; } .badge.text-bg-secondary { background-color: #6c757d !important; color: #fff !important; } .badge.text-bg-dark { background-color: #343a40 !important; color: #fff !important; } .badge.text-bg-success { background-color: #198754 !important; color: #fff !important; } .badge[data-kind="accident"]{ background-color:#a78bfa !important; color:#fff !important; } #timeline_shell{ break-before: page; page-break-before: always; } body{ background:#ffffff; } .workflow-header, .map_toolbar, #planner_shell, #inspect_panel, .legend, .btn{ display:none !important; } #travel_canvas{ width:100% !important; height:auto !important; } .travel_shell{ border:0; } #print_summary{ display:block !important; } } #print_summary{ display:none; } } .travel_workflowHdr { font-size: 0.9rem; color: var(--primary); } .travel_step_hint { font-size: 1rem; color: var(--primary); margin-left: 10px; margin-top: 5px; } .travel_step_hint b { color: var(--text); font-weight: 700; } /* Trinkets */ /* ---------------------------------------------------------------------------------------------- */ #trinkets_app { color: var(--text); } #trinkets_app .card { background: var(--background); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } #trinkets_app .form-label { color: var(--text); } #trinkets_app textarea::placeholder, #trinkets_app input::placeholder { color: rgba(255,255,255,.6); } #trinkets_app ol { margin-left: 1.2rem; } #trinkets_app li { margin: .25rem 0; } .trinketsHeader { color: var(--primary); font-size: 1.1rem; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.5); } #tg_list > li::marker { color: var(--primary); margin-bottom: 5px;} /* number */ #tg_list .trinket-text { color: var(--text); margin-left: 10px; font-weight: 300; } /* Treasure */ /* ---------------------------------------------------------------------------------------------- */ #treasure_app { color: var(--text); } #treasure_app .card { background: var(--background); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } #treasure_app .form-label { color: var(--text); } #treasure_app .btn { border-radius: 10px; } .tr-stat { background: var(--surface, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; } .tr-stat_lbl { font-size: .85rem; color: var(--muted, #aab); } .tr-stat_val { font-weight: 700; font-size: 1.25rem; color: var(--primary); } .tr-stat_hint { font-size: .75rem; opacity: .8; color: var(--muted, #aab); } /* Potion cards: no background, primary border at ~0.4 opacity */ .tr-potionCard { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 12px; padding: 12px; background: transparent; min-height: 130px; } .tr-potionCard .badge { font-weight: 500; } /* Keep Bootstrap modals above sticky navbars/headers */ /* Keep modals above sticky headers/menus */ .modal { z-index: 9999 !important; } .modal-backdrop { z-index: 9998 !important; } /* Loot details */ .tr-coinsBox { background: var(--surface, transparent); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; } .tr-coinsTable thead th { color: var(--text); border-color: rgba(255,255,255,.08); } .tr-coinsTable td, .tr-coinsTable th { border-color: rgba(255,255,255,.08); } .tr-coinsBox { width: 100%; } /* full width container */ .tr-coinsTable { width: 100%; } /* table spans container */ /* Potion cards */ .tr-potionCard { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 12px; padding: 12px; background: transparent; min-height: 130px; } /* Magic item cards */ .tr-itemCard { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 12px; padding: 12px; background: transparent; min-height: 120px; } .tr-trinketCard { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 12px; padding: 12px; background: transparent; min-height: 110px; } .treasureHeader { font-size: 1.1rem; color: var(--primary); padding-bottom: 5px; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.5); } .treasureSubHeader { font-size: 0.7rem; } .treasureExplanation { font-size: 0.75rem; margin-left: 15px; } .treasureRewardHeader { color: var(--text); } .tr-stat_hint { margin-left: 10px; } .tr-stat_val { border-top: 1px dotted rgb(from var(--primary) r g b / 0.35) !important; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35) !important; margin-top: 5px; margin-bottom: 5px; padding-top: 10px; padding-bottom: 10px; text-indent: 20px; } .tr-thead-rule > thead { position: relative; } .tr-thead-rule > thead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bs-border-color, rgba(255,255,255,.15)); pointer-events: none; } .trTableTDCoin { color: var(--text) !important; font-size: 0.9rem; font-weight: 400; } .tr-row-accent > th, .tr-row-accent > td { border-radius: 0 !important; background: rgb(from var(--primary) r g b / .1); border-bottom: 1px solid rgb(from var(--primary) r g b / .475) !important; } .trTreasureMarginIndent { margin: 25px; } /* Feats */ /* ---------------------------------------------------------------------------------------------- */ /* Feats page — uses your color tokens: var(--background), var(--primary), var(--text) Keep weights minimal; emphasize spacing, borders, and subtle opacity. */ /* Uses your tokens: var(--background), var(--primary), var(--text) */ /* Tokens expected: var(--background), var(--primary), var(--text) */ /* Tokens: var(--background), var(--primary), var(--text) */ #feats_app { color: var(--text); } /* Whole page shell (card) acts as overlay positioning context */ .feats_shell { position: relative; background: var(--background); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } .feats_shell.is-overlay-open { overflow: hidden; } /* Filters */ .feats_filters .form-label { color: var(--text); } /* Section headers: primary text + 1px dotted primary underline */ .feats_sectionTitle { color: var(--primary); border-bottom: 1px dotted var(--primary); padding-bottom: .25rem; margin-bottom: 35px; margin-top: 15px; } /* 3-column grid of flat rows */ .feats_grid { margin: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; } @media (max-width: 1200px){ .feats_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px){ .feats_grid { grid-template-columns: 1fr; } } /* Flat row (no inner card bgs/rounded corners) */ .feats_row { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; padding: .45rem .25rem .65rem .25rem; /* border-bottom: 1px solid rgba(255,255,255,.08); */ cursor: pointer; outline: none; border: 1px solid rgb(from var(--primary) r g b / 0.275); border-radius: 10px; } .feats_row:hover { background: rgba(255,255,255,.03); } .feats_row:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset; } /* Thumbnail (main list) */ .feats_thumbWrap { width: 64px; height: 64px; align-self: start; } .feats_thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); } .feats_rowContent { min-width: 0; } /* Feat name: primary + 1px dotted primary underline */ .feats_name { color: var(--primary); /* border-bottom: 1px dotted var(--primary); */ padding-bottom: .15rem; margin-bottom: .35rem; line-height: 1.2; word-wrap: anywhere; } /* Lvl / Prereq lines */ .feats_line { margin-top: .2rem; } .feats_label { color: var(--text); opacity: .85; margin-right: .4rem; } /* Description block: always present */ .feats_descBlock { margin-top: .35rem; } .feats_descLabel { color: var(--primary); margin-bottom: .1rem; } .feats_blurb { color: var(--text); opacity: .95; } .feats_empty { opacity: .85; padding: .6rem .25rem; font-style: italic; } /* Inline overlay (same width as shell) */ .feats_overlay { position: absolute; inset: 0; /* fill the shell */ display: none; z-index: 5; background: var(--background); border-radius: 12px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.4); } .feats_overlay.is-open { display: grid; grid-template-rows: auto 1fr; } /* Header: transparent bg, primary text, dotted underline, larger size */ .feats_overlayHeader { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; background: transparent; color: var(--primary); border-bottom: 1px dotted var(--primary); } .feats_overlayTitle { color: var(--primary); font-size: 1.5rem; line-height: 1.2; } /* Close button: primary outline, always visible */ #feats_overlayClose.btn { color: var(--primary); border: 1px solid var(--primary); background: transparent; opacity: 1; } #feats_overlayClose .fa, #feats_overlayClose .ra { color: var(--primary); } #feats_overlayClose.btn:hover, #feats_overlayClose.btn:active { background: rgba(255,255,255,.06); color: var(--primary); border-color: var(--primary); } #feats_overlayClose.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Body scrolls; contains text + image on the right */ .feats_overlayBody { overflow: auto; padding: 1rem; background: var(--background); } /* Detail layout: content left, image top-right (wraps under on small screens) */ .feats_detailWrap { display: grid; grid-template-columns: 1fr minmax(260px, 512px); gap: 1rem; align-items: start; } @media (max-width: 992px){ .feats_detailWrap { grid-template-columns: 1fr; } } .feats_detailImageWrap { justify-self: end; } .feats_detailImage { width: 100%; max-width: 512px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); } /* Meta grid */ .feats_detailMeta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .4rem .75rem; margin-bottom: .6rem; } @media (max-width: 768px){ .feats_detailMeta { grid-template-columns: 1fr; } } .feats_sep { border-color: rgba(255,255,255,.15); } .feats_lockedNote { padding: .75rem; border: 1px dashed rgba(255,255,255,.25); border-radius: 8px; } /* Rich HTML inside the overlay description */ .feats_description { color: var(--text); opacity: .95; line-height: 1.5; } .feats_description p { margin: .5rem 0; } .feats_description ul, .feats_description ol { margin: .5rem 1.25rem; } .feats_description h1, .feats_description h2, .feats_description h3 { color: var(--primary); border-bottom: 1px dotted var(--primary); padding-bottom: .2rem; margin-top: .8rem; } .feats_description a { text-decoration: underline; } .feats_description img, .feats_description iframe { max-width: 100%; height: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; } /* Full-width accordion layout for feats */ .feats_accordion .feats_accordionBody .feats_detailWrap { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.75rem; } /* Image on the left, fixed-ish width */ .feats_detailImageWrap { flex: 0 0 110px; /* tweak to taste */ max-width: 110px; } .feats_detailImage { display: block; width: 100%; height: auto; border-radius: 0.4rem; } /* Text column takes the rest */ .feats_detailMain { flex: 1 1 auto; min-width: 0; } /* Stack on very small screens if you want */ @media (max-width: 576px) { .feats_accordion .feats_accordionBody .feats_detailWrap { flex-wrap: wrap; } .feats_detailImageWrap { flex-basis: 80px; } } .feats_label { color: var(--primary); } .feats_blurb { margin-top: 10px; margin-left: 20px; font-size: 0.9rem; color: var(--text); } .feats_descLabel { margin-top: 25px; } .feats_description { margin-top: 10px; margin-left: 20px; font-size: 0.9rem; color: var(--text); } .feats_description>ul>li { margin-top: 10px; line-height: 1.5rem; } .feats_description>ul>li>strong { color: var(--primary); } .feats_descBlock { margin-left: 20px; margin-right: 20px; } /* ==== Feats overlay: make it full-width and aligned like the accordion ==== */ /* Make overlay just a full-width block inside the card, not a side-panel */ .feats_shell.is-overlay-open .feats_overlay { position: relative; /* kill any old absolute/fixed positioning */ width: 100%; max-width: 100%; margin: 0; padding: 0; border-radius: 0.5rem; border: 1px solid var(--bs-border-color, rgba(255,255,255,0.1)); background-color: var(--bs-body-bg, #111); } /* Header: stretch full width, title on left, close button on right */ .feats_overlayHeader { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--bs-border-color, rgba(255,255,255,0.1)); margin: 0; /* in case old CSS added margins */ width: 100%; box-sizing: border-box; } .feats_overlayTitle { font-weight: 600; font-size: 1.05rem; margin: 0; } /* Body: same inner padding as accordion bodies */ .feats_overlayBody { padding: 1rem; width: 100%; box-sizing: border-box; } /* Our new static layout wrapper */ .feats_overlayContent { width: 100%; } /* Reuse the same layout we used in the accordion */ .feats_overlayContent .feats_detailWrap { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.75rem; } /* Image column on the left */ .feats_overlayContent .feats_detailImageWrap { flex: 0 0 110px; max-width: 110px; } .feats_overlayContent .feats_detailImage { display: block; width: 100%; height: auto; border-radius: 0.4rem; } /* Meta column on the right */ .feats_overlayContent .feats_detailMain { flex: 1 1 auto; min-width: 0; } /* Full-width blocks under the top row */ .feats_overlayContent .feats_descBlock { margin-top: 0.5rem; } /* Mobile: allow it to stack nicely */ @media (max-width: 576px) { .feats_overlayContent .feats_detailWrap { flex-wrap: wrap; } .feats_overlayContent .feats_detailImageWrap { flex-basis: 80px; } } /* When the overlay is open, hide filters and accordion list so it behaves like a single-feat page */ .feats_shell.is-overlay-open .feats_filters, .feats_shell.is-overlay-open .feats_sections { display: none; } /* Optional: tighten up card padding when in single-feat mode */ .feats_shell.is-overlay-open { padding-top: 0.75rem; } /* Kill the big overlay shadow when showing a single feat */ .feats_shell.is-overlay-open { box-shadow: none !important; /* if the card itself has a shadow */ } .feats_shell.is-overlay-open .feats_overlay { box-shadow: none !important; /* if the overlay had its own massive shadow */ } /* If you had a dark 'backdrop' feel, flatten it a bit */ .feats_shell.is-overlay-open .feats_overlay { background-color: var(--bs-body-bg, #111); /* or whatever matches the card */ } /* Encounters */ /* ---------------------------------------------------------------------------------------------- */ .encounter_canvasWrap { position: relative; background: #111; border-radius: .5rem; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); user-select: none; } .encounter_canvas { display: block; width: 100%; height: 820px; touch-action: none; /* we manage pointer gestures */ cursor: crosshair; background: #0b0b0b; } .encounter_locked .encounter_canvas { cursor: default; } .encounter_controls .form-range { min-width: 160px; } .encounter_controls .input-group>.form-control[type="file"]{ min-width: 0; } @media (min-width: 768px){ .encounter_controls .row.align-items-stretch > [class*="col"]{ display:flex; } .encounter_controls .control-card{ display:flex; flex-direction:column; width:100%; } } /* Make sliders more visible */ .encounter_controls .form-range{ height: 1.25rem; } /* WebKit (Chrome, Edge, Safari) */ .encounter_controls .form-range::-webkit-slider-runnable-track{ background-color: #c9cfd6; /* clearer track */ height: .5rem; border-radius: 1rem; } .encounter_controls .form-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 16px; height: 16px; background: var(--bs-primary); border: 2px solid #fff; border-radius: 50%; margin-top: -6px; /* centers on thicker track */ box-shadow: 0 0 0 2px rgba(0,0,0,.08); } /* Firefox */ .encounter_controls .form-range::-moz-range-track{ background-color: #c9cfd6; height: .5rem; border-radius: 1rem; } .encounter_controls .form-range::-moz-range-thumb{ width: 16px; height: 16px; background: var(--bs-primary); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.08); } /* Optional: show "filled" progress on the track */ .encounter_controls .form-range.progress { --val: 50%; background: linear-gradient(90deg, var(--bs-primary) 0 var(--val), #c9cfd6 var(--val) 100%); border-radius: 1rem; height: .5rem; outline: none; } .encounter_controls .form-range.progress::-webkit-slider-runnable-track{ background: transparent; /* we paint on input itself */ } .encounter_controls .form-range.progress::-moz-range-track{ background: transparent; } @media (min-width: 768px){ .encounter_controls .row.align-items-stretch > .col { display:flex; } .encounter_controls .control-card { display:flex; flex-direction:column; width:100%; } } /* Value pills */ .encounter_controls .value-badge{ font-size: .75rem; line-height: 1; padding: .25rem .4rem; border-radius: .5rem; background: rgba(0,0,0,.06); color: #222; } /* Thicker, more visible sliders */ .encounter_controls .bm-range{ height: 1.25rem; } /* WebKit */ .encounter_controls .bm-range::-webkit-slider-runnable-track{ background-color: #c9cfd6; height: .5rem; border-radius: 1rem; } .encounter_controls .bm-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 16px; height: 16px; background: var(--bs-primary); border: 2px solid #fff; border-radius: 50%; margin-top: -6px; box-shadow: 0 0 0 2px rgba(0,0,0,.08); } /* Firefox */ .encounter_controls .bm-range::-moz-range-track{ background-color: #c9cfd6; height: .5rem; border-radius: 1rem; } .encounter_controls .bm-range::-moz-range-thumb{ width: 16px; height: 16px; background: var(--bs-primary); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.08); } .encounter_sessionViewDiv { color: var(--primary); position: relative; top: 5px; margin-right: 50px; } .encounter_sessionViewDiv_encId { font-weight: 700; font-size: 1.1rem; display: inline-block; margin-left: 10px; } /* Monsters */ /* ---------------------------------------------------------------------------------------------- */ /* ===== Monsters list + overlay ===== */ #monsters_card { position: relative; } /* Overlay that covers the card (same pattern as races page) */ .monsters_overlay-panel { position: absolute; inset: 0; z-index: 30; background: rgba(10, 14, 30, 0.92); border: 1px solid var(--monsters-overlay-border, #2a3556); border-radius: .5rem; padding: 1rem; overflow: auto; backdrop-filter: blur(2px); } /* Statblock styling hooks (you can keep your existing look) */ .monsters_statblock { max-width: 98%; margin: 0 auto; } .monsters_stat-meta { font-style: italic; border-bottom: 2px solid #7a5c2e; padding-bottom: .25rem; margin-bottom: .5rem; } .monsters_prop { margin: .25rem 0; } .monsters_prop strong {color: var(--primary) !important; font-weight:600;} .monsters_hr-bar { border-top: 2px solid #7a5c2e; margin: .5rem 0; } .monsters_ability-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; text-align: center; } .monsters_ability { background: #0d1430; border: 1px solid #39456d; border-radius: 6px; padding: .25rem .35rem; } .monsters_nameplate { display: flex; align-items: center; gap: .5rem; } .monsters_nameplate img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid #2a3556; } .js-name { color: var(--primary) !important; } .js-speed, .js-ac, .js-hp, .js-init { text-transform: capitalize; padding-left: 6px; } /* ===== Icon/image pickers ===== */ .monsters_picker-grid { display: flex; flex-wrap: wrap; gap: .5rem; } .monsters_pick { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; padding: .4rem .45rem; border-radius: .5rem; border-color: #39456d !important; /* outline-secondary on dark */ background: #0d1430; color: #e8f0ff; min-width: 84px; /* gives a nice hit target */ } .monsters_pick:hover { background: #121a3d; } .monsters_pick-imgwrap { position: relative; width: 56px; height: 56px; } .monsters_pick-img { width: 56px; height: 56px; object-fit: cover; border-radius: 999px; /* circle */ border: 1px solid #2a3556; display: block; } /* green check in top-right corner of the image */ .monsters_pick-check { top: 0; right: 0; transform: translate(30%, -30%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } /* Sorting carets in table headers */ .monsters_sort-ind { opacity: .7; font-size: .85em; } .monsters_pick-img { background: color-mix(in oklab, var(--background, #0b0f19) 80%, transparent); } /* ===== Monsters: token-based colors for viewer ===== */ /* Overlay panel covers the card; use site background + readable text */ #monsters_card, #monsters_card * { /* ensure inherited text uses token unless overridden */ color: var(--text, #e8f0ff); } .monsters_overlay-panel { background: var(--background); color: var(--text); border-color: rgb(from var(--primary) r g b / .375); } /* Statblock container + default text color */ .monsters_statblock { color: var(--text, #e8f0ff); } /* Headings in the statblock */ .monsters_statblock h1, .monsters_statblock h2, .monsters_statblock h3, #monsters_ovrTitle { color: var(--primary, #ffd479); } /* Nameplate image frame keeps subtle border; text uses tokens */ .monsters_nameplate img { border-color: color-mix(in oklab, var(--text, #e8f0ff) 25%, transparent); } /* Meta line under the title (size/type/alignment) */ .monsters_stat-meta { color: var(--text, #e8f0ff); border-bottom-color: color-mix(in oklab, var(--primary, #ffd479) 55%, transparent); } /* Horizontal rule styling inside the statblock */ .monsters_hr-bar { border-top: 2px solid color-mix(in oklab, var(--primary, #ffd479) 55%, transparent); } /* Ability grid tiles adopt background token but remain subtly boxed */ .monsters_ability { background: color-mix(in oklab, var(--background, #0b0f19) 85%, black); border-color: color-mix(in oklab, var(--text, #e8f0ff) 20%, transparent); color: var(--text, #e8f0ff); } /* Picker tiles (Type/Habitat/Size) respect tokens for text */ .monsters_pick { background: color-mix(in oklab, var(--background, #0b0f19) 88%, black); color: var(--text, #e8f0ff); border-color: color-mix(in oklab, var(--text, #e8f0ff) 20%, transparent) !important; } .monsters_pick:hover { background: color-mix(in oklab, var(--background, #0b0f19) 75%, black); } /* Habitat/type/size images keep their circular style; no color change needed */ .monsters_pick-img { /* keep as-is */ } /* Sorting carets inherit text color */ .monsters_sort-ind { color: var(--text, #e8f0ff); opacity: .7; } /* Buttons in overlay header remain visible on background */ #monsters_overlay_close.btn { color: var(--text, #e8f0ff); border-color: color-mix(in oklab, var(--text, #e8f0ff) 30%, transparent); } #monsters_overlay_close.btn:hover { background: color-mix(in oklab, var(--background, #0b0f19) 70%, black); } #monsters_card .monsters_pick { border: 0 !important; /* no button border */ background: transparent !important; /* no gray tile behind the image */ box-shadow: none !important; } #monsters_card .monsters_pick:hover { background: transparent !important; /* keep clean on hover */ } /* Image itself: no border, no shadow, keep it circular */ #monsters_card .monsters_pick-img { border: 0 !important; box-shadow: none !important; background: transparent !important; /* transparent PNG shines through */ } /* Wrapper: no accidental background or border */ #monsters_card .monsters_pick-imgwrap { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Focus ring: remove Bootstrap outline on these tiles */ #monsters_card .monsters_pick:focus, #monsters_card .monsters_pick:focus-visible, #monsters_card .monsters_pick:active { outline: none !important; box-shadow: none !important; } /* Make the TYPE row one line and compact */ #monsters_grid_type.monsters_picker-grid { flex-wrap: nowrap; gap: .35rem; overflow-x: auto; /* safety if container is super narrow */ } /* Smaller buttons for type tiles */ #monsters_grid_type .monsters_pick { min-width: 64px; padding: .25rem .35rem; } /* Smaller circular images for type tiles */ #monsters_grid_type .monsters_pick-img, #monsters_grid_type .monsters_pick-imgwrap { width: 40px; height: 40px; } /* Label under each tile: slightly smaller */ #monsters_grid_type .monsters_pick .small { font-size: .75rem; line-height: 1.1; } /* On very small screens, allow wrap (so it doesn't overflow awkwardly) */ @media (max-width: 767.98px) { #monsters_grid_type.monsters_picker-grid { flex-wrap: wrap; } } #monsters_card .monsters_pick.is-selected .monsters_pick-imgwrap::after { content: ""; position: absolute; inset: 0; border-radius: 999px; /* keep it circular */ background: var(--primary); mix-blend-mode: color; /* hue/tint blend */ opacity: .65; /* strength of the tint; tweak to taste */ pointer-events: none; } /* optional: add a soft focus ring for selected */ #monsters_card .monsters_pick.is-selected .monsters_pick-img { box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 80%, transparent); } /* Monsters card should always fill the screen height */ #monsters_card { position: relative; /* needed for overlay absolute positioning */ min-height: 100dvh; /* modern mobile-safe viewport height */ } /* Fallback for older browsers that don't support dvh */ @supports not (height: 100dvh) { #monsters_card { min-height: 100vh; } } /* Overlay still covers the whole card */ .monsters_overlay-panel { position: absolute; inset: 0; z-index: 30; /* rest of your styles... */ } @media (min-width: 992px) { #monsters_btnClear { min-width: 90px; } } /* ===== Custom multiselect ===== */ .monsters_ms { position: relative; } .monsters_ms_btn { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; } .monsters_ms_label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Floating panel */ .monsters_ms_panel { position: absolute; z-index: 40; top: calc(100% + .25rem); left: 0; min-width: 220px; max-height: 260px; overflow: auto; padding: .5rem; border-radius: .5rem; border: 1px solid var(--panel-border, #2a3556); background: var(--background, #0b0f19); box-shadow: 0 6px 24px rgba(0,0,0,.35); display: none; } /* Open state */ .monsters_ms.is-open .monsters_ms_panel { display: block; } /* Items inside the panel */ .monsters_ms_item { padding: .15rem 0; } .monsters_ms_panel hr { border-color: rgba(255,255,255,.08); } /* Dice roll icon button */ .monsters_rollBtn { display: inline-flex; align-items: center; justify-content: center; margin-left: .5rem; width: auto; height: 28px; padding: 0; border: none; background: transparent; border-radius: 5px; line-height: 1; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, color .12s ease; border: 1px solid var(--success); background-color: rgb(from var(--success) r g b / .375); padding-left: 10px; padding-right: 10px; color: var(--success); } .js-hp-avg { display: inline-block; min-width: 24px !important; } .hp-roll-spinner .spinner-border { --bs-spinner-width: 0.9rem; --bs-spinner-height: 0.9rem; --bs-spinner-border-width: 0.075rem; } .monsters_rollBtn:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; } .monsters_rollBtn:hover { transform: translateY(-1px); color: color-mix(in oklab, var(--primary) 85%, white); } .monsters_rollBtn:active { transform: translateY(0); } .monsters_rollBtn .fa-dice-d20 { font-size: 1.05rem; } .monsters_btnRollHP { font-size: 18px; } .monsters_columnLayout { column-count: 2; column-gap: 40px; padding: 20px; max-width: 98%; margin: auto; border-bottom: 1px solid var(--primary); } .monsters_columnLayout p { margin-bottom: 1em; } @media (max-width: 1200px) { .monsters_columnLayout { column-count: 1; } } .monsters_statBlockContainer { column-count: 2; column-gap: 20px; max-width: 100%; margin: auto; border-bottom: 1px dotted var(--primary); margin-bottom: 20px; } @media (max-width: 768px) { .monsters_statBlockContainer { column-count: 1; } } .monsters_statBlockTable { width: 100%; border-collapse: collapse; border: none; font-size: 0.9rem; } .monsters_statBlockTable th { background: none; text-align: center; padding: 8px; border-bottom: 1px dotted var(--primary); } .monsters_statBlockTable td { width: 25%; padding: 8px; border: none; text-align: center; font-weight: 300; } .monsters_statBlockTable td:nth-child(1) { font-weight: 700; background-color: transparent; /* First background color */ text-align: left; } .monsters_statBlockTable td:nth-child(2) { background-color: rgb(from var(--primary) r g b / 0.1); /* First background color */ letter-spacing: 2px; } .monsters_statBlockTable td:nth-child(3), .monsters_statBlockTable td:nth-child(4) { background-color: rgb(from var(--primary) r g b / 0.2); /* Second background color */ letter-spacing: 2px; } .monsters_topPadding20 { margin-top: 20px; } .monsters_section-title { color: var(--text) !important; font-weight: 600; font-size: 1rem; margin-top: 35px; border-bottom: 1px dotted var(--primary); margin-bottom: 15px; padding-bottom: 7px; text-transform: capitalize; } .monsters_section-title::first-letter { font-size: 125%; } .js-indent5 { margin-left: 10px; font-size: 0.95rem; } .js-indent15 { margin-left: 15px; margin-top: 5px; font-size: 0.85rem; } .monsters_prop { padding-bottom: 5px; } .monsters_prop strong { font-weight: 300; } #monsters_tbl tbody tr.monsters_row { cursor: pointer; } #monsters_tbl tbody tr.monsters_row:focus { outline: 2px solid color-mix(in oklab, var(--primary, #ffd479) 60%, transparent); outline-offset: -2px; } .monsters_cr_select { max-width: 7rem; /* ~112px */ min-width: 6rem; /* keep readable */ } /* Optional: slightly tighter spacing on the filter row */ .monsters_filters .form-control, .monsters_filters .form-select { margin-right: .25rem; } .monsters_row { font-size: 0.85rem; } #monsters_tbl th { background: rgb(from var(--primary) r g b / .175); color: var(--primary); font-weight: 300; font-size: 0.9rem; } #monsters_tbl th i { color: var(--primary); } .monsterIconLabel { color: var(--primary) !important; font-weight: 300; } #monsters_view b { font-weight: 700; color: var(--primary); } /* Classes */ /* ---------------------------------------------------------------------------------------------- */ /* ========================================================= CLASSES PAGE — CLEAN CONSOLIDATED STYLES (replaces previous duplicated/overlapping rules) ========================================================= */ /* ----- Base wrappers / cards / badges ----- */ #class_app { color: var(--primary); background: var(--background); } .class_card { background: transparent; border: none; border-radius: 1rem; } .class_badge { background: var(--soft); color: var(--text-900); font-weight: 500; margin-right: .5rem; } .class_meta .badge i { opacity: .8; } #class_hero h2 { color: var(--primary); font-weight: 700; } /* Honor your preference to use outline-warning */ .btn-outline-warning { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); } /* ----- Tabs: 4 equal-width, flat, with custom active color ----- */ .class_tabs { display: flex; /* make tabs stretch full width */ border-bottom: 1px solid var(--border); } .class_tabs .nav-item { flex: 1 1 25%; } .class_tabs .nav-link { width: 100%; text-align: center; border-radius: 0; /* no rounded corners */ border-top: none; /* remove top/left/right borders on inactive */ border-left: none; border-right: none; border-bottom: 1px solid var(--border); color: var(--primary); background: transparent; } .class_tabs .nav-link.active { background: var(--primary); /* active colors */ color: var(--background); border-bottom-color: transparent; /* blends into content card */ } /* ========================================================= OVERVIEW — SUMMARY HERO (Image + Text) ========================================================= */ /* Kill any legacy float/positioning that was causing overlap */ #class_summary, #class_image, #class_image img, .class-summary__media, .class-summary__body { float: none !important; position: static !important; } /* Two-column grid: larger image on the left, text on the right */ #class_summary { display: grid; /* ~48% image / 52% text. The minmax keeps it reasonably big. */ grid-template-columns: minmax(380px, 48%) 1fr; gap: 1.25rem; align-items: start; overflow: visible; margin-bottom: 1rem; } /* Image column */ #class_image { width: 100%; } #class_image img { display: block; width: 100%; height: auto; object-fit: contain; } /* Text column must be allowed to shrink & wrap (prevents clipping) */ #class_summary .class-summary__body { min-width: 0; overflow: visible; } /* Tagline styling */ .class-tagline { font-weight: 300; font-size: 1.5rem; margin-bottom: .25rem; opacity: .9; font-style: italic; border-bottom: 1px dotted rgb(from var(--primary) r g b / .275); } /* Pros/Cons section always starts below the summary block */ #class_overview_meta .row { clear: both; position: relative; margin-top: 1.5rem; } /* Stack summary to single column on narrower screens */ @media (max-width: 1200px) { #class_summary { grid-template-columns: 1fr; } /* keep a nice large image on tablet/mobile */ #class_image { max-width: min(620px, 100%); margin-inline: auto; } } /* ========================================================= OVERVIEW — DATA TABLE (Armor / Weapons / Tools / Source) ========================================================= */ .class_data_table { width: 100%; margin-top: .75rem; } /* Each row: 25% label | 75% value, with your preferred row height feel */ .class_data_table > div { display: grid; grid-template-columns: 25% 75%; align-items: center; gap: .75rem; min-height: 34px; /* preserves your desired row height */ line-height: 1.35; padding: 0 12px; /* internal padding so text doesn’t hug edges */ } /* Label cell */ .class_data_table > div > strong { display: block; text-align: right; /* tidy column of labels */ white-space: nowrap; /* avoids odd wrapping */ color: var(--text); } /* Value cell */ .class_data_table > div > span { display: block; overflow-wrap: anywhere; /* long values won’t blow layout */ color: var(--text); } /* Your alternating backgrounds */ .class_striped_bg { background-color: rgb(from var(--primary) r g b / 0.125); border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.375); border-top: 1px dotted rgb(from var(--primary) r g b / 0.375); } .class_plain_bg { background-color: transparent; } /* Mobile: stack label over value */ @media (max-width: 600px) { .class_data_table > div { grid-template-columns: 1fr; min-height: initial; padding: 4px 8px; } .class_data_table > div > strong { text-align: left; margin-bottom: .25rem; } } /* ========================================================= OVERVIEW — LISTS (Pros / Cons / Level1 / Multiclass) ========================================================= */ #class_pros_list, #class_cons_list, #class_level1_list, #class_multiclass_list { margin-left: 30px; padding: 0; list-style: disc; /* normal bullets for L1/Multiclass; overridden below for Pros/Cons */ line-height: 1.45; } /* Fantasy bullets for Pros/Cons */ #class_pros_list, #class_cons_list { list-style: none; padding-left: 0; margin: 0; } #class_pros_list li, #class_cons_list li { position: relative; padding-left: 40px; padding-right: 20px; padding-top: 15px; margin: .35rem 0; line-height: 1.45; color: var(--text); } /* Icon bullets + faint shadow (works even if emoji ignores text-shadow) */ #class_pros_list li::before, #class_cons_list li::before { position: absolute; left: 0; top: .1rem; font-size: 1.5rem; text-shadow: 0 1px 1px rgb(from var(--primary) r g b / 0.25), 0 0 2px rgb(from var(--primary) r g b / 0.25); filter: drop-shadow(0 1px 0 rgb(from var(--primary) r g b / 0.25)) drop-shadow(0 0 1px rgb(from var(--primary) r g b / 0.25)); line-height: 1; } #class_pros_list li::before { content: "🛡️"; padding-top: 6px; margin-top: 3px;} /* shield = pro */ #class_cons_list li::before { content: "💀"; padding-top: 6px; margin-top: 3px;} /* skull = con */ /* Section headings with dotted rule (your existing look) */ .classes_ulListBottomBorder { border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.375); } .class_borderBottom { padding-bottom: 5px; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.375); } /* Make sure Level1/Multiclass copy uses your text color */ #class_level1_list li, #class_multiclass_list li { color: var(--text); } /* ===== OVERVIEW — SUMMARY HERO (Image + Text) ===== */ /* Kill any legacy float/positioning that was causing overlap */ #class_summary, #class_image, #class_image img, .class-summary__media, .class-summary__body { float: none !important; position: static !important; } /* Two-column grid: ~25% image / ~75% text */ #class_summary { display: grid; grid-template-columns: 25% 75%; gap: 1.25rem; align-items: start; overflow: visible; margin-bottom: 1rem; } /* Image column */ #class_image { width: 100%; } #class_image img { display: block; width: 100%; height: auto; /* preserves the 640x1024 portrait ratio */ object-fit: contain; } /* Text column must be allowed to shrink & wrap (prevents clipping) */ #class_summary .class-summary__body { min-width: 0; overflow: visible; } /* Stack summary to single column on narrower screens */ @media (max-width: 1200px) { #class_summary { grid-template-columns: 1fr; } #class_image { max-width: min(620px, 100%); margin-inline: auto; } } /* Bottom-align the image column on wide screens */ #class_summary .class-summary__media { align-self: end; } /* On stacked/mobile layouts, let it flow normally */ @media (max-width: 1200px) { #class_summary .class-summary__media { align-self: auto; } } .class_dataTableHeader { font-weight: 600 !important; color: var(--primary) !important; } .class_dataTabledata { font-weight: 400; color: var(--text); } /* Reset Bootstrap's baseline so our borders show */ .class_tabs.nav-tabs { border-bottom: 0 !important; } /* Equal-width tabs across the row */ .class_tabs { display: flex; gap: 0; } .class_tabs .nav-item { flex: 1 1 0; } /* Inactive tabs: ONLY a bottom border */ .class_tabs .nav-link { width: 100%; text-align: center; background: transparent !important; color: var(--primary) !important; border: 0 !important; /* remove all sides */ border-bottom: 1px dotted var(--primary) !important; /* keep bottom */ border-radius: 0 !important; /* Ensure the bottom border sits flush with content below */ margin-bottom: -2px; } /* Hover/focus keeps the same bottom-only border */ .class_tabs .nav-link:hover, .class_tabs .nav-link:focus { background: rgb(from var(--primary) r g b / 0.375) !important; border: 0 !important; border-radius: 0 !important; } /* Active tab: top-only radius, solid border, on top of content */ .class_tabs .nav-link.active { z-index: 2; /* sit above content card */ background: var(--primary) !important; color: var(--background) !important; border-bottom-color: var(--primary) !important; /* visible bottom line */ border-top-left-radius: 5px !important; /* top-only radius */ border-top-right-radius: 5px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ===== Custom tables in Classes page ===== */ #class_custom_tables .card, #class_custom_tables .card .card-body { background: var(--background); /* or 'transparent' if you prefer */ } /* Table colors */ #class_custom_tables .table { background: transparent; color: var(--text); border-color: transparent; } /* Header styling */ #class_custom_tables .table thead th { color: var(--primary); background: transparent; border-bottom: 1px solid rgb(from var(--primary) r g b / 0.35); } /* Give rows breathing room (overrides table-sm) */ #class_custom_tables .table > :not(caption) > * > * { padding-top: 0.85rem; padding-bottom: 0.85rem; } /* Zebra striping at ~25% of primary */ #class_custom_tables .table tbody tr:nth-of-type(odd) > * { background-color: rgb(from var(--primary) r g b / 0.25) !important; } #class_custom_tables .table tbody tr:nth-of-type(even) > * { background-color: transparent !important; } /* Keep borders subtle */ #class_custom_tables .table tbody td, #class_custom_tables .table tbody th { border-top-color: rgb(from var(--primary) r g b / 0.20); } #class_custom_tables .table > :not(caption) > * > * { padding-top: 0.85rem; padding-bottom: 0.85rem; padding-left: calc(.75rem + 10px); /* Bootstrap’s default .75rem + 10px */ } /* ---------- Responsive "stacked" tables @ <= 768px ---------- */ @media (max-width: 768px){ /* Hide header; we’ll show labels per cell via data-label */ #class_custom_tables .table thead { display: none; } /* Turn the table into block cards */ #class_custom_tables .table, #class_custom_tables .table tbody, #class_custom_tables .table tr, #class_custom_tables .table td, #class_custom_tables .table th { display: block; width: 100%; } /* Each row becomes a card with subtle border and spacing */ #class_custom_tables .table tbody tr { margin: 0 0 0.85rem 0; padding: 0; border: 1px solid rgb(from var(--primary) r g b / 0.18); border-radius: 8px; background: transparent; /* keep your transparent/var(--background) look */ overflow: hidden; } /* Cells as two-column grid: label (before) | value */ #class_custom_tables .table tbody td { display: grid; grid-template-columns: 42% 58%; gap: .5rem; align-items: start; padding: .65rem .85rem; color: var(--text); overflow-wrap: anywhere; /* prevent content cut-off */ word-break: break-word; } /* Label pulled from data-label */ #class_custom_tables .table tbody td::before { content: attr(data-label); font-weight: 600; color: var(--primary); } /* Keep your zebra striping feeling in stacked layout */ #class_custom_tables .table tbody tr:nth-child(odd) td { background: rgb(from var(--primary) r g b / 0.06); } /* Optional: a little separation between cells within a card */ #class_custom_tables .table tbody td + td { border-top: 1px solid rgb(from var(--primary) r g b / 0.08); } } /* Slightly tighten cell vertical rhythm on desktop still */ #class_custom_tables .table > :not(caption) > * > * { padding-top: 0.85rem; padding-bottom: 0.85rem; /* keep your 10px visual indent */ padding-left: calc(.75rem + 10px); } /* Header color remains your primary */ #class_custom_tables .table thead th { color: var(--primary); font-size: 0.85rem; font-weight: 300; } #class_custom_tables .table tbody td .classTable-val{ display: block; color: var(--text); font-size: .80rem; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; margin-left: 5px; } /* Two-column: 35% image (left) | 65% text (right) */ .sub-details__grid{ display: grid; grid-template-columns: 35% 65%; gap: 1.25rem; align-items: end; /* bottom-align the image and text baselines */ } /* When no image or load error → collapse to single column */ .sub-details__grid.no-img{ grid-template-columns: 1fr; } .sub-details__media{ display: flex; align-items: flex-end; /* anchor image to bottom of its column */ } .sub-details__media img{ display:block; width:100%; height:auto; /* your images are 640x1024; keep aspect */ max-width:100%; } .sub-details__body{ min-width: 0; } /* Features should span full width beneath both columns */ .sub-details__features{ grid-column: 1 / -1; } /* Stack on narrower screens */ @media (max-width: 992px){ .sub-details__grid{ grid-template-columns: 1fr; } } #subclass_detail .scd-media{ display:flex; align-items:flex-end; } #subclass_detail .scd-media img{ display:block; width:100%; height:auto; object-fit:contain; } .class_subDetailsTable { background-color: rgb(from var(--primary) r g b / .15); margin: 5px; padding: 20px; border: 1px dotted rgb(from var(--primary) r g b / 0.25); border-radius: 5px; color: var(--text); font-size: 0.8rem; } .class_subDetailsTableHeader { font-size: 1rem; color: var(--primary); } /* Scope everything under the wrapper id */ #classBlockQuote .blockquote-wrapper { display: flex; height: 100vh; padding: 0 20px; } /* Main blockquote */ #classBlockQuote .blockquote { position: relative; font-weight: 800; color: var(--primary); padding: 30px 0; width: 100%; z-index: 1; margin: 20px auto 50px; /* remove full-width borders */ border: 0; background: linear-gradient(rgb(from var(--text) r g b / .375), rgb(from var(--text) r g b / .375)) right top / 90% 1px no-repeat, linear-gradient(rgb(from var(--text) r g b / .375), rgb(from var(--text) r g b / .375)) left bottom / 90% 1px no-repeat; } /* Header */ #classBlockQuote .blockquote h1 { position: relative; color: var(--primary); font-size: 1rem !important; font-weight: 800; line-height: 1; margin: 0; } /* Left (“) and right (”) quote glyphs */ #classBlockQuote .blockquote::before { position: absolute; content: "“"; color: var(--primary); font-size: 4rem; line-height: 0; top: 20px; left: 15px; } #classBlockQuote .blockquote::after { position: absolute; content: "”"; color: var(--primary); font-size: 4rem; line-height: 0; bottom: -15px; right: 15px; } /* Subheader */ #classBlockQuote .blockquote h4 { position: relative; text-align: right; color: var(--text); font-size: 0.8rem; font-weight: normal; line-height: 1; margin: 0; padding-top: 20px; z-index: 1; } /* Size bump after 600px */ @media (min-width: 600px) { #classBlockQuote .blockquote h1 { font-size: 1.1rem; } } .subclass_detail_desc { color: var(--primary); font-size: 0.85rem; } .subDescrMargin { margin-left: 50px; margin-right: 25px; } /* Scope strictly to the subclass detail area */ #subclass_detail .accordion-item { background: none; border: 1px solid rgb(from var(--primary) r g b / 0.25); border-radius: 8px; margin-bottom: .5rem; } /* Inactive header (collapsed) */ #subclass_detail .accordion-button { background: none; color: var(--primary); font-weight: 300; box-shadow: none; /* kill Bootstrap shadow */ font-size: 0.85rem; } /* Active header (expanded) */ #subclass_detail .accordion-button:not(.collapsed) { background: rgb(from var(--primary) r g b / 0.15); color: var(--text); box-shadow: none; } /* Optional: subtler focus ring in your brand color */ #subclass_detail .accordion-button:focus { box-shadow: 0 0 0 .12rem rgb(from var(--primary) r g b / 0.25); } /* Make sure the chevron matches text color (Bootstrap’s SVG uses currentColor) */ #subclass_detail .accordion-button::after { /* no need to override background-image; it will follow currentColor */ filter: none; } /* Body stays on your surface/background, readable text */ #subclass_detail .accordion-body { background: transparent; color: var(--text); } .subclass_accordionHeader { color: var(--primary); font-size: 1rem; font-weight: 300; } .class_feature_desc p { margin: 0 0 .5rem; } .class_feature_desc ul, .class_feature_desc ol { margin: .5rem 0 .5rem 1.25rem; } .class_feature_desc b, .class_feature_desc strong, .sub-feat-desc b, .sub-feat-desc strong { font-weight: 700 !important; } .subclass-accordion .accordion-body b, .subclass-accordion .accordion-body strong { font-weight: 900 !important; } /* Features by Level: active accordion header = green */ #class_features_levels .accordion-button:not(.collapsed) { background: rgb(from var(--primary) r g b / 0.15); color: var(--text); } /* Features by Level: make / extra bold inside body */ #class_features_levels .accordion-body b, #class_features_levels .accordion-body strong { font-weight: 900; } #class_features_levels h2 button { color: var(--primary) !important; font-size: 0.9rem !important; font-weight: 300 !important; } /* Spellcaster table text: scoped to #class_spellcast_wrap */ #class_spellcast_wrap{ --th-size: .8rem; --td-size: .85rem; --th-weight: 400; --td-weight: 400; --th-color: var(--primary); --td-color: var(--text); --th-bg: color-mix(in srgb, var(--primary) 6%, var(--surface)); } #class_spellcast_wrap th, #class_spellcast_wrap td{ vertical-align: middle; padding: .5rem .6rem; /* keeps Bootstrap spacing feel */ border-color: rgb(from var(--primary) r g b / 0.35); border-style: dotted; font-variant-numeric: tabular-nums; } /* Header cells */ #class_spellcast_wrap thead th{ color: var(--th-color); background: var(--th-bg); font-size: var(--th-size); font-weight: var(--th-weight); letter-spacing: .02em; text-transform: uppercase; /* remove if you prefer sentence case */ white-space: nowrap; } /* Body cells */ #class_spellcast_wrap tbody td{ color: var(--td-color); font-size: var(--td-size); font-weight: var(--td-weight); line-height: 1.35; } /* Optional: subtle row hover for readability */ #class_spellcast_wrap tbody tr:hover td{ background: rgb(from var(--primary) r g b / .375); } .class_feature_borderBottom { padding-bottom: 20px; border-bottom: 1px dotted rgb(from var(--primary) r g b / .375); } .class_feature_indent { margin-left: 20px; } .subclass-accordion .accordion-body { font-size: 0.8rem; color: var(--text) !important; } #class_spelllist_wrap { color: var(--text); } #class_spelllist_wrap .spellList_grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px){ #class_spelllist_wrap .spellList_grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px){ #class_spelllist_wrap .spellList_grid{ grid-template-columns: repeat(3, 1fr); } } #class_spelllist_wrap .spellList_card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; } #class_spelllist_wrap .spellList_head{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-bottom: 1px solid var(--border); } #class_spelllist_wrap .spellList_title{ margin: 0; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--primary); font-weight: 300; border-bottom: 1px dotted rgb(from var(--primary) r g b / .375); width: 100%; padding-bottom: 10px; } #class_spelllist_wrap .spellList_body{ padding: .5rem .75rem 0.75rem; } #class_spelllist_wrap .spellList_list{ margin: 0; padding: 0; list-style: none; } #class_spelllist_wrap .spellList_item{ padding: .35rem .25rem; border-bottom: 1px dashed var(--border); display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; } #class_spelllist_wrap .spellList_item:last-child{ border-bottom: 0; } #class_spelllist_wrap .spellList_name{ font-weight: 300; color: var(--text); font-size: 0.8rem; } #class_spelllist_wrap .spellListEntry { margin-left: 10px; } #class_spelllist_wrap .spellList_meta{ font-size: .8rem; opacity: .8; } /* Subtle hover */ #class_spelllist_wrap .spellList_item:hover{ background: rgb(from var(--primary) r g b / .375); border-radius: .0625rem; } #class_spelllist_wrap .spellList_meta{ display:none; } #class_spelllist_wrap .spellList_item{ display:flex; align-items:center; } #class_spelllist_wrap .spellList_icon{ color:#f0ad4e; font-size:.95em; line-height:1; } #class_spelllist_wrap .spellList_item{ gap: 8px !important; } /* ========== Custom Spells (scoped) ========== */ #class_spelllist_wrap #spellList_custom { margin-top: 16px; color: var(--text); background: var(--background); } #class_spelllist_wrap #spellList_custom .customSpells_head{ margin: 20px 0 10px; font-weight: 700; font-size: .95rem; color: var(--primary); } /* Detail cards for custom spells only */ #class_spelllist_wrap #spellList_custom .spellCard{ background: transparent; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 12px; padding: 12px; margin-bottom: 12px; color: var(--text); } #class_spelllist_wrap #spellList_custom .spellCard_head{ display:flex; align-items:center; gap: 8px; /* tight spacing */ margin-bottom: 6px; } #class_spelllist_wrap #spellList_custom .spellCard_icon{ color: var(--primary); } #class_spelllist_wrap #spellList_custom .spellCard_name{ font-weight: 700; color: var(--primary); } #class_spelllist_wrap #spellList_custom .spellCard_level{ margin-left:auto; font-size:.75rem; padding:.1rem .5rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); } #class_spelllist_wrap #spellList_custom .spellCard_meta{ font-size:.9rem; color: var(--text); opacity:.85; margin-bottom:6px; } #class_spelllist_wrap #spellList_custom .spellCard_tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } #class_spelllist_wrap #spellList_custom .tag{ font-size:.75rem; padding:.1rem .5rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); } #class_spelllist_wrap #spellList_custom .spellCard_desc{ white-space:pre-wrap; color: var(--text); } #class_spelllist_wrap #spellList_custom .spellCard_notes{ margin-top:6px; color: var(--text); opacity:.9; } /* Custom Spells tab only — leaves your level lists untouched */ #class_customspells_wrap { color: var(--text); background: var(--background); } #class_customspells_wrap .customSpells_head{ margin: 20px 0 10px; font-weight: 700; font-size: .95rem; color: var(--primary); } #class_customspells_wrap .spellCard{ background: transparent; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 12px; padding: 12px; margin-bottom: 12px; color: var(--text); } #class_customspells_wrap .spellCard_head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } #class_customspells_wrap .spellCard_icon{ color: var(--primary); } #class_customspells_wrap .spellCard_name{ font-weight:700; color: var(--primary); } #class_customspells_wrap .spellCard_level{ margin-left:auto; font-size:.75rem; padding:.1rem .5rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); } #class_customspells_wrap .spellCard_meta{ font-size:.9rem; color: var(--text); opacity:.85; margin-bottom:6px; } #class_customspells_wrap .spellCard_tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } #class_customspells_wrap .tag{ font-size:.75rem; padding:.1rem .5rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); } #class_customspells_wrap .spellCard_desc{ white-space:pre-wrap; color: var(--text); } #class_customspells_wrap .spellCard_notes{ margin-top:6px; color: var(--text); opacity:.9; } #class_features_levels .class_feature_item h6{ color: var(--primary) !important; font-size: .95rem !important; } #class_features_levels .class_feature_desc { color: var(--text) !important; font-size: 0.85rem !important; } .spellList_customNote { margin-top: 30px; padding-top: 10px; border-top: 1px dotted rgb(from var(--primary) r g b / .375); font-size: 0.9rem; color: var(--primary); } hr.class_featureDivider { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary), rgba(0, 0, 0, 0)); margin-top: 50px; margin-bottom: 50px; } #class_app .specialPage_wrap { margin-top: 10px; } /* Only affect bold text inside Special Pages content */ #class_app .specialPage_wrap b, #class_app .specialPage_wrap strong { font-weight: 300 !important; color: var(--accent); margin-left: 15px; font-size: 0.9rem; } #class_app .specialPage_wrap i { font-weight: 300 !important; color: var(--text); font-size: 0.9rem; } #class_app .specialPage_wrap h5 { font-weight: 300 !important; color: var(--primary); border-bottom: 1px dotted rgb(from var(--primary) r g b / .375); padding-bottom: 5px; margin-bottom: 15px; } #class_app .special_lineSpacer { min-height: 72px; line-height: 72px; } #class_app .special_textLine { margin-left: 25px; font-size: 0.825rem; color: var(--text); } #class_app .special_textLine u { font-size: 0.825rem; color: var(--danger); font-weight: 300; text-decoration: none; } #class_app u.wizardNote { font-size: 0.9rem; color: var(--danger); font-weight: 300; text-decoration: none; } #class_nav_tabs.class_tabs { flex-wrap: wrap; } /* the breaker forces a new row */ #class_nav_tabs .nav-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; border: 0; } #class_app .class_indent50 { margin-left: 50px; } #class_app .class_indent50 li { font-size: 0.85rem; } /* Story Hooks */ /* ---------------------------------------------------------------------------------------------- */ #story_app .story_card { background: var(--surface, #fff); border: 1px solid var(--border, #e3e3e3); } /* Responsive action buttons below title */ #story_app .story_actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .4rem; } /* Aspect chips + actions wrap on small screens */ #story_app .story_aspect_chip { border: 1px solid var(--border, #e3e3e3); background: var(--soft, #f8f9fa); border-radius: .5rem; padding: .4rem .5rem; } #story_app .story_aspect_chip .actions { display: flex; flex-wrap: wrap; gap: .25rem; } #story_app .story_aspect_chip .actions .btn { padding: .1rem .35rem; } #story_app .summary-line { margin-bottom: .25rem; } #story_app .summary-label { width: 6rem; display: inline-block; font-weight: 600; } /* Theme the buttons via var(--primary) */ #story_app .btn-outline-primary{ --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); } #story_app .btn-primary{ --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--background, #fff) !important; } /* Aspect chip: text on first row, buttons on second row */ #story_app .story_aspect_chip { border: 1px solid var(--border, #e3e3e3); background: var(--soft, #f8f9fa); border-radius: .5rem; padding: .6rem .6rem; display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: .5rem; /* space between text and buttons */ } /* Aspect text wraps naturally; stable line-height */ #story_app .story_aspect_chip .text { line-height: 1.35; word-break: break-word; } /* Buttons on their own line; wrap nicely on small screens */ #story_app .story_aspect_chip .actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .05rem; } /* Keep buttons compact */ #story_app .story_aspect_chip .actions .btn { padding: .15rem .45rem; } @media (min-width: 768px){ #story_app .story_aspect_chip .actions { justify-content: flex-end; } } /* Discoveries */ /* ---------------------------------------------------------------------------------------------- */ /* Descriptor Generator styles — discovery_ prefixed */ .discovery_descriptor-panel .discovery_panel { border: 1px solid #e6eefc; background: #fff; border-radius: 8px; box-shadow: 0 1px 0 rgba(13,110,253,0.02); } .discovery_descriptor-panel .discovery_small-muted { color: #6b7280; font-size: 0.9rem; } .discovery_descriptor-panel .discovery_spinner-center { display: flex; align-items: center; justify-content: center; padding: 18px; color: #6b7280; } .discovery_descriptor-panel .discovery_panel h4, .discovery_descriptor-panel .discovery_panel h5 { margin: 0; font-weight: 600; } .discovery_descriptor-panel .discovery_btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); } .discovery_descriptor-panel .discovery_panel .border { border-color: #eef7ff !important; } /* result cards */ .discovery_descriptor-panel .discovery_result-card { padding: 12px; border-radius: 6px; background: #fbfdff; border: 1px solid #eef7ff; } /* smaller screens */ @media (max-width: 767px) { .discovery_descriptor-panel .discovery_panel { padding: 12px; } .discovery_descriptor-panel .discovery_spinner-center { padding: 12px; } } /* Force-visible Discovery Generate button */ .discovery_btn-brand.btn, .discovery_btn-brand { display: inline-block; background: var(--primary) !important; color: #fff !important; border: 1px solid var(--brand) !important; padding: .375rem .75rem !important; font-weight: 600 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important; border-radius: .375rem !important; text-shadow: none !important; } .discovery_btn-brand.btn:hover, .discovery_btn-brand:hover { filter: brightness(.95); transform: translateY(-1px); transition: .12s ease; color: #fff !important; } .discovery_btn-brand.btn:focus, .discovery_btn-brand:focus { outline: none !important; box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.15) !important; } /* discovery_ styles updates: full-width preview, 2-column results */ :root { --brand: #0d6efd; } .discovery_descriptor-panel .discovery_panel { border: 1px solid #e6eefc; background: #fff; border-radius: 8px; box-shadow: 0 1px 0 rgba(13,110,253,0.02); } .discovery_descriptor-panel .discovery_small-muted { color: #6b7280; font-size: 0.9rem; } .discovery_descriptor-panel .discovery_spinner-center { display: flex; align-items: center; justify-content: center; padding: 18px; color: #6b7280; } .discovery_descriptor-panel .discovery_panel h4, .discovery_descriptor-panel .discovery_panel h5 { margin: 0; font-weight: 600; } /* Force-visible Discovery Generate button */ .discovery_btn-brand.btn, .discovery_btn-brand { display: inline-block; background: var(--brand) !important; color: #fff !important; border: 1px solid var(--brand) !important; padding: .375rem .75rem !important; font-weight: 600 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important; border-radius: .375rem !important; text-shadow: none !important; } .discovery_btn-brand.btn:hover, .discovery_btn-brand:hover { filter: brightness(.95); transform: translateY(-1px); transition: .12s ease; color: #fff !important; } .discovery_btn-brand.btn:focus, .discovery_btn-brand:focus { outline: none !important; box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.15) !important; } /* results grid: two columns on md+ screens, 1 column on small screens */ .discovery_results_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 767px) { .discovery_results_grid { grid-template-columns: 1fr; } } /* card styling */ .discovery_result-card { padding: 12px; border-radius: 6px; background: #fbfdff; border: 1px solid #eef7ff; min-height: 80px; } /* small screen padding tweaks */ @media (max-width: 767px) { .discovery_descriptor-panel .discovery_panel { padding: 12px; } .discovery_descriptor-panel .discovery_spinner-center { padding: 12px; } } /* Stronger two-column results grid (discovery_) */ #discovery_results .discovery_results_grid, .discovery_descriptor-panel #discovery_results .discovery_results_grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-items: start; } /* Fallback: ensure each card fills its grid cell */ #discovery_results .discovery_results_grid > .discovery_result-card { width: 100% !important; box-sizing: border-box !important; } /* One-column on small screens */ @media (max-width: 767px) { #discovery_results .discovery_results_grid, .discovery_descriptor-panel #discovery_results .discovery_results_grid { grid-template-columns: 1fr !important; } } /* Account Settings */ /* ---------------------------------------------------------------------------------------------- */ #account_root { } .account_title { font-size: 1.6rem; color: var(--primary); } .account_card { margin-top: 20px; margin-left: 30px; margin-right: 30px; padding: 16px; } .account_card_title { font-size: 1.1rem; margin: 0 0 12px 0; color: var(--text); } .account_row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; margin: 8px 0; } .account_label { font-weight: 400; color: var(--primary); } .account_input, .account_file { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgb(from var(--primary) r g b / .575); background: rgb(from var(--primary) r g b / 0.275); color: inherit; } .account_actions { display: flex; gap: 10px; margin-top: 10px; } .account_btn { font-weight: 300; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--primary); background: rgb(from var(--primary) r g b / 0.125); color: var(--text); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .account_btn:hover:not([disabled]) { background: var(--primary); color: var(--text-50); /* good contrast on the gold */ } .account_btn[disabled] { opacity: .6; cursor: default; } .account_msg { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgb(from var(--success) r g b / 0.35); border: 1px solid rgb(from var(--success) r g b / 0.65); } .account_msg--error { background: rgb(from var(--danger) r g b / 0.35); border: 1px solid rgb(from var(--danger) r g b / 0.65); } .account_hint { font-size: .9rem; opacity: .8; grid-column: 2 / -1; } .account_hint--ok { color: #8fd18f; } .account_avatar_wrap { display: flex; align-items: center; gap: 12px; } .account_avatar_img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); } .account_divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; opacity: .8; } .account_divider::before, .account_divider::after { content: ''; height: 1px; background: rgba(255,255,255,.2); flex: 1; } .account_divider > span { font-size: .9rem; } /* Blog posts */ /* ---------------------------------------------------------------------------------------------- */ #blog_index { display: block; } .blog_item { padding: 1rem 0; } /* Header: title left, date right */ .blog_header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .blog_title { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--primary); } .blog_date { white-space: nowrap; opacity: 0.8; font-size: 0.85rem; color: var(--primary); } /* Content row: image left, text right */ .blog_row { display: flex; align-items: flex-start; gap: 1rem; } /* Thumbnail container: keep image contained and capped at 360px height */ .blog_thumb { flex: 0 0 150px; /* left column width on desktop */ max-width: 40%; overflow: hidden; /* ensure nothing spills out */ border-radius: 6px; } .blog_thumb_img { padding-top: 25px; display: block; width: 80%; height: 80%; max-height: 360px; /* hard cap as requested */ object-fit: cover; /* keep it contained, crop if needed */ } /* Right column content */ .blog_main { padding-top: 25px; flex: 1 1 auto; min-width: 0; padding-left: 15px; margin-right: 5px; border-left: 1px solid rgb(from var(--primary) r g b / .1); color: var(--text); font-size: 0.9rem; font-weight: 300; } .blog_excerpt p { margin: 0 0 0.5rem 0; } .blog_body img { max-width: 100%; height: auto; } .blog_hidden { display: none; } /* Footer: spacer on left, read more on right */ .blog_footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; } .blog_footer_spacer { flex: 1; } .blog_readmore { text-decoration: none; } /* Pagination */ .blog_pagination { margin-top: 1rem; } .blog_page_list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; } .blog_page_item {} .blog_page_link { text-decoration: none; } .blog_active .blog_page_link { font-weight: 700; } /* Responsive: stack on small screens */ @media (max-width: 768px) { .blog_row { flex-direction: column; } .blog_thumb { flex: 0 0 auto; max-width: 100%; } .blog_thumb_img { width: 100%; height: auto; max-height: 360px; object-fit: cover; } .blog_header { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .blog_date { align-self: flex-start; } } .blog-hr { border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.325); } /* ===== Blog pager buttons (right aligned) ===== */ .blog_pagination { display: flex; } .blog_page_list { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; margin-left: auto; /* push to the right */ justify-content: flex-end; align-items: center; flex-wrap: wrap; } .blog_page_item { list-style: none; } /* Button look */ .blog_btn { --blog-btn-bg: #ffffff; --blog-btn-fg: #1f2a44; --blog-btn-border: #c8d1e0; --blog-btn-bg-hover: #f3f6fb; --blog-accent: var(--primary); /* active page color */ display: inline-block; padding: .4rem .8rem; border: 1px solid var(--blog-btn-border); border-radius: 999px; background: var(--blog-btn-bg); color: var(--blog-btn-fg); text-decoration: none; line-height: 1.2; font-weight: 500; white-space: nowrap; } .blog_btn:hover, .blog_btn:focus { background: var(--blog-btn-bg-hover); text-decoration: none; outline: none; } /* Active (current page) */ .blog_page_item.blog_active .blog_btn { background: var(--blog-accent); border-color: var(--blog-accent); color: #fff; } /* Optional: darker themes can override vars on a wrapper, e.g. #blog_index { --blog-btn-bg:#0b1420; --blog-btn-fg:#e7efff; --blog-btn-border:#2b3e5c; --blog-btn-bg-hover:#122033; } .blog_page_item.blog_active .blog_btn { --blog-accent:#1f5fa8; } */ /* Headlines list with thumbnails */ #headline_list .list-group-item { cursor: pointer; } .hl-row { display: flex; gap: 10px; align-items: center; } .hl-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex: 0 0 42px; } .hl-thumb--placeholder { background: rgba(0,0,0,.08); } .hl-texts { display: flex; flex-direction: column; min-width: 0; } .hl-title { font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary);} .hl-date { font-size: .85rem; opacity: .8; } /* Compact recent rows (neutral look) */ .recent-row { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--bs-border-color, #e5e7eb); } .recent-row:first-child { border-top:none; } .recent-thumb { width:64px; height:64px; object-fit:cover; border-radius:6px; flex:0 0 64px; } .recent-content h4 { font-size:1.05rem; margin:0 0 .25rem; } .recent-content .r-date { font-size:.85rem; opacity:.8; margin-bottom:.25rem; } .recent-content .r-excerpt { margin:0; opacity:.95; } .recent-actions { margin-top:.25rem; } /* Featured / clicked hero image — shrink to ~60% of container width */ .feat-hero-img { display: block; width: 60%; max-width: 60%; height: auto; max-height: 360px; object-fit: cover; border-radius: 10px; margin: 0 auto; /* center */ } /* Keep the group tidy */ #blog_left .card-footer .btn-group { display: inline-flex; align-items: center; gap: .5rem; /* space between Prev · meta · Next */ } /* Optional: tone down the meta text a bit */ #hl_page_meta { color: var(--bs-secondary-color, #6c757d); font-size: .875rem; } .recent-sep { border: 0; border-top: 1px dotted var(--primary); opacity: .4; margin: 1rem 0 1.25rem; } /* Recent list layout with right-aligned "Read more" on the title row */ .recent-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--bs-border-color, #e5e7eb); } .recent-row:first-child { border-top: none; } .recent-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: 0 0 64px; } .recent-content h4 { margin: 0; } .recent-head { display: flex; align-items: center; gap: 8px; } .recent-title { font-size: 1.05rem; margin: 0; flex: 1 1 auto; min-width: 0; /* allow ellipsis if you want */ /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ } .recent-head .btn { margin-left: auto; /* push to right */ } .r-date { font-size: .85rem; opacity: .8; margin: .25rem 0; } .r-excerpt { margin: 0; opacity: .95; } /* --- Recent list: put Read more on the title row, right aligned --- */ #recent_list .recent-head { display: flex !important; align-items: center; gap: 8px; } #recent_list .recent-title { flex: 1 1 auto; margin: 0; min-width: 0; } #recent_list .recent-head .btn { margin-left: auto !important; /* push to right */ display: inline-block; } /* If legacy .recent-actions exists, suppress its default row */ #recent_list .recent-actions { display: none !important; } /* Optional: keep recent row layout tidy */ #recent_list .recent-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--bs-border-color, #e5e7eb); } #recent_list .recent-row:first-child { border-top: none; } #recent_list .recent-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: 0 0 64px; } #recent_list .r-date { font-size: .85rem; opacity: .8; margin: .25rem 0; } #recent_list .r-excerpt { margin: 0; opacity: .95; } /* Dotted separator between featured and recent */ .recent-sep { border: 0; border-top: 1px dotted var(--primary); opacity: .4; margin: 1rem 0 1.25rem; } /* Left-column pager: center on ≥992px; right-align on <992px */ #blog_left .card-footer { display: flex; width: 100%; } /* keep flex context */ @media (min-width: 992px) { #blog_left .card-footer .btn-group { margin-left: auto; /* center via auto margins */ margin-right: auto; } } @media (max-width: 991.98px) { #blog_left .card-footer .btn-group { margin-left: auto; /* push group to the right */ margin-right: 0; } } /* ≥1284px: make layout behave like col-lg-4 / col-lg-8 */ @media (min-width: 1284px) { /* Override Bootstrap's 25/75 (3/9) to 33.333% / 66.666% */ #blog_left.col-lg-3 { flex: 0 0 auto; width: 33.333333%; } #blog_right.col-lg-9 { flex: 0 0 auto; width: 66.666667%; } } /* 992px–1283.98px: keep default col-lg-3 / col-lg-9, but hide left-column thumbnails */ @media (min-width: 992px) and (max-width: 1283.98px) { /* Hide thumbnails in the left headlines list only */ #headline_list .hl-thumb { display: none; } } /* Magic Items */ /* ---------------------------------------------------------------------------------------------- */ /* -- scope to your page wrapper -- */ #magicItems{ --bs-body-color: var(--primary); --bs-body-bg: var(--background); } #magicItems .magicItem_wrap{ color: var(--primary); } /* Inputs */ #magicItems .magicItem_wrap .form-control, #magicItems .magicItem_wrap .form-select{ background: var(--soft); border-color: var(--border); color: var(--primary); } #magicItems .magicItem_wrap .form-control:focus, #magicItems .magicItem_wrap .form-select:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 24%, transparent); border-color: var(--primary); } /* Cards / Surfaces */ #magicItems .magicItem_card{ background: var(--background); border: 1px solid rgb(from var(--primary) r g b / 0.375); border-radius: 6px; } /* Buttons */ #magicItems .magicItem_wrap .btn.btn-primary{ background: var(--primary); border-color: var(--primary); color: var(--background) !important; } #magicItems .magicItem_wrap .btn.btn-outline-primary{ color: var(--primary) !important; border-color: var(--primary); } #magicItems .magicItem_wrap .btn.btn-outline-primary:hover{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } /* Toolbar layout (no attunement filter) */ #magicItems .magicItem_toolbar{ display:grid; gap:.5rem .75rem; } @media (min-width: 992px){ #magicItems .magicItem_toolbar{ grid-template-columns: 1fr 200px 200px 200px auto; grid-template-areas: "live type rarity source right"; align-items: end; } } @media (min-width: 768px) and (max-width: 991.98px){ #magicItems .magicItem_toolbar{ grid-template-columns: 1fr 1fr; grid-template-areas: "live live" "type rarity" "source right"; } } @media (max-width: 767.98px){ #magicItems .magicItem_toolbar{ grid-template-columns: 1fr; grid-template-areas: "live" "type" "rarity" "source" "right"; } } #magicItems .magicItem_area_live{ grid-area: live; } #magicItems .magicItem_area_type{ grid-area: type; } #magicItems .magicItem_area_rarity{ grid-area: rarity; } #magicItems .magicItem_area_source{ grid-area: source; } #magicItems .magicItem_area_right{ grid-area: right; display:flex; justify-content:flex-end; gap:.5rem; } /* Accordion */ #magicItems .magicItem_acc .accordion-item{ background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; } #magicItems .magicItem_acc .accordion-item + .accordion-item{ margin-top:.5rem; } #magicItems .magicItem_acc .accordion-button{ background: var(--soft); color: var(--primary); border: none; box-shadow: none; padding: .75rem 1rem; transition: none; /* instant header tap */ } #magicItems .magicItem_acc .accordion-button::after{ display:none !important; } #magicItems .magicItem_acc .accordion-button:focus{ box-shadow: inset 0 0 0 1px var(--border); } #magicItems .magicItem_acc .accordion-body{ background: var(--surface); border-top: 1px solid var(--border); color: var(--primary); } /* Faster collapse */ #magicItems .collapsing{ transition: height .12s ease; } /* Badges */ #magicItems .magicItem_badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border:1px solid var(--border); background: var(--soft); color: var(--primary); border-radius: 999px; font-size:.8rem; } #magicItems .magicItem_badge i{ opacity:.9; } .attunementBadge { background-color: #477fe7 !important; font-weight: 300 !important; font-size: 0.65rem !important; } /* Summary + Pager */ #magicItems .magicItem_summary{ opacity:.85; } #magicItems .magicItem_pager{ display:flex; align-items:center; gap:.5rem; } #magicItems .magicItem_pager .btn{ min-width: 2.5rem; } .magicItem_badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border:1px solid var(--border, rgba(255,255,255,.2)); background: var(--soft, rgba(255,255,255,.06)); color: var(--primary, #e6edf3); border-radius:5px !important; /* per your request */ font-size:.8rem; line-height:1.2; vertical-align:middle; } .magicItem_badge i{ opacity:.9; } /* Hover (optional, for consistency) */ .magicItem_sort.btn-outline-primary:hover{ background-color: transparent; color: #fff; border-color: var(--primary); } /* Active states */ .magicItem_sort.btn-outline-primary.active, .magicItem_sort.btn-outline-primary:active, .btn-check:checked + .magicItem_sort.btn-outline-primary, .magicItem_sort.btn-outline-primary.dropdown-toggle.show{ background-color: transparent; color: #fff; border-color: var(--primary); } #magicItem_results .accordion-item{ /* Works on Bootstrap 5 (uses vars if available, else our explicit rules below) */ --bs-accordion-btn-padding-y: .45rem; --bs-accordion-btn-padding-x: .75rem; --bs-accordion-btn-icon-width: .8rem; } #magicItem_results .accordion-button{ padding: var(--bs-accordion-btn-padding-y, .35rem) var(--bs-accordion-btn-padding-x, .75rem); min-height: 0; /* let content define height */ line-height: 1.5; /* tighter line height */ font-size: .92rem; /* slightly smaller text */ border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35) } #magicItems .magicItem_head_row{ display:grid; grid-template-columns: 1fr 180px 140px 160px 110px; /* Name grows; others fixed */ gap:.75rem; align-items:center; } @media (max-width: 991.98px){ #magicItems .magicItem_head_row{ grid-template-columns: 1fr 150px 120px 120px 90px; gap:.5rem; } } @media (max-width: 575.98px){ /* Stack secondaries on narrow screens */ #magicItems .magicItem_head_row{ grid-template-columns: 1fr; } } /* Compact header (you already started this; these finish the “no seam” feel) */ #magicItems #magicItem_results .accordion-item{ --bs-accordion-btn-padding-y: .45rem; --bs-accordion-btn-padding-x: .75rem; --bs-accordion-btn-icon-width: .8rem; } #magicItems #magicItem_results .accordion-button{ padding: var(--bs-accordion-btn-padding-y, .35rem) var(--bs-accordion-btn-padding-x, .75rem); min-height: 0; line-height: 1; font-size: .92rem; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35); } #magicItems #magicItem_results .accordion-button:focus{ box-shadow:none; } #magicItems #magicItem_results .accordion-button:not(.collapsed){ box-shadow:none; } #magicItems #magicItem_results .accordion-collapse{ border-top:0; } /* Detail “card” surface inside body (mirrors potions) */ #magicItems .magicItem_detail{ background: var(--surface); border:1px solid var(--border); border-radius:.75rem; } /* Speed up collapse (you already have a global; keep here scoped too) */ #magicItems .collapsing{ transition: height .12s ease; } #magicItems .magicItem_acc .accordion-item + .accordion-item{ margin-top:0; } .magic_accordionItemPane { background-color: #fff !important; border-radius: 0px !important; } .magicItem_accordionHeader { line-height: 1rem !important; max-height: 46px; padding: 0 !important; border-bottom: 1px dotted rgb(from var(--primary) r g b / .475); } .mi_accordionTitle { color:var(--primary); font-weight:400; font-size: 0.8rem !important; } .mi_accordionBody { color: var(--text); font-size: 0.85rem; padding-bottom: 25px; } .mi-highlight { outline: 2px solid var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 30%, transparent); border-radius: 6px; } /* Magic Items – card layout */ .magicItem_card { position: relative; margin-bottom: 1.25rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.6); height: 400px; max-height: 400px; overflow-y: auto; } .magicItem_card:hover { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.6); } .magicItem_cardHeaderLine { border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: .25rem; } .magicItem_card .cardNameTitle { font-size: 1.05rem; } .magicItem_badge, .magicItem_meta_left, .magicItem_meta_right, .magicItem_meta_attn { font-size: 0.85rem; } /* images used in both list + cards */ .magicItem_img { max-height: 200px; width: auto; object-fit: contain; } .mi_accordionBody table { margin-top: 30px; width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; } .mi_accordionBody table th { background: rgb(from var(--primary) r g b / .175); color: var(--primary); font-weight: 300; line-height: 1.5rem; height: 40px; padding-left: 10px; border-bottom: 1px solid var(--primary); } .mi_accordionBody table td { padding: 0.35rem 0.5rem; border: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; margin-left: 20px; } /* View toggle buttons: use site theme colors when active */ .magicItem_viewToggle.active { background-color: var(--primary) !important; color: var(--background) !important; border-color: var(--primary) !important; } /* Make sure the icon matches the text color */ .magicItem_viewToggle.active i { color: var(--background) !important; } .magicItem_viewToggle.active span { color: var(--background) !important; } /* Potions */ /* ---------------------------------------------------------------------------------------------- */ /* ===== Potions — Header Layout Cleanup ===== */ #potion_app { color: var(--primary); background-color: var(--background); border-radius: 7px; } .potion_badge { color: var(--primary); font-weight: 300; font-size: 0.8rem; margin-right: 10px; } .potion_badge i { font-size: 0.675rem; } /* Cards / Controls look */ #potion_app .potion_card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; } /* Inputs on dark theme */ #potion_app .form-control, #potion_app .form-select{ background: var(--soft); border-color: var(--border); color: var(--primary); } #potion_app .form-control:focus, #potion_app .form-select:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 24%, transparent); border-color: var(--primary); } /* Primary & outline button text colors (per your scheme) */ #potion_app .btn.btn-primary{ background: var(--primary); border-color: var(--primary); color: var(--background) !important; } #potion_app .btn.btn-outline-primary{ color: var(--primary) !important; border-color: var(--primary); } #potion_app .btn.btn-outline-primary:hover{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } /* ---------- Filters Toolbar Grid ---------- */ #potion_app .potion_toolbar{ display:grid; gap:.75rem; align-items:end; } /* ≥992px: live | itemtype | category | rounding (right) */ @media (min-width: 992px){ #potion_app .potion_toolbar{ grid-template-columns: 1fr 220px 220px auto; grid-template-areas: "live itemtype category round"; } } /* 768–991px: live full row, then itemtype | category, then rounding right */ @media (min-width:768px) and (max-width:991.98px){ #potion_app .potion_toolbar{ grid-template-columns: 1fr 1fr; grid-template-areas: "live live" "itemtype category" "round round"; } } /* <768px: stacked */ @media (max-width:767.98px){ #potion_app .potion_toolbar{ grid-template-columns: 1fr; grid-template-areas: "live" "itemtype" "category" "round"; } } #potion_app .potion_area_live{ grid-area: live; } #potion_app .potion_area_itemtype{ grid-area: itemtype; } #potion_app .potion_area_category{ grid-area: category; } #potion_app .potion_area_round{ grid-area: round; display:flex; justify-content:flex-end; } /* Input-group clear button height match */ #potion_app .potion_input_group .btn{ white-space:nowrap; } /* ---------- Actions Row Grid ---------- */ /* Three logical zones: Left (Refresh/Reset), Center (List/Card + Export), Right (Mode + Slider) */ #potion_app .potion_actions{ display:grid; gap:.75rem; align-items:center; } /* ≥1200px gives a bit more breathing room */ @media (min-width: 1200px){ #potion_app .potion_actions{ grid-template-columns: 1fr auto 360px; grid-template-areas: "left center right"; } } /* 992–1199px */ @media (min-width: 992px) and (max-width:1199.98px){ #potion_app .potion_actions{ grid-template-columns: 1fr auto 320px; grid-template-areas: "left center right"; } } /* 768–991px: left & center on first row, right on its own aligned right */ @media (min-width:768px) and (max-width:991.98px){ #potion_app .potion_actions{ grid-template-columns: 1fr auto; grid-template-areas: "left center" "right right"; } } /* <768px: stacked */ @media (max-width:767.98px){ #potion_app .potion_actions{ grid-template-columns: 1fr; grid-template-areas: "left" "center" "right"; } } #potion_app .potion_actions_left{ grid-area:left; display:flex; gap:.5rem; flex-wrap:wrap; } #potion_app .potion_actions_center{ grid-area:center; display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; } #potion_app .potion_actions_right{ grid-area:right; display:flex; justify-content:flex-end; gap:.75rem; align-items:end; flex-wrap:wrap; } /* Mode group block + slider column */ #potion_app .potion_modeblock{ display:flex; gap:.5rem; align-items:center; } #potion_app .potion_random_col{ min-width: 240px; } #potion_app #potion_random_wrap{ display:none; /* toggled by JS */ } #potion_app #potion_random_wrap .form-label{ margin-bottom:.25rem; } /* ---------- Summary, Sort & Pager ---------- */ #potion_app .potion_summary{ opacity:.85; } /* Pager flex — stays tidy on wrap */ #potion_app .potion_pager{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } #potion_app .potion_pager .btn{ min-width:2.5rem; } #potion_app .potion_pageinfo{ opacity:.85; } /* Page-size select compact */ #potion_app .potion_pagesize{ width:auto; } #potion_results .card{ border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); background-color: var(--background); color: var(--text-900); } #potion_results .card-title{ color: var(--primary); font-weight: 600; } #potion_results .potion_badge{ display:inline-block; padding:.15rem .45rem; border-radius:.5rem; background: rgb(from var(--btn_info) r g b / .2); border: 1px solid var(--btn_info-accent); font-size:.8rem; font-weight:500; color: var(--text-900); } #potion_app .potion_actions.equal-columns { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; } /* Clickable list rows */ #potion_app .potion-list-row { cursor: pointer; } #potion_app .potion-detail { background: var(--surface); border:1px solid var(--border); border-radius:.75rem; } #potion_app .potion_actions.equal-columns { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; } /* Clickable list rows */ #potion_app .potion-list-row { cursor: pointer; } #potion_app .potion-detail { background: var(--surface); border:1px solid var(--border); border-radius:.75rem; } /* Active/selected button styles */ #potion_app .btn-check:checked + .btn-outline-primary{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } #potion_app .btn.btn-outline-primary.active, #potion_app .btn.btn-outline-primary:active{ background: var(--primary); color: var(--background) !important; border-color: var(--primary); } #potion_results .potion-acc{ max-height: 0; overflow: hidden; transition: max-height 220ms ease; will-change: max-height; } #potion_results .potion-acc { overflow: hidden; } /* Column headers (desktop) and row header layout */ #potion_results .potion_list_header, #potion_results .potion_head_row { display: grid; grid-template-columns: 1fr 200px 200px 140px; gap: .5rem; align-items: center; } @media (max-width: 991.98px){ #potion_results .potion_list_header { display:none; } #potion_results .potion_head_row { grid-template-columns: 1fr; } } /* Tidy accordion look */ #potion_results .accordion-item { border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; } #potion_results .accordion-item + .accordion-item { margin-top: .5rem; } #potion_results .accordion-button { background: var(--surface); color: var(--primary); } #potion_results .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); } #potion_results .accordion-item + .accordion-item{ margin-top: 0; /* kill vertical gap */ border-top: 0; /* avoid double border seam */ } /* Optional: square middle items, keep rounding only on ends */ #potion_results .accordion-item{ border-radius: 0; } #potion_results .accordion-item:first-child{ border-top-left-radius:.5rem; border-top-right-radius:.5rem; } #potion_results .accordion-item:last-child{ border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem; } #potion_app .potion_modebar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } @media (min-width: 768px){ #potion_app .potion_modebar { flex-wrap: nowrap; } } /* Make the count select compact inline */ #potion_app #potion_random_inline .form-select { width:auto; min-width:84px; } #potion_results .accordion-item{ --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--surface); --bs-accordion-border-color: var(--border); } #potion_results .accordion-button:focus{ box-shadow: none !important; } #potion_results .accordion-button:not(.collapsed){ box-shadow: none !important; } /* removes the inset bottom line */ #potion_results .accordion-collapse{ border-top: 0 !important; } /* no seam above body */ .potion_head_row { font-size: 0.85rem; color: var(--primary); } .potion_headerText { transform: translateX(-50px); } #potion_results .accordion-item{ /* Works on Bootstrap 5 (uses vars if available, else our explicit rules below) */ --bs-accordion-btn-padding-y: .45rem; --bs-accordion-btn-padding-x: .75rem; --bs-accordion-btn-icon-width: .8rem; } #potion_results .accordion-button{ padding: var(--bs-accordion-btn-padding-y, .35rem) var(--bs-accordion-btn-padding-x, .75rem); min-height: 0; /* let content define height */ line-height: 1.5; /* tighter line height */ font-size: .92rem; /* slightly smaller text */ border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35) } /* Make the caret smaller on older Bootstrap too */ #potion_results .accordion-button::after{ background-size: .65rem .65rem; /* shrink the chevron */ margin-left: 10px; } /* Tighter grid inside the header row */ #potion_results .potion_head_row{ gap: .5rem; align-items: center; } #potion_results .potion_head_row .potion_detailItem{ font-size: .88rem; /* compact secondary columns */ } /* Optional: even tighter on wide screens; comment out if you don't want this */ @media (min-width: 992px){ #potion_results .accordion-button{ padding: .30rem .65rem; font-size: .9rem; } } .potion_detailItem { font-size: 0.75rem !important; text-transform: capitalize; color: var(--text); } .potion_capitalize{ text-transform: capitalize; } .potion_longDesc { color: var(--text); font-size: 0.75rem; } .potion_cardTitle { font-size: 1rem; color: var(--primary); font-weight: 300; } /* Spellbook */ /* ---------------------------------------------------------------------------------------------- */ #spellList { /* ===== spellBook table view (prefixed .spell_) ===== */ .spell_cardPage .card-body { padding: 1rem; } /* Toolbar */ .spell_filters .form-label.small { font-weight: 600; } /* Body container */ .spell_tableBody { margin-top: .25rem; } /* Each row wrapper (header + detail collapse) */ .spell_rowWrap { border-bottom: 1px solid var(--bs-border-color); } /* Header grid for each spell (≥ md shows columns, < md collapses to single-left stack + toggle) */ .spell_tableRow { display: grid; grid-template-columns: 2fr .8fr 1fr 1.6fr 1fr .8fr .8fr .8fr; gap: .25rem; padding: .5rem .5rem; } .spell_tableRow:hover { background: rgba(255,255,255,.02); } /* Toggle button chevron rotate */ .spell_btnToggle[aria-expanded="true"] i { transform: rotate(180deg); transition: transform .12s ease; } .spell_btnToggle i { transition: transform .12s ease; } /* Badges */ .spell_badge { background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); color: var(--bs-body-color); } /* Detail area */ .spell_rowDetail { padding: .25rem .5rem .7rem; } .spell_detailQuick > div { margin-bottom: .25rem; } .spell_detailDesc { line-height: 1.5; } /* Loader overlay */ .spell_loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.2); backdrop-filter: blur(1px); border-radius: .5rem; font-weight: 600; } .spell_loader.show { display: flex; } /* ===== Responsive ===== */ /* md (<768px): hide table header; row grid collapses to [name | toggle]; others move into the compact line already placed in .spell_cellName */ @media (max-width: 767.98px){ .spell_tableHeader { display: none !important; } .spell_tableRow { grid-template-columns: 1fr auto; align-items: center; } .spell_cellLevel, .spell_cellSchool, .spell_cellClasses, .spell_cellTime, .spell_cellRange, .spell_cellSource { display: none !important; } } /* lg (<1200px and ≥768px): slightly tighter columns */ @media (min-width: 768px) and (max-width: 1199.98px){ .spell_tableHeader, .spell_tableRow { grid-template-columns: 2fr .7fr 1fr 1.4fr .9fr .8fr .8fr .7fr; } } .spell_rowHeader { cursor: pointer; } .spell_rowHeader:focus-visible { outline: 2px solid var(--bs-warning); outline-offset: 2px; } /* Ensure source shows the abbreviation "phb 24" cleanly */ .spell_cellSource { text-transform: none; } .spell_tableRow { display: grid; grid-template-columns: auto 2fr .8fr 1fr 1.6fr .8fr; /* matches header */ gap: .75rem; padding: .5rem .5rem; } .spell_cellToggle { display:flex; align-items:center; justify-content:center; } /* mobile: toggle left, name right; other columns hidden via d-md-none */ @media (max-width: 767.98px){ .spell_tableHeader { display: none !important; } .spell_tableRow { grid-template-columns: auto 1fr; } /* [toggle] [name] */ /* the removed columns are already hidden on mobile by d-md-none */ } .spell_tableHeader, .spell_tableRow { display: grid; grid-template-columns: auto clamp(240px, 32vw, 420px) .8fr 1fr 1.6fr .9fr; gap: .75rem; } .spell_tableHeader { font-size: .85rem; font-weight: 400; color: var(--primary); border-bottom: 1px solid var(--bs-border-color); } /* Toggle: flush left */ .spell_cellToggle { display:flex; align-items:center; justify-content:flex-start; } /* Name column: avoid collapsing to a few pixels on wide tables */ .spell_cellName { min-width: 150px; } /* Alignments */ .spell_cellLevel, .spell_cellSchool { text-align: left; } .spell_cellClasses, .spell_cellSource { text-align: right; } /* Mobile: only [toggle][name]; others hidden via d-md-none */ @media (max-width: 767.98px){ .spell_tableHeader { display: none !important; } .spell_tableRow { grid-template-columns: auto 1fr; } .spell_cellName { min-width: 0; } /* allow name to shrink on small screens */ } .spell_classBadgesMobile .spell_badgeClass { font-size: .8rem; padding: .15rem .45rem; } @media print{ #spell_filters, .spell_pager, .btn-group[aria-label="View mode"] { display: none !important; } .spell_card { break-inside: avoid; page-break-inside: avoid; } /* Ensure the visible view prints cleanly */ #spell_tableHeader.d-none, #spell_results.d-none, #spell_cards_results.d-none { display: none !important; } } #spell_print_root { display: none; } /* When printing, show only the print root; hide the app UI entirely */ @media print { body * { visibility: hidden !important; } #spell_print_root, #spell_print_root * { visibility: visible !important; } #spell_print_root { display: block !important; position: static !important; inset: auto !important; margin: 0; padding: 0; width: 100%; } /* Cards grid: 3-up, no cut-offs */ #spell_print_root.spell_print_mode_cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12pt; } #spell_print_root.spell_print_mode_cards .spell_print_card { break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } /* Spellbook list: avoid splitting a spell block */ #spell_print_root.spell_print_mode_book .spell_print_block { break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 12pt; } } /* Spell Cards: put class badges on their own line */ .spell_cardClassLine{ display: flex; flex-wrap: wrap; gap: .25rem .35rem; } .spell_cardClassLine .spell_badgeClass{ margin: 0; } /* Small tightening for the top badges row */ .spell_cardBadgesTop .spell_badge{ margin-bottom: .25rem; } .spell_levelsMenu{ min-width: 260px; max-width: 320px; } .form-check.form-check-sm .form-check-input{ width: 0.95em; height: 0.95em; margin-top: .2rem; } .form-check.form-check-sm .form-check-label{ font-size: .9rem; } #spellBookSwitchButtons{ --active-bg: var(--bs-danger); --active-border: var(--bs-danger); --active-color: #fff; } #spellBookSwitchButtons #spell_view_book:checked + label.btn { background-color: var(--primary); border-color: var(--primary); color: var(--text-100); } #spellBookSwitchButtons #spell_view_book + label.btn { background-color: rgb(from var(--primary) r g b / 0.25); border-color: var(--primary); color: var(--primary); } #spellBookSwitchButtons #spell_view_cards:checked + label.btn { background-color: var(--primary); border-color: var(--primary); color: var(--text-100); } #spellBookSwitchButtons #spell_view_cards + label.btn { background-color: rgb(from var(--primary) r g b / 0.25); border-color: var(--primary); color: var(--primary); } #spellBookSwitchButtons .btn-outline-secondary { color: var(--primary); border-color: var(--primary); font-weight: 300; } #spellBookSwitchButtons .btn-outline-secondary:hover { color: var(--text-100); border-color: var(--primary); background-color: rgb(from var(--primary) r g b / 0.65); font-weight: 300; } .spellToolbar { color: var(--primary); font-weight: 300; } .spell_wrap { --gap: .6rem; /* md default (≥768px) */ --cols: /* [0] toggle */ auto /* [1] name */ clamp(150px, 32vw, 480px) /* [2] level */ max-content /* [3] school */ max-content /* [4] classes */ minmax(180px, 1.2fr) /* [5] source */ max-content; } /* lg (≥1200px): give name & classes more room so badges don’t fall off */ @media (min-width: 1200px){ .spell_wrap { --cols: auto clamp(260px, 34vw, 560px) max-content max-content minmax(220px, 1.4fr) max-content; } } .spell_tableRow { padding: .5rem .5rem; } .spell_tableRow:hover { background: rgba(255,255,255,.02); } /* Toggle column: flush left */ .spell_cellToggle { display:flex; align-items:center; justify-content:flex-start; } /* Name column: never collapse to ultra-narrow; clamp to 2 lines */ .spell_cellName { min-width: 200px; overflow: hidden; } .spell_rowTitle { font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; /* allow up to 2 lines before truncation */ -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; /* break long words if needed */ } /* Keep these readable & compact */ .spell_cellLevel, .spell_cellSchool { text-align: left; white-space: nowrap; /* "Cantrip", "Level 3" stays in one piece */ } .spell_cellSource { text-align: right; white-space: nowrap; /* "phb 24" never wraps */ } /* Classes: allow wrapping but keep right-aligned; limit extreme growth */ .spell_cellClasses { text-align: right; overflow: hidden; /* prefer wrap instead of forcing scroll */ white-space: normal; } /* Badges spacing */ .spell_badge { background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); color: var(--bs-body-color); } .spell_badgeClass { margin: 0 .25rem .25rem 0; } /* Row wrapper + details */ .spell_rowWrap { border-bottom: 1px solid var(--bs-border-color); } .spell_rowDetail { padding: .25rem .5rem .7rem; } /* Mobile (<768px): collapse to [toggle | name]; rest moves into the mobile line under name */ @media (max-width: 767.98px){ .spell_tableHeader { display: none !important; } .spell_tableRow { grid-template-columns: auto 1fr; } .spell_cellName { min-width: 0; } /* let it flex */ .spell_cellLevel, .spell_cellSchool, .spell_cellClasses, .spell_cellSource { display: none !important; } } /* Slight squeeze for mid-range widths to keep everything visible longer */ @media (min-width: 768px) and (max-width: 991.98px){ .spell_wrap { --gap: .5rem; --cols: auto clamp(220px, 38vw, 420px) max-content max-content minmax(160px, 1fr) max-content; } } /* Accessibility & misc */ .spell_rowHeader { cursor: pointer; } .spell_rowHeader:focus-visible { outline: 2px solid var(--bs-warning); outline-offset: 2px; } .spell_btnToggle[aria-expanded="true"] i { transform: rotate(180deg); transition: transform .12s ease; } .spell_btnToggle i { transition: transform .12s ease; } #spell_levels_btn.btn.btn-outline-primary{ /* your theme vars with Bootstrap fallbacks */ --btn-base-color: var(--primary); --btn-base-border: var(--primary, var(--bs-primary)); --btn-active-bg: var(--primary); /* pick your red or var(--bs-danger) */ --btn-active-color: var(--text-100); /* Bootstrap button variables */ --bs-btn-color: var(--btn-base-color); --bs-btn-border-color: var(--btn-base-border); --bs-btn-hover-color: var(--btn-active-color); --bs-btn-hover-bg: var(--btn-active-bg); --bs-btn-hover-border-color: var(--btn-active-bg); --bs-btn-active-color: var(--btn-active-color); --bs-btn-active-bg: var(--btn-active-bg); --bs-btn-active-border-color:var(--btn-active-bg); --bs-btn-disabled-color: var(--btn-base-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--btn-base-border); } /* When the dropdown is open, force the active look */ #spell_levels_btn[aria-expanded="true"]{ background-color: var(--btn-active-bg); color: var(--btn-active-color); border-color: var(--btn-active-bg); } .spell_badgeSchool { color: var(--primary); background-color: rgb(from var(--primary) r g b / .2); border-color: rgb(from var(--primary) r g b / .65); border-radius: 7px !important; font-weight: 300; font-size: .7rem; padding-left: 10px; padding-right: 10px; line-height: 1.15; height: 1.5rem; } .spell_badgeLevel { color: var(--primary); background-color: transparent; border-color: rgb(from var(--primary) r g b / .65); font-weight: 300; font-size: .7rem; border-radius: 7px !important; padding-left: 10px; padding-right: 10px; line-height: 1.15; height: 1.5rem; } .spell_badgeClass { display: inline-flex; align-items: center; gap: .35rem; width: 100px; font-weight: 300; font-size: 0.8rem; color: var(--text-700) !important; background-color: rgb(from var(--primary) r g b / 0.1) !important; border-color: rgb(from var(--primary) r g b / .35) !important; border-radius: 7px !important; } .spell_badgeClass .spell_classIcon { width: 1.5em; /* scales with text */ height: 1.5em; flex: 0 0 auto; vertical-align: -0.15em; color: var(--primary); } .spell_cellSource { color: var(--primary); font-size: 0.8rem; font-weight: 300; } /* Name block */ .spell_rowTitle { color: var(--text-700); font-weight: 500; line-height: 1.15; word-break: break-word; text-transform: capitalize; } .spell_title { color: var(--primary); font-weight: 600; font-size: 1.2rem; } .spell_badgeFlag { background: rgb(from var(--warning) r g b / .375); border-color: rgb(from var(--warning) r g b / 0.675); color: var(--text); font-weight: 300; border-radius: 7px !important; } .alert-warning { margin-top: 15px !important; background-color: rgb(from var(--warning) r g b / .375); border-color: rgb(from var(--warning) r g b / 0.675); color: var(--text); font-weight: 300; } .alert-warning i { color: var(--danger); font-size: 1.1rem; } .spell_detailQuick div>i { color: var(--primary); } .spell_detailQuick div>strong { color: var(--primary); } .spell_detailQuick div { color: var(--text); } .spell_detailDesc { color: var(--text); margin-right: 50px; margin-top: 25px !important; } .spell_detailBox { margin-left: 50px; margin-top: 10px; } .spell_meta dt{ font-weight:500; color: var(--primary); } .spell_meta dd{ margin-bottom:.25rem; margin-left: 25px; color: var(--text); } .spell_desc { color: var(--primary); } .spell_pager_top .btn-outline-primary { border-color: rgb(from var(--primary) r g b / 0.35); color: var(--primary); } .spell_pager_top .btn-outline-primary:hover { border-color: rgb(from var(--primary) r g b / 0.65); border-color: var(--primary); background-color: rgb(from var(--primary) r g b / 0.85); color: var(--text-50); } .spell_pager_bottom .btn-outline-primary { border-color: rgb(from var(--primary) r g b / 0.35); color: var(--primary); } .spell_pager_bottom .btn-outline-primary:hover { border-color: rgb(from var(--primary) r g b / 0.65); border-color: var(--primary); background-color: rgb(from var(--primary) r g b / 0.85); color: var(--text-50); } #collapseBtnBar { .btn-outline-primary { border-color: rgb(from var(--primary) r g b / 0.35); color: var(--primary); } .btn-outline-primary:hover { border-color: rgb(from var(--primary) r g b / 0.65); border-color: var(--primary); background-color: rgb(from var(--primary) r g b / 0.85); color: var(--text-50); } } .spellTableRow { /* background-color: rgb(from var(--primary) r g b / 0.15); */ border-bottom: 1px dotted rgb(from var(--primary) r g b / .375); padding-bottom: 4px; padding-top: 3px; } .spellTableRow-last { /* background-color: rgb(from var(--primary) r g b / 0.15); */ padding-top: 7px; } /* ends spellList block */ } /* Bookshelf */ /* ---------------------------------------------------------------------------------------------- */ .rndBooks_controls .form-group { margin-right: 24px; margin-bottom: 10px; } #rndBooks_filtersBox .form-group select { min-width: 200px; } #rndBooks_filtersBox .form-group select[size] { height: auto; } .rndBooks_sliderValues { font-size: .9rem; color: #6c757d; } /* Result cards */ .rndBooks_card + .rndBooks_card { margin-top: 12px; } .rndBooks_card .rndBooks_ribbons .badge { margin-left: 6px; } .rndBooks_valueLine { font-weight: 600; } .rndBooks_card details summary { cursor: pointer; } /* Sentience highlight */ .rndBooks_badgeSentient { display: inline-block; padding: 5px !important; border-radius: 5px !important; background: #f3e6ff; color: #6f42c1; border: 1px solid #e0c8ff; font-size: .85rem; margin-left: 6px; } /* Simple helper */ .rndBooks_hidden { display: none !important; } /* Meta counters */ .rndBooks_metaCounters { font-size: .95rem; color: #6c757d; } .rndBooks_metaCounters .rndBooks_sep { margin: 0 6px; color: #adb5bd; } /* Random Books UI — all selectors prefixed with rndBooks_ */ .rndBooks_wrap { background-color: var(--background); margin: 12px ;} /* Toolbar row */ .rndBooks_controls .form-group { margin-bottom: .75rem; } .rndBooks_toolbarRow { align-items: flex-end; } .rndBooks_toolbarRight { margin-left: auto; display: flex; align-items: center; gap: 12px; } #rndBooks_minGp, #rndBooks_maxGp { width: 140px; } .rndBooks_sliderValues { font-size: .9rem; color: #6c757d; min-width: 160px; } /* Filter row (3 equal columns) */ #rndBooks_filtersBox { margin-top: .5rem; } #rndBooks_filtersBox .form-group select { min-height: 220px; } #rndBooks_filtersBox .form-group label { font-weight: 600; } /* Accordion cards */ #rndBooks_accordion .rndBooks_card { border: 0; border-bottom: 1px dotted var(--primary); border-radius: 0; } .rndBooks_card:last-child { border-bottom: 1px dotted var(--primary); } /* Clickable header */ .rndBooks_accHeader { background: transparent; padding: 0; } .rndBooks_accToggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .85rem 0; text-decoration: none !important; color: inherit; } .rndBooks_accToggle:hover { text-decoration: none; color: inherit; } /* Header content */ .rndBooks_hTitle { font-weight: 400; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rndBooks_hMeta .fa, .rndBooks_hMeta .fas { opacity: .7; margin-right: 6px; } /* Body */ .rndBooks_body { padding: .25rem 0 1rem 0; } .rndBooks_valueLine { font-weight: 600; } /* Sentience badge (shown in body) */ .rndBooks_badgeSentient { display: inline-block; padding: 2px 6px; border-radius: 999px; background: #f3e6ff; color: #6f42c1; border: 1px solid #e0c8ff; font-size: .85rem; } /* Helpers */ .rndBooks_hidden { display: none !important; } /* Meta counters */ .rndBooks_metaCounters { font-size: .95rem; color: #6c757d; } .rndBooks_metaCounters .rndBooks_sep { margin: 0 6px; color: #adb5bd; } /* Container card for results */ .rndBooks_resultsCard { border: 0; } .rndBooks_resultsCard .card-body { padding: 0; } /* Keep bottom divider look for each book row */ #rndBooks_accordion .rndBooks_card { border: 0; border-bottom: 1pt dotted var(--primary); border-radius: 0; } .rndBooks_accHeader { background: transparent; padding: 0; } .rndBooks_accToggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.85rem 0; text-decoration:none!important; color:inherit; } .rndBooks_hMeta { display:flex; align-items:center; gap:16px; color: var(--text); font-size:.85rem; } /* Inline checks */ .rndBooks_inlineChecks { display:flex; align-items:center; gap:16px; } .rndBooks_resultsCard { padding: 20px; } #RandomBooks .tgl-btn { width: 80px; } #RandomBooks .rndBook_RndSwtch_checkbox{ display:flex; align-items:center; gap:.5rem; } #RandomBooks .rndBook_RndSwtch_switch_text{ white-space:nowrap; } #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn{ width: 70px; /* ↑ widen the switch */ height: 32px; /* ↑ height if needed */ } /* Keep the inner labels centered in the new size */ #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn::before, #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn::after{ line-height: 36px; /* match height */ font-size: 12px; /* readable at the larger size */ padding: 0 .5rem; white-space: nowrap; } #RandomBooks #rndBook_RndSwtch_roundToggleWrap{ gap: .5rem; flex-wrap: wrap; white-space: nowrap; } #RandomBooks .rndBook_RndSwtch_switch_text{ white-space: nowrap; } /* If you used the earlier size tweaks for the flip, keep them; optional recap: */ #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn{ width: 92px; height: 36px; /* or your preferred size */ } #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn::before, #RandomBooks .rndBook_RndSwtch_exoticCheck .tgl.tgl-flip + .tgl-btn::after{ line-height: 36px; font-size: 12px; padding: 0 .5rem; white-space: nowrap; } #RandomBooks { input { box-shadow: 0; outline: 0; } .range-slider { width: 300px; margin: auto; text-align: center; position: relative; height: 3.5em; } .range-slider svg, .range-slider input[type=range] { position: absolute; left: 0; bottom: 0; } input[type=number] { border: 1px solid #ddd; text-align: center; font-size: 1.6em; -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number]:invalid, input[type=number]:out-of-range { border: 2px solid #ff6347; } input[type=range] { -webkit-appearance: none; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: var(--background-500); } input[type=range]:focus::-ms-fill-lower { background: var(--background-500); } input[type=range]:focus::-ms-fill-upper { background: var(--background-500); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: var(--background-500); border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-webkit-slider-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid var(--primary); height: 18px; width: 18px; border-radius: 25px; background: rgb(from var(--background) r g b / 0.675); cursor: pointer; -webkit-appearance: none; margin-top: -7px; } input[type=range]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-moz-range-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid var(--primary); height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper { background: var(--primary); border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-ms-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } } #RandomBooks .range-slider > span{ display: flex; align-items: center; flex-wrap: wrap; justify-content: center; /* <-- centers the line */ text-align: center; /* centers the text inside */ gap: .35rem .5rem; width: 100%; margin-bottom: .35rem; } /* make the
force a full-width line break within flex */ #RandomBooks .range-slider > span br{ flex-basis: 100%; height: 0; content: ""; } /* compact numeric fields (keep your earlier tweaks) */ #RandomBooks .range-slider > span input[type="number"]{ width: 72px; height: 28px; padding: 2px 6px; font-size: .85rem; line-height: 1.2; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--text, #e6e6e6); outline: none; } /* add space between the Low input and the 'High:' label */ #RandomBooks .range-slider > span input[type="number"]:first-of-type{ margin-right: 12px; } /* === Responsive enhancements layered on top of your existing rules === */ /* Make container responsive (keep centered) */ #RandomBooks .range-slider{ width: 100%; /* was fixed 300px */ max-width: 420px; /* tweak as you like */ margin-left: auto; margin-right: auto; /* Responsive tokens */ --rs-input-w: 72px; /* number input width (base) */ --rs-input-h: 28px; /* number input height (base) */ --rs-thumb: 18px; /* thumb size (base) */ --rs-track-h: 5px; /* your current track height */ /* compute vertical offset so thumb centers on track */ --rs-offset-y: calc((var(--rs-track-h) - var(--rs-thumb)) / 2); } /* Use the tokens for your compact numeric fields */ #RandomBooks .range-slider > span input[type="number"]{ width: var(--rs-input-w); height: var(--rs-input-h); } /* Ensure the track height follows the token (keeps your background color) */ #RandomBooks input[type=range]::-webkit-slider-runnable-track{ height: var(--rs-track-h) !important; } #RandomBooks input[type=range]::-moz-range-track{ height: var(--rs-track-h) !important; } #RandomBooks input[type=range]::-ms-track{ height: var(--rs-track-h) !important; } /* Size and vertically align thumbs using tokens (preserves your colors/borders) */ #RandomBooks input[type=range]::-webkit-slider-thumb{ width: var(--rs-thumb) !important; height: var(--rs-thumb) !important; margin-top: calc((var(--rs-track-h) - var(--rs-thumb)) / 2) !important; /* WebKit centers via margin */ } #RandomBooks input[type=range]::-moz-range-thumb{ width: var(--rs-thumb) !important; height: var(--rs-thumb) !important; /* Firefox ignores margin-top on thumb; use translateY */ transform: translateY(var(--rs-offset-y)); } /* --- Breakpoints: scale inputs, thumb, and track --- */ /* Mobile */ @media (max-width: 575.98px){ #RandomBooks .range-slider{ --rs-input-w: 96px; --rs-input-h: 36px; --rs-thumb: 26px; --rs-track-h: 6px; } } /* Tablet */ @media (min-width: 576px) and (max-width: 991.98px){ #RandomBooks .range-slider{ --rs-input-w: 84px; --rs-input-h: 32px; --rs-thumb: 22px; --rs-track-h: 5px; } } /* Large / Desktop (tighten slightly) */ @media (min-width: 1200px){ #RandomBooks .range-slider{ --rs-input-w: 80px; --rs-input-h: 30px; --rs-thumb: 18px; --rs-track-h: 4px; /* a hair thinner on big screens */ } } /* Keep the Low/High row from wrapping by allowing inputs to shrink */ #RandomBooks .range-slider > span{ /* we still want the label line-break from your
*/ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* second line exists (after
) */ gap: .35rem .5rem; /* base gaps */ white-space: nowrap; /* keep "Low:" and "High:" on one line */ } /* Inputs honor a shrinkable basis and won’t force wrap */ #RandomBooks .range-slider > span input[type="number"]{ flex: 0 1 var(--rs-input-w); /* allow shrinking */ min-width: 48px; /* safety floor so it never gets tiny */ width: var(--rs-input-w); } /* Slight space after the Low value (can be reduced at tight widths) */ #RandomBooks .range-slider > span input[type="number"]:first-of-type{ margin-right: 12px; } /* ---------- targeted breakpoints to avoid the 1955px wrap ---------- */ /* First, reduce gaps a touch as space tightens */ @media (max-width: 2200px){ #RandomBooks .range-slider > span{ gap: .3rem .45rem; } } /* 2116px: narrow the inputs a bit so both stay on one line */ @media (max-width: 2116px){ #RandomBooks .range-slider{ --rs-input-w: 66px; } #RandomBooks .range-slider > span input[type="number"]:first-of-type{ margin-right: 10px; } } /* 2000px: trim a little more and tighten gaps */ @media (max-width: 2000px){ #RandomBooks .range-slider{ --rs-input-w: 60px; } #RandomBooks .range-slider > span{ gap: .26rem .38rem; } #RandomBooks .range-slider > span input[type="number"]:first-of-type{ margin-right: 8px; } } /* 1955px (your problem point): make sure they **stay** on one line */ @media (max-width: 1955px){ #RandomBooks .range-slider{ --rs-input-w: 56px; } #RandomBooks .range-slider > span{ gap: .22rem .32rem; } #RandomBooks .range-slider > span input[type="number"]{ padding: 1px 4px; } #RandomBooks .range-slider > span input[type="number"]:first-of-type{ margin-right: 6px; } } /* If the column gets even tighter later, keep shrinking gracefully */ @media (max-width: 1800px){ #RandomBooks .range-slider{ --rs-input-w: 52px; } } @media (max-width: 1680px){ #RandomBooks .range-slider{ --rs-input-w: 50px; } #RandomBooks .range-slider > span{ gap: .2rem .28rem; } } @-moz-document url-prefix() { #RandomBooks .range-slider { display: none !important; /* removes the whole widget (inputs + sliders + svg) */ } } /* Keep 3 columns at md+ without wrapping */ /* keep 3 columns at md+ */ @media (min-width: 768px){ #rndBooks_filtersBox .form-group { margin-right: 0 !important; } #rndBooks_filtersBox .form-group select { min-width: 0 !important; width: 100%; } } /* Responsive header stacking for book cards */ @media (max-width: 768px){ /* let the two header blocks wrap to a new line */ .rndBooks_accToggle > .d-flex { flex-wrap: wrap; } /* title goes full width on its own line and can wrap */ .rndBooks_hTitle{ flex: 0 0 100%; margin-bottom: .25rem; white-space: normal; /* override your nowrap */ overflow: visible; /* override hidden */ text-overflow: initial; /* override ellipsis */ } /* meta row goes under the title and can wrap across lines */ .rndBooks_hMeta{ flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; /* smaller gaps for mobile */ justify-content: flex-start; } } @media (max-width: 576px){ /* gentle font-size step-down on very small screens */ .rndBooks_hTitle{ font-size: 1rem; } .rndBooks_hMeta { font-size: .9rem; gap: 6px 10px; } } /* Optional: if ultra-narrow screens still clip long author/language combos, let individual pills wrap too */ @media (max-width: 360px){ .rndBooks_hMeta span{ white-space: normal; } } @media (max-width: 945px){ .rndBooks_pickButton { margin-top: 20px; } } @media (min-width: 768px){ .rndBooks_toolbarRow > .col-auto:first-child{ flex: 0 0 35%; max-width: 35%; box-sizing: border-box; } /* make sure the slider fills that column but doesn't overflow */ .rndBooks_toolbarRow > .col-auto:first-child .range-slider{ max-width: 100%; width: 100%; } /* button column stays auto; spacer .col takes the leftover space */ .rndBooks_toolbarRow .rndBooks_pickButton{ flex: 0 0 auto; } } @media (max-width: 767.98px){ .rndBooks_toolbarRow > .col-auto:first-child{ flex: 0 0 100%; max-width: 100%; } } .rndBooks_rangeTextSpan { color: var(--primary); font-size: 0.85rem; } .rndBooks_rangeTextResults { color: var(--primary-800); } .rndBooks_indent { margin: 20px; padding: 10px; border: 1px dotted rgb(from var(--primary) r g b / 0.5); } /* Badge row spacing */ .rndBooks_badgeRow .badge { margin-right: .35rem; margin-bottom: .25rem; } /* Neutralize default badge background to match your theme (optional) */ .rndBooks_badge { background: rgb(from var(--primary) r g b / 0.85); padding: 6px; padding-left: 12px; padding-right: 12px; color: var(--text-50); font-weight: 300; font-style: italic; } .rndBooks_badge i { opacity: .8; } /* Info table tweaks */ .rndBooks_infoTable th { font-weight: 600; vertical-align: top; } .rndBooks_infoTable td { white-space: normal; } .rndBooks_bookCardTitle { font-weight: 400; font-size: 1.1rem; color: var(--primary); width: 100%; border-bottom: 1px dotted var(--primary); margin-top: 15px; } .rndBooks_traitTitle { color: var(--primary) !important; font-weight: 400 !important; } .rndBooks_traitData { color: var(--text-800) !important; font-weight: 400 !important; font-size: 0.9rem; } .rndBooks_infoTable{ border-collapse: separate !important; /* override Bootstrap's collapse */ border-spacing: 0 .65rem; /* 0 = no col gap, .5rem = row gap */ } .rndBooks_infoTable th, .rndBooks_infoTable td{ padding-top: .5rem; padding-bottom: .5rem; margin-bottom: 5px !important; border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35) !important; } .rndBook_bookBodyDescr { color: var(--text-800); margin-left: 25px; margin-bottom: 25px !important; } .rndBooks_exportBar{ display: flex; justify-content: flex-end; /* right align */ align-items: center; margin-top: .75rem; /* space above the buttons */ margin-bottom: 0; /* flush with card bottom */ } .rndBooks_exportBar .btn-group .btn{ white-space: nowrap; /* keep labels tidy */ } .bookBadgeLegendary { margin-left: 15px; font-weight: 300; background-color: #dfa60a !important; color: var(--text) !important; } .bookBadgeMythic { margin-left: 15px; font-weight: 300; background-color: #0076d6 !important; color: var(--text-50) !important; } .bookBadgeUnique { margin-left: 15px; font-weight: 300; background-color: #007a33 !important; color: var(--text-50) !important; } .bookBadgeSentient { margin-left: 15px; font-weight: 300; background-color: #9a2bbc !important; color: var(--text-50) !important; } #rndBooks_accordion .rndBooks_accToggle{ /* Potions uses ~.30/.65 at ≥992px and ~.45/.75 below; do the same */ padding: .45rem .75rem; line-height: 1.5; min-height: 0; /* let content define height */ } /* Tighten on lg+ like Potions */ @media (min-width: 992px){ #rndBooks_accordion .rndBooks_accToggle{ padding: .30rem .65rem; } } /* Typography to match Potions header scale */ #rndBooks_accordion .rndBooks_hTitle{ font-size: .9rem; /* Potions header text size on lg+ */ font-weight: 400; /* optional: closer to .card-title feel */ } #rndBooks_accordion .rndBooks_hMeta{ font-size: .88rem; /* matches Potions secondary cols */ align-items: center; } /* If you show a chevron/icon on the right, keep it compact like Potions */ #rndBooks_accordion .rndBooks_accToggle .fa, #rndBooks_accordion .rndBooks_accToggle .fas{ font-size: .8rem; /* Potions shrinks chevron to ~.65rem bg-size */ margin-left: 10px; opacity: .85; } /* Keep the dotted divider vibe consistent with Potions */ #rndBooks_accordion .rndBooks_card .rndBooks_accHeader{ border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35); } /* Coinage */ /* ---------------------------------------------------------------------------------------------- */ .coin-price{ display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; } .coin-chunk{ display:inline-flex; gap:4px; align-items:center; } .coin-icon{ width:18px; height:18px; object-fit:contain; vertical-align:middle; } .coin-amt{ font-variant-numeric: tabular-nums; } .coin-unit{ margin-left:-2px; text-transform:uppercase; font-size:.75em; opacity:.85; } /* Random Store Generator */ /* ---------------------------------------------------------------------------------------------- */ .genStore_mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .9rem; } .genStore_sidebar { position: sticky; top: 1rem; } .genStore_mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .9rem; } .genStore_sidebar { position: sticky; top: 1rem; } .genStore_inventoryGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; } .genStore_labelMuted { color: var(--bs-secondary-color, #6c757d); font-size: .875rem; } .genStore_kv { display: flex; align-items: baseline; gap: .5rem; } .genStore_kv .k { color: var(--bs-secondary-color, #6c757d); min-width: 7rem; } .genStore_toggleBtn { width: 75px !important; } .genStore_invCount { width: 75px; min-width: 75px; max-width: 75px; margin-left: auto; /* push to the right inside the flex row */ text-align: right; /* numbers align to the right inside the input */ padding-right: .4rem;/* small breathing room for digits */ } /* Header is two rows: title on top, buttons below */ #genStore_headerBar { display: flex; flex-direction: column; gap: .25rem; } /* Buttons row: right-aligned, wraps gracefully */ .genStore_actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; } /* Keep button labels on one line */ .genStore_actions .genStore-btn { white-space: nowrap; } /* Busy state: hide buttons, show spinner */ .genStore_actions.is-busy .genStore_actionRow { display: none !important; } .genStore_actions.is-busy .genStore_loading { display: inline-flex !important; } /* sm: two-per-row, Generate full width */ @media (max-width: 767.98px) { .genStore_actions .genStore-btn { flex: 1 1 calc(50% - .5rem); } .genStore_actions .genStore-btn.genStore-btn-primary { flex: 1 1 100%; } } /* xs: each button full width */ @media (max-width: 575.98px) { .genStore_actions .genStore-btn { flex: 1 1 100%; } } /* Header is already stacked into two rows (title, then buttons) */ #genStore_headerBar { display: flex; flex-direction: column; gap: .25rem; /* enable container queries based on this row's inline size */ container-type: inline-size; } /* Base title size */ #genStore_storeName { line-height: 1.2; /* h4 default is fine; explicitly set if you want: */ font-size: 1.5rem; /* ~24px */ } /* When the title row is under 500px wide, shrink the font */ @container (max-width: 570px) { #genStore_storeName { font-size: 1.25rem; } /* ~20px */ } /* Extra step for very narrow containers */ @container (max-width: 380px) { #genStore_storeName { font-size: 1.125rem; } /* ~18px */ } /* (unchanged) Buttons row styles/spinner state */ .genStore_actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; } .genStore_actions .genStore-btn { white-space: nowrap; } .genStore_actions.is-busy .genStore_actionRow { display: none !important; } .genStore_actions.is-busy .genStore_loading { display: inline-flex !important; } /* Responsive wrapping (optional, keep as you had) */ @media (max-width: 767.98px) { .genStore_actions .genStore-btn { flex: 1 1 calc(50% - .5rem); } .genStore_actions .genStore-btn.genStore-btn-primary { flex: 1 1 100%; } } @media (max-width: 575.98px) { .genStore_actions .genStore-btn { flex: 1 1 100%; } } .genStore_actions .genStore-btn { white-space: nowrap; } .genStore_actions .btn, .genStore_actions .genStore-btn { display: inline-flex !important; /* fix cases where display: contents was used */ align-items: center; justify-content: center; padding: .25rem .5rem; /* keep your current size */ position: relative; /* raise above any accidental overlays */ z-index: 1; pointer-events: auto; cursor: pointer; white-space: nowrap; } /* Ensure inner content can't intercept the click */ .genStore_actions .btn * , .genStore_actions .genStore-btn * { pointer-events: none; } /* If you show a loading row, make sure it doesn't block clicks when visible/hidden */ .genStore_actions .genStore_loading { pointer-events: none; /* the spinner shouldn't block buttons */ } #genStore .card { background-color: rgb(from var(--background-50) r g b / 0.675); color: var(--primary); } #genStore .bg-body-tertiary { background-color: var(--background-100) !important; } #genStore .card-body { border-radius: 0.5rem; border-color: var(--background); padding: 1rem 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.08); font-size: 0.95rem; color: var(--text-700); } .genStore_badgeHeader { font-weight: 500; color: var(--background) !important; } #genStore .badge.bg-info { background-color: var(--primary-600) !important; color: var(--background-100) !important; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6em; line-height: 1; font-weight: 300; padding-left: 10px; padding-right: 10px; font-size: 0.85rem; } .genStore_headerTitles { color: var(--primary); padding-bottom: 20px; } .genStore_innkeepName { color: var(--primary-800); font-size: 1.1rem; } .genStore_employeeName { display: inline-block; } .genStore_itemCard{ display: flex; flex-direction: column; min-height: 100%; /* lets cards stretch evenly in the grid */ } .genStore_item_meta{ padding-top: 20px; margin-top: auto; /* <-- anchors to bottom inside flex column */ display: block; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; width: 100%; } .genStore_item_nameHeader { background-color: rgb(from var(--primary) r g b / 0.15); margin-left: -8px; margin-right: -8px; margin-top: -8px; } .genStore_item_name { font-size: 1.05rem; font-weight: 400; color: var(--primary); margin-left: 10px; } .genStore_item_desc { margin-top: 5px; font-weight: 300; font-size: .85rem; padding: 10px; color: var(--text); } .genStore_item_price { flex: 0 1; text-align: left; color: var(--text); } .genStore_item_stock { flex: 1 1; text-align: left; color: var(--text); margin-bottom: 10px; } .genStore_item_stockQuantity { color: var(--primary); } .genStore_item_price .coin-price{ display: inline-flex; flex-wrap: wrap; justify-content: flex-end; } .genStore_item_meta .coin-chunk { color: var(--primary); } .genStore_item_meta .coin-unit { color: var(--text); font-weight: 500; font-size: .7rem; } /* Optional: on very narrow cards, stack both lines left for readability */ @media (max-width: 576px){ .genStore_item_stock, .genStore_item_price{ flex: 1 1 100%; text-align: left; } .genStore_item_price .coin-price{ justify-content: flex-start; } } /* Random Name Generator */ /* ---------------------------------------------------------------------------------------------- */ #rndName_sexBtn > * { pointer-events: none; } /* tiny floating 'Copied!' bubble (namespaced) */ .rndName_copiedTip{ position:absolute; z-index:2000; background: rgba(25,25,25,.9); color:#fff; padding:4px 8px; border-radius:6px; font-size:12px; pointer-events:none; opacity:0; transform: translate(-50%, -100%) scale(.98); transition: opacity .12s ease, transform .18s ease; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .rndName_copiedTip.show{ opacity:1; transform: translate(-50%, -120%) scale(1); } /* Force list-group container to be block so columns can work */ #rndName_results.list-group { display: block !important; padding-left: 0; } /* 3 responsive columns */ #rndName_results{ column-gap: 1rem; -webkit-column-gap: 1rem; column-count: 1; -webkit-column-count: 1; } @media (min-width: 768px){ #rndName_results{ column-count: 2; -webkit-column-count: 2; } } @media (min-width: 1200px){ #rndName_results{ column-count: 3; -webkit-column-count: 3; } } /* Keep items intact within a column and add a little spacing */ #rndName_results .list-group-item{ break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: .5rem; border-radius: .375rem; } #rndName_results.list-group { display: block !important; padding-left: 0; background: transparent; } #rndName_results .list-group-item{ background-color: transparent !important; color: var(--text) !important; border: none; /* or keep a subtle border if you prefer */ margin-bottom: .5rem; /* pairs nicely with multi-column layout */ border-radius: .375rem; font-weight: 300; } #rndName .fw-semibold { font-weight: 300 !important; } /* Optional: a very soft hover so items feel clickable */ #rndName_results .list-group-item:hover{ background-color: rgba(0,0,0,.04); /* tweak if you have a dark theme */ } /* Ensure the little number badge doesn't clash with your palette */ .rndName_bg-secondary-subtle{ background-color: rgb(from var(--primary-700) r g b / .275) !important; border: 1px solid rgb(from var(--primary) r g b / .375); } .rndName_text-secondary-emphasis{ color: var(--text) !important; font-weight: 300; } /* Make the per-item Copy button match the text color */ #rndName_results [data-copy].btn{ color: var(--text); border-color: currentColor; } #rndName_results [data-copy].btn:hover{ background: var(--text); color: var(--bs-body-bg, #fff); } #rndName .btn-primary { background-color: var(--primary-700); border-color: var(--primary-700); } #rndName .btn-secondary { border-color: var(--background-500); background-color: var(--background-500); } #rndName .btn-secondary:hover{ border-color: var(--background-600); background-color: var(--background-600); } #rndName .btn-outline-secondary { border-color: var(--btn_primary); background-color: transparent; color: var(--text-900); } #rndName .card { background-color: rgb(from var(--background-50) r g b / 0.675); color: var(--primary); } #rndName .bg-body-tertiary { background-color: var(--background-100) !important; } #rndName { input[type=range] { box-sizing: border-box; font-size: 16px; line-height: 1; height: 2em; background-color: transparent; cursor: pointer; -webkit-appearance: none; width: 100%; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 2em; height: 2em; margin-top: -5; background-color: var(--primary); border-radius: 1em; border: 2px solid rgb(from var(--background-darker) r g b / .475); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 2em; height: 2em; margin-top: 0px; background-color: var(--primary); border-radius: 1em; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; transform: translateY(var(--bar-offset-y)); /* works; margins are ignored */ transform-origin: center; } input[type=range]::-ms-thumb { width: 2em; height: 2em; margin-top: -5; background-color: #16a085; border-radius: 1em; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; } input[type=range]:hover::-webkit-slider-thumb { border-color: rgba(255, 255, 255, 0.7); } input[type=range]:hover::-moz-range-thumb { border-color: rgba(255, 255, 255, 0.7); } input[type=range]:hover::-ms-thumb { border-color: rgba(255, 255, 255, 0.7); } input[type=range]:active::-webkit-slider-thumb { border-color: #ffffff; } input[type=range]:active::-moz-range-thumb { border-color: #ffffff; } input[type=range]:active::-ms-thumb { border-color: #ffffff; } } #rndName input[type=range]:focus, #rndName input[type=range]:focus-visible, #rndName .form-range:focus{ outline: none !important; box-shadow: none !important; } /* Firefox outer focus ring */ #rndName input[type=range]::-moz-focus-outer{ border: 0; } /* Nuke any thumb focus shadow/glow */ #rndName input[type=range]:focus::-webkit-slider-thumb{ box-shadow: none !important; outline: none !important; } #rndName input[type=range]:focus::-moz-range-thumb{ box-shadow: none !important; outline: none !important; } #rndName input[type=range]{ accent-color: var(--primary); } #rndName { --bar-offset-y: 5px; } #rndName input[type=range]::-webkit-slider-runnable-track{ height: 1em; border: 0; border-radius: 0; background: linear-gradient(var(--primary), var(--primary)) no-repeat; background-size: 100% 2px; background-position: 50% calc(50% + var(--bar-offset-y)); } /* Firefox */ #rndName input[type=range]::-moz-range-track{ height: 1em; border: 0; border-radius: 0; background: linear-gradient(var(--primary), var(--primary)) no-repeat; background-size: 100% 2px; background-position: 50% calc(50% + var(--bar-offset-y)); } .rndName_resultsHeader{ background-color: rgb(from var(--secondary-600) r g b / 0.6) !important; color: #fff; } .rndName_resultsHeader .badge{ background: rgba(255,255,255,.2); color:#fff; } .rndName_resultsHeader .btn svg, .rndName_resultsHeader .btn i{ color: inherit; } .rndName_resultBadge { background-color: var(--primary-700) !important; color: var(--background); font-weight: 300; } /* Random Inn Generator */ /* ---------------------------------------------------------------------------------------------- */ #rndInn_page .card { border-radius: 0.5rem; background-color: rgb(from var(--background-50) r g b / 0.675) !important; overflow: hidden; } #rndInn_page .card-body { background: transparent; } #rndInn_page .card-body { border-radius: 0.5rem; border-color: var(--background); padding: 1rem 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.08); font-size: 0.95rem; color: var(--text-700); } .rndInn_innName { color: var(--text); } #rndInn_page .badge.bg-info { background-color: var(--primary-600) !important; color: var(--background-100) !important; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6em; line-height: 1; font-weight: 300; padding-left: 10px; padding-right: 10px; font-size: 0.85rem; } #rndInn_page .badge.bg-secondary { background-color: var(--text-800) !important; color: var(--background-100) !important; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6em; line-height: 1; font-weight: 300; padding-left: 10px; padding-right: 10px; font-size: 0.85rem; margin-top: 5px; } .rndInn_badgeHeader { font-weight: 500; color: var(--background) !important; } #rndInn_page .rndInn-stats .card-body h4 { background-color: rgb(from var(--primary-600) r g b / .25); color: var(--primary-700); margin: -1rem -2rem 0.5rem; padding: 0.65rem 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; text-align: center; font-size: 0.85rem; } .rndInn_headerTitles { color: var(--primary); padding-bottom: 20px; } .rndInn_DetailHeader { color: var(--primary-800); padding-left: 25px; font-size: 1rem; } .rndInn_DetailText { color: var(--primary); padding-left: 35px; font-size: 0.825rem; } .rndInn_DetailText2 { color: var(--primary-500); padding-left: 35px; font-size: 0.825rem; } .rndInn_innkeepName { color: var(--primary-800); font-size: 1.1rem; } .rndInn_innkeepTraits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; } .rndInn_innkeepTraits dt { margin: 0; padding: 0.75rem 1rem; border-radius: 6px; font-weight: 300; color: var(--primary); } .rndInn_kv-entry { text-align: center; margin-bottom: 0.25rem; } .rndInn_kv-label { display: inline-block; min-width: 100px; font-weight: 500; color: var(--primary) !important; font-size: 1.05rem; } .rndInn_kv-value { color: var(--text) !important; } .rndInn_exoticLabel { display: inline-flex; font-size: 0.9rem; color: var(--text); } .rndInn_exoticCheck { display: inline-flex; position: relative; top: 11px; } .rndInn_innSecret { margin-left: 30px; color: var(--primary); font-size: 0.95rem; } .rndInn_innSecret2 { color: var(--primary-700); } .rndInn_patronList ul { } .rndInn_minusTop25 > span { flex: 1; } .rndInn_minusTop25 > span.text-muted { text-align: left; } .rndInn_minusTop25 > span.text-end { text-align: right; } .rndInn_offeringsList { color: var(--text); } .rndInn_offeringsList span { color: var(--primary) !important; } /* Base sign wrapper */ .rndInn_sign { display: inline-block; max-width: 480px; padding: 1rem 1.25rem; border-radius: 10px; line-height: 1.25; margin: .5rem 0; position: relative; user-select: none; box-sizing: border-box; text-align: center; font-weight: 600; } /* Size helpers */ .rndInn_sign--sm { max-width: 360px; font-size: .95rem; } .rndInn_sign--lg { max-width: 640px; font-size: 1.2rem; } /* Parchment */ .rndInn_sign--parchment { background: radial-gradient(120% 80% at 50% 20%, #fff7d6, #e6d3a3 60%, #d1b980 100%); color: #3b2a15; box-shadow: 0 1px 0 #c3ad7e inset, 0 0 0 2px #b7924d inset, 0 10px 18px rgba(0,0,0,.25); border-radius: 8px; } .rndInn_sign--parchment:before, .rndInn_sign--parchment:after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #a33; top: 8px; box-shadow: 0 1px 0 #711 inset, 0 1px 5px rgba(0,0,0,.4); } .rndInn_sign--parchment:before { left: 10px; } .rndInn_sign--parchment:after { right: 10px; } /* Woodboard / hanging shingle vibe */ .rndInn_sign--wood { background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 8px), linear-gradient(#7a5532, #6a4728 40%, #5b3d22); color: #f1e7d3; text-shadow: 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.4); box-shadow: 0 0 0 2px #3f2a17 inset, 0 12px 18px rgba(0,0,0,.35); } .rndInn_sign--wood:before, .rndInn_sign--wood:after{ content:""; position:absolute; top:-10px; width:14px; height:14px; border-radius:50%; background:#c9b07a; box-shadow:0 1px 0 #9a875e inset, 0 1px 4px rgba(0,0,0,.4); } .rndInn_sign--wood:before{ left:14px; } .rndInn_sign--wood:after{ right:14px; } /* Carved door (engraved) */ .rndInn_sign--carved { background: linear-gradient(#3e2a18, #2f2115); color: #d6bb8a; /* Engraved effect: light top-left, dark bottom-right */ text-shadow: 1px 1px 0 rgba(0,0,0,.65), -1px -1px 0 rgba(255,255,255,.08); box-shadow: 0 0 0 2px #1f150d inset, 0 10px 16px rgba(0,0,0,.35); letter-spacing: .5px; } /* Chalkboard */ .rndInn_sign--chalk { background: radial-gradient(150% 100% at 20% 20%, rgba(255,255,255,.04), transparent 60%), linear-gradient(#0f1414, #121a1a); color: #f4f4f4; font-family: "Georgia", "Times New Roman", serif; text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 0 2px rgba(255,255,255,.15); box-shadow: 0 0 0 2px #0b1010 inset, 0 10px 18px rgba(0,0,0,.35); border-radius: 6px; } /* Painted notice on door/plaster */ .rndInn_sign--paint { background: linear-gradient(#f6f6f6, #f0f0f0); color: #222; box-shadow: 0 0 0 2px #e2e2e2 inset, 0 12px 18px rgba(0,0,0,.2); border-radius: 6px; } .rndInn_sign--paint .rndInn_stroke { /* fake brush stroke edges */ display:inline; padding: 0 .15em; box-shadow: 0 -2px 0 rgba(200,0,0,.25) inset; } /* Metal plaque (bronze) */ .rndInn_sign--plaque { background: linear-gradient(180deg, #8a6a3d, #6f522c 40%, #845f36 75%, #4e3a22); color: #f2e7d6; text-shadow: 0 1px 0 rgba(0,0,0,.5); box-shadow: 0 0 0 2px #2c2114 inset, 0 10px 16px rgba(0,0,0,.4); } .rndInn_sign--plaque:before, .rndInn_sign--plaque:after { /* rivets */ content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#d5bf8b; top:8px; box-shadow: 0 1px 0 #9d8a5f inset, 0 1px 3px rgba(0,0,0,.4); } .rndInn_sign--plaque:before{ left:8px; } .rndInn_sign--plaque:after{ right:8px; } /* Text fit/format */ .rndInn_signText { display:block; word-wrap: break-word; } .rndInn_sign--fluid { display:block; width:100%; max-width:100%; } .rndInn_signTypeNarrative { color: var(--primary-700); font-size: 1.05em; font-weight: 600; } .rndInn_sign--fluid { display:block; width:100%; max-width:100%; } /* Right header actions alignment */ .rndInn_headerActions { margin-left: auto; } /* belt & suspenders with ms-auto */ .rndInn_headerActions .btn, .rndInn_headerActions .btn-group, .rndInn_headerActions .dropdown-toggle { align-self: center; } /* Keep the label text and toggle vertically centered */ .rndInn_exoticLabel { margin: 0 .25rem 0 0; line-height: 1; align-self: center; } /* The custom flip toggle tends to sit a few px low unless we flex it */ .rndInn_exoticCheck { display: inline-flex; align-items: center; } .rndInn_exoticCheck .tgl, .rndInn_exoticCheck .tgl-btn { vertical-align: middle; line-height: 1; /* If your toggle skin has extra top/bottom padding, uncomment the next line: */ /* transform: translateY(-1px); */ } /* Ensure the dropdown aligns to the right edge (already using .dropdown-menu-end) */ .rndInn_headerActions .dropdown-menu { right: 0; left: auto; } .rndInn_headerActions { align-items: center; } /* Toggle container participates in the same baseline */ .rndInn_exoticCheck { display: inline-flex; align-items: center; } .rndInn_exoticCheck { transform: translateY(-10px); } @media (max-width: 767.98px) { .rndInn_headerActions { align-items: flex-end; /* keep the block right-aligned */ gap: .5rem; } .rndInn_actionBtns { width: 100%; display: flex; flex-direction: column; /* stack */ align-items: stretch; /* full width buttons */ gap: .5rem; } .rndInn_actionBtns .btn, .rndInn_actionBtns .btn-group, .rndInn_actionBtns .dropdown-toggle { width: 100%; } /* Optional: if your -10px shim makes the toggle look high on mobile, reset it */ /* .rndInn_exoticCheck { transform: none !important; } */ } .rndInn_npcLeftMargin { margin-left: 25px; color: var(--text-900) !important; font-size: .9rem; } #innRumors_detailed .btn-link { color: var(--text-900) !important; } .rndInn_rumorSource { color: var(--text-800); margin-bottom: 15px; } .rndInn_rumorLocation { color: var(--text-800); margin-bottom: 15px; } .rndInn_rumorReward { font-size: .9rem; color: var(--primary) !important; line-height: 1.1rem; font-weight: 400; font-style: italic; margin-top: 20px; margin-bottom: 20px; } .rndInn_badgeDanger { line-height: 1.1rem; padding: 7px; } .rndInn_rumorTruth { line-height: 1.1rem; padding: 7px; margin-left: 5px; } .rndInn_rumorTruth { padding: 7px; } .rndInn_rumorLeads { margin-left: 5px; } .rndInn_rumorTags { margin-left: 5px; } .rndInn_rumorTagsLine { margin-left: 10px; } .rndInn_rumorTagsLine .badge { line-height: 1.1rem; background-color: var(--secondary) !important; color: var(--text-50); font-size: .9rem; font-weight: 400; } /* Align control group to the right and keep items centered */ .innMenu-controls { margin-left: auto; /* push to the right side */ gap: .5rem; /* spacing between toggle and button */ display: flex; align-items: center; } /* Ensure the toggle wrapper keeps the toggle vertically centered */ #rndInn_page .customCheckbox-wrapper-10.rndInn_exoticCheck { display: inline-flex; align-items: center; margin: 0; /* spacing handled by .innMenu-controls gap */ } /* Optional: slightly tighten regenerate button spacing on small screens */ @media (max-width: 480px) { .innMenu-controls { gap: .35rem; } .innMenu-controls .btn { padding: .25rem .5rem; font-size: .85rem; } } #rndInn_page .rndInn_roundPricesTgl .tgl.tgl-flip + .tgl-btn{ width: 70px; /* ↑ widen the switch */ height: 32px; /* ↑ height if needed */ } /* Keep the inner labels centered in the new size */ #rndInn_page .rndInn_roundPricesTgl .tgl.tgl-flip + .tgl-btn::before, #rndInn_page .rndInn_roundPricesTgl .tgl.tgl-flip + .tgl-btn::after{ line-height: 36px; /* match height */ font-size: 12px; /* readable at the larger size */ padding: 0 .5rem; white-space: nowrap; } #innMenuPanel .card { --bs-card-border-width: 0; /* BS5+: disables all card borders, including header/footer separators */ border: 0 !important; /* fallback/safety */ box-shadow: none; /* optional: if the card appears bordered via shadow */ } /* Extra safety: ensure sub-sections don’t reintroduce borders */ #innMenuPanel .card-header, #innMenuPanel .card-footer, #innMenuPanel .card-body, #innMenuPanel .card > .list-group, #innMenuPanel .list-group-item { border: 0 !important; } /* Optional: make headers/footers blend with the background */ #innMenuPanel .card-header, #innMenuPanel .card-footer { background-color: transparent; } #innMenuPanel .card > .card-header { border-bottom: 1px dotted rgb(from var(--primary) r g b / 0.35) !important; /* keep other sides off */ border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; background-color: transparent; /* optional */ } #innMenuPanel .card > .card-header strong{ font-weight: 500; color: var(--text-700); font-size: .95rem; margin-left: 15px; font-style: italic; } #innMenu_appetizers_content, #innMenu_entrees_content, #innMenu_soups_content, #innMenu_drinks_content, #innMenu_baked_content, #innMenu_smokes_content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: start; } /* Medium screens: 2 columns */ @media (max-width: 1300px) { #innMenu_appetizers_content, #innMenu_entrees_content, #innMenu_soups_content, #innMenu_drinks_content, #innMenu_baked_content, #innMenu_smokes_content { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Small screens: 1 column */ @media (max-width: 950px) { #innMenu_appetizers_content, #innMenu_entrees_content, #innMenu_soups_content, #innMenu_drinks_content, #innMenu_baked_content, #innMenu_smokes_content { grid-template-columns: 1fr; } } .innMenu_MenuItemBlock { display: flex; flex-direction: column; justify-content: flex-start; min-height: 110px; /* tweak as needed */ padding: 0.75rem; border: 1px solid rgb(from var(--primary) r g b / .175); border-radius: 6px; background-color: rgb(from var(--primary) r g b / .065); text-align: center; /* center text in each block */ max-width: 500px; } /* Name at the top */ .innMenu_menuItemName { display: block; font-weight: 600; margin: 0 0 0.35rem; } /* Description below name */ .innMenu_menuItemDescr { display: block; font-size: 0.92rem; margin: 0 0 0.6rem; font-size: 0.85rem; font-style: italic; color: var(--text); margin-left: 23%; margin-right: 23%; } /* Price anchored to the bottom of the box */ .innMenu_menuItemPrice { margin-top: auto; display:inline-flex; justify-content:center; gap:0.4rem; font-weight: 600; font-size: 0.95rem; color: var(--primary-700); } .innMenu_menuItemPricePlain { margin-top: auto; display:inline-flex; justify-content:center; gap:0.4rem; font-weight: 300; font-size: 0.95rem; color: var(--primary); } /* coin-price / coin-chunk styling (keeps icons small and aligned) */ #rndInn_page .coin-price { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; } #rndInn_page .coin-chunk { display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap; } #rndInn_page .coin-icon { width: 18px; height: auto; display: inline-block; vertical-align: middle; margin-right: 2px; } /* Small adjustments for very compact cards */ .innMenu_MenuItemBlock.small { padding: 0.5rem; min-height: 92px; } .innMenu_menuItemDescr.small { font-size: 0.85rem; } /* Optional hover effect */ .innMenu_MenuItemBlock:hover { box-shadow: 0 6px 12px rgb(from var(--primary) r g b / 0.125); border-color: rgb(from var(--primary) r g b / .475); background-color: rgb(from var(--primary) r g b / .0975) } /* Accessibility: ensure adequate contrast on small text */ @media (prefers-reduced-motion: reduce) { .innMenu_MenuItemBlock:hover { transform: none; transition: none; box-shadow: none; } } /* Center all text/content inside each menu item box */ .innMenu_MenuItemBlock { text-align: center; } #innMenu_appetizers_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_entrees_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_soups_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_drinks_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_baked_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_smokes_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1) { grid-column: 1 / -1; justify-self: center; width: min(640px, 66%); } /* For 2-col layout, use odd last-child behavior */ @media (max-width: 1300px) { #innMenu_appetizers_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_entrees_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_soups_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_drinks_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_baked_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_smokes_content .innMenu_MenuItemBlock:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(540px, 60%); } } /* Undo spanning on single-column layout */ @media (max-width: 950px) { #innMenu_appetizers_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_appetizers_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_entrees_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_entrees_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_soups_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_soups_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_drinks_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_drinks_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_baked_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_baked_content .innMenu_MenuItemBlock:last-child:nth-child(odd), #innMenu_smokes_content .innMenu_MenuItemBlock:last-child:nth-child(3n+1), #innMenu_smokes_content .innMenu_MenuItemBlock:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: 100%; } } .innMenu_menuItemNameSub { font-size: .9rem; color: var(--text-500); } .rndInn_spanShowLabel { color: var(--primary); margin-right: 10px; font-size: .85rem; } /* PC Background Panel */ /* ---------------------------------------------------------------------------------------------- */ /* Left menu container + items */ #showBackgroundPicker { .card { background: transparent !important; background-color: transparent !important; } .pcShowBg_bgMenu { max-height: 70vh; overflow: auto; } .pcShowBg_bgItem.active { background: var(--bs-light); border-left: 3px solid var(--bs-warning); } /* Title bar */ .pcShowBg_titleBar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; } /* Preserve line breaks in description */ .pcShowBg_desc { white-space: pre-line; color: var(--text) !important; } .pcShowBg_desc2 { color: var(--text) !important; } /* Traits/details table */ .pcShowBg_traitsTable { width:100%; border-collapse: collapse; table-layout: fixed; } .pcShowBg_traitsTable td { vertical-align: top; text-align: left; padding:.5rem .75rem; word-break: break-word; } .pcShowBg_traitTableHeader { font-weight:500; color: var(--primary-700); white-space: nowrap; padding-right:15px; width:34%; } .pcShowBg_traitTableData { width:66%; font-weight:400; color: var(--primary); } .pcShowBg_traitTableData2 { width:66%; font-weight:400; color: var(--primary-700); font-size: 0.85rem; } .pcShowBg_traitsTable tr + tr td { border-top: 1px dotted rgba(0,0,0,.12); } .pcShowBg_traitsTable2 tr + tr td { border-top: none; } /* Stack header then data below 1150px */ @media (max-width: 1150px) { .pcShowBg_traitsTable, .pcShowBg_traitsTable tbody, .pcShowBg_traitsTable tr, .pcShowBg_traitsTable td { display:block; width:100% !important; } .pcShowBg_traitsTable tr { padding:.5rem .75rem; border-bottom: 1px dotted rgba(0,0,0,.12); } .pcShowBg_traitTableHeader { padding:0 0 .25rem 0 !important; text-transform: uppercase; font-size:.85rem; letter-spacing:.02em; white-space: normal !important; } .pcShowBg_traitTableData { padding:0 0 .25rem 0 !important; } .pcShowBg_traitsTable tr + tr td { border-top: 0 !important; } } /* Transparent list group in our module */ #pcShowBg_bgMenu { --bs-list-group-bg: transparent; --bs-list-group-border-color: transparent; --bs-list-group-action-hover-bg: transparent; --bs-list-group-action-active-bg: transparent; } #pcShowBg_bgMenu .pcShowBg_bgItem { background-color: transparent !important; border: 0 !important; color: var(--primary); } #pcShowBg_bgMenu .pcShowBg_bgItem.active { background-color: rgb(from var(--primary) r g b / 0.25) !important; border-left: 3px solid var(--primary) !important; color: var(--primary-700) !important; font-weight: 400; } #pcShowBg_bgMenu .pcShowBg_bgItem:focus { box-shadow: none; /* optional: remove blue focus ring */ } /* Stack both columns at ≤1000px */ @media (max-width: 1000px) { .pcShowBg_col { flex: 0 0 100% !important; max-width: 100% !important; } #pcShowBg_listGroupWrap { display: none !important; } /* hide list on mobile */ #pcShowBg_bgSelect { display: block !important; } /* show select on mobile */ } /* Wide: show list; hide select */ @media (min-width: 1001px) { #pcShowBg_listGroupWrap { display: block !important; } #pcShowBg_bgSelect { display: none !important; } } .pcShowBg_title { color: var(--primary) !important; } .pcShowBg_FeyTrait { margin-top: 25px; margin-left: 25px; } .pcShowBg_hr { color: rgb(from var(--primary) r g b / .475); width: 80%; margin-top: 25px; margin-bottom: 25px; } #pcShowBg_bgMenu { max-height: none !important; overflow: visible !important; } #pcShowBg_listGroupWrap { max-height: none !important; overflow: visible !important; } .pcShowBg_card { background-color: rgb(from var(--background-50) r g b / 0.675) !important; } .pcShowBg_cardInfo { background-color: rgb(from var(--background-50) r g b / 0.675) !important; } } .pcShowBg_titleBar{display:flex;align-items:center;gap:.75rem} .pcShowBg_toolbar{margin-left:auto} @media print { .pcShowBg_pcPrint_page { padding: 16px; font: 12pt/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; } .pcShowBg_pcPrint_title { margin: 0 0 8px; font-size: 20pt; } .pcShowBg_pcPrint_desc { color: #333; margin: 8px 0 16px; white-space: pre-wrap; } .pcShowBg_pcPrint_hr { border: 0; border-top: 1px solid #999; margin: 16px 0; } .pcShowBg_traitsTable { width:100%; border-collapse: separate; border-spacing: 0 6px; } .pcShowBg_traitTableHeader { font-weight:600; vertical-align: top; width: 240px; } .pcShowBg_traitsTable tr { border-bottom: 1px dotted #bbb; } } /* PC Origins */ /* ---------------------------------------------------------------------------------------------- */ #pcOrigin { .card { background-color: rgb(from var(--background) r g b / 0.675); color: var(--text-800); } .bg-body-tertiary { background-color: rgb(from var(--background-700) r g b / 0.125) !important; } } .pcOrigin_hidden { display: none !important; } .pcOrigin_muted { color: #6c757d; } .pcOrigin_mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .pcOrigin_card-soft { border-radius: 1rem; box-shadow: 0 4px 18px rgba(0,0,0,.06); } .pcOrigin_stage-range { font-size: .9rem; color: var(--primary-700); } .pcOrigin_stage-desc { font-size: .9rem; color: var(--primary-500); } .pcOrigin_min-w-240 { min-width: 240px; } .pcOrigin_preline { white-space: pre-line; } .pcorigin_indent { margin-top: 15px; margin-left: 25px; } .pcorigin_indent strong { color: var(--text-700) !important; font-weight: 500; margin-right: 7px; } #bgReasonLine strong { color: var(--text-700) !important; font-weight: 500; border-bottom: 1px dotted rgb(from var(--text-700) r g b / 0.4); margin-right: 7px; } #classReasonLine strong { color: var(--text-700) !important; font-weight: 500; border-bottom: 1px dotted rgb(from var(--text-700) r g b / 0.4); margin-right: 7px; } #classReasonLine { margin-top: 20px !important; } .pcOrigin_you { display:inline-block; padding:2px 6px; border-radius:.375rem; background: rgb(from var(--background-700) r g b / 0.85); font-weight:500; color: var(--text-100); } .pcOrigin_hideText { display: none; } .pcOrigin_printHeader { font-size:1.5rem; font-weight:600; margin-bottom:.25rem } .pcOrigin_printSub { color:#6c757d; font-size:.9rem; margin-bottom:1rem } .pcOrigin_printGrid { display:grid; grid-template-columns:1fr; gap:12px } @media (min-width:768px) { .pcOrigin_printGrid { grid-template-columns:1fr 1fr } } .pcOrigin_printCard { border:1px solid rgba(0,0,0,.125); border-radius:.5rem; padding:1rem; background:#fff; page-break-inside:avoid } .pcOrigin_printTitle { font-weight:600; text-transform:uppercase; font-size:.8rem; color:#6c757d; margin-bottom:.25rem } .pcOrigin_printBody { white-space:pre-line; font-size:1rem } .pcOrigin_printKVs { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem } .pcOrigin_screenOnly { display:block } .pcOrigin_printOnly { display:none } .pcorigin-cardHeader { color: var(--primary-700) !important; font-size: 1em; font-weight: 600; } .pcorigin-cardHeader2 { color: var(--text-800) !important; font-size: 1em; font-weight: 500; } .pcorigin_sectionHeader { color: var(--primary-700) !important; } @media print{ body *{ display:none !important; } #pcOrigin_printView, #pcOrigin_printView *{ display:block !important; } #pcOrigin_printView{ margin:0; padding:0; max-width:100%; } .pcOrigin_printGrid{ display:block !important; } /* single column */ .pcOrigin_printCard{ break-inside:auto; page-break-inside:auto; overflow:visible; } @page{ size:auto; margin:12mm; } } #pcOrigin .btn-primary { background-color: var(--primary-700); border-color: var(--primary-700); } #pcOrigin .btn-secondary { border-color: var(--background-500); background-color: var(--background-500); } #pcOrigin .btn-outline-secondary { border-color: var(--btn_primary-accent); background-color: rgb(from var(--btn_primary-accent) r g b / 0.5); color: var(--text-900); } #pcOrigin .btn-check:checked + .btn { background-color: var(--btn_primary); color: var(--background); } .pcorigin_traitTableHeader { color: var(--text-700) !important; font-weight: 500; } .pcorigin_traitTableData { color: var(--primary) !important; } /* Base: stacks naturally; ensure top-aligned & tidy */ .pcorigin_traitsList { margin: 0; } .pcorigin_traitsList dt { color: var(--text-700) !important; font-weight: 500; margin-top: .75rem; text-transform: none; } .pcorigin_traitsList dd { margin: .25rem 0 0 0; } /* Wide screens: line up as two columns */ @media (min-width: 1151px) { .pcorigin_traitsList { display: grid; grid-template-columns: 25% 1fr; column-gap: 15px; } .pcorigin_traitsList dt, .pcorigin_traitsList dd { margin: 0; padding: .25rem .25rem; } .pcorigin_traitsList dt { white-space: nowrap; } .pcorigin_traitsList dt:nth-of-type(n+2), .pcorigin_traitsList dd:nth-of-type(n+2) { border-top: 1px dotted rgb(from var(--primary-400) r g b / 0.1) } } /* Races */ /* ---------------------------------------------------------------------------------------------- */ .species_card-custom { overflow: hidden; min-height: 450px; box-shadow: 0 0 15px rgb(from var(--primary-400) r g b / 0.3); background-color: var(--background); max-width: 600px; min-width: 300px; } .species_card-title { background-color: var(--background-300); width: 100%; font-family: "Faculty Glyphic", sans-serif; font-size: 1.25em; color: var(--text-700); border: 1px solid var(--primary); border-radius: 15px 15px 15px 15px; line-height: 1.5em; text-align: center; } .species_card-text { width: 100%; font-family: "Faculty Glyphic", sans-serif; font-size: 0.85em; color: var(--text-800); } .species_card-custom-img { height: 200px; min-height: 200px; background-repeat: no-repeat; background-size: cover; background-position: center; border-color: inherit; background-color: #000000; border: 1px solid var(--primary-700); } /* First border-left-width setting is a fallback */ .species_card-custom-img::after { position: absolute; content: ''; top: 161px; left: 0; width: 0; height: 0; border-style: solid; border-top-width: 40px; border-right-width: 0; border-bottom-width: 0; border-left-width: 545px; border-left-width: calc(575px - 5vw); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: var(--background); } .species_card-custom-avatar img { border-radius: 50%; box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); position: absolute; top: 100px; left: 1.25rem; width: 100px; height: 100px; background-color: var(--background); border: 5px solid var(--background-200); } .species_cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; } .species_card-footer-border { border-color: #999B9B85 !important; border-top: 1px dotted; } .species_stat-badge { border-radius: 7px !important; height: 24px; font-weight: 300; font-size: 0.675em; width: 100%; display: flex; align-items: center; justify-content: center; } .species_stat-badge_size { background-color: var(--btn_secondary); border-color: var(--btn_secondary-accent); color: var(--background-100); } .species_stat-badge_life { background-color: var(--btn_info); border-color: var(--btn_info-accent); color: var(--background-100); } .species_stat-badge_playable { background-color: var(--btn_success); border-color: var(--btn_success-accent); color: var(--background-100); } .species_stat-badge_nonplayable { background-color: var(--btn_danger); border-color: var(--btn_danger-accent); color: var(--background-100); } #species_gridWrap { position: relative; } .species_race-overlay { position: absolute; top: 10px !important; inset:15px; z-index:30; opacity:0; pointer-events:none; transition:opacity .2s ease; background-color: rgb(from var(--background) r g b / 0.5); } .species_race-overlay.show { opacity:1; pointer-events:auto; } .species_race-overlay-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(2px); } .species_race-overlay-panel { position:relative; width:100%; height: 100%; background-color:rgb(from var(--background) r g b / 0.9) !important; background:#fff; border-radius:0rem; box-shadow:0 1rem 2rem rgba(0,0,0,.2); border: 3px solid var(--background-400); overflow-y: auto; } .species_race-overlay .btn-close { position:absolute; right:.75rem; top:.75rem; z-index:2; } .species_overlay-imagewrapper { background: white; width: 100%; height: 480px; position: relative; overflow: hidden; border-radius: 0px !important; } .species_overlay-image-bg { position: absolute; inset: 0; background-repeat: no-repeat; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; } .species_overlay-blur-bg { position: absolute; left: -25px; right: -25px; top: -25px; bottom: -25px; background-color: white; -webkit-filter: blur(15px); -moz-filter: blur(15px); filter: blur(15px); transform: scale(2); background-size: contain; background-repeat: no-repeat; background-position: center; } .species_overlay-close { /* border: 1px solid #ffffff !important; */ } .species_race-header { color: #ffffff; padding: 1.5rem; text-align: center; font-size: 3rem; } .species_ov_title { color: var(--primary); } .species_ov_sourceText { font-size: 0.85rem; color: var(--primary-800); } .species_traits h5, .species_long-description h5 { color: #b0c4de; } .species_traits p { margin-bottom: 0.5rem; color: var(--primary-900); } .species_long-description { font-size: 0.95rem; line-height: 1.6; color: #cccccc; } .species_info-card { background: transparent !important; } .species-padding-left { padding-left: 15px; } .species_info-card-headers { width: 100%; height: 40px; line-height: 40px; position: relative; margin-top: auto; margin-bottom: auto; border-bottom: 1px dotted rgb(from var(--primary-400) r g b / 0.6); color: var(--primary-700); } .species_info-card-data { min-height: 30px; position: relative; margin-top: auto; margin-bottom: auto; padding-left: 35px; padding-right: 5px; padding-bottom: 5px; padding-top: 5px; font-weight: 300; font-size: 1rem; line-height: 1.75rem; font-family: "Nunito Sans"; color: var(--primary-900); } .species_info-card h6 { font-weight: 550; margin-bottom: 0.25rem; color: var(--primary-700); } .species_info-card h5 { font-weight: 550; margin-bottom: 0.25rem; color: var(--primary-700); } .species-border-right { border-right: 1px solid rgb(from var(--primary-400) r g b / 0.35); } .species_info-card p { margin-bottom: 0; color: var(--primary-900); } #races .card { width: 100%; border: none; border-radius: 0.5rem; box-shadow: 0 4px 12px rgb(from var(--background-900) r g b / 0.6); } #races .btn-primary { background-color: var(--primary-700); border-color: var(--primary-700); } #races .btn-secondary { border-color: var(--background-500); background-color: var(--background-500); } #races .btn-outline-secondary { border-color: var(--btn_primary); color: var(--primary); } #races .btn-check:checked + .btn { background-color: var(--btn_primary); color: var(--background); } #reset.btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); background-color: transparent; } /* Hover state */ #reset.btn-outline-secondary:hover { color: #fff; background-color: var(--btn_warning); border-color: var(--btn_warning-accent); } /* Active (pressed) state */ #reset.btn-outline-secondary:active { color: #fff; background-color: var(--secondary-accent); border-color: var(--secondary-accent); box-shadow: 0 0 0 .2rem rgba(154, 126, 73, .25); } #reset.btn-outline-secondary:focus { color: var(--secondary); background-color: transparent; border-color: var(--secondary); box-shadow: none; } .raceOverlayModal { align-items: center; margin-top: 200px; } .species_check_success { color: var(--btn_success); margin-right: 5px; } .species_check_fail { color: var(--btn_danger); margin-right: 5px; } .species_ld_header { margin-top: 25px; font-weight: 500; font-size: 1.1rem; color: var(--primary); font-family: "Faculty Glyphic", sans-serif; margin-left: -15px; } .species_ld_text { color: var(--primary-900); margin-top: 15px; font-size: 1rem; line-height: 1.75rem; } /* Equipment Tables */ /* ---------------------------------------------------------------------------------------------- */ #equipTables .btn-primary { background-color: var(--primary-700); border-color: var(--primary-700); } #equipTables .btn-secondary { border-color: var(--background-500); background-color: var(--background-500); } #equipTables .btn-outline-secondary { border-color: var(--btn_primary-accent); background-color: rgb(from var(--btn_primary-accent) r g b / 0.5); color: var(--text-900); } #equipTables .btn-check:checked + .btn { background-color: var(--btn_primary); color: var(--background); } /* Equipment Tables */ #equipTables { /* container-specific tweaks if needed */ } /* Utility: flex row for little control groups */ #equipTables .equipTables_flex { display:flex; align-items:center; gap:.5rem; } /* Utility: compact checkbox alignment when a checkbox gets a class applied */ #equipTables .equipTables_checkbox { vertical-align:middle; margin-right:.35rem; } /* Utility: clamp long names/descriptions to 2 lines */ #equipTables .equipTables_truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; max-width:100%; } #equipTables table.table { border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); background-color: var(--background); color: var(--text-900); } #equipTables thead th { background: linear-gradient(0deg, var(--background-200), var(--background-100)); color: var(--primary-800); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 1; } #equipTables tbody tr { border-bottom: 1px dotted rgba(0,0,0,.08); } #equipTables tbody tr.item-row:hover { background-color: rgb(from var(--btn_light) r g b / 0.35); } #equipTables tbody tr.details-row:hover { background: none; } #equipTables .form-control, #equipTables .form-select { background-color: var(--background-50); border-color: var(--background-400); color: var(--text-900); } #equipTables .form-control:focus, #equipTables .form-select:focus { border-color: var(--btn_primary-accent); box-shadow: 0 0 0 .2rem rgb(from var(--btn_primary-accent) r g b / .25); } /* Soft stat badges */ #equipTables .equipTables_badge { display:inline-block; padding:.15rem .45rem; border-radius:.5rem; background: rgb(from var(--btn_info) r g b / .2); border: 1px solid var(--btn_info-accent); font-size:.8rem; font-weight:500; } /* Hide Low/High Price columns below 1100px */ @media (max-width: 1100px) { #equipTables th.lowPrice, #equipTables td.lowPrice, #equipTables th.highPrice, #equipTables td.highPrice { display: none; } } /* Collapsible details row */ #equipTables .details-row[hidden] { display: none; } #equipTables .equipTables_detailsPanel { padding: .75rem 1rem; border-left: 3px solid var(--primary-400); background: rgb(from var(--background-50) r g b / .8); border-radius: .25rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); } /* Tiny chevron button */ #equipTables .row-toggle { line-height: 1; padding: .15rem .35rem; font-size: 1.25rem; margin-right: .4rem; color: var(--primary); } @media (max-width: 1099.98px) { #equipTables th.lowPrice, #equipTables td.lowPrice, #equipTables th.highPrice, #equipTables td.highPrice { display: none; } } #equipTables .equipTables_detailsPanel { padding: .75rem 1rem; border-left: 3px solid var(--primary-400); background: rgb(from var(--background) r g b / .875); border-radius: .25rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); margin-left: 2.5rem; } #equipTables table.table.table-hover tbody tr.item-row:hover, #equipTables table.table.table-hover tbody tr.item-row:hover > td { background-color: rgb(from var(--background) r g b / 0.05) !important; } #equipTables table.table.table-hover tbody tr.details-row { --bs-table-hover-bg: transparent; } /* Toggle switch (themed) */ #equipTables .equipTables_switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; } #equipTables .equipTables_switch_text { font-size: .95rem; line-height: 1.2; color: var(--text-900); } #equipTables .equipTables_switch_input { position: absolute; opacity: 0; width: 0; height: 0; } /* Track */ #equipTables .equipTables_switch_track { position: relative; width: 54px; height: 30px; border-radius: 1px; background: var(--background-400); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); transition: background .2s ease; } /* Thumb */ #equipTables .equipTables_switch_thumb { position: absolute; top: 50%; left: 3px; width: 24px; height: 24px; border-radius: 10%; background: var(--background); box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: translateY(-50%); transition: left .22s cubic-bezier(.35,.9,.3,1.3), box-shadow .2s; } /* ON state */ #equipTables .equipTables_switch_input:checked + .equipTables_switch_track { background: var(--btn_primary); box-shadow: inset 0 2px 6px rgb(0 0 0 / .08); } #equipTables .equipTables_switch_input:checked + .equipTables_switch_track .equipTables_switch_thumb { left: calc(100% - 3px - 24px); } /* Focus ring for accessibility */ #equipTables .equipTables_switch_input:focus-visible + .equipTables_switch_track { outline: 2px solid var(--btn_primary-accent); outline-offset: 2px; } /* Prefer reduced motion */ @media (prefers-reduced-motion: reduce) { #equipTables .equipTables_switch_track, #equipTables .equipTables_switch_thumb { transition: none; } } .equipTables_coin { width: 28px; margin-right: 7px; } .equipTables_coinSection { margin-right: 25px; display: inline-block; } #equipTables .details-row[hidden] { display: none; } #equipTables .equipTables_collapse { overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease; } .equipTables_detailsPanel strong { color: var(--primary); font-weight: 400; font-size: 1rem; } @media (prefers-reduced-motion: reduce) { #equipTables .equipTables_collapse { transition: none; } } #equipTables table.equipDetailsTable, #equipTables table.equipDetailsCoin { width: 95%; margin: 0 auto; border-collapse: separate; table-layout: fixed; background: transparent !important; border: 0 !important; box-shadow: none !important; --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; --bs-table-border-color: transparent; } #equipTables table.equipDetailsTable th, #equipTables table.equipDetailsTable td, #equipTables table.equipDetailsCoin th, #equipTables table.equipDetailsCoin td { text-align: center; vertical-align: middle; padding: .5rem .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent !important; border: 0 !important; } /* Header look */ #equipTables table.equipDetailsTable thead th, #equipTables table.equipDetailsCoin thead th { position: static !important; /* cancel sticky/gradients */ box-shadow: none !important; border-bottom: 1px dotted color-mix(in srgb, var(--primary) 90%, transparent); color: var(--text); font-weight: 500; font-size: 1rem; } #equipTables table.equipDetailsTable col { width: calc(100% / 3); } #equipTables table.equipDetailsCoin.table-hover tbody tr:hover > *, #equipTables table.equipDetailsTable.table-hover tbody tr:hover > * { background-color: transparent !important; } #equipTables table.equipDetailsCoin.table-striped > tbody > tr:nth-of-type(odd) > *, #equipTables table.equipDetailsTable.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; } #equipTables .nowrap { white-space: nowrap !important; } /* ========================= Desktop tweaks ========================= */ @media (min-width: 1000px) { #equipTables table.equipDetailsCoin tr { display: grid; grid-template-columns: 1fr auto; /* label | value */ gap: .25rem .75rem; } #equipTables table.equipDetailsCoin th, #equipTables table.equipDetailsCoin td { display: block; white-space: nowrap; } } /* ========================= Mobile stacking (<1000px) ========================= */ @media (max-width: 1000px) { #equipTables table.equipDetailsTable thead, #equipTables table.equipDetailsCoin thead { position: absolute; left: -9999px; top: -9999px; } #equipTables table.equipDetailsTable, #equipTables table.equipDetailsTable tbody, #equipTables table.equipDetailsTable tr, #equipTables table.equipDetailsTable td, #equipTables table.equipDetailsCoin, #equipTables table.equipDetailsCoin tbody, #equipTables table.equipDetailsCoin tr, #equipTables table.equipDetailsCoin td { display: block; width: 100%; } #equipTables table.equipDetailsTable tr, #equipTables table.equipDetailsCoin tr { margin-bottom: .75rem; } /* Data-labels (inline style) */ #equipTables .equipDetailsTable, #equipTables .equipDetailsCoin { --label-width: 10ch; --label-color: var(--primary); } #equipTables .equipDetailsTable td, #equipTables .equipDetailsCoin td { position: relative; white-space: normal; padding-left: calc(var(--label-width) + .75rem); } #equipTables .equipDetailsTable td::before, #equipTables .equipDetailsCoin td::before { content: attr(data-label) ":"; position: absolute; left: .75rem; top: .5rem; min-width: var(--label-width); letter-spacing: .02em; font-weight: 300; white-space: nowrap; } } @media (min-width: 1000px) { #equipTables table.equipDetailsCoin { table-layout: auto; width: 95%; } #equipTables table.equipDetailsCoin { display: table; } #equipTables table.equipDetailsCoin thead { display: table-header-group; } #equipTables table.equipDetailsCoin tbody { display: table-row-group; } #equipTables table.equipDetailsCoin tr { display: table-row; } #equipTables table.equipDetailsCoin th, #equipTables table.equipDetailsCoin td { display: table-cell; } #equipTables table.equipDetailsCoin thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ===== Mobile (<1000px): stack rows and show data-labels ===== */ @media (max-width: 1000px) { #equipTables table.equipDetailsCoin thead { position: absolute; left: -9999px; top: -9999px; } #equipTables table.equipDetailsCoin, #equipTables table.equipDetailsCoin tbody, #equipTables table.equipDetailsCoin tr, #equipTables table.equipDetailsCoin td { display: block; width: 100%; } #equipTables table.equipDetailsCoin tr { margin-bottom: .75rem; } #equipTables table.equipDetailsCoin td { position: relative; padding-left: 8ch; white-space: normal; } #equipTables table.equipDetailsCoin td::before { content: attr(data-label); position: absolute; left: .75rem; top: .5rem; font-weight: 300; } } @media (max-width: 680px) { /* apply to BOTH tables; */ #equipTables .equipDetailsTable td, #equipTables .equipDetailsCoin td { /* remove left gutter used by inline labels */ padding-left: .75rem; white-space: normal; /* allow value to wrap */ overflow-wrap: anywhere; /* break long tokens */ word-break: break-word; /* legacy fallback */ } #equipTables .equipDetailsTable td::before, #equipTables .equipDetailsCoin td::before { content: attr(data-label); /* label without trailing colon, or add ":" if you like */ position: static; /* no absolute positioning */ display: block; /* put label on its own line */ margin: .25rem 0 .125rem; /* space between label and value */ font-size: .85rem; font-weight: 300; white-space: nowrap; /* keep the label itself on one line */ } } @media (min-width: 680px) and (max-width: 1000px) { #equipTables .equipDetailsTable, #equipTables .equipDetailsCoin { --label-width: clamp(8ch, 28vw, 14ch); } } /* Force stacked labels for equipDetailsCoin below 580px */ @media (max-width: 680px) { #equipTables table.equipDetailsCoin td { padding-left: .75rem !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } #equipTables table.equipDetailsCoin td::before { /* stack label above value */ content: attr(data-label); position: static !important; display: block !important; margin: .25rem 0 .125rem; font-size: .85rem; font-weight: 300; min-width: 0; left: auto; top: auto; white-space: nowrap; } } /* Make table + rows transparent */ #equipTables table.table { background: #ffffff85 !important; } #equipTables table.table tbody tr, #equipTables table.table tbody tr > * { background-color: transparent !important; } /* Bootstrap 5: kill stripe/hover via CSS vars */ #equipTables .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent !important; } #equipTables .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent !important; background-color: transparent !important; /* extra belt */ } /* Bootstrap 3/4 fallback (in case you’re mixing) */ #equipTables .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent !important; } #equipTables .table-hover > tbody > tr:hover { background-color: transparent !important; } /* Optional: subtle borders that work on transparent bg */ #equipTables .table td, #equipTables .table th { border-color: rgba(255,255,255,.12); /* tweak for your theme */ } #equipTables { input { box-shadow: 0; outline: 0; } .range-slider { width: 300px; margin: auto; text-align: center; position: relative; height: 6em; } .range-slider svg, .range-slider input[type=range] { position: absolute; left: 0; bottom: 0; } input[type=number] { border: 1px solid #ddd; text-align: center; font-size: 1.6em; -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number]:invalid, input[type=number]:out-of-range { border: 2px solid #ff6347; } input[type=range] { -webkit-appearance: none; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: var(--background-500); } input[type=range]:focus::-ms-fill-lower { background: var(--background-500); } input[type=range]:focus::-ms-fill-upper { background: var(--background-500); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: var(--background-500); border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-webkit-slider-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid var(--primary); height: 18px; width: 18px; border-radius: 25px; background: rgb(from var(--background) r g b / 0.675); cursor: pointer; -webkit-appearance: none; margin-top: -7px; } input[type=range]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-moz-range-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid var(--primary); height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper { background: var(--primary); border-radius: 1px; box-shadow: none; border: 0; } input[type=range]::-ms-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } } #equipTables .range-slider > span{ display: flex; align-items: center; flex-wrap: wrap; justify-content: center; /* <-- centers the line */ text-align: center; /* centers the text inside */ gap: .35rem .5rem; width: 100%; margin-bottom: .35rem; } /* make the
force a full-width line break within flex */ #equipTables .range-slider > span br{ flex-basis: 100%; height: 0; content: ""; } /* compact numeric fields (keep your earlier tweaks) */ #equipTables .range-slider > span input[type="number"]{ width: 72px; height: 28px; padding: 2px 6px; font-size: .85rem; line-height: 1.2; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--text, #e6e6e6); outline: none; } /* add space between the Low input and the 'High:' label */ #equipTables .range-slider > span input[type="number"]:first-of-type{ margin-right: 12px; } /* === Responsive enhancements layered on top of your existing rules === */ /* Make container responsive (keep centered) */ #equipTables .range-slider{ width: 100%; /* was fixed 300px */ max-width: 420px; /* tweak as you like */ margin-left: auto; margin-right: auto; /* Responsive tokens */ --rs-input-w: 72px; /* number input width (base) */ --rs-input-h: 28px; /* number input height (base) */ --rs-thumb: 18px; /* thumb size (base) */ --rs-track-h: 5px; /* your current track height */ /* compute vertical offset so thumb centers on track */ --rs-offset-y: calc((var(--rs-track-h) - var(--rs-thumb)) / 2); } /* Use the tokens for your compact numeric fields */ #equipTables .range-slider > span input[type="number"]{ width: var(--rs-input-w); height: var(--rs-input-h); } /* Ensure the track height follows the token (keeps your background color) */ #equipTables input[type=range]::-webkit-slider-runnable-track{ height: var(--rs-track-h) !important; } #equipTables input[type=range]::-moz-range-track{ height: var(--rs-track-h) !important; } #equipTables input[type=range]::-ms-track{ height: var(--rs-track-h) !important; } /* Size and vertically align thumbs using tokens (preserves your colors/borders) */ #equipTables input[type=range]::-webkit-slider-thumb{ width: var(--rs-thumb) !important; height: var(--rs-thumb) !important; margin-top: calc((var(--rs-track-h) - var(--rs-thumb)) / 2) !important; /* WebKit centers via margin */ } #equipTables input[type=range]::-moz-range-thumb{ width: var(--rs-thumb) !important; height: var(--rs-thumb) !important; /* Firefox ignores margin-top on thumb; use translateY */ transform: translateY(var(--rs-offset-y)); } /* --- Breakpoints: scale inputs, thumb, and track --- */ /* Mobile */ @media (max-width: 575.98px){ #equipTables .range-slider{ --rs-input-w: 96px; --rs-input-h: 36px; --rs-thumb: 26px; --rs-track-h: 6px; } } /* Tablet */ @media (min-width: 576px) and (max-width: 991.98px){ #equipTables .range-slider{ --rs-input-w: 84px; --rs-input-h: 32px; --rs-thumb: 22px; --rs-track-h: 5px; } } /* Large / Desktop (tighten slightly) */ @media (min-width: 1200px){ #equipTables .range-slider{ --rs-input-w: 80px; --rs-input-h: 30px; --rs-thumb: 18px; --rs-track-h: 4px; /* a hair thinner on big screens */ } } /* Keep the Low/High row from wrapping by allowing inputs to shrink */ #equipTables .range-slider > span{ /* we still want the label line-break from your
*/ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* second line exists (after
) */ gap: .35rem .5rem; /* base gaps */ white-space: nowrap; /* keep "Low:" and "High:" on one line */ } /* Inputs honor a shrinkable basis and won’t force wrap */ #equipTables .range-slider > span input[type="number"]{ flex: 0 1 var(--rs-input-w); /* allow shrinking */ min-width: 48px; /* safety floor so it never gets tiny */ width: var(--rs-input-w); } /* Slight space after the Low value (can be reduced at tight widths) */ #equipTables .range-slider > span input[type="number"]:first-of-type{ margin-right: 12px; } /* ---------- targeted breakpoints to avoid the 1955px wrap ---------- */ /* First, reduce gaps a touch as space tightens */ @media (max-width: 2200px){ #equipTables .range-slider > span{ gap: .3rem .45rem; } } /* 2116px: narrow the inputs a bit so both stay on one line */ @media (max-width: 2116px){ #equipTables .range-slider{ --rs-input-w: 66px; } #equipTables .range-slider > span input[type="number"]:first-of-type{ margin-right: 10px; } } /* 2000px: trim a little more and tighten gaps */ @media (max-width: 2000px){ #equipTables .range-slider{ --rs-input-w: 60px; } #equipTables .range-slider > span{ gap: .26rem .38rem; } #equipTables .range-slider > span input[type="number"]:first-of-type{ margin-right: 8px; } } /* 1955px (your problem point): make sure they **stay** on one line */ @media (max-width: 1955px){ #equipTables .range-slider{ --rs-input-w: 56px; } #equipTables .range-slider > span{ gap: .22rem .32rem; } #equipTables .range-slider > span input[type="number"]{ padding: 1px 4px; } #equipTables .range-slider > span input[type="number"]:first-of-type{ margin-right: 6px; } } /* If the column gets even tighter later, keep shrinking gracefully */ @media (max-width: 1800px){ #equipTables .range-slider{ --rs-input-w: 52px; } } @media (max-width: 1680px){ #equipTables .range-slider{ --rs-input-w: 50px; } #equipTables .range-slider > span{ gap: .2rem .28rem; } } @-moz-document url-prefix() { #equipTables .range-slider { display: none !important; /* removes the whole widget (inputs + sliders + svg) */ } } #equipTables .equipTables_checkbox{ display:flex; align-items:center; gap:.5rem; } #equipTables .equipTables_switch_text{ white-space:nowrap; } #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn{ width: 70px; /* ↑ widen the switch */ height: 32px; /* ↑ height if needed */ } /* Keep the inner labels centered in the new size */ #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn::before, #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn::after{ line-height: 36px; /* match height */ font-size: 12px; /* readable at the larger size */ padding: 0 .5rem; white-space: nowrap; } #equipTables #equipTables_roundToggleWrap{ gap: .5rem; flex-wrap: nowrap; white-space: nowrap; } #equipTables .equipTables_switch_text{ white-space: nowrap; } /* If you used the earlier size tweaks for the flip, keep them; optional recap: */ #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn{ width: 92px; height: 36px; /* or your preferred size */ } #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn::before, #equipTables .equipTables_exoticCheck .tgl.tgl-flip + .tgl-btn::after{ line-height: 36px; font-size: 12px; padding: 0 .5rem; white-space: nowrap; } /* Optional: on very small screens, let it left-align instead of overflowing */ @media (max-width: 576px){ #equipTables #equipTables_roundToggleWrap{ justify-content: flex-start; } } #equipTables table.equipDetailsTable { background-color: rgb(from var(--primary-600) r g b / 0.125) !important; } /* Only affect #blogHeaderTable */ #blogHeaderTable { background: transparent !important; /* Bootstrap 5 table background vars */ --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; /* Optional: keep borders visible on transparent bg */ --bs-table-border-color: rgba(255,255,255,.25); } /* Ensure cells stay transparent (BS5 structure) */ #blogHeaderTable > :not(caption) > * > * { background-color: transparent !important; box-shadow: none; /* removes subtle inset hover stripe */ } /* If you’re using a DIV wrapper with .table-responsive, give it the same treatment */ #blogHeaderTable.table-responsive, #blogHeaderTable_wrapper, #blogHeaderTable_container { background: transparent !important; } /* Bootstrap 4 fallback (header/body/foot cells) */ #blogHeaderTable thead th, #blogHeaderTable tbody td, #blogHeaderTable tfoot th { background-color: transparent !important; } /* Register / Sign In */ /* ---------------------------------------------------------------------------------------------- */ /* Container */ .auth_modal { background: transparent; border: none; } .auth_container { position: relative; width: 100%; max-width: 1200px; min-height: 480px; margin: 0 auto; background: #1a1a1a; color: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); } /* Two forms */ .auth_form-container { position: absolute; top: 0; height: 100%; transition: all .6s ease-in-out; width: 50%; padding: 40px; display: flex; align-items: center; justify-content: center; } .auth_sign-in-container { left: 0; z-index: 2; } .auth_sign-up-container { left: 0; opacity: 0; z-index: 1; } .auth_container.right-panel-active .auth_sign-in-container { transform: translateX(100%); } .auth_container.right-panel-active .auth_sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; } .auth_form { width: 100%; max-width: 320px; text-align: center; } .auth_form h2 { margin-bottom: 16px; } .auth_input { margin: 10px 0; } .auth_input input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; } /* Overlay */ .auth_overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform .6s ease-in-out; z-index: 100; } .auth_container.right-panel-active .auth_overlay-container { transform: translateX(-100%); } .auth_overlay { background: linear-gradient(120deg, var(--primary-500), var(--primary-700)); background-repeat: no-repeat; background-size: cover; color: #111; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform .6s ease-in-out; } .auth_container.right-panel-active .auth_overlay { transform: translateX(50%); } .auth_overlay-panel { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; } .auth_overlay-left { transform: translateX(-20%); left: 0; } .auth_overlay-right { right: 0; transform: translateX(0); } .auth_btn, .auth_ghost_btn { margin-top: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid #111; cursor: pointer; transition: .15s; } .auth_btn { background: var(--primary); color: #111; border-color: var(--primary); } .auth_btn:hover { filter: brightness(.95); transform: translateY(-1px); } .auth_ghost_btn { background: transparent; border-color: #111; color: #111; } .auth_ghost_btn:hover { transform: translateY(-1px); } .auth_msg { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(0,128,0,.15); border: 1px solid rgba(0,128,0,.35); } .auth_msg.auth_error { background: rgb(from var(--danger) r g b / 0.675); border-color: var(--danger); } .auth_alt { margin-top: 12px; font-size: .95rem; } .auth_alt .qmLink { color: #111; text-decoration: underline; } /* Make each half opaque so nothing shows through */ .auth_form-container { background: #1a1a1a; /* same as container background */ } /* Baseline states */ .auth_sign-in-container { opacity: 1; visibility: visible; pointer-events: auto; z-index: 3; } .auth_sign-up-container { opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; } /* When user clicks "Create account" (right panel active) */ .auth_container.right-panel-active .auth_sign-in-container { opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; } .auth_container.right-panel-active .auth_sign-up-container { opacity: 1; visibility: visible; pointer-events: auto; z-index: 4; } /* Keep the slide animation you already have */ .auth_form-container { transition: transform .6s ease-in-out, opacity .3s ease; } .auth_overlay-panel { justify-content: center; /* already there in your base, keep/ensure */ align-items: center; /* already there in your base, keep/ensure */ text-align: center; /* center text inside the panel */ } /* Remove the lateral offset that causes the “left-hug” look */ .auth_overlay-left { transform: none !important; } /* (Optional) symmetry for the other side */ .auth_overlay-right { transform: none !important; } /* (Optional) keep inner content nicely centered/narrow */ .auth_overlay-panel > * { margin-inline: auto; max-width: 360px; } .auth_pLink, .auth_pLink:link, .auth_pLink:visited, .auth_pLink:hover, .auth_pLink:active, .auth_pLink:focus { color: var(--text-50); text-decoration: none; font-size: 1.1rem; position: relative; top: 50px; } /* optional: accessible focus ring without changing color */ .auth_pLink:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246, 201, 69, .35); border-radius: 4px; } /* --- Auth modal should always sit on top of everything --- */ :root { --z-modal: 100000; } .modal { z-index: var(--z-modal) !important; } .modal-backdrop { z-index: calc(var(--z-modal) - 10) !important; } /* While a modal is open, don't let other overlays intercept clicks */ body.modal-open #siteInner, body.modal-open #mobileMenuOverlay, body.modal-open #quickMenu, body.modal-open .rghtBtnoverlay { pointer-events: none !important; } /* Make sure the modal content itself still receives clicks */ .modal.show .modal-dialog, .modal.show .modal-content { pointer-events: auto; } /* (Optional) If any fixed headers/intro scrims had huge z-indexes, tame them while modal open */ body.modal-open #mainNav, body.modal-open .panel-scrim, body.modal-open .parallax-container { z-index: 10 !important; } #authModal, #authModal.modal, #authModal .modal-dialog, #authModal .modal-content { position: fixed !important; /* don't let any ancestor flow/transform affect it */ z-index: 2147483647 !important; /* max practical z-index */ pointer-events: auto !important; } /* Put the backdrop *below* the modal and make it 'click-through' */ .modal-backdrop, .modal-backdrop.show, .modal-backdrop.fade.show { z-index: 20 !important; /* just under the modal */ pointer-events: none !important; /* don't eat clicks */ } /* While a modal is open, stop other overlays from grabbing events anyway */ body.modal-open #siteInner, body.modal-open #mobileMenuOverlay, body.modal-open #quickMenu, body.modal-open .rghtBtnoverlay, body.modal-open .parallax-container, body.modal-open .panel-scrim { pointer-events: none !important; } .authPasswordForgotLink { color: #ccc; } .authPasswordForgotLink a { text-decoration: none; color: #ccc; font-size: 0.8rem; } .authPasswordForgotLink a:hover { text-decoration: none; color: #ccc; font-weight: 700; }