🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

/*
 * Copyright (C) 2026 Red Hat, Inc.
 * SPDX-License-Identifier: LGPL-2.1-or-later
 */

.file-chooser-body {
    display: grid;
    grid-template-columns: minmax(15em, auto) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: var(--pf-t--global--spacer--md);
    row-gap: var(--pf-t--global--spacer--md);
    block-size: 60ex;
    user-select: none;

    /* In dark mode, Patternfly sets these to
       "var(--pf-t--global--dark--background--color--300)", which is
       the same as the dialog background.  Let's fix this by using the
       global action hover color.  This works in light and dark mode.

       HACK - https://github.com/patternfly/patternfly/issues/8562
   */
    --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--action--plain--hover);
    --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--action--plain--hover);
}

.file-chooser-sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    overflow-y: auto;
    border-inline-end: solid 2px var(--pf-t--global--background--color--disabled--default);
    padding-inline-end: var(--pf-t--global--spacer--md);
}

.file-chooser-listing-header {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.file-chooser-listing-breadcrumbs {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    /* align left of breadcrumb with left of table content */
    padding-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
}

.file-chooser-listing-body {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    overflow-y: auto;
}

/* Make folder icons blue, but keep file icons black */
.file-chooser-listing-body [data-type="dir"] .pf-v6-c-icon__content {
    --pf-v6-c-icon__content--Color: var(--pf-t--global--color--brand--default);
}

.file-chooser .pf-v6-c-alert {
    margin-block-end: var(--pf-t--global--spacer--lg);
}

@media (width < 768px) {
    .file-chooser-body {
        grid-template-columns: 0 1fr;
    }

    .file-chooser-hide-on-narrow {
        display: none;
    }
}

@media (width >= 768px) {
    .file-chooser-hide-on-wide {
        display: none;
    }
}

/* Style the breadcrumb component as a path */
.file-chooser-listing-breadcrumbs .pf-v6-c-breadcrumb__item-divider {
    > svg {
        display: none;
    }

    &::after {
        content: "/";
    }
}

/* Size, align, and space icon correctly */
.file-chooser-listing-breadcrumbs .breadcrumb-hdd-icon {
    /* Set the size to a large icon */
    block-size: var(--pf-t--global--font--size--lg);
    /* Width should resolve itself based on height and aspect ratio */
    inline-size: auto;
    /* Align to the middle (as one would expect) */
    vertical-align: middle;
}