Classified Bar Woed Source

Link to article: Classified Bar Woed Source.

Module Styles

• @import url("https://use.typekit.net/inx2jjr.css");
  
  div.scale {
      /* Classification Colors */
      --woedbar-keter-color: rgb(180, 30, 35);
      --woedbar-euclid-color: rgb(225, 205, 35);
      --woedbar-safe-color: rgb(35, 145, 70);
      --woedbar-thaumiel-color: rgb(40, 60, 150);
      --woedbar-neutral-color: rgb(127, 127, 127);
      /* Angled Bar Colors */
      --woedbar-lvl1-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.1);
      --woedbar-lvl2-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.3);
      --woedbar-lvl3-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.55);
      --woedbar-lvl4-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.75);
      --woedbar-lvl5-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),1);
      --woedbar-lvl6-color: rgba(var(--swatch-primary-bright,140, 25, 26),1);
      /* Class Bar Color */
      --woedbar-class-bar-color: rgb(var(--swatch-menubg-black-color,12, 12, 12));
  }
  
  div.scale {
      width: -moz-fit-content;
      width: -webkit-fit-content;
      width: fit-content;
      max-width: 98vw;
      margin: 0 auto;
      padding: 1em 0;
      border: none;
      display: -ms-grid;
      display: grid;
          grid-template-areas:
      	"class classimage item";
      -ms-grid-columns: 1.25fr auto 1.9fr;
      grid-template-columns: 1.25fr auto 1.9fr;
      -ms-grid-rows: minmax(3em,5em);
      grid-template-rows: minmax(3em,5em);
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
         -moz-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: clamp(0.4845rem, 0.1609rem + 1.6179vw, 0.9375rem);
  }
  
  div.class1 {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      grid-area: class;
      white-space: nowrap;
      padding-right: 1em;
      display: -ms-grid;
      display: grid;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
          grid-template-areas: 
      	"."
      	"leveltxt" 
      	"classtxt"
      	"." ;
      -ms-grid-rows: 
      	auto
      	min-content
      	min-content
      	auto;
      grid-template-rows: 
      	auto
      	-webkit-min-content
      	-webkit-min-content
      	auto;
      grid-template-rows: 
      	auto
      	min-content
      	min-content
      	auto;
  }
  
  div.class1>div {
      color: rgb(var(--swatch-text-general, 12, 12, 12));
      font-family: rift, sans-serif, Arial, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif KR', serif;
      font-size: 2.90em;
      line-height: 0.9em;
  }
  
  div.class1 .base:nth-of-type(1) {
      display: none;
  }
  
  div.class1 .base:nth-of-type(2) {
      display: inline;
  }
  
  div.class1 .CN:nth-of-type(1) {
      display: inline;
  }
  
  div.class1 .CN:nth-of-type(2) {
      display: none;
  }
  
  div.class1 .false:nth-of-type(1) {
      display: none !important;
  }
  
  div.class1 .false:nth-of-type(2) {
      display: inline !important;
  }
  
  div.level-text {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      grid-area: leveltxt;
  }
  
  div.class-text {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
      grid-area: classtxt;
  }
  
  div.class1image {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      grid-area: classimage;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      overflow: hidden;
      margin: 0 0.6em 0 0;
      padding-right: 0.6em;
  }
  
  /* middle images */
  div.classified-bar {
      position: relative;
      -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='classified-bar' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 50' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='5,50 0,50 5,25 0,0 5,0 10,25 '/%3E%3C/svg%3E%0A");
              mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='classified-bar' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 50' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='5,50 0,50 5,25 0,0 5,0 10,25 '/%3E%3C/svg%3E%0A");	
      -webkit-mask-repeat: no-repeat;	
              mask-repeat: no-repeat;
      -webkit-mask-position: center center;
              mask-position: center center;
      display: none;
      width: 0;
      min-width: 1em;
      height: -webkit-calc(100% - 0.5em);
      height: -moz-calc(100% - 0.5em);
      height: calc(100% - 0.5em);
  }
  
  div.image-space {
      margin-left: -0.35em;
      display: none;
  }
  
  /* display depending on level 0 */
  div.class1image[data-level="lv0"] {
      min-width: 0;
      background-image: 
      	-webkit-linear-gradient(315deg, 
      		transparent 25%, 
      		var(--woedbar-lvl2-color) 25%, 
      		var(--woedbar-lvl2-color) 50%, 
      		transparent 50%, 
      		transparent 75%, 
      		var(--woedbar-lvl2-color) 75%, 
      		var(--woedbar-lvl2-color) 100%);
      background-image: 
      	-moz-linear-gradient(315deg, 
      		transparent 25%, 
      		var(--woedbar-lvl2-color) 25%, 
      		var(--woedbar-lvl2-color) 50%, 
      		transparent 50%, 
      		transparent 75%, 
      		var(--woedbar-lvl2-color) 75%, 
      		var(--woedbar-lvl2-color) 100%);
      background-image: 
      	-o-linear-gradient(315deg, 
      		transparent 25%, 
      		var(--woedbar-lvl2-color) 25%, 
      		var(--woedbar-lvl2-color) 50%, 
      		transparent 50%, 
      		transparent 75%, 
      		var(--woedbar-lvl2-color) 75%, 
      		var(--woedbar-lvl2-color) 100%);
      background-image: 
      	linear-gradient(135deg, 
      		transparent 25%, 
      		var(--woedbar-lvl2-color) 25%, 
      		var(--woedbar-lvl2-color) 50%, 
      		transparent 50%, 
      		transparent 75%, 
      		var(--woedbar-lvl2-color) 75%, 
      		var(--woedbar-lvl2-color) 100%);
      -webkit-background-size: 5px 5px;
         -moz-background-size: 5px 5px;
           -o-background-size: 5px 5px;
              background-size: 5px 5px;
      padding-right: 0.25em;
  }
  
  /* display depending on level */
  div.class1image[data-level="lv1"] div:nth-child(-n+2) {
      display: inline-block;
      margin-left: initial;
  }
  
  div.class1image[data-level="lv2"] div:nth-child(-n+4) {
      display: inline-block;
  }
  
  div.class1image[data-level="lv3"] div:nth-child(-n+6) {
      display: inline-block;
  }
  
  div.class1image[data-level="lv4"] div:nth-child(-n+8) {
      display: inline-block;
  }
  
  div.class1image[data-level="lv5"] div:nth-child(-n+10) {
      display: inline-block;
  }
  
  div.class1image[data-level="lv6"] div:nth-child(-n+12) {
      display: inline-block;
  }
  
  /* color depending on level */
  div.class1image div.classified-bar:nth-of-type(1) {
      background-color: var(--woedbar-lvl1-color);
  }
  
  div.class1image div.classified-bar:nth-of-type(3) {
      background-color: var(--woedbar-lvl2-color);
  }
  
  div.class1image div.classified-bar:nth-of-type(5) {
      background-color: var(--woedbar-lvl3-color);
  }
  
  div.class1image div.classified-bar:nth-of-type(7) {
      background-color: var(--woedbar-lvl4-color);
  }
  
  div.class1image div.classified-bar:nth-of-type(9) {
      background-color: var(--woedbar-lvl5-color);
  }
  
  div.class1image div.classified-bar:nth-of-type(11) {
      background-color: var(--woedbar-lvl6-color);
  }
  
  div.classified-bar img.sizing-image {
      width: 100%;
      height: 100%;
      visibility: hidden;
  }
  
  div.item1 {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
      grid-area: item;
      white-space: nowrap;
      text-align: right;
      display: -ms-grid;
      display: grid;
          grid-template-areas:
      	"." 
      	"itemnum" 
      	"objclass" 
      	".";
      -ms-grid-rows: 
      	auto 
      	min-content 
      	min-content 
      	auto;
      grid-template-rows: 
      	auto 
      	-webkit-min-content 
      	-webkit-min-content 
      	auto;
      grid-template-rows: 
      	auto 
      	min-content 
      	min-content 
      	auto;
  }
  
  div.item1 > div {
      color: rgb(var(--swatch-text-general, 12, 12, 12));
      font-family: rift, sans-serif, Arial, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif KR', serif;
      font-size: 2em;
      font-weight: normal;
      text-align: center;
      line-height: 1;
  }
  
  .PL div>span {
      font-size: 0.75em;
  }
  
  .ES div>span {
      font-size: 0.85em;
  }
  
  div.item1 .PL-top {
      font-size: 1rem;
  }
  
  div.item1 .PL-btm {
      font-size: 2rem;
  }
  
  div.itemnum {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      grid-area: itemnum;
  }
  
  div.itemnum.TH {
      line-height: 1.5;
      margin-top: -0.5em;
  }
  
  div.objclass {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
      --bar-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
      grid-area: objclass;
      position: relative;
      -webkit-box-flex: 2 !important;
      -webkit-flex-grow: 2 !important;
         -moz-box-flex: 2 !important;
          -ms-flex-positive: 2 !important;
              flex-grow: 2 !important;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  /* Bar Styling */
  div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='scp-general' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M66.9998779,47.4119873V32.095459C47.1456299,34.559021,31.7750854,51.4788208,31.7750854,72 c0,5.5440063,1.1221924,10.8257446,3.1508179,15.6313477l13.2803345-7.6671753l-3.7330322-6.4658203L72,72L59.5341797,47.4119873 H66.9998779z'/%3E%3Cpath d='M53.2062378,88.6243896l-13.2688599,7.6604614C47.2828369,105.9677124,58.9088745,112.2249756,72,112.2249756 s24.7172241-6.2572021,32.0626831-15.9400635l-13.2688599-7.6606445l-3.7328491,6.4655151L72,72L56.9390259,95.0897827 L53.2062378,88.6243896z'/%3E%3Cpath d='M76.9998779,32.095459v15.3165283h7.4659424L72,72l27.5267944,1.4983521l-3.7330322,6.4657593l13.2803955,7.6672363 c2.0286255-4.805603,3.1508179-10.0873413,3.1508179-15.6313477C112.2249756,51.4787598,96.854248,34.55896,76.9998779,32.095459z' /%3E%3Cpath d='M72,0C32.2355347,0,0,32.2355347,0,72c0,39.7645264,32.2355347,72,72,72c39.7645264,0,72-32.2354736,72-72 C144,32.2355347,111.7645264,0,72,0z M121.6561279,106.4422607l-7.1643677-4.1362305 C105.0106812,115.5609741,89.5029907,124.2249756,72,124.2249756s-33.0106812-8.6640625-42.4917603-21.9190674 l-7.1646118,4.1363525l-5-8.6601562l7.1509399-4.128479C21.4731445,87.0516357,19.7750854,79.7225342,19.7750854,72 c0-27.1099243,20.7654419-49.4542847,47.2247925-51.9801636v-8.2445679h10v8.2445679 C103.4594116,22.5455933,124.2249756,44.8900146,124.2249756,72c0,7.7225342-1.6981201,15.0516968-4.7195435,21.6537476 l7.1506958,4.1283569L121.6561279,106.4422607z'/%3E%3C/g%3E%3C/svg%3E%0A");
      content: "";
      background-color: var(--bar-color);
      -webkit-mask-image: var(--mask-url);
              mask-image: var(--mask-url);
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      width: 1.5em;
      height: 1.5em;
      position: absolute;
      left: 0;
  }
  
  div.obj {
      color: rgb(var(--swatch-text-light, 255, 255, 255));
      width: 100%;
      height: 1.5em;
      right: 0;
      -webkit-border-radius: 0.75em;
         -moz-border-radius: 0.75em;
              border-radius: 0.75em;
      line-height: 1;
      background-color: var(--woedbar-class-bar-color);
      -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;
              background-size: cover;
      background-position: -0.03em;
      -webkit-mask: -webkit-radial-gradient(0.75em center, circle, transparent 0.85em, #000 -webkit-calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
              mask: radial-gradient(circle at 0.75em center, transparent 0.85em, #000 -moz-calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
              mask: radial-gradient(circle at 0.75em center, transparent 0.85em, #000 calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
      position: relative;
  }
  /* Keter Styling */
  div.scale[class*="keter" i] div.objclass {
      --bar-color: var(--woedbar-keter-color);
  }
  
  div.scale[class*="keter" i] div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='meter' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M107.15,65.25 l-1.7,0.4l-0.6-2.7C105.75,63.65,106.55,64.45,107.15,65.25z M96.45,29.95l-8.2,1.8l-2.1-9.5C90.75,22.95,94.55,25.85,96.45,29.95z M97.75,36.55v7.1l-13.7,3.1v-6.2c0-0.2,0-0.5-0.1-0.9L97.75,36.55z M83.95,53.75l11.2-2.5l5.1,22.6l10-2.2 c0.6,1.83,0.5,4.95,0.5,6.9l-15.6,3.5l-5.1-22.6l-22.6,5.1l-1.1-5h17.6V53.75z M79.05,22.05l3.5,14.9c-1.65-1.66-5.29-1.13-7.4-1.2 l-2.3-10.1l-22.6,5.1l-0.9-4C54.33,19.34,71.65,22.77,79.05,22.05z M45.95,38.65l21.7-4.8l0.4,1.9c-5.15-0.53-9.13,0.89-8.4,6.9 l-13.7,3.1V38.65z M60.45,115.95l-1.6-7.1l-19.1,4.3c-8.81-5.09-6.06-21.06-6.5-29.4l3.2-0.7l5,22.6l22.6-5.1l3.6,15.4H60.45z M98.35,115.65l-1.3-5.9l-22.6,5.1l-5.1-22.6l-22.6,5.1l-5.1-22.6l-8.4,1.9c-0.09-2.41,0.15-5,1-7.2l12.6-2.8l5.1,22.6l22.4-5.1 l5.1,22.6l22.6-5.1l2.7,11.2C102.85,114.25,100.75,115.25,98.35,115.65z M110.05,105.45l-2.7-11.9l-22.6,5.1l-5.1-22.6l-22.6,5 l-5-22.6l-6.1,1.39c0,0,0,0.01,0,0.01c-0.6,0.1-1.2,0.3-1.8,0.4l1.8-0.41c0-1.7,0-5.36,0-7.09l11.2-2.6l5.1,22.6l22.6-5.1l5.1,22.6 l20.7-4.6h0.1C110.54,89.14,111.34,102.31,110.05,105.45z'/%3E%3C/svg%3E%0A");
  }
  /* Euclid Styling */
  div.scale[class*="euclid" i] div.objclass {
      --bar-color: var(--woedbar-euclid-color);
  }
  
  div.scale[class*="euclid" i] div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Euclid' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M97.8,36.17 l-13.7,13.7v-9.5c0,0,0-0.1,0-0.2l11.7-11.7C97.21,30.72,97.89,33.4,97.8,36.17z M84.2,21.87c2.5,0,4.8,0.6,6.8,1.8l-11.9,11.9h-9.7 l13.8-13.7H84.2z M46,39.67l17.8-17.8h9.7L46,49.37V39.67z M33.7,71.37c0.64-0.26,11.37-12.33,12.3-11.7c0-0.13,0-0.56,0-0.7 l13.7-13.7v9.7l-26.4,26.4C33.4,78.99,33,73.64,33.7,71.37z M33.3,91.07l31.6-31.6h9.7l-41.3,41.3C33.3,100.5,33.3,91.35,33.3,91.07 z M35.4,108.27l62.4-62.4v9.7l-57.7,57.7C38.2,111.97,36.6,110.27,35.4,108.27z M47.2,115.77l54.8-54.8c2.1,1,3.8,2.4,5.3,4.1 l-50.8,50.8C55.51,115.87,48,115.92,47.2,115.77z M110.7,100.27l-15.5,15.6h-9.7l25.2-25.3V100.27z M110.7,80.97l-34.8,34.9h-9.7 l44.2-44.2C110.9,73.7,110.64,78.81,110.7,80.97z'/%3E%3C/svg%3E%0A");
  }
  /* Safe Styling */
  div.scale[class*="safe" i] div.objclass {
      --bar-color: var(--woedbar-safe-color);
  }
  
  div.scale[class*="safe" i] div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='safe' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M59.36,87.57c0,6.9,5.6,12.4,12.4,12.4c6.8,0,12.4-5.5,12.4-12.4C83.63,71.13,59.89,71.13,59.36,87.57z'/%3E%3Cpath d='M84.06,40.37c0-2.6-2.1-4.8-4.8-4.8h-14.8c-2.6,0-4.8,2.1-4.8,4.8v19h24.4V40.37z'/%3E%3Cpath d='M49.96,87.57c0,12,9.8,21.8,21.8,21.8s21.7-9.8,21.8-21.8C92.31,58.65,51.21,58.65,49.96,87.57z M53.96,87.57 c0-9.8,8-17.8,17.8-17.8c9.8,0,17.8,8,17.8,17.8C88.54,111.18,54.98,111.19,53.96,87.57z'/%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M110.66,100.67 c0,8.4-6.8,15.3-15.3,15.3h-46.8c-8.4,0-15.3-6.8-15.3-15.3v-25.8c0-7.6,5.5-13.9,12.7-15.1c0-0.91,0-22.1,0-24.19 c-0.16-7.07,5.92-13.72,13.47-13.7c0.5-0.03,23.69,0.03,24.62,0c0,0,0.01,0,0.01,0c7.6,0,13.7,6.2,13.7,13.7 c0.01,1.06-0.01,23.81,0,24.1c7.3,1.1,12.9,7.4,12.9,15.1V100.67z'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
  /* Thaumiel Styling */
  div.scale[class*="thaumiel" i] div.objclass {
      --bar-color: var(--woedbar-thaumiel-color);
  }
  
  div.scale[class*="thaumiel" i] div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='thaumiel' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M94.29,28.42l1.39-2.22l-2.99-1.64l-1.3,2.26c-9.89-4.58-22.45,2.92-23.07,13.85c-0.89,0.02-2.91,0.06-2.91,0.06l0.07,3.35 c0,0,2.1,0,2.91-0.06c0.31,3.02,1.56,5.89,3.39,8.25c-0.78,2.33,0.5,4.84-0.48,7.08c0,0-26.62,47.91-26.62,47.91 c-2.16,3.93,3.85,7.17,5.97,3.28l1.6-2.9c2.22-3.56,7.79-0.52,5.97,3.28l4.66,2.54l3.28-5.97l-4.66-2.54l2.16-3.85l4.66,2.54 l3.28-5.75l-4.66-2.54c-2.13,3.91-8.12,0.64-5.97-3.28l16.44-29.5c0.3-0.63,0.91-1.23,1.58-1.46c1.55-0.7,2.87-1.62,4.06-2.72 c1.03,0.16,2.15,0.13,3.18,0.07c1.83-0.13,3.74-0.66,5.47-1.5c0.42,0.75,1.48,2.47,1.48,2.47l2.92-1.71c0,0-1.06-1.72-1.48-2.47 C103.64,49.1,103.5,34.31,94.29,28.42z M89.23,30.67l-2.03,3.58l-2.44-1.38l-0.13,8.9l-8.09-3.95l-0.02,1.21 c-0.03,0.54,0.02,1.12-0.02,1.43c-1.03,0.07-2.82,0.1-3.8,0.08C73.73,32.79,81.92,27.72,89.23,30.67z M74.2,48.11 c-0.52-1.16-1.19-2.58-1.38-3.86c-0.05-0.13-0.05-0.13-0.09-0.27c0.86-0.04,2.98-0.08,3.8-0.08l0.05,2.68l8.06-4.15l0.63,8.93 l2.26-1.25c0.23,0.44,1.62,2.87,1.9,3.23C83.94,55.54,77.09,53.32,74.2,48.11z M92.52,51.49c-0.56-0.93-1.48-2.47-1.99-3.27 c0.13-0.05,0.18-0.14,0.31-0.19c0.98-0.61,1.16-0.69,1.9-1.2l-7.7-4.76l7.51-4.85l-2.44-1.38l2.03-3.58 c3.17,2.11,4.86,5.86,4.94,9.65C97.09,45.65,95.36,49.14,92.52,51.49z'/%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M108.06,54.44 c-3.52,7.41-10.21,12.42-17.65,14.09c-1.38,0.34-2.52,1.35-2.94,2.7l-17.95,53.91c-0.76,2.3-3.38,3.38-5.54,2.35l-31.44-14.92 c-2.17-1.03-2.98-3.74-1.68-5.78L61.27,58.8c0.82-1.27,0.84-2.7,0.23-3.99c-3.54-6.99-3.81-15.53,0.02-23.13 C77.74,2.03,121.66,23.47,108.06,54.44z'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
  /* Neutralized Styling */
  div.scale[class*="neutral" i] div.objclass {
      --bar-color: var(--woedbar-neutral-color);
  }
  
  div.scale[class*="neutral" i] div.objclass::before {
      --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M119.69,18.08c-3.04,4.05-12.49,8.84-6.75,13.02c3.12-1.1-0.72,8.91,2.1,11.6c3.02,1.92,4.18,10.44,8.4,7 c-0.55,3.16,1.63,3.34-2.1,4.3c0.17,3.82,1.88,13.25,7.7,13.8c-9.63,5.41-14.33,5.63-0.6,8.3c-5.06-0.93-7.14,1.32-7.1,6.3 c6.5,17.24-21.57,4.44-9.5-6.6c-9.52,1.37-14.2,2.24-24.4-0.91c-4.07,2.31-19.63-9.36-10.5,3.8c-12.42-13.47,12.7,22.93,15.4,27.1 c1.28,2.58,8.3-7.46,5.6-8.8c1.86,1.18,12.41,6.56,9,7.3c3.93,6.1,2.86,6.21-4.5,10.7c-7.3,4.42-10.89,7.85-19.8,8.4 c-1.02-0.97-4.29-0.45-2.88,2.6c0.12,0.23,0.24,0.46,0.38,0.7c-0.15-0.25-0.28-0.48-0.38-0.7c-2.42-4.62-1.76-7.42-8.52-4.8 c-10.25-3.49-5.22,4.13-8.5,12.5c-4.22-6.05,2.88-13.15-9.4-13.9c-1.03-2.83-1.12,3.96-2.7,3.5c-3.28-1.68-3.5,1.51-4.7,3.1 c2.64-8.37-10.94-6.21-4.9-16.4c-5.75,3.27-9.74-3.05-4.3-6.2c10.03-12.94,6.98-3.29,10.5,6.2c4.27-4.88,7.8-11.88,10.8-14.9 c26.86-33.76-0.3-15.83-26.6-20.3c8.36,10.52,3.58,9.37-6,15.1c0.8-4.13-3.08-0.03-4-2c-0.47-2.61-3.68,1.24-4.9,0.6 c6.11-1.54,4.64-10.74-1.01-10.46c-0.19,0.02-0.38,0.04-0.59,0.06c0.2-0.03,0.4-0.05,0.59-0.06c8.73-0.96,3.24-5.68,2.91-11.54 c0.91,0.45,2.26,0.78,1.9-0.8c0.26-4.92,10.31,2.47,11.3-2.6c4.12-9.31-6.24-4.87-9-11.2c0.93-3.93-2.83-3.16,3.9-2.9 c2.05-0.96,9.91-2.54,6.2-5.2c21.53,13.72,8.68-3.75-1.8-12.4c-2.43-7.25,4.97,2.06,7,0.6c3.16-9.04,9.14,2.74,15.7,2.1 c-6.58-15.59,3.76-3.17,2.2-19.6c15.09-4.43,8.38,4.21,10.6,19.5c3.01,11.15,0.08-17.71,8.2-15.8c-0.37,3.91,3.28,1.81,4.6,0 c7.51,8.65,15.51-9.38,9.8,3.5c5.25,3.12,6.87,5.85,14-3c-0.7,2.8-7.57,7.28-4.8,9.5c7.64,5.6,9.27-2.05,21.21-10.32 C106.78,6.76,90.19,0,72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72 C144,50.53,134.6,31.27,119.69,18.08z'/%3E%3Cpath d='M51.65,37.4c2.5,6.93,10.35,16.99,11.8,19.1c1.61,7.26,8.56,24.87,11.2,8.3c3.42-0.15,16.36-22.33,14.51-26.1 c-14.9,4.67-8.99-5.42-11.01-18.1c-10.64-1.03-5.94,13.64-10.1,22.5c-2.38,4.74-3.93,12.64-4.4,7.8 C69.14,38.24,63.98,37.07,51.65,37.4z'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
  
  div.obj > div {
      display: block;
      width: auto;
      font-size: 1.5em;
      position: relative;
      left: 0.45em;
  }

• @import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,700&display=swap');
  
  /* style for -CN */
  div.class1 > div {
      font-family: rift, 'Noto Sans SC', sans-serif;
  }
  div.item1 > div {
      font-family: rift, 'Noto Sans SC', sans-serif;
  }
  div.obj > div {
      font-size: 1.3em;
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• class1

• level-text

• class-text

• class1image

• classified-bar

• sizing-image

• image-space

• classified-bar

• sizing-image

• image-space

• classified-bar

• sizing-image

• image-space

• classified-bar

• sizing-image

• image-space

• classified-bar

• sizing-image

• image-space

• classified-bar

• sizing-image

• obj

• {$oc}

• obj-text

Page Source

[[module CSS]]
@import url("https://use.typekit.net/inx2jjr.css");

div.scale {
    /* Classification Colors */
    --woedbar-keter-color: rgb(180, 30, 35);
    --woedbar-euclid-color: rgb(225, 205, 35);
    --woedbar-safe-color: rgb(35, 145, 70);
    --woedbar-thaumiel-color: rgb(40, 60, 150);
    --woedbar-neutral-color: rgb(127, 127, 127);
    /* Angled Bar Colors */
    --woedbar-lvl1-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.1);
    --woedbar-lvl2-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.3);
    --woedbar-lvl3-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.55);
    --woedbar-lvl4-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),0.75);
    --woedbar-lvl5-color: rgba(var(--swatch-menubg-black-color,12, 12, 12),1);
    --woedbar-lvl6-color: rgba(var(--swatch-primary-bright,140, 25, 26),1);
    /* Class Bar Color */
    --woedbar-class-bar-color: rgb(var(--swatch-menubg-black-color,12, 12, 12));
}

div.scale {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 98vw;
    margin: 0 auto;
    padding: 1em 0;
    border: none;
    display: -ms-grid;
    display: grid;
        grid-template-areas:
    	"class classimage item";
    -ms-grid-columns: 1.25fr auto 1.9fr;
    grid-template-columns: 1.25fr auto 1.9fr;
    -ms-grid-rows: minmax(3em,5em);
    grid-template-rows: minmax(3em,5em);
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: clamp(0.4845rem, 0.1609rem + 1.6179vw, 0.9375rem);
}

div.class1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: class;
    white-space: nowrap;
    padding-right: 1em;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
        grid-template-areas: 
    	"."
    	"leveltxt" 
    	"classtxt"
    	"." ;
    -ms-grid-rows: 
    	auto
    	min-content
    	min-content
    	auto;
    grid-template-rows: 
    	auto
    	-webkit-min-content
    	-webkit-min-content
    	auto;
    grid-template-rows: 
    	auto
    	min-content
    	min-content
    	auto;
}

div.class1>div {
    color: rgb(var(--swatch-text-general, 12, 12, 12));
    font-family: rift, sans-serif, Arial, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif KR', serif;
    font-size: 2.90em;
    line-height: 0.9em;
}

div.class1 .base:nth-of-type(1) {
    display: none;
}

div.class1 .base:nth-of-type(2) {
    display: inline;
}

div.class1 .CN:nth-of-type(1) {
    display: inline;
}

div.class1 .CN:nth-of-type(2) {
    display: none;
}

div.class1 .false:nth-of-type(1) {
    display: none !important;
}

div.class1 .false:nth-of-type(2) {
    display: inline !important;
}

div.level-text {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: leveltxt;
}

div.class-text {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: classtxt;
}

div.class1image {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    grid-area: classimage;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    margin: 0 0.6em 0 0;
    padding-right: 0.6em;
}

/* middle images */
div.classified-bar {
    position: relative;
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='classified-bar' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 50' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='5,50 0,50 5,25 0,0 5,0 10,25 '/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='classified-bar' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 50' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='5,50 0,50 5,25 0,0 5,0 10,25 '/%3E%3C/svg%3E%0A");	
    -webkit-mask-repeat: no-repeat;	
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    display: none;
    width: 0;
    min-width: 1em;
    height: -webkit-calc(100% - 0.5em);
    height: -moz-calc(100% - 0.5em);
    height: calc(100% - 0.5em);
}

div.image-space {
    margin-left: -0.35em;
    display: none;
}

/* display depending on level 0 */
div.class1image[data-level="lv0"] {
    min-width: 0;
    background-image: 
    	-webkit-linear-gradient(315deg, 
    		transparent 25%, 
    		var(--woedbar-lvl2-color) 25%, 
    		var(--woedbar-lvl2-color) 50%, 
    		transparent 50%, 
    		transparent 75%, 
    		var(--woedbar-lvl2-color) 75%, 
    		var(--woedbar-lvl2-color) 100%);
    background-image: 
    	-moz-linear-gradient(315deg, 
    		transparent 25%, 
    		var(--woedbar-lvl2-color) 25%, 
    		var(--woedbar-lvl2-color) 50%, 
    		transparent 50%, 
    		transparent 75%, 
    		var(--woedbar-lvl2-color) 75%, 
    		var(--woedbar-lvl2-color) 100%);
    background-image: 
    	-o-linear-gradient(315deg, 
    		transparent 25%, 
    		var(--woedbar-lvl2-color) 25%, 
    		var(--woedbar-lvl2-color) 50%, 
    		transparent 50%, 
    		transparent 75%, 
    		var(--woedbar-lvl2-color) 75%, 
    		var(--woedbar-lvl2-color) 100%);
    background-image: 
    	linear-gradient(135deg, 
    		transparent 25%, 
    		var(--woedbar-lvl2-color) 25%, 
    		var(--woedbar-lvl2-color) 50%, 
    		transparent 50%, 
    		transparent 75%, 
    		var(--woedbar-lvl2-color) 75%, 
    		var(--woedbar-lvl2-color) 100%);
    -webkit-background-size: 5px 5px;
       -moz-background-size: 5px 5px;
         -o-background-size: 5px 5px;
            background-size: 5px 5px;
    padding-right: 0.25em;
}

/* display depending on level */
div.class1image[data-level="lv1"] div:nth-child(-n+2) {
    display: inline-block;
    margin-left: initial;
}

div.class1image[data-level="lv2"] div:nth-child(-n+4) {
    display: inline-block;
}

div.class1image[data-level="lv3"] div:nth-child(-n+6) {
    display: inline-block;
}

div.class1image[data-level="lv4"] div:nth-child(-n+8) {
    display: inline-block;
}

div.class1image[data-level="lv5"] div:nth-child(-n+10) {
    display: inline-block;
}

div.class1image[data-level="lv6"] div:nth-child(-n+12) {
    display: inline-block;
}

/* color depending on level */
div.class1image div.classified-bar:nth-of-type(1) {
    background-color: var(--woedbar-lvl1-color);
}

div.class1image div.classified-bar:nth-of-type(3) {
    background-color: var(--woedbar-lvl2-color);
}

div.class1image div.classified-bar:nth-of-type(5) {
    background-color: var(--woedbar-lvl3-color);
}

div.class1image div.classified-bar:nth-of-type(7) {
    background-color: var(--woedbar-lvl4-color);
}

div.class1image div.classified-bar:nth-of-type(9) {
    background-color: var(--woedbar-lvl5-color);
}

div.class1image div.classified-bar:nth-of-type(11) {
    background-color: var(--woedbar-lvl6-color);
}

div.classified-bar img.sizing-image {
    width: 100%;
    height: 100%;
    visibility: hidden;
}

div.item1 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: item;
    white-space: nowrap;
    text-align: right;
    display: -ms-grid;
    display: grid;
        grid-template-areas:
    	"." 
    	"itemnum" 
    	"objclass" 
    	".";
    -ms-grid-rows: 
    	auto 
    	min-content 
    	min-content 
    	auto;
    grid-template-rows: 
    	auto 
    	-webkit-min-content 
    	-webkit-min-content 
    	auto;
    grid-template-rows: 
    	auto 
    	min-content 
    	min-content 
    	auto;
}

div.item1 > div {
    color: rgb(var(--swatch-text-general, 12, 12, 12));
    font-family: rift, sans-serif, Arial, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif KR', serif;
    font-size: 2em;
    font-weight: normal;
    text-align: center;
    line-height: 1;
}

.PL div>span {
    font-size: 0.75em;
}

.ES div>span {
    font-size: 0.85em;
}

div.item1 .PL-top {
    font-size: 1rem;
}

div.item1 .PL-btm {
    font-size: 2rem;
}

div.itemnum {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: itemnum;
}

div.itemnum.TH {
    line-height: 1.5;
    margin-top: -0.5em;
}

div.objclass {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    --bar-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
    grid-area: objclass;
    position: relative;
    -webkit-box-flex: 2 !important;
    -webkit-flex-grow: 2 !important;
       -moz-box-flex: 2 !important;
        -ms-flex-positive: 2 !important;
            flex-grow: 2 !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* Bar Styling */
div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='scp-general' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M66.9998779,47.4119873V32.095459C47.1456299,34.559021,31.7750854,51.4788208,31.7750854,72 c0,5.5440063,1.1221924,10.8257446,3.1508179,15.6313477l13.2803345-7.6671753l-3.7330322-6.4658203L72,72L59.5341797,47.4119873 H66.9998779z'/%3E%3Cpath d='M53.2062378,88.6243896l-13.2688599,7.6604614C47.2828369,105.9677124,58.9088745,112.2249756,72,112.2249756 s24.7172241-6.2572021,32.0626831-15.9400635l-13.2688599-7.6606445l-3.7328491,6.4655151L72,72L56.9390259,95.0897827 L53.2062378,88.6243896z'/%3E%3Cpath d='M76.9998779,32.095459v15.3165283h7.4659424L72,72l27.5267944,1.4983521l-3.7330322,6.4657593l13.2803955,7.6672363 c2.0286255-4.805603,3.1508179-10.0873413,3.1508179-15.6313477C112.2249756,51.4787598,96.854248,34.55896,76.9998779,32.095459z' /%3E%3Cpath d='M72,0C32.2355347,0,0,32.2355347,0,72c0,39.7645264,32.2355347,72,72,72c39.7645264,0,72-32.2354736,72-72 C144,32.2355347,111.7645264,0,72,0z M121.6561279,106.4422607l-7.1643677-4.1362305 C105.0106812,115.5609741,89.5029907,124.2249756,72,124.2249756s-33.0106812-8.6640625-42.4917603-21.9190674 l-7.1646118,4.1363525l-5-8.6601562l7.1509399-4.128479C21.4731445,87.0516357,19.7750854,79.7225342,19.7750854,72 c0-27.1099243,20.7654419-49.4542847,47.2247925-51.9801636v-8.2445679h10v8.2445679 C103.4594116,22.5455933,124.2249756,44.8900146,124.2249756,72c0,7.7225342-1.6981201,15.0516968-4.7195435,21.6537476 l7.1506958,4.1283569L121.6561279,106.4422607z'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    background-color: var(--bar-color);
    -webkit-mask-image: var(--mask-url);
            mask-image: var(--mask-url);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    left: 0;
}

div.obj {
    color: rgb(var(--swatch-text-light, 255, 255, 255));
    width: 100%;
    height: 1.5em;
    right: 0;
    -webkit-border-radius: 0.75em;
       -moz-border-radius: 0.75em;
            border-radius: 0.75em;
    line-height: 1;
    background-color: var(--woedbar-class-bar-color);
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    background-position: -0.03em;
    -webkit-mask: -webkit-radial-gradient(0.75em center, circle, transparent 0.85em, #000 -webkit-calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
            mask: radial-gradient(circle at 0.75em center, transparent 0.85em, #000 -moz-calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
            mask: radial-gradient(circle at 0.75em center, transparent 0.85em, #000 calc(0.85em + 1px) 100%) 50% 50%/100% 100% no-repeat;
    position: relative;
}
/* Keter Styling */
div.scale[class*="keter" i] div.objclass {
    --bar-color: var(--woedbar-keter-color);
}

div.scale[class*="keter" i] div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='meter' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M107.15,65.25 l-1.7,0.4l-0.6-2.7C105.75,63.65,106.55,64.45,107.15,65.25z M96.45,29.95l-8.2,1.8l-2.1-9.5C90.75,22.95,94.55,25.85,96.45,29.95z M97.75,36.55v7.1l-13.7,3.1v-6.2c0-0.2,0-0.5-0.1-0.9L97.75,36.55z M83.95,53.75l11.2-2.5l5.1,22.6l10-2.2 c0.6,1.83,0.5,4.95,0.5,6.9l-15.6,3.5l-5.1-22.6l-22.6,5.1l-1.1-5h17.6V53.75z M79.05,22.05l3.5,14.9c-1.65-1.66-5.29-1.13-7.4-1.2 l-2.3-10.1l-22.6,5.1l-0.9-4C54.33,19.34,71.65,22.77,79.05,22.05z M45.95,38.65l21.7-4.8l0.4,1.9c-5.15-0.53-9.13,0.89-8.4,6.9 l-13.7,3.1V38.65z M60.45,115.95l-1.6-7.1l-19.1,4.3c-8.81-5.09-6.06-21.06-6.5-29.4l3.2-0.7l5,22.6l22.6-5.1l3.6,15.4H60.45z M98.35,115.65l-1.3-5.9l-22.6,5.1l-5.1-22.6l-22.6,5.1l-5.1-22.6l-8.4,1.9c-0.09-2.41,0.15-5,1-7.2l12.6-2.8l5.1,22.6l22.4-5.1 l5.1,22.6l22.6-5.1l2.7,11.2C102.85,114.25,100.75,115.25,98.35,115.65z M110.05,105.45l-2.7-11.9l-22.6,5.1l-5.1-22.6l-22.6,5 l-5-22.6l-6.1,1.39c0,0,0,0.01,0,0.01c-0.6,0.1-1.2,0.3-1.8,0.4l1.8-0.41c0-1.7,0-5.36,0-7.09l11.2-2.6l5.1,22.6l22.6-5.1l5.1,22.6 l20.7-4.6h0.1C110.54,89.14,111.34,102.31,110.05,105.45z'/%3E%3C/svg%3E%0A");
}
/* Euclid Styling */
div.scale[class*="euclid" i] div.objclass {
    --bar-color: var(--woedbar-euclid-color);
}

div.scale[class*="euclid" i] div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Euclid' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M97.8,36.17 l-13.7,13.7v-9.5c0,0,0-0.1,0-0.2l11.7-11.7C97.21,30.72,97.89,33.4,97.8,36.17z M84.2,21.87c2.5,0,4.8,0.6,6.8,1.8l-11.9,11.9h-9.7 l13.8-13.7H84.2z M46,39.67l17.8-17.8h9.7L46,49.37V39.67z M33.7,71.37c0.64-0.26,11.37-12.33,12.3-11.7c0-0.13,0-0.56,0-0.7 l13.7-13.7v9.7l-26.4,26.4C33.4,78.99,33,73.64,33.7,71.37z M33.3,91.07l31.6-31.6h9.7l-41.3,41.3C33.3,100.5,33.3,91.35,33.3,91.07 z M35.4,108.27l62.4-62.4v9.7l-57.7,57.7C38.2,111.97,36.6,110.27,35.4,108.27z M47.2,115.77l54.8-54.8c2.1,1,3.8,2.4,5.3,4.1 l-50.8,50.8C55.51,115.87,48,115.92,47.2,115.77z M110.7,100.27l-15.5,15.6h-9.7l25.2-25.3V100.27z M110.7,80.97l-34.8,34.9h-9.7 l44.2-44.2C110.9,73.7,110.64,78.81,110.7,80.97z'/%3E%3C/svg%3E%0A");
}
/* Safe Styling */
div.scale[class*="safe" i] div.objclass {
    --bar-color: var(--woedbar-safe-color);
}

div.scale[class*="safe" i] div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='safe' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M59.36,87.57c0,6.9,5.6,12.4,12.4,12.4c6.8,0,12.4-5.5,12.4-12.4C83.63,71.13,59.89,71.13,59.36,87.57z'/%3E%3Cpath d='M84.06,40.37c0-2.6-2.1-4.8-4.8-4.8h-14.8c-2.6,0-4.8,2.1-4.8,4.8v19h24.4V40.37z'/%3E%3Cpath d='M49.96,87.57c0,12,9.8,21.8,21.8,21.8s21.7-9.8,21.8-21.8C92.31,58.65,51.21,58.65,49.96,87.57z M53.96,87.57 c0-9.8,8-17.8,17.8-17.8c9.8,0,17.8,8,17.8,17.8C88.54,111.18,54.98,111.19,53.96,87.57z'/%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M110.66,100.67 c0,8.4-6.8,15.3-15.3,15.3h-46.8c-8.4,0-15.3-6.8-15.3-15.3v-25.8c0-7.6,5.5-13.9,12.7-15.1c0-0.91,0-22.1,0-24.19 c-0.16-7.07,5.92-13.72,13.47-13.7c0.5-0.03,23.69,0.03,24.62,0c0,0,0.01,0,0.01,0c7.6,0,13.7,6.2,13.7,13.7 c0.01,1.06-0.01,23.81,0,24.1c7.3,1.1,12.9,7.4,12.9,15.1V100.67z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
/* Thaumiel Styling */
div.scale[class*="thaumiel" i] div.objclass {
    --bar-color: var(--woedbar-thaumiel-color);
}

div.scale[class*="thaumiel" i] div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='thaumiel' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M94.29,28.42l1.39-2.22l-2.99-1.64l-1.3,2.26c-9.89-4.58-22.45,2.92-23.07,13.85c-0.89,0.02-2.91,0.06-2.91,0.06l0.07,3.35 c0,0,2.1,0,2.91-0.06c0.31,3.02,1.56,5.89,3.39,8.25c-0.78,2.33,0.5,4.84-0.48,7.08c0,0-26.62,47.91-26.62,47.91 c-2.16,3.93,3.85,7.17,5.97,3.28l1.6-2.9c2.22-3.56,7.79-0.52,5.97,3.28l4.66,2.54l3.28-5.97l-4.66-2.54l2.16-3.85l4.66,2.54 l3.28-5.75l-4.66-2.54c-2.13,3.91-8.12,0.64-5.97-3.28l16.44-29.5c0.3-0.63,0.91-1.23,1.58-1.46c1.55-0.7,2.87-1.62,4.06-2.72 c1.03,0.16,2.15,0.13,3.18,0.07c1.83-0.13,3.74-0.66,5.47-1.5c0.42,0.75,1.48,2.47,1.48,2.47l2.92-1.71c0,0-1.06-1.72-1.48-2.47 C103.64,49.1,103.5,34.31,94.29,28.42z M89.23,30.67l-2.03,3.58l-2.44-1.38l-0.13,8.9l-8.09-3.95l-0.02,1.21 c-0.03,0.54,0.02,1.12-0.02,1.43c-1.03,0.07-2.82,0.1-3.8,0.08C73.73,32.79,81.92,27.72,89.23,30.67z M74.2,48.11 c-0.52-1.16-1.19-2.58-1.38-3.86c-0.05-0.13-0.05-0.13-0.09-0.27c0.86-0.04,2.98-0.08,3.8-0.08l0.05,2.68l8.06-4.15l0.63,8.93 l2.26-1.25c0.23,0.44,1.62,2.87,1.9,3.23C83.94,55.54,77.09,53.32,74.2,48.11z M92.52,51.49c-0.56-0.93-1.48-2.47-1.99-3.27 c0.13-0.05,0.18-0.14,0.31-0.19c0.98-0.61,1.16-0.69,1.9-1.2l-7.7-4.76l7.51-4.85l-2.44-1.38l2.03-3.58 c3.17,2.11,4.86,5.86,4.94,9.65C97.09,45.65,95.36,49.14,92.52,51.49z'/%3E%3Cpath d='M72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72C144,32.24,111.76,0,72,0z M108.06,54.44 c-3.52,7.41-10.21,12.42-17.65,14.09c-1.38,0.34-2.52,1.35-2.94,2.7l-17.95,53.91c-0.76,2.3-3.38,3.38-5.54,2.35l-31.44-14.92 c-2.17-1.03-2.98-3.74-1.68-5.78L61.27,58.8c0.82-1.27,0.84-2.7,0.23-3.99c-3.54-6.99-3.81-15.53,0.02-23.13 C77.74,2.03,121.66,23.47,108.06,54.44z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
/* Neutralized Styling */
div.scale[class*="neutral" i] div.objclass {
    --bar-color: var(--woedbar-neutral-color);
}

div.scale[class*="neutral" i] div.objclass::before {
    --mask-url: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 144 144' overflow='visible' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M119.69,18.08c-3.04,4.05-12.49,8.84-6.75,13.02c3.12-1.1-0.72,8.91,2.1,11.6c3.02,1.92,4.18,10.44,8.4,7 c-0.55,3.16,1.63,3.34-2.1,4.3c0.17,3.82,1.88,13.25,7.7,13.8c-9.63,5.41-14.33,5.63-0.6,8.3c-5.06-0.93-7.14,1.32-7.1,6.3 c6.5,17.24-21.57,4.44-9.5-6.6c-9.52,1.37-14.2,2.24-24.4-0.91c-4.07,2.31-19.63-9.36-10.5,3.8c-12.42-13.47,12.7,22.93,15.4,27.1 c1.28,2.58,8.3-7.46,5.6-8.8c1.86,1.18,12.41,6.56,9,7.3c3.93,6.1,2.86,6.21-4.5,10.7c-7.3,4.42-10.89,7.85-19.8,8.4 c-1.02-0.97-4.29-0.45-2.88,2.6c0.12,0.23,0.24,0.46,0.38,0.7c-0.15-0.25-0.28-0.48-0.38-0.7c-2.42-4.62-1.76-7.42-8.52-4.8 c-10.25-3.49-5.22,4.13-8.5,12.5c-4.22-6.05,2.88-13.15-9.4-13.9c-1.03-2.83-1.12,3.96-2.7,3.5c-3.28-1.68-3.5,1.51-4.7,3.1 c2.64-8.37-10.94-6.21-4.9-16.4c-5.75,3.27-9.74-3.05-4.3-6.2c10.03-12.94,6.98-3.29,10.5,6.2c4.27-4.88,7.8-11.88,10.8-14.9 c26.86-33.76-0.3-15.83-26.6-20.3c8.36,10.52,3.58,9.37-6,15.1c0.8-4.13-3.08-0.03-4-2c-0.47-2.61-3.68,1.24-4.9,0.6 c6.11-1.54,4.64-10.74-1.01-10.46c-0.19,0.02-0.38,0.04-0.59,0.06c0.2-0.03,0.4-0.05,0.59-0.06c8.73-0.96,3.24-5.68,2.91-11.54 c0.91,0.45,2.26,0.78,1.9-0.8c0.26-4.92,10.31,2.47,11.3-2.6c4.12-9.31-6.24-4.87-9-11.2c0.93-3.93-2.83-3.16,3.9-2.9 c2.05-0.96,9.91-2.54,6.2-5.2c21.53,13.72,8.68-3.75-1.8-12.4c-2.43-7.25,4.97,2.06,7,0.6c3.16-9.04,9.14,2.74,15.7,2.1 c-6.58-15.59,3.76-3.17,2.2-19.6c15.09-4.43,8.38,4.21,10.6,19.5c3.01,11.15,0.08-17.71,8.2-15.8c-0.37,3.91,3.28,1.81,4.6,0 c7.51,8.65,15.51-9.38,9.8,3.5c5.25,3.12,6.87,5.85,14-3c-0.7,2.8-7.57,7.28-4.8,9.5c7.64,5.6,9.27-2.05,21.21-10.32 C106.78,6.76,90.19,0,72,0C32.24,0,0,32.24,0,72c0,39.76,32.24,72,72,72c39.76,0,72-32.24,72-72 C144,50.53,134.6,31.27,119.69,18.08z'/%3E%3Cpath d='M51.65,37.4c2.5,6.93,10.35,16.99,11.8,19.1c1.61,7.26,8.56,24.87,11.2,8.3c3.42-0.15,16.36-22.33,14.51-26.1 c-14.9,4.67-8.99-5.42-11.01-18.1c-10.64-1.03-5.94,13.64-10.1,22.5c-2.38,4.74-3.93,12.64-4.4,7.8 C69.14,38.24,63.98,37.07,51.65,37.4z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

div.obj > div {
    display: block;
    width: auto;
    font-size: 1.5em;
    position: relative;
    left: 0.45em;
}
[[/module]]

[[div_ class="scale  [[#if {$lang} | {$lang}-base |  ]] {$oc}"]]
[[div_ class="class1"]]
[[div_ class="level-text"]]
[[span class="base {$trans-level} [[#if {$lang} | {$lang} ]]"]]{$lv}/{$item} [[/span]][[#if {$trans-level} | {$trans-level} | LEVEL ]][[span class="base {$trans-level} [[#if {$lang} | {$lang} ]]"]] {$lv}/{$item}[[/span]]
[[/div]]
[[div_ class="class-text"]]
[[#if {$trans-classified} | {$trans-classified} | CLASSIFIED ]]
[[/div]]
[[/div]]
[[div_  class="class1image" data-level="lv{$lv}"]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[div_ class="image-space"]]
[[/div]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[div_ class="image-space"]]
[[/div]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[div_ class="image-space"]]
[[/div]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[div_ class="image-space"]]
[[/div]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[div_ class="image-space"]]
[[/div]]
[[div_ class="classified-bar"]]
[[image https://scp-wiki.wikidot.com/local--files/component:classified-bar-woed-source/classified-bar.svg class="sizing-image"]]
[[/div]]
[[/div]]
[[div_  class="item1 [[#if {$lang} | {$lang} |  ]]"]]
[[div_ class="itemnum [[#if {$lang} | {$lang} |  ]]"]]
[[#if {$lang} |  | Item #: SCP-{$item} ]]\
[[#if {$langEN} |  | Item #: SCP-{$item} ]]\
[[#if {$langRU} |  | Объект №: SCP-{$item} ]]\
[[#if {$langKO} |  | 일련번호: SCP-{$item} ]]\
[[#if {$langCN} |  | 项目编号：SCP-{$item} ]]\
[[#if {$langFR} |  | Objet n^^o^^ : SCP-{$item} ]]\
[[#if {$langPL} |  | Identyfikator : SCP-{$item} ]]\
[[#if {$langES} |  | Ítem #: SCP-{$item} ]]\
[[#if {$langTH} |  | วัตถุ# SCP-{$item} ]]\
[[#if {$langJP} |  | アイテム番号: SCP-{$item} ]]\
[[#if {$langDE} |  | Objekt-Nr.: SCP-{$item} ]]\
[[#if {$langIT} |  | Elemento #: SCP-{$item} ]]\
[[#if {$langUA} |  | Об'єкт №: SCP-{$item} ]]\
[[#if {$langPTBR} |  | Item nº: SCP-{$item} ]]
[[#if {$langIND} |  | Objek #: SCP-{$item} ]]
[[/div]]
[[div_ class="objclass [[#if {$lang} | {$lang} |  ]]"]]
[[div_ class="obj {$oc}"]]
[[div_ class="obj-text"]]
{$oc}
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

[[iftags [[#if {$langCN} | + | - ]]]]
[[module CSS]]
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,700&display=swap');

/* style for -CN */
div.class1 > div {
    font-family: rift, 'Noto Sans SC', sans-serif;
}
div.item1 > div {
    font-family: rift, 'Noto Sans SC', sans-serif;
}
div.obj > div {
    font-size: 1.3em;
}
[[/module]]
[[/iftags]]