2.5K views
1.cookie-card { 2 max-width: 320px; 3 padding: 1rem; 4 background-color: #fff; 5 border-radius: 10px; 6 box-shadow: 20px 20px 30px rgba(0, 0, 0, .05); 7} 8 9.title { 10 font-weight: 600; 11 color: rgb(31 41 55); 12} 13 14.description { 15 margin-top: 1rem; 16 font-size: 0.875rem; 17 line-height: 1.25rem; 18 color: rgb(75 85 99); 19} 20 21.description a { 22 --tw-text-opacity: 1; 23 color: rgb(59 130 246); 24} 25 26.description a:hover { 27 -webkit-text-decoration-line: underline; 28 text-decoration-line: underline; 29} 30 31.actions { 32 display: flex; 33 align-items: center; 34 justify-content: space-between; 35 margin-top: 1rem; 36 -moz-column-gap: 1rem; 37 column-gap: 1rem; 38 flex-shrink: 0; 39} 40 41.pref { 42 font-size: 0.75rem; 43 line-height: 1rem; 44 color: rgb(31 41 55 ); 45 -webkit-text-decoration-line: underline; 46 text-decoration-line: underline; 47 transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); 48 border: none; 49 background-color: transparent; 50} 51 52.pref:hover { 53 color: rgb(156 163 175); 54} 55 56.pref:focus { 57 outline: 2px solid transparent; 58 outline-offset: 2px; 59} 60 61.accept { 62 font-size: 0.75rem; 63 line-height: 1rem; 64 background-color: rgb(17 24 39); 65 font-weight: 500; 66 border-radius: 0.5rem; 67 color: #fff; 68 padding-left: 1rem; 69 padding-right: 1rem; 70 padding-top: 0.625rem; 71 padding-bottom: 0.625rem; 72 border: none; 73 transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); 74} 75 76.accept:hover { 77 background-color: rgb(55 65 81); 78} 79 80.accept:focus { 81 outline: 2px solid transparent; 82 outline-offset: 2px; 83}
MIT License