1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00

added image wires

This commit is contained in:
muerwre 2019-04-04 20:30:00 +07:00
parent fd4b01e8c7
commit e928d1bef9
4 changed files with 421 additions and 21 deletions

51
package-lock.json generated
View file

@ -7885,7 +7885,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -7906,12 +7907,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -7926,17 +7929,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -8053,7 +8059,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -8065,6 +8072,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -8079,6 +8087,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -8086,12 +8095,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -8110,6 +8121,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -8190,7 +8202,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -8202,6 +8215,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -8287,7 +8301,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -8323,6 +8338,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -8342,6 +8358,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -8385,12 +8402,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -9984,6 +10003,7 @@
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
"optional": true,
"requires": {
"hoek": "2.x.x"
}
@ -10039,7 +10059,8 @@
"hoek": {
"version": "2.16.3",
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
"optional": true
},
"http-signature": {
"version": "1.1.1",
@ -13459,11 +13480,7 @@
"dependencies": {
"imagesloaded": {
"version": "git+https://github.com/eiriklv/imagesloaded.git#04535a148206e58790927e133f24ca199163b995",
"from": "git+https://github.com/eiriklv/imagesloaded.git",
"requires": {
"eventie": ">=1.0.4 <2",
"wolfy87-eventemitter": "4.x"
}
"from": "git+https://github.com/eiriklv/imagesloaded.git"
}
}
},

View file

@ -10,14 +10,15 @@
.area_left {
grid-column-end: span 3;
background: $content_bg_color;
//background: $content_bg_color;
padding: $spc;
border-radius: $panel_radius 0 0 $panel_radius;
display: flex;
align-items: center;
justify-content: center;
@include outer_shadow();
background: url('../../../sprites/splotchy.svg');
background-size: cover;
//@include outer_shadow();
}
.area_right {

View file

@ -25,6 +25,7 @@
display: flex;
align-items: stretch;
justify-content: stretch;
background: rgba(0,0,0,0.1);
box-shadow: inset rgba(0,0,0,0.3) 0 0 0 1px;
//@include outer_shadow();
}

View file

@ -0,0 +1,381 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="image-concept.svg">
<defs
id="defs2">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath14693">
<rect
style="opacity:0.38600003;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.23333311;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect14695"
width="197.64368"
height="134.9375"
x="-114.03542"
y="122.11041" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath14693-3">
<rect
style="opacity:0.38600003;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.23333311;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect14695-6"
width="197.64368"
height="134.9375"
x="-114.03542"
y="122.11041" />
</clipPath>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#121212"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="530.00621"
inkscape:cy="799.45724"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1869"
inkscape:window-height="1025"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:snap-global="false" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:1;fill:#0c0c0c;fill-opacity:1;stroke:none;stroke-width:0.26458333;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.45142856"
id="rect15878"
width="172.57042"
height="105.30417"
x="239.41689"
y="21.833326" />
<rect
y="118.9354"
x="23.147816"
height="121.44375"
width="169.07521"
id="rect15705"
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#2c2c2c;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15760"
width="169.07521"
height="19.314583"
x="23.147816"
y="119.99374" />
<rect
style="opacity:1;fill:#216778;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15703"
width="172.25021"
height="105.30417"
x="21.560316"
y="21.304159" />
<rect
y="142.21878"
x="26.193745"
height="13.867928"
width="121.84222"
id="rect15732"
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15734"
width="121.84222"
height="13.867928"
x="26.193745"
y="158.7325" />
<rect
y="175.13667"
x="26.193745"
height="22.286917"
width="121.84222"
id="rect15736"
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15738"
width="121.84222"
height="15.40775"
x="26.193745"
y="199.5403" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15740"
width="10.046937"
height="10.046937"
x="26.193745"
y="142.21878" />
<rect
y="158.7325"
x="26.193745"
height="10.046937"
width="10.046937"
id="rect15742"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15744"
width="10.046937"
height="10.046937"
x="26.193745"
y="175.13667" />
<rect
y="199.5403"
x="26.193745"
height="10.046937"
width="10.046937"
id="rect15746"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15748"
width="18.427774"
height="18.217129"
x="150.85287"
y="142.46732" />
<rect
y="142.46732"
x="170.74153"
height="18.217129"
width="18.427774"
id="rect15750"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="162.08392"
x="150.85287"
height="18.217129"
width="18.427774"
id="rect15752"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15754"
width="18.427774"
height="18.217129"
x="170.74153"
y="162.08392" />
<rect
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15756"
width="48.923683"
height="4.5005035"
x="25.751286"
y="129.05582" />
<rect
y="134.8131"
x="25.751286"
height="1.9426926"
width="19.550762"
id="rect15758"
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15834"
width="169.07521"
height="112.7125"
x="241.16449"
y="127.66665" />
<rect
y="126.60832"
x="241.16449"
height="12.7"
width="169.07521"
id="rect15838"
style="opacity:1;fill:#2c2c2c;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="21.304159"
x="286.93741"
height="105.30417"
width="77.529381"
id="rect15840"
style="opacity:1;fill:#216778;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15842"
width="121.84222"
height="13.867928"
x="244.21042"
y="142.21878" />
<rect
y="158.7325"
x="244.21042"
height="13.867928"
width="121.84222"
id="rect15844"
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15846"
width="121.84222"
height="22.286917"
x="244.21042"
y="175.13667" />
<rect
y="199.5403"
x="244.21042"
height="15.40775"
width="121.84222"
id="rect15848"
style="opacity:1;fill:#232323;fill-opacity:1;stroke:none;stroke-width:0.26458326;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="142.21878"
x="244.21042"
height="10.046937"
width="10.046937"
id="rect15850"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15852"
width="10.046937"
height="10.046937"
x="244.21042"
y="158.7325" />
<rect
y="175.13667"
x="244.21042"
height="10.046937"
width="10.046937"
id="rect15854"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15856"
width="10.046937"
height="10.046937"
x="244.21042"
y="199.5403" />
<rect
y="142.46732"
x="368.86954"
height="18.217129"
width="18.427774"
id="rect15858"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15860"
width="18.427774"
height="18.217129"
x="388.75821"
y="142.46732" />
<rect
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15862"
width="18.427774"
height="18.217129"
x="368.86954"
y="162.08392" />
<rect
y="162.08392"
x="388.75821"
height="18.217129"
width="18.427774"
id="rect15864"
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="129.05582"
x="243.76796"
height="4.5005035"
width="48.923683"
id="rect15866"
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect15868"
width="19.550762"
height="1.9426926"
x="243.76796"
y="134.8131" />
<g
style="fill:#999999;stroke-width:1.19999993"
transform="matrix(0.22048611,0,0,0.22048611,400.42029,130.40328)"
id="g15874">
<path
style="opacity:0;fill:#999999;stroke-width:1.19999993"
inkscape:connector-curvature="0"
d="M 0,0 H 24 V 24 H 0 Z"
id="path15870" />
<path
style="fill:#999999;stroke-width:1.19999993"
inkscape:connector-curvature="0"
d="M 16.5,3 C 14.76,3 13.09,3.81 12,5.09 10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2,8.5 c 0,3.78 3.4,6.86 8.55,11.54 L 12,21.35 13.45,20.03 C 18.6,15.36 22,12.28 22,8.5 22,5.42 19.58,3 16.5,3 Z m -4.4,15.55 -0.1,0.1 -0.1,-0.1 C 7.14,14.24 4,11.39 4,8.5 4,6.5 5.5,5 7.5,5 c 1.54,0 3.04,0.99 3.57,2.36 h 1.87 C 13.46,5.99 14.96,5 16.5,5 c 2,0 3.5,1.5 3.5,3.5 0,2.89 -3.14,5.74 -7.9,10.05 z"
id="path15872" />
</g>
<g
id="g15886"
transform="matrix(0.22048611,0,0,0.22048611,182.46199,130.40328)"
style="fill:#999999;stroke-width:1.19999993">
<path
id="path15882"
d="M 0,0 H 24 V 24 H 0 Z"
inkscape:connector-curvature="0"
style="opacity:0;fill:#999999;stroke-width:1.19999993" />
<path
id="path15884"
d="M 16.5,3 C 14.76,3 13.09,3.81 12,5.09 10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2,8.5 c 0,3.78 3.4,6.86 8.55,11.54 L 12,21.35 13.45,20.03 C 18.6,15.36 22,12.28 22,8.5 22,5.42 19.58,3 16.5,3 Z m -4.4,15.55 -0.1,0.1 -0.1,-0.1 C 7.14,14.24 4,11.39 4,8.5 4,6.5 5.5,5 7.5,5 c 1.54,0 3.04,0.99 3.57,2.36 h 1.87 C 13.46,5.99 14.96,5 16.5,5 c 2,0 3.5,1.5 3.5,3.5 0,2.89 -3.14,5.74 -7.9,10.05 z"
inkscape:connector-curvature="0"
style="fill:#999999;stroke-width:1.19999993" />
</g>
<g
id="g15908"
transform="matrix(1.0168919,0,0,1,-2.2943644,-0.26458361)"
style="stroke-width:0.99165958">
<rect
y="15.618642"
x="25.069881"
height="5.7873974"
width="166.13474"
id="rect15890"
style="opacity:1;fill:#0c0c0c;fill-opacity:1;stroke:none;stroke-width:0.26237658;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.45142858" />
<rect
y="18.42692"
x="28.998743"
height="0.52721936"
width="159.21245"
id="rect15892"
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.26237658;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.45142858" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26237658;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.45142858"
id="rect15902"
width="33.799946"
height="0.52721936"
x="28.998743"
y="18.42692" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB