Add a button, realign the buttons.

[redakcja.git] / src / redakcja / static / css / html.scss

diff --git a/src/redakcja/static/css/html.scss b/src/redakcja/static/css/html.scss
index cfd7fc2..61d5a79 100644 (file)
--- a/src/redakcja/static/css/html.scss
+++ b/src/redakcja/static/css/html.scss
@@ -300,12 +300,19 @@ div[x-node] > .uwaga {
  * Przypisy w tekście
  */
  
  * Przypisy w tekście
  */
  

-.htmlview .annotation-inline-box {
-    &:hover > span[x-annotation-box] {
-        display: block;
+.htmlview .annotation-inline-box,
+.htmlview .reference-inline-box {
+    &:hover {
+       > span[x-annotation-box],
+       > span[x-preview]
+       {
+            display: block;
+       }

     }
 
     }
 

-    > span[x-annotation-box] {
+    > span[x-annotation-box],
+    > span[x-preview]
+    {

         display: none;
         width: 300px;
         font-size: 10pt;
         display: none;
         width: 300px;
         font-size: 10pt;


@@ -327,6 +334,7 @@ div[x-node] > .uwaga {
 
         &.editing {
             display: block;
 
         &.editing {
             display: block;

+            background: #93ff93;

         }
     }
     
         }
     }
     


@@ -351,63 +359,36 @@ div[x-node] > .uwaga {
     visibility: hidden;
 }
 
     visibility: hidden;
 }
 

-.active-block-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-    font-size: 16px;
-    line-height: 1.5;
+.html-editarea-toolbar {
+    display: flex;
+    justify-content: space-between;

     position: absolute;
     top: -28px;
     left: -1px;
     position: absolute;
     top: -28px;
     left: -1px;

-    width: 72px;

     height: 28px;
     height: 28px;

-    display: block;
-    /*    margin: 4px 0 2px 0;*/
-    padding: 5px 5px 2px 5px;
-    background-color: #FAFAFA;
-    /*    z-index: 3000;*/
-    /*    color: #FFF;
-     z-index: 1500;
-     */
-    border: 1px solid #DDD;
-    border-bottom: none;
-}
-
-.delete-button {
-    left: 70px;
-}
+    right: -1px;

 
 

-.tytul-button {
-    left:150px;
-    width:100px;
-}
+    .html-editarea-toolbar-left,
+    .html-editarea-toolbar-right {
+        display: flex;
+    }

 
 

-.wyroznienie-button {
-    left:250px;
-    width:100px;
-}
-.slowo-button {
-    left:350px;
-    width:100px;
-}
-.znak-button {
-    left:450px;
-    width:100px;
-}
-.uwaga-button {
-    right: 0;
-    left: auto;
-}
+    button {
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+        font-size: 16px;
+        line-height: 1.5;

 
 

-.active-block-button:hover, .active-block-button:active,
-.delete-button:hover, .delete-button:active,
-.accept-button:hover, .accept-button:active,
-.tytul-button:hover, .tytul-button:active,
-.wyroznienie-button:hover, .wyroznienie-button:active,
-.slowo-button:hover, .slowo-button:active,
-.znak-button:hover, .znak-button:active {
-    /*    color: #FFF;*/
-    background-color: #999;
-    color: #FFF;
+        display: block;
+        padding: 5px 5px 2px 5px;
+        background-color: #FAFAFA;
+        border: 1px solid #DDD;
+        border-bottom: none;
+
+        &:hover {
+            background-color: #999;
+            color: #FFF;
+        }
+    }

 }
 
 /*
 }
 
 /*


@@ -538,3 +519,37 @@ div[x-node] > .uwaga {
     border:0;
     color: black;
 } 
     border:0;
     color: black;
 } 

+
+
+#media-chooser {
+    img {
+        border: 3px solid transparent;
+        &.active {
+            border-color: green;
+        }
+    }
+}
+
+
+
+div[x-node="numeracja"] {
+    background: lightblue;
+    margin: 2em;
+    padding: 2em;
+    border-radius: 1em;
+    &::before {
+       content: "Reset numeracji";
+    }
+}
+
+*[x-number]::before {
+    display: block;
+    content: attr(x-number);
+    position: absolute;
+    text-align: right;
+    width: 40px;
+    left: -60px;
+    font-size: .9em;
+    opacity: .8;
+    
+}