MediaWiki:Gadget-DiagnosticTree.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* DiagnosticTree.css — v2
* Copy to: MediaWiki:Gadget-DiagnosticTree.css
*/
/* ── Variables ────────────────────────────────────────────────────────────── */
.dt-shell {
--emergency: #b91c1c;
--emergency-bg: #fef2f2;
--emergency-border: #fca5a5;
--urgent: #b45309;
--urgent-bg: #fffbeb;
--urgent-border: #fcd34d;
--cleared: #15803d;
--cleared-bg: #f0fdf4;
--cleared-border: #86efac;
--ink: #1c1917;
--ink-soft: #57534e;
--ink-faint: #a8a29e;
--paper: #fafaf9;
--paper-2: #f5f5f4;
--rule: #e7e5e4;
--blue: #1d4ed8;
--green: #15803d;
--teal: #0f766e;
max-width: 780px;
margin: 1.5em auto;
display: flex;
flex-direction: column;
gap: 1rem;
font-family: Georgia, 'Times New Roman', serif;
color: var(--ink);
}
/* ── Red flag panel ───────────────────────────────────────────────────────── */
.dt-redflag-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.dt-flag-column {
border-radius: 10px;
overflow: hidden;
border: 1.5px solid var(--emergency-border);
background: var(--emergency-bg);
transition: border-color 0.3s, background 0.3s;
}
.dt-flag-column.urgent {
border-color: var(--urgent-border);
background: var(--urgent-bg);
}
.dt-flag-column.all-cleared {
border-color: var(--cleared-border);
background: var(--cleared-bg);
}
.dt-flag-col-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: 'Courier New', monospace;
background: var(--emergency);
color: #fff;
}
.dt-flag-column.urgent .dt-flag-col-header { background: var(--urgent); }
.dt-flag-column.all-cleared .dt-flag-col-header { background: var(--cleared); }
.dt-flag-items { padding: 0.5rem 0; }
/* ── Flag item ────────────────────────────────────────────────────────────── */
.dt-flag-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.55rem 0.85rem;
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dt-flag-item:last-child { border-bottom: none; }
.dt-flag-item:hover { background: rgba(0,0,0,0.04); }
.dt-flag-item.expanded { background: rgba(0,0,0,0.03); }
.dt-flag-checkbox {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--emergency);
flex-shrink: 0;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
background: #fff;
}
.dt-flag-column.urgent .dt-flag-checkbox { border-color: var(--urgent); }
.dt-flag-item.cleared .dt-flag-checkbox {
background: var(--cleared);
border-color: var(--cleared);
}
.dt-flag-item.cleared .dt-flag-checkbox::after {
content: '✓';
color: #fff;
font-size: 0.65rem;
font-weight: 700;
}
.dt-flag-item-body { flex: 1; min-width: 0; }
.dt-flag-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
line-height: 1.35;
transition: color 0.2s;
}
.dt-flag-item.cleared .dt-flag-label {
color: var(--ink-faint);
text-decoration: line-through;
}
.dt-flag-question {
font-size: 0.74rem;
color: var(--ink-soft);
line-height: 1.45;
margin-top: 0.35rem;
padding: 0.4rem 0.55rem;
background: rgba(0,0,0,0.04);
border-radius: 5px;
border-left: 2px solid var(--emergency);
display: none;
}
.dt-flag-column.urgent .dt-flag-question { border-left-color: var(--urgent); }
.dt-flag-item.expanded .dt-flag-question { display: block; }
.dt-flag-rationale {
font-size: 0.7rem;
color: var(--ink-soft);
font-style: italic;
margin-top: 0.3rem;
line-height: 1.4;
display: none;
}
.dt-flag-item.expanded .dt-flag-rationale { display: block; }
.dt-flag-actions {
display: none;
gap: 0.4rem;
margin-top: 0.45rem;
}
.dt-flag-item.expanded .dt-flag-actions { display: flex; }
.dt-flag-btn {
font-size: 0.7rem;
font-weight: 700;
padding: 0.25em 0.65em;
border-radius: 4px;
border: 1.5px solid transparent;
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
transition: all 0.15s;
}
.dt-flag-btn.present {
background: var(--emergency);
color: #fff;
border-color: var(--emergency);
}
.dt-flag-btn.present:hover { filter: brightness(0.9); }
.dt-flag-btn.absent {
background: #fff;
color: var(--ink-soft);
border-color: var(--rule);
}
.dt-flag-btn.absent:hover { background: var(--paper-2); }
.dt-flag-column.urgent .dt-flag-btn.present {
background: var(--urgent);
border-color: var(--urgent);
}
/* Referral inline card */
.dt-flag-referral {
margin: 0 0.85rem 0.6rem;
padding: 0.6rem 0.75rem;
border-radius: 6px;
background: var(--emergency);
color: #fff;
font-size: 0.75rem;
line-height: 1.5;
display: none;
}
.dt-flag-referral.urgent-ref { background: var(--urgent); }
.dt-flag-referral.visible { display: block; }
.dt-flag-referral strong {
display: block;
font-size: 0.78rem;
margin-bottom: 0.25rem;
font-family: 'Courier New', monospace;
letter-spacing: 0.05em;
}
/* Column cleared message */
.dt-panel-cleared-msg {
display: none;
text-align: center;
padding: 0.5rem;
font-size: 0.75rem;
color: var(--cleared);
font-weight: 600;
}
.dt-flag-column.all-cleared .dt-panel-cleared-msg { display: block; }
/* ── Divider ──────────────────────────────────────────────────────────────── */
.dt-divider {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--ink-faint);
font-size: 0.7rem;
font-family: 'Courier New', monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dt-divider::before,
.dt-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--rule);
}
/* ── Tree section lock ────────────────────────────────────────────────────── */
.dt-tree-section {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.4s ease;
}
.dt-tree-section.unlocked {
opacity: 1;
pointer-events: all;
}
.dt-tree-locked-msg {
text-align: center;
padding: 1.5rem;
background: var(--paper-2);
border: 1.5px dashed var(--rule);
border-radius: 10px;
font-size: 0.82rem;
color: var(--ink-faint);
font-family: 'Courier New', monospace;
}
/* ── Tree header ──────────────────────────────────────────────────────────── */
.dt-tree-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.dt-region-label {
font-family: 'Courier New', monospace;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.dt-controls { display: flex; gap: 0.4rem; }
.dt-btn {
font-size: 0.72rem;
padding: 0.3em 0.7em;
border-radius: 5px;
border: 1.5px solid var(--rule);
background: #fff;
cursor: pointer;
color: var(--ink-soft);
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
transition: all 0.15s;
}
.dt-btn:hover { background: var(--paper-2); }
.dt-btn-back { border-color: #93c5fd; color: var(--blue); }
/* ── Progress ─────────────────────────────────────────────────────────────── */
.dt-progress-wrap {
height: 3px;
background: var(--rule);
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.dt-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--teal));
border-radius: 2px;
transition: width 0.4s ease;
}
.dt-step-label {
font-family: 'Courier New', monospace;
font-size: 0.65rem;
color: var(--ink-faint);
text-align: right;
margin-bottom: 0.85rem;
}
/* ── Question card ────────────────────────────────────────────────────────── */
.dt-card {
border: 1.5px solid var(--rule);
border-radius: 10px;
padding: 1.25rem 1.4rem;
background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
animation: dt-fadein 0.22s ease;
}
@keyframes dt-fadein {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.dt-type-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: 'Courier New', monospace;
padding: 0.2em 0.65em;
border-radius: 20px;
margin-bottom: 0.8rem;
color: #fff;
}
.dt-question {
font-size: 1.05rem;
line-height: 1.55;
font-weight: 600;
color: var(--ink);
margin-bottom: 0.85rem;
}
.dt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.dt-tag {
font-size: 0.68rem;
padding: 0.18em 0.6em;
border-radius: 4px;
font-weight: 600;
font-family: 'Courier New', monospace;
}
.dt-tag-blue { background: #dbeafe; color: #1e40af; }
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
.dt-tag-green { background: #dcfce7; color: #166534; }
.dt-rationale {
font-size: 0.78rem;
color: var(--ink-soft);
font-style: italic;
margin-bottom: 0.55rem;
line-height: 1.5;
}
.dt-landmark {
font-size: 0.76rem;
color: var(--ink);
background: #faf5eb;
border-left: 2.5px solid #a0956e;
padding: 0.35em 0.65em;
margin-bottom: 0.55rem;
border-radius: 0 4px 4px 0;
line-height: 1.45;
}
.dt-positive {
font-size: 0.76rem;
color: #166534;
background: #f0fdf4;
border-left: 2.5px solid var(--green);
padding: 0.35em 0.65em;
margin-bottom: 0.55rem;
border-radius: 0 4px 4px 0;
}
.dt-muscle-hint {
font-size: 0.72rem;
padding: 0.22em 0.55em;
border-radius: 4px;
margin-bottom: 0.3rem;
font-family: 'Courier New', monospace;
}
.dt-implicated { background: #f0fdf4; color: #166534; }
.dt-excluded { background: #fef2f2; color: #991b1b; }
/* ── Answer buttons ───────────────────────────────────────────────────────── */
.dt-answers { display: flex; gap: 0.65rem; margin-top: 1.1rem; }
.dt-answer {
flex: 1;
padding: 0.6em 1em;
font-size: 0.88rem;
font-weight: 600;
border: 1.5px solid transparent;
border-radius: 7px;
cursor: pointer;
transition: all 0.15s ease;
font-family: Helvetica, Arial, sans-serif;
}
.dt-answer-yes { background: #f0fdf4; color: #166534; border-color: #86efac; }
.dt-answer-yes:hover { background: var(--green); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(21,128,61,0.25); }
.dt-answer-no { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.dt-answer-no:hover { background: var(--emergency); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(185,28,28,0.2); }
/* ── Result card ──────────────────────────────────────────────────────────── */
.dt-card-result { border-color: #86efac; background: #f0fdf4; }
.dt-result-name {
font-size: 1.2rem;
font-weight: 700;
color: #14532d;
margin-bottom: 0.35rem;
}
.dt-confidence {
font-family: 'Courier New', monospace;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.55rem;
}
.dt-notes { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.5rem; font-style: italic; line-height: 1.5; }
.dt-treatment { font-size: 0.78rem; background: #dcfce7; border-left: 2.5px solid #16a34a; padding: 0.35em 0.65em; margin-bottom: 0.45rem; border-radius: 0 4px 4px 0; }
.dt-chapter { font-family: 'Courier New', monospace; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.65rem; }
.dt-also { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.75rem; }
.dt-wiki-link {
display: inline-block;
padding: 0.5em 1em;
background: #1e3a5f;
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
transition: background 0.15s;
margin-top: 0.25rem;
}
.dt-wiki-link:hover { background: #162d4a; }
/* ── Overlap card ─────────────────────────────────────────────────────────── */
.dt-card-overlap { border-color: #d6d3d1; }
.dt-overlap-text { font-size: 0.9rem; margin-bottom: 0.65rem; line-height: 1.5; }
.dt-screen-list { font-size: 0.8rem; color: var(--ink-soft); padding-left: 1.1em; margin-bottom: 0.65rem; line-height: 1.8; }
/* ── Error ────────────────────────────────────────────────────────────────── */
.dt-error {
background: #fef2f2;
border: 1px solid #fca5a5;
border-radius: 6px;
padding: 1em;
color: #991b1b;
font-size: 0.85rem;
font-family: 'Courier New', monospace;
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
.dt-redflag-panel { grid-template-columns: 1fr; }
.dt-answers { flex-direction: column; }
.dt-card { padding: 1rem 1.1rem; }
}