LuckyDiamond/luckydiamond/src/assets/css/global.css

/* Global Settings */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}

ul {
    list-style: none;
}

body,
html {
    background: #121212;
    height: 100%;
    margin: 0;
    overflow-y: hidden;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button:focus {
    outline: none;
}

button {
    cursor: pointer;
}

/* /Global Settings */

/* Content Grid */

.content-grid {
    display: grid;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
        "menu header header header header header header"
        "menu main main main main main chat"
        "menu main main main main main chat"
        "menu gamemode gamemode gamemode gamemode gamemode chat"
        "menu gamemode gamemode gamemode gamemode gamemode chat"
        "menu gamemode gamemode gamemode gamemode gamemode chat";
    height: 100%;
    grid-gap: 0.625rem;
}

.content__grid-profile {
    display: grid;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
        "menu header header header header header header"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat"
        "menu profile profile profile profile profile chat";
    grid-gap: 0.625rem;
    height: 100%;
}

.content-grid--saper {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu saper saper saper saper saper chat"
        "menu saper saper saper saper saper chat"
        "menu saper saper saper saper saper chat"
        "menu saper saper saper saper saper chat"
        "menu saper saper saper saper saper chat"
        "menu saper saper saper saper saper chat";
    grid-gap: 0.625rem;
}

.content-grid--jackpot {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat";
    grid-gap: 0.625rem;
}

.content-grid--double {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu double double double double double chat"
        "menu double double double double double chat"
        "menu double double double double double chat"
        "menu double double double double double chat"
        "menu double double double double double chat"
        "menu double double double double double chat";
    grid-gap: 0.625rem;
}

.grid-crash {
    display: grid;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    gap: 0.625rem;
    grid-auto-flow: row;
    grid-template-areas:
        "menu header header header header header header"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat";
}

/* /Content Grid */

/* Header */

.header {
    grid-area: header;
    border-radius: 1.25rem;
    background: #17181C;
    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    align-self: start;
}

/* /Header */

/* Menu */

.menu {
    grid-area: menu;
    background: #17181C;
    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    border-radius: 1.25rem;
    align-self: start;
}

/* /Menu */

/* Chat */

.chat {
    grid-area: chat;
    background: #16171B;
    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
    border-radius: 15px;
    /* height: 100%; */
    height: 86vh;
    position: relative;
    z-index: 3;

}

/* /Chat */

/* Main */

.main {
    grid-area: main;
    width: 82%;
    height: 90%;
    margin: 2% auto 0 8%;
}

/* /Main */

/* GameMode */

.gamemode {
    grid-area: gamemode;
    height: 70%;
    width: 100%;
}

/* /GameMode */

/* Profile */

.profile {
    display: flex;
    grid-area: profile;
    height: 95%;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
}

.jackpot {
    display: flex;
    grid-area: jackpot;
    /* height: 95%;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
}

.double {
    display: flex;
    grid-area: double;
   
}

.about {
    grid-area: about;

}


/* /Profile */

/* Saper */

.saper {
    grid-area: saper;
    /*height: 96.2%;*/
}

/* /Saper */

/* Crash */

.crash-content {
    grid-area: crash;
}

.crash-game {
    grid-area: crashgame;
}

.crash-game__players {
    grid-area: crashplayers;
}


.content-grid--about {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat";
    grid-gap: 0.625rem;
}

.content-grid--help {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat";
    grid-gap: 0.625rem;
}

.help {
    grid-area: help;
    display: flex;
    /* height:99%; */
    height: 86vh;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
    /*height: 96.2%;*/
    width: 1000px;
    margin: 0 auto;

}


.bg-gradient-left {
    background: #293561;
    filter: blur(120px);
    position: absolute;
    top: 250px;
    transform: rotate(180deg);
    left: 200px;
    width: 40%;
    height: 55%;
    z-index: 0;
}

.bg-two-gradient-right {
    background: #293561;
    filter: blur(120px);
    position: absolute;
    top: 220px;
    transform: rotate(330deg);
    left: 600px;
    width: 60%;
    height: 35%;
    z-index: 0;
}

/* /Crash */

/* Media */

/* /Media */