REFACTOR grafana and prometheus with composition

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -35,11 +35,9 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
 */
 
-html,
-:host {
+html {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -49,15 +47,13 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   -webkit-font-feature-settings: normal;
           font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
 }
 
 /*
@@ -129,10 +125,8 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -141,13 +135,8 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  -webkit-font-feature-settings: normal;
-          font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
   font-size: 1em;
-  /* 4 */
+  /* 2 */
 }
 
 /*
@@ -920,6 +909,10 @@ video {
   top: -2px;
 }
 
+.top-9{
+  top: 2.25rem;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -1495,6 +1488,10 @@ video {
   height: 1rem;
 }
 
+.h-4\/5{
+  height: 80%;
+}
+
 .h-5{
   height: 1.25rem;
 }
@@ -1745,10 +1742,6 @@ video {
   max-height: 100%;
 }
 
-.min-h-11{
-  min-height: 2.75rem;
-}
-
 .min-h-\[100px\]{
   min-height: 100px;
 }
@@ -2245,10 +2238,6 @@ video {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 
-.grid-rows-10{
-  grid-template-rows: repeat(10, minmax(0, 1fr));
-}
-
 .grid-rows-12{
   grid-template-rows: repeat(12 , minmax(0,1fr));
 }
@@ -2552,10 +2541,6 @@ video {
   white-space: pre-wrap;
 }
 
-.text-nowrap{
-  text-wrap: nowrap;
-}
-
 .break-words{
   overflow-wrap: break-word;
 }
@@ -2568,6 +2553,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-3xl{
+  border-radius: 1.5rem;
+}
+
 .rounded-\[35px\]{
   border-radius: 35px;
 }
@@ -2596,6 +2585,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-\[30px\]{
+  border-radius: 30px;
+}
+
 .rounded-b-lg{
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -2711,14 +2704,14 @@ video {
   border-inline-start-width: 4px;
 }
 
-.border-t-2{
-  border-top-width: 2px;
-}
-
 .border-t{
   border-top-width: 1px;
 }
 
+.border-t-2{
+  border-top-width: 2px;
+}
+
 .border-dashed{
   border-style: dashed;
 }
@@ -3014,6 +3007,11 @@ video {
   background-color: rgb(32 33 35 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#202225\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(32 34 37 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#212629\]{
   --tw-bg-opacity: 1;
   background-color: rgb(33 38 41 / var(--tw-bg-opacity));
@@ -3044,6 +3042,11 @@ video {
   background-color: rgb(36 38 40 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#243535\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 53 53 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#243d36\]{
   --tw-bg-opacity: 1;
   background-color: rgb(36 61 54 / var(--tw-bg-opacity));
@@ -3059,11 +3062,6 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#263238\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 50 56 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#264744\]{
   --tw-bg-opacity: 1;
   background-color: rgb(38 71 68 / var(--tw-bg-opacity));
@@ -3079,6 +3077,11 @@ video {
   background-color: rgb(44 49 54 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#2d3035\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 48 53 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#2d3438\]{
   --tw-bg-opacity: 1;
   background-color: rgb(45 52 56 / var(--tw-bg-opacity));
@@ -3164,6 +3167,11 @@ video {
   background-color: rgb(62 67 71 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#495056\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(73 80 86 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#4D56CB\]{
   --tw-bg-opacity: 1;
   background-color: rgb(77 86 203 / var(--tw-bg-opacity));
@@ -3204,11 +3212,6 @@ video {
   background-color: rgb(168 70 184 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#bcc0c2\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(188 192 194 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#caced1\]{
   --tw-bg-opacity: 1;
   background-color: rgb(202 206 209 / var(--tw-bg-opacity));
@@ -3383,39 +3386,9 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#243535\]{
+.bg-\[\#212122\]{
   --tw-bg-opacity: 1;
-  background-color: rgb(36 53 53 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#2f3337\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(47 51 55 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#202225\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(32 34 37 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#36393e\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 57 62 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#2d3035\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(45 48 53 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#353a3e\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(53 58 62 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#495056\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(73 80 86 / var(--tw-bg-opacity));
+  background-color: rgb(33 33 34 / var(--tw-bg-opacity));
 }
 
 .bg-gradient-to-b{
@@ -3663,7 +3636,7 @@ video {
 }
 
 .font-sans{
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .text-2xl{
@@ -3768,11 +3741,6 @@ video {
   color: rgb(20 23 26 / var(--tw-text-opacity));
 }
 
-.text-\[\#333333\]{
-  --tw-text-opacity: 1;
-  color: rgb(51 51 51 / var(--tw-text-opacity));
-}
-
 .text-\[\#4B878D\]{
   --tw-text-opacity: 1;
   color: rgb(75 135 141 / var(--tw-text-opacity));
@@ -3783,9 +3751,14 @@ video {
   color: rgb(222 227 227 / var(--tw-text-opacity));
 }
 
-.text-\[\#ffffff\]{
+.text-\[\#e6e4e4\]{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(230 228 228 / var(--tw-text-opacity));
+}
+
+.text-amber-200{
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity));
 }
 
 .text-amber-300{
@@ -3953,16 +3926,6 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
-.text-\[\#e6e4e4\]{
-  --tw-text-opacity: 1;
-  color: rgb(230 228 228 / var(--tw-text-opacity));
-}
-
-.text-amber-200{
-  --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity));
-}
-
 .placeholder-gray-400\/70::-webkit-input-placeholder{
   color: rgb(156 163 175 / 0.7);
 }
@@ -4220,6 +4183,12 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
+.blur{
+  --tw-blur: blur(8px);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale{
   --tw-grayscale: grayscale(100%);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4945,25 +4914,11 @@ html body {
           box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-@media (min-width: 640px){
-  .sm\:gap-x-5{
-    -webkit-column-gap: 1.25rem;
-       -moz-column-gap: 1.25rem;
-            column-gap: 1.25rem;
-  }
-}
-
-@media (min-width: 768px){
-  .md\:mb-0{
-    margin-bottom: 0px;
-  }
-}
-
-:is(:where([dir="rtl"]) .rtl\:left-0){
+:is([dir="rtl"] .rtl\:left-0){
   left: 0px;
 }
 
-:is(:where([dir="rtl"]) .rtl\:right-auto){
+:is([dir="rtl"] .rtl\:right-auto){
   right: auto;
 }
 
@@ -4989,6 +4944,20 @@ html body {
   }
 }
 
+@media (min-width: 640px){
+  .sm\:gap-x-5{
+    -webkit-column-gap: 1.25rem;
+       -moz-column-gap: 1.25rem;
+            column-gap: 1.25rem;
+  }
+}
+
+@media (min-width: 768px){
+  .md\:mb-0{
+    margin-bottom: 0px;
+  }
+}
+
 .\[\&\:checked_\+_span_svg\[data-checked-icon\]\]\:block:checked + span svg[data-checked-icon]{
   display: block;
 }