galleryCard.scss

TLDR

This file, galleryCard.scss, defines the styling for a gallery card component. It contains styles for the gallery card itself, as well as its various elements such as the options menu, gallery item, gallery image, gallery title, gallery props, and gallery badges.

Classes

.GalleryCard

This class represents the gallery card component and contains the main styles for the card. It sets the position, border, border radius, width, and display of the card. It also includes styles for hover and selected states, as well as a fix for Chrome drag and drop preview. The .GalleryCard class also contains nested styles for the options menu, gallery item, gallery image, gallery title, gallery props, and gallery badges.

.optionsMenu

This class represents the options menu element within the gallery card. It sets the z-index, background color, border radius, display, and position of the menu.

.gallery-item

This class represents the gallery item element within the gallery card. It sets the background color, flex-grow, overflow, padding, font size, opacity, max height, min height, and pointer events for the item. It also contains styles for the nested CheckboxElement and Editable elements.

.gallery-image

This class represents the gallery image element within the gallery card. It sets the flex-grow, overflow, max height, min height, and pointer events for the image. It also contains styles for the nested ImageElement.

.gallery-title

This class represents the gallery title element within the gallery card. It sets the flex-grow, border top, margin, padding, display, overflow wrap, and font weight for the title. It also contains styles for the nested octo-icon and octo-titletext elements.

.gallery-props

This class represents the gallery props element within the gallery card. It sets the display, flex direction, align items, flex-grow, margin, padding, and overflow wrap for the props. It also contains styles for the nested octo-tooltip and octo-icon elements.

.gallery-badges

This class represents the gallery badges element within the gallery card. It sets the padding for the badges.

@import '../../styles/z-index';

.GalleryCard {
    position: relative;
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
    border-radius: var(--default-rad);
    width: 280px;
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;

    // HACK: Fixes Chrome drag and drop preview
    transform: translate3d(0, 0, 0);

    &.selected {
        background-color: rgba(90, 200, 255, 0.2);
    }

    &:hover {
        background-color: rgba(var(--center-channel-color-rgb), 0.05);

        .optionsMenu {
            display: block;
        }
    }

    .optionsMenu {
        @include z-index(gallery-options-menu);
        background-color: rgb(var(--center-channel-bg-rgb));
        border-radius: var(--default-rad);
        display: none;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .gallery-item {
        background-color: rgba(var(--center-channel-color-rgb), 0.03);

        flex-grow: 1;
        overflow: hidden;
        padding: 0 10px;
        font-size: 0.7em;
        opacity: 0.7;
        max-height: 160px;
        min-height: 160px;
        pointer-events: none;

        .CheckboxElement {
            .Editable {
                background: transparent;
            }
        }
    }

    .gallery-image {
        flex-grow: 1;
        overflow: hidden;
        max-height: 160px;
        min-height: 160px;
        pointer-events: none;

        .ImageElement {
            width: 100%;
        }
    }

    .gallery-title {
        flex-grow: 0;
        border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
        margin: 0;
        padding: 5px 10px;
        display: flex;
        overflow-wrap: anywhere;
        font-weight: 600;

        .octo-icon {
            margin-right: 5px;
        }

        .octo-titletext {
            display: -webkit-box; // stylelint-disable-line
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical; // stylelint-disable-line
        }
    }

    .gallery-props {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-grow: 0;
        margin: 0;
        padding: 5px 10px;
        overflow-wrap: anywhere;

        .octo-tooltip {
            max-width: 100%;
        }

        .octo-icon {
            margin-right: 5px;
        }
    }

    .gallery-badges {
        padding: 5px 10px;
    }
}