Skip to content

Commit 6aed361

Browse files
eiman-eltigani-ttdeiman-eltigani-ttd
committed
define css variables within individual folder + minor ui fixes
1 parent d474288 commit 6aed361

File tree

9 files changed

+199
-103
lines changed

9 files changed

+199
-103
lines changed

‎web-integrations/google-secure-signals/client-side/html/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>Client-Side ${IDENTITY_NAME} Integration with Google Secure Signals</h1>
2222

2323
<h2>${IDENTITY_NAME} Integration Status</h2>
2424

25-
<table id="uid2_state">
25+
<table id="uid_state">
2626
<tr>
2727
<td class="label">
2828
<div class="tooltip-wrapper">
@@ -184,7 +184,7 @@ <h4>Step 3: View Video Ad</h4>
184184
<div class="section">
185185
<h4>Step 4: Test Opt-Out</h4>
186186
<ul>
187-
<li>Try the special email: <code>[email protected]</code></li>
187+
<li>Try the special email: <strong>[email protected]</strong></li>
188188
<li>Observe "Has opted out?" changes to "yes"</li>
189189
<li>No advertising token is generated</li>
190190
</ul>

‎web-integrations/google-secure-signals/client-side/html/styles/app.css‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
/* Two-Column Layout with Sidebar - Modern Design */
2-
/* Import centralized color variables */
3-
@import url('../styles/colors.css');
2+
3+
/* Color Variables */
4+
:root {
5+
/* Brand Colors */
6+
--primary-orange: #FF6B35;
7+
--primary-dark: #2D3748;
8+
--accent-teal: #0D9488;
9+
--accent-yellow: #FBBF24;
10+
11+
/* Text Colors */
12+
--text-dark: #1A202C;
13+
--text-gray: #718096;
14+
15+
/* Background Colors */
16+
--bg-white: #FFFFFF;
17+
--bg-light: #F7FAFC;
18+
--sidebar-bg: #FFF7ED;
19+
20+
/* Border Colors */
21+
--border-color: #E2E8F0;
22+
23+
/* Button Colors */
24+
--button-navy: rgba(2, 10, 64, 1);
25+
--button-navy-hover: rgba(2, 10, 64, 0.9);
26+
27+
/* Link Colors */
28+
--link-color: #06B6D4;
29+
--link-hover: #06B6D4;
30+
31+
/* Tooltip Colors */
32+
--tooltip-bg: #1F2937;
33+
--tooltip-trigger: #3B82F6;
34+
--tooltip-trigger-hover: #2563EB;
35+
36+
/* Shadows */
37+
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
38+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
39+
}
440

541
* {
642
box-sizing: border-box;
@@ -128,7 +164,7 @@ a:hover {
128164
}
129165

130166
/* State Table */
131-
#uid2_state {
167+
#uid_state {
132168
width: 100%;
133169
border-collapse: separate;
134170
border-spacing: 0;
@@ -141,19 +177,19 @@ a:hover {
141177
overflow: visible;
142178
}
143179

144-
#uid2_state tr {
180+
#uid_state tr {
145181
border-bottom: 1px solid var(--border-color);
146182
}
147183

148-
#uid2_state tr:last-child {
184+
#uid_state tr:last-child {
149185
border-bottom: none;
150186
}
151187

152-
#uid2_state tr:nth-child(even) {
188+
#uid_state tr:nth-child(even) {
153189
background-color: var(--bg-light);
154190
}
155191

156-
#uid2_state td {
192+
#uid_state td {
157193
padding: 1rem;
158194
vertical-align: top;
159195
}
@@ -340,7 +376,6 @@ a:hover {
340376
.sidebar {
341377
position: static;
342378
max-height: none;
343-
order: -1;
344379
}
345380

346381
body {

‎web-integrations/javascript-sdk/client-side/html/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ <h1>Client-Side ${IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
9090
>Client-Side Integration Guide for JavaScript</a>.
9191
</p>
9292
<h2>${IDENTITY_NAME} Integration Status</h2>
93-
<table id="uid2_state">
93+
<table id="uid_state">
9494
<tr>
9595
<td class="label">
9696
<div class="tooltip-wrapper">
@@ -212,7 +212,7 @@ <h4>Step 3: Monitor Updates</h4>
212212
<div class="section">
213213
<h4>Step 4: Test Opt-Out</h4>
214214
<ul>
215-
<li>Try the special email: <code>[email protected]</code></li>
215+
<li>Try the special email: <strong>[email protected]</strong></li>
216216
<li>Observe "Has opted out?" changes to "yes"</li>
217217
<li>No advertising token is generated</li>
218218
</ul>

‎web-integrations/javascript-sdk/client-side/html/stylesheets/app.css‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,40 @@
1-
/* Import centralized color variables */
2-
@import url('../styles/colors.css');
1+
/* Color Variables */
2+
:root {
3+
/* Brand Colors */
4+
--primary-orange: #FF6B35;
5+
--primary-dark: #2D3748;
6+
--accent-teal: #0D9488;
7+
--accent-yellow: #FBBF24;
8+
9+
/* Text Colors */
10+
--text-dark: #1A202C;
11+
--text-gray: #718096;
12+
13+
/* Background Colors */
14+
--bg-white: #FFFFFF;
15+
--bg-light: #F7FAFC;
16+
--sidebar-bg: #FFF7ED;
17+
18+
/* Border Colors */
19+
--border-color: #E2E8F0;
20+
21+
/* Button Colors */
22+
--button-navy: rgba(2, 10, 64, 1);
23+
--button-navy-hover: rgba(2, 10, 64, 0.9);
24+
25+
/* Link Colors */
26+
--link-color: #06B6D4;
27+
--link-hover: #06B6D4;
28+
29+
/* Tooltip Colors */
30+
--tooltip-bg: #1F2937;
31+
--tooltip-trigger: #3B82F6;
32+
--tooltip-trigger-hover: #2563EB;
33+
34+
/* Shadows */
35+
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
36+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
37+
}
338

439
* {
540
box-sizing: border-box;
@@ -127,7 +162,7 @@ a:hover {
127162
}
128163

129164
/* State Table */
130-
#uid2_state {
165+
#uid_state {
131166
width: 100%;
132167
border-collapse: collapse;
133168
margin: 2rem 0;
@@ -137,19 +172,19 @@ a:hover {
137172
overflow: hidden;
138173
}
139174

140-
#uid2_state tr {
175+
#uid_state tr {
141176
border-bottom: 1px solid var(--border-color);
142177
}
143178

144-
#uid2_state tr:nth-child(even) {
179+
#uid_state tr:nth-child(even) {
145180
background-color: var(--bg-light);
146181
}
147182

148-
#uid2_state tr:last-child {
183+
#uid_state tr:last-child {
149184
border-bottom: none;
150185
}
151186

152-
#uid2_state td {
187+
#uid_state td {
153188
padding: 1rem;
154189
vertical-align: top;
155190
}
@@ -332,7 +367,7 @@ a:hover {
332367
}
333368

334369
/* Ensure table doesn't clip tooltips */
335-
#uid2_state {
370+
#uid_state {
336371
position: relative;
337372
overflow: visible;
338373
}

‎web-integrations/prebid-integrations/client-side/app.css‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
/* Two-Column Layout with Sidebar - Modern Design */
2-
/* Import centralized color variables */
3-
@import url('../styles/colors.css');
2+
3+
/* Color Variables */
4+
:root {
5+
/* Brand Colors */
6+
--primary-orange: #FF6B35;
7+
--primary-dark: #2D3748;
8+
--accent-teal: #0D9488;
9+
--accent-yellow: #FBBF24;
10+
11+
/* Text Colors */
12+
--text-dark: #1A202C;
13+
--text-gray: #718096;
14+
15+
/* Background Colors */
16+
--bg-white: #FFFFFF;
17+
--bg-light: #F7FAFC;
18+
--sidebar-bg: #FFF7ED;
19+
20+
/* Border Colors */
21+
--border-color: #E2E8F0;
22+
23+
/* Button Colors */
24+
--button-navy: rgba(2, 10, 64, 1);
25+
--button-navy-hover: rgba(2, 10, 64, 0.9);
26+
27+
/* Link Colors */
28+
--link-color: #06B6D4;
29+
--link-hover: #06B6D4;
30+
31+
/* Tooltip Colors */
32+
--tooltip-bg: #1F2937;
33+
--tooltip-trigger: #3B82F6;
34+
--tooltip-trigger-hover: #2563EB;
35+
36+
/* Shadows */
37+
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
38+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
39+
}
440

541
* {
642
box-sizing: border-box;
@@ -128,7 +164,7 @@ a:hover {
128164
}
129165

130166
/* State Table */
131-
#identity_state {
167+
#uid_state {
132168
width: 100%;
133169
border-collapse: separate;
134170
border-spacing: 0;
@@ -141,19 +177,19 @@ a:hover {
141177
overflow: visible;
142178
}
143179

144-
#identity_state tr {
180+
#uid_state tr {
145181
border-bottom: 1px solid var(--border-color);
146182
}
147183

148-
#identity_state tr:last-child {
184+
#uid_state tr:last-child {
149185
border-bottom: none;
150186
}
151187

152-
#identity_state tr:nth-child(even) {
188+
#uid_state tr:nth-child(even) {
153189
background-color: var(--bg-light);
154190
}
155191

156-
#identity_state td {
192+
#uid_state td {
157193
padding: 1rem;
158194
vertical-align: top;
159195
}
@@ -338,7 +374,6 @@ a:hover {
338374
.sidebar {
339375
position: static;
340376
max-height: none;
341-
order: -1;
342377
}
343378

344379
body {

‎web-integrations/prebid-integrations/client-side/index.html‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
pbjs.que.push(function() {
9090
pbjs.onEvent('userIds', updateGuiElements);
9191
// Also update immediately in case IDs are already loaded
92-
updateGuiElements();
92+
updateGuiElements();
9393
});
9494
}
9595

@@ -201,13 +201,13 @@
201201
<!-- Main Content Area -->
202202
<div class="main-content">
203203
<h1>Client-Side ${IDENTITY_NAME} Integration with Prebid.js</h1>
204-
<p class="intro">
204+
<p class="intro">
205205
This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Prebid.js</strong> for header bidding, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>.
206206
</p>
207207

208208
<h2>${IDENTITY_NAME} Integration Status</h2>
209209

210-
<table id="identity_state">
210+
<table id="uid_state">
211211
<tr>
212212
<td class="label">
213213
<div class="tooltip-wrapper">
@@ -219,9 +219,9 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
219219
</div>
220220
</div>
221221
</td>
222-
<td class="value"><pre id="targeted_advertising_ready"></pre></td>
223-
</tr>
224-
<tr>
222+
<td class="value"><pre id="targeted_advertising_ready"></pre></td>
223+
</tr>
224+
<tr>
225225
<td class="label">
226226
<div class="tooltip-wrapper">
227227
Advertising Token:
@@ -233,8 +233,8 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
233233
</div>
234234
</div>
235235
</td>
236-
<td class="value"><pre id="advertising_token"></pre></td>
237-
</tr>
236+
<td class="value"><pre id="advertising_token"></pre></td>
237+
</tr>
238238
<tr>
239239
<td class="label">
240240
<div class="tooltip-wrapper">
@@ -263,21 +263,21 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
263263
</td>
264264
<td class="value"><pre id="prebid_storage"></pre></td>
265265
</tr>
266-
</table>
266+
</table>
267267

268-
<div id="login_form" style="display: none" class="form">
269-
<div class="email_prompt">
270-
<input
271-
type="text"
272-
id="email"
273-
name="email"
274-
placeholder="Enter an email address"
275-
/>
268+
<div id="login_form" style="display: none" class="form">
269+
<div class="email_prompt">
270+
<input
271+
type="text"
272+
id="email"
273+
name="email"
274+
placeholder="Enter an email address"
275+
/>
276276
<button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
277-
</div>
278-
</div>
279-
<div id="clear_storage_form" style="display: none" class="form">
280-
<button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
277+
</div>
278+
</div>
279+
<div id="clear_storage_form" style="display: none" class="form">
280+
<button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
281281
</div>
282282
</div>
283283

@@ -324,7 +324,7 @@ <h4>What's Happening?</h4>
324324

325325
<div class="note">
326326
<strong>Note:</strong> This is a test-only environment. Do not use real user data.
327-
</div>
327+
</div>
328328
</aside>
329329
</div>
330330
</body>

0 commit comments

Comments
 (0)