No edit summary |
m (Protected "Template:Infobox NaviCust part/grid/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))) |
||
(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.navicust-grid { | .navicust-grid { | ||
display: grid; | display: grid; | ||
grid-column-gap: 3px; | |||
grid-row-gap: 3px; | |||
grid-column-gap: | |||
grid-row-gap: | |||
margin: 1rem auto; | margin: 1rem auto; | ||
background: #000; | background: #000; | ||
border: | border: 3px solid #000; | ||
} | } | ||
.navicust-grid__cell { | .navicust-grid__cell { | ||
position: relative; | |||
background-color: #202020; | background-color: #202020; | ||
color: transparent; | color: transparent; | ||
Line 16: | Line 15: | ||
} | } | ||
.navicust-grid__cell-filled { | .navicust-grid__cell--filled { | ||
background-color: var(--part-color); | background: var(--part-fill); | ||
} | |||
.navicust-grid--plus .navicust-grid__cell--filled::before { | |||
position: absolute; | |||
left: calc(50% - 1.5px); | |||
top: 0; | |||
width: 3px; | |||
height: 100%; | |||
background-color: var(--part-stroke); | |||
content: " "; | |||
} | |||
.navicust-grid--plus .navicust-grid__cell--filled::after { | |||
position: absolute; | |||
left: 0; | |||
top: calc(50% - 1.5px); | |||
width: 100%; | |||
height: 3px; | |||
background-color: var(--part-stroke); | |||
content: " "; | |||
} | } |
Latest revision as of 21:02, 25 October 2022
.navicust-grid {
display: grid;
grid-column-gap: 3px;
grid-row-gap: 3px;
margin: 1rem auto;
background: #000;
border: 3px solid #000;
}
.navicust-grid__cell {
position: relative;
background-color: #202020;
color: transparent;
text-align: center;
}
.navicust-grid__cell--filled {
background: var(--part-fill);
}
.navicust-grid--plus .navicust-grid__cell--filled::before {
position: absolute;
left: calc(50% - 1.5px);
top: 0;
width: 3px;
height: 100%;
background-color: var(--part-stroke);
content: " ";
}
.navicust-grid--plus .navicust-grid__cell--filled::after {
position: absolute;
left: 0;
top: calc(50% - 1.5px);
width: 100%;
height: 3px;
background-color: var(--part-stroke);
content: " ";
}