styles.css (6005B)
1 /* Hello welcome to my styles. Here are some notes. 2 * 3 * - I use Noto Sans because it supports most languages. 4 * - I will implement light mode first and then attempt dark. 5 * - All variables should be declared at the top. 6 * - Use as little as possible, write from scratch, and utilize helper 7 * classes. 8 * - No transpilers! 9 */ 10 11 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap'); 12 13 :root { 14 --clrBg: #fff; 15 --clrPanel: #f9f9f9; 16 --clrBorder: #f2f2f2; 17 --clrBtn: #202020; 18 --clrText: #202020; 19 --clrTextLight: #868686; 20 --clrTextLighter: #abb4ca; 21 --clrHeart: #ff5050; 22 --clrWarn: #fbc560; 23 24 --navPadding: 5px; 25 --fsSmall: 12px; 26 --fsNormal: 16px; 27 --fsReduced: 14px; 28 --fsEnlarged: 18px; 29 30 --ffDefault: "Noto Sans", sans-serif; 31 } 32 *:focus-visible { 33 /* Technically this is bad and something else should be done to indicate 34 * that something is in focus. 35 */ 36 outline: none; 37 } 38 body { 39 background: var(--clrBg); 40 color: var(--clrText); 41 font-family: "Noto Sans", sans-serif; 42 font-size: var(--fsNormal); 43 margin: 0; 44 padding: 0; 45 width: 100%; 46 height: 100%; 47 } 48 49 /* Utilities */ 50 .flex-fill { 51 flex: 1; 52 } 53 .hide { 54 display: none; 55 } 56 .loader { 57 font-size: 24px; 58 } 59 button.action:disabled { 60 cursor: default; 61 background-color: var(--clrTextLight); 62 } 63 button { 64 background: #171717; 65 cursor: pointer; 66 } 67 button.icon { 68 border: none; 69 background: transparent; 70 padding: 0; 71 margin: 0; 72 } 73 button.action { 74 border: none; 75 border-radius: 50px; 76 background: #171717; 77 padding: 10px 15px; 78 font-size: 16px; 79 color: white; 80 font-weight: 800; 81 } 82 .float-right { 83 float: right; 84 } 85 86 /* Application Framework */ 87 button.nav { 88 color: var(--clrBtn); 89 font-size: 24px; 90 padding: calc(var(--navPadding) * 4) calc(var(--navPadding) * 5); 91 } 92 93 #app-icon-logo { 94 font-size: 28px; 95 text-align: center; 96 padding: calc(var(--navPadding) * 4); 97 } 98 99 #app-icon-logo > img { 100 border-radius: 50%; 101 width: 42px; 102 height: 42px; 103 } 104 105 #container { 106 display: flex; 107 108 /* 109 flex-direction: row; 110 width: 100vw; 111 height: 100vh; 112 overflow: hidden;*/ 113 } 114 #nav { 115 flex-shrink: 1; 116 border-right: 1px solid var(--clrBorder); 117 } 118 #content { 119 display: flex; 120 flex-direction: column; 121 border-right: 1px solid var(--clrBorder); 122 } 123 #content header > label { 124 padding: 22px 15px; 125 font-size: 22px; 126 font-weight: 800; 127 display: block; 128 } 129 130 #view { 131 max-width: 750px; 132 overflow-y: scroll; 133 flex: 1; 134 } 135 136 /* Events & Content */ 137 .event { 138 display: flex; 139 flex-direction: row; 140 padding: 15px; 141 transition: background-color 0.2s linear; 142 } 143 .event:hover { 144 background-color: var(--clrPanel); 145 } 146 .loading-events { 147 text-align: center; 148 padding: 15px; 149 } 150 .userpic { 151 flex-shrink: 1; 152 } 153 154 .pfp { 155 border-radius: 50%; 156 width: 64px; 157 height: 64px; 158 object-fit: fill; 159 font-size: 3.25em; 160 } 161 162 .event-content { 163 flex: 1; 164 padding-left: 15px; 165 } 166 .event-content > .info { 167 display: inline-block; 168 } 169 .username { 170 font-weight: 800; 171 font-size: var(--fsReduced); 172 } 173 .chatroom-name { 174 font-weight: bold; 175 } 176 .timestamp, .replying-to, .boosted-by { 177 font-size: var(--fsSmall); 178 color: var(--clrTextLight); 179 } 180 .comment { 181 word-break: break-word; 182 } 183 184 .inline-img { 185 width: 100%; 186 max-height: 300px; 187 object-fit: contain; 188 } 189 190 .action-bar { 191 } 192 .action-bar > button { 193 margin-right: 25px; 194 color: var(--clrTextLighter); 195 font-size: var(--fsNormal); 196 } 197 .reactions { 198 padding-bottom: 15px; 199 } 200 201 .reaction-group { 202 display: inline-flex; 203 align-items: center; 204 border: 2px solid var(--clrBorder); 205 padding: 4px; 206 border-radius: 5px; 207 } 208 209 .reaction-group img { 210 width: 18px; 211 height: 18px; 212 object-fit: cover; 213 border-radius: 50%; 214 margin-left: -8px; 215 vertical-align: top; 216 } 217 218 .reaction-group img:first-of-type { 219 margin-left: 0px; 220 } 221 222 .reaction-emoji { 223 margin-right: 4px; 224 } 225 226 .action-bar button.icon { 227 transition: color 0.3s linear; 228 } 229 .action-bar button.icon:hover { 230 color: var(--clrText); 231 } 232 .action-bar button.heart:hover { 233 color: var(--clrHeart); 234 } 235 details.cw summary { 236 background: #f2f2f2; 237 padding: 10px; 238 border-radius: 12px; 239 color: #444; 240 cursor: pointer; 241 margin-bottom: 10px; 242 outline: none; 243 } 244 245 /* Thread Expansion */ 246 .thread-collapsed { 247 padding: 15px; 248 } 249 .thread-summary { 250 background: #f2f2f2; 251 padding: 10px; 252 border-radius: 12px; 253 color: #444; 254 cursor: pointer; 255 } 256 257 /* Modal */ 258 .modal { 259 position: fixed; 260 z-index: 1; 261 left: 0; 262 top: 0; 263 width: 100%; 264 height: 100%; 265 background: rgba(0,0,0,0.4); 266 opacity: 1; 267 transition: opacity 0.2s linear; 268 } 269 .modal.closed { 270 opacity: 0; 271 pointer-events: none; 272 } 273 .modal-content { 274 padding: 20px; 275 overflow: auto; 276 border-radius: 15px; 277 background: var(--clrPanel); 278 max-width: 700px; 279 margin: 0 auto; 280 margin-top: 35px; 281 } 282 .modal header { 283 display: flex; 284 } 285 .modal header label { 286 font-weight: 800; 287 font-size: var(--fsEnlarged); 288 flex: 1; 289 } 290 .modal header button { 291 font-size: 24px; 292 } 293 294 /* Post & Reply */ 295 #newpost { 296 padding: 0px 15px 15px; 297 display: flex; 298 flex-direction: row; 299 border-bottom: solid 1px var(--clrBorder); 300 } 301 #newpost > :first-child { 302 width: 64px; 303 } 304 #newpost > :last-child { 305 padding-left: 15px; 306 flex: 1; 307 } 308 textarea.post-input { 309 display: block; 310 width: 100%; 311 border: none; 312 background: transparent; 313 color: var(--clrText); 314 font-size: var(--fsEnlarged); 315 font-family: var(--ffDefault); 316 margin: 10px 0; 317 padding: 0; 318 box-sizing: border-box; 319 resize: vertical; 320 } 321 322 .post-tools { 323 text-align: right; 324 } 325 .post-tools > button.icon { 326 margin-right: 10px; 327 font-size: var(--fsEnlarged); 328 color: var(--clrTextLight); 329 } 330 .post-tools > button.icon.cw.active { 331 color: var(--clrWarn); 332 } 333 input[type="text"].cw { 334 border: none; 335 border-bottom: solid 2px var(--clrWarn); 336 font-size: var(--fsReduced); 337 } 338 339 .clickable { 340 cursor: pointer; 341 } 342 343 .bottom-border { 344 border-bottom: solid 1px var(--clrBorder); 345 } 346 347 .deleted-comment { 348 border: 2px dashed var(--clrBorder); 349 border-radius: 10px; 350 padding: 10px; 351 } 352 353 @media (max-width: 800px){ 354 :root { 355 --navPadding: 2px; 356 } 357 358 .pfp { 359 width: 44px; 360 height: 44px; 361 font-size: 2.2em; 362 } 363 364 #newpost > :first-child { 365 width: 0; 366 } 367 }