element-web/apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DevtoolsDialog_wrapper {
    .mx_Dialog {
        display: flex;
        flex-direction: column;
    }

    .mx_Dialog_fixedWidth {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;

        .mx_Dialog_buttons button {
            margin-bottom: 0;
        }
    }

    .mx_DevTools_toggleForm {
        gap: var(--cpd-space-2x);
    }
}

.mx_DevTools_toolHeading {
    color: var(--cpd-color-text-secondary);
    font-weight: var(--cpd-font-weight-semibold);
    font-size: var(--cpd-font-size-heading-sm);
}

.mx_DevTools_content {
    overflow-y: auto;
}

.mx_DevTools_RoomStateExplorer_query {
    margin-bottom: 10px;
}

.mx_DevTools_button {
    font-family: monospace !important;
    margin-bottom: 8px !important;
}

.mx_DevTools_RoomStateExplorer_button_hasSpaces {
    text-decoration: underline;
}

.mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString {
    font-style: italic;
}

.mx_DevTools_label_left {
    float: left;
}

.mx_DevTools_label_right {
    float: right;
}

.mx_DevTools_label_bottom {
    clear: both;
    border-bottom: 1px solid #e5e5e5;
}

.mx_DevTools_inputRow {
    display: table-row;
}

.mx_DevTools_inputLabelCell {
    display: table-cell;
    font-weight: bold;
    padding-right: 24px;
}

.mx_DevTools_textarea {
    font-size: $font-12px;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
}

.mx_DevTools_eventTypeStateKeyGroup {
    display: flex;
    flex-wrap: wrap;
}

.mx_DevTools_content .mx_Field_input:first-of-type {
    margin-right: 42px;
}

.mx_DevTools_VerificationRequest {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1px 5px;
    margin-bottom: 6px;
    font-family: $monospace-font-family;

    dl {
        display: grid;
        grid-template-columns: max-content auto;
        margin: 0;
    }

    dd {
        grid-column-start: 2;
    }

    dd:empty {
        color: #666666;
        &::after {
            content: "(empty)";
        }
    }

    dt {
        font-weight: bold;
        grid-column-start: 1;
    }

    dt::after {
        content: ":";
    }
}

.mx_DevTools_SettingsExplorer {
    table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        th {
            /* Colour choice: first one autocomplete gave me. */
            border-bottom: 1px solid $accent;
            text-align: left;
        }

        td,
        th {
            width: 360px; /* "feels right" number */

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        td + td,
        th + th {
            width: auto;
        }

        tr:hover {
            /* Colour choice: first one autocomplete gave me. */
            background-color: $accent;
        }
    }

    .mx_DevTools_SettingsExplorer_mutable {
        background-color: $accent;
    }

    .mx_DevTools_SettingsExplorer_immutable {
        background-color: $alert;
    }

    .mx_DevTools_SettingsExplorer_edit {
        float: right;
        margin-right: 16px;
    }

    .mx_DevTools_SettingsExplorer_warning {
        border: 2px solid $alert;
        border-radius: 4px;
        padding: 4px;
        margin-bottom: 8px;
    }
}

.mx_DevTools_SettingsExplorer_setting {
    /* override default link button color */
    /* as it is the same as the background highlight */
    /* used on focus */
    color: $links !important;
}

.mx_DevTools_sticky_explorer {
    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-top: var(--cpd-space-3x);

        th {
            text-align: left;
            padding: var(--cpd-space-2x) var(--cpd-space-3x);
        }

        th#user_header {
            width: 35%;
        }
        th#sticky_key_header {
            width: 50%;
        }
        th#expires_in_header {
            width: 15%;
        }

        tr {
            cursor: pointer;
            border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
            background: transparent;
        }

        tr:hover {
            color: var(--cpd-color-text-secondary);
            background: var(--cpd-color-bg-action-secondary-hovered);
        }

        tr:focus-visible {
            outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: var(--cpd-space-2x) var(--cpd-space-3x);
        }

        td.remaining_time_column {
            text-align: right;
        }
    }
}