/* Button Component System
*
* This file provides standardized button components used across all
* Guided Math Topics pages. DO NOT create custom button styles in
* individual pages - use these shared components for consistency.
*
* Key Components:
* - .btn (base buttons for modals and forms)
* - .sidebar-card (compact card-style action buttons in the sidebar)
*
* To use: Include this file in your page's :
*
*/
/* ========== Base Button Styles ========== */
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--radius-sm);
font-size: var(--text-base);
font-weight: 500;
cursor: pointer;
transition: var(--transition-short);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ========== Button Variants ========== */
/* Primary button - main actions */
.btn-primary {
background: var(--color-primary);
color: white;
border: 2px solid var(--color-primary);
}
.btn-primary:hover:not(:disabled) {
background: #45a049;
border-color: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
/* Secondary button - alternative actions */
.btn-secondary {
background: var(--gray-500);
color: white;
border: 2px solid var(--gray-500);
}
.btn-secondary:hover:not(:disabled) {
background: #5a6268;
border-color: #5a6268;
}
/* Success button - confirmations */
.btn-success,
.btn-true {
background: var(--color-success);
color: white;
border: 2px solid var(--color-success);
padding: 0.75rem 2rem;
font-weight: 600;
min-width: 120px;
}
.btn-success:hover:not(:disabled),
.btn-true:hover:not(:disabled) {
background: #218838;
border-color: #218838;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}
/* Error button - deletions, cancellations */
.btn-error,
.btn-false {
background: var(--color-error);
color: white;
border: 2px solid var(--color-error);
padding: 0.75rem 2rem;
font-weight: 600;
min-width: 120px;
}
.btn-error:hover:not(:disabled),
.btn-false:hover:not(:disabled) {
background: #c82333;
border-color: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}
/* Help button - yellow warning/attention */
.btn-help {
background: #ffc107;
color: #212529;
border: 2px solid #ffc107;
font-weight: 500;
}
.btn-help:hover:not(:disabled) {
background: #ffb300;
border-color: #ffb300;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}
/* Small button modifier */
.btn-sm {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
/* Outline style - light, unobtrusive buttons for utility actions */
.btn-outline {
background: white;
color: var(--gray-500);
border: 1px solid var(--gray-300);
}
.btn-outline:hover:not(:disabled) {
background: var(--gray-100);
border-color: var(--gray-400);
}
/* ========== Sidebar Card Buttons ========== */
/* Sidebar cards use a horizontal layout (icon badge left of text) for
* compact, modern affordance buttons. The icon badge is a 26px colored
* square that auto-scales SVG icons or displays short text.
*
* Usage (via renderAffordances — preferred):
* renderAffordances(container, [
* { key: 'create-formula', handler: () => ... },
* { key: 'graph-formula', handler: () => ... },
* ]);
*
* Manual HTML:
*
*
* Text icon (no SVG):
*
*/
/* Per-category accent — drives hover, active, and focus states */
.sidebar-card.create { --card-accent: var(--color-create); }
.sidebar-card.graph { --card-accent: var(--color-graph); }
.sidebar-card.draw { --card-accent: var(--color-draw); }
.sidebar-card.algebra { --card-accent: var(--color-algebra); }
.sidebar-card.neutral { --card-accent: var(--gray-500); }
.sidebar-card {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.7rem;
border: 2px solid var(--card-border, #e5e7eb);
border-radius: var(--radius-md);
background: linear-gradient(to bottom, #ffffff, #fafafa);
cursor: pointer;
transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, border-color 0.15s ease, background 0.15s ease;
box-shadow: var(--shadow-0), inset 0 1px 0 rgba(255, 255, 255, 0.8);
text-align: left;
font-size: 0.95rem;
font-weight: 500;
color: var(--gray-700);
width: 100%;
}
.sidebar-card:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 55%, var(--gray-300));
background: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 6%, white);
transform: translateY(-2px);
box-shadow: var(--shadow-1);
}
.sidebar-card:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
transition-duration: 0.08s;
box-shadow: var(--shadow-0);
}
.sidebar-card:focus-visible {
outline: 2px solid var(--card-accent, var(--topic-accent, #6366f1));
outline-offset: 2px;
}
.sidebar-card:disabled {
opacity: 0.5;
cursor: not-allowed;
border-style: solid;
border-color: var(--gray-200);
background: var(--gray-50);
color: var(--gray-500);
box-shadow: none;
/* pointer-events: auto allows tooltips to show on disabled buttons */
}
.sidebar-card:disabled .card-icon {
filter: grayscale(80%);
opacity: 0.6;
}
/* Active state for toggle-like sidebar cards — pressed/shaded appearance */
.sidebar-card.active {
background: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 12%, white);
color: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 85%, black);
border-color: var(--card-accent, var(--topic-accent, #6366f1));
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), var(--shadow-0);
transform: translateY(0);
}
.sidebar-card.active:hover {
background: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 16%, white);
transform: translateY(0);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), var(--shadow-0);
}
.sidebar-card.active .card-icon {
background: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 18%, white) !important;
color: var(--card-accent, var(--topic-accent, #6366f1)) !important;
}
.sidebar-card.active .card-label {
color: color-mix(in srgb, var(--card-accent, var(--topic-accent, #6366f1)) 85%, black);
}
/* ========== Card Icon Badge ========== */
.card-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
font-size: 1.15rem;
font-weight: 700;
overflow: hidden;
transition: transform 0.15s ease;
}
.sidebar-card:hover:not(:disabled) .card-icon {
transform: scale(1.05);
}
/* Scale SVGs inside the icon badge */
.card-icon svg {
width: 26px;
height: 26px;
}
/* ========== Standard Category Badge Colors ========== */
.sidebar-card.create .card-icon {
background: var(--badge-create-bg);
color: var(--badge-create-fg);
}
.sidebar-card.graph .card-icon {
background: var(--badge-graph-bg);
color: var(--badge-graph-fg);
}
.sidebar-card.draw .card-icon {
background: var(--badge-draw-bg);
color: var(--badge-draw-fg);
}
.sidebar-card.algebra .card-icon {
background: var(--badge-algebra-bg);
color: var(--badge-algebra-fg);
}
.sidebar-card.neutral .card-icon {
background: var(--badge-neutral-bg);
color: var(--badge-neutral-fg);
}
/* ========== Category-Tinted Card Backgrounds ========== */
/* Each card gets a faint tint matching its icon color category */
.sidebar-card.create {
background: color-mix(in srgb, var(--badge-create-bg) 50%, white);
border-color: color-mix(in srgb, var(--badge-create-fg) 22%, var(--gray-200));
}
.sidebar-card.graph {
background: color-mix(in srgb, var(--badge-graph-bg) 50%, white);
border-color: color-mix(in srgb, var(--badge-graph-fg) 22%, var(--gray-200));
}
.sidebar-card.draw {
background: color-mix(in srgb, var(--badge-draw-bg) 50%, white);
border-color: color-mix(in srgb, var(--badge-draw-fg) 22%, var(--gray-200));
}
.sidebar-card.algebra {
background: color-mix(in srgb, var(--badge-algebra-bg) 50%, white);
border-color: color-mix(in srgb, var(--badge-algebra-fg) 22%, var(--gray-200));
}
.sidebar-card.neutral {
background: color-mix(in srgb, var(--badge-neutral-bg) 50%, white);
border-color: color-mix(in srgb, var(--badge-neutral-fg) 12%, var(--gray-200));
}
/* ========== Card Label ========== */
.card-label {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
line-height: 1.3;
}
.card-desc {
font-size: 0.75rem;
color: var(--gray-400);
font-weight: 400;
line-height: 1.3;
margin-top: 0.1rem;
}
/* ========== Sidebar Utilities ========== */
/* Section label above a group of cards */
.sidebar-group-label {
font-size: 0.65rem;
font-weight: var(--font-weight-bold);
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.4rem 0.2rem 0.15rem;
}
/* Thin horizontal separator between card groups */
.sidebar-divider {
height: 1px;
background: var(--gray-200);
margin: 0.4rem 0;
}
/* Row of small action buttons (Undo / Reset) below cards */
.sidebar-action-row {
display: flex;
gap: 0.4rem;
margin-top: 0.3rem;
}
.sidebar-action-btn {
flex: 1;
padding: 0.4rem 0.4rem;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: var(--gray-50);
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
color: var(--gray-700);
transition: all 0.15s;
}
.sidebar-action-btn:hover { background: var(--gray-200); }
.sidebar-action-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sidebar-action-btn.reset-btn { color: #dc2626; border-color: #fca5a5; }
.sidebar-action-btn.reset-btn:hover { background: #fee2e2; }
/* ========== Sidebar Toast (non-blocking notification) ========== */
.sidebar-toast {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: auto;
max-width: 180px;
padding: 0.5rem 0.65rem;
background: linear-gradient(to bottom, #f59e0b, #d97706);
color: white;
font-size: 0.8rem;
font-weight: 500;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 100;
opacity: 0;
transform: translateX(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
text-align: center;
line-height: 1.3;
}
.sidebar-toast.visible {
opacity: 1;
transform: translateX(0);
}
.sidebar-toast.fade-out {
opacity: 0;
transform: translateX(5px);
}
/* ========== Share Link Button ========== */
.share-link-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.65rem;
border: 1px solid var(--gray-300);
border-radius: 6px;
background: white;
font-size: 0.8rem;
font-weight: 500;
color: var(--gray-700);
cursor: pointer;
transition: all 0.15s ease;
}
.share-link-btn:hover {
background: var(--gray-100);
border-color: var(--gray-400);
}
.share-link-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.share-link-btn-label {
white-space: nowrap;
}
/* Feedback states */
.share-link-btn--success {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.share-link-btn--warning {
background: #fef3c7;
border-color: #fcd34d;
color: #92400e;
}
.share-link-btn--error {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
/* Share button group */
.share-btn-group {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-right: 0.5rem;
}
/* Header share button — hidden for now; replaced by Assign button.
To restore, remove the display:none rule below. */
.header-share-btn {
display: none !important;
}
/* Original share button accent styles (preserved for future use) */
/*
.header-share-btn {
background: color-mix(in srgb, var(--topic-accent, #3b82f6) 8%, white);
border-color: color-mix(in srgb, var(--topic-accent, #3b82f6) 25%, transparent);
color: color-mix(in srgb, var(--topic-accent, #3b82f6) 85%, #1e293b);
}
.header-share-btn:hover {
background: color-mix(in srgb, var(--topic-accent, #3b82f6) 14%, white);
border-color: color-mix(in srgb, var(--topic-accent, #3b82f6) 40%, transparent);
}
*/
/* Assign button — links back to index details page */
.header-assign-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
color: #fff;
background: var(--color-create, #4CAF50);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.header-assign-btn:hover {
background: #3d9142;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.header-assign-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Google Classroom share button */
.share-gc-btn {
padding: 0.4rem 0.55rem;
}
.share-gc-btn svg {
width: 16px;
height: 16px;
}
/* Share Link Display (for modals/popups) */
.share-link-display {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
.share-link-display-input {
flex: 1;
padding: 0.5rem 0.75rem;
border: 1px solid var(--gray-300);
border-radius: 6px;
font-size: 0.85rem;
font-family: monospace;
background: var(--gray-50);
color: var(--gray-700);
}
.share-link-display-input:focus {
outline: none;
border-color: #6366f1;
}
.share-link-display-copy {
padding: 0.5rem 1rem;
border: 1px solid #6366f1;
border-radius: 6px;
background: #6366f1;
color: white;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.share-link-display-copy:hover {
background: #4f46e5;
}
/* ========== Card Enable Pulse Animation ========== */
@keyframes cardEnablePulse {
0% { transform: scale(1); }
50% { transform: scale(1.03); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
100% { transform: scale(1); }
}
.sidebar-card.card-enable-pulse {
animation: cardEnablePulse 0.3s ease;
}
/* ========== Dark Sidebar Mode ========== */
.sidebar.sidebar-dark {
background: #1e1e2e;
border-right-color: rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-2);
}
.sidebar.sidebar-dark .sidebar-card {
background: #2a2a3a;
border-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
}
.sidebar.sidebar-dark .sidebar-card:hover:not(:disabled) {
background: #353548;
border-color: color-mix(in srgb, var(--topic-accent, #6366f1) 50%, transparent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.sidebar.sidebar-dark .sidebar-card:disabled {
background: #22222e;
border-color: rgba(255, 255, 255, 0.05);
opacity: 0.45;
}
.sidebar.sidebar-dark .sidebar-card:disabled .card-icon {
filter: grayscale(60%);
opacity: 0.5;
}
.sidebar.sidebar-dark .card-label {
color: rgba(255, 255, 255, 0.85);
}
.sidebar.sidebar-dark .card-desc {
color: rgba(255, 255, 255, 0.4);
}
.sidebar.sidebar-dark .sidebar-group-label {
color: rgba(255, 255, 255, 0.35);
}
.sidebar.sidebar-dark .sidebar-divider {
background: rgba(255, 255, 255, 0.08);
}
.sidebar.sidebar-dark .sidebar-action-btn {
background: #2a2a3a;
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
.sidebar.sidebar-dark .sidebar-action-btn:hover {
background: #353548;
}
.sidebar.sidebar-dark .sidebar-action-btn.reset-btn {
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
}
.sidebar.sidebar-dark .sidebar-action-btn.reset-btn:hover {
background: rgba(248, 113, 113, 0.1);
}
/* Active card in dark mode */
.sidebar.sidebar-dark .sidebar-card.active {
background: linear-gradient(to bottom, #3a6db5, #4a85d4);
border-color: #2d6cb3;
}
.sidebar.sidebar-dark .sidebar-card.active .card-label {
color: white;
}
.sidebar.sidebar-dark .sidebar-card.active .card-icon {
background: rgba(255, 255, 255, 0.25) !important;
color: white !important;
}
/* Sidebar toast in dark mode */
.sidebar.sidebar-dark .sidebar-toast {
background: linear-gradient(to bottom, #d97706, #b45309);
}
/* ========== "What's next?" help button (GRA-218) ========== */
.sidebar-whats-next {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
margin-top: 8px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #4ade80, #22c55e);
color: white;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease, transform 0.15s ease;
}
.sidebar-whats-next.visible { opacity: 1; }
.sidebar-whats-next:hover { transform: scale(1.03); }
.sidebar-whats-next:active { transform: scale(0.97); }
.whats-next-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
font-weight: 700;
font-size: 0.85rem;
}