Commit f8a50f2e authored by Aegir user's avatar Aegir user

css file reworking & bug-fixes

parent 8bbd5d1b
/** FONTS **/
/***************************************************************
CIVICRM-ORG CUSTOM CSS
Color: Green (heading) - #82c459
Dark grey - #777
Light grey tint - #eee
Light grey line - #e6e5e5
Fonts: Main heading - Oswald
Secondary headings - Source Sans Pro 700 & 300 uppercase
Contents: Core Typography
Page elements
Navigation
Page - front
Page - explore CiviCRM
Page - user pages
Page - events various & civicons
Page - working groups
Pages - features
Page - blog
NB: Media queries are inline wherever possible
23.12.2016
*****************************************************************/
/*************
CORE TYPE
***************/
/* Imports */
@import 'https://fonts.googleapis.com/css?family=Oswald:700&subset=latin-ext';
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700,700i';
/* FIXES */
/* SPACING */
.page-header h1,
.page-node .page-header,
.page-header {
margin-top: 0px;
}
body.admin-menu header#page-header {
margin-top: 16px;
}
.page-local-events .page-header,
.page-webinars .page-header {
margin-top: 80px;
}
body.navbar-is-fixed-top.breadcrumbs.page-node-5424,
body.navbar-is-fixed-top.breadcrumbs,
body.navbar-is-fixed-top {
padding-top: 171px !important;
}
@media (max-width: 999px) {
body.admin-menu header#page-header {
margin-top: -35px;}
body.page-working-groups header#page-header {
margin-top: 95px;}
.navbar.fixed.scrollable,
.menu-name-menu-events-sub-menu ul,
.menu-name-menu-top-navigation ul {
top: 121px !important; }
body.admin-menu .navbar.fixed.scrollable,
body.admin-menu .menu-name-menu-events-sub-menu ul,
body.admin-menu .menu-name-menu-top-navigation ul {
top: 140px !important;}
}
/* TYPE ELEMENTS */
.page-webinars .page-header h1,
.page-local-events .page-header h1,
.page-strategic-initiatives .page-header h1 {
font-family: 'Oswald',sans-serif;
font-weight: 700;
text-align: center;
font-size: 46px;
line-height: 1.03;
margin-top:100px
}
.page-webinars .view-header > p,
.page-local-events .view-header > p,
.page-strategic-initiatives .view-header > p {
width: 60%;
margin: 0 auto 40px;
}
ul.checklist li {
list-style: outside none none;
margin-bottom: 10px;
}
ul.checklist li::before {
content: "\f00c";
font-family: fontawesome;
left: 0;
position: absolute;
color: #82C459;
}
ul.checklist {
position: relative;
padding-left: 30px;
}
a.bluebutton{
background: #056085;
background: -moz-linear-gradient(top, #056085 0%, #0786b5 100%);
background: -webkit-linear-gradient(top, #056085 0%,#0786b5 100%);
background: linear-gradient(to bottom, #056085 0%,#0786b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#056085', endColorstr='#0786b5',GradientType=0 );
color: #fff;
font-size: 22px;
padding: 15px 30px;
display: inline-block;
margin-bottom: 15px;
border-radius: 3px;
}
a.bluebutton:hover,
a.bluebutton:active{
background-image: none;
background-color: #056085;
text-decoration: none;
}
.field-name-field-register-link .field-item a,
.field-name-field-full-details-link .field-item a,
.field-name-field-register-here .field-item a,
.page-civicon .civicon-lead .links a,
.page-civicon .view-grouping-content h3 > span > a,
.page-civicon .views-field-field-sponsorship-payment a,
a.greenbutton {
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
}
.field-name-field-register-link .field-item a:hover,
.field-name-field-register-link .field-item a:active,
.field-name-field-full-details-link .field-item a:hover,
.field-name-field-full-details-link .field-item a:active,
.field-name-field-register-here .field-item a:hover,
.field-name-field-register-here .field-item a:active,
.page-civicon .civicon-lead .links a:hover,
.page-civicon .civicon-lead .links a:active,
.page-civicon .view-grouping-content h3 > span > a:hover,
.page-civicon .view-grouping-content h3 > span > a:focus,
.page-civicon .views-field-field-sponsorship-payment a:focus,
.page-civicon .views-field-field-sponsorship-payment a:hover,
a.greenbutton:hover, a.greenbutton:active {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
}
/* BOOTSTRAP FIXES */
/* provides bootstrap container to panels or pages without a container */
.bootstrapcon .bootstrap-twocol-stacked {
.bootstrapcon .bootstrap-twocol-stacked,
.node-type-strategic-initiative .bootstrap-twocol-stacked,
.page-working-groups .bootstrap-twocol-stacked {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
width: 1190px;
margin-bottom: 25px;
} /* provides bootstrap container to panels or pages without a container */
}
.node-type-conference .bootstrap-twocol-stacked .row:nth-of-type(n+2) {
width: 1190px;
margin: 20px auto 40px;
}
@media (max-width:1200px){
.bootstrapcon .bootstrap-twocol-stacked {width:990px}
.bootstrapcon .bootstrap-twocol-stacked,
.page-working-groups .bootstrap-twocol-stacked,
.node-type-strategic-initiative .bootstrap-twocol-stacked {width:990px}
.node-type-conference .bootstrap-twocol-stacked .row:nth-of-type(n+2) {
width: 990px;
margin: 0 auto;
}
}
@media (max-width:992px){
.bootstrapcon .bootstrap-twocol-stacked {width:770px}
.bootstrapcon .bootstrap-twocol-stacked,
.page-working-groups .bootstrap-twocol-stacked,
.node-type-strategic-initiative .bootstrap-twocol-stacked {width:770px}
.node-type-conference .bootstrap-twocol-stacked .row:nth-of-type(n+2) {
width: 770px;
margin: 0 auto; }
}
@media (max-width:768px){
.bootstrapcon .bootstrap-twocol-stacked {width:100%}
.bootstrapcon .bootstrap-twocol-stacked,
.page-working-groups .bootstrap-twocol-stacked,
.node-type-strategic-initiative .bootstrap-twocol-stacked,
.node-type-conference .bootstrap-twocol-stacked .row:nth-of-type(n+2) {width:100%}
}
/* GENERIC */
}
/* FORMS */
.form-item > label > input#edit-legal-accept {
margin: 5px 0px 0px -20px'
margin: 5px 0px 0px -20px;
}
.form-item > label > input#edit-legal-accept {
margin: 5px 0px 0px -20px'
margin: 5px 0px 0px -20px;
}
.page-node-5734 tr.civicrm_1_contribution_1 td:nth-child(2)::first-letter,
.page-node-5734 tr#wf-crm-billing-total td + td::first-letter {
color: #fff;
display: none;
}
/*************
PAGE ELEMENTS
***************/
/* PAGE STRUCTURE */
.CiviPage {
margin-top: inherit;
}
/* COMMENTS */
#comments h2 {
font-weight: 300;
margin: 100px 0px 10px 0px;
}
#comments h3 a {
color: #635d5e;
}
/* BREADCRUMBS */
......@@ -44,9 +242,6 @@
.breadcrumb li a, .breadcrumb>li+li:before {
color: #777;
}
.page-header h1, .page-node .page-header, .page-header {
margin-top: 0px !important;
}
.stripe-black {
display: inherit;
margin-top: 100px;
......@@ -54,38 +249,106 @@
.stripe-black .crumbs-current-page {
display: none !important;
}
/* NEW NAVBAR */
.page-webinars .stripe-black, page-webinar .stripe-black,
.civicrm-events .stripe-black,
.page-local-events .stripe-black,
.node-type-conference .stripe-black,
.page-civicon .stripe-black,
.page-node-5424 .stripe-black,
.page-node-5424 .page-header,
.page-node-5424 .navbar-fixed-top .stripe-black {
display: none;
}
.page-working-groups .stripe-black,
.blog-listing .stripe-black,
.page-taxonomy-term .stripe-black,
.node-type-blog .stripe-black {
margin-top: 30px;
}
/* FOOTER TOP */
.page-civicon .footer-top,
.page-local-events .footer-top,
.page-webinar .footer-top,
.page-strategic-initiatives .footer-top {
background-color: #eee;
text-align: center;
margin-top: 60px;
}
.page-civicon .footer-top .container,
.page-local-events .footer-top .container,
.page-webinar .footer-top .container,
.page-strategic-initiatives .footer-top .container {
padding: 50px 0px;
}
.footer-top .hire-expert .container {
padding: 0px !important;
}
/* FOOTER BOTTOM */
.footer-bottom {
background: #363333 none repeat scroll 0 0;
color: #BBB7B7;
overflow: hidden;
}
.footer-bottom a{
color: #BBB7B7;
text-decoration: underline;
}
.footer-bottom a:hover{
color: #BBB7B7;
text-decoration: none;
}
.footer .container {
margin-bottom: 0;
}
.footer-bottom p {
font-size: 15px;
}
.region-footer-bottom .block {
margin-bottom: 40px;
}
/*************
NAVIGATION
***************/
/* TOP TOOLBAR SECONDARY NAVIGATION */
#topbar {
background: #eee;
}
.CiviPage {
margin-top: 38px;
.top-secondary-nav {
float: right;
font-size: 16px;
}
/* TOP PRIMARY NAVBAR */
section#block-menu-menu-top-navigation > ul {
margin: auto; display: table;
margin: auto;
display: table;
}
#navbar{
background: #fff;
border-bottom: 1px solid #e6e5e5;
}
#navbar.navbar-default .navbar-nav > li > a {
color: #231f20;
}
#navbar.navbar-default .navbar-nav > li > a:hover {
color: #82c459;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
#navbar.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #231f20;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
#navbar.navbar-default .navbar-nav > li > a:hover,
#navbar.navbar-default .navbar-nav > li > a.active {
background-color: transparent;
color: #82c459;
}
#navbar.navbar-default .navbar-nav > li > a.active{
color: #82c459;
}
header #navigation > ul.navbar-nav {
display: none;
}
......@@ -95,7 +358,7 @@ header #navigation > ul.navbar-nav {
margin-top: 0px;
}
.navbar-collapse.collapse.main {
width: calc(100% - 415px);
width: calc(100% - 215px);
float: left;
margin-top: 32px;
}
......@@ -120,10 +383,9 @@ header #navigation > ul.navbar-nav {
line-height: 1.5;
color: #231f20;
}
#navbar ul li a:hover,
#navbar ul li a:active,
#navbar ul li.active a{
#navbar ul li.active a {
color: #82c459;
background-color: transparent;
}
......@@ -134,11 +396,7 @@ header #navigation > ul.navbar-nav {
.top-primary-nav {
font-size: 22px;
}
.top-secondary-nav {
float: right;
font-size: 16px;
}
@media all and (max-width:999px){
@media all and (max-width:999px) {
#navbar ul li{
width: 100%;
}
......@@ -165,25 +423,95 @@ header #navigation > ul.navbar-nav {
.open > .dropdown-menu li a {
line-height: 30px !important;
}
.navbar.fixed.scrollable, .menu-name-menu-events-sub-menu ul, .menu-name-menu-top-navigation ul {
top: 120px !important;
}
.navbar-collapse.collapse.main {
width: 100% !important;
margin-top: 0px;
.navbar.fixed.scrollable, .menu-name-menu-events-sub-menu ul, .menu-name-menu-top-navigation ul {
top: 120px !important;
}
.navbar-collapse.collapse.main {
width: 100% !important;
margin-top: 0px;
}
section#block-menu-menu-top-navigation > ul {
margin: 0px;
}
margin: 0px;
}
header#page-header .menu-block-wrapper .nav > li a {
color: #635d5e;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 6px;
}
}
/* NAVBAR - THIRD SUBMENU */
.navbar.fixed.scrollable,
.menu-name-menu-events-sub-menu ul,
.menu-name-menu-top-navigation ul {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #e6e5e5;
border-color: #e6e5e5;
border-image: none;
border-style: none none solid;
border-width: medium medium 1px;
min-height: 0;
position: fixed;
text-align: center;
width: 100%;
top: inherit;
background-color: #fff;
z-index: 100;
}
.navbar.scrollable ul {
margin: 0;
padding: 0;
}
.navbar.scrollable ul li {
display: inline-block;
list-style: outside none none;
}
.navbar.scrollable li a {
border-left: 1px solid #e6e5e5;
color: #635d5e;
display: block;
height: 50px;
line-height: 50px;
padding: 0 15px;
}
.navbar.scrollable li a:hover,
.navbar.scrollable li a:active {
color: #82c459;
text-decoration: none;
}
.navbar.scrollable li:last-child a {
border-right: 1px solid #e6e5e5;
}
header#page-header .menu-block-wrapper .nav > li {
display: inline-block;
}
header#page-header .menu-block-wrapper .nav {
text-align: center;
}
header#page-header .menu-block-wrapper .nav > li a {
color: #635d5e;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 6px;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
header#page-header .menu-block-wrapper .nav > li a:hover,
header#page-header .menu-block-wrapper .nav > li a.active-trail {
color: #82c459;
background-color: transparent
}
/*************
PAGE - FRONT
***************/
/* HOME HERO SECTION */
#banner .pane-1 {
background: #231f20 url(/sites/all/themes/civicrm_bootstrap/images/bg-hero-banner.jpg) no-repeat scroll top center / cover;
overflow: hidden;
......@@ -204,25 +532,6 @@ header #navigation > ul.navbar-nav {
#banner .pane-1 .pane-content {
color: #fff;
}
a.bluebutton{
background: #056085;
background: -moz-linear-gradient(top, #056085 0%, #0786b5 100%);
background: -webkit-linear-gradient(top, #056085 0%,#0786b5 100%);
background: linear-gradient(to bottom, #056085 0%,#0786b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#056085', endColorstr='#0786b5',GradientType=0 );
color: #fff;
font-size: 22px;
padding: 15px 30px;
display: inline-block;
margin-bottom: 15px;
border-radius: 3px;
}
a.bluebutton:hover,
a.bluebutton:active{
background-image: none;
background-color: #056085;
text-decoration: none;
}
.support-line{
margin-bottom: 25px
}
......@@ -260,7 +569,9 @@ a.bluebutton:active{
font-size: 18px;
font-weight: bold;
}
/* NEWS AND EVENTS HOME */
.pane-homepage-news .views-field-title h3,
.pane-civi-upcoming-events .views-field-title h3,
.pane-homepage-news h2,
......@@ -322,7 +633,7 @@ a.bluebutton:active{
.pane-homepage-news .views-field-field-image img {
margin-bottom: 25px;
}
@media all and (max-width: 991px){
@media all and (max-width: 999px){
.pane-news-and-events .col-md-8,
.pane-news-and-events .col-md-4{
width: 100%;
......@@ -344,14 +655,11 @@ a.bluebutton:active{
.pane-partners-and-contributors {
text-align: center;
}
/* CIVICRM 101 */
.page-node-5424 .page-header,
.page-node-5424 .navbar-fixed-top .stripe-black {
display: none;
}
body.navbar-is-fixed-top.breadcrumbs.page-node-5424{
padding-top: 171px !important;
}
/*************
PAGE - EXPLORE CIVICRM
***************/
.page-node-5424 #white > div.container {
padding: 0;
width: 100%;
......@@ -359,48 +667,11 @@ body.navbar-is-fixed-top.breadcrumbs.page-node-5424{
.page-node-5424 .pane-node-body{
margin:0;
}
.navbar.fixed.scrollable, .menu-name-menu-events-sub-menu ul,
.menu-name-menu-top-navigation ul {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #e6e5e5;
border-color: #e6e5e5;
border-image: none;
border-style: none none solid;
border-width: medium medium 1px;
min-height: 0;
position: fixed;
text-align: center;
width: 100%;
top: 170px;
background-color: #fff;
z-index: 10;
}
.navbar.scrollable ul {
margin: 0;
padding: 0;
.page-node-5424.admin-menu .pane-content {
margin-top: -48px;
}
.navbar.scrollable ul li {
display: inline-block;
list-style: outside none none;
}
.navbar.scrollable li a {
border-left: 1px solid #e6e5e5;
color: #635d5e;
display: block;
height: 50px;
line-height: 50px;
padding: 0 15px;
}
.navbar.scrollable li a:hover,
.navbar.scrollable li a:active {
color: #82c459;
text-decoration: none;
}
.navbar.scrollable li:last-child a {
border-right: 1px solid #e6e5e5;
.page-node-5424 .explore {
padding-top: 30px;