/* === SlideShortcuts Taskpane Base ===
Shared styles for all VBA WebBrowser taskpanes.
IE11 compatible: no CSS Grid, no CSS variables, no custom properties.
Brand palette:
Navy #0F1B2D
Gold #C4A35A
Cream #F5F0E8
Accent #2D52A0
Border #E0E0E0
Text #333
Muted #777
Fonts:
Headlines Instrument Serif (serif fallback)
Body DM Sans (sans-serif fallback)
Mono JetBrains Mono (monospace fallback)
*/
/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* === Typography ===
Google Fonts loaded via in each HTML :
IE11 note: @import can block rendering. Use tags instead.
*/
body {
font-family: 'DM Sans', 'Segoe UI', sans-serif;
font-size: 13px;
color: #333;
background: #fff;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
/* === Pane container scroll fix ===
taskpane.js pours content directly into #pane-container (a body child),
but body is overflow:hidden for the .taskpane shell pattern. Without this
rule, Office taskpanes on both Mac and Windows clip overflowing content
instead of scrolling. Give #pane-container its own scroll region so long
content (Icons tab with 2,367 entries, Symbols tab with Harvey + Text +
Icons + My Icons sections) stays scrollable.
Keeps `display: none` behavior from the HTML fallback intact — taskpane.js
flips display:block once content loads, at which point the height+overflow
rules below take over.
*/
#pane-container {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
/* === Taskpane shell === */
.taskpane {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
}
/* === Header === */
.header {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 10px 14px 8px;
border-bottom: 1px solid #E0E0E0;
background: #fff;
}
.title {
font-family: 'DM Sans', 'Segoe UI', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0F1B2D;
letter-spacing: 0.2px;
}
/* === Main content area === */
.main {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
}
.body {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
}
/* === Section groups === */
.group { margin-bottom: 14px; }
.group-title {
font-family: 'DM Sans', 'Segoe UI', sans-serif;
font-size: 12px;
font-weight: 600;
color: #0F1B2D;
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.group-sub {
font-size: 11px;
color: #777;
margin-bottom: 8px;
}
/* === Form sections === */
.form-section { margin-bottom: 14px; }
/* === Labels === */
.field-label,
.input-label {
display: block;
font-size: 11px;
font-weight: 600;
color: #0F1B2D;
margin-bottom: 4px;
}
/* === Text & number inputs === */
.text-input,
.num-input {
width: 100%;
padding: 6px 8px;
font-size: 13px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
border: 1px solid #E0E0E0;
border-radius: 3px;
color: #333;
background: #fff;
outline: none;
}
.text-input:focus,
.num-input:focus {
border-color: #999;
}
.num-input.input-error {
border-color: #C0392B;
}
.input-hint {
display: block;
font-size: 10px;
color: #777;
margin-top: 2px;
}
/* === Buttons === */
.insert-btn,
.send-btn,
.action-btn {
display: block;
width: 100%;
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
color: #fff;
background-color: #0F1B2D;
border: 1px solid #0F1B2D;
border-radius: 3px;
cursor: pointer;
letter-spacing: 0.2px;
}
.insert-btn:hover,
.send-btn:hover,
.action-btn:hover {
background-color: #1a2a40;
border-color: #1a2a40;
}
.insert-btn:active,
.send-btn:active,
.action-btn:active {
background-color: #0a1220;
border-color: #0a1220;
}
.insert-btn.inserted,
.send-btn.inserted,
.action-btn.inserted {
background-color: #1A7A42;
border-color: #1A7A42;
}
/* === Checkboxes & radios === */
.checkbox-row { display: block; }
.checkbox-label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
font-size: 12px;
color: #333;
margin-right: 18px;
}
.checkbox-label input[type="checkbox"] { margin-right: 5px; }
.radio-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 12px;
}
.radio-group label {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 12px;
color: #333;
cursor: pointer;
margin-right: 20px;
}
.radio-group label input[type="radio"] { margin-right: 5px; }
/* === Footer === */
.footer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 14px;
border-top: 1px solid #E0E0E0;
background: #FAFAF8;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 10px;
color: #777;
}
.tip-icon {
display: inline-block;
font-size: 8px;
font-weight: 700;
color: #fff;
background: #C4A35A;
padding: 2px 5px;
border-radius: 2px;
letter-spacing: 0.5px;
margin-right: 8px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.tip-text {
font-size: 10px;
color: #777;
line-height: 1.4;
}
/* === Search input === */
.search-wrap {
position: relative;
margin-bottom: 8px;
}
.search-wrap input {
width: 100%;
padding: 5px 28px 5px 8px;
border: 1px solid #E0E0E0;
border-radius: 3px;
font-size: 12px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
color: #333;
outline: none;
}
.search-wrap input:focus { border-color: #999; }
.search-wrap input::-ms-input-placeholder { color: #aaa; }
.search-icon {
position: absolute;
right: 7px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #777;
pointer-events: none;
}
/* === Select dropdowns === */
select {
padding: 4px 8px;
font-size: 12px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
border: 1px solid #E0E0E0;
border-radius: 3px;
color: #333;
background: #fff;
cursor: pointer;
outline: none;
}
select:focus { border-color: #999; }
/* === Scrollbar (WebKit + IE) === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }
/* === Inserted feedback (generic) === */
.inserted-feedback {
background: #E8F5E9;
}
/* === Color dropdown (shared by icons) === */
.color-dropdown {
position: relative;
margin-right: 12px;
}
.color-btn {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 4px 8px 2px;
border: 1px solid transparent;
border-radius: 3px;
background: none;
cursor: pointer;
position: relative;
}
.color-btn:hover {
background: #F5F5F5;
border-color: #E0E0E0;
}
.color-btn-icon { color: #333; margin-bottom: 1px; }
.color-bar {
display: block;
width: 24px;
height: 4px;
border-radius: 1px;
margin-bottom: 3px;
}
.color-btn-label {
font-size: 9px;
color: #777;
line-height: 1.15;
text-align: center;
white-space: nowrap;
}
.dropdown-caret {
position: absolute;
right: 2px;
bottom: 6px;
color: #777;
}
/* === Color panel === */
.color-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
margin-top: 4px;
padding: 8px;
background: #fff;
border: 1px solid #E0E0E0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.color-panel.open { display: block; }
/* === PowerPoint-style color picker === */
.pp-color-picker { width: 208px; }
.pp-section-label {
font-size: 11px;
color: #0F1B2D;
margin: 0 0 4px;
font-weight: 500;
}
.pp-theme-grid,
.pp-shade-grid,
.pp-standard-grid { overflow: hidden; margin-bottom: 2px; }
.pp-shade-grid { margin-bottom: 8px; }
.pp-standard-grid { margin-bottom: 6px; }
.color-cell {
width: 18px;
height: 18px;
border: 1px solid rgba(0,0,0,0.12);
cursor: pointer;
padding: 0;
border-radius: 0;
float: left;
margin: 0 1px 1px 0;
}
.color-cell:hover {
border: 2px solid #333;
position: relative;
z-index: 1;
}
.color-cell.active {
border: 2px solid #0F1B2D;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0F1B2D;
position: relative;
z-index: 2;
}
.pp-divider {
clear: both;
height: 1px;
background: #E0E0E0;
margin: 6px 0;
}
.pp-bottom-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 6px;
}
.pp-more-colors {
font-size: 11px;
color: #333;
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
}
.pp-more-colors:hover { color: #333; }
.pp-eyedropper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: none;
border: 1px solid #E0E0E0;
border-radius: 3px;
padding: 3px 6px;
cursor: pointer;
font-size: 11px;
color: #333;
}
.pp-eyedropper:hover { border-color: #999; }
/* === Color modal === */
.color-modal-overlay {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 200;
}
.color-modal-overlay.open {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.color-modal {
background: #fff;
border-radius: 4px;
padding: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
width: 240px;
}
.color-modal h3 {
font-size: 13px;
font-weight: 600;
color: #0F1B2D;
margin-bottom: 12px;
}
.color-modal input[type="color"] {
width: 100%;
height: 40px;
border: 1px solid #E0E0E0;
border-radius: 3px;
cursor: pointer;
padding: 2px;
}
.color-modal-btns {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 12px;
}
.color-modal-btns button {
padding: 5px 14px;
font-size: 12px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
border-radius: 3px;
cursor: pointer;
margin-left: 8px;
}
.btn-cancel {
background: #fff;
border: 1px solid #E0E0E0;
color: #333;
}
.btn-cancel:hover { border-color: #999; }
.btn-ok {
background: #0F1B2D;
border: 1px solid #0F1B2D;
color: #fff;
}
.btn-ok:hover {
background: #1a2a40;
border-color: #1a2a40;
}
/* === Preview area (icons) === */
.preview-area {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-left: auto;
padding: 0 4px;
}
.preview-circle {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #E0E0E0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background: #fff;
overflow: hidden;
margin-bottom: 3px;
}
.preview-circle.has-bg { border-color: transparent; }
.preview-icon {
width: 28px;
height: 28px;
display: block;
line-height: 0;
}
.preview-icon svg {
width: 28px;
height: 28px;
display: block;
}
.preview-label {
font-size: 9px;
color: #777;
}
/* === Background checkbox === */
.bg-checkbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 11px;
color: #333;
cursor: pointer;
white-space: nowrap;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding-bottom: 4px;
margin-right: 12px;
}
.bg-checkbox input { margin-right: 4px; }
/* === Empty state === */
.empty-state {
text-align: center;
padding: 40px 20px;
color: #777;
}
/* === Load more button === */
.load-more-btn {
clear: both;
width: 100%;
padding: 10px 0;
text-align: center;
font-size: 12px;
color: #333;
cursor: pointer;
border-top: 1px solid #E0E0E0;
margin-top: 8px;
font-weight: 600;
}
.load-more-btn:hover {
background: #FAF8F4;
color: #0F1B2D;
}
/* ============================================================================
=== MAC TASKPANE ADDITIONS (2026-04-22) ===
Classes added for Mac taskpane.js refactor (Option C: shared design system).
These are NET ADDITIONS — no existing classes modified, so Windows VBA
taskpanes are unaffected.
============================================================================ */
/* === Section header — gold uppercase label ("QUICK ACTIONS", etc.) === */
.section-header-gold {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #C4A35A;
margin-bottom: 6px;
}
/* === Larger section heading (Mac panel titles like "Insert Icon") === */
.pane-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #0F1B2D;
}
/* === Sub-section heading (panel subtitles, "INSERT", "FORMAT") === */
.section-subhead {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
margin-bottom: 8px;
}
/* === Thin divider — E8E4DC top border separator === */
.divider-thin {
border-top: 1px solid #E8E4DC;
margin-bottom: 12px;
}
/* === Action card — FAFAF8 card with hairline border + 12px padding ===
Used for Quick Actions tiles, Send As cards, etc. */
.action-card {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #FAFAF8;
border: 1px solid #E8E4DC;
border-radius: 6px;
padding: 12px 14px;
cursor: pointer;
text-align: left;
-webkit-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
text-decoration: none;
color: inherit;
}
.action-card:hover {
background: #F5F0E8;
border-color: #C4A35A;
}
.action-card .action-card-body { -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.action-card .action-card-title {
font-size: 13px;
font-weight: 600;
color: #0F1B2D;
}
.action-card .action-card-sub {
font-size: 11px;
color: #888;
margin-top: 2px;
}
/* === Keyboard shortcut badge — JetBrains Mono chip (Cmd+G, Option+Shift+B) ===
Used 4 ways in Mac: small (10px), medium (12px), with/without nowrap.
Default is small + nowrap (the most common ribbon-row use case). */
.kbd-badge {
display: inline-block;
background: #F0EDE6;
border: 1px solid #E8E4DC;
border-radius: 4px;
padding: 2px 6px;
font-family: 'JetBrains Mono', Consolas, 'SF Mono', Menlo, monospace;
font-size: 10px;
font-weight: 600;
color: #0F1B2D;
white-space: nowrap;
}
.kbd-badge.kbd-md { font-size: 12px; padding: 2px 7px; }
.kbd-badge.kbd-lg { font-size: 12px; padding: 2px 8px; }
/* === Icon picker grid (Mac Insert Icon panel) === */
.icon-picker-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(52px, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
grid-gap: 4px;
gap: 4px;
max-height: 320px;
overflow-y: auto;
}
.icon-picker-btn {
width: 52px;
height: 52px;
padding: 6px;
border: 1px solid #DDD;
border-radius: 6px;
background: white;
cursor: pointer;
-webkit-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon-picker-btn:hover { background: #FAF8F4; border-color: #C4A35A; }
.icon-picker-btn.selected { background: #FFF8EB; border-color: #C4A35A; }
.icon-picker-btn img {
width: 100%;
height: 100%;
object-fit: contain;
-webkit-filter: brightness(0);
filter: brightness(0);
}
/* === Category pill (Mac Insert Icon category bar) === */
.cat-pill {
font-size: 11px;
padding: 4px 8px;
border: 1px solid #DDD;
border-radius: 4px;
background: white;
color: #666;
cursor: pointer;
font-weight: 400;
-webkit-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
font-family: inherit;
}
.cat-pill:hover { border-color: #C4A35A; color: #0F1B2D; }
.cat-pill.active {
background: #FFF8EB;
border-color: #C4A35A;
color: #0F1B2D;
font-weight: 600;
}
/* === Tab button (Mac top nav) === */
.tab-btn {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: #888;
cursor: pointer;
font-family: inherit;
-webkit-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
}
.tab-btn:hover { color: #0F1B2D; }
.tab-btn.active {
color: #0F1B2D;
border-bottom-color: #C4A35A;
}
/* === Activation shell — full-viewport flex container ===
Wrap the .activation-card in this when the form is the only thing on
the page (e.g., Windows frmActivationWeb opened standalone, or Mac's
activation screen when the taskpane has no other content). The card
sits centered both vertically and horizontally; cream canvas breathes
evenly above and below. Without this wrap the card hugs the top of
the viewport, which looks fine on Mac's narrow ~270px taskpane but
awkward on Windows' wider 350-400px WebBrowser pane.
Usage:
*/
.activation-shell {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
/* === Activation form (Mac taskpane license screen) ===
Mirrors the layout used by Website/activation/activation_vba.html so
Mac and Windows activation forms look identical. */
.activation-card {
padding: 18px;
max-width: 340px;
margin: 0 auto;
}
.activation-card h2 {
font-size: 18px;
font-weight: 600;
color: #0F1B2D;
margin-bottom: 8px;
}
.activation-card p {
font-size: 13px;
color: #666;
margin-bottom: 14px;
line-height: 1.5;
}
.activation-card .field-label-small {
font-size: 11px;
color: #888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.activation-card input[type="email"],
.activation-card input[type="text"] {
width: 100%;
padding: 8px 10px;
margin: 4px 0 12px;
border: 1px solid #DDD;
border-radius: 4px;
font-size: 13px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
.activation-card input.key-input {
font-family: 'JetBrains Mono', Consolas, 'SF Mono', Menlo, monospace;
text-transform: uppercase;
}
.activation-card .activate-btn {
width: 100%;
padding: 10px;
background: #0F1B2D;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: inherit;
}
.activation-card .activate-btn:hover { background: #1a2a40; }
.activation-card .lic-status {
font-size: 12px;
margin-top: 10px;
min-height: 18px;
}
.activation-card .lic-status.ok { color: #388E3C; }
.activation-card .lic-status.err { color: #C62828; }
.activation-card hr {
margin: 18px 0;
border: none;
border-top: 1px solid #EEE;
}
.activation-card .trial-link-row {
font-size: 11px;
color: #999;
line-height: 1.5;
}
.activation-card .trial-link-row a {
color: #C4A35A;
text-decoration: none;
}
.activation-card .trial-link-row a:hover { text-decoration: underline; }