You are here

Home » API reference » Open Social 8

brand.css in Open Social 8

Same filename and directory in other branches
  1. 8.9 themes/socialblue/assets/css/brand.css
  2. 8.2 themes/socialblue/assets/css/brand.css
  3. 8.3 themes/socialblue/assets/css/brand.css
  4. 8.4 themes/socialblue/assets/css/brand.css
  5. 8.5 themes/socialblue/assets/css/brand.css
  6. 8.6 themes/socialblue/assets/css/brand.css
  7. 8.7 themes/socialblue/assets/css/brand.css
  8. 8.8 themes/socialblue/assets/css/brand.css
[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;
}

.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;
}

.btn-primary {
  background-color: #29abe2;
  border-color: #29abe2;
}

.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%);
}

.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%);
}

.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;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.card__link:focus,
.card__link:hover,
.btn-link:hover,
.btn-flat:hover,
.btn-link:focus,
.btn-flat:focus {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.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,
.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;
  -webkit-box-shadow: 0 2px 0 0 #29abe2;
          box-shadow: 0 2px 0 0 #29abe2;
}

.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;
}

.navbar-nav__icon {
  fill: #ffffff;
}

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

@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 {
    fill: #ffffff;
  }
}

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

@media (max-width: 899px) {
  .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;
  }
}

File

themes/socialblue/assets/css/brand.css
View source 
  1. [type="radio"]:checked + label:before {

  2.   border-color: #29abe2;

  3. }

  4. 

  5. [type="radio"]:focus + label:before {

  6.   -webkit-box-shadow: 0 0 3px 2px #29abe2;

  7.           box-shadow: 0 0 3px 2px #29abe2;

  8. }

  9. 

  10. [type="checkbox"]:checked + label:after,

  11. [type="radio"]:checked + label:after {

  12.   border-color: #29abe2;

  13.   background-color: #29abe2;

  14. }

  15. 

  16. [type="checkbox"]:checked:not(:disabled) + label,

  17. [type="radio"]:checked:not(:disabled) + label {

  18.   color: #29abe2;

  19. }

  20. 

  21. .tabs-left .nav-tabs > li.active > a,

  22. .tabs-left .nav-tabs > li.active > a:hover,

  23. .tabs-left .nav-tabs > li.active > a:focus {

  24.   border-right-color: #29abe2;

  25. }

  26. 

  27. .cover,

  28. .read-indicator,

  29. .select2-container--social .select2-results__option--highlighted[aria-selected],

  30. .select2-container--social .select2-results__option[aria-selected=true],

  31. .pagination > .active > a,

  32. .pagination > .active > a:hover,

  33. .pagination > .active > a:focus,

  34. .pagination > .active > span,

  35. .pagination > .active > span:hover,

  36. .pagination > .active > span:focus {

  37.   background-color: #29abe2;

  38. }

  39. 

  40. .hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,

  41. .hero-form[role='search'] .form-control:focus ~ .search-icon,

  42. .hero-form[role='search'] .form-control:active ~ .search-icon {

  43.   -webkit-box-shadow: 0 2px 0 0 #1f80aa;

  44.           box-shadow: 0 2px 0 0 #1f80aa;

  45. }

  46. 

  47. .hero-form[role='search'] .search-icon {

  48.   fill: #29abe2;

  49. }

  50. 

  51. .form-control:focus {

  52.   border-color: #29abe2;

  53.   -webkit-box-shadow: 0 2px 0 0 #29abe2;

  54.           box-shadow: 0 2px 0 0 #29abe2;

  55. }

  56. 

  57. .select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {

  58.   border-color: #29abe2;

  59. }

  60. 

  61. .site-footer,

  62. .badge-secondary,

  63. .ui-datepicker-calendar > tbody > tr > td .ui-state-active,

  64. .stream-icon-new {

  65.   background-color: #1f80aa;

  66. }

  67. 

  68. .btn-primary {

  69.   background-color: #29abe2;

  70.   border-color: #29abe2;

  71. }

  72. 

  73. .btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary:active, .btn-primary.active,

  74. .open > .btn-primary.dropdown-toggle, .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. 

  81. .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,

  82. fieldset[disabled] .btn-primary:hover,

  83. fieldset[disabled] .btn-primary:focus,

  84. fieldset[disabled] .btn-primary.focus {

  85.   background-color: #29abe2;

  86.   border-color: #29abe2;

  87.   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));

  88.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);

  89. }

  90. 

  91. .btn-secondary {

  92.   background-color: #1f80aa;

  93.   border-color: #1f80aa;

  94. }

  95. 

  96. .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active,

  97. .open > .btn-secondary.dropdown-toggle, .btn-secondary.dropdown-toggle:hover {

  98.   background-color: #1f80aa;

  99.   border-color: #1f80aa;

  100.   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));

  101.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);

  102. }

  103. 

  104. .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus,

  105. fieldset[disabled] .btn-secondary:hover,

  106. fieldset[disabled] .btn-secondary:focus,

  107. fieldset[disabled] .btn-secondary.focus {

  108.   background-color: #1f80aa;

  109.   border-color: #1f80aa;

  110.   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));

  111.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);

  112. }

  113. 

  114. .badge-accent {

  115.   background-color: #ffc142;

  116.   border-color: #ffc142;

  117. }

  118. 

  119. .btn-accent {

  120.   background-color: #ffc142;

  121.   border-color: #ffc142;

  122. }

  123. 

  124. .btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,

  125. .open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {

  126.   background-color: #ffc142;

  127.   border-color: #ffc142;

  128.   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));

  129.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);

  130. }

  131. 

  132. .btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,

  133. fieldset[disabled] .btn-accent:hover,

  134. fieldset[disabled] .btn-accent:focus,

  135. fieldset[disabled] .btn-accent.focus {

  136.   background-color: #ffc142;

  137.   border-color: #ffc142;

  138.   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));

  139.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);

  140. }

  141. 

  142. .btn-flat,

  143. .btn-link,

  144. .btn-link:hover,

  145. .btn-flat:hover,

  146. .btn-link:focus,

  147. .btn-flat:focus,

  148. .nav-tabs > li.active > a,

  149. .nav-tabs > li.active > a:hover,

  150. .nav-tabs > li.active > a:focus,

  151. .card__link,

  152. .card__link:focus,

  153. .card__link:hover,

  154. .view--who-liked .views-field-view-user a,

  155. .comment__reply-btn,

  156. .nav-book .menu-item--active-trail > a {

  157.   color: #29abe2;

  158.   fill: #29abe2;

  159. }

  160. 

  161. .nav-tabs > li.active > a,

  162. .nav-tabs > li.active > a:hover,

  163. .nav-tabs > li.active > a:focus,

  164. .card__link:focus,

  165. .card__link:hover,

  166. .btn-link:hover,

  167. .btn-flat:hover,

  168. .btn-link:focus,

  169. .btn-flat:focus {

  170.   text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);

  171. }

  172. 

  173. .list-item--active,

  174. .list-item--active:hover,

  175. .list-item--active:focus,

  176. .list-group-item.active,

  177. .list-group-item.active:hover,

  178. .list-group-item.active:focus {

  179.   background-color: #1f80aa;

  180.   border-color: #1f80aa;

  181. }

  182. 

  183. .field--name-field-introduction-text a:not(.btn),

  184. .field--name-field-introduction-text a:not(.btn):hover,

  185. .body-text a:not(.btn),

  186. .body-text a:not(.btn):hover {

  187.   color: #33b5e5;

  188. }

  189. 

  190. blockquote {

  191.   border-left-color: #29abe2;

  192. }

  193. 

  194. .input-group .form-control:focus ~ .input-group-addon {

  195.   border-color: #29abe2;

  196.   -webkit-box-shadow: 0 2px 0 0 #29abe2;

  197.           box-shadow: 0 2px 0 0 #29abe2;

  198. }

  199. 

  200. .navbar-secondary {

  201.   color: #f9f9f9;

  202.   background-color: #1f7ea7;

  203. }

  204. 

  205. .navbar-secondary .navbar-nav a {

  206.   color: #f9f9f9;

  207. }

  208. 

  209. .navbar-secondary .navbar-nav li.active a {

  210.   border-bottom-color: #f9f9f9;

  211. }

  212. 

  213. .navbar-scrollable:before {

  214.   background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));

  215.   background: linear-gradient(90deg, #1f7ea7, transparent);

  216. }

  217. 

  218. .navbar-scrollable:after {

  219.   background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));

  220.   background: linear-gradient(-90deg, #1f7ea7, transparent);

  221. }

  222. 

  223. .navbar-default {

  224.   background-color: #333333;

  225. }

  226. 

  227. .navbar-default .navbar-toggle {

  228.   color: #ffffff;

  229. }

  230. 

  231. .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {

  232.   color: #f3f3f3;

  233.   background-color: #1f1f1f;

  234. }

  235. 

  236. .navbar-default .navbar-nav > li > a {

  237.   color: #ffffff;

  238.   fill: #ffffff;

  239. }

  240. 

  241. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

  242.   color: #f3f3f3;

  243.   background-color: #1f1f1f;

  244. }

  245. 

  246. .navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon {

  247.   fill: #f3f3f3;

  248. }

  249. 

  250. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {

  251.   background-color: #1f1f1f;

  252.   color: #f3f3f3;

  253. }

  254. 

  255. .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,

  256. .navbar-default .navbar-nav > .active > a,

  257. .navbar-default .navbar-nav > .active > a:hover,

  258. .navbar-default .navbar-nav > .active > a:focus {

  259.   color: #f3f3f3;

  260.   fill: #f3f3f3;

  261.   background-color: #1f1f1f;

  262. }

  263. 

  264. .navbar-nav__icon {

  265.   fill: #ffffff;

  266. }

  267. 

  268. .navbar__open-search-block {

  269.   background-color: #333333;

  270. }

  271. 

  272. @media (min-width: 900px) {

  273.   .search-take-over .form-text {

  274.     color: #ffffff;

  275.   }

  276.   .search-take-over .form-text:focus {

  277.     border-color: #ffffff;

  278.     -webkit-box-shadow: 0 2px 0 0 #ffffff;

  279.             box-shadow: 0 2px 0 0 #ffffff;

  280.   }

  281.   .btn--close-search-take-over svg {

  282.     fill: #ffffff;

  283.   }

  284. }

  285. 

  286. @media (max-width: 599px) {

  287.   .dropdown.has-alert > a:before {

  288.     background-color: #ffc142;

  289.   }

  290. }

  291. 

  292. @media (max-width: 899px) {

  293.   .navbar-collapse .dropdown-menu li a {

  294.     color: #ffffff;

  295.   }

  296.   .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {

  297.     color: #f3f3f3;

  298.     background-color: #1f1f1f;

  299.   }

  300. }