_components.less

//colors calendar
@calendarHeaderBackground: @theme-color-background-contrast;
@calendarHeaderColor: #999;
@calendarCurrentStateHover: #f5f5f5;
@calendarBorder: #ccc;

.ui-datepicker {

    th, th.ui-datepicker-week-end {
        background: @calendarHeaderBackground !important;
        color: @calendarHeaderColor !important;
    }

    .ui-state-default {
        border-color: @calendarBorder !important;
    }

    .ui-datepicker-header {
        background: @calendarHeaderBackground !important;
        border-color: @color-gray;
        border-bottom-width: 0px;
    }

    .ui-datepicker-calendar {
        border: 1px solid @color-gray;
        thead {
            border-bottom: 1px solid @color-gray;
        }
    }

    .ui-datepicker-title select {
        font-size: 10px;
    }
}

.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period,
.ui-datepicker td .ui-state-default.ui-state-active:hover {
    background: @theme-color-text !important;
}

.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
    background: @calendarCurrentStateHover;
}

.segment-element {
    background: @color-white;
    border-color: @color-silver-l80;
    line-height: 1.33;
    box-shadow: 4px 7px 25px rgba(0,0,0,0.3);

    .segment-add-row {
        .border-radius(5px);
    }

    .custom_select_search {
        input {
            margin-top: 4px;
        }
    }

    .segment-content {
        h3 {
            font-weight: normal;
            .font-default(13px, 15px);
            color: @theme-color-text;
        }

        .segment-add-row > div a span,
        .segment-add-or > div a span {
            color: @theme-color-brand;
            text-shadow: none;
        }

        .segment-input {
            select, input {
                .font-default(12px, 14px);
                color: @theme-color-text;
                font-weight: 600;
                margin: 0;
                height: 30px;
            }
        }
    }
    .segment-nav {
        div > ul > li {
            padding: 5px 0;
            a {
                font-weight: normal;
                color: #333333;
                text-shadow: none;
            }
            li {
                padding: 3px 0;
                &:hover {
                    background: @theme-color-background-tinyContrast;
                    border: 0;
                    padding: 4px 0 3px;

                    a {
                        border: 0;
                        background-color: @theme-color-background-tinyContrast;
                        padding-right: 15px;

                    }
                }
            }

        }
    }

    .segment-top {
        .font-default(10px, 12px);
        color: @theme-color-text-light;
        text-transform: uppercase;

        h4 {
            color: @color-silver-l30;
            text-transform: uppercase;
            .font-default(10px, 12px);
            a.dropdown {
                color: @color-silver-l30;
                text-transform: uppercase;
                .font-default(10px, 12px);
            }
        }

        a.dropdown {
            display: inline;
            color: @theme-color-text;
            background: url('plugins/Morpheus/images/sort_subtable_desc.png') 100% -2px no-repeat;
            &.ui-autocomplete-input {
                background-position: 100% -2px;
            }
            .font-default(10px, 12px);
        }
    }
    .segment-footer {
        background: @color-white;

        a.delete {
            color: @theme-color-brand;
        }
    }
}

.available_segments a.dropdown {
    color: @theme-color-text !important;
    text-transform: uppercase;
    .font-default(10px, 12px);
}

.ui-datepicker {
    .ui-datepicker-month,
    .ui-datepicker-year {
        min-height: 0;
        background-position: 140%;
        padding-left: 5px;
        display: inline-block;
        color: #666;
        border: 0;
        height: 19px;
        line-height: 19px;
    }
}
#periodString {

    label.selected-period-label {
        text-decoration: none !important;
    }

    h6 {
        .font-default(13px, 16px);
        font-weight: normal;
        color: @theme-color-text;
    }

    #periodMore {
        .period-range {
            .ui-datepicker-header {
                background: red;
            }
        }
    }
}

#header_message {
    height: auto;
    .border-radius(0px);

    &.isPiwikDemo {
        text-align: right;
        position: absolute;
        right: 16px;
        top: 8px;
        .dropdown {
            min-width: 280px;
        }
    }
}

.ui-menu {
    .ui-menu-item {
        a {
            color: @color-silver-l20;
            text-transform: uppercase;
            .font-default(10px, 18px);
            padding: 2px;
        }
    }
}

.loadingPiwikBelow,
.loadingPiwik {
    .font-default(13px, 13px);
    color: @color-silver-l60;
    font-weight: normal;
}

.annotations {
    table {
        td {
            .font-default(12px, 14px) !important;
            color: @theme-color-text;
            padding: 6px 5px;
        }
    }
}

//reports box
.reports {
    border: 1px solid @color-gray;
    .border-radius(6px);

    h2 {
        background: @theme-color-background-tinyContrast;
        border-bottom: 1px solid @color-gray;
        padding: 11px 15px 10px;
    }
}

.jqplot-seriespicker-popover {
    box-shadow: none;
}

// transition box
#Transitions_Container {
    #Transitions_CenterBox {
        border: 1px solid @color-gray;
        box-shadow: none;
        .border-radius(6px);
        margin: 27px 0 0 319px;
        width: 258px;
        height: 390px;
        background: @theme-color-background-contrast;
        h2 {
            color: #1e93d1;
            border-bottom: 1px solid @color-gray;
            font-weight: normal;
            padding: 15px;
            background: #f5f5f5;
            .border-radius(6px 6px 0 0);
        }

        .Transitions_CenterBoxMetrics {
            padding: 0;
            p.Transitions_Margin {
                text-align: left;
                .font-default(15px, 20px);
                border-bottom: 1px solid @color-gray;
                padding: 13px;
                .Transitions_Metric {
                    font-weight: normal;
                }
            }
            .Transitions_IncomingTraffic {
                padding: 0 15px;

                h3 {
                    font-weight: normal;
                    color: #000;
                    .font-default(15px, 20px);
                    margin-bottom: 10px;
                }
            }
            .Transitions_OutgoingTraffic {
                padding: 0 15px;
                h3 {
                    font-weight: normal;
                    color: #000;
                    .font-default(15px, 20px);
                    margin-bottom: 10px;
                }
            }
        }
    }

    .Transitions_TitleOfOpenGroup {
        color: #000;
        .font-default(15px, 20px);
        font-weight: normal;
        margin-top: -4px;
    }
}

table.dataTable tr td .dataTableRowActions {
    a.rightmost, a {
        margin: 6px 0 6px 0;
        padding: 0 4px 0 0;
    }
}

table.dataTable th .columnDocumentation {
    color: @color-silver-l90;
}