Cofffee-Assets/styles/material-light/theme/media.scss

@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';


.media-gallery {
    border-radius: 0;

    &__item { border-radius: 0 }
}

.media-modal__close {
    align-content: center;

    &.icon-button {
        background: transparent;
        color: $media-icon-color;
        text-align: center !important;
        font-size: 24px !important;
        width: 48px !important;
        height: 48px !important;
        border: 12px;

        &:hover {
            background: $media-icon-background-hover-color;
            color: $media-icon-hover-color;
        }

        .fa-fw { width: 24px }
    }
}

.media-modal {
    &__nav {
        background: $media-icon-background-color;
        color: $media-icon-color;
        height: 48px;
        width: 48px;
        margin: auto 16px;
        padding: 8px;
        border-radius: 50%;
    
        .fa { width: 32px }
    }

    &__button {
        background-color: $media-page-indicator-color;

        &--active { background-color: $media-page-indicator-active-color }
    }
}

.video-player {
    &__controls {
        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
        padding: 0 12px;
    }

    &__seek {
        &::before {
            background: rgba(255,255,255,.2);
            border-radius: 0;
        }

        &__buffer {
            background: rgba(255,255,255,.4);
            border-radius: 0;
        }

        &__progress {
            background: $primary-color;
            border-radius: 0;
        }

        &__handle {
            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
            background-color: $primary-color;
            box-shadow: none;
        }
    }

    &__volume {
        &::before {
            background: rgba(255,255,255,.4);
            border-radius: 0;
        }

        &__current {
            background: $primary-color;
            border-radius: 0;
        }

        &__handle {
            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
            background-color: $primary-color;
            box-shadow: none;
        }
    }

    &__time-current { margin-left: 68px }

    &__buttons button { font-size: 20px }
}