Update bootstrap and format styles ts files

dli7319 · dli7319 · commit 3cd496e537b8 · 2025-02-02T08:18:54.000Z
diff --git a/dist/index.html b/dist/index.html
@@ -4,8 +4,8 @@
 <head>
   <meta charset="utf-8" />
   <title>Color Picker</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/themes/light.css" />
   <script type="module"
diff --git a/src/styles/Bootstrap.ts b/src/styles/Bootstrap.ts
@@ -1,8 +1,8 @@
 import { html } from "lit";
 
-export const bootstrap = html` <link
-  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
+export const bootstrap = html`<link
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
   rel="stylesheet"
-  integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
+  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
   crossorigin="anonymous"
-/>`;
+/> `;
diff --git a/src/styles/ColorConverter.ts b/src/styles/ColorConverter.ts
@@ -3,4 +3,8 @@ export const styles = css`
   .inputs-container {
     gap: 0.25rem;
   }
+
+  table > * {
+    --bs-table-bg: transparent;
+  }
 `;
diff --git a/src/styles/ColorInterpolation.ts b/src/styles/ColorInterpolation.ts
@@ -1,29 +1,32 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css`
-.color-selection {
+  .color-selection {
     width: 2rem;
     height: 2rem;
     background-color: red;
     border-radius: 10%;
     margin: 0 auto;
-}
+  }
 
-.color-selection.rightColor {
+  .color-selection.rightColor {
     background-color: white;
-}
+  }
 
-.color-selection.active {
+  .color-selection.active {
     border: black dashed 0.2rem;
-}
+  }
 
-.gradient {
+  .gradient {
     width: 100%;
     height: 2rem;
     background-image: linear-gradient(to right, red, white);
-    ;
-}
+  }
 
-.table th {
+  .table th {
     width: 1rem;
-}
-`;
+  }
+
+  table > * {
+    --bs-table-bg: transparent;
+  }
+`;
diff --git a/src/styles/ColorPicker.ts b/src/styles/ColorPicker.ts
@@ -1,23 +1,24 @@
-import {css} from 'lit';
+import { css } from "lit";
 export const styles = css`
-:host {
+  :host {
     display: block;
     width: 100%;
     height: 100%;
-}
+  }
 
-.main-container {
+  .main-container {
     --gap: 1rem;
     gap: var(--gap);
     padding: var(--gap);
-}
+  }
 
-::slotted(*) {
+  ::slotted(*) {
     border-radius: 1rem;
     background: #eee;
     padding: 1rem;
     text-align: center;
     flex: 1 1 30%;
     display: flex;
     flex-direction: column;
-}`;
+  }
+`;
diff --git a/src/styles/ColorSelection.ts b/src/styles/ColorSelection.ts
@@ -1,34 +1,34 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css`
-.color-grad-container {
+  .color-grad-container {
     width: 100%;
     position: relative;
     min-height: 10rem;
     min-width: 10rem;
     flex-grow: 1;
-}
+  }
 
-.color-grad {
+  .color-grad {
     position: absolute;
     width: 100%;
     height: 100%;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
-}
+  }
 
-.color-grad-1 {
+  .color-grad-1 {
     z-index: 0;
     background: linear-gradient(to right, #ffffff 0%, #f00 100%);
-}
+  }
 
-.color-grad-2 {
+  .color-grad-2 {
     z-index: 1;
     background: linear-gradient(to bottom, #ffffff00 0%, #000 100%);
-}
+  }
 
-.color-grad-circle {
+  .color-grad-circle {
     z-index: 2;
     position: absolute;
     width: 1rem;
@@ -38,17 +38,26 @@ export const styles = css`
     border-color: black;
     border-width: 0.1rem;
     pointer-events: none;
-}
+  }
 
-.color-bar {
+  .color-bar {
     width: 100%;
     height: 1.5rem;
     margin-top: 0.5rem;
     border-radius: 0.25rem;
-    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%);
-}
+    background: linear-gradient(
+      to right,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 66%,
+      #f0f 83%,
+      #f00 100%
+    );
+  }
 
-.color-bar-pointer {
+  .color-bar-pointer {
     height: 0;
     width: 0;
     border-left: 0.4em solid transparent;
@@ -57,9 +66,9 @@ export const styles = css`
     position: relative;
     transform: translateX(-50%);
     top: 60%;
-}
+  }
 
-.color-bar-pointer-2 {
+  .color-bar-pointer-2 {
     height: 0;
     width: 0;
     border-left: 0.4em solid black;
@@ -68,9 +77,9 @@ export const styles = css`
     position: absolute;
     transform: translateX(-50%);
     top: 0.5em;
-}
+  }
 
-.color-bar-pointer-3 {
+  .color-bar-pointer-3 {
     height: 0;
     width: 0;
     border-left: 0.3em solid transparent;
@@ -80,9 +89,9 @@ export const styles = css`
     position: absolute;
     transform: translateX(-50%);
     top: 0.125em;
-}
+  }
 
-.color-bar-pointer-4 {
+  .color-bar-pointer-4 {
     height: 0;
     width: 0;
     border-left: 0.3em solid white;
@@ -91,4 +100,5 @@ export const styles = css`
     position: absolute;
     transform: translateX(-50%);
     top: 0.5em;
-}`;
+  }
+`;

Original file line number	Diff line number	Diff line change
@@ -3,4 +3,8 @@ export const styles = css`
`3`	`3`	`.inputs-container {`
`4`	`4`	`gap: 0.25rem;`
`5`	`5`	`}`
	`6`	`+`
	`7`	`+ table > * {`
	`8`	`+ --bs-table-bg: transparent;`
	`9`	`+ }`
`6`	`10`	`;