Template:ModuleGenerator/styles.css: Difference between revisions

Template page
(Created page with ".ModuleGenerator-container { position: relative; width: 298px; height: 404px; } .ModuleGenerator-container img { position: absolute; max-width: 100%; max-height: 100%; z-index: 1; } .ModuleGenerator-container span { display: block; } .ModuleGenerator-bg-light2 { opacity: 0.33; } .ModuleGenerator-icon { top: 50px; margin-right: auto; margin-left: auto; left: 0; right: 0; z-index: 2; } .ModuleGenerator-module-class { width: 36px; heig...")
 
No edit summary
 
(64 intermediate revisions by the same user not shown)
Line 5: Line 5:
}
}


.ModuleGenerator-container img {
span a img {
   position: absolute;
   position: absolute;
   max-width: 100%;
   max-width: 100%;
Line 12: Line 12:
}
}


.ModuleGenerator-container span {
p span {
   display: block;
   display: block;
}
}


.ModuleGenerator-bg-light2 {
.ModuleGenerator-bg-light2 a img {
   opacity: 0.33;
   opacity: 0.33;
}
}


.ModuleGenerator-icon {
.ModuleGenerator-icon a img {
   top: 50px;
   top: 50px;
   margin-right: auto;
   margin-right: auto;
Line 26: Line 26:
   left: 0;
   left: 0;
   right: 0;
   right: 0;
   z-index: 2;
   z-index: 10;
}
}


.ModuleGenerator-module-class {
.ModuleGenerator-module-class a img,
   width: 36px;
.ModuleGenerator-module-class-bg a img{
   height: 36px;
   width: 60px;
   top: 8px;
   height: 60px;
   left: 10px;
   top: -10px;
   right: -10px;
}
}


.ModuleGenerator-socket-type {
.ModuleGenerator-module-class a img{
  width: 36px;
z-index: 2;
  height: 36px;
  top: 8px;
  left: 48px;
}
}


.ModuleGenerator-cost-icon {
.ModuleGenerator-socket-type-box a img {
  position: absolute;
width:156px;
   width: 36px;
height: 68px;
   height: 36px;
position: absolute;
   top: 8px;
left: 23.75%;
   right: 36px;
top: -14px;
z-index: 4;
}
.ModuleGenerator-socket-type a img {
   width: 48px;
   height: 48px;
   top: -7px;
  left: 36%;
   z-index: 10;
}
}


.ModuleGenerator-cost {
.ModuleGenerator-cost {
   position: absolute;
   position: absolute;
   top: 4px;
   top: -30px;
   right: 18px;
   right: 32%;
   color: #fff;
   color: #fff;
   font-family: "Teko", sans-serif;
   font-family: "Teko", sans-serif;
   font-size: 36px;
  font-weight: 400;
   z-index: 2;
   font-size: 64px;
   z-index: 5;
  text-align: left;
  width: 48px;
  height: 48px;
}
}


.ModuleGenerator-name {
.ModuleGenerator-name {
   position: absolute;
   position: absolute;
  width: 100%;
   top: 240px;
   top: 240px;
   color: #fff;
   color: #fff;
Line 73: Line 84:
}
}


.ModuleGenerator-rarity-mask {
.ModuleGenerator-rarity a img {
   position: absolute;
   position: absolute;
   left: 25%;
   left: 25%;
Line 81: Line 92:
   margin-left: auto;
   margin-left: auto;
   margin-right: auto;
   margin-right: auto;
   z-index: 2;
   z-index: 20;
}
}


.ModuleGenerator-special-mask {
.ModuleGenerator-special-mask a img {
   position: absolute;
   position: absolute;
   z-index: 3;
   z-index: 3;
}
.ModuleGenerator-notice {
width: 298px;
text-align: center;
font-size: 12px;
}
}

Latest revision as of 07:41, 30 June 2024

.ModuleGenerator-container {
  position: relative;
  width: 298px;
  height: 404px;
}

span a img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

p span {
  display: block;
}

.ModuleGenerator-bg-light2 a img {
  opacity: 0.33;
}

.ModuleGenerator-icon a img {
  top: 50px;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  z-index: 10;
}

.ModuleGenerator-module-class a img,
.ModuleGenerator-module-class-bg a img{
  width: 60px;
  height: 60px;
  top: -10px;
  right: -10px;
}

.ModuleGenerator-module-class a img{
	z-index: 2;
}

.ModuleGenerator-socket-type-box a img {
	width:156px;
	height: 68px;
	position: absolute;
	left: 23.75%;
	top: -14px;
	z-index: 4;
}
.ModuleGenerator-socket-type a img {
  width: 48px;
  height: 48px;
  top: -7px;
  left: 36%;
  z-index: 10;
}

.ModuleGenerator-cost {
  position: absolute;
  top: -30px;
  right: 32%;
  color: #fff;
  font-family: "Teko", sans-serif;
  font-weight: 400;
  font-size: 64px;
  z-index: 5;
  text-align: left;
  width: 48px;
  height: 48px;
}

.ModuleGenerator-name {
  position: absolute;
  width: 100%;
  top: 240px;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  z-index: 2;
}

.ModuleGenerator-rarity a img {
  position: absolute;
  left: 25%;
  top: 50px;
  width: 148px;
  height: 148px;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
}

.ModuleGenerator-special-mask a img {
  position: absolute;
  z-index: 3;
}

.ModuleGenerator-notice {
	width: 298px;
	text-align: center;
	font-size: 12px;
}