@openziti/ziti-console-lib 0.3.0

package/assets/styles/tables.css

@@ -0,0 +1,424 @@
+.grid {
+	display: grid;
+	grid-template-columns: auto;
+	grid-gap: 3px;
+}
+
+.grid.singular {
+    grid-template-columns: auto 416px auto;
+    margin-bottom: 20px;
+}
+
+.grid.dual {
+    grid-template-columns: 48% 48%;
+    grid-column-gap: 4%;
+    grid-row-gap: 20px;
+    margin-bottom: 20px;
+}
+
+.grid .col.padLeft {
+	padding-left: 10px;
+}
+
+.grid.links {
+    grid-template-columns: 50px 100px auto 50px;
+    grid-column-gap: 2%;
+	width: 100%;
+}
+
+.grid.threedelete {
+	grid-template-columns: 50% auto 30px;
+    line-height: 45px;
+    font-size: 16px;
+    height: 45px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.split {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: auto 50%;
+}
+
+.grid.aside {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: auto 20%;
+}
+
+.three {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: 33% auto 33%;
+}
+
+.four {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: 25% auto 25% 25%;
+} 
+
+.padCol {
+	padding-left: 15px;
+}
+
+.duplex {
+	display: grid;
+	grid-gap: 0px;
+	grid-template-columns: 50% 50%;
+}
+
+.bubbleTitle {
+	width: 100%;
+    height: 75px;
+    line-height: 75px;
+    font-weight: bold;
+    font-size: 44px;
+    background-color: #28292B;
+    border-radius: 50px;
+    padding-left: 25px;
+    margin-top: 20px;
+	color: #FFF;
+	position: relative;
+}
+
+.inside {
+    position: absolute;
+    width: 40%;
+    height: 55px;
+    right: 10px;
+    text-align: center;
+    top: 30px;    color: var(--white);
+    background-color: var(--black);
+    border-radius: 50px;
+    font-weight: bold;
+    padding-top: 8px;
+}
+
+.split.unsplit {
+	grid-template-columns: auto;
+}
+
+.grid.tags { 
+	grid-template-columns: 50% auto;
+	position: relative;
+	width: 100%;
+    margin-bottom: 10px;	
+}
+
+.grid.checkLabel {
+	grid-template-columns: 70px auto;
+	margin-top: 10px;
+}
+
+.grid.triple {
+	grid-template-columns: 300px auto 300px;
+}
+
+.grid.three {
+	grid-template-columns: 150px auto 150px;
+}
+
+.grid.four {
+	grid-template-columns: 50px auto 150px 50px;
+}
+
+.grid.templates {
+	grid-template-columns: 50px 200px 300px 300px auto 50px;
+}
+
+.grid.flour {
+	grid-template-columns: 50px 150px auto 50px;
+}
+
+.grid.serviceTable {
+	grid-template-columns: 50px auto 30% 150px 50px;
+}
+
+.grid.five {
+	grid-template-columns: 50px auto 150px 150px 50px;
+}
+
+.grid.splitadd {
+	grid-template-columns: auto auto 100px;    
+	column-gap: 10px;
+}
+
+.grid.split.wide {
+	grid-template-columns: auto 49%;  
+	column-gap: 20px;
+    z-index: 10;
+}
+
+.grid.fived {
+	grid-template-columns: 50px 150px 150px auto 50px;
+}
+
+.grid.fives {
+	grid-template-columns: 50px 200px auto 150px 50px;
+}
+
+.grid.floor {
+	grid-template-columns: 250px auto 150px 50px;
+}
+
+.grid.flive {
+	grid-template-columns: 150px 150px 150px auto 50px;
+}
+
+.grid.five.same {
+	grid-template-columns: 18.4% 18.4% 18.4% 18.4% 18.4%;
+    grid-column-gap: 2%;
+}
+
+.grid.six {
+	grid-template-columns: 50px auto 20% 20% 150px 50px;
+}
+
+.grid.dashboard {
+	margin-top: 20px;
+	grid-template-columns: auto 20%;
+	column-gap: 20px;
+	row-gap: 20px;
+}
+
+.grid.numbers {
+    grid-template-columns: 50px 15% auto 15% 15% 15% 15%;
+    column-gap: 20px;
+    border-width: 3px;
+	border-style: solid;
+    border-color: var(--white);
+    background-color: rgba(255,255,255,0.5);
+    padding: 22px;
+    border-radius: 12px;
+    z-index: 10;
+    box-shadow: var(--shadowLarge);
+}
+
+.grid.cells {
+	grid-template-columns: 100%;
+	grid-template-rows: 60% auto;
+    row-gap: 20px;
+}
+
+.grid.seven {
+	grid-template-columns: 50px auto 20% 150px 150px 150px 50px;
+}
+
+.grid.sleven {
+	grid-template-columns: 50px auto 250px 150px 150px 150px 50px;
+}
+
+.grid.policies {
+	grid-template-columns: 50px auto 25% 25% 10% 100px 100px 50px;
+}
+
+.grid.nineOS {
+	grid-template-columns: 50px auto 50px 120px 20% 150px 150px 150px 50px;
+}
+
+.grid.tenOS {
+	grid-template-columns: 50px auto 50px 120px 100px 150px 150px 100px 100px 50px;
+}
+
+.grid.eight {
+	grid-template-columns: 50px 200px auto 15% 15% 15% 15% 50px;
+}
+
+.grid.eightOS {
+	grid-template-columns: 50px 200px 50px auto 15% 15% 15% 15% 50px;
+}
+
+.grid.nine {
+	grid-template-columns: 50px 200px auto 100px 100px 100px 150px 150px 50px;
+}
+
+.grid.ten {
+	grid-template-columns: 50px auto 150px 150px 150px 100px 100px 100px 100px 50px;
+}
+
+.grid.quad {
+	grid-template-columns: 24% 24% 24% 24%;
+	grid-column-gap: 1%;
+}
+
+.grid.oss {
+	grid-template-columns: 70px 100px auto;
+	margin-bottom: 10px;
+}
+
+.grid.quint {
+	grid-template-columns: 24% 24% 24% 24% 50px;
+}
+
+.grid.trio {
+	grid-template-columns: 75px auto;
+	grid-column-gap: 1%;
+}
+
+.grid.addressProtocol {
+	grid-template-columns: 75px auto;
+}
+
+.grid.addressPort {
+	grid-template-columns: auto 75px;
+}
+
+.grid.addressFull {
+	grid-template-columns: 75px auto 75px;
+}
+
+.head.grid {
+	box-sizing: border-box;
+    border-bottom: solid 4px var(--primary);
+    padding-left: 4px;
+    line-height: 55px;
+	position: sticky !important;
+	background-color: var(--background); 
+    top: 0;
+	z-index: 10;
+	opacity: .97;
+}
+
+@supports ((-webkit-backdrop-filter: saturate(90%) blur(20px)) or (backdrop-filter: saturate(90%) blur(20px))) {
+    .head.grid  {
+		background: none;
+		opacity: .97;
+        -webkit-backdrop-filter: saturate(90%) blur(20px);
+        backdrop-filter: saturate(90%) blur(20px)
+    }
+}
+
+.head.grid .col {
+	position: relative;
+	float: left;
+	color: var(--text);
+	font-size: 14px;
+	font-weight: 600;
+	font-family: "Open Sans";
+    padding-left: 5px;
+}
+
+.grid .col {
+	position: relative;
+	padding-right: 5px;
+	float: left;
+	font-size: 15px;
+	font-weight: 400;
+	font-family: 'Open Sans';
+	text-overflow: ellipsis;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	white-space: nowrap;
+	transition: var(--transition);
+}
+
+.clickEdit {
+	cursor: pointer;
+}
+
+.table .row:hover, .table .row:nth-child(even):hover {
+    border-left: 4px solid var(--primary);
+}
+
+.table .row {
+    border-left: 4px solid var(--white);
+    background-color: var(--white);
+    background: var(--white);
+}
+
+.table .row:nth-child(even) {
+    border-left: 4px solid var(--shaded);
+    background-color: var(--shaded);
+    background: var(--shaded);
+}
+
+.grid .col.sort {
+	cursor: pointer;
+	background-position: right 12px center;
+	background-repeat: no-repeat;
+	background-size: 12px 12px;
+}
+
+.grid  .col.sort:hover {
+	color: var(--primary);
+}
+
+.grid .col.sort.asc {
+	background-image: url(../images/SortDown.png);
+	opacity: 1.0;
+}
+
+.grid .col.sort.desc {
+	background-image: url(../images/SortUp.png);
+	opacity: 1.0;
+}
+
+.desktop {
+	display: inline-block;
+}
+
+.ball {
+    width: 22px;
+    height: 22px;
+    position: relative;
+    margin-left: 12px;
+    margin-top: 14px;
+    border-radius: 11px;
+	background-color: var(--black);
+	opacity: 0.04;
+}
+
+.ball.Connected {
+	background-color: var(--green);
+	opacity: 1.0;
+}
+.grid.path {
+	grid-template-columns: 160px auto 160px;
+	grid-column-gap: 0px;
+}
+
+.spot {
+    margin-top: 14px;
+    height: 22px;
+    width: 100px;
+    padding-left: 10px;
+    background-color: var(--black);
+    font-size: 12px;
+    border-radius: 11px;
+    color: var(--white);
+	line-height: 23px;
+	position: absolute;
+    z-index: 5;
+}
+
+.connector {
+    width: 100%;
+    height: 1px;
+    margin-top: 24px;
+	background-color: #28292B;
+	position: absolute;
+	z-index: 1;
+}
+
+.latency {
+    font-size: 12px;
+    position: absolute;
+    padding-right: 10px;
+    left: 0px;
+    top: 12px;
+    color: #FFF;
+    line-height: 26px;
+    height: 26px;
+    text-align: right;
+    width: 160px;
+    background-color: #28292B;
+    border-radius: 12px;
+    z-index: 2;
+}
+
+.relative {
+	position: relative;
+}

package/assets/styles/tooltip.css

@@ -0,0 +1,134 @@
+:root {
+    --balloon-border-radius: 2px;
+    --balloon-color: rgba(16, 16, 16, 0.96);
+    --balloon-text-color: #fff;
+    --balloon-font-size: 16px;
+    --balloon-move: 4px; }
+  
+  button[aria-label][data-balloon-pos] {
+    overflow: visible; }
+  
+  [aria-label][data-balloon-pos] {
+    position: relative;
+    cursor: pointer; }
+    [aria-label][data-balloon-pos]:after {
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.18s ease-out 0.18s;
+      text-indent: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+      font-weight: normal;
+      font-style: normal;
+      text-shadow: none;
+      font-size: var(--balloon-font-size);
+      background: var(--balloon-color);
+      border-radius: 2px;
+      color: var(--balloon-text-color);
+      border-radius: var(--balloon-border-radius);
+      content: attr(aria-label);
+      padding: .5em 1em;
+      position: absolute;
+      white-space: nowrap;
+      z-index: 12; }
+    [aria-label][data-balloon-pos]:before {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-top-color: var(--balloon-color);
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.18s ease-out 0.18s;
+      content: "";
+      position: absolute;
+      z-index: 12; }
+    [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
+      opacity: 1;
+      pointer-events: none; }
+    [aria-label][data-balloon-pos].font-awesome:after {
+      font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
+    [aria-label][data-balloon-pos][data-balloon-break]:after {
+      white-space: pre; }
+    [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
+      white-space: pre-line;
+      word-break: break-word; }
+    [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
+      transition: none; }
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
+      transform: translate(-50%, 0); }
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
+      transform: translate(-50%, 0); }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
+      left: 0; }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
+      left: 5px; }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
+      right: 0; }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
+      right: 5px; }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
+      transform: translate(0, 0); }
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
+      transform: translate(0, 0); }
+    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
+      bottom: 100%;
+      transform-origin: top;
+      transform: translate(0, var(--balloon-move)); }
+    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
+      margin-bottom: 10px; }
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
+      left: 50%;
+      transform: translate(-50%, var(--balloon-move)); }
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
+      top: 100%;
+      transform: translate(0, calc(var(--balloon-move) * -1)); }
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
+      margin-top: 10px; }
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-bottom-color: var(--balloon-color); }
+    [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
+      left: 50%;
+      transform: translate(-50%, calc(var(--balloon-move) * -1)); }
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
+      transform: translate(0, -50%); }
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
+      transform: translate(0, -50%); }
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
+      right: 100%;
+      top: 50%;
+      transform: translate(var(--balloon-move), -50%); }
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
+      margin-right: 10px; }
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-left-color: var(--balloon-color); }
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
+      left: 100%;
+      top: 50%;
+      transform: translate(calc(var(--balloon-move) * -1), -50%); }
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
+      margin-left: 10px; }
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-right-color: var(--balloon-color); }
+    [aria-label][data-balloon-pos][data-balloon-length]:after {
+      white-space: normal; }
+    [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
+      width: 80px; }
+    [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
+      width: 150px; }
+    [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
+      width: 260px; }
+    [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
+      width: 380px; }
+      @media screen and (max-width: 768px) {
+        [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
+          width: 90vw; } }
+    [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
+      width: 100%; }