appwrite/public/styles/comps/database.less

.console {
    .database {
        .row {
            //height: 500px;

            .col {
                height: 452px;

                &:after {
                    width: 2px;
                    .func-end(20px);
                }
            }
        }

        hr {
            margin: 0 -20px;
            background: var(--config-color-background);
            height: 1px;
        }

        h3 {
            font-size: 13px;
            line-height: 20px;
            height: 20px;
            background-color: var(--config-color-fade-super);
            margin: -20px -20px 0 -20px;
            padding: 10px 20px;
            border-bottom: solid 1px var(--config-color-background);
            font-weight: 600;
        }

        .empty {
            height: 162px;
            font-size: 12px;
            text-align: center;
            margin: 50px 0;

            h4 {
                font-size: 13px;
                font-weight: 600;
                line-height: 120px;
            }
        }

        .search {
            background-color: var(--config-color-fade-super);
            margin: 0 -20px 0 -20px;
            padding: 10px 15px;

            input {
                height: 40px;
                background-color: #fff;
                border-radius: 25px;
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        .code {
            height: 411px;
            background: var(--config-color-fade-super);
            margin: 0 -20px -20px -20px;
            padding: 20px;
            width: ~"calc(100% - 10px)";

            .ide {
                overflow: scroll;
                height: 451px;
                margin: -20px;
                box-shadow: none;
                border-radius: 0;
            }
        }

        .paging {
            background: var(--config-color-fade-super);
            margin: 0 -20px -20px -20px;
            padding: 20px;
        }

        .button {
            margin: 0 -20px;
            padding: 0 20px!important;
            text-align: inherit;
            color: var(--config-color-focus);
            width: 100%;
            font-size: 15px;
            line-height: 55px;
            box-sizing: content-box;

            i {
                .func-margin-end(8px);
            }
            
            &:hover {
                border: none;
                background: var(--config-color-focus-fade);
            }
        }
        
        .wrapper {
            
        }

        .items {
            margin: 0 -20px;
            height: 262px;
            overflow-x: hidden;
            overflow-y: scroll;

            form {
                opacity: 0;
                position: relative;
                
                button {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    .func-start(0);
                    .func-end(0);
                    width: 100%;
                    height: 45px;
                    border-radius: 0;
                    cursor: pointer;
                }
            }

            li {
                padding: 0;
                margin: 0 0;
                line-height: 45px;
                font-size: 15px;
                .func-padding-start(50px);
                .func-padding-end(30px);
                position: relative;

                i {
                    position: absolute;
                    display: none;
                    .func-end(10px);
                }

                .name {
                    display: inline-block;
                    width: 100%;
                    height: 28px;
                }
                
                &:hover, &.selected {
                    background: #f5f5f5;

                    i {
                        display: block;
                    }
                }

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}