=Update Styles from northeh

Jake Vanderwerf

2025-10-20 fcd6e159ee09cc4bbe99bbbadc61a6e83b24b5bf

 dash.css

@@ -46,7 +46,7 @@
GRID VIEW
********************************************/
.item-grid:has(.select-item:checked) .item {
    padding: 2rem;
    padding: .75rem;
    opacity : .8;
    filter: var(--filter);
}
@@ -104,12 +104,12 @@
    gap: .25rem;
    margin-left: 2rem;
}
    .selected-count::before {
        content: '{';
    }
    .selected-count::after {
        content: '}';
    }
.selected-count::before {
    content: '{';
}
.selected-count::after {
    content: '}';
}

.bulk-edit-form .selected {
    display: grid;
@@ -341,16 +341,16 @@
    transition: all var(--transition-base);
    box-shadow: var(--shadow);
}
    .integration.connected {
        border-color: var(--success);
    }
    .integration.error,
    .integration.disconnected {
        border-color: var(--error);
    }
    .integration.hasChanges {
        border-color: var(--warning);
    }
.integration.connected {
    border-color: var(--success);
}
.integration.error,
.integration.disconnected {
    border-color: var(--error);
}
.integration.hasChanges {
    border-color: var(--warning);
}
.integration .header {
    margin-bottom: .75rem;
    padding-bottom: .75rem;
@@ -376,74 +376,97 @@
.integration .setup .indicator {
    font-size: var(--medium);
}
    .integration .connected .indicator,
    .integration .setup .connected {
        color: var(--success);
    }
    .integration .disconnected .indicator,
    .integration .setup .disconnected {
        color: var(--error);
    }
    .integration.hasChanges .disconnected {
        color: var(--warning);
    }
.integration .connected .indicator,
.integration .setup .connected {
    color: var(--success);
}
.integration .disconnected .indicator,
.integration .setup .disconnected {
    color: var(--error);
}
.integration.hasChanges .disconnected {
    color: var(--warning);
}

    .connection-status.connected {
        background-color: var(--successBack);
        color: var(--successText);
    }
    .connection-status.disconnected {
        background-color: var(--errorBack);
        color: var(--errorText);
    }
.connection-status.connected {
    background-color: var(--successBack);
    color: var(--successText);
}
.connection-status.disconnected {
    background-color: var(--errorBack);
    color: var(--errorText);
}

    .integration code {
        display: inline-block;
        width: 90%;
        margin: 0 .5rem;
        user-select: all;
        padding: .75rem;
        border: 2px solid var(--base);
        background-color: var(--base-200);
        word-break: break-all;
    }
    .integration details + details {
        margin-top: 1rem;
    }
    .integration .actions {
        margin-top: 1rem;
    }
.integration code {
    display: inline-block;
    width: 90%;
    margin: 0 .5rem;
    user-select: all;
    padding: .75rem;
    border: 2px solid var(--base);
    background-color: var(--base-200);
    word-break: break-all;
}
.integration details + details {
    margin-top: 1rem;
}
.integration .actions {
    margin-top: 1rem;
}

    .hint {
        line-height: 1.2;
        font-style: italic;
        font-size: var(--small);
    }
.hint {
    line-height: 1.2;
    font-style: italic;
    font-size: var(--small);
}

    .hasChanges button[data-action=save_credentials] {
        border-color: var(--warning);
        animation: pulse-color 1s infinite;
        animation-delay: 1s;
    }
.hasChanges button[data-action=save_credentials] {
    border-color: var(--warning);
    animation: pulse-color 1s infinite;
    animation-delay: 1s;
}

    .flash {
        animation: flash .5s;
    }
        .flash.connected {
            --b: var(--success);
        }
        .flash.disconnected {
            --b: var(--error);
        }
        .flash.syncing {
            --b: var(--success);
        }
        .flash.hasChanges,
        .flash.error {
            --b: var(--warning);
        }
.flash {
    animation: flash .5s;
}
.flash.connected {
    --b: var(--success);
}
.flash.disconnected {
    --b: var(--error);
}
.flash.syncing {
    --b: var(--success);
}
.flash.hasChanges,
.flash.error {
    --b: var(--warning);
}

    @keyframes flash {
        0%, 100% {border-color: inherit}
        50% {border-color: var(--b)}
    }
@keyframes flash {
    0%, 100% {border-color: inherit}
    50% {border-color: var(--b)}
}

.location.field {
    width: 80vw;
}
.location.field > p {
    text-align: center;
}
.location.field > p + p {
    margin: 0 .5rem 0 0;
}
.location.field .location-map {
    height: 20vh;
}
.location.field .location-links {
    padding: .5rem 0;
    display: flex;
    justify-content: space-evenly;
}

.item-grid .item,
.field.upload [data-upload-id] {
    touch-action: none;
}