43af00b7c4
Pretty satisfied with this one, totally didn't take a couple hours out of my day. CodePen: https://codepen.io/prplwtf/pen/ExOBQzw?editors=1100
58 lines
1.6 KiB
CSS
58 lines
1.6 KiB
CSS
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
|
|
|
|
@keyframes notification {
|
|
0% {right:-300px;top:62px;opacity:0;background-color: #2a3743;}
|
|
10% {right:12px;top:62px;opacity:1;background-color: #1f2933;}
|
|
90% {right:12px;top:62px;opacity:1;background-color: #1f2933;}
|
|
100% {right:-300px;top:62px;opacity:0;background-color: #2a3743;}
|
|
}
|
|
|
|
/* hides admin cache reminder once new changes to this css file are applied */
|
|
#cacheOverlay {
|
|
display:none;
|
|
}
|
|
|
|
.notification {
|
|
opacity:0;
|
|
position:fixed;
|
|
right:-300px;
|
|
top:62px;
|
|
height:auto;
|
|
width:300px;
|
|
z-index:99999;
|
|
background-color:#1f2933;
|
|
color:#9aa5b1;
|
|
padding:10px;
|
|
border-radius:10px;
|
|
animation-name: notification;
|
|
animation-duration: 10s;
|
|
}
|
|
|
|
tag {
|
|
display:inline-block;
|
|
padding:3px;
|
|
background-color:#505050;
|
|
border-radius:5px;
|
|
font-size:12px;
|
|
color:white;
|
|
}
|
|
tag[mg-left] {margin-left:5px;}
|
|
tag[mg-right] {margin-right:5px;}
|
|
tag[red] {background-color:#ff4040;}
|
|
tag[green] {background-color:#32fb62;}
|
|
tag[blue] {background-color:#288afb;}
|
|
[ext-title]{display:flex; flex-direction:row; align-items:center;}
|
|
|
|
.btn-gray {background-color:#33404d;color:#cad1d8;border-color:#606d7b;}
|
|
.btn-gray:hover {background-color:#29343e;color:#cad1d8;border-color:#606d7b;}
|
|
|
|
.btn-gray-alt {background-color:#4d5b69;color:#cad1d8;border-color:#4d5b69;}
|
|
.btn-gray-alt:hover {background-color:#3f4d5a;color:#cad1d8;border-color:#4d5b69;}
|
|
|
|
|
|
.img-btn {
|
|
width:25px;
|
|
height:25px;
|
|
border-radius:3px;
|
|
margin-right:2px;
|
|
}
|