}
main {
+ position: relative;
background: #fafaff;
min-height: 70vh;
clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
font-size: 100%;
}
}
+
+div[contenteditable=true]:focus-within {
+ outline: none;
+ box-shadow: inset 0 0 2px #333;
+}
+
+.style-popup {
+ background: white;
+ box-shadow: 0 0 5px #666;
+ input {
+ display: none;
+ padding: 3px;
+ border: 1px inset #ccc;
+ background: white;
+ width: 0px;
+ transition: width ease 2s;
+ &.shown {
+ display: inline-block;
+ width: 400px;
+ }
+ }
+ button {
+ padding: 0;
+ height: 2em;
+ text-align: center;
+ background: #eee;
+ border: 0px;
+ &:hover {
+ background: #ccc;
+ }
+ &[data-action=createLink] {
+ color: blue;
+ text-decoration: underline;
+ }
+ }
+ &.short button {
+ width: 2em;
+ }
+}