style(annotations): match and use question-mark svg (#1985)

add(annotations): match and use question-mark svg

docs/Radarr/Tips/Sync-2-radarr-sonarr.md

@@ -63,10 +63,10 @@ Then you get a screen with the following options:
 1. Your {++Radarr 2++} root location for your media library.
 1. Tags that will be added on import from this list (if you use multiple lists it makes it easier to determine from which list the movie was added)
 1. The Full URL to ^^==Radarr 1==^^ (Use container name or local URL if they run on the same system).
-1. Your API Key of ^^==Radarr 1==^^. :material-alert-circle:{ title="After adding your API key, click on the test button at the bottom to see if you have a successful connection." }
-1. Which Profile of ^^==Radarr 1==^^ you want to Sync with {++Radarr 2++}. :material-alert-circle:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
-1. [_Optional_] Use tags from ^^==Radarr 1==^^ to add Movies to {++Radarr 2++}. :material-alert-circle:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
-1. [_Optional_] Add all movies from the chosen root folder from ^^==Radarr 1==^^. :material-alert-circle:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
+1. Your API Key of ^^==Radarr 1==^^. :circle-question:{ title="After adding your API key, click on the test button at the bottom to see if you have a successful connection." }
+1. Which Profile of ^^==Radarr 1==^^ you want to Sync with {++Radarr 2++}. :circle-question:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
+1. [_Optional_] Use tags from ^^==Radarr 1==^^ to add Movies to {++Radarr 2++}. :circle-question:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
+1. [_Optional_] Add all movies from the chosen root folder from ^^==Radarr 1==^^. :circle-question:{ title="The dropdown box is filled after you made a successful connection with Radarr 1" }
 
 #### Radarr Download client setup
 
@@ -138,11 +138,11 @@ Then you get a screen with the following options:
 1. If you want to use Season Folders (**RECOMMENDED**).
 1. Tags that will be added on import from this list (if you use multiple lists it makes it easier to determine from which list the TV Shows was added)
 1. The Full URL to ^^==Sonarr 1==^^ (Use container name or local URL if they run on the same system).
-1. Your API Key of ^^==Sonarr 1==^^. :material-alert-circle:{ title="After adding your API key, click on the test button at the bottom to see if you have a successful connection." }
+1. Your API Key of ^^==Sonarr 1==^^. :circle-question:{ title="After adding your API key, click on the test button at the bottom to see if you have a successful connection." }
 1. Sync season monitoring (**SUGGESTION: DISABLED**)
 1. The Cloned Profile of ^^==Sonarr 1==^^ that we're going to use to sync with {++Sonarr 2++}.
-1. [_Optional_] Use tags from ^^==Sonarr 1==^^ to add TV Shows to {++Sonarr 2++}. :material-alert-circle:{ title="The dropdown box is filled after you made a successful connection with Sonarr 1" }
-1. [_Optional_] Add all TV Shows from the chosen root folder from ^^==Sonarr 1==^^. :material-alert-circle:{ title="The dropdown box is filled after you made a successful connection with Sonarr 1" }
+1. [_Optional_] Use tags from ^^==Sonarr 1==^^ to add TV Shows to {++Sonarr 2++}. :circle-question:{ title="The dropdown box is filled after you made a successful connection with Sonarr 1" }
+1. [_Optional_] Add all TV Shows from the chosen root folder from ^^==Sonarr 1==^^. :circle-question:{ title="The dropdown box is filled after you made a successful connection with Sonarr 1" }
 1. This is a Deprecated option.
 
 #### Sonarr Download client setup

docs/stylesheets/extra.css

@@ -63,3 +63,12 @@ td {
 [data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
   color: #f8f8f8;
 }
+.md-typeset .emojione svg, .md-typeset .gemoji svg, .md-typeset .twemoji svg {
+  fill: var(--md-default-fg-color--lighter);
+  max-height: 100%;
+  width: var(--md-icon-size);
+}
+.md-typeset .emojione svg, .md-typeset .gemoji svg, .md-typeset .twemoji svg:hover {
+  fill: var(--md-accent-fg-color);
+  transform:rotate(45deg);
+}

mkdocs.yml

@@ -42,6 +42,9 @@ markdown_extensions:
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
+      options:
+        custom_icons:
+          - overrides/.icons
   - pymdownx.extra
   - pymdownx.highlight:
       guess_lang: true
@@ -161,4 +164,4 @@ theme:
   favicon: img/favicon.png
   logo: img/logo.png
   icon:
-    annotation: material/arrow-right-circle
+    annotation: circle-question

overrides/.icons/circle-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 8C119 8 8 119.1 8 256c0 137 111 248 248 248s248-111 248-248C504 119.1 393 8 256 8zm0 448c-110.5 0-200-89.4-200-200 0-110.5 89.5-200 200-200 110.5 0 200 89.5 200 200 0 110.5-89.4 200-200 200zm107.2-255.2c0 67.1-72.4 68.1-72.4 92.9V300c0 6.6-5.4 12-12 12h-45.6c-6.6 0-12-5.4-12-12v-8.7c0-35.7 27.1-50 47.6-61.5 17.6-9.8 28.3-16.5 28.3-29.6 0-17.2-22-28.7-39.8-28.7-23.2 0-33.9 11-48.9 30-4.1 5.1-11.5 6.1-16.7 2.1l-27.8-21.1c-5.1-3.9-6.3-11.1-2.6-16.4C184.8 131.5 214.9 112 261.8 112c49.1 0 101.5 38.3 101.5 88.8zM298 368c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42z"/></svg>