Module:Arkitecture/styles.css

/* #region [[Module:Arkitecture]] (WIP) */
.arkitect, .arkitect * {
    box-sizing: border-box;
}

.arkitect {
    float: right;
    clear: right;
    width: 29em;
    max-width: 100%;
    margin: 0 0 8px 8px;
    overflow: hidden;
    background: var(--ark-arkitex-background-color);
    border: 2px solid var(--ark-arkitex-border-color);
    border-radius: 0.2rem;
    font-size: 0.9em;
}

.arkitect-row {
    margin-bottom: 2px;
}
.arkitect-cell {
  padding: 5px 8px;
  background: var(--ark-arkitex-right-color);
}

.arkitect-unit-caption {
    position: relative;
    text-align: center;
    margin: 0 0 .25em;
    padding: 0.05em .5em;
    background: 0 0;
    font-weight: 500;
    color: var(--content-default-link-color);
    border-radius: 4px;
}

.arkitect-unit {
  padding: 0.5em 0.6em;
  /* border-bottom */
}

.arkitect-unit:last-child {
  border-bottom: 0;
}

.arkitect-item-label,
.arkitect-secondary-background {
  background: var(--ark-arkitex-left-color);
}

.arkitect-item-label {
    font-weight: 500;
}

.arkitect-item > .arkitect-item-label {
    text-align: right;
}

.arkitect-note > p {
    grid-column: 2;
    text-align: right;
    margin: .2em 0;
}
  
.arkitect-note + .arkitect-note > p {
    margin: 0 0 .2em;
}

.arkitect-row-layout + .arkitect-item {
  margin-top: 1px;
}

.arkitect-infobox-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--ark-arkitex-border-color--rgb), 0.07);
  padding-bottom: 0.1rem;
}

.arkitect-infobox-title + .arkitect__image {
	margin-top: .4rem;
}

.arkitect-game-bar {
  /* border */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 2px;
  margin-bottom: 0.35em;
  border-radius: 3px;
}

.arkitect__image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    max-height: 190px;
    width: auto;
}

.arkitect__image > .tabber {
	margin-top: -0.5rem;
}
.arkitect__image .tabber__tabs {
	justify-content: center;
	padding-bottom: 0.1rem;
}

.arkitect-table-layout {
    margin-bottom: 0.5em;
}
.arkitect-table-layout .arkitect-item-label,
.arkitect-table-layout .arkitect-item {
  text-align: center;
}

.arkitect-row-layout,
.arkitect-column-layout {
  display: grid;
  gap: 1px;
}
.arkitect-row-layout-25x75 {
  grid-template-columns: minmax( 0, 1fr ) minmax( 0, 3fr );
}
.arkitect-row-layout-40x60 {
  grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
}
.arkitect-column-layout-50x50 {
  grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.arkitect-column-layout-33x33x33 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.arkitect-column-layout-33x33x33 > .arkitect-cell,
.arkitect-column-layout-33x33x33 > .arkitect-column {
  flex-basis: 33%;
  flex-grow: 1;
}
.arkitect-table-layout > .arkitect-item {
  display: flex;
  flex-direction: column;
}
.arkitect-table-layout > .arkitect-item > .arkitect-item-value {
  flex-grow: 1;
}
.arkitect-table-layout-unified > .arkitect-item {
  display: contents;
}
.arkitect-table-layout-unified .arkitect-item-value {
  grid-column: 1/-1;
}

.arkitect-corner-tl,
.arkitect-corner-t,
.arkitect-corner-l {
  border-top-left-radius: 3px;
}
.arkitect-corner-tr,
.arkitect-corner-t,
.arkitect-corner-r {
  border-top-right-radius: 3px;
}
.arkitect-corner-bl,
.arkitect-corner-b,
.arkitect-corner-l {
  border-bottom-left-radius: 3px;
}
.arkitect-corner-br,
.arkitect-corner-b,
.arkitect-corner-r {
  border-bottom-right-radius: 3px;
}

.arkitect-is-collapsible > .arkitect-unit-caption::after {
    content: '';
    display: block;
    height: 0.6em;
    right: 0.5em;
    border-color: currentColor;
    border-style: solid;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: 50%;
    width: 0.6em;
    transform: rotate( -45deg );
    margin-top: -0.15em;
}

.arkitect-is-collapsed > .arkitect-unit-caption {
    margin-bottom: 0;
}
.arkitect-is-collapsed > .arkitect-unit-caption::after {
    transform: rotate( 135deg );
    margin-top: -0.5em;
}
.arkitect-is-collapsed > :not( .arkitect-unit-caption ) {
    display: none;
}
.arkitect-is-collapsible > .arkitect-unit-caption:hover {
    background: var(--ark-arkitex-right-color);
}
/* #endregion */