Refactor admonition styles and update interactive page

Author: zamkorus

book/miscellaneous/admonitions.md

@@ -140,18 +140,18 @@ This is a custom admonition using the generic directive.
 
 These are built with the generic `admonition` directive plus a custom title and optional classes. Use `no-content` when you want an admonition with only a title row and no body text.
 
-### Interactive page (warning + dropdown)
+### Interactive page
 
 ````markdown
 ```{admonition} Interactive page
-:class: warning, dropdown
-This page contains interactive elements.
+:class: interactive, dropdown
+This page contains interactive elements. Press the launch button at the top right side in order to use them.
 ```
 ````
 
 ```{admonition} Interactive page
-:class: warning, dropdown
-This page contains interactive elements.
+:class: interactive, dropdown
+This page contains interactive elements. Press the launch button at the top right side in order to use them.
 ```
 
 ### Answer (note)

book/static/global.css

@@ -49,17 +49,22 @@ html[data-theme="dark"] .admonition {
 }
 
 .admonition.answer,
-.admonition-answer {
-  border-left: 4px solid var(--pst-color-answer) !important;
+.admonition-answer,
+.admonition_answer {
+  border-left-width: 0.2rem;
+  border-left-style: solid;
+  border-left-color: var(--pst-color-answer) !important;
 }
 
 .admonition.answer > .admonition-title,
-.admonition-answer > .admonition-title {
+.admonition-answer > .admonition-title,
+.admonition_answer > .admonition-title {
   background-color: var(--pst-color-answer-bg) !important;
 }
 
 .admonition.answer > .admonition-title::after,
-.admonition-answer > .admonition-title::after {
+.admonition-answer > .admonition-title::after,
+.admonition_answer > .admonition-title::after {
   content: "\E5A0";
   font-weight: 900;
   display: inline-block;
@@ -70,7 +75,9 @@ html[data-theme="dark"] .admonition {
 .admonition-estimated-time,
 .admonition.estimated_time,
 .admonition-estimated_time {
-  border-left: 4px solid var(--pst-color-estimated-time) !important;
+  border-left-width: 0.2rem;
+  border-left-style: solid;
+  border-left-color: var(--pst-color-estimated-time) !important;
 }
 
 .admonition.estimated-time > .admonition-title,
@@ -94,7 +101,9 @@ html[data-theme="dark"] .admonition {
 .admonition-deep-dive,
 .admonition.deep_dive,
 .admonition-deep_dive {
-  border-left: 4px solid var(--pst-color-deep-dive) !important;
+  border-left-width: 0.2rem;
+  border-left-style: solid;
+  border-left-color: var(--pst-color-deep-dive) !important;
 }
 
 .admonition.deep-dive > .admonition-title,
@@ -114,6 +123,29 @@ html[data-theme="dark"] .admonition {
   color: var(--pst-color-deep-dive);
 }
 
+.admonition.interactive,
+.admonition-interactive,
+.admonition_interactive {
+  border-left-width: 0.2rem;
+  border-left-style: solid;
+  border-left-color: var(--pst-color-danger) !important;
+}
+
+.admonition.interactive > .admonition-title,
+.admonition-interactive > .admonition-title,
+.admonition_interactive > .admonition-title {
+  background-color: var(--pst-color-danger-bg) !important;
+}
+
+.admonition.interactive > .admonition-title::after,
+.admonition-interactive > .admonition-title::after,
+.admonition_interactive > .admonition-title::after {
+  content: "\F135";
+  font-weight: 900;
+  display: inline-block;
+  color: var(--pst-color-danger);
+}
+
 .admonition.no-content,
 .admonition-no-content,
 .admonition.no_content,