A stylesheet for a very compact and post-it-colored Jira sprint board

style.css

/*
A COMPACT KIOSK-LIKE THEME FOR JIRA KANBAN BOARD
@BastiTee

URL-FILTERING
-------------
- Use this regex in stylus/browser: .*rapidView=42[^v]*
- Make sure to change the '42' to your board's number

*/
/* GLOBAL COLORS  */
:root {
    --white: #FFFFFF;
    --black: #333;
    --red: #FBE6E0;
    --blue: #CFE2F7;
    --blue-light: #DEE6F2;
    --gray: #BFBFBF;
    --gray-light: #F6F6F6;
    --jira-font-default: #5e6c84;
    --opacity-done: 0.5
}
/* COLORS: PAGE / TABLE HEADER */
#ghx-column-headers h2 {
    color: var(--white);
}
#ghx-column-headers li {
    background-color: var(--gray) !important;
}
/* COLORS: COLUMNS IN EACH SWIMLANE */
.ghx-column,
.ghx-parent-group {
    background-color: var(--white) !important;
}
.ghx-columns {
    background-color: var(--gray-light) !important;
}
.ghx-swimlane-header {
    background-color: var(--blue) !important;
}
.aui-lozenge-current {
    background-color: var(--white) !important;
    color: var(--jira-font-default) !important;
}
/* COLORS: SUBTASKS */
.ghx-issue {
    background-color: var(--gray-light) !important;
}
.ghx-issue.ghx-done {
    background-color: var(--white) !important;
}
.ghx-issue.ghx-flagged {
    background-color: var(--red) !important;
}
/* COLORS: SWIMLANES BY LABEL */
.ghx-swimlane-header[aria-label*="Retro Action Items"] {
    background-color: var(--white) !important;
}
.ghx-swimlane-header[aria-label*="/UX/"] {
    background-color: var(--blue-light) !important;
}
/* COLORS: SWIMLANES BY STATUS */
.ghx-swimlane-header[aria-label*="Retro Action Items"] {
    background-color: var(--white) !important;
}
.ghx-swimlane-header[aria-label*="/UX/"] {
    background-color: var(--blue-light) !important;
}

/* COMPACT WINDOW */
div[data-testid^="Content"],
#content {
    padding: 0em 0em 0em 0.5em !important;
    margin: -5.2em 0em 0em 0em !important;
}

/* HIDE IRRELEVANT CONTROLS */
#navigation-app,
div[data-testid^="ContextualNavigation"],
div[data-testid^="rapidboard-breadcrumbs"],
div[data-ds--page-layout--slot^="top-navigation"],
*[class^="BreadcrumbsContainer"],
*[data-testid^="atlassian-navigation"],
#ghx-operations,
.ghx-top-header,
.ghx-qty,
.ghx-limits,
.ghx-sprint-goal,
.ghx-extra-fields,
.ghx-stat-1 .ghx-field-icon[data-tooltip="Sub-task"],
.ghx-stat-1 .ghx-field-icon[data-tooltip="Story"],
.ghx-stat-1 .ghx-field-icon[data-tooltip="Task"],
.ghx-stat-1 .ghx-field-icon[data-tooltip="Bug"],
.ghx-stat-1 .ghx-days,
.ghx-highlighted-field,
.ghx-row.ghx-stat-2 a,
.ghx-stat-1,
.ghx-swimlane .ghx-swimlane-header .aui-button,
.ghx-grabber,
.ghx-description {
    display: none !important;
}

/* COMPACT SWIMLANE */
.ghx-issue {
    padding: 0.1em 0em 0.1em 0.4em !important;
}
.ghx-row {
    font-size: 80%;
    padding: 0em !important;
    margin: 0em !important;
}
.ghx-swimlane-header,
.ghx-description,
.ghx-swimlane-header {
    margin-right: 0em !important;
}
.ghx-swimlane-avatar img {
    filter: grayscale(100%);
}
.ghx-swimlane-header:after {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.ghx-bandaid {
    box-shadow: none !important;
}
.jira-issue-status-lozenge,
.aui-lozenge-current {
    font-weight: normal !important;
    font-size: 90%;
    border: 0;
    padding: 0.2em 0.2em 0.2em 0.2em;
}
.jira-issue-status-lozenge {
    margin-right: 0em !important;
}

/* OPAQUE DONE STORIES */
.ghx-done {
    opacity: var(--opacity-done) !important;
}

/* STICK ASSIGNE TO TOP RIGHT */
.ghx-row.ghx-stat-2 span {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

/* TRUNCATE LONG TASK DESCR. WITH ELLIPSIS ON SECOND LINE */
.ghx-issue .ghx-summary {
    text-overflow: ellipsis;
    min-height: 2.3em !important;
    max-height: 2.3em !important;
    width: 84% !important;
    margin-left: 0em !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* MAKE 6th AND SUBSEQUENT SUBTASK OR DONE TASK IN SWIMLANE MUCH SMALLER */
.ghx-columns .ghx-issue:nth-of-type(1n+6),
.ghx-issue.ghx-done {
    font-size: 50% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 1.1em !important;
    max-height: 1.1em !important;
    opacity: var(--opacity-done) !important;
}
.ghx-columns .ghx-issue:nth-of-type(1n+6) .ghx-stat-1,
.ghx-columns .ghx-issue:nth-of-type(1n+6) .ghx-stat-2,
.ghx-issue.ghx-done .ghx-stat-1,
.ghx-issue.ghx-done .ghx-stat-2 {
    display: none !important;
}

/* OVERLAP DONE TASKS */
.ghx-issue.ghx-done {
    margin-bottom: -0.8em !important;
}

/* HEADER */
#ghx-column-headers {
    padding: 0.2em 0em 0.4em 0em !important;
    margin: 0em !important;
}
.ghx-column-header-flex-1 {
    width: 100% !important;
}
#ghx-column-headers h2 {
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: bold !important;
}