ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icon changes

Browse Source
This commit is contained in:
ntr 2019-06-09 16:33:47 +10:00
parent cb1cdc362f
commit 240d05206a
9 changed files with 114 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/assets/styles/instance.css
View File

@ -312,20 +312,6 @@
border: 2px solid #222;
}
.equip .highlight {
animation: equip-bg 1s infinite ease-in-out alternate;
}
@keyframes equip-bg {
0% {
background-color: black;
}
100% {
background-color: #181818;
}
}
.equip .skills button {
color: whitesmoke;
font-size: 1em;
@ -347,7 +333,7 @@
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 1s infinite linear alternate;
animation: equipping-skill 2s infinite ease alternate;
opacity: 0;
}
@ -360,7 +346,7 @@
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 1s infinite linear alternate;
animation: equipping-skill 2s infinite ease alternate;
opacity: 0;
animation-delay: 0.75s
}

2
client/assets/styles/styles.css
View File

@ -494,7 +494,7 @@ figure.gray {
.stats svg, .specs svg {
height: 2em;
stroke-width: 5px;
stroke-width: 7px;
fill: none;
}

4
client/assets/styles/styles.mobile.css
View File

@ -1,7 +1,7 @@
@media (max-width: 800px) {
#mnml {
font-size: 10pt;
padding: 0;
padding: 1em 0 0 0;
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content;
grid-template-areas:
@ -26,7 +26,7 @@
}
#mnml.nav-visible nav {
padding-left: 0;
padding: 0.5em;
margin: 0;
display: block;
grid-area: main;

24
client/src/components/svgs/circle.jsx
View File

@ -4,11 +4,9 @@ module.exports = function circle(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 198.13 199.94" >
<ellipse class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
<ellipse class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
<ellipse class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
<ellipse class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
</svg>
);
}
@ -22,17 +20,13 @@ module.exports = function circle(colours) {
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
<ellipse clip-path="url(#secondColour)" class={colours[1]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
<ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
<ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
<ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
</svg>
);
};

14
client/src/components/svgs/diamond.jsx
View File

@ -2,15 +2,11 @@ const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" class={classes} >
<g>
<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 "/>
<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 "/>
<polygon class="st0" points="42.26,102.72 101.23,42.88 160.19,102.72 101.23,162.55 "/>
<polygon class="st0" points="62.6,102.72 101.23,63.52 139.86,102.72 101.23,141.91 "/>
<polygon class="st0" points="82.94,102.72 101.23,84.16 119.52,102.72 101.23,121.27 "/>
</g>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
<rect x="10" y="10" width="180" height="180"/>
<rect x="40" y="40" width="120" height="120"/>
<rect x="70" y="70" width="60" height="60"/>
</svg>
);
};

28
client/src/components/svgs/square.jsx
View File

@ -4,19 +4,17 @@ module.exports = function square(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" >
<rect x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
viewBox="0 0 200 200" >
<rect x="10" y="10" class={colours[0]} width="180" height="180"/>
<rect x="40" y="40" class={colours[0]} width="120" height="120"/>
<rect x="70" y="70" class={colours[0]} width="60" height="60"/>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" >
viewBox="0 0 200 200" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
@ -24,17 +22,13 @@ module.exports = function square(colours) {
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
<rect clip-path="url(#firstColour)" x="10" y="10" class={colours[0]} width="180" height="180"/>
<rect clip-path="url(#firstColour)" x="40" y="40" class={colours[0]} width="120" height="120"/>
<rect clip-path="url(#firstColour)" x="70" y="70" class={colours[0]} width="60" height="60"/>
<rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
<rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
<rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
<rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
<rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
<rect clip-path="url(#secondColour)" x="10" y="10" class={colours[0]} width="180" height="180"/>
<rect clip-path="url(#secondColour)" x="40" y="40" class={colours[0]} width="120" height="120"/>
<rect clip-path="url(#secondColour)" x="70" y="70" class={colours[0]} width="60" height="60"/>
</svg>
);
}

21
client/src/components/svgs/triangle.jsx
View File

@ -3,12 +3,11 @@ const preact = require('preact');
module.exports = function triangle(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
<polygon class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 200 200" >
<rect x="10" y="10" class={colours[0]} width="180" height="180"/>
<rect x="40" y="40" class={colours[0]} width="120" height="120"/>
<rect x="70" y="70" class={colours[0]} width="60" height="60"/>
</svg>
);
}
@ -22,11 +21,11 @@ module.exports = function triangle(colours) {
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>

38
client/src/components/svgs/trippy.square.jsx Normal file
View File

@ -0,0 +1,38 @@
const preact = require('preact');
module.exports = function square(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" >
<rect x="10" y="10" class={colours[0]} width="180" height="180"/>
<rect x="70" y="70" class={colours[0]} width="120" height="120"/>
<rect x="130" y="130" class={colours[0]} width="60" height="60"/>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
<clipPath id="secondColour">
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
<rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
<rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
<rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
<rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
<rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
</svg>
);
}

36
client/src/components/svgs/trippy.triangle.jsx Normal file
View File

@ -0,0 +1,36 @@
const preact = require('preact');
module.exports = function triangle(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" >
<polygon class={colours[0]} points="10,190 100,10 190,190"/>
<polygon class={colours[0]} points="40,160 100,10 190,190"/>
<polygon class={colours[0]} points="70,130 100,10 190,190"/>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
<clipPath id="secondColour">
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
</svg>
);
};