Asana by juuxstar

/* ==UserStyle==
@name           Asana
@namespace      userstyles.world
@version        1.0.0
==/UserStyle== */
/* LIST */
.BoardColumnScrollableContainer-scrollable {
    margin-right: -5px;
}
.BoardColumnScrollableContainer-scrollable::-webkit-scrollbar {
    width: 5px;
}
.BoardColumnScrollableContainer-scrollable::-webkit-scrollbar-thumb {
    background: #AAA;
    border-radius: 5px;
}


/* LIST HEADER */
.BoardColumn {
    .BoardColumnHeader {
        display: flex;
        background: #4b4b98bf;   
        box-shadow: 0 5px 5px 0 rgb(7 9 12 / 29%);
    }
    .BoardColumnHeader-leftContents {
        margin: auto;
    }
    .BoardColumnHeader *[aria-label="Add task"] {
        fill: white !important;
    }
}

/* CARDS */
.BaseDraggableCard.BaseDraggableCard--default.BaseSelectableCard--isNotSelected.BaseSelectableCard--isEnabled.BaseCard:not(:focus):not(.BaseCard--isFocused) {
    box-shadow: 0 5px 5px 0 rgb(7 9 12 / 29%);
}

.BoardCardLayout-completionIndicator {
    display: none;
}

.BoardCardLayout-title.BoardCardLayout-title--indented {
    text-indent: 0;
}

.BoardCardLayout-contentAboveSubtasks {
    display: flex;
    flex-direction: column;
}

.BoardCardLayout-image:empty {
    display: none;
}

/* hide parentTask if it's empty */
.BoardCardLayout-parentTask:empty {
    margin: 0;
}

/* customize the order of the various parts of each card */
.BoardCardLayout-projectPills {
    order: 0;
    margin-bottom: 0;
}
.BoardCardLayout-customPropertiesAndTags {
    order: 1;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 5px;
}
.BoardCardLayout-image {
    order: 2;
    margin-bottom: 0!important;
}
.BoardCardLayout-titleAndIndicator {
    order: 3;
    margin: 5px 10px;
}
.BoardCardLayout-assigneeDueDateActions {
    order: 10;
    margin-bottom: 10px;
}

.BoardCardLayout-customPropertiesAndTags .BoardCardCustomPropertiesAndTags {
    justify-content: space-between;
}

/* AddTask Button */
.BoardAddCardSubtleButton {
    opacity: 0.5;
}
.BoardAddCardSubtleButton:hover {
    opacity: 0.75;
}

/* shadow on Task details card */
.FullWidthPageStructureWithDetailsOverlay-detailsOverlay {
    box-shadow: -12px 0px 17px -4px rgba(0,0,0,0.4) !important;
}

/* reduce with on group labels */
.TaskPaneFields-customFieldTables > .LabeledRowStructure,
.TaskPaneFields-customFieldTables + .LabeledRowStructure {
    
    > .LabeledRowStructure-left {
        width: 50px!important;
    }
}

.TaskPane-premiumFeaturesSection {
    .TaskPaneFields {
        
        /* 2-column layout for Fields */
        /*display: flex;
        flex-flow: row wrap;*/

        /* make sure the header takes up an entire row */
        > .CollapsibleHeader {
            flex-grow: 1;
            width: 100%;
        }
        
        /* double up some fields into 2 columns */
        .LabeledRowStructure {
            width: 100%;            
        }
        
        .TaskPaneFields-showMoreCustomFieldsContainer, #task_pane_dependencies_label {
            width: 100%;
            border-bottom: 1px solid #AAA;
            margin-bottom: 1rem;
        }

        /* Github custom fields and others should get more width */
        .TaskPaneFields-showMoreCustomFieldsContainer ~ .LabeledRowStructure  {
            width: 100% !important;
        }
        
        .TaskDescription {
            border-top: 1px solid #AAA;
        }

    }
    
    /* reverse the order of the comments so earlier ones are at the top */
    .TaskStoryFeed {
        display: flex;
        flex-flow: column-reverse;
    }
}

/* hide description section label */
.TaskPane {
    .TaskPaneFields .LabeledRowStructure.TaskPaneFields-taskDescription,
    .TaskPaneSubtasks .LabeledRowStructure.TaskPaneSubtasks-label {
        display: none;
    }
    .TaskPaneFields .LabeledRowStructure + .TaskDescription {
        padding-top: 1rem;
    }
}