User:Clarification needed/Sandbox/Template:NuPedo/styles.css: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
No edit summary |
No edit summary |
||
| Line 32: | Line 32: | ||
right: 0; | right: 0; | ||
top:50%; | top:50%; | ||
font-size: | font-size:150%; | ||
color:black; | color:black; | ||
animation: pm-shake-start 1.2s 1 cubic-bezier(0. | animation: pm-shake-start 1.2s 1 cubic-bezier(0.71, 0, 0.8, 1.2),0.17s pm-shake-x 1.2s infinite ease-in-out, 0.2s pm-shake-y 1.2s linear infinite; | ||
} | } | ||
@keyframes pm-shake-x { | @keyframes pm-shake-x { | ||
0% {right: - | 0% {right: -6px;} | ||
50% {right: | 50% {right: 6px;} | ||
100% {right: - | 100% {right: -6px;} | ||
} | } | ||
@keyframes pm-shake-y { | @keyframes pm-shake-y { | ||
| Line 48: | Line 48: | ||
} | } | ||
@keyframes pm-shake-start { | @keyframes pm-shake-start { | ||
0% {right: | 0% {right: 97%;} | ||
100% {right: 0;} | 100% {right: 0;} | ||
} | } | ||
Latest revision as of 00:24, 17 March 2026
.pm-frame {
background: black;
/*width: fit-content;*/
margin: 0.5em auto;
display: flex;
flex-direction: column;
padding: 5px;
border-radius: 5px;
}
.pm-disclaimer {
display: flex;
flex-direction: row;
gap: 10px;
text-align: center;
font-size: 120%;
background: black;
color: white;
}
.pm-bar {
margin-top: 5px;
position: relative;
width: 100%;
height: 20px;
border-radius: 6px;
box-shadow: 0 0 4px #000 inset;
line-height: 15px;
background: linear-gradient(to bottom, rgba(249, 249, 249, 0.26) 0%,rgba(234, 234, 234, 0.64) 50%, rgba(249, 249, 249, 0.12) 51%, rgba(245, 245, 245, 0.5) 100%), linear-gradient(to right, #0f0, #80ff00, #ff0, #ff8000, #f00);
/*background-blend-mode: hard-light;*/
}
.pm-indicator {
position:absolute;
right: 0;
top:50%;
font-size:150%;
color:black;
animation: pm-shake-start 1.2s 1 cubic-bezier(0.71, 0, 0.8, 1.2),0.17s pm-shake-x 1.2s infinite ease-in-out, 0.2s pm-shake-y 1.2s linear infinite;
}
@keyframes pm-shake-x {
0% {right: -6px;}
50% {right: 6px;}
100% {right: -6px;}
}
@keyframes pm-shake-y {
0% {transform: translateY(-2px);}
50% {transform: translateY(2px);}
100% {transform: translateY(-2px);}
}
@keyframes pm-shake-start {
0% {right: 97%;}
100% {right: 0;}
}
