/**
 * SPDX-FileCopyrightText: Sebastiano Barezzi <seba@sebaubuntu.dev>
 * SPDX-License-Identifier: MIT
 */

#main-page {
    display: flex;
    flex-direction: row;
}

#apps-list {
    background-color: rgb(var(--mdui-color-surface-container-high));
    display: flex;
    flex-direction: column;
    margin: 32px;
    overflow: auto;
    padding: 0px 16px;
    vertical-align: top;
    width: 400px;
}

#apps-list > h1 {
    /* Add padding for the title */
    padding: 16px;
}

/* App button */
.app-button {
    display: flex;
    flex-shrink: 0;
    margin: 16px 0px;
    padding: 16px 0px;
}

.app-button * {
    /* Cut text */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-button > .image {
    width: 108px;
    margin: 0px 16px;
}

.app-button > .info {
    align-self: center;
    flex-grow: 1;
    margin-right: 16px;
    width: 100%;
}

.app-button > .info > .name,
.app-button > .info > .description {
    margin: 0px;
}

/* App builds tab */
#app-builds {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: calc(100% - 16px);
    margin-top: 16px;
    overflow: auto;
    padding: 0px 32px 0px 0px;
}

/* App header */
.app-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.app-header .material-icons {
    margin-left: 8px;
    margin-right: 8px;
}

.app-header div,
.app-header > .links > .repo-link {
    align-items: center;
    display: flex;
    flex-direction: row;
}

.app-header > .info > .icon {
    width: 96px;
}

.app-header > .info > .name {
    margin-left: 8px;
    margin-right: 16px;
}

.app-header > .links {
    flex-wrap: wrap;
    margin-bottom: 8px;
    margin-left: 8px;
    margin-top: 8px;
}

.app-header > .links > .repo-link {
    margin-left: 8px;
}

/* Build button */
.build-entry {
    background-color: rgb(var(--mdui-color-surface-container-high));
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 16px 0px;
    padding: 32px 0px;
}

.build-entry > * {
    margin-left: 32px;
    margin-right: 32px;
}

.build-entry > .description {
    margin-top: 0px;
    margin-bottom: 0px;
}

.build-entry > .author,
.build-entry > .branch,
.build-entry > .date {
    /* Cut text */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width:1000px) {
    /* 
     * On mobile, we put apps list in upper part 
     * of the screen, and the infos on the bottom
    */

    #main-page {
        flex-direction: column;
        overflow: auto;
    }

    #apps-list {
        margin: 0px 32px;
        height: 50%;
        width: auto;
    }

    #app-builds {
        flex: initial;
        height: 50%;
        margin: 0px;
        overflow: initial;
        padding: 32px;
        width: auto;
    }

    .build-entry {
        float: none;
        height: auto;
        width: 100%;
    }
}