Media App

index.html

<div id="main-container">
        <div id="app-view">

            <header>
                <div class="inner">
                    <h1 id="app-title">אפלימדיה</h1>
                    <img id="user-image" src="//yarivfruend.com/Portfolio/applimedia/img/yariv-fruend.jpg" alt="user-image">
                </div>
                <div class="close-tab-btn hidden"></div>
            </header>

            <main>

                <section class="main-tab movies">

                    <div class="inner">
                        <h2 class="title">סרטים</h2>
                        <span class="item-count">10</span><span class="count-unit"> פריטים</span>
                    </div>

                    <div class="gallery">

                        <div class="carousel">
                            <h3 class="title">נטפליקס</h3>
                            <div class="items">
                                <a href="#" class="fight-club">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="men-in-black-3">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="shawshank-redemption">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                        <div class="carousel">
                            <h3 class="title">סלקום TV</h3>
                            <div class="items">
                                <a href="#" class="rouge-one">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="suicide-squad">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="john-wick">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                    </div>

                    <setcion class="item-preview">
                        <div class="back-img"></div>
                        <div class="inner">
                            <h4 class="title"></h4>
                            <div class="release-date"></div>
                        </div>
                        <a href="//Yarivfruend.com" target="_blank" class="play">התחל</a>
                        <div class="description"></div>
                    </setcion>

                </section>
                <section class="main-tab music">

                    <div class="inner">
                        <h2 class="title">מוזיקה</h2>
                        <span class="item-count">10</span><span class="count-unit"> פריטים</span>
                    </div>

                    <div class="gallery">

                        <div class="carousel">
                            <h3 class="title">אייטיונס</h3>
                            <div class="items">
                                <a href="#" class="portugal">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="havana">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="thunder">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                        <div class="carousel">
                            <h3 class="title">ספוטיפיי</h3>
                            <div class="items">
                                <a href="#" class="perfect">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="malone">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="sam-smith">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                    </div>

                    <setcion class="item-preview">
                        <div class="back-img"></div>
                        <div class="inner">
                            <h4 class="title"></h4>
                            <div class="release-date"></div>
                        </div>
                        <a href="//Yarivfruend.com" target="_blank" class="play">התחל</a>
                        <div class="description"></div>
                    </setcion>

                </section>
                <section class="main-tab podcasts">

                    <div class="inner">
                        <h2 class="title">פודקסטים</h2>
                        <span class="item-count">10</span><span class="count-unit"> פריטים</span>
                    </div>

                    <div class="gallery">

                        <div class="carousel">
                            <h3 class="title">מפתחים חסרי תרבות - פרקים חדשים</h3>
                            <div class="items">
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                        <div class="carousel">
                            <h3 class="title">מפתחים חסרי תרבות - פרקים נבחרים</h3>
                            <div class="items">
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="notarbut">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                    </div>

                    <setcion class="item-preview">
                        <div class="back-img"></div>
                        <div class="inner">
                            <h4 class="title"></h4>
                            <div class="release-date"></div>
                        </div>
                        <a href="//Yarivfruend.com" target="_blank" class="play">התחל</a>
                        <div class="description"></div>
                    </setcion>

                </section>
                <section class="main-tab books">

                    <div class="inner">
                        <h2 class="title">ספרים</h2>
                        <span class="item-count">10</span><span class="count-unit"> פריטים</span>
                    </div>

                    <div class="gallery">

                        <div class="carousel">
                            <h3 class="title">ספרי שמע</h3>
                            <div class="items">
                                <a href="#" class="toldot">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="tomorrow">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="knock">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                        <div class="carousel">
                            <h3 class="title">ספרי קריאה</h3>
                            <div class="items">
                                <a href="#" class="you-dont">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="design-patterns">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#" class="los-logos">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                                <a href="#">
                                    <div class="thumb"></div>
                                </a>
                            </div>
                        </div>

                    </div>

                    <setcion class="item-preview">
                        <div class="back-img"></div>
                        <div class="inner">
                            <h4 class="title"></h4>
                            <div class="release-date"></div>
                        </div>
                        <a href="//Yarivfruend.com" target="_blank" class="play">התחל</a>
                        <div class="description"></div>
                    </setcion>

                </section>

            </main>
            
        </div>
    </div>

media-app.markdown

Media App

A Pen by Yariv Fruend on CodePen.

License.

script.js

let mediaApp = {};

mediaApp.header = document.querySelector('header');
mediaApp.view = document.querySelector('#app-view');
mediaApp.tabContainer = document.querySelector('#app-view > main');
mediaApp.closeTabBtn = document.querySelector('.close-tab-btn');

mediaApp.selectedTab;
mediaApp.selectedItem;
mediaApp.preview;

document.addEventListener('click', (e) => {

    // Main Tab
    if (e.target.classList.contains('main-tab')) {

        document.body.classList.add('full-screen-tab');

        mediaApp.selectedTab = e.target;
        mediaApp.selectedTab.classList.add('expanded', 'full-screen-show');
        mediaApp.selectedTab.style.transform = 'translate(var(--wrapper-width), ' + mediaApp.calcDistanceFromTop(e.target) * -1 + 'px)';

        mediaApp.closeTabBtn.classList.remove('hidden');
        mediaApp.closeTabBtn.classList.add('full-screen-show');

    } else if (e.target.parentElement.classList.contains('inner') && e.target.parentElement.parentElement.classList.contains('main-tab')) {

        document.body.classList.add('full-screen-tab');

        mediaApp.selectedTab = e.target.parentElement.parentElement;
        mediaApp.selectedTab.classList.add('expanded', 'full-screen-show');
        mediaApp.selectedTab.style.transform = 'translate(var(--wrapper-width), ' + mediaApp.calcDistanceFromTop(e.target.parentElement.parentElement) * -1 + 'px)';

        mediaApp.closeTabBtn.classList.remove('hidden');
        mediaApp.closeTabBtn.classList.add('full-screen-show');

    } else if (e.target.classList.contains('inner') && e.target.parentElement.classList.contains('main-tab')) {

        document.body.classList.add('full-screen-tab');

        mediaApp.selectedTab = e.target.parentElement;
        mediaApp.selectedTab.classList.add('expanded', 'full-screen-show');
        mediaApp.selectedTab.style.transform = 'translate(var(--wrapper-width), ' + mediaApp.calcDistanceFromTop(e.target.parentElement) * -1 + 'px)';

        mediaApp.closeTabBtn.classList.remove('hidden');
        mediaApp.closeTabBtn.classList.add('full-screen-show');

    }

    // Close Button
    if (e.target.className === 'close-tab-btn full-screen-show' && !document.body.classList.contains('preview')) {

        document.body.classList.remove('full-screen-tab');

        mediaApp.selectedTab.classList.remove('expanded', 'full-screen-show');
        mediaApp.selectedTab.style.transform = '';

        mediaApp.closeTabBtn.classList.add('hidden');
        mediaApp.closeTabBtn.classList.remove('full-screen-show');

    } else if (e.target.className === 'close-tab-btn full-screen-show' && document.body.classList.contains('preview')) {

        document.body.classList.remove('preview')

        mediaApp.selectedItem.classList.remove('selected');
        mediaApp.selectedItem.style.left = '';
        mediaApp.selectedItem.style.top = '';

        mediaApp.preview.classList.remove('active');
        mediaApp.selectedItem.classList.remove('selected');

    }

    // Media Item
    if (e.target.classList.contains('thumb')) {

        document.body.classList.add('preview');

        mediaApp.selectedItem = e.target.parentElement;
        mediaApp.selectedItem.classList.add('selected');

        mediaApp.preview = e.path[5].children[2];
        mediaApp.preview.classList.add('active');

        mediaApp.setItemContent(mediaApp.selectedItem)
        mediaApp.moveItemToPreview(mediaApp.selectedItem);

    }

});

document.addEventListener('dragstart', (e) => {

    e.preventDefault();
    let dragged = e.target;

    if (dragged.children[0].classList.contains('thumb')) {
        alert("מנסה לגלול לצד? אני מאתגר אותך להוסיף את הפיצ'ר :) נקודות בונוס למי שלא משתמש בספריה חיצונית!");
    }

});

mediaApp.calcDistanceFromTop = function (el) {

    let viewTopPadding = Number(window.getComputedStyle(mediaApp.view).getPropertyValue("padding-top").replace(/\D/g, ''));
    let headerHeight = mediaApp.header.clientHeight + Number(window.getComputedStyle(mediaApp.header).getPropertyValue("margin-bottom").replace(/\D/g, ''));
    let distance = headerHeight + viewTopPadding;

    for (let elIndex = 0; mediaApp.tabContainer.children[elIndex] !== el; elIndex++) {
        distance += mediaApp.tabContainer.children[elIndex].clientHeight + Number(window.getComputedStyle(mediaApp.tabContainer.children[elIndex]).getPropertyValue("margin-bottom").replace(/\D/g, ''));
    }

    return distance;

}

mediaApp.moveItemToPreview = function (el) {

    // The desired item positon on preview (relative to app view)
    let previewX = 131;
    let previewY = 90;

    previewX = (el.offsetLeft + el.offsetParent.offsetLeft) - previewX;
    previewY = (el.offsetTop + el.offsetParent.offsetTop) - previewY;

    el.style.left = (previewX * -1) + 'px';
    el.style.top = (previewY * -1) + 'px';

}

mediaApp.setItemContent = function (el, tabPreview) {

    let backgroundImage = mediaApp.preview.children[0];
    let title = mediaApp.preview.children[1].children[0];
    let releaseDate = mediaApp.preview.children[1].children[1];
    let description = mediaApp.preview.children[3];

    switch (el.classList[0]) {

        // Movies
        case 'men-in-black-3':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/men-in-black-back.jpg) no-repeat top center'
            title.textContent = 'גברים בשחור';
            releaseDate.textContent = 2012;
            description.textContent = 'גברים בשחור 3 הוא הפרק השלישי בסדרת פנטזיית הפעולה האהובה על הסוכנים גיי וקיי הדואגים לחיסולם של חוצנים המאיימים לפלוש לשטחה של ארצות הברית ולאיים על העולם כולו.';

            break;

        case 'fight-club':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/fight-club-back.jpg) no-repeat top center'
            title.textContent = 'מועדון קרב';
            releaseDate.textContent = 1999;
            description.textContent = "דם וכאב הם מנת חלקם של הבחורים הצעירים שמגיעים למועדון הקרב - מועדון שמאפשר להם להאבק אחד בשני וכך לשחרר את המתחים של שבוע העבודה הקשה. טיילר (פיט) וקריין (נורתון) הם מקימי המועדון - אבל בעוד קריין מתחיל אבד את השפיות שלו ואת השליטה בחייו, טיילר הופך למודל להערצה בעיני כל באי המועדון - הכוח שלו בונה לו צבא של מאמינים שהכוונות שלו לא טהורות לגמרי."

            break;

        case 'shawshank-redemption':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/shawshank-redemption-back.jpg) no-repeat top center'
            title.textContent = 'חומות של תקווה';
            releaseDate.textContent = 1994;
            description.textContent = 'אנדי (טים רובינס) נעצר בחשד לרצח אשתו ומאהבה, נשפט ונשלח לכלא "שאשנק" הידוע לשמצה, כשנראה שאין לו סיכוי לצאת משם, או אף לשרוד במקום. אבל הוא לומד להסתגל למציאות הקשוחה והאכזרית סביבו. הוא מתחבר עם רד (פרימן) אסיר ותיק שיושב כבר שנים רבות יודע משהו על חיי הכלא, על הצדק ועל החיים. החברות מחזיקה אותם בתנאים הקשים, וחוכמתו של אנדי אף מוציאה אותו מצרות ונותנת לו דרך להסתדר עם אנשי הסגל המרושעים ועם האסירים האלימים.';

            break;

        case 'rouge-one':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/rouge-one-back.jpg) no-repeat top center'
            title.textContent = 'רוג אחת: סיפור מלחמת הכוכבים';
            releaseDate.textContent = 2016;
            description.textContent = 'רוג אחד: סיפור מלחמת הכוכבים הוא הסרט הראשון בסדרת סרטי מלחמת הכוכבים שתעמוד בפני עצמה מאולפני לוקאספילם. הסרט מספר את סיפורם של חבורת גיבורים לא צפויים המתאחדת כדי לקחת על עצמה את המשימה המסוכנת והכמעט בלתי אפשרית לגנוב את התוכניות של נשק הרסני.';

            break;

        case 'suicide-squad':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/suicide-squad-back.jpg) no-repeat top center'
            title.textContent = "יחידת המתאבדים";
            releaseDate.textContent = 2016;
            description.textContent = "סוכנות ממשלתית סודית מגייסת את חבורת הנבלים האכזרית ביותר אשר כלואה בבית הסוהר בגות'האם, לביצוע משימת התאבדות של ממש. אם יצליחו במשימה וישארו בחיים – מבטיחה הסוכנות חנינה לכל הנבלים. מי ישרוד את המשימה והאם תעמוד הסוכנות במילתה לשחרר את הרוע ברחובות העיר?";

            break;

        case 'john-wick':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/john-wick-back.jpg) no-repeat top center'
            title.textContent = "ג'ון וויק";
            releaseDate.textContent = 2014;
            description.textContent = 'כאשר רוצח שכיר בדימוס נאלץ לשוב בחזרה לעולם הפשע על ידי בריון צעיר וסדיסטי, הוא יוצא לצוד את יריביו בעזרת המיומנות והאכזריות שהפכה אותו לאגדה בעולם תחתון.';

            break;

            // Music
        case 'portugal':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/portugal-back.jpg) no-repeat top center'
            title.innerHTML = 'Feel It Still';
            releaseDate.textContent = 2017;
            description.textContent = "פורטוגל. דה מאן הוקמה בשנת 2005 בפורטלנד, אורגון. חברי הלהקה הם ג'ון גורלי, זח קרודרס, קייל  אוקווין, נח גרש וקיין ריטצו'ט.";

            break;

        case 'havana':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/havana-back.jpg) no-repeat top center'
            title.innerHTML = 'Havana';
            releaseDate.textContent = 2017;
            description.textContent = 'קרלה קמילה קביו אסטרבאו היא זמרת ופזמונאית אמריקאית מקובה. כחלק מלהקת הבנות Fifth Harmony, קביו והלהקה הוציאו מיני-אלבום אחד ושני אלבומי אולפן.';

            break;

        case 'thunder':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/thunder-back.jpg) no-repeat top center'
            title.innerHTML = 'Thunder';
            releaseDate.textContent = 2017;
            description.textContent = "אימג'ין דרגונס היא להקת רוק אלטרנטיבי מלאס וגאס שבנבדה. הלהקה קיבלה חשיפה בעקבות אלבום הבכורה המצליח שלהם, Night Visions, שיצא לאור בספטמבר 2012 והגיע למקום השני במצעד האלבומים של ארצות הברית בילבורד 200.";

            break;

        case 'perfect':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/perfect-back.jpg) no-repeat top center'
            title.innerHTML = 'Perfect';
            releaseDate.textContent = 2017;
            description.textContent = 'אדוארד כריסטופר "אד" שירן הוא זמר-יוצר ומלחין בריטי. ב-2012, זכה שירן בשני פרסי המוזיקה הבריטית בקטגוריות "אמן הסולו הבריטי הטוב ביותר" ו"האמן הבריטי פורץ הדרך".';

            break;

        case 'malone':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/malone-back.jpg) no-repeat top center'
            title.innerHTML = 'Rockstar';
            releaseDate.textContent = 2017;
            description.textContent = "אוסטין ריצ'רד פוסט, הידוע בשם הבמה פוסט מלון, הוא ראפר, זמר, מלחין, מפיק וגיטריסט אמריקאי.";

            break;

        case 'sam-smith':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/sam-smith-back.jpg) no-repeat top center'
            title.innerHTML = 'Too Good At Goodbyes';
            releaseDate.textContent = 2017;
            description.textContent = "סמואל פרדריק סמית' הוא זמר אנגלי שהתפרסם לראשונה כשהוציא את השיר 'Latch' שהגיע למקום ה-11 במצעד הסינגלים הבריטי. שיתוף הפעולה שלו עם הזמר Nauhgty Boy הוליד את השיר La La La שהוביל לפרסום בינלאומי, השיר הגיע למקומות הראשונים במצעדים העולמיים.";

            break;

            // Podcasts
        case 'notarbut':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/notarbut-back.jpg) no-repeat top center'
            title.innerHTML = 'מפתחים חסרי תרבות';
            releaseDate.textContent = 2017;
            description.textContent = "פודקאסט על חיי היום יום בצוותי פיתוח. אנחנו מדברים על תרבות באירגוני פיתוח, שוברים מיתוסים, קרשים וכל מה שבא ליד.";
            break;

            // Books
        case 'toldot':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/toldot-back.jpg) no-repeat top center'
            title.innerHTML = 'קיצור תולדות האנושות';
            releaseDate.textContent = 2011;
            description.textContent = "לפני מאה אלף שנים חיו בכדור הארץ לפחות שישה מינים שונים של אדם. לאף אחד מהם לא היתה חשיבות מיוחדת. תפקידם בטבע לא היה גדול מזה של גורילות, גחליליות או סוסוני ים.";
            break;

        case 'tomorrow':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/tomorrow-back.jpg) no-repeat top center'
            title.innerHTML = 'ההיסטוריה של המחר';
            releaseDate.textContent = 2015;
            description.textContent = "זהו ספר שבוחן את זהותה של האנושות ואת חלומותיה, ומציע מבט מרענן ומפתיע על העולם של המאה ה–21.";
            break;

        case 'knock':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/knock-back.jpg) no-repeat top center'
            title.innerHTML = 'פתאום דפיקה בדלת';
            releaseDate.textContent = 2010;
            description.textContent = "פתאום דפיקה בדלת הוא קובץ סיפורים קצרים מאת אתגר קרת, שיצא לאור בשנת 2010. זהו קובץ הסיפורים החמישי של קרת לאחר צנורות, געגועי לקיסינג'ר, הקייטנה של קנלר ואניהו, ומקבץ ראשון לאחר 8 שנים בהן פנה לעסוק בעיקר בכתיבת תסריטים לטלוויזיה, לקומיקס ולקולנוע.";
            break;

        case 'you-dont':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/you-dont-back.jpg) no-repeat top center'
            title.innerHTML = "You Don't Know JS";
            releaseDate.textContent = 2015;
            description.textContent = "סדרת ספרים הצוללת לעומקם של המנגנונים שמאחורי שפת ג'ואווסקריפט.";
            break;

        case 'design-patterns':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/design-patterns-back.jpg) no-repeat top center'
            title.innerHTML = 'JS Design Patterns';
            releaseDate.textContent = 2012;
            description.textContent = "בספר זה נלמד ליישם דפוסי עיצוב קלאסיים ומודרניים בשפת ג'אווסקריפט.";
            break;

        case 'los-logos':

            backgroundImage.style.background = 'url(//yarivfruend.com/Portfolio/applimedia/img/los-logos-back.jpg) no-repeat top center'
            title.innerHTML = 'Los Logos';
            releaseDate.textContent = 2009;
            description.textContent = "לוס לוגוס מציג את ההתפתחויות האחרונות בתחום עיצוב הלוגו - הדיספלינה שמעצבת את זהותם של מותגים, חברות, ואישיויות.";
            break;

    }
}

style.css

:root {
    --view-height: 667px;
    --view-max-width: 375px;
    --title-size: 2em;
    --wrapper-width: 15px;
    --item-thumb-width: 117px;
    --item-thumb-height: 178px;
}

body,
button {
    font-family: 'Assistant', sans-serif;
}

body {
    direction: rtl;
    text-align: right;
    font-size: 16px;
    margin: 30px 0 0 0;
}

body.full-screen-tab header>.inner>#app-title {
    opacity: 0;
}

#main-container {
    text-align: center;
}

#app-view {
    position: relative;
    background-color: white;
    width: 100%;
    height: var(--view-height);
    max-width: var(--view-max-width);
    box-shadow: 0 25px 70px -10px #bbb;
    display: inline-block;
    text-align: right;
    box-sizing: border-box;
    padding: 15px var(--wrapper-width) 0;
    overflow: hidden;
}

header {
    position: relative;
    margin: 0 0 20px 0;
    transition: opacity 500ms ease;
}

header>.inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header #app-title {
    color: #333;
    font-size: var(--title-size);
    margin: 0;
    transition: opacity 500ms ease;
}

#user-image {
    position: relative;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.close-tab-btn {
    position: absolute;
    left: 0;
    top: 6px;
    height: 30px;
    width: 30px;
    background: url('//yarivfruend.com/Portfolio/applimedia/svg/close-btn.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
    border-radius: 50%;
    opacity: 1;
    transition: opacity ease 100ms 0.2s;
}

.close-tab-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

body.preview .close-tab-btn {
    background-color: #333;
}

.main-tab {
    position: relative;
    color: white;
    padding: 18px 16px 22px;
    margin: 0 0 30px 0;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 20px 10px -13px #bbb;
    box-sizing: border-box;
    width: 100%;
    height: 110px;
    transition: all ease 500ms;
    overflow: hidden;
}

.main-tab:last-of-type {
    margin-bottom: 0;
}

.main-tab>.inner>.title {
    font-size: var(--title-size);
    margin: 0;
}

.main-tab>.gallery {
    margin: 35px 0 0 0;
}

.main-tab>.gallery>.carousel {
    display: inline-block;
    transform: translate(-360px, 0);
    transition: transform 500ms ease;
}

.main-tab>.gallery>.carousel:nth-of-type(2) {
    transition-delay: 200ms;
}

.main-tab>.gallery>.carousel:first-of-type>.title {
    margin: 0 0 10px;
}

.main-tab>.gallery>.carousel>.title {
    font-size: calc(var(--title-size) / 2);
    margin: 55px 0 10px;
    opacity: 1;
    transition: all ease 500ms;
}

body.preview .main-tab>.gallery>.carousel>.title {
    opacity: 0;
    visibility: hidden;
}

.main-tab>.gallery>.carousel>.items {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.main-tab>.gallery>.carousel>.items>a {
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
}

.main-tab>.gallery>.carousel>.items>a.selected {
    z-index: 2;
    cursor: default;
    pointer-events: none;
    transform: scale(1.2);
}

.main-tab>.gallery>.carousel>.items>a:first-of-type>.thumb {
    margin-right: 0;
}

body.preview .main-tab>.gallery>.carousel>.items>a:not(.selected) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.main-tab>.gallery>.carousel>.items>a>.thumb {
    box-shadow: 0 9px 25px -5px #222;
    width: var(--item-thumb-width);
    height: var(--item-thumb-height);
    margin: 0 15px 0 0;
}

/* Movies */

.main-tab>.gallery>.carousel>.items>a.fight-club>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/fight-club.jpg');
}

.main-tab>.gallery>.carousel>.items>a.men-in-black-3>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/men-in-black-3.jpg');
}

.main-tab>.gallery>.carousel>.items>a.shawshank-redemption>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/shawshank-redemption.jpg');
}

.main-tab>.gallery>.carousel>.items>a.rouge-one>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/rouge-one.jpg');
}

.main-tab>.gallery>.carousel>.items>a.suicide-squad>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/suicide-squad.jpg');
}

.main-tab>.gallery>.carousel>.items>a.john-wick>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/john-wick.jpg');
}

/* Music */

.main-tab>.gallery>.carousel>.items>a.portugal>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/portugal.jpg');
}

.main-tab>.gallery>.carousel>.items>a.havana>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/havana.jpg');
}

.main-tab>.gallery>.carousel>.items>a.thunder>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/thunder.jpg');
}

.main-tab>.gallery>.carousel>.items>a.perfect>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/perfect.jpg');
}

.main-tab>.gallery>.carousel>.items>a.malone>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/malone.jpg');
}

.main-tab>.gallery>.carousel>.items>a.sam-smith>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/sam-smith.jpg');
}

/* Podcasts */

.main-tab.podcasts>.gallery>.carousel>.items>a>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/notarbut.png');
}

/* Books */

.main-tab>.gallery>.carousel>.items>a.toldot>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/toldot.jpg');
}

.main-tab>.gallery>.carousel>.items>a.tomorrow>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/tomorrow.jpg');
}

.main-tab>.gallery>.carousel>.items>a.knock>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/knock.jpg');
}

.main-tab>.gallery>.carousel>.items>a.you-dont>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/you-dont.jpg');
}

.main-tab>.gallery>.carousel>.items>a.design-patterns>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/design-patterns.jpg');
}

.main-tab>.gallery>.carousel>.items>a.los-logos>.thumb {
    background: url('//yarivfruend.com/Portfolio/applimedia/img/los-logos.jpg');
}

.main-tab.expanded {
    position: relative;
    top: 0;
    right: 0;
    cursor: default;
    width: calc(100% + var(--wrapper-width)*2);
    height: var(--view-height);
    box-shadow: none;
    border-radius: 0;
}

.main-tab.expanded>.gallery>.carousel {
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    height: auto;
}

body.preview .main-tab.expanded>.gallery>.carousel {
    height: 0;
}

.main-tab.expanded {
    transform: translate(-30px, -30px);
}

.main-tab.movies {
    background: linear-gradient(to right, hsl(209, 78%, 45%) 0%, hsl(210, 100%, 56%) 100%);
}

.main-tab.music {
    background: linear-gradient(to right, hsl(120, 60%, 43%) 0%, hsl(120, 61%, 50%) 100%);
}

.main-tab.podcasts {
    background: linear-gradient(to right, hsl(264, 76%, 44%) 0%, hsl(265, 100%, 51%) 100%);
}

.main-tab.books {
    background: linear-gradient(to left, hsl(40, 100%, 50%) 0%, hsl(51, 100%, 50%) 100%);
}

.item-preview {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #333;
    background: white;
    padding: 0 26px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all ease 500ms;
}

.item-preview.active {
    visibility: visible;
    opacity: 1;
}

.item-preview>.back-img,
.item-preview>.back-img>.inner-img {
    width: 100%;
    height: 300px;
}

.item-preview>.back-img {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    transform: scale(1.2);
    transition: all ease 300ms;
}

body.preview .item-preview>.back-img {
    transform: scale(1);
}

.item-preview>.back-img:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.item-preview>.inner,
.item-preview>.play,
.item-preview>.description {
    transition: all 500ms ease;
}

.item-preview>.inner {
    transform: translate(0, 640px);
}

.item-preview.active>.inner {
    transform: translate(0, 307px);
}

.item-preview>.inner>.title {
    line-height: 1;
    margin: 0;
    font-size: var(--title-size);
}

.item-preview>.inner>.release-date {
    font-weight: 600;
}

.item-preview>.play {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    outline: 0;
    color: white;
    background-color: #333;
    border-radius: 30px;
    padding: 9px 20px 10px;
    transform: translate(0, 600px);
    cursor: pointer;
}

.item-preview.active>.play {
    transform: translate(0, 325px);
}

.item-preview>.description {
    transform: translate(0, 600px);
    text-align: right;
}

.item-preview.active>.description {
    transform: translate(0, 353px);
}