Commit 76c40e98 authored by nicol's avatar nicol

Merge from live. Adds new generic styles (tints, blue box, grey buttons, green...

Merge from live. Adds new generic styles (tints, blue box, grey buttons, green ticks, images) and incorporates new Partner page, Tech Provider Page, Groups page, Make it Happen fixes, new Reg/lang pages, Demo tweaks, ESR tweaks, Spark promo tweaks, CiviCamp & Con fixes, Nav fixes - around 640 lines. Also harmonizes declaration indents at two spaces (making a lot of the changes).
parent d6ffcbc8
/***************************************************************
CIVICRM-ORG CUSTOM CSS
Color: Green (heading) - #82c459
Color: Green (heading) - #82c459
Pink: #da2e6b
Blue: #086287;
Mid grey - #777
......@@ -9,11 +9,11 @@
Light grey tint - #eee
Light grey line - #e6e5e5
Fonts: Main heading - Oswald, 700, caps, green
Secondary headings - Source Sans Pro 700 & 300 uppercase
Fonts: Main heading - Oswald, 700, caps, green
Secondary headings - Source Sans Pro 700 & 300
Contents: Core Typography
Page elements
Contents:Core (generic type, buttons, lists, image styles)
Page elements (boxes, structure, footer, etc)
Navigation
Page - front
Page - explore CiviCRM
......@@ -21,9 +21,10 @@
Page - events various & civicons
Page - working groups
Pages - features
Page - blog
Page - blog (all other pages continue after this)
CiviCRM Specific
NB: Media queries are inline wherever possible
Media queries are inline wherever possible
*****************************************************************/
......@@ -39,10 +40,10 @@
/* GENERIC TEXT STYLES */
body {
color: #231f20;
color: #231f20;
}
a {
-webkit-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
......@@ -56,50 +57,61 @@ a {
.big.intro {
font-size: 150%;
}
.small {
font-size: 88%;
}
.capital {
text-transform: uppercase !important;
text-transform: uppercase !important;
}
.lower {
text-transform: inherit;
text-transform: inherit;
}
.thin {
font-weight: 300;
font-weight: 300;
}
.thick {
font-weight: 700;
}
.white {
color: #fff !important;
.grey, .gray {
color: #777;
}
.border {
border-bottom: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-bottom: 10px;
margin-bottom: 16px;
}
.top50p {
margin-top: 50px !Important;
margin-top: 50px !important;
}
.top30p {
margin-top: 30px !Important;
margin-top: 30px !important;
}
.top10p {
margin-top: 10px !Important;
margin-top: 10px !important;
}
.top0p {
margin-top: 0 !important;
}
p.credit,
p.meta {
p.credit, p.meta {
font-size: 75%;
font-style: italic;
color: #555;
margin: 10px 0;
}
.table p {
font-weight: 300;
}
.green-lead {
margin: 0 0 10px 0;
color: #82c459;
font-family: 'Oswald',sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 700;
}
.green-lead.white {
color: #fff !important;
}
.green-lead a {
color: #82c459;
color: #82c459;
}
h1.green-lead {
font-size: 60px;
......@@ -114,7 +126,7 @@ h2.thin {
line-height: 32px;
}
h2.thick {
text-transform: inherit;
text-transform: inherit;
font-size: 28px;
line-height: 32px;
color: #333;
......@@ -124,7 +136,7 @@ h3.thick {
margin-bottom: 6px;
}
h3.thin {
margin-top: 0;
margin-top: 0;
}
h3.clean-green {
color: #82c459;
......@@ -138,90 +150,105 @@ h4.clean-green {
font-size: 31px;
line-height: 38px;
}
h5.thin, h6.thin {
font-weight: 400;
}
a.full-width {
width: 100%;
width: 100%;
text-align: center;
padding: 7px;
margin: 7px 0;
}
.float-left {
float: left !important;
padding: 0 10px 10px 0;
a.smaller {
font-size: 18px;
padding: 10px 20px;
}
.float-right {
float: right !important;
padding: 0 0 10px 10px;
i.greentick::before {
font-family: fontawesome;
left: 0;
color: #82C459;
content: "\f00c";
}
.text-left {
text-align: left !important;
i.greentick {
text-align: center;
}
.address {
color: #333;
font-size: 16px;
}
/* GENERIC BUTTONS */
/* GENERIC BUTTONS & LISTS */
a.bluebutton{
background-color: #0786b5;
color: #fff;
font-size: 22px;
padding: 15px 30px;
display: inline-block;
margin-bottom: 15px;
border-radius: 3px;
a.bluebutton {
background-color: #0786b5;
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;
a.bluebutton:hover, a.bluebutton:active {
background-image: none;
background-color: #056085;
text-decoration: none;
}
a.greenbutton {
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
cursor: pointer;
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
cursor: pointer;
}
a.greenbutton:hover, a.greenbutton:active {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
}
a.greybutton {
background-color: #999;
color: #fff;
font-size: 22px;
padding: 15px 30px;
display: inline-block;
margin-bottom: 15px;
border-radius: 3px;
}
a.greybutton:hover, a.greybutton:active {
background-image: none;
background-color: #555;
text-decoration: none;
}
@media (max-width: 768px) {
a.bluebutton, a.greenbutton {
font-size: 18px;
padding: 15px;
}
a.bluebutton, a.greenbutton {
font-size: 18px;
padding: 15px;
}
}
a.greenbutton.small {
font-size: 16px;
padding: 5px 30px;
}
a.external-link:after {
content:"\F08E";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-left: 5px;
content: "\F08E";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-left: 5px;
}
/* GENERIC LISTS */
ul.checklist, ul.arrow {
position: relative;
padding-left: 30px;
}
ul.checklist li, ul.arrow li {
ul.checklist li, ul.arrow li {
list-style: outside none none;
margin-bottom: 10px;
}
ul.checklist li::before,
ul.arrow li::before {
ul.checklist li::before, ul.arrow li::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
left: 0;
......@@ -235,51 +262,55 @@ ul.arrow li::before {
content: "\f061";
}
ul.nav-list {
list-style: none;
padding-left: 0;
list-style: none;
padding-left: 0;
}
.tag-list {
background-color: #a3a3a3;
padding: 4px 8px;
border-radius: 3px;
margin: 0 5px 5px 0;
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
display: inline-block;
text-align: left;
color: #fff !important;
}
.tag-list a,
.tag-list a:visited {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.tag-list a:hover,
.tag-list a:focus {
text-decoration: underline;
background-color: #a3a3a3;
padding: 4px 8px;
border-radius: 3px;
margin: 0 5px 5px 0;
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
display: inline-block;
text-align: left;
color: #fff !important;
}
.tag-list a, .tag-list a:visited {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.tag-list a:hover, .tag-list a:focus {
text-decoration: underline;
}
.tag-list.green {
background-color: #82c459;
background-color: #82c459;
}
.tag-list.blue {
background-color: #086287;
background-color: #086287;
}
.tag-list.pink {
background-color: #da2e6b;
background-color: #da2e6b;
}
/* GENERIC IMAGE STYLES */
.page-node .field-name-body img {
max-width: 100%;
height: auto;
max-width: 100%;
height: auto;
}
img.small-circle {
width: 80px;
height: 80px;
border-radius: 40px;
float: left;
margin: 0 10px 10px 0;
}
img.mid-circle {
width: 120px;
height: 120px;
border-radius: 60px;
border-radius: 60px;
float: left;
margin: 0 10px 10px 0;
}
......@@ -287,87 +318,119 @@ img.img-w-400 {
width: 400px;
height: auto;
}
img.img-w-250 {
width: 250px !important;
height: auto !important;
}
img.img-w-150 {
width: 150px !important;
height: auto !important;
}
img.img-w-100 {
width: 100px !important;
height: auto !important;
}
img.img-w-75 {
width: 75px !important;
height: auto !important;
}
img.img-h-150 {
height: 150px !important;
width: auto !important;
}
img.half {
width: 50%;
height: auto;
width: 50%;
height: auto;
}
img.img-center {
margin: 0 auto;
}
img.shadowed {
box-shadow: 0px 0px 5px #555;
box-shadow: 0px 0px 5px #555;
}
/* Bootstrap responsive code */
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.tint-80 {
background: rgba(0, 0, 0, 0.8);
}
.embed-responsive-4by3 {
padding-bottom: 75%;
.tint-70 {
background: rgba(0, 0, 0, 0.7);
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
.tint-60 {
background: rgba(0, 0, 0, 0.6);
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
/* GENERIC LAYOUT */
.float-left {
float: left !important;
padding: 0 10px 10px 0;
}
.float-right {
float: right !important;
padding: 0 0 10px 10px;
}
.text-left {
text-align: left !important;
}
.top0p {
margin-top: 0;
}
.max-50 {
max-width: 50%;
}
.max-60 {
max-width: 60%;
}
.max-70 {
max-width: 70%;
}
.max-80 {
max-width: 80%;
}
.two-column, .two-columns {
column-count: 2;
}
.three-column, .three-columns {
column-count: 3;
}
.flex-container {
display: flex;
}
.flex-container.right {
justify-content: flex-end;
}
.no-margin-top {
margin-top: 0;
}
.no-margin-bottom {
margin-bottom: 0;
}
.clear-all {
clear: both;
}
/* COMMON TYPE ELEMENTS */
.views-field-body,
.pane-content p,
.pane-content li {
color: #231f20;
.views-field-body, .pane-content p, .pane-content li {
color: #231f20;
}
.stripe-blue .pane-content p,
.stripe-blue .pane-content li,
.stripe-green .pane-content p,
.stripe-green .pane-content li {
color: #fff;
.stripe-blue .pane-content p, .stripe-blue .pane-content li, .stripe-green .pane-content p, .stripe-green .pane-content li {
color: #fff;
}
.page-webinars .page-header h1,
.page-local-events .page-header h1,
.page-strategic-initiatives .page-header h1,
.banner .page-header h1 {
font-family: 'Oswald',sans-serif;
.page-webinars .page-header h1, .page-local-events .page-header h1, .page-strategic-initiatives .page-header h1, .banner .page-header h1 {
font-family: 'Oswald', sans-serif;
font-weight: 700;
text-align: center;
font-size: 46px;
line-height: 1.03;
margin-top:100px
margin-top: 100px
}
.page-webinars .view-header > p,
.page-local-events .view-header > p,
.page-strategic-initiatives .view-header > p {
.page-webinars .view-header>p, .page-local-events .view-header>p, .page-strategic-initiatives .view-header>p {
width: 60%;
margin: 0 auto 40px;
}
.page-civicon-master #block-system-main p,
.page-node-5689 #block-system-main p,
.page-node-5684 #block-system-main p {
.page-civicon-master #block-system-main p, .page-node-5689 #block-system-main p, .page-node-5684 #block-system-main p {
text-align: center;
width: 80%;
margin: 0 auto;
}
.pane-blog-news h2.pane-title,
.pane-blog-taxonomy h2.pane-title,
.cms-experts.pane-partners-and-contributors h2,
.pane-extensions-directory h2.pane-title {
.pane-blog-news h2.pane-title, .pane-blog-taxonomy h2.pane-title, .cms-experts.pane-partners-and-contributors h2, .pane-extensions-directory h2.pane-title {
font-weight: 300;
padding: 0 0 6px 0;
margin-bottom: 15px;
......@@ -376,188 +439,175 @@ img.shadowed {
text-transform: none;
border-bottom: 1px solid #ccc;
}
.pane-blog-news h4 a,
.pane-extensions-directory h2.field-content a {
font-family: oswald,sans-serif;
.pane-blog-news h4 a, .pane-extensions-directory h2.field-content a {
font-family: oswald, sans-serif;
font-size: 24px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 8px 0;
text-align: left;
}
.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 {
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
cursor: pointer;
.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 {
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
cursor: pointer;
}
.page-civicon .civicon-lead a.full-details {
margin-right: 15px;
}
.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 {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
margin-right: 15px;
}
.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 {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
}
.block-service-links {
min-height: 130px;
text-align: center;
padding-top: 14px;
min-height: 130px;
text-align: center;
padding-top: 14px;
}
.block-service-links h2 {
font-size: 18px;
font-size: 18px;
margin: 10px 0;
font-weight: 300;
}
.block-service-links .service-links a,
a.darken,
a.lighten {
display: inline-block;
margin: 0 5px 10px 0;
background: #000;
padding: 0;
.block-service-links .service-links a, a.darken, a.lighten {
display: inline-block;
margin: 0 5px 10px 0;
background: #000;
padding: 0;
}
a.lighten {
background: #fff;
}