Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/support/create_support_ticket/index.less

/**
 * Since we can not use the normal bootstrap container since
 * WHM has a conflicting name also called container that is
 * later in the cascade.
 */

.bootstrap-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.processing-icon {
    width: 30px;
}

/**
 * Styles for the common wizard chrome
 */

.wizard {
    min-width: 250px;

    > .panel-heading {
        span.title {
            vertical-align: middle;
            font-size: 30px;
            margin-top: 5px;
            display: inline-block;
        }

        .progress {
            margin-bottom: 10px;
        }
    }

    > .panel-footer {
        min-height: 50px;
    }

    > .panel-body {
        min-height: 480px;
        overflow: hidden;
    }
}

/**
 * Common Styles
 */

.alert-message a.btn {
    text-decoration: none;
}

.instruction-block {
    padding: 10px 10px 15px 10px;

    p + p {
        margin-top: 20px;
    }
}

/**
 * Styles for the start page
 */

#startView {
    .align-middle {
        vertical-align: middle;
    }

    #instructions {
        .instruction-block;
    }

    div.list-group-item {
        color: #555;
    }

    .list-group-item.active > div:last-child {
        margin-top: 15px;
        text-align: right;
    }

    .list-group-item {
        @offset: 5px;
        @padding: 20px; // Adding 5px to the default

        [dir="ltr"] & {
            padding-right: @padding;

            span.vertical-center {
                right: @offset;
            }
        }

        [dir="rtl"] & {
            padding-left: @padding;

            span.vertical-center {
                left: @offset;
            }
        }

        .btn {
            min-width: 100px;
        }

        .col-xs-4 {
            text-align: left;
        }

        div:last-child,
        .skinny {
            padding-left: 20px;
            padding-right: 20px;
        }

        &:nth-child(even) {
            background-color: #d7edf9;
        }

        &.well hr {
            border-color: #bbbbbb;
        }

        & > span:first-child {
            display: table-cell;
            height: 3em;
            vertical-align: middle;
        }

        &.active {
            z-index: 2;
            color: #fff;
            background-color: #428bca;
            border-color: #428bca;
        }

        .lead {
            margin-bottom: 10px;
        }

        .skinny {
            font-weight: 200;
        }

        #hackedServerExplanation,
        label {
            font-weight: 200;
        }

        label.selected {
            font-weight: bold;
        }

        div.position-trap {
            position: relative;
            padding: 0;
        }
    }

    div.list-group-item.well {
        padding-bottom: 60px; /* Expands bottom to accommodated the button that is floating */
    }

    /* Adding an additional size for super small */
    .visible-xs,
    .visible-xxs {
        display: none !important;
    }
}

@media (max-width: 450px) {
    #startView {
        .visible-xxs {
            display: block !important;
        }

        .list-group-item .btn {
            min-width: 50px;
        }
    }
}

/* We have to reapply the visible-xs,sm,and md */
@media (min-width: 451px) and (max-width: 767px) {
    #startView .visible-xs {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #startView .visible-sm {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #startView .visible-md {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    #startView .visible-lg {
        display: block !important;
    }
}

/**
 * Styles for the TOS page
 */

#tosView {
    #tos #body {
        max-height: 400px;
        overflow-y: auto;
    }

    hr {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    #errorRemedyButtons {
        margin-top: 10px;
    }
}

#auth-error-view {
    .scary-warning {
        margin-top: 10px;
    }
}

/**
 * Support Info View
 */
#supportInfoView {
    .well {
        cursor: pointer;

        label {
            font-weight: normal;
            margin-bottom: 0;
            cursor: pointer;
        }

        input {
            cursor: pointer;
        }

        .checkbox {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    .supportInfo-well-warning {
        border: 1px solid #f1c40f;
        background-color: #fcf8e1;
        color: #333;

        position: relative;
        overflow: hidden;
    }

    .supportInfo-warning-text {
        border-top: 1px solid #f1c40f;
        margin-top: 10px;
        padding-top: 10px;

        position: relative;
        display: table;
        height: 5.1em; // This is effectively a min-height, since we're using display: table

        i.fa-exclamation-triangle {
            position: absolute;
            z-index: 2; // Put it under the text
            top: 10px;
            left: -22px;

            font-size: 5em;
            opacity: 0.7;
            color: #f1c40f;
        }

        i + span {
            position: relative;
            z-index: 3; // It should be over the icon

            display: table-cell;
            vertical-align: middle;
            padding-left: 30px;
        }
    }
}

/**
 * Grant/Summary Page
 */

#grantView {
    .well {
        cursor: pointer;

        label {
            font-weight: normal;
            margin-bottom: 0;
            cursor: pointer;
        }

        input {
            cursor: pointer;
        }

        .checkbox {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    .grant-well-success {
        border: 1px solid #83b655;
        background-color: #dff2d5;
        color: #333;
    }

    .grant-well-warning {
        border: 1px solid #f1c40f;
        background-color: #fcf8e1;
        color: #333;

        position: relative;
        overflow: hidden;
    }

    .grant-warning-text {
        border-top: 1px solid #f1c40f;
        margin-top: 10px;
        padding-top: 10px;

        position: relative;
        display: table;
        height: 5.1em; // This is effectively a min-height, since we're using display: table

        i.fa-exclamation-triangle {
            position: absolute;
            z-index: 2; // Put it under the text
            top: 10px;
            left: -22px;

            font-size: 5em;
            opacity: 0.7;
            color: #f1c40f;
        }

        i + span {
            position: relative;
            z-index: 3; // It should be over the icon

            display: table-cell;
            vertical-align: middle;
            padding-left: 30px;
        }
    }
}

/**
 * Processing Page
 */

#processingView {
    .emphasize {
        padding-top: 2px;
        font-size: 17px;
        font-weight: bold;
    }

    .row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Workaround for checkmark/X wrapping issue on very narrow screens. */
    .col-xs-1 {
        padding: 0px;
    }

    /* Workaround for issue where alert text isn't influenced by elements
     * pushing from the right the same way that the container is. */
    #popup-blocker-alert .alert-message {
        display: block;
    }

    /* Allow the "Fill out your support request" button text to wrap on very narrow
     * screens so that it doesn't overflow the container. */
    #bypass-blocker {
        white-space: normal;
    }

    .processing-error-actions {
        display: block;

        .processing-error-text {
            padding: 10px 0 15px 0;
            display: block;
        }
    }
}

#tosAlert {
    min-width: 370px;

    p {
        margin-top: 10px;
        margin-bottom: 15x;
    }

    #errorMessageBody {
        word-break: break-word;
    }
}