style.cassius (5717B)
1 @colorOne: #222323 2 @colorTwo: #f0f6f0 3 @colorThree: #6D92AD 4 @colorFour: #435F5D 5 6 @font-face 7 font-family: 'Atkinson' 8 src: url('Atkinson-Hyperlegible-Regular-102a.woff2') 9 10 html 11 font-family: 'Atkinson' 12 background-color: #{colorTwo} 13 color: #{colorOne} 14 15 body 16 margin: 1% auto 17 font-size: 16px 18 text-align: left 19 20 header 21 margin: 0 8% 0 0 22 text-align: right 23 24 a 25 text-decoration: none 26 27 h2 28 text-transform: uppercase 29 30 h3 31 margin: 0.25em 0 0.25em 0 32 33 p 34 margin: 0.4em 0 0.4em 0 35 36 a 37 color: #{colorThree} 38 39 input::-webkit-outer-spin-button, 40 input::-webkit-inner-spin-button 41 -webkit-appearance: none 42 margin: 0 43 input[type=number] 44 -moz-appearance: textfield 45 46 .main 47 margin: 1em auto 48 max-width: 50% 49 50 .title 51 text-align: center 52 margin: 0 auto 0 auto 53 color: #{colorThree} 54 55 .titleLink 56 font-size: 2em 57 cursor: pointer 58 59 .title h1 60 margin: 0.1em 0 0.1em 0 61 62 .htmx-indicator 63 display: none 64 65 ::placeholder 66 color: #{colorOne} 67 opacity: 1 68 69 .generators 70 padding: 1em 0.5em 0.5em 1.5em 71 background-color: #{colorTwo} 72 box-shadow: 8px 8px 12px #ccc 73 overflow-x: scroll 74 75 .generators .numberInput 76 background-color: #{colorTwo} 77 78 .generatorRadio 79 margin: 0 80 81 .logo 82 margin: 4% 3% 0 0 83 color: #{colorFour} 84 text-align: center 85 86 .emptyReq 87 height: 1% 88 89 .mainButton 90 margin: 0 0 0.25em 0 91 padding: 0.75em 1.75em 92 background-color: #{colorThree} 93 color: #{colorTwo} 94 border-style: none 95 text-decoration: none 96 97 .genButton 98 width: 40% 99 margin: 0 0 0.25em 0 100 padding: 0.75em 1.75em 101 background-color: #{colorThree} 102 color: #{colorTwo} 103 border-style: none 104 text-decoration: none 105 106 .mainInput 107 max-width: 50% 108 font-size: 1.1em 109 outline: none 110 color: #{colorOne} 111 background: #{colorTwo} 112 margin: 0.5em 0 1em 0 113 border-style: none none solid none 114 padding: 0.4em 0 115 box-sizing: border-box 116 -webkit-box-sizing: border-box 117 -moz-box-sizing: border-box 118 -webkit-transition: all 0.1s ease-in-out 119 -moz-transition: all 0.1s ease-in-out 120 -ms-transition: all 0.1s ease-in-out 121 -o-transition: all 0.1s ease-in-out 122 transition: all 0.1s ease-in-out 123 124 .mainInput:focus 125 border-bottom: 0.2em solid #{colorThree} 126 127 .mainInput:focus::placeholder 128 color: #{colorThree} 129 opacity: 0.5 130 131 .numberInput 132 text-align: center 133 width: 10% 134 outline: none 135 color: #{colorOne} 136 background: #{colorTwo} 137 margin: 0.5em 0 138 border-style: none none solid none 139 padding: 0.4em 0 140 box-sizing: border-box 141 -webkit-box-sizing: border-box 142 -moz-box-sizing: border-box 143 -webkit-transition: all 0.1s ease-in-out 144 -moz-transition: all 0.1s ease-in-out 145 -ms-transition: all 0.1s ease-in-out 146 -o-transition: all 0.1s ease-in-out 147 transition: all 0.1s ease-in-out 148 149 .numberInput:focus 150 border-bottom: 0.2em solid #{colorThree} 151 152 .numberInput:focus::placeholder 153 color: #{colorThree} 154 opacity: 0.5 155 156 .genNew .numberInput 157 margin: 0 0 0.5em 0 158 159 .genResult 160 font-size: 1.1em 161 color: #{colorFour} 162 163 .requestedPw 164 text-align: center 165 background-color: #333 166 color: #f0f6f0 167 margin: 1.5em 0 2em 0 168 padding: 0.5em 0.5em 0.5em 1.5em 169 box-shadow: 8px 8px 12px #ccc 170 171 .pwResult 172 margin: 0.25em 0 0.75em 0 173 font-size: 1.5em 174 color: #f0f6f0 175 176 .pwResultCopy 177 width: 1px 178 overflow: hidden 179 display: inline-block 180 height: 1px 181 color: rgba(255,255,255,0) 182 183 .shareNew 184 padding: 0.5em 0.5em 0.5em 1.5em 185 background-color: #{colorTwo} 186 box-shadow: 8px 8px 12px #ccc 187 margin: 1em 0 2em 0 188 189 .shareNew .mainInput 190 background-color: #{colorTwo} 191 192 .shareNew .numberInput 193 background-color: #{colorTwo} 194 195 .requestNew 196 padding: 0.5em 0.5em 0.5em 1.5em 197 background-color: #{colorTwo} 198 box-shadow: 8px 8px 12px #ccc 199 margin-bottom: 2em 200 margin-top: 1em 201 202 .requestNew .mainInput 203 background-color: #{colorTwo} 204 205 .resLink 206 font-size: 0.8em 207 208 .validForm 209 margin: 0 210 211 .radioLabel 212 display: flex 213 align-items: center 214 border-radius: 100px 215 margin: 0.3em 0 216 padding: 0.3em 0.5em 217 cursor: pointer 218 transition: .3s 219 220 .radioLabel:hover, .radioLabel:focus-within 221 background: hsla(0, 0%, 80%, .14) 222 223 .radioInput 224 position: fixed 225 left: 0 226 top: 0 227 width: 1px 228 height: 1px 229 opacity: 0 230 z-index: -1 231 232 .radioDesign 233 width: 22px 234 height: 22px 235 border-radius: 100px 236 background: linear-gradient(to right bottom, #fff, #{colorThree}) 237 position: relative 238 239 .radioDesign::before 240 content: '' 241 display: inline-block 242 width: inherit 243 height: inherit 244 border-radius: inherit 245 background: hsl(0, 0%, 90%) 246 transform: scale(1.1) 247 transition: .3s 248 249 .radioInput:checked+.radioDesign::before 250 transform: scale(0) 251 252 .radioText 253 margin-left: 14px 254 letter-spacing: 3px 255 transition: .3s 256 257 .radioInput:checked~.radioText 258 color: hsl(0, 0%, 40%) 259 260 .hidden 261 display: none 262 263 @media only screen and (max-width : 768px) 264 body 265 text-align: center 266 font-size: 16px 267 268 .header 269 margin: 0 2% 0 0 270 271 .main 272 max-width: 90% 273 274 .mainButton 275 width: 80% 276 277 .generators 278 font-size: 12px 279 280 .genButton 281 width: 80% 282 283 .mainInput 284 width: 95% 285 max-width: 100% 286 text-align: center 287 288 .numberInput 289 width: 25% 290 291 .title 292 margin: 4% auto 2% auto 293 294 .title h1 295 font-size: 2.5em 296 margin-bottom: 0 297 298 .requestedPw 299 max-width: 100% 300 301 .pwResult 302 font-size: 1.75em 303 304 .shareUtils 305 width: 100%