pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styles... laser button color and animation

Browse source
This commit is contained in:
Teja 2015-01-09 16:21:09 +01:00
parent dc7576a9ef
commit 209de59714
2 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
View file

@ -78,7 +78,7 @@ var UI_API_KEY = "{{ uiApiKey }}";
</div>
<ul class="nav nav-pills">
<li class="active"><a href="#workingarea" data-toggle="tab">working area</a></li>
<li><a href="#designlib" data-toggle="tab">design library</a></li>
<!--<li><a href="#designlib" data-toggle="tab">design library</a></li>-->
<li><a href="#focus" data-toggle="tab">focus</a></li>
<li><a href="#term" data-toggle="tab">terminal</a></li>
<li xstyle="display: none;" xdata-bind="visible: loginState.isAdmin">
@ -213,7 +213,9 @@ var UI_API_KEY = "{{ uiApiKey }}";
</div>
<div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
<button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-fire': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Laser') }}')">{{ _('Laser') }}</span></button>
<button class="btn btn-danger span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), attr: {title: titlePrintButton}" id="job_print">
<i class="icon-white" data-bind="css: {'icon-fire': !isPaused(), 'icon-undo': isPaused(), 'wobble': isPrinting()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Laser') }}')">{{ _('Laser') }}</span>
</button>
<button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
<button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
</div>

55
src/octoprint/static/css/mrbeam.css
View file

@ -1585,6 +1585,7 @@ input.search-query,
background-image: url(../img/crosshair.png);
background-repeat: no-repeat;
background-size: 30px auto;
background-position: -30px -30px;
}
@ -1636,3 +1637,57 @@ input.search-query,
animation: spin 2s infinite linear;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.3); }
100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
25% { -webkit-transform: translateX(-25%) rotate(-5deg); }
50% { -webkit-transform: translateX(0%) rotate(0deg); }
75% { -webkit-transform: translateX(25%) rotate(5deg); }
100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }
25% { transform: translateX(-15%) rotate(-3deg); }
50% { transform: translateX(0%) rotate(0deg); }
75% { transform: translateX(15%) rotate(3deg); }
100% { transform: translateX(0%); }
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
display: inline-block;
}