för en task inuti en sektion
.section-by-select – toolbar-dropdown för val av attribut
.section-by-active – modifier: ett attribut är valt
.mobile-section-header – rubrik i mobilkortlistan
══════════════════════════════════════════════════════════════════ */
/* ── Desktop: tabellrubrikrad ─────────────────────────────────────── */
.section-header-row {
background: var(--bg2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
/* Hover-feedback på hela raden */
.section-header-row:hover {
background: var(--surface2);
}
.section-header-cell {
padding: 0.55rem 0.75rem;
display: flex; /* fungerar ej inuti
– se nedan */
align-items: center;
gap: 0.45rem;
}
/* | är block-level i tabellen; vi simulerar flex via en inre wrapper.
Använd inline-flex på cellen direkt för att slippa extra element. */
.section-header-row td.section-header-cell {
display: table-cell; /* återställ till tabellkontext */
vertical-align: middle;
white-space: nowrap;
}
/* Inre layout: toggle-ikon | rubrik | badge */
.section-header-row td.section-header-cell > * {
vertical-align: middle;
}
.section-toggle-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--text2);
font-size: 0.65rem;
line-height: 1;
pointer-events: none; /* klick hanteras av |
*/
display: inline-block;
width: 1rem;
text-align: center;
transition: transform 0.15s ease;
}
/* Roterar pilen när sektionen är infälld */
.section-header-row.section-collapsed .section-toggle-btn {
/* ▶ används redan av render.js – ingen extra rotation behövs */
}
.section-header-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.section-count {
display: inline-block;
background: var(--surface2);
border: 1px solid var(--border);
font-size: 0.62rem;
padding: 1px 5px;
border-radius: 999px;
color: var(--text2);
font-weight: 400;
margin-left: 0.35rem;
letter-spacing: 0.02em;
}
/* Task-rader som tillhör en sektion – lätt indragning i namnkolumnen */
.section-task-row > td:nth-child(3) {
padding-left: 1.25rem;
}
/* ── Toolbar: sektionerings-dropdown ────────────────────────────── */
.section-by-select {
/* Ärver .filter-select – inga extra regler normalt */
}
/* Accentfärg på dropdown-ramen när ett attribut är valt */
.section-by-select.section-by-active {
border-color: var(--accent);
color: var(--accent);
}
/* Inaktiverad (multilist-läge) */
.section-by-select:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Mobil: sektionshuvudkort ────────────────────────────────────── */
.mobile-section-header {
background: var(--bg2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 0.55rem 0.75rem;
display: flex;
align-items: center;
gap: 0.45rem;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
min-height: 40px;
}
.mobile-section-header:active {
background: var(--surface2);
}
.mobile-section-header.section-collapsed .section-toggle-btn {
/* ▶ renderas av JS redan */
}
.mobile-section-header .section-header-label {
flex: 1;
font-size: 0.72rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-section-header .section-count {
flex-shrink: 0;
}
/* ── Responsivt ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Dölj desktop-sektionsrubrikrader på mobil (mobilkort används istället) */
.section-header-row { display: none; }
/* section-task-row-indraget tas bort på mobil (mobilkort har ingen | ) */
.section-task-row > td:nth-child(3) { padding-left: 0.75rem; }
}
/* Kanban-kort som är gruppmedlem – grön vänsterbård */
.kanban-card.kanban-group-member {
border-left: 3px solid #4caf82;
}
/* ══════════════════════════════════════════════════════════════════
KONTEXTMENY (#ctxMenu)
Visas vid högerklick (desktop) eller longpress (mobil) på uppgifter.
Positioneras absolut via JS i contextmenu.js.
══════════════════════════════════════════════════════════════════ */
#ctxMenu {
display: none;
position: fixed;
z-index: 8000;
min-width: 220px;
max-width: 280px;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
padding: 0.3rem 0;
font-size: 0.75rem;
color: var(--text);
user-select: none;
overflow: visible;
}
/* Uppgiftsnamnet längst upp i menyn */
.ctx-task-name {
padding: 0.45rem 0.85rem 0.4rem;
font-size: 0.65rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid var(--border);
margin-bottom: 0.2rem;
letter-spacing: 0.03em;
}
/* Separator */
.ctx-divider {
height: 1px;
background: var(--border);
margin: 0.25rem 0;
}
/* Rad-wrapper – behövs för sub-meny-positionering */
.ctx-item-wrap {
position: relative;
}
/* Menyrad */
.ctx-item {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.42rem 0.85rem;
background: none;
border: none;
color: var(--text);
cursor: pointer;
font-size: 0.75rem;
font-family: 'DM Mono', monospace;
text-align: left;
transition: background 0.1s, color 0.1s;
white-space: nowrap;
}
.ctx-item:hover,
.ctx-item.ctx-item-active { background: var(--surface2); }
/* Ikon-kolumn (fast bredd ger visuell alignment) */
.ctx-icon {
width: 1.1rem;
text-align: center;
flex-shrink: 0;
font-style: normal;
opacity: 0.7;
}
/* Pil för sub-menyer – pushas till höger */
.ctx-arrow {
margin-left: auto;
opacity: 0.4;
font-size: 0.6rem;
}
/* Destruktiv rad */
.ctx-item-danger { color: var(--danger); }
.ctx-item-danger:hover { background: rgba(255,92,92,0.08); color: var(--danger); }
/* ── Sub-meny ── */
.ctx-sub-menu {
display: none;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 5px;
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
min-width: 200px;
max-width: 260px;
padding: 0.3rem 0;
/* Öppnas nedåt under föräldraraden */
position: absolute;
left: 0;
top: 100%;
z-index: 8100;
}
.ctx-sub-menu.open { display: flex; }
/* Sub-menyrad */
.ctx-sub-item {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
padding: 0.38rem 0.75rem;
background: none;
border: none;
color: var(--text);
cursor: pointer;
font-size: 0.72rem;
font-family: 'DM Mono', monospace;
text-align: left;
transition: background 0.1s;
white-space: nowrap;
}
.ctx-sub-item:hover { background: var(--surface2); }
.ctx-sub-item-active { color: var(--accent); }
.ctx-sub-item-danger { color: var(--danger); }
.ctx-sub-item-danger:hover { background: rgba(255,92,92,0.08); }
/* Bockmarkering i grupp-sub-menyn */
.ctx-check { color: var(--accent); font-size: 0.7rem; width: 1rem; text-align: center; }
.ctx-check-placeholder { display: inline-block; width: 1rem; }
.ctx-sub-divider { height: 1px; background: var(--border); margin: 0.2rem 0; }
.ctx-sub-empty { padding: 0.4rem 0.75rem; font-size: 0.68rem; color: var(--muted); }
/* ── Inline-fält (deadline, värde, tagg) ── */
.ctx-inline-field {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.6rem;
}
.ctx-field-label {
font-size: 0.65rem;
color: var(--text2);
white-space: nowrap;
}
.ctx-date-input,
.ctx-text-input,
.ctx-num-input {
flex: 1;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 3px;
color: var(--text);
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
padding: 0.25rem 0.4rem;
min-width: 0;
outline: none;
transition: border-color 0.15s;
}
.ctx-date-input:focus,
.ctx-text-input:focus,
.ctx-num-input:focus { border-color: var(--accent); }
.ctx-num-input { width: 70px; flex: none; }
/* Bekräfta/rensa-knappar bredvid inputs */
.ctx-go-btn,
.ctx-clear-btn {
background: none;
border: 1px solid var(--border2);
border-radius: 3px;
color: var(--text2);
cursor: pointer;
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
padding: 0.2rem 0.45rem;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.ctx-go-btn:hover { border-color: var(--accent); color: var(--accent); }
.ctx-clear-btn:hover { border-color: var(--danger); color: var(--danger); }
/* ── Tagg-chips i sub-menyn ── */
.ctx-current-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.4rem 0.6rem 0.25rem;
}
.ctx-tag-chip {
display: inline-flex;
align-items: center;
gap: 0.2rem;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 999px;
padding: 0.1rem 0.45rem 0.1rem 0.5rem;
font-size: 0.62rem;
color: var(--text2);
}
.ctx-tag-remove {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 0.55rem;
padding: 0 0.1rem;
line-height: 1;
transition: color 0.1s;
}
.ctx-tag-remove:hover { color: var(--danger); }
/* ── Kommentarsfält ── */
.ctx-comment-fields {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.4rem 0.6rem;
}
.ctx-textarea {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 3px;
color: var(--text);
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
padding: 0.3rem 0.45rem;
resize: vertical;
outline: none;
min-height: 56px;
transition: border-color 0.15s;
}
.ctx-textarea:focus { border-color: var(--accent); }
.ctx-save-comment-btn {
align-self: flex-end;
background: var(--accent);
border: none;
border-radius: 3px;
color: #0d0d0d;
cursor: pointer;
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
font-weight: 600;
padding: 0.3rem 0.7rem;
transition: opacity 0.15s;
}
.ctx-save-comment-btn:hover { opacity: 0.85; }
/* ═══════════════════════════════════════════════════════════════
MÖTESFÄLT OCH PLATS
═══════════════════════════════════════════════════════════════ */
/* Kolumnbredder för plats och mötestid i tabellen */
.col-location { width: 120px; min-width: 80px; }
.col-meetingTime { width: 90px; min-width: 70px; text-align: center; }
@media (max-width: 640px) {
.col-location, .col-meetingTime { display: none; }
}
/* Mötesfält-sektion i modal */
#meetingSection {
background: var(--surface2);
border: 1px solid var(--border);
border-left: 3px solid #f5a623;
border-radius: 5px;
padding: 0.75rem 0.9rem 0.65rem;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.meeting-section-header {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.1rem;
}
.meeting-section-icon {
font-size: 0.85rem;
line-height: 1;
}
/* Liten tidszonshint under timezone-inputen */
.meeting-tz-hint {
display: block;
font-size: 0.6rem;
color: var(--muted);
margin-top: 0.2rem;
font-family: 'DM Mono', monospace;
letter-spacing: 0.02em;
}
/* Platsfält – inga extra regler behövs (ärver .finput) */
/* Plats-badge i list- och kanban-celler */
.location-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.65rem;
color: var(--text2);
font-family: 'DM Mono', monospace;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location-badge::before {
content: '\1F4CD'; /* 📍 */
flex-shrink: 0;
font-style: normal;
}
/* Mötestid-badge */
.meeting-time-badge {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.65rem;
color: var(--text2);
font-family: 'DM Mono', monospace;
white-space: nowrap;
}
.meeting-time-badge::before {
content: '\1F554'; /* 🕔 */
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
MODAL VIEW-MODE (mobil)
Aktiveras av openEdit() på skärmar ≤ 640px.
Gör alla fält visuellt låsta tills användaren tappar på dem.
Interaktionsmodell:
JS lägger till ett genomskinligt tap-fångarlager (#modalViewShield)
som täcker hela .modal-body. Lagret fångar click-events och anropar
_modalActivateEditMode() med rätt fält via elementFromPoint().
pointer-events:none på fälten hindrar tangentbordet från att öppnas
spontant (t.ex. vid scroll), men stoppar INTE JS-lagrets click-hantering
eftersom lagret ligger OVANFÖR fälten i DOM-ordning.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Fälten är visuellt inaktiva – tangentbordet öppnas inte.
pointer-events:none hindrar webbläsarens egna focus/tangentbordslogik.
Taps fångas istället av #modalViewShield ovanför. */
.modal-view-mode .tab-panel input,
.modal-view-mode .tab-panel select,
.modal-view-mode .tab-panel textarea,
.modal-view-mode .tab-panel .tags-wrap,
.modal-view-mode .tab-panel .md-editor-wrap {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
/* Subtilt "tap för att redigera"-utseende: transparent ram, standard bakgrund */
.modal-view-mode .tab-panel input,
.modal-view-mode .tab-panel select,
.modal-view-mode .tab-panel textarea {
background: var(--surface);
border-color: transparent;
color: var(--text);
cursor: default;
}
/* Markdownfältens preview blockeras också – scroll via #modalViewShield */
.modal-view-mode .tab-panel .md-preview {
pointer-events: none;
}
/* Knappar i modal-headern och flik-knapparna ligger utanför .modal-body
och påverkas inte av #modalViewShield – de fungerar alltid */
.modal-view-mode .modal-header,
.modal-view-mode .detail-tabs {
pointer-events: auto;
}
/* Tap-hint: subtil pulsanimation på första fältet för att signalera
att ett tap aktiverar redigeringsläget. Visas bara i view-mode. */
.modal-view-mode .tab-panel .fgroup:first-child input {
animation: modal-view-pulse 2.5s ease-in-out 0.4s 2;
}
@keyframes modal-view-pulse {
0%, 100% { border-color: transparent; }
50% { border-color: var(--border2); }
}
/* #modalViewShield – genomskinligt tap-fångarlager (sätts av JS).
position:absolute kräver position:relative på .modal-body (sätts av JS).
z-index:10 placerar lagret ovanför fält men under modal-header/tabs
(som ligger utanför .modal-body). */
#modalViewShield {
position: absolute;
inset: 0;
z-index: 10;
cursor: text;
background: transparent;
}
}
/* ═══════════════════════════════════════════════════════════════
MODAL FAB (mobil)
Flytande spara/stäng-knappar som visas i uppgiftsmodalen på
mobil när redigeringsläge är aktivt. Positioneras längst ned
i overlay:n på samma sätt som .fab-new-task i listläget.
Skapas dynamiskt av _updateModalFab() i tasks.js.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.modal-fab {
position: fixed;
bottom: 1.4rem;
right: 1.2rem;
z-index: 1100; /* över modal (z-index 1000) */
display: none; /* visas via JS (_updateModalFab) */
flex-direction: column;
gap: 0.55rem;
align-items: center;
pointer-events: auto;
}
/* Spara-knapp – accentfärgad (samma stil som .fab-new-task) */
.modal-fab-save {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--accent);
color: #0d0d0d;
border: none;
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(200,245,100,0.2);
transition: opacity 0.15s, transform 0.15s;
-webkit-tap-highlight-color: transparent;
}
.modal-fab-save:active { opacity: 0.85; transform: scale(0.93); }
/* Stäng-knapp – neutral, lite mindre */
.modal-fab-close {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
color: var(--text2);
border: 1px solid var(--border);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
transition: opacity 0.15s, transform 0.15s;
-webkit-tap-highlight-color: transparent;
}
.modal-fab-close:active { opacity: 0.8; transform: scale(0.93); }
}
/* ═══════════════════════════════════════════════════════════════
PARSE-SUMMARY
Bekräftelserad under namnfältet i uppgiftsmodalen.
Visas av showParseSummary() i parser.js när fritext-parsern
hittar trigger-tokens i namnfältet (t.ex. !hög #tagg ~4h).
Döljs via display:none av JS när fältet är tomt.
═══════════════════════════════════════════════════════════════ */
.parse-summary {
display: none; /* visas av JS */
font-size: 0.65rem;
color: var(--accent);
margin-top: 0.2rem;
padding: 0.15rem 0;
line-height: 1.4;
letter-spacing: 0.01em;
word-break: break-word;
}
/* ═══════════════════════════════════════════════════════════════
UPPGIFTSFÄRGER – kontextmeny-palett
Renderas dynamiskt i högerklick-kontextmenyn av render.js /
tasks.js via _renderColorPalette(). Palettvalet skriver
task.color (hex-sträng eller null) och triggar save() +
renderMain().
Publikt API (CSS-klasser):
.ctx-color-palette – flex-wrap-container för alla färgrutor
.ctx-color-swatch – enskild färgruta (rund, klickbar)
.ctx-color-swatch--active – markerar vald färg med vit ring
.ctx-color-swatch--none – "ingen färg"-ruta med streckad ram
═══════════════════════════════════════════════════════════════ */
.ctx-color-palette {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px;
}
/* Varje färgruta – rund, klickbar */
.ctx-color-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.15);
cursor: pointer;
transition: transform 0.1s, border-color 0.1s;
flex-shrink: 0;
}
.ctx-color-swatch:hover {
transform: scale(1.2);
border-color: rgba(255,255,255,0.5);
}
/* Aktiv färg: tydlig vit ring utanför rutan */
.ctx-color-swatch--active {
outline: 2px solid var(--text);
outline-offset: 2px;
border-color: transparent;
}
/* "Ingen färg"-rutan: streckad ram, diagonalt rutmönster */
.ctx-color-swatch--none {
border: 2px dashed var(--border2);
background-image: linear-gradient(
45deg,
var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%
);
background-size: 6px 6px;
}
.ctx-color-swatch--none:hover {
border-color: var(--text2);
}
|