From 9ce2074c51368e6ea97a5ee0ecfabda494fd73ef Mon Sep 17 00:00:00 2001 From: Sven Date: Sun, 2 Apr 2017 14:01:46 +0200 Subject: [PATCH] box shadows on buttons footer styling --- static/css/style.css | 91 +++++++++++++++++-- .../bootstrap-4.0.0-alpha.6/scss/_custom.scss | 18 +++- static/scss/style.scss | 54 +++++++++++ templates/base.html | 37 ++++---- templates/index.html | 12 +-- webapp/__init__.py | 2 +- 6 files changed, 181 insertions(+), 33 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 61bd25d..4be90d1 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; } diff --git a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss index cd89871..7446ce3 100755 --- a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss +++ b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss @@ -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; diff --git a/static/scss/style.scss b/static/scss/style.scss index ac7064b..571157d 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -55,6 +55,18 @@ .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 diff --git a/templates/base.html b/templates/base.html index ea91a9a..62ec599 100644 --- a/templates/base.html +++ b/templates/base.html @@ -66,7 +66,7 @@
-
{{ _("About") }}
+

{{ _("About") }}

  • @@ -85,7 +85,7 @@
-
{{ _("Support") }}
+

{{ _("Support") }}

  • @@ -98,7 +98,7 @@
-
{{ _("Join") }}
+

{{ _("Community") }}

  • @@ -117,7 +117,7 @@
-
{{ _("Development") }}
+

{{ _("Development") }}

  • @@ -136,27 +136,32 @@
- - {{ _("Donate") }} + + + + + + + + {{ _("Donate") }} -

- -
+
- + - + - - - - + - + + + +
diff --git a/templates/index.html b/templates/index.html index 2f1fb0d..93c95be 100644 --- a/templates/index.html +++ b/templates/index.html @@ -163,7 +163,7 @@
{{ _("Get Started") }} - {{ _("Learn more") }} + {{ _("Learn more") }}
@@ -179,8 +179,8 @@
- {{ _("Download") }} - {{ _("Donate") }} + {{ _("Download") }} + {{ _("Donate") }}

A complete history of IPFire releases is available at our News page.

@@ -207,7 +207,7 @@ {% end %} - {{ _("Read More") }} + {{ _("Read More") }}
@@ -301,8 +301,8 @@

- {{ _("Get Professional Support") }} - {{ _("Hardware Appliances") }} + {{ _("Get Professional Support") }} + {{ _("Hardware Appliances") }}
diff --git a/webapp/__init__.py b/webapp/__init__.py index a6d380b..790488f 100644 --- a/webapp/__init__.py +++ b/webapp/__init__.py @@ -341,7 +341,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) -- 2.39.2