Add Some Graphic Elements to Docs (#3535)

Co-authored-by: Dmitry Kolomatskiy <58207913+lemontree210@users.noreply.github.com>

docs/source/_static/style_images.css

@@ -0,0 +1,15 @@
+figure > img {
+    height: 300px;  /* resize figures so they aren't too big */
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not([data-theme="light"]) figure > img {  /* auto and dark is dark mode */
+        filter: invert(92%);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body[data-theme="dark"] figure > img {  /* auto and light is light mode */
+        filter: invert(92%);
+    }
+}

docs/source/conf.py

@@ -219,6 +219,7 @@
     "style_sidebar_brand.css",
     "style_general.css",
     "style_admonitions.css",
+    "style_images.css",
 ]
 
 html_permalinks_icon = "¶"  # Furo's default permalink icon is `#` which doesn't look great imo.

docs/source/inclusions/menu_button_command_video.rst

@@ -0,0 +1,3 @@
+.. raw:: html
+
+    <center><video height="300px" loop autoplay muted><source src="https://core.telegram.org/file/464001555/10fbd/jvTuV2Ke7WQ.1916669.mp4/a056de323645db409d" type="video/mp4"></video></center>

telegram/_inline/inlinekeyboardmarkup.py

@@ -35,6 +35,15 @@ class InlineKeyboardMarkup(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their size of :attr:`inline_keyboard` and all the buttons are equal.
 
+    .. figure:: https://core.telegram.org/file/464001863/110f3/I47qTXAD9Z4.120010/e0\
+        ea04f66357b640ec
+        :align: center
+
+        An inline keyboard on a message
+
+    .. seealso::
+        An another kind of keyboard would be the :class:`telegram.ReplyKeyboardMarkup`.
+
     Examples:
         * :any:`Inline Keyboard 1 <examples.inlinekeyboard>`
         * :any:`Inline Keyboard 2 <examples.inlinekeyboard2>`

telegram/_inline/inlinequery.py

@@ -40,6 +40,16 @@ class InlineQuery(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their :attr:`id` is equal.
 
+    .. figure:: https://core.telegram.org/file/464001466/10e4a/r4FKyQ7gw5g.134366/f2\
+        606a53d683374703
+        :align: center
+
+        Inline queries on Telegram
+
+    .. seealso::
+        The :class:`telegram.InlineQueryResult` classes represent the media the user can choose
+        from (see above figure).
+
     Note:
         In Python :keyword:`from` is a reserved word. Use :paramref:`from_user` instead.
 

telegram/_menubutton.py

@@ -107,6 +107,8 @@ def de_json(cls, data: Optional[JSONDict], bot: "Bot") -> Optional["MenuButton"]
 class MenuButtonCommands(MenuButton):
     """Represents a menu button, which opens the bot's list of commands.
 
+    .. include:: inclusions/menu_button_command_video.rst
+
     .. versionadded:: 20.0
     Attributes:
         type (:obj:`str`): :tg-const:`telegram.constants.MenuButtonType.COMMANDS`.

telegram/_replykeyboardmarkup.py

@@ -33,6 +33,15 @@ class ReplyKeyboardMarkup(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their size of :attr:`keyboard` and all the buttons are equal.
 
+    .. figure:: https://core.telegram.org/file/464001950/1191a/2RwpmgU-swU.123554/b5\
+        0478c124d5914c23
+        :align: center
+
+        A reply keyboard with reply options.
+
+    .. seealso::
+        An another kind of keyboard would be the :class:`telegram.InlineKeyboardMarkup`.
+
     Examples:
         * Example usage: A user requests to change the bot's language, bot replies to the request
           with a keyboard to select the new language. Other users in the group don't see