styling: update button styling

adding proper primary and secondary button styles.

src/index.html

@@ -24,8 +24,8 @@
                 <legend>write a new note</legend>
                 <textarea name="message" rows="1"></textarea>
                 <div class="buttons">
-                  <button type="submit" id="publish" disabled>send</button>
+                  <button type="submit" id="publish" class="primary" disabled>send</button>
-                  <button type="button" name="back">back</button>
+                  <button type="button" name="back" class="primary">back</button>
                 </div>
                 <small id="sendstatus" class="form-status"></small>
               </fieldset>
@@ -42,7 +42,7 @@
                 <input type="url" name="picture" id="profile_picture" placeholder="https://your.domain/image.png">
                 <div class="buttons">
                   <small id="profilestatus" class="form-status" hidden></small>
-                  <button type="submit" name="publish" tabindex="0" disabled>publish</button>
+                  <button type="submit" name="publish" class="primary" tabindex="0" disabled>publish</button>
                 </div>
               </form>
               <form action="#" name="options">
@@ -86,8 +86,8 @@
                 <input type="password" id="privatekey" autocomplete="off">
                 <div class="buttons">
                   <small id="keystatus" class="form-status" hidden></small>
-                  <button type="button" name="generate" tabindex="0">new</button>
+                  <button type="button" name="generate" class="primary" tabindex="0">new</button>
-                  <button type="button" name="import" tabindex="0" disabled>save</button>
+                  <button type="button" name="import" class="primary" tabindex="0" disabled>save</button>
                 </div>
               </form>
               <footer class="text">

src/styles/form.css

@@ -117,16 +117,15 @@ form .buttons,
 .buttons img,
 .buttons small,
 .buttons span {
+  font-weight: normal;
   vertical-align: middle;
 }
 
 button {
-  --bg-color: var(--bgcolor-accent);
+  background-color: transparent;
-  --border-color: var(--bgcolor-accent);
+  border: none;
-  background-color: var(--bg-color);
-  border: 0.2rem solid var(--border-color);
-  border-radius: .2rem;
   cursor: pointer;
+  font-weight: bold;
   outline-offset: 1px;
   word-break: normal;
 }
@@ -137,7 +136,12 @@ button:active {
 
 .primary,
 .secondary {
-  padding: .8rem 2.4rem;
+  border: 0.2rem solid var(--bgcolor-accent);
+  border-radius: .2rem;
+  padding: .9rem 2rem .7rem 2rem;
+}
+.primary {
+  background-color: var(--bgcolor-accent);
 }
 .secondary {
   background-color: transparent;