From 1a728dd05b32d7696b697773a8b221743a6ac2a6 Mon Sep 17 00:00:00 2001
From: pa <pa@arista.com>
Date: Mon, 8 Apr 2024 14:15:18 +0000
Subject: [PATCH] add opacity styles

---
 docs/index.md              |  4 ++--
 docs/stylesheets/extra.css | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 9441561..7c44d81 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -32,14 +32,14 @@ To set the token:
 
 ??? "Step1: Go to the Account Settings (right top corner)"
 
-    ![account settings](assets/images/account_settings.png)
+    ![account settings](assets/images/account_settings.png){ .opacity09 }
 
 ???+ "Step2: Go to `Codespaces > Codespaces secrets > New secret`"
 
     - add ARTOKEN to auto-download EOS images from [arista.com](arista.com). Under `Repository access` select `arista-netdevops-community/one-click-se-demos`
     - add CV_API_TOKEN if CVaaS is part of the demo. Keep in mind, this token has to be created under service account. Device onboarding token is not required as it will be generated automatically. Under `Repository access` select `arista-netdevops-community/one-click-se-demos`
 
-    ![codespaces secrets](assets/images/codespaces-secrets.png)
+    ![codespaces secrets](assets/images/codespaces-secrets.png){ .opacity09 }
 
     !!! Warning "WARNING!"
 
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index fc8e6ff..52aca6a 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -8,4 +8,22 @@
 }
 .heartbeat {
   animation: heartbeat 1000ms infinite;
+}
+.opacity05 {
+  opacity: 0.5;
+}
+.opacity06 {
+  opacity: 0.6;
+}
+.opacity07 {
+  opacity: 0.7;
+}
+.opacity08 {
+  opacity: 0.8;
+}
+.opacity09 {
+  opacity: 0.9;
+}
+.contrast90 {
+  filter: contrast(90%);
 }
\ No newline at end of file