From 65dd871673a400924cf112aee799580fce9b9909 Mon Sep 17 00:00:00 2001 From: Rekha M Date: Tue, 14 Oct 2025 11:42:12 +0530 Subject: [PATCH 1/4] launch-playground --- src/pages/guides/getting_started/hello-world.md | 9 +++++++++ src/styles.css | 17 +++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/src/pages/guides/getting_started/hello-world.md b/src/pages/guides/getting_started/hello-world.md index b30d911f3..acd4b99a6 100644 --- a/src/pages/guides/getting_started/hello-world.md +++ b/src/pages/guides/getting_started/hello-world.md @@ -61,6 +61,15 @@ A pre-requisite for both tracks is to have enabled the **Add-on Development** mo + +
+ +
+ ## Code Playground We have a [dedicated page](./code_playground.md) for the Code Playground, which you can always refer to for more detailed information. Here, we'll focus on the basics to get you started, linking to the relevant sections of the full documentation and including screenshots to help you navigate the interface. diff --git a/src/styles.css b/src/styles.css index 30288440e..6778c1d4d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -180,3 +180,20 @@ section:has(> div > p > span > picture) { .developers-live-announcement a:hover span { color: #fff !important; } + +.open-playground-button { + padding: 10px 20px; + border-radius: 20px; + font-weight: 700; + border: 2px solid #000000; + background-color: #ffffff; + cursor: pointer; + font-family: "adobe-clean" !important; +} + +.playground-button-container { + display: flex; + justify-content: center; + align-items: center; + margin: 20px 0; +} From 10784d44580c57bf6ba6b89d770ce59e8b753e90 Mon Sep 17 00:00:00 2001 From: Rekha M Date: Wed, 29 Oct 2025 17:07:09 +0530 Subject: [PATCH 2/4] mobile --- src/styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/styles.css b/src/styles.css index 6778c1d4d..505106d18 100644 --- a/src/styles.css +++ b/src/styles.css @@ -197,3 +197,10 @@ section:has(> div > p > span > picture) { align-items: center; margin: 20px 0; } + +/* Hide playground button on mobile devices */ +@media (max-width: 768px) { + .playground-button-container { + display: none; + } +} From 85a62525639fc08f38378b0cf87f6ae29ea7c6e1 Mon Sep 17 00:00:00 2001 From: Rekha M Date: Mon, 24 Nov 2025 18:39:14 +0530 Subject: [PATCH 3/4] fix style --- .../guides/getting_started/hello-world.md | 13 +++-- src/styles.css | 56 ++++++++++++++++--- 2 files changed, 57 insertions(+), 12 deletions(-) diff --git a/src/pages/guides/getting_started/hello-world.md b/src/pages/guides/getting_started/hello-world.md index acd4b99a6..bce563fd0 100644 --- a/src/pages/guides/getting_started/hello-world.md +++ b/src/pages/guides/getting_started/hello-world.md @@ -63,11 +63,14 @@ A pre-requisite for both tracks is to have enabled the **Add-on Development** mo
- + + Launch Code Playground +
## Code Playground diff --git a/src/styles.css b/src/styles.css index d4c323768..28e8bbfeb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -191,16 +191,58 @@ section:has(> div > p > span > picture) { color: #fff !important; } -.open-playground-button { - padding: 10px 20px; - border-radius: 20px; - font-weight: 700; - border: 2px solid #000000; - background-color: #ffffff; - cursor: pointer; +/* Base styles for playground button */ +a.open-playground-button, +.playground-button-container a[href*="express.adobe.com"] { + display: inline-block !important; + padding: 8px 20px !important; + border-radius: 20px !important; + font-weight: 700 !important; + font-size: 16px !important; + border: 2px solid rgb(34, 34, 34) !important; + background-color: transparent !important; + color: rgb(34, 34, 34) !important; + cursor: pointer !important; font-family: "adobe-clean" !important; + text-decoration: none !important; + text-align: center !important; + transition: all 0.2s ease !important; +} + +/* Base transition for playground button */ +a.open-playground-button, +.playground-button-container a[href*="express.adobe.com"] { + transition: all 0.2s ease !important; +} + +/* Hover effect */ +a.open-playground-button:hover, +.playground-button-container a[href*="express.adobe.com"]:hover { + background-color: rgb(213, 213, 213) !important; + border-color: rgb(34, 34, 34) !important; +} + +/* Remove default focus outline for mouse clicks */ +a.open-playground-button:focus, +.playground-button-container a[href*="express.adobe.com"]:focus { + outline: none !important; +} + +/* Show focus outline only for keyboard navigation */ +a.open-playground-button:focus-visible, +.playground-button-container a[href*="express.adobe.com"]:focus-visible { + outline: 2px solid #1473E6 !important; + outline-offset: 2px !important; +} + +/* Active/pressed state */ +a.open-playground-button:active, +.playground-button-container a[href*="express.adobe.com"]:active { + background-color: rgb(180, 180, 180) !important; + transform: translateY(1px) !important; } +/* Container styling */ .playground-button-container { display: flex; justify-content: center; From 38fc286b64ebb1102127e0faaf451c4e266751e3 Mon Sep 17 00:00:00 2001 From: Rekha M Date: Tue, 25 Nov 2025 22:48:27 +0530 Subject: [PATCH 4/4] url --- src/pages/guides/getting_started/hello-world.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/guides/getting_started/hello-world.md b/src/pages/guides/getting_started/hello-world.md index bce563fd0..a1446104c 100644 --- a/src/pages/guides/getting_started/hello-world.md +++ b/src/pages/guides/getting_started/hello-world.md @@ -61,11 +61,10 @@ A pre-requisite for both tracks is to have enabled the **Add-on Development** mo -