MediaWiki:Timeless.css
Not: Yayımladıktan sonra değişiklikleri görmeniz için tarayıcınızın önbelleğini temizlemeniz gerekebilir.
- Firefox / Safari: Shift tuşuna basılıyken Yeniden Yükle'ye tıklayın ya da Ctrl-F5 ya da Ctrl-R tıklayın (Mac için ⌘-R)
- Google Chrome: Ctrl-Shift-R'ye basın. (Mac için ⌘-Shift-R)
- Edge: Ctrl basılıyken Yenile'ye tıklayın ya da Ctrl-F5'e basın.
/* değişiklik son */
/* 🌐 KULLANILMAYAN DİL SEÇENEKLERİNİ VE MENÜLERİNİ TAMAMEN GİZLE */
#p-lang,
.mw-interlanguage-selector,
.uls-trigger,
#uls-settings-trigger {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* ==========================================================================
🖼️ SEÇİCİLERİ TEMİZLENMİŞ KUSURSUZ MODERN RESİM KARTI TASARIMI
========================================================================== */
/* ⚡ LCP DOSTU SİSTEM FONTUNA GEÇİŞ KODU */
body, h1, h2, h3, h4, h5, h6, .mw-body, #mw-content-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* 1. Dış Kart: Resim ve Yazıyı Birlikte Kapsayan Gölgeli Beyaz Modern Kart */
.mw-body-content figure[typeof*="mw:File/Thumb"],
figure[typeof*="mw:File/Thumb"],
.thumbinner {
border: none !important;
background: #ffffff !important;
background-color: #ffffff !important;
border-radius: 14px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* Gölgeyi doğrudan dış karta verdik */
padding: 12px !important;
box-sizing: border-box !important;
}
/* 2. İç Resim: Etrafındaki Çizgileri Sil ve Hafif Oval Köşeli Yap */
.mw-body-content figure[typeof*="mw:File/Thumb"] > a > img,
.mw-body-content figure[typeof*="mw:File/Thumb"] img,
.thumbimage {
border: none !important;
border-radius: 8px !important;
box-shadow: none !important; /* Resmin kendi gölgesini kaldırdık */
}
/* 3. Alt Yazı Alanı: Gri Arka Planı ve Çizgileri Tamamen Sil, Yazıyı Kalınlaştır */
.mw-body-content figcaption,
figcaption,
.content div.thumbcaption,
#mw-content-text div.thumbcaption,
div.thumbcaption {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-top: none !important; /* Alt şeridi ayıran çizgiyi kesin siler */
box-shadow: none !important;
font-size: 14px !important;
font-weight: 700 !important; /* 🌟 Yazıyı tamamen kalın (Bold) yapar */
color: #2d3748 !important; /* Okunabilir, şık koyu füme/siyah tonu */
text-align: center !important; /* Yazıyı tam ortalar */
padding: 12px 0 2px 0 !important;
margin: 0 !important;
}
/* 4. Amblem Kazıyıcı: Büyütme İkonunu ve Tüm Sahte (::after) Kalıntılarını Yok Et */
.mw-body-content figure[typeof*="mw:File/Thumb"] > .mw-file-description::after,
.mw-body-content figure[typeof*="mw:File/Thumb"] > .mw-file-magnify::after,
.mw-file-description::after,
.mw-file-magnify::after,
figcaption::before,
figcaption::after,
.mw-file-magnify,
a.internal.magnify,
span.magnify {
content: none !important; /* İkon içeriğini tamamen boşaltır */
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
background: none !important;
background-image: none !important;
}
/* =========================================================
1. GENEL
Tüm ekranlarda ortak
========================================================= */
@media (min-width: 1600px) {
/* 1. Üst bar, şeritler ve arka planların ekrana %100 tam yayılmasını sağla (Yırtılmayı önler) */
#mw-header-container,
#mw-footer-container,
#mw-content-container,
.mw-header {
max-width: 100% !important;
width: 100% !important;
}
/* 2. Sitenizin ana iskeletini (sol menü ve ders içeriklerini) 1600px'de sabitle ve ortala */
#mw-content-block {
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 3. Üst bardaki logonuzu ve arama kutusunu alt içerik sınırıyla tam olarak hizala */
.ts-inner {
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
padding-left: 1em !important;
padding-right: 1em !important;
}
}
/* ==========================================================================
FENPEDIA YAN BAR (SIDEBAR) YAZI STİLİ VE DÜZENLEMELERİ
========================================================================== */
/* 1. ANA BAŞLIKLAR (SİTE YÖNETİM LİNKLERİ, Site Listeleme, Sınıfını Seç) */
.sidebar-chunk h2 {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 13px !important; /* Başlık boyutu */
font-weight: 700 !important; /* Başlık kalınlığı (700 = Bold) */
color: #2d3748 !important; /* Başlık rengi (Koyu gri/siyah) */
text-transform: uppercase; /* Harflerin hepsini büyük yapar */
letter-spacing: 0.5px !important; /* Harf arası boşluk */
padding-bottom: 6px !important; /* Alt çizgi ile arasındaki mesafe */
border-bottom: 1px solid #c8ccd1 !important; /* Başlığın altındaki ince çizgi */
margin-bottom: 8px !important; /* Başlık ile altındaki linkler arası boşluk */
}
/* 2. ALT LİNK YAZILARI (Bilgilendirme, Tüm Sorular, 5. Sınıf Sayfaları vb.) */
.sidebar-chunk ul li a {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 14px !important; /* Linklerin yazı boyutu */
font-weight: 400 !important; /* Yazı kalınlığı (400 = Normal) */
color: #4a5568 !important; /* Linklerin varsayılan rengi (Yumuşak siyah) */
line-height: 1.8 !important; /* Satır yüksekliği (Linklerin alt alta sıkışmasını önler) */
transition: color 0.2s ease !important; /* Renk geçiş yumuşaklığı */
}
/* 3. LİNKLERİN ÜZERİNE GELİNDİĞİNDEKİ (HOVER) DURUMU */
.sidebar-chunk ul li a:hover {
color: #36c !important; /* Üzerine gelince alacağı renk (Logonuzun mavisi) */
text-decoration: none !important; /* Altındaki varsayılan çizgiyi kaldırır */
font-weight: 500 !important; /* Üzerine gelince yazıyı hafifçe belirginleştirir */
}
/* 4. LİSTE ÖGELERİ ARASI BOŞLUK */
.sidebar-chunk ul li {
margin-bottom: -4px !important; /* Her link satırının altındaki ekstra boşluk */
}
/* ==========================================================================
FENPEDIA YAN BAR BAŞLIKLARINI EŞİTLEME VE TABLET BAŞLIKLARINI KORUMA
========================================================================== */
/* 1. Yan barda görünen TÜM ana başlıkları eşit ve büyük yapar */
.sidebar-chunk h2,
.sidebar-chunk h3,
.mw-portlet h3 {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 12px !important; /* Başlık boyutu */
font-weight: 700 !important; /* Başlık kalınlığı (Bold) */
color: #2d3748 !important; /* Başlık rengi */
text-transform: uppercase !important; /* Harfleri büyük yapar */
letter-spacing: 0.5px !important; /* Harf arası boşluk */
padding-bottom: 6px !important; /* Alt çizgi ile mesafe */
border-bottom: none !important; /* Alt çizgiyi tamamen kaldırır */
margin-bottom: 8px !important; /* Linkler ile arasındaki boşluk */
}
/* Logo metninin soluna favicon ekleme */
#p-logo-text a::before {
content: "";
display: inline-block;
width: 24px; /* İkon genişliği */
height: 24px; /* İkon yüksekliği */
margin-right: 10px; /* Logo yazısı ile arasındaki boşluk */
background-image: url('/favicon.ico'); /* Sitenizin ana dizinindeki ikon */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* İkon ile yazının dikeyde tam ortalanmasını sağlama */
#p-logo-text a {
display: flex !important;
align-items: center;
}
/*Kapanan kısımlar*/
#p-logo, #ca-talk, #ca-history, #firstHeading, #site-tools, #helplink, #p-cactions, #ca-viewsource {
display: none !important;
}
/* ==========================================================================
KAYNAĞI DÜZENLE BUTONUNU KORUYARAK SADECE ANASAYFA SEKmesini GİZLEME
========================================================================== */
/* Sol taraftaki "Anasayfa" sekmesini ve tüm ilgili link yapılarını tamamen kapatır */
#p-namespaces,
#ca-nstab-main,
.mw-body-header #p-namespaces-list {
display: none !important;
}
/*cat.svg arka plandan kaldırır*/
#mw-content-container { background-image: none; }
/* =========================================================
2. BÜYÜK EKRAN
1340px ve üzeri
========================================================= */
@media (min-width: 1340px) {
/* Sağ menüyü sol menünün altına taşıTimeless içerik / sağ bar düzeni */
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
/* Üst renk çubuğunu sayfa sütunlarıyla hizala */
.ts-inner {
padding: 0 0 0 1em;
}
/* yan barda gölgeleme */
#mw-content {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
#mw-site-navigation .sidebar-chunk {
background-color: #ffffff !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
}
/* =========================================================
3. MASAÜSTÜ
Timeless: 1100px - 1339px
========================================================= */
@media (min-width: 1100px) and (max-width: 1339px) {
/* yan barda gölgeleme */
#mw-content {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
#mw-site-navigation .sidebar-chunk {
background-color: #ffffff !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
}
/* =========================================================
4. TABLET
Timeless: 851px - 1099px
========================================================= */
@media (min-width: 851px) and (max-width: 1099px) {
/* Tablet görünümünde eklenen favicong görselini gizle */
#p-logo-text a::before {
display: none !important;
}
/* Hizalama stilini tablet için varsayılana döndür */
#p-logo-text a {
display: block !important;
}
}
/* =========================================================
5. TELEFON
Timeless: 850px ve altı
========================================================= */
@media (max-width: 850px) {
/* kaldırma pasif hale getirme */
#mw-page-header-links {
display: none !important;
}
/* 1. Logonun ana link alanını ikon için kare bir kutuya dönüştür */
#p-logo-text a {
display: flex !important;
justify-content: center;
align-items: center;
font-size: 0 !important; /* "FENPEDIA" metnini tamamen gizler */
color: transparent !important; /* Yazı rengini şeffaf yapar */
width: 28px; /* Telefon için ideal logo alanı genişliği */
height: 28px; /* Telefon için ideal logo alanı yüksekliği */
padding: 0 !important; /* Varsa iç boşlukları sıfırlar */
margin: 0 auto; /* İkonu dikey/yatay ortalar */
}
/* 2. Telefon modunda favicon görselini tekrar görünür yap ve büyüt */
#p-logo-text a::before {
content: "";
display: block !important;
width: 28px; /* Mobil ekrandaki ikonun genişliği */
height: 28px; /* Mobil ekrandaki ikonun yüksekliği */
margin-right: 0 !important; /* Yazı gizlendiği için sağ boşluğu kaldır */
background-image: url('/favicon.ico');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
/* ==========================================================================
🖥️ SADECE BÜYÜK EKRANLARDA (1600PX) MAKSİMUM GENİŞLEME VE ORTALAMA KURALI
========================================================================== */
@media (min-width: 1600px) {
/* 1. Üst bar, şeritler ve arka planların ekrana %100 tam yayılmasını sağla (Yırtılmayı önler) */
#mw-header-container,
#mw-footer-container,
#mw-content-container,
.mw-header {
max-width: 100% !important;
width: 100% !important;
}
/* 2. Sitenizin ana iskeletini (sol menü ve ders içeriklerini) 1600px'de sabitle ve ortala */
#mw-content-block {
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 3. Üst bardaki logonuzu ve arama kutusunu alt içerik sınırıyla tam olarak hizala */
.ts-inner {
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
padding-left: 1em !important;
padding-right: 1em !important;
}
}
/* ==========================================================================
FENPEDIA YAN BAR (SIDEBAR) YAZI STİLİ VE DÜZENLEMELERİ
========================================================================== */
/* 1. ANA BAŞLIKLAR (SİTE YÖNETİM LİNKLERİ, Site Listeleme, Sınıfını Seç) */
.sidebar-chunk h2 {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 13px !important; /* Başlık boyutu */
font-weight: 700 !important; /* Başlık kalınlığı (700 = Bold) */
color: #2d3748 !important; /* Başlık rengi (Koyu gri/siyah) */
text-transform: uppercase; /* Harflerin hepsini büyük yapar */
letter-spacing: 0.5px !important; /* Harf arası boşluk */
padding-bottom: 6px !important; /* Alt çizgi ile arasındaki mesafe */
border-bottom: 1px solid #c8ccd1 !important; /* Başlığın altındaki ince çizgi */
margin-bottom: 8px !important; /* Başlık ile altındaki linkler arası boşluk */
}
/* 2. ALT LİNK YAZILARI (Bilgilendirme, Tüm Sorular, 5. Sınıf Sayfaları vb.) */
.sidebar-chunk ul li a {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 14px !important; /* Linklerin yazı boyutu */
font-weight: 400 !important; /* Yazı kalınlığı (400 = Normal) */
color: #4a5568 !important; /* Linklerin varsayılan rengi (Yumuşak siyah) */
line-height: 1.8 !important; /* Satır yüksekliği (Linklerin alt alta sıkışmasını önler) */
transition: color 0.2s ease !important; /* Renk geçiş yumuşaklığı */
}
/* 3. LİNKLERİN ÜZERİNE GELİNDİĞİNDEKİ (HOVER) DURUMU */
.sidebar-chunk ul li a:hover {
color: #36c !important; /* Üzerine gelince alacağı renk (Logonuzun mavisi) */
text-decoration: none !important; /* Altındaki varsayılan çizgiyi kaldırır */
font-weight: 500 !important; /* Üzerine gelince yazıyı hafifçe belirginleştirir */
}
/* 4. LİSTE ÖGELERİ ARASI BOŞLUK */
.sidebar-chunk ul li {
margin-bottom: -4px !important; /* Her link satırının altındaki ekstra boşluk */
}
/* ==========================================================================
FENPEDIA YAN BAR BAŞLIKLARINI EŞİTLEME VE TABLET BAŞLIKLARINI KORUMA
========================================================================== */
/* 1. Yan barda görünen TÜM ana başlıkları eşit ve büyük yapar */
.sidebar-chunk h2,
.sidebar-chunk h3,
.mw-portlet h3 {
font-family: 'Segoe UI', 'Arial', sans-serif !important;
font-size: 12px !important; /* Başlık boyutu */
font-weight: 700 !important; /* Başlık kalınlığı (Bold) */
color: #2d3748 !important; /* Başlık rengi */
text-transform: uppercase !important; /* Harfleri büyük yapar */
letter-spacing: 0.5px !important; /* Harf arası boşluk */
padding-bottom: 6px !important; /* Alt çizgi ile mesafe */
border-bottom: none !important; /* Alt çizgiyi tamamen kaldırır */
margin-bottom: 8px !important; /* Linkler ile arasındaki boşluk */
}
/* Logo metninin soluna favicon ekleme */
#p-logo-text a::before {
content: "";
display: inline-block;
width: 24px; /* İkon genişliği */
height: 24px; /* İkon yüksekliği */
margin-right: 10px; /* Logo yazısı ile arasındaki boşluk */
background-image: url('/favicon.ico'); /* Sitenizin ana dizinindeki ikon */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* İkon ile yazının dikeyde tam ortalanmasını sağlama */
#p-logo-text a {
display: flex !important;
align-items: center;
}
/*Kapanan kısımlar*/
#p-logo, #ca-talk, #ca-history, #firstHeading, #site-tools, #helplink, #p-cactions, #ca-viewsource {
display: none !important;
}
/* ==========================================================================
KAYNAĞI DÜZENLE BUTONUNU KORUYARAK SADECE ANASAYFA SEKmesini GİZLEME
========================================================================== */
/* Sol taraftaki "Anasayfa" sekmesini ve tüm ilgili link yapılarını tamamen kapatır */
#p-namespaces,
#ca-nstab-main,
.mw-body-header #p-namespaces-list {
display: none !important;
}
/*cat.svg arka plandan kaldırır*/
#mw-content-container { background-image: none; }
/* =========================================================
2. BÜYÜK EKRAN
1340px ve üzeri
========================================================= */
@media (min-width: 1340px) {
/* Sağ menüyü sol menünün altına taşıTimeless içerik / sağ bar düzeni */
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
/* Üst renk çubuğunu sayfa sütunlarıyla hizala */
.ts-inner {
padding: 0 0 0 1em;
}
/* yan barda gölgeleme */
#mw-content {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
#mw-site-navigation .sidebar-chunk {
background-color: #ffffff !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
}
/* =========================================================
3. MASAÜSTÜ
Timeless: 1100px - 1339px
========================================================= */
@media (min-width: 1100px) and (max-width: 1339px) {
/* yan barda gölgeleme */
#mw-content {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
#mw-site-navigation .sidebar-chunk {
background-color: #ffffff !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
}
/* =========================================================
4. TABLET
Timeless: 851px - 1099px
========================================================= */
@media (min-width: 851px) and (max-width: 1099px) {
/* Tablet görünümünde eklenen favicong görselini gizle */
#p-logo-text a::before {
display: none !important;
}
/* Hizalama stilini tablet için varsayılana döndür */
#p-logo-text a {
display: block !important;
}
}
/* =========================================================
5. TELEFON
Timeless: 850px ve altı
========================================================= */
@media (max-width: 850px) {
/* kaldırma pasif hale getirme */
#mw-page-header-links {
display: none !important;
}
/* 1. Logonun ana link alanını ikon için kare bir kutuya dönüştür */
#p-logo-text a {
display: flex !important;
justify-content: center;
align-items: center;
font-size: 0 !important; /* "FENPEDIA" metnini tamamen gizler */
color: transparent !important; /* Yazı rengini şeffaf yapar */
width: 28px; /* Telefon için ideal logo alanı genişliği */
height: 28px; /* Telefon için ideal logo alanı yüksekliği */
padding: 0 !important; /* Varsa iç boşlukları sıfırlar */
margin: 0 auto; /* İkonu dikey/yatay ortalar */
}
/* 2. Telefon modunda favicon görselini tekrar görünür yap ve büyüt */
#p-logo-text a::before {
content: "";
display: block !important;
width: 28px; /* Mobil ekrandaki ikonun genişliği */
height: 28px; /* Mobil ekrandaki ikonun yüksekliği */
margin-right: 0 !important; /* Yazı gizlendiği için sağ boşluğu kaldır */
background-image: url('/favicon.ico');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}