onion/sass/ascribe_notification_list.scss

.notification-header, .notification-wrapper {
    min-width: 350px;
    width: 100%;
}

.notification-header {
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 0.3em 1em;
    background-color: #eeeeee;
}

.notification-wrapper {
    height:8.4em;
    border-bottom: 1px solid #eeeeee;
    margin: 0;
    padding: 0.5em;
    color: black;

    // ToDo: Include media queries for thumbnail
    .thumbnail-wrapper {
        width: 7.4em;
        height: 7.4em;
        padding:0;
        cursor: pointer;
        text-align: center;
        img {
            max-width: 100%;
            max-height: 100%;
        }
        &::before {
                content: ' ';
                display: inline-block;
                vertical-align: middle; /* vertical alignment of the inline element */
                height: 100%;
            }
    }
    h1 {
        margin-top: 0.3em;
        margin-bottom: 0.15em;
        font-size: 1.8em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sub-header {
        margin-bottom: 0.6em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .notification-action {
        color: $ascribe-pink;
    }
}

.notification-menu .dropdown-menu {
    background-color: white;
    border-top: 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;

    li:hover {
        background-color: $ascribe-white;
    }
}

.notification-amount {
    padding: 0.3em;
}

.ascribe-global-action {
    text-align: center;
    padding: 1em;
    color: black;
    border: 1px solid #cccccc;
    background-color: white;
    margin-top: 1px;
}