1  /* 
 2  Author:  TfTHacker - more info  https://tfthacker.com/eisenhower-matrix-kanban
 3  Date:    2024-02-27
 4  LICENSE: Permission is granted to modify and distribute copies of this CSS file, that credit is given to TfThacker (https://tfthacker.com/) 
 5           and the source (https://tfthacker.com/eisenhower-matrix-kanban) remains linked and credited.  
 6  */
 7  
 8  .kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
 9    width: 100%;
10    display: grid;
11    grid-template-columns: repeat(2, 1fr);
12    grid-template-rows: repeat(2, 1fr);
13    gap: 15px;
14    height: 100%;
15    overflow-y: auto; /* constrols the vertical scrolling, which is usually disabled in the kanban board */
16  
17    .kanban-plugin__lane-wrapper {
18      grid-column: span 1;
19      grid-row: span 1;
20      height: 100%;
21    }
22  
23    .kanban-plugin__lane-wrapper:nth-child(1) > div {
24      background-color: rgba(var(--color-red-rgb), 0.2);
25    }
26  
27    .kanban-plugin__lane-wrapper:nth-child(2) > div {
28      background-color: rgba(var(--color-blue-rgb), 0.2);
29    }
30  
31    .kanban-plugin__lane-wrapper:nth-child(3) > div {
32      background-color: rgba(var(--color-green-rgb), 0.2);
33    }
34  
35    .kanban-plugin__lane-wrapper:nth-child(4) > div {
36      background-color: rgba(var(--color-yellow-rgb), 0.2);
37    }
38  }
39  
40  body:not(.is-mobile) {
41    .kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
42      .kanban-plugin__lane-wrapper {
43        width: 100%;
44      }
45    }
46  }
47  
48  body.is-mobile {
49    .kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
50      /* make the card one line on mobile to make the matrix compact */
51      .kanban-plugin__item-title {
52        line-height: 1.2;
53        max-height: 1.2em;
54        overflow: hidden;
55        text-overflow: ellipsis;
56        white-space: nowrap;
57      }
58    }
59  }