parsav  Diff

Differences From Artifact [de5cdf2da4]:

To Artifact [d08e77f56c]:


   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;