diff options
Diffstat (limited to 'static/css/style.turquoise.css')
-rw-r--r-- | static/css/style.turquoise.css | 224 |
1 files changed, 118 insertions, 106 deletions
diff --git a/static/css/style.turquoise.css b/static/css/style.turquoise.css index cc7d5f9..6525ec2 100644 --- a/static/css/style.turquoise.css +++ b/static/css/style.turquoise.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #4fbfa8; + --navbar-border-top: #2d7b6b; + --button-border: #389985; + --link-focus: #348e7b; + --form-shadow: rgba(79, 191, 168, 0.6); + --pagination-bg: #bfe8df; + --link-hover-bg: #3aa18c; + --navbar-focus: #9adacd; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #4fbfa8; + color: var(--primary-accent); } .accent { - color: #4fbfa8; + color: var(--primary-accent); } .text-uppercase { text-transform: uppercase; @@ -95,7 +107,7 @@ div.section { .heading h4, .heading h5 { display: inline-block; - border-bottom: solid 5px #4fbfa8; + border-bottom: solid 5px var(--primary-accent); line-height: 1.1; margin-bottom: 0; padding-bottom: 10px; @@ -109,7 +121,7 @@ div.section { .heading h4 i[class^="fa"], .heading h5 i[class^="fa"] { display: inline-block; - background: #4fbfa8; + background: var(--primary-accent); width: 30px; height: 30px; vertical-align: middle; @@ -144,7 +156,7 @@ div.section { .ul-icons li i { width: 20px; height: 20px; - background: #4fbfa8; + background: var(--primary-accent); color: #fff; text-align: center; border-radius: 10px; @@ -255,7 +267,7 @@ ul.list-style-none { } #top .social a:hover { color: #fff; - background: #4fbfa8; + background: var(--primary-accent); -webkit-transform: scale(1.1); transform: scale(1.1); } @@ -310,12 +322,12 @@ ul.list-style-none { border-top: solid 5px transparent; } .navbar ul.nav > li > a:hover { - border-top: solid 5px #4fbfa8; + border-top: solid 5px var(--primary-accent); } .navbar ul.nav > li.active > a, .navbar ul.nav > li.open > a { text-decoration: none !important; - border-top: solid 5px #2d7b6b; + border-top: solid 5px var(--navbar-border-top); } @media (max-width: 768px) { .navbar ul.nav > li.active > a, @@ -327,18 +339,18 @@ ul.list-style-none { } } .navbar.navbar-light ul.nav > li.active > a { - border-top: solid 5px #2d7b6b; + border-top: solid 5px var(--navbar-border-top); background: #fff !important; color: #555555 !important; } .navbar.navbar-light ul.nav > li.active > a:hover { - border-top: solid 5px #2d7b6b; + border-top: solid 5px var(--navbar-border-top); } .navbar.navbar-light ul.nav > li > a:hover, .navbar.navbar-light ul.nav > li.open > a:hover, .navbar.navbar-light ul.nav > li > a:focus, .navbar.navbar-light ul.nav > li.open > a:focus { - border-top: solid 5px #4fbfa8; + border-top: solid 5px var(--primary-accent); background: #fff !important; color: #555555 !important; } @@ -364,7 +376,7 @@ ul.list-style-none { left: 0; } .navbar ul.dropdown-menu li a:hover { - color: #4fbfa8; + color: var(--primary-accent); text-decoration: none; background: none; left: 2px; @@ -416,7 +428,7 @@ ul.list-style-none { transition: all 0.2s ease-out; } .navbar .yamm-content ul li a:hover { - color: #4fbfa8; + color: var(--primary-accent); text-decoration: none; padding-left: 2px; } @@ -449,12 +461,12 @@ ul.list-style-none { .navbar .btn-default:focus, .navbar .btn-default.navbar-toggle:focus { background-color: #fff; - border-color: #4fbfa8; - color: #4fbfa8; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #4fbfa8; + border-top: solid 1px var(--primary-accent); text-align: right; } .navbar #search form { @@ -501,7 +513,7 @@ ul.list-style-none { margin-bottom: 20px; } #login-modal a { - color: #4fbfa8; + color: var(--primary-accent); } #login-modal p { font-weight: 300; @@ -541,18 +553,18 @@ ul.list-style-none { border-radius: 0; } .btn-template-main { - color: #4fbfa8; + color: var(--primary-accent); background-color: #ffffff; - border-color: #4fbfa8; + border-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active, .open > .dropdown-toggle.btn-template-main { - color: #4fbfa8; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #389985; + border-color: var(--button-border); } .btn-template-main:active, .btn-template-main.active, @@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active, .btn-template-main[disabled].active, fieldset[disabled] .btn-template-main.active { background-color: #ffffff; - border-color: #4fbfa8; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #4fbfa8; + background: var(--primary-accent); color: #ffffff; - border-color: #4fbfa8; + border-color: var(--primary-accent); } .btn-template-transparent-primary { color: #ffffff; @@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active { .btn-template-transparent-primary:active, .btn-template-transparent-primary.active { background: #fff; - color: #4fbfa8; + color: var(--primary-accent); border-color: #fff; } .btn-template-transparent-black { @@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active { } .btn-template-primary { color: #ffffff; - background-color: #4fbfa8; - border-color: #4fbfa8; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary:hover, .btn-template-primary:focus, @@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active { .btn-template-primary.active, .open > .dropdown-toggle.btn-template-primary { color: #ffffff; - background-color: #3aa18c; - border-color: #389985; + background-color: var(--link-hover-bg); + border-color: var(--button-border); } .btn-template-primary:active, .btn-template-primary.active, @@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active, .btn-template-primary.disabled.active, .btn-template-primary[disabled].active, fieldset[disabled] .btn-template-primary.active { - background-color: #4fbfa8; - border-color: #4fbfa8; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #4fbfa8; + color: var(--primary-accent); background-color: #ffffff; } #intro { @@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active { left: 0; width: 100%; height: 100%; - background: #4fbfa8; + background: var(--primary-accent); opacity: 0.9; filter: alpha(opacity=90); } @@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active { .panel.sidebar-menu .panel-heading h4, .panel.sidebar-menu .panel-heading h5 { display: inline-block; - border-bottom: solid 5px #4fbfa8; + border-bottom: solid 5px var(--primary-accent); line-height: 1.1; margin-bottom: 0; padding-bottom: 10px; @@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active { padding: 5px; border: solid 1px #eeeeee; border-radius: 0; - color: #4fbfa8; + color: var(--primary-accent); margin: 5px 5px 5px 0; text-transform: uppercase; letter-spacing: 0.08em; @@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active { text-decoration: none; } .panel.sidebar-menu ul.tag-cloud li a:hover { - color: #4fbfa8; - border-color: #4fbfa8; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a:hover { color: #FFFFFF; @@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active { padding: 6px 20px 6px 20px; margin: 30px 10px 10px -71px; color: #fff; - background-color: #4fbfa8; + background-color: var(--primary-accent); font-family: "Roboto", Helvetica, Arial, sans-serif; } .ribbon .theribbon:before, @@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active { .owl-theme .owl-controls .owl-page.active span, .owl-carousel .owl-controls.clickable .owl-page:hover span, .owl-theme .owl-controls.clickable .owl-page:hover span { - background: #4fbfa8; + background: var(--primary-accent); } .owl-carousel .owl-controls .owl-buttons, .owl-theme .owl-controls .owl-buttons { @@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active { line-height: 25px; margin: 0 5px 0 0; font-size: 18px; - color: #4fbfa8; + color: var(--primary-accent); padding: 0; background: #fff; border-radius: 13px; @@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active { left: 0; width: 100%; height: 100%; - background: #4fbfa8; + background: var(--primary-accent); opacity: 0.9; filter: alpha(opacity=90); } @@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active { height: 50px; } .testimonials .item .testimonial .bottom .icon { - color: #4fbfa8; + color: var(--primary-accent); font-size: 30px; float: left; width: 20%; @@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active { margin-bottom: 40px; } .box-simple .icon { - color: #4fbfa8; - border-color: #4fbfa8; + color: var(--primary-accent); + border-color: var(--primary-accent); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; @@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active { height: 100%; opacity: 0; filter: alpha(opacity=0); - background: #4fbfa8; + background: var(--primary-accent); } .box-image .name { position: absolute; @@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active { height: 100%; opacity: 0; filter: alpha(opacity=0); - background: #4fbfa8; + background: var(--primary-accent); } .box-image-text .top .name { position: absolute; @@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active { } .bar { position: relative; - background: #4fbfa8; + background: var(--primary-accent); padding: 60px 0; } .bar.background-pentagon { @@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active { margin-bottom: 20px; padding-bottom: 15px; text-align: center; - border: solid 1px #4fbfa8; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #4fbfa8; + background: var(--primary-accent); } .packages .package .package-header h5 { color: #fff; @@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active { height: 300px; } #map.with-border { - border-top: solid 1px #4fbfa8; - border-bottom: solid 1px #4fbfa8; + border-top: solid 1px var(--primary-accent); + border-bottom: solid 1px var(--primary-accent); } #blog-listing-big .post, #blog-homepage .post { @@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active { #blog-homepage .post h2 a:hover, #blog-listing-big .post h4 a:hover, #blog-homepage .post h4 a:hover { - color: #4fbfa8; + color: var(--primary-accent); } #blog-listing-big .post .author-category, #blog-homepage .post .author-category { @@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active { } #blog-listing-big .post .date-comments a:hover, #blog-homepage .post .date-comments a:hover { - color: #4fbfa8; + color: var(--primary-accent); } @media (min-width: 768px) { #blog-listing-big .post .date-comments, @@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active { color: #555555; } #blog-listing-medium .post h2 a:hover { - color: #4fbfa8; + color: var(--primary-accent); } #blog-listing-medium .post .author-category { float: left; @@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active { margin-right: 20px; } #blog-listing-medium .post .date-comments a:hover { - color: #4fbfa8; + color: var(--primary-accent); } @media (min-width: 768px) { #blog-listing-medium .post .date-comments { @@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active { } #productMain .sizes a.active, #productMain .sizes a:hover { - background: #4fbfa8; + background: var(--primary-accent); color: #fff; } #productMain .sizes input { @@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active { border: solid 1px transparent; } #thumbs a.active { - border-color: #4fbfa8; + border-color: var(--primary-accent); } #product-social { text-align: center; @@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active { } #checkout .nav { margin-bottom: 20px; - border-bottom: solid 1px #4fbfa8; + border-bottom: solid 1px var(--primary-accent); } #checkout .nav li { height: 100%; @@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active { margin-bottom: 30px; } #get-it { - background: #4fbfa8; + background: var(--primary-accent); padding: 50px 0 30px; color: #fff; text-align: center; @@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active { color: #999999; } #footer ul a:hover { - color: #4fbfa8; + color: var(--primary-accent); text-decoration: none; } #footer .photostream div { @@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active { margin: 0 10px 0 0; } #footer .social a:hover { - color: #4fbfa8; + color: var(--primary-accent); } #copyright { background: #333; @@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active { .nav .open > a:hover, .nav .open > a:focus { background-color: #eeeeee; - border-color: #4fbfa8; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #4fbfa8; + border-bottom: 1px solid var(--primary-accent); } .nav-tabs > li { float: left; @@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active { border-radius: 0 0 0 0; } .nav-tabs > li > a:hover { - border-color: #eeeeee #eeeeee #4fbfa8; + border-color: #eeeeee #eeeeee var(--primary-accent); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; background-color: #ffffff; - border: 1px solid #4fbfa8; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #4fbfa8; + border-bottom: solid 1px var(--primary-accent); border-bottom: 0; } .nav-tabs.nav-justified > li { @@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active { .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #4fbfa8; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #4fbfa8; + border-bottom: 1px solid var(--primary-accent); border-radius: 0 0 0 0; } .nav-tabs.nav-justified > .active > a, @@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active { .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #ffffff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .nav-stacked > li { float: none; @@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active { } .nav-justified { width: 100%; - border-bottom: solid 1px #4fbfa8; + border-bottom: solid 1px var(--primary-accent); } .nav-justified > li { float: none; @@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active { .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { - border: 1px solid #4fbfa8; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #4fbfa8; + border-bottom: 1px solid var(--primary-accent); border-radius: 0 0 0 0; } .nav-tabs-justified > .active > a, @@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active { .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #555555; - background-color: #9adacd; + background-color: var(--navbar-focus); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, @@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active { } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background-color: #4fbfa8; + background-color: var(--primary-accent); } .navbar-default .navbar-toggle .icon-bar { background-color: #888888; @@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active { .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { - background-color: #4fbfa8; + background-color: var(--primary-accent); color: #ffffff; } @media (max-width: 767px) { @@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active { } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: #4fbfa8; + color: var(--primary-accent); } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, @@ -3163,12 +3175,12 @@ body { color: #555555; } a { - color: #4fbfa8; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #348e7b; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #4fbfa8; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(79, 191, 168, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(79, 191, 168, 0.6); + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow); } .form-group { margin-bottom: 20px; @@ -3273,14 +3285,14 @@ label { .pager li > a, .pager li > span { background-color: #ffffff; - border: 1px solid #4fbfa8; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } .pager .disabled > a, .pager .disabled > a:hover, @@ -3301,7 +3313,7 @@ label { padding: 6px 12px; line-height: 1.42857143; text-decoration: none; - color: #4fbfa8; + color: var(--primary-accent); background-color: #ffffff; border: 1px solid #dddddd; } @@ -3309,8 +3321,8 @@ label { .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { - color: #4fbfa8; - background-color: #bfe8df; + color: var(--primary-accent); + background-color: var(--pagination-bg); border-color: #dddddd; } .pagination > .active > a, @@ -3321,8 +3333,8 @@ label { .pagination > .active > span:focus { z-index: 2; color: #ffffff; - background-color: #4fbfa8; - border-color: #4fbfa8; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .pagination > .disabled > span, .pagination > .disabled > span:hover, @@ -3404,17 +3416,17 @@ p { font-style: italic; } .text-primary { - color: #4fbfa8; + color: var(--primary-accent); } a.text-primary:hover { - color: #3aa18c; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #4fbfa8; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #3aa18c; + background-color: var(--link-hover-bg); } abbr[title], abbr[data-original-title] { @@ -3424,7 +3436,7 @@ blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 14px; - border-left: 5px solid #4fbfa8; + border-left: 5px solid var(--primary-accent); } blockquote footer, blockquote small, @@ -3441,7 +3453,7 @@ blockquote .small:before { } .blockquote-reverse, blockquote.pull-right { - border-right: 5px solid #4fbfa8; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #4fbfa8; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #4fbfa8; - border-color: #4fbfa8; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #4fbfa8; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #4fbfa8; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #4fbfa8; + border-bottom-color: var(--primary-accent); } .panel-primary .panel-title { font-weight: 300; @@ -3518,14 +3530,14 @@ a.badge:focus { } a.list-group-item.active > .badge, .nav-pills > .active > a > .badge { - color: #4fbfa8; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #4fbfa8; + background-color: var(--primary-accent); } .progress-striped .progress-bar-primary { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |