action buttons moved

public/assets/css/app.css

@@ -67,38 +67,6 @@ header .logo {
 	margin: 0.5rem 0 0.3rem;
 }
 
-header .url {
-	opacity: 0.7;
-}
-
-header .url.active {
-	opacity: 1;
-}
-
-header .url .input-group-prepend .input-group-text,
-header .url .input-group-append .input-group-text {
-	padding-top: 0.15rem;
-	cursor: pointer;
-	background-color: transparent;
-}
-
-header .url .input-group-prepend .input-group-text img,
-header .url .input-group-append .input-group-text img {
-	margin-top: 4px;
-}
-
-header .url .input-group-append .input-group-text img {
-	opacity: 0.5;
-}
-
-header .url.active .input-group-append .input-group-text img {
-	opacity: 1;
-}
-
-header .url .form-control {
-	background-color: transparent;
-	color: #fff;
-}
 
 
 /*
@@ -221,17 +189,25 @@ main .sidebar .github-star {
 	margin: 0 auto 1rem;
 }
 
-main .files .card.actions .card-body {
-	padding: 0.8rem;
+main .buttons {
+	text-align: center;
+	margin-top: 1.5rem;
 }
 
-main .files .card.actions .btn img {
+main .buttons .btn-download {
+	margin-bottom: 0.25rem;
+}
+
+
+main .url .btn-url img,
+main .buttons .btn-download img {
 	vertical-align: -2px;
 	margin-right: 0.1rem;
 	height: 1rem;
 }
 
-main .files .card.actions .btn-sm img {
+main .buttons .btn-reset img {
+	vertical-align: -3px;
 	height: 0.9rem;
 }
 

public/index.html

@@ -464,24 +464,14 @@
 								</div><div id="file-wordpress" class="code highlighted"></div>
 							</div>
 						</div>
-						<div class="card actions" ng-cloak>
-							<div class="card-body text-center">
-								<div class="mb-2">
-									<div class="input-group">
-										<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
-										<div class="input-group-append">
-											<button class="btn btn-primary" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="assets/img/clipboard.svg" alt="Copy to clipboard"> Copy URL</button>
-										</div>
-									</div>
-									<div class="clipboard-success" ng-if="clipboardCopy === 'url'">Copied!</div>
-								</div>
-								<div class="mb-3">
-									<button class="btn btn-primary" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Download ZIP</button>
-								</div>
-								<div>
-									<button class="btn btn-sm btn-danger" ng-click="reset()"><img src="assets/img/refresh.svg" alt="Reset"> Reset</button>
+						<div class="url" ng-cloak>
+							<div class="input-group">
+								<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
+								<div class="input-group-append">
+									<button class="btn btn-primary btn-url" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="assets/img/clipboard.svg" alt="Copy to clipboard"> Copy URL</button>
 								</div>
 							</div>
+							<div class="clipboard-success text-center" ng-if="clipboardCopy === 'url'">Copied!</div>
 						</div>
 					</div>
 					<div class="col-md-3 sidebar">
@@ -496,6 +486,10 @@
 								(window.adsbygoogle = window.adsbygoogle || []).push({});
 							</script>
 						</div>
+						<div class="buttons">
+							<button class="btn btn-primary btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Download ZIP</button><br>
+							<button class="btn btn-sm btn-danger btn-reset" ng-click="reset()"><img src="assets/img/refresh.svg" alt="Reset"> Reset</button>
+						</div>
 					</div>
 				</div>
 			</div>