You are here

brand.css in Open Social 8.8

[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 {
  background-color: #ffc142;
  border-color: #ffc142;
}

.btn-accent {
  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 {
  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 {
  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,
.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-accord-description 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 {
  color: #f9f9f9;
}

.navbar-secondary .navbar-nav li.active a {
  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 {
  color: #ffffff;
  fill: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a: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 {
  fill: #f3f3f3;
}

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

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

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

.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 {
  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 {
  background-color: #ffc142;
}

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

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

.phase.phase-active:before {
  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;
}

@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 {
    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. background-color: #ffc142;
  123. border-color: #ffc142;
  124. }
  125. .btn-accent {
  126. background-color: #ffc142;
  127. border-color: #ffc142;
  128. }
  129. .btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,
  130. .open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {
  131. background-color: #ffc142;
  132. border-color: #ffc142;
  133. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  134. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  135. }
  136. .btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,
  137. fieldset[disabled] .btn-accent:hover,
  138. fieldset[disabled] .btn-accent:focus,
  139. fieldset[disabled] .btn-accent.focus {
  140. background-color: #ffc142;
  141. border-color: #ffc142;
  142. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
  143. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  144. }
  145. .card__link,
  146. .card__link .btn-default,
  147. .card__link.btn-default {
  148. border-color: #29abe2;
  149. }
  150. .btn-flat,
  151. .btn-link,
  152. .btn-link:hover,
  153. .btn-flat:hover,
  154. .btn-link:focus,
  155. .btn-flat:focus,
  156. .nav-tabs > li.active > a,
  157. .nav-tabs > li.active > a:hover,
  158. .nav-tabs > li.active > a:focus,
  159. .card__link,
  160. .card__link:focus,
  161. .card__link:hover,
  162. .view--who-liked .views-field-view-user a,
  163. .comment__reply-btn,
  164. .nav-book .menu-item--active-trail > a {
  165. color: #29abe2;
  166. fill: #29abe2;
  167. }
  168. .list-item--active,
  169. .list-item--active:hover,
  170. .list-item--active:focus,
  171. .list-group-item.active,
  172. .list-group-item.active:hover,
  173. .list-group-item.active:focus {
  174. background-color: #1f80aa;
  175. border-color: #1f80aa;
  176. }
  177. .field--name-field-introduction-text a:not(.btn),
  178. .field--name-field-introduction-text a:not(.btn):hover,
  179. .field--name-field-featured-items-description a:not(.btn),
  180. .field--name-field-featured-items-description a:not(.btn):hover,
  181. .field--name-field-featured-description a:not(.btn),
  182. .field--name-field-featured-description a:not(.btn):hover,
  183. .field--name-field-accord-description a:not(.btn),
  184. .field--name-field-accord-description a:not(.btn):hover,
  185. .field--name-field-text a:not(.btn),
  186. .field--name-field-accord-description a:not(.btn):hover,
  187. .body-text a:not(.btn),
  188. .body-text a:not(.btn):hover {
  189. color: #33b5e5;
  190. }
  191. blockquote {
  192. border-left-color: #29abe2;
  193. }
  194. .input-group .form-control:focus ~ .input-group-addon {
  195. border-color: #29abe2;
  196. box-shadow: 0 2px 0 0 #29abe2;
  197. }
  198. #skip-link a {
  199. background-color: #1f1f1f;
  200. color: #f3f3f3;
  201. }
  202. .navbar-secondary {
  203. color: #f9f9f9;
  204. background-color: #1f7ea7;
  205. }
  206. .navbar-secondary .navbar-nav a {
  207. color: #f9f9f9;
  208. }
  209. .navbar-secondary .navbar-nav li.active a {
  210. border-bottom-color: #f9f9f9;
  211. }
  212. .navbar-scrollable:before {
  213. background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));
  214. background: linear-gradient(90deg, #1f7ea7, transparent);
  215. }
  216. .navbar-scrollable:after {
  217. background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));
  218. background: linear-gradient(-90deg, #1f7ea7, transparent);
  219. }
  220. .navbar-default {
  221. background-color: #333333;
  222. }
  223. .navbar-default .navbar-toggle {
  224. color: #ffffff;
  225. }
  226. .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  227. color: #f3f3f3;
  228. background-color: #1f1f1f;
  229. }
  230. .navbar-default .navbar-nav > li > a {
  231. color: #ffffff;
  232. fill: #ffffff;
  233. }
  234. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  235. color: #f3f3f3;
  236. background-color: #1f1f1f;
  237. }
  238. .navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon {
  239. fill: #f3f3f3;
  240. }
  241. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  242. background-color: #1f1f1f;
  243. color: #f3f3f3;
  244. }
  245. .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,
  246. .navbar-default .navbar-nav > .active > a,
  247. .navbar-default .navbar-nav > .active > a:hover,
  248. .navbar-default .navbar-nav > .active > a:focus {
  249. color: #f3f3f3;
  250. fill: #f3f3f3;
  251. background-color: #1f1f1f;
  252. }
  253. html:not(.js) .navbar-default .dropdown:focus > a, html:not(.js) .navbar-default .dropdown:hover > a {
  254. color: #f3f3f3;
  255. background-color: #1f1f1f;
  256. }
  257. html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.js) .navbar-default .dropdown:hover > a .navbar-nav__icon {
  258. fill: #f3f3f3;
  259. }
  260. .navbar-nav__icon {
  261. fill: #ffffff;
  262. }
  263. .navbar__open-search-block {
  264. background-color: #333333;
  265. }
  266. .search--with-suggestions .spinner > div {
  267. background-color: #ffffff;
  268. }
  269. .card__block .form-item-data-policy label a {
  270. color: #33b5e5;
  271. }
  272. .vote-widget--social-vote .vote-vote {
  273. background-color: #ffc142;
  274. }
  275. .social-gtranslate-list--desktop > a {
  276. color: #ffffff;
  277. background-color: #333333;
  278. }
  279. .social-gtranslate-list--desktop > a:after {
  280. color: #ffffff;
  281. }
  282. .social-gtranslate-list--desktop > a .select-icon {
  283. fill: #ffffff;
  284. }
  285. .social-gtranslate-list--desktop > a:focus, .social-gtranslate-list--desktop > a:hover {
  286. color: #f3f3f3;
  287. fill: #f3f3f3;
  288. background-color: #1f1f1f;
  289. }
  290. .social-gtranslate-list--desktop > a:focus:after, .social-gtranslate-list--desktop > a:hover:after {
  291. color: #f3f3f3;
  292. }
  293. .social-gtranslate-list--desktop > a:focus .select-icon, .social-gtranslate-list--desktop > a:hover .select-icon {
  294. fill: #f3f3f3;
  295. }
  296. .social-gtranslate-list--desktop.open > a {
  297. color: #f3f3f3;
  298. fill: #f3f3f3;
  299. background-color: #1f1f1f;
  300. }
  301. .social-gtranslate-list--desktop.open > a:after {
  302. color: #f3f3f3;
  303. }
  304. .social-gtranslate-list--desktop.open > a .select-icon {
  305. fill: #f3f3f3;
  306. }
  307. .social-gtranslate-list--desktop.open > a:focus, .social-gtranslate-list--desktop.open > a:hover {
  308. color: #f3f3f3;
  309. fill: #f3f3f3;
  310. background-color: #1f1f1f;
  311. }
  312. .social-gtranslate-list--desktop.open > a:focus:after, .social-gtranslate-list--desktop.open > a:hover:after {
  313. color: #f3f3f3;
  314. }
  315. .social-gtranslate-list--desktop.open > a:focus .select-icon, .social-gtranslate-list--desktop.open > a:hover .select-icon {
  316. fill: #f3f3f3;
  317. }
  318. #sliding-popup {
  319. background-color: #1f7ea7 !important;
  320. }
  321. .marker-cluster:after,
  322. .marker-cluster-small:after {
  323. background: #1f80aa;
  324. }
  325. .marker-cluster div:after,
  326. .marker-cluster-small div:after {
  327. background: #1f80aa;
  328. }
  329. .leaflet-popup-content .card__text > a {
  330. color: #33b5e5;
  331. }
  332. .leaflet-popup-content .card__text > a:after {
  333. color: #33b5e5;
  334. }
  335. .card__featured-items .teaser__info svg {
  336. color: #29abe2;
  337. fill: #29abe2;
  338. }
  339. .card__featured-items .teaser__info svg:hover, .card__featured-items .teaser__info svg:focus, .card__featured-items .teaser__info svg:active {
  340. color: #ffc142;
  341. fill: #ffc142;
  342. }
  343. .course__navigation .course_nav-title,
  344. .course__navigation .course_nav-toggle,
  345. .course__navigation .course_dividing-line {
  346. color: #29abe2;
  347. }
  348. .course__navigation .course_nav-title .icon {
  349. background: #29abe2;
  350. }
  351. .course__navigation .course_nav-title:hover, .course__navigation .course_nav-title:active, .course__navigation .course_nav-title:focus {
  352. color: #ffc142;
  353. }
  354. .course__navigation .course_nav-title:hover .icon, .course__navigation .course_nav-title:active .icon, .course__navigation .course_nav-title:focus .icon {
  355. background: #ffc142;
  356. }
  357. .course__navigation .course_nav-toggle svg {
  358. fill: #29abe2;
  359. }
  360. .course__navigation .course_nav-toggle:hover, .course__navigation .course_nav-toggle:active, .course__navigation .course_nav-toggle:focus {
  361. color: #ffc142;
  362. }
  363. .course__navigation .course_nav-toggle:hover svg, .course__navigation .course_nav-toggle:active svg, .course__navigation .course_nav-toggle:focus svg {
  364. fill: #ffc142;
  365. }
  366. .badge.badge-active {
  367. background-color: #ffc142;
  368. }
  369. .phase.phase-past:not(:last-child):before {
  370. background-color: #ffc142;
  371. }
  372. .phase.phase-past .phase-past--icon .checkmark-icon {
  373. fill: #ffc142;
  374. }
  375. .phase.phase-active:before {
  376. background-color: #ffc142;
  377. }
  378. .phase .teaser__tag {
  379. color: #29abe2;
  380. }
  381. .phase .teaser__tag a:hover, .phase .teaser__tag a:active, .phase .teaser__tag a:focus {
  382. color: #ffc142;
  383. }
  384. .phase.path-group .cover-wrap .teaser__tag {
  385. background-color: #29abe2;
  386. color: #fff;
  387. }
  388. .phase .badge-primary {
  389. background: #29abe2;
  390. }
  391. .phase .hero__banner-static .hero__tag {
  392. color: #29abe2;
  393. }
  394. .phase .hero__banner-static .hero__tag a,
  395. .phase .hero__banner-static .hero__tag span {
  396. color: #29abe2;
  397. }
  398. .phase .hero__banner-static .hero__tag a:hover, .phase .hero__banner-static .hero__tag a:active, .phase .hero__banner-static .hero__tag a:focus {
  399. color: #ffc142;
  400. }
  401. .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 {
  402. color: #29abe2;
  403. }
  404. .teaser--tile.teaser-profile .teaser__image {
  405. background-color: #29abe2;
  406. }
  407. @media (min-width: 900px) {
  408. .search-take-over .form-text {
  409. color: #ffffff;
  410. }
  411. .search-take-over .form-text:focus {
  412. border-color: #ffffff;
  413. -webkit-box-shadow: 0 2px 0 0 #ffffff;
  414. box-shadow: 0 2px 0 0 #ffffff;
  415. }
  416. .btn--close-search-take-over svg,
  417. .search-take-over svg {
  418. fill: #ffffff;
  419. }
  420. }
  421. @media (max-width: 899px) {
  422. .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu {
  423. background-color: #1f1f1f;
  424. }
  425. .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 {
  426. background: #333333;
  427. }
  428. .navbar-collapse .dropdown-menu li a {
  429. color: #ffffff;
  430. }
  431. .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {
  432. color: #f3f3f3;
  433. background-color: #1f1f1f;
  434. }
  435. }
  436. @media (max-width: 599px) {
  437. .dropdown.has-alert > a:before {
  438. background-color: #ffc142;
  439. }
  440. }