Audio play button status badge (#1300)

* Add plus-thick.svg

* Add success-color variable

* Fix icon display

* Add badge

* Add missing audioResolved

* Update audio badge

* Expose attribute

2 files changed, 24 insertions, 1 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index ccdb2d9c..003d0962 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -551,6 +551,7 @@ button.action-button {
     background: transparent;
     font-size: inherit;
     box-shadow: none;
+    position: relative;
     transition:
         opacity var(--animation-duration) linear,
         visibility 0s linear 0s,
@@ -615,6 +616,21 @@ button.action-button[data-icon=source-term]::before {
 .entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio {
     display: none;
 }
+.action-button-badge {
+    pointer-events: none;
+    position: absolute;
+    display: block;
+    right: 0;
+    top: 0;
+    width: calc(8em / var(--font-size-no-units));
+    height: calc(8em / var(--font-size-no-units));
+}
+.action-button-badge[data-icon=cross] {
+    background-color: var(--danger-color);
+}
+.action-button-badge[data-icon=plus-thick] {
+    background-color: var(--success-color);
+}
 
 
 /* Tags */
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index 7da515b5..c9277088 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -79,6 +79,8 @@
     --danger-color-transparent5: rgba(200, 60, 40, 0.05);
     --danger-color-transparent25: rgba(200, 60, 40, 0.25);
 
+    --success-color: #51ab30;
+
     --disabled-color: #aaaaaa;
     --disabled-color-light: #dddddd;
     --disabled-color-lighter: #eeeeee;
@@ -135,6 +137,8 @@
     --danger-color-transparent5: rgba(221, 103, 85, 0.05);
     --danger-color-transparent25: rgba(221, 103, 85, 0.25);
 
+    --success-color: #75cf54;
+
     --disabled-color: #444444;
     --disabled-color-light: #585858;
     --disabled-color-lighter: #777777;
@@ -209,6 +213,7 @@
 .icon[data-icon=question-mark-thick]     { --icon-image: url(/mixed/img/question-mark-thick.svg); }
 .icon[data-icon=left-chevron]            { --icon-image: url(/mixed/img/left-chevron.svg); }
 .icon[data-icon=right-chevron]           { --icon-image: url(/mixed/img/right-chevron.svg); }
+.icon[data-icon=plus-thick]              { --icon-image: url(/mixed/img/plus-thick.svg); }
 .icon[data-icon=material-down-arrow] {
     --icon-image: url(/mixed/img/material-down-arrow.svg);
     --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
@@ -959,12 +964,14 @@ button.popup-menu-item:disabled {
     color: var(--text-color-light2);
 }
 .popup-menu-item-icon {
-    display: block;
     width: calc(16em / 14);
     height: calc(16em / 14);
     background-color: var(--text-color);
     margin-right: 0.5em;
 }
+.popup-menu-item-icon:not([hidden]) {
+    display: block;
+}
 :root[data-page-type=popup] .popup-menu.popup-menu-auto-size,
 .popup-menu.popup-menu-small {
     border-radius: calc(var(--menu-border-radius) * 0.75);