fix site theme on mobile devices
This commit is contained in:
parent
c955a2880e
commit
7074bb6b73
3 changed files with 768 additions and 0 deletions
256
themes/theme-openlatdev-brand-auto.css
Executable file → Normal file
256
themes/theme-openlatdev-brand-auto.css
Executable file → Normal file
|
|
@ -110,3 +110,259 @@ img.home-hero-logo,
|
||||||
fill: var(--color-primary) !important;
|
fill: var(--color-primary) !important;
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
.theme-openlatdev-brand-light .ui.navbar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item.active {
|
||||||
|
color: #4a69ae !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger & Toggle Icons on Mobile - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Stackable / Dropdown Menu in Light Theme */
|
||||||
|
@media only screen and (max-width: 767.98px) {
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .stackable.menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .right.stackable.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Dark Theme */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Mobile Navbar Rules */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Sidebar Panel & Sidebar Toggle Icon Contrast Fix */
|
||||||
|
|
||||||
|
/* Light Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-light .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
border-right: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar .item {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar Toggle Buttons & SVG Icons in Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] button.sidebar-toggle svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] svg.octicon-sidebar {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-dark .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar a {
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] button.sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Sidebar Media Queries */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .sidebar-toggle svg {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nuclear Mobile Navbar & Sidebar Toggle White Icon Fix */
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
256
themes/theme-openlatdev-brand-dark.css
Executable file → Normal file
256
themes/theme-openlatdev-brand-dark.css
Executable file → Normal file
|
|
@ -102,3 +102,259 @@ img.home-hero-logo,
|
||||||
fill: var(--color-primary) !important;
|
fill: var(--color-primary) !important;
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
.theme-openlatdev-brand-light .ui.navbar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item.active {
|
||||||
|
color: #4a69ae !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger & Toggle Icons on Mobile - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Stackable / Dropdown Menu in Light Theme */
|
||||||
|
@media only screen and (max-width: 767.98px) {
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .stackable.menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .right.stackable.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Dark Theme */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Mobile Navbar Rules */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Sidebar Panel & Sidebar Toggle Icon Contrast Fix */
|
||||||
|
|
||||||
|
/* Light Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-light .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
border-right: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar .item {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar Toggle Buttons & SVG Icons in Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] button.sidebar-toggle svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] svg.octicon-sidebar {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-dark .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar a {
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] button.sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Sidebar Media Queries */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .sidebar-toggle svg {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nuclear Mobile Navbar & Sidebar Toggle White Icon Fix */
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
256
themes/theme-openlatdev-brand-light.css
Executable file → Normal file
256
themes/theme-openlatdev-brand-light.css
Executable file → Normal file
|
|
@ -102,3 +102,259 @@ img.home-hero-logo,
|
||||||
fill: var(--color-primary) !important;
|
fill: var(--color-primary) !important;
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar,
|
||||||
|
.theme-openlatdev-brand-light .ui.navbar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .item,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar a:hover,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .item.active {
|
||||||
|
color: #4a69ae !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger & Toggle Icons on Mobile - Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Stackable / Dropdown Menu in Light Theme */
|
||||||
|
@media only screen and (max-width: 767.98px) {
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .stackable.menu,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.navbar .right.stackable.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Navbar & Hamburger Menu Legibility Fix - Dark Theme */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar .toggle,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.navbar button svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar svg,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Mobile Navbar Rules */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-bottom: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.navbar .hamburger {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.navbar .hamburger {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Sidebar Panel & Sidebar Toggle Icon Contrast Fix */
|
||||||
|
|
||||||
|
/* Light Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-light .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-light"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
border-right: 1px solid #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar a,
|
||||||
|
html[data-theme="openlatdev-brand-light"] .ui.sidebar .item {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar Toggle Buttons & SVG Icons in Light Theme */
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-light"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-light"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-light"] button.sidebar-toggle svg,
|
||||||
|
html[data-theme="openlatdev-brand-light"] svg.octicon-sidebar {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Theme Sidebar & Sidebar Icons */
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
html[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
.theme-openlatdev-brand-dark .ui.sidebar,
|
||||||
|
:root[data-theme="openlatdev-brand-dark"] .ui.sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.vertical.sidebar.menu {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar .item,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar a {
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .ui.sidebar svg.octicon,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-collapse,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] svg.octicon-sidebar-expand,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] .sidebar-toggle svg,
|
||||||
|
body[data-theme="openlatdev-brand-dark"] button.sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dynamic Auto Theme Sidebar Media Queries */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar .item,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar a {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-dark"]) .sidebar-toggle svg {
|
||||||
|
fill: #0f172a !important;
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .ui.sidebar svg,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) svg.octicon-sidebar,
|
||||||
|
:root:not([data-theme="openlatdev-brand-light"]) .sidebar-toggle svg {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nuclear Mobile Navbar & Sidebar Toggle White Icon Fix */
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.ui.navbar,
|
||||||
|
#navbar {
|
||||||
|
background-color: #12171e !important;
|
||||||
|
}
|
||||||
|
.ui.navbar svg,
|
||||||
|
.ui.navbar svg *,
|
||||||
|
.ui.navbar .svg,
|
||||||
|
.ui.navbar .hamburger,
|
||||||
|
.ui.navbar .hamburger *,
|
||||||
|
.ui.navbar .toggle,
|
||||||
|
.ui.navbar .toggle *,
|
||||||
|
.ui.navbar .toc,
|
||||||
|
.ui.navbar .toc *,
|
||||||
|
.ui.navbar button,
|
||||||
|
.ui.navbar button *,
|
||||||
|
.ui.menu .toc.item,
|
||||||
|
.ui.menu .toc.item *,
|
||||||
|
.mobile-only svg,
|
||||||
|
.mobile-only svg *,
|
||||||
|
#navbar svg,
|
||||||
|
#navbar svg *,
|
||||||
|
.ui.sidebar svg,
|
||||||
|
.ui.sidebar svg * {
|
||||||
|
fill: #ffffff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue