Skip to content

Commit fbcde4f

Browse files
ToolboxAidToolboxAid
committed
Align all Game Foundry Studio tool pages to the Builder Creator Publisher style - PR_26151_010-gamefoundry-align-tool-page-style
1 parent a8da3fa commit fbcde4f

44 files changed

Lines changed: 424 additions & 426 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎GameFoundryStudio/assets/css/gamefoundrystudio.css‎

Lines changed: 10 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,6 @@
162162
.tool-card,
163163
.game-card,
164164
.panel,
165-
.meaning-panel,
166-
.meaning-center,
167165
.tool-column,
168166
.tool-center-panel,
169167
.control-card,
@@ -665,82 +663,6 @@ details.vertical-accordion[open] summary:after {
665663
border-color: rgba(32, 214, 255, .35)
666664
}
667665

668-
.meaning-layout {
669-
display: grid;
670-
grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.15fr) minmax(220px, .8fr);
671-
grid-template-rows: auto minmax(0, 1fr);
672-
gap: 18px;
673-
align-items: stretch
674-
}
675-
676-
.meaning-panel.left-panel {
677-
grid-column: 1;
678-
grid-row: 1 / span 2;
679-
background: linear-gradient(180deg, var(--meaning-soft), rgba(255, 255, 255, .025))
680-
}
681-
682-
.meaning-center {
683-
grid-column: 2;
684-
grid-row: 2;
685-
padding: 20px
686-
}
687-
688-
.meaning-panel.right-panel {
689-
grid-column: 3;
690-
grid-row: 1 / span 2;
691-
background: linear-gradient(180deg, rgba(255, 255, 255, .045), var(--meaning-soft))
692-
}
693-
694-
.meaning-panel {
695-
border-color: var(--meaning-border);
696-
border-top: 5px solid var(--meaning-color)
697-
}
698-
699-
.meaning-panel h2,
700-
.meaning-center h2 {
701-
margin: 0;
702-
color: var(--meaning-color)
703-
}
704-
705-
.meaning-panel-body {
706-
padding: 20px
707-
}
708-
709-
.meaning-panel ul {
710-
display: grid;
711-
gap: 10px;
712-
margin: 14px 0 0;
713-
padding-left: 18px;
714-
color: var(--muted);
715-
line-height: 1.5
716-
}
717-
718-
.meaning-center p {
719-
color: var(--muted);
720-
line-height: 1.55
721-
}
722-
723-
.meaning-tool-list {
724-
display: grid;
725-
gap: 12px;
726-
margin-top: 18px
727-
}
728-
729-
.meaning-tool-link {
730-
border: 1px solid var(--meaning-border);
731-
border-radius: 14px;
732-
padding: 13px 14px;
733-
background: rgba(7, 10, 18, .45);
734-
display: flex;
735-
justify-content: space-between;
736-
gap: 12px;
737-
align-items: center
738-
}
739-
740-
.meaning-tool-link span {
741-
color: var(--muted)
742-
}
743-
744666
body.tool-focus-mode .site-header,
745667
body.tool-focus-mode .page-title,
746668
body.tool-focus-mode .footer {
@@ -760,8 +682,7 @@ body.tool-focus-mode .section {
760682
padding: 0
761683
}
762684

763-
body.tool-focus-mode .tool-workspace,
764-
body.tool-focus-mode .meaning-layout {
685+
body.tool-focus-mode .tool-workspace {
765686
height: 100vh;
766687
grid-template-columns: 280px minmax(0, 1fr) 280px;
767688
grid-template-rows: auto minmax(0, 1fr);
@@ -770,18 +691,15 @@ body.tool-focus-mode .meaning-layout {
770691
align-items: stretch
771692
}
772693

773-
body.tool-focus-mode .tool-workspace.is-left-collapsed,
774-
body.tool-focus-mode .meaning-layout.is-left-collapsed {
694+
body.tool-focus-mode .tool-workspace.is-left-collapsed {
775695
grid-template-columns: 56px minmax(0, 1fr) 280px
776696
}
777697

778-
body.tool-focus-mode .tool-workspace.is-right-collapsed,
779-
body.tool-focus-mode .meaning-layout.is-right-collapsed {
698+
body.tool-focus-mode .tool-workspace.is-right-collapsed {
780699
grid-template-columns: 280px minmax(0, 1fr) 56px
781700
}
782701

783-
body.tool-focus-mode .tool-workspace.is-left-collapsed.is-right-collapsed,
784-
body.tool-focus-mode .meaning-layout.is-left-collapsed.is-right-collapsed {
702+
body.tool-focus-mode .tool-workspace.is-left-collapsed.is-right-collapsed {
785703
grid-template-columns: 56px minmax(0, 1fr) 56px
786704
}
787705

@@ -798,27 +716,22 @@ body.tool-focus-mode .tool-display-mode {
798716
}
799717

800718
body.tool-focus-mode .tool-column,
801-
body.tool-focus-mode .tool-center-panel,
802-
body.tool-focus-mode .meaning-panel,
803-
body.tool-focus-mode .meaning-center {
719+
body.tool-focus-mode .tool-center-panel {
804720
height: calc(100vh - 20px);
805721
overflow: auto
806722
}
807723

808-
body.tool-focus-mode .tool-column:first-of-type,
809-
body.tool-focus-mode .meaning-panel.left-panel {
724+
body.tool-focus-mode .tool-column:first-of-type {
810725
grid-column: 1;
811726
grid-row: 1 / span 2
812727
}
813728

814-
body.tool-focus-mode .tool-center-panel,
815-
body.tool-focus-mode .meaning-center {
729+
body.tool-focus-mode .tool-center-panel {
816730
grid-column: 2;
817731
grid-row: 2
818732
}
819733

820-
body.tool-focus-mode .tool-column:last-of-type,
821-
body.tool-focus-mode .meaning-panel.right-panel {
734+
body.tool-focus-mode .tool-column:last-of-type {
822735
grid-column: 3;
823736
grid-row: 1 / span 2
824737
}
@@ -837,23 +750,16 @@ body.tool-focus-mode .meaning-panel.right-panel {
837750
display: none
838751
}
839752

840-
.meaning-layout,
841753
.tool-workspace {
842754
grid-template-columns: 1fr
843755
}
844756

845757
.tool-display-mode,
846758
body.tool-focus-mode .tool-display-mode,
847759
.tool-column:first-of-type,
848-
.meaning-panel.left-panel,
849-
.meaning-center,
850-
.meaning-panel.right-panel,
851760
.tool-center-panel,
852761
.tool-column:last-of-type,
853762
body.tool-focus-mode .tool-column:first-of-type,
854-
body.tool-focus-mode .meaning-panel.left-panel,
855-
body.tool-focus-mode .meaning-center,
856-
body.tool-focus-mode .meaning-panel.right-panel,
857763
body.tool-focus-mode .tool-center-panel,
858764
body.tool-focus-mode .tool-column:last-of-type {
859765
grid-column: auto;
@@ -870,16 +776,13 @@ body.tool-focus-mode .meaning-panel.right-panel {
870776
overflow: auto
871777
}
872778

873-
body.tool-focus-mode .tool-workspace,
874-
body.tool-focus-mode .meaning-layout {
779+
body.tool-focus-mode .tool-workspace {
875780
height: auto;
876781
grid-template-columns: 1fr
877782
}
878783

879784
body.tool-focus-mode .tool-column,
880-
body.tool-focus-mode .tool-center-panel,
881-
body.tool-focus-mode .meaning-panel,
882-
body.tool-focus-mode .meaning-center {
785+
body.tool-focus-mode .tool-center-panel {
883786
height: auto
884787
}
885788
}

‎GameFoundryStudio/tools/ai-assistant.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../assets/css/styles.css">
1111
</head>
1212

13-
<body>
13+
<body class="meaning-molten-orange">
1414
<div data-partial="header-nav"></div>
1515
<main>
1616
<section class="page-title">
@@ -29,21 +29,24 @@ <h2>Toolbox</h2>
2929
</div>
3030
<div class="accordion-stack">
3131
<details class="vertical-accordion" open>
32-
<summary>Launch</summary>
33-
<div class="accordion-body">Open, configure, and prepare AI Assistant work.</div>
32+
<summary>Toolbox Accordion 1</summary>
33+
<div class="accordion-body">AI Assistant toolbox panel 1.</div>
3434
</details>
3535
</div>
3636
</aside>
3737
<div data-tool-display-mode></div>
38-
<section class="tool-center-panel page-hero"><img src="../assets/images/tools/ai-assistant.png" alt="AI Assistant"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for AI Assistant. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
38+
<section class="tool-center-panel"><img src="../assets/images/forge-bot.png" alt="ForgeBot">
39+
<h2>Workspace</h2>
40+
<p>Use this center region for the primary tool canvas, editor, preview, or guided workflow.</p>
41+
</section>
3942
<aside class="tool-column">
4043
<div class="tool-column-header forge-gold">
41-
<h2>Status</h2>
44+
<h2>Inspector</h2>
4245
</div>
4346
<div class="accordion-stack">
4447
<details class="vertical-accordion" open>
45-
<summary>Workflow</summary>
46-
<div class="accordion-body tool-stat-list"><div class="mini-stat"><strong>1</strong>Open workspace</div><div class="mini-stat"><strong>2</strong>Create or edit</div><div class="mini-stat"><strong>3</strong>Save to manifest</div></div>
48+
<summary>Inspector Accordion 1</summary>
49+
<div class="accordion-body">AI Assistant inspector panel 1.</div>
4750
</details>
4851
</div>
4952
</aside>

‎GameFoundryStudio/tools/animation-studio.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../assets/css/styles.css">
1111
</head>
1212

13-
<body>
13+
<body class="meaning-molten-orange">
1414
<div data-partial="header-nav"></div>
1515
<main>
1616
<section class="page-title">
@@ -29,21 +29,24 @@ <h2>Toolbox</h2>
2929
</div>
3030
<div class="accordion-stack">
3131
<details class="vertical-accordion" open>
32-
<summary>Launch</summary>
33-
<div class="accordion-body">Open, configure, and prepare Animation Studio work.</div>
32+
<summary>Toolbox Accordion 1</summary>
33+
<div class="accordion-body">Animation Studio toolbox panel 1.</div>
3434
</details>
3535
</div>
3636
</aside>
3737
<div data-tool-display-mode></div>
38-
<section class="tool-center-panel page-hero"><img src="../assets/images/tools/animation-studio.png" alt="Animation Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Animation Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
38+
<section class="tool-center-panel"><img src="../assets/images/forge-bot.png" alt="ForgeBot">
39+
<h2>Workspace</h2>
40+
<p>Use this center region for the primary tool canvas, editor, preview, or guided workflow.</p>
41+
</section>
3942
<aside class="tool-column">
4043
<div class="tool-column-header forge-gold">
41-
<h2>Status</h2>
44+
<h2>Inspector</h2>
4245
</div>
4346
<div class="accordion-stack">
4447
<details class="vertical-accordion" open>
45-
<summary>Workflow</summary>
46-
<div class="accordion-body tool-stat-list"><div class="mini-stat"><strong>1</strong>Open workspace</div><div class="mini-stat"><strong>2</strong>Create or edit</div><div class="mini-stat"><strong>3</strong>Save to manifest</div></div>
48+
<summary>Inspector Accordion 1</summary>
49+
<div class="accordion-body">Animation Studio inspector panel 1.</div>
4750
</details>
4851
</div>
4952
</aside>

‎GameFoundryStudio/tools/asset-studio.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../assets/css/styles.css">
1111
</head>
1212

13-
<body>
13+
<body class="meaning-molten-orange">
1414
<div data-partial="header-nav"></div>
1515
<main>
1616
<section class="page-title">
@@ -29,21 +29,24 @@ <h2>Toolbox</h2>
2929
</div>
3030
<div class="accordion-stack">
3131
<details class="vertical-accordion" open>
32-
<summary>Launch</summary>
33-
<div class="accordion-body">Open, configure, and prepare Asset Studio work.</div>
32+
<summary>Toolbox Accordion 1</summary>
33+
<div class="accordion-body">Asset Studio toolbox panel 1.</div>
3434
</details>
3535
</div>
3636
</aside>
3737
<div data-tool-display-mode></div>
38-
<section class="tool-center-panel page-hero"><img src="../assets/images/tools/asset-studio.png" alt="Asset Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Asset Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
38+
<section class="tool-center-panel"><img src="../assets/images/forge-bot.png" alt="ForgeBot">
39+
<h2>Workspace</h2>
40+
<p>Use this center region for the primary tool canvas, editor, preview, or guided workflow.</p>
41+
</section>
3942
<aside class="tool-column">
4043
<div class="tool-column-header forge-gold">
41-
<h2>Status</h2>
44+
<h2>Inspector</h2>
4245
</div>
4346
<div class="accordion-stack">
4447
<details class="vertical-accordion" open>
45-
<summary>Workflow</summary>
46-
<div class="accordion-body tool-stat-list"><div class="mini-stat"><strong>1</strong>Open workspace</div><div class="mini-stat"><strong>2</strong>Create or edit</div><div class="mini-stat"><strong>3</strong>Save to manifest</div></div>
48+
<summary>Inspector Accordion 1</summary>
49+
<div class="accordion-body">Asset Studio inspector panel 1.</div>
4750
</details>
4851
</div>
4952
</aside>

‎GameFoundryStudio/tools/code-studio.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../assets/css/styles.css">
1111
</head>
1212

13-
<body>
13+
<body class="meaning-molten-orange">
1414
<div data-partial="header-nav"></div>
1515
<main>
1616
<section class="page-title">
@@ -29,21 +29,24 @@ <h2>Toolbox</h2>
2929
</div>
3030
<div class="accordion-stack">
3131
<details class="vertical-accordion" open>
32-
<summary>Launch</summary>
33-
<div class="accordion-body">Open, configure, and prepare Code Studio work.</div>
32+
<summary>Toolbox Accordion 1</summary>
33+
<div class="accordion-body">Code Studio toolbox panel 1.</div>
3434
</details>
3535
</div>
3636
</aside>
3737
<div data-tool-display-mode></div>
38-
<section class="tool-center-panel page-hero"><img src="../assets/images/tools/code-studio.png" alt="Code Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Code Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
38+
<section class="tool-center-panel"><img src="../assets/images/forge-bot.png" alt="ForgeBot">
39+
<h2>Workspace</h2>
40+
<p>Use this center region for the primary tool canvas, editor, preview, or guided workflow.</p>
41+
</section>
3942
<aside class="tool-column">
4043
<div class="tool-column-header forge-gold">
41-
<h2>Status</h2>
44+
<h2>Inspector</h2>
4245
</div>
4346
<div class="accordion-stack">
4447
<details class="vertical-accordion" open>
45-
<summary>Workflow</summary>
46-
<div class="accordion-body tool-stat-list"><div class="mini-stat"><strong>1</strong>Open workspace</div><div class="mini-stat"><strong>2</strong>Create or edit</div><div class="mini-stat"><strong>3</strong>Save to manifest</div></div>
48+
<summary>Inspector Accordion 1</summary>
49+
<div class="accordion-body">Code Studio inspector panel 1.</div>
4750
</details>
4851
</div>
4952
</aside>

‎GameFoundryStudio/tools/game-builder.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../assets/css/styles.css">
1111
</head>
1212

13-
<body>
13+
<body class="meaning-molten-orange">
1414
<div data-partial="header-nav"></div>
1515
<main>
1616
<section class="page-title">
@@ -29,21 +29,24 @@ <h2>Toolbox</h2>
2929
</div>
3030
<div class="accordion-stack">
3131
<details class="vertical-accordion" open>
32-
<summary>Launch</summary>
33-
<div class="accordion-body">Open, configure, and prepare Game Builder work.</div>
32+
<summary>Toolbox Accordion 1</summary>
33+
<div class="accordion-body">Game Builder toolbox panel 1.</div>
3434
</details>
3535
</div>
3636
</aside>
3737
<div data-tool-display-mode></div>
38-
<section class="tool-center-panel page-hero"><img src="../assets/images/tools/game-builder.png" alt="Game Builder"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Game Builder. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
38+
<section class="tool-center-panel"><img src="../assets/images/forge-bot.png" alt="ForgeBot">
39+
<h2>Workspace</h2>
40+
<p>Use this center region for the primary tool canvas, editor, preview, or guided workflow.</p>
41+
</section>
3942
<aside class="tool-column">
4043
<div class="tool-column-header forge-gold">
41-
<h2>Status</h2>
44+
<h2>Inspector</h2>
4245
</div>
4346
<div class="accordion-stack">
4447
<details class="vertical-accordion" open>
45-
<summary>Workflow</summary>
46-
<div class="accordion-body tool-stat-list"><div class="mini-stat"><strong>1</strong>Open workspace</div><div class="mini-stat"><strong>2</strong>Create or edit</div><div class="mini-stat"><strong>3</strong>Save to manifest</div></div>
48+
<summary>Inspector Accordion 1</summary>
49+
<div class="accordion-body">Game Builder inspector panel 1.</div>
4750
</details>
4851
</div>
4952
</aside>

0 commit comments

Comments
 (0)