create theme chocolate
This commit is contained in:
327
app/static/themes/chocolate/css/menu.css
Normal file
327
app/static/themes/chocolate/css/menu.css
Normal file
@@ -0,0 +1,327 @@
|
||||
@font-face{
|
||||
font-family:"Rosa Black Sans";
|
||||
src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype");
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family:"Rosa Black Italic";
|
||||
src:url("/fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype");
|
||||
font-weight:normal;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
@font-face{font-family:"Rosa Black Bold";
|
||||
src:url("/fonts/hinted-RosaSans-Bold.ttf") format("truetype");
|
||||
font-weight:bold;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
.section-center{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:0;
|
||||
display:block;
|
||||
width:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
z-index:6;
|
||||
text-align:center;
|
||||
transform:translateY(-50%);
|
||||
}
|
||||
|
||||
[type=checkbox]:checked,[type=checkbox]:not(:checked)
|
||||
{
|
||||
position:absolute;
|
||||
left:-99999px;
|
||||
}
|
||||
|
||||
.menu-icon:checked+label,.menu-icon:not(:checked)+label{
|
||||
position:fixed;
|
||||
top:170px;
|
||||
left:75px;
|
||||
display:block;
|
||||
width:70px;
|
||||
height:70px;
|
||||
padding:0;
|
||||
margin:0;
|
||||
cursor:pointer;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.menu-bulle {
|
||||
position:fixed;
|
||||
top:150px;
|
||||
left:50px;
|
||||
display:block;
|
||||
width:80px;
|
||||
height:80px;
|
||||
padding:0;
|
||||
margin:0;
|
||||
z-index:9;
|
||||
overflow:hidden;
|
||||
background-color:#fff487;
|
||||
animation:border-transform 7s linear infinite;
|
||||
transition:top 350ms 1100ms cubic-bezier(.32, 1, .23, 1),right 350ms 1100ms cubic-bezier(.32, 1, .23, 1),
|
||||
transform 250ms 1100ms ease,width 650ms 400ms cubic-bezier(.32, 1, .23, 1),height 650ms 400ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
|
||||
.menu-icon:checked+label:before,.menu-icon:not(:checked)+label:before {
|
||||
position:absolute;
|
||||
content:"";
|
||||
display:block;
|
||||
width:30px;
|
||||
height:20px;
|
||||
z-index:20;
|
||||
top:0;
|
||||
left:0;
|
||||
border-top:2px solid #45050c;
|
||||
border-bottom:2px solid #45050c;
|
||||
transition:border-width 100ms 1500ms ease,top 100ms 1600ms cubic-bezier(.32, 1, .23, 1),height 100ms 1600ms cubic-bezier(.23, 1, .32, 1),
|
||||
background-color 200ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
.menu-icon:checked+label:after,.menu-icon:not(:checked)+label:after {
|
||||
position:absolute;
|
||||
content:"";
|
||||
display:block;
|
||||
width:22px;
|
||||
height:2px;
|
||||
z-index:20;
|
||||
top:10px;
|
||||
left:0px;
|
||||
background-color:#45050c;
|
||||
margin-top:-1px;
|
||||
transition:width 100ms 1750ms ease,right 100ms 1750ms ease,margin-top 100ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
.menu-icon:checked+label:before{
|
||||
top:10px;
|
||||
transform:rotate(45deg);
|
||||
height:2px;
|
||||
background-color:#45050c;
|
||||
border-width:0;
|
||||
transition:border-width 100ms 340ms ease,top 100ms 300ms cubic-bezier(.32, 1, .23, 1),height 100ms 300ms cubic-bezier(.32, 1, .23, 1),background-color 200ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
|
||||
.menu-icon:checked+label:after{
|
||||
width:30px;
|
||||
margin-top:0;
|
||||
transform:rotate(-45deg);
|
||||
transition:width 100ms ease,right 100ms ease,margin-top 100ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
@keyframes border-transform{0%, 100%
|
||||
{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14%
|
||||
{border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28%
|
||||
{border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42%
|
||||
{border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56%
|
||||
{border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70%
|
||||
{border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84%
|
||||
{border-radius:46% 54% 50% 50%/35% 61% 39% 65%}
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle{
|
||||
animation-play-state:paused;
|
||||
top:50%;
|
||||
left:40px;
|
||||
transform:translate(-50%, -50%);
|
||||
width:35%;
|
||||
height:88%;
|
||||
transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
|
||||
transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
|
||||
height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
|
||||
.menu-bulle ul{
|
||||
position:absolute;
|
||||
top:25%;
|
||||
left:50px;
|
||||
display:block;
|
||||
width:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
z-index:6;
|
||||
text-align:right;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.menu-bulle ul li{
|
||||
position:relative;
|
||||
display:block;
|
||||
width:100%;
|
||||
padding:0;
|
||||
padding-bottom:15px;
|
||||
margin:10px 0;
|
||||
text-align:center;
|
||||
list-style:none;
|
||||
pointer-events:none;
|
||||
opacity:0;visibility:hidden;
|
||||
transform:translateY(30px);
|
||||
transition:all 250ms linear;
|
||||
}
|
||||
|
||||
.menu-bulle ul li:nth-child(1)
|
||||
{
|
||||
transition-delay:200ms;
|
||||
}
|
||||
|
||||
.menu-bulle ul li:nth-child(2){
|
||||
transition-delay:150ms;
|
||||
}
|
||||
|
||||
.menu-bulle ul li:nth-child(3)
|
||||
{
|
||||
transition-delay:100ms;
|
||||
}
|
||||
|
||||
.menu-bulle ul li:nth-child(4)
|
||||
{
|
||||
transition-delay:50ms;
|
||||
}
|
||||
|
||||
.menu-bulle ul li a
|
||||
{
|
||||
font-family:sans-serif;
|
||||
font-size:2vh;
|
||||
line-height:1.1;
|
||||
font-weight:800;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
color:#45050c;
|
||||
transition:all 250ms linear;
|
||||
max-width:9vw;
|
||||
}
|
||||
|
||||
.menu-bulle ul li a:hover
|
||||
{
|
||||
text-decoration:underline;
|
||||
color:#45050c;
|
||||
}
|
||||
|
||||
.menu-bulle ul li a:after
|
||||
{
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
content:"";
|
||||
height:2vh;
|
||||
margin-top:-1vh;
|
||||
width:0;
|
||||
left:0;
|
||||
transition:width 250ms linear;
|
||||
}
|
||||
|
||||
.menu-bulle ul li a:hover:after
|
||||
{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle ul li
|
||||
{
|
||||
pointer-events:auto;
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
transform:translateY(0);
|
||||
transition:opacity 350ms ease,transform 250ms ease;
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle ul li:nth-child(1)
|
||||
{
|
||||
transition-delay:1400ms;
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle ul li:nth-child(2)
|
||||
{
|
||||
transition-delay:1480ms;
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle ul li:nth-child(3)
|
||||
{
|
||||
transition-delay:1560ms;
|
||||
}
|
||||
|
||||
.menu-icon:checked~.menu-bulle ul li:nth-child(4)
|
||||
{
|
||||
transition-delay:1640ms;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3400px)
|
||||
{
|
||||
.menu-icon:checked~.menu-bulle{
|
||||
left:90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px)
|
||||
{
|
||||
.menu-icon:checked~.menu-bulle
|
||||
{
|
||||
animation-play-state:paused;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
width:200%;
|
||||
height:200%;
|
||||
transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
|
||||
transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
|
||||
height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
|
||||
}
|
||||
|
||||
.menu-bulle ul{
|
||||
left:0;
|
||||
transform:translateY(10%);
|
||||
transform:translateX(-20%);
|
||||
}
|
||||
|
||||
|
||||
.menu-icon:checked+label,.menu-icon:not(:checked)+label
|
||||
{
|
||||
right:55px;
|
||||
}
|
||||
|
||||
.logo
|
||||
{
|
||||
left:30px;
|
||||
}
|
||||
|
||||
.menu-bulle
|
||||
{
|
||||
right:30px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size:9vw;
|
||||
-webkit-text-stroke:2px rgba(0,0,0,0);
|
||||
text-stroke:2px rgba(0,0,0,0);
|
||||
-webkit-text-fill-color:#fff487;
|
||||
text-fill-color:#fff487;
|
||||
color:#fff487;
|
||||
}
|
||||
|
||||
.menu-bulle ul li a{
|
||||
font-size:2vh;
|
||||
padding:5px;
|
||||
max-width:unset;
|
||||
}
|
||||
|
||||
.menu-icon:checked+label
|
||||
{
|
||||
top:10px;
|
||||
left:10px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
}
|
||||
.menu-icon:not(:checked)+label
|
||||
{
|
||||
top:110px;
|
||||
left:50px;
|
||||
}
|
||||
|
||||
.menu-bulle
|
||||
{
|
||||
top:90px;
|
||||
left:30px;
|
||||
display:block;
|
||||
width:60px;
|
||||
height:60px;
|
||||
}
|
||||
Reference in New Issue
Block a user