Asana KABA style by KABA

/* ==UserStyle==
@name         Asana KABA style
@version      1.0.0
@namespace    asana.com
==/UserStyle== */

@-moz-document url-prefix("https://app.asana.com/") {
code {
    padding: .2em .4em;
    background: rgba(175 184 193 / .15);
    color: #dc3545;
    font-size: .888em;
}

.FocusModePage-taskPane {
    flex-grow: 1;
    max-width: 800px;
}

.TaskPane-titleRow,
.TaskPane-resizeListenerContainer,
.TaskPane-attachments { order: -1 }

/* .SingleTaskPaneFields, */
.TaskPaneFields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25em 1.5rem;
}
.LabeledRowStructure {
    display: flex;
    align-items: center;
    max-width: 100%;
}
/* .TaskDependencies-labeledRowStructure
    ~ .LabeledRowStructure:nth-child(-n+8) {
        position: relative;
        padding: 5px 12px;
        min-width: calc((100% - 24px) / 4 - 1.5rem * 1.607);
    }
.TaskDependencies-labeledRowStructure
    ~ .LabeledRowStructure:nth-child(-n+8)::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 4px;
        border: 1px solid var(--color-border);
        content: ""
    } */
.LabeledRowStructure-labelContainer,
.TaskProjects-labeledRowStructure /*
    */ .LabeledRowStructure-labelContainer,
.TaskProjectToken {
    height: auto;
}

.LabeledRowStructure-left {
    width: auto !important;
    font-weight: 700;
}

/* Board */
.BoardCardMenuDropdownButton::before {
    /* Adjust clickable range */
    position: absolute;
    inset: 0;
    content: "";
}

/* Detail */
.LabeledRowStructure ~ div:not(.LabeledRowStructure) {
    order: -1;
    min-width: 100%;
}
/* - Contents */
/* #TaskDescriptionView .ProsemirrorEditor * ~ p {
    margin-top: 1em;
}
#TaskDescriptionView .ProsemirrorEditor * ~ :where(ul, ol) {
    margin-top: .5em;
} */
/* Detail heading */
/* .LabeledRowStructure ~ div:not(.LabeledRowStructure) /*
    *
/ .LabeledRowStructure {
        display: none;
    } */
.SubtleTokenButton--subtle:not(:hover):not(:focus-within) /*
    */ .SubtleTokenButton-removeButton { display: none }
.TaskPaneAssigneeToken { position: relative; z-index: 3 }
.TaskDueDateToken { margin: 0 }
.SingleTaskPaneFields /*
    */ .ThemeableRectangularButton { margin-right: 0 }
.TaskProjects-projects {
    flex-direction: unset;
    justify-content: unset;
}
.TaskProjects-labeledRowStructure { width: 100% }
.TaskProjects-projectList { display: flex; flex-wrap: wrap }
.TaskProjectToken-potTokenizerPill { max-width: unset }
/* .TaskProjectToken:not(:hover) .TaskProjectTokenButton { display: none } */
.TaskProjects-projectList
    +
.TaskProjects-addToProjects { margin-block: 2px }

/* GitHub */
.WidgetSummary {
    border: 0;
    padding: 8px;
}
.WidgetDetails { display: none }
.WidgetSubtitle { margin: 0 }
}

@-moz-document regexp("https://app.asana.com/\\d/\\d+/\\d+/f") {
body,
.AppRoot-fullPage { overflow: revert }
.AppRoot-fullPage { position: revert }
.AppRoot.AppRoot--responsive {
    position: revert;
    height: revert;
    overflow: revert;
}

.TaskPaneToolbar {
    --bg: #fff;

    position: sticky;
    top: 0;
    z-index: 1;
    background-color: color-mix(in srgb, var(--bg) 60%, #0000);
    backdrop-filter: blur(8px);

    &:has(.TaskCompletionStatusIndicator--complete) {
        --bg: var(--color-success-background);
    }
}
.TaskPaneFooter {
    position: sticky;
    bottom: 0;
}
.TaskPaneToolbarAnimation-statusButtonRow {
    display: none;
}
.TaskPaneToolbarAnimation-row {
    &.TaskPaneToolbarAnimation-row--hidden {
        opacity: 1;
        max-width: none;
    }
}
}