Custom rendering for numeric lists

_static/css/custom.css

@@ -34,4 +34,27 @@ body {
 
 .sphinx-tabs-panel {
   padding: 1em 1em 0 1em;
+}
+
+.rst-content section ol.arabic, .rst-content section ol.arabic > li {
+    list-style: none;
+}
+
+.rst-content section ol.arabic > li {
+   position: relative;
+   counter-increment: step-counter;
+   padding-left: 10px;
+   padding-bottom: 10px;
+}
+
+.rst-content section ol > li::before {
+  text-align: center;
+  content: counter(step-counter);
+  background-color: #55a5d9;
+  color: white;
+  padding: 2px 10px;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  right: 100%;
 }

tutorials/custom_oauth_client_id.md

@@ -10,81 +10,80 @@ This is a step-by-step tutorial to connect with a custom OAuth 2.0 Client ID for
 
 ## Register Client ID
 
-- Log in to [Google Cloud Resource Manager](https://console.cloud.google.com/cloud-resource-manager) and create a new project. You will be prompted to select a name of the project.
+1. Log in to [Google Cloud Resource Manager](https://console.cloud.google.com/cloud-resource-manager) and create a new project. You will be prompted to select a name of the project.
 
-:::{image} _images/Create_New_Project_Client_ID.png
-:alt: Create new Project
-:width: 800px
-:::
-
-- Navigate to _APIs & Services_ → _Enabled APIs & services_.
+    :::{image} _images/Create_New_Project_Client_ID.png
+    :alt: Create new Project
+    :width: 800px
+    :::
 
-:::{image} _images/APIs_Services_Client_ID.png
-:alt: APIs and Services
-:width: 800px
-:::
+1. Navigate to _APIs & Services_ → _Enabled APIs & services_.
+    :::{image} _images/APIs_Services_Client_ID.png
+    :alt: APIs and Services
+    :width: 800px
+    :::
 
-- Select _Enable APIs & Services_ and search for "Google Drive API" in the search box of the API library.
+1. Select _Enable APIs & Services_ and search for "Google Drive API" in the search box of the API library.
 
-:::{image} _images/Enable_APIs_Client_ID.png
-:alt: Enable APIs
-:width: 800px
-:::
+    :::{image} _images/Enable_APIs_Client_ID.png
+    :alt: Enable APIs
+    :width: 800px
+    :::
 
-- Select _Google Drive API_ from the search results and choose _Enable_. Repeat the same for _Google Cloud Storage JSON API_ when you want to access Google Cloud Storage.
+1. Select _Google Drive API_ from the search results and choose _Enable_. Repeat the same for _Google Cloud Storage JSON API_ when you want to access Google Cloud Storage.
 
-:::{image} _images/Search_Google_API.png
-:alt: API Library Google Drive
-:width: 800px
-:::
+    :::{image} _images/Search_Google_API.png
+    :alt: API Library Google Drive
+    :width: 800px
+    :::
 
-- Navigate to _APIs & Services → OAuth consent screen_.
+1. Navigate to _APIs & Services → OAuth consent screen_.
 
-:::{image} _images/Consent_Screen_Client_ID.png
-:alt: Consent Screen OAuth Client ID
-:width: 800px
-:::
+    :::{image} _images/Consent_Screen_Client_ID.png
+    :alt: Consent Screen OAuth Client ID
+    :width: 800px
+    :::
 
-- Choose _External_ from _User Type_ and select _Create_. Choose any _App Name_ and select _Save and Continue_.
+1. Choose _External_ from _User Type_ and select _Create_. Choose any _App Name_ and select _Save and Continue_.
 
-:::{image} _images/App_Information_Client_ID.png
-:alt: App Information OAuth Client ID
-:width: 800px
-:::
+    :::{image} _images/App_Information_Client_ID.png
+    :alt: App Information OAuth Client ID
+    :width: 800px
+    :::
 
-- Select _Add or Remove Scopes_ in the next step. Search for "Google Drive API" and enable the scope `.../auth/drive`. Repeat the same for `.../auth/devstorage.full_control` when you want to access Google Cloud Storage. Select _Update_ to confirm and _Save and Continue_ to move to the next step.
+1. Select _Add or Remove Scopes_ in the next step. Search for "Google Drive API" and enable the scope `.../auth/drive`. Repeat the same for `.../auth/devstorage.full_control` when you want to access Google Cloud Storage. Select _Update_ to confirm and _Save and Continue_ to move to the next step.
 
-:::{image} _images/List_of_Scopes_Client_ID.png
-:alt: List of Scopes OAuth Client ID
-:width: 800px
-:::
+    :::{image} _images/List_of_Scopes_Client_ID.png
+    :alt: List of Scopes OAuth Client ID
+    :width: 800px
+    :::
 
-- Add an email address registered as a Google account after selecting _Add Users_. Confirm by selecting _Save and Continue_.
+1. Add an email address registered as a Google account after selecting _Add Users_. Confirm by selecting _Save and Continue_.
 
-:::{image} _images/Test_Users_Client_ID.png
-:alt: Test Users OAuth Client ID
-:width: 800px
-:::
+    :::{image} _images/Test_Users_Client_ID.png
+    :alt: Test Users OAuth Client ID
+    :width: 800px
+    :::
 
-- Navigate to _APIs & Services → Credentials_ and select _OAuth client ID_ from _Create Credentials_.
+1. Navigate to _APIs & Services → Credentials_ and select _OAuth client ID_ from _Create Credentials_.
 
-:::{image} _images/Client_ID_Credentials.png
-:alt: OAuth Client ID Credentials
-:width: 800px
-:::
+    :::{image} _images/Client_ID_Credentials.png
+    :alt: OAuth Client ID Credentials
+    :width: 800px
+    :::
 
-- Select _Desktop app_ for _Application type_ and enter any _Name_. Select _Create_ to continue.
+1. Select _Desktop app_ for _Application type_ and enter any _Name_. Select _Create_ to continue.
 
-:::{image} _images/Application_Type_Client_ID.png
-:alt: Application Type for Credentials
-:width: 800px
-:::
+    :::{image} _images/Application_Type_Client_ID.png
+    :alt: Application Type for Credentials
+    :width: 800px
+    :::
 
-- Copy the _Client ID_ displayed. You will need it to set up the custom connection profile in the next step.
+1. Copy the _Client ID_ displayed. You will need it to set up the custom connection profile in the next step.
 
-:::{image} _images/OAuth_Client_ID_Credentials.png
-:alt: OAuth Client ID Credentials
-:::
+    :::{image} _images/OAuth_Client_ID_Credentials.png
+    :alt: OAuth Client ID Credentials
+    :::
 
 ## Add Custom Connection Profile