Last active
May 1, 2023 04:10
-
-
Save AndrewRayCode/28facbe7c1c939eaf0d2f99b8b6356c1 to your computer and use it in GitHub Desktop.
2048 Dark Theme, 3D tiles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: #000; | |
} | |
.game-container { | |
background: #444; | |
} | |
.grid-cell { | |
background: #333; | |
box-shadow: 0 0 10px inset #000; | |
} | |
.tile { | |
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1); | |
border-radius: 5px; | |
margin-top: -4px; | |
} | |
.tile .tile-inner { | |
border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
} | |
/* CSS extrusion */ | |
.tile:before { | |
display: block; | |
content: ""; | |
position: absolute; | |
left: 0; | |
right: 0; | |
z-index: -1; | |
top: 6px; | |
border-radius: 7px; | |
height: 100%; | |
background: linear-gradient(to top, #4c4c4c 0%, #7c7c7c 6px); | |
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.5); | |
} | |
/* Fade the background for new tiles */ | |
.tile.tile-merged:before, | |
.tile.tile-new:before { | |
animation: fadePop 400ms; | |
} | |
/* Fade the sheen overlay for new tiles */ | |
.tile.tile-merged:after, | |
.tile.tile-new:after { | |
animation: fadeIn 300ms; | |
} | |
/* Overlay sheen */ | |
.tile:after { | |
display: block; | |
content: ""; | |
position: absolute; | |
left: 0; | |
right: 0; | |
z-index: 2; | |
top: 0; | |
border-radius: 3px; | |
height: 100%; | |
background: linear-gradient( | |
to bottom, | |
rgba(255, 255, 255, 0.4) 0%, | |
rgba(255, 255, 255, 0) 50% | |
); | |
} | |
.tile .tile-inner { | |
box-shadow: inset 0 0 20px red; | |
} | |
.tile.tile-2 { | |
text-shadow: none; | |
} | |
.tile.tile-2 .tile-inner { | |
box-shadow: inset 0 0 10px #999; | |
} | |
.tile.tile-4 { | |
text-shadow: none; | |
} | |
.tile.tile-4 .tile-inner { | |
box-shadow: inset 0 0 10px #cc6b6b, inset 0 1px 1px rgba(255, 255, 255, 1); | |
} | |
.tile.tile-4:before { | |
background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px); | |
} | |
.tile.tile-8:before { | |
background: linear-gradient(to top, #955c41 0%, #886537 6px); | |
} | |
.tile.tile-16:before { | |
background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px); | |
} | |
.tile.tile-32:before { | |
background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px); | |
} | |
.tile.tile-64:before { | |
background: linear-gradient(to top, #7a3030 0%, #952727 6px); | |
} | |
.tile.tile-128 .tile-inner { | |
box-shadow: inset 0 0 10px #ff7100; | |
} | |
.tile.tile-128:before { | |
background: linear-gradient(to top, #917e4c 0%, #8d744a 6px); | |
} | |
.tile.tile-256:before { | |
background: linear-gradient(to top, #917e4c 0%, #8d744a 6px); | |
} | |
.tile.tile-512:before { | |
background: linear-gradient(to top, #917e4c 0%, #8d744a 6px); | |
} | |
.tile.tile-1024 .tile-inner { | |
background: #037043; | |
color: #fff; | |
box-shadow: inset 0 0 20px #00d0ff; | |
text-shadow: 0 0 5px #41ffb6; | |
} | |
.tile.tile-1024:before { | |
background: linear-gradient(to top, #024126 0%, #037043 6px); | |
} | |
.tile.tile-2048 .tile-inner { | |
background: #3a036b; | |
color: #fff; | |
box-shadow: inset 0 0 20px #509ef0; | |
text-shadow: 0 0 6px #c4dcf7; | |
} | |
.tile.tile-2048:before { | |
background: linear-gradient(to top, #18012b 0%, #2c1db5 6px); | |
} | |
.tile.tile-4096 .tile-inner { | |
background: #4e021f; | |
color: #fff; | |
box-shadow: inset 0 0 20px #f14747; | |
text-shadow: 0 0 6px #ff0000; | |
} | |
.tile.tile-4096:before { | |
background: linear-gradient(to top, #4e021f 0%, #b81f1f 6px); | |
} | |
.tile.tile-8192 .tile-inner { | |
background: #1f4000; | |
color: #fff; | |
box-shadow: inset 0 0 10px #cdff00; | |
} | |
@keyframes fadeIn { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@keyframes fadePop { | |
0% { | |
opacity: 0; | |
transform: scale(0); | |
} | |
50% { | |
opacity: 0; | |
transform: scale(0); | |
} | |
75% { | |
opacity: 1; | |
transform: scale(1.05); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
/* Stop the page CSS from overwriting the "user css" chrome plugin editor styles */ | |
#ucss-code-wrapper, | |
#ucss-code-wrapper div { | |
color: #000; | |
background: #fff; | |
} | |
#ucss-code-wrapper div.ucss-panel { | |
background: #000; | |
color: #000; | |
} | |
#ucss-code-wrapper div.ucss-toggle { | |
background: #f00; | |
color: #000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment