Notes:
- overflow:hidden is intentional — rounded corners clip children cleanly.
- margin-bottom keeps cards separated vertically inside a column.
═══════════════════════════════════════════════════════════════════════════ */
.pig-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
border: 1px solid #b8c9e4;
margin-bottom: 20px;
overflow: hidden;
}
/* Uppercase label bar at the top of a card */
.pig-card-header {
padding: 11px 18px;
border-bottom: 2px solid #b8c9e4;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .6px;
color: #0f1f3d;
background: #f5f8fc;
}
/* Icon inside a card header — automatically colored accent blue */
.pig-card-header i {
margin-right: 7px;
font-size: 16px;
color: #03a9f4;
}
/* Info alert box used in feature config partials and the Configurations/Notifications tabs.
Owns font-size and padding so inline styles are not needed — mobile override lives below. */
.pig-info-alert {
font-size: 12px;
padding: 8px 12px;
}
.pig-card-body {
padding: 4px 18px 8px;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. FIELDS
Label + value rows for displaying read-only data inside a .pig-card-body.
An optional hint line can appear below the value for extra guidance.
HTML structure (generated by the field() JS helper):
Email
user@example.com
Helper text shown below the value.
Tips:
- .pig-field-label has a fixed 140px width so all values line up.
- flex-wrap:wrap on .pig-field lets the hint drop to its own full-width line.
- The last .pig-field in a card has no bottom border (see :last-child rule).
═══════════════════════════════════════════════════════════════════════════ */
.pig-field {
display: flex;
align-items: baseline;
flex-wrap: wrap;
padding: 9px 0;
border-bottom: 1px solid #f2f4f7;
font-size: 13px;
}
.pig-field:last-child {
border-bottom: none;
}
.pig-field-label {
width: 140px;
flex-shrink: 0;
color: #555;
font-weight: 500;
font-size: 12px;
}
/* Icon inside field label — fixed width keeps values aligned */
.pig-field-label i {
width: 16px;
text-align: center;
margin-right: 6px;
color: #888;
}
.pig-field-value {
flex: 1;
color: #333;
word-break: break-word;
}
/* Hint line — sits below the label+value row, full width, small muted text */
.pig-field-hint {
flex-basis: 100%;
font-size: 11px;
color: #6b7280;
margin-top: 3px;
line-height: 1.4;
}
/* ═══════════════════════════════════════════════════════════════════════════
4. BADGES & TAGS
Small pill badges for status, boolean values, roles, etc.
Badge variants:
.pig-badge-green — Active / Yes / Allowed
.pig-badge-yellow — Pending / No / Warning
.pig-badge-red — Disabled / Error
.pig-badge-gray — Neutral / Not Set
HTML:
Active
Role tags (for listing assigned roles):
Administrator
═══════════════════════════════════════════════════════════════════════════ */
.pig-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
text-transform: uppercase;
}
.pig-badge-green { background: #e6f4ea; color: #1e7e34; }
.pig-badge-gray { background: #f1f3f4; color: #6c757d; }
.pig-badge-yellow { background: #fff3cd; color: #856404; }
.pig-badge-red { background: #fce8e6; color: #c5221f; }
/* Role tag — light blue, used in the Roles card */
.pig-role-tag {
display: inline-block;
padding: 3px 11px;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
background: #e1f5fe;
color: #0277bd;
margin: 3px 4px 3px 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
5. SEGMENTED TABS
A rounded pill container that wraps Bootstrap's .nav-tabs. The active tab
lifts out with a white card + shadow, giving a native segmented-control look.
HTML structure (place inside a Bootstrap tab setup):
Note: Add the Bootstrap .nav class alongside .pig-tabs so Bootstrap's
tab switching JS still works. The CSS below resets Bootstrap's default
borders and floats, then layers the pill design on top.
═══════════════════════════════════════════════════════════════════════════ */
.pig-tabs {
display: inline-flex !important;
border-bottom: none !important;
background: #e9eef5;
border-radius: 12px;
padding: 4px;
gap: 3px;
margin-bottom: 0;
}
/* Short label shown only on mobile, full label hidden on mobile — swap via media query below */
.pig-tab-short { display: none; }
/* Reset Bootstrap's float-based layout */
.pig-tabs > .pig-tab {
float: none !important;
margin-bottom: 0 !important;
}
.pig-tabs > .pig-tab > a {
border: none !important;
border-radius: 9px !important;
padding: 9px 29px;
color: #6b7280;
font-weight: 500;
font-size: 13px;
margin: 0 !important;
transition: background .2s, color .2s, box-shadow .2s;
line-height: 1.5;
}
.pig-tabs > .pig-tab > a i {
margin-right: 7px;
font-size: 16px;
color: #03a9f4;
}
.pig-tabs > .pig-tab > a:hover {
background: rgba(255, 255, 255, .55) !important;
color: #374151;
border: none !important;
}
/* Active tab: white card lifts out of the gray container */
.pig-tabs > .pig-tab.active > a,
.pig-tabs > .pig-tab.active > a:hover,
.pig-tabs > .pig-tab.active > a:focus {
background: #fff !important;
color: #0288d1 !important;
font-weight: 600;
border: none !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. TOGGLE SWITCH
A styled checkbox that looks like an iOS/Android on-off toggle.
Used in the Notifications tab for per-department SMS/email toggles.
HTML structure:
The input is hidden (opacity:0) and the acts as the visual track.
The white circle is the ::before pseudo-element that slides right on :checked.
═══════════════════════════════════════════════════════════════════════════ */
.pig-toggle {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
margin: 0;
vertical-align: middle;
cursor: pointer;
}
.pig-toggle input {
opacity: 0;
width: 0;
height: 0;
}
/* Track — gray when off, blue when on */
.pig-toggle-slider {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #d1d5db;
border-radius: 22px;
transition: background .2s;
}
/* White knob */
.pig-toggle-slider:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pig-toggle input:checked + .pig-toggle-slider {
background: #2563eb;
}
/* Slide the knob 18px to the right when checked */
.pig-toggle input:checked + .pig-toggle-slider:before {
transform: translateX(18px);
}
/* ═══════════════════════════════════════════════════════════════════════════
7. TABLE
A clean, compact data table. Use .pig-table on a
element.
Pairs well with a .pig-card wrapper.
HTML structure:
Department
Text
Email
Produce
...
...
═══════════════════════════════════════════════════════════════════════════ */
.pig-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: #6b7280;
font-weight: 600;
padding: 10px 14px;
border-bottom: 2px solid #e2e8f0;
background: #f3f4f6;
}
.pig-table td {
padding: 12px 14px;
vertical-align: middle;
font-size: 13px;
color: #374151;
border-bottom: 1px solid #f2f4f7;
}
.pig-table tbody tr:last-child td {
border-bottom: none;
}
.pig-table tbody tr:hover td {
background: #f8fafc;
}
/* ═══════════════════════════════════════════════════════════════════════════
8. LOADING STATE
Centered spinner + message shown while AJAX data loads.
Hide it and show the real content in the AJAX .done() callback.
HTML:
Loading...
═══════════════════════════════════════════════════════════════════════════ */
.pig-loading {
padding: 60px 0;
color: #bbb;
font-size: 13px;
text-align: center;
}
.pig-loading i {
display: block;
font-size: 30px;
margin-bottom: 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════
9. FEATURE EXPLORER (master-detail layout)
A two-column panel: a scrollable list on the left and a detail panel on
the right. Clicking a list item shows its detail view.
HTML structure:
Notifications
Select an item
On desktop: both columns display side-by-side (see @media min-width:768px).
On mobile: list shows first; detail replaces list (JS swaps display:none).
═══════════════════════════════════════════════════════════════════════════ */
/* Scrollable list — 400px cap on mobile; overridden to auto on desktop */
.pig-explorer-list {
list-style: none;
margin: 0;
padding: 0;
height: 400px;
overflow-y: auto;
}
.pig-explorer-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-bottom: 1px solid #f2f4f7;
cursor: pointer;
transition: background .15s;
border-left: 3px solid transparent;
}
.pig-explorer-item:last-child {
border-bottom: none;
}
.pig-explorer-item:hover {
background: #f8fafc;
}
/* Active item: blue left border + light blue background */
.pig-explorer-item.active {
background: #e1f5fe;
border-left-color: #03a9f4;
}
.pig-explorer-item.active .pig-explorer-name {
color: #0288d1;
font-weight: 600;
}
/* Small rounded icon square */
.pig-explorer-icon {
width: 34px;
height: 34px;
border-radius: 8px;
background: #e1f5fe;
color: #03a9f4;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.pig-explorer-name {
font-size: 13px;
font-weight: 500;
color: #0f1f3d;
flex: 1;
}
/* Right-hand detail panel — left border separates it from the list */
.pig-explorer-panel {
border-left: 1px solid #e2e8f0;
min-height: 200px;
}
/* Empty state — shown before the user selects an item */
.pig-explorer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
color: #9ca3af;
font-size: 13px;
text-align: center;
}
.pig-explorer-empty i {
font-size: 32px;
margin-bottom: 10px;
color: #d1d5db;
}
/* ═══════════════════════════════════════════════════════════════════════════
10. BUTTONS & DROPDOWNS
pig-dropdown-btn — the "Actions ▾" trigger button on detail page headers.
pig-choice-btn — full-width choice button inside multi-step dialogs
(e.g. "Update phone" vs "Remove phone").
#btn-add-config — green "Add Feature" button (scoped to config tab).
═══════════════════════════════════════════════════════════════════════════ */
/* Admin actions dropdown trigger */
.pig-dropdown-btn {
border-radius: 20px;
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
background: #fff;
border: 1px solid #b8c9e4;
color: #1e293b;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
transition: background .15s, box-shadow .15s;
}
.pig-dropdown-btn:hover,
.pig-dropdown-btn:focus {
background: #e1f5fe;
border-color: #03a9f4;
color: #0288d1;
box-shadow: 0 2px 10px rgba(99, 102, 241, .18);
outline: none;
}
/* Admin actions dropdown menu item hover */
.pig-context-menu li > a:hover {
background: #e1f5fe;
color: #0288d1 !important;
}
.pig-context-menu li > a:hover i {
color: #0288d1 !important;
}
/* Step-choice buttons in multi-step dialogs */
.pig-choice-btn {
display: block;
width: 100%;
padding: 14px 10px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #1e293b;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
text-align: center;
}
.pig-choice-btn:hover {
background: #e1f5fe;
border-color: #03a9f4;
color: #0288d1;
box-shadow: 0 2px 8px rgba(99, 102, 241, .12);
}
/* Add Feature button — green pill with subtle shadow */
#btn-add-config {
border-radius: 20px;
padding: 8px 20px;
font-weight: 600;
font-size: 13px;
box-shadow: 0 2px 8px rgba(40, 167, 69, .25);
border: none;
letter-spacing: .2px;
}
#btn-add-config:hover {
box-shadow: 0 4px 12px rgba(40, 167, 69, .35);
}
/* ═══════════════════════════════════════════════════════════════════════════
11. EQUAL-HEIGHT ROWS
Apply .pig-equal-height to a Bootstrap .row to make all cards in that row
stretch to the same height on desktop. On mobile they stack normally.
HTML:
...
...
How it works: flex on the row + float:none + flex-direction:column on
each column + flex:1 on the .pig-card inside makes all cards fill the
tallest column's height.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
.pig-equal-height {
display: flex;
}
.pig-equal-height > [class*="col-"] {
float: none;
display: flex;
flex-direction: column;
}
.pig-equal-height > [class*="col-"] > .pig-card {
flex: 1;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
12. RESPONSIVE — MOBILE (max-width: 767px)
Reduce font sizes, padding, and icon sizes for smaller screens.
These rules are additive overrides of the base styles above.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Header */
.pig-header {
flex-wrap: wrap;
padding: 12px 14px;
gap: 10px;
}
.pig-header-name { font-size: 13px; }
.pig-header-username { font-size: 11px; }
#user-status-badge .pig-badge,
#user-classification-badge .pig-badge {
font-size: 9px;
padding: 1px 7px;
}
.pig-header-inner { flex-wrap: wrap; }
/* Field labels narrower on mobile */
.pig-field-label {
width: 100px;
font-size: 11px;
}
/* Actions row wraps to its own line */
.pig-header-actions {
flex-basis: 100%;
text-align: left;
}
.pig-header-actions .pig-dropdown-btn {
font-size: 11px;
padding: 4px 10px;
}
/* Tab actions */
.pig-tab-actions .btn {
font-size: 11px !important;
padding: 4px 10px !important;
}
/* Info alert boxes in feature config partials */
.pig-info-alert {
font-size: 11px;
padding: 6px 10px;
}
/* Feature detail save button - matches .pig-tab-actions .btn sizing */
.pig-save-btn {
padding: 4px 10px !important;
font-size: 11px !important;
}
/* Segmented tabs — compact on mobile */
.pig-tabs > .pig-tab > a {
padding: 5px 9px !important;
font-size: 10px !important;
}
.pig-tabs > .pig-tab > a i {
font-size: 11px !important;
margin-right: 4px !important;
}
/* Swap long/short tab labels on mobile */
.pig-tab-full { display: none; }
.pig-tab-short { display: inline; }
/* Cards */
.pig-card-header { font-size: 11px; padding: 9px 14px; }
.pig-card-header i { font-size: 13px; }
/* Choice buttons */
.pig-choice-btn { font-size: 12px; padding: 10px 8px; }
/* Role tags */
.pig-role-tag { font-size: 10px; padding: 2px 8px; }
/* Feature explorer list items */
.pig-explorer-item { padding: 10px 12px; gap: 8px; }
.pig-explorer-icon { width: 28px; height: 28px; font-size: 13px; }
.pig-explorer-name { font-size: 12px; }
/* Explorer: single-column on mobile — list shows first, detail replaces it */
.pig-explorer-panel {
border-left: none;
border-top: none;
margin-top: 0;
padding-top: 0;
}
.pig-explorer-col-list,
.pig-explorer-col-detail {
display: block;
width: 100%;
padding: 0;
}
.pig-explorer-col-detail { display: none; }
/* Allow list to grow freely on mobile */
.pig-explorer-list {
height: auto;
overflow-y: visible;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
13. RESPONSIVE — DESKTOP (min-width: 768px)
Feature Explorer: make list+detail columns fill the card height so the
right panel scrolls independently from the left list.
Height is set dynamically by resizeConfigPanel() in JS.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* Card height set via JS — enable overflow clipping */
#config-content .pig-card {
overflow: hidden;
}
/* Inner row fills the card height */
#config-content .pig-card > .row {
display: flex;
height: 100%;
margin: 0;
}
/* Both columns scroll independently instead of floating */
.pig-explorer-col-list,
.pig-explorer-col-detail {
float: none;
overflow-y: auto;
height: 100%;
}
/* Unlock the list's fixed 400px cap so the column scroll handles it */
.pig-explorer-col-list .pig-explorer-list {
height: auto;
overflow-y: visible;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
14. POPUP / DIALOG STYLES
Custom overrides for the jQuery Confirm (.jconfirm) library and the
JSON viewer used in the Registration Details popup.
The popup is triggered with:
$.confirm({ customClass: 'reg-details-popup', ... })
The JSON viewer is initialised in the onOpen callback:
$('#json-viewer-container').jsonViewer(parsed, { collapsed: false });
═══════════════════════════════════════════════════════════════════════════ */
/* Popup box — rounded, accent-bordered, elevated shadow */
.jconfirm.reg-details-popup .jconfirm-box {
border-radius: 12px !important;
border-top: 4px solid #03a9f4 !important;
box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
padding: 0 !important;
overflow: hidden;
}
/* Title bar */
.jconfirm.reg-details-popup .jconfirm-title-c {
background: #f5f8fc;
border-bottom: 1px solid #e2e8f0;
padding: 14px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #0f1f3d !important;
text-align: center !important;
}
/* Content area */
.jconfirm.reg-details-popup .jconfirm-content-pane {
padding: 16px 20px !important;
}
/* Button bar */
.jconfirm.reg-details-popup .jconfirm-buttons {
background: #f5f8fc;
border-top: 1px solid #e2e8f0;
padding: 10px 16px !important;
}
/* JSON viewer — code block styling */
#json-viewer-container {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px 16px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 13px;
line-height: 1.6;
}
/* Color-code JSON token types to match the pig palette */
#json-viewer-container .json-string { color: #0288d1; }
#json-viewer-container .json-key { color: #0f1f3d; font-weight: 600; }
#json-viewer-container .json-boolean { color: #1e7e34; }
#json-viewer-container .json-null { color: #9ca3af; }
#json-viewer-container .json-number { color: #c5221f; }
/* Hide collapse toggles — viewer always shows fully expanded */
#json-viewer-container .json-toggle,
#json-viewer-container .json-placeholder { display: none !important; }
/* Popup close icon — slightly larger hit area for usability */
.jconfirm-close {
font-size: 22px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
15. FORM INPUTS
Pig-styled text inputs, input+button rows, and custom checkboxes.
These replace Bootstrap's default .form-control appearance with pig palette
colors. Always add both "pig-input" and "form-control" to inputs so
Bootstrap layout utilities (input-group, etc.) still work.
HTML — basic field:
Required
HTML — input + adjacent button (e.g. password with show/hide):