@charset "utf-8";

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/components/dropdown.sass";

$body-background-color: $light;
$menu-item-hover-background-color: #dfdfdf;
$menu-item-active-background-color: #d2d2d2;

@import "~bulma";

//-- helpers/modifiers
.is-fullwidth { width: 100%; }
.is-fullheight { height: 100%; }
.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    margin-bottom: 0px;
    border-radius: 0;
}
.is-borderless { border: none; }

.has-text-nowrap {
    white-space: nowrap;
}

.has-background-transparent {
    background-color: transparent;
}

.is-opacity-light {
    opacity: 0.7;
    &:hover {
        opacity: 1;
    }
}

.float-right { float: right }
.float-left { float: left }
.overflow-hidden { overflow: hidden }
.overflow-hidden.is-fullwidth { max-width: 100%; }


*[draggable="true"] {
    cursor: move;
}

//-- forms
input.half-field:not(:active):not(:hover) {
    border: none;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
}


//-- animations
@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.blink {
    animation: 1s ease-in-out 3s infinite alternate blink;
}


//-- navbar
.navbar + .container {
    margin-top: 1em;
}

.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
    box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
}

a.navbar-item.is-active {
    border-bottom: 1px grey solid;
}

.navbar {
    .navbar-dropdown {
        z-index: 2000;
    }

    .navbar-split {
        margin: 0.2em 0em;
        margin-right: 1em;
        padding-right: 1em;
        border-right: 1px $grey-light solid;
        display: inline-block;
    }

    form {
        margin: 0em;
        padding: 0em;
    }

    &.toolbar {
        margin: 1em 0em;
        background-color: transparent;
        margin-bottom: 1em;

        .title {
            padding-right: 2em;
            margin-right: 1em;
            border-right: 1px $grey-light solid;

            font-size: $size-5;
            color: $text-light;
            font-weight: $weight-light;
        }
    }
}

//-- cards
.card {
    .title {
        a {
            color: $dark;
        }

        padding: 0.2em;
        font-size: $size-5;
        font-weight: $weight-medium;
    }

    &.is-primary {
        box-shadow: 0em 0em 0.5em $black
    }
}

.card-super-title {
    position: absolute;
    z-index: 1000;
    font-size: $size-6;
    font-weight: $weight-bold;
    padding: 0.2em;
    top: 1em;
    background-color: #ffffffc7;
    max-width: 90%;

    .fas {
        padding: 0.1em;
        font-size: 0.8em;
    }
}


//-- page
.page {
    & > .cover {
        float: right;
        max-width: 45%;
    }

    .header {
        margin-bottom: 1.5em;
    }

    .headline {
        font-size: 1.4em;
        padding: 0.2em 0em;
    }

    p { padding: 0.4em 0em; }
    hr { background-color: $grey-light; }

    .page-content {
        h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
    }
}


.media.item .headline {
    line-height: 1.2em;
    max-height: calc(1.2em * 3);
    overflow: hidden;

    & + .headline-overflow {
        position: relative;
        width: 100%;
        height: 2em;
        margin-top: -2em;
    }

    & + .headline-overflow:before {
        content:'';
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        bottom:0;
        background:linear-gradient(transparent 1em, $body-background-color);
    }
}


//-- player
.player {
    z-index: 10000;
    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);

    .player-panels {
        height: 0%;
        transition: height 3s;
    }
    .player-panels.is-open {
        height: auto;
    }

    .player-panel {
        margin: 0.4em;
        max-height: 80%;
        overflow-y: auto;
    }

    .progress {
        margin: 0em;
        padding: 0em;
        border-color: $info;
        border-style: 'solid';
    }

    .player-bar {
        border-top: 1px $grey-light solid;

        > div {
            height: 3.75em !important;
        }

        > .media-left:not(:last-child) {
            margin-right: 0em;
        }

        > .media-cover {
            border-left: 1px black solid;
        }

        .cover {
            font-size: 1.5rem !important;
            height: 2.5em !important;
        }

        > .media-content {
            padding-top: 0.4em;
            padding-left: 0.4em;
        }

        .button {
            font-size: 1.5rem !important;
            height: 100%;
            padding: auto 0.2em !important;
            min-width: 2.5em;
            border-radius: 0px;
            transition: background-color 1s;
        }

        .title {
            margin: 0em;
        }
    }

}

//-- media
.media {
    .subtitle {
        margin-bottom: 0.4em;
    }
    .media-content .headline {
        font-size: 1em;
        font-weight: 400;
    }
}

//-- general
body {
    background-color: $body-background-color;
}

section > .toolbar {
    background-color: rgba(0,0,0,0.05);
    padding: 1em;
    margin-bottom: 1.5em;
}


main {
    .cover.is-small { width: 10em; }
    .cover.is-tiny { height: 2em; }
}


aside {
    & > section {
        margin-bottom: 2em;
    }

    .cover.is-small { width: 10em; }
    .cover.is-tiny { height: 2em; }

    .media .subtitle {
        font-size: 1em;
    }
}

.sound-item {
    .cover { height: 5em; }
    .media-content a { padding: 0em; }
    margin-bottom: 0.2em;
}
.sound-item .media-right .button {
    margin-right: 0.2em;
    min-width: 2.5em;
    display: inline-block;
}


.timetable {
    width: 100%;
    border: none;
}
