#212121
1.modal { 2 background-color: rgb(255, 255, 255); 3 border-radius: 1em; 4 box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1); 5 color: rgb(15, 14, 14); 6 max-width: 330px; 7 overflow: hidden; 8 position: relative; 9 transition: background-color 0.3s, color 0.3s; 10} 11 12.content > *, .modal > * { 13 padding: 0.875em; 14} 15 16.title { 17 font-size: 1.25em; 18 font-weight: 600; 19 line-height: 1.2; 20 display: flex; 21 justify-content: center; 22} 23 24.message { 25 line-height: 1.2; 26 text-align: center; 27} 28 29.actions { 30 display: flex; 31 align-items: center; 32 flex-wrap: wrap; 33} 34 35.upload-btn { 36 background-color: transparent; 37 border: 0.125rem dashed hsla(223,10%,50%,0.4); 38 flex: 1; 39 padding: 0.375rem 2rem; 40} 41 42.upload-btn:hover { 43 background-color: hsla(223,10%,60%,0.2); 44} 45 46.close { 47 display: flex; 48 align-items: center; 49 justify-content: center; 50 background-color: rgb(226, 94, 54); 51 height: 30px; 52 width: 30px; 53 border-radius: 50%; 54 position: absolute; 55 right: 10px; 56 top: 10px; 57 color: #fff; 58 font-weight: bold; 59 cursor: pointer; 60} 61 62.result { 63 margin-top: 4px; 64 background-color: rgba(0, 140, 255, 0.062); 65 display: flex; 66 align-items: center; 67 position: relative; 68 border-radius: 1em; 69} 70 71.file-uploaded { 72 font-weight: 300; 73} 74 75.file-uploaded::before { 76 position: absolute; 77 content: "X"; 78 display: flex; 79 align-items: center; 80 justify-content: center; 81 background-color: rgba(26, 7, 1, 0.212); 82 height: 30px; 83 width: 30px; 84 border-radius: 50%; 85 right: 10px; 86 top: 10px; 87 color: rgb(255, 255, 255); 88 font-weight: bold; 89 cursor: pointer; 90} 91 92.file-uploaded:hover::before { 93 background-color: rgba(233, 40, 6, 0.664); 94}
Comments
MIT License