Renamed clear all data button to logout

components.js

@@ -1930,17 +1930,6 @@ smPopup.innerHTML = `
     --backdrop: rgba(0, 0, 0, 0.6);
     --border-radius: 0.8rem 0.8rem 0 0;
 }
-::-webkit-scrollbar{
-    width: 0.5rem;
-}
-
-::-webkit-scrollbar-thumb{
-    background: rgba(var(--text-color), 0.3);
-    border-radius: 1rem;
-    &:hover{
-        background: rgba(var(--text-color), 0.5);
-    }
-}
 .popup-container{
     display: -ms-grid;
     display: grid;
@@ -2057,6 +2046,19 @@ smPopup.innerHTML = `
         margin: 0.5rem 0;
     }
 }
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
 </style>
 <div part="background" class="popup-container hide" role="dialog">
     <div part="popup" class="popup">

css/main.scss

@@ -46,6 +46,7 @@ button{
     -webkit-tap-highlight-color: transparent;
 }
 .button{
+    border-radius: 0.2rem;
     padding: 0.5rem 0.6rem;
 }
 .button--primary{

index.html

@@ -223,7 +223,7 @@
             </g>
         </svg>
         <h4 id="show_log_events"></h4>
-        <sm-button class="margin-top-1-5" onclick="cloudArticleApp.logout()">Clear all data</sm-button>
+        <sm-button class="margin-top-1-5" onclick="cloudArticleApp.logout()">Logout</sm-button>
     </div>
 
     <section id="article_container">