Fix various issues with some styles (#1176)

3 files changed, 16 insertions, 5 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index abf8ae6e..143e03b0 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -537,6 +537,8 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
     flex-flow: row nowrap;
     float: right;
     margin: -0.25em;
+    position: relative;
+    z-index: 1;
 }
 .actions::after {
     clear: both;
@@ -552,6 +554,7 @@ button.action-button {
     padding: var(--action-button-padding);
     background: transparent;
     font-size: inherit;
+    box-shadow: none;
     transition:
         opacity var(--animation-duration) linear,
         visibility 0s linear 0s,
@@ -580,11 +583,14 @@ button.action-button:disabled {
 button.action-button:disabled:not([hidden]) {
     opacity: 0.25;
 }
-button.action-button:hover {
+button.action-button:hover,
+button.action-button:focus {
     background-color: transparent;
+    box-shadow: none;
 }
 button.action-button:active {
     background-color: var(--action-button-active-color);
+    box-shadow: none;
 }
 button.action-button::before {
     content: "";
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index ff4730ae..cb6997ad 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -174,8 +174,8 @@
 .icon[data-icon=hamburger-menu]          { --icon-image: url(/mixed/img/hamburger-menu.svg); }
 .icon[data-icon=kebab-menu]              { --icon-image: url(/mixed/img/kebab-menu.svg); }
 .icon[data-icon=mouse]                   { --icon-image: url(/mixed/img/mouse.svg); }
-.icon[data-icon=material-down-arrow]     { --icon-image: url(/mixed/img/material-down-arrow.svg); }
-.icon[data-icon=material-right-arrow]    { --icon-image: url(/mixed/img/material-right-arrow.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); }
+.icon[data-icon=material-right-arrow]    { --icon-image: url(/mixed/img/material-right-arrow.svg); --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
 .icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
 .icon[data-icon=magnifying-glass]        { --icon-image: url(/mixed/img/magnifying-glass.svg); }
 .icon[data-icon=collapse]                { --icon-image: url(/mixed/img/collapse.svg); }
@@ -753,6 +753,12 @@ button.input-suffix-button.input-suffix-icon-button:focus {
 button.input-suffix-button.input-suffix-icon-button:active {
     background-color: var(--input-background-color-darker);
 }
+button.input-suffix-button.input-suffix-icon-button>.icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--button-icon-color);
+}
 input[type=text]:invalid+button.input-suffix-button,
 input[type=number]:invalid+button.input-suffix-button,
 input[type=text][data-invalid=true]+button.input-suffix-button,
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 3812a569..5d4a8f78 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -108,8 +108,7 @@ h1 {
     cursor: pointer;
     outline: none;
     transition: background-color var(--animation-duration) ease-in-out;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: 0;
 }
 #search-button:hover,
 #search-button:focus {