/* TeamHub shared styling. Bootstrap 5.3 carries the layout; this file only holds what is ours. There is no form styling here on purpose: the application has no

element anywhere. */ :root { /* The category colours are NOT here. They live in CATEGORY_COLOR inside assets/js/calendar.js, because the same map paints the tiles, the legend and the detail panel, and a colour defined in two places is a colour that will disagree with itself. */ /* Event status. A cancelled event stays on the calendar, struck through and faded. */ --th-status-planned: #2471a3; --th-status-done: #1e8449; --th-status-cancelled: #909497; } /* C1: anything you can click says so under the pointer. */ .nav-link, .dropdown-item, button:not(:disabled), [role="button"], .th-clickable, .th-tile, .th-day-cell { cursor: pointer; } /* Toasts, created on demand by TH.toast. Above the env banner and the Bootstrap modals. */ .th-toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 2100; } /* Non production banner, inserted by layout/head.jspf as the first child of . */ .env-banner { position: sticky; top: 0; z-index: 2000; text-align: center; padding: .25rem; font-weight: 600; font-size: .8rem; color: #fff; } .th-navbar-logo { max-height: 26px; } .th-page-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } /* Login, enrolment and the forced password change: one narrow card, vertically centred. */ .th-login-body { background-color: #f4f5f7; } .th-login-wrap { max-width: 26rem; margin: 0 auto; padding: 3rem 0; } .th-login-logo { max-height: 48px; } /* A secret shown once: monospaced and spaced out, because it gets copied by hand. */ .th-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .08em; user-select: all; } /* ---------- Calendario (COP-234) ---------- The grid lines are the grey background showing through a one pixel gap: no border collapsing to argue with, and a cell that is always exactly as wide as its neighbour. The category colours are NOT here: the same map feeds the tiles, the legend and the detail panel, so it lives in assets/js/calendar.js next to the labels. */ .th-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #dee2e6; border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; } .th-cal-dow { background: #f1f3f5; text-align: center; text-transform: uppercase; font-size: .72rem; font-weight: 600; padding: .35rem 0; } .th-cal-cell { background: #fff; min-height: 112px; padding: .25rem; cursor: pointer; } .th-cal-cell.th-cal-week { min-height: 340px; } .th-cal-cell.th-cal-other-month { background: #f8f9fa; } .th-cal-cell.th-cal-other-month .th-cal-daynum { color: #bbb; } .th-cal-cell.th-cal-today { box-shadow: inset 0 0 0 2px #0d6efd; } .th-cal-daynum { font-size: .78rem; font-weight: 600; } .th-cal-tile { display: block; width: 100%; text-align: left; border: 0; border-radius: .25rem; margin-top: .15rem; padding: .1rem .3rem; font-size: .74rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .th-cal-tile:hover { filter: brightness(.92); } .th-cal-tile .th-cal-tile-time { font-weight: 700; margin-right: .25rem; } .th-cal-tile .th-cal-tile-src { margin-right: .25rem; opacity: .85; } .th-cal-tile.th-cal-tile-done { opacity: .62; text-decoration: line-through; } .th-cal-tile.th-cal-tile-cancelled { opacity: .45; text-decoration: line-through; } .th-cal-tile.th-cal-tile-external { border: 2px solid rgba(0, 0, 0, .35); } .th-cal-tile.th-cal-tile-selected { box-shadow: 0 0 0 2px #212529; } .th-cal-more { display: block; font-size: .72rem; color: #6c757d; cursor: pointer; padding-left: .3rem; } .th-cal-more:hover { text-decoration: underline; } .th-cal-hour { font-size: .7rem; color: #6c757d; } .th-cal-allday-row { background: #f8f9fa; } .th-cal-row { cursor: pointer; } .th-cal-panel { position: sticky; top: 1rem; } .th-cal-chip { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; } /* La croce di Bootstrap dentro un badge va rimpicciolita, altrimenti lo sfonda. */ .th-cal-chip .th-cal-chip-x { cursor: pointer; font-size: .5rem; padding: .15rem; } /* Il campo di ricerca della barra degli strumenti non deve mangiarsi la riga. */ .th-cal-search { max-width: 14rem; } .th-cal-picker-results { max-height: 220px; overflow-y: auto; } .th-cal-picker-results .list-group-item { cursor: pointer; } .th-cal-legend-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; } @media (max-width: 576px) { .th-cal-cell { min-height: 78px; } .th-cal-tile { font-size: .66rem; } } /* ---------- Casella notifiche (COP-234) ---------- Il pannello della campanella e le righe dell'elenco, condivise fra la navbar e /app/inbox.jsp: la riga di una notifica si disegna allo stesso modo nei due posti, cosi' non possono divergere. I colori della severita' NON stanno qui: sono classi Bootstrap scelte in assets/js/inbox.js, dove sta anche la mappa delle icone. */ .th-inbox-panel { position: absolute; right: 0; top: 100%; width: 360px; max-width: 92vw; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); z-index: 1050; } .th-inbox-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid #dee2e6; } .th-inbox-list { max-height: 60vh; overflow-y: auto; } .th-inbox-foot { padding: .5rem .75rem; border-top: 1px solid #dee2e6; text-align: center; } .th-inbox-item { display: flex; gap: .5rem; padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #f1f3f5; } .th-inbox-item:hover { background: #f8f9fa; } .th-inbox-item.th-inbox-unread { background: #eef4ff; } .th-inbox-item.th-inbox-unread .th-inbox-title { font-weight: 700; } .th-inbox-icon { margin-top: .15rem; } .th-inbox-text { min-width: 0; flex: 1 1 auto; } .th-inbox-title { font-size: .86rem; } /* Il corpo di un avviso arriva da un'altra applicazione: puo' contenere una parola lunghissima senza spazi, che senza questo sfonderebbe il pannello invece di andare a capo. */ .th-inbox-body { font-size: .8rem; color: #495057; overflow-wrap: anywhere; } .th-inbox-meta { font-size: .72rem; color: #868e96; } .th-inbox-markall { cursor: pointer; } .th-inbox-toggle { cursor: pointer; }