Browse Source

Modification background par défaut

upgrade-electron
wpetit 4 years ago
parent
commit
772269c786
4 changed files with 32 additions and 94 deletions
  1. +5
    -2
      css/style.css
  2. +25
    -90
      img/hourglass.svg
  3. +1
    -1
      src/components/common/crossfade-image.js
  4. +1
    -1
      src/components/launcher/launcher-view.js

+ 5
- 2
css/style.css View File

@@ -17,6 +17,10 @@ html, body {
height: 100%;
color: white;
overflow-x: hidden;
background: url('../img/background.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}


@@ -31,7 +35,6 @@ html, body {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
transition: background-image 250ms ease-in-out;
}

.full-width {
@@ -56,7 +59,6 @@ html, body {
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}

.launcher .crossfade-image .top,
@@ -82,6 +84,7 @@ html, body {
align-items: center;
display: flex;
width: 60px;
z-index: 10;
}

.launcher .nav a.goback {

+ 25
- 90
img/hourglass.svg View File

@@ -7,9 +7,9 @@
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="50px"
height="50px"
viewBox="0 0 100 100"
width="32.529999"
height="37.5"
viewBox="0 0 65.059998 75"
preserveAspectRatio="xMidYMid"
class="uil-hourglass"
id="svg2"
@@ -43,112 +43,47 @@
id="namedview30"
showgrid="false"
inkscape:zoom="13.350176"
inkscape:cx="-10.530194"
inkscape:cy="27.889305"
inkscape:cx="-3.9872051"
inkscape:cy="18.89309"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g6" />
inkscape:current-layer="g6"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<rect
x="0"
y="0"
x="-17.46875"
y="-13"
width="100"
height="100"
fill="none"
class="bk"
id="rect4" />
id="rect4"
style="fill:none" />
<g
id="g6">
id="g6"
transform="translate(-17.46875,-13)">
<path
fill="none"
stroke="#ffffff"
stroke-width="5"
stroke-miterlimit="10"
d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"
d="M 58.4,51.7 C 57.5,50.8 57,49.7 57,49.4 57,49.1 57.5,49 58.4,48 70.8,43.8 79.8,30.5 80,15.5 H 70 30 20 c 0.2,15 9.2,28.1 21.6,32.3 0.9,0.9 1.4,1.2 1.4,1.5 0,0.3 -0.5,1.6 -1.4,2.5 C 29.2,56.1 20.2,69.5 20,85.5 H 30 70 80 C 79.8,69.5 70.8,55.9 58.4,51.7 z"
class="glass"
id="path8"
style="fill:#a4a4a4;fill-opacity:1" />
<clipPath
id="uil-hourglass-clip1">
<rect
x="15"
y="20"
width="70"
height="25"
class="clip"
id="rect11">
<animate
attributeName="height"
from="25"
to="0"
dur="1s"
repeatCount="indefinite"
vlaues="25;0;0"
keyTimes="0;0.5;1"
id="animate13" />
<animate
attributeName="y"
from="20"
to="45"
dur="1s"
repeatCount="indefinite"
vlaues="20;45;45"
keyTimes="0;0.5;1"
id="animate15" />
</rect>
</clipPath>
<clipPath
id="uil-hourglass-clip2">
<rect
x="15"
y="55"
width="70"
height="25"
class="clip"
id="rect18">
<animate
attributeName="height"
from="0"
to="25"
dur="1s"
repeatCount="indefinite"
vlaues="0;25;25"
keyTimes="0;0.5;1"
id="animate20" />
<animate
attributeName="y"
from="80"
to="55"
dur="1s"
repeatCount="indefinite"
vlaues="80;55;55"
keyTimes="0;0.5;1"
id="animate22" />
</rect>
</clipPath>
style="fill:#a4a4a4;fill-opacity:1;stroke:#ffffff;stroke-width:5;stroke-miterlimit:10"
inkscape:connector-curvature="0" />
<path
d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z"
d="m 29,23 c 3.1,11.4 11.3,19.5 21,19.5 9.7,0 17.9,-8.1 21,-19.5 H 29 z"
clip-path="url(#uil-hourglass-clip1)"
fill="#d2d2d2"
class="sand"
id="path24"
style="fill:#ffffff;fill-opacity:1" />
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z"
d="M 71.6,78 C 68.6,66.4 60.1,58 50.1,58 40.1,58 31.6,66.4 28.6,78 h 43 z"
clip-path="url(#uil-hourglass-clip2)"
fill="#d2d2d2"
class="sand"
id="path26"
style="fill:#ffffff;fill-opacity:1" />
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="180 50 50"
repeatCount="indefinite"
dur="1s"
values="0 50 50;0 50 50;180 50 50"
keyTimes="0;0.7;1"
id="animateTransform28" />
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
</g>
</svg>

src/components/launcher/crossfade-image.js → src/components/common/crossfade-image.js View File

@@ -40,7 +40,7 @@ module.exports = React.createClass({
;

return (
<div className="crossfade-image">
<div className="crossfade-image" {...this.props}>
{bottom}
<ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
{top}

+ 1
- 1
src/components/launcher/launcher-view.js View File

@@ -6,7 +6,7 @@ var AnimateMixin = require('../mixins/animate');
var actions = require('../../store/actions');
var connect = require('react-redux').connect;
var debug = require('../../util/debug')('launcher-view');
var CrossfadeImage = require('./crossfade-image');
var CrossfadeImage = require('../common/crossfade-image');
var path = require('path');

var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');

Loading…
Cancel
Save