Fix CSS issues

src/mol-plugin-ui/left-panel.tsx

@@ -174,6 +174,6 @@ export class RemoveAllButton extends PluginUIComponent<{ }> {
     render() {
         const count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
         if (count === 0) return null;
-        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small />;
+        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' />;
     }
 }

src/mol-plugin-ui/skin/base/components/controls-base.scss

@@ -281,4 +281,18 @@ select.msp-form-control {
 select.msp-form-control:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 $font-color;
+}
+
+.msp-default-bg {
+    background: $default-background;
+}
+
+.msp-no-hover-outline {
+    &:hover {
+        color: $hover-font-color;
+        background-color: inherit;
+        border: none;
+        outline-offset: 0 !important;
+        outline: none !important;
+    }
 }

src/mol-plugin-ui/skin/base/components/toast.scss

@@ -5,12 +5,12 @@
     // right: $control-spacing;
     // margin-left: $control-spacing;
     z-index: 1001;
-    
-    .msp-toast-entry {
 
+    .msp-toast-entry {
         color: $font-color;
         background: $control-background;
         position: relative;
+        float: right;
         min-height: $row-height;
         margin-top: $control-spacing;
         border: 1px solid $border-color;
@@ -67,8 +67,9 @@
             bottom: 0;
 
             .msp-btn-icon {
+                background: transparent;
                 position: absolute;
-                top: 0;
+                top: 1px;
                 right: 0;
                 left: 0;
                 bottom: 0;

src/mol-plugin-ui/structure/components.tsx

@@ -387,11 +387,11 @@ class StructureRepresentationEntry extends PurePluginUIComponent<{ group: Struct
             <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
                 <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
             </ExpandGroup>
-            <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{
+            <IconButton onClick={this.remove} icon='remove' title='Remove' small className='msp-default-bg' style={{
                 position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px'
             }} />
-            <IconButton onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} icon='visual-visibility' title='Remove' small style={{
-                position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '24px', paddingRight: '6px'
+            <IconButton onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} icon='visual-visibility' title='Remove' small className='msp-default-bg' style={{
+                position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px'
             }} />
         </div>;
     }

src/mol-plugin-ui/toast.tsx

@@ -32,7 +32,7 @@ class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }>
             </div>
             <div className='msp-toast-clear'></div>
             <div className='msp-toast-hide'>
-                <IconButton onClick={this.hide} icon='abort' title='Hide' />
+                <IconButton onClick={this.hide} icon='abort' title='Hide' className='msp-no-hover-outline' />
             </div>
         </div>;
     }

src/mol-plugin-ui/viewport.tsx

@@ -72,7 +72,7 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     }
 
     icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
-        return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} />;
+        return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} style={{ background: 'transparent' }} />;
     }
 
     onMouseMove = (e: React.MouseEvent) => {