/** * * JustRP — hand-written overrides * * stylesheet.css is compiled Tailwind output and gets overwritten whenever the * theme is rebuilt, so custom rules live here instead. This file is linked * after stylesheet.css in overall_header.html, so it wins on equal specificity. * * Note: do NOT add new Tailwind utility classes to the templates — only classes * present in the compiled build exist. Style with plain CSS here instead. * */ /* --------------------------------------------------------------------------- Auth pages (login, register, agreement, resend, reset password, login link) These use a stripped layout with no header or footer, which left the form floating on a flat background. The backdrop is drawn from --color-primary (declared on in overall_header.html) so it follows a retheme. --------------------------------------------------------------------------- */ /* The backdrop goes on , not on .justrp-auth. .justrp-auth renders inside "main#page-body > div.max-w-6xl.mx-auto" (overall_header.html), so a background on it can only ever paint inside that 72rem column — which reads as a boxed panel floating on the page rather than a page background. A body background propagates to the canvas and covers the full viewport with no pseudo-elements or z-index involved. main#page-body carries Tailwind's .bg-gray-100 (#f3f4f6) and would otherwise paint over this, so it is cleared on auth pages too. */ body:has(.justrp-auth) { background-color: #0b0b0b; background-image: radial-gradient(1100px 600px at 12% -15%, rgba(var(--color-primary, 232, 150, 46), .13), transparent 60%), radial-gradient(900px 550px at 88% 115%, rgba(var(--color-primary, 232, 150, 46), .09), transparent 60%), linear-gradient(165deg, #151515 0%, #0d0d0d 55%, #070707 100%); background-attachment: fixed; background-repeat: no-repeat; } body:has(.justrp-auth) #page-body, body:has(.justrp-auth) .wrapper { background-color: transparent; } .justrp-auth { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 0 1rem 3rem; background: none; } /* Card holding the heading and the form. */ .justrp-auth-card { position: relative; width: 100%; max-width: 27rem; margin: 0 auto; padding: 2rem 1.75rem 1.75rem; background-color: rgba(24, 24, 24, .92); border: 1px solid #333; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* A thin accent line along the top edge of the card. */ .justrp-auth-card::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient( to right, transparent, rgba(var(--color-primary, 232, 150, 46), .55), transparent ); } .justrp-auth-card h1 { color: #f0f0f0; font-weight: 600; } /* The heading block ships with mb-9, which is oversized once boxed in. Targeted by its own class rather than :first-child, because the back button now occupies that position inside the card. */ .justrp-auth-card > .mb-9 { margin-bottom: 1.25rem; } /* "Board index" as a small pill at the top of the card. align-self is required: .justrp-auth-card is a flex column, so without it the button stretches to the full card width (which is what turned the original link into a full-width bar). */ .justrp-auth-card .justrp-auth-back { align-self: flex-start; width: auto; margin-bottom: .35rem; } /* The anchor ships with Tailwind's "flex ... p-2 py-3", which is too tall and too wide for a pill; the compound selector outranks those utilities. */ .justrp-auth-card .justrp-auth-back a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem .3rem .6rem; font-size: .75rem; line-height: 1.4; color: #9a9a9a; background-color: rgba(255, 255, 255, .04); border: 1px solid #333; border-radius: 999px; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .justrp-auth-card .justrp-auth-back a:hover { color: rgb(var(--color-primary, 232, 150, 46)); background-color: rgba(var(--color-primary, 232, 150, 46), .1); border-color: rgba(var(--color-primary, 232, 150, 46), .45); } /* The agreement page keeps its link outside the card; stop the flex column from stretching it into a full-width bar. */ .justrp-auth > #return_to_index { align-self: flex-start; width: auto; } /* The agreement page is a wide text column rather than a narrow form, so it gets the backdrop but keeps its own width. */ .justrp-auth .flex.flex-wrap.gap-4.justify-between { max-width: 60rem; margin: 0 auto; width: 100%; } @media (max-width: 480px) { .justrp-auth { padding: 0 .75rem 2rem; } .justrp-auth-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 10px; } }