/*
 * Site themes, picked in Settings and set as <html data-theme="...">: light (the default,
 * rbx2016.css as is), dark, and obc (Outrageous Builders Club members only). Most of the site
 * is drawn from the colour tokens in rbx2016.css, so a theme is mostly new token values; the
 * rest of this file covers Bootstrap pieces and the few light tints that aren't tokens.
 */

/* ============================================================ dark */
:root[data-theme='dark'],
:root[data-theme='obc'] {
  color-scheme: dark;
  --rbx-page: #232527;
  --rbx-surface: #393b3d;
  --rbx-hover: #4a4c4f;
  --rbx-text: #ffffff;
  --rbx-text-secondary: #bdbebe;
  --rbx-label: #8b8d90;
  --rbx-border: #656668;
  --rbx-divider: #4f5153;
  --rbx-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
  --rbx-shadow-hover: 0 1px 6px 0 rgba(0, 0, 0, 0.9);
  --rbx-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  --theme-tint-blue: #26425a;
  --theme-tint-green: #234434;
  --theme-tint-red: #4f2a2a;
  --theme-tint-yellow: #4a4021;
}

:root[data-theme='dark'] body,
:root[data-theme='obc'] body {
  background: var(--rbx-page);
}

/* Bootstrap's own light pieces */
:root[data-theme='dark'] .modal-content,
:root[data-theme='obc'] .modal-content,
:root[data-theme='dark'] .list-group-item,
:root[data-theme='obc'] .list-group-item,
:root[data-theme='dark'] .bg-white,
:root[data-theme='obc'] .bg-white,
:root[data-theme='dark'] .bg-light,
:root[data-theme='obc'] .bg-light,
:root[data-theme='dark'] .page-link,
:root[data-theme='obc'] .page-link {
  background-color: var(--rbx-surface) !important;
  color: var(--rbx-text);
  border-color: var(--rbx-divider);
}

:root[data-theme='dark'] .modal-header,
:root[data-theme='obc'] .modal-header,
:root[data-theme='dark'] .modal-footer,
:root[data-theme='obc'] .modal-footer,
:root[data-theme='dark'] hr,
:root[data-theme='obc'] hr,
:root[data-theme='dark'] .border,
:root[data-theme='obc'] .border,
:root[data-theme='dark'] .border-top,
:root[data-theme='obc'] .border-top,
:root[data-theme='dark'] .border-bottom,
:root[data-theme='obc'] .border-bottom,
:root[data-theme='dark'] .table td,
:root[data-theme='obc'] .table td,
:root[data-theme='dark'] .table th,
:root[data-theme='obc'] .table th {
  border-color: var(--rbx-divider) !important;
}

:root[data-theme='dark'] .text-dark,
:root[data-theme='obc'] .text-dark,
:root[data-theme='dark'] .text-body,
:root[data-theme='obc'] .text-body,
:root[data-theme='dark'] .close,
:root[data-theme='obc'] .close,
:root[data-theme='dark'] .dropdown-item,
:root[data-theme='obc'] .dropdown-item,
:root[data-theme='dark'] label,
:root[data-theme='obc'] label,
:root[data-theme='dark'] .table,
:root[data-theme='obc'] .table {
  color: var(--rbx-text) !important;
}

:root[data-theme='dark'] .text-muted,
:root[data-theme='obc'] .text-muted,
:root[data-theme='dark'] .text-secondary,
:root[data-theme='obc'] .text-secondary {
  color: var(--rbx-text-secondary) !important;
}

:root[data-theme='dark'] .close,
:root[data-theme='obc'] .close {
  text-shadow: none;
  opacity: 0.8;
}

:root[data-theme='dark'] .dropdown-item:hover,
:root[data-theme='obc'] .dropdown-item:hover,
:root[data-theme='dark'] .dropdown-item:focus,
:root[data-theme='obc'] .dropdown-item:focus {
  background: var(--rbx-hover);
}

:root[data-theme='dark'] .table-striped tbody tr:nth-of-type(odd),
:root[data-theme='obc'] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] code,
:root[data-theme='obc'] code {
  color: #ff8fb3;
}

:root[data-theme='dark'] .custom-control-label::before,
:root[data-theme='obc'] .custom-control-label::before {
  background-color: var(--rbx-page);
  border-color: var(--rbx-border);
}

:root[data-theme='dark'] .alert-info,
:root[data-theme='obc'] .alert-info,
:root[data-theme='dark'] .alert-primary,
:root[data-theme='obc'] .alert-primary {
  background: var(--theme-tint-blue);
  border-color: #2f5f86;
  color: #cde8ff;
}

:root[data-theme='dark'] .alert-success,
:root[data-theme='obc'] .alert-success {
  background: var(--theme-tint-green);
  border-color: #2e6b4a;
  color: #c5f2d8;
}

:root[data-theme='dark'] .alert-danger,
:root[data-theme='obc'] .alert-danger {
  background: var(--theme-tint-red);
  border-color: #7a3a3a;
  color: #ffd2d2;
}

:root[data-theme='dark'] .alert-warning,
:root[data-theme='obc'] .alert-warning {
  background: var(--theme-tint-yellow);
  border-color: #6e5d27;
  color: #ffe9a8;
}

/* The light tints the light theme writes out by hand */
:root[data-theme='dark'] .bc-table td.is-current,
:root[data-theme='obc'] .bc-table td.is-current,
:root[data-theme='dark'] .admin-kpi-icon,
:root[data-theme='obc'] .admin-kpi-icon,
:root[data-theme='dark'] .am-table tr.is-me td,
:root[data-theme='obc'] .am-table tr.is-me td {
  background: var(--theme-tint-blue);
}

:root[data-theme='dark'] .admin-kpi.is-live .admin-kpi-icon,
:root[data-theme='obc'] .admin-kpi.is-live .admin-kpi-icon,
:root[data-theme='dark'] .make-limited-option input:checked + span,
:root[data-theme='obc'] .make-limited-option input:checked + span {
  background: var(--theme-tint-green);
}

:root[data-theme='dark'] .admin-row-banned,
:root[data-theme='obc'] .admin-row-banned {
  background: var(--theme-tint-red);
}

:root[data-theme='dark'] .am-luckycat-banner,
:root[data-theme='obc'] .am-luckycat-banner {
  background: var(--theme-tint-yellow);
}

:root[data-theme='dark'] .am-deal-tier.t1, :root[data-theme='dark'] .am-deal-row.t1 td,
:root[data-theme='obc'] .am-deal-tier.t1, :root[data-theme='obc'] .am-deal-row.t1 td { background: #24392d; }
:root[data-theme='dark'] .am-deal-tier.t2, :root[data-theme='dark'] .am-deal-row.t2 td,
:root[data-theme='obc'] .am-deal-tier.t2, :root[data-theme='obc'] .am-deal-row.t2 td { background: #234434; }
:root[data-theme='dark'] .am-deal-tier.t3, :root[data-theme='dark'] .am-deal-row.t3 td,
:root[data-theme='obc'] .am-deal-tier.t3, :root[data-theme='obc'] .am-deal-row.t3 td { background: #1f5139; }
:root[data-theme='dark'] .am-deal-tier.t4, :root[data-theme='dark'] .am-deal-row.t4 td,
:root[data-theme='obc'] .am-deal-tier.t4, :root[data-theme='obc'] .am-deal-row.t4 td { background: #1a5f3f; }
:root[data-theme='dark'] .am-deal-tier.t5, :root[data-theme='dark'] .am-deal-row.t5 td,
:root[data-theme='obc'] .am-deal-tier.t5, :root[data-theme='obc'] .am-deal-row.t5 td { background: #156d45; }

:root[data-theme='dark'] .am-badge-icon.is-locked,
:root[data-theme='obc'] .am-badge-icon.is-locked {
  background: #5a5c5f;
}

/* Overlays that dim a picture while it loads */
:root[data-theme='dark'] .view3d-busy .view3d-layer,
:root[data-theme='obc'] .view3d-busy .view3d-layer,
:root[data-theme='dark'] .avatar-spinner,
:root[data-theme='obc'] .avatar-spinner,
:root[data-theme='dark'] .games-row-scroll,
:root[data-theme='obc'] .games-row-scroll {
  background: rgba(57, 59, 61, 0.88);
}

/* White control buttons become dark ones */
:root[data-theme='dark'] .btn-control-lg, :root[data-theme='dark'] .btn-control-md,
:root[data-theme='dark'] .btn-control-sm, :root[data-theme='dark'] .btn-control-xs,
:root[data-theme='obc'] .btn-control-lg, :root[data-theme='obc'] .btn-control-md,
:root[data-theme='obc'] .btn-control-sm, :root[data-theme='obc'] .btn-control-xs {
  color: var(--rbx-text);
  border-color: var(--rbx-border);
}

:root[data-theme='dark'] .btn-control-lg:hover, :root[data-theme='dark'] .btn-control-md:hover,
:root[data-theme='dark'] .btn-control-sm:hover, :root[data-theme='dark'] .btn-control-xs:hover,
:root[data-theme='obc'] .btn-control-lg:hover, :root[data-theme='obc'] .btn-control-md:hover,
:root[data-theme='obc'] .btn-control-sm:hover, :root[data-theme='obc'] .btn-control-xs:hover {
  background: var(--rbx-hover);
}

:root[data-theme='dark'] ::-webkit-scrollbar-thumb,
:root[data-theme='obc'] ::-webkit-scrollbar-thumb {
  background: #5a5c5f;
}

/* Roblox's dark theme (2019) also darkened the header and footer. */
:root[data-theme='dark'] .rbx-header {
  background: #232527;
  border-bottom: 1px solid #18191b;
}

:root[data-theme='dark'] .rbx-footer {
  background: #1f2123;
}

/* ============================================================ obc */
/* After Roblox's members-only "Outrageous" site theme (Outrageous2, about 2010-2012): black
   pinstripe page, #292929 panels, light blue links and a glossy black nav bar. Builds on the dark theme above. */
:root[data-theme='obc'] {
  --rbx-page: #000;
  --rbx-surface: #292929;
  --rbx-hover: #383838;
  --rbx-divider: #3a3a3a;
  --rbx-border: #555;
  --rbx-text-secondary: #aaa;
  --rbx-label: #777;
  --rbx-link: #6af;
}

:root[data-theme='obc'] body {
  background: #000 url('/alphaland/cdn/imgs/themes/obc/bkg.jpg') top center repeat-x;
}

:root[data-theme='obc'] .rbx-header {
  background: linear-gradient(#5e5e5e 0, #484848 3px, #2b2b2b 100%);
  border-bottom: 1px solid #0d0d0d;
}

:root[data-theme='obc'] .rbx-left-col {
  background: rgba(41, 41, 41, 0.96);
}

:root[data-theme='obc'] .rbx-footer {
  background: #292929;
}

:root[data-theme='obc'] .rbx-footer a {
  color: #6af;
}

:root[data-theme='obc'] .profile-accoutrements {
  background: #1a1a1a;
}