Card by stlyash
#e8e8e8
1.card { 2 max-width: 320px; 3 border-width: 1px; 4 border-color: rgba(219, 234, 254, 1); 5 border-radius: 1rem; 6 background-color: rgba(255, 255, 255, 1); 7 padding: 1rem; 8} 9 10.header { 11 display: flex; 12 align-items: center; 13 grid-gap: 1rem; 14 gap: 1rem; 15} 16 17.icon { 18 flex-shrink: 0; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 border-radius: 9999px; 23 background-color: rgba(96, 165, 250, 1); 24 padding: 0.5rem; 25 color: rgba(255, 255, 255, 1); 26} 27.closeButton { 28 border: none; 29 margin-left: 23%; 30 border-radius: 0.6rem; 31 font-size: 1rem; 32 height: 2rem; 33 width: 2rem; 34 display: grid; 35 place-items: center; 36 transition: background-color ease 0.25s; 37} 38.closeButton:hover { 39 background-color: rgba(230, 25, 25, 1); 40 color: white; 41} 42.icon svg { 43 height: 1rem; 44 width: 1rem; 45} 46 47.alert { 48 font-weight: 600; 49 color: rgba(107, 114, 128, 1); 50} 51 52.message { 53 margin-top: 1rem; 54 color: rgba(107, 114, 128, 1); 55} 56 57.actions { 58 margin-top: 1.5rem; 59} 60 61.actions a { 62 text-decoration: none; 63} 64 65.mark-as-read, 66.read { 67 display: inline-block; 68 border-radius: 0.5rem; 69 width: 100%; 70 padding: 0.75rem 1.25rem; 71 text-align: center; 72 font-size: 0.875rem; 73 line-height: 1.25rem; 74 font-weight: 600; 75} 76 77.read { 78 background-color: rgba(59, 130, 246, 1); 79 color: rgba(255, 255, 255, 1); 80} 81.read:hover { 82 background-color: rgba(17, 104, 245, 1); 83} 84 85.mark-as-read { 86 margin-top: 0.5rem; 87 background-color: rgba(249, 250, 251, 1); 88 color: rgba(107, 114, 128, 1); 89 transition: all 0.15s ease; 90} 91 92.mark-as-read:hover { 93 background-color: rgb(230, 231, 233); 94} 95
338 views
Variation of acard
MIT License