CSS rework

assets/static/css/main.css

@@ -697,6 +697,10 @@ input[type='text']{
   width: 100%
 }
 
+.col.rest {
+  overflow: hidden;
+}
+
 .col.s1 {
   width: 8.33333%
 }
@@ -781,8 +785,22 @@ input[type='text']{
   z-index: 5;
 }
 
+#quickbox-title {
+  float: left;
+  margin-left: 8px;
+  margin-top: 10px;
+}
+
+#quickbox-close {
+  float: right;
+  margin-top: 4px;
+}
+
 #quickbox-top-bar {
+  color: #fff;
+  background-color: var(--primary-color);
   height: var(--quickbox-topbar-height);
+  font-size: 18px;
 }
 
 #quickbox-footer {
@@ -797,14 +815,38 @@ input[type='text']{
   flex-direction: column-reverse;
 }
 
-#quickbox-content .w3-button {
+.quickbox-row {
+  border: 1px solid #cccccc;
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+
+.quickbox-row:before {
+  content: "";
+  display: table;
+}
+
+.quickbox-row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+#quickbox-content .button {
   padding: 6px 10px;
 }
 
-#quickbox-content .buttons {
+.quickbox-row .buttons {
+  float: right;
   width: 32px;
 }
 
+.quickbox-row .note {
+  overflow: hidden;
+}
+
 #quickbox-content .buttons :first-child {
   margin-bottom: 4px;
 }
@@ -836,13 +878,10 @@ input[type='text']{
 .quickbox-row {
   margin-top: 4px;
   margin-bottom: 4px;
-}
-
-#quickbox-content .w3-row {
   background-color: #fff;
 }
 
-#quickbox-content div:nth-child(2n+1) {
+#quickbox-notes div:nth-child(2n+1) {
   background-color: #fafafa;
 }
 

assets/templates/base.tmpl

@@ -67,20 +67,15 @@
       </div>
     </div>
 
-    <div id="quickbox" class="w3-light-gray">
-      <div class="w3-bar w3-top w3-metro-dark-blue w3-large noswipe" id="quickbox-top-bar">
-        <div class="w3-bar-item" id="quickbox-title-container">
-          <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey"
-            onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
-            <img class="hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
-        </button>
-          <div id="quickbox-title">
-            <div class="w3-left"><h5>Quickbox</h5></div>
-            <div class="w3-right" style="margin-top: 6px; margin-right: 12px;">
-              <button class="w3-button w3-medium w3-round-large" style="padding: 2px 6px;" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
+    <div id="quickbox">
+      <div class="noswipe" id="quickbox-top-bar">
+          <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey"  onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
+            <img alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
+          </button>
+            <div id="quickbox-title">Quickbox</div>
+            <div id="quickbox-close">
+              <button class="button" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
             </div>
-          </div>
-        </div>
       </div>
 
       <div id="quickbox-content">

assets/templates/quickbox/list.tmpl

@@ -1,7 +1,7 @@
 {{define "quickbox:list"}}
 {{ $rowCount := 0 }}
 {{ range .quicknotes}}
-<div id="quicknote-{{.Id}}" class="w3-row w3-container w3-border w3-padding w3-round-large quickbox-row"
+<div id="quicknote-{{.Id}}" class="quickbox-row"
 {{ $rowCount = incr $rowCount}}
 {{ if eq $rowCount 10 }}
 {{ $offset := addI $.offset $rowCount}}
@@ -12,13 +12,11 @@ hx-swap="afterbegin"
 hx-target="#quickbox-notes"
 {{ end }}
 {{ end }}>
-  <div class="w3-col w3-right buttons">
-    <button class="w3-button w3-delete w3-small w3-border w3-round-large" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.w3-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' 
-    onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')">
-  <i class="bi bi-dash-square"></i></button>
-    <button class="w3-button w3-edit w3-small w3-border w3-round-large" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
+  <div class="buttons">
+    <button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.w3-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
+    <button class="button" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
   </div>
-  <div class="w3-rest">{{.Note_rendered | safeHTML}}</div>
+  <div class="note">{{.Note_rendered | safeHTML}}</div>
 </div>
 {{ end }}
 {{ end }}