182 lines
4.0 KiB
CSS
Executable File
182 lines
4.0 KiB
CSS
Executable File
/* * {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
line-height: 1.2;
|
|
box-sizing: border-box;
|
|
}
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
box-sizing: inherit;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
position: relative;
|
|
z-index: 0;
|
|
font-family: monospace, arial, sans-serif;
|
|
font-size: 16px;
|
|
background: linear-gradient(#160731 0%,#1B293C 100%);
|
|
color: #333;
|
|
overflow: hidden;
|
|
} */
|
|
/* .my-moon {
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 10px rgba(255,255,255,.04),
|
|
0 0 0 20px rgba(255,255,255,.04),
|
|
0 0 0 30px rgba(255,255,255,.04),
|
|
0 0 50px 50px rgba(255,255,255,.02),
|
|
0 0 100px 100px rgba(255,255,255,.02);
|
|
-webkit-animation: moon-moving 30s both infinite;
|
|
animation: moon-moving 30s both infinite;
|
|
} */
|
|
.notification-box {
|
|
position: fixed;
|
|
z-index: 99;
|
|
top: 15px;
|
|
right: 30px;
|
|
width: 40px;
|
|
height: 40px;
|
|
text-align: center;
|
|
}
|
|
.notification-bell {
|
|
-webkit-animation: bell 1s 1s both infinite;
|
|
animation: bell 1s 1s both infinite;
|
|
}
|
|
.notification-bell * {
|
|
display: block;
|
|
margin: 0 auto;
|
|
/* background-color: #fff;
|
|
box-shadow: 0px 0px 15px #fff; */
|
|
background-color: rgb(9, 9, 9);
|
|
box-shadow: 0px 0px 15px rgb(9, 9, 9);
|
|
}
|
|
.bell-top {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
.bell-middle {
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-top: -1px;
|
|
border-radius: 12.5px 12.5px 0 0;
|
|
}
|
|
.bell-bottom {
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 32px;
|
|
height: 2px;
|
|
}
|
|
.bell-bottom::before,
|
|
.bell-bottom::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
}
|
|
.bell-bottom::before {
|
|
left: 1px;
|
|
/* border-bottom: 4px solid #fff; */
|
|
border-bottom: 4px solid rgb(9, 9, 9);
|
|
border-right: 0 solid transparent;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
.bell-bottom::after {
|
|
right: 1px;
|
|
/* border-bottom: 4px solid #fff; */
|
|
border-bottom: 4px solid rgb(9, 9, 9);
|
|
border-right: 4px solid transparent;
|
|
border-left: 0 solid transparent;
|
|
}
|
|
.bell-rad {
|
|
width: 8px;
|
|
height: 4px;
|
|
margin-top: 2px;
|
|
border-radius: 0 0 4px 4px;
|
|
-webkit-animation: rad 1s 2s both infinite;
|
|
animation: rad 1s 2s both infinite;
|
|
}
|
|
.notification-count {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -6px;
|
|
right: -6px;
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 15px;
|
|
border-radius: 50%;
|
|
background-color: #ff4927;
|
|
color: #fff;
|
|
-webkit-animation: zoom 3s 3s both infinite;
|
|
animation: zoom 3s 3s both infinite;
|
|
}
|
|
@-webkit-keyframes bell {
|
|
0% { transform: rotate(0); }
|
|
10% { transform: rotate(30deg); }
|
|
20% { transform: rotate(0); }
|
|
80% { transform: rotate(0); }
|
|
90% { transform: rotate(-30deg); }
|
|
100% { transform: rotate(0); }
|
|
}
|
|
@keyframes bell {
|
|
0% { transform: rotate(0); }
|
|
10% { transform: rotate(30deg); }
|
|
20% { transform: rotate(0); }
|
|
80% { transform: rotate(0); }
|
|
90% { transform: rotate(-30deg); }
|
|
100% { transform: rotate(0); }
|
|
}
|
|
@-webkit-keyframes rad {
|
|
0% { transform: translateX(0); }
|
|
10% { transform: translateX(6px); }
|
|
20% { transform: translateX(0); }
|
|
80% { transform: translateX(0); }
|
|
90% { transform: translateX(-6px); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
@keyframes rad {
|
|
0% { transform: translateX(0); }
|
|
10% { transform: translateX(6px); }
|
|
20% { transform: translateX(0); }
|
|
80% { transform: translateX(0); }
|
|
90% { transform: translateX(-6px); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
@-webkit-keyframes zoom {
|
|
0% { opacity: 0; transform: scale(0); }
|
|
10% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 1; }
|
|
51% { opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes zoom {
|
|
0% { opacity: 0; transform: scale(0); }
|
|
10% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 1; }
|
|
51% { opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@-webkit-keyframes moon-moving {
|
|
0% {
|
|
transform: translate(-200%, 600%);
|
|
}
|
|
100% {
|
|
transform: translate(800%, -200%);
|
|
}
|
|
}
|
|
@keyframes moon-moving {
|
|
0% {
|
|
transform: translate(-200%, 600%);
|
|
}
|
|
100% {
|
|
transform: translate(800%, -200%);
|
|
}
|
|
} |