enhance: improve contrast of tooltip

logseq · Nov 17, 2021 · 6f312d5 · 6f312d5
1 parent 2014abd
commit 6f312d5
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/resources/css/tooltip.css b/resources/css/tooltip.css
@@ -22,22 +22,22 @@
 }
 
 .tippy-popper[x-placement^=top] [x-arrow] {
-  border-top: 7px solid var(--ls-tertiary-background-color);
+  border-top: 7px solid var(--ls-quaternary-background-color);
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   bottom: -7px;
   margin: 0 9px
 }
 
 .tippy-popper[x-placement^=top] [x-arrow].arrow-small {
-  border-top: 5px solid var(--ls-tertiary-background-color);
+  border-top: 5px solid var(--ls-quaternary-background-color);
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   bottom: -5px
 }
 
 .tippy-popper[x-placement^=top] [x-arrow].arrow-big {
-  border-top: 10px solid var(--ls-tertiary-background-color);
+  border-top: 10px solid var(--ls-quaternary-background-color);
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   bottom: -10px
@@ -158,22 +158,22 @@
 }
 
 .tippy-popper[x-placement^=bottom] [x-arrow] {
-  border-bottom: 7px solid var(--ls-tertiary-background-color);
+  border-bottom: 7px solid var(--ls-quaternary-background-color);
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   top: -7px;
   margin: 0 9px
 }
 
 .tippy-popper[x-placement^=bottom] [x-arrow].arrow-small {
-  border-bottom: 5px solid var(--ls-tertiary-background-color);
+  border-bottom: 5px solid var(--ls-quaternary-background-color);
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   top: -5px
 }
 
 .tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
-  border-bottom: 10px solid var(--ls-tertiary-background-color);
+  border-bottom: 10px solid var(--ls-quaternary-background-color);
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   top: -10px
@@ -294,22 +294,22 @@
 }
 
 .tippy-popper[x-placement^=left] [x-arrow] {
-  border-left: 7px solid var(--ls-tertiary-background-color);
+  border-left: 7px solid var(--ls-quaternary-background-color);
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   right: -7px;
   margin: 6px 0
 }
 
 .tippy-popper[x-placement^=left] [x-arrow].arrow-small {
-  border-left: 5px solid var(--ls-tertiary-background-color);
+  border-left: 5px solid var(--ls-quaternary-background-color);
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   right: -5px
 }
 
 .tippy-popper[x-placement^=left] [x-arrow].arrow-big {
-  border-left: 10px solid var(--ls-tertiary-background-color);
+  border-left: 10px solid var(--ls-quaternary-background-color);
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   right: -10px
@@ -430,22 +430,22 @@
 }
 
 .tippy-popper[x-placement^=right] [x-arrow] {
-  border-right: 7px solid var(--ls-tertiary-background-color);
+  border-right: 7px solid var(--ls-quaternary-background-color);
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   left: -7px;
   margin: 6px 0
 }
 
 .tippy-popper[x-placement^=right] [x-arrow].arrow-small {
-  border-right: 5px solid var(--ls-tertiary-background-color);
+  border-right: 5px solid var(--ls-quaternary-background-color);
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   left: -5px
 }
 
 .tippy-popper[x-placement^=right] [x-arrow].arrow-big {
-  border-right: 10px solid var(--ls-tertiary-background-color);
+  border-right: 10px solid var(--ls-quaternary-background-color);
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   left: -10px
@@ -587,12 +587,11 @@
   position: relative;
   color: var(--ls-primary-text-color);
   border-radius: 4px;
-  padding-left: 0.8em;
   text-align: center;
   will-change: transform;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--ls-tertiary-background-color)
+  background-color: var(--ls-quaternary-background-color);
 }
 
 .tippy-tooltip--small {
@@ -627,7 +626,7 @@
 .tippy-tooltip [x-circle] {
   position: absolute;
   will-change: transform;
-  background-color: var(--ls-tertiary-background-color);
+  background-color: var(--ls-quaternary-background-color);
   border-radius: 50%;
   width: 130%;
   width: calc(110% + 2rem);
@@ -656,7 +655,7 @@
 }
 
 .tippy-wrapper {
-  background-color: var(--ls-tertiary-background-color);
+  background-color: var(--ls-quaternary-background-color);
 }
 
 .tippy-hover {