Viewing File: /usr/local/cpanel/base/frontend/jupiter/css/base_overrides/_sidebar.less

@import (reference) "variables/_main";
@import (reference) "mixins/_main";

#stats {
    @text-md: 14px;
    @text-sm: 12px;
    a {
        color: @link;

        &:hover {
            color: @link-hover;
        }
    }
    // General styles for both sidebars
    .panel-widget {
        // Styles for both headers
        .widget-heading {
            background-color: @primary-background;
            color: @primary-dark;
            border: none;
            text-transform: none;
            font-size: @text-md;
            font-weight: 600;
            padding: 22px 22px 10px 22px;

            html[dir="rtl"] & {
                padding: 22px 22px 10px 22px;
            }
        }

        // Styles both sidebar's content
        td {
            padding: 8px 24px;

            .general-info-label {
                font-size: @text-sm;
                color: @text-muted;
            }

            .general-info-value {
                font-size: @text-md;
            }
        }

        // Styles the SSL/TLS row and error state
        .app-stat-data {
            .ssl-error-icon {
                color: @warning-bg-dark;
                font-size: 18px;
            }

            .ssl-link-container {
                display: flex;
                justify-content: center;

                html[dir="ltr"] & {
                    padding-right: 8px;
                }

                html[dir="rtl"] & {
                    padding-left: 8px;
                }

                .link-button {
                    .link-as-a-button({});

                    i {
                        html[dir="ltr"] & {
                            margin-right: 3px;
                        }

                        html[dir="rtl"] & {
                            margin-left: 3px;
                        }
                    }
                }
            }
        }

        // Server Information - last row of General Information
        &#generalInfoSection {
            table > tbody > tr:last-child {
                :hover {
                    background-color: @shade-light;
                }

                & > td {
                    padding: 0;

                    a {
                        display: block;
                        padding: 16px 24px 16px 24px;

                        &::after {
                            .fa-fas("\f054");
                            float: right;
                            color: @shade-hard;

                            html[dir="rtl"] & {
                                .fa-fas("\f053");
                                float: left;
                            }
                        }
                    }
                }
            }
        }
    }

    // Stats section
    #statsSection {
        .app-name {
            color: @text-muted;
            font-size: @text-sm;
            font-weight: 600;
        }

        .warning > .app-stat-data,
        .info > .app-stat-data,
        .success > .app-stat-data,
        .danger > .app-stat-data {
            background-color: transparent;
            box-shadow: none;
        }

        .limits-wrapper {
            display: flex;

            html[dir="ltr"] & {
                margin-right: 4px;
            }

            html[dir="rtl"] & {
                margin-left: 4px;
            }
        }

        .limits-data {
            flex: 1;
            font-size: @text-md;
        }

        .stats-fix-icon {
            font-size: 25px;
            margin-top: -20px;
            display: block;

            &.danger {
                color: @danger-bg-dark;
            }

            &.warning {
                color: @warning-bg-dark;
            }
        }

        .error-wrapper {
            display: flex;
        }

        .error-name {
            flex: 1;
        }

        .stats-error-icon {
            font-size: 25px;
            color: @danger-bg-dark;
            margin-top: -7px;
        }

        .link-button {
            .link-as-a-button({});
        }
    }
}

.link-as-a-button(@rules) {
    background-color: @primary-light;
    color: @link;
    border: 1px solid @link;
    display: block;
    width: 100%;
    text-align: center;
    border-radius: @border-radius;
    font-weight: 500;
    margin: 9px 0 6px 0;
    padding: 6px;

    &:hover {
        text-decoration: none;
        color: @primary;
        border: 1px solid @link-hover;
    }

    @rules();
}