#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 28.icon svg { 29 height: 1rem; 30 width: 1rem; 31} 32 33.alert { 34 font-weight: 600; 35 color: rgba(107, 114, 128, 1); 36} 37 38.message { 39 margin-top: 1rem; 40 color: rgba(107, 114, 128, 1); 41} 42 43.actions { 44 margin-top: 1.5rem; 45} 46 47.actions a { 48 text-decoration: none; 49} 50 51.mark-as-read, .read { 52 display: inline-block; 53 border-radius: 0.5rem; 54 width: 100%; 55 padding: 0.75rem 1.25rem; 56 text-align: center; 57 font-size: 0.875rem; 58 line-height: 1.25rem; 59 font-weight: 600; 60} 61 62.read { 63 background-color: rgba(59, 130, 246, 1); 64 color: rgba(255, 255, 255, 1); 65} 66 67.mark-as-read { 68 margin-top: 0.5rem; 69 background-color: rgba(249, 250, 251, 1); 70 color: rgba(107, 114, 128, 1); 71 transition: all .15s ease; 72} 73 74.mark-as-read:hover { 75 background-color: rgb(230, 231, 233); 76}
Comments
1mysecretcoder 11. August at 20:48
11. August at 20:48
nice men
MIT License