first commit

myteamwallet_frontend_modern/src/app/features/public-team/public-player.scss

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+  min-height: 100%;
+  // background: color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface));
+}
+.public-header {
+  height: 64px;
+  padding: 0 max(20px, calc((100vw - 900px) / 2));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--mat-sys-surface);
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--mat-sys-primary);
+  text-decoration: none;
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 28px 24px 64px;
+}
+.page-title {
+  margin: 28px 0;
+}
+.page-title h1 {
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  line-height: clamp(2.2rem, 5vw, 3.5rem);
+  margin: 0 0 8px;
+}
+.page-title p {
+  margin-top: 0;
+}
+.eyebrow {
+  color: var(--mat-sys-primary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+.transactions {
+  display: grid;
+  gap: 10px;
+}
+.transactions mat-card {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 14px;
+  align-items: center;
+  padding: 16px 18px;
+  border-radius: 17px;
+}
+.transactions .icon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  color: var(--mat-sys-primary);
+  background: var(--mat-sys-primary-container);
+}
+.transactions div:nth-child(2) {
+  display: grid;
+  gap: 2px;
+}
+.transactions span,
+.transactions small {
+  color: var(--mat-sys-on-surface-variant);
+}
+.amount {
+  font-variant-numeric: tabular-nums;
+}
+.state {
+  min-height: 300px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 12px;
+  color: var(--mat-sys-on-surface-variant);
+}
+@media (max-width: 600px) {
+  main {
+    padding: 22px 16px 48px;
+  }
+}