blocksy-tainacan/tainacan-blocksy/sass/tainacan-item-archive.scss

/* Tainacan Items list customization */
.theme-items-list {
    --tainacan-font-family: var(--theme-font-family, var(--fontFamily, inherit));
    --tainacan-base-font-size: var(--theme-font-size, var(--fontSize, 1em));
    --tainacan-item-hover-background-color: var(--tainacan-item-background-color, white);
    --tainacan-item-heading-hover-background-color: var(--tainacan-item-background-color, white);
    --tainacan-input-border-color: var(--theme-form-field-border-initial-color, var(--form-field-border-initial-color, #e0e5eb));
    --tainacan-skeleton-color: var(--tainacan-item-background-color, white);
    --tainacan-input-border-radius: var(--theme-form-field-border-radius, var(--form-field-border-radius, 3px));
    --tainacan-button-border-radius: var(--theme-button-border-radius, var(--button-border-radius, 5px));
    
    &:not(.is-fullscreen) {
        justify-content: center;
        background: transparent !important;
        @include display-grid;
        grid-template-columns: 0fr 100% 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
          ". searchcontrol ."
          "itemslist itemslist itemslist";
    }

    /* Search control */
    .search-control {
        grid-area: searchcontrol;
        border-radius: 0 0 var(--theme-border-radius, var(--borderRadius, 3px)) var(--theme-border-radius, var(--borderRadius, 3px));
        margin: 5px 0px;
        padding: 20px 0px 6px 0px !important;

        .search-control-item {
            margin-bottom: 20px !important;
        }

        .control.has-icons-right .icon .mdi-magnify::before {
            color: var(--tainacan-secondary, #3eaf7c);
        }
    }

    /* Advanced Search */
    #advanced-search-container {
        max-width: 100%;
        width: var(--maxSiteWidth,1290px);
        margin: 0.5rem auto;
        border-radius: var(--theme-border-radius, var(--borderRadius, 3px)) var(--theme-border-radius, var(--borderRadius, 3px)) 0 0;
        box-shadow: var(--theme-box-shadow, var(--boxShadow ,0 12px 18px -6px rgba(34,56,101,.04)));
        border: none;
    }

    /* Filters panel */
    #filters-modal {
        grid-area: itemslist;
        justify-self: start;
        align-self: normal;
        width: 100%;

        .modal-content {
            padding: 16px 10px 16px 0px !important;

            @media screen and (max-width: 768px){
                padding: 16px 16px 16px 6vw !important;
                background-color: var(--background-color, var(--backgroundColor, #f8f9fb));
            }

            #filters-items-list {
                background-color: var(--background-color, var(--backgroundColor, #f8f9fb));
                padding: 3px;
                margin: -3px;

                .filters-components-list {
                    margin-bottom: 24px;
                }
            }
        }

        &.tainacan-filter-list-fixed {
            left: 14px;
        }
    }

    /* Items list container */
    #items-list-area {
        grid-area: itemslist;
        justify-self: end;
        align-self: normal;
        width: 100%;

        #items-list-results {
            padding-top: 12px;
            
            .table-container {
                min-width: 100%;
                padding-top: 0px;
                padding-left: 0px;
                padding-bottom: 14px;
                padding-right: 0px;
            }
            
            /* Tainacan items list view modes */
            .tainacan-masonry-container .tainacan-masonry-item,
            .tainacan-records-container .tainacan-record,
            .tainacan-cards-container .tainacan-card,
            .tainacan-list-container .tainacan-list {
                border-radius: var(--theme-border-radius, var(--borderRadius, 3px));
                box-shadow: var(--theme-box-shadow, var(--boxShadow , 0px 12px 18px -6px rgba(34, 56, 101, 0.04)));
                border: var(--border, none);
                overflow: hidden;

                .metadata-title p {
                    font-weight: 500;
                }
                .metadata-value,
                .metadata-label {
                font-size: 0.8125em !important;
                }
            }
            .tainacan-records-container .tainacan-record,
            .tainacan-records-container .tainacan-record .list-metadata,
            .tainacan-list-container .tainacan-list {
                background-color: var(--tainacan-item-background-color, white) !important;
            }
            .tainacan-masonry-container .tainacan-masonry-item {
                display: flex !important;
                flex-direction: column-reverse;
            }
            .tainacan-cards-container .tainacan-card {
                min-height: 215px;
                max-height: 215px;

                .media .list-metadata {
                    padding: 0.125em 1.375em !important;

                    p.metadata-description {
                        max-height: 12.75em !important;
                        line-height: 1.25em;
                    }
                }
            }
            .tainacan-table {
                padding: 0 12px;
                .column-main-content p { 
                    font-weight: 500;
                }
                td p {
                    font-size: 0.725em !important;
                }
            }
            .tainacan-slide-main-view {
                iframe {
                    border: none;
                    border-radius: var(--theme-border-radius, var(--borderRadius, 3px));
                }
            }
            .tainacan-slides-list {
                .swiper-slide img {
                    border-radius: var(--theme-border-radius, var(--borderRadius, 3px));
                    padding-bottom: 0;
                }
            }

            /* Pagination */
            .pagination-area {
                border-top: none;
                margin-left: 12px;
                margin-right: 12px;

                .pagination {
                    font-weight: bold;
                    --colorActive: #ffffff;

                    .pagination-link {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        height: var(--theme-button-min-height, 40px);
                        width: 42px;
                        border-radius: var(--tainacan-button-border-radius, 4px);
                        border: 2px solid transparent;
                        font-size: 14px;
                        font-weight: 600;
                        color: var(--theme-text-color, var(--color));
                        --theme-link-initial-color: var(--theme-text-color, var(--color));
                        --theme-link-initial-color: var(--theme-text-color, var(--color));
                        transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

                        &:hover {
                            text-decoration: none;
                            border-color: var(--theme-link-hover-color, var(--linkHoverColor));
                            color: var(--theme-link-hover-color, var(--linkHoverColor));
                        }
                        &.is-current {
                            color: var(--theme-text-colorActive, var(--colorActive)) !important;
                            background: var(--theme-link-hover-color, var(--linkHoverColor));
                        }
                    }
                }
            }
        }
    }

    /* Advanced Search */
    .advanced-search-criteria-title hr {
        display: none;
    }

    /* Inputs style */
    input.input,
    .input,
    textarea.textarea,
    .textarea,
    input[type="color"].input,
    input[type="date"].input,
    input[type="datetime-local"].input,
    input[type="datetime"].input,
    input[type="email"].input,
    input[type="number"].input,
    input[type="month"].input,
    input[type="password"].input,
    input[type="search"].input,
    input[type="tel"].input,
    input[type="text"].input,
    input[type="time"].input,
    input[type="url"].input,
    input[type="week"].input {
        border-radius: var(--theme-border-radius, var(--borderRadius, 3px)) !important;
        border: 1px solid var(--tainacan-input-border-color);
    }
    .tainacan-form.tainacan-dialog footer .button {
        min-height: var(--theme-button-min-height, 40px);
    }
}

.entry-content:not(.ct-container) .theme-items-list:not(.is-fullscreen) {
    padding: 6px 18px;

    .search-control {
        padding: 20px 20px 6px 20px !important;
    }

    .table-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #filters-modal .modal-content {
        padding: 16px 10px;
    }
}

.page:not(.has-page-header-style-classic)>header+.entry-content:not(.wp-block-tainacan-faceted-search)>.theme-items-list:not(.is-fullscreen) {
    top: -52px !important;
}

/* Extra classes applied from customizer */
.page.has-filters-panel-style-boxed  {

    #filters-modal .modal-content #filters-items-list {
        border-radius: var(--theme-border-radius, var(--borderRadius, 3px));
        background-color: var(--tainacan-item-background-color, white);
        box-shadow: var(--theme-box-shadow, var(--boxShadow , 0px 12px 18px -6px rgba(34, 56, 101, 0.04)));
        padding: 20px;
    }
}

/* Tooltips and Modals are outside of the items list div */
body:not(.tainacan-admin-page) {

    .tooltip,
    .tainacan-modal,
    .tainacan-dialog {
        --tainacan-font-family: var(--theme-font-family, var(--fontFamily, inherit));
        --tainacan-base-font-size: var(--theme-font-size, var(--fontSize, 1em));
        --tainacan-secondary: var(--theme-palette-color-1, var(--paletteColor1, #3eaf7c));
        --tainacan-primary: var(--theme-form-field-border-initial-color, var(--form-field-border-initial-color, #e0e5eb));
        --tainacan-background-color: var(--background-color, var(--backgroundColor, #f8f9fb));
        --tainacan-input-color: var(--theme-text-color, var(--color, rgba(44, 62, 80, 0.9)));
        --tainacan-input-background-color: var(--theme-form-field-background-initial-color, var(--form-field-background-initial, white));
        --tainacan-input-border-color: var(--theme-form-field-border-initial-color, #e0e5eb);
        --tainacan-label-color: var(--theme-text-color, var(--color, rgba(44, 62, 80, 0.9)));
        --tainacan-info-color: var(--theme-text-color, var(--color, rgba(44, 62, 80, 0.9)));
        --tainacan-heading-color: var(--theme-heading-color, var(--theme-heading-color, rgba(44, 62, 80, 1)));
        --tainacan-input-border-radius: var(--theme-form-field-border-radius, var(--form-field-border-radius, 3px));
        --tainacan-button-border-radius: var(--theme-button-border-radius, var(--button-border-radius, 5px));
    }

    .tainacan-modal-content,
    .tainacan-dialog {
        border-radius: var(--theme-border-radius, var(--borderRadius, 6px));

        .tainacan-modal-title {
            hr {
                display: none;
            }
        }
        .tabs li {
            margin-bottom: 0px;
        }
        .modal-card-body {
            background-color: var(--tainacan-background-color, white);
        }
        footer .button {
            min-height: var(--theme-button-min-height, 40px);
        }
    }
}

/* Collection Items List */

// This affects all header types
body[class*=' post-type-archive-tnc_col_'],
body[class*=' tax-tnc_'],
body[data-prefix="tainacan-repository-items_archive"],
body[data-prefix="tainacan-terms-items_archive"] {
    .hero-section[data-type="type-1"] {
        padding-top: var(--theme-content-vertical-spacing);
    }
    .hero-section.has-thumbnail-enabled > [class*="ct-container"] {
        display: block; // Only here the float will work
    }
    .hero-section.has-thumbnail-enabled {
        .page-title {
            margin-top: 0px;
            margin-bottom: 4px;
            display: block;
            clear: none;
        }
        .page-description ,
        .page-description p {
            display: block !important;
            clear: none;
        }
    }
    
    .ct-title-label {
        font-weight: normal;
        &::after {
            content: ': ';
        }
    }
    .collection-thumbnail {
        max-width: calc(var(--thumbnail-size, 20%) - 24px);
        float: left;
        margin-right: 24px;

        img {
            border-radius: var(--theme-border-radius, var(--borderRadius, 3px));
        }
    }
}
// This affects only tainacan special header types (gradient and boxed)
.tainacan-collection-header {
    display: flex;
    padding: 36px 18px 28px 18px;
    justify-content: center;
    align-items: center;
    background-color: var(--tainacan-background-color, #f8f9fb);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .tainacan-collection-header__box {
        width: 100%;
        padding: 20px;

        >.collection-thumbnail+* {
            margin-top: 0px;
        }
    }
}

.page.has-page-header-style-boxed {
    .hero-section {
        margin-bottom: 0.125rem;
    }
    .theme-items-list:not(.is-fullscreen) {
        grid-template-columns: 1fr minmax(auto, var(--maxSiteWidth,1300px)) 1fr;
    }
    .tainacan-collection-header .tainacan-collection-header__box {
        width: var(--maxSiteWidth, 1290px);
        border-radius: var(--theme-border-radius, var(--borderRadius, 3px)) var(--theme-border-radius, var(--borderRadius, 3px)) 0 0;
        background-color: var(--tainacan-item-background-color,#fff);
        box-shadow: var(--theme-box-shadow, var(--boxShadow ,0 12px 18px -6px rgba(34,56,101,.04)));
    }
    .search-control {
        background-color: var(--tainacan-item-background-color, white);
        box-shadow: var(--theme-box-shadow, var(--boxShadow , 0px 12px 18px -6px rgba(34, 56, 101, 0.04)));
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}