User:あの太/沙箱/custom.css

/*
这个样式表并没有错误，只是萌百的编辑器不能识别某些属性，但不影响浏览器去支持
*/
 
.myclass
{
	width:100%;
	height:20px;
	background-color:blue;
    border:2px solid #08f;
}
 
@media only screen and (min-resolution:150dpi)
{
	.myclass
	{
		background-color:red;
	}
}
 
.wrange-grid
{
	display:grid;
	grid-template-rows:1fr 1fr 1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-column-gap:0px;
	grid-row-gap:0px;
	border:5px solid white;
	background-color:black;
}
 
.wrange-cell
{
	margin:-0.5px; 
	border:1px solid white; 
}
 
.wrange-cell.attack
{
	background-color:red;
}
.wrange-cell.self
{
	background-color:yellow;
}
 
.wrange-cell.empty
{
	background-color:black;
}
 
.rel-container {
    grid-template-columns: auto 2em auto 2em auto;
    grid-template-rows: repeat(2,auto);
    display: grid;
}
.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 calc(20pt + 3em);
    grid-area: 1/2/3/4;
    background: aliceblue;
    z-index: 3;
}
.rel-container > .input-char {
    display: flex;
    justify-content: center;
    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;
}
.rel-container > .output-char {
    grid-column: 4/6;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
}
.arrow {
    margin: 25% 0;
    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;
}
.like {
    border-color: gold;
    background: #ffff80;
    grid-row: 1;
}
.arrow.in {
    grid-column: 2;
    z-index: 4;
}
.arrow.out {
    grid-column: 4;
    z-index: 1;
    background: red;
}
.arrow.like {
    background-color: gold;
}
.output-char.like {
}
.dislike {
    grid-row: 2;
    background: #ffc0c0;
    border-color: red;
}
.arrow.dislike {
    background: red;
}