1 files changed, 181 insertions, 0 deletions
diff --git a/public/css/widget/migrate-popup.less b/public/css/widget/migrate-popup.less
new file mode 100644
index 0000000..8f9586b
--- /dev/null
+++ b/public/css/widget/migrate-popup.less
@@ -0,0 +1,181 @@
+#migrate-popup {
+  @transitionLength: 350ms;
+
+  display: flex;
+  min-width: 16em;
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  right: 4em;
+  pointer-events: none;
+  line-height: 1.5em;
+
+  .transform(translateY(-100%));
+  .transition(transform @transitionLength ease-in);
+
+  &.active {
+    .transform(translateY(0%));
+    .transition(transform @transitionLength ease-out);
+  }
+
+  .suggestion-area {
+    .transform(translateY(0%));
+    .transition(transform 0s linear @transitionLength);
+  }
+
+  &.active .suggestion-area {
+    .transition(transform @transitionLength ease-out);
+  }
+
+  &.minimized .suggestion-area {
+    .transform(translateY(-100%));
+    .transition(transform @transitionLength ease-in);
+  }
+
+  &.hidden .suggestion-area {
+    .transition(none);
+  }
+
+  .minimizer {
+    width: 1.25em;
+    height: 1.5em;
+    margin-left: -1px;
+    z-index: 1;
+    pointer-events: auto;
+
+    border-bottom-right-radius: 4px;
+    background-color: @body-bg-color;
+
+    .transition(none);
+
+    i:before {
+      width: 1em;
+      margin: .1em 0 0 0;
+      content: '\f102';
+      font-size: 1.25em;
+      cursor: pointer;
+      color: @gray-light;
+    }
+
+    i:hover:before {
+      color: @menu-highlight-color;
+    }
+  }
+
+  &.minimized .minimizer {
+    border-bottom-left-radius: 4px;
+    .transition(border-bottom-left-radius 0s linear @transitionLength);
+  }
+
+  &.hidden .minimizer i:before {
+    content: '\f103';
+  }
+
+  &:not(.active) .suggestion-area, &.hidden .suggestion-area {
+    box-shadow: none;
+  }
+
+  .suggestion-area {
+    display: flex;
+    flex-direction: column-reverse;
+
+    padding: .75em;
+    flex-grow: 1;
+    pointer-events: auto;
+    font-size: .75em;
+
+    background: @body-bg-color;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.3);
+
+    button {
+      .link-button();
+    }
+
+    p {
+      display: none;
+      margin-bottom: .5em;
+      color: @text-color-light;
+    }
+
+    form ~ .monitoring-migration-hint,
+    .search-migration-suggestions:not(:empty) + .search-migration-hint,
+    .monitoring-migration-suggestions:not(:empty) + .monitoring-migration-hint {
+      display: block;
+    }
+
+    & > button.close {
+      margin-left: auto;
+      margin-top: 1em;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+    }
+
+    li {
+      margin: .5em 0;
+      display: flex;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
+
+    li {
+      :not(:last-child) {
+        margin-right: .5em;
+      }
+
+      button:hover{
+        opacity: 0.8;
+      }
+
+      button[value="1"] {
+        flex-grow: 1;
+
+        color: @text-color;
+        text-decoration: underline;
+      }
+
+      button[value="0"] {
+        i:before {
+          margin: 0;
+          content: '\e804';
+        }
+      }
+    }
+
+    form {
+      width: 100%;
+
+      .control-group {
+        display: flex;
+        align-items: center;
+
+        .control-label-group {
+          margin-right: .5em;
+        }
+
+        label {
+          margin-left: auto;
+        }
+      }
+    }
+
+    .search-migration-suggestions:not(:empty) ~ form,
+    .search-migration-suggestions:not(:empty) ~ .monitoring-migration-suggestions:not(:empty) {
+      margin-bottom: .5em;
+    }
+  }
+}