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);
  }
}
}