/* ================================================================
MISHKAH STITCH — visual polish for data tables, derived from
the Stitch "Mishkah Modern Learning" designs for:
- coursesmap.php (.m-table.m-courses)
- subject/results.php (.m-table.m-results)
- subject/transscript.php (.m-table.m-transcript)
This file:
- Keeps our existing sl-hdr / sl-sidebar / shell intact.
- Adds no new features (no stats grids, no pagination, no
export buttons, no policy banners) — purely visual upgrade.
- Loads after mishkah-tables.css so it can refine table styling
at desktop widths without breaking the mobile card layout.
================================================================ */
/* ---- DESIGN TOKENS used in this file -------------------------- */
body.sl-injected {
--stitch-primary: #004428;
--stitch-primary-container: #165d3b;
--stitch-primary-fixed: #acf2c5;
--stitch-on-primary-fixed: #002111;
--stitch-secondary: #8a5100;
--stitch-secondary-fixed: #ffdcbd;
--stitch-on-secondary-fixed:#2c1600;
--stitch-surface: #f8f9ff;
--stitch-surface-low: #eff4ff;
--stitch-surface: #f8f9ff;
--stitch-surface-container: #e5eeff;
--stitch-surface-high: #dce9ff;
--stitch-on-surface: #0b1c30;
--stitch-on-surface-variant:#404942;
--stitch-outline: #707971;
--stitch-outline-variant: #bfc9c0;
--stitch-error: #ba1a1a;
}
/* ---- SHARED TABLE STYLE (desktop) -----------------------------
Applied to BOTH explicit `.m-table` and any legacy data table
that has `td.title3` header cells (catches testroom / subjects /
installment / etc — every page on the site for free). */
@media (min-width: 641px) {
body.sl-injected .m-table,
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3) {
background: var(--stitch-surface);
border: 1px solid var(--stitch-outline-variant);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
border-collapse: separate;
border-spacing: 0;
}
/* Header row — soft tint bar with uppercase labels */
body.sl-injected .m-table tr.m-thead > td,
body.sl-injected .m-table > tbody > tr:first-child > td.title3,
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3) > tbody > tr > td.title3 {
background: var(--stitch-surface-container) !important;
color: var(--stitch-on-surface) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
border-bottom: 1px solid var(--stitch-outline-variant) !important;
}
/* Subject-name column (always the 2nd column in our 3 tables)
reads as a clickable-feeling green primary text. */
body.sl-injected .m-table > tbody > tr > td:nth-child(2) {
color: var(--stitch-primary) !important;
font-weight: 600 !important;
}
/* All data rows — clean cells, no hover side-effects */
body.sl-injected .m-table > tbody > tr > td,
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3) > tbody > tr > td:not(.title3) {
padding: 14px 16px !important;
border-bottom: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 40%, transparent) !important;
}
body.sl-injected .m-table > tbody > tr:last-child > td { border-bottom: none !important; }
/* Kill the legacy zebra bgcolor */
body.sl-injected .m-table > tbody > tr[bgcolor],
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3) > tbody > tr[bgcolor] {
background: transparent !important;
}
body.sl-injected .m-table > tbody > tr > td[bgcolor],
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3) > tbody > tr > td[bgcolor] {
background: transparent !important;
}
/* Add subtle alternating background via nth-child for cleaner
legibility on long lists */
body.sl-injected .m-table > tbody > tr:nth-child(even) > td {
background: var(--stitch-surface-low) !important;
}
/* Don't stripe the header row */
body.sl-injected .m-table > tbody > tr.m-thead:nth-child(even) > td,
body.sl-injected .m-table > tbody > tr:first-child:nth-child(even) > td {
background: var(--stitch-surface-container) !important;
}
}
/* ---- Mobile-first: any data table inside .sl-content-card gets
horizontal-scroll on phones so it never breaks the page width.
Tables explicitly marked `.m-table` use the card transformation
instead (defined in mishkah-tables.css). */
@media (max-width: 640px) {
/* Only auto-scroll tables whose OWN direct rows hold the title3
header (so we don't catch wrapper tables). And only if the table
isn't already getting the card transform via .m-table. */
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3):not(.m-table) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
body.sl-injected .sl-content-card table:has(> tbody > tr > td.title3):not(.m-table) > tbody {
display: table;
width: 100%;
}
}
/* The legacy tab widget keeps …
inside each
.tab-content pane as a source label. The rendered
already names every tab, so hide the duplicate inside the content. */
body.sl-injected .sl-content-card .tab-content > h1.tab,
body.sl-injected .sl-content-card .tab-content > .tab { display: none !important; }
/* ---- TAB LIST (coursesmap.php "Remaining / Current / Finished")
Responsive: shrink padding + font, allow 2-row wrap on narrow
screens, never overflow horizontally. */
body.sl-injected .sl-content-card ul.tab-list {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
padding: 8px !important;
margin: 0 0 16px !important;
list-style: none !important;
background: var(--stitch-surface-low);
border: 1px solid var(--stitch-outline-variant);
border-radius: 12px;
}
body.sl-injected .sl-content-card ul.tab-list > li {
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
list-style: none !important;
}
body.sl-injected .sl-content-card ul.tab-list > li > a.tab-item {
display: block;
width: 100%;
text-align: center;
padding: 10px 16px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
color: var(--stitch-on-surface-variant) !important;
background: transparent !important;
text-decoration: none !important;
transition: background .15s, color .15s;
white-space: normal;
line-height: 1.3;
box-sizing: border-box;
}
body.sl-injected .sl-content-card ul.tab-list > li > a.tab-item.tab-active {
background: var(--stitch-primary) !important;
color: #fff !important;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}
@media (max-width: 640px) {
body.sl-injected .sl-content-card ul.tab-list {
padding: 4px !important;
gap: 4px;
}
body.sl-injected .sl-content-card ul.tab-list > li {
flex: 1 1 calc(50% - 4px);
}
body.sl-injected .sl-content-card ul.tab-list > li > a.tab-item {
padding: 9px 10px !important;
font-size: 12.5px !important;
}
}
@media (max-width: 380px) {
body.sl-injected .sl-content-card ul.tab-list > li {
flex: 1 1 100%;
}
}
/* ---- COURSESMAP — Remaining Subjects table -------------------- */
/* Columns: # | Name | Code | Credit Hours | Type */
@media (min-width: 641px) {
/* Make the program-name colspan row a clean section divider */
body.sl-injected .m-table.m-courses > tbody > tr > td[colspan] {
background: var(--stitch-primary) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-align: left !important;
padding: 14px 20px !important;
border-bottom: none !important;
}
/* "Mandatory Subject" / "Elective Subject" rendered as
chip badges in the last column */
body.sl-injected .m-table.m-courses > tbody > tr > td:last-child font[color] {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
}
/* Mandatory (originally green #003300) -> soft green chip */
body.sl-injected .m-table.m-courses > tbody > tr > td:last-child font[color="#003300"] {
background: color-mix(in srgb, var(--stitch-primary) 12%, transparent);
color: var(--stitch-primary-container) !important;
border: 1px solid color-mix(in srgb, var(--stitch-primary) 20%, transparent);
}
/* Elective (originally red #FF0000) -> soft amber chip */
body.sl-injected .m-table.m-courses > tbody > tr > td:last-child font[color="#FF0000"] {
background: color-mix(in srgb, var(--stitch-secondary-container, #fc9910) 15%, transparent);
color: var(--stitch-secondary) !important;
border: 1px solid color-mix(in srgb, var(--stitch-secondary) 20%, transparent);
}
}
/* ---- RESULTS — Subject grades table --------------------------- */
/* Columns: icon | Subject | Semester | Exam | Research | Attendance | Notes | Percentage% */
@media (min-width: 641px) {
/* Hide the leading icon column on desktop too — the icon doesn't
carry meaning anymore now that rows are clearly delimited */
body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(1) {
width: 12px !important;
padding-left: 16px !important;
padding-right: 0 !important;
}
body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(1) img {
display: none;
}
/* Percentage column as pill badge */
body.sl-injected .m-table.m-results > tbody > tr > td:last-child {
text-align: right;
}
body.sl-injected .m-table.m-results > tbody > tr > td:last-child font[color] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--stitch-primary) 10%, transparent);
color: var(--stitch-primary-container) !important;
font-size: 13px;
font-weight: 700;
border: 1px solid color-mix(in srgb, var(--stitch-primary) 20%, transparent);
}
}
/* ---- TRANSCRIPT — per-semester table -------------------------- */
/* Columns: Code | Subject | Credit Hours | GPA | Degree */
@media (min-width: 641px) {
/* The header table (.m-transcript-head) is the column-titles-only
table the legacy renderer outputs once per program — leave its
dark-bg styling alone for desktop but enforce border-radius via
the parent .m-table base styles. */
body.sl-injected .m-table.m-transcript-head {
background: var(--stitch-on-surface) !important;
border-radius: 12px;
}
body.sl-injected .m-table.m-transcript-head td {
color: #fff !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
border: none !important;
}
/* Code column — bold primary green */
body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(1) {
color: var(--stitch-primary) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.02em;
}
/* Subject column (2nd) — normal text, not the green color we
use for course names elsewhere; the code column carries that
emphasis on the transcript. */
body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(2) {
color: var(--stitch-on-surface) !important;
font-weight: 500 !important;
}
/* GPA column — pill badge based on grade letter inside.
Excluded: the header-only table (.m-transcript-head) and the
grade-summary footer (last row) where styling differs. */
body.sl-injected .m-table.m-transcript:not(.m-transcript-head) > tbody > tr > td:nth-child(4) {
text-align: center;
}
body.sl-injected .m-table.m-transcript:not(.m-transcript-head) > tbody > tr:not(:last-child) > td:nth-child(4) font[color] {
display: inline-block;
min-width: 36px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: var(--stitch-primary-fixed);
color: var(--stitch-on-primary-fixed) !important;
border: 1px solid color-mix(in srgb, var(--stitch-primary) 20%, transparent);
}
/* Equivalency note (green "مادة معادلة") gets a different chip */
body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(4) font[color="green"] {
background: var(--stitch-secondary-fixed);
color: var(--stitch-on-secondary-fixed) !important;
border: 1px solid color-mix(in srgb, var(--stitch-secondary) 20%, transparent);
}
/* Grade-Summary footer row (last row, colspan=2 in first cell) */
body.sl-injected .m-table.m-transcript > tbody > tr:last-child > td {
background: var(--stitch-surface-high) !important;
font-weight: 700 !important;
border-top: 1px solid var(--stitch-outline-variant) !important;
}
}
/* ---- PAGE HEADER POLISH on the 3 redesigned pages ------------- */
/* We don't ADD elements — we just refine what's already there.
Each page's existing .maintitel becomes a cleaner display title. */
body.sl-injected.no-hover .sl-content-card .maintitel,
body.sl-injected.no-hover .sl-content-card td.maintitel {
font-size: 24px !important;
line-height: 32px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--stitch-primary) !important;
background: transparent !important;
padding: 20px 24px !important;
border-bottom: 1px solid var(--stitch-outline-variant) !important;
}
/* "Subjects for ... Bachelor in Islamic Studies — English" sub-header
(results.php has it as a `` block with red `` inside) */
body.sl-injected.no-hover .sl-content-card td.body1 > center > b {
display: block;
font-size: 15px !important;
color: var(--stitch-on-surface-variant) !important;
font-weight: 600 !important;
margin: 12px 0 8px;
}
body.sl-injected.no-hover .sl-content-card td.body1 > center > b > font[color="red"] {
display: block;
font-size: 16px !important;
color: var(--stitch-primary) !important;
margin-top: 4px;
text-transform: none;
}
/* The semester name (red `` block in transcript) — relabel as
a quiet section heading. */
body.sl-injected.no-hover .sl-content-card b > p > font[color="#800000"],
body.sl-injected.no-hover .sl-content-card td.body1 > b > p > font[color="#800000"] {
color: var(--stitch-primary-container) !important;
font-size: 16px !important;
letter-spacing: 0.02em;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
padding: 6px 12px;
background: color-mix(in srgb, var(--stitch-primary) 8%, transparent);
border-radius: 999px;
margin: 8px 0;
}
/* ---- TABS POLISH (coursesmap.php has Remaining/Current/Finished) */
body.sl-injected.no-hover .sl-content-card .tab-content > .tab,
body.sl-injected.no-hover .sl-content-card h1.tab {
display: inline-block;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
padding: 10px 18px !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--stitch-on-surface-variant) !important;
margin: 0 4px !important;
border: none !important;
cursor: pointer;
transition: background .15s;
}
body.sl-injected.no-hover .sl-content-card h1.tab.active,
body.sl-injected.no-hover .sl-content-card h1.tab.is-active,
body.sl-injected.no-hover .sl-content-card .tab-content h1.tab[style*="background"] {
background: var(--stitch-primary) !important;
color: #fff !important;
}
/* ---- TRANSCRIPT student-info section — refine the existing
header block (no new fields, just visual polish) */
body.sl-injected.no-hover .sl-content-card b:has(> font[color="#003366"]),
body.sl-injected.no-hover .sl-content-card font[color="#003366"] {
color: var(--stitch-primary) !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
}