fix styling

2026-04-27 22:02:15 +02:00
parent 8bfbe7b1cc
commit 30115da841
37 changed files with 740 additions and 578 deletions
--- a/src/app/widget-modules/components/sidebar/page-frame.component.less
+++ b/src/app/widget-modules/components/sidebar/page-frame.component.less
@@ -0,0 +1,152 @@
+:host {
+  --sidebar-width: 300px;
+  --sidebar-toggle-size: 48px;
+  --sidebar-toggle-offset: 12px;
+  --sidebar-mobile-width: min(92vw, 360px);
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  align-items: start;
+  box-sizing: border-box;
+  transition: grid-template-columns 200ms ease;
+}
+
+:host.collapsed {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.sidebar-toggle {
+  --icon-button-color: var(--primary-hover);
+  --icon-button-hover-color: var(--primary);
+  position: fixed;
+  top: calc(50px + var(--sidebar-toggle-offset));
+  left: var(--sidebar-toggle-offset);
+  z-index: 11;
+  color: var(--icon-button-color);
+  box-shadow: none;
+  border-radius: 999px;
+  transition: all 150ms ease-in-out;
+}
+
+:host.collapsed .sidebar-toggle {
+  --icon-button-color: var(--surface);
+  --icon-button-hover-color: var(--surface-subtle);
+}
+
+.sidebar-toggle fa-icon {
+  color: inherit;
+}
+
+.sidebar-toggle:hover {
+  color: var(--icon-button-hover-color);
+}
+
+.sidebar-backdrop {
+  display: none;
+}
+
+aside {
+  width: var(--sidebar-width);
+  height: calc(100vh - 50px);
+
+  position: fixed;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+
+  background: var(--surface);
+  box-shadow: var(--shadow-card-2);
+  overflow: hidden;
+  transform: translateX(0);
+  transition: transform 200ms ease;
+}
+
+aside.collapsed {
+  transform: translateX(calc(-1 * var(--sidebar-width)));
+}
+
+.sidebar-toggle-placeholder {
+  height: calc(var(--sidebar-toggle-size) + var(--sidebar-toggle-offset));
+  flex: 0 0 auto;
+}
+
+.sidebar-body {
+  height: calc(100% - var(--sidebar-toggle-size) - var(--sidebar-toggle-offset));
+}
+
+.content {
+  grid-column: 2;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+}
+
+@media screen and (max-width: 1100px) {
+  :host,
+  :host.collapsed {
+    display: block;
+    grid-template-columns: none;
+  }
+
+  .sidebar-toggle {
+    top: calc(50px + 8px);
+    left: 5px;
+    right: auto;
+    z-index: 13;
+  }
+
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 50px 0 0 0;
+    z-index: 11;
+    border: 0;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.32);
+  }
+
+  aside {
+    width: var(--sidebar-mobile-width);
+    max-width: 100%;
+    z-index: 12;
+    backdrop-filter: blur(10px);
+  }
+
+  aside.collapsed {
+    transform: translateX(calc(-1 * var(--sidebar-mobile-width)));
+  }
+
+  .content {
+    grid-column: auto;
+    width: 100%;
+  }
+}
+
+.header {
+  @media screen and (max-width: 860px) {
+    height: 50px;
+  }
+}
+
+.title {
+  color: var(--surface);
+  font-size: 30px;
+  text-transform: uppercase;
+  text-align: right;
+  opacity: 0.5;
+  text-shadow: var(--shadow-card-3);
+
+  position: fixed;
+  right: 10px;
+  top: 61px;
+
+  transition: all 150ms ease-in-out;
+
+  @media screen and (min-width: 888px) {
+    transform-origin: top right;
+    transform: rotate(90deg) translateX(100%) translateX(10px);
+    text-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
+  }
+}