Consolidate button.css into style.css (#1832)

Resolves #1769

`style.css` already imports `button.css`, so each component doesn't need
to import `button.css` again.

This PR does the following:
* Drops the redundant `button.css` imports
* Moves the contents of `button.css` into `style.css`
* Drops a redundant `cursors.css` import

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1832"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

app/static/css/style.css

@@ -1,5 +1,4 @@
 @import "../third-party/fonts/fonts.css";
-@import "button.css";
 @import "cursors.css";
 
 :root {
@@ -126,6 +125,108 @@ input[type="password"].monospace {
   height: 1.58rem;
 }
 
+button,
+.btn {
+  display: inline-block;
+  padding: 0.4rem 1.25rem;
+  margin: 1rem;
+  text-decoration: none;
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: center;
+  transition: background 250ms ease-in-out, transform 150ms ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--brand-metallic-medium);
+  background: var(--brand-metallic-light)
+    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 60%);
+}
+
+button:hover,
+.btn:hover,
+button:focus,
+.btn:focus {
+  background-color: var(--brand-metallic-bright);
+}
+
+button:focus,
+.btn:focus {
+  outline: 1px solid #fff;
+  outline-offset: -4px;
+}
+
+button:active,
+.btn:active {
+  transform: scale(0.99);
+}
+
+button:disabled,
+.btn:disabled {
+  cursor: not-allowed;
+}
+
+.btn-action {
+  background-color: var(--brand-blue);
+  border-color: var(--brand-blue-dark);
+}
+
+.btn-action:hover,
+.btn-action:active,
+.btn-action:focus {
+  background-color: var(--brand-blue-bright);
+}
+
+.btn-action:disabled {
+  background-color: var(--brand-blue-light);
+}
+
+.btn-success {
+  background-color: var(--brand-green);
+  border-color: var(--brand-green-dark);
+}
+
+.btn-success:hover,
+.btn-success:active,
+.btn-success:focus {
+  background-color: var(--brand-green-bright);
+}
+
+.btn-success:disabled {
+  background-color: var(--brand-green-light);
+}
+
+.btn-danger {
+  background-color: var(--brand-red);
+  border-color: var(--brand-red-dark);
+}
+
+.btn-danger:hover,
+.btn-danger:active,
+.btn-danger:focus {
+  background-color: var(--brand-red-bright);
+}
+
+.btn-danger:disabled {
+  background-color: var(--brand-red-light);
+}
+
+.btn-text {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #555;
+}
+
+.btn-external-link {
+  background-image: url("/img/external-link-icon.svg");
+  background-repeat: no-repeat;
+  background-position: top 49% right 1.2em;
+  background-size: 0.75em;
+  padding-right: 2.5em;
+}
+
 .logs-output {
   /* Note: don't forget to also add the monospace class when using this class */
   padding: 0.25rem 0.5rem;

app/templates/custom-elements/about-dialog.html

@@ -1,7 +1,6 @@
 <template id="about-dialog-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     .content {
       text-align: left;

app/templates/custom-elements/change-hostname-dialog.html

@@ -1,7 +1,6 @@
 <template id="change-hostname-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #initializing,
     #prompt,

app/templates/custom-elements/debug-dialog.html

@@ -1,7 +1,6 @@
 <template id="debug-dialog-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
     @import "css/toggle.css";
 
     #logs-loading,

app/templates/custom-elements/feature-pro-dialog.html

@@ -1,7 +1,6 @@
 <template id="feature-pro-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
   </style>
 
   <div id="feature-pro">

app/templates/custom-elements/menu-bar.html

@@ -1,7 +1,6 @@
 <template id="menu-bar-template">
   <style>
     @import "css/style.css";
-    @import "css/cursors.css";
 
     a {
       color: white;

app/templates/custom-elements/network-status-dialog.html

@@ -1,7 +1,6 @@
 <template id="network-status-dialog-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #initializing,
     #display {

app/templates/custom-elements/share-logs-button.html

@@ -1,7 +1,6 @@
 <template id="share-logs-button-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #get-url-button,
     #get-url-button progress-spinner,

app/templates/custom-elements/shutdown-dialog.html

@@ -1,7 +1,6 @@
 <template id="shutdown-dialog-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #prompt,
     #restarting,

app/templates/custom-elements/update-dialog.html

@@ -1,7 +1,6 @@
 <template id="update-dialog-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #checking,
     #update-available,

app/templates/custom-elements/update-prompt-automatic.html

@@ -1,7 +1,6 @@
 <template id="update-prompt-automatic">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
   </style>
 
   <p>An update is available. Would you like to install the latest version?</p>

app/templates/custom-elements/video-settings-dialog.html

@@ -1,7 +1,6 @@
 <template id="video-settings-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
     @import "css/icons.css";
 
     #loading,

app/templates/custom-elements/video-settings-h264-stun.html

@@ -1,7 +1,6 @@
 <template id="video-settings-h264-stun-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
     @import "css/icons.css";
 
     :host {

app/templates/custom-elements/wifi-dialog.html

@@ -4,7 +4,6 @@
 <template id="wifi-template">
   <style>
     @import "css/style.css";
-    @import "css/button.css";
 
     #initializing,
     #prompt,