end

public/assets/css/style.css

@@ -216,4 +216,177 @@ a.btn, a.btn:hover, a.btn:focus {
 select {
   height: 1.5rem;
   padding-left: 0 !important;
-}
+}
+
+.servers-tree * {
+  list-style-type: none;
+}
+
+.servers-tree {
+  margin: 0;
+  padding: 0;
+}
+
+.servers-tree-group {
+  cursor: pointer;
+  user-select: none;
+}
+
+.servers-tree-group::before {
+  content: " ";
+  display: inline-block;
+  margin-right: 6px;
+  border-top: .375rem solid transparent;
+  border-bottom: .375rem solid transparent;
+
+  border-left: .375rem solid black;
+}
+
+.servers-tree-group--down::before {
+  transform: rotate(90deg);
+}
+
+.servers-tree-group__list {
+  display: none;
+}
+
+.servers-tree-group__list--active {
+  display: block;
+}
+
+.modal {
+  display: none;
+}
+
+.modal--active {
+  display: block;
+}
+
+.modal__bg {
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, .3);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.modal__window {
+  width: 300px;
+  position: fixed;
+  top: calc(50% - 96px);
+  left: calc(50vw - 150px);
+  height: 190px;
+  z-index: 2;
+}
+
+.modal-window--spiner::before {
+  content: "";
+  display: block;
+  color: black;
+  font-size: .25rem;
+  margin: 0;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: absolute;
+  animation: wloadingkf 1.3s infinite linear;
+  transform: translate3d(0, -50%, 0);
+  font-family: monospace;
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+}
+
+.modal-window--spiner .modal-window__body {
+  display: none;
+}
+
+.modal-window {
+  border: 1px solid #666;
+  width: 100%;
+  position: relative;
+  height: 100%;
+  background: #eee;
+  z-index: 2;
+  border-radius: .325rem;
+  box-shadow: 0 .125rem .25rem #666;
+}
+
+.modal-window__title {
+  text-align: center;
+}
+
+.modal-window__close {
+  position: absolute;
+  right: 0;
+  top: .125rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.3;
+  cursor: pointer;
+}
+
+.modal-window__close:hover {
+  opacity: 1;
+}
+
+.modal-window__close:before,
+.modal-window__close:after {
+  position: absolute;
+  left: .25rem;
+  content: ' ';
+  height: 1.0625rem;
+  width: .125rem;
+  background-color: #333;
+}
+
+.modal-window__close:before {
+  transform: rotate(45deg);
+}
+
+.modal-window__close:after {
+  transform: rotate(-45deg);
+}
+
+@keyframes wloadingkf {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+.modal-window-body {
+  padding: 1.5rem 0;
+}
+
+.modal-window-body__label {
+  font-weight: 700;
+  padding: 0 .5rem;
+  font-size: 85%;
+  min-width: 7.5rem;
+  display: inline-block;
+}
+