MediaWiki:Common.less/templates.less

From Brighter Shores Wiki
Jump to navigation Jump to search
/* ==================
       TEMPLATES
   ==================*/
   
:root {
	--keypress-background: @gallery;
	--keypress-border: @silver;
	--keypress-color: @mineshaft;
}

@variant-common: #46A685;
@variant-uncommon: #3566B7;
@variant-rare: #8A439C;
@variant-epic: #D58635;

// TOC
.toc {
	border: none;
	
	.toctitle {
		border: 1px solid var(--body-darker);
		
		> * {
			color: @white;
			
			.toctogglelabel {
				color: var(--table-header-link);
			}
		}
	}
	
	> ul {
		border: 1px solid var(--wikitable-border);
		border-top: none;
	}
}

// NAVBOX
.navbox {
	.navbox-title {
		color: @white;
		
		a {
			color: var(--table-header-link);
		}
		
		.mw-collapsible-toggle-collapsed,
		.mw-collapsible-toggle-expanded {
			&::before,
			&::after {
				color: white;
			}
		}
	}
}

// Template:Archive list
.archivelist {
	background-color: @infobox-background;
	border: solid 1px @infobox-border-color;
	box-shadow: @box-shadow;
	float: right;
	margin: 5px;
	padding: 5px;
	text-align: center;
	width: 120px;
}

// Template:Shortcut
.shortcut {
	border: 1px solid @infobox-border-color;
	background: @infobox-background;
	float: right;
	font-size: .8em;
	margin: 0.5em 0em 0.5em 1em;
	padding: 0.5em;
	text-align: center;
}

// Hatnotes: [[Module:Hatnote]]
.hatnote,
.seealso {
	font-style: italic;

	i {
		font-style: normal;
	}
}

// two classes - hatnote gets much customisation in minerva but seealso doesnt
div.hatnote,
div.seealso {
	// 0.5em is <p>'s top and bottom margin
	// 1.6em to match <dd>/<ul> indent
	margin: .5em 1.6em;

	& + & {
		margin-top: -0.5em;
	}
}

// Template:Key press
.keypress {
	background: var(--keypress-background);
	color: var(--keypress-color);
	font-family: inherit;
	border: 1px solid var(--keypress-border);
	border-radius: @border-radius;
	font-size: 0.9em;
	margin: 0 0.1em;
	padding: 0.1em 0.4em;
	white-space: nowrap;
}

//Template:Infobox equipment & Template:Infobox weapon
.infobox-equipment,
.infobox-weapon {
  background: var(--body-dark);
  padding: 4px;
  color: var(--body-main);
  border-radius: @infobox-outer-radius;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 2px rgba(0, 0, 0 ,0.1);
  max-width: 150px;
  
  p {
  	margin: 0;
  	font-weight: bold;
  }
  
  &.common {
    background-color: @variant-common;
    .dmg-types-wrapper {
    	background-color: desaturate(darken(@variant-common, 30%), 20%);
    }
  }
  &.uncommon {
    background-color: @variant-uncommon;
    .dmg-types-wrapper {
    	background-color: desaturate(darken(@variant-uncommon, 30%), 20%);
    }
  }
  &.rare {
    background-color: @variant-rare;
    .dmg-types-wrapper {
    	background-color: desaturate(darken(@variant-rare, 30%), 20%);
    }
  }
  &.epic {
    background-color: @variant-epic;
    .dmg-types-wrapper {
    	background-color: desaturate(darken(@variant-epic, 30%), 20%);
    }
  }

  .rarity-wrapper {
    text-align: center;
    padding-bottom: 4px;
  }

  .dmg-types-wrapper {
    display: flex;
    flex-flow: column;
    grid-gap: 4px;
    background-color: var(--body-darker);
    border-radius: 1.2em;
    padding: 5px 0;
    box-shadow: @infobox-card-shadow;
    overflow: hidden;
    
    .dmg-type-row {
      display: flex;
      flex-flow: row;
      grid-gap: 4px;
      align-items: center;
      
      p {
        text-align: center;
        width: calc(150px - 60px - 4px - 5px);
      }
      
      .dmg-type-cell {
        display: flex;
        justify-content: flex-end;
        width: 60px;
        border-radius: 0 @infobox-inner-radius @infobox-inner-radius 0;
        box-shadow: inset 5px 0 5px -5px rgba(0, 0, 0, 0.6);
        min-height: 29px;
        background-color: rgba(255, 255, 255, 0.1);
        
        /* equipment */
        &.impact {
          background-color: #fff;
        }
        &.cryonae {
          background-color: @mantuban;
        }
        &.arborae {
          background-color: @hopeforest;
        }
        &.tempestae {
          background-color: @hopeport;
        }
        &.infernae {
          background-color: #DC7E31;
        }
        &.necromae {
          background-color: #0A0A0A;
        }
        /* weapon */
    	&.damage {
          background-color: #fff;
        }
        &.element {
          background-color: #0A0A0A;
        }
        &.range {
          background-color: #8C8AC2;
        }
        &.one-hand {
          background-color: #778B56;
        }
        &.two-hand {
          background-color: #B7DB27;
        }
        
        img {
          height: 25px;
          width: auto;
          padding: 2px;
        }
      }
    }
  }
}