splatoon2.ink/src/css/main.scss

@import './fonts';
@import './variables';
@import '~bulma';
@import './modifiers';
@import './backgrounds';
@import './boxes';

html {
    @extend .bg-squids;
}

.fa {
    &:before {
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

.squid-refresh {
    &:before {
        @extend .font-splatoon2;
        content: "\e066";
    }
}

.squid-squid {
    &:before {
        @extend .font-splatoon2;
        content: "\e065";
    }
}

.squid-icon-tilt {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

.main-schedule-box {
    @extend .product-box;
    @extend .bg-stripes-gradient;
    @extend .text-shadow;

    max-width: 600px;
    padding: 35px 10px 10px 10px;
    margin: auto;

    &.splatfest-schedule-box {
        // Provide a little more room for the third Splatfest stage
        max-width: 720px;
        -webkit-mask-size: 730px 1168px;
        mask-size: 730px 1168px;
    }

    &.regular {
        background-color: $bg-battle-regular;
    }

    &.ranked {
        background-color: $bg-battle-ranked;
    }

    &.league {
        background-color: $bg-battle-league;
    }
}

.modal-card.schedule-box {
    @extend .modal-card-product-box;
    @extend .text-shadow;

    .modal-card-head {
        @extend .bg-spots-dots;
    }
    .modal-card-body {
        @extend .bg-stripes-gradient;
    }

    &.regular {
        .modal-card-head {
            background-color: mix($bg-battle-regular, $black-ter, 25%);
        }
        .modal-card-body {
            background-color: $bg-battle-regular;
        }
    }

    &.ranked {
        .modal-card-head {
            background-color: mix($bg-battle-ranked, $black-ter, 25%);
        }
        .modal-card-body {
            background-color: $bg-battle-ranked;
        }
    }

    &.league {
        .modal-card-head {
            background-color: mix($bg-battle-league, $black-ter, 25%);
        }
        .modal-card-body {
            background-color: $bg-battle-league;
        }
    }
}

.salmon-run {
    @extend .text-shadow;
    max-width: 600px;
    margin: 40px auto 0;

    .hook-box, .hook-box:before {
        background-color: darken(#ff5600, 0%);
        @extend .bg-spots-dots;

        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .salmon-run-header, .salmon-run-content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .salmon-run-content {
        padding-top: 15px;
    }
}

.splatfest {
    @extend .text-shadow;
    max-width: 500px;
    margin: auto;

    .hook-box, .hook-box:before {
        background-color: #888;
        @extend .bg-stripes-gradient;

        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .splatfest-header, .splatfest-content {
        padding: 5px 15px 10px;
    }

    .panel-container {
        position: relative;

        .alpha, .bravo {
            @extend .font-splatoon1;
            @extend .title-color;
            @extend .is-size-5;
            position: absolute;
            bottom: 0.25rem;
        }

        .alpha {
            left: 0.25rem;
        }

        .bravo {
            right: 0.25rem;
        }
    }

    .festival-period-container {
        margin-bottom: 10px;
    }

    .festival-period {
        @extend .bg-mask-banner;
        @extend .bg-stripes;
        background-size: 53px 53px;
        padding: 4px 20px;
    }
}

.about-box {
    position: relative;
    margin-top: 50px;

    .hook-box, .hook-box:before {
        background-color: $purple;
        @extend .bg-stripes-gradient;
    }

    @include desktop {
        .hook-box:before {
            -webkit-mask-position: calc(50% - 40px) top;
            mask-position: calc(50% - 40px) top;
            background-position-x: -20px !important;
        }
        .hook-box {
            margin: 0 40px 0 0;
        }
    }

    .hook-box {
        padding: 25px;
        overflow: visible;
    }

    .hero-image {
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
        margin: -40px -55px 0 0;
    }
}

.main-schedule {
    background: rgba(0,0,0,0.7);
    padding: 5px 10px 10px;
    margin: 0 -5px 15px;
    border-radius: 12px;

    .top-bar {
        margin-bottom: 0.5rem;
    }
}

.stage-image {
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 10px;

    position: relative;

    .stage-title {
        position: absolute;
        right: 3px;
        bottom: 3px;

        padding: 2px 5px;
        max-width: 95%;

        background: rgba(0,0,0,0.7);
        border-radius: 8px;

        font-size: 0.9rem;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}