diff options
author | ryanfox1985 <ryanfox1985@users.noreply.github.com> | 2021-10-11 10:39:07 +0300 |
---|---|---|
committer | ryanfox1985 <ryanfox1985@users.noreply.github.com> | 2021-10-11 10:39:07 +0300 |
commit | 28f46bed994132fc2015a6db1e3dd9f2b3765358 (patch) | |
tree | 712d25791b2dc13f795eafd135a4867d68d3920a | |
parent | 75a145b01c1cd337c1d94526080048b5aff4fdd5 (diff) |
deploy: 973e31fe5e8c983e46e247d2eaf450f560dbfbd1
-rw-r--r-- | css/style.blue.css | 224 | ||||
-rw-r--r-- | css/style.default.css | 224 | ||||
-rw-r--r-- | css/style.green.css | 224 | ||||
-rw-r--r-- | css/style.marsala.css | 224 | ||||
-rw-r--r-- | css/style.pink.css | 224 | ||||
-rw-r--r-- | css/style.red.css | 224 | ||||
-rw-r--r-- | css/style.turquoise.css | 224 | ||||
-rw-r--r-- | css/style.violet.css | 224 |
8 files changed, 944 insertions, 848 deletions
diff --git a/css/style.blue.css b/css/style.blue.css index 76c6994..5290682 100644 --- a/css/style.blue.css +++ b/css/style.blue.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #467fbf; + --navbar-border-top: #294d76; + --button-border: #336194; + --link-focus: #2f5a89; + --form-shadow: rgba(70, 127, 191, 0.6); + --pagination-bg: #b8cee6; + --link-hover-bg: #36669c; + --navbar-focus: #92b3d9; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #467fbf; + color: var(--primary-accent); } .accent { - color: #467fbf; + 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 #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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 #467fbf; + 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 #294d76; + 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 #294d76; + 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 #294d76; + 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 #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; - color: #467fbf; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #467fbf; + 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: #467fbf; + 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: #467fbf; + color: var(--primary-accent); background-color: #ffffff; - border-color: #467fbf; + 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: #467fbf; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #336194; + 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: #467fbf; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #467fbf; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #467fbf; + background: var(--primary-accent); color: #ffffff; - border-color: #467fbf; + 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: #467fbf; + 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: #467fbf; - border-color: #467fbf; + 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: #36669c; - border-color: #336194; + 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: #467fbf; - border-color: #467fbf; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #467fbf; + 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: #467fbf; + 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 #467fbf; + 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: #467fbf; + 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: #467fbf; - border-color: #467fbf; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; - border-color: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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 #467fbf; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #467fbf; + 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 #467fbf; - border-bottom: solid 1px #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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 #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #467fbf; + 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 #467fbf; + 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 #467fbf; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #467fbf; + 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 #467fbf; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #467fbf; + 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: #467fbf; + 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 #467fbf; + 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 #467fbf; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #467fbf; + 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: #92b3d9; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + 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: #467fbf; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #2f5a89; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #467fbf; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 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 #467fbf; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #467fbf; + 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: #467fbf; + 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: #467fbf; - background-color: #b8cee6; + 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: #467fbf; - border-color: #467fbf; + 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: #467fbf; + color: var(--primary-accent); } a.text-primary:hover { - color: #36669c; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #467fbf; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #36669c; + 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 #467fbf; + 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 #467fbf; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #467fbf; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #467fbf; - border-color: #467fbf; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #467fbf; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #467fbf; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #467fbf; + 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: #467fbf; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #467fbf; + 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); diff --git a/css/style.default.css b/css/style.default.css index 8c95019..fe124ac 100644 --- a/css/style.default.css +++ b/css/style.default.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #38a7bb; + --navbar-border-top: #20616d; + --button-border: #2a7d8c; + --link-focus: #267280; + --form-shadow: rgba(56, 167, 187, 0.6); + --pagination-bg: #a7dbe5; + --link-hover-bg: #2c8494; + --navbar-focus: #80cbd9; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #38a7bb; + color: var(--primary-accent); } .accent { - color: #38a7bb; + 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 #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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 #38a7bb; + 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 #20616d; + 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 #20616d; + 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 #20616d; + 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 #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; - color: #38a7bb; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + color: var(--primary-accent); background-color: #ffffff; - border-color: #38a7bb; + 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: #38a7bb; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #2a7d8c; + 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: #38a7bb; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #38a7bb; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #38a7bb; + background: var(--primary-accent); color: #ffffff; - border-color: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; - border-color: #38a7bb; + 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: #2c8494; - border-color: #2a7d8c; + 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: #38a7bb; - border-color: #38a7bb; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #38a7bb; + 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: #38a7bb; + 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 #38a7bb; + 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: #38a7bb; + 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: #38a7bb; - border-color: #38a7bb; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; - border-color: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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 #38a7bb; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #38a7bb; + 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 #38a7bb; - border-bottom: solid 1px #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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 #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #38a7bb; + 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 #38a7bb; + 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 #38a7bb; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #38a7bb; + 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 #38a7bb; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #38a7bb; + 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: #38a7bb; + 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 #38a7bb; + 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 #38a7bb; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #38a7bb; + 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: #80cbd9; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #267280; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #38a7bb; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 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 #38a7bb; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #38a7bb; + 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: #38a7bb; + 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: #38a7bb; - background-color: #a7dbe5; + 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: #38a7bb; - border-color: #38a7bb; + 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: #38a7bb; + color: var(--primary-accent); } a.text-primary:hover { - color: #2c8494; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #38a7bb; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #2c8494; + 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 #38a7bb; + 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 #38a7bb; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #38a7bb; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #38a7bb; - border-color: #38a7bb; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #38a7bb; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #38a7bb; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #38a7bb; + 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: #38a7bb; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #38a7bb; + 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); diff --git a/css/style.green.css b/css/style.green.css index efe7919..f36c0b8 100644 --- a/css/style.green.css +++ b/css/style.green.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #6aae7a; + --navbar-border-top: #3f734b; + --button-border: #4d8e5c; + --link-focus: #488456; + --form-shadow: rgba(106, 174, 122, 0.6); + --pagination-bg: #cde4d2; + --link-hover-bg: #519461; + --navbar-focus: #acd2b5; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #6aae7a; + color: var(--primary-accent); } .accent { - color: #6aae7a; + 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 #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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 #6aae7a; + 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 #3f734b; + 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 #3f734b; + 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 #3f734b; + 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 #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; - color: #6aae7a; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + color: var(--primary-accent); background-color: #ffffff; - border-color: #6aae7a; + 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: #6aae7a; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #4d8e5c; + 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: #6aae7a; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #6aae7a; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #6aae7a; + background: var(--primary-accent); color: #ffffff; - border-color: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; - border-color: #6aae7a; + 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: #519461; - border-color: #4d8e5c; + 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: #6aae7a; - border-color: #6aae7a; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #6aae7a; + 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: #6aae7a; + 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 #6aae7a; + 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: #6aae7a; + 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: #6aae7a; - border-color: #6aae7a; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; - border-color: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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 #6aae7a; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #6aae7a; + 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 #6aae7a; - border-bottom: solid 1px #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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 #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #6aae7a; + 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 #6aae7a; + 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 #6aae7a; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #6aae7a; + 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 #6aae7a; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #6aae7a; + 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: #6aae7a; + 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 #6aae7a; + 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 #6aae7a; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #6aae7a; + 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: #acd2b5; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #488456; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #6aae7a; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(106, 174, 122, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(106, 174, 122, 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 #6aae7a; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #6aae7a; + 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: #6aae7a; + 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: #6aae7a; - background-color: #cde4d2; + 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: #6aae7a; - border-color: #6aae7a; + 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: #6aae7a; + color: var(--primary-accent); } a.text-primary:hover { - color: #519461; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #6aae7a; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #519461; + 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 #6aae7a; + 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 #6aae7a; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #6aae7a; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #6aae7a; - border-color: #6aae7a; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #6aae7a; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #6aae7a; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #6aae7a; + 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: #6aae7a; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #6aae7a; + 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); diff --git a/css/style.marsala.css b/css/style.marsala.css index 8b595bd..3c0230d 100644 --- a/css/style.marsala.css +++ b/css/style.marsala.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #955251; + --navbar-border-top: #532e2d; + --button-border: #6d3c3b; + --link-focus: #633736; + --form-shadow: rgba(149, 82, 81, 0.6); + --pagination-bg: #d2adad; + --link-hover-bg: #74403f; + --navbar-focus: #c08c8c; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #955251; + color: var(--primary-accent); } .accent { - color: #955251; + 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 #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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 #955251; + 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 #532e2d; + 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 #532e2d; + 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 #532e2d; + 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 #955251; + 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: #955251; + 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: #955251; + 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: #955251; - color: #955251; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #955251; + 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: #955251; + 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: #955251; + color: var(--primary-accent); background-color: #ffffff; - border-color: #955251; + 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: #955251; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #6d3c3b; + 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: #955251; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #955251; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #955251; + background: var(--primary-accent); color: #ffffff; - border-color: #955251; + 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: #955251; + 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: #955251; - border-color: #955251; + 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: #74403f; - border-color: #6d3c3b; + 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: #955251; - border-color: #955251; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #955251; + 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: #955251; + 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 #955251; + 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: #955251; + 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: #955251; - border-color: #955251; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; - border-color: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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 #955251; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #955251; + 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 #955251; - border-bottom: solid 1px #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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 #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #955251; + 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 #955251; + 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 #955251; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #955251; + 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 #955251; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #955251; + 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: #955251; + 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 #955251; + 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 #955251; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #955251; + 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: #c08c8c; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + 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: #955251; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #633736; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #955251; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(149, 82, 81, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(149, 82, 81, 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 #955251; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #955251; + 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: #955251; + 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: #955251; - background-color: #d2adad; + 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: #955251; - border-color: #955251; + 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: #955251; + color: var(--primary-accent); } a.text-primary:hover { - color: #74403f; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #955251; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #74403f; + 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 #955251; + 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 #955251; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #955251; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #955251; - border-color: #955251; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #955251; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #955251; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #955251; + 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: #955251; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #955251; + 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); diff --git a/css/style.pink.css b/css/style.pink.css index afce258..475f852 100644 --- a/css/style.pink.css +++ b/css/style.pink.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #c27baa; + --navbar-border-top: #934478; + --button-border: #af518f; + --link-focus: #a44c87; + --form-shadow: rgba(194, 123, 170, 0.6); + --pagination-bg: #f2e4ed; + --link-hover-bg: #b25894; + --navbar-focus: #e2c1d7; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #c27baa; + color: var(--primary-accent); } .accent { - color: #c27baa; + 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 #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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 #c27baa; + 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 #934478; + 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 #934478; + 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 #934478; + 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 #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; - color: #c27baa; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #c27baa; + 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: #c27baa; + 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: #c27baa; + color: var(--primary-accent); background-color: #ffffff; - border-color: #c27baa; + 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: #c27baa; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #af518f; + 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: #c27baa; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #c27baa; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #c27baa; + background: var(--primary-accent); color: #ffffff; - border-color: #c27baa; + 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: #c27baa; + 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: #c27baa; - border-color: #c27baa; + 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: #b25894; - border-color: #af518f; + 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: #c27baa; - border-color: #c27baa; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #c27baa; + 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: #c27baa; + 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 #c27baa; + 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: #c27baa; + 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: #c27baa; - border-color: #c27baa; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; - border-color: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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 #c27baa; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #c27baa; + 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 #c27baa; - border-bottom: solid 1px #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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 #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #c27baa; + 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 #c27baa; + 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 #c27baa; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #c27baa; + 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 #c27baa; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #c27baa; + 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: #c27baa; + 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 #c27baa; + 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 #c27baa; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #c27baa; + 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: #e2c1d7; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + 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: #c27baa; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #a44c87; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #c27baa; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194, 123, 170, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194, 123, 170, 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 #c27baa; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #c27baa; + 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: #c27baa; + 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: #c27baa; - background-color: #f2e4ed; + 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: #c27baa; - border-color: #c27baa; + 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: #c27baa; + color: var(--primary-accent); } a.text-primary:hover { - color: #b25894; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #c27baa; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #b25894; + 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 #c27baa; + 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 #c27baa; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #c27baa; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #c27baa; - border-color: #c27baa; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #c27baa; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #c27baa; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #c27baa; + 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: #c27baa; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #c27baa; + 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); diff --git a/css/style.red.css b/css/style.red.css index 684a000..4b97850 100644 --- a/css/style.red.css +++ b/css/style.red.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #da4d4d; + --navbar-border-top: #a02121; + --button-border: #c22828; + --link-focus: #b52626; + --form-shadow: rgba(218, 77, 77, 0.6); + --pagination-bg: #f4cccc; + --link-hover-bg: #ca2a2a; + --navbar-focus: #eca1a1; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #da4d4d; + color: var(--primary-accent); } .accent { - color: #da4d4d; + 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 #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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 #da4d4d; + 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 #a02121; + 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 #a02121; + 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 #a02121; + 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 #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; - color: #da4d4d; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + color: var(--primary-accent); background-color: #ffffff; - border-color: #da4d4d; + 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: #da4d4d; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #c22828; + 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: #da4d4d; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #da4d4d; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #da4d4d; + background: var(--primary-accent); color: #ffffff; - border-color: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; - border-color: #da4d4d; + 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: #ca2a2a; - border-color: #c22828; + 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: #da4d4d; - border-color: #da4d4d; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #da4d4d; + 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: #da4d4d; + 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 #da4d4d; + 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: #da4d4d; + 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: #da4d4d; - border-color: #da4d4d; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; - border-color: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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 #da4d4d; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #da4d4d; + 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 #da4d4d; - border-bottom: solid 1px #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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 #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #da4d4d; + 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 #da4d4d; + 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 #da4d4d; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #da4d4d; + 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 #da4d4d; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #da4d4d; + 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: #da4d4d; + 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 #da4d4d; + 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 #da4d4d; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #da4d4d; + 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: #eca1a1; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #b52626; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #da4d4d; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(218, 77, 77, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(218, 77, 77, 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 #da4d4d; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #da4d4d; + 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: #da4d4d; + 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: #da4d4d; - background-color: #f4cccc; + 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: #da4d4d; - border-color: #da4d4d; + 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: #da4d4d; + color: var(--primary-accent); } a.text-primary:hover { - color: #ca2a2a; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #da4d4d; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #ca2a2a; + 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 #da4d4d; + 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 #da4d4d; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #da4d4d; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #da4d4d; - border-color: #da4d4d; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #da4d4d; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #da4d4d; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #da4d4d; + 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: #da4d4d; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #da4d4d; + 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); diff --git a/css/style.turquoise.css b/css/style.turquoise.css index cc7d5f9..6525ec2 100644 --- a/css/style.turquoise.css +++ b/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); diff --git a/css/style.violet.css b/css/style.violet.css index 77c7333..2db14d2 100644 --- a/css/style.violet.css +++ b/css/style.violet.css @@ -1,3 +1,15 @@ +/* Themed colors */ +:root { + --primary-accent: #986dbd; + --navbar-border-top: #653d87; + --button-border: #7a4aa3; + --link-focus: #724599; + --form-shadow: rgba(152, 109, 189, 0.6); + --pagination-bg: #e2d6ed; + --link-hover-bg: #7f4daa; + --navbar-focus: #cab3dd; +} + .clearfix:before, .clearfix:after, .navbar:before, @@ -59,10 +71,10 @@ button { cursor: pointer !important; } .required { - color: #986dbd; + color: var(--primary-accent); } .accent { - color: #986dbd; + 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 #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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 #986dbd; + 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 #653d87; + 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 #653d87; + 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 #653d87; + 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 #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; - color: #986dbd; + border-color: var(--primary-accent); + color: var(--primary-accent); } .navbar #search { clear: both; - border-top: solid 1px #986dbd; + 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: #986dbd; + 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: #986dbd; + color: var(--primary-accent); background-color: #ffffff; - border-color: #986dbd; + 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: #986dbd; + color: var(--primary-accent); background-color: #e6e6e6; - border-color: #7a4aa3; + 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: #986dbd; + border-color: var(--primary-accent); } .btn-template-main .badge { color: #ffffff; - background-color: #986dbd; + background-color: var(--primary-accent); } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { - background: #986dbd; + background: var(--primary-accent); color: #ffffff; - border-color: #986dbd; + 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: #986dbd; + 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: #986dbd; - border-color: #986dbd; + 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: #7f4daa; - border-color: #7a4aa3; + 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: #986dbd; - border-color: #986dbd; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .btn-template-primary .badge { - color: #986dbd; + 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: #986dbd; + 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 #986dbd; + 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: #986dbd; + 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: #986dbd; - border-color: #986dbd; + color: var(--primary-accent); + border-color: var(--primary-accent); } .panel.sidebar-menu ul.tag-cloud li.active a { color: #FFFFFF; - background-color: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; - border-color: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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 #986dbd; + border: solid 1px var(--primary-accent); overflow: hidden; } .packages .package .package-header { height: 57px; color: #fff; line-height: 57px; - background: #986dbd; + 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 #986dbd; - border-bottom: solid 1px #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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 #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + border-color: var(--primary-accent); } .nav-tabs { - border-bottom: 1px solid #986dbd; + 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 #986dbd; + 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 #986dbd; + border: 1px solid var(--primary-accent); border-bottom-color: transparent; cursor: default; } .nav-tabs.nav-justified { width: 100%; - border-bottom: solid 1px #986dbd; + 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 #986dbd; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #986dbd; + 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: #986dbd; + 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 #986dbd; + 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 #986dbd; + border: 1px solid var(--primary-accent); } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #986dbd; + 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: #cab3dd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + 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: #986dbd; + color: var(--primary-accent); text-decoration: none; } a:hover, a:focus { - color: #724599; + color: var(--link-focus); text-decoration: underline; } a:focus { @@ -3250,10 +3262,10 @@ label { border-radius: 0; } .form-control:focus { - border-color: #986dbd; + border-color: var(--primary-accent); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(152, 109, 189, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(152, 109, 189, 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 #986dbd; + border: 1px solid var(--primary-accent); border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; - background-color: #986dbd; + 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: #986dbd; + 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: #986dbd; - background-color: #e2d6ed; + 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: #986dbd; - border-color: #986dbd; + 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: #986dbd; + color: var(--primary-accent); } a.text-primary:hover { - color: #7f4daa; + color: var(--link-hover-bg); } .bg-primary { color: #fff; - background-color: #986dbd; + background-color: var(--primary-accent); } a.bg-primary:hover { - background-color: #7f4daa; + 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 #986dbd; + 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 #986dbd; + border-right: 5px solid var(--primary-accent); } address { margin-bottom: 20px; @@ -3486,22 +3498,22 @@ address { border-color: #ccc; } .panel-primary { - border-color: #986dbd; + border-color: var(--primary-accent); } .panel-primary > .panel-heading { color: #ffffff; - background-color: #986dbd; - border-color: #986dbd; + background-color: var(--primary-accent); + border-color: var(--primary-accent); } .panel-primary > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #986dbd; + border-top-color: var(--primary-accent); } .panel-primary > .panel-heading .badge { - color: #986dbd; + color: var(--primary-accent); background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #986dbd; + 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: #986dbd; + color: var(--primary-accent); background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; } .progress-bar-primary { - background-color: #986dbd; + 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); |