/* PupGear visual style variants */ /* ============================== */ /* Applied via data-pg-style on . Three variants: classic (default), outlined, compact. Orthogonal to colour themes — any style works with any theme. */ /* ======== CLASSIC (default — no attribute needed) ======== */ /* No overrides; this is the baseline Bootstrap/existing look. */ /* ======== OUTLINED ======== */ /* Font: Inter — neutral, precise, maximally legible. Reinforces the structured border language. */ /* Deliberate 2px borders, left accent bar on event cards (using the navbar theme colour), slightly tinted card headers, normal spacing, no shadows. Feels structured and precise — like a well-designed list/database app. */ [data-pg-style="outlined"] { /* Font: Inter — set on html so Bootstrap's body var inherits it */ --bs-body-font-family: "Inter", system-ui, sans-serif; & .poppins, & .poppins-500, & .poppins-600, & .poppins-700 { font-family: "Inter", system-ui, sans-serif; } /* Cards — stronger border, square-ish, no shadow */ & .card { border-radius: 4px; border: 2px solid var(--bs-border-color); box-shadow: none; } & .card-header { border-radius: 2px 2px 0 0 !important; border-bottom: 2px solid var(--bs-border-color); background-color: color-mix(in srgb, var(--pg-navbar-bg) 8%, var(--bs-secondary-bg)); } & .card-footer { border-radius: 0 0 2px 2px !important; border-top: 2px solid var(--bs-border-color); } /* Event cards — left accent stripe using the navbar/theme colour */ & .event-card-container > .card { border-left: 4px solid var(--pg-navbar-bg); border-radius: 0 4px 4px 0; } & .event-card-header { background-color: color-mix(in srgb, var(--pg-navbar-bg) 8%, var(--bs-secondary-bg)); } /* Continuation bars — left accent too */ & .event-continuation-bar-container { border-radius: 0 4px 4px 0; border: 2px solid var(--bs-border-color); border-left: 4px solid var(--pg-navbar-bg); box-shadow: none; } & .event-continuation-bar-accent { display: none; } /* Item grid tiles — strong border, tinted header */ & .item-grid-single-item-container { border-radius: 4px; border: 2px solid var(--bs-border-color); box-shadow: none; background: none; } & .item-grid-item-header { border-radius: 2px 2px 0 0; border-bottom: 2px solid var(--bs-border-color); background-color: color-mix(in srgb, var(--pg-navbar-bg) 12%, var(--bs-secondary-bg)); } & .item-grid-item-footer-item-actions { border-top: 2px solid var(--bs-border-color); background-color: color-mix(in srgb, var(--pg-navbar-bg) 6%, var(--bs-secondary-bg)); } /* Buttons — square-ish */ & .btn { border-radius: 3px; border-width: 2px; } & .btn-sm { border-radius: 3px; border-width: 1px; } /* Navbar — stronger bottom border to match the card language */ & .primary-navigation-bar-container { box-shadow: none; border-bottom: 3px solid color-mix(in srgb, var(--pg-navbar-bg) 60%, #000); } /* Inputs */ & .form-control, & .form-select { border-radius: 3px; border-width: 2px; } /* Dropdowns */ & .dropdown-menu { border-radius: 4px; border: 2px solid var(--bs-border-color); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); } /* Badges */ & .badge { border-radius: 3px; } /* Notes containers */ & .item-grid-notes-container, & .event-notes-container { border-radius: 3px; border-width: 2px; } } /* ======== COMPACT ======== */ /* Square edges, flat/no shadows, tighter spacing, heavier type hierarchy. Feels like a focused desktop tool. Font: IBM Plex Sans — technical character, excellent small-size legibility. */ [data-pg-style="compact"] { /* Font: IBM Plex Sans — set on html so Bootstrap's body var inherits it */ --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif; & .poppins, & .poppins-500, & .poppins-600, & .poppins-700 { font-family: "IBM Plex Sans", system-ui, sans-serif; } /* Cards — very sharp, flat */ & .card { border-radius: 2px; box-shadow: none; } & .card-header { border-radius: 0 !important; padding: 0.4rem 0.65rem; } & .card-footer { border-radius: 0 !important; padding: 0.3rem 0.5rem; } & .card-body { padding: 0.6rem; } /* Item grid tiles — square, borderless, denser */ & .item-grid-single-item-container { border-radius: 2px; box-shadow: none; } & .item-grid-item-header { border-radius: 0; padding: 0.15rem 0.3rem; font-size: 0.8rem; } & .item-grid { column-gap: 0.75rem; row-gap: 0.6rem; } /* Buttons — square */ & .btn { border-radius: 2px; } & .btn-sm { border-radius: 2px; padding: 0.15rem 0.4rem; font-size: 0.8rem; } /* Page content — tighter */ & .page-content-container { padding: 1.25rem 2rem; @media (width <=1199.98px) { padding: 0.4rem; } @media (1200px <=width <=1400px) { padding: 1rem 1.5rem; } } /* Navbar — flat, no radius */ & .primary-navigation-bar-container { padding: 0.3rem 0.75rem; box-shadow: none; border-bottom: 2px solid rgba(0, 0, 0, 0.2); } /* Continuation bars */ & .event-continuation-bar-container { border-radius: 2px; box-shadow: none; } /* Event card header — tighter */ & .event-card-header { padding: 0.35rem 0.5rem; } & .event-card-body { padding: 0.6rem; @media (width <=768px) { padding: 0.35rem; } } /* Inputs and selects */ & .form-control, & .form-select { border-radius: 2px; } /* Dropdowns */ & .dropdown-menu { border-radius: 2px; box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15); } /* Badges */ & .badge { border-radius: 2px; } /* Typography — stronger hierarchy */ & .event-title h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; } & .event-time h5 { font-size: 0.8rem; font-weight: 400; color: var(--bs-secondary-color); } /* Notes container */ & .item-grid-notes-container, & .event-notes-container { border-radius: 2px; } }