hamburger v2
This commit is contained in:
Thibault Duplessis
parent
21864eec39
commit
be8022f23a
|
|
@ -60,7 +60,13 @@ chessground: Boolean = true)(body: Html)(implicit ctx: Context)
|
|||
</form>
|
||||
<div id="site_description">@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()</div>
|
||||
<div id="top" class="@ctx.is3d.fold("is3d", "is2d")">
|
||||
<a href="#" id="fpmenu_toggle"></a>
|
||||
<div id="hamburger" class="closed">
|
||||
<div class="top"></div>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||
<path id="ham-circle" fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,32h32c0,0,11.723-0.306,10.75-11 c-0.25-2.75-1.644-4.971-2.869-7.151C50.728,7.08,42.767,2.569,33.733,2.054C33.159,2.033,32.599,2,32,2C15.432,2,2,15.432,2,32 c0,16.566,13.432,30,30,30c16.566,0,30-13.434,30-30C62,15.5,48.5,2,32,2S1.875,15.5,1.875,32"/>
|
||||
</svg>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
@if(!zen) {
|
||||
<div id="sound_control" class="fright link">
|
||||
<button id="sound_state" class="a available hint--bottom-left">
|
||||
|
|
@ -129,30 +135,6 @@ chessground: Boolean = true)(body: Html)(implicit ctx: Context)
|
|||
</div>
|
||||
}
|
||||
</div>
|
||||
<div id="hamburger" class="hamburglar is-closed">
|
||||
<div class="burger-icon">
|
||||
<div class="burger-container">
|
||||
<span class="burger-bun-top"></span>
|
||||
<span class="burger-filling"></span>
|
||||
<span class="burger-bun-bot"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="burger-ring">
|
||||
<svg class="svg-ring">
|
||||
<path class="path" fill="none" stroke="#d59120" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<svg width="0" height="0">
|
||||
<mask id="mask">
|
||||
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
|
||||
</mask>
|
||||
</svg>
|
||||
<div class="path-burger">
|
||||
<div class="animate-path">
|
||||
<div class="path-rotation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fpmenu">@fpmenu()</div>
|
||||
<div class="content @ctx.is3d.fold("is3d", "is2d")">
|
||||
<div id="site_header">
|
||||
|
|
|
|||
|
|
@ -982,11 +982,11 @@ lichess.storage = {
|
|||
$('#hamburger').click(function() {
|
||||
open = !open;
|
||||
if (open) {
|
||||
$(this).removeClass('is-closed').addClass('is-open');
|
||||
$(this).removeClass('closed').addClass('open');
|
||||
$menu.addClass('open');
|
||||
}
|
||||
else {
|
||||
$(this).removeClass('is-open').addClass('is-closed');
|
||||
$(this).removeClass('open').addClass('closed');
|
||||
$menu.removeClass('open');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -566,6 +566,7 @@ body > div.content {
|
|||
margin: 0 auto 30px auto;
|
||||
}
|
||||
#top {
|
||||
position: relative;
|
||||
width: 1005px;
|
||||
height: 24px;
|
||||
margin: 0 auto 30px auto;
|
||||
|
|
@ -1027,463 +1028,70 @@ body.offline #nb_connected_players {
|
|||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.hamburglar *:before,
|
||||
.hamburglar *:after {
|
||||
#hamburger *:before,
|
||||
#hamburger *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.hamburglar {
|
||||
transform: scale(1);
|
||||
margin: 40px auto;
|
||||
#hamburger {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
z-index: 5001;
|
||||
display: block;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: top 1s;
|
||||
}
|
||||
.path-burger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
mask: url(#mask);
|
||||
-webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
|
||||
#hamburger:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.animate-path {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
#hamburger.open {
|
||||
top: 12px;
|
||||
}
|
||||
.path-rotation {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin: 34px 34px 0 0;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.path-rotation::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 34px;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
@keyframes rotate-out {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-in {
|
||||
0% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.hamburglar.is-open .path {
|
||||
animation: dash-in 0.6s linear normal;
|
||||
-webkit-animation: dash-in 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar.is-open .animate-path {
|
||||
animation: rotate-in 0.6s linear normal;
|
||||
-webkit-animation: rotate-in 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar.is-closed .path {
|
||||
animation: dash-out 0.6s linear normal;
|
||||
-webkit-animation: dash-out 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar.is-closed .animate-path {
|
||||
animation: rotate-out 0.6s linear normal;
|
||||
-webkit-animation: rotate-out 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar .path {
|
||||
stroke-dasharray: 240;
|
||||
stroke-dashoffset: 240;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
@keyframes dash-in {
|
||||
0% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
40% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dash-in {
|
||||
0% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
40% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@keyframes dash-out {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
40% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dash-out {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
40% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
}
|
||||
.burger-icon {
|
||||
position: absolute;
|
||||
padding: 20px 16px;
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
}
|
||||
.burger-container {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
}
|
||||
.burger-bun-top,
|
||||
.burger-bun-bot,
|
||||
.burger-filling {
|
||||
#hamburger .top,
|
||||
#hamburger .bottom {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 36px;
|
||||
border-radius: 2px;
|
||||
background: #d59120;
|
||||
}
|
||||
.burger-bun-top {
|
||||
top: 0;
|
||||
transform-origin: 34px 2px;
|
||||
transform: rotate(0deg);
|
||||
transition: all 0.5s cubic-bezier(.8, -1.1, .5, 1.9);
|
||||
}
|
||||
.burger-bun-bot {
|
||||
bottom: 0;
|
||||
transform-origin: 34px 2px;
|
||||
#hamburger .top {
|
||||
top: 19px;
|
||||
left: 14px;
|
||||
}
|
||||
.burger-filling {
|
||||
top: 12px;
|
||||
#hamburger .bottom {
|
||||
top: 41px;
|
||||
left: 14px;
|
||||
}
|
||||
.burger-ring {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
#hamburger path,
|
||||
#hamburger line {
|
||||
stroke: #d59120;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.svg-ring {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
#ham-circle {
|
||||
stroke-dasharray: 1 100 32 300;
|
||||
stroke-dashoffset: 101;
|
||||
transition: all 0.75s ease;
|
||||
}
|
||||
.hamburglar.is-open .burger-bun-top {
|
||||
animation: bun-top-out 0.6s linear normal;
|
||||
-webkit-animation: bun-top-out 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
#hamburger.open #ham-circle {
|
||||
stroke-dasharray: 1 100 190 300;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
.hamburglar.is-open .burger-bun-bot {
|
||||
animation: bun-bot-out 0.6s linear normal;
|
||||
-webkit-animation: bun-bot-out 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
#hamburger.open .top {
|
||||
transform: translateX(-4.5px) rotate(-45deg);
|
||||
}
|
||||
.hamburglar.is-closed .burger-bun-top {
|
||||
animation: bun-top-in 0.6s linear normal;
|
||||
-webkit-animation: bun-top-in 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar.is-closed .burger-bun-bot {
|
||||
animation: bun-bot-in 0.6s linear normal;
|
||||
-webkit-animation: bun-bot-in 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes bun-top-out {
|
||||
0% {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
80% {
|
||||
left: -5px;
|
||||
top: 0;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
top: 1px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bun-top-out {
|
||||
0% {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
80% {
|
||||
left: -5px;
|
||||
top: 0;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
top: 1px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@keyframes bun-bot-out {
|
||||
0% {
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
left: 0;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
80% {
|
||||
left: -5px;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bun-bot-out {
|
||||
0% {
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
left: 0;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
80% {
|
||||
left: -5px;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes bun-top-in {
|
||||
0% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
20% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
80% {
|
||||
left: 0;
|
||||
bot: 0;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bot: 1px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bun-top-in {
|
||||
0% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
20% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
80% {
|
||||
left: 0;
|
||||
bot: 0;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bot: 1px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes bun-bot-in {
|
||||
0% {
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
80% {
|
||||
left: 0;
|
||||
bot: 0;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bun-bot-in {
|
||||
0% {
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
left: -5px;
|
||||
bot: 0;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
80% {
|
||||
left: 0;
|
||||
bot: 0;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.hamburglar.is-open .burger-filling {
|
||||
animation: burger-fill-out 0.6s linear normal;
|
||||
-webkit-animation: burger-fill-out 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
.hamburglar.is-closed .burger-filling {
|
||||
animation: burger-fill-in 0.6s linear normal;
|
||||
-webkit-animation: burger-fill-in 0.6s linear normal;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes burger-fill-in {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 36px;
|
||||
}
|
||||
40% {
|
||||
width: 0;
|
||||
left: 40px;
|
||||
}
|
||||
80% {
|
||||
width: 36px;
|
||||
left: -6px;
|
||||
}
|
||||
100% {
|
||||
width: 36px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes burger-fill-in {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 36px;
|
||||
}
|
||||
40% {
|
||||
width: 0;
|
||||
left: 40px;
|
||||
}
|
||||
80% {
|
||||
width: 36px;
|
||||
left: -6px;
|
||||
}
|
||||
100% {
|
||||
width: 36px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
@keyframes burger-fill-out {
|
||||
0% {
|
||||
width: 36px;
|
||||
left: 0px;
|
||||
}
|
||||
20% {
|
||||
width: 42px;
|
||||
left: -6px;
|
||||
}
|
||||
40% {
|
||||
width: 0;
|
||||
left: 40px;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
left: 36px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes burger-fill-out {
|
||||
0% {
|
||||
width: 36px;
|
||||
left: 0px;
|
||||
}
|
||||
20% {
|
||||
width: 42px;
|
||||
left: -6px;
|
||||
}
|
||||
40% {
|
||||
width: 0;
|
||||
left: 40px;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
left: 36px;
|
||||
}
|
||||
#hamburger.open .bottom {
|
||||
transform: translateX(-4.5px) rotate(45deg);
|
||||
}
|
||||
#user_tag {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
Loading…
Reference in a new issue