index.scss

@mixin backface-visibility($visibility) {
    backface-visibility: $visibility;
    -webkit-backface-visibility: $visibility;
    -moz-backface-visibility: $visibility;
    -ms-backface-visibility: $visibility;
    -o-backface-visibility: $visibility;
}

@mixin user-select($value) {
    user-select: $value;
    -moz-user-select: $value;
    -ms-user-select: $value;
    -webkit-user-select: $value;
}

@mixin supports-safe-area-insets {
    @supports (padding-top: env(safe-area-inset-top)) {
        @content;
    }
}

html {
    background-color: #477148;
    background-image: linear-gradient(180deg, #477148 0%, #416941 100%);
    font-size: 1vw;
}

@media screen and (min-aspect-ratio: 95/100) {
    html {
        font-size: 0.95vh;
    }
}

body {
    font-family: "Avenir-Book", "Avenir", sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

div#buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #aaa;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    overflow: visible;
    text-transform: none;
    @include supports-safe-area-insets {
        padding-bottom: env(safe-area-inset-bottom);
        bottom: calc(0px - env(safe-area-inset-top));
    }
}

div#buttons button {
    margin: 0 1px;
    padding: 0;
    height: 5vh;
    font-family: inherit;
    font-size: 2.5vh;
    border: none;
    background-color: #ddd;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 30vh;
}

#tableHolder {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5vh;
    top: 0;
    @include supports-safe-area-insets {
        left: env(safe-area-inset-left);
        right: env(safe-area-inset-right);
        top: env(safe-area-inset-top);
        bottom: calc(5vh + env(safe-area-inset-bottom) - env(safe-area-inset-top));
    }
}

.cardTable {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
}

.gameScore {
    font-size: 2vh;
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    padding: 0.5vh;
    @include user-select(none);
}

@mixin cardFaces($cardStyle) {
    $ranks: (
        "r1": "A",
        "r2": "2",
        "r3": "3",
        "r4": "4",
        "r5": "5",
        "r6": "6",
        "r7": "7",
        "r8": "8",
        "r9": "9",
        "r10": "T",
        "r100": "J",
        "r101": "Q",
        "r102": "K",
    );

    $suits: (
        "s1c1": "S",
        "s1c2": "S",
        "s2c1": "H",
        "s2c2": "H",
        "s3c1": "D",
        "s3c2": "D",
        "s4c1": "C",
        "s4c2": "C",
    );

    .pile.showFrame {
        background-image: url("Images/Cards/#{$cardStyle}/00.svg");
    }

    .card .cardBack {
        background-image: url("Images/Cards/#{$cardStyle}/1B.svg");
    }

    @each $suit-key, $suit-value in $suits {
        @each $rank-key, $rank-value in $ranks {
            .card.#{$suit-key}#{$rank-key} .cardFront {
                background-image: url("Images/Cards/#{$cardStyle}/#{$rank-value}#{$suit-value}.svg");
            }
        }
    }
}

.pile {
    position: absolute;
    transition-property: left, top, right, bottom, filter, background-color;
    transition-duration: 0.25s, 0.25s, 0.25s, 0.25s, 0.1s, 0.1s;
    transition-timing-function: ease-in-out;
}

.pile.showFrame {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pile.dropPreview {
    background-color: rgb(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    transition-property: none;
    filter: drop-shadow(0 0 0.4rem rgb(0, 0, 0));
}

.card {
    position: absolute;
    transition-property: left, top, right, bottom, filter, transform, opacity;
    transition-duration: 0.25s, 0.25s, 0.25s, 0.25s, 0.1s, 0.25s, 0.25s;
    transition-timing-function: ease-in-out;
    perspective: 200rem;
}

.card.dragging {
    transition-property: filter;
    transition-duration: 0.1s;
    filter: drop-shadow(0 0 0.4rem rgb(0, 0, 0, 0.5));
}

.card.dropPreview {
    transition-property: none;
    filter: invert(100%) hue-rotate(180deg) drop-shadow(0 0 0.4rem rgb(0, 0, 0));
}

.card .cardRotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.25s ease-in-out;
    transform-style: preserve-3d;
}

.card.won {
    transition-property: left, top, right, bottom, filter, transform, opacity;
    transition-duration: 2s;
    transition-timing-function: ease-in, ease-in, ease-in, ease-in, ease-in, cubic-bezier(0.755, 0.05, 0.855, 0.06),
        ease-in;
    transform: scale(0, 0);
    opacity: 0;
}

.card.faceUp .cardRotation {
    transform: rotateY(180deg);
}

.cardBack,
.cardFront {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    @include backface-visibility(hidden);
    transform-style: preserve-3d;
    image-rendering: optimizeQuality;
}

.card .cardFront {
    transform: rotateY(180deg);
}

@include cardFaces("bridge3-wider-modern-qr");

@media screen and (max-width: 600px), screen and (max-height: 600px) {
    @include cardFaces("bridge3-plain-super-qr");
}