diff --git a/ext/css/display.css b/ext/css/display.css
index 607368fc..7953f6ef 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1670,7 +1670,7 @@ button.footer-notification-close-button:active {
/* Audio menu */
-.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-icon {
+.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-audio-button .popup-menu-item-icon {
display: none;
}
.audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {
@@ -1682,6 +1682,42 @@ button.footer-notification-close-button:active {
.audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {
color: var(--text-color-light1);
}
+.popup-menu-item-audio-button .popup-menu-item-label {
+ padding-right: 2.5em;
+}
+.popup-menu-item-set-primary-audio-button {
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 2.5em;
+}
+.popup-menu-item-set-primary-audio-button:not([hidden]) {
+ display: flex;
+}
+.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
+ opacity: 0;
+ transition: opacity var(--animation-duration) linear;
+}
+.popup-menu-item-group:hover .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
+ opacity: 0.25;
+}
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
+ opacity: 0.375;
+}
+.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
+ opacity: 1;
+}
+.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
+.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
+.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
+ opacity: 1;
+}
/* Anki errors */
diff --git a/ext/css/material.css b/ext/css/material.css
index 2c7195cb..f9ab59bf 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -947,11 +947,11 @@ button.icon-button:active {
}
button.popup-menu-item {
padding: 0.625em 1.5em;
+ flex: 1 1 auto;
border-radius: 0;
background-color: transparent;
color: var(--text-color);
border: none;
- width: 100%;
text-align: left;
font-size: 1em;
font-weight: normal;
@@ -977,12 +977,14 @@ button.popup-menu-item:disabled {
width: calc(16em / 14);
height: calc(16em / 14);
background-color: var(--text-color);
- margin-right: 0.5em;
flex: 0 0 auto;
}
.popup-menu-item-icon:not([hidden]) {
display: block;
}
+.popup-menu-item-icon+.popup-menu-item-label {
+ margin-left: 0.5em;
+}
: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);
@@ -995,6 +997,7 @@ button.popup-menu-item:disabled {
font-size: var(--font-size-small);
}
.popup-menu-item-group {
+ position: relative;
display: flex;
flex-flow: row nowrap;
align-items: stretch;
diff --git a/ext/display-templates.html b/ext/display-templates.html
index 82a9b97f..3074e287 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -158,6 +158,9 @@
-
+