1.2K views
1.card { 2 width: 450px; 3 background: #FFFFFF; 4 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 5 border-radius: 11px; 6} 7 8.search-container { 9 display: flex; 10 align-items: center; 11 justify-content: flex-start; 12 gap: 10px; 13 padding: 0 20px; 14} 15 16.search-container input { 17 width: 100%; 18 height: 50px; 19 border: 0; 20 outline: none; 21 font-size: 13px; 22} 23 24.categories { 25 display: flex; 26 align-items: center; 27 justify-content: flex-start; 28 gap: 5px; 29 padding: 0px 20px 20px 20px; 30} 31 32.categories button { 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 padding: 8px 15px; 37 background: #FFFFFF; 38 border: 1px solid #E5E5E5; 39 box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 40 border-radius: 20px; 41 font-weight: 600; 42 color: #171718; 43 transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1); 44} 45 46.categories button:hover { 47 transform: scale(1.05) translateY(-3px); 48} 49 50.results { 51 display: flex; 52 flex-direction: column; 53 gap: 10px; 54} 55 56.results hr { 57 width: 100%; 58 height: 1px; 59 border: 0; 60 background-color: #ECECEC; 61} 62 63.results p { 64 padding: 0 20px; 65} 66 67p.label { 68 font-weight: 600; 69 font-size: 11px; 70 line-height: 13px; 71 color: #5F6368; 72} 73 74.results .entry { 75 display: grid; 76 grid-template-columns: 40px 1fr 40px; 77 gap: 12px; 78 padding: 5px 20px; 79 transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1); 80} 81 82.results .entry:hover { 83 background-color: #F5F8FE; 84} 85 86.results .results-list .entry:hover .icon { 87 background-color: #1763fa; 88} 89 90.results .results-list .entry:hover .icon svg path, 91.results .results-list .entry:hover .icon svg circle { 92 stroke: #ffffff; 93} 94 95.results .results-list .entry:hover label { 96 color: #1763fa; 97} 98 99.results .results-list .entry:hover span { 100 color: #7ba0eb; 101} 102 103.results .results-list { 104 display: flex; 105 flex-direction: column; 106} 107 108.results .entry .icon { 109 width: 40px; 110 height: 40px; 111 display: flex; 112 align-items: center; 113 justify-content: center; 114 background-color: #ECECEC; 115 border-radius: 7px; 116 transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1); 117} 118 119.results .entry .desc { 120 display: flex; 121 flex-direction: column; 122 justify-content: center; 123 gap: 5px; 124} 125 126.results .entry .desc label { 127 display: block; 128 font-weight: 600; 129 font-size: 12px; 130 line-height: 15px; 131 color: #171718; 132} 133 134.results .entry .desc span { 135 font-weight: 600; 136 font-size: 10px; 137 line-height: 12px; 138 color: #72767c; 139} 140 141.results .entry .badge { 142 width: 40px; 143 height: 24px; 144 display: flex; 145 align-items: center; 146 justify-content: center; 147 margin: auto; 148 background: #DDFFDE; 149 border: 1px solid #08581d0e; 150 border-radius: 7px; 151 font-weight: 700; 152 font-size: 11px; 153 line-height: 13px; 154 text-align: center; 155 color: #08581D; 156} 157 158.card-footer { 159 height: 40px; 160 display: flex; 161 align-items: center; 162 gap: 25px; 163 margin-top: 10px; 164 padding: 0 7px; 165 background: #F8F8F8; 166} 167 168.card .action { 169 display: flex; 170 align-items: center; 171 gap: 5px; 172} 173 174.card .action p { 175 padding-left: 5px; 176} 177 178.card-footer button { 179 width: 24px; 180 height: 24px; 181 display: flex; 182 align-items: center; 183 justify-content: center; 184 border-radius: 6px; 185 border: 0; 186 background: #ECECEC; 187 outline: none; 188} 189 190.edit-actions { 191 width: 100%; 192 text-align: right; 193 padding-right: 10px; 194 opacity: 0.6; 195}
MIT License