Template:东放角色关系/style.css

/*
这个样式表没有错误，只是萌娘百科编辑器不识别部分属性而已，不影响页面解析
*/

.housamo-rel-container {
    grid-template-columns: max-content 2em max-content 2em max-content;
    grid-template-rows: repeat(2,auto);
    display: grid;
    white-space: nowrap;
    padding:1em;
}
.housamo-rel-container > .main-char {
    display: flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    border: 3px solid cornflowerblue;
    border-bottom: 3px solid cornflowerblue;
    margin-right: -3px;
    padding: 1em 3em;
    grid-area: 1/2/3/4;
    background: aliceblue;
    z-index: 3;
}
.housamo-rel-container > .input-char {
    display: flex;
    justify-content: flex-end;
    justify-self:right;
    flex-wrap:wrap;
    align-items: center;
    border-width: 3px;
    border-style: solid;
    padding: 1em;
    padding-right: 0.5em;
    border-radius: 1em 0 0 1em;
    z-index: 5;
    margin-right: -3px;
    max-width: 20em;
}
.housamo-rel-container > .output-char {
    grid-column: 4/6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap:wrap;
    border-width: 3px;
    border-style: solid;
    padding: 1em;
    padding-left: 2.5em;
    border-radius: 0 1em 1em 0;
    max-width: calc(20em + 2em);
    z-index: 0;
}
.housamo-rel-container > .arrow {
    margin-top:25%;
    margin-bottom:25%;
    clip-path: polygon(0 0,calc(100% - 0.5em) 0,100% 50%, calc(100% - 0.5em) 100%,0 100%);
    font-size: small;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding-right: 0.5em;
}
.housamo-rel-container > .like {
    border-color: gold;
    background: #ffff80;
    grid-row: 1;
}
.housamo-rel-container > .arrow.in {
    grid-column: 2;
    z-index: 4;
}
.housamo-rel-container > .arrow.out {
    grid-column: 4;
    z-index: 1;
    background: red;
}
.housamo-rel-container > .arrow.like {
    background-color: gold;
}
.housamo-rel-container > .output-char.like {
}
.housamo-rel-container > .dislike {
    grid-row: 2;
    background: #ffc0c0;
    border-color: red;
}
.housamo-rel-container > .arrow.dislike {
    background: red;
}


@media only screen and (max-width:500pt) 
{
	.housamo-rel-container > .arrow 
	{
	    margin:0;
	}
	@media (min-resolution:150dpi) 
	{
		.housamo-rel-container > .arrow
		{
			font-size:8pt!important;
			padding-left:2pt;
		}
	}
}
/* [[Category:在模板名字空间下的CSS页面]] */