Template:Infobox NaviCust part/grid/styles.css: Difference between revisions

Template page
No edit summary
m (Protected "Template:Infobox NaviCust part/grid/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
.navicust-grid {
.navicust-grid {
   display: grid;
   display: grid;
  grid-template-columns: repeat(7, 28px);
  grid-template-rows: repeat(7, 28px);
   grid-column-gap: 3px;
   grid-column-gap: 3px;
   grid-row-gap: 3px;
   grid-row-gap: 3px;
Line 11: Line 9:


.navicust-grid__cell {
.navicust-grid__cell {
position: relative;
background-color: #202020;
background-color: #202020;
color: transparent;
color: transparent;
Line 18: Line 17:
.navicust-grid__cell--filled {
.navicust-grid__cell--filled {
background: var(--part-fill);
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: " ";
}