This commit is contained in:
parent
b8d1829bc7
commit
d359fd0a35
25 changed files with 1340 additions and 1023 deletions
1110
DESIGN_SYSTEM.md
1110
DESIGN_SYSTEM.md
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@ test("vite entrypoint loads the react application", async () => {
|
|||
test("react application defines the expected local toolbox primitives", async () => {
|
||||
const source = await readFile("website/src/main.jsx", "utf8");
|
||||
const styles = await readFile("website/src/styles/main.scss", "utf8");
|
||||
const styleNebula = await readFile("website/src/styles/_nebula.scss", "utf8");
|
||||
const styleTokens = await readFile("website/src/styles/_tokens.scss", "utf8");
|
||||
const styleBase = await readFile("website/src/styles/_base.scss", "utf8");
|
||||
const styleHome = await readFile("website/src/styles/_home.scss", "utf8");
|
||||
|
|
@ -40,10 +41,13 @@ test("react application defines the expected local toolbox primitives", async ()
|
|||
assert.match(source, /sokkog:game-toolbox-links/);
|
||||
assert.match(source, /styles\/main\.scss/);
|
||||
assert.match(styles, /@use "tokens"/);
|
||||
assert.match(styles, /@use "nebula"/);
|
||||
assert.match(styles, /@use "toolboxes"/);
|
||||
assert.match(styles, /@use "mhwilds"/);
|
||||
assert.match(styleTokens, /--gradient-brand/);
|
||||
assert.match(styleBase, /\.card-icon-button,\n\.drawer-action-button/);
|
||||
assert.match(styleNebula, /@function star-field/);
|
||||
assert.match(styleNebula, /body::after/);
|
||||
assert.match(styleBase, /\.import-icon-button/);
|
||||
assert.match(styleHome, /\.dialogue-line i/);
|
||||
assert.match(styleHome, /font-style: italic/);
|
||||
|
|
@ -54,6 +58,7 @@ test("react application defines the expected local toolbox primitives", async ()
|
|||
assert.match(styleIcons, /ui-icon-drag/);
|
||||
assert.match(styleIcons, /ui-icon-dropdown/);
|
||||
assert.match(styleIcons, /ui-icon-flip/);
|
||||
assert.match(styleIcons, /ui-icon-add/);
|
||||
assert.match(styleMhwilds, /\.mhwilds-card/);
|
||||
assert.match(styleMhwilds, /\.mhwilds-flip-indicator/);
|
||||
assert.match(styleResponsive, /@media \(max-width: 760px\)/);
|
||||
|
|
@ -160,7 +165,8 @@ test("mhwilds data and assets are available", async () => {
|
|||
assert.ok(site.toolboxes.storageHelp.items.length >= 3);
|
||||
assert.equal(games.games[0].id, "mhwilds");
|
||||
assert.equal(games.games[0].eyebrow, "Guide de jeu");
|
||||
assert.match(games.games[0].image, /mhwilds\.png/);
|
||||
assert.match(games.games[0].images.cardCover, /games\/mhwilds\/card-cover\.png/);
|
||||
assert.match(games.games[0].images.heroBg, /games\/mhwilds\/hero-bg\.png/);
|
||||
assert.ok(monsters.monsters.length > 0);
|
||||
assert.ok(endemicLife.endemicLife.length > 0);
|
||||
assert.equal(translations.monsters, "monstres");
|
||||
|
|
@ -168,6 +174,8 @@ test("mhwilds data and assets are available", async () => {
|
|||
const monsterCardSource = await readFile("website/src/features/games/mhwilds/cards/MonsterCard.jsx", "utf8");
|
||||
assert.match(monsterCardSource, /monster-card/);
|
||||
await readFile("website/public/static/img/mhwilds/chatacabra.png");
|
||||
await readFile("website/public/static/img/games/mhwilds/card-cover.png");
|
||||
await readFile("website/public/static/img/games/mhwilds/hero-bg.png");
|
||||
});
|
||||
|
||||
test("server and vite support local env configuration", async () => {
|
||||
|
|
@ -187,6 +195,7 @@ test("legacy svg icons are available for reuse", async () => {
|
|||
|
||||
assert.ok(manifest.icons.length >= 4);
|
||||
await readFile("website/public/static/icons/home.svg", "utf8");
|
||||
await readFile("website/public/static/icons/add.svg", "utf8");
|
||||
await readFile("website/public/static/icons/checklist.svg", "utf8");
|
||||
await readFile("website/public/static/icons/close.svg", "utf8");
|
||||
await readFile("website/public/static/icons/columns.svg", "utf8");
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
"id": "mhwilds",
|
||||
"title": "Monster Hunter Wilds",
|
||||
"eyebrow": "Guide de jeu",
|
||||
"cover": "linear-gradient(135deg, rgba(139, 92, 246, 0.88) 0%, rgba(99, 102, 241, 0.82) 48%, rgba(34, 211, 238, 0.72) 100%)",
|
||||
"image": "/static/img/mhwilds.png",
|
||||
"images": {
|
||||
"cardCover": "/static/img/games/mhwilds/card-cover.png",
|
||||
"heroBg": "/static/img/games/mhwilds/hero-bg.png"
|
||||
},
|
||||
"summary": "Repères rapides pour préparer une chasse, suivre les priorités et garder les infos utiles sur un second écran.",
|
||||
"sections": [
|
||||
{
|
||||
|
|
|
|||
24
website/public/static/icons/add.svg
Normal file
24
website/public/static/icons/add.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" ?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<title/>
|
||||
|
||||
<g id="Complete">
|
||||
|
||||
<g data-name="add" id="add-2">
|
||||
|
||||
<g>
|
||||
|
||||
<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="19" y2="5"/>
|
||||
|
||||
<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 575 B |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
BIN
website/public/static/img/games/mhwilds/hero-bg.png
Normal file
BIN
website/public/static/img/games/mhwilds/hero-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
|
|
@ -4,13 +4,14 @@ import { MhwildsPage } from "./mhwilds/MhwildsPage.jsx";
|
|||
export function GameRoute(props) {
|
||||
const { gameId, games } = props;
|
||||
const game = games.find((item) => item.id === gameId);
|
||||
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
|
||||
|
||||
if (!game) return <GamesPage {...props} />;
|
||||
if (game.id === "mhwilds") return <MhwildsPage {...props} />;
|
||||
if (game.id === "mhwilds") return <MhwildsPage {...props} game={game} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="game-hero" style={{ background: game.cover }}>
|
||||
<section className="game-hero" style={heroStyle}>
|
||||
<div>
|
||||
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
|
||||
<h1>{game.title}</h1>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<section className="page-heading">
|
||||
<section className="page-hero">
|
||||
<div>
|
||||
<p className="eyebrow">{content.eyebrow}</p>
|
||||
<h1>{content.title}</h1>
|
||||
|
|
@ -20,7 +20,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
|
|||
title={`Ouvrir ${game.title}`}
|
||||
style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
|
||||
>
|
||||
<img src={game.image || ""} alt={game.title} loading="lazy" />
|
||||
<img src={game.images?.cardCover || game.image || ""} alt={game.title} loading="lazy" />
|
||||
</a>
|
||||
<div className="card-body">
|
||||
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { assetPath } from "./utils.js";
|
||||
|
||||
export function MhwildsOverview() {
|
||||
export function MhwildsOverview({ game }) {
|
||||
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="game-hero mhwilds-hero">
|
||||
<section className="game-hero" style={heroStyle}>
|
||||
<div>
|
||||
<p className="eyebrow">Guide de jeu</p>
|
||||
<h1>Monster Hunter: Wilds</h1>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import { MhwildsListing } from "./MhwildsListing.jsx";
|
||||
import { MhwildsOverview } from "./MhwildsOverview.jsx";
|
||||
|
||||
export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
|
||||
export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t }) {
|
||||
const activeCategory = category === "monsters" || category === "endemic" ? category : "";
|
||||
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
|
||||
|
||||
if (!mhwilds.loaded) {
|
||||
return (
|
||||
<>
|
||||
<section className="game-hero mhwilds-hero">
|
||||
<section className="game-hero" style={heroStyle}>
|
||||
<div>
|
||||
<p className="eyebrow">Monster Hunter Wilds</p>
|
||||
<h1>Monster Hunter: Wilds</h1>
|
||||
|
|
@ -31,7 +32,7 @@ export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
|
|||
);
|
||||
}
|
||||
|
||||
if (!activeCategory) return <MhwildsOverview />;
|
||||
if (!activeCategory) return <MhwildsOverview game={game} />;
|
||||
|
||||
return (
|
||||
<MhwildsListing
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { ChecklistModule } from "./ChecklistModule.jsx";
|
||||
|
|
@ -15,11 +15,53 @@ const MODULE_COMPONENTS = {
|
|||
counters: { label: "Compteurs", icon: "abacus", Component: CountersModule, editable: true }
|
||||
};
|
||||
|
||||
const MODULE_COLUMN_GAP_PX = 16;
|
||||
|
||||
export const TOOLBOX_MODULES = Object.fromEntries(Object.entries(MODULE_COMPONENTS).map(([type, module]) => [
|
||||
type,
|
||||
{ label: module.label, icon: module.icon }
|
||||
]));
|
||||
|
||||
function getSequentialModuleColumns(modules, splitIndex) {
|
||||
return [
|
||||
modules.slice(0, splitIndex),
|
||||
modules.slice(splitIndex)
|
||||
];
|
||||
}
|
||||
|
||||
function getColumnHeight(heights) {
|
||||
if (!heights.length) return 0;
|
||||
return heights.reduce((total, height) => total + height, 0) + MODULE_COLUMN_GAP_PX * (heights.length - 1);
|
||||
}
|
||||
|
||||
function chooseMeasuredSplitIndex(modules, moduleHeights, fallbackSplitIndex) {
|
||||
if (modules.length <= 1) return modules.length;
|
||||
if (modules.some((module) => !moduleHeights.get(module.id))) return fallbackSplitIndex;
|
||||
|
||||
let bestSplitIndex = fallbackSplitIndex;
|
||||
let bestDiff = Number.POSITIVE_INFINITY;
|
||||
let bestLeftDominantSplitIndex = 0;
|
||||
let bestLeftDominantDiff = Number.POSITIVE_INFINITY;
|
||||
|
||||
for (let splitIndex = 1; splitIndex < modules.length; splitIndex += 1) {
|
||||
const leftHeight = getColumnHeight(modules.slice(0, splitIndex).map((module) => moduleHeights.get(module.id)));
|
||||
const rightHeight = getColumnHeight(modules.slice(splitIndex).map((module) => moduleHeights.get(module.id)));
|
||||
const diff = Math.abs(leftHeight - rightHeight);
|
||||
|
||||
if (leftHeight >= rightHeight && diff < bestLeftDominantDiff) {
|
||||
bestLeftDominantDiff = diff;
|
||||
bestLeftDominantSplitIndex = splitIndex;
|
||||
}
|
||||
|
||||
if (diff < bestDiff) {
|
||||
bestDiff = diff;
|
||||
bestSplitIndex = splitIndex;
|
||||
}
|
||||
}
|
||||
|
||||
return bestLeftDominantSplitIndex || bestSplitIndex;
|
||||
}
|
||||
|
||||
export function AddToolControls({ onAdd }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [quickOpen, setQuickOpen] = useState(false);
|
||||
|
|
@ -134,6 +176,48 @@ export function AddToolControls({ onAdd }) {
|
|||
export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDelete, onMove }) {
|
||||
const [draggingModuleId, setDraggingModuleId] = useState("");
|
||||
const [dropTarget, setDropTarget] = useState({ id: "", placement: "before" });
|
||||
const [measuredSplitIndex, setMeasuredSplitIndex] = useState(() => Math.ceil(toolbox.modules.length / 2));
|
||||
const moduleElementsRef = useRef(new Map());
|
||||
const moduleIdSignature = useMemo(() => toolbox.modules.map((module) => module.id).join("|"), [toolbox.modules]);
|
||||
|
||||
useEffect(() => {
|
||||
setMeasuredSplitIndex(Math.ceil(toolbox.modules.length / 2));
|
||||
}, [toolbox.id, moduleIdSignature, toolbox.modules.length]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (moduleColumns !== 2 || toolbox.modules.length <= 1) return undefined;
|
||||
|
||||
let frameId = 0;
|
||||
function rebalanceColumns() {
|
||||
cancelAnimationFrame(frameId);
|
||||
frameId = requestAnimationFrame(() => {
|
||||
const moduleHeights = new Map();
|
||||
toolbox.modules.forEach((module) => {
|
||||
const element = moduleElementsRef.current.get(module.id);
|
||||
if (element) moduleHeights.set(module.id, element.getBoundingClientRect().height);
|
||||
});
|
||||
|
||||
setMeasuredSplitIndex((currentSplitIndex) => {
|
||||
const fallbackSplitIndex = Math.min(Math.max(currentSplitIndex, 1), toolbox.modules.length - 1);
|
||||
const nextSplitIndex = chooseMeasuredSplitIndex(toolbox.modules, moduleHeights, fallbackSplitIndex);
|
||||
return nextSplitIndex === currentSplitIndex ? currentSplitIndex : nextSplitIndex;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const observer = new ResizeObserver(rebalanceColumns);
|
||||
|
||||
toolbox.modules.forEach((module) => {
|
||||
const element = moduleElementsRef.current.get(module.id);
|
||||
if (element) observer.observe(element);
|
||||
});
|
||||
rebalanceColumns();
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(frameId);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [moduleColumns, toolbox.id, moduleIdSignature, toolbox.modules.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!draggingModuleId) return undefined;
|
||||
|
|
@ -180,6 +264,14 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
|
|||
setDropTarget({ id: "", placement: "before" });
|
||||
}
|
||||
|
||||
function registerModuleElement(moduleId, element) {
|
||||
if (element) {
|
||||
moduleElementsRef.current.set(moduleId, element);
|
||||
} else {
|
||||
moduleElementsRef.current.delete(moduleId);
|
||||
}
|
||||
}
|
||||
|
||||
if (moduleColumns === 1) {
|
||||
return (
|
||||
<section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
|
||||
|
|
@ -195,14 +287,15 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
|
|||
onRename={onRename}
|
||||
onDelete={onDelete}
|
||||
onMove={onMove}
|
||||
registerModuleElement={registerModuleElement}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [[], []];
|
||||
toolbox.modules.forEach((module, index) => columns[index % 2].push(module));
|
||||
const splitIndex = Math.min(Math.max(measuredSplitIndex, 1), Math.max(1, toolbox.modules.length - 1));
|
||||
const columns = getSequentialModuleColumns(toolbox.modules, splitIndex);
|
||||
|
||||
return (
|
||||
<section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
|
||||
|
|
@ -220,6 +313,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
|
|||
onRename={onRename}
|
||||
onDelete={onDelete}
|
||||
onMove={onMove}
|
||||
registerModuleElement={registerModuleElement}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -228,7 +322,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
|
|||
);
|
||||
}
|
||||
|
||||
function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onDelete }) {
|
||||
function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onDelete, registerModuleElement }) {
|
||||
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
|
||||
const Component = definition.Component;
|
||||
const label = definition.label || module.type;
|
||||
|
|
@ -247,6 +341,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
|
|||
className={className}
|
||||
data-toolbox-id={toolbox.id}
|
||||
data-module-id={module.id}
|
||||
ref={(element) => registerModuleElement?.(module.id, element)}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
|
|
@ -273,7 +368,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
|
|||
aria-pressed={editing}
|
||||
title={editing ? "Masquer l'ajout" : "Ajouter"}
|
||||
>
|
||||
<Icon name="edit" />
|
||||
<Icon name="add" />
|
||||
</button>
|
||||
)}
|
||||
<button className="module-delete-button danger" onClick={() => onDelete(module.id)} aria-label={`Retirer ${module.title || label}`} title="Retirer">
|
||||
|
|
|
|||
|
|
@ -166,6 +166,14 @@ function normalizeToolboxIcon(icon) {
|
|||
return TOOLBOX_ICON_FILES.includes(file) ? `${TOOLBOX_ICON_BASE}${file}` : DEFAULT_TOOLBOX_ICON;
|
||||
}
|
||||
|
||||
function getGameCardCover(game) {
|
||||
return game?.images?.cardCover || game?.image || "";
|
||||
}
|
||||
|
||||
function getGameCardBackground(game) {
|
||||
return game?.cover || "var(--gradient-nebula)";
|
||||
}
|
||||
|
||||
function normalizeToolboxModule(module) {
|
||||
if (!module || typeof module !== "object" || !module.type) return null;
|
||||
const title = String(module.title || "").trim();
|
||||
|
|
@ -882,7 +890,7 @@ function Shell({ route, content, games, toolboxes, links, actions, children }) {
|
|||
<aside className="sidebar">
|
||||
<a className="brand" href="#/" aria-label={content.brand.homeAriaLabel}>
|
||||
<span className="brand-mark" aria-hidden="true" />
|
||||
<span>{content.brand.name}</span>
|
||||
<span className="brand-name"><span className="brand-name-main">Sokko</span> <span className="brand-name-accent">G</span></span>
|
||||
</a>
|
||||
<nav className="nav" aria-label="Navigation principale">
|
||||
<a className={`nav-item ${route === "/" ? "active" : ""}`} href="#/"><span className="nav-icon nav-icon-home" aria-hidden="true" /><strong>{content.navigation.home}</strong></a>
|
||||
|
|
@ -991,23 +999,21 @@ function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions }) {
|
|||
const content = siteContent.toolboxes;
|
||||
return (
|
||||
<div className="toolbox-page">
|
||||
<section className="page-heading">
|
||||
<section className="page-hero">
|
||||
<div>
|
||||
<p className="eyebrow">{content.eyebrow}</p>
|
||||
<h1>{content.title}</h1>
|
||||
<p>{content.summary}</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="toolbar toolbar-stack">
|
||||
<p className="toolbox-summary">{content.summary}</p>
|
||||
<div className="toolbox-actions-row">
|
||||
<div>
|
||||
<button className="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
|
||||
<ImportButton className="import-button" label={content.importOne} onFile={actions.importToolbox} />
|
||||
</div>
|
||||
<div>
|
||||
<ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
|
||||
<button onClick={actions.exportAllToolboxes}>{content.exportAll}</button>
|
||||
</div>
|
||||
<section className="toolbar toolbox-actions-row">
|
||||
<div>
|
||||
<button className="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
|
||||
<ImportButton className="import-button" label={content.importOne} onFile={actions.importToolbox} />
|
||||
</div>
|
||||
<div>
|
||||
<ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
|
||||
<button onClick={actions.exportAllToolboxes}>{content.exportAll}</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="cards">
|
||||
|
|
@ -1039,15 +1045,16 @@ function StorageHelpCard({ help }) {
|
|||
}
|
||||
|
||||
function ToolboxCard({ toolbox, game, actions }) {
|
||||
const coverImage = game?.image || toolbox.icon || DEFAULT_TOOLBOX_ICON;
|
||||
const gameCoverImage = getGameCardCover(game);
|
||||
const coverImage = gameCoverImage || toolbox.icon || DEFAULT_TOOLBOX_ICON;
|
||||
return (
|
||||
<article className="card toolbox-card">
|
||||
<a
|
||||
className={`card-cover toolbox-card-cover-link ${game?.image ? "toolbox-card-cover" : "toolbox-icon-cover"}`}
|
||||
className={`card-cover toolbox-card-cover-link ${gameCoverImage ? "toolbox-card-cover" : "toolbox-icon-cover"}`}
|
||||
href={`#/toolbox/${toolbox.id}`}
|
||||
aria-label={`Ouvrir ${toolbox.name}`}
|
||||
title={`Ouvrir ${toolbox.name}`}
|
||||
style={{ "--game-cover": game?.cover || "var(--gradient-nebula)", background: game?.image ? "" : "var(--gradient-nebula)" }}
|
||||
style={{ "--game-cover": getGameCardBackground(game), background: gameCoverImage ? "" : "var(--gradient-nebula)" }}
|
||||
>
|
||||
<img src={coverImage} alt={game ? game.title : `Icône de ${toolbox.name}`} loading="lazy" />
|
||||
</a>
|
||||
|
|
@ -1141,15 +1148,17 @@ function ToolboxIconPicker({ toolbox, onChange }) {
|
|||
}
|
||||
|
||||
function ToolboxGameIcon({ game }) {
|
||||
const gameCoverImage = getGameCardCover(game);
|
||||
return (
|
||||
<div className="toolbox-game-icon" title={game.title} aria-label={`Jeu associé : ${game.title}`}>
|
||||
<img src={game.image} alt="" aria-hidden="true" />
|
||||
<img src={gameCoverImage} alt="" aria-hidden="true" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolboxView({ toolbox, toolboxGame, embedded, actions, updateToolbox, updateModuleData, addScreenshotFiles }) {
|
||||
const moduleColumns = Number(toolbox.moduleColumns) === 1 ? 1 : 2;
|
||||
const toolboxGameCover = getGameCardCover(toolboxGame);
|
||||
const moduleContext = {
|
||||
getModuleData,
|
||||
normalizeChecklistData,
|
||||
|
|
@ -1185,12 +1194,12 @@ function ToolboxView({ toolbox, toolboxGame, embedded, actions, updateToolbox, u
|
|||
|
||||
return (
|
||||
<div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
|
||||
<section className="toolbox-head">
|
||||
<section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
|
||||
<div>
|
||||
<p className="eyebrow">Toolbox</p>
|
||||
<div className="toolbox-title-row">
|
||||
{!embedded && !toolboxGame && <ToolboxIconPicker toolbox={toolbox} onChange={(icon) => updateToolbox({ ...toolbox, icon })} />}
|
||||
{!embedded && toolboxGame?.image && <ToolboxGameIcon game={toolboxGame} />}
|
||||
{!embedded && toolboxGameCover && <ToolboxGameIcon game={toolboxGame} />}
|
||||
{embedded ? <h1>{toolbox.name}</h1> : (
|
||||
<EditableTitle className="toolbox-title" value={toolbox.name} fallback="Nouvelle toolbox" onSave={(name) => name !== toolbox.name && updateToolbox({ ...toolbox, name })} />
|
||||
)}
|
||||
|
|
@ -1267,17 +1276,17 @@ function ToolboxDrawer({ gameId, toolboxes, links, actions, updateToolbox, updat
|
|||
}
|
||||
|
||||
return (
|
||||
<aside className="drawer" id="toolbox-drawer" aria-hidden="false">
|
||||
<aside className="drawer" id="toolbox-drawer" aria-hidden="false" style={width ? { "--drawer-panel-width": `${width}px` } : undefined}>
|
||||
<div className="drawer-backdrop" onClick={() => actions.setDrawerGameId("")} />
|
||||
<span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
|
||||
<section className="drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
|
||||
<div className="drawer-content">
|
||||
<span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
|
||||
<header>
|
||||
<div>
|
||||
<p className="eyebrow">Toolbox liée</p>
|
||||
<div className="drawer-toolbox-actions" aria-label="Actions toolbox liée">
|
||||
<ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
|
||||
<button className="drawer-action-button" onClick={() => actions.setLinkModalGameId(gameId)} aria-label="Lier une toolbox" title="Lier"><Icon name="link" /></button>
|
||||
<ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
|
||||
<button className="drawer-action-button" onClick={() => actions.exportToolbox(selectedId)} disabled={!selectedId} aria-label="Exporter la toolbox liée" title="Exporter"><Icon name="export" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,28 +8,16 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
background: var(--gradient-page);
|
||||
background-attachment: fixed;
|
||||
font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.23;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.52) 1px, transparent 1px),
|
||||
radial-gradient(circle, rgba(139, 92, 246, 0.38) 1px, transparent 1px);
|
||||
background-position: 0 0, 35px 60px;
|
||||
background-size: 90px 90px, 140px 140px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -50,6 +38,7 @@ textarea,
|
|||
transform var(--duration-fast) var(--ease-standard),
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
|
@ -68,8 +57,13 @@ button,
|
|||
button:hover,
|
||||
.button:hover,
|
||||
.import-button:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
background: var(--color-bg-hover);
|
||||
border-color: rgba(196, 181, 253, 0.34);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 37, 68, 0.96), rgba(22, 26, 51, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(196, 181, 253, 0.2)) border-box;
|
||||
box-shadow:
|
||||
0 0 14px rgba(139, 92, 246, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
button:active,
|
||||
|
|
@ -79,7 +73,75 @@ button:active,
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent-cyan);
|
||||
outline: 2px solid var(--color-accent-gold);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-grid;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
max-width: 20px;
|
||||
inline-size: 20px;
|
||||
min-inline-size: 20px;
|
||||
max-inline-size: 20px;
|
||||
aspect-ratio: 1;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
max-height: 20px;
|
||||
block-size: 20px;
|
||||
min-block-size: 20px;
|
||||
max-block-size: 20px;
|
||||
place-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
line-height: 0;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(27, 34, 66, 0.92), rgba(16, 20, 44, 0.94)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.5), rgba(139, 92, 246, 0.44)) border-box;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
|
||||
0 0 0 1px rgba(5, 7, 17, 0.42);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: #fff;
|
||||
transform: scale(0);
|
||||
transition: transform var(--duration-fast) var(--ease-standard);
|
||||
clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 18%, 84% 5%, 34% 68%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
border-color: rgba(246, 196, 83, 0.6);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
|
||||
0 0 14px rgba(246, 196, 83, 0.14);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border-color: rgba(246, 196, 83, 0.88);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.96), rgba(139, 92, 246, 0.86)) padding-box,
|
||||
linear-gradient(135deg, var(--color-accent-gold), rgba(196, 181, 253, 0.88)) border-box;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||
0 0 16px rgba(246, 196, 83, 0.2);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus-visible {
|
||||
outline: 2px solid var(--color-accent-gold);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -111,18 +173,27 @@ button:active,
|
|||
}
|
||||
|
||||
.primary {
|
||||
border-color: transparent;
|
||||
background: var(--gradient-brand);
|
||||
box-shadow: 0 8px 22px rgba(99, 102, 241, 0.22);
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.66), rgba(139, 92, 246, 0.36)) border-box;
|
||||
box-shadow:
|
||||
0 8px 22px rgba(5, 7, 17, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
border-color: transparent;
|
||||
filter: brightness(1.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(139, 92, 246, 0.3);
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(109, 40, 217, 0.98), rgba(67, 56, 202, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.96), rgba(196, 181, 253, 0.68)) border-box;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(246, 196, 83, 0.16),
|
||||
0 0 18px rgba(139, 92, 246, 0.3),
|
||||
0 0 30px rgba(246, 196, 83, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
|
|
@ -131,14 +202,26 @@ button:active,
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.ghost:hover {
|
||||
border-color: rgba(196, 181, 253, 0.18);
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.32);
|
||||
background: var(--color-danger-soft);
|
||||
border-color: rgba(251, 113, 133, 0.48);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 0 14px rgba(251, 113, 133, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-action-button,
|
||||
|
|
@ -170,11 +253,30 @@ button:active,
|
|||
transform var(--duration-fast) var(--ease-standard),
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-action-button .ui-icon,
|
||||
.import-icon-button .ui-icon,
|
||||
.toolbox-icon-button .ui-icon,
|
||||
.card-icon-button .ui-icon,
|
||||
.drawer-action-button .ui-icon,
|
||||
.drawer-close-button .ui-icon,
|
||||
.filter-reset-button .ui-icon,
|
||||
.screenshot-viewer-button .ui-icon,
|
||||
.module-edit-button .ui-icon,
|
||||
.module-delete-button .ui-icon,
|
||||
.shot-delete-button .ui-icon,
|
||||
.tool-quick-add-button .ui-icon {
|
||||
transition:
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
filter var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-action-button:hover,
|
||||
.import-icon-button:hover,
|
||||
.toolbox-icon-button:hover,
|
||||
.card-icon-button:hover,
|
||||
.drawer-action-button:hover,
|
||||
.drawer-close-button:hover,
|
||||
|
|
@ -184,9 +286,28 @@ button:active,
|
|||
.module-delete-button:hover,
|
||||
.shot-delete-button:hover,
|
||||
.tool-quick-add-button:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
border-color: rgba(196, 181, 253, 0.32);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box;
|
||||
color: #ddd6fe;
|
||||
box-shadow:
|
||||
0 0 12px rgba(139, 92, 246, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.sidebar-action-button:hover .ui-icon,
|
||||
.import-icon-button:hover .ui-icon,
|
||||
.toolbox-icon-button:hover .ui-icon,
|
||||
.card-icon-button:hover .ui-icon,
|
||||
.drawer-action-button:hover .ui-icon,
|
||||
.drawer-close-button:hover .ui-icon,
|
||||
.filter-reset-button:hover .ui-icon,
|
||||
.screenshot-viewer-button:hover .ui-icon,
|
||||
.module-edit-button:hover .ui-icon,
|
||||
.tool-quick-add-button:hover .ui-icon {
|
||||
background-color: #c4b5fd;
|
||||
filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.28));
|
||||
}
|
||||
|
||||
.card-icon-button.danger,
|
||||
|
|
@ -199,8 +320,19 @@ button:active,
|
|||
.card-icon-button.danger:hover,
|
||||
.module-delete-button.danger:hover,
|
||||
.shot-delete-button.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.46);
|
||||
background: var(--color-danger-soft);
|
||||
border-color: rgba(251, 113, 133, 0.56);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 24px rgba(251, 113, 133, 0.12);
|
||||
box-shadow:
|
||||
0 0 14px rgba(251, 113, 133, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.card-icon-button.danger:hover .ui-icon,
|
||||
.module-delete-button.danger:hover .ui-icon,
|
||||
.shot-delete-button.danger:hover .ui-icon {
|
||||
background-color: #fff;
|
||||
filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,21 @@
|
|||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card {
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
|
||||
}
|
||||
|
||||
@supports (corner-shape: scoop) {
|
||||
.card {
|
||||
corner-shape: scoop;
|
||||
}
|
||||
}
|
||||
|
||||
.feature,
|
||||
.info-panel,
|
||||
.empty {
|
||||
|
|
@ -35,7 +50,6 @@
|
|||
|
||||
.feature,
|
||||
.card,
|
||||
.module,
|
||||
.info-panel {
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-standard),
|
||||
|
|
@ -45,13 +59,24 @@
|
|||
|
||||
.feature:hover,
|
||||
.card:hover,
|
||||
.module:hover,
|
||||
.info-panel:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-border-hover);
|
||||
background: rgba(21, 26, 48, 0.96);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 18px rgba(139, 92, 246, 0.22),
|
||||
0 0 34px rgba(196, 181, 253, 0.12);
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -75,7 +100,7 @@
|
|||
|
||||
.card-cover {
|
||||
min-height: 124px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
|
|
@ -148,9 +173,9 @@
|
|||
position: relative;
|
||||
min-height: 292px;
|
||||
overflow: hidden;
|
||||
border-color: rgba(34, 211, 238, 0.22);
|
||||
border-color: rgba(246, 196, 83, 0.22);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent 38%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.1), transparent 38%),
|
||||
rgba(10, 13, 29, 0.84);
|
||||
}
|
||||
|
||||
|
|
@ -182,11 +207,11 @@
|
|||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(34, 211, 238, 0.32);
|
||||
border: 1px solid rgba(246, 196, 83, 0.32);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(34, 211, 238, 0.1);
|
||||
color: var(--color-accent-cyan);
|
||||
box-shadow: 0 0 22px rgba(34, 211, 238, 0.12);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
color: var(--color-accent-gold);
|
||||
box-shadow: 0 0 22px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.storage-help-mark::before {
|
||||
|
|
@ -205,7 +230,7 @@
|
|||
}
|
||||
|
||||
.storage-help-card .eyebrow {
|
||||
color: var(--color-accent-cyan);
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.storage-help-intro {
|
||||
|
|
@ -258,16 +283,56 @@
|
|||
}
|
||||
|
||||
.storage-quota {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin-top: auto;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(10, 13, 29, 0.78);
|
||||
background: rgba(16, 20, 38, 0.58);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.storage-quota::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
|
||||
radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.storage-quota::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.storage-quota > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolbox-page > .storage-quota,
|
||||
.drawer-content > .storage-quota {
|
||||
margin-top: auto;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 50% 38%, rgba(34, 211, 238, 0.16), transparent 42%),
|
||||
radial-gradient(circle at 50% 38%, rgba(246, 196, 83, 0.16), transparent 42%),
|
||||
var(--gradient-nebula);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,105 @@
|
|||
.hero,
|
||||
.game-hero {
|
||||
.game-hero,
|
||||
.page-hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-height: 360px;
|
||||
align-items: end;
|
||||
gap: var(--space-6);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xl);
|
||||
background:
|
||||
var(--gradient-nebula),
|
||||
radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
.hero::after,
|
||||
.game-hero::after {
|
||||
.hero::before,
|
||||
.game-hero::before,
|
||||
.page-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero::after,
|
||||
.game-hero::after,
|
||||
.page-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)),
|
||||
radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.18), transparent 30%);
|
||||
radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%);
|
||||
}
|
||||
|
||||
.hero > *,
|
||||
.game-hero > * {
|
||||
.game-hero > *,
|
||||
.page-hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
|
||||
background:
|
||||
var(--gradient-nebula),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
|
||||
}
|
||||
|
||||
.game-hero {
|
||||
grid-template-columns: 1fr auto;
|
||||
--game-hero-image: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.game-hero::after {
|
||||
left: 35%;
|
||||
opacity: 0.72;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%),
|
||||
var(--game-hero-image);
|
||||
background-position:
|
||||
center,
|
||||
right center;
|
||||
background-repeat: no-repeat;
|
||||
background-size:
|
||||
cover,
|
||||
cover;
|
||||
mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
min-height: 180px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.page-hero p:last-child {
|
||||
max-width: 720px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
|
|
@ -68,7 +127,7 @@ span {
|
|||
|
||||
.eyebrow {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-accent-cyan);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -133,21 +192,66 @@ span {
|
|||
}
|
||||
|
||||
.origin-section {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
|
||||
gap: var(--space-6);
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-6);
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.origin-section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background: rgba(165, 180, 252, 0.14);
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.origin-section::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
|
||||
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
|
||||
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.origin-section > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.origin-copy {
|
||||
min-width: 0;
|
||||
padding-right: var(--space-6);
|
||||
border-right: 2px solid rgba(34, 211, 238, 0.66);
|
||||
border-right: 2px solid rgba(246, 196, 83, 0.66);
|
||||
}
|
||||
|
||||
.home-dialogue {
|
||||
|
|
@ -214,7 +318,7 @@ span {
|
|||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(145deg, rgba(34, 211, 238, 0.08), transparent 52%),
|
||||
linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%),
|
||||
rgba(7, 10, 24, 0.52);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,11 @@
|
|||
-webkit-mask-image: url("/static/icons/edit.svg");
|
||||
}
|
||||
|
||||
.ui-icon-add {
|
||||
mask-image: url("/static/icons/add.svg");
|
||||
-webkit-mask-image: url("/static/icons/add.svg");
|
||||
}
|
||||
|
||||
.ui-icon-copy {
|
||||
mask-image: url("/static/icons/copy.svg");
|
||||
-webkit-mask-image: url("/static/icons/copy.svg");
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
.mhwilds-hero {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.86), rgba(99, 102, 241, 0.76), rgba(34, 211, 238, 0.58)),
|
||||
var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.mhwilds-home-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(240px, 380px));
|
||||
|
|
@ -14,8 +8,32 @@
|
|||
|
||||
.mhwilds-home-card {
|
||||
overflow: hidden;
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0;
|
||||
min-height: 230px;
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
|
||||
}
|
||||
|
||||
@supports (corner-shape: scoop) {
|
||||
.mhwilds-home-card {
|
||||
corner-shape: scoop;
|
||||
}
|
||||
}
|
||||
|
||||
.mhwilds-home-card:hover {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 18px rgba(139, 92, 246, 0.22),
|
||||
0 0 34px rgba(196, 181, 253, 0.12);
|
||||
}
|
||||
|
||||
.mhwilds-home-card img {
|
||||
|
|
@ -24,7 +42,7 @@
|
|||
height: 120px;
|
||||
object-fit: contain;
|
||||
padding: var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +105,7 @@
|
|||
border-radius: var(--radius-xl);
|
||||
background: rgba(16, 20, 38, 0.72);
|
||||
box-shadow: var(--shadow-sm);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
|
|
@ -154,11 +172,11 @@
|
|||
|
||||
.filter-chip {
|
||||
display: grid;
|
||||
grid-template-columns: 22px 24px 1fr;
|
||||
grid-template-columns: 18px 22px 1fr;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 9px;
|
||||
column-gap: 6px;
|
||||
padding: 7px 10px 7px 13px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(5, 7, 17, 0.32);
|
||||
|
|
@ -174,10 +192,19 @@
|
|||
}
|
||||
|
||||
.filter-chip input {
|
||||
flex: 0 0 18px;
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
max-width: 18px;
|
||||
inline-size: 18px;
|
||||
min-inline-size: 18px;
|
||||
max-inline-size: 18px;
|
||||
height: 18px;
|
||||
min-height: 18px;
|
||||
accent-color: var(--color-primary);
|
||||
max-height: 18px;
|
||||
block-size: 18px;
|
||||
min-block-size: 18px;
|
||||
max-block-size: 18px;
|
||||
}
|
||||
|
||||
.filter-chip img {
|
||||
|
|
@ -209,9 +236,12 @@
|
|||
|
||||
.mhwilds-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.88);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-standard),
|
||||
|
|
@ -219,22 +249,39 @@
|
|||
background-color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
@supports (corner-shape: scoop) {
|
||||
.mhwilds-card {
|
||||
corner-shape: scoop;
|
||||
}
|
||||
}
|
||||
|
||||
.mhwilds-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-border-hover);
|
||||
background: rgba(21, 26, 48, 0.96);
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 18px rgba(139, 92, 246, 0.22),
|
||||
0 0 34px rgba(196, 181, 253, 0.12);
|
||||
}
|
||||
|
||||
.monster-card {
|
||||
height: 285px;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.monster-card:hover,
|
||||
.monster-card:focus-visible {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mhwilds-card-inner {
|
||||
|
|
@ -245,6 +292,12 @@
|
|||
transition: transform 420ms var(--ease-standard);
|
||||
}
|
||||
|
||||
.monster-card:hover .mhwilds-card-inner,
|
||||
.monster-card:focus-visible .mhwilds-card-inner,
|
||||
.monster-card.is-flipped .mhwilds-card-inner {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.monster-card.is-flipped .mhwilds-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
|
@ -252,16 +305,26 @@
|
|||
.mhwilds-card-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
contain: paint;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.92);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.92), rgba(16, 20, 38, 0.92)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
|
||||
box-shadow: var(--shadow-sm);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@supports (corner-shape: scoop) {
|
||||
.mhwilds-card-face {
|
||||
corner-shape: scoop;
|
||||
}
|
||||
}
|
||||
|
||||
.mhwilds-flip-indicator {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -271,12 +334,19 @@
|
|||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(165, 180, 252, 0.2);
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.62);
|
||||
color: var(--color-text-primary);
|
||||
background: rgba(7, 10, 24, 0.36);
|
||||
color: var(--color-text-muted);
|
||||
pointer-events: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
box-shadow: none;
|
||||
opacity: 0.78;
|
||||
transition:
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
color var(--duration-fast) var(--ease-standard),
|
||||
opacity var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.mhwilds-flip-indicator .ui-icon {
|
||||
|
|
@ -292,16 +362,30 @@
|
|||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.monster-card:hover .mhwilds-flip-indicator {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(16, 20, 38, 0.52);
|
||||
color: #c4b5fd;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.monster-card:hover .mhwilds-card-face {
|
||||
border-color: var(--color-border-hover);
|
||||
background: rgba(21, 26, 48, 0.98);
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.95), rgba(16, 20, 38, 0.95)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.76), rgba(196, 181, 253, 0.58)) border-box;
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 14px rgba(139, 92, 246, 0.14),
|
||||
0 0 24px rgba(196, 181, 253, 0.08);
|
||||
}
|
||||
|
||||
.mhwilds-card-art {
|
||||
display: grid;
|
||||
min-height: 112px;
|
||||
place-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
|
||||
background:
|
||||
radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.16), transparent 46%),
|
||||
rgba(5, 7, 17, 0.36);
|
||||
|
|
|
|||
134
website/src/styles/_nebula.scss
Normal file
134
website/src/styles/_nebula.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
@use "sass:list";
|
||||
|
||||
$bright-stars:
|
||||
(12% 19% rgba(255, 255, 255, 0.98) 1.4px rgba(255, 255, 255, 0.2) 3.8px 6px),
|
||||
(38% 27% rgba(246, 196, 83, 0.94) 1.5px rgba(246, 196, 83, 0.18) 4px 7px),
|
||||
(73% 17% rgba(255, 255, 255, 0.96) 1.5px rgba(167, 139, 250, 0.2) 4.5px 7px),
|
||||
(87% 61% rgba(255, 255, 255, 0.96) 1.4px rgba(255, 255, 255, 0.18) 4px 6.5px),
|
||||
(52% 71% rgba(246, 196, 83, 0.9) 1.3px rgba(246, 196, 83, 0.16) 3.8px 6.5px),
|
||||
(29% 62% rgba(255, 255, 255, 1) 1.6px rgba(255, 255, 255, 0.18) 4.8px 8px),
|
||||
(68% 52% rgba(246, 196, 83, 0.98) 1.6px rgba(246, 196, 83, 0.18) 4.8px 8px),
|
||||
(92% 19% rgba(255, 255, 255, 1) 1.5px rgba(167, 139, 250, 0.18) 4.6px 7.5px);
|
||||
|
||||
$stars:
|
||||
(7% 12% rgba(255, 255, 255, 0.95) 1.1px 1.8px),
|
||||
(14% 68% rgba(167, 139, 250, 0.72) 1.2px 2px),
|
||||
(19% 34% rgba(255, 255, 255, 0.72) 0.9px 1.5px),
|
||||
(24% 86% rgba(246, 196, 83, 0.68) 1.2px 2.1px),
|
||||
(31% 18% rgba(255, 255, 255, 0.82) 1px 1.7px),
|
||||
(37% 57% rgba(255, 255, 255, 0.6) 0.9px 1.5px),
|
||||
(43% 9% rgba(246, 196, 83, 0.62) 1.2px 2px),
|
||||
(48% 77% rgba(167, 139, 250, 0.66) 1px 1.8px),
|
||||
(54% 29% rgba(255, 255, 255, 0.92) 1.1px 1.8px),
|
||||
(61% 63% rgba(255, 255, 255, 0.62) 0.9px 1.5px),
|
||||
(66% 14% rgba(167, 139, 250, 0.74) 1.2px 2px),
|
||||
(71% 84% rgba(255, 255, 255, 0.76) 1px 1.7px),
|
||||
(76% 42% rgba(246, 196, 83, 0.76) 1.2px 2.1px),
|
||||
(83% 23% rgba(255, 255, 255, 0.68) 0.9px 1.5px),
|
||||
(89% 72% rgba(167, 139, 250, 0.62) 1px 1.8px),
|
||||
(94% 48% rgba(255, 255, 255, 0.86) 1.1px 1.8px),
|
||||
(11% 45% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
||||
(28% 51% rgba(246, 196, 83, 0.56) 0.9px 1.6px),
|
||||
(58% 92% rgba(255, 255, 255, 0.58) 0.8px 1.4px),
|
||||
(97% 8% rgba(255, 255, 255, 0.78) 1px 1.7px),
|
||||
(4% 78% rgba(255, 255, 255, 0.55) 0.8px 1.4px),
|
||||
(17% 5% rgba(246, 196, 83, 0.5) 0.9px 1.6px),
|
||||
(22% 23% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
|
||||
(33% 72% rgba(167, 139, 250, 0.5) 0.9px 1.6px),
|
||||
(41% 39% rgba(255, 255, 255, 0.54) 0.8px 1.4px),
|
||||
(52% 54% rgba(246, 196, 83, 0.44) 0.8px 1.5px),
|
||||
(63% 36% rgba(255, 255, 255, 0.48) 0.7px 1.3px),
|
||||
(69% 96% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
||||
(81% 6% rgba(246, 196, 83, 0.52) 0.9px 1.6px),
|
||||
(91% 89% rgba(255, 255, 255, 0.56) 0.8px 1.4px),
|
||||
(3% 31% rgba(167, 139, 250, 0.42) 0.7px 1.3px),
|
||||
(45% 96% rgba(246, 196, 83, 0.42) 0.8px 1.5px),
|
||||
(74% 59% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
|
||||
(86% 37% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
||||
(99% 66% rgba(167, 139, 250, 0.46) 0.8px 1.5px),
|
||||
(6% 92% rgba(255, 255, 255, 0.42) 0.7px 1.2px),
|
||||
(13% 27% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
||||
(21% 74% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
||||
(26% 11% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
|
||||
(32% 44% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
|
||||
(39% 88% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
||||
(46% 16% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
|
||||
(57% 41% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
|
||||
(64% 79% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
||||
(72% 31% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
||||
(79% 93% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
|
||||
(88% 12% rgba(246, 196, 83, 0.36) 0.7px 1.2px),
|
||||
(93% 78% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
|
||||
(98% 28% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
|
||||
(2% 7% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
||||
(8% 56% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
|
||||
(15% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
|
||||
(18% 91% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
|
||||
(23% 39% rgba(255, 255, 255, 0.3) 0.5px 1px),
|
||||
(27% 67% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
||||
(34% 6% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
||||
(36% 81% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
|
||||
(42% 66% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
|
||||
(49% 4% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
||||
(51% 24% rgba(246, 196, 83, 0.3) 0.6px 1.1px),
|
||||
(56% 83% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
||||
(62% 7% rgba(255, 255, 255, 0.3) 0.5px 1px),
|
||||
(67% 68% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
|
||||
(70% 25% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
|
||||
(78% 11% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
||||
(82% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
|
||||
(86% 51% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
||||
(90% 33% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
|
||||
(96% 94% rgba(167, 139, 250, 0.32) 0.6px 1.1px);
|
||||
|
||||
@function star-gradient($star) {
|
||||
@return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, transparent #{list.nth($star, 5)});
|
||||
}
|
||||
|
||||
@function bright-star-gradient($star) {
|
||||
@return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, #{list.nth($star, 5)} calc(#{list.nth($star, 4)} + 0.3px) #{list.nth($star, 6)}, transparent #{list.nth($star, 7)});
|
||||
}
|
||||
|
||||
@function star-field($bright, $normal) {
|
||||
$gradients: ();
|
||||
|
||||
@each $star in $bright {
|
||||
$gradients: list.append($gradients, bright-star-gradient($star), comma);
|
||||
}
|
||||
|
||||
@each $star in $normal {
|
||||
$gradients: list.append($gradients, star-gradient($star), comma);
|
||||
}
|
||||
|
||||
@return $gradients;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.88;
|
||||
background:
|
||||
radial-gradient(ellipse at 18% 22%, rgba(124, 58, 237, 0.3), transparent 34%),
|
||||
radial-gradient(ellipse at 82% 10%, rgba(59, 130, 246, 0.18), transparent 30%),
|
||||
radial-gradient(ellipse at 78% 72%, rgba(217, 70, 239, 0.18), transparent 36%),
|
||||
radial-gradient(ellipse at 36% 92%, rgba(246, 196, 83, 0.1), transparent 34%),
|
||||
linear-gradient(118deg, transparent 0 22%, rgba(139, 92, 246, 0.1) 36%, transparent 55%),
|
||||
linear-gradient(62deg, transparent 0 32%, rgba(246, 196, 83, 0.06) 48%, transparent 68%);
|
||||
filter: saturate(1.18);
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.82;
|
||||
background-image: star-field($bright-stars, $stars);
|
||||
background-size: 100% 100%;
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
|
||||
}
|
||||
|
|
@ -55,24 +55,40 @@
|
|||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
background: rgba(2, 3, 9, 0.42);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(2, 3, 9, 0.24);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.drawer-panel {
|
||||
position: fixed;
|
||||
inset: 0 0 0 auto;
|
||||
z-index: 50;
|
||||
contain: paint;
|
||||
width: min(720px, 94vw);
|
||||
min-width: 360px;
|
||||
max-width: 94vw;
|
||||
overflow: auto;
|
||||
border-left: 1px solid var(--color-border);
|
||||
background: rgba(7, 9, 19, 0.96);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-left: 0;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(246, 196, 83, 0.92),
|
||||
rgba(139, 92, 246, 0.64) 48%,
|
||||
rgba(196, 181, 253, 0.72)
|
||||
) left top / 1px 100% no-repeat,
|
||||
rgba(7, 9, 19, 0.82);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
box-shadow:
|
||||
inset 8px 0 18px rgba(139, 92, 246, 0.08),
|
||||
var(--shadow-lg);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.drawer-panel::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -82,9 +98,10 @@
|
|||
}
|
||||
|
||||
.drawer-resize-handle {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: -18px;
|
||||
right: calc(var(--drawer-panel-width, min(720px, 94vw)) - 18px);
|
||||
z-index: 62;
|
||||
width: 14px;
|
||||
height: 72px;
|
||||
border-radius: var(--radius-pill);
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
|
||||
.hero,
|
||||
.game-hero,
|
||||
.page-hero,
|
||||
.origin-section,
|
||||
.section-grid,
|
||||
.info-grid {
|
||||
|
|
@ -68,11 +69,28 @@
|
|||
}
|
||||
|
||||
.hero,
|
||||
.game-hero {
|
||||
.game-hero,
|
||||
.page-hero {
|
||||
min-height: auto;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.game-hero::after {
|
||||
left: 0;
|
||||
opacity: 0.42;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(5, 7, 17, 0.28), rgba(5, 7, 17, 0.72)),
|
||||
var(--game-hero-image);
|
||||
background-position:
|
||||
center,
|
||||
right center;
|
||||
background-size:
|
||||
cover,
|
||||
cover;
|
||||
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
|
||||
}
|
||||
|
||||
.home-visual {
|
||||
justify-self: center;
|
||||
width: min(320px, 100%);
|
||||
|
|
@ -95,7 +113,7 @@
|
|||
padding-right: 0;
|
||||
padding-bottom: var(--space-5);
|
||||
border-right: 0;
|
||||
border-bottom: 2px solid rgba(34, 211, 238, 0.66);
|
||||
border-bottom: 2px solid rgba(246, 196, 83, 0.66);
|
||||
}
|
||||
|
||||
.dialogue-line {
|
||||
|
|
@ -174,7 +192,7 @@
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(11, 14, 27, 0.9);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.app-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 248px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
padding: var(--space-5);
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: rgba(11, 14, 27, 0.82);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
|
|
@ -26,6 +28,38 @@
|
|||
font-weight: 800;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.brand-name-main {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-text-primary) 0%,
|
||||
var(--color-text-primary) 46%,
|
||||
var(--color-accent-gold) 58%,
|
||||
var(--color-accent-gold) 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
background-position: 0 0;
|
||||
background-size: 220% 100%;
|
||||
color: transparent;
|
||||
transition: background-position 620ms var(--ease-standard);
|
||||
}
|
||||
|
||||
.brand-name-accent {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.brand:hover .brand-name-main {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
.brand-name-accent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: block;
|
||||
width: 34px;
|
||||
|
|
@ -65,7 +99,7 @@
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
background: var(--color-accent-cyan);
|
||||
background: var(--color-accent-gold);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 20px 20px;
|
||||
|
|
@ -108,16 +142,66 @@
|
|||
}
|
||||
|
||||
.sidebar-note {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin-top: auto;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.62);
|
||||
background: rgba(16, 20, 38, 0.58);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sidebar-note::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
|
||||
radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-note::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-note > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-note .badge {
|
||||
border: 1px solid rgba(246, 196, 83, 0.24);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.16));
|
||||
color: var(--color-accent-gold);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-note p {
|
||||
margin: 10px 0 0;
|
||||
margin: 12px 0 0;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.sidebar-storage-actions {
|
||||
|
|
@ -128,6 +212,7 @@
|
|||
|
||||
.sidebar-action-button {
|
||||
display: inline-flex;
|
||||
background: rgba(7, 10, 24, 0.36);
|
||||
}
|
||||
|
||||
.content-shell {
|
||||
|
|
@ -149,7 +234,7 @@
|
|||
padding: 0 var(--space-8);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: rgba(7, 9, 19, 0.78);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.topbar strong {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
--color-secondary: #3b82f6;
|
||||
--color-secondary-soft: rgba(59, 130, 246, 0.14);
|
||||
--color-accent-cyan: #22d3ee;
|
||||
--color-accent-gold: #f6c453;
|
||||
--color-accent-pink: #d946ef;
|
||||
--color-accent-indigo: #6366f1;
|
||||
|
||||
|
|
@ -48,9 +49,11 @@
|
|||
rgba(217, 70, 239, 0.12)
|
||||
);
|
||||
--gradient-page:
|
||||
radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.16), transparent 34%),
|
||||
radial-gradient(circle at 85% 20%, rgba(37, 99, 235, 0.12), transparent 30%),
|
||||
radial-gradient(circle at 55% 90%, rgba(217, 70, 239, 0.08), transparent 35%),
|
||||
radial-gradient(ellipse at 16% 8%, rgba(139, 92, 246, 0.28), transparent 38%),
|
||||
radial-gradient(ellipse at 86% 18%, rgba(99, 102, 241, 0.2), transparent 34%),
|
||||
radial-gradient(ellipse at 58% 82%, rgba(217, 70, 239, 0.14), transparent 42%),
|
||||
radial-gradient(ellipse at 28% 68%, rgba(246, 196, 83, 0.08), transparent 36%),
|
||||
linear-gradient(145deg, rgba(8, 10, 24, 0.2), rgba(16, 11, 34, 0.38) 48%, rgba(5, 7, 17, 0.24)),
|
||||
#070913;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,52 @@
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(16, 20, 38, 0.76);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.toolbox-head.page-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
overflow: visible;
|
||||
border-color: transparent;
|
||||
background:
|
||||
var(--gradient-nebula),
|
||||
radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
|
||||
box-shadow: var(--shadow-md);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.toolbox-head.page-hero > * {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.toolbox-head-embedded.page-hero {
|
||||
min-height: 132px;
|
||||
padding: var(--space-5);
|
||||
background:
|
||||
var(--gradient-nebula),
|
||||
radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.08), transparent 30%),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.94), rgba(5, 7, 17, 0.94));
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.toolbox-head-embedded.page-hero::before {
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 24%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.28), rgba(139, 92, 246, 0.18) 52%, rgba(196, 181, 253, 0.24));
|
||||
}
|
||||
|
||||
.toolbox-head-embedded.page-hero::after {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(5, 7, 17, 0.08), rgba(5, 7, 17, 0.42)),
|
||||
radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.12), transparent 32%);
|
||||
}
|
||||
|
||||
.toolbox-head-embedded h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.55rem, 3vw, 2.2rem);
|
||||
}
|
||||
|
||||
.toolbox-title {
|
||||
|
|
@ -36,7 +81,7 @@
|
|||
min-height: 100px;
|
||||
border-color: var(--color-primary-border);
|
||||
background:
|
||||
radial-gradient(circle at 50% 35%, rgba(34, 211, 238, 0.18), transparent 44%),
|
||||
radial-gradient(circle at 50% 35%, rgba(246, 196, 83, 0.18), transparent 44%),
|
||||
rgba(21, 26, 48, 0.86);
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +114,7 @@
|
|||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
z-index: 120;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 42px);
|
||||
gap: 7px;
|
||||
|
|
@ -78,7 +123,7 @@
|
|||
padding: 9px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(12, 15, 32, 0.96);
|
||||
background: rgba(10, 13, 28, 0.99);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
|
|
@ -92,9 +137,9 @@
|
|||
}
|
||||
|
||||
.toolbox-icon-picker-menu button.active {
|
||||
border-color: var(--color-accent-cyan);
|
||||
background: rgba(34, 211, 238, 0.12);
|
||||
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
|
||||
border-color: var(--color-accent-gold);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.toolbox-icon-picker-menu img {
|
||||
|
|
@ -105,13 +150,13 @@
|
|||
|
||||
.toolbox-title:focus {
|
||||
background: rgba(7, 10, 24, 0.72);
|
||||
outline: 1px solid rgba(34, 211, 238, 0.72);
|
||||
outline: 1px solid rgba(246, 196, 83, 0.72);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.tool-add-controls {
|
||||
position: relative;
|
||||
z-index: 80;
|
||||
z-index: 280;
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -147,7 +192,7 @@
|
|||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 120;
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -157,7 +202,7 @@
|
|||
padding: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(12, 15, 32, 0.96);
|
||||
background: rgba(10, 13, 28, 0.99);
|
||||
box-shadow: var(--shadow-lg);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -179,7 +224,7 @@
|
|||
right: 18px;
|
||||
bottom: 100%;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid rgba(12, 15, 32, 0.96);
|
||||
border-bottom: 7px solid rgba(10, 13, 28, 0.99);
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
|
||||
|
|
@ -207,13 +252,6 @@
|
|||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.toolbox-summary {
|
||||
max-width: 760px;
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.toolbox-actions-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -251,7 +289,79 @@
|
|||
}
|
||||
|
||||
.module {
|
||||
position: relative;
|
||||
contain: paint;
|
||||
overflow: hidden;
|
||||
border-color: transparent;
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.module::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background: rgba(165, 180, 252, 0.14);
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
transition: background var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.module::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
|
||||
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
|
||||
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
transition: background var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.module > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.module:hover {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 14px rgba(139, 92, 246, 0.14),
|
||||
0 0 24px rgba(196, 181, 253, 0.08);
|
||||
}
|
||||
|
||||
.module:hover::before {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(196, 181, 253, 0.28));
|
||||
}
|
||||
|
||||
.module:hover::after {
|
||||
background:
|
||||
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(196, 181, 253, 0.5) 0 18px, transparent 27px),
|
||||
linear-gradient(90deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%),
|
||||
linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%);
|
||||
}
|
||||
|
||||
.module.is-dragging {
|
||||
|
|
@ -261,16 +371,16 @@
|
|||
}
|
||||
|
||||
.module.is-drop-target {
|
||||
border-color: rgba(34, 211, 238, 0.72);
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset 0 3px 0 rgba(34, 211, 238, 0.8);
|
||||
inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.module.is-drop-target.drop-after {
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset 0 -3px 0 rgba(34, 211, 238, 0.8);
|
||||
inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.module header {
|
||||
|
|
@ -360,7 +470,7 @@
|
|||
|
||||
.module-title:focus {
|
||||
background: rgba(7, 10, 24, 0.72);
|
||||
outline: 1px solid rgba(34, 211, 238, 0.72);
|
||||
outline: 1px solid rgba(246, 196, 83, 0.72);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -511,10 +621,6 @@ textarea:focus {
|
|||
|
||||
.checklist input[type="checkbox"] {
|
||||
flex: 0 0 auto;
|
||||
width: 20px;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.checklist-item.is-complete .checklist-item-main > span {
|
||||
|
|
@ -678,15 +784,15 @@ textarea:focus {
|
|||
}
|
||||
|
||||
.dropzone:hover {
|
||||
border-color: var(--color-accent-cyan);
|
||||
background: rgba(34, 211, 238, 0.1);
|
||||
box-shadow: 0 0 30px rgba(34, 211, 238, 0.12);
|
||||
border-color: var(--color-accent-gold);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
box-shadow: 0 0 30px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.dropzone.is-drag-over {
|
||||
border-color: var(--color-accent-cyan);
|
||||
background: rgba(34, 211, 238, 0.14);
|
||||
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
|
||||
border-color: var(--color-accent-gold);
|
||||
background: rgba(246, 196, 83, 0.14);
|
||||
box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.paste-target {
|
||||
|
|
@ -734,7 +840,7 @@ textarea:focus {
|
|||
|
||||
.shot-preview:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.28);
|
||||
box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.28);
|
||||
}
|
||||
|
||||
.shots img {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use "tokens";
|
||||
@use "nebula";
|
||||
@use "base";
|
||||
@use "shell";
|
||||
@use "home";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue