/* The 2026 teacher redesign: one list pattern for the table pages (canvas G9uP9pPk) - period bar, search + chips, day-grouped list rows, empty state, "הצגת עוד", the restyled long tables and matrices. Every rule is scoped to [data-ui="new"]. Brand: sky #175bb0 + mint #2ec4a5, Rubik. */ /* The parts (ui3/*.js): Segmented .t3l-seg, PeriodBar .t3l-period, SearchChips .t3l-filter, ListView .t3l-list, EmptyState .t3l-empty; TableList (ReportsTable / ReportTable with presets / listView) draws them inside .t3l. Pages: StudentLessonReport .t3s, TeacherMissing .t3p-tc-*, StudentContactForm .t3c-*. Sizes in px (the root font-size is 10px in teacher/reports). Logical properties only - the pages are RTL. */ /* ------------------------------------------------------------ shared: card, separator, buttons -- */ :root[data-ui="new"] .t3l, :root[data-ui="new"] .t3s { font-family: "Rubik", system-ui, sans-serif; font-size: 14px; line-height: 1.45; color: #12233f; font-variant-numeric: tabular-nums; min-width: 0; } :root[data-ui="new"] .t3l-card { background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; padding: 18px 20px; min-width: 0; box-sizing: border-box; } :root[data-ui="new"] .t3l-sep { height: 1px; background: #eef2f8; margin: 14px 0; } :root[data-ui="new"] .t3l-loading { display: flex; justify-content: center; padding: 40px 0; } :root[data-ui="new"] .t3l button, :root[data-ui="new"] .t3s button, :root[data-ui="new"] .t3c-card button, :root[data-ui="new"] .t3l-seg button { font-family: inherit; } :root[data-ui="new"] .t3l-btn { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #12233f; font-size: 14px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box; } :root[data-ui="new"] .t3l-btn:hover { border-color: #b9d3f4; background: #f4f8fe; color: #114591; } :root[data-ui="new"] .t3l-btn.soft { background: #eef5ff; border-color: #eef5ff; color: #114591; } :root[data-ui="new"] .t3l-btn.soft:hover { background: #e2edfc; border-color: #e2edfc; } :root[data-ui="new"] .t3l-btn.sky { background: #175bb0; border-color: #175bb0; color: #fff; box-shadow: 0 8px 18px rgba(23, 91, 176, .24); } :root[data-ui="new"] .t3l-btn.sky:hover { background: #114591; border-color: #114591; color: #fff; } :root[data-ui="new"] :is(.t3l-btn, .t3l-pbtn, .t3l-seg-b, .t3l-chip, .t3l-tool, .t3l-more, .t3l-open, .t3l-ibtn, .t3s-ptab, .t3c-call):focus-visible { outline: 2px solid #175bb0; outline-offset: 2px; } /* ------------------------------------------------------------ segmented row (ui3/Segmented.js) -- */ :root[data-ui="new"] .t3l-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f4f7fb; max-width: 100%; overflow-x: auto; box-sizing: border-box; scrollbar-width: none; vertical-align: middle; } :root[data-ui="new"] .t3l-seg::-webkit-scrollbar { display: none; } :root[data-ui="new"] .t3l-seg-b { flex-shrink: 0; height: 34px; padding: 0 13px; border-radius: 9px; border: 0; background: transparent; color: #4a5a73; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } :root[data-ui="new"] .t3l-seg-b:hover { color: #114591; } :root[data-ui="new"] .t3l-seg-b[aria-selected="true"] { background: #fff; color: #114591; font-weight: 700; box-shadow: 0 1px 3px rgba(16, 42, 92, .12); } :root[data-ui="new"] .t3l-seg-n { font-weight: 700; } :root[data-ui="new"] .t3l-seg.wide { display: flex; width: 100%; } :root[data-ui="new"] .t3l-seg.wide > .t3l-seg-b { flex: 1 0 auto; justify-content: center; } /* ------------------------------------------------------------ period bar (ui3/PeriodBar.js) -- */ :root[data-ui="new"] .t3l-period { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; } :root[data-ui="new"] .t3l-pnav { display: flex; align-items: center; gap: 8px; } :root[data-ui="new"] .t3l-pbtn { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #114591; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } :root[data-ui="new"] .t3l-pbtn:hover:not([disabled]) { background: #f4f8fe; border-color: #b9d3f4; } :root[data-ui="new"] .t3l-pbtn[disabled] { opacity: .4; cursor: default; } :root[data-ui="new"] .t3l-plabel { min-width: 140px; text-align: center; } :root[data-ui="new"] .t3l-prange { display: block; font-size: 15.5px; font-weight: 700; color: #12233f; line-height: 1.3; } :root[data-ui="new"] .t3l-psub { display: block; font-size: 12px; color: #5b6b85; line-height: 1.35; } :root[data-ui="new"] .t3l-period > .t3l-pseg { margin-inline-start: auto; } :root[data-ui="new"] .t3l-pdates { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; } :root[data-ui="new"] .t3l-pfield { display: flex; flex-direction: column; gap: 4px; } :root[data-ui="new"] .t3l-plbl { font-size: 12.5px; font-weight: 600; color: #4a5a73; } :root[data-ui="new"] .t3l-pfield .btn { height: 40px; border-radius: 12px; padding: 0 12px; font-size: 14px; } :root[data-ui="new"] .t3l-pold { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } /* ------------------------------------------------------------ search + chips (ui3/SearchChips.js) -- */ :root[data-ui="new"] .t3l-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } :root[data-ui="new"] label.t3l-search { flex: 1 1 220px; max-width: 320px; min-width: 0; height: 42px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1px solid #dfe8f4; border-radius: 12px; background: #f7f9fc; color: #5b6b85; display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: text; } :root[data-ui="new"] label.t3l-search:focus-within { border-color: #9cc2f2; background: #fff; box-shadow: 0 0 0 3px rgba(23, 91, 176, .12); } :root[data-ui="new"] label.t3l-search > input { flex: 1; min-width: 0; height: 40px !important; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: inherit; font-size: 14px; color: #12233f; -webkit-appearance: none; appearance: none; } :root[data-ui="new"] label.t3l-search > input::placeholder { color: #8090a8; } :root[data-ui="new"] .t3l-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } :root[data-ui="new"] .t3l-chip { flex-shrink: 0; height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid #dfe8f4; background: #fff; color: #4a5a73; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } :root[data-ui="new"] .t3l-chip:hover { border-color: #b9d3f4; color: #114591; } :root[data-ui="new"] .t3l-chip[aria-pressed="true"] { background: #e6efff; border-color: #9cc2f2; color: #114591; font-weight: 700; } :root[data-ui="new"] .t3l-chip-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f1f4f9; color: #4a5a73; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } :root[data-ui="new"] .t3l-chip[aria-pressed="true"] .t3l-chip-n { background: #fff; color: #114591; } :root[data-ui="new"] .t3l-filter-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; } :root[data-ui="new"] .t3l-tool { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #12233f; font-size: 13.5px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } :root[data-ui="new"] .t3l-tool:hover { border-color: #b9d3f4; background: #f4f8fe; color: #114591; } :root[data-ui="new"] .t3l-viewseg .t3l-seg-b { font-size: 13px; padding: 0 11px; } :root[data-ui="new"] .t3l-summary { margin: 0 0 12px; } /* ------------------------------------------------------------ the list (ui3/ListView.js) -- */ :root[data-ui="new"] .t3l-list { margin-top: 4px; } :root[data-ui="new"] .t3l-day { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; } :root[data-ui="new"] .t3l-day-t { font-size: 13.5px; font-weight: 700; color: #114591; white-space: nowrap; } :root[data-ui="new"] .t3l-day-line { flex: 1; height: 1px; background: #dfe8f4; } :root[data-ui="new"] .t3l-day-tag { font-size: 12px; color: #5b6b85; white-space: nowrap; } :root[data-ui="new"] .t3l-box { background: #fff; border: 1px solid #dfe8f4; border-radius: 16px; padding: 0 14px; } :root[data-ui="new"] .t3l-box > * + * { border-top: 1px solid #eef2f8; } /* a row: [tag / icon] [title + meta] [end] */ :root[data-ui="new"] .t3l-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; min-width: 0; } :root[data-ui="new"] .t3l-row.top { align-items: flex-start; } :root[data-ui="new"] .t3l-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } :root[data-ui="new"] .t3l-row-t { font-size: 14.5px; font-weight: 700; color: #12233f; overflow-wrap: anywhere; } :root[data-ui="new"] .t3l-row-t.text { font-weight: 600; line-height: 1.45; white-space: pre-line; } :root[data-ui="new"] .t3l-row-d { font-size: 13.5px; color: #4a5a73; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } :root[data-ui="new"] .t3l-row-m { font-size: 12.5px; color: #5b6b85; overflow-wrap: anywhere; } :root[data-ui="new"] .t3l-row-m.note { color: #4a5a73; font-style: italic; } :root[data-ui="new"] .t3l-row-end { flex-shrink: 0; display: flex; align-items: center; gap: 6px; } /* tones: red חיסור / לא מוצדק, amber איחור / negative / open, mint positive, green done, sky info, grey neutral */ :root[data-ui="new"] .t3l-tag { flex-shrink: 0; min-width: 108px; max-width: 160px; height: 34px; padding: 0 10px; border-radius: 11px; box-sizing: border-box; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } :root[data-ui="new"] .t3l-tag > span { overflow: hidden; text-overflow: ellipsis; } :root[data-ui="new"] .t3l-tag svg { flex-shrink: 0; stroke-width: 2.4; } :root[data-ui="new"] .t3l-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1; } :root[data-ui="new"] .t3l-ibox { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; } :root[data-ui="new"] .t3l-grade { min-width: 44px; height: 40px; padding: 0 8px; flex-shrink: 0; border-radius: 12px; box-sizing: border-box; font-size: 17px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).red { background: #fde6e8; color: #b0202d; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).amber { background: #fff1df; color: #8a4a00; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).mint { background: #dcf5ee; color: #0a6f5d; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).green { background: #e1f4ea; color: #0b6b4a; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).sky { background: #e6efff; color: #114591; } :root[data-ui="new"] :is(.t3l-tag, .t3l-pill, .t3l-ibox, .t3l-grade).grey { background: #f1f4f9; color: #4a5a73; } :root[data-ui="new"] .t3l-grade.grey { font-size: 13px; } /* label / value lines ("שיעורי בית דף עבודה 3") */ :root[data-ui="new"] .t3l-lv { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; } :root[data-ui="new"] .t3l-lv-l { flex-shrink: 0; width: 92px; color: #5b6b85; } :root[data-ui="new"] .t3l-lv-v { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; } /* a row's file links (the table's own renderer) */ :root[data-ui="new"] .t3l-files ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; } :root[data-ui="new"] .t3l-files a { color: #114591; font-weight: 600; } :root[data-ui="new"] .t3l-ibtn { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 0; background: #f4f7fb; color: #4a5a73; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } :root[data-ui="new"] .t3l-ibtn:hover { background: #e6efff; color: #114591; } :root[data-ui="new"] .t3l-ibtn.bad:hover { background: #fde6e8; color: #b0202d; } /* "מוצגים 15 מתוך 42 · הצגת עוד 15" */ :root[data-ui="new"] .t3l-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } :root[data-ui="new"] .t3l-foot-n { font-size: 13px; color: #5b6b85; } :root[data-ui="new"] .t3l-more { height: 42px; padding: 0 16px; border-radius: 12px; border: 0; background: #eef5ff; color: #114591; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } :root[data-ui="new"] .t3l-more:hover { background: #e2edfc; } /* ------------------------------------------------------------ empty state (ui3/EmptyState.js) -- */ :root[data-ui="new"] .t3l-empty { text-align: center; padding: 26px 10px 12px; } :root[data-ui="new"] .t3l-empty-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: #eef5ff; color: #114591; display: flex; align-items: center; justify-content: center; } :root[data-ui="new"] .t3l-empty-t { font-size: 17px; font-weight: 800; color: #12233f; } :root[data-ui="new"] .t3l-empty-x { font-size: 13.5px; color: #5b6b85; margin: 4px 0 0; } :root[data-ui="new"] .t3l-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } /* a small empty state (inside a table's place - DataTable / DataTables) */ :root[data-ui="new"] .t3l-empty.sm { padding: 18px 10px 10px; } :root[data-ui="new"] .t3l-empty.sm .t3l-empty-ic { width: 46px; height: 46px; border-radius: 15px; margin-bottom: 8px; } :root[data-ui="new"] .t3l-empty.sm .t3l-empty-ic svg { width: 22px; height: 22px; } :root[data-ui="new"] .t3l-empty.sm .t3l-empty-t { font-size: 15px; font-weight: 700; } /* a smaller button (row actions of a list) */ :root[data-ui="new"] .t3l-btn.sm { height: 36px; padding: 0 12px; border-radius: 11px; font-size: 13px; gap: 5px; } :root[data-ui="new"] .t3l-btn.sky.sm { box-shadow: none; } /* ListView bare: cards of their own in the page's container */ :root[data-ui="new"] .t3l-list.bare { margin-top: 0; } /* the table one tap away (טבלה) - inside the lesson frame (.l3) ui3-pages.css stays out, so it gets a light look here */ :root[data-ui="new"] .t3l-tablewrap { margin-top: 14px; min-width: 0; } :root[data-ui="new"] .t3s .t3l-tablewrap .reports-table-toolsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } :root[data-ui="new"] .t3s .t3l-tablewrap .reports-table-toolsbar:empty { display: none; } :root[data-ui="new"] .t3s .t3l-tablewrap .table { width: 100%; margin: 0; background: transparent; font-size: 13.5px; border-collapse: separate; border-spacing: 0; } :root[data-ui="new"] .t3s .t3l-tablewrap .table > thead > tr > th { background: #f7f9fc; color: #4a5a73; font-size: 12.5px; font-weight: 600; text-align: start; padding: 10px; border: 0; border-bottom: 1px solid #dfe8f4; white-space: nowrap; } :root[data-ui="new"] .t3s .t3l-tablewrap .table > tbody > tr > td { padding: 10px; border: 0; border-bottom: 1px solid #eef2f8; vertical-align: middle; text-align: start; } :root[data-ui="new"] .t3s .t3l-tablewrap .table.table-bordered > tbody > tr > td, :root[data-ui="new"] .t3s .t3l-tablewrap .table.table-bordered > thead > tr > th { border-inline-start: 1px solid #eef2f8; } /* ------------------------------------------------------------ DataTable / DataTables (.action-table) -- */ /* ui3-pages.css gives the card, the sticky #f7f9fc header, hover and the pager; here: pill toolbar buttons, soft pill row actions and a clearer tint for the rows chosen with withSelected */ :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > .btn, :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > div > .btn, :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > .info-menu > .btn-opener { height: 38px; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid #dfe8f4 !important; background: #fff !important; color: #12233f !important; font-size: 13px; font-weight: 600; line-height: 1; box-shadow: none !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > .btn:hover, :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > div > .btn:hover, :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > .info-menu > .btn-opener:hover { border-color: #b9d3f4 !important; background: #f4f8fe !important; color: #114591 !important; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar .btn .glyphicon { top: 0; font-size: 12px; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > div > .btn.actbtn { background: #175bb0 !important; border-color: #175bb0 !important; color: #fff !important; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > div > .btn.actbtn:hover { background: #114591 !important; border-color: #114591 !important; color: #fff !important; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) > .dt-toolbar > div > strong { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #e6efff; color: #114591; font-size: 13px; font-weight: 700; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) td.actions .btn { height: 32px; min-width: 32px; padding: 0 12px !important; border-radius: 999px !important; background: #eef5ff !important; border-color: #eef5ff !important; color: #114591 !important; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) td.actions .btn:hover { background: #e2edfc !important; border-color: #e2edfc !important; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) td.actions .btn .glyphicon { top: 0; color: inherit !important; } :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) .table > tbody > tr.selected > :is(td, th), :root[data-ui="new"] :where(body.t3-on) .action-table:not(:where(.teacher-schedule, .a3-dash *, .a3-teachers *, .l3 *, .pa3 *, .teacher-schedule *, .ss-settings *)) .table > tbody > tr.selected:hover > :is(td, th) { background: #e6efff; } /* ------------------------------------------------------------ דוח מצב תלמיד (teacher/components/StudentLessonReport.js) -- */ /* the lesson frame's sub card steps aside: the report draws its own cards (and on a phone its own sky header) */ :root[data-ui="new"] .l3 > .l3-sub:has(> .t3s) { background: transparent; border: 0; padding: 0; overflow: visible; border-radius: 0; } :root[data-ui="new"] .t3s { display: flex; flex-direction: column; gap: 18px; } :root[data-ui="new"] .t3s-who { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } :root[data-ui="new"] .t3s-ini { width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; background: #e6efff; color: #114591; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; } :root[data-ui="new"] .t3s-who-tx { min-width: 0; } :root[data-ui="new"] h1.t3s-name { margin: 0; font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1.2; color: #12233f; letter-spacing: 0; } :root[data-ui="new"] .t3s-sub { font-size: 13.5px; color: #5b6b85; margin-top: 2px; } :root[data-ui="new"] .t3s-acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; } :root[data-ui="new"] .t3s-head .t3s-tabs { margin-top: 16px; } :root[data-ui="new"] .t3s-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; } :root[data-ui="new"] .t3s-main { flex: 999 1 600px; min-width: 0; } :root[data-ui="new"] .t3s-aside { flex: 1 1 280px; max-width: 380px; } :root[data-ui="new"] h2.t3s-aside-t { margin: 0 0 4px; font-family: inherit; font-size: 17px; font-weight: 700; color: #12233f; } :root[data-ui="new"] .t3s-aside-sub { font-size: 12.5px; color: #5b6b85; margin-bottom: 14px; } :root[data-ui="new"] .t3s-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } :root[data-ui="new"] .t3s-bar-row .t3l-tag { min-width: 104px; max-width: 140px; } :root[data-ui="new"] .t3s-bar { flex: 1; height: 10px; border-radius: 999px; background: #f4f7fb; overflow: hidden; } :root[data-ui="new"] .t3s-bar > span { display: block; height: 100%; border-radius: 999px; background: currentColor; } :root[data-ui="new"] .t3s-bar.red { color: #b0202d; } :root[data-ui="new"] .t3s-bar.amber { color: #8a4a00; } :root[data-ui="new"] .t3s-bar.mint { color: #0a6f5d; } :root[data-ui="new"] .t3s-bar.green { color: #0b6b4a; } :root[data-ui="new"] .t3s-bar.sky { color: #175bb0; } :root[data-ui="new"] .t3s-bar.grey { color: #8090a8; } :root[data-ui="new"] .t3s-bar-n { min-width: 18px; font-size: 15px; font-weight: 800; text-align: end; } :root[data-ui="new"] .t3s-aside-none { font-size: 13.5px; color: #5b6b85; padding: 6px 0 10px; } :root[data-ui="new"] .t3s-aside-note { font-size: 12px; color: #5b6b85; margin-top: 6px; line-height: 1.5; } /* phone: the sky header of the lesson (.l3-phead) with the four kinds as scrolling pills */ :root[data-ui="new"] .t3s-phead.l3-phead { padding-bottom: 16px; } :root[data-ui="new"] .t3s-phead .l3-title { overflow-wrap: anywhere; } :root[data-ui="new"] .t3s-ptabs { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; } :root[data-ui="new"] .t3s-ptabs::-webkit-scrollbar { display: none; } :root[data-ui="new"] .t3s-ptab { flex-shrink: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; } :root[data-ui="new"] .t3s-ptab[aria-selected="true"] { background: #fff; border-color: #fff; color: #114591; } :root[data-ui="new"] .t3s-pmain { padding: 14px 16px 40px; } :root[data-ui="new"] .t3s-sum { display: flex; flex-wrap: wrap; gap: 6px; } /* ------------------------------------------------------------ כרטיס מורה (components/schedule/TeacherMissing.js) -- */ :root[data-ui="new"] .t3p-tc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } :root[data-ui="new"] .t3p-tc-tabs > .t3p-acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; } :root[data-ui="new"] .t3p-tc-body > .t3p-filters { margin: 0 0 14px; } :root[data-ui="new"] .t3p-tc-body .reports-table { margin: 0; } /* a lesson of דוח שיעורים: [hour] [subject · class · time + chips / topic, description, lines] [פתיחת השיעור] */ :root[data-ui="new"] .t3l-lesson { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "h top open" "h body open"; column-gap: 14px; row-gap: 5px; padding: 14px 0; align-items: start; } :root[data-ui="new"] .t3l-hour { grid-area: h; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } :root[data-ui="new"] .t3l-lesson-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; } :root[data-ui="new"] .t3l-lesson-g { font-size: 13px; font-weight: 600; color: #114591; } :root[data-ui="new"] .t3l-lesson-chips { display: flex; flex-wrap: wrap; gap: 6px; } :root[data-ui="new"] .t3l-lesson-chips.narrow { display: none; margin-top: 2px; } :root[data-ui="new"] .t3l-lesson-body { grid-area: body; display: flex; flex-direction: column; gap: 5px; min-width: 0; } :root[data-ui="new"] .t3l-lesson-topic { font-size: 16px; font-weight: 800; color: #12233f; overflow-wrap: anywhere; } :root[data-ui="new"] .t3l-lesson-d { font-size: 13.5px; color: #4a5a73; white-space: pre-line; overflow-wrap: anywhere; } :root[data-ui="new"] .t3l-lesson-d.none { color: #8090a8; } :root[data-ui="new"] a.t3l-open { grid-area: open; height: 38px; padding: 0 12px; border-radius: 11px; background: #eef5ff; color: #114591 !important; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; text-decoration: none !important; white-space: nowrap; } :root[data-ui="new"] a.t3l-open:hover { background: #e2edfc; } /* ------------------------------------------------------------ טופס יצירת קשר (mentor/StudentContactForm.js) -- */ :root[data-ui="new"] .t3c-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } :root[data-ui="new"] .t3c-bar > .t3l-filter { flex: 1 1 260px; } :root[data-ui="new"] .t3c-bar label.t3l-search { max-width: 360px; } :root[data-ui="new"] .t3c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } :root[data-ui="new"] .t3c-card { background: #fff; border: 1px solid #dfe8f4; border-radius: 18px; padding: 14px; min-width: 0; display: flex; flex-direction: column; } :root[data-ui="new"] .t3c-top { display: flex; align-items: center; gap: 12px; } :root[data-ui="new"] .t3c-ini { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: #e6efff; color: #114591; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } :root[data-ui="new"] .t3c-card.need .t3c-ini { background: #fde6e8; color: #b0202d; } :root[data-ui="new"] .t3c-ini.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; } :root[data-ui="new"] .t3c-who { flex: 1; min-width: 0; display: flex; flex-direction: column; } :root[data-ui="new"] .t3c-name { font-size: 16px; font-weight: 700; color: #12233f; overflow-wrap: anywhere; } :root[data-ui="new"] .t3c-seen { font-size: 12.5px; color: #5b6b85; } :root[data-ui="new"] .t3c-last { font-size: 13px; color: #4a5a73; margin: 10px 0; } :root[data-ui="new"] .t3c-calls { display: flex; gap: 6px; } :root[data-ui="new"] a.t3c-call { flex: 1; min-width: 0; height: 44px; border-radius: 12px; background: #eef5ff; color: #114591 !important; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none !important; } :root[data-ui="new"] a.t3c-call:hover { background: #e2edfc; } :root[data-ui="new"] .t3c-acts { display: flex; gap: 6px; margin-top: 8px; } :root[data-ui="new"] .t3c-acts > :first-child:not(:last-child) { flex: 1; } :root[data-ui="new"] .t3c-acts .t3l-btn { height: 42px; font-size: 13.5px; } :root[data-ui="new"] .t3c-acts select.t3c-select { height: 42px; border-radius: 12px; min-width: 0; margin: 0; } :root[data-ui="new"] .t3c-tname { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } :root[data-ui="new"] .t3c-ini.sm.need { background: #fde6e8; color: #b0202d; } :root[data-ui="new"] .t3p-contact-table .t3c-pname { display: block; white-space: nowrap; } :root[data-ui="new"] .t3p-contact-table .t3c-tel { display: block; width: max-content; font-size: 12.5px; font-weight: 500; color: #114591; text-decoration: none; white-space: nowrap; } :root[data-ui="new"] .t3p-contact-table a.t3c-tel:hover { text-decoration: underline; } :root[data-ui="new"] .t3p-contact-table select.t3c-select { min-width: 150px; margin: 0; } /* ------------------------------------------------------------ אירועי הערכה שלי (teacher/MyAssesments.js) -- */ :root[data-ui="new"] .t3a-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; } :root[data-ui="new"] .t3a-ev-main { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 12px; } :root[data-ui="new"] .t3a-ev-main .t3l-tag { min-width: 84px; } :root[data-ui="new"] .t3a-ev-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; } :root[data-ui="new"] button.t3a-res { flex-shrink: 0; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 999px; } :root[data-ui="new"] button.t3a-res:hover .t3l-pill { filter: brightness(.96); text-decoration: underline; } :root[data-ui="new"] button.t3a-res:focus-visible { outline: 2px solid #175bb0; outline-offset: 2px; } :root[data-ui="new"] .t3p-myasses .t3p-period .t3l-viewseg { align-self: flex-end; } /* ------------------------------------------------------------ phones (< 768px): one column, no sideways scroll -- */ @media (max-width: 767px) { :root[data-ui="new"] .t3l-card { border-radius: 18px; padding: 14px; } /* a page card that holds a list goes flat: the period bar becomes its own card, the list sits on the page */ :root[data-ui="new"] .t3l-card.t3l-flat-phone { background: transparent; border: 0; padding: 0; border-radius: 0; box-shadow: none; } :root[data-ui="new"] :is(.t3l-flat-phone, .t3s-phone) .t3l > .t3l-top { background: #fff; border: 1px solid #dfe8f4; border-radius: 18px; padding: 14px; margin-bottom: 12px; } :root[data-ui="new"] :is(.t3l-flat-phone, .t3s-phone) .t3l > .t3l-sep { display: none; } :root[data-ui="new"] .t3l-flat-phone > .t3l-sep { margin: 12px 0; background: transparent; } :root[data-ui="new"] .t3l-period { flex-direction: column; align-items: stretch; gap: 10px; } :root[data-ui="new"] .t3l-pnav { width: 100%; } :root[data-ui="new"] .t3l-plabel { flex: 1; min-width: 0; } :root[data-ui="new"] .t3l-period > .t3l-pseg { align-self: center; margin: 0; } :root[data-ui="new"] .t3l-pdates { justify-content: center; } :root[data-ui="new"] .t3l-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s e" "c c"; gap: 10px; } :root[data-ui="new"] .t3l-filter.no-phone-search { grid-template-areas: "c e"; } :root[data-ui="new"] .t3l-filter.no-phone-search > label.t3l-search { display: none; } :root[data-ui="new"] label.t3l-search { grid-area: s; max-width: none; height: 44px; } :root[data-ui="new"] .t3l-chips { grid-area: c; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } :root[data-ui="new"] .t3l-chips::-webkit-scrollbar { display: none; } :root[data-ui="new"] .t3l-filter-end { grid-area: e; margin: 0; } :root[data-ui="new"] .t3l-tool { width: 44px; height: 44px; padding: 0; justify-content: center; } :root[data-ui="new"] .t3l-tool > span { display: none; } :root[data-ui="new"] .t3l-chip { height: 38px; } :root[data-ui="new"] .t3l-box { padding: 0 12px; } :root[data-ui="new"] .t3l-tag { min-width: 92px; max-width: 120px; font-size: 13px; padding: 0 8px; } :root[data-ui="new"] .t3l-row { gap: 10px; } :root[data-ui="new"] .t3l-row-end { flex-direction: column; align-items: flex-end; } :root[data-ui="new"] .t3l-lv { display: block; } :root[data-ui="new"] .t3l-lv-l { width: auto; } :root[data-ui="new"] .t3l-lv-l::after { content: ": "; } :root[data-ui="new"] .t3l-more { height: 44px; } /* a lesson: hour, "subject · class · time" and the open icon on the top row, the rest across the full width */ :root[data-ui="new"] .t3l-lesson { grid-template-columns: 34px minmax(0, 1fr) 40px; grid-template-areas: "h top open" "body body body"; column-gap: 10px; align-items: center; padding: 13px 0; } :root[data-ui="new"] .t3l-hour { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; } :root[data-ui="new"] .t3l-lesson-chips.wide { display: none; } :root[data-ui="new"] .t3l-lesson-chips.narrow { display: flex; } :root[data-ui="new"] a.t3l-open { width: 40px; height: 40px; padding: 0; justify-content: center; } :root[data-ui="new"] a.t3l-open > span { display: none; } :root[data-ui="new"] .t3p-tc-tabs { flex-direction: column; align-items: stretch; } :root[data-ui="new"] .t3p-tc-tabs > .t3l-seg { display: flex; } :root[data-ui="new"] .t3p-tc-tabs > .t3p-acts { margin: 0; } :root[data-ui="new"] .t3p-tc-tabs > .t3p-acts > .t3p-btn { flex: 1; justify-content: center; min-height: 44px; } :root[data-ui="new"] .t3c-bar { flex-direction: column; align-items: stretch; } :root[data-ui="new"] .t3c-bar > .t3l-seg { display: flex; } :root[data-ui="new"] .t3c-bar > .t3l-seg > .t3l-seg-b { flex: 1 0 auto; justify-content: center; height: 40px; } :root[data-ui="new"] .t3c-bar > .t3l-filter { flex: none; display: flex; } :root[data-ui="new"] .t3c-grid { grid-template-columns: minmax(0, 1fr); } :root[data-ui="new"] .t3a-ev-main { flex-basis: 100%; } :root[data-ui="new"] .t3a-ev-main .t3l-tag { min-width: 72px; } :root[data-ui="new"] .t3a-ev-acts { width: 100%; margin: 0; } :root[data-ui="new"] .t3a-ev-acts > .t3l-btn { flex: 1 1 auto; height: 40px; padding: 0 8px; } }