mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
159 lines
3.1 KiB
CSS
159 lines
3.1 KiB
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;
|
|
}
|
|
|
|
/* /Global Settings */
|
|
|
|
/* Content Grid */
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: .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: 10px;
|
|
}
|
|
|
|
.content__grid-profile {
|
|
display: grid;
|
|
grid-template-columns: .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";
|
|
grid-gap: 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
.content-grid--saper {
|
|
display: grid;
|
|
grid-auto-columns: 1fr;
|
|
grid-template-columns: .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: 10px;
|
|
}
|
|
|
|
|
|
/* /Content Grid */
|
|
|
|
/* Header */
|
|
|
|
.header {
|
|
grid-area: header;
|
|
border-radius: 20px;
|
|
background: #17181C;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
align-self: start;
|
|
}
|
|
|
|
/* /Header */
|
|
|
|
/* Menu */
|
|
|
|
.menu {
|
|
grid-area: menu;
|
|
background: #17181C;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
border-radius: 20px;
|
|
align-self: start;
|
|
}
|
|
|
|
/* /Menu */
|
|
|
|
/* Chat */
|
|
|
|
.chat {
|
|
grid-area: chat;
|
|
background: #16171B;
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
|
border-radius: 20px;
|
|
height: 90%;
|
|
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: 50px;
|
|
background: #17181C;
|
|
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
margin: 10px 39px 18px 13px;
|
|
}
|
|
|
|
/* /Profile */
|
|
|
|
/* Saper */
|
|
|
|
.saper {
|
|
grid-area: saper;
|
|
/*height: 96.2%;*/
|
|
}
|
|
|
|
/* /Saper */ |