wip: rundown list refinement

Author: Julusian

packages/webui/src/client/styles/fromOrigo.scss

@@ -223,3 +223,329 @@ table {
 .xdark {
 	background: #000000;
 }
+
+.origo-pulse {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	width: 32px;
+	height: 32px;
+	top: 10px;
+}
+
+.origo-pulse .pulse-marker {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	width: 8px;
+	height: 8px;
+	background: red;
+	border-radius: 50%;
+}
+
+.origo-pulse .pulse-rays {
+	margin: 0 auto;
+	position: absolute;
+	right: -12px;
+	top: -12px;
+	z-index: 4;
+	background-color: transparent;
+	opacity: 0.1;
+	width: 32px;
+	height: 32px;
+	border: 2px solid red;
+	border-radius: 50%;
+	animation: origo-pulse 3s linear infinite;
+	border-image: initial;
+}
+
+.origo-pulse .pulse-rays.delay {
+	animation-delay: 1.5s;
+}
+
+.origo-pulse.small {
+	width: 20px;
+	height: 20px;
+	top: 5px;
+}
+
+.origo-pulse.small .pulse-marker {
+	top: 7px;
+	left: 7px;
+	width: 6px;
+	height: 6px;
+}
+
+.origo-pulse.small .pulse-rays {
+	right: -7px;
+	top: -7px;
+	width: 20px;
+	height: 20px;
+}
+
+@keyframes origo-pulse {
+	0% {
+		transform: scale(0);
+		opacity: 0;
+	}
+	8% {
+		transform: scale(0);
+		opacity: 0;
+	}
+	15% {
+		transform: scale(0.1);
+		opacity: 1;
+	}
+	30% {
+		transform: scale(0.5);
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1);
+	}
+}
+
+.origo-spinner,
+.origo-spinner.sp-medium {
+	display: inline-flex;
+	flex-flow: row nowrap;
+	align-items: baseline;
+	/*
+	display: inline-block;
+	position: relative;
+	vertical-align: text-bottom;
+	*/
+	width: 24px;
+	height: 24px;
+	animation-name: sp-medium-spinner-dash;
+}
+.origo-spinner .origo-spinner-svg,
+.origo-spinner.sp-medium .origo-spinner-svg {
+	margin-top: -12px;
+	width: 24px;
+	height: 24px;
+}
+.origo-spinner .origo-spin-circle,
+.origo-spinner.sp-medium .origo-spin-circle {
+	cx: 12px;
+	cy: 12px;
+	r: 10px;
+	stroke-dasharray: 62.84px;
+	stroke-dashoffset: 20.94667px;
+}
+
+@keyframes sp-medium-spinner-dash {
+	0% {
+		stroke-dasharray: 62.84px, 62.84px;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 62.84px, 62.84px;
+		stroke-dashoffset: 62.84px;
+	}
+	100% {
+		stroke-dasharray: 62.84px, 62.84px;
+		stroke-dashoffset: 0;
+	}
+}
+
+.origo-spinner.sp-small {
+	width: 20px;
+	height: 20px;
+	animation-name: sp-small-spinner-dash;
+}
+.origo-spinner.sp-small .origo-spinner-svg {
+	margin-top: -10px;
+	width: 20px;
+	height: 20px;
+}
+.origo-spinner.sp-small .origo-spin-circle {
+	cx: 10px;
+	cy: 10px;
+	r: 8px;
+	stroke-dasharray: 50.272px;
+	stroke-dashoffset: 16.75733px;
+}
+
+@keyframes sp-small-spinner-dash {
+	0% {
+		stroke-dasharray: 50.272px, 50.272px;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 50.272px, 50.272px;
+		stroke-dashoffset: 50.272px;
+	}
+	100% {
+		stroke-dasharray: 50.272px, 50.272px;
+		stroke-dashoffset: 0;
+	}
+}
+
+.origo-spinner.sp-large {
+	width: 34px;
+	height: 34px;
+	animation-name: sp-large-spinner-dash;
+}
+.origo-spinner.sp-large .origo-spinner-svg {
+	margin-top: -17px;
+	width: 34px;
+	height: 34px;
+}
+.origo-spinner.sp-large .origo-spin-circle {
+	cx: 17px;
+	cy: 17px;
+	r: 15px;
+	stroke-dasharray: 94.26px;
+	stroke-dashoffset: 31.42px;
+}
+
+@keyframes sp-large-spinner-dash {
+	0% {
+		stroke-dasharray: 94.26px, 94.26px;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 94.26px, 94.26px;
+		stroke-dashoffset: 94.26px;
+	}
+	100% {
+		stroke-dasharray: 94.26px, 94.26px;
+		stroke-dashoffset: 0;
+	}
+}
+
+.origo-spinner-svg {
+	position: relative;
+	top: 20%;
+	animation-name: spinner-rotate;
+	animation-duration: 1.2s;
+	animation-iteration-count: infinite;
+	animation-direction: normal;
+	animation-timing-function: ease-out;
+	transform-origin: center center;
+}
+
+.origo-spin-circle {
+	animation-duration: 1.2s;
+	animation-iteration-count: infinite;
+	animation-direction: normal;
+	animation-timing-function: ease-out;
+	fill: transparent;
+	stroke-width: 2px;
+	stroke-linecap: round;
+	stroke: #3593ff;
+	animation-name: sp-blue-spinner-stroke;
+}
+
+@keyframes sp-blue-spinner-stroke {
+	0% {
+		stroke-width: 2px;
+		stroke: #3593ff;
+	}
+	50% {
+		stroke-width: 0px;
+		stroke: #1769ff;
+	}
+	100% {
+		stroke-width: 2px;
+		stroke: #3593ff;
+	}
+}
+
+.origo-spinner.sp-white .origo-spin-circle {
+	stroke: #ffffff;
+	animation-name: sp-white-spinner-stroke;
+}
+
+@keyframes sp-white-spinner-stroke {
+	0% {
+		stroke-width: 2px;
+		stroke: #ffffff;
+	}
+	50% {
+		stroke-width: 0px;
+		stroke: #c3c3c3;
+	}
+	100% {
+		stroke-width: 2px;
+		stroke: #ffffff;
+	}
+}
+
+.origo-spinner.sp-mint .origo-spin-circle {
+	stroke: #00a8ad;
+	animation-name: sp-mint-spinner-stroke;
+}
+
+@keyframes sp-mint-spinner-stroke {
+	0% {
+		stroke-width: 2px;
+		stroke: #00a8ad;
+	}
+	50% {
+		stroke-width: 0px;
+		stroke: #008284;
+	}
+	100% {
+		stroke-width: 2px;
+		stroke: #00a8ad;
+	}
+}
+
+.origo-spinner.sp-pink .origo-spin-circle {
+	stroke: #fa419d;
+	animation-name: sp-pink-spinner-stroke;
+}
+
+@keyframes sp-pink-spinner-stroke {
+	0% {
+		stroke-width: 2px;
+		stroke: #fa419d;
+	}
+	50% {
+		stroke-width: 0px;
+		stroke: #e70d79;
+	}
+	100% {
+		stroke-width: 2px;
+		stroke: #fa419d;
+	}
+}
+
+.origo-spinner.sp-purple .origo-spin-circle {
+	stroke: #9b7fc8;
+	animation-name: sp-purple-spinner-stroke;
+}
+
+@keyframes sp-purple-spinner-stroke {
+	0% {
+		stroke-width: 2px;
+		stroke: #9b7fc8;
+	}
+	50% {
+		stroke-width: 0px;
+		stroke: #875ba6;
+	}
+	100% {
+		stroke-width: 2px;
+		stroke: #9b7fc8;
+	}
+}
+
+@keyframes spinner-rotate {
+	0% {
+		-ms-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+	50% {
+		-ms-transform: rotate(585deg);
+		transform: rotate(585deg);
+	}
+	100% {
+		-ms-transform: rotate(765deg);
+		transform: rotate(765deg);
+	}
+}

packages/webui/src/client/styles/main.scss

@@ -178,15 +178,6 @@ body {
 // 	}
 // }
 
-// .origo-pulse {
-// 	vertical-align: top;
-
-// 	&.small.left,
-// 	&.small.right {
-// 		top: 1px;
-// 	}
-// }
-
 // .btn > svg.svg-inline--fa + span {
 // 	margin-left: 0.5em;
 // }