logseq/src/main/frontend/components/property.css

.property-configure {
    min-width: 40rem;

    .form-input, .form-select {
        line-height: 1rem;
        padding: 0.25rem 0.5rem;
    }
}

.property-value-content {
    cursor: text;
    min-height: 24px;
}

.property-configure-popup-content {
    @apply min-w-[700px] p-2 overflow-auto;

    /*noinspection CssUnresolvedCustomProperty*/
    max-height: var(--radix-dropdown-menu-content-available-height);
}

.ls-block .ls-properties-area, .property-block-container {
    border-left: 1px solid;
    border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
}

.ls-page-properties > .ls-properties-area > .property-block {
    margin-left: -22px;
}

.ls-block .ls-properties-area {
    margin-left: 0;
}

.ls-block .property-pair,
.property-block .property-value,
.property-template .property-pair {
    padding-left: 22px;
}

.block-property-value {
    margin-left: 7px;
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, 120px);
}

.ls-properties-area {
    @apply grid gap-0.5 pt-1.5 pb-1.5;

    .property-pair {
        @apply grid grid-cols-5 gap-1;

        .jtrigger {
            @apply relative;

            &-id {
                @apply absolute left-[-26px] top-[3px] rounded-full leading-none
                flex items-center justify-center bg-primary text-primary-foreground border-none
                text-xs min-w-[20px] min-h-[20px];
            }
        }

        .property-value {
            .jtrigger-id {
                @apply left-[-34px] top-[2px];
            }

            &-inner[data-type=checkbox] {
                .jtrigger-id {
                    @apply left-[-44px] top-[-2px];
                }
            }

            &-inner[data-type=date] {
                .jtrigger-id {
                    @apply top-[4px];
                }

                &.empty-value {
                    @apply -ml-1;

                    .multi-values {
                        @apply gap-0;
                    }
                }
            }
        }
    }

    .add-button-link {
        opacity: 0.5;
    }

    tr:nth-child(even), tr:nth-child(odd) {
        background: none;
    }

    .editor-inner {
        padding: 0;
        width: 100%;
    }

    .cp__select-main {
        width: fit-content;
        margin: 0;

        .ui__dropdown-trigger {
            position: absolute;

            .dropdown-wrapper {
                left: 0;
            }
        }
    }

    .cp__select .input-wrap {
        height: auto;
        min-width: 14em;
    }

    .cp__select .input-wrap input.cp__select-input {
        border: none;
    }

    .cp__select .input-wrap input.cp__select-input:focus {
        outline: none;
        box-shadow: none;
    }

    .ls-block {
        margin: 0;
    }

    .property-key a {
        color: var(--ls-primary-text-color);
    }

    .property-key a:hover {
        color: var(--ls-link-text-hover-color);
    }

    .multi-values {
        @apply cursor-pointer active:opacity-80;
    }
}

.ui__button.empty-btn {
    @apply !h-7 !px-0 font-normal opacity-50;
}

.closed-values-properties {
    .select-item {
        @apply flex items-center;
    }
}

.block-main-container .ls-properties-area {
    margin-top: 0.25em;
}

input.simple-input {
    @apply px-1;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid;
}

input.simple-input:focus {
    box-shadow: none;
}

.page-configure {
    @screen md {
        max-width: 720px;
    }
}

.property-key .bullet-container .bullet, .ls-property-input .bullet-container .bullet {
    background-color: darkgrey;
}

/* TODO:  */
.page-add-tags, .page-tags, .property-select, .ls-property-add,
.property-configure, .ui__dropdown-menu-content {
    .cp__select-main {
        width: fit-content;
        margin: 0;

        .ui__dropdown-trigger {
            position: absolute;

            .dropdown-wrapper {
                left: 0;
            }
        }

        .item-results-wrap {
            max-height: calc(var(--palettle-container-height) - var(--palettle-input-height) - 150px);
        }
    }

    .cp__select .input-wrap {
        height: auto;
        min-width: 14em;
    }

    .cp__select .input-wrap input.cp__select-input {
        border: none;
    }

    .cp__select .input-wrap input.cp__select-input:focus {
        outline: none;
        box-shadow: none;
    }

    .cp__select-input {
        @apply px-4 py-2;
    }
}

.ls-property-add {
    .cp__select-input {
        padding: 0;
    }
}

.property-configure {
    .cp__select-input {
        @apply px-4 py-2;
    }
}

.ls-property-input {
    min-height: 1.5em;
}

.page-title .page-tags {
    font-size: 1em;
    font-weight: 400;
}

a.control-link {
    @apply select-none;
    color: var(--ls-primary-text-color);

    span {
        @apply select-none;
    }
}

.property-key {
    h1.title, h2.title {
        border-bottom: 0;
        padding-bottom: 0;
    }

    h1.title {
        margin-bottom: 1.5rem;
    }

    h2.title {
        margin-bottom: 1rem;
    }
}

.property-select {
   .menu-link:hover, a.menu-link.chosen {
       .iconTablerExtInProgress50,
       .iconTablerExtBacklog,
       .iconTablerExtTodo,
       .iconTablerExtDoing,
       .iconTablerExtInReview,
       .iconTablerExtDone {
           @apply text-accent-09;
       }

       .iconTablerExtCancelled {
           @apply text-red-rx-09;
       }
   }
}

.ls-page-properties {
    @apply min-h-[40px];

    &.no-mode {
        @apply hidden;
    }
}

.property-k:focus {
    @apply pr-1;
}