homebrewery/client/homebrew/pages/archivePage/archivePage.less

body {
    height: 100vh;

    .content {
        height: 100%;
    }
}

.archivePage {
    overflow-y: hidden;
    height: 100%;
    background-color: #2C3E50;

    .content {
        display: grid;
        grid-template-rows: 20vh 1fr;

        .welcome {
            display: grid;
            place-items: center;
            background: url('https://i.imgur.com/MJ4YHu7.jpg');
            background-size: 100%;
            background-position: center;
            height: 20vh;
            border-bottom: 5px solid #333;

            h1 {
                font-size: 40px;
                font-weight: 900;
                color: white;
                filter: drop-shadow(0 0 5px black);
            }
        }

        .flexGroup {
            height: 100%;
            display: grid;
            grid-template-columns: 500px 2fr;

            .dataGroup {
                width: 100%;
                height: 100%;
                background: white;

                &.form .brewLookup {
                    padding: 50px;

                    h2 {
                        font-size: 30px;
                        font-weight: 900;
                        border-bottom: 2px solid;
                        margin-block: 20px;
                    }

                    label {
                        margin-right: 10px;
                    }

                    input+button {
                        margin-left: 20px;
                    }
                }

                &.resultsContainer {
                    display: flex;
                    flex-direction: column;
                    border-left: 2px solid;
                    height: 100%;

                    .title {
                        height: 100px;
                        background-color: #333;
                        display: grid;
                        place-items: center;

                        h2 {
                            font-size: 30px;
                            color: white;
                            font-weight: 900;
                        }
                    }

                    .foundBrews {
                        position:relative;
                        background-color: #2C3E50;
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        min-height: 500px;
                        height: 100%;
                        padding: 50px;
                        padding-bottom: unset;

                        .limit {
                            position:fixed;
                            bottom:0;
                            left:502px;
                            font-size: 11px;
                            font-weight: 800;
                            color:white;
                            background-color: #333;
                            padding: 8px 10px;
                            z-index: 1000;

                            &:has(p:empty) {
                                display:none;
                            }
                        }
                        
                        .brewItem {
                            height: 50px;
                            min-height: unset;
                            width: 100%;
                            display: flex;
                            color: white;
                            background: #707070;
                            overflow: visible;

                            .text {
                                min-height: unset;
                                width: 20vw;
                                padding-inline:10px;
                                height: 1.5em;
                                
                                display: grid;
                                align-content: center;

                                h2 {
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    font-size: 20px;
                                    font-weight: 900;

                                }
                            }

                            hr {
                                display: none;
                            }

                            .info {
                                width: 100%;
                                display: grid;
                                grid-template-areas: "tags authors views pages update storage";
                                justify-content: end;
                                align-content: space-around;
                                grid-template-columns: 3fr 150px 70px 70px 200px 50px;
                                br {
                                    display: none;
                                }
                                .brewTags{
                                    display:inline-block;
                                    grid-area: tags;
                                }
                                [title*="Authors:"] {
                                    display:inline-block;
                                    grid-area: authors;
                                }
                                [title*="Last"] {
                                    display:inline-block;
                                    grid-area: views;
                                }
                                [title*="Page"] {
                                    display:inline-block;
                                    grid-area: pages;
                                }
                                [title*="Created"] {
                                    display:inline-block;
                                    grid-area: update;
                                }
                                
                                [title*="Storage"] {
                                    display:inline-block;
                                    grid-area: storage;
                                    filter:drop-shadow(0 0 10px white);
                                }
                                
                                .brewTags {
                                    padding-left: 10px;
                                }

                                .brewTags:has(span:nth-of-type(4)) {
                                    position: relative;
                                    overflow: hidden;
                                    display: flex;
                                    flex-wrap: wrap;
                                    

                                    span:nth-of-type(n+2) {
                                        display: none;
                                    }

                                    &:hover {
                                        overflow: visible;
                                        position: absolute;
                                        top: 0;
                                        background:#707070;
                                        height: max-content;
                                        z-index: 100;
                                        width:min-content;
                                        padding:10px;

                                        span:nth-of-type(n+4) {
                                            display: block;
                                        }

                                        &:after {
                                            position: absolute;
                                            top: 48px;
                                            right: 0;
                                            left:0;
                                            bottom:0;
                                            content: '';
                                            display: block;
                                            height: calc(100% - 48px);
                                            background: #707070;
                                            border-inline: 1px solid gold;
                                            border-bottom: 1px solid gold;
                                            border-bottom-left-radius: 5px;
                                            border-bottom-right-radius: 5px;
                                            z-index: -1;
                                        }
                                    }
                                }



                            }

                            .links {
                                opacity: 1;
                                background: none;
                                position: relative;
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                height: 100%;
                                width: 100px;

                                .editLink,
                                .deleteLink {
                                    display: none;
                                }

                                >a {
                                    opacity: .8;

                                    &:hover {
                                        opacity: 1;
                                    }
                                }

                                .shareLink {
                                    color: deepskyblue;
                                }

                                .downloadLink {
                                    color: coral;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}