From b650b28c865a90d6de9b44e7bad3ffb722a23776 Mon Sep 17 00:00:00 2001 From: akhater Date: Wed, 10 Mar 2021 16:39:22 +0200 Subject: [PATCH] Added Pinned notes CSS Credits to @Piotr --- src/main/frontend/components/block.css | 61 ++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index 3e5925d1581..c971b985308 100644 --- 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%; +}