/*
* myspace.css
*
* MySpace-inspired theme system for the FratSnap web app. Mirrors the iOS
* `ProfileTheme` definitions in Theme.swift so a profile looks the same on
* iOS and the web. Theme ids must match the backend's ALLOWED_THEMES set in
* a_core_app_files/routes/auth.py.
*
* Usage:
*
* Pages can also default to the site-wide teal by omitting both attrs.
*
* The site root inherits CSS custom properties from `:root`; theme overrides
* cascade via attribute selectors. All colors live in variables so you can
* style any UI primitive — panels, dividers, links — by reading the var.
*/
/* ---------- Default (Classic Teal) ---------- */
:root {
--fs-bg: #0E1416;
--fs-panel-bg: #1A2326;
--fs-accent: #008B8B;
--fs-accent-secondary: #5DD3D3;
--fs-text-primary: #EAF6F6;
--fs-text-secondary: #9FB6B7;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #2A3D40;
--fs-panel-border: #1F2D30;
--fs-panel-shadow: rgba(0, 0, 0, 0.4);
--fs-font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
--fs-font-heading: var(--fs-font-body);
}
/* ---------- Frutiger Aero ---------- */
:root[data-fs-theme="frutiger_aero"] {
--fs-bg: linear-gradient(180deg, #9FE1FF 0%, #DFF7FF 60%, #FFFFFF 100%);
--fs-panel-bg: #FFFFFF;
--fs-accent: #0099CC;
--fs-accent-secondary: #00C8FF;
--fs-text-primary: #0A2540;
--fs-text-secondary: #5A7D9C;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #B6E1F0;
--fs-panel-border: #B6E1F0;
--fs-panel-shadow: rgba(0, 153, 204, 0.18);
}
/* ---------- Hot Pink ---------- */
:root[data-fs-theme="hot_pink"] {
--fs-bg: #FF2D95;
--fs-panel-bg: #FFE7F4;
--fs-accent: #C2185B;
--fs-accent-secondary: #C2FF1A;
--fs-text-primary: #2A0017;
--fs-text-secondary: #7A1244;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #C2FF1A;
--fs-panel-border: #FFFFFF;
--fs-panel-shadow: rgba(142, 0, 68, 0.5);
}
/* ---------- Trapper Keeper ---------- */
:root[data-fs-theme="trapper_keeper"] {
--fs-bg: linear-gradient(135deg, #3B005A 0%, #7B2CBF 50%, #C77DFF 100%);
--fs-panel-bg: #EFE5FF;
--fs-accent: #5A189A;
--fs-accent-secondary: #FFD60A;
--fs-text-primary: #1B0033;
--fs-text-secondary: #523078;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #C77DFF;
--fs-panel-border: #FFD60A;
--fs-panel-shadow: rgba(36, 0, 70, 0.55);
}
/* ---------- Notebook Paper ---------- */
:root[data-fs-theme="notebook_paper"] {
--fs-bg: #FBF7E8;
--fs-panel-bg: #FFFEF7;
--fs-accent: #1F3A8A;
--fs-accent-secondary: #DC2626;
--fs-text-primary: #1F2937;
--fs-text-secondary: #4B5563;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #BFD7FF;
--fs-panel-border: #DCD3B0;
--fs-panel-shadow: rgba(0, 0, 0, 0.08);
}
/* ---------- Late Night ---------- */
:root[data-fs-theme="late_night"] {
--fs-bg: #000000;
--fs-panel-bg: #0A0A0A;
--fs-accent: #00FF88;
--fs-accent-secondary: #00FFFF;
--fs-text-primary: #C8FFD8;
--fs-text-secondary: #5BB079;
--fs-text-on-accent: #000000;
--fs-divider: #0F4F2A;
--fs-panel-border: #00FF88;
--fs-panel-shadow: rgba(0, 255, 136, 0.25);
}
/* ---------- Beach Towel ---------- */
:root[data-fs-theme="beach_towel"] {
--fs-bg: linear-gradient(180deg, #FF6A3D 0%, #FFC23D 50%, #FF3DA5 100%);
--fs-panel-bg: #FFF8EC;
--fs-accent: #C2185B;
--fs-accent-secondary: #FF6A3D;
--fs-text-primary: #3A1300;
--fs-text-secondary: #8C4520;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #FFB870;
--fs-panel-border: #FF6A3D;
--fs-panel-shadow: rgba(140, 42, 0, 0.35);
}
/* ---------- Denim ---------- */
:root[data-fs-theme="denim"] {
--fs-bg: #1F4068;
--fs-panel-bg: #EAF1FB;
--fs-accent: #B8860B;
--fs-accent-secondary: #1F4068;
--fs-text-primary: #0E2236;
--fs-text-secondary: #446280;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #B8860B;
--fs-panel-border: #B8860B;
--fs-panel-shadow: rgba(0, 0, 0, 0.35);
}
/* ---------- Glitter Lime ---------- */
:root[data-fs-theme="glitter_lime"] {
--fs-bg: #000000;
--fs-panel-bg: #111111;
--fs-accent: #C2FF1A;
--fs-accent-secondary: #FF2D95;
--fs-text-primary: #F0FFE0;
--fs-text-secondary: #A8D070;
--fs-text-on-accent: #000000;
--fs-divider: #FF2D95;
--fs-panel-border: #C2FF1A;
--fs-panel-shadow: rgba(194, 255, 26, 0.3);
}
/* ---------- Old School AIM ---------- */
:root[data-fs-theme="old_school_aim"] {
--fs-bg: #FFEB99;
--fs-panel-bg: #FFFFFF;
--fs-accent: #0066CC;
--fs-accent-secondary: #FFCC00;
--fs-text-primary: #1A1A1A;
--fs-text-secondary: #5A5A5A;
--fs-text-on-accent: #FFFFFF;
--fs-divider: #FFCC00;
--fs-panel-border: #0066CC;
--fs-panel-shadow: rgba(0, 0, 0, 0.18);
}
/* ---------- Font presets ---------- */
:root[data-fs-font="verdana"] { --fs-font-body: Verdana, Geneva, sans-serif; }
:root[data-fs-font="trebuchet"] { --fs-font-body: "Trebuchet MS", sans-serif; }
:root[data-fs-font="tahoma"] { --fs-font-body: Tahoma, Geneva, sans-serif; }
:root[data-fs-font="courier"] { --fs-font-body: "Courier New", Courier, monospace; }
:root[data-fs-font="comic_sans"]{ --fs-font-body: "Comic Sans MS", "Comic Sans", cursive; }
:root[data-fs-font="georgia"] { --fs-font-body: Georgia, "Times New Roman", serif; }
/* ---------- Building blocks ---------- */
/* MySpace-style panel: hard border, drop shadow, colored header bar.
Rebuilds the iOS MySpacePanel in HTML. Use as:
*/
.ms-panel {
background: var(--fs-panel-bg);
border: 2px solid var(--fs-panel-border);
box-shadow: 4px 4px 0 var(--fs-panel-shadow);
color: var(--fs-text-primary);
margin: 16px 0;
font-family: var(--fs-font-body);
}
.ms-panel > h1,
.ms-panel > h2,
.ms-panel > h3 {
background: var(--fs-accent);
color: var(--fs-text-on-accent);
padding: 8px 12px;
margin: 0;
font-size: 14px;
font-weight: 700;
}
.ms-panel-body {
padding: 12px;
}
.ms-panel a {
color: var(--fs-accent);
}
/* Horizontal accent divider — every classic profile had a gradient bar between
sections. */
.ms-divider {
height: 2px;
background: var(--fs-accent-secondary);
border: 0;
margin: 12px 0;
}
/* Themed page background — used by `/u/` and any settings-driven page. */
.ms-themed-page {
background: var(--fs-bg);
color: var(--fs-text-primary);
font-family: var(--fs-font-body);
min-height: 100vh;
}
/* ─────────────────────────────────────────
Avatar Shapes (data-fs-shape on )
Simple shapes (circle / rounded_square / square):
Border comes from the base `border: 2px solid var(--fs-accent)` rule
on .ms-avatar, .ms-friend-avatar, .ms-friend-overflow.
Adjust border-radius only.
Complex shapes (diamond / hexagon / heart / badge):
clip-path cannot coexist with a CSS border (the border renders outside
the clip region). Instead we use the "wrapper border" technique:
– The *container* (.ms-friend-avatar, .ms-friend-overflow, or
#ms-avatar-wrap for the profile pic) gets:
padding: 3px;
background: var(--fs-accent);
clip-path: ;
The accent background shows through the 3px padding as a solid
accent-coloured border that follows the clipped shape exactly,
mirroring the iOS ProfileAvatarClipShape .stroke() approach.
– The *inner img* (or .ms-avatar-ph-inner span) gets its own
clip-path so its rectangular corners don't show through the border.
stubb-avatar-ph (initial-letter placeholder — used only for the
main profile-header avatar, not for friend tiles):
Same wrapper technique; the ::before stubb-logo is hidden for complex
shapes so a circular logo doesn't appear inside a polygon container.
───────────────────────────────────────── */
/* ── Simple shapes ── */
:root[data-fs-shape="rounded_square"] .ms-avatar,
:root[data-fs-shape="rounded_square"] .ms-friend-avatar,
:root[data-fs-shape="rounded_square"] .stubb-avatar-ph,
:root[data-fs-shape="rounded_square"] .ms-friend-overflow {
border-radius: 20%;
}
:root[data-fs-shape="rounded_square"] .ms-avatar,
:root[data-fs-shape="rounded_square"] .ms-friend-avatar,
:root[data-fs-shape="rounded_square"] .ms-friend-overflow {
overflow: hidden;
}
:root[data-fs-shape="square"] .ms-avatar,
:root[data-fs-shape="square"] .ms-friend-avatar,
:root[data-fs-shape="square"] .stubb-avatar-ph,
:root[data-fs-shape="square"] .ms-friend-overflow {
border-radius: 0;
}
/* ── Complex shapes ──
Outer container (.ms-friend-avatar, .ms-friend-overflow, #ms-avatar-wrap):
- clip-path clips everything to the shape; no accent border on friend tiles
- #ms-avatar-wrap (profile header only) uses padding: 3px + background: accent
Inner content (img or .stubb-avatar-ph child):
- fills 100%×100% of the container
- for .stubb-avatar-ph: solid panel background + border-radius:0
─────────────────────────────────────────── */
/* Shared reset for complex shape containers */
:root[data-fs-shape="diamond"] .ms-avatar,
:root[data-fs-shape="hexagon"] .ms-avatar,
:root[data-fs-shape="heart"] .ms-avatar,
:root[data-fs-shape="badge"] .ms-avatar {
border: none;
border-radius: 0;
}
:root[data-fs-shape="diamond"] .ms-friend-avatar,
:root[data-fs-shape="hexagon"] .ms-friend-avatar,
:root[data-fs-shape="heart"] .ms-friend-avatar,
:root[data-fs-shape="badge"] .ms-friend-avatar,
:root[data-fs-shape="diamond"] .ms-friend-overflow,
:root[data-fs-shape="hexagon"] .ms-friend-overflow,
:root[data-fs-shape="heart"] .ms-friend-overflow,
:root[data-fs-shape="badge"] .ms-friend-overflow {
border: none;
border-radius: 0;
box-sizing: border-box;
align-items: stretch;
justify-content: stretch;
}
/* Profile-header avatar wrapper */
:root[data-fs-shape="diamond"] #ms-avatar-wrap,
:root[data-fs-shape="hexagon"] #ms-avatar-wrap,
:root[data-fs-shape="heart"] #ms-avatar-wrap,
:root[data-fs-shape="badge"] #ms-avatar-wrap {
display: inline-flex;
padding: 3px;
background: var(--fs-accent);
line-height: 0;
}
/* Inner stubb-avatar-ph — same logic for header and friend tiles */
:root[data-fs-shape="diamond"] #ms-avatar-wrap .stubb-avatar-ph,
:root[data-fs-shape="hexagon"] #ms-avatar-wrap .stubb-avatar-ph,
:root[data-fs-shape="heart"] #ms-avatar-wrap .stubb-avatar-ph,
:root[data-fs-shape="badge"] #ms-avatar-wrap .stubb-avatar-ph,
:root[data-fs-shape="diamond"] .ms-friend-avatar .stubb-avatar-ph,
:root[data-fs-shape="hexagon"] .ms-friend-avatar .stubb-avatar-ph,
:root[data-fs-shape="heart"] .ms-friend-avatar .stubb-avatar-ph,
:root[data-fs-shape="badge"] .ms-friend-avatar .stubb-avatar-ph {
background: var(--fs-panel-bg);
border-radius: 0;
border: none;
width: 100%;
height: 100%;
}
/* ── Per-shape clip-paths ── */
/* Diamond */
:root[data-fs-shape="diamond"] #ms-avatar-wrap,
:root[data-fs-shape="diamond"] .ms-avatar,
:root[data-fs-shape="diamond"] .ms-friend-avatar,
:root[data-fs-shape="diamond"] .ms-friend-overflow {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Hexagon (pointy-top) */
:root[data-fs-shape="hexagon"] #ms-avatar-wrap,
:root[data-fs-shape="hexagon"] .ms-avatar,
:root[data-fs-shape="hexagon"] .ms-friend-avatar,
:root[data-fs-shape="hexagon"] .ms-friend-overflow {
clip-path: polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%);
}
/* Heart — bezier path per element size (clip-path: path() uses absolute px) */
/* #ms-avatar-wrap: 102×102 (96px content + 3px padding each side) */
:root[data-fs-shape="heart"] #ms-avatar-wrap {
clip-path: path('M 51,98 C 33,85 0,64 2,36 C 4,0 45,0 51,22 C 57,0 98,0 100,36 C 102,64 69,85 51,98 Z');
}
/* .ms-avatar img: 96×96 */
:root[data-fs-shape="heart"] .ms-avatar {
clip-path: path('M 48,92 C 31,80 0,60 2,34 C 4,0 42,0 48,21 C 54,0 92,0 94,34 C 96,60 65,80 48,92 Z');
}
/* friend tiles and overflow: 60×60 */
:root[data-fs-shape="heart"] .ms-friend-avatar,
:root[data-fs-shape="heart"] .ms-friend-overflow {
clip-path: path('M 30,58 C 19,50 0,38 1,21 C 2,0 26,0 30,13 C 34,0 58,0 59,21 C 60,38 41,50 30,58 Z');
}
/* Badge / Shield */
:root[data-fs-shape="badge"] #ms-avatar-wrap,
:root[data-fs-shape="badge"] .ms-avatar,
:root[data-fs-shape="badge"] .ms-friend-avatar,
:root[data-fs-shape="badge"] .ms-friend-overflow {
clip-path: polygon(10% 0%, 90% 0%, 100% 22%, 100% 56%, 50% 100%, 0% 56%, 0% 22%);
}