Modificat

Author: DragosBubu

classes/Visualizer/Render/Page/Data.php

@@ -83,7 +83,8 @@ protected function _renderSidebarContent() {
 				echo '<div>';
 					echo '<form id="csv-form" action="', $upload_link, '" method="post" target="thehole" enctype="multipart/form-data">';
 						echo '<input type="hidden" id="remote-data" name="remote_data">';
-						echo '<div class="button button-primary file-wrapper">';
+						echo '<div class="form-inline">';
+						echo '<div class="button button-primary file-wrapper computer-btn">';
 							echo '<input type="file" id="csv-file" class="file" name="local_data">';
 							esc_attr_e( 'From Computer', Visualizer_Plugin::NAME );
 						echo '</div>';
@@ -95,8 +96,10 @@ protected function _renderSidebarContent() {
                         }
                         // Added by Ash/Upwork
 
-						echo '<div>';
-							echo '<a id="remote-file" class="button" href="javascript:;">', esc_html__( 'From Web', Visualizer_Plugin::NAME ), '</a>';
+					
+							echo '<a id="" class="button from-web from-web-btn" href="javascript:;">', esc_html__( 'From Web', Visualizer_Plugin::NAME ), '</a>';
+					
+						
 						echo '</div>';
 					echo '</form>';
 
@@ -107,7 +110,7 @@ protected function _renderSidebarContent() {
                     }else{
 ?>
                     <a href="<?php echo Visualizer_Plugin::PRO_TEASER_URL;?>" title="<?php echo Visualizer_Plugin::PRO_TEASER_TITLE;?>" target="_new">
-                        <input type="button" class="button" id="existing-chart-free" value="<?php esc_attr_e( 'From Chart', Visualizer_Plugin::NAME );?>:"><select id="chart-id-free"></select>
+                        <input type="button" class="button preview preview-btn" id="existing-chart-free" value="<?php esc_attr_e( 'PREVIEW', Visualizer_Plugin::NAME );?>">
                     </a>
 <?php
                     }

css/frame.css

@@ -82,6 +82,8 @@
 	background-image: -o-linear-gradient(bottom, #EEE, whiteSmoke);
 	background-image: -ms-linear-gradient(bottom, #EEE, whiteSmoke);
 	background-image: linear-gradient(bottom, #EEE, whiteSmoke);
+	font-family: "Open Sans",sans-serif;
+	font-weight: 700;
 }
 
 .group-title:hover,
@@ -95,6 +97,8 @@
 	background-image: -o-linear-gradient(bottom, #6D6D6D, gray);
 	background-image: -ms-linear-gradient(bottom, #6D6D6D, gray);
 	background-image: linear-gradient(bottom, #6D6D6D, gray);
+	font-family: "Open Sans", sans-serif;
+	font-weight: 700;
 }
 
 .group-title::after {
@@ -153,6 +157,8 @@ div.group-content {
 div.group-content .group-description {
 	padding: 0;
 	margin-bottom: 20px;
+	font-weight: 300;
+	font-family: "Montserrat",sans-serif;
 }
 
 .section-title {
@@ -254,7 +260,7 @@ div.group-content .group-description {
 }
 
 #rate-stars {
-	float: right;
+	margin: 10px 0px 10px 55px;
 	width: 100px;
 	height: 20px;
 	background-image: url('../images/star.png');
@@ -266,6 +272,9 @@ div.group-content .group-description {
 	text-decoration: none;
 	display: block;
 	margin-top: 3px;
+	margin-left: 35px;
+	font-family: "Montserrat",sans-serif;
+	font-weight: 300;
 }
 
 #flattr {
@@ -423,4 +432,83 @@ div.group-content .group-description {
 #remote-file {
 	margin-top: 10px;
 	clear: both;
+}
+
+ .form-inline {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  
+ .computer-btn{
+	color: #646464 !important;
+	border: medium none rgb(100, 100, 100) !important;
+	background: #E6E6E6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
+	padding-left: 27px !important;
+	transition: all 0.3s ease 0s;
+	font-family: "Open Sans",sans-serif;
+	font-weight: 700;
+	border: 1px solid #B0B0B0 !important;
+	box-shadow: none !important;
+	
+ }
+
+ .computer-btn:hover{
+	color: white !important;
+	background: #2f8cea  url("../images/computer.png") no-repeat scroll 7px -36px !important;
+	transition: all 0.3s ease 0s;
+	padding-left: 27px !important;
+	-webkit-transition: all .3s ease;
+	-moz-transition: all .3s ease;
+	-ms-transition: all .3s ease;
+	-o-transition: all .3s ease;
+	transition: all .3s ease;
+	box-shadow: 0px 1px 0px rgba(171, 171, 171, 0.5) inset, 0px 1px 0px rgba(0, 0, 0, 0.15) !important;
+	border: 1px solid #2f8cea !important;
+	box-shadow: none !important;
+	
+	
+ }
+
+ 
+ .from-web{
+	margin-top: 0px;
+	margin-bottom: 15px !important;
+}
+
+ .from-web-btn{
+	color: #646464 !important;
+	border: medium none #646464 !important;
+	background: #E6E6E6 url("../images/web.png") no-repeat scroll 7px 1px !important;
+	padding-left: 25px !important;
+	transition: all 0.3s ease 0s;
+	border: 1px solid #B0B0B0 !important;
+	box-shadow: none !important;
+	font-family: "Open Sans",sans-serif;
+	font-weight: 700;
+	margin-left: 2px !important;
+}
+
+ .from-web-btn:hover{
+	color: white !important;
+	background: #84d700  url("../images/web.png") no-repeat scroll 7px -38px !important;
+	transition: all 0.3s ease 0s;
+	padding-left: 25px !important;
+	-webkit-transition: all .3s ease;
+	-moz-transition: all .3s ease;
+	-ms-transition: all .3s ease;
+	-o-transition: all .3s ease;
+	transition: all .3s ease;
+	margin-left: 2px !important;
+	border: 1px solid #84d700 !important;
+	box-shadow: none !important;
+}
+
+.preview{
+	width: 100%;
+}
+
+.preview-btn{
+	font-family: "Open Sans",sans-serif;
+	font-weight: 700;
 }