Added Pinned notes CSS

Credits to @piotr
logseq · Mar 10, 2021 · b650b28 · b650b28
1 parent f6c5c4e
commit b650b28
Showing 1 changed file with 61 additions and 0 deletions.
diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
@@ -358,3 +358,64 @@
 .embed-header {
   font-weight: 600;
 }
+
+/* pinned notes */
+.pinned {
+  margin-top: 50px;
+  position: relative;
+}
+.pinned svg {
+    display: none;
+}
+
+.pinned > :last-child {
+  color: #333;
+  position: relative;
+  width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  box-shadow: 0 12px 10px -7px rgb(0 0 0 / 20%);
+  background: #eae672;
+  transform: rotate(2deg);
+}
+
+.pinned > :first-child {
+  background-color: #aaa;
+  display: block;
+  height: 32px;
+  width: 2px;
+  position: absolute;
+  left: 50%;
+  top: -16px;
+  z-index: 1;
+  padding: 0;
+}
+
+.pinned > :first-child:after {
+  background-color: #A31;
+  background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
+              inset 3px 3px 3px hsla(0,0%,100%,.2),
+              inset -3px -3px 3px hsla(0,0%,0%,.2),
+              23px 20px 3px hsla(0,0%,0%,.15);
+  content: '';
+  height: 12px;
+  left: -5px;
+  position: absolute;
+  top: -10px;
+  width: 12px;
+}
+
+.pinned > :first-child:before {
+  background-color: hsla(0,0%,0%,0.1);
+  box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
+  content: '';
+  height: 24px;
+  width: 2px;
+  left: 0;
+  position: absolute;
+  top: 8px;
+  transform: rotate(57.5deg);
+  transform-origin: 50% 100%;
+}