mirror of
https://github.com/seigler/bl3skills.com
synced 2025-07-27 01:36:12 +00:00
css fixes after merging 4th tree PR
This commit is contained in:
parent
9a78d65357
commit
66b0bd0877
3 changed files with 6 additions and 5 deletions
|
@ -86,7 +86,6 @@
|
||||||
|
|
||||||
.augment {
|
.augment {
|
||||||
background-color: var(--themeColor);
|
background-color: var(--themeColor);
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.augment:first-child {
|
.augment:first-child {
|
||||||
|
@ -169,7 +168,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
transform: translateX(calc((1 - var(--treeindex)) * 40%));
|
transform: translateX(calc((0.5 - var(--treeindex) / 3) * 80%));
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSkill:hover .description {
|
.actionSkill:hover .description {
|
||||||
|
|
|
@ -60,8 +60,10 @@ export default class VaultHunter extends Component {
|
||||||
const trees =
|
const trees =
|
||||||
Object.keys(this.state.skills).map((treeName, treeIndex) => {
|
Object.keys(this.state.skills).map((treeName, treeIndex) => {
|
||||||
return (
|
return (
|
||||||
<div class={`${style.tree} ${[style.green, style.blue, style.red, style.purple][treeIndex]}`}>
|
<div
|
||||||
<style>{`.${style.tree}:nth-child(${treeIndex + 1}) { --invested: ${this.state.invested[treeIndex]}; --treeindex: ${treeIndex};}`}</style>
|
class={`${style.tree} ${[style.green, style.blue, style.red, style.purple][treeIndex]}`}
|
||||||
|
style={`--invested: ${this.state.invested[treeIndex]}; --treeindex: ${treeIndex};`}
|
||||||
|
>
|
||||||
<h2 class={style.treeName}>{ treeName }</h2>
|
<h2 class={style.treeName}>{ treeName }</h2>
|
||||||
<div class={style.skills}>
|
<div class={style.skills}>
|
||||||
{ Object.keys(this.state.skills[treeName]).map((tier, tierIndex) =>
|
{ Object.keys(this.state.skills[treeName]).map((tier, tierIndex) =>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
--transition-duration: 300ms;
|
--transition-duration: 300ms;
|
||||||
--font-header: sans-serif;
|
--font-header: sans-serif;
|
||||||
--font-list: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
--font-list: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||||
font-size: 1.5vw;
|
font-size: 1.3vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 189vh) {
|
@media screen and (min-width: 189vh) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue