/* MM-2194: the legacy homepage menu already exists in the initial response. */
.mm-v24-ssr-fallback{display:none}
html.mm-legacy-header-ssr .mm-v24-header-root:not([data-mm-bound="1"]) .mm-v24-mobile-open{display:none}
@media(max-width:1279px){
html.mm-legacy-header-ssr .mm-v24-header-root:not([data-mm-bound="1"]) .mm-v24-ssr-fallback{display:block;position:relative}
.mm-v24-ssr-fallback summary{list-style:none;cursor:pointer;width:40px;height:40px;padding:8px}
.mm-v24-ssr-fallback summary::-webkit-details-marker{display:none}
.mm-v24-ssr-fallback summary svg{width:24px;height:24px}
.mm-v24-ssr-fallback nav{position:absolute;right:0;top:44px;min-width:260px;max-width:90vw;max-height:70vh;overflow:auto;background:var(--mm-ui-page,#fff);border:1px solid currentColor;padding:16px}
.mm-v24-ssr-fallback ul{list-style:none;margin:0;padding:0}
.mm-v24-ssr-fallback ul ul{padding-left:16px}
.mm-v24-ssr-fallback a{display:block;padding:8px;color:inherit}
}
/* ==========================================================
V24 – STÄNG AV GAMLA HEADERNS VISUELLA LAGER
Vi behåller DOM:en för auth/modal-funktionalitet.
========================================================== */
html.mm-v26-header-enabled
.js-header
> nav,
html.mm-v26-header-enabled
.js-header
.search-wrapper,
html.mm-v26-header-enabled
.js-header
#customer-login,
html.mm-v26-header-enabled
.js-header
.hamburger,
html.mm-v26-header-enabled
.js-header
.main-menu-hamburger-selector {
display: none !important;
}
/* Headern som container */
html.mm-v26-header-enabled
.js-header {
position: relative !important;
z-index: 5000 !important;
width: 100% !important;
border: 0 !important;
box-shadow: none !important;
}
/* DARK */
html.mm-v26-header-enabled.mm-dark
.js-header {
background: #0C0E12 !important;
background-color: #0C0E12 !important;
}
/* LIGHT */
html.mm-v26-header-enabled:not(.mm-dark)
.js-header {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
}
/* ==========================================================
ROOT / SHELL
========================================================== */
html.mm-v26-header-enabled
.mm-v24-header-root {
width: 100%;
position: relative;
z-index: 5001;
font-family:
"Inter",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-header-root {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-header-root {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
}
html.mm-v26-header-enabled
.mm-v24-header-root
:is(
a,
button,
input,
select,
textarea
) {
font-family:
"Inter",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;
}
html.mm-v26-header-enabled
.mm-v24-header-shell {
width: 100%;
max-width: 1540px;
margin: 0 auto;
padding: 38px 48px 24px;
box-sizing: border-box;
}
/* ==========================================================
TOP ROW
========================================================== */
html.mm-v26-header-enabled
.mm-v24-top {
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
/* LOGO */
html.mm-v26-header-enabled
.mm-v24-logo {
width: 235px;
max-width: 30vw;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none !important;
}
html.mm-v26-header-enabled
.mm-v24-logo img {
width: 100%;
height: auto;
display: block;
filter: none !important;
-webkit-filter: none !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-logo img {
filter: invert(1) !important;
-webkit-filter: invert(1) !important;
}
/* ==========================================================
DESKTOP TOOLS – THEME + AUTH/ACCOUNT
========================================================== */
html.mm-v26-header-enabled
.mm-v24-tools {
display: flex;
align-items: center;
gap: 28px;
}
html.mm-v26-header-enabled
.mm-v24-theme {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 0;
border-radius: 10px;
background: transparent;
cursor: pointer;
transition:
background-color .16s ease,
color .16s ease;
}
html.mm-v26-header-enabled
.mm-v24-theme svg {
width: 23px;
height: 23px;
display: block;
stroke: currentColor;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-theme {
color: #A4A7AE;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-theme:hover {
color: #F5F7F6;
background: rgba(255,255,255,.055);
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-theme {
color: #6F737A;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-theme:hover {
color: #111318;
background: rgba(17,19,24,.055);
}
/* Desktop auth */
html.mm-v26-header-enabled
.mm-v24-auth {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
}
html.mm-v26-header-enabled
.mm-v24-auth-login,
html.mm-v26-header-enabled
.mm-v24-auth-signup {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
border-radius: 9px;
font-size: 15px;
line-height: 1;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
text-decoration: none !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-auth-login {
color: #F5F7F6;
background: transparent;
border: 1px solid #373A41;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-auth-signup {
color: #111318;
background: #F5F5F3;
border: 1px solid #F5F5F3;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-auth-login {
color: #171B22;
background: transparent;
border: 1px solid #D9DDE2;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-auth-signup {
color: #FFFFFF;
background: #202225;
border: 1px solid #202225;
}
/* Logged-in account */
html.mm-v26-header-enabled
.mm-v24-account {
max-width: 280px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 0 30px 0 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
html.mm-v26-header-enabled
.mm-v24-account-chevron {
position: absolute;
top: 50%;
right: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
color: currentColor;
transition:
transform .16s ease,
color .16s ease;
}
html.mm-v26-header-enabled
.mm-v24-account-chevron
svg {
width: 14px;
height: 8px;
display: block;
overflow: visible;
}
html.mm-v26-header-enabled
.mm-v24-account-chevron
svg path {
fill: currentColor !important;
stroke: none !important;
}
html.mm-v26-header-enabled
.mm-v24-account:hover
.mm-v24-account-chevron {
transform:
translateY(-50%)
scale(1.12);
}
html.mm-v26-header-enabled
.mm-v24-account-main {
font-size: 15px;
line-height: 1.2;
font-weight: 600;
}
html.mm-v26-header-enabled
.mm-v24-account-sub {
font-size: 14px;
line-height: 1.2;
font-weight: 500;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-account-main,
html.mm-v26-header-enabled.mm-dark
.mm-v24-account-sub,
html.mm-v26-header-enabled.mm-dark
.mm-v24-account-chevron {
color: #F5F7F6 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-account-main,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-account-sub,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-account-chevron {
color: #0B0E14 !important;
}
/* ==========================================================
DESKTOP NAV
========================================================== */
html.mm-v26-header-enabled
.mm-v24-desktop-nav {
margin-top: 20px;
display: flex;
align-items: center;
gap: 4px;
position: relative;
}
html.mm-v26-header-enabled
.mm-v24-nav-item {
position: relative;
flex: 0 0 auto;
}
html.mm-v26-header-enabled
.mm-v24-nav-main {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: transparent;
text-decoration: none !important;
font-size: 16px;
line-height: 1;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition:
background-color .15s ease,
color .15s ease;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-main {
color: #F5F7F6 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-nav-main {
color: #191D24 !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item:hover
> .mm-v24-nav-main,
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item.mm-open
> .mm-v24-nav-main,
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item.mm-active
> .mm-v24-nav-main {
color: #FFFFFF !important;
background: #2A2928 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-nav-item:hover
> .mm-v24-nav-main,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-nav-item.mm-open
> .mm-v24-nav-main,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-nav-item.mm-active
> .mm-v24-nav-main {
color: #111318 !important;
background: #EEEFF1 !important;
}
html.mm-v26-header-enabled
.mm-v24-chevron {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .16s ease;
}
html.mm-v26-header-enabled
.mm-v24-chevron svg {
width: 13px;
height: 13px;
display: block;
stroke: currentColor;
}
html.mm-v26-header-enabled
.mm-v24-nav-item.mm-open
> .mm-v24-nav-main
.mm-v24-chevron {
transform: rotate(180deg);
}
/* ==========================================================
DESKTOP DROPDOWN
========================================================== */
html.mm-v26-header-enabled
.mm-v24-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 510px;
max-width: min(510px, calc(100vw - 64px));
display: none;
padding: 24px 26px;
border-radius: 10px;
box-sizing: border-box;
z-index: 5200;
}
html.mm-v26-header-enabled
.mm-v24-nav-item.mm-align-right
.mm-v24-dropdown {
left: auto;
right: 0;
}
html.mm-v26-header-enabled
.mm-v24-nav-item.mm-open
> .mm-v24-dropdown {
display: block;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-dropdown {
background: #111419;
border: 1px solid #373A41;
box-shadow: 0 18px 50px rgba(0,0,0,.30);
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-dropdown {
background: #FFFFFF;
border: 1px solid #E1E4E8;
box-shadow: 0 18px 50px rgba(20,25,32,.12);
}
html.mm-v26-header-enabled
.mm-v24-drop-link {
display: block;
margin: 0;
padding: 0;
text-decoration: none !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-link
+ .mm-v24-drop-link {
margin-top: 26px;
}
html.mm-v26-header-enabled
.mm-v24-drop-title {
display: block;
font-size: 16px;
line-height: 1.25;
font-weight: 600;
}
html.mm-v26-header-enabled
.mm-v24-drop-desc {
display: block;
margin-top: 7px;
font-size: 15px;
line-height: 1.55;
font-weight: 400;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-drop-title {
color: #FFFFFF;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-drop-desc {
color: #A4A7AE;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-drop-title {
color: #171B22;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-drop-desc {
color: #6B7078;
}
/* Compact/grid dropdown */
html.mm-v26-header-enabled
.mm-v24-dropdown.mm-compact {
width: 460px;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-link {
margin: 0 !important;
min-height: 42px;
display: flex;
align-items: center;
padding: 0 12px;
border-radius: 8px;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-drop-grid
.mm-v24-drop-link:hover {
background: rgba(255,255,255,.055);
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-drop-grid
.mm-v24-drop-link:hover {
background: #F3F4F6;
}
/* ==========================================================
MOBILE TOPBAR
========================================================== */
html.mm-v26-header-enabled
.mm-v24-mobile-actions {
display: none;
align-items: center;
gap: 6px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 9px;
background: transparent;
cursor: pointer;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open svg {
width: 25px;
height: 25px;
stroke: currentColor;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-open {
color: #FFFFFF;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-open {
color: #171B22;
}
/* ==========================================================
MOBILE OVERLAY / DRAWER
========================================================== */
html.mm-v26-header-enabled
.mm-v24-mobile-backdrop {
position: fixed;
inset: 0;
display: none;
background: rgba(0,0,0,.63);
z-index: 90000;
}
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
position: fixed;
top: 0;
right: 0;
width: min(82vw, 660px);
height: 100dvh;
display: flex;
flex-direction: column;
transform: translateX(102%);
transition: transform .22s ease;
z-index: 90001;
overflow-y: auto;
overscroll-behavior: contain;
box-sizing: border-box;
padding: 22px 28px 30px;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-drawer {
background: #0C0E12;
color: #F5F7F6;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-drawer {
background: #FFFFFF;
color: #171B22;
}
html.mm-v26-header-enabled.mm-v24-menu-open
.mm-v24-mobile-backdrop {
display: block;
}
html.mm-v26-header-enabled.mm-v24-menu-open
.mm-v24-mobile-drawer {
transform: translateX(0);
}
html.mm-v26-header-enabled.mm-v24-menu-open,
html.mm-v26-header-enabled.mm-v24-menu-open body {
overflow: hidden !important;
}
/* Drawer header */
html.mm-v26-header-enabled
.mm-v24-mobile-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-logo {
width: min(260px, 58vw);
display: block;
}
html.mm-v26-header-enabled
.mm-v24-mobile-logo img {
width: 100%;
height: auto;
display: block;
filter: none !important;
-webkit-filter: none !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-logo img {
filter: invert(1) !important;
-webkit-filter: invert(1) !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-close {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
html.mm-v26-header-enabled
.mm-v24-mobile-close svg {
width: 27px;
height: 27px;
stroke: currentColor;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-close {
color: #A4A7AE;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-close {
color: #777C86;
}
/* Drawer menu */
html.mm-v26-header-enabled
.mm-v24-mobile-nav {
margin-top: 52px;
display: flex;
flex-direction: column;
gap: 0;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row {
width: 100%;
border: 0;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main {
width: 100%;
min-height: 66px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0;
box-sizing: border-box;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
flex: 1 1 auto;
display: flex;
align-items: center;
min-height: 66px;
text-decoration: none !important;
font-size: 23px;
line-height: 1.1;
font-weight: 600;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-row-main
> a {
color: #F5F7F6 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-row-main
> a {
color: #171B22 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-toggle {
width: 40px;
height: 48px;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
html.mm-v26-header-enabled
.mm-v24-mobile-toggle svg {
width: 18px;
height: 18px;
stroke: currentColor;
transition: transform .16s ease;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-toggle {
color: #A4A7AE;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-toggle {
color: #777C86;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row.mm-open
.mm-v24-mobile-toggle svg {
transform: rotate(180deg);
}
/* Accordion */
html.mm-v26-header-enabled
.mm-v24-mobile-sub {
display: none;
margin: -2px 0 12px;
padding: 7px 0 12px 16px;
border-left: 1px solid transparent;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row.mm-open
> .mm-v24-mobile-sub {
display: block;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-sub {
border-left-color: #373A41;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-sub {
border-left-color: #D9DDE2;
}
html.mm-v26-header-enabled
.mm-v24-mobile-sub
a {
display: block;
padding: 8px 0;
text-decoration: none !important;
font-size: 15px;
line-height: 1.3;
font-weight: 500;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-sub
a {
color: #A4A7AE !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-sub
a {
color: #555A63 !important;
}
/* ==========================================================
MOBILE AUTH – SOM REFERENSEN
========================================================== */
html.mm-v26-header-enabled
.mm-v24-mobile-auth {
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
width: 100%;
min-height: 66px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 18px;
border-radius: 12px;
text-align: center;
text-decoration: none !important;
font-size: 20px;
line-height: 1;
font-weight: 600;
cursor: pointer;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-login,
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-account {
color: #F5F7F6 !important;
background: #13161B;
border: 1px solid #45484F;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-mobile-signup {
color: #111318 !important;
background: #EFEFEF;
border: 1px solid #EFEFEF;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-login,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-account {
color: #171B22 !important;
background: #FFFFFF;
border: 1px solid #D9DDE2;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-signup {
color: #FFFFFF !important;
background: #202225;
border: 1px solid #202225;
}
/* ==========================================================
BREAKPOINT
========================================================== */
@media (max-width: 1279px) {
html.mm-v26-header-enabled
.mm-v24-header-shell {
padding:
22px
24px
18px;
}
html.mm-v26-header-enabled
.mm-v24-logo {
width: 205px;
max-width: 58vw;
}
html.mm-v26-header-enabled
.mm-v24-desktop-nav,
html.mm-v26-header-enabled
.mm-v24-tools {
display: none;
}
html.mm-v26-header-enabled
.mm-v24-mobile-actions {
display: flex;
}
}
@media (max-width: 520px) {
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
width: 100vw;
padding:
18px
22px
24px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-logo {
width: min(205px, 62vw);
}
html.mm-v26-header-enabled
.mm-v24-mobile-nav {
margin-top: 36px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main,
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
min-height: 56px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
font-size: 19px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-toggle {
width: 36px;
height: 44px;
flex-basis: 36px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-toggle
svg {
width: 16px;
height: 16px;
}
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
min-height: 56px;
font-size: 17px;
border-radius: 10px;
}
}
/* ==========================================================
V27 – ORIGINAL AUTH ARROW FALLBACK
Originalet har inline fill="#0B0E14".
Tvinga rätt färg om den gamla auth-triggern visas någonstans.
========================================================== */
html.mm-v26-header-enabled.mm-dark
.js-header
#customer-login
button
svg[width="14"][height="8"]
path {
fill: #F5F7F6 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.js-header
#customer-login
button
svg[width="14"][height="8"]
path {
fill: #0B0E14 !important;
}
/* ==========================================================
V28 – SETTINGS PAGE BASE THEME
Endast /settings/ påverkas.
========================================================== */
html.mm-v28-settings-page.mm-dark,
html.mm-v28-settings-page.mm-dark body,
html.mm-v28-settings-page.mm-dark main,
html.mm-v28-settings-page.mm-dark #content,
html.mm-v28-settings-page.mm-dark .site-content,
html.mm-v28-settings-page.mm-dark .site-main {
background: #0C0E12 !important;
background-color: #0C0E12 !important;
color: #F5F7F6 !important;
}
html.mm-v28-settings-page:not(.mm-dark),
html.mm-v28-settings-page:not(.mm-dark) body,
html.mm-v28-settings-page:not(.mm-dark) main,
html.mm-v28-settings-page:not(.mm-dark) #content,
html.mm-v28-settings-page:not(.mm-dark) .site-content,
html.mm-v28-settings-page:not(.mm-dark) .site-main {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
color: #171B22 !important;
}
html.mm-v28-settings-page.mm-dark
:is(
.bg-white,
.bg-background,
.bg-card,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-neutral-50
) {
background: #13161B !important;
background-color: #13161B !important;
}
html.mm-v28-settings-page.mm-dark
main
:is(input, select, textarea) {
background: #191C20 !important;
background-color: #191C20 !important;
color: #F5F7F6 !important;
border-color: #373A41 !important;
}
/* ==========================================================
V28 – ACCOUNT MENU
Samma tre val på ALLA sidor:
Inställningar / Nyhetsbrev / Logga ut
========================================================== */
html.mm-v26-header-enabled
.mm-v28-account-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
html.mm-v26-header-enabled
.mm-v28-account-menu {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: 230px;
display: none;
padding: 12px;
border-radius: 12px;
box-sizing: border-box;
z-index: 95000;
}
html.mm-v26-header-enabled
.mm-v28-account-wrap.mm-open
.mm-v28-account-menu {
display: block;
}
html.mm-v26-header-enabled.mm-dark
.mm-v28-account-menu {
background: #13161B;
border: 1px solid #373A41;
box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v28-account-menu {
background: #FFFFFF;
border: 1px solid #E1E4E8;
box-shadow: 0 18px 50px rgba(20,25,32,.14);
}
html.mm-v26-header-enabled
.mm-v28-account-action {
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
padding: 0 12px;
margin: 0;
border: 0;
border-radius: 8px;
background: transparent;
text-align: left;
text-decoration: none !important;
font: inherit;
font-size: 14px;
line-height: 1;
font-weight: 500;
cursor: pointer;
}
html.mm-v26-header-enabled.mm-dark
.mm-v28-account-action {
color: #CECFD2 !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v28-account-action:hover {
color: #FFFFFF !important;
background: rgba(255,255,255,.055);
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v28-account-action {
color: #555A63 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v28-account-action:hover {
color: #111318 !important;
background: #F3F4F6;
}
/* Chevron upp när vår konto-meny är öppen */
html.mm-v26-header-enabled
.mm-v28-account-wrap.mm-open
.mm-v24-account-chevron {
transform:
translateY(-50%)
rotate(180deg);
}
/* ==========================================================
V28 – MOBILE ACCOUNT ACTIONS
========================================================== */
html.mm-v26-header-enabled
.mm-v28-mobile-account-wrap {
width: 100%;
}
html.mm-v26-header-enabled
.mm-v28-mobile-account-actions {
display: none;
margin-top: 10px;
padding: 10px;
border-radius: 12px;
}
html.mm-v26-header-enabled
.mm-v28-mobile-account-wrap.mm-open
.mm-v28-mobile-account-actions {
display: block;
}
html.mm-v26-header-enabled.mm-dark
.mm-v28-mobile-account-actions {
background: #13161B;
border: 1px solid #373A41;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v28-mobile-account-actions {
background: #F6F7F8;
border: 1px solid #E1E4E8;
}
html.mm-v26-header-enabled
.mm-v28-mobile-account-actions
.mm-v28-account-action {
min-height: 44px;
font-size: 15px;
}
/* ==========================================================
V30 – TYPE SCALE / FONT WEIGHTS
Pinnar nya headern till samma typografiska hierarki överallt.
========================================================== */
html.mm-v26-header-enabled
.mm-v24-nav-main {
font-weight: 500 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-title {
font-weight: 600 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-desc {
font-weight: 400 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
font-weight: 600 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-sub
a {
font-weight: 500 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
font-weight: 600 !important;
}
html.mm-v26-header-enabled
.mm-v24-account-main {
font-weight: 600 !important;
}
html.mm-v26-header-enabled
.mm-v24-account-sub {
font-weight: 500 !important;
}
/* ==========================================================
V32 – EXAKT DESKTOP-SKALA FRÅN /PORTFOLJER
Källa: faktisk outerHTML från Portföljer-headern:
- logo: width 153 / height 26
- menyknappar: h-10 = 40px
- px-4 = 16px
- text-sm = 14px
- font-medium = 500
- rounded-md = 6px
- xl:gap-1 = 4px
- chevron size-3 = 12px
Mobilens V29/V31-kompakta regler lämnas orörda.
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled
.mm-v24-top {
min-height: 40px !important;
}
/* Exakt logostorlek från originalets SVG */
html.mm-v26-header-enabled
.mm-v24-logo {
width: 153px !important;
min-width: 153px !important;
max-width: 153px !important;
height: 26px !important;
flex-basis: 153px !important;
}
html.mm-v26-header-enabled
.mm-v24-logo
img {
width: 153px !important;
height: 26px !important;
max-width: 153px !important;
max-height: 26px !important;
object-fit: contain !important;
object-position: left center !important;
}
/* Originalet använder gap-2 mellan headerns rader */
html.mm-v26-header-enabled
.mm-v24-desktop-nav {
margin-top: 8px !important;
gap: 4px !important;
}
/* Exakt h-10 / px-4 / text-sm / font-medium / rounded-md */
html.mm-v26-header-enabled
.mm-v24-nav-main {
height: 40px !important;
min-height: 40px !important;
gap: 4px !important;
padding:
0 16px !important;
border-radius:
6px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
/* Originalet använder size-3 + ml-1 */
html.mm-v26-header-enabled
.mm-v24-chevron {
width: 12px !important;
height: 12px !important;
margin-left: 0 !important;
}
html.mm-v26-header-enabled
.mm-v24-chevron
svg {
width: 12px !important;
height: 12px !important;
}
/* Top-right controls hålls på samma 40px-skala */
html.mm-v26-header-enabled
.mm-v24-tools {
gap: 24px !important;
}
html.mm-v26-header-enabled
.mm-v24-theme {
width: 40px !important;
height: 40px !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v24-auth-login,
html.mm-v26-header-enabled
.mm-v24-auth-signup {
min-height:
40px !important;
padding:
0 16px !important;
border-radius:
6px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
html.mm-v26-header-enabled
.mm-v24-account-main {
font-size:
14px !important;
line-height:
18px !important;
font-weight:
600 !important;
}
html.mm-v26-header-enabled
.mm-v24-account-sub {
font-size:
14px !important;
line-height:
18px !important;
font-weight:
500 !important;
}
html.mm-v26-header-enabled
.mm-v24-account-chevron {
width:
14px !important;
height:
14px !important;
}
}
/* ==========================================================
V33 – DESKTOP SUBMENUS
Närmare skalan på /portfoljer:
mindre typografi, tightare spacing och stabil hover-zon.
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled
.mm-v24-dropdown {
top:
calc(100% + 6px) !important;
width:
480px !important;
max-width:
min(480px, calc(100vw - 48px)) !important;
padding:
20px 22px !important;
border-radius:
8px !important;
}
/*
* Transparent brygga mellan trigger och dropdown.
* Gör att muspekaren kan flyttas ned i menyn utan att
* hover-state försvinner i det lilla mellanrummet.
*/
html.mm-v26-header-enabled
.mm-v24-dropdown::before {
content:
"" !important;
position:
absolute !important;
left:
0 !important;
right:
0 !important;
top:
-8px !important;
height:
8px !important;
background:
transparent !important;
pointer-events:
auto !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-link
+ .mm-v24-drop-link {
margin-top:
18px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-title {
font-size:
14px !important;
line-height:
20px !important;
font-weight:
600 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-desc {
margin-top:
4px !important;
font-size:
14px !important;
line-height:
22px !important;
font-weight:
400 !important;
}
/* Börskurser / Börsen idag / Utbildning */
html.mm-v26-header-enabled
.mm-v24-dropdown.mm-compact {
width:
410px !important;
max-width:
min(410px, calc(100vw - 48px)) !important;
padding:
14px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid {
gap:
4px 8px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-link {
min-height:
36px !important;
padding:
0 10px !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-title {
font-size:
14px !important;
line-height:
18px !important;
font-weight:
500 !important;
}
}
/* ==========================================================
V34 – DROPDOWN ITEM HOVER
Samma visuella feedback som Portföljer-menyn:
hela valet får en rundad grå yta vid hover/focus.
========================================================== */
@media (min-width: 1280px) {
/* Beskrivande dropdowns, t.ex. Redaktionen / Social Trading */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link {
padding:
10px 12px !important;
border-radius:
8px !important;
transition:
background-color .14s ease,
color .14s ease !important;
}
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link
+ .mm-v24-drop-link {
margin-top:
6px !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-dropdown
.mm-v24-drop-link:hover,
html.mm-v26-header-enabled.mm-dark
.mm-v24-dropdown
.mm-v24-drop-link:focus-visible {
background:
#2A2928 !important;
outline:
none !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-dropdown
.mm-v24-drop-link:hover,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-dropdown
.mm-v24-drop-link:focus-visible {
background:
#EEEFF1 !important;
outline:
none !important;
}
/* Kompakta dropdowns får samma hoverfärg */
html.mm-v26-header-enabled.mm-dark
.mm-v24-drop-grid
.mm-v24-drop-link:hover,
html.mm-v26-header-enabled.mm-dark
.mm-v24-drop-grid
.mm-v24-drop-link:focus-visible {
background:
#2A2928 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-drop-grid
.mm-v24-drop-link:hover,
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-drop-grid
.mm-v24-drop-link:focus-visible {
background:
#EEEFF1 !important;
}
}
/* ==========================================================
V35 – DROPDDOWN TEXT: ALDRIG UNDERSTRUKEN
========================================================== */
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:hover,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:focus,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:focus-visible,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:visited,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link
.mm-v24-drop-title,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:hover
.mm-v24-drop-title,
html.mm-v26-header-enabled
.mm-v24-dropdown
.mm-v24-drop-link:focus-visible
.mm-v24-drop-title {
text-decoration: none !important;
text-underline-offset: 0 !important;
}
/* ==========================================================
V36 – EXAKT MOBIL-SHEET FRÅN /PORTFOLJER
Översatt direkt från outerHTML:
- w-3/4
- sm:max-w-sm
- inset-y-0 right-0 h-full
- border-l
- sheet-header p-4
- logo SVG 153x26
- content p-4 / gap-6
- accordion gap-4
- text-md / font-semibold
- chevron size-4
- auth h-12 / sm:h-10 / text-sm / font-medium
========================================================== */
@media (max-width: 1279px) {
/* ------------------------------------------------------
STÄNGD MOBILHEADER
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-header-shell {
padding:
20px 24px !important;
}
/* Samma logostorlek överallt: 153 × 26 */
html.mm-v26-header-enabled
.mm-v24-logo {
width:
153px !important;
min-width:
153px !important;
max-width:
153px !important;
height:
26px !important;
flex-basis:
153px !important;
}
html.mm-v26-header-enabled
.mm-v24-logo
img {
width:
153px !important;
height:
26px !important;
max-width:
153px !important;
max-height:
26px !important;
object-fit:
contain !important;
object-position:
left center !important;
}
/*
* V38:
* Behåll vår dark/light-toggle på mobil.
* Den ligger bredvid hamburgern, men övriga mått följer
* fortfarande Portföljer-headerns kompakta mobilskala.
*/
html.mm-v26-header-enabled
.mm-v24-mobile-actions
.mm-v24-theme {
display:
inline-flex !important;
width:
40px !important;
height:
40px !important;
flex:
0 0 40px !important;
border:
0 !important;
border-radius:
6px !important;
background:
transparent !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-actions
.mm-v24-theme
svg {
width:
22px !important;
height:
22px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-actions {
gap:
8px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open {
width:
48px !important;
height:
48px !important;
border:
1px solid
#373A41 !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-open {
border-color:
#D9DDE2 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open
svg {
width:
20px !important;
height:
20px !important;
}
/* ------------------------------------------------------
SHEET / DRAWER
w-3/4 + sm:max-w-sm
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
top:
0 !important;
right:
0 !important;
bottom:
0 !important;
width:
75vw !important;
max-width:
none !important;
height:
100dvh !important;
padding:
0 !important;
gap:
0 !important;
border-left:
1px solid
#373A41 !important;
box-shadow:
0 18px 50px
rgba(0,0,0,.28) !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-mobile-drawer {
border-left-color:
#E1E4E8 !important;
}
/* sheet-header: p-4 */
html.mm-v26-header-enabled
.mm-v24-mobile-head {
position:
relative !important;
min-height:
58px !important;
display:
flex !important;
align-items:
flex-start !important;
justify-content:
flex-start !important;
padding:
16px !important;
gap:
0 !important;
box-sizing:
border-box !important;
}
/* Exakt logo från outerHTML: 153 × 26 */
html.mm-v26-header-enabled
.mm-v24-mobile-logo {
width:
153px !important;
min-width:
153px !important;
max-width:
153px !important;
height:
26px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-logo
img {
width:
153px !important;
height:
26px !important;
max-width:
153px !important;
max-height:
26px !important;
object-fit:
contain !important;
object-position:
left center !important;
}
/* Original: absolute top-4 right-4, icon size-4 */
html.mm-v26-header-enabled
.mm-v24-mobile-close {
position:
absolute !important;
top:
16px !important;
right:
16px !important;
width:
24px !important;
height:
24px !important;
padding:
0 !important;
flex:
0 0 24px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-close
svg {
width:
16px !important;
height:
16px !important;
}
/* ------------------------------------------------------
NAV = accordion wrapper
Original content: flex flex-col gap-6 p-4
Accordion: flex flex-col gap-4
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-mobile-nav {
margin:
16px 0 0 !important;
padding:
16px !important;
display:
flex !important;
flex-direction:
column !important;
gap:
16px !important;
box-sizing:
border-box !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row {
width:
100% !important;
margin:
0 !important;
padding:
0 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main {
width:
100% !important;
min-height:
24px !important;
height:
auto !important;
gap:
16px !important;
padding:
0 !important;
align-items:
flex-start !important;
}
/* text-md + font-semibold */
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
min-height:
24px !important;
height:
auto !important;
padding:
0 !important;
font-size:
16px !important;
line-height:
24px !important;
font-weight:
600 !important;
}
/* size-4 */
html.mm-v26-header-enabled
.mm-v24-mobile-toggle {
width:
24px !important;
height:
24px !important;
flex:
0 0 24px !important;
align-items:
center !important;
justify-content:
flex-end !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-toggle
svg {
width:
16px !important;
height:
16px !important;
}
/* ------------------------------------------------------
ACCORDION CONTENT
Original: overflow-hidden text-sm
Ingen extra vänsterindragning i Portföljer-sheeten.
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-mobile-sub {
margin:
8px 0 0 !important;
padding:
0 !important;
border:
0 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-sub
a {
padding:
2px 0 !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
/* ------------------------------------------------------
AUTH
Original content wrapper gap-6, auth buttons gap-3.
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-mobile-auth {
margin:
8px 0 0 !important;
padding:
0 16px 16px !important;
gap:
12px !important;
box-sizing:
border-box !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
min-height:
48px !important;
height:
48px !important;
padding:
0 24px !important;
border-radius:
6px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
/* Account actions från V28 följer samma kompakta skala */
html.mm-v26-header-enabled
.mm-v28-mobile-account-actions {
margin-top:
8px !important;
padding:
8px !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v28-mobile-account-actions
.mm-v28-account-action {
min-height:
40px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
}
/* sm:max-w-sm = 384px */
@media (min-width: 640px) and (max-width: 1279px) {
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
max-width:
384px !important;
}
/* sm:h-10 */
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
min-height:
40px !important;
height:
40px !important;
}
}
/*
* V36 neutraliserar V29:s gamla full-screen-regel under 520px.
* Sheet ska fortsätta vara w-3/4 även på små telefoner.
*/
@media (max-width: 520px) {
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
width:
75vw !important;
max-width:
none !important;
padding:
0 !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-logo {
width:
153px !important;
min-width:
153px !important;
max-width:
153px !important;
height:
26px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main,
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
min-height:
24px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-row-main
> a {
font-size:
16px !important;
line-height:
24px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-login,
html.mm-v26-header-enabled
.mm-v24-mobile-signup,
html.mm-v26-header-enabled
.mm-v24-mobile-account {
min-height:
48px !important;
height:
48px !important;
font-size:
14px !important;
border-radius:
6px !important;
}
}
/* ==========================================================
V40 – MOBILE HEADER HEIGHT / WARRANT COMPAT
Bara VÅR custom-header låses till 72px.
Viktigt:
Den native .js-header-wrappern får INTE en fast höjd.
På Warrantlistan innehåller samma wrapper även native delar som
produkt-/kategori-/filterkontroller. V39 klippte därför bort bl.a.
Aktier / Index / Råvaror när hela .js-header tvingades till 72px.
V40:
- custom header = 72px
- native .js-header = auto
- overflow = visible
- drawer-menyn påverkas inte
========================================================== */
@media (max-width: 1279px) {
html.mm-v26-header-enabled
.mm-v24-header-root {
min-height:
72px !important;
height:
72px !important;
}
html.mm-v26-header-enabled
.mm-v24-header-shell {
min-height:
72px !important;
height:
72px !important;
padding:
16px 24px !important;
box-sizing:
border-box !important;
}
html.mm-v26-header-enabled
.mm-v24-top {
min-height:
40px !important;
height:
40px !important;
align-items:
center !important;
}
/* Loggan behåller exakta Portföljer-måttet */
html.mm-v26-header-enabled
.mm-v24-logo,
html.mm-v26-header-enabled
.mm-v24-logo
img {
width:
153px !important;
min-width:
153px !important;
max-width:
153px !important;
height:
26px !important;
max-height:
26px !important;
}
/* Dark/light + hamburger följer samma 40px-rad */
html.mm-v26-header-enabled
.mm-v24-mobile-actions {
height:
40px !important;
min-height:
40px !important;
align-items:
center !important;
gap:
8px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-actions
.mm-v24-theme {
width:
40px !important;
height:
40px !important;
flex:
0 0 40px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open {
width:
40px !important;
height:
40px !important;
min-width:
40px !important;
min-height:
40px !important;
flex:
0 0 40px !important;
}
html.mm-v26-header-enabled
.mm-v24-mobile-open
svg {
width:
18px !important;
height:
18px !important;
}
}
/* ==========================================================
V40 – NATIVE HEADER COMPATIBILITY
Låt Warrantlistan / Social Trading behålla sina egna rader,
filter, tabs och overlays under vår custom-header.
========================================================== */
@media (max-width: 1279px) {
html.mm-v26-header-enabled
body
header.js-header,
html.mm-v26-header-enabled
body
.js-header {
height:
auto !important;
min-height:
0 !important;
max-height:
none !important;
overflow:
visible !important;
overflow-x:
visible !important;
overflow-y:
visible !important;
}
/*
* Endast vår synliga topbar har den kompakta 72px-höjden.
* Eventuella native sektioner efter den får ta sin egen höjd.
*/
html.mm-v26-header-enabled
.mm-v24-header-root {
height:
72px !important;
min-height:
72px !important;
max-height:
72px !important;
overflow:
visible !important;
}
html.mm-v26-header-enabled
.mm-v24-header-shell {
height:
72px !important;
min-height:
72px !important;
max-height:
72px !important;
}
/*
* Själva drawer-lagret är fixed och ska självklart inte begränsas
* av topbarens 72px.
*/
html.mm-v26-header-enabled
.mm-v24-mobile-drawer {
max-height:
none !important;
}
}
/* ==========================================================
V41 – WARRANTLISTAN NATIVE SEARCH / FILTER STACKING
Grundorsaken var inte längre höjden.
Vår custom-header hade:
.js-header z-index: 5000
.mm-v24-header-root z-index: 5001
Warrantlistans native sökmodal använder z-[1600].
Därför låg vår header OVANPÅ den riktiga sök-/filter-UI:n
och dolde överdelen av panelerna.
På mobil ska native app-overlays ligga ovanför den stängda
headern, precis som på originalsidan.
När vår egen hamburgermeny öppnas höjer vi däremot headern
igen så drawer/backdrop fortfarande ligger över sidan.
========================================================== */
@media (max-width: 1279px) {
/* ------------------------------------------------------
NORMALT LÄGE
Headern ska ligga UNDER Warrantlistans native overlays.
------------------------------------------------------ */
html.mm-v26-header-enabled:not(.mm-v24-menu-open)
body
header.js-header,
html.mm-v26-header-enabled:not(.mm-v24-menu-open)
body
.js-header {
z-index:
100 !important;
}
html.mm-v26-header-enabled:not(.mm-v24-menu-open)
.mm-v24-header-root {
z-index:
101 !important;
}
/*
* Native filter-overlay får alltid vinna över den stängda
* custom-headern. Vi ändrar INTE storlek/position/innehåll,
* bara stacking order.
*/
html.mm-v26-header-enabled
.MobileFilterView-overlay {
z-index:
2000 !important;
}
/*
* Sökmodalens outerHTML har z-[1600].
* Låt dess native 1600 vara över vår header på 100/101.
*/
html.mm-v26-header-enabled
.newsfeed-modal {
z-index:
1600 !important;
}
/* ------------------------------------------------------
VÅR HAMBURGER ÄR ÖPPEN
Då ska vår drawer fortfarande ligga högst.
------------------------------------------------------ */
html.mm-v26-header-enabled.mm-v24-menu-open
body
header.js-header,
html.mm-v26-header-enabled.mm-v24-menu-open
body
.js-header {
z-index:
90000 !important;
}
html.mm-v26-header-enabled.mm-v24-menu-open
.mm-v24-header-root {
z-index:
90001 !important;
}
html.mm-v26-header-enabled.mm-v24-menu-open
.mm-v24-mobile-backdrop {
z-index:
90002 !important;
}
html.mm-v26-header-enabled.mm-v24-menu-open
.mm-v24-mobile-drawer {
z-index:
90003 !important;
}
}
/* ==========================================================
V41 SAFE – DESKTOP NATIVE DIALOG STACKING
Desktop-headern ligger normalt på z-index 5000/5001.
När en native Radix-dialog är öppen får headern inte ligga
ovanpå dialog/backdrop och täcka dialogens övre del.
Endast stacking ändras. Dialogens egna mått/placering lämnas orörda.
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled:has(
[role="dialog"][data-state="open"]
)
body
header.js-header,
html.mm-v26-header-enabled:has(
[role="dialog"][data-state="open"]
)
body
.js-header {
z-index:
0 !important;
}
html.mm-v26-header-enabled:has(
[role="dialog"][data-state="open"]
)
.mm-v24-header-root {
z-index:
1 !important;
}
}
/* ==========================================================
V41 SAFE – NEWSLETTER DIALOG DARKMODE
Matchar auth/login-dialogens mörka designspråk.
Endast färg/stil.
Ingen funktionalitet, storlek eller placering ändras.
Scope:
Newsletter-dialogen identifieras via dess unika checkbox/input:
name="Marketmate: Veckans viktigaste"
========================================================== */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
) {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
rgba(255,255,255,.08) !important;
}
/* ÖVRE INTRODEL */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> div.flex.flex-col.text-left {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#FFFFFF !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> div.flex.flex-col.text-left
:is(
h1,
h2,
h3,
span,
b
) {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> div.flex.flex-col.text-left
p {
color:
rgba(255,255,255,.62) !important;
-webkit-text-fill-color:
rgba(255,255,255,.62) !important;
}
/* FORM / RUBRIKER / TEXT */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form {
color:
#F5F7F6 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
:is(
h1,
h2,
h3,
h4,
label,
p,
span
) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
.text-muted-foreground,
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
.text-gray-400,
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
.text-gray-500,
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
.text-gray-600 {
color:
rgba(255,255,255,.56) !important;
-webkit-text-fill-color:
rgba(255,255,255,.56) !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
i {
color:
#B9A7DB !important;
-webkit-text-fill-color:
#B9A7DB !important;
}
/* CHECKBOXES */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
button[role="checkbox"] {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
color:
#FFFFFF !important;
border-color:
rgba(255,255,255,.22) !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
button[role="checkbox"][data-state="checked"] {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
color:
#0C0E12 !important;
border-color:
#FFFFFF !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
button[role="checkbox"][data-state="checked"]
svg {
stroke:
#0C0E12 !important;
color:
#0C0E12 !important;
}
/* LÄS MER / LÄNKAR */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
a {
color:
#63DFA6 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
a:hover {
color:
#82EABC !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
button[aria-expanded] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
button[aria-expanded]
svg {
stroke:
currentColor !important;
}
/* SUBMIT / SPARA */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
button[type="submit"] {
min-height:
42px !important;
border-radius:
8px !important;
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
color:
#101214 !important;
-webkit-text-fill-color:
#101214 !important;
border:
1px solid
rgba(255,255,255,.10) !important;
font-weight:
650 !important;
opacity:
1 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
form
button[type="submit"]:disabled {
background:
#26292E !important;
background-color:
#26292E !important;
color:
rgba(255,255,255,.34) !important;
-webkit-text-fill-color:
rgba(255,255,255,.34) !important;
border-color:
rgba(255,255,255,.07) !important;
opacity:
1 !important;
}
/* HÖGER GRAFIKPANEL */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> div.overflow-hidden.absolute.top-0.bottom-0.right-0 {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> div.overflow-hidden.absolute.top-0.bottom-0.right-0
svg {
opacity:
.76 !important;
}
/* STÄNG-KNAPP */
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> button.absolute.right-4.top-4 {
color:
rgba(255,255,255,.88) !important;
background:
rgba(255,255,255,.055) !important;
border:
1px solid
rgba(255,255,255,.08) !important;
border-radius:
50% !important;
opacity:
1 !important;
}
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
)
> button.absolute.right-4.top-4
svg {
stroke:
currentColor !important;
}
/* MOBIL – samma färgspråk, ingen geometriändring */
@media (max-width: 767px) {
html.mm-dark
[role="dialog"]:has(
input[name="Marketmate: Veckans viktigaste"]
) {
background:
#13161B !important;
}
}
/* ==========================================================
V41 SAFE – VIDEO PLAY BUTTON DARK MODE
Träffar de befintliga 58x58 play-ikonerna i videokorten.
Ingen ändring av HTML, storlek eller placering.
Light mode påverkas inte.
========================================================== */
html.mm-dark
a[href*="/videos/"]
> svg[width="58"][height="58"][viewBox="0 0 58 58"] {
opacity:
1 !important;
filter:
drop-shadow(
0 6px 16px
rgba(0,0,0,.32)
) !important;
}
/* Mörk cirkel + diskret ljus kant */
html.mm-dark
a[href*="/videos/"]
> svg[width="58"][height="58"][viewBox="0 0 58 58"]
path[stroke="white"] {
fill:
rgba(19,22,27,.94) !important;
stroke:
rgba(255,255,255,.82) !important;
opacity:
1 !important;
}
/* Vit play-triangel */
html.mm-dark
a[href*="/videos/"]
> svg[width="58"][height="58"][viewBox="0 0 58 58"]
path[fill="white"] {
fill:
#FFFFFF !important;
stroke:
none !important;
opacity:
1 !important;
}
/* ==========================================================
V41 SAFE – UTBILDNING CARDS DARK MODE
Förbättrar läsbarheten på kort som:
Statistik / Fonder / övriga Utbildning-kort.
Endast dark mode.
Ingen funktionalitet, storlek eller position ändras.
========================================================== */
/* ----------------------------------------------------------
BILDKORT – MÖRKARE OVERLAY FÖR TYDLIG RUBRIK
---------------------------------------------------------- */
html.mm-dark
a[href*="/utbildning/"]
> img
+ span[style*="linear-gradient"] {
background-image:
linear-gradient(
180deg,
rgba(0,0,0,.30) 0%,
rgba(0,0,0,.46) 45%,
rgba(0,0,0,.78) 100%
) !important;
}
/* ----------------------------------------------------------
DATUM / META
---------------------------------------------------------- */
html.mm-dark
a[href*="/utbildning/"]
.text-xxs.text-theme-purple {
color:
#C9BCE2 !important;
-webkit-text-fill-color:
#C9BCE2 !important;
opacity:
1 !important;
}
/* ----------------------------------------------------------
RUBRIK – STATISTIK / FONDER / ETC.
---------------------------------------------------------- */
html.mm-dark
a[href*="/utbildning/"]
h5.text-white,
html.mm-dark
a[href*="/utbildning/"]
h5 {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
opacity:
1 !important;
text-shadow:
0 2px 12px
rgba(0,0,0,.42) !important;
}
/* ----------------------------------------------------------
KORTETS SHADOW I DARK MODE
---------------------------------------------------------- */
html.mm-dark
.post--hover:has(
> a[href*="/utbildning/"]
) {
box-shadow:
0 8px 24px
rgba(0,0,0,.26) !important;
}
/* ==========================================================
UTBILDNING CTA-KORT
"Behöver du hjälp med att komma igång?"
========================================================== */
html.mm-dark
a[href$="/utbildning/"].bg-theme-light-green2 {
background:
#13161B !important;
background-color:
#13161B !important;
border:
1px solid
#373A41 !important;
color:
#F5F7F6 !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 8px 24px
rgba(0,0,0,.18) !important;
}
/* Liten "Utbildning"-label */
html.mm-dark
a[href$="/utbildning/"].bg-theme-light-green2
.text-xxs {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* CTA-rubrik */
html.mm-dark
a[href$="/utbildning/"].bg-theme-light-green2
h5 {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
/* CTA-knapp */
html.mm-dark
a[href$="/utbildning/"].bg-theme-light-green2
span.border {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
border-color:
#52565E !important;
background:
#191C20 !important;
background-color:
#191C20 !important;
}
html.mm-dark
a[href$="/utbildning/"].bg-theme-light-green2
span.border:hover {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
border-color:
#737780 !important;
background:
#20242A !important;
background-color:
#20242A !important;
}
/* ==========================================================
V41 SAFE – PORTFÖLJER SUBMENU
Sex portföljer med beskrivningar.
Endast desktopbredd; mobil använder befintlig accordion.
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="portfoljer"]
> .mm-v24-dropdown {
width:
590px !important;
max-width:
min(590px, calc(100vw - 64px)) !important;
}
}
/* ==========================================================
V41 SAFE – SETTINGS PAGE DARK MODE V2
Endast /settings/ i dark mode.
Anpassar:
- sidomeny / tabs
- rubriker och sekundärtext
- kort och borders
- formulärfält
- Spara profil / Välj avatar
- notification-switchar
Ingen funktionalitet, storlek eller position ändras.
========================================================== */
/* ----------------------------------------------------------
GRUNDTEXT / RUBRIKER
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
:is(
h1,
h2,
h3,
h4,
h5,
h6,
.text-black,
.text-foreground,
.text-card-foreground
) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-v28-settings-page.mm-dark
main
:is(
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700
) {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* ----------------------------------------------------------
BORDERS / SEPARATORER
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
:is(
.border-gray-200,
.border-gray-300,
.border-b-gray-200
) {
border-color:
#2D3036 !important;
}
/* ----------------------------------------------------------
SIDOMENY / TABS
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
[role="tab"] {
background:
transparent !important;
background-color:
transparent !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
box-shadow:
none !important;
}
html.mm-v28-settings-page.mm-dark
main
[role="tab"]:hover {
background:
#16191E !important;
background-color:
#16191E !important;
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
html.mm-v28-settings-page.mm-dark
main
[role="tab"][data-state="active"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
box-shadow:
inset 0 0 0 1px
#2D3036 !important;
}
html.mm-v28-settings-page.mm-dark
main
[role="tab"]
svg {
color:
#85888E !important;
stroke:
currentColor !important;
}
html.mm-v28-settings-page.mm-dark
main
[role="tab"][data-state="active"]
svg {
color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
TABPANEL / SEKTIONER
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
[role="tabpanel"] {
color:
#F5F7F6 !important;
}
html.mm-v28-settings-page.mm-dark
main
[role="tabpanel"]
.bg-card {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#2D3036 !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.02) !important;
}
/* Kortets huvudtext */
html.mm-v28-settings-page.mm-dark
main
[role="tabpanel"]
.bg-card
.text-v2-sm.font-medium {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* Kortets beskrivningar */
html.mm-v28-settings-page.mm-dark
main
[role="tabpanel"]
.bg-card
.text-gray-500 {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* ----------------------------------------------------------
FORMULÄRFÄLT
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
:is(
input,
textarea,
select
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-v28-settings-page.mm-dark
main
:is(
input,
textarea
)::placeholder {
color:
#737780 !important;
-webkit-text-fill-color:
#737780 !important;
opacity:
1 !important;
}
html.mm-v28-settings-page.mm-dark
main
:is(
input,
textarea,
select
):focus {
border-color:
#5A5F68 !important;
}
/* ----------------------------------------------------------
PRIMÄRA KNAPPAR
Exempel: Spara profil / Välj avatar
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
button.bg-primary.text-primary-foreground {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
color:
#101214 !important;
-webkit-text-fill-color:
#101214 !important;
border-color:
rgba(255,255,255,.10) !important;
opacity:
1 !important;
}
html.mm-v28-settings-page.mm-dark
main
button.bg-primary.text-primary-foreground:hover {
background:
#E9EAEC !important;
background-color:
#E9EAEC !important;
color:
#101214 !important;
-webkit-text-fill-color:
#101214 !important;
}
/* ----------------------------------------------------------
NOTIFICATION-SWITCHAR
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
button[role="switch"] {
border-color:
transparent !important;
box-shadow:
inset 0 0 0 1px
rgba(255,255,255,.06) !important;
}
html.mm-v28-settings-page.mm-dark
main
button[role="switch"][data-state="unchecked"] {
background:
#30343B !important;
background-color:
#30343B !important;
}
html.mm-v28-settings-page.mm-dark
main
button[role="switch"][data-state="checked"] {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
}
html.mm-v28-settings-page.mm-dark
main
button[role="switch"]
> span {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
box-shadow:
0 1px 3px
rgba(0,0,0,.28) !important;
}
html.mm-v28-settings-page.mm-dark
main
button[role="switch"][data-state="checked"]
> span {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
}
/* ----------------------------------------------------------
FOCUS
---------------------------------------------------------- */
html.mm-v28-settings-page.mm-dark
main
:is(
[role="tab"],
[role="switch"],
button,
input,
textarea,
select
):focus-visible {
outline-color:
#737780 !important;
}
/* ==========================================================
V41 SAFE – MARKETMATE TABLE HEADER TITLE
Exempel: "Mest omsatta" på /borsen/usa/
Widgeten behåller sin ljusa/native yta i dark mode,
därför ska rubriken vara svart.
Endast exakt rubrikklass påverkas.
========================================================== */
html.mm-dark
.MarketMateTable-tableHeaderTitle {
color:
#111111 !important;
-webkit-text-fill-color:
#111111 !important;
opacity:
1 !important;
}
/* ==========================================================
V41 SAFE – MARKETMATETABLE GLOBAL DARK MODE
Gäller alla sidor som faktiskt är i mm-dark,
inklusive /warrantlista/*.
Viktigt:
- ingen storlek/layout/position ändras
- inline white backgrounds i MUI-tabellen skrivs över
- röd/grön .indicativePrice lämnas orörd
- /warrantlista/* följer nu samma dark/light-system
========================================================== */
/* ----------------------------------------------------------
HELA WIDGETYTAN
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-tableContainer,
html.mm-dark
.MarketMateTable-table {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
WIDGETRUBRIK
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-tableHeaderTitle {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
/* ----------------------------------------------------------
TABLE HEADER
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-tableHead,
html.mm-dark
.MarketMateTable-headerTableRow {
background:
#191C20 !important;
background-color:
#191C20 !important;
}
html.mm-dark
.MarketMateTable-tableHeaderRootOverride,
html.mm-dark
.MarketMateTable-headerTableCell {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
border-color:
#2D3036 !important;
}
/* ----------------------------------------------------------
TABELLRADER / CELLER
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-tableRow {
background:
#13161B !important;
background-color:
#13161B !important;
border-color:
#2D3036 !important;
}
html.mm-dark
.MarketMateTable-tableCell {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
border-color:
#2D3036 !important;
}
/*
* Första/sticky namnkolumnen har explicit
* inline background:white i widgeten.
*/
html.mm-dark
.MarketMateTable-nameCell {
background:
#13161B !important;
background-color:
#13161B !important;
border-color:
#2D3036 !important;
}
/* ----------------------------------------------------------
PRODUKTNAMN
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-nameCell
a,
html.mm-dark
.MarketMateTable-nameCell
a span {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
SEKUNDÄR INFORMATION
Underliggande / riktning / häv / omsättning osv.
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-underlyingCell,
html.mm-dark
.MarketMateTable-leverageCell,
html.mm-dark
.MarketMateTable-spreadCell {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
html.mm-dark
.MarketMateTable-tableCell
span:not(.indicativePrice) {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/*
* Rad 2 i namnkolumnen:
* pris | underliggande.
*
* Vi färgar dividers/underliggande muted men lämnar
* själva .indicativePrice ifred så widgetens rött/grönt
* fortsätter fungera.
*/
html.mm-dark
.MarketMateTable-nameCell
> div:nth-child(2),
html.mm-dark
.MarketMateTable-nameCell
> div:nth-child(2)
div {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* ----------------------------------------------------------
PRISINDIKATOR
Behåll widgetens egen röd/grön-färg.
---------------------------------------------------------- */
html.mm-dark
.MarketMateTable-nameCell
.indicativePrice {
-webkit-text-fill-color:
currentColor !important;
}
/* ==========================================================
V41 SAFE – WARRANTLISTAN FULL DARK MODE
Scope:
ENDAST /warrantlista/* när html.mm-dark är aktiv.
Design:
- page: #0C0E12
- surface: #13161B
- surface 2: #191C20
- hover: #20242A
- border: #2D3036 / #373A41
- primary: #F5F7F6
- body: #CECFD2
- muted: #A4A7AE
Viktigt:
- light mode lämnas orört
- ingen width/height/position/layout ändras
- native filter/search-logik lämnas orörd
- rött/grönt för marknadsdata lämnas orört
- sponsor-/brandfärger skrivs inte över generellt
========================================================== */
/* ----------------------------------------------------------
PAGE / MAIN
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark,
html.mm-warrantlista-page.mm-dark body,
html.mm-warrantlista-page.mm-dark main,
html.mm-warrantlista-page.mm-dark #content,
html.mm-warrantlista-page.mm-dark .site-content,
html.mm-warrantlista-page.mm-dark .site-main {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
NEUTRALA LJUSA YTOR
Endast neutral-/bakgrundsklasser, inte brandfärger.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
:is(
.bg-white,
.bg-background,
.bg-card,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-neutral-50,
.bg-theme-gray-50,
.bg-theme-gray-100
) {
background:
#13161B !important;
background-color:
#13161B !important;
}
/* Sekundära neutrala ytor */
html.mm-warrantlista-page.mm-dark
body
:is(
.bg-gray-200,
.bg-slate-100,
.bg-neutral-100,
.bg-secondary,
.bg-muted
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
}
/* ----------------------------------------------------------
NEUTRAL TEXT
Röd/grön/brandtext lämnas medvetet utanför.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
:is(
.text-black,
.text-foreground,
.text-gray-800,
.text-gray-900,
.text-slate-800,
.text-slate-900,
.text-neutral-800,
.text-neutral-900,
.text-theme-gray-850,
.text-theme-gray-900,
.text-theme-gray-950
) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-neutral-400,
.text-neutral-500,
.text-muted-foreground,
.text-theme-gray-450,
.text-theme-gray-500,
.text-theme-gray-550,
.text-theme-gray-600,
.text-theme-gray-700,
.text-theme-gray-750
) {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* Vanliga rubriker i sidinnehållet */
html.mm-warrantlista-page.mm-dark
main
:is(h1, h2, h3, h4, h5, h6) {
color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
BORDERS / DIVIDERS
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
:is(
.border,
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-100,
.border-slate-200,
.border-neutral-100,
.border-neutral-200,
.border-theme-gray-100,
.border-theme-gray-200,
.border-border
) {
border-color:
#2D3036 !important;
}
/* ----------------------------------------------------------
FORM / SEARCH / FILTER INPUTS
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
main
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.mm-warrantlista-page.mm-dark
main
select,
html.mm-warrantlista-page.mm-dark
main
textarea,
html.mm-warrantlista-page.mm-dark
body
.MuiInputBase-root,
html.mm-warrantlista-page.mm-dark
body
.MuiOutlinedInput-root,
html.mm-warrantlista-page.mm-dark
body
.MuiSelect-select {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
main
input::placeholder,
html.mm-warrantlista-page.mm-dark
main
textarea::placeholder,
html.mm-warrantlista-page.mm-dark
body
.MuiInputBase-input::placeholder {
color:
#85888E !important;
-webkit-text-fill-color:
#85888E !important;
opacity:
1 !important;
}
/* MUI outlined field border */
html.mm-warrantlista-page.mm-dark
body
.MuiOutlinedInput-notchedOutline {
border-color:
#373A41 !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiOutlinedInput-root:hover
.MuiOutlinedInput-notchedOutline,
html.mm-warrantlista-page.mm-dark
body
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color:
#52565E !important;
}
/* Labels / helper text */
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiInputLabel-root,
.MuiFormLabel-root,
.MuiFormHelperText-root
) {
color:
#A4A7AE !important;
}
/* ----------------------------------------------------------
MUI NEUTRAL BUTTONS / CHIPS
Primära brandknappar tvingas inte till en ny brandfärg.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiButton-outlined,
.MuiToggleButton-root,
.MuiChip-root
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiButton-outlined,
.MuiToggleButton-root,
.MuiChip-root
):hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#52565E !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiIconButton-root {
color:
#CECFD2 !important;
}
/* Aktiv neutral toggle/chip */
html.mm-warrantlista-page.mm-dark
body
.MuiToggleButton-root.Mui-selected,
html.mm-warrantlista-page.mm-dark
body
.MuiChip-root[aria-selected="true"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
-webkit-text-fill-color:
#111318 !important;
border-color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
POPOVERS / DROPDOWNS / MENUS / DIALOGER
Endast färger. Ingen position eller storlek ändras.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiPopover-paper,
.MuiMenu-paper,
.MuiAutocomplete-paper,
.MuiDialog-paper,
.MuiDrawer-paper
) {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#2D3036 !important;
box-shadow:
0 18px 48px rgba(0,0,0,.38) !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
[role="listbox"],
[role="menu"]
) {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#2D3036 !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiMenuItem-root,
.MuiAutocomplete-option
) {
color:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiMenuItem-root,
.MuiAutocomplete-option
):hover,
html.mm-warrantlista-page.mm-dark
body
.MuiAutocomplete-option[aria-selected="true"] {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#F5F7F6 !important;
}
/* Native filter/search panels som använder Tailwind utility-ytor */
html.mm-warrantlista-page.mm-dark
body
[role="dialog"]
:is(
.bg-white,
.bg-background,
.bg-card
),
html.mm-warrantlista-page.mm-dark
body
[role="dialog"]
:is(
.bg-gray-50,
.bg-gray-100
) {
background:
#13161B !important;
background-color:
#13161B !important;
}
/* ----------------------------------------------------------
CHECKBOX / RADIO
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
.MuiCheckbox-root,
html.mm-warrantlista-page.mm-dark
body
.MuiRadio-root {
color:
#A4A7AE !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiCheckbox-root.Mui-checked,
html.mm-warrantlista-page.mm-dark
body
.MuiRadio-root.Mui-checked {
color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
TABLE – EXTRA WARRANTLISTAN GUARD
Den generella MarketMateTable-darkmoden ovan gör huvudjobbet.
Dessa regler fångar MUI-rader/celler som inte bär alla
MarketMateTable-specifika klasser.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
:is(
.MuiTableHead-root,
.MuiTableRow-head
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
:is(
.MuiTableBody-root,
.MuiTableRow-root,
.MuiTableCell-root
) {
border-color:
#2D3036 !important;
}
/*
* Fånga inline "background:white" även på MUI-rader/celler.
* Begränsat till MarketMateTable så andra komponenter lämnas ifred.
*/
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.MuiTableRow-root,
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.MuiTableCell-root {
background:
#13161B !important;
background-color:
#13161B !important;
}
/* Headerceller ska vara ett steg mörkare */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.MuiTableHead-root
.MuiTableCell-root {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/* ----------------------------------------------------------
SCROLLBARS – DISKRET DARK
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
body
* {
scrollbar-color:
#373A41 #13161B;
}
/* ----------------------------------------------------------
LIGHT MODE
Inga overrides – originalet får styra helt.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – WARRANTLISTAN DETAIL DARKMODE FIX
Bygger på faktisk outerHTML från Warrantlistan.
Fixar i dark mode:
- huvudfilter: Aktier / Råvaror / Index / Valutor osv.
- sekundärfilter: Riktning / Produkt / Hävstång / Spread
/ Emittenter / Mina filter
- filterikoner och pilar
- sponsrad-badge
- neutral svart indicativePrice
- MUI menyval + radiocirklar
- share-ikoner
- expanderad/kollapsad tabelldetalj
- copy/update/external-link-ikoner
- broker-knappar och ranking dots
Viktigt:
- ENDAST /warrantlista/* + mm-dark
- light mode lämnas helt orört
- ingen width/height/position/layout ändras
- röd/grön marknadsdata och sponsor-statusikon behålls
========================================================== */
/* ==========================================================
1. HUVUDKATEGORIER – AKTIER / RÅVAROR / INDEX / VALUTOR...
========================================================== */
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button:hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
/* Ikoner med hårdkodad svart fill/stroke */
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button
svg path[stroke="black"],
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button
svg path[stroke="#5D6487"] {
stroke:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button
svg path[fill="black"] {
fill:
#CECFD2 !important;
}
/* ==========================================================
2. SEKUNDÄRFILTER
Riktning / Produkt / Hävstång / Spread / Emittenter /
Mina filter
========================================================== */
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
:is(
.SingleSelectList-button,
.Panel-button,
.RangeSliderSelector-button,
.MultiSelectList-button,
.FilterList-button
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
:is(
.SingleSelectList-button,
.Panel-button,
.RangeSliderSelector-button,
.MultiSelectList-button,
.FilterList-button
):hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
/* Chevron-pilar */
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
:is(
.SingleSelectList-button,
.Panel-button,
.RangeSliderSelector-button,
.MultiSelectList-button
)
svg path[stroke="black"] {
stroke:
#CECFD2 !important;
}
/* Mina filter-ikonen */
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
.FilterList-button
svg path[fill="#5B5B5B"] {
fill:
#CECFD2 !important;
}
/* ==========================================================
3. SPONSRAD-BADGE
Behåll den gröna sponsor-statusikonen bredvid.
========================================================== */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
[style*="background: rgb(244, 237, 255)"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/* ==========================================================
4. INDICATIVE PRICE
Endast neutral/svart pristext görs ljus.
Röd/grön inline-färg lämnas helt orörd.
========================================================== */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.indicativePrice[style*="color: rgb(0, 0, 0)"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.indicativePrice[style*="color: black"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.indicativePrice[style*="color:black"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.indicativePrice[style*="color: #000"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
.indicativePrice[style*="color:#000"] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* ==========================================================
5. MUI MENYVAL / RADIOCIRKLAR
========================================================== */
html.mm-warrantlista-page.mm-dark
body
.MuiMenuItem-root {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiMenuItem-root:hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiMenuItem-root.Mui-selected {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* Radioikon – bort med vit light-mode-fill */
html.mm-warrantlista-page.mm-dark
body
.MuiListItemIcon-root
svg circle {
fill:
#13161B !important;
stroke:
#52565E !important;
}
html.mm-warrantlista-page.mm-dark
body
.MuiMenuItem-root.Mui-selected
.MuiListItemIcon-root
svg circle {
fill:
#13161B !important;
stroke:
#F5F7F6 !important;
}
/* Finjustering – ta bort box-linjer runt valen i öppna filterlistor */
html.mm-warrantlista-page.mm-dark
body
:is(
[role="listbox"],
[role="menu"]
)
> * {
border:
none !important;
outline:
none !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
body
:is(
.MuiMenuItem-root,
.MuiAutocomplete-option,
[role="option"],
[role="menuitem"]
) {
border:
none !important;
outline:
none !important;
box-shadow:
none !important;
}
/* ==========================================================
6. SHARE-IKONER
De två varianterna i outerHTML har stroke="#0B0E14".
========================================================== */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[stroke="#0B0E14"] {
stroke:
#CECFD2 !important;
}
/* ==========================================================
7. EXPANDERAD / KOLLAPSAD TABELLDETALJ
========================================================== */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell,
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#CECFD2 !important;
border-color:
#2D3036 !important;
border-right-color:
#2D3036 !important;
}
/* Hårdkodade svarta labels */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
[style*="color: black"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
[style*="color: black"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
[style*="color:black"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
[style*="color:black"] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* Hårdkodad sekundärtext rgb(91,91,91) */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
[style*="color: rgb(91, 91, 91)"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
[style*="color: rgb(91, 91, 91)"] {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/* Hårdkodad muted root-text rgb(132,137,156) */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
[style*="color: rgb(132, 137, 156)"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
[style*="color: rgb(132, 137, 156)"] {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/*
* Grön status / underliggande:
* rgb(0,152,101) lämnas medvetet native.
*/
/* Copy-ikoner */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
.MarketMateTable-copyIcon
path,
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
.MarketMateTable-copyIcon
path {
fill:
#CECFD2 !important;
}
/* Uppdatera-ikon / external-link-ikoner med #5B5B5B */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
svg path[fill="#5B5B5B"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
svg path[fill="#5B5B5B"] {
fill:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
svg path[stroke="#5B5B5B"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableLastContentCell
svg path[stroke="#5B5B5B"] {
stroke:
#CECFD2 !important;
}
/* Dela-knapp */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
button.bg-black {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border:
1px solid
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
button.bg-black:hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
/* ==========================================================
8. BROKER-KNAPPAR
========================================================== */
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-collapseTableContentCell,
.MarketMateTable-tableLastContentCell
)
.TwoLinkButton-root {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-collapseTableContentCell,
.MarketMateTable-tableLastContentCell
)
.TwoLinkButton-content {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-collapseTableContentCell,
.MarketMateTable-tableLastContentCell
)
.TwoLinkButton-content:hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-collapseTableContentCell,
.MarketMateTable-tableLastContentCell
)
.TwoLinkButton-divider {
background:
#373A41 !important;
background-color:
#373A41 !important;
border-color:
#373A41 !important;
}
/* ==========================================================
9. RANKING DOTS
========================================================== */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
.DotList-grey {
background:
#A4A7AE !important;
background-color:
#A4A7AE !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-collapseTableContentCell
.DotList-fadedDot {
background:
#373A41 !important;
background-color:
#373A41 !important;
}
/* ==========================================================
10. GENERELLA HÅRDKODADE SVARTA SVG-STROKES I
WARRANTLISTANS FILTER-/TABELLKONTROLLER
========================================================== */
html.mm-warrantlista-page.mm-dark
:is(
#multi-select-container,
.MainContainer-indexesMultiSelectParent,
.MarketMateTable-tableContainer
)
svg path[stroke="black"] {
stroke:
#CECFD2 !important;
}
html.mm-warrantlista-page.mm-dark
:is(
#multi-select-container,
.MainContainer-indexesMultiSelectParent
)
svg path[fill="black"] {
fill:
#CECFD2 !important;
}
/* ==========================================================
LIGHT MODE
Inga overrides – native/light får styra helt.
========================================================== */
/* ==========================================================
V41 SAFE – WARRANTLISTAN FILTER BUTTON SPACING
Dark mode:
Ger lite luft mellan huvudfiltren
(Aktier / Råvaror / Index / Valutor / Obligationer & räntor /
Kryptovalutor) så knapparna inte flyter ihop visuellt.
Viktigt:
- endast Warrantlistan + dark mode
- funktionalitet orörd
- knappstorlekar orörda
- light mode orört
========================================================== */
html.mm-warrantlista-page.mm-dark
#multi-select-container {
column-gap:
6px !important;
gap:
6px !important;
}
/*
* Säkerställ att varje filter-wrapper behandlas som ett
* separat flex-item och inte trycks ihop av interna styles.
*/
html.mm-warrantlista-page.mm-dark
#multi-select-container
> div {
flex:
0 0 auto !important;
}
/*
* Lite tydligare separation även visuellt mellan knapparna,
* utan att ändra deras mått.
*/
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button {
margin:
0 !important;
}
/* ==========================================================
V41 SAFE – WARRANTLISTAN GREEN ACCENTS
Återanvänder exakt samma gröna accentfamilj som
artikel-/tagg-badges i dark mode:
- mörkgrön bakgrund: #053321
- grön text: #75E0A7
- accent/ikon: #17B26A
Gäller ENDAST /warrantlista/* i dark mode:
- "Mina filter"-knappen
- "Sponsrad"-badge
- sorteringspilar i tabellhuvudet
Light mode och funktionalitet lämnas orörda.
========================================================== */
/* ----------------------------------------------------------
1. MINA FILTER
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
.FilterList-button {
background: #053321 !important;
background-color: #053321 !important;
color: #75E0A7 !important;
-webkit-text-fill-color: #75E0A7 !important;
border-color: #0A3D29 !important;
box-shadow: none !important;
}
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
.FilterList-button:hover {
background: #0A3D29 !important;
background-color: #0A3D29 !important;
color: #82EABC !important;
-webkit-text-fill-color: #82EABC !important;
border-color: #17B26A !important;
}
html.mm-warrantlista-page.mm-dark
.MainContainer-indexesMultiSelectParent
.FilterList-button
svg path {
fill: #17B26A !important;
stroke: #17B26A !important;
}
/* ----------------------------------------------------------
2. SPONSRAD BADGE
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
[style*="background: rgb(244, 237, 255)"] {
background: #053321 !important;
background-color: #053321 !important;
color: #75E0A7 !important;
-webkit-text-fill-color: #75E0A7 !important;
border: 0 !important;
box-shadow: none !important;
}
/* ----------------------------------------------------------
3. SORTERINGSPILAR I TABELLHUVUDET
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableHeaderRootOverride
svg
path[fill="#141313"],
html.mm-warrantlista-page.mm-dark
.MarketMateTable-headerTableCell
svg
path[fill="#141313"] {
fill: #17B26A !important;
}
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-tableHeaderRootOverride,
.MarketMateTable-headerTableCell
)
div[style*="margin-left: 4px"]
svg
path {
fill: #17B26A !important;
}
html.mm-warrantlista-page.mm-dark
:is(
.MarketMateTable-tableHeaderRootOverride,
.MarketMateTable-headerTableCell
):hover
div[style*="margin-left: 4px"]
svg
path {
fill: #75E0A7 !important;
}
/* ----------------------------------------------------------
LIGHT MODE
Inga overrides – originalet styr helt.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – WARRANTLISTAN SEARCH SURFACE + PRODUCT ICONS
Fixar två visuella detaljer i dark mode:
1) Tar bort den extra mörka "plattan" som syns bakom
sökfältet. Själva sökfältet behåller sin egen surface.
2) Anpassar de små produkt/status-ikonerna som har
hårdkodade ljusa fills (#C9F7CB / #FFDEAB) så de passar
Marketmates dark palette bättre.
Endast /warrantlista/* + mm-dark.
Light mode och funktionalitet lämnas orörda.
========================================================== */
/* ----------------------------------------------------------
1. SÖKRUTA – TA BORT BAKOMLIGGANDE EXTRA SURFACE
---------------------------------------------------------- */
/*
* Native-Warrantlistan har flera wrappers runt inputen.
* I dark mode kan en wrapper få en extra #13161B-yta som
* sticker fram ovanför/under själva inputfältet.
*
* Vi gör endast wrappers som innehåller just söket transparent.
* Själva inputen återställs därefter explicit.
*/
html.mm-warrantlista-page.mm-dark
main
div:has(input[placeholder*="underliggande"]) {
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
}
/* Själva sökfältet ska fortfarande vara ett tydligt fält */
html.mm-warrantlista-page.mm-dark
main
input[placeholder*="underliggande"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
main
input[placeholder*="underliggande"]::placeholder {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
opacity:
1 !important;
}
/* ----------------------------------------------------------
2. PRODUKT-/STATUSIKONER
---------------------------------------------------------- */
/*
* Grön statusdel:
* light native:
* #C9F7CB bakgrund
* #009865 symbol
*
* dark:
* samma gröna badgefamilj som övriga Marketmate-accenter.
*/
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[fill="#C9F7CB"] {
fill:
#053321 !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[fill="#009865"] {
fill:
#17B26A !important;
}
/*
* Orange produktstatus:
* light native:
* #FFDEAB bakgrund
* #FF9900 symbol
*
* I dark mode görs bakgrunden mörk/varm och symbolen
* ljusare så den behåller sin betydelse utan att se ut
* som en ljus sticker ovanpå tabellen.
*/
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[fill="#FFDEAB"] {
fill:
#34240E !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[fill="#FF9900"] {
fill:
#D77A21 !important;
}
/*
* Samma färger om browser/React normaliserar hex till rgb.
*/
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[style*="rgb(201, 247, 203)"] {
fill:
#053321 !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[style*="rgb(0, 152, 101)"] {
fill:
#17B26A !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[style*="rgb(255, 222, 171)"] {
fill:
#34240E !important;
}
html.mm-warrantlista-page.mm-dark
.MarketMateTable-tableContainer
svg
path[style*="rgb(255, 153, 0)"] {
fill:
#D77A21 !important;
}
/* ----------------------------------------------------------
LIGHT MODE
Inga overrides – native/light styr helt.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – WARRANTLISTAN SEARCH + PAGINATION FINAL FIX
Fixar:
1) "1-20 av ..." blir vit i dark mode.
2) Tar bort den inre mörka/suddiga rektangeln i sökfältet.
Orsak till sökfältet:
Själva -elementet hade fått egen #191C20-bakgrund,
samtidigt som MUI:s OutlinedInput-root är den riktiga
visuella sökrutan. Det gav två lager ovanpå varandra.
Lösning:
- MUI OutlinedInput-root får dark surface.
- Själva inputen blir transparent.
- ikon/adornments ligger kvar i samma sammanhängande yta.
Endast /warrantlista/* + mm-dark.
Light mode och funktionalitet lämnas orörda.
========================================================== */
/* ----------------------------------------------------------
1. PAGINATION TEXT
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
.MuiTablePagination-displayedRows {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
/* ----------------------------------------------------------
2. SEARCH – EN SAMMANHÄNGANDE SURFACE
---------------------------------------------------------- */
/*
* Den riktiga MUI-wrappern runt sökfältet får hela
* bakgrunden. Därmed täcks även ytan bakom sökikonen.
*/
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
/*
* Själva inputen ska INTE ha en egen bakgrund.
* Detta tar bort den mörka/suddiga inner-rektangeln.
*/
html.mm-warrantlista-page.mm-dark
main
input.MuiOutlinedInput-input[
placeholder*="underliggande"
] {
background:
transparent !important;
background-color:
transparent !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
box-shadow:
none !important;
}
/* Placeholder */
html.mm-warrantlista-page.mm-dark
main
input.MuiOutlinedInput-input[
placeholder*="underliggande"
]::placeholder {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
opacity:
1 !important;
}
/* MUI-outline */
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
)
.MuiOutlinedInput-notchedOutline {
border-color:
#373A41 !important;
}
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
):hover
.MuiOutlinedInput-notchedOutline,
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
).Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color:
#52565E !important;
}
/* Search-ikon / adornments */
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
)
.MuiInputAdornment-root,
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
)
.MuiInputAdornment-root
svg {
color:
#A4A7AE !important;
stroke:
#A4A7AE !important;
}
/* ----------------------------------------------------------
LIGHT MODE
Inga overrides – native/light styr helt.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – WARRANTLISTAN SEARCH BAR BACKGROUND FIX
Tar bort den kvarvarande grå remsan bakom sökrutan.
Den kommer från huvudfilter-containern/wrappern som sträcker
sig längre ned än själva kategori-knapparna. Knapparna har
redan egna mörka surfaces, så containern ska vara transparent.
Endast /warrantlista/* + mm-dark.
Light mode och funktionalitet lämnas orörda.
========================================================== */
/* ----------------------------------------------------------
HUVUDFILTER-CONTAINER – INGEN EGEN BAKGRUND
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
#multi-select-container {
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
border:
0 !important;
}
/* Eventuella interna wrappers får inte skapa en remsa */
html.mm-warrantlista-page.mm-dark
#multi-select-container
> div {
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
}
/* Fånga eventuell native pseudo-surface */
html.mm-warrantlista-page.mm-dark
#multi-select-container::before,
html.mm-warrantlista-page.mm-dark
#multi-select-container::after,
html.mm-warrantlista-page.mm-dark
#multi-select-container
> div::before,
html.mm-warrantlista-page.mm-dark
#multi-select-container
> div::after {
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
border:
0 !important;
}
/* ----------------------------------------------------------
KATEGORIKNAPPARNA BEHÅLLER SIN EGEN SURFACE
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
#multi-select-container
.MultiDimensionalSelectList-button {
background:
#191C20 !important;
background-color:
#191C20 !important;
}
/* ----------------------------------------------------------
SÖKFÄLTET
MUI-root = surface, själva inputen = transparent.
---------------------------------------------------------- */
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
box-shadow:
none !important;
}
html.mm-warrantlista-page.mm-dark
main
.MuiOutlinedInput-root:has(
input[placeholder*="underliggande"]
)
input {
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
}
/* ----------------------------------------------------------
LIGHT MODE
Inga overrides – native/light styr helt.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – SOCIAL TRADING FULL DARK MODE
Scope:
ENDAST /social-trading/* när html.mm-dark är aktiv.
Första testversionen är medvetet färg-/surface-fokuserad:
- page: #0C0E12
- surface: #13161B
- surface 2: #191C20
- hover: #20242A
- border: #2D3036 / #373A41
- primary: #F5F7F6
- body: #CECFD2
- muted: #A4A7AE
Viktigt:
- light mode lämnas helt orört
- ingen width/height/position/layout ändras
- React/native-funktionalitet lämnas orörd
- avatarer, bilder, brandfärger och rött/grönt lämnas orörda
- Trader Spotlight-komponentens layout/funktionalitet behålls;
neutrala färger anpassas i separat fix nedan
========================================================== */
html.mm-social-trading-page.mm-dark,
html.mm-social-trading-page.mm-dark body,
html.mm-social-trading-page.mm-dark main,
html.mm-social-trading-page.mm-dark #content,
html.mm-social-trading-page.mm-dark .site-content,
html.mm-social-trading-page.mm-dark .site-main {
background: #0C0E12 !important;
background-color: #0C0E12 !important;
color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
.hamburger-hide:has(#trader-spotlight-bar) {
background: #0C0E12 !important;
background-color: #0C0E12 !important;
}
html.mm-social-trading-page.mm-dark body
:is(.bg-white,.bg-background,.bg-card,.bg-gray-50,.bg-gray-100,.bg-slate-50,.bg-slate-100,.bg-neutral-50,.bg-neutral-100,.bg-theme-gray-50,.bg-theme-gray-100) {
background: #13161B !important;
background-color: #13161B !important;
}
html.mm-social-trading-page.mm-dark body
:is(.bg-secondary,.bg-muted,.bg-gray-200,.bg-slate-200,.bg-neutral-200) {
background: #191C20 !important;
background-color: #191C20 !important;
}
html.mm-social-trading-page.mm-dark main
:is(h1,h2,h3,h4,h5,h6) {
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark body
:is(.text-black,.text-foreground,.text-gray-800,.text-gray-900,.text-slate-800,.text-slate-900,.text-neutral-800,.text-neutral-900,.text-theme-gray-850,.text-theme-gray-900,.text-theme-gray-950) {
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark body
:is(.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700,.text-slate-400,.text-slate-500,.text-slate-600,.text-neutral-400,.text-neutral-500,.text-muted-foreground,.text-theme-gray-450,.text-theme-gray-500,.text-theme-gray-550,.text-theme-gray-600,.text-theme-gray-700,.text-theme-gray-750) {
color: #A4A7AE !important;
-webkit-text-fill-color: #A4A7AE !important;
}
html.mm-social-trading-page.mm-dark body
:is(.bg-white,.bg-background,.bg-card) :is(p,li) {
color: #CECFD2 !important;
}
html.mm-social-trading-page.mm-dark main a[href="/toplist"],
html.mm-social-trading-page.mm-dark main a[href^="/toplist?"] {
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark main a[href="/toplist"] svg,
html.mm-social-trading-page.mm-dark main a[href^="/toplist?"] svg {
color: #F5F7F6 !important;
stroke: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark body
:is(.border,.border-gray-100,.border-gray-200,.border-gray-300,.border-slate-100,.border-slate-200,.border-neutral-100,.border-neutral-200,.border-theme-gray-100,.border-theme-gray-200,.border-border,.border-input) {
border-color: #2D3036 !important;
}
html.mm-social-trading-page.mm-dark body
:is(hr,.divide-y > :not([hidden]) ~ :not([hidden]),.divide-x > :not([hidden]) ~ :not([hidden])) {
border-color: #2D3036 !important;
}
html.mm-social-trading-page.mm-dark main
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.mm-social-trading-page.mm-dark main textarea,
html.mm-social-trading-page.mm-dark main select {
background: #191C20 !important;
background-color: #191C20 !important;
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
border-color: #373A41 !important;
box-shadow: none !important;
}
html.mm-social-trading-page.mm-dark main input::placeholder,
html.mm-social-trading-page.mm-dark main textarea::placeholder {
color: #85888E !important;
-webkit-text-fill-color: #85888E !important;
opacity: 1 !important;
}
html.mm-social-trading-page.mm-dark main button.bg-background,
html.mm-social-trading-page.mm-dark main button.bg-secondary,
html.mm-social-trading-page.mm-dark main button.bg-muted,
html.mm-social-trading-page.mm-dark main a.bg-background,
html.mm-social-trading-page.mm-dark main a.bg-secondary,
html.mm-social-trading-page.mm-dark main a.bg-muted {
background: #191C20 !important;
background-color: #191C20 !important;
color: #CECFD2 !important;
-webkit-text-fill-color: #CECFD2 !important;
border-color: #373A41 !important;
box-shadow: none !important;
}
html.mm-social-trading-page.mm-dark main button.bg-background:hover,
html.mm-social-trading-page.mm-dark main button.bg-secondary:hover,
html.mm-social-trading-page.mm-dark main button.bg-muted:hover,
html.mm-social-trading-page.mm-dark main a.bg-background:hover,
html.mm-social-trading-page.mm-dark main a.bg-secondary:hover,
html.mm-social-trading-page.mm-dark main a.bg-muted:hover {
background: #20242A !important;
background-color: #20242A !important;
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
border-color: #52565E !important;
}
html.mm-social-trading-page.mm-dark main [role="tablist"] {
border-color: #2D3036 !important;
}
html.mm-social-trading-page.mm-dark main [role="tab"] {
color: #A4A7AE !important;
-webkit-text-fill-color: #A4A7AE !important;
}
html.mm-social-trading-page.mm-dark main [role="tab"][aria-selected="true"],
html.mm-social-trading-page.mm-dark main [role="tab"][data-state="active"] {
background: #191C20 !important;
background-color: #191C20 !important;
color: #F5F7F6 !important;
-webkit-text-fill-color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark body
:is([role="dialog"],[role="menu"],[role="listbox"],[data-radix-popper-content-wrapper] > div) {
color: #F5F7F6;
}
html.mm-social-trading-page.mm-dark body [role="menu"],
html.mm-social-trading-page.mm-dark body [role="listbox"] {
background: #13161B !important;
background-color: #13161B !important;
border-color: #2D3036 !important;
}
html.mm-social-trading-page.mm-dark body [role="dialog"]:is(.bg-white,.bg-background,.bg-card),
html.mm-social-trading-page.mm-dark body [role="dialog"]:is(.bg-gray-50,.bg-gray-100) {
background: #13161B !important;
background-color: #13161B !important;
}
html.mm-social-trading-page.mm-dark main button[role="checkbox"]:not([data-state="checked"]) {
background: #191C20 !important;
background-color: #191C20 !important;
border-color: #373A41 !important;
}
html.mm-social-trading-page.mm-dark main button[role="checkbox"][data-state="checked"] {
background: #F5F7F6 !important;
background-color: #F5F7F6 !important;
color: #111318 !important;
border-color: #F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark body svg.text-muted-foreground {
color: #A4A7AE !important;
stroke: currentColor !important;
}
/* ==========================================================
V41 SAFE – SOCIAL TRADING CONTROLS + SPOTLIGHT FIX
Bygger på faktisk outerHTML från /social-trading/.
Fixar i dark mode:
- "Visa endast ..."-labels = vita
- checkboxar = tydlig vit kontroll
- checked = vit ruta + mörk bock
- info-ikon = ljus/muted
- Filter-knapp = mörk neutral + vit text
- "+"-knapp = vit + mörk text
- Trader Spotlight = dark surface + dark borders
- Topplistan / tomstatus / pilar / Se alla = ljusa
- "avkastning" = muted ljus
Ingen layout, storlek, position eller funktionalitet ändras.
========================================================== */
/* ----------------------------------------------------------
FILTERKONTROLLER – LABELS
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
main
label[for="isFavoriteTrader"],
html.mm-social-trading-page.mm-dark
main
label[for="isFavoritePosition"],
html.mm-social-trading-page.mm-dark
main
label[for="isActive"],
html.mm-social-trading-page.mm-dark
main
label[for="isOnlyTop10Traders"] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
/* ----------------------------------------------------------
FILTERKONTROLLER – CHECKBOXAR
De fyra faktiska filtercheckboxarna identifieras via label.
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoriteTrader"])
button[role="checkbox"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoritePosition"])
button[role="checkbox"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isActive"])
button[role="checkbox"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isOnlyTop10Traders"])
button[role="checkbox"] {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#F5F7F6 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoriteTrader"])
button[role="checkbox"][data-state="checked"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoritePosition"])
button[role="checkbox"][data-state="checked"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isActive"])
button[role="checkbox"][data-state="checked"],
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isOnlyTop10Traders"])
button[role="checkbox"][data-state="checked"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
border-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoriteTrader"])
button[role="checkbox"][data-state="checked"]
svg,
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isFavoritePosition"])
button[role="checkbox"][data-state="checked"]
svg,
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isActive"])
button[role="checkbox"][data-state="checked"]
svg,
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isOnlyTop10Traders"])
button[role="checkbox"][data-state="checked"]
svg {
color:
#111318 !important;
stroke:
#111318 !important;
}
/* Info-ikonen bredvid "Visa endast topp 10" */
html.mm-social-trading-page.mm-dark
main
.flex.space-x-2:has(label[for="isOnlyTop10Traders"])
> svg path {
fill:
#CECFD2 !important;
}
/* ----------------------------------------------------------
FILTER / PLUS-KNAPPAR
---------------------------------------------------------- */
/* Filter */
html.mm-social-trading-page.mm-dark
main
button.bg-secondary[aria-haspopup="dialog"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border:
1px solid
#373A41 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
main
button.bg-secondary[aria-haspopup="dialog"]:hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
html.mm-social-trading-page.mm-dark
main
button.bg-secondary[aria-haspopup="dialog"]
svg {
color:
#F5F7F6 !important;
stroke:
#F5F7F6 !important;
}
/* "+" */
html.mm-social-trading-page.mm-dark
main
button.bg-primary.text-primary-foreground[aria-haspopup="dialog"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
-webkit-text-fill-color:
#111318 !important;
border:
1px solid
#F5F7F6 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
main
button.bg-primary.text-primary-foreground[aria-haspopup="dialog"]:hover {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
border-color:
#FFFFFF !important;
}
/* ----------------------------------------------------------
TRADER SPOTLIGHT – YTTRE BAR
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
.hamburger-hide:has(#trader-spotlight-bar) {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-top-color:
#2D3036 !important;
border-bottom-color:
#2D3036 !important;
}
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar {
color:
#F5F7F6 !important;
}
/* "Topplistan" */
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
span.text-black {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* "avkastning" selector */
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
button[role="combobox"] {
background:
transparent !important;
background-color:
transparent !important;
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
border:
0 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
button[role="combobox"]:hover {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
button[role="combobox"]
svg {
color:
#A4A7AE !important;
stroke:
#A4A7AE !important;
opacity:
1 !important;
}
/* Tomstatus:
"Det finns inga topptraders ..." */
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
p {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/* Vänster/höger-pilar */
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
svg[role="button"] {
color:
#F5F7F6 !important;
stroke:
#F5F7F6 !important;
opacity:
1 !important;
}
/* Se alla */
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
a[href="/toplist"] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
html.mm-social-trading-page.mm-dark
#trader-spotlight-bar
a[href="/toplist"]:hover {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
/* ----------------------------------------------------------
LIGHT MODE
Helt orört – originalet styr.
---------------------------------------------------------- */
/* ==========================================================
V41 SAFE – SOCIAL TRADING DIALOGS + VIEW TOGGLE
Bygger på faktisk outerHTML för:
- + Ny position / + Ny händelse-popover
- Ändra vy: Produkt / Underliggande
- Filtrera Tradingfeed-dialogen
- Position-dialogen
Dark palette:
- page: #0C0E12
- surface: #13161B
- surface 2: #191C20
- hover: #20242A
- border: #2D3036 / #373A41
- primary: #F5F7F6
- body: #CECFD2
- muted: #A4A7AE
Viktigt:
- ENDAST /social-trading/* + mm-dark
- light mode lämnas helt orört
- ingen width/height/position/layout ändras
- Radix/React-funktionalitet lämnas orörd
- rött/grönt och blå primär CTA behålls
========================================================== */
/* ==========================================================
1. + NY POSITION / + NY HÄNDELSE
Radix popover: role="dialog" + bg-popover
========================================================== */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-popover {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#2D3036 !important;
box-shadow:
0 18px 48px rgba(0,0,0,.38) !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-popover
button {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-popover
button:hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
/* ==========================================================
2. ÄNDRA VY – PRODUKT / UNDERLIGGANDE
Identifieras via den faktiska 196px-pill-kontrollen.
========================================================== */
html.mm-social-trading-page.mm-dark
main
div:has(> .bg-background.rounded-full[class*="min-w-[196px]"])
> span {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
main
.bg-background.rounded-full[class*="min-w-[196px]"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
border:
1px solid
#2D3036 !important;
box-shadow:
none !important;
}
/* Aktiv vy */
html.mm-social-trading-page.mm-dark
main
.bg-background.rounded-full[class*="min-w-[196px]"]
button.bg-foreground.text-background {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
-webkit-text-fill-color:
#111318 !important;
}
/* Inaktiv vy */
html.mm-social-trading-page.mm-dark
main
.bg-background.rounded-full[class*="min-w-[196px]"]
button.bg-background.text-foreground {
background:
transparent !important;
background-color:
transparent !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
html.mm-social-trading-page.mm-dark
main
.bg-background.rounded-full[class*="min-w-[196px]"]
button.bg-background.text-foreground:hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
/* Info-ikon bredvid Ändra vy */
html.mm-social-trading-page.mm-dark
main
div:has(> .bg-background.rounded-full[class*="min-w-[196px]"])
> svg path {
fill:
#A4A7AE !important;
}
/* ==========================================================
3. FILTRERA TRADINGFEED
Faktisk modal: bg-background + max-w-[870px]
========================================================== */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"] {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border:
1px solid
#2D3036 !important;
box-shadow:
0 24px 70px rgba(0,0,0,.48) !important;
}
/* Rubrik + labels */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
:is(h2, label) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* Horisontella/vertikala separators */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
.bg-gray-400 {
background:
#2D3036 !important;
background-color:
#2D3036 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[class*="border-l-"],
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[class*="border-t-"] {
border-color:
#2D3036 !important;
}
/* Sökfältet */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[cmdk-root]
> .bg-background.border {
background:
#191C20 !important;
background-color:
#191C20 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[cmdk-input] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
caret-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[cmdk-input]::placeholder {
color:
#85888E !important;
-webkit-text-fill-color:
#85888E !important;
opacity:
1 !important;
}
/* Underliggande-kategorier + radiofilter */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button.bg-secondary {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button.bg-secondary:hover {
background:
#20242A !important;
background-color:
#20242A !important;
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
border-color:
#52565E !important;
}
/* Aktiv radio */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button[role="radio"][data-state="on"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
-webkit-text-fill-color:
#111318 !important;
border-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button[role="radio"][data-state="on"]
svg {
color:
#111318 !important;
stroke:
#111318 !important;
}
/* Produkttyp-yta */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
.bg-gray-50 {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
}
/* Produkttyp-checkboxar */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button[role="checkbox"] {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
border-color:
#F5F7F6 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button[role="checkbox"][data-state="checked"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
border-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button[role="checkbox"][data-state="checked"]
svg {
color:
#111318 !important;
stroke:
#111318 !important;
}
/* Number inputs */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
input[type="number"] {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
input[type="number"]::placeholder {
color:
#85888E !important;
-webkit-text-fill-color:
#85888E !important;
opacity:
1 !important;
}
/* Slider: track */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[role="slider"]
~ input {
color-scheme:
dark;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
span[data-orientation="horizontal"]
> span.bg-gray-400 {
background:
#373A41 !important;
background-color:
#373A41 !important;
}
/* Slider: vald range */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
span[data-orientation="horizontal"]
> span
> span.bg-primary {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
}
/* Slider: thumbs */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[role="slider"] {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
border-color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
[role="slider"]
> span {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* "Rensa" */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
form
button[type="button"].hover\:bg-accent:not(.bg-secondary) {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border:
1px solid
#373A41 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
form
button[type="button"].hover\:bg-accent:not(.bg-secondary):hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
/* "Spara" – behåll blå brandknapp, men säkra vit text */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
button.bg-blue-600 {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
}
/* Close X */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
> button.absolute {
color:
#F5F7F6 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].bg-background[class*="max-w-[870px]"]
> button.absolute
svg {
stroke:
#F5F7F6 !important;
}
/* ==========================================================
4. POSITION-DIALOG
Faktisk modal: bg-gray-25 + max-w-[1358px]
========================================================== */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
color:
#F5F7F6 !important;
border:
1px solid
#2D3036 !important;
box-shadow:
0 24px 70px rgba(0,0,0,.48) !important;
}
/* Alla kort i Position-dialogen */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.bg-card {
background:
#13161B !important;
background-color:
#13161B !important;
color:
#F5F7F6 !important;
}
/* Event-header / andra ljusa neutrala surfaces */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
:is(
.bg-gray-100,
.bg-white,
.bg-background
) {
background:
#191C20 !important;
background-color:
#191C20 !important;
}
/* Muted risk-/sekundärytor */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.bg-muted\/20 {
background:
rgba(255,255,255,.045) !important;
}
/* Primär text */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
:is(
.text-black,
.text-card-foreground,
.text-foreground
) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* Sekundärtext */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
:is(
.text-gray-600,
.text-muted-foreground,
.text-muted
) {
color:
#A4A7AE !important;
-webkit-text-fill-color:
#A4A7AE !important;
}
/* text-black/70 */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.text-black\/70 {
color:
#CECFD2 !important;
-webkit-text-fill-color:
#CECFD2 !important;
}
/* Dividers */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.border-gray-400 {
border-color:
#2D3036 !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.bg-gray-400 {
background:
#2D3036 !important;
background-color:
#2D3036 !important;
}
/* Små svarta separators/dots blir muted ljusa */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.bg-black {
background:
#A4A7AE !important;
background-color:
#A4A7AE !important;
}
/* Neutrala sekundärknappar */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
button.bg-secondary {
background:
#191C20 !important;
background-color:
#191C20 !important;
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#373A41 !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
button.bg-secondary:hover {
background:
#20242A !important;
background-color:
#20242A !important;
border-color:
#52565E !important;
}
/* Statusbadge "Entry":
behåll semantiken men gör den till neutral Marketmate-active */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.bg-primary.text-primary-foreground {
background:
#F5F7F6 !important;
background-color:
#F5F7F6 !important;
color:
#111318 !important;
-webkit-text-fill-color:
#111318 !important;
}
/* Recharts – axeltext */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.recharts-cartesian-axis-tick-value {
fill:
#A4A7AE !important;
color:
#A4A7AE !important;
}
/* Recharts – grid */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.recharts-cartesian-grid
line {
stroke:
#2D3036 !important;
}
/* Recharts – neutrala staplar */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.recharts-bar-rectangle
path,
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
.recharts-bar-rectangles
> path {
fill:
#20242A !important;
}
/* Info-ikoner i Position-dialogen */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
svg[data-tooltip-id]
path {
fill:
#A4A7AE !important;
}
/* Stäng-knapp / övriga neutrala ikonknappar följer currentColor */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
button {
color:
inherit;
}
/* Rött / grönt lämnas uttryckligen orört */
html.mm-social-trading-page.mm-dark
body
[role="dialog"].mm-position-dialog
:is(.text-red-600, .text-green-600) {
-webkit-text-fill-color:
currentColor !important;
}
/* ==========================================================
LIGHT MODE
Inga regler här – native/light får styra helt.
========================================================== */
/* ==========================================================
V41 SAFE – SOCIAL TRADING TABLE BOTTOM EDGE FIX
Fixar den ljusa/vita kanten som kan visas längst ned på
den horisontellt scrollbara Tradingfeed-tabellen i dark mode.
Orsak:
native scroll-/edge-effekt är fortfarande anpassad för
light mode och kan därför ge en vit track/fade/shadow.
Dark mode:
- scrollområde: #13161B
- scrollbar track: #13161B
- scrollbar thumb: #373A41
- ingen ljus box-shadow på scrollområdet
Ingen höjd, bredd, position eller tabellfunktion ändras.
========================================================== */
/* ----------------------------------------------------------
HORIZONTAL / GENERAL SCROLL AREAS
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
) {
background-color:
#13161B !important;
scrollbar-color:
#373A41 #13161B !important;
box-shadow:
none !important;
}
/* Chromium / Safari */
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)::-webkit-scrollbar-track {
background:
#13161B !important;
background-color:
#13161B !important;
box-shadow:
none !important;
}
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)::-webkit-scrollbar-thumb {
background:
#373A41 !important;
background-color:
#373A41 !important;
border-color:
#13161B !important;
box-shadow:
none !important;
}
/* ----------------------------------------------------------
LIGHT-MODE GRADIENT / EDGE-FADES
Nativekomponenten kan använda en bottom-gradient som
overflow-indikator. Endast bottom-positionerade gradienter
inne i scrollområdet fångas här.
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)
[class*="bottom-0"][class*="gradient"],
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)
[class*="bottom-0"][class*="from-white"],
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)
[class*="bottom-0"][class*="to-white"],
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)
[class*="bottom-0"][class*="via-white"] {
background:
linear-gradient(
to bottom,
rgba(19,22,27,0),
#13161B
) !important;
background-color:
transparent !important;
box-shadow:
none !important;
}
/* ----------------------------------------------------------
INLINE LIGHT GRADIENT FALLBACK
Begränsad till bottom-positionerade element inne i
scrollområdet för att inte påverka övriga Social Trading-kort.
---------------------------------------------------------- */
html.mm-social-trading-page.mm-dark
main
:is(
.overflow-x-auto,
.overflow-auto,
[class*="overflow-x-auto"],
[class*="overflow-x-scroll"]
)
[class*="bottom-0"][style*="linear-gradient"] {
background-image:
linear-gradient(
to bottom,
rgba(19,22,27,0),
#13161B
) !important;
box-shadow:
none !important;
}
/* ==========================================================
V41 SAFE – DESKTOP MENU: PORTFÖLJER 2.0 VISUAL MATCH
Syfte:
- vår egen desktopmeny ska visuellt följa den native
Portföljer 2.0-menyn
- MENYDATA / LÄNKAR ändras INTE
- de sex egna Portföljer-länkarna behålls
- /portfoljer och /portfoljer/* fortsätter använda native 2.0
- mobilmenyn lämnas helt orörd
Portföljer-källans desktopmått som redan används:
- logo 153 x 26
- trigger h-10 = 40px
- px-4 = 16px
- text-sm = 14px
- font-medium = 500
- rounded-md = 6px
- chevron size-3 = 12px
Den här sista matchningen fokuserar därför på dropdownarnas
proportioner/layout, där vår meny fortfarande skilde sig.
========================================================== */
@media (min-width: 1280px) {
/* ------------------------------------------------------
DROPDOWN – GEMENSAM NATIVE 2.0-YTA
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-dropdown {
top:
calc(100% + 4px) !important;
padding:
16px !important;
border-radius:
6px !important;
box-shadow:
none !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-dropdown {
background:
#111418 !important;
background-color:
#111418 !important;
border:
1px solid
#373A41 !important;
}
html.mm-v26-header-enabled:not(.mm-dark)
.mm-v24-dropdown {
background:
#FFFFFF !important;
background-color:
#FFFFFF !important;
border:
1px solid
#E1E4E8 !important;
}
/* Hover-bryggan behålls, men samma lilla avstånd som native */
html.mm-v26-header-enabled
.mm-v24-dropdown::before {
top:
-6px !important;
height:
6px !important;
}
/* ------------------------------------------------------
BESKRIVANDE MENYER
Native-menyn använder olika naturliga bredder beroende
på innehåll. Därför ska inte alla våra dropdowns pressas
till samma 480px-bredd.
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact) {
max-width:
calc(100vw - 32px) !important;
}
/* Warrantlistan */
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="warrantlistan"]
> .mm-v24-dropdown {
width:
440px !important;
}
/*
* Portföljer:
* native Portföljer har normalt ingen dropdown här,
* men VÅRA sex egna länkar ska ligga kvar.
* De får endast samma visuella språk.
*/
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="portfoljer"]
> .mm-v24-dropdown {
width:
510px !important;
max-width:
min(510px, calc(100vw - 32px)) !important;
}
/* Social Trading – native har den luftigare beskrivningsytan */
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="social"]
> .mm-v24-dropdown {
width:
510px !important;
}
/* Redaktionen – native är tydligt smalare */
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="redaktionen"]
> .mm-v24-dropdown {
width:
400px !important;
}
/* Beskrivande länkar – native padding/rytm */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link {
padding:
10px 12px !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link
+ .mm-v24-drop-link {
margin-top:
2px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-title {
font-size:
14px !important;
line-height:
20px !important;
font-weight:
600 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-desc {
margin-top:
3px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
400 !important;
}
/* ------------------------------------------------------
BÖRSKURSER / BÖRSEN IDAG / UTBILDNING
Portföljer 2.0 visar dessa som en smal, ENKOLUMNIG lista.
Vår tidigare tvåkolumnslayout tas därför bort.
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-dropdown.mm-compact {
width:
340px !important;
max-width:
min(340px, calc(100vw - 32px)) !important;
padding:
12px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid {
grid-template-columns:
minmax(0, 1fr) !important;
gap:
0 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-link {
min-height:
40px !important;
display:
flex !important;
align-items:
center !important;
padding:
0 12px !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-title {
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
/* ------------------------------------------------------
TRIGGERS – exakt native öppet/aktivt uttryck
------------------------------------------------------ */
html.mm-v26-header-enabled
.mm-v24-nav-main {
height:
40px !important;
min-height:
40px !important;
padding:
0 16px !important;
gap:
4px !important;
border-radius:
6px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item:hover
> .mm-v24-nav-main,
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item.mm-open
> .mm-v24-nav-main,
html.mm-v26-header-enabled.mm-dark
.mm-v24-nav-item.mm-active
> .mm-v24-nav-main {
background:
#2A2928 !important;
color:
#FFFFFF !important;
}
html.mm-v26-header-enabled
.mm-v24-chevron,
html.mm-v26-header-enabled
.mm-v24-chevron
svg {
width:
12px !important;
height:
12px !important;
}
}
/* ==========================================================
V41 SAFE – DESKTOP DROPDOWN ALIGNMENT
Börsen idag + Utbildning
De ska öppnas direkt UNDER sin egen trigger, precis som
Redaktionen/Börskurser, i stället för att högerjusteras
åt vänster från triggerns högra kant.
Endast webb/desktop.
Mobilmenyn påverkas inte.
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="borsen"]
> .mm-v24-dropdown,
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="utbildning"]
> .mm-v24-dropdown {
left:
0 !important;
right:
auto !important;
}
}
/* ==========================================================
V41 SAFE – VIDEO ARCHIVE / SINGLE VIDEO DARKMODE
Gäller ENDAST /videos och allt under /videos/.
Löser äldre video-template-delar som fortfarande har
hårdkodade ljusa utility-färger.
Ingen funktionalitet, storlek eller position ändras.
========================================================== */
/* ----------------------------------------------------------
REKOMMENDERAT-SEKTION / LJUS GAMMAL SEKTION
Exakt wrapper från video-template:
.bg-theme-instruments-color-2
---------------------------------------------------------- */
html.mm-video-route.mm-dark
.bg-theme-instruments-color-2 {
background:
#0C0E12 !important;
background-color:
#0C0E12 !important;
color:
#F5F7F6 !important;
}
/* Rubriker inne i den gamla ljusa sektionen */
html.mm-video-route.mm-dark
.bg-theme-instruments-color-2
:is(
h1,
h2,
h3,
h4,
h5,
h6
) {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
}
/* ----------------------------------------------------------
VIDEOARKIV – PAGINERING
Exempel:
/videos/page/2/
---------------------------------------------------------- */
html.mm-video-route.mm-dark
a[href*="/videos/page/"] {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#45484F !important;
background:
transparent !important;
background-color:
transparent !important;
}
html.mm-video-route.mm-dark
a[href*="/videos/page/"]:hover {
color:
#FFFFFF !important;
-webkit-text-fill-color:
#FFFFFF !important;
border-color:
#737780 !important;
background:
#191C20 !important;
background-color:
#191C20 !important;
}
html.mm-video-route.mm-dark
a[href*="/videos/page/"]
svg,
html.mm-video-route.mm-dark
a[href*="/videos/page/"]
svg
path {
color:
currentColor !important;
fill:
currentColor !important;
}
/* Om första/sista arkivsidan använder /videos/ som pagination-länk */
html.mm-video-route.mm-dark
a[href="/videos/"].text-theme-gray-900,
html.mm-video-route.mm-dark
a[href="/videos/"].text-theme-gray-900 {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
border-color:
#45484F !important;
}
/* ==========================================================
V41 SAFE – OM OSS: RUBRIK I DARK MODE
Exempel:
Hur allt började
Endast /om-oss/ och endast dark mode.
Inline-färgen skrivs över till svart enligt önskat utseende.
========================================================== */
html.mm-om-oss-page.mm-dark
.wp-block-heading.has-text-color[style*="color:#5f5099"],
html.mm-om-oss-page.mm-dark
.wp-block-heading.has-text-color[style*="color: #5f5099"] {
color:
#000000 !important;
-webkit-text-fill-color:
#000000 !important;
opacity:
1 !important;
}
/* ==========================================================
V41 SAFE – FORMULÄR: VITA FÄLTRUBRIKER I DARK MODE
Gäller formulär/tack-sidorna vi lagt in i nya designen.
Exempel:
- Förnamn och efternamn
- E-postadress
- Telefonnummer
- Ålder
Endast rubrik/label-färg ändras.
Beskrivningstext, inputs och funktionalitet lämnas orörda.
========================================================== */
html.mm-form-page.mm-dark
main form label,
html.mm-form-page.mm-dark
main form legend,
html.mm-form-page.mm-dark
main form .gfield_label,
html.mm-form-page.mm-dark
main form .gform-field-label,
html.mm-form-page.mm-dark
main form .wpforms-field-label,
html.mm-form-page.mm-dark
main form .forminator-label {
color:
#F5F7F6 !important;
-webkit-text-fill-color:
#F5F7F6 !important;
opacity:
1 !important;
}
/* Obligatorisk-markering får fortsätta vara röd */
html.mm-form-page.mm-dark
main form
:is(
.gfield_required,
.gfield_required_text,
.wpforms-required-label,
.forminator-required
) {
color:
#FF3B4F !important;
-webkit-text-fill-color:
#FF3B4F !important;
}
/* ==========================================================
V41 SAFE – DESKTOP MENU SPACING MATCH
Finjustering mot native Portföljer 2.0.
Viktigt:
- top-level triggerstorleken lämnas på native 40px / 14px
- dropdownbredden 340px lämnas orörd
- endast den vertikala rytmen i de kompakta dropdownarna
stramas åt
- inga länkar tas bort
- mobil påverkas inte
Gäller främst:
Börskurser / Börsen idag / Utbildning
========================================================== */
@media (min-width: 1280px) {
html.mm-v26-header-enabled
.mm-v24-dropdown.mm-compact {
padding:
8px 10px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid {
gap:
0 !important;
row-gap:
0 !important;
column-gap:
0 !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-link {
height:
36px !important;
min-height:
36px !important;
max-height:
36px !important;
margin:
0 !important;
padding:
0 10px !important;
box-sizing:
border-box !important;
line-height:
20px !important;
}
html.mm-v26-header-enabled
.mm-v24-drop-grid
.mm-v24-drop-title {
margin:
0 !important;
padding:
0 !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
}
}
/* ==========================================================
V41 SAFE – DESKTOP DESCRIPTIVE DROPDOWN EXACT TUNE
Finjustering mot native Portföljer 2.0 utifrån jämförelsen.
Viktigt:
- TOP-LEVEL lämnas exakt på native:
40px höjd / 14px / 500 / 16px sidpadding
- endast BESKRIVANDE dropdowns justeras
- kompaktmenyerna Börskurser/Börsen idag/Utbildning lämnas
på tidigare fungerande mått
- mobil påverkas inte
- länkar/funktionalitet ändras inte
Justering:
- Redaktionen: 340px istället för 400px
- mindre ytterpadding
- rubrik 13px
- beskrivning 13px / 19px
- tätare vertikal rytm
========================================================== */
@media (min-width: 1280px) {
/* Beskrivande dropdowns får native-lik kompakt innerkant */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact) {
padding:
8px !important;
}
/* Redaktionen matchar native-proportionen */
html.mm-v26-header-enabled
.mm-v24-nav-item[data-mm-key="redaktionen"]
> .mm-v24-dropdown {
width:
340px !important;
max-width:
min(340px, calc(100vw - 32px)) !important;
}
/* Tätare länkrader */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link {
padding:
8px !important;
margin:
0 !important;
border-radius:
6px !important;
}
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-link
+ .mm-v24-drop-link {
margin-top:
0 !important;
}
/* Rubriker ett visuellt steg mindre */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-title {
margin:
0 !important;
padding:
0 !important;
font-size:
13px !important;
line-height:
18px !important;
font-weight:
600 !important;
}
/* Beskrivning ett steg mindre + tätare radavstånd */
html.mm-v26-header-enabled
.mm-v24-dropdown:not(.mm-compact)
.mm-v24-drop-desc {
margin-top:
2px !important;
font-size:
13px !important;
line-height:
19px !important;
font-weight:
400 !important;
}
/*
* TOP-LEVEL:
* explicita skyddsregler så ingen senare CSS råkar
* göra huvudmenyn mindre än native 2.0.
*/
html.mm-v26-header-enabled
.mm-v24-nav-main {
height:
40px !important;
min-height:
40px !important;
padding:
0 16px !important;
font-size:
14px !important;
line-height:
20px !important;
font-weight:
500 !important;
border-radius:
6px !important;
}
}