Map info page

apps/frontend/src/app/components/card/card-body.component.ts

@@ -0,0 +1,11 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'm-card-body',
+  standalone: true,
+  styles: [':host {display: block;}'],
+  template: '<ng-content></ng-content>'
+})
+export class CardBodyComponent {
+  @HostBinding('class') class = 'm-card';
+}

apps/frontend/src/app/components/card/card-header.component.ts

@@ -9,7 +9,7 @@ import { NgClass } from '@angular/common';
     <div class="flex items-end gap-2 mb-2" [ngClass]="{ 'items-end': !!title }">
       @if (title) {
         <p
-          class="flex-grow font-display font-bold opacity-80 leading-none ml-2"
+          class="flex-grow m-card-title"
           [style]="'font-size: ' + titleSize + 'rem;'"
         >
           {{ title }}

apps/frontend/src/app/components/card/card.component.ts

@@ -1,18 +1,19 @@
 import { Component, Input } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { CardHeaderComponent } from './card-header.component';
+import { CardBodyComponent } from './card-body.component';
 
 @Component({
   selector: 'm-card',
   standalone: true,
-  imports: [CardHeaderComponent, NgClass],
+  imports: [CardHeaderComponent, NgClass, CardBodyComponent],
   template: `
     <m-card-header [title]="title" [titleSize]="titleSize">
       <ng-content select="[header]"></ng-content>
     </m-card-header>
-    <div class="m-card" [ngClass]="cardClass">
+    <m-card-body [ngClass]="cardClass">
       <ng-content></ng-content>
-    </div>
+    </m-card-body>
   `
 })
 export class CardComponent {

apps/frontend/src/app/components/index.ts

@@ -3,6 +3,7 @@ export * from './activity/activity.component';
 export * from './avatar/avatar.component';
 export * from './card/card-header.component';
 export * from './card/card.component';
+export * from './card/card-body.component';
 export * from './confirm-dialog/confirm-dialog.component';
 export * from './delete-user-dialog/delete-user-dialog.component';
 export * from './file-upload/abstract-file-upload.component';

apps/frontend/src/app/theme/styles.css

@@ -63,10 +63,37 @@
   .m-card {
     border-radius: 0.25rem;
     padding: 1rem;
-    background-color: rgb(20, 20, 20, 0.75);
-    border: 1px solid #252525;
-    box-shadow: 4px 4px 24px rgb(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
+    border: 1px solid rgb(255 255 255 / 0.05);
+    box-shadow: 1px 2px 16px rgb(0 0 0 / 0.4);
+    backdrop-filter: none;
+
+    background-color: rgb(var(--gray-600) / 0.8);
+  }
+
+  .m-card--fancy {
+    background-color: rgb(255 255 255 / 0.05);
+    backdrop-filter: blur(48px) brightness(0.9);
+  }
+
+  .m-card-title {
+    @apply font-display;
+    font-weight: 700;
+    opacity: 0.875;
+    line-height: 1;
+    filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.3))
+      drop-shadow(3px 6px 16px rgb(0 0 0 / 0.4));
+  }
+
+  .m-card-inset {
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    background-color: rgba(0 0 0 / 0.15);
+    box-shadow: inset 0 0 0.75rem rgb(0 0 0 / 0.1);
+    border: 1px solid rgba(255 255 255 / 0.1);
+
+    &:is(fieldset) {
+      padding: 0.25rem 1rem 0.75rem 1rem;
+    }
   }
 
   .m-btn {