Refactor button class

TeamNewPipe · Jun 20, 2020 · 1327349 · 1327349
1 parent 7ce6a9b
commit 1327349
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1020,7 +1020,7 @@ ul.check > li.heart:before {
     }
 }
 
-#tile-opensource button.action {
+#tile-opensource .button.action {
     margin-right: 15px;
 }
 
@@ -1293,37 +1293,43 @@ html.touch #user-voices-carousel .carousel-control,
 
 /* Donate */
 
-button.donate,
-button.action {
+.button.action {
     border: none;
     box-shadow: none;
     background: #cd201f;
-    padding: 15px 30px;
+    display: inline-block;
+    padding: 10px 20px;
     border-radius: 8px;
     color: white;
     font-weight: bold;
-    font-size: 125%;
+    font-size: 100%;
     transition: background 0.75s;
 }
 
-button.action {
-    padding: 10px 20px;
-    font-size: 100%;
+.button.button-small.action {
+    padding: 5px 15px;
 }
 
-button.action.black {
+.button.button-large.action {
+    padding: 15px 30px;
+    font-size: 125%;
+}
+
+.button.action.black {
     background: black;
 }
 
-button.donate:hover,
-button.donate:focus,
-button.action:hover,
-button.action:focus {
+.button.action.grey {
+    background: #4a4a4a;
+}
+
+.button.action:hover,
+.button.action:focus {
     background: #AA1D1D;
 }
 
-button.action.black:hover,
-button.action.black:focus {
+.button.action.black:hover,
+.button.action.black:focus {
     background: #cd201f;
 }
 
@@ -1335,7 +1341,7 @@ button.action.black:focus {
     color: white;
 }
 
-#main-page #donate .donate {
+#main-page #donate .button.action {
     border: 3px solid white;
 }
 
@@ -1535,4 +1541,4 @@ button.action.black:focus {
 
 .img-full-width.icon-image {
     width: 85%;
-}
+}
diff --git a/donate/index.html b/donate/index.html
@@ -47,20 +47,20 @@ <h3 class="with-subtitle">What are you waiting for?</h3>
                             </div>
                             <div class="col-xs-12 col-lg-10" id="button-container">
                                 <div class="button-wrapper" id="bitcoin-donation-button">
-                                    <button class="donate" onclick="$('#bitcoin-donation').toggle()">Bitcoin</button>
+                                    <button class="button button-large action donate" onclick="$('#bitcoin-donation').toggle()">Bitcoin</button>
                                     <div class="clearfix"></div>
                                     <span>one-time donation</span>
                                 </div>
                                 <div class="button-wrapper" id="bountysource-donation">
                                     <a href="https://www.bountysource.com/teams/newpipe/" target="_blank">
-                                        <button class="donate">Bountysource</button>
+                                        <button class="button button-large action donate">Bountysource</button>
                                     </a>
                                     <div class="clearfix"></div>
                                     <span>boost an upcoming feature</span>
                                 </div>
                                 <div class="button-wrapper" id="liberapay-donation">
                                     <a href="https://liberapay.com/TeamNewPipe/" target="_blank">
-                                        <button class="donate">Liberapay</button>
+                                        <button class="button button-large action donate">Liberapay</button>
                                     </a>
                                     <div class="clearfix"></div>
                                     <span>recurrent donations&nbsp;&nbsp;</span>

diff --git a/index.html b/index.html
@@ -603,10 +603,10 @@ <h4>NewPipe is free and open source</h4>
                             <li class="text-success">NewPipe is available for free</li>
                         </ul>
                         <p class="button-wrapper">
-                            <a href="https://github.com/TeamNewPipe/NewPipe/blob/dev/.github/CONTRIBUTING.md#newpipe-contribution-guidelines"><button class="action">Contribute</button></a>
-                            <a href="https://github.com/TeamNewPipe/NewPipe/"><button class="action"><i class="fa fa-star"></i> <span class="api-stargazers">8000+</span></button></a>
-                            <a href="https://hosted.weblate.org/engage/NewPipe/"><button class="action">Translate</button></a>
-                            <a href="https://github.com/TeamNewPipe/website/"><button class="action black" >Improve this site</button></a>
+                            <a href="https://github.com/TeamNewPipe/NewPipe/blob/dev/.github/CONTRIBUTING.md#newpipe-contribution-guidelines" class="button action">Contribute</a>
+                            <a href="https://github.com/TeamNewPipe/NewPipe/" class="button action"><i class="fa fa-star"></i> <span class="api-stargazers">8000+</span></a>
+                            <a href="https://hosted.weblate.org/engage/NewPipe/" class="button action">Translate</a>
+                            <a href="https://github.com/TeamNewPipe/website/" class="button action black" >Improve this site</a>
                         </p>
                     </div>
                 </div>
@@ -647,7 +647,7 @@ <h4>Like the idea?</h4>
                     <h3>Bring NewPipe forward</h3>
                 </div>
                 <div class="col-md-4 text-center">
-                    <p><a href="{{ site.baseurl }}/donate/"><button class="donate">Donate</button></a></p>
+                    <p><a href="{{ site.baseurl }}/donate/" class="button button-large action">Donate</a></p>
                 </div>
                 <div class="col-md-4">
                     <h3>Support our developers</h3>