User:Wakeup720/shared/styles.css: Difference between revisions

From Dustloop Wiki
No edit summary
Tag: Reverted
(Undo revision 398510 by Wakeup720 (talk))
Tag: Undo
Line 545: Line 545:
}
}
.character-links-container > div {
.character-links-container > div {
     flex: 1 1 60px;
     flex: 1 1 80px;
}
}

Revision as of 23:15, 25 May 2023

.SinnerSelect {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.SinnerSelect img {
  width: 100%;
  height: auto;
}
@media (min-width: 1000px) {
  .SinnerSelect {
    grid-template-areas:
      ". . . . . ."
      ". . . . . .";
  }
}
@media (min-width: 551px) and (max-width: 999px) {
  .SinnerSelect {
    grid-template-areas:
      ". . . ."
      ". . . ."
      ". . . .";
  }
}
@media (max-width: 550px) {
  .SinnerSelect {
    grid-template-areas:
      ". ."
      ". ."
      ". ."
      ". ."
      ". .";
  }
}

.CoinCounter {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content;
  gap: 0.25em;
  grid-auto-flow: row;
  grid-template-areas:
    ". .";
  margin-top: 12px;
}
.CoinIndicator img { transform: translateY(-0.09em); }

.TranslateImageDown img { transform: translateY(0.1em); }

.Wrath-Affinity    { background-color: rgba(137,49,38,0.45);   }
.Lust-Affinity     { background-color: rgba(178,98,46,0.45);   }
.Sloth-Affinity    { background-color: rgba(227,136,0,0.45);   }
.Gluttony-Affinity { background-color: rgba(96,130,41,0.45);   }
.Gloom-Affinity    { background-color: rgba(49,101,112,0.45);  }
.Pride-Affinity    { background-color: rgba(24,81,134,0.45);   }
.Envy-Affinity     { background-color: rgba(126,78,148,0.45);  }
.None-Affinity     { background-color: var(--color-surface-3); }

.SkillContainer .Wrath-Affinity, .SkillContainer .Lust-Affinity, 
.SkillContainer .Sloth-Affinity, .SkillContainer .Gluttony-Affinity, 
.SkillContainer .Gloom-Affinity, .SkillContainer .Pride-Affinity, 
.SkillContainer .Envy-Affinity, .SkillContainer .None-Affinity,
.PassiveCard .Wrath-Affinity, .PassiveCard .Lust-Affinity, 
.PassiveCard .Sloth-Affinity, .PassiveCard .Gluttony-Affinity, 
.PassiveCard .Gloom-Affinity, .PassiveCard .Pride-Affinity, 
.PassiveCard .Envy-Affinity, .PassiveCard .None-Affinity {
  border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0;
}

.AutoGrid {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.BoldAndCenter {
	text-align: center;
    font-weight: 600;
}

.AutoGrid {
 	margin-right: 0.25em;
}

.StandardLabel {
  font-size: 0.875em;
  font-weight: 600;
}

.Emphasize {
  color: var(--color-base--emphasized);
}
.De-emphasize {
  color: var(--color-base--subtle);
}

.AffinityLabel img {
  position: relative;
  top: -0.2em;
}

.CharacterParentContainer { width: 100%; }

.PassivesContainer {
  display: grid;
  grid-area: PassivesContainer;
  gap: 1em 0;
  grid-template-areas: ".";
}
.EgoPassivesContainer {
  display: grid;
  grid-area: PassivesContainer;
  grid-auto-rows: 1fr;
  gap: 1em 0;
  grid-template-areas: ".";
}
.IdentityInfoContainer { grid-area: IdentityInfoContainer; }
.SkillsContainer { 
  display: grid;
  gap: 1em;
  grid-area: SkillsContainer;
  grid-template-areas: ".";
  }
.PassiveCard {
  width: 100%;
  background-color: var(--color-surface-2);
  box-shadow: var(--card-shadow-dlw);
  border-radius: var(--border-radius--medium);
}
.PassiveClassifier {
  padding: 12px;
  line-height: 1em;
}
.PassiveEffects {
  font-size: 1em;
  padding: 12px;
  max-width: 65ch;
  margin: 0 auto;
}
.PassiveCost {
  padding: 4px 12px 0 12px;
  border-bottom: 1px solid var(--border-color-base);
}
.PassiveCost img {
  position: relative;
  top: -5px;
}
.StatusLabelContainer {
  white-space: nowrap;
}
.StatusLabelContainer img {
  position: relative;
  top: -0.25em;
}
.StatusLabel { 
  font-weight: 500 !important;
  text-decoration-line: underline;
}
.Debuff { 
  color: var(--LCB-Color-Debuff);
  text-decoration-color: var(--LCB-Color-Debuff);
}
.Buff { 
  color: var(--LCB-Color-Buff);
  text-decoration-color: var(--LCB-Color-Buff);
}
.Resource { 
  color: var(--LCB-Color-Resource);
  text-decoration-color: var(--LCB-Color-Resource);
}

.IdentityList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.IdentityContainer {
    display: grid;
    width: 235px;
    border-radius: var(--border-radius--large);
    overflow: hidden;
    transition: all .2s;
    box-shadow: var(--shadow-2);
}

.IdentityContainer:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-3);
}

.IdentityImage, .IdentityContent {
    grid-column: 1;
    grid-row: 1;
}
.IdentityImage img {
  width: 100%;
  height: auto;
}

.IdentityContent {
  display: grid;
  grid-template-areas:
    "Rarity"
    "Name";
  padding: 12px;
  background: linear-gradient(to top,rgba(0,0,0,0.66) 30%,rgba(0,0,0,0) 50%);
}

.IdentityName {
  grid-area: Name;
  font-weight: bolder;
  font-size: 26px;
  line-height: 1.05em;
  color: #fcc700;
  place-self: end;
  text-align: right;
}
.IdentityRarity { grid-area: Rarity; }

/* This is a janky ass way to turn the card into a clickable link
   it works by overlaying an invisible link element across the entire
   size of the card.
   The size of the link is hard coded, so please update the sizes here
   if you re-size the card's image.
*/
.IdentityLink {
    position: absolute;
    width: 235px;
    height: 362px;
}
.IdentityLink a {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.IdentityInfoBox { 
	display: grid;
	height: 100%;
}

.IdentityInfoBox, .EgoInfoBox, .IdentityInfoBoxStatBlock {
  background-color: var(--color-surface-2);
  box-shadow: var(--card-shadow-dlw);
  border-radius: var(--border-radius--medium);
  padding: 12px 0;
}

.IdentityInfoBox .InfoBoxArt img, .EgoInfoBox .InfoBoxArt img {
  width: 100%;
  height: auto;
  grid-area: InfoBoxArt;
}

.IdentityNamePlate {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1em;
  text-align: right;
  padding: 0 12px;
  
  display: grid;
  grid-area: IdentityNamePlate;
  grid-template-columns: min-content 1fr;
  grid-template-areas:
    "Rarity Name";
}

.IdentityGrowthLabel {
  text-align: right;
  padding: 0 12px;
  line-height: 1;
}

.IdentityInfoBoxRarity { grid-area: Rarity; }
.IdentityInfoBoxName   { grid-area: Name;   }

.IdentityStatLabel {
  padding: 0 12px;
  color: var(--color-base--subtle);
  font-size: 0.875em;
  font-weight: 600;
  align-self:end;
  border-bottom: 1px solid var(--border-color-base);
}

.SkillContainer {
  background-color: var(--color-surface-2);
  box-shadow: var(--card-shadow-dlw);
  border-radius: var(--border-radius--medium);
  display: grid;
  grid-template-areas: ".";
}

.IdentityStatContainer {
	grid-area: IdentityStatContainer;
}

.IDCoreStats {
	display: grid;
}

/* ------ Media Queries ------ */
/* desktop view */
@media (min-width: 551px) {
  .CharacterParentContainer {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content 1fr;
    gap: 1em;
    justify-content: center;
    grid-template-areas:
      "IdentityInfoContainer SkillsContainer"
      "IdentityStatContainer SkillsContainer"
      "PassivesContainer SkillsContainer";
  }
  
  .EgoParentContainer {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content;
    gap: 0px 2em;
    justify-content: center;
    grid-template-areas:
      "IdentityInfoContainer PassivesContainer"
      "SkillsContainer SkillsContainer";
  }
  
  .InfoBoxArt { width: 450px; }
  
  .IdentityInfoBoxStatBlock {
  	display: grid;
  	height: 100%;
  }
  
  .IDCoreStats {
  	height: 100%;
  }
  
  .IdentityInfoBox {
  	padding: 12px 0 0 0 ;
	grid-template-columns: min-content;
    grid-auto-rows: min-content;
    grid-template-areas:
    	"IdentityNamePlate"
    	"InfoBoxArt"
    	"IdentityInfoBoxStatBlock";
  }
  
  .EgoInfoBox {
    width: 500px;
  }
  
  .IdentityStatLabel {
  	padding: 0 8%;
  }
  
  .SkillDataGrid {
  	height: 100%;
  	grid-auto-columns: 1fr;
  	grid-auto-rows: min-content 1fr;
  	padding: 0.5em 0;
    grid-template-areas:
      "BasePowerLabel CoinModLabel CoinsLabel"
      "BasePowerValue CoinModValue CoinsValue"
      "DamageTypeLabel OffenseLabel GrowthLabel"
      "DamageTypeValue OffenseValue GrowthValue";
  }
  
  .SkillIcon {
    display: flex;
    align-items: center;
    border-radius: 0 0 0 var(--border-radius--medium);
    overflow: hidden;
  }
  .SkillContainer {
    grid-template-columns: min-content 0.5fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "SkillName SkillName SkillName"
      "SkillIcon SkillData SkillEffect";
  }
  .SkillEffect {
  	width: 100%;
  	padding: 0.5em;
  	border-radius: var(--border-radius--medium);
  }
}
/* Mobile View */
@media (max-width: 550px) {
  .CharacterParentContainer {
    display: grid;
    grid-auto-rows: min-content;
    gap: 1em;
    justify-content: center;
    grid-template-areas:
      "IdentityInfoContainer"
      "IdentityStatContainer"
      "PassivesContainer"
      "SkillsContainer";
  }
  
  .EgoParentContainer {
    display: grid;
    grid-auto-rows: min-content;
    gap: 1em;
    justify-content: center;
    grid-template-areas:
      "IdentityInfoContainer"
      "PassivesContainer"
      "SkillsContainer";
  }
  
  .IdentityInfoBox {
  	width: 100%;
	grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    grid-template-areas:
    	"IdentityNamePlate"
    	"InfoBoxArt"
    	"IdentityInfoBoxStatBlock";
  }
  
  .EgoInfoBox {  width: 100%;}
  
  .SkillContainer {
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr min-content;
    grid-template-areas:
      "SkillName"
      "SkillIcon"
      "SkillData"
      "SkillEffect";
  }
  
  .SkillEffect { 
  	margin: 0 auto 1.2em;
	padding: 0 1.6em;
  }
  
  .SkillDataGrid {
    margin-top: 6px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-areas:
      "BasePowerLabel DamageTypeLabel CoinModLabel"
      "BasePowerValue DamageTypeValue CoinModValue"
      "CoinsLabel OffenseLabel GrowthLabel"
      "CoinsValue OffenseValue GrowthValue";
  }
}
/* adjust ID/EGO navigation for mobile phones */
@media (max-width: 525px) {
  .IdentityContainer { width: 185px; }
  .IdentityLink      { width: 185px; }
  .IdentityName      { font-size: 24px; }
}

.SkillName {
  grid-area: SkillName;
  text-align: center;
  font-weight: bolder;
  padding: 3px 0;
}
.SkillIcon {
  grid-area: SkillIcon;
  background-color: black;
  text-align: center;
}
.SkillData { grid-area: SkillData; background-color: var(--color-surface-2);}
.SkillEffect {
    grid-area: SkillEffect;
    background-color: var(--color-surface-2);
    max-width: 65ch;
    font-size: 1em;
}

.SkillDataGrid {
  text-align: center;
  display: grid;
}
.SkillDataGridValue {
  font-size: 1em;
  font-weight: 600;
}
.BasePowerLabel  { grid-area: BasePowerLabel; }
.CoinModLabel    { grid-area: CoinModLabel; }
.CoinsLabel      { grid-area: CoinsLabel; }
.DamageTypeLabel { grid-area: DamageTypeLabel; }
.BasePowerValue  { grid-area: BasePowerValue; }
.CoinModValue    { grid-area: CoinModValue; }
.CoinsValue      { grid-area: CoinsValue; }
.DamageTypeValue { grid-area: DamageTypeValue; }


/* this is a janky workaround :) */
.ExpandCargoTableWidth .dataTables_wrapper { width: 100%; }
.PreventWrapInFirst2Cols td:nth-child(1),
.PreventWrapInFirst2Cols td:nth-child(2) {
	white-space: nowrap;
}



.home-link__button {
	display: flex;
	min-width: 20%;
}

.home-link__button a {
	flex-grow: 1;
	padding: 0.3rem 0.6rem;
	background: var( --color-surface-2 );
	border-radius: var(--border-radius--medium);
	color: var( --color-base--emphasized );
	box-shadow: var(--shadow-1);
}

.home-link__button a:hover {
	background: var( --color-surface-2--hover );
	box-shadow: var(--shadow-3);
	transform: scale(1.02);
}

.home-link__button a:active {
	background: var( --color-surface-2--active );
}

.character-links-container {
    display: flex;
    width: auto;
    gap: 0.5em;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
}
.character-links-container > div {
    flex: 1 1 80px;	
}