00ea909d05
Use the same fonts as the static site, as per the LCA2018 branding guide. Shrink headings on the Dashboard to suit new fonts.
337 lines
7.1 KiB
CSS
337 lines
7.1 KiB
CSS
/* Fonts from our style guide */
|
|
@font-face {
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(../fonts/TitilliumWeb-Bold.ttf);
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: local('Titillium Web Black'), local('TitilliumWeb-Black'), url(../fonts/TitilliumWeb-Black.ttf);
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular.ttf);
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/Roboto-Bold.ttf);
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
}
|
|
|
|
/* Elements */
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h1 a {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
font-weight: 900;
|
|
color: #005760;
|
|
}
|
|
|
|
h2,
|
|
h2 a {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
color: #4E87A0;
|
|
}
|
|
|
|
h3,
|
|
h3 a {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
color: #5BC2E7;
|
|
}
|
|
|
|
h4,
|
|
h4 a {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
color: #DE7C00;
|
|
}
|
|
|
|
img.profile-pic {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.label-required:after { content: ' *'; }
|
|
.abstract, .bio, .monospace-text {
|
|
font-family: Hack, monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* MESSAGES & ERRORS */
|
|
|
|
ul.messagelist {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
ul.messagelist li {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
padding: 10px 10px 10px 65px;
|
|
margin: 0 0 10px 0;
|
|
background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
|
|
background-size: 16px auto;
|
|
color: #333;
|
|
}
|
|
|
|
ul.messagelist li.warning {
|
|
background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
|
|
background-size: 14px auto;
|
|
}
|
|
|
|
ul.messagelist li.error {
|
|
background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
|
|
background-size: 16px auto;
|
|
}
|
|
|
|
.errornote {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
display: block;
|
|
padding: 10px 12px;
|
|
margin: 0 0 10px 0;
|
|
color: #ba2121;
|
|
border: 1px solid #ba2121;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
background-position: 5px 12px;
|
|
}
|
|
|
|
ul.errorlist {
|
|
margin: 0 0 4px;
|
|
padding: 0;
|
|
color: #ba2121;
|
|
background: #fff;
|
|
}
|
|
|
|
ul.errorlist li {
|
|
font-size: 13px;
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
ul.errorlist li:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
ul.errorlist li a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
td ul.errorlist {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
td ul.errorlist li {
|
|
margin: 0;
|
|
}
|
|
|
|
.form-row.errors {
|
|
margin: 0;
|
|
border: none;
|
|
border-bottom: 1px solid #eee;
|
|
background: none;
|
|
}
|
|
|
|
.form-row.errors ul.errorlist li {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.errors input, .errors select, .errors textarea {
|
|
border: 1px solid #ba2121;
|
|
}
|
|
|
|
div.system-message {
|
|
background: #ffc;
|
|
margin: 10px;
|
|
padding: 6px 8px;
|
|
font-size: .8em;
|
|
}
|
|
|
|
div.system-message p.system-message-title {
|
|
padding: 4px 5px 4px 25px;
|
|
margin: 0;
|
|
color: #c11;
|
|
background: #ffefef url(../img/icon-no.svg) 5px 5px no-repeat;
|
|
}
|
|
|
|
.description {
|
|
font-size: 12px;
|
|
padding: 5px 0 0 12px;
|
|
}
|
|
|
|
/**
|
|
* The CSS shown here will not be introduced in the Quickstart guide, but shows
|
|
* how you can use CSS to style your Element's container.
|
|
*/
|
|
.StripeElement {
|
|
background-color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
border: 3px solid transparent;
|
|
box-shadow: 1px 3px 5px 1px #e6ebf1;
|
|
-webkit-transition: box-shadow 150ms ease;
|
|
transition: box-shadow 150ms ease;
|
|
}
|
|
|
|
.StripeElement--focus {
|
|
box-shadow: 1px 3px 5px 1px #cfd7df;
|
|
}
|
|
|
|
.StripeElement--invalid {
|
|
border-color: #fa755a;
|
|
}
|
|
|
|
.StripeElement--webkit-autofill {
|
|
background-color: #fefde5 !important;
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar-nav > li > a, .navbar-brand {
|
|
padding-top:5px !important; padding-bottom:0 !important;
|
|
height: 40px;
|
|
|
|
}
|
|
.navbar {
|
|
min-height: 40px !important;
|
|
background-color: #ffffff;
|
|
border: #ffffff;
|
|
color: #000000;
|
|
width: fit-content;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
/* Standard nav menu styling */
|
|
.navbar-nav li a {
|
|
color: #575757 !important;
|
|
padding: 0px;
|
|
line-height: 32px;
|
|
font-family: 'Titillium Web', sans-serif;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.navbar-nav > li { width: 130px; text-align: center; }
|
|
|
|
.dropdown-menu {
|
|
padding: 0;
|
|
left: 130px;
|
|
}
|
|
|
|
.dropdown-menu > li {
|
|
min-width: unset;
|
|
text-align: left;
|
|
padding: 0 0 0 5px;
|
|
}
|
|
|
|
.banner table, .banner thead, .banner tbody, .banner th, .banner td, .banner tr {
|
|
border: 0px !important;
|
|
}
|
|
|
|
.room {
|
|
display: none;
|
|
}
|
|
.speaker {
|
|
display: block;
|
|
}
|
|
|
|
/* 4 different navbar styles to alternate through */
|
|
.navbar-nav li:nth-child(4n+0) {background-color: #ECE81A;}
|
|
|
|
.navbar-nav li:nth-child(4n+1) { background-color: #DE7C00; }
|
|
|
|
.navbar-nav li:nth-child(4n+2) { background-color: #5BC2E7; }
|
|
|
|
.navbar-nav li:nth-child(4n+3) { background-color: #4E87A0; }
|
|
|
|
/* nav menu highligh */
|
|
.navbar-nav li:hover { background-color: #005760; }
|
|
.navbar-nav > li:hover > a { color: #e9e9e9 !important;}
|
|
.navbar-nav > li > a:hover { background-color: transparent !important; }
|
|
.navbar-nav .dropdown-menu li:hover > a { background-color: #005760 !important; color: #e9e9e9 !important; }
|
|
|
|
.navbar-nav .open > a, .navbar-nav .open > a:hover, .navbar-nav .open > a:focus {
|
|
background-color: transparent !important;
|
|
color: #e9e9e9 !important;
|
|
border: none;
|
|
}
|
|
|
|
/* Schedule, proposal and presenter display */
|
|
/* Make sure twitter/link buttons get displayed */
|
|
|
|
.presenters .btn-group {
|
|
display: inline-flex;
|
|
margin-left: 10px;
|
|
}
|
|
.presenters .btn-svg { width: 20px; }
|
|
|
|
@media all and (max-width: 760px) {
|
|
.navbar-nav { margin: 0px -15px; }
|
|
.navbar-nav > li { width: 120px !important; }
|
|
.dropdown-menu { left: 20px; top: 30px; }
|
|
.room { display: block; }
|
|
}
|
|
|
|
@media all and (min-width: 760px) {
|
|
.navbar-nav > li {
|
|
-webkit-transform: skew(-45deg);
|
|
-moz-transform: skew(-45deg);
|
|
transform: skew(-45deg);
|
|
}
|
|
.navbar-nav > li > * {
|
|
-webkit-transform: skew(45deg);
|
|
-moz-transform: skew(45deg);
|
|
transform: skew(45deg);
|
|
}
|
|
}
|
|
@media only screen and (max-width: 760px) {
|
|
/* Force table to not be like tables anymore */
|
|
table {
|
|
display: table-row;
|
|
}
|
|
thead {
|
|
display: none;
|
|
}
|
|
tbody, th, td, tr {
|
|
display: block;
|
|
}
|
|
|
|
td {
|
|
/* Behave like a "row" */
|
|
border: none;
|
|
position: relative;yes
|
|
padding-left: 50%;
|
|
}
|
|
|
|
td:before {
|
|
/* Now like a table header */
|
|
position: absolute;
|
|
/* Top/left values mimic padding */
|
|
top: 6px;
|
|
left: 6px;
|
|
width: 45%;
|
|
padding-right: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-nav {
|
|
padding-left: 20px;
|
|
}
|
|
}
|