web: start: move css to dedicated file

Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>

web/components/side-panel/side-panel.css

@@ -0,0 +1,83 @@
+:host {
+  --width:        480px;  /* overridden via this.style.setProperty in JS */
+  --offset:       0px;
+  --dur:          220ms;
+  --actual-width: min(var(--width), 100vw);
+
+  position: fixed;
+  top: 0;
+  right: calc(-1 * var(--actual-width));
+  width: var(--actual-width);
+  height: 100vh;
+  background: #1e1e2e;
+  border-left: 1px solid #313244;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  z-index: calc(1000 + var(--stack, 0));
+  transition: right var(--dur) cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #cdd6f4;
+}
+
+:host([data-open]) {
+  right: var(--offset);
+}
+
+@media (max-width: 600px) {
+  :host {
+    --actual-width: 100vw;
+  }
+  :host([data-open]) {
+    right: 0;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #313244;
+  flex-shrink: 0;
+}
+
+.title {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 600;
+  color: #cdd6f4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 5px;
+  color: #6c7086;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  flex-shrink: 0;
+}
+
+.close:hover {
+  background: #313244;
+  border-color: #45475a;
+  color: #f38ba8;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.body::-webkit-scrollbar       { width: 6px; }
+.body::-webkit-scrollbar-track { background: transparent; }
+.body::-webkit-scrollbar-thumb { background: #45475a; border-radius: 3px; }