Position and bugfixes of the done/due checkbox

Template/layout/done_style.php

@@ -1,33 +1,29 @@
 <?php
 /**
- * Done/Due badge styling (emitted into the head when the feature is enabled). Two states via
- * .is-done. The Due colors reuse FinanceBuddy's debit badge (#b94a48 / white); Done is a light green
- * with black font. On the board the badge is pinned top-right, below the header (the card .task-board
- * is position:relative); the title reserves right padding so the badge does not cover it. In the task
- * view it is a normal inline list item. Font size is inherited (0.9em on the board, matching the card
- * id / assignee). All values are safe to tune.
+ * Done/Due badge styling (emitted into the head when the feature is enabled). NATURAL document flow --
+ * the badge renders above the title (board card) or as a list item (task view); no absolute
+ * positioning, so it adapts to any card / column / avatar / username size. Two states via .is-done:
+ * Due = black filled box + black text on a light red (#ef9a9a); Done = checked box, black on light
+ * green (#a5d6a7). Both states use black text (core's `.task-board a { color:#000 }` forces the icon
+ * black anyway, so the backgrounds are kept light for contrast). Colors are tunable.
  */
 ?>
 <style>
-.organontweaks-done a {
+span.organontweaks-done a {
+    display: inline-block;
     text-decoration: none;
-    padding: 0 5px;
+    padding: 3px 10px;
     border-radius: 3px;
-    background: #b94a48;
-    color: #fff;
-}
-.organontweaks-done.is-done a {
-    background: #a5d6a7;
+    background: #ef9a9a;
     color: #000;
     font-weight: bold;
 }
-.task-board .organontweaks-done {
-    position: absolute;
-    top: 24px;
-    right: 5px;
-    z-index: 5;
+span.organontweaks-done.is-done a {
+    background: #a5d6a7;
+    color: #000;
 }
-.task-board .task-board-title {
-    padding-right: 4.2em;
+.organontweaks-done {
+    display: inline-block;
+    margin: 1px 0;
 }
 </style>