From 209de597148c17fb07cebdb9ca7d500fdfc6aa4d Mon Sep 17 00:00:00 2001
From: Teja <mail@tejaphilipp.de>
Date: Fri, 9 Jan 2015 16:21:09 +0100
Subject: [PATCH] styles... laser button color and animation

---
 .../templates/override_index.jinja2           |  6 +-
 src/octoprint/static/css/mrbeam.css           | 55 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
index bbbf2e73..22e5c9f9 100644
--- a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
+++ b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
@@ -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>
diff --git a/src/octoprint/static/css/mrbeam.css b/src/octoprint/static/css/mrbeam.css
index 8e66ae8e..bb4274b0 100644
--- a/src/octoprint/static/css/mrbeam.css
+++ b/src/octoprint/static/css/mrbeam.css
@@ -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;
+}