Skip to content

Commit aee14fd

Browse files
ToolboxAidToolboxAid
committed
Normalize Cloud to toolbox template and remove remaining safe styles CSS usage - PR_26154_025-cloud-template-styles-cleanup
1 parent 75be94b commit aee14fd

43 files changed

Lines changed: 739 additions & 103 deletions

File tree

Some content is hidden

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

‎admin/branding.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Branding - Game Foundry Studio</title>
88
<meta name="description" content="Game Foundry Studio brand colors, mascots, and assets.">
99
<link rel="icon" href="/favicon.svg">
10-
<link rel="stylesheet" href="../assets/theme/v2/css/styles.css">
10+
<link rel="stylesheet" href="../assets/theme/v2/css/theme.css">
1111
</head>
1212

1313
<body>

‎assets/theme/v2/css/accordion.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ summary::-webkit-details-marker {
1616
gap: var(--space-12)
1717
}
1818

19+
.accordion-stack {
20+
display: grid;
21+
gap: var(--space-10);
22+
padding: var(--space-14)
23+
}
24+
1925
details.vertical-accordion {
2026
border: var(--border-standard);
2127
border-radius: var(--radius-lg);
@@ -58,6 +64,57 @@ details.vertical-accordion summary:after {
5864
flex: 0 0 auto
5965
}
6066

67+
.horizontal-accordion-toggle {
68+
--accordion-button-border: var(--line);
69+
--accordion-button-background: var(--panel-soft);
70+
--accordion-button-color: var(--gold);
71+
min-width: var(--space-20);
72+
width: var(--space-20);
73+
height: var(--space-20);
74+
padding: var(--space-0);
75+
border: var(--border-standard);
76+
border-color: var(--accordion-button-border);
77+
border-radius: var(--radius-pill);
78+
background: var(--accordion-button-background);
79+
color: var(--accordion-button-color);
80+
line-height: var(--line-height-single);
81+
display: inline-grid;
82+
place-items: center;
83+
flex: 0 0 auto;
84+
margin-left: auto;
85+
font-size: var(--space-0);
86+
overflow: hidden;
87+
position: relative
88+
}
89+
90+
.horizontal-accordion-toggle:before {
91+
content: "";
92+
position: absolute;
93+
top: 50%;
94+
left: 50%;
95+
width: var(--space-14);
96+
height: var(--space-14);
97+
background: currentColor;
98+
clip-path: polygon(70% 50%, 30% 20%, 30% 80%);
99+
transform-origin: center
100+
}
101+
102+
.horizontal-accordion-toggle[aria-expanded="true"]:before {
103+
transform: translate(-50%, -50%)
104+
}
105+
106+
.horizontal-accordion-toggle[aria-expanded="false"]:before {
107+
transform: translate(-50%, -50%) rotate(180deg)
108+
}
109+
110+
.horizontal-accordion-toggle--left[aria-expanded="true"]:before {
111+
transform: translate(-50%, -50%) rotate(180deg)
112+
}
113+
114+
.horizontal-accordion-toggle--left[aria-expanded="false"]:before {
115+
transform: translate(-50%, -50%)
116+
}
117+
61118
details.vertical-accordion summary:after {
62119
content: "";
63120
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);

‎assets/theme/v2/css/colors.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,18 @@
4040
--cyan-soft: rgba(34, 211, 238, .10);
4141
--purple-soft: rgba(184, 119, 255, .08);
4242
--steel-soft: rgba(107, 114, 128, .14);
43+
--meaning-molten-orange-soft: rgba(255, 122, 0, .14);
44+
--meaning-molten-orange-border: rgba(255, 122, 0, .48);
45+
--meaning-electric-blue-soft: rgba(77, 163, 255, .14);
46+
--meaning-electric-blue-border: rgba(77, 163, 255, .48);
47+
--meaning-forge-gold-soft: rgba(255, 200, 87, .14);
48+
--meaning-forge-gold-border: rgba(255, 200, 87, .48);
49+
--meaning-arcade-cyan-soft: rgba(34, 211, 238, .14);
50+
--meaning-arcade-cyan-border: rgba(34, 211, 238, .48);
51+
--meaning-purple-soft: rgba(184, 119, 255, .14);
52+
--meaning-purple-border: rgba(184, 119, 255, .48);
53+
--meaning-steel-gray-soft: rgba(107, 114, 128, .18);
54+
--meaning-steel-gray-border: rgba(107, 114, 128, .56);
4355
--transparent: transparent;
4456
--body-background: radial-gradient(circle at 20% 0%, rgba(255, 122, 0, .16), var(--transparent) 28%), radial-gradient(circle at 80% 10%, rgba(32, 214, 255, .10), var(--transparent) 24%), var(--bg);
4557
--card-background: linear-gradient(180deg, var(--panel-soft-strong), var(--panel-soft-subtle));
@@ -175,3 +187,93 @@
175187
--tool-group-color: var(--green);
176188
--tool-group-accent: var(--green)
177189
}
190+
191+
.meaning-molten-orange {
192+
--meaning-color: var(--molten-orange);
193+
--meaning-soft: var(--meaning-molten-orange-soft);
194+
--meaning-border: var(--meaning-molten-orange-border)
195+
}
196+
197+
.meaning-electric-blue {
198+
--meaning-color: var(--electric-blue);
199+
--meaning-soft: var(--meaning-electric-blue-soft);
200+
--meaning-border: var(--meaning-electric-blue-border)
201+
}
202+
203+
.meaning-forge-gold {
204+
--meaning-color: var(--forge-gold);
205+
--meaning-soft: var(--meaning-forge-gold-soft);
206+
--meaning-border: var(--meaning-forge-gold-border)
207+
}
208+
209+
.meaning-arcade-cyan {
210+
--meaning-color: var(--arcade-cyan);
211+
--meaning-soft: var(--meaning-arcade-cyan-soft);
212+
--meaning-border: var(--meaning-arcade-cyan-border)
213+
}
214+
215+
.meaning-purple {
216+
--meaning-color: var(--purple);
217+
--meaning-soft: var(--meaning-purple-soft);
218+
--meaning-border: var(--meaning-purple-border)
219+
}
220+
221+
.meaning-steel-gray {
222+
--meaning-color: var(--steel-gray);
223+
--meaning-soft: var(--meaning-steel-gray-soft);
224+
--meaning-border: var(--meaning-steel-gray-border)
225+
}
226+
227+
.tool-column-header.molten-orange {
228+
background: var(--orange-soft-medium)
229+
}
230+
231+
.tool-column-header.electric-blue {
232+
background: var(--blue-soft)
233+
}
234+
235+
.tool-column-header.forge-gold {
236+
background: var(--gold-soft)
237+
}
238+
239+
.tool-column-header.arcade-cyan {
240+
background: var(--cyan-soft)
241+
}
242+
243+
.tool-column-header.purple {
244+
background: var(--purple-soft)
245+
}
246+
247+
.tool-column-header.steel-gray {
248+
background: var(--steel-soft)
249+
}
250+
251+
.tool-column-header.molten-orange h2,
252+
.tool-column-header.molten-orange h3 {
253+
color: var(--molten-orange)
254+
}
255+
256+
.tool-column-header.electric-blue h2,
257+
.tool-column-header.electric-blue h3 {
258+
color: var(--electric-blue)
259+
}
260+
261+
.tool-column-header.forge-gold h2,
262+
.tool-column-header.forge-gold h3 {
263+
color: var(--forge-gold)
264+
}
265+
266+
.tool-column-header.arcade-cyan h2,
267+
.tool-column-header.arcade-cyan h3 {
268+
color: var(--arcade-cyan)
269+
}
270+
271+
.tool-column-header.purple h2,
272+
.tool-column-header.purple h3 {
273+
color: var(--purple)
274+
}
275+
276+
.tool-column-header.steel-gray h2,
277+
.tool-column-header.steel-gray h3 {
278+
color: var(--steel-gray)
279+
}

‎assets/theme/v2/css/layout.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,124 @@ div {
108108
border-bottom: var(--border-standard)
109109
}
110110

111+
.page-hero {
112+
display: grid;
113+
grid-template-columns: var(--page-hero-columns);
114+
gap: var(--space-28);
115+
align-items: center
116+
}
117+
118+
.tool-workspace {
119+
display: grid;
120+
grid-template-columns: var(--tool-workspace-columns);
121+
grid-template-rows: auto minmax(var(--space-0), 1fr);
122+
gap: var(--space-18);
123+
align-items: start
124+
}
125+
126+
.tool-workspace.is-left-collapsed {
127+
grid-template-columns: var(--tool-workspace-left-collapsed-columns)
128+
}
129+
130+
.tool-workspace.is-right-collapsed {
131+
grid-template-columns: var(--tool-workspace-right-collapsed-columns)
132+
}
133+
134+
.tool-workspace.is-left-collapsed.is-right-collapsed {
135+
grid-template-columns: var(--tool-workspace-both-collapsed-columns)
136+
}
137+
138+
.tool-column:first-of-type {
139+
grid-column: 1;
140+
grid-row: 1 / span 2
141+
}
142+
143+
.tool-column:last-of-type {
144+
grid-column: 3;
145+
grid-row: 1 / span 2
146+
}
147+
148+
.tool-display-mode {
149+
grid-column: 2;
150+
grid-row: 1
151+
}
152+
153+
.tool-center-panel {
154+
grid-column: 2;
155+
grid-row: 2;
156+
min-width: var(--space-0)
157+
}
158+
159+
body.tool-focus-mode .site-header,
160+
body.tool-focus-mode .page-title,
161+
body.tool-focus-mode .footer {
162+
display: none !important
163+
}
164+
165+
body.tool-focus-mode {
166+
overflow: hidden
167+
}
168+
169+
body.tool-focus-mode .container {
170+
width: 100%;
171+
max-width: none
172+
}
173+
174+
body.tool-focus-mode .section {
175+
padding: var(--space-0)
176+
}
177+
178+
body.tool-focus-mode .tool-workspace {
179+
height: 100vh;
180+
grid-template-columns: var(--tool-workspace-columns);
181+
grid-template-rows: auto minmax(var(--space-0), 1fr);
182+
gap: var(--space-10);
183+
padding: var(--space-10);
184+
align-items: stretch
185+
}
186+
187+
body.tool-focus-mode .tool-workspace.is-left-collapsed {
188+
grid-template-columns: var(--tool-workspace-left-collapsed-columns)
189+
}
190+
191+
body.tool-focus-mode .tool-workspace.is-right-collapsed {
192+
grid-template-columns: var(--tool-workspace-right-collapsed-columns)
193+
}
194+
195+
body.tool-focus-mode .tool-workspace.is-left-collapsed.is-right-collapsed {
196+
grid-template-columns: var(--tool-workspace-both-collapsed-columns)
197+
}
198+
199+
body.tool-focus-mode .tool-display-mode {
200+
grid-column: 2;
201+
grid-row: 1;
202+
position: sticky;
203+
top: var(--space-10);
204+
z-index: var(--z-index-md);
205+
margin: var(--space-0)
206+
}
207+
208+
body.tool-focus-mode .tool-column,
209+
body.tool-focus-mode .tool-center-panel {
210+
height: calc(100vh - var(--space-20));
211+
overflow: auto
212+
}
213+
214+
body.tool-focus-mode .tool-column:first-of-type {
215+
grid-column: 1;
216+
grid-row: 1 / span 2
217+
}
218+
219+
body.tool-focus-mode .tool-center-panel {
220+
grid-column: 2;
221+
grid-row: 2
222+
}
223+
224+
body.tool-focus-mode .tool-column:last-of-type {
225+
grid-column: 3;
226+
grid-row: 1 / span 2
227+
}
228+
111229
.account-panel {
112230
display: grid;
113231
grid-template-columns: var(--admin-panel-columns);
@@ -491,6 +609,7 @@ div {
491609
@media(max-width:980px) {
492610

493611
.hero-grid,
612+
.page-hero,
494613
.split,
495614
.split.reverse,
496615
.account-panel,
@@ -528,6 +647,42 @@ div {
528647
.footer__tagline {
529648
justify-self: start
530649
}
650+
651+
.tool-workspace {
652+
grid-template-columns: var(--one-column)
653+
}
654+
655+
.tool-display-mode,
656+
body.tool-focus-mode .tool-display-mode,
657+
.tool-column:first-of-type,
658+
.tool-center-panel,
659+
.tool-column:last-of-type,
660+
body.tool-focus-mode .tool-column:first-of-type,
661+
body.tool-focus-mode .tool-center-panel,
662+
body.tool-focus-mode .tool-column:last-of-type {
663+
grid-column: auto;
664+
grid-row: auto
665+
}
666+
667+
.tool-column.is-collapsed .tool-column-header {
668+
height: auto;
669+
min-height: var(--space-0);
670+
writing-mode: horizontal-tb
671+
}
672+
673+
body.tool-focus-mode {
674+
overflow: auto
675+
}
676+
677+
body.tool-focus-mode .tool-workspace {
678+
height: auto;
679+
grid-template-columns: var(--one-column)
680+
}
681+
682+
body.tool-focus-mode .tool-column,
683+
body.tool-focus-mode .tool-center-panel {
684+
height: auto
685+
}
531686
}
532687

533688
@media(max-width:620px) {

0 commit comments

Comments
 (0)