/* ===========================================================================
UFC.GG - light theme
===========================================================================
GENERATED FILE. Do not edit by hand.
source: resources/build/theme-light/generate.py
tail: resources/build/theme-light/tail.css (hand-maintained)
rebuild: python resources/build/theme-light/generate.py
Loaded LAST, after enhance.css, and every rule in it is scoped to
:root[data-theme="light"]. Dark is the default and is not touched by this
file at all - deleting the one in partials/css.blade.php reverts the
site to dark-only, exactly as it was.
The generator walks style-ufc-dark.css, custom.css and enhance.css, finds
every declaration that paints a known dark value, and re-emits it with the
light equivalent. See the docstring in generate.py for what it deliberately
leaves dark.
=========================================================================== */
/* --------------------------------------------------------------------
Derived from style-ufc-dark.css - 492 rules
-------------------------------------------------------------------- */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6 {
color: #16181c;
}
:root[data-theme="light"] .title-bordered {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] ol.list li::before {
color: #16181c;
}
:root[data-theme="light"] ul.list.list--circle li::before {
color: #16181c;
}
:root[data-theme="light"] .content-title__subtitle {
color: #5f656e;
}
:root[data-theme="light"] .blockquote--default::before {
color: #16181c;
}
:root[data-theme="light"] .blockquote--default .blockquote__content {
color: #16181c;
}
:root[data-theme="light"] .blockquote--default .blockquote__cite {
color: #5f656e;
}
:root[data-theme="light"] address strong {
color: #16181c;
}
:root[data-theme="light"] .df-icon--ppg > path {
fill: #16181c;
}
:root[data-theme="light"] .df-icon--apg > path {
fill: #16181c;
}
:root[data-theme="light"] .df-icon--rpg > path {
fill: #16181c;
}
:root[data-theme="light"] .df-icon--trophy {
fill: #16181c;
}
:root[data-theme="light"] table {
color: #5f656e;
}
:root[data-theme="light"] .table {
color: #5f656e;
}
:root[data-theme="light"] .table > thead > tr > th,
:root[data-theme="light"] .table > thead > tr > td,
:root[data-theme="light"] .table > tbody > tr > th,
:root[data-theme="light"] .table > tbody > tr > td,
:root[data-theme="light"] .table > tfoot > tr > th,
:root[data-theme="light"] .table > tfoot > tr > td {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table > thead > tr > th {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
color: #16181c;
}
:root[data-theme="light"] .table > tbody > tr > th {
color: #16181c;
}
:root[data-theme="light"] .table > tbody + tbody {
border-top: 2px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table-thead-color > thead > tr > th {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .table-top-border > thead:first-child > tr:first-child > th {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table > tbody > tr.highlighted {
background-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] td.highlight {
color: #16181c;
}
:root[data-theme="light"] .table-hover > tbody > tr:hover {
color: #5f656e;
background-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .table-bordered {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table-bordered > thead > tr > th,
:root[data-theme="light"] .table-bordered > thead > tr > td,
:root[data-theme="light"] .table-bordered > tbody > tr > th,
:root[data-theme="light"] .table-bordered > tbody > tr > td,
:root[data-theme="light"] .table-bordered > tfoot > tr > th,
:root[data-theme="light"] .table-bordered > tfoot > tr > td {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table-wrap-bordered {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .df-color-pallete__item {
color: #16181c;
}
:root[data-theme="light"] .df-color-pallete__item.color-dark {
background-color: #f4f5f7;
}
:root[data-theme="light"] .df-color-pallete__item.color-dark-lighten {
background-color: #ffffff;
}
:root[data-theme="light"] .df-color-pallete__item.color-2 {
background-color: #e9ecf1;
}
:root[data-theme="light"] .df-color-pallete__item.color-gray {
background-color: #d6dae0;
}
:root[data-theme="light"] .gfont-item__body {
color: #16181c;
}
:root[data-theme="light"] .gfont-item__name {
color: #16181c;
}
:root[data-theme="light"] .accordion .accordion__header-link {
color: #16181c;
}
:root[data-theme="light"] .accordion .accordion__header-link-icon {
background-color: #d6dae0;
}
:root[data-theme="light"] .accordion--space-between .card:not(:first-of-type):not(:last-of-type) {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .accordion--space-between .card:first-of-type {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card {
border: 1px solid rgba(0, 0, 0, 0.043);
background-color: #ffffff;
}
:root[data-theme="light"] .card--clean .card__header {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card__header {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card__subheader {
background: rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card__subheader--flex {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card__subheader--clean > h5 {
color: #5f656e;
}
:root[data-theme="light"] .card--info .contact-info {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card--info .contact-info__item {
border-left: 1px solid rgba(0, 0, 0, 0.043);
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card--info .contact-info__label {
color: #16181c;
}
:root[data-theme="light"] .card--info .contact-info__label a {
color: #16181c;
}
:root[data-theme="light"] label {
color: #16181c;
}
:root[data-theme="light"] .form-control {
background-color: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .form-control:focus {
color: #16181c;
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .form-control[disabled],
:root[data-theme="light"] .form-control[readonly],
:root[data-theme="light"] fieldset[disabled] .form-control {
background-color: rgba(0, 0, 0, 0.043);
border-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .has-success .help-block,
:root[data-theme="light"] .has-success .control-label,
:root[data-theme="light"] .has-success .radio,
:root[data-theme="light"] .has-success .checkbox,
:root[data-theme="light"] .has-success .radio-inline,
:root[data-theme="light"] .has-success .checkbox-inline,
:root[data-theme="light"] .has-success.radio label,
:root[data-theme="light"] .has-success.checkbox label,
:root[data-theme="light"] .has-success.radio-inline label,
:root[data-theme="light"] .has-success.checkbox-inline label {
color: #16181c;
}
:root[data-theme="light"] .has-success .input-group-addon {
background-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .has-warning .help-block,
:root[data-theme="light"] .has-warning .control-label,
:root[data-theme="light"] .has-warning .radio,
:root[data-theme="light"] .has-warning .checkbox,
:root[data-theme="light"] .has-warning .radio-inline,
:root[data-theme="light"] .has-warning .checkbox-inline,
:root[data-theme="light"] .has-warning.radio label,
:root[data-theme="light"] .has-warning.checkbox label,
:root[data-theme="light"] .has-warning.radio-inline label,
:root[data-theme="light"] .has-warning.checkbox-inline label {
color: #16181c;
}
:root[data-theme="light"] .has-warning .input-group-addon {
background-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .has-error .help-block,
:root[data-theme="light"] .has-error .control-label,
:root[data-theme="light"] .has-error .radio,
:root[data-theme="light"] .has-error .checkbox,
:root[data-theme="light"] .has-error .radio-inline,
:root[data-theme="light"] .has-error .checkbox-inline,
:root[data-theme="light"] .has-error.radio label,
:root[data-theme="light"] .has-error.checkbox label,
:root[data-theme="light"] .has-error.radio-inline label,
:root[data-theme="light"] .has-error.checkbox-inline label {
color: #16181c;
}
:root[data-theme="light"] .has-error .input-group-addon {
background-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] select.form-control {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] select.form-control option {
background-color: #ffffff;
color: #16181c;
}
:root[data-theme="light"] select.form-control--clean {
color: #16181c;
}
:root[data-theme="light"] .form-group--password-forgot .password-reminder {
color: #16181c;
}
:root[data-theme="light"] .form-group__avatar-wrapper .form-group__avatar-img::before {
background-color: #e9ecf1;
color: #16181c;
}
:root[data-theme="light"] .form-group__avatar--center img {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .form-group__avatar--center .form-group__label span {
color: #5f656e;
}
:root[data-theme="light"] .checkbox .checkbox-indicator {
background-color: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .checkbox input[type=checkbox]:disabled + .checkbox-indicator {
background-color: rgba(0, 0, 0, 0.043);
border-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .checkbox input[type=checkbox]:disabled:checked + .checkbox-indicator {
background-color: rgba(0, 0, 0, 0.043);
border-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .checkbox--cell .checkbox-indicator {
background-color: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .radio .radio-indicator {
background-color: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .radio input[type=radio]:disabled + .radio-indicator {
background-color: rgba(0, 0, 0, 0.043);
border-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .radio--word input[type=radio]:checked + .radio-label {
color: #16181c;
}
:root[data-theme="light"] .quantity-control .form-control {
color: #16181c;
}
:root[data-theme="light"] .switch__label-txt {
color: #16181c;
}
:root[data-theme="light"] .switch-toggle + label {
background-color: rgba(0, 0, 0, 0.043);
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .countdown-counter__item {
color: #16181c;
}
:root[data-theme="light"] .countdown-counter__label {
color: #5f656e;
}
:root[data-theme="light"] .breadcrumb-item + .breadcrumb-item::before {
color: #5f656e !important;
}
:root[data-theme="light"] .breadcrumb-item.active {
color: #5f656e;
}
:root[data-theme="light"] .page-link {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.043);
color: #16181c;
}
:root[data-theme="light"] .pagination--skewed {
border-left: 1px solid rgba(0, 0, 0, 0.043);
border-right: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .progress {
background-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .progress__label {
color: #16181c;
}
:root[data-theme="light"] .progress__label.progress__label--color-default {
color: #5f656e;
}
:root[data-theme="light"] .progress__number.progress__number--color-highlight {
color: #16181c;
}
:root[data-theme="light"] .progress__digit--highlight {
color: #16181c;
}
:root[data-theme="light"] .progress--battery {
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.085), rgba(0, 0, 0, 0.085) 2px, transparent 2px, transparent), radial-gradient(circle, rgba(0, 0, 0, 0.085), rgba(0, 0, 0, 0.085) 2px, transparent 2px, transparent), linear-gradient(to right, rgba(0, 0, 0, 0.085), rgba(0, 0, 0, 0.085) 4px, transparent 4px, transparent 8px);
}
:root[data-theme="light"] .progress--dashed::before {
background-image: linear-gradient(45deg, #ffffff 0%, #ffffff 3px, transparent 3px, transparent 12%, #ffffff 12%, #ffffff calc(12% + 3px), transparent calc(12% + 3px), transparent 25%, #ffffff 25%, #ffffff calc(25% + 3px), transparent calc(25% + 3px), transparent 41%, #ffffff 41%, #ffffff calc(41% + 3px), transparent calc(41% + 3px), transparent 57%, #ffffff 57%, #ffffff calc(57% + 3px), transparent calc(57% + 3px), transparent 77%, #ffffff 77%, #ffffff calc(77% + 3px), transparent calc(77% + 3px), transparent calc(100% - 3px), #ffffff calc(100% - 3px), #ffffff 100%);
}
@supports (position: -ms-page) {
:root[data-theme="light"] .progress--dashed::before {
background-image: linear-gradient(45deg, #ffffff 0%, #ffffff 3px, transparent 3px, transparent 12%, #ffffff 12%, #ffffff 13%, transparent 13%, transparent 25%, #ffffff 25%, #ffffff 26%, transparent 26%, transparent 41%, #ffffff 41%, #ffffff 42%, transparent 42%, transparent 57%, #ffffff 57%, #ffffff 58%, transparent 58%, transparent 77%, #ffffff 77%, #ffffff 78%, transparent 78%, transparent 99%, #ffffff 99%, #ffffff 100%);
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
:root[data-theme="light"] .progress--dashed::before {
background-image: linear-gradient(45deg, #ffffff 0%, #ffffff 3px, transparent 3px, transparent 12%, #ffffff 12%, #ffffff 13%, transparent 13%, transparent 25%, #ffffff 25%, #ffffff 26%, transparent 26%, transparent 41%, #ffffff 41%, #ffffff 42%, transparent 42%, transparent 57%, #ffffff 57%, #ffffff 58%, transparent 58%, transparent 77%, #ffffff 77%, #ffffff 78%, transparent 78%, transparent 99%, #ffffff 99%, #ffffff 100%);
}
}
:root[data-theme="light"] .progress--lines {
--bar-bg: #ffffff;
}
:root[data-theme="light"] .progress--lines-sm {
--bar-bg: #ffffff;
}
:root[data-theme="light"] .progress-table {
color: #16181c;
}
:root[data-theme="light"] .progress-table__progress-label {
color: #5f656e;
}
:root[data-theme="light"] .progress-table__progress-label--highlight {
color: #16181c;
}
:root[data-theme="light"] .progress-bar-wrapper--labels-top .progress-labels {
color: #16181c;
}
:root[data-theme="light"] .progress-bar-wrapper--labels-side .progress-labels {
color: #16181c;
}
:root[data-theme="light"] .progress-bar-wrapper--labels-side .progress-labels__value {
color: #16181c;
}
:root[data-theme="light"] .circular__percents {
color: #16181c;
}
:root[data-theme="light"] .circular__percents .circular__label {
color: #5f656e;
}
:root[data-theme="light"] .lightbox-holder__overlay h3 {
color: #16181c;
}
:root[data-theme="light"] .lightbox-holder__overlay time {
color: #5f656e;
}
:root[data-theme="light"] .lightbox-holder__overlay--video::before {
color: #16181c;
}
:root[data-theme="light"] .cs-select .cs-options {
background: #ffffff;
}
:root[data-theme="light"] div.cs-skin-border > span {
border-bottom: 1px solid #e2e5ea;
color: #16181c;
}
:root[data-theme="light"] .post-filter--outline div.cs-skin-border > span {
border: 1px solid #e2e5ea;
}
@media (min-width: 992px) {
:root[data-theme="light"] div.cs-skin-border > span {
border-right: 1px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--outline div.cs-skin-border > span {
border: 1px solid #e2e5ea;
}
}
:root[data-theme="light"] div.cs-skin-border .cs-selected span {
color: #16181c;
}
:root[data-theme="light"] div.cs-skin-border.cs-active > span {
color: #16181c;
background-color: #ffffff;
}
:root[data-theme="light"] div.cs-skin-border .cs-options {
border: 1px solid #e2e5ea;
color: rgba(22, 24, 28, 0.65);
}
:root[data-theme="light"] div.cs-skin-border .cs-options li span:hover,
:root[data-theme="light"] div.cs-skin-border li.cs-focus span {
color: #16181c;
}
:root[data-theme="light"] .category-filter__link {
color: rgba(22, 24, 28, 0.65);
}
:root[data-theme="light"] .category-filter__link:hover {
color: #16181c;
}
:root[data-theme="light"] .category-filter__link--active {
color: #16181c;
}
:root[data-theme="light"] .modal-content {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.026);
}
:root[data-theme="light"] .modal-backdrop {
background-color: #eceef2;
}
:root[data-theme="light"] .modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .modal-header .close.close-round:hover {
background-color: #e9ecf1;
}
:root[data-theme="light"] .modal-footer {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .noUi-target {
background-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .noUi-handle {
border: 4px solid #d6dae0;
}
:root[data-theme="light"] .icobox__icon--border {
border: 2px solid rgba(0, 0, 0, 0.043);
background-color: #ffffff;
}
:root[data-theme="light"] .ratings .empty {
color: #454a52;
}
:root[data-theme="light"] .marquee-wrapper {
background-color: #ffffff;
}
:root[data-theme="light"] .marquee {
background-color: #ffffff;
}
@media (min-width: 768px) {
:root[data-theme="light"] .marquee::after {
background-color: #ffffff;
}
:root[data-theme="light"] .marquee-label::after {
background-color: #ffffff;
}
}
:root[data-theme="light"] .marquee-wrapper--boxed {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .isotope-filter__link {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control::-webkit-input-placeholder {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control::-moz-placeholder {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control:-ms-input-placeholder {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control:-moz-placeholder {
color: #16181c;
}
:root[data-theme="light"] .search-panel-form .form-control:hover::-webkit-input-placeholder {
color: rgba(22, 24, 28, 0.95);
}
:root[data-theme="light"] .search-panel-form .form-control:hover::-moz-placeholder {
color: rgba(22, 24, 28, 0.95);
}
:root[data-theme="light"] .search-panel-form .form-control:hover:-ms-input-placeholder {
color: rgba(22, 24, 28, 0.95);
}
:root[data-theme="light"] .search-panel-form .form-control:hover:-moz-placeholder {
color: rgba(22, 24, 28, 0.95);
}
:root[data-theme="light"] .search-panel-form .form-control:focus {
border-color: #d6dae0;
}
:root[data-theme="light"] .search-panel-form .form-control:focus::-webkit-input-placeholder {
color: rgba(22, 24, 28, 0.45);
}
:root[data-theme="light"] .search-panel-form .form-control:focus::-moz-placeholder {
color: rgba(22, 24, 28, 0.45);
}
:root[data-theme="light"] .search-panel-form .form-control:focus:-ms-input-placeholder {
color: rgba(22, 24, 28, 0.45);
}
:root[data-theme="light"] .search-panel-form .form-control:focus:-moz-placeholder {
color: rgba(22, 24, 28, 0.45);
}
:root[data-theme="light"] .posts__item--category-4 .posts__cat-label,
:root[data-theme="light"] .posts__item--category-4 .posts__cta {
background-color: #e9ecf1;
}
:root[data-theme="light"] .posts__item--category-4 .posts__thumb--hover::before {
background-color: #e9ecf1;
}
:root[data-theme="light"] .posts__item .posts__cat-label--category-4 {
background-color: #e9ecf1;
}
:root[data-theme="light"] .posts__thumb--video::before {
color: #16181c;
background-color: rgba(0, 0, 0, 0.104);
}
:root[data-theme="light"] .posts__thumb--video-has-overlay::after {
background-color: rgba(0, 0, 0, 0.078);
}
:root[data-theme="light"] .posts__title a {
color: #16181c;
}
:root[data-theme="light"] .card .posts--simple-list .posts__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card .posts--simple-list .posts__footer {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts--simple-list .post-author__name {
color: #5f656e;
}
:root[data-theme="light"] .card .posts--list-skewed .posts__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts--list-skewed .posts__item.list-group-item {
background-color: rgba(0, 0, 0, 0.025);
color: #5f656e;
}
:root[data-theme="light"] .posts--list-skewed .posts__item.list-group-item.active {
background-color: #ffffff;
}
:root[data-theme="light"] .posts--list-skewed .posts__item-overlay .posts__inner {
background-color: rgba(0, 0, 0, 0.078);
}
:root[data-theme="light"] .posts--list-skewed .posts__item-overlay .posts__inner .post__meta {
color: #5f656e;
}
:root[data-theme="light"] .posts--list-skewed .posts__item-overlay .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts--list-skewed .posts__item-overlay .posts__title a {
color: #16181c;
}
:root[data-theme="light"] .posts--list-skewed .posts__item-overlay .posts__title a:hover {
color: #16181c;
}
:root[data-theme="light"] .posts--list-skewed .posts__thumb .meta-video-duration {
background-color: rgba(0, 0, 0, 0.078);
color: #16181c;
}
:root[data-theme="light"] .posts__item--card .posts__footer {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts__item--card .post-author__name {
color: #5f656e;
}
:root[data-theme="light"] .posts__item--tile .posts__date {
color: #16181c;
}
:root[data-theme="light"] .posts__item--tile .posts__footer {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts__item--tile .post-author__name {
color: #5f656e;
}
:root[data-theme="light"] .posts--tile-alt .posts__item-link-overlay:hover {
background-color: #e9ecf1;
}
:root[data-theme="light"] .posts--tile-alt .posts__thumb::after {
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eceef2));
background-image: linear-gradient(to bottom, transparent 0%, #eceef2 100%);
}
:root[data-theme="light"] .posts__item--tile-event .posts__inner {
color: #16181c;
}
:root[data-theme="light"] .posts__item--tile-event .countdown-counter__label {
color: #16181c;
}
:root[data-theme="light"] .posts__item--quote::before {
color: #16181c;
}
:root[data-theme="light"] .blockquote--card .blockquote__content {
color: #16181c;
}
:root[data-theme="light"] .blockquote--card .blockquote__footer {
color: #16181c;
}
:root[data-theme="light"] .blockquote--card .blockquote__author-info {
color: rgba(22, 24, 28, 0.95);
}
:root[data-theme="light"] .posts--slider-featured .posts__inner {
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eceef2));
background-image: linear-gradient(to bottom, transparent, #eceef2);
}
:root[data-theme="light"] .posts--slider-featured .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts--slider-featured .post-author {
color: #16181c;
}
:root[data-theme="light"] .posts--slider-featured .post-author__name,
:root[data-theme="light"] .posts--slider-featured .posts__date {
color: #16181c;
}
:root[data-theme="light"] .posts-slider--center .posts__thumb::before {
background-color: #eceef2;
}
:root[data-theme="light"] .posts--carousel-featured .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts--carousel-featured .posts__date {
color: #5f656e;
}
:root[data-theme="light"] .posts--carousel-featured .meta__item {
color: #16181c;
}
@media (min-width: 768px) {
:root[data-theme="light"] .posts--horizontal .posts__item,
:root[data-theme="light"] .card .posts--horizontal .posts__item {
border-left: 1px solid rgba(0, 0, 0, 0.043);
}
}
:root[data-theme="light"] .posts--carousel .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts--carousel .posts__date {
color: #5f656e;
}
:root[data-theme="light"] .posts__item--desc-center .posts__thumb {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts__item--desc-center .posts__cat-label {
-webkit-box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts__item--desc-center .posts__title {
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts__item--desc-center .posts__date {
color: #16181c;
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts__item--desc-left .posts__thumb {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts__item--desc-left .posts__cat-label {
-webkit-box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts__item--desc-left .posts__title {
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts__item--desc-left .posts__date {
color: #16181c;
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts--slider-top-news .posts__cat-label {
-webkit-box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
box-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts--slider-top-news .posts__title {
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts--slider-top-news .posts__title > a:hover {
color: #16181c !important;
}
:root[data-theme="light"] .posts--slider-top-news .posts__date {
color: #16181c;
}
:root[data-theme="light"] .posts--slider-top-news .post__meta {
color: #16181c;
text-shadow: 0 0 12px rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .posts--slider-top-news .meta__item a {
color: #16181c;
}
:root[data-theme="light"] .posts--video-grid .posts__item {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .posts--video-grid .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts--video-grid .posts__date {
color: #5f656e;
}
:root[data-theme="light"] .posts__item--card-grid-fullw-thumb-overlay .posts__thumb::before {
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.117)));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.117));
}
:root[data-theme="light"] .posts__item--card-grid-fullw-thumb-overlay .posts__title a {
color: #16181c;
}
:root[data-theme="light"] .posts__item--card-grid-fullw-thumb-overlay .posts__title a:hover {
color: #16181c;
}
:root[data-theme="light"] .posts__item--card-grid-fullw-thumb-overlay .posts__excerpt {
color: #5f656e;
}
:root[data-theme="light"] .posts__item--card-grid-fullw-thumb-overlay .post__meta {
color: #5f656e;
}
:root[data-theme="light"] .posts__item--stacked .posts__title {
color: #16181c;
}
:root[data-theme="light"] .posts__item--stacked .posts__title > a {
color: #16181c;
}
:root[data-theme="light"] .posts__item--stacked .meta__item {
color: #5f656e;
}
:root[data-theme="light"] .post--single .post__tags--simple a {
color: #16181c;
}
:root[data-theme="light"] .post--single-sm .post__meta .meta__item--date {
color: #16181c;
}
:root[data-theme="light"] .post-author__slogan {
color: #5f656e;
}
:root[data-theme="light"] .meta__item a {
color: #5f656e;
}
:root[data-theme="light"] .meta__item a:hover {
color: #16181c;
}
:root[data-theme="light"] .post__meta-block--top .post__meta {
color: #16181c;
}
:root[data-theme="light"] .post__meta-block--top .meta__item a {
color: #16181c;
}
:root[data-theme="light"] .post__meta-block--top .post-author__name {
color: #16181c;
}
:root[data-theme="light"] .post__meta-block--side-wide .post-author__name {
color: #5f656e;
}
:root[data-theme="light"] .post-meta-skewed {
background-color: rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .post-meta-skewed .post__meta .meta__item:not(.meta__item--social) {
border-right: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .post-meta-skewed .post__meta .meta__item--social > a i {
color: #5f656e;
}
:root[data-theme="light"] .post-meta-skewed .post__meta .meta__item--social > a:hover {
background-color: #ffffff;
}
:root[data-theme="light"] .post-meta-skewed .post__meta .meta__item--social:not(:last-child) > a {
border-right: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .post__meta--lg .meta__item .meta__item-holder,
:root[data-theme="light"] .post__meta--lg .meta__item > a {
color: #16181c;
}
:root[data-theme="light"] .post__meta--lg .meta__item .meta__item-holder > i,
:root[data-theme="light"] .post__meta--lg .meta__item > a > i {
color: #5f656e;
}
:root[data-theme="light"] .comments__inner {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
@media (min-width: 992px) {
:root[data-theme="light"] .card .comments--children .comments__item .comments__inner::before,
:root[data-theme="light"] .comments--children .comments__item .comments__inner::before {
border-left: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card--lg .comments--children .comments__item .comments__inner::before {
border-left: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
}
:root[data-theme="light"] .comments--alt .comment__reply-link {
color: #16181c;
}
:root[data-theme="light"] .post-filter {
background-color: #ffffff;
border-bottom: 1px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter__select .post-filter__label {
color: #5f656e;
}
:root[data-theme="light"] .post-filter--outline .cs-select.cs-active .cs-options {
-webkit-box-shadow: 0 20px 40px 0 rgba(16, 18, 22, 0.03);
box-shadow: 0 20px 40px 0 rgba(16, 18, 22, 0.03);
}
:root[data-theme="light"] .post-filter--outline.post-filter--boxed .post-filter__form .post-filter__select:first-child div.cs-skin-border > span {
border-left: 1px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--outline.post-filter--boxed .cs-select.cs-active .cs-options {
-webkit-box-shadow: 0 20px 40px 0 rgba(16, 18, 22, 0.03);
box-shadow: 0 20px 40px 0 rgba(16, 18, 22, 0.03);
}
:root[data-theme="light"] .post-filter--boxed .post-filter__form {
background-color: #ffffff;
border: 1px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--boxed .cs-select .cs-options {
border-top: 1px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--boxed .cs-select .cs-options::before {
border-bottom: 8px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--boxed .cs-select .cs-options::after {
border-bottom: 7px solid #e2e5ea;
}
:root[data-theme="light"] .post-filter--boxed .cs-select.cs-active .cs-options {
-webkit-box-shadow: 0 0 12px 0 rgba(16, 18, 22, 0.09);
box-shadow: 0 0 12px 0 rgba(16, 18, 22, 0.09);
}
:root[data-theme="light"] .widget__list > li + li {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget__list > li > a {
color: #16181c;
}
:root[data-theme="light"] .widget__list ul {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget__list ul li a {
color: #5f656e;
}
:root[data-theme="light"] .widget-instagram__list-section .widget-instagram__link-wrapper::before {
background-color: #e9ecf1;
}
:root[data-theme="light"] .widget-instagram__list-section--skewed {
background-color: #f4f5f7;
}
:root[data-theme="light"] .widget-tabbed .nav.widget-tabbed__nav {
background: #f4f5f7;
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-tabbed .nav.widget-tabbed__nav .nav-link {
color: rgba(22, 24, 28, 0.65);
}
:root[data-theme="light"] .widget-tabbed .nav.widget-tabbed__nav .nav-link:hover {
color: #16181c;
}
:root[data-theme="light"] .widget-tabbed .nav.widget-tabbed__nav .nav-link.active {
color: #16181c;
}
:root[data-theme="light"] .card .comments-list__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .comments-list--alt .comments-list__post::before {
background-color: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .widget-featured-event-post .post__event-heading {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-featured-event-post .post__event-heading-primary,
:root[data-theme="light"] .widget-featured-event-post .post__event-heading-secondary {
color: #5f656e;
}
:root[data-theme="light"] .widget-featured-event-post .post__event-content {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-featured-event-post .post__event-result--winner {
color: #16181c;
}
:root[data-theme="light"] .widget-player__name {
color: #16181c;
}
:root[data-theme="light"] .widget-player__stat-label {
color: #16181c;
}
:root[data-theme="light"] .widget-player__stat-legend {
color: #5f656e;
}
:root[data-theme="light"] .widget-player__details {
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-player__details__item {
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-player__details-label {
color: #16181c;
}
:root[data-theme="light"] .widget-player__details-value {
color: #16181c;
}
:root[data-theme="light"] .widget-player--alt .widget-player__stat-legend {
color: #16181c;
}
:root[data-theme="light"] .widget-player--sm .widget-player__info {
color: #5f656e;
}
:root[data-theme="light"] .widget-player__stat--label {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__header--alt {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-game-result__score {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__score-result--loser {
color: #5f656e;
}
:root[data-theme="light"] .widget-game-result__score-label {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__score-video-icon {
color: #16181c;
background-color: #d6dae0;
}
:root[data-theme="light"] .widget-game-result__main--vertical .widget-game-result__team + .widget-game-result__team {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-game-result__main--vertical .widget-game-result__team .widget-game-result__team-score--winner {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__table-stats .table {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-game-result__table-stats .table > thead > tr > th:last-child,
:root[data-theme="light"] .widget-game-result__table-stats .table > tbody > tr > td:last-child,
:root[data-theme="light"] .widget-game-result__table-stats .table > tbody > tr > th:last-child {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__section-inner-alt .widget-game-result__table-stats .table > thead > tr > th:last-child,
:root[data-theme="light"] .widget-game-result__section-inner-alt .widget-game-result__table-stats .table > tbody > tr > td:last-child,
:root[data-theme="light"] .widget-game-result__section-inner-alt .widget-game-result__table-stats .table > tbody > tr > th:last-child {
color: #16181c;
}
:root[data-theme="light"] .player-details__name > a {
color: #16181c;
}
:root[data-theme="light"] .player-details__circular .circular__percents small {
color: #5f656e;
}
:root[data-theme="light"] .widget-game-result__stack-item + .widget-game-result__stack-item {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-game-result__stack-item .widget-game-result__stack-value {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__stack-result-team + .widget-game-result__stack-result-team::before {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__stack-result-team.win {
color: #16181c;
}
:root[data-theme="light"] .widget-game-result__stack-result--divider-slash .widget-game-result__stack-result-team {
color: #16181c;
}
:root[data-theme="light"] .poll-form__question-title {
color: #16181c;
}
:root[data-theme="light"] .poll-form__options .radio-progress-value {
color: #16181c;
}
:root[data-theme="light"] .poll-form__options--rows {
-webkit-border-before: 1px solid rgba(0, 0, 0, 0.043);
border-block-start: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .poll-form__options--rows > .form-group {
border-block-end: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .poll-form__options--rows .radio-inline .radio-indicator {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .poll-form__options--rows .radio-inline .radio-indicator::before {
background-color: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .widget-results__item {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-results__header {
color: #5f656e;
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-results__score {
color: #16181c;
}
:root[data-theme="light"] .widget-results__status {
color: #5f656e;
}
:root[data-theme="light"] .widget-results__dt {
color: #16181c;
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-results__dt--category-4::before {
background-color: #e9ecf1;
}
:root[data-theme="light"] .awards-filter {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .awards-filter__link {
color: #5f656e;
}
:root[data-theme="light"] .awards-filter__link:hover {
color: #16181c;
}
:root[data-theme="light"] .awards-filter__link--active {
color: #16181c;
}
:root[data-theme="light"] .chart-legend ul {
color: #16181c;
}
:root[data-theme="light"] .team-leader {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .team-stats__icon--centered .fa,
:root[data-theme="light"] .team-stats__icon--centered .fab,
:root[data-theme="light"] .team-stats__icon--centered .fas {
color: #16181c;
}
:root[data-theme="light"] .team-stats__indicator {
color: #16181c;
background-color: #ffffff;
}
:root[data-theme="light"] .team-stats__icon--assists .team-stats__icon-secondary {
background-color: #e9ecf1;
color: #16181c;
}
:root[data-theme="light"] .team-stats__value {
color: #16181c;
}
:root[data-theme="light"] .products-list__item + .products-list__item {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .products-list__product-name > a {
color: #16181c;
}
:root[data-theme="light"] .products-list__product-ratings .fa.empty,
:root[data-theme="light"] .products-list__product-ratings .fab.empty,
:root[data-theme="light"] .products-list__product-ratings .fas.empty {
color: #454a52;
}
:root[data-theme="light"] .products-list__product-sum {
color: #16181c;
}
:root[data-theme="light"] .calendar_wrap > table thead th {
color: #16181c;
}
:root[data-theme="light"] .calendar_wrap > table tbody td {
color: #16181c;
}
:root[data-theme="light"] .calendar_wrap > table .prev a,
:root[data-theme="light"] .calendar_wrap > table .next a {
background-color: #d6dae0;
}
:root[data-theme="light"] .calendar_wrap > table .prev a::before,
:root[data-theme="light"] .calendar_wrap > table .next a::before {
color: #16181c;
}
:root[data-theme="light"] .calendar_wrap caption {
color: #16181c;
background-color: rgba(0, 0, 0, 0.078);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .team-info__item + .team-info__item {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .team-info__label,
:root[data-theme="light"] .team-info__value {
color: #16181c;
}
:root[data-theme="light"] .widget-tickets .card__subheader {
border-inline: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .widget-standings .table-standings > tbody > tr > td {
color: #16181c;
}
:root[data-theme="light"] .widget-standings .table-standings > tbody > tr > td:first-child > .team-meta::before {
color: #5f656e;
}
:root[data-theme="light"] .team-meta__place {
color: #5f656e;
}
:root[data-theme="light"] .team-meta__vs {
color: #16181c;
}
:root[data-theme="light"] .table-standings--full .team-standings__win,
:root[data-theme="light"] .table-standings--full .team-standings__lose,
:root[data-theme="light"] .table-standings--full .team-standings__gb {
color: #16181c;
}
:root[data-theme="light"] .glossary__abbr {
color: #16181c;
}
:root[data-theme="light"] .team-result > tbody > tr > td {
color: #16181c;
color: #5f656e;
}
:root[data-theme="light"] .team-result__game {
color: #16181c;
}
:root[data-theme="light"] .team-result-filter__item select.form-control {
color: #16181c;
}
:root[data-theme="light"] .team-result__teams-wrapper .team-result__teams-score {
color: #16181c;
}
:root[data-theme="light"] .team-result__teams-wrapper .team-result__teams-score .team-result__score {
color: #5f656e;
}
:root[data-theme="light"] .team-result__teams-wrapper .team-result__teams-score .team-result__score.team-result__score--win {
color: #16181c;
}
:root[data-theme="light"] .player-info {
color: #16181c;
}
:root[data-theme="light"] .player-info__number {
color: #16181c;
}
:root[data-theme="light"] .player-info__name {
color: #16181c;
}
:root[data-theme="light"] .player-info-details__title {
color: #5f656e;
}
:root[data-theme="light"] .player-info-stats__item .circular .circular__bar .circular__percents {
color: #16181c;
}
:root[data-theme="light"] .player-info-stats__item .circular .circular__bar .circular__percents small {
color: #5f656e;
}
:root[data-theme="light"] .player-info-stats__item .circular .circular__label {
color: #5f656e;
}
:root[data-theme="light"] .player-info-stats__item .circular .circular__label strong {
color: #16181c;
}
:root[data-theme="light"] .player-info__item--stats .progress__label {
color: #16181c;
}
:root[data-theme="light"] .player-info__item--stats .progress:not(.progress--battery) {
background-color: rgba(0, 0, 0, 0.17);
}
:root[data-theme="light"] .game-player-result .game-player-result__game {
color: #16181c;
}
@media (min-width: 992px) {
:root[data-theme="light"] .tournament-bracket__item::after {
border-right: 2px solid #e2e5ea;
}
:root[data-theme="light"] .tournament-bracket__item:nth-child(odd)::after {
border-top: 2px solid #e2e5ea;
}
:root[data-theme="light"] .tournament-bracket__item:nth-child(even)::after {
border-bottom: 2px solid #e2e5ea;
}
:root[data-theme="light"] .tournament-bracket__match::before,
:root[data-theme="light"] .tournament-bracket__match::after {
border-left: 2px solid #e2e5ea;
}
:root[data-theme="light"] .tournament-bracket__match::before {
border-bottom: 2px solid #e2e5ea;
}
:root[data-theme="light"] .tournament-bracket__match::after {
border-top: 2px solid #e2e5ea;
}
}
:root[data-theme="light"] .tournament-bracket__team {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .tournament-bracket__team--winner,
:root[data-theme="light"] .tournament-bracket__team--champ {
background-color: #ffffff;
}
:root[data-theme="light"] .tournament-bracket__number {
background-color: #f4f5f7;
}
:root[data-theme="light"] .tournament-bracket__team--winner .tournament-bracket__number {
color: #16181c;
}
:root[data-theme="light"] .sp-form-event-link {
color: #16181c;
background-color: #d6dae0;
}
:root[data-theme="light"] .sp-form-event-link:hover {
color: #16181c;
}
:root[data-theme="light"] .df-checkout-review-order-table .product-header {
color: #5f656e;
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-checkout-review-order-table tbody .product-name {
color: #16181c;
}
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr th {
color: #16181c;
}
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr:first-child th,
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr:first-child td {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr.order-total th,
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr.order-total td {
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-checkout-review-order-table tfoot tr.order-total .amount {
color: #16181c;
}
:root[data-theme="light"] .df-checkout-review-order-table tfoot.bordered > tr th,
:root[data-theme="light"] .df-checkout-review-order-table tfoot.bordered > tr td {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-checkout-payment .place-order {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df_payment_methods-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df_payment_methods-title {
color: #5f656e;
}
:root[data-theme="light"] .df_payment_methods--bordered .df_payment_method {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .card .df-account-user + .df-account-navigation {
-webkit-border-before: 1px solid rgba(0, 0, 0, 0.043);
border-block-start: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-account-navigation__link > a:hover {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .df-account-navigation__link > a > small {
color: #5f656e;
}
:root[data-theme="light"] .df-account-navigation__link + li {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .df-account-navigation__link--active a,
:root[data-theme="light"] .df-account-navigation .active {
background-color: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .df-account-user__info-item-value {
color: #16181c;
}
:root[data-theme="light"] .shop-table .product__price,
:root[data-theme="light"] .shop-table .product__availability,
:root[data-theme="light"] .shop-table .product__size {
color: #16181c;
}
:root[data-theme="light"] .shop-table .product__info .product__cat {
color: #5f656e;
}
:root[data-theme="light"] .shop-table .product__info .product__name > a {
color: #16181c;
}
:root[data-theme="light"] .shop-table .product__info .product__ratings .fa-star.empty {
color: #454a52;
}
:root[data-theme="light"] .shop-table td.product__tags .product__tag {
color: #5f656e;
}
:root[data-theme="light"] .shop-table td.product__stock {
color: #5f656e;
}
:root[data-theme="light"] .shop-table td.product__shipping {
color: #5f656e;
}
:root[data-theme="light"] .shop-table td.product__total {
color: #16181c;
}
:root[data-theme="light"] .shop-table .product__remove-icon {
color: #16181c;
}
:root[data-theme="light"] .shop-table .product__color-item {
background-color: #e9ecf1;
}
:root[data-theme="light"] .shop-table .product__color-item--selected::before {
border: 2px solid #d6dae0;
}
:root[data-theme="light"] .shop-table .product__color-item--color-black {
background-color: #f0f1f4;
}
:root[data-theme="light"] .shop-table .product__color-item--color-black::before {
border-color: #e2e5ea;
}
:root[data-theme="light"] .shop-banner__content {
color: #16181c;
}
:root[data-theme="light"] .shop-banner__txt1 {
color: #16181c;
}
:root[data-theme="light"] .shop-banner__title {
color: #16181c;
border: 3px solid #d6dae0;
}
:root[data-theme="light"] .shop-banner__subtitle {
color: #16181c;
}
:root[data-theme="light"] .shop-banner__bg-txt {
color: #16181c;
}
:root[data-theme="light"] .shop-banner__discount {
color: #16181c;
}
:root[data-theme="light"] .shop-filter__control select.form-control {
background-color: #ffffff;
color: #16181c;
}
:root[data-theme="light"] .shop-filter__grid-layout,
:root[data-theme="light"] .shop-filter__list-layout {
border-left: 1px solid rgba(0, 0, 0, 0.043);
}
@media (max-width: 992px) {
:root[data-theme="light"] .shop-filter__grid-layout,
:root[data-theme="light"] .shop-filter__list-layout {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
}
:root[data-theme="light"] .shop-filter--grid .shop-filter__control + .shop-filter__control {
border-inline-start: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .product__title > a {
color: #16181c;
}
:root[data-theme="light"] .product__ratings .empty {
color: #454a52;
}
:root[data-theme="light"] .product__bg-letters {
color: #16181c;
}
:root[data-theme="light"] .onsale {
color: #16181c;
background-color: #e9ecf1;
color: #16181c;
}
:root[data-theme="light"] .product__slide-img::after {
-webkit-box-shadow: 0 40px 10px rgba(16, 18, 22, 0.015);
box-shadow: 0 40px 10px rgba(16, 18, 22, 0.015);
}
:root[data-theme="light"] .product__slide-thumb-holder {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .products--list .product__price {
color: #16181c;
}
:root[data-theme="light"] .products--list-lg .product__ratings-label {
color: #16181c;
}
:root[data-theme="light"] .products--list-alt .product__slider-paging {
color: #16181c;
}
:root[data-theme="light"] .products--grid .product__category {
color: #16181c;
}
:root[data-theme="light"] .products--grid .product__title {
color: #16181c;
}
:root[data-theme="light"] .products--grid .product__title > a {
color: #16181c;
}
:root[data-theme="light"] .products--grid .product__ratings .empty {
color: #16181c;
}
:root[data-theme="light"] .products--grid .product__price {
color: #16181c;
}
:root[data-theme="light"] .products--grid-simple .product__thumb img {
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .products--grid-simple .product__overlay {
background-color: rgba(0, 0, 0, 0.104);
}
:root[data-theme="light"] .products--grid-light .product__category {
color: #5f656e;
}
:root[data-theme="light"] .products--grid-light .product__title {
color: #16181c;
}
:root[data-theme="light"] .products--grid-light .product__title > a {
color: #16181c;
}
:root[data-theme="light"] .products--grid-light .product__price {
color: #16181c;
}
:root[data-theme="light"] .filter-color__item [class*=indicator] {
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .filter-color__item input[type=checkbox]:checked + [class*=indicator],
:root[data-theme="light"] .filter-color__item input[type=radio]:checked + [class*=indicator] {
background-color: rgba(0, 0, 0, 0.043);
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .filter-color__item input[type=checkbox]:checked + [class*=indicator]::before,
:root[data-theme="light"] .filter-color__item input[type=radio]:checked + [class*=indicator]::before {
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-white + [class*=indicator],
:root[data-theme="light"] .filter-color__item input[type=radio].color-white + [class*=indicator] {
border-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-white:checked + [class*=indicator],
:root[data-theme="light"] .filter-color__item input[type=radio].color-white:checked + [class*=indicator] {
border-color: #d6dae0;
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-white:checked + [class*=indicator]::before,
:root[data-theme="light"] .filter-color__item input[type=radio].color-white:checked + [class*=indicator]::before {
border-color: #d6dae0;
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-black + [class*=indicator],
:root[data-theme="light"] .filter-color__item input[type=radio].color-black + [class*=indicator] {
background-color: #f0f1f4;
border-color: #e2e5ea;
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-black:checked + [class*=indicator],
:root[data-theme="light"] .filter-color__item input[type=radio].color-black:checked + [class*=indicator] {
background-color: #f0f1f4;
border-color: #e2e5ea;
}
:root[data-theme="light"] .filter-color__item input[type=checkbox].color-black:checked + [class*=indicator]::before,
:root[data-theme="light"] .filter-color__item input[type=radio].color-black:checked + [class*=indicator]::before {
border-color: #e2e5ea;
}
:root[data-theme="light"] .filter-color__item input:disabled + [class*=indicator] {
background-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link {
color: #5f656e;
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link > small {
color: #5f656e;
}
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link:hover {
color: #16181c;
}
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link:hover > small {
color: #5f656e;
}
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link.active,
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link.active:hover,
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-link.active:focus {
border: 1px solid rgba(0, 0, 0, 0.043);
color: #16181c;
}
@media (min-width: 768px) {
:root[data-theme="light"] .product-tabs .nav-product-tabs .nav-item + .nav-item .nav-link {
border-left: 1px solid rgba(0, 0, 0, 0.043) !important;
}
}
:root[data-theme="light"] .product-tabs .nav-product-tabs--clean {
border-block-end: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .match-preview__header--decor {
background-image: linear-gradient(to right, transparent, transparent 2px, rgba(0, 0, 0, 0.043) 2px, rgba(0, 0, 0, 0.043) 4px);
}
:root[data-theme="light"] .match-preview__header-inner {
background-color: #ffffff;
}
:root[data-theme="light"] .match-preview__info {
color: #5f656e;
}
:root[data-theme="light"] .match-preview__conj {
color: #16181c;
}
:root[data-theme="light"] .match-preview__action--ticket {
background-image: linear-gradient(to right, transparent 3px, rgba(0, 0, 0, 0.043) 3px);
}
:root[data-theme="light"] .match-preview__action--ticket::before,
:root[data-theme="light"] .match-preview__action--ticket::after {
background-color: #f4f5f7;
border: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .match-preview__countdown .countdown__title {
background-color: rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .match-preview--alt .match-preview__match-time {
color: #16181c;
}
:root[data-theme="light"] .game-result__header--alt {
border-top: 1px solid rgba(0, 0, 0, 0.043);
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .game-result__header--alt .game-result__league {
color: #16181c;
}
:root[data-theme="light"] .game-result__header--alt .game-result__goal {
color: #16181c;
}
:root[data-theme="light"] .game-result__header--alt-compact .game-result__title {
color: #5f656e;
}
:root[data-theme="light"] .game-result__score {
color: #16181c;
}
:root[data-theme="light"] .game-result__score-result--loser {
color: #5f656e;
}
:root[data-theme="light"] .game-result__score-label {
color: #16181c;
}
:root[data-theme="light"] .game-result__score-video-icon {
color: #16181c;
background-color: #d6dae0;
}
:root[data-theme="light"] .game-result__table-stats--soccer tbody > tr > td:first-child,
:root[data-theme="light"] .game-result__table-stats--soccer tbody > tr > td:last-child {
color: #16181c;
}
:root[data-theme="light"] .game-timeline::before {
background-color: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .game-timeline__time {
border: 1px solid rgba(0, 0, 0, 0.043);
background-color: #ffffff;
color: #16181c;
}
:root[data-theme="light"] .game-timeline__event-name {
color: #16181c;
}
@media (min-width: 768px) {
:root[data-theme="light"] .game-result__item .game-result__content {
border-right: 1px solid rgba(0, 0, 0, 0.043);
}
}
:root[data-theme="light"] .game-result__mvp-player-icon {
color: #16181c;
}
:root[data-theme="light"] .game-result__mvp-player-name {
color: #16181c;
}
:root[data-theme="light"] .game-result__mvp-stats-value {
color: #16181c;
}
:root[data-theme="light"] .game-result__stats-circular-bars .game-result__stats-value {
color: #16181c;
}
:root[data-theme="light"] .content-filter {
background-color: #ffffff;
}
@media (min-width: 992px) {
:root[data-theme="light"] .content-filter {
border-bottom: 1px solid #e2e5ea;
}
}
:root[data-theme="light"] .content-filter__toggle::before {
color: #16181c;
}
@media (min-width: 992px) {
:root[data-theme="light"] .content-filter__list {
border-left: 1px solid #e2e5ea;
border-right: 1px solid #e2e5ea;
}
}
:root[data-theme="light"] .content-filter__item {
border-bottom: 1px solid #e2e5ea;
}
@media (min-width: 992px) {
:root[data-theme="light"] .content-filter__item + .content-filter__item {
border-left: 1px solid #e2e5ea;
}
}
:root[data-theme="light"] .content-filter__link {
color: #5f656e;
}
:root[data-theme="light"] .content-filter__link small {
color: #5f656e;
}
:root[data-theme="light"] .content-filter__link:hover {
color: #16181c;
}
:root[data-theme="light"] .content-filter__item--active .content-filter__link {
color: #16181c;
}
:root[data-theme="light"] .content-filter--boxed .content-filter__inner {
background-color: #ffffff;
border: 1px solid #e2e5ea;
}
:root[data-theme="light"] .content-filter--fit .content-filter__list {
border-left: 1px solid #e2e5ea;
border-right: 1px solid #e2e5ea;
}
:root[data-theme="light"] .gallery__item-inner:hover .gallery__icon {
color: #16181c;
}
:root[data-theme="light"] .gallery__item-inner:hover .gallery__name {
color: #16181c;
}
:root[data-theme="light"] .gallery__item-inner:hover .gallery__date {
color: #16181c;
}
:root[data-theme="light"] .gallery__thumb {
background-color: #f4f5f7;
}
:root[data-theme="light"] .gallery__icon--circle {
color: #16181c;
}
:root[data-theme="light"] .gallery__date {
color: #5f656e;
}
:root[data-theme="light"] .gallery__header .gallery__like {
color: #5f656e;
}
:root[data-theme="light"] .gallery__thumb-list {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .gallery__thumb-item:last-child::before {
background-color: #e9ecf1;
}
:root[data-theme="light"] .gallery__thumb-item-number {
color: #16181c;
}
:root[data-theme="light"] .album__item-holder {
background-color: #f4f5f7;
}
:root[data-theme="light"] .album__item-holder--color--primary .album__item-date {
color: #16181c;
}
:root[data-theme="light"] .album__item-title {
color: #16181c;
}
:root[data-theme="light"] .album__item-date {
color: #5f656e;
}
:root[data-theme="light"] .album__item-meta .meta__item {
color: #16181c;
}
:root[data-theme="light"] .album__item-meta .meta__item > a {
color: #16181c;
}
:root[data-theme="light"] .album__item-icon-popup {
color: #16181c;
}
:root[data-theme="light"] .album-heading__subtitle {
color: #5f656e;
}
:root[data-theme="light"] .modal-form .form-group--pass-reminder a {
color: #5f656e;
}
:root[data-theme="light"] .sponsor-card__footer {
border-top: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .sponsor-card__link {
color: #16181c;
}
:root[data-theme="light"] .stat-icon {
color: #16181c !important;
}
:root[data-theme="light"] .stat-number {
color: #16181c;
}
:root[data-theme="light"] .stat-caption {
color: #5f656e;
}
/* --------------------------------------------------------------------
Derived from custom.css - 25 rules
-------------------------------------------------------------------- */
:root[data-theme="light"] .superadmin {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .gmod {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .mod {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .publisher {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .support {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .premium {
text-shadow: 0 4px 5px rgba(16, 18, 22, .22);
}
:root[data-theme="light"] .member {
color: #5f656e !important;
}
:root[data-theme="light"] .member:hover {
color: #454a52 !important;
}
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] textarea.form-control {
background-color: #f4f5f7 !important;
border: 1px solid #e2e5ea !important;
color: #16181c !important;
}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] textarea.form-control:focus {
background-color: #f4f5f7 !important;
color: #16181c !important;
}
:root[data-theme="light"] .ck.ck-toolbar {
background: #f4f5f7 !important;
border-bottom: 1px solid #e2e5ea !important;
}
:root[data-theme="light"] .ck.ck-button {
color: #5f656e !important;
}
:root[data-theme="light"] .ck.ck-toolbar__separator {
background: #f0f1f4 !important;
}
:root[data-theme="light"] .ck-editor__editable_inline {
background: #f4f5f7 !important;
color: #16181c !important;
}
:root[data-theme="light"] .ck.ck-dropdown__panel {
background: #f4f5f7 !important;
border: 1px solid #e2e5ea !important;
}
:root[data-theme="light"] .ck.ck-list__item .ck-button {
color: #16181c !important;
}
:root[data-theme="light"] .ck-content ul,
:root[data-theme="light"] .ck-content ol {
color: #16181c;
}
:root[data-theme="light"] .fighter-card__name a {
color: #16181c;
}
:root[data-theme="light"] .fighter-card__nickname {
color: #5f656e;
}
:root[data-theme="light"] .forum-tabs__link {
color: #454a52;
}
:root[data-theme="light"] .forum-tabs__link.is-active {
color: #16181c;
}
:root[data-theme="light"] .reaction-chip {
color: #454a52;
}
:root[data-theme="light"] .news-row__excerpt {
color: #454a52;
}
:root[data-theme="light"] .article__excerpt {
color: #16181c;
}
:root[data-theme="light"] .notification-row__body {
color: #454a52;
}
/* --------------------------------------------------------------------
Derived from enhance.css - 59 rules
-------------------------------------------------------------------- */
:root[data-theme="light"] .card::before,
:root[data-theme="light"] .widget--sidebar::before {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.153) 0%,
rgba(0, 0, 0, 0.043) 45%,
transparent 100%);
}
:root[data-theme="light"] .card__header {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.025), transparent);
}
:root[data-theme="light"] .board-row:hover,
:root[data-theme="light"] .thread-row:hover,
:root[data-theme="light"] .event-row:hover,
:root[data-theme="light"] .news-row:hover,
:root[data-theme="light"] .bout-row:hover,
:root[data-theme="light"] .ticket-row:hover {
background: rgba(0, 0, 0, 0.019);
}
:root[data-theme="light"] .fighter-card:hover,
:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .news-card:hover,
:root[data-theme="light"] .tier-card:hover {
box-shadow: 0 16px 38px rgba(16, 18, 22, 0.15), 0 0 0 1px rgba(243, 65, 65, .18);
}
:root[data-theme="light"] .countdown {
background: rgba(0, 0, 0, 0.045);
}
:root[data-theme="light"] .rankings-table tbody tr:hover {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .form-control,
:root[data-theme="light"] select.form-control {
background: rgba(0, 0, 0, 0.036);
}
:root[data-theme="light"] .form-control:focus {
background: rgba(0, 0, 0, 0.049);
color: #16181c;
}
:root[data-theme="light"] body::after {
background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.024) 0 1px, transparent 1px 38px),
repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.024) 0 1px, transparent 1px 38px),
radial-gradient(125% 100% at 50% 38%, transparent 42%, rgba(0, 0, 0, 0.078) 100%);
}
:root[data-theme="light"] .forum-tabs__link:hover,
:root[data-theme="light"] .forum-tabs__link:focus-visible {
background: rgba(0, 0, 0, 0.034);
}
:root[data-theme="light"] .forum-tabs__link.is-active {
color: #16181c;
box-shadow: 0 0 0 1px rgba(16, 18, 22, 0.105),
0 6px 18px -6px var(--u-accent-glow);
}
:root[data-theme="light"] .news-filter__chip:hover,
:root[data-theme="light"] .news-filter__chip:focus-visible {
color: #16181c;
}
:root[data-theme="light"] .news-filter__chip.is-active {
color: #16181c;
}
:root[data-theme="light"] .news-lead__flag {
color: #16181c;
}
:root[data-theme="light"] .news-lead__title a {
color: #16181c;
}
:root[data-theme="light"] .news-tile__title a {
color: #16181c;
}
:root[data-theme="light"] .bout-card__billing {
background: rgba(0, 0, 0, 0.039);
}
:root[data-theme="light"] .bout-card__footer {
background: rgba(0, 0, 0, 0.029);
}
:root[data-theme="light"] .post__author {
background: rgba(0, 0, 0, 0.036);
}
:root[data-theme="light"] .post__name a {
color: var(--post-name-color, #16181c);
}
:root[data-theme="light"] .post__react {
background: rgba(0, 0, 0, 0.034);
}
:root[data-theme="light"] .post__react:hover {
color: #16181c;
}
:root[data-theme="light"] .post__react.is-active {
color: #16181c;
}
:root[data-theme="light"] .post__react.is-readonly:hover {
background: rgba(0, 0, 0, 0.034);
}
:root[data-theme="light"] .post__action:hover {
color: #16181c;
border-color: rgba(0, 0, 0, 0.212);
}
:root[data-theme="light"] .agreements {
background: rgba(0, 0, 0, 0.039);
}
:root[data-theme="light"] .forum-tabs__link.is-active {
color: #16181c;
}
:root[data-theme="light"] .board-row {
border-bottom: 1px solid rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .board-row--sub {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .board-row__name {
color: #16181c;
}
:root[data-theme="light"] .thread-poll__question {
color: #16181c;
}
:root[data-theme="light"] .thread-poll__bar {
background: rgba(0, 0, 0, 0.059);
}
:root[data-theme="light"] .match-preview__title a {
color: #16181c;
}
:root[data-theme="light"] .match-preview__team-name a {
color: #16181c;
}
:root[data-theme="light"] .match-preview__countdown {
background: rgba(0, 0, 0, 0.042);
}
:root[data-theme="light"] .countdown-counter__item {
color: #16181c;
}
:root[data-theme="light"] .page-link:hover,
:root[data-theme="light"] .page-link:focus-visible {
color: #16181c;
}
:root[data-theme="light"] .page-item.active .page-link {
color: #16181c;
}
:root[data-theme="light"] .page-item.disabled .page-link {
background: rgba(0, 0, 0, 0.017);
}
:root[data-theme="light"] .thread-row__icon {
background: rgba(0, 0, 0, 0.034);
}
:root[data-theme="light"] .posts__cat-label {
color: #16181c;
}
:root[data-theme="light"] .fighter-hero__tag {
background: rgba(0, 0, 0, 0.043);
}
:root[data-theme="light"] .fighter-hero__name {
color: #16181c;
}
:root[data-theme="light"] .fighter-hero__record-figure {
color: #16181c;
}
:root[data-theme="light"] .fighter-hero__credit {
text-shadow: 0 1px 2px rgba(16, 18, 22, 0.27);
}
:root[data-theme="light"] .fighter-hero__silhouette {
color: rgba(22, 24, 28, 0.32);
background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.025), transparent 70%);
}
:root[data-theme="light"] .api-docs code {
background: rgba(0, 0, 0, 0.051);
}
:root[data-theme="light"] .api-docs pre {
background: rgba(0, 0, 0, 0.049);
}
:root[data-theme="light"] .api-docs__endpoint {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .api-docs__base {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .api-docs__plan {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .legal-doc code {
background: rgba(0, 0, 0, 0.051);
}
:root[data-theme="light"] .legal-doc th {
background: rgba(0, 0, 0, 0.034);
}
:root[data-theme="light"] .pricing__billing {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .pricing__billing-switch {
background: rgba(0, 0, 0, 0.085);
}
:root[data-theme="light"] .pricing-card {
background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .pricing-card__flag {
color: #16181c;
}
:root[data-theme="light"] .search-page__tab.active {
color: #16181c;
}
:root[data-theme="light"] .search-page__tab.active .search-page__count {
background: rgba(0, 0, 0, 0.029);
}
/* ==========================================================================
Hand-maintained corrections
==========================================================================
Appended to the generated rules above, so these win.
Everything here is something the generator cannot derive: a colour baked
into a data: URI, a surface the template never names, or a place where the
right light value is a judgement call rather than a substitution.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
The page ground
enhance.css section 10 builds the field out of four fixed layers - a warm
haze, a travelling house light, the chain-link cage with its vignette, and
the arena photograph under a scrim. html carries the solid colour through
var(--u-bg), so that part follows the tokens on its own, but the four
layers on top are all written for a dark room and none of them is a plain
black or white wash the generator can flip.
Left alone, the scrim alone (rgba(19,20,23,.82)) paints the entire content
area near-black in light mode - which is the single biggest reason the
toggle looked like it was doing nothing.
-------------------------------------------------------------------------- */
:root[data-theme="light"] body {
color: var(--u-text);
background-color: transparent;
}
/* Layer -3, the ground haze. The same three lights, but a red at .17 that
reads as a warm glow in a dark room reads as a pink stain on paper. */
:root[data-theme="light"] body::before {
background:
radial-gradient(72% 54% at 10% -10%, rgba(243, 65, 65, .07), transparent 62%),
radial-gradient(54% 42% at 92% 0%, rgba(226, 140, 58, .05), transparent 64%),
radial-gradient(130% 58% at 50% 112%, rgba(243, 65, 65, .05), transparent 70%);
}
/* Layer -2, the house light. A warm white sweep is a dark-room device: on a
light ground it is either invisible or a smear, and neither is worth the
compositing. The selector replaces html rather than descending from it,
because the attribute is ON html. */
:root[data-theme="light"]::before { display: none; }
/* Layer -1's mesh and vignette are already flipped by the generator above.
The arena photograph: at .45 it is a dark image sitting on a light page.
Dropped to a hint, which is all it can be here - a bright image would eat
the contrast the body copy needs. */
:root[data-theme="light"] .site-content::before { opacity: .08; }
/* The scrim that darkens the middle of the frame, inverted: same three-stop
shape, same job (hold contrast down the centre column where the copy is),
painted with the light ground instead of #131417. */
:root[data-theme="light"] .site-content::after {
background: linear-gradient(180deg,
rgba(244, 245, 247, .92) 0%,
rgba(244, 245, 247, .82) 40%,
rgba(244, 245, 247, .96) 100%);
}
/* The wrappers stay transparent in both modes so the layers above are not
buried - the same reason enhance.css sets it. Stated because the generator
turns the theme's own opaque .site-content into an opaque white, which
would cover every one of them. */
:root[data-theme="light"] .site-wrapper,
:root[data-theme="light"] .site-content {
background: transparent;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .widget {
background-color: var(--u-surface);
border-color: var(--u-hairline);
box-shadow: 0 1px 2px var(--u-shadow);
}
/* The select arrow is a data: URI with fill='%23fff' baked into it, so no
colour substitution can reach it - on a white field it is a white arrow on
white. Same path, dark fill.
position/repeat/size are restated deliberately. The generated rule above
sets `background` (the shorthand, because that is what the source uses),
which resets background-size, -repeat and -position to their initial
values. Supplying only background-image here leaves a 6x4 glyph tiling at
auto size across the whole field - a row of giant chevrons, which is
exactly what it did. */
:root[data-theme="light"] select.form-control,
:root[data-theme="light"] select.form-select,
:root[data-theme="light"] .form-select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath transform='translate(-586.156 -1047.28)' fill='%2316181c' d='M586.171,1048l0.708-.71,2.828,2.83-0.707.71Zm4.95-.71,0.707,0.71L589,1050.83l-0.707-.71Z'/%3E%3C/svg%3E");
background-position: right 1em center;
background-repeat: no-repeat;
background-size: 6px 4px;
}
/* Inputs read better as a recess on light than as the near-transparent wash
the generator derives from the dark treatment. */
:root[data-theme="light"] .form-control,
:root[data-theme="light"] select.form-control,
:root[data-theme="light"] textarea.form-control,
:root[data-theme="light"] .form-select {
color: var(--u-text);
background-color: var(--u-surface);
border-color: var(--u-line);
}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus {
color: var(--u-text);
background-color: var(--u-surface);
border-color: var(--u-accent);
}
:root[data-theme="light"] .form-control::placeholder { color: var(--u-text-faint); }
/* Chrome paints autofilled fields with its own yellow-on-dark assumption. */
:root[data-theme="light"] .form-control:-webkit-autofill {
-webkit-text-fill-color: var(--u-text);
-webkit-box-shadow: 0 0 0 1000px var(--u-surface) inset;
}
/* Code and preformatted blocks in the API docs and legal pages: the dark
treatment is a black wash, which on a white page is a black box. */
:root[data-theme="light"] pre,
:root[data-theme="light"] code,
:root[data-theme="light"] kbd,
:root[data-theme="light"] samp {
color: var(--u-text);
background-color: var(--u-surface-3);
border-color: var(--u-hairline);
}
/* --------------------------------------------------------------------------
Highlighted table rows
The champion row is lit from the left with a gold wash -- rgba(201,162,39)
in custom.css and again as a gradient in enhance.css. Gold on a near-black
table reads as a subtle medal tint. On white it reads as cream, and three
cream bands down a page of white cards look like a rendering fault rather
than an emphasis.
Same gesture, neutral pigment: a black fade from the left. It still says
"this row is the important one" without introducing a second hue the light
palette does not otherwise use.
Both source rules are two classes, so the theme scope plus the same two
outranks them; this file is last in the cascade either way.
-------------------------------------------------------------------------- */
:root[data-theme="light"] .rankings-table tr.is-champion {
background: linear-gradient(90deg, rgba(0, 0, 0, .085), rgba(0, 0, 0, .015) 45%, transparent 70%);
}
/* Hover has to stay darker than the champion row's own tint, or moving the
pointer over it appears to clear the highlight. */
:root[data-theme="light"] .rankings-table tbody tr:hover {
background: rgba(0, 0, 0, .05);
}
:root[data-theme="light"] .rankings-table tr.is-champion:hover {
background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .04) 45%, rgba(0, 0, 0, .03) 70%);
}
/* --------------------------------------------------------------------------
Page headings
The band under the masthead is built from three stacked layers, and the
first of them is a flat rgba(0,0,0,.4) scrim. Over the dark surface beneath
it that deepens the ground; over a white one it is simply 40% black, which
is why every heading rendered as a slab of mid grey with the title barely
separating from it.
The scrim goes entirely here rather than being lightened. Its job in dark
mode is to hold the artwork back off the text, and in light mode there is
no artwork behind it to hold back.
-------------------------------------------------------------------------- */
:root[data-theme="light"] .page-heading {
background:
radial-gradient(120% 140% at 12% 0%, rgba(217, 45, 45, .10) 0%, transparent 55%),
linear-gradient(180deg, #ffffff 0%, var(--u-bg) 100%);
border-bottom: 1px solid rgba(0, 0, 0, .07);
}
/* The faint grid overlay is white hairlines, which on white is nothing at
all. Same grid, drawn from the other direction and fainter -- at full
strength a black grid on white is a graph, not a texture. */
:root[data-theme="light"] .page-heading::before {
background-image:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 64px);
}
/* A red bloom behind red letterforms is legible on black and muddy on white,
where it reads as a printing misregistration. */
:root[data-theme="light"] .page-heading__title .highlight {
text-shadow: none;
}
:root[data-theme="light"] .page-heading__title {
color: var(--u-text);
}
:root[data-theme="light"] .page-heading__lede {
color: var(--u-text-dim);
}
:root[data-theme="light"] .page-heading__breadcrumb .breadcrumb-item a {
color: var(--u-text-muted);
}
:root[data-theme="light"] .page-heading__breadcrumb .breadcrumb-item.active {
color: var(--u-text-faint);
}
/* Bootstrap's own text utilities. The theme never redeclares these, so the
generator has nothing to rewrite, but .text-muted is #6c757d against a
#131417 ground in dark and needs to go the other way here - and .text-white
is white text asked for by name, which on a white card is nothing at all. */
:root[data-theme="light"] .text-muted { color: var(--u-text-dim) !important; }
:root[data-theme="light"] .text-white { color: var(--u-text) !important; }
:root[data-theme="light"] .text-light { color: var(--u-text-muted) !important; }
:root[data-theme="light"] .bg-dark { background-color: var(--u-surface-3) !important; }
/* Horizontal rules and the generic divider the template draws with a border
on an empty element. */
:root[data-theme="light"] hr {
border-color: var(--u-hairline);
background-color: transparent;
}
/* Selection: the dark accent wash is too dark to read through on white. */
:root[data-theme="light"] ::selection {
color: #fff;
background-color: var(--u-accent);
}
/* Images the template ships as white-on-transparent PNGs - sponsor marks,
partner logos - disappear on a light ground. Nothing can recolour a raster,
so they get the dark chip they were drawn for. */
:root[data-theme="light"] .sponsors__item img,
:root[data-theme="light"] .partners__item img {
padding: 6px 10px;
background-color: #1c1f24;
border-radius: 3px;
}
/* Modals and dropdowns are painted from a fixed dark value and float above
everything, so a missed one is very visible. */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .dropdown-menu {
color: var(--u-text);
background-color: var(--u-surface);
border-color: var(--u-hairline);
box-shadow: 0 18px 40px var(--u-shadow);
}
:root[data-theme="light"] .dropdown-item { color: var(--u-text); }
:root[data-theme="light"] .dropdown-item:hover,
:root[data-theme="light"] .dropdown-item:focus {
color: var(--u-text);
background-color: var(--u-surface-3);
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer { border-color: var(--u-hairline); }
/* Bootstrap draws the close button as a black glyph and the template inverts
it with a filter for dark mode; on light it needs to come back. */
:root[data-theme="light"] .modal .close,
:root[data-theme="light"] .modal .btn-close { filter: none; }
/* Pagination, tabs and the table striping the generator reaches only where
the template names a colour - these are the surfaces it paints with an
rgba wash that is nearly invisible either way. */
:root[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, .022);
}
:root[data-theme="light"] .table tbody tr:hover {
background-color: rgba(0, 0, 0, .035);
}
/* The footer keeps its dark treatment in both modes, so the hairline between
it and the light page has to be drawn from the dark side or it reads as a
seam. */
:root[data-theme="light"] .footer { border-top-color: rgba(0, 0, 0, .18); }
/* --------------------------------------------------------------------------
The masthead in light mode
The upper two rows go light and the navigation row stays dark. That is a
deliberate split, not a half-finished job:
- the top bar is the lightest surface on the page, white, because it is
the strip furthest from the content and should recede;
- the search row sits one step darker, so the two read as a stack rather
than as one band with a line through it;
- the navigation row keeps the dark ground because the logo is a raster
with white lettering in it. On a white bar the wordmark disappears, and
nothing in CSS can recolour a PNG.
Everything the two light rows contain has to come with them. The controls
in there were coloured for a dark ground - white icons, a white-on-dark
switch - and each one is invisible on white until it is told otherwise.
-------------------------------------------------------------------------- */
:root[data-theme="light"] .header__top-bar {
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, .07);
}
:root[data-theme="light"] .header__secondary {
background: #eef0f4;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* Account links across the top. The resting colour already resolves to a mid
grey through the tokens; it is the hover that breaks, because it is a
literal #fff written for the dark bar. */
:root[data-theme="light"] .header__top-bar .nav-account__item a {
color: var(--u-text-muted);
}
:root[data-theme="light"] .header__top-bar .nav-account__item a:hover {
color: var(--u-text);
}
/* The submenu under "Welcome back" hangs off the top bar, so it inverts with
it rather than staying a dark dropdown on a white strip. */
:root[data-theme="light"] .header__top-bar .nav-account__item .main-nav__sub {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 12px 28px rgba(16, 18, 22, .14);
}
:root[data-theme="light"] .header__top-bar .nav-account__item .main-nav__sub li a {
color: var(--u-text-muted);
}
:root[data-theme="light"] .header__top-bar .nav-account__item .main-nav__sub li a:hover {
color: var(--u-accent);
background: rgba(0, 0, 0, .04);
}
/* Icons and links in the search row: the bell, its count, and anything else
the template paints white there.
:not(.btn) matters. Support and Login in that row are anchors carrying
.btn-primary, so without the exclusion this greys out white lettering that
sits on a red button and is correct exactly as it is -- the label went from
white to mid grey on red, which is unreadable and looks like a broken
hover state. */
:root[data-theme="light"] .header__secondary .info-block--header .info-block__item > a:not(.btn) {
color: var(--u-text-muted);
}
:root[data-theme="light"] .header__secondary .info-block--header .info-block__item > a:not(.btn):hover {
color: var(--u-accent);
}
/* The search submit sits inside the field and was drawn against a black wash. */
:root[data-theme="light"] .header-search-form .header-mobile__search-submit {
color: var(--u-accent);
}
/* Form fields inside the dark chrome.
custom.css paints every .form-control with !important, so the generated
override of it also carries !important and reaches the fields that sit on
dark ground in both modes. The footer newsletter input is one; it turned
into a bright white pill punched into a dark bar. Pinned back, and it needs
!important of its own to do it - nothing else here does, and nothing else
here should.
The masthead search box used to be in this list. It is not any more: the
header's upper rows are light in light mode now, so that field is on a pale
surface and takes the ordinary light treatment. */
:root[data-theme="light"] .widget--footer .form-control {
color: #e9ecf1 !important;
background: rgba(0, 0, 0, .45) !important;
border-color: rgba(255, 255, 255, .09) !important;
}
:root[data-theme="light"] .widget--footer .form-control::placeholder {
color: rgba(233, 236, 241, .5);
}
/* The masthead search field, on the now-light secondary row. White rather
than the recessed grey the generator derives, so it reads as a field
against that row rather than merging into it. */
:root[data-theme="light"] .header-search-form .form-control {
color: var(--u-text) !important;
background: #ffffff !important;
border-color: rgba(0, 0, 0, .14) !important;
}
:root[data-theme="light"] .header-search-form .form-control::placeholder {
color: var(--u-text-faint);
}
/* --------------------------------------------------------------------------
Dark islands: the footer and the slide-out panel
The generator can exclude a SELECTOR but not a REGION. It correctly skips
.footer, .widget--footer and .pushy-panel - but the footer's widgets are
built from generic content classes: