Toggle search
Toggle menu
7
27
38
5.2K
Sanarchive
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Main Page/styles.css: Difference between revisions

Template page
More languages
More actions
[checked revision][checked revision]
← Older edit
undoPumpkin (talk | contribs)
Bureaucrats, Check users, Interface administrators, steward, Suppressors, Administrators, Temporary account IP viewers
778 edits
No edit summary
Tag: Reverted
No edit summary
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* =========================================
/* ==============================================
  MAIN PAGE BASE
  FLEX KUTULAR VE BAŞLIKLAR
========================================= */
   ============================================== */
 
.mp-flex {
.frame-container {
  display: flex;
width: 100%;
  gap: 1rem;
display: flex;
  flex-wrap: wrap;
justify-content: center;
}
 
.col-12 {
width: 100%;
}
 
.col-9 {
width: 90%;
max-width: 900px;
}
 
/* =========================================
   HEADER / HERO
========================================= */
 
.header-part {
text-align: center;
font-size: 2.3em;
font-weight: 600;
margin: 1.4em 0 0.6em;
line-height: 1.2;
}
 
.header-pics {
margin: 0 0.25em;
display: inline-flex;
align-items: center;
gap: 0.3em;
}
 
.homepage-logo {
font-size: 0.85em;
font-weight: 700;
}
 
/* =========================================
  SEARCH BAR (PROLEWIKI STYLE)
========================================= */
 
.search-bar {
display: flex;
justify-content: center;
margin-bottom: 1.2em;
}
 
.homepage-search {
display: flex;
align-items: center;
gap: 10px;
background-color: #f3f5f7;
border: 1px solid #d5dbe0;
border-radius: 999px;
padding: 14px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
 
.homepage-search-input {
border: none;
background: transparent;
outline: none;
font-size: 1.05em;
width: 100%;
min-width: 120px;
}
}


.search-icon-homepage img {
.mp-column {
vertical-align: middle;
  flex: 1 1 30%;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  background-color: #fff;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
}
}


.search-shortcut {
.mp-column:hover {
background-color: #e0e6eb;
  transform: translateY(-5px);
border: 1px solid #d5dbe0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
padding: 3px 6px;
border-radius: 4px;
font-size: 0.85em;
color: #444;
}
 
/* =========================================
  HERO STATS
========================================= */
 
.hero-stats {
text-align: center;
font-size: 0.9em;
color: #555;
margin-bottom: 1.8em;
}
 
/* =========================================
  MAIN PAGE BOXES (Wikipedia base)
========================================= */
 
.mp-box {
border: 1px solid #aaa;
padding: 0 0.6em 0.6em;
margin-top: 6px;
}
}


.mp-h2 {
.mp-h2 {
border: 1px solid #aaa;
  padding: 0.5rem 1rem;
margin: 0.6em 0;
  border-radius: 8px;
padding: 0.25em 0.5em;
  color: #fff;
font-size: 120%;
  margin-bottom: 0.5rem;
font-weight: bold;
  transition: background-color 0.3s;
}
 
.mp-later {
font-size: 85%;
font-weight: normal;
}
 
/* =========================================
  FLEX LAYOUT
========================================= */
 
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
 
#mp-left {
flex: 1 1 55%;
margin-right: 3px;
}
 
#mp-right {
flex: 1 1 45%;
margin-left: 3px;
}
}
 
/* =========================================
  CLEAR FLOAT FIX
========================================= */
 
.mp-contains-float::after {
content: "";
display: block;
clear: both;
}
 
/* =========================================
  COLOR SCHEME (LIGHT)
========================================= */
 
#mp-banner {
background-color: #fffaf5;
border-color: #f2e0ce;
}
 
#mp-left {
background-color: #f5fffa;
border-color: #cef2e0;
}
 
#mp-left .mp-h2 {
background-color: #cef2e0;
border-color: #a3bfb1;
}
 
#mp-right {
background-color: #f5faff;
border-color: #cedff2;
}
 
#mp-right .mp-h2 {
background-color: #cedff2;
border-color: #a3b0bf;
}
 
#mp-middle {
background-color: #fff5fa;
border-color: #f2cedd;
}
 
#mp-middle .mp-h2 {
background-color: #f2cedd;
border-color: #bfa3af;
}
 
#mp-lower {
background-color: #faf5ff;
border-color: #ddcef2;
}
}


#mp-lower .mp-h2 {
/* Başlık renkleri */
background-color: #ddcef2;
#mp-left .mp-h2   { background-color: #e7033f; }
border-color: #afa3bf;
#mp-middle .mp-h2 { background-color: #0b1e1c; }
}
#mp-right .mp-h2  { background-color: #082849; }


#mp-bottom {
/* Responsive mobil */
border-color: #e2e2e2;
@media (max-width: 875px) {
  .mp-column { flex: 1 1 100%; }
}
}


#mp-bottom .mp-h2 {
/* ==============================================
background-color: #eee;
  NIGHT MODE - CLIENTPREF
border-color: #ddd;
  ============================================== */
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; }
  NIGHT MODE (MediaWiki)
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; }


html.skin-theme-clientpref-night .homepage-search {
/* Hover efektleri night modda */
background-color: #1f2328;
html.skin-theme-clientpref-night .mp-column:hover {
border-color: #3a3f45;
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
}


html.skin-theme-clientpref-night .homepage-search-input {
/* ==============================================
color: #ddd;
   NIGHT MODE - OS PREFERENCES
}
  ============================================== */
 
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-night .search-shortcut {
  html.skin-theme-clientpref-os .mp-column {
background-color: #2c3136;
    background-color: #111;
border-color: #444;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
color: #bbb;
  }
}
 
html.skin-theme-clientpref-night .hero-stats {
color: #bbb;
}
 
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
 
html.skin-theme-clientpref-night #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
 
html.skin-theme-clientpref-night #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
 
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
 
/* =========================================
   MOBILE FIXES
========================================= */
 
@media (max-width: 600px) {
.header-part {
font-size: 1.7em;
}


.homepage-search {
  html.skin-theme-clientpref-os #mp-left .mp-h2  { background-color: #104437; border-color: #2f4d41; }
padding: 12px 16px;
  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; }


.search-shortcut,
  html.skin-theme-clientpref-os .mp-column:hover {
.homepage-search small {
    transform: translateY(-5px);
display: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
  }
}
}

Latest revision as of 18:59, 1 February 2026

/* ==============================================
   FLEX KUTULAR VE BAŞLIKLAR
   ============================================== */
.mp-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mp-column {
  flex: 1 1 30%;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  background-color: #fff;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
}

.mp-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.mp-h2 {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 0.5rem;
  transition: background-color 0.3s;
}

/* Başlık renkleri */
#mp-left .mp-h2   { background-color: #e7033f; }
#mp-middle .mp-h2 { background-color: #0b1e1c; }
#mp-right .mp-h2  { background-color: #082849; }

/* Responsive mobil */
@media (max-width: 875px) {
  .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);
  }
}
Retrieved from "https://en.sanarsiv.org/index.php?title=Template:Main_Page/styles.css&oldid=6202"
Last modified
This page was last edited on 1 February 2026, at 18:59.