feat: tweak littlefoot style

- use numerical footnotes
- vertically align footnote buttons to the top
- smaller popover


Former-commit-id: 3c577e8ca28662e44297d0735b9b21b121a569b1

1 files changed, 12 insertions, 17 deletions

diff --git a/assets/css/components/_littlefoot.scss b/assets/css/components/_littlefoot.scss
index aaead488..d3a75b77 100644
--- a/assets/css/components/_littlefoot.scss
+++ b/assets/css/components/_littlefoot.scss
@@ -4,31 +4,25 @@
     --button-active-background-color:#3f3f3f;
     --button-active-text-color:#fff;
     --button-border-radius:0.25rem;
-    --button-height:16px;
     --button-height:1rem;
-    --button-margin:0 1.6px;
-    --button-margin:0 0.1rem;
+    --button-margin:0 0.025rem;
     --button-padding:0 0.3rem;
     --button-transition:background-color 0.25s ease,color 0.25s ease;
     --popover-background-color:#f5f5f5;
     --popover-text-color:#111;
     --popover-border:1px solid #ddd;
-    --popover-border-radius:8px;
-    --popover-border-radius:0.1rem;
+    --popover-border-radius:0.25rem;
     --popover-max-height:15em;
     --popover-max-width:90%;
-    --popover-horizontal-padding:22.4px;
-    --popover-horizontal-padding:1.4rem;
-    --popover-vertical-padding:9.6px;
-    --popover-vertical-padding:0.6rem;
+    --popover-horizontal-padding:0.8rem;
+    --popover-vertical-padding:0;
     --popover-shadow:0 0 0.2rem rgba(0,0,0,.1);
     --popover-transform-origin:50% 0;
-    --popover-transform:scale(0.1) translateZ(0);
-    --popover-active-transform:scale(1) translateZ(0);
+    --popover-transform:scale(0.1) translateY(calc(var(--button-height) / 2 - var(--popover-tooltip-size))) translateX(0.25rem);
+    --popover-active-transform:scale(1) translateY(calc(var(--button-height) / 2 - var(--popover-tooltip-size))) translateX(0.25rem);
     --popover-transition:opacity 0.25s ease,transform 0.25s ease;
-    --popover-width:22em;
+    --popover-width:15em;
     --popover-scroll-indicator-color:#3f3f3f;
-    --popover-tooltip-size:8px;
     --popover-tooltip-size:0.5rem;
     position:relative;
 
@@ -47,8 +41,6 @@
 }
 .littlefoot__button{
     background-color:var(--button-background-color);
-    border:0;
-    border:var(--button-border,0);
     border-radius:var(--button-border-radius);
     color:var(--button-text-color);
     cursor:pointer;
@@ -65,7 +57,7 @@
     -webkit-text-decoration:none;
     text-decoration:none;
     transition:var(--button-transition);
-    vertical-align:middle
+    vertical-align:top;
 }
 .littlefoot__button.is-active,.littlefoot__button:active,.littlefoot__button:focus,.littlefoot__button:hover{
     background-color:var(--button-active-background-color);
@@ -123,7 +115,10 @@
     max-height:var(--popover-max-height);
     overflow:auto;
     padding:var(--popover-vertical-padding) var(--popover-horizontal-padding);
-    width:100%
+    width:100%;
+    p {
+        margin:0.75rem 0;
+    }
 }
 .littlefoot__content img{
     max-width:100%