mirror of https://github.com/mizanxali/uno-online
388 lines
8.1 KiB
CSS
388 lines
8.1 KiB
CSS
.App {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Homepage */
|
|
.Homepage {
|
|
background-image: url('./assets/Landing-Page.gif');
|
|
background-size: cover;
|
|
margin: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.homepage-menu {
|
|
position: relative;
|
|
top: 120px;
|
|
}
|
|
|
|
.homepage-form {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.homepage-form>h1 {
|
|
margin: 0 30px;
|
|
}
|
|
|
|
.homepage-join {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.homepage-join>input {
|
|
font-size: 15px;
|
|
width: 150px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/* Game.js parent div */
|
|
.Game {
|
|
background-size: cover;
|
|
margin: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Game.js Background */
|
|
.backgroundColorR {
|
|
background-image: url('./assets/backgrounds/bgR.png');
|
|
}
|
|
|
|
.backgroundColorG {
|
|
background-image: url('./assets/backgrounds/bgG.png');
|
|
}
|
|
|
|
.backgroundColorB {
|
|
background-image: url('./assets/backgrounds/bgB.png');
|
|
}
|
|
|
|
.backgroundColorY {
|
|
background-image: url('./assets/backgrounds/bgY.png');
|
|
}
|
|
|
|
/* UNO Cards */
|
|
.Card {
|
|
width: 6rem;
|
|
margin: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Game.js Top Row */
|
|
.topInfo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 60px;
|
|
height: 100px;
|
|
}
|
|
|
|
.topInfo>img {
|
|
width: 7%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.topInfo>h1 {
|
|
margin-top: 10px;
|
|
font-size: 1.8rem;
|
|
padding-top: 2%;
|
|
}
|
|
|
|
.topInfoText {
|
|
font-size: 2rem;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Player Decks */
|
|
.player1Deck {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.player1Deck>img {
|
|
transition: transform 350ms;
|
|
}
|
|
|
|
.player1Deck>img:hover {
|
|
transform: scale(1.08);
|
|
opacity: 1;
|
|
}
|
|
|
|
.player2Deck {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
}
|
|
|
|
.player2Deck>img {
|
|
transition: transform 350ms;
|
|
}
|
|
|
|
.player2Deck>img:hover {
|
|
transform: scale(1.08);
|
|
opacity: 1;
|
|
}
|
|
|
|
.playerDeckText {
|
|
font-size: 2rem;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
/* Game.js Middle Row */
|
|
.middleInfo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.middleInfo>button {
|
|
align-self: center;
|
|
}
|
|
|
|
/* Game Buttons */
|
|
.game-button {
|
|
position: relative;
|
|
top: 0;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
outline: none !important;
|
|
font-family: 'Carter One', sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.5em;
|
|
letter-spacing: .1em;
|
|
text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px #004a87;
|
|
border: none;
|
|
margin: 15px 15px 30px;
|
|
background: repeating-linear-gradient( 45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
|
|
border-bottom: 3px solid rgba(16, 91, 146, 0.5);
|
|
border-top: 3px solid rgba(255,255,255,.3);
|
|
color: #fff !important;
|
|
border-radius: 8px;
|
|
padding: 8px 15px 10px;
|
|
box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.game-button:hover {
|
|
top:2px;
|
|
box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.game-button::before {
|
|
content: '';
|
|
height: 10%;
|
|
position: absolute;
|
|
width: 40%;
|
|
background: #fff;
|
|
right: 13%;
|
|
top: -3%;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.game-button::after {
|
|
content: '';
|
|
height: 10%;
|
|
position: absolute;
|
|
width: 5%;
|
|
background: #fff;
|
|
right: 5%;
|
|
top: -3%;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.game-button.orange {
|
|
background: repeating-linear-gradient( 45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
|
|
box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0,0,0,.3);
|
|
border-bottom: 3px solid rgba(205, 102, 0, 0.5);
|
|
text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px #c96100;
|
|
}
|
|
|
|
.game-button.orange:hover {
|
|
top:2px;
|
|
box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.game-button.red {
|
|
background: repeating-linear-gradient( 45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
|
|
box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0,0,0,.3);
|
|
border-bottom: 3px solid rgba(160, 25, 23, 0.5);
|
|
text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
|
|
}
|
|
|
|
.game-button.red:hover {
|
|
top:2px;
|
|
box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.game-button.green {
|
|
background: repeating-linear-gradient( 45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
|
|
box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0,0,0,.3);
|
|
border-bottom: 3px solid rgba(40, 117, 29, 0.5);
|
|
text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
|
|
}
|
|
|
|
.game-button.green:hover {
|
|
top:2px;
|
|
box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0,0,0,.3);
|
|
}
|
|
|
|
/* Spinner */
|
|
.loader,
|
|
.loader:before,
|
|
.loader:after {
|
|
border-radius: 50%;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation: load7 1.8s infinite ease-in-out;
|
|
animation: load7 1.8s infinite ease-in-out;
|
|
}
|
|
.loader {
|
|
color: #ffffff;
|
|
font-size: 5px;
|
|
margin: 0 50px 0 50px;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
}
|
|
.loader:before,
|
|
.loader:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.loader:before {
|
|
left: -3.5em;
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s;
|
|
}
|
|
.loader:after {
|
|
left: 3.5em;
|
|
}
|
|
@-webkit-keyframes load7 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 2.5em 0 -1.3em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 2.5em 0 0;
|
|
}
|
|
}
|
|
@keyframes load7 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 2.5em 0 -1.3em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 2.5em 0 0;
|
|
}
|
|
}
|
|
|
|
/* Chat Box */
|
|
.chat-box{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
background: white;
|
|
width: 355px;
|
|
border-radius: 5px 5px 0px 0px;
|
|
z-index: 100;
|
|
}
|
|
.chat-box-player1{
|
|
right: 20px;
|
|
}
|
|
.chat-box-player2{
|
|
left: 20px;
|
|
}
|
|
.chat-head{
|
|
width: inherit;
|
|
height: 45px;
|
|
background: #2c3e50;
|
|
border-radius: 5px 5px 0px 0px;
|
|
}
|
|
.chat-head h2{
|
|
color: white;
|
|
padding-top: 5px;
|
|
display: inline-block;
|
|
}
|
|
.chat-head span{
|
|
cursor: pointer;
|
|
float: right;
|
|
width: 25px;
|
|
margin: 10px;
|
|
}
|
|
.chat-body{
|
|
display: none;
|
|
height: 205px;
|
|
width: inherit;
|
|
overflow: hidden auto;
|
|
margin-bottom: 45px;
|
|
}
|
|
.chat-text{
|
|
position: fixed;
|
|
bottom: 0px;
|
|
height: 45px;
|
|
width: inherit;
|
|
}
|
|
.chat-text input{
|
|
width: inherit;
|
|
height: inherit;
|
|
box-sizing: border-box;
|
|
border: 1px solid #bdc3c7;
|
|
padding: 10px;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
.chat-text input:active, .chat-text input:focus, .chat-text input:hover{
|
|
border-color: royalblue;
|
|
}
|
|
.msg-send{
|
|
background: #406a4b;
|
|
}
|
|
.msg-receive{
|
|
background: #595080;
|
|
}
|
|
.msg-send, .msg-receive{
|
|
width: 285px;
|
|
height: 35px;
|
|
padding: 5px 5px 5px 10px;
|
|
margin: 5px auto;
|
|
border-radius: 3px;
|
|
line-height: 30px;
|
|
position: relative;
|
|
color: white;
|
|
}
|
|
.msg-receive:before{
|
|
content: '';
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 15px solid;
|
|
border-color: transparent #595080 transparent transparent;
|
|
left: -29px;
|
|
top: 7px;
|
|
}
|
|
.msg-send:after{
|
|
content: '';
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 15px solid;
|
|
border-color: transparent transparent transparent #406a4b;
|
|
right: -29px;
|
|
top: 7px;
|
|
}
|
|
.msg-receive:hover, .msg-send:hover{
|
|
opacity: .9;
|
|
}
|