simplify hamburger icon
This commit is contained in:
Thibault Duplessis
parent
a2c209fc6e
commit
664221bb4e
|
|
@ -67,14 +67,8 @@ withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
|
|||
<div id="site_description">@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()</div>
|
||||
<div id="top" class="@ctx.is3d.fold("is3d", "is2d")">
|
||||
@topmenu()
|
||||
<div id="ham-plate" data-hint="@trans.menu()<esc>" class="hint--bottom">
|
||||
<div id="hamburger">
|
||||
<div class="top"></div>
|
||||
<svg version="1.1" 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>
|
||||
<div id="ham-plate" class="fright link" data-hint="@trans.menu()" class="hint--bottom">
|
||||
<div id="hamburger" data-icon="["></div>
|
||||
</div>
|
||||
<div class="lichess_language fright">
|
||||
<a class="toggle link" href="#">@langName(lang)</a>
|
||||
|
|
|
|||
|
|
@ -504,7 +504,7 @@ body.fpmenu > div.content {
|
|||
height: 24px;
|
||||
width: 1005px;
|
||||
margin: 0 auto;
|
||||
padding: 5px 52px 0 0;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 5001;
|
||||
}
|
||||
|
|
@ -890,12 +890,6 @@ body.offline #nb_connected_players {
|
|||
#top .fright {
|
||||
float: right;
|
||||
}
|
||||
body.fpmenu #top {
|
||||
height: 0;
|
||||
}
|
||||
body.fpmenu #top .fright {
|
||||
display: none;
|
||||
}
|
||||
.unread {
|
||||
padding: 1px 5px 1px 4px;
|
||||
font-weight: bold;
|
||||
|
|
@ -905,89 +899,11 @@ body.fpmenu #top .fright {
|
|||
#top .shown a.toggle {
|
||||
background: #fff;
|
||||
}
|
||||
#hamburger {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7);
|
||||
margin: -3px 3px 0px -7px;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
body.fpmenu #hamburger {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
#hamburger *:before,
|
||||
#hamburger *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#hamburger .top,
|
||||
#hamburger .bottom {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 36px;
|
||||
border-radius: 2px;
|
||||
background: #666;
|
||||
transform-origin: 34px 2px;
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform-origin: 34px 2px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transition: all 0.5s cubic-bezier(.8, -1.1, .5, 1.9);
|
||||
}
|
||||
#hamburger .top {
|
||||
top: 19px;
|
||||
left: 14px;
|
||||
}
|
||||
#hamburger .bottom {
|
||||
top: 41px;
|
||||
left: 14px;
|
||||
}
|
||||
#hamburger path,
|
||||
#hamburger line {
|
||||
stroke: #666;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
#ham-circle {
|
||||
stroke-dasharray: 1 100 32 300;
|
||||
stroke-dashoffset: 101;
|
||||
transition: all 0.75s ease;
|
||||
}
|
||||
body.fpmenu #hamburger #ham-circle {
|
||||
stroke-dasharray: 1 100 190 300;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
body.fpmenu #hamburger .top {
|
||||
transform: translateX(-4.5px) rotate(-45deg);
|
||||
-webkit-transform: translateX(-4.5px) rotate(-45deg);
|
||||
}
|
||||
body.fpmenu #hamburger .bottom {
|
||||
transform: translateX(-4.5px) rotate(45deg);
|
||||
-webkit-transform: translateX(-4.5px) rotate(45deg);
|
||||
}
|
||||
#ham-plate {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
margin-left: 30px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
transition: top 0.13s;
|
||||
}
|
||||
#ham-plate:hover {
|
||||
top: -3px;
|
||||
}
|
||||
body.fpmenu #ham-plate {
|
||||
top: -3px;
|
||||
background: transparent;
|
||||
border: transparent;
|
||||
box-shadow: none;
|
||||
#hamburger {
|
||||
font-size: 16px;
|
||||
}
|
||||
#fpmenu {
|
||||
position: fixed;
|
||||
|
|
@ -1170,16 +1086,6 @@ body.fpmenu #fpmenu {
|
|||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-height: 600px) {
|
||||
#fpmenu {
|
||||
position: relative;
|
||||
}
|
||||
#fpmenu .inner {
|
||||
top: 0;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 970px) {
|
||||
#fpmenu {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -468,14 +468,6 @@ body.dark #fpmenu .perf strong {
|
|||
body.dark #ham-plate {
|
||||
background: #404040;
|
||||
}
|
||||
body.dark #hamburger .top,
|
||||
body.dark #hamburger .bottom {
|
||||
background: #aaa;
|
||||
}
|
||||
body.dark #hamburger path,
|
||||
body.dark #hamburger line {
|
||||
stroke: #aaa;
|
||||
}
|
||||
body.dark #fpmenu .perf::before {
|
||||
color: #8b6523;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue