Card by Admin12121
#e8e8e8
1.button, 2.input, 3.select, 4.textarea { 5 font: inherit; 6} 7 8a { 9 color: inherit; 10} 11 12.modal-container { 13 max-height: 400px; 14 max-width: 500px; 15 margin-left: auto; 16 margin-right: auto; 17 background-color: #fff; 18 border-radius: 16px; 19 overflow: hidden; 20 display: flex; 21 flex-direction: column; 22 box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25); 23} 24 25@media (max-width: 600px) { 26 .modal-container { 27 width: 90%; 28 } 29} 30 31.modal-container-header { 32 padding: 16px 32px; 33 border-bottom: 1px solid #ddd; 34 display: flex; 35 align-items: center; 36 justify-content: space-between; 37} 38 39.modal-container-title { 40 display: flex; 41 align-items: center; 42 gap: 8px; 43 line-height: 1; 44 font-weight: 700; 45 font-size: 1.125; 46} 47 48.modal-container-title svg { 49 width: 32px; 50 height: 32px; 51 color: #750550; 52} 53 54.modal-container-body { 55 padding: 24px 32px 51px; 56 overflow-y: auto; 57} 58 59.rtf h1, 60.rtf h2, 61.rtf h3, 62.rtf h4, 63.rtf h5, 64.rtf h6 { 65 font-weight: 700; 66} 67 68.rtf h1 { 69 font-size: 1.5rem; 70 line-height: 1.125; 71} 72 73.rtf h2 { 74 font-size: 1.25rem; 75 line-height: 1.25; 76} 77 78.rtf h3 { 79 font-size: 1rem; 80 line-height: 1.5; 81} 82 83.rtf > * + * { 84 margin-top: 1em; 85} 86 87.rtf > * + :is(h1, h2, h3) { 88 margin-top: 2em; 89} 90 91.rtf > :is(h1, h2, h3) + * { 92 margin-top: 0.75em; 93} 94 95.rtf ul, 96.rtf ol { 97 margin-left: 20px; 98 list-style-position: inside; 99} 100 101.rtf ol { 102 list-style: numeric; 103} 104 105.rtf ul { 106 list-style: disc; 107} 108 109.modal-container-footer { 110 padding: 20px 32px; 111 display: flex; 112 align-items: center; 113 justify-content: flex-end; 114 border-top: 1px solid #ddd; 115 gap: 12px; 116 position: relative; 117} 118 119.modal-container-footer:after { 120 content: ""; 121 display: block; 122 position: absolute; 123 top: -51px; 124 left: 24px; 125 right: 24px; 126 height: 50px; 127 flex-shrink: 0; 128 background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent); 129 pointer-events: none; 130} 131 132.button { 133 padding: 12px 20px; 134 border-radius: 8px; 135 background-color: transparent; 136 border: 0; 137 font-weight: 600; 138 cursor: pointer; 139 transition: 0.15s ease; 140} 141 142.button.is-ghost:hover, .button.is-ghost:focus { 143 background-color: #dfdad7; 144} 145 146.button.is-primary { 147 background-color: #750550; 148 color: #fff; 149} 150 151.button.is-primary:hover, .button.is-primary:focus { 152 background-color: #4a0433; 153} 154 155.icon-button { 156 padding: 0; 157 border: 0; 158 background-color: transparent; 159 width: 40px; 160 height: 40px; 161 display: flex; 162 align-items: center; 163 justify-content: center; 164 line-height: 1; 165 cursor: pointer; 166 border-radius: 8px; 167 transition: 0.15s ease; 168} 169 170.icon-button svg { 171 width: 24px; 172 height: 24px; 173} 174 175.icon-button:hover, .icon-button:focus { 176 background-color: #dfdad7; 177}
2.7K views
2.7K views
MIT License