Template:Main Page/styles.css: Difference between revisions
| [checked revision] | [checked revision] |
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ============================================== | |||
FLEX KUTULAR VE BAŞLIKLAR | |||
============================================== */ | |||
.mp-flex { | .mp-flex { | ||
display: flex; | display: flex; | ||
| Line 11: | Line 14: | ||
box-shadow: 0 3px 8px rgba(0,0,0,0.1); | box-shadow: 0 3px 8px rgba(0,0,0,0.1); | ||
background-color: #fff; | background-color: #fff; | ||
transition: transform 0.2s, box-shadow 0.2s; | transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s; | ||
} | } | ||
| Line 27: | Line 30: | ||
} | } | ||
#mp-left .mp-h2 { background-color: #e7033f; } | /* Başlık renkleri */ | ||
#mp-left .mp-h2 { background-color: #e7033f; } | |||
#mp-middle .mp-h2 { background-color: #0b1e1c; } | #mp-middle .mp-h2 { background-color: #0b1e1c; } | ||
#mp-right .mp-h2 { background-color: #082849; } | #mp-right .mp-h2 { background-color: #082849; } | ||
/* Responsive mobil */ | |||
@media (max-width: 875px) { | @media (max-width: 875px) { | ||
.mp-column { flex: 1 1 100%; } | .mp-column { flex: 1 1 100%; } | ||
} | |||
/* ============================================== | |||
NIGHT MODE - CLIENTPREF | |||
============================================== */ | |||
html.skin-theme-clientpref-night .mp-column { | |||
background-color: #111; | |||
box-shadow: 0 3px 8px rgba(0,0,0,0.4); | |||
} | |||
html.skin-theme-clientpref-night #mp-left .mp-h2 { background-color: #104437; border-color: #2f4d41; } | |||
html.skin-theme-clientpref-night #mp-middle .mp-h2 { background-color: #882c43; border-color: #926c80; } | |||
html.skin-theme-clientpref-night #mp-right .mp-h2 { background-color: #082849; border-color: #a3b0bf; } | |||
/* Hover efektleri night modda */ | |||
html.skin-theme-clientpref-night .mp-column:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 6px 16px rgba(0,0,0,0.6); | |||
} | |||
/* ============================================== | |||
NIGHT MODE - OS PREFERENCES | |||
============================================== */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .mp-column { | |||
background-color: #111; | |||
box-shadow: 0 3px 8px rgba(0,0,0,0.4); | |||
} | |||
html.skin-theme-clientpref-os #mp-left .mp-h2 { background-color: #104437; border-color: #2f4d41; } | |||
html.skin-theme-clientpref-os #mp-middle .mp-h2 { background-color: #882c43; border-color: #926c80; } | |||
html.skin-theme-clientpref-os #mp-right .mp-h2 { background-color: #082849; border-color: #a3b0bf; } | |||
html.skin-theme-clientpref-os .mp-column:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 6px 16px rgba(0,0,0,0.6); | |||
} | |||
} | } | ||