]> git.ipfire.org Git - ipfire.org.git/commitdiff
box shadows on buttons
authorSven <sven.hoehn@posteo.de>
Sun, 2 Apr 2017 12:01:46 +0000 (14:01 +0200)
committerMichael Tremer <michael.tremer@ipfire.org>
Wed, 25 Apr 2018 10:12:35 +0000 (12:12 +0200)
footer styling

static/css/style.css
static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
static/scss/style.scss
templates/base.html
templates/index.html
webapp/__init__.py

index 61bd25de2243b86a302cf19c08a2756596d31643..4be90d1dc477a139f743c675ad60352b777868db 100644 (file)
@@ -271,8 +271,8 @@ a {
   color: #b71c1c;
   text-decoration: none; }
   a:focus, a:hover {
-    color: #014c8c;
-    text-decoration: underline; }
+    color: #751212;
+    text-decoration: none; }
 
 a:not([href]):not([tabindex]) {
   color: inherit;
@@ -1443,7 +1443,7 @@ mark,
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
-    box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25); }
+    box-shadow: none; }
   .btn.disabled, .btn:disabled {
     cursor: not-allowed;
     opacity: .65; }
@@ -1705,8 +1705,8 @@ fieldset[disabled] a.btn {
   .btn-link:hover {
     border-color: transparent; }
   .btn-link:focus, .btn-link:hover {
-    color: #014c8c;
-    text-decoration: underline;
+    color: #751212;
+    text-decoration: none;
     background-color: transparent; }
   .btn-link:disabled {
     color: #636c72; }
@@ -4995,7 +4995,20 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     display: none !important; } }
 
 .btn {
-  text-transform: uppercase; }
+  text-transform: uppercase;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  -webkit-transition: box-shadow .25s ease-in-out;
+  transition: box-shadow .25s ease-in-out; }
+  .btn:hover {
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.25);
+    -webkit-transition: box-shadow .25s ease-in-out;
+    transition: box-shadow .25s ease-in-out; }
+  .btn svg {
+    margin-right: .75rem;
+    height: 17px;
+    width: auto;
+    -webkit-transform: translateY(2px);
+            transform: translateY(2px); }
 
 .btn-lg, .btn-group-lg > .btn {
   margin: 0 24px; }
@@ -5109,6 +5122,32 @@ section#fireinfo {
 
 footer {
   padding: 3rem 0 0 0; }
+  footer h4 {
+    margin-bottom: 1.25rem; }
+  footer ul li {
+    font-size: 0.875rem;
+    margin-bottom: .75rem; }
+    footer ul li a {
+      color: #263238;
+      text-decoration: none; }
+      footer ul li a:hover {
+        color: #546e7a;
+        text-decoration: underline; }
+  footer .btn-lg, footer .btn-group-lg > .btn {
+    margin-bottom: 2.75rem; }
+    footer .btn-lg svg, footer .btn-group-lg > .btn svg {
+      width: 20px;
+      height: auto;
+      margin-right: 1.125rem;
+      -webkit-transform: translateY(2px);
+              transform: translateY(2px); }
+  footer .btn-sm, footer .btn-group-sm > .btn {
+    box-shadow: none; }
+    footer .btn-sm:hover, footer .btn-group-sm > .btn:hover {
+      box-shadow: none; }
+    footer .btn-sm svg, footer .btn-group-sm > .btn svg {
+      width: auto;
+      height: 28px; }
 
 .feature_icons {
   width: 40px;
@@ -5178,3 +5217,43 @@ footer {
     background-color: #8b1515;
     background-image: none;
     border-color: #821414; }
+
+.btn-white {
+  color: #b71c1c;
+  background-color: #fff;
+  border-color: #fff; }
+  .btn-white:hover {
+    color: #b71c1c;
+    background-color: #e6e5e5;
+    border-color: #e0e0e0; }
+  .btn-white:focus, .btn-white.focus {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
+  .btn-white.disabled, .btn-white:disabled {
+    background-color: #fff;
+    border-color: #fff; }
+  .btn-white:active, .btn-white.active,
+  .show > .btn-white.dropdown-toggle {
+    color: #b71c1c;
+    background-color: #e6e5e5;
+    background-image: none;
+    border-color: #e0e0e0; }
+
+.btn-bluegrey900 {
+  color: #fff;
+  background-color: #263238;
+  border-color: #263238; }
+  .btn-bluegrey900:hover {
+    color: #fff;
+    background-color: #11171a;
+    border-color: #0d1114; }
+  .btn-bluegrey900:focus, .btn-bluegrey900.focus {
+    box-shadow: 0 0 0 2px rgba(38, 50, 56, 0.5); }
+  .btn-bluegrey900.disabled, .btn-bluegrey900:disabled {
+    background-color: #263238;
+    border-color: #263238; }
+  .btn-bluegrey900:active, .btn-bluegrey900.active,
+  .show > .btn-bluegrey900.dropdown-toggle {
+    color: #fff;
+    background-color: #11171a;
+    background-image: none;
+    border-color: #0d1114; }
index cd898711387e051e45cb0efcab7f2b190b622f46..7446ce3fc7f6364c06b79977218ce73966897cb8 100755 (executable)
@@ -69,6 +69,8 @@ $border-width: 2px;
 // Links
 
 $link-color:            $red_900;
+$link-hover-color:      darken($link-color, 15%);
+$link-hover-decoration: none;
 
 // Grid
 
@@ -109,9 +111,9 @@ $btn-padding-x:                  1rem;
 $btn-padding-y:                  .5rem !default;
 $btn-line-height:                1.25 !default;
 $btn-font-weight:                $font-weight-normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
-$btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
+$btn-box-shadow:                 none;
+$btn-focus-box-shadow:           none;
+$btn-active-box-shadow:          none;
 
 $btn-primary-bg:                 $red_900;
 $btn-primary-border:             $red_900;
@@ -138,7 +140,15 @@ $btn-danger-border:              $btn-danger-bg !default;
 
 $btn-red900-color:                              $white !important;
 $btn-red900-bg:                                         $red_900;
-$btn-red900-border:                             $btn-red900-bg;        
+$btn-red900-border:                             $btn-red900-bg;
+
+$btn-white-color:                               $red_900;
+$btn-white-bg:                                  $white;
+$btn-white-border:                              $btn-white-bg;
+
+$btn-bluegrey900-color:                         $white;
+$btn-bluegrey900-bg:                    $blue_grey_900;
+$btn-bluegrey900-border:                $btn-bluegrey900-bg;
 
 $btn-link-disabled-color:        $gray-light !default;
 
index ac7064b1c2a92225b2f4206a27e522643dd6f38c..571157dc7183a9c49bee1f4af09105cd078eeed0 100644 (file)
 
 .btn {
        text-transform: uppercase;
+       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
+       transition: box-shadow .25s ease-in-out;
+       &:hover {
+               box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
+               transition: box-shadow .25s ease-in-out;
+       }
+       svg {
+               margin-right: .75rem;
+               height: 17px;
+               width: auto;
+               transform: translateY(2px);
+       }
 }
 
 .btn-lg {
@@ -189,6 +201,42 @@ section#fireinfo {
 
 footer {
        padding: 3rem 0 0 0;
+       h4 {
+               margin-bottom: 1.25rem;
+       }
+       ul {
+               li {
+                       font-size: $small-font-size;
+                       margin-bottom: .75rem;
+                       a {
+                               color: $blue-grey-900;
+                               text-decoration: none;
+                               &:hover {
+                                       color: $blue-grey-600;
+                                       text-decoration: underline;
+                               }
+                       }
+               }
+       }
+       .btn-lg {
+               margin-bottom: 2.75rem;
+               svg {
+                       width: 20px;
+                       height: auto;
+                       margin-right: 1.125rem;
+                       transform: translateY(2px);
+               }
+       }
+       .btn-sm {
+               box-shadow: none;
+               &:hover {
+                       box-shadow: none;
+               }
+               svg {
+                       width: auto;
+                       height: 28px;
+               }
+       }
 }
 
 .feature_icons {
@@ -227,4 +275,10 @@ footer {
 
 .btn-red900 {
   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
+}
+.btn-white {
+  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
+}
+.btn-bluegrey900 {
+  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
 }
\ No newline at end of file
index 77210ca4422d5276e9bcb6b4f3b073f31285d998..3795ecb4f9be55dde3a5eaaa12a29ede86c402b4 100644 (file)
@@ -66,7 +66,7 @@
                                <div class="container pb-3">
                                        <div class="row mb-6">
                                                <div class="col-2 links">
-                                                       <h5>{{ _("About") }}</h5>
+                                                       <h4>{{ _("About") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                                <li>
@@ -85,7 +85,7 @@
                                                </div>
 
                                                <div class="col-2 links">
-                                                       <h5>{{ _("Support") }}</h5>
+                                                       <h4>{{ _("Support") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                                <li>
@@ -98,7 +98,7 @@
                                                </div>
 
                                                <div class="col-2 links">
-                                                       <h5>{{ _("Join") }}</h5>
+                                                       <h4>{{ _("Community") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                                <li>
                                                </div>
 
                                                <div class="col-2 links">
-                                                       <h5>{{ _("Development") }}</h5>
+                                                       <h4>{{ _("Development") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                                <li>
                                                </div>
 
                                                <div class="col-md-4 text-center">
-                                                       <a class="btn btn-primary" href="//www.ipfire.org/donate">
-                                                               <span class="fa fa-heart"></span> {{ _("Donate") }}
+                                                       <a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
+                                                               <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 19" style="enable-background:new 0 0 20 19;" xml:space="preserve">
+                                                                       <g>
+                                                                               <path style="fill:none;" d="M-2-3h24v24H-2V-3z"/>
+                                                                               <path style="fill:#FFFFFF;" d="M10,18.35l-1.45-1.32C3.4,12.36,0,9.28,0,5.5C0,2.42,2.42,0,5.5,0C7.24,0,8.91,0.81,10,2.09
+                                                                                       C11.09,0.81,12.76,0,14.5,0C17.58,0,20,2.42,20,5.5c0,3.78-3.4,6.86-8.55,11.54L10,18.35z"/>
+                                                                       </g>
+                                                               </svg>
+                                                               {{ _("Donate") }}
                                                        </a>
 
-                                                       <br><br>
-
-                                                       <div class="btn-toolbar links">
+                                                       <div class="btn-toolbar justify-content-around">
                                                                <a class="btn btn-sm" href="http://www.ipfire.org/news.rss">
-                                                                       <span class="fa fa-2x fa-rss"></span>
+                                                                       <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-4-4h24v24H-4z"/><path d="M2.18 11.2a2.18 2.18 0 0 1 2.18 2.18c0 1.18-.98 2.18-2.18 2.18-1.18 0-2.18-1-2.18-2.18a2.18 2.18 0 0 1 2.18-2.18zM0 0c8.594 0 15.56 6.966 15.56 15.56h-2.83C12.73 8.53 7.03 2.83 0 2.83V0zm0 5.66c5.468 0 9.9 4.432 9.9 9.9H7.07A7.07 7.07 0 0 0 0 8.49V5.66z" fill="#263238" fill-rule="nonzero"/></g></svg>
                                                                </a>
                                                                <a class="btn btn-sm" href="https://twitter.com/ipfire">
-                                                                       <span class="fa fa-2x fa-twitter"></span>
+                                                                       <svg width="19" height="16" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-5h24v24H-3z"/><path d="M19 1.792c-.58.835-1.159 1.552-1.97 2.15v.476c0 1.194-.116 2.27-.464 3.344a8.244 8.244 0 0 1-1.39 3.104 11.87 11.87 0 0 1-2.2 2.627c-.812.716-1.854 1.313-3.128 1.79-1.16.479-2.55.717-3.94.717-2.085 0-4.17-.596-5.908-1.79h.927c1.737 0 3.36-.478 4.866-1.672-.927 0-1.622-.24-2.318-.836-.695-.478-1.158-1.194-1.39-1.91h.811c.348 0 .696 0 .927-.12-.811-.24-1.622-.716-2.201-1.433-.58-.716-.927-1.552-.927-2.507.58.238 1.159.478 1.854.478-.58-.359-1.043-.836-1.275-1.433a4.331 4.331 0 0 1-.463-2.03c0-.717.116-1.433.463-2.03 1.043 1.194 2.201 2.15 3.592 2.985 1.39.716 2.896 1.194 4.518 1.313-.116-.358-.116-.716-.116-1.074 0-1.075.348-2.03 1.159-2.866C11.122.359 12.049 0 13.09 0c1.159 0 2.085.359 2.896 1.194.927-.119 1.738-.477 2.433-.955-.231.955-.81 1.672-1.621 2.27A7.918 7.918 0 0 0 19 1.791" fill="#263238"/></g></svg>
                                                                </a>
                                                                <a class="btn btn-sm" href="https://www.facebook.com/IPFire.org">
-                                                                       <span class="fa fa-2x fa-facebook"></span>
-                                                               </a>
-                                                               <a class="btn btn-sm" href="https://youtube.com/user/ipfireproject">
-                                                                       <span class="fa fa-2x fa-youtube"></span>
+                                                                       <svg width="10" height="18" viewBox="0 0 10 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-7-3h24v24H-7z"/><path d="M10 .207V3H8.223c-.667 0-1.112.103-1.334.414-.222.207-.333.62-.333 1.138v2.07h3.333l-.444 3.206h-2.89V18H3V9.828H0V6.62h3v-2.38c0-1.344.444-2.379 1.222-3.103C5 .414 6.112 0 7.444 0c1.112 0 2 .104 2.556.207" fill="#263238"/></g></svg>
                                                                </a>
                                                                <a class="btn btn-sm" href="https://google.com/+IpfireOrg4Ever">
-                                                                       <span class="fa fa-2x fa-google-plus"></span>
+                                                                       <svg width="24" height="15" viewBox="0 0 24 15" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0-4h24v24H0z"/><path d="M15 7.647c0 1.47-.3 2.745-.9 3.824-.7 1.078-1.5 1.96-2.6 2.647-1.1.588-2.4.882-3.9.882-1 0-2-.196-2.9-.588-1-.392-1.8-.882-2.5-1.569-.7-.686-1.2-1.47-1.6-2.451A6.91 6.91 0 0 1 0 7.549c0-1.078.2-1.96.6-2.941.4-.883.9-1.765 1.6-2.353C2.9 1.569 3.7.98 4.7.588 5.6.196 6.6 0 7.6 0c2 0 3.7.686 5.1 1.961l-2 1.96c-.8-.784-1.9-1.176-3.1-1.176-.8 0-1.6.294-2.4.686-.7.393-1.2.98-1.7 1.765-.4.686-.6 1.47-.6 2.353 0 .784.2 1.667.6 2.354.5.686 1 1.274 1.7 1.764.8.392 1.6.588 2.4.588.6 0 1.1-.098 1.6-.196.5-.196.9-.392 1.2-.588.3-.294.6-.588.8-.882.3-.294.4-.59.5-.785.1-.294.2-.588.3-.784H7.6V6.47h7.2c.1.393.2.785.2 1.177m9-1.176v2.157h-2.2v2.059h-2.2v-2.06h-2.2V6.472h2.2V4.314h2.2v2.157H24" fill="#263238"/></g></svg>
+                                                               </a>
+                                                               <a class="btn btn-sm" href="https://youtube.com/user/ipfireproject">
+                                                                       <svg width="22" height="16" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-1-4h24v24H-1z"/><path d="M15.412 8.716c.235-.238.353-.358.353-.716s-.118-.597-.353-.716L9.06 3.344c-.236-.12-.47-.24-.823 0-.236.12-.354.358-.354.716v7.88c0 .358.118.597.354.717.235.119.352.119.47.119.117 0 .235 0 .353-.12l6.353-3.94zM22 6.09v3.82c0 .358 0 .955-.118 1.672 0 .716-.118 1.313-.235 1.79-.118.597-.47 1.075-.824 1.553-.47.358-.94.597-1.53.716-1.881.24-4.587.359-8.234.359-3.647 0-6.47-.12-8.235-.359-.588-.119-1.059-.358-1.53-.716-.47-.358-.705-.956-.823-1.552a23.942 23.942 0 0 1-.353-1.791c0-.717 0-1.314-.118-1.672V6.09c.118-.358.118-.955.118-1.672.117-.716.235-1.314.353-1.79.118-.597.353-1.195.823-1.553.471-.478.942-.716 1.53-.716C4.588.12 7.412 0 11.06 0c3.647 0 6.353.12 8.235.359.588 0 1.059.238 1.529.716.353.358.706.956.824 1.552a7.38 7.38 0 0 1 .235 1.791C22 5.135 22 5.732 22 6.09z" fill="#263238"/></g></svg>
                                                                </a>
                                                        </div>
                                                </div>
index 2f1fb0d4464e528a0e7110ea0f41a65789b19058..93c95becc9ba1bad8e62b03a24f8148dad5b5d99 100644 (file)
                        
                        <div class="row justify-content-center pt-4">
                                <a class="btn btn-primary btn-lg" href="/get-started">{{ _("Get Started") }}</a>
-                               <a class="btn btn-secondary btn-lg" href="/learn-more">{{ _("Learn more") }}</a>
+                               <a class="btn btn-white btn-lg" href="/learn-more">{{ _("Learn more") }}</a>
                        </div>
                </div>
        </section>
                                                </a>
                                        </h3>
                                        <div class="btn-toolbar mb-6">
-                                               <a class="btn btn-primary mr-3" href="/download">{{ _("Download") }}</a>
-                                               <a class="btn btn-primary ml-3" href="/donate">{{ _("Donate") }}</a>
+                                               <a class="btn btn-primary mr-3" href="/download"><svg width="14" height="17" viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-5-3h24v24H-5z"/><path d="M14 6h-4V0H4v6H0l7 7 7-7zM0 15v2h14v-2H0z" fill="#fff"/></g></svg>{{ _("Download") }}</a>
+                                               <a class="btn btn-white ml-3" href="/donate"><svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>{{ _("Donate") }}</a>
                                        </div>
                                        
                                        <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
                                                {% end %}
                                        </dl>
                                        
-                                       <a class="btn btn-primary" href="/news">{{ _("Read More") }}</a>
+                                       <a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
                                        
                                </div>
                        </div>
                                        </p>
                                </div>
                                <div class="col-4 offset-1">
-                                       <a class="btn btn-secondary btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
-                                       <a class="btn btn-secondary btn-lg btn-block" href="/hardware">{{ _("Hardware Appliances") }}</a>
+                                       <a class="btn btn-bluegrey900 btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+                                       <a class="btn btn-bluegrey900 btn-lg btn-block" href="/hardware">{{ _("Hardware Appliances") }}</a>
                                </div>
                        </div>
                </div>
index 631a98b157ec5539b7c7873099e72e58e6152423..064f1939205ec0a1d6b48526ba5226adb409dc47 100644 (file)
@@ -332,7 +332,7 @@ class Application(tornado.web.Application):
                        http_server.start(num_processes=num_processes)
                else:
                        http_server.listen(port)
-               
+
                # All requests should be done after 30 seconds or they will be killed.
                self.ioloop.set_blocking_log_threshold(30)