/* ================================================================
JHACAL SHARED UI — Master Component Stylesheet
"Just Having A Crack At Life"
This file is the single source of truth for reusable UI
components shared across all JHACAL AAC applications.
Included components:
1. Mute Button (speaker SVG, green/red border states)
2. Tutorial Button (gold ?, consistent across all apps)
3. Typography scale (clamp-based, mobile-first)
Usage: link AFTER jhacal-ios-compat.css, BEFORE any app CSS.
================================================================ */
/* ----------------------------------------------------------------
1. MUTE BUTTON
----------------------------------------------------------------
Apply class "jhacal-mute-btn" to any mute button element.
Add a child for the icon.
Toggle class "muted" on the button to switch state.
States:
default — green border, speaker icon = sound is ON
.muted — red border, diagonal strikethrough = sound is OFF
Sizes (add one):
.mute-sm 32×32px
.mute-md 40×40px ← default recommended
.mute-lg 52×52px
---------------------------------------------------------------- */
.jhacal-mute-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
touch-action: manipulation;
user-select: none;
background: transparent;
padding: 0;
border: 2px solid #4ade80; /* green = sound on */
border-radius: 8px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jhacal-mute-btn:hover {
box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}
/* Speaker SVG icon via CSS mask so it inherits currentColor */
.jhacal-mute-btn .jhacal-mute-ico {
display: block;
width: 1.4em;
height: 1.4em;
background-color: #e5e7eb;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
position: relative;
}
/* Muted state: red border */
.jhacal-mute-btn.muted {
border-color: #f87171;
}
.jhacal-mute-btn.muted:hover {
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}
/* Diagonal strikethrough overlaid on the icon when muted */
.jhacal-mute-btn.muted .jhacal-mute-ico::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 130%;
height: 2px;
background: #f87171;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 1px;
pointer-events: none;
}
/* Size variants */
.jhacal-mute-btn.mute-sm { min-width: 32px; min-height: 32px !important; border-radius: 6px; }
.jhacal-mute-btn.mute-sm .jhacal-mute-ico { width: 1.1em; height: 1.1em; }
.jhacal-mute-btn.mute-md { min-width: 40px; min-height: 40px; border-radius: 8px; }
.jhacal-mute-btn.mute-md .jhacal-mute-ico { width: 1.4em; height: 1.4em; }
.jhacal-mute-btn.mute-lg { min-width: 52px; min-height: 52px; border-radius: 10px; }
.jhacal-mute-btn.mute-lg .jhacal-mute-ico { width: 1.8em; height: 1.8em; }
/* ----------------------------------------------------------------
2. TUTORIAL / HELP BUTTON
----------------------------------------------------------------
Apply class "jhacal-tutorial-btn" to any tutorial/help button.
No other classes or inline styles needed.
Standard appearance: gold ? symbol, subtle gold border.
Hover: gold glow ring.
---------------------------------------------------------------- */
.jhacal-tutorial-btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* Typography */
font-size: 1rem;
font-weight: 900;
line-height: 1;
color: #f6c177; /* jhacal-gold */
/* Visual */
background: transparent;
border: 2px solid rgba(246, 193, 119, 0.4);
border-radius: 8px;
/* Size — matches mute-md */
min-width: 40px;
min-height: 40px;
padding: 0 10px;
/* Interaction */
cursor: pointer;
touch-action: manipulation;
user-select: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jhacal-tutorial-btn:hover {
border-color: rgba(246, 193, 119, 0.75);
box-shadow: 0 0 0 2px rgba(246, 193, 119, 0.2);
}
.jhacal-tutorial-btn:active {
border-color: #f6c177;
}
/* Minimised / floating variant — used after tutorial is dismissed */
.jhacal-tutorial-btn.tutor-minimized {
position: fixed;
bottom: 80px;
right: 12px;
z-index: 1000;
min-width: 36px;
min-height: 36px;
padding: 0 8px;
font-size: 0.9rem;
border-radius: 50%;
background: rgba(30, 35, 40, 0.9);
border-color: rgba(246, 193, 119, 0.5);
}
/* ----------------------------------------------------------------
3. ORIGIN BUTTON
----------------------------------------------------------------
Apply class "jhacal-origin-btn" to the return-to-launcher button.
Icon-only (return arrow SVG), no label text.
Tooltip via title attribute: "Return to launch page".
Appearance: square icon button, gold tinted border.
Position: determined by each app's existing header layout.
---------------------------------------------------------------- */
.jhacal-origin-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
color: #f6c177; /* jhacal-gold */
/* Visual */
background: rgba(246, 193, 119, 0.10) !important;
border: 1px solid rgba(246, 193, 119, 0.40) !important;
border-radius: 8px;
/* Size — square, same height as tutorial btn */
width: 34px;
height: 34px;
min-width: 34px;
padding: 0;
/* Interaction */
cursor: pointer;
touch-action: manipulation;
user-select: none;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
vertical-align: middle;
flex-shrink: 0;
}
.jhacal-origin-btn svg {
flex-shrink: 0;
display: block;
width: 15px;
height: 15px;
}
.jhacal-origin-btn:hover {
background: rgba(246, 193, 119, 0.18) !important;
border-color: rgba(246, 193, 119, 0.65) !important;
box-shadow: 0 0 0 2px rgba(246, 193, 119, 0.15);
}
.jhacal-origin-btn:active {
background: rgba(246, 193, 119, 0.25) !important;
border-color: #f6c177 !important;
}
/* ----------------------------------------------------------------
4. HEADER ICON BUTTON (jhacal-icon-btn)
----------------------------------------------------------------
Square 44×44 px utility button for header toolbars.
Rounded corners, orange border — JHACAL brand style.
Use this class on all header utility buttons (settings ⚙️,
tutorial ?, edit ✏️, etc.) across every app.
Tooltip shown on hover via data-tooltip attribute.
Usage:
Colour modifiers (add one):
.jib-gold — orange/gold fill (tutorial ?)
.jib-red — red fill (edit mode, delete)
.jib-green — green fill (active/on state)
---------------------------------------------------------------- */
.jhacal-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-height: 44px !important;
border-radius: 10px;
border: 1px solid rgba(245, 166, 35, 0.50); /* JHACAL brand orange — accent2 */
background: rgba(60, 70, 80, 0.35);
color: #e5e7eb;
font-size: 1.25rem;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
touch-action: manipulation;
user-select: none;
position: relative;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.jhacal-icon-btn:hover {
background: rgba(80, 92, 105, 0.55);
border-color: rgba(245, 166, 35, 0.85);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.jhacal-icon-btn:active {
transform: translateY(0);
box-shadow: none;
border-color: #f5a623;
}
/* Colour modifiers */
.jhacal-icon-btn.jib-gold {
background: rgba(255, 152, 0, 0.15);
border-color: rgba(255, 152, 0, 0.75);
color: #ffb74d;
font-weight: 800;
}
.jhacal-icon-btn.jib-gold:hover {
background: rgba(255, 152, 0, 0.28);
border-color: #ff9800;
box-shadow: 0 4px 12px rgba(255,152,0,0.3);
}
.jhacal-icon-btn.jib-red {
background: rgba(220, 53, 69, 0.15);
border-color: rgba(220, 53, 69, 0.75);
color: #f87171;
}
.jhacal-icon-btn.jib-red:hover {
background: rgba(220, 53, 69, 0.28);
border-color: #dc3545;
box-shadow: 0 4px 12px rgba(220,53,69,0.3);
}
.jhacal-icon-btn.jib-green {
background: rgba(43, 208, 139, 0.12);
border-color: rgba(43, 208, 139, 0.60);
color: #4ade80;
}
.jhacal-icon-btn.jib-green:hover {
background: rgba(43, 208, 139, 0.22);
border-color: #2bd08b;
box-shadow: 0 4px 12px rgba(43,208,139,0.25);
}
/* Tooltip via data-tooltip attribute */
.jhacal-icon-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.92);
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s;
z-index: 2000;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
letter-spacing: 0.01em;
}
.jhacal-icon-btn:hover::after {
opacity: 1;
}
/* Prevent overflow off screen right edge */
.jhacal-icon-btn:last-child::after,
.jhacal-icon-btn.jib-tooltip-left::after {
left: auto;
right: 0;
transform: none;
}
/* Show tooltip below button (for top-of-screen headers where above would be clipped) */
.jhacal-icon-btn.jib-tooltip-below::after {
bottom: auto;
top: calc(100% + 8px);
}
/* ----------------------------------------------------------------
5. TYPOGRAPHY SCALE
----------------------------------------------------------------
Fluid type using clamp(). Apply as utility classes or use
the CSS custom properties directly in app stylesheets.
All values scale gracefully from 320px to 1280px viewport.
---------------------------------------------------------------- */
:root {
/* Fluid type scale — safe to override per-app */
--jhacal-text-xs: clamp(0.68rem, 1.8vw, 0.75rem); /* ~11–12px */
--jhacal-text-sm: clamp(0.80rem, 2.2vw, 0.88rem); /* ~13–14px */
--jhacal-text-base: clamp(0.94rem, 2.5vw, 1.00rem); /* ~15–16px */
--jhacal-text-md: clamp(1.00rem, 2.8vw, 1.14rem); /* ~16–18px */
--jhacal-text-lg: clamp(1.10rem, 3.2vw, 1.30rem); /* ~18–21px */
--jhacal-text-xl: clamp(1.25rem, 4.0vw, 1.60rem); /* ~20–26px */
--jhacal-text-2xl: clamp(1.50rem, 5.0vw, 2.00rem); /* ~24–32px */
--jhacal-text-3xl: clamp(1.80rem, 6.0vw, 2.50rem); /* ~29–40px */
}
/* Utility classes — optional, use in markup for quick sizing */
.jhacal-text-xs { font-size: var(--jhacal-text-xs); }
.jhacal-text-sm { font-size: var(--jhacal-text-sm); }
.jhacal-text-base { font-size: var(--jhacal-text-base); }
.jhacal-text-md { font-size: var(--jhacal-text-md); }
.jhacal-text-lg { font-size: var(--jhacal-text-lg); }
.jhacal-text-xl { font-size: var(--jhacal-text-xl); }
.jhacal-text-2xl { font-size: var(--jhacal-text-2xl); }
.jhacal-text-3xl { font-size: var(--jhacal-text-3xl); }
/* ----------------------------------------------------------------
6. CSS MASK ICONS (jhacal-ico)
----------------------------------------------------------------
Monochrome SVG icons rendered via CSS mask — colour inherits
from the parent button's `color` property (currentColor).
Defined once here; consistent across every platform and browser
regardless of OS emoji rendering differences.
Usage inside a jhacal-icon-btn:
Icons:
.jhacal-ico--edit pencil, tip at bottom-left (edit mode)
.jhacal-ico--next right chevron (page-forward)
---------------------------------------------------------------- */
.jhacal-ico {
display: inline-block;
width: 1.2em;
height: 1.2em;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
pointer-events: none;
}
/* Pencil — Material Design edit path, tip pointing to bottom-left */
.jhacal-ico--edit {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3Cpath d='M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3Cpath d='M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
/* Right chevron — page-forward / next navigation */
.jhacal-ico--next {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
}