cockpit/pkg/kubernetes/styles/registry.less

@import "variables.less";
@import (less) "../../../node_modules/angular/angular-csp.css";

@import (less) "../../lib/page.css";
@import "../../lib/listing.less";
@import (less) "../../lib/console.css";
@import (less) "../../lib/table.css";

@icon-sidebar-width: 100px;

@import "filter.less";
@import "dropdown.less";
@import "dashboard.less";

@import "images.less";
@import "projects.less";
@import "tags.less";

#content {
    margin-right: 0px;
    min-height: 100%;
    padding-bottom: 20px;
}

.listing-ct-body dl {
    margin-bottom: 13px;
}

/* Registry dashboard */

.card-pf-utilization .card-pf-title {
    line-height: 1.1;
}

.dashboard-storage {
    img {
        display: block;
        margin: 20px auto 0px auto;
    }
}

.dashboard-images {
    .card-pf-heading {
        position: relative;

        .card-pf-title {
            max-width: 80%;
        }
    }

    .card-pf-body {
        min-height: 220px;
        padding-bottom: 0px;

        div {
            padding: 7px 10px 10px 10px;
            cursor: pointer;
        }

        div:hover {
            background-color: @table-bg-hover;
        }

        ul {
            background: linear-gradient(90deg, transparent 20px, @tag-border 20px, @tag-border 22px, transparent 22px);
            background-size: 100% 20px;
            background-repeat: no-repeat;
            padding: 3px 0px 0px 20px;
            margin-bottom: 0px;
            line-height: 30px;

            li {
                background: linear-gradient(180deg, transparent 8px, @tag-border 8px, @tag-border 10px, transparent 10px);
                background-repeat: no-repeat;
                padding-left: 7px;
                display: inline;
                list-style: none;
            }

            li:first-child {
                padding-left: 15px;
            }

            li.image-tag-truncated {
                padding-left: 15px;
                opacity: 0.5;
            }
        }
    }

    .namespace-filter {
        margin-top: -3px;
    }

    .namespace-filter button {
        margin-bottom: 0px;
    }

    .all-images {
        display: block;
        float: right;
        margin-bottom: 10px;
    }

    .registry-imagestream-lock {
        display: block;
        float: right;
        margin: 9px;
    }

    .table > tbody > tr > td {
        border-top: none;
        font-weight: bold;
        padding: 0px;
    }

    .table a {
        display: block;
        color: inherit;
        padding: 8px 15px;
    }

    dt {
        font-size: 13px;
    }

    dt a {
        text-decoration: none;
        color: inherit;
    }

    dd {
        float: right;
        margin-left: 20px;
    }

}

.dashboard-commands {
    p {
        font-size: 13px;
        font-weight: bold;
    }
}

.blank-slate-pf {
    border: none;
}

#content {
    margin-left: unit(@icon-sidebar-width, px);
}

.content-filter {
    left: unit(@icon-sidebar-width - 10, px);
}

.content-filter + div {
    padding-left: 10px;
    padding-right: 17px;
}

/* A different sidebar */
.icon-sidebar {
    width: unit(@icon-sidebar-width, px);

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: unit(@icon-sidebar-width - 10, px);
        height: 100%;
        position: fixed;
        background-color: @nav-pf-vertical-secondary-bg-color;
        top: 0px;
        z-index: 1;

        li {
            border-bottom: 1px solid @nav-pf-vertical-border-color;
            display: block;
            font-size: 13px;

            a {
                border-bottom: 0;
                color: @nav-pf-vertical-secondary-color;
                background-color: @nav-pf-vertical-secondary-bg-color;
                padding: 15px 11px 15px 9px;
                text-align: center;
                display: block;
                text-decoration: none;
                position: relative;

                i {
                    display: inline;
                    font-size: 20px;
                    line-height: 20px;
                    color: @nav-pf-vertical-icon-color;
                }

                i.pficon-image {
                    font-size: 24px;
                    line-height: 20px;
                }
            }

            a:hover {
                color: @nav-pf-vertical-secondary-active-color;
                background-color: @nav-pf-vertical-secondary-active-bg-color;

                i {
                    color: @nav-pf-vertical-active-icon-color;
                }
            }
        }

        li.active {
            a  {
                color: @nav-pf-vertical-secondary-active-color;
                background-color: @nav-pf-vertical-secondary-active-bg-color;

		i {
			color: @link-color;
		}
            }

            a:after {
                content: '';
                width: 4px;
                height: 100%;
                left: 0;
                top: 0;
                display: block;
                position: absolute;
                background-color: @link-color;
            }
        }
    }
}

/* overide since registry-image-widget sets
   the last column to be aligned right
   but we don't want that when we are
   using colspan
 */
table.listing-ct > thead td[colspan]:last-child,
table.listing-ct > thead th[colspan]:last-child {
    text-align: left;
}