Anthony StirlingandGitHub
8bfcf6eb7e
# Description of Changes Makes the code-snippet boxes theme-aware (a light palette in light mode) and moves the hero navy into a design token without changing the colour itself. Part of a portal (processor) UI-consistency pass, split into small focused PRs. ## Before / after <img width="2136" height="272" alt="after-codeblock-light" src="https://github.com/user-attachments/assets/ebdd4a7d-2d1a-429a-971b-0b04e93854fe" /> <img width="1800" height="740" alt="before-codeblock-light" src="https://github.com/user-attachments/assets/6819231a-10d5-4730-9b7d-3c36dc1c8170" /> --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have run `task check` to verify linters, typechecks, and tests pass - [x] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing) for more details.
146 lines
3.5 KiB
CSS
146 lines
3.5 KiB
CSS
/* ──────────────────────────────────────────────────────────────────────── */
|
|
/* Subscribed-tier deployed-Editor hero */
|
|
/* ──────────────────────────────────────────────────────────────────────── */
|
|
|
|
.portal-editor-hero {
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--color-border-input);
|
|
background: var(--color-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portal-editor-hero__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--color-hero-navy);
|
|
}
|
|
|
|
.portal-editor-hero__logo {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 0.875rem;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.1),
|
|
0 0 0 1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.portal-editor-hero__mark {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.portal-editor-hero__info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.portal-editor-hero__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5625rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.portal-editor-hero__name {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-right: 0.125rem;
|
|
}
|
|
|
|
.portal-editor-hero__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3125rem;
|
|
padding: 0.25rem 0.6875rem;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 0.71875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background var(--motion-fast);
|
|
}
|
|
.portal-editor-hero__chip:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
.portal-editor-hero__chip svg {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.portal-editor-hero__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
.portal-editor-hero__host {
|
|
color: rgba(255, 255, 255, 0.92);
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
}
|
|
.portal-editor-hero__meta-sep {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.portal-editor-hero__action {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Icon-only actions (e.g. install) on the dark header. */
|
|
.portal-editor-hero__icon-btn {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
flex-shrink: 0;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background var(--motion-fast);
|
|
}
|
|
.portal-editor-hero__icon-btn:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
/* White CTA on the dark header, matching the marketing card. */
|
|
.portal-editor-hero__action .portal-editor-hero__cta.sui-btn {
|
|
background: #ffffff;
|
|
border-color: #ffffff;
|
|
color: var(--color-hero-navy);
|
|
}
|
|
.portal-editor-hero__action .portal-editor-hero__cta.sui-btn:hover {
|
|
background: rgba(255, 255, 255, 0.88);
|
|
border-color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.portal-editor-hero__row {
|
|
flex-wrap: wrap;
|
|
}
|
|
.portal-editor-hero__action {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Attached footer strip (setup checklist). */
|
|
.portal-editor-hero__footer {
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|