*/
/* .tinymce-output figure.image */
.tinymce-output figure.image {
margin: 16px 0;
}
/* .tinymce-output figure.image img */
.tinymce-output figure.image img {
margin: 0 auto;
}
/* .tinymce-output figure.image figcaption */
.tinymce-output figure.image figcaption {
font-size: 0.9rem;
line-height: 1.35;
opacity: .8;
text-align: center;
margin-top: 6px;
}
/* Keep other embeds contained too */
/* .tinymce-output iframe,
.tinymce-output video,
.tinymce-output table */
.tinymce-output iframe,
.tinymce-output video,
.tinymce-output table {
max-width: 100%;
}
/* .tinymce-output table */
.tinymce-output table {
display: block;
-webkit-overflow-scrolling: touch;
overflow-x: auto; /* horizontal scroll if needed */
}
/* Prevent layout breakage from long words/URLs around media */
/* .tinymce-output */
.tinymce-output {
overflow-wrap: anywhere;
word-break: normal;
}
/* Admin Delete button tone */
/* .btn-outline-danger:hover */
.btn-outline-danger:hover {
background: color-mix(in srgb, var(--ps-danger) 15%, transparent);
color: var(--ps-danger);
border-color: var(--ps-danger);
}
/* =============================================================================
ARTICLE READER (Medium-like)
- Applies only on article_view.html where we added .article-page / .article-read
- Removes boxed card look; centers readable column; optimizes typography
============================================================================= */
/* Collapse rails for a distraction-free reader */
/* Collapse rails for a distraction-free reader */
.ps-rails.article-page {
/* keep the reader width cap */
max-width: 1200px;
margin-inline: auto;
/* ✅ reset the 3-col grid to a single column for article pages */
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
/* Explicitly hide rails (you already had this; keep as-is) */
.ps-rails.article-page .ps-left-rail,
.ps-rails.article-page .ps-right-rail {
display: none;
}
/* .ps-rails.article-page .ps-left-rail,
.ps-rails.article-page .ps-right-rail */
.ps-rails.article-page .ps-left-rail,
.ps-rails.article-page .ps-right-rail {
display: none; /* hide side rails on article pages */
}
/* .ps-rails.article-page .ps-main */
.ps-rails.article-page .ps-main {
flex: 1 1 auto;
min-width: 0;
}
/* The actual reader column (replace the boxed .ps-panel) */
/* .article-read */
.article-read {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
max-width: 100ch;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
/* kill the card look */
/* comfortable reading measure */
padding: 0; /* let content breathe naturally */
}
/* Make title + tags use the same reader width as the body
(explicit width so flex-column doesn't keep them full-width) */
.article-page .ps-main > .article-head,
.article-page .ps-main > .article-read {
width: 100%;
max-width: 1200ch;
margin-inline: auto;
align-self: center; /* ensure centering within flex column */
}
/* Light spacing polish for the tag row */
.article-page .ps-main > .article-head .article-meta {
margin-bottom: 12px;
}
/* Headline treatment (Medium-ish scale & rhythm) */
/* .article-page .ps-main > h1 */
.article-page .ps-main > h1 {
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
font-size: clamp(2rem, 2.2vw + 1.4rem, 3rem);
margin: 24px 0 12px;
/* responsive size from ~32px to ~48px */
}
/* Optional: soften tag row under title without box visuals changing elsewhere */
/* .article-page .ps-main .badge */
.article-page .ps-main .badge {
font-weight: 500;
}
/* Prev/Next article link size */
.article-page .ps-main > .d-flex.justify-content-between a {
font-size: 1.2rem; /* change to your desired size (e.g., 1rem, 1.1rem) */
line-height: 2.3;
}
/* Make sure TinyMCE output can’t overflow (images, tables, iframes) */
/* .article-read img */
.article-read img {
max-width: 100%;
height: auto;
display: block;
margin: 12px auto;
}
/* .article-read figure.image */
.article-read figure.image {
margin: 16px 0;
}
/* .article-read figure.image img */
.article-read figure.image img {
margin: 0 auto;
}
/* .article-read figure.image figcaption */
.article-read figure.image figcaption {
font-size: 0.95rem;
line-height: 1.35;
opacity: .85;
text-align: center;
margin-top: 6px;
}
/* .article-read iframe,
.article-read video,
.article-read table */
.article-read iframe,
.article-read video,
.article-read table {
max-width: 100%;
}
/* .article-read table */
.article-read table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ABOUT PAGE — reuse article reader layout, with its own adjustable width */
.ps-rails.about-page .ps-main > .article-read {
width: 100%;
/* Change this value whenever you want tighter/wider text measure on About */
max-width: var(--about-max-width, 100ch);
margin-inline: auto;
align-self: center;
padding: 0; /* keep it naked (no panel/padding) */
line-height: 1.2;
letter-spacing: -0.01em;
margin: 24px 0 12px;
width: 100%;
max-width: 1200ch;
margin-inline: auto;
align-self: center; /* ensure centering within flex column */
}
/* Prevent long URLs/words from breaking the layout */
/* Article list summary styling */
/* =================================================================== */
/* Control Panel (CP) — layout + unified orange accent (left-rail) */
/* Targets #cpModal only; no global overrides */
/* =================================================================== */
#cpModal{
/* Reuse the left-rail accent in CP */
--cp-accent: var(--rail-accent);
}
/* --- Density tweak (optional) -------------------------------------- */
#cpModal.cp-compact .cp-item{
font-size:.9rem;
padding:5px 6px;
line-height:1.5;
}
/* --- Modal sizing --------------------------------------------------- */
#cpModal .cp-modal-dialog{ max-width: var(--cp-modal-max-w); }
/* --- Body + grid ---------------------------------------------------- */
#cpModal .modal-body{ background: var(--cp-bg); }
#cpModal .cp-grid{
display:grid;
grid-template-columns: var(--cp-left-w) var(--cp-mid-w) 1fr;
height: var(--cp-h);
min-height:620px;
max-height: calc(100vh - 180px);
overflow:hidden; /* panes scroll individually */
/* NEW: breathing room + inner padding for a modern, carded layout */
column-gap: 12px;
padding: 10px;
}
/* --- Panes & separators -------------------------------------------- */
/* Panes: carded look (no hard column rules) */
#cpModal .cp-left,
#cpModal .cp-mid,
#cpModal .cp-right{
background: var(--ps-surface);
border: 1px solid var(--cp-sep);
border-radius: 12px;
box-shadow: var(--ps-shadow);
}
/* kill old column dividers; the card borders now define the separation */
#cpModal .cp-left{ border-right: none; }
#cpModal .cp-mid { border-right: none; }
#cpModal .cp-left-inner,
#cpModal .cp-mid-inner,
#cpModal .cp-right-inner{
height:100%;
overflow:auto;
padding:12px;
/* ensure content doesn't hug the rounded edges too tightly */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* =================================================================== */
/* Control Panel (CP) styles */
/* Scoped to #cpModal only */
/* =================================================================== */
/* Accent harmonization (matches LEFT rail’s orange) */
#cpModal {
/* Links in CP use the rail accent */
--bs-link-color: var(--cp-accent);
}
/* 1) Left-nav list-group (Arguments section button/tab) */
#cpModal .list-group {
/* Make active items match the left rail selection */
--bs-list-group-active-bg: var(--cp-accent);
--bs-list-group-active-border-color: var(--cp-accent);
--bs-list-group-active-color: #fff;
}
#cpModal #cpNav .list-group-item:hover {
background: color-mix(in srgb, var(--cp-accent) 12%, transparent);
}
/* Make CP left-nav items look like middle-column .cp-item rows */
#cpModal #cpNav .list-group-item {
/* mirror .cp-item base */
display: block;
padding: var(--cp-item-pad-y) var(--cp-item-pad-x);
border-radius: var(--ps-radius-sm);
font-size: var(--cp-item-font);
color: var(--ps-text);
cursor: pointer;
user-select: none;
text-decoration: none;
/* neutralize Bootstrap list-group chrome in this nav only */
background: transparent;
border: 0;
/* ensure consistent spacing if BS adds margins between items */
margin: 0;
transition:
background-color .12s ease,
border-color .12s ease,
color .12s ease,
box-shadow .12s ease,
transform .06s ease;
}
/* Hover: same tint as .cp-item:hover */
#cpModal #cpNav .list-group-item:hover,
#cpModal #cpNav .list-group-item:focus {
background: color-mix(in srgb, var(--cp-accent) 12%, transparent);
text-decoration: none;
outline: none;
}
/* Active: same look as .cp-item.cp-active */
#cpModal #cpNav .list-group-item.active,
#cpModal #cpNav .list-group-item[aria-current="true"] {
background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
border-left: 3px solid var(--cp-accent);
padding-left: calc(var(--cp-item-pad-x) - 3px);
font-weight: 600;
box-shadow: 0 1px 8px color-mix(in srgb, var(--cp-accent) 12%, transparent);
/* keep text readable like .cp-item (don’t force white) */
color: var(--ps-text);
}
/* Make sure Bootstrap's active variables don’t flip colors here */
#cpModal #cpNav .list-group-item.active {
--bs-list-group-active-bg: transparent; /* we set bg above */
--bs-list-group-active-border-color: transparent; /* not used */
--bs-list-group-active-color: var(--ps-text); /* keep text tone */
}
/* 2) Middle-column items (argument rows) */
#cpModal .cp-items {
padding-bottom: 12px;
}
#cpModal .cp-item {
display: block;
padding: var(--cp-item-pad-y) var(--cp-item-pad-x);
border-radius: var(--ps-radius-sm);
font-size: var(--cp-item-font);
color: var(--ps-text);
cursor: pointer;
user-select: none;
text-decoration: none;
}
#cpModal .cp-item:hover {
background: color-mix(in srgb, var(--cp-accent) 12%, transparent);
}
#cpModal .cp-item.cp-active {
background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
border-left: 3px solid var(--cp-accent);
padding-left: calc(var(--cp-item-pad-x) - 3px);
font-weight: 600;
box-shadow: 0 1px 8px color-mix(in srgb, var(--cp-accent) 12%, transparent);
}
/* CP mid list: arguments that have values = green */
#cpModal .cp-item.cp-has-values {
color: var(--ps-success); /* ✅ green text */
}
/* When an arg both has values and is active, also tint the left accent */
#cpModal .cp-item.cp-active.cp-has-values {
border-left-color: var(--ps-success);
}
/* 3) Sticky filter row above middle column list */
#cpModal .cp-filter {
position: sticky;
top: 0;
z-index: 5;
background: var(--ps-surface);
border-bottom: 1px solid var(--cp-sep);
padding: 8px 8px;
margin-bottom: 8px !important;
/* modern docked feel */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 12px color-mix(in srgb, #000 10%, transparent);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#cpModal .cp-filter .form-control {
border-color: var(--ps-border);
box-shadow: none;
}
/* 4) Right detail header + fields */
#cpModal .cp-right-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ps-surface);
border-bottom: none;
box-shadow: none;
padding: 10px 10px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#cpModal .cp-right-header #cpDetailTitle {
font-size: 1.1rem;
font-weight: 900;
}
#cpModal .cp-detail .cp-field {
margin-bottom: .95rem;
}
#cpModal .cp-detail .cp-label {
font-weight: 500;
margin-bottom: .25rem;
}
/* Chips inside details */
#cpModal .cp-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: var(--ps-radius-sm);
background: var(--ps-surface);
border: 1px solid var(--ps-border);
margin: 0 6px 6px 0;
}
#cpModal .cp-chip .x {
cursor: pointer;
}
/* Optional subheading style within detail pane */
#cpModal .cp-section-heading {
font-weight: 700;
margin: 10px 0 4px;
font-size: .9rem;
color: var(--ps-muted);
}
/* 5) Footer polish */
#cpModal .ps-cp-footer {
border-top: 1px solid var(--ps-border);
background: color-mix(in srgb, var(--ps-surface) 92%, var(--ps-bg));
padding-block: .9rem;
}
/* 6) Empty state hint */
#cpModal .ps-empty-hint {
display: flex;
min-height: 260px;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
color: var(--ps-muted);
border: 1px dashed color-mix(in srgb, var(--ps-border) 70%, transparent);
border-radius: .5rem;
background: color-mix(in srgb, var(--ps-surface) 96%, transparent);
}
/* 7) Footer action buttons ("Reset All Arguments", "Done") */
#cpModal .cp-action-btn {
font-weight: 600;
font-size: .9rem;
line-height: 1.2;
border-radius: var(--ps-radius);
padding: .5rem .9rem;
border: 1px solid transparent;
cursor: pointer;
transition: background-color .12s ease,
border-color .12s ease,
color .12s ease,
box-shadow .12s ease;
}
/* Solid variant (e.g. "Done") */
#cpModal .cp-action-btn.cp-action-btn--solid {
background: var(--cp-accent);
border-color: var(--cp-accent);
color: #fff;
}
/* Outline variant (e.g. "Reset All Arguments") */
#cpModal .cp-action-btn.cp-action-btn--outline {
background: transparent;
border-color: var(--cp-accent);
color: var(--ps-text);
}
#cpModal .cp-action-btn.cp-action-btn--outline:hover {
background: var(--cp-accent);
border-color: var(--cp-accent);
color: var(--ps-text);
}
/* Disabled state for CP action buttons (attribute or class) */
#cpModal .cp-action-btn:disabled,
#cpModal .cp-action-btn.disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* If a utility class is used on the next container */
#cpModal #cpDetail,
#cpModal #cpDetail > .border-top,
#cpModal #cpDetail > .border-bottom {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* If an
is present directly above the empty-state block */
#cpModal #cpDetail > hr {
display: none;
}
/* If a pseudo-element is used to render the divider on the header/content */
#cpModal .cp-right-header::before,
#cpModal .cp-right-header::after,
#cpModal #cpDetail::before,
#cpModal #cpDetail::after {
content: none !important;
}
/* Center the empty state inside the detail panel */
#cpModal #cpDetail {
position: relative;
}
/* When the detail panel is in "empty" mode, center its contents.
We target the common muted/placeholder area but keep it scoped. */
#cpModal #cpDetail .cp-empty, /* preferred if you can add this class */
#cpModal #cpDetail .empty-state, /* alternate class if present */
#cpModal #cpDetail .ps-muted:only-child {
display: flex;
flex-direction: column; /* stack lines vertically */
align-items: center;
justify-content: center;
gap: .4rem; /* space between lines */
min-height: 220px;
text-align: center;
margin: 0;
white-space: normal; /* ensure normal wrapping for text */
}
/* Tidy default paragraph spacing inside the empty state */
#cpModal #cpDetail .ps-muted:only-child p {
margin: 0;
}
/* Selector overrides for any non-standard fields in CP */
#cpModal .form-control {
border-color: var(--ps-border, #d0d5dd);
}
#cpModal .form-control:focus,
#cpModal .form-control:focus-visible {
border-color: var(--cp-accent, #ff7a18);
box-shadow: none;
outline: none;
}
/* ===== Generic modal sizing utility ===== */
/* .modal--sizable .modal-dialog */
.modal--sizable .modal-dialog {
max-width: var(--modal-max-w);
}
/* .modal--sizable .modal-body */
.modal--sizable .modal-body {
max-height: var(--modal-body-max-h); overflow: auto;
}
/* Optional: small-screen guard (Bootstrap already does a lot here) */
@media (max-width: 575.98px) {
.modal--sizable .modal-dialog { max-width: calc(100% - 2rem); }
}
/* Reserve the right-rail width but don’t show its content when used as a spacer */
/* .ps-right-rail.is-placeholder */
.ps-right-rail.is-placeholder {
visibility: hidden; /* keeps the layout space */
}
/* .ps-right-rail.is-placeholder * */
.ps-right-rail.is-placeholder * {
display: none !important; /* ensure nothing is interactable/readable */
}
/* .d-none */
.d-none {
display: none !important;
}
/* Position the tiny bubble on the code chip */
/* code.command-text */
code.command-text {
position: relative;
}
/* parent */
/* Position the tiny bubble on the code chip */
code.command-text { position: relative; } /* parent */
.copied-tooltip {
position: absolute;
top: 1.6em; left: .25rem;
background-color: var(--ps-success);
color: #fff;
padding: 2px 6px;
border-radius: 6px;
font-size: .72rem;
box-shadow: 0 2px 12px color-mix(in srgb, var(--ps-success) 30%, transparent);
opacity: 0;
transition: opacity .15s ease-in-out;
right: -3.5rem;
left: auto;
white-space: nowrap;
z-index: 1056;
}
.copied-tooltip.is-visible { opacity: 1; }
/* Keep it above app chrome but under modals */
/* .toast */
.toast {
z-index: 1070;
}
/* #mitreDef */
#mitreDef {
z-index: 1080;
}
/* optional: ensure MITRE modal sits above toasts */
/* =========================================================
Offcanvas Drawers (MITRE + Article)
- Unified style & layout
- Behavioral assumptions:
- MITRE drawer: static z-index via CSS (1105)
- Article drawer: dynamic z-index via JS forceLayering()
========================================================= */
/* Backdrop needs to sit below drawers, above rest of app */
.offcanvas-backdrop {
z-index: 1100;
}
/* Shared panel chrome for both drawers */
.mitre-canvas,
.article-canvas {
background: var(--ps-surface);
color: var(--ps-text);
border: 1px solid var(--ps-border);
/* box-shadow intentionally NOT set here because each drawer
uses a directional shadow that matches its side */
/* z-index:
- mitre-canvas gets a static custom z-index below
- article-canvas gets z-index at runtime via JS */
}
/* ========================
MITRE drawer (left side)
======================== */
/* Width / sizing / stacking for MITRE */
.mitre-canvas {
width: min(33.333vw, 720px);
min-width: 520px;
max-width: 720px;
z-index: 1105; /* sits above backdrop */
/* edge divider on the right side of the drawer */
border-right: 1px solid var(--ps-border, #333);
/* shadow projects into the page from the left */
box-shadow: 6px 0 22px rgba(0,0,0,.18);
}
@media (max-width: 1200px) {
.mitre-canvas {
min-width: 380px;
width: min(40vw, 640px);
}
}
@media (max-width: 992px) {
.mitre-canvas {
min-width: 360px;
width: min(90vw, 640px);
}
}
/* Shape and border radius for the MITRE drawer when anchored left */
.mitre-canvas.offcanvas-start {
border-radius: 16px 16px 16px 0;
/* keep border-right from above */
}
/* MITRE definition body formatting inside the left drawer */
.mitre-def-block {
font-size: .9rem;
line-height: 1.5;
color: var(--ps-text);
}
/* Regular paragraphs */
.mitre-def-block .mitre-para {
margin: 0 0 .75rem 0;
color: var(--ps-text);
}
/* Blank line / paragraph break.
We render it as extra vertical gap, no visible text. */
.mitre-def-block .mitre-para-break {
margin: 0 0 1rem 0;
line-height: 1rem;
min-height: 0; /* just acts like spacing */
color: transparent;
}
/* Bulleted lists for technique steps / behaviors */
.mitre-def-block .mitre-list {
margin: 0 0 1rem 1.25rem; /* indent the list a bit */
padding: 0;
list-style: disc;
color: var(--ps-text);
}
.mitre-def-block .mitre-list li {
margin-bottom: .5rem;
line-height: 1.4;
font-size: .9rem;
color: var(--ps-text);
}
/* ========================
Article drawer (right side)
======================== */
/* Width / sizing / visual for Article preview */
.article-canvas.offcanvas-end {
width: 1100px; /* tweak this number if you want wider/narrower */
max-width: 90vw;
border-left: 1px solid var(--ps-border);
border-radius: 16px 16px 0 16px;
/* subtle shadow projecting into the page from the right */
box-shadow: -6px 0 22px rgba(0,0,0,.18);
/* note: z-index is set dynamically in JS via forceLayering() */
}
/* ==================================
Headers for both drawers
================================== */
/* Drawer header (top bar with title / close button) */
.mitre-canvas .offcanvas-header,
.article-canvas .offcanvas-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: flex-start;
gap: .75rem;
background: color-mix(in srgb, var(--ps-surface) 90%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ps-border);
padding: 12px 16px;
margin: 0; /* kill default header spacing */
}
/* Drawer header title */
.mitre-canvas .offcanvas-header .offcanvas-title,
.article-canvas .offcanvas-header .offcanvas-title {
flex: 1 1 auto;
margin: 0;
font-size: .9rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: .02em;
color: var(--ps-muted);
}
/* Drawer header close button */
.mitre-canvas .offcanvas-header .btn-close,
.article-canvas .offcanvas-header .btn-close {
flex: 0 0 auto;
opacity: .7;
}
.mitre-canvas .offcanvas-header .btn-close:hover,
.article-canvas .offcanvas-header .btn-close:hover {
opacity: 1;
}
/* ==================================
Body area for both drawers
================================== */
/* Offcanvas body: scrolling region, padding, readable baseline line-height */
.mitre-canvas .offcanvas-body,
.article-canvas .offcanvas-body {
position: relative;
max-height: 100vh;
overflow-y: auto;
padding: 16px;
line-height: 1.5;
}
/* ==================================
Article drawer internals
================================== */
/* Sticky "Open in Full Page →" header that we inject via JS */
.article-preview-header {
position: sticky;
top: 0;
z-index: 30;
display: flex;
justify-content: flex-start;
background: color-mix(in srgb, var(--ps-surface) 94%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ps-border);
padding: 12px 16px;
/* pull edge-to-edge within the body padding,
then restore normal flow afterwards */
margin: -16px -16px 16px -16px;
border-radius: 12px 12px 0 0;
}
/* Button in the sticky article header */
.article-preview-header .btn {
font-weight: 600;
font-size: .8rem;
line-height: 1.2;
border-radius: var(--ps-radius-sm);
border: 1px solid var(--ps-border);
background: var(--ps-surface);
color: var(--ps-text);
box-shadow: 0 1px 6px color-mix(in srgb, #000 10%, transparent);
}
.article-preview-header .btn:hover {
background: color-mix(in srgb, var(--ps-primary) 8%, var(--ps-surface));
border-color: color-mix(in srgb, var(--ps-primary) 40%, var(--ps-border));
box-shadow: 0 1px 12px color-mix(in srgb, var(--ps-primary) 18%, transparent);
text-decoration: none;
}
/* Article body text rhythm inside the article drawer */
.article-preview-content {
color: var(--ps-text);
font-size: .95rem;
line-height: 1.6;
}
.article-preview-content h1,
.article-preview-content h2,
.article-preview-content h3,
.article-preview-content h4 {
color: var(--ps-text);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
margin-top: 1rem;
margin-bottom: .5rem;
}
.article-preview-content p {
color: var(--ps-text);
font-size: .95rem;
line-height: 1.6;
margin-bottom: .9rem;
}
.article-preview-content .small,
.article-preview-content .text-muted {
color: var(--ps-muted) !important;
font-size: .8rem;
line-height: 1.4;
}
/* ==================================
MITRE drawer internals
================================== */
#mitreDefName {
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
margin-bottom: .5rem;
color: var(--ps-text);
}
#mitreDefText {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius);
padding: 12px;
font-size: .9rem;
line-height: 1.4;
color: var(--ps-text);
box-shadow: 0 1px 8px color-mix(in srgb, #000 12%, transparent);
}
/* ============================================================================
"More" Modal Refresh (ps-modal-rich)
- modern surface
- sticky header row
- cleaner command rows
- consistent spacing and tags
- NO behavioral changes
----------------------------------------------------------------------------
HOW TO USE:
Add class="modal--sizable ps-modal-rich" on the
Keep all existing data attributes / IDs / JS hooks.
============================================================================ */
/* Root modal surface treatment */
.ps-modal-rich .ps-modal-surface {
background: var(--ps-surface);
color: var(--ps-text);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
box-shadow: var(--ps-shadow);
overflow: hidden; /* so the rounded corners are visually clean */
}
/* Sticky header bar inside the modal */
.ps-modal-rich .modal-headbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
background: color-mix(in srgb, var(--ps-surface) 92%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ps-border);
padding: 12px 16px;
margin: 0;
}
/* Left block in header (title + meta block stacked) */
.ps-modal-rich .modal-head-titles {
flex: 1 1 auto;
min-width: 0;
}
.ps-modal-rich .modal-headbar .modal-title {
margin: 0;
font-size: 1rem;
line-height: 1.3;
font-weight: 700;
color: var(--ps-text);
letter-spacing: -0.01em;
word-break: break-word;
}
.ps-modal-rich .modal-head-meta {
margin-top: .25rem;
color: var(--ps-muted) !important;
line-height: 1.3;
font-size: .8rem;
font-weight: 400;
word-break: break-word;
}
/* Close button in header */
.ps-modal-rich .modal-headbar .btn-close {
flex: 0 0 auto;
opacity: .7;
}
.ps-modal-rich .modal-headbar .btn-close:hover {
opacity: 1;
}
/* Modal body wrapper */
.ps-modal-rich .modal-mainblock {
padding: 16px;
line-height: 1.5;
color: var(--ps-text);
background: var(--ps-surface);
}
/* Section block inside modal body */
.ps-modal-rich .ps-modal-section {
background: transparent;
border-radius: var(--ps-radius);
margin-bottom: 16px;
color: var(--ps-text);
}
/* Optional description text block at top of modal */
.ps-modal-rich .ps-modal-desc {
font-size: .9rem;
line-height: 1.4;
color: var(--ps-muted);
}
/* Tags row -> pill badges (reuses your existing .tags-text container) */
.ps-modal-rich .tags-text {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.ps-modal-rich .tags-text .ps-badge,
.ps-modal-rich .tags-text .badge,
.ps-modal-rich [data-all-tags] .badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
line-height: 1.4;
font-weight: 500;
color: var(--ps-text);
background: color-mix(in srgb, var(--ps-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--ps-primary) 30%, var(--ps-border));
box-shadow: 0 1px 6px color-mix(in srgb, #000 12%, transparent);
}
/* subtle divider between sections */
.ps-modal-rich .ps-modal-sep {
border: 0;
border-top: 1px solid var(--ps-border);
margin: 8px 0 16px;
}
/* Commands list spacing / card feel
NOTE: we do NOT rename .commands-list or li[data-command-row]
because ps-mitre.js and ps-commands.js rely on them.
*/
.ps-modal-rich .commands-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Each logical row (li[data-command-row]) becomes a little card block */
.ps-modal-rich .commands-list li[data-command-row] {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius);
box-shadow: var(--ps-shadow);
padding: 12px 12px;
margin-bottom: 10px;
}
/* MITRE breadcrumb row inside each command block */
.ps-modal-rich .commands-list li[data-command-row] .mitre-inline {
margin-bottom: .5rem;
}
/* Command chip inside modal (reuse global .command-text but tighten space a bit here) */
.ps-modal-rich .commands-list li[data-command-row] code.command-text {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--ps-font-mono);
font-size: var(--cmd-font-size, .95rem);
line-height: 1.2;
padding: .4rem .6rem;
border-radius: 10px;
cursor: pointer;
font-size: .9rem; /* make smaller */
line-height: 1.3;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--ps-surface-2) 84%, transparent),
color-mix(in srgb, var(--ps-surface) 92%, transparent)
);
border: 1px solid color-mix(in srgb, var(--ps-border) 60%, transparent);
box-shadow: 0 1px 6px color-mix(in srgb, #000 10%, transparent);
transition: transform .06s ease,
border-color .12s ease,
box-shadow .12s ease,
background .12s ease;
}
.ps-modal-rich .commands-list li[data-command-row] code.command-text:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--ps-warning) 35%, var(--ps-border));
box-shadow: 0 1px 18px color-mix(in srgb, var(--ps-warning) 12%, transparent);
}
/* Explanation text under each command */
.ps-modal-rich .commands-list li[data-command-row] .explanation {
font-size: 1.0rem;
line-height: 1.4;
margin-top: .5rem;
color: var(--ps-muted) !important;
}
/* ULTIMATE OVERRIDE: MITRE breadcrumb row inside "More" modal */
.ps-modal-rich .mitre-inline,
.ps-modal-rich .mitre-inline * {
font-size: 0.8rem; /* <-- tweak this */
line-height: 1.4;
color: color-mix(in srgb, var(--ps-warning) 72%, transparent)
}
.ps-modal-rich .mitre-inline .btn.btn-link:hover,
.ps-modal-rich .mitre-inline .btn-link:hover {
text-decoration: underline;
color: var(--ps-warning);
}
/* MITRE summary / tag clusters near bottom (if present in modal)
Just tighten it visually.
*/
.ps-modal-rich [data-mitre-summary],
.ps-modal-rich [data-all-tags] {
background: var(--ps-surface);
color: var(--ps-text);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius);
box-shadow: var(--ps-shadow);
padding: 12px;
margin-top: 16px;
overflow-x: auto;
max-width: 100%;
white-space: normal;
}
.ps-modal-rich [data-mitre-summary] p {
font-size: .8rem;
line-height: 1.4;
color: var(--ps-text);
margin: 0 0 .5rem;
}
.ps-modal-rich [data-mitre-summary] p strong {
font-weight: 600;
color: var(--ps-muted);
margin-right: .25rem;
}
/* Make tactic/technique/sub-technique mini-links in summary look like subtle pills */
.ps-modal-rich [data-mitre-summary] .btn.btn-link,
.ps-modal-rich [data-mitre-summary] .btn-link {
padding: 0 .4rem;
font-size: .8rem;
line-height: 1.3;
border-radius: var(--ps-radius-sm);
background: var(--ps-surface);
border: 1px solid var(--ps-border);
color: var(--ps-text);
text-decoration: none;
}
.ps-modal-rich [data-mitre-summary] .btn.btn-link:hover,
.ps-modal-rich [data-mitre-summary] .btn-link:hover {
text-decoration: underline;
background: color-mix(in srgb, var(--ps-primary) 8%, var(--ps-surface));
border-color: color-mix(in srgb, var(--ps-primary) 40%, var(--ps-border));
}
/* "Copy All" button row that you already have at the bottom of the modal:
we'll just give it breathing room by letting your existing markup
inherit spacing. If you have a footer container, give it this class. */
.ps-modal-rich .modal-footer,
.ps-modal-rich .ps-modal-footer {
border-top: 1px solid var(--ps-border);
background: color-mix(in srgb, var(--ps-surface) 92%, var(--ps-bg));
padding: 12px 16px;
}
/* Card-like block for tool description in More modal */
.ps-modal-rich .ps-modal-cardblock {
background: var(--ps-surface);
color: var(--ps-text);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius);
box-shadow: var(--ps-shadow);
padding: 12px 12px;
font-size: .9rem;
line-height: 1.4;
overflow-x: auto;
max-width: 100%;
white-space: normal;
}
/* Wider Bootstrap tooltip body for readability */
.tooltip {
opacity: 1 !important; /* ensure fully solid tooltip */
}
.tooltip .tooltip-inner {
max-width: 500px;
white-space: normal;
line-height: 1.5;
font-size: 1rem;
background-color: var(--ps-tt);
color: var(--ps-surface);
}