You are here

brand.css in Open Social 8.9

[type="radio"]:checked + label:before {
  border-color: #29abe2;
}

[type="radio"]:focus + label:before {
  -webkit-box-shadow: 0 0 3px 2px #29abe2;
          box-shadow: 0 0 3px 2px #29abe2;
}

[type="checkbox"]:checked + label:after,
[type="radio"]:checked + label:after {
  border-color: #29abe2;
  background-color: #29abe2;
}

[type="checkbox"]:checked:not(:disabled) + label,
[type="radio"]:checked:not(:disabled) + label {
  color: #29abe2;
}

.tabs-left .nav-tabs > li.active > a,
.tabs-left .nav-tabs > li.active > a:hover,
.tabs-left .nav-tabs > li.active > a:focus {
  border-right-color: #29abe2;
}

.view-birthday .teaser--tile .teaser__image {
  background-color: #29abe2;
}

.cover,
.read-indicator,
.select2-container--social .select2-results__option--highlighted[aria-selected],
.select2-container--social .select2-results__option[aria-selected=true],
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: #29abe2;
}

.hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,
.hero-form[role='search'] .form-control:focus ~ .search-icon,
.hero-form[role='search'] .form-control:active ~ .search-icon {
  -webkit-box-shadow: 0 2px 0 0 #1f80aa;
          box-shadow: 0 2px 0 0 #1f80aa;
}

.hero-form[role='search'] .search-icon {
  fill: #29abe2;
}

.form-control:focus {
  border-color: #29abe2;
  -webkit-box-shadow: 0 2px 0 0 #29abe2;
          box-shadow: 0 2px 0 0 #29abe2;
}

.select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {
  border-color: #29abe2;
}

.site-footer,
.badge-secondary,
.ui-datepicker-calendar > tbody > tr > td .ui-state-active,
.stream-icon-new {
  background-color: #1f80aa;
}

.eu-cookie-compliance-secondary-button,
.btn-primary {
  background-color: #29abe2;
  border-color: #29abe2;
}

.eu-cookie-compliance-secondary-button:focus, .eu-cookie-compliance-secondary-button.focus, .eu-cookie-compliance-secondary-button:hover, .eu-cookie-compliance-secondary-button:active, .eu-cookie-compliance-secondary-button.active,
.open > .eu-cookie-compliance-secondary-button.dropdown-toggle, .eu-cookie-compliance-secondary-button.dropdown-toggle:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open >
.btn-primary.dropdown-toggle,
.btn-primary.dropdown-toggle:hover {
  background-color: #29abe2;
  border-color: #29abe2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.eu-cookie-compliance-secondary-button.disabled:hover, .eu-cookie-compliance-secondary-button.disabled:focus, .eu-cookie-compliance-secondary-button.disabled.focus, .eu-cookie-compliance-secondary-button[disabled]:hover, .eu-cookie-compliance-secondary-button[disabled]:focus, .eu-cookie-compliance-secondary-button[disabled].focus,
fieldset[disabled] .eu-cookie-compliance-secondary-button:hover,
fieldset[disabled] .eu-cookie-compliance-secondary-button:focus,
fieldset[disabled] .eu-cookie-compliance-secondary-button.focus,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled].focus,
fieldset[disabled]
.btn-primary:hover,
fieldset[disabled]
.btn-primary:focus,
fieldset[disabled]
.btn-primary.focus {
  background-color: #29abe2;
  border-color: #29abe2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.btn-secondary {
  background-color: #1f80aa;
  border-color: #1f80aa;
}

.btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle, .btn-secondary.dropdown-toggle:hover {
  background-color: #1f80aa;
  border-color: #1f80aa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary.focus {
  background-color: #1f80aa;
  border-color: #1f80aa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.badge-accent {
  color: #4d4d4d;
  background-color: #ffc142;
  border-color: #ffc142;
}

.btn-accent {
  color: #4d4d4d;
  background-color: #ffc142;
  border-color: #ffc142;
}

.btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,
.open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {
  color: #4d4d4d;
  background-color: #ffc142;
  border-color: #ffc142;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,
fieldset[disabled] .btn-accent:hover,
fieldset[disabled] .btn-accent:focus,
fieldset[disabled] .btn-accent.focus {
  color: #4d4d4d;
  background-color: #ffc142;
  border-color: #ffc142;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card__link,
.card__link .btn-default,
.card__link.btn-default {
  border-color: #29abe2;
}

.btn-flat,
.btn-link,
.btn-link:hover,
.btn-flat:hover,
.btn-link:focus,
.btn-flat:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > button,
.nav-tabs > li.active > button:hover,
.nav-tabs > li.active > button:focus,
.card__link,
.card__link:focus,
.card__link:hover,
.view--who-liked .views-field-view-user a,
.comment__reply-btn,
.nav-book .menu-item--active-trail > a {
  color: #29abe2;
  fill: #29abe2;
}

.list-item--active,
.list-item--active:hover,
.list-item--active:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #1f80aa;
  border-color: #1f80aa;
}

.field--name-field-introduction-text a:not(.btn),
.field--name-field-introduction-text a:not(.btn):hover,
.field--name-field-featured-items-description a:not(.btn),
.field--name-field-featured-items-description a:not(.btn):hover,
.field--name-field-featured-description a:not(.btn),
.field--name-field-featured-description a:not(.btn):hover,
.field--name-field-accord-description a:not(.btn),
.field--name-field-accord-description a:not(.btn):hover,
.field--name-field-text a:not(.btn),
.field--name-field-text a:not(.btn):hover,
.body-text a:not(.btn),
.body-text a:not(.btn):hover {
  color: #33b5e5;
}

blockquote {
  border-left-color: #29abe2;
}

.input-group .form-control:focus ~ .input-group-addon {
  border-color: #29abe2;
  box-shadow: 0 2px 0 0 #29abe2;
}

#skip-link a {
  background-color: #1f1f1f;
  color: #f3f3f3;
}

.navbar-secondary {
  color: #f9f9f9;
  background-color: #1f7ea7;
}

.navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {
  color: #f9f9f9;
}

.navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {
  border-bottom-color: #f9f9f9;
}

.navbar-scrollable:before {
  background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));
  background: linear-gradient(90deg, #1f7ea7, transparent);
}

.navbar-scrollable:after {
  background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));
  background: linear-gradient(-90deg, #1f7ea7, transparent);
}

.navbar-default {
  background-color: #333333;
}

.navbar-default .navbar-toggle {
  color: #ffffff;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  color: #f3f3f3;
  background-color: #1f1f1f;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > button {
  color: #ffffff;
  fill: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > button:hover,
.navbar-default .navbar-nav > li > button:focus {
  color: #f3f3f3;
  background-color: #1f1f1f;
}

.navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon,
.navbar-default .navbar-nav > li > button:hover .navbar-nav__icon,
.navbar-default .navbar-nav > li > button:focus .navbar-nav__icon {
  fill: #f3f3f3;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > button,
.navbar-default .navbar-nav > .open > button:hover,
.navbar-default .navbar-nav > .open > button:focus {
  background-color: #1f1f1f;
  color: #f3f3f3;
}

.navbar-default .navbar-nav > li > a.is-active, .navbar-default .navbar-nav > li > a.is-active:hover, .navbar-default .navbar-nav > li > a.is-active:focus,
.navbar-default .navbar-nav > li > button.is-active,
.navbar-default .navbar-nav > li > button.is-active:hover,
.navbar-default .navbar-nav > li > button.is-active:focus,
.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 > button,
.navbar-default .navbar-nav > .active > button:hover,
.navbar-default .navbar-nav > .active > button:focus {
  color: #f3f3f3;
  fill: #f3f3f3;
  background-color: #1f1f1f;
}

html:not(.js) .navbar-default .dropdown:focus > a,
html:not(.js) .navbar-default .dropdown:focus > button, html:not(.js) .navbar-default .dropdown:hover > a,
html:not(.js) .navbar-default .dropdown:hover > button {
  color: #f3f3f3;
  background-color: #1f1f1f;
}

html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon,
html:not(.js) .navbar-default .dropdown:focus > button .navbar-nav__icon, html:not(.js) .navbar-default .dropdown:hover > a .navbar-nav__icon,
html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
  fill: #f3f3f3;
}

.dropdown.has-alert.has-alert--desktop > a:before {
  color: #4d4d4d;
  background-color: #ffc142;
}

.search-take-over .form-control::-webkit-input-placeholder {
  color: #ffffff !important;
}

.search-take-over .form-control::-moz-placeholder {
  color: #ffffff !important;
}

.search-take-over .form-control::-ms-input-placeholder {
  color: #ffffff !important;
}

.search-take-over .form-control::placeholder {
  color: #ffffff !important;
}

.search-take-over .form-control::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1;
}

.search-take-over .form-control :-ms-input-placeholder {
  color: #ffffff !important;
}

.search-take-over .form-control ::-ms-input-placeholder {
  color: #ffffff !important;
}

.navbar-nav__icon {
  fill: #ffffff;
}

.navbar__open-search-block {
  background-color: #333333;
}

.search--with-suggestions .spinner > div {
  background-color: #ffffff;
}

.card__block .form-item-data-policy label a {
  color: #33b5e5;
}

.vote-widget--social-vote .vote-vote {
  color: #4d4d4d;
  background-color: #ffc142;
}

.social-gtranslate-list--desktop > a {
  color: #ffffff;
  background-color: #333333;
}

.social-gtranslate-list--desktop > a:after {
  color: #ffffff;
}

.social-gtranslate-list--desktop > a .select-icon {
  fill: #ffffff;
}

.social-gtranslate-list--desktop > a:focus, .social-gtranslate-list--desktop > a:hover {
  color: #f3f3f3;
  fill: #f3f3f3;
  background-color: #1f1f1f;
}

.social-gtranslate-list--desktop > a:focus:after, .social-gtranslate-list--desktop > a:hover:after {
  color: #f3f3f3;
}

.social-gtranslate-list--desktop > a:focus .select-icon, .social-gtranslate-list--desktop > a:hover .select-icon {
  fill: #f3f3f3;
}

.social-gtranslate-list--desktop.open > a {
  color: #f3f3f3;
  fill: #f3f3f3;
  background-color: #1f1f1f;
}

.social-gtranslate-list--desktop.open > a:after {
  color: #f3f3f3;
}

.social-gtranslate-list--desktop.open > a .select-icon {
  fill: #f3f3f3;
}

.social-gtranslate-list--desktop.open > a:focus, .social-gtranslate-list--desktop.open > a:hover {
  color: #f3f3f3;
  fill: #f3f3f3;
  background-color: #1f1f1f;
}

.social-gtranslate-list--desktop.open > a:focus:after, .social-gtranslate-list--desktop.open > a:hover:after {
  color: #f3f3f3;
}

.social-gtranslate-list--desktop.open > a:focus .select-icon, .social-gtranslate-list--desktop.open > a:hover .select-icon {
  fill: #f3f3f3;
}

#sliding-popup {
  background-color: #1f7ea7 !important;
}

.marker-cluster:after,
.marker-cluster-small:after {
  background: #1f80aa;
}

.marker-cluster div:after,
.marker-cluster-small div:after {
  background: #1f80aa;
}

.leaflet-popup-content .card__text > a {
  color: #33b5e5;
}

.leaflet-popup-content .card__text > a:after {
  color: #33b5e5;
}

.card__featured-items .teaser__info svg {
  color: #29abe2;
  fill: #29abe2;
}

.card__featured-items .teaser__info svg:hover, .card__featured-items .teaser__info svg:focus, .card__featured-items .teaser__info svg:active {
  color: #ffc142;
  fill: #ffc142;
}

.course__navigation .course_nav-title,
.course__navigation .course_nav-toggle,
.course__navigation .course_dividing-line {
  color: #29abe2;
}

.course__navigation .course_nav-title .icon {
  background: #29abe2;
}

.course__navigation .course_nav-title:hover, .course__navigation .course_nav-title:active, .course__navigation .course_nav-title:focus {
  color: #ffc142;
}

.course__navigation .course_nav-title:hover .icon, .course__navigation .course_nav-title:active .icon, .course__navigation .course_nav-title:focus .icon {
  background: #ffc142;
}

.course__navigation .course_nav-toggle svg {
  fill: #29abe2;
}

.course__navigation .course_nav-toggle:hover, .course__navigation .course_nav-toggle:active, .course__navigation .course_nav-toggle:focus {
  color: #ffc142;
}

.course__navigation .course_nav-toggle:hover svg, .course__navigation .course_nav-toggle:active svg, .course__navigation .course_nav-toggle:focus svg {
  fill: #ffc142;
}

.badge.badge-active {
  color: #4d4d4d;
  background-color: #ffc142;
}

.phase.phase-past:not(:last-child):before {
  color: #4d4d4d;
  background-color: #ffc142;
}

.phase.phase-past .phase-past--icon .checkmark-icon {
  fill: #ffc142;
}

.phase.phase-active:before {
  color: #4d4d4d;
  background-color: #ffc142;
}

.phase .teaser__tag {
  color: #29abe2;
}

.phase .teaser__tag a:hover, .phase .teaser__tag a:active, .phase .teaser__tag a:focus {
  color: #ffc142;
}

.phase.path-group .cover-wrap .teaser__tag {
  background-color: #29abe2;
  color: #fff;
}

.phase .badge-primary {
  background: #29abe2;
}

.phase .hero__banner-static .hero__tag {
  color: #29abe2;
}

.phase .hero__banner-static .hero__tag a,
.phase .hero__banner-static .hero__tag span {
  color: #29abe2;
}

.phase .hero__banner-static .hero__tag a:hover, .phase .hero__banner-static .hero__tag a:active, .phase .hero__banner-static .hero__tag a:focus {
  color: #ffc142;
}

.phase .navbar-secondary .navbar-nav .hidden-list li a:hover, .phase .navbar-secondary .navbar-nav .hidden-list li a.active, .phase .navbar-secondary .navbar-nav .hidden-list li a:focus, .phase .navbar-secondary .navbar-nav .hidden-list li a.is-active {
  color: #29abe2;
}

.teaser--tile.teaser-profile .teaser__image {
  background-color: #29abe2;
}

.email-preview .btn-link-bg {
  background: #29abe2;
}

.email-preview .btn-link {
  border-color: #29abe2;
  color: #29abe2;
}

.email-preview .main a:not(.btn-link) {
  color: #29abe2;
}

.block-data-policy .card__title {
  background: #1f80aa;
}

.social__dialog-badge.social__certificate .social__certificate--no-bg .social__certificate--content .footer a {
  color: #29abe2;
}

.social__dialog-badge.social__certificate .social__certificate--no-bg .social__certificate--content .footer a .icon {
  fill: #29abe2;
}

@media (min-width: 900px) {
  .search-take-over .form-text {
    color: #ffffff;
  }
  .search-take-over .form-text:focus {
    border-color: #ffffff;
    -webkit-box-shadow: 0 2px 0 0 #ffffff;
            box-shadow: 0 2px 0 0 #ffffff;
  }
  .btn--close-search-take-over svg,
  .search-take-over svg {
    fill: #ffffff;
  }
}

@media (max-width: 899px) {
  .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu {
    background-color: #1f1f1f;
  }
  .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active {
    background: #333333;
  }
  .navbar-collapse .dropdown-menu li a {
    color: #ffffff;
  }
  .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {
    color: #f3f3f3;
    background-color: #1f1f1f;
  }
}

@media (max-width: 599px) {
  .dropdown.has-alert > a:before {
    color: #4d4d4d;
    background-color: #ffc142;
  }
}

File

themes/socialblue/assets/css/brand.css
View source
  1. [type="radio"]:checked + label:before {
  2. border-color: #29abe2;
  3. }
  4. [type="radio"]:focus + label:before {
  5. -webkit-box-shadow: 0 0 3px 2px #29abe2;
  6. box-shadow: 0 0 3px 2px #29abe2;
  7. }
  8. [type="checkbox"]:checked + label:after,
  9. [type="radio"]:checked + label:after {
  10. border-color: #29abe2;
  11. background-color: #29abe2;
  12. }
  13. [type="checkbox"]:checked:not(:disabled) + label,
  14. [type="radio"]:checked:not(:disabled) + label {
  15. color: #29abe2;
  16. }
  17. .tabs-left .nav-tabs > li.active > a,
  18. .tabs-left .nav-tabs > li.active > a:hover,
  19. .tabs-left .nav-tabs > li.active > a:focus {
  20. border-right-color: #29abe2;
  21. }
  22. .view-birthday .teaser--tile .teaser__image {
  23. background-color: #29abe2;
  24. }
  25. .cover,
  26. .read-indicator,
  27. .select2-container--social .select2-results__option--highlighted[aria-selected],
  28. .select2-container--social .select2-results__option[aria-selected=true],
  29. .pagination > .active > a,
  30. .pagination > .active > a:hover,
  31. .pagination > .active > a:focus,
  32. .pagination > .active > span,
  33. .pagination > .active > span:hover,
  34. .pagination > .active > span:focus {
  35. background-color: #29abe2;
  36. }
  37. .hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,
  38. .hero-form[role='search'] .form-control:focus ~ .search-icon,
  39. .hero-form[role='search'] .form-control:active ~ .search-icon {
  40. -webkit-box-shadow: 0 2px 0 0 #1f80aa;
  41. box-shadow: 0 2px 0 0 #1f80aa;
  42. }
  43. .hero-form[role='search'] .search-icon {
  44. fill: #29abe2;
  45. }
  46. .form-control:focus {
  47. border-color: #29abe2;
  48. -webkit-box-shadow: 0 2px 0 0 #29abe2;
  49. box-shadow: 0 2px 0 0 #29abe2;
  50. }
  51. .select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {
  52. border-color: #29abe2;
  53. }
  54. .site-footer,
  55. .badge-secondary,
  56. .ui-datepicker-calendar > tbody > tr > td .ui-state-active,
  57. .stream-icon-new {
  58. background-color: #1f80aa;
  59. }
  60. .eu-cookie-compliance-secondary-button,
  61. .btn-primary {
  62. background-color: #29abe2;
  63. border-color: #29abe2;
  64. }
  65. .eu-cookie-compliance-secondary-button:focus, .eu-cookie-compliance-secondary-button.focus, .eu-cookie-compliance-secondary-button:hover, .eu-cookie-compliance-secondary-button:active, .eu-cookie-compliance-secondary-button.active,
  66. .open > .eu-cookie-compliance-secondary-button.dropdown-toggle, .eu-cookie-compliance-secondary-button.dropdown-toggle:hover,
  67. .btn-primary:focus,
  68. .btn-primary.focus,
  69. .btn-primary:hover,
  70. .btn-primary:active,
  71. .btn-primary.active,
  72. .open >
  73. .btn-primary.dropdown-toggle,
  74. .btn-primary.dropdown-toggle:hover {
  75. background-color: #29abe2;
  76. border-color: #29abe2;
  77. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  78. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  79. }
  80. .eu-cookie-compliance-secondary-button.disabled:hover, .eu-cookie-compliance-secondary-button.disabled:focus, .eu-cookie-compliance-secondary-button.disabled.focus, .eu-cookie-compliance-secondary-button[disabled]:hover, .eu-cookie-compliance-secondary-button[disabled]:focus, .eu-cookie-compliance-secondary-button[disabled].focus,
  81. fieldset[disabled] .eu-cookie-compliance-secondary-button:hover,
  82. fieldset[disabled] .eu-cookie-compliance-secondary-button:focus,
  83. fieldset[disabled] .eu-cookie-compliance-secondary-button.focus,
  84. .btn-primary.disabled:hover,
  85. .btn-primary.disabled:focus,
  86. .btn-primary.disabled.focus,
  87. .btn-primary[disabled]:hover,
  88. .btn-primary[disabled]:focus,
  89. .btn-primary[disabled].focus,
  90. fieldset[disabled]
  91. .btn-primary:hover,
  92. fieldset[disabled]
  93. .btn-primary:focus,
  94. fieldset[disabled]
  95. .btn-primary.focus {
  96. background-color: #29abe2;
  97. border-color: #29abe2;
  98. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  99. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  100. }
  101. .btn-secondary {
  102. background-color: #1f80aa;
  103. border-color: #1f80aa;
  104. }
  105. .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active,
  106. .open > .btn-secondary.dropdown-toggle, .btn-secondary.dropdown-toggle:hover {
  107. background-color: #1f80aa;
  108. border-color: #1f80aa;
  109. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  110. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  111. }
  112. .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus,
  113. fieldset[disabled] .btn-secondary:hover,
  114. fieldset[disabled] .btn-secondary:focus,
  115. fieldset[disabled] .btn-secondary.focus {
  116. background-color: #1f80aa;
  117. border-color: #1f80aa;
  118. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  119. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  120. }
  121. .badge-accent {
  122. color: #4d4d4d;
  123. background-color: #ffc142;
  124. border-color: #ffc142;
  125. }
  126. .btn-accent {
  127. color: #4d4d4d;
  128. background-color: #ffc142;
  129. border-color: #ffc142;
  130. }
  131. .btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,
  132. .open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {
  133. color: #4d4d4d;
  134. background-color: #ffc142;
  135. border-color: #ffc142;
  136. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  137. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  138. }
  139. .btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,
  140. fieldset[disabled] .btn-accent:hover,
  141. fieldset[disabled] .btn-accent:focus,
  142. fieldset[disabled] .btn-accent.focus {
  143. color: #4d4d4d;
  144. background-color: #ffc142;
  145. border-color: #ffc142;
  146. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  147. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  148. }
  149. .card__link,
  150. .card__link .btn-default,
  151. .card__link.btn-default {
  152. border-color: #29abe2;
  153. }
  154. .btn-flat,
  155. .btn-link,
  156. .btn-link:hover,
  157. .btn-flat:hover,
  158. .btn-link:focus,
  159. .btn-flat:focus,
  160. .nav-tabs > li.active > a,
  161. .nav-tabs > li.active > a:hover,
  162. .nav-tabs > li.active > a:focus,
  163. .nav-tabs > li.active > button,
  164. .nav-tabs > li.active > button:hover,
  165. .nav-tabs > li.active > button:focus,
  166. .card__link,
  167. .card__link:focus,
  168. .card__link:hover,
  169. .view--who-liked .views-field-view-user a,
  170. .comment__reply-btn,
  171. .nav-book .menu-item--active-trail > a {
  172. color: #29abe2;
  173. fill: #29abe2;
  174. }
  175. .list-item--active,
  176. .list-item--active:hover,
  177. .list-item--active:focus,
  178. .list-group-item.active,
  179. .list-group-item.active:hover,
  180. .list-group-item.active:focus {
  181. background-color: #1f80aa;
  182. border-color: #1f80aa;
  183. }
  184. .field--name-field-introduction-text a:not(.btn),
  185. .field--name-field-introduction-text a:not(.btn):hover,
  186. .field--name-field-featured-items-description a:not(.btn),
  187. .field--name-field-featured-items-description a:not(.btn):hover,
  188. .field--name-field-featured-description a:not(.btn),
  189. .field--name-field-featured-description a:not(.btn):hover,
  190. .field--name-field-accord-description a:not(.btn),
  191. .field--name-field-accord-description a:not(.btn):hover,
  192. .field--name-field-text a:not(.btn),
  193. .field--name-field-text a:not(.btn):hover,
  194. .body-text a:not(.btn),
  195. .body-text a:not(.btn):hover {
  196. color: #33b5e5;
  197. }
  198. blockquote {
  199. border-left-color: #29abe2;
  200. }
  201. .input-group .form-control:focus ~ .input-group-addon {
  202. border-color: #29abe2;
  203. box-shadow: 0 2px 0 0 #29abe2;
  204. }
  205. #skip-link a {
  206. background-color: #1f1f1f;
  207. color: #f3f3f3;
  208. }
  209. .navbar-secondary {
  210. color: #f9f9f9;
  211. background-color: #1f7ea7;
  212. }
  213. .navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {
  214. color: #f9f9f9;
  215. }
  216. .navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {
  217. border-bottom-color: #f9f9f9;
  218. }
  219. .navbar-scrollable:before {
  220. background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));
  221. background: linear-gradient(90deg, #1f7ea7, transparent);
  222. }
  223. .navbar-scrollable:after {
  224. background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));
  225. background: linear-gradient(-90deg, #1f7ea7, transparent);
  226. }
  227. .navbar-default {
  228. background-color: #333333;
  229. }
  230. .navbar-default .navbar-toggle {
  231. color: #ffffff;
  232. }
  233. .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  234. color: #f3f3f3;
  235. background-color: #1f1f1f;
  236. }
  237. .navbar-default .navbar-nav > li > a,
  238. .navbar-default .navbar-nav > li > button {
  239. color: #ffffff;
  240. fill: #ffffff;
  241. }
  242. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
  243. .navbar-default .navbar-nav > li > button:hover,
  244. .navbar-default .navbar-nav > li > button:focus {
  245. color: #f3f3f3;
  246. background-color: #1f1f1f;
  247. }
  248. .navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon,
  249. .navbar-default .navbar-nav > li > button:hover .navbar-nav__icon,
  250. .navbar-default .navbar-nav > li > button:focus .navbar-nav__icon {
  251. fill: #f3f3f3;
  252. }
  253. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
  254. .navbar-default .navbar-nav > .open > button,
  255. .navbar-default .navbar-nav > .open > button:hover,
  256. .navbar-default .navbar-nav > .open > button:focus {
  257. background-color: #1f1f1f;
  258. color: #f3f3f3;
  259. }
  260. .navbar-default .navbar-nav > li > a.is-active, .navbar-default .navbar-nav > li > a.is-active:hover, .navbar-default .navbar-nav > li > a.is-active:focus,
  261. .navbar-default .navbar-nav > li > button.is-active,
  262. .navbar-default .navbar-nav > li > button.is-active:hover,
  263. .navbar-default .navbar-nav > li > button.is-active:focus,
  264. .navbar-default .navbar-nav > .active > a,
  265. .navbar-default .navbar-nav > .active > a:hover,
  266. .navbar-default .navbar-nav > .active > a:focus,
  267. .navbar-default .navbar-nav > .active > button,
  268. .navbar-default .navbar-nav > .active > button:hover,
  269. .navbar-default .navbar-nav > .active > button:focus {
  270. color: #f3f3f3;
  271. fill: #f3f3f3;
  272. background-color: #1f1f1f;
  273. }
  274. html:not(.js) .navbar-default .dropdown:focus > a,
  275. html:not(.js) .navbar-default .dropdown:focus > button, html:not(.js) .navbar-default .dropdown:hover > a,
  276. html:not(.js) .navbar-default .dropdown:hover > button {
  277. color: #f3f3f3;
  278. background-color: #1f1f1f;
  279. }
  280. html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon,
  281. html:not(.js) .navbar-default .dropdown:focus > button .navbar-nav__icon, html:not(.js) .navbar-default .dropdown:hover > a .navbar-nav__icon,
  282. html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
  283. fill: #f3f3f3;
  284. }
  285. .dropdown.has-alert.has-alert--desktop > a:before {
  286. color: #4d4d4d;
  287. background-color: #ffc142;
  288. }
  289. .search-take-over .form-control::-webkit-input-placeholder {
  290. color: #ffffff !important;
  291. }
  292. .search-take-over .form-control::-moz-placeholder {
  293. color: #ffffff !important;
  294. }
  295. .search-take-over .form-control::-ms-input-placeholder {
  296. color: #ffffff !important;
  297. }
  298. .search-take-over .form-control::placeholder {
  299. color: #ffffff !important;
  300. }
  301. .search-take-over .form-control::-moz-placeholder {
  302. color: #ffffff !important;
  303. opacity: 1;
  304. }
  305. .search-take-over .form-control :-ms-input-placeholder {
  306. color: #ffffff !important;
  307. }
  308. .search-take-over .form-control ::-ms-input-placeholder {
  309. color: #ffffff !important;
  310. }
  311. .navbar-nav__icon {
  312. fill: #ffffff;
  313. }
  314. .navbar__open-search-block {
  315. background-color: #333333;
  316. }
  317. .search--with-suggestions .spinner > div {
  318. background-color: #ffffff;
  319. }
  320. .card__block .form-item-data-policy label a {
  321. color: #33b5e5;
  322. }
  323. .vote-widget--social-vote .vote-vote {
  324. color: #4d4d4d;
  325. background-color: #ffc142;
  326. }
  327. .social-gtranslate-list--desktop > a {
  328. color: #ffffff;
  329. background-color: #333333;
  330. }
  331. .social-gtranslate-list--desktop > a:after {
  332. color: #ffffff;
  333. }
  334. .social-gtranslate-list--desktop > a .select-icon {
  335. fill: #ffffff;
  336. }
  337. .social-gtranslate-list--desktop > a:focus, .social-gtranslate-list--desktop > a:hover {
  338. color: #f3f3f3;
  339. fill: #f3f3f3;
  340. background-color: #1f1f1f;
  341. }
  342. .social-gtranslate-list--desktop > a:focus:after, .social-gtranslate-list--desktop > a:hover:after {
  343. color: #f3f3f3;
  344. }
  345. .social-gtranslate-list--desktop > a:focus .select-icon, .social-gtranslate-list--desktop > a:hover .select-icon {
  346. fill: #f3f3f3;
  347. }
  348. .social-gtranslate-list--desktop.open > a {
  349. color: #f3f3f3;
  350. fill: #f3f3f3;
  351. background-color: #1f1f1f;
  352. }
  353. .social-gtranslate-list--desktop.open > a:after {
  354. color: #f3f3f3;
  355. }
  356. .social-gtranslate-list--desktop.open > a .select-icon {
  357. fill: #f3f3f3;
  358. }
  359. .social-gtranslate-list--desktop.open > a:focus, .social-gtranslate-list--desktop.open > a:hover {
  360. color: #f3f3f3;
  361. fill: #f3f3f3;
  362. background-color: #1f1f1f;
  363. }
  364. .social-gtranslate-list--desktop.open > a:focus:after, .social-gtranslate-list--desktop.open > a:hover:after {
  365. color: #f3f3f3;
  366. }
  367. .social-gtranslate-list--desktop.open > a:focus .select-icon, .social-gtranslate-list--desktop.open > a:hover .select-icon {
  368. fill: #f3f3f3;
  369. }
  370. #sliding-popup {
  371. background-color: #1f7ea7 !important;
  372. }
  373. .marker-cluster:after,
  374. .marker-cluster-small:after {
  375. background: #1f80aa;
  376. }
  377. .marker-cluster div:after,
  378. .marker-cluster-small div:after {
  379. background: #1f80aa;
  380. }
  381. .leaflet-popup-content .card__text > a {
  382. color: #33b5e5;
  383. }
  384. .leaflet-popup-content .card__text > a:after {
  385. color: #33b5e5;
  386. }
  387. .card__featured-items .teaser__info svg {
  388. color: #29abe2;
  389. fill: #29abe2;
  390. }
  391. .card__featured-items .teaser__info svg:hover, .card__featured-items .teaser__info svg:focus, .card__featured-items .teaser__info svg:active {
  392. color: #ffc142;
  393. fill: #ffc142;
  394. }
  395. .course__navigation .course_nav-title,
  396. .course__navigation .course_nav-toggle,
  397. .course__navigation .course_dividing-line {
  398. color: #29abe2;
  399. }
  400. .course__navigation .course_nav-title .icon {
  401. background: #29abe2;
  402. }
  403. .course__navigation .course_nav-title:hover, .course__navigation .course_nav-title:active, .course__navigation .course_nav-title:focus {
  404. color: #ffc142;
  405. }
  406. .course__navigation .course_nav-title:hover .icon, .course__navigation .course_nav-title:active .icon, .course__navigation .course_nav-title:focus .icon {
  407. background: #ffc142;
  408. }
  409. .course__navigation .course_nav-toggle svg {
  410. fill: #29abe2;
  411. }
  412. .course__navigation .course_nav-toggle:hover, .course__navigation .course_nav-toggle:active, .course__navigation .course_nav-toggle:focus {
  413. color: #ffc142;
  414. }
  415. .course__navigation .course_nav-toggle:hover svg, .course__navigation .course_nav-toggle:active svg, .course__navigation .course_nav-toggle:focus svg {
  416. fill: #ffc142;
  417. }
  418. .badge.badge-active {
  419. color: #4d4d4d;
  420. background-color: #ffc142;
  421. }
  422. .phase.phase-past:not(:last-child):before {
  423. color: #4d4d4d;
  424. background-color: #ffc142;
  425. }
  426. .phase.phase-past .phase-past--icon .checkmark-icon {
  427. fill: #ffc142;
  428. }
  429. .phase.phase-active:before {
  430. color: #4d4d4d;
  431. background-color: #ffc142;
  432. }
  433. .phase .teaser__tag {
  434. color: #29abe2;
  435. }
  436. .phase .teaser__tag a:hover, .phase .teaser__tag a:active, .phase .teaser__tag a:focus {
  437. color: #ffc142;
  438. }
  439. .phase.path-group .cover-wrap .teaser__tag {
  440. background-color: #29abe2;
  441. color: #fff;
  442. }
  443. .phase .badge-primary {
  444. background: #29abe2;
  445. }
  446. .phase .hero__banner-static .hero__tag {
  447. color: #29abe2;
  448. }
  449. .phase .hero__banner-static .hero__tag a,
  450. .phase .hero__banner-static .hero__tag span {
  451. color: #29abe2;
  452. }
  453. .phase .hero__banner-static .hero__tag a:hover, .phase .hero__banner-static .hero__tag a:active, .phase .hero__banner-static .hero__tag a:focus {
  454. color: #ffc142;
  455. }
  456. .phase .navbar-secondary .navbar-nav .hidden-list li a:hover, .phase .navbar-secondary .navbar-nav .hidden-list li a.active, .phase .navbar-secondary .navbar-nav .hidden-list li a:focus, .phase .navbar-secondary .navbar-nav .hidden-list li a.is-active {
  457. color: #29abe2;
  458. }
  459. .teaser--tile.teaser-profile .teaser__image {
  460. background-color: #29abe2;
  461. }
  462. .email-preview .btn-link-bg {
  463. background: #29abe2;
  464. }
  465. .email-preview .btn-link {
  466. border-color: #29abe2;
  467. color: #29abe2;
  468. }
  469. .email-preview .main a:not(.btn-link) {
  470. color: #29abe2;
  471. }
  472. .block-data-policy .card__title {
  473. background: #1f80aa;
  474. }
  475. .social__dialog-badge.social__certificate .social__certificate--no-bg .social__certificate--content .footer a {
  476. color: #29abe2;
  477. }
  478. .social__dialog-badge.social__certificate .social__certificate--no-bg .social__certificate--content .footer a .icon {
  479. fill: #29abe2;
  480. }
  481. @media (min-width: 900px) {
  482. .search-take-over .form-text {
  483. color: #ffffff;
  484. }
  485. .search-take-over .form-text:focus {
  486. border-color: #ffffff;
  487. -webkit-box-shadow: 0 2px 0 0 #ffffff;
  488. box-shadow: 0 2px 0 0 #ffffff;
  489. }
  490. .btn--close-search-take-over svg,
  491. .search-take-over svg {
  492. fill: #ffffff;
  493. }
  494. }
  495. @media (max-width: 899px) {
  496. .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu {
  497. background-color: #1f1f1f;
  498. }
  499. .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active {
  500. background: #333333;
  501. }
  502. .navbar-collapse .dropdown-menu li a {
  503. color: #ffffff;
  504. }
  505. .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {
  506. color: #f3f3f3;
  507. background-color: #1f1f1f;
  508. }
  509. }
  510. @media (max-width: 599px) {
  511. .dropdown.has-alert > a:before {
  512. color: #4d4d4d;
  513. background-color: #ffc142;
  514. }
  515. }