Card by Siyu1017
#e8e8e8
1.card { 2 width: fit-content; 3 height: 320px; 4 background: #fff; 5 box-shadow: 0px 1px 32px 8px rgba(0, 0, 0, 0.05); 6 border-radius: 0.875rem; 7 padding: 1.5rem; 8 -webkit-user-drag: none; 9 font-family: 10 ui-sans-serif, 11 system-ui, 12 -apple-system, 13 BlinkMacSystemFont, 14 Segoe UI, 15 Roboto, 16 Noto Sans, 17 Ubuntu, 18 Cantarell, 19 Helvetica Neue, 20 Arial, 21 sans-serif, 22 Apple Color Emoji, 23 Segoe UI Emoji, 24 Segoe UI Symbol, 25 Noto Color emoji; 26 overflow: hidden; 27 --delay: 150ms; 28} 29 30.messages { 31 width: 280px; 32} 33 34.message { 35 width: 280px; 36 border: 1.5px solid rgba(0, 0, 0, 0.08); 37 border-radius: 0.5rem; 38 padding: 1rem 1.25rem; 39 display: flex; 40 gap: 1rem; 41 transform: scale(0); 42 height: 0; 43 box-shadow: 0px 4px 16px 8px rgba(0, 0, 0, 0.03); 44 animation: show-message 200ms forwards; 45 transform-origin: top center; 46 visibility: hidden; 47 transition: all 0.2s ease-in-out; 48 cursor: pointer; 49} 50 51.message:hover { 52 box-shadow: 0px 3px 16px 8px rgba(0, 0, 0, 0.07); 53 transform: translateY(-2px) scale(1.1); 54} 55 56.message-icon { 57 background: linear-gradient(135deg, rgb(255, 137, 176), rgb(126, 93, 255)); 58 width: 2.5rem; 59 height: 2.5rem; 60 min-width: 2.5rem; 61 min-height: 2.5rem; 62 border-radius: 1rem; 63} 64 65.message:nth-child(1) { 66 animation-delay: calc(4 * var(--delay)); 67} 68 69.message:nth-child(2) { 70 animation-delay: calc(3 * var(--delay)); 71} 72 73.message:nth-child(3) { 74 animation-delay: calc(2 * var(--delay)); 75} 76 77.message:nth-child(4) { 78 animation-delay: var(--delay); 79} 80 81.message:nth-child(2) .message-icon { 82 background: linear-gradient(180deg, rgb(242, 124, 40), rgb(255, 69, 243)); 83} 84 85.message:nth-child(3) .message-icon { 86 background: linear-gradient(90deg, rgb(242, 212, 40), rgb(255, 56, 56)); 87} 88 89.message:nth-child(4) .message-icon { 90 background: linear-gradient(45deg, rgb(70, 197, 255), rgb(64, 64, 255)); 91} 92 93.message:nth-child(5) .message-icon { 94 background: linear-gradient(45deg, rgb(247, 158, 85), rgb(231, 38, 249)); 95} 96 97.message-info { 98 display: flex; 99 flex-direction: column; 100} 101 102.message-header { 103 display: flex; 104 flex-direction: row; 105 align-items: flex-end; 106 line-height: 1; 107 user-select: none; 108 -webkit-user-select: none; 109} 110 111.message-title { 112 font-size: 1rem; 113 font-weight: 600; 114} 115 116.message-time { 117 font-size: 0.875rem; 118 color: #454545; 119} 120 121.message-time::before { 122 content: "•"; 123 margin: 0 0.25rem; 124 font-size: 0.875rem; 125 color: #454545; 126} 127 128.message-content { 129 margin-top: 0.5rem; 130 line-height: 1; 131 text-overflow: ellipsis; 132 white-space: wrap; 133 font-weight: 300; 134} 135 136@keyframes show-message { 137 0% { 138 transform: scale(0); 139 margin-bottom: 0; 140 visibility: visible; 141 } 142 100% { 143 transform: scale(1); 144 height: 100%; 145 margin-bottom: 1rem; 146 visibility: visible; 147 } 148} 149
34 views
34 views
MIT License