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 1a306785bd5f5bfdc983ad1596d3657da1654b5f..164c2df075ca3220e54256ebbae92dd0cb78ea2f 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -134,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 {
@@ -184,11 +191,12 @@ footer {
 }
 
 div[contenteditable=true]:focus-within {
-       outline: none;
-       box-shadow: inset 0 0 2px #333;
+       outline: 1px solid gray;
+       outline-offset: 3px;
 }
 
-.style-popup {
+.inline-style-popup,
+.block-style-popup {
        background: white;
        box-shadow: 0 0 5px #666;
        input {
@@ -204,7 +212,7 @@ div[contenteditable=true]:focus-within {
                }
        }
        button {
-               padding: 0;
+               padding: 0 0.5em;
                height: 2em;
                text-align: center;
                background: #eee;
@@ -216,8 +224,51 @@ div[contenteditable=true]:focus-within {
                        color: blue;
                        text-decoration: underline;
                }
+               &.on {
+                       background: #444;
+                       color: white;
+               }
        }
-       &.short button {
+       &.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;
+               }
        }
 }