1 files changed, 80 insertions, 36 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index f78bf9ff8..158b02b5a 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,20 +1,22 @@
 @import "globalCssVariables";
 
+$linkGap : 3px;
 .documentDecorations {
     position: absolute;
 }
+
 .documentDecorations-container {
     z-index: $docDecorations-zindex;
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     display: grid;
     grid-template-rows: 20px 8px 1fr 8px;
     grid-template-columns: 8px 16px 1fr 8px 8px;
     pointer-events: none;
 
     #documentDecorations-centerCont {
-        grid-column:3;
+        grid-column: 3;
         background: none;
     }
 
@@ -39,8 +41,8 @@
     #documentDecorations-bottomRightResizer,
     #documentDecorations-topRightResizer,
     #documentDecorations-rightResizer {
-        grid-column-start:5;
-        grid-column-end:7;
+        grid-column-start: 5;
+        grid-column-end: 7;
     }
 
     #documentDecorations-topLeftResizer,
@@ -63,16 +65,17 @@
         cursor: ew-resize;
     }
     .title{
-        width:100%;
         background: lightblue;
-        grid-column-start:3;
+        grid-column-start: 3;
         grid-column-end: 4;
         pointer-events: auto;
+        overflow: hidden;
     }
 }
 
+
 .documentDecorations-closeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 4;
     grid-column-end: 6;
@@ -80,8 +83,9 @@
     text-align: center;
     cursor: pointer;
 }
+
 .documentDecorations-minimizeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 1;
     grid-column-end: 3;
@@ -94,6 +98,7 @@
     width: $MINIMIZED_ICON_SIZE;
     height: $MINIMIZED_ICON_SIZE;
 }
+
 .documentDecorations-background {
     background: lightblue;
     position: absolute;
@@ -101,8 +106,8 @@
 }
 
 .linkFlyout {
-    grid-column: 1/4;
-    margin-left: 25px;
+    grid-column: 2/4;
+    margin-top: $linkGap;
 }
 
 .linkButton-empty:hover {
@@ -117,35 +122,34 @@
     cursor: pointer;
 }
 
+.link-button-container {
+    grid-column: 1/4;
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+}
+
 .linkButton-linker {
-    position:absolute;
-    bottom:0px;
-    left: 0px;
+    margin-left: 5px;
+    margin-top: $linkGap;
     height: 20px;
     width: 20px;
-    margin-top: 10px;
-    margin-right: 5px;
+    text-align: center;
     border-radius: 50%;
-    opacity: 0.9;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
-.linkButton-tray {
-    grid-column: 1/4;
+
+.linkButton-linker:hover {
+    cursor: pointer;
+    transform: scale(1.05);
 }
-.linkButton-empty {
+
+.linkButton-empty, .linkButton-nonempty {
     height: 20px;
     width: 20px;
-    margin-top: 10px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
@@ -159,17 +163,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
-.linkButton-nonempty {
-    height: 20px;
-    width: 20px;
-    margin-top: 10px;
-    border-radius: 50%;
-    opacity: 0.9;
+.templating-menu {
+    position: absolute;
+    bottom: 0;
+    left: 50px;
     pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -178,4 +184,42 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.fa-icon-link {
+    margin-top: 3px;
+}
+.templating-button {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    opacity: 0.9;
+    font-size:14;
+    background-color: $dark-color;
+    color: $light-color;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+    }
+}
+
+#template-list {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 150px;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
+    background-color: $light-color-secondary;
+    padding: 2px 12px;
+    list-style: none;
+
+    input {
+        margin-right: 10px;
+    }
 }
\ No newline at end of file