misc: add image/file upload for live edit (sync with panikdb)

[chloro.git] / chloro / phyll / static / css / style.scss

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 63526efcd17a9ea12b162b68f9f199ddfe6844c4..164c2df075ca3220e54256ebbae92dd0cb78ea2f 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -55,11 +55,15 @@ div.actions {
        }
 }
 
-main {
+main, footer {
        margin: 0 4em;
        padding: 1em;
-       background: #fafaff;
        max-width: 70em;
+}
+
+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);
 }
@@ -130,6 +134,13 @@ main {
                margin-top: 3em;
                color: lighten($text-color, 40%);
        }
+       div.note {
+               background: #fbf7c1;;
+               padding: 0.2em 0.5em 0.2em 2em;
+               p {
+                       margin: 0.5em 0;
+               }
+       }
 }
 
 .post-list {
@@ -154,5 +165,110 @@ main {
                        font-size: 60%;
                }
        }
+}
+
+.older.post-list {
+       margin: 5em 0 2em 0;
+       padding: 1em 0;
+       border-top: 0.1em dotted $link-color;
+       border-bottom: 0.1em dotted $link-color;
+       line-height: 200%;
+       li {
+               display: inline;
+               a {
+                       padding-top: 0;
+                       display: inline;
+                       font-size: 120%;
+               }
+       }
+}
+
+footer {
+       p {
+               text-align: right;
+               font-size: 100%;
+       }
+}
+
+div[contenteditable=true]:focus-within {
+       outline: 1px solid gray;
+       outline-offset: 3px;
+}
+
+.inline-style-popup,
+.block-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 0.5em;
+               height: 2em;
+               text-align: center;
+               background: #eee;
+               border: 0px;
+               &:hover {
+                       background: #ccc;
+               }
+               &[data-action=createLink] {
+                       color: blue;
+                       text-decoration: underline;
+               }
+               &.on {
+                       background: #444;
+                       color: white;
+               }
+       }
+       &.inline-style-popup button {
+               width: 2em;
+               padding: 0;
+       }
+       &.block-style-popup {
+               &.selected button {
+                       display: none;
+                       &.on {
+                               display: block;
+                       }
+               }
+       }
+}
+
+button#save {
+       position: sticky;
+       bottom: 10px;
+}
 
+main.post {
+       [contenteditable=true] div.figure {
+               cursor: pointer;
+       }
+       div.figure {
+               text-align: center;
+               line-height: initial;
+               img {
+                       max-width: 90%;
+                       max-height: 70vh;
+               }
+               span.empty::before {
+                       min-height: 50px;
+                       margin: 0 auto;
+                       display: block;
+                       width: 90%;
+                       background: #eee;
+                       padding: 1rem;
+                       font-size: 200px;
+                       content: "(image)";
+                       color: #aaa;
+               }
+       }
 }