news/plugins/admin/themes/grav/scss/template/_pages.scss

#pages-filters {
    margin-bottom: 1rem;
    margin-top: -1rem;
    padding: 1rem;

    .button-border {
        padding: .375rem .375rem;
        white-space: nowrap;

        &.adv-options {
            &:after {
                content: "\f078";
                font-family: "FontAwesome", sans-serif;
                margin-left: 5px;
            }
            &.open:after {
                content: "\f077";
            }
        }
    }

    .filters-bar {
        display: flex;
        align-items: center;

        .button-border {
            margin-left: 0.5rem;
        }
    }

    .filters-advanced {
        overflow: hidden;
        transition:max-height 0.3s ease-out;
        height:auto;
        max-height:600px;

        &.hide {
            max-height: 0;
        }

        .button-border {
            display: inline-block;
            margin-top: 0.5rem;
        }

        fieldset {
            margin: 1rem 0 0;
            border-radius: $border-radius;

            legend {
                margin-left: -0.5rem;
                padding: 0 0.5rem;
            }

            .checkboxes {
                margin-right: 1.5rem;
                label {
                    padding-left: 1.7rem;
                    &:before {
                        margin-top: -0.6rem;
                        margin-right: 0;
                        width: 1.25rem;
                        height: 1.25rem;
                    }
                }
            }
        }
    }
}

#pages-content-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: -1rem;
    height: calc(100vh - 190px);

    .grav-loading {
        min-height: 600px;

        .grav-loader {
            margin: 0 auto;
            position: relative;
            top: 230px;
        }
    }

    .fjs-container {
        min-height: initial;
        flex-grow: 1;
    }

    .fjs-path-bar {
        //margin-bottom: -1rem;
        border-bottom: 0;
        padding: 0.5rem;
        overflow: inherit;
    }

    .fjs-col {
        width: 33.33333334%;
        min-width: 300px;
        min-height: 300px;
        max-height: initial;
    }

    .fjs-item {
        max-width: 100%;

        > .fjs-item-wrapper {
            display: flex;
            justify-content: flex-start;
            padding: 0;
            margin: 1px 0;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
            outline: 0;
        }

        a {
            padding: 7px 2px 7px 5px;
            & * {
                @include transition(all 0.5s ease);
            }
        }

        .fjs-title {
            display: flex;
            align-items: center;
            flex-grow: 1;
            max-width: 100%;
            overflow: auto;

            [data-flexpages-dotx3] {
                .dropdown-toggle {
                    padding: 0;
                    background: transparent;
                    border: 0;
                }

                /* FIXME: properly move colors to presets */
                .dropdown-menu {
                    top: inherit;
                    left: inherit;
                    right: inherit;
                    bottom: inherit;
                    position: fixed;
                    cursor: default;

                    padding: 0 0 0.5rem;

                    color: #212529;
                    text-align: left;
                    list-style: none;
                    background-color: #fff;
                    background-clip: padding-box;
                    border: 1px solid rgba(0,0,0,.15);
                    border-radius: .25rem;
                    width: 350px;

                    .tags {
                        padding-top: 0;
                    }

                    a {
                        cursor: pointer;
                    }

                    table {
                        display: table;

                        tbody {
                            width: 100%;
                            display: inherit;
                        }

                        tr {
                            display: table-row;
                        }

                        td {
                            display: table-cell;
                            text-align: left;
                            flex: none;
                            word-break: break-all;
                            white-space: normal;

                            &:first-child {
                                padding-left: 0;
                                width: 80px;
                            }

                            &:last-child {
                                padding-right: 0;
                                width: calc(100% - 80px);
                            }
                        }
                    }

                    .divider {
                        height: 0;
                        margin: .5rem 0;
                        overflow: hidden;
                    }

                    .action-bar {
                        border-radius: $border-radius $border-radius 0 0;
                        & + .divider {
                            margin-top: 0;
                        }

                        a.dropdown-item:hover {
                            border-radius: 0;
                            &:first-child {
                                border-top-left-radius: 4px;
                            }
                            &:last-child {
                                border-top-right-radius: 4px;
                            }
                        }
                    }

                    .dropdown-item {
                        display: block;
                        width: 100%;
                        padding: 0.5rem;
                        clear: both;
                        font-weight: 400;
                        text-align: inherit;
                        white-space: nowrap;
                        border: 0;
                        border-radius: $border-radius;

                        &:hover {
                            text-decoration: none;
                        }


                    }

                    .fa {
                        display: inline-block;
                        width: 16px;
                        height: inherit;
                        text-align: left;
                    }

                    .action-bar {
                        display: flex;

                        a, i {
                            text-align: center;
                        }
                    }

                    .details, .tags, .langs {
                        padding: 0 .5rem 0;
                    }

                    .infos {
                        margin: 0 .15rem;
                        ul {
                            margin: 0;
                            padding: 0;
                        }
                    }

                    .langs {
                        .lang {
                            display: inline-block;
                            .fa {
                                font-size: 0.6rem;
                                padding: 0 0.15rem;
                            }
                        }
                    }
                }
            }

            & > a {
                flex-grow: 1;
                overflow: hidden;
            }
        }

        .button-group {
            .fa {
                font-size: 0.9rem;
                width: 28px;
                height: 28px;
                display: flex;
                justify-content: center;
                align-items: center;

                &.disabled {
                    opacity: 0;
                }
            }
        }

        .fjs-icon {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: visible !important;
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 50%;
            margin-right: 5px;
            margin-left: 5px;

            &:before {
                position: relative;
                content: url('../images/icons/book-edit.svg');
                flex: 1;
                max-width: 20px;
                margin-right: 0px;
                margin-bottom: -2px;
            }

            &.modular:before {
                content: url('../images/icons/module-four.svg');
            }

            &.home:before {
                content: url('../images/icons/house.svg');
            }

            &.lock:before {
                content: url('../images/icons/touchid-lock.svg');
            }

            &.badge-published:after, &.badge-unpublished:after {
                content: '';
            }

            &:after, .badge-clock {
                display: block;
                position: absolute;
                top: -2px;
                right: -2px;
                height: 12px;
                width: 12px;
                border-radius: 50%;
            }

            .badge-clock {
                border-radius: 0;
                content: url('../images/icons/clock-hands.svg');
                z-index: 2;
            }

            .badge-lang {
                position: absolute;
                bottom: -4px;
                bottom: -4px;
                left: 50%;
                transform: translateX(-50%);
                line-height: 1.2;
                font-weight: 600;
                font-size: 0.6rem;
                border-radius: $border-radius;
                padding: 0 3px;
            }
        }

        .fjs-info {
            flex-grow: 1;
            flex-direction: column;
            line-height: 1.2;

            > b, > em {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-style: normal;
            }

            > b {
                font-size: 110%;
            }
        }

        .fjs-actions {
            display: flex;
            align-items: center;
            padding-right: 3px;
            position: relative;

            > * {
                margin-right: 3px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .fjs-children {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        min-width: 50px;
        outline: 0;
        background-color: transparent;

        .badge {
            font-size: 0.7rem;
            margin-right: 5px;
            padding: 0px 3px;
            line-height: 1.3;
        }

        .fa {
            display: inline-block !important;
            width: auto !important;
            font-size: 14px;
        }
    }

    .breadcrumb-node {
        font-size: 0.9rem;

        &:hover span {
            text-decoration: none;
        }

        & > i.fa {
            margin: 0 0.4rem -4px;
        }

        & > i:not(.fa) {
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            overflow: inherit;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 0.35rem;

            &:before {
                position: relative;
                content: url('../images/icons/book-edit.svg');
                flex: 1;
                max-width: 10px;
            }

            &.modular:before {
                content: url('../images/icons/module-four.svg');
            }

            &.home:before {
                content: url('../images/icons/house.svg');
            }

            &.lock:before {
                content: url('../images/icons/touchid-lock.svg');
            }

            &.badge-published:after, &.badge-unpublished:after {
                content: '';
            }
        }
    }
}

.pages-list {
    list-style: none;
    margin: 0;
    padding: 0;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        margin: 0;
        padding: 0;

    }

    .row {
        @include transition(all 0.2s ease);
        line-height: 2.5rem;
        padding-right: 3rem;

        @include breakpoint(mobile-only) {
            padding-right: 1rem;
        }
        [data-hint]:after {
            line-height: 1 !important;
            width: auto !important;
            white-space: nowrap !important;
        }

        p.page-route {
            display: block;
            margin: 0;
            line-height: 1;
            font-size: 0.9rem;
            word-break: break-all;

            .spacer {
                display: inline-block;
                margin: 0 0.3rem;
            }
        }

        // fix for hint alignment
        .hint--bottom:before, .hint--bottom:after {
            left: 4px;
        }
        .hint:after, [data-hint]:after {
            border-radius: 2px;
        }

        .badge.lang {
            margin-left: 8px;
        }
    }

    .page-home {
        font-size: 1.4rem;
        margin-left: 10px;
        vertical-align: middle;
    }

    .page-info {
        font-size: 1.1rem;
        margin-left: 10px;
        vertical-align: middle;
    }

    .page-edit {
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow-x: hidden;
    }

    .page-item__row {
        display: flex;
    }

    .page-item__toggle {
        width: 25px;
        line-height: 1;
        padding-top: 7px;
    }

    .page-item__content {
        padding: 5px 0;
        width: calc(100% - 50px);
    }

    .page-item__content-name {
        line-height: 1;
    }

    .page-item__content-hint {
        line-height: 1.3;
        vertical-align: middle;
        max-width: 100%;
    }

    .page-item__tools {
        width: 90px;
        text-align: right;
        font-size: 1.4rem;

        .page-view {
            margin-right: 4px;
        }
    }

    .page-icon {

        color: #0082BA;
        font-weight: 700;

        &.children-open:before {
            content: '\f056';
        }

        &.children-closed:before{
            content: '\f055';
        }

        &.not-routable {
            color: #CE431D;
        }

        &.not-visible {
            color: #999;
        }

        &.modular {
            color: #9055AF;
        }
    }

    #pages-legend {
        margin-top: 1.5rem;
        text-align: center;

        h2, ul, li {
            display: inline-block;
        }

        li {
            margin-right: 0.75rem;
        }
    }
}

#page-filtering {
    margin: 0 $padding-default 1rem;
    @include clearfix;

    @include breakpoint(mobile-only) {
        margin: -1rem 1rem 1rem;
    }

    .page-filters {
        width: 60%;
        float: left;

        @include breakpoint(mobile-only) {
            width: 100%;
        }

    }

    .page-search {
        position: relative;
        width: 40%;
        float: left;
        padding-left: 2rem;
        text-indent: 2.5rem;
        &:after {
            position: absolute;
            right: 15px;
            top: 10px;
            content: '\f002';
            font-family: 'FontAwesome';
        }

        @include breakpoint(mobile-only) {
            width: 100%;
            padding-top: 1rem;
            padding-left: 0rem;

            &:after {
                top: 1.5rem;
            }
        }
    }

    .page-shortcuts {
        @include clearfix;
        clear: both;
        padding-top:5px;
    }

    .selectize-control.single.plugin-remove_button .selectize-input,
    .selectize-control.multi .selectize-input {

        padding: ($leading-margin / 4) ($leading-margin / 4);

        &.has-items {
            padding-top: 6px;
            padding-bottom: 4px;
        }

        input {
            font-size: $core-font-size;
            line-height: $core-line-height;
        }


        .item {
            color: #777;
            background: #eee;

            padding: 2px 10px;
            &[data-value='Routable'] {
                background: #CE431D;
                color: $white;
            }
            &[data-value='NonRoutable'] {
                color: #CE431D;
            }
            &[data-value='Visible'] {
                background: #0082BA;
                color: $white;
            }
            &[data-value='NonVisible'] {
                color: #0082BA;
            }
            &[data-value='Modular'] {
                background: #9055AF;
                color: $white;
            }
            &[data-value='NonModular'] {
                color: #9055AF;
            }
            &[data-value='Published'] {
                background: #0093B8;
                color: $white;
            }
            &[data-value='NonPublished'] {
                color: #0093B8;
            }
        }

    }
}

.admin-form-wrapper {
    position: relative;
}

#admin-topbar {
    position: absolute;
    right: 5px;
    height: 50px;

    @include breakpoint(mobile-only) {
        position: relative;
        width: 100%;
        right: 0;
        padding: 0 .5rem;
        margin: -2rem 0 2rem 0;
    }

    #admin-mode-toggle, #admin-lang-toggle {
        @extend %vertical-align;
        height: 38px;
        display: inline-flex;
        vertical-align: inherit;

        @include breakpoint(mobile-only) {
            float: right;
        }
    }

    #admin-lang-toggle {
        z-index: 3;
        float: left;
        margin-right: 5px;

        button {
            padding: 0.3rem 0.5rem;
            height: 100%;
        }

        .dropdown-menu {
            button {
                width: 100%;

            }
        }
    }

    .switch-grav {
        border: 0;
        line-height: 38px;

    }

    .switch-toggle {
        @include breakpoint(mobile-only) {
            width: 100%;
        }
    }
}

@for $i from 0 to 10 {
    .depth-#{$i} .row {
        padding-left: 3rem * ($i + 1);
    }

    @include breakpoint(mobile-only) {
        .depth-#{$i} .row {
            padding-left: 1rem * ($i + 1);
        }
    }
}

.selectize-route-option {
    display: flex;

    > :first-child {
        flex: 0 0 auto;
        width: auto;
        margin-right: 10px;
    }

    > :last-child {
        flex: 1 1 auto;

        > * {
            display: block;
        }
    }

}

.hidden {
    display: none!important;
}

.switch-toggle input[type="radio"] {
    display: none!important;
}

[data-acl_picker] {
    .permissions-item {
        display: flex;
        align-items: center;
        vertical-align: center;

        .selectize-control, a, input, button {
            display: inline-flex;
            margin: 0 .5rem;
            align-items: center;
            vertical-align: center;
        }

        .selectize-control {
            flex-grow: 1;
        }

        .selectize-control {
            margin-left: 0;
        }

        .switch-toggle {
            margin: 0;
        }

        &:last-child {
            margin-right: 0;
        }
    }
}