132 views
1.notification { 2 width: 255px; 3 height: 60px; 4 background: white; 5 border-radius: 25px; 6 display: flex; 7 justify-content: space-evenly; 8 align-items: center; 9} 10 11.icon { 12 height: 40px; 13 width: 40px; 14 border-radius: 20px; 15 background-color: rgb(236, 236, 236); 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 padding-top: 2px; 20} 21 22.message-container { 23 display: flex; 24 flex-direction: column; 25} 26 27.title { 28 padding: 2px; 29 text-transform: uppercase; 30 color: black; 31 font-weight: 600; 32} 33 34.message { 35 padding: 2px; 36 color: black; 37 font-size: small; 38} 39 40.gradient-border { 41 --borderSize: 3px; 42 position: relative; 43 border-radius: var(--borderSize); 44} 45 46.gradient-border:after { 47 content: ''; 48 position: absolute; 49 top: calc(-1 * var(--borderSize)); 50 left: calc(-1 * var(--borderSize)); 51 height: calc(100% + var(--borderSize) * 2); 52 width: calc(100% + var(--borderSize) * 2); 53 background: linear-gradient(75deg, #E50000, #FF8D00, #FFEE00, #008121, #004CFF, #760188); 54 border-radius: calc(2 * var(--borderSize)); 55 z-index: -1; 56 animation: gradientAnimation 4s ease alternate infinite; 57 background-size: 300% 300%; 58} 59 60@keyframes gradientAnimation { 61 0% { 62 background-position: 0% 50%; 63 } 64 65 50% { 66 background-position: 100% 50%; 67 } 68 69 100% { 70 background-position: 0% 50%; 71 } 72}
MIT License