display stickynote fully when hovering

[lobster] / therapies / therapy.css

diff --git a/therapies/therapy.css b/therapies/therapy.css
index 15412b9d3b8889b3ceaf1652e97e5f7372ca559e..323f0483c8ef258fc58c3d8cec650a28328784a7 100644 (file)
--- a/therapies/therapy.css
+++ b/therapies/therapy.css
@@ -164,28 +164,29 @@ input.stickynote + .stickynote:nth-of-type(2n) {
 }
 
 input.stickynote + .stickynote > * { display: none; }
+input.stickynote + .stickynote > textarea {
+  display: block;
+  position: absolute;
+  left; 0; right: 0; bottom: 0; top: 0;
+  width: 100%; height: 100%;
+  background-color: #FF8;
+  padding: 2em 1em;
+}
 input.stickynote + .stickynote > label {
   position: absolute;
-  top: 0; bottom: 0; right: .5ex;
+  top: 0; bottom: 0; right: .5ex; left: 0;
   display: block;
   text-align: right;
   font-weight: bold;
+  z-index: 1;
 }
 input.stickynote + .stickynote:hover {
-  left: -1ex;
+  width: auto; left: 0em; right: 2em;
 }
 input.stickynote:checked + .stickynote {
   width: auto; left: 1em; right: 1em;
 }
 input.stickynote:checked + .stickynote > * { display: block; }
-input.stickynote:checked + .stickynote > textarea {
-  display: block;
-  position: absolute;
-  left; 0; right: 0; bottom: 0; top: 0;
-  width: 100%; height: 100%;
-  background-color: #FF8;
-  padding: 2em 1em;
-}
 input.stickynote:checked + .stickynote > button[type="submit"] {
   display: block;
   position: absolute;
@@ -254,6 +255,7 @@ fieldset.color > input.color + label {
     width: 38%;
     margin-right: 0;
   }
+  input.stickynote + .stickynote:hover { right: calc(50% + 1em); }
   input.stickynote:checked + .stickynote { right: 50%; }
   fieldset.penwidth,
   fieldset.color { position: fixed; }