YellowLabTools/front/src/less/index.less

.promess {
    padding: 0em 2em;
    margin-bottom: 0.5em;
    font-weight: normal;
    font-size: 1.2em;
}

.price {
    padding: 0em 2em 3em;
    margin-top: 0em;
    font-size: 0.9em;
}

.url {
    width: 50%;
}

.launchBtn {
    background: #ffa319;
    color: #fff;
    &:focus {
        background: #e74c3c;
    }
    &.disabled {
        background: #deaca6;
        &:focus {
            color: #ddd;
        }
    }
    
}

.settings {
    width: 50%;
    margin: 0 auto;

    input, select {
        font-size: 1em;
    }

    input[type=text], input[type=password] {
        width: 100%;
        min-width: 4em;
    }
}

.device {
    margin-top: 3em;
    .item {
        display: inline-block;
        margin: 1em 0.75em;
        width: 5.5em;
        height: 5.5em;
        color: #FFF;
        border: 1px solid #FFF;
        padding: 1px;
        border-radius: 0.5em;
        cursor: pointer;
        text-decoration: none;
        font-size: 0.8em;

        &.active {
            color: #ffa319;
            border: 2px solid #ffa319;
            padding: 0;
        }

        &:hover {
            color: #ffa319;
        }

        > div {
            margin: 0.2em 0 0.1em;
            font-size: 3em;
        }
    }
}

.settingsTooltip {
    position: relative;
    span {
        font-size: 0.8em;
        vertical-align: text-top;
    }
    
    div {
        display: none;
        position: absolute;
        padding: 0.5em;
        width: 25em;
        background: #FFF;
        color: #000;
        font-size: 0.8em;
        border-radius: 1em;
        border: 2px solid #ffa319;
        white-space: normal;
        z-index: 2;
    }

    &:hover div {
        display: block;
    }
}

.showAdvanced {
    display: inline-block;
    margin-top: 2em;
    color: #FFF;
    text-decoration: none;
    font-size: 0.9em;
    
    &:hover {
        color: #ffa319;
    }
}

.currentSettings {
    font-size: 0.9em;

    span {
        color: #ffa319;
        &:after {
            color: #FFF;
            content: ",";
        }

        &:last-child:after {
            content: "";
        }
    }
}

.advanced {
    margin: 1em 0 0;
    display: table;
    width: 100%;
    text-align: left;
    border-spacing: 0.75em;

    > div {
        display: table-row;

        > div {
            display: table-cell;
            width: 75%;

            &.label {
                width: 25%;
                white-space: nowrap;
                vertical-align: middle;
            }
        }
    }

    .subTable {
        display: table;
        border-spacing: 0;
        width: 100%;
        > div {
            display: table-row;
            > div {
                display: table-cell;
                padding: 0 0 0.75em;
            }
        }
    }
}

.features {
    display: table;
    width: 50%;
    margin: 6em auto 0;
    font-size: 0.9em;
    color: #413;

    > div {
        width: 33.3%;
        display: table-cell;
        padding: 0 1.5em;
    }
}

input[type=submit], input.url {
    padding: 0 0.5em;
    margin: 0.5em;
    font-size: 1.2em;
    height: 2em;
    border: 0 solid;
    border-radius: 0.5em;
    box-shadow: 0.1em 0.2em 0 0 #5e2846;
    outline: none;
}
input[type=submit]:hover {
    color: #ddd;
}
input[type=submit].clicked {
    color: #ddd;
    position: relative;
    left: 0.1em;
    top: 0.2em;
    box-shadow: none;
}