/*
* Dark Mode Overrides for HTML5 UP Story Template
* Activated via .dark-mode class on or @media (prefers-color-scheme: dark)
*/
/* ---- Core colors ---- */
html.dark-mode body {
background-color: #111118;
background: #111118;
color: #e0e0e0;
}
html.dark-mode body,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
color: #e0e0e0;
}
html.dark-mode a {
color: #e0e0e0;
}
html.dark-mode a:hover {
color: #47D3E5;
}
html.dark-mode strong,
html.dark-mode b {
color: #ffffff;
}
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
color: #ffffff;
}
/* ---- Borders & Dividers ---- */
html.dark-mode blockquote {
border-left-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode code {
background: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode hr {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
/* ---- Buttons ---- */
html.dark-mode input[type="submit"],
html.dark-mode input[type="reset"],
html.dark-mode input[type="button"],
html.dark-mode button,
html.dark-mode .button {
background-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
color: #ffffff !important;
}
html.dark-mode input[type="submit"]:hover,
html.dark-mode input[type="reset"]:hover,
html.dark-mode input[type="button"]:hover,
html.dark-mode button:hover,
html.dark-mode .button:hover {
box-shadow: inset 0 0 0 1px #47D3E5;
color: #47D3E5 !important;
}
html.dark-mode input[type="submit"]:active,
html.dark-mode input[type="reset"]:active,
html.dark-mode input[type="button"]:active,
html.dark-mode button:active,
html.dark-mode .button:active {
background-color: rgba(71, 211, 229, 0.2);
box-shadow: inset 0 0 0 1px #47D3E5;
color: #47D3E5 !important;
}
html.dark-mode input[type="submit"].primary,
html.dark-mode input[type="reset"].primary,
html.dark-mode input[type="button"].primary,
html.dark-mode button.primary,
html.dark-mode .button.primary {
background-color: rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
color: #ffffff !important;
}
html.dark-mode input[type="submit"].primary:hover,
html.dark-mode input[type="reset"].primary:hover,
html.dark-mode input[type="button"].primary:hover,
html.dark-mode button.primary:hover,
html.dark-mode .button.primary:hover {
background-color: rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
html.dark-mode input[type="submit"].primary:active,
html.dark-mode input[type="reset"].primary:active,
html.dark-mode input[type="button"].primary:active,
html.dark-mode button.primary:active,
html.dark-mode .button.primary:active {
background-color: rgba(255, 255, 255, 0.3);
}
/* ---- Form elements ---- */
html.dark-mode label {
color: #ffffff;
}
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="search"],
html.dark-mode input[type="url"],
html.dark-mode select,
html.dark-mode textarea {
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.05);
color: #e0e0e0;
}
html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="tel"]:focus,
html.dark-mode input[type="search"]:focus,
html.dark-mode input[type="url"]:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
border-color: #47D3E5;
box-shadow: 0 0 0 1px #47D3E5;
}
html.dark-mode select option {
color: #e0e0e0;
background: #111118;
}
html.dark-mode input[type="checkbox"] + label,
html.dark-mode input[type="radio"] + label {
color: #e0e0e0;
}
html.dark-mode input[type="checkbox"] + label:before,
html.dark-mode input[type="radio"] + label:before {
border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode input[type="checkbox"]:checked + label:before,
html.dark-mode input[type="radio"]:checked + label:before {
background-color: #47D3E5;
border-color: #47D3E5;
color: #111118;
}
html.dark-mode ::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
html.dark-mode :-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
html.dark-mode ::-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
html.dark-mode :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* ---- Tables ---- */
html.dark-mode table tbody tr {
border-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.05);
}
html.dark-mode table th {
color: #ffffff;
}
html.dark-mode table thead {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode table tfoot {
border-top-color: rgba(255, 255, 255, 0.15);
}
/* ---- Box ---- */
html.dark-mode .box {
border-color: rgba(255, 255, 255, 0.15);
}
/* ---- Gallery ---- */
html.dark-mode .gallery article .image {
background-color: rgba(255, 255, 255, 0.05);
}
html.dark-mode .gallery .caption {
background-color: rgba(26, 26, 46, 0.9);
}
/* ---- Section separators ---- */
html.dark-mode .spotlight {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode .spotlight .content {
background-color: #111118;
}
html.dark-mode .banner {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode .banner .content {
background-color: #111118;
}
html.dark-mode .wrapper.style1 {
background-color: #111118;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode #wrapper > section + section,
html.dark-mode #wrapper > footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ---- Items / Icons / Grid borders ---- */
html.dark-mode .items section .icon {
color: #ffffff;
}
html.dark-mode .items.style1 > * {
border-color: rgba(255, 255, 255, 0.15);
}
/* ---- General border overrides (dividers, separators, hr) ---- */
html.dark-mode hr {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode .spotlight .content,
html.dark-mode .banner .content,
html.dark-mode .wrapper.style1 {
border-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode .icon.style1:before,
html.dark-mode .icon.style2:before {
border-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode .icon.style2:before {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
html.dark-mode a.icon.style2:hover:before {
box-shadow: inset 0 0 0 1px #47D3E5;
}
html.dark-mode ul.icons li a.icon {
border-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode .box {
border-color: rgba(255, 255, 255, 0.15);
}
/* ---- Footer ---- */
html.dark-mode footer.wrapper {
background-color: #0a0a10;
}
html.dark-mode footer.wrapper p,
html.dark-mode footer.wrapper a {
color: rgba(255, 255, 255, 0.6);
}
html.dark-mode footer.wrapper a:hover {
color: #47D3E5;
}
/* ---- Icons ---- */
html.dark-mode .icon.style2 {
color: #e0e0e0;
}
/* ---- SVG in dark mode (invert dark logos) ---- */
html.dark-mode img[src$=".svg"] {
filter: invert(1);
}
/* ---- Scrollbar ---- */
html.dark-mode ::-webkit-scrollbar {
background: #111118;
}
html.dark-mode ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
/* ---- Selection ---- */
html.dark-mode ::selection {
background: rgba(71, 211, 229, 0.3);
color: #ffffff;
}
html.dark-mode ::-moz-selection {
background: rgba(71, 211, 229, 0.3);
color: #ffffff;
}