アイコンボタンをmwc-icon-buttonに置き換え #159 (#166)

changelog.md

@@ -51,6 +51,7 @@ Edition: ORIZIN Agent HTML
 - 設定の検索ボックスが未入力のときに入力可能領域を右端まで伸ばすことで使いやすくしました　[#142](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/142)
 - メニューの開閉ボタンをmwc-icon-buttonに置き換えました　[#145](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/145)
 - すべてのアイコンをmwc-iconに置き換えました　[#158](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/158)
+- すべてのアイコンボタンをmwc-icon-buttonに置き換えました　[#159](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/159)
 
 ### [v5.1.145.0dev-Eagle] - 2021-05-06
 

resource/css/index.scss

@@ -125,26 +125,17 @@ body {
 }
 
 #startButton {
- border: none;
- padding: 0;
- margin-left: 1rem;
- transform: translateY(-0.5rem);
- vertical-align: top;
- font-size: 1.5rem;
+ transform: translateY(-0.5em);
  transition: 0.3s;
- background: none;
+ color: var(--theme_color);
+ opacity: 1;
+ cursor: pointer;
 
- &:disabled {
+ &[disabled] {
  color: var(--text);
  opacity: 0.3;
  cursor: default;
  }
-
- &:enabled {
- color: var(--theme_color);
- opacity: 1;
- cursor: pointer;
- }
 }
 
 #listening_message {
@@ -157,26 +148,19 @@ body {
 
 #start_recognition {
  float: right;
- font-size: 1.5rem;
+ transform: translateY(-0.5em);
  transition: 0.3s;
- background: none;
- padding: 0;
- margin: 0;
- border: none;
-
- &:enabled {
- color: var(--text);
- cursor: pointer;
- opacity: 1;
- }
+ color: var(--text);
+ cursor: pointer;
+ opacity: 1;
 
- &:disabled:not(.listening) {
+ &[disabled]:not(.listening) {
  color: var(--text);
  opacity: 0.3;
  cursor: default;
  }
 
- &.listening i {
+ &.listening {
  color: var(--theme_color);
  }
 }