Differences From
Artifact [de5cdf2da4]:
268 268 }
269 269 > .xid {
270 270 color: tone(20%,-0.1);
271 271 font-size: 80%;
272 272 vertical-align: text-top;
273 273 }
274 274 }
275 +
276 +body.profile {
277 + #rel {
278 + menu {
279 + display: grid;
280 + grid-template-columns: 1fr 1fr;
281 + grid-template-rows: repeat(max-content);
282 + grid-gap: 0.1in;
283 + > .opt {
284 + padding: 0.1in;
285 + border-radius: 5px;
286 + border: 1px solid transparent;
287 + &.on {
288 + background-color: tone(-30%, -0.7);
289 + box-shadow: 0 0 10px tone(-30%);
290 + border-color: tone(-20%);
291 + }
292 + > button, > p { display: block; }
293 + > p { text-align: center; font-size: 80%; margin: 0; margin-top: 0.1in; }
294 + > button {
295 + margin: auto;
296 + }
297 + &:last-child:nth-child(2n-1) {
298 + grid-column: 1/3;
299 + }
300 + }
301 +
302 + }
303 + }
304 +}
275 305
276 306 div.profile {
277 307 padding: 0.1in;
278 308 position: relative;
279 309 display: grid;
280 310 margin-bottom: 0.4in;
281 311 grid-template-columns: 2fr 1fr;
................................................................................
290 320 > .avatar {
291 321 display: block;
292 322 width: 1in; height: 1in;
293 323 object-fit: cover;
294 324 grid-column: 1 / 2;
295 325 grid-row: 1 / 3;
296 326 border: 1px solid black;
327 + background-color: tone(-57%);
297 328 }
298 329 > .id {
299 330 grid-column: 2 / 3;
300 331 grid-row: 1 / 2;
301 332 }
302 333 > .bio {
303 334 grid-column: 2 / 3;
................................................................................
411 442 > .msg:first-child { padding-top: 0; }
412 443 > .user {
413 444 width: max-content; margin: auto;
414 445 background: tone(-20%,-0.3);
415 446 border: 1px solid black;
416 447 color: tone(-50%);
417 448 padding: 0.1in;
418 - > img { display: block; width: 1in; height: 1in; margin: auto; border: 1px solid black; }
449 + > img {
450 + display: block;
451 + width: 1in; height: 1in;
452 + margin: auto;
453 + border: 1px solid black;
454 + background-color: tone(-50%);
455 + }
419 456 > .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
420 457 }
421 458 >form {
422 459 display: grid;
423 460 grid-template-columns: 1fr 1fr;
424 461 grid-template-rows: 1.2em max-content max-content;
425 462 grid-gap: 5px;
................................................................................
473 510 background: url(/s/padlock.svg) no-repeat, $grad-ui-focus;
474 511 background-size: 20pt;
475 512 background-position: 0.05in 50%;
476 513 };
477 514 padding-left: 0.40in;
478 515 }
479 516
480 -div.modal {
517 +.modal {
481 518 @extend %box;
482 519 position: fixed;
483 520 display: none;
484 521 left: 0; right: 0; bottom: 0; top: 0;
485 522 max-width: 7in;
486 523 margin: 1in auto;
487 524 padding: 0.2in 0.3in;