mitmproxy/web/src/css/mode.less

@import (reference) "../../node_modules/bootstrap/less/variables.less";
@import (reference) "../../node_modules/bootstrap/less/mixins/grid.less";
@import (reference) "../../node_modules/bootstrap/less/mixins/labels.less";
@import (reference) "../../node_modules/bootstrap/less/labels.less";

.modes {
    padding: 1em 2em;
    overflow-y: auto;
    height: 100%;
    width: 100vw;

    h3 {
        margin-bottom: 10px;
    }

    .modes-category {
        padding-left: 10px;
    }

    .green-left-border {
        border-left: 10px solid #77c77a;
    }

    .gray-left-border {
        border-left: 10px solid #b2b2b2;
    }

    .modes-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .mode-title {
        font-size: 16px;
        font-weight: 600;
    }

    .mode-description {
        color: #b2b2b2;
        margin-top: -10px;
    }

    .mode-entry {
        text-align: left;
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        font-weight: normal;
        margin: 0;

        input[type="checkbox"] {
            margin: 0 10px;
            vertical-align: middle;
            width: 1.8rem;
            height: 1.8rem;
        }

        p {
            margin: 0;
        }
    }

    .mode-status {
        margin-left: 10px;
        margin-top: 5px;
        font-weight: 600;
    }

    .mode-local {
        i {
            font-size: 1.8rem;
            cursor: pointer;
        }
        .processes-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;
            margin-left: 5px;
        }
        .selected-processes {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            overflow: hidden;
        }
        .selected-process {
            display: flex;
            flex-direction: row;
            gap: 5px;
            background-color: #e0e0e0;
            padding: 5px;
            border-radius: 4px;
            height: 30px;
            font-size: 12px;
            font-weight: 500;
            align-content: center;
            align-items: center;

            > i {
                font-size: 15px;
            }
        }

        .dropdown-container {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .local-dropdown {
            position: relative;
            width: 200px;

            .dropdown-header {
                padding: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 10px;
                height: 30px;
            }

            input {
                border: none;
                flex: 1;
                outline: none;
                color: black;
            }

            .dropdown-list {
                width: 100%;
                max-height: 300px;
                overflow-y: auto;
                z-index: 1;
                list-style: none;
                padding: 0;
                margin-bottom: 0;
            }

            .dropdown-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 8px 10px;
                margin: 4px 0;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.2s ease;
            }

            .dropdown-item.selected {
                background-color: #e0e0e0;
            }

            .dropdown-item:hover {
                background-color: #f0f0f0;
            }

            .process-details {
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .process-icon {
                margin-right: 5px;
                margin-left: 5px;
                color: #5f6368;
                width: 25px;
                height: 25px;
            }

            .process-name {
                font-weight: 500;
                color: #333;
            }
        }

        .local-popover {
            button {
                font-size: 1rem;
            }
            i {
                font-size: 1.5rem;
            }

            @supports (anchor-name: --test) {
                > div {
                    margin: 0;
                    position: absolute;
                    left: 0;
                    top: calc(anchor(bottom) + 10px);
                    justify-self: anchor-center;
                    align-self: auto;
                }
            }

            > div {
                &:popover-open {
                    display: block;
                }
                gap: 0.5rem;
                align-items: center;
            }
        }
    }

    .mode-input {
        border: 1px solid #ccc;
        margin-left: 10px;
        border-radius: 4px;
        min-width: 120px;
        height: 25px;
    }

    .mode-reverse-input {
        border: 1px solid #ccc;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 4px;
        min-width: 70px;
        height: 25px;
    }

    .mode-upstream-input {
        border: 1px solid #ccc;
        margin-left: 10px;
        margin-right: 5px;
        border-radius: 4px;
        min-width: 70px;
        height: 25px;
    }

    .mode-reverse-dropdown {
        margin: 0 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 25px;
    }

    .mode-reverse-servers {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mode-reverse-add-server {
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        cursor: pointer;
        font-weight: 500;

        opacity: 0.5;
        transition: all 50ms ease-in-out;

        &:hover {
            opacity: 1;
        }

        i {
            font-size: 2rem;
            margin-right: 5px;
        }
    }

    .mode-popover {
        > button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 2rem;
        }

        @supports (anchor-name: --test) {
            > div {
                margin: 0;
                position: absolute;
                left: calc(anchor(right) + 5px);
                align-self: anchor-center;
            }
        }

        > div {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px 15px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            &:popover-open {
                display: grid;
            }
            grid-template-columns: 9em 1fr;
            grid-auto-rows: min-content;
            gap: 0.5rem;
            align-items: center;

            > h4 {
                text-align: center;
                grid-column: 1/-1;
            }
            > .mode-input {
                text-align: right;
                background-color: white;
                margin: 0;
            }
        }
    }

    .missing-mode-container {
        color: #b2b2b2;

        .title-icon-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;

            i {
                font-size: 1.8rem;
            }
        }
    }
}