Readable Productboard by DHo

/* ==UserStyle==
@name         Readable Productboard
@version      20241031.20.43
@namespace    https://userstyles.world/user/DHo
@description  Mo better Pb experience including tweaks to descriptions to have heading and paragraph spacing like Jira.
@author       DHo
@license      No License
==/UserStyle== */

@-moz-document regexp("(https://)(.+)(\\.productboard\\.com/)(.*)") {
/* sans-serif font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* monospace font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
    --font-fam: 'Public Sans', sans-serif;
    --font-fam-mono: 'Fira Code', monospace;
    --rem: 16px;
    --font-sz-min: 14px;
    --font-sz-mini: 12px;
    --font-wt-lt: 400;
    --font-wt-reg: 500;
    --font-wt-bold: 700;
    --font-wt-black: 900;
    --clr-text: #000;
    --clr-highlight: #FBE8B1;
    --clr-blue-slate-tint: #aab7bf;
    --clr-blue-slate-tint-2: hsl(208, 24%, 88%);
    --clr-blue-slate-lt: #a2b8cd;
    --clr-blue-slate-med: #55718d;
    --clr-blue-slate-dk: #3b5c7d;
    --clr-blue-med: #386b9f;
    --clr-blue-dk: #0C2E4E;
}

* {
    font-family: var(--font-fam);
}
body {
    font-size: var(--rem);
    color: var(--clr-text);
    font-weight: var(--font-wt-reg);;
}

/* type size */

div[data-testid="FeaturesBoard-FeatureTitle-Cell"],
div[data-testid="FeaturesBoard-FeatureTitle-Cell"] > a,
div[data-testid="Roadmap-FeatureCard"] a div {
    font-size: var(--rem);
}

/* 
========================
Roadmap 
========================
*/

/* Column headers */ 
div[data-testid="Roadmap-ColumnHeader"] div {
    font-size: var(--font-sz-min);
    font-weight: var(--font-wt-black);
}

/* subfeatures */
div.cTnnuE {
    font-size: var(--font-sz-min);
}

/* Component headers */
div[data-testid="Roadmap-TopLevelComponentCard"] {
    font-size: var(--rem);
    font-weight: var(--font-wt-lt);
    background: var(--clr-blue-dk) !important;
}

/* 
======================== 
Left bar 
======================== 
*/

/* Scrolling nav container */

div.scroll-shadow__StyledScrollShadow-sc-19nlq98-0 {
    background-image: none;
    background-color: hsl(208, 24%, 88%);
}

/* ------ Nav - active item ------ */

.ixmUrt, .kIwFsV, .sKrxO {
    background-color: var(--clr-blue-slate-lt);
    color: var(--clr-text);
    box-shadow: inset 0px 0px 4px rgba(0,0,0,.24);
}
.ixmUrt svg.ui-icon,
.kIwFsV svg.ui-icon,
.sKrxO svg.ui-icon {
    color: var(--clr-blue-slate-dk);
}

/* Nav - hover */

a[data-testid="FavoriteItem"] > div:hover,
a[data-testid="BoardItem"] > div:hover,
a[data-testid="BoardItem-Locked"] > div:hover,
a[data-testid="TeamspaceItem"] > div:hover,
a[data-testid="StaticMenuItem"] div:hover {
    background-color: var(--clr-blue-slate-tint-2);
}
    
/* 
======================== 
Document / new boards
======================== 
*/

/* Document code blocks */
code {
    font-family: var(--font-fam-mono);
}

/* Comments */
.tiptap__paragraph.tiptap__is-node-focused .tiptap-thread--unresolved {
	background-color: rgba(96,203,207,.48);
}

/*
======================== 
Feature board 
======================== 
*/

div.boardRow span.sc-gEvDqW {
    font-size: var(--font-sz-mini);
}

/* 
======================== 
Insights
======================== 
*/

.snippetSuggestion {
    font-weight: var(--font-wt-lt);
}

/* List editing area */

.dnCWBw {
    padding-left: 9px;
}

/* Product row highlight */

.lEKJqtjn1cVuzmzLtCym.X7GJUQxvxJp0sLemrdI9 {
    background: hsl(208, 24%, 88%); 
}

/* Product hierarchy icon */

[aria-label="ProductIcon"] {
    color: hsl(193, 18%, 48%);
}

.lEKJqtjn1cVuzmzLtCym.X7GJUQxvxJp0sLemrdI9:hover [aria-label="ProductIcon"] {
    color: #055468;
}

/* ------- Detail editor ------- */

/* text */
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > p, 
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > ol, 
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > ul, 
#fullscreen-editor-scrollable-element-id div[role="textbox"] > p, 
#fullscreen-editor-scrollable-element-id div[role="textbox"] > ol,
#fullscreen-editor-scrollable-element-id div[role="textbox"] > ul, 
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > p,
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > ol,
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > ul {
    padding-bottom: 1em;
    line-height: 1.32em;
}
/* headings */
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > h1, 
#fullscreen-editor-scrollable-element-id div[role="textbox"] > h1, 
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > h1 {
    padding-bottom: .72em;
    padding-top: .24em;
    line-height: .9em;
}
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > h1 span, 
#fullscreen-editor-scrollable-element-id div[role="textbox"] > h1 span,
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > h1 span {
    font-weight: var(--font-wt-black) !important;
}
div[data-testid="SidebarContainer"] #sidebar-wrapper div[role="textbox"] > h2, 
#fullscreen-editor-scrollable-element-id div[role="textbox"] > h2, 
div[data-testid="PmEntitySidebar-Description"] div[role="textbox"] > h2 {
    padding-bottom: .78em;
    padding-top: 0;
    line-height: .9em;
}
}