cha0s/humus-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: borders

Browse Source
This commit is contained in:
cha0s 2019-04-29 16:30:13 -05:00
parent 8685c864e5
commit f99d94ba83
3 changed files with 17 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/ui/menu/hotbar.js
View File

@ -25,38 +25,15 @@ const decorate = compose(
text-shadow: 0.25px 0.25px 0 black;
font-family: monospace;
position: absolute;
top: -0.5px;
left: 0.5px;
font-size: 3px;
top: -1.5px;
left: -1px;
font-size: 4px;
line-height: 4px;
}
.hotbar .item-slot.active {
box-shadow:
-.5px -.5px 0 rgba(0, 0, 0, 1),
.5px .5px 0 rgba(0, 0, 0, 1),
-.5px .5px 0 rgba(0, 0, 0, 1),
.5px -.5px 0 rgba(0, 0, 0, 1),
inset -.5px -.5px 0 rgba(255, 255, 0, 1),
inset .5px .5px 0 rgba(255, 255, 0, 1),
inset -.5px .5px 0 rgba(255, 255, 0, 1),
inset .5px -.5px 0 rgba(255, 255, 0, 1)
;
.hotbar .item-slot.active .item-slot-inner {
border: 1px solid rgba(255, 255, 0, 1);
}
.hotbar .item-slot.active:hover {
box-shadow:
-.5px -.5px 0 rgba(0, 0, 0, 1),
.5px .5px 0 rgba(0, 0, 0, 1),
-.5px .5px 0 rgba(0, 0, 0, 1),
.5px -.5px 0 rgba(0, 0, 0, 1),
-.5px -.5px 3px rgba(255, 255, 255, 1),
.5px .5px 3px rgba(255, 255, 255, 1),
-.5px .5px 3px rgba(255, 255, 255, 1),
.5px -.5px 3px rgba(255, 255, 255, 1),
inset -.5px -.5px 0 rgba(255, 255, 0, 1),
inset .5px .5px 0 rgba(255, 255, 0, 1),
inset -.5px .5px 0 rgba(255, 255, 0, 1),
inset .5px -.5px 0 rgba(255, 255, 0, 1)
;
transition: none;
}
`),
@ -65,7 +42,7 @@ const decorate = compose(
const HotbarComponent = ({damageProton}) => {
const [active, setActive] = useState(0);
const hotkeyForSlot = (index) => {
return index;
return (index + 1) % 10;
}
const slots = [];
for (let i = 0; i < 10; ++i) {

25
client/ui/menu/item-slot.js
View File

@ -11,12 +11,7 @@ const decorate = compose(
position: relative;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
-.5px -.5px 0 rgba(0, 0, 0, 1),
.5px .5px 0 rgba(0, 0, 0, 1),
-.5px .5px 0 rgba(0, 0, 0, 1),
.5px -.5px 0 rgba(0, 0, 0, 1)
;
border: 1px solid rgba(0, 0, 0, 1);
box-sizing: border-box;
display: inline-block;
width: 16px;
@ -27,15 +22,15 @@ const decorate = compose(
}
.item-slot:hover {
box-shadow:
-.5px -.5px 0 rgba(0, 0, 0, 1),
.5px .5px 0 rgba(0, 0, 0, 1),
-.5px .5px 0 rgba(0, 0, 0, 1),
.5px -.5px 0 rgba(0, 0, 0, 1),
-.5px -.5px 3px rgba(255, 255, 255, 1),
.5px .5px 3px rgba(255, 255, 255, 1),
-.5px .5px 3px rgba(255, 255, 255, 1),
.5px -.5px 3px rgba(255, 255, 255, 1)
-.5px -.5px 1px rgba(255, 255, 255, 1),
.5px .5px 1px rgba(255, 255, 255, 1),
-.5px .5px 1px rgba(255, 255, 255, 1),
.5px -.5px 1px rgba(255, 255, 255, 1)
;
}
.item-slot-inner {
width: 100%;
height: 100%;
}
`),
);
@ -49,7 +44,7 @@ const ItemSlotComponent = (props) => {
'unselectable',
className,
)}
>{children}</div>;
><div className="item-slot-inner">{children}</div></div>;
}
export default decorate(ItemSlotComponent);

7
client/ui/menu/quick-status.js
View File

@ -23,12 +23,7 @@ const decorate = compose(
.status .health {
}
.status .health-inner {
box-shadow:
-.5px -.5px 0 rgba(0, 0, 0, 1),
.5px .5px 0 rgba(0, 0, 0, 1),
-.5px .5px 0 rgba(0, 0, 0, 1),
.5px -.5px 0 rgba(0, 0, 0, 1)
;
border: 1px solid rgba(0, 0, 0, 1);
display: inline-block;
padding: 1px 3px;
line-height: 6px;