/* Form CSS for Anime Quality Hierarkhia Ranking
*/

/* Login, Sign In
*/
form.user-profile,
form.signin,
form.login {
	display: grid;
  grid-template-columns: auto auto;
	justify-content: center;
	margin:50px auto;
	padding: 5px;
	width: 360px;
}
/*form.user-profile {margin-top: 0;}*/

img.user-profile-picture {
	width: 128px;
	margin: 0; padding: 0;
/*	margin-top: 32px;*/
}

.user-profile-picture {
	margin: 0; padding: 0;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}
div.user-profile-picture {
	width: 128px; height: 128px;
	border: 1px solid white;	
}
i.user-profile-picture {
	display: block;
	width: 24px; height: 24px;
	border: none;
	cursor: pointer;
}

/* Navigation Link
*/
a.profile span,
form.loginout {
	position: absolute;
	width: 100px; height:30px;
	top:12px; right:30px;
	display: block;
	margin: 0;
}
a.profile span {
	color: white;
	width: 30px;
	right: 130px;
}
a.profile span:hover {opacity: 0.75;}
form.profile > input,
form.loginout > input {display: none;}
form.profile > label,
form.loginout > label {color: aqua;}

/* Search Filter
*/
form#filter {
  display: block;
	margin: 5px auto;
	padding: 3px;
	width: 680px;
	background-color: hsla(239,50%,41%,0.5);
	border-radius: 5px;
}

/* Add New or Edit Record/Article
*/
form.update {
  display: block;
	margin: 5px auto;
	width: 800px;
}

input {
	border-radius: 5px;
	font-size: 16px;
	width: 120px;
}
input.shorter {width: 30px;}
input.short {width: 60px;}
input.long {width: 240px;}
input.longer {width: 480px;}
textarea {
	border-radius: 5px;
	font-size: 16px;
	width: 540px; height: 80px;
	vertical-align: top;
}
input.button {
	line-height: 1.1;
	width: 80px; height: 25px;
	color: white;
	background-color: hsl(239,50%,41%);
	border-radius: 5px;
	cursor: pointer;
}
input.button:hover {background-color: hsl(240,94%,69%);}
input.button.disabled,
input.button.disabled:hover {
	background-color: hsl(239,10%,41%);
	cursor: default;
}
input.loginout {
	position: absolute;
	top: 0; right: 0;
}
label {margin: 3px 5px; text-align: right;}
div.button {text-align: left;}
.input-label,
.input-label input,
.input-label label,
.article,
.article input,
.article label,
.radio,
.radio input,
.radio label {
	text-align:left;
}
.radio input {width: 16px;}
.radio label {width: 50px;}

/* edit-close: 出したり引っ込めたり more-less の応用
edit: label font awesome を使ってインライン表示
出すものに grid/flex レイアウトを適用
*/
form.add-close,
form.edit-close0,
form.edit-close1 {
	background-color:  hsla(239,50%,41%,0.5);
	margin:5px auto;
	padding: 5px 5px 5px 10px;
	border-radius: 15px;
	width: 720px;
}
form.add-close,
form.edit-close1 {
  grid-template-columns: auto auto;
	justify-content: center;	
}
form.edit-close0 input.button {
	text-align: center;
}

.edit-close0 input,
.edit-close0 label {text-align: left;}

input.add-close,
input.edit-close0,
input.edit-close1,
input.add-close + label + form,
input.edit-close0 + label + form,
input.edit-close1 + label + form {display: none;}
input.edit-close0:checked + label + form {display: block;}
input.add-close:checked + label + form,
input.edit-close1:checked + label + form {display: grid;}
input.add-close + label::after {content: " Add New";}
input.edit-close0 + label::after,
input.edit-close1 + label::after {content: " Edit";}
input.add-close:checked + label::after,
input.edit-close0:checked + label::after,
input.edit-close1:checked + label::after {content: " Close";}

label.add-close {
	background-color: hsl(239,50%,41%);
	border: 3px; padding: 2px 6px;
	border-radius: 2px;
}

form.profile > label,
form.loginout > label,
label.add-close,
label.edit-close0,
label.edit-close1 { 
	cursor: pointer;
	color: aqua;
}
span.profile,
form.profile > label:hover,
form.loginout > label:hover,
label.add-close:hover,
label.edit-close0:hover,
label.edit-close1:hover { opacity: .75;}

	
/* Prototype
*/
div.edit,
div.edit-close {
  display:grid;
	margin:5px auto;
	width:800px;
  grid-template-columns: auto auto;
	justify-content: center;
}
input.edit,
input.edit-close,
input.edit + *,
input.edit-close + * {display: none;}
input.edit:checked + div.edit,
input.edit-close:checked + div.edit-close {display: grid;}
/* label.edit はインラインで場所を特定できない */
input.edit-close + * + label::after {content: "edit";}
input.edit-close:checked + * + label::after {content: "close";}

label.edit,
label.edit-close { 
	cursor: pointer;
	color: aqua;
}
label.edit-close { 
	background-color: hsl(239,50%,41%);
	width:54px;
	border-radius: 3px;
	display: block;
	text-align: center;
	margin: 0 auto; padding: 0;
}
label.edit:hover,
label.edit-close:hover { opacity: .75;}