Template:Periodic table/styles.css

.un-periodic-table {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  row-gap: 2.2rem;
}
.un-periodic-table-title {
  color: #111;
  font-size: 2.5em;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.un-elements-group-container {
  font-size: 0.9em;
}
.un-elements {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(11, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  width: min-content;
}
.un-elements-box {
  display: flex;
  border-radius: 3px;
  width: 3.8vw;
  max-width: 78px;
  padding: 0.1em 0.4em;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: #D3D3D3;
  transition: 100ms ease-in;
}
.un-elements-box:hover {
  transform: scale(1.4);
  box-shadow: 0em 0em 0.2em rgba(0,0,0,0.2);
}
.un-elements-number {
  flex: 0 0;
  align-self: flex-start;
  font-size: 0.75em;
}
.un-elements-symbol { 
  flex: 1 1;
  font-size: 1.2em;
  line-height: 100%;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.un-elements-name { 
  flex:0 0;
  font-size: 0.8em;
  text-align: center;
}
.lanthanoid, .actinoid {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.8em;
  font-weight: bold;
}

/* elements grid positioning */
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 18 / 2 / 19; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 2 / 13 / 3 / 14; }
.div6 { grid-area: 2 / 14 / 3 / 15; }
.div7 { grid-area: 2 / 15 / 3 / 16; }
.div8 { grid-area: 2 / 16 / 3 / 17; }
.div9 { grid-area: 2 / 17 / 3 / 18; }
.div10 { grid-area: 2 / 18 / 3 / 19; }
.div11 { grid-area: 3 / 1 / 4 / 2; }
.div12 { grid-area: 3 / 2 / 4 / 3; }
.div13 { grid-area: 3 / 13 / 4 / 14; }
.div14 { grid-area: 3 / 14 / 4 / 15; }
.div15 { grid-area: 3 / 15 / 4 / 16; }
.div16 { grid-area: 3 / 16 / 4 / 17; }
.div17 { grid-area: 3 / 17 / 4 / 18; }
.div18 { grid-area: 3 / 18 / 4 / 19; }
.div19 { grid-area: 4 / 1 / 5 / 2; }
.div20 { grid-area: 4 / 2 / 5 / 3; }
.div21 { grid-area: 4 / 3 / 5 / 4; }
.div22 { grid-area: 4 / 4 / 5 / 5; }
.div23 { grid-area: 4 / 5 / 5 / 6; }
.div24 { grid-area: 4 / 6 / 5 / 7; }
.div25 { grid-area: 4 / 7 / 5 / 8; }
.div26 { grid-area: 4 / 8 / 5 / 9; }
.div27 { grid-area: 4 / 9 / 5 / 10; }
.div28 { grid-area: 4 / 10 / 5 / 11; }
.div29 { grid-area: 4 / 11 / 5 / 12; }
.div30 { grid-area: 4 / 12 / 5 / 13; }
.div31 { grid-area: 4 / 13 / 5 / 14; }
.div32 { grid-area: 4 / 14 / 5 / 15; }
.div33 { grid-area: 4 / 15 / 5 / 16; }
.div34 { grid-area: 4 / 16 / 5 / 17; }
.div35 { grid-area: 4 / 17 / 5 / 18; }
.div36 { grid-area: 4 / 18 / 5 / 19; }
.div37 { grid-area: 5 / 1 / 6 / 2; }
.div38 { grid-area: 5 / 2 / 6 / 3; }
.div39 { grid-area: 5 / 3 / 6 / 4; }
.div40 { grid-area: 5 / 4 / 6 / 5; }
.div41 { grid-area: 5 / 5 / 6 / 6; }
.div42 { grid-area: 5 / 6 / 6 / 7; }
.div43 { grid-area: 5 / 7 / 6 / 8; }
.div44 { grid-area: 5 / 8 / 6 / 9; }
.div45 { grid-area: 5 / 9 / 6 / 10; }
.div46 { grid-area: 5 / 10 / 6 / 11; }
.div47 { grid-area: 5 / 11 / 6 / 12; }
.div48 { grid-area: 5 / 12 / 6 / 13; }
.div49 { grid-area: 5 / 13 / 6 / 14; }
.div50 { grid-area: 5 / 14 / 6 / 15; }
.div51 { grid-area: 5 / 15 / 6 / 16; }
.div52 { grid-area: 5 / 16 / 6 / 17; }
.div53 { grid-area: 5 / 17 / 6 / 18; }
.div54 { grid-area: 5 / 18 / 6 / 19; }
.div55 { grid-area: 6 / 1 / 7 / 2; }
.div56 { grid-area: 6 / 2 / 7 / 3; }
.div57 { grid-area: 6 / 3 / 7 / 4; }
.div58 { grid-area: 10 / 4 / 11 / 5; }
.div59 { grid-area: 10 / 5 / 11 / 6; }
.div60 { grid-area: 10 / 6 / 11 / 7; }
.div61 { grid-area: 10 / 7 / 11 / 8; }
.div62 { grid-area: 10 / 8 / 11 / 9; }
.div63 { grid-area: 10 / 9 / 11 / 10; }
.div64 { grid-area: 10 / 10 / 11 / 11; }
.div65 { grid-area: 10 / 11 / 11 / 12; }
.div66 { grid-area: 10 / 12 / 11 / 13; }
.div67 { grid-area: 10 / 13 / 11 / 14; }
.div68 { grid-area: 10 / 14 / 11 / 15; }
.div69 { grid-area: 10 / 15 / 11 / 16; }
.div70 { grid-area: 10 / 16 / 11 / 17; }
.div71 { grid-area: 10 / 17 / 11 / 18; }
.div72 { grid-area: 6 / 4 / 7 / 5; }
.div73 { grid-area: 6 / 5 / 7 / 6; }
.div74 { grid-area: 6 / 6 / 7 / 7; }
.div75 { grid-area: 6 / 7 / 7 / 8; }
.div76 { grid-area: 6 / 8 / 7 / 9; }
.div77 { grid-area: 6 / 9 / 7 / 10; }
.div78 { grid-area: 6 / 10 / 7 / 11; }
.div79 { grid-area: 6 / 11 / 7 / 12; }
.div80 { grid-area: 6 / 12 / 7 / 13; }
.div81 { grid-area: 6 / 13 / 7 / 14; }
.div82 { grid-area: 6 / 14 / 7 / 15; }
.div83 { grid-area: 6 / 15 / 7 / 16; }
.div84 { grid-area: 6 / 16 / 7 / 17; }
.div85 { grid-area: 6 / 17 / 7 / 18; }
.div86 { grid-area: 6 / 18 / 7 / 19; }
.div87 { grid-area: 7 / 1 / 8 / 2; }
.div88 { grid-area: 7 / 2 / 8 / 3; }
.div89 { grid-area: 7 / 3 / 8 / 4; }
.div90 { grid-area: 11 / 4 / 12 / 5; }
.div91 { grid-area: 11 / 5 / 12 / 6; }
.div92 { grid-area: 11 / 6 / 12 / 7; }
.div93 { grid-area: 11 / 7 / 12 / 8; }
.div94 { grid-area: 11 / 8 / 12 / 9; }
.div95 { grid-area: 11 / 9 / 12 / 10; }
.div96 { grid-area: 11 / 10 / 12 / 11; }
.div97 { grid-area: 11 / 11 / 12 / 12; }
.div98 { grid-area: 11 / 12 / 12 / 13; }
.div99 { grid-area: 11 / 13 / 12 / 14; }
.div100 { grid-area: 11 / 14 / 12 / 15; }
.div101 { grid-area: 11 / 15 / 12 / 16; }
.div102 { grid-area: 11 / 16 / 12 / 17; }
.div103 { grid-area: 11 / 17 / 12 / 18; }
.div104 { grid-area: 7 / 4 / 8 / 5; }
.div105 { grid-area: 7 / 5 / 8 / 6; }
.div106 { grid-area: 7 / 6 / 8 / 7; }
.div107 { grid-area: 7 / 7 / 8 / 8; }
.div108 { grid-area: 7 / 8 / 8 / 9; }
.div109 { grid-area: 7 / 9 / 8 / 10; }
.div110 { grid-area: 7 / 10 / 8 / 11; }
.div111 { grid-area: 7 / 11 / 8 / 12; }
.div112 { grid-area: 7 / 12 / 8 / 13; }
.div113 { grid-area: 7 / 13 / 8 / 14; }
.div114 { grid-area: 7 / 14 / 8 / 15; }
.div115 { grid-area: 7 / 15 / 8 / 16; }
.div116 { grid-area: 7 / 16 / 8 / 17; }
.div117 { grid-area: 7 / 17 / 8 / 18; }
.div118 { grid-area: 7 / 18 / 8 / 19; }

.div119 { grid-area: 8 / 1 / 9 / 2; }
.div120 { grid-area: 8 / 2 / 9 / 3; }
.div121 { grid-area: 8 / 3 / 9 / 4; }
.div122 { grid-area: 8 / 4 / 9 / 5; }
.div123 { grid-area: 8 / 5 / 9 / 6; }
.div124 { grid-area: 8 / 6 / 9 / 7; }
.div125 { grid-area: 8 / 7 / 9 / 8; }
.div126 { grid-area: 8 / 8 / 9 / 9; }
.div127 { grid-area: 8 / 9 / 9 / 10; }
.div128 { grid-area: 8 / 10 / 9 / 11; }
.div129 { grid-area: 8 / 11 / 9 / 12; }
.div130 { grid-area: 8 / 12 / 9 / 13; }
.div131 { grid-area: 8 / 13 / 9 / 14; }
.div132 { grid-area: 8 / 14 / 9 / 15; }
.div133 { grid-area: 8 / 15 / 9 / 16; }
.div134 { grid-area: 8 / 16 / 9 / 17; }
.div135 { grid-area: 8 / 17 / 9 / 18; }
.div136 { grid-area: 8 / 18 / 9 / 19; }


.lanthanoid { grid-area: 10 / 3 / 11 / 4; }
.actinoid { grid-area: 11 / 3 / 12 / 4; }


.un-elements-group-container {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 4px;
}
.un-elements-group {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
}
.un-elements-group-symbol {
  display: block;
  width: 14px;
  height: 14px;
  border:1px solid #111;
}

/* alkali metals */
.alkali-metals,
.div3,
.div11,
.div19,
.div37,
.div55,
.div87,
.div119 {
  background-color: #ff8a80;
}

/* alkaline earth metals */
.alkaline-earth-metals,
.div4,
.div12,
.div20,
.div38,
.div56,
.div88,
.div120 {
  background-color: #FFDEAD;
}

/* transition metals */
.transition-metals,
.div21,
.div22,
.div23,
.div24,
.div25,
.div26,
.div27,
.div28,
.div29,
.div30,
.div39,
.div40,
.div41,
.div42,
.div43,
.div44,
.div45,
.div46,
.div47,
.div48,
.div72,
.div73,
.div74,
.div75,
.div76,
.div77,
.div78,
.div79,
.div80,
.div104,
.div105,
.div106,
.div107,
.div108 {
  background-color: #ffdf33;
}

/* post-transition metals */
.post-transition-metals,
.div13,
.div31,
.div49,
.div50,
.div81,
.div82,
.div83,
.div84,
.div85 {
  background-color: #C3B1E1;
}

/* metalloids */
.metalloids,
.div5,
.div14,
.div32,
.div33,
.div51,
.div52 {
  background-color: #ADFF2F;
}

/* reactive nonmetals */
.reactive-nonmetals,
.div1,
.div6, 
.div7,
.div8,
.div9,
.div15,
.div16,
.div17,
.div34,
.div35,
.div53 {
  background-color: #90EE90;
}

/* noble gases */
.noble-gases,
.div2,
.div10,
.div18,
.div36,
.div54,
.div86 {
  background-color: #87CEFA;
}

/* lanthanides */
.lanthanides,
.div57,
.div58, 
.div59,
.div60,
.div61,
.div62,
.div63,
.div64,
.div65,
.div66,
.div67,
.div68,
.div69,
.div70,
.div71 {
  background-color: #FFB6C1;
}

/* actinides */
.actinides,
.div89,
.div90,
.div91,
.div92,
.div93,
.div94,
.div95,
.div96,
.div97,
.div98,
.div99,
.div100,
.div101,
.div102,
.div103 {
  background-color: #ff83c1;
}

/* pseudides (fake elements) */
.pseudides,
.div121,
.div122,
.div123,
.div124,
.div125,
.div126,
.div127,
.div128,
.div129,
.div130,
.div131,
.div132,
.div133,
.div134,
.div135,
.div136 {
  background-color: #B2DFDB;
}

/* skin hacks */
body.skin-timeless .un-elements-box,
body.skin-vector-2022 .un-elements-box {
  width: 3vw;
  max-width: 60px;
  font-size: 90%;
}
body.skin-minerva .un-elements-box {
    max-width: 40px;
}
body.skin-minerva .un-elements-name {
    font-size: 0.55em;
}

/* mobile responsive nonsense */
@media screen and (max-width:1600px) {
  .un-elements-box {
    width: 3.2vw;
    max-width: 60px;
  }
  .un-elements-name {
    font-size: 0.65em;
  }
}
@media screen and (max-width:1440px) {
  .un-periodic-table {
    row-gap: 1.5rem;
  }
  .un-periodic-table-title {
    font-size: 2em;
  }
  .un-elements-number {
    font-size: 0.8em;
    line-height: 100%;
    text-align: center;
  }
  .un-elements-name {
    display: none;
  }
}

@media screen and (max-width:1200px) {
  .un-periodic-table {
    row-gap: 0.5rem;
  }
  .un-periodic-table-title {
    font-size: 1em;
  }
  .un-elements-box {
    width: 2.4vw;
  }
  .un-elements-number {
    display: none;
  }
  .un-elements-symbol {
    font-size: 1em;
  }
  .un-elements-group-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 4px;
  }
}