mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
102 lines
1.7 KiB
CSS
102 lines
1.7 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;
|
|
}
|
|
|
|
/* /Global Settings */
|
|
|
|
/* Content Grid */
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: .35fr repeat(5, 1fr) 1.2fr;
|
|
grid-template-rows: auto 0fr repeat(4, 1fr); /* Updated this line */
|
|
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 */
|
|
|
|
/* 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;
|
|
background: #999;
|
|
width: 60%;
|
|
height: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* /Main */
|
|
|
|
/* GameMode */
|
|
|
|
.gamemode {
|
|
grid-area: gamemode;
|
|
background: #123123;
|
|
align-self: start;
|
|
}
|
|
|
|
/* /GameMode */ |