clash-and-dashboard/src/containers/Rules/style.scss

@import '~@styles/variables';

.rules-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 10px;
    padding: 0;

    .rules {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-basis: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.rule-item {
    line-height: 30px;
    padding: 5px 0;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid rgba($color: $color-primary-lightly, $alpha: 0.5);

    .rule-item-row {
        padding: 5px 0;
    }

    .drag-handler {
        cursor: row-resize;
        margin: 0 10px;
        display: flex;
        justify-content: center;

        > i {
            font-weight: bold;
            color: $color-gray-dark;
        }
    }

    .rule-type {
        font-size: 14px;
        color: $color-primary-darken;

        > i {
            margin-left: 5px;
            color: $color-primary-darken;
        }
    }

    .payload {
        font-size: 14px;
        color: $color-primary-darken;
        cursor: pointer;
    }

    .rule-proxy {
        font-size: 14px;
        color: $color-primary-darken;
    }

    .delete-btn {
        opacity: 0;
        transition: all 300ms ease;

        span {
            font-size: 14px;
            color: $color-red;
            cursor: pointer;
        }
    }

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

    &:hover {
        .delete-btn {
            opacity: 1;
        }
    }
}

.rule-proxy-option {
    display: flex;
    align-items: center;
    overflow: hidden;

    .label {
        margin-right: 5px;
        height: 20px;
        line-height: 20px;
        padding: 0 8px;
        font-size: 10px;
        border-radius: 10px;
        color: $color-white;
        background: $color-gray-dark;
    }

    .value {
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}