cssOMS/portlet.scss

.portlet {
    border: 1px solid var(--box-border);
    //box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
    box-sizing: border-box;
    margin-top: 1rem;
    //overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view)
    //border-top: 2px solid var(--box-highlight);

    //border-top-left-radius: 4px;
    //border-top-right-radius: 4px;
    //border-bottom-left-radius: 4px;
    //border-bottom-right-radius: 4px;

    .portlet-head {
        background: #fff;
        //border-top-left-radius: 4px;
        //border-top-right-radius: 4px;
        border-bottom: 1px solid #ebedf2;
        padding: .7rem 1rem .7rem 1rem;
        font-weight: 300;
    }

    .portlet-foot {
        background: #fff;
        //border-bottom-left-radius: 4px;
        //border-bottom-right-radius: 4px;
        border-top: 1px solid #ebedf2;
        padding: .7rem 1rem .7rem 1rem;
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: .5rem;
    }

    .portlet-body > h2 {
        border-bottom: 1px solid #ebedf2;
    }

    .portlet-separator {
        border-bottom: 1px solid #ebedf2;
    }
}

.plain-portlet {
    box-sizing: border-box;
    margin-top: 1rem;
    overflow-x: auto;
}

.portlet-body {
    background: #fff;
    padding: 1rem;

    //border-top-left-radius: 4px;
    //border-top-right-radius: 4px;
    //border-bottom-left-radius: 4px;
    //border-bottom-right-radius: 4px;
}

.portlet.highlight-1 {
    background: var(--color-red);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-red);
        border: 0;
    }
}

.portlet.highlight-2 {
    background: var(--color-green);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-green);
        border: 0;
    }
}

.portlet.highlight-3 {
    background: var(--color-blue);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-blue);
        border: 0;
    }
}

.portlet.highlight-4 {
    background: var(--color-yellow);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-yellow);
        border: 0;
    }
}