mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
5e9fcc5c49
Replace IBM Plex Mono, Space Mono, and JetBrains Mono with Roboto Condensed across all CSS variables, inline styles, canvas ctx.font references, and Google Fonts CDN links. Updates 28 files covering templates, stylesheets, and JS modules for consistent typography. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
207 lines
4.4 KiB
CSS
207 lines
4.4 KiB
CSS
/**
|
|
* Help Modal Styles
|
|
* Shared across all pages that include the help modal partial
|
|
*/
|
|
|
|
.help-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
z-index: 10000;
|
|
overflow-y: auto;
|
|
padding: 40px 20px;
|
|
font-family: var(--font-mono, 'Roboto Condensed', 'Arial Narrow', sans-serif);
|
|
}
|
|
|
|
.help-modal.active {
|
|
display: block;
|
|
}
|
|
|
|
.help-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: var(--bg-card, var(--bg-secondary, #0f1218));
|
|
border: 1px solid var(--border-color, #1f2937);
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.help-content h2 {
|
|
color: var(--accent-cyan, #4a9eff);
|
|
margin-bottom: 16px;
|
|
font-size: 15px;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.help-content h3 {
|
|
color: var(--text-primary, #e8eaed);
|
|
margin: 20px 0 10px 0;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-bottom: 1px solid var(--border-color, #1f2937);
|
|
padding-bottom: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.help-close {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-dim, #4b5563);
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.help-close:hover {
|
|
color: var(--accent-red, #ef4444);
|
|
}
|
|
|
|
.help-modal .icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 8px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.help-modal .icon-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
background: var(--bg-primary, #0a0c10);
|
|
border: 1px solid var(--border-color, #1f2937);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.help-modal .icon-item .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.help-modal .icon-item .icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.help-modal .icon-item .desc {
|
|
color: var(--text-secondary, #9ca3af);
|
|
font-size: 10.5px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.help-modal .tip-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.help-modal .tip-list li {
|
|
padding: 5px 0;
|
|
padding-left: 16px;
|
|
position: relative;
|
|
color: var(--text-secondary, #9ca3af);
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
border-bottom: 1px solid var(--border-color, #1f2937);
|
|
}
|
|
|
|
.help-modal .tip-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.help-modal .tip-list li::before {
|
|
content: '\203A';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--accent-cyan, #4a9eff);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.help-modal .tip-list li strong {
|
|
color: var(--text-primary, #e8eaed);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.help-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
margin-bottom: 16px;
|
|
border: 1px solid var(--border-color, #1f2937);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.help-tab {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: var(--bg-primary, #0a0c10);
|
|
border: none;
|
|
color: var(--text-secondary, #9ca3af);
|
|
cursor: pointer;
|
|
font-family: var(--font-mono, 'Roboto Condensed', 'Arial Narrow', sans-serif);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: all 0.15s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.help-tab:not(:last-child) {
|
|
border-right: 1px solid var(--border-color, #1f2937);
|
|
}
|
|
|
|
.help-tab:hover {
|
|
background: var(--bg-tertiary, #151a23);
|
|
color: var(--text-primary, #e8eaed);
|
|
}
|
|
|
|
.help-tab.active {
|
|
background: var(--bg-tertiary, #151a23);
|
|
color: var(--accent-cyan, #4a9eff);
|
|
}
|
|
|
|
.help-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--accent-cyan, #4a9eff);
|
|
}
|
|
|
|
.help-section {
|
|
display: none;
|
|
}
|
|
|
|
.help-section.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Ensure code tags are styled */
|
|
.help-modal code {
|
|
background: var(--bg-tertiary, #151a23);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
font-family: var(--font-mono, 'Roboto Condensed', 'Arial Narrow', sans-serif);
|
|
font-size: 10.5px;
|
|
color: var(--accent-cyan, #4a9eff);
|
|
}
|