Eidam/bigredbutton
1
0
Fork 0
mirror of https://github.com/MrEidam/bigredbutton.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Version 45

Browse Source
This commit is contained in:
MrEidam
2024-01-29 22:49:17 +01:00
parent 7a08faff76
commit 6517b5de0d
19 changed files with 995 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
css/brb.css
View File

@@ -76,92 +76,4 @@ body{
}
.changelog:hover svg{
color: #a33;
}
/* Social */
.socmenu{
position: absolute;
left: -45px;
bottom: -45px;
width: 220px;
height: 220px;
display: flex;
justify-content: center;
align-items: center;
}
.socmenu .toggle{
position: relative;
width: 100px;
height: 100px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
box-shadow:
0 25px 15px rgba(0,0,0,0.25),
0 25px 20px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
filter: drop-shadow(0 0 10px rgba(0,0,0,.75));
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 3em;
color: #fff;
z-index: 1000000;
}
.socmenu .toggle svg{
position: absolute;
filter: drop-shadow(0 0 10px rgba(0,0,0,.75));
opacity: 0;
transition: 0.5s;
}
.socmenu .toggle svg{transition: 0.5s;}
.socmenu .toggle svg:nth-child(1){opacity:1;transform:rotate(360deg);}
.socmenu.active .toggle svg:nth-child(1){opacity:0;transform:rotate(0deg);}
.socmenu .toggle svg:nth-child(2){opacity:0;transform:rotate(0deg);}
.socmenu.active .toggle svg:nth-child(2){opacity:1;transform:rotate(360deg);}
.socmenu li{
position: absolute;
left: 0;
list-style: none;
transform-origin: 110px;
transition: 0.5s;
transition-delay: calc(0.05s*var(--i));
transform: rotate(calc(360deg/4*var(--i)));
scale: 0;
z-index: 1;
border-radius: 50%;
overflow: hidden;
}
.socmenu li::before{
content: '';
position: absolute;
top: 0;
left: -30px;
width: 20px;
height: 100%;
background: #fff;
z-index: 10;
transform: skewX(325deg) translateX(0);
box-shadow: -5px 0 0 #fff5;
transition: 0.5s;
}
.socmenu li:hover::before{
transform: skewX(325deg) translateX(180px);
box-shadow: -50px 0 0 #fff5;
}
.socmenu.active li{scale:1;}
.socmenu li a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
background: var(--clr);
color: #fff;
font-size: 2.25em;
border-radius: 50%;
transform: rotate(calc(360deg/-4*var(--i)));
box-shadow: 0 3px 4px rgba(0,0,0,0.15)
}
.socmenu li a img{width:1em;}
}